/* ═══════════════════════════════════════════════════════════════════════
   DATA-DRIVEN · theme.css  (port of v3-uiux-datadriven → deck-core R1)
   모든 수치는 ui-ux-pro-max 데이터셋 행에서 왔다. 근거는 DESIGN.md §3~§4.
     골격   styles.csv / minimalism-and-swiss-style  (radius 0 · shadow none · gap 2rem · single accent)
     대활자 styles.csv / exaggerated-minimalism      (clamp(3rem,10vw,12rem) 앵커 → 1.333 하향)
     간격   design_system.py DIAL_TIERS density 1-3 "Spacious"  4/8/24/32/48/64/96
     모션   motion.csv Subtle tier  260 / 340 / 180 ms · power1.out / power1.inOut · 12px · 30ms
     규칙   ux-guidelines.csv  Contrast · Color Only · Target Size · Reduced Motion · Long Token
   고정 1920 캔버스이므로 원본의 vw/vh clamp 는 1920×1080 평가값 px 로 확정했다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 토큰 ─────────────────────────────────────────────────────────── */
:root{
  /* 간격 — DIAL_TIERS Spacious 그대로 */
  --sp-xs:4px; --sp-sm:8px; --sp-md:24px; --sp-lg:32px; --sp-xl:48px; --sp-2xl:64px; --sp-3xl:96px;
  --gap:32px;                 /* swiss / gap:2rem */
  --pad-x:112px;              /* exaggerated-minimalism / padding 8rem+ → clamp(2.5rem,6vw,8rem)@1920 = 115 → 8px 격자 정렬 112 */
  --pad-t:80px;               /* 원본 상단 max(sp-pad*.72, 58) = 83 → 80 (8px 격자) */
  --pad-b:64px;               /* 원본 하단 max(sp-pad*.62, 46) = 71 → 64 (8px 격자) */
  --radius:0px;               /* swiss / --border-radius:0px */
  --bw:1px; --bw-sem:1.5px; --bw-hot:3px; --bw-stat:2px;   /* 장식 1 · 의미 경계 1.5 · 강조 좌측 3 · 스탯 상단 2 */

  /* 타입 램프 — Perfect Fourth(1.333). 원본 clamp 의 1920×1080 평가값(120/80/52/36/28/22/16/17)은
     '읽기 거리' 앵커라 1080 캔버스의 아래 절반이 비었다(1차 스크린샷). 무대 거리용으로 같은 램프를
     정확히 한 단(×1.333) 올려 확정. 비율·단 수·역할은 원본 그대로, 앵커만 한 칸 위. */
  --t-display:160px;          /* 120 × 1.333 */
  --t-h1:107px;               /*  80 × 1.333 */
  --t-h2:69px;                /*  52 × 1.333 */
  --t-h3:48px;                /*  36 × 1.333 */
  --t-lead:37px;              /*  28 × 1.333 */
  --t-body:29px;              /*  22 × 1.333 */
  --t-caption:21px;           /*  16 × 1.333 */
  --t-mono:23px;              /*  17 × 1.333 */
  --lh-display:1.15; --lh-h1:1.2; --lh-h2:1.28; --lh-body:1.65; --lh-caption:1.5;   /* ux-guidelines Line Height 1.5–1.75 */
  --ls-display:-.035em; --ls-h1:-.025em; --ls-h2:-.02em; --ls-body:-.01em;         /* 데이터셋 -.05em 은 한글에 과함 → 완화 */
  --fw-display:800; --fw-h:700; --fw-body:400; --fw-emph:600;                        /* 900 은 한글 속공간 막힘 → 800 */
  --measure-body:62ch;        /* Line Length 65–75ch, 한글 보정 */
  --measure-head:34ch;        /* Heading Line Balance 20ch — 한글 1자≈2ch 실측 재조정 */

  /* 모션 — motion.csv Subtle */
  --dur-in:260ms; --dur-reveal:340ms; --dur-hover:180ms;
  --ease-out:cubic-bezier(.25,.46,.45,.94);   /* power1.out */
  --ease-io:cubic-bezier(.455,.03,.515,.955); /* power1.inOut */
  --reveal-y:12px; --stagger:30ms;

  /* 라이트 — 원본 "Knowledge Base/Documentation" 행의 대비 목표(본문≥13.9 · 보조≥7 · 캡션≥4.5 · 경계≥4.5)를
     CI green 색상으로 재산출. 값별 실측 대비는 DESIGN.md §4 */
  --bg:#F6F8F7; --surface:#FFFFFF; --surface-2:#E7ECEB;
  --fg:#0E1F1B; --fg-2:#45554F; --fg-3:#66756F;
  --hairline:#DEE5E3; --rule:#66756F;
  --acc:var(--cmds-green); --on-acc:#FFFFFF;
  --tint-1:#F6F8F7; --tint-2:#ECF0EF; --tint-3:#E3E9E7;   /* green @4/8/12% on #FFF */
  --term-bg:var(--tint-2);
  /* 코어 변수 동기 */
  --muted:var(--fg-2); --line:var(--hairline); --accent:var(--acc); --accent-on:var(--on-acc);
  /* 코어 패널 재스킨 — 같은 UI 시스템의 툴바처럼 */
  --dk-panel-bg:var(--surface); --dk-panel-fg:var(--fg-2); --dk-panel-line:var(--hairline);
  --dk-panel-h:44px; --dk-notes-w:440px; --dk-font:var(--font-mono); --dk-accent:var(--acc);
}
html[data-theme="dark"]{
  /* 다크 — 원본 "Developer Tool / IDE" 행의 대비 목표(본문≥17 · 보조≥12 · 캡션≥6.9 · 경계≥3.75)를 CI 색상으로 재산출 */
  --bg:#0E1512; --surface:#182019; --surface-2:#232C26;
  --fg:#F3F5F3; --fg-2:#C8D1CC; --fg-3:#94A29B;
  --hairline:#3D4842; --rule:#6E7D77;
  --acc:var(--cmds-pink); --on-acc:#1B1B1B;
  --tint-1:#1B1C1B; --tint-2:#242020; --tint-3:#312729;   /* pink @6/10/16% on bg */
  --term-bg:var(--tint-1);
  --muted:var(--fg-2); --line:var(--hairline); --accent:var(--acc); --accent-on:var(--on-acc);
  --dk-panel-bg:var(--surface); --dk-panel-fg:var(--fg-2); --dk-panel-line:var(--hairline); --dk-accent:var(--acc);
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]){
    --bg:#0E1512; --surface:#182019; --surface-2:#232C26;
    --fg:#F3F5F3; --fg-2:#C8D1CC; --fg-3:#94A29B;
    --hairline:#3D4842; --rule:#6E7D77;
    --acc:var(--cmds-pink); --on-acc:#1B1B1B;
    --tint-1:#1B1C1B; --tint-2:#242020; --tint-3:#312729;
    --term-bg:var(--tint-1);
    --muted:var(--fg-2); --line:var(--hairline); --accent:var(--acc); --accent-on:var(--on-acc);
    --dk-panel-bg:var(--surface); --dk-panel-fg:var(--fg-2); --dk-panel-line:var(--hairline); --dk-accent:var(--acc);
  }
}

