@charset "utf-8";

body.dark-mode .top-loading-bar {
    background: linear-gradient(90deg, #63a9ff, #3b82f6);
    box-shadow: 0 0 10px rgba(99, 169, 255, .35);
}

body.dark-mode {
    background: #131720;
    color: #e5e7eb;
}


body.dark-mode .dark-toggle .icon-sun {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

body.dark-mode .dark-toggle .icon-moon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
}

body.dark-mode .app-wrap {
    background: #131720;
}

body.dark-mode .top-header {
    border-bottom-color: #2d3748;
    background: #1b2430;
    box-shadow: 0 1px 10px rgba(0,0,0,.35);
}

body.dark-mode .site-logo a,
body.dark-mode .page-title,
body.dark-mode .sub-title,
body.dark-mode .auth-title,
body.dark-mode .form-label,
body.dark-mode .sidebar-user-name,
body.dark-mode .info-box th,
body.dark-mode .util-link,
body.dark-mode .form-table-type th {
    color: #ffffff;
}

body.dark-mode .admin-user-text {
    color: #c8d4f5;
}

body.dark-mode .admin-role-text {
    color: #9fb3e3;
}

body.dark-mode .dark-toggle:hover {
    background: #243041;
}

body.dark-mode .left-sidebar {
    background: #1b2230;
    border-right-color: #2d3748;
}

body.dark-mode .sidebar-sticky {
    background: #1b2230;
}

body.dark-mode .sidebar-user {
    background: #232b3b;
    border-bottom-color: #2d3748;
}


/* 다크모드 */
body.dark-mode .sidebar-menu li a,
body.dark-mode .sidebar-menu li .menu-toggle {
    background: #1b2230;
    color: #d9dee7;
    border-bottom-color: #2d3748;
}

body.dark-mode .sidebar-menu li a:hover,
body.dark-mode .sidebar-menu li .menu-toggle:hover {
    background: #252f40;
}

body.dark-mode .sidebar-menu li a.active,
body.dark-mode .sidebar-menu li .menu-toggle.active {
    background: #111827;
    color: #63a9ff;
}

body.dark-mode .sidebar-menu.depth-2 li a,
body.dark-mode .sidebar-menu.depth-2 li .menu-toggle {
    background: #202938;
}

body.dark-mode .sidebar-menu.depth-3 li a,
body.dark-mode .sidebar-menu.depth-3 li .menu-toggle {
    background: #242d3d;
}

body.dark-mode .sidebar-menu li {
    border-bottom-color: #2d3748;
}

body.dark-mode .sidebar-menu li a {
    background: #1b2230;
    color: #d9dee7;
}

body.dark-mode .sidebar-menu li a:hover {
    background: #252f40;
}

body.dark-mode .sidebar-menu li a.active {
    background: #111827;
    color: #63a9ff;
}

body.dark-mode .main-content {
    background: #131720;
}

body.dark-mode .guest-content {
    background: #131720;
}

body.dark-mode .page-panel {
    border-color: #2d3748;
    background: #1b2230;
}

body.dark-mode .page-title,
body.dark-mode .sub-title {
    color: #f3f4f6;
}

body.dark-mode .info-box {
    border-color: #2d3748;
    background: #111827;
}

body.dark-mode .info-box th,
body.dark-mode .info-box td {
    border-color: #2d3748;
    color: #e5e7eb;
}

body.dark-mode .info-box th {
    background: #243041;
}

body.dark-mode .footer-wrap {
    border-top-color: #2d3748;
    background: #1b2230;
}

body.dark-mode .footer-copy {
    color: #b9c2cd;
}



/* ===== 비로그인 페이지 공통 ===== */
body.dark-mode .guest-content {
    background: #131720;
}

body.dark-mode .auth-wrap,
body.dark-mode .auth-wrap-wide {
    background: transparent;
}

body.dark-mode .auth-box {
    background: #1b2230;
    border-color: #2d3748;
    box-shadow: 0 1px 8px rgba(0,0,0,.25);
}

body.dark-mode .auth-title {
    color: #f3f4f6;
}

body.dark-mode .auth-links a,
body.dark-mode .text-link {
    color: #cfd5df;
}

body.dark-mode .auth-links a:hover,
body.dark-mode .text-link:hover {
    color: #ffffff;
}

body.dark-mode .required .required-mark {
    color: #f87171;
}

body.dark-mode .form-guide-text {
    color: #b9c2cd;
}

/* ===== 약관 ===== */
body.dark-mode .agree-all-box,
body.dark-mode .agree-item {
    border-color: #303744;
    background: #1c2129;
}

body.dark-mode .agree-head {
    border-bottom-color: #303744;
}

body.dark-mode .agree-check {
    color: #f3f4f6;
}

body.dark-mode .agree-box {
    background: #11161d;
    border-top-color: #303744;
}

body.dark-mode .agree-content {
    color: #cfd5df;
}

body.dark-mode .agree-content h4 {
    color: #f3f4f6;
}

body.dark-mode .required-text {
    color: #f87171;
}

body.dark-mode .optional-text {
    color: #63a9ff;
}

/* ===== 회원가입 중복확인/취소 버튼 보정 ===== */
body.dark-mode .btn-secondary {
    border-color: #425066;
    background: #243041;
    color: #e5e7eb;
}

body.dark-mode .btn-secondary:hover {
    background: #2b3a4f;
}



/* =========================
   공통 페이지 구조
========================= */
body.dark-mode .search-panel,
body.dark-mode .form-table-box,
body.dark-mode .table-box {
    border-color: #2d3748;
    background: #1b2230;
}

body.dark-mode .search-panel {
    background: #1f2937;
}

body.dark-mode .search-form-table th,
body.dark-mode .form-table th,
body.dark-mode .list-total {
    color: #cfd5df;
}

body.dark-mode .list-total strong,
body.dark-mode .form-table td,
body.dark-mode .form-text {
    color: #f3f4f6;
}

body.dark-mode .form-help {
    color: #9ca3af;
}

/* 폼 테이블 */
body.dark-mode .form-table th,
body.dark-mode .form-table td {
    border-bottom-color: #253041;
}

body.dark-mode .form-table th {
    background: #243041;
}

body.dark-mode .form-table td {
    background: #111827;
}

/* 리스트 테이블 */
body.dark-mode .table-list th {
    background: #243041;
    color: #f3f4f6;
    border-right-color: #2d3748;
    border-bottom-color: #2d3748;
}

body.dark-mode .table-list td {
    background: #111827;
    color: #e5e7eb;
    border-right-color: #1f2a3a;
    border-bottom-color: #1f2a3a;
}

body.dark-mode .table-list tbody tr:hover td {
    background: #162131;
}

body.dark-mode .table-empty {
    color: #9ca3af;
}

/* 페이지네이션 */
body.dark-mode .page-btn {
    border-color: #334155;
    background: #1b2430;
    color: #dbe4ee;
}

body.dark-mode .page-btn:hover {
    background: #243041;
}

body.dark-mode .page-btn.active {
    border-color: #3b93ee;
    background: #3b93ee;
    color: #ffffff;
}

/* 보조 버튼 */
body.dark-mode .btn.btn-line {
    border-color: #425066;
    background: #243041;
    color: #e5e7eb;
}
body.dark-mode .btn.btn-line:hover {
    background: #2b3a4f;
}

/* =========================
   danger 버튼 (다크모드)
========================= */
body.dark-mode .btn-danger-line {
    border-color: #ef4444;
    color: #f87171;
    background: #1b2230;
}

body.dark-mode .btn-danger-line:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

/* 상태 배지 */
body.dark-mode .status-badge.use {
    background: rgba(22, 163, 74, .18);
    color: #86efac;
}

body.dark-mode .status-badge.stop {
    background: rgba(245, 158, 11, .18);
    color: #fcd34d;
}

body.dark-mode .status-badge.delete {
    background: rgba(239, 68, 68, .18);
    color: #fca5a5;
}

body.dark-mode .status-badge.wait {
    background: rgba(59, 130, 246, .18);
    color: #93c5fd;
}


body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .form-textarea {
    background: #111827;
    border-color: #2d3748;
    color: #e5e7eb;
}

body.dark-mode .form-table th {
    background: #243041;
}

body.dark-mode .form-table td {
    background: #111827;
}

body.dark-mode .table-list th {
    background: #243041;
    color: #f3f4f6;
}

body.dark-mode .table-list td {
    background: #111827;
    color: #e5e7eb;
}

body.dark-mode .table-list tbody tr:hover td {
    background: #162131;
}

/* 테이블 셀용 */
body.dark-mode .td-ellipsis:hover {
    background: #111827;
}




/*
자동연장 관련
*/
body.dark-mode .login-session-box {
    border-color: #2d3748;
    background: #111827;
    color: #e5e7eb;
}

body.dark-mode .login-session-label {
    color: #9ca3af;
}

body.dark-mode .login-session-time {
    color: #f3f4f6;
}

body.dark-mode .login-session-time.warning {
    color: #fbbf24;
}

body.dark-mode .login-session-time.danger {
    color: #f87171;
}