/* ==========================================================================
   HANARO — colour tokens, both themes. Single source of truth (design.md §3, §16).
   Loaded before every other stylesheet on every page.

   DARK is T-MINUS: the pad at 04:00, before the sun. Deep indigo, annunciator
   amber, coral held back for one state.

   LIGHT is RECOVERY: the same launch day in hazy summer daylight. Pale sky,
   concrete apron, basalt ink, hard-hat amber. It is not an inverted dark mode;
   it is the second direction from the original preview, drawn from the same
   scene. Amber is darkened to clear 4.5:1 on a pale ground.

   LIGHT IS THE DEFAULT (team decision, 2026-09). The page is light for every
   reader unless they choose dark with the toggle; the OS preference is not
   consulted. Dark stays available and complete.
   ========================================================================== */

:root {
  /* ---- structure: theme-independent (design.md §4, §5) ---- */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'IBM Plex Sans', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic',
             system-ui, sans-serif;
  /* Korean tiers: the Plex subsets carry no Hangul, and the archive editor can
     enter Korean at any time. Without these, Windows falls through to Courier
     New, which is far too thin at the sizes the utility face is used. */
  --util:    'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, 'D2Coding',
             'Apple SD Gothic Neo', 'Malgun Gothic', monospace;

  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 144px; --s-11: 200px;

  --wrap: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --spine-w: 196px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- dark: predawn ---- */
  --d-bg:         oklch(0.200 0.045 265);
  --d-bg-lift:    oklch(0.260 0.040 265);
  --d-bg-rise:    oklch(0.310 0.036 265);
  --d-rule:       oklch(0.380 0.030 264);
  --d-ink-3:      oklch(0.655 0.028 262);
  --d-ink-2:      oklch(0.800 0.022 262);
  --d-ink:        oklch(0.950 0.012 265);
  --d-accent:     oklch(0.780 0.155 78);
  --d-accent-dim: oklch(0.620 0.115 78);
  --d-signal:     oklch(0.720 0.170 22);
  --d-edge:       oklch(0.560 0.030 264);
  --d-tile:       oklch(0.970 0.005 265);
  --d-grain-op:   0.055;
  --d-grain-mode: overlay;

  /* ---- light: recovery ---- */
  --l-bg:         oklch(0.960 0.012 240);
  --l-bg-lift:    oklch(0.925 0.014 240);
  --l-bg-rise:    oklch(0.880 0.016 240);
  --l-rule:       oklch(0.790 0.020 242);
  --l-ink-3:      oklch(0.498 0.030 245);
  --l-ink-2:      oklch(0.360 0.030 248);
  --l-ink:        oklch(0.215 0.032 250);
  --l-accent:     oklch(0.515 0.140 62);
  --l-accent-dim: oklch(0.720 0.110 62);
  --l-signal:     oklch(0.530 0.190 25);
  --l-edge:       oklch(0.600 0.024 242);
  --l-tile:       oklch(0.995 0.003 240);
  --l-grain-op:   0.030;
  --l-grain-mode: multiply;

  /* ---- resolved: light is the default ---- */
  color-scheme: light;
  --bg: var(--l-bg);
  --bg-lift: var(--l-bg-lift);
  --bg-rise: var(--l-bg-rise);
  --rule: var(--l-rule);
  --edge: var(--l-edge);
  --ink-3: var(--l-ink-3);
  --ink-2: var(--l-ink-2);
  --ink: var(--l-ink);
  --accent: var(--l-accent);
  --accent-dim: var(--l-accent-dim);
  --signal: var(--l-signal);
  --tile: var(--l-tile);
  --grain-op: var(--l-grain-op);
  --grain-mode: var(--l-grain-mode);
}

