/* ==========================================================================
   대현ERP — Design System (VibeOps-inspired)
   1인 사업장 비즈니스 운영툴. 미니멀·직관·밝은 인디고/블루.
   외부 라이브러리 0개 · 순수 CSS · file:// 호환
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Brand / Indigo-Blue */
  --c-primary:        #5b6ee1;
  --c-primary-600:    #4c5fd4;
  --c-primary-700:    #3f51c4;
  --c-primary-soft:   #eef0fc;   /* 활성 메뉴/연한 배경 */
  --c-primary-soft-2: #e3e7fb;
  --c-primary-ring:   rgba(91, 110, 225, 0.28);

  /* Neutral gray scale */
  --c-bg:        #f4f5f8;   /* 앱 배경 */
  --c-surface:   #ffffff;   /* 카드/패널 */
  --c-surface-2: #f7f8fb;   /* 표 헤더/연한 면 */
  --c-border:    #e9ebf1;   /* 옅은 경계선 */
  --c-border-2:  #dfe2ea;
  --c-line:      #eef0f4;   /* 표 행 구분선 */

  --c-ink:       #1f2433;   /* 본문 진한 텍스트 */
  --c-ink-2:     #4a5163;   /* 보조 텍스트 */
  --c-muted:     #8a90a2;   /* 흐린 텍스트/라벨 */
  --c-muted-2:   #aab0c0;

  /* Semantic */
  --c-success:      #1faa6c;
  --c-success-soft: #e4f6ed;
  --c-warn:         #e0892a;
  --c-warn-soft:    #fdf0df;
  --c-danger:       #e1556b;
  --c-danger-soft:  #fce8ec;
  --c-info:         #3d8bf0;
  --c-info-soft:    #e6f1fd;

  /* Typography */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", Roboto,
               "Noto Sans KR", sans-serif;
  --font-num: "SF Mono", "Segoe UI", var(--font-sans);

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  26px;   /* page-title */
  --fs-kpi:  30px;   /* KPI value */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;

  /* Shadows — 아주 옅게 */
  --sh-sm: 0 1px 2px rgba(28, 33, 51, 0.04);
  --sh-md: 0 2px 8px rgba(28, 33, 51, 0.06);
  --sh-lg: 0 8px 28px rgba(28, 33, 51, 0.10);
  --sh-pop: 0 12px 36px rgba(28, 33, 51, 0.16);

  /* Layout */
  --sidebar-w: 230px;
  --topbar-h: 64px;
}

/* ---------- 2. Reset / Base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d6d9e2; border-radius: 8px; border: 2px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover { background: #c2c6d4; }

/* ==========================================================================
   3. App Shell — grid: sidebar + main
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ----- Sidebar ----- */
.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  padding: var(--s-5) var(--s-3) 84px;
  overflow-y: auto;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-5);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  letter-spacing: -0.2px;
}
.sidebar-brand::before {
  content: "";
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--c-primary), #7e8ef0);
  box-shadow: var(--sh-sm);
  flex: none;
}

.nav-section { margin-top: var(--s-4); }
.nav-section:first-of-type { margin-top: var(--s-1); }
.nav-section-label {
  padding: var(--s-2) var(--s-3) var(--s-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.6px;
  color: var(--c-muted-2);
  text-transform: uppercase;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-3);
  margin: 2px 0;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
  cursor: pointer;
  position: relative;
  transition: background .14s, color .14s;
  user-select: none;
}
.nav-item .nav-ico { width: 18px; text-align: center; opacity: .9; flex: none; }
.nav-item:hover { background: var(--c-surface-2); color: var(--c-ink); }
.nav-item.is-active {
  background: var(--c-primary-soft);
  color: var(--c-primary-700);
  font-weight: var(--fw-semi);
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -var(--s-3); left: 0;
  top: 18%; bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--c-primary);
}

/* ----- Quick Add (좌하단 고정) ----- */
.quick-add {
  position: fixed;
  left: var(--s-4);
  bottom: var(--s-5);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 44px;
  padding: 0 var(--s-5);
  border: none;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  cursor: pointer;
  box-shadow: 0 8px 22px var(--c-primary-ring);
  transition: transform .12s, background .14s, box-shadow .14s;
}
.quick-add:hover { background: var(--c-primary-600); transform: translateY(-1px); box-shadow: 0 12px 28px var(--c-primary-ring); }
.quick-add:active { transform: translateY(0); }
.quick-add::before { content: "+"; font-size: 20px; line-height: 1; margin-top: -2px; }

