/* TAP-CORE V2 공용 스타일 (ERP 화면)
 * 토큰: tokens.css (TAP 브랜드킷 — docs/brand-kit/TAP-Core-DESIGN.md)
 * 규칙: 색은 --erp-* 토큰만. 핑크 5점 이하. 숫자 tabular-nums + 우측정렬. 한글 keep-all.
 */
@import url("tokens.css");

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  font-family: var(--erp-font-sans);
  background: var(--erp-bg);
  color: var(--erp-text);
  min-height: 100vh;
  font-size: var(--erp-text-body);
  -webkit-font-smoothing: antialiased;
}
.kr, h1, h2, h3, p, td, th, label, .sub { word-break: keep-all; overflow-wrap: break-word; }
a { color: var(--erp-text-link); } /* 브라우저 기본 파랑(#00e) 차단 — 다크 대비. 구체 셀렉터(td a·.nav a 등)가 우선 */

/* === 헤더 === */
.hd {
  background: var(--erp-bg-alt);
  padding: 0 var(--space-8);
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--erp-border);
  position: sticky; top: 0; z-index: 50;
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.brand img { height: 42px; width: auto; display: block; }
.brand a { color: var(--erp-text); text-decoration: none; font-weight: 700; font-size: var(--erp-text-h3); letter-spacing: -0.01em; white-space: nowrap; }
.nav { display: flex; gap: var(--space-1); font-size: var(--erp-text-body); }
.nav a {
  color: var(--erp-text-soft); text-decoration: none;
  padding: 6px var(--space-3); border-radius: var(--radius-sm);
  position: relative; transition: background var(--motion-fast) var(--tap-core-ease), color var(--motion-fast);
}
.nav a:hover { background: var(--erp-bg-hover); color: var(--erp-text); }
.nav a.active { color: var(--erp-text); font-weight: 600; }
.nav a.active::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px;
  height: 2px; background: var(--erp-pink); border-radius: 2px 2px 0 0;
}

/* === 그룹형 드롭다운 네비 (shared/ui.js renderNav 가 .nav 내부를 그룹으로 렌더) === */
.nav-link, .nav-top {
  color: var(--erp-text-soft); text-decoration: none; white-space: nowrap;
  padding: 6px var(--space-3); border-radius: var(--radius-sm);
  position: relative; transition: background var(--motion-fast) var(--tap-core-ease), color var(--motion-fast);
}
.nav-link:hover, .nav-top:hover { background: var(--erp-bg-hover); color: var(--erp-text); }
.nav-link.active, .nav-group.active > .nav-top { color: var(--erp-text); font-weight: 600; }
.nav-link.active::after, .nav-group.active > .nav-top::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px;
  height: 2px; background: var(--erp-pink); border-radius: 2px 2px 0 0;
}
.nav-group { position: relative; }
.nav-top {
  display: inline-flex; align-items: center; gap: 3px;
  background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--erp-text-body); line-height: 1.4;
}
.nav-caret { font-size: 9px; opacity: 0.55; transition: transform var(--motion-fast); }
.nav-group:hover .nav-caret, .nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 5px); left: 0;
  display: none; flex-direction: column; min-width: 188px;
  background: var(--erp-bg-alt); border: 1px solid var(--erp-border);
  border-radius: 10px; box-shadow: var(--erp-shadow-sm);
  padding: var(--space-1); z-index: 60;
}
/* 투명 hover 브리지: 버튼-메뉴 사이 간격(5px)을 메뉴 hover 영역으로 덮어, 마우스가 간격을 지날 때 메뉴가 닫히지 않게 */
.nav-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav-group:hover .nav-menu, .nav-group.open .nav-menu { display: flex; }
.nav-menu a {
  display: block; white-space: nowrap; color: var(--erp-text-soft);
  text-decoration: none; padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: var(--erp-text-body);
}
.nav-menu a:hover { background: var(--erp-bg-hover); color: var(--erp-text); }
.nav-menu a.active { background: var(--erp-bg-hover); color: var(--erp-text); font-weight: 600; }

