/* ============================================================
   LLM wiki + GraphRAG 강의 가이드북 — 토푸컴퍼니 Design System 적용판
   원본(2026-06-08 손그림/화이트보드 톤) → DS 다크 캔버스 + 단일 블루 액센트로 재스킨.
   선택자·구조·클래스명은 원본과 동일(guidebook.js 셀렉터 계약 보존) — 값만 DS 토큰.
   DS 정본: ~/code/tofu-company-design-system (tokens/*.css 원문 그대로)
   2026-08-26 · ds-worker(카파시 4라운드 발주)
   ============================================================ */

/* ===== 폰트 — DS tokens/fonts.css 그대로 (jsdelivr Pretendard + Google Mona Sans/JetBrains Mono) ===== */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:wght@400..700&family=JetBrains+Mono:wght@400;500;600&display=swap");
@font-face{font-family:"Pretendard Variable";src:url("https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations");font-weight:45 920;font-style:normal;font-display:swap}

:root{
  /* ===== DS 컬러 토큰 (원문 그대로) ===== */
  --canvas:#090909; --surface-1:#141414; --surface-2:#1c1c1c;
  --hairline:#262626; --hairline-soft:#1a1a1a;
  --ink:#ffffff; --ink-muted:#999999;
  --accent:#0099ff; --success:#22c55e;
  --btn-primary-bg:#ffffff; --btn-primary-ink:#000000;
  --g-magenta:#d44df0; --g-violet:#6a4cf5; --g-orange:#ff7a3d; --g-coral:#ff5577;
  --grad-violet:linear-gradient(135deg,#6a4cf5 0%,#d44df0 100%);
  --grad-magenta:linear-gradient(135deg,#d44df0 0%,#ff5577 100%);
  --grad-orange:linear-gradient(160deg,#ff7a3d 0%,#ff5577 100%);
  --grad-coral:linear-gradient(135deg,#ff5577 0%,#d44df0 100%);
  --selection:rgba(0,153,255,.30);
  /* ===== DS 스페이싱/라운드/섀도/모션 (원문 그대로) ===== */
  --sp-hair:1px; --sp-xxs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:15px; --sp-lg:20px; --sp-xl:30px; --sp-xxl:40px; --sp-section:96px; --container:1199px;
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:15px; --r-xl:20px; --r-xxl:30px; --r-pill:100px; --r-full:9999px;
  --shadow-card:inset 0 .5px 0 rgba(255,255,255,.10),0 10px 30px rgba(0,0,0,.25);
  --shadow-drop:0 1px 2px rgba(0,0,0,.20);
  --ring-focus:0 0 0 1px rgba(0,153,255,.45),0 0 0 4px rgba(0,153,255,.15);
  --ring-active:0 0 0 2px var(--ink);
  --dur-fast:120ms; --dur:200ms; --dur-slow:350ms;
  --ease:cubic-bezier(.25,.1,.25,1); --ease-out:cubic-bezier(.16,1,.3,1); --press-scale:.97;
  /* ===== DS 폰트 패밀리 (원문 그대로) ===== */
  --font-display:"Mona Sans","Pretendard Variable",Pretendard,sans-serif;
  --font-body:"Pretendard Variable",Pretendard,"Inter",-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ls-ko-display:-.025em;

  /* ===== 레거시 변수명 → DS 토큰 별칭 (구 클래스·인라인 참조 하위호환, text/border 용도 한정) ===== */
  --cream:var(--canvas); --navy:var(--ink); --beige:var(--surface-1); --sky:var(--hairline);
  --green:var(--success); --charcoal:var(--ink); --red:var(--g-coral); --soft:var(--ink-muted); --amber:var(--g-orange);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; font-size:17.5px;}
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--font-body); line-height:1.65; font-size:var(--fs-body-lg,18px);
  margin:0; padding:0;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--selection);}
code{background:var(--surface-1); color:var(--ink); padding:1px 7px; border-radius:var(--r-xs); font-size:.86em; border:1px solid var(--hairline-soft); font-family:var(--font-mono); word-break:break-word;}
b{color:var(--ink);} .mut{color:var(--ink-muted);}
.amber{color:var(--g-orange); font-weight:bold;} .green{color:var(--success); font-weight:bold;} .red{color:var(--g-coral); font-weight:bold;}
/* 강조 하이라이트 — 형광펜(초록 밑색) → DS selection 톤(블루) 재사용 */
.gh{background:linear-gradient(transparent 58%, var(--selection) 0); padding:0 .07em; border-radius:var(--r-xs); font-weight:bold;}
p{margin:13px 0;}
a{color:var(--accent); text-decoration:none; transition:opacity var(--dur-fast) var(--ease);}
a:hover{opacity:.75; text-decoration:underline; text-underline-offset:3px;}

/* ===== 상단바 — DS NavBar(56px sticky, canvas bg, hairline-soft 하단선, blur 없음) ===== */
.topbar{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px; background:var(--canvas); border-bottom:1px solid var(--hairline-soft); padding:10px 20px;}
.menu-btn{display:none; background:var(--surface-1); border:0; color:var(--ink); font-size:1.2rem; border-radius:var(--r-md); padding:2px 12px; cursor:pointer; line-height:1.4;}
.brand{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1.35rem; letter-spacing:-.02em; white-space:nowrap; text-decoration:none;}
.brand .tofu{font-size:1.1rem;}
.partpill{font-family:var(--font-body); font-weight:500; font-size:.85rem; color:var(--ink-muted); background:var(--surface-2); border-radius:var(--r-pill); padding:3px 14px; white-space:nowrap;}
.progress{flex:1; height:7px; background:var(--surface-1); border-radius:var(--r-pill); overflow:hidden;}
.progress-fill{height:100%; width:6%; background:var(--accent); transition:width var(--dur) var(--ease);}
.counter{font-family:var(--font-mono); font-feature-settings:"tnum"; color:var(--ink-muted); font-size:.9rem; white-space:nowrap; min-width:58px; text-align:right;}

/* ===== 레이아웃 ===== */
.book{display:flex; max-width:1260px; margin:0 auto; gap:28px; padding:0 20px;}
.toc{flex:0 0 340px; position:sticky; top:70px; align-self:flex-start; max-height:calc(100vh - 92px); overflow:auto; background:var(--surface-1); border:1px solid var(--hairline-soft); border-radius:var(--r-xl); padding:14px 14px; margin-top:22px;}
.toc-title{font-family:var(--font-display); font-weight:500; color:var(--ink); font-size:1.35rem; padding:2px 10px 8px; border-bottom:1px solid var(--hairline-soft); margin-bottom:6px; display:flex; justify-content:space-between; align-items:baseline;}
.toc-title .xpand{font-family:var(--font-body); font-size:.72rem; color:var(--ink-muted); cursor:pointer; border:0; border-radius:var(--r-pill); padding:3px 10px; background:var(--surface-2);}
.toc details{margin:1px 0; border-radius:var(--r-md);}
.toc details > summary{cursor:pointer; font-family:var(--font-body); font-weight:600; color:var(--ink); font-size:1.02rem; padding:6px 10px; list-style:none; border-radius:var(--r-md); transition:background var(--dur-fast) var(--ease);}
.toc details > summary::-webkit-details-marker{display:none;}
.toc details > summary::before{content:'▸'; color:var(--g-orange); margin-right:7px; font-size:.85em; display:inline-block;}
.toc details[open] > summary::before{content:'▾';}
.toc details > summary:hover{background:var(--surface-2);}
.toc ol{list-style:none; margin:2px 0 8px; padding:0 0 0 6px; counter-reset:toc;}
.toc li{margin:1px 0;}
.toc a{display:block; cursor:pointer; color:var(--ink-muted); font-size:.92rem; font-weight:500; padding:6px 10px 6px 34px; border-radius:var(--r-md); position:relative; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); text-decoration:none; line-height:1.35;}
.toc a::before{counter-increment:toc; content:counter(toc); position:absolute; left:6px; top:50%; transform:translateY(-50%); font-family:var(--font-mono); color:var(--g-orange); font-size:.78rem; font-weight:600; width:24px; text-align:center;}
.toc a:hover{background:var(--surface-2); color:var(--ink);}
.toc a.active{background:var(--surface-2); color:var(--ink); font-weight:700; box-shadow:inset 3px 0 0 var(--accent);}