/* ----- Main column ----- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ----- Topbar ----- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  height: var(--topbar-h);
  padding: 0 var(--s-7);
  background: rgba(244, 245, 248, 0.86);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--c-border);
}
.topbar-search {
  flex: 1;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 38px;
  padding: 0 var(--s-4);
  background: #fff8d8;
  border: 1px solid #f1df9b;
  border-radius: var(--r-pill);
  color: #76621d;
}
.topbar-search:focus-within { border-color: #d7b945; box-shadow: 0 0 0 3px rgba(217, 185, 69, 0.24); }
.topbar-search::before { content: "⌕"; font-size: 17px; color: #9b8125; }
.topbar-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: var(--fs-md);
  color: var(--c-ink);
  min-width: 0;
}
.topbar-search input::placeholder { color: #9b8125; }
.topbar-search-btn {
  border: none;
  background: transparent;
  color: #80681f;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  padding: 0;
  cursor: pointer;
}
.topbar-search-btn:hover { color: var(--c-ink); }
.topbar-spacer { flex: 1; }
.topbar-user {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 6px 5px var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
  cursor: pointer;
}
.topbar-user:hover { border-color: var(--c-border-2); }
.topbar-user .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), #8a98f2);
  color: #fff;
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}

/* ----- Content ----- */
.content {
  flex: 1;
  padding: var(--s-6) var(--s-7) var(--s-8);
  overflow-x: hidden;
}

/* Pages — only active one shown (셸이 토글) */
.page { display: none; animation: pageIn .22s ease; }
.page.is-active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   4. Page header / layout primitives
   ========================================================================== */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.page-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.4px;
  color: var(--c-ink);
}
.page-sub {
  margin-top: 2px;
  font-size: var(--fs-md);
  color: var(--c-muted);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }

/* Card / panel */
.card, .panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.card { padding: var(--s-5); }
.panel { padding: var(--s-5); }
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
  margin-bottom: var(--s-4);
}
.panel-title .more { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-primary); cursor: pointer; }

/* Grids */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }

/* ==========================================================================
   5. KPI cards
   ========================================================================== */
.kpi {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  box-shadow: var(--sh-sm);
  transition: box-shadow .16s, transform .16s;
}
.kpi:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.kpi-label {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
}
.kpi-value {
  margin-top: var(--s-3);
  font-size: var(--fs-kpi);
  font-weight: var(--fw-bold);
  letter-spacing: -0.6px;
  color: var(--c-ink);
  line-height: 1.1;
}
.kpi-foot {
  margin-top: var(--s-2);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  display: flex; align-items: center; gap: 6px;
}
.kpi-icon {
  position: absolute;
  top: var(--s-5); right: var(--s-5);
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 17px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

/* ==========================================================================
   6. Tables — 가볍게
   ========================================================================== */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--r-md);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.table thead th {
  position: sticky; top: 0;
  background: var(--c-surface-2);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-align: left;
  white-space: nowrap;
  padding: 10px var(--s-3);
  border-bottom: 1px solid var(--c-border);
}
.table tbody td {
  padding: 11px var(--s-3);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-2);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--c-surface-2); }
