/* ============================================
   다크모드 전용 스타일
   ============================================ */

/*  FOUC 완전 방지: html과 body 배경색 즉시 적용 (최우선) */
html.dark-mode {
    background-color: rgb(32, 33, 37) !important;
    color: #e2e8f0 !important;
    color-scheme: dark;
}

/* 배경 및 기본 텍스트 */
body.dark-mode {
    background: rgb(32, 33, 37) !important;
    background-color: rgb(32, 33, 37) !important;
    background-image: none !important;
    background-attachment: fixed;
    color: #e2e8f0 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /*  FOUC 방지: transition 완전 제거 */
    transition: none !important;
}

/*  FOUC 방지: html과 body의 background-color transition 완전 제거 */
html.dark-mode,
body.dark-mode {
    transition: none !important;
}

/* font-weight transition 완전 차단 - transition: all을 오버라이드하여 font-weight 제외 */
/* ⚠️ background-color transition 제거 - 깜빡임 방지 */
body.dark-mode *,
body.dark-mode *::before,
body.dark-mode *::after {
    transition-property: color, border-color, box-shadow, opacity, transform, width, height, padding, margin, left, right, top, bottom, background-image, background-position, filter, backdrop-filter, -webkit-backdrop-filter;
}

/* font-weight는 transition 없이 즉시 변경되도록 명시 */
/* ⚠️ background-color transition 제거 - 깜빡임 방지 */
body.dark-mode * {
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease, width 0.2s ease, height 0.2s ease, padding 0.2s ease, margin 0.2s ease, left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, background-image 0.2s ease, background-position 0.2s ease, filter 0.2s ease, backdrop-filter 0.2s ease, -webkit-backdrop-filter 0.2s ease;
}

body.dark-mode .lx_app_wrap {
    background: transparent;
}

