/**
 * tokens.css — 디자인 토큰 단일 소스 (2026-09-14)
 * =============================================================================
 * 왜 있는가
 *   29개 페이지가 각자 인라인 `:root` 에 같은 토큰을 복사해 갖고 있었다.
 *   그래서 값 하나를 바꾸려면 29곳을 고쳐야 했고, 실제로 값이 갈라졌다:
 *     --card   #fbf9f3(14) vs #faf7f0(4)      --ink-3  #8a8375(19) vs #6f6857(4)
 *     --accent #b8860b(23) vs #d4a047(1)      --radius-*  4개 페이지만 선언
 *   → 색·반경 토큰은 **이 파일에서만** 선언한다. (css-rebuild.md §15 Step 1 · §17.3)
 *
 * 규칙
 *   1. 페이지 인라인 `:root` 에는 **페이지 전용 값만** 남긴다 (예: --rt-head-h).
 *   2. 페이지 CSS 에 하드코딩 색을 쓰지 않는다.
 *        글씨 · 아이콘            → var(--ink)
 *        면 · 괘선(테두리·그림자)  → var(--ink-surface)
 *        그림자 · 스크림          → rgba(var(--ink-rgb), α)
 *   3. JS 는 var() 를 못 쓰는 곳(canvas · Leaflet SVG stroke)만 예외이며,
 *      `window.scToken('--ink-surface')` 로 읽는다 (js/site-chrome.js 가 노출).
 *   4. 이 파일은 다른 스타일시트보다 **먼저** 링크한다.
 *
 * 팔레트 — "여행 저널": 크림 종이 + 먹 잉크 + 딥 틸 면/괘선 + 골드 액센트
 *   경위(2026-09-14) — 큰 면(마스트헤드 · 1차 버튼 · 트립바)을 채우던 검정이 "검정 덩어리"로
 *   보인다는 지적 → 딥 틸 #14504f 로 교체. 처음엔 글씨까지 전부 틸로 적용했는데,
 *   실측 A/B(8페이지)에서 **본문 대비가 평균 9.1:1 → 6.8:1 로 떨어지는 것**이 확인되어
 *   **글씨는 먹색 / 면과 선만 틸** 인 하이브리드로 확정했다.
 *   → 그래서 잉크가 두 역할로 나뉜다: --ink(글씨) · --ink-surface(면·선)
 *
 *   토큰              값          역할                     대비(paper 위)  판정
 *   --ink             #1c1a16    글씨 · 아이콘             15.38:1  AAA ✅
 *   --ink-2           #4a463d    보조 텍스트                8.32:1  AAA ✅
 *   --ink-3           #6f6857    캡션 · 메타                5.40:1  AA  ✅ (구 표준 #8a8375 는 3.33 ❌)
 *   --ink-surface     #14504f    면 · 괘선 (딥 틸)           —      위 글씨는 --paper 8.12:1 ✅
 *   --rule            #d8d2c0    헤어라인                  1.34:1  장식 전용
 *   --accent          #b8860b    골드 (면 · 큰 그래픽)      2.88:1  ⚠️ 본문 금지
 *   --accent-dark     #8a6508    골드 (글자 · 진한 버튼)    4.71:1  AA  ✅
 *   --danger          #b3261e                             5.79:1  AA  ✅
 *   --success         #2e7d32                             4.54:1  AA  ✅
 */

