/* ===================================================================
   H-LCA System - Stylesheet v4.0
   Pearl Glassmorphism + Framework Grid Support
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100vw; overflow-x: hidden; }

/* === 1. CSS Variables (Light Pearl) === */
:root {
    --sidebar-w: 220px;
    --sidebar-collapsed-w: 52px;
    --header-h: 34px;
    --tab-h: 22px;
    --right-panel-w: 250px;
    --bottom-panel-h: 220px;
    --toggle-bar-h: 22px;
    --sidebar-logo-h: 1.5rem;  /* 사이드바 로고 높이 (회사별 업로드 로고 — 로그인 화면은 별도) */

    --accent: #6366f1;
    --accent-hover: #4f46e5;
    --accent-light: rgba(99,102,241,0.08);

    /* Flat Light (펄 제거) — 원본은 주석 참조 */
    /* [PEARL-ORIG] --bg: linear-gradient(135deg, #e8eaf2 0%, #e4e8f0 20%, #efe8f2 40%, #e6ecf4 60%, #ece6f0 80%, #e6eaf4 100%); */
    /* [PEARL-ORIG] --surface: rgba(255,255,255,0.58); */
    /* [PEARL-ORIG] --glass-blur: blur(20px); */
    /* [PEARL-ORIG] --glass-border: 1px solid rgba(255,255,255,0.65); */
    /* [PEARL-ORIG] --pearl-sheen: linear-gradient(135deg, rgba(140,170,255,0.12) 0%, rgba(200,160,255,0.09) 25%, rgba(140,200,255,0.08) 50%, rgba(210,170,255,0.09) 75%, rgba(150,180,255,0.12) 100%); */
    --bg: #ecedf1;
    --bg-flat: #e8eaf0;
    --surface: #ffffff;
    --surface-solid: #ffffff;
    --glass-blur: none;
    --glass-border: 1px solid rgba(180,180,195,0.3);
    --pearl-sheen: none;

    --text: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-muted: #aeaeb2;
    --gnb-text: #2c2c2e;
    --border: rgba(180,180,195,0.35);

    --sidebar-bg: linear-gradient(180deg, #1e2a52 0%, #243060 30%, #202850 60%, #1c2648 100%);
    --sidebar-bg-flat: #223058;
    --sidebar-text: #d1d1d6;
    --sidebar-active: rgba(99,102,241,0.85);
    --sidebar-hover: rgba(255,255,255,0.1);

    /* [PEARL-ORIG] --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 0 0 1px rgba(255,255,255,0.7) inset, 0 1px 0 rgba(180,200,255,0.15) inset; */
    /* [PEARL-ORIG] --shadow-md: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,255,255,0.6) inset, 0 2px 0 rgba(200,190,255,0.12) inset; */
    /* [PEARL-ORIG] --shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.5) inset, 0 3px 0 rgba(180,200,255,0.1) inset; */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.10);

    --toast-ok-bg: rgba(236,253,245,0.35); --toast-ok: #059669;
    --toast-err-bg: rgba(254,242,242,0.35); --toast-err: #dc2626;
    --toast-warn-bg: rgba(255,251,235,0.35); --toast-warn: #d97706;
    --toast-info-bg: rgba(240,240,255,0.35); --toast-info: #6366f1;

    --transition: all 0.25s ease;
    --radius: 8px;
    --radius-sm: 3px;
    --fs: 0.731rem;
    --fs-nav: 0.75rem;
    --fs-toolbar: 0.706rem;

    /* Tree View (HlcaTreeView) — 라이트 모드 */
    --tree-folder-top: #e8a87c;  /* L1 폴더: 노란/주황 */
    --tree-folder-sub: #6b8cae;  /* L2+ 폴더: 파란 */
    --tree-indent: 12px;         /* 레벨당 들여쓰기 (리프/커넥터 색은 var(--text-muted) 직접 사용) */

    /* 그리드 행 상태 배경 — 라이트 모드 (소계/합계/비활성 행) */
    --row-subtotal-bg: rgba(234,88,12,0.08);     /* 소계 행 (주황 톤) */
    --row-total-bg: rgba(20,184,166,0.10);       /* 합계 행 (청록 톤) */
    --row-disabled-bg: rgba(120,120,120,0.05);   /* 편집 불가/마스터 placeholder 행 */
}

/* === 2. Dark Pearl Mode === */
body[data-theme="dark"] {
    --accent: #818cf8; --accent-hover: #a5b4fc; --accent-light: rgba(129,140,248,0.12);
    /* [PEARL-ORIG] --bg: linear-gradient(135deg, #1c1c1e 0%, #1d1d20 25%, #1c1c1f 50%, #1d1d21 75%, #1c1c1e 100%); */
    /* [PEARL-ORIG] --surface: rgba(44,44,46,0.75); */
    /* [PEARL-ORIG] --glass-blur: blur(20px); */
    /* [PEARL-ORIG] --glass-border: 1px solid rgba(255,255,255,0.06); */
    /* [PEARL-ORIG] --pearl-sheen: linear-gradient(135deg, rgba(80,100,180,0.05) 0%, rgba(120,80,160,0.03) 25%, rgba(80,110,180,0.04) 50%, rgba(130,90,160,0.03) 75%, rgba(80,100,180,0.05) 100%); */
    --bg: #1c1c1e;
    --bg-flat: #1c1c1e;
    --surface: #2c2c2e;
    --surface-solid: #2c2c2e;
    --glass-blur: none;
    --glass-border: 1px solid rgba(255,255,255,0.08);
    --pearl-sheen: none;
    --text: #f5f5f7; --text-secondary: #98989d; --text-muted: #8e8e93; --gnb-text: #d1d1d6;
    --border: rgba(80,80,90,0.5);
    --sidebar-bg: linear-gradient(180deg, #1c1c1e 0%, #222224 30%, #1e1e20 60%, #1c1c1e 100%);
    --sidebar-bg-flat: #1e1e20;
    --sidebar-text: #a1a1a6; --sidebar-hover: rgba(255,255,255,0.05);
    /* [PEARL-ORIG] --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); */
    /* [PEARL-ORIG] --shadow-md: 0 4px 12px rgba(0,0,0,0.5); */
    /* [PEARL-ORIG] --shadow-lg: 0 10px 24px rgba(0,0,0,0.6); */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.6);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.7);
    --toast-ok-bg: rgba(5,150,105,0.25); --toast-ok: #34d399;
    --toast-err-bg: rgba(220,38,38,0.25); --toast-err: #f87171;
    --toast-warn-bg: rgba(217,119,6,0.25); --toast-warn: #fbbf24;
    --toast-info-bg: rgba(99,102,241,0.25); --toast-info: #818cf8;

    /* Tree View — 다크 모드 (살짝 어두운 톤) */
    --tree-folder-top: #d49a6a;
    --tree-folder-sub: #5a7a9e;

    /* 그리드 행 상태 배경 — 다크 모드 (어두운 배경 대비 가시성 강화) */
    --row-subtotal-bg: rgba(234,88,12,0.18);
    --row-total-bg: rgba(20,184,166,0.20);
    --row-disabled-bg: rgba(255,255,255,0.05);
}
body[data-theme="dark"] .login-brand { background: linear-gradient(135deg, #1a1a1e 0%, #26262a 100%); }
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-control-sm { background-color: var(--bg-flat); color: var(--text); border-color: var(--border); }

/* === 3. Base === */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', sans-serif;
    background: var(--bg); color: var(--text);
    height: 100vh; overflow: hidden; display: flex;
    font-size: var(--fs);
    transition: color 0.3s;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
.text-accent { color: var(--accent) !important; }

/* ★ 글로벌 라운드 표준화 — 모든 버튼/인풋/셀렉트에 미세 라운드 적용 */
button, input, select, textarea,
.btn, .btn-sm, .btn-tool, .btn-accent,
.form-control, .form-control-sm,
.filter-input, .filter-cond { border-radius: var(--radius-sm); }

/* ★ 글로벌 글래스모피즘 툴팁 표준 — title / data-tooltip 속성 자동 적용 */
.glass-tooltip {
    display: none; position: fixed; z-index: 99999; pointer-events: none;
    padding: 6px 12px; border-radius: 8px; max-width: 360px;
    background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 1.5px 6px rgba(0, 0, 0, 0.2);
    opacity: 0; transition: opacity 0.18s;
}
.glass-tooltip-visible { opacity: 1; }
.glass-tooltip-content {
    font-size: var(--fs); color: #f0f0f5; line-height: 1.5; white-space: pre-line;
}
/* 라이트모드 */
body:not(body[data-theme="dark"]) .glass-tooltip {
    background: rgba(0, 0, 0, 0.06); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1.5px 6px rgba(0, 0, 0, 0.06);
}
body:not(body[data-theme="dark"]) .glass-tooltip .glass-tooltip-content { color: #333; }

/* 정적 Pearl Sheen 오버레이 — top-header만 유지 (비교용 펄 제거) */
/* [PEARL-ORIG] .top-header::before, .panel-filter-bar::before, .dash-card::before, .dash-panel::before, .right-panel::before, .bottom-panel::before */
.top-header::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg,
        rgba(140,170,255,0.12) 0%, rgba(200,160,255,0.09) 25%,
        rgba(140,200,255,0.08) 50%, rgba(210,170,255,0.09) 75%,
        rgba(150,180,255,0.12) 100%);
    pointer-events: none; z-index: 0;
    border-radius: inherit;
}
body[data-theme="dark"] .top-header::before {
    background: linear-gradient(135deg,
        rgba(80,100,180,0.05) 0%, rgba(120,80,160,0.03) 25%,
        rgba(80,110,180,0.04) 50%, rgba(130,90,160,0.03) 75%,
        rgba(80,100,180,0.05) 100%);
}
.top-header, .dash-card, .dash-panel {
    position: relative; overflow: hidden;
}
.panel-filter-bar {
    position: relative; overflow: hidden; overflow-x: auto;
}
.right-panel, .bottom-panel {
    position: relative;
}
.top-header > *, .panel-filter-bar > *, .dash-card > *, .dash-panel > *, .right-panel > *, .bottom-panel > * {
    position: relative; z-index: 1;
}

/* === 4. Sidebar (Pearl) === */
.sidebar {
    position: fixed; top: 0; left: 0;
    width: var(--sidebar-w); height: 100vh;
    background: var(--sidebar-bg); z-index: 1040;
    display: flex; flex-direction: column;
    transition: width 0.3s cubic-bezier(.25,1,.5,1);
    box-shadow: 1px 0 8px rgba(0,0,0,0.1);
}
/* [PEARL-ORIG] Pearl sheen overlay on sidebar — 펄 제거로 비활성 */
/* .sidebar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(130,160,240,0.08) 0%, rgba(170,140,230,0.04) 30%, rgba(130,170,240,0.06) 60%, rgba(180,150,240,0.08) 100%); pointer-events: none; z-index: 0; } */
/* [PEARL-ORIG] 사이드바 상단 은은한 빛 — 펄 제거로 비활성 */
/* .sidebar::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 60%; background: radial-gradient(ellipse at 40% 10%, rgba(120,160,255,0.08) 0%, transparent 60%); pointer-events: none; z-index: 0; } */
.sidebar > * { position: relative; z-index: 1; }

.sidebar-header {
    display: flex; align-items: center;
    height: var(--header-h); padding: 0 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
.sidebar-expand-toggle {
    margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.5);
    cursor: pointer; padding: 4px; font-size: 0.85rem; line-height: 1; border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}
.sidebar-expand-toggle:hover { color: #fff; background: rgba(255,255,255,0.1); }
.sidebar-logo {
    /* 회사명 텍스트(.sidebar-logo-text)는 일반체 — 볼드 미사용 표준 (2026-08-13 사용자 확정).
       브랜드 이미지(CPDP/회사 아이콘)는 폰트 무관이라 이 규칙의 유일한 소비자가 회사명이다. */
    display: flex; align-items: center; gap: 0.4rem;
    color: #fff; font-weight: 400; font-size: 0.88rem;
    letter-spacing: -0.3px; white-space: nowrap; overflow: hidden;
}
.sidebar-logo i { font-size: 1rem; flex-shrink: 0; }
/* 회사별 브랜딩 이미지 — 기본은 파생 아이콘(logo_icon, 이미 흰색이라 반전 필터는 no-op),
   아이콘 없는 legacy 로고만 원본을 흰색 단색으로 반전해 얹는다(사이드바가 진한 남색).
   (필터를 빼면 밝은 배경용 짙은 로고가 배경에 묻혀 안 보인다 — 조인티엔피 로고 실사례.)
   형태는 알파 채널로만 남으므로 업로드는 투명 배경 PNG 필수. 폭은 사이드바(220px) 기준 상한만. */
.sidebar-logo-img { height: var(--sidebar-logo-h); width: auto; max-width: 150px; flex-shrink: 0; object-fit: contain; filter: brightness(0) invert(1); transition: width 0.2s; }
/* CPDP 기본 로고(회사 로고 미등록·전역계정) — LCA 사이드바와 동일 규격 */
.sidebar-logo-emblem { width: 1.05rem; height: 1.05rem; flex-shrink: 0; object-fit: contain; }
/* 타이틀 폭 = 0.73rem × 이미지 잉크 비율 (cpdp-title.png 243×70 = 3.47) → 2.53rem.
   박스 비율 = 이미지 비율이라 fill이어도 무왜곡 (구 SYNTHIA의 10% 압축 보정은 리브랜딩으로 소멸).
   명시 width라 collapsed의 width:0 전환도 auto 때와 달리 실제로 애니메이션된다. */
.sidebar-logo-title { height: 0.73rem; width: 2.53rem; object-fit: fill; overflow: hidden; transition: opacity 0.2s, width 0.2s; filter: brightness(0) invert(1) brightness(0.78) sepia(0.05); }
.sidebar-logo-text { overflow: hidden; text-overflow: ellipsis; transition: opacity 0.2s, width 0.2s; color: #fff; }

/* ── 사이드바 메뉴 검색 (즐겨찾기 위 — HlcaSearchDropdown 초성검색) ── */
/* pad-top 1px + 인풋(tab-h - 1px) = --tab-h → 인풋 밑선이 워크스페이스 탭바 밑선과 수평 정렬 (헤더 밑선에 이은 두 번째 기준선) */
.sidebar-search { position: relative; padding: 1px 0.5rem 0.2rem; flex-shrink: 0; }
.sidebar-search-input {
    width: 100%; height: calc(var(--tab-h) - 1px); padding: 0 8px 0 26px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 5px; color: #fff; font-size: var(--fs-nav);
    cursor: pointer; outline: none; transition: background 0.2s, border-color 0.2s;
}
.sidebar-search-input::placeholder { color: rgba(255,255,255,0.5); }
.sidebar-search-input:hover, .sidebar-search-input:focus { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.28); }
.sidebar-search-icon {
    position: absolute; left: calc(0.5rem + 8px); top: calc(1px + (var(--tab-h) - 1px) / 2);
    transform: translateY(-50%); color: rgba(255,255,255,0.5);
    font-size: 0.72rem; pointer-events: none; line-height: 1;
}
body.sidebar-collapsed .sidebar-search { display: none; }

/* 메뉴 검색 선택 시 해당 메뉴 하이라이트 5회 발광 (경로 펼침 후 시선 유도 — animationend에서 클래스 자동 제거) */
@keyframes nav-search-hit-pulse {
    0%, 100% { background: transparent; }
    50% { background: rgba(99,102,241,0.6); }
}
.lnb-link.nav-search-hit { animation: nav-search-hit-pulse 0.65s ease 5; }

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.35rem 0; }
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }
.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-item { margin: 1px 0.4rem; position: relative; }

