/* ============================================================
   GIMP 3.2 따라하기 — 스타일
   ============================================================ */

:root{
  --bg:        #f6f5f2;
  --surface:   #ffffff;
  --surface-2: #efedE8;
  --sidebar:   #22201d;
  --sidebar-2: #2e2b27;
  --side-text: #d9d4cc;
  --side-dim:  #948d83;

  --text:      #1c1a17;
  --text-2:    #57514a;
  --text-3:    #8a8279;
  --line:      #e0dcd4;
  --line-2:    #cfc9bf;

  --accent:    #b5622a;
  --accent-2:  #8f4a1d;
  --accent-sf: #fdf0e6;

  --ok:        #2f7d4f;
  --ok-sf:     #e8f5ec;
  --warn:      #9a6b00;
  --warn-sf:   #fdf4dd;
  --info:      #2b5f96;
  --info-sf:   #e9f1f9;
  --new:       #7b4bb5;
  --new-sf:    #f2ebfb;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 1px 2px rgba(28,26,23,.05), 0 8px 24px -12px rgba(28,26,23,.18);
  --shadow-lg: 0 24px 60px -20px rgba(28,26,23,.35);

  --font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
          "Segoe UI", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo",
          "Noto Sans KR", system-ui, sans-serif;
  --mono: "Cascadia Code", "D2Coding", ui-monospace, Consolas, monospace;

  --fs: 16px;
  --sidebar-w: 292px;
}

html[data-theme="dark"]{
  --bg:        #16151a;
  --surface:   #1e1d23;
  --surface-2: #26252c;
  --sidebar:   #121116;
  --sidebar-2: #1c1b21;
  --side-text: #cfcbd6;
  --side-dim:  #837e8d;

  --text:      #ece9f0;
  --text-2:    #b3aebc;
  --text-3:    #857f90;
  --line:      #322f3a;
  --line-2:    #423e4d;

  --accent:    #e08b4e;
  --accent-2:  #f0a76e;
  --accent-sf: #33261c;

  --ok:        #6cc98d;   --ok-sf:   #172a1f;
  --warn:      #e0b455;   --warn-sf: #2e2617;
  --info:      #7fb3e8;   --info-sf: #17222e;
  --new:       #b78ce8;   --new-sf:  #251c33;

  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.8);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ font-size:var(--fs); }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all; overflow-wrap:anywhere;
}

button,input{ font-family:inherit; font-size:inherit; color:inherit; }
a{ color:var(--accent); }

::selection{ background:var(--accent); color:#fff; }

#app{ display:flex; min-height:100vh; }

/* ── 사이드바 ───────────────────────────────────────────── */
#sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--sidebar); color:var(--side-text);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden;
  z-index:40; scrollbar-width:thin;
}
#sidebar::-webkit-scrollbar{ width:8px; }
#sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:99px; }

.brand{
  display:flex; align-items:center; gap:.7rem;
  padding:1.15rem 1.1rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  position:sticky; top:0; background:var(--sidebar); z-index:2;
}
.brand-mark{ flex:0 0 auto; display:flex; }
.brand-text{ display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.brand-text strong{ font-size:1.02rem; color:#fff; letter-spacing:-.01em; }
.brand-text span{ font-size:.74rem; color:var(--side-dim); }

.search-wrap{ position:relative; padding:.85rem .9rem .6rem; }
#search{
  width:100%; padding:.62rem .8rem; padding-right:2.1rem;
  background:var(--sidebar-2); color:var(--side-text);
  border:1px solid rgba(255,255,255,.09); border-radius:10px;
  font-size:.87rem; outline:none;
}
#search::placeholder{ color:var(--side-dim); }
#search:focus{ border-color:var(--accent); background:rgba(255,255,255,.05); }
.search-hint{
  position:absolute; right:1.45rem; top:1.28rem;
  font-family:var(--mono); font-size:.68rem; color:var(--side-dim);
  border:1px solid rgba(255,255,255,.16); border-radius:5px;
  padding:.02rem .3rem; pointer-events:none;
}
#search:focus + .search-hint{ opacity:0; }

.overall{ padding:.5rem 1.1rem .9rem; }
.overall-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.76rem; color:var(--side-dim); margin-bottom:.35rem;
}
.overall-top strong{ color:var(--accent-2); font-size:.92rem; }
.overall-sub{ font-size:.71rem; color:var(--side-dim); margin-top:.35rem; }
.bar{ height:6px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden; }
.bar-fill{
  height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .45s cubic-bezier(.2,.8,.3,1);
}

/* 사이드바를 목적별 네 묶음으로 나눈다 — 매뉴얼 / 따라하기 / 곁에 두기 / 앱 정보 */
.side-group{ padding:.5rem .6rem; }
.side-group + .side-group{ border-top:1px solid rgba(255,255,255,.07); }
.sg-label{
  padding:.15rem .55rem .3rem; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; color:var(--side-dim); opacity:.75;
}
/* 묶음이 넷이라 짧은 화면에서는 사이드바 전체가 스크롤되게 둔다.
   안쪽에 또 스크롤을 두면 코스 목록이 눌려 버린다. */
.sg-nav{ flex:0 0 auto; }
#nav{ padding:.1rem 0 .2rem; }

.nav-course{ margin-bottom:.25rem; }
.nav-course-btn{
  width:100%; display:flex; align-items:center; gap:.6rem;
  padding:.55rem .55rem; background:none; border:0; border-radius:9px;
  color:var(--side-text); cursor:pointer; text-align:left;
}
.nav-course-btn:hover{ background:rgba(255,255,255,.06); }
.nav-course-btn .ci{ font-size:1.05rem; width:1.4rem; text-align:center; flex:0 0 auto; }
.nav-course-btn .ct{ flex:1; min-width:0; font-size:.87rem; font-weight:600; letter-spacing:-.01em; }
.nav-course-btn .cn{ font-size:.7rem; color:var(--side-dim); font-variant-numeric:tabular-nums; }
.nav-course-btn .cx{ font-size:.62rem; color:var(--side-dim); transition:transform .2s; }
.nav-course.open .cx{ transform:rotate(90deg); }

.nav-lessons{ display:none; padding:.1rem 0 .35rem .5rem; }
.nav-course.open .nav-lessons{ display:block; }