/* ─── 기반 ─────────────────────────────────────────────────────────── */
body{ font-size:var(--t-body); line-height:var(--lh-body); letter-spacing:var(--ls-body); font-feature-settings:"kern","liga","calt","tnum"; }
::selection{ background:var(--tint-3); }
:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }   /* Focus States [High] */
.dk-btn{ border-radius:var(--radius); }
.dk-btn:hover{ color:var(--acc); border-color:var(--acc); }

/* ─── 슬라이드 프레임 ──────────────────────────────────────────────── */
.slide{
  padding:var(--pad-t) var(--pad-x) var(--pad-b);
  gap:0; position:relative;
  background:var(--bg); color:var(--fg);
}
html.js .slide[data-active]{ animation:dd-in var(--dur-in) var(--ease-io) both; }
@keyframes dd-in{ from{ opacity:0; transform:translate3d(0,var(--reveal-y),0); } to{ opacity:1; transform:none; } }
html[data-aspect="16x10"] .slide{ --pad-t:96px; --pad-b:80px; }
/* dense 티어 — DIAL_TIERS density 4-7 "Standard": md 24→16, lg 32→24, xl 48→32. 정보 4층 이상인 장(9그리드·표·바·타임라인·사다리·터미널) */
.k-grid:not(#s02), .k-table, .k-bars, .k-timeline, .k-ladder, .k-terminal, .k-toggle, .k-cards{ --sp-md:16px; --sp-lg:24px; --sp-xl:32px; --gap:24px; }     /* 1200 세로: 한 단(16px) 위 티어로 */
@media (prefers-reduced-motion:reduce){ html.js .slide[data-active]{ animation:none; } }

/* 순차 공개 — Scroll Reveal Subtle 340ms / power1.out / 12px */
html.js [data-step]{ opacity:0; transform:translate3d(0,var(--reveal-y),0); transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
html.js [data-step].in{ opacity:1; transform:none; }
html.js svg [data-step]{ transform:none; }
/* 슬라이드 진입 시 함께 뜨는 묶음 — Stagger List 30ms (스텝 없는 그리드·스탯·테이블 행) */
html.js .slide[data-active] .grid > .cell:not([data-step]),
html.js .slide[data-active] .stat,
html.js .slide[data-active] .tbl tbody tr,
html.js .slide[data-active] .compare .col{ animation:dd-stg var(--dur-reveal) var(--ease-out) both; }
@keyframes dd-stg{ from{ opacity:0; transform:translate3d(0,var(--reveal-y),0); } to{ opacity:1; transform:none; } }
.grid > :nth-child(2), .stats > :nth-child(2), .compare > :nth-child(2), .tbl tbody tr:nth-child(2){ animation-delay:calc(var(--stagger)*1); }
.grid > :nth-child(3), .stats > :nth-child(3), .tbl tbody tr:nth-child(3){ animation-delay:calc(var(--stagger)*2); }
.grid > :nth-child(4), .stats > :nth-child(4), .tbl tbody tr:nth-child(4){ animation-delay:calc(var(--stagger)*3); }
.grid > :nth-child(5), .tbl tbody tr:nth-child(5){ animation-delay:calc(var(--stagger)*4); }
.grid > :nth-child(6), .tbl tbody tr:nth-child(6){ animation-delay:calc(var(--stagger)*5); }
.grid > :nth-child(7), .tbl tbody tr:nth-child(7){ animation-delay:calc(var(--stagger)*6); }
.grid > :nth-child(8){ animation-delay:calc(var(--stagger)*7); }
.grid > :nth-child(9){ animation-delay:calc(var(--stagger)*8); }
@media (prefers-reduced-motion:reduce){ html.js .slide[data-active] :is(.cell,.stat,.tbl tbody tr,.compare .col){ animation:none; } }

/* ─── 타입 ─────────────────────────────────────────────────────────── */
.kicker{   /* 원본 .eyebrow — 액센트 모노 라벨, 흐름 안 */
  font:600 var(--t-caption)/1 var(--font-mono); letter-spacing:.14em; color:var(--acc);
  margin:0 0 var(--sp-md); text-transform:uppercase; align-self:flex-start;   /* 우상단 dd-kicker 와 bbox 분리 */
}
.slide > .kicker{ margin-top:auto; }   /* 원본 .inner{margin:auto} — 콘텐츠 블록을 세로 중앙에 (foot 의 margin-top:auto 와 반씩 나눔) */
.headline{
  font-family:var(--font-display); font-size:var(--t-h2); font-weight:var(--fw-h);
  line-height:var(--lh-h2); letter-spacing:var(--ls-h2); margin:0;
  max-inline-size:var(--measure-head); text-wrap:balance; word-break:keep-all; overflow-wrap:break-word;
}
.headline em{ font-style:normal; color:var(--acc); font-weight:var(--fw-h); }
.headline .sub{ display:block; font-size:var(--t-h3); font-weight:var(--fw-emph); color:var(--fg-2); letter-spacing:var(--ls-body); line-height:1.3; margin-top:var(--sp-sm); }
.lead{
  font-size:var(--t-lead); color:var(--fg-2); line-height:1.62; margin:var(--sp-lg) 0 0;
  inline-size:min(100%,var(--measure-body)); max-width:none;
}
.lead b,.lead strong{ color:var(--fg); font-weight:var(--fw-emph); }
.foot{   /* 원본 .note — 캡션 크기, 헤어라인 상단 괘선, 세로 여분 흡수 */
  margin-top:auto; padding-top:var(--sp-md); border-top:var(--bw) solid var(--hairline);
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-xl);
  font-size:var(--t-caption); line-height:var(--lh-caption); color:var(--fg-3);
}
.foot-note{ inline-size:min(100%,var(--measure-body)); min-inline-size:0; }
.foot-src{ font:500 var(--t-caption)/var(--lh-caption) var(--font-mono); letter-spacing:.04em; white-space:nowrap; color:var(--fg-3); }
.headline + .lead{ margin-top:var(--sp-lg); }
.headline + .grid, .headline + .steps, .headline + .stats, .headline + .tbl, .headline + .compare, .headline + .terminal,
.headline + .timeline, .headline + .bars, .headline + .toggle, .headline + .diagram, .headline + .body-list, .lead + .body-list{ margin-top:var(--sp-xl); }
.grid + .lead, .stats + .lead, .bars + .lead, .diagram + .lead, .quote + .lead{ margin-top:var(--sp-lg); }
.grid, .steps, .stats, .tbl, .compare, .terminal, .timeline, .bars, .toggle, .diagram, .body-list{ margin-bottom:var(--sp-lg); }

/* ─── k-cover · k-section · k-statement ───────────────────────────── */
.k-cover .headline{ font-size:var(--t-display); font-weight:var(--fw-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); margin-top:var(--sp-xl); }
.k-cover .kicker{ color:var(--fg-3); }
.k-cover .lead{ margin-top:var(--sp-xl); font-size:var(--t-h3); line-height:1.4; }
.k-cover .foot, .k-outro .foot{ font-family:var(--font-mono); letter-spacing:.06em; }
.k-section{ justify-content:flex-start; }
.k-section .headline{ font-size:var(--t-display); font-weight:var(--fw-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); margin-top:var(--sp-xl); }
.k-section .headline .sub{ font-size:var(--t-h2); font-weight:var(--fw-emph); margin-top:var(--sp-md); }
.k-section .lead{ margin-top:var(--sp-2xl); font:500 var(--t-lead)/1.5 var(--font-mono); letter-spacing:.04em; color:var(--fg-3); }
.k-section::after{ content:""; display:block; margin-top:auto; }   /* foot 이 없는 장의 하단 스페이서 (세로 중앙 정렬용) */
.k-section .lead::before{   /* 섹션 표지의 2px 액센트 괘선 — stat 상단 괘선과 같은 굵기 체계 */
  content:""; display:block; height:var(--bw-stat); background:var(--acc); width:var(--sp-3xl); margin-bottom:var(--sp-lg);
}
.k-statement .headline{ font-size:var(--t-h1); font-weight:var(--fw-display); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); max-inline-size:none; }
.body-list{ margin:var(--sp-xl) 0 0; padding:0; list-style:none; display:grid; gap:var(--sp-sm); inline-size:min(100%,1200px); }
.body-list li{ display:grid; grid-template-columns:1fr; padding:var(--sp-md); background:var(--surface); border:var(--bw) solid var(--hairline); border-left:var(--bw-hot) solid var(--hairline); font-size:var(--t-body); line-height:1.55; color:var(--fg-2); }
.body-list li b{ color:var(--fg); font-weight:var(--fw-h); font-family:var(--font-mono); font-size:var(--t-mono); letter-spacing:.06em; margin-right:var(--sp-sm); }
.body-list li:last-child{ background:var(--tint-2); border-left-color:var(--acc); color:var(--fg); }
.body-list li:last-child b{ color:var(--acc); }

