/* ══════════════════════════════════════════
   SHV_NEW Design System — V2 내재화본
   css/v2/ 원본을 합쳐 SHV_NEW 내부에 고정
   cascade: tokens → reset → glass → layout → components → utilities → responsive → login
   ══════════════════════════════════════════ */

/* ══ 1. tokens.css ══ */
/* ========================================
   SHVQ V2 — Design Tokens
   Liquid Glass Design System
   ======================================== */

:root {
    /* ── Color: Base ── */
    --bg: #f0f2f5;
    --bg-grad:
        radial-gradient(1180px 700px at 12% 22%, rgba(147,197,253,.34), transparent 60%),
        radial-gradient(1080px 640px at 88% 10%, rgba(196,181,253,.28), transparent 56%),
        radial-gradient(860px 520px at 50% 46%, rgba(255,255,255,.56), transparent 58%),
        linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
    --panel: #ffffff;
    --panel-2: #f8fafc;
    --bg-2: #f5f7fa;      /* 테이블 행/열 구분 배경 */
    --bg-3: #eef1f6;      /* 테이블 헤더/고정 배경 */
    --border: #e4e9f0;
    --border-strong: #cdd5e0;

    /* ── Color: Brand ── */
    --accent: #3b6cf7;
    --accent-hover: #2952cc;
    --accent-active: #1e3fa3;
    --accent-10: rgba(59,108,247,0.10);
    --accent-15: rgba(59,108,247,0.15);
    --accent-20: rgba(59,108,247,0.20);
    --accent-30: rgba(59,108,247,0.30);
    --accent-50: rgba(59,108,247,0.50);

    /* ── Color: Semantic ── */
    --danger: #ff4466;
    --danger-hover: #e63356;
    --danger-10: rgba(255,68,102,0.10);
    --danger-15: rgba(255,68,102,0.15);
    --danger-30: rgba(255,68,102,0.30);

    --success: #00c878;
    --success-hover: #00a864;
    --success-10: rgba(0,200,120,0.10);
    --success-15: rgba(0,200,120,0.15);
    --success-30: rgba(0,200,120,0.30);

    --warn: #f5a623;
    --warn-hover: #d9901a;
    --warn-10: rgba(245,166,35,0.10);
    --warn-15: rgba(245,166,35,0.15);
    --warn-30: rgba(245,166,35,0.30);

    --info: #2aafd4;
    --info-10: rgba(42,175,212,0.10);

    /* ── Color: Text ── */
    --text-1: #1a2a40;
    --text-2: #4a5a72;
    --text-3: #8a9ab4;
    --text-inverse: #ffffff;

    /* ── Typography ── */
    --font-base: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 22px;
    --text-3xl: 28px;

    --leading-tight: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* ── Spacing (4px scale) ── */
    --sp-0: 0;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* ── Border Radius ── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
    --shadow-md: 0 8px 20px rgba(0,0,0,0.08),
                 inset 0 1.5px 0 rgba(255,255,255,0.90),
                 inset 0 -1px 0 rgba(0,0,0,0.05);
    --shadow-lg: 0 12px 30px rgba(0,0,0,0.10),
                 inset 0 1.5px 0 rgba(255,255,255,0.95),
                 inset 0 -1px 0 rgba(0,0,0,0.05);
    --shadow-focus: 0 0 0 3px var(--accent-15);
    --shadow-danger-focus: 0 0 0 3px var(--danger-15);

    /* ── Liquid Glass ── */
    /* --glass-blur 제거 — 유일한 blur는 #topbar blur(10px)만 허용 */
    --glass-bg: rgba(255,255,255,0.15);
    --glass-bg-strong: rgba(255,255,255,0.25);
    --glass-bg-card: linear-gradient(to bottom, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 100%);
    --glass-bg-input: rgba(255,255,255,0.40);
    --glass-bg-hover: rgba(255,255,255,0.30);
    --glass-border: 1px solid rgba(255,255,255,0.32);
    --glass-border-strong: 1px solid rgba(255,255,255,0.45);
    --glass-input-border: 1px solid rgba(59,108,247,0.18);
    --glass-input-focus: 0 0 0 3px rgba(59,108,247,0.12);

    /* ── Layout ── */
    --topbar-h: 60px;
    --sidebar-w: 200px;
    --sidebar-w-collapsed: 0px;
    --content-max: 1400px;
    --page-padding: var(--sp-4);

    /* ── Transition ── */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* ── Z-Index ── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-sidebar: 800;
    --z-topbar: 900;
    --z-modal-backdrop: 1000;
    --z-modal: 1010;
    --z-toast: 1100;
    --z-tooltip: 1200;

    /* ── Body Background (Light — Liquid Glass) ── */
    --body-bg:
        radial-gradient(circle at 18% 20%, rgba(219,234,254,0.80), transparent 50%),
        radial-gradient(circle at 82% 80%, rgba(224,242,254,0.70), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.40), transparent 60%),
        linear-gradient(#f4f6f9, #f4f6f9);

    /* ── Layout Tokens (light — 완전 별도 테마) ── */
    --topbar-bg:             rgba(255,255,255,0.90);
    --topbar-border:         rgba(229,231,235,0.90);
    --topbar-shadow:         0 2px 10px rgba(0,0,0,0.05);

    --sidebar-bg:            #f1f5f9;
    --sidebar-border:        #e5e7eb;
    --sidebar-shadow:        2px 0 12px rgba(0,0,0,0.08);

    --content-bg:            #f3f5f8;
    --content-border:        rgba(220,226,236,0.70);
    --content-shadow:        0 8px 32px rgba(59,108,247,0.10),
                             0 2px 8px rgba(0,0,0,0.06);

    --card-bg:               rgba(255,255,255,0.72);
    --card-border:           rgba(255,255,255,0.95);
    --card-shadow:           inset 0 1px 0 rgba(255,255,255,0.98),
                             inset 0 -1px 0 rgba(0,0,0,0.04),
                             0 6px 18px rgba(0,0,0,0.06);

    --top-btn-hover-bg:      rgba(37,99,235,0.06);
    --top-btn-active-bg:     rgba(37,99,235,0.10);
    --top-btn-active-shadow: 0 0 0 1px rgba(37,99,235,0.18);
    --top-btn-active-border: rgba(37,99,235,0.18);

    --icon-btn-hover-bg:     rgba(0,0,0,0.05);

    --user-pill-bg:          #ffffff;
    --user-pill-border:      #e5e7eb;
    --user-avatar-bg:        linear-gradient(135deg, rgba(37,99,235,0.12), rgba(2,132,199,0.12));
    --user-avatar-color:     var(--accent);

    --side-item-hover-bg:    #e8edf5;
    --side-item-hover-color: var(--text-1);
    --side-item-active-bg:   #e0e7ff;
    --side-item-active-color: #4f46e5;
    --side-item-active-border: #c7d2fe;
    --side-item-active-shadow: inset 3px 0 0 #6366f1,
                               0 1px 4px rgba(99,102,241,0.15);

    /* ── 라이트 본문 scrollbar ── */
    --scrollbar-thumb:   rgba(59,108,247,0.18);
    --scrollbar-thumb-h: rgba(59,108,247,0.32);

    /* ── Skeleton ── */
    --skeleton-base:  rgba(0,0,0,0.06);
    --skeleton-shine: rgba(255,255,255,0.65);

    /* ── Status Semantic (badge-status-* 별칭용) ── */
    --status-active-bg:   var(--success-10);
    --status-active-fg:   var(--success);
    --status-inactive-bg: rgba(0,0,0,0.06);
    --status-inactive-fg: var(--text-3);
    --status-pending-bg:  var(--warn-10);
    --status-pending-fg:  var(--warn);
    --status-cancel-bg:   var(--danger-10);
    --status-cancel-fg:   var(--danger);
    --status-draft-bg:    var(--accent-10);
    --status-draft-fg:    var(--accent);
}

/* ════════════════════════════════════════
   DARK THEME OVERRIDES
   ════════════════════════════════════════ */
