/* ============================================
   TubeClaws Studio - Vrew-style Video Editor UI
   ============================================ */

/* ─── 자막 폰트 @font-face : JS 동적 로드로 대체 ─── */

/* CSS 변수 정의 (tools.html 모달 호환용 - 다크 테마 고정) */
:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --bg-tertiary: #1a1a1a;
  --text-primary: #e0e0e0;
  --text-secondary: #888888;
  --text-muted: #555555;
  --border-color: rgba(255, 255, 255, 0.12);
  --primary-color: #dc2626;
  --primary-hover: #b91c1c;
  --success-color: #22c55e;
  --error-color: #ef4444;
  --warning-color: #fbbf24;
  --grade-1: #10b981;
  --grade-2: #3b82f6;
  --grade-3: #f59e0b;
  --grade-4: #ef4444;
  --grade-5: #991b1b;
  --ratio-purple: #8b5cf6;
  /* STT/자막 편집 UI 변수 (라이트 기본) */
  --stt-app-bg: #f6f7fb;
  --stt-panel-bg: #ffffff;
  --stt-card-bg: #f8fafc;
  --stt-card-hover: #f1f5f9;
  --stt-card-active: #eff6ff;
  --stt-accent: #dc2626;
  --stt-accent-weak: rgba(220, 38, 38, 0.12);
  --stt-muted: #6b7280;
  --stt-border: rgba(0, 0, 0, 0.08);
  --stt-active-bar: #dc2626;
}

/* 다크 테마 STT 변수 오버라이드 */
body.dark-theme {
  --stt-app-bg: #111111;
  --stt-panel-bg: #1a1a1a;
  --stt-card-bg: #1e1e1e;
  --stt-card-hover: #262626;
  --stt-card-active: #2a2a2a;
  --stt-accent: #dc2626;
  --stt-accent-weak: rgba(220, 38, 38, 0.15);
  --stt-muted: #9ca3af;
  --stt-border: rgba(255, 255, 255, 0.08);
  --stt-active-bar: #dc2626;
}

/* PD 키워드 태그 칩 */
.pd-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-size: 0.85rem;
  color: #e0e0e0;
  white-space: nowrap;
}
.pd-tag-chip button {
  background: none;
  border: none;
  color: #888;
  font-size: 17px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.pd-tag-chip button:hover {
  color: #fff;
}

/* PD 자동 기획 폼 - select/option/input 다크 테마 */
#pdInputForm select,
#pdInputForm input[type="text"] {
  background: #141414 !important;
  color: #e0e0e0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
#pdInputForm select option {
  background: #1a1a1a;
  color: #e0e0e0;
}
#pdInputForm select:focus,
#pdInputForm input[type="text"]:focus {
  background: #141414 !important;
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}
#pdInputForm input[type="text"]:-webkit-autofill,
#pdInputForm input[type="text"]:-webkit-autofill:hover,
#pdInputForm input[type="text"]:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #141414 inset !important;
  -webkit-text-fill-color: #e0e0e0 !important;
  background-color: #141414 !important;
}

/* Reset & Full-screen app layout */
html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden;
  background: #0a0a0a;
  color: #e0e0e0;
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  user-select: none;
}
body { display: flex; }

*, *::before, *::after {
  box-sizing: border-box;
}

/* ─── App Shell ─── */
.studio-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  flex: 1;
  min-width: 0;
}

/* studio-logo, studio-logo-refresh 삭제됨 — 네비게이션으로 대체 */

.tier-dev {
  background: #7c3aed;
  color: #fff;
}
.tier-mgr {
  background: #2563eb;
  color: #fff;
}
.tier-premium {
  background: #b45309;
  color: #fde68a;
}
.tier-pro {
  background: #059669;
  color: #fff;
}
.tier-free {
  background: #333;
  color: #888;
}

/* .studio-logo span 삭제됨 */

.studio-menu-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  height: 28px;
  border: none;
  background: transparent;
  color: #bbb;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.studio-menu-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.studio-menu-btn.active {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

.studio-menu-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* 실험실 하위 탭 (2026-09-17) — 툴바 줄 왼쪽. 실험실에 있을 때만 펼친다(lab-gate.js 가 .is-open).
   비관리자 숨김은 admin-only.css 가 !important 로 따로 한다. */
.studio-lab-tabs {
  display: none;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-right: 8px;
  margin-right: 2px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.studio-lab-tabs.is-open {
  display: flex;
}

/* 채널 선택 — 메뉴바가 없어져 툴바 줄 오른쪽 끝으로 내려왔다. */
.studio-toolbar-channel {
  margin-left: auto;
  flex-shrink: 0;
}
.studio-toolbar-channel .studio-channel-selector {
  margin-right: 0;
}
/* 툴바 줄에서는 폭을 줄인다 — 200px 그대로면 제작 툴바가 한 번 더 접히는 폭 구간이 생긴다(2200·1440px 실측). */
.studio-toolbar-channel .channel-selector-btn {
  min-width: 0;
  padding: 6px 10px;
  gap: 6px;
}
.studio-toolbar-channel .channel-label {
  display: none;
}
.studio-toolbar-channel .channel-name {
  max-width: 120px;
  font-size: 15px;
}

/* ─── Toolbar ─── */
.studio-toolbar {
  display: flex;
  align-items: center;
  min-height: 50px;
  background: #111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 12px;
  margin-bottom: 6px;
  gap: 6px;
  overflow: visible;
  position: relative;
  z-index: 100;
}

.studio-toolbar::-webkit-scrollbar {
  height: 0;
}

/* 프로젝트 메뉴 (좌측 고정 드롭다운) */
.toolbar-project-menu {
  position: relative;
  flex-shrink: 0;
}

.project-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 4px;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.project-menu-dropdown.open {
  display: block;
}

.project-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  color: #ccc;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s;
}

.project-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.project-menu-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.project-menu-item span {
  flex: 1;
  text-align: left;
}

.project-menu-item kbd {
  font-size: 14px;
  color: #666;
  font-family: inherit;
}

.project-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}

.toolbar-content {
    display: none;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 74px;
  }

.toolbar-content.active {
  display: flex;
}

/* Voice toolbar: left/right split layout */
.studio-toolbar-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.studio-toolbar-left,
.studio-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.studio-toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

.studio-toolbar-right {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.studio-toolbar-row-rich {
  align-items: stretch;
  gap: 10px;
  flex-wrap: nowrap;
}

.studio-toolbar-row-rich .studio-toolbar-left,
.studio-toolbar-row-rich .studio-toolbar-right {
  flex-wrap: nowrap;
  align-items: stretch;
}

.studio-toolbar-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  min-height: 82px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    rgba(8, 8, 8, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.studio-toolbar-left .studio-toolbar-group {
  flex: 0 0 auto;
}

.studio-toolbar-right .studio-toolbar-group {
  flex: 0 0 auto;
}

.studio-toolbar-group-body {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 58px;
}

.studio-toolbar-group .toolbar-divider {
  display: none;
}

.studio-toolbar-group-title {
  display: none;
}

/* 툴바가 안 들어가면 줄을 바꾼다.
   예전엔 nowrap 이라 안 들어간 만큼이 **화면 밖으로 조용히 밀려났다** — 1920 에서는
   '렌더' 버튼을 누를 수 없었고, 3840(배율 150%)에서도 자막 편집 그룹이 들어오면서
   잘렸다. .studio-toolbar-row 의 width:100% 를 풀어야 "필요할 때만" 바뀐다
   (100% 면 넓은 화면에서도 무조건 둘째 줄로 내려간다).
   가로 스크롤은 답이 아니다 — 툴바 안 색상·템플릿·제목 팝오버가 position:absolute 라
   스크롤 컨테이너가 생기는 순간 통째로 잘린다. */
#toolbar-voice {
  flex-wrap: wrap;
  row-gap: 6px;
}

#toolbar-voice .studio-toolbar-row {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* whisper(영상) 워크플로우에서 대상이 없는 버튼은 접는다. 폭도 폭이지만,
   무음컷이 두 개가 되는 것이 더 나쁘다 — 이쪽은 TTS 합본 '음성'을 압축하는
   기능이라 자막추출 화면에는 합본 자체가 없다.
   '조절'(이미지 확대/이동)도 현재 문장의 이미지를 만지는데, 이 화면 프리뷰는 영상이다.
   '줌팬 효과'도 이미지 클립에만 걸리는데, 이 화면은 클립에 이미지를 넣을 수 없다
   (media-panel 이 whisper 에서 문장 배정을 막는다). */
#toolbar-voice.is-whisper #ttsTrimSilenceBtn,
#toolbar-voice.is-whisper #imgAdjustBtn,
#toolbar-voice.is-whisper #studioZoompanBtnHome {
  display: none;
}

/* 자막 편집 그룹 — 라벨과 검색창은 버튼처럼 늘리지 않고 가운데에 둔다.
   (.studio-toolbar-group-body 는 align-items:stretch 라 input 이 58px 로 늘어난다) */
.studio-toolbar-group-stt .studio-toolbar-group-body {
  align-items: center;
}

/* 툴바는 flex-wrap:nowrap 이라 늘어나는 폭이 곧 넘침이다. 포커스 확장을 끄고
   패널에 있을 때보다 조금만 넓힌다. */
.studio-toolbar-group-stt .stt-search-input {
  width: 120px;
}

.studio-toolbar-group-stt .stt-search-input:focus {
  width: 120px;
}

.studio-toolbar-slider-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  min-height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#toolbar-voice {
  overflow: visible;
  scrollbar-width: thin;
}

#toolbar-voice .studio-toolbar-row-rich {
  min-width: max-content;
  flex-wrap: nowrap !important;
  overflow: visible;
}

#toolbar-voice .studio-toolbar-left,
#toolbar-voice .studio-toolbar-right {
  flex-wrap: nowrap !important;
  width: auto !important;
  align-items: stretch !important;
  overflow: visible;
}

#toolbar-voice .studio-toolbar-group {
  width: auto !important;
}

#toolbar-voice .studio-toolbar-group-body,
#toolbar-voice .studio-toolbar-group,
#toolbar-voice .studio-toolbar-left > div,
#toolbar-voice .studio-toolbar-left > div > div {
  overflow: visible;
}

#toolbar-voice .studio-toolbar-group-body > .toolbar-btn,
#toolbar-voice .studio-toolbar-group-body > .toolbar-select,
#toolbar-voice .studio-toolbar-group-body > .studio-toolbar-slider-wrap {
  min-height: 58px;
  height: 58px;
}

/* 그룹 버튼은 좌우 여백을 줄인다(12→8px, 버튼 10개면 80px). 영상 자막 편집 화면은
   툴바가 한 줄에 약 2,260px 를 쓰는데 CSS 2560 화면의 가용폭이 약 2,150px 이라
   두 줄로 접혔다(2026-09-24 실측). 09-17 메뉴·채널 선택이 이 줄로 내려오고
   '내보내기'가 붙으면서 09-10 의 여유 84px 가 사라진 것. */
#toolbar-voice .studio-toolbar-group .toolbar-btn {
  padding-left: 8px;
  padding-right: 8px;
}

#toolbar-voice .toolbar-btn.primary {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ccc;
}

#toolbar-voice .toolbar-btn.primary:hover {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

#toolbar-voice .studio-toolbar-group-body > .toolbar-select {
  min-width: 112px;
  padding-top: 0;
  padding-bottom: 0;
}

#toolbar-voice .studio-toolbar-group-body > .toolbar-label {
  display: inline-flex;
  align-items: center;
  height: 58px;
}

/* ─── 툴바 폭 맞춤 (js/studio/ui/toolbar-fit.js) ───
   툴바는 50인치(CSS 2560px)에서 맞춰 한 줄에 약 2,050px 를 쓴다. 그보다 좁으면 두 줄로 접혔다
   (노트북 1706px, 2026-09-27). 한 줄에 안 들어갈 때만 아래 단계를 차례로 붙인다(누적).
   1: 여백·간격  2: 자막 스타일 버튼 글자 숨김  3: 보조 도구 버튼 글자 숨김(렌더는 유지)
   4: 아이콘 버튼·글꼴·채널 선택 폭까지 최소로.
   글자를 숨긴 버튼은 title 툴팁이 이름을 대신한다. 3단계로도 안 되면 위의 줄바꿈이 마지막 안전망이다. */
.studio-toolbar.fit-1 {
  gap: 4px;
}

.studio-toolbar.fit-1 #toolbar-voice,
.studio-toolbar.fit-1 #toolbar-voice .studio-toolbar-group-body {
  column-gap: 4px;
}

.studio-toolbar.fit-1 #toolbar-voice .studio-toolbar-row-rich {
  column-gap: 6px;
}

.studio-toolbar.fit-1 #toolbar-voice .toolbar-divider {
  margin: 0 1px;
}

.studio-toolbar.fit-1 #toolbar-voice .toolbar-btn.stt-tb-compact,
.studio-toolbar.fit-1 #toolbar-voice .studio-toolbar-group .toolbar-btn {
  padding-left: 6px;
  padding-right: 6px;
}

.studio-toolbar.fit-1 #toolbar-voice .studio-toolbar-group {
  padding-left: 6px;
  padding-right: 6px;
}

.studio-toolbar.fit-1 #sttFontPickerBtn {
  min-width: 120px;
}

.studio-toolbar.fit-2 #toolbar-voice > .toolbar-label,
.studio-toolbar.fit-2 #toolbar-voice .toolbar-btn.stt-tb-compact > span:last-child:not(:first-child) {
  display: none;
}

.studio-toolbar.fit-2 #toolbar-voice .toolbar-btn.stt-tb-compact {
  min-width: 40px;
}

.studio-toolbar.fit-2 #toolbar-voice .stt-style-toggle-btn {
  width: 26px;
  min-width: 26px;
}

.studio-toolbar.fit-3 #toolbar-voice .studio-toolbar-group .toolbar-btn:has(> svg):not(#ttsRenderBtn) {
  font-size: 0;
  gap: 0;
  min-width: 42px;
}

.studio-toolbar.fit-3 #toolbar-voice .studio-toolbar-group .toolbar-btn:has(> svg):not(#ttsRenderBtn) > span {
  display: none;
}

.studio-toolbar.fit-4 .toolbar-project-menu > .toolbar-btn {
  font-size: 0;
  gap: 0;
  min-width: 40px;
}

.studio-toolbar.fit-4 #toolbar-voice .studio-toolbar-group .toolbar-btn:has(> svg):not(#ttsRenderBtn) {
  min-width: 36px;
}

.studio-toolbar.fit-4 #toolbar-voice .studio-toolbar-group {
  padding-left: 3px;
  padding-right: 3px;
}

.studio-toolbar.fit-4 #toolbar-voice .stt-style-toggle-btn {
  width: 20px;
  min-width: 20px;
}

.studio-toolbar.fit-4 #toolbar-voice > .toolbar-divider {
  display: none;
}

.studio-toolbar.fit-4 #toolbar-voice .toolbar-btn.stt-tb-compact {
  min-width: 34px;
}

/* 인라인 style="width:90px" 를 이기려면 !important 가 필요하다. 좌우 여백 14px 그대로면 '없음'이 화살표에 잘린다. */
.studio-toolbar.fit-4 #subtitleAnimationType {
  width: 72px !important;
  padding: 0 4px;
}

.studio-toolbar.fit-4 #sttFontPickerBtn {
  min-width: 96px;
}

.studio-toolbar.fit-4 #sttFontSizeCombo {
  min-width: 84px;
}

.studio-toolbar.fit-4 .studio-toolbar-channel .channel-name {
  max-width: 80px;
}

.toolbar-btn.toolbar-btn-icon {
  min-width: 30px;
  width: 30px;
  min-height: 30px;
  height: 30px;
  padding: 0;
  gap: 0;
}

.toolbar-btn.toolbar-btn-icon svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1800px) {
  .studio-toolbar-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 0;
  }

  .studio-toolbar-left,
  .studio-toolbar-right {
    flex-wrap: wrap;
    width: 100%;
  }

  .studio-toolbar-right {
    justify-content: flex-start;
  }

  .studio-toolbar-group {
    width: 100%;
  }

  .studio-toolbar-row-rich {
    flex-direction: row !important;
    align-items: stretch !important;
  }

  .studio-toolbar-row-rich .studio-toolbar-left,
  .studio-toolbar-row-rich .studio-toolbar-right {
    width: auto !important;
  }

  #toolbar-voice .studio-toolbar-row-rich {
    flex-direction: row !important;
  }

  #toolbar-voice .studio-toolbar-left,
  #toolbar-voice .studio-toolbar-right {
    width: auto !important;
    flex-wrap: nowrap !important;
  }

  #toolbar-voice .studio-toolbar-group {
    width: auto !important;
  }
}

.tts-voice-settings-panel {
  width: 420px;
  max-width: calc(100vw - 40px);
}

.tts-voice-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tts-voice-setting-field,
.tts-voice-slider-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

.tts-voice-setting-field-wide,
.tts-voice-slider-card:last-child {
  grid-column: 1 / -1;
}

.tts-voice-settings-panel #studioStepsGroup,
.tts-voice-settings-panel #ttsPostSpeedGroup {
  grid-column: 1 / -1;
}

.tts-voice-setting-label {
  font-size: 14px;
  font-weight: 700;
  color: #a9a9b4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tts-voice-setting-field .toolbar-select,
.tts-voice-setting-field .toolbar-btn {
  width: 100%;
}

.tts-voice-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

.tts-voice-action-grid .toolbar-btn {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
}

.tts-voice-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    min-height: 52px;
    border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.tts-voice-slider-row .toolbar-slider {
  flex: 1;
  width: auto;
}

.tts-voice-settings-panel .stt-clip-split-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 16px 20px;
  background:
    linear-gradient(180deg, rgba(24, 24, 28, 0.98), rgba(24, 24, 28, 0.92));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tts-voice-settings-panel .stt-clip-split-header h3 {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
}

.tts-voice-settings-panel .stt-clip-split-content {
    padding: 16px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.03), transparent 34%),
    linear-gradient(180deg, #17171a 0%, #141416 100%);
}

.tts-voice-settings-panel .stt-clip-section {
    margin-bottom: 14px;
    padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(10, 10, 12, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.tts-voice-settings-panel .stt-clip-section:last-child {
  margin-bottom: 0;
}

.tts-voice-settings-panel .stt-clip-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f3f4f6;
}

.tts-voice-settings-panel .stt-clip-section-title::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f87171, #fb7185);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12);
}

.tts-voice-settings-panel .toolbar-select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    #101012;
  color: #f5f5f5;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.tts-voice-settings-panel .toolbar-select:focus {
  border-color: rgba(248, 113, 113, 0.5);
  box-shadow:
    0 0 0 3px rgba(248, 113, 113, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.tts-voice-settings-panel .toolbar-btn {
    min-height: 44px;
    padding: 9px 13px;
    border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    #111114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ececec;
  font-size: 15px;
  font-weight: 600;
}

.tts-voice-settings-panel .toolbar-btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)),
    #17171b;
  border-color: rgba(255, 255, 255, 0.16);
}

.tts-voice-settings-panel .toolbar-btn.toolbar-btn-icon {
  min-width: 38px;
  width: 38px;
  min-height: 38px;
  height: 38px;
  padding: 0;
  border-radius: 11px;
}

.tts-voice-settings-panel .toolbar-label {
  font-size: 14px;
  color: #8f9099;
  font-weight: 600;
}

.tts-voice-settings-panel .toolbar-slider {
  height: 6px;
  background: linear-gradient(90deg, #3b3b42, #2a2a31);
  border-radius: 999px;
}

.tts-voice-settings-panel .toolbar-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb7185, #f87171);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12);
  border: none;
}

.tts-voice-settings-panel .toolbar-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb7185, #f87171);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12);
  border: none;
}

.tts-voice-settings-panel .imagen-quota-label {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #9ca3af !important;
}

.toolbar-divider {
  width: 1px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
  flex-shrink: 0;
}

.studio-toolbar-left .toolbar-divider,
.studio-toolbar-right .toolbar-divider {
  height: 28px;
}

.toolbar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    min-height: 54px;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #ccc;
  font-size: 14px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.toolbar-btn:hover {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.toolbar-btn.primary {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.toolbar-btn.primary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
}

.toolbar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.toolbar-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.toolbar-input {
  height: 28px;
  padding: 0 8px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: #e0e0e0;
  font-size: 15px;
  outline: none;
  flex-shrink: 0;
}

.toolbar-input:focus {
  border-color: rgba(220, 38, 38, 0.5);
  background: #0a0a0a;
}

.toolbar-input:-webkit-autofill,
.toolbar-input:-webkit-autofill:hover,
.toolbar-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #0a0a0a inset !important;
  -webkit-text-fill-color: #e0e0e0 !important;
  caret-color: #e0e0e0;
}

.toolbar-input.wide {
  flex: 1;
  min-width: 200px;
  max-width: 500px;
}

.toolbar-select {
    height: 54px;
    min-height: 54px;
    padding: 0 14px;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 5px;
  color: #e0e0e0;
  font-size: 15px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}

.toolbar-select:focus {
  border-color: rgba(220, 38, 38, 0.5);
}

.toolbar-label {
  font-size: 14px;
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
}

.toolbar-slider {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #333;
  border-radius: 2px;
  outline: none;
  flex-shrink: 0;
}

.toolbar-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #f87171;
  border-radius: 50%;
  cursor: pointer;
}

/* ─── Main Content Area ─── */
.studio-main-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.studio-main {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ─── Preview Panel (Left) ─── */
.studio-preview {
  width: 38%;
  min-width: 300px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  background: #0d0d0d;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.preview-video-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #000;
  min-height: 0;
  /* 클릭하면 재생/정지되지만 커서는 기본 화살표로 둔다(대표님 지시 09-24, Vrew 와 같음).
     손 모양은 끌어 옮길 수 있는 미디어에만 — .img-adjustable(preview-adjust.js) */
}

.preview-video-area video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
}

.studio-youtube-player-shell {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 4;
}

.studio-youtube-player {
  width: 100%;
  height: 100%;
}

.studio-youtube-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.studio-youtube-player-status {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: none;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #f3f4f6;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  z-index: 5;
}

.studio-youtube-player-status.is-visible {
  display: block;
}

.preview-video-area img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 영상 비율 프레임 - 자막 오버레이의 부모 컨테이너 */
.preview-aspect-frame {
  position: absolute;
  container-type: size;
  pointer-events: none;
  z-index: 5;
  isolation: isolate;
  /* 초기값 (JS에서 동적으로 업데이트) */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.preview-subtitle-overlay {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  max-width: 90%;
  text-align: center;
  pointer-events: none;
  z-index: 1000;
}

.preview-subtitle-text {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  max-width: 90%;
  word-break: keep-all;
}

.preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #555;
  z-index: 1;
  transition: background 0.2s, color 0.2s;
  border-radius: 4px;
}
.preview-placeholder:hover {
  background: rgba(220, 38, 38, 0.06);
  color: #888;
}

.preview-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.3;
  transition: opacity 0.2s, transform 0.2s;
}
.preview-placeholder:hover svg {
  opacity: 0.6;
  transform: translateY(-2px);
}

.preview-placeholder span {
  font-size: 16px;
}

/* Player controls */
.preview-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  height: 40px;
  min-height: 40px;
  background: #111;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* YouTube 임베드(홈/분석) 활성 시 자체 재생 컨트롤은 iframe을 제어하지 못한다.
   영상공장 i2v 진입점인 캡처 버튼만 남긴다. */
.studio-preview.youtube-source-active .preview-controls > *:not(#vfCaptureBtn) {
  display: none;
}

.preview-controls #vfCaptureBtn {
  width: auto;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 14px;
}

.preview-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
}

.preview-controls button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.preview-controls button svg {
  width: 16px;
  height: 16px;
}

.preview-time {
  font-size: 14px;
  color: #888;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.preview-progress {
  flex: 1;
  height: 4px;
  background: #333;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.preview-progress-fill {
  height: 100%;
  background: #dc2626;
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s;
}

/* Volume control */
.preview-volume {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.preview-volume input[type="range"] {
  width: 0;
  opacity: 0;
  transition: width 0.2s, opacity 0.2s;
  cursor: pointer;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #333;
  border-radius: 2px;
}

.preview-volume:hover input[type="range"],
.preview-volume input[type="range"]:focus {
  width: 60px;
  opacity: 1;
}

.preview-volume input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border-radius: 2px;
}

.preview-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  margin-top: -4px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* ─── Preview Prompt Area ─── */
.preview-prompt-area {
  padding: 8px 12px;
  background: #111;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.preview-prompt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.preview-prompt-header span {
  font-size: 14px;
  color: #888;
  font-weight: 500;
}

.preview-prompt-copy {
  border: none;
  background: transparent;
  color: #666;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}

.preview-prompt-copy:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ddd;
}

.preview-prompt-area textarea {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  color: #ccc;
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 8px;
  resize: none;
  outline: none;
}

.preview-prompt-area textarea:focus {
  border-color: rgba(220, 38, 38, 0.4);
}

/* ─── Work Panel (Right) ─── */
.studio-work {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #0a0a0a;
}

/* Work panel header (context dependent) */
.work-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  height: 38px;
  min-height: 38px;
  background: #111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.work-header-title {
  font-size: 15px;
  font-weight: 600;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 8px;
}

.work-header-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: 500;
  color: #888;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.work-header-actions {
  display: flex;
  gap: 4px;
}

/* Work content - switches per mode */
.work-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.work-content::-webkit-scrollbar {
  width: 6px;
}

.work-content::-webkit-scrollbar-track {
  background: transparent;
}

.work-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

.work-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Mode-specific work panels */
.work-panel {
  display: none;
  height: 100%;
}

.work-panel.active {
  display: flex;
  flex-direction: column;
}

/* Voice panel 내부 flex 체인 */
#panel-voice .tts-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ─── Sentence List (Vrew-style) ─── */
.sentence-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.sentence-item {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  min-height: 72px;
  cursor: pointer;
  transition: background 0.12s;
}

.sentence-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.sentence-item.active {
  background: rgba(220, 38, 38, 0.06);
  border-left: 3px solid #dc2626;
}

.sentence-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  font-size: 18px;
  color: #555;
  font-weight: 500;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.sentence-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  min-width: 0;
}

.sentence-tags {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.sentence-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  font-size: 16px;
  border-radius: 3px;
  font-weight: 500;
}

