/* =================================================================
   Design Tokens · color, fluid typography, spacing, layout vars
================================================================= */
:root {
  /* Color */
  --bg: #f6f4ec;
  --bg-2: #efece1;
  --ink: #0a0f1e;
  --ink-2: #1c2333;
  --muted: #6b7280;
  --line:  rgba(10, 15, 30, 0.12);
  --line-2:rgba(10, 15, 30, 0.06);
  --blue: #1d4ed8;
  --blue-deep: #0f2a6b;
  --emerald: #047857;
  --amber: #b45309;
  --red: #b91c1c;
  --paper: #fffdf7;

  /* Fluid typography · scales with both width + height */
  --fs-xs:    clamp(10.5px, 0.3vw  + 0.4vh,  18px);
  --fs-sm:    clamp(12px,   0.4vw  + 0.55vh, 22px);
  --fs-md:    clamp(14px,   0.55vw + 0.72vh, 28px);
  --fs-lg:    clamp(16px,   0.75vw + 0.95vh, 36px);
  --fs-xl:    clamp(19px,   1.05vw + 1.25vh, 44px);
  --fs-h3:    clamp(20px,   1.3vw  + 1.5vh,  54px);
  --fs-h2:    clamp(28px,   2.3vw  + 1.9vh,  92px);
  --fs-h1:    clamp(40px,   3.7vw  + 2.5vh,  140px);
  --fs-title: clamp(52px,   4.6vw  + 3.4vh,  180px);
  --fs-num:   clamp(28px,   1.9vw  + 1.6vh,  76px);
  --fs-kpi:   clamp(24px,   1.6vw  + 1.25vh, 60px);
  --fs-rank:  clamp(30px,   2.2vw  + 1.6vh,  80px);

  /* Fluid spacing */
  --sp-1: clamp(4px,  0.35vh, 12px);
  --sp-2: clamp(8px,  0.9vh,  20px);
  --sp-3: clamp(12px, 1.3vh,  28px);
  --sp-4: clamp(18px, 2vh,    42px);
  --sp-5: clamp(24px, 2.8vh,  60px);
  --sp-6: clamp(32px, 3.8vh,  80px);
  --sp-7: clamp(44px, 5vh,    108px);

  --pad-slide-x: clamp(36px, 5.8vw, 168px);
  --pad-slide-y: clamp(34px, 4.6vh, 96px);

  /* Layout */
  --script-h: clamp(220px, 30vh, 440px);
  --script-bar-h: clamp(44px, 4.6vh, 60px);
  --chrome-bot-h: clamp(46px, 5.2vh, 64px);
  --chrome-top-h: 52px;

  /* Source panel (left TOC drawer) */
  --source-w: clamp(280px, 22vw, 380px);
  --source-bar-w: 46px;

  /* Fonts */
  --display: "Pretendard Variable", "Inter", system-ui, -apple-system, sans-serif;
  --sans:    "Pretendard Variable", "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

/* Reset & Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  font-size: var(--fs-md);
  font-weight: 400;
  letter-spacing: -0.005em;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* Korean wrapping: keep words, wrap at spaces */
h1, h2, h3, h4, p, li, td, th, span, div, a, button {
  word-break: keep-all;
  overflow-wrap: break-word;
}
.mono, code, .num, .v, .tag,
table.tbl td.num, .fin-bar .v,
.kpi .v, .kpi-ring .v {
  word-break: normal;
  overflow-wrap: anywhere;
}