/* 처음 셋팅 세 화면 — 껍데기(진행 카드)와 색 (J.J 2026-08-20)
 *
 * ⛔ 세 화면 «다» 실린다 (굽는 스크립트 `끝에실을것`). 2026-08-21 에 C 에서 A·B 로 넓혔다.
 * ⛔ 색 값을 여기서 «정하지 않는다». 전부 tokens.css 이름이다.
 * ⛔ 쇼피파이 캡처·미리보기 «안쪽» 색은 안 건드린다 (`.ui`·`.gshot`·`.szd-*`).
 *
 * ⚠️ 시안 <style> 이 «뒤»에 오므로, 이 파일은 body 끝에 실려 뒤에서 이긴다.
 */

/* ── 껍데기 — 사이드는 «앱 공식 메뉴» 자리다. 비워 둔다 (J.J 2026-08-21) ──────
   걸음 목록은 본문 «안» 카드로 들어간다 — 제품 편집의 「이 제품 진행」과 같은 자리·같은 모양.
   ⛔ 여기에 메뉴처럼 생긴 걸 세우지 마라. 앱에 붙으면 왼쪽이 두 줄이 된다. */
.ft-top { display: none !important; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 24px 26px 70px; }
/* ⚠️ 오른쪽에 «고정 폭» 빈 칸을 두면 화면이 좁아질 때 그 칸부터 죽어 가운데가 풀린다
   (공식 메뉴가 붙으면서 실제로 그랬다). → 빈 칸을 «늘었다 줄었다» 하게 두고,
   본문 자체를 그 칸 안에서 가운데로 民다. */
.c-cols { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 26px; align-items: start; }
.c-body { margin: 0 auto; }
/* ⚠️ 카드까지 넣어 가운데를 맞추면 «본문»이 오른쪽으로 쏠려 보인다 —
   가운데가 되어야 하는 건 손님이 읽는 «본문»이다. 그래서 오른쪽에 빈 칸을 하나 둔다. */

/* 🔴 폭을 «내용»이 정하게 두면 판마다 넓이가 달라진다 (J.J 2026-08-25).
   실측: 판2·3 은 720 인데 단계③ 은 475 · 단계④ 는 467 이었고,
   빈칸 경고(긴 문장)가 뜨는 순간 467 → 696 으로 «갑자기 넓어졌다».
   격자 칸이 내용에 맞춰 줄어들기 때문이다 — 그래서 본문 폭을 못 박는다.
   ⚠️ max-width 만으로는 «줄어드는 것»을 못 막는다. width 를 줘야 한다.
      좁은 화면에서는 max-width:100% 가 다시 줄여 준다. */
.c-body { min-width: 0; width: 720px; max-width: 100%; padding-top: 2px; }

.c-rail {
  position: sticky; top: 0; align-self: start;
  border: 1px solid var(--line-c); border-radius: 9px; background: var(--card);
  padding: 14px 14px 12px; color: var(--tx2);
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', sans-serif;
}
.c-rt { display: flex; align-items: baseline; margin: 0 0 10px; font-size: 12.5px;
  font-weight: 700; color: var(--tx); }
.c-rt .cnt { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--tx3);
  font-variant-numeric: tabular-nums; }
.c-panes { list-style: none; margin: 0; padding: 0; }
.c-panes li { display: flex; gap: 9px; align-items: flex-start; padding: 7px 2px;
  font-size: 13px; line-height: 1.5; color: var(--tx3); }
.c-panes li .dot { width: 7px; height: 7px; margin-top: 6px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--line-c); }
.c-panes li.done { color: var(--tx2); }
.c-panes li.done .dot { background: var(--done-ln); border-color: var(--done-ln); }
/* ⚠️ 밝은 민트(--done)는 라임(--now) 옆에서 «둘 다 밝아» 구분이 죽는다.
   그래서 같은 초록 가족의 «선» 값(--done-ln · 다크그린)을 면으로 쓴다 — 새 색을 짓지 않았다. */
.c-panes li.cur { color: var(--tx); font-weight: 700; }
.c-panes li.cur .dot { background: var(--now-solid); border-color: var(--now-solid); }

/* ── 판 성격을 «배지 색»으로 — 알아두기 / 고르기 / 따라 하기 ─────────────
   배지는 tokens.css 의 `.chip6` 한 벌을 그대로 쓴다. 모양은 하나, 갈리는 건 색뿐이다. */
/* ⚠️ inline-block 이어야 한다 (J.J 2026-08-24 실측) — 제목 «줄 안»에 인라인으로 서는 필(B)은
   세로 패딩이 상자 높이에 안 들어가 납작해진다. 붙는 자리와 무관하게 같은 두께로 세운다. */
.sec[data-kind] .step { border: 1px solid transparent; border-radius: 999px; display: inline-block;
  padding: 3px 10px; font-size: 11.5px; font-weight: 700; line-height: 1.62; }
.sec[data-kind="know"]  .step { color: var(--read);  background: var(--read-bg);  border-color: var(--read-ln); }
.sec[data-kind="pick"]  .step { color: var(--now);   background: var(--now-bg);   border-color: var(--now-ln); }
.sec[data-kind="guide"] .step { color: var(--guide); background: var(--guide-bg); border-color: var(--guide-ln); }
/* 🆕 «먼저 알아두기» 같은 읽기 배지(.next)는 판 성격과 «무관하게» 파랑이다 (J.J 2026-08-24 「3개 다」).
   개념과 고르기가 한 판에 사는 C 에선 판이 pick 이라 위 줄이 이 배지까지 라임으로 덮었다 — 실측으로 잡음. */
.sec[data-kind] .step.next { color: var(--read); background: var(--read-bg); border-color: var(--read-ln); }

/* ⛔ 카드 테두리에 상태색을 쓰지 않는다 (색 정본이 못박은 것) — 판 테두리는 무채색 하나다 */
.sec, .sec.guide, .sec.making, .sec.needsfill {
  background: var(--card); border-color: var(--line-c) !important;
}

/* ── 게이지 — 지금 칸만 «채운다». 나머지는 옅은 면 ── */
.fs-lab { color: var(--now); }
.fs-lab i { color: var(--tx3); }
.fs-seg { background: var(--chip-c); box-shadow: inset 0 0 0 1px var(--line-c); }
.fs-seg.done { background: var(--now-bg); box-shadow: inset 0 0 0 1px var(--now-ln); }
.fs-seg.cur { background: var(--now-solid); box-shadow: none; }

/* ── 이동줄 — 「지금 할 것」 하나만 채운다 ── */
.fs-next { background: var(--now-solid); color: var(--now-ink); }
.fs-back { color: var(--tx2); border-color: var(--line-c); }
.fs-block { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-ln); }

/* ── ❔ 접는 라벨 (qbox) — 가이드다 ── */
.qbox { border-color: var(--guide-ln) !important; }
.q-sum { color: var(--guide) !important; }

/* ── 가이드 걸음 ─────────────────────────────────────────────────────────
   ⛔ 끝난 걸음의 «번호를 ✓ 로 바꾸지 않는다» (색 정본 규칙 ①).
      시안은 `font-size:0` + `::after{content:'✓'}` 로 번호를 지웠다 — 되돌린다. */
.gstep.done .gnum { font-size: 12px !important; color: var(--done);
  background: var(--done-bg); border-color: var(--done-ln); }
.gstep.done .gnum::after { content: none !important; }
.gstep.key .gnum { color: var(--now); background: var(--now-bg); border-color: var(--now-ln); }
/* 걸음 번호 알 — 시안이 남색을 박아 뒀다. 라이트에서 어두운 알이 뜬다 → 「따라 하기」 금색으로 */
.gnum { color: var(--guide) !important; background: var(--guide-bg) !important;
  border: 1px solid var(--guide-ln) !important; }
.gstep.done .gnum { color: var(--done) !important; background: var(--done-bg) !important;
  border-color: var(--done-ln) !important; }
.gstep.key .gnum { color: var(--now) !important; background: var(--now-bg) !important;
  border-color: var(--now-ln) !important; }
