/* ============================================================================
   메모리코드 · 디자인 토큰  (Phase 0 · 4단계)
   ----------------------------------------------------------------------------
   L0 공통 인프라. /youth 와 /senior 가 이 파일 하나를 공유한다.
   화면 분리(L3)는 여기서 하지 않는다. 여기는 "값"만 둔다.

   ★ 이 파일의 핵심 규칙 하나만 기억할 것:
     시대색(--era-*)과 차트색(--chart-*)은 서로 다른 목적의 토큰이다. 절대 섞지 말 것.
     이유는 아래 [2] [3] 주석 참조.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── [1] 한지 팔레트 — 표면과 먹 ─────────────────────────────────────── */
  --paper-0:       #faf8f2;   /* 가장 밝은 지면 — 카드 안쪽 */
  --paper-1:       #f6f3ea;   /* 기본 배경 (한지) */
  --paper-2:       #ede8db;   /* 한 단 낮은 면 — 인용, 보조 블록 */
  --paper-line:    #ddd6c4;   /* 괘선 · 구분선 */
  --paper-edge:    #c9c0a8;   /* 테두리 */

  --ink-1:         #1c1a16;   /* 본문 먹 */
  --ink-2:         #4a463d;   /* 보조 텍스트 */
  /* ⚠ #7d776a 는 한지 위에서 대비 4.01 로 **작은 글자 AA(4.5) 미달**이었다.
     캡션·메타 줄이 전부 이 색이라 화면 곳곳이 기준 아래였다(2026-08-19 실측).
     색상·채도는 그대로 두고 밝기만 낮춰 4.51 로 올린다. */
  --ink-3:         #746f63;   /* 흐린 텍스트 · 축 라벨 (한지 대비 4.51) */
  /* 어르신 전용 흐린 먹 — AAA(7:1) 를 넘긴다. 나이가 들면 수정체가 누레져
     대비 감도가 떨어지므로 **젊은 눈의 AA 는 어르신에게 AA 가 아니다.**
     .track-senior 가 --ink-3 을 이 값으로 «가리킨다»(색을 새로 정하지 않는다). */
  --ink-3-strong:  #58544b;   /* 어르신 한지 대비 7.10 */

  /* ── 강조색 (patch64) ────────────────────────────────────────────────
     청소년 트랙의 «에너지»가 붙는 자리 하나. 단청(丹靑)의 청색에서 왔다 —
     한지 바탕과 같은 계열의 이야기라 팔레트를 흔들지 않는다.
     ⚠ 차트색이 아니다. 데이터 구분에는 절대 쓰지 말 것(--chart-* 를 쓴다).
     검증: 한지(#f6f3ea) 대비 4.37 · 흰 글자 대비 4.85 · 먹빛 바탕 대비 3.65(테두리 3:1 통과).
     두 모드에서 같은 값을 쓴다 — 흰 글자가 양쪽에서 4.85 로 통과하기 때문이다. */
  --accent-1:      #1e6fd9;
  --accent-ink:    #ffffff;
  --ink-line:  rgba(28,26,22,.10);

  /* ── [2] 시대색 7종 — 정체성 전용 ────────────────────────────────────
     출처: people.json 의 eras[]. 인물카드 테두리·배지·시대 헤더에 쓴다.

     ⚠ 차트·그래프 계열 색으로 쓰지 말 것.
        접근성 검증 결과 --era-modern(#3d3d3d) ↔ --era-independence(#6b1f2e) 가
        색맹 시야 ΔE 3.5 (기준 8), 정상 시야 ΔE 10.8 (기준 15) 로 사실상 구분 불가.
        --era-goryeo / --era-joseon-early / --era-modern 은 채도 기준도 미달이라
        범례에만 의존하면 회색 덩어리로 읽힌다.
        글자 라벨이 항상 붙는 넓은 면(카드 상단 4px 띠, 텍스트 배지)에는 문제없다.
        데이터를 색으로 구분해야 하면 [3] 의 --chart-* 를 쓸 것. */
  --era-ancient:        #b8722e;  --era-ancient-deep:        #8a5520;  /* 고대·삼국 */
  --era-goryeo:         #3d7a5f;  --era-goryeo-deep:         #1f5540;  /* 고려·중세 */
  --era-joseon-early:   #1e4a7a;  --era-joseon-early-deep:   #0f2c4a;  /* 조선전기·르네상스 */
  --era-war:            #a32e2e;  --era-war-deep:            #6b1818;  /* 임진·대항해 */
  --era-joseon-late:    #6b3a7a;  --era-joseon-late-deep:    #3a1e44;  /* 조선후기·계몽혁명 */
  --era-independence:   #6b1f2e;  --era-independence-deep:   #3a0f1a;  /* 독립·제국주의 */
  --era-modern:         #3d3d3d;  --era-modern-deep:         #1f1f1f;  /* 근현대 */

  /* ── [3] 차트색 8종 — 데이터 시각화 전용 ─────────────────────────────
     한지 표면(#f6f3ea)에 대고 검증 통과. 순서를 고정해 쓰고 절대 순환시키지 말 것.
     (검증: 인접쌍 색맹 ΔE 9.1 ≥ 8 · 정상 ΔE 19.6 ≥ 15 · 명도/채도 전 슬롯 통과)

     주의 2가지
     ① 대비 3:1 미만인 슬롯이 4개(2·3·4·5) 있다 → 그 계열을 쓸 때는
        직접 라벨이나 표 보기를 반드시 함께 제공할 것. 색만 두면 안 된다.
     ② 산점도·버블·소형다중처럼 모든 쌍이 동시에 보이는 형태에서는
        3슬롯까지만 안전하다. 그 이상은 묶거나(Other) 화면을 나눌 것. */
  --chart-1: #2a78d6;  /* 청 */
  --chart-2: #eb6834;  /* 주 */
  --chart-3: #1baf7a;  /* 벽 */
  --chart-4: #eda100;  /* 황 */
  --chart-5: #e87ba4;  /* 홍 */
  --chart-6: #008300;  /* 녹 */
  --chart-7: #4a3aa7;  /* 자 */
  --chart-8: #e34948;  /* 적 */

  --chart-seq-100: #cde2fb;  --chart-seq-300: #6da7ec;  --chart-seq-500: #256abf;
  --chart-seq-200: #9ec5f4;  --chart-seq-400: #3987e5;  --chart-seq-700: #0d366b;
  --chart-diverging-low:  #2a78d6;
  --chart-diverging-mid:  #ede8db;
  --chart-diverging-high: #e34948;
  --chart-grid:     #ddd6c4;
  --chart-axis:     #c9c0a8;
  --chart-surface:  #faf8f2;

  /* ── [4] 사자성어 갈래 6종 ───────────────────────────────────────────
     idioms.json 의 category 6종. 차트색 1~6번을 순서대로 빌려 쓴다.
     칩·배지에는 항상 글자 라벨이 함께 있으므로 색만으로 구분하지 않는다. */
  --cat-life:      var(--chart-1);  /* 인생교훈   54 */
  --cat-effort:    var(--chart-2);  /* 노력인내   33 */
  --cat-grace:     var(--chart-3);  /* 은혜우정   36 */
  --cat-wisdom:    var(--chart-4);  /* 지혜깨달음 40 */
  --cat-relation:  var(--chart-5);  /* 인간관계   48 */
  --cat-essence:   var(--chart-6);  /* 본질이치   54 */

  /* ── [5] 상태색 — 다른 용도로 재사용 금지 ────────────────────────────
     반드시 아이콘 + 글자와 함께 쓴다. 색 단독으로 의미를 나르지 않는다. */
  --status-good:     #0ca30c;
  --status-warning:  #fab219;
  --status-serious:  #ec835a;
  --status-critical: #d03b3b;

  /* ── [6] 타이포 — 트랙 공통 축척 ─────────────────────────────────── */
  --font-sans:  system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --font-serif: "Gowun Batang", "Noto Serif KR", serif;   /* 한자·성어 표기 */
  --font-mono:  "JetBrains Mono", ui-monospace, monospace; /* 연도·숫자 */

  --radius-sm: 4px;  --radius-md: 9px;  --radius-lg: 14px;
  --space-1: 4px; --space-2: 8px; --space-3: 14px; --space-4: 22px; --space-5: 34px;
  --tap-min: 44px;   /* 최소 터치 영역 */
}