.sentence-tag.video {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.sentence-tag.audio {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.sentence-tag.image {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.sentence-text {
  font-size: 20px;
  color: #ddd;
  line-height: 1.5;
  word-break: keep-all;
}

/* AI 에이전트가 대본과 함께 넘긴 연출 메모 — 프롬프트 생성·스톡 검색의 재료 */
.img-directive-note {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  font-size: 13px;
  line-height: 1.4;
  word-break: keep-all;
}

.sentence-prompt {
  font-size: 17px;
  color: #666;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sentence-thumb {
  display: flex;
  align-items: center;
  padding: 8px;
}

.sentence-thumb img {
  width: 80px;
  height: 45px;
  object-fit: cover;
  border-radius: 4px;
  background: #1a1a1a;
}

.sentence-thumb-placeholder {
  width: 80px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  border-radius: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.sentence-thumb-placeholder svg {
  width: 20px;
  height: 20px;
  color: #444;
}

.sentence-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 12px;
  gap: 4px;
  min-width: 80px;
}

.sentence-time-text {
  font-size: 14px;
  color: #666;
  font-variant-numeric: tabular-nums;
}

.sentence-duration {
  font-size: 12px;
  color: #555;
}

.sentence-item.selected {
  background: rgba(255, 255, 255, 0.04);
}

/* ─── Voice sentence actions ─── */
.voice-sentence-actions {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}

.voice-action-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #888;
  padding: 3px 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.voice-action-btn:hover {
  color: #ddd;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}

.voice-action-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.voice-action-btn.regenerating {
  animation: voiceRegenSpin 1s linear infinite;
}

@keyframes voiceRegenSpin {
  from { opacity: 0.3; }
  50% { opacity: 1; }
  to { opacity: 0.3; }
}

/* ─── Image prompt row ─── */
.img-prompt-row {
  margin-top: 4px;
}

.img-prompt-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  color: #aaa;
  resize: none;
  font-family: inherit;
  line-height: 1.4;
}

.img-prompt-input:focus {
  border-color: rgba(255, 255, 255, 0.2);
  color: #ddd;
  outline: none;
}

.img-sentence-actions {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}

.voice-action-btn.generating {
  animation: voiceRegenSpin 1s linear infinite;
}

/* ─── Render summary ─── */
.render-summary {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  color: #666;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

/* ─── Subtitle style modal rows ─── */
.rs-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rs-label {
  font-size: 15px;
  color: #999;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.rs-input {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 15px;
  color: #ddd;
  width: 60px;
}

.rs-toggle {
  font-weight: 700 !important;
  min-width: 32px;
}

.rs-toggle.active {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

/* ─── Zoompan animation ─── */
@keyframes zoompanAnim {
  from { transform: scale(1); }
  to { transform: scale(var(--zoompan-target, 1.15)); }
}

.zoompan-active {
  animation: zoompanAnim ease-in-out forwards;
}

/* ─── Shared Modal Base (Subtitle Style, etc.) ─── */
.voice-select-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.voice-select-dialog {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  color: #fff;
}
.voice-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.voice-select-header h3 {
  margin: 0;
  font-size: 18px;
  color: #eee;
  font-weight: 600;
}
.voice-select-close {
  background: none;
  border: none;
  color: #666;
  font-size: 27px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.voice-select-close:hover {
  color: #ddd;
}
.voice-select-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Voice Selection Modal (Full) ─── */
.voice-modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}
.voice-modal {
  background: #1a1a1a;
  border-radius: 12px;
  width: 95%;
  max-width: 1100px;
  height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #ffffff;
  border: 1px solid #333;
}
.voice-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #333;
}
.voice-modal-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #333;
  background: #111;
}
.voice-modal-tab {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: #888;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.voice-modal-tab:hover {
  background: #333;
}
.voice-modal-tab.active {
  background: #dc2626;
  color: white;
}
.voice-modal-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.voice-filter-sidebar {
  width: 220px;
  padding: 16px;
  border-right: 1px solid #333;
  overflow-y: auto;
  background: #111;
}
.voice-filter-group {
  margin-bottom: 20px;
}
.voice-filter-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #888;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.voice-filter-reset {
  font-size: 0.75rem;
  color: #666;
  cursor: pointer;
  text-decoration: underline;
}
.voice-filter-reset:hover {
  color: #dc2626;
}
.voice-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.voice-filter-btn {
  padding: 6px 12px;
  border: 1px solid #444;
  border-radius: 18px;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.voice-filter-btn:hover {
  border-color: #666;
  background: #222;
}
.voice-filter-btn.active {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.voice-filter-btn.active::before {
  content: "";
  width: 16px;
  height: 16px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.voice-list-container {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background: #1a1a1a;
}
.voice-training-section {
  width: 320px;
  padding: 16px;
  border-left: 1px solid #333;
  overflow-y: auto;
  background: #111;
}
.voice-training-section details {
  margin-top: 0;
}
.voice-training-section summary {
  padding: 10px 12px !important;
  font-size: 0.9rem !important;
}
.voice-list-header {
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: #888;
}
.voice-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voice-engine-group {
  margin-bottom: 20px;
}
.voice-engine-header {
  font-size: 0.85rem;
  font-weight: 600;
  color: #888;
  padding: 8px 4px;
  border-bottom: 1px solid #333;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.voice-engine-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.voice-item {
  position: relative;
  padding: 14px 10px;
  border: 2px solid #333;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  background: #222;
}
.voice-item-delete {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.8);
  color: #fff;
  font-size: 17px;
  line-height: 18px;
  cursor: pointer;
  display: none;
  padding: 0;
  z-index: 2;
}
.voice-item:hover .voice-item-delete {
  display: block;
}
.voice-item-delete:hover {
  background: #dc2626;
  transform: scale(1.15);
}
.voice-item:hover {
  border-color: #dc2626;
  background: #2a2a2a;
}
.voice-item.selected {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.15);
}
.voice-item-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: white;
  font-weight: 600;
}
.voice-item-avatar.male {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.voice-item-avatar.female {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.voice-item-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.voice-item-name {
  font-weight: 500;
  margin-bottom: 4px;
  font-size: 0.9rem;
}
.voice-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 6px;
}
.voice-tag {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 10px;
  background: #333;
  color: #aaa;
}
.voice-tag.recommend {
  background: #dc2626;
  color: white;
}
.voice-tag.trained {
  background: #10b981;
  color: white;
}
.voice-tag.style {
  background: #f59e0b;
  color: white;
}
.voice-tag.multilang {
  background: #8b5cf6;
  color: white;
}
.voice-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid #333;
  background: #111;
}
.voice-settings {
  display: flex;
  gap: 12px;
  align-items: center;
}
.voice-setting-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #888;
  background: #222;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #333;
}
.voice-setting-item select {
  padding: 2px 6px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.voice-setting-slider-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.voice-setting-slider-wrap input[type="range"] {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #444;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.voice-setting-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px; height: 12px;
  background: #dc2626;
  border-radius: 50%;
  cursor: pointer;
}
.voice-setting-slider-wrap input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px;
  background: #dc2626;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.voice-setting-slider-wrap span {
  min-width: 32px;
  font-size: 0.8rem;
  color: #ccc;
}
.voice-setting-reset {
  padding: 6px 12px;
  border: 1px solid #444;
  border-radius: 6px;
  background: transparent;
  color: #888;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 4px;
}
.voice-setting-reset:hover {
  background: #333;
}
.voice-modal-confirm {
  padding: 10px 28px;
  background: #22c55e;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.voice-modal-confirm:hover {
  background: #16a34a;
}
/* Voice preview panel */
.voice-preview-panel {
  display: none;
  padding: 12px 16px;
  background: #0d0d0d;
  border-top: 1px solid #333;
}
.voice-preview-panel.active {
  display: block;
}
.voice-preview-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.voice-preview-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
.voice-preview-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: white;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.voice-preview-avatar.male {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.voice-preview-avatar.female {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.voice-preview-name {
  font-weight: 500;
  font-size: 0.9rem;
}
.voice-preview-engine {
  font-size: 0.75rem;
  color: #888;
  background: #222;
  padding: 2px 6px;
  border-radius: 4px;
}
.voice-sample-select {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #222;
  color: #fff;
  font-size: 0.85rem;
}
.voice-play-btn {
  padding: 8px 16px;
  background: #22c55e;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}
.voice-play-btn:hover {
  background: #16a34a;
}
.voice-play-btn:disabled {
  background: #444;
  cursor: not-allowed;
}
.voice-play-btn.playing {
  background: #dc2626;
}
/* Supertonic steps slider */
.voice-steps-control {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #1a1a1a;
  border-radius: 6px;
  border: 1px solid #333;
}
.voice-steps-control.active {
  display: flex;
}
.voice-steps-label {
  font-size: 0.8rem;
  color: #888;
  white-space: nowrap;
}
.voice-steps-slider {
  width: 100px;
  accent-color: #f59e0b;
}
.voice-steps-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: #f59e0b;
  min-width: 24px;
  text-align: center;
}
/* Search input */
#studioVoiceSearchInput {
  padding: 6px 12px;
  border: 1px solid #444;
  border-radius: 20px;
  background: #222;
  color: #fff;
  font-size: 0.85rem;
  width: 150px;
}
#studioVoiceSearchInput::placeholder {
  color: #888;
}

/* ─── Source mode: collect results ─── */
.source-results {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

/* 2x2 소스 정보 그리드 */
.source-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.source-grid-2x2 .source-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.source-grid-2x2 .source-card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.source-grid-2x2 .source-card-body textarea {
  flex: 1;
  min-height: 50px;
}

.source-card {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.source-card-highlight {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

/* 영상 구조 폼 */
.source-type-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px !important;
}

.type-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.type-label {
  font-size: 14px;
  color: #888;
  min-width: 58px;
  flex-shrink: 0;
  line-height: 26px;
}

.type-value {
  font-size: 15px;
  color: #ccc;
}

.type-btn-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.type-custom-input {
  width: 120px;
  flex: none !important;
  margin-left: auto;
  margin-top: 0 !important;
}

.type-btn {
  padding: 4px 10px;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: transparent;
  color: #888;
  cursor: pointer;
  transition: all 0.15s;
}

.type-btn:hover {
  background: #1a1a1a;
  color: #ccc;
  border-color: rgba(255, 255, 255, 0.25);
}

.type-btn.active {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border-color: #dc2626;
}

.type-btn.type-btn-disabled,
.type-btn.type-btn-disabled:hover {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.type-input {
  flex: 1;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  color: #ccc;
  outline: none;
}

select.type-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
  cursor: pointer;
}

select.type-input option {
  background: #1a1a1a;
  color: #ccc;
}

.type-input:focus {
  border-color: rgba(255, 255, 255, 0.25);
}

.type-next-btn {
  margin-top: auto;
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: transparent;
  color: #888;
  cursor: pointer;
  transition: all 0.15s;
}

.type-next-btn:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  border-color: #dc2626;
}

/* 단계 이동 버튼 (소스→분석, 분석→스크립트 통일) */
.step-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.step-next-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
  color: #93bbfd;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.step-next-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.step-next-btn-sm {
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  gap: 4px;
}

.step-automation-btn {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.12);
  color: #f87171;
}
.step-automation-btn:hover {
  background: rgba(220, 38, 38, 0.22);
  border-color: rgba(220, 38, 38, 0.6);
  color: #fca5a5;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

.source-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ─── 영상 구조 헤더 액션 (AI 자동 토글 · 톱니바퀴) ─── */
.video-structure-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.video-structure-ai-status {
  font-size: 14px;
  color: #8a8a8a;
  white-space: nowrap;
}

.video-structure-auto-toggle {
  font-size: 15px;
  font-weight: 600;
  color: #8a8a8a;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.video-structure-auto-toggle:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: #ccc;
}

.video-structure-auto-toggle.active {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.5);
  background: rgba(74, 222, 128, 0.1);
}

.video-structure-auto-toggle.loading {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.5);
  animation: videoStructurePulse 1s ease-in-out infinite;
}

@keyframes videoStructurePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.video-structure-gear-btn {
  font-size: 22px;
  line-height: 1;
  color: #8a8a8a;
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}

.video-structure-gear-btn:hover {
  color: #ccc;
  transform: rotate(45deg);
}

/* ─── 영상 구조 설정 모달 그리드 ─── */
.video-structure-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}

.video-structure-settings-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #ccc;
  cursor: pointer;
}

.video-structure-settings-check input[type='checkbox'] {
  width: 15px;
  height: 15px;
  accent-color: #4ade80;
  cursor: pointer;
}

.video-structure-settings-check.full,
.video-structure-settings-row.full {
  grid-column: 1 / -1;
}

.video-structure-settings-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.video-structure-settings-row > label {
  font-size: 14px;
  font-weight: 600;
  color: #8a8a8a;
}

.video-structure-settings-divider {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 600;
  color: #6b6b6b;
}

/* ─── 모드 슬라이드 토글 (AI 자동 ↔ 프리셋) ─── */
.vs-mode-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 2px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 600;
}

.vs-mode-toggle .vs-mode-opt {
  position: relative;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 12px;
  color: #8a8a8a;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.vs-mode-toggle .vs-mode-knob {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 12px;
  background: rgba(74, 222, 128, 0.18);
  border: 1px solid rgba(74, 222, 128, 0.5);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.vs-mode-toggle[data-mode='preset'] .vs-mode-knob {
  transform: translateX(100%);
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.5);
}

.vs-mode-toggle[data-mode='ai'] .vs-mode-opt[data-mode='ai'] {
  color: #4ade80;
}

.vs-mode-toggle[data-mode='preset'] .vs-mode-opt[data-mode='preset'] {
  color: #60a5fa;
}

.vs-mode-toggle.loading {
  opacity: 0.7;
}

/* ─── 영상구조 카드 프리셋 칩 바 (프리셋 모드) ─── */
.video-structure-preset-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.vs-preset-chip {
  font-size: 15px;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 4px 12px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.vs-preset-chip:hover {
  border-color: rgba(96, 165, 250, 0.5);
  color: #fff;
}

.vs-preset-chip.active {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.15);
  border-color: rgba(96, 165, 250, 0.6);
}

.vs-preset-empty {
  font-size: 14px;
  color: #6b6b6b;
}

/* ─── 설정 모달 프리셋 탭 (1~10) ─── */
.video-structure-preset-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.vs-preset-tab {
  width: 34px;
  height: 34px;
  font-size: 16px;
  font-weight: 600;
  color: #8a8a8a;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.vs-preset-tab:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #ccc;
}

.vs-preset-tab.saved {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
}

.vs-preset-tab.active {
  color: #fff;
  background: rgba(96, 165, 250, 0.2);
  border-color: #60a5fa;
}

/* 설정 모달 드롭다운/입력 확대 */
.video-structure-settings-grid .type-input {
  min-height: 38px;
  font-size: 16px;
  padding: 8px 10px;
}

.source-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 6px;
}

.source-card-status {
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.source-card-status.ready {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.source-card-status.pending {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
}

.source-card-status.error {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.source-card-body {
  padding: 10px 12px;
  overflow-y: auto;
}

.source-card-body.compact {
  padding: 8px 12px;
  max-height: none;
  overflow: visible;
}

.source-card-body textarea {
  width: 100%;
  min-height: 60px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #ccc;
  font-size: 15px;
  line-height: 1.6;
  padding: 8px;
  resize: vertical;
  outline: none;
}

.source-card-body textarea:focus {
  border-color: rgba(220, 38, 38, 0.4);
}

/* ─── Analysis mode: frame grid ─── */
.frame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  padding: 12px;
}

.frame-item {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
}

.frame-item:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.frame-item.selected {
  border-color: #dc2626;
}

.frame-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame-item-checkbox {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.frame-item.selected .frame-item-checkbox {
  background: #dc2626;
  border-color: #dc2626;
}

.frame-item.selected .frame-item-checkbox::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

.frame-item-time {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.7);
  color: #ddd;
  font-size: 12px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}

/* ─── Prompt List (below frame grid) ─── */
.prompt-list-header {
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 600;
  color: #888;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.prompt-list {
  display: flex;
  flex-direction: column;
}

.prompt-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.15s;
}

.prompt-list-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.prompt-list-num {
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #888;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  flex-shrink: 0;
}

.prompt-list-thumb {
  width: 60px;
  height: 34px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.prompt-list-text {
  font-size: 14px;
  color: #aaa;
  line-height: 1.5;
  word-break: break-word;
}

/* ─── Analysis Prompt Editor (above grid) ─── */
/* 사용자 영상 설명 입력 (분석탭) */
.analysis-user-desc {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.analysis-user-desc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: #aaa;
  margin-bottom: 6px;
}
.analysis-user-desc-badge {
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: #666;
}
.analysis-user-desc textarea {
  width: 100%;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #ccc;
  font-size: 15px;
  line-height: 1.5;
  padding: 8px 10px;
  resize: vertical;
  min-height: 40px;
  font-family: inherit;
}
.analysis-user-desc textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.25);
  background: #1a1a1a;
}
.analysis-user-desc textarea::placeholder {
  color: #555;
}

.analysis-prompt-editor {
  background: #111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.ape-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  min-height: 36px;
  cursor: pointer;
}

.ape-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ape-thumb {
  width: 48px;
  height: 27px;
  object-fit: cover;
  border-radius: 3px;
  background: #1a1a1a;
  flex-shrink: 0;
}

.ape-time {
  font-size: 14px;
  color: #888;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ape-label {
  font-size: 14px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ape-header-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.ape-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: #888;
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
}

.ape-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ddd;
}

.ape-nav-btn svg {
  width: 14px;
  height: 14px;
}

.ape-body {
  padding: 0 12px 8px;
}

.ape-body.collapsed {
  display: none;
}

.ape-body textarea {
  width: 100%;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: #ccc;
  font-size: 15px;
  line-height: 1.5;
  padding: 8px 10px;
  resize: vertical;
  outline: none;
  min-height: 56px;
  max-height: 160px;
}

.ape-body textarea:focus {
  border-color: rgba(220, 38, 38, 0.4);
}

.ape-common-style {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: 5px;
}

.ape-common-label {
  font-size: 12px;
  color: #4ade80;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ape-common-text {
  font-size: 14px;
  color: #888;
  line-height: 1.4;
  margin-top: 2px;
}

/* ─── Script mode: editor ─── */
.script-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.script-editor-area {
  flex: 1;
  padding: 16px;
}

.script-editor-area textarea {
  width: 100%;
  height: 100%;
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #ddd;
  font-size: 17px;
  line-height: 1.8;
  padding: 16px;
  resize: none;
  outline: none;
}

.script-editor-area textarea:focus {
  border-color: rgba(220, 38, 38, 0.4);
}

/* ─── Status Bar (Bottom) ─── */
.studio-statusbar {
  display: flex;
  align-items: center;
  height: 26px;
  min-height: 26px;
  background: #111;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0 12px;
  gap: 16px;
  z-index: 100;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #666;
}

.status-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-item .dot.green { background: #22c55e; }
.status-item .dot.yellow { background: #eab308; }
.status-item .dot.red { background: #ef4444; }
.status-item .dot.gray { background: #555; }

.status-spacer {
  flex: 1;
}

/* ─── Empty states ─── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: #555;
  padding: 40px;
  text-align: center;
}

.empty-state svg {
  width: 40px;
  height: 40px;
  opacity: 0.3;
}

.empty-state .title {
  font-size: 17px;
  font-weight: 500;
  color: #777;
}

.empty-state .desc {
  font-size: 15px;
  color: #555;
  line-height: 1.5;
}

/* ─── Loading spinner ─── */
.studio-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #f87171;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Progress bar (inline) ─── */
.studio-progress {
  height: 3px;
  background: #222;
  border-radius: 2px;
  overflow: hidden;
  flex: 1;
}

.studio-progress-fill {
  height: 100%;
  background: #dc2626;
  border-radius: 2px;
  transition: width 0.3s;
}

/* ─── Resize handle ─── */
.studio-resize-handle {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
  flex-shrink: 0;
}

.studio-resize-handle:hover,
.studio-resize-handle.dragging {
  background: rgba(220, 38, 38, 0.4);
}

/* ─── Tooltips (JS-driven, see core.js _tooltipInit) ─── */
#studioTooltip {
  position: fixed;
  padding: 4px 8px;
  background: #333;
  color: #eee;
  font-size: 14px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
#studioTooltip.visible {
  opacity: 1;
}

/* ─── Modal overlay ─── */
.studio-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  display: none;
}

.studio-modal-overlay.visible {
  display: flex;
}

.studio-modal {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  min-width: 400px;
  max-width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.studio-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.studio-modal-header h3 {
  font-size: 17px;
  font-weight: 600;
  color: #ddd;
  margin: 0;
}

.studio-modal-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #888;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.studio-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.studio-modal-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
}

.studio-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Automation Toggle Button ─── */
#pipelineAutoToggle {
  font-size: 14px;
  gap: 4px;
  transition: all 0.2s ease;
}

#pipelineAutoToggle.active {
  background: rgba(234, 179, 8, 0.15) !important;
  color: #facc15 !important;
  border-color: rgba(234, 179, 8, 0.3) !important;
}

#pipelineAutoToggle.active svg {
  stroke: #facc15;
}

#pipelineAutoToggle.active:hover {
  background: rgba(234, 179, 8, 0.25) !important;
}

/* ─── Audio Extract Modal ─── */
/* ─── Media Tool Modal (tools.html 동일) ─── */
.mt-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}
.mt-modal-overlay.visible {
  display: flex;
}
.mt-modal {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  width: 520px;
  max-width: 95vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  color: #fff;
}
.mt-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.mt-modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}
/* 환경 배지 */
.mt-badge {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.mt-badge-pending { background: rgba(255,255,255,0.06); color: #888; }
.mt-badge-ok { background: rgba(34,197,94,0.15); color: #22c55e; }
.mt-badge-fail { background: rgba(239,68,68,0.15); color: #ef4444; }
.mt-badge-loading { background: rgba(59,130,246,0.15); color: #3b82f6; }
/* 드롭존 */
.mt-dropzone {
  border: 2px dashed rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.mt-dropzone:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.02);
}
.mt-dropzone.dragover {
  border-color: #dc2626;
  background: rgba(220,38,38,0.05);
}
/* 파일 정보 */
.mt-file-info {
  margin-bottom: 16px;
}
/* 소스 영상 버튼 */
.mt-btn-source {
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: #ccc;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-bottom: 16px;
  transition: all 0.15s;
}
.mt-btn-source:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.25);
}
/* 카드 */
.mt-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
}
.mt-card-title {
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.mt-label {
  font-size: 0.95rem;
  color: #888;
  margin-bottom: 8px;
}
.mt-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 1rem;
}
.mt-radio input {
  accent-color: #dc2626;
  width: 16px;
  height: 16px;
}
/* 버튼 */
.mt-btn-primary {
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
}
.mt-btn-primary:hover { background: #b91c1c; }
.mt-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.mt-btn-full { width: 100%; }
/* 진행 화면 (전체 교체) */
.mt-progress-screen {
  flex: 1;
  flex-direction: column;
  padding: 40px;
}
.mt-progress-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 24px;
}
.mt-progress-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 16px;
}
.mt-progress-message {
  font-size: 1.1rem;
  color: #888;
  margin-bottom: 24px;
  text-align: center;
}
.mt-progress-track-lg {
  width: 200px;
  height: 4px;
  background: #222;
  border-radius: 2px;
  overflow: hidden;
}
.mt-progress-fill-lg {
  height: 100%;
  background: #dc2626;
  transition: width 0.3s;
}
.mt-progress-hint {
  font-size: 0.85rem;
  color: #666;
  margin-top: 12px;
}
.mt-progress-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 16px;
  padding-top: 20px;
  text-align: center;
}
.mt-rotating-msg {
  font-size: 0.95rem;
  color: #888;
}
/* 로그 */
.mt-log-container {
  margin-top: 12px;
}
.mt-log-panel {
  max-height: 100px;
  overflow-y: auto;
  font-size: 0.75rem;
  font-family: monospace;
  padding: 8px;
  background: #0a0a0a;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
}
.mt-log-entry { padding: 2px 0; color: #888; }
.mt-log-info { color: #888; }
.mt-log-success { color: #22c55e; }
.mt-log-error { color: #ef4444; }

/* ─── Whisper STT Modal ─── */
.whisper-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  justify-content: center;
  align-items: center;
}
.whisper-overlay.visible {
  display: flex;
}
.whisper-dialog {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  width: 640px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #fff;
}
.whisper-phase {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.whisper-phase.active {
  display: flex;
}
.whisper-dropzone {
  border: 2px dashed #444;
  border-radius: 10px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.whisper-dropzone:hover,
.whisper-dropzone.dragover {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.05);
}
.whisper-dropzone-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}
.whisper-dropzone-text {
  font-size: 0.9rem;
  color: #ccc;
}
.whisper-dropzone-hint {
  font-size: 0.8rem;
  color: #666;
  margin-top: 4px;
}
.whisper-file-info {
  display: none;
  padding: 10px 12px;
  background: rgba(220, 38, 38, 0.08);
  border-radius: 8px;
  font-size: 0.85rem;
  color: #ccc;
  align-items: center;
  gap: 8px;
}
.whisper-file-info.visible {
  display: flex;
}
.whisper-file-info .file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whisper-file-info .file-remove {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0 4px;
}
.whisper-settings-row {
  display: flex;
  gap: 16px;
  align-items: center;
}
.whisper-settings-row label {
  font-size: 15px;
  color: #999;
  min-width: 50px;
}
.whisper-settings-row select {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #222;
  color: #fff;
  font-size: 0.85rem;
}
.whisper-progress {
  text-align: center;
  padding: 40px 20px;
}
.whisper-progress-bar {
  height: 6px;
  background: #222;
  border-radius: 3px;
  overflow: hidden;
  margin: 16px 0;
}
.whisper-progress-fill {
  height: 100%;
  background: #dc2626;
  border-radius: 3px;
  width: 0%;
  transition: width 0.5s;
}
.whisper-progress-text {
  font-size: 0.9rem;
  color: #ccc;
  margin-bottom: 8px;
}
.whisper-progress-detail {
  font-size: 0.8rem;
  color: #666;
}
.whisper-segments {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #333;
  border-radius: 8px;
}
.whisper-segment {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.85rem;
  transition: background 0.1s;
}
.whisper-segment:hover {
  background: rgba(255, 255, 255, 0.03);
}
.whisper-segment:last-child {
  border-bottom: none;
}
.whisper-segment-time {
  color: #dc2626;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 0.8rem;
  min-width: 90px;
}
.whisper-segment-text {
  color: #ddd;
  line-height: 1.5;
  word-break: keep-all;
}
.whisper-result-text {
  width: 100%;
  min-height: 100px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #ccc;
  font-size: 16px;
  line-height: 1.6;
  padding: 10px;
  resize: vertical;
  outline: none;
}
.whisper-result-text:focus {
  border-color: rgba(220, 38, 38, 0.4);
}
.whisper-result-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.whisper-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #dc2626;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
/* Whisper edit toolbar */
.whisper-edit-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
/* Whisper segment item (2-row structure) */
.whisper-segment-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 12px;
  transition: background 0.1s;
}
.whisper-segment-item:hover {
  background: rgba(255, 255, 255, 0.02);
}
.whisper-segment-item.active {
  background: rgba(220, 38, 38, 0.06);
  border-left: 3px solid #dc2626;
}
.whisper-segment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.whisper-segment-number {
  font-size: 14px;
  color: #555;
  font-weight: 600;
  min-width: 22px;
}
.whisper-segment-timestamp {
  font-size: 14px;
  color: #dc2626;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.whisper-segment-timestamp:hover {
  text-decoration: underline;
}
.whisper-segment-actions {
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.whisper-seg-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: #666;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
}
.whisper-seg-btn:hover {
  color: #ddd;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}
.whisper-seg-btn.danger:hover {
  color: #f87171;
  border-color: rgba(220, 38, 38, 0.4);
}
/* Row 1: original STT text */
.whisper-segment-original {
  font-size: 15px;
  color: #888;
  line-height: 1.5;
  padding: 2px 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.whisper-segment-row-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
/* Row 2: editable subtitle input */
.whisper-subtitle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.whisper-subtitle-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 16px;
  color: #ddd;
  outline: none;
  font-family: inherit;
}
.whisper-subtitle-input:focus {
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(255, 255, 255, 0.05);
}
.whisper-sync-btn {
  background: none;
  border: none;
  color: #555;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 4px;
  flex-shrink: 0;
}
.whisper-sync-btn:hover {
  color: #dc2626;
}
.whisper-file-size {
  font-size: 0.8rem;
  color: #888;
  flex-shrink: 0;
}
/* Whisper result panel (in-page, not modal) */
.whisper-panel-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #111;
  flex-shrink: 0;
}
.whisper-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: #aaa;
}
.whisper-panel-count {
  font-size: 14px;
  color: #888;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.whisper-panel-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0;
  background: #111;
}
.whisper-footer-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #aaa;
  transition: color 0.2s;
  user-select: none;
}
.whisper-footer-toggle:hover {
  color: #fff;
}
.whisper-footer-arrow {
  font-size: 12px;
  color: #666;
  transition: color 0.2s;
}
.whisper-footer-toggle:hover .whisper-footer-arrow {
  color: #fff;
}
.whisper-panel-footer .whisper-result-text {
  min-height: 80px;
  max-height: 200px;
  margin: 0 12px 8px;
  width: calc(100% - 24px);
}
.whisper-panel-footer .whisper-result-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}