.golink { background: var(--card); border-color: var(--line-c); }
.golink b, .golink .gol-t { color: var(--tx); }
.flowintro { background: var(--guide-bg); border-color: var(--guide-ln); color: var(--tx2); }
.flowintro b { color: var(--guide); }
.gstep.open .ghead, .ghead:hover { background: var(--chip-c); }
.gstep, .gstep.done, .gstep.open { border-color: var(--line-c) !important; background: var(--card); }
.gdone { color: var(--now); background: var(--now-bg); border-color: var(--now-ln); }
.gdone:hover { background: var(--now-bg); color: var(--now); }
.gtitle b { color: var(--tx); }
.gbody p, .gbody { color: var(--tx2); }
.gclear { color: var(--done); background: var(--done-bg); border-color: var(--done-ln); }
.gclear b { color: var(--done); }
.gbar { background: var(--chip-c); }
.gbar i { background: var(--now-solid); }
.gptext b { color: var(--now); }
.ghint { background: var(--chip-c); color: var(--tx2); }

/* ── 미리보기 틀 — 「손님이 보는 화면」 ──────────────────────────────────
   딱지는 상자 «밖»으로 걸치고 뒤에 바탕색 테를 둘러 테두리를 끊는다.
   ⛔ 채우지 않는다 — 화면에서 채워지는 것은 «지금 단계» 하나뿐이다.
   ⛔ 틀 «안쪽»(손님 화면 흉내)은 색을 안 건드린다. */
.c-pvw { position: relative; margin: 22px 0 6px; max-width: 470px;
  border: 1px solid var(--line-c); border-radius: 10px; }
.c-pvw::before { content: "미리보기"; position: absolute; top: -11px; left: 15px; z-index: 2;
  height: 20px; line-height: 20px; padding: 0 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--pv); background: var(--pv-bg); border: 1px solid var(--pv-ln);
  box-shadow: 0 0 0 4px var(--page); }
.c-pvw .c-pvbar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: 9px 9px 0 0; background: var(--pv-bar); border-bottom: 1px solid var(--line-c); }
.c-pvw .c-pvbar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.c-pvw .c-pvbar span { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #c9ced5; }
.c-pvw .c-pvin { padding: 14px; border-radius: 0 0 9px 9px; }
/* 시연은 손님 스토어 화면이라 «밝다» — 다크에서도 밝게 둔다(그게 진짜 색이다) */
.c-pvw .c-pvin { background: #f2f4f7; }
.c-pvw .szd-cap, .szd-cap { color: var(--tx3); }

@media (max-width: 900px) {
  /* 🔴 옛 이름을 리셋하고 있었다 (J.J 2026-08-24 실측 — 「왜 이렇게 쪼끄매졌어?」).
     격자 이름이 .c-cols 인데 여기만 .c-shell 로 남아, 레일은 숨는데 «빈 216px 기둥»이
     그대로 남아 본문이 절반 폭으로 짜부라졌다. 가리키던 것이 없어진 규칙. */
  .c-cols { grid-template-columns: 1fr; }
  .c-rail { display: none; }
}

/* ── 「첫째·둘째」를 «구획»으로 — J.J 시안 B(`처음셋팅-라벨안-비교.html`) 값 그대로 ──
   세로선이 이유 하나를 묶고, 순서는 «채운 번호»가 말한다.
   ⚠️ 시안의 `.why2-n` 은 «라임 알약»이다(면 --now-bg · 선 --now-ln · 여백 3/11 · 모서리 20).
      글자만 감추면 그 알약이 «형광 겉테»로 남는다 — 배경·테·여백을 같이 걷는다. */
.concept { counter-reset: why2; }
.why2 { position: relative; counter-increment: why2;
  padding-left: 16px; margin: 22px 0 0; border: 0; background: none; }
.why2::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 2px;
  width: 2px; border-radius: 2px; background: var(--read-ln); }
.why2-h { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; }
.why2-h b { font-size: 16px; font-weight: 700; color: var(--tx); letter-spacing: -.01em; }
.why2-n { font-size: 0 !important; background: none !important; border: 0 !important;
  padding: 0 !important; border-radius: 0 !important; }
.why2-n::before { content: counter(why2);
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 21px; height: 21px; border-radius: 50%;
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--read-ink); background: var(--read); }
.why2 p { margin: 0 0 8px; color: var(--tx2); font-size: 14px; line-height: 1.8; }

/* ── 「? 사이즈차트는 어떤 걸 사용하나요?」 — 가이드 제목 (J.J 시안 B) ─────
   ⚠️ 이 줄은 원래 «액션 타이틀 그라데이션»이었다. 그라데이션은 글자를 투명하게 칠하므로
      되돌릴 때 -webkit-text-fill-color 까지 같이 풀어야 한다. 색만 덮으면 글자가 안 보인다. */
/* ── 곁다리 도움말 — «읽는 흐름»이 아니다 (J.J 2026-08-21) ────────────────
   본문은 이미 «파랑 세로선 = 읽을 것»을 쓰고 있다. 여기는 그 짝으로 «금색 세로선 = 도움말».
   손님은 선 색 하나만 배우면 두 가지를 가른다. 상자를 새로 만들지 않는다. */
.askbox { border-top: 0 !important; margin: 24px 0 0; padding: 14px 0 12px 16px;
  border-left: 2px solid var(--guide-ln); background: none; }