/* 헤더 */
body.dark-mode .lx_app_header {
    background: rgb(32, 33, 37);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

body.dark-mode .brand .logo a {
    color: #f1f5f9;
}

/* 로고 다크 모드 전환 */
body.dark-mode .brand .logo-img.logo-light {
    display: none !important;
}

body.dark-mode .brand .logo-img.logo-dark {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

body:not(.dark-mode) .brand .logo-img.logo-light {
    display: block !important;
}

body:not(.dark-mode) .brand .logo-img.logo-dark {
    display: none !important;
}

/* company.jsp와 inquiry.jsp의 로고도 다크 모드 전환 */
body.dark-mode .logo-light {
    display: none !important;
}

body.dark-mode .logo-dark {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

body:not(.dark-mode) .logo-light {
    display: block !important;
}

body:not(.dark-mode) .logo-dark {
    display: none !important;
}

body.dark-mode .user-email-text {
    color: #e2e8f0;
    font-weight: 500;
}

body.dark-mode .user-dropdown-icon {
    color: #94a3b8;
}

/* 네비게이션 탭 */
body.dark-mode .nav-tab {
    color: #FFFFFF;
    font-weight: 500;
}

body.dark-mode .nav-tab.active {
    color: #818cf8;
    font-weight: 600;
}

body.dark-mode .nav-tab:hover {
    color: #818cf8;
}

body.dark-mode .nav-tab.active::after {
    background-color: #818cf8;
}

/* 헤더 버튼 */
body.dark-mode .header-btn {
    background-color: #374151;
    color: #f7fafc;
    border-color: #4b5563;
    font-weight: 500;
}

body.dark-mode .header-btn:hover {
    background-color: #4b5563;
    border-color: #6b7280;
}

/* 드롭다운 메뉴 */
body.dark-mode .user-dropdown-menu {
    background: rgb(42, 42, 45);
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .user-dropdown-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .dropdown-user-email {
    color: #FFFFFF;
    font-weight: 500;
}

body.dark-mode .user-dropdown-item {
    color: #FFFFFF !important;
}

body.dark-mode .user-dropdown-item span {
    color: #FFFFFF !important;
}

body.dark-mode .user-dropdown-item:hover {
    background-color: #334155;
}

body.dark-mode .user-dropdown-item:hover span {
    color: #FFFFFF !important;
}

body.dark-mode .user-dropdown-item i {
    color: #FFFFFF;
}

body.dark-mode .user-dropdown-item.logout {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 로고 드롭다운 메뉴 다크모드 */
body.dark-mode .logo-dropdown-menu {
    background: rgb(42, 42, 45);
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .logo-dropdown-item {
    color: #FFFFFF !important;
}

body.dark-mode .logo-dropdown-item:hover {
    background-color: #334155;
    color: #818cf8 !important;
}

body.dark-mode .logo-dropdown-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 로고 드롭다운 이미지 다크모드 */
body.dark-mode .logo-dropdown-img.logo-dropdown-light {
    display: none !important;
}

body.dark-mode .logo-dropdown-img.logo-dropdown-dark {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

body:not(.dark-mode) .logo-dropdown-img.logo-dropdown-light {
    display: block !important;
}

body:not(.dark-mode) .logo-dropdown-img.logo-dropdown-dark {
    display: none !important;
}

/* 버튼 */
body.dark-mode .login-btn {
    background-color: #6366f1;
    color: white;
    font-weight: 600;
    box-shadow: none;
}

body.dark-mode .login-btn:hover {
    background-color: #4f46e5;
    box-shadow: none;
}

body.dark-mode .signup-btn {
    background-color: #374151;
    color: #f7fafc;
    border-color: #4b5563;
    font-weight: 500;
}

body.dark-mode .signup-btn:hover {
    background-color: #4b5563;
    border-color: #6b7280;
}

body.dark-mode .work-btn {
    background-color: #334155;
    color: #cbd5e1;
    border-color: #475569;
}

body.dark-mode .work-btn:hover {
    background-color: #475569;
    color: #f1f5f9;
}

body.dark-mode .work-link {
    color: #cbd5e1;
}

body.dark-mode .work-link:hover {
    color: #818cf8;
}

/* 메뉴 버튼 */
body.dark-mode .menu-btn {
    background-color: #374151; 
    color: #f1f5f9;
    border-color: #475569;
}

body.dark-mode .menu-btn:hover {
    background-color: #475569;
}

body.dark-mode .menu-btn .dots span {
    background-color: #94a3b8;
}

/* 크레딧 표시 */
body.dark-mode .credit-label,
body.dark-mode .credit-amount {
    color: #e2e8f0;
    font-weight: 500;
}

body.dark-mode .header-credit-display {
    color: #818cf8;
    font-weight: 600;
}

body.dark-mode .header-credit-display .credit-value,
body.dark-mode .header-credit-display .credit-label {
    color: #818cf8;
    font-weight: 600;
}

/* 메가 메뉴 스타일은 mega-menu.css에서 관리 */

/* 언어 태그 버튼 */
body.dark-mode .language-tag-btn {
    background: rgba(30, 41, 59, 0.95);
    border-color: #6366f1;
    color: #818cf8;
}

body.dark-mode .language-tag-btn:hover {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

/* Kendo 버튼 */
body.dark-mode .k-button-solid-secondary {
    background: #374151;
    color: #f7fafc;
    border: 1px solid #4b5563;
    border-color: #4b5563;
}

body.dark-mode .k-button-solid-secondary:hover {
    background: #4b5563;
    border-color: #6b7280;
    color: #ffffff;
}

body.dark-mode .k-button-solid-primary {
    background: #374151;
    color: #f7fafc;
    border: 1px solid #4b5563;
    border-color: #4b5563;
}

body.dark-mode .k-button-solid-primary:hover {
    background: #4b5563;
    border-color: #6b7280;
    color: #ffffff;
}

/* 언어 패널 */
body.dark-mode .cp_cols {
    background: rgb(42, 42, 45);
    border-color: #374151;
    box-shadow: none;
}

body.dark-mode [data-panel-type="output"] .cp_cols {
    background: #1e3a5f;
    border-color: #1e40af;
    box-shadow: none;
}

body.dark-mode .cp_title_wrapper {
    background: rgb(42, 42, 45);
    border-bottom-color: #374151;
}

body.dark-mode [data-panel-type="output"] .cp_title_wrapper {
    background: #1e3a5f;
    border-bottom-color: #1e40af;
}

body.dark-mode .cp_title {
    color: #f7fafc;
    font-weight: 600;
}

body.dark-mode .cp_subtitle {
    color: #cbd5e1;
}

body.dark-mode .cp_title_badge {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #ffffff;
    box-shadow: none;
    font-weight: 700;
}

body.dark-mode .column-close-btn {
    background: rgba(107, 114, 128, 0.8);
    border-color: #9ca3af;
    color: #f7fafc;
}

body.dark-mode .column-close-btn:hover {
    background: rgba(156, 163, 175, 0.9);
    border-color: #d1d5db;
    color: #ffffff;
}

body.dark-mode .caption-open-btn {
    background: rgba(55, 65, 81, 0.6);
    border-color: #6b7280;
    color: #e2e8f0;
}

body.dark-mode .caption-open-btn:hover {
    background: rgba(75, 85, 99, 0.8);
    border-color: #9ca3af;
    color: #f7fafc;
}

/* 텍스트 블록 */
body.dark-mode .text-block,
body.dark-mode .cp_cols .text-block,
body.dark-mode .cp_cols_content .text-block {
    background: #374151;
    background-color: #374151;
    border-color: #374151;
    border-width: 1px;
}

body.dark-mode .text-block:hover,
body.dark-mode .cp_cols .text-block:hover,
body.dark-mode .cp_cols_content .text-block:hover {
    background: #4b5563;
    background-color: #4b5563;
    border-color: #4b5563;
}

/* 오른쪽 패널 텍스트 블록 - 왼쪽과 비슷한 밝기의 파란 계열 */
body.dark-mode [data-panel-type="output"] .text-block,
body.dark-mode [data-panel-type="output"] .cp_cols .text-block,
body.dark-mode [data-panel-type="output"] .cp_cols_content .text-block {
    background: #3a4556;
    background-color: #3a4556;
    border-color: #3a4556;
    border-width: 1px;
}

body.dark-mode [data-panel-type="output"] .text-block:hover,
body.dark-mode [data-panel-type="output"] .cp_cols .text-block:hover,
body.dark-mode [data-panel-type="output"] .cp_cols_content .text-block:hover {
    background: #475569;
    background-color: #475569;
    border-color: #475569;
}

body.dark-mode .text-block-content {
    color: #f7fafc;
    font-weight: 400;
}

body.dark-mode [data-panel-type="output"] .text-block-content {
    color: #e0e7ff;
}

body.dark-mode .text-block.typing .text-block-content::after {
    color: #818cf8;
    font-weight: bold;
}

/* 폰트 사이즈 컨트롤 */
body.dark-mode .font-size-control {
    background: rgb(42, 42, 45);
    border-color: #4a5568;
    box-shadow: none;
}

body.dark-mode .font-size-label {
    color: #e2e8f0;
    font-weight: 600;
}

body.dark-mode .font-size-btn {
    background: #374151;
    color: #e2e8f0;
    font-weight: 600;
}

body.dark-mode .font-size-btn:hover {
    background: #4b5563;
    color: #f7fafc;
}

body.dark-mode .font-size-btn.active {
    background: #6366f1;
    color: #ffffff;
    box-shadow: none;
}

/* 모달 */
body.dark-mode .modal-overlay {
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

body.dark-mode .modal-content {
    background: rgb(42, 42, 45);
    border-color: #4a5568;
    box-shadow: none;
}

body.dark-mode .modal-header {
    border-bottom-color: #475569;
}

body.dark-mode .modal-header h2 {
    color: #f7fafc;
    font-weight: 600;
}

body.dark-mode .modal-close {
    background: rgba(71, 85, 105, 0.5);
    border-color: #64748b;
    color: #cbd5e1;
}

body.dark-mode .modal-close:hover {
    background: rgba(100, 116, 139, 0.7);
    border-color: #94a3b8;
    color: #f1f5f9;
}

body.dark-mode .modal-body {
    color: #e2e8f0;
}

body.dark-mode .modal-description {
    color: #cbd5e1;
}

/* 과목 선택 */
body.dark-mode .subject-tabs {
    border-bottom-color: #4a5568;
}

body.dark-mode .subject-tab {
    color: #cbd5e1;
    font-weight: 500;
}

body.dark-mode .subject-tab:hover {
    color: #f7fafc;
    background: rgba(55, 65, 81, 0.5);
}

body.dark-mode .subject-tab.active {
    color: #818cf8;
    border-bottom-color: #818cf8;
    font-weight: 600;
}

body.dark-mode .subject-item {
    background: #374151;
    border-color: #4b5563;
    color: #f7fafc;
}

body.dark-mode .subject-item:hover {
    border-color: #818cf8;
    background: #4b5563;
}

body.dark-mode .subject-item.selected {
    border-color: #818cf8;
    background: rgba(99, 102, 241, 0.2);
    box-shadow: none;
}

body.dark-mode .subject-item .subject-name {
    color: #f7fafc;
    font-weight: 600;
}

body.dark-mode .subject-item .subject-code {
    color: #cbd5e1;
}

body.dark-mode .subject-select-text {
    color: #f7fafc;
    font-weight: 600;
}

body.dark-mode .subject-select-text:hover {
    color: #818cf8;
}

/* 언어 설정 모달 */
body.dark-mode .language-popup {
    background: rgb(42, 42, 45);
    border-color: rgb(32, 33, 37);
}

body.dark-mode .language-popup-title {
    color: #f7fafc;
    font-weight: 700;
}

body.dark-mode .language-popup-subtitle {
    color: #cbd5e1;
}

body.dark-mode .language-modal-close-btn {
    color: #cbd5e1;
}

body.dark-mode .language-modal-close-btn:hover {
    background-color: transparent;
    color: #cbd5e1;
}

body.dark-mode .language-section {
    background: #373737;
    border-color: #4b5563;
}

body.dark-mode .language-section-label {
    color: #f7fafc;
    font-weight: 600;
}

body.dark-mode .language-popup-select {
    background: rgb(32, 33, 37);
    border-color: #4b5563;
    color: #f7fafc;
}

body.dark-mode .language-popup-select:focus {
    border-color: #818cf8;
    background: #1e293b;
}

body.dark-mode .language-popup-select:hover {
    border-color: #64748b;
    background: #1e293b;
}

body.dark-mode .language-option-card {
    background: rgb(32, 33, 37);
    border-color: #4b5563;
}

body.dark-mode .language-option-card:hover {
    border-color: #6366f1;
    background: #4b5563;
}

body.dark-mode .language-option-card:has(.language-checkbox:checked) {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.2);
    box-shadow: none;
}

body.dark-mode .language-option-text {
    color: #f7fafc;
    font-weight: 500;
}

body.dark-mode .language-limit-notice {
    color: #cbd5e1;
}

body.dark-mode .language-popup-btn-save {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
}

body.dark-mode .language-popup-btn-save:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    transform: none;
}

body.dark-mode .language-popup-btn-cancel {
    background: rgba(71, 85, 105, 0.5);
    color: #cbd5e1;
    border-color: #64748b;
}

body.dark-mode .language-popup-btn-cancel:hover {
    background: rgba(100, 116, 139, 0.7);
    border-color: #94a3b8;
    color: #f1f5f9;
    transform: none;
}

/* Q&A 패널 */
body.dark-mode .qa-slide-panel {
    background: rgb(42, 42, 45);
    box-shadow: none;
}

body.dark-mode .qa-panel-header {
    background: rgb(42, 42, 45);
    border-bottom-color: #4a5568;
}

body.dark-mode .qa-panel-title {
    color: #f7fafc;
    font-weight: 600;
}

body.dark-mode .qa-panel-close-btn {
    color: #cbd5e1;
}

body.dark-mode .qa-panel-close-btn:hover {
    background: rgba(51, 65, 85, 0.5);
    color: #f1f5f9;
}

body.dark-mode .qa-chat-messages {
    background: rgb(42, 42, 45);
}

body.dark-mode .qa-message.student .qa-message-bubble {
    background: #374151;
    color: #f7fafc;
    border-color: #4b5563;
}

body.dark-mode .qa-message.student .qa-message-sender {
    color: #94a3b8;
}

body.dark-mode .qa-message.student .qa-message-time {
    color: #94a3b8;
}

body.dark-mode .qa-message.student .qa-original-btn {
    background: rgba(51, 65, 85, 0.8);
    border-color: #64748b;
    color: #cbd5e1;
}

body.dark-mode .qa-message.student .qa-original-btn:hover {
    background: #475569;
    color: #f1f5f9;
    border-color: #94a3b8;
}

body.dark-mode .qa-message.student .qa-original-text {
    color: #cbd5e1;
}

body.dark-mode .qa-message.student .qa-language-label {
    color: #94a3b8;
}

body.dark-mode .qa-panel-footer {
    background: rgb(42, 42, 45);
    border-top-color: #4a5568;
}

body.dark-mode .qa-input {
    background: #374151;
    border-color: #4b5563;
    color: #f7fafc;
}

body.dark-mode .qa-input:focus {
    border-color: #818cf8;
}

body.dark-mode .qa-input::placeholder {
    color: #94a3b8;
}

/* 재생 바 */
body.dark-mode .playback-btn {
    background: rgba(51, 65, 85, 0.6);
}

body.dark-mode .playback-btn:hover {
    background: rgba(71, 85, 105, 0.8);
}

body.dark-mode .playback-icon {
    color: #f1f5f9;
}

body.dark-mode .playback-time {
    color: #cbd5e1;
}

body.dark-mode .time-separator {
    color: #64748b;
}

body.dark-mode .playback-seek {
    background: rgba(51, 65, 85, 0.6);
}

body.dark-mode .seek-progress {
    background: #818cf8;
}

body.dark-mode .seek-slider::-webkit-slider-thumb {
    background: #818cf8;
}

body.dark-mode .seek-slider::-moz-range-thumb {
    background: #818cf8;
}

/* 타이머 */
body.dark-mode .timer {
    color: #cbd5e1;
    font-weight: 500;
}

body.dark-mode .timer .num {
    color: #f7fafc;
    font-weight: 600;
}

body.dark-mode .k-icon.k-i-clock {
    color: #cbd5e1;
}

/* 번역 기록 섹션 */
body.dark-mode .translation-history-section {
    background-color: #2d3748;
    border-top-color: #4a5568;
}

body.dark-mode .history-title {
    color: #f7fafc;
    font-weight: 600;
}

body.dark-mode .history-close-btn {
    background-color: #475569;
    color: #cbd5e1;
}

body.dark-mode .history-close-btn:hover {
    background-color: #64748b;
    color: #f1f5f9;
}

body.dark-mode .subject-filter {
    background-color: #334155;
    border-color: #475569;
}

body.dark-mode .subject-filter label {
    color: #cbd5e1;
}

body.dark-mode .subject-filter select {
    background-color: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
}

body.dark-mode .subject-filter select:focus {
    border-color: #818cf8;
}

body.dark-mode .history-item {
    background-color: #374151;
    border-left-color: #818cf8;
}

body.dark-mode .history-item.current-translation {
    background-color: rgba(16, 185, 129, 0.15);
    border-left-color: #10b981;
}

body.dark-mode .history-item.current-translation .history-item-title {
    color: #10b981;
    font-weight: 600;
}

body.dark-mode .history-item-title {
    color: #f7fafc;
    font-weight: 600;
}

body.dark-mode .history-item-meta {
    color: #cbd5e1;
}

body.dark-mode .history-item-content .translation-pair {
    background-color: #1e293b;
}

body.dark-mode .translation-pair .original {
    color: #cbd5e1;
    border-bottom-color: #475569;
}

body.dark-mode .translation-pair .translated {
    color: #818cf8;
}

body.dark-mode .empty-state {
    color: #94a3b8;
}

/* 번역 기록 모달 */
body.dark-mode #translationHistoryModal .modal-header {
    background: #1e293b;
    border-bottom-color: #475569;
}

body.dark-mode #translationHistoryModal .modal-header h2 {
    color: #f1f5f9;
}

body.dark-mode #translationHistoryModal .modal-close {
    color: #cbd5e1;
}

body.dark-mode #translationHistoryModal .modal-close:hover {
    background: rgba(51, 65, 85, 0.5);
    color: #f1f5f9;
}

body.dark-mode .course-detail-body {
    background: #1e293b;
}

body.dark-mode .section-title-modal {
    color: #f1f5f9;
    border-bottom-color: #818cf8;
}

body.dark-mode .info-label-modal {
    color: #94a3b8;
}

body.dark-mode .info-value-modal {
    color: #f1f5f9;
}

body.dark-mode .translation-record-item {
    background: #334155;
    border-color: #475569;
}

body.dark-mode .translation-record-item:hover {
    box-shadow: none;
}

body.dark-mode .record-header {
    background: rgb(53, 56, 59);
}

body.dark-mode .record-header:hover {
    background: rgb(53, 56, 59);
}

body.dark-mode .record-subject {
    color: #818cf8;
}

body.dark-mode .record-date {
    color: #f1f5f9;
}

body.dark-mode .record-time {
    color: #94a3b8;
}

body.dark-mode .record-duration {
    background: #475569;
    color: #cbd5e1;
}

body.dark-mode .record-content {
    background: rgb(53, 56, 59);
    border-top-color: #475569;
}

body.dark-mode .lang-tab-btn {
    color: #94a3b8;
}

body.dark-mode .lang-tab-btn:hover {
    color: #818cf8;
    background: #334155;
}

body.dark-mode .lang-tab-btn.active {
    color: #818cf8;
    border-bottom-color: #818cf8;
}

body.dark-mode .translation-text-block {
    border-left-color: #818cf8;
    color: #f1f5f9;
}

body.dark-mode .translation-time {
    color: #94a3b8;
}

body.dark-mode .translation-text {
    color: #f1f5f9;
}

body.dark-mode .modal-footer {
    background: #1e293b;
    border-top-color: #475569;
}

body.dark-mode .modal-btn.primary {
    background: #6366f1;
}

body.dark-mode .modal-btn.primary:hover {
    background: #4f46e5;
}

body.dark-mode .modal-btn.secondary {
    background: #475569;
}

body.dark-mode .modal-btn.secondary:hover {
    background: #64748b;
}

body.dark-mode .modal-btn.danger {
    background: #dc2626;
}

body.dark-mode .modal-btn.danger:hover {
    background: #b91c1c;
}

/* Toast 알림 */
body.dark-mode .toast {
    background-color: #334155;
    color: #f1f5f9;
    box-shadow: none;
}

/* 저장 팝업 */
body.dark-mode .save-popup-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

body.dark-mode .save-popup-content {
    background: rgba(30, 41, 59, 0.98);
    background-color: rgba(30, 41, 59, 0.98);
    border: 1px solid #475569;
    border-color: #475569;
    box-shadow: none;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

body.dark-mode .save-popup-message {
    color: #cbd5e1;
}

body.dark-mode .save-popup-icon {
    color: #cbd5e1;
}

body.dark-mode .save-complete-icon {
    box-shadow: none;
}

body.dark-mode .loading-dots .dot {
    box-shadow: none;
}

body.dark-mode .save-popup-confirm-btn {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    box-shadow: none;
}

body.dark-mode .save-popup-confirm-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    box-shadow: none;
}

/* Room Code */
body.dark-mode .room-code-popup {
    background: rgba(30, 41, 59, 0.98);
    border-color: #475569;
}

body.dark-mode .room-code-title {
    color: #f1f5f9;
}

body.dark-mode .room-code-instruction {
    color: #94a3b8;
}

body.dark-mode .room-code-display-inline {
    background: rgba(51, 65, 85, 0.9);
    border-color: #475569;
}

body.dark-mode .room-code-label {
    color: #94a3b8;
}

body.dark-mode .room-code-text {
    color: #f1f5f9;
}

/* 스크롤바 */
body.dark-mode .cp_cols_content::-webkit-scrollbar-track {
    background: rgba(55, 65, 81, 0.5);
}

body.dark-mode .cp_cols_content::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.6);
    border-radius: 4px;
}

body.dark-mode .cp_cols_content::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.8);
}

