/* ═══════════════════════════════════════════════
   TicketRush — 티켓팅 실전 연습 시뮬레이터
   ═══════════════════════════════════════════════ */

:root{
  --bg:#0b0d12;
  --bg-2:#10131a;
  --surface:#161a23;
  --surface-2:#1d222d;
  --surface-3:#252b38;
  --border:#2a3140;
  --border-2:#39424f;
  --text:#e9edf5;
  --text-2:#a9b4c6;
  --muted:#6f7b90;
  --accent:#ff4757;
  --accent-2:#ff6b7a;
  --accent-dim:rgba(255,71,87,.13);
  --blue:#4a86ff;
  --blue-dim:rgba(74,134,255,.13);
  --green:#22c98f;
  --amber:#ffb020;
  --purple:#a978ff;
  --radius:14px;
  --radius-s:9px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --topbar-bg:rgba(11,13,18,.86);
  --menu-btn-bg:rgba(29,34,45,.92);
  /* 어두운 배경 위 옅은 색 배지 글자 — 밝은 테마에서는 아래에서 더 진한 색으로 바뀐다 */
  --tint-blue:#9dbcff;
  --tint-blue-2:#8db1ff;
  --tint-blue-3:#7ba4ff;
  --tint-red:#ffb3ba;
  --tint-red-2:#ff8a94;
  --tint-amber:#ffc861;
  --tint-amber-2:#ffd27d;
  --tint-green:#5fdcb0;
  --tint-purple:#c4a3ff;
  --tint-purple-2:#cbb0ff;
  --grad-top:#fff;
  --font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --mono:"SF Mono",ui-monospace,"Cascadia Mono","Consolas",monospace;
}

/* ─────────── 라이트 테마 ─────────── */
:root[data-theme="light"]{
  --bg:#f4f5f8;
  --bg-2:#ffffff;
  --surface:#ffffff;
  --surface-2:#eef0f4;
  --surface-3:#e4e7ed;
  --border:#dfe2e8;
  --border-2:#c9ceda;
  --text:#181b22;
  --text-2:#4c5563;
  --muted:#818a99;
  --shadow:0 10px 32px rgba(24,27,34,.12);
  --topbar-bg:rgba(255,255,255,.86);
  --menu-btn-bg:rgba(255,255,255,.92);
  --tint-blue:#1d5fd6;
  --tint-blue-2:#1d5fd6;
  --tint-blue-3:#2f6fe0;
  --tint-red:#c81e3c;
  --tint-red-2:#d21f3c;
  --tint-amber:#9a5b00;
  --tint-amber-2:#8a5300;
  --tint-green:#0d8a63;
  --tint-purple:#7a3fd6;
  --tint-purple-2:#7a3fd6;
  --grad-top:#181b22;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(255,71,87,.10), transparent 62%),
    radial-gradient(760px 420px at 92% 4%, rgba(74,134,255,.09), transparent 60%);
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
.hidden{display:none !important}

/* ─────────── 상단바 ─────────── */
#topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 22px;height:52px;
  background:var(--topbar-bg);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0}
.tb-logo{font-weight:800;font-size:13px;letter-spacing:.1em}
.tb-logo em{color:var(--accent);font-style:normal}
.tb-sep{width:1px;height:16px;background:var(--border-2)}
.tb-clock{font-family:var(--mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.tb-clock-label{font-size:10px;color:var(--muted);letter-spacing:.05em}
.tb-right{display:flex;align-items:center;gap:18px}
.tb-stat{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}
.tb-stat-label{color:var(--muted)}
.tb-stat-val{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.load-bar{width:64px;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.load-fill{height:100%;width:0;border-radius:3px;background:var(--green);transition:width .5s ease,background .5s ease}
.load-fill.mid{background:var(--amber)}
.load-fill.high{background:var(--accent)}
@media(max-width:820px){
  .tb-stat:not(.tb-load){display:none}
  #topbar{padding:0 14px}
}

/* ─────────── 화면 전환 ─────────── */
#stage{position:relative;z-index:1}
.screen{display:none;animation:fadeUp .32s cubic-bezier(.16,1,.3,1)}
.screen.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ═══════════ 1. 홈 ═══════════ */
.home-hero{max-width:900px;margin:0 auto;padding:86px 24px 46px;text-align:center}
.hero-badge{
  display:inline-block;padding:6px 14px;border-radius:100px;
  background:var(--accent-dim);border:1px solid rgba(255,71,87,.3);
  color:var(--accent-2);font-size:12px;font-weight:700;letter-spacing:.06em;
}
.hero-title{margin-top:22px;font-size:clamp(30px,5.2vw,52px);font-weight:800;line-height:1.22;letter-spacing:-.035em}
.hero-title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--accent),#ff9068);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin-top:20px;color:var(--text-2);font-size:15.5px;line-height:1.75}

.home-panel{max-width:940px;margin:0 auto;padding:0 24px 60px}
.panel-block{margin-bottom:38px}
.block-title{font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.block-title .num{
  font-family:var(--mono);font-size:11px;color:var(--accent);
  background:var(--accent-dim);padding:3px 7px;border-radius:5px;font-weight:700;
}
.block-desc{color:var(--muted);font-size:13px;margin:-8px 0 14px}
.opt-tag{font-size:11px;color:var(--muted);font-weight:500;background:var(--surface-2);padding:2px 8px;border-radius:5px}

/* 공연 카드 */
.concert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.concert{
  position:relative;text-align:left;padding:0;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  transition:border-color .18s,transform .18s;
}
.concert:hover{border-color:var(--border-2);transform:translateY(-2px)}
.concert.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 26px rgba(255,71,87,.16)}
/* 티켓 포스터가 크림색 용지라 어둡게 덮는 오버레이를 두지 않는다 */
.c-art{height:104px;position:relative;overflow:hidden;background:var(--surface-2)}
.c-art svg{display:block;width:100%;height:100%}
.c-body{padding:13px 14px 15px}
.c-name{font-weight:700;font-size:14.5px;line-height:1.35}
.c-venue{color:var(--muted);font-size:12px;margin-top:5px}
.c-tags{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}
.c-tag{font-size:10.5px;padding:3px 7px;border-radius:5px;background:var(--surface-3);color:var(--text-2);font-weight:600}
.c-tag.hot{background:var(--accent-dim);color:var(--accent-2)}

/* 난이도 */
.diff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.diff{
  text-align:left;padding:15px 16px;border-radius:var(--radius-s);
  background:var(--surface);border:1px solid var(--border);transition:.18s;
}
.diff:hover{border-color:var(--border-2)}
.diff.on{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-dim),var(--surface))}
.d-name{font-weight:700;font-size:15px;display:flex;align-items:center;gap:7px}
.d-dots{display:flex;gap:3px}
.d-dots i{width:5px;height:5px;border-radius:50%;background:var(--surface-3)}
.d-dots i.f{background:var(--accent)}
.d-desc{color:var(--muted);font-size:12px;margin-top:7px;line-height:1.5}
.d-spec{margin-top:9px;font-family:var(--mono);font-size:10.5px;color:var(--text-2);display:flex;flex-direction:column;gap:2px}

/* 체크박스 옵션 */
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.opt{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:13px 15px;border-radius:var(--radius-s);
  background:var(--surface);border:1px solid var(--border);transition:.16s;
}
.opt:hover{border-color:var(--border-2)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt-box{
  flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:5px;
  border:1.5px solid var(--border-2);background:var(--bg-2);
  display:grid;place-items:center;transition:.16s;
}
.opt-box::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .16s}
.opt input:checked + .opt-box,
.co-agree input:checked + .opt-box{background:var(--accent);border-color:var(--accent)}
.opt input:checked + .opt-box::after,
.co-agree input:checked + .opt-box::after{transform:rotate(-45deg) scale(1)}
.opt-text{display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.opt-text b{font-weight:600}
.opt-text i{font-style:normal;color:var(--muted);font-size:12px;line-height:1.45}

/* 목표좌석 */
/* 공연장 선택 */
.venue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.venue-pick{
  text-align:left;padding:14px 16px;border-radius:var(--radius-s);
  background:var(--surface);border:1.5px solid var(--border);transition:.16s;
}
.venue-pick:hover{border-color:var(--border-2);transform:translateY(-2px)}
.venue-pick.on{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-dim),var(--surface))}
.vp-label{
  display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:5px;
  background:var(--surface-3);color:var(--text-2);margin-bottom:7px;
}
.venue-pick.on .vp-label{background:var(--accent);color:#fff}
.vp-name{font-size:14px;font-weight:700}
.vp-desc{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:4px}
.vp-spec{font-size:11px;color:var(--text-2);font-family:var(--mono);margin-top:8px}

.target-grid{display:flex;flex-wrap:wrap;gap:8px}
.target{
  padding:9px 15px;border-radius:100px;font-size:13px;font-weight:600;
  background:var(--surface);border:1px solid var(--border);transition:.16s;
}
.target:hover{border-color:var(--border-2)}
.target.on{background:var(--blue-dim);border-color:var(--blue);color:var(--tint-blue)}

/* 버튼 */
.btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:#fff;font-weight:700;font-size:15px;
  padding:13px 26px;border-radius:var(--radius-s);
  transition:.16s;box-shadow:0 6px 20px rgba(255,71,87,.24);
}
.btn-primary:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
.btn-primary:active:not(:disabled){transform:translateY(0)}
.btn-primary:disabled{opacity:.34;cursor:not-allowed;box-shadow:none;filter:grayscale(.6)}
.btn-huge{width:100%;padding:18px;font-size:17px;margin-top:8px}
.btn-ghost{
  padding:10px 20px;border-radius:var(--radius-s);font-size:13.5px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);transition:.16s;
}
.btn-ghost:hover{background:var(--surface-3);color:var(--text)}
.btn-danger{color:var(--tint-red-2)}
.btn-danger:hover{background:var(--accent-dim);border-color:rgba(255,71,87,.4)}
.btn-link{background:none;color:var(--blue);font-size:12.5px;text-decoration:underline;padding:4px}
.btn-back{font-size:13px;color:var(--muted);padding:4px 0;font-weight:600}
.btn-back:hover{color:var(--text)}

