/* 번쩍 — 60초 두뇌 워밍업
 * 토큰 → 레이아웃 → 컴포넌트 → 모션 → 미디어쿼리 (tarot 패턴)
 * 컬러: 다크 잉크블루-퍼플 → 여명 코랄·앰버 → 골드/화이트 "번쩍".
 * 접근성/안전: prefers-reduced-motion 분기, 플래시 <3Hz, 정보 이중부호화(색+아이콘+텍스트).
 */

:root{
  /* 베이스(심야) */
  --bg0:#0a0a1f; --bg1:#141233; --surface:#1b1840; --surface-2:#26224f;
  --line:rgba(255,209,138,.16);
  /* 잉크(텍스트) */
  --ink:#f4f1ff; --muted:#b7b0dc; --faint:#7a7299;
  /* 여명·각성 액센트 */
  --dawn:#ff8e6e; --amber:#ffb24d; --spark:#ffd166; --spark-hi:#fff4cf; --flash:#fffdf5;
  /* 의미색(이중부호화 전제) */
  --ok:#7ee0b0; --bad:#ff8b8b;
  /* 진행 빛 단계(라운드별 배경 글로우) */
  --glow:rgba(255,142,110,.0);
  /* 타이포 */
  --font-sans:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,
    "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --fs-display:clamp(3rem,12vw,5.5rem);
  --fs-h1:clamp(1.8rem,6vw,3rem);
  --fs-h2:clamp(1.25rem,4vw,1.6rem);
  --fs-body:clamp(1rem,2.6vw,1.08rem);
  --fs-rule:clamp(.95rem,3vw,1.1rem);
  --fs-small:.82rem;
  /* 간격·라운드·그림자 */
  --sp-1:.4rem; --sp-2:.8rem; --sp-3:1.2rem; --sp-4:1.8rem; --sp-5:2.6rem;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --shadow-card:0 14px 40px rgba(0,0,0,.45);
  --shadow-spark:0 0 28px rgba(255,209,102,.45);
  --ring-focus:0 0 0 3px rgba(255,209,102,.4);
  --touch-min:56px;
  /* 모션 */
  --dur-fast:150ms; --dur:220ms; --dur-trans:1500ms;
  --ease-snap:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.2,.7,.2,1);
}
/* ===== 3-way theme (Light/Dark/System) — base :root above = native DARK. Opposite (light) WCAG-aware auto-generated (contrast-solving ink/accent vs worst-case surface). ===== */
:root[data-theme="light"]{
  --bg0: #f4f4f6;
  --bg1: #f5f5f7;
  --surface: #f6f6f8;
  --surface-2: #f9f9fa;
  --line: rgba(0,0,0,0.10);
  --ink: #3b05ff;
  --muted: #6f60b9;
  --faint: #8b84a6;
  --dawn: #cd2d00;
  --amber: #a05b00;
  --spark: #8f6400;
  --spark-hi: #866700;
  --flash: #836900;
  --ok: #1d7b4d;
  --bad: #da0000;
  --glow: rgba(0,0,0,0.10);
}