[data-theme="dark"] {
    /* ── Body Background (Dark — Liquid Glass) ── */
    --body-bg:
        radial-gradient(circle at 15% 20%, #1e3a8a, transparent),
        radial-gradient(circle at 85% 80%, #0ea5e9, transparent),
        linear-gradient(#0b1220, #0b1220);

    /* ── Text ── */
    --text-1:   #e2e8f4;
    --text-2:   #8fa3c8;
    --text-3:   #506080;

    /* ── Brand ── */
    --accent:       #4f8ef7;
    --accent-hover: #3b7af5;
    --accent-10:    rgba(79,142,247,0.10);
    --accent-15:    rgba(79,142,247,0.15);
    --accent-20:    rgba(79,142,247,0.20);
    --accent-30:    rgba(79,142,247,0.30);
    --accent-50:    rgba(79,142,247,0.50);

    /* ── Glass ── */
    --glass-bg:          rgba(20,30,60,0.45);
    --glass-bg-strong:   rgba(15,22,50,0.70);
    --glass-bg-card:     linear-gradient(to bottom, rgba(30,44,80,0.55) 0%, rgba(15,22,48,0.45) 100%);
    --glass-bg-input:    rgba(255,255,255,0.05);
    --glass-bg-hover:    rgba(255,255,255,0.07);
    --glass-border:      1px solid rgba(255,255,255,0.08);
    --glass-border-strong: 1px solid rgba(255,255,255,0.14);
    --glass-input-border:  1px solid rgba(255,255,255,0.10);

    /* ── Shadows ── */
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.40);
    --shadow-md: 0 12px 40px rgba(0,0,0,0.50),
                 inset 0 1.5px 0 rgba(255,255,255,0.25),
                 inset 0 -1px 0 rgba(255,255,255,0.05);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.60),
                 inset 0 1.5px 0 rgba(255,255,255,0.28),
                 inset 0 -1px 0 rgba(255,255,255,0.05);

    /* ── Layout Glass Tokens (dark) ── */
    --topbar-bg:             rgba(15,25,60,0.60);
    --topbar-border:         rgba(255,255,255,0.10);
    --topbar-shadow:         0 4px 24px rgba(0,0,0,0.50),
                             inset 0 1px 0 rgba(255,255,255,0.06);
    --topbar-bottom-line:    inset 0 -1px 0 rgba(79,142,247,0.12);

    --sidebar-bg:            linear-gradient(180deg, #1e3a82 0%, #0f1c5c 60%, #0c1645 100%);
    --sidebar-border:        rgba(255,255,255,0.10);
    --sidebar-shadow:        inset 0 1px 0 rgba(255,255,255,0.06),
                             2px 0 12px rgba(79,142,247,0.08),
                             4px 0 24px rgba(0,0,0,0.40);

    --card-bg:               rgba(20,30,60,0.38);
    --card-border:           rgba(255,255,255,0.18);
    --card-shadow:           inset 0 1px 0 rgba(255,255,255,0.25),
                             inset 0 -1px 0 rgba(255,255,255,0.05),
                             0 16px 45px rgba(0,0,0,0.60);

    --content-bg:            rgba(15,22,40,0.20);
    --content-border:        rgba(255,255,255,0.07);
    --content-shadow:        none;

    /* ── 다크 테이블 헤더 배경 ── */
    --panel-2:               rgba(255,255,255,0.035);
    --bg-2:                  rgba(255,255,255,0.04);
    --bg-3:                  rgba(255,255,255,0.07);

    --top-btn-hover-bg:      rgba(255,255,255,0.06);
    --top-btn-active-bg:     rgba(79,142,247,0.18);
    --top-btn-active-shadow: 0 0 0 1px rgba(79,142,247,0.30),
                             inset 0 1px 0 rgba(79,142,247,0.20);
    --top-btn-active-border: rgba(79,142,247,0.35);

    --icon-btn-hover-bg:     rgba(255,255,255,0.07);

    --user-pill-bg:          rgba(255,255,255,0.06);
    --user-pill-border:      rgba(255,255,255,0.12);
    --user-avatar-bg:        linear-gradient(135deg, rgba(79,142,247,0.30), rgba(56,189,248,0.30));
    --user-avatar-color:     #7eb3ff;

    --side-item-hover-bg:    rgba(255,255,255,0.08);
    --side-item-hover-color: #e2e8f4;
    --side-item-active-bg:   rgba(79,142,247,0.18);
    --side-item-active-color: #90c2ff;
    --side-item-active-border: rgba(79,142,247,0.30);
    --side-item-active-shadow: inset 3px 0 0 #4f8ef7,
                               0 1px 4px rgba(0,0,0,0.30);

    /* ── 다크 본문 scrollbar ── */
    --scrollbar-thumb:   rgba(79,142,247,0.20);
    --scrollbar-thumb-h: rgba(79,142,247,0.35);

    /* ── Skeleton (dark) ── */
    --skeleton-base:  rgba(255,255,255,0.06);
    --skeleton-shine: rgba(255,255,255,0.14);

    /* ── Status Semantic (dark overrides) ── */
    --status-inactive-bg: rgba(255,255,255,0.07);
    --status-inactive-fg: var(--text-3);
    --status-draft-bg:    rgba(79,142,247,0.14);
    --status-draft-fg:    #90c2ff;
}

/* ══ 2. reset.css ══ */
/* ========================================
   SHVQ V2 — Reset
   ======================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    line-height: var(--leading-normal);
    font-family: var(--font-base);
    font-size: var(--text-base);
}

html, body {
    height: 100%;
    overflow: hidden;
    color: var(--text-1);
    background: var(--body-bg);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--duration-normal) var(--ease-default),
                color     var(--duration-normal) var(--ease-default);
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

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

img, svg, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-3);
    opacity: 1;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

ul, ol {
    list-style: none;
}

fieldset {
    border: none;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

::selection {
    background: var(--accent-20);
    color: var(--text-1);
}

/* scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, rgba(0,0,0,0.15));
    border-radius: var(--radius-full);
    transition: background var(--duration-fast);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-h, rgba(0,0,0,0.25));
}

/* ══ 3. glass.css ══ */
/* ========================================
   SHVQ V2 — Liquid Glass Utilities
   ※ .glass-* 유틸리티 클래스: backdrop-filter 제거 (GPU 렌더링 보호)
     컴포넌트 전용 blur는 components.css에서 유지:
       - #topbar (layout.css, blur 10px)
       - .modal-overlay, .modal-box (blur 12-20px)
       - .btn-glass-primary (blur 12px)
       - dark-mode form input (blur 6px)
       - toast/notification (blur 18px)
   ======================================== */

/* ── Base Glass ── */
.glass {
    background: var(--glass-bg);
    /* backdrop-filter 제거 */
    border: var(--glass-border);
    box-shadow: var(--shadow-md);
}

/* ── Glass Strong (sidebar, topbar) ── */
.glass-strong {
    background: var(--glass-bg-strong);
    /* backdrop-filter 제거 */
    border: var(--glass-border-strong);
    box-shadow: var(--shadow-md);
}

/* ── Glass Card ── */
.glass-card {
    background: var(--glass-bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: var(--glass-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
}

/* ── Glass Panel (sidebar, drawer) ── */
.glass-panel {
    background: linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 100%);
    /* backdrop-filter 제거 */
    border: var(--glass-border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
}

/* ── Glass Input ── */
.glass-input {
    background: var(--glass-bg-input);
    border: var(--glass-input-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}

.glass-input:focus,
.glass-input:focus-within {
    border-color: var(--accent);
    box-shadow: var(--glass-input-focus);
}

/* ── Glass Modal Backdrop ── */
.glass-modal-backdrop {
    background: rgba(0,0,0,0.40);
    /* backdrop-filter 제거 — 모달 배경은 솔리드 처리 */
}

/* ── Glass Hover ── */
.glass-hover {
    transition: background var(--duration-fast) var(--ease-default);
}

.glass-hover:hover {
    background: var(--glass-bg-hover);
}

/* ── Glass Active (sidebar active item) ── */
.glass-active {
    background: linear-gradient(135deg, rgba(26,58,110,0.75), rgba(41,82,163,0.80));
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 4px 14px rgba(41,82,163,0.20),
                inset 0 0 0 1px rgba(255,255,255,0.10);
    /* backdrop-filter 제거 */
    color: var(--text-inverse);
}

/* ════════════════════════════════════════
   LIGHT MODE — Liquid Glass Light
   ════════════════════════════════════════ */
:root:not([data-theme="dark"]) .glass,
:root:not([data-theme="dark"]) .glass-strong,
:root:not([data-theme="dark"]) .glass-card,
:root:not([data-theme="dark"]) .glass-panel {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

:root:not([data-theme="dark"]) .glass-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(0,0,0,0.05);
}

:root:not([data-theme="dark"]) .glass-active {
    background: var(--side-item-active-bg);
    border: 1px solid var(--side-item-active-border);
    box-shadow: var(--side-item-active-shadow);
    color: var(--side-item-active-color);
}

:root:not([data-theme="dark"]) .glass-hover:hover {
    background: var(--side-item-hover-bg);
}

/* ════════════════════════════════════════
   DARK MODE — Liquid Glass Dark
   ════════════════════════════════════════ */
[data-theme="dark"] .glass,
[data-theme="dark"] .glass-strong,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .glass-panel {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

[data-theme="dark"] .glass-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.70),
        inset 0 1px 0 rgba(255,255,255,0.30),
        inset 0 -1px 0 rgba(255,255,255,0.05);
}

/* ══════════════════════════════════════════════════
   REFINED DARK LIQUID GLASS OVERRIDE (Claude Design)
   하루 8시간 사용 최적화 — 낮은 채도, 명확한 위계
   추가일: 2026-04-19
   ══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   REFINED DARK LIQUID GLASS OVERRIDE
   하루 8시간 사용 최적화: 낮은 채도, 명확한 위계
═══════════════════════════════════════════ */

/* ── Body: deeper midnight ── */
[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(30,60,160,.28) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(10,100,180,.18) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 40%, rgba(20,30,80,.25) 0%, transparent 60%),
    #080e1c;
}

/* ── Topbar: ultra-thin glass ── */
[data-theme="dark"] #topbar {
  background: rgba(8,14,28,.75) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 4px 24px rgba(0,0,0,.5) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── Sidebar: premium navy glass ── */
[data-theme="dark"] #sidebar {
  background: linear-gradient(180deg,
    rgba(15,28,80,.92) 0%,
    rgba(10,18,60,.95) 50%,
    rgba(8,14,48,.97) 100%) !important;
  border-right: 1px solid rgba(79,142,247,.12) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04) !important;
}

/* ── Cards: premium glass ── */
[data-theme="dark"] .card {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.055) 0%,
    rgba(255,255,255,.025) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 8px 32px rgba(0,0,0,.35),
    0 1px 0 rgba(0,0,0,.2) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── DV Header: slightly elevated ── */
[data-theme="dark"] .dv-header {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.03) 100%
  ) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* ── dv-title: softer white ── */
[data-theme="dark"] .dv-title {
  color: rgba(235,242,255,.92) !important;
  letter-spacing: -.3px;
  font-weight: 800 !important;
}

/* ── Pills: refined ── */
[data-theme="dark"] .dv-pill {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.45) !important;
}

/* ── KPI cards: colored accent top bars ── */
[data-theme="dark"] .dv-summary { gap: 10px; grid-template-columns: repeat(4, 1fr) !important; }
.dv-summary { grid-template-columns: repeat(4, 1fr) !important; }