.disclaimer{margin-top:16px;text-align:center;color:var(--muted);font-size:11.5px;line-height:1.7}

/* 기록 */
.home-record{max-width:940px;margin:0 auto;padding:0 24px 80px}
.rec-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px}
.rec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.rec-head h3{font-size:15px;font-weight:700}
.rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
.rec-item{text-align:center;padding:14px 8px;background:var(--bg-2);border-radius:var(--radius-s)}
.rec-val{font-family:var(--mono);font-size:22px;font-weight:700}
.rec-lab{font-size:11.5px;color:var(--muted);margin-top:4px}

/* ═══════════ 2. 오픈 대기 ═══════════ */
.standby-wrap{
  max-width:880px;margin:0 auto;padding:60px 24px;
  display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center;min-height:calc(100vh - 52px);
}
@media(max-width:720px){.standby-wrap{grid-template-columns:1fr;gap:24px;padding:36px 20px}}
.sb-poster{
  position:relative;width:100%;aspect-ratio:3/4;min-height:220px;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);background:var(--surface-2);
}
/* absolute 로 채워야 aspect-ratio 계산 순서와 무관하게 항상 보인다 */
.sb-poster svg{position:absolute;inset:0;width:100%;height:100%}
.sb-label{color:var(--muted);font-size:13px;letter-spacing:.04em}
.sb-count{
  font-family:var(--mono);font-size:clamp(56px,11vw,88px);font-weight:800;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  display:inline-block;
}
.sb-ms{font-family:var(--mono);font-size:24px;color:var(--accent);display:inline-block;font-weight:700}
.sb-count.urgent{color:var(--accent);animation:pulse .5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.sb-title{font-size:22px;font-weight:700;margin-top:22px}
.sb-meta{color:var(--text-2);font-size:13.5px;margin-top:6px;line-height:1.7}
.btn-book{margin-top:26px;width:100%;max-width:320px;padding:19px;font-size:19px}
.sb-hint{color:var(--muted);font-size:12.5px;margin-top:12px}
.sb-early{
  margin-top:12px;padding:10px 14px;border-radius:var(--radius-s);
  background:var(--accent-dim);border:1px solid rgba(255,71,87,.3);
  color:var(--accent-2);font-size:13px;font-weight:600;
}

/* ═══════════ 3. 대기열 ═══════════ */
.queue-card{
  max-width:440px;margin:0 auto;padding:34px 30px 28px;
  min-height:calc(100vh - 52px);display:flex;flex-direction:column;justify-content:center;
}
.q-head{text-align:center;margin-bottom:26px}
.q-brand{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--accent)}
.q-title{font-size:20px;font-weight:700;margin-top:8px}
/* 대기열 진행 — 일자형 게이지 */
.q-visual{margin:0 auto;max-width:420px}
.q-numrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.q-numlabel{font-size:12px;color:var(--muted)}
.q-numval{font-size:13px;color:var(--text-2)}
.q-numval b{
  font-family:var(--mono);font-size:38px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--text);
  letter-spacing:-.03em;margin-right:3px;
}
.q-track{
  height:12px;border-radius:7px;background:var(--surface-2);
  border:1px solid var(--border);overflow:hidden;position:relative;
}
.q-fill{
  height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,var(--accent),#ff9068);
  transition:width .6s ease;position:relative;
}
/* 진행 중임을 보여주는 흐르는 빛 */
.q-fill::after{
  content:"";position:absolute;inset:0;border-radius:6px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:qflow 1.5s linear infinite;
}
@keyframes qflow{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.q-trackfoot{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:7px}
.q-trackfoot b{font-family:var(--mono);color:var(--text-2)}
.q-stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:26px;text-align:center}
.q-stats .q-stat{min-width:96px}
.q-stat{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);padding:11px 6px}
.q-stat span{display:block;font-size:11px;color:var(--muted)}
.q-stat b{display:block;font-family:var(--mono);font-size:14px;margin-top:3px;font-variant-numeric:tabular-nums}
.q-status{
  margin-top:14px;padding:11px 14px;border-radius:var(--radius-s);
  background:var(--surface);border:1px solid var(--border);
  font-size:13px;color:var(--text-2);text-align:center;transition:.2s;
}
.q-status.warn{background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.34);color:var(--tint-amber-2)}
.q-status.bad{background:var(--accent-dim);border-color:rgba(255,71,87,.36);color:var(--accent-2)}
.q-warn{
  margin-top:14px;padding:13px 15px;border-radius:var(--radius-s);
  background:rgba(255,176,32,.07);border:1px solid rgba(255,176,32,.24);font-size:12.5px;line-height:1.6;
}
.q-warn b{display:block;color:var(--tint-amber);margin-bottom:3px}
.q-warn span{color:var(--text-2)}
.q-actions{display:flex;gap:8px;margin-top:16px}
.q-actions button{flex:1}
.q-refresh-count{text-align:center;font-size:11.5px;color:var(--muted);margin-top:10px;min-height:17px}