/* btn-primary / btn-secondary (tools.html 전역 CSS 이식) */
.btn-primary {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--primary-color);
  color: white;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn-secondary {
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-primary);
  transition: all 0.2s;
}
.btn-secondary.applied {
  border-color: var(--success-color);
  color: var(--success-color);
  background: rgba(34, 197, 94, 0.1);
}
.btn-secondary:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* =============================================
   미디어 도구 모달 스타일 (tools.html에서 이식)
   ============================================= */
/* 미디어 도구 모달 스타일 - 텍스트 크기 증가 */
              .mt-badge {
                padding: 4px 10px;
                border-radius: 4px;
                font-size: 0.85rem;
                font-weight: 500;
              }
              .mt-badge-pending {
                background: #fef3c7;
                color: #92400e;
              }
              .mt-badge-ok {
                background: #d1fae5;
                color: #065f46;
              }
              .mt-badge-error {
                background: #fee2e2;
                color: #991b1b;
              }
              .mt-card {
                border: 1px solid var(--border-color);
                border-radius: 8px;
                padding: 16px;
                margin-bottom: 14px;
              }
              .mt-card-title {
                font-weight: 600;
                font-size: 1.05rem;
                margin-bottom: 12px;
              }
              .mt-label {
                font-size: 0.95rem;
                color: var(--text-secondary);
                margin-bottom: 8px;
              }
              .mt-radio {
                display: flex;
                align-items: center;
                gap: 6px;
                cursor: pointer;
                font-size: 1rem;
              }
              .mt-radio input {
                accent-color: var(--primary-color);
                width: 16px;
                height: 16px;
              }
              .mt-input {
                padding: 8px 12px;
                border: 1px solid var(--border-color);
                border-radius: 4px;
                background: var(--bg-tertiary);
                color: inherit;
                font-size: 1rem;
              }
              .mt-btn-full {
                width: 100%;
                font-size: 0.95rem;
                padding: 10px 16px;
              }
              .vol-btn {
                width: 20px;
                height: 20px;
                padding: 0;
                border: 1px solid var(--border-color);
                border-radius: 4px;
                background: var(--bg-secondary);
                color: var(--text-secondary);
                font-size: 0.8rem;
                font-weight: 600;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.15s;
              }
              .vol-btn:hover {
                background: var(--primary-color);
                color: white;
                border-color: var(--primary-color);
              }
              .mt-info-box {
                background: var(--bg-secondary);
                border-radius: 6px;
                padding: 10px 12px;
                margin-bottom: 12px;
                font-size: 0.95rem;
              }
              .mt-info-row {
                display: flex;
                justify-content: space-between;
                padding: 4px 0;
              }
              .mt-info-row span:first-child {
                color: var(--text-secondary);
              }
              .mt-progress-box {
                background: var(--bg-secondary);
                border-radius: 6px;
                padding: 12px;
                margin-bottom: 14px;
              }
              .mt-progress-header {
                display: flex;
                justify-content: space-between;
                font-size: 0.95rem;
                margin-bottom: 8px;
              }
              .mt-progress-track {
                height: 8px;
                background: var(--bg-tertiary);
                border-radius: 4px;
                overflow: hidden;
              }
              .mt-progress-fill {
                height: 100%;
                background: var(--primary-color);
                transition: width 0.3s;
              }
              .mt-stepper {
                display: flex;
                justify-content: space-between;
              }
              .mt-step {
                display: flex;
                flex-direction: column;
                align-items: center;
                flex: 1;
              }
              .mt-step-dot {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: var(--bg-tertiary);
                border: 2px solid var(--border-color);
                margin-bottom: 6px;
                transition: all 0.3s;
              }
              .mt-step-label {
                font-size: 0.8rem;
                color: var(--text-secondary);
              }
              .mt-step.active .mt-step-dot {
                border-color: var(--primary-color);
                background: var(--primary-color);
                animation: pulse 1s infinite;
              }
              .mt-step.done .mt-step-dot {
                border-color: #10b981;
                background: #10b981;
              }
              .mt-step.error .mt-step-dot {
                border-color: #ef4444;
                background: #ef4444;
              }
              @keyframes pulse {
                0%,
                100% {
                  transform: scale(1);
                }
                50% {
                  transform: scale(1.15);
                }
              }
              .mt-log-entry {
                padding: 4px 0;
                border-bottom: 1px solid var(--border-color);
                font-size: 0.85rem;
              }
              .mt-log-entry:last-child {
                border-bottom: none;
              }
              .mt-log-error {
                color: #ef4444;
              }
              .mt-log-success {
                color: #10b981;
              }
              .mt-log-info {
                color: var(--text-secondary);
              }
              .mt-result-item {
                display: flex;
                flex-direction: column;
                gap: 8px;
                padding: 10px 12px;
                background: var(--bg-secondary);
                border-radius: 6px;
                margin-bottom: 8px;
              }
              .mt-result-item:last-child {
                margin-bottom: 0;
              }
              .mt-result-name {
                font-size: 0.95rem;
                font-weight: 500;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .mt-result-btns {
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
              }
              .mt-result-dl {
                background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
                color: white;
                border: none;
                padding: 6px 10px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 0.85rem;
                transition: all 0.2s ease;
              }
              .mt-result-dl:hover {
                background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
                transform: translateY(-1px);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
              }
              body.dark-theme .mt-result-dl {
                background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
              }
              body.dark-theme .mt-result-dl:hover {
                background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
              }
              .mt-result-dl.secondary {
                background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
                color: white;
                border: none;
              }
              body.dark-theme .mt-result-dl.secondary {
                background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
              }
              .mt-err-btn {
                padding: 6px 12px;
                border-radius: 4px;
                font-size: 0.9rem;
                cursor: pointer;
                background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
                color: white;
                border: none;
                transition: all 0.2s ease;
              }
              .mt-err-btn:hover {
                background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
                transform: translateY(-1px);
              }
              body.dark-theme .mt-err-btn {
                background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
              }
              body.dark-theme .mt-err-btn:hover {
                background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
              }
              /* 드롭존 접힘 스타일 */
              .mt-dropzone-collapsed {
                padding: 12px !important;
              }
              .mt-dropzone-collapsed svg {
                display: none;
              }
              .mt-dropzone-collapsed > div {
                display: none;
              }
              /* 모바일 반응형 */
              @media (max-width: 768px) {
                #mtBodyContainer {
                  flex-direction: column;
                }
                #mtWorkPanel {
                  border-right: none;
                  border-bottom: 1px solid var(--border-color);
                }
                #mtStatusPanel {
                  width: 100%;
                  max-height: 300px;
                }
              }


/* =============================================
   TTS 탭 스타일 (tools.html에서 이식)
   ============================================= */
