/* shortform.css — AI 숏폼 페이지(docs/SHORTFORM_MODULE_PLAN.md §8). Tailwind 유틸이 대부분을 맡고, 여기는 커스텀 컴포넌트만. */

.watch-frame { aspect-ratio: 9 / 16; max-height: 80vh; }
.watch-frame video, .watch-frame img { width: 100%; height: 100%; }

.stage-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.stage-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9999px; border: 1px solid #e5e7eb; background: #fff; font-size: 13px; color: #374151; cursor: pointer; white-space: nowrap; }
.stage-tab:hover { border-color: #f97316; }
.stage-tab.active { background: #fff7ed; border-color: #f97316; color: #c2410c; font-weight: 600; }
.stage-tab .dot { width: 8px; height: 8px; border-radius: 9999px; background: #d1d5db; }
.stage-tab[data-status="RUNNING"] .dot { background: #3b82f6; animation: pulse 1.2s infinite; }
.stage-tab[data-status="REVIEW"] .dot { background: #f59e0b; }
.stage-tab[data-status="APPROVED"] .dot, .stage-tab[data-status="SKIPPED"] .dot { background: #22c55e; }
.stage-tab[data-status="FAILED"] .dot { background: #ef4444; }
.stage-tab[data-status="PENDING"] .dot { background: #a78bfa; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 9999px; background: #f3f4f6; color: #4b5563; }
.badge.RUNNING { background: #dbeafe; color: #1d4ed8; }
.badge.REVIEW { background: #fef3c7; color: #b45309; }
.badge.APPROVED, .badge.SKIPPED { background: #dcfce7; color: #15803d; }
.badge.FAILED { background: #fee2e2; color: #b91c1c; }
.badge.PENDING { background: #ede9fe; color: #6d28d9; }
.badge.gated { background: #fce7f3; color: #be185d; }

.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.scene-card { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.scene-card.EXCLUDED { opacity: .5; }
.scene-media { aspect-ratio: 9 / 16; background: #111; position: relative; }
.scene-media img, .scene-media video { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.scene-media .nomedia { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 12px; }
.scene-body { padding: 8px 10px; font-size: 12px; color: #374151; display: flex; flex-direction: column; gap: 4px; }
.scene-body .heading { font-weight: 600; color: #111827; }
.scene-body .line { padding-left: 6px; border-left: 2px solid #e5e7eb; }
.scene-body .line audio { width: 100%; height: 28px; margin-top: 2px; }

.cast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cast-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; }
.cast-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #f3f4f6; }
.cast-card .cast-body { padding: 8px 10px; font-size: 12px; }

.artifact-list { display: flex; flex-wrap: wrap; gap: 8px; }
.artifact { border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 8px; font-size: 12px; background: #fafafa; max-width: 220px; }
.artifact.SELECTED { border-color: #22c55e; background: #f0fdf4; }
.artifact.REJECTED { border-color: #fca5a5; opacity: .7; }
/* 상류 편집으로 무효화된 버전 — 되살릴 수는 있지만 현재 대본·의상과 안 맞을 수 있다(§6-4) */
.artifact.SUPERSEDED { opacity: .72; border-style: dashed; }
.artifact img, .artifact video { width: 100%; border-radius: 6px; margin-top: 4px; cursor: zoom-in; }

/* 버전 이력 서브뷰(docs/SHORTFORM_STUDIO_VERSION_HISTORY_PLAN.md §4) */
.subview { display: inline-flex; margin-bottom: 10px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.subview button { padding: 4px 10px; font-size: 12px; background: #fff; color: #6b7280; border: 0; cursor: pointer; }
.subview button + button { border-left: 1px solid #e5e7eb; }
.subview button.on { background: #fff7ed; color: #c2410c; font-weight: 600; }
.subview-note { font-size: 11px; color: #9ca3af; margin-left: 8px; }
.ver-group { border-top: 1px solid #f3f4f6; padding-top: 8px; margin-top: 8px; }
.ver-group > h5 { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 4px; }
.assembly-list { display: flex; flex-direction: column; gap: 8px; }
.assembly-row { max-width: none; }
/* 부(part) 칩·분할 표(SEASON_PARTS_PLAN §6) */
.part-chip { padding: 3px 10px; font-size: 12px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; }
.part-chip.on { background: #fff7ed; border-color: #fdba74; color: #c2410c; font-weight: 600; }
.part-chip .sub { color: #9ca3af; font-weight: 400; margin-left: 4px; }
.split-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0 10px; }
.split-table th, .split-table td { border-bottom: 1px solid #f3f4f6; padding: 4px 6px; text-align: left; white-space: nowrap; }
.split-table th { color: #6b7280; font-weight: 500; }
.split-table .warn { color: #b45309; }
/* 더빙 연기 지시 표(VOICE_DIRECTION_PLAN §6) — split-table 위에 입력 폭만 */
.dir-table td.txt { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.dir-table input[type=number] { width: 60px; }
.dir-table input[type=text] { width: 190px; }
.dir-table select { font-size: 12px; }
.dir-table audio { vertical-align: middle; }
.assembly-row video { width: 150px; aspect-ratio: 9 / 16; border-radius: 8px; background: #000; margin-top: 0; cursor: default; }

.admin-panel { margin-top: 12px; border: 1px dashed #a5b4fc; border-radius: 12px; padding: 10px 12px; background: #eef2ff; font-size: 13px; }
.admin-panel h4 { font-weight: 600; color: #3730a3; margin-bottom: 6px; }
.admin-panel .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.admin-panel input[type=text], .admin-panel input[type=number], .admin-panel select, .admin-panel textarea { border: 1px solid #c7d2fe; border-radius: 6px; padding: 4px 6px; font-size: 12px; background: #fff; }
.admin-panel textarea { width: 100%; min-height: 60px; }
.btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; border: 1px solid #c7d2fe; background: #fff; color: #3730a3; font-size: 12px; cursor: pointer; white-space: nowrap; }
.btn:hover { background: #e0e7ff; }
.btn.primary { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.btn.primary:hover { background: #4338ca; }
.btn.danger { color: #b91c1c; border-color: #fca5a5; }
.btn:disabled { opacity: .5; cursor: default; }
.busy { opacity: .6; pointer-events: none; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; font-size: 12px; color: #4b5563; }
.kv dt { font-weight: 600; color: #374151; }
pre.json { font-size: 11px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; overflow: auto; max-height: 240px; white-space: pre-wrap; }

/* 전체화면 뷰어(fullscreen-viewer.js 규약: .fullscreen-mode 로 표시) */
.fullscreen-overlay { display: none; position: fixed; inset: 0; z-index: 100; background: #000; align-items: center; justify-content: center; }
.fullscreen-overlay.fullscreen-mode { display: flex; }
.fullscreen-overlay img, .fullscreen-overlay video { max-width: 100vw; max-height: 100vh; display: none; transform: translate(var(--fs-tx, 0), var(--fs-ty, 0)) scale(var(--fs-scale, 1)); }
.fullscreen-overlay.show-img img, .fullscreen-overlay.show-video video { display: block; }
.fullscreen-close { position: absolute; top: 12px; right: 16px; z-index: 2; color: #fff; font-size: 32px; background: transparent; border: 0; cursor: pointer; }

.modal { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal.hidden { display: none; }
.modal-box { background: #fff; border-radius: 16px; max-width: 720px; width: 100%; max-height: 90vh; overflow: auto; padding: 16px 18px; font-size: 13px; }
.modal-box h3 { font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.modal-box label { display: block; font-size: 12px; color: #374151; margin-top: 8px; }
.modal-box input[type=text], .modal-box input[type=number], .modal-box select, .modal-box textarea { width: 100%; border: 1px solid #d1d5db; border-radius: 6px; padding: 6px 8px; font-size: 13px; }
.cand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.cand { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; cursor: pointer; font-size: 11px; }
.cand:hover { border-color: #4f46e5; }
.cand img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.cand .n { padding: 4px 6px; }