/* ═══════════ 예매 공통 헤더 ═══════════ */
.book-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 24px;border-bottom:1px solid var(--border);background:var(--bg-2);
}
.bh-title{font-size:17px;font-weight:700}
.bh-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.bh-timer{font-size:13px;color:var(--text-2)}
.bh-timer b{font-family:var(--mono);font-size:17px;color:var(--text);font-variant-numeric:tabular-nums;margin-left:6px}
.bh-timer.urgent b{color:var(--accent)}

/* ═══════════ 4. 구역 선택 ═══════════ */
.zone-body{display:grid;grid-template-columns:1fr 260px;gap:20px;padding:22px 24px;max-width:1200px;margin:0 auto}
@media(max-width:900px){.zone-body{grid-template-columns:1fr}}
/* 좌석배치도 — 무대를 중심으로 부채꼴로 펼친 SVG */
.venue{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 16px 14px;
}
.venue-svg{display:block;width:100%;height:auto;max-height:68vh;margin:0 auto}
.vm-stage{fill:var(--surface-3);stroke:var(--border-2);stroke-width:1.5}
.vm-stage-t{
  fill:var(--text-2);font-family:var(--font);font-size:12px;font-weight:800;
  letter-spacing:.26em;pointer-events:none;
}
.vm-zone{cursor:pointer}
/* 기본 투명도는 JS 가 잔여석에 맞춰 fill-opacity 속성으로 넣는다.
   여기서 fill-opacity 를 선언하면 그 값을 덮어버리므로 상태별로만 지정한다. */
.vm-shape{stroke-width:1.5;transition:fill-opacity .45s ease,stroke-width .14s}
.vm-zone:hover .vm-shape{fill-opacity:.85;stroke-width:2.5}
.vm-zone:focus{outline:none}
.vm-zone:focus-visible .vm-shape{stroke-width:3}
.vm-name,.vm-left{
  pointer-events:none;paint-order:stroke;
  stroke:rgba(0,0,0,.6);stroke-width:3px;stroke-linejoin:round;
}
.vm-name{fill:#fff;font-family:var(--font);font-size:12px;font-weight:700}
.vm-left{fill:var(--text-2);font-family:var(--mono);font-size:10.5px;font-weight:600}
.vm-zone.mid .vm-left{fill:var(--amber)}
.vm-zone.low .vm-left{fill:var(--accent-2)}
.vm-zone.off{cursor:not-allowed}
.vm-zone.off .vm-shape{stroke-dasharray:3 3}
.vm-zone.off:hover .vm-shape{fill-opacity:.05;stroke-width:1.5}
.vm-zone.off .vm-name{fill:var(--muted)}
.vm-zone.off .vm-left{fill:var(--accent)}
.vm-hint{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.6}
.vm-hint b{color:var(--text-2)}
.zone-side h3{font-size:14px;font-weight:700;margin-bottom:11px}
.grade-list{display:flex;flex-direction:column;gap:7px}
.grade-item{
  display:flex;align-items:center;gap:9px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);font-size:12.5px;
}
.gi-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.gi-name{font-weight:700}
.gi-price{color:var(--muted);font-size:11.5px}
.gi-left{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:12.5px}

