/* ════════════════════════════════════════════════════
   HSC ERP — 공통 컴포넌트
═══════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--font-base-size);
  line-height: var(--line-height);
  background: var(--bg-base);
  color: var(--text-primary);
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }

/* number input spinner 제거 (위/아래 화살표) — 오타/오류 방지 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

/* ── 레이아웃 ── */
.app-wrapper { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-base); }
.topnav {
  display: flex; align-items: center; height: 48px;
  padding: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-light);
  gap: 0;
  position: sticky; top: 0; z-index: 50;
}
.brand {
  font-weight: 700; color: var(--brand); letter-spacing: 0.5px; font-size: 16px;
  width: 264px;                                   /* 사이드바 폭과 일치 (2026-05-25, 옵션 B — 보더 없음) */
  padding: 0 var(--space-4);
  height: 48px;
  display: flex; align-items: center;
  box-sizing: border-box;
}
.module-nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; padding-left: var(--space-3); }

/* 홈 페이지(사이드바 없음) — 브랜드 fix 풀고 기존 padding 복원 */
.app-wrapper:has(.main-full) .topnav { padding: 0 var(--space-4); gap: var(--space-4); }
.app-wrapper:has(.main-full) .brand {
  width: auto; border-right: none; padding: 0;
}
.app-wrapper:has(.main-full) .module-nav { padding-left: 0; }
.module-nav a {
  padding: 0 var(--space-3); height: 48px;
  display: inline-flex; align-items: center;
  color: var(--text-primary); border-radius: 0;
  font-weight: 600; white-space: nowrap; font-size: 14px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.module-nav a:hover { background: var(--bg-surface-2); }
.module-nav a.active {
  color: var(--brand); font-weight: 700;
  background: var(--brand-bg);
  border-bottom: 3px solid transparent;
}

/* ── 좌측 사이드바 ── */
.body-grid { display: grid; grid-template-columns: 264px 1fr; flex: 1; min-height: 0; }
.body-grid-full { grid-template-columns: 1fr; }  /* 홈(사이드바 없음) — main이 full width */
.sidebar {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-light);
  padding: var(--space-2) 0;
  overflow-y: auto;
  height: calc(100vh - 48px); position: sticky; top: 48px;
}
.sidebar-search { padding: 0 var(--space-2) var(--space-2); }
.cmdk-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border: 1px solid var(--border-light); border-radius: var(--radius);
  background: var(--bg-base); color: var(--text-muted); font-size:13px; cursor: pointer;
}
.cmdk-trigger:hover { background: var(--bg-surface-2); }
.kbd { font-family: var(--font-mono); font-size:13px; padding: 1px 4px;
       border: 1px solid var(--border-light); border-radius: 2px; color: var(--text-muted); }

.sidebar-section { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-light); }
.sidebar-section:last-child { border-bottom: none; }
.sidebar-section-title {
  padding: 6px var(--space-3); font-size: 13px; font-weight: 700;
  color: var(--brand); text-transform: none; letter-spacing: 0.3px;
}
.sidebar-cat { margin-bottom: 8px; }
.sidebar-cat-title {
  display: flex; align-items: center; gap: 6px;
  padding: 8px var(--space-3) 4px; font-size:13px;
  color: var(--text-muted); font-weight: 600;
  cursor: pointer; user-select: none;
}
.sidebar-cat-title:hover { color: var(--text-primary); }
.cat-arrow {
  display: inline-block;
  font-size:13px;
  transition: transform 0.15s ease;
  color: var(--text-muted);
  width: 9px;
}
.sidebar-cat:not(.collapsed) .cat-arrow { transform: rotate(90deg); }
.sidebar-cat.collapsed .sidebar-menu-row { display: none; }
.sidebar-menu-row {
  display: flex; align-items: center; padding: 0 4px 0 var(--space-3);
  border-radius: var(--radius); position: relative;
}
.sidebar-menu-row:hover { background: var(--bg-surface-2); }
.sidebar-menu-row.active {
  background: var(--brand-bg);
}
.sidebar-menu-row.active .menu-name { color: var(--brand); font-weight: 600; }
.sidebar-menu-link {
  flex: 1; display: flex; align-items: center; gap: 6px;
  padding: 5px 0; font-size: 13px; color: var(--text-primary);
}
.sidebar-menu-link.disabled { color: var(--text-muted); cursor: not-allowed; }
.menu-code { font-family: var(--font-mono); font-size:13px; color: var(--text-muted); min-width: 30px; }
.menu-name { flex: 1; }
.menu-stub { font-size:13px; padding: 1px 4px; background: var(--bg-surface-2);
             border-radius: 2px; color: var(--text-muted); }
.open-new, .fav-toggle {
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  font-size:13px; color: var(--text-muted); opacity: 0; transition: opacity 0.1s;
  cursor: pointer; background: none; border: none;
}
.sidebar-menu-row:hover .open-new,
.sidebar-menu-row:hover .fav-toggle { opacity: 1; }
.fav-toggle.on { color: var(--brand); opacity: 1; }
.fav-toggle:hover, .open-new:hover { color: var(--brand); }

.main { flex: 1; padding: var(--space-6) var(--space-8); min-width: 0; }
.main-full { max-width: 1400px; width: 100%; margin: 0 auto; }
/* 큰 테이블의 가로 스크롤은 카드 단위에서 처리 (main에 overflow 걸면 sticky 깨짐) */
.table-card { overflow-x: auto; }

/* ── Ctrl+K 명령 팔레트 ── */
.cmdk-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100;
}
.cmdk-backdrop.open { display: block; }
.cmdk-panel {
  display: none; position: fixed; top: 12vh; left: 50%; transform: translateX(-50%);
  width: 560px; max-width: 90vw; max-height: 70vh;
  background: var(--bg-surface); border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  z-index: 101; overflow: hidden;
  flex-direction: column;
}
.cmdk-panel.open { display: flex; }
.cmdk-input {
  width: 100%; padding: var(--space-4); font-size: 16px;
  border: none; border-bottom: 1px solid var(--border-light);
  background: transparent; color: var(--text-primary); outline: none;
}
.cmdk-results { overflow-y: auto; max-height: 50vh; }
.cmdk-row { padding: var(--space-2) var(--space-4); cursor: pointer; border-bottom: 1px solid var(--border-light); }
.cmdk-row:last-child { border-bottom: none; }
.cmdk-row:hover, .cmdk-row.active { background: var(--brand-bg); }
.cmdk-meta { font-size:13px; color: var(--text-muted); }
.cmdk-name { font-size: 13px; color: var(--text-primary); }
.cmdk-code { font-family: var(--font-mono); font-size:13px; color: var(--text-muted); margin-right: 4px; }
.cmdk-footer { padding: 6px var(--space-4); font-size:13px; color: var(--text-muted); border-top: 1px solid var(--border-light); }
.user-area { display: flex; align-items: center; gap: var(--space-3); }
.theme-toggle {
  padding: 4px 10px; border: 1px solid var(--border-light);
  border-radius: var(--radius); color: var(--text-secondary);
  font-size:13px;
}
.theme-toggle:hover { background: var(--bg-surface-2); }

/* ── 카드 ── */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: var(--space-4);
}

/* ── 버튼 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 var(--space-4);
  font-weight: 600; border-radius: var(--radius);
  border: 1px solid var(--border-light);
  background: var(--bg-surface); color: var(--text-primary);
}
.btn:hover { background: var(--bg-surface-2); border-color: var(--border-medium); }
.btn-primary {
  background: var(--brand); color: #FFFFFF;
  border-color: rgba(0,0,0,0.25);
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.btn-primary:hover { background: var(--brand-hover); }

/* ── 입력 ── */
.input, .select {
  height: 36px; padding: 0 var(--space-3);
  background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border-light); border-radius: var(--radius);
  font-size: 14px;
}
.input:focus, .select:focus { outline: 1px solid var(--brand); outline-offset: -1px; }