.ask-q { background: none !important; -webkit-text-fill-color: currentColor !important;
  color: var(--guide) !important; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.ask-q::before { content: "? "; font-weight: 800; }
.ask-a { font-size: 14px; color: var(--tx2); margin: 0 0 8px; }
.ask-a b { color: var(--tx); }
.glo-sum { font-size: 13px !important; }

/* ── 이동줄 — 단추가 너무 컸다 (J.J) ───────────────────────────────────── */
.fs-nav { flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 10px; margin: 26px 0 4px; }
.fs-next, .fs-hello-ok { min-width: 0; padding: 0 20px; height: 40px; font-size: 14px; font-weight: 700;
  border-radius: 10px; }
.fs-back { height: 40px; padding: 0 16px; border-radius: 10px; }

/* ══ 「틀」 다섯 가지 — 목업 오른쪽대로 (J.J 2026-08-20) ═══════════════════
   색은 한 값도 안 바꾼다. 상자·폭·머리·축·눈금만 손본다. */

/* ① 읽는 판은 «상자»를 걷는다 — 상자가 보이면 「내가 손댈 곳」이라는 뜻이 된다.
      상자는 고르기·따라 하기에만 남는다. */
.sec[data-kind="know"] {
  background: none !important; border: 0 !important; padding: 0 !important;
  border-radius: 0 !important;
}
.sec[data-kind="know"] > .sech { margin-bottom: 4px; }
.sec[data-kind="know"] .sech h2 { font-size: 21px; letter-spacing: -.015em; }

/* ② 본문 폭 — 한 줄 102자는 눈이 줄을 잃는다. 68자쯤으로 */

.why2 p, .sec p, .lead, .head .sub, .concept > p { max-width: 640px; }

/* ③ 머리를 네 겹 → 두 겹. 레일이 이미 「어디까지 왔나」를 말한다 */
.head .crumb, .head h1 { display: none !important; }
.head { margin-bottom: 10px; }
/* 진행은 «카드»가 말한다 — 위쪽 게이지는 감춘다. 같은 말을 두 곳에서 하지 않는다 (J.J 2026-08-21) */
.fs-prog { display: none !important; }

/* ④ 축은 왼쪽 하나 */
.cta, .foot, .fs-nav, .pickhint { text-align: left !important; }
.cta { display: flex; justify-content: flex-start; }
.fs-nav { align-items: center; }

/* ⑤ 눈금 — 모서리는 7 · 9 · 999 셋 */
.sec, .gstep, .c-pvw, .golink, .opt, .fs-hello-card { border-radius: 9px !important; }
.fs-next, .fs-back, .gdone, .b, .btn { border-radius: 7px !important; }
.step, .lab, .chip6 { border-radius: 999px !important; }

/* ── 공식 앱 메뉴 | 진행 카드 | 내용 ─────────────────────────────────────
   ⛔ 메뉴는 «감추지 않는다». 처음 셋팅도 앱 안이다 (J.J 2026-08-21).
   ⛔ 메뉴 생김새는 shell.css 가 정한다 — 여기서 다시 그리지 않는다. 자리만 잡아 준다. */
.c-app { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; min-height: 100vh; }
.c-side { position: sticky; top: 0; align-self: start; height: 100vh;
  border-right: 1px solid var(--line-c); background: var(--card);
  display: flex; align-items: stretch; }
.c-side > aside.side { width: 232px; overflow: auto; }
.c-side-toggle { position: absolute; right: -11px; top: 18px; z-index: 5;
  width: 22px; height: 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-c); background: var(--card); color: var(--tx3);
  font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.c-side-toggle:hover { color: var(--tx); }
.c-side-toggle .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* 접으면 메뉴 칸이 사라진다 — 단추는 남는다(다시 펼칠 길) */
.c-app.side-off .c-side > aside.side { display: none; }
.c-app.side-off .c-side { width: 12px; }
@media (max-width: 980px) { .c-side { display: none; } .c-app { grid-template-columns: 1fr; } }

/* ══ 코어 느낌 «깊이» — 색을 칠하지 않고 겹을 쌓는다 (J.J 2026-08-21 · 포털홈 판떼기) ══
   홈 판떼기가 검정 위에서도 보였던 까닭은 색이 아니라 겹 넷이었다:
     ① 세로 그라데이션 ② 헤어라인 테두리 ③ 안쪽 윗선(빛이 위에서 온다) ④ 바닥 그림자
   ⚠️ ①만 있으면 «면»이고 ③이 있어야 «물건»이 된다.
   ⚠️ 라이트에선 «흰 겹»이 안 보인다 — 겹을 뒤집는다(검정 4% 그라데이션 + 안쪽 윗선은 흰색).
   ⛔ 색은 한 값도 안 바꾼다. 정해진 토큰 그대로다. */
.c-rail, .opt, .c-pvw, .gstep {
  background: linear-gradient(180deg, rgba(0,0,0,.030), rgba(0,0,0,.006)), var(--card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 22px -18px rgba(0,0,0,.35);
}
/* ⛔ 여기서 prefers-color-scheme 을 쓰지 않는다 — 손님이 고른 것이 OS 를 이겨야 한다.
   판은 shell-theme.js 가 «<html>» 에 건다(2026-08-21 에 껍데기가 가져갔다). 여기서는
   `[data-theme=…]` 을 «자손 선택자»로만 읽는다 — 그릇에 다시 붙이지 않는다. */
[data-theme="dark"] .c-rail, [data-theme="dark"] .opt,
[data-theme="dark"] .c-pvw, [data-theme="dark"] .gstep {
  background: linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.014)), var(--card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 34px -24px rgba(0,0,0,.9);
}
.opt { transition: transform .22s, box-shadow .22s, border-color .22s; }
.opt:hover { transform: translateY(-2px); }

/* ── 새 디자인의 «흔적»을 셋으로 나눈다 (J.J 2026-08-21) ────────────────────
   ⛔ 도는 빛(conic 회전)은 걷었다 — 보조 정보 버튼 하나에만 특수한 빛이 가서
      «눌러야 할 것»(셋팅 시작하기)보다 중요해 보였다.
   ⭕ 대신 아주 약한 발광을 «지금 걸음 · 단계 표시 · 으뜸 단추» 셋에 나눠 준다.
   ⛔ 테두리마다 빛을 넣지 않는다. 본문은 읽는 화면이지 쇼케이스가 아니다. */

/* ① 진행 카드 — 테두리는 중립 그대로. «지금 걸음»의 점과 1/3 에만 라임 광 */
.c-panes li.cur .dot { box-shadow: 0 0 7px 1px color-mix(in srgb, var(--now) 55%, transparent); }
.c-rt .cnt { color: var(--now); text-shadow: 0 0 9px color-mix(in srgb, var(--now) 45%, transparent); }

/* ② 단계 표시 — 배지와 번호 원에 «블루 계열» 은은한 발광
   ⛔ 「먼저 알아두기」류 필(.next)은 뺀다 (J.J 2026-08-24) — C(무광)가 «가장 알맞은» 기준이라
      세 화면의 이 필은 전부 광 없이 같은 모양으로 선다. */
.sec[data-kind="know"] .step:not(.next) { box-shadow: 0 0 10px -2px color-mix(in srgb, var(--read) 42%, transparent); }
.why2-n::before { box-shadow: 0 0 8px -1px color-mix(in srgb, var(--read) 50%, transparent); }

/* ③ 으뜸 단추 — «아웃라인 + 테두리를 흘러가는 빛» (홈 「열기」 단추와 같은 방법 · J.J 2026-08-21)
   면을 채우지 않는다. 테두리를 도는 빛이 «지금 누를 것»이라고 말한다.
   ⭐ 도는 빛은 이제 화면에 «이것 하나»다 — 둘이 되면 어느 쪽이 지금인지 사라진다.
   ⚠️ 빛은 요소 «위»에 얹히므로 단추 자체가 가려지면 안 된다 — 마스크로 테두리 1.1px 만 남긴다. */
.fs-next, .fs-hello-ok { background: transparent !important; color: var(--tx) !important;
  border: 1px solid color-mix(in srgb, var(--now) 26%, transparent) !important;
  box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--now) 55%, transparent); }
.fs-next:hover, .fs-hello-ok:hover { background: color-mix(in srgb, var(--now) 10%, transparent) !important;
  filter: none;
  color: var(--tx) !important; }
/* 🔴 포커스는 «링»이 아니라 «테두리»로 말한다 (J.J 2026-08-22: 「클릭전 라운드테두리가 너무두껍다」)
   첫 인사 팝업은 열 때 focus() 를 주기 때문에 «누르기도 전에» 포커스 표시가 켜진 채로 뜬다.
   그 위에 링을 얹으면 테두리(1px)와 링이 겹쳐 두 겹이 되고, 알약이라 더 두꺼워 보인다.
   → 링은 안 그리고 «있던 테두리»만 26% → 100% 로 진하게 한다. 두께는 1px 그대로다.
   ⭕ 앱이 이미 쓰는 방법이다 — 테두리를 가진 칸은 링 대신 테두리를 진하게 한다
      (styles.css `.nm-in:focus` · `.tb-ta:focus` 가 그렇다). 두께를 늘리는 자리가 아니다. */
.fs-next:focus, .fs-hello-ok:focus { outline: none; }
.fs-next:focus-visible, .fs-hello-ok:focus-visible {
  outline: none; border-color: var(--now) !important; }
.gw { position: relative; display: inline-flex; border-radius: 9999px; isolation: isolate; }
.gw > * { position: relative; z-index: 2; border-radius: 9999px !important; }
.gwR { position: absolute; inset: 0; z-index: 3; border-radius: 9999px; padding: 1.1px; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box; -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-clip: content-box, border-box; mask-composite: exclude; }
/* 도는 색은 «우리 행동색»(라임/라이트에선 파랑)이다 — 흰빛만 쓰면 앱 색과 남남이 된다 */
.gwR::before { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; aspect-ratio: 1/1;
  background: conic-gradient(var(--now) 0deg, color-mix(in srgb, var(--now) 40%, transparent) 44deg,
    transparent 94deg, transparent 266deg, color-mix(in srgb, var(--now) 40%, transparent) 316deg, var(--now) 360deg);
  animation: gwTurn 3.4s linear infinite; }
@keyframes gwTurn { 0% { transform: translate(-50%,-50%) rotate(0) } 100% { transform: translate(-50%,-50%) rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .gwR::before { animation: none } }

/* ④ 아래쪽 «셋이 다 단추»라 무게가 같았다 — 단추는 하나만 남긴다 (J.J 2026-08-21)
      가이드 = 읽을 것(접는 줄) · 셋팅 시작하기 = 할 것(단추) · 건너뛰기 = 빠지는 길(글)
      셋을 다 알약으로 만들면 «무엇을 눌러야 하는지»가 사라진다. */
.glo-sum { box-shadow: none !important; background: none !important; border: 0 !important;
  padding: 4px 0 !important; border-radius: 0 !important;
  color: var(--guide) !important; font-size: 13.5px; font-weight: 600; }
.glo-sum::before { content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--guide); opacity: .8; }
.glo-sum:hover { color: #f4d47a !important; }

/* 이동줄 — 「셋팅 시작하기」와 「이미 셋팅했어요」는 «같은 축»이다 (J.J 2026-08-21).
   첫 판에서 손님은 둘 중 하나를 고른다 → 모양을 똑같이 두고 «빛»만 다르게 한다.
   ⚠️ 순서는 «으뜸이 왼쪽» — 여긴 대화상자가 아니라 페이지다.
      (대화상자면 취소 왼쪽·확인 오른쪽이 맞지만, 페이지는 읽는 순서대로 할 것이 먼저다)
   ⛔ 빛은 으뜸 하나뿐 — 둘 다 빛나면 «고르라»가 아니라 «둘 다 급하다»가 된다. */
.fs-nav { gap: 12px; }
.cta { display: inline-flex; }
.cta .btn, .cta button, .btn.ghost, #skipBtn {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px !important;
  border-radius: 9999px !important; font-size: 14px !important; font-weight: 600;
  background: none !important; border: 1px solid var(--line-c) !important;
  box-shadow: none !important; color: var(--tx2) !important; text-decoration: none !important; }