/* 실시간 피드 */
.live-feed{
  margin-top:16px;background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-s);padding:11px 12px;height:158px;overflow:hidden;
  display:flex;flex-direction:column;gap:5px;justify-content:flex-end;
}
.lf-item{font-size:11.5px;color:var(--muted);animation:feedIn .3s ease;line-height:1.45}
.lf-item b{color:var(--text-2);font-weight:600}
.lf-item.hot b{color:var(--accent-2)}
@keyframes feedIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ═══════════ 5. 좌석 선택 ═══════════ */
.seat-body{display:grid;grid-template-columns:1fr 280px;gap:20px;padding:20px 24px;max-width:1280px;margin:0 auto}
@media(max-width:900px){.seat-body{grid-template-columns:1fr}}
.seat-main{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.stage-bar{
  background:linear-gradient(180deg,var(--surface-3),var(--surface-2));
  border:1px solid var(--border-2);border-radius:7px;text-align:center;
  padding:9px;font-weight:800;letter-spacing:.4em;font-size:12px;color:var(--text-2);margin-bottom:20px;
}
.seat-scroll{overflow:auto;max-height:56vh;padding:4px}
.seat-grid{display:flex;flex-direction:column;gap:5px;align-items:center;min-width:min-content}
.seat-row{display:flex;gap:4px;align-items:center}
.seat-rowlabel{
  width:26px;flex:0 0 auto;font-family:var(--mono);font-size:10px;
  color:var(--muted);text-align:right;padding-right:5px;
}
.seat{
  width:17px;height:17px;border-radius:3.5px;flex:0 0 auto;
  background:var(--surface-3);border:none;transition:transform .1s,background .18s;position:relative;
}
/* 선택 가능한 좌석 = 포도알 (보라색) */
.seat.av{background:#8b5cf6;cursor:pointer}
.seat.av:hover{transform:scale(1.42);background:#a78bfa;z-index:5;box-shadow:0 0 0 2px rgba(139,92,246,.45)}
/* 경쟁자가 선점 중인 좌석. 깜빡이거나 노랗게 뜨지 않고 그냥 사라진 것처럼 보인다 */
.seat.hold{background:#2b313d;cursor:not-allowed}
.seat.sold{background:#2b313d;cursor:not-allowed}
.seat.mine{background:var(--accent);cursor:pointer;box-shadow:0 0 0 2px rgba(255,71,87,.45)}
/* 사라질 때 별도 연출 없음 — background transition 만으로 조용히 회색이 된다 */
.seat-aisle{width:12px;flex:0 0 auto}
.seat-legend{display:flex;gap:16px;justify-content:center;margin-top:18px;font-size:11.5px;color:var(--text-2);flex-wrap:wrap}
.seat-legend span{display:flex;align-items:center;gap:6px}
.lg{width:11px;height:11px;border-radius:3px;display:inline-block}
.lg-av{background:#8b5cf6}
.lg-sold{background:#2b313d}.lg-mine{background:var(--accent)}

.seat-side h3{font-size:14px;font-weight:700;margin-bottom:11px}
.picked{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);
  padding:11px;min-height:96px;display:flex;flex-direction:column;gap:7px;
}
.picked .empty{color:var(--muted);font-size:12.5px;margin:auto;text-align:center}
.pick-item{display:flex;align-items:center;gap:9px;padding:8px 10px;background:var(--bg-2);border-radius:7px;font-size:12.5px}
.pi-grade{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px}
.pi-name{font-weight:600}
.pi-price{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--text-2)}
.pi-del{color:var(--muted);font-size:15px;line-height:1;padding:0 2px}
.pi-del:hover{color:var(--accent)}
.picked-sum{
  margin-top:11px;padding:13px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-s);
}
.picked-sum div{display:flex;justify-content:space-between;font-size:13px;padding:3px 0}
.picked-sum b{font-family:var(--mono);font-weight:700}
.seat-side .btn-primary{width:100%;margin-top:11px}

/* ═══════════ 6. 보안문자 ═══════════ */
.captcha-card{
  max-width:390px;margin:0 auto;padding:36px 30px;
  min-height:calc(100vh - 52px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
.captcha-card h2{font-size:20px;font-weight:700}
.captcha-card > p{color:var(--text-2);font-size:13.5px;margin-top:7px}
/* 전체 연습(#captcha-*)과 집중 연습(#cd-*)이 같은 모양을 쓴다 */
#captcha-canvas,#cd-canvas{
  margin-top:20px;border-radius:8px;background:#fff;
  border:1px solid var(--border-2);max-width:100%;
}
#captcha-input,#cd-input{
  margin-top:12px;width:100%;padding:14px 16px;font-size:19px;
  text-align:center;letter-spacing:.22em;font-family:var(--mono);font-weight:700;
  background:var(--surface);border:1.5px solid var(--border-2);
  border-radius:var(--radius-s);color:var(--text);outline:none;transition:.16s;
}
#captcha-input:focus,#cd-input:focus{border-color:var(--accent);background:var(--surface-2)}
#captcha-input.err,#cd-input.err{border-color:var(--accent);animation:shake .32s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.captcha-msg{min-height:20px;margin-top:9px;font-size:12.5px;color:var(--accent-2)}
.captcha-card .btn-primary{width:100%;margin-top:6px}
.captcha-timer{margin-top:16px;font-size:12.5px;color:var(--muted)}
.captcha-timer b{font-family:var(--mono);color:var(--text-2)}

/* ═══════════ 7. 결제 ═══════════ */
.checkout-wrap{max-width:1000px;margin:0 auto;padding:26px 24px 60px}
.co-steps{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--muted);margin-bottom:22px}
.co-steps .on{color:var(--accent);font-weight:700}
.co-steps i{font-style:normal;color:var(--border-2)}
.co-grid{display:grid;grid-template-columns:1fr 310px;gap:20px}
@media(max-width:860px){.co-grid{grid-template-columns:1fr}}
.co-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;margin-bottom:14px}
.co-box h3{font-size:14.5px;font-weight:700;margin-bottom:13px}
.co-rows{display:flex;flex-direction:column;gap:9px}
.co-row{display:flex;font-size:13.5px;gap:14px}
.co-row span{color:var(--muted);width:88px;flex:0 0 auto}
.co-row b{font-weight:600}
.co-discounts,.co-pays{display:flex;flex-direction:column;gap:8px}
.co-choice{
  display:flex;align-items:center;gap:11px;padding:12px 14px;text-align:left;
  background:var(--bg-2);border:1.5px solid var(--border);border-radius:var(--radius-s);
  font-size:13.5px;transition:.16s;width:100%;
}
.co-choice:hover{border-color:var(--border-2)}
.co-choice.on{border-color:var(--accent);background:var(--accent-dim)}
.cc-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--border-2);flex:0 0 auto;transition:.16s}
.co-choice.on .cc-radio{border-color:var(--accent);border-width:5px}
.cc-label{font-weight:600}
.cc-val{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--text-2)}
/* 결제 수단 하위 선택 — 카드사 · 은행 */
.co-sub:not(:empty){
  margin-top:12px;padding:13px 14px;border-radius:var(--radius-s);
  background:var(--bg-2);border:1px solid var(--border);
}
.co-sub-h{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);margin-bottom:9px}
.co-sub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.pay-sub{
  padding:9px 6px;border-radius:7px;font-size:12.5px;font-weight:600;
  background:var(--surface);border:1.5px solid var(--border);
  color:var(--text-2);transition:.14s;
}
.pay-sub:hover{border-color:var(--border-2);color:var(--text)}
.pay-sub.on{border-color:var(--accent);background:var(--accent-dim);color:var(--tint-red)}
.co-sub-note{font-size:11px;color:var(--amber);margin-top:9px;line-height:1.5}

.co-agree{display:flex;align-items:center;gap:11px;padding:15px 20px;font-size:13px;cursor:pointer;color:var(--text-2)}
.co-agree input{position:absolute;opacity:0;pointer-events:none}
.co-side{position:sticky;top:70px;align-self:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.co-side h3{font-size:14.5px;font-weight:700;margin-bottom:13px}
.co-sum{display:flex;flex-direction:column;gap:8px;padding-bottom:13px;border-bottom:1px solid var(--border)}
.co-sum div{display:flex;justify-content:space-between;font-size:13px}
.co-sum span{color:var(--muted)}
.co-sum b{font-family:var(--mono);font-weight:600}
.co-sum .disc b{color:var(--green)}
.co-total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0}
.co-total span{font-size:13.5px;font-weight:600}
.co-total b{font-family:var(--mono);font-size:24px;font-weight:800;color:var(--accent)}
.btn-pay{width:100%;padding:16px;font-size:16px}
.co-note{margin-top:11px;font-size:11.5px;color:var(--muted);line-height:1.6}
.co-timer{margin-top:13px;text-align:center;font-size:12.5px;color:var(--muted)}
.co-timer b{font-family:var(--mono);color:var(--text-2)}