.right { display: flex; gap: var(--space-3); align-items: center; font-size: var(--erp-text-label); flex-shrink: 0; }
.right #who {
  color: var(--erp-text-soft);
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 좁은 폭: 글자 중간 파단 대신 네비를 통째로 둘째 줄로 내린다(드롭다운은 absolute라 클리핑 없음) */
@media (max-width: 1100px) {
  .hd { flex-wrap: wrap; height: auto; min-height: 68px; padding: var(--space-2) var(--space-4); }
  .nav { order: 3; flex-basis: 100%; flex-wrap: wrap; }
  .right #who { max-width: 160px; }
}
.right .role {
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  background: var(--erp-pink-soft); color: var(--erp-pink-deep);
  font-size: var(--erp-text-mini); font-weight: 600;
}
.logout {
  background: transparent; border: 1px solid var(--erp-border-strong);
  border-radius: var(--radius-sm); padding: 5px var(--space-3);
  font-size: var(--erp-text-mini); cursor: pointer; color: var(--erp-text-soft);
  transition: background var(--motion-fast);
}
.logout:hover { background: var(--erp-bg-hover); color: var(--erp-text); }
.theme-toggle {
  background: transparent; border: 1px solid var(--erp-border-strong);
  border-radius: var(--radius-sm); width: 30px; height: 28px; padding: 0;
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: background var(--motion-fast);
}
.theme-toggle:hover { background: var(--erp-bg-hover); }

/* === 본문 / 패널 === */
main { max-width: 1280px; margin: var(--space-8) auto; padding: 0 var(--space-8); }
.panel {
  background: var(--erp-bg-alt);
  padding: var(--space-6);
  border: 1px solid var(--erp-border);
  border-radius: 14px;
  box-shadow: var(--erp-shadow-sm);
  margin-bottom: var(--space-6);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
h1 { font-size: var(--erp-text-display); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--erp-text-h2); font-weight: 600; margin-bottom: var(--space-3); }
h2 a { font-size: var(--erp-text-label); color: var(--erp-text-link); text-decoration: none; font-weight: 500; }
h2 a:hover { color: var(--erp-pink); }
.sub { font-size: var(--erp-text-body); color: var(--erp-text-muted); margin-bottom: var(--space-4); }
.actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

/* === 표 === */
table { width: 100%; border-collapse: collapse; font-size: var(--erp-text-body); }
th, td { padding: var(--cell-py) var(--space-3); border-bottom: 1px solid var(--erp-divider); text-align: left; vertical-align: middle; }
th {
  font-weight: 600; color: var(--erp-text-soft); background: var(--erp-bg-sunken);
  font-size: var(--erp-text-label); white-space: nowrap;
  border-bottom: 1px solid var(--erp-border);
}
tbody tr:hover td { background: var(--erp-bg-hover); }
.empty { padding: var(--space-12) var(--space-4); color: var(--erp-text-muted); font-size: var(--erp-text-body); text-align: center; }
td a, .kv a { color: var(--erp-text); text-decoration: underline; text-decoration-color: var(--erp-border-strong); text-underline-offset: 2px; }
td a:hover, .kv a:hover { color: var(--erp-pink-deep); text-decoration-color: currentColor; }
.right-text, .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--erp-font-num); }
td.date { white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--erp-font-num); }
.money-neg { color: var(--erp-money-neg); }
.money-pos { color: var(--erp-money-pos); }
.mono, .code { font-family: var(--erp-font-mono); font-size: var(--erp-text-mono); color: var(--erp-text-soft); white-space: nowrap; }

