/* ── Font Face ───────────────────────────────────── */
@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/pretendard/PretendardVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: optional;
}

/* ── Layout / Sidebar Variables ─────────────────── */
/* 기본값 = Platform 테마 (Pulsegrid — indigo). 사이드바는 테마를 따라감: 라이트 모드 = 화이트 톤, 다크 모드 = near-black.
   도메인별 전용 변수는 각 base.css에서 정의.
   Auth 전용: --sidebar-border/divider/overlay, --content-nav-bg, --filter-bg → auth/css/base.css
   Admin 전용: --sidebar-label, --tree-hover/selected/disabled, --drop-indicator → admin/css/base.css */
:root[data-theme="light"] {
    --sidebar-bg:        #ffffff;
    --sidebar-text:      #6e6e80;
    --sidebar-active:    #5e5ce6;
    --sidebar-hover:     rgba(94, 92, 230, 0.10);
    --brand-text:        #0e0e12;
    --header-bg:         #ffffff;
}

:root[data-theme="dark"] {
    --sidebar-bg:        #0b0b0e;
    --sidebar-text:      #8f8f9c;
    --sidebar-active:    #818cf8;
    --sidebar-hover:     rgba(129, 140, 248, 0.16);
    --brand-text:        #ffffff;
    --header-bg:         #131316;
}

/* 기본값 (JS 실행 전 깜빡임 방지 — light와 동일) */
:root {
    --sidebar-bg:        #ffffff;
    --sidebar-text:      #6e6e80;
    --sidebar-active:    #5e5ce6;
    --sidebar-hover:     rgba(94, 92, 230, 0.10);
    --brand-text:        #0e0e12;
    --header-bg:         #ffffff;
}

/* ── Theme Variables (Pulsegrid Design System) ─── */
:root[data-theme="light"] {
    --color-bg:          #f7f7f9;
    --color-bg-surface:  #ffffff;
    --color-bg-surface2: #f0f0f4;
    --color-text:        #0e0e12;
    --color-text-muted:  #6e6e80;
    --color-primary:     #5e5ce6;
    --color-primary-hover: #4b49cc;
    --color-border:      #e3e3ea;
    --color-navbar-bg:   #ffffff;
    --color-footer-bg:   #f0f0f4;
    --color-footer-text: #6e6e80;
    --color-success:     #12b76a;
    --color-warning:     #f79009;
    --color-info:        #2e90fa;
    --color-danger:      #f04438;
    --color-critical:    #9e77ed;
    --shadow-sm:         0 1px 2px rgba(14, 14, 18, 0.06);
    --shadow-md:         0 4px 12px rgba(14, 14, 18, 0.08);
    --shadow-lg:         0 16px 40px rgba(14, 14, 18, 0.14);
    --color-overlay:     rgba(10, 10, 14, 0.5);
    --color-on-primary:  #ffffff;
    /* ── 배지 불투명 배경 (badge-success / badge-danger) ── */
    --color-success-bg:   #d4f4e2;
    --color-success-text: #067a46;
    --color-danger-bg:    #fde4e2;
    --color-danger-text:  #b42318;
    /* ── 반투명 subtle 배경 (action-badge, tinted panels) ── */
    --color-success-subtle:          rgba(18, 183, 106, 0.14);
    --color-danger-subtle:           rgba(240, 68, 56, 0.14);
    --color-info-subtle:             rgba(46, 144, 250, 0.14);
    --color-warning-subtle:          rgba(247, 144, 9, 0.14);
    --color-critical-subtle:         rgba(158, 119, 237, 0.14);
    --color-primary-subtle:          rgba(94, 92, 230, 0.10);
    --color-muted-subtle:            rgba(110, 110, 128, 0.12);
    --color-primary-subtle-border:   rgba(94, 92, 230, 0.30);
    --color-warning-subtle-border:   rgba(247, 144, 9, 0.30);
    --color-danger-subtle-border:    rgba(240, 68, 56, 0.28);

    /* ── 차트 시리즈 색상 (ECharts 팔레트 대체) ──────────────────── */
    /* 미정의 시 ECharts 기본 팔레트로 자동 대체됨 (time-line-chart.js 참고) */
    --chart-color-1: #5e5ce6;
    --chart-color-2: #f79009;
    --chart-color-3: #12b76a;
    --chart-color-4: #2e90fa;
    --chart-color-5: #9e77ed;
    --chart-color-6: #f04438;
    --chart-color-7: #06aed4;
    --chart-color-8: #ee46bc;
    --chart-color-9: #667085;
}

