/* ═══════════════════════════════════════════════════════════════════════
   Editorial Scroll · theme.css  (port of v1-editorial-scroll onto deck-core)
   engine: scroll — #deck is --dk-w × --dk-h, each .slide{height:var(--dk-h)}.
   All fluid sizes use --uw / --uh = 1/100 of the deck frame (never vw/vh),
   so the type scale follows the deck in 16x9 / 16x10 / free alike.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── 1. 팔레트 (원본 v1 라이트/다크 원색 → 코어 토큰 덮어쓰기) ───────── */
:root{
  --ed-paper:#FBFBFA; --ed-card:#FFFFFF; --ed-soft:#F5F6F4;
  --ed-line:#E6E8E6;  --ed-rule:#D0D3D0;
  --ed-ink:#0B0D0C;   --ed-muted:#4A544F; --ed-faint:#8A938E;
  --ed-acc:var(--cmds-green); --ed-acc-bg:#F1F7F4; --ed-acc-line:#BAD9C9; --ed-on-acc:#FFFFFF;
  --ed-term-bg:#0B0D0C; --ed-term-fg:#E4E8E5;
  --ed-term-ok:color-mix(in srgb, var(--cmds-green) 42%, #FFFFFF);

  --bg:var(--ed-paper); --fg:var(--ed-ink); --muted:var(--ed-muted); --line:var(--ed-line);
  --accent:var(--ed-acc); --accent-on:var(--ed-on-acc);

  --dk-panel-bg:rgba(251,251,250,.9); --dk-panel-fg:var(--ed-muted); --dk-panel-line:var(--ed-line);
  --dk-panel-h:48px; --dk-notes-w:460px; --dk-font:var(--font-sans); --dk-accent:var(--ed-acc);
  --ed-ease:cubic-bezier(.22,.8,.3,1);
}
html[data-theme="dark"]{
  --ed-paper:#0B0F0D; --ed-card:#0D1411; --ed-soft:#0A1110;
  --ed-line:#1A231F;  --ed-rule:#26302A;
  --ed-ink:#F2F4F3;   --ed-muted:#9AA39D; --ed-faint:#626A66;
  --ed-acc:var(--cmds-pink); --ed-acc-bg:#2B1922; --ed-acc-line:#4A2C38; --ed-on-acc:#1B1B1B;
  --ed-term-bg:#080C0A; --ed-term-fg:#E4E8E5;
  --bg:var(--ed-paper); --fg:var(--ed-ink); --muted:var(--ed-muted); --line:var(--ed-line);
  --accent:var(--ed-acc); --accent-on:var(--ed-on-acc);
  --dk-panel-bg:rgba(11,15,13,.9); --dk-panel-fg:var(--ed-muted); --dk-panel-line:var(--ed-line);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --ed-paper:#0B0F0D; --ed-card:#0D1411; --ed-soft:#0A1110;
    --ed-line:#1A231F;  --ed-rule:#26302A;
    --ed-ink:#F2F4F3;   --ed-muted:#9AA39D; --ed-faint:#626A66;
    --ed-acc:var(--cmds-pink); --ed-acc-bg:#2B1922; --ed-acc-line:#4A2C38; --ed-on-acc:#1B1B1B;
    --ed-term-bg:#080C0A; --ed-term-fg:#E4E8E5;
    --bg:var(--ed-paper); --fg:var(--ed-ink); --muted:var(--ed-muted); --line:var(--ed-line);
    --accent:var(--ed-acc); --accent-on:var(--ed-on-acc);
    --dk-panel-bg:rgba(11,15,13,.9); --dk-panel-fg:var(--ed-muted); --dk-panel-line:var(--ed-line);
  }
}