.sidebar-link {
    display: flex; align-items: center;
    padding: 0.32rem 0.65rem; color: var(--sidebar-text);
    border-radius: 5px; transition: var(--transition);
    font-size: var(--fs-nav); cursor: pointer;
    white-space: nowrap; overflow: hidden; min-width: 0;
}
.sidebar-link > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.sidebar-link:hover { color: #fff; background: var(--sidebar-hover); }
.sidebar-link.active { color: #fff; background: var(--sidebar-active); box-shadow: 0 1px 8px rgba(99,102,241,0.35), 0 0 0 1px rgba(160,170,255,0.15) inset; }
.sidebar-icon { width: 1.2rem; text-align: center; margin-right: 0.45rem; font-size: 0.78rem; opacity: 0.8; flex-shrink: 0; }
.submenu-arrow { font-size: 0.5rem; transition: transform 0.25s; margin-left: auto; flex-shrink: 0; opacity: 0.5; }
.sidebar-link[aria-expanded="true"] .submenu-arrow, .menu-toggle.open .submenu-arrow { transform: rotate(180deg); }
.sidebar-item > .menu-toggle { font-size: var(--fs-nav); font-weight: 400; }
.menu-toggle.open { color: #fff; background: rgba(99,102,241,0.35); }
.menu-toggle.open .sidebar-icon { opacity: 1; }
.sidebar-submenu { list-style: none; padding: 0; margin: 0; display: none; }
.sidebar-submenu.open { display: block; }
.sidebar-submenu .sidebar-link { padding: 0.12rem 0.65rem 0.12rem 2rem; font-size: var(--fs-nav); line-height: 1.5; }
.sidebar-submenu .sidebar-link::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: var(--sidebar-text); position: relative; left: -0.4rem; flex-shrink: 0; opacity: 0.4; }
.sidebar-submenu .sidebar-link.active::before { background: #fff; opacity: 1; }
/* 3단계 하위 폴더 토글 */
.sidebar-submenu .menu-toggle { padding: 0.12rem 0.65rem 0.12rem 1.78rem; font-size: var(--fs-nav); line-height: 1.5; position: relative; }
.sidebar-submenu .menu-toggle::before { content: '\f4d5'; font-family: 'bootstrap-icons'; font-size: 0.55rem; position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); opacity: 0.5; }
.sidebar-submenu .menu-toggle.open::before { content: '\f4d8'; opacity: 0.8; }
.sidebar-submenu .menu-toggle.open { color: #fff; background: rgba(168,130,255,0.14); }
/* 3단계 하위 메뉴 */
.sidebar-submenu .sidebar-submenu .sidebar-link { padding-left: 2.8rem; }
/* 4단계 하위 폴더 토글 */
.sidebar-submenu .sidebar-submenu .menu-toggle { padding: 0.12rem 0.65rem 0.12rem 2.58rem; }
.sidebar-submenu .sidebar-submenu .menu-toggle::before { left: 1.75rem; }
/* 4단계 하위 메뉴 */
.sidebar-submenu .sidebar-submenu .sidebar-submenu .sidebar-link { padding-left: 3.6rem; }

.sidebar-footer { height: var(--toggle-bar-h); display: flex; align-items: center; justify-content: center; border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; cursor: pointer; transition: background 0.2s; }
.sidebar-footer:hover { background: var(--sidebar-hover); }
.sidebar-collapse-btn { background: none; border: none; color: var(--sidebar-text); cursor: pointer; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.78rem; transition: var(--transition); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sidebar-footer:hover .sidebar-collapse-btn { color: #fff; }

/* Collapsed sidebar */
body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-w); }
body.sidebar-collapsed .main-wrapper { margin-left: var(--sidebar-collapsed-w); }
body.sidebar-collapsed .sidebar-logo-text { opacity: 0; width: 0; overflow: hidden; }
/* 접힘 시: 가로 로고를 좌측 엠블럼만 보이도록 crop (대부분 로고가 심볼-좌/워드마크-우 구성) */
body.sidebar-collapsed .sidebar-logo-img { width: var(--sidebar-logo-h); object-fit: cover; object-position: left center; }
/* CPDP 기본 로고는 엠블럼만 남기고 타이틀을 접는다 (LCA 동일) */
body.sidebar-collapsed .sidebar-logo-title { opacity: 0; width: 0; overflow: hidden; }
body.sidebar-collapsed .sidebar-logo { overflow: visible; justify-content: center; }
body.sidebar-collapsed .submenu-arrow { display: none; }
body.sidebar-collapsed .sidebar-link > span { opacity: 0; width: 0; overflow: hidden; }
body.sidebar-collapsed .sidebar-submenu { display: none !important; }
body.sidebar-collapsed .sidebar-item { margin: 1px 0.2rem; }
body.sidebar-collapsed .sidebar-link { justify-content: center; padding: 0.42rem; }
body.sidebar-collapsed .sidebar-icon { margin-right: 0; }
body.sidebar-collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }
body.sidebar-collapsed .sidebar { overflow: visible !important; }
body.sidebar-collapsed .sidebar-nav { overflow: visible !important; }

/* Flyout */
.sidebar-flyout { display: none; position: absolute; left: 100%; top: -4px; min-width: 175px; background: var(--sidebar-bg-flat); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; box-shadow: 4px 4px 20px rgba(0,0,0,0.3); z-index: 99999; padding: 0.25rem 0; backdrop-filter: var(--glass-blur); }
.sidebar-flyout.flyout-visible { display: block; }
.sidebar-flyout-title { padding: 0.3rem 0.65rem; color: #fff; font-size: var(--fs-nav); border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap; }
.sidebar-flyout-item { display: block; padding: 0.26rem 0.65rem; color: var(--sidebar-text); font-size: var(--fs-nav); white-space: nowrap; cursor: pointer; transition: 0.15s; border-radius: 3px; margin: 1px 0.2rem; }
.sidebar-flyout-item:hover { color: #fff; background: var(--sidebar-hover); }
.sidebar-flyout-item.active { color: #fff; background: var(--sidebar-active); }

.floating-btn { display: none; }
.resizer { position: absolute; top: 0; bottom: 0; width: 3px; background: transparent; cursor: ew-resize; z-index: 100; transition: background 0.2s; }
.resizer:hover, .resizer.active { background: var(--accent); }
.resizer-sidebar { right: 0; }
.resizer-right-panel { left: 0; }

/* === 5. Main Wrapper === */
.main-wrapper {
    margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column;
    height: 100vh; transition: margin-left 0.3s cubic-bezier(.25,1,.5,1); min-width: 0;
    position: relative; overflow: hidden;
}
/* [PEARL-ORIG] 정적 컬러 블롭 — 펄 제거로 비활성 */
/* .main-wrapper::before { content: ''; position: absolute; z-index: 0; pointer-events: none; width: 450px; height: 450px; border-radius: 50%; background: radial-gradient(circle, rgba(100,140,255,0.15) 0%, rgba(100,140,255,0) 70%); top: -80px; right: -100px; } */
/* .main-wrapper::after { content: ''; position: absolute; z-index: 0; pointer-events: none; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(180,100,255,0.12) 0%, rgba(180,100,255,0) 70%); bottom: -60px; left: -80px; } */
/* body[data-theme="dark"] .main-wrapper::before { background: radial-gradient(circle, rgba(80,100,180,0.07) 0%, rgba(80,100,180,0) 70%); } */
/* body[data-theme="dark"] .main-wrapper::after { background: radial-gradient(circle, rgba(120,80,160,0.06) 0%, rgba(120,80,160,0) 70%); } */
.main-wrapper > * { position: relative; z-index: 1; }

/* === 6. Top Header (Pearl Glass) === */
.top-header {
    height: var(--header-h); display: flex; align-items: center;
    justify-content: space-between; padding: 0 0.75rem;
    /* top-header만 펄 효과 유지 */
    background: rgba(255,255,255,0.58); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.65);
    flex-shrink: 0; z-index: 10;
    transition: background 0.4s;
}
body[data-theme="dark"] .top-header {
    background: rgba(44,44,46,0.75);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* min-width:0 = GNB가 길어지면(다국어) .header-left 가 줄어들 수 있게 → 초과분은 .gnb-nav 내부 스크롤로.
   flex-shrink:0 = 우측 컨트롤(사용자명·뱃지·언어/테마 버튼)은 어떤 경우에도 눌리지 않는다.
   (이게 없으면 영문 GNB에서 .header-user 가 3~4줄로 줄바꿈되며 34px 헤더 안에서 찌그러졌다) */
.header-left { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.header-btn { background: none; border: none; color: var(--text-secondary); font-size: 0.82rem; cursor: pointer; padding: 0.1rem 0.3rem; border-radius: 4px; transition: var(--transition); line-height: 1; }
.header-btn:hover { color: var(--accent); background: var(--accent-light); }
.header-user { font-size: var(--fs); display: flex; align-items: center; gap: 0.2rem; }
.header-dept-badge { font-size: 0.52rem; background: var(--accent-light); color: var(--accent); padding: 0.02rem 0.25rem; border-radius: 2px; line-height: 1.4; }
.header-role-badge { font-size: 0.5rem; background: rgba(110,110,115,0.1); color: var(--text-secondary); padding: 0.02rem 0.3rem; border-radius: 2px; line-height: 1.4; }
.header-user.superuser-text, .header-user.superuser-text .header-dept-badge { color: #8b0000; }
body[data-theme="dark"] .header-user.superuser-text,
body[data-theme="dark"] .header-user.superuser-text .header-dept-badge { color: #ff6b6b; }
.header-divider { width: 1px; height: 10px; background: var(--border); }
/* GNB — 액센트 필 (활성 탭 솔리드, 외곽 트랙 없음) */
/* 폭이 모자라면 눌리지 않고 가로로 스크롤 — 워크스페이스 탭바(.workspace-tabs)·툴바(.panel-filter-bar)와 동일 처리 */
.gnb-nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; min-width: 0; }
.gnb-nav::-webkit-scrollbar { display: none; }
.gnb-link { padding: 0.12rem 0.5rem; font-size: var(--fs); font-weight: 400; color: var(--gnb-text, #3a3a3c); border-radius: 999px; transition: var(--transition); line-height: 1.4; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.gnb-link:hover { color: var(--accent); background: var(--accent-light); }
.gnb-link.active, .gnb-link.active:hover { color: #fff; background: var(--accent); }
body[data-theme="dark"] .gnb-link.active, body[data-theme="dark"] .gnb-link.active:hover { color: #1c1c1e; }

/* === 7. Content === */
.content-wrapper { flex: 1; display: flex; overflow: hidden; position: relative; }
.center-area { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* === 8. Tabs (Pearl Glass) === */
.workspace-tabs {
    height: var(--tab-h);
    background: var(--surface); backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: var(--glass-border);
    display: flex; align-items: flex-end; padding: 0 0.25rem; gap: 1px;
    overflow-x: auto; flex-shrink: 0;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}
.workspace-tabs::-webkit-scrollbar { display: none; }
.tab-item {
    height: calc(var(--tab-h) - 1px); padding: 0 0.5rem;
    border: 1px solid var(--border); border-bottom: none;
    border-radius: 3px 3px 0 0; background: rgba(200,200,210,0.15);
    backdrop-filter: blur(4px);
    color: var(--text-muted); font-size: var(--fs);
    display: flex; align-items: center; gap: 0.2rem; cursor: pointer;
    min-width: 70px; max-width: 140px; flex-shrink: 0; transition: 0.2s; position: relative; line-height: 1;
}
.tab-item:hover { background: var(--accent-light); color: var(--text); }
.tab-item.tab-dragging { opacity: 0.4; }
.tab-item.active { background: var(--surface); color: var(--accent); border-top: 2px solid var(--accent); border-bottom: 1px solid transparent; margin-bottom: -1px; z-index: 2; box-shadow: 0 -2px 8px rgba(99,102,241,0.1), 0 0 0 1px rgba(180,200,255,0.2) inset; }
.tab-icon { font-size: 0.58rem; }
.tab-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; user-select: none; }
.tab-close { font-size: 0.62rem; color: var(--text-muted); padding: 0; border-radius: 50%; cursor: pointer; line-height: 1; }
.tab-close:hover { color: #dc2626; background: rgba(220,38,38,0.1); }

/* === 9. Workspace Content === */
.workspace-content { flex: 1; position: relative; background: transparent; overflow: hidden; }
.tab-panel { position: absolute; inset: 0; padding: 0.6rem 0.9rem 0.6rem; overflow-y: auto; overflow-x: hidden; display: none; animation: fadeIn 0.15s ease; }
.tab-panel.active { display: flex; flex-direction: column; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

.panel-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; gap: 0.8rem; flex-shrink: 0; }
.panel-breadcrumb { display: flex; align-items: center; font-size: var(--fs); color: var(--text-muted); gap: 0.1rem; white-space: nowrap; list-style: none; padding: 0; margin: 0; }
.panel-breadcrumb a { color: var(--text-muted); display: flex; align-items: center; gap: 0.2rem; transition: color 0.2s; }
.panel-breadcrumb a:hover { color: var(--accent); }
.panel-breadcrumb .sep { font-size: 0.42rem; opacity: 0.5; margin: 0 0.2rem; }
.panel-breadcrumb .current { color: var(--text); }
.path-placeholder { display: contents; }
.panel-meta { display: flex; align-items: center; gap: 0.3rem; font-size: var(--fs); color: var(--text-secondary); white-space: nowrap; }
.meta-badge { font-size: var(--fs); font-family: ui-monospace, Consolas, monospace; background: rgba(99,102,241,0.08); padding: 0.04rem 0.3rem; border-radius: 2px; border: 1px solid rgba(99,102,241,0.15); color: var(--accent); }

/* Panel Filter Bar (Pearl Glass + Shimmer) */
.panel-filter-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--surface); backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 0.2rem 0.4rem; border-radius: 6px;
    border: 1px solid rgba(140,145,170,0.45); margin-bottom: 0.05rem; gap: 0.2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    overflow-x: auto; overflow-y: hidden; white-space: nowrap;
    box-shadow: var(--shadow-sm); flex-shrink: 0;
}
body[data-theme="dark"] .panel-filter-bar { border: var(--glass-border); }
.panel-filter-bar::-webkit-scrollbar { display: none; }
.filter-conditions { display: flex; align-items: center; gap: 0.18rem; flex: 1; min-width: max-content; }
.filter-input { padding: 0.12rem 0.28rem; font-size: var(--fs-toolbar); border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255,255,255,0.5); color: var(--text); outline: none; width: 124px; text-align: center; font-family: inherit; transition: border 0.2s, box-shadow 0.2s; }
body[data-theme="dark"] .filter-input { background: rgba(40,40,44,0.6); }
.filter-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.12); }
/* 검색조건 값 설정 시 accent 색상 */
.filter-input.filter-has-value { color: var(--accent); }
/* 활성 검색조건 드롭다운 — 좌측 accent 라인으로 구분 */
.filter-input.filter-cond { border-left: 2px solid var(--accent); background: rgba(255,255,255,0.8); }
body[data-theme="dark"] .filter-input.filter-cond { background: rgba(60,60,70,0.8); }
.filter-date-group { display: flex; align-items: center; gap: 0.12rem; }
.filter-sep { color: var(--text-muted); font-size: var(--fs-toolbar); }
.date-input { width: 95px; cursor: pointer; }
.date-input.flatpickr-input { padding-right: 0.15rem; }
/* ★ 일자 입력 초기화 버튼 (값이 있을 때만 노출) */
.filter-date-wrap { position: relative; display: inline-flex; align-items: center; }
.filter-date-wrap.has-value .date-input { padding-right: 18px; }
.filter-date-clear {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    line-height: 12px;
    text-align: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
    display: none;
    border-radius: 50%;
}
.filter-date-wrap.has-value .filter-date-clear { display: inline-block; }
.filter-date-clear:hover { background: rgba(0,0,0,0.08); color: var(--text); }
body[data-theme="dark"] .filter-date-clear:hover { background: rgba(255,255,255,0.12); }
/* ★ 조회조건 1~4 통일 너비 */
.filter-cond { width: 124px !important; }
/* ★ select 필터 placeholder 흐릿한 텍스트 */
.filter-cond { text-align: left; padding-left: 0.5rem; }
/* filter-cond input placeholder도 진한색으로 (표준: 활성 검색조건 명확히 표시) */
input.filter-cond::placeholder { color: var(--text); opacity: 1; }
select.filter-cond option { text-align: left; padding: 0.25rem 0.5rem; }
select.filter-cond.placeholder-active { color: var(--text); }
select.filter-cond.placeholder-active option { color: var(--text); }
/* ★ 커스텀 셀렉트 — 글래스모피즘 드롭다운 (모든 툴바 공통) */
.hlca-custom-select { position: relative; display: inline-block; }
.right-panel-body .hlca-custom-select { display: block; width: 100%; }
.right-panel-body .hlca-custom-select select { width: 100%; }
/* 글래스 select disabled — 표준 .filter-cond:disabled와 배경 통일.
   단, color: transparent는 덮어써서 placeholder 라벨(예: "월", "주차")이 보이도록. */
.hlca-custom-select:has(select:disabled) { cursor: not-allowed; }
.hlca-custom-select:has(select:disabled) select { cursor: not-allowed; }
.hlca-custom-select select.filter-cond:disabled { color: var(--text); }
.hlca-cs-dropdown {
    display: none; position: fixed; z-index: 99999;
    background: rgba(244,245,250,0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 1.5px 6px rgba(0,0,0,0.06);
    max-height: 240px; overflow: hidden; padding: 0;
    flex-direction: column;
}
.hlca-cs-dropdown.open { display: flex; }
/* 검색 입력창 (옵션 8개 초과 시 자동 표시) */
.hlca-cs-search-wrap {
    padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.3); flex-shrink: 0;
}
.hlca-cs-search {
    width: 100%; padding: 4px 8px;
    font-size: var(--fs); color: var(--text);
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(0,0,0,0.12); border-radius: 4px;
    outline: none;
}
.hlca-cs-search::placeholder { color: var(--text-muted); }
.hlca-cs-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.12); }
/* 옵션 리스트 래퍼 (스크롤) */
.hlca-cs-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 3px 0; }
body[data-theme="dark"] .hlca-cs-search-wrap { background: rgba(255,255,255,0.05); border-bottom-color: rgba(255,255,255,0.12); }
body[data-theme="dark"] .hlca-cs-search { background: rgba(40,40,44,0.6); border-color: rgba(255,255,255,0.12); color: var(--text); }
.hlca-cs-option {
    padding: 4px 12px; font-size: var(--fs); cursor: pointer;
    white-space: nowrap; transition: background 0.15s, color 0.15s;
    color: var(--text); text-align: left;
}
.hlca-cs-option:hover { background: rgba(99,102,241,0.18); color: var(--accent); }
.hlca-cs-option.selected { background: rgba(99,102,241,0.16); color: var(--text); }
/* 빈값 옵션(value='') 선택 해제 행 — HlcaSearchDropdown과 통일 (라이트=진한 인디고, 다크=밝은 블루) */
.hlca-cs-option.hlca-cs-clear {
    color: var(--accent); background: rgba(99,102,241,0.04);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.hlca-cs-option.hlca-cs-clear:hover { background: rgba(99,102,241,0.12); color: var(--accent); }
.hlca-cs-empty { padding: 8px 12px; color: var(--text-muted); text-align: center; font-size: var(--fs); }
/* 다크모드 */
body[data-theme="dark"] .hlca-cs-dropdown {
    background: rgba(34,35,42,0.74);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 1.5px 6px rgba(0,0,0,0.2);
}
body[data-theme="dark"] .hlca-cs-option:hover { background: rgba(99,102,241,0.25); color: #4da6ff; }
body[data-theme="dark"] .hlca-cs-option.selected { background: rgba(99,102,241,0.2); color: var(--text); }
body[data-theme="dark"] .hlca-cs-option.hlca-cs-clear { border-bottom-color: rgba(255,255,255,0.15); color: #4da6ff; }
/* 스크롤바 */
.hlca-cs-dropdown::-webkit-scrollbar { width: 4px; }
.hlca-cs-dropdown::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.25); border-radius: 2px; }
.filter-cond:disabled { opacity: 1; cursor: default; background: rgba(0,0,0,0.04); border: 1px solid var(--border); color: transparent; }
body[data-theme="dark"] .filter-cond:disabled { background: rgba(255,255,255,0.04); }
/* ★ 그리드 범위 선택 하이라이트 */
.hlca-range-selected { background-color: rgba(99,102,241,0.15) !important; }
.hlca-range-selecting,
.hlca-range-selecting .ag-cell,
.hlca-range-selecting .ag-row { user-select: none !important; -webkit-user-select: none !important; }
.filter-actions { display: flex; align-items: center; gap: 0.1rem; flex-shrink: 0; }
.btn-tool {
    display: flex; align-items: center; justify-content: center; gap: 0.12rem;
    min-width: 40px; padding: 0.1rem 0.25rem; font-size: var(--fs-toolbar);
    border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border);
    background: rgba(255,255,255,0.5); color: var(--text);
    white-space: nowrap; transition: var(--transition); font-family: inherit;
    backdrop-filter: blur(4px);
}
body[data-theme="dark"] .btn-tool { background: rgba(50,50,55,0.5); }
.btn-tool:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 8px rgba(99,102,241,0.25); }
.btn-tool:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-accent { background: var(--accent); color: #fff; border: 1px solid var(--accent); font-size: var(--fs-toolbar); border-radius: var(--radius-sm); }
.btn-accent:hover { background: var(--accent-hover); color: #fff; }

/* Grid Area */
.grid-area { flex: 1; margin-top: 0.8rem; min-height: 200px; overflow: hidden; }
.grid-placeholder { width: 100%; min-height: 240px; border: 1.5px dashed var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); border-radius: var(--radius); gap: 0.25rem; cursor: pointer; transition: background 0.2s; font-size: var(--fs); }
.grid-placeholder:hover { background: rgba(110,110,115,0.03); }

/* === AG Grid Wrapper v2.5 === */
.hlca-grid-wrap {
    width: 100%; height: 100%; min-height: 200px;
    border-radius: 6px; overflow: hidden;
    border: var(--glass-border);
    box-shadow: var(--shadow-sm);
}
.hlca-grid-wrap .ag-root-wrapper { border: none !important; }
/* AG Grid 로딩 오버레이 투명화 */
.hlca-grid-wrap .ag-overlay-panel { background: transparent !important; }
.hlca-grid-wrap .ag-overlay-wrapper { background: transparent !important; }
.hlca-grid-wrap .ag-overlay-loading-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* 헤더 배경 */
.hlca-grid-wrap .ag-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(15,20,60,0.4) !important;
}
.hlca-grid-wrap .ag-header-row-column { background: rgba(20,30,80,0.92) !important; }
/* 헤더 우측 상단 모서리 둥글게 (좌측 래퍼 border-radius:6px과 r 값 6px 일치) — 실제 렌더되는 "헤더 행 배경"에 radius 적용.
   ★ 반드시 중앙 컬럼 컨테이너(.ag-header-container)로 스코프 — 핀고정 헤더 행에 적용하면 핀고정/중앙 경계에 노치 발생.
   (핀고정 좌측 모서리는 래퍼 overflow:hidden 클리핑으로 둥글어지므로 행 radius 불필요. 라이트/다크 공통.) */
.hlca-grid-wrap .ag-header-container .ag-header-row-column-group,
.hlca-grid-wrap .ag-header-container .ag-header-row-column { border-top-right-radius: 6px !important; }
/* 그룹(2단) 헤더: 그룹 행이 최상단이면 그 아래 개별 컬럼 행 radius 제거 → 두 행 경계 우측 노치 방지 */
.hlca-grid-wrap .ag-header-container:has(.ag-header-row-column-group) .ag-header-row-column { border-top-right-radius: 0 !important; }
/* 마지막 열 우측 세로선 — 데이터/풋터 닫음선. 헤더는 위 둥근 모서리로 마무리되므로, 헤더의 직선 닫음선/셀 border는 제거(아래 :last-child)하여 잔재 선 없음 */
.hlca-grid-wrap .ag-center-cols-container { border-right: 1px solid rgba(0,0,0,0.22) !important; }
/* 헤더 마지막 셀의 우측 border 제거 — 둥근 모서리 위로 직선이 삐져나오지 않도록 (좌측이 깔끔한 것과 동일) */
.hlca-grid-wrap .ag-header-container .ag-header-cell:last-child,
.hlca-grid-wrap .ag-header-container .ag-header-group-cell:last-child { border-right: none !important; }
/* AG Grid alpine 테마의 컬럼 리사이즈 표시 막대(.ag-header-cell-resize::after, 2px 회색)가 마지막 열 우측 끝(그리드 모서리)에 그어져 둥근 모서리 위로 직선 잔재로 남는 것 방지 — 마지막 헤더/그룹 셀의 리사이즈 막대만 숨김(리사이즈 기능 자체는 유지) */
.hlca-grid-wrap .ag-header-container .ag-header-cell:last-child .ag-header-cell-resize::after,
.hlca-grid-wrap .ag-header-container .ag-header-group-cell:last-child .ag-header-cell-resize::after,
.hlca-grid-wrap .ag-header-container .ag-header-group-cell:last-child .ag-header-group-cell-resize::after { display: none !important; }
.hlca-grid-wrap .ag-center-cols-container .ag-row .ag-cell:last-child,
.hlca-grid-wrap .ag-center-cols-container .ag-row-pinned .ag-cell:last-child { border-right: none !important; }

/* #4 헤더 센터 정렬 (모든 열 무조건) */
.hlca-header-center .ag-header-cell-label { justify-content: center !important; }
.hlca-grid-wrap .ag-header-cell-label { justify-content: center !important; }
.hlca-grid-wrap .ag-header-cell-text { text-align: center !important; }
.hlca-grid-wrap .ag-header-cell {
    font-size: var(--fs) !important; font-weight: 400 !important;
    color: rgba(255,255,255,0.95) !important;
    padding-left: 4px !important; padding-right: 4px !important;
}
/* 열 이동(헤더 드래그) 중 배색 유지 — AG Grid 기본은
   .ag-header-cell-moving { background-color: var(--ag-header-cell-moving-background-color) } 이고
   그 기본값이 --ag-background-color(#fff)다. 이 프로젝트는 헤더 배색을 '행'(.ag-header-row-column)에
   주므로, 셀에 칠해진 흰 배경이 행의 남색을 덮어 드래그 중인 헤더만 통째로 하얘졌다.
   transparent로 두면 행 배경이 그대로 비쳐 색 변화 없이 위치만 이동한다 (라이트/다크 공통 —
   색은 각 모드의 행 배경에서 나오므로 여기서 모드별 분기 불필요). */
.hlca-grid-wrap .ag-header-cell.ag-header-cell-moving,
.hlca-grid-wrap .ag-header-group-cell.ag-header-cell-moving { background-color: transparent !important; }
/* 열 이동 시 커서를 따라다니는 드래그 표시자(ghost) — 실제로 '움직이는' 요소가 이것이다.
   ★ .hlca-grid-wrap로 스코프하면 안 걸린다: AG Grid가 이 요소를 document.body에 append하므로
     (createGhost -> eGhostParent.appendChild) 그리드 래퍼 바깥에 존재한다. 전역 셀렉터가 필수.
   기본 배경이 --ag-background-color(#fff)라 흰 칩으로 떠다녀 헤더 배색과 이질적이었다.
   헤더와 동일한 배색/글꼴로 맞춰 '색 변화 없이 위치만 이동'하는 것처럼 보이게 한다.
   배경을 남색으로 바꾸므로 라벨/아이콘 색도 함께 흰색으로 (안 그러면 남색 위 검은 글씨가 됨). */
.ag-dnd-ghost {
    background: rgba(20,30,80,0.92) !important;
    color: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    font-size: var(--fs) !important;
    font-weight: 400 !important;   /* alpine이 700을 강제 — 볼드체 금지 표준 적용 */
}
.ag-dnd-ghost .ag-dnd-ghost-icon { color: rgba(255,255,255,0.95) !important; }
body[data-theme="dark"] .ag-dnd-ghost { background: rgba(44,44,52,0.92) !important; }
/* 데이터 셀 좌우 패딩 축소 (헤더와 동일) */
.hlca-grid-wrap .ag-cell { padding-left: 4px !important; padding-right: 4px !important; }
/* 정렬 아이콘 — 텍스트 밀림 방지 (absolute 배치) */
.hlca-grid-wrap .ag-header-cell-label { position: relative; }
.hlca-grid-wrap .ag-sort-indicator-container { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.hlca-grid-wrap .ag-sort-indicator-icon { opacity: 0.6; }
/* 헤더 행 높이 24px */
.hlca-grid-wrap .ag-header-row-column { height: 24px !important; min-height: 24px !important; }
/* 컬럼 그룹 헤더 행 높이 24px (년도 등) */
.hlca-grid-wrap .ag-header-row-column-group { height: 24px !important; min-height: 24px !important; background: rgba(20,30,80,0.92) !important; }
.hlca-grid-wrap .ag-header-group-cell {
    font-size: var(--fs) !important; font-weight: 400 !important;
    color: rgba(255,255,255,0.95) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; line-height: 24px !important;
}
.hlca-grid-wrap .ag-header-group-cell .ag-header-group-cell-label {
    display: flex !important; align-items: center !important; justify-content: center !important;
    height: 100% !important; padding: 0 !important; line-height: 24px !important;
}

/* #3 필터행: 높이 24px */
.hlca-grid-wrap .ag-header-row-column-filter { height: 24px !important; min-height: 24px !important; }
.hlca-grid-wrap .ag-floating-filter { background: rgba(220,224,236,0.9) !important; padding: 0 2px !important; }
.hlca-grid-wrap .ag-header-row-column-filter .ag-header-cell { padding: 0 4px !important; border-right: 1px solid rgba(0,0,0,0.18) !important; }
.hlca-grid-wrap .ag-floating-filter-button { display: none !important; }
/* 숫자 필터 조건 드롭다운/추가 인풋 숨김 */
.hlca-grid-wrap .ag-floating-filter .ag-floating-filter-button-button { display: none !important; }
.hlca-grid-wrap .ag-floating-filter select { display: none !important; }
.hlca-grid-wrap .ag-floating-filter-body,
.hlca-grid-wrap .ag-floating-filter-full-body {
    display: flex !important; align-items: center !important; justify-content: center !important;
    height: 100% !important; padding: 0 3px !important;
}
/* 모든 래퍼 */
.hlca-grid-wrap .ag-floating-filter .ag-input-wrapper,
.hlca-grid-wrap .ag-floating-filter .ag-text-field-input-wrapper,
.hlca-grid-wrap .ag-floating-filter .ag-input-field,
.hlca-grid-wrap .ag-floating-filter .ag-text-field,
.hlca-grid-wrap .ag-floating-filter .ag-labeled,
.hlca-grid-wrap .ag-floating-filter .ag-text-field-input-wrapper,
.hlca-grid-wrap .ag-floating-filter .ag-wrapper {
    padding: 0 !important; margin: 0 !important;
    height: 16px !important; min-height: 0 !important; max-height: 16px !important;
    display: flex !important; align-items: center !important;
}
/* 인풋 박스 본체 */
.ag-theme-alpine.hlca-grid-wrap .ag-header-row-column-filter .ag-floating-filter input.ag-input-field-input,
.ag-theme-alpine.hlca-grid-wrap .ag-header-row-column-filter .ag-floating-filter input[type="text"],
.ag-theme-alpine.hlca-grid-wrap .ag-header-row-column-filter .ag-floating-filter input {
    font-size: var(--fs) !important; padding: 0 2px !important;
    height: 16px !important; min-height: 0 !important; max-height: 16px !important;
    border-radius: 3px !important;
    background: #fff !important;
    border: 0.5px solid transparent !important;
    color: var(--text) !important;
    line-height: 16px !important; width: 100% !important;
    box-sizing: border-box !important;
}

/* 데이터 행 */
.hlca-grid-wrap .ag-row { font-size: var(--fs) !important; font-weight: 400 !important; background: transparent !important; }
.hlca-grid-wrap .ag-cell { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 24px !important; display: flex !important; align-items: center !important; }
.hlca-grid-wrap .ag-cell[style*="text-align: center"],
.hlca-grid-wrap .ag-cell[style*="text-align:center"] { justify-content: center !important; }
.hlca-grid-wrap .ag-cell[style*="text-align: right"],
.hlca-grid-wrap .ag-cell[style*="text-align:right"] { justify-content: flex-end !important; }
.hlca-grid-wrap .ag-row-even { background: rgba(200,205,225,0.12) !important; }
.hlca-grid-wrap .ag-row:hover { background: var(--accent-light) !important; }
.hlca-grid-wrap .ag-row-selected,
.hlca-grid-wrap .ag-row.hlca-row-active { background: rgba(99,102,241,0.12) !important; }
.hlca-grid-wrap .ag-row-selected .ag-cell,
.hlca-grid-wrap .ag-row.hlca-row-active .ag-cell { border-bottom-color: rgba(99,102,241,0.25) !important; }
/* 합계행(rowClassRules 'hlca-total-row') — 행 전체 균일 틴트 (프레임워크 _chk/_no 열 포함). hlca-row-active와 동일 패턴 */
.hlca-grid-wrap .ag-row.hlca-total-row { background: rgba(99,102,241,0.2) !important; }
.hlca-grid-wrap .ag-row.hlca-total-row .ag-cell { color: var(--accent) !important; }

/* 라이트 그리드선 */
.hlca-grid-wrap .ag-cell { border-right: 1px solid rgba(0,0,0,0.22) !important; color: var(--text) !important; }
/* ★ boolean 체크 표준 색상 (is_* 필드 자동 적용) */
.hlca-grid-wrap .ag-cell.bool-checked { color: #059669 !important; }
/* 환율 변경이력 diff 셀 (기존 값/변경 값) — bool-checked 와 동일 방식 */
.hlca-grid-wrap .ag-cell.xchg-old { color: #ef4444 !important; }
.hlca-grid-wrap .ag-cell.xchg-new { color: #059669 !important; }
.hlca-grid-wrap .ag-cell.bool-unchecked { color: #dc2626 !important; }
.hlca-grid-wrap .ag-row { border-bottom: 1px solid rgba(0,0,0,0.18) !important; }
.hlca-grid-wrap .ag-header-cell { border-right: 1px solid rgba(255,255,255,0.2) !important; }

/* === 행 병합 표시 (.hlca-merge-grid 스코프, 미부여 그리드 무영향) ===
   같은 값이 연속되는 컬럼(품목명 등)을 세로 병합처럼 보이게 하는 프레임워크 표준.
   행 가로선은 원래 .ag-row(행) 단위라 특정 컬럼만 지울 수 없다. 데이터(center) 행에 한해
   가로선을 셀(.ag-cell) 단위로 옮긴 뒤, 같은 묶음 내부 셀(.hlca-merge-mid)의 아래 선만
   투명 처리 → 그 컬럼이 병합된 것처럼 보이게 한다. 핀고정(_chk/_no)·풋터 행은 손대지 않는다.
   사용 화면: daily-product-hold(품목명) · yield-actual(품목명/생산량/양품률). 상세 grid.md */
.hlca-grid-wrap.hlca-merge-grid .ag-center-cols-container .ag-row:not(.ag-row-pinned) { border-bottom: none !important; }
.hlca-grid-wrap.hlca-merge-grid .ag-center-cols-container .ag-row:not(.ag-row-pinned) .ag-cell { border-bottom: 1px solid rgba(0,0,0,0.18) !important; }
.hlca-grid-wrap.hlca-merge-grid .ag-center-cols-container .ag-row:not(.ag-row-pinned) .ag-cell.hlca-merge-mid { border-bottom-color: transparent !important; }
body[data-theme="dark"] .hlca-grid-wrap.hlca-merge-grid .ag-center-cols-container .ag-row:not(.ag-row-pinned) { border-bottom: none !important; }
body[data-theme="dark"] .hlca-grid-wrap.hlca-merge-grid .ag-center-cols-container .ag-row:not(.ag-row-pinned) .ag-cell { border-bottom: 0.5px solid rgba(255,255,255,0.18) !important; }
body[data-theme="dark"] .hlca-grid-wrap.hlca-merge-grid .ag-center-cols-container .ag-row:not(.ag-row-pinned) .ag-cell.hlca-merge-mid { border-bottom-color: transparent !important; }

/* 합계행(footer) */
.hlca-grid-wrap .ag-row-pinned { background: rgba(230,232,245,0.7) !important; }
.hlca-grid-wrap .ag-row-pinned .ag-cell {
    border-top: 1.5px solid rgba(99,102,241,0.3) !important;
    border-right: 1px solid rgba(0,0,0,0.22) !important;
    color: var(--text) !important;
}

/* === 체크박스: 전부 숨기고 _chk 열에서만 표시 === */
/* 1) 모든 체크박스 숨김 (헤더+데이터 전체) */
.hlca-grid-wrap .ag-selection-checkbox { display: none !important; }
.hlca-grid-wrap .ag-header-select-all { display: none !important; }

/* 2) _chk 열에서만 체크박스 복원 + 정중앙 */
.hlca-grid-wrap .ag-cell[col-id="_chk"] .ag-selection-checkbox {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0 !important;
    position: relative !important; top: -4px !important;
}

/* 3) 체크박스 - 모든 레이어 테두리 완전 제거 */
.hlca-grid-wrap .ag-checkbox-input-wrapper {
    width: 12px !important; height: 12px !important;
    min-width: 12px !important; min-height: 12px !important;
    margin: 0 !important;
    border: none !important; outline: none !important; box-shadow: none !important;
    background: none !important;
}
/* AG Grid alpine 테마 기본 테두리 전부 제거 */
.hlca-grid-wrap .ag-checkbox-input-wrapper,
.hlca-grid-wrap .ag-checkbox-input-wrapper::before,
.hlca-grid-wrap .ag-checkbox-input-wrapper::after,
.hlca-grid-wrap .ag-checkbox-input-wrapper *,
.hlca-grid-wrap .ag-checkbox-input,
.hlca-grid-wrap input[type="checkbox"] {
    border: none !important; outline: none !important; box-shadow: none !important;
}
/* 숨겨진 input도 크기 맞추기 (중첩 방지) */
.hlca-grid-wrap .ag-checkbox-input {
    width: 12px !important; height: 12px !important;
    margin: 0 !important; padding: 0 !important;
    opacity: 1 !important; appearance: auto !important;
    -webkit-appearance: checkbox !important;
}
/* AG Grid이 만드는 가상 체크박스 레이어 숨기기 (네이티브만 표시) */
.hlca-grid-wrap .ag-checkbox-input-wrapper::after {
    display: none !important;
}
.hlca-grid-wrap .ag-checkbox-input-wrapper::before {
    display: none !important;
}

/* No열: 우측정렬, 우측 여유 */
.hlca-grid-wrap .ag-cell[col-id="_no"] {
    justify-content: flex-end !important; padding-left: 2px !important; padding-right: 10px !important;
}
.hlca-grid-wrap .ag-header-cell[col-id="_no"] {
    padding-left: 2px !important; padding-right: 2px !important;
}

/* 4) _chk 셀/헤더 정중앙 */
.hlca-chk-cell,
.hlca-grid-wrap .ag-cell[col-id="_chk"] {
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; line-height: normal !important;
}
.hlca-grid-wrap .ag-cell[col-id="_chk"] .ag-cell-wrapper {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; height: 100% !important;
    padding: 0 !important; margin: 0 !important;
}
.hlca-chk-header,
.hlca-grid-wrap .ag-header-cell[col-id="_chk"] {
    padding: 0 !important;
}
.hlca-grid-wrap .ag-header-cell[col-id="_chk"] .ag-header-select-all {
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex: 1 !important;
    margin: 0 !important; padding: 0 !important;
    position: relative !important; top: -5px !important;
}
.hlca-chk-header .ag-header-cell-comp-wrapper,
.hlca-grid-wrap .ag-header-cell[col-id="_chk"] .ag-header-cell-comp-wrapper {
    display: none !important;
}

/* 스크롤바 - 기본 설정 */
.ag-theme-alpine.hlca-grid-wrap,
.hlca-grid-wrap.ag-theme-alpine {
    --ag-scrollbar-size: 12px !important;
}
/* AG Grid 스크롤바 색상 - 라이트 */
.hlca-grid-wrap .ag-body-viewport::-webkit-scrollbar,
.hlca-grid-wrap .ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
.hlca-grid-wrap .ag-body-vertical-scroll-viewport::-webkit-scrollbar {
    width: 12px !important; height: 12px !important;
}
.hlca-grid-wrap .ag-body-viewport::-webkit-scrollbar-thumb,
.hlca-grid-wrap .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
.hlca-grid-wrap .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
    background: rgba(100,100,110,0.4) !important;
    border-radius: 6px !important;
}
.hlca-grid-wrap .ag-body-viewport::-webkit-scrollbar-thumb:hover,
.hlca-grid-wrap .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
.hlca-grid-wrap .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
    background: rgba(100,100,110,0.6) !important;
}
.hlca-grid-wrap .ag-body-viewport::-webkit-scrollbar-track,
.hlca-grid-wrap .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
.hlca-grid-wrap .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.03) !important;
}
/* AG Grid 스크롤바 색상 - 다크 */
body[data-theme="dark"] .hlca-grid-wrap .ag-body-viewport::-webkit-scrollbar-thumb,
body[data-theme="dark"] .hlca-grid-wrap .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
body[data-theme="dark"] .hlca-grid-wrap .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
    background: rgba(180,180,195,0.35) !important;
}
body[data-theme="dark"] .hlca-grid-wrap .ag-body-viewport::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"] .hlca-grid-wrap .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"] .hlca-grid-wrap .ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
    background: rgba(180,180,195,0.55) !important;
}
body[data-theme="dark"] .hlca-grid-wrap .ag-body-viewport::-webkit-scrollbar-track,
body[data-theme="dark"] .hlca-grid-wrap .ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
body[data-theme="dark"] .hlca-grid-wrap .ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.02) !important;
}