/* ── [7] 트랙별 축척 — L2 오디언스 어댑터가 body 에 클래스를 붙인다 ─────
   /youth : 14px 고밀도   ·   /senior : 20px 저밀도
   시니어는 "글자 큰 청소년 모드"가 아니다. 줄간·자간·터치영역까지 함께 벌린다. */
.track-youth {
  --font-body:    14px;
  --font-title:   19px;
  --font-caption: 12px;
  --line-body:    1.6;
  --density:      1;      /* 카드 간격 배수 */
  --tap:          var(--tap-min);
}
.track-senior {
  --font-body:    20px;
  --font-title:   28px;
  --font-caption: 17px;
  --line-body:    1.9;
  --density:      1.6;
  --tap:          56px;   /* 44px 보다 넉넉하게 */
  /* ⚠⚠ 여기서 --paper-1 을 색값으로 못박으면 **어두운 모드가 통째로 깨진다.**
     .track-senior 는 <body> 에 붙으므로 :root 의 어두운 값보다 안쪽이고,
     따라서 [8]의 어두운 모드 선언을 이깁니다 — 실제로 그렇게 났다(2026-08-19).
       어두운 모드에서 바탕은 밝은 #faf8f2 인데 글자는 --ink-1(#f5f2ea) 이 되어
       「사자성어 여든 가지」 제목의 대비가 **1.05:1** 이었다. 사실상 안 보인다.
     그래서 색값 대신 **한 단 밝은 면(--paper-0)** 을 가리킨다.
     밝은 모드에서는 #faf8f2 로 지금과 똑같고, 어두운 모드에서는 어두운 값으로 따라간다.
     ★ 규칙: 트랙 축척에서는 색을 «새로 정하지» 않는다. 이미 있는 토큰을 «가리킨다». */
  --paper-1:      var(--paper-0);
  --ink-3:        var(--ink-3-strong);   /* AAA · 색을 새로 정하지 않고 가리킨다 */
}