/* 강의 시작/종료 버튼 - 언어 설정 버튼과 동일한 스타일 */
body.dark-mode #lectureToggleBtn:not(.lecture-end),
body.dark-mode button#lectureToggleBtn.k-button:not(.lecture-end),
body.dark-mode button#lectureToggleBtn.k-button.k-button-md.k-rounded-md.k-button-solid:not(.lecture-end) {
    background: #374151;
    background-color: #374151;
    color: #f7fafc;
    border: 1px solid #4b5563;
    border-color: #4b5563;
    box-shadow: none;
}

body.dark-mode #lectureToggleBtn:not(.lecture-end):hover,
body.dark-mode button#lectureToggleBtn.k-button:not(.lecture-end):hover,
body.dark-mode button#lectureToggleBtn.k-button.k-button-md.k-rounded-md.k-button-solid:not(.lecture-end):hover {
    background: #4b5563;
    background-color: #4b5563;
    border-color: #6b7280;
    color: #ffffff;
}

body.dark-mode #lectureToggleBtn.lecture-end {
    background: #ef4444;
    color: white;
}

body.dark-mode #lectureToggleBtn.lecture-end:hover {
    background: #dc2626;
}

body.dark-mode #lectureToggleBtn:disabled {
    background: #475569;
    color: #94a3b8;
}

