/* 첫 화면 배치 — 색은 토큰만. 포스터 구역(--stage)은 두 테마에서 같다 */

/* 첫 구역(설계 165 §3-2) — S: 사진 위 → 글 아래(얼굴 위에 글을 얹지 않는다) · M: 「글 │ 사진」 두 열 · L+: 사진 위에 글과 대사.
   그림 · 덮개 · 글은 같은 격자 안의 영역으로 놓는다(문서 순서: 그림 → 덮개 → 글) */
.stage{position:relative;overflow:hidden;background:var(--stage);color:var(--on-stage);display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "copy"}
.stage-art{grid-area:art;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;object-position:72% 30%}
.stage-shade{grid-area:art;position:relative;background:linear-gradient(0deg,var(--stage) 0%,transparent 40%)}
.stage-in{grid-area:copy;position:relative;width:100%;display:grid;gap:28px;grid-template-columns:minmax(0,1fr);padding-top:8px;padding-bottom:40px}
.stage-copy{display:flex;flex-direction:column;gap:20px}
@media (min-width:640px){
  .stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy art"}
  .stage-art{aspect-ratio:auto;height:100%;min-height:520px}
  .stage-shade{background:linear-gradient(90deg,var(--stage) 0%,transparent 35%)}
  .stage-in{align-content:center;padding-top:48px;padding-bottom:48px;margin:0}
}
@media (min-width:1024px){
  .stage{display:flex;min-height:min(92vh,980px)}
  .stage-art{position:absolute;inset:0;height:100%;animation:vsZoom 24s ease-in-out infinite alternate}
  .stage-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--stage-shade) 0%,transparent 62%),linear-gradient(0deg,var(--stage) 0%,transparent 34%)}
  .stage-in{margin:0 auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy lines";align-items:end;gap:40px;padding-top:12vh;padding-bottom:56px}
  .stage-copy{grid-area:copy;align-self:center}
  .lines{grid-area:lines}
}
.stage-badge{align-self:flex-start;display:flex;align-items:center;gap:8px;font-size:13px;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--stage-line);background:var(--stage-glass);color:var(--on-stage)}
.stage-title{font-size:clamp(40px,6.4vw,84px);font-weight:900;line-height:1.08;letter-spacing:-2px}
.stage-lede{font-size:clamp(16px,1.4vw,20px);line-height:1.7;color:var(--on-stage-2)}
.stage-actions{display:flex;flex-wrap:wrap;gap:12px}
.stage-notes{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--on-stage-dim)}

