/* 라이트 디자인 토큰을 유지한 채 다크 테마에서 사용할 의미별 색을 재정의합니다. */
:root {
    --ds-gray-50: #f9fafc;
    --ds-gray-100: #f2f3f8;
    --ds-gray-200: #e5e8f0;
    --ds-gray-300: #d1d6e0;
    --ds-gray-500: #8b95a1;
    --ds-gray-600: #6b7684;
    --ds-gray-700: #333d4b;
    --ds-gray-900: #191f28;
    --ds-indigo-50: #eef0fb;
    --ds-indigo-600: #4a54c8;
    --ds-indigo-700: #3a43a8;
    --ds-radius-pill: 999px;
    --ds-shadow-card: 0 1px 3px rgba(25, 31, 40, 0.06);
}
html[data-theme="dark"] {
    color-scheme: dark;
    --ds-indigo-50: #252d4b;
    --ds-indigo-200: #4a5685;
    --ds-indigo-400: #a5adff;
    --ds-indigo-600: #929bfa;
    --ds-indigo-700: #bdc3ff;
    --ds-indigo-hover: #aab2ff;
    --ds-indigo-tint-hover: #30395f;
    --ds-gray-50: #1d2430;
    --ds-gray-100: #151a23;
    --ds-gray-200: #303a4a;
    --ds-gray-300: #4a5669;
    --ds-gray-500: #aab4c2;
    --ds-gray-600: #c4ccd7;
    --ds-gray-700: #dce3eb;
    --ds-gray-900: #f5f7fa;
    --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.28);
    --ds-shadow-modal: 0 16px 40px rgba(0, 0, 0, 0.5);
    --transfer-blue-weak: #252d4b;
    --transfer-blue: #929bfa;
    --transfer-border: #4a5669;
    --transfer-bg: #151a23;
    --transfer-card: #1d2430;
    --transfer-text: #f5f7fa;
    --transfer-subtext: #c4ccd7;
    --transfer-track: #4a5669;
    --transfer-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .contents,
html[data-theme="dark"] .auth-bundle-body {
    background: var(--ds-gray-100);
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .navbar.ds-navbar,
html[data-theme="dark"] .leftnav-manager,
html[data-theme="dark"] .manager-article,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .ui-datepicker,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--ds-gray-50);
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered td,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .ui-datepicker,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select {
    border-color: var(--ds-gray-200);
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white {
    background-color: #252d39 !important;
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--ds-gray-50);
    color: var(--ds-gray-900);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary {
    color: var(--ds-gray-500) !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table a:not(.btn) {
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary {
    background-color: #252d39;
    border-color: var(--ds-gray-300);
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #303a4a;
    border-color: var(--ds-gray-300);
    color: #ffffff;
}

html[data-theme="dark"] .ds-navbar .ds-brand-name a,
html[data-theme="dark"] .ds-navbar .ds-brand-name a:hover,
html[data-theme="dark"] .ds-navbar .navbar-brand a,
html[data-theme="dark"] .ds-navbar .navbar-brand a:hover,
html[data-theme="dark"] .ds-user-chip,
html[data-theme="dark"] .ds-user-chip:hover,
html[data-theme="dark"] .ds-user-chip:focus {
    background-color: var(--ds-gray-50);
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .ds-nav-item:hover,
html[data-theme="dark"] .ds-nav-item:focus,
html[data-theme="dark"] .nav-item.active .ds-nav-item,
html[data-theme="dark"] .ds-nav-item[aria-current="page"] {
    background: var(--ds-indigo-50);
    color: var(--ds-indigo-400);
}

html[data-theme="dark"] .auth-bundle-panel,
html[data-theme="dark"] .login-panel,
html[data-theme="dark"] .find-form,
html[data-theme="dark"] .find-change-pw,
html[data-theme="dark"] .find-id-done-contents {
    background: var(--ds-gray-50);
    color: var(--ds-gray-900);
    border-color: var(--ds-gray-200);
}

/* body 배경은 캔버스로 전파되지만 그라데이션은 html 박스(=100dvh) 기준으로 그려져
 * iOS Safari 하단 툴바 뒤(뷰포트 밖) 영역에서 다시 반복됩니다. 반복을 막고
 * 이미지 밖은 그라데이션 끝색으로 채워 하단에 밝은 띠가 생기지 않게 합니다. */
html[data-theme="dark"] body:has(.auth-bundle-wrap),
html[data-theme="dark"] body:has(.page-wrap) {
    background: #10141b linear-gradient(180deg, #1d2440 0%, #151a23 48%, #10141b 100%) no-repeat !important;
}

/* 인증 화면의 공통 라이트 색상을 다크 디자인 토큰으로 덮어 가독성을 유지합니다. */
html[data-theme="dark"] .login-panel .title,
html[data-theme="dark"] .auth-bundle-brand__title,
html[data-theme="dark"] .auth-bundle-panel .find-form-header__title {
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .login-panel .subtitle,
html[data-theme="dark"] .auth-bundle-brand__subtitle,
html[data-theme="dark"] .auth-bundle-panel .find-form-header__sub-title {
    color: var(--ds-gray-600);
}

html[data-theme="dark"] .auth-bundle-panel .signup-form__group label {
    color: var(--ds-gray-700);
}

html[data-theme="dark"] .auth-bundle-panel .find-form__input-text:focus {
    border-color: var(--ds-indigo-600);
    box-shadow: 0 0 0 4px rgba(146, 155, 250, 0.16);
}

html[data-theme="dark"] .auth-bundle-panel .find-form__button-back {
    background-color: #252d39;
    border-color: var(--ds-gray-300) !important;
    color: var(--ds-gray-900) !important;
}

/* 기관 자동완성 목록은 body 아래에 렌더링되므로 인증·관리자 클래스 모두에 다크 표면을 적용합니다. */
html[data-theme="dark"] .auth-org-autocomplete.ui-autocomplete,
html[data-theme="dark"] .org-search-autocomplete.ui-autocomplete {
    background: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-300) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .auth-org-autocomplete .ui-menu-item-wrapper,
html[data-theme="dark"] .org-search-autocomplete .ui-menu-item-wrapper {
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .auth-org-autocomplete .ui-state-active,
html[data-theme="dark"] .auth-org-autocomplete .ui-menu-item-wrapper.ui-state-active,
html[data-theme="dark"] .org-search-autocomplete .ui-state-active,
html[data-theme="dark"] .org-search-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background: var(--ds-indigo-50) !important;
    color: var(--ds-indigo-600) !important;
}

html[data-theme="dark"] .helper-actions .action-chip {
    border-color: var(--ds-gray-300);
    background-color: #252d39;
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .helper-actions .action-chip:hover,
html[data-theme="dark"] .helper-actions .action-chip:focus {
    background-color: #303a4a;
    border-color: var(--ds-gray-300);
    color: #ffffff;
}

/* Bootstrap 버튼 툴팁은 .tooltip-inner 배경에 밝은 의미 토큰을 쓰므로 다크 표면색으로 고정합니다. */
html[data-theme="dark"] .tooltip .tooltip-inner {
    background: #252d39 !important;
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .bs-tooltip-top .arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #252d39 !important;
}

html[data-theme="dark"] .bs-tooltip-bottom .arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #252d39 !important;
}

html[data-theme="dark"] .bs-tooltip-left .arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #252d39 !important;
}

html[data-theme="dark"] .bs-tooltip-right .arrow::before,
html[data-theme="dark"] .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #252d39 !important;
}

/* 관리자 레거시 필터의 날짜 입력칸은 고정 흰색 선언을 사용하므로 선택 상자와 같은 표면색으로 맞춥니다. */
html[data-theme="dark"] .manager-headbox .form-control,
html[data-theme="dark"] .manager-headbox input.form-control,
html[data-theme="dark"] .manager-headbox select.form-control,
html[data-theme="dark"] #input-start,
html[data-theme="dark"] #input-end {
    background: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-300) !important;
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .manager-headbox .form-control::placeholder {
    color: var(--ds-gray-500) !important;
}

/* 콘텐츠 목록의 날짜 입력은 ID 선택자가 흰 배경을 고정하므로 페이지 범위에서 우선순위를 높입니다. */
html[data-theme="dark"] .superadmin-content-list-page #input-start,
html[data-theme="dark"] .superadmin-content-list-page #input-end {
    background-color: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-300) !important;
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .superadmin-content-list-page #input-start::placeholder,
html[data-theme="dark"] .superadmin-content-list-page #input-end::placeholder {
    color: var(--ds-gray-500) !important;
}

