/* ============================================================
   stage.css — 가상 스테이지 · 디자인 토큰 · 공용 레이아웃
   1920x1080 고정 캔버스를 scale()로 뷰포트에 맞춥니다.
   행사장 프로젝터 해상도가 무엇이든 레이아웃이 깨지지 않게.
   ============================================================ */

@font-face {
  font-family: "Pretendard";
  src: url("../assets/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-display: swap;
}

:root {
  /* 프로젝터에서 순검정(#000)은 회색으로 뜨고 밴딩이 생깁니다. 살짝 푸른 먹색. */
  --bg:        #0a0e1a;
  --bg-2:      #121a2e;
  --ink:       #eef3fb;
  --ink-dim:   #8fa0bd;

  --gold:      #f5c451;
  --accent-rgb: 245, 196, 81;   /* 포인트 색상의 rgb — show.js 가 덮어씁니다 */
  --gold-hi:   #ffeaa8;
  --gold-deep: #a87b1d;
  --silver:    #c9d3e0;
  --cyan:      #4de2ff;

  --stage-w: 1920px;
  --stage-h: 1080px;

  /* 리허설 모드에서 JS가 0.33로 덮어씁니다 (3배속) */
  --t: 1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  overflow: hidden;
  cursor: none;                 /* 무대 화면에 마우스 커서가 보이면 몰입이 깨집니다 */
}

body {
  font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  color: var(--ink);
  /* 얇은 웨이트는 뒷자리에서 안 읽힙니다. 기본을 Medium으로. */
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 가상 스테이지 ---------- */
#viewport {
  position: fixed; inset: 0; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #16203a 0%, var(--bg) 62%);
}

/* 그리드/플렉스 센터링은 아이템이 컨테이너보다 클 때 start 로 밀립니다.
   스테이지는 뷰포트보다 항상 크므로 절대위치 + translate 로 중앙에 고정합니다. */
#stage {
  position: absolute; left: 50%; top: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: center center;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

/* 씬은 스테이지 위에 겹쳐 쌓입니다 */
.scene {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* auto 였다면 열이 내용만큼 넓어져 화면 밖으로 나갑니다 */
  place-items: center;
  padding: 90px 120px;
}
.scene > * { max-width: 100%; min-width: 0; }

/* ---------- 공용 타이포 ---------- */
/* 최소 32px 규칙: 이보다 작은 글자는 뒷자리에서 안 읽힙니다 */
.eyebrow {
  font-size: 34px; font-weight: 600; letter-spacing: .34em;
  color: var(--ink-dim); text-transform: uppercase;
}
.category-name {
  font-size: 132px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.05;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.work-title { font-size: 76px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.team-name  { font-size: 150px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.members    { font-size: 52px; font-weight: 600; color: var(--ink-dim); letter-spacing: .04em; }

.gold-rule {
  height: 4px; border: 0; width: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------- 긴장 게이지 (화면 하단) ---------- */
#tension {
  position: absolute; left: 0; bottom: 0;
  height: 6px; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-hi));
  box-shadow: 0 0 24px rgba(var(--accent-rgb), .8);
  opacity: 0;
}
#tension.run { animation: tension-fill calc(6s * var(--t)) linear forwards; opacity: 1; }
#tension.burst { width: 100% !important; animation: none; opacity: 0; transition: opacity .4s; }
@keyframes tension-fill { from { width: 0%; } to { width: 100%; } }

/* ---------- 블랙아웃 (B키) ---------- */
#blackout {
  position: fixed; inset: 0; background: #000; z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
body.blackout #blackout { opacity: 1; }

/* ---------- 목차 오버레이 (Esc) ---------- */
#toc {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6,9,18,.94); backdrop-filter: blur(10px);
  display: none; place-items: center;
}
body.toc-open #toc { display: grid; }
#toc .inner { width: min(1100px, 86vw); }
#toc h2 { font-size: 30px; letter-spacing: .3em; color: var(--ink-dim); margin-bottom: 26px; font-weight: 600; }
#toc ol { list-style: none; display: grid; gap: 8px; }
#toc li {
  display: flex; align-items: baseline; gap: 20px;
  padding: 14px 22px; border-radius: 10px; font-size: 26px;
  border: 1px solid transparent;
}
#toc li .idx { color: var(--ink-dim); font-variant-numeric: tabular-nums; font-size: 22px; min-width: 42px; }
#toc li .tier { margin-left: auto; font-size: 19px; color: var(--ink-dim); letter-spacing: .12em; }
#toc li.current { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .5); color: var(--gold-hi); }
#toc-source { margin-top: 20px; font-size: 20px; padding: 12px 18px; border-radius: 9px;
  border: 1px solid #33415f; color: var(--ink-dim); }
#toc-source.edited { border-color: rgba(var(--accent-rgb), .55); color: var(--gold-hi);
  background: rgba(var(--accent-rgb), .08); }
#toc-source.stale { border-color: #d9534f; color: #ffb3ae;
  background: rgba(217,83,79,.14); font-weight: 700; }
#toc .hint { margin-top: 22px; font-size: 20px; color: var(--ink-dim); line-height: 1.9; }
#toc kbd {
  font-family: inherit; font-size: 18px; padding: 3px 10px; border-radius: 6px;
  background: #1d2740; border: 1px solid #33415f; color: var(--ink);
}

/* ---------- 리허설 모드 배지 ---------- */
#rehearse-badge {
  position: fixed; top: 16px; right: 18px; z-index: 95;
  font-size: 18px; letter-spacing: .2em; font-weight: 700;
  padding: 8px 16px; border-radius: 999px;
  background: #b3261e; color: #fff; display: none;
}
body.rehearse #rehearse-badge { display: block; }

/* ---------- 컨페티 캔버스 ---------- */
#confetti-canvas {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
}

/* ---------- 화면 플래시 ---------- */
#flash {
  position: fixed; inset: 0; z-index: 85; background: #fff;
  opacity: 0; pointer-events: none;
}
#flash.go { animation: flash-out .5s ease-out; }
@keyframes flash-out { from { opacity: .85; } to { opacity: 0; } }

/* 애니메이션 즉시 종료(S키 / 복구)용 — 모든 전이를 0으로 */
.instant, .instant * {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* 씬 컨테이너 */
.stage-root { position: absolute; inset: 0; }