[data-theme="dark"] .dv-sum-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.3) !important;
  transition: transform .15s, box-shadow .15s;
}
[data-theme="dark"] .dv-sum-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 36px rgba(0,0,0,.45) !important;
}
[data-theme="dark"] .dv-sum-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  border-radius: 12px 12px 0 0;
}
[data-theme="dark"] .dv-sum-card:nth-child(1)::before { background: linear-gradient(90deg, #4f8ef7, #60b8ff) }
[data-theme="dark"] .dv-sum-card:nth-child(2)::before { background: linear-gradient(90deg, #a78bfa, #c4b5fd) }
[data-theme="dark"] .dv-sum-card:nth-child(3)::before { background: linear-gradient(90deg, #00c878, #34d399) }
[data-theme="dark"] .dv-sum-card:nth-child(4)::before { background: linear-gradient(90deg, #f59e0b, #fbbf24) }

[data-theme="dark"] .dv-sum-label { color: rgba(255,255,255,.4) !important; font-size: 11px; letter-spacing: .04em }
[data-theme="dark"] .dv-sum-value { color: rgba(235,242,255,.92) !important; font-size: 28px; font-weight: 800 }
[data-theme="dark"] .dv-sum-sub   { color: rgba(255,255,255,.3) !important; font-size: 11px }

/* ── Tab bar: subtle glass ── */
[data-theme="dark"] .sv-tab-bar-scroll { padding: 4px 6px 0 }
[data-theme="dark"] .tab-item {
  color: rgba(255,255,255,.38) !important;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  transition: color .12s, background .12s;
}
[data-theme="dark"] .tab-item:hover {
  color: rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.04);
}
[data-theme="dark"] .tab-active {
  color: rgba(120,175,255,.95) !important;
  font-weight: 600 !important;
  background: rgba(79,142,247,.10) !important;
  border-bottom-color: #4f8ef7 !important;
}
[data-theme="dark"] .tab-badge {
  background: rgba(79,142,247,.2) !important;
  color: #90c2ff !important;
  font-size: 10px;
}

/* ── Info sections ── */
[data-theme="dark"] .dv-info-section {
  border-bottom-color: rgba(255,255,255,.06) !important;
}
[data-theme="dark"] .dv-section-title {
  color: rgba(255,255,255,.55) !important;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
[data-theme="dark"] .dv-section-title::before {
  background: linear-gradient(180deg, #4f8ef7, #2aafd4) !important;
}
[data-theme="dark"] .dv-row-label { color: rgba(255,255,255,.32) !important; font-size: 11px }
[data-theme="dark"] .dv-row-value { color: rgba(235,242,255,.85) !important; font-size: 13px }
[data-theme="dark"] .dv-row-value.dv-primary {
  color: rgba(235,242,255,.95) !important;
  font-size: 15px;
  font-weight: 700;
}

/* ── Address ── */
[data-theme="dark"] .dv-zip {
  background: rgba(79,142,247,.15) !important;
  color: #90c2ff !important;
}
[data-theme="dark"] .dv-addr-text { color: rgba(235,242,255,.75) !important }

/* ── Buttons refined ── */
[data-theme="dark"] .btn-glass-primary {
  background: linear-gradient(135deg, rgba(59,108,247,.8), rgba(42,175,212,.7)) !important;
  border: 1px solid rgba(79,142,247,.35) !important;
  box-shadow: 0 2px 12px rgba(59,108,247,.25), inset 0 1px 0 rgba(255,255,255,.12) !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-glass-primary:hover {
  box-shadow: 0 4px 20px rgba(59,108,247,.45), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
[data-theme="dark"] .btn-outline {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.55) !important;
}
[data-theme="dark"] .btn-outline:hover {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.85) !important;
}

/* ── Tables ── */
[data-theme="dark"] .tbl thead th {
  color: rgba(255,255,255,.3) !important;
  border-bottom-color: rgba(255,255,255,.07) !important;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(255,255,255,.02);
}
[data-theme="dark"] .tbl tbody tr { border-bottom-color: rgba(255,255,255,.04) !important }
[data-theme="dark"] .tbl tbody tr:hover { background: rgba(255,255,255,.03) !important }
[data-theme="dark"] .tbl tbody td { color: rgba(235,242,255,.75) !important }

/* ── Empty state ── */
[data-theme="dark"] .empty-state { color: rgba(255,255,255,.2) !important }
[data-theme="dark"] .empty-icon { font-size: 28px; opacity: .2 }
[data-theme="dark"] .empty-message { font-size: 13px }

/* ── Scrollbar ── */
[data-theme="dark"] #content::-webkit-scrollbar { width: 4px }
[data-theme="dark"] #content::-webkit-scrollbar-thumb { background: rgba(79,142,247,.2); border-radius: 4px }
[data-theme="dark"] #sidebar::-webkit-scrollbar { width: 3px }
[data-theme="dark"] #sidebar::-webkit-scrollbar-thumb { background: rgba(79,142,247,.15) }

/* ══ 4. layout.css ══ */
/* ========================================
   SHVQ V2 — Layout  (Liquid Glass + Dark/Light)
   ======================================== */

/* ══════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════ */
#topbar {
    position: fixed;
    top: var(--shell-topbar-top, 10px);
    left: var(--shell-edge-gap, 12px);
    right: var(--shell-edge-gap, 12px);
    z-index: var(--z-topbar);
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    padding: 0 var(--sp-3);
    gap: var(--sp-1);
    border-radius: var(--shell-topbar-radius, var(--radius-xl));

    background: var(--topbar-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--topbar-border);
    box-shadow: var(--topbar-shadow);

    transition: background var(--duration-normal) var(--ease-default),
                border-color var(--duration-normal) var(--ease-default),
                box-shadow var(--duration-normal) var(--ease-default);
}

/* ── Logo ── */
.top-logo {
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    margin-right: var(--sp-3);
    white-space: nowrap;
    letter-spacing: -0.3px;
    text-decoration: none;
}

.logo-sh {
    background: linear-gradient(135deg, #1a2a40 0%, #3b6cf7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: var(--weight-extrabold);
}

[data-theme="dark"] .logo-sh {
    background: linear-gradient(135deg, #7eb3ff 0%, #4f8ef7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-vision {
    color: var(--text-2);
    font-weight: var(--weight-medium);
}

.logo-portal {
    background: linear-gradient(135deg, #3b6cf7 0%, #2aafd4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: var(--weight-semibold);
}

/* ── Topbar Nav ── */
.top-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: var(--sp-2);
    height: 100%;
}

.top-menu-btn {
    padding: 0 14px;
    height: 36px;
    font-size: 13px;
    font-weight: var(--weight-semibold);
    color: var(--text-2);
    display: flex;
    align-items: center;
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition:
        background var(--duration-fast) var(--ease-default),
        color var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

.top-menu-btn:hover {
    background: var(--top-btn-hover-bg);
    color: var(--text-1);
}

[data-theme="dark"] .top-menu-btn:hover {
    color: #8fb4ff;
}

.top-menu-btn.active {
    background: var(--top-btn-active-bg);
    color: var(--accent);
    font-weight: var(--weight-bold);
    box-shadow: var(--top-btn-active-shadow);
    border: 1px solid var(--top-btn-active-border);
}

/* ── Sidebar Toggle ── */
.sidebar-toggle {
    font-size: var(--text-lg);
    color: var(--text-2);
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    transition:
        background var(--duration-fast) var(--ease-default),
        color var(--duration-fast) var(--ease-default);
}

.sidebar-toggle:hover {
    background: var(--icon-btn-hover-bg);
    color: var(--text-1);
}

/* ── Topbar Right ── */
.top-spacer { flex: 1; }

.top-right {
    display: flex;
    align-items: center;
    gap: 2px;
}

.top-icon-btn {
    font-size: 15px;
    color: var(--text-2);
    padding: 7px 9px;
    border-radius: var(--radius-sm);
    transition:
        background var(--duration-fast) var(--ease-default),
        color var(--duration-fast) var(--ease-default);
}

.top-icon-btn:hover {
    background: var(--icon-btn-hover-bg);
    color: var(--text-1);
}

.top-user {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 4px var(--sp-2) 4px var(--sp-2);
    border-radius: var(--radius-full);
    background: var(--user-pill-bg);
    border: 1px solid var(--user-pill-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
    margin-left: var(--sp-1);
    transition:
        background var(--duration-fast) var(--ease-default),
        border-color var(--duration-fast) var(--ease-default);
}

.user-photo {
    width: 26px; height: 26px;
    border-radius: var(--radius-full);
    border: 2px solid rgba(255,255,255,0.50);
    object-fit: cover;
}

.user-photo-default {
    width: 26px; height: 26px;
    border-radius: var(--radius-full);
    border: 2px solid rgba(255,255,255,0.40);
    background: var(--user-avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--user-avatar-color);
    font-size: 12px;
}

.user-name {
    color: var(--text-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

/* ══════════════════════════════════════════
   THEME SWITCH (다크/라이트 토글)
   ══════════════════════════════════════════ */
.theme-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin-right: 4px;
    user-select: none;
}

.theme-switch input[type="checkbox"] {
    display: none;
}

.switch-track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: var(--radius-full);
    background: rgba(59,108,247,0.15);
    border: 1px solid rgba(59,108,247,0.25);
    transition:
        background var(--duration-normal) var(--ease-default),
        border-color var(--duration-normal) var(--ease-default);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.10);
}

[data-theme="dark"] .switch-track {
    background: rgba(79,142,247,0.25);
    border-color: rgba(79,142,247,0.40);
}

.switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--duration-normal) var(--ease-default),
                background var(--duration-normal) var(--ease-default);
    font-size: 9px;
    color: var(--accent);
}

.theme-switch input:checked ~ .switch-track .switch-thumb {
    transform: translateX(20px);
    background: var(--accent);
    color: #ffffff;
}

/* 아이콘 전환 */
.switch-thumb .icon-sun  { display: block; }
.switch-thumb .icon-moon { display: none; }

.theme-switch input:checked ~ .switch-track .switch-thumb .icon-sun  { display: none; }
.theme-switch input:checked ~ .switch-track .switch-thumb .icon-moon { display: block; }

/* ══════════════════════════════════════════
   APP BODY
   ══════════════════════════════════════════ */
#app-body {
    display: flex;
    gap: var(--shell-app-body-gap, var(--sp-2));
    height: calc(100vh - var(--topbar-h) - 26px);
    min-height: var(--shell-app-body-min-height, auto);
    margin-top: var(--shell-app-body-margin-top, calc(var(--topbar-h) + 16px));
    padding: var(--shell-app-body-padding, 0 12px 12px);
    width: var(--shell-app-body-width, auto);
}

/* ── Sidebar Backdrop ── */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sidebar) - 1);
    background: rgba(0,0,0,0.25);
    /* blur 제거 — GPU 레이어 충돌 방지 */
}

.sidebar-open .sidebar-backdrop { display: block; }

/* ══════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════ */
#sidebar {
    width: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: var(--shell-sidebar-radius, var(--radius-lg));
    transition:
        width .22s var(--ease-default),
        opacity .22s var(--ease-default),
        background var(--duration-normal) var(--ease-default),
        border-color var(--duration-normal) var(--ease-default),
        border-radius var(--duration-normal) var(--ease-default),
        box-shadow var(--duration-normal) var(--ease-default);

    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    box-shadow: var(--sidebar-shadow);

    scrollbar-width: thin;
    scrollbar-color: var(--accent-20) transparent;
}

/* 라이트 사이드바 — border-right만 */
:root:not([data-theme="dark"]) #sidebar {
    border: none;
    border-right: 1px solid #e5e7eb;
    border-radius: 0;
}

/* 사이드바 — blur 없음 (GPU 렌더링 보호, 솔리드 배경) */
/* 다크 사이드바 — accent blue border + subtle glow */
[data-theme="dark"] #sidebar {
    border-right: 1px solid rgba(79,142,247,0.20);
}

/* 다크 헤더 — 하단 accent blue 라인으로 통일감 */
[data-theme="dark"] #topbar {
    box-shadow: var(--topbar-shadow), var(--topbar-bottom-line);
}

/* 라이트 모드 — 헤더 blur 최소화 (탁함 방지, opacity 높여 solid하게) */
:root:not([data-theme="dark"]) #topbar {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 다크 모드 — 헤더 blur(10px) 유지 (딱 1개) */

#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb {
    background: var(--accent-20);
    border-radius: var(--radius-full);
}
#sidebar::-webkit-scrollbar-track { background: transparent; }

/* ── Side Section ── */
.side-section { padding: var(--shell-side-section-padding, var(--sp-2) var(--sp-2)); }
.side-section.hidden { display: none; }

/* ── Side Title ── */
.side-title {
    padding: var(--shell-side-title-padding, 10px var(--sp-3) 6px);
    font-size: 10px;
    font-weight: var(--weight-bold);
    color: var(--accent);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0.75;
    margin-top: var(--sp-1);
    position: relative;
}

.side-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--sp-3);
    right: var(--sp-3);
    height: 1px;
    background: linear-gradient(90deg,
        var(--accent-20),
        var(--accent-10) 70%,
        transparent
    );
    transition: background var(--duration-normal) var(--ease-default);
}

.side-title i,
.side-item i { display: none; }

/* 다크모드 — side-title 가시성 강화 */
[data-theme="dark"] .side-title {
    opacity: 0.90;
}

/* ── Side Item ── */
.side-item {
    display: block;
    padding: var(--shell-side-item-padding, 8px var(--sp-3));
    color: var(--text-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-md);
    margin: 1px 0;
    transition:
        background var(--duration-fast) var(--ease-default),
        color var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

.side-item:visited { color: var(--text-2); }

.side-item:hover {
    background: var(--side-item-hover-bg);
    color: var(--side-item-hover-color);
    box-shadow: 0 2px 8px rgba(59,108,247,0.06),
                inset 0 1px 0 rgba(255,255,255,0.50);
}

[data-theme="dark"] .side-item:hover {
    box-shadow: none;
}

.side-item.active {
    background: var(--side-item-active-bg);
    color: var(--side-item-active-color);
    font-weight: var(--weight-semibold);
    border: 1px solid var(--side-item-active-border);
    box-shadow: var(--side-item-active-shadow);
}

/* 다크에서는 active에 backdrop-filter 제거 (이미 배경이 어두움) */
[data-theme="dark"] .side-item.active {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: var(--radius-sm);
}

/* 라이트에서는 border-radius만 */
:root:not([data-theme="dark"]) .side-item.active {
    border-radius: var(--radius-sm);
}

.side-item.active:visited { color: var(--side-item-active-color); }

/* 개발 섹션 전용 강조 */
#sidebar .side-section[data-system="dev"],
#side-m-dev {
    position: relative;
    margin-top: var(--sp-2);
    border: 1px solid rgba(59,108,247,0.18);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(180deg, rgba(59,108,247,0.10), rgba(16,185,129,0.04)),
        var(--panel);
    box-shadow: 0 10px 24px rgba(59,108,247,0.08);
}
[data-theme="dark"] #sidebar .side-section[data-system="dev"],
[data-theme="dark"] #side-m-dev {
    border-color: rgba(79,142,247,0.24);
    background:
        linear-gradient(180deg, rgba(79,142,247,0.18), rgba(34,197,94,0.05)),
        rgba(15,23,42,0.84);
    box-shadow: 0 14px 32px rgba(0,0,0,0.24);
}
#sidebar .side-section[data-system="dev"] .side-title,
#side-m-dev .side-title {
    color: #2f5bff;
    opacity: 1;
}
[data-theme="dark"] #sidebar .side-section[data-system="dev"] .side-title,
[data-theme="dark"] #side-m-dev .side-title {
    color: #9cc3ff;
}
#sidebar .side-section[data-system="dev"] .side-title::after,
#side-m-dev .side-title::after {
    left: var(--sp-2);
    right: var(--sp-2);
    background: linear-gradient(90deg, rgba(59,108,247,0.35), rgba(16,185,129,0.18), transparent);
}
#sidebar .side-section[data-system="dev"] .side-item.active,
#side-m-dev .side-item.active {
    background: linear-gradient(135deg, rgba(59,108,247,0.16), rgba(16,185,129,0.08));
    border-color: rgba(59,108,247,0.22);
}
[data-theme="dark"] #sidebar .side-section[data-system="dev"] .side-item.active,
[data-theme="dark"] #side-m-dev .side-item.active {
    background: linear-gradient(135deg, rgba(79,142,247,0.22), rgba(34,197,94,0.10));
    border-color: rgba(79,142,247,0.28);
}

/* ══════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════ */
#content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--shell-content-padding, var(--sp-3));
    min-width: 0;
    border-radius: var(--radius-lg);
    background: var(--content-bg);
    border: 1px solid var(--content-border);
    box-shadow: var(--content-shadow, none);
    transition:
        background var(--duration-normal) var(--ease-default),
        border-color var(--duration-normal) var(--ease-default);

    scrollbar-width: thin;
    scrollbar-color: var(--accent-20) transparent;
}

#content::-webkit-scrollbar { width: 5px; }
#content::-webkit-scrollbar-thumb {
    background: var(--accent-20);
    border-radius: var(--radius-full);
}
#content::-webkit-scrollbar-track { background: transparent; }

/* ── Page Structure ──
   .page-header    : flex row (제목 좌, 액션버튼 우) — mat views 전용
   .page-header-row: flex row (components.css) — 신규 뷰에서는 이것을 사용
   ※ page-header / page-title / page-subtitle 는 이 파일이 canonical, components.css 중복 없음 */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-5) 0;
}

.page-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: var(--weight-bold);
    color: var(--text-1);
}

.page-subtitle {
    margin: 0;
    font-size: var(--text-base);
    color: var(--text-3);
}

.page-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

/* ══════════════════════════════════════════
   SIDEBAR COLLAPSED
   ══════════════════════════════════════════ */
