/* =====================================================================
   SCM 디자인 시스템 (shadcn/ui 스타일 토큰 + 컴포넌트, 빌드 없는 순수 CSS)
   - 색/반경/그림자는 모두 :root 토큰으로 정의하고 컴포넌트는 토큰만 참조한다.
   - 기존 화면(app.js 가 생성하는 HTML)의 클래스명은 그대로 유지한다.
   ===================================================================== */
:root {
  /* 표면 / 글자 (zinc 계열) */
  --background: #f3f6fb; /* 2026-10-08 UI 정돈: 밝은 청회색 본문 */
  --surface: #ffffff;
  --muted: #f4f4f5;
  --muted-2: #fafafa;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --input: #e4e4e7;
  --text: #09090b;
  --text-muted: #71717a;
  --text-subtle: #a1a1aa;
  --ring: rgba(37, 99, 235, 0.35);

  /* 액션 */
  --primary: #1f5fd6;      /* 파란 포인트(주요 버튼) */
  --primary-hover: #1a4fb3;
  --primary-fg: #ffffff;
  /* 네이비(상단 바·좌측 메뉴) */
  --navy: #0e1d3a;
  --navy-2: #13284d;
  --navy-3: #1c3664;
  --navy-text: #c9d5ea;
  --navy-muted: #8195b8;
  --header-h: 56px;
  --sidebar-w: 236px;
  --accent: #2563eb;
  --accent-bg: #eff6ff;
  --danger: #dc2626;
  --danger-hover: #b91c1c;

  /* 상태 (배지 등) */
  --green: #15803d;
  --green-bg: #f0fdf4;
  --green-border: #bbf7d0;
  --blue-text: #1d4ed8;
  --blue-bg: #eff6ff;
  --blue-border: #bfdbfe;
  --gray-text: #3f3f46;
  --gray-bg: #f4f4f5;
  --gray-border: #e4e4e7;
  --red-text: #b91c1c;
  --red-bg: #fef2f2;
  --red-border: #fecaca;
  --orange-text: #c2410c;
  --orange-bg: #fff7ed;
  --orange-border: #fed7aa;
  --violet-text: #6d28d9;
  --violet-bg: #f5f3ff;
  --violet-border: #ddd6fe;

  /* 차트 (dataviz 기본 팔레트 slot 1~5, 검증 완료) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-other: #a1a1aa;
  --chart-grid: #ececee;
  --chart-axis: #a1a1aa;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 30, 60, 0.05);
  --shadow: 0 1px 3px rgba(15, 30, 60, 0.07), 0 1px 2px rgba(15, 30, 60, 0.04);
  --shadow-lg: 0 16px 40px -12px rgba(9, 9, 11, 0.25), 0 4px 12px -4px rgba(9, 9, 11, 0.08);
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  background: var(--background);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Lucide 아이콘: <i data-lucide> 가 <svg class="lucide"> 로 바뀐다 */
.lucide { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; vertical-align: -3px; }
.icon-sm .lucide, .lucide.icon-sm { width: 14px; height: 14px; }

/* ---------- 공통 레이아웃: 네이비 상단 바 + 좌측 세로 메뉴 (2026-10-08 UI 정돈) ---------- */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 30;
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: var(--navy); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(5, 15, 35, 0.25);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* 기존 로고(빨강, 가로형 408×175)는 네이비 위에서 잘 보이도록 흰 칩 위에 둔다 */
.brand-logo { display: inline-flex; align-items: center; background: #fff; border-radius: 7px; padding: 4px 8px; flex-shrink: 0; }
.brand-logo img { height: 22px; width: auto; display: block; }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.brand-divider { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.22); }
.brand-sub { font-size: 13px; color: var(--navy-text); white-space: nowrap; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-sync { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--navy-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-sync .lucide { width: 14px; height: 14px; color: var(--navy-muted); }
.header-alert { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 12.5px; cursor: pointer; }
.header-alert:hover { background: rgba(255, 255, 255, 0.12); }
.header-alert-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.app-header .nav-toggle { display: none; color: #fff; }
.nav-toggle:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.sidebar {
  position: fixed; top: var(--header-h); bottom: 0; left: 0; width: var(--sidebar-w); z-index: 25;
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
.side-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 12px;
  border: none; border-radius: 8px; background: none; color: var(--navy-text); font: inherit; font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.nav-item span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .lucide { color: var(--navy-muted); }
.nav-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav-item.active { background: var(--primary); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(31, 95, 214, 0.35); }
.nav-item.active .lucide { color: #fff; }
.nav-item:focus-visible, .nav-caret-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.8); }
.nav-group-head { color: #e6ecf7; }
.nav-group.has-active > .nav-group-head, .nav-group.has-active .nav-main { color: #fff; }
.nav-caret { margin-left: auto; transition: transform 0.15s; }
.nav-group.open .nav-caret { transform: rotate(90deg); }
.nav-row { display: flex; align-items: center; gap: 2px; }
.nav-row .nav-main { flex: 1; }
.nav-caret-btn { width: 30px; height: 38px; flex-shrink: 0; border: none; border-radius: 8px; background: none; color: var(--navy-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nav-caret-btn:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav-caret-btn .nav-caret { margin: 0; }
.nav-sub { display: none; flex-direction: column; gap: 1px; margin: 2px 0 6px 14px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.nav-group.open .nav-sub { display: flex; }
.nav-subitem { min-height: 34px; font-size: 13px; padding: 0 10px; }
.nav-subitem .lucide { width: 15px; height: 15px; }
.sidebar-foot { margin-top: auto; padding: 14px 18px 16px; font-size: 11px; letter-spacing: 0.04em; color: var(--navy-muted); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.sidebar-scrim { display: none; }

/* 본문: 상단 바·좌측 메뉴만큼 비우고, 내용 영역 안에서만 넓어진다(표는 .table-wrap 안에서 가로 스크롤) */
main { padding: calc(var(--header-h) + 14px) 24px 48px calc(var(--sidebar-w) + 24px); width: 100%; max-width: none; margin: 0; min-width: 0; }
main > .tab-panel { max-width: 1760px; }
.page-crumb { display: flex; align-items: center; gap: 6px; min-height: 22px; margin: 0 0 8px; font-size: 12.5px; color: var(--text-muted); }
.page-crumb .lucide { width: 13px; height: 13px; color: var(--text-subtle); }
.page-crumb strong { color: var(--text); font-weight: 600; }

/* 좁은 화면: 메뉴는 ☰ 로 열고 닫는 서랍 */
@media (max-width: 1100px) {
  .app-header .nav-toggle { display: inline-flex; }
  .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 4px 0 24px rgba(5, 15, 35, 0.35); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .sidebar-scrim { display: block; position: fixed; inset: var(--header-h) 0 0 0; background: rgba(5, 15, 35, 0.35); z-index: 24; }
  main { padding-left: 20px; padding-right: 20px; }
  .brand-sub, .brand-divider { display: none; }
}
@media (max-width: 640px) {
  .brand-name { font-size: 16px; }
  .header-sync { display: none; }
  main { padding-left: 12px; padding-right: 12px; }
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-in 0.15s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.panel-header h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.panel-desc { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }

.panel-header-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- 버튼 ---------- */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); border: 1px solid var(--primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--muted); }
.btn-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); box-shadow: var(--shadow-sm); }
.btn-danger:hover { background: var(--danger-hover); }
.btn-ghost { background: none; border: 1px solid transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--muted); color: var(--text); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible, .btn-ghost:focus-visible,
.filter-btn:focus-visible, .btn-icon:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--ring);
}
.btn-secondary .lucide, .btn-ghost .lucide { color: var(--text-muted); }
.spin .lucide, .lucide.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: none; background: none;
  font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.btn-icon:hover { color: var(--text); background: var(--muted); }

.btn-link {
  border: none; background: none; color: var(--accent); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 500; padding: 3px 6px; border-radius: 4px;
}
.btn-link:hover { background: var(--accent-bg); }
.btn-link.danger { color: var(--danger); }
.btn-link.danger:hover { background: var(--red-bg); }

/* 발주 관리: 미입고 원본 모드(구글 시트 / 웹 DB) 표시줄 */
.source-mode-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.source-mode-desc { font-size: 12.5px; color: var(--text-muted); }

/* 해외 출고 */
.badge.badge-차감 { background: var(--blue-bg); color: var(--blue-text); border-color: var(--blue-border); }
.toggle-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; align-self: flex-end; padding-bottom: 8px; cursor: pointer; }
.badge.badge-부분지급 { background: var(--blue-bg); color: var(--blue-text); border-color: var(--blue-border); }
/* 선금 100% 지급, 잔금 남음 */
.badge.badge-잔금미처리 { background: var(--orange-bg); color: var(--orange-text); border-color: var(--orange-border); }
.po-number-link { font-weight: 600; }
.payment-po-info { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--muted); font-size: 12.5px; }
/* 정산: [잔금지급필요] 태그(입고분 잔금 미지급). 입고율 100% 면 .full 로 더 진하게 */
.tag-balance-due {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: #B91C1C; background: #FEF2F2; border: 1px solid #FCA5A5;
}
.tag-balance-due.full { color: #FFFFFF; background: #DC2626; border-color: #DC2626; }
.badge.badge-임시등록 { background: #FEF3C7; color: #92400E; border-color: #FCD34D; } /* 임시 바코드 자동 등록 품목 */
.temp-barcode { color: #92400E; font-weight: 600; }
.badge.badge-진행중 { background: var(--blue-bg); color: var(--blue-text); border-color: var(--blue-border); } /* 발주 품목 통합 행: 상태가 섞인 경우 */
.badge.badge-미차감 { background: var(--gray-bg); color: var(--gray-text); border-color: var(--gray-border); }
.text-warn { color: var(--orange-text); font-weight: 600; }
.text-danger { color: #b91c1c; font-weight: 600; }
.text-ok { color: var(--green, #15803d); font-weight: 600; }
.note-cell { max-width: 220px; white-space: normal; word-break: break-word; }
.modal-section-title { margin: 16px 0 8px; font-size: 13px; font-weight: 600; }
.row-highlight td { background: var(--accent-bg); }

/* ---------- 필터 / 툴바 ---------- */
.filter-bar, .date-filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow-sm);
}
.filter-bar .field { min-width: 200px; flex: 1; }
.date-filter-bar .field { min-width: 150px; }
.date-filter-bar .status-filter { margin-bottom: 0; }

.status-filter {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  padding: 3px;
  background: var(--muted);
  border-radius: var(--radius);
}
.status-filter + .status-filter { margin-left: 8px; }
.filter-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.filter-btn:hover { color: var(--text); }
.filter-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
/* 재고 관리 화면 전환(재고 현황 / 전체 품목 현황) */
.view-switch { display: flex; width: fit-content; max-width: 100%; align-items: center; }
.view-switch .filter-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; font-size: 13px; }
.view-switch .filter-btn .lucide { width: 14px; height: 14px; }
.view-switch-sep { width: 1px; align-self: stretch; margin: 4px 6px; background: var(--border-strong); }
.view-switch-label { font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 0 4px 0 2px; }

.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--accent-bg);
  border: 1px solid var(--blue-border);
  border-radius: var(--radius);
  padding: 6px 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--blue-text);
}
.bulk-toolbar .btn-primary, .bulk-toolbar .btn-secondary, .bulk-toolbar .btn-danger { height: 28px; font-size: 12.5px; }
.bulk-toolbar select {
  height: 28px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: 12.5px; background: var(--surface); color: var(--text);
}

.form-info {
  background: var(--muted-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

/* ---------- 데이터 테이블 (고밀도 컴팩트) ---------- */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  max-height: calc(100vh - var(--header-h) - 150px); /* 상단 바 + 화면 제목·필터 높이 */
  box-shadow: var(--shadow-sm);
}
.table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.table-wrap::-webkit-scrollbar-track { background: var(--muted-2); }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--muted-2); }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; font-size: 13px; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; min-width: 84px; }
/* 대시보드 매출/출고 이력: 좁은 카드에서도 판매금액 열이 잘리지 않게 앞 열을 줄인다 */
.sales-table { min-width: 0; }
.sales-table th, .sales-table td { white-space: nowrap; }
.sales-table th.num, .sales-table td.num { min-width: 0; width: 1%; }
.sales-table th.num:last-child, .sales-table td.num:last-child { width: auto; }
.sales-table td:first-child { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.checkbox-col { width: 36px; text-align: center !important; padding-left: 10px !important; padding-right: 4px !important; }
.checkbox-col input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; vertical-align: middle; accent-color: var(--primary); }

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: #f5f8fc;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
thead th[data-sort] { cursor: pointer; user-select: none; }
thead th[data-sort]:hover { color: var(--text); background: var(--muted); }
thead th[data-sort]::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--text-subtle);
  opacity: 0.4;
}
thead th[data-sort].sort-asc::after { border-top: none; border-bottom: 5px solid var(--text); opacity: 1; }
thead th[data-sort].sort-desc::after { border-top: 5px solid var(--text); opacity: 1; }