.cta .btn:hover, .cta button:hover, #skipBtn:hover {
  color: var(--tx) !important; border-color: var(--line2) !important;
  background: var(--chip-c) !important; }

/* 「셋팅 시작하기」·「글로사이즈 앱을 알고 싶다면 클릭」 — 알약으로 */
.fs-next, .fs-back, .glo-sum, .q-sum, .fs-hello-ok { border-radius: 9999px !important; }
/* 「다음」과 「← 이전」이 알약·네모로 갈려 있어 «한 벌»로 안 보였다 (J.J 2026-08-21) */
.fs-back { height: 40px; padding: 0 18px; font-size: 14px; }
.glo-sum, .q-sum { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px;
  border: 1px solid var(--guide-ln); background: var(--guide-bg); cursor: pointer; }

/* summary 는 감싸지 않고 «그 안»에 빛을 넣는다 (details 밖으로 꺼내면 글이 사라진다) */
.gw-self { position: relative; isolation: isolate; overflow: hidden; }
.gw-self > .gwR { border-radius: 9999px; }

/* 도는 빛을 «끄는» 세 자리 — 중간 걸음 · 화면 밖 · 숨은 탭 */
.gw.gw-off > .gwR { display: none; }
.fs-next.gw-idle ~ .gwR::before,
html.gw-hidden .gwR::before { animation-play-state: paused; }

/* ⑤ 「이 화면 진행」에 막대를 준다 — 제품 편집의 「이 제품 진행」과 같은 모양 (J.J 2026-08-21) */
.c-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.c-bar .t { flex: 1; height: 6px; border-radius: 999px; background: var(--chip-c); overflow: hidden; }
.c-bar .t i { display: block; height: 100%; border-radius: 999px; background: var(--now-solid);
  transition: width .3s ease; box-shadow: 0 0 8px -1px color-mix(in srgb, var(--now) 55%, transparent); }
.c-bar .n { font-size: 12.5px; font-weight: 700; color: var(--tx); font-variant-numeric: tabular-nums; }
.c-bar .n i { font-style: normal; color: var(--tx3); font-weight: 600; }
.c-rt .cnt { display: none; }

/* 이동줄 — 으뜸 단추와 «빠지는 길»을 한 줄에, 사이는 넉넉히 (붙어 있으면 잘못 눌린다) */
.fs-nav .cta-inline { margin: 0; display: inline-flex; align-items: center; }
/* ⚠️ 「못 넘어가는 까닭」 줄(.fs-block)이 같은 줄에 끼어 단추를 아래로 밀어냈다 —
   그 줄은 «단추 위»에 통째로 눕는다. 나머지 셋만 한 줄이다. */
.fs-nav { flex-wrap: wrap; align-items: center; }
.fs-nav > .fs-block { flex: 0 0 100%; order: -1; margin-bottom: 4px; }
.fs-nav > .gw, .fs-nav > .fs-back, .fs-nav > .cta { flex: none; }
/* 손님에게 주는 «약속» — 진행 카드 아래에 둔다. 본문 흐름을 막지 않는다.
   🆕 구분선 색은 J.J 지정값 그대로 (2026-08-23 3차: 「그 위에 디바이더 색을 #bfcee0 으로 줘」).
      라이트에서도 흰 바탕 위 옅은 청회 선이라 값 하나로 간다 — 임의로 바꾸지 마라. */
.c-rail .foot-in-rail { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #bfcee0;
  font-size: 12px; line-height: 1.6; color: var(--tx3); text-align: left; }
.c-rail .foot-in-rail b { color: var(--tx2); font-weight: 600; }

/* 고른 카드의 테두리가 «너무 굵고 셌다» (J.J 2026-08-21)
   시안이 2px 라임을 그대로 쓰고 있었다 — 고른 것은 «표시»지 «경보»가 아니다.
   → 1px 로 얇게 + 면을 아주 옅게 + 광은 은은하게. 「✓ 선택됨」 표가 진짜 신호다. */
/* ⚠️ 시안이 쓰는 클래스는 `.selected` 다 — `.on` 만 잡으면 색이 그대로 세게 남는다 */
.opt.pick.selected, .opt.pick.on, .opt.on {
  border-width: 1px !important;
  border-color: color-mix(in srgb, var(--now) 45%, transparent) !important;
  background: color-mix(in srgb, var(--now) 7%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--now) 16%, transparent),
              0 8px 20px -16px color-mix(in srgb, var(--now) 40%, transparent) !important;
}
.opt.pick { border-width: 1px !important; }

/* 🔴 진행 카드와 본문의 «시작 줄»이 28px 어긋나 있었다 (J.J 2026-08-21)
   까닭 — breadcrumb·제목을 감춰 `.head` 는 «높이 0」인데 아래 여백 10px 이 남았고,
   판(`.sec`)이 위 여백 26px 을 또 갖고 있었다. 보이지 않는 것이 자리를 먹고 있던 것이다.
   ⚠️ 판은 «한 번에 하나»만 보이므로 판끼리 벌릴 여백이 필요 없다. */
.c-body { padding-top: 0; }
.head { margin: 0 !important; }
.c-body > .sec { margin-top: 0 !important; }
/* 🔴 같은 병 2차 (J.J 2026-08-23 3차: 「여전히 위에 여백 있어, 안 맞잖아」) —
   A 의 단계 ②~ 판과 C 의 연결 판은 `.c-body` «직속»이 아니라 #tabFlow/#useFlow «안»이라
   위 규칙을 비껴갔다. 그 안의 판·곁(건너뜀 안내·연결 띠)도 같이 0 으로 세운다.
   ⚠️ 곁이 판 «위»에 설 때(건너뜀 안내·연결 띠)는 그것이 첫 줄이라, 위 여백 대신
      아래 여백으로 판과의 간격을 만든다 — 안 그러면 곁이 뜬 판만 또 아래서 시작한다. */
.c-body > #tabFlow > .sec, .c-body > #useFlow > .sec { margin-top: 0 !important; }
.c-body > #tabFlow > .skipnote { margin-top: 0 !important; margin-bottom: 14px; }
.c-body > #useFlow > .flowintro { margin-top: 0 !important; margin-bottom: 14px; }

/* 고른 카드에 «광»을 안 준다 — 표시는 테두리 하나면 된다 (J.J) */
.opt.pick.selected, .opt.pick.on, .opt.on { box-shadow: none !important; }

/* 가이드 걸음 «안»의 번호 1·2·3·4 — 라임이 아니라 «파랑»이다 (J.J 2026-08-21)
   번호는 «순서»를 말하는 것이라 읽는 구획의 번호(.why2-n)와 같은 물건이다.
   라임은 「지금 할 것」이라 번호에 쓰면 뜻이 겹친다 — 화면에서 라임이 두 뜻을 갖게 된다. */
.gbody .ways > li::before {
  background: var(--read) !important; color: var(--read-ink) !important;
  box-shadow: 0 0 8px -1px color-mix(in srgb, var(--read) 50%, transparent);
}

/* ⚠️ 광(글로우)은 «어두운 바탕에서만» 산다 — 밝은 바탕에선 번짐·때처럼 읽힌다 (J.J 2026-08-21).
   라이트에서는 전부 끈다. 다크에서만 남긴다. */
/* ⛔ :is() 로 묶지 마라 — «::before 는 :is() 안에 못 들어간다»(무효라 통째로 버려진다).
      게다가 목록 안에 `{ … }` 한 덩이가 섞여 들어가 있어서 이 규칙이 죽어 있었다. */
[data-theme="light"] .why2-n::before,
[data-theme="light"] .gbody .ways > li::before,
[data-theme="light"] .sec[data-kind="know"] .step,
[data-theme="light"] .c-panes li.cur .dot,
[data-theme="light"] .c-bar .t i,
[data-theme="light"] .fs-next,
[data-theme="light"] .c-rt .cnt { text-shadow: none !important; box-shadow: none !important; }

