/* ============================================================
   COLON MONEY ADMIN 공용 컴포넌트
   출처: postring admin.css (canonical) — ADMIN_PAGE_RULE 공통 규칙 구현체
   테마: 블랙앤화이트 (primary=black, accent=gray)
   ============================================================ */
:root {
    --primary: #111827;          /* 블랙(주 강조) */
    --primary-dark: #000000;
    --primary-light: #f3f4f6;    /* 연한 회색(호버/선택 배경) */
    --primary-border: #d1d5db;
    --secondary: #64748b;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --bg: #f1f5f9;
    --card-bg: #ffffff;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border: #e2e8f0;
    --control-border: #f0f0f0;   /* 폼 컨트롤·버튼 공통 보더(연한 회색) — 모든 인풋/셀렉트/버튼 통일 */
    --radius: 12px;
    --radius-sm: 8px;
}

/* ---------- 로딩 FOUC 방지: 향상(admin-grid.js) 전 원본 숨김 + 자리 확보 ---------- */
table[data-grid]:not(.grid-ready) { visibility: hidden; }          /* 향상 전 원본 테이블 숨김 */
[data-grid-actions] { display: none; }                              /* JS가 툴바로 이전 후 노출 */
.bg-white:has(> table[data-grid]:not(.grid-ready)),
.bg-white:has([data-grid-actions]) { position: relative; min-height: 360px; }   /* 그리드 영역 자리 확보 */
.bg-white:has(> table[data-grid]:not(.grid-ready))::after {        /* 로딩 shimmer 플레이스홀더 */
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(100deg, #eef2f7 30%, #f7fafc 50%, #eef2f7 70%);
    background-size: 200% 100%; animation: gridShimmer 1.25s linear infinite;
}
@keyframes gridShimmer { to { background-position: -200% 0; } }
/* 상세/수정 모달이 목록 위로 함께 로드될 때: 목록은 배경이므로 FOUC shimmer·자리확보 생략(모달 뒤 스켈레톤 깜빡임 방지) */
body:has([data-admin-modal]) .bg-white:has(> table[data-grid]:not(.grid-ready))::after { content: none !important; animation: none !important; }
body:has([data-admin-modal]) .bg-white:has(> table[data-grid]:not(.grid-ready)),
body:has([data-admin-modal]) .bg-white:has([data-grid-actions]) { min-height: 0 !important; }

/* ---------- 체크박스(진담) ---------- */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
    vertical-align: middle;
}

/* ---------- 검색/필터 영역 (진담 filter-bar) ---------- */
.filter-bar { display: flex; align-items: flex-end; gap: 10px 14px; flex-wrap: wrap; }
.filter-group { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 0 0 auto; }
.filter-group > label { font-size: 13px; color: var(--text-primary); font-weight: 600; margin: 0; white-space: nowrap; }
.filter-row { display: inline-flex; align-items: center; gap: 6px; }
.filter-input {
    border: 1.5px solid var(--control-border);
    border-radius: var(--radius-sm);
    padding: 0 0.6rem;
    height: 34px;                 /* 툴바/검색 컨트롤 공통 높이 */
    font-size: 13px;
    line-height: 1.4;
    outline: none;
    background-color: #fff;
    color: var(--text-primary);
    transition: border-color .15s, box-shadow .15s;
}
.filter-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(17, 24, 39, .12); }
/* 모달 폼 컨트롤(인풋/셀렉트/텍스트영역) 보더 = 짙은 회색 통일 (콤보 input 제외 — filter-input로 이미 통일) */
[data-admin-modal] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.combobox-input),
[data-admin-modal] textarea { border-color: var(--control-border); }
/* 모달 폼 컨트롤 포커스 = 검색창과 동일 통일 */
[data-admin-modal] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
[data-admin-modal] textarea:focus,
[data-admin-modal] select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(17, 24, 39, .12); outline: none; }
select.filter-input {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 13px 9px; padding-right: 30px;
}

