/* ============================================================
   GIO Design Tokens — Linear/Notion-modern, signature green
   "정확성 · 즉시성 · 명료성 · 친밀감"
   ============================================================ */
/* 본문 폰트를 세 벌로 나눈다 — 브라우저는 화면에 실제로 있는 글자의 범위에 해당하는 파일만 받는다.
   ① latin.woff2 (58KB)  : 영어 화면 전부. 항상 받는다(레이아웃에서 preload).
   ② ext.woff2  (190KB)  : 확장 라틴(베트남어 등)·특수 기호 — 원본이 가진 글자만 범위로 적었다.
   ③ 원본 TTF   (6.7MB)  : 한글·한자·가나·그리스·키릴·전각 — 번역 위젯으로 그 언어를 고른 경우에만.
   종전엔 ③을 모든 페이지가 받았다 (SEO 점검 261014).
   재생성(fonttools): pyftsubset PretendardVariable.ttf --unicodes=<범위> --layout-features='*' --flavor=woff2
   ②의 범위는 원본 cmap − ① − ③ 에서 계산했다. 언어 선택 목록은 시스템 폰트를 쓴다(google-translate.css). */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/PretendardVariable.ttf') format('truetype-variations');
  unicode-range: U+0370-052F, U+1100-11FF, U+2E80-33FF, U+A960-A97F, U+AC00-D7FF, U+FF00-FFEF;
}
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/PretendardVariable-ext.woff2') format('woff2-variations'), url('/fonts/PretendardVariable-ext.woff2') format('woff2');
  unicode-range:
    U+0100-0130, U+0132-0148, U+014A-0151, U+0154-01C3, U+01C5-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB,
    U+02DD-02FF, U+0302, U+0304-0307, U+0309-031E, U+0321-036F, U+0E3F, U+1D43, U+1D47-1D49, U+1D4D, U+1D4F-1D50,
    U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1DBF-1DF5, U+1DFC-1F15, U+1F18-1F1D,
    U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4,
    U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2070-2071, U+2075-208E, U+2090-209C,
    U+20A0-20AB, U+20AD-20BF, U+20DB-20DE, U+20E8, U+20F0, U+2100-2101, U+2103, U+2105-2106, U+2109, U+2113,
    U+2116-2117, U+211E-2121, U+2123, U+2126, U+212A-212B, U+212E, U+2132, U+213B, U+214D, U+214F, U+2153,
    U+215A-2188, U+2194-2199, U+21A9-21AA, U+21B0-21B1, U+21B3-21B5, U+21BA-21BB, U+21D0, U+21D2, U+21D4,
    U+21DE-21DF, U+21E4-21E5, U+21E7, U+21EA, U+2202, U+2205-2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248,
    U+2260, U+2264-2265, U+226A-226B, U+22EF, U+2303, U+2305, U+2318, U+2325-2327, U+2329-232B, U+2380, U+2387,
    U+238B, U+23CE-23CF, U+2423, U+2460-2473, U+24B6-24CF, U+24EA-24F4, U+24FF, U+25A0-25A2, U+25AA, U+25B2-25B3,
    U+25B6-25B7, U+25BA-25BD, U+25C0-25C1, U+25C4-25C7, U+25CA-25CB, U+25CF, U+25E6, U+25EF, U+2600, U+2605-2606,
    U+263C, U+2661, U+2665, U+266A, U+26A0, U+2756, U+2776-2789, U+27EF, U+27F5-27FA, U+2985-2986, U+2B06,
    U+2B12-2B13, U+2B1C, U+2C7C, U+2C7F, U+2DFF, U+2E18, U+A69F, U+A7FF, U+A92E, U+FE20-FE2D, U+1F850, U+1F852;
}
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/PretendardVariable-latin.woff2') format('woff2-variations'), url('/fonts/PretendardVariable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303, U+0308,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2713, U+2717, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ---- Signature: GIO green (modern, less "edm", richer hue) ---- */
  --gio-h: 152;          /* hue — exposed for Tweaks slider */
  --gio-s: 70%;
  --gio-50:  oklch(0.97 0.04 var(--gio-h));
  --gio-100: oklch(0.94 0.07 var(--gio-h));
  --gio-200: oklch(0.88 0.12 var(--gio-h));
  --gio-300: oklch(0.80 0.16 var(--gio-h));
  --gio-400: oklch(0.72 0.19 var(--gio-h));
  --gio-500: oklch(0.65 0.20 var(--gio-h));   /* primary */
  --gio-600: oklch(0.56 0.18 var(--gio-h));
  --gio-700: oklch(0.46 0.14 var(--gio-h));
  --gio-800: oklch(0.36 0.10 var(--gio-h));
  --gio-900: oklch(0.26 0.06 var(--gio-h));

  /* ---- Neutrals (Linear-style ink) ---- */
  --ink-0:   #ffffff;
  --ink-25:  #fafbfb;
  --ink-50:  #f5f6f7;
  --ink-75:  #eef0f2;
  --ink-100: #e4e7ea;
  --ink-200: #d0d4d9;
  --ink-300: #a8aeb6;
  --ink-400: #7c828b;
  --ink-500: #565b63;
  --ink-600: #3c4047;
  --ink-700: #292c31;
  --ink-800: #1a1c1f;
  --ink-900: #0d0e10;

  /* ---- Skill accents (subtle, not loud) ---- */
  --skill-listening: #5b8cff;
  --skill-reading:   #ff8a3d;
  --skill-writing:   #b765ff;
  --skill-speaking:  #14b67a;

  /* ---- Semantic ---- */
  --ok:   #14b67a;
  --warn: #f5a524;
  --err:  #ef4d4d;
  --info: #3b82f6;

  /* ---- Surfaces ---- */
  --bg:        var(--ink-0);
  --bg-soft:   var(--ink-25);
  --bg-sunk:   var(--ink-50);
  --surface:   var(--ink-0);
  --border:    var(--ink-100);
  --border-strong: var(--ink-200);

  /* ---- Text ---- */
  --fg:        var(--ink-900);
  --fg-strong: var(--ink-900);
  --fg-body:   var(--ink-700);
  --fg-muted:  var(--ink-500);
  --fg-faint:  var(--ink-400);
  --fg-on-primary: #ffffff;

  /* ---- Type ---- */
  --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 96px;

  /* ---- Radii (Linear: subtle softness) ---- */
  --r-1: 6px; --r-2: 8px; --r-3: 10px; --r-4: 12px; --r-5: 16px; --r-6: 20px; --r-7: 24px; --r-pill: 999px;

  /* ---- Shadows (layered, low-opacity) ---- */
  --shadow-1: 0 1px 2px rgba(13,14,16,.04), 0 1px 1px rgba(13,14,16,.03);
  --shadow-2: 0 4px 12px rgba(13,14,16,.06), 0 1px 2px rgba(13,14,16,.04);
  --shadow-3: 0 12px 32px rgba(13,14,16,.08), 0 4px 8px rgba(13,14,16,.04);
  --shadow-4: 0 24px 64px rgba(13,14,16,.12), 0 8px 16px rgba(13,14,16,.06);
  --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--gio-500) 28%, transparent);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ---- Layout ---- */
  --container: 1200px;
  --header-h: 64px;
}

