/** * Dark theme overrides — 모든 다크 스타일은 이 파일에만 추가한다. * 활성화: (layout.js + FOUC 스크립트) */ /* ── 프로필 메뉴 Dark mode 토글 — common.css .form-check 전역 스타일 복구 (라이트/다크 공통) ── */ .profile-menu-panel .profile-menu-theme-switch.form-check { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; font-weight: inherit; font-size: inherit; display: inline-flex; align-items: center; flex-shrink: 0; } .profile-menu-panel .profile-menu-theme-switch.form-switch { padding-left: 0; } .profile-menu-panel .profile-menu-theme-switch .form-check-input { width: 2.5em; height: 1.25em; margin: 0; padding: 0; border: 0; border-radius: 2em; float: none; cursor: pointer; flex-shrink: 0; } /* ============================================================= * 1. BS5 공식 dark 토큰 + 2. 프로젝트 시맨틱 토큰 (:root 미러) * ============================================================= */ [data-bs-theme="dark"] { /* BS5 네이티브 — body·셸 기준면 */ --bs-body-bg: #212529; --bs-body-color: #dee2e6; --bs-secondary-bg: #343a40; --bs-tertiary-bg: #2b3035; --bs-emphasis-color: #fff; --bs-border-color: #495057; /* 프로젝트 셸 토큰 — body / sidebar / header / footer 동일 */ --bs-bg-shell: var(--bs-body-bg); --bs-bg-elevated: var(--bs-secondary-bg); --bs-bg-surface: var(--bs-tertiary-bg); --bs-primary: #38bdf8; --bs-primary-light: #0c4a6e; --bs-primary-dark: #7dd3fc; --bs-primary-accent: #0ea5e9; --bs-success: #34d399; --bs-success-light: #064e3b; --bs-success-dark: #6ee7b7; --bs-success-accent: #10b981; --bs-info: #22d3ee; --bs-info-light: #083344; --bs-info-dark: #67e8f9; --bs-info-accent: #22d3ee; --bs-warning: #fbbf24; --bs-warning-light: #451a03; --bs-warning-dark: #fcd34d; --bs-warning-accent: #f59e0b; --bs-danger: #f87171; --bs-danger-light: #450a0a; --bs-danger-dark: #fca5a5; --bs-danger-accent: #ef4444; --bs-muted: #94a3b8; --bs-muted-light: var(--bs-bg-elevated); --bs-muted-dark: #cbd5e1; --bs-muted-accent: #64748b; --bs-dark: #e2e8f0; --bs-dark-light: var(--bs-bg-elevated); --bs-dark-dark: #f8fafc; --bs-dark-accent: #e2e8f0; --bs-light: var(--bs-bg-elevated); --bs-light-dark: var(--bs-border-color); --bs-light-accent: var(--bs-border-color); --bs-secondary: var(--bs-border-color); --bs-secondary-light: var(--bs-bg-elevated); --bs-secondary-dark: #adb5bd; --bs-purple: #a78bfa; --bs-purple-light: #2e1065; --bs-purple-dark: #c4b5fd; --bs-pink: #f472b6; --bs-pink-light: #500724; --bs-pink-dark: #fbcfe8; --bs-text: var(--bs-body-color); --bs-card: var(--bs-bg-surface); --bs-bg-primary: #0c4a6e; --bs-bg-primary-light: #082f49; --bs-bg-secondary: var(--bs-bg-elevated); --bs-bg-danger: #450a0a; --bs-bg-warning: #451a03; --bs-bg-info: #083344; --bs-bg-muted: var(--bs-bg-shell); --bs-bg-dark: var(--bs-bg-elevated); --bs-bg-light: var(--bs-bg-shell); --bs-bg-input-disabled: #3a4047; --bs-border-primary: #0369a1; --bs-border-primary-light: #0c4a6e; --bs-border-primary-dark: #38bdf8; --bs-border-success: #065f46; --bs-border-light: var(--bs-bg-elevated); --bs-border-secondary: #3d4449; --bs-border-muted: var(--bs-border-color); --bs-border-danger: #991b1b; --bs-border-info: #155e75; --bs-border-warning: #92400e; --bs-border-purple: #5b21b6; --bs-border-pink: #9d174d; --bs-shadow: 0 2px 16px rgba(0, 0, 0, 0.28); --bs-shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.38); --bs-shell-hover: color-mix(in srgb, var(--bs-primary) 12%, transparent); --bs-shell-hover-subtle: color-mix(in srgb, var(--bs-primary) 8%, transparent); } /* ============================================================= * 3. 셸 — header / sidebar / main / footer * ============================================================= */ [data-bs-theme="dark"] body, [data-bs-theme="dark"] #main { background-color: var(--bs-bg-shell); color: var(--bs-text); } [data-bs-theme="dark"] .header { background-color: var(--bs-bg-shell); border-bottom-color: var(--bs-border-muted); } /* 박스가 아니라 구분선 한 줄만 있는 블록 — 다크에서는 hairline 만 또렷하게 */ [data-bs-theme="dark"] .header-clock + .header-clock { border-left-color: var(--bs-border-muted); } [data-bs-theme="dark"] .header-clock-icon { color: var(--bs-muted); } [data-bs-theme="dark"] .header .search-bar { background: var(--bs-bg-shell); box-shadow: var(--bs-shadow); } [data-bs-theme="dark"] .header .search-form input { color: var(--bs-text); background: var(--bs-bg-secondary); border-color: var(--bs-border-muted); } [data-bs-theme="dark"] .header .search-form input:focus, [data-bs-theme="dark"] .header .search-form input:hover { border-color: var(--bs-border-primary); box-shadow: var(--bs-shadow); } [data-bs-theme="dark"] .header .search-form button i { color: var(--bs-text); } [data-bs-theme="dark"] .logo span { color: var(--bs-text); } [data-bs-theme="dark"] #header .login-page__identity { gap: 12px; align-items: center; } [data-bs-theme="dark"] #header .login-page__identity-mark { background: var(--bs-bg-surface); } [data-bs-theme="dark"] #header .login-page__identity-host { color: var(--bs-muted); } [data-bs-theme="dark"] .sidebar { background-color: var(--bs-bg-shell); border-right-color: var(--bs-border-secondary); scrollbar-color: var(--bs-border-muted) transparent; } [data-bs-theme="dark"] .sidebar::-webkit-scrollbar { background-color: var(--bs-bg-shell); } [data-bs-theme="dark"] .sidebar::-webkit-scrollbar-thumb { background-color: var(--bs-border-muted); } [data-bs-theme="dark"] .sidebar-test-nav .sbx-heading-label { color: var(--bs-muted); } [data-bs-theme="dark"] .sidebar-test-nav .sbx-folder-svg { color: var(--bs-muted); } [data-bs-theme="dark"] .sidebar-test-nav .sbx-chev { color: var(--bs-muted); } [data-bs-theme="dark"] .sidebar-test-nav .sbx-link.sbx-link--subleaf::before { background: var(--bs-muted); } [data-bs-theme="dark"] .sidebar-test-nav .sbx-submenu.is-open { border-left-color: var(--bs-border-muted); } [data-bs-theme="dark"] .sidebar-test-nav .sbx-submenu .sbx-submenu.is-open { border-left-color: var(--bs-border-secondary); } [data-bs-theme="dark"] .sidebar-test-nav .sbx-link.is-active, [data-bs-theme="dark"] .sidebar-test-nav .sbx-toggle.is-active { background: var(--bs-shell-hover); } [data-bs-theme="dark"] .sidebar-nav .nav-heading { color: var(--bs-muted); } [data-bs-theme="dark"] .sidebar-nav .nav-link { color: var(--bs-muted); } [data-bs-theme="dark"] .sidebar-nav .nav-link:hover, [data-bs-theme="dark"] .sidebar-nav .nav-link.collapsed { color: var(--bs-primary); background: var(--bs-shell-hover-subtle); } [data-bs-theme="dark"] .footer { background: var(--bs-bg-shell); border-top-color: var(--bs-border-muted); } /* 알림 패널 */ [data-bs-theme="dark"] .ims-noti-panel { border-color: var(--bs-border-muted); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); } [data-bs-theme="dark"] .ims-noti-panel-head { background: var(--bs-bg-elevated); border-bottom-color: var(--bs-border-muted); } [data-bs-theme="dark"] .ims-noti-item { border-bottom-color: var(--bs-border-secondary); } [data-bs-theme="dark"] .ims-noti-item:hover { background: var(--bs-bg-elevated); } [data-bs-theme="dark"] .ims-noti-item--unread { background: var(--bs-shell-hover-subtle); } [data-bs-theme="dark"] .ims-noti-item--unread:hover { background: var(--bs-shell-hover); } /* 프로필 메뉴 */ [data-bs-theme="dark"] .profile-menu-dd .profile-menu-trigger:hover, [data-bs-theme="dark"] .profile-menu-dd .profile-menu-trigger:focus { background: color-mix(in srgb, var(--bs-emphasis-color) 6%, transparent); } [data-bs-theme="dark"] .profile-menu-trigger-name { color: var(--bs-text); } [data-bs-theme="dark"] .profile-menu-avatar { background: linear-gradient(145deg, var(--bs-border-muted) 0%, var(--bs-bg-elevated) 100%); color: var(--bs-text); border-color: var(--bs-bg-shell); } [data-bs-theme="dark"] .profile-menu-status { border-color: var(--bs-bg-shell); } [data-bs-theme="dark"] .profile-menu-panel { border-color: var(--bs-border-muted); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); } [data-bs-theme="dark"] .profile-menu-rule { border-color: var(--bs-border-secondary); } [data-bs-theme="dark"] .profile-menu-item { color: var(--bs-text); } [data-bs-theme="dark"] .profile-menu-item:hover { background: var(--bs-bg-elevated); color: var(--bs-text); } [data-bs-theme="dark"] .profile-menu-item i { color: var(--bs-muted); } /* ============================================================= * 4. common 컴포넌트 — page-*, form-section, card, table * ============================================================= */ [data-bs-theme="dark"] .form-section-header, [data-bs-theme="dark"] .card-footer { background: var(--bs-card); } [data-bs-theme="dark"] .page-toolbar, [data-bs-theme="dark"] .page-toolbar-suggest, [data-bs-theme="dark"] .page-toolbar-search .form-control:focus, [data-bs-theme="dark"] .page-header { background: var(--bs-bg-shell); } [data-bs-theme="dark"] .card-header { background: var(--bs-card); } [data-bs-theme="dark"] .page-toolbar-sep { background: var(--bs-border-muted); } [data-bs-theme="dark"] .page-toolbar-suggest-item:hover { background: var(--bs-bg-secondary); } [data-bs-theme="dark"] .card { background: var(--bs-card); color: var(--bs-text); } [data-bs-theme="dark"] .card-body { background: var(--bs-card); color: var(--bs-text); } [data-bs-theme="dark"] .form-section-icon--settings { background: var(--bs-purple-light); color: var(--bs-purple); border-color: var(--bs-purple-dark); } [data-bs-theme="dark"] .form-section-icon--doc { background: var(--bs-info-light); color: var(--bs-info); border-color: var(--bs-border-info); } /* 프로필 페이지 탭 */ [data-bs-theme="dark"] .user-profile-tabs .nav-link:hover { background: var(--bs-shell-hover-subtle); } [data-bs-theme="dark"] .user-profile-tabs .nav-link.active { background: var(--bs-primary-light); border-color: var(--bs-border-light); border-bottom-color: var(--bs-bg-shell); } [data-bs-theme="dark"] .profile-notif-card, [data-bs-theme="dark"] .profile-notif-card__main { background: var(--bs-card); border-color: var(--bs-border-muted); } /* 4-2. badge-* (common.css) */ [data-bs-theme="dark"] .badge-primary, [data-bs-theme="dark"] .badge-info, [data-bs-theme="dark"] .badge-accepted, [data-bs-theme="dark"] .badge-partially_open, [data-bs-theme="dark"] .badge-sent, [data-bs-theme="dark"] .badge-customer_confirmed, [data-bs-theme="dark"] .badge-processing, [data-bs-theme="dark"] .badge-rescheduled, [data-bs-theme="dark"] .badge-new, [data-bs-theme="dark"] .badge-start_trip, [data-bs-theme="dark"] .badge-prepaid, [data-bs-theme="dark"] .badge-pilot { background: var(--bs-primary-light) !important; color: var(--bs-primary) !important; border-color: var(--bs-border-primary) !important; } [data-bs-theme="dark"] .badge-warning, [data-bs-theme="dark"] .badge-callback_later, [data-bs-theme="dark"] .badge-in_progress, [data-bs-theme="dark"] .badge-open, [data-bs-theme="dark"] .badge-bill, [data-bs-theme="dark"] .badge-planned, [data-bs-theme="dark"] .badge-round_trip, [data-bs-theme="dark"] .badge-pending, [data-bs-theme="dark"] .badge-suspended { background: var(--bs-warning-light) !important; color: var(--bs-warning) !important; border-color: var(--bs-border-warning) !important; } [data-bs-theme="dark"] .badge-read, [data-bs-theme="dark"] .badge-muted, [data-bs-theme="dark"] .badge-review, [data-bs-theme="dark"] .badge-ready, [data-bs-theme="dark"] .badge-not_payment, [data-bs-theme="dark"] .badge-no_answer, [data-bs-theme="dark"] .badge-draft, [data-bs-theme="dark"] .badge-secondary, [data-bs-theme="dark"] .badge-default, [data-bs-theme="dark"] .badge-disabled { background: var(--bs-muted-light) !important; color: var(--bs-muted) !important; border-color: var(--bs-border-muted) !important; } [data-bs-theme="dark"] .badge-management, [data-bs-theme="dark"] .badge-active, [data-bs-theme="dark"] .badge-approved, [data-bs-theme="dark"] .badge-partially_payment, [data-bs-theme="dark"] .badge-submit, [data-bs-theme="dark"] .badge-submitted, [data-bs-theme="dark"] .badge-converted, [data-bs-theme="dark"] .badge-one_way, [data-bs-theme="dark"] .badge-enabled, [data-bs-theme="dark"] .badge-success, [data-bs-theme="dark"] .badge-confirmed, [data-bs-theme="dark"] .badge-all_confirmed { background: var(--bs-success-light) !important; color: var(--bs-success) !important; border-color: var(--bs-border-success) !important; } [data-bs-theme="dark"] .badge-non_management, [data-bs-theme="dark"] .badge-danger, [data-bs-theme="dark"] .badge-inactive, [data-bs-theme="dark"] .badge-not_interested, [data-bs-theme="dark"] .badge-lost, [data-bs-theme="dark"] .badge-cancelled, [data-bs-theme="dark"] .badge-canceled, [data-bs-theme="dark"] .badge-void, [data-bs-theme="dark"] .badge-overdue, [data-bs-theme="dark"] .badge-rejected, [data-bs-theme="dark"] .badge-unread, [data-bs-theme="dark"] .badge-expired { background: var(--bs-danger-light) !important; color: var(--bs-danger) !important; border-color: var(--bs-border-danger) !important; } /* 완료(terminal) 계열 — 승인(approved)과 색이 겹치면 안 된다(Bill 은 둘이 같은 열에 나온다). */ [data-bs-theme="dark"] .badge-completed, [data-bs-theme="dark"] .badge-done, [data-bs-theme="dark"] .badge-paid { background: var(--bs-info-light) !important; color: var(--bs-info) !important; border-color: var(--bs-border-info) !important; } [data-bs-theme="dark"] .badge-total { background: var(--bs-purple-light) !important; color: var(--bs-purple) !important; border-color: var(--bs-purple-dark) !important; } [data-bs-theme="dark"] .badge-resubmit, [data-bs-theme="dark"] .badge-quoted, [data-bs-theme="dark"] .badge-return_trip, [data-bs-theme="dark"] .badge-all_ok, [data-bs-theme="dark"] .badge-any { background: var(--bs-purple-light) !important; color: var(--bs-purple) !important; border-color: var(--bs-purple-dark) !important; } [data-bs-theme="dark"] .badge-required { color: var(--bs-danger); background: var(--bs-danger-light); border-color: var(--bs-border-danger); } [data-bs-theme="dark"] .badge-white { background: var(--bs-bg-elevated); color: var(--bs-text); border-color: var(--bs-border-secondary); } [data-bs-theme="dark"] .badge-id { background: var(--bs-body-bg); border-color: var(--bs-border-primary); color: var(--bs-primary); } /* ============================================================= * 5. modal (modal.css) * ============================================================= */ /* 5-1. Bootstrap .modal */ [data-bs-theme="dark"] .modal-content { background-color: var(--bs-card); color: var(--bs-text); box-shadow: var(--bs-shadow-hover); } [data-bs-theme="dark"] .modal-header { background: var(--bs-card); border-bottom-color: var(--bs-border-muted); } [data-bs-theme="dark"] .modal-footer { background: var(--bs-card); border-top-color: var(--bs-border-muted); } [data-bs-theme="dark"] .modal-body { background: var(--bs-card); color: var(--bs-text); } [data-bs-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-bs-theme="dark"] .modal-danger .modal-header { background: var(--bs-danger); } [data-bs-theme="dark"] .modal-danger .modal-title { color: var(--bs-emphasis-color); } /* 5-2. page-modal-* (커스텀 오버레이 카드) */ [data-bs-theme="dark"] .page-modal-card { background: var(--bs-card); box-shadow: var(--bs-shadow-hover); } [data-bs-theme="dark"] .page-modal-header, [data-bs-theme="dark"] .page-modal-footer { background: var(--bs-card); border-color: var(--bs-border-muted); } [data-bs-theme="dark"] .page-modal-body { background: var(--bs-card); color: var(--bs-text); } [data-bs-theme="dark"] .page-modal-hicon { background: var(--bs-primary-light); border-color: var(--bs-border-primary); color: var(--bs-primary); } [data-bs-theme="dark"] .page-modal-htitle { color: var(--bs-primary); } [data-bs-theme="dark"] .page-modal-hno { color: var(--bs-primary-dark); } [data-bs-theme="dark"] .page-modal-close { background: var(--bs-body-bg); color: var(--bs-muted); } [data-bs-theme="dark"] .page-modal-close:hover { background: var(--bs-danger-light); border-color: var(--bs-border-danger); color: var(--bs-danger); } /* 5-3. 문서 삭제 확인 모달 */ [data-bs-theme="dark"] #documentDeleteConfirmModal .page-modal-body--danger.document-delete-confirm-body, [data-bs-theme="dark"] #documentDeleteConfirmModal .page-modal-footer--danger { background: var(--bs-card); border-top-color: var(--bs-border-secondary); } [data-bs-theme="dark"] #documentDeleteConfirmModal .page-modal-body--danger-text { color: var(--bs-text); } /* 5-4. modal-side-layout (사이드 탭) */ [data-bs-theme="dark"] .modal-side-layout > .modal-side-nav { border-right-color: var(--bs-border-secondary); } [data-bs-theme="dark"] .modal-side-nav .nav-link { color: var(--bs-muted); } [data-bs-theme="dark"] .modal-side-nav .nav-link:hover { color: var(--bs-text); } [data-bs-theme="dark"] .modal-side-nav .nav-link.active, [data-bs-theme="dark"] .modal-side-nav .nav-item.show .nav-link { color: var(--bs-primary); } @media (max-width: 640px) { [data-bs-theme="dark"] .modal-side-layout > .modal-side-nav { border-bottom-color: var(--bs-border-secondary); } } /* 5-5. modal-row / lead / stat */ [data-bs-theme="dark"] .modal-lead { color: var(--bs-primary); } [data-bs-theme="dark"] .modal-lead-large { color: var(--bs-text); } [data-bs-theme="dark"] .modal-row { border-bottom-color: var(--bs-border-secondary); } [data-bs-theme="dark"] .modal-row-label { color: var(--bs-muted); } [data-bs-theme="dark"] .modal-row-value { color: var(--bs-text); } [data-bs-theme="dark"] .modal-description, [data-bs-theme="dark"] .modal-empty-hint, [data-bs-theme="dark"] .modal-data-id { color: var(--bs-muted); } [data-bs-theme="dark"] .stat-card { background: var(--bs-body-bg); border-color: var(--bs-border-secondary); } [data-bs-theme="dark"] .stat-card span { color: var(--bs-muted); } [data-bs-theme="dark"] .stat-card strong { color: var(--bs-text); } /* ============================================================= * 6. 플러그인 — DataTable * datatable.custom.css · common.css .datatable-* 오버라이드 * ============================================================= */ /* 6-1. datatable-card 셸 (common.css) */ [data-bs-theme="dark"] .datatable-card { background: var(--bs-card); } [data-bs-theme="dark"] .datatable-header { background: var(--bs-body-bg); } /* 6-2. table.datatable — 헤더·본문 (datatable.custom.css) */ [data-bs-theme="dark"] table.datatable thead th { background: var(--bs-body-bg) !important; border-top-color: var(--bs-border-secondary) !important; border-bottom-color: var(--bs-border-secondary) !important; } [data-bs-theme="dark"] table.datatable thead th.sorting::after, [data-bs-theme="dark"] table.datatable thead th.sorting_asc::after, [data-bs-theme="dark"] table.datatable thead th.sorting_desc::after { color: var(--bs-primary) !important; opacity: 0.65; } [data-bs-theme="dark"] table.datatable tbody tr { border-bottom-color: var(--bs-border-secondary) !important; } [data-bs-theme="dark"] table.datatable tbody tr:hover td { background-color: var(--bs-shell-hover-subtle) !important; } [data-bs-theme="dark"] table.datatable tbody tr.datatable-row-current-month td { background-color: var(--bs-primary-light) !important; } [data-bs-theme="dark"] table.datatable tbody td { color: var(--bs-text); background-color: var(--bs-body-bg) !important; } /* 6-3. wrapper — dt-container / info / pagination / processing */ [data-bs-theme="dark"] div.dt-container { background-color: var(--bs-body-bg) !important; color: var(--bs-muted); } [data-bs-theme="dark"] div.dt-container .dt-info { color: var(--bs-muted) !important; } [data-bs-theme="dark"] div.dt-container .dt-paging nav button.dt-paging-button { border-color: var(--bs-border-muted) !important; color: var(--bs-muted) !important; background: var(--bs-body-bg) !important; } [data-bs-theme="dark"] div.dt-container .dt-paging nav button.dt-paging-button.current, [data-bs-theme="dark"] div.dt-container .dt-paging nav button.dt-paging-button.current:hover { background: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--bs-emphasis-color) !important; box-shadow: var(--bs-shadow) !important; } [data-bs-theme="dark"] div.dt-container .dt-paging nav button.dt-paging-button:not(.current):not(.disabled):hover { background: var(--bs-shell-hover-subtle) !important; border-color: var(--bs-border-primary) !important; color: var(--bs-text) !important; } [data-bs-theme="dark"] div.dt-container .dt-paging nav button.dt-paging-button.disabled, [data-bs-theme="dark"] div.dt-container .dt-paging nav button.dt-paging-button.disabled:hover { background: var(--bs-body-bg) !important; border-color: var(--bs-border-secondary) !important; color: var(--bs-muted) !important; opacity: 0.55; } [data-bs-theme="dark"] div.dt-container .dt-processing { background: color-mix(in srgb, var(--bs-bg-shell) 92%, transparent) !important; border-color: var(--bs-border-muted) !important; color: var(--bs-primary) !important; box-shadow: var(--bs-shadow) !important; } /* 6-4. empty / zero / processing HTML */ [data-bs-theme="dark"] .datatable-empty, [data-bs-theme="dark"] .datatable-zero { color: var(--bs-muted); } [data-bs-theme="dark"] .datatable-processing { color: var(--bs-primary); } /* 6-5. 셀 콘텐츠 — link / action-btn */ [data-bs-theme="dark"] .datatable-action-btn:hover { color: var(--bs-emphasis-color); box-shadow: var(--bs-shadow); } /* 6-6. DataTables CDN (dataTables.dataTables.min.css) — BS dark 연동 보강 */ [data-bs-theme="dark"] table.dataTable { --dt-html-background: var(--bs-body-bg); } [data-bs-theme="dark"] table.dataTable > thead > tr > th, [data-bs-theme="dark"] table.dataTable > thead > tr > td { background-color: var(--bs-body-bg) !important; } [data-bs-theme="dark"] table.dataTable > thead > tr > th, [data-bs-theme="dark"] table.dataTable > thead > tr > td, [data-bs-theme="dark"] table.dataTable > tbody > tr > th, [data-bs-theme="dark"] table.dataTable > tbody > tr > td { color: var(--bs-text); } [data-bs-theme="dark"] table.dataTable > tbody > tr > td, [data-bs-theme="dark"] table.dataTable > tbody > tr > th { background-color: var(--bs-body-bg); } [data-bs-theme="dark"] table.dataTable.row-border > tbody > tr > *, [data-bs-theme="dark"] table.dataTable.display > tbody > tr > * { border-top-color: var(--bs-border-secondary); } [data-bs-theme="dark"] table.dataTable.hover > tbody > tr:hover > *, [data-bs-theme="dark"] table.dataTable.display > tbody > tr:hover > * { background-color: var(--bs-shell-hover-subtle); box-shadow: none; } [data-bs-theme="dark"] .dt-container .dt-search input, [data-bs-theme="dark"] .dt-container .dt-length select { background: var(--bs-body-bg); border-color: var(--bs-border-muted); color: var(--bs-text); } [data-bs-theme="dark"] .dt-container .dt-search input:focus, [data-bs-theme="dark"] .dt-container .dt-length select:focus { border-color: var(--bs-border-primary); outline: none; } /* ============================================================= * 7. 플러그인 — Select2 * select2.custom.css · select2-bootstrap-5-theme 오버라이드 * ============================================================= */ /* 7-1. selection — 공통 (select2.custom.css) · 배경 = form-control 과 동일 */ [data-bs-theme="dark"] .select2-container .select2-selection--single { background-color: var(--bs-body-bg) !important; border-color: var(--bs-border-muted); } [data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered, [data-bs-theme="dark"] .select2-container .select2-selection__placeholder { color: var(--bs-text) !important; } [data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single, [data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 3px var(--bs-shell-hover-subtle) !important; } [data-bs-theme="dark"] .select2-container--disabled .select2-selection--single { background-color: var(--bs-bg-secondary) !important; border-color: var(--bs-border-muted) !important; color: var(--bs-muted) !important; } [data-bs-theme="dark"] .select2-container--disabled .select2-selection--single .select2-selection__rendered { color: var(--bs-muted) !important; } [data-bs-theme="dark"] .select2.is-invalid .select2-selection, [data-bs-theme="dark"] select.is-invalid + .select2-container .select2-selection { border-color: var(--bs-danger) !important; } /* 7-2. dropdown / results (select2.custom.css) */ [data-bs-theme="dark"] .select2-dropdown { background-color: var(--bs-body-bg); border-color: var(--bs-border-muted); box-shadow: var(--bs-shadow); } [data-bs-theme="dark"] .select2-search__field { background: var(--bs-body-bg); border-color: var(--bs-border-muted); color: var(--bs-text); } [data-bs-theme="dark"] .select2-results__option { color: var(--bs-text); background-color: var(--bs-body-bg); border-bottom-color: var(--bs-border-secondary); } [data-bs-theme="dark"] .select2-results__option--highlighted { background: var(--bs-primary) !important; color: var(--bs-emphasis-color) !important; } [data-bs-theme="dark"] .select2-results__option--selected { background: var(--bs-primary-light); color: var(--bs-primary); } /* optgroup 헤더 — 라이트는 select2.custom.css, 여기선 면·선·글자색만 뒤집는다. * 긴 셀렉터는 select2-bootstrap-5-theme 의 color 를 이기기 위한 것(같은 이유·같은 깊이). */ [data-bs-theme="dark"] .select2-results__group, [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role="group"] .select2-results__group { background: var(--bs-bg-secondary); border-top-color: var(--bs-border-secondary); color: var(--bs-primary-dark); } /* 7-3. bootstrap-5 theme (select2-bootstrap-5-theme) */ [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection { color: var(--bs-text); background-color: var(--bs-body-bg); border-color: var(--bs-border-muted); } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--bs-text); } [data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--focus .select2-selection, [data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--bs-border-primary); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 28%, transparent); } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown { color: var(--bs-text); background-color: var(--bs-body-bg); border-color: var(--bs-border-primary); } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { background: var(--bs-body-bg); border-color: var(--bs-border-muted); color: var(--bs-text); } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus { border-color: var(--bs-border-primary); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 28%, transparent); } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { background-color: var(--bs-body-bg); } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { color: var(--bs-text); background-color: var(--bs-shell-hover-subtle); } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) { color: var(--bs-emphasis-color); background-color: var(--bs-primary); } [data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection, [data-bs-theme="dark"] .select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection { color: var(--bs-muted); background-color: var(--bs-bg-secondary); border-color: var(--bs-border-muted); box-shadow: none; } /* 7-4. bootstrap-5 multiple */ [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { color: var(--bs-text); background-color: var(--bs-bg-elevated); border-color: var(--bs-border-muted); } [data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field { color: var(--bs-text); } /* 8. 페이지 예외 — pages/* ID·클래스 스코프 */ /* ============================================================= * 9. 로그인 (pages/login/index.css) * ============================================================= */ /* 9-1. 풀스크린 배경 */ [data-bs-theme="dark"] .login-page { background: radial-gradient(ellipse 70% 55% at 15% 90%, color-mix(in srgb, var(--bs-primary) 22%, transparent), transparent 60%), radial-gradient(ellipse 55% 45% at 85% 12%, color-mix(in srgb, var(--bs-primary) 14%, transparent), transparent 55%), linear-gradient(155deg, #0a1628 0%, var(--bs-bg-shell) 52%, #0f172a 100%); } [data-bs-theme="dark"] .login-bg__grid { opacity: 0.08; background-image: linear-gradient(color-mix(in srgb, var(--bs-emphasis-color) 18%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--bs-emphasis-color) 18%, transparent) 1px, transparent 1px); } [data-bs-theme="dark"] .login-bg__orb--1 { background: color-mix(in srgb, var(--bs-primary) 24%, transparent); } [data-bs-theme="dark"] .login-bg__orb--2 { background: color-mix(in srgb, var(--bs-primary) 18%, transparent); } [data-bs-theme="dark"] .login-bg__orb--3 { background: color-mix(in srgb, var(--bs-primary) 12%, transparent); } /* 9-2. 워드마크 */ [data-bs-theme="dark"] .login-mark { color: var(--bs-emphasis-color); } [data-bs-theme="dark"] .login-mark__logo { background: color-mix(in srgb, var(--bs-emphasis-color) 10%, transparent); border-color: color-mix(in srgb, var(--bs-emphasis-color) 22%, transparent); color: var(--bs-emphasis-color); } [data-bs-theme="dark"] .login-mark__tagline { color: color-mix(in srgb, var(--bs-emphasis-color) 72%, transparent); } /* 9-3. 로그인 카드 */ [data-bs-theme="dark"] .login-card { background: var(--bs-card); border-color: var(--bs-border-muted); box-shadow: var(--bs-shadow-hover); } [data-bs-theme="dark"] .login-card__head h1 { color: var(--bs-text); } [data-bs-theme="dark"] .login-card__head p { color: var(--bs-muted); } [data-bs-theme="dark"] .login-card__foot { border-top-color: var(--bs-border-secondary); color: var(--bs-muted); } [data-bs-theme="dark"] .login-card__foot a { color: var(--bs-primary); } /* 9-4. 폼 필드 */ [data-bs-theme="dark"] .login-page__field .form-label, [data-bs-theme="dark"] .login-page__options .form-check-label { color: var(--bs-muted); } [data-bs-theme="dark"] .login-page__input-wrap .form-control { background: var(--bs-body-bg); border-color: var(--bs-border-muted); color: var(--bs-text); } [data-bs-theme="dark"] .login-page__input-wrap .form-control:focus { border-color: var(--bs-border-primary); box-shadow: 0 0 0 3px var(--bs-shell-hover-subtle); } [data-bs-theme="dark"] .login-page__toggle-pw { color: var(--bs-muted); } [data-bs-theme="dark"] .login-page__toggle-pw:hover { color: var(--bs-primary); background: var(--bs-shell-hover-subtle); } [data-bs-theme="dark"] .login-page__options .form-check { border: 0; padding: 0; width: auto; border-radius: 0; } [data-bs-theme="dark"] .login-page__options .form-check-input { background-color: var(--bs-body-bg); border-color: var(--bs-border-muted); } [data-bs-theme="dark"] .login-page__options .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } [data-bs-theme="dark"] .login-page__submit { background: linear-gradient(150deg, var(--bs-primary-accent) 0%, var(--bs-primary) 55%, var(--bs-primary-dark) 100%); box-shadow: var(--bs-shadow); } [data-bs-theme="dark"] .login-page__submit:hover { box-shadow: var(--bs-shadow-hover); } [data-bs-theme="dark"] .document-list-group { background-color: var(--bs-body-bg); } /* ============================================================= * 10. Quote Create Worksheet (pages/.../worksheet.css 오버라이드) * - 커스텀 오버레이 모달(#quoteCreateModal) 내부 문서시트/사이드바/가격패널 * - worksheet.css 가 이 파일보다 늦게 로드되므로 스코프(.quote-create-page)를 * 덧대어 우선순위를 확보한다. * ============================================================= */ /* 10-1. 커스텀 프로퍼티 다크 매핑 — var() 기반 텍스트/보더/액센트 일괄 전환 */ [data-bs-theme="dark"] .quote-create-page { --cq-accent: var(--bs-primary); --cq-accent-soft: var(--bs-primary-light); --cq-card-border: var(--bs-border-primary); --cq-card-shadow: var(--bs-shadow); } [data-bs-theme="dark"] .quote-create-page .quote-doc-sheet { --qd-ink: var(--bs-text); --qd-muted: var(--bs-muted); --qd-rule: var(--bs-border-muted); --qd-accent: var(--bs-primary); } /* 10-2. 문서 시트 셸 (흰 배경 → 카드) * ※ additional-modal(view/edit)의