/* 관리자·슈퍼관리자가 공유하는 업로드 현황 요약 카드를 다크 표면으로 전환합니다. */
html[data-theme="dark"] .upload-summary__item {
    background: var(--ds-gray-50);
    border-color: var(--ds-gray-200);
}

html[data-theme="dark"] .upload-summary__item:hover {
    background: #252d39;
    border-color: var(--ds-indigo-600);
}

html[data-theme="dark"] .upload-summary__item.is-active {
    background: var(--ds-indigo-50);
    border-color: var(--ds-indigo-600);
    box-shadow: 0 0 0 1px var(--ds-indigo-600) inset;
}

html[data-theme="dark"] .upload-summary__label {
    color: var(--ds-gray-600);
}

html[data-theme="dark"] .upload-summary__count {
    color: var(--ds-gray-900);
}

/* 업로드 단계의 완료 배지·범례는 대기·진행 상태와 구분되는 녹색 계열로 표시합니다. */
html[data-theme="dark"] .session-upload-status-step--success {
    background-color: #174f38 !important;
    border-color: #2cb67d !important;
    color: #c6f6d5 !important;
}

/* 언어 통계 안내문은 alert-light의 흰 배경 대신 인디고 계열 다크 표면을 사용합니다. */
html[data-theme="dark"] .superadmin-stat-language-page .superadmin-stat-language-notice {
    background-color: var(--ds-indigo-50);
    border-color: var(--ds-indigo-200);
    color: var(--ds-gray-700);
}

html[data-theme="dark"] .superadmin-stat-language-page .superadmin-stat-language-notice .text-muted {
    color: var(--ds-gray-600) !important;
}

/* 피드백 별점 현황의 라이트 탭·카드·진행 트랙을 다크 인디고 표면으로 맞춥니다. */
html[data-theme="dark"] .superadmin-feedback-page .superadmin-feedback-summary-card {
    background-color: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-300) !important;
}

html[data-theme="dark"] .superadmin-feedback-page .nav-tabs {
    border-bottom-color: var(--ds-gray-300);
}

html[data-theme="dark"] .superadmin-feedback-page .nav-tabs .nav-link {
    color: var(--ds-gray-600);
    border-color: transparent;
}