/* Dark only when the reader asks for it with the toggle. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--d-bg);
  --bg-lift: var(--d-bg-lift);
  --bg-rise: var(--d-bg-rise);
  --rule: var(--d-rule);
  --edge: var(--d-edge);
  --ink-3: var(--d-ink-3);
  --ink-2: var(--d-ink-2);
  --ink: var(--d-ink);
  --accent: var(--d-accent);
  --accent-dim: var(--d-accent-dim);
  --signal: var(--d-signal);
  --tile: var(--d-tile);
  --grain-op: var(--d-grain-op);
  --grain-mode: var(--d-grain-mode);
}

/* ---------- language switch (every page has one) ---------- */
.lang-switch {
  display: inline-flex; align-items: center; flex: none;
  border: 1px solid var(--edge); border-radius: 2px; overflow: hidden;
}
.lang-switch a {
  font-family: var(--util); font-size: 0.6875rem; letter-spacing: 0.08em;
  color: var(--ink-3); text-decoration: none; padding: 8px 10px; line-height: 1;
  transition: color 160ms var(--ease, ease), background-color 160ms var(--ease, ease);
}
.lang-switch a[aria-current="page"] { background: var(--bg-rise); color: var(--ink); }
.lang-switch a:hover { color: var(--accent); }

/* ==========================================================================
   Touch targets. This block lived in site.css, which index.html and
   ko/index.html do NOT load — so the two most-visited pages never got it.
   It belongs here, in the one stylesheet every page loads.
   ========================================================================== */
@media (pointer: coarse) {
  .theme-toggle { width: 44px; height: 44px; }
  .btn.btn--sm { padding-block: 15px; }
  .topbar-nav a { padding-block: 13px; }
  .lang-switch a { padding: 14px 12px; }
  /* inline links were ~15px tall */
  .lnk, .topbar-mark { display: inline-block; padding-block: 5px; }
}

/* ==========================================================================
   The toggle. Two states of one horizon: the sun below it, and above it.
   From the subject rather than a generic sun-and-moon pair.
   ========================================================================== */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; flex: none;
  background: transparent; border: 1px solid var(--edge); border-radius: 2px;
  color: var(--ink-3); cursor: pointer; padding: 0;
  transition: color 160ms var(--ease, ease), border-color 160ms var(--ease, ease);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent-dim); }
.theme-toggle svg { display: block; width: 20px; height: 20px; }
.theme-toggle .to-day { display: none; }
.theme-toggle .to-night { display: block; }
:root[data-theme="dark"] .theme-toggle .to-day { display: block; }
:root[data-theme="dark"] .theme-toggle .to-night { display: none; }

/* === sRGB fallback: generated by scripts/gen-srgb-fallback.js === */
@supports not (color: oklch(0 0 0)) {
  :root {
    --bg: #ebf3f9;
    --bg-lift: #dee8ef;
    --bg-rise: #ced9e1;
    --rule: #b0bcc7;
    --edge: #74828e;
    --ink-3: #556573;
    --ink-2: #313f4c;
    --ink: #0e1a28;
    --accent: #9e5000;
    --accent-dim: #d69459;
    --signal: #c2272d;
    --tile: #fcfeff;
  }
  :root[data-theme="dark"] {
    --bg: #0c152a;
    --bg-lift: #1a2438;
    --bg-rise: #273043;
    --rule: #3a4253;
    --edge: #6c7587;
    --ink-3: #8791a2;
    --ink-2: #b6becc;
    --ink: #eaeff7;
    --accent: #eda922;
    --accent-dim: #ac7c26;
    --signal: #fd7273;
    --tile: #f3f5f9;
  }
}
/* === end sRGB fallback === */

/* ==========================================================================
   Spacing utilities. These replace the handful of style="" attributes the
   pages used to carry: the CSP has no 'unsafe-inline', so an inline style
   attribute is blocked outright. Add to this list rather than reaching for
   a style attribute again.
   ========================================================================== */
.m-0 { margin: 0; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mt-9 { margin-top: var(--s-9); }
.mb-6 { margin-bottom: var(--s-6); }
.pt-0 { padding-top: 0; }
.pb-8 { padding-block: var(--s-8); }
.pb-8-10 { padding-block: var(--s-8) var(--s-10); }
.w-auto { width: auto; }
.dim { color: var(--ink-3); }
.lead-ink { color: var(--ink); margin: 0 0 var(--s-2); }
.addr-plain { font-style: normal; color: var(--ink-3); margin: 0; }
.h-admin { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.check-row { display: flex; gap: 8px; align-items: center; font-size: 0.875rem; color: var(--ink-2); }