/* ═══════════════════════════════════════════════════════════════
   Field Notebook · theme.css  (port of v12-field-notebook → deck core, scroll engine)
   책상 위의 종이 한 장 · 5mm 모눈(옅게) · 좌측 마진 룰 · 우측 마진 메모 · 스탬프 크롬
   슬라이드 내부는 이 파일이 전부 책임진다. 코어 패널은 --dk-* 로 재스킨만.
   ═══════════════════════════════════════════════════════════════ */

/* ───────── 1. 토큰 ───────── */
:root{
  /* 라이트: 크림 노트 + 그린 잉크 */
  --fn-desk:#DCD6C7; --fn-paper:#F5F1E6; --fn-strip:#FBF9F2; --fn-fold:#E8E2D1;
  --fn-ink:#182019; --fn-dim:#525B55; --fn-faint:#8A928B;
  --fn-rule:#D5CEBC; --fn-rule2:#E5DFCF;
  --fn-tint:rgba(19,69,56,.11); --fn-mrule:rgba(19,69,56,.34);
  /* 모눈 — 원본 .11 → .05 (사용자 요청: 선이 아니라 질감으로) */
  --fn-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 .5H0M.5 0V20' fill='none' stroke='rgba(19,69,56,.05)'/%3E%3C/svg%3E");
  --fn-blend:multiply;

  /* 코어 팔레트 덮어쓰기 */
  --bg:var(--fn-desk); --fg:var(--fn-ink); --muted:var(--fn-dim); --line:var(--fn-rule);
  --accent:var(--cmds-green); --accent-on:#FFFFFF;

  /* 코어 패널 재스킨 (종이 톤) */
  --dk-panel-bg:rgba(245,241,230,.94); --dk-panel-fg:var(--fn-ink); --dk-panel-line:var(--fn-rule);
  --dk-panel-h:44px; --dk-notes-w:440px; --dk-font:var(--font-mono); --dk-accent:var(--accent);

  /* 유동 단위: --dk-w/--dk-h 는 코어가 매 레이아웃마다 root 에 쓴다 */
  --uw:calc(var(--dk-w) / 100);
  --u:calc(var(--dk-h) / 100);
  --frame:clamp(12px, 1.1 * var(--uw), 18px);
  --pad:clamp(44px, 5 * var(--uw), 96px);
  --pad-t:clamp(72px, 8.4 * var(--u), 96px);
  --pad-b:clamp(66px, 7.6 * var(--u), 88px);
  --margw:clamp(200px, 15.5 * var(--uw), 300px);
  --gut:clamp(26px, 2.8 * var(--uw), 54px);
  --ear:clamp(44px, 3.4 * var(--uw), 62px);
  --ease:cubic-bezier(.22,.8,.3,1);

  /* 타이포 스케일 (폭·높이 중 작은 쪽을 따른다 — free 비율에서 세로가 짧아도 넘치지 않게) */
  --fs-kicker:clamp(11px, min(.82 * var(--uw), 1.5 * var(--u)), 13px);
  --fs-h1:clamp(42px, min(5.2 * var(--uw), 9 * var(--u)), 96px);
  --fs-hsec:clamp(38px, min(4.6 * var(--uw), 8 * var(--u)), 84px);
  --fs-h2:clamp(27px, min(3.3 * var(--uw), 5.5 * var(--u)), 58px);
  --fs-h2big:clamp(30px, min(3.8 * var(--uw), 6.2 * var(--u)), 64px);
  --fs-lead:clamp(15px, min(1.25 * var(--uw), 2.1 * var(--u)), 21px);
  --fs-body:clamp(13.5px, min(1.12 * var(--uw), 1.9 * var(--u)), 17.5px);
  --fs-small:clamp(12px, min(.98 * var(--uw), 1.65 * var(--u)), 15px);
  --fs-mono:clamp(11px, min(.86 * var(--uw), 1.45 * var(--u)), 13px);
  --fs-title:clamp(16px, min(1.4 * var(--uw), 2.4 * var(--u)), 24px);
  --fs-num:clamp(36px, min(3.4 * var(--uw), 6.6 * var(--u)), 66px);
  --fs-quote:clamp(26px, min(3 * var(--uw), 5.2 * var(--u)), 52px);
  --gap:clamp(10px, 1.6 * var(--u), 22px);
}
html[data-theme="dark"]{
  --fn-desk:#0A0B0A; --fn-paper:#141614; --fn-strip:#1B1E1B; --fn-fold:#1F231F;
  --fn-ink:#EDEEE8; --fn-dim:#A7ADA4; --fn-faint:#6F766F;
  --fn-rule:#2B302B; --fn-rule2:#222622;
  --fn-tint:rgba(233,133,162,.13); --fn-mrule:rgba(233,133,162,.36);
  --fn-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 .5H0M.5 0V20' fill='none' stroke='rgba(233,133,162,.038)'/%3E%3C/svg%3E");
  --fn-blend:normal;
  --bg:var(--fn-desk); --fg:var(--fn-ink); --muted:var(--fn-dim); --line:var(--fn-rule);
  --accent:var(--cmds-pink); --accent-on:#1B1B1B;
  --dk-panel-bg:rgba(20,22,20,.94); --dk-panel-fg:var(--fn-ink); --dk-panel-line:var(--fn-rule);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --fn-desk:#0A0B0A; --fn-paper:#141614; --fn-strip:#1B1E1B; --fn-fold:#1F231F;
    --fn-ink:#EDEEE8; --fn-dim:#A7ADA4; --fn-faint:#6F766F;
    --fn-rule:#2B302B; --fn-rule2:#222622;
    --fn-tint:rgba(233,133,162,.13); --fn-mrule:rgba(233,133,162,.36);
    --fn-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 .5H0M.5 0V20' fill='none' stroke='rgba(233,133,162,.038)'/%3E%3C/svg%3E");
    --fn-blend:normal;
    --bg:var(--fn-desk); --fg:var(--fn-ink); --muted:var(--fn-dim); --line:var(--fn-rule);
    --accent:var(--cmds-pink); --accent-on:#1B1B1B;
    --dk-panel-bg:rgba(20,22,20,.94); --dk-panel-fg:var(--fn-ink); --dk-panel-line:var(--fn-rule);
  }
}