:root {
  /* OS 가 다크 설정이어도 스크롤바 · 네이티브 폼 컨트롤은 밝게 그린다.
     (미선언이면 다크 OS 에서 체크박스 · 셀렉트 · 날짜피커만 어둡게 섞여 보였다) */
  color-scheme: light;

  /* ===== 종이 (유지 — 여행 저널 정체성) ===== */
  --paper: #f4f1e8;          /* 페이지 바탕 */
  --paper-2: #ece7d9;        /* 한 단계 어두운 바탕 (표 머리 · 음영) */
  --paper-3: #e3dcc9;        /* 가장 어두운 바탕 (드묾) */
  --card: #fbf9f3;           /* 카드 · 모달 · 입력 필드 (구 #faf7f0 통일) */

  /* ===== 잉크 ① 글씨 ===== */
  --ink: #1c1a16;            /* 제목 · 본문 · 아이콘 */
  --ink-2: #4a463d;          /* 보조 텍스트 · 설명 */
  --ink-3: #6f6857;          /* 캡션 · 메타 (구 #8a8375 는 대비 미달이라 이 값으로 통일) */
  --ink-rgb: 28, 26, 22;     /* rgba(var(--ink-rgb), .12) — 그림자 · 스크림 */

  /* ===== 잉크 ② 면 · 괘선 (검정 덩어리를 대신하는 딥 틸) ===== */
  --ink-surface: #14504f;    /* 마스트헤드 · 1차 버튼 · 트립바 · 굵은 괘선 · 활성 탭 */
  --ink-surface-rgb: 20, 80, 79;

  /* ===== 선 ===== */
  --rule: #d8d2c0;              /* 헤어라인 · 카드 테두리 */
  --rule-strong: var(--ink-surface); /* 굵은 구분선 (신문 지면 스타일) — 현재 미사용 */

  /* ===== 액센트 (골드 — 딥 틸의 보색 계열) =====
     규칙 — 골드 **면 위의 글씨는 --ink(먹색)** 다.
       흰 글씨(3.25:1) · 종이색 글씨(2.88:1)는 AA 미달이었고, 먹색은 5.34:1 로 통과한다.
       기준 패턴은 햄버거 오버레이의 활성 항목(.sc-grid-item.active)이다.
     2026-09-14 전수 치환 — 골드 배경 + 밝은 글씨 19곳(10파일)을 --ink 로 교체. */
  --accent: #b8860b;         /* 면 · 아이콘 · 큰 그래픽 — 글씨는 --ink 동반 */
  --accent-dark: #8a6508;    /* 글자 · 링크 · 진한 버튼 배경 */
  --accent-soft: rgba(184, 134, 11, 0.12);
  --accent-ink: rgba(184, 134, 11, 0.06);

  /* ===== 상태 ===== */
  --success: #2e7d32;
  --danger: #b3261e;
  --error: #b3261e;          /* --danger 의 별칭 (페이지마다 이름이 갈렸다) */

  /* ===== 반경 =====
     원칙(2026-09-14 확정) — **프레임은 사각, 컨트롤은 둥글게**
       · 프레임(카드 · 모달 · 지면 · 표)  = 0px  ← 신문 지면 정체성
       · 컨트롤(버튼 · 탭 · 칩 · 배지 · 닫기) = 12px ← 햄버거 오버레이(#scNavOverlay) 기준
     컨트롤 규칙은 아래 :where() 한 곳에서만 선언한다. :where() 는 특이도가 0이라
     페이지가 직접 쓴 border-radius(50% 원형 · 999px 알약 등)는 항상 그대로 이긴다. */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --ctrl-radius: 12px;       /* 버튼 · 탭 · 칩 · 배지 · 닫기 버튼 */

  /* ===== 종이 RGB (반투명 바탕 — sticky 헤더 · 지면 오버레이) ===== */
  --paper-rgb: 244, 241, 232;
  --card-rgb: 251, 249, 243;
}

/* =============================================================================
   컨트롤 반경 — 사각이던 버튼·탭·칩·배지·닫기 버튼을 한 모양으로 통일
   -----------------------------------------------------------------------------
   왜 여기인가
     같은 "버튼"이 페이지마다 0 / 3~6px / 8~14px / 999px / 50% 로 갈라져 있었다
     (실측 280개 규칙 · css-rebuild.md §21). 29개 페이지가 모두 이 파일을 먼저
     링크하므로 여기 한 규칙으로 전 페이지가 같이 움직인다.

   왜 :where() 인가
     특이도 0 → 페이지의 명시적 border-radius(원형 아바타 · 알약 배지 · 진행바)를
     절대 덮지 않는다. 버튼만 둥글게 하고 프레임은 그대로 두는 것이 목적.

   범위
     · 버튼류   : button 요소 + class 에 btn (btn-primary · -btn · .tb-btn …)
     · 탭       : .tab / .tabs / -tab 계열(이름이 갈려 명시)
     · 칩·배지  : class 에 chip · badge · pill
     · 닫기     : class 에 close (단 .closed 는 접힘 상태 표시라 제외)
   ============================================================================= */
:where(
  button,
  [class*="btn"],
  [class*="Btn"],
  .tab, .tabs, .tab-row, .settings-tabs,
  .rp-tab, .st-tab, .rt-tab, .sh-tab, .cur-tab, .pop-view-tab,
  [class*="chip"],
  [class*="badge"],
  [class*="pill"],
  [class*="close"]:not(.closed)
) {
  border-radius: var(--ctrl-radius);
}