/* Q&A 마이크 토글 */
body.dark-mode .qa-mic-toggle-label {
    color: #94a3b8;
}

body.dark-mode .qa-mic-toggle-wrapper:has(.qa-mic-toggle-btn.active) .qa-mic-toggle-label {
    color: #818cf8;
}

/* ============================================
   크레딧 충전 페이지 (Pricing Page) 다크모드
   ============================================ */

/* 크레딧 충전 섹션 */
body.dark-mode .pricing-section {
    background: transparent;
    border-bottom-color: #374151;
}

body.dark-mode .pricing-title {
    color: #FFFFFF;
}

body.dark-mode .pricing-subtitle {
    color: #cbd5e1;
}

/* 크레딧 잔액 표시 */
body.dark-mode .credit-balance-section {
    background: rgb(42, 42, 45);
    border-color: #4a5568;
}

body.dark-mode .credit-balance-label {
    color: #cbd5e1;
}

body.dark-mode .credit-balance-amount {
    color: #818cf8;
}

body.dark-mode .credit-balance-unit {
    color: #e2e8f0;
}

body.dark-mode .credit-usage-info {
    border-top-color: #4a5568;
}

body.dark-mode .credit-usage-label {
    color: #cbd5e1;
}

body.dark-mode .credit-usage-value {
    color: #FFFFFF;
}