.content{flex:1; min-width:0; max-width:820px; padding-top:8px; padding-bottom:24px;}

/* ===== 페이지넘김 ===== */
.sec{display:none; padding:8px 0 6px;}
.sec.active{display:block; animation:fade var(--dur-slow) var(--ease);}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ===== 페이지 넘김 버튼 — DS 필 버튼(next=primary 흰필, prev=secondary 표면) ===== */
.pagenav{display:flex; justify-content:space-between; gap:14px; margin:46px 0 22px; border-top:1px solid var(--hairline-soft); padding-top:26px;}
.pagenav button{font-family:var(--font-body); font-size:1rem; font-weight:600; border-radius:var(--r-pill); padding:14px 24px; cursor:pointer; transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); max-width:48%; text-align:left; border:0;}
.pagenav button .lab{display:block; font-size:.78rem; font-weight:500; margin-bottom:3px; opacity:.75;}
.pagenav .prev{background:var(--surface-1); color:var(--ink);}
.pagenav .next{background:var(--btn-primary-bg); color:var(--btn-primary-ink); text-align:right;}
.pagenav button:hover:not(:disabled){transform:translateY(-2px);}
.pagenav .prev:hover:not(:disabled){background:var(--surface-2);}
.pagenav .next:hover:not(:disabled){opacity:.85;}
.pagenav button:disabled{opacity:.35; cursor:default;}