.sidebar-collapsed #sidebar {
    width: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    border: none;
    pointer-events: none;
    overflow: hidden;
}

/* ══════════════════════════════════════════
   DROPDOWN (보존)
   ══════════════════════════════════════════ */
.top-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--panel);
    /* blur 제거 — GPU 레이어 충돌 방지, 솔리드 배경으로 대체 */
    border: 1px solid var(--topbar-border);
    border-radius: var(--radius-md);
    min-width: 170px;
    padding: var(--sp-1) 0;
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
}

[data-theme="dark"] .top-dropdown {
    background: #0f1c5c;
}

.top-dropdown.open {
    display: block;
    animation: dd-fade-in var(--duration-fast) var(--ease-out);
}

@keyframes dd-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.top-dd-item {
    display: block;
    padding: 9px var(--sp-4);
    color: var(--text-2);
    font-size: var(--text-sm);
    transition:
        background var(--duration-fast) var(--ease-default),
        color var(--duration-fast) var(--ease-default);
}

.top-dd-item:hover { background: var(--accent-10); color: var(--accent); }
.top-dd-item.active { background: var(--accent-10); color: var(--accent); font-weight: var(--weight-bold); }

/* ══════════════════════════════════════════
   ACCORDION (보존)
   ══════════════════════════════════════════ */
.side-acc { border-bottom: 1px solid rgba(255,255,255,0.10); }

.side-acc-head {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 10px var(--sp-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-2);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}

.side-acc-head:hover { background: var(--side-item-hover-bg); color: var(--text-1); }
.side-acc-head i:first-child { width: 14px; text-align: center; color: var(--accent); }

.side-acc-arrow {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-3);
    transition: transform var(--duration-fast) var(--ease-default);
}

.side-acc.open .side-acc-arrow { transform: rotate(90deg); }
.side-acc-body { display: none; }
.side-acc.open .side-acc-body { display: block; }

/* ══ 5. components.css ══ */
/* ========================================
   SHVQ V2 — Components
   ======================================== */

/* ══════════════════════════════════════
   Button
   ══════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: 7px var(--sp-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}

.btn-sm {
    padding: 5px var(--sp-3);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 10px var(--sp-6);
    font-size: var(--text-md);
}

.btn-primary {
    background: linear-gradient(135deg, #4a7aff, var(--accent-hover));
    color: var(--text-inverse);
    box-shadow: 0 2px 8px var(--accent-30);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-hover), var(--accent-active));
    box-shadow: 0 4px 12px var(--accent-30);
}

/* ── Glass Primary (등록/주요 액션용) ── */
.btn-glass-primary {
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    background: rgba(59,108,247,0.16);
    border: 1px solid rgba(59,108,247,0.38);
    color: var(--accent);
    /* ❻ 등록 버튼 글로우 */
    box-shadow: 0 4px 16px rgba(59,108,247,0.26),
                inset 0 1px 0 rgba(255,255,255,0.18);
    font-weight: var(--weight-semibold);
}

.btn-glass-primary:hover {
    background: rgba(59,108,247,0.26);
    border-color: rgba(59,108,247,0.55);
    color: var(--accent);
    box-shadow: 0 6px 20px rgba(59,108,247,0.22),
                inset 0 1px 0 rgba(255,255,255,0.22);
}

.btn-glass-primary:active {
    background: rgba(59,108,247,0.34);
    box-shadow: 0 2px 8px rgba(59,108,247,0.20),
                inset 0 1px 0 rgba(255,255,255,0.12);
}

[data-theme="dark"] .btn-glass-primary {
    background: rgba(79,142,247,0.14);
    border-color: rgba(79,142,247,0.32);
    color: #90c2ff;
    box-shadow: 0 4px 16px rgba(79,142,247,0.28),
                inset 0 1px 0 rgba(255,255,255,0.08);
}

[data-theme="dark"] .btn-glass-primary:hover {
    background: rgba(79,142,247,0.24);
    border-color: rgba(79,142,247,0.48);
    color: #b8d4ff;
    box-shadow: 0 6px 22px rgba(79,142,247,0.38),
                inset 0 1px 0 rgba(255,255,255,0.10);
}

.btn-danger {
    background: var(--danger);
    color: var(--text-inverse);
    box-shadow: 0 2px 8px var(--danger-30);
}

.btn-danger:hover {
    background: var(--danger-hover);
}

.btn-success {
    background: var(--success);
    color: var(--text-inverse);
}

.btn-success:hover {
    background: var(--success-hover);
}

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

.btn-ghost:hover {
    background: var(--accent-10);
    color: var(--text-1);
}

.btn-outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent-30);
}

.btn-outline:hover {
    background: var(--accent-10);
    border-color: var(--accent);
}

.btn-icon {
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
}

.btn i,
.btn svg {
    font-size: 13px;
}

/* ══════════════════════════════════════
   Card
   ══════════════════════════════════════ */
.card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: transform var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}

/* ── Card hover: Light ── */
:root:not([data-theme="dark"]) .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

/* ── Card: Dark ── */
[data-theme="dark"] .card {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
}
[data-theme="dark"] .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.08) 40%,
        rgba(255,255,255,0.02) 70%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}
[data-theme="dark"] .card > * {
    position: relative;
    z-index: 1;
}
[data-theme="dark"] .card:nth-child(odd) {
    background: rgba(20,30,60,0.40);
}
[data-theme="dark"] .card:nth-child(even) {
    background: rgba(20,30,60,0.48);
}
[data-theme="dark"] .card:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        0 24px 65px rgba(0,0,0,0.75);
}

.card-header {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text-1);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.card-body {
    padding: var(--sp-4);
}

.card-footer {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
}

/* ══════════════════════════════════════
   Table (공통)
   ══════════════════════════════════════ */
.tbl {
    width: 100%;
    font-size: var(--text-sm);
    border-collapse: separate;
    border-spacing: 0;
}

.tbl th,
.tbl td {
    padding: 9px var(--sp-3);
    text-align: left;
    border-bottom: 1px solid var(--border);
}

/* ── 헤더 ── */
.tbl th {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-2);
    background: var(--panel-2);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}

/* 라이트 헤더 하단 구분선 */
:root:not([data-theme="dark"]) .tbl th {
    border-bottom: 2px solid var(--border-strong, #cdd5e0);
}

/* 다크 헤더 — 명시적 배경 + 하단 강조선 */
[data-theme="dark"] .tbl th {
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(79,142,247,0.18);
    color: #8fa3c8;
}

.tbl th:hover {
    background: var(--accent-10);
    color: var(--accent);
}

/* 정렬 비활성 헤더 */
.tbl th[data-sort="false"] { cursor: default; }
.tbl th[data-sort="false"]:hover { background: var(--panel-2); color: var(--text-2); }

[data-theme="dark"] .tbl th[data-sort="false"]:hover {
    background: rgba(255,255,255,0.04);
    color: #8fa3c8;
}

/* ── 정렬 아이콘 ── */
.tbl th .sort-icon {
    margin-left: 5px;
    font-size: 10px;
    color: var(--text-3);
    opacity: 0.35;
    transition: opacity var(--duration-fast), color var(--duration-fast);
    vertical-align: middle;
}

.tbl th:hover .sort-icon { opacity: 0.7; }

.tbl th.sorted {
    color: var(--accent);
    background: var(--accent-10);
}
.tbl th.sorted .sort-icon {
    color: var(--accent);
    opacity: 1;
}

/* ── 셀 ── */
.tbl td {
    color: var(--text-1);
    vertical-align: middle;
}

/* ── 행 ── */
.tbl tbody tr {
    transition: background var(--duration-fast) var(--ease-default);
}

.tbl tbody tr:hover { background: #eef3ff; }

[data-theme="dark"] .tbl tbody tr:hover {
    background: rgba(79,142,247,0.11);
}

.tbl tbody tr[onclick],
.tbl tbody tr.clickable { cursor: pointer; }

/* ── 유틸 ── */
.tbl-striped tbody tr:nth-child(even) { background: rgba(0,0,0,0.015); }
[data-theme="dark"] .tbl-striped tbody tr:nth-child(even) { background: rgba(255,255,255,0.025); }

/* 행 번호 컬럼 */
.td-no {
    color: var(--accent-50);
    text-align: center;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-medium);
}

.tbl .td-center,
.tbl th.th-center { text-align: center; }

.tbl .td-right,
.tbl th.th-right  { text-align: right; }

.tbl .td-num     { font-variant-numeric: tabular-nums; text-align: right; }
.tbl .td-mono    { font-family: var(--font-mono, monospace); font-size: var(--text-xs); }
.tbl .td-muted   { color: var(--text-3); }
.tbl .td-nowrap  { white-space: nowrap; }
.tbl .td-ellipsis{
    max-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

/* sticky 헤더 (스크롤 시 구분 그림자) */
.tbl-sticky-header thead {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}
.tbl-sticky-header thead th {
    box-shadow: 0 1px 0 var(--border), 0 3px 8px rgba(0,0,0,0.04);
}

/* 다크모드 sticky 그림자 */
[data-theme="dark"] .tbl-sticky-header thead th {
    box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 3px 8px rgba(0,0,0,0.25);
}

/* ══════════════════════════════════════
   Search Bar (공통 — .shv-search)
   ══════════════════════════════════════ */
.shv-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.shv-search-icon {
    position: absolute;
    left: 10px;
    font-size: 13px;
    color: var(--text-3);
    pointer-events: none;
    z-index: 1;
    transition: color var(--duration-fast);
}

.shv-search:focus-within .shv-search-icon {
    color: var(--accent);
}

.shv-search input {
    width: 100%;
    padding: 7px 30px 7px 32px;
    font-size: var(--text-sm);
    font-family: inherit;
    color: var(--text-1);
    background: var(--glass-bg-input, var(--panel));
    border: var(--glass-input-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}

.shv-search input::placeholder { color: var(--text-3); }

.shv-search input:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}

.shv-search-clear {
    position: absolute;
    right: 8px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    font-size: 11px;
    color: var(--text-3);
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast);
}

.shv-search-clear:hover {
    background: var(--accent-10);
    color: var(--accent);
}

.shv-search.has-value .shv-search-clear { display: flex; }

/* ══════════════════════════════════════
   Modal
   ══════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop);
    display: none;
    align-items: center;
    justify-content: center;
    /* ❶ 배경 블러 + 어둡게 — 모달 집중도 UP */
    background: rgba(8, 12, 28, 0.58);
    backdrop-filter: blur(12px) brightness(0.72);
    -webkit-backdrop-filter: blur(12px) brightness(0.72);
    padding: var(--sp-4);
}

.modal-overlay.open {
    display: flex;
    animation: modal-backdrop-in 0.22s ease-out both;
}

@keyframes modal-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-box {
    position: relative;
    z-index: var(--z-modal);
    width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    overflow: hidden;
    /* ❷ 등장 애니메이션 — scale + fade (툭 뜨는 느낌 제거) */
    animation: modal-slide-in 0.26s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes modal-slide-in {
    from { opacity: 0; transform: scale(0.95) translateY(14px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* 사이즈: alert(얼럿) | sm(소) | md(중) | lg(대) | xl(특대) */
.modal-alert { max-width: 380px; }
.modal-sm    { max-width: 480px; }
.modal-md    { max-width: 680px; }
.modal-lg    { max-width: 920px; }
.modal-xl    { max-width: 1200px; }

/* ❸ 라이트 모달 박스 — 글래스 처리 */
:root:not([data-theme="dark"]) .modal-box {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(200,210,235,0.70);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        0 20px 40px rgba(20,40,90,0.10),
        0  8px 24px rgba(20,40,90,0.08),
        0  2px  6px rgba(20,40,90,0.05);
}

/* 라이트 상단 글래스 라인 */
:root:not([data-theme="dark"]) .modal-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.95) 30%,
        rgba(255,255,255,0.95) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* ❹ 다크 모달 박스 — Liquid Glass */
[data-theme="dark"] .modal-box {
    background: rgba(15,25,50,0.55);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(255,255,255,0.05),
        0 30px 80px rgba(0,0,0,0.70),
        0 12px 32px rgba(0,0,0,0.45);
    position: relative;
}

/* 다크 모달 상단 반사막 */
[data-theme="dark"] .modal-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 35%;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.08) 40%,
        rgba(255,255,255,0.03) 70%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* 다크 모달 자식 요소 — 반사막 위로 */
[data-theme="dark"] .modal-box > * {
    position: relative;
    z-index: 1;
}

.modal-header {
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text-1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
}

.modal-header:active {
    cursor: grabbing;
}

/* 다크 헤더 하단 라인 */
[data-theme="dark"] .modal-header {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
}
[data-theme="dark"] .modal-header span,
[data-theme="dark"] .modal-header h2,
[data-theme="dark"] .modal-header p {
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 3px rgba(0,0,0,0.50);
}

.modal-close {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-3);
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}

.modal-close:hover {
    background: var(--danger-10);
    color: var(--danger);
}

.modal-body {
    padding: var(--sp-5);
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

.modal-footer {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    flex-shrink: 0;
}

/* 다크 푸터 상단 라인 */
[data-theme="dark"] .modal-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.12) 100%);
}