/* ───────── 2. 기반 ───────── */
body{ font:400 17px/1.7 var(--font-sans); letter-spacing:-.011em; font-feature-settings:"kern","liga","calt"; text-rendering:optimizeLegibility; }
::selection{ background:color-mix(in srgb, var(--accent) 26%, transparent); }
html[data-engine="scroll"] #deck{ background:var(--fn-desk); }
code{ font:500 .86em/1 var(--font-mono); letter-spacing:0; padding:.1em .38em; border:1px solid var(--fn-rule); border-radius:2px; background:var(--fn-strip); }
b,strong{ font-weight:700; }

/* ───────── 3. 슬라이드 = 책상 위 종이 한 장 + 2단 시트 ───────── */
.slide{
  background:var(--fn-desk); color:var(--fn-ink);
  display:grid !important;
  grid-template-columns:minmax(0,1fr) var(--margw);
  grid-auto-rows:auto; column-gap:var(--gut); row-gap:0;
  align-content:center;
  padding:calc(var(--frame) + var(--pad-t)) calc(var(--frame) + var(--pad)) calc(var(--frame) + var(--pad-b));
  position:relative;
}
/* 종이 + 모눈 + 테두리 */
.slide::before{
  content:""; position:absolute; inset:var(--frame); z-index:0; pointer-events:none;
  background-color:var(--fn-paper); background-image:var(--fn-grid); background-position:0 0;
  border:1px solid var(--fn-rule);
}
/* 좌측 마진 룰 — 노트북의 빨간 세로줄 자리에 잉크 색 2줄 */
.slide::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:var(--frame); bottom:var(--frame); left:calc(var(--frame) + var(--pad) - 30px);
  width:5px; border-left:1px solid var(--fn-mrule); border-right:1px solid var(--fn-mrule);
}
.slide > *{ position:relative; z-index:1; grid-column:1; min-width:0; }
.slide > .fn-stamp, .slide > .fn-tag, .slide > .fn-pno, .slide > .fn-ear{ grid-area:auto; }
.slide.k-section::after, .slide.k-cover::after{ border-color:var(--accent); }