/* ===== 타이포 — DS display(Mona Sans/Pretendard 500, 한글 자간 -2.5%) ===== */
h1{font-family:var(--font-display); font-weight:500; color:var(--ink); font-size:3.4rem; margin:6px 0 6px; letter-spacing:var(--ls-ko-display); line-height:1.05;}
h1 .hl{color:var(--accent);}
h2{font-family:var(--font-display); font-weight:500; color:var(--ink); font-size:2.3rem; margin:4px 0 6px; letter-spacing:var(--ls-ko-display); line-height:1.1;}
.subhead{font-family:var(--font-body); font-weight:700; color:var(--ink); font-size:1.32rem; margin:32px 0 8px; display:flex; align-items:center; gap:9px; line-height:1.35;}
.subhead .ic{font-size:1.2rem;}
h3{font-family:var(--font-body); font-weight:700; color:var(--ink); font-size:1.22rem; margin:32px 0 8px;}
.sub{color:var(--ink-muted); font-size:1.05rem; margin:0 0 4px;}
.lead{color:var(--ink-muted); margin:2px 0 16px; font-size:1.04rem;}
.chapter-tag{display:inline-block; font-family:var(--font-body); font-weight:600; color:var(--g-orange); background:var(--surface-1); padding:4px 16px; border-radius:var(--r-pill); margin-bottom:4px; font-size:.92rem;}
.tldr{background:var(--surface-1); border:1px solid var(--hairline-soft); border-radius:var(--r-md); padding:16px 20px; margin:8px 0 18px; font-size:1rem; color:var(--ink-muted);}
.tldr b{color:var(--ink);}

