/* ============================================================
   철학아틀라스 — 테마 변수
   낮 = 아고라 (밝고 개방적, 광장에서 나누는 철학)
   밤 = 서재 (짙은 남색, 촛불 곁의 사유)
   ============================================================ */

:root, html[data-theme="day"] {
  /* 아고라 */
  --bg: #F6F1E7;            /* 따뜻한 크림 (햇살 받은 대리석) */
  --bg-soft: #EFE7D8;
  --surface: #FFFDF8;
  --surface-2: #F1EADC;
  --ink: #2B2A26;           /* 먹색 텍스트 */
  --ink-soft: #6B675C;
  --line: #DCD2BE;
  --accent: #2E6FBF;        /* 지중해 블루 */
  --accent-warm: #C9762B;   /* 테라코타 포인트 */
  --sea: #D8E6EA;           /* 지도 바다 */
  --land: #F0E8D6;          /* 지도 대륙 */
  --land-line: #C9BC9F;
  --shadow: 0 6px 24px rgba(70, 60, 40, .10);
  --header-bg: rgba(246, 241, 231, .88);
}

html[data-theme="night"] {
  /* 서재 */
  --bg: #10161F;            /* 깊은 남색 밤 */
  --bg-soft: #151D29;
  --surface: #1A2330;
  --surface-2: #202B3A;
  --ink: #E9E2D2;           /* 촛불에 비친 종이색 */
  --ink-soft: #9AA3B0;
  --line: #2C3846;
  --accent: #E8A94C;        /* 앰버 촛불빛 */
  --accent-warm: #E8A94C;
  --sea: #0D1420;           /* 지도 바다(밤) */
  --land: #1E2836;          /* 지도 대륙(밤) */
  --land-line: #334155;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);
  --header-bg: rgba(16, 22, 31, .88);
}

/* 분과 고유색 — 낮/밤 공통 (범례의 뼈대) */
:root {
  --disc-western: #2E6FBF;   /* 서양철학: 지중해 블루 */
  --disc-eastern: #B23A2E;   /* 동양철학: 주묵(붉은 먹) */
  --disc-religion: #C9A227;  /* 종교철학: 금색 */
  --disc-psych: #7D5BA6;     /* 심리학: 보라 */
  --disc-art: #3E8E5A;       /* 예술: 초록 */
  --disc-lit: #C46A9A;       /* 문학(추후 확장): 자홍 */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Noto Sans KR", -apple-system, "Segoe UI", sans-serif;
  transition: background .35s ease, color .35s ease;
}
a { color: inherit; text-decoration: none; }

/* 공통 토글 버튼 */
.toggles { display: flex; gap: 8px; align-items: center; }
.tgl {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s ease;
}
.tgl:hover { border-color: var(--accent); color: var(--accent); }
.tgl.active { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="night"] .tgl.active { color: #1A1206; }

/* 영/국문 전환: data-lang 속성으로 노출 제어 */
[data-en] { display: none; }
html[data-lang="en"] [data-ko] { display: none; }
html[data-lang="en"] [data-en] { display: inline; }
html[data-lang="en"] [data-en].block { display: block; }