.typecast-container {
        padding: 20px;
        background: var(--bg-primary);
        border: 1px solid #333333;
        border-radius: 8px;
      }
      body.dark-theme .typecast-container {
        border: 1px solid #ffffff;
      }

      /* 헤더 */
      .typecast-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        background: var(--bg-tertiary);
        border-radius: 8px;
        margin-bottom: 8px;
        flex-wrap: wrap;
        gap: 10px;
      }
      .typecast-header-left {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .typecast-status-dot {
        font-size: 1rem;
      }
      .typecast-status-text {
        font-size: 0.85rem;
        font-weight: 500;
      }
      .typecast-status-sub {
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-left: 8px;
      }
      .typecast-header-right {
        display: flex;
        gap: 8px;
      }

      /* 버튼 스타일 - channel-detail.html과 동일 */
      .typecast-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid var(--border-color);
        background: var(--bg-secondary);
        color: var(--text-primary);
      }
      .typecast-btn:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
      }
      body.dark-theme .typecast-btn:hover {
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
      }
      .typecast-btn-primary {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
      }
      .typecast-btn-primary:hover {
        filter: brightness(1.1);
      }
      .typecast-btn-secondary {
        background: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-primary);
      }
      .typecast-btn-secondary:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: white;
      }

      /* 진행률 바 */
      .typecast-progress {
        padding: 12px 16px;
        background: var(--bg-tertiary);
        border-radius: 8px;
        margin-bottom: 16px;
      }
      .typecast-progress-label {
        font-size: 0.85rem;
        font-weight: 500;
        margin-bottom: 8px;
      }
      .typecast-progress-bar {
        height: 4px;
        background: var(--bg-secondary);
        border-radius: 2px;
        overflow: hidden;
      }
      .typecast-progress-fill {
        height: 100%;
        background: var(--primary-color);
        width: 0%;
        transition: width 0.3s;
      }
      .typecast-progress-text {
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-top: 6px;
      }

      /* 설정 행 */
      .tts-settings-row {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 8px;
      }

      /* 캐릭터 선택 버튼 */
      /* 선택된 목소리 표시 (클릭 불가) */
      .tts-voice-display {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
      }
      /* +목소리 버튼 */
      .tts-add-voice-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        color: var(--text-primary);
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
      }
      .tts-add-voice-btn:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
      }
      .tts-voice-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.15s;
      }
      .tts-voice-btn:hover {
        border-color: var(--primary-color);
        background: var(--bg-secondary);
      }
      .tts-voice-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          var(--primary-color),
          var(--primary-hover)
        );
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
      }
      .tts-voice-name {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-primary);
      }
      .tts-voice-btn svg:last-child {
        color: var(--text-secondary);
      }

      /* 속도 그룹 */
      .tts-speed-group {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .tts-speed-label {
        font-size: 0.85rem;
        color: var(--text-secondary);
      }
      .tts-speed-slider-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--bg-tertiary);
        padding: 6px 10px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
      }
      .tts-speed-slider-wrap input[type="range"] {
        width: 80px;
        height: 6px;
        -webkit-appearance: none;
        appearance: none;
        background: linear-gradient(
          to right,
          var(--primary-color) 0%,
          var(--primary-color) 33.3%,
          #555 33.3%,
          #555 100%
        );
        border-radius: 3px;
        outline: none;
        cursor: pointer;
      }
      .tts-speed-slider-wrap
        input[type="range"]::-webkit-slider-runnable-track {
        height: 6px;
        border-radius: 3px;
      }
      .tts-speed-slider-wrap input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        background: #fff;
        border: 2px solid var(--primary-color);
        border-radius: 50%;
        cursor: pointer;
        margin-top: -5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }
      .tts-speed-slider-wrap input[type="range"]::-webkit-slider-thumb:hover {
        transform: scale(1.1);
      }
      .tts-speed-slider-wrap input[type="range"]::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: #fff;
        border: 2px solid var(--primary-color);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }
      .tts-speed-slider-wrap input[type="range"]::-moz-range-track {
        height: 6px;
        background: #555;
        border-radius: 3px;
      }
      .tts-speed-value {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--primary-color);
        min-width: 36px;
      }

      /* 생성 버튼 - channel-detail.html과 동일 */
      .tts-generate-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 18px;
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        border: none;
        border-radius: 6px;
        color: white;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .tts-generate-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }
      .tts-generate-btn:disabled {
        background: var(--disabled-bg);
        cursor: not-allowed;
        opacity: 0.6;
      }
      body.dark-theme .tts-generate-btn {
        background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
      }
      body.dark-theme .tts-generate-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      }

      /* 접이식 TTS 설정/입력 영역 */
      .tts-collapsible {
        margin-bottom: 10px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
      }
      .tts-collapse-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 8px 14px;
        background: var(--bg-tertiary);
        border: none;
        color: var(--text-primary);
        font-size: 0.88rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s;
      }
      .tts-collapse-toggle:hover {
        background: var(--bg-secondary);
      }
      .tts-collapse-icon {
        transition: transform 0.25s ease;
        flex-shrink: 0;
      }
      .tts-collapsible.collapsed .tts-collapse-icon {
        transform: rotate(-90deg);
      }
      .tts-collapse-label {
        flex: 1;
        text-align: left;
      }
      .tts-collapse-hint {
        font-size: 0.75rem;
        font-weight: 400;
        color: var(--text-secondary);
      }
      .tts-collapsible-body {
        padding: 10px 14px 6px;
        transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
        overflow: hidden;
      }
      .tts-collapsible.collapsed .tts-collapsible-body {
        max-height: 0 !important;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
      }
      .tts-collapsible:not(.collapsed) .tts-collapsible-body {
        max-height: 600px;
        opacity: 1;
      }
      /* collapsible 내부에서 중복 border/padding 제거 */
      .tts-collapsible .tts-settings-row {
        margin-bottom: 6px;
      }
      .tts-collapsible .tts-input-section {
        border: none;
        padding: 0;
        margin-bottom: 0;
        background: transparent;
      }
      .tts-collapsible .tts-input-section .tts-textarea {
        border: 1px solid var(--border-color);
      }

      /* 입력 섹션 */
      .tts-input-section {
        padding: 10px 14px;
        background: var(--bg-tertiary);
        border-radius: 8px;
        margin-bottom: 10px;
        border: 1px solid var(--border-color);
      }
      .tts-input-label {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 0.88rem;
      }
      .tts-textarea {
        width: 100%;
        height: 80px;
        min-height: 48px;
        padding: 8px 10px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-secondary);
        color: var(--text-primary);
        font-size: 0.95rem;
        resize: vertical;
        font-family: inherit;
        line-height: 1.5;
      }
      .tts-textarea:focus {
        outline: none;
        border-color: var(--primary-color);
      }
      .tts-input-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 6px;
      }

      /* 결과 섹션 */
      .tts-result-section {
        padding: 6px 10px;
        background: var(--bg-tertiary);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        container-type: inline-size;
      }
      .tts-result-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
      }
      .tts-result-title {
        font-weight: 600;
        font-size: 0.95rem;
      }
      .tts-result-actions {
        display: flex;
        gap: 8px;
      }
      .tts-action-btn {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        font-size: 0.8rem;
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        border: none;
        border-radius: 4px;
        color: white;
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .tts-action-btn:hover {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }
      body.dark-theme .tts-action-btn {
        background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
      }
      body.dark-theme .tts-action-btn:hover {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      }

      /* 문장 리스트 */
      .tts-sentence-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 8px;
      }
      /* 시작 아이템: 입력 영역 강조 */
      .tts-starter-item {
        border-style: dashed;
        border-color: color-mix(in srgb, var(--primary-color) 50%, var(--border-color));
        cursor: text !important;
      }
      .tts-starter-item * {
        cursor: text !important;
      }
      .tts-starter-item .tts-sentence-image-row {
        opacity: 0.35;
      }
      .tts-starter-item .tts-sentence-actions {
        opacity: 0.25;
        pointer-events: none;
      }
      .tts-starter-item.active {
        background: transparent;
        border-color: color-mix(in srgb, var(--primary-color) 50%, var(--border-color));
        border-style: dashed;
      }
      .tts-sentence-text[data-placeholder]:empty::before {
        content: attr(data-placeholder);
        color: var(--text-secondary);
        pointer-events: none;
        font-weight: 400;
        padding-left: 8px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        /* caret bar는 항상 자리만 차지(투명) — 레이아웃 시프트 방지 */
        border-left: 2px solid transparent;
      }
      /* 깜빡이는 caret은 실제 포커스(입력 가능 상태)일 때만 — 미포커스 시 오해 방지 */
      .tts-sentence-text[data-placeholder]:empty:focus::before {
        animation: tts-caret-blink 1s step-end infinite;
      }
      @keyframes tts-caret-blink {
        0%, 100% { border-left-color: #fff; }
        50% { border-left-color: transparent; }
      }
      .tts-sentence-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        background: var(--bg-secondary);
        border-radius: 8px;
        border: 1px solid var(--border-color);
        transition:
          background 0.2s,
          border-color 0.2s;
        cursor: pointer;
      }
      .tts-sentence-item:hover {
        background: var(--bg-tertiary);
      }
      .tts-sentence-item.active {
        background: color-mix(in srgb, var(--primary-color) 15%, transparent);
        border-color: var(--primary-color);
      }
      .tts-sentence-item.dirty {
        border-color: #f59e0b;
        box-shadow: inset 3px 0 0 #f59e0b;
      }
      .tts-sentence-num {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--text-secondary);
        min-width: 30px;
      }
      /* 이미지 프롬프트 묶음 브래킷 — 굵은 빨간 세로 바 */
      .tts-group-bracket {
        position: absolute;
        left: 0;
        width: 4px;
        background: #ef4444;
      }
      .tts-group-bracket-top {
        top: 0;
        bottom: -1px;
        border-radius: 4px 0 0 0;
      }
      .tts-group-bracket-middle {
        top: -1px;
        bottom: -1px;
      }
      .tts-group-bracket-bottom {
        top: -1px;
        bottom: 0;
        border-radius: 0 0 0 4px;
      }
      /* 그룹 선택 영역 (좌측 넓은 클릭 영역) */
      .tts-grp-zone {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 52px;
        cursor: pointer;
        z-index: 2;
        transition: background 0.15s;
      }
      .tts-grp-zone:hover {
        background: rgba(255, 255, 255, 0.04);
      }
      .tts-grp-zone.selecting {
        background: rgba(37, 99, 235, 0.25);
        box-shadow: inset 3px 0 0 var(--primary-color, #2563eb);
      }
      .tts-grp-zone.grouped:hover {
        background: rgba(239, 68, 68, 0.1);
      }
      /* 그룹 팝업 */
      .tts-grp-popup {
        position: fixed;
        z-index: 9999;
        background: var(--bg-secondary, #1e1e2e);
        border: 1px solid var(--border-color, #333);
        border-radius: 6px;
        padding: 2px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      }
      .tts-grp-popup button {
        display: block;
        width: 100%;
        padding: 6px 14px;
        background: none;
        border: none;
        color: var(--text-primary, #fff);
        font-size: 15px;
        cursor: pointer;
        border-radius: 4px;
        white-space: nowrap;
        text-align: left;
      }
      .tts-grp-popup button:hover {
        background: var(--primary-color, #2563eb);
      }
      .tts-sentence-text-row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        width: 100%;
      }
      .tts-sentence-text {
        flex: 1;
        font-size: 1.2rem;
        color: var(--text-primary);
        caret-color: white;
        outline: none;
        /* Enter=줄바꿈 모델: 개행이 실제 줄로 보이게 + 여러 줄 편집 허용 */
        white-space: pre-wrap;
        word-break: break-word;
        min-width: 0;
      }
      .tts-sentence-text:focus {
        caret-color: white;
        outline: none;
        border-bottom: 2px solid rgba(255, 255, 255, 0.4);
        padding-bottom: 2px;
      }
      .tts-sentence-duration {
        font-size: 1.05rem;
        color: var(--text-secondary);
        background: var(--bg-tertiary);
        padding: 2px 8px;
        border-radius: 4px;
      }

      /* 문장별 액션 버튼 그룹 (가로 1줄) */
      @container (max-width: 620px) {
        .tts-sentence-item {
          gap: 8px;
          padding: 12px 10px;
        }
        .tts-starter-item .tts-media-slot,
        .tts-starter-item .tts-sentence-actions {
          display: none;
        }
      }

      .tts-sentence-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }
      .tts-sentence-action-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        color: var(--text-secondary);
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.15s;
      }
      .tts-sentence-action-btn:hover {
        background: var(--bg-tertiary);
        color: var(--primary-color);
        border-color: var(--primary-color);
      }
      .tts-sentence-action-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
      .tts-sentence-action-btn.generating svg,
      .tts-sentence-action-btn.regenerating svg {
        animation: tts-regen-spin 1s linear infinite;
      }
      .tts-sentence-play {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-color);
        border: none;
        border-radius: 6px;
        color: white;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.15s;
      }
      .tts-sentence-play:hover {
        background: var(--primary-hover);
      }
      @keyframes tts-regen-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
      .tts-result-info {
        margin-top: 12px;
        font-size: 0.8rem;
        color: var(--text-secondary);
      }

      /* === TTS 이미지 생성 기능 === */
      .tts-image-toolbar {
        display: none;
        padding: 8px 12px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        margin-bottom: 8px;
      }
      .tts-image-toolbar-row {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 8px;
      }
      .tts-image-toolbar-row:last-child {
        margin-bottom: 0;
      }
      .tts-common-prompt {
        flex: 1;
        padding: 8px 10px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--input-bg, var(--bg-primary));
        color: var(--text-primary);
        font-size: 0.85rem;
        font-family: inherit;
        resize: vertical;
        min-height: 36px;
      }
      .tts-common-prompt:focus {
        outline: none;
        border-color: var(--primary-color);
      }
      .tts-img-toolbar-btn {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 14px;
        font-size: 0.8rem;
        font-weight: 600;
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        border: none;
        border-radius: 6px;
        color: white;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s ease;
      }
      .tts-img-toolbar-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }
      .tts-img-toolbar-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      body.dark-theme .tts-img-toolbar-btn {
        background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
      }
      body.dark-theme .tts-img-toolbar-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
      }

      /* 에디터 (문장 리스트 전체 너비) */
      .tts-editor-main {
        display: flex;
        gap: 0;
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
      }
      .tts-preview-panel {
        flex-grow: 0;
        flex-shrink: 0;
        width: 380px;
        min-width: 200px;
        max-width: 50%;
        display: flex;
        flex-direction: column;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow-y: auto;
        overflow-x: hidden;
      }
      .tts-image-container {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        background: #000;
        overflow: hidden;
        flex-shrink: 1;
        min-height: 120px;
        container-type: size;
      }
      .tts-preview-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: none;
        transform-origin: center center;
      }
      .tts-preview-image.zoompan-active {
        object-fit: cover;
        animation: ttsZoompanAnim linear forwards;
      }
      @keyframes ttsZoompanAnim {
        from { transform: scale(1); }
        to { transform: scale(var(--zoompan-target, 1.25)); }
      }
      .tts-image-placeholder {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        font-size: 0.85rem;
      }
      .tts-subtitle-overlay {
        position: absolute;
        bottom: 8%;
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: translateY(50%); /* 중앙 앵커: bottom%가 텍스트 중심점 기준 */
        color: white;
        font-size: 30px;
        width: fit-content;
        max-width: 90%;
        text-align: center;
        display: none;
        line-height: 1.4;
        white-space: pre-wrap;
        pointer-events: none;
        z-index: 1000;
      }
      .tts-title-overlay {
        position: absolute;
        top: 10%;
        left: 0;
        right: 0;
        margin: 0 auto;
        color: white;
        font-size: 39px;
        width: fit-content;
        max-width: 90%;
        text-align: center;
        display: none;
        line-height: 1.4;
        white-space: pre-wrap;
        pointer-events: none;
        z-index: 6;
      }
      /* 자막 폰트 스타일 툴바 (에디터 위 전체 폭) */
      .tts-font-toolbar-wrap {
        margin-bottom: 6px;
      }
      .tts-font-toolbar-wrap .stt-font-toolbar {
        margin-bottom: 0;
        border-radius: 8px 8px 0 0;
      }

      /* 툴바 내 이미지 생성 액션 버튼 */
      .tts-toolbar-actions {
        display: flex;
        gap: 4px;
        align-items: center;
      }
      .tts-toolbar-action-btn {
        height: 30px;
        padding: 0 10px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background: var(--bg-tertiary, #1a1a2e);
        color: var(--text-primary);
        font-size: 0.82rem;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
        box-sizing: border-box;
      }
      .tts-toolbar-action-btn:hover {
        border-color: var(--primary-color);
        background: var(--bg-secondary);
      }
      .tts-toolbar-action-btn-primary {
        background: var(--primary-color, #e74c3c);
        border-color: var(--primary-color, #e74c3c);
        color: #fff;
        font-weight: 600;
      }
      .tts-toolbar-action-btn-primary:hover {
        filter: brightness(1.15);
        background: var(--primary-color, #e74c3c);
      }
      .tts-batch-stop-btn {
        background: #c0392b;
        border-color: #c0392b;
        color: #fff;
        font-weight: 600;
      }
      .tts-batch-stop-btn:hover {
        filter: brightness(1.15);
        background: #a93226;
      }

      .tts-img-per-group {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
      }
      .tts-img-group-input {
        width: 36px;
        height: 26px;
        padding: 0 2px;
        border: 1px solid var(--stt-border);
        border-radius: 4px;
        background: var(--stt-card-bg);
        color: var(--text-primary);
        font-size: 0.82rem;
        text-align: center;
        box-sizing: border-box;
      }
      .tts-img-group-input:focus { outline: none; border-color: var(--primary-color); }
      .tts-img-group-label {
        font-size: 0.7rem;
        color: var(--text-secondary);
        white-space: nowrap;
      }

      /* 넓을 때 한 줄, 공간이 부족하면 음성/이미지 묶음 단위로 줄바꿈 */
      .tts-audio-controls-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 24px;
        padding: 10px 4px 12px;
        flex-shrink: 0;
        border-bottom: 1px solid var(--border-color);
      }
      .tts-control-row,
      .tts-playback-controls,
      .tts-settings-fields,
      .tts-settings-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        min-width: 0;
      }
      .tts-control-row { flex: 0 1 auto; max-width: 100%; }
      .tts-control-label {
        flex: 0 0 44px;
        color: var(--text-secondary);
        font-size: 0.85rem;
        font-weight: 600;
      }
      .tts-playback-controls {
        padding-left: 12px;
        border-left: 1px solid var(--border-color);
      }
      .tts-settings-toggle { gap: 6px; }
      .tts-settings-toggle[aria-expanded="true"] > span { transform: rotate(180deg); }
      .tts-settings-summary {
        flex: 0 1 120px;
        max-width: 140px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--text-secondary);
        font-size: 0.78rem;
      }
      .tts-image-settings {
        flex: 0 0 100%;
        padding: 12px 0 0;
        margin-top: 2px;
        border-top: 1px solid var(--border-color);
      }
      .tts-image-settings[hidden] { display: none; }
      .tts-settings-fields { gap: 10px 16px; margin-bottom: 12px; }
      .tts-setting-field {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        color: var(--text-secondary);
        font-size: 0.82rem;
      }
      .tts-setting-field select { min-width: 0; max-width: 220px; }
      .tts-prompt-label {
        display: block;
        margin-bottom: 6px;
        color: var(--text-secondary);
        font-size: 0.82rem;
      }
      #ttsCommonImagePrompt {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-height: 72px;
        padding: 8px 10px;
        resize: vertical;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        background: var(--bg-secondary);
        color: var(--text-primary);
        font: inherit;
        font-size: 0.9rem;
        line-height: 1.5;
      }
      .tts-settings-actions { margin-top: 8px; }
      .tts-audio-more { position: relative; }
      .tts-audio-more > summary { list-style: none; font-size: 1.2rem; }
      .tts-audio-more > summary::-webkit-details-marker { display: none; }
      .tts-audio-more-menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 1300;
        padding: 5px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-secondary);
        box-shadow: 0 6px 20px #0004;
      }
      .tts-editor-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 16px;
        flex-shrink: 0;
        padding: 10px 4px 4px;
        border-top: 1px solid var(--border-color);
        color: var(--text-secondary);
        font-size: 0.8rem;
      }
      .tts-auto-regen { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; cursor: pointer; }
      .tts-auto-regen input { flex-shrink: 0; margin: 0; }
      #ttsEditclawsBtn { margin-left: auto; }
      #ttsBatchProgress:empty { display: none; }
      #ttsBatchProgress { color: var(--text-secondary); font-size: 0.82rem; }
      #panel-voice .tts-control-primary {
        background: #dc2626;
        border-color: #dc2626;
        color: #fff;
        font-weight: 600;
      }
      #panel-voice .tts-control-primary:hover { background: #b91c1c; }
      #panel-voice .tts-action-btn-sm:disabled { opacity: 0.55; cursor: default; }
      #panel-voice :is(button, summary, select, textarea):focus-visible {
        outline: 2px solid var(--text-primary);
        outline-offset: 2px;
      }
      .tts-audio-label {
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
      }
      .tts-inline-speed {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 1;
        min-width: 0;
      }
      .tts-speed-label-sm {
        font-size: 0.72rem;
        color: var(--text-secondary);
        white-space: nowrap;
      }
      .tts-inline-speed-slider {
        flex: 1;
        min-width: 60px;
        max-width: 140px;
        height: 3px;
        accent-color: var(--primary-color, #e74c3c);
      }
      .tts-inline-speed-val {
        font-size: 0.72rem;
        color: var(--text-primary);
        min-width: 28px;
        text-align: center;
      }
      .tts-speed-reset-btn {
        width: 24px;
        height: 24px;
        padding: 0;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background: transparent;
        color: var(--text-secondary);
        font-size: 0.85rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
      }
      .tts-speed-reset-btn:hover {
        background: var(--bg-secondary);
        color: var(--text-primary);
      }
      .tts-audio-actions {
        display: flex;
        gap: 5px;
        margin-left: auto;
        flex-shrink: 0;
      }
      /* 재생속도 선택 — 인접한 tts-action-btn-sm과 같은 높이/모양으로 맞춘다.
         미디어 패널의 슬라이더와 같은 값을 공유한다(updatePostSpeed). */
      .tts-speed-select {
        background: var(--bg-tertiary, #1a1a2e);
        border: 1px solid var(--border-color);
        border-radius: 5px;
        color: var(--text-primary);
        cursor: pointer;
        height: 34px;
        padding: 0 8px;
        font-size: 0.8rem;
        box-sizing: border-box;
        transition: all 0.15s;
      }
      .tts-speed-select:hover {
        border-color: var(--accent-color, #dc2626);
      }
      .tts-speed-select:focus {
        outline: none;
        border-color: var(--accent-color, #dc2626);
      }
      .tts-action-btn-sm {
        background: var(--bg-tertiary, #1a1a2e);
        border: 1px solid var(--border-color);
        border-radius: 5px;
        color: var(--text-primary);
        cursor: pointer;
        min-width: 40px;
        height: 34px;
        padding: 0 10px;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
        box-sizing: border-box;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .tts-action-btn-sm:hover {
        background: var(--bg-secondary);
        border-color: var(--primary-color);
      }

      .tts-recent-voice-dropdown {
        position: relative;
        display: inline-flex;
        flex-shrink: 0;
      }
      .tts-recent-voice-btn {
        min-width: 88px;
        gap: 5px;
        color: #e5e7eb;
      }
      .tts-recent-voice-caret {
        transition: transform 0.15s ease;
      }
      .tts-recent-voice-dropdown.is-open .tts-recent-voice-caret {
        transform: rotate(180deg);
      }
      .tts-recent-voice-menu {
        display: none;
        position: absolute;
        top: calc(100% + 7px);
        left: 0;
        width: min(310px, calc(100vw - 24px));
        max-height: 390px;
        overflow: hidden;
        z-index: 1300;
        background: #171719;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 9px;
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.52);
      }
      .tts-recent-voice-dropdown.is-open .tts-recent-voice-menu {
        display: block;
      }
      .tts-recent-voice-header {
        padding: 10px 12px 8px;
        color: #f3f4f6;
        font-size: 0.82rem;
        font-weight: 700;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .tts-recent-voice-list {
        max-height: 340px;
        overflow-y: auto;
        padding: 5px;
      }
      .tts-recent-voice-item {
        width: 100%;
        min-height: 49px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 9px;
        color: #e5e7eb;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 7px;
        cursor: pointer;
        text-align: left;
      }
      .tts-recent-voice-item:hover,
      .tts-recent-voice-item:focus-visible {
        outline: none;
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(255, 255, 255, 0.08);
      }
      .tts-recent-voice-item.is-selected {
        background: rgba(220, 38, 38, 0.13);
        border-color: rgba(239, 68, 68, 0.42);
      }
      .tts-recent-voice-item:disabled {
        opacity: 0.48;
        cursor: not-allowed;
      }
      .tts-recent-voice-check {
        width: 15px;
        color: #ef4444;
        font-size: 0.85rem;
        font-weight: 800;
        flex-shrink: 0;
      }
      .tts-recent-voice-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .tts-recent-voice-name {
        overflow: hidden;
        color: #f3f4f6;
        font-size: 0.82rem;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .tts-recent-voice-provider {
        overflow: hidden;
        color: #8f9299;
        font-size: 0.7rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .tts-recent-voice-empty {
        padding: 20px 12px;
        color: #858892;
        font-size: 0.78rem;
        text-align: center;
      }
      .tts-recent-voice-limit {
        padding: 7px 9px 5px;
        color: #666a73;
        font-size: 0.66rem;
        text-align: right;
      }

      /* 배치 이미지 생성 스피너 */
      .tts-batch-spinner {
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 2px solid rgba(255,255,255,0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: tts-spin 0.6s linear infinite;
        vertical-align: middle;
        margin-right: 4px;
      }
      @keyframes tts-spin {
        to { transform: rotate(360deg); }
      }

      /* preview 패널 내부 툴바 (비율 + 공통프롬프트) */
      .tts-preview-toolbar {
        padding: 8px;
        border-top: 1px solid var(--border-color);
      }
      .tts-preview-ratio-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
      }
      .tts-style-preset-select {
        width: 100%;
        padding: 5px 8px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-tertiary, #1a1a2e);
        color: var(--text-primary);
        font-size: 0.78rem;
        margin-bottom: 4px;
        box-sizing: border-box;
        cursor: pointer;
      }
      .tts-style-preset-select:focus {
        outline: none;
        border-color: var(--primary-color);
      }
      .tts-preview-prompt {
        width: 100%;
        min-height: 42px;
        padding: 6px 8px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-tertiary, #1a1a2e);
        color: var(--text-primary);
        font-size: 0.78rem;
        resize: vertical;
        margin-bottom: 6px;
        box-sizing: border-box;
      }
      .tts-preview-prompt:focus {
        outline: none;
        border-color: var(--primary-color);
      }
      .tts-preview-prompt-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
      }
      .tts-preview-btn {
        flex: 1;
        min-width: 0;
        padding: 5px 4px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background: var(--bg-tertiary, #1a1a2e);
        color: var(--text-primary);
        font-size: 0.7rem;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
        text-align: center;
      }
      .tts-preview-btn:hover {
        border-color: var(--primary-color);
        background: var(--bg-secondary);
      }
      .tts-preview-btn-primary {
        background: var(--primary-color, #e74c3c);
        border-color: var(--primary-color, #e74c3c);
        color: #fff;
        font-weight: 600;
      }
      .tts-preview-btn-primary:hover {
        filter: brightness(1.15);
        background: var(--primary-color, #e74c3c);
      }

      .tts-preview-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 8px;
        background: var(--bg-tertiary);
        border-top: 1px solid var(--border-color);
      }
      .tts-preview-nav button {
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        color: var(--text-primary);
        cursor: pointer;
        padding: 4px 10px;
        font-size: 0.85rem;
        transition: all 0.15s;
      }
      .tts-preview-nav button:hover {
        background: var(--bg-secondary);
        border-color: var(--primary-color);
      }
      .tts-preview-nav-info {
        font-size: 0.8rem;
        color: var(--text-secondary);
        min-width: 100px;
        text-align: center;
      }

      /* 디바이더 */
      .tts-divider {
        flex: 0 0 12px;
        cursor: col-resize;
        background: var(--border-color);
        transition: background 0.2s;
        border-radius: 3px;
        margin: 0;
        touch-action: none;
        user-select: none;
        position: relative;
      }
      .tts-divider::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 4px;
        height: 32px;
        border-radius: 2px;
        background: rgba(128,128,128,0.3);
        transition: background 0.2s;
      }
      .tts-divider:hover, .tts-divider.active {
        background: var(--primary-color);
      }
      .tts-divider:hover::after, .tts-divider.active::after {
        background: rgba(255,255,255,0.4);
      }

      /* 문장 패널 */
      .tts-sentence-panel {
        flex: 1;
        overflow-y: auto;
        min-width: 250px;
      }

      /* 문장 아이템 내부 확장 */
      .tts-sentence-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
      }
      .tts-sentence-image-row {
        display: flex;
        gap: 8px;
        align-items: flex-start;
      }
      .tts-sentence-prompt {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--input-bg, var(--bg-primary));
        color: var(--text-primary);
        font-size: 0.95rem;
        font-family: inherit;
        resize: none;
        min-height: 36px;
        line-height: 1.4;
      }
      .tts-sentence-prompt:focus {
        outline: none;
        border-color: var(--primary-color);
      }
      .tts-sentence-prompt::placeholder {
        color: var(--text-secondary);
        opacity: 0.6;
      }
      /* (tts-sentence-img-gen merged into tts-sentence-action-btn) */

      /* 문장별 프롬프트 LLM 생성 버튼 */
      .tts-sentence-prompt-gen {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        color: var(--text-secondary);
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.2s;
      }
      .tts-sentence-prompt-gen:hover {
        background: var(--bg-tertiary);
        color: #dc2626;
        border-color: #dc2626;
      }
      .tts-sentence-prompt-gen:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }
      .tts-sentence-prompt-gen.generating {
        animation: tts-regen-spin 1s linear infinite;
      }

      /* 전체 이미지 생성 버튼 강조 */
      .tts-img-toolbar-btn-primary {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
      }
      .tts-img-toolbar-btn-primary:hover:not(:disabled) {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
      }

      .tts-sentence-img-status {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--border-color);
        flex-shrink: 0;
      }
      .tts-sentence-img-status.done {
        background: #22c55e;
        box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
      }

      /* 문장 옆 미디어 슬롯 (빈 상태=+업로드, 이미지=썸네일, 영상=🎬) */
      .tts-media-slot {
        position: relative;
        width: 56px;
        height: 56px;
        flex-shrink: 0;
        border-radius: 6px;
        cursor: pointer;
      }
      .tts-media-slot-badge {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px dashed var(--border-color);
        border-radius: 6px;
        color: var(--text-secondary);
        font-size: 25px;
        user-select: none;
        transition: border-color 0.15s, color 0.15s, background 0.15s;
      }
      .tts-media-slot.empty:hover .tts-media-slot-badge {
        border-color: var(--primary-color, #2563eb);
        color: var(--primary-color, #2563eb);
        background: rgba(37, 99, 235, 0.06);
      }
      .tts-media-slot.video .tts-media-slot-badge {
        border-style: solid;
        font-size: 27px;
      }
      /* 영상 썸네일(프레임 캡처) 준비되면 배지를 우하단 미니 아이콘으로 축소 —
         썸네일(z-index:1) 위에 떠서 "영상"임을 계속 표시 */
      .tts-media-slot.video.has-thumb .tts-media-slot-badge {
        inset: auto 2px 2px auto;
        border: none;
        font-size: 14px;
        line-height: 1;
        padding: 2px 3px;
        background: rgba(0, 0, 0, 0.55);
        border-radius: 4px;
        z-index: 2;
      }
      /* 문장 옆 썸네일 — 슬롯 위 레이어 (이미지 있으면 뱃지를 덮음) */
      .tts-sentence-thumb {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: 6px;
        border: 1px solid var(--border-color);
        flex-shrink: 0;
        display: none;
        cursor: pointer;
      }
      .tts-sentence-thumb[src=""] {
        display: none !important;
      }

      /* ── 썸네일 팝업 (복사/삭제) ── */
      .tts-thumb-popup {
        position: absolute;
        z-index: 999;
        display: flex;
        gap: 4px;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 4px;
        box-shadow: 0 4px 16px rgba(0,0,0,.25);
        white-space: nowrap;
      }
      .tts-thumb-popup button {
        padding: 4px 10px;
        font-size: 0.78rem;
        font-weight: 600;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-secondary);
        color: var(--text-primary);
        cursor: pointer;
        transition: all .15s;
      }
      .tts-thumb-popup button:hover {
        background: var(--primary-color);
        color: #fff;
        border-color: var(--primary-color);
      }
      .tts-thumb-popup button.delete-btn:hover {
        background: #ef4444;
        border-color: #ef4444;
        color: #fff;
      }

      /* ── 붙여넣기 모드 ── */
      .tts-paste-mode-banner {
        display: none;
        align-items: center;
        gap: 8px;
        padding: 6px 14px;
        margin-bottom: 6px;
        background: color-mix(in srgb, var(--primary-color) 12%, transparent);
        border: 1px solid var(--primary-color);
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--primary-color);
      }
      .tts-paste-mode-banner.active {
        display: flex;
      }
      .tts-paste-mode-banner .paste-cancel-btn {
        margin-left: auto;
        padding: 2px 10px;
        font-size: 0.75rem;
        border: 1px solid var(--primary-color);
        border-radius: 5px;
        background: transparent;
        color: var(--primary-color);
        cursor: pointer;
        font-weight: 600;
      }
      .tts-paste-mode-banner .paste-cancel-btn:hover {
        background: var(--primary-color);
        color: #fff;
      }
      .tts-paste-mode .tts-sentence-item {
        cursor: crosshair;
        transition: background .12s, border-color .12s, box-shadow .12s;
      }
      .tts-paste-mode .tts-sentence-item:hover {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 25%, transparent);
      }
      .tts-paste-highlight {
        background: color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
        border-color: var(--primary-color) !important;
      }

      /* 비율 선택기 */
      .tts-ratio-selector {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        margin-right: 10px;
      }
      .tts-ratio-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
      }
      .tts-ratio-option {
        cursor: pointer;
      }
      .tts-ratio-option input[type="radio"] {
        display: none;
      }
      .tts-ratio-btn {
        display: inline-block;
        padding: 4px 10px;
        font-size: 0.75rem;
        font-weight: 600;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        color: var(--text-secondary);
        background: var(--bg-primary);
        transition: all 0.2s;
      }
      .tts-ratio-option input[type="radio"]:checked + .tts-ratio-btn {
        background: var(--primary-color, #ef4444);
        color: #fff;
        border-color: var(--primary-color, #ef4444);
      }
      .tts-ratio-btn:hover {
        border-color: var(--primary-color, #ef4444);
        color: var(--primary-color, #ef4444);
      }

      /* 반응형 */
      @media (max-width: 900px) {
        .tts-editor-main {
          flex-direction: column;
          height: auto;
          max-height: none;
        }
        .tts-sentence-panel {
          max-height: 400px;
        }
      }

      /* 고급 설정 섹션 */
      .tts-advanced-section {
        margin-top: 16px;
      }
      .tts-advanced-summary {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 500;
        list-style: none;
      }
      .tts-advanced-summary::-webkit-details-marker {
        display: none;
      }
      .tts-advanced-section[open] .tts-advanced-summary {
        border-radius: 8px 8px 0 0;
      }
      .tts-advanced-content {
        padding: 16px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-top: none;
        border-radius: 0 0 8px 8px;
      }

      /* 폼 요소 */
      .tts-form-group {
        margin-bottom: 12px;
      }
      .tts-label {
        display: block;
        font-size: 0.85rem;
        color: var(--text-secondary);
        margin-bottom: 6px;
      }
      .tts-input,
      .tts-select {
        width: 100%;
        padding: 10px 12px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        color: var(--text-primary);
        font-size: 0.9rem;
      }
      .tts-input:focus,
      .tts-select:focus {
        outline: none;
        border-color: var(--primary-color);
      }
      .tts-dropzone {
        padding: 20px;
        border: 2px dashed var(--border-color);
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        color: var(--text-secondary);
        transition: all 0.15s;
      }
      .tts-dropzone:hover,
      .tts-dropzone.dragover {
        border-color: var(--primary-color);
        background: color-mix(in srgb, var(--primary-color) 5%, transparent);
      }

      /* 학습 관련 */
      .tts-training-details,
      .tts-epochs-details {
        margin-top: 12px;
      }
      .tts-training-summary,
      .tts-epochs-details summary {
        padding: 10px 12px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.85rem;
        list-style: none;
      }
      .tts-training-summary::-webkit-details-marker,
      .tts-epochs-details summary::-webkit-details-marker {
        display: none;
      }
      .tts-training-content {
        padding: 12px;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-top: none;
        border-radius: 0 0 6px 6px;
      }
      .tts-slider-group {
        margin-bottom: 12px;
      }
      .tts-slider-group label {
        display: block;
        font-size: 0.85rem;
        color: var(--text-secondary);
        margin-bottom: 4px;
      }
      .tts-slider {
        width: 100%;
        accent-color: var(--primary-color);
      }
      .tts-train-btn,
      .tts-cancel-btn {
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 6px;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        margin-top: 12px;
        transition: all 0.2s ease;
      }
      .tts-train-btn {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        color: white;
      }
      .tts-train-btn:hover {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }
      body.dark-theme .tts-train-btn {
        background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
      }
      body.dark-theme .tts-train-btn:hover {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      }
      .tts-cancel-btn {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
        color: white;
      }
      .tts-cancel-btn:hover {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      }
      body.dark-theme .tts-cancel-btn {
        background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
      }
      body.dark-theme .tts-cancel-btn:hover {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      }
      .tts-progress-bar {
        height: 4px;
        background: var(--bg-tertiary);
        border-radius: 2px;
        overflow: hidden;
      }
      .tts-progress-fill {
        height: 100%;
        background: var(--primary-color);
        width: 0%;
        transition: width 0.3s;
      }
      .tts-training-log {
        max-height: 100px;
        overflow-y: auto;
        font-size: 0.75rem;
        font-family: monospace;
        padding: 8px;
        background: var(--bg-primary);
        border-radius: 4px;
        margin-top: 8px;
      }

      /* 로딩 애니메이션 */
      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .spin {
        animation: spin 1s linear infinite;
      }

      /* Voice Selector Button */
      .voice-selector-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: linear-gradient(
          135deg,
          var(--bg-secondary) 0%,
          var(--bg-tertiary, var(--bg-secondary)) 100%
        );
        border: 1px solid var(--border-color);
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 200px;
      }
      .voice-selector-btn:hover {
        border-color: var(--primary-color);
        box-shadow: 0 4px 12px rgba(var(--primary-rgb, 59, 130, 246), 0.15);
        transform: translateY(-1px);
      }
      .voice-selector-btn:active {
        transform: translateY(0);
      }
      .voice-selector-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          var(--primary-color) 0%,
          #8b5cf6 100%
        );
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        flex-shrink: 0;
      }
      .voice-selector-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        flex: 1;
      }
      .voice-selector-label {
        font-size: 0.75rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .voice-selector-name {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
      }
      .voice-selector-arrow {
        color: var(--text-secondary);
        transition: transform 0.2s ease;
      }
      .voice-selector-btn:hover .voice-selector-arrow {
        transform: translateY(2px);
      }

      /* Vrew 스타일 음성 선택 모달 */
      /* ===== Voice Modal - Independent CSS (not using transparent vars) ===== */
      .voice-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 10000;
        justify-content: center;
        align-items: center;
      }
      .voice-modal {
        background: #1a1a1a;
        border-radius: 12px;
        width: 95%;
        max-width: 1100px;
        height: 85vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        color: #ffffff;
        border: 1px solid #333;
      }
      body:not(.dark-theme) .voice-modal {
        background: #ffffff;
        color: #333333;
        border: 1px solid #e0e0e0;
      }
      .voice-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid #333;
      }
      body:not(.dark-theme) .voice-modal-header {
        border-bottom: 1px solid #e0e0e0;
      }
      .voice-modal-tabs {
        display: flex;
        gap: 8px;
        padding: 12px 20px;
        border-bottom: 1px solid #333;
        background: #111;
      }
      body:not(.dark-theme) .voice-modal-tabs {
        background: #f5f5f5;
        border-bottom: 1px solid #e0e0e0;
      }
      .voice-modal-tab {
        padding: 8px 16px;
        border: none;
        border-radius: 20px;
        background: transparent;
        color: #888;
        cursor: pointer;
        font-size: 0.9rem;
        transition: all 0.2s;
      }
      body:not(.dark-theme) .voice-modal-tab {
        color: #666;
      }
      .voice-modal-tab:hover {
        background: #333;
      }
      body:not(.dark-theme) .voice-modal-tab:hover {
        background: #e0e0e0;
      }
      .voice-modal-tab.active {
        background: #dc2626;
        color: white;
      }
      body:not(.dark-theme) .voice-modal-tab.active {
        background: #dc2626;
      }
      .voice-modal-content {
        display: flex;
        flex: 1;
        overflow: hidden;
      }
      .voice-filter-sidebar {
        width: 220px;
        padding: 16px;
        border-right: 1px solid #333;
        overflow-y: auto;
        background: #111;
      }
      body:not(.dark-theme) .voice-filter-sidebar {
        background: #fafafa;
        border-right: 1px solid #e0e0e0;
      }
      .voice-filter-group {
        margin-bottom: 20px;
      }
      .voice-filter-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: #888;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      body:not(.dark-theme) .voice-filter-title {
        color: #666;
      }
      .voice-filter-reset {
        font-size: 0.75rem;
        color: #666;
        cursor: pointer;
        text-decoration: underline;
      }
      .voice-filter-reset:hover {
        color: #dc2626;
      }
      body:not(.dark-theme) .voice-filter-reset:hover {
        color: #dc2626;
      }
      /* Vrew style toggle buttons */
      .voice-filter-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .voice-filter-btn {
        padding: 6px 12px;
        border: 1px solid #444;
        border-radius: 18px;
        background: transparent;
        color: #aaa;
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      body:not(.dark-theme) .voice-filter-btn {
        border: 1px solid #d0d0d0;
        color: #666;
      }
      .voice-filter-btn:hover {
        border-color: #666;
        background: #222;
      }
      body:not(.dark-theme) .voice-filter-btn:hover {
        border-color: #999;
        background: #f0f0f0;
      }
      .voice-filter-btn.active {
        border-color: #22c55e;
        background: rgba(34, 197, 94, 0.15);
        color: #22c55e;
      }
      .voice-filter-btn.active::before {
        content: "";
        width: 16px;
        height: 16px;
        background: #22c55e;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
      }
      .voice-list-container {
        flex: 1;
        padding: 16px;
        overflow-y: auto;
        background: #1a1a1a;
      }
      body:not(.dark-theme) .voice-list-container {
        background: #ffffff;
      }
      .voice-training-section {
        width: 320px;
        padding: 16px;
        border-left: 1px solid #333;
        overflow-y: auto;
        background: #111;
      }
      body:not(.dark-theme) .voice-training-section {
        background: #f5f5f5;
        border-left-color: #ddd;
      }
      .voice-training-section details {
        margin-top: 0;
      }
      .voice-training-section summary {
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
      }
      .voice-list-header {
        margin-bottom: 12px;
        font-size: 0.85rem;
        color: #888;
      }
      body:not(.dark-theme) .voice-list-header {
        color: #666;
      }
      .voice-grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      /* 엔진별 그룹 스타일 */
      .voice-engine-group {
        margin-bottom: 20px;
      }
      .voice-engine-header {
        font-size: 0.85rem;
        font-weight: 600;
        color: #888;
        padding: 8px 4px;
        border-bottom: 1px solid #333;
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      body:not(.dark-theme) .voice-engine-header {
        color: #666;
        border-bottom-color: #e0e0e0;
      }
      .voice-engine-items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
      }
      .voice-item {
        position: relative;
        padding: 14px 10px;
        border: 2px solid #333;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
        background: #222;
      }
      .voice-item-delete {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 20px;
        height: 20px;
        border: none;
        border-radius: 50%;
        background: rgba(220, 38, 38, 0.8);
        color: #fff;
        font-size: 17px;
        line-height: 18px;
        cursor: pointer;
        display: none;
        padding: 0;
        z-index: 2;
      }
      .voice-item:hover .voice-item-delete {
        display: block;
      }
      .voice-item-delete:hover {
        background: #dc2626;
        transform: scale(1.15);
      }
      body:not(.dark-theme) .voice-item {
        background: #fafafa;
        border: 2px solid #e0e0e0;
      }
      .voice-item:hover {
        border-color: #dc2626;
        background: #2a2a2a;
      }
      body:not(.dark-theme) .voice-item:hover {
        border-color: #dc2626;
        background: #f0f0f0;
      }
      .voice-item.selected {
        border-color: #dc2626;
        background: rgba(220, 38, 38, 0.15);
      }
      body:not(.dark-theme) .voice-item.selected {
        border-color: #dc2626;
        background: rgba(220, 38, 38, 0.1);
      }
      /* Character avatar */
      .voice-item-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin: 0 auto 8px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: white;
        font-weight: 600;
      }
      .voice-item-avatar.male {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }
      .voice-item-avatar.female {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }
      .voice-item-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
      }
      .voice-item-name {
        font-weight: 500;
        margin-bottom: 4px;
        font-size: 0.9rem;
      }
      .voice-item-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
        margin-top: 6px;
      }
      .voice-tag {
        font-size: 0.7rem;
        padding: 2px 6px;
        border-radius: 10px;
        background: #333;
        color: #aaa;
      }
      body:not(.dark-theme) .voice-tag {
        background: #e8e8e8;
        color: #666;
      }
      .voice-tag.recommend {
        background: #dc2626;
        color: white;
      }
      body:not(.dark-theme) .voice-tag.recommend {
        background: #dc2626;
      }
      .voice-tag.trained {
        background: #10b981;
        color: white;
      }
      .voice-tag.style {
        background: #f59e0b;
        color: white;
      }
      .voice-tag.multilang {
        background: #8b5cf6;
        color: white;
      }
      .voice-modal-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 20px;
        border-top: 1px solid #333;
        background: #111;
      }
      body:not(.dark-theme) .voice-modal-footer {
        background: #f5f5f5;
        border-top: 1px solid #e0e0e0;
      }
      .voice-settings {
        display: flex;
        gap: 12px;
        align-items: center;
      }
      .voice-setting-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.85rem;
        color: #888;
        background: #222;
        padding: 6px 12px;
        border-radius: 6px;
        border: 1px solid #333;
      }
      body:not(.dark-theme) .voice-setting-item {
        background: #fff;
        border: 1px solid #ddd;
        color: #666;
      }
      .voice-setting-item select {
        padding: 2px 6px;
        border: none;
        background: transparent;
        color: inherit;
        font-size: 0.85rem;
        cursor: pointer;
      }
      .voice-setting-slider-wrap {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .voice-setting-slider-wrap input[type="range"] {
        width: 80px;
        height: 4px;
        -webkit-appearance: none;
        appearance: none;
        background: #444;
        border-radius: 2px;
        outline: none;
        cursor: pointer;
      }
      body:not(.dark-theme) .voice-setting-slider-wrap input[type="range"] {
        background: #ddd;
      }
      .voice-setting-slider-wrap input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 12px;
        height: 12px;
        background: var(--primary-color, #6366f1);
        border-radius: 50%;
        cursor: pointer;
      }
      .voice-setting-slider-wrap input[type="range"]::-moz-range-thumb {
        width: 12px;
        height: 12px;
        background: var(--primary-color, #6366f1);
        border: none;
        border-radius: 50%;
        cursor: pointer;
      }
      .voice-setting-slider-wrap span {
        min-width: 32px;
        font-size: 0.8rem;
        color: var(--text-primary);
      }
      .voice-setting-reset {
        padding: 6px 12px;
        border: 1px solid #444;
        border-radius: 6px;
        background: transparent;
        color: #888;
        cursor: pointer;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      body:not(.dark-theme) .voice-setting-reset {
        border: 1px solid #ddd;
        color: #666;
      }
      .voice-setting-reset:hover {
        background: #333;
      }
      body:not(.dark-theme) .voice-setting-reset:hover {
        background: #eee;
      }
      .voice-modal-confirm {
        padding: 10px 28px;
        background: #22c55e;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 0.95rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s;
      }
      .voice-modal-confirm:hover {
        background: #16a34a;
      }
      /* Voice preview panel */
      .voice-preview-panel {
        display: none;
        padding: 12px 16px;
        background: #0d0d0d;
        border-top: 1px solid #333;
      }
      body:not(.dark-theme) .voice-preview-panel {
        background: #f0f0f0;
        border-top: 1px solid #e0e0e0;
      }
      .voice-preview-panel.active {
        display: block;
      }
      .voice-preview-content {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      .voice-preview-info {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 120px;
      }
      .voice-preview-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: white;
        font-weight: 600;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      .voice-preview-avatar.male {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }
      .voice-preview-avatar.female {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }
      .voice-preview-name {
        font-weight: 500;
        font-size: 0.9rem;
      }
      .voice-preview-engine {
        font-size: 0.75rem;
        color: #888;
        background: #222;
        padding: 2px 6px;
        border-radius: 4px;
      }
      body:not(.dark-theme) .voice-preview-engine {
        background: #ddd;
        color: #666;
      }
      .voice-sample-select {
        flex: 1;
        min-width: 200px;
        padding: 8px 12px;
        border: 1px solid #444;
        border-radius: 6px;
        background: #222;
        color: #fff;
        font-size: 0.85rem;
      }
      body:not(.dark-theme) .voice-sample-select {
        background: #fff;
        border: 1px solid #ddd;
        color: #333;
      }
      .voice-play-btn {
        padding: 8px 16px;
        background: #22c55e;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: background 0.2s;
      }
      .voice-play-btn:hover {
        background: #16a34a;
      }
      .voice-play-btn:disabled {
        background: #444;
        cursor: not-allowed;
      }
      .voice-play-btn.playing {
        background: #dc2626;
      }
      /* Supertonic steps slider */
      .voice-steps-control {
        display: none;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: #1a1a1a;
        border-radius: 6px;
        border: 1px solid #333;
      }
      body:not(.dark-theme) .voice-steps-control {
        background: #f5f5f5;
        border: 1px solid #ddd;
      }
      .voice-steps-control.active {
        display: flex;
      }
      .voice-steps-label {
        font-size: 0.8rem;
        color: #888;
        white-space: nowrap;
      }
      .voice-steps-slider {
        width: 100px;
        accent-color: #f59e0b;
      }
      .voice-steps-value {
        font-size: 0.85rem;
        font-weight: 600;
        color: #f59e0b;
        min-width: 24px;
        text-align: center;
      }
      /* Search input styling */
      #voiceSearchInput {
        padding: 6px 12px;
        border: 1px solid #444;
        border-radius: 20px;
        background: #222;
        color: #fff;
        font-size: 0.85rem;
        width: 150px;
      }
      body:not(.dark-theme) #voiceSearchInput {
        background: #fff;
        border: 1px solid #ddd;
        color: #333;
      }
      #voiceSearchInput::placeholder {
        color: #888;
      }
      body:not(.dark-theme) #voiceSearchInput::placeholder {
        color: #999;
      }