/* ══ 본문 그릇 — 손님이 라이트/다크를 고른다 (총지휘 2026-08-21) ═══════════
   ⛔ 두 줄이다. background 만 주면 대비 1.04 다 — color 는 body 에서 물려받아 «안 따라온다».
   ⚠️ /first/* 는 styles.css 를 안 싣는다 → --page·--tx(tokens.css)를 먼저, --bg·--text 를 되돌릴 값으로.
   ⚠️ `[data-theme]` 을 붙이지 않는다 — 판은 이제 <html> 에 있고 그릇엔 없다. 붙이면 «안 걸린다». */
.c-cols {
  background: var(--page, var(--bg));
  color: var(--tx, var(--text));
}
/* ⛔ 판 고르는 단추는 «여기 없다» — 사이드바 하단 ☀/☾ 한 자리뿐이다 (총지휘 2026-08-21).
      `.c-theme` 규칙 셋은 그때 같이 걷었다. 다시 만들지 마라 — 스위치가 넷이 되면
      손님이 «어디서 바꿨더라»를 찾는다. */
.c-rt { display: flex; align-items: center; gap: 8px; }

/* 🔴 「이걸 고르면 → 연결하는 방법을…」 줄이 라이트에서 «안 읽혔다» (J.J 2026-08-21)
   시안이 글자에 `#cdd8b6`(연한 올리브)를 박아 뒀다 — 어두운 면 위에서만 사는 색이다.
   라이트 칸(#e8effa) 위에서 대비 **1.3**. 다크로만 보면 완전히 멀쩡해 보이는 병이다.
   → 글자는 --tx2, 강조만 --now. 면·테두리는 안 건드린다. */
.outcome.go { color: var(--tx2) !important; }
.outcome.go b { color: var(--now) !important; }

/* 🔴 옆 카드(「한 공간」)의 같은 줄도 «라이트에서 안 읽혔다» (2026-08-22 실측)
   시안이 면에 `#20242c` 를 «박아» 뒀다 — 어두운 값이라 라이트 본문에서도 그대로 어두운 띠가 되고,
   글자는 --mut(라이트 #343A43)라 «어두운 면 위 어두운 글자» = 대비 **1.36**. 글자가 사라진다.
   ⚠️ 옆 카드(.outcome.go)는 08-21 에 «글자»를 고쳐 9.91 인데, 이 카드는 «면»이 원인이라 안 걸렸다.
      ㉜ 와 같은 병이다 — 다크로만 보면 둘 다 멀쩡해 보인다.
   → 뜻(조용한 회색 면)은 그대로 두고 토큰으로 바꾼다. --chip-c 는 다크 #262A30 · 라이트 #F1F2F4. */
.outcome.pass { background: var(--chip-c) !important; }

/* 🔴 시안 별칭이 «테마를 안 따라간다» (2026-08-21 실측)
   굽는 스크립트가 `:root` 에 `--lime-tint: var(--now-bg)` 처럼 별칭을 깔았는데,
   var() 는 «정의된 자리»에서 풀린다 — :root 에서 풀리니 라이트 값이 «굳어» 버린다.
   그래서 그릇을 다크로 바꿔도 면만 라이트로 남았다(글자만 바뀌어 대비 1.4).
   → 그릇 안에서 별칭을 «다시» 깐다. 그러면 그 자리의 토큰으로 다시 풀린다.
   ⚠️ 판이 <html>(=:root) 로 간 뒤로는 :root 별칭도 제 값으로 풀린다 — 그래도 이 블록은
      남긴다(값이 같고, 판이 다시 그릇으로 내려와도 안 깨진다). */
.c-cols {
  --bg: var(--page); --card2: var(--chip-c); --line: var(--line-s); --line2: var(--line-c);
  --mut: var(--tx2); --dim: var(--tx3);
  --lime: var(--now); --lime-ink: var(--now-ink); --lime-tint: var(--now-bg); --lime-line: var(--now-ln);
  --bar: var(--line-c); --img: var(--chip-c);
}

/* 「다 했어요」 — 걸음마다 나오니 «한 단 낮춘다» (J.J 2026-08-21)
   이 판의 으뜸은 이동줄의 「셋팅 완료」다. 걸음 단추가 그만큼 세면 셋이 겨룬다. */
.gdone { height: 32px !important; padding: 0 14px !important; font-size: 13px !important;
  border-radius: 9999px !important; border: 1px solid var(--now-ln) !important;
  background: none !important; color: var(--now) !important; box-shadow: none !important; }
.gdone:hover { background: var(--now-bg) !important; }

/* 「? 앱이 안 보인다면?」 — 곁다리 도움말이다. 상자·점선을 걷고 «금색 세로선»으로 통일한다.
   (본문에서 이미 파랑 세로선 = 읽을 것 / 금색 세로선 = 곁다리 로 갈라 뒀다) */
.qbox { border: 0 !important; border-left: 2px solid var(--guide-ln) !important;
  border-radius: 0 !important; background: none !important;
  padding: 6px 0 6px 14px !important; margin: 12px 0 !important; }
.q-sum { display: inline-flex; align-items: center; gap: 6px;
  background: none !important; border: 0 !important; padding: 0 !important;
  border-radius: 0 !important; font-size: 13px !important; font-weight: 700;
  color: var(--guide) !important; box-shadow: none !important; }