/* ---------- 엑셀 스타일 머릿글 필터(public/js/table-filter.js) ---------- */
.tf-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px;
  padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--text-subtle);
  cursor: pointer; vertical-align: middle; opacity: 0.55; transition: opacity 0.12s, background 0.12s, color 0.12s;
}
thead th:hover .tf-btn, .tf-btn:focus-visible, .tf-btn.tf-open { opacity: 1; }
.tf-btn:hover, .tf-btn.tf-open { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.tf-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
thead th.tf-active { color: var(--accent); }
thead th.tf-active .tf-btn { opacity: 1; color: #fff; background: var(--accent); border-color: var(--accent); }
.tf-popup {
  position: fixed; z-index: 70; width: 280px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; gap: 8px;
  padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); font-size: 13px; color: var(--text); animation: dialog-in 0.12s ease-out;
}
.tf-head { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.tf-sort { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.tf-sort-btn { text-align: left; padding: 5px 8px; border: none; border-radius: var(--radius-sm); background: none; font: inherit; color: var(--text); cursor: pointer; }
.tf-sort-btn:hover { background: var(--muted); }
.tf-search {
  height: 32px; padding: 0 10px; border: 1px solid var(--input); border-radius: var(--radius-sm); font: inherit; font-size: 13px;
  background: var(--surface); color: var(--text);
}
.tf-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.tf-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 0; }
.tf-item { display: flex; align-items: center; gap: 8px; padding: 4px 10px; cursor: pointer; user-select: none; }
.tf-item:hover { background: var(--muted); }
.tf-item input { width: 14px; height: 14px; margin: 0; accent-color: var(--primary); flex-shrink: 0; }
.tf-all { padding-left: 11px; font-weight: 600; }
.tf-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-cnt { font-size: 11.5px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.tf-more { margin: 6px 10px; font-size: 12px; color: var(--text-muted); }
.tf-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tf-close { height: 28px; padding: 0 12px; }
.tf-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 8px; padding: 6px 10px;
  border: 1px solid var(--blue-border); border-radius: var(--radius-sm); background: var(--blue-bg); font-size: 12.5px;
}
.tf-bar.hidden { display: none; }
.tf-bar-label { font-weight: 600; color: var(--blue-text); }
.tf-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border: 1px solid var(--blue-border);
  border-radius: 999px; background: var(--surface); font: inherit; font-size: 12px; color: var(--text); cursor: pointer;
}
.tf-chip:hover { border-color: var(--accent); }
.tf-bar-count { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }

tbody td {
  padding: 6px 12px;
  height: 36px;
  border-bottom: 1px solid var(--muted);
  white-space: nowrap;
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) td { background: #fcfcfd; }
tbody td { transition: background-color 0.15s ease; }
tbody tr:hover td { background: #f3f6fd; } /* 행 호버: 은은한 블루 톤 */
/* 상품명이 바뀌는 첫 행: 품목 그룹 경계 강조(markGroupStart) */
tbody tr.group-start td { border-top: 2px solid #e5e7eb; }

/* 상품명 + 옵션 통합 셀(productCell) */
.pcell { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 3px; white-space: normal; min-width: 160px; }
.pname { font-weight: 600; color: #111; }
.pname-link {
  border: none; background: none; padding: 0; font: inherit; font-weight: 600; color: #111; text-align: left;
  cursor: pointer; border-radius: 3px; transition: color 0.15s ease;
}
.pname-link:hover { color: var(--accent); }
.pname-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* 옵션: 색상 옵션만 칩(OPTION_CHIP_CLASSES), 그 외 옵션은 굵은 텍스트(.opt-text) */
.opt-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  border: 1px solid transparent; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.opt-text { font-size: 12px; font-weight: 600; color: #3f3f46; white-space: nowrap; }
.opt-khaki    { background: #2E5A36; color: #FFFFFF; }
.opt-beige    { background: #FCEBD9; color: #5C3D1E; border-color: #E2D0B9; }
.opt-black    { background: #18181B; color: #FFFFFF; }
.opt-gray     { background: #E4E4E7; color: #27272A; }
.opt-blue     { background: #2563EB; color: #FFFFFF; }
.opt-pink     { background: #F472B6; color: #FFFFFF; }
.opt-wood     { background: #E8C1A0; color: #4A2810; }
.opt-silver   { background: #E2E8F0; color: #1E293B; border-color: #CBD5E1; }
.opt-titanium {
  background: linear-gradient(135deg, #64748B 0%, #E2E8F0 50%, #475569 100%); color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.opt-white    { background: #FFFFFF; color: #18181B; border-color: #D4D4D8; }
tbody tr:has(.row-check:checked) td { background: var(--accent-bg); }

tfoot td {
  position: sticky;
  bottom: 0;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--muted-2);
  border-top: 1px solid var(--border);
  white-space: nowrap;
}
tfoot td.num { font-variant-numeric: tabular-nums; }

.empty-state { text-align: center; color: var(--text-muted); padding: 36px 16px; font-size: 13px; margin: 0; }

/* ---------- 배지 ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  height: 22px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--gray-border);
  background: var(--gray-bg);
  color: var(--gray-text);
}
.badge-대기, .badge-기타, .badge-단품 { background: var(--gray-bg); color: var(--gray-text); border-color: var(--gray-border); }
.badge-승인, .badge-예정, .badge-세트, .badge-이관 { background: var(--blue-bg); color: var(--blue-text); border-color: var(--blue-border); }
.badge-입고완료, .badge-입고, .badge-지급완료, .badge-운영중, .badge-확정, .badge-완료 { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
.badge-취소, .badge-단종 { background: var(--red-bg); color: var(--red-text); border-color: var(--red-border); }
.badge-출고, .badge-지급대기, .badge-재고소진 { background: var(--orange-bg); color: var(--orange-text); border-color: var(--orange-border); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.badge-toggle { cursor: pointer; transition: filter 0.1s ease; }
.badge-toggle:hover { filter: brightness(0.95); box-shadow: 0 0 0 2px var(--ring); }

.row-actions { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; }
/* 표 칸(td)은 table-cell 로 둬야 높은 행(입고예정 여러 줄 등)에서도 칸 배경·구분선이 행 높이만큼 이어진다 */
td.row-actions { display: table-cell; white-space: nowrap; }
td.row-actions > * + * { margin-left: 2px; }
/* 행 버튼은 상세보기·확정 등 하나만 남으므로 그 칸은 내용 폭만 차지하고, 나머지 칸이 표 전체 폭을 나눠 쓴다 */
td.row-actions, th:empty:last-child { width: 1%; padding-right: 14px; }
/* 행마다 수정/삭제 대신: 체크박스 선택 + 상단 액션 바 */
.bulk-toolbar button[disabled] { opacity: 0.45; cursor: not-allowed; }
.modal-toolbar.po-line-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.po-line-actions { display: inline-flex; gap: 6px; }
.po-line-actions button[disabled] { opacity: 0.45; cursor: not-allowed; }
.row-actions .btn-primary { height: 26px; padding: 0 9px; font-size: 12px; }

/* ---------- 모달 (오버레이 다이얼로그) ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 11, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
  animation: fade-in 0.12s ease-out;
}
.modal-backdrop.hidden { display: none; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: dialog-in 0.16s ease-out;
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
#modal-form { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.modal-wide { max-width: 760px; }
/* EMP 입고 vs 웹 입고 불일치: 오른쪽 아래 상시 알림 + 검수/수정 모달(public/js/inbound-check.js) */
.inbound-alert {
  position: fixed; right: 20px; bottom: 20px; z-index: 45; width: min(340px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--orange-border); border-left: 4px solid var(--orange-text);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: dialog-in 0.2s ease-out;
}
.inbound-alert-title { font-size: 14px; font-weight: 600; color: var(--orange-text); }
.inbound-alert-desc { font-size: 12.5px; color: var(--text-muted); }
.inbound-alert .btn-primary { align-self: flex-end; }
.inbound-backdrop { z-index: 56; }
.inbound-body .form-info { margin: 0; line-height: 1.6; }
.inbound-table td { vertical-align: top; padding: 8px 8px !important; }
.inbound-table input.grid-num { width: 90px; }
.inbound-log { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.inbound-events { font-size: 12px; white-space: nowrap; }
.inbound-done { margin: 0; padding: 10px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green); font-weight: 600; }

/* 중요 정보 수정 비밀번호 입력창 — 다른 모든 팝업 위 */
.admin-pw-backdrop { z-index: 80; }
.admin-pw-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.admin-pw-body .form-actions { margin: 0; }

/* ---------- 다중 행 등록 그리드(public/js/grid.js) ---------- */
.grid-backdrop { z-index: 55; }
.modal.modal-grid { max-width: min(1440px, 97vw); max-height: 94vh; }
.grid-body { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; min-height: 0; }
.grid-body > .form-info { margin: 0; }
.grid-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grid-hint { font-size: 12px; color: var(--text-muted); margin-left: 6px; }
.grid-wrap { max-height: calc(94vh - 260px); min-height: 180px; }
.grid-table { min-width: 0; font-size: 13px; }
.grid-table thead th { padding: 8px 6px; font-size: 12px; }
.grid-table td { padding: 3px 4px; vertical-align: top; }
.grid-table .grid-no { width: 32px; text-align: center; color: var(--text-muted); padding-top: 9px; font-variant-numeric: tabular-nums; }
.grid-table input:not([type="checkbox"]), .grid-table select {
  width: 100%; min-width: 0; height: 30px; padding: 0 7px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px; box-sizing: border-box;
}
.grid-table input.grid-num { text-align: right; font-variant-numeric: tabular-nums; }
.grid-table input:focus, .grid-table select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.grid-table input.invalid, .grid-table select.invalid { border-color: var(--red-text, #b91c1c); background: var(--red-bg, #fef2f2); }
.grid-table .checkbox-col { padding-top: 9px !important; }
.grid-msg-col { min-width: 220px; }
.grid-msg { font-size: 12px; line-height: 1.45; padding: 6px 8px !important; white-space: normal; min-width: 220px; max-width: 320px; }
.grid-err { color: var(--red-text, #b91c1c); font-weight: 500; }
.grid-warn { color: var(--orange-text); }
.grid-ok { color: var(--green, #15803d); }
.grid-table .req { color: var(--red-text, #b91c1c); }
.grid-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grid-summary { font-size: 13px; color: var(--text-muted); }
.grid-footer .form-actions { margin: 0; }
/* 예정 일괄 수정(public/js/schedule-bulk-edit.js) */
.bulk-apply { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); }
.bulk-apply-item { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.bulk-apply-item label { font-weight: 600; font-size: 12.5px; }
.bulk-apply-item input { height: 30px; padding: 0 7px; border: 1px solid var(--border); border-radius: 5px; font: inherit; background: var(--surface); color: var(--text); }
.grid-table tr.be-changed td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.country-chips { margin: 0 0 8px; flex-wrap: wrap; }
.country-chips:empty { display: none; }
.filter-btn.chip-past:not(.active) { color: var(--orange-text); } /* 지난 예정일(미확정) 칩 */
/* 해외 출고 예정일 '미정': 표시 뱃지 + 날짜 칸 옆 [미정] 체크(모달·그리드·일괄 수정) */
.badge.badge-undecided { background: var(--orange-bg); color: var(--orange-text); border-color: var(--orange-border); }
.label-with-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.undecided-toggle {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.undecided-toggle input { width: 14px !important; height: 14px !important; margin: 0; accent-color: var(--primary); }
.grid-date-wrap { display: flex; align-items: center; gap: 6px; }
.grid-date-wrap input[type="date"] { flex: 1; }
.grid-table input:disabled, .field input:disabled { background: var(--muted); color: var(--text-subtle); cursor: not-allowed; }
td > input[type="date"] + .undecided-toggle { margin-left: 6px; }
.badge.badge-country { background: var(--violet-bg); color: var(--violet-text); border-color: var(--violet-border); }

/* 품목 수정 최종 확인 팝업(연결된 발주서 변경 안내) — 품목 수정 모달 위에 뜬다 */
.impact-backdrop { z-index: 60; }
.impact-body { padding: 16px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.impact-body .table-wrap { max-height: 46vh; overflow-y: auto; }
.impact-change { display: grid; grid-template-columns: 64px 1fr; gap: 4px 10px; font-size: 13px; }
.impact-change .from { color: var(--text-muted, #71717a); text-decoration: line-through; margin-right: 6px; }
.impact-change .to { font-weight: 600; color: var(--accent); }
.impact-body .form-actions { margin-top: 4px; }

/* ---------- 폼 ---------- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12.5px; font-weight: 500; color: var(--text); }
.field input, .field select, .field textarea, .input {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field textarea { height: auto; min-height: 72px; padding: 8px 10px; }
.field input[type="file"] { height: auto; padding: 6px; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
.field input[readonly] { background: var(--muted); color: var(--text-muted); cursor: not-allowed; }
.field-inline { flex-direction: row; align-items: center; gap: 6px; }
.field-inline label { font-weight: 400; }

.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.form-error {
  background: var(--red-bg); color: var(--red-text); border: 1px solid var(--red-border);
  padding: 8px 10px; border-radius: var(--radius-sm); font-size: 12.5px; display: none;
}
.form-error.visible { display: block; }

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: min(460px, calc(100vw - 40px));
  background: var(--primary);
  color: var(--primary-fg);
  padding: 11px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  z-index: 100;
  box-shadow: var(--shadow-lg);
  animation: dialog-in 0.16s ease-out;
}
.toast.hidden { display: none; }
.toast.error { background: var(--danger); }

/* ---------- 서브 탭 ([입출고 관리]) ---------- */
.subtab-panel { display: none; }
.subtab-panel.active { display: block; }
.inline-actions { justify-content: flex-end; margin-bottom: 12px; }
.inventory-subtitle { margin: 0 0 12px; }

.actual-qty-input {
  width: 84px; height: 28px; padding: 0 8px; border: 1px solid var(--input);
  border-radius: var(--radius-sm); font: inherit; font-size: 12.5px; text-align: right;
}
.actual-qty-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.actual-qty-input:disabled { background: var(--muted); color: var(--text-muted); }
.scheduled-dates { font-size: 12.5px; color: var(--text-muted); }
/* 재고 현황 입고예정 수량 / 예정일 1:1 표기 */
.sched-sep { color: var(--text-subtle); }
.sched-total { font-size: 11px; color: var(--text-subtle); line-height: 1.2; }

/* ---------- 상세보기(입출고 이력) / 공용 팝업 본문 ---------- */
.history-timeline {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
.history-timeline .table-wrap { max-height: none; }

/* 발주 관리 > 상품명 클릭 상세(발주 잔량 / 정산 / 국내 입고예정 / 해외 출고) — 넓은 화면·큰 글자 */
.modal.modal-xl { max-width: min(1320px, 96vw); max-height: 94vh; }
.modal.modal-xl .modal-header h3 { font-size: 17px; }
.po-detail-view { padding: 20px 28px 28px; gap: 14px; }
.po-detail-view .order-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 6px; }
.po-detail-view .order-card { padding: 18px 20px; gap: 8px; }
.po-detail-view .order-card span { font-size: 14px; font-weight: 500; }
.po-detail-view .order-card strong { font-size: 30px; }
.po-detail-view > .form-info { font-size: 13px; line-height: 1.6; }
.po-detail-view .modal-section-title { margin: 18px 0 2px; font-size: 15px; }
.po-detail-view table { min-width: 0; table-layout: auto; font-size: 14px; }
.po-detail-view thead th { font-size: 13px; padding: 10px 14px; }
.po-detail-view tbody td { padding: 10px 14px; white-space: nowrap; }
.po-detail-view th.num, .po-detail-view td.num { min-width: 0; }
.po-detail-view .note-cell { white-space: normal; max-width: 280px; }
.po-detail-view .badge { font-size: 12.5px; }
@media (max-width: 900px) {
  .po-detail-view { padding: 16px; }
  .po-detail-view .order-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po-detail-view .order-card strong { font-size: 24px; }
  .po-detail-view tbody td { white-space: normal; }
}
.history-card {
  display: grid;
  grid-template-columns: 86px 120px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.history-card:hover { background: var(--muted-2); }
.history-card-date { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.history-card-qty { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.history-card-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.history-card-note { font-size: 12px; color: var(--text-muted); grid-column: 1 / -1; border-top: 1px dashed var(--border); padding-top: 6px; }
.history-empty { text-align: center; color: var(--text-muted); padding: 32px; font-size: 13px; margin: 0; }
.history-filter { margin-bottom: 0; padding: 10px; gap: 10px; box-shadow: none; background: var(--muted-2); }
.history-filter .field { min-width: 140px; }
.history-range { margin: 0; font-size: 12px; color: var(--text-muted); }
.history-timeline-list { display: flex; flex-direction: column; gap: 8px; }

/* ---------- 당일 예정 알림 팝업 ---------- */
.notification-modal { max-width: 420px; }
.notification-body { padding: 18px 20px; font-size: 14px; line-height: 1.7; }
.notification-body p { margin: 0 0 6px; }
.notification-actions { padding: 0 20px 18px; flex-wrap: wrap; }
.schedule-notification-items { margin: 0 0 10px; padding-left: 18px; font-size: 13px; color: var(--text); }
.schedule-notification-items li { margin: 1px 0; }
/* 알림에서 '오늘 예정 보기'로 이동했을 때 잠깐 강조 */
tr.row-flash > td { animation: row-flash 2.4s ease-out; }
@keyframes row-flash { 0%, 40% { background: #fef3c7; } 100% { background: transparent; } }
/* 처리 결과 알림 팝업(재고 반영 생략·재검수 안내) */
.info-popup-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }

/* ---------- EMP 재고 검수 요약 카드 / 오차 목록 ---------- */
.verify-bar { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.verify-card {
  display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); text-align: left; font: inherit; color: var(--text);
}
.verify-card strong { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.verify-card-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.verify-card-ok strong { color: var(--green); }
.verify-card-warn { cursor: pointer; }
.verify-card-warn:hover { border-color: var(--orange-border); background: var(--orange-bg); }
.verify-card-warn.has-warn { background: var(--orange-bg); border-color: var(--orange-border); }
.verify-card-warn.has-warn strong { color: var(--orange-text); }
.verify-meta { align-self: center; margin: 0; font-size: 12px; color: var(--text-muted); }
.discrepancy-panel { margin-bottom: 14px; max-height: min(60vh, 560px); } /* 합계 행(sticky)이 화면 안에 보이도록 */
/* ---------- 발주서 작성(public/js/po-contract.js) ---------- */
.pc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1100px) { .pc-grid { grid-template-columns: 1fr; } }
.pc-head, .pc-seller { padding: 14px 16px; }
.pc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; }
.pc-inline { display: flex; gap: 6px; }
.pc-inline input { flex: 1; min-width: 0; }
.pc-template-note { margin: 10px 0 0; }
.pc-seller { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 12.5px; }
@media (max-width: 700px) { .pc-seller { grid-template-columns: 1fr; } }
.pc-seller h4 { margin: 0 0 6px; font-size: 12.5px; }
.pc-seller p { margin: 0 0 3px; line-height: 1.45; word-break: break-word; }
.pc-section-title { margin: 6px 0 8px; font-size: 14px; }
.pc-lines-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pc-lines-toolbar button[disabled] { opacity: 0.45; cursor: not-allowed; }
.pc-lines td { padding: 4px 6px; }
.pc-lines input:not([type="checkbox"]) {
  width: 100%; min-width: 0; height: 30px; padding: 0 8px; font: inherit; font-size: 13px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px; box-sizing: border-box;
}
.pc-lines input.grid-num { text-align: right; font-variant-numeric: tabular-nums; }
.pc-lines input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
.pc-no-col { width: 40px; text-align: center; color: var(--text-muted); }
.pc-line-total { font-weight: 600; }
.pc-total-label { text-align: right; font-weight: 700; }
tr.pc-current td { background: var(--accent-bg); }

/* 발주서 미리보기(A4, 양식 여백: 위 20mm · 좌우 30mm · 아래 10mm) */
.cp-backdrop { z-index: 65; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; }
.cp-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px;
  background: var(--surface); border-bottom: 1px solid var(--border); font-size: 13px;
}
.cp-toolbar button { margin-left: 6px; }
.cp-scroll { flex: 1; overflow: auto; padding: 24px 16px 40px; }
/* 양식(Word)과 같은 A4 2쪽(2026-10-02): 쪽마다 고정 높이, 2쪽은 '6.' 조항부터, 2쪽 아래에 9. Collection information·서명란·계약일자.
   줄 높이 = 맑은 고딕 Word '1줄' 높이(--cp-lh 1.747em, 실측: 10pt 1.5줄 = 26.2pt) × 양식 문단의 줄 간격 배수(--cp-ml, 양식 1.5줄).
   넘칠 때 처리는 po-contract.js pcFitPages(간격 비율 축소 → 조항 2쪽으로 이동 → cp-flowmode). */
/* Word(COM)로 잰 양식 실측값. --cp-k = 넘칠 때 함께 줄이는 비율(1 → 최소 0.83, po-contract.js pcFitPages) */
.cp-doc {
  --cp-k: 1; --cp-lh: calc(1.747 * var(--cp-k)); --cp-row: calc(8.25mm * var(--cp-k)); --cp-head-row: calc(13.2mm * var(--cp-k));
  --cp-cell-lh: calc(1.4 * var(--cp-k)); --cp-table-gap: calc(10.5mm * var(--cp-k));
}
.cp-page {
  width: 210mm; height: 297mm; margin: 0 auto 16px; padding: 20mm 30mm 10mm; box-sizing: border-box; background: #fff; color: #000;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); font-family: 'Malgun Gothic', '맑은 고딕', 'Pretendard Variable', sans-serif;
  font-size: 10pt; line-height: var(--cp-lh); display: flex; flex-direction: column; overflow: hidden;
}
.cp-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.cp-body > *, .cp-main, .cp-closing > * { flex-shrink: 0; } /* 넘침을 줄여서 숨기지 않게(높이 측정 = 실제 내용) */
.cp-closing { margin-top: auto; padding-top: 4mm; } /* 2쪽 하단에 붙임(위쪽 최소 한 줄 간격) */
.cp-body::after { content: ''; flex: 0 1 14mm; } /* 서명란 아래 여유 — 공간이 모자라면 먼저 줄어든다 */
.cp-p {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  line-height: calc(var(--cp-lh) * var(--cp-ml, 1)); /* Word '배수' 줄 간격과 같은 방식 */
}
.cp-p.cp-empty { white-space: normal; }
.cp-b { font-weight: 700; }
.cp-title { letter-spacing: 0.04em; }
.cp-split { display: flex; justify-content: space-between; gap: 12px; }
.cp-table { width: 100%; min-width: 0; border-collapse: collapse; margin: 0 0 var(--cp-table-gap); font-size: 10pt; line-height: var(--cp-cell-lh); table-layout: fixed; }
.cp-table th, .cp-table td {
  border: 1px solid #000 !important; padding: 0.5mm 1.8mm; height: var(--cp-row); text-align: center; vertical-align: middle; /* 양식(Word 실측): 행 8.25mm·머리글 13.2mm·칸 여백 0.5/1.8mm */
  white-space: normal; word-break: break-word; background: #fff !important; color: #000; position: static; font-weight: 400;
}
.cp-table th { font-weight: 700; height: var(--cp-head-row); line-height: var(--cp-cell-lh); }
.cp-table td:nth-child(n+4) { text-align: right; }
.cp-table tr.cp-total td { font-weight: 700; }
/* 품목이 아주 많을 때: 고정 2쪽 대신 자연스럽게 여러 쪽(표 행은 쪽에 걸쳐 잘리지 않고 머리글 반복) */
.cp-flowmode .cp-page { height: auto; min-height: 297mm; overflow: visible; }
.cp-flowmode .cp-body { overflow: visible; }
.cp-flowmode .cp-table tr { break-inside: avoid; }
.cp-flowmode .cp-closing { break-inside: avoid; } /* 9. Collection information ~ 서명란 ~ 계약일자는 한 쪽에 함께 */
.cp-head { break-after: avoid; }
@media (max-width: 860px) { .cp-page { transform-origin: top left; zoom: 0.55; } }
@media print {
  @page { size: A4; margin: 0; }
  @page cpflow { size: A4; margin: 20mm 30mm 10mm; } /* 여러 쪽 흐름일 때는 쪽마다 양식 여백 */
  body.printing-contract { background: #fff !important; }
  body.printing-contract > *:not(.cp-backdrop) { display: none !important; }
  body.printing-contract .cp-backdrop { position: static; display: block; background: none; backdrop-filter: none; animation: none; }
  body.printing-contract .cp-toolbar { display: none !important; }
  body.printing-contract .cp-scroll { overflow: visible; padding: 0; }
  /* 쪽 높이를 A4 보다 아주 조금 작게: 반올림으로 빈 3쪽이 생기지 않게 */
  body.printing-contract .cp-page { box-shadow: none; margin: 0; zoom: 1; height: 296.5mm; break-after: page; page-break-after: always; }
  body.printing-contract .cp-page:last-child { break-after: auto; page-break-after: auto; }
  /* 여러 쪽 흐름: 두 쪽 상자를 이어서(표 끝 바로 아래부터 조항) 흘린다 */
  body.printing-contract .cp-flowmode .cp-page { page: cpflow; width: auto; height: auto; min-height: 0; padding: 0; break-after: auto; page-break-after: auto; }
  body.printing-contract .cp-flowmode .cp-body::after { display: none; }
}

/* 재고 실사 관리(public/js/stock-count.js) */
#tab-stockcount table select, .sc-note {
  height: 28px; padding: 0 8px; border: 1px solid var(--input); border-radius: var(--radius-sm);
  font: inherit; font-size: 12.5px; background: var(--surface); color: var(--text);
}
.sc-note { width: 160px; }
.sc-center { text-align: center; }
#tab-stockcount .bulk-toolbar { flex-wrap: wrap; }
#tab-stockcount .actual-qty-input.invalid { border-color: var(--red-text); background: var(--red-bg); }
.sc-entry-footer {
  position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.sc-entry-footer .form-actions { margin: 0; }
body[data-tab="stockcount"] .inbound-alert { bottom: 96px; } /* 하단 [실사 반영] 버튼을 가리지 않도록 */
.verify-card-sub { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: var(--accent-bg) !important; }
.diff-minus, .diff-minus strong { color: var(--danger); font-weight: 600; }
.diff-plus, .diff-plus strong { color: var(--blue-text); font-weight: 600; }
.btn-warn-badge {
  margin-left: 6px; padding: 1px 7px; border: 1px solid var(--orange-border); border-radius: 999px; cursor: pointer;
  background: var(--orange-bg); color: var(--orange-text); font: inherit; font-size: 11.5px; font-weight: 600;
}
.badge-warn { background: var(--orange-bg); color: var(--orange-text); border-color: var(--orange-border); margin: 0 6px 6px 0; }

/* 오차 추적 이력 팝업 */
.trace-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px; }
.trace-summary div { background: var(--muted-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; }
.trace-summary span { font-size: 11.5px; color: var(--text-muted); }
.trace-summary strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.trace-window { font-size: 12px; color: var(--text-muted); margin: 8px 0; }
.trace-section { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 8px; }
.trace-section h4 { margin: 0 0 6px; font-size: 13px; }
.trace-count { font-weight: 400; color: var(--text-muted); font-size: 12px; }
.trace-section ul { list-style: none; margin: 0; padding: 0; }
.trace-section li { display: grid; grid-template-columns: 130px 70px 1fr; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.trace-section li strong { text-align: right; font-variant-numeric: tabular-nums; }
.trace-section li em { font-style: normal; color: var(--text-muted); }
.trace-none { margin: 0; font-size: 12px; color: var(--text-muted); }

/* ---------- 주문 집계 ---------- */
.order-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.order-card {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.order-card span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.order-card strong { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.order-card-shipped span .lucide { color: var(--green); }
.order-card-picking span .lucide { color: var(--blue-text); }
.order-card-cancelled span .lucide { color: var(--red-text); }
/* 판매처 아래 수신처(카고몰 거래처) 하위 행 */
.child-row td { background: var(--muted-2); font-size: 12.5px; color: var(--gray-text); }
.child-row td:first-child { padding-left: 28px; }
.tree-child { display: inline-flex; align-items: center; gap: 6px; }
.tree-branch { color: var(--text-subtle); font-size: 12px; }

/* 팝업 상단 검색줄 */
.modal-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.modal-toolbar .field { flex: 1; max-width: 360px; }
.modal-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; padding-bottom: 8px; }

.progress { position: relative; height: 16px; min-width: 120px; background: var(--muted); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--green); border-radius: 999px; }
.progress span { position: absolute; inset: 0; font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; color: var(--text); }

/* =====================================================================
   대시보드
   ===================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 0; }
.card-title { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-title .lucide { color: var(--text-muted); }
.card-desc { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.card-body { padding: 12px 16px 16px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 112px; }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.kpi-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: var(--radius-sm); background: var(--muted); color: var(--text-muted);
}
.kpi-icon.tone-blue { background: var(--blue-bg); color: var(--blue-text); }
.kpi-icon.tone-green { background: var(--green-bg); color: var(--green); }
.kpi-icon.tone-orange { background: var(--orange-bg); color: var(--orange-text); }
.kpi-icon.tone-red { background: var(--red-bg); color: var(--red-text); }
.kpi-icon.tone-violet { background: var(--violet-bg); color: var(--violet-text); }
.kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.kpi-value small { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 3px; letter-spacing: 0; }
.kpi-sub { font-size: 12px; color: var(--text-muted); }
.kpi-sub b { color: var(--text); font-weight: 600; }
.kpi-card.is-alert { border-color: var(--orange-border); }
.kpi-card.is-alert .kpi-value { color: var(--orange-text); }
.kpi-card[data-goto] { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.kpi-card[data-goto]:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

.dash-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dash-filter-row .status-filter { margin: 0; }
.dash-range { font-size: 12px; color: var(--text-muted); }

.chart-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.chart-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.chart-box { position: relative; height: 280px; }
.chart-box.small { height: 220px; }
.chart-box canvas { max-width: 100%; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.chart-note { font-size: 11.5px; color: var(--text-subtle); margin: 8px 0 0; }
.chart-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; font-size: 12.5px; color: var(--text-muted); background: var(--surface);
}
.card-toggle { font-size: 12px; }

/* 입출고 추이 / 판매처 비중 카드: 같은 줄의 두 카드 높이를 맞추고(그리드 stretch), 내용이 카드 높이를 채우게 한다 */
.card-fill { display: flex; flex-direction: column; min-width: 0; }
.card-fill > .card-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chart-box-fill { flex: 1; min-height: 280px; height: auto; }
.status-filter-sm { align-self: flex-start; margin-bottom: 10px; }
.status-filter-sm .filter-btn { padding: 4px 10px; font-size: 12px; }
.dash-filter-label { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-right: -4px; }
.donut-wrap { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.donut-box { position: relative; height: 180px; flex-shrink: 0; }
/* contain: size -> 목록 길이가 카드 높이를 늘리지 않고, 옆 카드(입출고 추이)에 맞춰진 남은 높이 안에서 스크롤된다 */
.share-list { flex: 1; min-height: 168px; contain: size; overflow-y: auto; }
.share-table { width: 100%; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center strong { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.donut-center span { font-size: 11px; color: var(--text-muted); }
.share-table { min-width: 0; font-size: 12.5px; }
.share-table td { height: 28px; padding: 3px 6px; background: none !important; }
.share-table td.num { min-width: 0; width: 1%; }
.share-table td:first-child { padding-left: 0; }
.share-table .share-name { display: flex; align-items: center; gap: 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-table td:first-child { max-width: 0; width: 100%; }
.share-table .share-child td { font-size: 12px; color: var(--text-muted); height: 24px; }
.share-table .share-child .share-name { padding-left: 17px; gap: 5px; }
.share-table .share-zero td { color: var(--text-subtle); }
.share-table .share-name span:last-child { overflow: hidden; text-overflow: ellipsis; }

.data-table-view { margin-top: 10px; max-height: 260px; }
.data-table-view table { min-width: 0; font-size: 12px; }

/* 과거 데이터 관리 */
.history-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.coverage-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.coverage-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted-2); }
.coverage-list b { font-weight: 600; }
.coverage-list span { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > .field { flex: 1; min-width: 130px; }
.check-row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.check-row label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.check-row input { accent-color: var(--primary); }
.result-box { font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--muted-2); padding: 8px 10px; max-height: 180px; overflow: auto; }
.result-box p { margin: 0 0 4px; }
.result-ok { color: var(--green); }
.result-fail { color: var(--red-text); }
.muted { color: var(--text-muted); }

.hidden { display: none !important; }
[hidden] { display: none !important; }

@media (max-width: 1100px) {
  .chart-grid, .chart-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .donut-box { height: 180px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-value { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 발주서 작성: 영문이 아닌(비었거나 한글) Content·Material 칸 (po-contract.js markPcEnglish) */
#tab-pocontract input.pc-not-en { border-color: var(--danger, #dc2626) !important; background: color-mix(in srgb, var(--danger, #dc2626) 6%, transparent); }

/* ================= 주문 관리: 이지어드민 실판매가 연동 (public/js/ezadmin.js) ================= */
#tab-orders .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
#tab-orders .section-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
#tab-orders .section-head h3 .muted { font-weight: 500; font-size: 13px; }
.ez-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ez-tools input[type="text"] { height: 34px; width: 240px; padding: 0 10px; border: 1px solid var(--input); border-radius: var(--radius-sm); font: inherit; font-size: 13px; background: var(--surface); }

.ez-dropzone {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin: 4px 0 12px;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface);
  cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.ez-dropzone:hover, .ez-dropzone:focus-visible { border-color: var(--accent); background: var(--accent-bg); outline: none; box-shadow: 0 0 0 3px var(--ring); }
.ez-dropzone.dragover { border-color: var(--accent); border-style: solid; background: var(--accent-bg); }
.ez-dropzone.busy { opacity: .7; pointer-events: none; }
.ez-dropzone-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-bg); color: var(--blue-text); }
.ez-dropzone-icon svg { width: 22px; height: 22px; }
.ez-dropzone-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ez-dropzone-text strong { font-size: 14.5px; }
.ez-dropzone-text span { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.ez-dropzone-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; border-radius: var(--radius-sm); }
.ez-dropzone-btn svg { width: 15px; height: 15px; }

.ez-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0 0 12px; border-radius: var(--radius); border: 1px solid var(--green-border); background: var(--green-bg); color: var(--green); font-size: 13.5px; }
.ez-banner strong { font-size: 14.5px; }
.ez-banner .ez-banner-sub { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.ez-banner.warn { border-color: var(--orange-border); background: var(--orange-bg); color: var(--orange-text); }
.ez-banner.error { border-color: var(--red-border); background: var(--red-bg); color: var(--red-text); }
.ez-banner button { margin-left: auto; background: none; border: none; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }

.ez-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 4px; }
@media (max-width: 1100px) { .ez-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ez-kpis { grid-template-columns: 1fr; } .ez-dropzone { flex-wrap: wrap; } .ez-tools input[type="text"] { width: 100%; } }
.ez-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ez-kpi-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.ez-kpi-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.ez-kpi-icon svg { width: 16px; height: 16px; }
.ez-kpi-blue { background: var(--blue-bg); color: var(--blue-text); }
.ez-kpi-green { background: var(--green-bg); color: var(--green); }
.ez-kpi-violet { background: var(--violet-bg); color: var(--violet-text); }
.ez-kpi-orange { background: var(--orange-bg); color: var(--orange-text); }
.ez-kpi-value { display: flex; align-items: baseline; gap: 4px; }
.ez-kpi-value strong { font-size: 26px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.ez-kpi-value span { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.ez-kpi-sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.ez-kpi-bar { height: 6px; border-radius: 99px; background: var(--muted); overflow: hidden; }
.ez-kpi-bar > div { height: 100%; width: 0; border-radius: 99px; background: var(--green); transition: width .3s ease; }

/* 판매처 파스텔 배지: 색은 ezadmin.js CHANNEL_COLORS(배경/글자) */
.ch-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--ch-bg, var(--gray-bg)); color: var(--ch-fg, var(--gray-text)); border: 1px solid var(--ch-bd, transparent); }
/* 연동 상태 태그 */
.ez-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 650; white-space: nowrap; border: 1px solid; }
.ez-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ez-status.linked { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.ez-status.unlinked { color: var(--orange-text); background: var(--orange-bg); border-color: var(--orange-border); }
/* 추정 연동(같은 바코드 최근 실판매가로 단가 추정) = 노란색 */
.ez-status.estimated { color: #854d0e; background: #fef9c3; border-color: #fde047; }
/* 예약/출고대기(파랑) · 정상 취소 · CS/샘플 출고(회색) */
.ez-status.pending { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }
.ez-status.cancelled, .ez-status.cs { color: #52525b; background: #f4f4f5; border-color: #d4d4d8; }
/* 상태 배지 = 작업 메뉴 버튼(상태 변경·수동 연동·상품 지정) */
.ez-status.ez-status-btn { cursor: pointer; }
.ez-status.ez-status-btn::after { content: '▾'; font-size: 9px; margin-left: 1px; opacity: .7; }
.ez-status.ez-status-btn:hover, .ez-status.ez-status-btn:focus-visible { box-shadow: 0 0 0 3px var(--ring); outline: none; }
.ez-menu { position: absolute; z-index: 60; min-width: 230px; padding: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); display: flex; flex-direction: column; }
.ez-menu-head { padding: 6px 8px 2px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.ez-menu button { text-align: left; padding: 7px 10px; border: 0; background: transparent; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text); }
.ez-menu button:hover, .ez-menu button:focus-visible { background: var(--accent-bg); outline: none; }
/* 송장 매칭 시 수령자(이름·주소 해시) 확인 */
.ez-id-tag { display: inline-block; margin-top: 3px; padding: 0 6px; border-radius: 99px; font-size: 10.5px; font-weight: 600;
  color: var(--green); background: var(--green-bg); border: 1px solid var(--green-border); }
.ez-id-tag.bad { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
/* 결산 검증 리포트 */
.ez-rec-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ez-rec-card { flex: 1 1 180px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.ez-rec-card span { display: block; font-size: 12px; color: var(--text-muted); }
.ez-rec-card strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.ez-rec-ok { color: var(--green); font-weight: 700; white-space: nowrap; }
.ez-rec-ng { color: var(--orange-text); font-weight: 700; white-space: nowrap; }
.ez-rec-table th, .ez-rec-table td { white-space: nowrap; font-size: 12.5px; }
.ez-rec-table td.num, .ez-rec-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ez-rec-table tr.ez-rec-total td { font-weight: 700; border-top: 2px solid var(--border-strong); }
.ez-rec-table tr.ez-rec-cs td { color: var(--text-muted); }
/* 표에서 바로 수정(미연동 줄의 실판매가·정산금액): 점선 밑줄 + 연필 커서 */
#table-ezadmin td.ez-qe { cursor: pointer; }
#table-ezadmin td.ez-qe .ez-qe-val { border-bottom: 1px dashed var(--border-strong, #a1a1aa); padding-bottom: 1px; }
#table-ezadmin td.ez-qe:hover { background: var(--accent-bg, #eff6ff); }
#table-ezadmin td.ez-qe input { width: 110px; height: 28px; padding: 0 6px; text-align: right; font: inherit; font-variant-numeric: tabular-nums;
  border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--surface); }
.ez-est-val { color: #a16207; font-style: italic; }
.ez-manual-mark { margin-left: 4px; font-size: 10.5px; font-weight: 700; color: var(--green); }
.ez-status-note { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-muted); white-space: normal; max-width: 260px; }
/* 세트 구성품(같은 송장의 EMP 단품 출고를 세트 주문 아래 하위 행으로) · 등록 세트 태그 */
.ez-status.component { color: #166534; background: #f0fdf4; border-color: #bbf7d0; font-weight: 600; }
#table-ezadmin tr.ez-comp-row td { background: #fbfefc; border-top-style: dashed; }
#table-ezadmin tr.ez-comp-row .ez-comp-name { padding-left: 14px; }
.ez-set-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 99px; font-size: 10.5px; font-weight: 650;
  color: #5b21b6; background: #ede9fe; border: 1px solid #ddd6fe; vertical-align: middle; }
/* 검토 필요(후보 2개 이상 · 약한 매칭 · 세트 부모 애매) + 매칭 기준 태그 */
.ez-status.review { color: #6b21a8; background: #faf5ff; border-color: #e9d5ff; }
.ez-review-btn { margin-left: 6px; padding: 2px 9px; font-size: 12px; }
.ez-match-tag { display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 600; vertical-align: middle;
  color: #3f3f46; background: #f4f4f5; border: 1px solid #e4e4e7; cursor: help; }
.ez-match-tag.mgmt, .ez-match-tag.order { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }
.ez-match-tag.set_by_order { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.ez-match-tag.bom-diff { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.ez-match-tag.manual { color: #6b21a8; background: #faf5ff; border-color: #e9d5ff; }
#modal-ezv-actions, .grid-body .modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* 세트 구성표(BOM): 세트 미등록 · 구성품 후보 · 출고 없음(사은품), 초안 표시, 세트 구성품 관리 창 */
.ez-status.set_unregistered { color: #9a3412; background: #fff7ed; border-color: #fed7aa; }
.ez-status.set_candidate { color: #52525b; background: #fafafa; border: 1px dashed #d4d4d8; font-weight: 600; }
.ez-status.no_ship { color: #52525b; background: #f4f4f5; border-color: #d4d4d8; }
.ez-status.direct { color: #075985; background: #f0f9ff; border-color: #bae6fd; } /* EMP 직접 주문(이지어드민에 없는 주문) */
.ez-status.review_candidate { color: #6b21a8; background: #fdfaff; border: 1px dashed #e9d5ff; font-weight: 600; }
.ez-match-tag.bom { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.ez-draft { margin-top: 3px; font-size: 12px; color: #9a3412; }
.ezb-group { margin: 14px 0 6px; font-size: 13px; }
.ezb-comp { white-space: nowrap; }
.ezb-comp input { width: 52px; padding: 2px 4px; margin-left: 2px; }
.ezb-alt { margin-top: 3px; font-size: 12px; color: var(--text-muted); }
/* 발주 관리 > FIFO 키 비교 카드(public/js/fifo-key.js) */
.fifo-key-card { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card, #fff); font-size: 13px; }
.fifo-key-card .fk-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fifo-key-card .fk-actions { display: flex; gap: 6px; }
.fifo-key-card .fk-mode { display: inline-block; margin: 0 6px; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: #f4f4f5; color: #3f3f46; border: 1px solid #e4e4e7; }
.fifo-key-card .fk-mode.compare { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.fifo-key-card .fk-mode.item { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.fifo-key-card .fk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 10px 0 6px; }
.fifo-key-card .fk-stats div { display: flex; flex-direction: column; gap: 2px; }
.fifo-key-card .fk-stats span { color: var(--text-muted); font-size: 12px; }
.fifo-key-card .fk-stats strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.fifo-key-card .fk-stats small { color: var(--text-muted); font-size: 11.5px; }
.fifo-key-card .fk-criteria { color: var(--text-muted); font-size: 12.5px; }
.fk-ok { color: var(--green); font-weight: 600; }
.fk-ng { color: #b91c1c; font-weight: 600; }
tr.fk-diff-row td { background: #fef2f2; }
@media (max-width: 720px) { .fifo-key-card .fk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* DB 백업 실패·지연 경고(대시보드 상단) */
.backup-alert { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; font-size: 13.5px; }
.backup-alert svg { width: 16px; height: 16px; flex: none; }
/* 조회 기준 토글(출고일 / 주문일) */
.ez-basis-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ez-basis-toggle button { border: 0; background: transparent; padding: 5px 11px; font: inherit; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.ez-basis-toggle button + button { border-left: 1px solid var(--border); }
.ez-basis-toggle button.active { background: var(--accent, #18181b); color: #fff; font-weight: 600; }
/* 금액 칸: 우측 정렬·고정폭 숫자, 실판매가 강조 */
#table-ezadmin td.num, #table-ezadmin th.num { text-align: right; }
#table-ezadmin .ez-amount { font-variant-numeric: tabular-nums; font-size: 13.5px; white-space: nowrap; }
#table-ezadmin .ez-sale { font-weight: 700; color: var(--text); }
#table-ezadmin .ez-settle { font-weight: 600; color: var(--blue-text); }
#table-ezadmin .ez-fee { color: var(--text-muted); }
#table-ezadmin .ez-ids { font-variant-numeric: tabular-nums; font-size: 12.5px; line-height: 1.5; }
#table-ezadmin .ez-ids .muted { font-size: 11.5px; }
#table-ezadmin tr.ez-emp-row td { background: var(--muted-2); }
#table-ezadmin tfoot td { font-weight: 700; }

/* =====================================================================
   대시보드 정돈(2026-10-08): 브랜드 배너 + 우측 확인 필요·빠른 실행 + 미니 표/막대
   ===================================================================== */
.dash-banner {
  position: relative; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 18px 64px 18px 22px; margin-bottom: 14px; border-radius: var(--radius-lg); color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, #1f4a8f 0%, rgba(31, 74, 143, 0) 55%), linear-gradient(115deg, #0e1d3a 0%, #163363 55%, #1d4580 100%);
  box-shadow: 0 6px 18px -8px rgba(14, 29, 58, 0.55);
}
.dash-banner::after { content: ''; position: absolute; right: -60px; bottom: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); pointer-events: none; }
.dash-banner-main { display: flex; align-items: center; gap: 16px; min-width: 260px; flex: 1 1 360px; }
.dash-banner-logo { padding: 6px 10px; }
.dash-banner-logo img { height: 30px; }
.dash-banner-title { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.dash-banner-sub { margin: 2px 0 0; font-size: 12.5px; letter-spacing: 0.08em; color: #b9c8e3; font-weight: 600; }
.dash-banner-meta { margin: 6px 0 0; display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #9fb2d3; }
.dash-banner-meta span:empty { display: none; }
.dash-banner-metrics { display: grid; grid-template-columns: repeat(4, minmax(110px, auto)); gap: 0; background: rgba(255, 255, 255, 0.96); color: var(--text);
  border-radius: 10px; box-shadow: 0 4px 14px rgba(5, 15, 35, 0.25); z-index: 1; }
.dash-banner-metrics .bm { padding: 10px 16px; border-left: 1px solid var(--border); }
.dash-banner-metrics .bm:first-child { border-left: none; }
.dash-banner-metrics span { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.dash-banner-metrics strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-banner-metrics small, .dash-stats small { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }
.btn-banner { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.btn-banner:hover { background: rgba(255, 255, 255, 0.16); }

.dash-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.dash-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.dash-main > .kpi-grid, .dash-main > .chart-grid, .dash-main > .dash-filter-row { margin: 0; }
.dash-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--header-h) + 14px); }
.dash-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
#tab-dashboard .chart-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
#tab-dashboard .chart-grid.chart-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#tab-dashboard #history-card { margin-top: 14px; }

/* KPI 카드: 조금 더 촘촘하게 */
#tab-dashboard .kpi-grid { gap: 10px; }
#tab-dashboard .kpi-card { padding: 12px 14px; }
#tab-dashboard .kpi-value { font-size: 22px; }

.dash-mini { display: flex; flex-direction: column; gap: 10px; }
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.dash-stats > div { background: var(--muted-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
.dash-stats span { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.dash-stats strong { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-table { width: 100%; min-width: 0; font-size: 12.5px; border-collapse: collapse; }
.dash-table th { position: static; background: none; font-size: 11.5px; font-weight: 600; color: var(--text-muted); padding: 5px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.dash-table td { padding: 6px 6px; border-bottom: 1px solid var(--muted); vertical-align: top; }
.dash-table td .muted { font-size: 11px; }
.dash-table tr.clickable { cursor: pointer; }
.dash-table tr.clickable:hover td { background: var(--accent-bg); }
.dash-empty { margin: 8px 0; font-size: 12.5px; }
.dash-foot { margin: 0; font-size: 11px; }
.dday { display: inline-block; padding: 0 5px; border-radius: 4px; font-size: 10.5px; font-weight: 700; background: var(--gray-bg); color: var(--gray-text); }
.dday.near { background: var(--blue-bg); color: var(--blue-text); }
.dday.late { background: var(--orange-bg); color: var(--orange-text); }
.kind { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.kind-in { background: var(--blue-bg); color: var(--blue-text); }
.kind-out { background: var(--green-bg); color: var(--green); }
.kind-ovs { background: var(--violet-bg); color: var(--violet-text); }
.dash-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.dash-bars li { display: grid; grid-template-columns: 84px minmax(0, 1fr) 46px; align-items: center; gap: 8px; font-size: 12.5px; }
.dash-bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.dash-bar { display: flex; height: 8px; border-radius: 4px; background: var(--muted); overflow: hidden; }
.dash-bar i { display: block; height: 100%; background: var(--primary); }
.dash-bar i.ok { background: var(--series-3); }
.dash-bar i.warn { background: var(--series-2); }
.dash-bar.stacked i:last-child:not(.ok) { background: #a5c3f3; }

.dash-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-alert { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.dash-alert:hover, .dash-alert:focus-visible { background: var(--muted-2); outline: none; box-shadow: 0 0 0 2px var(--ring); }
.dash-alert.ok { cursor: default; }
.dash-alert-icon { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-bg); color: var(--blue-text); }
.dash-alert.danger .dash-alert-icon { background: var(--red-bg); color: var(--red-text); }
.dash-alert.warn .dash-alert-icon { background: var(--orange-bg); color: var(--orange-text); }
.dash-alert.ok .dash-alert-icon { background: var(--green-bg); color: var(--green); }
.dash-alert-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dash-alert-text b { font-size: 13px; }
.dash-alert-text small { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-alert-go { color: var(--text-subtle); }
.dash-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dash-quick button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 70px; padding: 8px 4px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; text-align: center; }
.dash-quick button .lucide { width: 20px; height: 20px; color: var(--primary); }
.dash-quick button:hover { border-color: var(--blue-border); background: var(--accent-bg); }
.pulse { animation: pulse-ring 0.8s ease-out 3; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(31, 95, 214, 0.55); } 100% { box-shadow: 0 0 0 10px rgba(31, 95, 214, 0); } }

@media (max-width: 1500px) {
  .dash-layout { grid-template-columns: minmax(0, 1fr) 270px; }
}
@media (max-width: 1280px) {
  .dash-layout { grid-template-columns: minmax(0, 1fr); }
  .dash-rail { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dash-quick { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dash-grid-3, .dash-rail { grid-template-columns: minmax(0, 1fr); }
  #tab-dashboard .chart-grid, #tab-dashboard .chart-grid.chart-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .dash-banner-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .dash-banner-metrics .bm:nth-child(3) { border-left: none; }
  .dash-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

#tab-dashboard .card-header .status-filter-sm { flex-wrap: nowrap; flex-shrink: 0; }
#tab-dashboard .card-header .status-filter-sm .filter-btn { white-space: nowrap; }
#tab-dashboard .card-header .btn-link { white-space: nowrap; flex-shrink: 0; }
.dash-table td.nowrap { white-space: nowrap; }
@media (max-width: 640px) { .dash-banner-logo { display: none; } .dash-banner { padding-right: 56px; } .dash-banner-title { font-size: 18px; } }

/* ---------- 상세 화면 정돈(2026-10-08): 검색 카드 안 상태 탭, 표 위 건수 ---------- */
.page-crumb.single { display: none; }
.filter-bar > .filter-row-full { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-label { font-size: 12.5px; font-weight: 500; color: var(--text); min-width: 40px; }
.filter-bar .status-filter { margin-bottom: 0; }
.table-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 20px; margin: 0 2px 6px; font-size: 12.5px; color: var(--text-muted); }
.table-count b { color: var(--text); font-weight: 700; }
.panel-header { margin-bottom: 12px; }
.panel-header h2 { font-size: 19px; }
/* 기간 카드 바로 뒤 검색 카드 = 한 카드처럼(모든 화면 공통) */
.date-filter-bar:has(+ .filter-bar) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px dashed var(--border); }
.date-filter-bar + .filter-bar { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; }
/* 버튼 묶음 메뉴(엑셀 ▾) — 안의 버튼·링크는 원래 요소 그대로 */
.btn-menu { position: relative; display: inline-flex; }
.btn-menu-list { display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 35; min-width: 230px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); flex-direction: column; gap: 2px; }
.btn-menu.open .btn-menu-list { display: flex; }
.btn-menu-list > .btn-secondary, .btn-menu-list > .btn-primary { justify-content: flex-start; width: 100%; border: none; box-shadow: none; background: none; height: 34px; }
.btn-menu-list > .btn-secondary:hover { background: var(--muted); }
.fk-summary { font-size: 12.5px; color: var(--text-muted); margin-right: 4px; }

/* 주문 관리: 날짜 줄 오른쪽에 이지어드민 업로드·EMP 동기화 시각(2026-10-08 UI 정돈) */
.date-filter-bar .filter-meta { margin-left: auto; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
@media (max-width: 720px) { .date-filter-bar .filter-meta { margin-left: 0; align-items: flex-start; text-align: left; } }
/* 진행률 숫자: 막대 끝이 숫자 가운데를 지나도 읽히게(흰 테두리) */
.progress span { color: #0f172a; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; }

/* 지급 관리 품목 칸: 몇 글자마다 줄바뀜 방지(2026-10-08 UI 정돈) */
#table-payments td.products-cell { min-width: 220px; max-width: 380px; white-space: normal; word-break: keep-all; }

/* 카드 접기/펼치기 화살표(대시보드 과거 데이터 관리) */
.card-collapse-btn { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: #fff; color: var(--muted-foreground, #64748b); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.card-collapse-btn:hover { color: var(--primary); }
.card-collapse-btn svg { transition: transform 0.15s; }
.card-collapse-btn[aria-expanded="true"] svg { transform: rotate(180deg); }