/* ============================================
   자막 스타일 편집 UI (tools.html 4970-5506)
   글꼴 툴바, 컬러 팔레트, 스타일 팝업, 정렬, 위치
   ============================================ */

/* 글꼴 스타일 툴바 */
.stt-font-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--stt-panel-bg);
  border-radius: 8px;
  border: 1px solid var(--stt-border);
  gap: 8px;
  flex-wrap: wrap;
}

.stt-font-toolbar-left,
.stt-font-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.stt-font-btn {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--stt-border);
  border-radius: 4px;
  background: var(--stt-card-bg);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
}

.stt-font-btn:hover {
  background: var(--stt-accent-weak);
  border-color: var(--stt-accent);
}

.stt-font-btn.active {
  background: var(--stt-accent);
  color: white;
  border-color: var(--stt-accent);
}

.stt-font-italic {
  font-style: italic;
}

.stt-font-divider {
  width: 1px;
  height: 30px;
  background: var(--stt-border);
  margin: 0 4px;
}

.stt-font-select {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--stt-border);
  border-radius: 4px;
  background: var(--stt-card-bg);
  color: var(--text-primary);
  font-size: 0.82rem;
  cursor: pointer;
  min-width: 140px;
  box-sizing: border-box;
}

.stt-font-size-direct {
  min-width: 60px;
  width: 60px;
  text-align: center;
}

.stt-color-picker-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stt-color-picker {
  width: 28px;
  height: 28px;
  border: 1px solid var(--stt-border);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}

.stt-color-label {
  font-size: 0.75rem;
  color: var(--stt-muted);
}

/* Vrew 스타일 컬러 팔레트 */
.stt-color-btn {
  position: relative;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--stt-border);
  border-radius: 4px;
  background: var(--stt-card-bg);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}

.stt-color-btn:hover {
  background: var(--stt-accent-weak);
  border-color: var(--stt-accent);
}

.stt-color-btn.active {
  background: var(--stt-accent);
  color: white;
  border-color: var(--stt-accent);
}

.stt-color-preview {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.stt-color-glyph {
  position: relative;
  display: block;
  line-height: 1;
  padding-bottom: 4px;
}

.stt-color-underline {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  border-radius: 1px;
}

/* 컬러 팔레트 팝업 */
.stt-palette-popup {
  position: fixed;
  margin-top: 6px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 12px;
  z-index: 9999;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 280px;
}

.stt-palette-popup.show {
  display: block;
}

.stt-palette-header {
  font-size: 0.85rem;
  font-weight: 500;
  color: #888;
  margin-bottom: 10px;
}

.stt-palette-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}

.stt-palette-color {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.1s, border-color 0.1s;
}

.stt-palette-color:hover {
  transform: scale(1.15);
  border-color: white;
}

.stt-palette-color.selected {
  border-color: white;
  box-shadow: 0 0 0 2px var(--stt-accent);
}

.stt-palette-recent {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #333;
}

.stt-palette-recent-colors {
  display: flex;
  gap: 6px;
  flex: 1;
}

.stt-palette-tools {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.stt-palette-tool-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #444;
  background: #222;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.stt-palette-tool-btn:hover {
  background: #333;
  border-color: #555;
}

/* 인라인 컬러 피커 (테두리, 배경, 형광펜, 그림자용) */
.stt-inline-color-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stt-inline-color-preview {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 2px solid #444;
  cursor: pointer;
  transition: all 0.15s;
}

.stt-inline-color-preview:hover {
  border-color: #666;
  transform: scale(1.05);
}

.stt-inline-palette {
  display: block;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.stt-inline-palette.show {
  display: block;
}

.stt-inline-palette-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  margin-bottom: 8px;
}

.stt-inline-palette-grid .stt-palette-color {
  width: 20px;
  height: 20px;
}

.stt-inline-palette-custom {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid #333;
}

.stt-inline-palette-custom input[type="color"] {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  background: transparent;
}

/* 스타일 버튼 (테두리, 배경, 형광펜, 그림자) */
.stt-style-btn {
  position: relative;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--stt-border);
  border-radius: 4px;
  background: var(--stt-card-bg);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  box-sizing: border-box;
}

.stt-style-btn:hover {
  background: var(--stt-accent-weak);
  border-color: var(--stt-accent);
}

.stt-style-btn.active {
  background: var(--stt-accent);
  color: white;
  border-color: var(--stt-accent);
}

.stt-style-btn-icon {
  font-weight: 700;
  font-size: 0.9rem;
}

/* 스타일 옵션 팝업 */
.stt-style-popup {
  position: fixed;
  margin-top: 6px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 14px;
  z-index: 9999;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 220px;
}

.stt-style-popup.show {
  display: block;
}

.stt-style-remove-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #ff6b6b;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.stt-style-remove-btn:hover {
  background: rgba(255, 107, 107, 0.1);
  border-color: rgba(255, 107, 107, 0.4);
}

.stt-style-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.stt-style-row:last-child {
  margin-bottom: 0;
}

.stt-style-label {
  font-size: 0.8rem;
  color: #aaa;
}

.stt-style-input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #222;
  color: white;
  font-size: 0.8rem;
  text-align: center;
}

.stt-style-slider {
  width: 100px;
  cursor: pointer;
}

/* 슬라이더 행 레이아웃 */
.stt-style-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.stt-style-slider-row:last-of-type {
  margin-bottom: 0;
}
.stt-style-slider-row .stt-style-label {
  min-width: 38px;
  flex-shrink: 0;
}
.stt-style-range {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #333;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.stt-style-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #666;
  cursor: pointer;
}
.stt-style-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #666;
  cursor: pointer;
}
.stt-style-range-val {
  min-width: 32px;
  text-align: right;
  font-size: 0.75rem;
  color: #aaa;
  flex-shrink: 0;
}

/* 간격 드롭다운 */
.stt-spacing-btn {
  position: relative;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--stt-border);
  border-radius: 4px;
  background: var(--stt-card-bg);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}

.stt-spacing-btn:hover {
  background: var(--stt-accent-weak);
  border-color: var(--stt-accent);
}

.stt-spacing-popup {
  position: fixed;
  margin-top: 6px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 14px;
  z-index: 9999;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  min-width: 260px;
}

.stt-spacing-popup.show {
  display: block;
}

.stt-align-group {
  display: flex;
  gap: 2px;
}

.stt-align-btn {
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 0.82rem !important;
}

.stt-position-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--stt-border);
  border-radius: 4px;
  background: var(--stt-card-bg);
}

.stt-position-label {
  font-size: 0.75rem;
  color: var(--stt-muted);
  font-weight: 600;
}

.stt-position-input {
  width: 40px;
  padding: 2px 4px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.8rem;
  text-align: center;
}

/* 자막 세로 위치 그룹 */
.stt-vposition-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--stt-border);
  border-radius: 4px;
  background: var(--stt-card-bg);
}

.stt-vpos-btn {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--stt-border);
  border-radius: 4px;
  background: var(--stt-card-bg);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.stt-vpos-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.stt-vpos-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.stt-vpos-arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 8px;
}

.stt-vpos-arrows button {
  width: 24px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--stt-border);
  border-radius: 3px;
  background: var(--stt-card-bg);
  color: var(--text-secondary);
  font-size: 0.65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.stt-vpos-arrows button:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.stt-vpos-arrows button:active {
  background: var(--primary-color);
  color: white;
}

/* stt-style-btn-wrapper - relative positioning for popups */
.stt-style-btn-wrapper {
  position: relative;
  flex-shrink: 0;
}

.stt-style-split-btn {
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
}

.stt-style-main-btn {
    min-height: 54px !important;
    height: 54px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
  }

.stt-style-toggle-btn {
    width: 34px;
    min-width: 34px;
    min-height: 54px;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.04);
  color: #aaa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}

.stt-style-toggle-btn:hover {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.stt-style-toggle-switch {
  position: relative;
  width: 16px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s;
}

.stt-style-toggle-knob {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #8b8b96;
  transition: transform 0.2s, background 0.2s;
}

.stt-style-btn-wrapper.is-enabled .stt-style-toggle-switch {
  background: rgba(220, 38, 38, 0.3);
}

.stt-style-btn-wrapper.is-enabled .stt-style-toggle-knob {
  transform: translateY(12px);
  background: #f87171;
}

.stt-style-btn-wrapper.is-enabled .stt-style-main-btn {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.06);
}

.stt-color-btn-wrapper {
  flex-shrink: 0;
}

.stt-spacing-wrapper {
  position: relative;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   TTS 이미지 설정 사이드 패널
   ═══════════════════════════════════════════ */
.tts-img-settings-panel {
  width: 380px;
  right: -400px;
}

.tts-img-settings-panel.show {
  right: 0;
}

/* 비율 선택 카드 */
.tts-img-settings-ratio-row {
  display: flex;
  gap: 12px;
}

.tts-img-settings-ratio-option {
  flex: 1;
  cursor: pointer;
}

.tts-img-settings-ratio-option input[type="radio"] {
  display: none;
}

.tts-img-settings-ratio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border: 2px solid #333;
  border-radius: 10px;
  background: #222;
  transition: all 0.2s;
}

.tts-img-settings-ratio-card span {
  font-size: 0.9rem;
  font-weight: 600;
  color: #aaa;
}

.tts-img-settings-ratio-icon {
  border: 2px solid #666;
  border-radius: 3px;
  background: transparent;
  transition: all 0.2s;
}

.tts-img-settings-ratio-option input[type="radio"]:checked + .tts-img-settings-ratio-card {
  border-color: var(--primary-color);
  background: rgba(220, 38, 38, 0.1);
}

.tts-img-settings-ratio-option input[type="radio"]:checked + .tts-img-settings-ratio-card span {
  color: #fff;
}

.tts-img-settings-ratio-option input[type="radio"]:checked + .tts-img-settings-ratio-card .tts-img-settings-ratio-icon {
  border-color: var(--primary-color);
}

.tts-img-settings-ratio-card:hover {
  border-color: #555;
  background: #2a2a2a;
}

/* 셀렉트 */
.tts-img-settings-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #222;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  outline: none;
}

.tts-img-settings-select:focus {
  border-color: var(--primary-color);
}

/* 텍스트에어리어 */
.tts-img-settings-textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #222;
  color: #fff;
  font-size: 0.9rem;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
  outline: none;
}

.tts-img-settings-textarea:focus {
  border-color: var(--primary-color);
}

.tts-img-settings-textarea::placeholder {
  color: #666;
}

/* 전체 이미지 생성 버튼 */
.tts-img-settings-gen-btn {
  width: 100%;
  padding: 14px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}

.tts-img-settings-gen-btn:hover {
  filter: brightness(1.15);
}

/* TTS 이미지 컨테이너가 좌측 프리뷰에 있을 때 */
.preview-video-area .tts-image-container {
  position: absolute;
  z-index: 2;
  /* 크기/위치는 JS _updateTtsContainerSize()에서 계산 */
}

.preview-video-area .tts-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ═══════════════════════════════════════════
   자동 클립 나누기 사이드 패널 CSS
   ═══════════════════════════════════════════ */
.stt-clip-split-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: none;
}

.stt-clip-split-overlay.show {
  display: block;
}

.stt-clip-split-panel {
  position: fixed;
  top: 0;
  right: -360px;
  width: 340px;
  height: 100vh;
  background: #1a1a1a;
  border-left: 1px solid #333;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  box-shadow: -4px 0 20px rgba(0,0,0,0.3);
}

.stt-clip-split-panel.show {
  right: 0;
}

.stt-clip-split-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #333;
}

.stt-clip-split-header h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: #fff;
}

.stt-clip-split-close {
  background: none;
  border: none;
  color: #888;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.stt-clip-split-close:hover {
  background: #333;
  color: #fff;
}

.stt-clip-split-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.stt-clip-scope-section {
  margin-bottom: 16px;
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
}

.stt-clip-scope-header {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  background: #222;
  transition: background 0.2s;
}

.stt-clip-scope-header:hover {
  background: #2a2a2a;
}

.stt-clip-scope-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}

.stt-clip-scope-value {
  margin-left: 12px;
  font-size: 0.85rem;
  color: #888;
}

.stt-clip-scope-arrow {
  margin-left: auto;
  font-size: 0.7rem;
  color: #666;
  transition: transform 0.2s;
}

.stt-clip-scope-arrow.open {
  transform: rotate(180deg);
}

.stt-clip-scope-dropdown {
  display: none;
  padding: 8px 0;
  background: #1a1a1a;
  border-top: 1px solid #333;
}

.stt-clip-scope-dropdown.show {
  display: block;
}

.stt-clip-scope-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.stt-clip-scope-option:hover:not(.disabled) {
  background: #252525;
}

.stt-clip-scope-option.selected {
  background: rgba(99, 102, 241, 0.1);
}

.stt-clip-scope-option.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.stt-clip-scope-option input[type="radio"] {
  accent-color: var(--primary-color);
}

.stt-clip-scope-option span {
  font-size: 0.85rem;
  color: #ddd;
}

.stt-clip-scope-option.selected span {
  color: #fff;
}

.stt-clip-preview-box {
  background: #0d0d0d;
  border-radius: 8px;
  padding: 40px 20px;
  margin-bottom: 24px;
  text-align: center;
}

.stt-clip-preview-text {
  font-size: 1rem;
  color: #fff;
  line-height: 1.6;
}

.stt-clip-section {
  margin-bottom: 24px;
}

.stt-clip-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}

.stt-clip-chars-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.stt-max-chars-indicator {
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 0.9rem;
  color: var(--primary-color);
  font-weight: 600;
}

.stt-clip-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #333;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.stt-clip-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.stt-clip-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #666;
  margin-top: 6px;
  margin-bottom: 12px;
}

.stt-clip-chars-input-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.stt-clip-chars-input {
  width: 60px;
  padding: 6px 10px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #2a2a2a;
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
}

.stt-clip-chars-unit {
  font-size: 0.85rem;
  color: #888;
}

.stt-clip-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #333;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.stt-clip-option:hover {
  border-color: #555;
}

.stt-clip-option.selected {
  border-color: var(--primary-color);
  background: rgba(99, 102, 241, 0.1);
}

.stt-clip-option input[type="radio"] {
  margin-top: 2px;
  accent-color: var(--primary-color);
}

.stt-clip-option-content {
  flex: 1;
}

.stt-clip-option-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
}

.stt-clip-option.selected .stt-clip-option-title {
  color: var(--primary-color);
}

.stt-clip-option-desc {
  font-size: 0.8rem;
  color: #888;
  line-height: 1.4;
}

.stt-clip-split-footer {
  padding: 16px 20px;
  border-top: 1px solid #333;
  display: flex;
  gap: 10px;
}

.stt-clip-apply-btn {
  flex: 1;
  padding: 12px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.stt-clip-apply-btn:hover {
  filter: brightness(1.15);
}

.stt-clip-undo-btn {
  padding: 12px 16px;
  background: #2a2a2a;
  color: #888;
  border: 1px solid #444;
  border-radius: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.stt-clip-undo-btn:hover:not(:disabled) {
  background: #333;
  color: #fff;
}

.stt-clip-undo-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   Studio Home Panel & Workflow Cards
   ============================================ */

/* Home toolbar workflow buttons */
.home-workflow-btn {
  font-weight: 500;
}

/* Home panel body */
.home-panel-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
}

.home-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
  width: 100%;
}

.home-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 20px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.home-card:hover {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.25);
}

.home-card:active {
  border-color: #dc2626;
}

.home-card-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-card-icon svg {
  width: 24px;
  height: 24px;
}

.home-card-icon.red {
  background: rgba(220, 38, 38, 0.15);
  color: #ef4444;
}

.home-card-icon.blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.home-card-icon.green {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.home-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-card-info h3 {
  font-size: 17px;
  font-weight: 600;
  color: #e0e0e0;
  margin: 0;
}

.home-card-info p {
  font-size: 15px;
  color: #888;
  margin: 0;
}

.home-card-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.home-card-steps span {
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: #aaa;
  white-space: nowrap;
}

.home-card-steps .arrow {
  background: none;
  padding: 0;
  color: #555;
  font-size: 12px;
}

/* Whisper 인라인 패널 */
.whisper-inline-info {
  padding: 16px;
}

.whisper-inline-file {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px 16px;
}

.whisper-inline-progress {
  padding: 0 16px 16px;
}

.whisper-inline-result {
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.whisper-seg-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.whisper-seg-item:hover {
  background: #141414;
}

.whisper-seg-time {
  font-size: 14px;
  color: #888;
  white-space: nowrap;
  min-width: 90px;
  padding-top: 2px;
}

.whisper-seg-text {
  flex: 1;
  font-size: 16px;
  color: #e0e0e0;
  outline: none;
  min-height: 20px;
  line-height: 1.5;
}

.whisper-seg-text:focus {
  background: rgba(220, 38, 38, 0.05);
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
}

/* Source 홈 화면 안내 배너 */
.source-home-guide {
  padding: 16px;
}

.source-home-guide-inner {
  display: flex;
  gap: 16px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 20px 24px;
}

.source-guide-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.source-guide-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 20px;
}

.source-guide-url-row {
  display: flex;
  gap: 8px;
}

.source-guide-url-input {
  flex: 1;
  height: 38px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 0 12px;
  color: #e0e0e0;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
}

.source-guide-url-input:focus {
  border-color: #dc2626;
}

.source-guide-url-input::placeholder {
  color: #555;
}

.source-home-guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s;
}

.source-home-guide-btn:hover {
  background: #b91c1c;
}

/* toolbar 내 소스 안내 */
.toolbar-source-guide {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    background: transparent;
  }

.toolbar-source-guide-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* ─── Whisper 포스트 추출 툴바 (상단 toolbar 내) ─── */
.whisper-post-toolbar {
  display: contents;
}

/* 컴팩트 툴바 버튼 (자막스타일 탭) */
.toolbar-btn.stt-tb-compact {
    min-height: 54px;
    height: 54px;
    padding: 6px 12px;
    gap: 2px;
    font-size: 18px;
    position: relative;
  }

/* 자막스타일 버튼 활성 상태 표시 */
.toolbar-btn.stt-tb-compact.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.toolbar-btn.stt-tb-compact.active::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  opacity: 0.7;
}

.toolbar-btn.stt-tb-mini {
  min-height: 42px;
  padding: 4px 10px;
  font-size: 14px;
  gap: 2px;
  flex-direction: row;
}

.stt-type-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 툴바 내 글꼴 select 스타일 */
.toolbar-select.stt-tb-font-select {
    height: 54px;
    min-height: 54px;
    max-width: 140px;
    font-size: 18px;
  }