*{box-sizing:border-box}
[hidden]{display:none!important} /* 명시적 display가 [hidden]을 무력화하지 않도록 */
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans); color:var(--ink);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(1000px 700px at 50% -8%, var(--glow), rgba(0,0,0,0) 58%),
    radial-gradient(900px 600px at 50% -10%, #1d1a45 0%, rgba(29,26,69,0) 60%),
    linear-gradient(180deg,#141233 0%,#0a0a1f 100%);
  background-attachment:fixed;
  transition:background-color var(--dur) var(--ease-out);
}
/* 진행 빛 단계: body[data-lvl]로 글로우 색온도 상승 (어둠→여명→앰버→골드) */
body[data-lvl="1"]{--glow:rgba(255,142,110,.16)}
body[data-lvl="2"]{--glow:rgba(255,178,77,.22)}
body[data-lvl="3"]{--glow:rgba(255,209,102,.30)}
body[data-lvl="4"]{--glow:rgba(255,209,102,.40)}

b{color:var(--spark-hi)}

/* ── 레이아웃 ── */
header.site{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1.4rem 1rem .2rem}
.brand-spark{color:var(--spark);font-size:1.2rem;filter:drop-shadow(0 0 10px rgba(255,209,102,.6))}
.brand-name{font-weight:800;letter-spacing:.16em;font-size:1.05rem;color:var(--spark-hi)}
main{max-width:680px;margin:0 auto;padding:.6rem 1.1rem 3rem;min-height:70vh;
  display:flex;flex-direction:column;justify-content:center}
footer.site{text-align:center;color:var(--faint);font-size:var(--fs-small);padding:1.6rem 1rem 2.4rem}

.view{display:none;animation:rise var(--dur) var(--ease-out) both}
.view.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── HERO ── */
.hero{text-align:center;padding:1.2rem 0 .4rem}
.hero-spark{display:flex;justify-content:center;margin:0 0 1.4rem}
.spark-dot{width:18px;height:18px;border-radius:50%;background:var(--spark);
  box-shadow:0 0 0 6px rgba(255,209,102,.14),0 0 36px 6px rgba(255,209,102,.55);
  animation:pulse-dot 2.4s var(--ease-out) infinite}
@keyframes pulse-dot{0%,100%{transform:scale(.9);opacity:.85}50%{transform:scale(1.08);opacity:1}}
.hero h1{font-weight:800;font-size:var(--fs-h1);line-height:1.2;margin:.2rem 0 .6rem;letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff,var(--spark-hi) 70%,var(--spark));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 20px rgba(255,209,102,.22))}
.hero-sub{color:var(--muted);font-size:var(--fs-body);line-height:1.8;max-width:30rem;margin:.4rem auto 1.4rem}
.hero-meta{display:flex;gap:.6rem;justify-content:center;align-items:center;flex-wrap:wrap;margin:0 0 1.4rem;min-height:1.4rem}
.seed-date{color:var(--faint);font-size:var(--fs-small);letter-spacing:.06em}
.promise{color:var(--faint);font-size:var(--fs-small);margin:1rem 0 0}

.rounds-peek{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;max-width:30rem;margin:2.4rem auto 0}
.peek{border:1px solid var(--line);border-radius:var(--r-md);padding:.9rem .5rem;text-align:center;
  background:rgba(27,24,64,.45)}
.peek-i{font-size:1.3rem;display:block;margin-bottom:.3rem}
.peek b{color:var(--ink);font-size:.9rem;display:block}
.peek small{color:var(--faint);font-size:.72rem}

/* ── 버튼 ── */
.btn{font-family:inherit;font-weight:700;cursor:pointer;border-radius:var(--r-pill);
  border:1px solid var(--spark);background:transparent;color:var(--spark-hi);
  padding:.85rem 1.6rem;font-size:.98rem;min-height:var(--touch-min);
  transition:transform var(--dur-fast) var(--ease-snap),background var(--dur),box-shadow var(--dur)}
.btn:hover{background:rgba(255,209,102,.1);box-shadow:0 0 24px rgba(255,209,102,.25);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.btn-primary{background:linear-gradient(180deg,var(--spark-hi),var(--spark));color:#2a1d08;border-color:transparent;
  box-shadow:0 8px 28px rgba(255,209,102,.32)}
.btn-primary:hover{box-shadow:0 10px 36px rgba(255,209,102,.5)}
.btn-lg{font-size:1.2rem;padding:1.1rem 2.4rem;letter-spacing:.01em}
.btn-ghost{border-color:var(--line);color:var(--muted)}
.btn-ghost:hover{color:var(--ink);background:rgba(255,209,102,.06)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}

/* ── 스트릭 배지 ── */
.streak{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--fs-small);font-weight:700;
  color:var(--spark-hi);border:1px solid var(--line);border-radius:var(--r-pill);padding:.25rem .8rem;
  background:rgba(255,178,77,.1)}

/* ── PLAY 공통 ── */
.play-top{display:flex;align-items:center;justify-content:space-between;margin:.2rem 0 1.2rem;min-height:1.6rem}
.dots{display:flex;gap:.5rem}
.dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);color:var(--faint);font-size:.78rem;font-weight:700;
  transition:all var(--dur) var(--ease-out)}
.dot i{font-style:normal}
.dot.current{border-color:var(--spark);color:var(--bg0);background:var(--spark);box-shadow:var(--shadow-spark);
  animation:dot-pulse .6s var(--ease-out)}
