/* ===========================
   Tube-Up Theme System
   Light/Dark mode CSS variables
   =========================== */

/* Light Mode (default) */
:root {
    --bg-main: #f5f5f7;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f2f5;
    --bg-input: #ffffff;
    --bg-modal: #ffffff;
    --bg-tooltip: #1e293b;
    --bg-elevated: #e8ecf1;

    --text-main: #1a1a2e;
    --text-muted: #5a637e;
    --text-heading: #0f172a;
    --text-inverse: #f8fafc;
    --text-bright: #0f172a;

    --border-main: #d1d5de;
    --border-light: #e2e8f0;

    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.18);

    --scrollbar-track: #ebedf2;
    --scrollbar-thumb: #bcc3d0;
}

/* Dark Mode */
.dark {
    --bg-main: #0f0f13;
    --bg-sidebar: #13131a;
    --bg-card: #1a1a24;
    --bg-card-hover: #22222e;
    --bg-input: #1e1e2a;
    --bg-modal: #1a1a24;
    --bg-tooltip: #f8fafc;
    --bg-elevated: #22222e;

    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --text-heading: #f8fafc;
    --text-inverse: #1e293b;
    --text-bright: #ffffff;

    --border-main: #2d2d3b;
    --border-light: #1e1e2a;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);

    --scrollbar-track: #1a1a24;
    --scrollbar-thumb: #2d2d3b;
}

/* ===========================
   Light Mode: Override common 
   Tailwind dark-colored classes.
   In dark mode these are untouched.
   =========================== */

/* --- Backgrounds --- */
:root:not(.dark) .bg-slate-900,
:root:not(.dark) .bg-slate-950 {
    background-color: var(--bg-main) !important;
}

:root:not(.dark) .bg-slate-800 {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-main) !important;
}

:root:not(.dark) .bg-slate-800\/10,
:root:not(.dark) .bg-slate-800\/20,
:root:not(.dark) .bg-slate-800\/30,
:root:not(.dark) .bg-slate-800\/40,
:root:not(.dark) .bg-slate-800\/50,
:root:not(.dark) .bg-slate-800\/60,
:root:not(.dark) .bg-slate-800\/70,
:root:not(.dark) .bg-slate-800\/80,
:root:not(.dark) .bg-slate-800\/90,
:root:not(.dark) .bg-slate-800\/95 {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-main) !important;
}

:root:not(.dark) .bg-slate-700 {
    background-color: var(--bg-elevated) !important;
}

:root:not(.dark) .bg-slate-700\/10,
:root:not(.dark) .bg-slate-700\/20,
:root:not(.dark) .bg-slate-700\/30,
:root:not(.dark) .bg-slate-700\/40,
:root:not(.dark) .bg-slate-700\/50,
:root:not(.dark) .bg-slate-700\/60,
:root:not(.dark) .bg-slate-700\/70,
:root:not(.dark) .bg-slate-700\/80,
:root:not(.dark) .bg-slate-700\/90,
:root:not(.dark) .bg-slate-700\/95 {
    background-color: var(--bg-elevated) !important;
}

:root:not(.dark) .bg-gray-900 {
    background-color: var(--bg-main) !important;
}

:root:not(.dark) .bg-gray-800 {
    background-color: var(--bg-card) !important;
}

:root:not(.dark) .bg-zinc-900 {
    background-color: var(--bg-main) !important;
}

:root:not(.dark) .bg-slate-900\/10,
:root:not(.dark) .bg-slate-900\/20,
:root:not(.dark) .bg-slate-900\/30,
:root:not(.dark) .bg-slate-900\/40,
:root:not(.dark) .bg-slate-900\/50,
:root:not(.dark) .bg-slate-900\/60,
:root:not(.dark) .bg-slate-900\/70,
:root:not(.dark) .bg-slate-900\/80 {
    background-color: var(--bg-elevated) !important;
}

/* --- Texts --- */
:root:not(.dark) .text-white {
    color: var(--text-main) !important;
}

