/* ─────────────────────────────────────────────────────────────
   Kinety — 라이트 톤 (기본값)

   구현 구조에 주의: 다크가 베이스 레이어(tokens.css·deck.css)고 이 파일이 그 위를 덮는다.
   기본이 라이트로 바뀌었어도 그 순서는 그대로 두고 셀렉터만 뒤집었다
   (`:root:not([data-tone="dark"])` = data-tone이 안 붙은 평상시 = 라이트).
   덱 전체를 라이트 우선으로 다시 쓰는 것보다 안전해서다.
   따라오는 규칙: 여기서 안 덮은 다크 값은 라이트에 그대로 샌다 — 새 컴포넌트를 만들면
   반드시 이 파일에도 한 줄 넣는다.

   이건 색 반전이 아니다. 다크의 핵심 장치인 '광원(glow)'이
   흰 배경에서는 성립하지 않기 때문이다. 빛은 어둠 위에서만 빛난다.

   그래서 세 가지가 다른 물건으로 번역된다:
     1. 선단·노드: '빛나는 점' → '솔리드 인디고 점 + 옅은 링'
     2. 잔상: 밝은 번짐 → 잉크 번짐 (오히려 더 또렷하게 보인다)
     3. 게이지: 흰 막대 → 잉크 막대. '색은 탈락에만' 원칙은 그대로

   레퍼런스는 Stripe 실물 (잉크 #061B31 / 슬레이트 #64748D / 인디고 #533AFD).
   ───────────────────────────────────────────────────────────── */

:root:not([data-tone="dark"]) {
  /* ── 표면 ── */
  --canvas:       #EDF1F5;
  --bg:           #FFFFFF;
  --slide-border: #E3E8EE;
  --line:         #E3E8EE;
  --line-faint:   #EDF1F5;
  --grid:         transparent;   /* 격자 없음 — 흰 배경에서는 모눈종이로 읽힌다. 라이트는 여백으로 구조를 만든다 */

  /* ── 텍스트 (Stripe 잉크 스케일) ──
     v0.6 (2026-07-21): 라이트가 기본이 되면서 실측 감사. 흰 배경 대비를 재보니
     4단 3.84:1 · 5단 2.65:1로 AA(4.5:1)에 미달이었다 — "비교용"일 때는 넘어갔지만
     기본 톤에서는 부연이 곧 근거라 안 읽히면 논지가 죽는다.
     5단 전부 4.5:1을 넘기되 인접 단 간 1.19~1.80:1을 남겨 위계는 유지한다.
       #061B31 17.37 · #33465C 9.67 · #4A5A72 7.01 · #5C6B81 5.42 · #6B7789 4.54 */
  --tx:      #061B31;
  --tx-2:    #33465C;
  --tx-3:    #4A5A72;
  --tx-4:    #5C6B81;
  --tx-5:    #6B7789;
  --tx-lede: #33465C;

  /* 다크의 가독성 보정은 라이트에 번역하지 않는다. 흰 바탕에서는 기존 크기로 충분하다. */
  --fs-body: 15.5px;
  --fs-data: 14.5px;
  --fs-meta: 13.5px;
  --fs-cell: 12.5px;
  --fs-th: 10.5px;
  --fs-tag: 11px;

  /* ── 인디고 (포인트 컬러 1개) ──
     다크에서는 '광원'이었다. 라이트에서는 '잉크의 액센트'다.
     여전히 선·점·1px에만. 면으로 채우지 않는다. */
  --light:        #533AFD;
  --light-soft:   #7A67FF;
  --light-bright: #533AFD;
  --leading-edge: #533AFD;

  --warn: #DF1B41;

  /* 잔상 — 실제로 보이는 건 개별 알파가 아니라 16겹의 '누적 알파'다.
     alpha_i = base * exp(-i*decay), 누적 = 1 - Π(1-alpha_i)

       다크 (base .17 / decay .26) → 누적 44%   ← 기준
       평탄 .10 × 16겹            → 누적 81%   ← 덩어리. 감쇠를 죽인 v0.2의 버그
       base .085 / decay .44      → 누적 14%   ← 안 보임. 과보정
       base .13  / decay .30      → 누적 32%   ← 여기

     흰 배경의 잉크는 검은 배경의 빛보다 무겁게 읽히므로 다크(44%)보다 낮게 잡는다. */
  --smear-rgb:   6,27,49;
  --smear-base:  0.13;
  --smear-decay: 0.30;

  /* ── 광원 → 솔리드 점 + 옅은 링 ──
     흰 배경에서 글로우는 그냥 뿌연 얼룩이 된다. 대신 링으로 '떠 있음'을 만든다. */
  --glow-leading: 0 0 0 4px rgba(83,58,253,.14);
  --glow-node:    0 0 0 3px rgba(83,58,253,.16);
  --glow-tip:     none;
}