/* ───────── 2. 프레임 단위 · 슬라이드 기반 ───────── */
#deck{
  --uw:calc(var(--dk-w) / 100);            /* 1% of deck width  */
  --uh:calc(var(--dk-h) / 100);            /* 1% of deck height */
  --gut:clamp(28px, calc(7 * var(--uw)), 112px);
  --fs:clamp(14px, calc(1.05 * var(--uw)), 21px);       /* body / lead */
  --fs-s:clamp(12px, calc(.95 * var(--uw)), 17px);      /* small labels */
  --fs-xs:clamp(11px, calc(.8 * var(--uw)), 14px);      /* mono meta */
  --h1:clamp(38px, calc(6.2 * var(--uw)), 96px);
  --h2:clamp(30px, calc(4.2 * var(--uw)), 66px);
  --h2-dense:clamp(26px, calc(3.3 * var(--uw)), 54px);
  --block-gap:clamp(18px, calc(3.2 * var(--uh)), 40px);
  font:400 var(--fs)/1.7 var(--font-sans); letter-spacing:-.011em;
  font-feature-settings:"kern","liga","calt"; text-rendering:optimizeLegibility;
}
::selection{ background:color-mix(in srgb, var(--ed-acc) 26%, transparent); }
:focus-visible{ outline:2px solid var(--ed-acc); outline-offset:3px; border-radius:2px; }

.slide{
  justify-content:center;
  padding:calc(9 * var(--uh)) var(--gut) calc(12 * var(--uh));
  gap:0;
}
.slide > *{ max-width:1696px; }

/* ───────── 3. 타이포 ───────── */
.kicker{
  align-self:flex-start; width:max-content; max-width:62%;
  display:flex; align-items:center; gap:12px;
  font:600 clamp(12px, calc(.8 * var(--uw)), 15px)/1.2 var(--font-sans);
  letter-spacing:.14em; color:var(--ed-acc); margin:0 0 clamp(14px, calc(2.4 * var(--uh)), 28px);
  text-transform:none;
}
.kicker::after{ content:""; flex:1 0 60px; height:1px; background:var(--ed-acc-line); max-width:180px; }
.headline{
  font:800 var(--h2)/1.22 var(--font-display); letter-spacing:-.028em; margin:0;
}
.k-cover .headline, .k-section .headline{ font-size:var(--h1); line-height:1.12; letter-spacing:-.032em; }
.k-statement .headline{ font-size:clamp(32px, calc(4.6 * var(--uw)), 76px); line-height:1.2; }
.k-table .headline, .k-bars .headline, .k-cards .headline, .k-grid .headline, .k-toggle .headline{ font-size:var(--h2-dense); line-height:1.26; }
.headline em{ font-style:normal; color:var(--ed-acc); }
.headline .sub{
  display:block; font:500 clamp(16px, calc(1.6 * var(--uw)), 30px)/1.4 var(--font-sans);
  letter-spacing:-.014em; color:var(--muted); margin-top:.35em;
}
.lead{
  font:400 clamp(15px, calc(1.35 * var(--uw)), 24px)/1.72 var(--font-sans);
  letter-spacing:-.014em; color:var(--muted); max-width:44em; margin:var(--block-gap) 0 0;
}
.lead strong,.lead b{ color:var(--fg); font-weight:700; }
.headline + .lead{ margin-top:clamp(14px, calc(2.6 * var(--uh)), 30px); }

/* 하단 메타 (원본 .meta + .note): 헤어라인 위에 각주 · 출처 */
.foot{
  position:absolute; left:var(--gut); right:var(--gut); bottom:calc(3.2 * var(--uh));
  margin:0; padding-top:12px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  font:400 var(--fs-xs)/1.55 var(--font-sans); color:var(--ed-faint); letter-spacing:-.006em;
  max-width:none;
}
.foot-note{ max-width:72%; }
.foot-note b,.foot-note strong{ color:var(--muted); font-weight:600; }
.foot-src{ font-family:var(--font-mono); font-size:.92em; letter-spacing:.02em; white-space:nowrap; text-align:right; }