.q-sum:hover { color: #f4d47a !important; }

/* ══ A 판2 «고르기 카드» — 그림은 그대로, 「크게 보기」 단추만 얹는다 (J.J 2026-08-22) ══
   🔴 잰 것: 본문이 720px «상한»이라 카드가 353px 씩이고, 1100×614 그림이 **원본의 29%**
      (319×178)로 줄어 아코디언 줄이 회색 띠로만 보였다. 창을 넓혀도 본문은 720 그대로다.
   ⛔ 그림을 «자르지» 않는다 — J.J: 「이미지는 이대로 가야되, 그래야 실제 상품페이지처럼 보이니까」
   ⭕ 대신 단추를 얹어 «누르면» 원본으로 뜬다(확대는 first-steps.js 의 캡처확대 한 벌을 그대로 쓴다).
   ⚠️ 단추는 «티나야» 한다 — 안 보이면 그림이 커질 수 있다는 걸 손님이 모른다. 그래서
      면을 깔고 테두리를 준다. 라임은 안 쓴다 — 라임은 「지금 손댈 곳」이라 뜻이 겹친다. */
.two .opt .cardshot { position: relative; }
.two .opt .cardshot .shot-big {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1;
  padding: 7px 11px; border-radius: 999px; cursor: pointer;
  background: var(--pv-bar); color: #fff;
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 3px 10px -3px rgba(0,0,0,.55);
}
.two .opt .cardshot .shot-big:hover { background: #000; border-color: rgba(255,255,255,.6); }
.two .opt .cardshot .shot-big:focus-visible { outline: 2px solid var(--now); outline-offset: 2px; }

/* ══ 「사용」 같은 단추의 테두리를 «실버»로 (J.J 2026-08-22) ═════════════════
   J.J: 「사용, 같은 버튼이 라운드 테두리가 너무 약하다보니까 티가 안나」
   잰 것(브라우저 실측 · 줄 면은 다크 #262A30 · 라이트 #F1F2F4):
        다크    옛 --line-c #31353b → 대비 **1.17**   ·  새 --wait-solid #8A929D → **4.59**
        라이트  옛 --line-c #E4E6E9 → 대비 **1.12**   ·  새 --wait-solid #8A929D → **2.81**
   ⛔ 값을 새로 짓지 않았다. 사전에 이미 있는 «두 판이 같은 값인» 무채색 --wait-solid 다
      (라이트·다크가 #8A929D 로 같아서 한 줄이면 두 판이 다 된다).
   ⛔ 호버(라임)·켜짐(라임 면)·삭제(붉은) 규칙은 «안 건드린다» — 쉬는 모습만 바꾼다. */
.tabopt .usebtn { border-color: var(--wait-solid); }

/* ══ A·B 색상 확대 — 시안이 «박아둔 색»을 사전 낱말로 (J.J 2026-08-22) ═════════
   C 는 08-21 에 돌렸고 A·B 는 «껍데기»만 가 있었다. 라이브를 라이트로 훑어 «글자 대비 3 미만»을
   세니 C 0 · A 10 · B 16 자리였다 — 전부 다크에서만 사는 값이 라이트에 그대로 남은 것(㉜).
   ⛔ 글·순서·판 개수·고르는 동작·틀은 한 줄도 안 건드린다. «색 이름»만 바꾼다.
   ⛔ 값을 새로 짓지 않는다 — 전부 tokens.css 에 이미 있는 낱말이다.
   ⚠️ 시안 <style> 이 이 파일보다 «앞»이라 같은 명시도면 여기가 이기지만,
      시안 쪽이 더 좁은 선택자를 쓴 자리가 있어 !important 로 못 박는다. */

/* ── A·B 공통 · 「잠깐 배우고 가는 칸」 ────────────────────────────────────
   `background:#171a24` 가 박혀 있어 라이트에서도 «어두운 판»으로 남았다.
   그 안 글자는 --tx(라이트에선 검정)를 물려받아 대비 **1.02** — 글이 통째로 사라진다.
   B 에서만 13 자리가 이 한 칸 때문이었다. A 에도 같은 칸이 둘 있다. */
.learn { background: var(--card) !important; border-color: var(--line-c) !important; }

/* ── A 「'한 공간'을 선택하셨어요」 안내 ── #cdd8b6 → 대비 1.29 (같은 올리브가 네 번째다) */
.passmsg { color: var(--tx2) !important; }

/* ── A 「스토어에 입력칸을 만들고 있어요」 목록 ────────────────────────────
   끝난 줄(.ok)은 이미 --done 가족을 쓰는데(`.ok .mkico` · `.ok .mkstate`) «줄 자체»의
   면·테두리만 값으로 박혀 있었다. 지금 줄(.now)도 같은 짝으로 맞춘다 —
   목록이 «지금(--now) → 끝남(--done)» 으로 읽힌다. ⛔ 새 색이 아니다. */
.mklist li.now { background: var(--now-bg) !important; border-color: var(--now-ln) !important; }
.mklist li.ok  { background: var(--done-bg) !important; border-color: var(--done-ln) !important; }

/* ── A 「Description 제품 설명 · 기본·항상 있어요」 줄 ────────────────────
   `background:#151a12` — 어두운 라임 tint 를 값으로 박아 둔 것이다. 짝이 되는 낱말이 이미 있다
   (그 줄의 글자·딱지가 `--lime`(=--now)·`--lime-tint` 를 쓴다). 면만 낱말로 바꾼다. */
.baserow { background: var(--now-bg) !important; }

/* ── B 「개념만 가볍게」 판 ──────────────────────────────────────────────
   ⚠️ `.learn-h`(판 제목)와 `.ih b` 가 보라(#b9a8f0)였다. A 에도 같은 제목이 둘 있다. 보라는 08-20 에 사전에서 «뺀» 색이다
      (test-core-colors ④ — 「자동으로 됐다」는 색이 아니라 문장이 말한다).
      이 판은 «읽는 판»이고 화면에서 파랑 세로선이 이미 「읽을 것」이라 --read 로 간다. */
.learn-h, .ih b { color: var(--read) !important; }
.idea p { color: var(--tx2) !important; }
.relief, .idea p.pick { color: var(--tx2) !important; }

/* ── B 「＋ 상위 메뉴 추가」 점선 단추 — 흰색 반투명이라 라이트에서 대비 1.06 ──
   ⛔ 점선(dashed)·모양은 그대로 두고 «색 이름»만 바꾼다. */
.nav-add { border-color: color-mix(in srgb, var(--tx) 52%, transparent) !important; color: var(--tx2) !important; }
.nav-add:hover { border-color: var(--tx3) !important; color: var(--tx) !important; }

/* ══ 라이트에서 «다크용 색»이 남아 있던 세 자리 (J.J 2026-08-22) ═══════════
   ⛔ 값을 새로 짓지 않는다 — 전부 tokens.css 낱말이다.
   ⛔ 다크는 한 값도 안 건드린다. 아래는 전부 `[data-theme="light"]` 안에서만 산다. */

/* ── ① 판 제목(액션 타이틀)이 «연한 민트»로 사라졌다 ───────────────────────
   `--action-ramp` 는 «어두운 바탕에 얹는» 램프다(민트→연보라 · first-steps.css:9 이 정본).
   라이트 본문(#F7F8F9) 위에 그대로 얹히니 제목이 거의 안 보였다(J.J 스크린샷).
   → **라이트에선 그라데이션을 안 쓴다. 제목은 검정 하나다** (J.J 2026-08-22 확정).
      처음엔 라이트 짝 램프(--read→--now→--pv)로 바꿔 봤는데 J.J 가 «검정»으로 정했다.
      ⭕ 앱이 이미 쓰는 방법이다 — 광(글로우)도 라이트에선 전부 끈다(㉚). 램프도 같은 결이다.
   ⛔ 정본 값(다크 램프)은 안 건드린다. ⛔ 그릇(.c-cols) 안에서만 갈아 끼운다 —
      :root 에 걸면 껍데기(기둥·띠)까지 물든다.
   ⚠️ 램프는 `background-clip:text` + `text-fill-color:transparent` 로 칠해져 있다.
      색만 바꾸면 «투명»이 그대로 남아 글자가 사라진다 — 채우기를 되돌려야 한다. */
[data-theme="light"] .c-cols { --action-ramp: none; }
/* 🔴 `.gs-walking` 은 «<html> 자신»에 붙는다 — `data-theme` 이 붙는 그 요소다.
      그래서 `[data-theme="light"] .gs-walking …`(사이 띄움)은 «자손»을 찾아 안 걸린다.
      한 요소에 둘 다 있을 땐 붙여 써야 한다. 30분 헤맬 자리라 적어 둔다. */
[data-theme="light"].gs-walking .sec.gs-now .sech h2,
[data-theme="light"] .ask-q {
  background: none !important;
  -webkit-text-fill-color: var(--tx) !important; color: var(--tx) !important; }

/* ── ② 가이드 판이 라이트에서 «검은 판»으로 남았다 ─────────────────────────
   `guide-panel.css` 는 면·그림자를 값으로 박아 뒀다(#1d2129…). 글자는 --tx 라 라이트에서
   «검은 판에 검은 글»이 됐다.
   ⛔ 그 파일은 «자동적용 8장이 같이 쓰는 한 벌»이다 — 한 줄도 안 고쳤다.
      여기(first-shell.css)는 처음셋팅 세 장만 싣는다. 그래서 여기서 «라이트 옷만» 덧입힌다.
      위저드 8장은 이 파일을 안 실으니 그쪽 동작·생김새는 그대로다. */
[data-theme="light"] .gp {
  background: linear-gradient(180deg, var(--card) 0%, var(--card) 62%, var(--chip-c) 100%);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.30), 0 4px 12px -6px rgba(0,0,0,.14);
}
/* 「지금 열려 있는 가이드」 표시 — #f4d47a 는 어두운 바탕용 금색이라 흰 바탕에서 안 읽힌다 */
[data-theme="light"] .help.gp-on { color: var(--guide) !important; }

/* 판 «안»으로 빌려온 글의 색도 값으로 박힌 데가 둘 있다.
   ⚠️ `.gtip` 자체 면(#0b0d10)은 판 안에서는 지워지지만(판이 background:none 을 준다),
      판 밖에서 열리는 자리가 남아 있어 낱말로 바꿔 둔다. */
[data-theme="light"] .help .gtip { background: var(--card) !important; }
[data-theme="light"] .help .gtip .gtip-warn b { color: var(--danger) !important; }

/* ── ③ 진행 레일 — 「끝난 걸음」이 «연한 민트»라 상태가 안 보였다 ────────────
   다크는 `--done-ln`(#2f5a3d · 다크그린)이 맞다. 라이트의 같은 이름은 #c6e7d8(연민트)이라
   흰 카드 위에서 점이 사라진다. 라이트에선 같은 가족의 «면» 값 --done(#007f4d)으로 간다.
   ⛔ 카드 테두리에 상태색을 넣지 않았다(J.J). 바뀌는 것은 «점» 하나뿐이다.
   ⛔ 셋의 구분은 그대로다 — 미진행: 빈 원 + --line-c 테두리 / 끝남: --done 채움 /
      지금: --now-solid 채움 + 굵은 글자. */
[data-theme="light"] .c-panes li.done .dot {
  background: var(--done); border-color: var(--done);
}

/* ── ④ 적는 칸이 라이트에서 «검은 상자»로 남았다 (J.J 스크린샷의 빨간 네모) ────────
   시안이 `#12151b` 를 박아 뒀다 — 카드보다 «한 단 어둡게» 해서 «파인 자리»로 보이게 한 값이다.
   라이트에서 그 뜻은 「흰 카드보다 한 단 어둡게」이고, 사전에 그 낱말이 이미 있다: --page.
   ⛔ 테두리·모서리·글자는 안 건드린다(이미 낱말이다). 면 하나만 바꾼다. */
[data-theme="light"] .addinput,
[data-theme="light"] .ta { background: var(--page) !important; }

/* 못 채운 칸의 «주의» 색도 다크용 주황이 박혀 있었다 — 같은 뜻의 낱말로 */
[data-theme="light"] .ta.err,
[data-theme="light"] .choicebox .addinput.err {
  border-color: var(--danger-ln) !important; background: var(--danger-bg) !important; }
[data-theme="light"] .ta.err::placeholder { color: var(--tx3) !important; }
[data-theme="light"] .fillwarn {
  background: var(--danger-bg) !important; border-color: var(--danger-ln) !important;
  color: var(--tx2) !important; }
[data-theme="light"] .fillwarn b { color: var(--danger) !important; }

/* ── ⑤ 라이트에서 «어두운 상자»로 남아 있던 셋 (세 화면 공통 시안) ────────────
   면을 재고 골랐다: 라이트 본문에서 밝기 0.25 아래로 남은 자리만 잡았다.
   ⛔ 뜻은 그대로다 — 금색은 --guide 가족, 초록은 --done 가족, 라임 안내는 --now 가족.
   ⛔ `.hl-tag`(파란 딱지)와 캡처 틀(`.tcard-p.shot`)은 «그대로 뒀다» — 앞은 --now 면에 흰 글자라
      원래 그런 것이고, 뒤는 캡처를 담는 자리라 손대지 않는다(J.J). */
[data-theme="light"] .keytag {
  color: var(--guide) !important; background: var(--guide-bg) !important;
  border-color: var(--guide-ln) !important; }
[data-theme="light"] .mkdone {
  background: var(--done-bg) !important; color: var(--tx2) !important; }
/* B 「내 메뉴 불러오기」 편집기 — 테두리·머리띠가 «흰색 반투명»이라 라이트에선 사라진다
   (rgba(255,255,255,.11) 을 흰 카드 위에 얹으면 아무것도 안 보인다). 낱말로 바꾼다.
   ⛔ 안쪽 «메뉴가 이렇게 보여요» 시연(.d-*)은 미리보기라 안 건드린다. */
[data-theme="light"] .navedit { border-color: var(--line-c) !important; }
[data-theme="light"] .navbar {
  background: var(--chip-c) !important; border-bottom-color: var(--line-c) !important; }

/* B 편집기의 «적는 칸 · 지우기 · 펼침»도 흰색 반투명/진회색이 박혀 있었다 */
[data-theme="light"] .nav-in { color: var(--tx) !important; }
[data-theme="light"] .nav-in::placeholder { color: var(--tx3) !important; }
[data-theme="light"] .nav-i.on .nav-in { border-bottom-color: var(--tx) !important; }
[data-theme="light"] .nav-x {
  background: var(--chip-c) !important; border-color: var(--line-c) !important;
  color: var(--tx2) !important; }
[data-theme="light"] .nav-x:hover { background: var(--danger-bg) !important; color: var(--danger) !important; }
[data-theme="light"] .drop {
  background: var(--card) !important; border-color: var(--line-c) !important; }
/* 그 안 줄들도 «흰색 반투명»이라 흰 판 위에서 사라졌다(대비 1.00) */
[data-theme="light"] .dsub-x { color: var(--tx3) !important; }
[data-theme="light"] .dsub-x:hover { background: var(--danger-bg) !important; color: var(--danger) !important; }
/* C 고르기 칸 — 제목 글자색은 «판마다 다른 색»이다 (J.J 2026-08-25 확정).
   다크 = --now(형광, 옆 「고르기」 딱지와 같은 색) · 라이트 = --guide(금색).
   ⚠️ 두 이름 다 판마다 값이 뒤집히는 이름이라 «한 이름으로는 못 낸다» —
      --now 만 쓰면 라이트에서 파랑이 되고, --guide 만 쓰면 다크에서 금색이 된다.
      그래서 밑바탕(first-sizechart.html)은 --lime(=--now)로 두고 라이트만 여기서 갈아탄다.
   ⛔ 값을 새로 고르지 않았다 — 둘 다 tokens.css 에 이미 있는 이름이다. */
[data-theme="light"] .pickbox .sech h2 { color: var(--guide) !important; }

/* 🔴 안 A 의 라이트 짝 (J.J 2026-08-25) — 다크와 «같은 뜻»이 되어야 한다.
   「＋ … 추가」는 이제 네모가 아니라 «글자 단추»다. 다크에서 네모를 걷었으니 여기서도 걷는다.
   ⛔ 안 걷으면 라이트에서만 네모가 남아 J.J 가 본 그 병(네모=적는 칸)이 그대로 살아난다. */
[data-theme="light"] .dadd { border: none !important; color: var(--tx2) !important; }
[data-theme="light"] .dadd:hover { color: var(--tx) !important; text-decoration: underline; }
/* 적는 칸은 반대로 «네모를 준다». 다크는 속을 어둡게, 라이트는 속을 «페이지색»으로 —
   흰 판(--card) 위에 한 톤 내려앉아야 «파인 칸»으로 읽힌다. */
/* 테두리는 «덮지 않는다» — 밑바탕이 이미 color-mix(--tx 52%) 라 라이트에서 저절로 뒤집힌다
   (다크 4.81 · 라이트 3.77 · 둘 다 «눌리는 것» 기준 3.0 넘음). 여기서 또 정하면 두 벌이 된다. */
[data-theme="light"] .dsub-in { background: var(--page) !important; }
[data-theme="light"] .dsub-in:focus {
  border-color: var(--now) !important; background: var(--card) !important; }
[data-theme="light"] .dsub { color: var(--tx) !important; }
[data-theme="light"] .dsub.dsub2 .dsub-in { color: var(--tx) !important; }
[data-theme="light"] .dsub.dsub3 .dsub-in { color: var(--tx2) !important; }
/* 적는 칸의 흐린 안내글·밑줄도 흰색 반투명이었다 */
[data-theme="light"] .dsub-in::placeholder { color: var(--tx3) !important; }
/* (옛 밑줄 덮개는 걷었다 — 칸이 «네모»가 되어 위 .dsub-in:focus 가 테두리째 칠한다) */
[data-theme="light"] .dsub.dsub3::before,
[data-theme="light"] .dadd.dadd3::before { background: var(--line-c) !important; }

/* B 「개념만 가볍게」의 번호 원 — 보라(#241f3a/#423a63/#b9a8f0)였다. 그 판 제목·강조를
   이미 --read 로 옮겼으니 번호도 같은 가족으로 간다(읽는 판 = 파랑). */
[data-theme="light"] .inum {
  background: var(--read-bg) !important; border-color: var(--read-ln) !important;
  color: var(--read) !important; }
[data-theme="light"] .tip {
  background: var(--now-bg) !important; color: var(--tx2) !important; }

/* 「만들고 있어요」 막대의 «홈»(트랙)만 값으로 박혀 있었다(#241f14) — 채움(i)은 이미 --guide 다.
   진행 레일의 홈이 쓰는 낱말과 같은 것으로 맞춘다: --chip-c. */
[data-theme="light"] .mkbar { background: var(--chip-c) !important; }

/* ── ⑥ 가이드 판 «안의 시연 무대»도 라이트 옷을 입힌다 ────────────────────
   무대(`.fs-demo`)는 어두운 판 위에 놓을 값으로 짜여 있었다 — 판이 흰색이 되니
   무대 면(#12151b)·글자(#e8eaed)가 «흰 판에 검은 상자, 그 위 흰 글씨»가 됐다(대비 1.08).
   ⛔ 움직임(커서·차례·9초)은 한 줄도 안 건드린다 — 면과 글자 «색 이름»만 바꾼다.
   ⛔ `.fs-d-chip.fs-d-set`(켜진 「사용」)은 이미 --lime(=--now) 짝이라 그대로 둔다. */
[data-theme="light"] .fs-demo { background: var(--page) !important; }
[data-theme="light"] .fs-d-row b,
[data-theme="light"] .fs-d-type { color: var(--tx) !important; }
[data-theme="light"] .fs-d-btn { color: var(--tx2) !important; }
[data-theme="light"] .fs-d-cur { color: var(--tx) !important; }

/* ── ⑦ 「모든 제품 같아요 / 제품마다 달라요」 토글 — 꺼진 쪽이 안 보였다 (J.J 2026-08-22)
   `.seg` 홈에 `#12151b`(거의 검정)가 박혀 있어 라이트에서도 검은 띠로 남았고,
   꺼진 단추 글자는 --mut(라이트에선 어두운 회색)이라 «검은 띠에 검은 글»이 됐다.
   ⚠️ 앞선 훑기가 이걸 못 잡은 까닭 — 이 줄들은 손님이 앞 판에서 «항목을 고른 뒤»에 만들어진다.
      빈 화면을 훑으면 `.rows` 가 비어 있어 아무것도 안 걸린다. 다음에 훑을 땐 «골라 놓고» 재라.
   ⛔ 켜진 쪽(.seg-btn.on)은 이미 --lime(=--now) 짝이라 그대로 둔다. */
[data-theme="light"] .seg { background: var(--chip-c) !important; }
/* ⚠️ `.seg-btn` 을 통째로 잡으면 «켜진 쪽»까지 덮어써서 파란 면에 회색 글자가 된다(대비 2.5).
      실제로 한 번 그렇게 나왔다 — 꺼진 쪽만 집는다. */
[data-theme="light"] .seg-btn:not(.on) { color: var(--tx2) !important; }
[data-theme="light"] .seg-btn:not(.on):hover { color: var(--tx) !important; }

/* ══ ⑧ 가이드 «걸음 안의 그림»이 라이트에서 통째로 깨져 있었다 (J.J 2026-08-22) ══
   A 판9(테마에서 탭 보이게 셋팅하기)의 8단계 안에는 «설명 그림»이 여럿 들어 있다 —
   블록/접이식 행 도해 · 공통↔개별 갈래 상자 · 스크린샷 걸음 카드 · 맞음/틀림 예시.
   전부 어두운 바탕 값으로 짜여 있어 라이트에서 «검은 상자에 검은 글»이 됐다(실측 40여 자리).
   🔴 앞선 훑기가 왜 못 잡았나 — 이 그림들은 8단계가 «접혀» 있어 화면에 없었다.
      `.gstep` 을 다 펴고 재야 나온다. 다음에 훑을 땐 «다 펴고» 재라.
   ⛔ 값을 새로 짓지 않는다. 뜻대로 사전 낱말에 얹는다:
        파랑(공통·읽을 것) --read  ·  금색(제품마다·곁다리) --guide
        초록(맞음) --done         ·  붉음(틀림) --danger
        무채색 겹  --page(파인 자리) · --card(그 위 줄) · --line-c/--line-s(선)
   ⛔ 다크는 한 값도 안 건드린다. 캡처 그림 안쪽(img)도 안 건드린다. */

/* ── 무채색 겹 — 파인 자리와 그 위의 줄 ── */
[data-theme="light"] .cbox,
[data-theme="light"] .mstep,
[data-theme="light"] .kbox { background: var(--page) !important; }
[data-theme="light"] .cline,
[data-theme="light"] .ka,
[data-theme="light"] .kb { background: var(--card) !important; border-color: var(--line-c) !important; }
[data-theme="light"] .mstep p { color: var(--tx2) !important; }

/* ── 파랑 갈래 — 「모든 제품 같아요(공통)」 ── */
[data-theme="light"] .branch.common,
[data-theme="light"] .cbox.w-common { background: var(--read-bg) !important; border-color: var(--read-ln) !important; }
[data-theme="light"] .w-common .cline { background: var(--card) !important; border-color: var(--read-ln) !important; }
[data-theme="light"] .w-common .cline b { color: var(--read) !important; }
[data-theme="light"] .w-common .cverdict {
  background: var(--read-bg) !important; border-color: var(--read-ln) !important; color: var(--read) !important; }

/* ── 금색 갈래 — 「제품마다 달라요(개별)」 ── */
[data-theme="light"] .branch.each,
[data-theme="light"] .cbox.w-each { background: var(--guide-bg) !important; border-color: var(--guide-ln) !important; }
[data-theme="light"] .w-each .cline { background: var(--card) !important; border-color: var(--guide-ln) !important; }
[data-theme="light"] .w-each .cline b,
[data-theme="light"] .sub3h b { color: var(--guide) !important; }
[data-theme="light"] .w-each .cverdict,
[data-theme="light"] .msn {
  background: var(--guide-bg) !important; border-color: var(--guide-ln) !important; color: var(--guide) !important; }
[data-theme="light"] .mstep.key { background: var(--guide-bg) !important; border-color: var(--guide-ln) !important; }
/* 걸음 글 안의 강조(#eec570 · 어두운 바탕용 금색)도 같은 가족으로 — 대비 1.54 였다 */
[data-theme="light"] .mstext b { color: var(--guide) !important; }

/* ── 갈래 딱지·체크표 — 남은 다섯 자리 ── */
[data-theme="light"] .tag.common { color: var(--read) !important; }
[data-theme="light"] .tag.each {
  background: var(--guide-bg) !important; color: var(--guide) !important; border-color: var(--guide-ln) !important; }
[data-theme="light"] .w-common .ch { color: var(--read) !important; }
[data-theme="light"] .w-each .ch { color: var(--guide) !important; }
[data-theme="light"] .bad .ch { color: var(--danger) !important; }

/* ── 맞음 / 틀림 예시 ── */
[data-theme="light"] .cbox.good { background: var(--done-bg) !important; border-color: var(--done-ln) !important; }
[data-theme="light"] .good .cline { background: var(--card) !important; border-color: var(--done-ln) !important; }
[data-theme="light"] .okline { background: var(--done-bg) !important; color: var(--tx2) !important; }
[data-theme="light"] .cbox.bad { border-color: var(--danger-ln) !important; }
[data-theme="light"] .bad .cline b { color: var(--danger) !important; }

/* ══ ⑨ 로봇 — 라이트에선 «하늘→보라» 그라데이션. 라임은 안 쓴다 (J.J 2026-08-22) ══
   J.J: 「라이트는 파란색이 우리 코어니까 약간 하늘색 보라색 그라데이션으로 · 테두리를 라임 말고」
   붓(그라데이션)은 first-shell.js 가 body 끝에 놓는다. 색은 여기서 «사전 낱말»로 준다:
        --now-solid (하늘빛 파랑 #3F76D9)  →  --pv (보라빛 #ab4a9c)
   ⛔ 값을 새로 짓지 않았다. ⛔ 다크는 그대로 라임이다 — 어두운 바탕의 코어색이 라임이다.
   ⛔ 가이드 판 로봇을 그리는 `guide-panel.js` 는 «한 줄도» 안 고쳤다(자동적용 8장 공용).
      그 8장은 이 파일을 안 실으므로 그쪽 로봇은 지금 그대로 라임이다.
   ⚠️ SVG 는 `stroke="#c6f24e"` 처럼 «속성»으로 칠해져 있는데, CSS 가 속성을 이긴다. */
[data-theme="light"] .gr-robot-a { stop-color: var(--now-solid); }
[data-theme="light"] .gr-robot-b { stop-color: var(--pv); }

/* 가이드 판 로봇 — 더듬이 · 머리 테두리 · 눈 · 입 */
[data-theme="light"] .gp-face svg path,
[data-theme="light"] .gp-face svg rect { stroke: url(#gr-robot-grad) !important; }
[data-theme="light"] .gp-face svg circle { fill: url(#gr-robot-grad) !important; }

/* 첫 인사 팝업 로봇 — 같은 붓으로 (면은 그대로 --card2) */
[data-theme="light"] .fs-hello-face svg line,
[data-theme="light"] .fs-hello-face svg rect { stroke: url(#gr-robot-grad) !important; }
[data-theme="light"] .fs-hello-face svg circle { fill: url(#gr-robot-grad) !important; }
[data-theme="light"] .fs-hello-face .fs-mouth { stroke: var(--tx3) !important; }