/* ── [8] 다크 모드 — 먹빛 ────────────────────────────────────────────
   자동 반전이 아니라 어두운 표면(#1a1815)에 맞춰 다시 고른 값이다.
   차트색 8종은 그 표면에서 전 항목 검증 통과(대비 3:1 이상, 인접 ΔE 8.4/19.3). */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --paper-0: #201d18;  --paper-1: #1a1815;  --paper-2: #2a2621;
    --paper-line: #35302a; --paper-edge: #45403a;
    --ink-1: #f5f2ea;  --ink-2: #c3bdb0;  --ink-3: #8e887c;
    --ink-3-strong: #aba79e;   /* 어두운 바탕 대비 7.00 */
    --ink-line: rgba(245,242,234,.12);

    --chart-1: #3987e5;  --chart-2: #d95926;  --chart-3: #199e70;  --chart-4: #c98500;
    --chart-5: #d55181;  --chart-6: #008300;  --chart-7: #9085e9;  --chart-8: #e66767;
    --chart-grid: #35302a; --chart-axis: #45403a; --chart-surface: #201d18;
    --chart-diverging-mid: #35302a;

    /* 시대색은 어두운 면에서 그대로 쓰면 가라앉는다 — 한 단 밝게 */
    --era-ancient: #d18b45; --era-goryeo: #56997b; --era-joseon-early: #4b81b8;
    --era-war: #c95656; --era-joseon-late: #9265a3; --era-independence: #a34c60;
    --era-modern: #8c8c8c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper-0: #201d18;  --paper-1: #1a1815;  --paper-2: #2a2621;
  --paper-line: #35302a; --paper-edge: #45403a;
  --ink-1: #f5f2ea;  --ink-2: #c3bdb0;  --ink-3: #8e887c;
  --ink-3-strong: #aba79e;   /* 어두운 바탕 대비 7.00 */
  --ink-line: rgba(245,242,234,.12);
  --chart-1: #3987e5;  --chart-2: #d95926;  --chart-3: #199e70;  --chart-4: #c98500;
  --chart-5: #d55181;  --chart-6: #008300;  --chart-7: #9085e9;  --chart-8: #e66767;
  --chart-grid: #35302a; --chart-axis: #45403a; --chart-surface: #201d18;
  --chart-diverging-mid: #35302a;
  --era-ancient: #d18b45; --era-goryeo: #56997b; --era-joseon-early: #4b81b8;
  --era-war: #c95656; --era-joseon-late: #9265a3; --era-independence: #a34c60;
  --era-modern: #8c8c8c;
}

/* ── [9] 접근성 ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (forced-colors: active) {
  /* 색이 강제로 치환되는 환경 — 색으로만 나르던 의미는 여기서 전부 사라진다.
     그래서 모든 색 표시에 글자 라벨이나 아이콘을 함께 두는 것이 규칙이다. */
  .chart-mark { forced-color-adjust: none; }
}
@media print {
  /* 시니어 A4 인쇄 (Phase 2) — 한지 배경을 빼고 먹만 남긴다 */
  :root { --paper-0:#fff; --paper-1:#fff; --paper-2:#fff; --ink-1:#000; --ink-2:#222; }
}