/* 우상단 킥커 (theme.js 주입): 섹션명 · 번호 */
.ed-kicker{
  position:absolute; top:calc(3.6 * var(--uh)); right:var(--gut); margin:0;
  font:600 var(--fs-xs)/1 var(--font-mono); letter-spacing:.12em; color:var(--ed-faint);
  user-select:none; text-align:right; white-space:nowrap; max-width:none;
}
.ed-kicker b{ font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ───────── 4. 순차 공개 모션 (원본: 18px 상승, .55s 커스텀 ease) ───────── */
html.js [data-step]{ opacity:0; transform:translateY(18px); transition:opacity .55s var(--ed-ease), transform .55s var(--ed-ease); }
html.js [data-step].in{ opacity:1; transform:none; }
html.js svg [data-step]{ transform:none; }

/* ───────── 5. 격자 (grid / cards / links) — 원본 formats·demos 격자 ───────── */
.grid{
  display:grid; gap:0; margin:var(--block-gap) 0 0;
  border-top:1.5px solid var(--ed-rule); border-left:1px solid var(--line);
}
.cols-3{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:repeat(4,1fr); }
.cell{
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(12px, calc(2 * var(--uh)), 24px) clamp(12px, calc(1.3 * var(--uw)), 24px);
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
.cell-no{ font:600 var(--fs-xs)/1.2 var(--font-mono); letter-spacing:.06em; color:var(--ed-faint); }
.cell-title{ font:700 clamp(15px, calc(1.5 * var(--uw)), 29px)/1.28 var(--font-display); letter-spacing:-.022em; color:var(--fg); }
.cell-text{ font:400 clamp(12px, calc(1.05 * var(--uw)), 19px)/1.6 var(--font-sans); color:var(--muted); letter-spacing:-.008em; margin-top:2px; }
.grid.nine .cell{ padding-top:clamp(10px, calc(1.5 * var(--uh)), 18px); padding-bottom:clamp(10px, calc(1.5 * var(--uh)), 18px); gap:4px; }
.grid.nine .cell-title{ font-size:clamp(15px, calc(1.3 * var(--uw)), 23px); }
.grid.constellation .cell-title{ font-family:var(--font-mono); letter-spacing:-.01em; font-weight:600; }
.grid.constellation .cell-no{ color:var(--ed-acc); }
.grid.cards .cell-no{ color:var(--ed-acc); }
.grid.links .cell-title{ font-family:var(--font-mono); font-weight:600; letter-spacing:-.01em; color:var(--ed-acc); }
.k-outro .grid{ border-top-color:var(--ed-acc-line); border-left-color:var(--ed-acc-line); }
.k-outro .cell{ border-color:var(--ed-acc-line); }

/* ───────── 6. 단계 (steps 4열 = 원본 loop · ladder = 원본 ladder) ───────── */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:var(--block-gap) 0 0;
  border-top:1.5px solid var(--ed-rule);
}
.step{
  position:relative; border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  padding:clamp(12px, calc(2 * var(--uh)), 22px) clamp(12px, calc(1.3 * var(--uw)), 24px) clamp(14px, calc(2.2 * var(--uh)), 24px);
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
.steps:not(.ladder) .step:last-child{ border-right:0; }
.steps:not(.ladder) .step + .step::before{
  content:"\2192"; position:absolute; left:0; top:50%; transform:translate(-50%,-50%);
  font:400 var(--fs-s)/1 var(--font-sans); color:var(--ed-faint); background:var(--bg); padding:4px 3px; z-index:2;
}
.step-no{ font:700 var(--fs-xs)/1.2 var(--font-mono); color:var(--ed-faint); letter-spacing:.06em; }
.step-title{ font:700 clamp(16px, calc(1.6 * var(--uw)), 28px)/1.22 var(--font-display); letter-spacing:-.024em; }
.step-text{ font:400 clamp(12px, calc(1.05 * var(--uw)), 19px)/1.6 var(--font-sans); color:var(--muted); letter-spacing:-.008em; }
.step.hi{ background:var(--ed-acc-bg); border-right-color:var(--ed-acc-line); }
.step.hi::before{ background:var(--ed-acc-bg); }
.step.hi .step-no,.step.hi .step-title{ color:var(--ed-acc); }
.step.hi .step-text{ color:var(--fg); }
/* 세로 사다리 */
.steps.ladder{ grid-template-columns:1fr; max-width:1400px; }
.steps.ladder .step{
  display:grid; grid-template-columns:clamp(56px, calc(5 * var(--uw)), 96px) clamp(120px, calc(11 * var(--uw)), 210px) 1fr;
  gap:clamp(12px, calc(1.6 * var(--uw)), 30px); align-items:baseline;
  padding:clamp(10px, calc(1.7 * var(--uh)), 20px) clamp(0px, calc(1 * var(--uw)), 16px);
  border-right:0;
}
.steps.ladder .step-no{ font-size:clamp(14px, calc(1.3 * var(--uw)), 22px); font-weight:700; color:var(--ed-faint); font-variant-numeric:tabular-nums; }
.steps.ladder .step-title{ font-size:clamp(16px, calc(1.5 * var(--uw)), 26px); }
.steps.ladder .step-text{ font-size:clamp(13px, calc(1.1 * var(--uw)), 19px); }
.steps.ladder .step.hi{ border-bottom-color:var(--ed-acc-line); }

/* ───────── 7. 숫자 (stats) ───────── */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:var(--block-gap) 0 0; border-top:1.5px solid var(--ed-rule); }
.stat{
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"num unit" "label label"; align-items:baseline; column-gap:.12em; row-gap:8px;
  border-bottom:1px solid var(--line); border-right:1px solid var(--line);
  padding:clamp(12px, calc(2.2 * var(--uh)), 26px) clamp(12px, calc(1.4 * var(--uw)), 26px) clamp(14px, calc(2.4 * var(--uh)), 28px);
}
.stat:last-child{ border-right:0; }
.num{ grid-area:num; font:700 clamp(40px, calc(4.8 * var(--uw)), 92px)/1 var(--font-display); letter-spacing:-.04em; color:var(--ed-acc); font-variant-numeric:tabular-nums; }
.unit{ grid-area:unit; font:600 clamp(16px, calc(1.6 * var(--uw)), 30px)/1 var(--font-sans); color:var(--ed-acc); justify-self:start; }
.label{ grid-area:label; font:400 clamp(12px, calc(1.05 * var(--uw)), 18px)/1.5 var(--font-sans); color:var(--muted); letter-spacing:-.008em; }

/* ───────── 8. 표 (table / compare-tbl) ───────── */
.tbl{
  border-collapse:collapse; width:100%; margin:var(--block-gap) 0 0;
  font:400 clamp(13px, calc(1.15 * var(--uw)), 21px)/1.45 var(--font-sans); letter-spacing:-.01em;
  border-top:1.5px solid var(--ed-rule);
}
.tbl th,.tbl td{ text-align:left; padding:clamp(7px, calc(1.15 * var(--uh)), 14px) clamp(10px, calc(1 * var(--uw)), 18px); border-bottom:1px solid var(--line); vertical-align:top; }
.tbl th{ font:600 var(--fs-xs)/1.3 var(--font-mono); letter-spacing:.08em; color:var(--ed-faint); padding-top:10px; padding-bottom:10px; }
.tbl td:first-child{ color:var(--muted); }
.tbl .hi{ color:var(--ed-acc); font-weight:600; }
.tbl th.hi{ color:var(--ed-acc); }
.compare-tbl th.hi,.compare-tbl td.hi{ background:var(--ed-acc-bg); }
.compare-tbl td:first-child{ font-weight:600; color:var(--fg); }

/* ───────── 9. 인용 ───────── */
.quote{ margin:0; max-width:1500px; }
.quote p{
  font:800 clamp(30px, calc(4 * var(--uw)), 70px)/1.22 var(--font-display); letter-spacing:-.03em; margin:0 0 clamp(14px, calc(2.4 * var(--uh)), 26px);
}
.quote p::before{ content:"\201C"; color:var(--ed-acc); margin-right:.06em; }
.quote cite{ display:block; font:500 var(--fs-s)/1.4 var(--font-mono); letter-spacing:.04em; color:var(--ed-faint); font-style:normal; padding-top:12px; border-top:1px solid var(--line); width:max-content; max-width:100%; }

/* ───────── 10. 도해 (svg.diagram) ───────── */
.diagram{ display:block; width:100%; height:auto; max-height:calc(50 * var(--uh)); margin:var(--block-gap) 0 0; overflow:visible; }
.diagram rect{ fill:var(--ed-card); stroke:var(--ed-rule); stroke-width:1.5; }
/* nth-of-type counts every <g>: layer, arrow, layer → the 3rd <g> is the Wiki layer (LLM-owned), tinted on purpose */
.dg-layer:nth-of-type(3) rect{ fill:var(--ed-acc-bg); stroke:var(--ed-acc-line); }
.dg-t{ font:700 34px var(--font-display); fill:var(--fg); letter-spacing:-.02em; }
.dg-s{ font:400 17px var(--font-sans); fill:var(--muted); }
.dg-v{ font:600 15px var(--font-mono); fill:var(--ed-acc); letter-spacing:.02em; }
.dg-arrow path{ stroke:var(--ed-acc); stroke-width:2; fill:none; marker-end:none; }
.dg-arrow path{ stroke-linecap:square; }
.dg-loop path{ stroke:var(--ed-acc); stroke-width:1.5; stroke-dasharray:6 6; fill:none; }

/* ───────── 11. 대비 (compare) — 원본 split ───────── */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px, calc(3.2 * var(--uw)), 60px); margin:var(--block-gap) 0 0; align-items:start; }
.compare .col{ border-top:1.5px solid var(--ed-rule); }
.compare h3{ font:700 clamp(18px, calc(1.8 * var(--uw)), 32px)/1.25 var(--font-display); letter-spacing:-.024em; margin:0; padding:clamp(10px, calc(1.6 * var(--uh)), 18px) 0; color:var(--ed-faint); }
.compare .b{ border-top-color:var(--ed-acc); }
.compare .b h3{ color:var(--ed-acc); }
.compare ul{ margin:0; padding:0; list-style:none; }
.compare li{ padding:clamp(8px, calc(1.4 * var(--uh)), 16px) 0; border-top:1px solid var(--line); font:400 clamp(14px, calc(1.25 * var(--uw)), 22px)/1.55 var(--font-sans); color:var(--muted); letter-spacing:-.012em; }
.compare .b li{ color:var(--fg); }
.compare li::before{ content:"\2014"; color:var(--ed-faint); margin-right:.6em; font-weight:400; }
.compare .b li::before{ color:var(--ed-acc); }