:root:not(.dark) .text-gray-100,
:root:not(.dark) .text-gray-200,
:root:not(.dark) .text-slate-100,
:root:not(.dark) .text-slate-200 {
    color: var(--text-heading) !important;
}

:root:not(.dark) .text-gray-300,
:root:not(.dark) .text-slate-300 {
    color: #374151 !important;
}

:root:not(.dark) .text-gray-400,
:root:not(.dark) .text-slate-400 {
    color: var(--text-muted) !important;
}

:root:not(.dark) .text-gray-500,
:root:not(.dark) .text-slate-500 {
    color: var(--text-muted) !important;
}

/* =============================================
   TARGETED FIX: Keep text white ONLY on elements
   that directly have BOTH a colored bg + text-white.
   (Same element, not parent-child)
   ============================================= */

/* Red/primary buttons & links (same element) */
:root:not(.dark) .bg-primary.text-white,
:root:not(.dark) .bg-primary-hover.text-white,
:root:not(.dark) .bg-red-600.text-white,
:root:not(.dark) .bg-red-700.text-white,
:root:not(.dark) .bg-amber-500.text-white {
    color: #ffffff !important;
}

/* Gradient buttons (from-primary to-... ) */
:root:not(.dark) [class*="from-primary"][class*="to-"].text-white,
:root:not(.dark) [class*="from-blue"][class*="to-"].text-white,
:root:not(.dark) [class*="from-red"][class*="to-"].text-white {
    color: #ffffff !important;
}

/* Sidebar logo icon (gradient bg with white icon inside) */
:root:not(.dark) .bg-gradient-to-br.from-primary .text-white,
:root:not(.dark) [class*="bg-gradient-to-br"][class*="from-primary"] .text-white {
    color: #ffffff !important;
}

/* Small badges on red bg */
:root:not(.dark) span.bg-primary {
    color: #ffffff !important;
}

/* Thumbnail overlay badges: keep text-white on dark overlays */
:root:not(.dark) .bg-black\/80 .text-white,
:root:not(.dark) .bg-black\/80.text-white,
:root:not(.dark) [class*="bg-black\/"].text-white,
:root:not(.dark) [class*="bg-black\/"] .text-white {
    color: #ffffff !important;
}

:root:not(.dark) .bg-red-600\/90.text-white,
:root:not(.dark) .bg-red-600\/90 .text-white {
    color: #ffffff !important;
}

:root:not(.dark) .bg-slate-900\/90.text-white,
:root:not(.dark) .bg-slate-900\/90 .text-white {
    color: #ffffff !important;
}

/* --- Borders --- */
:root:not(.dark) .border-slate-600,
:root:not(.dark) .border-slate-700,
:root:not(.dark) .border-slate-800 {
    border-color: var(--border-main) !important;
}

:root:not(.dark) .border-gray-600,
:root:not(.dark) .border-gray-700,
:root:not(.dark) .border-gray-800 {
    border-color: var(--border-main) !important;
}

:root:not(.dark) .border-white\/10,
:root:not(.dark) .border-white\/20 {
    border-color: var(--border-main) !important;
}

/* --- Dividers --- */
:root:not(.dark) .divide-slate-700>*+*,
:root:not(.dark) .divide-slate-800>*+* {
    border-color: var(--border-main) !important;
}

/* --- Rings --- */
:root:not(.dark) .ring-slate-700,
:root:not(.dark) .ring-slate-600 {
    --tw-ring-color: var(--border-main) !important;
}

/* --- Cards get shadow in light mode --- */
:root:not(.dark) .bg-card-dark {
    background-color: var(--bg-card) !important;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-main);
}

/* --- Inputs: clear borders & backgrounds --- */
:root:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.theme-toggle *),
:root:not(.dark) textarea {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-main) !important;
    color: var(--text-main) !important;
}

:root:not(.dark) select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-main) !important;
    color: var(--text-main) !important;
    color-scheme: light !important;
}

:root:not(.dark) input::placeholder,
:root:not(.dark) textarea::placeholder {
    color: #9ca3af !important;
}

