/* CSS 정책(hjfsm-design §6): 클래스만 부여, 장식은 나중.
   컬러스킴 = ~10색 토큰. 값은 임시(placeholder) — 스킴마다 이 토큰만 교체.
   다크/라이트는 --text-on-accent 등 글씨색 대비를 별도 토큰으로. */
:root {
  --bg: #111417;
  --surface: #1a1e22;
  --line: #2c3238;
  --text: #e8eaed;
  --text-muted: #9aa2ab;
  --text-on-accent: #101010;
  --accent: #ff8a3d;
  --danger: #ff5d55;
  --warn: #ffc043;
  --ok: #4fd07a;
}

/* 라이트 스킴 — 같은 토큰만 교체. 글씨색 대비 유의(WCAG): accent 위 글자는 --text-on-accent(흰색). */
:root[data-theme="light"] {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --line: #d7dce1;
  --text: #1b2127;
  --text-muted: #5b636b;
  --text-on-accent: #ffffff;
  --accent: #c8471e;
  --danger: #c0392b;
  --warn: #9a6a00;
  --ok: #1e7a45;
}

* { box-sizing: border-box; }
/* 오버플로 구조 규칙(§6.1): 페이지는 절대 가로로 넘치지 않는다. 넓은 콘텐츠는 자기 컨테이너에서 스크롤. */
html, body { overflow-x: clip; }
img, video, canvas { max-width: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Noto Sans KR", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

/* --- 레이아웃 구조만 (장식 최소) --- */
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 16px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-title { margin: 0 0 8px; font-size: 1.1rem; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 0.85rem; color: var(--text-muted); }
.field-input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); font: inherit; font-size: 0.92rem; min-width: 0; }

.btn { padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem; cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); font-weight: 700; }
.btn-ghost { background: none; }
.form-error { color: var(--danger); font-size: 0.9rem; margin: 0; }

