:root {
  --bg: #111;
  --panel: #1c1c1c;
  --line: #3a3a3a;
  --text: #eee;
  --muted: #888;
  --image-bg: #000;      /* 이미지 영역: 검정 */
  --caption-bg: #3b2416; /* 자막 영역: 짙은 갈색 (삼국지풍) */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  line-height: 1.5;
}
button, input, textarea { font: inherit; color: inherit; }

button {
  background: transparent; border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 14px; cursor: pointer; white-space: nowrap;
}
button:hover { border-color: var(--text); }
button.solid { background: var(--text); color: var(--bg); border-color: var(--text); }
button:disabled { opacity: .35; cursor: default; }

.view { max-width: 1280px; margin: 0 auto; padding: 20px; }
.bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.spacer { flex: 1; }
.empty { color: var(--muted); padding: 60px 0; text-align: center; }

/* ---------- 무대 (16:9, 컨테이너 단위로 비례 축소) ---------- */
.stage-wrap { container-type: inline-size; width: 100%; position: relative; }
.stage {
  /* 자막/선택지 글자 크기. 플레이·편집 화면에서는 아래에서 최소 px을 보장한다 */
  --fs-cap: 3cqw; --fs-q: 2cqw; --fs-choice: 2.2cqw; --fs-ui: 2cqw; --fs-sm: 1.6cqw;
  width: 100%; aspect-ratio: 16 / 9; display: flex; flex-direction: column;
  background: var(--image-bg); overflow: hidden; user-select: none;
}
.img-area { position: relative; flex: 0 0 64%; background: var(--image-bg); overflow: hidden; }
.img-area .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-area .char {
  position: absolute; bottom: 0; height: 94%; width: 46%;
  object-fit: contain; object-position: center bottom;
}
.img-area .char.center { left: 27%; }   /* One shot */
.img-area .char.left   { left: 3%; }    /* Two shot */
.img-area .char.right  { right: 3%; }

.caption-area {
  flex: 1 1 0; min-height: 0; background: var(--caption-bg); color: #fff;
  border-top: 0.2cqw solid #7a5430; padding: 1.4cqw 4cqw;
  display: flex; overflow-y: auto;
}
.caption-area > * { margin-block: auto; }           /* 세로 가운데 정렬, 넘치면 스크롤 */
.caption { font-size: var(--fs-cap); line-height: 1.55; white-space: pre-wrap; word-break: keep-all; width: 100%; }

.choice-box { width: 100%; display: grid; grid-template-columns: 1fr; gap: 0.6cqw; }
.choice-box.many { grid-template-columns: 1fr 1fr; gap: 0.6cqw 1.2cqw; }
.choice-box .question { grid-column: 1 / -1; font-size: var(--fs-q); color: #ccc; white-space: pre-wrap; line-height: 1.4; }
.choice {
  display: flex; align-items: center; gap: 0.6em; text-align: left;
  background: transparent; border: 1px solid #888; color: #fff;
  border-radius: 0.3em; padding: 0.25em 0.8em; font-size: var(--fs-choice); line-height: 1.35;
}
.choice:hover { background: #fff; color: #000; border-color: #fff; }
.choice .num { flex: 0 0 auto; width: 1.2em; text-align: center; font-size: 0.85em; opacity: .7; }
.stage-wrap:not(.interactive) .choice { pointer-events: none; }

/* 플레이·편집 화면: 작은 화면에서도 읽을 수 있는 최소 글자 크기 */
#play-stage .stage, .edit .stage {
  --fs-cap: max(16px, 3cqw); --fs-q: max(14px, 2cqw); --fs-choice: max(14px, 2.2cqw);
  --fs-ui: max(14px, 2cqw); --fs-sm: max(12px, 1.6cqw);
}
@container (max-width: 700px) {                     /* 좁은 화면(폰): 이미지는 16:9 유지, 자막 영역은 내용만큼 늘어남 */
  #play-stage .stage, .edit .stage { aspect-ratio: auto; }
  #play-stage .img-area, .edit .img-area { flex: none; aspect-ratio: 16 / 9; }
  #play-stage .caption-area, .edit .caption-area { flex: none; min-height: 30cqw; padding: 2.5cqw 3cqw; overflow: visible; }
}

.overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .85);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw;
}
.overlay h2 { margin: 0; font-size: 6cqw; letter-spacing: .2em; font-weight: 400; }
.overlay .row { display: flex; gap: 1.4cqw; }
.overlay button { font-size: 1.8cqw; padding: 0.7cqw 2.2cqw; }

