* { box-sizing: border-box; margin: 0; padding: 0; }
/* 애니 관리 모드(body.kind-anime): 오디오 패널·미리보기·HTML/영상 다운로드 버튼을 숨김.
   (영상 다운로드 버튼은 영상 관리 페이지에서는 그대로 노출 — body.kind-anime 스코프만 숨김.) */
body.kind-anime #audioPanel,
body.kind-anime #previewBtn,
body.kind-anime #dlHtmlBtn,
body.kind-anime #dlVideoBtn { display: none !important; }
/* 애니 모드 장면 카드: 인용·요약 라인을 숨겨 title 한 줄로 깔끔하게 */
body.kind-anime .scene-list .sr-quotes,
body.kind-anime .scene-list .sr-summary { display: none !important; }
/* 애니 분석 — 파트 경계 구분 divider (3~4 파트 병렬 추출 시) */
.scene-part-divider {
  margin: 14px 0 6px;
  padding: 6px 14px;
  background: linear-gradient(90deg, rgba(195,137,255,.22), rgba(195,137,255,.04));
  border-left: 3px solid #c389ff;
  border-radius: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  color: #d4b6ff;
}
/* 장면 카드: LLM이 지정한 목표 영상 길이 뱃지(애니 추출 결과에 표시) */
.sr-dur { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: rgba(110,168,254,.18); color: #bcd9ff; }

/* === 에이전트 채팅 패널: 화면 우측에 붙은 전체높이 사이드바(상단까지 포함, 왼쪽 한 줄 라인 구분) === */
body.agent-active #agentPanel.agent-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;        /* 상단 끝부터 하단 끝까지 전체 높이 */
  width: 440px; z-index: 50;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: none; border-left: 1px solid var(--border);
  border-radius: 0; box-shadow: none;
  padding: 12px;
}
/* 모델 배지(Claude Opus 4.7 ...): 어디서도 표시하지 않음 */
#modelBadge { display: none !important; }
/* 메인 영역 + 상단바: 패널 폭(440) + 8px 호흡만큼 우측 여백 확보 → 상단 메뉴가 가려지지 않음 */
body.agent-active .layout, body.agent-active .home-view, body.agent-active .gpu-inner {
  padding-right: 448px;
}
/* 애니 작업 화면의 좌·우 여백을 줄여 가용 폭 확보(에이전트 활성 상태일 때) */
body.agent-active .main { padding-left: 12px; padding-right: 12px; }
body.agent-active .topbar { display: none; }
/* topbar 가 숨겨졌으니 .layout / .home-view 도 100vh 풀로 써야 함 (디폴트는 calc(100vh - 57px)).
   숨긴 채로 57px 빼면 하단에 57px '바' 같은 빈 영역이 남아서 다음 씬 내용이 가려져 보임. */
body.agent-active .layout,
body.agent-active .home-view { height: 100vh; }
.agent-panel.hidden { display: none !important; }