:root:not(.dark) input:focus,
:root:not(.dark) textarea:focus,
:root:not(.dark) select:focus {
    border-color: #FF0000 !important;
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.1) !important;
}

/* --- Buttons: better visibility --- */
:root:not(.dark) .bg-white\/10 {
    background-color: #e8ecf1 !important;
    border-color: var(--border-main) !important;
}

:root:not(.dark) .bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* --- Modals --- */
:root:not(.dark) .bg-black\/60,
:root:not(.dark) .bg-black\/50,
:root:not(.dark) .bg-black\/40 {
    background-color: rgba(0, 0, 0, 0.25) !important;
}

:root:not(.dark) .modal-content {
    box-shadow: var(--shadow-modal);
}

/* --- Hover states --- */
:root:not(.dark) .hover\:bg-slate-700:hover,
:root:not(.dark) .hover\:bg-slate-800:hover {
    background-color: var(--bg-elevated) !important;
}

:root:not(.dark) .hover\:bg-white\/10:hover,
:root:not(.dark) .hover\:bg-white\/5:hover {
    background-color: #e8ecf1 !important;
}

:root:not(.dark) .hover\:text-white:hover {
    color: var(--text-heading) !important;
}

/* --- Sidebar enhancements --- */
:root:not(.dark) aside {
    border-right: 1px solid var(--border-main) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}

:root:not(.dark) .bg-sidebar-dark {
    background-color: var(--bg-sidebar) !important;
}

/* --- Header/Nav area --- */
:root:not(.dark) header {
    border-bottom: 1px solid var(--border-main) !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
}

/* --- Body hardcoded backgrounds override --- */
:root:not(.dark) body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
}

/* --- Manual/Pricing: custom color class overrides --- */
:root:not(.dark) .bg-background-dark,
:root:not(.dark) .bg-background-dark\/80 {
    background-color: var(--bg-main) !important;
}

:root:not(.dark) .border-border-dark {
    border-color: var(--border-main) !important;
}

:root:not(.dark) .border-border-dark\/50 {
    border-color: var(--border-light) !important;
}

:root:not(.dark) .text-border-dark {
    color: var(--border-main) !important;
}

:root:not(.dark) .bg-input-dark,
:root:not(.dark) .bg-input-dark\/50 {
    background-color: var(--bg-elevated) !important;
}