html[data-theme="dark"] .superadmin-feedback-page .nav-tabs .nav-link:hover,
html[data-theme="dark"] .superadmin-feedback-page .nav-tabs .nav-link:focus {
    background-color: #252d39;
    border-color: var(--ds-gray-300);
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .superadmin-feedback-page .nav-tabs .nav-link.active {
    background-color: var(--ds-indigo-50);
    border-color: var(--ds-indigo-600);
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .superadmin-feedback-page .progress {
    background-color: #252d4b;
}

/* 공통 체크박스는 미선택 상태에서도 다크 표면과 충분히 구분되도록 표시합니다. */
html[data-theme="dark"] [class*="icheck-material"] > input[type="checkbox"]:first-child + label::before,
html[data-theme="dark"] [class*="icheck-material"] > input[type="checkbox"]:first-child + input[type="hidden"] + label::before {
    background-color: var(--ds-gray-50);
    border-color: var(--ds-gray-300);
}

html[data-theme="dark"] [class*="icheck-material"] > input[type="checkbox"]:first-child:not(:checked):not(:disabled):hover + label::before,
html[data-theme="dark"] [class*="icheck-material"] > input[type="checkbox"]:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
    border-color: var(--ds-indigo-600);
}

html[data-theme="dark"] [class*="icheck-material"] > input[type="checkbox"]:first-child:focus + label::before,
html[data-theme="dark"] [class*="icheck-material"] > input[type="checkbox"]:first-child:focus + input[type="hidden"] + label::before {
    box-shadow: 0 0 0 3px rgba(146, 155, 250, 0.2);
}

html[data-theme="dark"] [class*="icheck-material"] > input[type="checkbox"]:first-child:checked + label::before,
html[data-theme="dark"] [class*="icheck-material"] > input[type="checkbox"]:first-child:checked + input[type="hidden"] + label::before {
    background-color: var(--ds-indigo-600);
    border-color: var(--ds-indigo-600);
}

/* 슈퍼관리자 녹화 콘텐츠 현황의 상태 필터와 완료 단계를 다크 테마 상태 색상으로 구분합니다. */
html[data-theme="dark"] .superadmin-stat-rec-page .superadmin-stat-rec-status-label,
html[data-theme="dark"] .superadmin-stat-rec-page .superadmin-stat-rec-status-filter {
    background-color: #252d39 !important;
    border-color: var(--ds-gray-300) !important;
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .superadmin-stat-rec-page .icheck-material-indigo > input[type="radio"]:first-child + label::before,
html[data-theme="dark"] .superadmin-stat-rec-page .icheck-material-indigo > input[type="radio"]:first-child + input[type="hidden"] + label::before {
    background-color: var(--ds-gray-50);
    border-color: var(--ds-gray-300);
}

html[data-theme="dark"] .superadmin-stat-rec-page .icheck-material-indigo > input[type="radio"]:first-child:not(:checked):not(:disabled):hover + label::before,
html[data-theme="dark"] .superadmin-stat-rec-page .icheck-material-indigo > input[type="radio"]:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before,
html[data-theme="dark"] .superadmin-stat-rec-page .icheck-material-indigo > input[type="radio"]:first-child:checked + label::before,
html[data-theme="dark"] .superadmin-stat-rec-page .icheck-material-indigo > input[type="radio"]:first-child:checked + input[type="hidden"] + label::before {
    border-color: var(--ds-indigo-600);
}

html[data-theme="dark"] .superadmin-stat-rec-page .icheck-material-indigo > input[type="radio"]:first-child:focus + label::before,
html[data-theme="dark"] .superadmin-stat-rec-page .icheck-material-indigo > input[type="radio"]:first-child:focus + input[type="hidden"] + label::before {
    box-shadow: 0 0 0 3px rgba(146, 155, 250, 0.2);
}

html[data-theme="dark"] .superadmin-stat-rec-page .icheck-material-indigo > input[type="radio"]:first-child:checked + label::after,
html[data-theme="dark"] .superadmin-stat-rec-page .icheck-material-indigo > input[type="radio"]:first-child:checked + input[type="hidden"] + label::after {
    background-color: var(--ds-indigo-600);
}

html[data-theme="dark"] .superadmin-stat-rec-page .superadmin-stat-rec-legend-dot-success,
html[data-theme="dark"] .superadmin-stat-rec-page .superadmin-stat-rec-status-success {
    background-color: #174f38 !important;
    border-color: #2cb67d !important;
    color: #c6f6d5 !important;
}

/* OpenCMS 단독 녹화 콘텐츠 현황도 슈퍼관리자와 같은 완료 상태 색상을 사용합니다. */
html[data-theme="dark"] .opencms-stat-rec-page .opencms-stat-rec-legend-dot-success,
html[data-theme="dark"] .opencms-stat-rec-page .opencms-stat-rec-status-success {
    background-color: #174f38 !important;
    border-color: #2cb67d !important;
    color: #c6f6d5 !important;
}

/* 관리자 녹화 콘텐츠 현황도 완료 상태를 같은 녹색 계열로 표시합니다. */
html[data-theme="dark"] .manager-stat-rec-status-success {
    background-color: #174f38 !important;
    border-color: #2cb67d !important;
    color: #c6f6d5 !important;
}

/* 세션 상태 배지는 라이트 틴트 대신 상태를 구분하는 어두운 표면을 사용합니다. */
html[data-theme="dark"] .status-badge--session-uploaded {
    background-color: #143d2d;
    box-shadow: inset 0 0 0 1px #2cb67d;
    color: #8ce9b9;
}

html[data-theme="dark"] .status-badge--session-error {
    background-color: #4a2630;
    box-shadow: inset 0 0 0 1px #e86b7a;
    color: #ffb4bd;
}

/* PDF 업로드 현황 단계는 페이지 내부 라이트 CSS보다 높은 우선순위로 다크 색상을 적용합니다. */
html[data-theme="dark"] .manager-dictionary-pdf-upload-status-page .queue-step {
    color: var(--ds-gray-600);
}

html[data-theme="dark"] .manager-dictionary-pdf-upload-status-page .queue-step::after {
    background-color: var(--ds-gray-300);
}

html[data-theme="dark"] .manager-dictionary-pdf-upload-status-page .queue-dot {
    background-color: var(--ds-gray-300);
}

html[data-theme="dark"] .manager-dictionary-pdf-upload-status-page .queue-step.is-done .queue-dot,
html[data-theme="dark"] .manager-dictionary-pdf-upload-status-page .queue-step.is-current .queue-dot {
    background-color: var(--ds-indigo-600);
}

html[data-theme="dark"] .manager-dictionary-pdf-upload-status-page .queue-step.is-done,
html[data-theme="dark"] .manager-dictionary-pdf-upload-status-page .queue-step.is-current {
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .manager-dictionary-pdf-upload-status-page .queue-step.is-fail .queue-dot {
    background-color: var(--ds-error);
}

html[data-theme="dark"] .manager-dictionary-pdf-upload-status-page .queue-step.is-fail {
    color: var(--ds-error);
}

/* 날짜 선택 팝업의 헤더·날짜 셀도 입력칸과 같은 다크 색 체계를 사용합니다. */
html[data-theme="dark"] .ui-datepicker {
    background: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-300) !important;
}

html[data-theme="dark"] .ui-datepicker .ui-datepicker-header {
    background: #252d39 !important;
    border-color: var(--ds-gray-200) !important;
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .ui-datepicker .ui-state-default {
    background: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-200) !important;
    color: var(--ds-gray-700) !important;
}

html[data-theme="dark"] .ui-datepicker .ui-state-hover,
html[data-theme="dark"] .ui-datepicker .ui-state-active {
    background: var(--ds-indigo-50) !important;
    border-color: var(--ds-indigo-400) !important;
    color: var(--ds-indigo-400) !important;
}

/* ApexCharts는 SVG 속성으로 텍스트와 그리드 색을 지정하므로 CSS로 후순위 보정합니다. */
html[data-theme="dark"] .apexcharts-text,
html[data-theme="dark"] .apexcharts-text tspan,
html[data-theme="dark"] .apexcharts-legend-text,
html[data-theme="dark"] .apexcharts-xaxis-label,
html[data-theme="dark"] .apexcharts-yaxis-label {
    fill: var(--ds-gray-600) !important;
    color: var(--ds-gray-600) !important;
}

html[data-theme="dark"] .apexcharts-gridline,
html[data-theme="dark"] .apexcharts-xcrosshairs,
html[data-theme="dark"] .apexcharts-ycrosshairs {
    stroke: var(--ds-gray-200) !important;
}

html[data-theme="dark"] .apexcharts-tooltip,
html[data-theme="dark"] .apexcharts-xaxistooltip,
html[data-theme="dark"] .apexcharts-menu {
    border-color: var(--ds-gray-300) !important;
    background: var(--ds-gray-50) !important;
    color: var(--ds-gray-900) !important;
}

/* X축 날짜 툴팁은 일반 툴팁과 별도의 배경·말풍선 꼬리를 사용하므로 함께 덮어씁니다. */
html[data-theme="dark"] .apexcharts-xaxistooltip,
html[data-theme="dark"] .apexcharts-xaxistooltip.apexcharts-theme-light,
html[data-theme="dark"] .apexcharts-xaxistooltip.apexcharts-theme-dark {
    background: #252d39 !important;
    border-color: var(--ds-gray-300) !important;
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .apexcharts-xaxistooltip-text,
html[data-theme="dark"] .apexcharts-tooltip-title,
html[data-theme="dark"] .apexcharts-tooltip-text,
html[data-theme="dark"] .apexcharts-tooltip-text-y-label,
html[data-theme="dark"] .apexcharts-tooltip-text-y-value {
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .apexcharts-xaxistooltip-bottom::after {
    border-bottom-color: #252d39 !important;
}

html[data-theme="dark"] .apexcharts-xaxistooltip-bottom::before {
    border-bottom-color: var(--ds-gray-300) !important;
}

html[data-theme="dark"] .apexcharts-xaxistooltip-top::after {
    border-top-color: #252d39 !important;
}

html[data-theme="dark"] .apexcharts-xaxistooltip-top::before {
    border-top-color: var(--ds-gray-300) !important;
}

/* 일반 툴팁 제목은 차트별 테마 클래스와 무관하게 같은 다크 표면을 사용합니다. */
html[data-theme="dark"] .apexcharts-tooltip .apexcharts-tooltip-title {
    background: #252d39 !important;
    border-bottom-color: var(--ds-gray-200) !important;
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .apexcharts-tooltip .apexcharts-tooltip-series-group,
html[data-theme="dark"] .apexcharts-tooltip .apexcharts-tooltip-text,
html[data-theme="dark"] .apexcharts-tooltip .apexcharts-tooltip-text-y-label,
html[data-theme="dark"] .apexcharts-tooltip .apexcharts-tooltip-text-y-value {
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .chart__realtime--item,
html[data-theme="dark"] .chart__realtime--chart,
html[data-theme="dark"] .chart__stack--chart,
html[data-theme="dark"] .chart__prepare,
html[data-theme="dark"] .cost-monthly-chartbox,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .dash-card {
    background-color: var(--ds-gray-50) !important;
    color: var(--ds-gray-900);
}

/* 대시보드 전용 CSS의 고정 흰색 카드와 연회색 배경을 다크 토큰으로 재정의합니다. */
html[data-theme="dark"] .dashboard-wrap {
    --dash-blue: var(--ds-indigo-400);
    --dash-blue-weak: var(--ds-indigo-50);
    --dash-text: var(--ds-gray-900);
    --dash-subtext: var(--ds-gray-600);
    --dash-border: var(--ds-gray-200);
    --dash-grid: var(--ds-gray-200);
    background-color: var(--ds-gray-100) !important;
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .dashboard-wrap .dash-card,
html[data-theme="dark"] .dashboard-wrap .dash-subcard,
html[data-theme="dark"] .dashboard-wrap .chart__realtime--item,
html[data-theme="dark"] .dashboard-wrap .chart__realtime--chart,
html[data-theme="dark"] .dashboard-wrap .chart__stack--chart,
html[data-theme="dark"] .dashboard-wrap .chart__prepare {
    background-color: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-200) !important;
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .dashboard-wrap .dash-subtitle,
html[data-theme="dark"] .dashboard-wrap .dash-info-text {
    color: var(--ds-gray-600) !important;
}

html[data-theme="dark"] .dashboard-wrap .dash-value,
html[data-theme="dark"] .dashboard-wrap .dash-card .card-title,
html[data-theme="dark"] .dashboard-wrap .chart__realtime--item-title,
html[data-theme="dark"] .dashboard-wrap .chart__stack--item-title,
html[data-theme="dark"] .dashboard-wrap .chart__prepare--item-title {
    color: var(--ds-gray-900) !important;
}

/* 슈퍼관리자 비용 산정 안내는 페이지 CSS가 고정 밝은 배경을 사용하므로 보조 다크 표면으로 덮어씁니다. */
html[data-theme="dark"] .dashboard-wrap .cost-calc-note {
    background-color: #252d39 !important;
    border-color: var(--ds-gray-200) !important;
    color: var(--ds-gray-600) !important;
}

html[data-theme="dark"] .dashboard-wrap .cost-calc-note-title,
html[data-theme="dark"] .dashboard-wrap .cost-calc-fx {
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .dashboard-wrap .usage-day-btn,
html[data-theme="dark"] .dashboard-wrap .chart__stack--button,
html[data-theme="dark"] .dashboard-wrap .chart__stack--button-unit {
    background-color: #252d39 !important;
    border-color: var(--ds-gray-300) !important;
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .dashboard-wrap .usage-day-btn.is-active {
    background-color: var(--ds-indigo-50) !important;
    border-color: var(--ds-indigo-400) !important;
    color: var(--ds-indigo-400) !important;
}

html[data-theme="dark"] .dashboard-wrap .apexcharts-tooltip-title,
html[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: #252d39 !important;
    border-bottom-color: var(--ds-gray-200) !important;
    color: var(--ds-gray-900) !important;
}

/* 라이선스 화면은 페이지 내부 스타일이 마지막에 로드되므로 패널 표면과 도구 영역을 명시적으로 덮어씁니다. */
html[data-theme="dark"] .license-panel,
html[data-theme="dark"] .license-panel .manager-list,
html[data-theme="dark"] .license-table-toolbar {
    background-color: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-200) !important;
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .license-panel__header {
    background-color: #252d39 !important;
    border-bottom-color: var(--ds-gray-200) !important;
    color: var(--ds-gray-900) !important;
}

html[data-theme="dark"] .license-panel__title,
html[data-theme="dark"] .license-panel__header label,
html[data-theme="dark"] .license-table-toolbar__meta {
    color: var(--ds-gray-700) !important;
}

html[data-theme="dark"] .license-panel a.btn.disabled {
    background-color: #252d39 !important;
    border-color: var(--ds-gray-300) !important;
    color: var(--ds-gray-500) !important;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--ds-gray-100);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--ds-gray-300);
}

/* 테마 선택 UI는 공통 헤더와 독립 문서에서 같은 상태 표기를 사용합니다. */
.ds-theme-control {
    margin-right: 10px;
}

.ds-theme-trigger,
.ds-theme-floating-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--ds-gray-200);
    border-radius: var(--ds-radius-pill);
    background: #ffffff;
    color: var(--ds-gray-700);
    cursor: pointer;
}

.ds-theme-trigger:hover,
.ds-theme-trigger:focus,
.ds-theme-floating-toggle:hover,
.ds-theme-floating-toggle:focus {
    background: var(--ds-gray-50);
    border-color: var(--ds-gray-300);
    color: var(--ds-indigo-600);
}

.ds-theme-trigger::after {
    display: none;
}

.ds-theme-icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: block;
}

.ds-theme-icon--moon {
    display: none;
}

html[data-theme="dark"] .ds-theme-icon--sun {
    display: none;
}

html[data-theme="dark"] .ds-theme-icon--moon {
    display: block;
}

.ds-theme-menu {
    min-width: 142px;
    padding: 6px;
}

.ds-theme-menu button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.ds-theme-menu-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.ds-theme-menu button:hover,
.ds-theme-menu button.is-selected {
    background: var(--ds-indigo-50);
    color: var(--ds-indigo-700);
}

.ds-theme-floating-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1100;
    box-shadow: var(--ds-shadow-card);
}

html[data-theme="dark"] .ds-theme-trigger,
html[data-theme="dark"] .ds-theme-floating-toggle {
    background: var(--ds-gray-50);
    border-color: var(--ds-gray-300);
    color: var(--ds-gray-900);
}

/* transferPlayer는 iframe 문서이므로 포털 공통 토큰을 상속받지 않고 이 오버라이드를 직접 로드합니다. */
html[data-theme="dark"] .settings-menu,
html[data-theme="dark"] .subtitle-select-menu,
html[data-theme="dark"] .font-size-menu,
html[data-theme="dark"] .subtitle-drawer,
html[data-theme="dark"] .bottom-bar {
    background: var(--transfer-card);
    color: var(--transfer-text);
}

html[data-theme="dark"] .player-button,
html[data-theme="dark"] .player-time,
html[data-theme="dark"] .toolbar-subtitle,
html[data-theme="dark"] .settings-item,
html[data-theme="dark"] .subtitle-select-trigger,
html[data-theme="dark"] .subtitle-select,
html[data-theme="dark"] .font-size-label {
    color: var(--transfer-subtext);
}

/* QR 뷰어 자막 행은 페이지 전용 CSS에서 어두운 글자색을 직접 지정하므로 다크 테마에서 다시 정의합니다. */
html[data-theme="dark"] .subtitle-line {
    color: var(--transfer-text);
}

html[data-theme="dark"] .subtitle-line--dim {
    color: var(--transfer-subtext);
}

/* QR 자막 영역은 테마와 무관하게 읽기 흐름을 방해하지 않도록 트랙을 숨기고, 현재 위치를 나타내는 thumb만 유지합니다. */
#subtitle-box {
    scrollbar-width: thin;
    scrollbar-color: var(--ds-gray-300) transparent;
}

#subtitle-box::-webkit-scrollbar {
    width: 8px;
}

#subtitle-box::-webkit-scrollbar-track {
    background: transparent;
}

