/* ============================================================
   AIDEA legal/info pages — shared shell
   Tokens, base, header, footer extracted from index.html (single
   source of design truth). Plus `.legal` document body styles.
   Used by: privacy.html, terms.html, accessibility.html
   ============================================================ */

/* Self-hosted display serif — Fraunces 72pt (LATIN-ONLY, same as index.html / iOS).
   Korean text falls through to Pretendard via the font stack. */
@font-face {
  font-family: "Fraunces 72pt";
  src: url("fonts/Fraunces_72pt-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2100-214F, U+2190-21FF, U+2212;
}

:root {
  /* --- Primitive: warm white --- */
  --warm-white-50:#FFFFFF; --warm-white-100:#FAFAF7; --warm-white-200:#FAF6EF;
  --warm-white-300:#F0EDE5; --warm-white-400:#E5E2DC;
  /* --- Primitive: warm ink --- */
  --warm-ink-100:#EDEAE3; --warm-ink-200:#A8A095; --warm-ink-300:#7A736B;
  --warm-ink-400:#5A554E; --warm-ink-500:#3A3530; --warm-ink-600:#2E2823;
  --warm-ink-700:#252220; --warm-ink-800:#1A1814;
  /* --- Primitive: warm gray --- */
  --warm-gray-100:#B4B2A9; --warm-gray-200:#888888; --warm-gray-300:#6B5F4E; --warm-gray-900:#1A1A1A;

  /* --- Semantic (LIGHT, default) --- */
  --bg-primary: var(--warm-white-100);
  --bg-card: var(--warm-white-50);
  --bg-info: var(--warm-white-200);
  --text-primary: var(--warm-gray-900);
  --text-secondary: var(--warm-gray-300);
  --text-tertiary: var(--warm-gray-200);
  --border-default: var(--warm-white-400);
  --border-divider: var(--warm-white-300);
  --emphasis-bg: var(--warm-gray-900);
  --emphasis-text: var(--warm-white-50);

  /* --- Typography families --- */
  --font-serif: "Fraunces 72pt", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-sans:  "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, monospace;

  /* --- Type scale --- */
  --fs-meta:12px; --fs-caption:13px; --fs-body-2:14px; --fs-body:15px;
  --fs-body-emph:16px; --fs-body-strong:17px; --fs-title:20px;
  --fs-heading-m:25px; --fs-logo-compact:28px;
  --fs-section: clamp(28px, 4.5vw, 40px);

  /* --- Letter spacing --- */
  --ls-tighter:-0.4px; --ls-tight:-0.3px; --ls-normal:0; --ls-wide:1.2px; --ls-wider:1.8px;
  /* --- Line height --- */
  --lh-tight:1.25; --lh-snug:1.3; --lh-normal:1.5; --lh-relaxed:1.65;
  /* --- Spacing scale --- */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:12px; --sp-6:14px;
  --sp-7:16px; --sp-8:18px; --sp-9:20px; --sp-10:24px; --sp-11:28px; --sp-12:32px;
  /* --- Radius / borders --- */
  --r-sm:8px; --r-lg:12px; --r-button: var(--r-lg);
  --bw-hairline:0.5px; --bw-thin:1px;
  --maxw: 760px;
}

/* --- Semantic (DARK) — manual selection wins --- */
:root[data-theme="dark"] {
  --bg-primary: var(--warm-ink-800);
  --bg-card: var(--warm-ink-700);
  --bg-info: var(--warm-ink-600);
  --text-primary: var(--warm-ink-100);
  --text-secondary: var(--warm-ink-200);
  --text-tertiary: var(--warm-ink-300);
  --border-default: var(--warm-ink-500);
  --border-divider: var(--warm-ink-600);
  --emphasis-bg: var(--warm-ink-100);
  --emphasis-text: var(--warm-ink-800);
}
/* Auto mode: follow OS only when user hasn't chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-primary: var(--warm-ink-800);
    --bg-card: var(--warm-ink-700);
    --bg-info: var(--warm-ink-600);
    --text-primary: var(--warm-ink-100);
    --text-secondary: var(--warm-ink-200);
    --text-tertiary: var(--warm-ink-300);
    --border-default: var(--warm-ink-500);
    --border-divider: var(--warm-ink-600);
    --emphasis-bg: var(--warm-ink-100);
    --emphasis-text: var(--warm-ink-800);
  }
}

/* ============================================================ Base */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg-primary); color: var(--text-primary);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; word-break: keep-all;
}
a { color: inherit; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: clamp(20px, 5vw, 40px); }
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-tertiary); }
@media (prefers-reduced-motion: no-preference) {
  body, .site-head, .tool-btn { transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
}

/* ============================================================ Header */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg-primary) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: var(--bw-hairline) solid var(--border-divider);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; max-width: 1080px; }
.logo-group { display:flex; flex-direction:column; text-decoration:none; color:inherit; gap:2px; }
.wordmark { font-family: var(--font-serif); font-size: var(--fs-logo-compact); font-weight: 400; letter-spacing: var(--ls-tighter); line-height: 1; }
.wordmark-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2.6px; color: var(--text-tertiary); line-height: 1; }