/* 우측 마진 컬럼 — 정본의 각주(.foot) 가 여기 산다 */
.foot{
  grid-column:2; grid-row:1 / span 12; align-self:center;
  display:flex; flex-direction:column; gap:clamp(16px, 2.4 * var(--u), 24px);
  margin:0; border:0; padding:0; font-size:var(--fs-small); color:var(--fn-dim);
}
.foot-note, .foot-src, .fn-src{
  display:block; background:var(--fn-strip); border:1px solid var(--fn-rule); position:relative; margin:0;
  transform-origin:left top; text-wrap:balance;
}
.foot-note{
  font:400 var(--fs-small)/1.6 var(--font-sans); letter-spacing:-.008em; color:var(--fn-dim);
  padding:16px 16px 15px; transform:rotate(-.8deg);
}
.foot-note::before{
  content:"※"; position:absolute; top:-11px; left:12px; padding:0 5px; background:var(--fn-strip);
  font:600 13px/1.4 var(--font-mono); color:var(--accent); letter-spacing:0;
}
.foot-src{
  font:500 var(--fs-mono)/1.5 var(--font-mono); letter-spacing:.04em; color:var(--fn-faint);
  padding:10px 14px; transform:rotate(.7deg); text-wrap:pretty;
}
.foot-src::before{ content:"src"; display:block; font-size:.8em; letter-spacing:.14em; color:var(--accent); margin-bottom:4px; text-transform:uppercase; }