#subtitle-box::-webkit-scrollbar-thumb {
    background: var(--ds-gray-300);
    border-radius: 999px;
}

#subtitle-box::-webkit-scrollbar-thumb:hover {
    background: var(--ds-gray-500);
}

html[data-theme="dark"] .player-button:hover,
html[data-theme="dark"] .player-button:focus,
html[data-theme="dark"] .settings-item:hover,
html[data-theme="dark"] .subtitle-select-menu button:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

html[data-theme="dark"] .subtitle-select-trigger,
html[data-theme="dark"] .subtitle-select,
html[data-theme="dark"] .subtitle-drawer,
html[data-theme="dark"] .settings-menu,
html[data-theme="dark"] .subtitle-select-menu,
html[data-theme="dark"] .font-size-menu,
html[data-theme="dark"] .volume-slider {
    background: var(--transfer-card);
    color: var(--transfer-text);
    border-color: var(--transfer-border);
}

/* transferPlayer 설정 행은 팝업 표면을 유지하고, 호버·포커스 때만 강조합니다. */
html[data-theme="dark"] .settings-menu .settings-item {
    background: transparent !important;
    color: var(--transfer-text) !important;
}

html[data-theme="dark"] .settings-menu .settings-item > span,
html[data-theme="dark"] .settings-menu .settings-value,
html[data-theme="dark"] .settings-menu .settings-item-icon {
    color: var(--transfer-subtext) !important;
}