/* ── 폼 모달 전용 패턴 ──
   modal-body 안에서 footer를 하단 고정으로 꺼낼 때 사용 */
.modal-form-footer {
    margin: var(--sp-5) calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5));
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    background: var(--panel);
    position: sticky;
    bottom: calc(-1 * var(--sp-5));
}

[data-theme="dark"] .modal-form-footer {
    border-top-color: rgba(255,255,255,0.08);
    background: rgba(10,18,38,0.70);
}

/* ── 다크 모달 내부 필드 유리 레이어 ── */
[data-theme="dark"] .modal-box .form-input,
[data-theme="dark"] .modal-box .form-select,
[data-theme="dark"] .modal-box textarea.form-input {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .modal-box .form-input:focus,
[data-theme="dark"] .modal-box .form-select:focus,
[data-theme="dark"] .modal-box textarea.form-input:focus {
    background: rgba(255,255,255,0.08);
    border-color: rgba(100,150,255,0.50);
    box-shadow: 0 0 0 3px rgba(80,120,255,0.15);
}

/* 다크 모달 내 섹션 타이틀 강조 */
[data-theme="dark"] .modal-box .oc-form-section-title,
[data-theme="dark"] .modal-box .oc-detail-section-title {
    color: rgba(255,255,255,0.88);
    border-bottom-color: rgba(100,150,255,0.45);
    text-shadow: 0 1px 2px rgba(0,0,0,0.50);
}

/* 다크 모달 상세보기 레이블/값 유리 박스 */
[data-theme="dark"] .modal-box .oc-dl {
    background: rgba(255,255,255,0.04);
    border-right: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.50);
}
[data-theme="dark"] .modal-box .oc-dr {
    border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .modal-box .oc-dv {
    color: rgba(255,255,255,0.85);
}
[data-theme="dark"] .modal-box .oc-detail-top {
    border-bottom-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .modal-box .oc-detail-name {
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 3px rgba(0,0,0,0.40);
}
[data-theme="dark"] .modal-box .oc-detail-sub {
    color: rgba(255,255,255,0.60);
}

/* ── 다크 모달 btn-primary 유리톤 ── */
[data-theme="dark"] .modal-box .btn-primary {
    background: rgba(80,120,255,0.60);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.20);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        0 6px 16px rgba(0,0,0,0.40);
}
[data-theme="dark"] .modal-box .btn-primary:hover {
    background: rgba(90,135,255,0.72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 8px 20px rgba(0,0,0,0.50);
}

/* ── 폼 섹션 구분선 ── */
.form-section {
    padding-top: var(--sp-4);
    margin-top: var(--sp-4);
    border-top: 1px solid var(--border);
}

[data-theme="dark"] .form-section {
    border-top-color: rgba(255,255,255,0.07);
}

.form-section-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--sp-3);
}

/* ══════════════════════════════════════
   File Box (컴팩트 리스트형)
   ══════════════════════════════════════ */
.file-box {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    background: rgba(0,0,0,0.03);
    border: 1px solid var(--border);
    transition: border-color var(--duration-fast) var(--ease-default),
                background var(--duration-fast) var(--ease-default);
}

[data-theme="dark"] .file-box {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}

.file-box.drag-over {
    border-color: var(--accent-30);
    background: var(--accent-10);
}

/* ── 파일박스 헤더 ── */
.file-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-2);
    font-size: var(--text-sm);
    color: var(--text-2);
}

[data-theme="dark"] .file-header {
    color: var(--text-3);
}

/* ── 파일 추가 버튼 ── */
.file-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--accent);
    background: var(--accent-10);
    border: 1px solid var(--accent-20);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default),
                border-color var(--duration-fast) var(--ease-default);
    white-space: nowrap;
    user-select: none;
}

.file-add-btn:hover {
    background: var(--accent-20);
    border-color: var(--accent-30);
}

[data-theme="dark"] .file-add-btn {
    color: #93c5fd;
    background: rgba(59,130,246,0.12);
    border-color: rgba(59,130,246,0.22);
}

[data-theme="dark"] .file-add-btn:hover {
    background: rgba(59,130,246,0.22);
    border-color: rgba(59,130,246,0.35);
}

/* ── 파일 목록 ── */
.file-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px;
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-default);
}

.file-row:hover { background: var(--glass-bg-hover); }

[data-theme="dark"] .file-row:hover { background: rgba(255,255,255,0.04); }

.file-left {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    flex: 1;
}

.file-row-icon {
    font-size: 14px;
    color: var(--text-3);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.file-name {
    font-size: var(--text-sm);
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .file-name { color: #e2e8f0; }

.file-size {
    font-size: var(--text-xs);
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
}

[data-theme="dark"] .file-size { color: #94a3b8; }

.file-status {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.file-status.ok  { color: var(--success); }
.file-status.error { color: var(--danger); }

.file-remove {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    font-size: 12px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--duration-fast), background var(--duration-fast),
                color var(--duration-fast);
    flex-shrink: 0;
}

.file-remove:hover {
    opacity: 1;
    background: var(--danger-10);
    color: var(--danger);
}

/* 초과 파일 행 */
.file-row.file-over .file-name,
.file-row.file-over .file-row-icon { color: var(--danger); }

/* 기존 dropzone 스타일 유지 (다른 페이지 호환) */
.file-dropzone {
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-default),
                background var(--duration-fast) var(--ease-default);
    cursor: default;
}
.file-dropzone:hover,
.file-dropzone.drag-over { border-color: var(--accent-30); background: var(--accent-10); }
.file-dropzone-inner { display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); padding:var(--sp-3) var(--sp-4); text-align:center; }
.file-dropzone-icon { font-size:22px; color:var(--text-3); line-height:1; }
.file-dropzone-text { font-size:var(--text-sm); color:var(--text-3); }
.file-dropzone-actions { display:flex; gap:var(--sp-2); margin-top:var(--sp-1); }

/* ══════════════════════════════════════
   Tag Input (견적·다중 선택 칩)
   ══════════════════════════════════════ */
.tag-input-box {
    min-height: 38px;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    background: var(--glass-bg-input);
    border: var(--glass-input-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    align-items: center;
    cursor: text;
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}

.tag-input-box:focus-within {
    border-color: var(--accent);
    box-shadow: var(--glass-input-focus);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px 3px 9px;
    background: var(--accent-10);
    border: 1px solid var(--accent-30);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--accent);
    white-space: nowrap;
    line-height: 1.3;
}

[data-theme="dark"] .tag-chip {
    background: rgba(79,142,247,0.14);
    border-color: rgba(79,142,247,0.28);
    color: #90c2ff;
}

.tag-chip-remove {
    width: 15px;
    height: 15px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity var(--duration-fast), background var(--duration-fast);
}

.tag-chip-remove:hover {
    opacity: 1;
    background: var(--accent-20);
}

.tag-input-field {
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--text-sm);
    color: var(--text-1);
    min-width: 110px;
    flex: 1;
    padding: 3px 2px;
    line-height: 1.4;
}

.tag-input-field::placeholder {
    color: var(--text-3);
}


.file-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-2);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

[data-theme="dark"] .file-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.07);
}

.file-item-thumb {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-xs);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--border);
}

.file-item-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-xs);
    background: var(--accent-10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 16px;
    flex-shrink: 0;
}

.file-item-info {
    flex: 1;
    min-width: 0;
}

.file-item-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-item-size {
    font-size: var(--text-xs);
    color: var(--text-3);
    margin-top: 1px;
}

.file-item-remove {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--text-3);
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}

.file-item-remove:hover {
    background: var(--danger-10);
    color: var(--danger);
}

/* ══════════════════════════════════════
   Form
   ══════════════════════════════════════ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.form-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-2);
}

.form-label .required {
    color: var(--danger);
    margin-left: 2px;
}

.form-input,
.form-select,
.form-textarea {
    padding: 8px var(--sp-3);
    font-size: var(--text-base);
    color: var(--text-1);
    border-radius: var(--radius-sm);
    background: var(--glass-bg-input);
    border: var(--glass-input-border);
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default),
                background var(--duration-fast) var(--ease-default);
}

/* ❺ 다크 input 글래스화 */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background: rgba(12, 20, 44, 0.55);
    border-color: rgba(79,142,247,0.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04),
                inset 0 -1px 0 rgba(0,0,0,0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--accent);
    box-shadow: var(--glass-input-focus);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
    background: rgba(12, 20, 44, 0.70);
    border-color: rgba(79,142,247,0.60);
    box-shadow: 0 0 0 3px rgba(79,142,247,0.14),
                inset 0 1px 0 rgba(255,255,255,0.06);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: var(--danger);
    box-shadow: var(--shadow-danger-focus);
}

.form-input.success,
.form-select.success,
.form-textarea.success {
    border-color: var(--success);
    box-shadow: 0 0 0 3px var(--success-15, rgba(34,197,94,0.15));
}

[data-theme="dark"] .form-input.success,
[data-theme="dark"] .form-select.success {
    border-color: rgba(74,222,128,0.70);
    box-shadow: 0 0 0 3px rgba(74,222,128,0.12);
}

/* 필드 하단 피드백 텍스트 */
.form-feedback {
    font-size: var(--text-xs);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 16px;
}
.form-feedback.fb-error   { color: var(--danger); }
.form-feedback.fb-success { color: var(--success); }
.form-feedback.fb-loading { color: var(--text-3); }

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

.form-error {
    font-size: var(--text-xs);
    color: var(--danger);
}

.form-hint {
    font-size: var(--text-xs);
    color: var(--text-3);
}

.form-row {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
}

.form-row .form-group {
    flex: 1;
}

/* ══════════════════════════════════════
   Badge
   ══════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    line-height: var(--leading-normal);
    white-space: nowrap;
}

.badge-info {
    background: var(--info-10);
    color: var(--info);
}

.badge-success {
    background: var(--success-10);
    color: var(--success);
}

.badge-warn {
    background: var(--warn-10);
    color: var(--warn);
}

.badge-danger {
    background: var(--danger-10);
    color: var(--danger);
}

.badge-ghost {
    background: rgba(0,0,0,0.06);
    color: var(--text-2);
}

[data-theme="dark"] .badge-ghost {
    background: rgba(255,255,255,0.08);
    color: var(--text-2);
}

.badge-accent {
    background: var(--accent-15);
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

[data-theme="dark"] .badge-accent {
    background: rgba(79,142,247,0.18);
    color: #90c2ff;
}

/* ══════════════════════════════════════
   Notification Bell Badge
   ══════════════════════════════════════ */
.notif-bell {
    position: relative;
}

.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    border-radius: var(--radius-full, 9999px);
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: 10px;
    font-weight: var(--weight-bold, 700);
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    pointer-events: none;
}

.notif-badge-hidden {
    display: none;
}

.notif-badge-pulse {
    animation: notifPulse 0.4s ease-out;
}

@keyframes notifPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

[data-theme="dark"] .notif-badge {
    background: #f43f5e;
    box-shadow: 0 0 6px rgba(244,63,94,0.5);
}

/* ══════════════════════════════════════
   Toolbar
   ══════════════════════════════════════ */
.toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 0;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 var(--sp-1);
}

/* ══════════════════════════════════════
   Toast
   ══════════════════════════════════════ */
.toast-container {
    position: fixed;
    top: 68px;
    right: 20px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
    width: 320px;
}

/* ── 기본 상태 (라이트 모드 — 그라디언트 글래스) ── */
.toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px var(--sp-4);
    border-radius: 12px;
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    pointer-events: auto;
    cursor: pointer;
    overflow: hidden;
    max-height: 120px;
    width: 320px;

    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    background: linear-gradient(180deg,
        rgba(255,255,255,0.86) 0%,
        rgba(255,255,255,0.66) 100%);
    border: 1px solid rgba(0,0,0,0.055);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08),
                inset 0 1px 0 rgba(255,255,255,0.65);
    color: var(--text-1);

    transform: translateX(calc(100% + 24px));
    opacity: 0;
    transition: transform 0.32s var(--ease-out),
                opacity   0.26s var(--ease-out),
                max-height 0.25s ease,
                padding    0.25s ease;
}