/* ── 로그인 화면 ── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg-base);
}
.login-card {
  width: 360px; padding: var(--space-8);
  background: var(--bg-surface); border-radius: var(--radius-lg);
}
.login-card h1 { font-size: 20px; margin-bottom: var(--space-6); color: var(--brand); }
.login-card .field { margin-bottom: var(--space-4); }
.login-card label {
  display: block; font-size:13px; color: var(--text-muted);
  margin-bottom: var(--space-1); font-weight: 500;
}
.login-card .input { width: 100%; }
.login-card .btn { width: 100%; }
.login-card .error {
  margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3);
  background: rgba(177,74,74,0.10); color: var(--danger);
  border-radius: var(--radius); font-size: 13px;
}

/* ── 페이지 헤더 ── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6);
}
.page-title { font-size: 20px; font-weight: 700; color: var(--text-primary); }

/* ── 필터바 ── */
.filter-bar {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-4); flex-wrap: wrap;
}
.filter-bar .input,
.filter-bar .select { height: 32px; font-size: 13px; }
.filter-bar .input[name="q"] { min-width: 220px; }

/* ── 테이블 ── */
.table-card {
  padding: 0;
  /* 검색결과 테이블만 스크롤 — 헤더/KPI/필터바는 항상 보임 */
  max-height: 65vh;
  overflow: auto;   /* x/y 모두 허용 */
}
/* thead sticky — 스크롤해도 컬럼명 항상 보임 */
.table-card .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-surface-2);
}
/* table-toolbar (페이지네이션) — 하단 sticky (전자소송 패턴) */
.table-card > .table-toolbar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  border-top: 1px solid var(--border-light);
  border-bottom: none;
}
.data-table {
  width: 100%; border-collapse: collapse;
  font-size: 15px;  /* 14 → 15 (list 가독성 향상, 2026-05-22) */
}
/* 모달 안 grid (등록 모달 등)는 컴팩트 유지 — 컬럼 짤림 방지 */
.modal .data-table,
.modal-card .data-table,
.modal-panel .data-table,
.modal-backdrop .data-table {
  font-size:13px;
}
.data-table thead th {
  background: var(--bg-base);
  color: var(--text-secondary); font-weight: 600;
  text-align: left; padding: 5px 8px;
  border-bottom: 1px solid var(--border-medium);
  white-space: nowrap;
}
/* 컬럼 폭 드래그 핸들 (table_resize.js, 2026-05-28) — hover 시 우측 경계 강조 */
.data-table thead th .col-resize-handle:hover {
  border-right: 2px solid var(--brand);
  background: rgba(0,0,0,0.04);
}
.data-table thead th.rotate {
  vertical-align: middle;
  padding: var(--space-2) 4px;
  min-width: 76px; max-width: 100px;
  text-align: center;
}
.data-table thead th.rotate > div {
  font-size:13px; line-height: 1.35;
  white-space: normal; word-break: keep-all;
}
.data-table thead th.rotate strong {
  display: block; color: var(--text-primary); font-weight: 600;
}
.data-table tbody tr { border-top: 1px solid var(--border-light); }
.data-table tbody tr:first-child { border-top: none; }
/* 짝수 행 zebra — 모든 라이트 테마는 미세 어둠, 다크는 미세 밝음 */
.data-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.022); }
[data-theme="dark-gray"] .data-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.022); }
/* 호버 / 선택 / 삭제 — zebra보다 우선 */
.data-table tbody tr:hover { background: var(--bg-surface-2); }
.data-table tbody tr.row-deleted { opacity: 0.5; }
.data-table td { padding: 4px 8px; vertical-align: middle; }
/* 모달 안 grid는 더 컴팩트 (입고/사급 등록 모달용) */
.modal .data-table td,
.modal-card .data-table td,
.modal-panel .data-table td,
.modal-backdrop .data-table td {
  padding: 2px 6px;
}
/* 2026-05-28 동현 — 코드/품번 글자 크게 + 두 줄 방지 (전 화면 공통)
   기존 13.5px(일반 셀 15px보다 작음) → 15px / nowrap 강제로 줄바꿈 차단.
   좁은 컬럼은 table_resize.js 핸들로 늘릴 수 있음. */
.data-table td.mono { font-family: var(--font-mono); font-size: 15px; white-space: nowrap; }
/* 테이블 안 <code> 태그(사번/품번 등)도 동일 — 일반 셀 크기 + nowrap */
.data-table td code {
  font-family: var(--font-mono);
  font-size: 15px;
  white-space: nowrap;
  background: none;
  padding: 0;
}
/* 모달 안의 mono/code는 컴팩트 유지(폰트 13px) — 단 줄바꿈은 동일하게 차단 */
.modal .data-table td.mono,
.modal-card .data-table td.mono,
.modal-panel .data-table td.mono,
.modal-backdrop .data-table td.mono,
.modal .data-table td code,
.modal-card .data-table td code,
.modal-panel .data-table td code,
.modal-backdrop .data-table td code { font-size:13px; white-space: nowrap; }
.data-table .empty-row { text-align: center; padding: var(--space-8); color: var(--text-muted); }

/* ── 업체 그룹화 list (2026-05-22 사용자 결정: 단순화) ──
   sticky 제거. 모든 색 강조 제거. 일반 테이블 선만 사용.
   rowspan만으로 업체/전표 묶음 표시. */
.grouped-list .data-table tbody td:where(.gp-partner-cell, .gp-shipment-cell) {
  color: var(--text-primary);
  font-weight: 700;
  font-size:13px;
  vertical-align: top;
  padding-top: 8px;
  padding-left: 10px;
}
.grouped-list .data-table tbody tr.gp-subtotal td {
  font-weight: 700; padding: 6px 8px;
}
.grouped-list .data-table tbody tr.gp-grand-total td {
  font-weight: 700; padding: 8px; font-size: 14px;
}

/* ── master row (중분류 단계) 배경색 짙게 (2026-05-23 사용자 요청) ──
   자재 4-1 receipt-master-row, 다른 화면 group-header-row 등 공통
   !important — zebra/hover 다른 tr nth-child 룰 충돌 방지 */
.data-table tbody tr.receipt-master-row,
.data-table tbody tr.group-header-row {
  background: #d9d9d9 !important;  /* 라이트: 명시 회색 (0.15 정도 톤) */
}
.data-table tbody tr.receipt-master-row > td,
.data-table tbody tr.group-header-row > td {
  background: #d9d9d9 !important;
  font-weight: 600;
}
.data-table tbody tr.receipt-master-row:hover,
.data-table tbody tr.receipt-master-row:hover > td,
.data-table tbody tr.group-header-row:hover,
.data-table tbody tr.group-header-row:hover > td {
  background: #cccccc !important;  /* hover 살짝 더 짙게 */
}
[data-theme^="dark"] .data-table tbody tr.receipt-master-row,
[data-theme^="dark"] .data-table tbody tr.receipt-master-row > td,
[data-theme^="dark"] .data-table tbody tr.group-header-row,
[data-theme^="dark"] .data-table tbody tr.group-header-row > td {
  background: #3a3631 !important;  /* 다크: 명시 짙은 회색 */
}
.data-table tbody tr.group-header-row > td {
  font-size: 14px;
  padding: 8px 10px;
  border-top: 2px solid var(--border-medium);
  color: var(--text-primary);
}
.text-muted { color: var(--text-muted); }

/* ── 페이지네이션 (구버전 풀 블록) ── */
.pagination {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-3);
  border-top: 1px solid var(--border-medium);
}
.pagination-info { color: var(--text-muted); font-size:13px; }
.pagination-controls { display: flex; gap: var(--space-1); }

/* ── 페이지네이션 인라인 (필터바 우측) ── */
.pagination-inline {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%;   /* 전체폭 사용 (좌/가운데/우 분할) */
  justify-content: space-between;
}
.pagination-inline .pagination-info {
  font-size:13px; color: var(--text-muted);
  flex: 0 0 auto;
}
.pagination-inline .pagination-center {
  display: flex; align-items: center; gap: 4px;
  flex: 1 1 auto;
  justify-content: center;   /* 화살표+번호 가운데 정렬 */
}
.pagination-inline .pagination-right {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
}
.pagination-inline .btn-sm { min-width: 28px; padding: 0 6px; }

/* ── 버튼 사이즈/변형 ── */
.btn-sm { height: 28px; padding: 0 var(--space-2); font-size:13px; }
.btn-disabled {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 var(--space-2); font-size:13px;
  color: var(--text-muted); border: 1px solid var(--border-light);
  border-radius: var(--radius); background: transparent; cursor: not-allowed;
}
.btn-danger {
  border-color: rgba(177,74,74,0.3);
  color: var(--danger);
}
.btn-danger:hover { background: rgba(177,74,74,0.10); }