.table .num { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table th.num { text-align: right; }
.table .col-actions { text-align: right; white-space: nowrap; }
.table td strong { color: var(--c-ink); font-weight: var(--fw-semi); }

/* ==========================================================================
   7. Forms
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: var(--s-4); }
.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
.form-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-row.cols-1 { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
}
.label .req { color: var(--c-danger); margin-left: 2px; }

.input, .select, .textarea {
  width: 100%;
  height: 40px;
  padding: 0 var(--s-3);
  font: inherit;
  font-size: var(--fs-md);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.textarea { height: auto; min-height: 88px; padding: 10px var(--s-3); resize: vertical; line-height: 1.5; }
.select { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-muted) 50%), linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.input::placeholder, .textarea::placeholder { color: var(--c-muted-2); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-ring);
}
.input:disabled, .select:disabled { background: var(--c-surface-2); color: var(--c-muted); }
.field-hint { font-size: var(--fs-xs); color: var(--c-muted); }

/* Segmented toggle */
.seg {
  display: inline-flex;
  padding: 3px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  gap: 2px;
}
.seg-item {
  padding: 7px var(--s-4);
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, box-shadow .12s;
  user-select: none;
}
.seg-item:hover { color: var(--c-ink); }
.seg-item.is-active {
  background: var(--c-surface);
  color: var(--c-primary-700);
  font-weight: var(--fw-semi);
  box-shadow: var(--sh-sm);
}

/* ==========================================================================
   8. Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 var(--s-4);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .08s;
}
.btn:hover { background: var(--c-surface-2); border-color: var(--c-border-2); }
.btn:active { transform: translateY(1px); }

.btn.primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  box-shadow: 0 1px 2px var(--c-primary-ring);
}
.btn.primary:hover { background: var(--c-primary-600); border-color: var(--c-primary-600); }

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--c-ink-2);
}
.btn.ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }

.btn.danger {
  background: var(--c-surface);
  border-color: var(--c-danger);
  color: var(--c-danger);
}
.btn.danger:hover { background: var(--c-danger-soft); }

.btn.sm { height: 30px; padding: 0 var(--s-3); font-size: var(--fs-sm); border-radius: 7px; }
/* 표(그리드) 안 액션버튼 전용 — 화면마다 인라인으로 크기를 따로 지정하지 말고 이 클래스로 통일 */
.btn.xs { height: 24px; padding: 0 8px; font-size: 11px; border-radius: 6px; gap: 4px; }

/* ==========================================================================
   9. Tabs
   ========================================================================== */
.tabs {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--s-5);
  overflow-x: auto;
  position: relative;
}
/* 탭이 좁은 화면에서 잘릴 때 "더 있음"을 알리는 우측 흐림 힌트 */
.tabs.has-more::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
  background: linear-gradient(to right, transparent, var(--c-surface));
  pointer-events: none;
}
.tab {
  position: relative;
  padding: 10px var(--s-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-muted);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s;
}
.tab:hover { color: var(--c-ink-2); }
.tab.is-active {
  color: var(--c-primary-700);
  font-weight: var(--fw-semi);
  border-bottom-color: var(--c-primary);
}
.tab .count {
  margin-left: 6px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  background: var(--c-surface-2);
  border-radius: var(--r-pill);
  padding: 1px 7px;
}
.tab.is-active .count { color: var(--c-primary-700); background: var(--c-primary-soft); }

/* ==========================================================================
   10. Badges / status
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  line-height: 1;
  background: var(--c-surface-2);
  color: var(--c-ink-2);
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge.warn { background: var(--c-warn-soft); color: #8a5310; }
.badge.ok   { background: var(--c-success-soft); color: #146341; }
.badge.info { background: var(--c-info-soft); color: #1a5da8; }
.badge.muted { background: var(--c-surface-2); color: var(--c-muted); }
.badge.danger { background: var(--c-danger-soft); color: #a92e46; }
/* 지급(돈 나감) 전용 — warn(경비)·danger(취소)와 의미 충돌을 피하기 위한 별도 색.
   색→의미 매핑 규칙: 매출=info / 매입=muted / 경비=warn / 입금·완료=ok / 지급=plum / 취소=danger */
.badge.plum { background: #f1e9fb; color: #6d3fb4; }
.badge.no-dot::before { display: none; }

/* Pill (필터/태그) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border-2);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
  cursor: pointer;
}
.pill.is-active { background: var(--c-primary-soft); border-color: var(--c-primary-soft-2); color: var(--c-primary-700); }

/* ==========================================================================
   11. Money / signs / misc
   ========================================================================== */
.money { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); color: var(--c-ink); }
.money::before { content: "₩"; margin-right: 1px; font-weight: var(--fw-medium); color: var(--c-muted); }
.money.bare::before { content: none; }
.pos { color: var(--c-success); font-weight: var(--fw-semi); }
.neg { color: var(--c-danger); font-weight: var(--fw-semi); }

.divider { height: 1px; background: var(--c-border); border: none; margin: var(--s-5) 0; }

/* 레이아웃 유틸 — 화면마다 반복되던 인라인 style을 대체 (신규 화면에서도 이걸 쓸 것) */
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.stack-v { display: flex; flex-direction: column; gap: var(--s-4); }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-5);
  text-align: center;
  color: var(--c-muted);
  font-size: var(--fs-md);
}
.empty .empty-ico { font-size: 30px; opacity: .55; }
.empty .empty-sub { font-size: var(--fs-sm); color: var(--c-muted-2); }