/* ═══════════ 8. 결과 리포트 ═══════════ */
.result-wrap{max-width:1000px;margin:0 auto;padding:44px 24px 80px}
.rs-hero{text-align:center;margin-bottom:38px}
.rs-verdict{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.rs-outcome{font-size:clamp(28px,5vw,42px);font-weight:800;margin-top:10px;letter-spacing:-.03em}
.rs-outcome.ok{color:var(--green)}
.rs-outcome.fail{color:var(--accent)}
.rs-desc{color:var(--text-2);font-size:14.5px;margin-top:10px;line-height:1.7}
.rs-gradewrap{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:28px;flex-wrap:wrap}
.rs-grade{
  width:112px;height:112px;border-radius:26px;display:grid;place-items:center;
  font-size:50px;font-weight:800;letter-spacing:-.04em;position:relative;
  background:var(--surface);border:2px solid var(--border-2);
}
.rs-grade small{position:absolute;bottom:11px;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.rs-gradetext{text-align:left;max-width:340px}
.rs-gradetext h3{font-size:19px;font-weight:700}
.rs-gradetext p{color:var(--text-2);font-size:13.5px;margin-top:6px;line-height:1.65}

.rs-section{margin-top:36px}
.rs-section > h3{font-size:16px;font-weight:700;margin-bottom:15px;display:flex;align-items:center;gap:9px}
.rs-section > h3::before{content:"";width:3px;height:15px;background:var(--accent);border-radius:2px}

.rs-two{display:grid;grid-template-columns:340px 1fr;gap:20px}
@media(max-width:820px){.rs-two{grid-template-columns:1fr}}
.rs-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
#radar{width:100%;height:auto;display:block}

.metric-list{display:flex;flex-direction:column;gap:10px}
.metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);padding:13px 15px}
.m-top{display:flex;align-items:baseline;gap:9px;margin-bottom:8px}
.m-name{font-weight:700;font-size:13.5px}
.m-val{font-family:var(--mono);font-weight:700;font-size:15px;margin-left:auto}
.m-tier{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:4px}
.t-s{background:rgba(169,120,255,.16);color:var(--tint-purple)}
.t-a{background:rgba(34,201,143,.14);color:var(--tint-green)}
.t-b{background:rgba(74,134,255,.14);color:var(--tint-blue-2)}
.t-c{background:rgba(255,176,32,.14);color:var(--tint-amber)}
.t-d{background:var(--accent-dim);color:var(--accent-2)}
.m-track{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;position:relative}
.m-bar{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.16,1,.3,1)}
.m-note{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.5}

.fb-list{display:flex;flex-direction:column;gap:12px}
.fb{
  display:flex;gap:14px;padding:16px 18px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border-2);
}
.fb.crit{border-left-color:var(--accent);background:linear-gradient(90deg,var(--accent-dim),var(--surface) 40%)}
.fb.warn{border-left-color:var(--amber)}
.fb.good{border-left-color:var(--green)}
.fb-icon{font-size:19px;flex:0 0 auto;line-height:1.3}
.fb-body h4{font-size:14px;font-weight:700;margin-bottom:5px}
.fb-body p{font-size:13px;color:var(--text-2);line-height:1.68}
.fb-drill{
  margin-top:9px;padding:10px 13px;background:var(--bg-2);
  border-radius:7px;font-size:12.5px;color:var(--text-2);line-height:1.6;
}
.fb-drill b{color:var(--text);font-weight:700}

.rs-timeline{display:flex;flex-direction:column;gap:2px}
.tl{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface);border:1px solid var(--border)}
.tl:first-child{border-radius:var(--radius) var(--radius) 0 0}
.tl:last-child{border-radius:0 0 var(--radius) var(--radius)}
.tl-time{font-family:var(--mono);font-size:12px;color:var(--muted);width:66px;flex:0 0 auto}
.tl-dot{width:8px;height:8px;border-radius:50%;background:var(--border-2);flex:0 0 auto}
.tl-name{font-size:13px;font-weight:600}
.tl-dur{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--text-2)}
.tl.ev-bad .tl-dot{background:var(--accent)}
.tl.ev-bad .tl-name{color:var(--accent-2)}
.tl.ev-good .tl-dot{background:var(--green)}

.rs-actions{display:flex;gap:11px;margin-top:38px}
.rs-actions button{flex:1;padding:15px}

.mouse-path{width:100%;border-radius:var(--radius-s);background:var(--bg-2);display:block}

/* ═══════════ 오버레이 ═══════════ */
#loading-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(6,8,12,.82);
  backdrop-filter:blur(4px);display:grid;place-items:center;animation:fadeIn .15s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.lo-box{text-align:center;padding:30px}
.lo-spinner{
  width:44px;height:44px;margin:0 auto 18px;border-radius:50%;
  border:3px solid var(--surface-3);border-top-color:var(--accent);animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.lo-text{font-size:15px;font-weight:600}
.lo-sub{font-size:12.5px;color:var(--muted);margin-top:7px;min-height:19px}

#block-overlay{
  position:fixed;inset:0;z-index:110;background:rgba(6,8,12,.94);
  display:grid;place-items:center;text-align:center;animation:fadeIn .15s;
}
.blk-box{padding:36px;max-width:400px}
.blk-icon{font-size:44px}
.blk-box h2{font-size:20px;font-weight:700;margin-top:16px;color:var(--accent-2)}
.blk-box p{color:var(--text-2);font-size:13.5px;margin-top:9px;line-height:1.65}
.blk-count{font-family:var(--mono);font-size:44px;font-weight:800;margin-top:20px}