/* ───────── 12. 터미널 ───────── */
.terminal{
  margin:var(--block-gap) 0 0; background:var(--ed-term-bg); color:var(--ed-term-fg);
  padding:clamp(14px, calc(2.2 * var(--uh)), 26px) clamp(16px, calc(1.8 * var(--uw)), 30px);
  font:400 clamp(12px, calc(.95 * var(--uw)), 17.5px)/1.85 var(--font-mono); letter-spacing:0;
  overflow:hidden; border:1px solid var(--ed-rule); tab-size:2; max-width:1500px;
}
.terminal .prompt{ color:var(--cmds-pink); }
.terminal .dim{ color:#8B948E; }
.terminal .ok{ color:var(--ed-term-ok); }

/* ───────── 13. 본문 리스트 (statement 17) ───────── */
.body-list{
  margin:var(--block-gap) 0 0; padding:0; list-style:none; max-width:1300px;
  border-top:1.5px solid var(--ed-rule);
}
.body-list li{ padding:clamp(9px, calc(1.5 * var(--uh)), 16px) 0; border-bottom:1px solid var(--line); font:400 clamp(14px, calc(1.25 * var(--uw)), 22px)/1.55 var(--font-sans); color:var(--muted); letter-spacing:-.012em; }
.body-list li b{ color:var(--ed-acc); font-weight:700; font-family:var(--font-display); letter-spacing:-.01em; margin-right:.25em; }

/* ───────── 14. 타임라인 — 원본 .ev (선 + 점) ───────── */
.timeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:calc(var(--block-gap) + 14px) 0 0; border-top:1.5px solid var(--ed-rule); }
.tick{
  position:relative; padding:clamp(18px, calc(2.8 * var(--uh)), 30px) clamp(12px, calc(1.2 * var(--uw)), 22px) clamp(10px, calc(1.6 * var(--uh)), 18px) 0;
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
.tick::before{ content:""; position:absolute; left:0; top:-6px; width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--fg); box-sizing:border-box; }
.tick-when{ font:700 clamp(15px, calc(1.5 * var(--uw)), 26px)/1.2 var(--font-display); letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--fg); }
.tick-lv{ font:600 var(--fs-xs)/1.4 var(--font-mono); letter-spacing:.08em; color:var(--ed-acc); }
.tick-what{ font:400 clamp(12px, calc(1.05 * var(--uw)), 19px)/1.55 var(--font-sans); color:var(--muted); letter-spacing:-.008em; margin-top:2px; }
.tick:nth-child(2)::before,.tick:nth-child(3)::before,.tick:nth-child(4)::before{ border-color:var(--ed-acc); background:var(--ed-acc); }