html[data-theme="dark"] .settings-menu .settings-item:hover,
html[data-theme="dark"] .settings-menu .settings-item:focus {
    background: #303a4a !important;
    color: var(--transfer-text) !important;
}

html[data-theme="dark"] .settings-menu .settings-value select,
html[data-theme="dark"] .settings-menu .settings-value .player-speed {
    background: var(--transfer-bg) !important;
    border-color: var(--transfer-border) !important;
    color: var(--transfer-text) !important;
}

/* QR 뷰어의 언어 드로어는 일반 선택 메뉴와 별도 컨테이너이므로 상태색을 직접 보정합니다. */
html[data-theme="dark"] .subtitle-drawer .subtitle-select-option:hover,
html[data-theme="dark"] .subtitle-drawer .subtitle-select-option:focus {
    background: #303a4a;
    color: var(--transfer-text);
}

html[data-theme="dark"] .subtitle-drawer .subtitle-select-option.is-selected {
    background: var(--transfer-blue-weak);
    color: var(--transfer-blue);
}

/* 질문·나가기 패널은 QR 뷰어 인라인 CSS의 고정 흰색 표면을 사용하므로 다크 테마에서 재정의합니다. */
html[data-theme="dark"] .question-drawer,
html[data-theme="dark"] .exit-drawer {
    background: var(--transfer-card);
    border-color: var(--transfer-border);
    color: var(--transfer-text);
}

html[data-theme="dark"] .question-textarea {
    background: var(--transfer-bg);
    border-color: var(--transfer-border);
    color: var(--transfer-text);
}

html[data-theme="dark"] .question-textarea::placeholder,
html[data-theme="dark"] .question-counter,
html[data-theme="dark"] .question-panel-close,
html[data-theme="dark"] .exit-panel-subtitle {
    color: var(--transfer-subtext);
}

html[data-theme="dark"] .exit-drawer .btn-ghost {
    background: #252d39;
    border-color: var(--transfer-border);
    color: var(--transfer-text);
}

html[data-theme="dark"] .question-submit:disabled {
    background: #4a5669;
    color: var(--transfer-subtext);
}

/* 이미지 파일로 불러오는 QR 뷰어 아이콘은 color 속성을 상속하지 않으므로 밝은 필터를 적용합니다. */
html[data-theme="dark"] .bottom-icon-image,
html[data-theme="dark"] .settings-menu .settings-item-icon {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

html[data-theme="dark"] #settings-menu .settings-item,
html[data-theme="dark"] #settings-menu .settings-item > span {
    color: var(--transfer-text) !important;
}

/* 기존 labyPlayer·labyEditor는 전용 CSS를 마지막에 로드하므로 컨트롤의 밝은 호버색을 명시적으로 덮어씁니다. */
html[data-theme="dark"] #player-wrap,
html[data-theme="dark"] .video-js .vjs-control-bar,
html[data-theme="dark"] .video-js .vjs-menu-content {
    background: var(--ds-gray-50);
    color: var(--ds-gray-900);
}

/* LABY 레거시 플레이어의 헤더·푸터는 고정 흰색을 사용하므로 오류 화면에서도 다크 표면을 유지합니다. */
html[data-theme="dark"] #player-header,
html[data-theme="dark"] #player-footer {
    background-color: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-200) !important;
}

html[data-theme="dark"] #player-header .h-title,
html[data-theme="dark"] #player-header .icon,
html[data-theme="dark"] #player-footer .player-control-icon,
html[data-theme="dark"] #player-footer .playtime-wrap,
html[data-theme="dark"] #player-footer .current-playtime,
html[data-theme="dark"] #error,
html[data-theme="dark"] #error .error-desc,
html[data-theme="dark"] #error .error-desc2 {
    color: var(--ds-gray-700) !important;
}

html[data-theme="dark"] #player-footer {
    --player-blue: var(--ds-indigo-400);
    --player-blue-weak: #303a4a;
    --player-track: var(--ds-gray-300);
    --player-track-ready: var(--ds-gray-200);
    --player-icon: var(--ds-gray-700);
    --player-subtext: var(--ds-gray-600);
}

html[data-theme="dark"] #player-footer .player-footer-wrap {
    background-color: var(--ds-gray-50) !important;
}

html[data-theme="dark"] #player-footer .progress-gage-wrap {
    background: var(--ds-gray-300) !important;
}

html[data-theme="dark"] #player-footer .progress-gage-wrap .progress-gage-ready {
    background: var(--ds-gray-200) !important;
}

html[data-theme="dark"] #player-footer .btn-play:hover,
html[data-theme="dark"] #player-footer .btn-stop:hover,
html[data-theme="dark"] #player-footer .btn-mute:hover,
html[data-theme="dark"] #player-footer .btn-basic-view:hover,
html[data-theme="dark"] #player-footer .btn-divide-view:hover,
html[data-theme="dark"] #player-footer .btn-info:hover,
html[data-theme="dark"] #player-footer .btn-setting:hover,
html[data-theme="dark"] #player-footer .btn-fullscreen:hover,
html[data-theme="dark"] #player-footer .btn-play:focus,
html[data-theme="dark"] #player-footer .btn-stop:focus,
html[data-theme="dark"] #player-footer .btn-mute:focus,
html[data-theme="dark"] #player-footer .btn-basic-view:focus,
html[data-theme="dark"] #player-footer .btn-divide-view:focus,
html[data-theme="dark"] #player-footer .btn-info:focus,
html[data-theme="dark"] #player-footer .btn-setting:focus,
html[data-theme="dark"] #player-footer .btn-fullscreen:focus {
    background: #303a4a !important;
    color: var(--ds-indigo-400) !important;
}