/* 성우가 말하는 대사 — 모든 줄이 처음부터 보이고, 말하는 줄만 차례로 빛난다(CSS 만) */
.lines{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
@media (min-width:1024px){.lines{align-items:flex-end}}
.line{display:flex;flex-direction:column;gap:4px;max-width:100%;padding:12px 16px;border-radius:var(--r-lg);border:1px solid var(--stage-line);
  background:var(--stage-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:vsSpeak 10s ease-in-out infinite}
.line:nth-child(2){animation-delay:2.5s}.line:nth-child(3){animation-delay:5s}.line:nth-child(4){animation-delay:7.5s}
.line-tag{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--on-stage-dim)}
.line-text{font-size:clamp(17px,1.5vw,22px);font-weight:500;color:var(--on-stage)}
.wave{display:flex;gap:3px;align-items:center;height:44px;margin-top:6px}
.wave span{display:block;width:4px;height:100%;border-radius:2px;background:linear-gradient(180deg,var(--grad-a),var(--grad-b));transform-origin:center;animation:vsBar 1.1s ease-in-out infinite;animation-delay:calc(var(--i,0) * .11s)}

/* 출연진 포스터 */
/* 출연진(설계 165 §3-2 · 정할 것 1 · 2) — S 2열(대사는 숨기고 이름 · 역할만) · M · L 3열 · XL 4열 · 2XL 5열(폭 전체).
   줄 끝에 남는 카드는 왼쪽부터 쌓는다(이슈 158 — 캐릭터가 늘면 그 옆에 들어온다).
   열 수는 landing.html 이 --cols-s · m · l · xl · 2xl 로 준다(한 곳). 여기는 단계마다 고르기만 한다 */
.posters{--cols:var(--cols-s);display:grid;gap:12px;grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
@media (min-width:640px){.posters{--cols:var(--cols-m);gap:16px}}
@media (min-width:1024px){.posters{--cols:var(--cols-l)}}
@media (min-width:1440px){.posters{--cols:var(--cols-xl)}}
@media (min-width:1920px){.posters{--cols:var(--cols-2xl)}}
/* 자리 카드 — 열이 나누어떨어지지 않는 단계(data-show)에서만 마지막 카드 뒤에 한 장. 실루엣은 토큰 색이라 두 테마에서 맞는다 */
.posters .poster-new{display:none;background:linear-gradient(180deg,var(--stage-2),var(--stage));border:1px dashed var(--stage-line)}
.poster-new-art{position:absolute;inset:0;width:100%;height:100%;fill:var(--stage-line)}
.poster-new .poster-role,.poster-new .poster-name{color:var(--on-stage-dim)}
@media (max-width:639px){.posters .poster-new[data-show~="s"]{display:flex}}
@media (min-width:640px) and (max-width:1023px){.posters .poster-new[data-show~="m"]{display:flex}}
@media (min-width:1024px) and (max-width:1439px){.posters .poster-new[data-show~="l"]{display:flex}}
@media (min-width:1440px) and (max-width:1919px){.posters .poster-new[data-show~="xl"]{display:flex}}
@media (min-width:1920px){.posters .poster-new[data-show~="2xl"]{display:flex}}
.poster{position:relative;overflow:hidden;border-radius:var(--r-xl);aspect-ratio:2/3;background:var(--stage);color:var(--on-stage);
  display:flex;flex-direction:column;justify-content:flex-end}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.poster:hover img{transform:scale(1.05)}
.poster-fallback{position:absolute;inset:0;background:radial-gradient(circle at 35% 30%,var(--glow-1),var(--stage) 75%)}
.poster:nth-child(2n) .poster-fallback{background:radial-gradient(circle at 60% 30%,var(--glow-3),var(--stage) 75%)}
.poster:nth-child(3n) .poster-fallback{background:radial-gradient(circle at 40% 40%,var(--glow-2),var(--stage) 75%)}
/* 그늘은 글 묶음 전체를 덮고, 사진으로 녹아드는 구간은 글 위 빈 여백(--fade)에만 둔다(이슈 216) —
   전에는 아래 40% 만 짙어 맨 위 역할 글이 사진 위에 떠 대비 1.0~2.1(라이트에서는 보이지 않음) */
.poster-body{--fade:56px;position:relative;padding:var(--fade) 22px 22px;display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(0deg,var(--stage-shade) calc(100% - var(--fade)),transparent)}
.poster-role{font-size:12px;letter-spacing:2px;color:var(--on-stage-dim)}
.poster-name{font-size:26px;font-weight:900}
.poster-meta{font-size:12px;color:var(--on-stage-2)}
.poster-line{font-size:16px;line-height:1.8;margin-top:6px}
.poster-line .emo-glow{background:var(--e-glow);color:var(--on-stage);padding:2px 6px;border-radius:var(--r-sm);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (max-width:639px){
  .poster{border-radius:var(--r-lg)}
  .poster-body{--fade:32px;padding:var(--fade) 12px 12px;gap:2px}
  .poster-name{font-size:18px}
  .poster-role{font-size:11px;letter-spacing:1px}
  .poster-meta,.poster-line,.poster-chips{display:none}
}

/* 장면 4장 — S 1열(사진 16:9로 낮게) · M · L 2열 · XL · 2XL 4열 */
.scenes{display:grid;gap:16px;grid-template-columns:repeat(1,minmax(0,1fr))}
@media (min-width:640px){.scenes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1440px){.scenes{grid-template-columns:repeat(4,minmax(0,1fr))}.scenes .scene{aspect-ratio:4/5}}
/* 장면 → 녹음 전환(#52): 장면이 작아지며 왼쪽 모니터로 물러나고, 그 장면을 녹음하는 캐릭터가 오른쪽에서 겹쳐 들어온다.
   두 그림은 가로 마스크로 녹아 붙고, 캐릭터에는 장면 그림을 soft-light 로 얹어 같은 빛깔로 맞춘다.
   켜짐: 마우스(hover 가 되는 기기) · 키보드 초점 · 누름(.is-on, landing.js). 움직임 줄이기는 base.css 가 전환을 끈다 */
.scene{--ease:cubic-bezier(.22,.8,.24,1);position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);aspect-ratio:4/3;
  background:radial-gradient(circle at 80% 30%,var(--stage-2),var(--stage) 70%);color:var(--on-stage);display:flex;align-items:flex-end;cursor:pointer;outline-offset:3px}
.scene-shot{position:absolute;inset:0;transform-origin:6% 42%;transition:transform .8s var(--ease),border-radius .8s var(--ease),box-shadow .8s var(--ease),filter .8s var(--ease)}
.scene-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.scene-shot,.scene-shot img{border-radius:inherit}
.scene-booth{position:absolute;top:0;right:0;bottom:0;width:64%;opacity:0;transform:translateX(16%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,var(--stage) 42%);mask-image:linear-gradient(90deg,transparent 0%,var(--stage) 42%);
  transition:opacity .7s var(--ease) .06s,transform .9s var(--ease) .06s}
.scene-booth img{width:100%;height:100%;object-fit:cover;object-position:62% 22%}
.scene-booth::after{content:"";position:absolute;inset:0;background:var(--scene,none) 20% 50%/cover;mix-blend-mode:soft-light;opacity:.55}
.scene-rec{position:absolute;top:18px;left:18px;z-index:2;display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--stage-line);background:var(--stage-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(-6px);transition:opacity .5s ease .25s,transform .5s ease .25s}
.scene-rec b{font-weight:800}.scene-rec span{color:var(--on-stage-dim)}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 10px var(--bad);animation:vsPulse 1.2s ease-in-out infinite paused}
.scene-body{position:relative;z-index:1;padding:26px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(0deg,var(--stage-shade) 55%,transparent);width:100%}
.scene-title{font-size:24px;font-weight:900}
@media (max-width:639px){.scene-body{padding:16px;gap:4px}.scene-title{font-size:20px}.scene-desc{font-size:14px;line-height:1.55}}
.scene-text{display:grid}
.scene-text>*{grid-area:1/1}
.scene-desc{color:var(--on-stage-2);line-height:1.7;transition:opacity .4s ease}
.scene-take{opacity:0;transform:translateY(8px);transition:opacity .5s ease .2s,transform .5s var(--ease) .2s}
.scene-line{font-size:17px;line-height:1.8}
.scene-line .emo-glow{background:var(--e-glow);color:var(--on-stage);padding:2px 6px;border-radius:var(--r-sm);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.scene-wave{height:26px;margin-top:4px}
.scene-wave span{width:3px;animation-play-state:paused}
.scene.is-on .scene-shot,.scene:focus-visible .scene-shot{transform:scale(.62);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);filter:brightness(.8)}
.scene.is-on .scene-booth,.scene:focus-visible .scene-booth{opacity:1;transform:none}
.scene.is-on .scene-rec,.scene:focus-visible .scene-rec,.scene.is-on .scene-take,.scene:focus-visible .scene-take{opacity:1;transform:none}
.scene.is-on .scene-desc,.scene:focus-visible .scene-desc{opacity:0}
.scene.is-on :is(.rec-dot,.scene-wave span),.scene:focus-visible :is(.rec-dot,.scene-wave span){animation-play-state:running}
@media (hover:hover){
  .scene:hover .scene-shot{transform:scale(.62);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);filter:brightness(.8)}
  .scene:hover .scene-booth{opacity:1;transform:none}
  .scene:hover :is(.scene-rec,.scene-take){opacity:1;transform:none}
  .scene:hover .scene-desc{opacity:0}
  .scene:hover :is(.rec-dot,.scene-wave span){animation-play-state:running}
}