/* ───────── 15. 막대 (bars) ───────── */
.bars{ display:grid; gap:0; margin:var(--block-gap) 0 0; border-top:1.5px solid var(--ed-rule); max-width:1500px; }
.bar{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(220px, calc(30 * var(--uw)), 560px) clamp(48px, calc(4 * var(--uw)), 76px);
  align-items:center; gap:clamp(12px, calc(1.6 * var(--uw)), 30px);
  padding:clamp(8px, calc(1.4 * var(--uh)), 15px) 0; border-bottom:1px solid var(--line);
  font:400 clamp(13px, calc(1.15 * var(--uw)), 20px)/1.45 var(--font-sans); letter-spacing:-.01em; color:var(--muted);
}
.bar-label b{ color:var(--fg); font-family:var(--font-mono); font-weight:700; margin-right:.5em; }
.bar-track{ height:6px; background:var(--ed-soft); border:1px solid var(--line); display:block; }
.bar-track i{ display:block; height:100%; width:calc(var(--w) * 1%); background:var(--ed-acc); transform-origin:left; transition:width .6s var(--ed-ease); }
.bar-val{ font:600 var(--fs-s)/1 var(--font-mono); text-align:right; color:var(--fg); font-variant-numeric:tabular-nums; }
.bar.hi{ background:var(--ed-acc-bg); border-bottom-color:var(--ed-acc-line); padding-left:12px; padding-right:12px; margin:0 -12px; }
.bar.hi .bar-label{ color:var(--fg); }
.bar.hi .bar-label b,.bar.hi .bar-val{ color:var(--ed-acc); }
.bars + .lead{ margin-top:clamp(12px, calc(2.2 * var(--uh)), 26px); }