/* ───────── 4. 주입 크롬: 스탬프 · 태그 · 페이지 스탬프 · 접힌 귀 ───────── */
.fn-stamp{
  position:absolute; z-index:2; left:calc(var(--frame) + var(--pad)); top:calc(var(--frame) + clamp(16px, 2.2 * var(--u), 26px));
  display:inline-block; font:600 var(--fs-mono)/1 var(--font-mono); letter-spacing:.14em; color:var(--accent);
  border:1.5px solid var(--accent); padding:7px 10px 6px; border-radius:2px; white-space:nowrap;
  transform:rotate(-1.6deg); transform-origin:left center; mix-blend-mode:var(--fn-blend); opacity:.88;
}
.fn-stamp::after{ content:""; position:absolute; inset:2px; border:1px solid var(--accent); opacity:.45; border-radius:1px; }
.fn-tag{
  position:absolute; z-index:2; right:calc(var(--frame) + var(--pad)); top:calc(var(--frame) + clamp(22px, 2.8 * var(--u), 32px));
  font:600 var(--fs-mono)/1 var(--font-mono); letter-spacing:.12em; color:var(--fn-faint);
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap; max-width:46%; overflow:hidden; text-overflow:ellipsis;
}
.fn-tag::before{ content:""; width:14px; height:1px; background:var(--fn-faint); flex:none; }
.fn-pno{
  position:absolute; z-index:2; right:calc(var(--frame) + var(--ear) + 22px); bottom:calc(var(--frame) + 18px);
  font:600 11px/1 var(--font-mono); letter-spacing:.14em; color:var(--fn-faint);
  border:1px solid var(--fn-rule); padding:6px 8px 5px; background:var(--fn-paper); white-space:nowrap;
}
.fn-ear{ position:absolute; z-index:2; right:calc(var(--frame) - 1px); bottom:calc(var(--frame) - 1px); width:var(--ear); height:var(--ear); display:block; }
.fn-ear .cut{ fill:var(--fn-desk); }
.fn-ear .flap{ fill:var(--fn-fold); stroke:var(--fn-rule); stroke-width:1; }
/* 색인 탭 (뷰 영역 우측 가장자리 · theme.js 가 #dk-area 에 주입) */
.fn-tabs{ position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:5; display:flex; flex-direction:column; gap:2px; }
.fn-tabs a{
  display:grid; place-items:center; width:calc(var(--frame) + 10px); height:clamp(20px, 2.6 * var(--u), 30px); text-decoration:none;
  font:600 9.5px/1 var(--font-mono); color:var(--fn-faint); background:var(--fn-paper); border:1px solid var(--fn-rule); border-right:0; border-radius:3px 0 0 3px;
}
.fn-tabs a.on{ background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
html[data-mode="stage"] .fn-tabs{ opacity:.9; }

/* ───────── 5. 타이포 ───────── */
.kicker{
  font:600 var(--fs-kicker)/1.2 var(--font-mono); letter-spacing:.1em; color:var(--accent); text-transform:none;
  margin:0 0 clamp(12px, 2 * var(--u), 24px); display:flex; align-items:center; gap:12px;
}
.kicker::before{ content:""; width:9px; height:9px; border:1.3px solid var(--accent); flex:none; }
.headline{ font:800 var(--fs-h2)/1.2 var(--font-display); letter-spacing:-.03em; margin:0 0 clamp(14px, 2.4 * var(--u), 30px); text-wrap:balance; color:var(--fn-ink); }
.headline em{ font-style:normal; color:var(--accent); }
.headline .sub{ display:block; font-size:.5em; font-weight:500; color:var(--fn-dim); margin-top:.35em; letter-spacing:-.015em; }
.k-cover .headline{ font-size:var(--fs-h1); line-height:1.1; letter-spacing:-.034em; margin-bottom:clamp(18px, 3 * var(--u), 34px); }
.k-section .headline{ font-size:var(--fs-hsec); line-height:1.1; letter-spacing:-.034em; }
.k-statement .headline{ font-size:var(--fs-h2big); line-height:1.22; }
.k-quote .headline, .k-diagram .headline{ font-size:var(--fs-h2); }
.lead{ font:400 var(--fs-lead)/1.7 var(--font-sans); letter-spacing:-.012em; color:var(--fn-dim); max-width:44em; margin:0; }
.lead strong, .lead b{ color:var(--fn-ink); background:var(--fn-tint); box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:0 .1em; }
.k-cover .lead, .k-section .lead{ font-size:calc(var(--fs-lead) * 1.08); }
.k-section .lead{ font-family:var(--font-mono); letter-spacing:.04em; color:var(--fn-faint); font-size:var(--fs-body); }
.stats + .lead, .bars + .lead, .quote + .lead{ margin-top:clamp(14px, 2.6 * var(--u), 30px); }

/* ───────── 6. 순차 공개 모션 ───────── */
html.js [data-step]{ opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
html.js [data-step].in{ opacity:1; transform:none; }
html.js svg [data-step]{ transform:none; }

/* ───────── 7. 격자 · 카드 · 링크 (손으로 그린 괘선 표) ───────── */
.grid{ display:grid; gap:0; border-top:1px solid var(--fn-ink); border-bottom:1px solid var(--fn-ink); margin:0; }
.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.cell{
  padding:clamp(12px, 1.9 * var(--u), 22px) clamp(12px, 1.2 * var(--uw), 20px);
  border-right:1px dashed var(--fn-rule); display:flex; flex-direction:column; gap:6px; min-width:0;
}
.cols-4 .cell:nth-child(4n), .cols-3 .cell:nth-child(3n){ border-right:0; }
.cols-3 .cell:nth-child(n+4){ border-top:1px dashed var(--fn-rule); }
.cell-no{ font:600 var(--fs-mono)/1.5 var(--font-mono); letter-spacing:.06em; color:var(--fn-faint); white-space:nowrap; }
.cell-title{ font:700 var(--fs-title)/1.25 var(--font-display); letter-spacing:-.02em; color:var(--fn-ink); }
.cell-text{ font:400 var(--fs-small)/1.55 var(--font-sans); color:var(--fn-dim); }
.nine .cell{ padding:clamp(10px, 1.5 * var(--u), 18px) clamp(12px, 1.2 * var(--uw), 20px); gap:4px; }
.nine .cell-no{ color:var(--accent); }
.constellation .cell-title{ font-family:var(--font-mono); letter-spacing:-.01em; font-weight:600; font-size:calc(var(--fs-title) * .92); }
.cards .cell{ gap:8px; }
.cards .cell-no{ color:var(--accent); }
.cards .cell-title{ font-family:var(--font-mono); font-weight:600; letter-spacing:-.01em; font-size:calc(var(--fs-title) * .9); }
.links .cell-no{ color:var(--accent); }
.links .cell-title{ font-family:var(--font-mono); font-weight:600; font-size:calc(var(--fs-title) * .88); letter-spacing:0; }
.k-outro .lead{ margin-top:clamp(14px, 2.6 * var(--u), 30px); }

/* ───────── 8. 단계 (4열) · 사다리 (세로 4단 · 얇은 선 스케치) ───────── */
.steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; border-top:1px solid var(--fn-ink); margin:0; }
.steps .step{
  padding:clamp(14px, 2.4 * var(--u), 28px) clamp(12px, 1.4 * var(--uw), 24px) clamp(14px, 2.4 * var(--u), 28px) 0;
  border-bottom:1px solid var(--fn-rule); display:flex; flex-direction:column; gap:8px; min-width:0;
}
.steps .step + .step{ padding-left:clamp(12px, 1.4 * var(--uw), 24px); border-left:1px dashed var(--fn-rule); }
.step-no{ font:600 var(--fs-mono)/1.5 var(--font-mono); letter-spacing:.08em; color:var(--accent); white-space:nowrap; }
.step-title{ font:700 var(--fs-title)/1.25 var(--font-display); letter-spacing:-.022em; color:var(--fn-ink); }
.step-text{ font:400 var(--fs-small)/1.6 var(--font-sans); color:var(--fn-dim); }
.step.hi{ background:var(--fn-tint); border-bottom:2px solid var(--accent); }
.step.hi .step-title{ color:var(--accent); }
/* 사다리: 행마다 레일 2줄(::before) + 가로대(::after) */
.steps.ladder{ grid-template-columns:1fr; border-top:0; max-width:1060px; }
.steps.ladder .step, .steps.ladder .step + .step{
  display:grid; grid-template-columns:64px 5.2em minmax(0,1fr); column-gap:18px; align-items:center;
  padding:0 18px 0 0; border:0; position:relative; gap:0 18px;
}
.steps.ladder .step::before{
  content:""; grid-column:1; grid-row:1 / span 2; align-self:stretch; justify-self:start; margin-left:14px; width:36px; height:100%;
  border-left:1.1px solid var(--fn-ink); border-right:1.1px solid var(--fn-ink); min-height:44px; box-sizing:content-box;
}
.steps.ladder .step::after{ content:""; position:absolute; left:14px; width:38px; top:50%; height:0; border-top:1.6px solid var(--fn-ink); }
.steps.ladder .step-no{ grid-column:2; grid-row:1 / span 2; font-size:var(--fs-body); padding:clamp(8px, 1.4 * var(--u), 16px) 0; }
.steps.ladder .step-title{ grid-column:3; grid-row:1; font-size:var(--fs-body); padding-top:clamp(8px, 1.4 * var(--u), 16px); }
.steps.ladder .step-text{ grid-column:3; grid-row:2; font-size:var(--fs-body); padding-bottom:clamp(8px, 1.4 * var(--u), 16px); }
.steps.ladder .step.hi{ background:var(--fn-tint); border-bottom:0; }
.steps.ladder .step.hi::after{ border-top:3px solid var(--accent); }
.steps.ladder .step.hi .step-text{ color:var(--fn-ink); }

/* ───────── 9. 수치 (데이터 스트립 · 모노) ───────── */
.stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); background:var(--fn-strip); border:1px solid var(--fn-rule); margin:0; font-family:var(--font-mono); }
.stat{ display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; padding:clamp(14px, 2.4 * var(--u), 24px) clamp(14px, 1.5 * var(--uw), 24px); border-left:1px dashed var(--fn-rule); min-width:0; }
.stat:first-child{ border-left:0; }
.num{ font:600 var(--fs-num)/1 var(--font-mono); letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--accent); }
.unit{ font:500 calc(var(--fs-num) * .4)/1 var(--font-mono); color:var(--fn-dim); }
.label{ flex-basis:100%; font:500 var(--fs-mono)/1.45 var(--font-mono); color:var(--fn-dim); letter-spacing:.02em; margin-top:10px; }

