/* 스튜디오 라이트 테마 — 수작업 보정 (2026-09-17)
 * 대부분은 studio-light.generated.css(스크립트 생성)가 맡는다. 여기는 생성으로 못 잡는 것만:
 * 파셜 인라인 style, JS 가 주입하는 <style>, 생성 규칙이 틀리게 옮긴 자리.
 * 선택자는 모두 html:not(.dark-theme) 로 시작한다. */

/* EditClaws처럼 미리보기의 화면 전용 배경색을 분리한다.
   영상·이미지·템플릿과 내보내기 배경은 바꾸지 않는다.
   preview-aspect-frame은 미디어 위의 자막 레이어이므로 배경을 칠하면 영상을 가린다. */
html:not(.dark-theme) .studio-preview {
  border-right-color: #e5e7eb;
}
html:not(.dark-theme) .preview-video-area,
html:not(.dark-theme) .preview-video-area .tts-image-container {
  background: #f7f8fa;
}

/* 어두운 배경 견본 안의 A는 밝게 유지한다. */
html:not(.dark-theme) #sttFontBg > span:first-child {
  color: #fff;
}

/* 업로드 모달(panel-template.html)의 파일 정보·자막추출 설정 칸 — 파셜 인라인 style 의 #141414 */
html:not(.dark-theme) #whisperUploadModal .studio-modal-body > div[style*="background: #141414"] {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html:not(.dark-theme) #whisperModalFileName {
  color: #1f2937 !important;
}

/* 흰 요소 / 흰 작업 바탕. 생성기의 색상 반전과 별개인 라이트 UI 규칙.
   미디어·색상 견본·슬라이더·상태 배지에는 적용하지 않는다. */
html:not(.dark-theme) {
  --bg-primary: #fff;
  --bg-tertiary: #fff;
  --bg-hover: #f9fafb;
  --stt-app-bg: var(--bg-primary);
  --stt-card-bg: #fff;
  --stt-card-hover: #fff;
  --stt-card-active: #fff;
  --studio-control-border: #e5e7eb;
  --studio-control-hover: #9ca3af;
  --studio-control-accent: #1d4ed8;
  --studio-surface-shadow: 0 1px 2px rgb(15 23 42 / 5%);
}

html:not(.dark-theme) body,
html:not(.dark-theme) :is(.studio-toolbar, .studio-work, .tts-result-section, .manual-onboarding) {
  background: var(--bg-primary);
}

/* 패널과 입력면. 인라인 색과 생성 CSS의 명시도를 넘는 표면 보정에만 !important를 쓴다. */
html:not(.dark-theme) :is(
  .studio-toolbar-group, .studio-toolbar-slider-wrap, .tts-voice-slider-row,
  .tts-voice-settings-panel .stt-clip-section, .tts-voice-settings-panel .stt-clip-split-header,
  .tts-voice-settings-panel .stt-clip-split-content, .project-menu-dropdown,
  .source-card, .source-card-header, .render-summary, .prompt-list-header,
  .voice-select-dialog, .studio-modal, .whisper-dialog, .tts-recent-voice-menu,
  .stt-palette-popup, .stt-inline-palette, .stt-style-popup, .stt-spacing-popup,
  .stt-clip-split-panel, .stt-clip-scope-header, .stt-clip-scope-dropdown,
  .stt-fontsize-combo, .stt-fontsize-dropdown, .stt-preset-popup, .stt-word-timing-popup,
  .template-panel, .template-settings-group, .title-editor-section,
  .title-text-panel .template-action-row, .img-adjust-panel, .stock-autofill-menu,
  .channel-dropdown, .auto-handoff-cell-header, .studio-download-card,
  .cp-intro-card, .cp-preview-card, .cp-voice-chosen, .cp-voice-card,
  .cp-manager-item, .cp-modal-footer, .cp-upload-zone, .cp-analyze-step,
  .script-claw-dock, .script-claw-current, .script-claw-impact,
  .script-claw-flow > span, .script-claw-impact-grid > div,
  .script-claw-meta, .manual-claw-badges > span,
  .manual-claw-summary, .manual-process-card, .manual-ai-choice, .manual-auto-start
) {
  background: #fff !important;
  border-color: var(--studio-control-border);
  box-shadow: var(--studio-surface-shadow);
}

html:not(.dark-theme) :is(
  .toolbar-input, .toolbar-select, .type-input, .rs-input, .img-prompt-input,
  .preview-prompt-area textarea, .source-card-body textarea, .ape-body textarea,
  .whisper-settings-row select, .whisper-subtitle-input, .whisper-result-text,
  .stt-style-input, .stt-clip-chars-input, .stt-fontsize-edit, .stt-fp-search input,
  .tts-img-settings-select, .tts-img-settings-textarea, .source-guide-url-input,
  .media-textarea, .media-select, .media-input, .tts-slot-add-popup .slot-add-input,
  .pipeline-output-area textarea, .manual-response-area textarea, #studioVoiceSearchInput
) {
  background: #fff !important;
  border-color: var(--studio-control-border);
}