.nav-lesson{
  width:100%; display:flex; align-items:flex-start; gap:.5rem;
  padding:.4rem .5rem; background:none; border:0; border-radius:8px;
  color:var(--side-dim); cursor:pointer; text-align:left;
  font-size:.815rem; line-height:1.45;
}
.nav-lesson:hover{ background:rgba(255,255,255,.05); color:var(--side-text); }
.nav-lesson.active{ background:var(--accent); color:#fff; font-weight:600; }
.nav-lesson.done .nl-dot{ color:var(--ok); }
.nav-lesson.active .nl-dot{ color:#fff; }
.nl-dot{ flex:0 0 auto; font-size:.7rem; margin-top:.28rem; }

.side-foot{ padding-bottom:.9rem; }
.side-link{
  width:100%; display:flex; align-items:center; gap:.5rem;
  text-align:left; padding:.42rem .55rem; border:0; border-radius:8px;
  background:none; color:var(--side-dim); cursor:pointer; font-size:.81rem;
}
.side-link em{
  margin-left:auto; font-style:normal; font-size:.68rem; opacity:.65;
  font-variant-numeric:tabular-nums;
}
.side-link:hover{ background:rgba(255,255,255,.06); color:var(--side-text); }
.side-link.active{ background:rgba(255,255,255,.1); color:#fff; }
.side-link.active em{ opacity:.8; }

/* ── 본문 ──────────────────────────────────────────────── */
#main{ flex:1; min-width:0; display:flex; flex-direction:column; outline:none; }

#topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem 1.4rem; min-height:52px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
#crumbs{ flex:1; min-width:0; font-size:.82rem; color:var(--text-3);
         white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#crumbs b{ color:var(--text-2); font-weight:600; }
.top-actions{ display:flex; gap:.3rem; }

.icon-btn{
  width:34px; height:34px; display:grid; place-items:center;
  background:none; border:1px solid transparent; border-radius:9px;
  cursor:pointer; color:var(--text-2); font-size:.95rem; line-height:1;
}
.icon-btn:hover{ background:var(--surface-2); border-color:var(--line); }
#menu-toggle{ display:none; }

#view{ flex:1; padding:1.6rem 1.4rem 5rem; }
.wrap{ max-width:1120px; margin:0 auto; }
.wrap-wide{ max-width:1560px; margin:0 auto; }

/* ── 공통 타이포 ───────────────────────────────────────── */
h1,h2,h3{ letter-spacing:-.02em; line-height:1.35; }
h1{ font-size:1.9rem; margin:.2rem 0 .5rem; }
h2{ font-size:1.25rem; margin:2.4rem 0 .8rem; }
h3{ font-size:1.02rem; margin:1.6rem 0 .5rem; }
p{ margin:.6rem 0; color:var(--text-2); }
.lead{ font-size:1.03rem; color:var(--text-2); margin:.4rem 0 1.2rem; }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}

/* 뱃지 */
.badge{
  display:inline-flex; align-items:center; gap:.28rem;
  font-size:.71rem; font-weight:700; letter-spacing:.01em;
  padding:.16rem .5rem; border-radius:99px; white-space:nowrap;
}
.badge.lv{ background:var(--surface-2); color:var(--text-2); border:1px solid var(--line); }
.badge.new{ background:var(--new-sf); color:var(--new); }
.badge.time{ background:var(--info-sf); color:var(--info); }
.badge.done{ background:var(--ok-sf); color:var(--ok); }

/* 메뉴 경로 · 단축키 */
.menupath{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:.28rem;
  background:var(--accent-sf); border:1px solid color-mix(in srgb,var(--accent) 25%, transparent);
  border-radius:7px; padding:.12rem .5rem; margin:0 .1rem;
  font-size:.87em; font-weight:600; color:var(--accent-2);
  vertical-align:baseline;
}
.menupath .sep{ opacity:.5; font-weight:400; }
kbd{
  display:inline-block; font-family:var(--mono); font-size:.8em; font-weight:600;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line-2); border-bottom-width:2px; border-radius:6px;
  padding:.05rem .38rem; margin:0 .08rem; white-space:nowrap;
  line-height:1.5;
}

/* 알림 박스 */
.note{
  display:flex; gap:.6rem; padding:.7rem .85rem; border-radius:var(--radius-sm);
  font-size:.9rem; line-height:1.6; margin:.55rem 0;
}
.note .ni{ flex:0 0 auto; font-size:.95rem; line-height:1.6; }
.note.tip{  background:var(--ok-sf);   color:var(--ok);   }
.note.warn{ background:var(--warn-sf); color:var(--warn); }
.note.info{ background:var(--info-sf); color:var(--info); }
.note.new{  background:var(--new-sf);  color:var(--new);  }
.note b{ font-weight:700; }

/* ── 문서 머리말 / 라이선스 꼬리말 ─────────────────────── */
.doc-head{
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  margin:0 0 1.1rem; padding:.3rem .7rem;
  font-size:.76rem; color:var(--text-3);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:99px; width:fit-content;
}
.dh-basis{ font-weight:700; color:var(--accent-2); }
.dh-sep{ opacity:.45; }
.dh-date{ font-variant-numeric:tabular-nums; }

.doc-foot{
  margin-top:3rem; padding-top:1.2rem;
  border-top:1px solid var(--line);
  font-size:.8rem; color:var(--text-3); line-height:1.7;
}
.df-title{ margin:0 0 .35rem; font-weight:700; color:var(--text-2); font-size:.86rem; }
.df-lic{ margin:0 0 .5rem; display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; }
.df-lic a{
  font-weight:700; color:var(--accent); text-decoration:none;
  border:1px solid color-mix(in srgb,var(--accent) 35%, transparent);
  border-radius:5px; padding:.05rem .4rem;
}
.df-lic a:hover{ background:var(--accent-sf); }
.df-note{ font-size:.76rem; }
.df-dis{ margin:0 0 .5rem; }
.df-how{ margin:0 0 .4rem; }
.df-how b{ color:var(--text-2); }
.df-src{ margin:0; font-size:.76rem; }
.doc-foot a{ color:var(--text-3); text-decoration:underline; text-underline-offset:2px; }
.doc-foot a:hover{ color:var(--accent); }

@media print{ .doc-foot{ page-break-inside:avoid; } }

/* ── 홈 ────────────────────────────────────────────────── */
.hero{
  padding:2rem 1.9rem; border-radius:var(--radius); margin-bottom:1.6rem;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; box-shadow:var(--shadow);
}
.hero h1{ color:#fff; margin:0 0 .45rem; font-size:1.95rem; }
.hero p{ color:rgba(255,255,255,.92); margin:0 0 1.1rem; max-width:52ch; font-size:1rem; }
.hero-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1.1rem; border-radius:10px; border:1px solid transparent;
  font-size:.92rem; font-weight:600; cursor:pointer; text-decoration:none;
  transition:transform .12s, background .15s;
}
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--accent); color:#fff; }
.btn.primary:hover{ background:var(--accent-2); }
.btn.light{ background:#fff; color:var(--accent-2); }
.btn.light:hover{ background:rgba(255,255,255,.88); }
.btn.ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn.ghost:hover{ background:rgba(255,255,255,.14); }
.btn.quiet{ background:var(--surface); color:var(--text-2); border-color:var(--line); }
.btn.quiet:hover{ background:var(--surface-2); }
.btn:disabled{ opacity:.4; cursor:default; }

.course-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.course-card{
  padding:1.1rem 1.15rem; cursor:pointer; text-align:left; width:100%;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.course-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--accent); }
.cc-top{ display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem; }
.cc-icon{ font-size:1.5rem; }
.cc-title{ font-size:1.02rem; font-weight:700; letter-spacing:-.015em; flex:1; }
.cc-sub{ font-size:.85rem; color:var(--text-3); margin-bottom:.9rem; line-height:1.55; }
.cc-meta{ display:flex; justify-content:space-between; align-items:center;
          font-size:.75rem; color:var(--text-3); margin-bottom:.4rem; }
