/* =========================================================
   Theme tokens (Light default + [data-theme="dark"] overrides)
   ========================================================= */
:root {
    /* Surfaces */
    --bg-app:        #f9fafb;
    --bg-surface:    #ffffff;       /* 카드/모달 본문 */
    --bg-sidebar:    #ffffff;
    --bg-elevated:   #fafbfc;       /* 살짝 떠보이는 보조 영역 */
    --bg-hover:      #f5f7fc;
    --bg-input:      #ffffff;
    --bg-code:       #f4f5f7;
    --bg-overlay:    rgba(20,30,55,.32); /* 모달/드로우 backdrop */

    /* Borders */
    --border:        #eceef1;
    --border-strong: #d4d6dc;
    --border-input:  #e5e7ec;

    /* Text */
    --text-1:        #1f2733;
    --text-2:        #4b5563;       /* 보조 텍스트 — gray-600, 대비 ~7.5:1 (진하게) */
    --text-mute:     #6b7280;       /* 흐린 라벨/메타 — gray-500, 대비 ~4.6:1 (AA 통과) */
    --text-disabled: #cbd5e1;
    --text-on-brand: #ffffff;

    /* Brand (Opsy blue) */
    --brand:         #2E84D8;
    --brand-deep:    #1B4DA6;
    --brand-soft:    #eef2ff;
    --brand-active-bg:   #e9f2fc;
    --brand-active-text: #1B4DA6;

    /* Semantic accents */
    --accent-green:  #22c55e;
    --accent-green-soft: #dcfce7;
    --accent-green-text: #15803d;
    --accent-red:    #dc2626;
    --accent-red-soft: #fee2e2;
    --accent-red-text: #b91c1c;
    --accent-orange: #f59e0b;
    --accent-orange-soft: #fff7ed;
    --accent-orange-text: #b45309;
    --accent-purple: #7c3aed;
    --accent-purple-soft: #ede9fe;
    --accent-purple-text: #5b21b6;
    --accent-indigo: #4338ca;
    --accent-indigo-soft: #eef2ff;
    --accent-indigo-text: #4338ca;
    --accent-cyan-soft:  #ecfeff;
    --accent-cyan-text:  #0e7490;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(20,30,55,.03);
    --shadow-md: 0 4px 12px rgba(20,30,55,.05);
    --shadow-lg: 0 10px 28px rgba(20,30,55,.12);

    color-scheme: light;
}

[data-theme="dark"] {
    /* Surfaces (Tailwind slate based) */
    --bg-app:        #0f172a;       /* slate-900 */
    --bg-surface:    #1e293b;       /* slate-800 */
    --bg-sidebar:    #020617;       /* slate-950 — 본문보다 더 진해 깊이감 */
    --bg-elevated:   #273449;
    --bg-hover:      #273449;
    --bg-input:      #0f172a;
    --bg-code:       #020617;
    --bg-overlay:    rgba(0,0,0,.62);

    /* Borders */
    --border:        #334155;       /* slate-700 */
    --border-strong: #475569;
    --border-input:  #334155;

    /* Text */
    --text-1:        #f1f5f9;       /* slate-100 */
    --text-2:        #94a3b8;       /* slate-400 */
    --text-mute:     #64748b;
    --text-disabled: #475569;
    --text-on-brand: #ffffff;

    /* Brand (다크에선 더 밝게) */
    --brand:         #60a5fa;       /* blue-400 */
    --brand-deep:    #93c5fd;
    --brand-soft:    rgba(96,165,250,.12);
    --brand-active-bg:   rgba(96,165,250,.18);
    --brand-active-text: #93c5fd;

    /* Semantic accents (다크 대비 강화) */
    --accent-green:  #34d399;
    --accent-green-soft: rgba(34,197,94,.15);
    --accent-green-text: #6ee7b7;
    --accent-red:    #f87171;
    --accent-red-soft: rgba(239,68,68,.15);
    --accent-red-text: #fca5a5;
    --accent-orange: #fbbf24;
    --accent-orange-soft: rgba(245,158,11,.15);
    --accent-orange-text: #fcd34d;
    --accent-purple: #a78bfa;
    --accent-purple-soft: rgba(124,58,237,.18);
    --accent-purple-text: #c4b5fd;
    --accent-indigo: #a5b4fc;
    --accent-indigo-soft: rgba(99,102,241,.18);
    --accent-indigo-text: #c7d2fe;
    --accent-cyan-soft:  rgba(6,182,212,.18);
    --accent-cyan-text:  #7dd3fc;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(0,0,0,.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,.5);
    --shadow-lg: 0 10px 28px rgba(0,0,0,.6);

    color-scheme: dark;
}

/* =========================================================
   Base
   ========================================================= */
body {
    background-color: var(--bg-app);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-1);
    font-size: 15px;
    transition: background-color .2s ease, color .2s ease;
}

/* 초기 상태: 화면을 숨김 */
body {
    opacity: 0;
    transition: opacity 0.4s ease-in-out; /* 0.4초 동안 부드럽게 나타남 */
    visibility: hidden; /* 클릭 방지 */
}

/* 로딩 완료 시 적용할 클래스 */
body.loaded {
    opacity: 1;
    visibility: visible;
}

#wrapper {
    display: flex;
    overflow-x: hidden;
    background-color: var(--bg-app);
}

#sidebar-wrapper {
    min-height: 100vh;
    /* width 는 부모 .ocula-sidebar 가 결정 (.ocula-sidebar #sidebar-wrapper { width:100% !important }) — 여긴 default 만 */
    width: 250px;
    transition: margin .25s ease-out, background-color .2s ease, border-color .2s ease;
    background-color: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

#sidebar-wrapper .sidebar-heading {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--brand);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

#sidebar-wrapper .list-group {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-sidebar);
}

#sidebar-wrapper .list-group-item {
    border: 0;
    color: var(--text-2);
    font-weight: 500;
    background-color: transparent;
    transition: background-color .12s ease, color .12s ease;
    position: relative;
}
#sidebar-wrapper .list-group-item:hover {
    background-color: var(--bg-hover);
    color: var(--text-1);
}
#sidebar-wrapper .list-group-item.active {
    background-color: var(--brand-active-bg);
    color: var(--brand-active-text);
    font-weight: 600;
}
/* 활성 항목 좌측 보더 액센트 (오른쪽 → 왼쪽으로 변경, 모던 패턴) */
#sidebar-wrapper .list-group-item.active::before {
    content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--brand);
}
#sidebar-wrapper .list-group-item .bi-chevron-down {
    transition: transform .2s ease;
}
#sidebar-wrapper .list-group-item[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

#page-content-wrapper {
    flex: 1;
    min-width: 0;
    background-color: var(--bg-app);
}

.navbar {
    height: 56px;
    /* 본문과 같은 톤 + 하단 보더 — 모던 어드민 패턴 (Linear, Notion) */
    background-color: var(--bg-app) !important;
    border-bottom: 1px solid var(--border) !important;
    transition: background-color .2s ease, border-color .2s ease;
}

/* ─── 사이드바 안의 Bootstrap 유틸 클래스 무효화 ───────────────
   .bg-light(서브메뉴 indent 영역) 가 하드코딩 회색이라
   다크 모드에서 밝은 띠가 보이는 문제 해결.            */
#sidebar-wrapper .bg-light {
    background-color: transparent !important;
}
#sidebar-wrapper .text-primary {
    color: var(--brand-active-text) !important;
}
/* 서브메뉴 indent 영역 hover 시 살짝 강조 */
#sidebar-wrapper .list-group-flush > .list-group-item-action:hover {
    background-color: var(--bg-hover);
    color: var(--text-1);
}

.btn-primary {
    background-color: var(--brand);
    border-color: var(--brand);
}
.btn-primary:hover {
    background-color: var(--brand-deep);
    border-color: var(--brand-deep);
}

/* 메인 컨텐츠 텍스트 기본 색상 */
main.container-fluid { color: var(--text-1); }
.lead, .text-muted { color: var(--text-2) !important; }
hr { border-color: var(--border); }
code { background: var(--bg-code); color: var(--text-1); padding: .1rem .35rem; border-radius: 4px; }

/* --- 테이블 스타일 최종본 --- */
/* 테이블 헤더 */
.table > thead {
    vertical-align: middle;
    background-color: var(--bg-surface);
    border-bottom: 2px solid var(--border-strong);
}
.table > thead th {
    color: var(--text-2);
    font-weight: 600;
    border: none;
}

/* 테이블 기본 행 */
.table > tbody > tr {
    vertical-align: middle; 
}

/* ▼▼▼ 상세 정보 행(details-row)은 줄무늬 스타일을 적용받지 않도록 수정 ▼▼▼ */
.table-striped > tbody > tr.details-row:nth-of-type(odd) > td {
    --bs-table-accent-bg: transparent;
}

/* 호버 효과 */
.table-hover > tbody > tr.main-row:hover {
    background-color: #f8f9fa;
    --bs-table-accent-bg: #f8f9fa;
}
/* --- 테이블 스타일 최종본 끝 --- */

/* 펼쳐지는 상세 정보 행의 배경색을 기본 줄무늬 색상과 동일하게 설정 */
.details-row > td {
    background-color: var(--bs-table-striped-bg);
    border: 1px;
}
/* --- 테이블 스타일 최종본 끝 --- */

/* incident_list.html 최종 아코디언 스타일 */
.main-row {
    cursor: pointer;
}

/* ▼▼▼ 화살표 기본 상태 및 애니메이션 ▼▼▼ */
.main-row .bi-chevron-right {
    transition: transform 0.35s ease;
}

/* ▼▼▼ 열렸을 때 (aria-expanded="true") 화살표를 90도 회전 ▼▼▼ */
.main-row[aria-expanded="true"] .bi-chevron-right::before {
    transform: rotate(90deg);
    transition: transform 0.35s ease;
}

.main-row[aria-expanded="false"] .bi-chevron-right::before {
    transform: rotate(0deg);
    transition: transform 0.35s ease;
}

.main-row[aria-expanded="true"] {
    border-bottom-color: transparent !important;
}

.details-row > td {
    padding: 0 !important;
    border-top: none !important;
}
.collapse-content {
    background-color: #f8f9fa; /* 배경색을 연한 회색으로 변경 */
    border-bottom: 1px solid #dee2e6;
}
.collapse-content.collapsing {
    transition: height 0.35s ease !important;
}
.details-container {
    padding: 1rem 1.5rem;
}

/* ▼▼▼ 상세 정보 창 스타일 추가 ▼▼▼ */
.details-content h6 {
    font-weight: bold;
    color: #509ee3; /* 파란색 제목 */
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #d0d7de; /* 제목 아래 구분선 */
}
.details-content dt {
    font-weight: 600; /* 라벨 굵게 */
    color: #555;
}
.details-content dd {
    color: #333;
}
/* ▲▲▲ 상세 정보 창 스타일 추가 ▲▲▲ */

/* (구버전 토글 — 새 layout 으로 대체됨, 무력화) */

input[readonly],
textarea[readonly] {
    background-color: #e9ecef !important;
    cursor: not-allowed;
}
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.loading-overlay .spinner-border {
    width: 3rem;
    height: 3rem;
}

.details-wrapper {
    padding: 1rem 1.5rem;
}
.details-content {
    flex-grow: 1; /* 남는 공간을 모두 차지 */
    padding: 0;
}
.details-actions {
    display: flex;
    justify-content: flex-end; /* 오른쪽 정렬 */
    gap: 0.5rem; /* 버튼 사이 여백 */
    padding-top: 0.5rem; /* 구분선과의 여백 */
}

/* Date Range Picker 달력 스타일 */
.daterangepicker {
    border: 1px solid #dee2e6; /* 연한 회색 테두리 추가 */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* 그림자 효과 */
    border-radius: 0.375rem; /* 모서리를 약간 둥글게 */
}

/* 스크롤바가 생겨도 화면이 밀리지 않도록 공간을 미리 확보 */
html {
    scrollbar-gutter: stable;
}