/* ===== 표지 ===== */
.cover{text-align:center; padding:24px 0 0;}
.cover h1{font-size:3.6rem;}
.cover .big-tofu{font-size:3rem; display:block; margin-bottom:4px;}
.learn{text-align:left; background:var(--surface-1); border-radius:var(--r-xl); padding:18px 24px; margin:24px auto 0; max-width:680px;}
.learn ul{margin:8px 0 0; padding-left:4px; list-style:none;}
.learn li{padding:5px 0 5px 28px; position:relative;}
.learn li::before{content:"✓"; position:absolute; left:2px; color:var(--success); font-weight:bold;}
.hook{font-size:1.1rem; color:var(--ink-muted); margin:18px 0 8px; padding:16px 22px; background:var(--surface-1); border-radius:var(--r-lg); text-align:left;}
.hook b{color:var(--ink);}
.stats{display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 8px;}
.stat-chip{flex:1 1 120px; background:var(--surface-1); border-radius:var(--r-lg); padding:14px 12px; text-align:center;}
.stat-chip .num{font-family:var(--font-display); font-weight:500; color:var(--ink); font-size:1.9rem; line-height:1; display:block;}
.stat-chip .lab{color:var(--ink-muted); font-size:.8rem; margin-top:5px; display:block;}
.start-btn{display:inline-block; margin:22px 8px 6px; font-family:var(--font-body); font-weight:600; font-size:1.05rem; color:var(--btn-primary-ink); background:var(--btn-primary-bg); border:none; border-radius:var(--r-pill); padding:12px 32px; cursor:pointer; transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); text-decoration:none;}
.start-btn:hover{transform:translateY(-2px); opacity:.85;}
.start-btn.ghost{background:var(--surface-1); color:var(--ink);}

/* ===== 파트 카드 — DS Card(surface-1, radius-xl, 보더 없음, 호버=surface-2 리프트) ===== */
.partgrid{display:grid; grid-template-columns:1fr; gap:18px; margin:28px 0 8px;}
.partcard{display:block; text-decoration:none; background:var(--surface-1); border-radius:var(--r-xl); padding:22px 26px; transition:background var(--dur) var(--ease), transform var(--dur-fast) var(--ease); cursor:pointer;}
.partcard:hover{transform:translateY(-2px); background:var(--surface-2);}
.partcard .pn{font-family:var(--font-mono); color:var(--g-orange); font-size:.95rem; font-weight:600;}
.partcard h3{margin:2px 0 6px; font-size:1.6rem; font-family:var(--font-display); font-weight:500; color:var(--ink); letter-spacing:var(--ls-ko-display);}
.partcard p{margin:0; color:var(--ink-muted); font-size:1.02rem;}
.partcard .toflist{margin:10px 0 0; padding:0; list-style:none; color:var(--ink-muted); font-size:.9rem; display:flex; flex-wrap:wrap; gap:4px 14px;}
.partcard .toflist li{position:relative; padding-left:14px;}
.partcard .toflist li::before{content:'·'; position:absolute; left:3px; color:var(--g-orange);}