/* #3 풋터 Total/Aver. 토글 - 풋터 좌하단 오버레이(컬럼 구조 독립 → 컬럼 그룹 화면 포함 전 화면 동작).
   바깥 .hlca-footer-toggle = 절대위치 오버레이. top은 JS(_alignFooterToggle)가 실제 풋터 행 중심 Y로 설정 + translateY(-50%)로
     토글 중심을 행 중심에 일치(정중앙). 아래 bottom은 JS 정렬 전 1프레임 fallback.
   버튼 2개는 분리 칩: Total은 좌측 고정(흐름 배치), Aver.는 풋터 No열 셀(col-id="_no") 실측 정중앙에
     JS(_alignFooterToggle)가 left 설정 + translateX(-50%). 아래 left:52.5px는 JS 정렬 전
     1프레임 fallback(_chk 32 + _no 45/2 - 토글 left 2). */
.hlca-footer-toggle {
    position: absolute; left: 2px; bottom: 2px; z-index: 10;
}
.hlca-footer-toggle button {
    font-size: var(--fs); padding: 3px 4px; border: none; border-radius: 3px;
    cursor: pointer; background: rgba(0,0,0,0.05); color: var(--text-secondary);
    text-align: center; transition: background 0.15s, color 0.15s;
}
.hlca-footer-toggle button[data-mode="average"] {
    position: absolute; top: 0; left: 52.5px; transform: translateX(-50%);
}
.hlca-footer-toggle button.active {
    background: var(--accent) !important; color: #fff !important;
}
.hlca-footer-toggle button:hover:not(.active) {
    background: rgba(0,0,0,0.12);
}

