/* Cormorant Garamond — 영문 장식용 (OFL) */
@font-face { font-family: 'Cormorant'; font-weight: 500; font-style: normal; src: url(../fonts/files/cormorant-garamond-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant'; font-weight: 600; font-style: normal; src: url(../fonts/files/cormorant-garamond-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant'; font-weight: 500; font-style: italic; src: url(../fonts/files/cormorant-garamond-latin-500-italic.woff2) format('woff2'); }

:root {
  --gold-1: #f8ecc4;
  --gold-2: #e2c27a;
  --gold-3: #b98a35;
  --ink: #0b1124;
  --s: 1;
  --serif: 'Noto Serif KR', 'Batang', serif;
  --deco: 'Cormorant', 'Noto Serif KR', serif;
}

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

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, #1c2548 0%, #0e1530 52%, #070a16 100%);
  color: var(--gold-1);
  font-family: var(--serif);
  cursor: none;
  user-select: none;
}

#fx { position: fixed; inset: 0; width: 100%; height: 100%; }
#vignette { position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 22vmax rgba(2, 4, 12, .6); }
#flash { position: fixed; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(255, 236, 180, .55) 0%, rgba(255, 220, 140, .12) 45%, transparent 70%); }

/* 4:3 기준 무대(1600x1200). 창 크기에 맞춰 --s 로 균일 축소/확대 */
#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1600px; height: 1200px;
  transform: translate(-50%, -50%) scale(var(--s));
}
body.r169 #stage { width: 1920px; height: 1080px; }

#scene { position: absolute; inset: 0; }
.scene-el { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }

/* ---------- 타이포 ---------- */
.eyebrow {
  margin-top: 300px;
  font-family: var(--deco); font-weight: 500; font-size: 34px;
  letter-spacing: .5em; padding-left: .5em; color: var(--gold-2);
}
body.r169 .eyebrow { margin-top: 230px; }

.rule {
  width: 520px; height: 2px; margin-top: 34px;
  background: linear-gradient(90deg, transparent, var(--gold-2) 18%, var(--gold-1) 50%, var(--gold-2) 82%, transparent);
  transform-origin: 50% 50%;
}

.org {
  margin-top: 64px; white-space: nowrap; display: inline-block;
  font-weight: 400; font-size: 56px; letter-spacing: .08em; color: #efdfae;
}

