/* ============================================================
   티케팅 대기열 시뮬레이터 — 다크 UI
   프레임워크 없이 CSS 커스텀 프로퍼티로 구성한다.
   폰트 = Pretendard(웹폰트, index.html에서 비블로킹으로 로드).
   ============================================================ */

:root{
  color-scheme:dark;   /* UA가 그리는 요소(셀렉트 팝업·스피너·스크롤바)까지 다크로 */

  /* ── 표면 ── */
  --bg:#0a0a0f;
  --surface-1:#121219;      /* 카드 기본 */
  --surface-2:#1a1a24;      /* 카드 위 요소 */
  --surface-3:#22222e;      /* 인풋·호버 */
  --line:#282833;
  --line-soft:#20202a;

  /* ── 브랜드 ── */
  --brand:#e2231a;
  --brand-strong:#ff3b30;
  --brand-soft:#ff9089;                 /* 브랜드 계열 밝은 글자 */
  --brand-tint:rgba(226,35,26,.14);
  --brand-line:rgba(255,90,80,.45);

  /* ── 글자 ──
     --txt-3은 설명 문구 대부분을 담당한다. 카드 표면(surface-1·2) 위에서도 WCAG AA(4.5:1)를
     넘는 값으로 잡는다 — 더 어두우면 배경이 밝은 카드에서 본문이 읽히지 않는다. */
  --txt:#f4f4f7;
  --txt-2:#b6b6c2;
  --txt-3:#8c8ca0;
  --txt-faint:#6f6f82;                  /* 장식·구분자 전용. 본문에는 쓰지 않는다 */

  /* ── 상태 ── */
  --ok:#2ecc71;
  --warn:#ffb02e;
  --seat-free:#2a2a38; --seat-free-line:#3a3a4d;
  --seat-taken:#33222a; --seat-taken-line:#4a2f38;

  /* ── 타입 스케일 ── */
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px;
  --fs-lg:16px;  --fs-xl:19px; --fs-2xl:24px; --fs-3xl:34px;
  /* 디스플레이 — 대기 순번처럼 화면에서 가장 큰 숫자에만 */
  --fs-4xl:44px; --fs-5xl:52px;

  /* ── 간격·라운드·그림자·모션 ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-1:8px; --r-2:12px; --r-3:16px; --r-4:22px; --r-full:999px;
  --sh-2:0 6px 20px rgba(0,0,0,.35);
  --sh-3:0 16px 44px rgba(0,0,0,.5);
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(226,35,26,.08), transparent 60%),
    var(--bg);
  color:var(--txt);
  font-family:"Pretendard Variable","Pretendard",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-feature-settings:"tnum";
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
  line-height:1.5;
}
::selection{background:var(--brand-tint)}
:focus-visible{outline:2px solid var(--brand-strong);outline-offset:2px}

/* 움직임을 줄이도록 설정한 방문자에게는 애니메이션을 끈다.
   무한 반복(카운트다운 경고·오픈 임박 시계)이 있어 필요하다. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ── 상단 바 ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:20;
  background:rgba(10,10,15,.72);backdrop-filter:blur(14px) saturate(1.2);
}
.brand{
  font-family:inherit;background:none;border:0;padding:0;
  font-weight:800;font-size:var(--fs-xl);letter-spacing:-.03em;cursor:pointer;color:var(--brand);
}
.brand span{color:var(--txt);margin-left:5px;font-weight:600}
.top-right{display:flex;align-items:center;gap:14px}

#app{max-width:1400px;margin:0 auto;padding:var(--sp-6) var(--sp-5) 72px}
.screen{animation:fade .34s var(--ease)}
.hidden{display:none!important}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.title{font-size:var(--fs-2xl);font-weight:800;margin:4px 0 var(--sp-5);letter-spacing:-.03em}

/* ── 버튼 ── */
.btn{
  border:1px solid transparent;border-radius:var(--r-1);
  padding:12px 20px;font-size:var(--fs-lg);font-weight:700;cursor:pointer;
  color:var(--txt);background:var(--surface-3);
  transition:transform .12s var(--ease),background .15s,border-color .15s,opacity .15s;
  font-family:inherit;
}
.btn:hover{background:#2c2c3a}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:#f0281e}
/* 좌석 화면의 결제 버튼이 기본적으로 이 상태다 — 너무 어두우면 무엇을 눌러야 할지가 안 보인다 */
.btn.primary:disabled{background:#3a262c;color:#c49a95;cursor:not-allowed;box-shadow:none}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--txt-3)}
/* min-height 44px = 모바일 권장 터치 영역. 콘솔 버튼들이 촘촘히 붙어 있어 오탭이 난다 */
.btn.small{padding:8px 13px;font-size:var(--fs-sm);min-height:44px}
.btn.big{padding:14px 28px;font-size:var(--fs-lg)}

/* ── 상영 배너 ──
   포스터 폭을 고정하지 않는다. 최소 폭도 두지 않는다 — 콘솔(470px)이 붙은 2열에서
   최소 폭이 남으면 트랙이 줄지 못해 페이지가 가로로 넘친다. */
.movie-list{display:flex;flex-direction:column;gap:var(--sp-4)}
.event-banner{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;
}
.eb-poster{
  position:relative;min-height:280px;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--line);
  background:radial-gradient(130% 100% at 85% 0,rgba(226,35,26,.55),transparent 55%),linear-gradient(150deg,#2a1418,#141420 60%,#0f0f16);
}
.eb-poster::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.025) 22px 23px)}
.eb-art{position:relative;display:flex;flex-direction:column;align-items:center;line-height:.95;font-weight:900;text-align:center}
.eb-art b{font-size:clamp(36px,4.4vw,56px);letter-spacing:.04em;color:#fff}
.eb-art i{font-style:normal;font-size:clamp(21px,2.6vw,33px);letter-spacing:.12em;color:var(--brand-strong)}
.eb-art em{font-style:normal;font-size:var(--fs-md);letter-spacing:.5em;color:rgba(255,255,255,.45);margin-top:10px;padding-left:.5em}
.eb-info{padding:30px 32px 26px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.eb-info h3{margin:8px 0 2px;font-size:clamp(20px,2.2vw,27px);font-weight:800;letter-spacing:-.02em}
.eb-info .time{color:var(--txt-3);font-size:var(--fs-md)}
.eb-actions{margin-top:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:20px}
.btn.primary.go.locked{background:var(--surface-3);color:var(--warn);cursor:not-allowed}
.btn.primary.go.closed{background:var(--surface-3);color:var(--txt-3);cursor:not-allowed}
.poster-live{position:absolute;top:12px;left:12px;font-size:var(--fs-2xs);font-weight:800;color:#fff;background:var(--brand);padding:3px 9px;border-radius:var(--r-full);letter-spacing:.03em;box-shadow:0 2px 8px rgba(226,35,26,.5)}
.badge{
  display:inline-block;background:var(--brand-tint);color:var(--brand-strong);
  font-size:var(--fs-2xs);font-weight:800;padding:4px 9px;border-radius:var(--r-full);
  border:1px solid var(--brand-line);letter-spacing:.02em;
}

/* ── 대기·입장 중 ── */
.wait-card{
  max-width:440px;margin:7vh auto 0;
  background:linear-gradient(180deg,var(--surface-2),var(--surface-1));
  border:1px solid var(--line);border-radius:var(--r-4);
  padding:44px 34px;text-align:center;box-shadow:var(--sh-3);
}
.wait-spinner{
  width:60px;height:60px;margin:0 auto var(--sp-5);
  border:4px solid var(--surface-3);border-top-color:var(--brand);
  border-radius:50%;animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.wait-title{font-size:var(--fs-lg);font-weight:700;color:var(--txt-2);margin-bottom:var(--sp-5)}
.wait-rank{font-size:var(--fs-md);color:var(--txt-3)}
.wait-rank b{
  font-size:var(--fs-5xl);line-height:1.05;color:var(--brand-strong);font-weight:800;
  display:block;margin:6px 0;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.wait-total{
  color:var(--txt-2);font-size:var(--fs-md);margin-top:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--line-soft);
  display:inline-block;min-width:220px;
}
.wait-total span{color:var(--txt);font-weight:700}
.wait-hint{color:var(--txt-3);font-size:var(--fs-xs);margin:var(--sp-5) 0 var(--sp-4);line-height:1.6}
.wait-heart{color:var(--txt-3);font-size:var(--fs-xs);margin-top:6px;min-height:14px;font-variant-numeric:tabular-nums}

/* ── 회차 선택 ── */
.branch{margin-bottom:var(--sp-6)}
.branch-name{font-size:var(--fs-md);font-weight:800;color:var(--txt-2);margin:0 0 var(--sp-3);display:flex;align-items:center;gap:8px}
.branch-name::before{content:"";width:6px;height:16px;background:var(--brand);border-radius:2px}
.screen-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:var(--sp-3)}
.sc-card{
  font-family:inherit;width:100%;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-2);
  padding:18px 16px;cursor:pointer;text-align:center;color:var(--txt);
  transition:transform .15s var(--ease),border-color .15s,background .15s;
}
.sc-card:hover:not(:disabled){border-color:var(--brand-line);transform:translateY(-2px);background:var(--surface-3)}
.sc-card .no{display:block;font-size:var(--fs-lg);font-weight:800;margin-bottom:8px}
.sc-card .remain{display:block;font-size:var(--fs-xs);color:var(--ok);font-weight:600}
.sc-card .remain.low{color:var(--warn)}
.sc-card.soldout{opacity:.45;cursor:not-allowed}
.sc-card.soldout .remain{color:var(--txt-3)}

/* ── 좌석도 ── */
.seat-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.screen-label{
  text-align:center;color:var(--txt-3);letter-spacing:10px;font-size:var(--fs-2xs);font-weight:800;
  padding-bottom:10px;margin:var(--sp-2) auto var(--sp-6);max-width:60%;
  border-bottom:3px solid var(--line);border-radius:0 0 50%/0 0 100% 100%;
  background:linear-gradient(180deg,rgba(226,35,26,.06),transparent);
}
/* 열 수는 서버가 정한다(회차 구성). 화면은 그 값을 받아 그린다 — 고정값을 두면 구성이 바뀔 때 어긋난다. */
.seat-grid{display:grid;grid-template-columns:auto repeat(var(--seat-cols,20),1fr);gap:5px;max-width:660px;margin:0 auto;overflow-x:auto;padding-bottom:4px}
.row-label{color:var(--txt-3);font-size:var(--fs-2xs);display:flex;align-items:center;justify-content:center;font-weight:700}
.seat{
  aspect-ratio:1;border-radius:5px;background:var(--seat-free);border:1px solid var(--seat-free-line);
  cursor:pointer;transition:transform .1s var(--ease),filter .1s,box-shadow .1s;
  font-size:0;min-width:16px;padding:0;
}
.seat:hover:not(:disabled){filter:brightness(1.5);transform:scale(1.08)}
.seat.taken{background:var(--seat-taken);border-color:var(--seat-taken-line);cursor:not-allowed}
.seat.mine{background:var(--brand);border-color:#ff6a60;box-shadow:0 0 0 2px var(--brand-tint),0 2px 8px rgba(226,35,26,.4)}
.seat-legend{display:flex;gap:22px;justify-content:center;margin:var(--sp-5) 0;color:var(--txt-3);font-size:var(--fs-sm)}
.seat-legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:7px}
.seat-legend .s-free{background:var(--seat-free);border:1px solid var(--seat-free-line)}
.seat-legend .s-taken{background:var(--seat-taken);border:1px solid var(--seat-taken-line)}
.seat-legend .s-mine{background:var(--brand)}
.seat-foot{display:flex;align-items:center;justify-content:space-between;max-width:660px;margin:0 auto;padding-top:var(--sp-4);border-top:1px solid var(--line);gap:var(--sp-4)}
.sel-info{color:var(--txt-2);font-size:var(--fs-md)}
.sel-info b{color:var(--txt);font-variant-numeric:tabular-nums}

/* ── 결제·완료 ── */
.pay-card,.done-card{
  max-width:460px;margin:6vh auto 0;
  background:linear-gradient(180deg,var(--surface-2),var(--surface-1));
  border:1px solid var(--line);border-radius:var(--r-4);padding:36px 32px;box-shadow:var(--sh-2);
}
.done-card{text-align:center}
.done-check{
  width:66px;height:66px;line-height:66px;margin:0 auto var(--sp-4);border-radius:50%;
  background:var(--ok);color:#fff;font-size:var(--fs-3xl);font-weight:800;
  box-shadow:0 6px 20px rgba(46,204,113,.35);animation:pop .45s var(--ease);
}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.pay-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-md)}
.pay-row span{color:var(--txt-3)}
.pay-row b{font-variant-numeric:tabular-nums}
.pay-note{margin-top:14px;font-size:var(--fs-xs);color:var(--txt-3);text-align:center}
.pay-row.total{border-bottom:0;font-size:var(--fs-xl);margin-top:var(--sp-2)}
.pay-row.total b{color:var(--brand-strong)}
.pay-actions{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.pay-actions .btn{flex:1}
.pay-status{text-align:center;color:var(--brand-strong);margin-top:var(--sp-4);font-weight:700;font-size:var(--fs-md)}

/* ── 상단 우측: 세션 타이머·신원 ── */
.active-timer{background:var(--brand-tint);border:1px solid var(--brand-line);color:var(--brand-soft);padding:7px 13px;border-radius:var(--r-1);font-size:var(--fs-sm);font-weight:700;font-variant-numeric:tabular-nums}
.active-timer b{color:var(--brand-strong)}
.active-timer.warn{animation:pulse .9s infinite}
@keyframes pulse{50%{opacity:.45}}
.auth{display:flex;align-items:center;gap:10px}
.auth .who{font-size:var(--fs-md);color:var(--txt-2)}
.auth .who i{color:var(--brand-strong);font-style:normal;font-weight:700}
.sim-badge{font-style:normal;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.12em;color:var(--brand-strong);border:1px solid var(--brand-line);background:var(--brand-tint);padding:2px 7px;border-radius:var(--r-full);margin-left:9px;vertical-align:3px}

/* ── 토스트 ── */
.toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);background:var(--surface-3);border:1px solid var(--line);padding:14px 24px;border-radius:var(--r-2);font-size:var(--fs-md);font-weight:600;z-index:50;box-shadow:var(--sh-3);animation:toastin .28s var(--ease);max-width:calc(100vw - 32px);text-align:center}
.toast.err{border-color:var(--brand-line);color:var(--brand-soft)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* ── 히어로 ── */
.hero{margin:6px 0 var(--sp-6)}
.hero-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hero h1{margin:0 0 10px;font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.035em}
.linklike{background:none;border:none;color:var(--txt-3);font-size:var(--fs-sm);font-weight:600;cursor:pointer;font-family:inherit;padding:0}
.linklike:hover{color:var(--brand-strong)}
.hero-sub{margin:0 0 16px;color:var(--txt-2);font-size:var(--fs-lg);line-height:1.7}
.intro{margin:0 0 16px;padding:16px 18px;background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r-2)}
.intro p{margin:0 0 10px;color:var(--txt-2);font-size:var(--fs-sm);line-height:1.7}
.intro p:last-child{margin-bottom:0}
.intro-note{color:var(--txt-3);font-size:var(--fs-xs);line-height:1.65}
.intro-links a{color:var(--brand-strong);font-weight:700;text-decoration:none}
.intro-links a:hover{text-decoration:underline}