/* ===== 다크모드 ===== */
body[data-theme="dark"] .hlca-grid-wrap .ag-root-wrapper { background: var(--surface-solid) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
body[data-theme="dark"] .hlca-grid-wrap .ag-header-row-column { background: rgba(44,44,52,0.92) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-header-row-column-group { background: rgba(44,44,52,0.92) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-body-viewport { background: rgba(48,48,56,0.6) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-floating-filter { background: rgba(30,30,38,0.8) !important; }
body[data-theme="dark"] .ag-theme-alpine.hlca-grid-wrap .ag-header-row-column-filter .ag-floating-filter input.ag-input-field-input,
body[data-theme="dark"] .ag-theme-alpine.hlca-grid-wrap .ag-header-row-column-filter .ag-floating-filter input[type="text"],
body[data-theme="dark"] .ag-theme-alpine.hlca-grid-wrap .ag-header-row-column-filter .ag-floating-filter input {
    background: rgba(255,255,255,0.13) !important;
    border: 0.5px solid rgba(255,255,255,0.15) !important;
    border-radius: 4px !important;
}
body[data-theme="dark"] .hlca-grid-wrap .ag-cell { border-right: 0.5px solid rgba(255,255,255,0.18) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-cell.bool-checked { color: #34d399 !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-cell.xchg-old { color: #f87171 !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-cell.xchg-new { color: #34d399 !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-cell.bool-unchecked { color: #f87171 !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-row { border-bottom: 0.5px solid rgba(255,255,255,0.18) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-header-cell { border-right: 0.5px solid rgba(255,255,255,0.18) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-sort-indicator-icon { opacity: 0.9; }
body[data-theme="dark"] .hlca-grid-wrap .ag-sort-indicator-icon .ag-icon { color: rgba(255,255,255,0.7) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-row-even { background: rgba(60,60,70,0.35) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-row-selected,
body[data-theme="dark"] .hlca-grid-wrap .ag-row.hlca-row-active { background: rgba(99,102,241,0.2) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-row-selected .ag-cell,
body[data-theme="dark"] .hlca-grid-wrap .ag-row.hlca-row-active .ag-cell { border-bottom-color: rgba(99,102,241,0.3) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-row.hlca-total-row { background: rgba(99,102,241,0.18) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-cell-focus:not(.ag-cell-range-selected) { background: rgba(99,102,241,0.12) !important; outline-color: rgba(99,102,241,0.5) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-cell-inline-editing { background: rgba(40,40,52,0.98) !important; color: #e2e8f0 !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-cell-inline-editing input,
body[data-theme="dark"] .hlca-grid-wrap .ag-cell-inline-editing select,
body[data-theme="dark"] .hlca-grid-wrap .ag-cell-inline-editing .ag-input-field-input { background: rgba(40,40,52,0.98) !important; color: #e2e8f0 !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-row-hover { background: rgba(99,102,241,0.08) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-row-pinned { background: rgba(36,36,48,0.85) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-row-pinned .ag-cell { border-top: 1px solid rgba(129,140,248,0.25) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-row-drag,
body[data-theme="dark"] .hlca-grid-wrap .ag-row-drag .ag-icon { color: rgba(255,255,255,0.5) !important; }
body[data-theme="dark"] .hlca-grid-wrap .ag-row-drag:hover,
body[data-theme="dark"] .hlca-grid-wrap .ag-row-drag:hover .ag-icon { color: rgba(255,255,255,0.8) !important; }
body[data-theme="dark"] .hlca-footer-toggle button { background: rgba(255,255,255,0.05); }
body[data-theme="dark"] .hlca-footer-toggle button:hover:not(.active) { background: rgba(255,255,255,0.1); }

/* === 검증 에러 툴팁 === */
.ag-tooltip {
    background: #1e1b4b !important;
    color: #fecaca !important;
    font-size: var(--fs) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
    max-width: 250px !important;
    line-height: 1.4 !important;
}

/* === 그리드 헤더 우클릭 컨텍스트 메뉴 === */
.hlca-grid-ctx {
    position: fixed; z-index: 20000;
    background: var(--surface-solid); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border); border-radius: 6px;
    box-shadow: var(--shadow-lg); padding: 4px 0; min-width: 160px;
}
.hlca-grid-ctx-item {
    padding: 5px 12px; font-size: var(--fs); cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    color: var(--text); transition: background 0.12s;
}
.hlca-grid-ctx-item:hover { background: var(--accent); color: #fff; border-radius: 3px; margin: 0 3px; }
.hlca-grid-ctx-item i { font-size: 0.65rem; width: 14px; text-align: center; }
.hlca-grid-ctx-sep { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 6px; }
.hlca-grid-ctx-item.danger { color: #dc2626; }
.hlca-grid-ctx-item.danger:hover { background: #dc2626; color: #fff; }
.hlca-grid-ctx-item.disabled { color: var(--text-muted); cursor: default; pointer-events: none; opacity: 0.5; }

/* === 10. Context Menu === */
.context-menu { position: absolute; z-index: 10000; background: var(--surface); backdrop-filter: var(--glass-blur); border: var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 0.18rem 0; min-width: 140px; display: none; }
.context-menu.show { display: block; }
.context-menu-item { padding: 0.3rem 0.7rem; font-size: var(--fs); cursor: pointer; display: flex; align-items: center; transition: 0.15s; border-radius: 3px; margin: 0 0.15rem; }
.context-menu-item:hover { background: var(--accent); color: #fff; }

/* === 11. Bottom Panel (Pearl Glass) === */
.bottom-panel {
    height: var(--bottom-panel-h);
    background: #dcdde5; backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: var(--glass-border);
    display: flex; flex-direction: column; position: relative; flex-shrink: 0;
    transition: height 0.3s cubic-bezier(.25,1,.5,1);
}
.bottom-panel.collapsed { height: var(--toggle-bar-h); }
.bottom-panel-toggle { height: var(--toggle-bar-h); display: flex; justify-content: center; align-items: center; cursor: pointer; color: var(--text-muted); transition: 0.2s; flex-shrink: 0; }
.bottom-panel-toggle:hover { color: var(--accent); background: var(--accent-light); }
.bottom-panel-toggle i { font-size: 0.75rem; transition: transform 0.25s; }
.bottom-panel:not(.collapsed) .bottom-panel-toggle i { transform: rotate(180deg); }
.bottom-panel-content { flex: 1; padding: 0.45rem 0.9rem; overflow: hidden; display: flex; flex-direction: column; }
.bottom-panel-content .panel-filter-bar { margin-bottom: 0.35rem; }
.bottom-panel-title { font-size: var(--fs); margin-bottom: 0.25rem; flex-shrink: 0; }
#bottom-detail-body { flex: 1; overflow-y: auto; min-height: 0; }
/* 하단 디테일 탭별 격리 — 콘텐츠는 탭별 .bd-owner 컨테이너, 활성 탭 것만 표시 (layout-ui.md 하단 디테일 패널 표준)
   height:100%: 화면들의 100% 높이 루트(.xchg-hist 등)가 셸 높이를 상속받도록 — 내용이 더 크면 host(#bottom-detail-body)가 스크롤 */
#bottom-detail-body > .bd-owner { height: 100%; }
#bottom-detail-body > .bd-owner.bd-hidden { display: none; }

/* 환율관리 하단 변경이력 — 표준 그리드 2개(사업계획환율/적용환율) 좌우 배치 */
.xchg-hist { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.xchg-hist-title { font-size: var(--fs); color: var(--text); margin-bottom: 6px; }
.xchg-hist-panes { flex: 1; display: flex; gap: 16px; min-height: 0; }
.xchg-hist-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.xchg-hist-label { font-size: var(--fs); color: var(--text); margin-bottom: 4px; }
/* .hlca-grid-wrap 의 min-height:200px 가 하단 패널 높이를 밀어내지 않도록 해제 */
.xchg-hist-grid.hlca-grid-wrap { flex: 1; min-height: 0; }
/* 실물 미리보기 (ScreenConfig.renderPreview) — Screen Builder v2 */
.hlca-preview { display: flex; flex-direction: column; height: 100%; gap: 0.35rem; }
.hlca-preview-main { display: flex; flex: 1; min-height: 0; gap: 0.45rem; }
.hlca-preview-grid { flex: 1; min-width: 0; }
.hlca-preview-form { width: 250px; flex-shrink: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.36rem; }
.hlca-preview-detail { height: 160px; flex-shrink: 0; }

/* 하단 디테일 1:N 선언 옵션 (detailGrid) — 프레임워크 표준 (hlca-screen.js _detailGridInit) */
.hlca-detail-grid { display: flex; flex-direction: column; height: 100%; }
.hlca-detail-grid > .panel-filter-bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; }
.hlca-detail-grid-title { font-size: var(--fs); color: var(--text); }
.hlca-detail-grid-wrap { flex: 1; min-height: 120px; }
.resizer-h { position: absolute; top: -2px; left: 0; right: 0; height: 3px; cursor: ns-resize; z-index: 100; background: transparent; transition: background 0.2s; }
.resizer-h:hover, .resizer-h.active { background: var(--accent); }

/* === 12. Right Panel (Pearl Glass) === */
.right-panel {
    width: var(--right-panel-w);
    background: var(--surface); backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-left: var(--glass-border);
    display: flex; flex-direction: column; position: relative; flex-shrink: 0;
    transition: margin-right 0.3s cubic-bezier(.25,1,.5,1);
}
.right-panel.collapsed { margin-right: calc(-1 * var(--right-panel-w)); }
.right-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 0 0.7rem; height: var(--tab-h); border-bottom: var(--glass-border); }
.right-panel-title { font-size: var(--fs); }
.right-panel-body { flex: 1; padding: 0.4rem 0.55rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.36rem; background: #dcdde5; }
body[data-theme="dark"] .right-panel-body { background: rgba(22,22,28,0.7); }
body[data-theme="dark"] .bottom-panel { background: rgba(22,22,28,0.7); }
/* ★ 라이트모드 시인성: 인풋 내부는 패널(#dcdde5)보다 확실히 밝게(0.85), 보더는 툴바 보더 계열(140,145,170)로 강조.
   다크모드는 아래 오버라이드로 기존 색 유지 (구조 동일, 색상만 모드별) */
.right-panel-body .form-control-sm {
    font-size: var(--fs); padding: 0.28rem 0.48rem; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.85); border: 1px solid rgba(140,145,170,0.6);
    color: var(--text); transition: border 0.2s, box-shadow 0.2s; width: 100%;
}
body[data-theme="dark"] .right-panel-body .form-control-sm { background-color: rgba(40,40,44,0.6); border-color: var(--border); }
/* ★ placeholder(=필드 라벨 역할): --text-secondary — 라이트모드 가독성 (--text-muted #aeaeb2는 너무 흐림).
   입력값(--text)과의 명도 차이는 유지 — 미입력/입력 구분 표준 그대로. */
.right-panel-body .form-control-sm::placeholder { color: var(--text-secondary); font-weight: 400; }
/* ★ 표준: 값이 있을 때만 밝게 표시 (비어있으면 placeholder는 회색 유지) */
.right-panel-body .form-control-sm:disabled:not(:placeholder-shown),
.right-panel-body .form-control-sm[readonly]:not(:placeholder-shown) { color: var(--text) !important; -webkit-text-fill-color: var(--text); opacity: 1; }
.right-panel-body .form-control-sm:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.12); outline: none; }
.right-panel-body .form-control-sm:focus::placeholder { color: var(--text-secondary); opacity: 1; }
/* ★ 파일 인풋: '선택된 파일 없음' 회색 텍스트 */
.right-panel-body input[type="file"].form-control-sm { color: var(--text-secondary); }
/* ★ 우측사이드바 날짜 인풋 (Flatpickr 글래스모피즘 — 메인컨텐츠와 동일) */
.right-panel-body input[data-date] { cursor: pointer; }
.right-panel-body input[data-date].flatpickr-input { padding-right: 0.15rem; }
/* ★ number input spinner 제거 */
.right-panel-body input[type="number"]::-webkit-inner-spin-button,
.right-panel-body input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.right-panel-body input[type="number"] { -moz-appearance: textfield; }
/* ★ 우측 패널 select — input과 동일 스타일 + 커스텀 화살표 */
.right-panel-body select.form-control-sm {
    cursor: pointer; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 8px;
    padding-right: 1.4rem; padding-left: 0.5rem; text-align: left;
}
.right-panel-body select.form-control-sm option { padding: 0.25rem 0.5rem; text-align: left; }
.right-panel-body select.form-control-sm.placeholder-active { color: var(--text-secondary); font-weight: 400; }
.right-panel-body select.form-control-sm:not(.placeholder-active) { color: var(--text); }
.form-label-sm { display: none; }
/* ★ 폼 구분 헤더 (formFields type:'section') — 그룹 라벨 (예: '근무 외').
   검색조건 드롭다운과 동일한 좌측 2px accent 라인 시각 언어. 라이트/다크 공통 (색상은 변수) */
.right-panel-body .form-section-label {
    margin: 0.4rem 0 0.05rem;
    padding: 0.1rem 0 0.18rem 0.42rem;
    font-size: var(--fs); font-weight: 400; color: var(--text);
    border-left: 2px solid var(--accent);
    border-bottom: 1px solid var(--border);
}
.right-panel-footer { height: var(--toggle-bar-h); display: flex; align-items: center; justify-content: center; border-top: var(--glass-border); flex-shrink: 0; cursor: pointer; transition: background 0.2s; }
.right-panel-footer:hover { background: var(--accent-light); }
.right-panel-close-btn { background: none; border: none; color: var(--text-muted); font-size: 0.75rem; padding: 0.08rem 0.4rem; border-radius: 3px; transition: var(--transition); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.right-panel-footer:hover .right-panel-close-btn { color: var(--accent); }
.right-panel-open-btn { position: absolute; right: 0; bottom: 0; width: 16px; height: var(--toggle-bar-h); background: var(--surface); backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-right: none; border-radius: 4px 0 0 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); font-size: 0.6rem; z-index: 20; transition: var(--transition); }
.right-panel-open-btn:hover { color: var(--accent); background: var(--accent-light); }
.content-wrapper:has(.right-panel:not(.collapsed)) .right-panel-open-btn { display: none; }

/* === 12-1. Right Panel Tabs (고객정보관리 등) === */
.cust-tab-header {
    display: flex; gap: 0; margin: -0.4rem -0.55rem 0 -0.55rem;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.cust-tab-btn {
    flex: 1; padding: 0.35rem 0.2rem; font-size: var(--fs); font-weight: 400;
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; transition: var(--transition); border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.cust-tab-btn:hover { color: var(--text); background: var(--accent-light); }
.cust-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
body[data-theme="dark"] .cust-tab-btn.active { color: var(--accent); }
/* right-panel-body가 탭 사용 시 남은 높이를 탭에 전달하도록 */
.right-panel-body:has(.cust-tab-header) { overflow: hidden; }
.cust-tab-pane { display: flex; flex-direction: column; gap: 0.36rem; }
.cust-tab-pane[data-tab-pane="basic"] { padding-top: 0.4rem; overflow-y: auto; flex: 1; min-height: 0; }

/* === 12-2. 우측사이드바 그리드 표준 (sidebar-grid-*) === */
/* 사용법: .sidebar-grid-pane > .sidebar-grid-toolbar.panel-filter-bar > .sidebar-grid-wrap */
/* 메인컨텐츠 툴바/그리드와 수평 정렬 자동 보장 */
.sidebar-grid-pane {
    flex: 1; display: flex; flex-direction: column;
    gap: 0; overflow: hidden; min-height: 0; margin-top: -3.1px;
}
.sidebar-grid-toolbar.panel-filter-bar {
    margin: 0 0 13.6px 0; min-height: 31.19px;
    padding: 0.2rem 0.4rem; flex-shrink: 0;
    border: 1px solid rgba(140,145,170,0.45); border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}
body[data-theme="dark"] .sidebar-grid-toolbar.panel-filter-bar { border: var(--glass-border); box-shadow: var(--shadow-sm); }
.sidebar-grid-wrap {
    flex: 1; min-height: 200px; overflow: hidden;
}
/* 인풋박스 형식 (별도 테이블, 1:1) — 첫 인풋이 메인 그리드 헤더 시작점과 수평 정렬 */
.sidebar-form-wrap {
    flex: 1; display: flex; flex-direction: column; gap: 0.36rem;
    overflow-y: auto; min-height: 0;
}
/* 인풋박스 형식 툴바: margin-bottom 미세 조정으로 첫 인풋과 그리드 헤더 정확한 수평 정렬 */
.sidebar-grid-pane:has(.sidebar-form-wrap) .sidebar-grid-toolbar.panel-filter-bar {
    margin-bottom: 13.35px;
}

/* === 13. Loading & Toast (Pearl Glass) === */
/* === Loading: Top Progress Bar === */
#global-loading-bar {
    position: fixed; top: 0; left: 0; width: 0; height: 2.5px;
    background: linear-gradient(90deg, var(--accent), #a78bfa, #6366f1, var(--accent));
    background-size: 300% 100%;
    z-index: 99999; pointer-events: none;
    opacity: 0; transition: opacity 0.15s;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(99,102,241,0.5), 0 0 2px rgba(99,102,241,0.3);
}
#global-loading-bar.active {
    opacity: 1;
    animation: loading-bar-grow 1.8s ease-in-out infinite, loading-bar-shimmer 1.5s linear infinite;
}
@keyframes loading-bar-grow {
    0% { width: 0; }
    15% { width: 30%; }
    50% { width: 65%; }
    80% { width: 85%; }
    100% { width: 92%; }
}
@keyframes loading-bar-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
#global-loading-bar.done {
    width: 100% !important; opacity: 0;
    animation: none;
    transition: width 0.2s ease-out, opacity 0.4s 0.2s;
}

/* === Loading: Floating Status Pill === */
#global-loading-pill {
    position: fixed; bottom: 24px; right: 24px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
    z-index: 99998;
    opacity: 0; visibility: hidden;
    transform: translateY(12px) scale(0.95);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#global-loading-pill.active {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
}
.pill-text {
    font-size: var(--fs);
    color: var(--text-secondary);
    white-space: nowrap;
}
.pill-dots {
    display: flex; gap: 3px; align-items: center;
}
.pill-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent);
    animation: pill-bounce 1.2s ease-in-out infinite;
}
.pill-dots span:nth-child(2) { animation-delay: 0.15s; }
.pill-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pill-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

body[data-theme="dark"] #global-loading-pill {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.06);
}
body[data-theme="dark"] #global-loading-bar {
    box-shadow: 0 0 10px rgba(99,102,241,0.6), 0 0 3px rgba(99,102,241,0.4);
}
@keyframes spin { to { transform: rotate(360deg); } }

#toast-container { position: fixed; top: calc(var(--header-h) + 0.3rem); right: 0.5rem; z-index: 100000; display: flex; flex-direction: column; gap: 0.25rem; pointer-events: none; }
.toast-item { min-width: 170px; padding: 0.4rem 0.65rem; border-radius: 6px; font-size: var(--fs); display: flex; align-items: center; gap: 0.35rem; box-shadow: var(--shadow-md); backdrop-filter: none; -webkit-backdrop-filter: none; transform: translateX(120%); opacity: 0; transition: transform 0.35s cubic-bezier(.25,1,.5,1), opacity 0.35s; pointer-events: auto; }
.toast-item.show { transform: translateX(0); opacity: 1; }
.toast-item.success { background: var(--toast-ok-bg); color: var(--toast-ok); border-left: 3px solid var(--toast-ok); }
.toast-item.error { background: var(--toast-err-bg); color: var(--toast-err); border-left: 3px solid var(--toast-err); }
.toast-item.warning { background: var(--toast-warn-bg); color: var(--toast-warn); border-left: 3px solid var(--toast-warn); }
.toast-item.info { background: var(--toast-info-bg); color: var(--toast-info); border-left: 3px solid var(--toast-info); }
.toast-countdown { font-size: var(--fs); opacity: 0.5; min-width: 12px; text-align: center; flex-shrink: 0; margin-left: auto; padding-left: 8px; }
.toast-close { background: none; border: none; color: inherit; cursor: pointer; opacity: 0.5; font-size: 0.8rem; padding: 0 0 0 4px; line-height: 1; flex-shrink: 0; }
.toast-close:hover { opacity: 1; }
.toast-detail { display: block; font-size: var(--fs); opacity: 0.85; margin-top: 4px; white-space: pre-line; max-width: 360px; line-height: 1.5; }

/* Error border glow — Siri-style rainbow gradient (Apple Intelligence) */
@property --glow-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

#error-glow-overlay {
    position: fixed; inset: 0; z-index: 99999; pointer-events: none;
    opacity: 0; transition: opacity 0.35s ease-out;
    --glow-angle: 0deg;
}
/* mask-composite 테두리 + 약간의 blur로 부드럽게 번짐 */
#error-glow-overlay::before {
    content: ''; position: absolute; inset: 0;
    background: conic-gradient(
        from var(--glow-angle),
        #BC82F3, #8D9FFF, #F5B9EA, #FF6778,
        #FFBA71, #C686FF, #AA6EEE, #BC82F3
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    padding: 3px;
    filter: blur(4px);
}
#error-glow-overlay.active {
    opacity: 1;
    animation: siri-glow-pulse 0.8s ease-in-out 2;
}
#error-glow-overlay.active::before {
    animation: siri-glow-rotate 1.5s linear infinite;
}
@keyframes siri-glow-rotate { to { --glow-angle: 360deg; } }
@keyframes siri-glow-pulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* === 변경이력 상세 (하단 패널) === */
.jnl-detail { font-size: var(--fs); padding: 0.3rem 0; }
.jnl-detail-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.jnl-badge { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: var(--fs); color: #fff; }
.jnl-create { background: #059669; }
.jnl-update { background: #6366f1; }
.jnl-delete { background: #ef4444; }
.jnl-bulk_save { background: #6366f1; }
.jnl-bulk_delete { background: #ef4444; }
.jnl-upload { background: #059669; }
.jnl-no { color: var(--text-secondary); font-family: var(--font-mono); }
.jnl-tbl { color: var(--accent); }
.jnl-id { color: var(--text-secondary); }
.jnl-user { color: var(--text-secondary); }
.jnl-date { color: var(--text-secondary); font-size: var(--fs); }
.jnl-diff-table { width: 100%; border-collapse: collapse; font-size: var(--fs); }
.jnl-diff-table th { background: var(--bg-hover); text-align: left; padding: 0.25rem 0.5rem; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.jnl-diff-table td { padding: 0.2rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.jnl-field { color: var(--text-secondary); width: 130px; white-space: nowrap; }
.jnl-old { color: #ef4444; background: rgba(239,68,68,0.06); }
.jnl-new { color: #059669; background: rgba(5,150,105,0.06); }
.jnl-arrow { width: 24px; text-align: center; color: var(--text-secondary); }
.jnl-raw { white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--fs); color: var(--text-secondary); background: var(--bg-hover); padding: 0.3rem 0.5rem; border-radius: 4px; max-height: 150px; overflow-y: auto; }

/* === 확인 다이얼로그 === */
.hlca-confirm-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity 0.2s; }
.hlca-confirm-overlay.show { opacity: 1; }
.hlca-confirm-overlay.no-blur { backdrop-filter: none; background: rgba(0,0,0,0.15); }
.hlca-confirm-box { background: var(--surface); border: var(--glass-border); border-radius: 10px; padding: 1.2rem 1.5rem; min-width: 280px; max-width: 400px; box-shadow: var(--shadow-lg); backdrop-filter: var(--glass-blur); transform: scale(0.95); transition: transform 0.2s; }
.hlca-confirm-overlay.show .hlca-confirm-box { transform: scale(1); }
.hlca-confirm-title { font-size: var(--fs); margin-bottom: 0.5rem; color: var(--text); }
.hlca-confirm-msg { font-size: var(--fs); color: var(--text-secondary); line-height: 1.5; margin-bottom: 1rem; }
.hlca-confirm-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
.hlca-confirm-cancel { padding: 0.3rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-secondary); font-size: var(--fs); cursor: pointer; transition: 0.15s; }
.hlca-confirm-cancel:hover { background: var(--bg-hover); }
.hlca-confirm-ok { padding: 0.3rem 0.8rem; border: none; border-radius: var(--radius-sm); color: #fff; font-size: var(--fs); cursor: pointer; transition: 0.15s; }
.hlca-confirm-ok:hover { opacity: 0.85; }

/* === 14. Login (Premium) === */
body:not(:has(.main-wrapper)) { height: auto; min-height: 100vh; overflow: auto; }

/* ── Subtle ambient animation ── */
@keyframes loginBgShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.login-header { position: fixed; top: 0; left: 0; width: 100%; height: 44px; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; background: rgba(255,255,255,0.7); backdrop-filter: blur(16px) saturate(1.8); border-bottom: 1px solid rgba(0,0,0,0.06); z-index: 100; }
body[data-theme="dark"] .login-header { background: rgba(20,20,24,0.75); border-bottom-color: rgba(255,255,255,0.06); }
.login-logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.05rem; position: relative; cursor: pointer; }
.login-logo i { font-size: 1.3rem; color: var(--accent); }
.login-title-img { height: 0.9rem; margin-left: -5px; }  /* 구 SYNTHIA용 scaleX(0.92) 압축 제거 — CPDP 워드마크는 원비율 */
body[data-theme="dark"] .login-title-img { filter: brightness(0) invert(1) brightness(0.78) sepia(0.05); }
.logo-tooltip {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 9999;
    min-width: 320px; padding: 0.8rem 1rem;
    background: rgba(30, 30, 40, 0.85); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    color: rgba(255, 255, 255, 0.88); font-size: 0.72rem; font-weight: 400; line-height: 1.6;
    flex-direction: column; gap: 0.2rem;
    animation: tooltipFadeIn 0.2s ease;
}
.logo-tooltip::before {
    content: ''; position: absolute; top: -6px; left: 16px;
    width: 12px; height: 12px; background: rgba(30, 30, 40, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.12); border-left: 1px solid rgba(255, 255, 255, 0.12);
    transform: rotate(45deg);
}
[data-theme="light"] .logo-tooltip { background: rgba(255,255,255,0.82); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.5) inset; color: #333; }
[data-theme="light"] .logo-tooltip::before { background: rgba(255,255,255,0.82); border-top-color: rgba(0,0,0,0.1); border-left-color: rgba(0,0,0,0.1); }
.login-logo:hover .logo-tooltip { display: flex; }
@keyframes tooltipFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.login-main {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding-top: 44px; position: relative; overflow: hidden;
    background: linear-gradient(145deg, #eceef4 0%, #f0e8f3 35%, #e6f0ef 65%, #eceef4 100%);
    background-size: 300% 300%;
    animation: loginBgShift 25s ease infinite;
}
body[data-theme="dark"] .login-main {
    background: linear-gradient(145deg, #111118 0%, #16161f 35%, #131319 65%, #111118 100%);
    background-size: 300% 300%;
}

/* ── Vignette overlay (subtle depth, no blobs) ── */
.login-main::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(0,0,0,0.04) 100%);
}
body[data-theme="dark"] .login-main::before {
    background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, rgba(0,0,0,0.3) 100%);
}
/* ── Fine noise grain texture ── */
.login-main::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}
body[data-theme="dark"] .login-main::after { opacity: 0.15; }
.login-main > * { position: relative; z-index: 1; }

/* ── Card wrapper ── */
.login-wrapper {
    display: flex; width: 100%; max-width: 800px; min-height: 470px;
    border-radius: 16px; overflow: hidden; margin: 1rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 12px 48px rgba(99,102,241,0.06);
    border: 1px solid rgba(255,255,255,0.25);
    transition: box-shadow 0.4s ease;
}
body[data-theme="dark"] .login-wrapper {
    box-shadow: 0 4px 32px rgba(0,0,0,0.6), 0 0 1px rgba(99,102,241,0.2);
    border-color: rgba(255,255,255,0.08);
}

/* ── Left brand panel ── */
.login-brand {
    flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 1.4rem 1.2rem 1rem 3.6rem; position: relative; overflow: hidden;
    background: linear-gradient(160deg, #1a1a2a 0%, #22223a 50%, #1a1a2e 100%);
}
body[data-theme="dark"] .login-brand {
    background: linear-gradient(160deg, #0a0a12 0%, #101020 50%, #0a0a14 100%);
}
/* Subtle edge glow line (top-right) */
.login-brand::before {
    content: ''; position: absolute; pointer-events: none;
    top: 0; right: 0; width: 60%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.25) 50%, transparent);
}
/* Subtle edge glow line (bottom-left) */
.login-brand::after {
    content: ''; position: absolute; pointer-events: none;
    bottom: 0; left: 0; width: 40%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.15) 50%, transparent);
}
.login-brand-inner { position: relative; z-index: 1; color: #fff; max-width: 320px; margin-top: 1.2rem; }
/* 로고 가로 위치는 언어와 무관하게 고정. .login-brand-inner 는 shrink-to-fit 이라 아래 기능 문구
   길이(=언어)에 따라 폭이 변하는데, margin-left 를 % 로 잡으면 그 폭이 기준이 되어 로고가 언어마다
   우측으로 밀렸다(ko 기준 zh +10.8px / ja +19.5px / en +39.3px). width:max-content(로고 자체 폭)
   + 고정 margin 으로 inner 폭 의존을 끊는다. 74px = 한국어 렌더와 동일한 중심(inner 좌단 +149.0px
   — 로고 폭은 타이틀의 레이아웃 폭 150.06px 기준. scaleX(0.92) 는 레이아웃에 영향 없음). */
.login-logo-img { margin-bottom: calc(1.8rem + 3mm); display: flex; flex-direction: column; align-items: center; width: max-content; margin-left: 74px; gap: 0.6rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15)); }
.login-brand-emblem { width: 80px; height: 80px; }
.login-brand-title { height: 1.4rem; filter: brightness(0) invert(1) brightness(0.78) sepia(0.05); }
[data-theme="light"] .login-brand-title { filter: none; }
.login-brand-icon { margin-bottom: 0.6rem; }
.login-brand-icon i { font-size: 2.2rem; color: var(--accent); filter: drop-shadow(0 0 8px rgba(99,102,241,0.4)); }
.login-brand-inner h1 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 0.3rem; letter-spacing: -0.02em; }
.login-brand-inner h1 span { font-size: 0.78rem; font-weight: 400; opacity: 0.6; letter-spacing: 0.02em; line-height: 1.3; display: inline-block; margin-top: 0.4rem; }
.login-brand-inner p { font-size: 0.75rem; color: rgba(229,229,234,0.8); line-height: 1.5; margin-bottom: 1rem; }
/* 오프셋은 transform (margin 아님) — margin은 shrink-to-fit인 .login-brand-inner 폭에 가산되어
   패널 안 다른 요소의 기준선을 밀어낸다. */
.login-features { display: flex; flex-direction: column; gap: 0.4rem; margin-top: -5px; transform: translate(10mm, 5mm); }
.login-feature {
    display: flex; align-items: center; gap: 0.45rem; color: rgba(229,229,234,0.85);
    font-size: 0.85rem; transition: all 0.25s ease; padding: 0.15rem 0; border-radius: 4px;
}
.login-feature:hover { color: #fff; transform: translateX(4px); }
.login-feature i { font-size: 0.85rem; color: var(--accent); transition: all 0.25s ease; }
.login-feature:hover i { filter: drop-shadow(0 0 4px rgba(99,102,241,0.5)); }

/* ── Right form panel ── */
.login-form-area {
    flex: 0 0 380px; display: flex; align-items: center; justify-content: center;
    padding: 2.4rem; transition: background 0.3s;
    background: rgba(255,255,255,0.85); backdrop-filter: blur(20px) saturate(1.6);
}
body[data-theme="dark"] .login-form-area {
    background: rgba(32,32,40,0.88); backdrop-filter: blur(20px) saturate(1.4);
}
.login-form-box { width: 100%; max-width: 290px; }
.login-form-box h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.login-subtitle { color: var(--text-secondary); font-size: 0.78rem; margin-bottom: 1.2rem; }
.login-field { margin-bottom: 0.9rem; }
.login-field label { display: block; margin-bottom: 0.2rem; font-weight: 500; font-size: 0.76rem; }
.login-field .form-control {
    padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.82rem;
    border: 1.5px solid var(--border); width: 100%;
    background: rgba(255,255,255,0.7); color: var(--text);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
body[data-theme="dark"] .login-field .form-control { background: rgba(40,40,48,0.5); }
.login-field .form-control:focus {
    border-color: var(--accent); outline: none;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15), 0 2px 8px rgba(99,102,241,0.1);
    background: rgba(255,255,255,0.95);
}
body[data-theme="dark"] .login-field .form-control:focus { background: rgba(40,40,48,0.8); }
.password-wrapper { position: relative; }
.pwd-toggle { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; transition: color 0.2s; }
.pwd-toggle:hover { color: var(--accent); }
.login-field-check { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; font-size: 0.76rem; }

/* ── Login button (gradient + glow) ── */
.btn-login {
    width: 100%; padding: 0.6rem; margin-top: 0.7rem;
    background: linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%);
    color: #fff; border: none; border-radius: 8px;
    font-size: 0.88rem; font-weight: 600; cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}
.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(99,102,241,0.35), 0 2px 8px rgba(124,58,237,0.2);
    background: linear-gradient(135deg, #5b5bf0 0%, #8b5cf6 100%);
}
.btn-login:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(99,102,241,0.2); }

.login-alert { padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.78rem; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.4rem; backdrop-filter: blur(8px); }
.login-alert.error { background: var(--toast-err-bg); color: var(--toast-err); }
.login-alert.info { background: var(--toast-info-bg); color: var(--toast-info); }
.login-footer-text { margin-top: 1.2rem; text-align: center; }
.login-footer-text small { color: var(--text-muted); font-size: 0.68rem; opacity: 0.7; }

/* ── 저작권 경고 ── */
.login-copyright-notice {
    position: absolute; bottom: 12px; left: 1.2rem; right: 1.2rem;
    font-size: 0.6rem; line-height: 1.5; color: rgba(255,255,255,0.45);
    text-align: left; z-index: 2;
}

/* 언어 선택 드롭다운 */
.lang-selector {
    appearance: none; -webkit-appearance: none;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 0.25rem 1.6rem 0.25rem 0.5rem;
    font-size: var(--fs);
    cursor: pointer; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    transition: border-color 0.2s;
}
.lang-selector:hover { border-color: var(--accent); }
.lang-selector:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }

/* 테넌트 보기(임퍼소네이션) — 슈퍼관리자 헤더 드롭다운. 열린 목록은 HlcaCustomSelect.enhance로 글래스 적용 */
.tenant-impersonate-select {
    appearance: none; -webkit-appearance: none;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 0.25rem 1.6rem 0.25rem 0.5rem;
    font-size: var(--fs); max-width: 200px;
    cursor: pointer; outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.5rem center;
    transition: border-color 0.2s;
}
.tenant-impersonate-select:hover { border-color: var(--accent); }
.tenant-impersonate-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
/* 테넌트 드롭다운을 좌측으로 약간 이동 + 사용자 표기와 구분 */
.header-divider--tenant { margin-left: 0.35rem; }

.login-lang-row { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }

/* === 15. Dashboard (Pearl Glass Cards) === */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 0.5rem; margin-bottom: 0.65rem; }
.dash-card { background: var(--surface); backdrop-filter: var(--glass-blur); border-radius: var(--radius); border: var(--glass-border); transition: transform 0.2s, box-shadow 0.3s; overflow: hidden; }
.dash-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(100,120,200,0.12), 0 0 0 1px rgba(180,200,255,0.3) inset; }
.dash-card-body { padding: 0.65rem; display: flex; justify-content: space-between; align-items: center; }
.dash-card-label { font-size: var(--fs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 0.15rem; }
.dash-card-value { font-size: 1.15rem; margin: 0 0 0.06rem; }
.dash-card-icon { width: 34px; height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.c-primary .dash-card-icon { background: var(--accent-light); color: var(--accent); }
.c-success .dash-card-icon { background: rgba(5,150,105,0.07); color: #059669; }
.c-warning .dash-card-icon { background: rgba(234,179,8,0.07); color: #d97706; }
.c-info .dash-card-icon { background: rgba(99,102,241,0.07); color: #6366f1; }
.dash-grid { display: grid; grid-template-columns: 1fr 230px; gap: 0.5rem; }
.dash-panel { background: var(--surface); backdrop-filter: var(--glass-blur); border-radius: var(--radius); border: var(--glass-border); overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06); }
.dash-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.7rem; border-bottom: var(--glass-border); font-size: var(--fs); }
.dash-panel-body { padding: 0.5rem 0.7rem; }
.dash-table { width: 100%; border-collapse: collapse; font-size: var(--fs); }
.dash-table th { padding: 0.3rem 0.5rem; text-align: left; color: var(--text-muted); font-size: var(--fs); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
.dash-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid rgba(0,0,0,0.02); vertical-align: middle; }
.dash-table tr:hover { background: rgba(110,110,115,0.03); }
.act-row { display: flex; align-items: center; gap: 0.35rem; }
.act-icon { width: 22px; height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; flex-shrink: 0; }
.act-icon.c-primary { background: var(--accent-light); color: var(--accent); }
.act-icon.c-success { background: rgba(5,150,105,0.07); color: #059669; }
.act-icon.c-warning { background: rgba(234,179,8,0.07); color: #d97706; }
.act-icon.c-info { background: rgba(99,102,241,0.07); color: #6366f1; }
.badge-s { font-size: 0.5rem; padding: 0.04rem 0.25rem; border-radius: 2px; }
.badge-s.success { background: rgba(5,150,105,0.07); color: #059669; }
.badge-s.warning { background: rgba(234,179,8,0.07); color: #d97706; }
.badge-s.info { background: rgba(99,102,241,0.07); color: #6366f1; }
.profile-mini { text-align: center; }
.profile-mini-avatar { font-size: 1.6rem; color: var(--accent); }
.profile-mini h6 { margin: 0.2rem 0 0.1rem; font-size: var(--fs); }
.profile-detail { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: var(--fs); }
.profile-detail:last-child { border-bottom: none; }
.profile-detail span:first-child { color: #555; }
.profile-detail span:last-child { color: var(--text); }
.profile-page-grid { display: grid; grid-template-columns: 150px 250px 1fr; gap: 0.5rem; }

/* === Password Change Form === */
.pw-change-form .form-control-sm { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 0.35rem 0.5rem; }
.pw-change-form .form-control-sm:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(99,102,241,0.1); }

/* === 대시보드 다크모드 보강 === */
body[data-theme="dark"] .dash-card-label { color: var(--text-muted); }
body[data-theme="dark"] .dash-table th { color: var(--text-muted); border-bottom-color: var(--border); }
body[data-theme="dark"] .dash-table td { border-bottom-color: rgba(255,255,255,0.03); color: var(--text); }
body[data-theme="dark"] .dash-table td.text-muted { color: #a1a1aa !important; }
body[data-theme="dark"] .dash-table small.text-muted { color: #a1a1aa !important; }
body[data-theme="dark"] .text-muted { color: #a1a1aa !important; }
body[data-theme="dark"] .dash-table tr:hover { background: rgba(255,255,255,0.03); }
body[data-theme="dark"] .profile-detail { border-bottom-color: rgba(255,255,255,0.06); }
body[data-theme="dark"] .profile-detail span:first-child { color: #a1a1aa; }
body[data-theme="dark"] .profile-detail span:last-child { color: #e4e4e7; }
body[data-theme="dark"] .dash-panel-header { color: var(--text); }
body[data-theme="dark"] .dash-panel { box-shadow: 0 3px 14px rgba(0,0,0,0.45), 0 1px 6px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04); }

/* === 15-B. New Dashboard Layout (캘린더 + 공지 + TODO) === */
.dash-new-layout { display: flex; gap: 1rem; height: calc(100% - 0.54rem); padding: 0.54rem 0.6rem 0; }
.dash-calendar-section { flex: 1; min-width: 0; }
.dash-right-section { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }

/* 캘린더 네비 */
.cal-nav-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.08rem 0.25rem; cursor: pointer; color: var(--text); font-size: var(--fs); transition: background 0.15s; line-height: 1; }
.cal-nav-btn:hover { background: var(--hover); }

/* 요일 헤더 */
.cal-dow-header { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; align-items: center; font-size: var(--fs); color: var(--text-muted); padding: 0.15rem 0; border-bottom: 1px solid var(--border); margin-bottom: 0.15rem; line-height: 1; }
.cal-dow.sun { color: #ef4444; }
.cal-dow.sat { color: #3b82f6; }

/* 날짜 그리드 — 인라인 일정 표시 */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; flex: 1; overflow-y: auto; min-height: 0; }
.cal-cell { padding: 0.15rem 0.2rem; min-height: 4.5rem; max-height: 5.2rem; border-radius: var(--radius-sm); font-size: var(--fs); transition: background 0.12s; position: relative; border: 1px solid transparent; overflow: hidden; display: flex; flex-direction: column; }
.cal-cell:hover { background: var(--hover); }
.cal-cell:hover .cal-cell-add { opacity: 1; }
.cal-cell.today { background: var(--accent-light); }
.cal-cell.today .cal-day-num { color: var(--accent); }
.cal-cell.sun .cal-day-num { color: #ef4444; }
.cal-cell.sat .cal-day-num { color: #3b82f6; }
.cal-cell.empty { cursor: default; min-height: 2rem; }

/* 셀 헤더: 날짜번호 + 추가버튼 */
.cal-cell-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1px; }
.cal-day-num { font-size: var(--fs); line-height: 1.2; }
.cal-day-count { font-size: 0.5rem; color: var(--text-muted); }
.cal-holiday-name { font-size: 0.65rem; color: #e67e22; margin-left: 1px; }
.cal-cell-add { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.6rem; padding: 0; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; border-radius: 50%; }
.cal-cell-add:hover { background: var(--accent); color: #fff; opacity: 1; }

/* 셀 내부 일정 목록 */
.cal-cell-schedules { display: flex; flex-direction: column; gap: 1px; flex: 1; overflow-y: auto; min-height: 0; }
.cal-cell-item { display: flex; align-items: center; gap: 3px; padding: 1px 2px; border-radius: 3px; background: rgba(99,102,241,0.08); font-size: 0.7rem; line-height: 1.3; cursor: default; }
.cal-cell-item:hover { background: rgba(99,102,241,0.15); }
.cal-cell-item:hover .cal-cell-del { opacity: 1; }
.cal-cell-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
.cal-cell-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cal-cell-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.55rem; padding: 0; width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.cal-cell-del:hover { color: #ef4444; }

/* 셀 내부 인라인 입력 */
.cal-cell-input-wrap { margin-top: 2px; }
.cal-cell-input { width: 100%; border: 1px solid var(--accent); border-radius: 3px; padding: 1px 3px; font-size: var(--fs); background: var(--surface); color: var(--text); outline: none; box-sizing: border-box; }

/* 하단 상세 패널 (읽기 전용) */
.cal-day-detail { border-top: 1px solid var(--border); padding: 0.3rem 0.4rem; flex-shrink: 0; height: 6.2rem; overflow-y: auto; }
.cal-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; font-size: var(--fs); color: var(--text); }
.cal-detail-list { }
.cal-detail-count { font-size: 0.6rem; font-weight: 400; color: var(--text-muted); }
.cal-detail-item { display: flex; align-items: center; gap: 5px; padding: 0.08rem 0; font-size: var(--fs); line-height: 1.15; }
.cal-detail-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.cal-detail-text { flex: 1; color: var(--text); word-break: break-word; }

/* 공지사항 */
.announce-table { width: 100%; border-collapse: collapse; font-size: var(--fs); table-layout: fixed; }
.announce-table th { font-size: var(--fs); color: var(--text-muted); border-bottom: 1px solid var(--border); padding: 0.15rem 0.2rem; text-align: center; white-space: nowrap; vertical-align: top; line-height: 1; }
.announce-table td { padding: 0.2rem 0.2rem; border-bottom: 1px solid rgba(0,0,0,0.03); color: var(--text); vertical-align: top; }
.announce-table td.ann-title { white-space: normal; word-break: break-word; }
.announce-table td.ann-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announce-table tr:last-child td { border-bottom: none; }

/* TODO */
.todo-item { display: flex; align-items: center; gap: 6px; padding: 0.3rem 0; border-bottom: 1px solid rgba(0,0,0,0.03); font-size: var(--fs); }
.todo-item:last-child { border-bottom: none; }
.todo-item.done .todo-text { text-decoration: line-through; color: var(--text-muted); }
.todo-check { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
.todo-text { flex: 1; }
.todo-due { font-size: 0.58rem; color: var(--text-muted); }
.todo-del-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.65rem; padding: 0; opacity: 0.3; transition: opacity 0.15s; }
.todo-del-btn:hover { opacity: 1; color: #ef4444; }
.todo-input-bar { display: flex; gap: 4px; padding: 0.35rem 0.6rem; border-top: 1px solid var(--border); }
.todo-input-bar input { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.25rem 0.5rem; font-size: var(--fs); background: var(--surface); color: var(--text); outline: none; }
.todo-input-bar input:focus { border-color: var(--accent); }
.todo-input-bar button { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); width: 28px; height: 28px; font-size: var(--fs); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.todo-input-bar button:hover { opacity: 0.85; }

/* 다크모드 보강 */
body[data-theme="dark"] .cal-cell:hover { background: rgba(255,255,255,0.05); }
body[data-theme="dark"] .cal-cell.today { background: rgba(99,102,241,0.15); }
body[data-theme="dark"] .cal-cell-item { background: rgba(99,102,241,0.15); }
body[data-theme="dark"] .cal-cell-item:hover { background: rgba(99,102,241,0.25); }
body[data-theme="dark"] .cal-cell-input { background: rgba(255,255,255,0.05); border-color: var(--accent); }
body[data-theme="dark"] .announce-table td { border-bottom-color: rgba(255,255,255,0.04); }
body[data-theme="dark"] .announce-table th { border-bottom-color: rgba(255,255,255,0.08); }
body[data-theme="dark"] .todo-item { border-bottom-color: rgba(255,255,255,0.04); }
body[data-theme="dark"] .todo-input-bar input { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }

@media (max-width: 768px) { .dash-new-layout { flex-direction: column; } }

/* === 16. Scrollbar === */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,100,110,0.45); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,100,110,0.65); }
body[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(180,180,195,0.4); }
body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(180,180,195,0.6); }

/* === 17. Responsive === */
@media (max-width: 768px) { .dash-grid { grid-template-columns: 1fr; } .gnb-nav { display: none; } .login-wrapper { flex-direction: column; } .login-brand { display: none; } .login-form-area { flex: 1; } }
@media (max-width: 480px) { .profile-page-grid { grid-template-columns: 1fr; } }

/* === 18. Excel Dropdown === */
.excel-dropdown-wrap { display: inline-block; position: relative; }
.excel-dropdown {
    position: absolute; top: 100%; right: 0; z-index: 200;
    background: var(--surface); border: var(--glass-border);
    border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    min-width: 120px; padding: 4px 0; margin-top: 2px;
    backdrop-filter: var(--glass-blur);
}
.excel-dropdown-item {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; font-size: var(--fs); cursor: pointer;
    color: var(--text); transition: background 0.15s;
}
.excel-dropdown-item:hover { background: var(--accent-light); color: var(--accent); }
.excel-dropdown-item.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.excel-dropdown-item i { font-size: 0.55rem; }
body[data-theme="dark"] .excel-dropdown { background: rgba(40,40,48,0.95); }
body[data-theme="dark"] .excel-dropdown-item:hover { background: rgba(99,102,241,0.15); }

/* === 19. Journal Modal === */
.jnl-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.05);
    backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
}
.jnl-modal {
    background: var(--surface-solid); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 8px 40px rgba(0,0,0,0.25), 0 0 1px 0 rgba(255,255,255,0.6), inset 0 0 0 0.5px rgba(255,255,255,0.3);
    width: 90%; max-width: 900px; min-width: 400px; min-height: 250px;
    display: flex; flex-direction: column; overflow: hidden;
    position: relative;
}
.jnl-resize-handle {
    position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; z-index: 10;
    background: linear-gradient(135deg, transparent 50%, var(--text-muted) 50%, var(--text-muted) 55%, transparent 55%,
                transparent 65%, var(--text-muted) 65%, var(--text-muted) 70%, transparent 70%);
    opacity: 0.5; border-radius: 0 0 10px 0;
}
.jnl-resize-handle:hover { opacity: 1; }
.jnl-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    height: 24px; padding: 0 16px; border-bottom: var(--glass-border); cursor: move; user-select: none;
    background: rgba(20,30,80,0.92); border-radius: 10px 10px 0 0;
}
.jnl-modal-title { font-size: var(--fs); display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.95); }
.jnl-modal-close { background: none; border: none; font-size: 1rem; cursor: pointer; color: rgba(255,255,255,0.6); padding: 0 4px; line-height: 1; }
.jnl-modal-close:hover { color: rgba(255,255,255,0.95); }
.jnl-modal-body { flex: 1; overflow-y: auto; padding: 0.5rem; }
.jnl-modal-footer {
    display: flex; justify-content: space-between; align-items: center;
    height: 24px; padding: 0 16px; border-top: var(--glass-border);
    background: rgba(230,232,245,0.7); border-radius: 0 0 10px 10px;
}
.jnl-modal-footer .btn-tool {
    height: 20px; line-height: 20px; padding: 0 10px; font-size: var(--fs);
}
.jnl-count { font-size: var(--fs); color: var(--text-muted); }

/* 전표 테이블 */
.jnl-table { width: 100%; border-collapse: collapse; font-size: var(--fs); table-layout: fixed; }
.jnl-table th {
    height: 24px; padding: 0 8px; background: rgba(99,102,241,0.08);
    text-align: center; border-bottom: 1px solid rgba(0,0,0,0.18); border-right: 1px solid rgba(0,0,0,0.18); color: var(--text-secondary);
    font-size: var(--fs); font-weight: 400; text-transform: uppercase; letter-spacing: 0.3px;
    position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 24px; box-sizing: border-box;
}
.jnl-col-resize {
    position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
    cursor: col-resize; z-index: 2; user-select: none;
}
.jnl-col-resize:hover, .jnl-col-resize.active { background: rgba(99,102,241,0.3); }
.jnl-table td { padding: 5px 8px; border-bottom: 1px solid rgba(0,0,0,0.18); border-right: 1px solid rgba(0,0,0,0.22); vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jnl-table td.jnl-changes { white-space: normal; }
.jnl-table tr:hover { background: rgba(99,102,241,0.03); }
.jnl-no { font-family: monospace; font-size: var(--fs); color: var(--text-muted); white-space: nowrap; }
.jnl-center { text-align: center; }
.jnl-changes { font-size: var(--fs); line-height: 1.5; max-width: 300px; }

/* 전표 뱃지 */
.jnl-badge { font-size: var(--fs); padding: 1px 6px; border-radius: 3px; }
.jnl-create { background: rgba(5,150,105,0.08); color: #059669; }
.jnl-update { background: rgba(99,102,241,0.08); color: #6366f1; }
.jnl-delete { background: rgba(239,68,68,0.08); color: #ef4444; }

/* 변경내용 스타일 */
.jnl-field { color: var(--text-secondary); }
.jnl-old { text-decoration: line-through; color: #ef4444; opacity: 0.7; }
.jnl-new { color: #059669; }
.jnl-muted { color: var(--text-muted); }

/* 이력 모달 검색바 */
.jnl-search-bar {
    display: flex; align-items: center; gap: 0.3rem;
    padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border);
    background: rgba(0,0,0,0.02);
}
.jnl-search-bar input[type="text"] {
    padding: 0.18rem 0.35rem; font-size: var(--fs); border: 1px solid var(--border);
    border-radius: 4px; background: #fff; color: var(--text); outline: none;
    width: 100px; text-align: center; font-family: inherit; cursor: pointer;
    transition: border 0.2s, box-shadow 0.2s;
}
.jnl-search-bar input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.12); }
.jnl-search-bar .jnl-sep { color: var(--text-muted); font-size: var(--fs); }
.jnl-search-btn {
    display: flex; align-items: center; gap: 0.2rem;
    padding: 0.18rem 0.55rem; font-size: var(--fs);
    border: none; border-radius: 4px;
    background: var(--accent); color: #fff; cursor: pointer;
    transition: background 0.2s;
}
.jnl-search-btn:hover { background: var(--accent-hover); }
.jnl-search-btn i { font-size: 0.6rem; }

body[data-theme="dark"] .jnl-search-bar { background: rgba(255,255,255,0.03); }
body[data-theme="dark"] .jnl-search-bar input[type="text"] { background: rgba(40,40,44,0.6); }

body[data-theme="dark"] .jnl-modal-overlay { background: rgba(0,0,0,0.05); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
body[data-theme="dark"] .jnl-modal {
    background: #1c1c24;
    border: 1px solid rgba(180,190,255,0.35);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 28px 4px rgba(130,150,255,0.35), 0 0 3px 0 rgba(255,255,255,0.5), inset 0 0 0 0.5px rgba(255,255,255,0.18);
}
body[data-theme="dark"] .jnl-modal-header { background: rgba(65,65,78,0.92); }
body[data-theme="dark"] .jnl-modal-footer { background: rgba(174,174,184,0.7); }
body[data-theme="dark"] .jnl-table th { background: rgba(95,95,108,0.6); border-bottom-color: rgba(255,255,255,0.18); border-right-color: rgba(255,255,255,0.18); }
body[data-theme="dark"] .jnl-table td { border-bottom-color: rgba(255,255,255,0.18); border-right-color: rgba(255,255,255,0.18); }

/* === 20. Excel Upload Modal === */
.upl-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.05);
    backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
}
.upl-modal {
    background: var(--surface); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2), 0 0 1px 0 rgba(255,255,255,0.6), inset 0 0 0 0.5px rgba(255,255,255,0.3);
    width: 90%; max-width: 780px; max-height: 85vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.upl-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    height: 24px; padding: 0 16px; border-bottom: var(--glass-border);
    background: rgba(20,30,80,0.92); border-radius: 10px 10px 0 0;
    cursor: move; user-select: none;
}
.upl-modal-title { font-size: var(--fs); display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.95); }
.upl-modal-close { background: none; border: none; font-size: 1rem; cursor: pointer; color: rgba(255,255,255,0.6); padding: 0 4px; }
.upl-modal-close:hover { color: rgba(255,255,255,0.95); }
.upl-modal-body { flex: 1; overflow-y: auto; padding: 1rem; }
.upl-modal-footer {
    display: flex; justify-content: space-between; align-items: center;
    height: 24px; padding: 0 16px; border-top: var(--glass-border); gap: 8px;
    background: rgba(230,232,245,0.7); border-radius: 0 0 10px 10px;
}
.upl-modal-footer .btn-tool, .upl-modal-footer .btn-accent {
    height: 20px; line-height: 20px; padding: 0 10px; font-size: var(--fs);
}
.upl-footer-left { font-size: var(--fs); color: var(--text-secondary); }
.upl-footer-right { display: flex; gap: 6px; align-items: center; }

/* 드롭존 */
.upl-drop-zone {
    border: 2px dashed var(--border); border-radius: 10px;
    padding: 2rem; text-align: center; cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.upl-drop-zone:hover, .upl-drop-zone.drag-over {
    border-color: var(--accent); background: var(--accent-light);
}
.upl-drop-zone p { font-size: var(--fs); color: var(--text-secondary); margin: 0; }
.upl-hint { font-size: var(--fs); color: var(--text-muted); }

/* 파일 정보 */
.upl-file-info {
    display: flex; align-items: center; gap: 8px;
    padding: 0.5rem 0.8rem; border-radius: 6px;
    background: rgba(5,150,105,0.06); border: 1px solid rgba(5,150,105,0.15);
    font-size: var(--fs);
}
.upl-file-remove { background: none; border: none; font-size: 0.9rem; cursor: pointer; color: var(--text-muted); margin-left: auto; }
.upl-file-remove:hover { color: #ef4444; }

/* 옵션 행 */
.upl-option-row { display: flex; align-items: center; gap: 8px; margin-top: 0.8rem; }
.upl-template-row {
    display: flex; align-items: center; gap: 10px; margin-top: 0.7rem;
    padding: 0.5rem 0.7rem; border-radius: 6px;
    background: rgba(99,102,241,0.04); border: 1px dashed rgba(99,102,241,0.2);
}
.upl-template-row .btn-tool { font-size: var(--fs); white-space: nowrap; }
.upl-template-row .upl-hint { margin: 0; }
.upl-label { font-size: var(--fs); white-space: nowrap; }
.upl-select {
    font-size: var(--fs); padding: 4px 8px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text);
}

/* 검증 요약 바 */
.upl-summary-bar {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    padding: 0.5rem 0.7rem; border-radius: 6px;
    background: rgba(99,102,241,0.04); border: 1px solid rgba(99,102,241,0.1);
    margin-bottom: 0.6rem;
}
.upl-stat { display: flex; flex-direction: column; align-items: center; min-width: 50px; }
.upl-stat-num { font-size: var(--fs); }
.upl-stat-label { font-size: var(--fs); color: var(--text-muted); }
.upl-stat-ok .upl-stat-num { color: #059669; }
.upl-stat-dup .upl-stat-num { color: #d97706; }
.upl-stat-err .upl-stat-num { color: #ef4444; }
.upl-stat-key { flex: 1; text-align: right; }
.upl-stat-key .upl-stat-label { font-size: var(--fs); color: var(--accent); }

/* 미리보기 테이블 */
.upl-preview-wrap { max-height: 300px; overflow: auto; border-radius: 6px; border: 1px solid var(--border); }
.upl-preview-table { width: 100%; border-collapse: collapse; font-size: var(--fs); }
.upl-preview-table th {
    padding: 4px 8px; background: rgba(99,102,241,0.08);
    text-align: left; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1;
    font-size: var(--fs); color: var(--text-secondary);
}
.upl-preview-table td { padding: 3px 8px; border-bottom: 1px solid rgba(0,0,0,0.04); }
.upl-status-th { width: 80px; text-align: center; }
.upl-status-cell { text-align: center; font-size: var(--fs); }

/* 행 상태 색상 */
.upl-row-new td:first-child { color: #059669; }
.upl-row-dup { background: rgba(217,119,6,0.04); }
.upl-row-dup td:first-child { color: #d97706; }
.upl-row-update { background: rgba(99,102,241,0.04); }
.upl-row-update td:first-child { color: #6366f1; }
.upl-row-err { background: rgba(239,68,68,0.04); }
.upl-row-err td:first-child { color: #ef4444; }
.upl-err-msg { font-weight: 400; font-size: var(--fs); color: #ef4444; display: block; margin-top: 1px; }

/* 결과 화면 */
.upl-result-box { text-align: center; padding: 1.5rem 1rem; }
.upl-result-icon { margin-bottom: 0.5rem; }
.upl-result-title { font-size: var(--fs); margin-bottom: 1rem; }
.upl-result-stats { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; }
.upl-result-stat { display: flex; flex-direction: column; align-items: center; }
.upl-result-stat .upl-stat-num { font-size: var(--fs); }
.upl-result-stat .upl-stat-label { font-size: var(--fs); color: var(--text-muted); }

/* 오류 목록 */
.upl-err-list {
    text-align: left; margin-top: 0.8rem; padding: 0.6rem;
    border-radius: 6px; background: rgba(239,68,68,0.04); border: 1px solid rgba(239,68,68,0.1);
}
.upl-err-title { font-size: var(--fs); color: #ef4444; margin-bottom: 0.4rem; }
.upl-err-item { font-size: var(--fs); padding: 2px 0; color: var(--text-secondary); border-bottom: 1px solid rgba(0,0,0,0.03); }

body[data-theme="dark"] .upl-modal-overlay { background: rgba(0,0,0,0.05); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
body[data-theme="dark"] .upl-modal {
    background: rgba(28,28,36,0.98);
    border: 1px solid rgba(180,190,255,0.35);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 28px 4px rgba(130,150,255,0.35), 0 0 3px 0 rgba(255,255,255,0.5), inset 0 0 0 0.5px rgba(255,255,255,0.18);
}
body[data-theme="dark"] .upl-modal-header { background: rgba(65,65,78,0.92); }
body[data-theme="dark"] .upl-modal-footer { background: rgba(174,174,184,0.7); }
body[data-theme="dark"] .upl-drop-zone { border-color: rgba(255,255,255,0.1); }
body[data-theme="dark"] .upl-drop-zone:hover { background: rgba(99,102,241,0.08); }
body[data-theme="dark"] .upl-preview-table th { background: rgba(99,102,241,0.12); }

/* === 21. 즐겨찾기 === */
.sidebar-fav-group { margin-bottom: 0; }
.fav-toggle { position: relative; }
.fav-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; padding: 0.05rem 0.3rem; font-size: 0.52rem;
    border-radius: var(--radius-sm); border: 1px solid var(--accent);
    background: var(--accent); color: #fff;
    margin-left: auto; margin-right: 4px;
    transition: var(--transition);
}
.fav-count:empty, .fav-count[data-count="0"] { display: none; }
.fav-submenu { padding-left: 0 !important; list-style: none; }
.fav-submenu .sidebar-link::before { display: none !important; }
.fav-link { padding-left: 1.2rem !important; }
.fav-drag-handle { color: var(--text-muted); font-size: 0.7rem; margin-right: 4px; flex-shrink: 0; cursor: grab; opacity: 0.4; transition: opacity 0.2s; }
.fav-link:hover .fav-drag-handle { opacity: 1; }
.fav-draggable { transition: transform 0.15s; }
.fav-dragging { opacity: 0.4; }
.fav-drag-over { border-top: 2px solid var(--accent); }
.fav-empty { padding: 0.4rem 1.2rem; }
.fav-empty-text { font-size: var(--fs); color: var(--text-muted); font-style: italic; }
.sidebar-divider {
    height: 1px; margin: 0.3rem 0.8rem;
    background: var(--border); opacity: 0.5; list-style: none;
}
.sidebar-collapsed .fav-count { display: none; }
.sidebar-collapsed .fav-drag-handle { display: none; }
.sidebar-collapsed .sidebar-divider { margin: 0.3rem 0.4rem; }

/* 컨텍스트 메뉴 구분선 */
.context-menu-divider {
    height: 1px; margin: 3px 6px;
    background: var(--border); opacity: 0.5;
}
#ctx-fav-icon { transition: color 0.15s; }

body[data-theme="dark"] .sidebar-divider { background: rgba(255,255,255,0.08); }

/* ================================================================
   사용자 권한 매트릭스
   ================================================================ */
.perm-matrix-wrap { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.perm-matrix-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--border);
    background: var(--surface); flex-shrink: 0;
}
.perm-matrix-title { font-size: var(--fs); display: flex; align-items: center; gap: 0.4rem; }
/* ★ 사이드바·pane 버튼 높이 표준 (2026-08-07 사용자 확정) — btn-tool과 동일 수직 규격
   (0.1rem 패딩 + --fs-toolbar + 1px 보더 = 우측사이드바 저장/취소/계정발급 버튼 높이).
   색상(accent)만으로 구분하고 높이 혼재 금지 — layout-ui.md '사이드바·pane 버튼 높이 표준' */
.perm-save-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.12rem;
    padding: 0.1rem 0.6rem; font-size: var(--fs-toolbar);
    border: 1px solid var(--accent); border-radius: var(--radius-sm);
    background: var(--accent); color: #fff; cursor: pointer;
    white-space: nowrap; transition: opacity 0.15s; font-family: inherit;
}
.perm-save-btn:hover { opacity: 0.85; }
.perm-matrix-body { flex: 1; overflow: auto; min-height: 0; }

.perm-table {
    width: 100%; border-collapse: collapse; font-size: var(--fs);
    table-layout: fixed;
}
.perm-table thead { z-index: 2; }
.perm-table th {
    position: sticky; top: 0; z-index: 2;
    background: var(--bg-hover); border: 1px solid var(--border);
    padding: 3px 2px; white-space: nowrap;
}
.perm-table td { border: 1px solid var(--border); padding: 2px 4px; }

.perm-th-tree  { width: 230px; text-align: center; }  /* 내비게이션 트리(들여쓰기) 수용 */
.perm-th-check {
    width: 52px; text-align: center; font-size: var(--fs); line-height: 1.2;
    user-select: none;
}
.perm-th-check span { display: block; font-size: var(--fs); color: var(--text-secondary); }
.perm-th-check .perm-cb-col {
    width: 12px; height: 12px; margin-top: 1px;
    cursor: pointer; accent-color: var(--accent);
}

.perm-td-tree { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perm-td-check { text-align: center; }
.perm-td-check input[type="checkbox"] {
    width: 13px; height: 13px; cursor: pointer; accent-color: var(--accent);
}

.perm-table tbody tr:hover { background: rgba(99,102,241,0.06); }

/* 폴더 행 = 하위 트리 일괄 컨트롤 (좌측 내비게이션 폴더 구조 그대로) */
.perm-group-row td { background: rgba(99,102,241,0.10); }
.perm-group-row .perm-td-tree { color: var(--accent); }
.perm-group-row .perm-td-tree i { margin-right: 2px; }

/* 헤더 우측: 최상위 전체 선택 + 저장 */
.perm-head-actions { display: flex; align-items: center; gap: 10px; }
.perm-master-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs); color: var(--text); cursor: pointer; user-select: none;
}
.perm-master-toggle input[type="checkbox"] {
    width: 13px; height: 13px; cursor: pointer; accent-color: var(--accent);
}

/* 다크모드 */
body[data-theme="dark"] .perm-matrix-header { background: rgba(30,30,40,0.95); }
body[data-theme="dark"] .perm-table th { background: rgba(40,40,52,0.98); }
body[data-theme="dark"] .perm-group-row td { background: rgba(99,102,241,0.16); }
body[data-theme="dark"] .perm-table tbody tr:hover { background: rgba(99,102,241,0.1); }

/* ================================================================
   22. Flatpickr Custom Theme (Compact & Refined)
   ================================================================ */
.flatpickr-calendar {
    background: rgba(0,0,0,0.06) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Segoe UI', sans-serif !important;
    padding: 2px !important;
    width: 220px !important;
    animation: fpFadeIn 0.15s ease-out !important;
}
@keyframes fpFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.flatpickr-calendar::before,
.flatpickr-calendar::after { display: none !important; }

/* 헤더 (월/연도) */
.flatpickr-months { padding: 2px 0 0 !important; height: 26px !important; align-items: center !important; }
.flatpickr-months .flatpickr-month { height: 24px !important; }
.flatpickr-current-month {
    font-size: var(--fs) !important; font-weight: 400 !important;
    color: var(--text) !important; padding-top: 2px !important;
    letter-spacing: -0.2px !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: var(--fs) !important; font-weight: 400 !important;
    background: transparent !important; border: none !important;
    color: var(--text) !important; appearance: none !important;
    -webkit-appearance: none !important; padding: 0 2px !important;
}
.flatpickr-current-month input.cur-year {
    font-size: var(--fs) !important; font-weight: 400 !important;
    color: var(--text) !important;
}
.numInputWrapper { padding: 0 !important; }
.numInputWrapper span { display: none !important; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 2px 6px !important; fill: var(--text-muted) !important;
    transition: all 0.15s !important; border-radius: 4px !important;
    top: 4px !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    fill: var(--accent) !important; background: rgba(99,102,241,0.06) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 8px !important; height: 8px !important;
}

/* 요일 헤더 */
.flatpickr-weekdays { padding: 0 2px !important; height: 20px !important; }
.flatpickr-weekdaycontainer { display: flex !important; }
span.flatpickr-weekday {
    font-size: var(--fs) !important; font-weight: 400 !important;
    color: var(--text-muted) !important; text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* 날짜 셀 */
.flatpickr-days { padding: 0 2px 2px !important; }
.flatpickr-innerContainer { padding: 0 !important; }
.dayContainer {
    min-width: 210px !important; max-width: 210px !important;
    padding: 0 !important;
}
.flatpickr-day {
    font-size: var(--fs) !important;
    line-height: 26px !important; height: 26px !important;
    max-width: 30px !important; flex-basis: 30px !important;
    border-radius: 6px !important;
    color: var(--text) !important; border: none !important;
    margin: 0 !important;
    transition: all 0.12s ease !important;
    font-weight: 400 !important;
}
.flatpickr-day:hover {
    background: rgba(99,102,241,0.08) !important;
    border: none !important;
}
.flatpickr-day.today {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--accent) !important;
    font-weight: 400 !important;
    /* 셀 내부 하단 밑줄로 '오늘' 표시 — 셀 크기 영향 없음, 숫자 가독성 유지 */
    box-shadow: inset 0 -2px 0 var(--accent) !important;
    position: relative !important;
}
.flatpickr-day.today::after { display: none !important; }
.flatpickr-day.today:hover {
    background: rgba(99,102,241,0.12) !important;
    box-shadow: inset 0 -2px 0 var(--accent) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected.today,
.flatpickr-day.selected.today:hover {
    background: var(--accent) !important;
    color: #fff !important; border: none !important;
    outline: none !important;
    box-shadow: 0 1px 4px rgba(99,102,241,0.3) !important;
    font-weight: 400 !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--text-muted) !important; opacity: 0.35 !important;
}
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover { opacity: 0.6 !important; }
.flatpickr-day.flatpickr-disabled {
    color: var(--text-muted) !important; opacity: 0.2 !important;
}

/* 날짜 입력 비활성 상태 */
.date-input.disabled-date {
    opacity: 1 !important; cursor: default !important;
    background: rgba(0,0,0,0.04) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}
body[data-theme="dark"] .date-input.disabled-date {
    background: rgba(255,255,255,0.04) !important;
}

/* 다크모드 Flatpickr */
body[data-theme="dark"] .flatpickr-calendar {
    background: rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25) !important;
}
body[data-theme="dark"] .flatpickr-day { color: var(--text) !important; }
body[data-theme="dark"] .flatpickr-day:hover { background: rgba(129,140,248,0.12) !important; }
body[data-theme="dark"] .flatpickr-day.today {
    color: var(--accent) !important; background: transparent !important;
    outline: none !important;
    box-shadow: inset 0 -2px 0 var(--accent) !important;
}
body[data-theme="dark"] .flatpickr-day.today::after { display: none !important; }
body[data-theme="dark"] .flatpickr-day.selected.today {
    background: var(--accent) !important; color: #fff !important;
    box-shadow: 0 1px 4px rgba(129,140,248,0.4) !important;
}
body[data-theme="dark"] .flatpickr-day.selected {
    background: var(--accent) !important;
    box-shadow: 0 1px 4px rgba(129,140,248,0.35) !important;
}
body[data-theme="dark"] .flatpickr-day.prevMonthDay,
body[data-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--text-muted) !important; }
body[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
body[data-theme="dark"] .flatpickr-current-month input.cur-year { color: var(--text) !important; }
body[data-theme="dark"] span.flatpickr-weekday { color: var(--text-muted) !important; }
body[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
body[data-theme="dark"] .flatpickr-months .flatpickr-next-month { fill: var(--text-muted) !important; }
body[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover,
body[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover { fill: var(--accent) !important; background: rgba(129,140,248,0.08) !important; }

/* ★ 검색 드롭다운 바인딩된 인풋 — 표준 select와 동일한 삼각형 마크 */
input[data-search-bound="true"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    background-size: 8px !important;
    padding-right: 1.4rem !important;
    cursor: pointer !important;
}

/* === 표준 검색 드롭다운 (HlcaSearchDropdown) — 글래스모피즘 표준 === */
.hlca-search-dropdown {
    position: fixed; z-index: 99999;
    display: flex; flex-direction: column;
    max-height: 260px; overflow: hidden;
    background: rgba(240,240,248,0.55);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 1.5px 6px rgba(0,0,0,0.06);
    font-size: var(--fs);
}
/* 검색 입력창 */
.hlca-search-input-wrap {
    padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.3); flex-shrink: 0;
}
.hlca-search-input {
    width: 100%; padding: 4px 8px;
    font-size: var(--fs); color: var(--text);
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(0,0,0,0.12); border-radius: 4px;
    outline: none;
}
.hlca-search-input::placeholder { color: var(--text-muted); }
.hlca-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.12); }
/* 결과 리스트 */
.hlca-search-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 3px 0; }
.hlca-search-empty { padding: 8px 12px; color: var(--text-muted); text-align: center; }
.hlca-search-option {
    display: grid; gap: 6px; padding: 4px 12px;
    cursor: pointer; transition: background 0.12s;
    align-items: center; white-space: nowrap;
}
.hlca-search-option:hover, .hlca-search-option.kb-active { background: rgba(99,102,241,0.12); color: var(--accent); }
.hlca-search-option > span { overflow: hidden; text-overflow: ellipsis; }
.hlca-search-option .hsd-type { color: var(--accent); }
.hlca-search-option .hsd-code { color: var(--text); }
.hlca-search-option .hsd-name { color: var(--text); }
.hlca-search-option:hover > span, .hlca-search-option.kb-active > span { color: var(--accent); }
/* 선택 해제 행 (최상단) — 라벨명은 accent 색상 + 배경 틴트로 구분, 이탤릭 금지 */
.hlca-search-clear {
    color: var(--accent); background: rgba(99,102,241,0.04);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 4px 12px;
}
.hlca-search-clear:hover { background: rgba(99,102,241,0.12); color: var(--accent); }
/* 다크모드 */
body[data-theme="dark"] .hlca-search-dropdown {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 1.5px 6px rgba(0,0,0,0.2);
}
body[data-theme="dark"] .hlca-search-option:hover,
body[data-theme="dark"] .hlca-search-option.kb-active { background: rgba(99,102,241,0.18); }
body[data-theme="dark"] .hlca-search-clear { border-bottom-color: rgba(255,255,255,0.15); }
body[data-theme="dark"] .hlca-search-input-wrap { background: rgba(255,255,255,0.05); border-bottom-color: rgba(255,255,255,0.12); }
body[data-theme="dark"] .hlca-search-input { background: rgba(40,40,44,0.6); border-color: rgba(255,255,255,0.12); color: var(--text); }
body[data-theme="dark"] .hlca-search-empty { color: var(--text-muted); }

/* === 트리 뷰 (HlcaTreeView) — 그리드 계층 표시 표준 === */
/* 체브론 컬럼 (▶/▼) — 펼침/접힘 토글 */
.hlca-tree-chevron-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
.hlca-tree-chevron {
    cursor: pointer; color: var(--text); font-size: var(--fs);
}
/* 토글 아이콘 (체크박스 헤더 아래) */
.hlca-tree-toggle-icon {
    cursor: pointer; font-size: var(--fs); color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; transition: color 0.2s;
}
.hlca-tree-toggle-icon:hover,
.hlca-tree-toggle-icon.active { color: var(--accent); }
/* 트리 셀 (treeColumn 대상) — 인덴트 + 커넥터 + 아이콘 + 텍스트 래퍼 */
.hlca-tree-cell {
    display: flex; align-items: center; gap: 3px;
    width: 100%; height: 100%; min-width: 0; overflow: hidden;
    font-size: var(--fs);
}
.hlca-tree-indent {
    display: inline-block; flex-shrink: 0;
    width: calc(var(--tree-level, 0) * var(--tree-indent));
}
.hlca-tree-connector {
    color: var(--text-muted); flex-shrink: 0;
    font-size: var(--fs); line-height: 1;
}
.hlca-tree-icon { flex-shrink: 0; font-size: var(--fs); }
.hlca-tree-icon.is-top { color: var(--tree-folder-top); }
.hlca-tree-icon.is-sub { color: var(--tree-folder-sub); }
.hlca-tree-icon.is-leaf { color: var(--text-muted); }
.hlca-tree-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0; flex: 1 1 auto;
}

/* ═══ HlcaPivot 동적 피벗 (그리드 동적 피벗 표준 — grid.md) ═══
   토글 아이콘(체크박스 열 초성검색 셀) + 설정 팝업(Popup Style 표준값).
   구조는 라이트/다크 공통, 색상만 모드별 */

/* 토글 아이콘 — 트리뷰 토글(.hlca-tree-toggle-icon)과 동일 자리/시각 언어.
   absolute 오버레이(inset:0)로 셀 내부 구조(빈 floating filter 래퍼 등)와 무관하게
   셀 정중앙 고정 — AG Grid 헤더 셀(position:absolute)이 기준 박스가 됨. 클릭 영역 = 셀 전체 */
.hlca-pivot-toggle-icon {
    position: absolute; inset: 0;
    cursor: pointer; font-size: var(--fs); color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s;
}
.hlca-pivot-toggle-icon:hover,
.hlca-pivot-toggle-icon.active { color: var(--accent); }

/* 설정 팝업 — 오버레이/헤더/풋터/글래스 엣지 = Popup Style Standardization 표준값 */
.hlca-pivot-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.05);
    backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
    display: flex; align-items: center; justify-content: center;
}
.hlca-pivot-popup {
    width: 340px; background: #fff; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 1px 0 rgba(255,255,255,0.6), inset 0 0 0 0.5px rgba(255,255,255,0.3);
}
body[data-theme="dark"] .hlca-pivot-popup {
    background: #1e1e26;
    border: 1px solid rgba(180,190,255,0.35);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 28px 4px rgba(130,150,255,0.35), 0 0 3px 0 rgba(255,255,255,0.5), inset 0 0 0 0.5px rgba(255,255,255,0.18);
}
.hlca-pivot-popup-header {
    height: 24px; padding: 0 16px; cursor: move;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(20,30,80,0.92); color: rgba(255,255,255,0.95);
    font-size: var(--fs); border-radius: 10px 10px 0 0;
}
body[data-theme="dark"] .hlca-pivot-popup-header { background: rgba(65,65,78,0.92); }
.hlca-pivot-popup-close {
    font-size: 1rem; padding: 0 4px; background: none; border: none;
    color: rgba(255,255,255,0.6); cursor: pointer;
}
.hlca-pivot-popup-close:hover { color: rgba(255,255,255,0.95); }
.hlca-pivot-popup-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.hlca-pivot-popup-footer {
    height: 24px; padding: 0 16px; gap: 6px;
    display: flex; align-items: center; justify-content: flex-end;
    background: rgba(230,232,245,0.7); border-radius: 0 0 10px 10px;
}
body[data-theme="dark"] .hlca-pivot-popup-footer { background: rgba(174,174,184,0.7); }
/* 풋터 버튼 = 표준 .btn-accent 재사용 (다크모드 대비 자동), 크기만 풋터(24px)보다 작게 수납 — 상하 3px 여유 */
.hlca-pivot-popup-footer .btn-accent {
    height: 18px; padding: 0 8px; font-size: var(--fs); cursor: pointer;
    display: inline-flex; align-items: center;
}

/* 팝업 본문 — 축 방향 미니맵 (행=세로 / 열=가로 / 값=교차 집계 도식).
   행/열 = 그리드 헤더 톤(남색+흰 글자 — 실제 피벗 결과의 헤더가 된다는 의미), 값 = 데이터 셀 톤.
   이전 accent 틴트+accent 글자는 다크모드에서 어두운 글자가 어두운 틴트에 묻혀 시인성 불량 → 헤더 톤으로 교체 */
.hlca-pivot-map {
    display: grid; grid-template-columns: 64px 1fr; grid-template-rows: 20px 30px;
    gap: 2px; margin-bottom: 3px;
    font-size: var(--fs);
}
.hlca-pivot-map > div {
    display: flex; align-items: center; justify-content: center; gap: 3px;
    border-radius: 4px;
}
.hlca-pivot-map-cols, .hlca-pivot-map-rows {
    background: rgba(20,30,80,0.88); color: rgba(255,255,255,0.95);
}
body[data-theme="dark"] .hlca-pivot-map-cols,
body[data-theme="dark"] .hlca-pivot-map-rows { background: rgba(65,65,78,0.92); }
.hlca-pivot-map-vals {
    background: rgba(0,0,0,0.05); color: var(--text);
    border: 1px solid rgba(0,0,0,0.15);
}
body[data-theme="dark"] .hlca-pivot-map-vals {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
}

/* 섹션 헤더 — Form Section Divider 시각 언어 (좌측 2px accent 라인 + 하단 구분선) + 방향 힌트 */
.hlca-pivot-sec {
    display: flex; align-items: center; gap: 5px;
    margin-top: 6px; padding: 2px 0 3px 6px;
    border-left: 2px solid var(--accent);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs); color: var(--text);
}
.hlca-pivot-sec > i { color: var(--accent); }
.hlca-pivot-sec-hint { margin-left: auto; font-size: 0.62rem; color: var(--text-secondary); }

/* 축 드롭다운 행 + 값·집계 나란히 배치 */
.hlca-pivot-item { display: flex; margin: 0; }
.hlca-pivot-val-row { display: flex; gap: 6px; }
.hlca-pivot-val-row .hlca-pivot-item:first-child { flex: 1.4; }
.hlca-pivot-val-row .hlca-pivot-item:last-child { flex: 1; }
.hlca-pivot-select {
    flex: 1; min-width: 0;
    font-size: var(--fs); height: 22px; padding: 0 4px;
    border: 1px solid var(--border); border-radius: 4px;
    background: rgba(255,255,255,0.8); color: var(--text);
}
body[data-theme="dark"] .hlca-pivot-select { background: rgba(60,60,70,0.8); }

/* ── Detached Tab Popup ── */
.detached-popup {
    position: fixed; z-index: 8000;
    width: 800px; height: 500px; min-width: 400px; min-height: 300px;
    border-radius: 10px; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    /* left/top은 커서 추적으로 매 프레임 갱신되므로 transition 대상에 절대 포함 금지 */
    transition: transform 0.22s cubic-bezier(0.25, 0.9, 0.3, 1), opacity 0.22s ease, box-shadow 0.25s ease;
}
body[data-theme="dark"] .detached-popup { box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.detached-popup.popup-carrying { box-shadow: 0 18px 60px rgba(0,0,0,0.35); }
body[data-theme="dark"] .detached-popup.popup-carrying { box-shadow: 0 18px 60px rgba(0,0,0,0.65); }
.detached-popup-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.3rem 0.7rem; border-bottom: 1px solid var(--border);
    cursor: move; user-select: none; flex-shrink: 0;
    background: rgba(99,102,241,0.06);
}
body[data-theme="dark"] .detached-popup-header { background: rgba(99,102,241,0.1); }
.detached-popup-title { display: flex; align-items: center; gap: 6px; font-size: var(--fs); color: var(--text); }
.detached-popup-title i { font-size: 0.65rem; color: var(--accent); }
.detached-popup-actions { display: flex; gap: 4px; }
.detached-popup-btn {
    background: none; border: none; font-size: 0.72rem; cursor: pointer;
    color: var(--text-muted); padding: 2px 5px; border-radius: 3px; line-height: 1;
}
.detached-popup-btn:hover { color: var(--text); background: var(--accent-light); }
.detached-popup-close:hover { color: #dc2626; background: rgba(220,38,38,0.1); }
.detached-popup-body { flex: 1; overflow: hidden; position: relative; }
.detached-popup-body .tab-panel { position: relative !important; inset: auto !important; height: 100% !important; }
.detached-popup-resize {
    position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
    cursor: nwse-resize; z-index: 10; opacity: 0.4;
    background: linear-gradient(135deg, transparent 50%, var(--text-muted) 50%, var(--text-muted) 55%, transparent 55%,
                transparent 65%, var(--text-muted) 65%, var(--text-muted) 70%, transparent 70%);
    border-radius: 0 0 10px 0;
}
.detached-popup-resize:hover { opacity: 1; }
.workspace-tabs.tab-drop-target {
    background: var(--accent-light); box-shadow: 0 2px 8px rgba(99,102,241,0.2) inset;
}

/* ================================================================
   AIM Chatbot
   ================================================================ */
/* ══════════════════════════════════════════════════════
   AIM Chatbot — Modern UI (2026 Trend)
   ══════════════════════════════════════════════════════ */
.aim-chat-wrap {
    display: flex; height: 100%; overflow: hidden;
    font-size: var(--fs);
    border: 1px solid rgba(140,145,170,0.45); border-radius: 8px;
}

/* ── 세션 사이드바 ── */
.aim-sessions {
    width: 240px; min-width: 160px;
    border-right: 1px solid rgba(140,145,170,0.45);
    display: flex; flex-direction: column;
    background: rgba(220,221,229,0.92);
    backdrop-filter: blur(16px);
}
.aim-resizer {
    width: 4px; cursor: col-resize; flex-shrink: 0;
    background: transparent; position: relative; z-index: 5;
    transition: background 0.2s;
}
.aim-resizer:hover, .aim-resizer.dragging {
    background: rgba(99,102,241,0.25);
}
.aim-sessions-header {
    padding: 0 10px;
    height: 38px;
    border-bottom: 1px solid rgba(140,145,170,0.4);
    display: flex; align-items: center; gap: 6px;
}
.aim-sessions-header .aim-new-chat {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 3px 14px; border-radius: 8px; font-size: inherit; white-space: nowrap;
    background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.06) 100%);
    border: 1px dashed rgba(99,102,241,0.25);
    color: var(--accent, #6366f1); cursor: pointer;
    transition: all 0.25s ease;
}
.aim-sessions-header .aim-new-chat:hover {
    background: linear-gradient(135deg, rgba(99,102,241,0.14) 0%, rgba(139,92,246,0.10) 100%);
    border-style: solid; transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99,102,241,0.1);
}
.aim-sessions-list { flex: 1; overflow-y: auto; padding: 6px 8px; }
.aim-sessions-list::-webkit-scrollbar { width: 3px; }
.aim-sessions-list::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.15); border-radius: 3px; }
.aim-session-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 10px; cursor: pointer; position: relative;
    border-radius: 10px; margin-bottom: 2px;
    transition: all 0.2s ease;
}
.aim-session-item:hover { background: rgba(255,255,255,0.65); }
.aim-session-item.active {
    background: rgba(99,102,241,0.14);
    box-shadow: inset 2.5px 0 0 var(--accent, #6366f1);
}
.aim-session-item.aim-glow-once {
    animation: aimGlowOnce 1.2s ease-out forwards;
}
@keyframes aimGlowOnce {
    0%   { box-shadow: inset 2.5px 0 0 var(--accent, #6366f1), 0 0 0 0 rgba(99,102,241,0); background: rgba(99,102,241,0.04); }
    25%  { box-shadow: inset 2.5px 0 0 var(--accent, #6366f1), 0 0 16px 5px rgba(99,102,241,0.28); background: rgba(99,102,241,0.16); }
    100% { box-shadow: inset 2.5px 0 0 var(--accent, #6366f1); background: rgba(99,102,241,0.10); }
}
.aim-session-icon {
    flex-shrink: 0; margin-top: 2px;
    font-size: 0.72rem; color: var(--text-muted); opacity: 0.5;
}
.aim-session-body { flex: 1; min-width: 0; }
.aim-session-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: inherit; line-height: 1.45;
}
.aim-session-meta { font-size: 0.62rem; color: var(--text-muted); margin-top: 2px; opacity: 0.7; }
.aim-session-del {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 2px 4px; opacity: 0; transition: opacity 0.2s;
    font-size: 0.7rem;
}
.aim-session-item:hover .aim-session-del { opacity: 0.4; }
.aim-session-del:hover { opacity: 1 !important; color: #ef4444; }
.aim-no-sessions {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 50px 20px; color: var(--text-muted); font-size: inherit;
}
.aim-no-sessions i { font-size: 1.3rem; opacity: 0.2; }

/* ── 메인 채팅 ── */
.aim-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.aim-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
    height: 38px;
    border-bottom: 1px solid rgba(140,145,170,0.45);
    background: rgba(20,30,80,0.92);
    backdrop-filter: blur(12px);
}
.aim-header-title {
    font-size: inherit; display: flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.95); letter-spacing: 0.3px;
}
.aim-header-logo {
    width: 24px; height: 24px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff; font-size: 0.72rem;
}
.aim-status {
    display: flex; align-items: center; gap: 6px;
    font-size: inherit; color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.12); padding: 3px 10px; border-radius: 20px;
}
.aim-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-muted); transition: all 0.3s;
}
.aim-status-dot.connected {
    background: #10b981;
    box-shadow: 0 0 6px rgba(16,185,129,0.4);
    animation: aimStatusPulse 3s infinite;
}
.aim-status-dot.disconnected { background: #ef4444; }
@keyframes aimStatusPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(16,185,129,0.3); }
    50% { box-shadow: 0 0 8px rgba(16,185,129,0.5); }
}

/* ── 메시지 ── */
.aim-messages {
    flex: 1; overflow-y: auto; padding: 20px 28px;
    display: flex; flex-direction: column; gap: 14px;
}
.aim-messages::-webkit-scrollbar { width: 4px; }
.aim-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 4px; }
.aim-msg {
    display: flex; gap: 10px; max-width: 80%;
    animation: aimFadeIn 0.3s cubic-bezier(0.22,1,0.36,1);
}
@keyframes aimFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.aim-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.aim-msg-assistant { align-self: flex-start; }
.aim-avatar {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 0.72rem;
}
.aim-avatar-ai {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
}
.aim-avatar-user {
    background: rgba(99,102,241,0.07);
    color: var(--accent, #6366f1);
}
.aim-bubble {
    padding: 10px 14px; border-radius: 16px; line-height: 1.65;
    font-size: inherit; word-break: break-word;
}
.aim-msg-assistant .aim-bubble {
    background: #fff;
    backdrop-filter: blur(14px);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 4px 16px 16px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.aim-msg-user .aim-bubble {
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
    color: #fff;
    border-radius: 16px 4px 16px 16px;
    box-shadow: 0 2px 10px rgba(99,102,241,0.2);
}
.aim-bubble pre {
    background: rgba(0,0,0,0.04); padding: 10px 12px; border-radius: 8px;
    overflow-x: auto; margin: 8px 0; border: 1px solid rgba(0,0,0,0.05);
    font-size: 0.92em;
}
.aim-bubble code {
    font-family: 'Consolas', 'Monaco', monospace; font-size: 0.9em;
    background: rgba(99,102,241,0.07); padding: 1px 5px; border-radius: 4px;
}
.aim-bubble pre code { background: none; padding: 0; }
.aim-bubble strong { font-weight: 500; }
.aim-bubble ul { margin: 6px 0; padding-left: 18px; }
.aim-bubble li { margin: 3px 0; }
.aim-sources {
    margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.05);
    font-size: 0.62rem; color: var(--text-muted);
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.aim-sources i { font-size: inherit; opacity: 0.6; }
.aim-sources span {
    background: rgba(99,102,241,0.05); padding: 2px 8px;
    border-radius: 10px; border: 1px solid rgba(99,102,241,0.08);
    font-size: 0.62rem;
}

/* ── 코드 블록 복사 버튼 ── */
.aim-code-block {
    position: relative;
}
.aim-code-copy {
    position: absolute; top: 6px; right: 6px;
    background: rgba(99,102,241,0.10); border: 1px solid rgba(99,102,241,0.15);
    color: var(--text-muted); cursor: pointer;
    width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; opacity: 0; transition: opacity 0.2s;
}
.aim-code-block:hover .aim-code-copy { opacity: 1; }
.aim-code-copy:hover { background: rgba(99,102,241,0.20); color: var(--accent, #6366f1); }
.aim-code-copy.copied { opacity: 1; color: #059669; border-color: rgba(5,150,105,0.3); background: rgba(5,150,105,0.08); }

/* ── 메시지 액션 (복사, 재생성, 타임스탬프) ── */
.aim-msg-actions {
    display: flex; align-items: center; gap: 4px;
    margin-top: 6px; opacity: 0; transition: opacity 0.2s;
}
.aim-msg .aim-bubble:hover .aim-msg-actions { opacity: 1; }
.aim-msg-copy, .aim-msg-regen {
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.12);
    color: var(--text-muted); cursor: pointer;
    width: 22px; height: 22px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; transition: background 0.15s;
}
.aim-msg-copy:hover, .aim-msg-regen:hover { background: rgba(99,102,241,0.18); color: var(--accent, #6366f1); }
.aim-msg-copy.copied { color: #059669; border-color: rgba(5,150,105,0.3); background: rgba(5,150,105,0.08); }
.aim-msg-time {
    font-size: 0.58rem; color: var(--text-muted); opacity: 0.5; margin-left: 2px;
}

/* ── 대화 검색 ── */
.aim-session-search {
    display: flex; align-items: center; gap: 4px;
    color: var(--text-muted); font-size: 0.68rem;
    flex: 1; min-width: 0;
}
.aim-session-search i { opacity: 0.4; font-size: 0.58rem; flex-shrink: 0; }
.aim-session-search-input {
    width: 100%; min-width: 0; background: #fff;
    border-radius: 6px; padding: 3px 6px; font-size: inherit;
    color: var(--text); outline: none;
    border: 1px solid rgba(140,145,170,0.35); transition: border-color 0.2s;
}
.aim-session-search-input:focus { border-color: rgba(99,102,241,0.25); }
.aim-session-search-input::placeholder { color: var(--text-muted); opacity: 0.5; }

/* ── 세션 제목 인라인 편집 ── */
.aim-session-title-input {
    width: 100%; border: none; background: rgba(99,102,241,0.08);
    border-radius: 4px; padding: 1px 4px; font-size: inherit;
    color: var(--text); outline: none;
    border: 1px solid rgba(99,102,241,0.3);
}

/* ── 빈 입력 shake ── */
.aim-shake {
    animation: aimShake 0.4s ease;
}
@keyframes aimShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(2px); }
}

/* ── 스크롤 투 바텀 ── */
.aim-scroll-bottom {
    position: absolute; right: 24px; bottom: 80px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.75); backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 0.75rem; color: var(--text-muted);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    transform: translateY(8px);
    z-index: 10;
}
.aim-scroll-bottom.visible {
    opacity: 1; pointer-events: auto; transform: translateY(0);
}
.aim-scroll-bottom:hover {
    background: rgba(99,102,241,0.10); border-color: rgba(99,102,241,0.2);
    color: var(--accent, #6366f1);
}

/* ── AI 아바타 응답 중 글로우 ── */
.aim-avatar-thinking {
    animation: aimAvatarGlow 2s ease-in-out infinite;
}
@keyframes aimAvatarGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(99,102,241,0.15); }
    50%      { box-shadow: 0 0 14px 4px rgba(99,102,241,0.4); }
}

/* ── 세션 슬라이드인 ── */
.aim-session-slide-in {
    animation: aimSlideIn 0.4s cubic-bezier(0.22,1,0.36,1);
}
@keyframes aimSlideIn {
    from { opacity: 0; transform: translateY(-12px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0); max-height: 60px; }
}

/* ── 타이핑 애니메이션 ── */
.aim-typing { display: flex; gap: 4px; padding: 6px 2px; align-items: center; }
.aim-typing span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent, #6366f1); opacity: 0.3;
    animation: aimBounce 1.4s infinite ease-in-out;
}
.aim-typing span:nth-child(2) { animation-delay: 0.16s; }
.aim-typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes aimBounce {
    0%, 60%, 100% { opacity: 0.2; transform: translateY(0) scale(0.85); }
    30% { opacity: 0.7; transform: translateY(-3px) scale(1); }
}

/* ── 스트리밍 커서 ── */
.aim-stream-text::after {
    content: ''; display: inline-block;
    width: 2px; height: 0.9em; background: var(--accent, #6366f1);
    margin-left: 1px; vertical-align: text-bottom;
    animation: aimCursorBlink 0.8s step-end infinite;
}
@keyframes aimCursorBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ── 웰컴 ── */
.aim-welcome {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; flex: 1; gap: 10px; padding: 30px 20px;
    position: relative;
}
.aim-welcome-glow {
    position: absolute; width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, rgba(139,92,246,0.03) 40%, transparent 70%);
    border-radius: 50%; top: 12%; pointer-events: none;
}
.aim-welcome-avatar {
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.4rem;
    box-shadow: 0 4px 24px rgba(99,102,241,0.25);
    position: relative; z-index: 1;
}
.aim-welcome-title {
    font-size: 1rem; color: var(--text); letter-spacing: 0.3px;
    position: relative; z-index: 1;
}
.aim-welcome-desc {
    font-size: inherit; color: var(--text-muted); text-align: center;
    max-width: 320px; line-height: 1.55; margin-bottom: 14px;
    position: relative; z-index: 1;
}
.aim-welcome-hints {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    width: 100%; max-width: 440px;
    position: relative; z-index: 1;
}
.aim-hint {
    display: flex; align-items: flex-start; gap: 10px; text-align: left;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(140,145,170,0.4);
    padding: 12px 14px; border-radius: 12px; cursor: pointer;
    color: var(--text); transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.aim-hint:hover {
    background: rgba(99,102,241,0.06);
    border-color: rgba(99,102,241,0.2);
    box-shadow: 0 3px 12px rgba(99,102,241,0.08);
    transform: translateY(-2px);
}
.aim-hint > i {
    font-size: 0.9rem; color: var(--accent, #6366f1); margin-top: 1px;
    flex-shrink: 0; opacity: 0.65;
}
.aim-hint-title { font-size: inherit; line-height: 1.35; }
.aim-hint-desc { font-size: 0.62rem; color: var(--text-muted); margin-top: 2px; line-height: 1.35; opacity: 0.8; }

/* ── 입력 ── */
.aim-input-wrap {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 28px 10px;
    background: rgba(220,221,229,0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(140,145,170,0.45);
}
.aim-input-box {
    display: flex; align-items: flex-end; gap: 8px;
    background: #fff;
    backdrop-filter: blur(14px);
    border: 1px solid rgba(140,145,170,0.5);
    border-radius: 14px; padding: 4px 4px 4px 14px;
    transition: all 0.25s ease;
}
.aim-input-box:focus-within {
    border-color: rgba(99,102,241,0.35);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.06);
}
.aim-input {
    flex: 1; resize: none; border: none; padding: 8px 0;
    font-size: inherit; background: transparent;
    color: var(--text); outline: none;
    max-height: 120px; line-height: 1.5; font-family: inherit;
}
.aim-input::placeholder { color: var(--text-muted); }
.aim-send {
    width: 32px; height: 32px; border-radius: 10px;
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
    color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; flex-shrink: 0;
    transition: all 0.25s ease;
}
.aim-send:disabled { opacity: 0.2; cursor: default; }
.aim-send:not(:disabled):hover {
    transform: scale(1.06);
    box-shadow: 0 3px 12px rgba(99,102,241,0.3);
}
.aim-input-footer {
    text-align: center; font-size: 0.62rem; color: var(--text-muted); opacity: 0.5;
}

/* ── 다크모드 (구조 동일, 색만 다크 표준 — 사이드바/입력존 rgba(22,22,28,0.7), 헤더 rgba(44,44,52,0.92)) ── */
body[data-theme="dark"] .aim-chat-wrap { border-color: rgba(255,255,255,0.12); }
body[data-theme="dark"] .aim-sessions { background: rgba(22,22,28,0.7); border-right-color: rgba(255,255,255,0.12); }
body[data-theme="dark"] .aim-sessions-header { border-bottom-color: rgba(255,255,255,0.10); }
body[data-theme="dark"] .aim-session-item:hover { background: rgba(255,255,255,0.05); }
body[data-theme="dark"] .aim-session-item.active { background: rgba(99,102,241,0.20); }
body[data-theme="dark"] .aim-header { background: rgba(44,44,52,0.92); border-bottom-color: rgba(255,255,255,0.12); }
body[data-theme="dark"] .aim-msg-assistant .aim-bubble {
    background: rgba(38,38,48,0.9); border-color: rgba(255,255,255,0.08);
}
body[data-theme="dark"] .aim-bubble pre { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.05); }
body[data-theme="dark"] .aim-bubble code { background: rgba(255,255,255,0.07); }
body[data-theme="dark"] .aim-input-wrap { background: rgba(22,22,28,0.7); border-top-color: rgba(255,255,255,0.12); }
body[data-theme="dark"] .aim-input-box { background: rgba(38,38,48,0.85); border-color: rgba(255,255,255,0.14); }
body[data-theme="dark"] .aim-hint {
    background: rgba(38,38,48,0.7); border-color: rgba(255,255,255,0.10);
}
body[data-theme="dark"] .aim-hint:hover {
    background: rgba(99,102,241,0.10); border-color: rgba(99,102,241,0.2);
}
body[data-theme="dark"] .aim-welcome-glow {
    background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 70%);
}
body[data-theme="dark"] .aim-status { background: rgba(255,255,255,0.10); }
body[data-theme="dark"] .aim-sessions-header .aim-new-chat {
    background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.18);
}
body[data-theme="dark"] .aim-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
body[data-theme="dark"] .aim-sessions-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
body[data-theme="dark"] .aim-scroll-bottom {
    background: rgba(38,38,48,0.75); border-color: rgba(255,255,255,0.08);
}
body[data-theme="dark"] .aim-code-copy {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08);
}
body[data-theme="dark"] .aim-msg-copy,
body[data-theme="dark"] .aim-msg-regen {
    background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08);
}
body[data-theme="dark"] .aim-session-search-input {
    background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.15);
}
body[data-theme="dark"] .aim-session-search-input:focus { border-color: rgba(99,102,241,0.3); }
body[data-theme="dark"] .aim-session-title-input {
    background: rgba(255,255,255,0.06); border-color: rgba(99,102,241,0.3);
}

/* ── AIM 조회결과 테이블 ── */
.aim-query-table-wrap {
    overflow-x: auto; margin: 8px 0 4px; border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.1);
}
.aim-query-table {
    width: 100%; border-collapse: collapse; font-size: var(--fs);
    white-space: nowrap;
}
.aim-query-table thead th {
    background: rgba(20,30,80,0.88); color: rgba(255,255,255,0.95);
    padding: 4px 8px; font-weight: 400; text-align: left;
    border-right: 1px solid rgba(255,255,255,0.15);
}
.aim-query-table thead th:last-child { border-right: none; }
.aim-query-table tbody td {
    padding: 3px 8px; border-bottom: 1px solid rgba(0,0,0,0.08);
    border-right: 1px solid rgba(0,0,0,0.06);
}
.aim-query-table tbody td:last-child { border-right: none; }
.aim-query-table tbody tr:nth-child(even) { background: rgba(200,205,225,0.1); }
.aim-query-table tbody tr:hover { background: rgba(99,102,241,0.08); }
.aim-qth-no, .aim-qtd-no { text-align: right; padding-right: 10px; width: 40px; min-width: 40px; color: var(--text-muted); }
.aim-query-empty { padding: 12px; text-align: center; color: var(--text-muted); font-size: var(--fs); }
.aim-query-expand {
    display: block; width: 100%; padding: 4px; margin-top: 2px;
    background: transparent; border: 1px dashed rgba(99,102,241,0.3);
    border-radius: 4px; color: var(--accent); cursor: pointer;
    font-size: var(--fs); text-align: center;
}
.aim-query-expand:hover { background: rgba(99,102,241,0.06); }

/* 조회결과 액션 버튼 */
.aim-query-actions { display: flex; gap: 6px; margin: 6px 0 2px; }
.aim-query-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 4px; cursor: pointer;
    font-size: var(--fs); border: 1px solid rgba(99,102,241,0.3);
    background: rgba(99,102,241,0.06); color: var(--accent);
}
.aim-query-btn:hover { background: rgba(99,102,241,0.15); }
.aim-query-btn i { font-size: 0.75rem; }

/* AG Grid 컨테이너 (채팅 내) */
.aim-grid-container {
    margin: 6px 0; border-radius: 6px; overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
}

/* 다크모드 */
body[data-theme="dark"] .aim-query-table-wrap { border-color: rgba(255,255,255,0.1); }
body[data-theme="dark"] .aim-query-table thead th { background: rgba(44,44,52,0.92); }
body[data-theme="dark"] .aim-query-table tbody td { border-bottom-color: rgba(255,255,255,0.06); border-right-color: rgba(255,255,255,0.04); }
body[data-theme="dark"] .aim-query-table tbody tr:nth-child(even) { background: rgba(60,60,70,0.2); }
body[data-theme="dark"] .aim-query-table tbody tr:hover { background: rgba(99,102,241,0.12); }
body[data-theme="dark"] .aim-query-expand { border-color: rgba(99,102,241,0.25); }
body[data-theme="dark"] .aim-query-btn { border-color: rgba(99,102,241,0.25); background: rgba(99,102,241,0.08); }
body[data-theme="dark"] .aim-query-btn:hover { background: rgba(99,102,241,0.2); }
body[data-theme="dark"] .aim-grid-container { border-color: rgba(255,255,255,0.08); }

/* ── AIM 설정 화면 ── */
.aim-settings-wrap {
    padding: 20px 24px;
    background: var(--workspace-bg);
}
.aim-settings-content { max-width: 720px; margin: 0 auto; }
.aim-settings-header { margin-bottom: 20px; }
.aim-settings-header h3 {
    font-size: 1rem; font-weight: 400; margin: 0 0 4px;
    color: var(--text); display: flex; align-items: center; gap: 8px;
}
.aim-settings-desc {
    font-size: var(--fs); color: var(--text-muted); margin: 0;
}

.aim-settings-card {
    background: rgba(255,255,255,0.55); border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px; margin-bottom: 12px; overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.aim-settings-card-header {
    background: rgba(20,30,80,0.06); padding: 8px 14px;
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs); color: var(--text);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.aim-settings-card-header i { font-size: 0.9rem; color: var(--accent); }
.aim-settings-card-body { padding: 14px; }

.aim-status-badge {
    margin-left: auto; padding: 2px 10px; border-radius: 10px;
    font-size: 0.7rem; font-weight: 400;
}
.aim-status-badge.connected {
    background: rgba(5,150,105,0.12); color: #059669;
    border: 1px solid rgba(5,150,105,0.3);
}
.aim-status-badge.disconnected {
    background: rgba(220,38,38,0.1); color: #dc2626;
    border: 1px solid rgba(220,38,38,0.3);
}

.aim-toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.aim-toggle-label { font-size: var(--fs); color: var(--text); }
.aim-toggle-desc { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }

.aim-toggle-switch {
    position: relative; display: inline-block;
    width: 42px; height: 22px; flex-shrink: 0;
}
.aim-toggle-switch input { display: none; }
.aim-toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: rgba(0,0,0,0.2); border-radius: 22px;
    transition: 0.2s;
}
.aim-toggle-slider::before {
    content: ''; position: absolute;
    width: 16px; height: 16px; left: 3px; top: 3px;
    background: white; border-radius: 50%;
    transition: 0.2s;
}
.aim-toggle-switch input:checked + .aim-toggle-slider {
    background: var(--accent);
}
.aim-toggle-switch input:checked + .aim-toggle-slider::before {
    transform: translateX(20px);
}

.aim-form-row {
    display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.aim-form-row-spaced { margin-top: 12px; }
.aim-form-row label {
    font-size: var(--fs); color: var(--text);
    width: 80px; flex-shrink: 0;
}
.aim-form-row input[type="text"],
.aim-form-row input[type="password"],
.aim-form-row select {
    flex: 1; padding: 4px 8px; border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15); background: rgba(255,255,255,0.8);
    font-size: var(--fs); color: var(--text);
}
.aim-form-row input:focus, .aim-form-row select:focus {
    outline: none; border-color: var(--accent);
}
.aim-info-row {
    font-size: 0.7rem; color: var(--text-muted);
    padding-left: 92px;
}
.aim-info-row a { color: var(--accent); text-decoration: none; }
.aim-info-row a:hover { text-decoration: underline; }

.aim-settings-actions {
    display: flex; gap: 8px; margin: 16px 0 8px;
}
.btn-aim-save {
    background: var(--accent); color: white; border: none;
}
.btn-aim-save:hover { opacity: 0.9; }

.aim-settings-notice {
    background: rgba(99,102,241,0.06); border-left: 3px solid var(--accent);
    padding: 8px 12px; border-radius: 4px;
    font-size: var(--fs); color: var(--text);
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px;
}
.aim-settings-notice i { color: var(--accent); }

/* 다크모드 */
body[data-theme="dark"] .aim-settings-card {
    background: rgba(40,40,48,0.6); border-color: rgba(255,255,255,0.08);
}
body[data-theme="dark"] .aim-settings-card-header {
    background: rgba(60,60,70,0.4); border-bottom-color: rgba(255,255,255,0.06);
}
body[data-theme="dark"] .aim-form-row input[type="text"],
body[data-theme="dark"] .aim-form-row input[type="password"],
body[data-theme="dark"] .aim-form-row select {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1);
    color: var(--text);
}
body[data-theme="dark"] .aim-toggle-slider { background: rgba(255,255,255,0.15); }
.rst-popup-footer .btn-tool, .rst-popup-footer .btn-primary {
    height: 20px; line-height: 20px; padding: 0 10px; font-size: var(--fs); min-width: 56px; text-align: center; justify-content: center;
}
/* ===================================================================
 *  BOM 팝업 (bom-popup)
 * =================================================================== */
.bom-popup-overlay {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,0.05);
    backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
}
.bom-popup {
    position: absolute; top: 77px; left: 249px;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 1.5px 6px rgba(0,0,0,0.06), 0 0 1px 0 rgba(255,255,255,0.6), inset 0 0 0 0.5px rgba(255,255,255,0.3);
    width: 1241px; height: 588px; min-width: 600px; min-height: 350px;
    display: flex; flex-direction: column;
    resize: both; overflow: hidden;
    font-size: var(--fs);
}
.bom-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    height: 24px; padding: 0 16px;
    background: rgba(20,30,80,0.92); border-radius: 10px 10px 0 0;
    cursor: move;
}
.bom-popup-header span { font-size: var(--fs); font-weight: 400; color: rgba(255,255,255,0.95); }
.bom-popup-close {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.6); font-size: 1rem; padding: 0 4px;
}
.bom-popup-close:hover { color: rgba(255,255,255,0.95); }
.bom-popup-body {
    flex: 1; display: flex; overflow: hidden;
}.bom-popup-divider:hover,
.bom-popup-divider.dragging {
    background: rgba(99,102,241,0.4);
}
.bom-popup-footer {
    display: flex; align-items: center; justify-content: flex-end;
    height: 24px; padding: 0 16px; gap: 6px;
    background: rgba(230,232,245,0.7); border-radius: 0 0 10px 10px;
}
.bom-popup-footer .btn-tool {
    height: 20px; line-height: 20px; padding: 0 10px; font-size: var(--fs);
}
/* 좌측 패널 툴바 */
.bom-popup-toolbar {
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-shrink: 0;
}
.bom-popup-toolbar .btn-tool {
    height: 20px; line-height: 20px; padding: 0 8px; font-size: var(--fs);
}.bom-popup-info .bom-info-field {
    flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.bom-popup-info .bom-info-field label {
    font-size: var(--fs); color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bom-popup-info .bom-info-field input {
    font-size: var(--fs); background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: 3px; padding: 2px 6px; height: 22px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 다크모드 */
body[data-theme="dark"] .bom-popup-overlay { background: rgba(0,0,0,0.05); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
body[data-theme="dark"] .bom-popup {
    background: #1e1e26;
    border: 1px solid rgba(180,190,255,0.35);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 1.5px 6px rgba(0,0,0,0.2), 0 0 28px 4px rgba(130,150,255,0.35), 0 0 3px 0 rgba(255,255,255,0.5), inset 0 0 0 0.5px rgba(255,255,255,0.18);
}
body[data-theme="dark"] .bom-popup-header { background: rgba(65,65,78,0.92); }
body[data-theme="dark"] .bom-popup-footer { background: rgba(174,174,184,0.7); }body[data-theme="dark"] .bom-popup-divider:hover,
body[data-theme="dark"] .bom-popup-divider.dragging { background: rgba(99,102,241,0.5); }
body[data-theme="dark"] .bom-popup-info .bom-info-field input {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1);
}

/* ===================================================================
 *  KPI 그리드 버튼 (btn-kpi-reg, btn-bom)
 * =================================================================== */
/* 생산의뢰 디테일 — 요구사항 멀티라인 */
.prod-req-detail .ag-cell[col-id="requirement"] {
    align-items: flex-start !important;
    line-height: 15px !important;
    padding: 2px 4px !important;
}

/* ===================================================================
 *  Tag Button Standardization (.hlca-btn-tag)
 *  작은 태그형 버튼 — 상태 표시/액션 유도용 (월 셀 등록 버튼, BOM/생산의뢰 등)
 *  hover 시 살짝 확장(scale 1.12) + 그림자 + 흔들림(wiggle ±3deg)
 * =================================================================== */
.hlca-btn-tag {
    display: inline-block;
    color: #fff;
    padding: 0 6px;
    border-radius: 3px;
    font-size: 0.6rem;
    line-height: 16px;
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hlca-btn-tag:hover {
    transform: scale(1.12);
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    animation: hlca-btn-tag-wiggle 0.3s ease;
}
@keyframes hlca-btn-tag-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

/* 컬러 variants */
.hlca-btn-tag--success { background: #059669; }  /* 완료/수정 */
.hlca-btn-tag--primary { background: #3730a3; }  /* 기본 액션 */
.hlca-btn-tag--warning { background: #ea580c; }  /* 경고 (기간 초과 등) */
.hlca-btn-tag--danger  { background: #dc2626; }  /* 긴급/미등록 */

/* ── 기존 호환 (btn-bom, btn-prod-req) — 추후 .hlca-btn-tag로 통합 예정 ── */
.btn-bom, .btn-prod-req {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* ===================================================================
 *  롤러 모니터링 (rm-*)
 * =================================================================== */
.grid-area:has(.rm-container) {
    margin-top: 0.8rem;
}
/* ===================================================================
 *  HlcaActionBar — 화면별 작업 제어 바 (표준 filter-bar 자리 치환)
 *  표준 CRUD 툴바 대신 워크플로우 액션(작업시작/정지/완료 등)을 담는 바.
 *  panel-filter-bar 표준 스타일(보더/그림자) 상속, 좌: 드롭다운 / 우: 버튼.
 * =================================================================== */
.panel-filter-bar.hlca-action-bar {
    gap: 0.5rem;
}
.hlca-action-bar-left {
    display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0;
}
.hlca-action-bar-right {
    display: flex; align-items: center; gap: 0.35rem; flex: 1; flex-wrap: wrap;
}
/* 작업제어바 내 드롭다운은 내용(공정명 등)에 맞게 확장 — 툴바 필터 124px 고정 오버라이드 */
.panel-filter-bar.hlca-action-bar .filter-input.filter-cond.hlca-action-select {
    width: auto !important;
    min-width: 200px;
    max-width: 320px;
}
/* 버튼 폭 통일 (가장 긴 라벨 "생산지시조회/생산불량등록" 기준) */
.hlca-action-btn {
    flex-shrink: 0;
    min-width: 110px;
    justify-content: center;
}
.hlca-action-btn--primary,
.hlca-action-btn--success,
.hlca-action-btn--warning,
.hlca-action-btn--danger,
.hlca-action-btn--info {
    color: #fff;
    border-color: transparent;
}
.hlca-action-btn--primary { background: var(--accent, #6366f1); }
.hlca-action-btn--primary:hover:not(:disabled) { background: var(--accent, #6366f1); color: #fff; filter: brightness(1.1); }
.hlca-action-btn--success { background: #059669; }
.hlca-action-btn--success:hover:not(:disabled) { background: #047857; color: #fff; }
.hlca-action-btn--warning { background: #ea580c; }
.hlca-action-btn--warning:hover:not(:disabled) { background: #c2410c; color: #fff; }
.hlca-action-btn--danger { background: #dc2626; }
.hlca-action-btn--danger:hover:not(:disabled) { background: #b91c1c; color: #fff; }
.hlca-action-btn--info { background: #0891b2; }
.hlca-action-btn--info:hover:not(:disabled) { background: #0e7490; color: #fff; }
.hlca-action-btn:disabled {
    opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3);
}
.hlca-action-bar-sep {
    display: inline-block; width: 1px; height: 14px;
    background: rgba(140,145,170,0.45); margin: 0 0.25rem;
}

/* ── 다크모드: 배경과 대비되도록 버튼 색상 보강 ── */
/* variant 없는 중립 버튼: 배경 강화 + 보더 명확화 */
body[data-theme="dark"] .hlca-action-btn {
    background: rgba(90,90,100,0.7);
    border: 1px solid rgba(255,255,255,0.22);
    color: var(--text);
}
body[data-theme="dark"] .hlca-action-btn:hover:not(:disabled) {
    background: rgba(120,120,135,0.85);
    border-color: rgba(255,255,255,0.35);
    color: var(--text);
}
/* variant 버튼: 어두운 배경에서도 구분 잘 되도록 밝은 톤 + 어두운 텍스트 */
body[data-theme="dark"] .hlca-action-btn--primary {
    background: #818cf8; color: #0f172a; border-color: transparent;
}
body[data-theme="dark"] .hlca-action-btn--primary:hover:not(:disabled) {
    background: #a5b4fc; color: #0f172a; filter: none;
}
body[data-theme="dark"] .hlca-action-btn--success {
    background: #34d399; color: #0f172a; border-color: transparent;
}
body[data-theme="dark"] .hlca-action-btn--success:hover:not(:disabled) {
    background: #6ee7b7; color: #0f172a;
}
body[data-theme="dark"] .hlca-action-btn--warning {
    background: #fb923c; color: #0f172a; border-color: transparent;
}
body[data-theme="dark"] .hlca-action-btn--warning:hover:not(:disabled) {
    background: #fdba74; color: #0f172a;
}
body[data-theme="dark"] .hlca-action-btn--danger {
    background: #f87171; color: #0f172a; border-color: transparent;
}
body[data-theme="dark"] .hlca-action-btn--danger:hover:not(:disabled) {
    background: #fca5a5; color: #0f172a;
}
body[data-theme="dark"] .hlca-action-btn--info {
    background: #22d3ee; color: #0f172a; border-color: transparent;
}
body[data-theme="dark"] .hlca-action-btn--info:hover:not(:disabled) {
    background: #67e8f9; color: #0f172a;
}
body[data-theme="dark"] .hlca-action-bar-sep { background: rgba(255,255,255,0.18); }
/* SCAN wrap — 액션 영역으로서 정보 패널과 시각적으로 차별화.
   라이트: 정보 패널(#fff)보다 진한 그레이로 '깊이' / 다크: --surface(#2c2c2e)보다 밝은 솔리드로 '부양' 효과. */
.prod-result-sn-wrap.panel-filter-bar {
    background: rgba(200,205,220,0.85);
}
body[data-theme="dark"] .prod-result-sn-wrap.panel-filter-bar {
    background: #3a3a3e;
}
/* ===================================================================
 *  TENANT권한관리 (tnp-*) — 좌: 테넌트 회사 그리드 / 우: 메뉴 권한 트리
 *  이 화면 전용. .grid-area 에 .tnp-split 이 붙은 경우에만 좌우 분할로 동작한다.
 *  헤더/저장버튼은 사용자권한관리 표준 클래스(.perm-matrix-header / .perm-save-btn) 재사용.
 * =================================================================== */
.grid-area.tnp-split { display: flex; flex-direction: row; align-items: stretch; }
/* 프레임워크가 만든 그리드 컨테이너(인라인 width:100%)를 flex 아이템으로 전환 */
.grid-area.tnp-split > :not(.tnp-splitter):not(.tnp-pane) { flex: 1 1 0; min-width: 0; }

.tnp-splitter { flex: 0 0 7px; cursor: col-resize; display: flex; justify-content: center; align-items: center; }
.tnp-splitter::after {
    content: ''; width: 1px; height: 100%;
    background: var(--border); transition: background 0.15s;
}
.tnp-splitter:hover::after { background: var(--accent); }

.tnp-pane {
    flex: 0 0 430px; min-width: 260px;
    display: flex; flex-direction: column; min-height: 0;
    border: var(--glass-border); border-radius: 6px; overflow: hidden;
    background: var(--surface);
}
/* pane 헤더 밑선 = 좌측 그리드 초성검색 행 밑선(49px = 래퍼 보더 1 + 헤더 24 + 초성검색 24)
   — 화면 기준선 정렬 표준(layout-ui.md). pane 보더 1px + border-box 48px로 동일 지점 */
.tnp-pane .perm-matrix-header { height: 48px; }
.tnp-head-actions { display: flex; align-items: center; gap: 6px; }
.tnp-body { flex: 1; overflow: auto; min-height: 0; padding: 3px 0; }

.tnp-empty { padding: 0.6rem; font-size: var(--fs); color: var(--text-secondary); text-align: center; }
.tnp-empty.tnp-err { color: #ef4444; }

/* 트리 노드 */
.tnp-row {
    display: flex; align-items: center; gap: 5px;
    height: 22px; font-size: var(--fs); padding-right: 8px;
}
.tnp-row:hover { background: rgba(99,102,241,0.06); }
.tnp-chev {
    flex: 0 0 14px; text-align: center; cursor: pointer;
    color: var(--text-secondary); font-size: var(--fs); user-select: none;
}
.tnp-chev i { transition: transform 0.12s; display: inline-block; }
.tnp-node.is-collapsed > .tnp-children { display: none; }
.tnp-node.is-collapsed > .tnp-row .tnp-chev i { transform: rotate(-90deg); }

.tnp-cb { flex: 0 0 13px; width: 13px; height: 13px; cursor: pointer; accent-color: var(--accent); margin: 0; }

/* 레벨 구분은 볼드가 아닌 색상으로 (Bold Text Standardization) */
.tnp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tnp-name.tnp-lv1 { color: var(--accent); }
.tnp-name.tnp-lv2 { color: var(--text); }
.tnp-name.tnp-lv3 { color: var(--text-secondary); }
.tnp-code {
    margin-left: auto; padding-left: 8px; flex-shrink: 0;
    color: var(--text-secondary); opacity: 0.75;
}

body[data-theme="dark"] .tnp-pane { background: rgba(30,30,40,0.55); }
body[data-theme="dark"] .tnp-row:hover { background: rgba(99,102,241,0.12); }

/* ===================================================================
 *  TENANTS마스터관리 (tms-*) — 좌: 마스터 계정 그리드 / 우: 담당 회사 체크리스트
 *  이 화면 전용. .grid-area 에 .tms-split 이 붙은 경우에만 좌우 분할로 동작한다.
 *  헤더/저장버튼은 표준 클래스(.perm-matrix-header / .perm-save-btn) 재사용. (multitenancy.md §9)
 * =================================================================== */
.grid-area.tms-split { display: flex; flex-direction: row; align-items: stretch; }
/* 프레임워크가 만든 그리드 컨테이너(인라인 width:100%)를 flex 아이템으로 전환 */
.grid-area.tms-split > :not(.tms-splitter):not(.tms-pane) { flex: 1 1 0; min-width: 0; }

.tms-splitter { flex: 0 0 7px; cursor: col-resize; display: flex; justify-content: center; align-items: center; }
.tms-splitter::after {
    content: ''; width: 1px; height: 100%;
    background: var(--border); transition: background 0.15s;
}
.tms-splitter:hover::after { background: var(--accent); }

.tms-pane {
    flex: 0 0 380px; min-width: 260px;
    display: flex; flex-direction: column; min-height: 0;
    border: var(--glass-border); border-radius: 6px; overflow: hidden;
    background: var(--surface);
}
/* pane 헤더 밑선 = 좌측 그리드 초성검색 행 밑선 (수평 기준선 정렬 — 사용자 확정 2026-08-07)
   좌측: 래퍼 보더 1px + 컬럼 헤더 24 + 초성검색 24 = 49px 지점 / pane도 보더 1px라
   헤더 border-box 48px(밑보더 포함)로 동일 지점. 그리드 행 높이 표준(24px) 변경 시 함께 조정 */
.tms-pane .perm-matrix-header { height: 48px; }
.tms-head-actions { display: flex; align-items: center; gap: 6px; }
/* 헤더 버튼 폭 통일(마스터 추가/매핑 저장) — 실측 최장(마스터 추가 89.5px) 기준 여유 92px */
.tms-head-actions .perm-save-btn { min-width: 92px; }
.tms-body { flex: 1; overflow: auto; min-height: 0; padding: 3px 0; }

.tms-empty { padding: 0.6rem; font-size: var(--fs); color: var(--text-secondary); text-align: center; }
.tms-empty.tms-err { color: #ef4444; }

/* 담당 회사 카운터 (n / 5) — 초과 시 숫자만 경고색 */
.tms-counter {
    padding: 4px 10px 6px; font-size: var(--fs); color: var(--text-secondary);
    border-bottom: 1px solid var(--border); margin-bottom: 3px;
}
.tms-counter .tms-count { color: var(--accent); }
.tms-counter.tms-over .tms-count { color: #dc2626; }
.tms-counter-hint { opacity: 0.75; }

/* 회사 체크 행 */
.tms-row {
    display: flex; align-items: center; gap: 6px;
    height: 22px; font-size: var(--fs); padding: 0 10px; cursor: pointer;
}
.tms-row:hover { background: rgba(99,102,241,0.06); }
.tms-cb { flex: 0 0 13px; width: 13px; height: 13px; cursor: pointer; accent-color: var(--accent); margin: 0; }
.tms-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.tms-code {
    margin-left: auto; padding-left: 8px; flex-shrink: 0;
    color: var(--text-secondary); opacity: 0.75;
}

/* 마스터 발급 폼 (pane 본문 전환) */
.tms-form { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.tms-form-row { display: flex; align-items: center; gap: 6px; font-size: var(--fs); }
.tms-form-row label { flex: 0 0 52px; color: var(--text); }
.tms-form-row input { flex: 1; }
.tms-form-note { font-size: var(--fs); color: var(--text-secondary); }
.tms-form-actions { display: flex; gap: 6px; justify-content: flex-end; }
/* 발급 폼 인풋 = 우측사이드바 표준 인풋 시각 언어 그대로 — .form-control-sm 표준 스타일은
   .right-panel-body 스코프에만 정의되어 있어 pane 안에서는 로컬로 복제 (.pw-change-form 선례) */
.tms-form .form-control-sm {
    font-size: var(--fs); padding: 0.28rem 0.48rem;
    background: rgba(255,255,255,0.85); border: 1px solid rgba(140,145,170,0.6);
    color: var(--text); transition: border 0.2s, box-shadow 0.2s;
}
.tms-form .form-control-sm::placeholder { color: var(--text-secondary); font-weight: 400; }
.tms-form .form-control-sm:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99,102,241,0.12); outline: none; }
body[data-theme="dark"] .tms-form .form-control-sm { background: rgba(40,40,44,0.6); border-color: var(--border); }

body[data-theme="dark"] .tms-pane { background: rgba(30,30,40,0.55); }
body[data-theme="dark"] .tms-row:hover { background: rgba(99,102,241,0.12); }