/* ─── 패널 컴포넌트 (.cell / .step / .stat / .tg 공통 표면) ─────────── */
.grid{ display:grid; gap:var(--gap); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.cell{
  background:var(--surface); border:var(--bw) solid var(--hairline); border-radius:var(--radius);
  padding:var(--sp-md); min-inline-size:0; display:flex; flex-direction:column; gap:var(--sp-sm);
  transition:border-color var(--dur-hover) var(--ease-out);
}
.cell-no{ font:600 var(--t-mono)/1 var(--font-mono); letter-spacing:.09em; color:var(--fg-3); }
.cell-title{ font:var(--fw-h) var(--t-h3)/1.3 var(--font-display); letter-spacing:var(--ls-body); color:var(--fg); }
.cell-text{ font-size:var(--t-body); line-height:1.55; color:var(--fg-2); }
.grid.nine .cell{ gap:var(--sp-xs); padding:var(--sp-md); }
.grid.nine .cell-title{ font-size:var(--t-h3); }
.grid.nine .cell-text{ font-size:var(--t-body); }
.grid.constellation .cell-title{ font-family:var(--font-mono); font-size:40px; letter-spacing:-.01em; }   /* handle = 코드 식별자 */
.grid.cards .cell{ padding:var(--sp-lg); gap:var(--sp-md); }
.grid.cards .cell-no{ color:var(--acc); }
.grid.links .cell-title{ font-family:var(--font-mono); font-size:34px; overflow-wrap:anywhere; color:var(--acc); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1.5px; }
.grid.links .cell-no{ color:var(--fg-3); }

/* steps — 원본 .loop(4열) / .ladder(세로) */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-md); position:relative; }
.step{
  background:var(--surface); border:var(--bw) solid var(--hairline); border-left:var(--bw-hot) solid var(--hairline);
  padding:var(--sp-md); min-inline-size:0; display:grid; gap:var(--sp-sm); align-content:start; position:relative;
}
.steps:not(.ladder) .step::after{ content:"→"; position:absolute; right:calc(var(--sp-md) * -.72); top:50%; transform:translateY(-50%); color:var(--rule); font-size:var(--t-lead); line-height:1; }
.steps:not(.ladder) .step:last-child::after{ content:"⟲"; right:auto; left:50%; top:auto; bottom:calc(var(--sp-md) * -1.1); transform:translateX(-50%); }
.step-no{ font:600 var(--t-mono)/1 var(--font-mono); letter-spacing:.08em; color:var(--fg-3); }
.step-title{ font:var(--fw-h) var(--t-h3)/1.3 var(--font-display); color:var(--fg); }
.step-text{ font-size:var(--t-body); line-height:1.5; color:var(--fg-2); }
.step.hi{ background:var(--tint-2); border-left-color:var(--acc); }
.step.hi .step-no, .step.hi .step-title{ color:var(--acc); }
.step.hi .step-text{ color:var(--fg); }
.steps.ladder{ grid-template-columns:1fr; gap:var(--sp-sm); }
.steps.ladder .step{ grid-template-columns:140px 380px 1fr; align-items:baseline; gap:var(--sp-md); padding:var(--sp-md) var(--sp-lg); }
.steps.ladder .step-title{ font-size:var(--t-h3); }
.steps.ladder .step-no{ font-size:var(--t-lead); }