/* 라이트 — 상단 glow */
.toast::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 13px;
    background: linear-gradient(120deg, rgba(59,130,246,0.10), transparent 38%);
    opacity: 0.5;
    pointer-events: none;
}

/* ── 다크모드 — 유리 레이어 ── */
[data-theme="dark"] .toast {
    background: linear-gradient(180deg,
        rgba(24,38,68,0.68) 0%,
        rgba(16,26,50,0.58) 100%);
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 20px 50px rgba(0,0,0,0.50),
                inset 0 1px 0 rgba(255,255,255,0.08);
}

[data-theme="dark"] .toast::after {
    background: linear-gradient(120deg, rgba(59,130,246,0.25), transparent 38%);
    opacity: 0.4;
}

/* ── macOS 스택 — 2nd / 3rd 깊이 차이 ── */
.toast-container .toast-visible ~ .toast-visible {
    transform: translateX(0) scale(0.980);
    opacity: 0.92;
}
.toast-container .toast-visible ~ .toast-visible ~ .toast-visible {
    transform: translateX(0) scale(0.960);
    opacity: 0.85;
}

/* ── 표시 상태 ── */
.toast.toast-visible {
    transform: translateX(0);
    opacity: 1;
}

/* ── 사라지는 상태 ── */
.toast.toast-hiding {
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ── 타입별 왼쪽 강조선 ── */
.toast-info    { border-left: 2px solid rgba(42,175,212,0.65); }
.toast-success { border-left: 2px solid rgba(0,200,120,0.65); }
.toast-warn    { border-left: 2px solid rgba(245,166,35,0.65); }
.toast-danger  { border-left: 2px solid rgba(255,68,102,0.65); }

/* ── 아이콘 — 14px, 보조 역할 (0.8 opacity) ── */
.toast-icon {
    font-size: 14px;
    flex-shrink: 0;
    opacity: 0.82;
}
.toast-info    .toast-icon { color: var(--info); }
.toast-success .toast-icon { color: var(--success); }
.toast-warn    .toast-icon { color: var(--warn); }
.toast-danger  .toast-icon { color: var(--danger); }

/* ── 닫기 버튼 — 시스템 UI 느낌 ── */
.toast-close {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
    font-size: 16px;
    line-height: 1;
    color: inherit;
    opacity: 0.38;
    transition: opacity 0.18s var(--ease-default);
}
.toast-close:hover { opacity: 0.85; }

/* ══════════════════════════════════════
   Tabs
   ══════════════════════════════════════ */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
}

.tab-item {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-2);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--duration-fast) var(--ease-default),
                border-color var(--duration-fast) var(--ease-default);
}

.tab-item:hover {
    color: var(--text-1);
}

.tab-item.tab-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: var(--weight-semibold);
}

/* ══════════════════════════════════════
   Dropdown
   ══════════════════════════════════════ */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-1) 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: var(--z-dropdown);
    margin-top: var(--sp-1);
}

[data-theme="dark"] .dropdown-menu {
    background: rgba(22,35,62,0.96);
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 8px 32px rgba(0,0,0,0.50);
}

.dropdown.open .dropdown-menu {
    display: block;
    animation: dd-fade-in var(--duration-fast) var(--ease-out);
}

.dropdown-item {
    display: block;
    padding: 8px var(--sp-4);
    font-size: var(--text-sm);
    color: var(--text-2);
    transition: background var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}

.dropdown-item:hover {
    background: var(--accent-10);
    color: var(--accent);
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: var(--sp-1) 0;
}

/* ══════════════════════════════════════
   Pagination
   ══════════════════════════════════════ */
.pagination {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.page-item {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    color: var(--text-2);
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}

.page-item:hover {
    background: var(--accent-10);
    color: var(--accent);
}

.page-item.page-active {
    background: var(--accent);
    color: var(--text-inverse);
    font-weight: var(--weight-semibold);
}

/* ══════════════════════════════════════
   Spinner
   ══════════════════════════════════════ */
.spinner {
    display: inline-block;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: var(--radius-full);
    animation: spin 0.6s linear infinite;
}

.spinner-sm { width: 16px; height: 16px; }
.spinner-md { width: 24px; height: 24px; }
.spinner-lg { width: 40px; height: 40px; }

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════
   Empty State
   ══════════════════════════════════════ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    padding: var(--sp-12) var(--sp-4);
    text-align: center;
    gap: var(--sp-3);
    opacity: 0.45;
    user-select: none;
}

.empty-icon {
    font-size: 48px;
    color: var(--text-3);
}

.empty-message {
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: var(--text-2);
    max-width: 320px;
}

/* ══════════════════════════════════════
   Address (shv-addr)
   ══════════════════════════════════════ */
.shv-addr {
    cursor: pointer;
    color: var(--accent);
    border-bottom: 1px dashed var(--accent-30);
    transition: color var(--duration-fast) var(--ease-default);
}

.shv-addr:hover {
    color: var(--accent-hover);
}

/* ══════════════════════════════════════
   Copy Link Button
   ══════════════════════════════════════ */
.mv-copy-link {
    font-size: var(--text-sm);
    color: var(--text-3);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease-default),
                background var(--duration-fast) var(--ease-default);
}

.mv-copy-link:hover {
    color: var(--accent);
    background: var(--accent-10);
}

/* ══════════════════════════════════════
   Table Select — 체크박스 + Bulk Action Bar
   (js/ui/table-select.js 와 쌍)
   ══════════════════════════════════════ */

/* ── 커스텀 체크박스 ── */
.tbl-check-all,
.tbl-check-row {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--border-strong, #cdd5e0);
    border-radius: 3px;
    background: var(--panel, #fff);
    cursor: pointer;
    position: relative;
    display: block;
    flex-shrink: 0;
    transition: border-color var(--duration-fast) var(--ease-default),
                background   var(--duration-fast) var(--ease-default);
}

[data-theme="dark"] .tbl-check-all,
[data-theme="dark"] .tbl-check-row {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.22);
}

.tbl-check-all:hover,
.tbl-check-row:hover {
    border-color: var(--accent);
}

.tbl-check-all:checked,
.tbl-check-row:checked {
    background: var(--accent);
    border-color: var(--accent);
}

/* 체크 아이콘 (체크마크) */
.tbl-check-all:checked::after,
.tbl-check-row:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* indeterminate — 가로 바 */
.tbl-check-all:indeterminate {
    background: var(--accent);
    border-color: var(--accent);
}

.tbl-check-all:indeterminate::after {
    content: '';
    position: absolute;
    left: 2.5px;
    top: 5.5px;
    width: 8px;
    height: 2px;
    background: #fff;
    border: none;
    transform: none;
}

/* ── 체크박스 셀 ── */
.th-check,
.td-check {
    width: 36px !important;
    padding: 0 8px !important;
    text-align: center;
    vertical-align: middle;
}

/* ── 선택된 행 하이라이트 ── */
.tbl-row-selected td {
    background: var(--accent-10) !important;
}

[data-theme="dark"] .tbl-row-selected td {
    background: rgba(79,142,247,0.12) !important;
}

/* ── Bulk Action Bar ── */
.tbl-select-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 8px var(--sp-3);
    margin-bottom: var(--sp-2);
    border-radius: var(--radius-sm);
    background: var(--accent-10);
    border: 1px solid var(--accent-20);
    animation: tbl-bar-in var(--duration-fast) var(--ease-out);
}

[data-theme="dark"] .tbl-select-bar {
    background: rgba(79,142,247,0.12);
    border-color: rgba(79,142,247,0.28);
}

@keyframes tbl-bar-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tbl-sel-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    white-space: nowrap;
}

.tbl-sel-cnt {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
}

.tbl-sel-acts {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

/* ══════════════════════════════════════
   Skeleton Loader
   (showSkeleton() 유틸과 쌍)
   ══════════════════════════════════════ */
.skeleton-cell {
    height: 11px;
    border-radius: var(--radius-xs);
    background: linear-gradient(
        90deg,
        var(--skeleton-base)  0%,
        var(--skeleton-shine) 50%,
        var(--skeleton-base)  100%
    );
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.5s ease infinite;
    pointer-events: none;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

.tbl-skeleton-row td {
    padding: 11px var(--sp-3);
    pointer-events: none;
}

/* 짝수 행 약간 투명하게 — 깊이감 */
.tbl-skeleton-row:nth-child(even) .skeleton-cell {
    opacity: 0.65;
}

/* ══════════════════════════════════════
   Table Column Filter Row
   (js/ui/table-filter.js 와 쌍)
   ══════════════════════════════════════ */
/* 기본 숨김 — 상세검색 토글 시 표시 */
.tbl-filter-row { display: none; }
.tbl-filter-row.filter-visible { display: table-row; }

.tbl-filter-row th {
    padding: 4px var(--sp-2) !important;
    cursor: default !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    background: var(--panel-2);
}

.tbl-filter-row th:hover {
    background: var(--panel-2) !important;
    color: var(--text-2) !important;
}

[data-theme="dark"] .tbl-filter-row th {
    background: rgba(255,255,255,0.025) !important;
    border-bottom-color: rgba(79,142,247,0.12) !important;
}

[data-theme="dark"] .tbl-filter-row th:hover {
    background: rgba(255,255,255,0.025) !important;
}

.tbl-col-filter {
    width: 100%;
    padding: 3px 6px;
    font-size: var(--text-xs);
    font-family: inherit;
    color: var(--text-1);
    background: var(--panel, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow    var(--duration-fast) var(--ease-default),
                background    var(--duration-fast) var(--ease-default);
}

[data-theme="dark"] .tbl-col-filter {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: var(--text-1);
}

.tbl-col-filter::placeholder { color: var(--text-3); }

.tbl-col-filter:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-10);
}

.tbl-col-filter.has-value {
    border-color: var(--accent-30);
    background: var(--accent-10);
    color: var(--accent);
}

[data-theme="dark"] .tbl-col-filter.has-value {
    background: rgba(79,142,247,0.10);
    border-color: rgba(79,142,247,0.30);
    color: var(--text-1);
}

/* ══════════════════════════════════════
   Status Badge 시맨틱 별칭
   badge-status-{active|inactive|pending|cancel|info|draft}
   ══════════════════════════════════════ */
.badge-status-active   { background: var(--status-active-bg);   color: var(--status-active-fg); }
.badge-status-inactive { background: var(--status-inactive-bg); color: var(--status-inactive-fg); }
.badge-status-pending  { background: var(--status-pending-bg);  color: var(--status-pending-fg); }
.badge-status-cancel   { background: var(--status-cancel-bg);   color: var(--status-cancel-fg); }
.badge-status-info     { background: var(--info-10);            color: var(--info); }
.badge-status-draft    { background: var(--status-draft-bg);    color: var(--status-draft-fg); }

/* ══════════════════════════════════════
   Card Spacing Helpers
   ══════════════════════════════════════ */
.card-mt    { margin: var(--sp-4) var(--sp-5) 0; }           /* 16px 20px 0 */
.card-mt-sm { margin: var(--sp-3) var(--sp-5) 0; }           /* 12px 20px 0 */
.card-mb    { margin: var(--sp-3) var(--sp-5) var(--sp-5); } /* 12px 20px 20px */

/* 카드 내부 섹션 헤더 (구분선 없는 소제목 영역) */
.card-section-hd    { padding: 12px var(--sp-4) 6px; }
.card-section-title { margin: 0 0 8px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-2); }

/* ══════════════════════════════════════
   Card Body / Header / Footer Variants
   ══════════════════════════════════════ */
/* 테이블 래핑 (no padding, scrollable) */
.card-body--table {
    padding: 0;
    overflow: auto;
}

/* 카드 헤더 메타 텍스트 (건수/페이지 정보) */
.card-header-meta {
    font-size: var(--text-sm);
    color: var(--text-3);
    white-space: nowrap;
}

/* 페이지네이션 푸터 */
.card-footer--pager {
    justify-content: space-between;
    padding: 10px var(--sp-4);
}

/* ══════════════════════════════════════
   Form Row — 필터 변형
   ══════════════════════════════════════ */