/* Profit summary bar (이번달 손익) */
.profit-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.profit-bar .seg-cell {
  flex: 1;
  padding: var(--s-4) var(--s-5);
  border-right: 1px solid var(--c-line);
}
.profit-bar .seg-cell:last-child { border-right: none; }
.profit-bar .seg-cell .lbl { font-size: var(--fs-sm); color: var(--c-muted); }
.profit-bar .seg-cell .val { margin-top: 4px; font-size: var(--fs-xl); font-weight: var(--fw-bold); font-family: var(--font-num); }

/* Donut (과세/면세) — conic-gradient 기반, JS가 --p 변수만 세팅 */
.donut {
  --p: 70;
  --d: 18px;
  width: 132px; height: 132px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--c-surface) calc(100% - var(--d)), transparent calc(100% - var(--d) + 1px)),
    conic-gradient(var(--c-primary) calc(var(--p) * 1%), var(--c-primary-soft-2) 0);
  display: grid; place-items: center;
}
.donut .donut-c { text-align: center; }
.donut .donut-c .v { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.donut .donut-c .l { font-size: var(--fs-xs); color: var(--c-muted); }
.legend { display: flex; flex-direction: column; gap: var(--s-2); }
.legend .row { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-2); }
.legend .dot { width: 9px; height: 9px; border-radius: 3px; }
.legend .dot.tax { background: var(--c-primary); }
.legend .dot.free { background: var(--c-primary-soft-2); }
.legend .row .amt { margin-left: auto; font-family: var(--font-num); color: var(--c-ink); }