#toast-layer{position:fixed;top:66px;right:20px;z-index:120;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  padding:12px 17px;border-radius:var(--radius-s);font-size:13px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border-2);box-shadow:var(--shadow);
  animation:toastIn .26s cubic-bezier(.16,1,.3,1);max-width:320px;line-height:1.5;
}
.toast.err{background:#3a1d22;border-color:rgba(255,71,87,.5);color:#ffb3ba}
.toast.warn{background:#3a2f14;border-color:rgba(255,176,32,.5);color:#ffd88f}
.toast.ok{background:#12332a;border-color:rgba(34,201,143,.5);color:#8fe8c6}
.toast.out{animation:toastOut .22s forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

@media(max-width:560px){
  #toast-layer{right:10px;left:10px}
  .toast{max-width:none}
  .home-hero{padding:52px 20px 34px}
  .home-panel{padding:0 20px 44px}
  .zone-body,.seat-body{padding:16px}
  .book-head{padding:13px 16px}
}

/* ═══════════ 4. 날짜 · 회차 선택 ═══════════ */
.sch-body{
  display:grid;grid-template-columns:1fr 300px;gap:20px;
  padding:22px 24px;max-width:1120px;margin:0 auto;
}
@media(max-width:900px){.sch-body{grid-template-columns:1fr}}
.sch-main{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.sch-h{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin-bottom:11px}

.sch-dates{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.sch-date{
  width:76px;padding:11px 6px;border-radius:var(--radius-s);
  background:var(--bg-2);border:1.5px solid var(--border);
  display:flex;flex-direction:column;align-items:center;gap:2px;transition:.16s;
}
.sch-date:hover:not(:disabled){border-color:var(--border-2);transform:translateY(-2px)}
.sch-date.on{border-color:var(--accent);background:var(--accent-dim)}
.sch-date:disabled{opacity:.36;cursor:not-allowed}
.sd-dow{font-size:11px;font-weight:700;color:var(--text-2)}
.sd-dow.sat{color:var(--tint-blue-3)}
.sd-dow.sun{color:var(--tint-red-2)}
.sd-day{font-family:var(--mono);font-size:23px;font-weight:700;line-height:1.05}
.sd-sub{font-size:10px;color:var(--muted);white-space:nowrap}
.sch-date.on .sd-sub{color:var(--accent-2)}

.sch-rounds{display:flex;flex-direction:column;gap:9px}
.sch-empty{color:var(--muted);font-size:12.5px;padding:18px 0;text-align:center}
.sch-round{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  padding:13px 16px;border-radius:var(--radius-s);
  background:var(--bg-2);border:1.5px solid var(--border);transition:.16s;
}
.sch-round:hover:not(:disabled){border-color:var(--border-2)}
.sch-round.on{border-color:var(--accent);background:var(--accent-dim)}
.sch-round:disabled{opacity:.42;cursor:not-allowed}
.sr-time{font-family:var(--mono);font-size:19px;font-weight:700;flex:0 0 auto;min-width:56px}
.sr-mid{flex:1;min-width:0}
.sr-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sr-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;background:var(--accent-dim);color:var(--accent-2)}
.sr-comp{font-size:11px;color:var(--muted);margin-top:2px}
.sr-right{flex:0 0 auto;width:104px;text-align:right}
.sr-left{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--green)}
.sr-left.mid{color:var(--amber)}
.sr-left.low{color:var(--accent)}
.sr-bar{height:3px;border-radius:2px;background:var(--surface-3);margin-top:6px;overflow:hidden}
.sr-bar i{display:block;height:100%;background:var(--green);transition:width .5s ease}
.sr-left.mid ~ .sr-bar i{background:var(--amber)}
.sr-left.low ~ .sr-bar i{background:var(--accent)}

.sch-side{
  position:sticky;top:70px;align-self:start;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;
}
.sch-side h3{font-size:14px;font-weight:700;margin-bottom:11px}
.sch-side .sch-h2{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);margin:18px 0 9px}
.sch-picked{
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-s);
  padding:12px 13px;min-height:92px;display:flex;flex-direction:column;gap:7px;
}
.sch-picked .empty{color:var(--muted);font-size:12.5px;margin:auto;text-align:center}
.sp-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;line-height:1.5}
.sp-row span{color:var(--muted);flex:0 0 auto}
.sp-row b{font-weight:600;text-align:right;min-width:0}
.qty-grid{display:flex;gap:7px}
.qty-btn{
  flex:1;padding:10px 0;border-radius:var(--radius-s);font-size:13px;font-weight:700;
  background:var(--bg-2);border:1.5px solid var(--border);transition:.16s;
}
.qty-btn:hover{border-color:var(--border-2)}
.qty-btn.on{border-color:var(--blue);background:var(--blue-dim);color:var(--tint-blue)}
.sch-note{font-size:11px;color:var(--muted);line-height:1.6;margin-top:9px}
.sch-side .btn-primary{width:100%;margin-top:13px}

/* ═══════════ 결과 — 다른 사람들과 비교 ═══════════ */
.rs-meta{font-size:12.5px;color:var(--muted);margin:-7px 0 14px}

.rk-hero{
  display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;
}
@media(max-width:760px){.rk-hero{grid-template-columns:1fr;gap:16px}}
.rk-main{text-align:center;padding:6px 0}
.rk-lab{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.rk-rank{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-top:4px}
.rk-rank b{
  font-family:var(--mono);font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  background:linear-gradient(180deg,var(--grad-top),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rk-rank span{font-size:15px;font-weight:700;color:var(--text-2)}
.rk-of{font-size:11.5px;color:var(--muted);margin-top:3px}

.rk-side{min-width:0}
.rk-pct{font-size:15px;color:var(--text-2);font-weight:600}
.rk-pct b{font-size:25px;color:var(--accent-2);font-family:var(--mono);letter-spacing:-.02em}
.rk-gauge{height:9px;border-radius:5px;background:var(--surface-3);overflow:hidden;margin:10px 0 5px}
.rk-gauge i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),#ff9068)}
.rk-scale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}
.rk-head{font-size:13.5px;margin-top:13px;line-height:1.6}
.rk-beat{font-size:12px;color:var(--muted);margin-top:5px}
.rk-beat b{font-family:var(--mono);color:var(--text-2)}

.rk-two{display:grid;grid-template-columns:1fr 300px;gap:16px;margin-top:16px}
@media(max-width:860px){.rk-two{grid-template-columns:1fr}}
#rkdist{display:block;width:100%}
.rk-boardwrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}
.rk-boardhead{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.rk-board{display:flex;flex-direction:column;gap:3px}
.rk-row{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;font-size:12.5px}
.rk-row.me{background:var(--accent-dim);border:1px solid rgba(255,71,87,.4);font-weight:700}
.rk-r{font-family:var(--mono);font-size:11.5px;color:var(--muted);width:54px;flex:0 0 auto;text-align:right}
.rk-row.me .rk-r{color:var(--accent-2)}
.rk-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.rk-row.me .rk-n{color:var(--text)}
.rk-t{font-family:var(--mono);font-size:12px;flex:0 0 auto}
.rk-sub{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:0 0 auto}
.rk-new{
  font-style:normal;font-size:9px;font-weight:800;letter-spacing:.04em;
  padding:1px 5px;border-radius:3px;margin-left:6px;
  background:var(--accent);color:#fff;vertical-align:1px;
}
.rk-boardnote{font-size:10.5px;color:var(--muted);line-height:1.65;margin-top:11px}
.rk-boardnote b{color:var(--text-2)}

.rk-bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.rk-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-s);padding:13px 15px}
.rk-bar-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.rk-bar-top span{font-weight:600}
.rk-bar-top b{font-family:var(--mono);font-size:13px;color:var(--text)}
.rk-bar-note{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.6}
.rk-bar .up{color:var(--green)}
.rk-bar .down{color:var(--accent-2)}

.rk-hist{
  display:flex;flex-direction:column;gap:3px;margin-top:14px;padding:14px 17px;
  border-radius:var(--radius-s);background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--blue);
}
.rk-hist.best{border-left-color:var(--amber);background:linear-gradient(90deg,rgba(255,176,32,.10),var(--surface) 45%)}
.rk-hist b{font-size:13px}
.rk-hist.best b{color:var(--amber)}
.rk-hist span{font-size:11.5px;color:var(--muted);line-height:1.65}
.rk-hist .up{color:var(--green)}
.rk-hist .down{color:var(--accent-2)}

