/* ==========================================================================
   TNL redesign — 테마: 모드 6 × 강조색 10 = 60가지

   <html data-mode="dark|indigo|graphite|light|sand|fog" data-accent="...">

   어두운 계열 dark(거의 검정) · indigo(네이비) · graphite(중성 회색)
   밝은 계열   light(차가운 흰) · sand(베이지) · fog(회색)
   모양(각진 모서리·촘촘한 리듬)은 Midnight 성격을 그대로 두고, 바뀌는 것은
   바탕·글자색(모드)과 강조색뿐이다. 색은 base.css 에 직접 쓰지 않는다.
   글꼴은 Inter/Pretendard 하나로 통일(고정폭 글꼴은 쓰지 않는다).

   대문 사진 위 스크림, Selected publications 띠, 바닥글은 두 모드 모두 어둡다.
   그래서 --ink-accent 는 항상 "다크용" 강조색을 쓴다.
   대문 사진은 연구 이미지이므로 테마 색을 입히지 않는다(스크림은 중립 검정).
   ========================================================================== */

/* ---------------------------------------------------------------- 공통 모양 */
:root {
  --radius-sm: 2px;  --radius: 3px;  --radius-lg: 4px;  --radius-pill: 4px;
  --btn-radius: 3px;
  --display-weight: 700;    --display-transform: none;
  --tracking-display: -0.018em;
  --body-lh: 1.68;
  --eyebrow-font: var(--font-body);
  --eyebrow-weight: 500;    --eyebrow-tracking: 0.2em;
  --eyebrow-transform: uppercase;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --tile-shadow: none;
  --rule-w: 1px;
  --on-hero: #ffffff;
  --footer-logo-filter: brightness(0) invert(1);

  /* 어두운 띠(Selected publications)와 바닥글은 두 모드 공통 */
  --ink-bg: #04070b;        --ink-text: #e6eef5;
  --footer-bg: #04070b;     --footer-text: #8593a2;
  --footer-strong: #eef3f8; --footer-border: rgba(255,255,255,.10);

  /* 기본 강조색 (data-accent 가 없을 때) */
  --acc-d: #45c8f5;  --acc-l: #0a7fb0;
}