/* ─── k-stats (07) — 대시보드 순간 ───────────────────────────────── */
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap); }
.stat{ border-top:var(--bw-stat) solid var(--acc); padding-top:var(--sp-md); min-inline-size:0; display:grid; grid-template-columns:auto 1fr; grid-template-areas:"num unit" "label label"; align-items:baseline; column-gap:var(--sp-xs); }
.stat .num{
  grid-area:num; font-family:var(--font-display); font-size:var(--t-h1); font-weight:var(--fw-display);
  line-height:1; letter-spacing:-.035em; color:var(--acc); font-variant-numeric:tabular-nums;
}
.stat .unit{ grid-area:unit; font:var(--fw-h) var(--t-h3)/1 var(--font-display); color:var(--acc); align-self:baseline; }
.stat .label{ grid-area:label; display:block; font-size:var(--t-body); color:var(--fg-2); margin-top:var(--sp-sm); line-height:1.5; }

/* ─── k-table (08 · 16) ───────────────────────────────────────────── */
.tbl{ border-collapse:collapse; width:100%; font-size:var(--t-body); line-height:1.45; border-top:var(--bw) solid var(--hairline); }
.tbl th, .tbl td{ text-align:left; padding:12px var(--sp-md); border-bottom:var(--bw) solid var(--hairline); vertical-align:top; min-inline-size:0; }
.tbl th{ font:600 var(--t-mono)/1.4 var(--font-mono); letter-spacing:.08em; color:var(--fg-3); text-transform:uppercase; background:var(--surface); border-bottom-color:var(--rule); }
.tbl td{ color:var(--fg-2); }
.tbl td:first-child{ color:var(--fg); font-weight:var(--fw-emph); }
.tbl th.hi{ color:var(--acc); background:var(--tint-2); }
.tbl td.hi{ background:var(--tint-2); color:var(--fg); font-weight:var(--fw-emph); border-left:var(--bw-hot) solid var(--acc); }
.tbl th.hi{ border-left:var(--bw-hot) solid var(--acc); }
.tbl.compare-tbl td{ font-variant-numeric:tabular-nums; }