/* 모든 작업 탭의 공용 컨트롤은 흰 면을 유지하고 테두리로 반응한다. */
html:not(.dark-theme) :is(
  .toolbar-btn, .stt-style-toggle-btn, .stt-font-picker-btn, .stt-font-btn,
  .stt-color-btn, .stt-style-btn, .stt-spacing-btn, .stt-vpos-btn,
  .stt-vpos-arrows button, .stt-palette-tool-btn, .stt-popup-align-btn,
  .stt-preset-btn, .stt-clip-undo-btn, .stt-max-chars-indicator,
  .tts-action-btn-sm, .tts-speed-select, .tts-toolbar-action-btn,
  .tts-style-preset-select, .tts-preview-btn, .tts-preview-prompt,
  .tts-img-settings-ratio-card, .template-mode-btn, .title-add-object-btn,
  .title-object-chip, .img-adjust-action-btn, .media-btn, .media-btn-icon,
  .channel-selector-btn, .script-mode-toggle button, .manual-ai-btn,
  .manual-prompt-copy-btn, .smart-preset-btn, .stock-sentence-type-btn,
  .vs-preset-chip, .vs-preset-tab, .pbw-option, .studio-download-card__button,
  .studio-download-card__close, .render-btn, .type-btn, .voice-filter-btn,
  .script-claw-action, .manual-claw-summary-actions button, .pipeline-mode-btn,
  #manualModeToggle button
) {
  background: #fff !important;
  color: var(--text-primary);
  border-color: var(--studio-control-border);
  box-shadow: var(--studio-surface-shadow);
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out, color 120ms ease-out;
}

html:not(.dark-theme) :is(
  .toolbar-btn, .stt-style-toggle-btn, .stt-font-picker-btn, .tts-action-btn-sm,
  .tts-toolbar-action-btn, .tts-preview-btn, .media-btn, .media-btn-icon,
  .channel-selector-btn, .script-mode-toggle button, .template-mode-btn,
  .title-object-chip, .img-adjust-action-btn, .manual-ai-btn, .type-btn,
  .voice-filter-btn, .stt-preset-btn, .render-btn,
  .script-claw-action, .manual-claw-summary-actions button
):hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--studio-control-hover);
  box-shadow: 0 1px 3px rgb(15 23 42 / 10%);
}

html:not(.dark-theme) :is(
  .toolbar-btn.active, .stt-style-btn-wrapper.is-enabled .stt-style-main-btn,
  .script-mode-toggle button.active, .template-mode-btn.active, .title-object-chip.active,
  .media-tab.active, .voice-filter-btn.active, .voice-modal-tab.active,
  .studio-menu-btn.active, .stt-fp-tab.active, .stt-fp-cat.active,
  .vs-preset-tab.active, .type-btn.active, .aspect-ratio-card.active,
  .tts-recent-voice-item.is-selected, .pbw-option.is-selected,
  .pipeline-mode-btn.active, .pipeline-step-item.active, .manual-step-item.active,
  #manualModeToggle button[aria-pressed="true"]
) {
  background: #fff !important;
  color: var(--studio-control-accent) !important;
  border-color: var(--studio-control-accent);
  box-shadow: inset 0 -2px var(--studio-control-accent), var(--studio-surface-shadow);
}

/* 자주 쓰는 생성 동작도 흰 면 위의 파란 글자와 선으로 한 단계만 강조한다. */
html:not(.dark-theme) :is(
  #ttsToolbarGenBtn, #mediaPanelGenTtsBtn, .stt-clip-apply-btn,
  .tts-img-settings-gen-btn, .template-apply-btn, .custom-ratio-apply-btn,
  .source-home-guide-btn, .toolbar-btn.primary, .media-btn.primary,
  .pipeline-actions button.primary, .manual-actions button.primary,
  .img-adjust-action-btn.primary, .render-btn--primary, .tts-sentence-play,
  .pipeline-run-all-btn, .step-automation-btn
) {
  background: #fff !important;
  color: var(--studio-control-accent) !important;
  border: 1px solid #bfdbfe;
  border-color: #bfdbfe !important;
  box-shadow: var(--studio-surface-shadow);
}
html:not(.dark-theme) :is(#ttsToolbarGenBtn, #mediaPanelGenTtsBtn, .stt-clip-apply-btn):hover:not(:disabled) {
  border-color: var(--studio-control-accent) !important;
}

/* Claw 아바타의 색은 JS가 지정하는 견본이므로 테마 변환된 글자색을 쓰지 않는다. */
html:not(.dark-theme) :is(.script-claw-avatar, .manual-claw-avatar) {
  color: #fff;
}
html:not(.dark-theme) #manualModeToggle button {
  color: var(--text-primary) !important;
}

html:not(.dark-theme) :is(.studio-app, .studio-modal, .stt-clip-split-panel, .image-gallery-panel)
  :is(button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--studio-control-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.dark-theme) :is(.toolbar-btn, .tts-action-btn-sm, .media-btn, .script-mode-toggle button) {
    transition: none;
  }
}