/* 폰트 크기 콤보 (드롭다운 + 직접입력) */
.stt-fontsize-combo {
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
  min-width: 108px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
    #171717;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  overflow: visible;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.stt-fontsize-combo:hover {
  border-color: rgba(255,255,255,0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
    #1b1b1b;
}

.stt-fontsize-display {
  min-width: 68px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  color: #f3f4f6;
  font-size: 18px;
  font-weight: 700;
  cursor: text;
  user-select: none;
}

.stt-fontsize-display:hover {
  background: transparent;
}

.stt-fontsize-arrow {
  width: 32px;
  height: 100%;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.stt-fontsize-arrow:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.stt-fontsize-edit {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 32px);
  height: 100%;
  border: none;
  border-radius: 12px 0 0 12px;
  background: #202020;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}

.stt-fontsize-edit::-webkit-outer-spin-button,
.stt-fontsize-edit::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stt-fontsize-dropdown {
  display: none;
  position: fixed;
  min-width: 108px;
  max-height: 240px;
  overflow-y: auto;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 6px;
  z-index: 1000;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.stt-fontsize-dropdown.show {
  display: block;
}

.stt-fontsize-option {
  padding: 8px 12px;
  font-size: 17px;
  color: #d1d5db;
  cursor: pointer;
  border-radius: 8px;
  text-align: center;
}

.stt-fontsize-option:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.stt-fontsize-option.selected {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
}

/* ─── 프리셋 저장/불러오기 팝업 ─── */
.stt-preset-wrapper {
  position: relative;
}

.stt-preset-popup {
  display: none;
  position: fixed;
  width: 260px;
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 16px;
  z-index: 1100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.stt-preset-popup.show {
  display: block;
}

.stt-preset-popup-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.stt-preset-popup-desc {
  font-size: 15px;
  color: #888;
  margin-bottom: 12px;
}

.stt-preset-name-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #444;
  border-radius: 6px;
  background: #141414;
  color: #fff;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
}

.stt-preset-name-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

.stt-preset-existing {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 130px;
  overflow-y: auto;
}

.stt-preset-existing-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: #141414;
  border: 1px solid #333;
  border-radius: 6px;
  font-size: 15px;
  color: #ccc;
  cursor: pointer;
}

.stt-preset-existing-item:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.stt-preset-existing-item .preset-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stt-preset-popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}

.stt-preset-btn {
  padding: 6px 16px;
  border: 1px solid #444;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
}

.stt-preset-btn.cancel {
  background: transparent;
  color: #aaa;
}

.stt-preset-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.stt-preset-btn.confirm {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.stt-preset-btn.confirm:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* 불러오기 목록 */
.stt-preset-load-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.stt-preset-load-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background: #141414;
  border: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.stt-preset-load-item:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: #1a1a1a;
}

.stt-preset-load-item .preset-name {
  flex: 1;
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stt-preset-load-item .preset-delete {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #666;
  font-size: 17px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stt-preset-load-item .preset-delete:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}

.stt-preset-empty {
  padding: 16px;
  text-align: center;
  color: #666;
  font-size: 15px;
}

/* ON/OFF 토글 스위치 */
.stt-toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.stt-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.stt-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #333;
  border-radius: 22px;
  transition: background 0.25s;
}

.stt-toggle-slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: #888;
  border-radius: 50%;
  transition: transform 0.25s, background 0.25s;
}

.stt-toggle-switch input:checked + .stt-toggle-slider {
  background: var(--stt-accent, #dc2626);
}

.stt-toggle-switch input:checked + .stt-toggle-slider::before {
  transform: translateX(18px);
  background: #fff;
}

/* 팝업 내 섹션 제목 */
.stt-popup-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

/* 팝업 내 구분선 */
.stt-popup-divider {
  height: 1px;
  background: #333;
  margin: 10px 0;
}

/* 팝업 내 정렬/위치 버튼 */
.stt-popup-align-btn {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #444;
  border-radius: 4px;
  background: #222;
  color: #ccc;
  cursor: pointer;
  font-size: 0.78rem;
  text-align: center;
  transition: all 0.15s;
}

.stt-popup-align-btn:hover {
  background: #333;
  border-color: #555;
  color: #fff;
}

.stt-popup-align-btn.active {
  background: var(--stt-accent, #dc2626);
  border-color: var(--stt-accent, #dc2626);
  color: #fff;
}

/* ─── STT Whisper 자막 편집기 스타일 ─── */

/* whisper-editor-toolbar */
.whisper-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--stt-border);
  gap: 8px;
  flex-shrink: 0;
}

.whisper-editor-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.whisper-editor-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 세그먼트 카운터 */
.stt-segment-counter {
  font-size: 0.75rem;
  color: var(--stt-muted);
  font-weight: 400;
}

/* 검색 입력 */
.stt-search-input {
  padding: 6px 10px;
  border: 1px solid var(--stt-border);
  border-radius: 6px;
  background: var(--stt-card-bg);
  color: var(--text-primary);
  font-size: 0.8rem;
  width: 120px;
  transition: width 0.2s;
  outline: none;
}

.stt-search-input:focus {
  width: 160px;
  border-color: var(--stt-accent);
}

/* 세그먼트 리스트 */
.stt-segment-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px;
}

.stt-segment-list::-webkit-scrollbar {
  width: 6px;
}

.stt-segment-list::-webkit-scrollbar-track {
  background: transparent;
}

.stt-segment-list::-webkit-scrollbar-thumb {
  background: var(--stt-border);
  border-radius: 3px;
}

/* 세그먼트 카드 - Vrew 스타일 */
.stt-segment-item {
  background: var(--stt-card-bg);
  border-radius: 8px;
  padding: 6px 10px;
  border: 1px solid transparent;
  margin-bottom: 3px;
  transition: all 0.2s ease;
  position: relative;
}

.stt-segment-item:last-child {
  margin-bottom: 0;
}

.stt-segment-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 3px;
  background: transparent;
  transition: background 0.2s;
}

.stt-segment-item:hover {
  background: var(--stt-card-hover);
  border-color: var(--stt-border);
}

.stt-segment-item.active {
  background: var(--stt-card-active);
  border-color: var(--stt-accent-weak);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stt-segment-item.active::before {
  background: var(--stt-accent);
}

/* 클립 썸네일 — 클립 시작 프레임(Vrew 방식). 두 행에 걸쳐 우측에 놓는다 (ui/stt-thumbs.js) */
.stt-segment-item.has-thumb {
  padding-right: 104px;
  /* 썸네일(48px) 높이 확보. 목록이 세로 flex 라 min-height 를 주면 기본값(auto=내용 높이)이
     풀려 클립이 많을 때 카드가 눌린다 — 줄지 않게 막는다. */
  min-height: 60px;
  flex-shrink: 0;
}

.stt-segment-thumb {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 48px;
  max-width: 86px;
  border-radius: 4px;
  background: #000;
}

/* 갭 버튼 [...] (무음 구간, 단어 뒤에 인라인) */
.stt-gap-btn {
  opacity: 0.4;
  border-style: dashed !important;
}
.stt-gap-btn:hover {
  opacity: 0.8;
}

.stt-gap-cut-btn {
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #fca5a5 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

.stt-gap-cut-btn:hover {
  background: rgba(239, 68, 68, 0.18) !important;
}

/* 세그먼트 번호 (인라인) */
.stt-segment-number {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--stt-muted);
  min-width: 20px;
  flex-shrink: 0;
  text-align: right;
}

/* 세그먼트 타임스탬프 (인라인 우측) */
.stt-segment-timestamp {
  cursor: pointer;
  color: #777;
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 1px 4px;
  border-radius: 3px;
  transition: all 0.15s;
}

.stt-segment-timestamp:hover {
  background: var(--stt-accent);
  color: white;
}

/* stt-segment-play-btn 제거됨 — 인라인 타임스탬프로 대체 */

/* 세그먼트 텍스트 - 단어별 렌더링 */
.stt-segment-text {
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--text-primary);
  padding: 6px 8px;
  border-radius: 4px;
}

.stt-segment-text .word {
  display: inline;
  padding: 1px 2px;
  margin: 0 1px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.1s;
}

.stt-segment-text .word:hover {
  background: var(--stt-accent-weak);
}

.stt-segment-text .word.is-active {
  background: var(--stt-accent);
  color: white;
}

/* 단어 인라인 편집 */
.stt-segment-text .word-edit-input {
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  padding: 2px 4px;
  margin: 0 1px;
  border: 1px solid var(--stt-accent);
  border-radius: 4px;
  background: var(--stt-panel-bg);
  color: var(--text-primary);
  outline: none;
  box-shadow: 0 0 0 2px var(--stt-accent-weak);
  min-width: 30px;
}

.stt-segment-text .word.editing {
  background: var(--stt-accent);
  color: white;
}

/* 세그먼트 편집 모드 */
.stt-segment-textarea {
  width: 100%;
  border: 1px solid var(--stt-border);
  background: var(--stt-panel-bg);
  color: var(--text-primary);
  font-size: 0.85rem;
  line-height: 1.45;
  resize: vertical;
  outline: none;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: inherit;
  min-height: 50px;
}

.stt-segment-textarea:focus {
  border-color: var(--stt-accent);
  box-shadow: 0 0 0 2px var(--stt-accent-weak);
}

/* 편집 모드 스타일 */
.stt-segment-item.editing {
  background: var(--stt-card-active) !important;
  border-color: var(--stt-accent) !important;
  box-shadow: 0 0 0 2px var(--stt-accent-weak);
}

/* 저장/취소 버튼 */
.stt-segment-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}

.stt-edit-save,
.stt-edit-cancel {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.stt-edit-save {
  background: var(--stt-accent);
  color: white;
}

.stt-edit-save:hover {
  filter: brightness(1.1);
}

.stt-edit-cancel {
  background: var(--stt-card-bg);
  color: var(--text-secondary);
  border: 1px solid var(--stt-border);
}

.stt-edit-cancel:hover {
  background: var(--stt-card-hover);
}

/* 세그먼트 행 구조 */
.stt-segment-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 0;
}

.stt-segment-row.stt-segment-main {
  padding-bottom: 2px;
}

.stt-segment-row.stt-segment-words {
  padding-left: 26px;
  padding-top: 0;
}

.stt-segment-row-content {
  flex: 1;
  min-width: 0;
}

/* scrollIntoView 시 세그먼트 헤더가 잘리지 않도록 여유 확보 */
.stt-segment-item {
  scroll-margin: 8px 0;
}
.stt-subtitle-input,
.stt-original-words {
  scroll-margin-top: 36px;
}

/* 원본 STT 단어들 */
.stt-original-words {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.stt-word-btn {
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  background: transparent;
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s;
}

.stt-word-btn:hover {
  background: #333;
  border-color: #555;
}

.stt-word-btn.is-active {
  background: #444;
  color: white;
  border-color: #555;
}

.stt-word-btn.uncertain {
  border-color: #f59e0b;
  color: #f59e0b;
}

.stt-word-btn.deleted {
  text-decoration: line-through;
  opacity: 0.5;
}

/* 단어 선택됨 (클릭 → 팝업 열림) */
.stt-word-btn.is-selected {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.3);
}

/* 단어 네비게이션 하이라이트 (방향키 이동) - 레거시 */
.stt-word-btn.is-nav {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.4);
}

/* 단어 사이 캐럿 커서 (I-beam) */
.stt-word-caret {
  display: inline-block;
  width: 2px;
  height: 1.3em;
  background: #60a5fa;
  vertical-align: middle;
  margin: 0 -1px;
  border-radius: 1px;
  animation: stt-caret-blink 1s step-end infinite;
  position: relative;
  z-index: 1;
}

@keyframes stt-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 단어 컨테이너 포커스 시 외곽선 */
.stt-original-words:focus {
  outline: 1px solid rgba(96, 165, 250, 0.3);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 단어 시간 조절 팝업 (파형 에디터) */
.stt-word-timing-popup {
  position: fixed;
  z-index: 10000;
  background: #1c2128;
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 10px;
  padding: 12px 12px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  width: 420px;
}

.swtp-waveform-wrap {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  cursor: default;
}

.swtp-waveform-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.swtp-handle {
  position: absolute;
  top: 0;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
  z-index: 2;
  transform: translateX(-50%);
}

.swtp-handle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
}

.swtp-handle-start::after { background: #ffffff; }
.swtp-handle-end::after { background: #ffffff; }

.swtp-handle::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 14px;
  border-radius: 2px;
  top: 50%;
  margin-top: -7px;
}

.swtp-handle-start::before { background: #ffffff; }
.swtp-handle-end::before { background: #ffffff; }

.swtp-scroll-wrap {
  padding: 0 2px;
  margin-bottom: 6px;
}

.swtp-scrollbar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  background: transparent;
  cursor: pointer;
}

.swtp-scrollbar::-webkit-slider-runnable-track {
  height: 4px;
  background: #2d333b;
  border-radius: 2px;
}

.swtp-scrollbar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 12px;
  border-radius: 3px;
  background: #4b5563;
  border: 1px solid rgba(96, 165, 250, 0.3);
  margin-top: -4px;
  cursor: grab;
}

.swtp-scrollbar::-webkit-slider-thumb:hover {
  background: #60a5fa;
}

.swtp-scrollbar::-webkit-slider-thumb:active {
  cursor: grabbing;
  background: #dc2626;
}

.swtp-scrollbar::-moz-range-track {
  height: 4px;
  background: #2d333b;
  border-radius: 2px;
  border: none;
}

.swtp-scrollbar::-moz-range-thumb {
  width: 40px;
  height: 12px;
  border-radius: 3px;
  background: #4b5563;
  border: 1px solid rgba(96, 165, 250, 0.3);
  cursor: grab;
}

.swtp-scrollbar::-moz-range-thumb:hover {
  background: #60a5fa;
}

.swtp-scrollbar:disabled {
  opacity: 0.3;
  cursor: default;
}

.swtp-inputs-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.swtp-play-btn {
  width: 32px;
  height: 28px;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 4px;
  background: #0d1117;
  color: #60a5fa;
  font-size: 0.8rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swtp-play-btn:hover {
  background: #1a1a2e;
  border-color: #60a5fa;
}

.swtp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.swtp-row label {
  font-size: 0.75rem;
  color: #8b949e;
  min-width: 24px;
}

.swtp-row input {
  flex: 1;
  padding: 4px 8px;
  font-size: 0.8rem;
  background: #0d1117;
  color: #e6edf3;
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 4px;
  width: 80px;
}

.swtp-row input:focus {
  outline: none;
  border-color: #60a5fa;
}

.swtp-actions {
  display: flex;
  gap: 6px;
}

.swtp-apply, .swtp-cancel {
  flex: 1;
  padding: 5px 0;
  font-size: 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  cursor: pointer;
  color: #e6edf3;
}

.swtp-apply {
  background: #dc2626;
  border-color: #dc2626;
}

.swtp-apply:hover { background: #b91c1c; }

.swtp-cancel {
  background: #21262d;
}

.swtp-cancel:hover { background: #30363d; }

/* 자막 텍스트 입력 (두 번째 줄) */
.stt-subtitle-input {
  flex: 1;
  min-width: 0;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: #161616;
  color: #e6edf3;
  font-size: 20px;
  font-family: inherit;
  line-height: 1.3;
  resize: none;
  overflow: hidden;
  overflow: hidden;
  min-height: 42px;
  transition: all 0.2s ease;
}

.stt-subtitle-input:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: #1c1c1c;
}

.stt-subtitle-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.25);
  background: #1c1c1c;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.stt-subtitle-input::placeholder {
  color: var(--stt-muted);
}

/* 링크 아이콘 */
.stt-segment-link {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stt-muted);
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.stt-segment-link:hover {
  opacity: 1;
}

/* 툴바 (병합/분할/삭제) */
.stt-segment-toolbar {
  display: none;
}

.stt-segment-item:hover .stt-segment-toolbar {
  opacity: 1;
}

.stt-segment-toolbar button {
  padding: 4px 9px;
  font-size: 0.89rem;
  border: 1px solid var(--stt-border);
  border-radius: 4px;
  background: var(--stt-panel-bg);
  color: var(--stt-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.stt-segment-toolbar button:hover {
  background: var(--stt-card-hover);
  color: var(--text-primary);
  border-color: var(--stt-accent-weak);
}

/* 키보드 단축키 힌트 */
.stt-keyboard-hint {
  font-size: 0.7rem;
  color: var(--stt-muted);
  text-align: center;
  padding: 6px;
  margin-top: 8px;
  flex-shrink: 0;
}

.stt-keyboard-hint kbd {
  display: inline-block;
  padding: 2px 5px;
  font-size: 0.65rem;
  background: var(--stt-card-bg);
  border: 1px solid var(--stt-border);
  border-radius: 3px;
  margin: 0 2px;
}

/* STT 자막 오버레이 (비디오 프리뷰 위) */
.stt-subtitle-overlay {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(50%); /* 중앙 앵커: bottom값이 텍스트 중심점 기준 */
  width: fit-content;
  padding: 6px 16px;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  border-radius: 6px;
  max-width: 90%;
  text-align: center;
  white-space: pre-wrap;
  pointer-events: none;
  z-index: 1000;
}

/* 형광펜이 글자 영역만 커버하도록 inline span */
.stt-subtitle-overlay .subtitle-text-inner,
.tts-subtitle-overlay .subtitle-text-inner {
  display: inline;
  white-space: pre-wrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ═══════════════════════════════════════════
   자막 등장 애니메이션
   StudioState.subtitleAnimation.type으로 선택
   Whisper(STT) / TTS 양쪽 모두 동일하게 적용
   ═══════════════════════════════════════════ */
@keyframes subtitleFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes subtitleBounce {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { transform: scale(1); }
}
@keyframes subtitleSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes subtitleSlideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes subtitleScaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.subtitle-anim-fade      .subtitle-text-inner { animation: subtitleFadeIn 0.2s ease-out both; }
.subtitle-anim-bounce    .subtitle-text-inner { display: inline-block; animation: subtitleBounce 0.25s ease-out both; }
.subtitle-anim-slideUp   .subtitle-text-inner { display: inline-block; animation: subtitleSlideUp 0.2s ease-out both; }
.subtitle-anim-slideDown .subtitle-text-inner { display: inline-block; animation: subtitleSlideDown 0.2s ease-out both; }
.subtitle-anim-scale     .subtitle-text-inner { display: inline-block; animation: subtitleScaleIn 0.2s ease-out both; }
.subtitle-anim-typewriter .subtitle-text-inner {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  width: 0;
  animation: subtitleTypewriter var(--tw-dur, 1s) steps(var(--tw-steps, 20), end) forwards,
             subtitleBlink 0.6s step-end 3;
}
@keyframes subtitleTypewriter {
  to { width: 100%; }
}
@keyframes subtitleBlink {
  50% { border-color: transparent; }
}
.subtitle-anim-karaoke .subtitle-text-inner {
  background: linear-gradient(90deg, currentColor var(--kr-pct, 0%), rgba(255,255,255,0.35) 0%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ═══════════════════════════════════════════
   템플릿 컬러 오버레이
   ═══════════════════════════════════════════ */

/* 패널 드롭다운 */
.template-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 12px;
  width: 280px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.template-panel-header {
  font-size: 15px;
  font-weight: 600;
  color: #ccc;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.template-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.palette-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.12);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, transform 0.1s;
}
.palette-swatch:hover {
  border-color: rgba(255,255,255,0.5);
  transform: scale(1.15);
}
.palette-swatch.active {
  border-color: #fff;
}
.template-mode-row {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.template-mode-btn {
  flex: 1;
  padding: 5px 0;
  font-size: 14px;
  color: #aaa;
  background: #222;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.template-mode-btn:hover {
  background: #333;
}
.template-mode-btn.active {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.template-settings-group {
  margin-bottom: 8px;
  padding: 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
}
.template-label {
  font-size: 14px;
  font-weight: 600;
  color: #999;
  margin-bottom: 6px;
  display: block;
}
.template-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.template-sub-label {
  font-size: 12px;
  color: #777;
  min-width: 28px;
}
.template-val {
  font-size: 12px;
  color: #888;
  min-width: 28px;
  text-align: right;
}
.template-row input[type="color"] {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  background: none;
  cursor: pointer;
  padding: 0;
}
.template-row input[type="range"] {
  flex: 1;
  height: 4px;
  accent-color: #dc2626;
}

.template-action-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.template-apply-btn {
  min-width: 72px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #dc2626;
  border-radius: 6px;
  background: #dc2626;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.template-apply-btn:hover {
  filter: brightness(1.12);
}

/* 프리뷰 오버레이 */
.template-overlay {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
}
.template-overlay-top {
  top: 0;
  background: rgba(0,0,0,0.7);
  height: 20%;
}
.template-overlay-bottom {
  bottom: 0;
  background: rgba(0,0,0,0.7);
  height: 20%;
}

/* 리사이즈 핸들 */
.template-resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 4;
  cursor: ns-resize;
  background: transparent;
  pointer-events: auto;
}
.template-resize-handle:hover,
.template-resize-handle.dragging {
  background: rgba(59, 130, 246, 0.5);
}
.template-handle-top {
  /* bottom is set dynamically via JS */
}
.template-handle-bottom {
  /* top is set dynamically via JS */
}

/* 제목 텍스트 오버레이 */
.title-text-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.title-text-block {
  position: absolute;
  width: max-content;
  max-width: none;
  padding: 0;
  text-align: center;
  white-space: pre;
  word-break: keep-all;
  overflow-wrap: normal;
  line-height: 1.18;
  pointer-events: auto;
  cursor: move;
  user-select: none;
}

.title-text-block.slot-top {
  transform: translateX(-50%);
}

.title-text-block.slot-bottom {
  transform: translateX(-50%);
}

.title-text-block.active {
  outline: none;
}

/* 패널 내 입력 필드 공통 */
.template-text-input {
  flex: 1;
  padding: 4px 8px;
  font-size: 15px;
  color: #ddd;
  background: #111;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
}
.template-text-input:focus {
  outline: none;
  border-color: #dc2626;
}
.template-select {
  padding: 3px 6px;
  font-size: 14px;
  color: #ddd;
  background: #111;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
}

.title-font-picker-btn {
  flex: 1;
  min-width: 0;
  max-width: none;
  height: 28px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 15px;
}

.title-font-picker-btn .stt-fp-btn-label {
  font-size: 15px;
  font-weight: 500;
}

.title-text-panel {
  left: auto;
  right: 0;
  transform: none;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.title-text-panel .template-action-row {
  position: sticky;
  bottom: -12px;
  margin-bottom: -12px;
  padding-bottom: 12px;
  background: #1a1a1a;
}

.title-editor-section {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}

.title-editor-heading {
  margin-bottom: 8px;
  color: #e5e7eb;
  font-size: 15px;
  font-weight: 700;
}

.title-editor-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.title-editor-heading-row .title-editor-heading {
  margin-bottom: 0;
}

.title-add-object-btn {
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  background: #222;
  color: #ddd;
  font-size: 14px;
  cursor: pointer;
}

.title-add-object-btn:hover {
  background: #2d2d2d;
}

.title-object-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 24px;
  margin-bottom: 8px;
}

.title-object-empty {
  color: #666;
  font-size: 14px;
  line-height: 24px;
}

.title-object-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 150px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  background: #171717;
  color: #ccc;
  font-size: 14px;
  cursor: pointer;
}

.title-object-chip.active {
  border-color: #60a5fa;
  color: #fff;
}

.title-object-chip span:not(.title-object-swatch):not(.title-object-delete) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-object-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.35);
  flex: 0 0 auto;
}

.title-object-delete {
  color: #888;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}

.title-object-delete:hover {
  color: #f87171;
}

.title-textarea {
  width: 100%;
  min-height: 72px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  background: #111;
  color: #eee;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}

.title-textarea:focus {
  border-color: #dc2626;
}

.title-control-grid {
  display: grid;
  grid-template-columns: 52px minmax(0, 1.2fr) 52px minmax(92px, 0.8fr);
  gap: 10px 8px;
  align-items: center;
  margin-top: 8px;
}

.title-control-grid label,
.title-slider-row > span:first-child {
  color: #888;
  font-size: 14px;
}

.title-control-grid input[type="color"] {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  background: transparent;
}

.title-size-select {
  min-width: 92px;
}

.title-control-grid .template-select {
  width: 100%;
  height: 28px;
}

.title-control-grid .title-font-picker-btn {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 28px;
  padding: 0 8px;
}

.title-size-val {
  display: none;
}

.title-check-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ddd !important;
}

.title-slider-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.title-slider-row input[type="range"] {
  width: 100%;
  accent-color: #dc2626;
}

/* ═══════════════════════════════════════════
   이미지 조절 패널 (확대/이동)
   ═══════════════════════════════════════════ */
.img-adjust-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 12px;
  width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.img-adjust-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.img-adjust-row input[type="range"] {
  flex: 1;
  height: 4px;
  accent-color: #dc2626;
}
.img-adjust-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.img-adjust-action-btn {
  flex: 1;
  padding: 5px 0;
  font-size: 14px;
  color: #aaa;
  background: #222;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  cursor: pointer;
}
.img-adjust-action-btn:hover {
  background: #333;
}
.img-adjust-action-btn.primary {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.img-adjust-action-btn.primary:hover {
  background: #b91c1c;
}
.img-adjust-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #555;
  text-align: center;
}

/* 프리뷰 드래그 모드 커서 */
.tts-image-container.img-dragging,
#studioPreviewVideo.img-dragging {
  cursor: grabbing !important;
}
.tts-image-container.img-adjustable,
#studioPreviewVideo.img-adjustable {
  cursor: grab;
}

/* ═══════════════════════════════════════════
   이미지 생성 & 갤러리
   ═══════════════════════════════════════════ */
.tts-generate-btn.generating {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
}
.quick-image-status {
  font-size: 17px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}
.quick-image-status .spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #dc2626;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.gallery-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.gallery-panel-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
/* 드래그 중에는 오버레이가 이벤트를 통과시켜 문장 영역에 드롭 가능 */
.gallery-panel-overlay.drag-through {
  pointer-events: none;
}
body.studio-media-dragging .gallery-panel-overlay.show {
  pointer-events: none !important;
}
body.studio-media-dragging .tts-starter-item .tts-media-slot {
  visibility: visible !important;
}
body.studio-media-dragging .tts-media-slot-badge {
  border-color: #dc2626;
  color: #fff;
  background: rgba(220, 38, 38, 0.16);
}

/* 미디어 통합 사이드 패널 */
.image-gallery-panel {
  /* 폭 복원 중에도 닫힌 패널은 자기 너비만큼 화면 밖에 둔다.
     right를 폭과 함께 애니메이션하면 넓어진 패널이 잠깐 화면 안으로 들어온다. */
  --media-panel-w: 400px;
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(calc(100% + 20px));
  visibility: hidden;
  width: var(--media-panel-w);
  max-width: 80vw;
  height: 100vh;
  background: #0f0f0f;
  border-left: 1px solid #222;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, visibility 0s 0.3s;
  box-shadow: -4px 0 24px rgba(0,0,0,0.5);
}
.image-gallery-panel.show {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

/* 왼쪽 가장자리 너비 조절 핸들 */
.media-panel-resizer {
  position: absolute;
  top: 0;
  left: -4px;
  width: 10px;
  height: 100%;
  z-index: 3;
  cursor: ew-resize;
  touch-action: none;
}
.media-panel-resizer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  background: transparent;
  transition: background 0.15s;
}
.media-panel-resizer:hover::before,
body.media-panel-resizing .media-panel-resizer::before {
  background: #dc2626;
}
body.media-panel-resizing {
  cursor: ew-resize;
  user-select: none;
}
body.media-panel-resizing .image-gallery-panel {
  transition: none;
}

/* 미디어 패널 헤더 + 탭 */
.media-panel-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #222;
  flex-shrink: 0;
  padding-right: 6px;
  background: #111;
}
.media-panel-tabs {
  display: flex;
  flex: 1;
  min-width: 0;
}
.media-tab {
  flex: 1;
  padding: 14px 4px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #666;
  font-size: 1.1108rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: -0.01em;
}
.media-tab:hover { color: #bbb; }
.media-tab.active {
  color: #fff;
  border-bottom-color: #dc2626;
}
.media-tab-badge {
  display: inline-block;
  background: #333;
  color: #aaa;
  font-size: 17px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  min-width: 14px;
  text-align: center;
  font-weight: 500;
}
.media-tab.active .media-tab-badge {
  background: #dc2626;
  color: #fff;
}

/* 탭 콘텐츠 */
.media-tab-content {
  display: none;
  flex: 1;
  overflow-y: auto;
  flex-direction: column;
}
.media-tab-content.active {
  display: flex;
}

/* 생성탭 섹션 */
.media-section {
  padding: 16px 20px;
  border-bottom: 1px solid #1a1a1a;
}
.media-section-label {
  font-size: 1.0808rem;
  font-weight: 600;
  color: #999;
  margin-bottom: 8px;
  display: block;
}
.media-textarea {
  width: 100%;
  min-height: 72px;
  max-height: 140px;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  color: #eee;
  padding: 10px 12px;
  font-size: 1.1108rem;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
  line-height: 1.5;
}
.media-textarea:focus {
  border-color: #dc2626;
  outline: none;
}
.media-btn-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}
.media-preset-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.media-preset-row .media-select {
  flex: 1;
  min-width: 0;
}
.media-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #2a2a2a;
  background: #1a1a1a;
  color: #ccc;
  cursor: pointer;
  flex-shrink: 0;
}
.media-btn-icon:hover {
  background: #252525;
  color: #fff;
}
.media-select-inline {
  flex: 0 0 auto;
  max-width: 130px;
  font-size: 1.0508rem;
}
.media-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.media-btn {
  padding: 8px 14px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #1a1a1a;
  color: #ccc;
  font-size: 1.0708rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.media-btn:hover {
  background: #252525;
  border-color: #555;
  color: #fff;
}
.media-btn.primary {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.media-btn.primary:hover {
  background: #b91c1c;
}
.media-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.media-sentence-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* 이미지탭 내 문장 아이템 컴팩트 오버라이드 */
#mediaTabImage .sentence-item {
  padding: 8px 12px;
}
#mediaTabImage .sentence-body {
  font-size: 0.82rem;
}
#mediaTabImage .img-prompt-input {
  font-size: 0.8rem;
  min-height: 28px;
  padding: 4px 6px;
}
#mediaTabImage .sentence-thumb {
  width: 48px;
  height: 36px;
}