/* ───────── 10. 표 (스트립 · 점선 행 괘선) ───────── */
.tbl{ border-collapse:collapse; width:100%; background:var(--fn-strip); border:1px solid var(--fn-rule); font:400 var(--fs-body)/1.45 var(--font-sans); margin:0; }
.tbl th, .tbl td{ text-align:left; padding:clamp(8px, 1.3 * var(--u), 13px) clamp(12px, 1.4 * var(--uw), 22px); border-top:1px dashed var(--fn-rule); vertical-align:top; }
.tbl thead th{ border-top:0; border-bottom:1px solid var(--fn-ink); font:600 var(--fs-mono)/1.4 var(--font-mono); letter-spacing:.08em; color:var(--fn-faint); }
.tbl td:first-child{ font-family:var(--font-mono); font-size:var(--fs-small); color:var(--fn-dim); letter-spacing:.02em; white-space:nowrap; }
.tbl .hi{ color:var(--accent); font-weight:600; background:var(--fn-tint); }
.tbl thead th.hi{ color:var(--accent); background:transparent; }
.compare-tbl td:first-child{ color:var(--fn-ink); }

/* ───────── 11. 인용 ───────── */
.quote{ margin:0; padding-left:clamp(16px, 1.6 * var(--uw), 28px); border-left:3px solid var(--accent); }
.quote p{ font:700 var(--fs-quote)/1.28 var(--font-display); letter-spacing:-.028em; margin:0 0 16px; text-wrap:balance; color:var(--fn-ink); }
.quote cite{ font:500 var(--fs-mono)/1.5 var(--font-mono); letter-spacing:.06em; color:var(--fn-faint); font-style:normal; }
.quote cite::before{ content:"— "; }