/* --- Hardcoded hex backgrounds --- */
:root:not(.dark) .bg-\[\#0f1117\],
:root:not(.dark) .bg-\[\#0f1117\]\/95 {
    background-color: var(--bg-main) !important;
}

:root:not(.dark) .bg-\[\#181b23\],
:root:not(.dark) .bg-\[\#1d212b\],
:root:not(.dark) .bg-\[\#1e2130\] {
    background-color: var(--bg-card) !important;
    border-color: var(--border-main) !important;
}

/* --- Manual/Pricing: text-text-muted is custom Tailwind (#8892a8), too light on white bg --- */
:root:not(.dark) .text-text-muted {
    color: #4b5563 !important;
}

/* --- Gradient backgrounds for manual section 8 (from-card-dark to-[#1d212b]) --- */
:root:not(.dark) [class*="from-card-dark"],
:root:not(.dark) [class*="to-\[#1d212b\]"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-main) !important;
    box-shadow: var(--shadow-card) !important;
}

/* --- Manual page steps (bg-slate-800/30) need visible distinction from card --- */
:root:not(.dark) .bg-slate-800\/30 {
    background-color: #f0f2f5 !important;
    border: 1px solid var(--border-light) !important;
}

/* --- Shadow overrides for amber/dark shadows --- */
:root:not(.dark) .shadow-amber-900\/10 {
    box-shadow: var(--shadow-card) !important;
}

/* --- Code blocks in manual --- */
:root:not(.dark) code.bg-slate-700 {
    background-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* --- Blue analysis panels --- */
:root:not(.dark) .bg-blue-900\/20 {
    background-color: #e8f0fe !important;
}

:root:not(.dark) .bg-blue-900\/10 {
    background-color: #f0f4ff !important;
}

:root:not(.dark) .bg-blue-900\/30 {
    background-color: #dbeafe !important;
}

:root:not(.dark) .text-blue-100 {
    color: #1e40af !important;
}

:root:not(.dark) .text-blue-200 {
    color: #1e3a8a !important;
}

:root:not(.dark) .bg-blue-800\/40 {
    background-color: #dbeafe !important;
}

/* ===========================
   video_create 라이트 모드 가독성 개선
   =========================== */

/* 어두운 배경 위 흰 글씨는 그대로 유지 */
:root:not(.dark) [class*="bg-slate-900/90"] .text-white,
:root:not(.dark) [class*="bg-slate-900/80"] .text-white,
:root:not(.dark) [class*="bg-slate-900/70"] .text-white,
:root:not(.dark) [class*="bg-black/"] .text-white,
:root:not(.dark) [class*="bg-zinc-900"] .text-white,
:root:not(.dark) [class*="bg-gray-900"] .text-white {
    color: #ffffff !important;
}

/* text-slate-200/300 — 라이트에서 충분히 진하게 */
:root:not(.dark) .text-slate-200 {
    color: #1e293b !important;
}

/* 프롬프트 텍스트 영역 글씨 가독성 */
:root:not(.dark) .text-slate-400 {
    color: #4b5563 !important;
}

/* bg-[#0f1117] 계열 — 영상 미리보기 오버레이 */
:root:not(.dark) .bg-\[#0f1117\]\/95 .text-white,
:root:not(.dark) .bg-\[#0f1117\]\/95 .text-slate-200,
:root:not(.dark) .bg-\[#0f1117\]\/95 .text-slate-300 {
    color: #ffffff !important;
}

/* 스타일 카드 내 선택 상태 텍스트 강조 */
:root:not(.dark) .border-primary .text-white,
:root:not(.dark) .border-red-500 .text-white {
    color: var(--text-main) !important;
}

/* 드롭다운 선택 옵션 텍스트 */
:root:not(.dark) select option {
    color: var(--text-main) !important;
    background-color: var(--bg-input) !important;
}

/* 진행 상태 바 위 텍스트 */
:root:not(.dark) .bg-primary .text-white {
    color: #ffffff !important;
}

/* ===========================
   amber 계열 텍스트 라이트 모드 가독성
   (크롬 확장 안내 패널 등)
   =========================== */
:root:not(.dark) .text-amber-300 {
    color: #92400e !important;
}

:root:not(.dark) .text-amber-200 {
    color: #a16207 !important;
}

:root:not(.dark) .text-amber-400 {
    color: #b45309 !important;
}

:root:not(.dark) .text-amber-200\/70 {
    color: #92400e !important;
}

:root:not(.dark) .bg-amber-500\/10 {
    background-color: #fef3c7 !important;
}

:root:not(.dark) .border-amber-500\/30 {
    border-color: #fcd34d !important;
}

/* yellow 계열 텍스트 라이트 모드 가독성 */
:root:not(.dark) .text-yellow-200,
:root:not(.dark) .text-yellow-200\/80 {
    color: #92400e !important;
}

:root:not(.dark) .text-yellow-100 {
    color: #78350f !important;
}

:root:not(.dark) .bg-yellow-500\/10 {
    background-color: #fefce8 !important;
}

:root:not(.dark) .border-yellow-500\/20 {
    border-color: #fde68a !important;
}

/* ===========================
   purple 계열 텍스트 라이트 모드 가독성
   (영상 변환 전 확인사항 체크리스트)
   =========================== */
:root:not(.dark) .text-purple-200,
:root:not(.dark) .text-purple-200\/80 {
    color: #5b21b6 !important;
}

:root:not(.dark) .text-purple-300,
:root:not(.dark) .text-purple-300\/50 {
    color: #6d28d9 !important;
}

:root:not(.dark) .text-purple-300\/50 {
    color: #7c3aed !important;
}

/* purple 섹션 내부 strong 태그 */
:root:not(.dark) .bg-purple-500\/10 .text-purple-200 {
    color: #4c1d95 !important;
    font-weight: 700;
}

/* ===========================
   워크스페이스 에디터 라이트모드 가독성
   (버튼 라벨, 섹션 헤더, 타임라인 등)
   =========================== */

/* cyan 계열 */
:root:not(.dark) .text-cyan-300 {
    color: #0e7490 !important;
}

:root:not(.dark) .text-cyan-400 {
    color: #0284c7 !important;
}

:root:not(.dark) .text-cyan-300\/70 {
    color: #0891b2 !important;
}

/* violet / purple 링크&버튼 */
:root:not(.dark) .text-violet-300 {
    color: #6d28d9 !important;
}

:root:not(.dark) .text-violet-400 {
    color: #7c3aed !important;
}

/* green / emerald */
:root:not(.dark) .text-green-300 {
    color: #15803d !important;
}

:root:not(.dark) .text-green-400 {
    color: #16a34a !important;
}

:root:not(.dark) .text-emerald-400 {
    color: #059669 !important;
}

/* orange */
:root:not(.dark) .text-orange-300 {
    color: #c2410c !important;
}

:root:not(.dark) .text-orange-400 {
    color: #ea580c !important;
}

/* blue */
:root:not(.dark) .text-blue-300 {
    color: #1d4ed8 !important;
}

:root:not(.dark) .text-blue-400 {
    color: #2563eb !important;
}

/* red */
:root:not(.dark) .text-red-400 {
    color: #b91c1c !important;
}

/* slate 에디터 패널 배경 가시성 */
:root:not(.dark) .bg-slate-900\/70 {
    background-color: #f1f5f9 !important;
}

/* 에디터 패널 input, select 다크 배경 라이트모드 오버라이드 */
:root:not(.dark) .bg-slate-900 {
    background-color: var(--bg-main) !important;
}

/* ===========================
   썸네일 생성기 라이트 모드 가독성
   =========================== */

/* 썸네일 섹션 details 컨테이너 배경 */
:root:not(.dark) #thumbnail-details {
    background-color: var(--bg-card) !important;
    border-color: var(--border-main) !important;
}

/* 썸네일 섹션 summary 헤더 */
:root:not(.dark) #thumbnail-details > summary {
    background-color: transparent !important;
}

:root:not(.dark) #thumbnail-details > summary:hover {
    background-color: var(--bg-elevated) !important;
}

/* 썸네일 섹션 내 텍스트/입력 필드 강제 가독성 */
:root:not(.dark) #thumbnail-details textarea,
:root:not(.dark) #thumbnail-details input[type="text"],
:root:not(.dark) #thumbnail-details input[type="number"],
:root:not(.dark) #thumbnail-details select {
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
    border-color: var(--border-main) !important;
}

:root:not(.dark) #thumbnail-details textarea::placeholder,
:root:not(.dark) #thumbnail-details input::placeholder {
    color: #6b7280 !important;
}