/* 크레딧 패키지 카드 */
body.dark-mode .pricing-card {
    background: rgb(42, 42, 45);
    border-color: #4a5568;
}

body.dark-mode .pricing-card:hover {
    border-color: #6366f1;
    box-shadow: none;
}

body.dark-mode .pricing-card.popular {
    border-color: #6366f1;
    box-shadow: none;
}

body.dark-mode .pricing-card-badge {
    background: #EF4444;
    color: white;
    box-shadow: none;
}

body.dark-mode .pricing-card-badge.popular {
    background: #6366f1;
    color: white;
    box-shadow: none;
}

body.dark-mode .pricing-card-description {
    color: #cbd5e1;
}

body.dark-mode .pricing-card-description .duration-number {
    color: #FFFFFF;
}

body.dark-mode .pricing-card-credit {
    color: #FFFFFF;
}

body.dark-mode .pricing-card-credit .credit-unit {
    color: #cbd5e1;
}

body.dark-mode .pricing-card-original-price {
    color: #6b7280;
}

body.dark-mode .pricing-card-discounted-price {
    color: #EF4444;
}

body.dark-mode .pricing-card-button {
    background: #4f46e5;
    color: white;
}

body.dark-mode .pricing-card-button:hover {
    background: #4338ca;
}

/* 크레딧 사용 안내 */
body.dark-mode .credit-info-box {
    background: rgb(42, 42, 45);
    border-color: #4a5568;
}