.form-row--filter {
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* 버튼 래퍼 (form-row 안에서 flex 자동 처리) */
.fg-auto {
    flex: 0 0 auto;
    padding-bottom: 1px;
}

/* flex:2 form-group (기본 flex:1 재정의) */
.form-row .form-group.fg-2   { flex: 2; }
/* flex:0 0 90px — 페이지 크기 선택 고정폭 */
.form-row .form-group.fg-page { flex: 0 0 90px; }

/* ══════════════════════════════════════
   Icon Color Helpers (card-header 아이콘)
   ══════════════════════════════════════ */
.icon-success { color: var(--success); margin-right: 6px; }
.icon-danger  { color: var(--danger);  margin-right: 6px; }
.icon-warn    { color: var(--warn);    margin-right: 6px; }
.icon-accent  { color: var(--accent);  margin-right: 6px; }

/* ══════════════════════════════════════
   Button — Outline Warn
   ══════════════════════════════════════ */
.btn-outline-warn {
    background: transparent;
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.btn-outline-warn:hover {
    background: color-mix(in srgb, var(--warn) 10%, transparent);
    border-color: var(--warn);
}

/* ══════════════════════════════════════
   Color Swatch (PJT 색상 표시)
   ══════════════════════════════════════ */
.color-swatch { display: inline-flex; align-items: center; gap: 6px; }
.color-dot    { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* ══════════════════════════════════════
   Page Layout
   ══════════════════════════════════════ */

/* 페이지 섹션 기본 (flex 세로 풀높이 레이아웃) */
.page-section {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--sp-3);
}

/* 헤더 액션 행 (제목 + 버튼) — page-header/title/subtitle은 layout.css canonical */
.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-shrink: 0;
}

/* ── 카드 위치 변형 ── */
.card-filter  { margin: 16px 20px 0; }
.card-table   { margin: 12px 20px 20px; }
.card-section { margin: 12px 20px 0; }

/* 카드가 flex 부모 안에서 남은 공간 채우기 */
.card-fill {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* card-header 내 제목/카운트 텍스트 */
.card-header-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.card-header-count { font-size: 12px; color: var(--text-3); }

/* ── Scrollable table wrapper ── */
.tbl-scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* ── Paging bar ── */
.paging-bar {
    flex-shrink: 0;
    padding: 6px var(--sp-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    border-top: 1px solid var(--border);
    min-height: 34px;
}
.paging-info { font-size: var(--text-xs); color: var(--text-3); }

/* ── Loading row ── */
.loading-row {
    display: none;
    padding: var(--sp-2) var(--sp-3);
    text-align: center;
}

/* ══════════════════════════════════════
   Filter Row — form-group 크기 변형
   ══════════════════════════════════════ */
.filter-group-xl { flex: 2; min-width: 160px; }
.filter-group-lg { flex: 1; min-width: 140px; }
.filter-group-md { flex: 1; min-width: 120px; }
.filter-group-sm { flex: 1; min-width: 100px; }
.filter-group-xs { flex: 0 0 90px; }
.filter-btn      { flex: 0 0 auto; padding-bottom: 1px; }

/* ══════════════════════════════════════
   Mobile Bottom Sheet
   ══════════════════════════════════════ */
.sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop);
    background: rgba(0, 0, 0, 0.4);
}

.sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--panel);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sheet-grip {
    padding: var(--sp-2) 0 0;
    text-align: center;
    flex-shrink: 0;
}

.sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--border-strong, var(--border));
    border-radius: 2px;
    margin: 0 auto var(--sp-3);
}

.sheet-head {
    padding: 0 var(--sp-4) var(--sp-3);
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

.sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-3) var(--sp-4);
}

.sheet-filter-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--sp-4) var(--sp-3);
}

.sheet-foot {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   tbl-select — 선택형 테이블 공용 컴포넌트
   (체크박스 · 벌크바 · row hover 액션)
   ══════════════════════════════════════ */

/* ── 체크박스 컬럼 ── */
.tbl-select .tbl-check-col {
    width: 40px;
    text-align: center;
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
}
.tbl-select .tbl-check-col input[type="checkbox"],
.tbl-select .tbl-row-check {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--accent);
    vertical-align: middle;
}

/* ── 선택된 행 ── */
.tbl-select tbody tr.selected {
    background: var(--accent-10) !important;
}
[data-theme="dark"] .tbl-select tbody tr.selected {
    background: rgba(80,120,255,0.15) !important;
}

/* ── 벌크 액션 바 ── */
.tbl-bulk-bar {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px var(--sp-3);
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    margin-bottom: var(--sp-2);
}
.tbl-bulk-bar.active { display: flex; }

.tbl-bulk-count { flex: 1; }

.btn-bulk-action {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.30);
    padding: 4px 10px;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-bulk-action:hover { background: rgba(255,255,255,0.30); }

.btn-bulk-del {
    background: rgba(220,50,50,0.25);
    border-color: rgba(255,100,100,0.40);
}
.btn-bulk-del:hover { background: rgba(220,50,50,0.45); }

/* ── row hover 액션 ── */
.tbl-select tbody td:last-child {
    position: relative;
}
.tbl-row-actions {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.tbl-select tbody tr:hover .tbl-row-actions { opacity: 1; }

.tbl-row-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s ease, color 0.15s ease;
}
.tbl-row-action-btn:hover {
    background: var(--accent-10);
    color: var(--accent);
}
.tbl-row-action-btn.btn-danger-ghost:hover {
    background: rgba(220,50,50,0.10);
    color: var(--danger, #e53935);
}
[data-theme="dark"] .tbl-row-action-btn {
    color: rgba(255,255,255,0.50);
}
[data-theme="dark"] .tbl-row-action-btn:hover {
    background: rgba(79,142,247,0.18);
    color: var(--accent);
}
[data-theme="dark"] .tbl-row-action-btn.btn-danger-ghost:hover {
    background: rgba(220,50,50,0.20);
    color: #ff6b6b;
}


/* ── 지도 팝업 (공통) ── */
.shv-map-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    padding: var(--sp-4);
}

.shv-map-box {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    width: 90vw;
    max-width: 800px;
    height: 80vh;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.shv-map-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--card-bg);
}

.shv-map-addr {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shv-map-link {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.shv-map-kakao {
    background: #fee500;
    color: #191919;
}

.shv-map-naver {
    background: #1ec800;
    color: #fff;
}

.shv-map-close {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text-3);
    cursor: pointer;
    padding: 4px;
}

.shv-map-close:hover {
    color: var(--text-1);
}

.shv-map-iframe {
    flex: 1;
    border: none;
    width: 100%;
}

.shv-map-info {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Search Dropdown Item ── */
.shv-sd-item {
    padding: 9px 14px;
    cursor: pointer;
    color: var(--text-1);
    transition: background 0.1s;
}
.shv-sd-item--hover,
.shv-sd-item:hover {
    background: var(--accent-10);
    color: var(--accent);
}

/* ══ 6. utilities.css ══ */
/* ========================================
   SHVQ V2 — Utilities
   ======================================== */

/* ── Display ── */
.hidden       { display: none !important; }
.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.sr-only      { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── Flex ── */
.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-none    { flex: none; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.self-start   { align-self: flex-start; }
.self-center  { align-self: center; }
.self-end     { align-self: flex-end; }

/* ── Gap ── */
.gap-1  { gap: var(--sp-1); }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }

/* ── Padding ── */
.p-0  { padding: 0; }
.p-1  { padding: var(--sp-1); }
.p-2  { padding: var(--sp-2); }
.p-3  { padding: var(--sp-3); }
.p-4  { padding: var(--sp-4); }
.p-6  { padding: var(--sp-6); }
.p-8  { padding: var(--sp-8); }
.px-2 { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.px-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.px-6 { padding-left: var(--sp-6); padding-right: var(--sp-6); }
.py-1 { padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
.py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.py-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }

/* ── Margin ── */
.m-0  { margin: 0; }
.m-1  { margin: var(--sp-1); }
.m-2  { margin: var(--sp-2); }
.m-3  { margin: var(--sp-3); }
.m-4  { margin: var(--sp-4); }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }

/* ── Text Color ── */
.text-1       { color: var(--text-1); }
.text-2       { color: var(--text-2); }
.text-3       { color: var(--text-3); }
.text-accent  { color: var(--accent); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }
.text-warn    { color: var(--warn); }
.text-inverse { color: var(--text-inverse); }

/* ── Text Size ── */
.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md  { font-size: var(--text-md); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* ── Text Weight ── */
.font-normal   { font-weight: var(--weight-normal); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }

/* ── Text Align ── */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ── Text Misc ── */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whitespace-nowrap { white-space: nowrap; }
.break-words       { word-break: break-word; }
.uppercase         { text-transform: uppercase; }
.lowercase         { text-transform: lowercase; }
.capitalize        { text-transform: capitalize; }
.underline         { text-decoration: underline; }
.line-through      { text-decoration: line-through; }
.no-underline      { text-decoration: none; }
.leading-tight     { line-height: var(--leading-tight); }
.leading-normal    { line-height: var(--leading-normal); }
.leading-relaxed   { line-height: var(--leading-relaxed); }

/* ── Width / Height ── */
.w-full     { width: 100%; }
.h-full     { height: 100%; }
.min-w-0    { min-width: 0; }
.min-h-0    { min-height: 0; }
.max-w-full { max-width: 100%; }

/* ── Table Column Width (th/td width 인라인 스타일 대체) ── */
.col-60  { width:  60px; }
.col-70  { width:  70px; }
.col-72  { width:  72px; }
.col-80  { width:  80px; }
.col-88  { width:  88px; }
.col-90  { width:  90px; }
.col-100 { width: 100px; }
.col-110 { width: 110px; }
.col-120 { width: 120px; }
.col-130 { width: 130px; }
.col-140 { width: 140px; }
.col-160 { width: 160px; }
.col-180 { width: 180px; }

/* ── Form Group Min-Width (form-group min-width 인라인 스타일 대체) ── */
.mw-90  { min-width:  90px; }
.mw-100 { min-width: 100px; }
.mw-110 { min-width: 110px; }
.mw-120 { min-width: 120px; }
.mw-130 { min-width: 130px; }
.mw-140 { min-width: 140px; }
.mw-160 { min-width: 160px; }

/* ── Table Min-Width ── */
.tbl-min-800  { min-width:  800px; }
.tbl-min-1100 { min-width: 1100px; }
.tbl-min-1200 { min-width: 1200px; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ── Border ── */
.border        { border: 1px solid var(--border); }
.border-top    { border-top: 1px solid var(--border); }
.border-bottom { border-bottom: 1px solid var(--border); }
.border-none   { border: none; }

/* ── Radius ── */
.rounded-xs   { border-radius: var(--radius-xs); }
.rounded      { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Shadow ── */
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-none { box-shadow: none; }

/* ── Cursor ── */
.cursor-pointer     { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-default     { cursor: default; }

/* ── Position ── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

/* ── Opacity ── */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* ── Background ── */
.bg-panel   { background: var(--panel); }
.bg-panel-2 { background: var(--panel-2); }
.bg-accent  { background: var(--accent); }
.bg-danger  { background: var(--danger); }
.bg-success { background: var(--success); }
.bg-warn    { background: var(--warn); }

/* ── Pointer Events ── */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ── Transition ── */
.transition {
    transition-property: background, color, border-color, box-shadow, opacity, transform;
    transition-duration: var(--duration-normal);
    transition-timing-function: var(--ease-default);
}

.transition-fast {
    transition-property: background, color, border-color, box-shadow, opacity, transform;
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--ease-default);
}

/* ── Flex (extended) ── */
.flex-2        { flex: 2; }
.flex-shrink-0 { flex-shrink: 0; }

/* ── Grid ── */
.col-full { grid-column: 1 / -1; }

/* ── Padding (extended) ── */
.p-12 { padding: var(--sp-12); }
.pt-0 { padding-top: 0; }
.pt-2 { padding-top: var(--sp-2); }
.pt-3 { padding-top: var(--sp-3); }
.pb-0 { padding-bottom: 0; }
.pb-2 { padding-bottom: var(--sp-2); }
.pb-3 { padding-bottom: var(--sp-3); }
.pl-4 { padding-left: var(--sp-4); }
.pr-4 { padding-right: var(--sp-4); }

/* ── Margin (extended) ── */
.mt-0  { margin-top: 0; }
.mt-px { margin-top: 2px; }
.mb-px { margin-bottom: 2px; }
.ml-1  { margin-left: var(--sp-1); }
.ml-2  { margin-left: var(--sp-2); }
.mr-1  { margin-right: var(--sp-1); }
.mr-2  { margin-right: var(--sp-2); }

/* ── Text Size (extended) ── */
.text-4xl { font-size: 2.5rem; }

/* ── Text Misc (extended) ── */
.align-middle { vertical-align: middle; }
.break-keep   { word-break: keep-all; }

/* ── Width / Height (extended) ── */
.h-px       { height: 1px; }
.max-w-200  { max-width: 200px; }
.max-w-400  { max-width: 400px; }
.max-h-none { max-height: none; }
.max-h-80vh { max-height: 80vh; }

/* ── Border (extended) ── */
.border-collapse { border-collapse: collapse; }

/* ── Position (extended) ── */
.top-0 { top: 0; }

/* ── Z-index ── */
.z-10       { z-index: 10; }
.z-9999     { z-index: 9999; }
.z-modal    { z-index: var(--z-modal-backdrop); }
.z-submodal { z-index: 10000; }

/* ── Opacity (extended) ── */
.opacity-30 { opacity: 0.3; }
.opacity-70 { opacity: 0.7; }

/* ── Background (extended) ── */
.bg-content        { background: var(--content-bg); }
.bg-modal-backdrop { background: rgba(0, 0, 0, 0.4); }

/* ══ 7. responsive.css ══ */
/* ========================================
   SHVQ V2 — Responsive
   PC (default) → Tablet (1024px) → Mobile (768px)
   ======================================== */

/* ════════════════════════════════════════
   GPU 렌더링 보호 — backdrop-filter OFF
   모바일/태블릿 환경에서 GPU 레이어 깨짐 방지
   ════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* backdrop-filter 전면 OFF */
    #topbar,
    #sidebar,
    #content,
    .glass,
    .glass-strong,
    .glass-card,
    .glass-panel,
    .glass-input,
    .glass-modal-backdrop,
    .glass-active {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        will-change: auto !important;
    }

    /* topbar — blur 비활성화 시 solid fallback (사이드바는 blur 없으므로 fallback 불필요) */
    #topbar { background: rgba(15, 25, 60, 0.96) !important; }
    #content { background: transparent !important; }

    /* 라이트모드 topbar fallback */
    :root:not([data-theme="dark"]) #topbar { background: rgba(255,255,255,0.96) !important; }
}

/* ── Tablet: 1024px ── */
@media (max-width: 1024px) {
    #sidebar {
        position: fixed;
        left: -260px;
        top: calc(var(--topbar-h) + 16px);
        bottom: 10px;
        width: 240px;
        z-index: var(--z-sidebar);
        transition: left var(--duration-normal) var(--ease-default);
    }

    #sidebar.sidebar-open {
        left: 12px;
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.30);
        z-index: calc(var(--z-sidebar) - 1);
    }

    .sidebar-backdrop.active {
        display: block;
    }

    #app-body {
        padding-left: 10px;
    }

    .top-menu-btn {
        padding: 0 var(--sp-3);
        font-size: var(--text-base);
    }

    .modal-lg { max-width: 90%; }

    .form-row {
        flex-direction: column;
    }

    .toolbar {
        gap: var(--sp-1);
    }

    /* responsive utility */
    .md\:hidden { display: none !important; }
    .md\:block  { display: block !important; }
    .md\:flex   { display: flex !important; }
    .md\:flex-col { flex-direction: column !important; }
}

/* ── Mobile: 768px ── */
@media (max-width: 768px) {
    #topbar {
        top: 0;
        left: 0;
        right: 0;
        border-radius: 0;
        padding: 0 var(--sp-3);
        height: 52px;
    }

    #app-body {
        height: calc(100vh - 52px);
        margin-top: 52px;
        padding: 0 var(--sp-2);
        gap: 0;
    }

    #sidebar {
        top: 52px;
        width: 100%;
        left: -100%;
        border-radius: 0;
        bottom: 0;
    }

    #sidebar.sidebar-open {
        left: 0;
    }

    .top-logo {
        font-size: var(--text-md);
    }

    .top-nav {
        display: none;
    }

    .user-name {
        display: none;
    }

    /* modal full screen on mobile */
    .modal-box {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        height: 100%;
    }

    /* table → card layout */
    .tbl-responsive thead {
        display: none;
    }

    .tbl-responsive tbody tr {
        display: block;
        padding: var(--sp-3);
        margin-bottom: var(--sp-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--panel);
    }

    .tbl-responsive tbody td {
        display: flex;
        justify-content: space-between;
        padding: var(--sp-1) 0;
        border-bottom: 1px solid var(--border);
        font-size: var(--text-sm);
    }

    .tbl-responsive tbody td:last-child {
        border-bottom: none;
    }

    .tbl-responsive tbody td::before {
        content: attr(data-label);
        font-weight: var(--weight-semibold);
        color: var(--text-2);
        margin-right: var(--sp-2);
    }

    /* toolbar stack */
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-left,
    .toolbar-right {
        width: 100%;
        justify-content: flex-start;
    }

    .toolbar-divider {
        width: 100%;
        height: 1px;
        margin: var(--sp-1) 0;
    }

    /* toast full width */
    .toast-container {
        right: var(--sp-2);
        left: var(--sp-2);
    }

    .toast {
        max-width: 100%;
    }

    /* form */
    .form-row {
        flex-direction: column;
    }

    /* tabs scroll */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-item {
        flex-shrink: 0;
    }

    /* page header */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* pagination center */
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* responsive utility */
    .sm\:hidden   { display: none !important; }
    .sm\:block    { display: block !important; }
    .sm\:flex     { display: flex !important; }
    .sm\:flex-col { flex-direction: column !important; }
    .sm\:w-full   { width: 100% !important; }
    .sm\:text-sm  { font-size: var(--text-sm) !important; }
}

