/* 공용 화면 부품 — 관리자(admin)와 영업 포털(sales)이 같이 쓴다(D-042 · 폴더 경계 D-021).
   단추 · 입력 · 페이지 머리 · 판 · 숫자 칸 · 표 · 칩 · 폼 · 대화상자 · 안내. 색 토큰은 base.css(여기서는 작업면 토큰만).
   ★ 관리자 화면에만 쓰는 모양(왼쪽 메뉴 · 메뉴별 화면)은 admin/admin.css · admin/css/<메뉴>.css 에 둔다. */
:root {
  --bg: #F3F4F6; --panel: var(--white); --side: var(--ink); --side-text: rgba(255, 255, 255, .72);
  --r: 10px;
  /* 단계 색 */
  --st-new: var(--accent); --st-doing: #C98A00; --st-hold: #7A7F87; --st-tentative: #2F6FD6;
  --st-booked: #1E7F4F; --st-done: #3F6B55; --st-cancelled: #9AA0A8; --st-closed: #5B4BC4;
}
html, body { height: 100%; }
body { background: var(--bg); font-size: 14.5px; line-height: 1.55; }
h1, h2, h3 { margin: 0; color: var(--ink); letter-spacing: -.02em; }
.loading, .muted { color: var(--sub); }
.mono { font-variant-numeric: tabular-nums; color: var(--sub); font-size: 13px; }
.brand-logo { display: block; height: 24px; width: auto; }   /* 판플 로고(shared/brand, D-024) */

/* 단추 · 입력 */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; cursor: pointer; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-d); }
.btn-ghost { background: transparent; color: inherit; border-color: rgba(255, 255, 255, .25); }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn-wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.f { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.f[hidden] { display: none; }
input, select, textarea { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid #D5D9DF; border-radius: 8px; background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 400; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
select[disabled], textarea[disabled] { background: var(--bg); color: var(--sub); }

.demo-note { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--warn-bg); font-size: 12.5px; color: var(--warn-text); }
/* 페이지 */
.page-head { display: grid; gap: 2px; }
.page-head h1 { font-size: 22px; }
.page-head p { margin: 0; color: var(--sub); }
.panel { min-width: 0; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 14px; }
.panel h2 { font-size: 16px; }
.empty { padding: 48px 20px; text-align: center; background: var(--panel); border: 1px dashed var(--line); border-radius: 14px; }
.empty p { color: var(--sub); }
.warn { margin: 0; padding: 12px 14px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn-text); font-weight: 600; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } }
.kpi { display: grid; gap: 4px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; }
.kpi span { color: var(--sub); font-size: 13px; font-weight: 600; }
.kpi b { color: var(--ink); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
a.kpi:hover { border-color: var(--accent); }

.stage-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stage-bars a { display: grid; grid-template-columns: 110px 44px 1fr; align-items: center; gap: 12px; padding: 6px 4px; border-radius: 8px; text-decoration: none; }
.stage-bars a:hover { background: var(--bg); }
.stage-bars b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.bar-track { display: block; height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent); }

.chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; color: #fff; background: var(--sub); }
.st-new { background: var(--st-new); } .st-doing { background: var(--st-doing); } .st-hold { background: var(--st-hold); }
.st-tentative { background: var(--st-tentative); } .st-booked { background: var(--st-booked); } .st-done { background: var(--st-done); }
.st-cancelled { background: var(--st-cancelled); } .st-closed { background: var(--st-closed); }

/* 표 */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.panel .table-wrap { border-radius: var(--r); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl thead th { position: sticky; top: 0; background: #FAFAFB; color: var(--sub); font-size: 12.5px; font-weight: 700; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl-click tbody tr { cursor: pointer; }
.tbl-click tbody tr:hover, .tbl-click tbody tr:focus { background: var(--accent-soft); outline: none; }
.tbl td.none { text-align: center; color: var(--sub); padding: 32px; }
.flags { display: flex; gap: 4px; }
.flag { padding: 1px 6px; border-radius: 5px; background: var(--bg); color: var(--text); font-size: 11.5px; font-weight: 700; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.chip-btn.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.search { width: min(320px, 100%); margin-left: auto; }
.detail-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.detail-head p { margin: 0; }
.detail-head h2 { font-size: 18px; }
.icon-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-size: 18px; cursor: pointer; }
/* 폼 */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-grid h3 { margin: 6px 0 -4px; font-size: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.form-grid h3:first-child { border-top: 0; padding-top: 0; }
.form-grid h3 small { color: var(--sub); font-weight: 500; }
.f-wide { grid-column: 1 / -1; }
.f em { font-style: normal; color: var(--accent); }
.f .hint { color: var(--sub); font-weight: 400; font-size: 12px; }
[aria-invalid="true"] { border-color: var(--err) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 14%, transparent) !important; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }
.caps { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.caps legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-status { margin: 0; font-size: 13.5px; font-weight: 600; }
.form-status[data-kind="err"] { color: var(--err); }
.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; }

.q-dialog { width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.q-dialog::backdrop { background: rgba(17, 20, 24, .45); }
.q-dialog form { display: grid; gap: 14px; padding: 22px; }
.note { margin: 0; padding: 12px 14px; border-radius: var(--r); background: var(--accent-soft); color: var(--ink); font-size: 13.5px; }
.res-sum { display: block; margin-top: 2px; color: var(--sub); font-size: 12.5px; }
.tag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--bg); color: var(--sub); font-size: 11.5px; font-weight: 700; line-height: 1.7; vertical-align: 1px; }
.toolbar .grow { flex: 1 1 auto; }

/* 견적서 편집기(shared/js/ui/quote-editor.js — 관리자 · 영업 포털, D-043) */
.q-section { display: grid; gap: 10px; }
.q-section h3 { margin: 0; }
.q-items input { min-height: 36px; padding: 6px 10px; }
.q-items td { padding: 6px 8px; }
.q-items td.num input { text-align: right; }
.q-items th:first-child, .q-items td:first-child { width: 42%; min-width: 180px; }
.q-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
@media (max-width: 760px) { .q-bottom { grid-template-columns: minmax(0, 1fr); } }
.q-sum { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; padding: 16px; border-radius: var(--r); background: var(--bg); font-variant-numeric: tabular-nums; }
.q-sum dt { color: var(--sub); }
.q-sum dd { margin: 0; text-align: right; color: var(--ink); font-weight: 600; }
.q-sum .total { padding-top: 8px; border-top: 1px solid var(--line); font-size: 17px; font-weight: 800; color: var(--ink); }