body.dark-mode .credit-info-title {
    color: #FFFFFF;
}

body.dark-mode .credit-info-title i {
    color: #818cf8;
}

body.dark-mode .credit-info-list li {
    color: #cbd5e1;
}

body.dark-mode .credit-info-list li::before {
    color: #818cf8;
}

body.dark-mode .credit-info-list li.section-title strong {
    color: #FFFFFF;
}

/* FAQ/문의/저작권 카드 */
body.dark-mode .info-card {
    background: rgb(42, 42, 45);
    border-color: #4a5568;
}

body.dark-mode .info-card:hover {
    border-color: #6366f1;
    box-shadow: none;
}

body.dark-mode .info-card-title {
    color: #FFFFFF;
}

body.dark-mode .info-card-description {
    color: #cbd5e1;
}

body.dark-mode .info-card-icon {
    color: #818cf8;
}

/* ============================================
   가이드 페이지 (Guide Page) 다크모드
   ============================================ */

/* guide.css의 white 배경 오버라이드 - guide.css가 나중에 로드되므로 !important 필수 */
/* 참고: body.dark-mode 기본 스타일은 파일 상단에서 정의됨 */
body.dark-mode .guide-section,
html.dark-mode .guide-section {
    background: rgb(32, 33, 37) !important;
    background-color: rgb(32, 33, 37) !important;
}