html[data-theme="dark"] #player-footer .left-box .volume-gage-wrap {
    background: var(--ds-gray-300) !important;
}

html[data-theme="dark"] #player-footer .left-box .volume-gage-wrap .volume-gage,
html[data-theme="dark"] #player-footer .left-box .volume-gage-wrap .btn-volume-gage {
    background: var(--ds-indigo-400) !important;
}

/* transferEditor는 전용 변수와 고정 밝은 표면을 함께 사용하므로 에디터 영역에 한정해 재정의합니다. */
html[data-theme="dark"] .editor-root {
    --transfer-blue: var(--ds-indigo-400);
    --transfer-blue-weak: var(--ds-indigo-50);
    --transfer-text: var(--ds-gray-900);
    --transfer-subtext: var(--ds-gray-600);
    --transfer-border: var(--ds-gray-200);
    --transfer-card: var(--ds-gray-50);
    --transfer-bg: var(--ds-gray-100);
}

html[data-theme="dark"] .editor-root .editor-top,
html[data-theme="dark"] .editor-root .top-card,
html[data-theme="dark"] .editor-root .top-stat-item,
html[data-theme="dark"] .editor-root .top-lang-trigger,
html[data-theme="dark"] .editor-root .top-lang-menu,
html[data-theme="dark"] .editor-root .cue-container,
html[data-theme="dark"] .editor-root .cue-language-header,
html[data-theme="dark"] .editor-root .cue-row,
html[data-theme="dark"] .editor-root .row-save-btn,
html[data-theme="dark"] .editor-root .volume-slider,
html[data-theme="dark"] .editor-root .settings-menu,
html[data-theme="dark"] .editor-root .settings-item,
html[data-theme="dark"] .editor-root .player-speed {
    background: var(--transfer-card) !important;
    border-color: var(--transfer-border) !important;
    color: var(--transfer-text) !important;
}

html[data-theme="dark"] .editor-root .top-lang-trigger:disabled,
html[data-theme="dark"] .editor-root .cue-col-head,
html[data-theme="dark"] .editor-root .cue-readonly,
html[data-theme="dark"] .editor-root .cue-row:hover {
    background: #252d39 !important;
    border-color: var(--transfer-border) !important;
    color: var(--transfer-subtext) !important;
}

html[data-theme="dark"] .editor-root .cue-editor {
    background: var(--transfer-card) !important;
    border-color: var(--transfer-border) !important;
    color: var(--transfer-text) !important;
}

html[data-theme="dark"] .editor-root .cue-editor.is-changed {
    background: #3b2f20 !important;
}

html[data-theme="dark"] .editor-root .editor-bottom-bar {
    background: rgba(29, 36, 48, 0.94) !important;
    border-color: var(--transfer-border) !important;
}

/* 하단 재생 제어는 라이트 테마 고정색을 쓰므로 다크 표면에서 별도로 대비를 확보합니다. */
html[data-theme="dark"] .editor-root .player-button,
html[data-theme="dark"] .editor-root .player-time,
html[data-theme="dark"] .editor-root .font-size-number {
    color: var(--transfer-subtext);
}

html[data-theme="dark"] .editor-root .player-button:hover,
html[data-theme="dark"] .editor-root .player-button:focus-visible {
    background: #303a4a;
    color: var(--transfer-blue);
}

/* 언어 옵션은 라이트 테마 고정 글자색을 쓰므로 다크 목록 안에서 별도로 밝게 지정합니다. */
html[data-theme="dark"] .editor-root .top-lang-option {
    color: var(--transfer-text) !important;
}

html[data-theme="dark"] .editor-root .top-lang-option:hover,
html[data-theme="dark"] .editor-root .settings-item:hover {
    background: #303a4a !important;
}

html[data-theme="dark"] .editor-root .top-lang-option:hover {
    color: var(--transfer-text) !important;
}

html[data-theme="dark"] .editor-root .top-lang-option.is-selected {
    color: var(--transfer-blue) !important;
}

/* 레거시 CMS/OpenCMS는 common.css의 고정 흰색·회색을 사용하므로 화면 구조별로 보정합니다. */
html[data-theme="dark"] .content-article,
html[data-theme="dark"] .content-article-2,
html[data-theme="dark"] .content-list,
html[data-theme="dark"] .content-list-s,
html[data-theme="dark"] .content-info,
html[data-theme="dark"] .content-info-s,
html[data-theme="dark"] #lay,
html[data-theme="dark"] .manager-list,
html[data-theme="dark"] .transfer-content-list {
    background-color: var(--ds-gray-50) !important;
    color: var(--ds-gray-900);
    border-color: var(--ds-gray-200) !important;
}

html[data-theme="dark"] .cbp-spmenu-vertical,
html[data-theme="dark"] .cbp-spmenu-vertical-s,
html[data-theme="dark"] .cbp-spmenu,
html[data-theme="dark"] .panel-group .panel,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .scroll-treeDept {
    background-color: var(--ds-gray-50) !important;
    color: var(--ds-gray-900);
    border-color: var(--ds-gray-200) !important;
}

/* 사용자 CMS는 design-system.css에서 더 구체적인 흰색 배경을 선언하므로 동일한 화면 범위에서 덮어씁니다. */
html[data-theme="dark"] .user-shell .user-content-page .panel-group,
html[data-theme="dark"] .user-shell .user-content-page .user-headbox.contents-menu,
html[data-theme="dark"] .user-shell .user-content-page .content-article > .container-fluid > .row,
html[data-theme="dark"] .user-shell .user-dictionary-page .content-article > .container-fluid > .row {
    background-color: var(--ds-gray-50) !important;
    color: var(--ds-gray-900) !important;
    border-color: var(--ds-gray-200) !important;
}

html[data-theme="dark"] .user-shell .user-content-page .user-headbox.contents-menu {
    border-bottom-color: var(--ds-gray-200) !important;
}

/* 콘텐츠 상세창은 design-system.css가 고정 흰색 표면을 쓰므로 .content-info와 같은 다크 표면으로 맞춥니다. */
html[data-theme="dark"] .user-shell .user-content-page .content-detail-head,
html[data-theme="dark"] .user-shell .user-content-page .content-detail-meta {
    background: var(--ds-gray-50);
    border-color: var(--ds-gray-200);
}

/* 플레이어 배경은 --ds-gray-900이 다크에서 밝은색으로 뒤집히므로 어두운 표면을 유지합니다. */
html[data-theme="dark"] .user-shell .user-content-page .content-info .video-wrap {
    background: var(--ds-gray-100);
}

/* 상세 표 행 구분선은 --ds-gray-100이 표면보다 어두워 보이지 않으므로 표면보다 밝은 색을 씁니다. */
html[data-theme="dark"] .user-shell .user-content-page .table-video-info tr {
    border-top-color: var(--ds-gray-200);
}

