:root {
  /* 라이트 테마 — 색 정체성을 출품 덱(deck2.html)·/lab(lab.css) 와 동일 팔레트로 통일 (정합) */
  --bg: #FAFAF6;            /* lab cream — 두 사이트 배경 일치 */
  --surface: #ffffff;
  --surface-alt: #F0F2F5;   /* = lab --lab-bg-alt */
  --text: #1F2937;          /* = lab --lab-text */
  --text-muted: #5A6470;    /* = lab --lab-text-secondary / 덱 --neutral */
  --border: #E5E7EB;        /* = lab --lab-border */
  --primary: #0B2E5C;       /* Navy — = lab --lab-primary / 덱 --navy */
  --primary-hover: #08213f; /* 네이비 호버 (약간 더 짙게) */
  --primary-text: #ffffff;
  --accent: #0FA3B1;        /* Cyan — = lab --lab-accent / 덱 --teal */
  --success: #2f855a;
  --warn: #c05621;
  --danger: #c53030;
  --focus: #4299e1;
  /* 국립중앙도서관 섹션 전용 (라이트: 짙은 앰버) */
  --nlk: #92400e;
  --nlk-bg: rgba(180, 134, 28, 0.08);
  --nlk-border: rgba(180, 134, 28, 0.45);
  --nlk-strong: rgba(180, 134, 28, 0.55);
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --radius: 8px;
  --radius-sm: 4px;
  --gap: 12px;
  --font-base: 15px;
  --font-sm: 13px;
  --line: 1.55;
  --max-pane-w: 1600px;
  /* sticky-stack 높이 — layout.css 의 100vh 계산이 이 변수에 의존.
     ticker 가 표시되면 --ticker-h 가 그 높이로 설정됨 (popular-ticker.js).
     stepper 는 항상 표시이라 고정값. 모바일 미디어 쿼리에서 축소. */
  --header-h: 56px;
  --ticker-h: 0px;
  --stepper-h: 56px;
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: var(--font-base);
  line-height: var(--line);
}

[data-theme="dark"] {
  --bg: #0f141b;
  --surface: #181f2a;
  --surface-alt: #1f2936;
  --text: #e7ecf2;
  --text-muted: #a0acba;
  --border: #2a3445;
  --primary: #5ba1e6;
  --primary-hover: #4690d8;
  --primary-text: #0f141b;
  --accent: #19C3D4;        /* 시안 강조 — 라이트 #0FA3B1 의 다크 대응 (가독성 우선 밝게) */
  --success: #66c997;
  --warn: #e89464;
  --danger: #f08080;
  --focus: #6cb3ff;
  /* 국립중앙도서관 (다크: 밝은 앰버 — 어두운 배경에서 가독성 확보) */
  --nlk: #fbbf77;
  --nlk-bg: rgba(251, 191, 119, 0.10);
  --nlk-border: rgba(251, 191, 119, 0.40);
  --nlk-strong: rgba(251, 191, 119, 0.55);
  --shadow: 0 1px 3px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

/* 사용자가 토글로 명시적 테마를 골랐을 때 시스템 prefer 와 무관하게
   브라우저 native 위젯(스크롤바·기본 input 등) 색도 일치시킴.
   :root 가 아닌 body 에 적용되는 까닭은 theme.js 가 body.dataset.theme 만
   설정하기 때문. */
body[data-theme="light"] { color-scheme: light; }
body[data-theme="dark"]  { color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--text);
}