/* === 보이지 않는 스크롤바(스크롤은 그대로 동작) === */
/* 전역: 본문/모든 컨테이너의 네이티브 스크롤바를 숨김(Chromium/Firefox/Edge) */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
*::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }
/* 에이전트 채팅 로그도 동일하게 보이지 않는 스크롤 */
.agent-log { scrollbar-width: none; -ms-overflow-style: none; }
.agent-log::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* === Grok 스타일 에이전트 UI === */
.agent-head { display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.agent-title { font-size: 13.5px; font-weight: 600; color: var(--text); letter-spacing: -.2px; }
.agent-iconbtn { width: 28px; height: 28px; border-radius: 8px;
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.agent-iconbtn:hover { background: var(--panel-2); color: var(--text); }

/* 메시지: 사용자=우측 작은 버블, AI=전체폭 평문(버블 없음) */
.agent-log { flex: 1; overflow-y: auto; padding: 4px 2px;
  display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.agent-msg { font-size: 14px; line-height: 1.6; word-break: keep-all; white-space: pre-wrap; }
.agent-msg.user {
  align-self: flex-end; max-width: 88%;
  background: var(--panel-2); color: var(--text);
  padding: 9px 13px; border-radius: 14px; border-bottom-right-radius: 4px;
}
/* 사용자 메시지 안의 첨부 chip — 두 줄(파일명·용량) 박스, Grok 스타일 */
.agent-msg-attach-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.agent-msg-attach {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(99, 179, 237, 0.14); border: 1px solid rgba(99, 179, 237, 0.4);
  color: var(--text); border-radius: 10px; padding: 6px 10px;
  min-width: 0; max-width: 260px;
}
.agent-msg-attach-icon {
  flex: none; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(99, 179, 237, 0.22); border-radius: 6px; font-size: 14px;
}
.agent-msg-attach-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.agent-msg-attach-name {
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agent-msg-attach-size { font-size: 11px; color: var(--muted); margin-top: 1px; }
.agent-msg.assistant {
  align-self: stretch; max-width: 100%;
  background: transparent; color: var(--text); padding: 2px 0;
}
.agent-msg.thinking {
  align-self: flex-start; color: var(--muted); font-style: italic; background: transparent;
}
.agent-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 40px 10px; line-height: 1.6; }

/* 입력란: 세로 컨테이너 (chips → textarea 2줄 → 액션 row) */
.agent-form {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 18px; padding: 12px 14px 10px 14px; margin-top: 10px;
  transition: border-color .15s ease;
  position: relative;
  cursor: text;  /* form 빈 영역 클릭 시 입력 인터랙션 의도 표시 */
}
.agent-form:focus-within { border-color: var(--accent); }
/* 첨부 chip strip — textarea 위쪽 한 줄(또는 여러 줄) */
.agent-attach-strip { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.agent-attach-strip.empty { display: none; }
.agent-attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(99, 179, 237, 0.12); border: 1px solid rgba(99, 179, 237, 0.45);
  color: #c8e0f4; border-radius: 14px; padding: 3px 8px 3px 10px; font-size: 12px;
  max-width: 100%;
}
.agent-attach-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.agent-attach-size { color: var(--muted); font-size: 11px; }
.agent-attach-del {
  border: none; background: transparent; color: #c8e0f4;
  width: 16px; height: 16px; padding: 0; cursor: pointer;
  border-radius: 50%; font-size: 14px; line-height: 1;
}
.agent-attach-del:hover { background: rgba(255,255,255,0.15); color: #fff; }
/* 드랍 오버레이 — form 안 전체를 덮음 */
.agent-drop-overlay {
  position: absolute; inset: 0; border-radius: 18px;
  background: rgba(99, 179, 237, 0.22);
  border: 2px dashed #63b3ed;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-weight: 700; font-size: 14px;
  pointer-events: none; z-index: 3;
}
.agent-drop-overlay.hidden { display: none; }
.agent-form:focus-within { border-color: var(--accent); }
.agent-form textarea {
  width: 100%; min-height: 48px; max-height: 220px;
  resize: none; overflow-y: auto;
  background: transparent; color: var(--text);
  border: none; outline: none;
  padding: 2px 0; font: inherit; font-size: 14px; line-height: 1.55;
  cursor: text;
}
.agent-form textarea::placeholder { color: var(--muted); }
.agent-sendbtn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #0b1023;
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; flex-shrink: 0;
  transition: filter .12s ease;
}
.agent-sendbtn:hover:not(:disabled) { filter: brightness(1.1); }
.agent-sendbtn:disabled { opacity: .35; cursor: not-allowed; }
/* ■ 정지 모드 — 처리 중일 때 클릭하면 cancel */
.agent-sendbtn.stop {
  background: #e94c5b; color: #fff;
  font-size: 13px; font-weight: 700;
}
.agent-sendbtn.stop:hover:not(:disabled) { background: #ff5e6c; filter: none; }
/* 입력 영역 하단 액션 row — 좌:📎  spacer  우:↑ */
.agent-form-actions { display: flex; flex-direction: row; align-items: center; gap: 6px; width: 100%; }
.agent-form-spacer { flex: 1; }
/* 📎 첨부 버튼 — 박스 디자인 (테두리 + hover 강조) */
.agent-attachbtn {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,0.04); color: var(--muted);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .12s ease;
  padding: 0;
}
.agent-attachbtn:hover { background: rgba(99,179,237,0.14); border-color: #63b3ed; color: #c8e0f4; }
.agent-attachbtn:active { transform: scale(0.95); }
/* 🎬 영상 모아 보기 — 하단 액션 row 우측 */
.agent-videos-btn {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(195,137,255,.18); color: #d4b6ff; border: 1px solid #c389ff55;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; transition: all .12s ease;
  padding: 0;
}
.agent-videos-btn:hover { background: rgba(195,137,255,.32); border-color: #c389ff; }

/* === 씬 영상 연속 재생 모달 === */
.scene-player-modal { position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; }
.scene-player-modal.hidden { display: none !important; }
.scene-player-inner { width: 90vw; max-width: 1100px; height: 90vh; max-height: 900px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden; }
.scene-player-head { display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.scene-player-title { font-weight: 700; font-size: 14px; }
.scene-player-info { font-size: 12px; color: var(--muted); flex: 1; }
.scene-player-download { font-size: 11.5px; font-weight: 700;
  background: rgba(195,137,255,.18); color: #d4b6ff; border: 1px solid #c389ff55;
  border-radius: 6px; padding: 5px 10px; cursor: pointer; white-space: nowrap;
  transition: all .12s ease; }
.scene-player-download:hover:not(:disabled) { background: rgba(195,137,255,.32); border-color: #c389ff; }
.scene-player-download:disabled { opacity: .5; cursor: default; }
.scene-player-download.is-busy { opacity: .9; cursor: progress; }
.scene-player-download .spinner { border-color: currentColor; border-top-color: transparent; }
.scene-player-download-subs { background: rgba(74,223,176,.16); color: #88e6c2;
  border-color: rgba(74,223,176,.5); margin-left: 4px; }
.scene-player-download-subs:hover:not(:disabled) { background: rgba(74,223,176,.3);
  border-color: #4adfb0; color: #c3f5dd; }
.scene-player-close { width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  cursor: pointer; font-size: 16px; line-height: 1; }
.scene-player-close:hover { border-color: var(--err); color: var(--err); }
.scene-player-main { flex: 1; position: relative; background: #000;
  display: flex; align-items: stretch; justify-content: center; min-height: 0; }
.scene-player-dialogues { width: 420px; flex-shrink: 0; overflow-y: auto;
  background: var(--panel); border-right: 1px solid var(--border);
  padding: 12px 14px; font-size: 13px; color: var(--text); display: flex; flex-direction: column; gap: 8px; }
.scene-player-dialogues.empty { display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px; text-align: center; padding: 24px 12px; }
.scene-player-dlg-head { font-weight: 700; color: var(--muted); font-size: 13px;
  letter-spacing: .3px; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 2px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scene-player-dlg-head-text { flex: 1; min-width: 0; }
.scene-player-dlg-item { display: grid; grid-template-columns: 26px 1fr; gap: 8px;
  padding: 8px 8px; border-radius: 6px; background: rgba(255,255,255,.02); }
.scene-player-dlg-item.thought { background: rgba(140,120,210,.08); }
.scene-player-dlg-num { font-size: 12px; font-weight: 800; color: var(--muted);
  background: rgba(255,255,255,.06); border-radius: 4px; padding: 3px 0;
  text-align: center; line-height: 1.5; height: fit-content; }
.scene-player-dlg-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scene-player-dlg-speaker { font-size: 12px; font-weight: 700; color: #c389ff;
  text-transform: none; letter-spacing: .2px; }
.scene-player-dlg-item.thought .scene-player-dlg-speaker { color: #8c78d2; }
.scene-player-dlg-ko { font-size: 14px; line-height: 1.45; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.scene-player-dlg-en { font-size: 14px; line-height: 1.45; color: var(--muted); font-style: italic;
  word-break: keep-all; overflow-wrap: anywhere; }
.scene-player-dlg-item.is-off { opacity: .42; }
.scene-player-dlg-item.is-off .scene-player-dlg-ko,
.scene-player-dlg-item.is-off .scene-player-dlg-en { text-decoration: line-through; }
/* 자막 타이밍 행 — 시작/길이 입력 + on/off 토글 */
.scene-player-dlg-timing { display: flex; align-items: center; gap: 3px; margin-top: 6px;
  font-size: 13px; color: var(--muted); flex-wrap: nowrap; }
.sp-dlg-t-lab { font-weight: 700; color: var(--muted); margin-right: 1px; font-size: 13px; flex-shrink: 0; }
.sp-dlg-t-sep { color: var(--muted); font-size: 13px; flex-shrink: 0; }
.scene-player-dlg-timing input.sp-dlg-t-start,
.scene-player-dlg-timing input.sp-dlg-t-end {
  width: 48px; flex-shrink: 0; padding: 3px 4px; font-size: 13px; background: rgba(255,255,255,.04);
  color: var(--text); border: 1px solid var(--border); border-radius: 4px;
  text-align: center;
  appearance: textfield; -moz-appearance: textfield; }
.scene-player-dlg-timing input::-webkit-outer-spin-button,
.scene-player-dlg-timing input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scene-player-dlg-timing input:focus { outline: none; border-color: #c389ff; background: rgba(195,137,255,.08); }
.sp-dlg-t-step { width: 20px; height: 22px; padding: 0; font-size: 14px; font-weight: 800;
  line-height: 1; cursor: pointer; border-radius: 4px; flex-shrink: 0;
  background: rgba(255,255,255,.06); color: var(--text);
  border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.sp-dlg-t-step:hover { background: rgba(195,137,255,.18); border-color: #c389ff; color: #c389ff; }
.sp-dlg-t-step:active { background: rgba(195,137,255,.32); }
.sp-dlg-t-toggle { margin-left: 6px; padding: 3px 9px; font-size: 12px; font-weight: 800;
  border-radius: 4px; cursor: pointer; border: 1px solid transparent; flex-shrink: 0; }
.sp-dlg-t-toggle.on { background: #4adfb0; color: #07251a; border-color: #4adfb0; }
.sp-dlg-t-toggle.off { background: transparent; color: var(--muted); border-color: var(--border); }
/* 영상 현재 시간 뱃지 — 음성 패널 헤더 우측에 inline 표시 (0.1초 단위 갱신) */
.scene-player-time-badge { background: rgba(74,223,176,.18); color: #4adfb0;
  border: 1px solid rgba(74,223,176,.45); font-size: 12px; font-weight: 800;
  padding: 2px 8px; border-radius: 4px; line-height: 1.4; letter-spacing: .3px;
  font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; }
.scene-player-time-badge.hidden { display: none !important; }
/* 자막 오버레이 — JS 가 활성 video bbox 측정해서 left/width 를 px 로 설정.
   wrap 은 word-break + overflow-wrap 로 한국어/영어 모두 자연스럽게 줄바꿈. */
.scene-player-subtitle { position: absolute; bottom: 9%;
  z-index: 5; pointer-events: none; text-align: center;
  display: flex; flex-direction: column; gap: 6px;
  box-sizing: border-box; }
.scene-player-subtitle.hidden { display: none !important; }
.scene-player-subtitle .sp-sub-line { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.scene-player-subtitle .sp-sub-ko, .scene-player-subtitle .sp-sub-en {
  display: inline-block; max-width: 100%;
  word-break: keep-all; overflow-wrap: break-word; white-space: normal;
  padding: 2px 10px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.scene-player-subtitle .sp-sub-ko { font-size: 20px; font-weight: 800; color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.95), 0 2px 4px rgba(0,0,0,.9);
  line-height: 1.3; }
.scene-player-subtitle .sp-sub-en { font-size: 16px; font-weight: 600; color: #ffe599;
  text-shadow: 0 0 5px rgba(0,0,0,.95), 0 2px 4px rgba(0,0,0,.9);
  font-style: italic; line-height: 1.3; }
/* 두 video 를 같은 자리에 겹쳐 두고 opacity 로 swap — 진짜 끊김 없는 씬 전환 */
.scene-player-video-stack { position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; }
.scene-player-video { position: absolute; max-width: 100%; max-height: 100%;
  width: auto; height: 100%; object-fit: contain;
  opacity: 0; pointer-events: none; transition: opacity 80ms linear; }
.scene-player-video.active { opacity: 1; pointer-events: auto; z-index: 2; }
.scene-player-empty { color: var(--muted); font-size: 13px; padding: 24px; text-align: center; }
.scene-player-empty.hidden { display: none !important; }
.scene-player-thumbs-wrap { position: relative; display: flex; align-items: stretch;
  border-top: 1px solid var(--border); background: var(--bg); flex-shrink: 0; min-height: 160px; }
.scene-player-thumbs { display: flex; gap: 10px; padding: 12px 10px 16px;
  overflow-x: auto; overflow-y: hidden; flex: 1; min-width: 0;
  scroll-behavior: smooth; scrollbar-width: thin;
  scrollbar-color: rgba(195,137,255,.55) rgba(255,255,255,.06); }
.scene-player-thumbs::-webkit-scrollbar { height: 10px; }
.scene-player-thumbs::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 6px; }
.scene-player-thumbs::-webkit-scrollbar-thumb { background: rgba(195,137,255,.55); border-radius: 6px; }
.scene-player-thumbs::-webkit-scrollbar-thumb:hover { background: rgba(195,137,255,.85); }
.scene-player-thumbs-nav { flex-shrink: 0; width: 28px; background: transparent;
  border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1;
  padding: 0; transition: color .12s ease, background .12s ease; }
.scene-player-thumbs-nav:hover { color: #c389ff; background: rgba(195,137,255,.08); }
.scene-player-thumbs-nav:disabled { opacity: .25; cursor: default; background: transparent; color: var(--muted); }
.scene-player-thumbs-nav.left { border-right: 1px solid var(--border); }
.scene-player-thumbs-nav.right { border-left: 1px solid var(--border); }
.scene-player-thumb { width: 72px; height: 128px; border: 2px solid transparent;
  border-radius: 6px; overflow: hidden; cursor: pointer; flex-shrink: 0;
  background: #000; position: relative; transition: border-color .12s ease; }
.scene-player-thumb:hover { border-color: #c389ff66; }
.scene-player-thumb.active { border-color: #c389ff; box-shadow: 0 0 0 2px #c389ff44; }
.scene-player-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.scene-player-thumb img { display: block; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none; background: #000; }
.scene-player-thumb-label { position: absolute; left: 4px; top: 4px;
  background: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 3px; line-height: 1; }
.scene-player-thumb-progress { position: absolute; left: 4px; right: 4px; bottom: 4px;
  height: 4px; background: rgba(0,0,0,.55); border-radius: 2px; overflow: hidden;
  pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.scene-player-thumb-progress-fill { display: block; height: 100%; width: 0%;
  background: #4adfb0; transition: width .15s linear; }
.scene-player-thumb.is-played .scene-player-thumb-progress-fill { width: 100%; }
.scene-player-thumb-confirmed { position: absolute; right: 4px; top: 4px;
  background: rgba(245,200,74,.92); color: #2b1f00; font-size: 11px; font-weight: 800;
  padding: 2px 6px; border-radius: 3px; line-height: 1; }

/* === 에이전트 자산(이미지) 갤러리: 캐릭터 시트 위에 표시 === */
.agent-assets { padding: 16px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); margin-bottom: 14px; position: relative; }
.agent-assets.hidden { display: none !important; }
.agent-assets-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.agent-assets-head h3 { font-size: 15px; color: var(--text); }
.agent-assets-hint { font-size: 12px; color: var(--muted); }
/* 공용 이미지 그리드: 원본 비율 유지 + 너무 큰 이미지는 max-height로 캡 → CSS 컬럼 마스너리 */
.agent-assets-grid {
  column-width: 200px; column-gap: 12px;
}
.agent-assets-empty { color: var(--muted); font-size: 13px; padding: 16px 4px;
  column-span: all; }
.agent-asset { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
  break-inside: avoid; margin: 0 0 12px; }
.agent-asset img {
  display: block; width: 100%; height: auto;
  aspect-ratio: auto;
  max-height: 380px; object-fit: contain;
  background: #0a0a0a;
}
.agent-asset.gen, .agent-asset.err { aspect-ratio: 9/16; position: relative; }
.agent-asset.gen .agent-asset-state, .agent-asset.err .agent-asset-state {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--muted); font-size: 13px; line-height: 1.6; padding: 12px;
}
.agent-asset.err .agent-asset-state { color: var(--err); }
.agent-asset-cap { padding: 8px 10px; }
.agent-asset-label { font-size: 13px; font-weight: 700; color: var(--text);
  word-break: keep-all; line-height: 1.35; }
.agent-asset-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.agent-asset { position: relative; }
.agent-asset.done { cursor: zoom-in; transition: transform .12s ease; }
.agent-asset.done:hover { transform: translateY(-2px); }
/* 우상단 X — hover 시 노출, 클릭 시 확인 모달로 삭제 */
.asset-del {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(0,0,0,.65); color: #fff;
  cursor: pointer; font-size: 13px; line-height: 1; z-index: 3;
  opacity: 0; transition: opacity .12s;
}
.agent-asset:hover .asset-del { opacity: 1; }
.asset-del:hover { background: var(--err); border-color: var(--err); }
/* 원본 다운로드 버튼 — 삭제 X 왼쪽(우상단). hover 시 노출. */
.asset-dl {
  position: absolute; top: 6px; right: 32px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); background: rgba(0,0,0,.65); color: #fff;
  cursor: pointer; font-size: 12px; line-height: 1; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s;
}
.agent-asset:hover .asset-dl { opacity: 1; }
.asset-dl:hover { background: var(--accent); border-color: var(--accent); }
.asset-dl:disabled { opacity: .5; cursor: default; }

/* 씬 카드 내부 에이전트 이미지 영역 (애니 모드 전용) */
.scene-agent-assets { margin: 10px 0 8px; padding: 10px 12px; background: var(--panel-2);
  border: 1px dashed var(--border); border-radius: 8px; }
.scene-agent-head { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 8px;
  letter-spacing: -.2px; }
.scene-agent-assets .agent-assets-grid { column-width: 140px; column-gap: 8px; }
.scene-agent-assets .agent-asset { margin-bottom: 8px; }
.agent-assets-empty.small { font-size: 12px; padding: 6px 4px; }

/* === 자산 확대 모달: 이미지 + 설명 텍스트. 어디든 클릭하면 닫힘 === */
.asset-modal { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center; padding: 28px;
  cursor: zoom-out; backdrop-filter: blur(2px); }
.asset-modal.hidden { display: none !important; }
.asset-modal-inner {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: min(96vw, 1200px); max-height: 100%;
}
#assetModalImg {
  max-height: 82vh; max-width: 100%; height: auto; width: auto;
  background: #000; border-radius: 10px; object-fit: contain;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.asset-modal-label {
  max-width: min(86vw, 900px);
  font-size: 14.5px; line-height: 1.55; color: var(--text);
  white-space: pre-wrap; word-break: keep-all; text-align: center;
  user-select: text; cursor: text;
  padding: 8px 14px;
}
.asset-modal-label.empty { color: var(--muted); font-style: italic; }
/* 모달 하단 푸터: 설명 텍스트(좌) + 다운로드 버튼(우) */
.asset-modal-foot {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  max-width: min(92vw, 980px); cursor: default;
}
.asset-modal-foot .asset-modal-label { padding: 8px 0; }
.asset-modal-dl {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  transition: background .12s, border-color .12s;
}
.asset-modal-dl:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.asset-modal-dl:disabled { opacity: .5; cursor: default; }

/* 좁아진 컷 카드: 프롬프트 텍스트가 격자 안에서 자동으로 줄어들도록 보장(가로 폭주 방지) */
body.kind-anime #sceneList, body.kind-anime .scene-list { min-width: 0; }
body.kind-anime .scene-list .sr-prompt,
body.kind-anime .scene-list pre,
body.kind-anime .scene-list .sr-visual { max-width: 100%; overflow-wrap: anywhere; }
:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1f2430;
  --border: #2a3140;
  --text: #e6e9ef;
  --muted: #97a0b0;
  --accent: #6ea8fe;
  --accent-2: #ff7aa2;
  --ok: #57d38c;
  --warn: #f4b740;
  --err: #ff6b6b;
}
body {
  font-family: "Pretendard", "Malgun Gothic", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
}

.topbar {
  display: flex; align-items: center; justify-content: flex-start; gap: 32px;
  padding: 14px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 18px; font-weight: 700; }
.topbar .sub { color: var(--muted); font-weight: 400; font-size: 14px; }
.model-badge {
  font-size: 12px; color: var(--muted);
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: 6px;
}

/* 상단 메뉴 */
.topnav { display: flex; gap: 6px; }
.nav-link {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 7px 16px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.nav-link:hover { color: var(--text); background: var(--panel-2); }
.nav-link.active { color: var(--text); background: var(--panel-2); border-color: var(--accent); }

.layout { display: flex; height: calc(100vh - 57px); }

/* 홈 대시보드 */
.home-view { height: calc(100vh - 57px); overflow-y: auto; padding: 28px 32px; }
.home-inner { max-width: 1100px; margin: 0 auto; }
.home-title { font-size: 22px; margin-bottom: 18px; }
.home-stats { display: flex; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.stat-card {
  flex: 1 1 160px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px;
}
.stat-num { font-size: 30px; font-weight: 700; color: var(--accent); }
.stat-lbl { font-size: 13px; color: var(--muted); margin-top: 4px; }

.home-progress {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 24px;
}
.prog-head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; color: var(--warn); }
.prog-item { font-size: 13px; color: var(--text); padding: 3px 0 3px 18px; }
.prog-empty { font-size: 13px; color: var(--muted); }

.home-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.home-section-head h3 { font-size: 15px; color: var(--muted); }
.home-hint { font-size: 12px; color: var(--muted); }

.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th {
  text-align: left; color: var(--muted); font-weight: 600; font-size: 12px;
  padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.dash-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.dash-table tbody tr { cursor: pointer; }
.dash-table tbody tr:hover { background: var(--panel-2); }
.dash-table .dc-work { color: var(--muted); }
.dash-table .dc-ep { color: var(--accent); font-weight: 700; white-space: nowrap; }
.dash-table .dc-title { max-width: 360px; }
/* GPU 모니터 */
.gpu-inner { max-width: 1400px; margin: 0 auto; }
.gpu-head { display: flex; align-items: baseline; gap: 14px; }
.gpu-summary { font-size: 13px; color: var(--muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border); margin-right: 4px; }
.dot.on { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.gpu-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gpu-col { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.gpu-col-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 10px; }
.gpu-col-head h3 { font-size: 16px; }
.gpu-cur-label, .gpu-hist-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 6px 0; }
.gpu-job { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; background: var(--panel-2); }
.gpu-job.run { border-color: var(--accent); }
.gpu-job.wait { border-style: dashed; color: var(--muted); }
.gj-title { font-size: 13px; font-weight: 600; line-height: 1.4; }
.gj-meta { font-size: 12px; color: var(--warn); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.gpu-idle { color: var(--muted); font-size: 13px; padding: 14px 12px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; }
.gpu-hist { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
.gh-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 5px 6px; border-radius: 6px; }
.gh-row:hover { background: var(--panel-2); }
.gh-badge { font-size: 10px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); flex-shrink: 0; }
.gh-row.ok .gh-badge { color: var(--ok); border-color: var(--ok); }
.gh-row.err .gh-badge { color: var(--err); border-color: var(--err); }
.gh-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-err { color: var(--err); font-size: 11px; }

/* =========================================================================
   CLI 모니터 (Claude CLI 전역 큐 페이지)
   ========================================================================= */
.cli-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cli-section { display: flex; flex-direction: column; }
.cli-section-title {
  font-size: 14px; font-weight: 700; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border); padding-bottom: 6px;
}
.cli-count {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--border);
}
.cli-running, .cli-queue { display: flex; flex-direction: column; gap: 6px; min-height: 60px; }
.cli-job {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; background: var(--panel-2);
}
.cli-job.run { border-color: var(--accent); }
.cli-job.wait { border-style: dashed; }
.cli-job.idle {
  color: var(--muted); font-size: 12px; padding: 12px;
  border: 1px dashed var(--border); border-radius: 8px;
  text-align: center; background: transparent;
}
.cli-job-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; line-height: 1.4;
}
.cli-job-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cli-job-meta {
  font-size: 11.5px; color: var(--muted);
  margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cli-job.run .cli-job-meta { color: var(--warn); }
.cli-dot { opacity: .5; }
.cli-pos {
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 6px; flex-shrink: 0;
}
.cli-cat {
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid; flex-shrink: 0;
}
.cli-model {
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid; flex-shrink: 0;
}
.cli-hist-row[data-job-id] { cursor: pointer; }
.cli-hist-row[data-job-id]:hover { background: rgba(120,170,255,.07); }
/* CLI 작업 요청/응답 전문 모달 */
.clijob-overlay {
  position: fixed; inset: 0; z-index: 9700;
  background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center;
  padding: 30px;
}
.clijob-card {
  background: var(--panel, #1a1d24); border: 1px solid var(--border);
  border-radius: 12px; width: min(900px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column; padding: 18px 20px; gap: 10px;
}
.clijob-head { display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--muted); gap: 12px; }
.clijob-close { padding: 4px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--text); cursor: pointer; font-size: 12px; }
.clijob-close:hover { border-color: var(--accent-2); color: var(--accent-2); }
.clijob-error { font-size: 12.5px; color: var(--err); background: rgba(255,90,90,.08);
  border: 1px solid rgba(255,90,90,.3); border-radius: 6px; padding: 8px 10px; }
.clijob-sec { font-size: 12px; font-weight: 700; color: var(--accent-2); margin-top: 4px; }
.clijob-pre {
  flex: 1; min-height: 60px; overflow: auto; margin: 0;
  background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; font-size: 12px; line-height: 1.5; white-space: pre-wrap;
  word-break: break-word; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  color: var(--text); max-height: 32vh;
}
.cli-history {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 52vh; overflow-y: auto;
}
.cli-hist-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; padding: 6px 8px; border-radius: 6px;
  border: 1px solid transparent;
}
.cli-hist-row:hover { background: var(--panel-2); border-color: var(--border); }
.cli-hist-row.err {
  background: rgba(255, 80, 80, .06);
  border-color: rgba(255, 80, 80, .25);
}
.cli-hist-row.err:hover { background: rgba(255, 80, 80, .11); border-color: var(--err); }
.cli-hist-status { font-size: 11px; flex-shrink: 0; }
.cli-hist-row.ok .cli-hist-status { color: var(--ok); }
.cli-hist-row.err .cli-hist-status { color: var(--err); font-weight: 700; }
.cli-hist-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cli-hist-meta { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.cli-hist-elapsed {
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--warn); font-weight: 600;
  flex-shrink: 0; min-width: 64px;
}
.cli-hist-time {
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--muted); flex-shrink: 0;
  margin-left: auto;
}
.cli-hist-err {
  color: var(--err); font-size: 11.5px; font-weight: 500;
  max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: help; flex-shrink: 1;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(255, 80, 80, .12); border: 1px solid rgba(255, 80, 80, .35);
}

.dash-table .vl-action { text-align: right; white-space: nowrap; }
.vl-btn {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.vl-btn:hover { border-color: var(--accent); }
.vl-btn.ext { background: linear-gradient(135deg, #6ea8fe, #8f7aff); color: #0b1018; border: none; }
.vl-btn.open { background: linear-gradient(135deg, #f4b740, #ff7aa2); color: #0b1018; border: none; }
.vl-btn:disabled { opacity: .55; cursor: default; }

/* Sidebar */
.sidebar {
  width: 280px; flex-shrink: 0;
  background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.side-head { padding: 16px 16px 8px; }
.side-head h2 { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.work-form { display: flex; gap: 6px; padding: 8px 16px 12px; }
.work-form input {
  flex: 1; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); padding: 8px 10px; border-radius: 6px; font-size: 13px;
}
.work-form button {
  background: var(--accent); color: #0b1220; border: none; font-weight: 600;
  padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.work-list { list-style: none; overflow-y: auto; flex: 1; padding: 0 8px 16px; }
.work-list li {
  padding: 10px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 2px;
  display: flex; justify-content: space-between; align-items: center; font-size: 14px;
}
.work-list li:hover { background: var(--panel-2); }
.work-list li.active { background: var(--panel-2); outline: 1px solid var(--accent); }
.work-list .count { font-size: 12px; color: var(--muted); }

/* Main */
.main { flex: 1; overflow-y: auto; padding: 24px 28px; }
.empty-state { color: var(--muted); text-align: center; margin-top: 18vh; font-size: 15px; }
.hidden { display: none !important; }

/* 제목과 '작품 수정' 버튼을 바로 옆에 붙여 배치(좌측 정렬). gap 으로 여백만 살짝. */
.work-panel-head { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 18px; }
.work-panel-head h2 { font-size: 22px; }
.work-panel-head #editWorkBtn { padding: 6px 12px; font-size: 12px; }

/* Dropzone */
.dropzone {
  border: 2px dashed var(--border); border-radius: 12px;
  padding: 32px; text-align: center; cursor: pointer;
  background: var(--panel); transition: .15s; margin-bottom: 24px;
}
.dropzone:hover { border-color: var(--accent); background: var(--panel-2); }
.dropzone.drag { border-color: var(--accent); background: #1b2333; }
.dz-icon { font-size: 28px; margin-bottom: 8px; }
.dz-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* 원본/강축약 2분할 업로드 */
.upload-area { margin-bottom: 24px; }
.dz-pair { display: flex; gap: 14px; }
.dropzone.half { flex: 1; padding: 24px 18px; margin-bottom: 0; }
.dropzone.half.has-file { border-style: solid; border-color: var(--ok); background: #14241b; }
.dz-file { color: var(--ok); font-size: 12px; margin-top: 8px; word-break: break-all; }
.upload-actions {
  display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px;
}
.upload-hint { color: var(--muted); font-size: 12px; }
#uploadBtn {
  background: var(--accent); color: #0b1220; border: none; font-weight: 700;
  padding: 14px 56px; border-radius: 10px; cursor: pointer; font-size: 17px;
  min-width: 260px;
}
#uploadBtn:hover { filter: brightness(1.08); }
#uploadBtn:disabled { opacity: .5; cursor: default; filter: none; }

/* 회차 카드 버전 태그 */
.ver-tags { display: inline-flex; gap: 4px; }
.ver-tag {
  font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border);
}
.ver-tag.o { color: var(--muted); }
.ver-tag.a { color: var(--accent-2); border-color: var(--accent-2); }
.ver-tag.gen { color: var(--warn); border-color: var(--warn); }
.ver-tag.err { color: var(--err); border-color: var(--err); }

/* 원문/강축약 글자수 pill */
.cnt-pills { display: inline-flex; gap: 6px; }
.cnt-pill {
  font-size: 12px; padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.cnt-pill.o { color: var(--text); }
.cnt-pill.a { color: var(--accent-2); border-color: var(--accent-2); }
.cnt-pill.gen { color: var(--warn); border-color: var(--warn); }
.cnt-pill.err { color: var(--err); border-color: var(--err); }

/* 원문 보기 모달 원본/강축약 토글 */
.raw-toggle { display: inline-flex; gap: 4px; }
.raw-tab {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 4px 12px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.raw-tab.active { color: var(--text); border-color: var(--accent); }

/* Chapters */
.chapters h3, .scene-panel-head h3 { font-size: 15px; margin-bottom: 10px; color: var(--muted); }
.chapter-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.chapter-list li {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; cursor: pointer; display: flex; align-items: center; gap: 12px;
}
.chapter-list li:hover { border-color: var(--accent); }
.chapter-list li.active { outline: 1px solid var(--accent); }
.chapter-list .ep { font-weight: 700; min-width: 42px; color: var(--accent); }
.chapter-list .ch-title { flex: 1; font-size: 14px; }
.chapter-list .ch-meta { font-size: 12px; color: var(--muted); }
/* 회차 총 영상 시간 (분:초) — 분석 완료 시만 노출 */
.chapter-list .ch-dur {
  font-size: 12px; color: var(--accent); font-family: ui-monospace, monospace;
  min-width: 44px; text-align: right;
}
/* 삭제 버튼 — 고정 슬롯으로 감싸 버튼 유무와 상관없이 다른 회차와 정렬 유지 */
.chapter-list .del-slot {
  flex: none; width: 56px; display: flex; justify-content: flex-end; align-items: center;
}
.chapter-list .del {
  font-size: 12px; color: var(--muted); cursor: pointer; padding: 4px 10px;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
}
.chapter-list .del:hover { color: var(--err); border-color: var(--err); background: rgba(255,90,90,.05); }
.chapter-list .ch-dl {
  font-size: 12px; color: var(--muted); cursor: pointer; padding: 4px 10px;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.chapter-list .ch-dl:hover { color: var(--accent-2); border-color: var(--accent-2); background: rgba(120,170,255,.06); }

.status { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); }
.status.pending, .status.processing { color: var(--warn); border-color: var(--warn); }
.status.done { color: var(--ok); border-color: var(--ok); }
.status.error { color: var(--err); border-color: var(--err); }

/* Chapter detail view (2단계 화면) */
.chapter-view-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.back-btn { flex-shrink: 0; }
.cv-titles { flex: 1; min-width: 0; }
.cv-titles h2 { font-size: 21px; line-height: 1.3; }
.cv-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* 단일 컬럼: 장면마다 [이미지 | 영상] 결과를 인라인 표시 */
.cv-body { display: block; }

/* 장면 카드 2단: 왼쪽 프롬프트·컨트롤 / 오른쪽 [이미지 | 영상] 결과 */
.sr-main { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.sr-left { flex: 1 1 50%; max-width: 50%; min-width: 0; }   /* 프롬프트 영역은 절반만 */
.sr-right { flex: 0 0 auto; }

/* 장면별 결과 영역: 이미지 | 영상 (각 9:16, 동일 크기·상단 정렬) */
.sr-results { display: flex; gap: 14px; margin: 0; flex-wrap: wrap; align-items: flex-start; }
.res-col { display: flex; flex-direction: column; gap: 6px; }
.res-head { display: flex; align-items: center; gap: 6px; min-height: 24px; flex-wrap: wrap; }
.res-label { font-size: 12px; font-weight: 700; color: #c389ff; }
.res-body {
  width: 300px; aspect-ratio: 9 / 16; background: #000;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.res-media { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
/* 컷 이미지는 2:3로 생성됨 → 9:16 박스를 채워(center-crop) 영상 시작 프레임과 동일하게 보이도록 */
.res-image .res-media { object-fit: cover; }
.res-ph { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.7; padding: 12px; }
.res-loading { text-align: center; color: var(--warn); font-size: 12px; line-height: 1.6; padding: 12px; }
.res-sub { color: var(--muted); font-size: 11px; margin-top: 8px; }
.res-error { text-align: center; color: var(--err); font-size: 12px; line-height: 1.6; padding: 12px; }
.res-dl { position: absolute; bottom: 6px; right: 6px; text-decoration: none; font-size: 11px; padding: 3px 8px; opacity: .85; }
.img-gen-btn {
  background: var(--panel-2); border: 1px solid #6ea8fe55; color: var(--text);
  font-size: 11px; padding: 3px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.img-gen-btn:hover { border-color: var(--accent); }
.img-gen-btn:disabled { opacity: .55; cursor: default; }
.img-gen-btn.alt { border-color: #57d38c55; }
.img-gen-btn.alt:hover { border-color: var(--ok); }

/* 컷별 i2v 입력 이미지 슬롯 */
.img-section { margin: 12px 0 0 20px; }
.img-section-label { font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.img-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.img-slot {
  width: 72px; height: 112px; border-radius: 8px; border: 1px dashed var(--border);
  background: var(--panel-2); position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: pointer; overflow: hidden;
}
.img-slot.empty:hover, .img-slot.drag { border-color: var(--accent); background: #1b2333; }
.img-slot.filled { border-style: solid; }
.img-slot.auto-cut { border-style: solid; border-color: #6ea8fe88; cursor: pointer; }
.img-slot.auto-cut:hover { border-color: var(--accent); }
.img-slot.auto-cut .img-label { background: rgba(110,168,254,.85); }
.img-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-plus { font-size: 20px; color: var(--muted); }
.img-label {
  position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  font-size: 10px; color: #e6e9ef; background: rgba(0,0,0,.55); padding: 2px 0;
}
.img-del {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 12px;
  line-height: 1; z-index: 2;
}
.img-del:hover { background: var(--err); }

/* 장면 카드 영상 생성: 모델/모드 셀렉트 + 생성 버튼 */
.sr-actions { margin: 12px 0 0 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sel-res, .sel-fps, .sel-dur, .sel-mode {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 7px 10px; border-radius: 8px; font-size: 13px; cursor: pointer;
}
.sel-res, .sel-fps, .sel-dur { border-color: #6ea8fe55; }
.sel-mode { border-color: #c389ff55; }
.sel-res:focus, .sel-fps:focus, .sel-dur:focus, .sel-mode:focus { outline: none; border-color: var(--accent); }
.sel-model {
  background: transparent; border: 1px dashed var(--border); color: var(--text);
  padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; opacity: 0.8;
}
.gen-btn {
  background: var(--accent); color: #0b1220; border: none; font-weight: 700;
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.gen-btn:hover { filter: brightness(1.08); }
.vid-done { margin-left: 4px; color: var(--ok); font-size: 12px; }

/* Scenes */
.scene-panel { margin-top: 28px; }
.scene-panel-head { display: flex; align-items: center; justify-content: space-between; }
.scene-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.scene-list { display: flex; flex-direction: column; margin-top: 8px; }
.scene-row { padding: 18px 4px; border-bottom: 1px solid var(--border); }
.scene-row:last-child { border-bottom: none; }
.sr-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.sr-icon { font-size: 15px; }
.sr-title { font-weight: 700; font-size: 16px; }
.scene-row.spicy .sr-title { color: var(--accent-2); }
.scene-row.both  .sr-title { color: #c389ff; }
.sr-para { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.sr-quotes { margin: 0 0 8px 20px; }
.sr-quotes .q { font-size: 13.5px; color: var(--muted); line-height: 1.75; }
.sr-quotes .q.strong { color: var(--text); font-weight: 600; }
.sr-summary { font-size: 14px; color: var(--text); margin: 0 0 12px 0; }
.sr-prompt {
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid #c389ff;
  border-radius: 8px; padding: 10px 12px; margin-left: 20px;
}
.sr-prompt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sr-prompt-label { font-size: 12px; font-weight: 700; color: #c389ff; letter-spacing: .3px; }
.sr-prompt-text, .sr-img-prompt-text { font-size: 12.5px; color: #cfd6e2; line-height: 1.65; white-space: pre-wrap; }
.sr-prompt-text[contenteditable="true"], .sr-img-prompt-text[contenteditable="true"] { cursor: text; outline: none; border-radius: 5px; transition: box-shadow .12s, background .12s; }
.sr-prompt-text[contenteditable="true"]:hover, .sr-img-prompt-text[contenteditable="true"]:hover { background: rgba(195,137,255,.06); }
.sr-prompt-text[contenteditable="true"]:focus, .sr-img-prompt-text[contenteditable="true"]:focus { background: var(--panel-2); box-shadow: inset 0 0 0 1px #c389ff; padding: 6px 8px; margin: -6px -8px; }
.sr-prompt-btns { display: flex; align-items: center; gap: 6px; }
.save-btn, .img-save-btn, .bg-save-btn {
  background: var(--ok); color: #07210f; border: none; font-weight: 700;
  font-size: 11px; padding: 3px 12px; border-radius: 6px; cursor: pointer;
}
.save-btn:hover, .img-save-btn:hover, .bg-save-btn:hover { filter: brightness(1.08); }
.save-btn:disabled, .img-save-btn:disabled, .bg-save-btn:disabled { opacity: .55; cursor: default; }

/* 배경 포함/제거 토글 + 배경 프롬프트 블록 */
.bg-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; margin-left: auto; }
.bg-opt { background: transparent; border: none; color: var(--muted); font-size: 11.5px; padding: 3px 11px; cursor: pointer; }
.bg-opt.active { background: var(--accent); color: #0b0e14; font-weight: 700; }
.bg-opt:not(.active):hover { background: #1b2333; color: var(--text); }
.sr-bg-block { margin-top: 10px; }
.sr-bg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sr-bg-label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.sr-bg-text { font-size: 12.5px; color: #cfd6e2; line-height: 1.6; white-space: pre-wrap; cursor: text; outline: none; border-radius: 5px; }
.sr-bg-text:hover { background: rgba(110,168,254,.06); }
.sr-bg-text:focus { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--accent); padding: 6px 8px; margin: -6px -8px; }
.sr-bg-removed { font-size: 12px; color: var(--accent); background: #141a26; border: 1px dashed #2a3a55; border-radius: 6px; padding: 6px 9px; }
.copy-btn, .img-copy-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  font-size: 11px; padding: 3px 10px; border-radius: 6px; cursor: pointer;
}
.copy-btn:hover, .img-copy-btn:hover { border-color: #c389ff; color: #c389ff; }

button.ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
button.ghost:hover { border-color: var(--accent); }
button.ghost.danger:hover { border-color: var(--err); color: var(--err); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 12px 18px; border-radius: 8px; font-size: 14px; z-index: 200;
}
/* 화면 하단 '최근 영상' 바(z-95, ~48px)가 떠 있을 땐 토스트를 그 위로 올려
   메시지가 바에 가려지지 않게 한다. */
body.has-recent-bar .toast { bottom: 80px; }
.toast.err { border-color: var(--err); }
.toast.ok { border-color: var(--ok); }

/* 전체 컷 생성 버튼 (헤더) */
.gen-all-btn { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.gen-all-btn:hover { background: #1b2333; }
.gen-all-btn:disabled { opacity: .45; cursor: not-allowed; }
.gen-all-btn.vid { border-color: var(--accent-2); color: var(--accent-2); }
.gen-all-btn.vid:hover:not(:disabled) { background: #2a1a22; }
.gen-all-btn.sb { border-color: #e8c468; color: #e8c468; }
.gen-all-btn.sb:hover:not(:disabled) { background: rgba(232,196,104,.08); }
.gen-all-btn.vp { border-color: #7aa8ff; color: #7aa8ff; }
.gen-all-btn.vp:hover:not(:disabled) { background: rgba(122,168,255,.08); }

/* 애니 관리 모드 상단 전체생성 버튼: '영상 프롬프트 전체 생성' 만 노출.
   스토리보드·전체 영상·전체 컷 이미지 전체생성은 애니 페이지에서 제거(숨김).
   (전체 영상·전체 컷 이미지 버튼은 영상 관리 페이지에서는 그대로 노출.) */
#genAllStoryboardBtn, #genAllVpBtn { display: none; }
body.kind-anime #genAllVpBtn { display: inline-flex; }
body.kind-anime #genAllStoryboardBtn,
body.kind-anime #genAllVidBtn,
body.kind-anime #genAllBtn { display: none !important; }

/* 공통 선택 모달 */
.modal-overlay {
  position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.hidden { display: none; }
/* 확인 모달은 다른 모달 위에 떠야 함 — modifyRegen/partialRegen/scene-refimg 등이 modal-overlay
   를 공유하므로 같은 z-index 면 DOM 순서상 뒤에 놓인 큰 모달에 가려 클릭이 안 먹는 것처럼 보임. */
#confirmModal { z-index: 9600; }
.modal-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 22px; min-width: 360px; max-width: 90vw;
}
.modal-card h3 { margin: 0 0 8px; font-size: 16px; }
.modal-card p { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.modal-card .batch-note { font-size: 12px; margin: 0 0 16px; }
.batch-engine, .batch-lang-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.batch-engine label, .batch-lang-row label { font-size: 13px; color: var(--text); }
.batch-engine select, .batch-lang-row select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 5px 10px; border-radius: 6px; font-size: 13px;
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal-actions .primary {
  background: var(--accent); border: none; color: #0b0e14; font-weight: 700;
  padding: 7px 14px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.modal-actions .primary:hover { filter: brightness(1.08); }
.modal-actions .danger-btn {
  background: var(--err); border: none; color: #fff; font-weight: 700;
  padding: 7px 14px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.modal-actions .danger-btn:hover { filter: brightness(1.08); }

/* 생성 이미지 확대 모달 */
.img-modal {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 24px;
}
.img-modal.hidden { display: none; }
.img-modal img {
  max-width: 94vw; max-height: 94vh; object-fit: contain; border-radius: 8px;
  box-shadow: 0 10px 50px rgba(0,0,0,.6); cursor: zoom-out;
}
/* 결과 이미지(생성된 컷)는 클릭하면 확대됨 — 커서로 안내 */
.res-image .res-media { cursor: zoom-in; }

.spinner {
  display: inline-block; width: 12px; height: 12px; border: 2px solid var(--warn);
  border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite;
  vertical-align: middle; margin-right: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 캐릭터 시트 패널 (회차 상단) ===== */
.roster-panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 18px;
}
.roster-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.roster-head h3 { margin: 0; font-size: 15px; }
.roster-sub { font-size: 12px; color: var(--muted); flex: 1; min-width: 0; }
.roster-regen {
  font-size: 12px; padding: 5px 12px; border-radius: 6px;
  background: var(--panel); border: 1px solid #6cb6ff55; color: #6cb6ff; cursor: pointer;
  flex: none; margin-left: auto;
}
.roster-regen:hover { border-color: #6cb6ff; background: rgba(108,182,255,.08); }
.roster-regen:disabled { opacity: .55; cursor: default; }
.char-voice {
  margin: 6px 0; padding: 6px 10px;
  background: rgba(195,137,255,.06); border-left: 2px solid #c389ff55; border-radius: 0 6px 6px 0;
}
/* 음성 ref 슬롯 — work 단위. char-head 와 bio 사이. 항상 1줄 chip 형태. */
.char-voice-ref {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 0; padding: 5px 9px;
  border: 1px dashed var(--border); border-radius: 6px;
  cursor: pointer; font-size: 11.5px;
  transition: border-color .15s, background .15s;
}
.char-voice-ref.empty { color: var(--muted); }
.char-voice-ref.empty:hover {
  border-color: #6cb6ff; background: rgba(108,182,255,.06); color: #cfe2ff;
}
.char-voice-ref.registered {
  border-style: solid; border-color: rgba(108,255,168,.45);
  background: rgba(108,255,168,.06); color: #6cffa8;
}
.char-voice-ref.registered:hover { background: rgba(108,255,168,.1); }
.char-voice-ref.dragover {
  border-color: #6cb6ff; background: rgba(108,182,255,.12); color: #cfe2ff;
}
.char-voice-ref.uploading { opacity: .55; pointer-events: none; }
.char-voice-ref .cvr-icon { flex: none; font-size: 13px; }
.char-voice-ref .cvr-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-voice-ref .cvr-play,
.char-voice-ref .cvr-del {
  flex: none; padding: 2px 6px; border-radius: 3px;
  background: rgba(108,255,168,.18); color: #6cffa8;
  border: 1px solid rgba(108,255,168,.45);
  font-size: 10px; cursor: pointer;
}
.char-voice-ref .cvr-del { background: rgba(255,108,108,.18); color: #ff8a8a; border-color: rgba(255,108,108,.45); }
.char-voice-ref .cvr-play:hover { background: rgba(108,255,168,.3); }
.char-voice-ref .cvr-del:hover { background: rgba(255,108,108,.3); }

/* voice ref picker modal */
.voice-ref-picker-modal { position: fixed; inset: 0; z-index: 9000; }
.voice-ref-picker-modal .modal-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
}
.voice-ref-picker-modal .voice-ref-picker-box {
  position: relative; margin: 7vh auto; max-width: 520px; max-height: 86vh;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
}
.voice-ref-picker-modal .modal-head {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.voice-ref-picker-modal .modal-title { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.voice-ref-picker-modal .modal-close {
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); width: 28px; height: 28px; cursor: pointer; font-size: 16px;
}
.voice-ref-picker-modal .modal-close:hover { color: var(--text); border-color: var(--accent); }
.voice-ref-picker-modal .modal-body { padding: 18px; overflow-y: auto; }
.voice-ref-picker-box { max-width: 520px; }
.voice-ref-picker-box .vrp-upload {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 14px; margin-bottom: 14px;
  background: var(--panel-2); border: 1px dashed var(--border); border-radius: 8px;
  color: var(--text); font-size: 13px; cursor: pointer;
}
.voice-ref-picker-box .vrp-upload:hover { border-color: #6cb6ff; background: rgba(108,182,255,.06); }
.voice-ref-picker-box .vrp-upload.dragover {
  border-color: #6cb6ff; background: rgba(108,182,255,.16);
  border-style: solid;
}
.voice-ref-picker-box .vrp-upload * { pointer-events: none; }
.voice-ref-picker-box .vrp-divider {
  color: var(--muted); font-size: 11.5px; margin: 0 0 8px 4px;
}
.voice-ref-picker-box .vrp-list {
  display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto;
}
.voice-ref-picker-box .vrp-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
}
.voice-ref-picker-box .vrp-item.is-current {
  border-color: rgba(108,255,168,.45);
  background: rgba(108,255,168,.04);
}
.voice-ref-picker-box .vrp-meta { flex: 1; min-width: 0; }
.voice-ref-picker-box .vrp-label {
  font-size: 12.5px; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.voice-ref-picker-box .vrp-cur {
  display: inline-block; margin-left: 6px;
  background: rgba(108,255,168,.18); color: #6cffa8;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
}
.voice-ref-picker-box .vrp-sub { font-size: 10.5px; color: var(--muted); font-family: ui-monospace, monospace; margin-top: 1px; }
.voice-ref-picker-box .vrp-play-btn,
.voice-ref-picker-box .vrp-use,
.voice-ref-picker-box .vrp-trash {
  flex: none; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 11px;
}
.voice-ref-picker-box .vrp-play-btn {
  background: rgba(108,182,255,.18); color: #6cb6ff;
  border: 1px solid rgba(108,182,255,.45);
}
.voice-ref-picker-box .vrp-use {
  background: rgba(108,255,168,.18); color: #6cffa8;
  border: 1px solid rgba(108,255,168,.45);
}
.voice-ref-picker-box .vrp-use:disabled { opacity: .4; cursor: default; }
.voice-ref-picker-box .vrp-trash {
  background: rgba(255,108,108,.12); color: #ff8a8a;
  border: 1px solid rgba(255,108,108,.35);
}
.voice-ref-picker-box .vrp-dl {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 8px; border-radius: 4px; cursor: pointer;
  background: rgba(108,182,255,.12); color: #6cb6ff;
  border: 1px solid rgba(108,182,255,.35);
  text-decoration: none;
}
.voice-ref-picker-box .vrp-dl:hover { background: rgba(108,182,255,.22); }
.voice-ref-picker-box .vrp-empty {
  padding: 16px; text-align: center; font-size: 12px;
}

/* 씬별 참고 이미지 — 4슬롯 1:1 가로 행 (우측 패널 하단). 모달 안의 .pr-refimg-row 는 별도 2×2. */
.sr-vp-refimg-row {
  grid-column: 1 / -1;
  margin-top: 10px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
}
.sr-vp-refimg-head { font-size: 12px; color: var(--text); margin-bottom: 8px; }
.sr-vp-refimg-head .muted { font-weight: 400; margin-left: 4px; font-size: 11px; }
.sr-vp-refimg-slots {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
.sr-vp-refimg-slot {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--panel-2); border: 1px dashed var(--border); border-radius: 8px;
  cursor: pointer; overflow: hidden; transition: border-color .12s, background .12s;
  display: flex; align-items: center; justify-content: center;
}
.sr-vp-refimg-slot:hover { border-color: #6cb6ff; background: rgba(108,182,255,.06); }
.sr-vp-refimg-slot.dragover {
  border-color: #6cb6ff; background: rgba(108,182,255,.18);
  box-shadow: 0 0 0 2px rgba(108,182,255,.4) inset;
}
.sr-vp-refimg-slot.filled { border-style: solid; border-color: rgba(108,255,168,.45); }
.sr-vp-refimg-placeholder {
  color: var(--muted); font-size: 22px; text-align: center; line-height: 1.3;
}
.sr-vp-refimg-placeholder .muted { font-size: 10px; display: block; margin-top: 4px; }
.sr-vp-refimg-preview {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.sr-vp-refimg-desc {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 6px; background: rgba(0,0,0,.65); color: #fff;
  font-size: 10.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.sr-vp-refimg-del {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.7); color: #fff; border: 1px solid #fff;
  font-size: 11px; line-height: 1; cursor: pointer;
}
.sr-vp-refimg-del:hover { background: rgba(255,108,108,.85); }

/* 씬 참고 이미지 업로드 모달 */
.scene-refimg-modal { position: fixed; inset: 0; z-index: 9000; }
.scene-refimg-modal .modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.scene-refimg-modal .scene-refimg-box {
  position: relative; margin: 7vh auto; max-width: 520px; max-height: 86vh;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
}
.scene-refimg-modal .modal-head {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.scene-refimg-modal .modal-title { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.scene-refimg-modal .modal-close {
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); width: 28px; height: 28px; cursor: pointer; font-size: 16px;
}
.scene-refimg-modal .modal-body { padding: 18px; overflow-y: auto; }
.scene-refimg-modal .srimg-fileline {
  display: flex; gap: 10px; align-items: center; margin-bottom: 10px;
}
.scene-refimg-modal .srimg-file-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 6px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 13px;
}
.scene-refimg-modal .srimg-file-btn:hover { border-color: #6cb6ff; background: rgba(108,182,255,.08); }
.scene-refimg-modal .srimg-file-name { font-size: 11.5px; }
.scene-refimg-modal .srimg-current-preview {
  display: block; max-width: 100%; max-height: 240px;
  margin: 0 auto 10px; border-radius: 6px;
}
.scene-refimg-modal .srimg-desc-label {
  display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px;
}
.scene-refimg-modal .srimg-desc-input {
  width: 100%; padding: 8px 10px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: inherit; resize: vertical; min-height: 70px;
}
.scene-refimg-modal .srimg-btn-row {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px;
}
.scene-refimg-modal .srimg-save-btn {
  padding: 8px 18px; border-radius: 6px; background: var(--accent); color: #fff;
  border: 1px solid var(--accent); font-size: 13px; cursor: pointer; font-weight: 600;
}
.scene-refimg-modal .srimg-save-btn:disabled { opacity: .55; cursor: default; }
.scene-refimg-modal .srimg-cancel-btn {
  padding: 8px 14px; border-radius: 6px; background: transparent;
  border: 1px solid var(--border); color: var(--text); font-size: 13px; cursor: pointer;
}
/* Phase 1 — 통합 (드롭존 + 공용 이미지 그리드 즉시 표시) */
.scene-refimg-modal .scene-refimg-box { max-width: 1080px; width: 92vw; }
.scene-refimg-modal .srimg-phase.hidden { display: none; }
.scene-refimg-modal .srimg-dropzone { margin: 0 0 14px; }
.scene-refimg-modal .srimg-common-grid {
  column-width: 200px; column-gap: 12px;
}
.scene-refimg-modal .srimg-empty { padding: 24px; text-align: center; font-size: 12.5px; }
/* Phase 2 — 미리보기 + 설명 입력 */
.scene-refimg-modal .srimg-back-btn {
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--muted); font-size: 11.5px;
  margin-bottom: 10px;
}
.scene-refimg-modal .srimg-back-btn:hover { color: var(--text); border-color: var(--accent); }
.scene-refimg-modal .srimg-preview-img {
  display: block; max-width: 100%; max-height: 64vh; width: auto; height: auto;
  margin: 0 auto 12px; border-radius: 6px;
}

/* 공용 이미지 직접 업로드 — 상단 섹션 + 모달 공통 */
.common-assets-upload-btn {
  padding: 4px 12px; border-radius: 6px;
  background: rgba(195,137,255,.14); color: #c389ff;
  border: 1px solid rgba(195,137,255,.45);
  font-size: 11.5px; font-weight: 600; cursor: pointer; margin-left: 10px;
}
.common-assets-upload-btn:hover { background: rgba(195,137,255,.26); }
/* 이전 씬 참고 버튼 — 업로드(보라)와 구분되는 청록 톤 */
.srimg-prev-btn {
  background: rgba(87,211,140,.14); color: #6fe0a6;
  border-color: rgba(87,211,140,.45);
  display: inline-flex; align-items: center; gap: 6px;
}
.srimg-prev-btn:hover { background: rgba(87,211,140,.26); }
.srimg-prev-btn:disabled { cursor: progress; opacity: .8; }
.srimg-prev-btn .spinner { border-color: #6fe0a6; border-top-color: transparent; }
.agent-assets-dropzone {
  margin: 10px 0; padding: 14px; text-align: center; font-size: 12px;
  color: var(--muted); background: rgba(108,182,255,.04);
  border: 1px dashed var(--border); border-radius: 8px;
  transition: border-color .12s, background .12s;
}
.agent-assets-dropzone.dragover {
  border-color: #6cb6ff; background: rgba(108,182,255,.12); color: #cfe2ff;
}
/* 섹션 전체에 파일 드래그 중 — 영역 어디에 떨궈도 등록됨을 강조 */
.agent-assets { transition: border-color .12s, background .12s, box-shadow .12s; }
.agent-assets.drag-active {
  border-color: #6cb6ff; background: rgba(108,182,255,.06);
  box-shadow: inset 0 0 0 2px rgba(108,182,255,.35);
}
/* 드래그 중에만 뜨는 드롭 플레이스홀더 오버레이 (섹션 전체) */
.agent-assets-drop-overlay {
  position: absolute; inset: 0; z-index: 5; display: none;
  align-items: center; justify-content: center;
  background: rgba(16,28,48,.78); backdrop-filter: blur(1px);
  border-radius: 12px;
  pointer-events: none;  /* 드래그 hit-test 통과 → drop 은 섹션이 받음, 깜빡임 방지 */
}
.agent-assets.drag-active .agent-assets-drop-overlay { display: flex; }
.agent-assets-drop-overlay .aado-inner {
  text-align: center; padding: 22px 34px; border-radius: 12px;
  border: 2px dashed #6cb6ff; background: rgba(108,182,255,.10);
  color: #dfecff; pointer-events: none;
}
.agent-assets-drop-overlay .aado-icon { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.agent-assets-drop-overlay .aado-title { font-size: 15px; font-weight: 700; color: #eaf2ff; }
.agent-assets-drop-overlay .aado-sub { font-size: 12px; color: #a9c4ec; margin-top: 4px; }
.agent-asset-desc {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 공용 이미지 등록(직접 업로드) 모달 */
.common-asset-upload-modal { position: fixed; inset: 0; z-index: 9100; }
.common-asset-upload-modal .modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.common-asset-upload-modal .common-asset-upload-box {
  position: relative; margin: 7vh auto; max-width: 520px; max-height: 86vh;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
}
.common-asset-upload-modal .modal-head {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.common-asset-upload-modal .modal-title { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.common-asset-upload-modal .modal-close {
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); width: 28px; height: 28px; cursor: pointer; font-size: 16px;
}
.common-asset-upload-modal .modal-body { padding: 18px; overflow-y: auto; }
.common-asset-upload-modal .cau-fileline { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.common-asset-upload-modal .cau-file-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 6px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 13px;
}
.common-asset-upload-modal .cau-file-btn:hover { border-color: #6cb6ff; background: rgba(108,182,255,.08); }
.common-asset-upload-modal .cau-file-name { font-size: 11.5px; }
.common-asset-upload-modal .cau-preview-wrap {
  display: flex; justify-content: center; margin-bottom: 12px;
}
.common-asset-upload-modal .cau-preview {
  max-width: 100%; max-height: 240px; border-radius: 6px;
}
.common-asset-upload-modal .cau-desc-label {
  display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px;
}
.common-asset-upload-modal .cau-desc-input {
  width: 100%; padding: 9px 11px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-family: inherit;
  /* 단일 라인 — 한 줄로 길게 입력, 길어지면 가로 스크롤. Enter 는 줄바꿈 대신 등록. */
}
.common-asset-upload-modal .cau-btn-row {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px;
}
.common-asset-upload-modal .cau-save-btn {
  padding: 8px 18px; border-radius: 6px; background: var(--accent); color: #fff;
  border: 1px solid var(--accent); font-size: 13px; cursor: pointer; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.common-asset-upload-modal .cau-save-btn.busy { cursor: progress; opacity: .85; }
.common-asset-upload-modal .cau-save-btn .spinner { border-color: #fff; border-top-color: transparent; }
.common-asset-upload-modal .cau-save-btn:disabled,
.common-asset-upload-modal .cau-cancel-btn:disabled { cursor: default; opacity: .7; }
.common-asset-upload-modal .cau-cancel-btn {
  padding: 8px 14px; border-radius: 6px; background: transparent;
  border: 1px solid var(--border); color: var(--text); font-size: 13px; cursor: pointer;
}

/* 공용 이미지 모달 */
.common-assets-modal { position: fixed; inset: 0; z-index: 9000; }
.common-assets-modal.hidden { display: none; }
.common-assets-modal .modal-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
}
.common-assets-modal .common-assets-box {
  position: relative; margin: 6vh auto; max-width: 1080px; max-height: 88vh; width: 92vw;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
}
.common-assets-modal .modal-head {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.common-assets-modal .modal-title { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.common-assets-modal .modal-close {
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); width: 28px; height: 28px; cursor: pointer; font-size: 16px;
}
.common-assets-modal .modal-body { padding: 18px; overflow-y: auto; }
.common-assets-modal-grid {
  column-width: 220px; column-gap: 12px;
}
.char-voice-label {
  color: #c389ff; font-weight: 600; font-size: 11.5px; margin-bottom: 4px;
}
.char-voice-line {
  color: var(--text); font-size: 11.5px; line-height: 1.5;
  word-break: break-word; white-space: normal;
}
/* 한 행에 캐릭터 3명 고정 — 가로 공간을 가급적 다 사용해 outfit-meta 텍스트 영역 확보 */
.roster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.char-group {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; min-width: 0;
}
@media (max-width: 1100px) {
  .roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .roster-grid { grid-template-columns: 1fr; }
}
/* 인물명 + 외모 한 줄은 최대 2줄까지만 표시, 넘치면 말줄임 */
.char-head {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 10px; line-height: 1.5;
}
.char-name { font-weight: 700; font-size: 14px; margin-right: 6px; }
.char-gender {
  font-size: 11.5px; font-weight: 700; letter-spacing: -.3px;
  padding: 1px 7px; border-radius: 999px; margin-right: 8px;
  border: 1px solid;
}
.char-gender.male {
  color: #7aa2ff; background: rgba(122,162,255,.12); border-color: rgba(122,162,255,.45);
}
.char-gender.female {
  color: #ff8eb3; background: rgba(255,142,179,.12); border-color: rgba(255,142,179,.45);
}
.char-appearance { font-size: 11.5px; color: var(--muted); }
.char-id-badge {
  font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-left: 6px;
  background: rgba(108,182,255,.10); color: #6cb6ff; border: 1px solid rgba(108,182,255,.30);
  font-family: monospace; letter-spacing: 0.2px;
}
.char-bio {
  font-size: 12px; color: var(--text); line-height: 1.5;
  padding: 6px 9px; margin-top: 6px; margin-bottom: 6px;
  background: rgba(255,255,255,.025); border-left: 2px solid #6cb6ff55; border-radius: 0 6px 6px 0;
  white-space: pre-wrap; word-break: keep-all;
}
.outfit-cards { display: flex; flex-direction: column; gap: 12px; }
.outfit-card { display: flex; flex-direction: row; gap: 12px; width: 100%; align-items: flex-start; }
.sheet-slot {
  /* 16:9 비율 고정. 시트는 보통 가로형 멀티앵글이라 16:9가 잘 맞음.
     세로는 1:1(170px)보다 줄여 카드 높이를 컴팩트하게. */
  width: 240px; height: 135px; flex: none; border-radius: 8px; border: 1px dashed var(--border);
  background: var(--bg); position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: pointer; overflow: hidden;
}
.sheet-slot.empty:hover, .sheet-slot.drag { border-color: var(--accent); background: #1b2333; }
.sheet-slot.filled { border-style: solid; cursor: default; }
/* contain: 비율 안 맞으면 좌우(또는 위아래)에 슬롯 배경이 letterbox로 보이고 인물 전체가 잘리지 않음 */
.sheet-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.sheet-plus { font-size: 22px; color: var(--muted); }
.sheet-hint { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sheet-del {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity .12s;
}
/* 시트 이미지 영역에 마우스 오버 했을 때만 이미지 삭제 X 노출 */
.sheet-slot:hover .sheet-del,
.sheet-del:hover { opacity: 1; }
.sheet-del:hover { background: var(--err); }
.outfit-meta { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.outfit-key { font-size: 11px; color: var(--accent); font-family: ui-monospace, monospace; }
.outfit-label { font-size: 13.5px; font-weight: 600; }
.outfit-desc { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* 애니 모드 — 카드 우상단 X 삭제(아웃핏 전체 삭제) */
.outfit-card { position: relative; }
.outfit-del {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
  cursor: pointer; font-size: 14px; line-height: 1; z-index: 2; opacity: 0; transition: opacity .12s;
}
/* 우측 텍스트(meta) 영역에 마우스 오버 했을 때만 X 노출 — 좌측 이미지 hover 와 분리.
   (좌측에 묶여 있으면 X 로 마우스 이동 중 hover 가 풀려 클릭 불가했음) */
.outfit-card:has(.outfit-meta:hover) .outfit-del,
.outfit-del:hover { opacity: 1; }
.outfit-del:hover { background: var(--err); color: #fff; border-color: var(--err); }

/* 신규 캐릭터 시트 추가 그룹(점선 강조) */
.new-outfit-group .sheet-slot.empty { border-style: dashed; border-color: var(--accent); }
.new-outfit-group .char-name { color: var(--accent); }
.outfit-card.add .outfit-meta .outfit-label { color: var(--muted); font-weight: 500; font-size: 12px; }

/* 새 캐릭터 시트 등록 모달 */
.modal-card.new-outfit-card { max-width: 620px; width: 92vw; }
.new-outfit-body { display: flex; gap: 18px; margin: 6px 0 18px; }
.new-outfit-preview {
  flex: 0 0 180px; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
}
.new-outfit-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.new-outfit-fields { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.new-outfit-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.new-outfit-fields label span em { font-style: normal; opacity: .7; font-size: 11px; margin-left: 4px; }
.new-outfit-fields label span em.req { color: var(--err); opacity: 1; font-weight: 700; }
.newof-hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.newof-hint code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 10.5px; }

/* 새 캐릭터 시트 모달 — 성별 라디오 (남/여) */
.newof-gender { display: flex; gap: 12px; margin-top: 4px; }
.newof-gender-opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; cursor: pointer; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel);
  transition: border-color .12s, background .12s;
}
.newof-gender-opt:hover { border-color: var(--accent); }
.newof-gender-opt input[type="radio"] { margin: 0; cursor: pointer; }
.newof-gender-opt input[type="radio"]:checked + span { font-weight: 700; }
.newof-gender-opt:has(input[type="radio"]:checked) {
  border-color: var(--accent); background: rgba(110,168,254,.08);
}

/* 삭제 로그 화면 */
.trash-section { margin: 18px 0 8px; }
.trash-section-title { font-size: 15px; color: var(--text); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.trash-list { display: flex; flex-direction: column; gap: 8px; }
.trash-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.trash-meta { min-width: 0; flex: 1 1 auto; }
.trash-title { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-ep { font-size: 11px; color: var(--accent); margin-left: 4px; }
.trash-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.trash-warn { color: var(--err); font-weight: 600; }
.trash-actions { display: flex; gap: 6px; flex: none; }
.trash-actions button { padding: 6px 12px; font-size: 12px; border-radius: 6px; }
.trash-actions button[disabled] { opacity: .4; cursor: not-allowed; }

/* 영상 생성 로그 화면 */
.vlog-refresh {
  flex: none; padding: 6px 14px; font-size: 12.5px; border-radius: 6px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border); cursor: pointer;
}
.vlog-refresh:hover { border-color: var(--accent); }
.video-log-wrap { overflow-x: auto; }
.video-log-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.video-log-table thead th {
  text-align: left; padding: 8px 10px; color: var(--muted); font-weight: 600;
  border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0;
  background: var(--bg);
}
.video-log-table tbody td {
  padding: 9px 10px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top;
}
.video-log-table tbody tr:hover { background: var(--panel-2); }
.vlog-ts { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.vlog-user { word-break: break-all; max-width: 180px; }
.vlog-target { min-width: 180px; line-height: 1.45; }
.vlog-scene { color: var(--muted); font-size: 11.5px; }
.vlog-model { font-family: var(--mono, monospace); font-size: 11.5px; color: var(--accent); white-space: nowrap; }
.vlog-meta { color: var(--muted); white-space: nowrap; }
.vlog-mode {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600;
  background: rgba(120,160,255,.14); color: #8fb0ff; border: 1px solid rgba(120,160,255,.35);
  white-space: nowrap;
}
.vlog-pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.vlog-pill-anime { background: rgba(195,137,255,.14); color: #c389ff; border: 1px solid rgba(195,137,255,.4); }
.vlog-pill-video { background: rgba(95,209,162,.14); color: #5fd1a2; border: 1px solid rgba(95,209,162,.4); }

/* 작품 수정 모달 */
.work-edit-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
.work-edit-field input {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 9px 11px; color: var(--text); font-size: 14px; font-family: inherit;
}
.work-edit-field input:focus { outline: none; border-color: var(--accent); }
.work-edit-field textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 9px 11px; color: var(--text); font-size: 13px; font-family: inherit;
  resize: vertical; min-height: 84px; line-height: 1.5;
}
.work-edit-field textarea:focus { outline: none; border-color: var(--accent); }
.work-edit-hint { font-size: 11.5px; color: var(--muted); margin: 6px 0 14px; }

/* 최근 영상 생성 상태 바 — 화면 하단 고정. 회차 상세 화면에서만 노출. */
.recent-videos-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(15, 15, 22, .94);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(6px);
  font-size: 12.5px;
}
/* 에이전트 채팅 패널(우측 440px)이 떠 있을 땐 바를 그 왼편까지만. */
body.agent-active .recent-videos-bar { right: 440px; }
.recent-videos-bar.hidden { display: none; }
.recent-videos-bar-label {
  flex-shrink: 0; font-weight: 600; color: var(--muted);
  padding-right: 6px; border-right: 1px solid var(--border);
}
.recent-videos-bar-common-btn {
  flex-shrink: 0; padding: 4px 10px; border-radius: 6px;
  background: rgba(195,137,255,.14); color: #c389ff;
  border: 1px solid rgba(195,137,255,.45);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  margin-left: 8px; padding-left: 10px; border-left-width: 1px;
}
.recent-videos-bar-common-btn:hover { background: rgba(195,137,255,.26); }
/* 씬 번호 이동 — 입력 + 버튼 */
.recent-videos-bar-scene-nav {
  flex-shrink: 0; display: flex; align-items: center; gap: 4px;
  margin-left: 8px;
}
.recent-videos-bar-scene-input {
  width: 64px; padding: 4px 6px; border-radius: 6px;
  background: rgba(255,255,255,.04); color: var(--fg);
  border: 1px solid var(--border);
  font-size: 11.5px; text-align: center;
  -moz-appearance: textfield;
}
.recent-videos-bar-scene-input::-webkit-outer-spin-button,
.recent-videos-bar-scene-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.recent-videos-bar-scene-input::placeholder { color: var(--muted); opacity: .8; }
.recent-videos-bar-scene-input:focus {
  outline: none; border-color: #c389ff; background: rgba(195,137,255,.08);
}
.recent-videos-bar-scene-go {
  padding: 4px 10px; border-radius: 6px;
  background: rgba(195,137,255,.5); color: #fff;
  border: 1px solid rgba(195,137,255,.7);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.recent-videos-bar-scene-go:hover { background: rgba(195,137,255,.7); }
/* 파트 이동 버튼(P1·P2…) — 씬 번호 이동 입력 왼쪽 */
.recent-videos-bar-part-nav {
  flex-shrink: 0; display: flex; align-items: center; gap: 4px; margin-left: 8px;
}
.recent-videos-bar-part-btn {
  flex-shrink: 0; padding: 4px 9px; border-radius: 6px;
  background: rgba(104,196,159,.16); color: #6fd0a8;
  border: 1px solid rgba(104,196,159,.45);
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  font-family: ui-monospace, monospace; letter-spacing: .3px;
}
.recent-videos-bar-part-btn:hover { background: rgba(104,196,159,.30); color: #9fe6c6; }
.recent-videos-bar-part-btn:active { transform: scale(.95); }
.recent-videos-bar-scroll {
  flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center;
  overflow: hidden; white-space: nowrap;
}
.recent-videos-bar-empty {
  color: var(--muted); font-size: 12px; font-style: italic; opacity: .8;
}
.recent-video-chip {
  flex-shrink: 0;
  padding: 4px 10px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.04); color: var(--text);
  border: 1px solid var(--border); font-size: 12px;
  font-family: inherit; transition: background .12s, transform .08s;
}
.recent-video-chip:hover { background: rgba(255,255,255,.10); }
.recent-video-chip:active { transform: scale(.97); }
.recent-video-chip.processing {
  border-color: #4aa3f5; color: #7cc1ff;
  background: rgba(74,163,245,.10);
}
.recent-video-chip.processing::before {
  content: "● "; color: #4aa3f5;
  animation: recent-pulse 1.2s ease-in-out infinite;
}
/* 완료 후 사용자가 아직 확인 안 한 영상 — 초록 점 깜빡임. 칩 클릭 시 클래스 제거됨. */
.recent-video-chip.done.is-fresh::before {
  content: "● "; color: #6cffa8;
  animation: recent-pulse 1.2s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(108,255,168,.7);
}
.recent-video-chip.done {
  border-color: #5aa66e; color: #88c79b;
}
.recent-video-chip.error {
  border-color: #c4564f; color: #de8983;
}
/* 확정된 씬 — sr-confirm-btn.on 과 동일한 노란색 톤 */
.recent-video-chip.is-confirmed {
  border-color: #f5c84a; color: #f5c84a;
  background: rgba(245,200,74,.10);
}
.recent-video-chip.is-confirmed:hover { background: rgba(245,200,74,.18); }
@keyframes recent-pulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

/* 칩 클릭 후 씬 카드에 잠깐 강조 (짧게 — 즉시 이동 + 위치 확인용 깜빡임만) */
.scene-row.highlight-scene {
  animation: scene-highlight 0.6s ease-out;
}
@keyframes scene-highlight {
  0%   { background-color: rgba(122,168,255,.22); }
  100% { background-color: transparent; }
}

/* 바 노출 시 메인 컨텐츠 하단에 여백 확보 (마지막 씬이 가려지지 않게) */
body.has-recent-bar .main { padding-bottom: 56px; }

/* 회차 카드 추출 진행 시간(매초 갱신) + 추출 중단 버튼 */
.status-elapsed { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); margin-left: 4px; }
.status.pending .status-elapsed, .status.processing .status-elapsed { color: var(--warn); }
.vl-btn.cancel-ext {
  background: rgba(239, 68, 68, .08); border-color: rgba(239, 68, 68, .35); color: var(--err);
}
.vl-btn.cancel-ext:hover:not(:disabled) { background: rgba(239, 68, 68, .15); border-color: var(--err); }

/* 씬 카드 SHOT 분해 영역 (애니 모드) — 라벨 + 추정 초 + 시그니처 표시 */
.scene-shots {
  margin: 10px 0 12px 20px; padding: 10px 14px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.scene-shots:hover { border-color: #c389ff66; }
.scene-shots.editing { cursor: default; border-color: #c389ff; box-shadow: 0 0 0 1px #c389ff33; }
.sr-shots-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 8px; letter-spacing: -.2px;
}
.sr-shots-head-text { flex: 1; min-width: 0; }
.sr-shots-actions { display: flex; gap: 6px; flex-shrink: 0; }
.sr-shots-edit, .sr-shots-cancel, .sr-shots-save, .sr-shots-revert, .sr-shots-regen {
  font-size: 11px; padding: 3px 9px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text); cursor: pointer;
}
.sr-shots-regen { border-color: #6cb6ff55; color: #6cb6ff; }
.sr-shots-regen:hover { border-color: #6cb6ff; background: rgba(108,182,255,.08); }
.sr-shots-regen:disabled { opacity: .55; cursor: default; }
.sr-shots-edit:hover { border-color: #c389ff; background: rgba(195,137,255,.08); }
.sr-shots-cancel:hover { border-color: var(--muted); }
.sr-shots-save { border-color: #57d38c55; color: var(--ok); }
.sr-shots-save:hover { border-color: var(--ok); background: rgba(87,211,140,.08); }
.sr-shots-save:disabled, .sr-shots-cancel:disabled { opacity: .55; cursor: default; }
.sr-shots-revert { border-color: #ffb86c55; color: #ffb86c; }
.sr-shots-revert:hover { border-color: #ffb86c; background: rgba(255,184,108,.08); }
.sr-shots-revert.dimmed, .sr-shots-revert:disabled {
  opacity: .35; cursor: default; color: var(--muted); border-color: var(--border);
}
.sr-shots-revert.dimmed:hover, .sr-shots-revert:disabled:hover { background: var(--panel); }
.sr-shots-edit.hidden, .sr-shots-cancel.hidden, .sr-shots-save.hidden, .sr-shots-revert.hidden { display: none; }
.sr-shots-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  counter-reset: shot;
}
.sr-shot {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 4px 8px; border-radius: 6px;
  font-size: 12.5px; color: var(--text); line-height: 1.55;
  counter-increment: shot;
}
.sr-shot::before {
  content: counter(shot);
  flex: none; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 700;
  color: #cfd6e2; background: rgba(195, 137, 255, 0.16);
  border: 1px solid rgba(195, 137, 255, 0.35); border-radius: 999px;
  margin-top: 1px;
}
.sr-shot-sec {
  flex: none; font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--muted); min-width: 38px; text-align: right; padding-top: 1px;
}
.sr-shot-label { flex: 1; word-break: keep-all; }

/* SHOT 분해 — 편집 모드 */
.sr-shots-list.editing { gap: 8px; }
.sr-shots-list.editing .sr-shot {
  align-items: center; padding: 8px 10px; gap: 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
}

/* 편집 모드에서 좌측 뱃지: 드래그 핸들 */
.sr-shots-list.editing .sr-shot::before { cursor: grab; }
.sr-shots-list.editing .sr-shot::before:active { cursor: grabbing; }
/* 드래그 중인 SHOT — destination 위치에서 본문 그대로 보여(미리보기) +
   보라 보더로 어떤 SHOT 이 옮겨지는지 강조. 브라우저 기본 드래그
   고스트는 JS 에서 투명 픽셀로 숨겨서 한 군데만 보임. */
.sr-shots-list.editing .sr-shot.dragging {
  border: 2px solid #c389ff;
  background: rgba(195,137,255,.10);
  box-shadow: 0 4px 14px rgba(195,137,255,.28);
}

/* sec 입력 + 커스텀 ▲▼ 스테퍼 (네이티브 스피너 숨김) */
.sr-shot-sec-cell {
  flex: none; display: inline-flex; align-items: stretch;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; height: 36px;
}
.sr-shot-sec-cell:focus-within { border-color: #c389ff; }
.sr-shot-sec-input {
  width: 40px; padding: 0 5px; border: none; outline: none; background: transparent;
  color: var(--text); font-family: ui-monospace, monospace; font-size: 13px; text-align: right;
  -moz-appearance: textfield;
}
.sr-shot-sec-input::-webkit-outer-spin-button,
.sr-shot-sec-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.sr-shot-stepper {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
}
.sr-shot-step {
  flex: 1; width: 20px; padding: 0; margin: 0;
  background: var(--panel-2); border: none; border-radius: 0;
  color: var(--muted); cursor: pointer;
  font-size: 8px; line-height: 1; user-select: none;
  display: flex; align-items: center; justify-content: center;
}
.sr-shot-step.up { border-bottom: 1px solid var(--border); }
.sr-shot-step:hover { background: rgba(195,137,255,.18); color: var(--text); }
.sr-shot-step:active { background: rgba(195,137,255,.32); }

/* SHOT 라벨 — 2줄 표시·편집(긴 설명 잘리지 않게 wrap). textarea. */
.sr-shot-label-input {
  flex: 1; min-width: 0; min-height: 50px; padding: 6px 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font-size: 13px; font-family: inherit;
  line-height: 1.5; resize: vertical; display: block;
}
.sr-shot-label-input:focus { outline: none; border-color: #c389ff; }
.sr-shot-del {
  flex: none; width: 28px; height: 28px; padding: 0; line-height: 26px; text-align: center;
  background: transparent; border: 1px solid var(--border); border-radius: 5px;
  color: var(--muted); cursor: pointer; font-size: 16px;
}
.sr-shot-del:hover { color: var(--err); border-color: var(--err); }
.sr-shot-addrow { list-style: none; padding: 4px 0 0 0; }
.sr-shot-add {
  width: 100%; padding: 6px 10px; font-size: 12px;
  background: transparent; border: 1px dashed var(--border); border-radius: 6px;
  color: var(--muted); cursor: pointer;
}
.sr-shot-add:hover { color: var(--accent); border-color: var(--accent); }

/* 씬 카드 원문 영역 (애니 모드) — 접힘 시 3줄+말줄임, 펼침 시 전문 + 아래 닫기 버튼 */
.scene-passage {
  margin: 10px 0 12px 20px; padding: 10px 14px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.sr-passage-head { font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 8px; letter-spacing: -.2px; }
.sr-passage-text { font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: keep-all; }
/* 원문은 항상 펼쳐진 상태 (2026-05-30 접기 토글 제거) */

/* 씬 대사 패널 — SHOT 분해 ↔ 원문 사이에 위치 */
.scene-dialogues {
  margin: 10px 0 12px 20px; padding: 10px 14px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.sr-dlg-head {
  font-size: 11px; color: var(--muted); font-weight: 700; margin-bottom: 8px; letter-spacing: -.2px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.sr-dlg-head-text { flex: 1; min-width: 0; }
.sr-dlg-lang-tabs { display: flex; gap: 4px; flex-shrink: 0; }
.sr-dlg-lang-btn {
  font-size: 10px; padding: 2px 8px; border-radius: 5px;
  background: var(--panel); border: 1px solid var(--border); color: var(--muted); cursor: pointer;
}
.sr-dlg-lang-btn.active { color: var(--text); border-color: #6cb6ff; background: rgba(108,182,255,.10); }
.sr-dlg-lang-btn:hover { border-color: #6cb6ff; }
.sr-dlg-lang-btn:disabled { opacity: .55; cursor: default; }
.sr-dlg-en-save, .sr-dlg-en-cancel {
  font-size: 10px; padding: 2px 9px; border-radius: 5px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text); cursor: pointer;
}
.sr-dlg-en-save { border-color: #57d38c55; color: var(--ok); }
.sr-dlg-en-save:hover { border-color: var(--ok); background: rgba(87,211,140,.08); }
.sr-dlg-en-cancel:hover { border-color: var(--muted); }
.sr-dlg-en-save.hidden, .sr-dlg-en-cancel.hidden { display: none; }
.sr-dlg-en-save:disabled, .sr-dlg-en-cancel:disabled { opacity: .55; cursor: default; }
.sr-dlg-list {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px;
}
.sr-dlg-item {
  display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5;
}
/* 좌측 번호 배지 — 매칭된 SHOT 번호. SHOT 분해 배지와 동일 톤. */
.sr-dlg-num {
  flex: none; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 700;
  color: #cfd6e2; background: rgba(123, 140, 255, 0.18);
  border: 1px solid rgba(123, 140, 255, 0.4); border-radius: 999px;
  margin-top: 2px;
}
/* 속마음 줄은 번호 배지 색을 호박색으로 */
.sr-dlg-item.sr-dlg-kind-thought .sr-dlg-num {
  background: rgba(220, 180, 80, 0.18);
  border-color: rgba(220, 180, 80, 0.45);
  color: #e7d29a;
}
/* SHOT 매칭 실패 음성은 배지를 흐리게 (— 표시) */
.sr-dlg-item[data-shot-num=""] .sr-dlg-num {
  opacity: 0.45;
}
.sr-dlg-texts { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sr-dlg-item.bilingual .sr-dlg-text-ko { opacity: .65; font-size: 12px; }
.sr-dlg-text-en {
  width: 100%; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-size: 13px; padding: 3px 6px; font-family: inherit;
}
.sr-dlg-text-en:focus { outline: none; border-color: #6cb6ff; background: rgba(108,182,255,.05); }
.sr-dlg-kind { flex: none; font-size: 12px; line-height: 1.6; opacity: .8; }
.sr-dlg-speaker {
  flex: none; min-width: 60px; padding: 2px 8px;
  background: rgba(123,140,255,.18); color: var(--accent);
  border-radius: 4px; font-weight: 700; font-size: 11.5px; letter-spacing: -.2px;
  text-align: center;
}
.sr-dlg-text { flex: 1; color: var(--text); word-break: keep-all; white-space: pre-wrap; }
/* 속마음은 톤을 살짝 흐리고 글자 기울임 — 시각적으로 대사와 구분 */
.sr-dlg-item.sr-dlg-kind-thought .sr-dlg-speaker {
  background: rgba(220,180,80,.18); color: #d8b860;
}
.sr-dlg-item.sr-dlg-kind-thought .sr-dlg-text { font-style: italic; opacity: .9; }

/* 애니: 씬 제목 옆 '영상 프롬프트 생성' 버튼 */
.sr-vp-gen-btn {
  margin-left: 10px; font-size: 11.5px; padding: 4px 10px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid #c389ff66; color: var(--text);
  cursor: pointer; white-space: nowrap;
}
.sr-vp-gen-btn:hover { border-color: #c389ff; background: rgba(195,137,255,.12); }
.sr-vp-gen-btn:disabled { opacity: .6; cursor: default; }

/* 애니 — 영상 프롬프트 블록(.scene-passage 와 동일 위치/폭/스타일) */
.sr-vp-prompt-block {
  position: relative;
  margin: 10px 0 0 20px; padding: 10px 14px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.sr-vp-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.sr-vp-label { font-size: 11px; font-weight: 700; color: #c389ff; letter-spacing: .3px; }
/* 글자수는 '영상 프롬프트' 라벨 바로 오른쪽에 붙이고, margin-right:auto 로 이후 버튼들을 우측으로 민다. */
.sr-vp-chars { font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; margin-right: auto; }
.sr-vp-chars.over { color: var(--err); font-weight: 700; }
.sr-vp-lang-select {
  font-size: 11px; height: 24px; padding: 0 4px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
}
.sr-vp-lang-select:hover { border-color: #c389ff; }
.sr-vp-lang-select:disabled { opacity: .55; cursor: progress; }
.sr-vp-save, .sr-vp-copy, .sr-vp-seedance, .sr-vp-edit, .sr-vp-cancel, .sr-vp-revert {
  font-size: 11.5px; padding: 3px 9px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text); cursor: pointer;
}
.sr-vp-edit:hover { border-color: #c389ff; background: rgba(195,137,255,.08); }
.sr-vp-cancel:hover { border-color: var(--muted); }
.sr-vp-save { border-color: #57d38c55; color: var(--ok); }
.sr-vp-save:hover { border-color: var(--ok); background: rgba(87,211,140,.08); }
.sr-vp-save:disabled, .sr-vp-save.dimmed {
  opacity: .35; cursor: default; color: var(--muted); border-color: var(--border); background: var(--panel);
}
.sr-vp-revert { border-color: #ffb86c55; color: #ffb86c; }
.sr-vp-revert:hover { border-color: #ffb86c; background: rgba(255,184,108,.08); }
.sr-vp-revert.dimmed, .sr-vp-revert:disabled {
  opacity: .35; cursor: default; color: var(--muted); border-color: var(--border);
}
.sr-vp-revert.dimmed:hover, .sr-vp-revert:disabled:hover { background: var(--panel); }
.sr-vp-copy:hover { border-color: var(--accent); }
.sr-vp-seedance { border-color: #4aa3f555; color: #7cc1ff; }
.sr-vp-seedance:hover { border-color: #4aa3f5; background: rgba(74,163,245,.1); }
.sr-vp-seedance:disabled { opacity: .55; cursor: default; }
.sr-vp-save.hidden, .sr-vp-edit.hidden, .sr-vp-cancel.hidden, .sr-vp-revert.hidden { display: none; }
/* 편집 모드 외곽 강조 */
.sr-vp-prompt-block.editing { border-color: #c389ff; box-shadow: 0 0 0 1px #c389ff33; }

/* 프롬프트 텍스트 — 접힘/펼침 (.sr-passage-text 와 동일 패턴) */
.sr-vp-text {
  font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: keep-all;
  outline: none;
}
/* 접힘 — 부모 .sr-vp-prompt-block 의 남는 세로 공간만큼 보여주고 마지막 줄에 '…' 처리.
   -webkit-line-clamp 의 라인 수는 JS(wireAnimeVideoPanel) 에서 부모 높이 기반으로 동적 산정. */
.sr-vp-text.collapsed {
  flex: 1 1 0; min-height: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; cursor: pointer; color: var(--muted);
}
.sr-vp-text.collapsed:hover { color: var(--accent); }
.sr-vp-text[contenteditable="true"] {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; margin-top: 2px; cursor: text;
  min-height: 200px;
  /* 편집 모드는 max-height 제한 없이 콘텐츠 높이에 맞춰 세로로 늘어남 — 전체 프롬프트 한눈에. */
}
.sr-vp-text[contenteditable="true"]:focus { border-color: #c389ff; box-shadow: inset 0 0 0 1px #c389ff; }
.sr-vp-text.empty::before {
  content: attr(placeholder); color: var(--muted); font-style: italic;
}

/* 하단 토글 행 — 좌측 취소(.sr-vp-toggle-cancel, dirty 시 노출) + 우측 닫기/저장&닫기(.sr-vp-toggle) */
.sr-vp-toggle-row { display: none; }
.sr-vp-prompt-block.open .sr-vp-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; gap: 8px;
}
.sr-vp-toggle, .sr-vp-toggle-cancel {
  padding: 4px 10px; font-size: 11.5px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); cursor: pointer;
}
.sr-vp-toggle:hover { border-color: var(--accent); color: var(--accent); }
.sr-vp-toggle-cancel.hidden { visibility: hidden; }   /* 자리만 유지해서 우측 닫기 위치 흔들림 방지 */
.sr-vp-toggle-cancel:hover { border-color: var(--err); color: var(--err); }
/* dirty 상태 — 저장&닫기 모드 시각 강조(녹색) */
.sr-vp-toggle.save-close {
  background: rgba(87,211,140,.10);
  border-color: rgba(87,211,140,.45);
  color: var(--ok);
  font-weight: 700;
}
.sr-vp-toggle.save-close:hover {
  border-color: var(--ok); background: rgba(87,211,140,.18);
}
/* 편집 중일 때(.editing): 우측 영상 영역에 맞춰 잡힌 flex:1 1 0 / overflow:hidden 을
   해제해서 콘텐츠 길이만큼 자유롭게 늘어나도록. 페이지 전체가 스크롤됨. */
.sr-anime-body-main > .sr-vp-prompt-block.editing {
  flex: 0 0 auto;
  overflow: visible;
}
.sr-anime-body-main > .sr-vp-prompt-block.editing .sr-vp-text {
  flex: 0 0 auto;
}

.sr-vp-status { font-size: 11.5px; color: var(--muted); min-height: 16px; padding: 2px 4px; margin-top: 6px; }
.sr-vp-status.pending { color: var(--warn); }
.sr-vp-status.ok { color: var(--ok); }
.sr-vp-status.err { color: var(--err); }
/* 영상 박스 placeholder 텍스트 톤 (영상 생성 상태/실패 표시) */
.sr-vp-vid-ph.pending { color: var(--warn); }
.sr-vp-vid-ph.err { color: var(--err); padding: 12px; text-align: center; word-break: break-word; line-height: 1.5; }

/* 애니 — 영상 json 프롬프트 블록(영상 프롬프트 블록 바로 아래, 동일 스타일 + monospace 표시) */
.sr-vpj-gen-btn {
  margin-left: 8px; font-size: 11.5px; padding: 4px 10px; border-radius: 6px;
  background: var(--panel-2); border: 1px solid #57d38c66; color: var(--text);
  cursor: pointer; white-space: nowrap;
}
.sr-vpj-gen-btn:hover { border-color: #57d38c; background: rgba(87,211,140,.12); }
.sr-vpj-gen-btn:disabled { opacity: .6; cursor: default; }

.sr-vpj-prompt-block {
  position: relative;
  margin: 10px 0 0 20px; padding: 10px 14px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
.sr-vpj-prompt-block .sr-vp-label { color: #57d38c; }
.sr-vpj-bytes { font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; margin-left: auto; }
.sr-vpj-save, .sr-vpj-copy, .sr-vpj-cancel, .sr-vpj-revert, .sr-vpj-seedance {
  font-size: 11.5px; padding: 3px 9px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text); cursor: pointer;
}
.sr-vpj-seedance { border-color: #ff8c5a55; color: #ffb38a; }
.sr-vpj-seedance:hover { border-color: #ff8c5a; background: rgba(255,140,90,.1); }
.sr-vpj-seedance:disabled { opacity: .55; cursor: default; }
.sr-vpj-cancel:hover { border-color: var(--muted); }
.sr-vpj-save { border-color: #57d38c55; color: var(--ok); }
.sr-vpj-save:hover { border-color: var(--ok); background: rgba(87,211,140,.08); }
.sr-vpj-save:disabled, .sr-vpj-save.dimmed {
  opacity: .35; cursor: default; color: var(--muted); border-color: var(--border); background: var(--panel);
}
.sr-vpj-revert { border-color: #ffb86c55; color: #ffb86c; }
.sr-vpj-revert:hover { border-color: #ffb86c; background: rgba(255,184,108,.08); }
.sr-vpj-revert:disabled { opacity: .35; cursor: default; color: var(--muted); border-color: var(--border); }
.sr-vpj-copy:hover { border-color: var(--accent); }
.sr-vpj-save.hidden, .sr-vpj-cancel.hidden, .sr-vpj-revert.hidden { display: none; }
.sr-vpj-prompt-block.editing { border-color: #57d38c; box-shadow: 0 0 0 1px #57d38c33; }

.sr-vpj-text {
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-size: 12px; line-height: 1.55; color: var(--text); white-space: pre; tab-size: 2;
  overflow-x: auto; outline: none;
}
.sr-vpj-text.collapsed {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; cursor: pointer; color: var(--muted); white-space: pre-wrap;
}
.sr-vpj-text.collapsed:hover { color: var(--accent); }
.sr-vpj-text[contenteditable="true"] {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; margin-top: 2px; cursor: text;
  max-height: 560px; overflow: auto;
}
.sr-vpj-text[contenteditable="true"]:focus { border-color: #57d38c; box-shadow: inset 0 0 0 1px #57d38c; }
.sr-vpj-text.empty::before {
  content: attr(placeholder); color: var(--muted); font-style: italic; font-family: var(--font, system-ui);
}

.sr-vpj-toggle { display: none; }
.sr-vpj-prompt-block.open .sr-vpj-toggle {
  display: inline-block; margin-top: 8px; padding: 4px 10px; font-size: 11.5px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); cursor: pointer;
}
.sr-vpj-prompt-block.open .sr-vpj-toggle:hover { border-color: var(--accent); color: var(--accent); }

.sr-vpj-status { font-size: 11.5px; color: var(--muted); min-height: 16px; padding: 2px 4px; margin-top: 6px; }
.sr-vpj-status.pending { color: var(--warn); }
.sr-vpj-status.ok { color: var(--ok); }
.sr-vpj-status.err { color: var(--err); }

/* 애니 본문 영역 — head/quotes/summary/chars 다음에 오는 가로 2단(좌: SHOT/원문/프롬프트, 우: 영상).
   sr-main 가로 100% 풀로 사용 (SHOT 분해 라벨 가독성 확보용 — 라벨이 좁아 잘 보이지 않던 문제 해결). */
body.kind-anime .sr-left { flex: 1 1 100%; max-width: 100%; }
.sr-anime-body {
  display: flex; gap: 16px; align-items: stretch;
}
/* 좌측 컨테이너 — flex column 으로 만들어서 마지막 자식(영상 프롬프트 블록)이
   남는 세로 공간을 다 차지하게 함. 우측 .sr-vp-right 의 높이에 맞춰 stretch. */
.sr-anime-body-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
/* 영상 프롬프트 블록 = 마지막 자식 → 남는 세로 공간 모두 채움. */
.sr-anime-body-main > .sr-vp-prompt-block {
  flex: 1 1 0; min-height: 120px; overflow: hidden;
  display: flex; flex-direction: column;
}
.sr-anime-body-main > .sr-vp-prompt-block .sr-vp-head { flex: 0 0 auto; }
.sr-anime-body-main > .sr-vp-prompt-block .sr-vp-status { flex: 0 0 auto; }

/* 영상 영역 — CSS Grid 로 정확 배치.
   col1: 영상 패널 (9:16, 행 전체 차지)
   col2-3 row 1: 이어 / 따라
   col2-3 row 2: 스토리보드 (가로로 col2+col3 span) */
.sr-vp-right {
  flex: 0 0 auto;
  align-self: flex-start;
  display: grid;
  /* col 1~3: 참고영상(이전씬)·참고영상(다음씬)·따라만들기 — 기존 2칸(210×2 + gap)을 3등분.
     총합 432px = 136px×3 + 12px×2.  col 4: 영상(360+여백) auto. */
  grid-template-columns: 136px 136px 136px auto;
  grid-template-rows: auto auto;
  gap: 12px;
  margin-top: 10px;
}
.sr-vp-video-panel {
  grid-column: 4; grid-row: 1 / span 2;  /* 영상은 두 행 다 차지 (오른쪽 큼) */
}
/* 참고 영상 패널 2개: 이전씬(forward) / 다음씬(backward) — 각 패널 data-cont-direction 으로 구분 */
.sr-vp-cont-panel[data-cont-direction="forward"]  { grid-column: 1; grid-row: 2; }
.sr-vp-cont-panel[data-cont-direction="backward"] { grid-column: 2; grid-row: 2; }
.sr-vp-style-panel { grid-column: 3; grid-row: 2; }
/* 영상 프롬프트 ↔ 참고영상 위치 스왑 + 스토리보드 좌측 이동 (2026-06-10):
   - 좌측 ref-row: 참고영상 이전씬·다음씬(각 1/4 폭) + 스토리보드 1:1 정사각(우측 1/2). 따라만들기 제거.
   - 우측 grid: 영상 프롬프트가 row1~2 전체(이전 스토리보드+프롬프트 자리)를 차지 + 내부 스크롤. */
.sr-vp-right > .sr-vp-prompt-block {
  grid-column: 1 / span 3; grid-row: 1 / span 2; margin: 0;
  display: flex; flex-direction: column; min-height: 120px; overflow: hidden;
}
.sr-vp-right > .sr-vp-prompt-block .sr-vp-head { flex: 0 0 auto; }
.sr-vp-right > .sr-vp-prompt-block .sr-vp-status { flex: 0 0 auto; }
/* 프롬프트 텍스트: 블록 높이를 채우고 내용이 길면 내부 스크롤 (보기·편집 공통, 페이지 확장 X).
   overscroll-behavior: contain → 영역 끝까지 스크롤해도 페이지로 전파(scroll chaining) 안 됨. */
.sr-vp-right > .sr-vp-prompt-block .sr-vp-text {
  flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.sr-vp-right > .sr-vp-prompt-block .sr-vp-text.collapsed {
  display: block; -webkit-line-clamp: none;  /* 라인클램프 해제 → 전체 텍스트 + 스크롤 */
}
.sr-vp-right > .sr-vp-prompt-block .sr-vp-text[contenteditable="true"] { min-height: 0; }
.sr-anime-body-main > .sr-vp-ref-row {
  display: flex; gap: 12px; margin-top: auto; padding-top: 10px;
  /* 원문(.scene-passage)·음성(.scene-dialogues) 과 같은 좌측 선에서 시작 (left margin 20px). */
  margin-left: 20px; align-items: flex-start;
  flex-wrap: wrap; row-gap: 10px;   /* 패널 4개(참고영상 2 + 참고이미지 2)가 좁으면 줄바꿈 */
}
/* 참고영상 2개 = 좌측 절반(각 1/4 폭, 키우지 않음). 우측 절반(이전 스토리보드 자리)은 비움. */
/* 한 줄에 4개(참고영상 2 + 참고이미지 2). gap 12px×3 을 제한 1/4 폭. */
.sr-vp-ref-row > .sr-vp-cont-panel,
.sr-vp-ref-row > .sr-vp-pm-panel { flex: 0 0 calc(25% - 10px); min-width: 0; grid-column: auto; grid-row: auto; }
.sr-vp-storyboard-panel {
  grid-column: 1 / span 3;  /* 참고2 + 따라만들기 폭 합산만큼 */
  grid-row: 1;              /* 스토리보드를 위쪽으로 (이어/따라보다 우선) */
}
.sr-vp-video-panel, .sr-vp-cont-panel, .sr-vp-style-panel, .sr-vp-pm-panel {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
}
/* 세 패널 헤더 높이 통일(× 버튼 22px 기준) — 라벨 시작 라인 정렬 */
.sr-vp-video-panel .sr-vp-head,
.sr-vp-cont-panel .sr-vp-cont-head,
.sr-vp-pm-panel .sr-vp-cont-head,
.sr-vp-style-panel .sr-vp-style-head {
  margin-bottom: 10px; flex-shrink: 0; min-height: 22px;
}
.sr-vp-video-box {
  width: 360px; height: 640px;            /* 9:16 비율(360 × 640) 고정 */
  background: #000;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: border-color .12s, box-shadow .12s;
}
.sr-vp-video-box.dragover {
  border-color: #7aa8ff; border-style: dashed;
  box-shadow: 0 0 0 3px rgba(122,168,255,.18) inset;
}
.sr-vp-video-box.dragover::after {
  content: "🎞 영상 파일 드롭 → 히스토리에 추가";
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: #cfe1ff; font-size: 13px; font-weight: 600;
  background: rgba(0,0,0,.55); padding: 12px 8px;
  pointer-events: none;
}
.sr-vp-video-box.uploading::after {
  content: "업로드 중…";
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: #fff; font-size: 13px; font-weight: 600;
  background: rgba(0,0,0,.65); padding: 12px 8px;
  pointer-events: none;
}

/* 영상 히스토리 strip — 영상 박스 아래, 최근 → 과거 좌→우 */
.sr-vp-vh {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; width: 360px;
}
.sr-vp-vh.hidden { display: none; }
.sr-vp-vh-prev, .sr-vp-vh-next {
  flex: none; width: 24px; height: 128px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
}
.sr-vp-vh-prev:hover, .sr-vp-vh-next:hover { border-color: #c389ff; }
.sr-vp-vh-scroll {
  flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; padding-bottom: 2px;
}
.sr-vp-vh-scroll::-webkit-scrollbar { height: 4px; }
.sr-vp-vh-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.sr-vp-vh-item {
  flex: none; width: 72px; height: 128px; border-radius: 6px;   /* 9:16 비율 */
  background: #000; border: 2px solid var(--border); overflow: hidden;
  cursor: pointer; position: relative;
}
.sr-vp-vh-item.active {
  border-color: #c389ff; box-shadow: 0 0 0 1px rgba(195,137,255,.3);
}
.sr-vp-vh-item:hover { border-color: #c389ff80; }
.sr-vp-vh-vid {
  width: 100%; height: 100%; object-fit: cover; pointer-events: none;
}
.sr-vp-vh-meta {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.6) 60%, transparent);
  color: #fff; padding: 2px 4px 3px;
  display: flex; flex-direction: column; align-items: stretch; gap: 1px;
  line-height: 1.15;
  pointer-events: none;
}
.sr-vp-vh-meta-row { font-size: 10px; font-variant-numeric: tabular-nums; }
.sr-vp-vh-ts { color: #fff; }
.sr-vp-vh-res {
  font-size: 8.5px; font-weight: 700;
  align-self: flex-start;
  padding: 0 3px; border-radius: 3px;
  line-height: 1.3;
}
/* 해상도별 색상 — 480p=청록, 720p=황금 */
.sr-vp-vh-res.is-480p {
  background: rgba(64,180,200,.30);
  color: #9ee6f0;
  border: 1px solid rgba(64,180,200,.55);
}
.sr-vp-vh-res.is-720p {
  background: rgba(245,200,74,.28);
  color: #f5d977;
  border: 1px solid rgba(245,200,74,.55);
}
/* 배지 행 — 해상도 좌측, 길이 우측 (한 줄 유지) */
.sr-vp-vh-badge-row {
  display: flex; gap: 4px; align-items: center; justify-content: space-between;
  flex-wrap: nowrap;
}
.sr-vp-vh-dur {
  font-size: 8.5px; font-weight: 700;
  padding: 0 3px; border-radius: 3px;
  line-height: 1.3;
  background: rgba(180,180,200,.22);
  color: #e0e3ec;
  border: 1px solid rgba(180,180,200,.45);
  font-variant-numeric: tabular-nums;
}
.sr-vp-vh-del {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
  display: none;
}
.sr-vp-vh-item:hover .sr-vp-vh-del { display: block; }
.sr-vp-vh-item.active .sr-vp-vh-del { display: none; }
/* 확정 영상 — 동그라미 안 V 마크 (좌상단), 보더는 황금색 */
.sr-vp-vh-item.confirmed {
  border-color: #f5c84a;
  box-shadow: 0 0 0 1px rgba(245,200,74,.35);
}
.sr-vp-vh-confirm {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #f5c84a; color: #1a1a1a;
  font-size: 11px; font-weight: 900; line-height: 18px;
  text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.5);
  pointer-events: none;
}
/* 영상 히스토리 — 생성순 번호 뱃지 (우측 상단). 가장 먼저 생성된 게 1.
   삭제 X 버튼(hover 시만 노출) 과 같은 위치라 hover 시 번호는 숨김. */
.sr-vp-vh-order {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px;
  background: rgba(0,0,0,.7); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px;
  text-align: center; box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.sr-vp-vh-item:hover .sr-vp-vh-order { opacity: 0; }

/* 씬 헤더 '확정' 버튼 */
.sr-confirm-btn {
  margin-left: 8px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,.04);
  color: var(--text); font-size: 12px; font-family: inherit;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.sr-confirm-btn:hover:not(:disabled) { background: rgba(255,255,255,.10); }
.sr-confirm-btn:disabled { opacity: .5; cursor: wait; }
.sr-confirm-btn.on {
  border-color: #f5c84a; color: #f5c84a;
  background: rgba(245,200,74,.10);
}
.sr-confirm-btn.on:hover:not(:disabled) { background: rgba(245,200,74,.18); }
.sr-vp-vh-item.empty {
  cursor: default; background: var(--panel);
  display: flex; align-items: center; justify-content: center;
}
.sr-vp-vh-item.empty:hover { border-color: var(--border); }
/* 에러 placeholder — 생성 실패 시 strip 에 잠시 표시 */
.sr-vp-vh-item.err-placeholder {
  cursor: default;
  background: rgba(255,138,138,.08);
  border-color: rgba(255,138,138,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
}
.sr-vp-vh-item.err-placeholder:hover { border-color: rgba(255,138,138,.7); }
.sr-vp-vh-err-thumb {
  font-size: 24px; color: #ff8a8a; line-height: 1;
}
.sr-vp-vh-err-tag {
  background: rgba(255,138,138,.25); color: #ffb3b3;
  font-size: 8px; font-weight: 700;
  padding: 1px 4px; border-radius: 3px;
}
.sr-vp-vh-err-x {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  background: rgba(0,0,0,.55); border: 0;
  color: #fff; font-size: 12px; line-height: 1;
  cursor: pointer; padding: 0; border-radius: 3px;
}
.sr-vp-vh-empty-text {
  font-size: 9px; color: var(--muted); text-align: center; line-height: 1.2;
  padding: 0 4px; word-break: keep-all;
}

/* 생성중 placeholder — 영상 생성 진행 중 strip 맨 앞에 표시 */
.sr-vp-vh-item.processing-placeholder {
  cursor: pointer;
  background: rgba(195,137,255,.08);
  border-color: rgba(195,137,255,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
}
.sr-vp-vh-item.processing-placeholder:hover { border-color: rgba(195,137,255,.85); }
.sr-vp-vh-item.processing-placeholder.active {
  border-color: #c389ff;
  box-shadow: 0 0 0 1px rgba(195,137,255,.4);
}
.sr-vp-vh-proc-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 100%; flex: 1;
}
.sr-vp-vh-spinner {
  width: 22px; height: 22px;
  border: 2.5px solid rgba(195,137,255,.25);
  border-top-color: #c389ff;
  border-radius: 50%;
  animation: vh-spin 0.9s linear infinite;
}
@keyframes vh-spin {
  to { transform: rotate(360deg); }
}

/* 참고 영상(이전씬/다음씬) 패널 헤더 — 좁아진 컬럼(136px) 대응 */
.sr-vp-cont-head {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-size: 10.5px; font-weight: 700; color: #c389ff; letter-spacing: 0;
}
.sr-vp-cont-label { flex: 1; min-width: 0; line-height: 1.25; }
.sr-vp-cont-del {
  flex: none;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1;
}
.sr-vp-cont-del:hover { color: var(--err); border-color: var(--err); }
.sr-vp-cont-del.hidden { display: none; }
.sr-vp-cont-drop {
  width: 100%; aspect-ratio: 9 / 16;
  box-sizing: border-box;
  border: 2px dashed var(--border); border-radius: 8px;
  background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .12s, background .12s;
  overflow: hidden;
}
.sr-vp-cont-drop:hover { border-color: #c389ff; background: rgba(195,137,255,.05); }
.sr-vp-cont-drop.dragover { border-color: #c389ff; background: rgba(195,137,255,.12); }
.sr-vp-cont-drop.filled { cursor: default; border-style: solid; padding: 0; }
.sr-vp-cont-drop.uploading { opacity: .55; cursor: progress; }
.sr-vp-cont-placeholder {
  text-align: center; font-size: 12px; color: var(--text); line-height: 1.6; padding: 10px;
}
.sr-vp-cont-placeholder.hidden { display: none; }
.sr-vp-cont-placeholder .muted { color: var(--muted); font-size: 10.5px; }
.sr-vp-cont-preview {
  width: 100%; height: 100%; display: block; background: #000;
  object-fit: contain;
}
.sr-vp-cont-preview.hidden { display: none; }

/* 이전 씬 합성 참고 이미지 패널 — 참고영상 우측, 1:1 박스 (청록 톤) */
.sr-vp-pm-head { color: #6fe0a6; }
.sr-vp-pm-drop {
  width: 100%; aspect-ratio: 1 / 1;
  box-sizing: border-box; position: relative;
  border: 2px dashed var(--border); border-radius: 8px;
  background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .12s, background .12s;
  overflow: hidden;
}
.sr-vp-pm-drop:hover { border-color: #57d38c; background: rgba(87,211,140,.05); }
.sr-vp-pm-drop.filled { border-style: solid; padding: 0; }
.sr-vp-pm-drop.uploading { opacity: .6; cursor: progress; }
.sr-vp-pm-placeholder {
  text-align: center; font-size: 12px; color: var(--text); line-height: 1.6; padding: 10px;
}
.sr-vp-pm-placeholder.hidden { display: none; }
.sr-vp-pm-placeholder .muted { color: var(--muted); font-size: 10.5px; }
.sr-vp-pm-preview {
  width: 100%; height: 100%; display: block; background: #000; object-fit: contain;
}
.sr-vp-pm-preview.hidden { display: none; }
.sr-vp-pm-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: rgba(16,20,28,.72); color: #cfe2ff; font-size: 12px; text-align: center;
}
.sr-vp-pm-loading.hidden { display: none; }
.sr-vp-pm-loading .spinner { border-color: #6fe0a6; border-top-color: transparent; }
.sr-vp-pm-del {
  flex: none; width: 22px; height: 22px; padding: 0;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1;
}
.sr-vp-pm-del:hover { color: var(--err); border-color: var(--err); }
.sr-vp-pm-del.hidden { display: none; }

/* 따라 만들기 패널 헤더 — 같은 폭(136px), 녹색 톤. 라벨은 토글 버튼이 겸함. */
.sr-vp-style-head {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-size: 10.5px; font-weight: 700; color: #57d38c; letter-spacing: 0;
}
.sr-vp-style-del {
  flex: none;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1;
}
.sr-vp-style-del:hover { color: var(--err); border-color: var(--err); }
.sr-vp-style-del.hidden { display: none; }

/* 단일 버튼 사이클 토글 — 클릭하면 다른 상태로 전환. 현재 상태를 라벨로 표시.
   오디오 / 따라 만들기 모드 공통. */
.toggle-cycle {
  margin-left: auto;
  padding: 3px 7px; font-size: 10px; line-height: 1.3;
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text); cursor: pointer; font-weight: 700; letter-spacing: 0;
  white-space: nowrap; flex-shrink: 0;
  transition: background .12s, border-color .12s, color .12s;
}
.toggle-cycle:hover { border-color: var(--accent); }

/* 영상 패널 헤더 우측 액션 묶음 (스토리보드 actions 와 동일 패턴) */
.sr-vp-video-actions {
  margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none;
}
.sr-vp-audio-select,
.sr-vp-res-select,
.sr-vp-speed-select {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 2px 4px; cursor: pointer;
}
.sr-vp-audio-select:hover,
.sr-vp-res-select:hover,
.sr-vp-speed-select:hover { border-color: var(--accent); }

/* (구) 이어 만들기 방향 토글은 2026-05-30 패널 분리로 제거됨 — 참고만. */

/* 따라 만들기 모드 토글 — 녹색 톤 (loose/strict) */
.sr-vp-style-mode-toggle.loose  { background: rgba(87,211,140,.22); border-color: #57d38c; color: #57d38c; }
.sr-vp-style-mode-toggle.strict { background: rgba(255,140,90,.22); border-color: #ff8c5a; color: #ff8c5a; }

.sr-vp-style-drop {
  width: 100%; aspect-ratio: 9 / 16;
  box-sizing: border-box;
  border: 2px dashed var(--border); border-radius: 8px;
  background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .12s, background .12s;
  overflow: hidden;
}
.sr-vp-style-drop:hover { border-color: #57d38c; background: rgba(87,211,140,.05); }
.sr-vp-style-drop.dragover { border-color: #57d38c; background: rgba(87,211,140,.12); }
.sr-vp-style-drop.filled { cursor: default; border-style: solid; padding: 0; }
.sr-vp-style-drop.uploading { opacity: .55; cursor: progress; }
.sr-vp-style-placeholder {
  text-align: center; font-size: 12px; color: var(--text); line-height: 1.6; padding: 10px;
}
.sr-vp-style-placeholder.hidden { display: none; }
.sr-vp-style-placeholder .muted { color: var(--muted); font-size: 10.5px; }
.sr-vp-style-preview {
  width: 100%; height: 100%; display: block; background: #000;
  object-fit: contain;
}
.sr-vp-style-preview.hidden { display: none; }

/* 스토리보드 이미지 패널 — 1:1 정사각 (4×2 그리드, 셀당 9:16 + SHOT N).
   cont/style 패널 아래에 가로 전체로 배치(refs row 다음). */
.sr-vp-storyboard-panel {
  flex: 0 0 100%;
  display: flex; flex-direction: column;
  padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  /* spanning 패널이 자식의 자연 폭(생성된 이미지 1024+ px)으로 칸을 밀지 못하게 잠금. */
  min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden;
}
.sr-vp-storyboard-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  margin-bottom: 10px; flex-shrink: 0; min-height: 22px;
  font-size: 11px; font-weight: 700; color: #e8c468; letter-spacing: .3px;
}
.sr-vp-storyboard-label { flex: 0 1 auto; }
.sr-vp-storyboard-status {
  margin-left: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0;
  padding: 1px 6px; border-radius: 10px;
}
.sr-vp-storyboard-status.hidden { display: none; }
.sr-vp-storyboard-status.processing {
  color: #ffc46c; background: rgba(255,196,108,.12); border: 1px solid rgba(255,196,108,.35);
}
.sr-vp-storyboard-status.error {
  color: #ff7676; background: rgba(255,118,118,.12); border: 1px solid rgba(255,118,118,.4);
  cursor: help;
}
.sr-vp-storyboard-actions {
  margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none;
}
.sr-vp-storyboard-engine {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  height: 22px; padding: 0 4px; cursor: pointer;
}
.sr-vp-storyboard-engine:hover { border-color: #e8c468; }
.sr-vp-storyboard-gen {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0;
  background: rgba(232,196,104,.14); color: #e8c468;
  border: 1px solid rgba(232,196,104,.45); border-radius: 4px;
  height: 22px; padding: 0 8px; cursor: pointer;
  white-space: nowrap;
}
.sr-vp-storyboard-gen:hover { background: rgba(232,196,104,.22); border-color: #e8c468; }
.sr-vp-storyboard-gen:disabled { opacity: .55; cursor: progress; }
.sr-vp-storyboard-del {
  flex: none;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1;
}
.sr-vp-storyboard-del:hover { color: var(--err); border-color: var(--err); }
.sr-vp-storyboard-del.hidden { display: none; }

.sr-vp-storyboard-drop {
  width: 100%; max-width: 100%; aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 2px dashed var(--border); border-radius: 8px;
  background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .12s, background .12s;
  overflow: hidden;
}
.sr-vp-storyboard-drop:hover { border-color: #e8c468; background: rgba(232,196,104,.05); }
.sr-vp-storyboard-drop.dragover { border-color: #e8c468; background: rgba(232,196,104,.12); }
.sr-vp-storyboard-drop.filled { cursor: zoom-in; border-style: solid; padding: 0; }
.sr-vp-storyboard-drop.uploading { opacity: .55; cursor: progress; }
.sr-vp-storyboard-placeholder {
  text-align: center; font-size: 12px; color: var(--text); line-height: 1.6; padding: 10px;
}
.sr-vp-storyboard-placeholder.hidden { display: none; }
.sr-vp-storyboard-placeholder .muted { color: var(--muted); font-size: 10.5px; }
.sr-vp-storyboard-preview {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  display: block; background: #0e0e10;
  object-fit: contain; cursor: zoom-in;
}
.sr-vp-storyboard-preview.hidden { display: none; }

/* 스토리보드 확대 모달 */
.storyboard-modal { position: fixed; inset: 0; z-index: 9100; }
.storyboard-modal .modal-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,.7);
}
.storyboard-modal-box {
  position: relative; margin: 5vh auto; max-width: 90vw; max-height: 90vh;
  display: flex; align-items: center; justify-content: center;
}
.storyboard-modal-box img {
  max-width: 90vw; max-height: 90vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  cursor: zoom-out;
}
.storyboard-modal .modal-bg { cursor: zoom-out; }

/* 영상 패널 헤더 — 2줄: row1=라벨+해상도, row2=편집·부분재생성·생성 버튼 */
.sr-vp-video-panel .sr-vp-head {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
}
.sr-vp-video-panel .sr-vp-head-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
}
.sr-vp-video-panel .sr-vp-head-row1 .sr-vp-label { flex: 0 1 auto; }
/* speed select 가 res select 의 왼쪽에 위치. speed 에 margin-left:auto 를 주면
   speed + res 둘 다 우측으로 밀려 [Normal/Fast] [720p] 가 우측 정렬됨. */
.sr-vp-video-panel .sr-vp-head-row1 .sr-vp-speed-select { margin-left: auto; }
.sr-vp-dl-btn, .sr-vp-frame-btn {
  background: rgba(120,180,255,.14); color: #b5d7ff;
  border: 1px solid #6ea7ff55; border-radius: 6px; padding: 3px 8px;
  font-size: 11px; cursor: pointer; transition: all .12s ease; white-space: nowrap;
}
.sr-vp-dl-btn:hover:not(:disabled), .sr-vp-frame-btn:hover:not(:disabled) {
  background: rgba(120,180,255,.26); border-color: #6ea7ff;
}
.sr-vp-dl-btn:disabled, .sr-vp-frame-btn:disabled { opacity: .4; cursor: not-allowed; }
.sr-vp-frame-btn { border-color: #f1c45a55; color: #f5d68a; background: rgba(241,196,90,.12); }
.sr-vp-frame-btn:hover:not(:disabled) { background: rgba(241,196,90,.24); border-color: #f1c45a; }
.sr-vp-video-panel .sr-vp-head-row2 { justify-content: flex-end; flex-wrap: wrap; }

/* 스토리보드 패널 헤더 — 한 줄: 라벨 + (엔진 select · 🎨 생성 · 삭제) 우측 정렬.
   좁으면 라벨·엔진 select 가 줄어들고 생성/삭제 버튼은 고정 유지. */
.sr-vp-storyboard-label {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sr-vp-storyboard-actions { flex: 0 0 auto; min-width: 0; }
.sr-vp-storyboard-engine { flex: 0 1 auto; min-width: 48px; }
.sr-vp-storyboard-gen, .sr-vp-storyboard-del { flex: 0 0 auto; }

/* 오디오 토글은 .toggle-cycle 공통 패턴 사용 (상단 정의) */

/* 이어 만들기 영상 소스 선택 모달 */
.cont-source-modal { position: fixed; inset: 0; z-index: 9000; }
.cont-source-modal .modal-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
}
.cont-source-modal .cont-source-box {
  position: relative; margin: 7vh auto; max-width: 640px; max-height: 86vh;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.4);
}
.cont-source-modal .modal-head {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.cont-source-modal .modal-title { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.cont-source-modal .modal-close {
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); width: 28px; height: 28px; cursor: pointer; font-size: 16px;
}
.cont-source-modal .modal-close:hover { color: var(--text); border-color: var(--accent); }
.cont-source-modal .modal-body { padding: 18px; overflow-y: auto; }

.cont-source-upload {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 16px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); cursor: pointer; font-size: 13px;
  transition: border-color .12s, background .12s;
}
.cont-source-upload:hover { border-color: #c389ff; background: rgba(195,137,255,.08); }
.cont-source-upload .cs-icon { font-size: 18px; }
.cont-source-upload .cs-label { font-weight: 600; }

.cont-source-divider {
  margin: 16px 0 10px; font-size: 11px; color: var(--muted); letter-spacing: .3px;
}
.cont-source-list { display: flex; flex-direction: column; gap: 8px; }
.cont-source-item {
  display: flex; align-items: center; gap: 12px; padding: 8px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s;
}
.cont-source-item:hover { border-color: #c389ff; background: rgba(195,137,255,.06); }
.cont-source-item .cs-thumb {
  flex: 0 0 auto; width: 80px; height: 142px;
  background: #000; border-radius: 6px; object-fit: cover;
}
.cont-source-item .cs-meta { flex: 1; min-width: 0; }
.cont-source-item .cs-title {
  font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cont-source-item .cs-sub { font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }
.cont-source-item .cs-current {
  display: inline-block; margin-left: 6px;
  background: rgba(195,137,255,.22); color: #d3a3ff;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
}
.cont-source-item .cs-confirmed {
  display: inline-block; margin-left: 6px;
  background: rgba(108,255,168,.18); color: #6cffa8;
  border: 1px solid rgba(108,255,168,.45);
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
}
.cont-source-item.is-confirmed {
  border-color: rgba(108,255,168,.55);
  background: rgba(108,255,168,.04);
}
.cont-source-item.is-confirmed:hover {
  border-color: #6cffa8; background: rgba(108,255,168,.1);
}
.cont-source-loading { color: var(--muted); padding: 16px; text-align: center; font-size: 12px; }
.cs-empty { padding: 16px; text-align: center; font-size: 12px; }
.sr-vp-vid { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.sr-vp-vid-ph { color: var(--muted); font-size: 12px; padding: 12px; text-align: center; line-height: 1.6; }
.new-outfit-fields input,
.new-outfit-fields textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; color: var(--text); font-size: 13px; font-family: inherit; resize: vertical;
}
.new-outfit-fields input:focus,
.new-outfit-fields textarea:focus { outline: none; border-color: var(--accent); }

/* 장면 카드 — 등장 인물·아웃핏 칩 */
.sr-chars { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px 20px; }
.char-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; font-size: 12px;
}
.char-chip.missing { border-style: dashed; opacity: .85; }
.chip-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums;
}
/* 세로 높이 26px 고정, 가로는 원본 비율대로 가변 (정사각/직사각). 모서리만 살짝 라운드. */
.chip-thumb { height: 26px; width: auto; border-radius: 5px; object-fit: contain; flex: none; }
.chip-thumb[data-outfit-id] { cursor: pointer; }   /* 시트 있는 썸네일만 클릭 가능 — 손 커서 */
.chip-thumb.none {
  width: 26px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 8px; line-height: 1.05; color: var(--muted); background: var(--bg);
  border: 1px dashed var(--border); border-radius: 5px;
}
.chip-text { white-space: nowrap; }
.chip-del {
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 0 0 2px; margin-left: 2px;
}
.chip-del:hover { color: var(--err); }
.chip-add {
  display: inline-flex; align-items: center; padding: 4px 11px; font-size: 12px;
  background: transparent; border: 1px dashed var(--border); border-radius: 20px;
  color: var(--muted); cursor: pointer;
}
.chip-add:hover { border-color: var(--accent); color: var(--accent); }

/* 캐릭터 시트 추가 선택 모달 리스트 */
.picker-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; max-width: 560px; }
.picker-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 110px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; cursor: pointer; color: var(--text);
}
.picker-item:hover { border-color: var(--accent); background: #1b2333; }
.picker-item img { width: 94px; height: 124px; object-fit: cover; border-radius: 6px; }
.picker-item .pk-none {
  width: 94px; height: 124px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 11px; color: var(--muted); background: var(--bg);
  border: 1px dashed var(--border); border-radius: 6px; line-height: 1.3;
}
.picker-item .pk-label { font-size: 12px; text-align: center; line-height: 1.3; }

/* 이미지 프롬프트 위 자동 시트 매핑 표시 */
.sr-sheet-map {
  font-size: 11.5px; color: var(--accent); background: #141a26;
  border: 1px dashed #2a3a55; border-radius: 6px; padding: 5px 9px; margin: 0 0 8px;
  line-height: 1.6;
}
.sr-sheet-map b { color: #cfe0ff; }

/* ===== AI 오디오(자동 낭독) 패널 ===== */
.audio-panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 18px;
}
.audio-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.audio-head h3 { margin: 0; font-size: 15px; }
.audio-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.audio-status { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.audio-status .audio-err { color: var(--err); }
.audio-gen-btn {
  border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; color: #0b1018; background: linear-gradient(135deg, #ff7aa2, #ff9b6e);
}
.audio-gen-btn:hover { filter: brightness(1.07); }
.audio-gen-btn:disabled { opacity: .55; cursor: default; filter: none; }
.audio-player-wrap { margin-top: 12px; }
.audio-player-wrap audio { width: 100%; height: 38px; }
.audio-voices { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.av-label { font-size: 12px; color: var(--muted); margin-right: 4px; }
.voice-chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel-2);
}
.voice-chip i { font-style: normal; color: var(--muted); font-size: 10px; }
.voice-chip.female { border-color: #5a3550; background: #241820; }
.voice-chip.male { border-color: #2f4a63; background: #15202b; }
.voice-chip.narrator { border-color: #4a4630; background: #211f15; }
.audio-segments { margin-top: 12px; }
.audio-segments summary {
  cursor: pointer; font-size: 12.5px; color: var(--accent); padding: 4px 0; user-select: none;
}
.seg-list { max-height: 340px; overflow-y: auto; margin-top: 8px; border-top: 1px solid var(--border); }
.seg-row {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 4px; font-size: 12.5px;
  border-bottom: 1px solid #20262f; line-height: 1.5;
}
.seg-row.dialogue { background: #15191f; }
.seg-row.thought { background: #131820; }
.seg-badge { flex: none; font-size: 11px; color: var(--muted); width: 76px; }
.seg-speaker { flex: none; font-weight: 700; color: #cfe0ff; }
.seg-emo { flex: none; font-size: 10.5px; color: #8fe0ff; background: #102530; border: 1px solid #1d4759; border-radius: 5px; padding: 1px 6px; font-family: ui-monospace, monospace; }
.seg-tone { flex: none; font-size: 10.5px; color: var(--warn); background: #221d12; border-radius: 5px; padding: 1px 6px; }
.seg-text { flex: 1; color: var(--text); }
.seg-play {
  flex: none; border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  border-radius: 6px; width: 26px; height: 22px; cursor: pointer; font-size: 10px;
}
.seg-play:hover { border-color: var(--accent); }

/* ===== 제목 옆 미리보기 버튼 ===== */
.cv-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.preview-btn {
  border: none; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 700;
  cursor: pointer; color: #0b1018; background: linear-gradient(135deg, #6ea8fe, #8f7aff);
}
.preview-btn:hover { filter: brightness(1.08); }
.preview-btn.dl { background: linear-gradient(135deg, #57d38c, #6ea8fe); }
.preview-btn.vid { background: linear-gradient(135deg, #f4b740, #ff7aa2); }
.preview-btn.raw { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
.preview-btn.raw:hover { border-color: var(--accent); filter: none; }
.preview-btn:disabled { opacity: .6; cursor: default; filter: none; }

/* ===== 원문 보기 모달 ===== */
.raw-card {
  width: min(820px, 92vw); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.raw-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.raw-head h3 { font-size: 16px; margin: 0; }
.raw-meta { font-size: 12px; color: var(--muted); flex: 1; }
.raw-body {
  overflow-y: auto; padding: 18px 22px; line-height: 1.75; font-size: 15px;
}
.raw-body p { margin: 0 0 2px; white-space: pre-wrap; word-break: break-word; }
.raw-body .raw-blank { height: 10px; }
.raw-body .raw-loading { color: var(--muted); }

/* ===== 음성+영상 싱크 미리보기 모달 ===== */
.preview-modal {
  position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .92);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.preview-modal.hidden { display: none; }
.preview-stage {
  position: relative; height: 78vh; aspect-ratio: 9 / 16; background: #000;
  border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center;
}
.preview-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000;
  transition: filter 1.8s ease, opacity 1.8s ease; }
.preview-video.hidden { display: none; }
.preview-video.dimmed { filter: brightness(.18); }   /* 1회: 영상 끝나면 천천히 어두워짐 */
.preview-title-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview-title-img.hidden { display: none; }
.preview-idle { color: var(--muted); font-size: 14px; text-align: center; line-height: 1.7; padding: 20px; }

/* 라이브 자막: 아래에서 위로 올라오며 화면 절반쯤에서 사라짐, 현재 줄 강조 */
.preview-captions {
  position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 7px; padding: 0 6% 6%; pointer-events: none; overflow: hidden; z-index: 3;
  opacity: 1; transition: opacity .35s ease;
}
.preview-captions.cap-hide { opacity: 0; }   /* 대사 끝 0.5초 뒤 자연스럽게 사라짐 */
.cap-line {
  display: inline-block; max-width: 94%; padding: 9px 18px; border-radius: 14px;
  background: rgba(8, 10, 16, .42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-size: 22px; line-height: 1.5; font-weight: 700; text-align: center;
  letter-spacing: -.2px; word-break: keep-all;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
  animation: capRise .38s cubic-bezier(.2, .8, .2, 1);
}
.cap-spk {
  display: inline-block; margin-right: 9px; padding: 2px 11px; border-radius: 999px;
  font-size: 14px; font-weight: 800; vertical-align: middle;
  background: rgba(110, 168, 254, .22); color: #bcd9ff; text-shadow: none;
}
/* 대사 = 부드러운 시안 */
.cap-dlg .cap-txt { color: #9ad4ff; }
.cap-dlg.thought .cap-txt { color: #c3c9ff; font-style: italic; }
.cap-dlg.thought .cap-spk { background: rgba(160, 150, 255, .22); color: #cdc6ff; }
/* 나레이션 = 따뜻한 크림, 이탤릭 */
.cap-narr { font-weight: 600; }
.cap-narr .cap-txt { color: #f3ead4; font-style: italic; }
@keyframes capRise { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.preview-bar {
  display: flex; align-items: center; gap: 12px; width: min(78vh * 9 / 16 + 120px, 92vw);
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px;
}
.preview-ctl {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  border-radius: 8px; width: 38px; height: 34px; cursor: pointer; font-size: 14px; flex: none;
}
.preview-ctl:hover { border-color: var(--accent); }
.preview-ctl.loop { width: auto; min-width: 64px; padding: 0 10px; font-size: 12px; flex: none; }
.preview-time { font-size: 12.5px; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; min-width: 92px; }
.preview-seek { flex: 1; accent-color: var(--accent); cursor: pointer; }
.preview-scene { font-size: 12px; color: #cfe0ff; flex: none; min-width: 56px; text-align: right; }

/* =========================================================================
   씬 영상 편집기 모달 — 히스토리 클립 짜깁기 + V/A 분리 + 트림
   ========================================================================= */
.sr-vp-edit-btn {
  background: rgba(195,137,255,.18); color: #d4b6ff;
  border: 1px solid #c389ff55; border-radius: 6px; padding: 4px 9px;
  font-size: 11.5px; cursor: pointer; transition: all .12s ease;
  margin-left: 6px;
}
.sr-vp-edit-btn:hover { background: rgba(195,137,255,.32); border-color: #c389ff; }

.ve-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.78); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.ve-modal.hidden { display: none !important; }
.ve-modal-inner {
  width: 96vw; max-width: 1600px; height: 94vh; max-height: 1100px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden;
}
.ve-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.ve-title { font-size: 15px; font-weight: 600; color: var(--text); }
.ve-spacer { flex: 1; }
.ve-status { font-size: 12px; color: var(--muted); padding: 3px 9px;
  background: var(--panel-2); border-radius: 999px; border: 1px solid var(--border); }
.ve-status.processing { color: #ffd86c; border-color: #ffd86c55; background: rgba(255,216,108,.08); }
.ve-status.done { color: #6cd99d; border-color: #6cd99d55; background: rgba(108,217,157,.08); }
.ve-status.error { color: #ff6c6c; border-color: #ff6c6c55; background: rgba(255,108,108,.08); }
.ve-btn {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 12px; font-size: 12.5px; cursor: pointer; transition: all .12s ease;
}
.ve-btn:hover:not(:disabled) { border-color: var(--accent); }
.ve-btn:disabled { opacity: .35; cursor: not-allowed; }
.ve-btn.primary { background: var(--accent); color: #0b1023; border-color: var(--accent); font-weight: 700; }
.ve-btn.primary:hover:not(:disabled) { filter: brightness(1.1); }
.ve-btn.danger { color: #ff6c6c; border-color: #ff6c6c55; }
.ve-btn.danger:hover:not(:disabled) { background: rgba(255,108,108,.1); border-color: #ff6c6c; }
.ve-btn.ghost { background: transparent; }

/* 메인: 좌(인스펙터+타임라인+소스) + 우(영상 미리보기 풀 높이) */
.ve-main {
  display: flex; gap: 12px; padding: 12px 14px;
  flex: 1 1 auto; min-height: 0;
}
.ve-left {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px;
  min-width: 0; min-height: 0;
}
/* 우측 영상 컬럼 — height 가 메인 가용 영역(.ve-main)의 100%.
   wrap 의 aspect-ratio 가 9/16 이고 height 100% → 자식이 결정한 폭으로 컬럼이 좁아짐. */
.ve-preview-col {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 0; min-width: 0;
  height: 100%;
}
/* 9:16 박스 — height 가 컨트롤 행 빼고 남은 가용 영역. width 는 aspect-ratio 로 정확히 결정. */
.ve-preview-wrap {
  background: #000; border: 1px solid var(--border); border-radius: 10px;
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  aspect-ratio: 9 / 16;
  height: 100%;
  width: auto;
  align-self: flex-end;
}
.ve-preview { height: 100%; width: 100%; object-fit: contain; background: #000; display: block; }
.ve-preview-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 16px; margin: auto; }
.ve-preview-ctl {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; flex-shrink: 0;
}
.ve-preview-ctl {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px;
}
.ve-ctl-btn {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 12px; font-size: 13px; cursor: pointer;
}
.ve-ctl-btn:hover { border-color: var(--accent); }
.ve-ctl-btn.small { font-size: 11px; padding: 4px 9px; }
.ve-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 90px; }
.ve-scrub { flex: 1; accent-color: var(--accent); cursor: pointer; }
.ve-srcmode-label { font-size: 11.5px; color: var(--muted); }

.ve-inspector {
  width: 100%; flex: 0 0 auto; max-height: 240px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; padding: 10px;
  overflow: hidden;
}
.ve-insp-title { font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.ve-insp-body { flex: 1; overflow-y: auto; font-size: 12.5px; color: var(--text); }
.ve-insp-empty { color: var(--muted); text-align: center; padding: 30px 4px; }
.ve-insp-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ve-insp-field label { font-size: 11.5px; color: var(--muted); }
.ve-insp-field input[type="number"],
.ve-insp-field input[type="range"],
.ve-insp-field select {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px;
  font-size: 12.5px; font-family: inherit;
}
.ve-insp-field input[type="number"] { width: 90px; }
.ve-insp-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ve-insp-row .ve-btn { font-size: 11px; padding: 4px 8px; }

.ve-timeline-wrap {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; flex: 1 1 auto; min-height: 180px; overflow: hidden;
  transition: background .15s, border-color .15s;
}
/* 활성 영역 강조 — 사용자가 클릭한 영역(타임라인 vs 소스)에 BG 강조 */
.ve-timeline-wrap.active {
  background: rgba(123, 140, 255, 0.08);
  border-color: rgba(123, 140, 255, 0.45);
}
.ve-timeline-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
}
.ve-tl-title { font-size: 13px; font-weight: 600; }
.ve-total-dur {
  font-size: 12px; font-weight: 700; color: #ffe8a3;
  font-variant-numeric: tabular-nums;
  background: rgba(255,232,163,.1); border: 1px solid rgba(255,232,163,.35);
  padding: 2px 9px; border-radius: 999px;
}
.ve-tl-hint { font-size: 11px; color: var(--muted); flex: 1; }
.ve-zoom-label { font-size: 11px; color: var(--muted); }
.ve-zoom { width: 120px; accent-color: var(--accent); }
/* 그리드: 좌(라벨 24px 고정) + 우(가로 스크롤 영역) */
.ve-timeline-grid {
  display: grid;
  grid-template-columns: 26px 1fr;
  flex: 1 1 auto; min-height: 0; gap: 4px;
}
.ve-timeline-labels {
  display: flex; flex-direction: column; gap: 4px;
}
.ve-track-label-cell {
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  font-weight: 700; font-size: 12px; color: var(--muted);
  height: 70px;
}
.ve-track-label-cell.ruler { height: 18px; background: transparent; border: none; }
.ve-track-label-cell[data-track="V"] { color: #a3c2ff; border-color: #a3c2ff44; }
.ve-track-label-cell[data-track="A"] { color: #ffb86c; border-color: #ffb86c44; }
/* 우측 스크롤 영역 — 룰러·V·A 가 같은 가로 스크롤을 공유 */
.ve-timeline-scroll {
  overflow-x: auto; overflow-y: hidden; min-width: 0;
  scrollbar-width: thin;
}
.ve-timeline-inner {
  position: relative;
  min-width: 100%;
  display: flex; flex-direction: column; gap: 4px;
}
.ve-ruler {
  height: 18px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 4px; position: relative; overflow: hidden;
  font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  cursor: ew-resize;
  flex-shrink: 0;
}
.ve-ruler-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border); padding-left: 3px; }
.ve-track-lane {
  position: relative; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 6px;
  height: 70px; overflow: visible; cursor: pointer;
  transition: background .12s;
  flex-shrink: 0;
}
.ve-track-lane.drag-over { background: rgba(195,137,255,.08); border-color: var(--accent); }

.ve-clip {
  position: absolute; top: 4px; bottom: 4px;
  background: linear-gradient(180deg, rgba(123,140,255,.32) 0%, rgba(123,140,255,.18) 100%);
  border: 1px solid #7b8cff88; border-radius: 5px;
  font-size: 11px; color: #e8eaff;
  padding: 3px 8px 3px 10px; cursor: grab; overflow: hidden;
  user-select: none; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
}
.ve-clip:active { cursor: grabbing; }
.ve-clip.selected { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 5; }
.ve-clip.dragging { opacity: .5; }
.ve-track[data-track="A"] .ve-clip {
  background: linear-gradient(180deg, rgba(255,184,108,.28) 0%, rgba(255,184,108,.15) 100%);
  border-color: #ffb86c88; color: #ffe8c8;
}
.ve-clip-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.ve-clip-time { font-size: 10px; color: rgba(255,255,255,.65); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* 클립 호버 시 우상단 ✕ 삭제 버튼 */
.ve-clip-del {
  position: absolute; top: 3px; right: 8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  display: none; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; cursor: pointer; padding: 0;
  z-index: 6;
}
.ve-clip:hover .ve-clip-del { display: inline-flex; }
.ve-clip-del:hover { background: rgba(255, 80, 80, 0.85); border-color: #ff5050; }
.ve-clip-handle {
  position: absolute; top: 0; bottom: 0; width: 10px;
  cursor: ew-resize; background: rgba(255,255,255,.18);
  transition: background .12s ease, width .12s ease;
  display: flex; align-items: center; justify-content: center;
}
.ve-clip-handle::after {
  content: ""; width: 2px; height: 50%;
  background: rgba(255,255,255,.7); border-radius: 1px;
}
.ve-clip-handle.left { left: 0; border-radius: 5px 0 0 5px; }
.ve-clip-handle.right { right: 0; border-radius: 0 5px 5px 0; }
.ve-clip-handle:hover { background: rgba(255,255,255,.4); width: 12px; }
/* 통합 플레이헤드 — inner 안 절대 위치. 룰러부터 A 트랙 한참 아래까지 관통. */
.ve-global-playhead {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: #ff6cab; box-shadow: 0 0 8px rgba(255,108,171,.7);
  pointer-events: none; z-index: 20; left: 0;
}
/* 상단 화살표 (▼ — 아래로 향함, 라인을 가리킴) */
.ve-global-playhead::before {
  content: ""; position: absolute; top: -2px; left: -5px;
  width: 12px; height: 10px; background: #ff6cab;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 0 4px rgba(255,108,171,.7));
  pointer-events: none;
}
/* 하단 화살표 (▲ — 위로 향함, 라인을 가리킴). 상단과 동일 모양·크기·색. */
.ve-global-playhead::after {
  content: ""; position: absolute; bottom: 4px; left: -5px;
  width: 12px; height: 10px; background: #ff6cab;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  filter: drop-shadow(0 0 4px rgba(255,108,171,.7));
  pointer-events: none;
}
/* inner 의 하단에 빈 드래그 영역 — A 트랙 아래로도 축 이동 가능 (인디케이터 + 클릭 가능 영역) */
.ve-timeline-inner {
  padding-bottom: 28px;
  cursor: ew-resize;
}

/* 소스 클립 타임라인 — 소스 섹션 안 상단(헤더 아래). 별도 박스 X. */
.ve-source-tl-wrap {
  flex: 0 0 auto; margin-top: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.ve-source-tl-wrap.hidden { display: none; }
/* 타임라인이 보일 때 strip 위로 dashed 구분선 + 살짝 여백 */
.ve-source-tl-wrap:not(.hidden) + .ve-source-strip {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed rgba(99, 179, 237, 0.3);
}
.ve-source-tl-head { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.ve-source-tl-info { font-size: 12px; font-weight: 700; color: #ffe8a3;
  background: rgba(255,232,163,.1); border: 1px solid rgba(255,232,163,.35);
  padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.ve-source-tl-grid {
  display: grid; grid-template-columns: 26px 1fr; gap: 4px;
  align-items: stretch;
}
.ve-source-tl-label {
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid #63b3ed44; border-radius: 6px;
  font-weight: 700; font-size: 12px; color: #c8e0f4;
}
.ve-source-tl-scroll { overflow-x: auto; overflow-y: hidden; min-width: 0; }
.ve-source-tl-inner { position: relative; min-width: 100%;
  display: flex; flex-direction: column; gap: 4px; padding-bottom: 24px;
  cursor: ew-resize;
}
.ve-source-tl-ruler {
  height: 18px; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 4px; position: relative; overflow: hidden;
  font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  cursor: ew-resize;
}
.ve-source-tl-track {
  position: relative; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 6px;
  height: 48px;
}
/* 트림 박스 — 실제 사용 구간. 양쪽 핸들=in/out 조정.
   가운데(손모양)는 위쪽 V/A 트랙으로 드래그해서 트림된 채 붙여넣기. */
.ve-source-tl-trim {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(99,179,237,.4), rgba(99,179,237,.2));
  border-top: 2px solid #63b3ed; border-bottom: 2px solid #63b3ed;
  cursor: grab; box-sizing: border-box;
}
.ve-source-tl-trim:active { cursor: grabbing; }
.ve-source-tl-trim.dragging { opacity: .55; }
.ve-source-tl-trim-handle {
  position: absolute; top: 0; bottom: 0; width: 10px;
  background: rgba(255,255,255,.25); cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
}
.ve-source-tl-trim-handle::after {
  content: ""; width: 2px; height: 50%; background: #fff; border-radius: 1px;
}
.ve-source-tl-trim-handle.left { left: 0; border-radius: 5px 0 0 5px; }
.ve-source-tl-trim-handle.right { right: 0; border-radius: 0 5px 5px 0; }
.ve-source-tl-trim-handle:hover { background: rgba(255,255,255,.45); }

.ve-source-wrap {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; flex: 0 0 auto;
  transition: background .15s, border-color .15s;
}
.ve-source-wrap.active {
  background: rgba(99, 179, 237, 0.08);
  border-color: rgba(99, 179, 237, 0.5);
}
.ve-source-item.selected {
  border-color: #63b3ed;
  outline: 2px solid rgba(99, 179, 237, 0.5);
  transform: translateY(-2px);
}
.ve-source-head { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.ve-source-strip {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  min-height: 84px;
}
.ve-source-item {
  flex: none; width: 64px; height: 114px; cursor: grab;
  background: #000; border: 1px solid var(--border); border-radius: 8px;
  position: relative; overflow: hidden;
  transition: border-color .12s, transform .12s;
}
.ve-source-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.ve-source-item:active { cursor: grabbing; }
.ve-source-item video {
  width: 100%; height: 100%; object-fit: cover; pointer-events: none;
}
.ve-source-item.dragging { opacity: .5; }
.ve-source-num {
  position: absolute; left: 4px; top: 4px; z-index: 2;
  background: rgba(0,0,0,.8); color: #ffe; font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 1px 6px; border: 1px solid rgba(255,255,255,.2);
}
.ve-source-item-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 100%);
  color: #fff; font-size: 9.5px;
  padding: 14px 4px 3px; line-height: 1.2;
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.ve-source-dur { font-weight: 700; font-size: 10.5px; color: #ffe8a3; }
.ve-source-date { color: rgba(255,255,255,.6); }
.ve-source-empty { color: var(--muted); font-size: 12px; padding: 20px; text-align: center; width: 100%; }

/* 인스펙터 — 요약 + 트랙 태그 */
.ve-insp-summary {
  display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border); font-size: 12px;
}
.ve-insp-track-tag {
  padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 10.5px;
}
.ve-insp-track-tag.v { background: rgba(123,140,255,.22); color: #a3c2ff; border: 1px solid #a3c2ff44; }
.ve-insp-track-tag.a { background: rgba(255,184,108,.22); color: #ffd29a; border: 1px solid #ffb86c55; }
.ve-insp-dur { color: var(--muted); }
.ve-insp-vol { font-variant-numeric: tabular-nums; color: var(--accent); }

/* ============ 부분 재생성 모달 ============ */
.pr-card {
  background: var(--bg-panel, #1a1d24);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(1860px, 97vw);
  min-height: 92vh;
  max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.pr-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.pr-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.pr-head-meta { color: var(--muted); font-size: 12.5px; }
.pr-head-sheets {
  flex: 1; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; min-width: 0;
}
.pr-head-sheets .pr-sheet-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px 2px 2px;
  background: rgba(255,155,108,.08);
  border: 1px solid rgba(255,155,108,.35);
  border-radius: 999px;
  font-size: 11.5px; color: #ffd29a;
  max-width: 220px;
}
.pr-head-sheets .pr-sheet-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; background: var(--panel-2);
  flex-shrink: 0;
}
.pr-head-sheets .pr-sheet-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pr-body {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 380px auto auto auto;
  grid-auto-flow: dense;
  gap: 10px;
  padding: 12px 14px;
  flex: 1; min-height: 0;
  justify-content: start;
}
/* 모든 컬럼은 row 1 강제 — 역방향 grid-column 매핑 시 새 row 생성 방지 */
.pr-body > .pr-col { grid-row: 1; }
/* prefix 모드 (앞부분 재생성): [이전씬 neighbor] | regen | keep */
.pr-body.mode-prefix [data-pr-pos="neighbor"] { grid-column: 3; }
.pr-body.mode-prefix [data-pr-pos="regen"]    { grid-column: 4; }
.pr-body.mode-prefix [data-pr-pos="keep"]     { grid-column: 5; }
/* middle 모드 (양쪽 자동 ref): [head=neighbor] | regen | [tail=keep] */
.pr-body.mode-middle [data-pr-pos="neighbor"] { grid-column: 3; }
.pr-body.mode-middle [data-pr-pos="regen"]    { grid-column: 4; }
.pr-body.mode-middle [data-pr-pos="keep"]     { grid-column: 5; }
/* suffix 모드 (뒷부분 재생성): keep | regen | [다음씬 neighbor] — 재생 순서 좌→우 */
.pr-body.mode-suffix [data-pr-pos="keep"]     { grid-column: 3; }
.pr-body.mode-suffix [data-pr-pos="regen"]    { grid-column: 4; }
.pr-body.mode-suffix [data-pr-pos="neighbor"] { grid-column: 5; }

/* neighbor 드롭존 */
.pr-neighbor-label { color: #a3c2ff; }
/* middle 모드 — neighbor 슬롯이 '유지 구간 (앞부분)' 으로 의미가 바뀜 → keep 과 같은 톤 */
.pr-body.mode-middle .pr-neighbor-label { color: #7bd88f; }
.pr-neighbor-del {
  background: transparent; border: 0; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 0 4px;
  margin-left: auto;
}
.pr-neighbor-del:hover { color: var(--err); }
.pr-neighbor-drop {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  height: clamp(370px, 61vh, 610px);
  width: calc(clamp(370px, 61vh, 610px) * 9 / 16);
  border: 1px dashed rgba(163,194,255,.45);
  border-radius: 6px;
  background: rgba(163,194,255,.04);
  cursor: pointer;
  overflow: hidden;
}
.pr-neighbor-drop.dragover { border-color: #a3c2ff; background: rgba(163,194,255,.15); }
.pr-neighbor-drop.has-video { cursor: default; border-style: solid; }
.pr-neighbor-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  color: var(--muted);
  text-align: center;
  padding: 20px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
}
.pr-neighbor-ico { font-size: 32px; color: #a3c2ff; line-height: 1; }
.pr-neighbor-msg { font-size: 12.5px; color: var(--text); }
.pr-neighbor-hint { font-size: 11px; color: var(--muted); }
.pr-neighbor-drop.has-video .pr-neighbor-placeholder { display: none; }
.pr-neighbor-drop video {
  width: 100%; height: 100%; object-fit: contain; background: #000;
}
.pr-col {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 0;
}
.pr-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  border-radius: 8px 8px 0 0;
}
.pr-col-label { font-weight: 700; font-size: 13px; }
.pr-regen-label { color: #ff9b6c; }
.pr-keep-label { color: #7bd88f; }
.pr-mode-toggle {
  margin-left: auto;
  display: inline-flex; gap: 0;
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.pr-mode-btn {
  background: transparent; color: var(--muted);
  border: 0;
  padding: 4px 12px; font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.pr-mode-btn.active {
  background: rgba(123,140,255,.22);
  color: #a3c2ff;
}
.pr-mode-btn:hover:not(.active) { background: rgba(255,255,255,.05); }

/* 영상 프롬프트 컬럼 — 상단: 프롬프트 텍스트(scrollable), 하단: 참고 이미지 2×2 (고정) */
.pr-prompt-col { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.pr-prompt-stat { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
.pr-prompt-text {
  flex: 1 1 0; min-height: 0;
  margin: 0;
  padding: 12px 14px;
  background: rgba(0,0,0,.25);
  border: 0;
  border-radius: 0;
  color: var(--text);
  font-family: ui-monospace, "Consolas", monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
}
/* 부분 재생성 모달 — 참고 이미지 2×2 (씬 카드의 4-in-a-row 와 동일한 endpoint 사용) */
.pr-refimg-row {
  flex: 0 0 auto;
  margin-top: 8px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
}
.pr-refimg-head { font-size: 12px; color: var(--text); margin-bottom: 8px; }
.pr-refimg-head .muted { font-weight: 400; margin-left: 4px; font-size: 11px; }
.pr-refimg-slots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.pr-refimg-slot {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--panel-2); border: 1px dashed var(--border); border-radius: 8px;
  cursor: pointer; overflow: hidden; transition: border-color .12s, background .12s;
  display: flex; align-items: center; justify-content: center;
}
.pr-refimg-slot:hover { border-color: #6cb6ff; background: rgba(108,182,255,.06); }
.pr-refimg-slot.dragover {
  border-color: #6cb6ff; background: rgba(108,182,255,.18);
  box-shadow: 0 0 0 2px rgba(108,182,255,.4) inset;
}
.pr-refimg-slot.filled { border-style: solid; border-color: rgba(108,255,168,.45); }
.pr-refimg-placeholder {
  color: var(--muted); font-size: 20px; text-align: center; line-height: 1.3;
}
.pr-refimg-placeholder .muted { font-size: 10px; display: block; margin-top: 4px; }
.pr-refimg-preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pr-refimg-desc {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 6px; background: rgba(0,0,0,.65); color: #fff;
  font-size: 10.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pr-refimg-del {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.7); color: #fff; border: 1px solid #fff;
  font-size: 11px; line-height: 1; cursor: pointer;
}
.pr-refimg-del:hover { background: rgba(255,108,108,.85); }
.pr-prompt-text:empty::before {
  content: "SHOT 을 선택하세요";
  color: var(--muted);
}
.pr-prompt-text .pr-prompt-shot-hd {
  color: #ff9b6c; font-weight: 700; display: block; margin-top: 8px;
}
.pr-prompt-text .pr-prompt-header {
  color: #a3c2ff;
}

.pr-shots-col { min-width: 0; }
.pr-shots-list {
  flex: 1; overflow-y: auto;
  padding: 8px 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.pr-shot-item {
  display: grid;
  grid-template-columns: 18px 28px 1fr 88px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 54px;
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  transition: background .12s, border-color .12s;
  line-height: 1.45;
}
.pr-shot-item:hover { background: rgba(255,255,255,.07); }
.pr-shot-item.selected {
  background: rgba(255,155,108,.16);
  border-color: rgba(255,155,108,.5);
}
.pr-shot-item.locked { opacity: .55; cursor: default; }
.pr-shot-item .pr-shot-check {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: transparent;
  align-self: center;
}
.pr-shot-item.selected .pr-shot-check {
  background: #ff9b6c; border-color: #ff9b6c; color: #1a1d24;
}
.pr-shot-num {
  font-weight: 800; color: var(--accent);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  align-self: center;
}
.pr-shot-label {
  min-width: 0;
  white-space: normal; word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  align-self: center;
}
.pr-shot-sec {
  color: var(--muted); font-size: 11px;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
  align-self: center;
}
/* 입력 + 세로 ▲▼ 스테퍼 셀 (SHOT 분해 페이지 패턴 차용, 좀 더 컴팩트) */
.pr-sec-cell {
  display: inline-flex; align-items: stretch;
  background: var(--panel);
  border: 1px solid rgba(255,155,108,.5);
  border-radius: 5px;
  overflow: hidden;
  height: 32px;
}
.pr-sec-cell:focus-within { border-color: #ff9b6c; }
.pr-shot-sec-input {
  width: 44px; padding: 0 6px;
  background: transparent; border: 0; outline: none;
  color: #ffd29a;
  font-family: ui-monospace, monospace;
  font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  -moz-appearance: textfield;
}
.pr-shot-sec-input::-webkit-inner-spin-button,
.pr-shot-sec-input::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.pr-sec-stepper {
  display: flex; flex-direction: column;
  border-left: 1px solid rgba(255,155,108,.4);
  width: 18px;
}
.pr-sec-step {
  flex: 1; width: 18px; padding: 0; margin: 0;
  background: rgba(255,155,108,.10);
  border: 0; border-radius: 0;
  color: #ffb38f; cursor: pointer;
  font-size: 8px; line-height: 1; user-select: none;
  display: flex; align-items: center; justify-content: center;
}
.pr-sec-step.up { border-bottom: 1px solid rgba(255,155,108,.4); }
.pr-sec-step:hover { background: rgba(255,155,108,.28); color: #fff; }
.pr-sec-step:active { background: rgba(255,155,108,.5); }
.pr-shot-sec-dirty { color: #ff9b6c; font-weight: 700; margin-left: 2px; }

/* 경계 offset 표시 — 첫/마지막 regen shot 아래 (체크박스 아래) */
.pr-shot-adj-row {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex; justify-content: space-between;
  padding-top: 4px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.pr-shot-adj-badge {
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
}
.pr-shot-adj-badge.left { color: #a3c2ff; background: rgba(163,194,255,.12); }
.pr-shot-adj-badge.right { color: #ff9b6c; background: rgba(255,155,108,.12); margin-left: auto; }
.pr-shots-foot {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
.pr-shots-summary { line-height: 1.6; }
.pr-shots-summary .pr-tag-regen { color: #ff9b6c; font-weight: 700; }
.pr-shots-summary .pr-tag-keep { color: #7bd88f; font-weight: 700; }

.pr-preview-col { width: auto; }
.pr-preview-wrap {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 10px 0;
  gap: 8px;
  min-height: 0;
  align-items: center;
}
.pr-preview-video {
  display: block;
  height: clamp(370px, 61vh, 610px);
  width: calc(clamp(370px, 61vh, 610px) * 9 / 16);
  background: #000;
  border-radius: 6px;
  border: 1px solid var(--border);
  object-fit: contain;
}
.pr-preview-wrap .pr-ctrl,
.pr-preview-wrap .pr-preview-info {
  width: 100%;
  max-width: calc(clamp(370px, 61vh, 610px) * 9 / 16);
}
.pr-preview-info {
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* SHOT 선택 헤더의 ↻ 시간 원복 버튼 */
.pr-sec-reset {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 24px; height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.pr-sec-reset:hover { color: var(--text); border-color: #a3c2ff; background: rgba(163,194,255,.08); }
.pr-sec-reset:active { transform: rotate(-180deg); transition: transform .25s; }

/* regen 미리보기 info 행 — 양쪽 ±버튼 + 가운데 클립 길이 */
.pr-regen-info-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.pr-regen-info-row > #prRegenInfo { flex: 1; text-align: center; }
.pr-regen-adjust-group {
  display: inline-flex; gap: 0;
}
.pr-regen-adjust-group .pr-regen-adjust + .pr-regen-adjust { margin-left: -1px; border-radius: 0 4px 4px 0; }
.pr-regen-adjust-group .pr-regen-adjust:first-child { border-radius: 4px 0 0 4px; }
.pr-regen-adjust-group.hidden { visibility: hidden; }
.pr-regen-adjust {
  background: rgba(255,155,108,.14);
  border: 1px solid rgba(255,155,108,.5);
  color: #ffb38f;
  width: 22px; height: 22px;
  font-size: 13px; font-weight: 800; line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.pr-regen-adjust:hover { background: rgba(255,155,108,.28); }
.pr-regen-adjust:active { transform: translateY(1px); }
.pr-regen-adjust:disabled { opacity: .35; cursor: not-allowed; }

/* 커스텀 컨트롤 — 클립 길이 기준(소수점 0.1초 표시) */
.pr-ctrl {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px;
  background: rgba(0,0,0,.5);
  border-radius: 4px;
}
.pr-ctrl .pr-play {
  background: transparent; border: 0; color: #fff;
  font-size: 14px; padding: 2px 8px; cursor: pointer;
  border-radius: 4px; flex-shrink: 0;
}
.pr-ctrl .pr-play:hover { background: rgba(255,255,255,.12); }
.pr-ctrl .pr-seek {
  flex: 1; height: 18px; margin: 0;
  cursor: pointer; accent-color: #ff9b6c;
}
.pr-ctrl .pr-time {
  color: #fff; font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  min-width: 78px; text-align: right; flex-shrink: 0;
}

.pr-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.pr-foot .muted { flex: 1; font-size: 12px; }
.pr-status { font-size: 12px; }
.pr-status.processing { color: #ffd29a; }
.pr-status.error { color: #ff8a8a; }
.pr-status.done { color: #7bd88f; }
#prRegenBtn { padding: 8px 16px; font-size: 13px; font-weight: 700; }
#prRegenBtn:disabled { opacity: .5; cursor: not-allowed; }

/* 영상 박스 ✄ 부분 재생성 버튼 — .sr-vp-seedance 와 동일 사이즈/스타일 */
.sr-vp-partial-btn {
  font-size: 11.5px; padding: 3px 9px; border-radius: 6px;
  background: var(--panel);
  border: 1px solid #ff8c5a55;
  color: #ffb38a;
  cursor: pointer;
}
.sr-vp-partial-btn:hover { border-color: #ff8c5a; background: rgba(255,140,90,.1); }
.sr-vp-partial-btn:disabled { opacity: .55; cursor: default; }
.sr-vp-partial-btn.hidden { display: none; }

/* 영상 박스 ✎ 부분 수정 생성 버튼 */
.sr-vp-modify-btn {
  font-size: 11.5px; padding: 3px 9px; border-radius: 6px;
  background: var(--panel);
  border: 1px solid #7bd88f55;
  color: #a7e6b6;
  cursor: pointer;
}
.sr-vp-modify-btn:hover { border-color: #7bd88f; background: rgba(123,216,143,.1); }
.sr-vp-modify-btn:disabled { opacity: .55; cursor: default; }
.sr-vp-modify-btn.hidden { display: none; }

/* ============ 부분 수정 생성 모달 (mr-*) ============ */
.mr-card {
  background: var(--bg-panel, #1a1d24);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(1860px, 97vw);
  min-height: 92vh; max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.mr-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.mr-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.mr-head-meta { color: var(--muted); font-size: 12.5px; }
.mr-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(440px, 480px) auto minmax(260px, 0.9fr);
  gap: 10px;
  padding: 12px 14px;
  flex: 1; min-height: 0;
}
.mr-col {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px 10px;
  min-height: 0;
}
.mr-col-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.mr-col-label { font-size: 12px; font-weight: 700; color: var(--text); flex: 1; }
/* 수정 생성 구간 col-head — label 은 왼쪽 (자연 폭), range 는 오른쪽 */
.mr-preview-col .mr-col-label { flex: 0 0 auto; }
.mr-regen-range { font-size: 11.5px; margin-left: auto; font-variant-numeric: tabular-nums; }
.mr-prompt-text {
  flex: 1; min-height: 200px;
  width: 100%; resize: none;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 8px; font-size: 12.5px; font-family: ui-monospace, Menlo, Consolas, monospace;
  line-height: 1.55;
}
.mr-prompt-stat { text-align: right; font-size: 11px; margin-top: 4px; }
.mr-shots-list {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 200px;
}
.mr-shot-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px;
  min-height: 48px;
  background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 12.5px;
  cursor: pointer;
  position: relative;
}
.mr-shot-row:hover { border-color: #7bd88f88; }
.mr-shot-row.selected {
  background: rgba(123,216,143,.10);
  border-color: #7bd88f;
}
.mr-shot-ord {
  color: var(--muted); min-width: 22px; text-align: right;
  padding-top: 2px; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.mr-shot-label {
  flex: 1; min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  white-space: normal; word-break: break-word;
  line-height: 1.45;
  padding-top: 1px;
}
.mr-shot-sec { display: inline-flex; align-items: center; gap: 2px; min-width: 64px; justify-content: flex-end; flex-shrink: 0; padding-top: 1px; }
.mr-shot-sec-input {
  width: 50px; padding: 1px 3px; font-size: 11.5px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  color: var(--text);
}
.mr-sec-stepper { display: inline-flex; flex-direction: column; }
.mr-sec-step {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  width: 14px; height: 11px; padding: 0; line-height: 1; font-size: 8px; cursor: pointer;
}
.mr-sec-step:hover { color: var(--text); border-color: #7bd88f; }
.mr-sec-reset {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  width: 22px; height: 22px; border-radius: 4px; font-size: 12px; cursor: pointer;
}
.mr-sec-reset:hover { color: var(--text); border-color: #7bd88f; }
.mr-shot-adj-badge {
  position: absolute; font-size: 10px; color: #ffd29a;
  background: rgba(255,210,154,.15); border: 1px solid #ffd29a66;
  padding: 0 4px; border-radius: 3px;
}
.mr-shot-adj-badge.left  { left: -8px;  top: -8px; }
.mr-shot-adj-badge.right { right: -8px; top: -8px; }
.mr-shots-summary { margin-top: 6px; font-size: 11.5px; }
.mr-preview-col { align-items: center; }
.mr-preview-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  /* 비디오와 동일한 폭으로 고정 — info row 길이에 따라 좌우 흔들림 방지 */
  width: calc(clamp(330px, 56vh, 580px) * 9 / 16);
}
.mr-preview-video {
  width: 100%;
  height: clamp(330px, 56vh, 580px);
  object-fit: contain; background: #000;
  border: 1px solid var(--border); border-radius: 5px;
}
.mr-ctrl {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 4px 0;
}
.mr-play {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  width: 26px; height: 22px; border-radius: 4px; font-size: 11px; cursor: pointer;
}
.mr-play:hover { border-color: #7bd88f; }
.mr-seek { flex: 1; }
.mr-time { font-size: 11px; color: var(--muted); min-width: 78px; text-align: right; font-variant-numeric: tabular-nums; }
.mr-preview-info { font-size: 12px; color: var(--muted); width: 100%; }
.mr-regen-info-row {
  display: flex; align-items: center; gap: 6px; justify-content: space-between;
}
.mr-regen-info-row > #mrRegenInfo { flex: 1; text-align: center; }
.mr-regen-adjust-group { display: inline-flex; }
.mr-regen-adjust {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  width: 22px; height: 22px; padding: 0; font-size: 12px; cursor: pointer;
}
.mr-regen-adjust:hover { border-color: #7bd88f; }
.mr-regen-adjust-group .mr-regen-adjust + .mr-regen-adjust { margin-left: -1px; border-radius: 0 4px 4px 0; }
.mr-regen-adjust-group .mr-regen-adjust:first-child { border-radius: 4px 0 0 4px; }

/* 채팅 컬럼 */
.mr-chat-col { min-width: 0; }
.mr-chat-log {
  flex: 1; min-height: 0; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px;
}
.mr-chat-msg {
  display: flex; gap: 6px; align-items: flex-start;
  padding: 5px 7px; border-radius: 5px;
  line-height: 1.5;
}
.mr-chat-msg.user { background: rgba(123,140,255,.10); border: 1px solid rgba(123,140,255,.30); }
.mr-chat-msg.ai   { background: rgba(123,216,143,.08); border: 1px solid rgba(123,216,143,.25); }
.mr-chat-who { flex-shrink: 0; font-size: 13px; }
.mr-chat-body { flex: 1; white-space: pre-wrap; word-break: break-word; }
.mr-chat-loading { font-size: 11.5px; text-align: center; padding: 8px; }
.mr-chat-input-row { display: flex; gap: 6px; margin-top: 6px; }
.mr-chat-input {
  flex: 1; resize: none;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 8px; font-size: 12.5px; line-height: 1.5;
  font-family: inherit;
}
.mr-chat-send { padding: 6px 12px; font-size: 12px; font-weight: 700; }
.mr-chat-send:disabled { opacity: .55; cursor: default; }
.ghost-mini {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  width: 22px; height: 22px; border-radius: 4px; font-size: 12px; cursor: pointer; padding: 0;
}
.ghost-mini:hover { color: var(--text); border-color: #7bd88f; }

.mr-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--border);
}
.mr-foot .muted { flex: 1; font-size: 12px; }
.mr-status { font-size: 12px; }
.mr-status.processing { color: #ffd29a; }
.mr-status.error { color: #ff8a8a; }
.mr-status.done { color: #7bd88f; }
#mrRegenBtn { padding: 8px 16px; font-size: 13px; font-weight: 700; }
#mrRegenBtn:disabled { opacity: .5; cursor: not-allowed; }

/* ========== Login overlay (Phase Auth1) ========== */
.login-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(9,9,11,.95);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.login-overlay.hidden { display: none; }
.login-card {
  width: 380px; max-width: 90vw;
  background: #18181b; border: 1px solid #27272a; border-radius: 16px;
  padding: 40px 32px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 12px;
}
.login-brand {
  font-size: 22px; font-weight: 800; text-align: center;
  background: linear-gradient(135deg,#3b82f6,#8b5cf6,#ec4899);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: -4px;
}
.login-sub { text-align: center; color: #71717a; font-size: 13px; margin-bottom: 12px; }
.login-card input {
  background: #27272a; border: 1px solid #3f3f46; border-radius: 10px;
  padding: 12px 14px; color: #f4f4f5; font-size: 14px;
  outline: none; transition: border-color .15s;
}
.login-card input:focus { border-color: #6366f1; }
#loginCodeBox { display: flex; flex-direction: column; gap: 12px; }
.login-card button#loginBtn {
  background: linear-gradient(135deg,#3b82f6,#8b5cf6);
  color: #fff; border: none; border-radius: 10px;
  padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform .1s;
}
.login-card button#loginBtn:hover { transform: translateY(-1px); }
.login-card button#loginBtn:disabled { opacity: .5; cursor: wait; transform: none; }
.login-reset {
  background: transparent; border: 1px solid #3f3f46; color: #a1a1aa;
  border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.login-reset:hover { border-color: #6366f1; color: #c7d2fe; }
.login-msg { color: #ef4444; font-size: 12px; min-height: 16px; text-align: center; }
.login-msg.ok { color: #22c55e; }
.login-sep {
  text-align: center; color: #52525b; font-size: 11px;
  margin: 8px 0; position: relative;
}
.login-sep::before, .login-sep::after {
  content: ''; position: absolute; top: 50%;
  width: calc(50% - 30px); height: 1px; background: #27272a;
}
.login-sep::before { left: 0; }
.login-sep::after { right: 0; }
#googleBtnContainer { display: flex; justify-content: center; min-height: 44px; }

/* 사용자 정보 + 로그아웃 (topnav 안) */
.user-info {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; padding-right: 12px;
}
.user-email { color: #a1a1aa; font-size: 12px; }
.user-logout {
  background: transparent; border: 1px solid #3f3f46; color: #a1a1aa;
  padding: 4px 10px; font-size: 11px; border-radius: 6px; cursor: pointer;
}
.user-logout:hover { color: #ef4444; border-color: #ef4444; }