/* ─── 미디어 패널 통합 슬라이더 ─── */
.media-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.media-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  background: #2a2a2a;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.media-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #dc2626;
  cursor: pointer;
  border: none;
}
.media-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #dc2626;
  cursor: pointer;
  border: none;
}
.media-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
}
.media-slider-value {
  min-width: 32px;
  text-align: right;
  font-size: 1.0508rem;
  color: #aaa;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* 미디어 패널 설정 구분선 */
.media-settings-divider {
  border: none;
  border-top: 1px solid #1a1a1a;
  margin: 12px 0;
}

/* 미디어 패널 설정 행 */
.media-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.media-settings-row > label {
  font-size: 1.0508rem;
  color: #999;
  white-space: nowrap;
  min-width: 48px;
  flex-shrink: 0;
}
.media-settings-row > select,
.media-settings-row > .media-select {
  flex: 1;
  min-width: 0;
}

/* 미디어 패널 섹션 타이틀 */
.media-settings-section-title {
  font-size: 1.0108rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #1a1a1a;
}

/* 갤러리탭 헤더 */
.media-gallery-header {
  padding: 12px 20px;
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
}
.media-gallery-info {
  font-size: 1.0808rem;
  color: #777;
}

/* 업로드탭 */
.media-upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 20px;
  border: 2px dashed #333;
  border-radius: 12px;
  margin: 20px;
  color: #777;
  font-size: 1.1108rem;
  transition: border-color 0.2s, background 0.2s;
  cursor: default;
}
.media-upload-dropzone.drag-active {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
  color: #bbb;
}
.media-upload-hint {
  font-size: 0.9808rem;
  color: #555;
}

/* 업로드 아이템 */
.media-upload-item {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  background: #080808;
  transition: border-color 0.15s, transform 0.15s;
}
.media-upload-item .stock-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  font-size: 1.0808rem;
  font-weight: 600;
  color: #fff;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .68);
  letter-spacing: .02em;
}
.media-upload-item:hover {
  border-color: rgba(255,255,255,0.24);
  transform: translateY(-1px);
}
.media-upload-item img,
.media-upload-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-upload-item .upload-item-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.7);
  color: #ccc;
  font-size: 0.9508rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-upload-item .upload-item-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  color: #ccc;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.media-upload-item:hover .upload-item-remove {
  opacity: 1;
}
.media-upload-item .upload-item-remove:hover {
  background: #ef4444;
  color: #fff;
}
.media-upload-item.dragging {
  opacity: 0.5;
  outline: 2px solid #dc2626;
}
/* 타입별 업로드 카드 — 비디오 카드 강조 */
.media-upload-item.media-upload-video {
  outline: 1px solid rgba(139,92,246,0.45);
}
.media-upload-item.media-upload-video::after {
  content: 'VIDEO';
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(139,92,246,0.85);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
/* 오디오 카드 — 음표 아이콘 + duration */
.media-upload-item.media-upload-audio {
  outline: 1px solid rgba(59,130,246,0.45);
}
.media-upload-item.media-upload-audio::after {
  content: 'AUDIO';
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(59,130,246,0.85);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.upload-audio-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 4px;
  background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(59,130,246,0.06));
  color: #93c5fd;
}
.upload-audio-dur {
  font-size: 14px;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(0,0,0,0.35);
  padding: 1px 6px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
/* 업로드 진행 중 드롭존 펄스 */
.media-upload-dropzone.uploading {
  border-color: #dc2626;
  background: rgba(220,38,38,0.08);
  position: relative;
  pointer-events: none;
}
.media-upload-dropzone.uploading::after {
  content: '업로드 중...';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border-radius: inherit;
}

/* 설정탭 */
.media-settings-section {
  border-bottom: 1px solid #222;
  padding-bottom: 4px;
}
.media-settings-section:last-child {
  border-bottom: none;
}
.media-settings-section-title {
  font-size: 1.0108rem;
  font-weight: 700;
  color: #dc2626;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 20px 4px;
}
.media-settings-row {
  display: flex;
  gap: 8px;
  padding: 0 20px;
}
.media-settings-row > .media-settings-group {
  padding: 10px 0;
  border-bottom: none;
}
.media-settings-group {
  padding: 10px 20px;
  border-bottom: 1px solid #1a1a1a;
}
.media-settings-section > .media-settings-group:last-child,
.media-settings-section > .media-settings-row:last-child {
  border-bottom: none;
}
.media-settings-label {
  display: block;
  font-size: 1.0808rem;
  font-weight: 600;
  color: #999;
  margin-bottom: 8px;
}
.media-settings-quota {
  font-size: 17px;
  color: #888;
  margin-bottom: 6px;
  display: block;
}
.media-select {
  width: 100%;
  padding: 8px 10px;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  color: #eee;
  font-size: 1.1108rem;
  font-family: inherit;
}
.media-select:focus {
  border-color: #dc2626;
  outline: none;
}
#mediaTabTts .toolbar-slider,
#mediaTabImage .toolbar-slider {
  width: auto;
  flex: 1;
}
#mediaTabTts .toolbar-label,
#mediaTabImage .toolbar-label {
  min-width: 32px;
  text-align: right;
}

/* 기존 헤더 (호환성 유지) */
.image-gallery-side-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: transparent;
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}

.toolbar-btn-label-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.1;
}

.toolbar-btn-label {
  display: block;
}

.toolbar-btn-meta {
  display: block;
  font-size: 12px;
  color: #888;
}
.image-gallery-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}
.image-gallery-info {
  font-size: 0.82rem;
  color: #888;
  margin-left: auto;
}
.image-gallery-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 1.4308rem;
  padding: 4px 8px;
  border-radius: 4px;
}
.image-gallery-close:hover {
  background: #333;
  color: #fff;
}
.image-gallery-side-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  /* 패널을 넓히면 카드가 커지는 대신 열이 늘어난다(400px 기본에선 1열 그대로) */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-content: start;
  gap: 12px;
}
.image-gallery-side-list:empty::after {
  content: '생성된 이미지가\A여기에 표시됩니다';
  grid-column: 1 / -1;
  white-space: pre-wrap;
  color: #888;
  font-size: 1.0808rem;
  text-align: center;
  padding: 40px 12px;
}
.media-generated-header {
  padding: 12px 20px 0;
  color: #a8adb7;
  font-size: 18px;
  font-weight: 600;
}
.media-generated-list {
  min-height: 150px;
  padding-top: 10px;
}
.media-generated-list:empty::after {
  content: attr(data-empty-label);
}
.image-gallery-item {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    rgba(8, 8, 8, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.image-gallery-item:hover {
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}
.image-gallery-item.active {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(8, 8, 8, 0.96);
}
.image-gallery-item img,
.image-gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: element;
}
.image-gallery-item video {
  background: #000;
  object-fit: contain;
}
.image-gallery-item .stock-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  font-size: 15px;
}
.image-gallery-item .gallery-item-idx {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 14px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
/* 갤러리 전환 안내 토스트 */
.gallery-toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(37, 99, 235, 0.9);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 16px;
  z-index: 9999;
  animation: toastFade 3s ease forwards;
  pointer-events: none;
}
@keyframes toastFade {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* 갤러리 저장 확인 모달 */
.gallery-exit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-exit-modal {
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 12px;
  padding: 28px 32px 24px;
  min-width: 360px;
  max-width: 440px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.gallery-exit-modal h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #f5c542;
}
.gallery-exit-modal p {
  margin: 0 0 20px;
  font-size: 0.85rem;
  color: #bbb;
  line-height: 1.5;
}
.gallery-exit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.gallery-exit-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.gallery-exit-btn.save {
  background: #2563eb;
  color: #fff;
}
.gallery-exit-btn.save:hover {
  background: #1d4ed8;
}
.gallery-exit-btn.leave {
  background: transparent;
  border: 1px solid #555;
  color: #ccc;
}
.gallery-exit-btn.leave:hover {
  background: rgba(255,255,255,0.08);
}
.gallery-exit-btn.cancel {
  background: #333;
  color: #eee;
}
.gallery-exit-btn.cancel:hover {
  background: #444;
}

/* 드래그 앤 드롭 */
.image-gallery-item.dragging {
  opacity: 0.5;
  outline: 2px solid #dc2626;
}
.tts-sentence-item.drag-over {
  outline: 2px dashed #dc2626 !important;
  outline-offset: -2px;
  background: color-mix(in srgb, #dc2626 15%, transparent) !important;
}

/* ═══════════════════════════════════════════
   화면 비율 패널
   ═══════════════════════════════════════════ */

.aspect-ratio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px 0;
}

.aspect-ratio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.aspect-ratio-card:hover {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.25);
}

.aspect-ratio-card.active {
  border-color: #fff;
  background: #1a1a1a;
}

.aspect-ratio-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
}

.aspect-ratio-shape {
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
}

.aspect-ratio-card.active .aspect-ratio-shape {
  border-color: #fff;
}

.aspect-ratio-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #ccc;
}

.aspect-ratio-card.active .aspect-ratio-card-name {
  color: #fff;
}

.aspect-ratio-card-value {
  font-size: 14px;
  color: #666;
}

.aspect-ratio-card.active .aspect-ratio-card-value {
  color: #aaa;
}

/* 기타 비율 커스텀 입력 */
.custom-ratio-input {
  padding: 12px 0;
}

.custom-ratio-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-ratio-field {
  width: 60px;
  padding: 6px 8px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  font-size: 17px;
  text-align: center;
}

.custom-ratio-field:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
}

.custom-ratio-sep {
  color: #888;
  font-size: 20px;
  font-weight: 600;
}

.custom-ratio-apply-btn {
  padding: 6px 14px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.custom-ratio-apply-btn:hover {
  background: #b91c1c;
}

/* ═══════════════════════════════════════════
   프로젝트 모달
   ═══════════════════════════════════════════ */

.studio-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}

.studio-modal-overlay.visible {
  display: flex;
}

.studio-modal {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  width: 440px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.studio-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #333;
}

.studio-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.studio-modal-body {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
}

.project-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-list-empty {
  text-align: center;
  color: #666;
  padding: 40px 0;
  font-size: 17px;
}

.project-list-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.project-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.project-list-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.project-list-name {
  font-size: 17px;
  font-weight: 500;
  color: #e0e0e0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-list-date {
  font-size: 14px;
  color: #666;
}

.project-list-delete {
  background: none;
  border: none;
  color: #666;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s;
  flex-shrink: 0;
}

.project-list-delete:hover {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}

/* ─────────────────────────────────────────────────────────
   FONT PICKER POPUP
   ───────────────────────────────────────────────────────── */

/* 툴바 내 폰트 피커 버튼 */
.stt-font-picker-btn {
  min-width: 152px;
  max-width: 176px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
    #171717;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #f3f4f6;
  cursor: pointer;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.stt-font-picker-btn:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
    #1b1b1b;
  border-color: rgba(255,255,255,0.25);
}
.stt-fp-btn-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 600;
  text-align: left;
}
.stt-fp-arrow {
  font-size: 14px;
  line-height: 1;
  color: #9ca3af;
  opacity: 1;
  flex-shrink: 0;
}

/* Popup container — fixed position, appended to body */
.stt-font-picker-popup {
  position: fixed;
  z-index: 99999;
  width: 270px;
  max-height: 440px;
  background: #141414;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}

/* Search */
.stt-fp-search {
  padding: 10px 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.stt-fp-search input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 15px;
  padding: 6px 10px;
  outline: none;
}
.stt-fp-search input::placeholder { color: #555; }
.stt-fp-search input:focus { border-color: rgba(255,255,255,0.3); }

/* Tabs */
.stt-fp-tabs {
  display: flex;
  padding: 0 12px;
  gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.stt-fp-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #666;
  font-size: 15px;
  cursor: pointer;
  padding: 7px 0;
  white-space: nowrap;
}
.stt-fp-tab.active { color: #e0e0e0; border-bottom-color: #2563eb; }
.stt-fp-tab:hover:not(.active) { color: #aaa; }

/* Categories */
.stt-fp-cats {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  scrollbar-width: none;
}
.stt-fp-cats::-webkit-scrollbar { display: none; }
.stt-fp-cat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.stt-fp-cat:hover { background: rgba(255,255,255,0.1); color: #ddd; }
.stt-fp-cat.active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* Font list */
.stt-fp-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 6px;
}
.stt-fp-list::-webkit-scrollbar { width: 10px; }
.stt-fp-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 5px; }
.stt-fp-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 5px; min-height: 40px; }
.stt-fp-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }

.stt-fp-section-label {
  font-size: 12px;
  color: #555;
  padding: 8px 14px 3px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.stt-fp-item {
  display: flex;
  align-items: center;
  padding: 6px 10px 6px 8px;
  cursor: pointer;
  gap: 2px;
}
.stt-fp-item:hover { background: #1a1a1a; }
.stt-fp-item.selected { background: rgba(37,99,235,0.15); }

.stt-fp-check {
  width: 16px;
  font-size: 14px;
  color: #2563eb;
  flex-shrink: 0;
  text-align: center;
}
.stt-fp-item-name {
  flex: 1;
  font-size: 18px;
  color: #e0e0e0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.stt-fp-star {
  background: none;
  border: none;
  color: #3a3a3a;
  font-size: 17px;
  cursor: pointer;
  padding: 2px 3px;
  flex-shrink: 0;
  line-height: 1;
}
.stt-fp-star:hover { color: #fbbf24; }
.stt-fp-star.fav { color: #fbbf24; }

.stt-fp-empty {
  text-align: center;
  color: #555;
  font-size: 15px;
  padding: 24px 0;
}

/* ─── Collection Panel (작업내역 슬라이드) ─── */
.collection-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
  display: none;
}
.collection-overlay.open { display: block; }

.collection-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px;
  background: #141414;
  border-left: 1px solid rgba(255,255,255,0.12);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}
.collection-panel.open { transform: translateX(0); }

.cp-header {
  height: 44px; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #eee; font-weight: 600; font-size: 17px;
}
.cp-header button {
  background: none; border: none; color: #888;
  font-size: 22px; cursor: pointer;
}
.cp-header button:hover { color: #ddd; }

.cp-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.08); }
.cp-tab-btn {
  flex: 1; padding: 10px 0; background: none; border: none;
  border-bottom: 2px solid transparent;
  color: #888; font-size: 15px; cursor: pointer;
}
.cp-tab-btn.active { color: #f87171; border-bottom-color: #f87171; }
.cp-tab-btn span {
  background: rgba(255,255,255,0.1); padding: 1px 6px;
  border-radius: 8px; font-size: 12px; margin-left: 4px;
}

.cp-body { flex: 1; overflow-y: auto; }
.cp-content { display: none; }
.cp-content.active { display: block; }

.cp-item {
  display: flex; gap: 10px; padding: 10px 16px;
  cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cp-item:hover { background: #1a1a1a; }
.cp-item img {
  width: 80px; height: 45px; object-fit: cover;
  border-radius: 4px; flex-shrink: 0;
}
.cp-item-info { flex: 1; min-width: 0; }
.cp-item-title {
  font-size: 15px; color: #ddd; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-item-meta { font-size: 14px; color: #666; margin-top: 2px; }
.cp-item { position: relative; }
.cp-item-delete {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #555; font-size: 20px;
  cursor: pointer; padding: 4px 6px; border-radius: 4px;
  opacity: 0; transition: opacity 0.15s;
}
.cp-item:hover .cp-item-delete { opacity: 1; }
.cp-item-delete:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

.cp-back {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; color: #888; font-size: 15px;
  cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cp-back:hover { color: #ddd; }

.cp-empty {
  padding: 40px 20px; text-align: center;
  color: #555; font-size: 16px;
}

/* ─── Script Pipeline Mode ─── */
.script-mode-toggle {
  display: inline-flex;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  gap: 1px;
}

.script-mode-toggle button {
    padding: 0 24px;
    min-height: 54px;
    height: 54px;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #888;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  border-radius: 5px;
}

.script-mode-toggle button.active {
  background: rgba(255, 255, 255, 0.12);
  color: #e0e0e0;
  font-weight: 600;
  border-color: rgba(255, 255, 255, 0.25);
}

.script-mode-toggle button:hover:not(.active) {
  background: rgba(255, 255, 255, 0.06);
  color: #ccc;
}

/* 자동화v1 버튼 — 빨강 강조 (활성 시) */
.script-mode-toggle button[data-mode="automation"].active {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.5);
  color: #fca5a5;
}

/* ─── 자동화v1 수신부 (3종 원시데이터 2x2 그리드) ─── */
.script-automation-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.auto-handoff-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 12px;
  min-height: 0;
  overflow: hidden;
}
.auto-handoff-cell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-secondary, #141414);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  overflow: hidden;
}
.auto-handoff-cell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
}
.auto-handoff-cell-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.auto-handoff-cell-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.auto-handoff-cell-badge.ready {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success-color, #22c55e);
}
.auto-handoff-cell-badge.empty {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary, #888);
}
.auto-handoff-cell-badge.loading {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}
.auto-handoff-cell-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary, #aaa);
}
.auto-handoff-cell-body::-webkit-scrollbar {
  width: 5px;
}
.auto-handoff-cell-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.auto-handoff-field {
  margin-bottom: 8px;
}
.auto-handoff-field-label {
  font-size: 12px;
  color: var(--text-muted, #666);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
.auto-handoff-field-value {
  color: var(--text-primary, #e0e0e0);
  white-space: pre-wrap;
  word-break: break-word;
}
.auto-handoff-cell-body pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 12px;
  color: #9ca3af;
}
.auto-handoff-empty {
  color: var(--text-muted, #555);
  font-style: italic;
  padding: 8px 0;
}
.auto-handoff-footer {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

/* Pipeline container layout */
.script-pipeline-container {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* Left: stepper sidebar */
.pipeline-stepper {
    width: 220px;
    min-width: 220px;
    background: #141414;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.pipeline-stepper-header {
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: #e0e0e0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pipeline-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid transparent;
  position: relative;
}

.pipeline-step-item:hover {
  background: #1a1a1a;
}

.pipeline-step-item.active {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: #dc2626;
}

.pipeline-mode-toggle {
  display: flex;
  gap: 2px;
  padding: 4px 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pipeline-mode-btn {
  flex: 1;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: transparent;
  color: #888;
  cursor: pointer;
  transition: all 0.15s;
}
.pipeline-mode-btn:hover { color: #ccc; border-color: rgba(255, 255, 255, 0.2); }
.pipeline-mode-btn.active {
  background: rgba(220, 38, 38, 0.15);
  border-color: #dc2626;
  color: #fff;
}

.pipeline-step-item.done {
  opacity: 1;
}

.pipeline-step-item.locked {
  opacity: 0.5;
}

.pipeline-step-item.skipped {
  opacity: 0.35;
  text-decoration: line-through;
  pointer-events: none;
}
.pipeline-step-item.skipped .pipeline-step-num {
  background: rgba(255, 255, 255, 0.05);
  color: #666;
}
.pipeline-step-skip {
  font-size: 11px;
  color: #f59e0b;
  margin-left: 6px;
  text-decoration: none;
  display: inline-block;
}

.pipeline-step-item.running {
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(96, 165, 250, 0.06);
}
.pipeline-step-item.running .pipeline-step-num {
  background: #2563eb;
  color: #fff;
  animation: pipeline-pulse 1.5s ease-in-out infinite;
}
.pipeline-step-spinner {
  font-size: 17px;
  margin-left: auto;
  animation: pipeline-spin 1s linear infinite;
}
@keyframes pipeline-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes pipeline-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pipeline-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.15s;
}

/* pending */
.pipeline-step-item .pipeline-step-num {
  background: #333;
  color: #888;
}

/* active */
.pipeline-step-item.active .pipeline-step-num {
  background: #dc2626;
  color: #fff;
}

/* done */
.pipeline-step-item.done .pipeline-step-num {
  background: #16a34a;
  color: #fff;
}

.pipeline-step-label {
  font-size: 15px;
  color: #aaa;
  line-height: 1.3;
}

.pipeline-step-item.active .pipeline-step-label {
  color: #e0e0e0;
  font-weight: 600;
}

.pipeline-step-item.done .pipeline-step-label {
  color: #aaa;
}

.pipeline-step-info-col,
.pipeline-step-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

/* [DISABLED 2026-05-11] 단계별 모델명 라벨: 사용자에게 비공개. admin.html 스크립트 탭에서만 결정. */
.pipeline-step-model { display: none !important; }

/* Connector line between steps */
.pipeline-step-item::after {
  content: '';
  position: absolute;
  left: 24px;
  bottom: -1px;
  width: 1px;
  height: 0;
}

/* Right: main content area */
.pipeline-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.pipeline-step-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pipeline-step-title {
  font-size: 17px;
  font-weight: 600;
  color: #e0e0e0;
}

.pipeline-step-desc {
  font-size: 14px;
  color: #888;
  margin-left: 8px;
}

.pipeline-content {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}

.pipeline-prompt-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 12px 16px;
  min-height: 0;
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.pipeline-prompt-area label {
  font-size: 14px;
  color: #888;
  margin-bottom: 4px;
  font-weight: 600;
}

.pipeline-prompt-area textarea {
  flex: 1;
  width: 100%;
  min-height: 0;
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #ddd;
  font-size: 15px;
  line-height: 1.6;
  padding: 10px;
  resize: none;
  outline: none;
}

.pipeline-prompt-area textarea:focus {
  border-color: rgba(220, 38, 38, 0.4);
}

.pipeline-output-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 12px 12px;
  min-height: 0;
  min-width: 0;
}

.pipeline-output-area label {
  font-size: 14px;
  color: #888;
  margin-bottom: 4px;
  font-weight: 600;
}

.pipeline-output-area textarea {
  flex: 1;
  width: 100%;
  min-height: 0;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #ccc;
  font-size: 15px;
  line-height: 1.6;
  padding: 10px;
  resize: none;
  outline: none;
}

/* 반응형: 1600px 이하에서 프롬프트/응답 상하 배치 */
@media (max-width: 1600px) {
  .pipeline-content {
    flex-direction: column;
  }
  .pipeline-prompt-area {
    border-right: none;
    padding: 12px 16px;
  }
  .pipeline-output-area {
    padding: 0 16px 12px;
  }
}

.pipeline-actions {
  display: flex;
  gap: 8px;
  padding: 8px 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  justify-content: flex-end;
}

.pipeline-actions button {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #141414;
  color: #ccc;
}

.pipeline-actions button:hover {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.pipeline-actions button.primary {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.pipeline-actions button.primary:hover {
  background: #ef4444;
  border-color: #ef4444;
}

.pipeline-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Pipeline review step: side by side */
.pipeline-review-area {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  overflow: auto;
  min-height: 0;
}

.pipeline-review-area .review-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.pipeline-review-area .review-col label {
  font-size: 14px;
  color: #888;
  margin-bottom: 4px;
  font-weight: 600;
}

.pipeline-review-area .review-col textarea {
  flex: 1;
  width: 100%;
  min-height: 200px;
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #ddd;
  font-size: 15px;
  line-height: 1.6;
  padding: 10px;
  resize: none;
  outline: none;
  overflow-y: auto;
}

/* Stepper bottom: run-all button */
.pipeline-stepper-footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: auto;
}

.pipeline-run-all-btn {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(220, 38, 38, 0.5);
  background: rgba(220, 38, 38, 0.1);
  color: #f87171;
  transition: all 0.15s;
}

.pipeline-run-all-btn:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: #dc2626;
  color: #fca5a5;
}

.pipeline-run-all-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pipeline-run-all-btn.running {
  border-color: rgba(234, 179, 8, 0.6);
  background: rgba(234, 179, 8, 0.15);
  color: #fbbf24;
  cursor: pointer;
  animation: pipeline-running-pulse 1.5s ease-in-out infinite;
}
.pipeline-run-all-btn.running:hover {
  background: rgba(234, 179, 8, 0.25);
  border-color: #eab308;
  color: #fde047;
}

@keyframes pipeline-running-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.pipeline-actions button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Manual Pipeline (8-step)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.manual-pipeline-container {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.manual-stepper {
  width: 220px;
  min-width: 220px;
  background: #141414;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.manual-stepper-header {
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: #e0e0e0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 6px;
}

.manual-step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}
.manual-step-item:hover { background: #1a1a1a; }
.manual-step-item.active {
    background: rgba(255, 255, 255, 0.06);
    border-left-color: #dc2626;
}

.manual-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  background: #333;
  color: #888;
  transition: all 0.15s;
}
.manual-step-item.active .manual-step-num {
    background: #dc2626;
    color: #fff;
}
.manual-step-item.done .manual-step-num {
  background: #16a34a;
  color: #fff;
}

.manual-step-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.manual-step-label {
  font-size: 15px;
  color: #aaa;
  line-height: 1.3;
}
.manual-step-item.active .manual-step-label {
  color: #e0e0e0;
  font-weight: 600;
}
.manual-step-item.done .manual-step-label {
  color: #aaa;
}

.manual-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.manual-step-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.manual-step-title {
  font-size: 17px;
  font-weight: 600;
  color: #e0e0e0;
}
.manual-step-desc {
  font-size: 14px;
  color: #888;
  margin-left: 8px;
}

.manual-guide-message {
    padding: 20px 20px 8px;
    text-align: center;
    color: #aaa;
    font-size: 15px;
    line-height: 1.7;
}
.manual-guide-message h3 {
    color: #e0e0e0;
    margin-bottom: 10px;
    font-size: 17px;
}

.manual-ai-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 16px 20px;
}
.manual-ai-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #1a1a1a;
    color: #ccc;
    transition: all 0.15s;
    min-width: 100px;
}
.manual-ai-btn:hover {
    background: #222;
    border-color: rgba(220, 38, 38, 0.5);
    color: #fff;
}

.manual-work-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.manual-content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  overflow: hidden;
  min-height: 0;
}

.manual-prompt-wrapper {
  position: relative;
  flex-shrink: 0;
  margin-bottom: 8px;
}
.manual-prompt-display {
    background: #0e0e0e;
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 6px;
    padding: 12px;
    max-height: 180px;
    overflow-y: auto;
    font-size: 15px;
  color: #aaa;
  line-height: 1.5;
  white-space: pre-wrap;
}
.manual-prompt-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.manual-prompt-overlay:hover {
  background: rgba(0, 0, 0, 0.4);
}
.manual-prompt-copy-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 20px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  pointer-events: none;
  backdrop-filter: blur(4px);
  transition: all 0.15s;
}
.manual-prompt-copy-btn.breathing {
  animation: copyBreathe 1.8s ease-in-out infinite;
}
@keyframes copyBreathe {
  0%, 100% { background: rgba(37, 99, 235, 0.15); border-color: rgba(96, 165, 250, 0.3); color: #93c5fd; }
  50% { background: rgba(37, 99, 235, 0.35); border-color: rgba(96, 165, 250, 0.6); color: #fff; box-shadow: 0 0 12px rgba(37, 99, 235, 0.3); }
}
.manual-prompt-overlay:hover .manual-prompt-copy-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

/* Perplexity area for Step 3 (웹서핑 팩트체크) */
.manual-perplexity-area {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(32, 178, 170, 0.06);
  border: 1px solid rgba(32, 178, 170, 0.15);
  border-radius: 8px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.manual-perplexity-hint {
  flex: 1;
  font-size: 14px;
  color: #9ca3af;
  line-height: 1.5;
}
.manual-perplexity-btn {
  white-space: nowrap;
  background: rgba(32, 178, 170, 0.15);
  color: #5ee6d0;
  border: 1px solid rgba(32, 178, 170, 0.35);
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.manual-perplexity-btn:hover {
  background: rgba(32, 178, 170, 0.35);
  color: #fff;
  border-color: rgba(32, 178, 170, 0.6);
  box-shadow: 0 0 10px rgba(32, 178, 170, 0.3);
}

/* Toggle switch for cross-AI mode */
.manual-toggle-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
}
.manual-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.manual-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 18px;
  transition: 0.2s;
}
.manual-toggle-slider:before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background: #888;
  border-radius: 50%;
  transition: 0.2s;
}
.manual-toggle-switch input:checked + .manual-toggle-slider {
  background: rgba(99, 102, 241, 0.4);
}
.manual-toggle-switch input:checked + .manual-toggle-slider:before {
  transform: translateX(16px);
  background: #818cf8;
}

/* Cross-AI buttons row */
.manual-cross-ai-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  padding: 8px 10px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 8px;
}
.manual-ai-btn.mini {
  padding: 4px 12px;
  font-size: 14px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: #bbb;
  cursor: pointer;
  transition: all 0.15s;
}
.manual-ai-btn.mini:hover {
    background: rgba(220, 38, 38, 0.18);
    border-color: rgba(220, 38, 38, 0.35);
    color: #fff;
}
.manual-ai-btn.mini.active {
    background: rgba(220, 38, 38, 0.24);
    border-color: rgba(220, 38, 38, 0.6);
    color: #fff;
}

.manual-response-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.manual-response-area label {
  font-size: 14px;
  color: #888;
  margin-bottom: 4px;
  font-weight: 600;
}
.manual-response-area textarea {
  flex: 1;
  width: 100%;
  min-height: 120px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #ccc;
  font-size: 15px;
  line-height: 1.6;
  padding: 10px;
  resize: none;
  outline: none;
}

.manual-actions {
  display: flex;
  gap: 8px;
  padding: 8px 16px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  justify-content: flex-end;
  align-items: center;
}
.manual-actions button {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #141414;
  color: #ccc;
}
.manual-actions button:hover {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.manual-actions button.primary {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.manual-actions button.primary:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

.manual-copy-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(96, 165, 250, 0.3);
  background: rgba(96, 165, 250, 0.1);
  color: #60a5fa;
  transition: all 0.15s;
}
.manual-copy-btn:hover {
  background: rgba(96, 165, 250, 0.2);
  border-color: #60a5fa;
}

.manual-selected-ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 16px;
  font-size: 15px;
  color: #60a5fa;
  font-weight: 600;
}

/* ─── 단계별 설정 모달 — 프리셋 버튼 ─── */
.smart-preset-btn {
  border: 1px solid var(--border-color, #333) !important;
  background: var(--bg-primary, #0a0a0a) !important;
  transition: all 0.2s;
}
.smart-preset-btn:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: #1a1a1a !important;
}
.smart-preset-btn.selected {
  border-color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.1) !important;
}
.smart-preset-btn.selected:hover {
  border-color: #ef4444 !important;
  background: rgba(220, 38, 38, 0.18) !important;
}
.smart-preset-btn--custom {
  border: 1px dashed rgba(220, 38, 38, 0.4) !important;
  background: var(--bg-primary, #0a0a0a) !important;
}
.smart-preset-btn--custom:hover {
  border-color: rgba(220, 38, 38, 0.7) !important;
  background: rgba(220, 38, 38, 0.08) !important;
}
.smart-preset-btn--custom.selected {
  border: 1px solid #dc2626 !important;
  background: rgba(220, 38, 38, 0.15) !important;
}
.smart-preset-btn--add {
  border: 1px dashed var(--border-color, #555) !important;
  background: var(--bg-primary, #0a0a0a) !important;
}
.smart-preset-btn--add:hover {
  border-color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.06) !important;
}

/* Typecast visual voice picker */
.voice-modal {
  width: min(1760px, calc(100vw - 20px)) !important;
  max-width: none !important;
  height: min(1000px, calc(100dvh - 20px)) !important;
}

.voice-modal-content {
  min-height: 0;
}

/* Voice actions mirror video-detail.html's primary button palette. */
#studioVoiceModal {
  --voice-action-background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --voice-action-hover-background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --voice-action-border: #2563eb;
  --voice-action-text: #ffffff;
  --voice-action-soft-background: rgba(59, 130, 246, 0.12);
}

body.dark-theme #studioVoiceModal {
  --voice-action-background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  --voice-action-hover-background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  --voice-action-border: #4b5563;
  --voice-action-text: #ffffff;
  --voice-action-soft-background: rgba(55, 65, 81, 0.42);
}

#studioVoiceModal .voice-filter-btn.active,
#studioVoiceModal .voice-modal-confirm,
#studioVoiceModal .voice-play-btn,
#studioVoiceModal .voice-tag.trained,
#studioVoiceModal .voice-availability-status,
#studioVoiceModal .voice-action-status {
  border-color: var(--voice-action-border) !important;
  background: var(--voice-action-background) !important;
  color: var(--voice-action-text) !important;
}

#studioVoiceModal .voice-filter-btn.active:hover,
#studioVoiceModal .voice-modal-confirm:hover,
#studioVoiceModal .voice-play-btn:hover {
  border-color: transparent !important;
  background: var(--voice-action-hover-background) !important;
  color: var(--voice-action-text) !important;
}

#studioVoiceModal .voice-filter-btn.active::before {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

#studioVoiceModal .voice-availability-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--voice-action-border);
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.2;
}

#studioVoiceModal .voice-action-status {
  border: 1px solid var(--voice-action-border);
}