/* 후광은 filter: drop-shadow 대신 정적인 그라디언트 레이어로 (애니메이션되는 글자 위의 필터는 매 프레임 다시 계산돼 GPU 부담이 큼) */
.name-wrap { margin-top: 40px; position: relative; isolation: isolate; }
.name-wrap::before, .funfurl-title::before, .emblem::before {
  content: ''; position: absolute; left: -14%; right: -14%; top: -18%; bottom: -18%; z-index: -1; pointer-events: none;
  /* closest-side: 박스 가장자리에서 정확히 투명해져 사각형 경계가 보이지 않음 */
  background: radial-gradient(closest-side at 50% 52%, rgba(222, 182, 90, .30) 0%, rgba(222, 182, 90, .14) 50%, rgba(222, 182, 90, 0) 100%);
}
.name {
  display: inline-block; white-space: nowrap;
  font-weight: 600; font-size: 200px; line-height: 1.15; letter-spacing: .1em; padding-left: .1em;
}
.ch {
  display: inline-block; position: relative;
  background: linear-gradient(180deg, var(--gold-1) 12%, var(--gold-2) 55%, var(--gold-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 반짝임 레이어: 더 밝은 같은 글자를 겹쳐 두고 opacity 만 애니메이션 */
.ch .hi::before { content: attr(data-c); }
.ch .hi {
  position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; will-change: opacity;
  background: linear-gradient(180deg, #fffdf0 10%, #fff0b8 55%, #f0cf7c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.big-title {
  margin-top: 70px; white-space: nowrap; display: inline-block;
  font-weight: 600; font-size: 168px; line-height: 1.2; letter-spacing: .14em; padding-left: .14em;
}
.subtitle {
  margin-top: 56px; font-weight: 400; font-size: 44px; letter-spacing: .12em; padding-left: .12em;
  color: #e8d7a2; white-space: nowrap;
}

/* ---------- 릴레이 체인 ---------- */
#chain {
  position: absolute; left: 50%; bottom: 150px; width: 1120px; margin-left: -560px;
  display: flex; align-items: center; opacity: 0;
}
body.r169 #chain { bottom: 120px; }
#chain .node {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid rgba(226, 194, 122, .6); background: rgba(11, 17, 36, .9);
}
#chain .node::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: radial-gradient(circle, #fff4d0, var(--gold-2) 70%);
  box-shadow: 0 0 18px 4px rgba(240, 205, 120, .75);
  transform: scale(0); opacity: 0;
}
#chain .node.lit { border-color: var(--gold-1); }
#chain .node.lit::after { transform: scale(1); opacity: 1; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s; }
#chain .link { position: relative; flex: 1; height: 3px; background: rgba(226, 194, 122, .35); }
#chain .link .fill {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-2), var(--gold-1));
  box-shadow: 0 0 12px rgba(240, 205, 120, .7);
}
.counter {
  position: absolute; left: 0; right: 0; bottom: 84px; text-align: center;
  font-family: var(--deco); font-weight: 500; font-size: 30px; letter-spacing: .4em; padding-left: .4em; color: var(--gold-2);
  opacity: 0;
}
body.r169 .counter { bottom: 66px; }

/* ---------- 타이머 (우측 상단, 안전 여백 5%) ---------- */
#timer {
  position: absolute; top: 64px; right: 80px; width: 168px; height: 168px;
  transition: opacity .6s;
}
#timer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#timer .track { fill: rgba(11, 17, 36, .55); stroke: rgba(226, 194, 122, .25); stroke-width: 3; }
#timer .prog {
  fill: none; stroke: url(#tg); stroke-width: 5; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(240, 205, 120, .6));
}
#timer .digits {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--deco); font-weight: 600; font-size: 48px; color: var(--gold-1);
}
#timer .digits span { display: inline-block; width: .56em; text-align: center; }
#timer .digits span.colon { width: .3em; }
#timer.idle { opacity: .6; }
#timer.paused { opacity: .75; }
#timer.hidden { opacity: 0; }

/* ---------- 오버레이 ---------- */
#black { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; }
#gate {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(ellipse at 50% 40%, #1c2548 0%, #0b1124 70%);
}
#gate .gate-eyebrow { font-family: var(--deco); font-size: 4.2vmin; letter-spacing: .5em; padding-left: .5em; color: var(--gold-2); }
#gate .gate-text { margin-top: 4vmin; font-size: 3.4vmin; color: var(--gold-1); }
#gate .gate-sub { margin-top: 1.6vmin; font-size: 2.2vmin; color: rgba(226, 194, 122, .7); }

/* ---------- 인물 카드 보조 요소 ---------- */
.role {
  margin-top: 22px; white-space: nowrap; display: inline-block;
  font-weight: 400; font-size: 52px; letter-spacing: .14em; padding-left: .14em; color: #e8d7a2;
}
.scene-counter {
  position: absolute; left: 0; right: 0; bottom: 84px; text-align: center;
  font-family: var(--deco); font-weight: 500; font-size: 30px; letter-spacing: .4em; padding-left: .4em; color: var(--gold-2);
}
body.r169 .scene-counter { bottom: 66px; }