/* ── Small Mobile: 480px ── */
@media (max-width: 480px) {
    .btn {
        width: 100%;
        justify-content: center;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
    }

    .badge {
        font-size: 10px;
    }
}

/* ══ 8. login.css ══ */
/* ========================================
   SHVQ V2 — Login Page
   Stable Layer Architecture
   backdrop-filter는 카드(.login-box) 하나에만
   ======================================== */

:root {
    --lc-text:    rgba(255,255,255,.88);
    --lc-muted:   rgba(255,255,255,.45);
    --lc-primary: #5c6cff;
    --lc-primary2:#9aaeff;
    --lc-shadow:  rgba(92,108,255,.45);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 28px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--lc-text);
    /* body에는 background/filter 없음 */
}

/* ── 레이어 1: 배경 이미지 — filter 절대 없음 ── */
.lp-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: #1a2070 url('../img/login_bg.jpg') center center / cover no-repeat;
    pointer-events: none;
}

/* ── 레이어 2: 어둠 오버레이 — blur 절대 없음 ── */
.lp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(14,20,70,.62);
    /* 우상단 광원 (opacity 절제) */
    background-image:
        radial-gradient(ellipse 50vw 50vw at 90% 0%, rgba(160,120,255,.12) 0%, transparent 70%),
        linear-gradient(135deg, rgba(14,18,70,.65) 0%, rgba(30,45,160,.55) 100%);
    pointer-events: none;
}

/* ── 레이어 3: 로그인 카드 래퍼 ── */
.login-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 448px;
    padding: 20px;
}

/* ── 카드 — backdrop-filter는 여기 하나만 ── */
.login-box {
    position: relative;
    padding: 48px 40px 36px;
    border-radius: 24px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -1px 0 rgba(255,255,255,.05);
    /* GPU 레이어 강제 분리 */
    transform: translateZ(0);
    will-change: transform;
}

/* 카드 상단 그라디언트 — 유리 핵심 */
.login-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,.35) 0%,
        rgba(255,255,255,.10) 35%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* 좌상단 빛 반사 — 애플 glass 핵심 */
.login-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        120% 80% at 20% 0%,
        rgba(255,255,255,.25),
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
}

/* z-index 보장 */
.login-logo, .login-error, .input-icon-wrap,
.login-options, .login-btn, .login-divider,
.caps-warn, #loginForm, .login-footer {
    position: relative;
    z-index: 1;
}

/* ── 로고 ── */
.login-logo {
    text-align: center;
    margin-bottom: 32px;
}
.login-logo h1 {
    margin-bottom: 6px;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: .6px;
    color: rgba(255,255,255,.95);
    text-shadow: 0 2px 20px rgba(120,140,255,.5);
}
.login-logo p {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lc-muted);
    opacity: .6;
}

/* ── 에러 박스 ── */
.login-error {
    display: none;
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,100,130,.3);
    background: rgba(255,60,100,.12);
    color: rgba(255,160,180,.9);
    font-size: 12px;
    text-align: center;
    animation: shake .35s;
}

.force-login-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 7px 18px;
    border: 1px solid var(--lc-primary);
    border-radius: 8px;
    background: rgba(92, 108, 255, .15);
    color: var(--lc-primary2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.force-login-btn:hover {
    background: var(--lc-primary);
    color: #fff;
}

/* ── 입력창 ── */
.input-icon-wrap {
    position: relative;
    margin-bottom: 14px;
}
.input-icon-wrap--pw {
    margin-bottom: 6px;
}

.input-icon-wrap .input-icon {
    position: absolute;
    top: 50%; left: 16px;
    transform: translateY(-50%);
    color: rgba(255,255,255,.4);
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}

.input-icon-wrap input {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.16);
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 500;
    padding: 13px 14px 13px 41px;
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 2px 6px rgba(0,0,0,.15);
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.input-icon-wrap--pw input { padding-right: 46px; }
.input-icon-wrap input::placeholder { color: rgba(255,255,255,.38); }
.input-icon-wrap input:focus {
    border-color: rgba(140,160,255,.8);
    background: rgba(255,255,255,.18);
    box-shadow:
        0 0 0 3px rgba(140,160,255,.25),
        inset 0 1px 0 rgba(255,255,255,.1),
        inset 0 2px 6px rgba(0,0,0,.08);
}

.pw-toggle-btn {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    border: none; background: transparent;
    color: rgba(255,255,255,.35);
    font-size: 14px;
    cursor: pointer;
    padding: 3px 4px; line-height: 1;
    z-index: 2;
    transition: color .2s;
}
.pw-toggle-btn:hover { color: rgba(255,255,255,.7); }

/* ── Caps Lock ── */
.caps-warn {
    display: none;
    margin-bottom: 10px;
    color: rgba(255,200,80,.8);
    font-size: 11px;
    text-align: center;
    animation: fadeIn .25s ease;
}

/* ── 로그인 유지 ── */
.login-options {
    display: flex;
    align-items: center;
    margin: 10px 0 20px;
}
.save-id {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lc-muted);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}
.save-id input[type='checkbox'] {
    width: 15px; height: 15px;
    accent-color: var(--lc-primary);
    cursor: pointer;
}

/* ── 버튼 ── */
.login-btn {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #fff;
    background: linear-gradient(135deg, var(--lc-primary) 0%, var(--lc-primary2) 100%);
    box-shadow:
        0 12px 32px var(--lc-shadow),
        inset 0 1px 0 rgba(255,255,255,.4);
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, filter .18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-spinner { display: none; }
.login-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 12px 32px var(--lc-shadow),
        inset 0 1px 0 rgba(255,255,255,.45);
    filter: brightness(1.06);
}
.login-btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
.login-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── 구분선 / 푸터 ── */
.login-divider {
    width: 70%;
    height: 1px;
    margin: 22px auto 14px;
    background: linear-gradient(90deg,
        transparent, rgba(255,255,255,.15) 50%, transparent);
}
.login-footer {
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,.22);
    letter-spacing: .3px;
}

/* ── 애니메이션 ── */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    30%       { transform: translateX(-5px); }
    70%       { transform: translateX(5px); }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
    .login-wrap { max-width: 420px; padding: 18px; }
    .login-box { padding: 42px 34px 32px; }
    .login-logo h1 { font-size: 30px; }
}
@media (max-width: 768px) {
    body { padding: 16px 12px; }
    .login-wrap { max-width: 100%; padding: 10px; }
    .login-box { border-radius: 20px; padding: 36px 24px 28px; }
    .login-logo { margin-bottom: 26px; }
    .login-logo h1 { font-size: 28px; }
    .login-logo p { font-size: 10px; }
    .input-icon-wrap input { padding-top: 12px; padding-bottom: 12px; }
    .login-btn { padding: 13px; }
}
@media (max-width: 420px) {
    body { padding: 12px 8px; }
    .login-box { padding: 32px 18px 24px; }
    .login-logo h1 { font-size: 26px; }
}