/* 온절 컬러 토큰 — 단일 소스. 문서: docs/design/colors.md
   재료 네 가지(한지·먹·단청·금)에서 뽑은 원색 6개가 시간대 모드(한지 낮·노을 저녁·먹 밤)마다 바뀌고, 그 아래 역할 토큰은 원색을 참조한다.
   컴포넌트 CSS 는 역할 토큰만 쓴다. 바꾸고 싶으면 각 모드의 원색만 바꾼다. 대비는 `npm run contrast` 로 점검. */

/* ---------- 원색(재료) · 모드별 ----------
   선택자에 `.ui-mode` 가 같이 있는 이유: 장면 위 HUD(#ui)는 `.scene-ink` 로 항상 먹 모드인데, 그 안의 #panel 은 다시 시간대 모드를 따라야 해서. */
:root, :root[data-theme="meok"], :root:not([data-theme]) .ui-mode, :root[data-theme="meok"] .ui-mode {   /* 먹(밤 20~06시) · 기본값: JS 가 테마를 못 정해도 밤 */
  --bg: #14110F;            /* 먹 (순검정 대신 아주 어두운 먹 — OLED 발열·번짐) */
  --surface: #241F1B;       /* 먹 표면 (시트·카드) */
  --ink: #EDE4D3;           /* 한지 미색 글자 */
  --act: #C9654F;           /* 단청 적(석간주) — 글자·아이콘·배지 */
  --act-fill: #A84B3A;      /* 단청 적 채움 — CTA 바탕 (흰 글자 4.5:1 이상) */
  --guide: #6FA394;         /* 단청 청(뇌록) — 글자·아이콘·링크 */
  --guide-fill: #2E6B5E;    /* 단청 청 채움 — 보조 버튼·진행바 */
  --gold: #D8B35E;          /* 금 — 성취 하이라이트 전용 */
  --shadow: rgba(0,0,0,.5);
  --cover-filter: blur(14px) brightness(.45) saturate(1.1);   /* 오늘 카드·온보딩 배경 커버 */
}
:root[data-theme="noeul"], :root[data-theme="noeul"] .ui-mode {                             /* 노을(저녁 17~20시) */
  --bg: #2A1E1D; --surface: #3D2B28; --ink: #F2E6D4;
  --act: #D97A5A; --act-fill: #A84B3A;
  --guide: #7FA89C; --guide-fill: #35695C;
  --gold: #E3B96A;
  --shadow: rgba(0,0,0,.45);
  --cover-filter: blur(14px) brightness(.5) saturate(1.1);
}
:root[data-theme="hanji"], :root[data-theme="hanji"] .ui-mode {                             /* 한지(낮 06~17시) */
  --bg: #F3EDE2; --surface: #E4D9C6; --ink: #2B2520;
  --act: #A8463A; --act-fill: #A8463A;
  --guide: #3E6B5B; --guide-fill: #3E6B5B;
  --gold: #9C7A2A;          /* 낮엔 짙은 고금(古金) — 한지 위 3:1 이상 */
  --shadow: rgba(43,37,32,.22);
  --cover-filter: blur(16px) brightness(1.05) saturate(.85);   /* 낮엔 밝은 한지 톤으로 */
}
:root { color-scheme: dark; } :root[data-theme="hanji"] { color-scheme: light; }
/* 장면(3D) 위 HUD — 전각 안은 늘 어둡고 글자엔 그림자가 있으니 시간대와 무관하게 먹 모드. #ui·#gate·소원 카드·피크에 붙인다.
   글자색은 상속값이 아니라 그 요소의 --ink 로 다시 잡는다(부모 #ui 의 계산된 color 가 내려오지 않게) */
