/* ==========================================================
   장면(모션그래픽) — motion.js 와 함께 쓴다 (src/kit/scene.py 가 만든 <section class="scene">)
   ========================================================== */
.scene { position: relative; margin: 0 0 8vh; }
.scene .sc-title { font-family: var(--f-title); font-weight: 400; text-align: center; color: #e8dcc0; font-size: clamp(18px, 3.4vw, 26px); margin: 0 0 14px; }
.scene .sc-pin { position: relative; width: 100%; max-width: var(--col); margin: 0 auto; container-type: inline-size; }
.scene .sc-stage { position: relative; width: 100%; overflow: hidden; background: #0a0a0c; isolation: isolate; }
.scene .sc-world { position: absolute; inset: 0; transform: rotate(var(--rot, 0deg)); transform-origin: 50% 50%; }
.scene .sc-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 0 0; backface-visibility: hidden; }
.scene .sc-moving .sc-layer { will-change: transform; }
.scene .sc-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.scene .sc-grade { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2; }
.sc-grade[data-g="night"] { background: #1a2a5a; mix-blend-mode: multiply; }
.sc-grade[data-g="warm"] { background: #ff8a3c; mix-blend-mode: soft-light; }
.sc-grade[data-g="cold"] { background: #3a6ab0; mix-blend-mode: soft-light; }
.sc-grade[data-g="desat"] { background: #808080; mix-blend-mode: saturation; }
.sc-grade[data-g="red"] { background: #9a1a10; mix-blend-mode: multiply; }
.sc-grade[data-g="gold"] { background: #ffc860; mix-blend-mode: overlay; }
.sc-grade[data-g="black"] { background: #000; }
.sc-grade[data-g="white"] { background: #fff8ec; }
.scene .sc-vig { position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .35;
  background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0, 0, 0, .9) 100%); }
.scene .sc-bars { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.scene .sc-bars::before, .scene .sc-bars::after { content: ""; position: absolute; left: 0; right: 0; height: calc(var(--b, 0) * 9%); background: #000; }
.scene .sc-bars::before { top: 0; }
.scene .sc-bars::after { bottom: 0; }
.scene .sc-caps { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.scene .sc-cap { position: absolute; margin: 0; opacity: 0; transition: opacity .55s ease, transform .55s ease; }
.scene .sc-cap.on { opacity: 1; }
.scene .sc-cap.nar { max-width: 72%; }
.scene .sc-cap.nar.on { transform: none; }
.scene .sc-cap.nar.tc.on, .scene .sc-cap.nar.bc.on { transform: translate(-50%, 0); }  /* 가운데 자리(tc·bc·mc)는 켜져도 가운데에 */
.scene .sc-cap.nar.mc.on { transform: translate(-50%, -50%); }
.scene .sc-cap.bub.on { transform: scale(1); }
.scene .sc-cap.sub { left: 50%; bottom: 8%; transform: translate(-50%, 8px); width: max-content; max-width: 86%; text-align: center; color: #fff;
  font-family: var(--f-story); font-size: clamp(14px, 3.3cqw, 23px); line-height: 1.55; word-break: keep-all; text-wrap: balance;
  text-shadow: 0 2px 6px #000, 0 0 22px rgba(0, 0, 0, .85); }
.scene .sc-cap.sub.on { transform: translate(-50%, 0); }
.scene .sc-cap.sub .who { display: block; font-family: var(--f-talk); font-size: .72em; color: var(--gold); letter-spacing: .04em; margin-bottom: .1em; }
.scene .sc-cap.title { left: 50%; top: 50%; transform: translate(-50%, -44%); width: max-content; max-width: 88%; text-align: center; color: #fff;
  font-family: var(--f-title); font-size: clamp(22px, 6.4cqw, 54px); line-height: 1.3; word-break: keep-all;
  text-shadow: 0 3px 16px rgba(0, 0, 0, .95), 0 0 40px rgba(0, 0, 0, .6); }
.scene .sc-cap.title.on { transform: translate(-50%, -50%); }
.scene .sc-cap.title.tc { top: 18%; }
.scene .sc-cap.title.bc { top: 78%; }
.scene .sc-cap.date { left: 4%; top: 5%; font-family: var(--f-talk); font-size: clamp(11px, 2.3cqw, 15px); color: #f1e6cc; letter-spacing: .06em;
  padding: .3em .7em; border-left: 3px solid var(--gold); background: rgba(0, 0, 0, .45); }
.scene .sc-play { position: absolute; right: 2.4%; bottom: 2.6%; z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(10, 10, 12, .55); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .75; transition: opacity .2s; padding: 0; }
.scene .sc-play:hover { opacity: 1; }
.scene .sc-play svg { width: 18px; height: 18px; fill: currentColor; }
.scene .sc-play .pa { display: none; }
.scene .sc-play.on .pa { display: inline; }
.scene .sc-play.on .pl { display: none; }

/* 스크롤로 시간이 흐르는 모드(motion.js 가 sc-live 를 붙인다): 장면이 화면에 붙어 있는 동안 아래 글이 지나간다 */
.scene.sc-live { height: calc(var(--sh, 80vh) + var(--len, 900px)); }
.scene.sc-live .sc-title { position: absolute; left: 0; right: 0; top: -2.2em; margin: 0; }
.scene.sc-live .sc-pin { position: sticky; top: var(--pt, 0px); width: var(--sw, 100%); max-width: none; }
.scene.sc-live .sc-stage { height: var(--sh); aspect-ratio: auto !important; }

/* 자바스크립트가 없거나 정지 모드(?static): 그림 한 장 + 글을 아래에 차례로 */
.scene:not(.sc-live) .sc-caps, .scene.sc-static .sc-caps { position: static; display: flex; flex-direction: column; gap: 10px; padding: 14px 4% 0; }
.scene:not(.sc-live) .sc-cap, .scene.sc-static .sc-cap { position: static; opacity: 1; transform: none !important; max-width: none !important; width: auto !important; text-shadow: none; }
.scene.sc-static { height: auto; }
.scene.sc-static .sc-pin { position: relative; top: 0; }
.scene:not(.sc-live) .sc-play, .scene.sc-static .sc-play { display: none; }

/* 영상 내보내기: 고른 장면만 화면 가득 */
html.mo-render body > *:not(main) { display: none !important; }
html.mo-render .strip > *:not(.mo-on) { display: none !important; }
html.mo-render .scene.mo-on { height: 100vh !important; margin: 0; }
html.mo-render .scene.mo-on .sc-pin { position: fixed !important; inset: 0; width: 100vw !important; top: 0 !important; }
html.mo-render .scene.mo-on .sc-stage { height: 100vh !important; width: 100vw; }
html.mo-render .scene.mo-on .sc-play, html.mo-render .scene.mo-on .sc-title { display: none; }
html.mo-render body { overflow: hidden; background: #000; }

@media (prefers-reduced-motion: reduce) {
  .scene .sc-cap { transition: opacity .3s; }
}
html.mo-render .scene .sc-cap { transition: none !important; }