/* 인용 — 원문 그대로 + 출처. 사건이 주장이 아니라 기록임이 읽히게 */
.quote{margin:0 0 14px;padding:0 0 0 14px;border-left:3px solid var(--brand)}
.quote blockquote{margin:0;color:var(--txt);font-size:var(--fs-md);line-height:1.65;font-weight:600;letter-spacing:-.01em}
.quote figcaption{margin-top:6px;color:var(--txt-3);font-size:var(--fs-xs)}
.quote figcaption a{color:var(--txt-2);text-decoration:underline;text-underline-offset:2px}
.quote figcaption a:hover{color:var(--brand-strong)}

/* ── 아키텍처 다이어그램 ── */
.arch{margin:14px 0 12px}
.arch-row{display:flex;align-items:stretch;gap:8px}
.arch-node{flex:1;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-2);padding:12px 8px 11px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;min-width:0}
.arch-ico{display:flex;gap:9px;color:var(--txt-2);margin-bottom:6px}
.arch-ico svg{width:20px;height:20px;fill:currentColor}
.arch-txt{display:flex;flex-direction:column;align-items:center;gap:2px}
.arch-node b{font-size:var(--fs-sm);color:var(--txt);letter-spacing:-.01em}
.arch-node i{font-style:normal;font-size:var(--fs-2xs);color:var(--txt-3);line-height:1.45}
.arch-arrow{align-self:center;color:var(--txt-3);font-weight:700;flex:none;font-size:var(--fs-md)}
.arch-base{display:flex;gap:22px;align-items:center;justify-content:center;font-size:var(--fs-xs);color:var(--txt-3);font-weight:600;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line)}
.arch-base span{display:inline-flex;align-items:center;gap:7px}
.arch-base svg{width:14px;height:14px;fill:currentColor}