/* ---------- 시나리오 페이지 ---------- */
.list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { border: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; background: var(--panel); }
.card:hover { border-color: #888; }
.card.dragging { opacity: .35; }
.card.over { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
.card .head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); }
.card .head button { padding: 1px 9px; font-size: 12px; }
.card .stage-wrap { pointer-events: none; }

.ctx { position: fixed; z-index: 100; background: var(--panel); border: 1px solid #888; padding: 3px; }
.ctx button { display: block; width: 100%; border: 0; text-align: left; padding: 6px 18px; }
.ctx button:hover { background: #fff; color: #000; }

/* ---------- 컷 제작 페이지 (무대 위에서 직접 편집) ---------- */
.edit { max-width: 1100px; margin: 0 auto; }

/* 이미지 영역: 파선 실루엣 슬롯 */
.img-area.editable .bgslot {
  position: absolute; inset: 1cqw; cursor: pointer;
  border: 0.15cqw dashed #666; display: flex; justify-content: center; padding-top: 0.6cqw;
  color: #888; font-size: var(--fs-sm);
}
.img-area.editable .bgslot.filled { border-color: transparent; }
.img-area.editable .bgslot:hover { border-color: #fff; color: #fff; }
.zone {
  position: absolute; top: 14%; bottom: 0; width: 26%; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; color: #777;
}
.zone.left { left: 5%; } .zone.center { left: 37%; } .zone.right { left: 69%; }
.zone svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.zone svg * { vector-effect: non-scaling-stroke; }
.zone.dim svg { opacity: .35; }
.zone:hover { color: #fff; }
.zone.filled:hover { outline: 0.15cqw dashed #fff; outline-offset: -0.15cqw; }
.x { position: absolute; top: 0.6cqw; right: 0.6cqw; opacity: 0; padding: 0 0.6em; font-size: var(--fs-sm); line-height: 1.6; background: #000; color: #fff; border: 0.12cqw solid #fff; }
.filled:hover > .x { opacity: 1; }

/* 자막 영역: 자막 / 선택지 모드 */
.caption-area.editable { position: relative; }
.editable button, .editable input, .editable textarea { font-size: var(--fs-ui); }
.editable button { padding: 0.15em 0.6em; border-radius: 0.3em; line-height: 1.4; }
.caption-area.editable input[type=text] {
  background: rgba(0, 0, 0, .25); border: 1px dashed #888; border-radius: 0.3em;
  padding: 0.2em 0.6em; color: #fff; width: 100%; min-width: 0;
}
.caption-area.editable input[type=text]:focus, .cap-input:focus { outline: none; border-color: #fff; }
.cap-input {
  width: 100%; margin: 0 !important; align-self: stretch; min-height: 0 !important; resize: none; background: transparent; color: #fff;
  border: 1px dashed #888; border-radius: 0.3em; padding: 0.3em max(150px, 17cqw) 0.3em 0.6em;
  font-size: var(--fs-cap) !important; line-height: 1.55;
}
.mode { display: flex; flex: 0 0 auto; }
.mode.abs { position: absolute; top: 0.8cqw; right: 1.2cqw; margin: 0 !important; }
.mode button { border-radius: 0; padding: 0.15em 0.7em; font-size: var(--fs-sm); }
.mode button.on { background: #fff; color: #000; border-color: #fff; }
.ehead { grid-column: 1 / -1; display: flex; gap: 0.8cqw; align-items: center; }
.ehead .add { flex: 0 0 auto; border-style: dashed; white-space: nowrap; }
.erow { display: flex; align-items: center; gap: 0.8cqw; min-width: 0; }
.erow .n { flex: 0 0 1.4em; font-size: var(--fs-sm); opacity: .7; text-align: center; }
.erow label { display: flex; gap: 0.35em; align-items: center; font-size: var(--fs-sm); color: #ccc; white-space: nowrap; }
input[type=checkbox] { accent-color: #fff; }
.erow input[type=checkbox] { width: var(--fs-sm); height: var(--fs-sm); margin: 0; }

/* ---------- 플레이 ---------- */
#view-play { max-width: none; padding: 0; min-height: 100vh; background: #000; }
#view-play .bar { padding: 8px 12px; margin: 0; }
#play-stage { display: grid; place-items: center; padding: 0 12px 12px; }
#play-stage .stage-wrap { width: min(100%, calc((100vh - 60px) * 16 / 9)); }

@media (max-width: 800px) {
  .edit { grid-template-columns: 1fr; }
  .preview { position: static; order: -1; }
}

/* 이미지 변환 중 표시 */
.busy { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200;
  background: #fff; color: #000; padding: 8px 18px; border-radius: 4px; font-size: 15px; }