body.dark-mode .guide-hero-section,
html.dark-mode .guide-hero-section {
    background: rgb(32, 33, 37) !important;
    background-color: rgb(32, 33, 37) !important;
}

/* guide.css의 모든 white 배경 요소 오버라이드 */
body.dark-mode .guide-badge,
html.dark-mode .guide-badge {
    background: rgb(42, 42, 45) !important;
    background-color: rgb(42, 42, 45) !important;
}

body.dark-mode .glass-nav {
    background: rgba(32, 33, 37, 0.95) !important;
}

body.dark-mode .text-gray-500 {
    color: #9ca3af !important;
}

body.dark-mode .text-gray-600 {
    color: #d1d5db !important;
}

body.dark-mode .text-gray-400 {
    color: #9ca3af !important;
}

body.dark-mode .bg-gray-50 {
    background-color: #2d3748 !important;
}

body.dark-mode .border-gray-200 {
    border-color: #4a5568 !important;
}

/* ============================================
   크레딧 충전 페이지 (Pricing Page) 다크모드
   ============================================ */

/* 크레딧 충전 섹션 */
body.dark-mode .pricing-section {
    background: transparent;
    border-bottom-color: #374151;
}

body.dark-mode .pricing-title {
    color: #FFFFFF;
}

body.dark-mode .pricing-subtitle {
    color: #cbd5e1;
}