/* === KPI 요약 밴드 (목록 상단 — 통장/카드/매입채무/세금계산서 등 공용, ui.js kpiItem) === */
.kpi-strip {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--erp-bg-sunken); border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.kpi { flex: 1; min-width: 120px; }
.kpi__label { font-size: var(--erp-text-label); color: var(--erp-text-muted); }
.kpi__value { font-size: var(--erp-text-h2); font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--erp-font-num); }
.kpi__value--pos { color: var(--erp-money-pos); }
.kpi__value--neg { color: var(--erp-money-neg); }
.kpi__value--warn { color: var(--erp-warning); }
.kpi__value--info { color: var(--erp-info); }

/* === 토스트 · 인라인 확인 (ui.js toast/inlineConfirm — 다크 안전 토큰) === */
.toast-item {
  background: var(--erp-neutral); color: var(--erp-text-inverse);
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: var(--erp-text-body); max-width: 360px; box-shadow: var(--erp-shadow-md);
  opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s;
}
.toast-item--error { background: var(--erp-danger); }
.toast-item--ok { background: var(--erp-success); }
.confirm-box {
  border: 1px solid var(--erp-warning); background: var(--erp-warning-soft);
  padding: var(--space-3); border-radius: var(--radius-sm); margin: var(--space-2) 0;
}
.confirm-box .cb-msg { margin-bottom: var(--space-2); }
.info-box {
  border: 1px solid var(--erp-info); background: var(--erp-info-soft);
  padding: var(--space-4); border-radius: var(--radius-sm); margin: var(--space-3) 0;
}
.info-box .ib-sub { margin: 0 0 10px; font-size: var(--erp-text-label); color: var(--erp-text-soft); }