/* Warning / alert card variant */
.card.alert { border-color: var(--c-warn-soft); background: linear-gradient(0deg, var(--c-warn-soft), var(--c-warn-soft)), var(--c-surface); background-blend-mode: normal; }
.card.alert .panel-title { color: #b86d18; }

/* List rows (오늘 일정 / 입금 예정) */
.mini-list { display: flex; flex-direction: column; }
.mini-list .li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
}
.mini-list .li:last-child { border-bottom: none; }
.mini-list .li .when { font-size: var(--fs-xs); color: var(--c-muted); width: 56px; flex: none; font-family: var(--font-num); }
.mini-list .li .txt { flex: 1; min-width: 0; font-size: var(--fs-base); color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-list .li .amt { font-family: var(--font-num); font-weight: var(--fw-semi); color: var(--c-ink); }

/* ==========================================================================
   12. Toast
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-7);
  transform: translateX(-50%) translateY(20px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 11px var(--s-5);
  background: #2a2f40;
  color: #fff;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-pop);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok::before { content: "✓"; color: #6ee7a8; font-weight: 700; }
.toast.warn::before { content: "!"; color: #f6c66b; font-weight: 700; }

/* ==========================================================================
   13. Responsive (desktop-first, min 1024)
   ========================================================================== */
@media (max-width: 1240px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  :root { --sidebar-w: 200px; }
  .content { padding: var(--s-5) var(--s-5) var(--s-8); }
  .topbar { padding: 0 var(--s-5); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  /* 태블릿(721~1024px): ag-Grid/표가 넓어 잘릴 수 있어 터치 스크롤을 명시적으로 보장 */
  .grid-host, .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* ───────────────────────────────────────────────
 * 보충: 화면 전용 클래스 (조립 단계 추가)
 * ─────────────────────────────────────────────── */
/* 부품관리 행 액션 오버레이(모달) */
.overlay{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; }
.overlay[hidden]{ display:none; }
.overlay-backdrop{ position:absolute; inset:0; background:rgba(28,33,51,.34); }
.overlay-panel{ position:relative; z-index:1; width:420px; max-width:94vw; box-shadow:var(--sh-pop);
  border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-surface);
  animation:overlay-in .16s ease; }
.overlay-panel .panel-title{ margin-bottom:2px; }
.panel-sub{ font-size:var(--fs-xs); color:var(--c-muted); margin-bottom:var(--s-2); }
@keyframes overlay-in{ from{ transform:translateY(8px) scale(.98); opacity:.4; } to{ transform:none; opacity:1; } }

/* 대시보드 도넛 중앙 라벨/값 */
.page[data-page="dashboard"] .v{ font-size:var(--fs-2xl,28px); font-weight:var(--fw-bold); color:var(--c-ink); line-height:1; }
.page[data-page="dashboard"] .l{ font-size:var(--fs-xs); color:var(--c-muted); margin-top:4px; }

/* hidden 속성이 항상 우선하도록(.field 등 display 규칙이 [hidden]을 이기는 문제 차단) */
[hidden]{ display:none !important; }

/* 브랜드 텍스트 (상호 + 부제 2줄) */
.brand-text{ display:inline-flex; flex-direction:column; line-height:1.18; }
.brand-text b{ font-weight:var(--fw-bold); color:var(--c-ink); }
.brand-text small{ font-size:11px; color:var(--c-muted); font-weight:var(--fw-medium); margin-top:1px; }

/* 거래 등록 — 폼+요약 2단 레이아웃(반응형) */
.page[data-page="register"] .reg-grid{ grid-template-columns:1.9fr 1fr; align-items:start; }
.page[data-page="register"] .reg-grid > .panel[data-role="summary"]{ position:sticky; top:var(--s-4); }
@media (max-width:1180px){
  .page[data-page="register"] .reg-grid{ grid-template-columns:1fr; }
  .page[data-page="register"] .reg-grid > .panel[data-role="summary"]{ position:static; }
}

/* ════════════════════════════════════════════════
 * Lite 오버라이드 — Pretendard · 시인성 개선 · ag-Grid 정합
 * ════════════════════════════════════════════════ */
:root{
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-num: "Pretendard Variable", "Pretendard", "SF Mono", "Segoe UI", sans-serif;
  /* 시인성: 라벨/보조 텍스트 대비 강화, 경계선 또렷, 기본 글자 키움 */
  --c-ink:    #161b29;
  --c-ink-2:  #3d4456;
  --c-muted:  #6b7280;
  --c-muted-2:#9aa1b2;
  --c-border: #e3e6ee;
  --c-border-2:#d3d8e4;
  --fs-base: 14px;
}
html, body, input, select, textarea, button{ font-family:var(--font-sans); }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* KPI/표 가독성 */
.kpi-label{ font-weight:600; color:var(--c-ink-2); }
.kpi-value{ letter-spacing:-0.5px; }
.kpi-foot{ color:var(--c-muted); }
.table thead th{ font-weight:700; color:var(--c-ink-2); background:var(--c-surface-2); border-bottom:1px solid var(--c-border-2); }
.table td{ border-bottom:1px solid var(--c-border); }
.table tbody tr:hover td{ background:#f3f5fc; }
.badge{ font-weight:700; }
.nav-item{ font-weight:600; }
.page-title{ letter-spacing:-0.6px; }

/* 사이드바 하단 전체 ERP 링크 */
.lite-fulllink{ display:block; margin:8px 14px 0; padding:9px 12px; text-align:center;
  font-size:12px; font-weight:600; color:var(--c-muted); text-decoration:none;
  border:1px dashed var(--c-border-2); border-radius:10px; }
.lite-fulllink:hover{ color:var(--c-primary); border-color:var(--c-primary); background:var(--c-primary-soft); }

/* ── ag-Grid (alpine) 디자인 정합 ── */
.ag-theme-alpine{
  --ag-font-family: var(--font-sans);
  --ag-font-size: 13.5px;
  --ag-foreground-color: var(--c-ink);
  --ag-data-color: var(--c-ink);
  --ag-secondary-foreground-color: var(--c-ink-2);
  --ag-header-foreground-color: var(--c-ink-2);
  --ag-header-background-color: var(--c-surface-2);
  --ag-odd-row-background-color: #ffffff;
  --ag-row-hover-color: #f1f4fd;
  --ag-selected-row-background-color: var(--c-primary-soft);
  --ag-border-color: var(--c-border);
  --ag-row-border-color: var(--c-border);
  --ag-header-column-separator-display: none;
  --ag-borders: solid 1px;
  --ag-border-radius: 12px;
  --ag-cell-horizontal-padding: 14px;
  --ag-grid-size: 6px;
  --ag-header-height: 32px;
  --ag-row-height: 42px;
  --ag-checkbox-checked-color: var(--c-primary);
  --ag-range-selection-border-color: var(--c-primary);
  --ag-input-focus-border-color: var(--c-primary);
  border-radius:12px; overflow:hidden;
}
.ag-theme-alpine .ag-header{ border-bottom:1px solid var(--c-border-2); }
.ag-theme-alpine .ag-header-cell-text{ font-weight:700; }
.ag-theme-alpine .ag-cell.num, .ag-theme-alpine .ag-cell-num{ font-variant-numeric:tabular-nums; }
.grid-host{ width:100%; height:560px; }
.grid-host.sm{ height:420px; }

/* 페이지 폭 살짝 여유 */
.content{ padding-bottom:48px; }

/* ════════════════════════════════════════════════
 * 그리드 헤더 — 네이비 메뉴행 + 골드 정렬화살표 (시인성)
 * 모든 ag-Grid(ag-theme-alpine)에 강제 적용
 * ════════════════════════════════════════════════ */
.ag-theme-alpine .ag-header,
.ag-theme-alpine .ag-header-viewport,
.ag-theme-alpine .ag-pinned-left-header,
.ag-theme-alpine .ag-pinned-right-header,
.ag-theme-alpine .ag-floating-filter,
.ag-theme-alpine .ag-header-row {
  background: linear-gradient(180deg, #336fae 0%, #1d4c7e 52%, #143a63 100%) !important;
  border-bottom-color: #0f2d4f !important;
}
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine .ag-header-group-cell {
  color: #ffffff !important;
  border-right: 1px solid rgba(255,255,255,0.14) !important;
}
.ag-theme-alpine .ag-header-cell-text,
.ag-theme-alpine .ag-header-group-text {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
}
.ag-theme-alpine .ag-header-icon,
.ag-theme-alpine .ag-header-cell-menu-button .ag-icon,
.ag-theme-alpine .ag-sort-indicator-icon .ag-icon,
.ag-theme-alpine .ag-icon-asc,
.ag-theme-alpine .ag-icon-desc,
.ag-theme-alpine .ag-sort-ascending-icon,
.ag-theme-alpine .ag-sort-descending-icon {
  color: #ffd23f !important;
}
.ag-theme-alpine .ag-header-cell-menu-button,
.ag-theme-alpine .ag-header-cell-filter-button {
  color: #e7eefc !important; opacity: 1 !important;
}
.ag-theme-alpine .ag-header-cell-resize::after {
  background-color: rgba(255,255,255,0.22) !important;
}
.ag-theme-alpine .ag-header .ag-checkbox-input-wrapper {
  --ag-checkbox-background-color: #ffffff;
}
/* 헤더 안의 필터 입력은 흰 배경으로 대비 */
.ag-theme-alpine .ag-floating-filter .ag-input-field-input,
.ag-theme-alpine .ag-header .ag-input-field-input {
  background: #ffffff !important; color: #1f2433 !important;
  border-radius: 6px; border-color: rgba(255,255,255,0.5) !important;
}

/* 헤더 내 모든 아이콘(정렬·필터·메뉴) 골드로 — 네이비 위 시인성 */
.ag-theme-alpine .ag-header .ag-icon { color:#ffd23f !important; }
.ag-theme-alpine .ag-header-cell-label .ag-sort-indicator-container .ag-icon { color:#ffd23f !important; }

/* 헤더 셀 배경 투명화 → .ag-header 네이비가 보이도록 (페이지별 nth-child 배경 무력화) */
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine .ag-header-group-cell,
.ag-theme-alpine .ag-header-row .ag-header-cell,
.ag-theme-alpine .ag-header-row .ag-header-cell:nth-child(odd),
.ag-theme-alpine .ag-header-row .ag-header-cell:nth-child(even),
.ag-theme-alpine .ag-pinned-left-header .ag-header-row .ag-header-cell:nth-child(odd),
.ag-theme-alpine .ag-pinned-left-header .ag-header-row .ag-header-cell:nth-child(even) {
  background: transparent !important;
}
.ag-theme-alpine .ag-header-cell-label { color:#fff !important; }

/* CRUD 그리드 — 삭제 표시 행 */
.ag-theme-alpine .ag-cell.cell-off{ text-decoration:line-through; color:var(--c-muted); background:rgba(225,72,72,.06); }
/* CRUD 툴바 */
.crud-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:var(--s-3); }
.crud-toolbar .spacer{ flex:1; }