/* 크레딧 잔액 표시 */
body.dark-mode .credit-balance-section {
    background: rgb(42, 42, 45);
    border-color: #4a5568;
}

body.dark-mode .credit-balance-label {
    color: #cbd5e1;
}

body.dark-mode .credit-balance-amount {
    color: #818cf8;
}

body.dark-mode .credit-balance-unit {
    color: #e2e8f0;
}

body.dark-mode .credit-usage-info {
    border-top-color: #4a5568;
}

body.dark-mode .credit-usage-label {
    color: #cbd5e1;
}

body.dark-mode .credit-usage-value {
    color: #FFFFFF;
}

/* 크레딧 패키지 카드 */
body.dark-mode .pricing-card {
    background: rgb(42, 42, 45);
    border-color: #4a5568;
}

body.dark-mode .pricing-card:hover {
    border-color: #6366f1;
    box-shadow: none;
}

body.dark-mode .pricing-card.popular {
    border-color: #6366f1;
    box-shadow: none;
}

body.dark-mode .pricing-card-badge {
    background: #EF4444;
    color: white;
    box-shadow: none;
}

body.dark-mode .pricing-card-badge.popular {
    background: #6366f1;
    color: white;
    box-shadow: none;
}

body.dark-mode .pricing-card-description {
    color: #cbd5e1;
}

body.dark-mode .pricing-card-description .duration-number {
    color: #FFFFFF;
}

body.dark-mode .pricing-card-credit {
    color: #FFFFFF;
}

body.dark-mode .pricing-card-credit .credit-unit {
    color: #cbd5e1;
}

body.dark-mode .pricing-card-original-price {
    color: #6b7280;
}

body.dark-mode .pricing-card-discounted-price {
    color: #EF4444;
}

body.dark-mode .pricing-card-button {
    background: #4f46e5;
    color: white;
}

body.dark-mode .pricing-card-button:hover {
    background: #4338ca;
}

/* 크레딧 사용 안내 */
body.dark-mode .credit-info-box {
    background: rgb(42, 42, 45);
    border-color: #4a5568;
}

body.dark-mode .credit-info-title {
    color: #FFFFFF;
}

body.dark-mode .credit-info-title i {
    color: #818cf8;
}

body.dark-mode .credit-info-list li {
    color: #cbd5e1;
}

body.dark-mode .credit-info-list li::before {
    color: #818cf8;
}

body.dark-mode .credit-info-list li.section-title strong {
    color: #FFFFFF;
}

/* FAQ/문의/저작권 카드 */
body.dark-mode .info-card {
    background: rgb(42, 42, 45);
    border-color: #4a5568;
}

body.dark-mode .info-card:hover {
    border-color: #6366f1;
    box-shadow: none;
}

body.dark-mode .info-card-title {
    color: #FFFFFF;
}

body.dark-mode .info-card-description {
    color: #cbd5e1;
}

body.dark-mode .info-card-icon {
    color: #818cf8;
}