/* ─── k-quote (10) ────────────────────────────────────────────────── */
.quote{ margin:var(--sp-xl) 0 0; padding:var(--sp-md) 0 var(--sp-md) var(--sp-lg); border-left:var(--bw-hot) solid var(--acc); }
.quote p{ font-family:var(--font-display); font-size:var(--t-h1); font-weight:var(--fw-display); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); margin:0 0 var(--sp-md); color:var(--fg); }
.quote cite{ font:600 var(--t-mono)/1.4 var(--font-mono); letter-spacing:.06em; color:var(--fg-3); font-style:normal; }

/* ─── k-diagram (11) — 도판을 surface 패널에 담는다 (원본 figure.fig) ─ */
.diagram{ width:100%; max-height:520px; display:block; background:var(--surface); border:var(--bw) solid var(--hairline); padding:var(--sp-md); box-sizing:border-box; }
.diagram rect{ fill:var(--surface-2); stroke:var(--rule); stroke-width:1.4; }
.dg-layer:nth-of-type(2) rect{ fill:var(--tint-2); stroke:var(--acc); stroke-width:1.6; }
.dg-t{ font:700 34px var(--font-display); fill:var(--fg); }
.dg-s{ font:400 15px var(--font-sans); fill:var(--fg-2); }
.dg-v{ font:600 15px var(--font-mono); fill:var(--acc); letter-spacing:.04em; }
.dg-arrow path{ stroke:var(--acc); stroke-width:2; fill:none; stroke-linecap:round; }
.dg-loop path{ stroke:var(--rule); stroke-width:1.4; fill:none; stroke-dasharray:6 6; }
.dg-loop .dg-v{ fill:var(--fg-2); }