/* =========================================
       1. 캘린더(Heatmap) & 공통 그리드 스타일
       ========================================= */
    .heatmap-container {
        display: flex;
        gap: 20px;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .month-block {
        flex: 1;
        min-width: 100px; /* 너무 작아지지 않게 최소 너비 설정 */
    }
    .month-title {
        font-weight: bold;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr); /* 7일 */
        gap: 4px;
    }
    .day-cell {
        aspect-ratio: 1; /* 정사각형 유지 */
        border-radius: 4px;
        background-color: #f0f0f0; opacity : 1; /* 데이터 없음 (기본 회색) */
        cursor: pointer;
        transition: transform 0.1s, border 0.1s;
    }
    .day-cell:hover {
        transform: scale(1.15);
        border: 1px solid #aaa;
        z-index: 10;
    }
    .day-cell.empty {
        background-color: transparent;
        cursor: default;
        pointer-events: none;
    }
    
    /* =========================================
       2. 상태별 배경 색상 (Cell & Bar)
       ========================================= */
    /* 정상 (Operational) - 짙은 남색 */
    .status-ok, .bar-ok { background-color: #0d285b; }
    
    /* P3, P4 (Partial Outage) - 주황색 */
    .status-warning, .bar-warning { background-color: #fd7e14; }
    
    /* P1, P2 (Major Outage) - 빨간색 */
    .status-critical, .bar-critical { background-color: #dc3545; }
    
    /* Non-Ticket Issue - 짙은 남색 0.6 */
    .status-issue, .bar-issue { background-color: #0d285b; opacity : 0.6; } 

    /* 미래 날짜 */
    .status-future { background-color: #f0f0f0; opacity: 1; cursor: default; }

    /* =========================================
       3. 텍스트 전용 스타일 (배경 투명 강제)
       ========================================= */
    .text-operational { color: #0d285b !important; background-color: transparent !important; }
    .text-issue       { color: #0d285b !important; background-color: transparent !important; opacity: 0.6 !important; }
    .text-outage-partial { color: #fd7e14 !important; background-color: transparent !important; }
    .text-outage-major   { color: #dc3545 !important; background-color: transparent !important; }

    /* =========================================
       4. 90일 히스토리 바 스타일
       ========================================= */
    .history-bar-container {
        display: flex;
        gap: 2px;     /* 바 사이 간격 */
        height: 40px; /* 바 높이 */
        align-items: flex-end;
    }
    .history-bar {
        flex: 1; /* 너비 균등 분배 */
        height: 100%;
        border-radius: 2px;
        transition: all 0.2s;
    }
    .history-bar:hover {
        transform: scaleY(1.1);
        opacity: 0.9;
    }

    /* =========================================
       5. 팝오버(Tooltip) 커스텀
       ========================================= */
    .popover {
        max-width: 500px !important;
        width: auto;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border: 1px solid #ddd;
    }
    .popover-header {
        background-color: #f8f9fa;
        font-weight: bold;
        border-bottom: 1px solid #ebebeb;
        font-size: 1rem;
    }
    .popover-body {
        font-size: 0.9em;
        padding: 12px;
        color: #333;
    }

    /* 뱃지 스타일 */
    .badge-p1 { background-color: #dc3545; color: white; }
    .badge-p2 { background-color: #fd7e14; color: white; }
    .badge-p3 { background-color: #ffc107; color: black; }
    .badge-p4 { background-color: #17a2b8; color: white; }
    .badge-issue { background-color: #0d285b; color: white; opacity: 0.6; }

    .text-orange {
        color: #fd7e14 !important; /* 진한 주황색 */
    }

    /* =========================================
       6. Tagify — 모던 톤 (인디고 액센트, 둥근 칩, 부드러운 포커스)
       ========================================= */
    .tagify {
        --tag-bg: #eef2ff;
        --tag-hover: #e0e7ff;
        --tag-text-color: #4338ca;
        --tag-text-color--edit: #1f2733;
        --tag-pad: .3em .65em;
        --tag-inset-shadow-size: 1.1em;
        --tag-remove-bg: rgba(67,56,202,.12);
        --tag-remove-btn-color: #4338ca;
        --tag-remove-btn-bg: transparent;
        --tag-remove-btn-bg--hover: #c7d2fe;
        --tags-border-color: #e5e7ec;
        --tags-hover-border-color: #c7d2fe;
        --tags-focus-border-color: #a5b4fc;
        --tag-invalid-color: #b91c1c;
        --tag-invalid-bg: #fee2e2;
        border-radius: 10px;
        transition: border-color .12s ease, box-shadow .12s ease;
    }
    .tagify:focus-within {
        box-shadow: 0 0 0 3px rgba(99,102,241,.15);
    }
    .tagify__tag {
        border-radius: 999px;
        margin: 4px 2px 4px 4px;
    }
    .tagify__tag > div {
        font-size: .82rem;
        font-weight: 600;
        line-height: 1.2;
        padding: var(--tag-pad);
    }
    .tagify__tag__removeBtn {
        font-size: 1rem;
        line-height: 1;
        opacity: .7;
        transition: opacity .12s, background-color .12s;
    }
    .tagify__tag__removeBtn:hover { opacity: 1; }
    .tagify__input {
        padding: .42em .55em;
        font-size: .85rem;
        color: #1f2733;
    }
    .tagify__input::before {
        color: #aab0bb;
        font-size: .85rem;
    }

    /* 무효 칩(빨강) — alerts 이메일 검증 등 */
    .tagify__tag.tagify--notAllowed {
        background: var(--tag-invalid-bg);
        color: var(--tag-invalid-color);
    }
    .tagify__tag.tagify--notAllowed > div { color: var(--tag-invalid-color); }

    /* 드롭다운(자동완성/whitelist) */
    .tagify__dropdown {
        border: 1px solid #eceef1;
        border-radius: 12px;
        box-shadow: 0 10px 28px rgba(20,30,55,.12);
        overflow: hidden;
        padding: .3rem;
    }
    .tagify__dropdown__item {
        border-radius: 8px;
        padding: .35rem .7rem;
        font-size: .85rem;
        color: #1f2733;
        margin: .1rem 0;
    }
    .tagify__dropdown__item--active,
    .tagify__dropdown__item:hover {
        background: #eef2ff;
        color: #4338ca;
    }

    /* tags-look (Incident 모달처럼 인라인 dropdown 모드) — 칩 형태 추천 항목 */
    .tagify.tags-look .tagify__dropdown__item {
        display: inline-block;
        vertical-align: middle;
        border: 1px solid var(--border-input);
        background: var(--bg-surface);
        margin: .2em;
        padding: .25em .65em;
        font-size: .8rem;
        font-weight: 500;
        color: var(--text-2);
        transition: all .12s ease;
    }
    .tagify.tags-look .tagify__dropdown__item--active,
    .tagify.tags-look .tagify__dropdown__item:hover {
        background: #eef2ff;
        color: #4338ca;
        border-color: #a5b4fc;
    }


    /* =========================================
       7. Master Data CRUD 페이지 (모던 톤, .md-* 접두) — 변수 기반
       ========================================= */
    .md-wrap { width:100%; max-width:880px; }
    .md-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap;
               padding-bottom:1rem; margin-bottom:1.25rem; border-bottom:1px solid var(--border); }
    .md-head h2 { font-weight:700; letter-spacing:-.02em; color:var(--text-1); }
    .md-head .lead { color:var(--text-2); font-size:.9rem; margin:0; }
    .md-head .count { background:var(--bg-elevated); color:var(--text-2); font-size:.78rem; font-weight:600;
                      padding:.15rem .55rem; border-radius:999px; margin-left:.5rem; vertical-align:middle; }

    .md-info { display:flex; gap:.7rem; padding:.75rem 1rem; background:var(--brand-soft); border:1px solid var(--border);
               border-radius:10px; margin-bottom:1rem; font-size:.82rem; color:var(--brand-active-text); }
    .md-info > i { flex-shrink:0; margin-top:.15rem; color:var(--brand); font-size:.95rem; }
    .md-info ul { margin:0; padding-left:1.1rem; }
    .md-info li:not(:last-child) { margin-bottom:.2rem; }

    .md-toolbar { margin-bottom:1rem; }
    .md-search { position:relative; max-width:340px; }
    .md-search input { width:100%; background:var(--bg-input); border:1px solid var(--border-input); border-radius:10px;
                       padding:.5rem .85rem .5rem 2.1rem; font-size:.84rem; color:var(--text-1);
                       transition:border-color .12s ease, box-shadow .12s ease, background-color .2s ease; }
    .md-search input::placeholder { color:var(--text-mute); }
    .md-search input:focus { outline:0; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
    .md-search .ico { position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
                      color:var(--text-mute); pointer-events:none; font-size:.95rem; }
    .md-search .clear { position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
                        background:transparent; border:0; color:var(--text-mute); cursor:pointer; padding:.1rem .25rem;
                        font-size:.85rem; display:none; }
    .md-search.has-val .clear { display:inline-block; }

    .md-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; overflow:hidden;
               box-shadow:var(--shadow-sm); }
    .md-table { width:100%; margin:0; border-collapse:separate; border-spacing:0; }
    .md-table thead th { font-size:.72rem; font-weight:700; color:var(--text-mute); letter-spacing:.06em;
                         text-transform:uppercase; padding:.85rem 1rem; border-bottom:1px solid var(--border);
                         background:var(--bg-elevated); text-align:left; }
    .md-table tbody tr { transition:background-color .12s ease; }
    .md-table tbody tr:hover { background:var(--bg-elevated); }
    .md-table tbody tr.hidden { display:none; }
    .md-table tbody td { padding:.75rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle;
                         font-size:.88rem; color:var(--text-1); }
    .md-table tbody tr:last-child td { border-bottom:0; }
    .md-table .col-id { width:80px; color:var(--text-mute); font-variant-numeric:tabular-nums; }
    .md-table .col-name { font-weight:600; }
    .md-table .col-act { width:96px; text-align:right; padding-right:1.1rem; }

    .md-row-actions { display:inline-flex; gap:.25rem; opacity:0; transition:opacity .12s ease; }
    .md-table tbody tr:hover .md-row-actions { opacity:1; }
    .md-row-actions .btn { padding:.28rem .5rem; }

    .md-empty { text-align:center; padding:2.5rem 1rem; color:var(--text-mute); }
    .md-empty i { font-size:2rem; opacity:.5; display:block; margin-bottom:.5rem; }
    .md-empty p { margin:0; }

    #mdModal .modal-content,
    #mdConfirmModal .modal-content { border-radius:16px; background:var(--bg-surface); color:var(--text-1); border:1px solid var(--border); }
    #mdModal .modal-header,
    #mdConfirmModal .modal-header { border-bottom:1px solid var(--border); padding:1.1rem 1.4rem; }
    #mdModal .modal-body,
    #mdConfirmModal .modal-body { padding:1.2rem 1.4rem; }
    #mdModal .modal-footer,
    #mdConfirmModal .modal-footer { border-top:1px solid var(--border); padding:.85rem 1.4rem;
                                    background:var(--bg-elevated); border-radius:0 0 16px 16px; }
    #mdModal .form-label { font-weight:600; font-size:.83rem; color:var(--text-2); }

    .md-toast { position:fixed; bottom:1.5rem; right:1.5rem; z-index:1080; }

    /* =========================================
       8. Bootstrap component overrides — 다크 모드 적용
       ========================================= */
    .modal-content { background-color: var(--bg-surface); color: var(--text-1); border-color: var(--border); }
    .modal-header, .modal-footer { border-color: var(--border) !important; }
    /* sticky 상단 바(.ocula-topbar z-index:1115) 위로 — 기본(1050/1055)이면 모달이 상단 바 뒤로 깔림 */
    .modal-backdrop { z-index: 1116; }
    .modal { z-index: 1117; }
    .form-control, .form-select {
        background-color: var(--bg-input);
        border-color: var(--border-input);
        color: var(--text-1);
    }
    .form-control::placeholder { color: var(--text-mute); }
    .form-control:focus, .form-select:focus {
        background-color: var(--bg-input);
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-soft);
        color: var(--text-1);
    }
    .form-control[readonly], .form-control:disabled,
    .form-select:disabled { background-color: var(--bg-elevated); }
    .input-group-text {
        background-color: var(--bg-elevated);
        border-color: var(--border-input);
        color: var(--text-2);
    }
    .form-text { color: var(--text-mute); }
    .form-label { color: var(--text-1); }

    .card { background-color: var(--bg-surface); border-color: var(--border); color: var(--text-1); }
    .card-header, .card-footer { background-color: var(--bg-elevated); border-color: var(--border); }

    .btn-light { background-color: var(--bg-elevated); border-color: var(--border); color: var(--text-1); }
    .btn-light:hover { background-color: var(--bg-hover); color: var(--text-1); }
    .btn-secondary { background-color: var(--bg-elevated); border-color: var(--border-strong); color: var(--text-1); }
    .btn-secondary:hover { background-color: var(--bg-hover); color: var(--text-1); }
    .btn-outline-secondary { color: var(--text-2); border-color: var(--border-strong); }
    .btn-outline-secondary:hover { background-color: var(--bg-hover); border-color: var(--border-strong); color: var(--text-1); }
    .btn-close { filter: var(--btn-close-filter, none); }
    [data-theme="dark"] .btn-close { filter: invert(1) brightness(1.4); }

    .dropdown-menu {
        background-color: var(--bg-surface);
        border-color: var(--border);
        box-shadow: var(--shadow-lg);
        color: var(--text-1);
    }
    .dropdown-item { color: var(--text-1); }
    .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bg-hover); color: var(--text-1); }
    .dropdown-divider { border-color: var(--border); }
    .dropdown-toggle { color: var(--text-1); }

    .alert-danger { background-color: var(--accent-red-soft); border-color: var(--accent-red-soft); color: var(--accent-red-text); }
    .alert-success { background-color: var(--accent-green-soft); border-color: var(--accent-green-soft); color: var(--accent-green-text); }
    .alert-warning { background-color: var(--accent-orange-soft); border-color: var(--accent-orange-soft); color: var(--accent-orange-text); }
    .alert-info { background-color: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-active-text); }

    .form-check-input { background-color: var(--bg-input); border-color: var(--border-input); }
    .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

    /* 다크 모드일 때 Tagify 토큰 색 조정 */
    [data-theme="dark"] .tagify {
        --tag-bg: rgba(96,165,250,.18);
        --tag-hover: rgba(96,165,250,.28);
        --tag-text-color: #c7d2fe;
        --tag-text-color--edit: #f1f5f9;
        --tag-remove-btn-color: #c7d2fe;
        --tag-remove-btn-bg--hover: rgba(99,102,241,.28);
        --tags-border-color: var(--border-input);
        --tags-hover-border-color: var(--brand);
        --tags-focus-border-color: var(--brand);
        background: var(--bg-input);
    }
    [data-theme="dark"] .tagify__input { color: var(--text-1); }
    [data-theme="dark"] .tagify__input::before { color: var(--text-mute); }
    [data-theme="dark"] .tagify__dropdown {
        background: var(--bg-surface);
        border-color: var(--border);
        color: var(--text-1);
    }
    [data-theme="dark"] .tagify.tags-look .tagify__dropdown__item {
        background: var(--bg-input);
        border-color: var(--border-input);
        color: var(--text-2);
    }
    [data-theme="dark"] .tagify.tags-look .tagify__dropdown__item--active,
    [data-theme="dark"] .tagify.tags-look .tagify__dropdown__item:hover {
        background: var(--brand-soft);
        color: var(--brand-active-text);
        border-color: var(--brand);
    }


    /* Master Data 통합 페이지 (사이드 메뉴 + 본문 레이아웃) */
    .md-page-head { padding-bottom:1rem; margin-bottom:1.25rem; border-bottom:1px solid #eceef1; }
    .md-page-head h2 { font-weight:700; letter-spacing:-.02em; }
    .md-page-head .lead { color:#6c757d; font-size:.9rem; margin:0; }

    .md-page { display:flex; gap:1.5rem; align-items:flex-start; }
    .md-sidenav { flex:0 0 220px; position:sticky; top:1rem; }
    .md-sidenav h3 { font-size:.7rem; font-weight:700; color:#8a909a; letter-spacing:.08em;
                     text-transform:uppercase; margin:0 .5rem .55rem; }
    .md-sidenav ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.15rem; }
    .md-sidenav a {
        display:flex; align-items:center; padding:.55rem .75rem; border-radius:8px;
        font-size:.88rem; font-weight:500; color:#5b6370; text-decoration:none;
        transition:background-color .12s ease, color .12s ease;
    }
    .md-sidenav a:hover { background:#f5f7fc; color:#1f2733; }
    .md-sidenav a.active { background:#eef2ff; color:#4338ca; font-weight:700; }
    .md-sidenav a.active i { color:#4338ca; }

    .md-page-main { flex:1; min-width:0; }
    .md-section { display:none; }
    .md-section.active { display:block; }


    /* =========================================
       9. 다크 모드 — 페이지 인라인 스타일 호환 오버라이드
          (각 페이지 inline <style> 의 하드코딩 색상에 다크 옵션 부여)
       ========================================= */
    [data-theme="dark"] {
        /* 공통 카드/테이블/입력 — prefix 다양해도 패턴 동일 */
    }
    /* 카드 / 패널 surfaces */
    [data-theme="dark"] .iss-table-wrap,
    [data-theme="dark"] .iss-card,
    [data-theme="dark"] .inc-table-wrap,
    [data-theme="dark"] .inc-mcard,
    [data-theme="dark"] .inc-section,
    [data-theme="dark"] .al-card,
    [data-theme="dark"] .al-conn,
    [data-theme="dark"] .al-stat,
    [data-theme="dark"] .al-table-wrap,
    [data-theme="dark"] .ds-card,
    [data-theme="dark"] .ds-stat,
    [data-theme="dark"] .ds-conn,
    [data-theme="dark"] .um-card,
    [data-theme="dark"] .um-stat,
    [data-theme="dark"] .it-frame,
    [data-theme="dark"] .dd-frame {
        background:var(--bg-surface) !important;
        border-color:var(--border) !important;
        color:var(--text-1);
        box-shadow:var(--shadow-sm);
    }

    /* Drawer (Issue / Incident) */
    [data-theme="dark"] .iss-drawer,
    [data-theme="dark"] .inc-drawer {
        background:var(--bg-surface) !important;
        color:var(--text-1);
        box-shadow:var(--shadow-lg);
    }
    [data-theme="dark"] .iss-d-head,
    [data-theme="dark"] .iss-d-foot,
    [data-theme="dark"] .inc-d-head,
    [data-theme="dark"] .inc-d-foot { border-color:var(--border) !important; }
    [data-theme="dark"] .iss-d-foot,
    [data-theme="dark"] .inc-d-foot { background:var(--bg-elevated) !important; }
    [data-theme="dark"] .iss-d-loader,
    [data-theme="dark"] .inc-d-loader { background:rgba(15,23,42,.86) !important; }
    [data-theme="dark"] .iss-backdrop,
    [data-theme="dark"] .inc-backdrop { background:var(--bg-overlay) !important; }

    /* 테이블 헤더 + 행 */
    [data-theme="dark"] .iss-table thead th,
    [data-theme="dark"] .inc-table thead th,
    [data-theme="dark"] .al-table thead th,
    [data-theme="dark"] .um-table thead th,
    [data-theme="dark"] .ds-table thead th {
        background:var(--bg-elevated) !important;
        border-bottom-color:var(--border) !important;
        color:var(--text-mute) !important;
    }
    [data-theme="dark"] .iss-table tbody td,
    [data-theme="dark"] .inc-table tbody td,
    [data-theme="dark"] .al-table tbody td,
    [data-theme="dark"] .um-table tbody td,
    [data-theme="dark"] .ds-table tbody td {
        border-bottom-color:var(--border) !important;
        color:var(--text-1) !important;
    }
    [data-theme="dark"] .iss-table tbody tr:hover,
    [data-theme="dark"] .inc-table tbody tr:hover,
    [data-theme="dark"] .al-table tbody tr:hover,
    [data-theme="dark"] .um-table tbody tr:hover,
    [data-theme="dark"] .ds-table tbody tr:hover { background:var(--bg-elevated) !important; }
    [data-theme="dark"] .iss-table tbody tr.active,
    [data-theme="dark"] .inc-table tbody tr.active { background:var(--brand-active-bg) !important; }

    /* 필터/검색 input */
    [data-theme="dark"] .iss-search input,
    [data-theme="dark"] .inc-search input,
    [data-theme="dark"] .um-search input {
        background:var(--bg-input) !important;
        border-color:var(--border-input) !important;
        color:var(--text-1) !important;
    }
    [data-theme="dark"] .iss-search .ico,
    [data-theme="dark"] .inc-search .ico,
    [data-theme="dark"] .um-search .ico { color:var(--text-mute) !important; }

    /* 필터 칩 버튼 */
    [data-theme="dark"] .iss-fbtn,
    [data-theme="dark"] .inc-fbtn {
        background:var(--bg-surface) !important;
        border-color:var(--border-input) !important;
        color:var(--text-2) !important;
    }
    [data-theme="dark"] .iss-fbtn:hover,
    [data-theme="dark"] .inc-fbtn:hover {
        background:var(--bg-hover) !important;
        border-color:var(--brand) !important;
    }
    [data-theme="dark"] .iss-fbtn.active,
    [data-theme="dark"] .inc-fbtn.active {
        background:var(--brand-soft) !important;
        border-color:var(--brand) !important;
        color:var(--brand-active-text) !important;
    }
    [data-theme="dark"] .iss-fdrop,
    [data-theme="dark"] .inc-fdrop {
        background:var(--bg-surface) !important;
        border-color:var(--border) !important;
        color:var(--text-1) !important;
    }
    [data-theme="dark"] .iss-fdrop .dropdown-item,
    [data-theme="dark"] .inc-fdrop .dropdown-item { color:var(--text-1) !important; }
    [data-theme="dark"] .iss-fdrop .dropdown-item:hover,
    [data-theme="dark"] .inc-fdrop .dropdown-item:hover { background:var(--bg-hover) !important; }
    [data-theme="dark"] .iss-fdrop .dropdown-item.sel,
    [data-theme="dark"] .inc-fdrop .dropdown-item.sel { background:var(--brand-soft) !important; color:var(--brand-active-text) !important; }
    [data-theme="dark"] .iss-fdrop.multi .footer,
    [data-theme="dark"] .inc-fdrop.multi .footer {
        background:var(--bg-elevated) !important; border-color:var(--border) !important;
    }
    [data-theme="dark"] .iss-fdrop.multi .footer button,
    [data-theme="dark"] .inc-fdrop.multi .footer button { color:var(--text-2) !important; }

    /* 디테일 본문 (Issue/Incident 드로우 안 카드 등) */
    [data-theme="dark"] .iss-desc,
    [data-theme="dark"] .inc-section,
    [data-theme="dark"] .iss-section,
    [data-theme="dark"] #issueModal .iss-section,
    [data-theme="dark"] #incidentModal .inc-msec {
        background:var(--bg-elevated) !important;
        border-color:var(--border) !important;
        color:var(--text-1) !important;
    }

    /* 빈 상태 */
    [data-theme="dark"] .iss-empty,
    [data-theme="dark"] .inc-empty,
    [data-theme="dark"] .al-empty,
    [data-theme="dark"] .um-empty,
    [data-theme="dark"] .ds-empty,
    [data-theme="dark"] .md-empty { color:var(--text-mute) !important; }

    /* Tagify wrapper bg in dark already overridden — no extra needed */

    /* Code-block style (모노스페이스 박스) — bg-code (slate-950 ≈ 검정) 대신 elevated 톤으로
       URL/host 표시할 때 너무 진하지 않게 */
    [data-theme="dark"] .ds-meta code,
    [data-theme="dark"] .iss-sub code,
    [data-theme="dark"] .al-sub code,
    [data-theme="dark"] .iss-desc code,
    [data-theme="dark"] .al-meta code,
    [data-theme="dark"] .iss-meta code {
        background: rgba(148,163,184,.12) !important;   /* slate-400 12% — 부드러운 박스 */
        color: var(--text-1) !important;
    }

    /* 카드 footer 보더 — 인라인 #f1f2f4 가 다크에서 너무 밝게 떠 보이는 문제 */
    [data-theme="dark"] .ds-foot,
    [data-theme="dark"] .al-foot,
    [data-theme="dark"] .iss-row,
    [data-theme="dark"] .iss-detail {
        border-color: var(--border) !important;
    }
    [data-theme="dark"] .iss-detail { border-top-color: var(--border) !important; }

    /* 상태 핀 (Connected / Failed / Untested / ...) — 다크 친화적인 톤 */
    [data-theme="dark"] .ds-pill.connected,
    [data-theme="dark"] .al-pill.ok,
    [data-theme="dark"] .um-pill.st-active {
        background: var(--accent-green-soft) !important;
        color: var(--accent-green-text) !important;
    }
    [data-theme="dark"] .ds-pill.failed,
    [data-theme="dark"] .al-pill.bad,
    [data-theme="dark"] .um-pill.st-locked {
        background: var(--accent-red-soft) !important;
        color: var(--accent-red-text) !important;
    }
    [data-theme="dark"] .ds-pill.untested,
    [data-theme="dark"] .al-pill.idle,
    [data-theme="dark"] .um-pill.role-user {
        background: rgba(148,163,184,.18) !important;
        color: var(--text-2) !important;
    }
    [data-theme="dark"] .ds-pill.disconnected {
        background: var(--accent-orange-soft) !important;
        color: var(--accent-orange-text) !important;
    }

    /* 카드 안 사용 칩들 (type/cat/cbu/priority) — 다크에서 더 부드럽게 */
    [data-theme="dark"] .iss-pill.type,
    [data-theme="dark"] .inc-pill.type,
    [data-theme="dark"] .al-pill.type {
        background: var(--accent-indigo-soft) !important;
        color: var(--accent-indigo-text) !important;
    }
    [data-theme="dark"] .iss-pill.cat,
    [data-theme="dark"] .inc-pill.cat {
        background: var(--accent-orange-soft) !important;
        color: var(--accent-orange-text) !important;
    }
    [data-theme="dark"] .iss-pill.cbu,
    [data-theme="dark"] .inc-pill.cbu {
        background: var(--accent-cyan-soft) !important;
        color: var(--accent-cyan-text) !important;
    }
    [data-theme="dark"] .um-pill.role-admin {
        background: var(--accent-purple-soft) !important;
        color: var(--accent-purple-text) !important;
    }
    [data-theme="dark"] .inc-pill.empty,
    [data-theme="dark"] .iss-pill.empty {
        background: rgba(148,163,184,.12) !important;
        color: var(--text-mute) !important;
    }

    /* Priority pills (P1/P2/P3/P4) — 다크용 톤 다운 */
    [data-theme="dark"] .inc-pill.p1 { background: var(--accent-red-soft) !important; color: var(--accent-red-text) !important; }
    [data-theme="dark"] .inc-pill.p2 { background: var(--accent-orange-soft) !important; color: var(--accent-orange-text) !important; }
    [data-theme="dark"] .inc-pill.p3 { background: rgba(245,158,11,.18) !important; color: #fcd34d !important; }
    [data-theme="dark"] .inc-pill.p4 { background: rgba(59,130,246,.18) !important; color: #93c5fd !important; }

    /* Drawer header status chip (Open/Completed) */
    [data-theme="dark"] .inc-status-chip.open { background: var(--accent-green-soft) !important; color: var(--accent-green-text) !important; }
    [data-theme="dark"] .inc-status-chip.completed { background: rgba(148,163,184,.18) !important; color: var(--text-2) !important; }
    [data-theme="dark"] .inc-tno {
        background: transparent !important;
        color: var(--text-1) !important;
    }

    /* 인라인 스타일이 자체 color 룰로 td 상속을 덮어쓰는 텍스트들 — 강제 라이트 톤 */
    [data-theme="dark"] .iss-title,
    [data-theme="dark"] .iss-name,
    [data-theme="dark"] .iss-title-cell .ttx,
    [data-theme="dark"] .iss-d-title,
    [data-theme="dark"] .iss-tl-meta .val,
    [data-theme="dark"] .iss-desc,
    [data-theme="dark"] .inc-name,
    [data-theme="dark"] .inc-title-cell .ttx,
    [data-theme="dark"] .inc-d-title,
    [data-theme="dark"] .inc-tl-meta .val,
    [data-theme="dark"] .inc-section .v,
    [data-theme="dark"] .inc-mcard .v,
    [data-theme="dark"] .al-name,
    [data-theme="dark"] .al-d-title,
    [data-theme="dark"] .ds-name,
    [data-theme="dark"] .um-table tbody td,
    [data-theme="dark"] .ds-table tbody td {
        color: var(--text-1) !important;
    }

    /* "missing/empty" placeholder는 흐리게 */
    [data-theme="dark"] .iss-tl-meta .val.missing,
    [data-theme="dark"] .inc-tl-meta .val.missing,
    [data-theme="dark"] .iss-desc.empty,
    [data-theme="dark"] .inc-section .v.empty,
    [data-theme="dark"] .inc-mcard .v.empty { color: var(--text-disabled) !important; }

    /* Secondary/뮤트 텍스트 (라벨, 부가 정보) */
    [data-theme="dark"] .iss-tl-meta .lbl,
    [data-theme="dark"] .inc-tl-meta .lbl,
    [data-theme="dark"] .iss-when,
    [data-theme="dark"] .iss-tested-at,
    [data-theme="dark"] .inc-mcard .l,
    [data-theme="dark"] .inc-section .l,
    [data-theme="dark"] .iss-type,
    [data-theme="dark"] .al-type-lbl,
    [data-theme="dark"] .ds-type,
    [data-theme="dark"] .ds-meta,
    [data-theme="dark"] .iss-d-body h6,
    [data-theme="dark"] .inc-d-body h6,
    [data-theme="dark"] .al-d-pills,
    [data-theme="dark"] .um-table tbody td.col-time,
    [data-theme="dark"] .inc-table .col-time,
    [data-theme="dark"] .iss-table .col-time {
        color: var(--text-mute) !important;
    }

    /* Drawer 의 분석 섹션 본문 (analysis cards) — 라이트 텍스트 */
    [data-theme="dark"] .inc-section,
    [data-theme="dark"] .iss-desc {
        background: var(--bg-elevated) !important;
        border-color: var(--border) !important;
    }
    [data-theme="dark"] .inc-mcard { background: var(--bg-elevated) !important; border-color: var(--border) !important; }
    [data-theme="dark"] .inc-section .l i,
    [data-theme="dark"] .inc-mcard .l { color: var(--text-mute) !important; }
    [data-theme="dark"] .inc-section .l i { color: var(--brand) !important; }

    /* 모달 안 타임라인 박스 라이트 톤 */
    [data-theme="dark"] #issueModal .iss-section,
    [data-theme="dark"] #incidentModal .inc-msec {
        background: var(--bg-elevated) !important;
        border-color: var(--border) !important;
        color: var(--text-1) !important;
    }
    [data-theme="dark"] #issueModal .iss-section h6,
    [data-theme="dark"] #incidentModal .inc-msec h6 { color: var(--text-mute) !important; }
    [data-theme="dark"] #issueModal .iss-mfield label,
    [data-theme="dark"] #incidentModal .inc-mfield label { color: var(--text-2) !important; }

    /* Settings card-head (yaml editor 헤더 등) — 이미 var 적용 */

    /* 모달 안 시간선(타임라인) 부드러운 라인 색 */
    [data-theme="dark"] .iss-tl-item:not(:last-child)::before,
    [data-theme="dark"] .inc-tl-item:not(:last-child)::before { background:var(--border) !important; }

    /* 필터·툴바 borderbottom — 회색에서 다크 보더로 */
    [data-theme="dark"] .iss-filter,
    [data-theme="dark"] .inc-filter,
    [data-theme="dark"] .iss-head,
    [data-theme="dark"] .inc-head,
    [data-theme="dark"] .al-head,
    [data-theme="dark"] .um-head,
    [data-theme="dark"] .ds-head,
    [data-theme="dark"] .sc-head { border-bottom-color:var(--border) !important; }

    /* Login page — public_base에 inline 색이 있을 때 */
    [data-theme="dark"] body.public-bg { background:var(--bg-app) !important; }

    /* =========================================
       10. 다크 모드 — 추가 페이지 가시성 보강 (스케줄러·메트릭·모달 등)
       ========================================= */

    /* Scheduler 페이지 (.sc-* in scheduler.html) */
    [data-theme="dark"] .sc-stat,
    [data-theme="dark"] .sc-card {
        background: var(--bg-surface) !important;
        border-color: var(--border) !important;
        color: var(--text-1);
    }
    [data-theme="dark"] .sc-name { color: var(--text-1) !important; }
    [data-theme="dark"] .sc-sub,
    [data-theme="dark"] .sc-stat .lbl { color: var(--text-mute) !important; }
    [data-theme="dark"] .sc-meta { color: var(--text-2) !important; }
    [data-theme="dark"] .sc-meta .row-i i { color: var(--text-mute) !important; }
    [data-theme="dark"] .sc-chan {
        background: rgba(148,163,184,.15) !important;
        color: var(--text-2) !important;
    }
    [data-theme="dark"] .sc-foot { border-top-color: var(--border) !important; }
    [data-theme="dark"] .sc-empty {
        background: var(--bg-elevated) !important;
        border-color: var(--border) !important;
        color: var(--text-mute) !important;
    }
    [data-theme="dark"] .sc-pill.success { background: var(--accent-green-soft) !important; color: var(--accent-green-text) !important; }
    [data-theme="dark"] .sc-pill.failed  { background: var(--accent-red-soft) !important;   color: var(--accent-red-text) !important; }
    [data-theme="dark"] .sc-pill.running { background: rgba(14,165,233,.18) !important;     color: #7dd3fc !important; }
    [data-theme="dark"] .sc-pill.idle    { background: rgba(148,163,184,.18) !important;    color: var(--text-2) !important; }

    /* Segmented control */
    [data-theme="dark"] .seg,
    [data-theme="dark"] .auth-seg { background: var(--bg-elevated) !important; }
    [data-theme="dark"] .seg button,
    [data-theme="dark"] .auth-seg button { color: var(--text-2) !important; }
    [data-theme="dark"] .seg button.sel,
    [data-theme="dark"] .auth-seg button.sel {
        background: var(--bg-surface) !important;
        color: var(--brand-active-text) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.4);
    }

    /* Sections / sub-cards (스케줄러 폼 안의 카드들) */
    [data-theme="dark"] .sc-section,
    [data-theme="dark"] .ds-pick {
        background: var(--bg-elevated) !important;
        border-color: var(--border) !important;
        color: var(--text-1);
    }
    [data-theme="dark"] .sc-section > .sc-section-title { color: var(--text-1) !important; }

    /* Channel/run rows (scheduler edit modal) */
    [data-theme="dark"] .chan-row { border-bottom-color: var(--border) !important; }
    [data-theme="dark"] .chan-row .chan-name { color: var(--text-1) !important; }
    [data-theme="dark"] .run-row { border-bottom-color: var(--border) !important; }
    [data-theme="dark"] .run-row:hover { background: var(--bg-hover) !important; }
    [data-theme="dark"] .run-when { color: var(--text-1) !important; }
    [data-theme="dark"] .run-when small { color: var(--text-mute) !important; }

    /* Incident metric (Detect/Ack/Repair) — sec 값이 다크에서 안 보이던 문제 */
    [data-theme="dark"] .inc-metric .sec { color: var(--text-1) !important; }
    [data-theme="dark"] .inc-metric .min { color: var(--text-mute) !important; }

    /* Delete/Confirm 모달들 */
    [data-theme="dark"] #issDeleteModal .modal-content,
    [data-theme="dark"] #incDeleteModal .modal-content,
    [data-theme="dark"] #incConfirmModal .modal-content,
    [data-theme="dark"] #mdConfirmModal .modal-content,
    [data-theme="dark"] #deleteUserModal .modal-content { color: var(--text-1); }
    [data-theme="dark"] #issDeleteModal .rm-keyword,
    [data-theme="dark"] #resetModal .rm-keyword {
        background: var(--accent-red-soft) !important;
        color: var(--accent-red-text) !important;
    }
    [data-theme="dark"] #issDeleteModal .rm-input,
    [data-theme="dark"] #resetModal .rm-input {
        background: var(--bg-input) !important;
        border-color: var(--border-input) !important;
        color: var(--text-1) !important;
    }
    [data-theme="dark"] #resetModal .rm-icon { background: var(--accent-red-soft) !important; }

    /* User Management — table/card 안 텍스트 */
    [data-theme="dark"] .um-table tbody td { color: var(--text-1); }
    [data-theme="dark"] .um-table thead th { color: var(--text-mute) !important; }
    [data-theme="dark"] .um-table .col-user,
    [data-theme="dark"] .um-table .col-name { color: var(--text-1) !important; }
    [data-theme="dark"] .um-stat .num { color: var(--text-1); }
    [data-theme="dark"] .um-stat .lbl { color: var(--text-mute) !important; }

    /* Contact points 페이지 (=alerts.html) 추가 */
    [data-theme="dark"] .al-stat,
    [data-theme="dark"] .al-card,
    [data-theme="dark"] .al-conn { background: var(--bg-surface) !important; border-color: var(--border) !important; }
    [data-theme="dark"] .al-stat .num,
    [data-theme="dark"] .al-name { color: var(--text-1) !important; }
    [data-theme="dark"] .al-stat .lbl,
    [data-theme="dark"] .al-type-lbl,
    [data-theme="dark"] .al-conn .cl,
    [data-theme="dark"] .al-conn .cd,
    [data-theme="dark"] .al-tested { color: var(--text-mute) !important; }
    [data-theme="dark"] .al-tag {
        background: rgba(148,163,184,.15) !important;
        color: var(--text-2) !important;
    }
    [data-theme="dark"] .al-meta { color: var(--text-2); }
    [data-theme="dark"] .al-meta .row-i i { color: var(--text-mute) !important; }
    [data-theme="dark"] .al-foot { border-top-color: var(--border) !important; }

    /* Data Sources 추가 */
    [data-theme="dark"] .ds-name { color: var(--text-1) !important; }
    [data-theme="dark"] .ds-type,
    [data-theme="dark"] .ds-tested,
    [data-theme="dark"] .ds-conn .cl,
    [data-theme="dark"] .ds-conn .cd { color: var(--text-mute) !important; }
    [data-theme="dark"] .ds-stat .num { color: var(--text-1); }
    [data-theme="dark"] .ds-stat .lbl { color: var(--text-mute) !important; }

    /* Type-picker (모달 안의 타입 선택 카드) */
    [data-theme="dark"] .type-opt {
        background: var(--bg-elevated) !important;
        border-color: var(--border) !important;
    }
    [data-theme="dark"] .type-opt.sel {
        background: var(--brand-soft) !important;
        border-color: var(--brand) !important;
    }
    [data-theme="dark"] .type-opt .tl { color: var(--text-1) !important; }
    [data-theme="dark"] .type-opt .td { color: var(--text-mute) !important; }

    /* 페이지 헤더의 h2/lead/count 톤 — inline 색 우선 대비 */
    [data-theme="dark"] .iss-head h2,
    [data-theme="dark"] .inc-head h2,
    [data-theme="dark"] .al-head h2,
    [data-theme="dark"] .um-head h2,
    [data-theme="dark"] .ds-head h2,
    [data-theme="dark"] .sc-head h2,
    [data-theme="dark"] .md-head h2,
    [data-theme="dark"] .md-page-head h2,
    [data-theme="dark"] .it-head h2,
    [data-theme="dark"] .dd-head h2 { color: var(--text-1); }
    [data-theme="dark"] .iss-head .lead,
    [data-theme="dark"] .inc-head .lead,
    [data-theme="dark"] .al-head .lead,
    [data-theme="dark"] .um-head .lead,
    [data-theme="dark"] .ds-head .lead,
    [data-theme="dark"] .sc-head .lead,
    [data-theme="dark"] .md-head .lead,
    [data-theme="dark"] .md-page-head .lead,
    [data-theme="dark"] .it-head .lead,
    [data-theme="dark"] .dd-head .lead { color: var(--text-2) !important; }
    [data-theme="dark"] .iss-head .count,
    [data-theme="dark"] .inc-head .count,
    [data-theme="dark"] .al-head .count,
    [data-theme="dark"] .um-head .count,
    [data-theme="dark"] .ds-head .count,
    [data-theme="dark"] .sc-head .count,
    [data-theme="dark"] .md-head .count {
        background: rgba(148,163,184,.18) !important;
        color: var(--text-2) !important;
    }

    /* 일반 .lead 도 안전망 */
    [data-theme="dark"] .lead { color: var(--text-2) !important; }
    [data-theme="dark"] pre,
    [data-theme="dark"] pre code { background: var(--bg-code); color: var(--text-1); }

    /* Bootstrap badge 다크 친화적 */
    [data-theme="dark"] .badge.bg-light { background: rgba(148,163,184,.18) !important; color: var(--text-1) !important; }
    [data-theme="dark"] .badge.bg-secondary { background: rgba(148,163,184,.25) !important; }
    [data-theme="dark"] .badge.bg-info { background: rgba(14,165,233,.25) !important; color: #7dd3fc !important; }
    [data-theme="dark"] .badge.bg-warning { background: rgba(245,158,11,.25) !important; color: #fcd34d !important; }
    [data-theme="dark"] .badge.bg-dark { background: rgba(15,23,42,.6) !important; color: var(--text-1) !important; }

    /* =========================================
       11. 모달/폼 입력 영역 — 다크 모드 가독성 보강 (Incident/Issue/Contact points/Scheduler 입력 모달)
       ========================================= */

    /* 모달 안 폼 라벨 / 헬프 텍스트 / 강조 */
    [data-theme="dark"] .modal-body label,
    [data-theme="dark"] .modal-body .form-label,
    [data-theme="dark"] .modal-body strong,
    [data-theme="dark"] .modal-body .fw-bold { color: var(--text-1); }
    [data-theme="dark"] .modal-body .form-text,
    [data-theme="dark"] .modal-body .text-muted { color: var(--text-mute) !important; }
    [data-theme="dark"] .modal-body p,
    [data-theme="dark"] .modal-body .small { color: var(--text-2); }
    [data-theme="dark"] .modal-title { color: var(--text-1); }
    [data-theme="dark"] .modal-body h6 { color: var(--text-1); }

    /* 모달 안 sub 박스 (Timeline 등) */
    [data-theme="dark"] #issueModal .iss-section,
    [data-theme="dark"] #incidentModal .inc-msec,
    [data-theme="dark"] .iss-section,
    [data-theme="dark"] .inc-msec {
        background: var(--bg-elevated) !important;
        border-color: var(--border) !important;
    }
    [data-theme="dark"] #issueModal .iss-section h6,
    [data-theme="dark"] #incidentModal .inc-msec h6,
    [data-theme="dark"] .iss-section h6,
    [data-theme="dark"] .inc-msec h6 { color: var(--text-mute) !important; }
    [data-theme="dark"] #issueModal .iss-mfield label,
    [data-theme="dark"] #incidentModal .inc-mfield label,
    [data-theme="dark"] .iss-mfield label,
    [data-theme="dark"] .inc-mfield label { color: var(--text-2) !important; }

    /* daterangepicker 다크 톤 */
    [data-theme="dark"] .daterangepicker {
        background-color: var(--bg-surface);
        border-color: var(--border);
        color: var(--text-1);
    }
    [data-theme="dark"] .daterangepicker .calendar-table,
    [data-theme="dark"] .daterangepicker td,
    [data-theme="dark"] .daterangepicker th { background-color: var(--bg-surface); color: var(--text-1); border-color: var(--border); }
    [data-theme="dark"] .daterangepicker td.available:hover,
    [data-theme="dark"] .daterangepicker th.available:hover { background-color: var(--bg-hover); color: var(--text-1); }
    [data-theme="dark"] .daterangepicker td.off,
    [data-theme="dark"] .daterangepicker td.off.in-range,
    [data-theme="dark"] .daterangepicker td.off.start-date,
    [data-theme="dark"] .daterangepicker td.off.end-date { background: transparent; color: var(--text-disabled); }
    [data-theme="dark"] .daterangepicker td.active,
    [data-theme="dark"] .daterangepicker td.active:hover { background-color: var(--brand) !important; color: #fff !important; }
    [data-theme="dark"] .daterangepicker td.in-range { background-color: var(--brand-soft); color: var(--text-1); }
    [data-theme="dark"] .daterangepicker .ranges li { color: var(--text-1); }
    [data-theme="dark"] .daterangepicker .ranges li:hover { background-color: var(--bg-hover); }
    [data-theme="dark"] .daterangepicker .ranges li.active { background-color: var(--brand); color: #fff; }
    [data-theme="dark"] .daterangepicker .drp-buttons { border-top-color: var(--border); }
    [data-theme="dark"] .daterangepicker select.hourselect,
    [data-theme="dark"] .daterangepicker select.minuteselect,
    [data-theme="dark"] .daterangepicker select.ampmselect,
    [data-theme="dark"] .daterangepicker select.monthselect,
    [data-theme="dark"] .daterangepicker select.yearselect {
        background-color: var(--bg-input);
        color: var(--text-1);
        border-color: var(--border-input);
    }

    /* Bootstrap-select (selectpicker, 기존 페이지에서 남아있을 수 있음) */
    [data-theme="dark"] .bootstrap-select > .btn,
    [data-theme="dark"] .bootstrap-select .dropdown-menu {
        background-color: var(--bg-input) !important;
        border-color: var(--border-input) !important;
        color: var(--text-1) !important;
    }
    [data-theme="dark"] .bootstrap-select .dropdown-menu li a { color: var(--text-1) !important; }
    [data-theme="dark"] .bootstrap-select .dropdown-menu li a:hover { background-color: var(--bg-hover) !important; }

    /* 인라인 background:#fafbfc 같은 보조 영역 — 자주 사용되는 hex 들 다크 변환 */
    [data-theme="dark"] [class*="bg-light"]:not(.badge):not(.list-group-item) { background-color: var(--bg-elevated) !important; }

    /* 모든 textarea / 일반 input 안전망 */
    [data-theme="dark"] textarea,
    [data-theme="dark"] input[type="text"],
    [data-theme="dark"] input[type="password"],
    [data-theme="dark"] input[type="email"],
    [data-theme="dark"] input[type="number"],
    [data-theme="dark"] input[type="search"],
    [data-theme="dark"] input[type="url"],
    [data-theme="dark"] input[type="date"],
    [data-theme="dark"] input[type="datetime-local"],
    [data-theme="dark"] select {
        background-color: var(--bg-input);
        color: var(--text-1);
        border-color: var(--border-input);
    }
    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder { color: var(--text-mute); }

    /* 일반 텍스트 안전망 — h1~h6, strong 등이 inline 으로 진한 색으로 박혀 있을 때 */
    [data-theme="dark"] main h1,
    [data-theme="dark"] main h2,
    [data-theme="dark"] main h3,
    [data-theme="dark"] main h4,
    [data-theme="dark"] main h5,
    [data-theme="dark"] main h6 { color: var(--text-1); }
    [data-theme="dark"] .text-dark { color: var(--text-1) !important; }
    [data-theme="dark"] .text-secondary { color: var(--text-2) !important; }
    [data-theme="dark"] .text-primary { color: var(--brand-active-text) !important; }

    /* =========================================
       12. User Management 모달 전용 다크 오버라이드
           (admin_users.html 의 .modal#xxx ID-셀렉터가 specificity 높아
            글로벌 dark override 가 안 닿는 부분 보강)
       ========================================= */

    /* 모달 header / footer 보더·배경 */
    [data-theme="dark"] .modal#createUserModal .modal-header,
    [data-theme="dark"] .modal#editUserModal .modal-header,
    [data-theme="dark"] .modal#resetPasswordModal .modal-header,
    [data-theme="dark"] .modal#deleteUserModal .modal-header {
        border-bottom-color: var(--border) !important;
        background: transparent !important;
    }
    [data-theme="dark"] .modal#createUserModal .modal-footer,
    [data-theme="dark"] .modal#editUserModal .modal-footer,
    [data-theme="dark"] .modal#resetPasswordModal .modal-footer,
    [data-theme="dark"] .modal#deleteUserModal .modal-footer {
        border-top-color: var(--border) !important;
        background: var(--bg-elevated) !important;
    }

    /* 모달 안 form-label 색 */
    [data-theme="dark"] #createUserModal .form-label,
    [data-theme="dark"] #editUserModal .form-label,
    [data-theme="dark"] #resetPasswordModal .form-label { color: var(--text-2) !important; }

    /* 편집 모달의 readonly User ID 입력 — inline style="background:#f7f8fb;color:#5b6370;" 강제 오버라이드 */
    [data-theme="dark"] #edit_username[readonly] {
        background: var(--bg-elevated) !important;
        color: var(--text-mute) !important;
        border-color: var(--border-input) !important;
    }

    /* User Management 본문 색상 (filter input, table 등) — 인라인 hex 들 안전망 */
    [data-theme="dark"] .um-search input { color: var(--text-1) !important; }
    [data-theme="dark"] .um-search input::placeholder { color: var(--text-mute) !important; }
    [data-theme="dark"] .um-search .ico { color: var(--text-mute) !important; }
    [data-theme="dark"] .um-search .clear { color: var(--text-mute) !important; }
    [data-theme="dark"] .um-stat { background: var(--bg-surface) !important; border-color: var(--border) !important; }
    [data-theme="dark"] .um-table thead th {
        background: var(--bg-elevated) !important;
        border-bottom-color: var(--border) !important;
    }
    [data-theme="dark"] .um-table tbody tr:hover { background: var(--bg-elevated) !important; }
    [data-theme="dark"] .um-table tbody td { border-bottom-color: var(--border) !important; }
    [data-theme="dark"] .um-table .col-id { color: var(--text-mute) !important; }
    [data-theme="dark"] .um-table .col-time { color: var(--text-mute) !important; }

    /* User Management Stat 카드 강조 색은 다크에서도 그대로 시각적으로 잘 보임 */
    /* .um-stat .num.adm  (보라 #7c3aed)  — 다크 카드에서도 충분히 보임 */
    /* .um-stat .num.lock (빨강 #dc2626) — 동일 */

    /* 신규 사용자 생성 모달의 라이브 일치 메시지 (text-success / text-danger) */
    [data-theme="dark"] #new_password_match.text-success,
    [data-theme="dark"] #change_password_match.text-success { color: var(--accent-green-text) !important; }
    [data-theme="dark"] #new_password_match.text-danger,
    [data-theme="dark"] #change_password_match.text-danger { color: var(--accent-red-text) !important; }

    /* 모든 alert-danger (모달 안 인라인 에러) 다크 대비 */
    [data-theme="dark"] .alert.alert-danger {
        background: var(--accent-red-soft) !important;
        border-color: rgba(239,68,68,.3) !important;
        color: var(--accent-red-text) !important;
    }

    /* =========================================
       13. Master Data 사이드 메뉴 — vars 사용 + 다크 active 톤
       ========================================= */
    /* Light(기본) override — 옛 하드코딩(#eef2ff, #4338ca) 제거하고 brand 톤으로 통일 */
    .md-sidenav a            { color: var(--text-2); }
    .md-sidenav a:hover      { background: var(--bg-hover); color: var(--text-1); }
    .md-sidenav a.active     { background: var(--brand-active-bg); color: var(--brand-active-text); font-weight: 700; }
    .md-sidenav a.active i   { color: var(--brand-active-text); }
    .md-sidenav h3           { color: var(--text-mute); }

    /* 다크 — 안전망 (인라인 hardcode가 남아있어도 강제) */
    [data-theme="dark"] .md-sidenav a            { color: var(--text-2) !important; }
    [data-theme="dark"] .md-sidenav a:hover      { background: var(--bg-hover) !important; color: var(--text-1) !important; }
    [data-theme="dark"] .md-sidenav a.active     { background: var(--brand-soft) !important; color: var(--brand-active-text) !important; }
    [data-theme="dark"] .md-sidenav a.active i   { color: var(--brand-active-text) !important; }

    /* =========================================
       14. Bootstrap CSS 변수를 우리 테마와 동기화 + 잔여 라이트 클래스 무효화
       ========================================= */
    /* Bootstrap 5 의 --bs-* 변수를 우리 테마 토큰과 연결 — Bootstrap 컴포넌트(폼·카드·테이블 등) 가
       자체적으로 --bs-* 를 참조할 때 라이트 색이 튀어나오던 문제 해결 */
    :root {
        --bs-body-bg: var(--bg-app);
        --bs-body-color: var(--text-1);
        --bs-border-color: var(--border);
        --bs-tertiary-bg: var(--bg-elevated);
        --bs-secondary-bg: var(--bg-elevated);
        --bs-emphasis-color: var(--text-1);
        --bs-secondary-color: var(--text-2);
        --bs-link-color: var(--brand);
        --bs-link-hover-color: var(--brand-deep);
    }
    [data-theme="dark"] {
        --bs-body-bg: var(--bg-app);
        --bs-body-color: var(--text-1);
        --bs-border-color: var(--border);
        --bs-tertiary-bg: var(--bg-elevated);
        --bs-secondary-bg: var(--bg-elevated);
        --bs-emphasis-color: var(--text-1);
        --bs-secondary-color: var(--text-2);
        --bs-link-color: var(--brand);
        --bs-link-hover-color: var(--brand-deep);
    }

    /* Bootstrap 의 .bg-white / .bg-light / .text-bg-light 등 — 다크에서 강제 무효화 */
    [data-theme="dark"] .bg-white { background-color: var(--bg-surface) !important; color: var(--text-1) !important; }
    [data-theme="dark"] .text-white { color: var(--text-on-brand); }
    [data-theme="dark"] .bg-success-subtle { background-color: var(--accent-green-soft) !important; }
    [data-theme="dark"] .border-success-subtle { border-color: rgba(34,197,94,.3) !important; }
    [data-theme="dark"] .text-success-emphasis { color: var(--accent-green-text) !important; }
    [data-theme="dark"] .bg-danger-subtle { background-color: var(--accent-red-soft) !important; }
    [data-theme="dark"] .text-danger-emphasis { color: var(--accent-red-text) !important; }
    [data-theme="dark"] .bg-warning-subtle { background-color: var(--accent-orange-soft) !important; }
    [data-theme="dark"] .text-warning-emphasis { color: var(--accent-orange-text) !important; }

    /* input-group readonly 영역 다크 강제 (Incident 모달의 Detect/Ack/Repair sec) */
    [data-theme="dark"] .input-group .form-control[readonly] {
        background-color: var(--bg-elevated) !important;
        color: var(--text-1) !important;
        border-color: var(--border-input) !important;
    }
    [data-theme="dark"] .input-group-text {
        background-color: var(--bg-elevated) !important;
        color: var(--text-2) !important;
        border-color: var(--border-input) !important;
    }

    /* outline 버튼 안의 bg-white 잔여 (다크에서 흰 박스로 튀던 문제) */
    [data-theme="dark"] .btn-outline-primary,
    [data-theme="dark"] .btn-outline-secondary,
    [data-theme="dark"] .btn-outline-success,
    [data-theme="dark"] .btn-outline-danger,
    [data-theme="dark"] .btn-outline-warning,
    [data-theme="dark"] .btn-outline-info,
    [data-theme="dark"] .btn-outline-dark {
        background-color: transparent;
    }
    [data-theme="dark"] .btn-outline-primary { color: var(--brand); border-color: var(--brand); }
    [data-theme="dark"] .btn-outline-primary:hover { background-color: var(--brand); color: #fff; }
    [data-theme="dark"] .btn-outline-secondary { color: var(--text-2); border-color: var(--border-strong); }
    [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--bg-hover); color: var(--text-1); border-color: var(--border-strong); }
    [data-theme="dark"] .btn-outline-success { color: var(--accent-green); border-color: var(--accent-green); }
    [data-theme="dark"] .btn-outline-success:hover { background-color: var(--accent-green); color: #0f172a; }
    [data-theme="dark"] .btn-outline-danger { color: var(--accent-red); border-color: var(--accent-red); }
    [data-theme="dark"] .btn-outline-danger:hover { background-color: var(--accent-red); color: #0f172a; }
    [data-theme="dark"] .btn-outline-warning { color: var(--accent-orange); border-color: var(--accent-orange); }
    [data-theme="dark"] .btn-outline-warning:hover { background-color: var(--accent-orange); color: #0f172a; }

    /* =========================================
       15. 사이드바 모던화 — Linear / Notion 스타일
       ========================================= */

    /* 사이드바 내부 좌우 여유, 살짝 들여쓰기 */
    #sidebar-wrapper .list-group { padding: .35rem .5rem; gap: 1px; }

    /* 모든 메뉴 항목 공통 — pill 모양 + 부드러운 hover */
    #sidebar-wrapper .list-group-item {
        margin: 0;
        padding: .55rem .7rem !important;
        border-radius: 8px !important;
        font-size: .88rem;
        font-weight: 500;
        color: var(--text-2);
        background-color: transparent;
        display: flex;
        align-items: center;
        gap: .55rem;
        transition: background-color .15s ease, color .15s ease;
    }
    #sidebar-wrapper .list-group-item > i.bi:first-child {
        font-size: .98rem;
        width: 18px;
        text-align: center;
        flex-shrink: 0;
        color: var(--text-mute);
        transition: color .15s ease;
    }
    #sidebar-wrapper .list-group-item:hover {
        background-color: var(--bg-hover);
        color: var(--text-1);
    }
    #sidebar-wrapper .list-group-item:hover > i.bi:first-child { color: var(--text-2); }

    /* 활성 항목 */
    #sidebar-wrapper .list-group-item.active {
        background-color: var(--brand-active-bg);
        color: var(--brand-active-text);
        font-weight: 600;
    }
    #sidebar-wrapper .list-group-item.active > i.bi:first-child { color: var(--brand-active-text); }
    /* 좌측 보더 액센트 — 잘 보이는 위치로 */
    #sidebar-wrapper .list-group-item.active::before {
        content: '';
        position: absolute;
        left: -.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 60%;
        background: var(--brand);
        border-radius: 0 3px 3px 0;
    }
    /* 활성 sub-item (text-primary fw-bold 패턴) — 동일하게 pill */
    #sidebar-wrapper .list-group-item.text-primary.fw-bold {
        background-color: var(--brand-active-bg) !important;
        color: var(--brand-active-text) !important;
    }
    #sidebar-wrapper .list-group-item.text-primary.fw-bold > i.bi:first-child { color: var(--brand-active-text); }

    /* Chevron (그룹 확장 아이콘) — 더 작고 옅게 */
    #sidebar-wrapper .list-group-item .bi-chevron-down.float-end {
        font-size: .68rem !important;
        opacity: .5;
        margin-left: auto;
        transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .15s ease;
    }
    #sidebar-wrapper .list-group-item[aria-expanded="true"] .bi-chevron-down.float-end {
        transform: rotate(180deg);
        opacity: .9;
    }
    #sidebar-wrapper .list-group-item:hover .bi-chevron-down.float-end { opacity: .85; }

    /* 서브메뉴 — 좌측 indent guide line + 약간 작은 폰트 */
    #sidebar-wrapper .collapse .list-group {
        position: relative;
        padding: .1rem .35rem .15rem 1.25rem;
        margin: .05rem 0 .2rem .35rem;
        gap: 1px;
    }
    #sidebar-wrapper .collapse .list-group::before {
        content: '';
        position: absolute;
        left: .85rem;
        top: .3rem;
        bottom: .3rem;
        width: 1px;
        background: var(--border);
        opacity: .8;
    }
    #sidebar-wrapper .collapse .list-group-item {
        padding: .42rem .65rem !important;
        font-size: .84rem;
    }
    #sidebar-wrapper .collapse .list-group-item > i.bi:first-child {
        font-size: .88rem;
        width: 16px;
    }

    /* 2차 서브메뉴 (Dashboard ▾ > 항목들 / Ocula Settings ▾) — 들여쓰기 더 깊게 */
    #sidebar-wrapper .collapse .collapse .list-group {
        padding-left: 1.6rem;
        margin-left: 0;
    }
    #sidebar-wrapper .collapse .collapse .list-group::before {
        left: 1.2rem;
    }

    /* 즐겨찾기 섹션 — 살짝 더 모던 */
    .fav-section {
        padding: .65rem .5rem .35rem !important;
        margin-bottom: .15rem;
    }
    .fav-section .fav-header {
        padding: .25rem .75rem .45rem !important;
        font-size: .67rem !important;
    }
    .fav-section .fav-list { gap: 1px; padding: 0 .15rem 0 .55rem; }
    .fav-section .fav-item {
        padding: .48rem .7rem !important;
        padding-left: 1.05rem !important;   /* 헤더 캡 라벨 아래로 살짝 들여쓰기 */
        padding-right: 1.85rem !important;  /* 우측 fav-toggle (별표) 공간 확보 — 텍스트가 별에 안 침범 */
        border-radius: 8px !important;
        border-left: 0 !important;
        font-size: .87rem;
        gap: .55rem;
        position: relative;
    }
    .fav-section .fav-item:hover { background: var(--bg-hover); }
    .fav-section .fav-item.active {
        background: var(--brand-active-bg);
        color: var(--brand-active-text);
        font-weight: 600;
    }
    .fav-section .fav-item.active::before {
        content: '';
        position: absolute;
        left: -.5rem;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 60%;
        background: var(--brand);
        border-radius: 0 3px 3px 0;
    }
    .fav-section .fav-item i.bi { font-size: .92rem; width: 16px; text-align: center; flex-shrink: 0; }

    /* 별표 토글 — 위치·색·hover 효과 정돈 */
    .fav-toggle {
        right: .45rem !important;
        padding: .15rem .2rem !important;
        border-radius: 4px !important;
        transition: opacity .15s ease, color .15s ease, background-color .15s ease;
    }
    .fav-toggle:hover { background: rgba(245,158,11,.12); }
    .fav-toggle i { font-size: .82rem !important; }

    /* 사이드바 보더 살짝 부드럽게 */
    #sidebar-wrapper { border-right: 1px solid var(--border); }

    /* 브랜드 영역 hover 좀 더 부드럽게 */
    .sidebar-heading.brand { padding: 1rem 1.1rem !important; border-bottom: 1px solid var(--border); }
    .sidebar-heading.brand:hover { background: var(--bg-hover); }

    /* Collapse 애니메이션 부드럽게 */
    #sidebar-wrapper .collapse {
        transition: height .25s cubic-bezier(.4,0,.2,1);
    }

    /* 스크롤바 — webkit 환경에서만 (Firefox 는 무시) */
    #sidebar-wrapper {
        scrollbar-width: thin;
        scrollbar-color: var(--border-strong) transparent;
    }
    #sidebar-wrapper::-webkit-scrollbar { width: 6px; }
    #sidebar-wrapper::-webkit-scrollbar-track { background: transparent; }
    #sidebar-wrapper::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 3px;
    }
    #sidebar-wrapper::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

    /* (다크 모드 안전망) — bg-light 가 collapse 안 .list-group 에 남아있어도 무효화 */
    [data-theme="dark"] #sidebar-wrapper .collapse .list-group { background: transparent !important; }
    #sidebar-wrapper .collapse .list-group.bg-light { background: transparent !important; }

    /* =========================================
       16. 사이드바 — 메뉴 폰트·위치 일관성 + 아이콘 레일 토글
       ========================================= */

    /* 모든 레벨 메뉴 항목 폰트 크기/패딩 통일 (서브/서브의 서브 동일).
       우측 패딩은 fav-toggle(별표, right:.6rem absolute) 공간 확보를 위해 1.85rem.
       이 셀렉터 그룹이 같은 specificity 중 가장 마지막 선언 → 위 단일 셀렉터들을 모두 override. */
    #sidebar-wrapper .list-group-item,
    #sidebar-wrapper .collapse .list-group-item,
    #sidebar-wrapper .collapse .collapse .list-group-item {
        font-size: .88rem !important;
        padding: .55rem 1.85rem .55rem .7rem !important;
    }
    #sidebar-wrapper .list-group-item > i.bi:first-child,
    #sidebar-wrapper .collapse .list-group-item > i.bi:first-child {
        font-size: .98rem !important;
        width: 18px !important;
    }
    /* 2차 서브메뉴는 들여쓰기 추가 없이 가이드 라인만으로 표현 (위치 점프 방지) */
    #sidebar-wrapper .collapse .list-group,
    #sidebar-wrapper .collapse .collapse .list-group {
        padding: .1rem .35rem .15rem 1.25rem !important;
        margin: .05rem 0 .2rem .35rem !important;
    }
    #sidebar-wrapper .collapse .list-group::before,
    #sidebar-wrapper .collapse .collapse .list-group::before {
        left: .85rem !important;
    }
    /* 2차 서브메뉴 가이드 라인 살짝 더 옅게 (계층 시각화) */
    #sidebar-wrapper .collapse .collapse .list-group::before { opacity: .5 !important; }

    /* =========================================

    /* =========================================
       16. Grafana 패턴 — Dock / Undock layout
       ─────────────────────────────────────────────────────────────
       State (html/body 의 data attributes):
         data-dock           = "docked"  | "undocked"      (영속, localStorage='sidebar-dock')
         data-floating-open  = "true"    | "false"         (Undock 일 때만 의미)

       Topbar (좌→우):
         [Ocula icon]  [□ Dock toggle]   |   [breadcrumb]   ...   [right controls]

       사이드바 헤더는 없음 — 메뉴 바로 시작.
       ========================================= */

    body { margin: 0; }

    /* ── Topbar ── */
    .ocula-topbar {
        position: sticky;
        top: 0;
        z-index: 1115;   /* docked Opsy 패널(1110) 위 — 계정/알럿 드롭다운이 패널 위로 나오게. 전체화면(1120)보단 아래 */
        height: 48px;
        display: flex;
        align-items: center;
        gap: .25rem;
        padding: 0 .65rem;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border);
    }
    .ocula-topbar-right {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: .4rem;
        height: 100%;
        flex-shrink: 0;
    }
    .ocula-topbar-right > * { flex-shrink: 0; }
    /* 직접 자식 .me-2 만 마진 제거 (drop-down 메뉴 내부 아이콘은 영향 없음) */
    .ocula-topbar-right > .me-2 { margin-right: 0 !important; }
    /* drop-down 메뉴 항목 아이콘-텍스트 간격 보장 */
    .ocula-topbar-right .dropdown-menu .dropdown-item i { margin-right: .55rem; }

    /* DEV 배지 — topbar 안에서 살짝 작게 */
    .ocula-topbar-right .dev-badge {
        margin-right: 0;
        padding: .2rem .5rem;
        font-size: .68rem;
    }

    /* Theme 버튼 — 32px 동일 톤 */
    .ocula-topbar-right .theme-btn {
        width: 32px; height: 32px;
        border-radius: 6px;
        border: 1px solid var(--border);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .ocula-topbar-right .theme-btn i { font-size: .95rem; }

    /* ─────────────────────────────────────────────────────────
       Opsy AI 트리거 — 회전 conic 그라데이션 보더 + 펄싱 글로우
       ───────────────────────────────────────────────────────── */
    .ocula-topbar-right .ai-trigger {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        height: 32px;
        padding: 0 .85rem 0 .55rem;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: var(--text-1);
        cursor: pointer;
        font-size: .85rem;
        font-weight: 700;
        overflow: hidden;
        isolation: isolate;
        animation: none;          /* Opsy 플랫화 — 펄싱 글로우 제거 */
        transition: transform .18s ease;
    }
    .ocula-topbar-right .ai-trigger:hover { transform: none; }   /* Opsy 플랫화 — hover 띄움 제거 */
    .ocula-topbar-right .ai-trigger:active { transform: none; }

    /* 펄싱 글로우 (보라 ↔ 청록) */
    @keyframes ai-glow {
        0%, 100% {
            box-shadow:
                0 0 10px rgba(124, 58, 237, .22),
                0 0 22px rgba(96, 165, 250, .12);
        }
        50% {
            box-shadow:
                0 0 18px rgba(124, 58, 237, .42),
                0 0 36px rgba(34, 211, 238, .28);
        }
    }
    [data-theme="dark"] .ocula-topbar-right .ai-trigger {
        animation: none;          /* Opsy 플랫화 */
    }
    @keyframes ai-glow-dark {
        0%, 100% {
            box-shadow:
                0 0 12px rgba(167, 139, 250, .35),
                0 0 26px rgba(103, 232, 249, .18);
        }
        50% {
            box-shadow:
                0 0 22px rgba(167, 139, 250, .55),
                0 0 44px rgba(103, 232, 249, .35);
        }
    }

    /* 회전 conic 그라데이션 (보더 자리) */
    .ocula-topbar-right .ai-trigger::before {
        content: none; display: none;   /* Opsy 플랫화 — 회전 conic 보더 제거 */
        position: absolute;
        top: 50%; left: 50%;
        width: 280%;
        aspect-ratio: 1;
        transform: translate(-50%, -50%);
        background: conic-gradient(from 0deg,
            #a78bfa, #60a5fa, #22d3ee, #06b6d4, #60a5fa, #c084fc, #a78bfa);
        z-index: -2;
        animation: ai-spin 5s linear infinite;
        pointer-events: none;
    }
    @keyframes ai-spin {
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* 내부 surface 마스크 — 1.5px 보더만 노출 */
    .ocula-topbar-right .ai-trigger::after {
        content: none; display: none;   /* Opsy 플랫화 — surface 마스크 제거 */
        position: absolute;
        inset: 1.5px;
        background: var(--bg-surface);
        border-radius: 6.5px;
        z-index: -1;
        pointer-events: none;
    }

    .ocula-topbar-right .ai-trigger > * { position: relative; z-index: 1; }
    .ocula-topbar-right .ai-trigger:hover {
        box-shadow: none !important;           /* Opsy 플랫화 — hover 무지개 글로우 제거 */
    }

    /* FAB(.fab) 와 동일한 디자인의 미니 원형 마크 — 블루 그라데이션 + 흰색 로고 */
    .ocula-topbar-right .ai-trigger .mark {
        width: 22px; height: 22px;
        border-radius: 50%;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg,
            var(--perltec-light, #60a5fa) 0%,
            var(--perltec-mid, #2E84D8) 50%,
            var(--perltec-deep, #1B4DA6) 100%);
        box-shadow:
            0 2px 6px -1px rgba(27,77,166,.45),
            inset 0 1px 0 rgba(255,255,255,.28);
    }
    .ocula-topbar-right .ai-trigger .mark img {
        width: 14px; height: 14px;
        object-fit: contain;
        filter: brightness(0) invert(1);   /* 흰색 실루엣 — FAB 와 동일 */
    }
    .ocula-topbar-right .ai-trigger .mark i {
        color: #fff;
        font-size: .85rem;
        line-height: 1;
    }

    /* "Opsy" 텍스트 — 보더와 같은 그라데이션 */
    /* Opsy 플랫화 — 라벨 그라데이션 텍스트 제거 (그냥 currentColor 단색) */
    .ocula-topbar-right .ai-trigger .label {
        line-height: 1;
        font-size: .88rem;
        font-weight: 800;
        letter-spacing: .01em;
        background: none;
        -webkit-text-fill-color: currentColor;
        color: inherit;
    }
    /* "new" 표시 점 제거 — 단일행 컴팩트한 모습으로 */
    .ocula-topbar-right .ai-trigger .dot-new { display: none; }

    /* User 메뉴 — 미니멀 single-line dropdown 트리거 */
    .ocula-topbar-right .user-menu .user-menu-btn {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        height: 32px;
        padding: 0 .55rem 0 .35rem;
        background: transparent;
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--text-1);
        font-size: .87rem;
        cursor: pointer;
        transition: background-color .12s ease, border-color .12s ease;
    }
    .ocula-topbar-right .user-menu .user-menu-btn:hover {
        background: var(--bg-hover);
        border-color: var(--border-strong);
    }
    .ocula-topbar-right .user-menu .user-avatar {
        width: 22px; height: 22px;
        border-radius: 50%;
        background: var(--brand-soft, rgba(46,132,216,.15));
        color: var(--brand);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: .62rem; font-weight: 700; line-height: 1;
        text-transform: uppercase; letter-spacing: .01em;
    }
    .ocula-topbar-right .user-menu .user-avatar i { font-size: .85rem; line-height: 1; }
    .ocula-topbar-right .user-menu .user-name {
        font-weight: 600;
        line-height: 1;
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ocula-topbar-right .user-menu .user-caret {
        font-size: .65rem;
        color: var(--text-mute);
        opacity: .7;
    }

    /* User dropdown menu header (이름 + timezone) */
    .user-menu-items { min-width: 220px; padding: .35rem 0; }
    .user-menu-items .user-menu-header {
        padding: .55rem .85rem;
    }
    .user-menu-items .user-menu-name {
        font-weight: 700;
        color: var(--text-1);
        font-size: .9rem;
        line-height: 1.2;
    }
    .user-menu-items .user-menu-meta {
        font-size: .72rem;
        color: var(--text-mute);
        margin-top: 2px;
    }
    .user-menu-items .dropdown-item { font-size: .86rem; padding: .45rem .85rem; }

    /* ── Ocula 아이콘 + 텍스트 (Grafana 로고 영역) ── */
    .ocula-icon {
        height: 32px;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: 0 .55rem 0 .45rem;
        border-radius: 6px;
        color: var(--brand);
        text-decoration: none;
        transition: background-color .12s ease, color .12s ease;
    }
    .ocula-icon:hover { background: var(--bg-hover); color: var(--brand); }
    .ocula-icon i { font-size: 1.1rem; line-height: 1; }
    .ocula-icon-label {
        font-weight: 700;
        font-size: .92rem;
        letter-spacing: .01em;
        color: var(--text-1);
        line-height: 1;
    }
    .ocula-icon:hover .ocula-icon-label { color: var(--text-1); }

    /* ── Dock/Undock 토글 (□) ── */
    .ocula-dock-toggle {
        width: 30px;
        height: 30px;
        border: 0;
        background: transparent;
        border-radius: 6px;
        cursor: pointer;
        color: var(--text-2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background-color .12s ease, color .12s ease;
    }
    .ocula-dock-toggle:hover { background: var(--bg-hover); color: var(--text-1); }
    .ocula-dock-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
    .ocula-dock-toggle i { font-size: 1rem; line-height: 1; }

    /* ── 구분선 ── */
    .ocula-topbar-divider {
        width: 1px;
        height: 22px;
        background: var(--border);
        margin: 0 .4rem;
    }

    /* ── Breadcrumb — 텍스트만 ── */
    .ocula-breadcrumb {
        display: flex;
        align-items: center;
        gap: .3rem;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        padding: 0 .15rem;
    }
    .ocula-breadcrumb .crumb {
        display: inline-block;
        max-width: 240px;
        font-size: .88rem;
        color: var(--text-2);
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: .15rem .35rem;
        border-radius: 5px;
        transition: background-color .12s ease, color .12s ease;
    }
    .ocula-breadcrumb a.crumb:hover { background: var(--bg-hover); color: var(--text-1); }
    /* breadcrumb 항목 내부 아이콘 모두 숨김 (지시: 각 단계 아이콘 표시 안 함) */
    .ocula-breadcrumb .crumb i { display: none !important; }
    .ocula-breadcrumb .crumb-sep {
        color: var(--text-mute);
        font-size: .82rem;
        opacity: .6;
        flex-shrink: 0;
    }
    .ocula-breadcrumb .crumb-current {
        color: var(--text-1);
        font-weight: 600;
        cursor: default;
    }
    .ocula-breadcrumb .crumb-ellipsis {
        cursor: pointer;
        background: transparent;
        border: 0;
        color: var(--text-mute);
        font-weight: 700;
        font-size: .88rem;
        padding: .15rem .35rem;
        border-radius: 5px;
    }
    .ocula-breadcrumb .crumb-ellipsis:hover { background: var(--bg-hover); color: var(--text-1); }

    /* ── Body layout ── */
    .ocula-body {
        display: flex;
        min-height: calc(100vh - 48px);
    }

    /* ── Sidebar 공통 ── */
    .ocula-sidebar {
        width: 286px;
        background: var(--bg-sidebar);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: transform .2s ease-in-out, margin-left .2s ease-in-out;
    }

    /* ── Dock 모드 — 레이아웃에 sticky, main 옆에 배치 (콘텐츠 밀어냄) ── */
    [data-dock="docked"] .ocula-sidebar {
        position: sticky;
        top: 48px;
        align-self: flex-start;
        height: calc(100vh - 48px);
        flex-shrink: 0;
        margin-left: 0;
        transform: translateX(0);
        z-index: 900;
    }

    /* ── Undock 모드 — fixed 오버레이, 기본 오프스크린 ── */
    [data-dock="undocked"] .ocula-sidebar {
        position: fixed;
        top: 48px;
        bottom: 0;
        left: 0;
        height: calc(100vh - 48px);
        transform: translateX(-100%);
        margin-left: 0;
        z-index: 1100;
        box-shadow: 4px 0 28px rgba(0,0,0,.18);
    }
    [data-theme="dark"] [data-dock="undocked"] .ocula-sidebar {
        box-shadow: 4px 0 36px rgba(0,0,0,.55);
    }
    /* Undock + floating-open = true → 슬라이드 인 */
    [data-dock="undocked"][data-floating-open="true"] .ocula-sidebar {
        transform: translateX(0);
    }

    /* ── Backdrop — Undock + 열린 상태 ── */
    .ocula-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 48px 0 0 0;
        background: rgba(0,0,0,.32);
        z-index: 1090;
        animation: ocula-fade-in .2s ease;
    }
    @keyframes ocula-fade-in { from { opacity: 0; } to { opacity: 1; } }
    [data-dock="undocked"][data-floating-open="true"] .ocula-sidebar-backdrop {
        display: block;
    }

    /* ── Sidebar 의 favorites 헤더 — 좌측 "★ Favorites" + 우측 Dock 토글 ── */
    .ocula-sidebar .fav-section .fav-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        padding: .45rem .85rem .45rem 1.05rem !important;
    }
    .ocula-sidebar .fav-section .fav-header-title {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--text-mute);
    }
    .ocula-sidebar .fav-section .fav-header-title i {
        color: var(--accent-orange);
        font-size: .8rem;
    }
    .ocula-sidebar .fav-section .ocula-dock-toggle {
        margin: 0;
    }
    /* 즐겨찾기 비어있을 때 안내 */
    .ocula-sidebar .fav-section .fav-empty {
        display: none;
        padding: .2rem 1.05rem .55rem;
        font-size: .78rem;
        color: var(--text-mute);
        font-style: italic;
    }

    /* ── Sidebar nav (favorites + 메뉴) — 기존 마크업 호환 ── */
    .ocula-sidebar-nav {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        min-width: 240px;
        scrollbar-width: thin;
        scrollbar-color: var(--border-strong) transparent;
    }
    .ocula-sidebar-nav::-webkit-scrollbar { width: 6px; }
    .ocula-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
    .ocula-sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    .ocula-sidebar #sidebar-wrapper {
        width: 100% !important;
        min-height: 0 !important;
        background: transparent !important;
        border-right: 0 !important;
        display: block !important;
        transition: none !important;
    }
    .ocula-sidebar #sidebar-rail {
        position: static !important;
        width: 100% !important;
        background: transparent !important;
        display: block !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    /* ── Main content ── */
    .ocula-main {
        flex: 1 1 auto;
        min-width: 0;
        background: var(--bg-app);
    }

    /* ── 반응형 (<768px): 강제 Undock + 플로팅 오버레이 ── */
    @media (max-width: 767px) {
        [data-dock="docked"] .ocula-sidebar {
            position: fixed;
            top: 48px;
            bottom: 0;
            left: 0;
            height: auto;
            transform: translateX(-100%);
            z-index: 1100;
            box-shadow: 4px 0 24px rgba(0,0,0,.22);
        }
        [data-dock="docked"][data-floating-open="true"] .ocula-sidebar,
        [data-dock="undocked"][data-floating-open="true"] .ocula-sidebar {
            transform: translateX(0);
        }
        [data-floating-open="true"] .ocula-sidebar-backdrop {
            display: block;
        }
    }

    /* ──────────────────────────────────────────
       서브메뉴 가이드 라인 — 깜빡임/튐 없음
       · Bootstrap collapse 의 height 트랜지션 비활성
       · .collapse::before 컨테이너 가상요소, top:0/bottom:0 → 항상 100% 높이
       · display:none ↔ block 으로 즉시 전환 → 한 번에 그려짐
       ────────────────────────────────────────── */
    .ocula-sidebar #sidebar-wrapper .collapse,
    .ocula-sidebar #sidebar-wrapper .collapsing {
        transition: none !important;
    }
    .ocula-sidebar #sidebar-wrapper .collapse:not(.show) {
        display: none !important;
    }
    .ocula-sidebar #sidebar-wrapper .collapse {
        position: relative;
    }
    .ocula-sidebar #sidebar-wrapper .collapse::before {
        content: '';
        position: absolute;
        left: 1.4rem;
        top: 0;
        bottom: 0;
        width: 1px;
        background: var(--border);
        opacity: .55;
        pointer-events: none;
        transition: none;
    }
    .ocula-sidebar #sidebar-wrapper .collapse .collapse::before {
        left: 1.4rem;
        opacity: .45;
    }
    .ocula-sidebar #sidebar-wrapper .collapse .list-group::before {
        display: none !important;
    }
    .ocula-sidebar #sidebar-wrapper .collapse.show .list-group-item {
        animation: ocula-item-fade .18s ease both;
    }
    @keyframes ocula-item-fade {
        from { opacity: 0; transform: translateX(-3px); }
        to   { opacity: 1; transform: none; }
    }
    .ocula-sidebar #sidebar-wrapper .collapse .list-group {
        position: relative;
        padding: .15rem .35rem .15rem 1.55rem;
        margin: .05rem 0 .2rem .35rem;
    }