/* === 빈 상태 · 로딩 스켈레톤 (ui.js emptyRow/skeletonRow) === */
.empty-state { padding: var(--space-6) var(--space-4); text-align: center; color: var(--erp-text-muted); }
.empty-state .es-icon { font-size: 26px; margin-bottom: var(--space-2); opacity: 0.75; }
.skeleton-bar {
  height: 12px; border-radius: var(--radius-sm); margin: var(--space-2) 0;
  background: linear-gradient(90deg, var(--erp-bg-sunken) 25%, var(--erp-bg-hover) 50%, var(--erp-bg-sunken) 75%);
  background-size: 200% 100%; animation: tap-skel 1.2s linear infinite;
}
.skeleton-bar:nth-child(2) { width: 85%; }
.skeleton-bar:nth-child(3) { width: 65%; }
@keyframes tap-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* === 버튼 === */
.btn-primary, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 32px; padding: 0 var(--space-4);
  border-radius: var(--radius-sm); font-size: var(--erp-text-body); font-weight: 500;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  font-family: inherit; transition: background var(--motion-fast) var(--tap-core-ease), border-color var(--motion-fast);
}
.btn-primary { background: var(--erp-pink); color: #fff; }
.btn-primary:hover { background: var(--erp-pink-deep); }
.btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-ghost { background: var(--erp-bg-alt); color: var(--erp-text); border-color: var(--erp-border-strong); }
.btn-ghost:hover { background: var(--erp-bg-hover); }
.btn-danger { background: var(--erp-danger); color: #fff; }
.btn-danger:hover { background: var(--erp-pink-deep); }
.btn-ghost.danger { color: var(--erp-danger); border-color: var(--erp-danger-soft); background: var(--erp-bg-alt); }
.btn-ghost.danger:hover { background: var(--erp-danger-soft); }
.btn-ghost[disabled] { opacity: 0.5; cursor: not-allowed; }
.actions button, .actions a.btn-ghost, .actions a.btn-primary { flex: 0 0 auto; }

/* === 목록 페이지네이션 (estimates·projects list 공용 — tapUi.renderPager) === */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.pager .range { color: var(--erp-text-muted); font-size: var(--erp-text-body); min-width: 90px; text-align: center; }

/* 행 내 보조 링크 (예: 제목 옆 '원가분석' 점프) */
.lnk-sub { margin-left: var(--space-2); font-size: 11px; color: var(--erp-text-muted); white-space: nowrap; }
.lnk-sub:hover { color: var(--erp-pink); }

/* === 프로젝트 트리(탐색기) — projects/tree.js === */
/* 세그먼트 토글(목록/트리) — 비활성 칸이 흰 패널에 묻히지 않게 sunken 트랙 + 진한 굵은 라벨로 또렷이. */
/* flex:0 0 auto — .actions 가 빠듯할 때 overflow:hidden 탓에 토글이 0폭까지 쪼그라들어 두 번째 버튼(예: 트리)이 잘리는 것 방지 */
.seg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--erp-border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--erp-bg-sunken); }
.seg-btn { background: transparent; color: var(--erp-text); border: none; padding: 5px var(--space-4); font-size: var(--erp-text-label); cursor: pointer; font-family: inherit; font-weight: 600; }
.seg-btn:hover:not(.active) { background: var(--erp-bg-hover); }
.seg-btn + .seg-btn { border-left: 1px solid var(--erp-border-strong); }
.seg-btn.active { background: var(--erp-pink); color: #fff; }
.tree-toolbar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.tree-box { max-height: 72vh; overflow: auto; border: 1px solid var(--erp-border); border-radius: 10px; padding: var(--space-2); background: var(--erp-bg-alt); }
ul.tnode-root, ul.tnode-kids { list-style: none; margin: 0; padding: 0; }
.tnode-row { display: flex; align-items: center; gap: var(--space-2); padding: 4px 6px; border-radius: 6px; white-space: nowrap; }
.tnode.has-kids > .tnode-row { cursor: pointer; }
.tnode-row:hover { background: var(--erp-bg-hover); }
.tnode-caret { display: inline-block; width: 14px; text-align: center; color: var(--erp-text-muted); font-size: 10px; flex: 0 0 auto; }
.tnode-caret--none { visibility: hidden; }
.tnode-folder { font-weight: 600; color: var(--erp-text); }
.tnode-name { color: var(--erp-text); text-decoration: none; }
.tnode-name:hover { color: var(--erp-pink-deep); text-decoration: underline; }
.tnode-no { font-size: 11px; color: var(--erp-text-muted); }
a.tnode-no--link { text-decoration: none; cursor: pointer; }
a.tnode-no--link:hover { color: var(--erp-text-link); text-decoration: underline; }
.tnode-count { margin-left: var(--space-2); font-size: 11px; color: var(--erp-text-muted); background: var(--erp-bg-sunken); border-radius: var(--radius-pill); padding: 1px 8px; }
.tnode-estslot { font-size: 11px; color: var(--erp-text-muted); }
.tnode-est { color: var(--erp-info); font-weight: 600; text-decoration: none; }
.tnode-est:hover { color: var(--erp-info); text-decoration: underline; }

/* 트리 드래그&드롭 귀속 변경 (tree.js, 매니저+) */
.tnode-grip { cursor: grab; color: var(--erp-text-muted); font-size: 12px; padding: 0 1px; user-select: none; flex: 0 0 auto; }
.tnode-grip:active { cursor: grabbing; }
.tnode-row.dragging { opacity: 0.45; }
.tnode-row.drop-ok { background: var(--erp-info-soft); outline: 2px dashed var(--erp-info); outline-offset: -2px; }

/* 프로젝트(폴더) vs 견적서(문서) 시각 구분 */
.tnode-picon { font-size: 12px; flex: 0 0 auto; opacity: 0.85; }   /* 프로젝트 = 📁 폴더 */
/* 견적서 행 — 파란 톤 배경 + 좌측 강조선 + '견적' 칩으로 한눈에 구분 */
.tnode--estimate > .tnode-row { background: var(--erp-info-soft); border-left: 3px solid var(--erp-info); border-radius: 4px; }
.tnode--estimate > .tnode-row:hover { background: var(--erp-info-soft); }
.tnode-esticon { font-size: 12px; flex: 0 0 auto; }
.tnode-esttag { font-size: 10px; font-weight: 700; color: var(--erp-text-inverse); background: var(--erp-info); border-radius: var(--radius-pill); padding: 1px 7px; flex: 0 0 auto; letter-spacing: 0.02em; }
.tnode-estbtn { font-size: 11px; height: 20px; padding: 0 8px; margin-left: 4px; border: 1px solid var(--erp-border-strong); background: var(--erp-bg-alt); color: var(--erp-text-soft); border-radius: var(--radius-sm); cursor: pointer; flex: 0 0 auto; font-family: inherit; }
.tnode-estbtn:hover { background: var(--erp-bg-hover); }
.tnode-estbtn--del { color: var(--erp-danger); border-color: var(--erp-danger); }
.tnode-estbtn--del:hover { background: var(--erp-danger-soft); }
.tree-dropzone { display: none; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); padding: 7px 10px; border: 2px dashed var(--erp-border-strong); border-radius: 8px; color: var(--erp-text-muted); font-size: 13px; background: var(--erp-bg-sunken); }
.tree-dropzone.armed { display: flex; }
.tree-dropzone.drop-ok { background: var(--erp-info-soft); border-color: var(--erp-info); color: var(--erp-text); }