/* ===== 콜아웃 — DS Callout(surface-1 bg, hairline-soft 1px, radius-md, 좌측 컬러보더 금지) ===== */
.analogy{background:var(--surface-1); border-radius:var(--r-md); padding:16px 20px; margin:18px 0; font-size:1.05rem; color:var(--ink-muted);}
.analogy b{color:var(--accent);}
.formula{background:var(--surface-2); color:var(--ink); border-radius:var(--r-lg); padding:16px 22px; margin:18px 0; text-align:center; font-family:var(--font-mono); font-size:1.02rem; line-height:1.85; overflow-x:auto;}
.formula .where{display:block; font-family:var(--font-body); color:var(--ink-muted); font-size:.85rem; margin-top:10px; line-height:1.6;}
.formula .big{font-size:1.15rem; color:var(--ink);}
.steps{counter-reset:st; list-style:none; padding:0; margin:14px 0;}
.steps li{counter-increment:st; position:relative; padding:9px 0 9px 46px; border-top:1px solid var(--hairline-soft);}
.steps li:first-child{border-top:none;}
.steps li::before{content:counter(st); position:absolute; left:0; top:9px; width:32px; height:32px; background:var(--surface-2); color:var(--ink); border-radius:var(--r-full); font-family:var(--font-mono); font-size:1rem; display:flex; align-items:center; justify-content:center;}
.pitfall{background:var(--surface-1); border-radius:var(--r-md); padding:16px 20px; margin:18px 0; font-size:1.02rem; color:var(--ink-muted);}
.pitfall b{color:var(--g-coral);}
.worked{background:var(--surface-1); border-radius:var(--r-lg); padding:16px 20px; margin:18px 0;}
.worked .wt{font-family:var(--font-display); font-weight:500; color:var(--ink); font-size:1.25rem; margin-bottom:6px;}
.worked .calc{font-family:var(--font-mono); font-size:.92rem; background:var(--surface-2); border:1px solid var(--hairline-soft); border-radius:var(--r-sm); padding:9px 13px; margin:9px 0; color:var(--ink); overflow-x:auto; line-height:1.7; white-space:pre-wrap;}
.note{background:var(--surface-1); border:1px solid var(--hairline-soft); border-radius:var(--r-md); padding:14px 18px; margin:18px 0; font-size:1.02rem; color:var(--ink-muted);}
.note.warn b{color:var(--g-orange);} .note.good b{color:var(--success);}

/* ===== 표 ===== */
.tbl-wrap{overflow-x:auto; border:1px solid var(--hairline-soft); border-radius:var(--r-lg); margin:14px 0;}
table{border-collapse:collapse; width:100%; font-size:.95rem; min-width:460px; background:var(--surface-1);}
th,td{padding:9px 13px; text-align:left; border-bottom:1px solid var(--hairline-soft); vertical-align:top;}
th{font-family:var(--font-body); font-weight:700; font-size:.95rem; color:var(--ink); background:var(--surface-2); letter-spacing:0;}
td{color:var(--ink-muted);}
tr:last-child td{border-bottom:none;}
td code{font-size:.86em;}
.row-hi td{background:rgba(34,197,94,.10);} .row-hi td b{color:var(--success);}
.row-bad td{background:rgba(255,85,119,.08);}
.num-c{text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap;}