/* ---------- 영상 ---------- */
.video-wrap {
  position: absolute; left: 50%; top: 54%; width: 1280px; aspect-ratio: 16 / 9; margin-left: -640px; transform: translateY(-50%);
  background: #000; border: 2px solid rgba(226, 194, 122, .7);
  box-shadow: 0 0 60px rgba(222, 182, 90, .28), 0 0 0 10px rgba(11, 17, 36, .55);
}
body.r169 .video-wrap { width: 1500px; margin-left: -750px; }
.video-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.video-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #1c2548 0%, #0b1124 75%);
}
.ph-eyebrow { font-family: var(--deco); font-size: 30px; letter-spacing: .5em; padding-left: .5em; color: var(--gold-2); }
.ph-title { margin-top: 28px; font-weight: 600; font-size: 96px; letter-spacing: .12em; padding-left: .12em; color: var(--gold-1); }
.ph-note { margin-top: 30px; font-size: 28px; letter-spacing: .06em; color: rgba(226, 194, 122, .65); }

/* ---------- 카드 피날레 ---------- */
.ftop { position: absolute; top: 190px; left: 0; right: 0; text-align: center; }
body.r169 .ftop { top: 100px; }
.feyebrow { font-family: var(--deco); font-weight: 500; font-size: 32px; letter-spacing: .5em; padding-left: .5em; color: var(--gold-2); }
.ftext { margin-top: 30px; display: inline-block; white-space: nowrap; font-weight: 400; font-size: 54px; letter-spacing: .1em; padding-left: .1em; color: #efdfae; }
.ftext.sm { font-size: 42px; margin-top: 34px; color: #e8d7a2; }
.ftop.unfurl { top: 150px; }
body.r169 .ftop.unfurl { top: 80px; }
.funfurl-title { display: inline-block; position: relative; isolation: isolate; white-space: nowrap; font-weight: 600; font-size: 124px; line-height: 1.2; letter-spacing: .12em; padding-left: .12em; }

/* 금빛 상승: 윗변이 부드럽게 옅어지는 고정 레이어를 translateY 로 올림 (배율·height 애니메이션은 매 프레임 타일을 다시 그려 끊김을 만듦) */
.fglow {
  position: absolute; left: 0; right: 0; top: 0; height: 1800px; will-change: transform;
  background: linear-gradient(180deg, rgba(232, 190, 100, 0) 0, rgba(232, 190, 100, .12) 330px, rgba(232, 190, 100, .34) 600px, rgba(232, 190, 100, .34) 100%);
}
.frows { position: absolute; inset: 0; }
.frow {
  position: absolute; left: 50%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(226, 194, 122, .5) 10%, rgba(226, 194, 122, .5) 90%, transparent);
}
.frow .beads { position: absolute; left: 4%; right: 4%; bottom: 3px; display: flex; justify-content: space-between; align-items: flex-end; }
.bead { position: relative; border-radius: 4px 4px 2px 2px; background: rgba(226, 194, 122, .3); transform-origin: 50% 100%; }
/* 켜진 상태: 밝은 막대+후광을 미리 그려 두고 opacity 만 변경 (box-shadow/색 애니메이션은 매 프레임 다시 그려짐) */
.bead-glow {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0; will-change: opacity;
  background: #f6dfa0; box-shadow: 0 0 14px 3px rgba(240, 205, 120, .7);
}
/* 빛 번짐 선: top/width 애니메이션 대신 translateY/scaleX (폭 1240px 기준) */
.fsweep {
  position: absolute; left: 50%; top: 0; width: 1240px; height: 5px; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(90deg, transparent, #fff1c4 20%, #fff1c4 80%, transparent);
  box-shadow: 0 0 22px 6px rgba(255, 224, 150, .75);
}

/* ---------- 엔딩 ---------- */
.ending { }
.emblem {
  position: relative; isolation: isolate;
  margin-top: 150px; font-family: var(--deco); font-weight: 600; font-size: 400px; line-height: 1; letter-spacing: .04em; padding-left: .04em;
}
body.r169 .emblem { margin-top: 70px; font-size: 340px; }
.emblem-word { margin-top: 10px; font-family: var(--deco); font-weight: 500; font-size: 44px; letter-spacing: .7em; padding-left: .7em; color: var(--gold-2); }
.end-title { margin-top: 56px; display: inline-block; white-space: nowrap; font-weight: 600; font-size: 100px; letter-spacing: .14em; padding-left: .14em; }
body.r169 .end-title { margin-top: 30px; font-size: 88px; }
.ending .subtitle { margin-top: 36px; font-size: 38px; }

/* ---------- 오프닝 (엠블럼은 엔딩보다 작게, 기관명이 주인공) ---------- */
.opening .emblem { margin-top: 190px; font-size: 280px; }
body.r169 .opening .emblem { margin-top: 110px; font-size: 240px; }
.opening .rule { margin-top: 44px; }
.open-title {
  margin-top: 64px; display: inline-block; white-space: nowrap;
  font-weight: 600; font-size: 96px; line-height: 1.25; letter-spacing: .1em; padding-left: .1em;
}
body.r169 .open-title { margin-top: 44px; }
.open-sub {
  margin-top: 34px; white-space: nowrap; font-weight: 400; font-size: 56px; letter-spacing: .5em; padding-left: .5em; color: #e8d7a2;
}

/* ---------- 운영자 피드백 (청중 화면에서는 작고 은은하게, D 키로 끌 수 있음) ---------- */
#toast {
  position: fixed; left: 28px; bottom: 22px; z-index: 6; pointer-events: none; opacity: 0;
  padding: 8px 16px; border-radius: 6px; font-size: 22px; letter-spacing: .04em;
  color: rgba(248, 236, 196, .8); background: rgba(7, 10, 22, .6);
}
#timeset {
  display: none; position: fixed; left: 28px; bottom: 76px; z-index: 6; pointer-events: none;
  padding: 14px 22px; border-radius: 8px; background: rgba(7, 10, 22, .78); border: 1px solid rgba(226, 194, 122, .5);
}
#timeset .ts-title { font-size: 20px; color: var(--gold-2); letter-spacing: .1em; }
#timeset .ts-value { margin-top: 6px; font-family: var(--deco); font-weight: 600; font-size: 56px; color: var(--gold-1); letter-spacing: .08em; }
#timeset .ts-hint { margin-top: 4px; font-size: 18px; color: rgba(226, 194, 122, .7); }