@media(max-width:560px){
  .sch-body{padding:16px}
  .sch-main{padding:17px}
  .sch-date{width:66px}
  .sr-right{width:88px}
  .sr-time{font-size:17px;min-width:48px}
  .rk-hero{padding:18px}
}

/* 플레이어 이름 */
.player-row{
  display:flex;flex-direction:column;gap:7px;margin-bottom:14px;
  padding:14px 16px;border-radius:var(--radius-s);
  background:var(--surface);border:1px solid var(--border);
}
.player-row label{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.player-row input{
  background:var(--bg-2);border:1.5px solid var(--border);border-radius:var(--radius-s);
  color:var(--text);padding:11px 13px;font-size:14px;font-weight:600;
}
.player-row input:focus{outline:none;border-color:var(--blue)}
.player-row input::placeholder{color:var(--muted);font-weight:500}
.player-hint{font-size:11px;color:var(--muted);line-height:1.6}

/* ═══════════ 보안문자 단독 연습 (captcha.html) ═══════════ */
.drill-wrap{max-width:760px;margin:0 auto;padding:26px 24px 80px}
.drill-back{
  display:inline-block;font-size:12.5px;color:var(--muted);
  padding:6px 0;font-weight:600;transition:.14s;
}
.drill-back:hover{color:var(--text)}

.dr-top{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:15px 18px;
}
.dr-progress{flex:1;min-width:180px}
.dr-progress > span{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text-2)}
.dr-track{height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin-top:8px}
.dr-track i{display:block;height:100%;width:0;border-radius:4px;background:var(--accent);transition:width .3s ease}
.dr-live{display:flex;gap:16px;text-align:center}
.dr-live > div span{display:block;font-size:10.5px;color:var(--muted)}
.dr-live > div b{
  display:block;font-family:var(--mono);font-size:19px;font-weight:700;
  font-variant-numeric:tabular-nums;margin-top:2px;
}

/* 전체 연습의 .captcha-card 는 100vh 를 쓰므로 여기서는 별도 래퍼 */
.drill-card{
  max-width:390px;margin:0 auto;padding:26px 26px 24px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.drill-card h2{font-size:19px;font-weight:700}
.drill-card > p{color:var(--text-2);font-size:13px;margin-top:6px}
.drill-card .btn-primary{width:100%;margin-top:6px}

.dr-log{max-width:390px;margin:16px auto 0;display:flex;flex-direction:column;gap:5px}
.dr-item{
  display:flex;align-items:center;gap:10px;font-size:12px;
  padding:8px 12px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--green);animation:feedIn .25s ease;
}
.dr-item.bad{border-left-color:var(--accent)}
.dr-no{font-family:var(--mono);color:var(--muted);width:34px;flex:0 0 auto}
.dr-t{font-family:var(--mono);font-weight:700;width:56px;flex:0 0 auto}
.dr-note{color:var(--muted);margin-left:auto}

/* 결과 — 문제별 막대 */
.dr-bar{display:flex;align-items:center;gap:10px;font-size:12px;padding:4px 0}
.dr-bar-no{font-family:var(--mono);color:var(--muted);width:22px;text-align:right;flex:0 0 auto}
.dr-bar-track{flex:1;height:9px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.dr-bar-track i{display:block;height:100%;border-radius:5px}
.dr-bar-t{font-family:var(--mono);font-weight:700;width:52px;text-align:right;flex:0 0 auto}
.dr-bar-m{color:var(--amber);width:58px;font-size:11px;flex:0 0 auto}

/* ═══════════ 연습 모드 선택 메뉴 (햄버거) ═══════════ */
/* z-index 는 로딩(100)·차단(110) 오버레이보다 낮게 둔다.
   그래야 차단 화면이 떠 있는 동안 메뉴로 빠져나가지 않는다. */
.menu-btn{
  position:fixed;top:12px;right:16px;z-index:92;
  width:42px;height:42px;border-radius:11px;
  background:var(--menu-btn-bg);border:1px solid var(--border-2);
  display:grid;place-content:center;gap:5px;
  backdrop-filter:blur(8px);transition:.16s;
}
.menu-btn:hover{background:var(--surface-3);border-color:var(--muted)}
.menu-btn span{
  display:block;width:18px;height:2px;border-radius:2px;background:var(--text);
  transition:transform .22s ease,opacity .16s ease;
}
/* 열려 있으면 X 로 */
.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 메뉴 버튼을 가리키는 안내 말풍선 */
.menu-hint{
  position:fixed;top:62px;right:14px;z-index:91;
  display:flex;align-items:center;gap:8px;
  padding:9px 10px 9px 13px;border-radius:10px;
  background:linear-gradient(180deg,#b98cff,var(--purple));color:#fff;
  font-size:12px;font-weight:600;line-height:1.4;max-width:230px;
  box-shadow:0 10px 26px rgba(169,120,255,.4);
  animation:hintIn .3s cubic-bezier(.16,1,.3,1), hintNudge 2.6s ease-in-out .3s infinite;
}
.menu-hint b{font-weight:800;text-decoration:underline;text-underline-offset:2px}
/* 위쪽을 향한 삼각형 — 메뉴 버튼을 가리킨다 */
.menu-hint::after{
  content:"";position:absolute;top:-5px;right:24px;
  width:12px;height:12px;border-radius:2px;
  background:#b98cff;transform:rotate(45deg);
}
.menu-hint button{
  flex:0 0 auto;width:20px;height:20px;border-radius:6px;
  background:rgba(255,255,255,.18);color:#fff;font-size:14px;line-height:1;
  font-weight:700;transition:.14s;
}
.menu-hint button:hover{background:rgba(255,255,255,.34)}
@keyframes hintIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes hintNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.menu-backdrop{position:fixed;inset:0;z-index:88;background:rgba(6,8,12,.6);backdrop-filter:blur(2px)}

.menu-panel{
  position:fixed;top:64px;right:16px;z-index:90;width:min(320px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:10px;
  display:flex;flex-direction:column;gap:6px;
  animation:menuIn .18s cubic-bezier(.16,1,.3,1);
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.menu-head{
  font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  padding:6px 10px 4px;
}
.menu-item{
  text-align:left;padding:12px 13px;border-radius:var(--radius-s);
  background:var(--bg-2);border:1.5px solid var(--border);transition:.14s;
}
.menu-item:hover{border-color:var(--border-2);background:var(--surface-2)}
.menu-item.on{border-color:var(--purple);background:rgba(169,120,255,.12)}
.menu-item b{display:block;font-size:13.5px;font-weight:700}
.menu-item.on b{color:var(--tint-purple-2)}
.menu-item i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.55}

/* 테마 전환 */
.menu-theme{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 13px;margin-top:2px;
}
.menu-theme > span{font-size:12px;font-weight:600;color:var(--muted)}
.theme-switch{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--border);border-radius:100px;padding:3px}
.theme-opt{padding:6px 13px;border-radius:100px;font-size:12px;font-weight:700;color:var(--muted);transition:.14s}
.theme-opt.on{background:var(--accent);color:#fff}

/* 메뉴 버튼과 상단바 통계가 겹치지 않게 자리를 비운다 */
#topbar{padding-right:70px}

@media(max-width:560px){
  .drill-wrap{padding:18px 16px 60px}
  .dr-live{width:100%;justify-content:space-between}
}

/* ═══════════ 온라인 랭킹 (Supabase) ═══════════ */
.lb-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.lb-loading{color:var(--muted);font-size:12.5px;text-align:center;padding:20px 0}

.lb-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.lb-main{flex:1;min-width:160px}
.lb-lab{font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--muted)}
.lb-rank{display:flex;align-items:baseline;gap:4px;margin-top:4px}
.lb-rank b{
  font-family:var(--mono);font-size:34px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(180deg,var(--grad-top),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.lb-rank span{font-size:13px;font-weight:700;color:var(--text-2)}
.lb-of{font-size:11px;color:var(--muted);margin-top:3px}
.lb-side{min-width:140px}
.lb-pct{font-size:13.5px;color:var(--text-2);font-weight:600}
.lb-pct b{font-size:19px;color:var(--purple);font-family:var(--mono)}
.lb-gauge{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden;margin-top:7px}
.lb-gauge i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--purple),#ec9ffb)}

.lb-boardwrap{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.lb-boardhead{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--muted);margin-bottom:9px}
.lb-board{display:flex;flex-direction:column;gap:3px}
.lb-row{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;font-size:12.5px}
.lb-row.me{background:rgba(169,120,255,.14);border:1px solid rgba(169,120,255,.4);font-weight:700}
.lb-r{font-family:var(--mono);font-size:11.5px;color:var(--muted);width:44px;flex:0 0 auto;text-align:right}
.lb-row.me .lb-r{color:var(--tint-purple-2)}
.lb-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);display:flex;align-items:baseline;gap:7px}
.lb-row.me .lb-n{color:var(--text)}
.lb-n em{font-style:normal;font-size:10px;color:var(--muted);background:var(--surface-3);padding:1px 6px;border-radius:4px;flex:0 0 auto}
.lb-t{font-family:var(--mono);font-size:12px;flex:0 0 auto}
.lb-empty{color:var(--muted);font-size:12px;text-align:center;padding:10px 0}

.lb-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:var(--muted)}