/* 썸네일 내부 설명 텍스트 가독성 */
:root:not(.dark) #thumbnail-details .text-slate-600 {
    color: #4b5563 !important;
}

:root:not(.dark) #thumbnail-details .text-slate-500 {
    color: #6b7280 !important;
}

/* 썸네일 내부 label (text-text-muted) 더 진하게 */
:root:not(.dark) #thumbnail-details label {
    color: #374151 !important;
}

/* 배치 스타일 버튼 텍스트 */
:root:not(.dark) #thumbnail-details .thumb-tpl-btn .text-slate-300 {
    color: #374151 !important;
}

/* yellow-400 텍스트 (AI 자동 생성 같은 버튼) 라이트모드 가독성 */
:root:not(.dark) .text-yellow-400 {
    color: #a16207 !important;
}

:root:not(.dark) .text-yellow-300 {
    color: #a16207 !important;
}

/* 노란색 폰트 모노 값 표시 */
:root:not(.dark) #thumbnail-details .text-yellow-400.font-mono {
    color: #92400e !important;
}


html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ===========================
   Theme toggle button
   =========================== */
.theme-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border-main);
    border-radius: 12px;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--text-muted);
}

.theme-toggle .toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--bg-card);
    border-radius: 50%;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dark .theme-toggle .toggle-thumb {
    transform: translateX(20px);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    font-size: 12px;
    transition: opacity 0.3s ease;
}