/* ── 신원 안내·현황 타일 ── */
.id-hint{margin:0 0 14px;padding:11px 16px;background:var(--brand-tint);border:1px solid var(--brand-line);border-radius:var(--r-2);font-size:var(--fs-md);color:var(--txt)}
.id-hint .linklike{color:var(--brand-strong);font-size:var(--fs-md);font-weight:800}
/* 실패는 토스트·시계 경고와 같은 계열로 — 회색이면 본문과 구별이 안 돼 뭔가 잘못된 신호가 약하다 */
.load-err{color:var(--brand-soft);font-size:var(--fs-md)}
.load-err .linklike{color:var(--brand-strong);font-size:var(--fs-md);font-weight:800;margin-left:4px}
/* 비어 있는 것은 실패가 아니다 — 본문 색을 그대로 쓴다 */
.load-empty{color:var(--txt-3);font-size:var(--fs-md)}
/* 연속 실패로 갱신이 멈춘 값 */
.qv-feed.stale{opacity:.55}
@keyframes bump{30%{transform:scale(1.14);color:var(--brand-strong)}}

/* 좌석 현황판 — 입장 전에도 보이는 회차별 잔여/전체. 러시가 좌석을 깎는 것이 여기서 보인다 */
.board{margin-top:18px}
.board-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.board-sum{font-size:var(--fs-sm);color:var(--txt-3);font-weight:700}
.board-sum b{font-size:var(--fs-lg);color:var(--txt);font-weight:800;font-variant-numeric:tabular-nums}
.board-sum b.bump{animation:bump .5s var(--ease)}
.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.bd{background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-2);
    padding:10px 12px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.bd-name{font-size:var(--fs-xs);color:var(--txt-3);font-weight:700}