/* 목록 일괄 작업 바 + 선택 체크박스 열 (list-edit.js) */
.bulk-bar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); padding: 7px 10px; border: 1px solid var(--erp-border); border-radius: 8px; background: var(--erp-bg-sunken); }
.sel-col { width: 30px; text-align: center; }
.no-sel .sel-col { display: none; }

/* 아코디언 (예: 원가분석 분류별 거래내역 drill-down) */
.acc { border-bottom: 1px solid var(--erp-border); }
.acc__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; cursor: pointer; }
.acc__head:hover { color: var(--erp-pink); }
.acc__caret { color: var(--erp-text-muted); width: 14px; flex: 0 0 auto; }
.acc__label { font-weight: 600; }
.acc__meta { margin-left: auto; color: var(--erp-text-muted); font-size: var(--erp-text-body); }
.acc__body { padding: 0 0 var(--space-3) var(--space-5); }

/* === 폼 === */
input[type=text], input[type=number], input[type=email], input[type=password],
input[type=datetime-local], input[type=date], input[type=search], input[type=url], input[type=time],
select, textarea {
  width: 100%; height: var(--field-h);
  border: 1px solid var(--erp-border-strong); border-radius: var(--radius-sm);
  padding: 0 10px; font-size: var(--erp-text-body); font-family: inherit;
  background: var(--erp-bg-alt); color: var(--erp-text);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
textarea { height: auto; padding: 8px 10px; resize: vertical; min-height: 72px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--erp-pink);
  box-shadow: 0 0 0 3px rgba(231,33,89,0.15);
}
.form-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.form-row label { flex: 0 0 110px; font-size: var(--erp-text-label); color: var(--erp-text-soft); font-weight: 500; }
.form-row input, .form-row select { flex: 1; }