/* Header control cluster: language + theme toggles */
.nav-tools { display: flex; align-items: center; gap: var(--sp-3); }
.tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-wide);
  color: var(--text-secondary); background: transparent;
  border: var(--bw-thin) solid var(--border-default); border-radius: var(--r-button);
  height: 34px; padding: 0 10px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.tool-btn:hover { color: var(--text-primary); border-color: var(--text-tertiary); }
.tool-btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.lang-toggle { gap: 5px; }
.lang-toggle .seg { opacity: .4; transition: opacity .2s ease; }
.lang-toggle .seg.active { opacity: 1; color: var(--text-primary); }
.lang-toggle .seg-div { opacity: .3; }
.theme-toggle { width: 34px; padding: 0; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-moon { display:block; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .icon-sun  { display:none; }
}

/* ============================================================ Legal document body */
main.legal { padding-block: clamp(40px, 7vw, 72px); }
.legal-doc { color: var(--text-secondary); font-size: var(--fs-body-emph); line-height: var(--lh-relaxed); }
.legal-head { margin-bottom: var(--sp-12); }
.legal-head .meta { display:block; margin-bottom: var(--sp-6); }
.legal-head h1 {
  font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-section);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); color: var(--text-primary); margin: 0;
}
.legal-head .dates { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: var(--ls-wide); color: var(--text-tertiary); margin: var(--sp-7) 0 0; }
.legal-doc h2 {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-title); color: var(--text-primary);
  letter-spacing: var(--ls-tight); line-height: var(--lh-snug); margin: var(--sp-12) 0 var(--sp-7);
  padding-top: var(--sp-7); border-top: var(--bw-hairline) solid var(--border-divider);
}
.legal-doc h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body-emph); color: var(--text-primary); margin: var(--sp-10) 0 var(--sp-5); }
.legal-doc p { margin: 0 0 var(--sp-7); }
.legal-doc ul, .legal-doc ol { margin: 0 0 var(--sp-7); padding-left: 1.4em; }
.legal-doc li { margin-bottom: var(--sp-4); }
.legal-doc li::marker { color: var(--text-tertiary); }
.legal-doc strong { color: var(--text-primary); font-weight: 600; }
.legal-doc a { color: var(--text-primary); text-underline-offset: 3px; word-break: break-all; }
.legal-doc .table-scroll { overflow-x: auto; margin: 0 0 var(--sp-7); -webkit-overflow-scrolling: touch; }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-2); }
.legal-doc th, .legal-doc td { border: var(--bw-hairline) solid var(--border-default); padding: var(--sp-5) var(--sp-6); text-align: left; vertical-align: top; }
.legal-doc th { background: var(--bg-info); color: var(--text-primary); font-weight: 600; }
.legal-doc .lead { color: var(--text-primary); }

/* Bilingual show/hide — mirrors index.html's [data-lang-video] pattern */
html[data-lang="en"] [data-legal-lang="ko"],
html[data-lang="ko"] [data-legal-lang="en"] { display: none; }

/* ============================================================ Footer */
.site-foot { border-top: var(--bw-hairline) solid var(--border-divider); padding-block: var(--sp-12); margin-top: clamp(40px, 6vw, 72px); }
.foot-grid { display:flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-9); }
.foot-logo-group { display:flex; flex-direction:column; text-decoration:none; color:inherit; gap:2px; }
.foot-mark { font-family: var(--font-serif); font-size: var(--fs-logo-compact); letter-spacing: var(--ls-tighter); }
.foot-mark-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2.6px; color: var(--text-tertiary); line-height: 1; }
.foot-links { display:flex; flex-wrap:wrap; gap: var(--sp-10); font-size: var(--fs-body-2); }
.foot-links a { color: var(--text-secondary); text-decoration: none; }
.foot-links a:hover { color: var(--text-primary); }
.foot-links a[aria-current="page"] { color: var(--text-primary); }
.foot-copy { font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: var(--ls-wide); color: var(--text-tertiary); width: 100%; margin-top: var(--sp-7); }