/* SB Admin 2의 너비·높이·여백·반응형 레이아웃은 유지하고 색상만 변경합니다. */
:root {
    color-scheme: dark;
    --page-bg: #20242d;
    --surface-bg: #272d37;
    --bar-bg: #242933;
    --sidebar-bg: #222730;
    --border-color: #363e4b;
    --text-body: #b5bdc9;
    --text-heading: #c4cad4;
    --text-muted: #9aa5b4;
    --accent: #8abdb5;
}

body.dark-theme {
    font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    background-color: var(--page-bg);
    color: var(--text-body);
}

/* 기본 테마의 #wrapper #content-wrapper보다 높은 우선순위가 필요합니다. */
body.dark-theme #wrapper #content-wrapper {
    background: var(--page-bg);
}

.dark-theme .sidebar.bg-gradient-primary {
    background: var(--sidebar-bg);
}

.dark-theme .sidebar .sidebar-brand {
    color: var(--text-heading);
    text-transform: none;
}

.dark-theme .sidebar-brand-icon {
    color: var(--accent);
}

.sidebar-brand-icon .brand-mark {
    display: block;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.dark-theme .footer-brand {
    color: var(--text-heading);
    text-decoration: none;
}

.footer-brand img {
    object-fit: contain;
}

.dark-theme .sidebar .sidebar-divider {
    border-color: var(--border-color);
}

.dark-theme .sidebar .nav-item .nav-link,
.dark-theme .sidebar .nav-item .nav-link i {
    color: var(--text-muted);
}

.dark-theme .sidebar .nav-item .nav-link:hover,
.dark-theme .sidebar .nav-item.active .nav-link {
    color: var(--text-heading);
    background-color: #2c3440;
}

.dark-theme .sidebar .nav-item .nav-link:hover i,
.dark-theme .sidebar .nav-item.active .nav-link i {
    color: var(--accent);
}

.dark-theme .sidebar .collapse-inner {
    background-color: var(--surface-bg);
}

.dark-theme .sidebar .nav-item .collapse .collapse-inner .collapse-item,
.dark-theme .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
    color: #bdc6d2;
}

.dark-theme .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
.dark-theme .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover,
.dark-theme .sidebar .nav-item .collapse .collapse-inner .collapse-item:focus-visible,
.dark-theme .sidebar .nav-item .collapsing .collapse-inner .collapse-item:focus-visible {
    color: #d0d7df;
    background-color: #323b48;
}

.dark-theme .sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.dark-theme .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active,
.dark-theme .sidebar .nav-item .collapse .collapse-inner .collapse-item:active,
.dark-theme .sidebar .nav-item .collapsing .collapse-inner .collapse-item:active {
    color: #a8cec5;
    background-color: #30423f;
}

.dark-theme .topbar.bg-white,
.dark-theme .sticky-footer.bg-white {
    background-color: var(--bar-bg) !important;
    color: var(--text-muted);
}

.dark-theme .shadow {
    box-shadow: none !important;
}

.dark-theme .text-gray-800,
.dark-theme .text-gray-900 {
    color: var(--text-heading) !important;
}

.dark-theme .text-gray-600,
.dark-theme .text-muted {
    color: var(--text-muted) !important;
}

.dark-theme .card {
    background-color: var(--surface-bg);
    border-color: var(--border-color);
}

.dark-theme .card-header {
    background-color: var(--bar-bg);
    border-bottom-color: var(--border-color);
}

.dark-theme .text-primary {
    color: var(--accent) !important;
}

.dark-theme a,
.dark-theme .btn-link {
    color: var(--accent);
}

.dark-theme a:hover,
.dark-theme .btn-link:hover {
    color: #aacfc9;
}

.dark-theme .btn-primary {
    color: #d3e0de;
    background-color: #365c58;
    border-color: #496f69;
}

.dark-theme .btn-primary:hover,
.dark-theme .btn-primary:focus,
.dark-theme .btn-primary:not(:disabled):not(.disabled):active {
    color: #d3e0de;
    background-color: #416b65;
    border-color: #628e86;
    box-shadow: none;
}

.dark-theme .sidebar #sidebarToggle,
.dark-theme .scroll-to-top {
    background-color: #323b48;
    color: var(--text-body);
}

.dark-theme .sidebar #sidebarToggle::after {
    color: var(--text-body);
}

.dark-theme .sidebar #sidebarToggle:hover,
.dark-theme .scroll-to-top:hover {
    background-color: #414d5d;
}

.dark-theme .form-control,
.dark-theme .custom-select {
    color: var(--text-body);
    background-color: var(--page-bg);
    border-color: var(--border-color);
}

.dark-theme .form-control::placeholder {
    color: var(--text-muted);
}

.dark-theme .form-control:focus,
.dark-theme .custom-select:focus {
    color: var(--text-heading);
    background-color: var(--page-bg);
    border-color: var(--accent);
    box-shadow: none;
}

.dark-theme a:focus-visible,
.dark-theme button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}