/* 콘텐츠 이동·정규과정 이동 모달의 목록 박스는 design-system.css가 고정 흰색을 쓰므로 모달 표면색으로 맞춥니다. */
html[data-theme="dark"] .user-shell .user-content-page #modal-move-content .scroll-laby,
html[data-theme="dark"] .user-shell .user-content-page #modal-move-lms-content .lms-courses {
    background: var(--ds-gray-50) !important;
}

/* 폴더 트리 항목명은 common.css의 고정 검정(#222)이라 다크 표면에서 보이지 않으므로 밝은 글자색을 씁니다.
   활성 행은 design-system.css의 더 구체적인 규칙이 인디고 색을 유지합니다. */
html[data-theme="dark"] .user-shell .user-content-page table.fancytree-ext-table span.fancytree-title {
    color: var(--ds-gray-700);
}

/* 트리 행 hover 배경이 표면색과 같아 구분되지 않으므로 다른 표의 hover 색과 통일합니다. */
html[data-theme="dark"] .user-shell .user-content-page table.fancytree-ext-table tbody tr:hover:not(.fancytree-active) {
    background: #252d39;
}

/* 사용자 사전 화면의 전용 라이트 표면을 다크 콘텐츠 표면으로 통일합니다. */
html[data-theme="dark"] .user-shell .user-dictionary-page .transfer-headbox.transfer-menu,
html[data-theme="dark"] .user-shell .user-dictionary-page .transfer-content-list,
html[data-theme="dark"] .user-shell .user-dictionary-page .dictionary-queue-box,
html[data-theme="dark"] .user-shell .user-dictionary-page .dictionary-queue-header,
html[data-theme="dark"] .user-shell .user-dictionary-page .dictionary-word-tools {
    background-color: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-200) !important;
    color: var(--ds-gray-900);
}

/* 사용자 콘텐츠등록 카드와 업로드 탭은 고정 흰색 대신 다크 콘텐츠 표면을 사용합니다. */
html[data-theme="dark"] .user-shell .user-upload-page .media,
html[data-theme="dark"] .user-shell .user-upload-page .upload-box,
html[data-theme="dark"] .user-shell .user-upload-page .upload-box .tab-content {
    background-color: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-200) !important;
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .user-shell .user-upload-page .media:hover {
    background-color: var(--ds-indigo-50) !important;
    border-color: var(--ds-indigo-400) !important;
}

html[data-theme="dark"] .user-shell .user-upload-page .media h1 {
    color: var(--ds-gray-600);
}

html[data-theme="dark"] .user-shell .user-upload-page .media:hover h1 {
    color: var(--ds-indigo-400);
}

html[data-theme="dark"] .user-shell .user-upload-page .upload-box .nav-tabs {
    background-color: #252d39;
    border-bottom-color: var(--ds-gray-200);
}

html[data-theme="dark"] .user-shell .user-upload-page .upload-box .nav-tabs .nav-link.active,
html[data-theme="dark"] .user-shell .user-upload-page .upload-box .nav-tabs .nav-item.show .nav-link {
    background-color: var(--ds-gray-50);
    border-bottom-color: var(--ds-indigo-400);
    color: var(--ds-indigo-400);
}

html[data-theme="dark"] .panel-default > .panel-heading,
html[data-theme="dark"] .panel-default > .panel-filter,
html[data-theme="dark"] .panel-title.top,
html[data-theme="dark"] .panel-heading.active,
html[data-theme="dark"] .panel-heading.panel-unClassified-content.active {
    background-color: #252d39 !important;
    color: var(--ds-gray-900) !important;
    border-color: var(--ds-gray-200) !important;
}

html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .panel-title a,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .panel-body a,
html[data-theme="dark"] .content-category-heading,
html[data-theme="dark"] .content-category-heading a,
html[data-theme="dark"] .course-item,
html[data-theme="dark"] .text-black-50 {
    color: var(--ds-gray-700) !important;
}

html[data-theme="dark"] .panel-title a:hover,
html[data-theme="dark"] .panel-title a:focus,
html[data-theme="dark"] .panel-heading.active .panel-title,
html[data-theme="dark"] .panel-heading.active .panel-title a,
html[data-theme="dark"] .course-item:hover,
html[data-theme="dark"] .course-item:focus {
    color: var(--ds-indigo-400) !important;
}

/* 콘텐츠 분류 메뉴는 페이지 전용 CSS의 어두운 글자·흰 구분선을 다크 표면색에 맞춥니다. */
html[data-theme="dark"] .user-shell .user-content-page .content-category-heading,
html[data-theme="dark"] .user-shell .user-content-page .content-category-heading-text,
html[data-theme="dark"] .user-shell .user-content-page .content-type-link {
    color: var(--ds-gray-700) !important;
}

html[data-theme="dark"] .user-shell .user-content-page .content-category-heading {
    border-bottom-color: var(--ds-gray-300) !important;
}

/* 업로드 전 재생 대기 화면도 흰 플레이스홀더 대신 다크 콘텐츠 표면을 사용합니다. */
html[data-theme="dark"] .transfer-session-detail .video-wrap,
html[data-theme="dark"] .transfer-session-detail .video-wrap-placeholder {
    background-color: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-200) !important;
}

html[data-theme="dark"] .transfer-session-detail .video-wrap-placeholder,
html[data-theme="dark"] .transfer-session-detail .video-wrap-placeholder i {
    color: var(--ds-gray-700) !important;
}

/* 기존 CMS의 .text-primary 고정 파란색은 다크 표면에서 대비가 부족해 밝은 인디고로 바꿉니다. */
html[data-theme="dark"] .text-primary,
html[data-theme="dark"] a.text-primary,
html[data-theme="dark"] a.text-primary:hover,
html[data-theme="dark"] a.text-primary:focus {
    color: var(--ds-indigo-400) !important;
}

html[data-theme="dark"] .table-manager,
html[data-theme="dark"] .table-row,
html[data-theme="dark"] .table-thumbnail,
html[data-theme="dark"] .content-list table,
html[data-theme="dark"] .content-info table,
html[data-theme="dark"] #treeDept,
html[data-theme="dark"] .dataTables_wrapper table {
    background-color: var(--ds-gray-50) !important;
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .table-manager th,
html[data-theme="dark"] .table-row th,
html[data-theme="dark"] .table-thumbnail th,
html[data-theme="dark"] .content-list thead th,
html[data-theme="dark"] .content-info thead th,
html[data-theme="dark"] .dataTables_wrapper thead th {
    background-color: #252d39 !important;
    color: var(--ds-gray-900) !important;
    border-color: var(--ds-gray-200) !important;
}

html[data-theme="dark"] .table-manager td,
html[data-theme="dark"] .table-row td,
html[data-theme="dark"] .table-thumbnail td,
html[data-theme="dark"] .content-list td,
html[data-theme="dark"] .content-info td,
html[data-theme="dark"] #treeDept td,
html[data-theme="dark"] .dataTables_wrapper td {
    background-color: var(--ds-gray-50) !important;
    color: var(--ds-gray-700) !important;
    border-color: var(--ds-gray-200) !important;
}

html[data-theme="dark"] .table-manager tbody tr:hover td,
html[data-theme="dark"] .table-row tbody tr:hover td,
html[data-theme="dark"] .content-list tbody tr:hover td,
html[data-theme="dark"] .dataTables_wrapper tbody tr:hover td {
    background-color: #252d39 !important;
}

html[data-theme="dark"] .table-manager a,
html[data-theme="dark"] .content-list a,
html[data-theme="dark"] .content-info a,
html[data-theme="dark"] #treeDept a {
    color: var(--ds-indigo-400);
}

