@font-face {
  font-family: "FlowerRoad";
  src: url("../../fonts/SSFlowerRoadRegular_otf.otf") format("opentype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0c1016;
  --panel: #131923;
  --panel-2: #181f2b;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: #e8e6df;
  --muted: #858e9d;
  --accent: #dbb876;
  --accent-2: #7fbaa9;
  --danger: #d6746e;
  --radius: 16px;
  --ratio: 1.7777778;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-width: 1120px;
  color: var(--text);
  background:
    radial-gradient(circle at 18% -10%, rgba(86, 120, 125, 0.14), transparent 36%),
    var(--bg);
  font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.02em;
}

button, input, select { font: inherit; }
button, select, label { -webkit-tap-highlight-color: transparent; }

.topbar {
  position: sticky;
  z-index: 100;
  top: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(270px, 1fr) auto minmax(360px, 1fr);
  align-items: center;
  gap: 28px;
  padding: 12px 26px;
  border-bottom: 1px solid var(--line-strong);
  background: rgba(10, 14, 20, 0.91);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(22px);
}

.brand p {
  margin: 0 0 3px;
  color: var(--accent-2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.19em;
}

.brand h1 {
  margin: 0;
  font-family: FlowerRoad, "Iowan Old Style", "Noto Serif KR", serif;
  font-size: 21px;
  font-weight: 400;
}

.brand em { color: var(--accent); font-style: normal; }

.transport, .project-actions { display: flex; align-items: center; gap: 8px; }
.project-actions { justify-content: flex-end; }

.button {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--text);
  background: #1a212c;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.button:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.28); }
.button-primary { border-color: #b99a62; background: #c4a66b; color: #11161c; font-weight: 800; }
.button-primary.is-playing { border-color: #d6746e; color: #ffe4df; background: #8d4441; }
.button-primary.is-paused { border-color: #9a8054; color: #171a20; background: #d8bd86; }
.button-stop { color: #f2aaa6; }
.button-stop:hover { border-color: rgba(214, 116, 110, .55); background: rgba(214, 116, 110, .12); }
.button-quiet { height: 34px; font-size: 12px; color: #afb6c0; background: transparent; }
.transport-icon { display: inline-block; margin-right: 4px; font-size: 9px; }

.timecode {
  min-width: 132px;
  padding-left: 8px;
  color: #cbd0d7;
  font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.timecode i { margin: 0 5px; color: #545c68; font-style: normal; }
.speed-label { display: flex; align-items: center; gap: 6px; color: #68727f; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.speed-label select { width: 92px; height: 30px; padding-left: 8px; color: #c5ccd3; font-size: 10px; }

.select-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

select {
  height: 34px;
  padding: 0 26px 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #cfd3d8;
  background: #151b24;
}

.master-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #a8afb9;
  font-size: 11px;
  cursor: pointer;
}

.master-toggle input { position: absolute; opacity: 0; }
.master-toggle span { position: relative; width: 30px; height: 17px; border-radius: 20px; background: #343c48; }
.master-toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: #87909c; transition: 180ms ease; }
.master-toggle input:checked + span { background: #476f67; }
.master-toggle input:checked + span::after { left: 16px; background: #c4e0d7; }
.file-button { display: inline-flex; align-items: center; cursor: pointer; }
.file-button input { display: none; }

.project-strip {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 40%);
  align-items: center;
  gap: 24px;
  height: 38px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line);
  background: #10151d;
  color: #6f7885;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.project-strip strong { margin-right: 10px; color: #aeb5bf; font-weight: 650; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.status-dot.playing { background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: statusPulse 1.2s infinite; }
.global-progress { overflow: hidden; height: 2px; border-radius: 4px; background: #252c37; }
.global-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

main { padding: 0 20px 60px; }

.column-guide, .scene-card {
  display: grid;
  grid-template-columns: 142px minmax(500px, 1.4fr) minmax(250px, .72fr) minmax(300px, .9fr);
}

.column-guide {
  position: sticky;
  z-index: 40;
  top: 116px;
  height: 34px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: #596270;
  background: rgba(12, 16, 22, .94);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.column-guide span { padding: 0 14px; }

.scene-list { display: grid; gap: 12px; padding-top: 12px; }

.scene-card {
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(115deg, rgba(255,255,255,.022), transparent 45%), var(--panel);
  box-shadow: 0 12px 38px rgba(0,0,0,.16);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.scene-card.is-playing { border-color: rgba(219, 184, 118, .48); box-shadow: 0 0 0 1px rgba(219, 184, 118, .08), 0 20px 50px rgba(0,0,0,.3); }
.scene-card > * { min-width: 0; border-right: 1px solid var(--line); }
.scene-card > *:last-child { border-right: 0; }

.scene-meta { position: relative; padding: 18px 14px; }
.scene-number { color: var(--accent); font: 700 10px/1.2 ui-monospace, monospace; letter-spacing: .14em; }
.scene-title { margin: 12px 0 7px; font-family: FlowerRoad, "Noto Serif KR", serif; font-size: 19px; font-weight: 400; line-height: 1.25; }
.scene-mood { margin: 0; color: #777f8c; font-size: 11px; line-height: 1.5; }
.scene-time { position: absolute; right: 14px; bottom: 99px; left: 14px; color: #66707c; font: 10px/1.2 ui-monospace, monospace; }
.scene-range { display: block; margin-bottom: 8px; }
.scene-time label { display: flex; align-items: center; gap: 5px; }
.duration-input { width: 58px; height: 28px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; color: #aeb5bf; background: #0f141b; }
.reading-time-note { margin-top: 7px; padding: 0; border: 0; color: #739d92; background: transparent; font-size: 9px; cursor: pointer; }
.reading-time-note::before { content: "●"; margin-right: 4px; font-size: 6px; }
.reading-time-note.is-manual { color: #707985; }

.scene-play, .scene-reset {
  position: absolute;
  right: 14px;
  left: 14px;
  height: 34px;
  border-radius: 7px;
  cursor: pointer;
}

.scene-play { bottom: 50px; border: 1px solid rgba(127,186,169,.34); color: #a8d1c5; background: rgba(127,186,169,.09); }
.scene-play span { margin-right: 4px; font-size: 8px; }
.scene-reset { bottom: 14px; border: 0; color: #69727e; background: transparent; font-size: 11px; }
.scene-play:hover { background: rgba(127,186,169,.16); }
.scene-play.is-playing { border-color: rgba(214,116,110,.5); color: #f0aaa6; background: rgba(214,116,110,.12); }
.scene-play.is-paused { border-color: rgba(219,184,118,.5); color: #e7cb94; background: rgba(219,184,118,.12); }
.scene-card.is-paused { border-color: rgba(219,184,118,.38); }

.visual-column { padding: 14px; background: #0f141c; }
.stage-wrap { width: 100%; }
.stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: var(--ratio);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: #080b10;
  box-shadow: 0 14px 30px rgba(0,0,0,.32);
  isolation: isolate;
}
.scene-card.background-missing .stage { background: linear-gradient(135deg, #172231, #253744); }
.scene-card.background-missing .stage::before { content: "BACKGROUND RELOADING"; position: absolute; z-index: 20; top: 10px; left: 10px; color: rgba(255,255,255,.45); font: 8px ui-monospace, monospace; letter-spacing: .12em; }

.stage-world, .layer, .light-sweep, .particles, .foreground-haze, .vignette, .intro-curtain { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-world { transform-origin: 50% 50%; will-change: transform, filter; }
.layer { object-fit: cover; pointer-events: none; user-select: none; will-change: transform, opacity, filter; }
.layer-bg { z-index: 1; transform: scale(1.025); }
.light-sweep { z-index: 2; opacity: 0; mix-blend-mode: screen; background: linear-gradient(110deg, transparent 25%, rgba(244,225,180,.25) 48%, transparent 70%); transform: translateX(-80%); }
.layer-character { z-index: 3; }
.layer-character-secondary { z-index: 3; }
.particles { z-index: 4; overflow: hidden; opacity: 0; }
.layer-foreground { z-index: 5; transform: scale(1.06); }
.particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #f3dda5; box-shadow: 0 0 8px #e4c780; opacity: .6; }
.foreground-haze { z-index: 6; opacity: .18; background: linear-gradient(90deg, rgba(5,8,12,.52), transparent 15%, transparent 84%, rgba(5,8,12,.38)); pointer-events: none; }
.vignette { z-index: 7; background: radial-gradient(ellipse at center, transparent 48%, rgba(3,6,10,.38) 100%); pointer-events: none; }
.intro-curtain { z-index: 8; opacity: 0; background: #080b10; pointer-events: none; }

.stage-caption {
  position: absolute;
  z-index: 12;
  right: 18px;
  bottom: 21px;
  left: 18px;
  opacity: 0;
  color: white;
  text-shadow: 0 2px 14px rgba(0,0,0,.8);
  transform: translateY(8px);
}

.stage-caption span { display: block; margin-bottom: 3px; color: #d6c08f; font-size: 8px; font-weight: 800; letter-spacing: .15em; }
.caption-copy { display: grid; align-items: end; height: 4.8em; overflow: hidden; }
.caption-copy > strong { grid-area: 1 / 1; align-self: end; transition: none; will-change: opacity, transform, filter; }
.caption-copy.long-pair > strong { font-size: clamp(13px, 1.16vw, 19px); line-height: 1.48; letter-spacing: -.012em; }
.caption-copy.very-long { height: 6.2em; }
.caption-copy.very-long > strong { font-size: clamp(11px, 1.02vw, 17px); line-height: 1.42; letter-spacing: -.018em; }
.stage-caption strong { font-family: FlowerRoad, "Noto Serif KR", serif; font-size: clamp(14px, 1.35vw, 22px); font-weight: 400; }
.caption-title-next { opacity: 0; }
.stage-caption strong em { color: #f0cb82; font: inherit; font-size: 1.25em; }
.caption-credit { display: block; margin-top: 12px; color: rgba(245,235,211,.82); font-family: "Noto Serif KR", serif; font-size: 9px; font-weight: 500; letter-spacing: .16em; }
.production-credit {
  position: absolute;
  z-index: 13;
  bottom: 7.5%;
  left: 50%;
  width: min(82%, 760px);
  color: #fff3cf;
  text-align: center;
  text-shadow: 0 3px 18px rgba(0,0,0,.88), 0 0 26px rgba(213,174,91,.18);
  opacity: 0;
  transform: translate3d(-50%, 10px, 0);
  pointer-events: none;
  will-change: opacity, transform, filter;
}
.production-credit span {
  margin-right: .75em;
  color: #d9bd7c;
  font-family: "Noto Serif KR", serif;
  font-size: clamp(9px, .72vw, 13px);
  font-weight: 700;
  letter-spacing: .16em;
}
.production-credit strong {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(13px, 1.18vw, 21px);
  font-weight: 800;
  letter-spacing: .15em;
}
.poster-scene .stage-caption { top: 12%; right: auto; bottom: auto; left: 6%; width: 43%; }
.poster-scene .stage-caption span { margin-bottom: 10px; color: #f0dcae; font-size: clamp(9px, .72vw, 13px); line-height: 1.45; letter-spacing: .1em; }
.poster-scene .stage-caption strong { font-size: clamp(20px, 2vw, 34px); line-height: 1.18; }
.poster-scene .caption-copy { height: auto; min-height: 0; overflow: visible; }
.poster-scene .caption-credit { margin-top: 11px; color: rgba(255,245,220,.94); font-size: clamp(10px, .78vw, 14px); font-weight: 650; letter-spacing: .18em; }
/* 엔드카드에서는 '제작 :' 라벨 없이 스튜디오명만 남긴다. */
.poster-scene .production-credit span { display: none; }

/* ═══ 자막 체계 ═══════════════════════════════════════════════════════
   본편 장면(.story-scene)은 극장 자막처럼 하단 중앙 정렬 + 가독성 스크림.
   문장 종류  .is-dialogue = 인물이 소리 내어 말한 줄 / .is-key = 장면의 핵심 대사
   톤        caption-tone-base | -hush(상실·소진) | -impact(클라이맥스)
   타이틀카드와 엔드카드는 story-scene이 아니므로 기존 좌측 레이아웃을 유지한다. */
.story-scene .stage-caption { bottom: 10.5%; text-align: center; }
.story-scene .stage-caption::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -46% -14% -95% -14%;
  background: radial-gradient(56% 118% at 50% 60%, rgba(3,9,16,.72), rgba(3,9,16,0) 74%);
  pointer-events: none;
}
.story-scene .stage-caption span { margin-bottom: 7px; color: rgba(214,192,143,.72); letter-spacing: .26em; }
/* height:auto — 글자를 키웠기 때문에 고정 높이로 두면 긴 문장의 윗줄이 잘린다.
   자막은 아래쪽 기준선에 붙어 위로 자라고, overflow는 전환 애니메이션만 잘라 낸다. */
.story-scene .caption-copy { height: auto; min-height: 4.4em; max-width: 80%; margin: 0 auto; }
.story-scene .stage-caption strong {
  color: rgba(242,238,228,.95);
  font-size: clamp(15px, 1.46vw, 24px);
  line-height: 1.5;
  text-shadow: 0 2px 16px rgba(0,0,0,.9), 0 0 30px rgba(0,0,0,.6);
}
/* 자막을 32자 이하로 잘라 내보내므로 길이에 따라 글자 크기를 바꾸지 않는다.
   재생 중에 글자 크기가 오르내리는 것이 가장 어색해 보인다. */
.story-scene .caption-copy.long-pair > strong,
.story-scene .caption-copy.very-long > strong { font-size: clamp(15px, 1.46vw, 24px); line-height: 1.5; }
.story-scene .caption-copy > strong.is-dialogue { color: #ffe7bc; }
.story-scene .caption-copy > strong.is-key {
  color: #f2cf95;
  text-shadow: 0 3px 18px rgba(0,0,0,.94), 0 0 32px rgba(233,183,96,.34);
}

/* hush — 상실·소진 장면. 문장을 한 치수 줄이고 자간을 열어 숨을 만든다. */
.story-scene.caption-tone-hush .stage-caption::before { background: radial-gradient(56% 118% at 50% 60%, rgba(3,9,16,.6), rgba(3,9,16,0) 74%); }
.story-scene.caption-tone-hush .stage-caption strong {
  color: rgba(230,227,220,.88);
  font-size: clamp(13px, 1.3vw, 21px);
  line-height: 1.56;
  letter-spacing: .03em;
}
.story-scene.caption-tone-hush .caption-copy.long-pair > strong,
.story-scene.caption-tone-hush .caption-copy.very-long > strong { font-size: clamp(13px, 1.3vw, 21px); line-height: 1.56; }
.story-scene.caption-tone-hush .caption-copy > strong.is-key { color: #e8d3aa; text-shadow: 0 3px 18px rgba(0,0,0,.94), 0 0 26px rgba(233,183,96,.22); }

/* impact — 클라이맥스. 자막을 키우고, 작품 제목이 되는 대사는 금빛으로 한 단계 더. */
.story-scene.caption-tone-impact .stage-caption { bottom: 12%; }
.story-scene.caption-tone-impact .stage-caption::before { background: radial-gradient(58% 120% at 50% 58%, rgba(3,9,16,.84), rgba(3,9,16,0) 74%); }
.story-scene.caption-tone-impact .stage-caption span { color: #e0c48d; letter-spacing: .3em; }
.story-scene.caption-tone-impact .caption-copy { min-height: 5.2em; max-width: 84%; }
.story-scene.caption-tone-impact .stage-caption strong {
  font-size: clamp(17px, 1.72vw, 29px);
  line-height: 1.46;
  text-shadow: 0 3px 20px rgba(0,0,0,.94), 0 0 36px rgba(0,0,0,.72);
}
.story-scene.caption-tone-impact .caption-copy.long-pair > strong,
.story-scene.caption-tone-impact .caption-copy.very-long > strong { font-size: clamp(17px, 1.72vw, 29px); line-height: 1.46; }
.story-scene.caption-tone-impact .caption-copy > strong.is-key {
  color: #f7d491;
  font-size: clamp(21px, 2.15vw, 37px);
  line-height: 1.3;
  letter-spacing: .01em;
  text-shadow: 0 3px 22px rgba(0,0,0,.96), 0 0 42px rgba(233,183,96,.55), 0 0 76px rgba(233,183,96,.28);
}
/* 제작 크레딧이 정중앙을 차지하므로 타이틀 블록은 위쪽으로 올려 겹침을 피한다. */
.intro-title-scene .stage-caption { top: 27%; right: auto; bottom: auto; left: 7%; width: 44%; transform: translateY(-50%); }
.intro-title-scene .stage-caption span { margin-bottom: 13px; color: #ecd8ab; font-size: clamp(9px, .76vw, 14px); line-height: 1.45; letter-spacing: .12em; }
.intro-title-scene .stage-caption strong { font-size: clamp(22px, 2.35vw, 40px); line-height: 1.2; }
.intro-title-scene .stage-caption strong em { color: #f2ca78; font-size: 1.3em; }
.intro-title-scene .caption-copy { height: auto; min-height: 0; overflow: visible; }
.intro-title-scene .caption-credit { margin-top: 12px; font-size: clamp(10px, .82vw, 15px); font-weight: 650; letter-spacing: .18em; }
/* 오프닝 타이틀 장면에서만 제작 크레딧을 화면 정중앙에 배치한다.
   Y 중앙 정렬은 applyFrame()이 매 프레임 transform을 덮어쓰므로 JS 쪽도 함께 맞춰야 한다. */
.intro-title-scene .production-credit {
  top: 50%;
  bottom: auto;
  width: min(64%, 620px);
  transform: translate3d(-50%, -50%, 0);
}
.intro-title-scene .production-credit span { display: block; margin-right: 0; margin-bottom: 9px; font-size: clamp(10px, .8vw, 15px); letter-spacing: .3em; }
.intro-title-scene .production-credit strong { font-size: clamp(15px, 1.42vw, 26px); letter-spacing: .2em; }
/* 장면 전환 베일 — 그림과 자막을 함께 덮어야 하므로 캡션(12)보다 위에 둔다.
   편집용 표시(진행바·타임코드·이동 패드)는 그 위 18~20으로 올려 가리지 않게 한다. */
.transition-veil { position: absolute; z-index: 15; inset: 0; opacity: 0; pointer-events: none; }
.stage-progress { position: absolute; z-index: 18; right: 0; bottom: 0; left: 0; height: 2px; background: rgba(255,255,255,.12); }
.stage-progress i { display: block; width: 0; height: 100%; background: var(--accent); }
.stage-timecode { position: absolute; z-index: 18; top: 9px; right: 10px; padding: 3px 5px; border-radius: 4px; color: rgba(255,255,255,.72); background: rgba(0,0,0,.35); font: 8px/1.2 ui-monospace, monospace; }

/* ═══ 클린 화면 (내보내기와 같은 상태) ═══════════════════════════════
   화면 위에서 편집용 표시만 걷어낸다. 그림·자막·제작 크레딧은 그대로 남는다. */
/* 본편의 kicker는 'SCENE 07' 같은 편집용 표시라 숨긴다. 타이틀카드·엔드카드의
   kicker는 '대한중환자의학회 수기공모 최우수상 작품'이라 내용이므로 남겨 둔다. */
.export-view .story-scene .caption-kicker { display: none !important; }
.export-view .stage-timecode,
.export-view .stage-progress,
.export-view .nudge-hud,
.export-view .nudge-pad { display: none !important; }

/* Character nudge HUD — drag the stage to move the character layer. */
.nudge-hud { position: absolute; z-index: 13; top: 9px; left: 10px; display: flex; align-items: center; gap: 6px; opacity: .45; transition: opacity 140ms ease; }
.nudge-hud[hidden] { display: none; }
.stage:hover .nudge-hud, .is-nudging .nudge-hud { opacity: 1; }
.nudge-readout { padding: 3px 6px; border-radius: 4px; color: rgba(255,255,255,.6); background: rgba(0,0,0,.42); font: 8px/1.2 ui-monospace, monospace; letter-spacing: .02em; }
.nudge-readout.is-moved { color: #f0cb82; background: rgba(60,42,10,.62); }
.nudge-reset { padding: 3px 6px; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; color: rgba(255,255,255,.6); background: rgba(0,0,0,.42); font: 8px/1.2 ui-monospace, monospace; cursor: pointer; }
.nudge-reset:hover { color: #ffd9a0; border-color: rgba(240,203,130,.5); }
/* Character nudge pad — shown only on scenes whose character art must stay
   registered to the background. */
.nudge-pad { margin-top: 10px; padding: 9px 10px; border: 1px solid rgba(240,203,130,.28); border-radius: 8px; background: rgba(60,45,18,.16); }
.nudge-pad[hidden] { display: none; }
.nudge-pad-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.nudge-pad-head strong { color: #f0cb82; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.nudge-pad-readout { color: #8d95a1; font: 9px/1.2 ui-monospace, monospace; }
.nudge-pad-readout.is-moved { color: #f0cb82; }
.nudge-pad-body { display: flex; align-items: center; gap: 14px; }
.nudge-dpad { display: grid; grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(2, 26px); gap: 3px; }
.nudge-dpad button:nth-child(1) { grid-area: 1 / 2; }
.nudge-dpad button:nth-child(2) { grid-area: 2 / 1; }
.nudge-dpad button:nth-child(3) { grid-area: 2 / 3; }
.nudge-dpad button:nth-child(4) { grid-area: 2 / 2; }
.nudge-pad button { border: 1px solid var(--line-strong); border-radius: 5px; color: #cfd3d8; background: #1a212c; font-size: 10px; cursor: pointer; }
.nudge-pad button:hover { border-color: rgba(240,203,130,.5); color: #ffd9a0; }
.nudge-pad button:active { background: #2a3240; }
.nudge-side { display: flex; flex-direction: column; gap: 6px; font-size: 9px; color: var(--muted); }
.nudge-side label { display: flex; align-items: center; gap: 5px; }
.nudge-side select { height: 24px; padding: 0 6px; font-size: 9px; }
.nudge-scale { display: flex; align-items: center; gap: 4px; }
.nudge-scale button { width: 24px; height: 22px; }
.nudge-pad-reset { height: 22px; padding: 0 8px; font-size: 9px; }

/* touch-action:none stops the browser claiming the gesture as a scroll/pan
   before our pointermove handler ever sees it. */
.scene-card.character-draggable:not(.is-playing):not(.is-paused) .stage { cursor: grab; touch-action: none; }
.scene-card.character-draggable.is-nudging .stage { cursor: grabbing; }
.is-nudging .stage { cursor: grabbing; }

.layer-controls { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.layer-controls button { height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; color: #596371; background: #111720; font-size: 8px; font-weight: 800; letter-spacing: .06em; cursor: pointer; }
.layer-controls button i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #424b57; }
.layer-controls button.active { color: #9ba5b1; border-color: rgba(127,186,169,.2); }
.layer-controls button.active i { background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2); }
.layer-controls button:disabled { opacity: .23; cursor: not-allowed; }

.effects-column { padding: 16px 14px; }
.effects-heading, .narration-heading { display: flex; align-items: center; justify-content: space-between; height: 22px; margin-bottom: 10px; }
.effects-heading h3 { margin: 0; color: #8b95a2; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.effects-count { color: #555f6c; font: 9px ui-monospace, monospace; }
.effects-list { display: grid; gap: 6px; }

.effect-row {
  display: grid;
  grid-template-columns: 22px 1fr 25px;
  gap: 6px;
  align-items: center;
  min-height: 51px;
  padding: 6px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(7,10,15,.28);
}

.effect-row.is-off { opacity: .46; }
.effect-enable { appearance: none; position: relative; width: 22px; height: 13px; margin: 0; border-radius: 10px; background: #363e49; cursor: pointer; }
.effect-enable::after { content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: #7b8592; transition: 150ms; }
.effect-enable:checked { background: #4d796f; }
.effect-enable:checked::after { left: 11px; background: #d1e7e0; }
.effect-main { min-width: 0; }
.effect-name { display: flex; justify-content: space-between; margin-bottom: 6px; color: #acb4be; font-size: 10px; }
.effect-value { color: #626c79; font: 8px ui-monospace, monospace; }
.effect-strength { display: block; width: 100%; height: 3px; margin: 0; appearance: none; border-radius: 3px; background: #353d48; accent-color: var(--accent-2); }
.effect-strength::-webkit-slider-thumb { appearance: none; width: 9px; height: 9px; border-radius: 50%; background: #9acbbd; cursor: ew-resize; }
.effect-remove { width: 24px; height: 24px; padding: 0; border: 0; color: #59626e; background: transparent; cursor: pointer; }
.effect-remove:hover { color: var(--danger); }

.add-effect { display: grid; grid-template-columns: 1fr 32px; gap: 5px; margin-top: 9px; }
.effect-select { width: 100%; height: 30px; font-size: 10px; color: #767f8c; }
.add-effect-button { border: 1px solid var(--line); border-radius: 6px; color: #849e98; background: #151c25; cursor: pointer; }

.narration-column { display: flex; flex-direction: column; padding: 16px 18px; background: rgba(10,14,20,.27); }
.narration-heading { flex: 0 0 auto; }
.narration-heading > span { color: var(--accent); font: 800 9px/1.2 ui-monospace, monospace; letter-spacing: .14em; }
.narration-heading label { color: #656e7a; font-size: 9px; }
.subtitle-toggle { accent-color: var(--accent-2); vertical-align: -2px; }
.narration-text { flex: 1 1 auto; max-height: 270px; overflow-y: auto; padding: 7px 7px 20px 0; color: #78818d; font-family: FlowerRoad, "Noto Serif KR", serif; font-size: 15px; line-height: 1.9; scrollbar-color: #333c47 transparent; scrollbar-width: thin; }
.narration-text span { border-radius: 3px; transition: color 900ms ease, background 900ms ease, opacity 900ms ease; }
.narration-text span.active { color: #f4e8cc; background: linear-gradient(transparent 70%, rgba(219,184,118,.17) 70%); }
.narration-text span.upcoming { color: #c6bda9; }
.narration-text span.past { color: #9ca3ac; }
.narration-progress { flex: 0 0 auto; overflow: hidden; height: 2px; margin-top: 8px; border-radius: 4px; background: #2c333d; }
.narration-progress i { display: block; width: 0; height: 100%; background: var(--accent); }

@keyframes statusPulse { 50% { opacity: .45; } }

@media (max-width: 1350px) {
  .topbar { grid-template-columns: 260px auto 1fr; gap: 14px; }
  .project-actions .button-quiet { padding: 0 9px; }
  .column-guide, .scene-card { grid-template-columns: 125px minmax(460px, 1.35fr) minmax(220px, .7fr) minmax(280px, .85fr); }
}