/* ── 배지 (미니멀 — 외곽선 스타일) ── */
.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius);
  font-size:13px; font-weight: 600;
  font-family: var(--font-mono); letter-spacing: 0.3px;
}
.badge-active    { background: rgba(95,138,92,0.15); color: var(--success); border: 1px solid rgba(95,138,92,0.3); }
.badge-suspended { background: rgba(197,142,42,0.15); color: var(--warning); border: 1px solid rgba(197,142,42,0.3); }
.badge-locked    { background: rgba(177,74,74,0.15); color: var(--danger); border: 1px solid rgba(177,74,74,0.3); }
.badge-closed    { background: var(--bg-surface-2); color: var(--text-muted); border: 1px solid var(--border-light); }
.badge-deleted   { background: var(--bg-surface-2); color: var(--text-muted); border: 1px solid var(--border-light); }

/* ── 다크 모드 톤 조정 (양 스타일 공통 + 컬러 모드 톤다운) ── */
/* 1. 다크: 네비게이션 글자 더 환하게 (양 스타일 공통) */
[data-theme^="dark"] .module-nav a       { color: #F2EDD9; }
[data-theme^="dark"] .module-nav a:hover { color: #FFFAEA; }
[data-theme^="dark"] .module-nav a.active { color: #E0B248; }
[data-theme^="dark"] .brand { color: #E0B248; }
[data-theme^="dark"] .user-area a,
[data-theme^="dark"] .user-area span     { color: #BDB6A1 !important; }
[data-theme^="dark"] .theme-toggle       { color: #D8D2BD; }

/* 다크 사이드바: 글자 더 환하게 (어두운 배경 위 가독성) */
[data-theme^="dark"] .sidebar-section-title { color: #E0B248; }
[data-theme^="dark"] .sidebar-cat-title     { color: #C2BBA4; font-weight: 700; }
[data-theme^="dark"] .sidebar-menu-link     { color: #F2EEDC; }
[data-theme^="dark"] .sidebar-menu-link.disabled { color: #807A6B; }
[data-theme^="dark"] .menu-code             { color: #B8B09A; }
[data-theme^="dark"] .menu-stub             { background: rgba(255,255,255,0.05); color: #9A9483; }
[data-theme^="dark"] .cmdk-trigger {
  color: #C2BBA4; background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
[data-theme^="dark"] .cmdk-trigger:hover { background: rgba(255,255,255,0.08); color: #F2EEDC; }
[data-theme^="dark"] .kbd {
  color: #C2BBA4; border-color: rgba(255,255,255,0.15);
}
[data-theme^="dark"] .sidebar-menu-row.active .menu-name { color: #E0B248; }
[data-theme^="dark"] .sidebar-menu-row.active .menu-code { color: #E0B248; }
[data-theme^="dark"] .fav-toggle.on { color: #E0B248; }

/* 2. 다크 + 컬러(B) 모드: 채도 톤다운 (밝은 단색 → 부드러운 반투명) */
[data-theme^="dark"] .badge-active    { background: rgba(111,163,107,0.82); }
[data-theme^="dark"] .badge-suspended { background: rgba(208,161,58,0.78); }
[data-theme^="dark"] .badge-locked    { background: rgba(194,91,91,0.82); }
[data-theme^="dark"] .badge-closed    { background: rgba(140,135,120,0.55); }
[data-theme^="dark"] .badge-deleted   { background: rgba(120,116,104,0.55); opacity: 1; }
[data-theme^="dark"] .badge-role      { background: rgba(201,154,56,0.72); }

/* 3. 다크 + 컬러(B): 활성/선택 막대도 톤다운 */
[data-theme^="dark"] .md-list tbody tr.selected {
  background: rgba(201,154,56,0.08);
  box-shadow: inset 3px 0 0 rgba(201,154,56,0.75);
}
[data-theme^="dark"] .sidebar-menu-row.active {
  background: rgba(201,154,56,0.08);
  box-shadow: inset 3px 0 0 rgba(201,154,56,0.75);
}
[data-theme^="dark"] .kpi-card:hover {
  border-left-color: rgba(201,154,56,0.6);
}
[data-theme^="dark"] .module-nav a.active {
  border-bottom-color: rgba(224,178,72,0.85);
}
[data-theme^="dark"] .btn-primary:hover {
  box-shadow: 0 2px 6px rgba(201,154,56,0.25);
}

/* A 미니멀: 활성 표시 부드럽게 */
[data-style="minimal"] .module-nav a.active {
  border-bottom: none; background: var(--brand-bg);
}
[data-style="minimal"] .md-list tbody tr.selected {
  box-shadow: none;
  outline: 1px solid var(--brand); outline-offset: -1px;
}
[data-style="minimal"] .sidebar-menu-row.active { box-shadow: none; }
[data-style="minimal"] .kpi-card { border-left: none; }
[data-style="minimal"] .kpi-card:hover { border-left: none; transform: none; }

/* A 미니멀: 버튼 잔잔 */
[data-style="minimal"] .btn-primary { box-shadow: none; }
[data-style="minimal"] .btn-primary:hover { transform: none; box-shadow: none; }
[data-style="minimal"] .btn-danger:hover {
  background: rgba(177,74,74,0.10); color: var(--danger); border-color: rgba(177,74,74,0.3);
}
.badge-create, .badge-update, .badge-delete, .badge-login, .badge-logout,
.badge-reset_password, .badge-restore, .badge-login_fail {
  background: var(--brand-bg); color: var(--brand); border: 1px solid rgba(184,138,42,0.3);
}
.badge-delete, .badge-login_fail { background: rgba(177,74,74,0.10); color: var(--danger); border-color: rgba(177,74,74,0.3); }

/* ── 모달 ── */
.modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 100; align-items: center; justify-content: center;
}
.modal.open { display: flex; }
.modal-card {
  width: 480px; max-height: 90vh; overflow: auto;
  background: var(--bg-surface); border-radius: var(--radius-lg);
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-medium);
}
.modal-header h3 { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.modal-close {
  width: 28px; height: 28px; font-size: 20px;
  color: var(--text-muted);
}
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: var(--space-4); }
.modal-footer {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-medium);
}

/* ── 폼 ── */
.field { margin-bottom: var(--space-3); }
.field label {
  display: block; font-size:13px; color: var(--text-muted);
  margin-bottom: var(--space-1); font-weight: 500;
}
.field .input, .field .select { width: 100%; }
.field .hint { display: block; margin-top: 4px; font-size:13px; color: var(--text-muted); }
.req { color: var(--danger); }

/* 필수 입력 라벨 표준: `* 항목명` (별표가 앞에) */
.field label.required::before {
  content: "* ";
  color: var(--danger);
  font-weight: 700;
  margin-right: 2px;
}

/* 역할 매트릭스 — 카테고리 헤더 */
.category-row .category-header {
  background: var(--brand-bg);
  color: var(--brand);
  text-align: center;
  font-size:13px; font-weight: 700;
  border-bottom: 1px solid var(--border-medium);
  padding: 4px 6px;
}

.checkbox-list {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-2);
  border: 1px solid var(--border-light); border-radius: var(--radius);
  background: var(--bg-base);
}
.checkbox { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; cursor: pointer; }
.checkbox input { margin: 0; }

/* ── 플래시 ── */
.flash-stack { margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.flash {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  font-size: 13px;
}
.flash-success { background: rgba(95,138,92,0.12); color: var(--success); border: 1px solid rgba(95,138,92,0.3); }
.flash-error   { background: rgba(177,74,74,0.10); color: var(--danger);  border: 1px solid rgba(177,74,74,0.3); }
.flash-warning { background: rgba(200,150,60,0.12); color: var(--warning); border: 1px solid rgba(200,150,60,0.35); }
.flash-info    { background: var(--brand-bg);      color: var(--brand);   border: 1px solid rgba(184,138,42,0.3); }

/* ── 감사 diff ── */
.audit-diff { margin-top: var(--space-2); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.audit-diff > div { flex: 1; min-width: 200px; }
.audit-diff pre {
  background: var(--bg-base); padding: var(--space-2);
  border-radius: var(--radius); font-size:13px; overflow: auto;
  border: 1px solid var(--border-light);
}

/* ── KPI 요약 간판 (모든 마스터 모듈 표준 — 상단 요약 + 필터 단축) ── */
.kpi-strip {
  display: flex; align-items: stretch; gap: var(--space-3);
  margin-bottom: var(--space-6); flex-wrap: wrap;
}
.kpi-card {
  flex: 1; min-width: 110px;
  background: var(--bg-surface); border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none;
}
.kpi-card:hover { background: var(--bg-surface-2); }
.kpi-label { font-size:13px; color: var(--text-muted); font-weight: 500; }
.kpi-value {
  font-size: 24px; font-weight: 700;
  color: var(--text-primary); font-family: var(--font-mono);
}
.kpi-value.success { color: var(--success); }
.kpi-value.warning { color: var(--warning); }
.kpi-value.danger { color: var(--danger); }
.kpi-value.muted { color: var(--text-muted); }
.kpi-card-sm { flex: 0 0 auto; min-width: 70px; }
.kpi-value-sm { font-size: 16px; }
.kpi-divider {
  width: 1px; background: var(--border-light); margin: 0 var(--space-1);
}
.kpi-toggle {
  align-self: flex-start;
  width: 24px; height: 24px;
  font-size: 14px; color: var(--text-muted);
  background: transparent; border: 1px solid var(--border-light);
  border-radius: var(--radius); cursor: pointer;
  margin-left: auto;
}
.kpi-toggle:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.kpi-show-btn {
  font-size:13px; color: var(--text-muted);
  background: transparent; border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 6px 12px;
  margin-bottom: var(--space-4); cursor: pointer;
}
.kpi-show-btn:hover { background: var(--bg-surface-2); color: var(--text-primary); }

/* ── Master-Detail 레이아웃 (모든 마스터 모듈 표준) ── */
.md-layout {
  display: grid;
  /* 적응형 detail: 좁은 화면에서 list 영역 보호 (Codex 검토 2026-05-16 반영) */
  grid-template-columns: 1fr clamp(320px, 28vw, 420px);
  gap: var(--space-8);
  min-height: 0;
}
.md-list { padding: 0; max-height: 65vh; overflow: auto; }
.md-list tbody tr { cursor: pointer; }
.md-list tbody tr.selected {
  background: var(--brand-bg);
  outline: 1px solid var(--brand); outline-offset: -1px;
}
.md-list tbody tr.selected td { color: var(--text-primary); }
.md-list tbody tr.selected td strong { color: var(--brand); }

.md-detail {
  position: sticky; top: 80px;
  align-self: start;
  max-height: calc(100vh - 96px); overflow-y: auto;
  margin-top: var(--space-6);   /* 첫 높이 살짝 하단으로 (목록 첫 행과 시각 분리) */
}
.md-detail-empty { padding: var(--space-4); }
.md-detail-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-2); margin-bottom: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-light);
}
.md-detail-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.md-detail-subtitle { font-size:13px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; }
.md-detail-section { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-light); }
.md-detail-section:last-child { border-bottom: none; }
.md-detail-section-title { font-size:13px; color: var(--brand); font-weight: 600; margin-bottom: var(--space-2); }

@media (max-width: 1280px) {
  /* 노트북·태블릿 — 가로 스크롤 위험 회피, detail 1열 아래로 (선택 시 자동 스크롤) */
  .md-layout { grid-template-columns: 1fr; }
  .md-detail { position: static; max-height: none; }
}

/* 데이터 테이블 — 컬럼 자동 조정 + 긴 텍스트 ellipsis (master-detail list 영역 보호) */
.md-list .data-table { table-layout: auto; }
.md-list .data-table td {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* mono / 작은 컬럼 (코드, 날짜, 숫자)은 자동 폭 유지 */
.md-list .data-table td.mono { max-width: none; }

/* ── 공통코드 페이지 전용: 좌측 좁게(그룹 목록) / 우측 넓게(코드 편집) ── */
.md-layout.md-layout-inverted {
  grid-template-columns: 340px 1fr;
}
.md-layout-inverted .md-detail {
  position: static; max-height: none; margin-top: 0;
}
@media (max-width: 1100px) {
  .md-layout-inverted { grid-template-columns: 1fr; }
}

/* ── 모달 — 한 화면 표준 ── */
/* 짧은 폼 (거래처 등): 2열 */
.modal-card-wide { width: 760px; max-width: 95vw; max-height: 92vh; }
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
}
.form-grid .full-width { grid-column: 1 / -1; }
.form-grid .field { margin-bottom: 0; }

/* 큰 모달 (30+ 필드): 4열 + 컴팩트 — 한 화면 안에 들어가야 함 */
.modal-card-xwide { width: 1240px; max-width: 96vw; max-height: 94vh; }
.modal-card-xwide .modal-body { padding: var(--space-2) var(--space-4); }
.form-grid-4 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 3px var(--space-3);
}
.form-grid-4 .full-width { grid-column: 1 / -1; }
.form-grid-4 .half-width { grid-column: span 2; }
.form-grid-4 .three-quarter { grid-column: span 3; }
.form-grid-4 .field { margin-bottom: 0; }
.form-grid-4 .field label {
  font-size:13px; margin-bottom: 1px; line-height: 1.2;
}
.form-grid-4 .input,
.form-grid-4 .select,
.form-grid-4 textarea.input {
  height: 28px; font-size: 13px; padding: 0 8px;
}
.form-grid-4 textarea.input { height: auto; padding: 4px 8px; }

/* 3열 (중간 모달) — 거래처 등 */
.form-grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px var(--space-3);
}
.form-grid-3 .full-width { grid-column: 1 / -1; }
.form-grid-3 .field { margin-bottom: 0; }

/* 섹션 헤더 — 컴팩트 */
.form-section-title {
  grid-column: 1 / -1;
  font-size:13px; font-weight: 700; color: var(--brand);
  padding: 3px 0 1px; margin-top: 3px;
  border-bottom: 1px solid var(--border-light);
}
.form-section-title:first-child { margin-top: 0; }

/* ── 거래처 역할 배지 (미니멀 — 외곽선) ── */
.badge-role {
  display: inline-block;
  padding: 1px 6px;
  background: var(--brand-bg);
  color: var(--brand);
  border: 1px solid rgba(184,138,42,0.3);
  border-radius: var(--radius);
  font-size:13px; font-weight: 600;
  margin-right: 3px;
}
.badge-closed {
  background: var(--bg-surface-2); color: var(--text-muted);
  border: 1px solid var(--border-light);
}

/* ── 키-값 리스트 (상세 좌측 정보 패널) ── */
.kv-list { display: flex; flex-direction: column; gap: var(--space-2); }
.kv {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; border-bottom: 1px solid var(--border-light);
}
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--text-muted); font-size:13px; }
.kv .v { color: var(--text-primary); font-size: 13px; }

/* ── 근무 캘린더 그리드 ── */
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid thead th {
  text-align: center; padding: 8px 4px;
  background: var(--bg-base); color: var(--text-secondary);
  font-weight: 600; font-size: 13px;
  border-bottom: 1px solid var(--border-medium);
}
.cal-grid thead th.cal-sun { color: var(--danger); }
.cal-grid thead th.cal-sat { color: var(--brand); }
.cal-grid .cal-cell {
  height: 90px; vertical-align: top;
  padding: 4px 6px;
  border: 1px solid var(--border-light);
  cursor: pointer;
  position: relative;
}
.cal-grid .cal-cell:hover { background: var(--bg-surface-2); }
.cal-grid .cal-out { background: rgba(0,0,0,0.02); opacity: 0.5; cursor: default; }
.cal-grid .cal-today { box-shadow: inset 0 0 0 2px var(--brand); }
.cal-grid .cal-off .cal-day { color: var(--danger); }
.cal-grid .cal-holiday { background: rgba(177,74,74,0.06); }
.cal-grid .cal-company-off { background: rgba(140,135,120,0.10); }
.cal-grid .cal-special-work { background: rgba(184,138,42,0.08); }
.cal-day { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.cal-desc { font-size:13px; color: var(--text-secondary); line-height: 1.2; }
.cal-type { font-size:13px; color: var(--text-muted); margin-top: 2px; }

/* ── 검색 가능 드롭다운 ── */
.ss { position: relative; }
.ss-input { width: 100%; }
.ss-list {
  position: fixed;   /* fixed → 부모 overflow:auto에 갇히지 않음 */
  max-height: 280px; overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  z-index: 1000;     /* modal(100)보다 위 */
  display: none;
  margin-top: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.ss-option {
  padding: 6px 10px; cursor: pointer; font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}
.ss-option:last-child { border-bottom: none; }
.ss-option:hover, .ss-option.ss-hl {
  background: var(--brand-bg); color: var(--brand);
}

/* ── 변동이력 — 현재 행 강조 ── */
.history-row-self {
  background: var(--brand-bg);
  box-shadow: inset 3px 0 0 var(--brand);
  font-weight: 600;
}

/* ── 권한 매트릭스 테이블 (사용자 상세) ── */
.perm-matrix { font-size:13px; margin-bottom: var(--space-3); }
.perm-matrix tbody td { padding: var(--space-1) var(--space-2); }
.perm-matrix thead th { font-size:13px; padding: 4px var(--space-2); }

/* ── 권한 체크 리스트 (역할 상세) ── */
.perm-list { display: flex; flex-direction: column; gap: 2px; }
.perm-row {
  display: grid; grid-template-columns: 20px 1fr 180px;
  gap: var(--space-2); align-items: center;
  padding: 4px var(--space-2); border-radius: var(--radius);
  cursor: pointer;
}
.perm-row:hover { background: var(--bg-surface-2); }
.perm-row .perm-name { font-size: 13px; color: var(--text-primary); }
.perm-row .perm-code { font-size:13px; color: var(--text-muted); text-align: right; }

/* ── 모듈 랜딩 그리드 ── */
.module-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.home-card-disabled {
  opacity: 0.55; cursor: not-allowed; position: relative;
}
.home-card-disabled:hover { background: var(--bg-surface); }

/* ── 홈 ── */
.home-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4); margin-top: var(--space-4);
}
.home-card {
  padding: var(--space-6); background: var(--bg-surface);
  border-radius: var(--radius); display: block;
}
.home-card:hover { background: var(--bg-surface-2); }
.home-card .title { font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-1); }
.home-card .desc  { font-size:13px; color: var(--text-muted); }

/* ============================================== */
/* AI 채팅 (전역 floating + 사이드 패널)            */
/* ============================================== */
.ai-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--brand); color: #fff; border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  cursor: pointer; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, background 0.15s;
}
.ai-fab:hover { transform: scale(1.06); }
.ai-fab.open { right: 432px; }
.ai-fab-icon { letter-spacing: 0.5px; }

.ai-panel {
  position: fixed; right: 0; top: 0; bottom: 0; z-index: 199;
  width: 400px; max-width: 92vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-medium);
  box-shadow: -4px 0 16px rgba(0,0,0,0.12);
  flex-direction: column;
}
.ai-panel-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-surface-2);
}
.ai-panel-header h4 { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; }
.ai-icon-btn {
  width: 28px; height: 28px; border: none; background: transparent;
  cursor: pointer; font-size: 16px; color: var(--text-muted);
  border-radius: 4px;
}
.ai-icon-btn:hover { background: var(--bg-surface); color: var(--text-primary); }

.ai-messages {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px;
}
.ai-msg {
  padding: 8px 12px; border-radius: 8px; max-width: 95%;
  line-height: 1.5; word-wrap: break-word;
}
.ai-msg-user {
  background: var(--brand-bg); color: var(--text-primary);
  align-self: flex-end; border-bottom-right-radius: 2px;
}
.ai-msg-assistant {
  background: var(--bg-surface-2); color: var(--text-primary);
  align-self: flex-start; border-bottom-left-radius: 2px;
  border: 1px solid var(--border);
}
.ai-msg-system {
  background: transparent; color: var(--text-muted); font-size:13px;
  text-align: center; align-self: center;
}
.ai-msg-meta {
  margin-top: 6px; font-size:13px; color: var(--text-muted);
  border-top: 1px dashed var(--border); padding-top: 4px;
}
.ai-code {
  background: rgba(0,0,0,0.05); padding: 6px 8px; border-radius: 4px;
  font-size:13px; overflow-x: auto; margin: 4px 0;
}
.ai-msg code {
  background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px;
  font-size:13px; font-family: monospace;
}

.ai-input-area {
  padding: 8px 12px; border-top: 1px solid var(--border);
  display: flex; gap: 6px; align-items: flex-end;
}
.ai-input-area textarea {
  flex: 1; resize: none; padding: 6px 8px;
  border: 1px solid var(--border-medium); border-radius: 4px;
  background: var(--bg-base); color: var(--text-primary);
  font-family: inherit; font-size: 13px;
}
.ai-send-btn { padding: 6px 14px; font-size:13px; }

.ai-status {
  padding: 4px 12px; font-size:13px; color: var(--text-muted);
  min-height: 18px; border-top: 1px solid var(--border);
  background: var(--bg-surface-2);
}

[data-theme^="dark"] .ai-fab { background: var(--brand); }
[data-theme^="dark"] .ai-msg-user { background: rgba(184,138,42,0.15); }
[data-theme^="dark"] .ai-msg-assistant { background: var(--bg-surface-2); }
[data-theme^="dark"] .ai-code, [data-theme^="dark"] .ai-msg code { background: rgba(255,255,255,0.06); }

/* ============================================== */
/* 결과 테이블 상단 툴바 (페이지네이션 위치)        */
/* ============================================== */
.table-toolbar {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface-2);
}
.table-toolbar .pagination-inline { margin-left: 0; }
.table-card .table-toolbar:last-child {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* ============================================== */
/* 페이지 번호 클릭형 (1 2 3 ... 전자소송 스타일)   */
/* ============================================== */
.page-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px;
  font-size:13px; font-family: var(--font-mono);
  color: var(--text-secondary);
  border: 1px solid var(--border-light); border-radius: 3px;
  background: var(--bg-base);
  text-decoration: none;
}
.page-num:hover {
  background: var(--bg-surface-2);
  border-color: var(--border-medium);
  color: var(--text-primary);
}
.page-num.active {
  background: var(--brand); color: #fff;
  border-color: var(--brand);
  font-weight: 700;
}
.page-ellipsis {
  display: inline-block; padding: 0 4px;
  font-size:13px; color: var(--text-muted);
}
.pagination-inline { gap: 4px; }