/* ───────── 12. 도해 (선 스케치 · SVG) ───────── */
.diagram{ width:100%; max-width:1180px; max-height:calc(46 * var(--u)); height:auto; display:block; color:var(--fn-ink); margin:0; }
.diagram rect{ fill:var(--fn-strip); stroke:currentColor; stroke-width:1.4; }
.diagram .dg-arrow path{ stroke:var(--accent); stroke-width:2; fill:none; stroke-linecap:round; }
.diagram .dg-arrow path{ marker-end:none; }
.diagram .dg-loop path{ stroke:var(--accent); stroke-width:1.6; fill:none; stroke-dasharray:4 5; stroke-linejoin:round; }
.dg-t{ font:700 34px var(--font-display); fill:var(--fn-ink); letter-spacing:-.02em; }
.dg-s{ font:400 19px var(--font-sans); fill:var(--fn-dim); }
.dg-v{ font:600 17px var(--font-mono); fill:var(--accent); letter-spacing:.04em; }

/* ───────── 13. 대비 (2단 · 점선 분리) ───────── */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--fn-ink); margin:0; }
.compare .col{ padding:clamp(16px, 2.6 * var(--u), 30px) clamp(14px, 1.6 * var(--uw), 30px) clamp(16px, 2.6 * var(--u), 30px) 0; border-bottom:1px solid var(--fn-rule); min-width:0; }
.compare .col.b{ padding-left:clamp(14px, 1.6 * var(--uw), 30px); border-left:1px dashed var(--fn-rule); }
.compare h3{ font:700 var(--fs-title)/1.25 var(--font-display); letter-spacing:-.022em; margin:0 0 clamp(10px, 1.6 * var(--u), 18px); color:var(--fn-dim); }
.compare .b h3{ color:var(--accent); }
.compare ul{ margin:0; padding:0; list-style:none; display:grid; gap:clamp(6px, 1.1 * var(--u), 12px); }
.compare li{ position:relative; padding-left:22px; font:400 var(--fs-body)/1.6 var(--font-sans); color:var(--fn-dim); }
.compare li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border:1.3px solid var(--fn-faint); }
.compare .b li{ color:var(--fn-ink); }
.compare .b li::before{ border-color:var(--accent); }