.bd-num{font-size:var(--fs-xs);color:var(--txt-3);font-variant-numeric:tabular-nums}
.bd-num b{font-size:var(--fs-lg);color:var(--txt);font-weight:800;margin-right:2px}
.bd-num b.bump{animation:bump .5s var(--ease)}
/* 잔여가 줄수록 눈에 띄게 — 숫자를 읽기 전에 매진 임박이 보이게 한다 */
.bd.warn{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.bd.hot{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--surface-1))}
.bd.hot .bd-num b{color:var(--brand)}
.bd.full{opacity:.5}
.bd.full .bd-num b{font-size:var(--fs-sm)}
.list-title{font-size:var(--fs-sm);font-weight:800;margin:0 0 var(--sp-4);color:var(--txt-3);letter-spacing:.07em}
input[type="checkbox"]{accent-color:var(--brand)}

/* ── 레이아웃 — 왼쪽 서비스 · 오른쪽 콘솔 ──
   1fr이 아니라 minmax(0,1fr): 안쪽 내용의 최소 폭이 트랙을 밀어내 페이지가 가로로 넘치는 것을 막는다. */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:var(--sp-6);align-items:start}
.console{position:sticky;top:74px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 90px)}
.con-head{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:var(--surface-2);font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;color:var(--txt-2);border-bottom:1px solid var(--line-soft)}
.con-body{padding:20px 22px;overflow-y:auto}
.con-jump{display:none}
.con-group{background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r-2);padding:14px 16px;margin-bottom:12px}
.con-group .con-row:last-child{margin-bottom:0}
.con-sec{font-size:var(--fs-xs);font-weight:800;color:var(--txt-3);letter-spacing:.07em;margin:0 0 10px}
/* 섹션 제목 안의 숫자 강조. 보조 설명(.sec-hint)까지 잡지 않도록 클래스로 좁힌다 */
.con-sec .num{color:var(--txt);font-size:var(--fs-md)}
.sec-hint{font-weight:600;color:var(--txt-3);font-size:var(--fs-2xs);letter-spacing:0;margin-left:6px}
.con-row{display:flex;gap:8px;align-items:center;margin-bottom:11px;flex-wrap:wrap}
.con-row.ctl{margin:0;justify-content:space-between}
.ctl-check{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-md);color:var(--txt-2);cursor:pointer;user-select:none}
.con-hint{font-size:var(--fs-2xs);color:var(--txt-3);line-height:1.55;margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft)}
.con-hint p{margin:0 0 4px}
.con-hint p:last-child{margin-bottom:0}
.con-hint b{color:var(--txt-2)}
.con-hint>summary{cursor:pointer;color:var(--txt-2);font-weight:700;list-style:none;padding:3px 0;min-height:24px}
.con-hint>summary::-webkit-details-marker{display:none}
.con-hint>summary::after{content:" ▾";color:var(--txt-3)}
.con-hint[open]>summary::after{content:" ▴"}
.con-hint>summary+p{margin-top:6px}
.con-note{font-size:var(--fs-xs);color:var(--warn);margin:-4px 0 10px 2px;font-variant-numeric:tabular-nums}
.con-note:empty{margin:0}
.con-clock{font-size:var(--fs-3xl);font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums;letter-spacing:.06em;text-align:center;background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--r-2);padding:12px 0;margin-bottom:18px;transition:border-color .3s,color .3s}
.clock-sub{display:block;font-size:var(--fs-xs);color:var(--txt-3);font-weight:700;margin-top:3px;letter-spacing:.01em;min-height:15px}
.con-clock.warn{border-color:var(--warn);color:var(--warn)}
.con-clock.warn .clock-sub{color:var(--warn)}
.con-clock.hot{border-color:var(--brand-strong);color:var(--brand-strong);animation:pulse .8s infinite}
.con-clock.hot .clock-sub{color:var(--brand-strong)}
.con-clock.live{border-color:var(--brand-line)}
.con-clock.live .clock-sub{color:var(--brand-strong)}
select.slot{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-1);color:var(--txt);padding:9px 8px;font-size:var(--fs-sm);font-family:inherit;width:172px;cursor:pointer}
select.slot.num{width:118px}
.open-hist{list-style:none;margin:2px 0 0;padding:0;font-size:var(--fs-xs);color:var(--txt-3);font-variant-numeric:tabular-nums}
.open-hist li{padding:2px 0}

