/* ─────────────────────────────────────────────────────────────
   디자인 토큰 — Ethereal Minimal / Adaptive Light·Dark
   컴포넌트는 이 파일의 토큰만 참조한다. 색 리터럴을 직접 쓰지 않는다.
   테마: 기본은 시스템 설정을 따르고, <html data-theme="light|dark">로 고정할 수 있다.
   ───────────────────────────────────────────────────────────── */
:root {
  /* 바탕과 안개(화면 전체 미학을 맡는 유일한 그라디언트) */
  --bg: #f1f0f8;
  --mist-a: #dcd8ff;
  --mist-b: #dfeaff;
  --mist-c: #f5e3f0;

  /* Semi-Flat 콘텐츠 표면 */
  --surface: #ffffff;
  --surface-2: #f5f4fb;      /* 표면 안의 한 단계 들어간 면: 아이콘 받침, 트랙, 보조 버튼 */
  --line: rgba(40, 36, 90, .09);

  /* 글자 */
  --ink: #17162a;
  --ink-2: #5d5b76;          /* 본문 보조 */
  --ink-3: #9a98b0;          /* 캡션, 비활성 */

  /* 강조: 화면당 하나의 주 행동에만 채움으로 쓴다 */
  --accent: #6457d6;
  --accent-soft: #ebe8ff;
  --on-accent: #ffffff;

  /* 의미색: 강조색과 별개. 상태를 말할 때만 쓴다 */
  --good: #23918b;
  --good-soft: #e0f3f1;
  --warn: #b6562f;
  --warn-soft: #fbeee7;
  --danger: #c2405a;
  --danger-soft: #fbe8ec;

  /* Selective Liquid Glass: 떠 있는 크롬 전용 */
  --glass: rgba(255, 255, 255, .58);
  --glass-edge: rgba(255, 255, 255, .92);
  --glass-shade: rgba(40, 36, 90, .12);
  --glass-blur: 22px;

  /* 임시 도트 삽화용 */
  --px-skin: #eac6ab;
  --px-hair: #4a4668;
  --px-sky: #e7e5fa;

  /* 높이 */
  --e1: 0 1px 2px rgba(40, 36, 90, .04), 0 10px 28px rgba(40, 36, 90, .07);
  --e2: inset 0 1px 0 var(--glass-edge), 0 8px 24px var(--glass-shade);

  /* 서체 */
  --font-display: "Noto Serif KR", "AppleMyungjo", "Nanum Myeongjo", serif;   /* 인물·서사 */
  --font-ui: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; /* 조작부 */

  /* 글자 크기 / 줄 높이 */
  --t-display: 600 34px/1.12 var(--font-display);
  --t-title: 600 22px/1.3 var(--font-display);
  --t-story: 400 15px/1.75 var(--font-display);
  --t-heading: 600 16px/1.35 var(--font-ui);
  --t-body: 400 15px/1.55 var(--font-ui);
  --t-label: 600 13px/1.3 var(--font-ui);
  --t-caption: 400 12px/1.4 var(--font-ui);
  --t-micro: 600 11px/1.3 var(--font-ui);   /* 키커: 자간 .14em */

  /* 간격 (4의 배수) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  /* 모서리 */
  --r-chip: 12px; --r-control: 16px; --r-tile: 20px; --r-card: 24px; --r-sheet: 28px; --r-pill: 999px;

  /* 움직임 */
  --d-fast: .15s; --d-base: .25s; --d-slow: .4s; --d-reveal: .8s;
  --ease: cubic-bezier(.2, .8, .2, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0b16; --mist-a: #23246a; --mist-b: #10284a; --mist-c: #2d1638;
    --surface: #14162a; --surface-2: #1c1f38; --line: rgba(255, 255, 255, .09);
    --ink: #f0effa; --ink-2: #a9a8c4; --ink-3: #6d6c8a;
    --accent: #a79cff; --accent-soft: #24224f; --on-accent: #100f24;
    --good: #5fd6cf; --good-soft: #0f2b2c; --warn: #f0a37e; --warn-soft: #2c1a14; --danger: #ff8fa3; --danger-soft: #33141c;
    --glass: rgba(24, 26, 48, .55); --glass-edge: rgba(255, 255, 255, .16); --glass-shade: rgba(0, 0, 0, .45);
    --px-sky: #1a1c36;
    --e1: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0b16; --mist-a: #23246a; --mist-b: #10284a; --mist-c: #2d1638;
  --surface: #14162a; --surface-2: #1c1f38; --line: rgba(255, 255, 255, .09);
  --ink: #f0effa; --ink-2: #a9a8c4; --ink-3: #6d6c8a;
  --accent: #a79cff; --accent-soft: #24224f; --on-accent: #100f24;
  --good: #5fd6cf; --good-soft: #0f2b2c; --warn: #f0a37e; --warn-soft: #2c1a14; --danger: #ff8fa3; --danger-soft: #33141c;
  --glass: rgba(24, 26, 48, .55); --glass-edge: rgba(255, 255, 255, .16); --glass-shade: rgba(0, 0, 0, .45);
  --px-sky: #1a1c36;
  --e1: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}