/* ───────── 14. 터미널 = 노트에 붙인 출력물 ───────── */
.terminal{
  margin:0; background:var(--fn-strip); color:var(--fn-ink); border:1px solid var(--fn-rule); border-top:2px dashed var(--fn-rule);
  padding:clamp(12px, 1.8 * var(--u), 20px) clamp(14px, 1.6 * var(--uw), 22px);
  font:400 var(--fs-small)/1.62 var(--font-mono); letter-spacing:0; white-space:pre; overflow:hidden; tab-size:2; border-radius:0;
}
.terminal code{ font:inherit; border:0; padding:0; background:none; border-radius:0; letter-spacing:0; }
.terminal .prompt{ color:var(--accent); font-weight:700; }
.terminal .dim{ color:var(--fn-faint); opacity:1; }
.terminal .ok{ color:var(--accent); font-weight:600; }

/* ───────── 15. 본문 리스트 (□ 표식) ───────── */
.body-list{ margin:clamp(14px, 2.4 * var(--u), 28px) 0 0; padding:0; list-style:none; display:grid; gap:clamp(8px, 1.3 * var(--u), 14px); max-width:46em; }
.body-list li{ position:relative; padding-left:22px; font:400 var(--fs-lead)/1.6 var(--font-sans); color:var(--fn-dim); }
.body-list li::before{ content:""; position:absolute; left:0; top:.66em; width:9px; height:9px; border:1.3px solid var(--accent); }
.body-list li b{ color:var(--fn-ink); background:var(--fn-tint); box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:0 .1em; }

/* ───────── 16. 타임라인 (시간축 스케치) ───────── */
.timeline{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0; margin:clamp(6px, 1 * var(--u), 12px) 0 0; border-top:1px solid var(--fn-ink); }
.tick{ position:relative; padding:clamp(18px, 2.8 * var(--u), 30px) clamp(10px, 1.2 * var(--uw), 20px) 0 0; display:flex; flex-direction:column; gap:6px; min-width:0; }
.tick + .tick{ padding-left:clamp(10px, 1.2 * var(--uw), 20px); }
.tick::before{ content:""; position:absolute; left:0; top:-1px; width:1px; height:12px; background:var(--fn-ink); }
.tick::after{ content:""; position:absolute; left:-5px; top:-6px; width:9px; height:9px; border:1.3px solid var(--accent); background:var(--fn-paper); }
.tick + .tick::after{ left:calc(clamp(10px, 1.2 * var(--uw), 20px) - 5px); }
.tick + .tick::before{ left:clamp(10px, 1.2 * var(--uw), 20px); }
.tick-when{ font:600 var(--fs-title)/1.2 var(--font-mono); letter-spacing:-.02em; color:var(--accent); }
.tick-lv{ font:500 var(--fs-mono)/1.4 var(--font-mono); letter-spacing:.06em; color:var(--fn-faint); }
.tick-what{ font:400 var(--fs-small)/1.6 var(--font-sans); color:var(--fn-dim); margin-top:4px; }