/* 용도마다 맞춘 목소리(이슈 240) — 탭(공통 .tabbar) 아래 판 하나. S · M 은 그림 → 글, L+ 는 「그림 │ 글」 두 열 */
.uses{display:grid;gap:16px}
.use{display:grid;gap:20px;padding:20px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card);box-shadow:var(--shadow)}
@media (min-width:1024px){.use{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;padding:28px}}
.use-shot{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3;background:var(--stage)}
.use-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* 장면 그림이 없는 용도는 배역 얼굴을 나란히 — 배역 수만큼 열 */
.use-faces{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px}
.use-faces img{object-position:50% 22%}
@media (min-width:1024px){.use-shot{aspect-ratio:auto;min-height:100%}}
.use-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.use-title{margin:0;font-size:24px;font-weight:900}
.use-desc{margin:0;color:var(--muted);line-height:1.7}
.use-cast{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.use-cast li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"face who" "face tune";align-items:center;gap:2px 12px}
.use-face{grid-area:face;width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.use-who{grid-area:who;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.use-who span{font-size:13px;color:var(--muted)}
.use-tune{grid-area:tune;display:flex;flex-wrap:wrap;gap:6px}
.use-tune .chip{font-variant-numeric:tabular-nums}
.use-tune .use-set{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent-line);font-weight:700}
.use-player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.use-play{min-width:128px}
.use-wave{display:flex;align-items:center;gap:1px;height:36px;min-width:0}
.use-wave span{flex:1 1 0;height:calc(var(--h) * 100% + 2px);border-radius:2px;background:var(--line-strong);transition:background .15s}
.use-wave span.lit{background:var(--accent)}
.use-time{font-family:var(--mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.use-script{display:grid;gap:8px;margin:0;padding:14px 16px;border-radius:var(--r);background:var(--paper);list-style:none;font-size:15px;line-height:1.7}
.use-script li{display:grid;grid-template-columns:minmax(3.5em,auto) minmax(0,1fr);gap:10px}
.use-script b{font-size:13px;color:var(--muted);padding-top:2px}
.use-script .emo-glow{background:var(--e-glow);padding:1px 6px;border-radius:var(--r-sm);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.use-open{align-self:flex-start}
@media (max-width:639px){
  .use{padding:14px;gap:14px}
  .use-shot{aspect-ratio:16/9}
  .use-title{font-size:20px}
  .use-open{align-self:stretch}
  /* 좁으면 파형을 아랫줄 전체 폭으로 — 봉우리 96개 사이 간격만으로 남는 폭을 넘는다 */
  .use-player{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .use-wave{grid-column:1/-1;grid-row:2}
  .use-time{justify-self:end}
}

/* 엔진 · 수치 — 단계 5장 · 수치 4장, 열 수는 개수의 약수(.fit) */
.steps{list-style:none;margin:0;padding:0}
.step-no{font-family:var(--mono);font-size:12px;color:var(--accent)}
.step-title{font-weight:700;font-size:16px;margin:6px 0}
.stats{margin-top:16px}
.stat-value{font-size:clamp(32px,3vw,44px);font-weight:900;letter-spacing:-1px}
.split{display:grid;gap:24px;align-items:center;grid-template-columns:minmax(0,1fr)}
.split > *{min-width:0}
@media (min-width:1024px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

.finale{position:relative;overflow:hidden;background:var(--stage);color:var(--on-stage);text-align:center;padding:120px 0}
/* 출연진 포스터가 천천히 흘러가는 띠 — 첫 화면과 같은 무대 · 같은 화풍 */
.finale-strip{position:absolute;inset:0;display:flex;gap:16px;width:max-content;align-items:center;animation:vsMarquee 60s linear infinite;opacity:.55}
.finale-poster{width:clamp(180px,16vw,280px);aspect-ratio:2/3;border-radius:var(--r-xl);overflow:hidden;background:var(--stage-2);flex:none}
.finale-poster img{width:100%;height:100%;object-fit:cover}
.finale-shade{position:absolute;inset:0;background:radial-gradient(ellipse at center,var(--stage-shade) 25%,transparent 75%),linear-gradient(0deg,var(--stage) 0%,transparent 30%,transparent 70%,var(--stage) 100%)}
.finale-in{position:relative;display:flex;flex-direction:column;gap:20px;align-items:center}
.finale-in .stage-badge{align-self:center}
.finale-in .wave{justify-content:center}
.finale-title{font-size:clamp(32px,4.4vw,60px);font-weight:900;line-height:1.15;letter-spacing:-1px}
.fine-print{margin-top:12px}

/* S 의 첫 화면 길이를 절반 아래로(설계 165 §7 R4) — 구역 여백을 줄이고, 첫 구역의 대사 줄은 장면 카드가 대신 보여 준다 */
@media (max-width:639px){
  .sec{padding:36px 0}
  .stage-art{aspect-ratio:3/2}
  .lines{display:none}
  .steps>li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding:12px 16px}
  .steps .step-no{grid-row:1}
  .steps .step-title{margin:0}
  .steps>li>p{grid-column:1/-1;font-size:14px}
  .finale{padding:56px 0}
  .stage-in{padding-bottom:28px}
  .sec-head{margin-bottom:18px}
  .poster{aspect-ratio:4/5}
  .scenes .scene{aspect-ratio:2/1}
  .stats>.card{padding:14px}
  .stat-value{font-size:28px}
}

/* 편집 기능 띠(이슈 184) — 무대 위에 움직이는 악보 한 줄. S · M 은 글 → 악보, L+ 는 두 열 */
.feat-band{position:relative;overflow:hidden;isolation:isolate;background:var(--stage);color:var(--on-stage);padding:72px 0}
.feat-band-in{position:relative;display:grid;gap:32px;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:1024px){.feat-band-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}}
.feat-band-eyebrow{color:var(--grad-a)}
.feat-band-title{font-size:clamp(30px,3.6vw,48px);font-weight:900;line-height:1.15;letter-spacing:-1px}
.feat-band-lede{color:var(--on-stage-2);line-height:1.7}
@media (max-width:639px){.feat-band{padding:44px 0}}
/* 출연진 미리 듣기(이슈 228) */
.poster-play{align-self:flex-start;margin-top:6px;min-height:var(--tap);padding:6px 14px;font-size:13px}
.poster-play[aria-pressed="true"]{background:var(--on-stage);color:var(--stage)}