:root {
  color-scheme: dark;
  --bg: #070914;
  --panel: rgba(15, 19, 37, .94);
  --panel-2: rgba(23, 29, 51, .9);
  --line: rgba(214, 186, 121, .24);
  --gold: #e8cc8f;
  --gold-2: #caa55a;
  --text: #f7f3e9;
  --muted: #aab0c4;
  --danger: #f2a8a8;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 50% -10%, #171c3a 0%, #090b17 38%, #05060d 100%); color: var(--text); font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, sans-serif; }
body { padding: max(18px, env(safe-area-inset-top)) 14px max(32px, env(safe-area-inset-bottom)); }
button, input, select, textarea { font: inherit; }
button, select, input[type=file], textarea { -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(100%, 760px); margin: 0 auto; }
.hero { display: grid; grid-template-columns: 50px 1fr; gap: 14px; align-items: start; padding: 18px 8px 22px; }
.brand-mark { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--gold); font-size: 24px; box-shadow: 0 0 30px rgba(232,204,143,.13); }
.eyebrow { margin: 0 0 7px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
h1, h2 { margin: 0; line-height: 1.2; }
h1 { font-size: clamp(23px, 6vw, 34px); }
h2 { font-size: 20px; }
.hero-copy, .hint { color: var(--muted); line-height: 1.6; }
.hero-copy { margin: 9px 0 0; font-size: 14px; }
.hint { margin: 9px 0 16px; font-size: 13px; }
.panel { margin-bottom: 14px; padding: 18px; background: linear-gradient(180deg, rgba(20,25,45,.96), rgba(10,13,27,.96)); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 55px rgba(0,0,0,.24); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.field span { font-weight: 700; }
.field small { font-weight: 500; opacity: .75; }
select, input[type=file], textarea { width: 100%; background: #0b0f1f; color: var(--text); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; outline: none; }
select { min-height: 46px; padding: 0 12px; }
input[type=file] { padding: 10px; }
textarea { min-height: 88px; padding: 12px; resize: vertical; line-height: 1.45; }
select:focus, textarea:focus, input[type=file]:focus { border-color: rgba(232,204,143,.6); box-shadow: 0 0 0 3px rgba(232,204,143,.08); }
.music-field { margin-top: 12px; }
.format-status { margin-top: 11px; padding: 10px 12px; border-radius: 12px; background: rgba(232,204,143,.07); color: #d8dcef; font-size: 12px; line-height: 1.5; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ghost-btn, .secondary-btn { border: 1px solid rgba(255,255,255,.14); color: var(--text); background: rgba(255,255,255,.045); border-radius: 12px; min-height: 42px; padding: 0 13px; font-weight: 750; }
.scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scene-card { position: relative; min-height: 210px; overflow: hidden; background: #080b15; border: 1px dashed rgba(255,255,255,.18); border-radius: 16px; }
.scene-card.filled { border-style: solid; border-color: rgba(232,204,143,.36); }
.scene-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.scene-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.scene-card.filled .scene-preview { display: block; }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.05) 45%, rgba(0,0,0,.72)); pointer-events: none; }
.scene-meta { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 6px; pointer-events: none; }
.scene-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(8,10,17,.8); border: 1px solid rgba(232,204,143,.35); color: var(--gold); font-weight: 900; }
.scene-label { font-size: 13px; font-weight: 800; text-shadow: 0 2px 8px #000; }
.scene-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 3; }
.scene-remove { position: absolute; z-index: 4; top: 9px; right: 9px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.68); color: white; display: none; }
.scene-card.filled .scene-remove { display: block; }
.caption-list { display: grid; gap: 10px; }
.caption-item { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; }
.caption-index { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(232,204,143,.09); color: var(--gold); font-weight: 900; border: 1px solid var(--line); }
.duration-pill { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: var(--gold); background: rgba(232,204,143,.08); border: 1px solid var(--line); font-size: 12px; font-weight: 800; }
.preview-wrap { position: relative; width: min(100%, 360px); aspect-ratio: 9/16; margin: 16px auto; border-radius: 20px; overflow: hidden; background: #03040a; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 45px rgba(0,0,0,.35); }
#previewCanvas { width: 100%; height: 100%; display: block; }
.preview-placeholder { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; padding: 28px; color: var(--muted); background: radial-gradient(circle at center, rgba(41,50,87,.48), rgba(4,5,12,.96)); }
.preview-placeholder strong { color: var(--text); font-size: 14px; }
.preview-placeholder span { font-size: 12px; }
.timeline-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.timeline-track, .render-progress-track { height: 7px; background: rgba(255,255,255,.09); border-radius: 999px; overflow: hidden; }
.timeline-progress, .render-progress { width: 0%; height: 100%; background: linear-gradient(90deg, #9b7c44, #f2dba7); transition: width .08s linear; }
.primary-btn { width: 100%; min-height: 58px; border: 0; border-radius: 16px; font-size: 16px; font-weight: 900; color: #0d1018; background: linear-gradient(135deg, #f1dbac, #c8a55d); box-shadow: 0 13px 28px rgba(200,165,93,.18); }
.primary-btn:disabled { color: #7c8191; background: #252a38; box-shadow: none; }
.render-progress-wrap { margin-top: 15px; }
#renderStatus { margin: 9px 2px 0; color: var(--muted); font-size: 13px; }
.download-link { margin-top: 14px; min-height: 54px; border-radius: 16px; display: grid; place-items: center; text-decoration: none; color: #fff; font-weight: 900; background: linear-gradient(135deg, #7259d8, #ae79dd); }
.render-note { margin: 11px 1px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.footer-note { display: grid; gap: 4px; justify-items: center; padding: 12px 0 26px; color: var(--muted); font-size: 12px; }
.footer-note strong { color: var(--gold); letter-spacing: .16em; }
@media (max-width: 520px) {
  .field-grid { grid-template-columns: 1fr; }
  .panel { padding: 16px; border-radius: 19px; }
  .scene-grid { grid-template-columns: 1fr 1fr; }
  .scene-card { min-height: 190px; }
  .timeline-row { grid-template-columns: 1fr; }
}