.cc-bar{ height:5px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.cc-bar > i{ display:block; height:100%; background:var(--accent); border-radius:99px;
             transition:width .45s cubic-bezier(.2,.8,.3,1); }
.cc-bar.full > i{ background:var(--ok); }

/* ── 코스 목차 ──────────────────────────────────────────── */
.lesson-list{ display:grid; gap:.55rem; margin-top:1rem; }
.lesson-row{
  display:flex; align-items:center; gap:.85rem; width:100%; text-align:left;
  padding:.85rem 1rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); cursor:pointer; transition:border-color .15s, transform .12s;
}
.lesson-row:hover{ border-color:var(--accent); transform:translateX(2px); }
.lr-num{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-size:.78rem; font-weight:700;
  background:var(--surface-2); color:var(--text-3);
}
.lesson-row.done .lr-num{ background:var(--ok); color:#fff; }
.lr-body{ flex:1; min-width:0; }
.lr-title{ font-weight:600; font-size:.95rem; margin-bottom:.12rem; }
.lr-goal{ font-size:.8rem; color:var(--text-3); line-height:1.5; }
.lr-tags{ display:flex; gap:.3rem; flex-wrap:wrap; margin-top:.35rem; }
.lr-go{ color:var(--text-3); font-size:1rem; flex:0 0 auto; }

/* ── 레슨 뷰 ────────────────────────────────────────────── */
.lesson-head{ margin-bottom:1.2rem; }
.lesson-tags{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem; }
.lesson-goal{
  display:flex; gap:.65rem; padding:.85rem 1rem; margin:1rem 0 1.5rem;
  background:var(--accent-sf); border-radius:var(--radius-sm);
  border-left:3px solid var(--accent);
}
.lesson-goal .lg-l{ font-size:.72rem; font-weight:700; color:var(--accent-2);
                    letter-spacing:.04em; flex:0 0 auto; padding-top:.15rem; }
.lesson-goal .lg-t{ font-size:.94rem; color:var(--text); }

.prep{ padding:1rem 1.15rem; margin-bottom:1.5rem; }
.prep h3{ margin:0 0 .5rem; font-size:.9rem; color:var(--text-2); }
.prep ul{ margin:0; padding-left:1.15rem; }
.prep li{ font-size:.89rem; color:var(--text-2); margin:.25rem 0; }

/* 단계 진행바 */
.step-progress{
  position:sticky; top:52px; z-index:20; margin:0 -1.4rem 1.2rem; padding:.6rem 1.4rem;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.sp-inner{ max-width:820px; margin:0 auto; display:flex; align-items:center; gap:.8rem; }
.sp-text{ font-size:.79rem; color:var(--text-3); white-space:nowrap;
          font-variant-numeric:tabular-nums; }
.sp-bar{ flex:1; height:6px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.sp-bar > i{ display:block; height:100%; background:var(--accent); border-radius:99px;
             transition:width .4s cubic-bezier(.2,.8,.3,1); }
.sp-bar.full > i{ background:var(--ok); }

/* 단계 카드 */
.steps{ display:grid; gap:.75rem; counter-reset:step; }
.step{
  display:flex; gap:.9rem; padding:1rem 1.15rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  transition:border-color .18s, opacity .25s, background .18s;
}
.step.done{ opacity:.62; background:var(--surface-2); }
.step.current{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-sf), var(--shadow); }

.step-check{
  flex:0 0 auto; width:28px; height:28px; margin-top:.1rem;
  border:2px solid var(--line-2); border-radius:50%;
  background:var(--surface); cursor:pointer; display:grid; place-items:center;
  color:transparent; font-size:.8rem; font-weight:700; transition:all .18s;
}
.step-check:hover{ border-color:var(--accent); }
.step.done .step-check{ background:var(--ok); border-color:var(--ok); color:#fff; }
.step.current .step-check{ border-color:var(--accent); }

.step-body{ flex:1; min-width:0; }
.step-n{ font-size:.7rem; font-weight:700; color:var(--accent);
         letter-spacing:.06em; margin-bottom:.2rem; }
.step.done .step-n{ color:var(--text-3); }
.step-do{ font-size:1rem; font-weight:600; line-height:1.6; margin-bottom:.15rem; }
.step-do .menupath, .step-do kbd{ font-weight:600; }
.step-why{ font-size:.87rem; color:var(--text-3); line-height:1.6; margin-top:.3rem; }
.step-extra{ margin-top:.5rem; }
.step-keys{ margin-top:.45rem; font-size:.85rem; color:var(--text-2); }
.step-keys .kl{ font-size:.75rem; color:var(--text-3); margin-right:.3rem; }

/* 결과 확인 */
.checkpoint{
  margin-top:1.5rem; padding:1.15rem 1.25rem;
  background:var(--ok-sf); border-radius:var(--radius);
  border:1px solid color-mix(in srgb, var(--ok) 28%, transparent);
}
.checkpoint h3{ margin:0 0 .4rem; font-size:.95rem; color:var(--ok); }
.checkpoint p{ margin:0; color:var(--text-2); font-size:.92rem; }

/* 흔한 실수 */
.pitfalls{ margin-top:1.5rem; }
.pitfall{
  padding:.85rem 1rem; border-radius:var(--radius-sm); margin-bottom:.5rem;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--warn);
}
.pf-q{ font-weight:600; font-size:.92rem; margin-bottom:.25rem; }
.pf-a{ font-size:.87rem; color:var(--text-2); line-height:1.65; }

/* 실전 과제 */
.practice{
  margin-top:1.5rem; padding:1.15rem 1.25rem;
  background:var(--info-sf); border-radius:var(--radius);
  border:1px solid color-mix(in srgb, var(--info) 25%, transparent);
}
.practice h3{ margin:0 0 .4rem; font-size:.95rem; color:var(--info); }
.practice p{ margin:0; color:var(--text-2); font-size:.92rem; }

/* 하단 내비 */
.lesson-nav{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line);
}
.lesson-nav .spacer{ flex:1; }
.docs-links{ margin-top:1.6rem; font-size:.83rem; color:var(--text-3); }
.docs-links a{ color:var(--text-3); text-decoration:underline; text-underline-offset:3px; }
.docs-links a:hover{ color:var(--accent); }

/* 완료 축하 */
.done-toast{
  position:fixed; left:50%; bottom:2rem; transform:translate(-50%, 200%);
  background:var(--ok); color:#fff; padding:.8rem 1.4rem; border-radius:99px;
  box-shadow:var(--shadow-lg); font-weight:600; font-size:.92rem; z-index:200;
  transition:transform .45s cubic-bezier(.2,1.2,.3,1), opacity .3s, visibility .3s;
  /* 숨을 때 화면 밑에 녹색 조각이 남지 않도록 확실히 감춘다 */
  opacity:0; visibility:hidden; pointer-events:none; white-space:nowrap;
}
.done-toast.show{ transform:translate(-50%, 0); opacity:1; visibility:visible; }

/* ── 설명 그림 (인라인 SVG) ─────────────────────────────── */
.fig{
  margin:1.1rem 0 1.3rem; padding:1.1rem 1rem .9rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  overflow-x:auto;
}
.fig svg{ display:block; width:100%; min-width:560px; height:auto; }
.fig figcaption{
  margin-top:.7rem; padding-top:.6rem; border-top:1px solid var(--line);
  font-size:.87rem; color:var(--text-3); text-align:center; line-height:1.6;
}
.step .fig{ margin:.7rem 0 .2rem; box-shadow:none; }

/* 공식 매뉴얼 스크린샷 — 단계 본문 안에 */
.shotfig{ text-align:center; }
.sf-row{ display:flex; gap:.6rem; justify-content:center; align-items:flex-start;
         flex-wrap:wrap; }
.sf-cell{ display:flex; flex-direction:column; align-items:center; gap:.35rem;
          flex:0 1 auto; min-width:0; }
.shotfig img{
  max-width:100%; height:auto; border-radius:8px; cursor:zoom-in;
  background:#fff; border:1px solid var(--line); padding:3px;
}
.shotfig.multi img{ max-height:300px; width:auto; }
.shotfig img:hover{ border-color:var(--accent); }
.sf-cap{ font-size:.82rem; color:var(--text-2); font-weight:600; line-height:1.45;
         text-align:center; max-width:30ch; }
.step.done .shotfig img{ filter:grayscale(.35); }

@media (max-width: 640px){
  .shotfig.multi img{ max-height:200px; }
}

/* SVG 안에서 쓰는 색 — 테마에 따라 자동으로 바뀝니다 */
.fig{
  --f-line:   var(--line-2);
  --f-fill:   var(--surface-2);
  --f-canvas: color-mix(in srgb, var(--text) 8%, var(--surface));
}
.fig .f-win, .fig .f-box, .fig .f-row{
  fill:var(--f-fill); stroke:var(--f-line); stroke-width:1;
}
.fig .f-bar{ fill:var(--surface-2); stroke:none; }
.fig .f-hi{ fill:none; stroke:var(--accent); stroke-width:1.6; }
/* 결과로 남는 영역을 칠할 때 */
.fig .f-hi-fill{ fill:var(--accent); fill-opacity:.30; stroke:none; }
.fig .f-canvas{ fill:var(--f-canvas); stroke:var(--f-line); }
.fig .f-img{ fill:color-mix(in srgb, var(--info) 22%, var(--surface)); stroke:none; }
.fig .f-stroke{ fill:none; stroke:var(--f-line); stroke-width:1; }
.fig .f-stroke-acc{ fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:5 3; }
.fig .f-thumb{ fill:color-mix(in srgb, var(--info) 35%, var(--surface)); stroke:var(--f-line); }
.fig .f-row-hi{ fill:var(--accent-sf); stroke:var(--accent); }
.fig .f-row-warn{ fill:var(--warn-sf); stroke:var(--warn); }
/* 원본을 지키는 쪽을 초록으로, 주의 상자를 노랑으로 */
.fig .f-box-ok{ fill:var(--ok-sf); stroke:var(--ok); stroke-width:1.4; }
.fig .f-note{ fill:var(--warn-sf); stroke:var(--warn); stroke-width:1.2; }
.fig .f-dim{ fill:color-mix(in srgb, #000 45%, transparent); stroke:none; }

.fig text{ font-family:var(--font); fill:var(--text-2); }
.fig .f-sm{ font-size:12px; fill:var(--text-3); }
.fig .f-lb{ font-size:13.5px; font-weight:700; fill:var(--text); }
.fig .f-big{ font-size:19px; font-weight:700; fill:var(--text); }
.fig .f-bold{ font-size:13.5px; font-weight:800; fill:var(--text); }
.fig .f-num{ font-size:14px; font-weight:700; fill:var(--accent); }
.fig .f-warn{ font-size:12px; font-weight:600; fill:var(--warn); }
.fig .f-ok-t{ font-size:12px; font-weight:600; fill:var(--ok); }

.fig-ar-head{ fill:var(--accent); }
.fig .f-arrow{ stroke:var(--accent); stroke-width:2; fill:none; marker-end:url(#fig-ar); }
.fig .f-arrow-d{ stroke:var(--accent); stroke-width:2; stroke-dasharray:4 3;
                 fill:none; marker-end:url(#fig-ar); }
.fig .f-axis{ fill:none; stroke:var(--f-line); stroke-width:1.5; }

.fig .f-ok{ fill:var(--ok-sf); stroke:var(--ok); stroke-width:1.4; }
.fig .f-info{ fill:var(--info-sf); stroke:var(--info); stroke-width:1.4; }
.fig .f-warnbox{ fill:var(--warn-sf); stroke:var(--warn); stroke-width:1.4; }

.fig .f-plate{ fill:color-mix(in srgb, var(--info) 20%, var(--surface));
               stroke:var(--info); stroke-width:1.2; opacity:.92; }
.fig .f-p1{ fill:color-mix(in srgb, var(--ok) 26%, var(--surface)); stroke:var(--ok); }
.fig .f-p2{ fill:color-mix(in srgb, var(--info) 26%, var(--surface)); stroke:var(--info); }
.fig .f-p3{ fill:color-mix(in srgb, var(--new) 26%, var(--surface)); stroke:var(--new); }
.fig .f-dot-a{ fill:var(--accent); }
.fig .f-dot-b{ fill:var(--new); }

.fig .f-hist{ fill:color-mix(in srgb, var(--text) 30%, transparent); stroke:none; }
.fig .f-tri-b{ fill:#111; stroke:var(--f-line); }
.fig .f-tri-g{ fill:#999; stroke:var(--f-line); }
.fig .f-tri-w{ fill:#fff; stroke:var(--f-line); }

.fig .f-sel-on{ fill:color-mix(in srgb, var(--accent) 45%, transparent);
                stroke:var(--accent); stroke-width:1.6; }
.fig .f-sel-off{ fill:none; stroke:var(--f-line); stroke-width:1.4; stroke-dasharray:4 3; }
.fig .f-sel-cut{ fill:none; stroke:var(--f-line); stroke-width:1.4; stroke-dasharray:4 3; }
.fig .f-guide{ fill:none; stroke:var(--accent); stroke-width:1; stroke-dasharray:4 4; opacity:.8; }

.fig .f-pixel rect{ fill:color-mix(in srgb, var(--info) 55%, var(--surface));
                    stroke:var(--surface); stroke-width:1.5; }
.fig .f-vec{ stroke:var(--ok); stroke-width:9; stroke-linecap:round; fill:none; }

.fig .f-fx{ fill:var(--new-sf); stroke:var(--new); stroke-width:1.4; }
.fig .f-fx-t{ font-size:10px; font-weight:800; fill:var(--new); }

.fig .f-src{ fill:none; stroke:var(--ok); stroke-width:2.4; stroke-dasharray:5 3; }
.fig .f-blemish{ fill:color-mix(in srgb, var(--warn) 65%, transparent); stroke:var(--warn); }
.fig .f-newcanvas{ fill:none; stroke:var(--accent); stroke-width:2; stroke-dasharray:6 4; }

.fig .f-path{ fill:none; stroke:var(--text-3); stroke-width:1.6; }
.fig .f-node{ fill:var(--accent); }
.fig .f-btn{ fill:var(--accent); stroke:none; }
.fig .f-btn-t{ font-size:11px; font-weight:700; fill:#fff; }
.fig .f-fillshape{ fill:color-mix(in srgb, var(--accent) 40%, transparent);
                   stroke:var(--accent); stroke-width:1.6; }
.fig .f-checker{ fill:url(#fig-checker); stroke:var(--f-line); }

@media (max-width: 640px){
  .fig{ padding:.7rem .5rem .6rem; }
  .fig svg{ min-width:440px; }
}

/* ── 표 (단축키 · 용어) ─────────────────────────────────── */
.tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th{
  text-align:left; padding:.5rem .8rem; font-size:.74rem; font-weight:700;
  color:var(--text-3); letter-spacing:.04em; border-bottom:1px solid var(--line-2);
}
.tbl td{ padding:.52rem .8rem; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover{ background:var(--surface-2); }
.tbl td:first-child{ white-space:nowrap; width:1%; }
.tbl-card{ overflow-x:auto; padding:.4rem .3rem; margin-bottom:1.6rem; }

.gl-term{ font-weight:700; }
.gl-en{ font-size:.78rem; color:var(--text-3); font-weight:400; margin-left:.35rem; }

.filter-chips{ display:flex; gap:.4rem; flex-wrap:wrap; margin:1rem 0 1.4rem; }
.chip{
  padding:.35rem .8rem; border-radius:99px; font-size:.82rem; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--text-2);
}
.chip:hover{ border-color:var(--accent); }
.chip.on{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }

/* ── 본문 안의 검색창 ────────────────────────────────────
   단원별 보기·기능 색인이 함께 쓴다. 화면마다 따로 두면 모양이 어긋난다. */
.q-input{
  width:100%; padding:.72rem .95rem; margin:.4rem 0 .2rem;
  font:inherit; font-size:.95rem;           /* 브라우저 기본 입력창 글씨체를 덮는다 */
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:10px; outline:none;
  -webkit-appearance:none; appearance:none;
}
.q-input::placeholder{ color:var(--text-3); opacity:1; }
.q-input::-webkit-search-cancel-button{ cursor:pointer; }
.q-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-sf); }

.man-tools{ display:flex; gap:.4rem; margin:.8rem 0 1rem; }
.man-count{ font-size:.82rem; color:var(--text-3); margin:1rem 0 .5rem; }

.man-group{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); margin-bottom:.6rem; overflow:hidden;
}
.man-head{
  width:100%; display:flex; align-items:center; gap:.6rem;
  padding:.85rem 1rem; background:none; border:0; cursor:pointer; text-align:left;
}
.man-head:hover{ background:var(--surface-2); }
.man-head-link{ text-decoration:none; color:inherit; }
.man-head-link:hover .mh-t{ color:var(--accent); }
.mh-x-out{ transform:none !important; color:var(--text-3); }
.man-head .mh-x{ font-size:.62rem; color:var(--text-3); transition:transform .2s; flex:0 0 auto; }
.man-group.open .mh-x{ transform:rotate(90deg); }
.man-head .mh-t{ font-weight:700; font-size:1rem; letter-spacing:-.015em; }
.man-head .mh-en{ font-size:.76rem; color:var(--text-3); }
.man-head .mh-n{
  margin-left:auto; font-size:.72rem; color:var(--text-3);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:99px; padding:.1rem .5rem; font-variant-numeric:tabular-nums;
}
.man-group.open > .man-list{ border-top:1px solid var(--line); }

.man-chap{ border-bottom:1px solid var(--line); }
.man-chap:last-child{ border-bottom:0; }
.man-chead{
  width:100%; display:flex; align-items:center; gap:.55rem;
  padding:.6rem 1rem .6rem 1.6rem; background:none; border:0;
  cursor:pointer; text-align:left;
}
.man-chead:hover{ background:var(--surface-2); }
.man-chead .mc-t{ font-weight:600; font-size:.92rem; }
.man-chap.open > .mh-x, .man-chap.open .mh-x{ transform:rotate(90deg); }
.man-chap.open > .man-list{
  border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--text) 3%, transparent);
}

.card.man-list{ padding:.3rem 0; }

.man-item{
  display:block;
  border-bottom:1px solid var(--line);
}
.man-item:last-child{ border-bottom:0; }
.man-item:hover{ background:var(--surface-2); }
.man-item.open{ background:var(--surface); }
.man-item.open > .mi-row{
  position:sticky; top:0; z-index:5;
  background:color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-bottom:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
.mi-link{
  flex:0 1 auto; min-width:0; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  padding:.5rem 1rem; color:var(--text-2); text-decoration:none; font-size:.9rem;
}
.mi-link:hover .mi-t{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.mi-t{ color:var(--text); }
.mi-en{ font-size:.75rem; color:var(--text-3); }

.man-item.lv1 .mi-link{ padding-left:1rem;    font-weight:700; }
.man-item.lv2 .mi-link{ padding-left:2.1rem;  font-weight:600; }
.man-item.lv3 .mi-link{ padding-left:3.2rem; }
.man-item.lv4 .mi-link{ padding-left:4.3rem;  font-size:.86rem; }
.man-item.lv5 .mi-link{ padding-left:5.4rem;  font-size:.86rem; }
.man-item.lv1{ background:color-mix(in srgb, var(--accent) 5%, transparent); }

.mi-lesson{
  flex:0 0 auto; margin-right:.7rem; padding:.22rem .6rem;
  font-size:.74rem; font-weight:700; white-space:nowrap;
  background:var(--accent-sf); color:var(--accent-2);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius:99px; cursor:pointer;
}
.mi-lesson:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

@media (max-width: 640px){
  .man-item.lv3 .mi-link{ padding-left:2.2rem; }
  .man-item.lv4 .mi-link{ padding-left:2.8rem; }
  .man-item.lv5 .mi-link{ padding-left:3.4rem; }
}

/* ── 매뉴얼 목록의 한 줄 ─────────────────────────────── */
.mi-row{ display:flex; align-items:center; gap:.4rem; width:100%; }
.mi-row::after{ content:""; flex:1 1 auto; }
.mi-exp-sp{ flex:0 0 auto; width:20px; margin-left:.55rem; }
.man-item.has-card .mi-t{ font-weight:600; }
.mi-badge{
  flex:0 0 auto; font-size:.66rem; font-weight:700; color:var(--ok);
  background:var(--ok-sf); border-radius:99px; padding:.08rem .42rem;
}

/* 공식 매뉴얼 스크린샷 갤러리 */
.mc-shots{
  column-width:400px; column-gap:.7rem;
  padding:.1rem 0 .2rem; margin:0 0 1rem;
}
.mc-shot{
  display:block; width:100%; padding:0; border:1px solid var(--line-2);
  break-inside:avoid; margin:0 0 .7rem;
  border-radius:8px; background:var(--surface); cursor:zoom-in;
  overflow:hidden; line-height:0; transition:border-color .15s, transform .12s;
}
.mc-shot:hover{ border-color:var(--accent); transform:translateY(-1px); }
.mc-shot img{
  display:block; width:auto; max-width:100%; height:auto; max-height:400px;
  margin:0 auto; object-fit:contain; background:#fff; padding:5px;
}
/* 작은 도구 아이콘은 억지로 늘리지 않는다 */
.mc-shot.icon img{ width:auto; max-width:100%; min-width:44px; min-height:44px;
                   margin:0 auto; object-fit:contain; }
html[data-theme="dark"] .mc-shot img{ background:#e8e8e8; }
.ms-cap{
  display:block; padding:.4rem .6rem; line-height:1.5;
  font-size:.76rem; color:var(--text-3); text-align:left;
  border-top:1px solid var(--line);
}

/* 레슨 하단 — 공식 매뉴얼 실제 화면 모음 */
.lesson-shots{ margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.lesson-shots h2{ margin:0 0 .2rem; font-size:1.05rem; }
.ls-n{ font-size:.75rem; font-weight:600; color:var(--text-3); margin-left:.3rem; }
.ls-hint{ margin:0 0 .9rem; font-size:.85rem; color:var(--text-3); }
.ls-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:.8rem; }
.ls-item{ margin:0; background:var(--surface); border:1px solid var(--line);
          border-radius:var(--radius-sm); overflow:hidden; }
.ls-item img{
  display:block; width:100%; height:230px; object-fit:contain;
  background:#fff; padding:6px; cursor:zoom-in;
}
.ls-item:hover{ border-color:var(--accent); }
.ls-item figcaption{
  padding:.4rem .55rem; font-size:.75rem; color:var(--text-3);
  border-top:1px solid var(--line); line-height:1.45;
}
.ls-src{ margin:.8rem 0 0; font-size:.75rem; color:var(--text-3); }

/* 크게 보기 */
#lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(12,10,9,.88); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:2rem 1rem; cursor:zoom-out;
}
#lightbox[hidden]{ display:none; }
.lb-inner{ max-width:min(1100px,94vw); display:flex; flex-direction:column;
           align-items:center; gap:.7rem; }
.lb-img{
  max-width:100%; max-height:76vh; object-fit:contain; cursor:default;
  background:#fff; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lb-bar{ display:flex; align-items:center; gap:.8rem; color:#fff; flex-wrap:wrap;
         justify-content:center; }
.lb-cap{ font-size:.88rem; color:rgba(255,255,255,.9); max-width:60ch;
         text-align:center; }
.lb-n{ font-size:.78rem; color:rgba(255,255,255,.55);
       font-variant-numeric:tabular-nums; }
.lb-nav{
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  color:#fff; font-size:1rem; line-height:1;
}
.lb-nav:hover{ background:rgba(255,255,255,.28); }
.lb-src{ font-size:.74rem; color:rgba(255,255,255,.45); }


/* ── 학습 계획 ─────────────────────────────────────────── */
.plan-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
             gap:1rem; margin:1.4rem 0; }
.pstat{ padding:1rem 1.1rem; background:var(--surface);
        border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.ps-top{ display:flex; justify-content:space-between; align-items:baseline;
         font-size:.82rem; color:var(--text-3); margin-bottom:.45rem; }
.ps-top strong{ font-size:1.15rem; color:var(--accent); }
.pstat .bar{ background:var(--surface-2); }
.ps-sub{ font-size:.76rem; color:var(--text-3); margin-top:.4rem; }

.today-card{
  padding:1.4rem 1.5rem; border-radius:var(--radius); margin:1.4rem 0 2rem;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color:#fff; box-shadow:var(--shadow);
}
.tc-lb{ font-size:.72rem; font-weight:700; letter-spacing:.08em;
        color:rgba(255,255,255,.85); margin-bottom:.3rem; }
.tc-t{ margin:0 0 .4rem; color:#fff; font-size:1.35rem; }
.tc-g{ margin:0; color:rgba(255,255,255,.92); font-size:.95rem; }
.tc-actions{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.tc-shots{
  display:flex; gap:.5rem; overflow-x:auto; margin-top:1rem; padding-bottom:.4rem;
}
.tc-shots img{
  flex:0 0 auto; max-height:84px; width:auto; border-radius:7px;
  background:#fff; padding:3px; cursor:zoom-in;
  border:1px solid rgba(255,255,255,.45);
}
.tc-shots img:hover{ border-color:#fff; }
.tc-shots::-webkit-scrollbar{ height:6px; }
.tc-shots::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.35); border-radius:99px; }

.plan-list{ display:grid; gap:.55rem; }
.plan-day{
  display:flex; gap:.9rem; padding:.9rem 1.05rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.plan-day.pending{ opacity:.62; }
.plan-day.studied{ background:var(--ok-sf); border-color:color-mix(in srgb,var(--ok) 30%,transparent); }
/* 두 자리 수(10일차)가 줄바꿈되지 않도록 폭과 줄높이를 고정 */
.pd-check{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  border:2px solid var(--line-2); background:var(--surface);
  font-size:.82rem; font-weight:700; color:var(--text-3); cursor:pointer;
  line-height:1; padding:0; white-space:nowrap;
  display:flex; align-items:center; justify-content:center;
}
.pd-check:hover{ border-color:var(--accent); color:var(--accent); }
.plan-day.studied .pd-check{ background:var(--ok); border-color:var(--ok); color:#fff; }
.pd-body{ flex:1; min-width:0; }
.pd-title{ font-weight:700; font-size:.95rem; margin-bottom:.15rem; }
.pd-goal{ font-size:.83rem; color:var(--text-3); line-height:1.55; }
.pd-topics{ display:flex; gap:.3rem; flex-wrap:wrap; margin:.4rem 0 .45rem; }
.pd-bar{ height:5px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.pd-bar > i{ display:block; height:100%; background:var(--accent); border-radius:99px;
             transition:width .45s cubic-bezier(.2,.8,.3,1); }
.pd-meta{ font-size:.74rem; color:var(--text-3); margin-top:.35rem;
          font-variant-numeric:tabular-nums; }

/* ── 검색 결과 ─────────────────────────────────────────── */
#search-panel{
  position:fixed; inset:0; z-index:100;
  background:rgba(20,18,16,.42); backdrop-filter:blur(3px);
  display:flex; justify-content:center; align-items:flex-start;
  padding:5rem 1rem 2rem; overflow-y:auto;
}
/* display:flex 가 [hidden] 의 기본 display:none 을 이기므로 명시적으로 눌러 준다 */
#search-panel[hidden]{ display:none; }
.search-panel-inner{
  width:100%; max-width:640px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden;
}
.sr-head{ padding:.7rem 1rem; font-size:.78rem; color:var(--text-3);
          border-bottom:1px solid var(--line); background:var(--surface-2); }
.sr-item{
  display:block; width:100%; text-align:left; padding:.7rem 1rem;
  background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer;
}
.sr-item:hover,.sr-item.sel{ background:var(--accent-sf); }
.sr-t{ font-size:.92rem; font-weight:600; margin-bottom:.15rem; }
.sr-c{ font-size:.78rem; color:var(--text-3); }
.sr-c mark{ background:color-mix(in srgb,var(--accent) 26%, transparent);
            color:var(--text); padding:0 .12rem; border-radius:3px; }
.sr-empty{ padding:2rem 1rem; text-align:center; color:var(--text-3); font-size:.9rem; }

/* ── 도움말 / 설정 ─────────────────────────────────────── */
.help-block{ padding:1.2rem 1.35rem; margin-bottom:1rem; }
.help-block h3{ margin:0 0 .5rem; }
.help-map{ margin:.2rem 0 .6rem; padding-left:1.1rem; }
.help-map li{ margin-bottom:.45rem; line-height:1.65; }
.help-sub{ margin:.5rem 0 0; font-size:.86rem; color:var(--text-3); }
.help-tools{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0 .2rem; }
.danger-zone{ border-color:color-mix(in srgb,#c0392b 35%,var(--line)); }
.btn.danger{ background:#c0392b; color:#fff; }
.btn.danger:hover{ background:#a33125; }

#scrim{ display:none; }

/* ── 반응형 ────────────────────────────────────────────── */
@media (max-width: 900px){
  #sidebar{
    position:fixed; left:0; top:0; height:100vh;
    transform:translateX(-100%); transition:transform .28s cubic-bezier(.2,.8,.3,1);
    box-shadow:var(--shadow-lg);
  }
  body.nav-open #sidebar{ transform:translateX(0); }
  body.nav-open #scrim{
    display:block; position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.45);
  }
  #menu-toggle{ display:grid; }
  #view{ padding:1.2rem 1rem 4rem; }
  .step-progress{ margin:0 -1rem 1.1rem; padding:.55rem 1rem; }
  h1{ font-size:1.55rem; }
  .hero{ padding:1.5rem 1.3rem; }
  .hero h1{ font-size:1.55rem; }
}

@media print{
  #sidebar,#topbar,.step-progress,.lesson-nav,#search-panel{ display:none !important; }
  #view{ padding:0; }
  .step{ break-inside:avoid; box-shadow:none; }
}

/* 메뉴 경로 안의 영문 병기 */
.mp-en{
  font-size:.78em; font-weight:500; opacity:.72; margin-left:.18em;
}
.mp-en::before{ content:'('; }
.mp-en::after{ content:')'; }

/* ── 캡처 교체 ─────────────────────────────────────────── */
.cap-bar{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:1.2rem 0 1rem; }
.cap-hint{ font-size:.78rem; color:var(--text-3); }
.cap-hint code{ background:var(--surface-2); padding:.05rem .3rem; border-radius:4px; }

.cap-list{ display:grid; gap:.45rem; }
.cap-row{
  display:flex; gap:.85rem; align-items:center; padding:.6rem .8rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); cursor:pointer; transition:border-color .15s;
}
.cap-row:hover{ border-color:var(--accent); }
.cap-row.sel{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-sf); }
.cap-row.done{ background:var(--ok-sf); border-color:color-mix(in srgb,var(--ok) 28%,transparent); }
.cap-thumb{
  flex:0 0 auto; width:86px; height:58px; border-radius:6px; overflow:hidden;
  background:#fff; border:1px solid var(--line); display:grid; place-items:center;
}
.cap-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.cap-body{ flex:1; min-width:0; }
.cap-where{ font-size:.86rem; font-weight:600; margin-bottom:.1rem; }
.cap-cap{ font-size:.78rem; color:var(--text-3); }
.cap-path{ font-size:.72rem; color:var(--text-3); font-family:var(--mono); margin-top:.15rem; }
.cap-act{ flex:0 0 auto; display:flex; gap:.4rem; align-items:center; }
.cap-pick{ font-size:.76rem; color:var(--text-3); }
.cap-wait{
  font-size:.78rem; font-weight:700; color:var(--accent);
  background:var(--accent-sf); border-radius:99px; padding:.2rem .6rem;
  animation:capblink 1.1s ease-in-out infinite;
}
@keyframes capblink{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.cap-undo{ padding:.2rem .55rem !important; font-size:.74rem !important; }

@media (max-width: 640px){
  .cap-row{ flex-wrap:wrap; }
  .cap-thumb{ width:64px; height:44px; }
}

/* ── 오늘 할 일 — 출발점을 분명히 ────────────────────────── */
.tc-start{ margin-top:1rem; }
.tc-go{
  display:flex !important; flex-direction:column; align-items:flex-start; gap:.15rem;
  width:100%; max-width:420px; padding:.85rem 1.2rem !important; text-align:left;
  border-radius:12px !important;
}
.tc-go:hover{ transform:translateY(-1px); }
.tcg-lb{ font-size:.72rem; font-weight:800; letter-spacing:.06em; color:var(--accent); }
.tcg-t{ font-size:1.02rem; font-weight:800; color:var(--accent-2); line-height:1.4; }
.tcg-m{ font-size:.76rem; font-weight:500; color:var(--accent); opacity:.85; }

.tc-rest{ display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-top:.7rem; }
.tcr-lb{ font-size:.74rem; color:rgba(255,255,255,.75); font-weight:700; }
.tcr-item{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.28rem .7rem; border-radius:99px; cursor:pointer;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32);
  color:#fff; font-size:.8rem;
}
.tcr-item:hover{ background:rgba(255,255,255,.3); }
.tcr-item b{ opacity:.7; font-weight:700; }
.tcr-ok{ color:#bff5d2; font-weight:700; }

.today-card .tc-actions{ margin-top:.9rem; }

@media (max-width: 640px){
  .tc-go{ max-width:100%; }
}

/* 일정표에서 바로 시작 */
.plan-day{ align-items:center; }
.pd-go{
  flex:0 0 auto; align-self:center; padding:.45rem .95rem;
  background:var(--accent-sf); color:var(--accent-2);
  border:1px solid color-mix(in srgb,var(--accent) 32%, transparent);
  border-radius:99px; cursor:pointer; font-size:.82rem; font-weight:700; white-space:nowrap;
}
.pd-go:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.plan-day.studied .pd-go{ background:var(--surface); color:var(--text-3); }

/* 읽을거리와 실습은 하는 일이 다르므로 단추를 나란히 둔다 */
.pd-acts{ flex:0 0 auto; align-self:center; display:flex; flex-direction:column; gap:.35rem; }
.pd-go2{
  padding:.4rem .95rem; background:var(--surface); color:var(--text-2);
  border:1px solid var(--line-2); border-radius:99px; cursor:pointer;
  font-size:.8rem; font-weight:700; white-space:nowrap;
}
.pd-go2:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:640px){
  .pd-acts{ flex-direction:row; flex-wrap:wrap; }
}

/* ── 그날의 매뉴얼 쪽 화면 ────────────────────────────── */
.day-head{ display:flex; gap:1rem; align-items:flex-start; margin:.4rem 0 1rem; }
.dh-n{
  flex:0 0 auto; width:72px; height:72px; border-radius:var(--radius);
  background:var(--accent-sf); color:var(--accent-2);
  border:1px solid color-mix(in srgb,var(--accent) 28%, transparent);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:1.7rem; font-weight:800; line-height:1;
}
.dh-n span{ font-size:.7rem; font-weight:700; opacity:.75; margin-top:.15rem; }
.dh-n.plain{ font-size:1.9rem; }   /* 머리말·용어집·색인처럼 번호가 없는 단원 */
.dh-body{ flex:1; min-width:0; }
.dh-body h1{ margin:0 0 .3rem; font-size:1.35rem; }
.dh-meta{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem; }

.day-lessons{
  margin:1rem 0; padding:.8rem .9rem; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface-2);
}
.dl-lb{ font-size:.78rem; font-weight:700; color:var(--text-3); margin-bottom:.5rem; }
.dl-item{
  display:flex; align-items:baseline; gap:.6rem; width:100%; text-align:left;
  padding:.5rem .7rem; margin-bottom:.3rem; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
}
.dl-item:hover{ border-color:var(--accent); }
.dl-item b{ font-size:.9rem; }
.dl-item span{ font-size:.78rem; color:var(--text-3); }
.dl-item.done{ opacity:.7; }
.dl-ok{ margin-left:auto; color:var(--ok); font-weight:800; }

.day-nav{
  display:flex; justify-content:space-between; align-items:center;
  gap:.6rem; margin-top:1.6rem;
}

@media (max-width:640px){
  .day-head{ gap:.7rem; }
  .dh-n{ width:56px; height:56px; font-size:1.3rem; }
}

/* ── 그림 옆에서 바로 바꾸기 ───────────────────────────── */
.sf-cell{ position:relative; }
.sf-swap, .sf-undo{
  position:absolute; top:5px; border-radius:99px; cursor:pointer;
  font-size:.7rem; font-weight:700; line-height:1;
  padding:.24rem .5rem; white-space:nowrap;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--line-2); color:var(--text-2);
  opacity:0; transition:opacity .15s, background .15s, color .15s;
  backdrop-filter:blur(4px);
}
.sf-swap{ right:5px; }
.sf-undo{ left:5px; padding:.24rem .42rem; }
.sf-cell:hover .sf-swap,
.sf-cell:hover .sf-undo,
.sf-cell.armed .sf-swap,
.sf-cell.own .sf-swap{ opacity:1; }
.sf-swap:hover, .sf-undo:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }

.sf-cell.own .sf-swap{ background:var(--ok-sf); border-color:var(--ok); color:var(--ok); }
.sf-cell.own img{ border-color:var(--ok); }
.sf-cell.armed .sf-swap{ background:var(--accent); border-color:var(--accent); color:#fff; }
.sf-cell.armed img{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-sf);
  animation:capblink 1.1s ease-in-out infinite;
}

/* 붙여넣기 대기 배너 */
#paste-armed{
  position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%);
  z-index:250; display:flex; align-items:center; gap:.45rem;
  padding:.6rem 1rem; border-radius:99px;
  background:var(--accent); color:#fff; box-shadow:var(--shadow-lg);
  font-size:.86rem; font-weight:600; max-width:92vw;
}
.pa-key{
  font-family:var(--mono); font-size:.8rem; font-weight:700;
  background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4);
  border-radius:5px; padding:.05rem .35rem;
}
.pa-t{ font-weight:500; }
.pa-f{
  font-family:var(--mono); font-size:.72rem; opacity:.85;
  background:rgba(0,0,0,.18); border-radius:5px; padding:.08rem .4rem;
  max-width:18ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pa-x{
  margin-left:.2rem; padding:.2rem .55rem; border-radius:99px; cursor:pointer;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.42);
  color:#fff; font-size:.76rem; font-weight:600;
}
.pa-x:hover{ background:rgba(255,255,255,.35); }

/* 완료 처리된 단계에서도 교체 버튼은 또렷하게 */
.step.done .sf-swap, .step.done .sf-undo{ filter:none; }
.step.done .shotfig img{ filter:grayscale(.2); }

/* 그림 속 단축키 키캡 */
.fig .f-key{ fill:var(--surface); stroke:var(--line-2); stroke-width:1.4; }
.fig .f-keyt{ font-family:var(--mono); font-size:11px; font-weight:700; fill:var(--text); }
.fig .f-key-hi{ fill:var(--accent); stroke:var(--accent); }
.fig .f-keyt-hi{ font-family:var(--mono); font-size:11px; font-weight:700; fill:#fff; }

/* ── 화면 사진 + 설명 그림 나란히 ──────────────────────── */
.step-vis{
  display:flex; gap:.7rem; align-items:stretch;
  margin:.7rem 0 .2rem;
}
.step-vis > .fig{ margin:0; flex:1 1 520px; min-width:0;
                  display:flex; flex-direction:column; justify-content:center; }
.step-vis > .shotfig{
  flex:0 0 auto; max-width:300px; margin:0;
  display:flex; flex-direction:column; justify-content:center;
}
.step-vis > .shotfig img{ max-height:520px; width:auto; }
.step-vis > .shotfig .sf-row{ flex-direction:column; }
.step-vis > .fig svg{ min-width:420px; }

/* 좁은 화면에서는 위아래로 */
@media (max-width: 1080px){
  .step-vis{ display:block; }
  .step-vis > .shotfig{ max-width:100%; margin-bottom:.7rem; }
  .step-vis > .shotfig img{ max-height:320px; }
}

/* ── 그림 크기 상한 — 넓은 화면에서 지나치게 커지지 않게 ── */
.fig{ max-width:1160px; margin-left:auto; margin-right:auto; }
.step-vis > .fig{ max-width:none; }

/* ── 매뉴얼 본문 한국어판 ─────────────────────────────── */
.mi-body{
  margin-top:1rem; padding-top:.9rem;
  border-top:2px solid color-mix(in srgb,var(--accent) 22%, transparent);
}
.bd-lb{
  display:inline-block; margin-bottom:.7rem; padding:.2rem .6rem;
  background:var(--accent-sf); color:var(--accent-2);
  border-radius:99px; font-size:.75rem; font-weight:700;
}
.mi-body p{ margin:0 0 .6rem; line-height:1.75; font-size:.9rem; }
.bd-sec{ margin-top:1.1rem; }
.bd-sec h4{
  margin:0 0 .45rem; font-size:.95rem; font-weight:700; color:var(--text);
  padding-left:.5rem; border-left:3px solid var(--accent);
}
.bd-ul, .bd-ol{ margin:.2rem 0 .7rem; padding-left:1.3rem; }
.bd-ul li, .bd-ol li{ margin-bottom:.35rem; line-height:1.7; font-size:.89rem; }
.bd-ol{ counter-reset:none; }

/* 옵션 설명 — 이름과 뜻을 붙여 읽기 쉽게 */
.bd-dl{ margin:.3rem 0 .8rem; }
.bd-dl dt{
  font-weight:700; font-size:.89rem; color:var(--text);
  margin-top:.6rem; padding-left:.55rem; border-left:2px solid var(--line-2);
}
.bd-dl dd{
  margin:.2rem 0 0 .55rem; padding-left:.55rem;
  border-left:2px solid var(--line); color:var(--text-2);
  font-size:.88rem; line-height:1.7;
}
.bd-dl dt:first-child{ margin-top:0; }

.bd-fig{ margin:.6rem 0 .9rem; text-align:center; }
.bd-fig .mc-shot{ display:inline-block; max-width:100%; }
.bd-fig img{ max-width:100%; height:auto; max-height:520px; border-radius:var(--radius-sm); }
.bd-fig figcaption{
  margin-top:.4rem; font-size:.8rem; color:var(--text-3); line-height:1.6;
}
.mi-body .note{ margin:.5rem 0; }

/* 요약 해설만 있는 쪽과 본문까지 옮긴 쪽을 구분 */
.mi-badge.full{ color:#fff; background:var(--accent); }
.badge.lv.on{ color:#fff; background:var(--accent); border-color:var(--accent); }

/* ── 기능 색인 ────────────────────────────────────────── */
.idx-tools{ margin:1rem 0 .8rem; }
.idx-kinds{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.55rem; }
.idx-kinds .chip.on{ background:var(--accent); color:#fff; border-color:var(--accent); }

.idx-jump{
  display:flex; flex-wrap:wrap; gap:.3rem; margin:.7rem 0;
  padding:.5rem .6rem; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--radius-sm);
}
.idx-jump a{
  min-width:1.9rem; text-align:center; padding:.18rem .4rem;
  font-size:.82rem; font-weight:700; color:var(--text-2); text-decoration:none;
  border-radius:var(--radius-sm);
}
.idx-jump a:hover{ background:var(--accent); color:#fff; }
.idx-count{ font-size:.8rem; color:var(--text-3); margin:.4rem 0 .8rem; }

.idx-grp{ margin-bottom:1.4rem; }
.idx-grp h2{
  position:sticky; top:0; z-index:2; margin:0 0 .4rem;
  padding:.3rem .55rem; font-size:.95rem;
  background:var(--accent-sf); color:var(--accent-2);
  border-radius:var(--radius-sm);
}
.idx-list{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.idx-row{
  display:flex; align-items:baseline; gap:.55rem;
  padding:.42rem .7rem; border-bottom:1px solid var(--line);
  background:var(--surface); cursor:pointer;
}
.idx-row:last-child{ border-bottom:none; }
.idx-row:hover{ background:var(--accent-sf); }
.ix-k{
  flex:0 0 auto; width:2.6rem; text-align:center;
  font-size:.64rem; font-weight:700; padding:.08rem .2rem;
  border-radius:99px; background:var(--surface-2); color:var(--text-3);
}
.ix-본문{ background:var(--accent); color:#fff; }
.ix-해설{ background:var(--ok-sf); color:var(--ok); }
.ix-레슨{ background:color-mix(in srgb,var(--accent) 18%,transparent); color:var(--accent-2); }
.ix-n{ flex:1 1 auto; min-width:0; font-size:.88rem; font-weight:600; }
.ix-n i{ font-style:normal; font-size:.76rem; color:var(--text-3); margin-left:.4rem; }
.ix-m{ flex:0 0 auto; font-size:.75rem; color:var(--text-3); text-align:right; }
@media (max-width:640px){
  .idx-row{ flex-wrap:wrap; }
  .ix-m{ flex:1 1 100%; text-align:left; margin-left:3.15rem; }
}

/* 본문을 옮긴 쪽은 한 편의 문서처럼 */
.bd-src{
  margin:.7rem 0 0; padding:.55rem .75rem; font-size:.8rem;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text-3);
}
.bd-src ul{ margin:.25rem 0 0; padding-left:1.1rem; }
.bd-src a{ color:var(--accent-2); }
.bd-new{
  margin:.6rem 0; padding:.55rem .8rem; font-size:.85rem;
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-left:3px solid var(--accent); border-radius:var(--radius-sm);
}
.bd-new ul{ margin:.3rem 0 0; padding-left:1.1rem; }
.bd-new li{ margin-bottom:.25rem; line-height:1.65; }

/* 그날의 읽는 차례 번호 */
.mi-no{
  flex:0 0 auto; min-width:1.55rem; height:1.55rem; margin-left:.15rem;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; line-height:1;
  color:var(--text-3); background:var(--surface-2);
  border:1px solid var(--line); border-radius:99px;
}
.man-item.open .mi-no{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* 한 쪽 안에 든 절 — 목차에는 #앵커로만 있어 쪽 목록에서 빠지던 것 */
.mi-subs{ flex:0 1 auto; display:flex; flex-wrap:wrap; gap:.25rem; min-width:0; }
.mi-subs a, .mi-subs span{
  font-size:.7rem; color:var(--text-3); text-decoration:none;
  padding:.06rem .4rem; border:1px solid var(--line);
  border-radius:99px; background:var(--surface); white-space:nowrap;
}
.mi-subs a:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:760px){ .mi-subs{ display:none; } }

/* 제목이 앱 안의 쪽으로 가는 버튼일 때 — <a> 와 같아 보이게 */
button.mi-link{
  background:none; border:0; cursor:pointer; font:inherit; color:inherit;
}
button.mi-link .mi-t{ text-decoration:none; }
button.mi-link:hover .mi-t{ color:var(--accent); text-decoration:underline; }

/* ── 단원 안의 절 묶음 ────────────────────────────────── */
.ch-groups{ display:grid; gap:.5rem; }
.ch-grp{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.cg-head{
  display:flex; align-items:center; gap:.1rem;
  background:var(--surface-2); border-bottom:1px solid transparent;
}
.ch-grp.open .cg-head{ border-bottom-color:var(--line); }
.cg-x{
  flex:0 0 auto; width:2rem; align-self:stretch; border:0; background:none;
  color:var(--text-3); font-size:.62rem; cursor:pointer; transition:transform .18s;
}
.cg-x:hover{ color:var(--accent); }
.ch-grp.open .cg-x{ transform:rotate(90deg); }
.cg-t{
  flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:.5rem;
  padding:.65rem .4rem .65rem 0; background:none; border:0;
  text-align:left; cursor:pointer; color:var(--text);
}
.cg-t:hover .cg-n{ color:var(--accent); text-decoration:underline; }
.cg-n{ font-weight:700; font-size:.95rem; }
.cg-t i{ font-style:normal; font-size:.78rem; color:var(--text-3); }
.cg-c{
  flex:0 0 auto; padding:0 .9rem; font-size:.74rem; color:var(--text-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ch-grp .man-list{ border:0; border-radius:0; margin:0; }
@media (max-width:760px){ .cg-t i{ display:none; } }

/* ── 매뉴얼 한 쪽 화면 ────────────────────────────────── */
.pg-head{ margin:.2rem 0 1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.pg-kicker{
  font-size:.76rem; color:var(--text-3); font-weight:600;
  letter-spacing:.01em; margin-bottom:.35rem;
}
.pg-head h1{ margin:0; line-height:1.25; }
.pg-en{ margin:.3rem 0 0; color:var(--text-3); font-size:.9rem; }
.pg-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.pg-actions .btn{ text-decoration:none; }

.pg-toc{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
  margin:0 0 1.3rem; padding:.6rem .8rem;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.pg-toc .pt-l{ font-size:.74rem; font-weight:700; color:var(--text-3); margin-right:.3rem; }
.pg-toc a{
  font-size:.78rem; color:var(--text-2); text-decoration:none; white-space:nowrap;
  padding:.1rem .5rem; border:1px solid var(--line);
  border-radius:99px; background:var(--surface);
}
.pg-toc a:hover{ border-color:var(--accent); color:var(--accent); }

.pg-meta{ margin:0 0 1.1rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.pg-body{ display:block; }

.pg-shots{
  margin:2rem 0 0; padding:.7rem 1rem 0;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
}
.pg-shots summary{
  cursor:pointer; font-size:.85rem; font-weight:600; color:var(--text-2);
  padding-bottom:.7rem; list-style:none;
}
.pg-shots summary::-webkit-details-marker{ display:none; }
.pg-shots summary::before{ content:'▸ '; color:var(--text-3); }
.pg-shots[open] summary::before{ content:'▾ '; }
.pg-shots summary:hover{ color:var(--accent); }
.pg-shots .mc-shots{ padding-bottom:.8rem; }

.pg-nav{ margin-top:2.2rem; }

/* ── 단원별 보기 ──────────────────────────────────────── */
.toc-part{ margin-bottom:1.8rem; }
.toc-part h2{
  margin:0 0 .6rem; padding:.35rem .7rem; font-size:1rem;
  background:var(--accent-sf); color:var(--accent-2); border-radius:var(--radius-sm);
}
.toc-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:.5rem; }
.toc-ch{
  display:grid; grid-template-columns:auto 1fr auto; gap:.3rem .7rem; align-items:center;
  padding:.65rem .85rem; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); transition:border-color .15s, transform .12s;
}
.toc-ch:hover{ border-color:var(--accent); transform:translateY(-1px); }
.tc-name{ font-size:.92rem; font-weight:700; color:var(--text); min-width:0; }
.tc-name i{ display:block; font-style:normal; font-size:.73rem;
            font-weight:400; color:var(--text-3); margin-top:.1rem; }
.tc-num{ font-size:.75rem; color:var(--text-3); white-space:nowrap; align-self:end; }
.tc-no{
  grid-row:1; width:1.7rem; height:1.7rem; display:flex;
  align-items:center; justify-content:center; font-size:.72rem; font-weight:800;
  color:var(--accent-2); background:var(--accent-sf);
  border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); border-radius:99px;
}
.toc-ch.full .tc-no{ background:var(--ok); color:#fff; border-color:var(--ok); }
.tc-bar{
  grid-column:1 / -1; height:5px; border-radius:99px;
  background:var(--line); overflow:hidden;
}
.tc-bar i{ display:block; height:100%; background:var(--accent); border-radius:99px; }
.toc-ch.full{ border-color:color-mix(in srgb,var(--ok) 45%,transparent); background:var(--ok-sf); }
.toc-ch.full .tc-bar i{ background:var(--ok); }
.toc-ch.part{ border-color:color-mix(in srgb,var(--accent) 35%,transparent); }