/* 페이지 점프 입력 박스 (우측 영역) */
.page-jump {
  width: 52px; height: 28px;
  padding: 0 6px;
  font-size:13px; font-family: var(--font-mono);
  text-align: center;
  -moz-appearance: textfield;  /* number 위·아래 화살표 숨김 (Firefox) */
}
.page-jump::-webkit-inner-spin-button,
.page-jump::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}


/* ════════════════════════════════════════════════
   비교 패널 그리드 — 4-8 업체별 납품횟수 등 다중 패널 화면
   사용: 한 화면에 여러 표를 동시에 비교 (좌상/우상/좌하/우하)
   원칙: 각 패널 max-height 고정 → 한 패널이 길어져도 다른 패널 안 밀림
        thead/tfoot sticky → 스크롤해도 컬럼명/총계 항상 보임
   ════════════════════════════════════════════════ */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;  /* 좌:우 = 1:1.4 (좌가 요약, 우가 상세) */
  gap: 12px;
}
@media (max-width: 1400px) {
  .compare-grid { grid-template-columns: 1fr; }  /* 좁은 화면 1열 */
}
.compare-panel {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.compare-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);  /* 2026-06-15: --bg-subtle 미정의(투명) → --bg-base 불투명 */
  flex-shrink: 0;
}
.compare-panel-title {
  font-weight: 600;
  font-size: 13px;
}
.compare-panel-body {
  max-height: clamp(220px, 32vh, 420px);
  overflow-y: auto;
}
.compare-table {
  font-size:13px;
  margin: 0;
}
.compare-table td,
.compare-table th {
  padding: 4px 8px;
}
/* thead/tfoot sticky — 스크롤 시에도 컬럼명/총계 항상 보임.
   ★ <tr>의 position:sticky는 브라우저 호환성 이슈 (Firefox/일부 Chrome 안 먹음) →
     <th>/<td>에 직접 sticky 적용. 또한 sticky 셀은 반드시 background 불투명해야 본문이 안 비침. */