.scene-ink, .ui-mode { color: var(--ink); }
.scene-ink {
  --bg: #14110F;            /* 먹 (순검정 대신 아주 어두운 먹 — OLED 발열·번짐) */
  --surface: #241F1B;       /* 먹 표면 (시트·카드) */
  --ink: #EDE4D3;           /* 한지 미색 글자 */
  --act: #C9654F;           /* 단청 적(석간주) — 글자·아이콘·배지 */
  --act-fill: #A84B3A;      /* 단청 적 채움 — CTA 바탕 (흰 글자 4.5:1 이상) */
  --guide: #6FA394;         /* 단청 청(뇌록) — 글자·아이콘·링크 */
  --guide-fill: #2E6B5E;    /* 단청 청 채움 — 보조 버튼·진행바 */
  --gold: #D8B35E;          /* 금 — 성취 하이라이트 전용 */
  --shadow: rgba(0,0,0,.5);
  --cover-filter: blur(14px) brightness(.45) saturate(1.1);   /* 오늘 카드·온보딩 배경 커버 */
}

/* ---------- 역할 토큰 · 모드 공통(원색에서 파생) ----------
   .scene-ink·.ui-mode 에도 선언해야 그 요소의 원색으로 다시 계산된다(var() 는 선언된 요소에서 풀린다) */
:root, .scene-ink, .ui-mode {
  /* 글자 */
  --dim: color-mix(in srgb, var(--ink) 68%, transparent);   /* 보조 글자 (한지 모드 4.5:1 확보) */
  --dim2: color-mix(in srgb, var(--ink) 38%, transparent);  /* 힌트·비활성 */
  --on-act: #FFF8F0;                                        /* 적·청 채움 위 글자 */
  --on-gold: #2B2520;                                       /* 금 채움(드묾) 위 글자 */
  --on-soft: var(--ink);                                    /* 옅은 틴트(--act-soft 등) 위 글자 — 채움이 아니라 글자색 그대로 */
  /* 면 */
  --paper: color-mix(in srgb, var(--bg) 62%, transparent);  /* 글래스(블러 뒤) */
  --glass: color-mix(in srgb, var(--surface) 94%, transparent); /* 시트 글래스 */
  --fill: color-mix(in srgb, var(--ink) 8%, transparent);   /* 카드·칩·아바타 바탕 */
  --fill-2: color-mix(in srgb, var(--ink) 14%, transparent);/* 눌림·강조 바탕 */
  --line: color-mix(in srgb, var(--ink) 12%, transparent);  /* 구분선 — 전부 이것 */
  --line-2: color-mix(in srgb, var(--ink) 22%, transparent);/* 그래버·입력 테두리 */
  --track: color-mix(in srgb, var(--ink) 30%, transparent); /* 진행 점·트랙 */
  --scrim: color-mix(in srgb, var(--bg) 55%, transparent);  /* 모달 뒤 어둡게 */
  --scrim-2: color-mix(in srgb, var(--bg) 92%, transparent);/* 카드 하단 그라데이션 끝 */
  /* 행동(적) */
  --act-soft: color-mix(in srgb, var(--act) 18%, transparent);   /* 선택 칩 바탕 */
  --act-glow: color-mix(in srgb, var(--act) 45%, transparent);   /* ➕ 버튼 글로우 */
  --live: var(--act);                                            /* 라이브 = 지금 행동 */
  --danger: var(--act);                                          /* 오류·취소 글자/테두리 (채움 금지) */
  /* 안내(청) */
  --guide-soft: color-mix(in srgb, var(--guide) 18%, transparent);
  /* 성취(금) */
  --gold-glow: color-mix(in srgb, var(--gold) 55%, transparent);
  --gold-soft: color-mix(in srgb, var(--gold) 18%, transparent);
  /* 콘텐츠 팔레트 — 등 6색 (사용자가 고르는 색, 모드와 무관. src/layers/lanternArt.js COLORS 와 같은 값) */
  --lantern-red: #d9483b; --lantern-gold: #e8b04a; --lantern-blue: #4a8fd9; --lantern-green: #4fa36b; --lantern-pink: #e08bb0; --lantern-white: #f0e9dc;
  --lantern-light: 255,214,150;                             /* 등불 빛(rgb 성분) — 대문 틈·글로우 */
  /* 레거시 별칭 — 이행 중. 치환 끝나면 삭제 */
  --accent: var(--act-fill); --accent-hi: var(--guide); --accent2: var(--guide); --warm: var(--gold);
}
:root { transition: background-color .6s; }