#studioVoiceModal #studioQwen3RecordResult {
  background: var(--voice-action-soft-background) !important;
}

#studioVoiceModal .voice-play-btn:disabled {
  border-color: #4b5563 !important;
  background: #4b5563 !important;
  color: #d1d5db !important;
}

#studioVoiceModal .voice-play-btn.playing {
  background: #dc2626 !important;
}

body:not(.dark-theme) #studioVoiceModal #studioVoiceSearchInput {
  border-color: #d1d5db;
  background: #ffffff;
  color: #1f2937;
}

body:not(.dark-theme) #studioVoiceModal #studioVoiceSearchInput::placeholder {
  color: #6b7280;
}

body:not(.dark-theme) #studioVoiceModal .voice-engine-header,
body:not(.dark-theme) #studioVoiceModal .voice-item-name {
  color: #1f2937 !important;
}

body:not(.dark-theme) #studioVoiceModal .voice-card-preview-btn:not(:disabled) {
  border-color: #9ca3af !important;
  color: #4b5563 !important;
}

body:not(.dark-theme) #studioVoiceModal .voice-modal-tab.active,
body:not(.dark-theme) #studioVoiceModal .voice-provider-tab.active,
body:not(.dark-theme) #studioVoiceModal .voice-use-chip,
body:not(.dark-theme) #studioVoiceModal .voice-provider-use-chip,
body:not(.dark-theme) #studioVoiceModal .voice-tag.recommend {
  border-color: var(--voice-action-border) !important;
  background: var(--voice-action-background) !important;
  color: var(--voice-action-text) !important;
}

body:not(.dark-theme) #studioVoiceModal .voice-provider-tab.active {
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.35),
    0 4px 14px rgba(37, 99, 235, 0.2) !important;
}

body:not(.dark-theme) #studioVoiceModal .voice-provider-tab.active .voice-provider-tab-logo,
body:not(.dark-theme) #studioVoiceModal .voice-provider-tab.active .voice-provider-tab-count {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

body:not(.dark-theme) #studioVoiceModal .voice-provider-tab:focus-visible,
body:not(.dark-theme) #studioVoiceModal .voice-provider-toggle:focus-visible {
  outline-color: rgba(37, 99, 235, 0.8) !important;
}

body:not(.dark-theme) #studioVoiceModal .voice-filter-reset:hover,
body:not(.dark-theme) #studioVoiceModal .voice-usecase-reset:hover {
  border-color: #2563eb !important;
  color: #2563eb !important;
}

body:not(.dark-theme) #studioVoiceModal .voice-item.selected {
  border-color: #2563eb !important;
  background: #eff6ff !important;
}

body:not(.dark-theme) #studioVoiceModal .voice-item:not(.selected):not(.unavailable):hover {
  border-color: #93c5fd !important;
  background: #f8fbff !important;
}

.voice-filter-sidebar {
  width: 196px !important;
  flex: 0 0 196px;
}

.voice-provider-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin-left: auto;
  padding: 0;
  border: 1px solid #3f3f46;
  border-radius: 9px;
  background: #1f1f21;
  color: #d4d4d8;
  cursor: pointer;
  font-size: 0.84rem;
  line-height: 1;
}

.voice-provider-toggle:hover {
  border-color: #71717a;
  background: #29292c;
  color: #ffffff;
}

.voice-provider-toggle:focus-visible {
  outline: 2px solid rgba(248, 113, 113, 0.8);
  outline-offset: 2px;
}

.voice-modal.voice-providers-collapsed .voice-provider-tabs {
  min-height: 44px;
  align-items: center;
  padding-block: 5px;
}

.voice-modal.voice-providers-collapsed .voice-provider-tab-scroll {
  display: none !important;
}

.voice-provider-tabs,
.voice-usecase-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #121212;
  border-bottom: 1px solid #333;
  min-width: 0;
}

.voice-usecase-tabs {
  background: #151515;
  align-items: center;
}

.voice-usecase-tabs.is-hidden {
  display: none;
}

.voice-axis-label,
.voice-usecase-tabs-label {
  flex: 0 0 auto;
  color: #8f8f98;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
}

.voice-provider-tab-scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.voice-provider-tab-scroll::-webkit-scrollbar {
  height: 5px;
}

.voice-provider-tab-scroll::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 999px;
}

.voice-provider-tab {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  width: 76px;
  height: 72px;
  padding: 7px 4px 6px;
  border: 1px solid #383838;
  border-radius: 10px;
  background: #1c1c1c;
  color: #d1d5db;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.67rem;
  font-weight: 700;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.voice-provider-tab-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #9ca3af;
  font-size: 0.9rem;
  font-weight: 800;
  overflow: hidden;
}

.voice-provider-tab-logo img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.voice-provider-tab-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}

.voice-provider-tab:hover {
  border-color: #666;
  background: #252525;
  color: #fff;
  transform: translateY(-1px);
}

.voice-provider-tab:focus-visible {
  outline: 2px solid rgba(248, 113, 113, 0.75);
  outline-offset: 2px;
}

.voice-provider-tab.active {
  border-color: #ef2b31;
  background: rgba(229, 37, 42, 0.14);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(239, 43, 49, 0.55), 0 4px 14px rgba(229, 37, 42, 0.24);
}

.voice-provider-tab.active .voice-provider-tab-logo {
  background: rgba(229, 37, 42, 0.2);
  color: #fff;
}

.voice-provider-tab-count {
  position: absolute;
  top: 3px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #aeb2bb;
  font-size: 0.58rem;
  font-weight: 750;
  line-height: 1;
}

.voice-provider-tab.active .voice-provider-tab-count {
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
}

.voice-usecase-tab-scroll {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.voice-usecase-tab-scroll::-webkit-scrollbar {
  height: 5px;
}

.voice-usecase-tab-scroll::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 999px;
}

.voice-usecase-tab {
  flex: 0 0 auto;
  min-height: 32px;
  white-space: nowrap;
}

.voice-usecase-reset {
  flex: 0 0 auto;
  border: 1px solid #333;
  border-radius: 999px;
  background: transparent;
  color: #8f8f98;
  cursor: pointer;
  padding: 7px 11px;
  font-size: 0.78rem;
  font-weight: 650;
}

.voice-usecase-reset:hover {
  border-color: #dc2626;
  color: #fca5a5;
}

.voice-engine-items {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}

.voice-item {
  text-align: left !important;
}

.voice-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.voice-card-subline {
  margin-top: 3px;
  color: #8f8f98;
  font-size: 0.74rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-character-frame {
  position: relative;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1f2937, #111827);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.voice-character-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.voice-character-frame .voice-character-fallback {
  display: none;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
}

.voice-character-fallback-only .voice-character-fallback,
.voice-character-frame.is-broken .voice-character-fallback {
  display: inline-flex;
}

.voice-provider-use-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.voice-feature-chip,
.voice-use-chip,
.voice-provider-use-chip,
.voice-rec-chip,
.voice-cap-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #b8bbc3;
  font-size: 0.68rem;
  line-height: 1.2;
}

.voice-use-chip,
.voice-provider-use-chip {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.12);
  border-color: rgba(248, 113, 113, 0.2);
}

.voice-preview-avatar.has-image {
  overflow: hidden;
  background: #111827;
}

.voice-preview-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body:not(.dark-theme) .voice-card-subline {
  color: #6b7280;
}

body:not(.dark-theme) .voice-provider-tabs,
body:not(.dark-theme) .voice-usecase-tabs {
  background: #f8fafc;
  border-bottom-color: #e5e7eb;
}

body:not(.dark-theme) .voice-usecase-tabs {
  background: #ffffff;
}

body:not(.dark-theme) .voice-axis-label,
body:not(.dark-theme) .voice-usecase-tabs-label {
  color: #6b7280;
}

body:not(.dark-theme) .voice-provider-toggle {
  border-color: #d4d4d8;
  background: #ffffff;
  color: #52525b;
}

body:not(.dark-theme) .voice-provider-toggle:hover {
  border-color: #a1a1aa;
  background: #f4f4f5;
  color: #18181b;
}

body:not(.dark-theme) .voice-provider-tab {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #374151;
}

body:not(.dark-theme) .voice-provider-tab:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

body:not(.dark-theme) .voice-provider-tab.active {
  background: rgba(229, 37, 42, 0.1);
  border-color: #e5252a;
  color: #b91c1c;
}

body:not(.dark-theme) .voice-provider-tab-logo {
  background: #f3f4f6;
  color: #6b7280;
}

body:not(.dark-theme) .voice-provider-tab-count {
  background: #f3f4f6;
  color: #6b7280;
}

body:not(.dark-theme) .voice-provider-tab.active .voice-provider-tab-count {
  background: rgba(0, 0, 0, 0.18);
  color: #ffffff;
}

body:not(.dark-theme) .voice-usecase-reset {
  border-color: #e5e7eb;
  color: #6b7280;
}

body:not(.dark-theme) .voice-feature-chip,
body:not(.dark-theme) .voice-use-chip,
body:not(.dark-theme) .voice-provider-use-chip,
body:not(.dark-theme) .voice-rec-chip,
body:not(.dark-theme) .voice-cap-chip {
  background: #f3f4f6;
  border-color: #e5e7eb;
  color: #4b5563;
}

body:not(.dark-theme) .voice-use-chip,
body:not(.dark-theme) .voice-provider-use-chip {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}

#studioVoiceModal .voice-item:not(.unavailable):hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

#studioVoiceModal .voice-card-preview-btn {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

#studioVoiceModal .voice-item:not(.selected) {
  border-color: #2a2a2a !important;
  background: #1a1a1a !important;
}

#studioVoiceModal .voice-item.selected {
  border-color: #dc2626 !important;
  background: #1a1a1a !important;
}

#studioVoiceModal .voice-item.selected:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

body:not(.dark-theme) #studioVoiceModal .voice-item.selected {
  background: #fafafa !important;
}

body:not(.dark-theme) #studioVoiceModal .voice-item:not(.selected) {
  border-color: #e0e0e0 !important;
  background: #fafafa !important;
}

@media (max-width: 980px) {
  .voice-modal {
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
  }

  .voice-modal-content {
    flex-direction: column;
  }

  .voice-filter-sidebar {
    width: 100% !important;
    flex: 0 0 auto;
    max-height: 240px;
    border-right: 0 !important;
    border-bottom: 1px solid #333;
  }

  .voice-provider-tabs,
  .voice-usecase-tabs {
    padding: 8px 12px;
    gap: 8px;
  }

  .voice-axis-label,
  .voice-usecase-tabs-label {
    display: none;
  }

  .voice-provider-tab-scroll {
    flex: 1 1 auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .voice-modal {
    width: 100vw !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }

  .voice-modal-tabs {
    flex-wrap: wrap;
  }

  .voice-provider-tabs,
  .voice-usecase-tabs {
    padding: 8px;
  }

  .voice-usecase-tab,
  .voice-provider-tab,
  .voice-usecase-reset {
    min-height: 30px;
    font-size: 0.78rem;
  }

  #studioVoiceSearchInput {
    width: 100%;
    order: 10;
  }

  .voice-character-frame {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }

  .voice-modal-footer {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }

  .voice-settings {
    flex-wrap: wrap;
  }
}

/* ═══ 스톡 에셋 탭 (Unsplash·Pexels·Pixabay·Giphy) ═══ */
.stock-sentence-panel { min-width: 0; }
.stock-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--text-primary, #eee);
  font-size: 18px;
  font-weight: 700;
}
.stock-sentence-count { color: #8b949e; font-size: 16px; font-weight: 500; }
.stock-sentence-recommendations {
  max-height: 300px;
  overflow-y: auto;
  border-top: 1px solid var(--border-color, #333);
  border-bottom: 1px solid var(--border-color, #333);
}
.stock-sentence-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 6px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
}
.stock-sentence-row:last-child { border-bottom: 0; }
.stock-sentence-row:hover { background: rgba(255, 255, 255, 0.035); }
.stock-sentence-row.active {
  background: rgba(220, 38, 38, 0.09);
  box-shadow: inset 2px 0 #dc2626;
}
.stock-sentence-number {
  color: #8b949e;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.stock-sentence-summary {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.stock-sentence-text,
.stock-sentence-keyword {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stock-sentence-text { color: var(--text-primary, #eee); font-size: 18px; }
.stock-sentence-keyword { color: #62a883; font-size: 16px; }
.stock-sentence-actions {
  display: grid;
  grid-template-columns: repeat(2, 60px);
  gap: 4px;
}
.stock-sentence-type-btn {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border-color, #3b414a);
  border-radius: 4px;
  background: #17191d;
  color: #b8bec7;
  font-size: 16px;
  cursor: pointer;
}
.stock-sentence-type-btn:hover:not(:disabled),
.stock-sentence-type-btn.active {
  border-color: #dc2626;
  color: #fff;
}
.stock-sentence-type-btn:disabled { cursor: not-allowed; opacity: 0.4; }
.stock-sentence-empty { padding: 18px 8px; color: #777; font-size: 17px; text-align: center; }
.stock-source-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* 소스 on/off 스위치 스타일은 2026-08-28 제거 — 제작탭 틱톡 경로를
   걷어내며 마크업이 사라졌다. (되살리려면 git 이력 참조) */
.stock-bind-hint { margin-top: 8px; font-size: .95rem; line-height: 1.45; color: #f0b429; }
/* 기본 폭(400px)에선 2열, 패널을 넓히면 타일 크기는 유지한 채 열이 늘어난다 */
.stock-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; padding: 8px 0; }
.stock-result-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; cursor: pointer; background: #111; }
.stock-result-item img { width: 100%; height: 100%; object-fit: cover; }
.stock-result-item .stock-badge { position: absolute; top: 4px; right: 4px; font-size: .85rem; font-weight: 600; color: #fff; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .68); letter-spacing: .02em; }
.stock-result-item .stock-credit { position: absolute; bottom: 0; left: 0; right: 0; font-size: .84rem; padding: 3px 6px; background: rgba(0, 0, 0, .55); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-result-item.dragging { opacity: .5; }
.stock-status { font-size: 1rem; color: var(--text-secondary, #aaa); padding: 8px 20px; text-align: center; }
/* 스톡 탭 한정 컨트롤 확대 — "패널 텍스트가 너무 작다" (2026-07-14) */
#mediaTabStock .media-input,
#mediaTabStock .media-select { font-size: .95rem; }
#mediaTabStock .media-btn { font-size: .92rem; }
#mediaTabStock label { font-size: .92rem; }

/* 툴바 '스톡 전체' 분할 버튼 드롭다운 (사진/영상 선택) */
.stock-autofill-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 10002;
  flex-direction: column; min-width: 168px; padding: 4px;
  background: var(--bg-secondary, #16213e); border: 1px solid var(--border-color, #333);
  border-radius: 8px; box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}
.stock-autofill-menu-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  background: transparent; border: none; border-radius: 6px;
  color: var(--text-primary, #eee); font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.stock-autofill-menu-item:hover { background: var(--bg-tertiary, #1a1a2e); color: #0ea5e9; }
.media-input { padding: 6px 8px; border: 1px solid var(--border-color, #333); border-radius: 6px; background: var(--bg-input, #1a1a1a); color: var(--text-primary, #eee); font-size: 1.0808rem; }
.tts-slot-add-popup { display: flex; flex-direction: column; gap: 6px; padding: 8px; min-width: 180px; }
.tts-slot-add-popup .slot-add-input { width: 100%; padding: 6px 8px; border: 1px solid var(--border-color, #333); border-radius: 6px; background: var(--bg-input, #1a1a1a); color: var(--text-primary, #eee); font-size: .82rem; box-sizing: border-box; }
.tts-slot-add-popup .slot-add-pc { padding: 6px 8px; border: 1px solid var(--border-color, #333); border-radius: 6px; background: transparent; color: var(--text-primary, #eee); cursor: pointer; font-size: .82rem; }
.tts-slot-add-popup .slot-add-auto { padding: 8px; border: none; border-radius: 6px; background: #dc2626; color: #fff; cursor: pointer; font-size: .84rem; font-weight: 600; }
.tts-slot-add-popup .slot-add-auto:hover { background: #b91c1c; }
/* ── 업로드 카드: 영상 원본 비율 보존 + 손상 파일 표시 (2026-07-13) ── */
/* 영상은 크롭하지 않는다 — 16:9 카드에 cover로 욱여넣으면 세로 영상이 잘려 보인다 */
.media-upload-item video {
  object-fit: contain;
  background: #000;
}
/* 0바이트/손상/미지원 코덱 — 조용한 블랙 카드 대신 명시적 에러 */
.media-upload-item.media-broken::before {
  content: '⚠ 재생 불가 파일';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f87171;
  font-size: 18px;
  font-weight: 600;
  background: rgba(127, 29, 29, 0.28);
  z-index: 1;
}