/* ───────── 16. 관점 토글 (toggle) — 원본 labbar · tl · verdict ───────── */
.toggle{ margin:var(--block-gap) 0 0; }
.toggle-ctl{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 clamp(14px, calc(2.4 * var(--uh)), 28px); }
.toggle-ctl button{
  font:600 clamp(13px, calc(1.1 * var(--uw)), 19px)/1 var(--font-sans); letter-spacing:-.01em;
  padding:clamp(9px, calc(1.3 * var(--uh)), 14px) clamp(14px, calc(1.4 * var(--uw)), 24px);
  border:1.5px solid var(--ed-rule); border-radius:0; background:var(--ed-card); color:var(--fg); cursor:pointer;
  transition:background .25s var(--ed-ease), border-color .25s var(--ed-ease), color .25s var(--ed-ease);
}
.toggle-ctl button:hover{ border-color:var(--ed-acc); background:var(--ed-acc-bg); color:var(--ed-acc); }
.toggle-ctl button[aria-pressed="true"]{ background:var(--ed-acc); border-color:var(--ed-acc); color:var(--ed-on-acc); }
.toggle-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1.5px solid var(--ed-rule); border-left:1px solid var(--line); }
.tg{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(12px, calc(2 * var(--uh)), 22px) clamp(12px, calc(1.3 * var(--uw)), 22px); display:flex; flex-direction:column; gap:6px; min-width:0; }
.tg-a,.tg-b{ font:800 clamp(20px, calc(2.2 * var(--uw)), 40px)/1.15 var(--font-display); letter-spacing:-.03em; }
.tg-b{ color:var(--ed-acc); }
.toggle[data-view="note"] .tg-b, .toggle[data-view="harness"] .tg-a{ display:none; }
.toggle[data-view="harness"] .toggle-grid{ border-top-color:var(--ed-acc); }
.tg-desc{ font:400 clamp(12px, calc(1.05 * var(--uw)), 18px)/1.55 var(--font-sans); color:var(--muted); letter-spacing:-.008em; }
.toggle-verdict{
  margin:clamp(14px, calc(2.4 * var(--uh)), 28px) 0 0; padding-top:clamp(10px, calc(1.6 * var(--uh)), 18px);
  border-top:2.5px solid var(--ed-acc); max-width:60em; min-height:2.6em;
  font:700 clamp(16px, calc(1.5 * var(--uw)), 26px)/1.4 var(--font-display); letter-spacing:-.02em; color:var(--ed-acc);
}