.dot.done{border-color:var(--ok);color:var(--ok);background:rgba(126,224,176,.12)}
.dot.done i{display:none}
.dot.done::after{content:"✓";font-size:.9rem}
@keyframes dot-pulse{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.trial-counter{color:var(--muted);font-size:var(--fs-small);font-variant-numeric:tabular-nums}

.rule-caption{text-align:center;color:var(--spark-hi);font-size:var(--fs-rule);font-weight:500;
  min-height:1.6rem;margin:0 0 1rem;transition:opacity var(--dur) var(--ease-out)}
.rule-caption.fading{opacity:0}

.stage{position:relative;min-height:clamp(280px,46vh,420px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;outline:none;
  border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(27,24,64,.32);padding:1.2rem}

/* ── R1 스파크 탭 ── */
.stage--r1{cursor:pointer;user-select:none}
.spark-target{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  width:100%;height:100%;min-height:240px;text-align:center}
.spark-wait{color:var(--muted);font-size:var(--fs-body)}
.spark{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 50% 40%,var(--spark-hi),var(--spark) 55%,var(--amber));
  box-shadow:0 0 0 10px rgba(255,209,102,.16),var(--shadow-spark);display:flex;align-items:center;justify-content:center;
  font-size:3rem;color:#2a1d08;animation:spark-in var(--dur-fast) var(--ease-snap) both}
@keyframes spark-in{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.spark-rt{font-size:var(--fs-display);font-weight:900;font-variant-numeric:tabular-nums;color:var(--spark-hi);
  line-height:1;animation:rt-pop .5s var(--ease-snap) both}
.spark-rt small{font-size:.4em;color:var(--muted);font-weight:600}
@keyframes rt-pop{0%{transform:scale(.6);opacity:0}40%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.spark-note{color:var(--faint);font-size:var(--fs-small)}
.spark-note.warn{color:var(--bad)}

/* ── R2 잔상 맞추기 ── */
.cells{display:grid;gap:.8rem;justify-content:center}
.cells[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.cells[data-n="4"]{grid-template-columns:repeat(2,1fr)}
.cell{width:clamp(64px,22vw,92px);height:clamp(64px,22vw,92px);min-width:var(--touch-min);min-height:var(--touch-min);
  border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-size:2rem;color:rgba(255,255,255,.18);
  cursor:pointer;transition:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur)}
.cell:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.cell.lit{color:#0d0b22}
.cell .num{position:absolute;font-size:.7rem;color:var(--faint);transform:translate(-130%,-130%)}
.cell.pickable:hover{transform:translateY(-3px)}
.cell.correct{border-color:var(--ok);box-shadow:0 0 0 3px rgba(126,224,176,.5),var(--shadow-spark)}
.cell.wrong{border-color:var(--bad);box-shadow:0 0 0 3px rgba(255,139,139,.5)}
.cell-tag{position:absolute;bottom:6px;font-size:.6rem;color:var(--faint)}
.r2-hint{color:var(--muted);font-size:var(--fs-small)}

/* ── R3 색·글자 번쩍 ── */
.stroop-word{font-size:clamp(2.4rem,11vw,4rem);font-weight:900;letter-spacing:.02em;text-align:center;
  line-height:1;margin:.4rem 0 .2rem;animation:rt-pop .25s var(--ease-snap) both}
.stroop-ask{color:var(--muted);font-size:var(--fs-small)}
.stroop-timer{height:5px;width:min(280px,80%);background:rgba(255,255,255,.08);border-radius:var(--r-pill);overflow:hidden;margin:.4rem 0 .2rem}
.stroop-timer i{display:block;height:100%;background:var(--spark);width:100%;transform-origin:left}
.color-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;width:100%;max-width:24rem}
.color-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--touch-min);
  border-radius:var(--r-md);border:2px solid rgba(255,255,255,.18);cursor:pointer;
  font-family:inherit;font-weight:800;font-size:1.05rem;color:#0d0b22;padding:.7rem;
  transition:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur)}
.color-btn:hover{transform:translateY(-2px)}
.color-btn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.color-btn .swatch-icon{font-size:1.1rem}
.color-btn.correct{box-shadow:0 0 0 3px var(--ok),var(--shadow-spark)}
.color-btn.wrong{box-shadow:0 0 0 3px var(--bad)}
.combo{color:var(--spark-hi);font-size:var(--fs-small);font-weight:700;min-height:1.1rem}

/* ── 라운드 전환 ── */
.transition{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  background:rgba(10,10,31,.82);backdrop-filter:blur(3px);animation:rise var(--dur) var(--ease-out) both}
.trans-spark{font-size:2.6rem;filter:drop-shadow(0 0 16px rgba(255,209,102,.7));animation:rt-pop .3s var(--ease-snap) both}
.trans-text{color:var(--spark-hi);font-weight:700;font-size:var(--fs-h2)}

/* ── 플래시 오버레이 (광과민 한도: 1회 ≤120ms, 드물게만) ── */
.flash-overlay{position:fixed;inset:0;z-index:60;background:var(--flash);opacity:0;pointer-events:none}
.flash-overlay.fire{animation:flash 120ms ease-out 1}
@keyframes flash{0%{opacity:0}30%{opacity:.55}100%{opacity:0}}

/* ── REPORT ── */
.report-card{border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(27,24,64,.55);
  padding:2rem 1.4rem;text-align:center;box-shadow:var(--shadow-card);max-width:30rem;margin:0 auto;
  backdrop-filter:blur(3px)}
.report-card h2{font-size:var(--fs-h2);font-weight:800;color:var(--spark-hi);margin:0 0 1.2rem}
.score-block{margin:.4rem 0 1rem}
.metric-big{font-size:var(--fs-display);font-weight:900;font-variant-numeric:tabular-nums;line-height:1;
  background:linear-gradient(180deg,#fff,var(--spark-hi) 60%,var(--spark));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 20px rgba(255,209,102,.3))}
.score-label{color:var(--muted);font-size:var(--fs-small);letter-spacing:.06em;margin-top:.3rem}
.delta{display:inline-flex;align-items:center;gap:.4rem;border-radius:var(--r-pill);padding:.5rem 1rem;
  font-weight:700;font-size:var(--fs-body);border:1px solid var(--line);margin:.2rem 0 1rem}
.delta.up{color:var(--ok);border-color:rgba(126,224,176,.4);background:rgba(126,224,176,.08)}
.delta.down{color:var(--bad);border-color:rgba(255,139,139,.4);background:rgba(255,139,139,.08)}
.delta.flat{color:var(--spark-hi);background:rgba(255,209,102,.06)}
.delta-icon{font-size:1.1em}
.report-streak{margin:0 0 1.2rem}
.chips{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:0 0 1.2rem}
.chip-metric{display:flex;flex-direction:column;gap:.1rem;border:1px solid var(--line);border-radius:var(--r-md);
  padding:.6rem .9rem;background:rgba(38,34,79,.5);min-width:5.2rem}
.chip-metric b{color:var(--ink);font-size:1.1rem;font-variant-numeric:tabular-nums;font-weight:800}
.chip-metric small{color:var(--faint);font-size:.7rem}
.notice{color:var(--muted);font-size:var(--fs-small);border:1px dashed var(--line);border-radius:var(--r-sm);
  padding:.5rem .8rem;margin:0 0 1rem;background:rgba(0,0,0,.15)}
.report-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem}

/* ── 접근성 / 안전 (필수) ── */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  /* 파티클·플래시·화면 번쩍 제거. 상태 변화는 색/밝기 '스냅'으로. 정보는 텍스트/색/아이콘 중복 제공. */
  .flash-overlay{display:none!important}
  .spark-dot{animation:none}
}

/* ── 반응형 (모바일 세로 우선 → 데스크톱·가로) ── */
@media (max-width:380px){
  .rounds-peek{gap:.4rem}
  .peek{padding:.7rem .3rem}
  .spark{width:96px;height:96px;font-size:2.4rem}
  .color-grid{gap:.5rem}
}
@media (max-height:560px) and (orientation:landscape){
  header.site{padding:.6rem 1rem 0}
  main{min-height:auto;padding-top:.4rem}
  .hero{padding:.4rem 0}
  .hero-spark{margin-bottom:.6rem}
  .stage{min-height:200px}
  .rounds-peek{margin-top:1rem}
}

/* i18n language switcher — 항상 다크 테마이므로 런타임 기본값을 번쩍 스파크 톤으로 덮어쓴다. */
.site .i18n-switch{
  --i18n-switch-bg:rgba(255,255,255,.07);
  --i18n-switch-border:rgba(255,209,138,.28);
  --i18n-switch-fg:rgba(244,241,255,.92);
  --i18n-switch-active-bg:rgba(255,209,102,.22);
  --i18n-switch-active-fg:var(--spark-hi);
  --i18n-switch-menu-bg:var(--surface);
  --i18n-switch-menu-border:var(--line);
  --i18n-switch-shadow:0 8px 24px rgba(0,0,0,.45);
}

/* light-mode override for hardcoded body gradient (refinement) */
:root[data-theme="light"] body{ background: var(--bg); }
:root[data-theme="light"] .report-card,
:root[data-theme="light"] .transition,
:root[data-theme="light"] .chip-metric{ background: rgba(14,14,40,.05); }