/* ───────── 17. 막대 (스트립 위 잉크 막대) ───────── */
.bars{ display:grid; gap:0; background:var(--fn-strip); border:1px solid var(--fn-rule); margin:0; }
.bar{ display:grid; grid-template-columns:minmax(0,1fr) clamp(220px, 30 * var(--uw), 600px) 5em; align-items:center; column-gap:clamp(12px, 1.4 * var(--uw), 24px); padding:clamp(9px, 1.5 * var(--u), 15px) clamp(14px, 1.6 * var(--uw), 24px); border-top:1px dashed var(--fn-rule); font:400 var(--fs-body)/1.4 var(--font-sans); color:var(--fn-dim); }
.bar:first-child{ border-top:0; }
.bar-label b{ font:600 1em/1 var(--font-mono); color:var(--accent); margin-right:8px; letter-spacing:.06em; }
.bar-track{ display:block; height:clamp(10px, 1.6 * var(--u), 16px); border:1px solid var(--fn-rule); background:var(--fn-paper); }
.bar-track i{ display:block; height:100%; width:calc(var(--w) * 1%); background:var(--accent); }
.bar-val{ font:600 var(--fs-body)/1 var(--font-mono); text-align:right; color:var(--fn-ink); font-variant-numeric:tabular-nums; }
.bar.hi{ background:var(--fn-tint); color:var(--fn-ink); }
.bar.hi .bar-val{ color:var(--accent); }

/* ───────── 18. 관점 토글 ───────── */
.toggle{ margin:0; }
.toggle-ctl{ display:flex; gap:8px; margin:0 0 clamp(10px, 1.8 * var(--u), 20px); }
.toggle-ctl button{
  font:600 var(--fs-mono)/1 var(--font-mono); letter-spacing:.04em; padding:11px 16px; cursor:pointer;
  background:var(--fn-strip); color:var(--fn-dim); border:1px solid var(--fn-rule); border-radius:2px;
}
.toggle-ctl button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-on); border-color:var(--accent); }
.toggle-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; border-top:1px solid var(--fn-ink); border-bottom:1px solid var(--fn-ink); }
.tg{ padding:clamp(14px, 2.2 * var(--u), 24px) clamp(12px, 1.3 * var(--uw), 20px); border-right:1px dashed var(--fn-rule); display:flex; flex-direction:column; gap:8px; min-width:0; }
.tg:last-child{ border-right:0; }
.tg-a, .tg-b{ font:800 calc(var(--fs-title) * 1.25)/1.2 var(--font-display); letter-spacing:-.03em; color:var(--fn-ink); }
.toggle[data-view="harness"] .tg-b{ color:var(--accent); }
.toggle[data-view="note"] .tg-b, .toggle[data-view="harness"] .tg-a{ display:none; }
.tg-desc{ font:400 var(--fs-small)/1.55 var(--font-sans); color:var(--fn-dim); }
.toggle-verdict{ font:400 var(--fs-lead)/1.6 var(--font-sans); margin:clamp(12px, 2 * var(--u), 22px) 0 0; color:var(--fn-ink); background:var(--fn-tint); display:inline; box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:0 .15em; }
.toggle-verdict:empty{ display:none; }

/* ───────── 19. 비율·모드 보정 ───────── */
html[data-aspect="16x10"] .slide{ --pad-t:clamp(80px, 9.5 * var(--u), 112px); --pad-b:clamp(74px, 8.6 * var(--u), 104px); }
html[data-aspect="16x10"] .stats + .lead, html[data-aspect="16x10"] .bars + .lead{ margin-top:clamp(18px, 3.2 * var(--u), 40px); }

/* ───────── 20. 인쇄 ───────── */
@media print{
  .slide{ display:grid !important; }
  .fn-stamp{ mix-blend-mode:normal; }
  .fn-tabs{ display:none !important; }
}