/* ───────── 17. 클로징 스프레드 (accent-toned) ───────── */
.k-outro{ background:var(--ed-acc-bg); }
.k-outro .foot{ border-top-color:var(--ed-acc-line); }
.k-outro .kicker::after{ background:var(--ed-acc); }
.k-outro .lead{ color:var(--fg); font-weight:500; }

/* ───────── 18. 표지 · 섹션 ───────── */
.k-cover .lead{ font-size:clamp(17px, calc(1.6 * var(--uw)), 30px); max-width:36em; }
.k-cover .kicker{ letter-spacing:.18em; }
.k-section .lead{ font-family:var(--font-mono); font-size:clamp(14px, calc(1.2 * var(--uw)), 22px); letter-spacing:.06em; color:var(--ed-faint); }
.k-section .kicker{ color:var(--ed-faint); }
.k-section .kicker::after{ background:var(--ed-rule); }

/* ───────── 19. 진행 점 (theme.js 주입) — 덱 프레임 안 우측 세로 열 ───────── */
.ed-dots{
  position:sticky; top:0; height:0; z-index:30; margin:0; pointer-events:none;
  scroll-snap-align:none;
}
.ed-dots ul{
  position:absolute; right:clamp(10px, calc(1.4 * var(--uw)), 22px); top:calc(50 * var(--uh)); transform:translateY(-50%);
  margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:clamp(8px, calc(.55 * var(--uw)), 11px); pointer-events:auto;
}
.ed-dots li{ margin:0; }
.ed-dots li[data-first]{ margin-top:clamp(8px, calc(.7 * var(--uw)), 14px); }
.ed-dots li:first-child{ margin-top:0; }
.ed-dots button{
  appearance:none; display:block; width:var(--dot); height:var(--dot); --dot:clamp(7px, calc(.5 * var(--uw)), 10px); padding:0; border:0; border-radius:50%;
  background:var(--ed-rule); cursor:pointer;
  transition:background .25s var(--ed-ease), transform .25s var(--ed-ease);
}
.ed-dots button:hover{ background:var(--ed-acc); }
.ed-dots button[aria-current="true"]{ background:var(--ed-acc); transform:scale(1.45); }
@media (prefers-reduced-motion: reduce){ .ed-dots button[aria-current="true"]{ transform:none; outline:2px solid var(--ed-acc); outline-offset:2px; } }

/* ───────── 20. 인쇄: 지면은 흰색, 점·킥커 장식 제거 ───────── */
@media print{
  html, html[data-theme="dark"]{
    --ed-paper:#FFFFFF; --ed-card:#FFFFFF; --ed-soft:#F5F6F4; --ed-line:#D8DBD8; --ed-rule:#B6BBB7;
    --ed-ink:#0B0D0C; --ed-muted:#3B443F; --ed-faint:#6C756F;
    --ed-acc:#134538; --ed-acc-bg:#F1F7F4; --ed-acc-line:#BAD9C9; --ed-on-acc:#FFFFFF;
    --bg:#FFFFFF; --fg:#0B0D0C; --muted:#3B443F; --line:#D8DBD8; --accent:#134538; --accent-on:#FFFFFF;
  }
  #deck{ --uw:19.2px; --uh:calc(var(--stage-h) / 100); }
  .ed-dots{ display:none !important; }
  .slide{ background:var(--bg); }
  .k-outro{ background:var(--ed-acc-bg); }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}