.app-header { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.app-brand { font-weight: 800; color: var(--accent); }
.usernav { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-name { color: var(--text-muted); font-size: 0.9rem; }

/* 본문 = 좌측 사이드바(ERPNext 워크스페이스식) + 메인 */
.app-body { display: flex; align-items: stretch; }
.app-main { flex: 1; min-width: 0; padding: 16px; max-width: 1100px; overflow-x: clip; }
.sidebar { width: 185px; flex: none; background: var(--surface); border-right: 1px solid var(--line); padding: 12px 8px; display: flex; flex-direction: column; gap: 14px; min-height: calc(100dvh - 49px); }
.side-group { display: flex; flex-direction: column; gap: 1px; }
.side-group-title { font-size: 0.72rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 8px 3px; }
.side-link { display: block; padding: 4px 8px; border-left: 2px solid transparent; border-radius: 0 4px 4px 0; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; }
.side-link:hover { background: var(--bg); color: var(--text); }
.side-link.active { background: var(--bg); border-left-color: var(--accent); color: var(--text); font-weight: 700; }
.side-overlay { display: none; }
.burger { display: none; border: 1px solid var(--line); background: none; color: var(--text); border-radius: 6px; font-size: 1.05rem; line-height: 1; padding: 6px 10px; cursor: pointer; }

/* 모바일: 사이드바 = 드로어(버거로 열고 오버레이 탭으로 닫음) */
@media (max-width: 860px) {
  .burger { display: inline-flex; }
  .user-name { display: none; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: 220px; transform: translateX(-100%); transition: transform 0.15s ease; padding-top: 16px; overflow-y: auto; min-height: 0; }
  .app-shell.nav-open .sidebar { transform: none; }
  .side-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 50; }
  .app-shell.nav-open .side-overlay { display: block; }
}
.section-title { font-size: 0.92rem; margin: 0 0 8px; }
.page-title { font-size: 1.05rem; margin: 2px 0 10px; font-weight: 700; }
.placeholder { color: var(--text-muted); }

.nav-link { color: var(--text); text-decoration: none; padding: 4px 10px; border-radius: 6px; font-weight: 600; }
.nav-link.active { background: var(--accent); color: var(--text-on-accent); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 12px; margin-bottom: 12px; overflow-x: auto; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.btn-sm { padding: 4px 8px; font-size: 0.85rem; }
.notice { color: var(--ok); font-size: 0.9rem; margin: 0; }

.list-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.list-table th, .list-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.list-table th { color: var(--text-muted); font-weight: 600; }
.list-table tr.inactive td { color: var(--text-muted); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.role-select { padding: 4px 6px; }

/* 단계 필터 탭 */
.tabs { display: flex; gap: 2px; overflow-x: auto; margin: 4px 0 10px; border-bottom: 1px solid var(--line); }
.tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); text-decoration: none; white-space: nowrap; font-size: 0.88rem;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 700; }
.tab-count { font-size: 0.78rem; opacity: 0.8; font-variant-numeric: tabular-nums; }

/* AS현황 밀집 목록 (장식 최소, 정보 우선) */
.list-head { display: flex; align-items: baseline; gap: 8px; }
.list-head .count { color: var(--text-muted); font-size: 0.9rem; }
.wo-list { border-top: 1px solid var(--line); }
.wo-row { padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.wo-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wo-line2 { color: var(--text-muted); overflow-wrap: anywhere; }
.wo-status { padding: 0 6px; border-radius: 10px; border: 1px solid var(--line); font-size: 0.78rem; font-weight: 700; }
.wo-type { color: var(--text-muted); }
.wo-id { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wo-phone { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wo-tech { margin-left: auto; color: var(--text-muted); white-space: nowrap; }
.assign-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.assign-label { color: var(--text-muted); font-size: 0.82rem; }
.assign-select { max-width: 100%; }

/* 상태 색 — 토큰 기반(장식 나중) */
.status-접수 { color: var(--warn); }
.status-배정 { color: var(--accent); }
.status-진행 { color: var(--ok); }
.status-완료 { color: var(--ok); }
.status-정산완료 { color: var(--text-muted); }
.status-취소 { color: var(--text-muted); }
.status-예정 { color: var(--text-muted); }
.status-이동중 { color: var(--accent); }
.status-작업중 { color: var(--warn); }

.sync-badge { color: var(--warn); font-size: 0.85rem; font-weight: 700; }

/* 기사 모바일 — 밀집(§6.1: 덜 장식적·체계 한눈에). 터치타겟 44px만 유지, 여백 최소. */
.btn-tap { min-height: 44px; padding: 9px 10px; }
.btn-block { display: block; width: 100%; }
.card.dense { padding: 10px 12px; margin-bottom: 10px; }
.visit-card { display: flex; flex-direction: column; gap: 6px; }
.visit-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.visit-type { color: var(--text-muted); font-size: 0.85rem; }
.visit-cust { font-size: 0.98rem; }
.visit-when { margin-left: auto; color: var(--text-muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.visit-meta { font-size: 0.9rem; overflow-wrap: anywhere; }
.visit-meta.muted { color: var(--text-muted); font-size: 0.85rem; }
.visit-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.visit-actions .btn-tap { flex: 1; text-align: center; text-decoration: none; white-space: nowrap; }
.visit-actions .act-main { flex: 2.2; }
.usage-panel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qty-input { width: 72px; }
.usage-list { color: var(--text-muted); font-size: 0.9rem; }
.placeholder.small { font-size: 0.85rem; }
.done-title { margin-top: 20px; color: var(--text-muted); }

/* 관리 랜딩 메뉴 그리드 */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.menu-item { text-decoration: none; color: var(--text); display: block; }
.menu-item:hover { border-color: var(--accent); }
.settings-account { margin-top: 4px; }

/* 부품·재고 관리 */
.sep { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.stock-adjust { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.stock-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stock-name { flex: 1; overflow-wrap: anywhere; }

/* 첨부 */
.attach-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.attach-photo-btn { position: relative; overflow: hidden; }
.attach-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.attach-status { color: var(--text-muted); font-size: 0.85rem; }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.thumb-fig { margin: 0; }
.thumb { width: 100%; height: 96px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; display: block; background: #fff; }
.thumb-cap { font-size: 0.75rem; color: var(--text-muted); }
.thumb-file { font-size: 0.85rem; color: var(--accent); overflow-wrap: anywhere; }

/* 완료 사진 체크리스트 (기사 현장) */
.checklist-panel { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.checklist-head { display: flex; align-items: baseline; gap: 8px; }
.checklist-title { font-weight: 700; font-size: 0.9rem; }
.checklist-progress { font-size: 0.8rem; color: var(--warn); font-weight: 700; }
.checklist-progress.ok { color: var(--ok); }
.slot-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.slot { display: flex; align-items: center; gap: 8px; position: relative; overflow: hidden; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; min-height: 46px; }
.slot-required { border-color: var(--warn); }
.slot-filled { border-color: var(--ok); }
.slot-mark { font-weight: 700; width: 1.2em; text-align: center; }
.slot-filled .slot-mark { color: var(--ok); }
.slot-required .slot-mark { color: var(--warn); }
.slot-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.slot-label { font-size: 0.92rem; overflow-wrap: anywhere; }
.slot-hint { font-size: 0.78rem; color: var(--text-muted); }
.slot-cam { color: var(--accent); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.slot-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: #fff; }

/* 체크리스트 관리(관리자) */
.checklist-admin { display: flex; flex-direction: column; gap: 6px; }
.cl-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.cl-mark { font-size: 0.72rem; font-weight: 700; padding: 1px 6px; border-radius: 10px; border: 1px solid var(--line); color: var(--text-muted); white-space: nowrap; }
.cl-mark.req { color: var(--warn); border-color: var(--warn); }
.cl-label { font-weight: 600; }
.cl-hint { color: var(--text-muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.cl-actions { margin-left: auto; display: flex; gap: 6px; white-space: nowrap; }
.cl-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cl-check { display: flex; align-items: center; gap: 6px; }

/* WO 관리 액션 */
.add-visit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.add-visit .field-input { width: auto; }

/* WO 완료 보고 */
.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.report-slot { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
.report-slot .thumb { height: 90px; }
.report-slot.missing { color: var(--warn); }
.report-empty { display: grid; place-items: center; height: 90px; border: 1px dashed var(--line); border-radius: 6px; color: var(--text-muted); }

.sig-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: grid; place-items: center; z-index: 100; padding: 16px; }
.sig-box { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sig-title { margin: 0; font-size: 1rem; }
.sig-canvas { border: 1px solid var(--line); border-radius: 6px; touch-action: none; background: #fff; max-width: 100%; }

/* 고객·자산 */
.asset-list { display: flex; flex-direction: column; gap: 4px; }
.asset-row { padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.asset-title { font-weight: 600; }
.asset-edit { margin-left: auto; }
.asset-form { margin-top: 8px; }
.appt-result { color: var(--warn); font-size: 0.8rem; font-weight: 700; }

/* WO 상세 */
.dl-row { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 4px 0; }
.dl-key { color: var(--text-muted); }
.dl-val { overflow-wrap: anywhere; white-space: pre-wrap; }
.appt-list { display: flex; flex-direction: column; gap: 8px; }
.appt-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
.wo-link { display: block; text-decoration: none; color: var(--text); }
.wo-link:hover .wo-cust { color: var(--accent); }
.history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; color: var(--text-muted); }

/* 전역 검색 (Ctrl+K, ERPNext awesome bar) */
.search-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 120; display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.search-box { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.search-input { width: 100%; padding: 10px 12px; border: none; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; outline: none; }
.search-results { max-height: 50vh; overflow-y: auto; }
.search-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; color: var(--text); text-decoration: none; font-size: 0.9rem; border-bottom: 1px solid var(--line); }
.search-row:hover { background: var(--bg); }
.search-kind { flex: none; font-size: 0.72rem; color: var(--text-muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
.search-label { overflow-wrap: anywhere; }
.search-empty { padding: 12px; color: var(--text-muted); font-size: 0.85rem; }
.kbd { font-size: 0.7rem; color: var(--text-muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
@media (max-width: 860px) { .search-btn .kbd { display: none; } }
.report-input { width: 100%; }

/* 대시보드 스탯 타일 */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin-bottom: 14px; }
.stat-tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--text); }
.stat-num { font-size: 1.3rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-label { font-size: 0.78rem; color: var(--text-muted); }
.stat-tile.tone-warn .stat-num { color: var(--warn); }
.stat-tile.tone-danger .stat-num { color: var(--danger); }
.stat-tile:hover { border-color: var(--accent); }

/* 주간 일정 */
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 14px; }
.day-col { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 5px; min-height: 90px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.day-col.today { border-color: var(--accent); }
.day-head { display: flex; align-items: baseline; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.day-col.today .day-head { color: var(--accent); }
.day-count { font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.appt-chip { display: block; text-decoration: none; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; font-size: 0.8rem; }
.appt-chip:hover { border-color: var(--accent); }
.appt-chip .wo-line1 { gap: 4px; }
.appt-chip .wo-line2 { font-size: 0.76rem; }
.appt-chip .status-pill { font-size: 0.7rem; padding: 0 5px; }
@media (max-width: 860px) { .week-grid { grid-template-columns: 1fr; } .day-col { min-height: 0; } }

/* 타임라인(상태 이력+코멘트) */
.tl-form { display: flex; gap: 6px; margin-bottom: 10px; }
.tl-input { flex: 1; }
.tl-list { display: flex; flex-direction: column; }
.tl-row { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.tl-meta { color: var(--text-muted); font-size: 0.78rem; }
.tl-status { color: var(--text-muted); }
.tl-body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* 정산 */
.settle-toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.field.inline { flex-direction: row; align-items: center; gap: 8px; }
.month-picker { width: auto; }
.settle-total { text-align: right; margin-top: 10px; font-size: 1.05rem; }
.rowlink { color: var(--accent); text-decoration: none; }

/* ===== 밀집 UI 토대 (ERPNext식, ref/10) — 앱 전체 적용(§6.1) ===== */

/* 브레드크럼 */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-muted); margin: 0 0 6px; flex-wrap: wrap; }
.crumb { color: var(--text-muted); text-decoration: none; }
.crumb:hover { color: var(--text); }
.crumb.current { color: var(--text); font-weight: 600; }
.crumb-sep { opacity: 0.5; }

/* 상태 pill: 색점 + 라벨. 색은 함께 붙이는 .status-<상태>가 currentColor로 공급 */
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* 우측정렬 숫자 */
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* 입력 폭은 데이터 타입이 결정(§6.1) — 표 안에서 기본폭이 새는 것 방지 */
.w-num { width: 60px; text-align: right; }          /* 순서·수량 등 짧은 숫자 */
.cell-grow { width: 100%; min-width: 110px; }        /* 이름·코드 — 남는 폭 전부 */

/* 긴급·세부상태 배지 */
.prio { color: var(--danger); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.substatus { color: var(--warn); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }

/* 방문 테이블 인라인 편집(일시·crew) */
.cell-date { padding: 3px 6px; font-size: 0.82rem; width: auto; }
.cell-add { padding: 2px 4px; font-size: 0.8rem; width: auto; }
.crew-cell { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.crew-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 0 6px; font-size: 0.8rem; white-space: nowrap; }
.chip-x { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; padding: 0 2px; line-height: 1; }
.chip-x:hover { color: var(--danger); }

/* 목록 툴바 + 인라인 필터 행 */
.list-toolbar { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; }
.list-count { color: var(--text-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.toolbar-right { display: inline-flex; align-items: center; gap: 10px; }
.list-filter-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.list-filter-row .field-input, .list-filter-row select { padding: 5px 8px; font-size: 0.85rem; width: auto; min-width: 110px; }

/* 다열 폼 그리드: 라벨 위 작은 글씨, 값 촘촘히 */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; }
.fg { display: flex; flex-direction: column; gap: 2px; padding: 3px 0; min-width: 0; }
.fg-key { font-size: 0.74rem; color: var(--text-muted); }
.fg-val { font-size: 0.92rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.fg.full { grid-column: 1 / -1; }
.stack-tight { display: flex; flex-direction: column; gap: 6px; }
.mb8 { margin-bottom: 8px; }

/* 문서 레이아웃: 본문 + 우측 메타 사이드바 */
.doc-layout { display: grid; grid-template-columns: 1fr 240px; gap: 16px; align-items: start; }
.doc-sidebar { display: flex; flex-direction: column; gap: 10px; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; }
.side-title { font-size: 0.76rem; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.conn-list { display: flex; flex-direction: column; gap: 3px; font-size: 0.85rem; }
.conn-row { overflow-wrap: anywhere; }
.conn-none { color: var(--text-muted); }
@media (max-width: 720px) { .doc-layout { grid-template-columns: 1fr; } }

/* 폼 탭 */
.form-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; }
.tab-btn { padding: 8px 12px; border: none; background: none; color: var(--text-muted); font: inherit; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* 밀집 자식 테이블(방문·부품·항목 라인) */
.child-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.child-table th, .child-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.child-table th { color: var(--text-muted); font-weight: 600; font-size: 0.76rem; }
.child-table td.num, .child-table th.num { text-align: right; }

/* ── 인쇄 양식 ─────────────────────────────────────────────
   문서는 항상 흰 바탕·검은 글씨(테마 무관) — 종이에 찍히는 것이 기준.
   미리보기와 실제 인쇄가 같은 .print-doc 규칙을 쓴다. */
.print-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: flex-start; justify-content: center;
}
.print-shell {
  display: flex; flex-direction: column;
  width: min(100%, 900px); height: 100%;
}
.print-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.print-bar-title { font-weight: 600; margin-right: 4px; }
.print-scroll { flex: 1; overflow: auto; padding: 16px; }

/* A4 용지 */
.print-paper {
  background: #fff; color: #111;
  width: 210mm; min-height: 297mm; margin: 0 auto; padding: 15mm;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.print-doc { font-size: 10.5pt; line-height: 1.5; }
.print-doc h1 { font-size: 17pt; margin: 0 0 2mm; letter-spacing: 2px; }
.print-doc h2 { font-size: 11pt; margin: 4mm 0 1.5mm; padding-bottom: 1mm; border-bottom: 1px solid #888; }
.print-title { margin-bottom: 6mm; }
.print-title.align-center { text-align: center; }
.print-title.align-left { text-align: left; }
.print-sub { margin: 0; color: #555; font-size: 10pt; }

.print-doc table { width: 100%; border-collapse: collapse; margin-bottom: 4mm; }
.print-doc th, .print-doc td { border: 1px solid #999; padding: 1.6mm 2mm; text-align: left; vertical-align: top; }
.print-doc .num { text-align: right; }
.print-fields th { background: #f0f0f0; width: 22%; white-space: nowrap; }
.print-table thead th { background: #f0f0f0; }
.print-empty { text-align: center; color: #777; }
.print-total { width: 60%; margin-left: auto; }
.print-total th { background: #f0f0f0; width: 50%; }
.print-total .grand th, .print-total .grand td { font-weight: 700; background: #e6e6e6; }
.print-text p { margin: 0 0 3mm; white-space: pre-wrap; }
.print-sign { display: flex; gap: 10mm; margin-top: 10mm; }
.print-sign-box { flex: 1; }
.print-sign-label { display: block; font-size: 9.5pt; color: #555; margin-bottom: 8mm; }
.print-sign-line { display: block; border-bottom: 1px solid #333; }
.print-unknown { color: #b00; font-size: 9pt; }

/* 편집기 */
.print-editor { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: start; }
.print-editor-right { position: sticky; top: 8px; }
.print-editor-right .print-paper {
  width: 100%; min-height: 0; padding: 10mm; transform: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.print-editor-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.print-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.print-block { padding: 8px 10px; }
.print-block-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.print-form { display: flex; flex-direction: column; gap: 6px; }
.print-form textarea { width: 100%; font: inherit; }
.print-form textarea.mono { font-family: ui-monospace, monospace; font-size: 12px; }
.print-items { display: flex; flex-direction: column; gap: 4px; }
.print-item-row { display: flex; align-items: center; gap: 4px; }
.print-item-label { flex: 0 0 34%; min-width: 0; }
.print-item-row select { flex: 1; min-width: 0; }
.print-actions { display: flex; gap: 8px; margin-top: 8px; }
.print-msg { color: var(--ok); font-size: 13px; }
.print-msg.dirty { color: var(--warn); }
.spacer { flex: 1; }

@media (max-width: 900px) {
  .print-editor { grid-template-columns: 1fr; }
  .print-editor-right { position: static; }
  .print-paper { width: 100%; min-height: 0; padding: 8mm; }
}

/* 실제 인쇄 — 오버레이의 용지만 남기고 앱 UI는 전부 숨긴다 */
@page { size: A4; margin: 15mm; }
@media print {
  body > *:not(.print-overlay) { display: none !important; }
  .print-overlay { position: static; background: none; display: block; }
  .print-shell { width: auto; height: auto; display: block; }
  .print-bar { display: none !important; }
  .print-scroll { overflow: visible; padding: 0; }
  .print-paper { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
  .print-table thead { display: table-header-group; }   /* 페이지 넘김 시 머리글 반복 */
  .print-doc tr, .print-sign { break-inside: avoid; }
}