/* === 상태 칩 (점 + soft 배경) === */
.status, .pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  font-size: var(--erp-text-mini); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap;
}
.status::before, .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pill-success { background: var(--erp-success-soft); color: var(--erp-success); }
.pill-danger  { background: var(--erp-danger-soft);  color: var(--erp-danger); }
.pill-info    { background: var(--erp-info-soft);    color: var(--erp-info); }
.pill-warning { background: var(--erp-warning-soft); color: var(--erp-warning); }
.pill-neutral { background: var(--erp-neutral-soft); color: var(--erp-neutral); }
.s-draft     { background: var(--erp-neutral-soft); color: var(--erp-neutral); }
.s-submitted { background: var(--erp-info-soft);    color: var(--erp-info); }
.s-approved  { background: var(--erp-success-soft); color: var(--erp-success); }
.s-rejected  { background: var(--erp-danger-soft);  color: var(--erp-danger); }
.s-won       { background: var(--erp-gold-soft);    color: var(--erp-gold-deep); }
.s-lost      { background: var(--erp-danger-soft);  color: var(--erp-danger); }
.s-cancelled { background: var(--erp-neutral-soft); color: var(--erp-neutral); }
.s-locked    { background: var(--tap-core-ink-deep); color: #fff; }
.s-locked::before { background: var(--tap-core-gold); }
/* 프로젝트 lifecycle 상태칩 (migrations/003: 6값 — lost·cancelled 는 위 견적 칩과 공유) */
.s-planned     { background: var(--erp-neutral-soft); color: var(--erp-neutral); }
.s-confirmed   { background: var(--erp-info-soft);    color: var(--erp-info); }
.s-in_progress { background: var(--erp-warning-soft); color: var(--erp-warning); }
.s-closed      { background: var(--erp-success-soft); color: var(--erp-success); }

/* === 견적 라인 표 === */
.lines-tbl { width: 100%; border-collapse: collapse; font-size: var(--erp-text-label); }
.lines-tbl th { background: var(--erp-bg-sunken); padding: 6px 8px; font-size: var(--erp-text-mini); }
.lines-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--erp-divider); }
.lines-tbl input { width: 100%; border: 1px solid transparent; padding: 4px 6px; height: auto; font-size: var(--erp-text-label); background: transparent; }
.lines-tbl input:hover { border-color: var(--erp-border-strong); }
.lines-tbl input:focus { border-color: var(--erp-pink); background: var(--erp-bg-alt); }
.line-actions { white-space: nowrap; }
.line-group td { background: var(--erp-pink-soft); color: var(--erp-pink-deep); font-weight: 600; }
.line-subtotal td { background: var(--erp-bg-sunken); color: var(--erp-text-muted); }

/* === key-value 표 === */
.kv { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-2) var(--space-3); font-size: var(--erp-text-body); margin-bottom: var(--space-4); }
.kv .k { color: var(--erp-text-muted); }

/* === 상태 전이 바 === */
.transition-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--erp-divider); }
.transition-bar b { font-size: var(--erp-text-body); color: var(--erp-text-soft); }
.transition-bar button { height: 28px; font-size: var(--erp-text-label); padding: 0 var(--space-3); }

/* === KPI / 통계 카드 (대시보드) === */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat { background: var(--erp-bg-alt); border: 1px solid var(--erp-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); min-width: 0; }
.stat__label { font-size: var(--erp-text-label); color: var(--erp-text-muted); }
/* 좁은 카드에서 12자리 ₩ 금액이 잘리지 않게 num-lg~num-xl 사이 유동 크기 */
.stat__value { font-size: clamp(var(--erp-text-num-lg), 1.9vw + 8px, var(--erp-text-num-xl)); font-weight: 800; letter-spacing: -0.01em; margin-top: var(--space-1); font-variant-numeric: tabular-nums; font-family: var(--erp-font-num); white-space: nowrap; }
.stat--accent .stat__value { color: var(--erp-pink); }
/* 클릭 가능한 KPI 카드 (대시보드 → 필터 목록 점프) — 색/밑줄 제거, hover·focus 어포던스 */
a.stat--link { color: inherit; text-decoration: none; display: block; cursor: pointer;
  transition: border-color var(--motion-fast) var(--tap-core-ease), background var(--motion-fast), box-shadow var(--motion-fast); }
a.stat--link:hover { border-color: var(--erp-border-strong); background: var(--erp-bg-hover); box-shadow: var(--erp-shadow-sm); }
a.stat--link:focus-visible { outline: none; border-color: var(--erp-pink); box-shadow: 0 0 0 3px rgba(231,33,89,0.15); }