/* ---------------------------------------------------------------- 모드: dark */
:root,
[data-mode="dark"] {
  --bg: #080b10;            --bg-alt: #0e131a;
  --surface: #121821;       --surface-bright: #18202a;
  --text: #9fabb9;          --text-strong: #eef3f8;
  --text-muted: #8593a2;    --text-faint: #5f6d7b;
  --border: #27323f;        --border-faint: #1b232d;
  --shadow: rgba(0, 0, 0, .6);
  --header-bg: rgba(8,11,16,.88);
  --header-text: #eef3f8;   --header-border: #1b232d;

  --accent: var(--acc-d);
  --accent-strong: color-mix(in srgb, var(--acc-d) 75%, #ffffff);
  --accent-on: #05080c;
}

/* ---------------------------------------------------------------- 모드: light */
[data-mode="light"] {
  --bg: #f6f7f9;            --bg-alt: #eceff3;
  --surface: #ffffff;       --surface-bright: #ffffff;
  --text: #414a56;          --text-strong: #0d1117;
  --text-muted: #5b6573;    --text-faint: #8a93a0;
  --border: #cfd5dd;        --border-faint: #e1e5ea;
  --shadow: rgba(13, 17, 23, .10);
  --header-bg: rgba(246,247,249,.92);
  --header-text: #0d1117;   --header-border: #e1e5ea;

  --accent: var(--acc-l);
  --accent-strong: color-mix(in srgb, var(--acc-l) 78%, #000000);
  --accent-on: #ffffff;
}

/* ------------------------------------------------- 모드: indigo (연한 다크·네이비) */
[data-mode="indigo"] {
  --bg: #121a2b;            --bg-alt: #182238;
  --surface: #1e2941;       --surface-bright: #26324c;
  --text: #a9b6cc;          --text-strong: #eaf0fa;
  --text-muted: #8e9cb4;    --text-faint: #68768e;
  --border: #2f3c58;        --border-faint: #232e45;
  --shadow: rgba(0, 0, 0, .5);
  --header-bg: rgba(18,26,43,.88);
  --header-text: #eaf0fa;   --header-border: #232e45;

  --accent: var(--acc-d);
  --accent-strong: color-mix(in srgb, var(--acc-d) 75%, #ffffff);
  --accent-on: #0b1322;
}

/* ----------------------------------------------- 모드: graphite (연한 다크·회색) */
[data-mode="graphite"] {
  --bg: #1a1c1e;            --bg-alt: #212426;
  --surface: #26292c;       --surface-bright: #2e3235;
  --text: #adb2b7;          --text-strong: #eef0f2;
  --text-muted: #92989e;    --text-faint: #6d7378;
  --border: #393d41;        --border-faint: #2b2f32;
  --shadow: rgba(0, 0, 0, .5);
  --header-bg: rgba(26,28,30,.88);
  --header-text: #eef0f2;   --header-border: #2b2f32;

  --accent: var(--acc-d);
  --accent-strong: color-mix(in srgb, var(--acc-d) 75%, #ffffff);
  --accent-on: #15171a;
}

/* -------------------------------------------------- 모드: sand (연한 라이트·베이지) */
[data-mode="sand"] {
  --bg: #f5f1e8;            --bg-alt: #ece6d9;
  --surface: #fdfbf6;       --surface-bright: #ffffff;
  --text: #4e4639;          --text-strong: #1f1a12;
  --text-muted: #6a6153;    --text-faint: #968d7c;
  --border: #d9d1c0;        --border-faint: #e7e1d3;
  --shadow: rgba(60, 50, 30, .10);
  --header-bg: rgba(245,241,232,.92);
  --header-text: #1f1a12;   --header-border: #e7e1d3;

  --accent: var(--acc-l);
  --accent-strong: color-mix(in srgb, var(--acc-l) 78%, #000000);
  --accent-on: #ffffff;
}

/* ---------------------------------------------------- 모드: fog (연한 라이트·회색) */
[data-mode="fog"] {
  --bg: #eceef0;            --bg-alt: #e2e5e8;
  --surface: #f7f8f9;       --surface-bright: #ffffff;
  --text: #464c53;          --text-strong: #14181c;
  --text-muted: #5f666e;    --text-faint: #8b929a;
  --border: #c8ced4;        --border-faint: #dce0e4;
  --shadow: rgba(20, 24, 28, .10);
  --header-bg: rgba(236,238,240,.92);
  --header-text: #14181c;   --header-border: #dce0e4;

  --accent: var(--acc-l);
  --accent-strong: color-mix(in srgb, var(--acc-l) 78%, #000000);
  --accent-on: #ffffff;
}

/* 모든 모드 공통 파생값 */
:root {
  --chip-bg: color-mix(in srgb, var(--accent) 14%, var(--bg));
  --chip-text: var(--accent);
  --ink-accent: var(--acc-d);
}

/* ------------------------------------------------- 밝은 계열의 띠·바닥글
   Selected publications 띠와 바닥글은 어두운 계열에서는 그대로 어둡게 두고,
   밝은 계열에서는 바탕보다 한 단계 짙은 밝은 색으로 바꾼다.
   대문 사진 위는 어느 모드에서도 어둡다 — 사진이 어두워 밝은 스크림으로는 글씨가 안 읽힌다. */
[data-mode="light"],
[data-mode="sand"],
[data-mode="fog"] {
  --ink-accent: var(--acc-l);
  --footer-logo-filter: brightness(0);
}

[data-mode="light"] {
  --ink-bg: #e9edf2;        --ink-text: #0d1117;
  --footer-bg: #e3e7ec;     --footer-text: #5b6573;
  --footer-strong: #0d1117; --footer-border: rgba(13,17,23,.12);
}

[data-mode="sand"] {
  --ink-bg: #eae3d5;        --ink-text: #1f1a12;
  --footer-bg: #e5ddcc;     --footer-text: #6a6153;
  --footer-strong: #1f1a12; --footer-border: rgba(31,26,18,.14);
}

[data-mode="fog"] {
  --ink-bg: #e2e5e8;        --ink-text: #14181c;
  --footer-bg: #dcdfe3;     --footer-text: #5f666e;
  --footer-strong: #14181c; --footer-border: rgba(20,24,28,.14);
}

/* ---------------------------------------------------------------- 강조색 10
   각 색은 --acc-d(어두운 바탕용, 밝은 톤) / --acc-l(밝은 바탕용, 짙은 톤) 한 쌍 */
[data-accent="tomato"]  { --acc-d: #ff6b6b;  --acc-l: #c8323c; }   /* tdTomato — 대문 절편의 적색 */
[data-accent="amber"]   { --acc-d: #f5b041;  --acc-l: #a86400; }
[data-accent="coral"]   { --acc-d: #ff8a5c;  --acc-l: #c24a1c; }
[data-accent="magenta"] { --acc-d: #f472b6;  --acc-l: #b0246e; }
[data-accent="violet"]  { --acc-d: #a78bfa;  --acc-l: #6341c9; }
[data-accent="navy"]    { --acc-d: #7aa2ff;  --acc-l: #1f4fb8; }   /* 짙은 KAIST 계열 블루 */
[data-accent="cyan"]    { --acc-d: #45c8f5;  --acc-l: #0a7fb0; }   /* 기본값 */
[data-accent="teal"]    { --acc-d: #2dd4bf;  --acc-l: #0b7a6e; }
[data-accent="green"]   { --acc-d: #6fd08c;  --acc-l: #1f8a4c; }   /* GFP — 두 번째 슬라이드의 녹색 */
[data-accent="mono"]    { --acc-d: #e9edf2;  --acc-l: #1a1f26; }   /* 무채색 — 색은 사진이 담당 */