/* ---------- 버튼 (진담 btn) ---------- */
.btn {
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; padding: 8px 16px;
    transition: all .15s; border: 1.5px solid var(--control-border); cursor: pointer;   /* 공통 보더(짙은 회색) */
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;   /* 좁은 폭에서 글자 세로 쪼개짐 방지(§2.12) */
}
/* hover = 색상반전(검흰↔흰검, 파흰↔흰파)으로 통일 — 그림자 없음 */
/* 기본 버튼 = 흰 바탕·검은 글씨. 보더는 전부 짙은 회색(--control-border) 통일. hover 시 색상반전 */
.btn-primary { background: #fff; border-color: var(--control-border); color: var(--primary); }
.btn-primary:hover { background: var(--primary); color: #fff; border-color: var(--primary); }   /* hover 반전: 흰검 → 검흰 */
.btn-light { background: #fff; border-color: var(--control-border); color: var(--text-primary); }
.btn-light:hover { background: var(--primary); color: #fff; border-color: var(--primary); }       /* 흰검 → 검흰 */
.btn-outline { background: #fff; border-color: var(--control-border); color: var(--primary); }   /* §2.3 초기화 */
.btn-outline:hover { background: var(--primary); color: #fff; border-color: var(--primary); }     /* 흰검 → 검흰 */
.btn-danger-outline { background: #fff; border-color: var(--control-border); color: var(--danger); }
.btn-danger-outline:hover { background: var(--danger); color: #fff; border-color: var(--danger); } /* 흰빨 → 빨흰 */
.btn-sm { padding: 0 14px; height: 34px; font-size: 13px; }   /* 셀렉트/툴바 컨트롤과 높이 통일 */

/* ---------- 데이터 테이블 (진담 data-table) ---------- */
/* 가로 오버플로우(컬럼 합이 넓어질 때)는 카드 안에서 스크롤 — 밖으로 안 나가게 */
.table-wrap { overflow-x: auto; }
/* §2.5 table-layout: auto — 고정폭이 텍스트 컬럼을 뭉개지 않게 내용 사이징(컬럼 리사이즈는 드래그 시 px 고정으로 동작). */
.data-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.data-table thead th { text-align: center; }   /* §450 헤더 전부 중앙정렬 */
.data-table th {
    background: #f8fafc !important; border-bottom: 2px solid var(--border) !important;
    border-right: 1px solid var(--border);   /* 컬럼 구분선(리사이즈 위치 가시화) */
    padding: 10px 14px !important; font-size: 12px !important; font-weight: 600 !important;
    color: var(--text-secondary) !important; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; position: relative;
}
.data-table td {
    padding: 11px 14px !important; border-bottom: 1px solid var(--border) !important;
    border-right: 1px solid var(--border);   /* 컬럼 구분선 */
    font-size: 13px; color: var(--text-primary); vertical-align: middle;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   /* 넘치면 ... */
}
.data-table th:last-child, .data-table td:last-child { border-right: none; }
.data-table td.seq-cell { font-size: 11px; color: #64748b; }   /* §2.10 순번=보조정보(작은 폰트+흐린 slate-500, 데이터처럼 안 읽히게) */
.data-table td .truncate, .data-table td > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 컬럼 너비 조절 핸들(임시) — 우측 경계 위 */
.col-resizer { position: absolute; top: 0; right: -1px; width: 7px; height: 100%; cursor: col-resize; user-select: none; z-index: 2; }
.col-resizer:hover { background: var(--primary); opacity: .5; }
/* 컬럼 위치 변경(임시, 드래그) 피드백 */
.data-table th.col-dragging { opacity: .5; }
.data-table th.col-dragover { box-shadow: inset 3px 0 0 0 var(--primary); }
/* 빈 상태(데이터 0건) — 고정 높이 200px. (.data-table td 의 padding !important 를 이기려 특정도↑) */
.data-table td.grid-empty-cell { height: 200px; padding: 0 !important; text-align: center; vertical-align: middle; color: var(--text-secondary); font-size: 14px; border-right: none !important; }
.data-table tbody tr:last-child td { border-bottom: none !important; }
.data-table tbody tr:hover td { background: var(--primary-light); }
.data-table tbody tr.row-clickable { cursor: pointer; }
/* 로우 hover = 색상반전(흰 배경 → 검정, 글자 흰색). 배지(bg-* 보유)는 자체 색 유지 */
.data-table tbody tr.row-clickable:hover td { background: var(--primary); color: #fff; }

/* ---------- 정렬 헤더 (다중정렬: 1개=화살표만, 2개+=순서 숫자) ---------- */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--primary) !important; }
.sort-ind { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; vertical-align: middle; }
.sort-ind .sort-ar { font-size: 10px; opacity: .3; }
th.sortable.sorted .sort-ind .sort-ar { opacity: 1; color: var(--primary); }
.sort-ind .sort-pri {
    display: none; min-width: 15px; height: 15px; line-height: 15px; text-align: center;
    font-size: 9px; font-weight: 700; color: #fff; background: var(--primary); border-radius: 9999px; padding: 0 3px;
}
.sort-ind .sort-pri:not(:empty) { display: inline-block; }   /* 번호 있을 때(2개+)만 표시 */

/* 전체건수 (진담: 세로 바 + "전체 N건") */
.grid-count { font-size: 13px; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; }
.grid-count::before { content: ""; width: 5px; height: 16px; border-radius: 2px; background: var(--primary); display: inline-block; }
.grid-count b { color: var(--primary); }

/* ---------- 페이징 (진담 pagination) ---------- */
.grid-pager-area { margin-top: 16px; }   /* 그리드 카드와 별개 하위 영역 */
.pagination-wrapper { display: flex; justify-content: center; align-items: center; gap: 6px; }
.grid-page-status { margin-left: 10px; font-size: 13px; color: var(--text-secondary); }
.page-gap { padding: 0 2px; color: var(--text-secondary); font-size: 13px; user-select: none; align-self: center; }

/* 컬럼 표시/숨김 팝오버(§2.11) — 버튼 기준 툴팁식 팝업(모달 아님) */
.col-pop { position: fixed; z-index: 250; width: 300px; max-width: calc(100vw - 16px); padding: 12px;
    background: #fff; border: 1px solid var(--control-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .16); }
.col-pop-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.col-pop-list { display: flex; flex-wrap: wrap; gap: 6px; }
.col-badge { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: all .12s;
    background: var(--primary); border: 1px solid var(--primary); color: #fff; }                 /* 활성(표시) */
.col-badge:hover { opacity: .85; }
.col-badge.off { background: #f1f5f9; border-color: var(--border); color: #94a3b8; }            /* 비활성(숨김) */
.page-btn {
    min-width: 34px; height: 34px; padding: 0 8px; border: 1.5px solid var(--control-border); border-radius: var(--radius-sm);
    background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    cursor: pointer; color: var(--text-primary); transition: all .15s;
}
.page-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }   /* 색상반전 통일 */
.page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.page-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 로딩 스켈레톤 ---------- */
@keyframes skel-shimmer { 0% { background-position: -180px 0; } 100% { background-position: calc(180px + 100%) 0; } }
.skeleton-bar {
    display: inline-block; height: 12px; border-radius: 6px; width: 100%;
    background: #e9edf2;
    background-image: linear-gradient(90deg, #e9edf2 0, #f5f7fa 60px, #e9edf2 120px);
    background-size: 180px 100%; background-repeat: no-repeat;
    animation: skel-shimmer 1.15s ease-in-out infinite;
}
.grid-skeleton td { padding: 11px 14px !important; border-bottom: 1px solid var(--border) !important; }

/* ---------- 콤보박스 (input + dropdown, 전체목록 노출) ---------- */
.combobox { position: relative; display: inline-flex; align-items: center; }
.combobox.cb-block { display: flex; width: 100%; }
.combobox.cb-block .combobox-input { flex: 1 1 auto; width: 100%; }
.combobox.cb-compact { width: 6.5rem; flex: 0 0 auto; }   /* 페이지당 개수 등 컴팩트 콤보 */
.combobox.cb-compact .combobox-input { width: 100%; }
.combobox-input {
    cursor: pointer; padding-right: 30px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 13px 9px;
}
.combobox.combobox-open .combobox-input { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(17, 24, 39, .12); outline: none; }
.combobox-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 100%;
    background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
    max-height: 280px; overflow-y: auto; z-index: 1100; padding: 4px 0;
}
.combobox.combobox-open .combobox-dropdown { display: block; }
.combobox-item { padding: 8px 12px; font-size: 14px; cursor: pointer; color: #334155; white-space: nowrap; line-height: 1.4; }
.combobox-item:hover, .combobox-item.combobox-item-active { background: var(--primary-light); }
.combobox-item.combobox-item-selected { background: rgba(17, 24, 39, .08); color: var(--primary); font-weight: 600; }
.combobox-empty { padding: 10px 12px; font-size: 13px; color: #94a3b8; text-align: center; }

/* ---------- 사이드바 접기/펼치기 (§2.8 ⑤) ---------- */
#adminSidebar { transition: margin-left .2s ease; }
body.sidebar-collapsed #adminSidebar { margin-left: -15rem; }   /* w-60 = 15rem 슬라이드 아웃 */
/* 가장자리 핸들: 펼침=사이드바 경계(좌측만 둥글게, 어두운 탭+흰 화살표) / 접힘=화면 왼쪽 끝(우측만 둥글게, 흰 배경+검은 화살표) */
#sidebarHandle { left: calc(15rem - 24px); border-radius: 8px 0 0 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    background: #1e293b !important; color: #ffffff !important; transition: left .2s ease, background .2s ease, color .2s ease; }
#sidebarHandle svg { display: block; transition: transform .2s ease; }
body.sidebar-collapsed #sidebarHandle { left: 0; border-radius: 0 8px 8px 0; background: #ffffff !important; color: #111827 !important; border: 1px solid #e2e8f0; }
body.sidebar-collapsed #sidebarHandle svg { transform: scaleX(-1); }   /* 닫힘 = 오른쪽(›) 화살표 */

/* 사이드바 메뉴 스크롤바: 얇고 은은하게(다크 배경) */
#adminSidebar nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; padding-bottom: 48px; }   /* §2.8⑦ 하단 여유 — 맨 아래 메뉴/그룹 펼침 공간 */
#adminSidebar nav::-webkit-scrollbar { width: 6px; }
#adminSidebar nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }
#adminSidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .32); }
#adminSidebar nav::-webkit-scrollbar-track { background: transparent; }
/* 본문 스크롤바: 얇게 */
main { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .35) transparent; }
main::-webkit-scrollbar { width: 8px; }
main::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .3); border-radius: 4px; }
main::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .5); }
main::-webkit-scrollbar-track { background: transparent; }

/* ---------- 모달 ---------- */
body.modal-open { overflow: hidden; }

/* ============================================================
   §2.12 반응형 / 모바일 (≤768px) — 공통 CSS가 자동 처리(화면별 마크업 X)
   ============================================================ */
#sidebarBackdrop { display: none; }
#sidebarFab { display: none; }   /* 데스크탑은 가장자리 핸들 사용, FAB 숨김 */

@media (max-width: 768px) {
    /* ----- 그리드 = 카드형(행=카드, 라벨 좌 / 값 우) ----- */
    /* 그리드 카드 래퍼는 투명하게 → 카드 사이 간격에 흰 배경 안 보이고 페이지 배경 노출 */
    .bg-white:has(> .table-wrap) { background: transparent !important; border: none !important; border-radius: 0 !important; overflow: visible !important; }
    .data-table, .data-table tbody, .data-table tr { display: block; width: 100%; }
    .data-table thead { display: none; }
    .data-table tbody tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; }
    .data-table td {
        display: flex; justify-content: flex-end; align-items: center; gap: 6px;     /* 값(들)은 우측에 모음 */
        width: auto !important; max-width: none;
        text-align: right !important;                                  /* 값 우측(컬럼 inline align 덮기) */
        white-space: normal; overflow: visible; text-overflow: clip;
        border: none; border-bottom: 1px solid var(--border); padding: 9px 14px;
    }
    .data-table td:last-child { border-bottom: none; }
    .data-table td::before {
        content: attr(data-label); flex: 0 0 auto; margin-right: auto;             /* 라벨은 좌측으로 밀고 값은 우측 그룹 */
        font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: left; white-space: nowrap;
    }
    .data-table td:empty { display: none; }                            /* 값 없는 셀은 카드에서 숨김 */
    .data-table td:has(img) { justify-content: flex-end; }
    .data-table td.grid-empty-cell { display: flex !important; align-items: center; justify-content: center; height: 100px; min-height: 100px; text-align: center !important; }   /* 빈상태 모바일=100px·세로중앙 */
    .data-table td.grid-empty-cell::before { content: none; }
    .data-table .col-resizer { display: none; }
    .table-wrap { overflow-x: visible; }
    .data-table tbody tr.row-clickable:hover td { background: transparent; color: inherit; }   /* 카드에선 로우 반전 완화 */

    /* ----- 검색영역 세로화 ----- */
    .admin-search-card { flex-direction: column; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-group { width: 100%; }
    .filter-row { width: 100% !important; }                            /* 검색유형(7rem 고정)+검색값(흡수) 한 줄 유지 */
    .admin-search-actions { flex-direction: row !important; align-self: auto; }   /* 초기화/조회 가로 한 줄(둘 다 flex:1) */

    /* ----- 사이드바 = 오프캔버스 드로어 ----- */
    #adminSidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; z-index: 60; margin-left: 0 !important; transform: translateX(0); transition: transform .22s ease; }
    body.sidebar-collapsed #adminSidebar { transform: translateX(-100%); }
    #sidebarBackdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    body:not(.sidebar-collapsed) #sidebarBackdrop { opacity: 1; pointer-events: auto; }

    /* 모바일: 가장자리 핸들 대신 우하단 햄버거 FAB */
    #sidebarHandle { display: none; }
    #sidebarFab {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: 16px; bottom: 16px; z-index: 65;
        width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
        background: #111827; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    }
    #sidebarFab:active { transform: scale(.94); }
}

/* ---------- 사이드바 메뉴 계층 (§2.8 ⑦: 0뎁스 그룹 / 1뎁스 리프) ---------- */
.nav-link, .nav-group-head { display: flex; align-items: center; gap: 6px; width: 100%; font-size: 14px; color: #cbd5e1; line-height: 1.2; text-align: left; }
.nav-group-head { padding: 10px 16px; }                  /* 1뎁스 그룹: 라벨 16px (꺽쇠 우측) */
.nav-top { padding: 10px 16px; }                          /* 1뎁스 독립 리프(대시보드): 그룹헤더와 동일 16px (꺽쇠 우측 이동) */
.nav-leaf { padding: 9px 16px 9px 36px; }                /* 2뎁스 리프: 1뎁스(16) + 20 들여쓰기 */
.nav-link:hover, .nav-group-head:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-link.is-active { background: #1e293b; color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 0 #10b981; }
.nav-link.is-active .nav-label { color: #fff; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 말줄임 */
/* 꺽쇠 = 행 오른쪽 끝(ADMIN_PAGE_RULE §2.8⑦) */
.nav-chevron { order: 9; margin-left: auto; width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s; color: #64748b; }
.nav-mini-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: #94a3b8; }
.nav-mini-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-mini-btn svg { width: 16px; height: 16px; }
.nav-group.is-open > .nav-group-head .nav-chevron { transform: rotate(90deg); }
.nav-group-body { display: none; }
.nav-group.is-open > .nav-group-body { display: block; }
/* 커스텀 툴팁 (네이티브 title 금지, 지연 0) */
.nav-tooltip { position: fixed; z-index: 200; transform: translateY(-50%); background: #fff; color: var(--primary); border: 1px solid var(--primary); font-size: 12px;
    padding: 4px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .07s; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.nav-tooltip.show { opacity: 1; }
/* §2.5 그리드 셀 말줄임 커스텀 툴팁 (커서 추종, 긴 내용은 줄바꿈) */
.admin-celltip { position: fixed; z-index: 200; transform: translateY(-50%); background: #fff; color: var(--primary); border: 1px solid var(--primary); font-size: 12px;
    padding: 5px 9px; border-radius: 6px; max-width: 60vw; white-space: normal; word-break: break-word; line-height: 1.4;
    pointer-events: none; opacity: 0; transition: opacity .07s; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.admin-celltip.show { opacity: 1; }
/* §전역 커스텀 툴팁(네이티브 title 대체, 커서 추종) — 버튼/로고/드래그핸들 등 */
.admin-tip { position: fixed; z-index: 250; transform: translateY(-50%); background: #fff; color: var(--primary); border: 1px solid var(--primary); font-size: 12px;
    padding: 4px 9px; border-radius: 6px; max-width: 50vw; white-space: nowrap; pointer-events: none; opacity: 0;
    transition: opacity .07s; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.admin-tip.show { opacity: 1; }

/* ============================================================
   colon-money 추가분 — 공통 컴포넌트(§1.6 atom/molecule) 확장
   화면 JTE 에 인라인 <style> 을 두지 않기 위해 전부 여기에 둔다.
   ============================================================ */

/* ---------- 기간(부터~까지) 필터 (admin-grid.js data-range) ---------- */
.filter-dash { color: var(--text-secondary); font-size: 12px; padding: 0 2px; user-select: none; }
.filter-row > input[type="month"], .filter-row > input[type="date"] { width: 9.5rem; }

/* ---------- 그리드 합계행 (admin-grid.js data-sum) ---------- */
.data-table tfoot .grid-foot-row td {
    background: #f8fafc !important; border-top: 2px solid var(--border) !important; border-bottom: none !important;
    font-size: 13px; font-weight: 700; color: var(--primary); text-align: right; white-space: nowrap;
}
.data-table tfoot .grid-foot-row td.foot-label { text-align: center; font-size: 11px; color: var(--text-secondary); }
.data-table tbody tr:last-child td { border-bottom: 1px solid var(--border) !important; }   /* 합계행이 붙으므로 마지막 행 선 유지 */

/* ---------- 콤보 자유입력(creatable) 항목 ---------- */
.combobox-item-create { color: var(--primary); font-weight: 600; border-top: 1px solid var(--border); }

/* ---------- 폼 필드 (molecule: 라벨 + 컨트롤) — 모달 폼 공통 ---------- */
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .col-2 { grid-column: span 2; }
.form-grid .col-full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* footgun(§2.4): 콤보를 <label> 안에 넣으면 항목 클릭이 label 기본동작으로 드롭다운을 다시 연다 → 라벨은 형제 span 으로 */
.field-label { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.field-label .req { color: var(--danger); margin-left: 2px; }
.field .filter-input, .field textarea { width: 100%; }
.field textarea { padding: 8px 10px; height: auto; min-height: 72px; resize: vertical; font-family: inherit; }
.field-hint { font-size: 11px; color: var(--text-secondary); }
/* 자동계산 결과 칸 — 읽기전용임을 색으로 알린다(수정하려면 직접 입력 가능) */
.field .calc-out { background: #f8fafc; font-weight: 600; }
.form-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13px; padding: 9px 12px; border-radius: 8px; }
.form-section { font-size: 12px; font-weight: 700; color: var(--text-secondary); letter-spacing: .02em; margin: 4px 0 -4px; }

@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .col-2, .form-grid .col-full { grid-column: auto; }
}

/* ---------- 대시보드 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: block; transition: all .15s; }
a.stat-card:hover { background: var(--primary); border-color: var(--primary); }
a.stat-card:hover .stat-label, a.stat-card:hover .stat-value, a.stat-card:hover .stat-sub { color: #fff; }
.stat-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.stat-label::before { content: ""; width: 4px; height: 13px; border-radius: 2px; background: var(--primary); }
.stat-value { font-size: 26px; font-weight: 800; color: var(--primary); line-height: 1.25; margin-top: 8px; }
.stat-value .unit { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-left: 3px; }
.stat-sub { font-size: 11px; color: var(--text-secondary); margin-top: 3px; }
.panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.panel-head { padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; }
.panel-head::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--primary); }
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table th { background: #f8fafc; font-size: 11px; font-weight: 600; color: var(--text-secondary); padding: 8px 14px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mini-table td { font-size: 12.5px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-primary); white-space: nowrap; }
.mini-table tr:last-child td { border-bottom: none; }
.mini-table tbody tr:hover td { background: var(--primary-light); }
/* 숫자는 자릿수가 세로로 맞아야 대소가 눈에 들어온다(tabular-nums) + 본문보다 크고 진하게 */
.mini-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mini-table td.amt { font-size: 14.5px; font-weight: 700; color: var(--primary); letter-spacing: -.01em; }
.mini-table td.amt .cur { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); margin-left: 2px; }
.mini-table td.cnt { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.mini-table td.cnt .unit { font-size: 10.5px; font-weight: 500; color: var(--text-secondary); margin-left: 1px; }
.mini-table td.ym { font-size: 12.5px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mini-table td.amt.zero { color: var(--text-secondary); font-weight: 500; }   /* 0 은 눈에 덜 걸리게 */
.mini-empty { padding: 26px 14px; text-align: center; color: var(--text-secondary); font-size: 13px; }

/* ---------- 상태 배지 ---------- */
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.badge-done { background: #111827; color: #fff; }
.badge-wait { background: #f1f5f9; color: #64748b; }
.badge-mid { background: #e2e8f0; color: #1e293b; }

/* ---------- 로그인 ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: #0f172a; position: relative; }
.login-card { width: 100%; max-width: 360px; background: #fff; border-radius: 16px; padding: 34px 30px 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.login-logo { font-size: 21px; font-weight: 800; color: #0f172a; letter-spacing: -.02em; text-align: center; }
.login-logo span { color: #64748b; font-weight: 700; }
.login-form { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.login-form .filter-input { height: 44px; font-size: 14px; }
.login-form .btn { height: 44px; justify-content: center; font-size: 14px; }
.login-error { font-size: 12.5px; color: var(--danger); font-weight: 600; text-align: center; }
.login-version { position: fixed; left: 16px; bottom: 12px; font-size: 11px; color: rgba(255, 255, 255, .45); }

/* ---------- 그리드 인라인 수정 (ADMIN_PAGE_RULE §2.15) ---------- */
/* 편집 가능한 셀임을 알린다 — 점선 밑줄(항시) + hover 시 연필. 로우 hover 반전 위에서도 보이게 */
.data-table td.cell-editable { cursor: text; position: relative; }
.data-table td.cell-editable::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 0;
    border-bottom: 1px dashed rgba(100, 116, 139, .55);
}
.data-table tbody tr.row-clickable:hover td.cell-editable::after { border-bottom-color: rgba(255, 255, 255, .6); }
.data-table td.cell-editable:hover { background: #fff !important; color: var(--text-primary) !important; box-shadow: inset 0 0 0 2px var(--primary); }
.data-table td.cell-editable:hover::after { border-bottom-color: transparent; }
.data-table td.cell-editing { padding: 4px 6px !important; overflow: visible; background: #fff !important; box-shadow: inset 0 0 0 2px var(--primary); }
.data-table td.cell-editing::after { content: none; }
.data-table td.cell-saving { color: var(--text-secondary); font-size: 12px; }
.data-table td.cell-saved { animation: cellSaved 0.9s ease-out; }
@keyframes cellSaved { 0% { background: #dcfce7; } 100% { background: transparent; } }
/* 셀 안에 들어가는 편집기 — 셀 폭을 넘지 않게 */
.data-table td .cell-editor { height: 30px; font-size: 13px; width: 100%; min-width: 0; }
.data-table td .combobox { width: 100%; }
.data-table td .combobox-dropdown { min-width: 9rem; }
/* 셀 편집 중에는 로우 hover 반전이 글자를 삼키지 않게 */
.data-table tbody tr.row-clickable:hover td.cell-editing,
.data-table tbody tr.row-clickable:hover td.cell-editing * { color: var(--text-primary); }

@media (max-width: 768px) {
    /* 카드 모드에선 값이 우측정렬이라 점선을 값 쪽에만 짧게 */
    .data-table td.cell-editable::after { left: auto; width: 60%; }
    .data-table td.cell-editing { display: flex; }
    .data-table td .cell-editor { max-width: 60%; }
}