/* ─── k-compare (12) ──────────────────────────────────────────────── */
.compare{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
.compare .col{ background:var(--surface); border:var(--bw) solid var(--hairline); border-left:var(--bw-hot) solid var(--hairline); padding:var(--sp-lg); min-inline-size:0; }
.compare h3{ font:var(--fw-h) var(--t-h3)/1.3 var(--font-display); margin:0 0 var(--sp-md); padding-bottom:var(--sp-md); border-bottom:var(--bw) solid var(--hairline); color:var(--fg-2); }
.compare ul{ margin:0; padding:0; list-style:none; display:grid; gap:var(--sp-sm); }
.compare li{ font-size:var(--t-lead); line-height:1.5; color:var(--fg-2); padding-left:var(--sp-md); position:relative; }
.compare li::before{ content:""; position:absolute; left:0; top:.72em; width:8px; height:8px; background:var(--rule); }
.compare .b{ background:var(--tint-2); border-left-color:var(--acc); }
.compare .b h3{ color:var(--acc); }
.compare .b li{ color:var(--fg); }
.compare .b li::before{ background:var(--acc); }

/* ─── k-terminal (13) ─────────────────────────────────────────────── */
.terminal{
  margin:var(--sp-xl) 0 0; padding:var(--sp-md); background:var(--term-bg); color:var(--fg);
  border:var(--bw) solid var(--rule); border-radius:var(--radius);
  font:400 var(--t-mono)/1.75 var(--font-mono); white-space:pre; overflow:hidden;
}
.terminal code{ font:inherit; }   /* UA code{font-family:monospace} 가 SF Mono 스택을 덮는 것 방지 */
.terminal .prompt{ color:var(--acc); font-weight:600; }
.terminal .dim{ color:var(--fg-3); }
.terminal .ok{ color:var(--acc); font-weight:600; }

/* ─── k-timeline (18) ─────────────────────────────────────────────── */
.timeline{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--sp-md); }
.tick{ background:var(--surface); border:var(--bw) solid var(--hairline); border-top:var(--bw-stat) solid var(--hairline); padding:var(--sp-md); display:grid; gap:var(--sp-sm); align-content:start; min-inline-size:0; }
.tick-when{ font:700 var(--t-h3)/1 var(--font-display); color:var(--fg); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.tick-lv{ font:600 var(--t-mono)/1 var(--font-mono); letter-spacing:.08em; color:var(--fg-3); }
.tick-what{ font-size:var(--t-body); line-height:1.5; color:var(--fg-2); margin-top:var(--sp-xs); }
.tick:nth-child(2), .tick:nth-child(3), .tick:nth-child(4){ border-top-color:var(--acc); }   /* 30·60·90 = 본체 (발표자 노트) */
.tick:nth-child(4){ background:var(--tint-2); }
.tick:nth-child(4) .tick-when, .tick:nth-child(4) .tick-lv{ color:var(--acc); }

/* ─── k-bars (19) — 대시보드 순간 ───────────────────────────────── */
.bars{ display:grid; gap:var(--sp-sm); border-top:var(--bw) solid var(--hairline); }
.bar{
  display:grid; grid-template-columns:minmax(0,1fr) 640px 96px; align-items:center; gap:var(--sp-md);
  padding:14px var(--sp-md); background:var(--surface); border-bottom:var(--bw) solid var(--hairline); border-left:var(--bw-hot) solid transparent;
  font-size:var(--t-body); color:var(--fg-2); min-inline-size:0;
}
.bar-label b{ font:600 var(--t-mono)/1 var(--font-mono); color:var(--fg-3); letter-spacing:.08em; margin-right:var(--sp-sm); }
.bar-track{ display:block; height:12px; background:var(--surface-2); position:relative; overflow:hidden; }
.bar-track i{ display:block; height:100%; width:calc(var(--w) * 1%); background:var(--rule); transition:width var(--dur-reveal) var(--ease-out); }
html.js .bar:not(.in) .bar-track i{ width:0; }
.bar-val{ font:600 var(--t-lead)/1 var(--font-mono); text-align:right; color:var(--fg); font-variant-numeric:tabular-nums; }
.bar.hi{ background:var(--tint-2); border-left-color:var(--acc); color:var(--fg); }
.bar.hi .bar-label b, .bar.hi .bar-val{ color:var(--acc); }
.bar.hi .bar-track i{ background:var(--acc); }

/* ─── k-toggle (23) — 세그먼트 컨트롤 ───────────────────────────── */
.toggle-ctl{ display:inline-flex; margin:0 0 var(--sp-md); border:var(--bw-sem) solid var(--rule); border-radius:var(--radius); background:var(--surface); }
.toggle-ctl button{
  font:var(--fw-emph) var(--t-body)/1 var(--font-sans); min-height:44px; min-width:44px; padding:0 var(--sp-md);   /* Target Size [High] */
  border:0; background:transparent; color:var(--fg); cursor:pointer; border-radius:var(--radius);
  transition:background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.toggle-ctl button + button{ border-left:var(--bw-sem) solid var(--rule); }
.toggle-ctl button:hover{ color:var(--acc); }
.toggle-ctl button[aria-pressed="true"]{ background:var(--acc); color:var(--on-acc); }
.toggle-ctl button[aria-pressed="true"]::before{ content:"✓ "; font-weight:700; }   /* Color Only [High] */
.toggle-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-md); }
.tg{ background:var(--surface); border:var(--bw) solid var(--hairline); border-top:var(--bw-stat) solid var(--hairline); padding:var(--sp-md); display:grid; gap:var(--sp-sm); align-content:start; min-inline-size:0; }
.tg-a, .tg-b{ font:var(--fw-display) var(--t-h2)/1.15 var(--font-display); letter-spacing:var(--ls-h2); color:var(--fg); }
.toggle[data-view="note"] .tg-b, .toggle[data-view="harness"] .tg-a{ display:none; }
.toggle[data-view="harness"] .tg{ border-top-color:var(--acc); background:var(--tint-1); }
.toggle[data-view="harness"] .tg-b{ color:var(--acc); }
.tg-desc{ font-size:var(--t-body); line-height:1.5; color:var(--fg-2); }
.toggle-verdict{ margin:var(--sp-md) 0 0; padding:var(--sp-md); background:var(--tint-2); border-left:var(--bw-hot) solid var(--acc); font-size:var(--t-lead); line-height:1.5; color:var(--fg); inline-size:min(100%,var(--measure-body)); }
.toggle-verdict:empty{ display:none; }