/* ── 페이지 앰비언트 광원 제거 ──
   흰 배경에서 radial glow는 인쇄 얼룩처럼 보인다. 라이트는 여백으로 숨쉰다. */
:root:not([data-tone="dark"]) .slide::after { background: none; }

/* ── 헤드라인 ──
   다크: 위에서 빛을 받아 아래로 어두워진다.
   라이트: 위가 잉크, 아래로 슬레이트. 같은 논리의 반대 방향. */
:root:not([data-tone="dark"]) .h {
  background: linear-gradient(178deg, #061B31 10%, #3E5068 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}


/* ── 관통선 (01) ── */
:root:not([data-tone="dark"]) .thru {
  background: linear-gradient(90deg,
    rgba(6,27,49,.06) 0%,
    rgba(83,58,253,.22) 30%,
    rgba(83,58,253,.45) 68%,
    rgba(83,58,253,.85) 92%,
    rgba(83,58,253,.20) 100%);
}

/* ── 레일 · 노드 (02) ── */
:root:not([data-tone="dark"]) .rail {
  background: linear-gradient(90deg,
    rgba(6,27,49,.08) 0%, rgba(83,58,253,.28) 33%,
    rgba(83,58,253,.55) 66%, rgba(83,58,253,.95) 100%);
}
:root:not([data-tone="dark"]) .n1 { background: #C6CFDA; box-shadow: 0 0 0 1px rgba(6,27,49,.06); }
:root:not([data-tone="dark"]) .n2 { background: #9585FF; box-shadow: 0 0 0 3px rgba(83,58,253,.10); }
:root:not([data-tone="dark"]) .n3 { background: #533AFD; box-shadow: 0 0 0 3px rgba(83,58,253,.16); }

/* 단계 표면 — 다크에서는 밝아졌다. 라이트에서는 진해진다. */
:root:not([data-tone="dark"]) .c1 { background: rgba(6,27,49,.012); }
:root:not([data-tone="dark"]) .c2 { background: rgba(6,27,49,.026); }
:root:not([data-tone="dark"]) .c3 { background: rgba(6,27,49,.042); }


/* ── 표 프레임 ── */
:root:not([data-tone="dark"]) .ab { background: #FFFFFF; }
:root:not([data-tone="dark"]) .ab thead th { background: #F6F9FC; }


:root:not([data-tone="dark"]) .ask div i { background: var(--tx-5); }


/* ── 인쇄 ── */
@media print {
  :root:not([data-tone="dark"]) body { background: #fff; }
}


/* ═══════════════════════════════════════════════════════════
   라이트 전용 최적화 — 다크의 번역이 아니라 독립된 물건으로

   다크는 '빛'으로 위계를 만든다. 라이트는 '잉크의 농도'와 '여백'으로 만든다.
   그래서 같은 값을 쓰면 라이트가 항상 흐려 보인다. 아래는 그 보정이다.
   ═══════════════════════════════════════════════════════════ */


/* 표 — Stripe는 표를 카드로 띄우지 않는다. 평평한 흰 바탕에 헤어라인만 */
:root:not([data-tone="dark"]) .ab { border-radius: 0; border-left: none; border-right: none; }
:root:not([data-tone="dark"]) .ab thead th { background: transparent; border-bottom: 1px solid #061B31; }

/* 02 단계 표면 — 흰 배경에서 회색 블록은 무겁다. 헤어라인만 남긴다 */
:root:not([data-tone="dark"]) .c1,
:root:not([data-tone="dark"]) .c2,
:root:not([data-tone="dark"]) .c3 { background: transparent; }
:root:not([data-tone="dark"]) .grid3 .cell,
:root:not([data-tone="dark"]) .step { border-left-color: #E3E8EE; }


/* ═══════════ v2 (10장 개편) 컴포넌트 라이트 번역 ═══════════ */

/* 03 — 승자 칸: 빛 → 인디고 잉크 */
:root:not([data-tone="dark"]) .mx td.win .v { color: var(--light); }
:root:not([data-tone="dark"]) .mx td.win::before { background: var(--light); box-shadow: none; }

/* 02 — 카드: 카드로 띄우지 않고 헤어라인 프레임만.
   background-image 롱핸드를 쓴다 — `background:` 단축을 쓰면 deck.css가 걸어둔
   background-size: cover가 auto로 리셋돼 인라인 사진이 원본 배율로 렌더된다
   (얼굴이 잘리고 씬이 날아간다). 사진 위에 얹는 톤 오버라이드는 전부 롱핸드로. */
:root:not([data-tone="dark"]) .pool .card { background: #FFFFFF; }
:root:not([data-tone="dark"]) .pool .ph { background-image:
  linear-gradient(135deg, #F1F4F8, #E8EDF3 60%),
  radial-gradient(120% 90% at 30% 20%, rgba(83,58,253,.08), transparent 70%); }


/* ═══════════ v4 코멘트 반영 (2026-07-20) ═══════════ */

/* 02 — 씬 배지는 다크 글래스라 톤 오버라이드 없음(사진 위 가독성은 라이트도 동일). */

/* 03 — 레퍼런스 썸네일 (이미지 없는 칸만 그라디언트).
   위 .pool .ph와 같은 이유로 롱핸드 — 단축을 쓰면 deck.css의 background-size가 날아간다. */
:root:not([data-tone="dark"]) .brief .thumbs span {
  background-image: linear-gradient(135deg, #F1F4F8, #E8EDF3 60%); }

/* 03 — 브리프 예시 라벨 칩 (무채색으로 차분하게) */
:root:not([data-tone="dark"]) .briefs-lbl { border-color: var(--line); background: #F7F9FB; }
:root:not([data-tone="dark"]) #s06 .ops-lane-hd b { border-color: var(--line); background: #F7F9FB; }

/* 04 — 결론 행 표면: 잉크 워시로 */
:root:not([data-tone="dark"]) .mx tr:has(+ tr.pick) th,
:root:not([data-tone="dark"]) .mx tr:has(+ tr.pick) td { border-bottom-color: rgba(83,58,253,.3); }
:root:not([data-tone="dark"]) .mx tr.pick th,
:root:not([data-tone="dark"]) .mx tr.pick td { background: rgba(83,58,253,.03);
  border-top-color: rgba(83,58,253,.3); }

/* 07 — 목업: 텍스트는 잉크 토큰이 알아서 따라오고, 점·막대만 잉크/인디고로 */
:root:not([data-tone="dark"]) .report .mock { background: #FBFCFD; }
:root:not([data-tone="dark"]) .mock .m-steps i { background: #FFFFFF; border-color: #C6CFDA; color: #738095; }
:root:not([data-tone="dark"]) .mock .m-steps div.done i { background: #F0EEFF; border-color: #9585FF; color: #533AFD; }
:root:not([data-tone="dark"]) .mock .m-steps div.now i { background: #533AFD; border-color: #533AFD; color: #FFFFFF; }
:root:not([data-tone="dark"]) .mock .m-steps div:not(:last-child)::after { background: #DDE3EA; }
:root:not([data-tone="dark"]) .mock .m-steps div.done:not(:last-child)::after { background: #9585FF; }
:root:not([data-tone="dark"]) .mock .m-tiles div { background: #FFFFFF; }
:root:not([data-tone="dark"]) .mock .m-insight { border-color: rgba(83,58,253,.22); background: rgba(83,58,253,.035); }
:root:not([data-tone="dark"]) .mock .m-insight span { color: #533AFD; }

/* 06 — 글로브식 vs 비교: 오른쪽 카드·vs 마크 · 01 — 연락처 밑줄 */

:root:not([data-tone="dark"]) .briefs::after { background: #F0EDFF; border-color: rgba(83,58,253,.42);
  box-shadow: 0 0 0 5px var(--bg); color: #533AFD; }