.lb-fix{
  padding:14px 16px;border-radius:var(--radius-s);
  background:var(--bg-2);border:1px solid rgba(255,176,32,.34);border-left:3px solid var(--amber);
}
.lb-fix > b{display:block;font-size:12.5px;color:var(--tint-amber-2)}
.lb-fix > span{display:block;font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.6}
.lb-fix-actions{display:flex;align-items:center;gap:12px;margin-top:11px}

/* 온라인 랭킹 최초 연결 안내 (결과 화면 안에 뜨는 설정 박스) */
.svc-setup{padding:2px}
.svc-setup h2{font-size:16px}
.svc-lead{font-size:12.5px;color:var(--text-2);line-height:1.7;margin-top:7px}
.svc-steps{margin:15px 0 4px;padding-left:20px;font-size:12.5px;color:var(--text-2);line-height:1.7}
.svc-steps li{margin-bottom:11px}
.svc-steps b{color:var(--text)}
.svc-hint{font-size:11px;color:var(--muted);line-height:1.6}
.svc-hint b{color:var(--tint-red)}
.svc-sql{
  margin-top:8px;padding:12px 13px;border-radius:var(--radius-s);
  background:var(--bg-2);border:1px solid var(--border);
  font-family:var(--mono);font-size:10.5px;line-height:1.6;color:var(--text-2);
  white-space:pre;overflow-x:auto;
}
.svc-field{display:block;margin-top:12px}
.svc-field span{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:5px}
.svc-field input{
  width:100%;padding:11px 13px;font-size:12.5px;font-family:var(--mono);
  background:var(--bg-2);border:1.5px solid var(--border);border-radius:var(--radius-s);
  color:var(--text);outline:none;transition:.16s;
}
.svc-field input:focus{border-color:var(--accent)}
.svc-setup .btn-primary{width:100%;margin-top:14px}

/* ═══════════ 문서 페이지 (개인정보처리방침 등) ═══════════ */
.doc-wrap{max-width:760px;margin:0 auto;padding:32px 24px 80px}
.doc-title{font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-.02em;margin-top:18px}
.doc-updated{font-size:12px;color:var(--muted);margin-top:6px}
.doc-lead{
  margin-top:20px;padding:16px 18px;border-radius:var(--radius-s);
  background:var(--surface);border:1px solid var(--border);
  font-size:13.5px;color:var(--text-2);line-height:1.8;
}
.doc-wrap h2{
  font-size:16px;font-weight:700;margin-top:30px;margin-bottom:10px;
  display:flex;align-items:center;gap:9px;
}
.doc-wrap h2::before{content:"";width:3px;height:15px;background:var(--accent);border-radius:2px}
.doc-wrap p{font-size:13.5px;color:var(--text-2);line-height:1.85;margin-bottom:10px}
.doc-wrap ul{margin:4px 0 10px;padding-left:20px}
.doc-wrap li{font-size:13.5px;color:var(--text-2);line-height:1.85;margin-bottom:5px}
.doc-wrap b{color:var(--text);font-weight:700}
.doc-wrap a{color:var(--blue)}

/* ═══════════ 사이트 하단 (푸터) ═══════════ */
.site-foot{
  max-width:940px;margin:0 auto;padding:26px 24px 60px;
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.site-foot p{font-size:11.5px;color:var(--muted);line-height:1.7}
.site-foot nav{display:flex;gap:16px;flex-wrap:wrap}
.site-foot a{font-size:12px;color:var(--text-2);text-decoration:none;font-weight:600}
.site-foot a:hover{color:var(--accent);text-decoration:underline}

/* ═══════════ 실시간 대결 (방 코드) ═══════════ */
.dv-join-row{display:flex;gap:7px}
.dv-code-input{
  flex:1;min-width:0;padding:10px 12px;font-family:var(--mono);font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--bg-2);border:1.5px solid var(--border-2);border-radius:var(--radius-s);
  color:var(--text);outline:none;transition:.16s;
}
.dv-code-input:focus{border-color:var(--accent)}
.btn-primary.urgent-pulse{animation:urgentPulse .5s infinite}
@keyframes urgentPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* ═══════════ PWA 설치 버튼 · iOS 안내 ═══════════ */
.install-btn{margin-top:22px;font-size:13.5px;padding:11px 22px}
.ios-hint{
  max-width:420px;margin:14px auto 0;padding:10px 14px;border-radius:var(--radius-s);
  background:var(--surface);border:1px solid var(--border);
  font-size:12px;color:var(--text-2);line-height:1.6;
}
.ios-hint b{color:var(--text);font-weight:700}