:root[data-theme="dark"] {
    --color-bg:          #0b0b0e;
    --color-bg-surface:  #131316;
    --color-bg-surface2: #1b1b20;
    --color-text:        #f2f2f5;
    --color-text-muted:  #8f8f9c;
    --color-primary:     #818cf8;
    --color-primary-hover: #a5b0fa;
    --color-border:      #24242b;
    --color-navbar-bg:   #131316;
    --color-footer-bg:   #0b0b0e;
    --color-footer-text: #8f8f9c;
    --color-success:     #32d583;
    --color-warning:     #fdb022;
    --color-info:        #53b1fd;
    --color-danger:      #f97066;
    --color-critical:    #b692f6;
    --shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md:         0 4px 16px rgba(129, 140, 248, 0.16);
    --shadow-lg:         0 20px 48px rgba(129, 140, 248, 0.22);
    --color-overlay:     rgba(0, 0, 0, 0.55);
    --color-on-primary:  #ffffff;
    /* ── 배지 불투명 배경 (badge-success / badge-danger) ── */
    --color-success-bg:   #0d3321;
    --color-success-text: #75e0ab;
    --color-danger-bg:    #3a0d0a;
    --color-danger-text:  #fda29b;
    /* ── 반투명 subtle 배경 (action-badge, tinted panels) ── */
    --color-success-subtle:          rgba(50, 213, 131, 0.16);
    --color-danger-subtle:           rgba(249, 112, 102, 0.16);
    --color-info-subtle:             rgba(83, 177, 253, 0.16);
    --color-warning-subtle:          rgba(253, 176, 34, 0.16);
    --color-critical-subtle:         rgba(182, 146, 246, 0.16);
    --color-primary-subtle:          rgba(129, 140, 248, 0.14);
    --color-muted-subtle:            rgba(143, 143, 156, 0.16);
    --color-primary-subtle-border:   rgba(129, 140, 248, 0.32);
    --color-warning-subtle-border:   rgba(253, 176, 34, 0.32);
    --color-danger-subtle-border:    rgba(249, 112, 102, 0.28);

    /* ── 차트 시리즈 색상 (다크 모드 — 밝기 +15% 보정) ───────────── */
    /* 미정의 시 ECharts 기본 팔레트로 자동 대체됨 (time-line-chart.js 참고) */
    --chart-color-1: #818cf8;
    --chart-color-2: #fdb022;
    --chart-color-3: #32d583;
    --chart-color-4: #53b1fd;
    --chart-color-5: #b692f6;
    --chart-color-6: #f97066;
    --chart-color-7: #22ccee;
    --chart-color-8: #fa7bd3;
    --chart-color-9: #94969c;
}