/* === 빈/그리드 보조 === */
.muted { color: var(--erp-text-muted); font-size: var(--erp-text-body); font-weight: 400; }
.form-box { background: var(--erp-bg-sunken); border: 1px solid var(--erp-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); }
.form-box h3 { font-size: var(--erp-text-h3); margin-bottom: var(--space-3); }
/* minmax(0,1fr): 넓은 콘텐츠(큰 숫자 카드·표·차트)가 트랙을 밀어 페이지를 가로로 넘기는 것 방지(우측 잘림 수정) */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
@media (max-width: 1023px) { .grid-2 { grid-template-columns: 1fr; } }
/* 모바일: 넓은 표는 패널 안에서 가로 스크롤(열 잘림 방지). 스크롤 없는 패널엔 영향 없음 */
@media (max-width: 767px) {
  .panel { overflow-x: auto; }
  main { padding: 0 var(--space-3); }
}

/* === 견적 편집기 — 레터헤드(로고) 밴드 · 도구 탭 · 자사정보 카드 · picker 다중선택 (estimates/edit) === */
.est-hero {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--erp-bg-alt); border: 1px solid var(--erp-border); border-radius: 14px;
  box-shadow: var(--erp-shadow-sm); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-6);
}
.est-hero__brand { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.est-hero__brand img { height: 44px; width: auto; display: block; flex: 0 0 auto; }
.est-hero__title { font-size: var(--erp-text-h2); font-weight: 700; letter-spacing: -0.01em; }
.est-hero__title .muted { font-weight: 400; }
.est-hero .actions { flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

/* 도구 탭(산출내역서 · 재료비 관리 · 노임단가표 · 품셈 기준표 · 공사원가계산서 · 원가 분석) — 내비와 같은 밑줄 스타일 */
.est-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--erp-border); margin-bottom: var(--space-5); }
.est-tab {
  padding: 8px var(--space-4); font-size: var(--erp-text-body); font-weight: 500;
  color: var(--erp-text-soft); text-decoration: none; cursor: pointer; white-space: nowrap;
  position: relative; background: transparent; border: none; font-family: inherit;
  transition: color var(--motion-fast);
}
.est-tab:hover { color: var(--erp-text); }
.est-tab.active { color: var(--erp-text); font-weight: 600; }
.est-tab.active::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px;
  height: 2px; background: var(--erp-pink); border-radius: 2px 2px 0 0;
}
.est-tab[aria-disabled="true"] { color: var(--erp-text-muted); cursor: not-allowed; opacity: 0.65; }
.est-tab__ext { font-size: 10px; opacity: 0.55; margin-left: 2px; }

/* 자사 정보 카드 (edit-company.js) — 한/영 토글 + 2열 그리드(좁은 칸은 ci-half) */
.ci-head { margin-bottom: var(--space-2); }
.ci-note { margin: 0 0 var(--space-3); }
.ci-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); }
.ci-cell { display: flex; flex-direction: column; gap: 3px; grid-column: span 2; }
.ci-cell.ci-half { grid-column: span 1; }
.ci-cell label { font-size: var(--erp-text-label); color: var(--erp-text-soft); font-weight: 500; }

/* 견적 정보 — 프로젝트 연결 박스 */
.est-proj-box {
  border: 1px solid var(--erp-border); background: var(--erp-bg-sunken); border-radius: 10px;
  padding: var(--space-3); margin: var(--space-1) 0 var(--space-3);
}
.est-proj-box .est-proj-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.est-proj-box .est-proj-head b { font-size: var(--erp-text-body); color: var(--erp-text-soft); }

/* picker 다중선택 공용 (catalog-picker.js · piece-rate-picker.js) */
.pk-bar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-2); }
.pk-bar input[type=search] { width: 260px; }
.pk-scroll { max-height: 300px; overflow: auto; }
.pk-chk-col { width: 34px; text-align: center; }
.pk-chk-col input { width: auto; }

/* 빈 행 N개 입력칸(툴바) */
.boq-blank-n { width: 46px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}