#help {
  display: none; position: fixed; inset: 0; z-index: 8; background: rgba(5, 8, 18, .92);
  align-items: center; justify-content: center; overflow: auto;
}
#help[style*="block"] { display: flex !important; }
.help-box { margin: auto; padding: 3vmin 4vmin; max-width: 96vw; }
.help-title { font-size: 3.4vmin; color: var(--gold-1); letter-spacing: .3em; margin-bottom: 1.6vmin; }
.help-box table { border-collapse: collapse; font-size: 2.1vmin; line-height: 1.25; color: #efdfae; }
.help-box th { text-align: left; color: var(--gold-2); padding: .35vmin 2.4vmin .35vmin 0; font-weight: 600; white-space: nowrap; }
.help-box td { padding: .35vmin 2.4vmin .35vmin 0; }
.help-box td.k { color: var(--gold-1); white-space: nowrap; font-family: var(--deco); font-weight: 600; font-size: 2.3vmin; }

/* 타이머 진행 표시: 진행 중에는 콜론이 천천히 깜빡임 */
@keyframes colonblink { 0%, 60% { opacity: 1; } 80%, 100% { opacity: .5; } }
#timer.running .digits span.colon { animation: colonblink 1s steps(1, end) infinite; }
#gate .gate-info { margin-top: 3.4vmin; font-size: 2.1vmin; line-height: 1.8; color: rgba(248, 236, 196, .85); }

/* 타이머: 0:00 이 되면 잠깐 보여 준 뒤 사라짐 (시간이 다시 생기면 즉시 복귀) */
#timer.done { opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.fline { text-align: center; }