/* ===== 사례 카드 ===== */
.case{background:var(--surface-1); border-radius:var(--r-xl); padding:0; margin:18px 0; overflow:hidden;}
.case-head{background:var(--surface-2); padding:12px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.case-q{font-family:var(--font-display); font-weight:500; color:var(--ink); font-size:1.2rem; line-height:1.2;}
.qchip{font-family:var(--font-mono); font-size:.78rem; background:var(--surface-1); border:1px solid var(--hairline-soft); color:var(--ink-muted); padding:2px 9px; border-radius:var(--r-sm);}
.badge{font-size:.72rem; font-weight:700; padding:2px 10px; border-radius:var(--r-pill); color:#fff;}
.badge.hit{background:var(--success);} .badge.miss{background:var(--g-coral);} .badge.warn{background:var(--g-orange);} .badge.key{background:var(--surface-2); color:var(--ink);}
.case-body{padding:14px 20px;}
.case-row{display:grid; grid-template-columns:96px 1fr; gap:12px; padding:7px 0; border-top:1px solid var(--hairline-soft);}
.case-row:first-child{border-top:none;}
.case-row .k{font-size:.88rem; font-weight:700; color:var(--ink-muted); padding-top:2px;}
.case-row .v{font-size:1.02rem; color:var(--ink);}
.verdict{background:var(--surface-2); border-radius:0 0 var(--r-xl) var(--r-xl); padding:11px 20px; border-top:1px solid var(--hairline-soft); font-size:.95rem; color:var(--ink-muted);}
.verdict b{color:var(--success);}

/* ===== 2단 비교/설명 카드 (chan4/c4 — DS Card 문법) ===== */
.chan4{display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:16px 0 8px;}
.c4{background:var(--surface-1); border-radius:var(--r-lg); padding:16px 18px;}
.c4 .h4t{font-family:var(--font-body); color:var(--ink); font-weight:700; margin-bottom:4px;}
.c4 p{margin:0; font-size:.95rem; color:var(--ink-muted);}
@media(max-width:680px){.chan4{grid-template-columns:1fr;}}

/* ===== 흐름도 ===== */
.flow{display:flex; flex-wrap:wrap; align-items:stretch; gap:6px; margin:18px 0; justify-content:center;}
.fstep{background:var(--surface-1); border-radius:var(--r-md); padding:10px 12px; text-align:center; flex:1 1 110px; min-width:100px;}
.fstep b{display:block; color:var(--ink); font-size:1rem;}
.fstep span{font-size:.84rem; color:var(--ink-muted);}
.fstep.hl{background:var(--surface-2);}
.farrow{align-self:center; color:var(--g-orange); font-size:1.4rem; font-weight:bold; flex:0 0 auto;}

.perks{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0;}
.perk{background:var(--surface-1); border-radius:var(--r-lg); padding:18px 20px;}
.perk h3{margin:0 0 6px; font-size:1.3rem;}
.perk p{margin:0; font-size:1.02rem; color:var(--ink-muted);}
.takeaways{counter-reset:tk; display:flex; flex-direction:column; gap:12px; margin:18px 0;}
.tk{display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:start; background:var(--surface-1); border-radius:var(--r-lg); padding:16px 20px;}
.tk::before{counter-increment:tk; content:counter(tk); font-family:var(--font-display); font-weight:500; color:var(--g-orange); font-size:1.9rem; line-height:1;}
.tk p{margin:0; font-size:1.05rem; line-height:1.62; color:var(--ink-muted);}
.kbd{font-family:var(--font-mono); font-size:.82em; background:var(--surface-2); border:1px solid var(--hairline-soft); border-radius:var(--r-xs); padding:1px 7px; color:var(--ink);}

/* ===== 이미지 figure ===== */
.figure{margin:20px 0; text-align:center;}
.figure img{max-width:100%; height:auto; border-radius:var(--r-lg); background:var(--surface-1);}
.figure figcaption{font-family:var(--font-body); color:var(--ink-muted); font-size:.95rem; margin-top:7px;}
.figure.ph{background:var(--surface-1); border:1px solid var(--hairline-soft); border-radius:var(--r-lg); padding:34px 16px; color:var(--ink-muted); font-size:.95rem;}
.figure.ph .tofu{font-size:2rem; display:block; margin-bottom:6px;}

/* ===== 메타 강조 배너 ===== */
.meta-made{background:var(--surface-1); border-radius:var(--r-xl); padding:18px 24px; margin:24px 0;}
.meta-made .mt{font-family:var(--font-display); font-weight:500; color:var(--ink); font-size:1.35rem; display:flex; align-items:center; gap:8px;}
.meta-made p{margin:6px 0 0; font-size:1.03rem; color:var(--ink-muted);}

.foot{text-align:center; color:var(--ink-muted); margin-top:30px; font-size:.9rem; border-top:1px solid var(--hairline-soft); padding-top:18px; line-height:1.7;}
.foot b{color:var(--ink);} .foot .tofu{font-size:1.3rem;}
.scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:55;}

/* ===== 그라디언트 스포트라이트 — 페이지당 1곳(hook/analogy 중 1개에만 부착, DS SpotlightCard 문법) ===== */
.spot-violet,.spot-magenta,.spot-orange,.spot-coral{border-radius:var(--r-xxl); padding:28px 30px; color:#fff;}
.spot-violet{background:var(--grad-violet);} .spot-magenta{background:var(--grad-magenta);}
.spot-orange{background:var(--grad-orange);} .spot-coral{background:var(--grad-coral);}
.spot-violet b,.spot-magenta b,.spot-orange b,.spot-coral b,
.spot-violet code,.spot-magenta code,.spot-orange code,.spot-coral code{color:#fff; background:rgba(255,255,255,.16); border-color:transparent;}
.spot-violet .green,.spot-magenta .green,.spot-orange .green,.spot-coral .green,
.spot-violet .gh,.spot-magenta .gh,.spot-orange .gh,.spot-coral .gh{color:#fff; background:rgba(255,255,255,.22);}

@media(max-width:860px){
  .menu-btn{display:block;}
  .book{display:block; padding:0 16px;}
  .content{max-width:none;}
  .toc{position:fixed; left:0; top:0; bottom:0; width:286px; margin:0; border-radius:0 var(--r-xl) var(--r-xl) 0; transform:translateX(-104%); transition:transform var(--dur-slow) var(--ease); z-index:60; max-height:none;}
  .toc.open{transform:none;}
  .scrim.open{display:block;}
  h1,.cover h1{font-size:2.8rem;} h2{font-size:1.9rem;} .subhead{font-size:1.4rem;}
  .perks{grid-template-columns:1fr;}
  .case-row{grid-template-columns:1fr; gap:3px;} .case-row .k{padding-top:0;}
}

/* ===== 모바일(폰) 정밀 ===== */
@media(max-width:600px){
  body{font-size:1.02rem;}
  .book{padding:0 12px;}
  .topbar{gap:6px; padding:8px 10px;}
  .menu-btn{font-size:.95rem; padding:2px 8px;}
  .brand{font-size:1.15rem; max-width:46vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .partpill{display:none;}
  .progress{height:6px; min-width:40px;}
  .counter{font-size:.85rem; min-width:44px;}
  h1,.cover h1{font-size:2.2rem;} h2{font-size:1.6rem;}
  .subhead{font-size:1.2rem; flex-wrap:wrap; margin-top:22px;}
  .chapter-tag{font-size:.85rem;}
  .lead,.sub{font-size:1rem;}
  .hook,.note,.analogy,.worked,.pitfall,.meta-made,.case-body,.tldr{padding-left:15px; padding-right:15px;}
  .steps li{padding-left:42px;}
  .perk{padding:15px 16px;}
  .pagenav{gap:8px; margin-top:30px;}
  .pagenav button{font-size:.95rem; padding:13px 14px; max-width:49%;}
  table{min-width:0; font-size:.82rem;}
  th,td{padding:7px 9px; word-break:keep-all;}
  td code,th code{font-size:.78em;}
  .flow{flex-direction:column; align-items:stretch; gap:8px;}
  .flow .fstep{flex:0 1 auto; width:100%; min-width:0;}
  .flow .farrow{align-self:center; transform:rotate(90deg); line-height:1; margin:-3px 0;}
  .flow.keep-arrows{flex-direction:row; flex-wrap:wrap;}
  .flow.keep-arrows .farrow{transform:none;}
}

/* ===== 문서 전환 탭 — DS Tabs 필 토글(선택=surface-2 리프트, 비선택=투명) ===== */
.doc-tabs{display:flex; gap:4px; align-items:center; margin-left:4px; flex-shrink:0;}
.doc-tab{font-family:var(--font-body); font-weight:500; font-size:.88rem; line-height:1; text-decoration:none; padding:8px 14px; border-radius:var(--r-pill); white-space:nowrap; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);}
.doc-tab.active{background:var(--surface-2); color:var(--ink); pointer-events:none;}
.doc-tab:not(.active){color:var(--ink-muted); background:transparent;}
.doc-tab:not(.active):hover{background:var(--surface-1); color:var(--ink);}
.doc-tab .tab-ico{margin-right:4px;}
@media (max-width:860px){ .doc-tabs{margin-left:0;} .doc-tab{font-size:.8rem; padding:6px 10px;} }

/* ===== §search — GPT-Luna 검색 위젯 (DS 토큰 재사용, 2026-08-27 검색 기능 결선 · JS = assets/luna-search.js) ===== */
.search-trigger{font-family:var(--font-body); font-weight:600; font-size:.85rem; color:var(--ink); background:var(--surface-2); border:1px solid var(--hairline-soft); border-radius:var(--r-pill); padding:6px 16px; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);}
.search-trigger:hover{background:var(--surface-1); border-color:var(--accent);}
.search-trigger:focus-visible{outline:none; box-shadow:var(--ring-focus);}
#luna-modal{position:fixed; inset:0; z-index:9001; display:none; background:rgba(0,0,0,.6);}
#luna-modal.open{display:flex; align-items:flex-start; justify-content:center; padding:8vh 16px;}
#luna-box{position:relative; background:var(--surface-1); border:1px solid var(--hairline-soft); border-radius:var(--r-xl); max-width:640px; width:100%; padding:26px 24px 22px; box-shadow:var(--shadow-card);}
#luna-close{position:absolute; top:12px; right:14px; background:none; border:none; color:var(--ink-muted); font-size:1rem; line-height:1; cursor:pointer; padding:4px;}
#luna-close:hover{color:var(--ink);}
#luna-box h2{margin:0 0 14px; font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink); padding-right:20px;}
#luna-form{display:flex; gap:8px;}
#luna-q{flex:1; padding:10px 12px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-md); color:var(--ink); font-family:var(--font-body); font-size:.95rem;}
#luna-q::placeholder{color:var(--ink-muted);}
#luna-q:focus-visible{outline:none; box-shadow:var(--ring-focus);}
#luna-go{border:none; border-radius:var(--r-md); padding:10px 18px; background:var(--btn-primary-bg); color:var(--btn-primary-ink); font-weight:600; cursor:pointer; transition:opacity var(--dur-fast) var(--ease);}
#luna-go:hover{opacity:.85;}
#luna-out{margin-top:16px; font-size:.92rem; line-height:1.7; color:var(--ink); white-space:pre-wrap; max-height:52vh; overflow:auto;}
#luna-src{margin-top:12px; font-size:.82rem; display:flex; flex-wrap:wrap; gap:10px;}
#luna-src a{color:var(--accent);}
#luna-usage{margin-top:8px; font-size:.72rem; color:var(--ink-muted); font-family:var(--font-mono);}
.luna-dim{color:var(--ink-muted);}

/* §search 안전장치 — topbar 는 검색버튼 추가 전에도 1200px 뷰포트에서 슬랙이 거의 0(실측 15px)이라
   .search-trigger(82px+gap) 추가분이 그대로 가로 오버플로가 되어 버튼이 화면 밖으로 밀린다(실측 1200px에서
   74~89px 클리핑, 1440px 이상은 영향 없음 — 회귀 아님, 신규 버튼이 만든 여유 소진). doc-tabs 만 축소·스크롤
   가능하게 열어 검색 버튼 상시 가시성을 보장한다(다른 요소는 nowrap 텍스트라 축소 여지 없음). 시각 변화 없음
   (>1300px 무적용 확인) — 2026-08-27 site-ds-search 결선. */
@media (max-width:1300px){
  .doc-tabs{flex-shrink:1; min-width:0; overflow-x:auto; scrollbar-width:none;}
  .doc-tabs::-webkit-scrollbar{display:none;}
}

/* ── 가이드북 분해(2026-09-29 구현 라운드) — 부 하위 네비 · 부 끝 이동. 토큰만 사용(하드코딩 0) ── */
.part-nav{display:flex; flex-wrap:wrap; gap:var(--sp-xxs); margin:0 0 var(--sp-lg);}
.part-nav .doc-tab{white-space:normal; line-height:normal;}
.part-next{text-align:center; margin:var(--sp-lg) 0 0; word-break:keep-all;}