.compare-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-base);
  z-index: 3;
  box-shadow: 0 1px 0 var(--border);
}
.compare-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 4;
  /* 2026-06-15 fix: var(--bg-subtle)은 tokens.css에 정의 안 된 변수라 무효 →
     배경 투명 → sticky 총계 행이 뒤 데이터 행 비쳐 겹쳐 보임 (동현 보고).
     정의된 불투명 변수 --bg-base 로 교체 (카드 흰색과 톤 달라 총계 구분도 됨). */
  background: var(--bg-base);
  box-shadow: 0 -2px 0 var(--border), 0 -1px 4px rgba(0,0,0,0.06);
}
/* tfoot이 z-index 4로 sticky bottom에 떠 있어서 tbody 행 위에 덮음.
   tbody td는 background 강제 안 함 — [소계] 행 인라인 background-color 그대로 유지. */

/* ─────────────────────────────────────────────────
   date_input.js — 키보드 입력 + 달력 픽커 wrapper
   ───────────────────────────────────────────────── */
/* wrapper는 inline-flex 자연 크기 — input 원래 너비 유지 + button 옆에 추가.
   position: relative — hidden date input의 positioning anchor.
   width: 100% 주면 grid/flex 부모 셀을 꽉 채워서 input이 풀폭이 되는 문제 발생. */