/* Bridge legacy GIO components onto the new redesign token system. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --gio-50: var(--gio-color-action-soft);
  --gio-100: var(--gio-color-action-soft-hover);
  --gio-200: color-mix(in oklab, var(--gio-color-action) 20%, var(--gio-color-bg));
  --gio-300: color-mix(in oklab, var(--gio-color-action) 35%, var(--gio-color-bg));
  --gio-400: color-mix(in oklab, var(--gio-color-action) 70%, var(--gio-color-bg));
  --gio-500: var(--gio-color-action);
  --gio-600: var(--gio-color-action-hover);
  --gio-700: var(--gio-color-action-active);
  --gio-800: var(--gio-navy-700);
  --gio-900: var(--gio-navy-900);

  --ok: var(--gio-color-success);
  --warn: var(--gio-color-warning);
  --err: var(--gio-color-danger);
  --info: var(--gio-color-info);

  --skill-listening: var(--gio-color-skill-listening);
  --skill-reading: var(--gio-color-skill-reading);
  --skill-writing: var(--gio-color-skill-writing);
  --skill-speaking: var(--gio-color-skill-speaking);

  --bg: var(--gio-color-bg);
  --bg-soft: var(--gio-color-bg-subtle);
  --bg-sunk: var(--gio-color-surface-alt);
  --surface: var(--gio-color-surface);
  --border: var(--gio-color-border);
  --border-strong: var(--gio-color-border-strong);

  --fg: var(--gio-color-text);
  --fg-strong: var(--gio-color-text-strong);
  --fg-body: var(--gio-color-text);
  --fg-muted: var(--gio-color-text-muted);
  --fg-faint: var(--gio-color-text-faint);
  --fg-on-primary: var(--gio-color-text-on-action);

  --shadow-focus: var(--gio-focus-ring);
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* ============================================================
   Base — body.gio-site 가 붙은 페이지에서만 적용 (Bootstrap/레거시 페이지 충돌 방지)
   ============================================================ */
.gio-site, .gio-site *, .gio-site *::before, .gio-site *::after { box-sizing: border-box; }
.gio-site {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-body);
  background: var(--bg);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sticky footer: 컨텐츠가 짧아도 푸터를 뷰포트 하단에 붙인다. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.gio-site > .app-footer { margin-top: auto; }
.gio-site :where(button, input, textarea, select) { font: inherit; letter-spacing: inherit; color: inherit; }
.gio-site :where(a) { color: inherit; text-decoration: none; }
.gio-site img, .gio-site svg { display: block; max-width: 100%; }
.gio-site :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-2); }
/* 레거시 app.css의 `main { padding-top: var(--gio-header-h) }` 규칙은 sticky 헤더가
   이미 자기 공간을 가지는 신규 레이아웃에서는 불필요한 offset을 만든다.
   .gio-site 페이지에서는 무력화. */
.gio-site main { padding-top: 0; min-height: 0; }

/* ============================================================
   Type utilities
   ============================================================ */
.gio-site .t-display  { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; color: var(--fg-strong); }
.gio-site .t-h1       { font-size: 40px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; color: var(--fg-strong); }
.gio-site .t-h2       { font-size: 28px; line-height: 1.25; letter-spacing: -0.022em; font-weight: 700; color: var(--fg-strong); }
.gio-site .t-h3       { font-size: 20px; line-height: 1.3;  letter-spacing: -0.018em; font-weight: 600; color: var(--fg-strong); }
.gio-site .t-body     { font-size: 16px; line-height: 1.55; }
.gio-site .t-small    { font-size: 14px; line-height: 1.5; color: var(--fg-muted); }
.gio-site .t-tiny     { font-size: 12px; line-height: 1.45; color: var(--fg-muted); letter-spacing: 0; }
.gio-site .t-eyebrow  { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gio-700); }
.gio-site .t-mono     { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.gio-site .tnum       { font-variant-numeric: tabular-nums; }