html[data-theme="dark"] .badge-outline,
html[data-theme="dark"] .content-list .badge-outline,
html[data-theme="dark"] #treeDept .badge-outline {
    background-color: var(--ds-indigo-50) !important;
    border-color: var(--ds-indigo-200) !important;
    color: var(--ds-indigo-400) !important;
}

html[data-theme="dark"] .btn-blue,
html[data-theme="dark"] .nav-contents .nav-link.active,
html[data-theme="dark"] .nav-contents .nav-item.show .nav-link {
    background-color: var(--ds-indigo-600) !important;
    border-color: var(--ds-indigo-600) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-prev,
html[data-theme="dark"] .navbar-nav .on .nav-link,
html[data-theme="dark"] .content-list .btn-light,
html[data-theme="dark"] .cbp-spmenu .btn-light {
    background-color: #252d39 !important;
    border-color: var(--ds-gray-300) !important;
    color: var(--ds-gray-900) !important;
}

/* 사용자 트랜스퍼는 페이지 전용 CSS가 공통 테마 뒤에 로드되므로 후순위 값을 명시적으로 무력화합니다. */
html[data-theme="dark"] .user-transfer-page {
    --transfer-card: var(--ds-gray-50);
}

html[data-theme="dark"] .user-transfer-page .content-article,
html[data-theme="dark"] .user-transfer-page #transfer-iframe-player,
html[data-theme="dark"] .user-transfer-page .transfer-panel-close,
html[data-theme="dark"] .user-transfer-page .transfer-summary-notice {
    background-color: var(--ds-gray-50) !important;
    color: var(--ds-gray-900);
    border-color: var(--ds-gray-200) !important;
}

html[data-theme="dark"] .user-transfer-page .transfer-player-card,
html[data-theme="dark"] .user-transfer-page .transfer-content-list {
    background-color: transparent !important;
    border-color: var(--ds-gray-200) !important;
}

html[data-theme="dark"] .user-transfer-page .transfer-filterbar .btn-primary {
    background-color: var(--ds-indigo-50);
    color: var(--ds-indigo-400);
}

html[data-theme="dark"] .user-transfer-page .transfer-filterbar .btn-primary:hover,
html[data-theme="dark"] .user-transfer-page .transfer-filterbar .btn-primary:focus {
    background-color: var(--ds-indigo-tint-hover);
    color: #ffffff;
}

/* 사용자 헬프데스크의 고정 흰색 FAQ 표면을 다크 콘텐츠 표면으로 통일합니다. */
html[data-theme="dark"] .user-shell .user-help-page .help-page-panel,
html[data-theme="dark"] .user-shell .user-help-page .upload-box,
html[data-theme="dark"] .user-shell .user-help-page .upload-box .nav-tabs,
html[data-theme="dark"] .user-shell .user-help-page .tab-content,
html[data-theme="dark"] .user-shell .user-help-page .helpdesk .card,
html[data-theme="dark"] .user-shell .user-help-page .helpdesk .card-header {
    background-color: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-200) !important;
}

html[data-theme="dark"] .user-shell .user-help-page .upload-box .nav-tabs .nav-link {
    color: var(--ds-gray-700);
}

html[data-theme="dark"] .user-shell .user-help-page .upload-box .nav-tabs .nav-link:hover,
html[data-theme="dark"] .user-shell .user-help-page .upload-box .nav-tabs .nav-link:focus {
    background-color: var(--ds-indigo-50);
    border-bottom-color: var(--ds-indigo-200);
    color: var(--ds-indigo-400);
}

html[data-theme="dark"] .user-shell .user-help-page .upload-box .nav-tabs .nav-link.active {
    background-color: var(--ds-gray-50) !important;
    border-bottom-color: var(--ds-indigo-400);
    color: var(--ds-indigo-400);
}

html[data-theme="dark"] .user-shell .user-help-page .helpdesk .card-header a {
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .user-shell .user-help-page .helpdesk .card-header a::after {
    background-color: var(--ds-indigo-50);
    color: var(--ds-indigo-400);
}

html[data-theme="dark"] .user-shell .user-help-page .helpdesk .btn-link:hover,
html[data-theme="dark"] .user-shell .user-help-page .helpdesk .btn-link:focus {
    background-color: var(--ds-indigo-50);
    color: var(--ds-indigo-400);
}

html[data-theme="dark"] .user-shell .user-help-page .helpdesk .card-body {
    background-color: #252d39;
    border-top-color: var(--ds-gray-200);
    color: var(--ds-gray-800);
}

html[data-theme="dark"] .user-shell .user-help-page .helpdesk .card-body img,
html[data-theme="dark"] .user-shell .user-help-page .help-image-border {
    border-color: var(--ds-gray-200) !important;
}

/* 사용자 세션 목록의 제목 버튼은 페이지 전용 고정 색상 대신 다크 테마 글자색을 사용합니다. */
html[data-theme="dark"] .user-transfer-page .transfer-session-title {
    color: var(--ds-gray-900);
}

html[data-theme="dark"] .user-transfer-page .transfer-session-title:disabled {
    color: var(--ds-gray-600);
}

/* 콘텐츠 수정 모달의 인라인 라이트 미리보기 배경을 다크 표면으로 덮습니다. */
html[data-theme="dark"] #modal-update-content .content-update-preview,
html[data-theme="dark"] #modal-update-content .media {
    background-color: var(--ds-gray-50) !important;
    border-color: var(--ds-gray-200) !important;
    color: var(--ds-gray-900);
}

/* 콘텐츠 상세의 텍스트 액션은 호버해도 어두워지지 않도록 다크 테마 색상을 유지합니다. */
html[data-theme="dark"] .manager-article .admin-video .text-right > .btn.text-s {
    color: var(--ds-gray-600);
}

/* 세션 상세의 액션 영역은 재생 영역 다음에 있어 위 콘텐츠 선택자 범위 밖이므로 별도 지정합니다. */
html[data-theme="dark"] .transfer-session-detail .text-right > .btn.text-s {
    color: var(--ds-gray-600);
}

html[data-theme="dark"] .manager-article .admin-video .text-right > .btn.text-s:hover,
html[data-theme="dark"] .manager-article .admin-video .text-right > .btn.text-s:focus,
html[data-theme="dark"] .transfer-session-detail .text-right > .btn.text-s:hover,
html[data-theme="dark"] .transfer-session-detail .text-right > .btn.text-s:focus {
    background-color: var(--ds-indigo-50);
    color: var(--ds-indigo-400);
    text-decoration: none;
}

/* 공통 토스트는 헤더별 CSS 로드 순서와 무관하게 다크 표면과 밝은 메시지 색을 유지합니다. */
html[data-theme="dark"] .lab-toast {
    background-color: #252d39 !important;
    border-color: var(--ds-gray-300) !important;
    color: var(--ds-gray-900) !important;
}