/* ── 가상 관객 스트립·실황 ── */
.qv-empty{color:var(--txt-3);font-size:var(--fs-xs);font-weight:500}
.qv-strip{display:flex;flex-wrap:wrap;gap:5px}
.qv-legend{font-weight:600;color:var(--txt-3);font-size:var(--fs-xs);display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft)}
.qv-legend .lg-grp{display:inline-flex;align-items:center;gap:3px;color:var(--txt-2)}
.qv-legend .d{width:9px;height:9px;margin:0 3px 0 8px}
.d{display:inline-block;width:14px;height:14px;border-radius:50%}
.d-lobby{background:rgba(255,176,46,.25);border:1px solid var(--warn)}
.d-wait{background:#5a5a70}
.d-in{background:var(--brand);box-shadow:0 0 6px rgba(226,35,26,.5)}
.d-book{background:var(--ok)}
.d-gone{background:transparent;border:1px solid var(--txt-faint)}
.qv-feed{list-style:none;margin:0;padding:0;font-size:var(--fs-sm);max-height:190px;overflow-y:auto}
.qv-feed li{padding:3px 0;color:var(--txt-2);border-bottom:1px solid var(--line-soft);animation:feedin .28s var(--ease)}
@keyframes feedin{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.qv-feed li span{color:var(--txt-3);margin-right:8px;font-variant-numeric:tabular-nums;font-size:var(--fs-2xs)}
.qv-feed li.in{color:var(--brand-soft)}
.qv-feed li.book{color:var(--ok)}
.qv-feed li.gone{color:var(--txt-3)}
.qv-feed li.me{color:var(--txt);font-weight:700}
.qv-feed li.sys{color:var(--txt-3)}

/* ── 반응형 ── */
/* 2단이 유지되는 구간에서 왼쪽 열이 좁아지면 다이어그램 4열이 눌린다 → 세로 카드로 */
@media (min-width:981px) and (max-width:1250px){
  .arch-row{flex-direction:column;gap:6px}
  .arch-arrow{transform:rotate(90deg);padding:2px 0}
  .arch-node{flex-direction:row;justify-content:flex-start;text-align:left;gap:13px;padding:10px 14px}
  .arch-ico{margin-bottom:0;flex:none}
  .arch-txt{align-items:flex-start}
}
/* 중간 폭(태블릿 세로·노트북 반화면): 1열 전환 + 콘솔 정적 + 콘솔 이동 버튼 노출 */
@media (max-width:980px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .console{position:static;max-height:none}
  .con-body{overflow-y:visible}
  .con-jump{display:inline-block;margin-top:14px}
  .event-banner{grid-template-columns:minmax(0,1fr)}
  .eb-poster{min-height:200px;border-right:none;border-bottom:1px solid var(--line)}
}
/* 좁은 폭(폰): 상단바 축소 + 터치 크기 */
@media (max-width:640px){
  .top-right{gap:8px}
  .auth .who{display:none}
  /* 시뮬레이션 표기는 좁은 화면에서도 남긴다 — 실제 예매 사이트로 오인되지 않게 */
  .sim-badge{font-size:var(--fs-2xs);letter-spacing:.06em;padding:2px 5px;margin-left:6px}
  select.slot{font-size:var(--fs-lg)}   /* iOS 포커스 자동 확대 방지 */
  .seat{min-width:24px}
  .arch-row{flex-direction:column;gap:6px}
  .arch-arrow{transform:rotate(90deg);padding:2px 0}
  .arch-node{flex-direction:row;justify-content:flex-start;text-align:left;gap:13px;padding:10px 14px}
  .arch-ico{margin-bottom:0;flex:none}
  .arch-txt{align-items:flex-start}
  .arch-base{flex-wrap:wrap;gap:10px 22px}
}
@media (max-width:520px){
  #app{padding:var(--sp-5) var(--sp-3) 64px}
  .title{font-size:var(--fs-xl)}
  .wait-card,.pay-card,.done-card{padding:30px 22px}
  .wait-rank b{font-size:var(--fs-4xl)}
  .hero h1{font-size:var(--fs-2xl)}
  .brand{font-size:var(--fs-xl)}
}