.theme-toggle .icon-sun {
    opacity: 1;
}

.theme-toggle .icon-moon {
    opacity: 0;
}

.dark .theme-toggle .icon-sun {
    opacity: 0;
}

.dark .theme-toggle .icon-moon {
    opacity: 1;
}

/* ===========================
   Scrollbar theming
   =========================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ===========================
   .dark-surface — 의도적으로 어두운 배경을 유지하는 컨테이너
   라이트모드에서도 내부 텍스트 색상을 다크테마 기준으로 보존.
   인라인 dark bg 가진 모달/카드에 class="dark-surface" 추가하면 자동 적용.
   =========================== */
:root:not(.dark) .dark-surface .text-white,
:root:not(.dark) .dark-surface strong.text-white {
    color: #f8fafc !important;
}
:root:not(.dark) .dark-surface .text-slate-100,
:root:not(.dark) .dark-surface .text-slate-200 {
    color: #e2e8f0 !important;
}
:root:not(.dark) .dark-surface .text-slate-300 {
    color: #cbd5e1 !important;
}
:root:not(.dark) .dark-surface .text-slate-400 {
    color: #94a3b8 !important;
}
:root:not(.dark) .dark-surface .text-text-muted {
    color: #94a3b8 !important;
}
:root:not(.dark) .dark-surface .text-purple-300 {
    color: #d8b4fe !important;
}
:root:not(.dark) .dark-surface .text-red-300,
:root:not(.dark) .dark-surface .text-red-400 {
    color: #fca5a5 !important;
}
:root:not(.dark) .dark-surface .text-green-300,
:root:not(.dark) .dark-surface .text-green-400 {
    color: #86efac !important;
}
:root:not(.dark) .dark-surface .text-blue-300,
:root:not(.dark) .dark-surface .text-blue-400 {
    color: #93c5fd !important;
}
:root:not(.dark) .dark-surface .text-amber-300,
:root:not(.dark) .dark-surface .text-amber-400 {
    color: #fcd34d !important;
}
:root:not(.dark) .dark-surface .text-yellow-300,
:root:not(.dark) .dark-surface .text-yellow-400 {
    color: #fde047 !important;
}
:root:not(.dark) .dark-surface .text-cyan-300,
:root:not(.dark) .dark-surface .text-cyan-400 {
    color: #67e8f9 !important;
}
:root:not(.dark) .dark-surface .text-violet-300,
:root:not(.dark) .dark-surface .text-violet-400 {
    color: #c4b5fd !important;
}
:root:not(.dark) .dark-surface .border-slate-700,
:root:not(.dark) .dark-surface .border-slate-600 {
    border-color: rgba(255,255,255,0.12) !important;
}
:root:not(.dark) .dark-surface input,
:root:not(.dark) .dark-surface textarea {
    background-color: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #f8fafc !important;
}
:root:not(.dark) .dark-surface input::placeholder,
:root:not(.dark) .dark-surface textarea::placeholder {
    color: #94a3b8 !important;
}

/* ===========================
   공지/배지 라이트모드 색상 — 배경이 흰색일 때 대비 확보
   =========================== */
:root:not(.dark) .badge-update {
    background: rgba(59,130,246,0.12) !important;
    color: #1d4ed8 !important;
    border-color: rgba(59,130,246,0.35) !important;
}
:root:not(.dark) .badge-event {
    background: rgba(16,185,129,0.12) !important;
    color: #065f46 !important;
    border-color: rgba(16,185,129,0.35) !important;
}
:root:not(.dark) .badge-notice {
    background: rgba(251,191,36,0.15) !important;
    color: #92400e !important;
    border-color: rgba(251,191,36,0.5) !important;
}
:root:not(.dark) .badge-important {
    background: rgba(239,68,68,0.1) !important;
    color: #b91c1c !important;
    border-color: rgba(239,68,68,0.35) !important;
}