.date-input-wrap {
  display: inline-flex;
  gap: 0;
  align-items: stretch;
  vertical-align: middle;
  max-width: 100%;
  min-width: 0;
  position: relative;
}
.date-input-wrap > input.date-input-text {
  /* input의 원래 width 속성(inline style/class) 그대로 따름.
     명시적 width 없으면 브라우저 기본 (보통 텍스트 약 10ch 정도) */
  min-width: 0;
  border-right: none;
}
/* hidden type="date" — showPicker() 호출용 invisible input.
   display:none / visibility:hidden / pointer-events:none 모두 showPicker 차단 →
   opacity 0 + 작은 크기 + z-index 음수로만 시각적 숨김. wrapper 안에 layered. */
.date-input-wrap > .date-picker-hidden {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  opacity: 0;
  z-index: -1;
  background: transparent;
}
.date-input-wrap > .date-picker-btn {
  flex: 0 0 auto;
  padding: 0 6px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  background: var(--bg-subtle, #ECECEC);
  border: 1px solid var(--border, #B0B0B0);
  border-left: none;
  color: var(--text, #333);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.date-input-wrap > .date-picker-btn:hover {
  background: var(--bg-hover, #DCDCDC);
}
.date-input-wrap > .date-picker-btn:active {
  background: var(--bg-active, #C8C8C8);
}
.date-input-wrap > .date-picker-btn:focus-visible {
  outline: 2px solid var(--brand, #B88A2A);
  outline-offset: -2px;
}

/* ───────────────────────────────────────────────────────────
   HR/인사노무 5-4/5/6 — 셀 inline 편집 (2026-05-25)
   td.editable: 더블클릭 → input 생성, blur/Enter → AJAX 저장
─────────────────────────────────────────────────────────── */
td.editable {
  cursor: pointer;
  position: relative;
}
td.editable:hover {
  background: rgba(255,252,216,0.6) !important;
  outline: 1px dashed #C58E2A;
  outline-offset: -1px;
}
td.editable.editing {
  padding: 0 !important;
  background: #FFF !important;
}
td.editable input.inline-input {
  width: 100%;
  padding: 3px 6px;
  border: 2px solid var(--brand, #244F75);
  font: inherit;
  text-align: right;
  font-family: var(--font-mono, monospace);
  box-sizing: border-box;
  background: #FFFCE5;
}
td.editable.saving {
  background: #FFF3CC !important;
}
td.editable.saved-flash {
  animation: hrSavedFlash 0.6s ease;
}
@keyframes hrSavedFlash {
  0%   { background: #CDEBC8; }
  100% { background: transparent; }
}

/* ───────────────────────────────────────────────────────────
   HR/인사노무 5-X — 표 영역만 스크롤 (헤더/KPI 고정, 2026-05-25)
   .hr-table-scroll 감싸면 max-height 65vh + thead sticky 자동 적용
─────────────────────────────────────────────────────────── */
.hr-table-scroll {
  max-height: 65vh;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--border-medium, #B0B0B0);
}
.hr-table-scroll > table {
  margin: 0;
  border: none;
}
.hr-table-scroll > table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* background는 각 prefix별 CSS가 이미 처리하나, 명시적으로 보존 */
  box-shadow: 0 1px 0 var(--border-medium, #909090);
}
/* tfoot도 하단 sticky로 (합계행 항상 보이게) */
.hr-table-scroll > table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -1px 0 var(--border-strong, #707070);
}

/* ───────────────────────────────────────────────────────────
   HR/인사노무 카테고리 — input/select 테마 대응 (2026-05-23)
   각 HR 화면 toolbar/modal의 폼 컨트롤이 브라우저 기본 흰색으로
   표시되어 dark-gray 테마에서 안 보이는 문제 해결.
   prefix별 일괄 적용. textarea 포함.
─────────────────────────────────────────────────────────── */
.ap-page input, .ap-page select, .ap-page textarea,
.mx-page input, .mx-page select, .mx-page textarea,
.ac-page input, .ac-page select, .ac-page textarea,
.cl-page input, .cl-page select, .cl-page textarea,
.lv-page input, .lv-page select, .lv-page textarea,
.uv-page input, .uv-page select, .uv-page textarea,
.rule-page input, .rule-page select, .rule-page textarea,
.raw-page input, .raw-page select, .raw-page textarea,
.pd-page input, .pd-page select, .pd-page textarea,
.upl-page input, .upl-page select, .upl-page textarea,
.ot-page input, .ot-page select, .ot-page textarea,
.sm-page input, .sm-page select, .sm-page textarea,
.ih-page input, .ih-page select, .ih-page textarea,
.in-page input, .in-page select, .in-page textarea,
.it-page input, .it-page select, .it-page textarea,
.ir-page input, .ir-page select, .ir-page textarea,
.ip-page input, .ip-page select, .ip-page textarea,
.ie-page input, .ie-page select, .ie-page textarea,
.ps-page input, .ps-page select, .ps-page textarea,
.ie-modal input, .ie-modal select, .ie-modal textarea,
.ih-modal input, .in-modal input, .it-modal input,
.sm-modal input, .sm-modal select, .sm-modal textarea,
.map-page input, .map-page select, .map-page textarea,
.ap-modal input, .ap-modal select, .ap-modal textarea,
#lvManualModal input, #lvManualModal select, #lvManualModal textarea,
#lvSettleModal input, #lvSettleModal select, #lvSettleModal textarea,
#lvGenModal input, #lvGenModal select, #lvGenModal textarea,
#lvHistoryModal input, #lvHistoryModal select, #lvHistoryModal textarea,
#uvUseModal input, #uvUseModal select, #uvUseModal textarea {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.ap-page input:disabled, .ap-page select:disabled,
.mx-page input:disabled, .ac-page input:disabled,
.cl-page input:disabled, .lv-page input:disabled,
.uv-page input:disabled, .rule-page input:disabled,
.raw-page input:disabled, .pd-page input:disabled,
.upl-page input:disabled, .map-page input:disabled,
.ip-page input:disabled, .ip-page select:disabled,
.ie-page input:disabled, .ie-page select:disabled {
  background: var(--bg-surface-2, var(--bg-surface));
  color: var(--text-muted);
}

/* ───────────────────────────────────────────────────────────
   HR/인사노무 — dark-gray 테마 전용 override (2026-05-23)
   라이트 톤 의미색/배경이 어두운 그레이와 균형 안 맞는 문제 해결.
   토큰 표준(--warning/--danger/--brand/--text-*)으로 통일 + 배경 톤다운.
─────────────────────────────────────────────────────────── */

/* 1) 의미색 텍스트 → 토큰 표준 매핑 */
[data-theme="dark-gray"] .ap-table .ot,
[data-theme="dark-gray"] .pd-table .ot,
[data-theme="dark-gray"] .cl-table .ot,
[data-theme="dark-gray"] .ac-summary .kpi.ot .num,
[data-theme="dark-gray"] .ac-cal .hours .h.ot,
[data-theme="dark-gray"] .mx-table .sum,
[data-theme="dark-gray"] .lv-table tbody td.settle,
[data-theme="dark-gray"] .ac-cal .day-type { color: var(--warning); }

[data-theme="dark-gray"] .ap-table .night,
[data-theme="dark-gray"] .pd-table .night,
[data-theme="dark-gray"] .cl-table .night,
[data-theme="dark-gray"] .ac-summary .kpi.night .num,
[data-theme="dark-gray"] .ac-cal .hours .h.night { color: #B8AEEC; }  /* 톤다운 보라 */

[data-theme="dark-gray"] .ap-table .hol,
[data-theme="dark-gray"] .cl-table .badge.partial,
[data-theme="dark-gray"] .ac-summary .kpi.hol .num,
[data-theme="dark-gray"] .ac-cal .hours .h.hol { color: var(--warning); }

[data-theme="dark-gray"] .ap-table .miss-out,
[data-theme="dark-gray"] .ac-cal .miss-out,
[data-theme="dark-gray"] .mx-table .cell-miss,
[data-theme="dark-gray"] .cl-table .badge.open,
[data-theme="dark-gray"] .lv-table tbody td.use { color: var(--danger); }

[data-theme="dark-gray"] .cl-table .badge.full,
[data-theme="dark-gray"] .lv-table tbody td.grant,
[data-theme="dark-gray"] .ac-cal .day-num .conf { color: var(--success); }

/* 연차 발생/사용/정산 — 그레이용 */
[data-theme="dark-gray"] .lv-rules .legend .g { color: var(--text-primary); }
[data-theme="dark-gray"] .lv-rules .legend .u { color: #6EA0E5; }   /* 파랑 톤다운 */
[data-theme="dark-gray"] .lv-rules .legend .s { color: var(--danger); }

/* 2) 라이트 톤 배경 → 어두운 톤다운 (rgba 사용해서 자연스럽게) */
[data-theme="dark-gray"] .ap-table tbody tr.dow-sat,
[data-theme="dark-gray"] .mx-table tbody td.dow-sat,
[data-theme="dark-gray"] .ac-cal td.sat,
[data-theme="dark-gray"] .raw-table tbody tr.dow-sat { background: rgba(80,120,180,0.15) !important; }

[data-theme="dark-gray"] .ap-table tbody tr.dow-sun,
[data-theme="dark-gray"] .mx-table tbody td.dow-sun,
[data-theme="dark-gray"] .ac-cal td.sun,
[data-theme="dark-gray"] .raw-table tbody tr.dow-sun { background: rgba(180,80,80,0.15) !important; }

[data-theme="dark-gray"] .ap-table tbody tr.holiday,
[data-theme="dark-gray"] .mx-table thead th.hol,
[data-theme="dark-gray"] .ac-cal td.holiday,
[data-theme="dark-gray"] .mx-table tbody td.cell-hol,
[data-theme="dark-gray"] .raw-table tbody tr.holiday { background: rgba(200,150,60,0.18) !important; }

[data-theme="dark-gray"] .ac-cal td.weekly-hol,
[data-theme="dark-gray"] .mx-table tbody td.cell-weekly,
[data-theme="dark-gray"] .mx-table tbody td.cell-nowork,
[data-theme="dark-gray"] .ap-table tbody tr.row-hol,
[data-theme="dark-gray"] .ap-table tbody tr.row-nowork { background: rgba(255,255,255,0.05) !important; color: var(--text-muted); }

/* 퇴근누락 셀 */
[data-theme="dark-gray"] .mx-table tbody td.cell-miss { background: rgba(214,115,115,0.18) !important; }
[data-theme="dark-gray"] .mx-table tbody td.cell-absent { background: rgba(255,255,255,0.02) !important; }
[data-theme="dark-gray"] .mx-table tbody td.cell-work { background: var(--bg-elevated) !important; }

/* footer/요약 강조 (라이트 노랑 → 어두운 황금) */
[data-theme="dark-gray"] .ap-table tfoot td,
[data-theme="dark-gray"] .mx-table tfoot td,
[data-theme="dark-gray"] .uv-table tfoot td,
[data-theme="dark-gray"] .ap-table tbody td.summary,
[data-theme="dark-gray"] .mx-table tbody td.sum,
[data-theme="dark-gray"] .lv-table tbody td.summary { background: rgba(208,161,58,0.12) !important; }

/* hover */
[data-theme="dark-gray"] .ap-table tbody tr:hover,
[data-theme="dark-gray"] .mx-table tbody td.cell-work:hover,
[data-theme="dark-gray"] .uv-table tbody tr:hover,
[data-theme="dark-gray"] .lv-table tbody tr:hover,
[data-theme="dark-gray"] .cl-table tbody tr:hover { background: rgba(208,161,58,0.15) !important; }

/* 마감 상태 row 배경 (cl-table) */
[data-theme="dark-gray"] .cl-table tbody tr.full { background: rgba(123,191,119,0.10) !important; }
[data-theme="dark-gray"] .cl-table tbody tr.partial { background: rgba(229,178,67,0.10) !important; }

/* 정보/배너 (안내) */
[data-theme="dark-gray"] .ac-emp-info,
[data-theme="dark-gray"] .lv-rules,
[data-theme="dark-gray"] .cl-actions { background: var(--bg-surface) !important; border-color: var(--border-medium) !important; }

/* 모달 헤더 — 라이트 파랑 #4A6FA5 → 그레이 brand */
[data-theme="dark-gray"] .ap-modal-head,
[data-theme="dark-gray"] #lvManualModal > div > div:first-child,
[data-theme="dark-gray"] #lvSettleModal > div > div:first-child,
[data-theme="dark-gray"] #lvGenModal > div > div:first-child,
[data-theme="dark-gray"] #lvHistoryModal > div > div:first-child,
[data-theme="dark-gray"] #uvUseModal > div > div:first-child,
[data-theme="dark-gray"] .uv-modal-head { background: var(--brand) !important; color: var(--bg-base) !important; }

/* 매칭 배지 (attendance_mapping) — dark에서도 보이게 */
[data-theme="dark-gray"] .map-table tr.match-cached,
[data-theme="dark-gray"] .map-table tr.match-name-dept { background: rgba(123,191,119,0.10); }
[data-theme="dark-gray"] .map-table tr.match-name { background: rgba(229,178,67,0.10); }
[data-theme="dark-gray"] .map-table tr.match-manual { background: rgba(110,160,229,0.10); }
[data-theme="dark-gray"] .map-table tr.match-none { background: rgba(214,115,115,0.12); }
[data-theme="dark-gray"] .map-table tr.match-ambiguous { background: rgba(229,178,67,0.15); }

/* 3-9 시간외 — dark-gray override */
[data-theme="dark-gray"] .ot-table .ot,
[data-theme="dark-gray"] .ot-table .hol { color: var(--warning); }
[data-theme="dark-gray"] .ot-table .night { color: #B8AEEC; }
[data-theme="dark-gray"] .ot-table tbody tr.full    { background: rgba(123,191,119,0.10) !important; }
[data-theme="dark-gray"] .ot-table tbody tr.partial { background: rgba(229,178,67,0.10) !important; }
[data-theme="dark-gray"] .ot-table tbody tr:hover   { background: rgba(208,161,58,0.15) !important; }
[data-theme="dark-gray"] .ot-actions { background: var(--bg-surface) !important; border-color: var(--border-medium) !important; }
[data-theme="dark-gray"] .ot-kpi .kpi.ot .num    { color: var(--warning); }
[data-theme="dark-gray"] .ot-kpi .kpi.night .num { color: #B8AEEC; }
[data-theme="dark-gray"] .ot-kpi .kpi.hol .num   { color: var(--warning); }

/* 4-0 사원 임금 대장 — dark-gray override */
[data-theme="dark-gray"] .sm-table tbody tr.missing { background: rgba(214,115,115,0.10) !important; }
[data-theme="dark-gray"] .sm-table tbody tr:hover { background: rgba(208,161,58,0.15) !important; }
[data-theme="dark-gray"] .sm-table .basic { color: var(--success); }
[data-theme="dark-gray"] .sm-table .hourly { color: #6EA0E5; }
[data-theme="dark-gray"] .sm-table .alw { color: var(--warning); }
[data-theme="dark-gray"] .sm-kpi .kpi.warn .num { color: var(--warning); }
[data-theme="dark-gray"] .sm-kpi .kpi.sum .num { color: #6EA0E5; }
[data-theme="dark-gray"] .sm-modal-head { background: var(--brand) !important; color: var(--bg-base) !important; }

/* 5-4~5-7 사회보험 — dark-gray override */
[data-theme="dark-gray"] .ih-table tbody tr.missing,
[data-theme="dark-gray"] .in-table tbody tr.missing,
[data-theme="dark-gray"] .it-table tbody tr.missing { background: rgba(214,115,115,0.10) !important; }
[data-theme="dark-gray"] .ih-table tbody tr:hover,
[data-theme="dark-gray"] .in-table tbody tr:hover,
[data-theme="dark-gray"] .it-table tbody tr:hover { background: rgba(208,161,58,0.15) !important; }
[data-theme="dark-gray"] .it-table thead .group-head { background: rgba(208,161,58,0.20) !important; color: var(--warning); }
[data-theme="dark-gray"] .ih-modal-head, [data-theme="dark-gray"] .in-modal-head,
[data-theme="dark-gray"] .it-modal-head { background: var(--brand) !important; color: var(--bg-base) !important; }

/* 5-1/5-2 납부내역 매트릭스 + 5-3 취득/상실 이력 — dark-gray override */
[data-theme="dark-gray"] .ip-table tbody tr:hover,
[data-theme="dark-gray"] .ie-table tbody tr:hover { background: rgba(208,161,58,0.15) !important; }
[data-theme="dark-gray"] .ip-table .sum,
[data-theme="dark-gray"] .ip-table tfoot td { background: rgba(208,161,58,0.12) !important; color: var(--warning); }
[data-theme="dark-gray"] .ip-table .zero { color: var(--text-muted) !important; }
[data-theme="dark-gray"] .ip-actions,
[data-theme="dark-gray"] .ie-actions { background: var(--bg-surface) !important; border-color: var(--border-medium) !important; }
[data-theme="dark-gray"] .ie-badge.acquire { background: rgba(123,191,119,0.18) !important; color: var(--success) !important; }
[data-theme="dark-gray"] .ie-badge.loss { background: rgba(214,115,115,0.18) !important; color: var(--danger) !important; }
[data-theme="dark-gray"] .ie-badge.resume { background: rgba(110,160,229,0.18) !important; color: #6EA0E5 !important; }
[data-theme="dark-gray"] .ie-modal-head { background: var(--brand) !important; color: var(--bg-base) !important; }

/* ─────────────────────────────────────────────────────────────
   글로벌 인쇄 CSS (2026-05-26 동현 요청 — 인사노무 전 화면 통일)
   모든 화면에서 [🖨 인쇄] 또는 Ctrl+P 누르면:
   - topbar, sidebar, ai-fab, .no-print 모두 숨김
   - body-grid는 단일 컬럼으로 펼침
   - 인쇄 영역만 전체 폭 사용
   ───────────────────────────────────────────────────────────── */
.print-only { display: none; }

@media print {
  @page { margin: 8mm; }
  body { background: white !important; color: black !important; }
  .topnav, .topbar, .sidebar, .module-nav, .user-area, .ai-fab,
  .no-print, .pagination-inline, .flash-stack, .notif-dropdown,
  .filter-bar, .kpi-toggle, .kpi-show-btn {
    display: none !important;
  }
  .app-wrapper, .body-grid { display: block !important; }
  .content, .main-content { padding: 0 !important; margin: 0 !important; }
  /* 인쇄 전용 요소 노출 */
  .print-only { display: block !important; }
  .print-head { margin: 0 0 10px 0; border-bottom: 2px solid #000; padding-bottom: 6px; }
  /* 인쇄 결재란 */
  .print-approval { border-collapse: collapse; }
  .print-approval td {
    border: 1px solid #000; text-align: center; vertical-align: middle;
    font-size: 12px; padding: 2px 4px;
  }
  .print-approval td.lbl { width: 18px; font-weight: bold; background: #f0f0f0; }
  .print-approval td.sign { width: 62px; height: 42px; }
  /* 표 인쇄 — page-break 방지 + 내부 스크롤 컨테이너 펼침 */
  .table-card, .card.table-card {
    max-height: none !important; overflow: visible !important;
    box-shadow: none !important; border: none !important;
  }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; page-break-after: auto; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  /* 링크 URL 표시 안 함 */
  a[href]:after { content: "" !important; }
}

/* hr_actions 매크로 — 페이지 우상단 액션 영역 */
.hr-actions { white-space: nowrap; }
.hr-actions .btn { padding: 3px 10px; font-size: 12px; }

/* ════════════════════════════════════════════════════════════
   모바일 레이어 (2026-07-27 동현 — "폰으로 본주소 거의 사용 불가" 개선)
   전 화면 개별 최적화가 아니라 공통 레이아웃 응급 대응:
   사이드바 오버레이(☰) + 1열 그리드 + 표 가로스크롤 + 모달/패딩 축소.
   본격 모바일 업무는 PWA(/mobile) 권장 — 이 레이어는 "조회 가능" 수준 목표.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 상단바 — brand 축소, 모듈탭 스크롤 유지, 우측 요소 최소화 */
  .brand { width: auto; padding: 0 10px; font-size: 14px; flex-shrink: 0; }
  .module-nav { padding-left: 0; }
  .module-nav a { padding: 0 8px; font-size: 12.5px; white-space: nowrap; }
  .user-area { gap: 6px; padding-right: 6px; }
  .user-area .theme-toggle,
  .user-area a[href*="/me/sessions"],
  .user-area span { display: none; }          /* 이름/세션/테마 숨김 — 종·프로그램·로그아웃만 */

  /* 본문 — 사이드바 자리 제거, 여백 축소 */
  .body-grid { grid-template-columns: 1fr; }
  .main { padding: 10px 10px 40px; }

  /* 사이드바 = 오버레이 (기본 숨김, ☰로 열기) */
  .sidebar { display: none; }
  body.m-sidebar-open .sidebar {
    display: block; position: fixed; top: 48px; left: 0; bottom: 0;
    width: min(300px, 84vw); z-index: 400; overflow-y: auto;
    background: var(--bg-surface); border-right: 1px solid var(--border-medium);
    box-shadow: 4px 0 18px rgba(0,0,0,.25);
  }
  body.m-sidebar-open::after {
    content: ''; position: fixed; inset: 48px 0 0 0; z-index: 390;
    background: rgba(0,0,0,.35);
  }
  .m-sidebar-btn { display: flex !important; }

  /* 홈 카드 / KPI / 헤더 */
  .module-grid { grid-template-columns: 1fr 1fr; }
  .kpi-strip { gap: 6px; margin-bottom: 12px; }
  .kpi-strip .kpi-card { min-width: calc(50% - 6px); }
  .page-header { flex-wrap: wrap; gap: 8px; }
  .page-head-right { flex-wrap: wrap; }

  /* 표 — 화면 밖으로 못 나가게 카드 안에서만 가로 스크롤 */
  .card { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 640px; }

  /* 모달 — 화면 가득 */
  .modal-card, .modal-card-wide, .modal-card-xwide {
    width: 96vw !important; max-width: 96vw !important; max-height: 92vh;
  }
  .form-grid, .form-grid-4 { grid-template-columns: 1fr 1fr; }

  /* master-detail 은 1280 규칙이 이미 1열 처리 — 추가 여백만 */
  .md-layout { gap: 10px; }
}
/* ☰ 버튼 — 데스크톱에선 숨김 */
.m-sidebar-btn {
  display: none; align-items: center; justify-content: center;
  min-width: 40px; height: 48px; border: none; background: transparent;
  font-size: 20px; color: var(--text-primary); cursor: pointer; flex-shrink: 0;
}