/* ─── k-outro ─────────────────────────────────────────────────────── */
.k-outro .headline{ font-size:var(--t-h1); font-weight:var(--fw-display); line-height:var(--lh-h1); letter-spacing:var(--ls-h1); }
.k-outro .lead{ font-weight:var(--fw-emph); color:var(--fg); }

/* ─── 슬라이드 내부 크롬 (theme.js 주입) — 원본 .kicker / .status / .rail / .progress ─ */
.dd-kicker{ position:absolute; top:var(--pad-t); right:var(--pad-x); margin:0; font:600 var(--t-caption)/1 var(--font-mono); letter-spacing:.1em; color:var(--fg-3); text-transform:uppercase; }
.dd-status{ position:absolute; left:var(--pad-x); bottom:calc(var(--pad-b) / 2 - 8px); font:600 var(--t-caption)/1 var(--font-mono); letter-spacing:.1em; color:var(--fg-2); font-variant-numeric:tabular-nums; }
.dd-status span{ color:var(--fg-3); margin-left:var(--sp-md); letter-spacing:.06em; }
.dd-rail{ position:absolute; right:var(--sp-lg); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none; }
.dd-rail li{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; }   /* Target Size 24×24 */
.dd-rail li i{ display:block; width:8px; height:8px; background:var(--hairline); transition:background var(--dur-hover) var(--ease-out), height var(--dur-hover) var(--ease-out); }
.dd-rail li[data-section-start] i{ background:var(--rule); }
.dd-rail li[aria-current="true"] i{ background:var(--acc); height:18px; }   /* Color Only: 색 + 모양 */
.dd-progress{ position:absolute; left:0; bottom:0; height:2px; width:var(--dd-p,0%); background:var(--acc); transition:width var(--dur-in) var(--ease-io); }
html[data-aspect="16x10"] .dd-rail{ gap:8px; }

/* ─── 인쇄 — 슬라이드 내부 크롬은 그대로, 모션만 제거 ─────────────── */
@media print{
  .slide{ animation:none !important; }
  .cell,.stat,.tbl tbody tr,.compare .col{ animation:none !important; opacity:1 !important; transform:none !important; }
  .bar-track i{ width:calc(var(--w) * 1%) !important; }
  .dd-progress{ display:none; }
}