/* 기본값: 라이트 모드 (JS 실행 전 깜빡임 방지) */
:root {
    --color-bg:          #f7f7f9;
    --color-bg-surface:  #ffffff;
    --color-bg-surface2: #f0f0f4;
    --color-text:        #0e0e12;
    --color-text-muted:  #6e6e80;
    --color-primary:     #5e5ce6;
    --color-primary-hover: #4b49cc;
    --color-border:      #e3e3ea;
    --color-navbar-bg:   #ffffff;
    --color-footer-bg:   #f0f0f4;
    --color-footer-text: #6e6e80;
    --color-success:     #12b76a;
    --color-warning:     #f79009;
    --color-info:        #2e90fa;
    --color-danger:      #f04438;
    --color-critical:    #9e77ed;
    --shadow-sm:         0 1px 2px rgba(14, 14, 18, 0.06);
    --shadow-md:         0 4px 12px rgba(14, 14, 18, 0.08);
    --shadow-lg:         0 16px 40px rgba(14, 14, 18, 0.14);
    --color-overlay:     rgba(10, 10, 14, 0.5);
    --color-on-primary:  #ffffff;
    --color-success-bg:   #d4f4e2;
    --color-success-text: #067a46;
    --color-danger-bg:    #fde4e2;
    --color-danger-text:  #b42318;
    --color-success-subtle:          rgba(18, 183, 106, 0.14);
    --color-danger-subtle:           rgba(240, 68, 56, 0.14);
    --color-info-subtle:             rgba(46, 144, 250, 0.14);
    --color-warning-subtle:          rgba(247, 144, 9, 0.14);
    --color-critical-subtle:         rgba(158, 119, 237, 0.14);
    --color-primary-subtle:          rgba(94, 92, 230, 0.10);
    --color-muted-subtle:            rgba(110, 110, 128, 0.12);
    --color-primary-subtle-border:   rgba(94, 92, 230, 0.30);
    --color-warning-subtle-border:   rgba(247, 144, 9, 0.30);
    --color-danger-subtle-border:    rgba(240, 68, 56, 0.28);

    --font-main:              'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    --radius-base:            10px;
    --radius-lg:              18px;
    --transition-base:        0.2s ease;
    --header-height:          60px;
    --content-nav-height:     0rem; /* 브레드크럼 제거로 더 이상 사용되지 않음 (2026-11) */
    --sidebar-width:          240px;
    --sidebar-collapsed-width: 64px;

	/* ── 모든 곳 공용 알림 스타일 ────────────────────────────────── */
    /* ── 알림 레벨 색상 (테마 변수 참조 → 다크모드 자동 반영) ── */
    --notif-level-0: var(--color-primary);   /* 공지 — 인디고 */
    --notif-level-1: var(--color-success);   /* 낮음 — 초록  */
    --notif-level-2: var(--color-warning);   /* 보통 — 주황  */
    --notif-level-3: var(--color-danger);    /* 위험 — 빨강  */
    --notif-level-4: var(--color-critical);  /* 긴급 — 보라  */
}

/* ── Reset & Base ────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size:       16px;
    scroll-behavior: smooth;
}

/* data-theme 선택자에서 var() 참조 — 타이밍 문제 없고 하드코딩도 없음 */
html[data-theme="light"] { background-color: var(--color-bg); }
html[data-theme="dark"]  { background-color: var(--color-bg); }

body {
    font-family:      var(--font-main);
    background-color: var(--color-bg);
    color:            var(--color-text);
    min-height:       100vh;
    display:          flex;
    flex-direction:   column;
    transition:       background-color var(--transition-base), color var(--transition-base);
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-hover);
}

/* ── Layout ──────────────────────────────────────── */
.main-content {
    flex: 1;
    width: 100%;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Button ──────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         0.5rem 1.25rem;
    border-radius:   var(--radius-base);
    border:          1px solid transparent;
    font-size:       0.9rem;
    font-weight:     500;
    cursor:          pointer;
    user-select:     none;
    transition:      background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    text-decoration: none;
}
/* hidden 속성이 display:inline-flex 에 묻히지 않도록 — 모든 .btn 의 hidden 정상화 */
.btn[hidden] { display: none; }

.btn-primary {
    background-color: var(--color-primary);
    color:            var(--color-on-primary);
    border-color:     var(--color-primary);
}

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

.btn-outline {
    background-color: transparent;
    color:            var(--color-text);
    border-color:     var(--color-border);
}

.btn-outline:hover {
    background-color: var(--color-bg-surface);
    color:            var(--color-text);
}

.btn-ghost {
    background-color: transparent;
    color:            var(--color-text-muted);
    border-color:     transparent;
}

.btn-ghost:hover {
    background-color: var(--color-bg-surface);
    color:            var(--color-text);
    border-color:     var(--color-border);
}

/* 비활성화 — 모든 btn 변형에 공통 적용 */
.btn:disabled {
    opacity:        0.4;
    cursor:         not-allowed;
    pointer-events: none;
}

.btn-icon {
    background:      none;
    border:          none;
    cursor:          pointer;
    padding:         0.375rem;
    border-radius:   var(--radius-base);
    font-size:       1.1rem;
    line-height:     1;
    transition:      background-color var(--transition-base);
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
}

.btn-icon:hover {
    background-color: var(--color-border);
}

/* ── Utility ─────────────────────────────────────── */
.text-muted {
    color: var(--color-text-muted);
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
}

/* ── Scrollbar ───────────────────────────────────── */
* {
    scrollbar-color: var(--color-border) var(--color-bg-surface);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}