/* Apple-style design system */
:root {
  --bg: #f5f5f7;
  --card: #ffffff;
  --text: #1d1d1f;
  --text2: #6e6e73;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --border: #d2d2d7;
  --grid-border: #e3e3e8;
  --grid-head: #f5f5f7;
  --green: #34c759;
  --red: #ff3b30;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro KR", "Apple SD Gothic Neo",
    "Malgun Gothic", "Segoe UI", sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 14px; -webkit-font-smoothing: antialiased;
}
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.8); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 24px; height: 48px;
  /* main(max-width 1240 + padding 24)의 콘텐츠 시작선과 좌우를 맞춤 */
  padding: 0 max(24px, calc((100% - 1240px) / 2 + 24px));
}
nav .brand {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--text);
}
nav .brand img { height: 20px; width: auto; display: block; }
nav a { color: var(--text2); text-decoration: none; font-size: 13px; transition: color .15s; }
nav a:hover, nav a.active { color: var(--text); }
main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 80px; }
/* ── 화면 글자 크기 5단계 — 인라인 style로 크기를 덮어쓰지 말고 아래를 쓴다 ──
   22 페이지 제목(h1) · 19 카드 제목(h2) · 14 본문(body) · 13 부제·표(.sub)
   12 도움말(.hint, label, 표 머리) · 11 이하는 배지 등 예외 */
h1 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; margin-bottom: 4px; }
h2 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.sub { font-size: 13px; color: var(--text2); margin-bottom: 24px; }
/* 제목 옆이나 표 아래에 붙는 설명문 */
.hint { font-size: 12px; font-weight: 400; color: var(--text2); }
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  padding: 22px; margin-bottom: 20px;
}
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  border-radius: 980px; padding: 8px 18px; font-size: 13px; font-weight: 500;
  transition: background .15s; text-decoration: none;
  white-space: nowrap;                 /* 폭이 좁아도 글자를 두 줄로 쪼개지 않는다 — 줄바꿈은 버튼 사이에서 */
}
.btn:hover { background: var(--accent-hover); }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn.ghost:hover { background: rgba(0,113,227,.06); }
.btn.danger { background: transparent; color: var(--red); border: 1px solid transparent; }
.btn.danger:hover { background: rgba(255,59,48,.08); }
.btn.small { padding: 4px 12px; font-size: 12px; }
input, select {
  font: inherit; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,113,227,.15); }
label { font-size: 12px; color: var(--text2); display: block; margin-bottom: 4px; }
.field { display: flex; flex-direction: column; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }

/* Excel-like grid */
.grid { width: 100%; border-collapse: collapse; background: #fff; }
.grid th, .grid td {
  border: 1px solid var(--grid-border); padding: 6px 8px; font-size: 13px;
}
.grid th {
  background: var(--grid-head); font-weight: 600; color: var(--text2);
  font-size: 12px; text-align: center; white-space: nowrap;
}
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid td.ctr { text-align: center; }
.grid input, .grid select {
  width: 100%; border: 1px solid transparent; border-radius: 6px;
  padding: 4px 6px; background: transparent; font-size: 13px;
}
.grid input:hover, .grid select:hover { border-color: var(--border); background: #fff; }
.grid input:focus, .grid select:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 2px rgba(0,113,227,.12); }
.grid input.num { text-align: right; }
/* 원가계산서·견적서·결산 대시보드: 여백을 줄여 좌우 스크롤 없이 한 화면에 들어가게 */
#costGrid th, #costGrid td, #quoteGrid th, #quoteGrid td,
#dGrid th, #dGrid td { padding: 4px 5px; }
#costGrid input, #quoteGrid input { padding: 3px 4px; }
#dGrid td.num, #dGrid th.num { padding-right: 7px; }   /* 금액 열은 오른쪽만 살짝 띄움 */

/* 프로젝트 목록: 여백 축소 + 날짜·번호는 줄바꿈 금지 */
#projTable th, #projTable td { padding: 5px 6px; }
#projTable td:nth-child(1),                    /* 계약번호 */
#projTable td:nth-child(6),                    /* 작성일 */
#projTable td:nth-child(7) { white-space: nowrap; font-size: 12px; }
#projTable td:nth-child(3) { font-size: 12px; line-height: 1.45; }  /* 주소 */
#projTable .stage-label { font-size: 12px; }
/* 마진계수(1.07885)처럼 자릿수 많은 값이 잘리지 않게 여백만 줄임 */
#quoteGrid td:nth-child(7) input { padding-left: 2px; padding-right: 3px; }
/* 열이 많은 표(결산서)용 조밀 모드 */
.grid.dense th, .grid.dense td { padding: 3px 4px; font-size: 12px; }
.grid.dense input { padding: 2px 3px; font-size: 12px; }
.grid.dense .btn.small { padding: 2px 7px; font-size: 11px; }

/* 요율을 자주 조정하는 항목(구조물 제작·설치, 전기설계·감리) — 견적서에서 배경색으로 구분 */
.grid tr.rate-row td { background: #fff7e6; }
.grid tr.rate-row td:nth-child(7) { background: #ffefc7; }   /* 마진계수 칸은 조금 더 진하게 */
/* NEGO(네고 조정) 줄 — 소계에서 빠지므로 눈에 띄게 빨간 글씨 (인쇄에도 동일) */
tr.nego, tr.nego td, tr.nego input { color: var(--red) !important; }
.grid tr.total-row td { background: #fafafa; font-weight: 600; }
.grid tr.grand td { background: #eef4fd; font-weight: 700; font-size: 14px; }
.grid .auto-badge {
  display: inline-block; font-size: 10px; color: var(--accent);
  background: rgba(0,113,227,.09); border-radius: 5px; padding: 1px 6px; margin-left: 4px;
}
.grid-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--grid-border); }

/* tabs */
.tabs { display: inline-flex; background: #e8e8ed; border-radius: 10px; padding: 3px; margin-bottom: 18px; }
.tabs button {
  border: none; background: transparent; cursor: pointer; font: inherit; font-size: 13px;
  padding: 6px 20px; border-radius: 8px; color: var(--text2); font-weight: 500;
}
.tabs button.active { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

.summary { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.stat { flex: 1; min-width: 150px; background: var(--grid-head); border-radius: 12px; padding: 14px 16px; }
.stat .k { font-size: 12px; color: var(--text2); }
.stat .v { font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat.hl { background: #eef4fd; }
.stat.hl .v { color: var(--accent); }

.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: rgba(29,29,31,.92); color: #fff; padding: 10px 22px; border-radius: 980px;
  font-size: 13px; opacity: 0; transition: all .3s; z-index: 99;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 진행 단계 스테퍼 */
.stepper { display: inline-flex; gap: 3px; align-items: center; }
.stepper .step {
  width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e8e8ed; color: var(--text2); cursor: pointer; border: none;
  transition: transform .1s, background .15s; position: relative;
}
.stepper .step:hover { transform: scale(1.2); }
.stepper .step.done { background: var(--accent); color: #fff; }
.stepper .step.cur { background: var(--accent); color: #fff; box-shadow: 0 0 0 3px rgba(0,113,227,.25); }
.stage-label { font-size: 11px; color: var(--accent); font-weight: 600; white-space: nowrap; }

/* 모달 */
.modal-back {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.35); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal {
  background: var(--card); border-radius: 18px; padding: 24px 26px;
  max-width: 860px; width: 100%; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* 파일 드롭존 */
.dropzone {
  border: 2px dashed var(--border); border-radius: 14px;
  padding: 30px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s; background: var(--grid-head);
}
.dropzone:hover { border-color: var(--accent); }
.dropzone.drag { border-color: var(--accent); background: rgba(0,113,227,.06); }
.dropzone .dz-icon { font-size: 30px; margin-bottom: 8px; }
.dropzone .dz-main { font-size: 14px; font-weight: 600; }
.dropzone .dz-sub { font-size: 12px; color: var(--text2); margin-top: 4px; }
.dropzone .dz-file { font-size: 13px; color: var(--accent); font-weight: 600; margin-top: 8px; }

/* 모바일: 프로젝트 목록을 카드로 재배치 (마크업 그대로, 표시만 변경) */
@media (max-width: 720px) {
  main { padding: 16px 12px 60px; }
  h1 { font-size: 22px; }
  nav { height: auto; flex-wrap: wrap; gap: 14px; padding: 10px 12px; }  /* main과 동일 */

  /* iOS Safari는 글자 16px 미만 입력칸에 포커스하면 자동 확대함 → 16px로 막음
     (user-scalable=no 대신. 손가락 확대는 살려둬야 함) */
  input, select, textarea, .grid input, .grid select { font-size: 16px !important; }

  /* 입력줄: 글자칸은 한 줄, 숫자·날짜·선택은 두 개씩 (인라인 width 무력화) */
  .row > .field { flex: 1 1 100% !important; min-width: 0 !important; }
  .row > .field:has(> input.num),
  .row > .field:has(> input[type="date"]),
  .row > .field:has(> select) { flex: 1 1 44% !important; }
  .row > .field input, .row > .field select { width: 100% !important; }

  /* 요약 카드 2열, 탭은 가로 스크롤 */
  .stat { flex: 1 1 44%; min-width: 0; }
  .tabs { display: flex; max-width: 100%; overflow-x: auto; }
  .tabs button { white-space: nowrap; padding: 6px 14px; }
  .modal { padding: 18px 16px; max-height: 90vh; }

  #projTable, #projTable tr, #projTable td { display: block; }
  #projTable tr:first-child { display: none; }          /* 헤더 숨김 */
  .grid-wrap:has(#projTable) { border: none; overflow: visible; }  /* 목록만 카드화 */
  #projTable tr.prow {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px;
    border: 1px solid var(--grid-border); border-radius: 12px;
    padding: 13px 15px; margin-bottom: 10px; background: #fff;
  }
  #projTable tr.prow td { border: none; padding: 0; }
  /* 열: 1계약번호 2현장명 3주소 4용량 5단계 6작성일 7수정일 8버튼 */
  #projTable td:nth-child(2) { order: 1; width: 100%; font-size: 15px; }
  #projTable td:nth-child(1),
  #projTable td:nth-child(3),
  #projTable td:nth-child(4),
  #projTable td:nth-child(6),
  #projTable td:nth-child(7) { font-size: 11px; color: var(--text2); text-align: left; }
  #projTable td:nth-child(1) { order: 2; }
  #projTable td:nth-child(4) { order: 3; }
  #projTable td:nth-child(4)::before { content: '· '; }
  #projTable td:nth-child(4)::after { content: ' kW'; }
  #projTable td:nth-child(3) { order: 4; width: 100%; }
  #projTable td:nth-child(5) { order: 5; width: 100%; margin-top: 2px; }
  #projTable td:nth-child(6) { order: 6; }
  #projTable td:nth-child(6)::before { content: '작성 '; }
  #projTable td:nth-child(7) { order: 7; }
  #projTable td:nth-child(7)::before { content: '수정 '; }
  #projTable td:nth-child(8) { order: 8; margin-left: auto; }
  #projTable tr:not(.prow) td { padding: 20px 0; }
  .stepper .step { width: 28px; height: 28px; font-size: 11px; }  /* 터치 타깃 */
}

/* 프린트용 견적서·원가계산서 양식 (엑셀 양식 재현)
   계약서(.doc.contract)와 같은 규칙: 글자 크기는 아래 변수로만 정하고,
   내용 폭 820px에 맞춰 그린 뒤 인쇄에서 zoom으로 A4에 맞춘다 */
.doc {
  --doc-fs-title: 30px;  /* 문서 제목 */
  --doc-fs-sign: 18px;   /* 하단 상호 */
  --doc-fs-lead: 14px;   /* 수신처 줄 (○○ 사업주 귀하) */
  --doc-fs: 12.5px;      /* 표 본문 */
  --doc-fs-sm: 12px;     /* 비고·회사정보 */
  background: #fff; padding: 34px 40px; max-width: 900px; margin: 0 auto;   /* 내용 폭 820px */
}
.doc-logo { height: 34px; width: auto; display: block; margin-bottom: 6px; }
.doc-title { text-align: center; font-size: var(--doc-fs-title); font-weight: 800; letter-spacing: 18px; margin-bottom: 20px; }
.doc-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.doc-head table { border-collapse: collapse; font-size: var(--doc-fs); }
.doc-head td { border: 1px solid #333; padding: 5px 10px; }
.doc-head td.h { background: #f0f0f2; font-weight: 600; white-space: pre-line; text-align: center; }
.doc-company { font-size: var(--doc-fs-sm); line-height: 1.9; white-space: pre-line; border: 1px solid #333; padding: 8px 14px; }
.doc table.items { width: 100%; border-collapse: collapse; font-size: var(--doc-fs); }
.doc table.items th, .doc table.items td { border: 1px solid #333; padding: 4.5px 7px; }
.doc table.items th { background: #f0f0f2; font-weight: 600; }
.doc table.items td.num { text-align: right; font-variant-numeric: tabular-nums; }
.doc table.items td.ctr { text-align: center; }
.doc .notes { font-size: var(--doc-fs-sm); margin-top: 12px; line-height: 1.9; }
.doc .doc-to { font-size: var(--doc-fs-lead); }
.doc .sign {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: var(--doc-fs-sign); font-weight: 700; margin-top: 18px; letter-spacing: 6px;
}
.doc .sign img { height: 26px; width: auto; }
/* 결재란 (기안자 → 대표 2단계) */
table.ct-approval {
  float: right; border-collapse: collapse; margin: 0 0 8px 12px; text-align: center;
}
table.ct-approval th, table.ct-approval td {
  border: 1px solid #333; padding: 3px 6px; font-size: 11.5px; min-width: 64px; height: 22px;
}
table.ct-approval th { background: #f0f0f2; font-weight: 600; }
table.ct-approval td.lbl { background: #f0f0f2; font-weight: 600; min-width: 22px; padding: 3px; }

/* ── 계약서 양식 규칙 ──────────────────────────────────────────────
   화면에선 빈칸 입력, 인쇄하면 그대로 계약서. 화면과 인쇄가 같은 값을 쓴다.

   글자 4단계 — 아래 변수 외의 크기는 이 양식에 쓰지 않는다
     제목 20px/700 · 일반조건 제목 16px/700 · 본문·입력칸 13px · 보조(메모·조항·범례) 11.5px
     라벨(td.h)은 본문 크기에 굵기 600, 값은 굵기 400, 금액은 600
   입력칸 폭 3단계 + 나머지는 셀 전체 폭
     w-sm 비율·연수·일수 / w-md 요율 / w-lg 금액·짧은 문구
   여백은 --ct-pad 하나로 통일 (인쇄는 zoom으로 축소하므로 값은 그대로 둔다) */
.doc.contract {
  --ct-fs: 13px;        /* 본문·입력칸 */
  --ct-fs-sm: 11.5px;   /* 메모·조항 등 보조 */
  --ct-fs-title: 20px;  /* 표지 제목 */
  --ct-fs-title2: 16px; /* 일반조건 제목 */
  --ct-pad: 4px 7px;    /* 표 셀 여백 */
  --ct-w-sm: 48px;      /* 비율(0.05)·연수·일수 */
  --ct-w-md: 84px;      /* 보증금율 등 짧은 값 */
  --ct-w-lg: 136px;     /* 금액·한 줄 문구 */
  font-size: var(--ct-fs);
  min-width: 820px;     /* 인쇄 양식이라 좁은 창에서 눌리지 않게 — 대신 카드가 가로 스크롤 */
}
.card:has(> .doc.contract) { overflow-x: auto; }
.ct-title { text-align: center; font-size: var(--ct-fs-title); font-weight: 700; margin: 6px 0 14px; letter-spacing: 1px; }
table.ct { width: 100%; border-collapse: collapse; }
table.ct td { border: 1px solid #333; padding: var(--ct-pad); vertical-align: middle; font-size: var(--ct-fs); }
table.ct td.n { width: 26px; text-align: center; color: #555; }
/* "태양광 시스템 1식"이 한 줄에 들어가는 폭 */
table.ct td.h { width: 148px; background: #f0f0f2; font-weight: 600; white-space: nowrap; }
table.ct td.h2 { width: 148px; padding-left: 14px; white-space: nowrap; }
table.ct td.w { width: 56px; color: #555; white-space: nowrap; text-align: center; }  /* 일금·원정 */
/* 비율은 %로 입력한다 (5 = 5%) — 숫자칸 + % 기호가 한 줄에 들어가는 폭 */
table.ct td.pct { width: 64px; white-space: nowrap; }
table.ct td.pct input { width: calc(100% - 15px); display: inline-block; }
table.ct td.pct .pct-sign { color: #555; }
table.ct td.ko { font-weight: 500; }
table.ct td.amt { width: 118px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
table.ct td.memo { width: 150px; color: #555; font-size: var(--ct-fs-sm); }
/* 입력칸 = 연한 파랑, 자동계산칸 = 회색 (화면에서만 구분, 인쇄하면 사라짐) */
table.ct input, table.ct textarea {
  width: 100%; border: none; border-bottom: 1px dotted #b9d3f0; border-radius: 0;
  padding: 2px 3px; font-size: var(--ct-fs); background: #eef5fd; resize: vertical;
}
table.ct input:hover, table.ct textarea:hover { background: #e2eefb; }
table.ct input:focus, table.ct textarea:focus {
  border-bottom-color: var(--accent); box-shadow: none; background: #fff;
  outline: 1px solid var(--accent);
}
table.ct td.auto { background: #f4f4f6; color: #333; }
/* 기안서 구매내역 — 열 폭을 머리행 값으로 고정해 문서 폭(820px, A4 인쇄틀)을 벗어나지 않게.
   자재 선택칸이 남는 폭을 다 쓰고, 긴 자재명은 칸 안에서 잘린다 (펼치면 전체가 보인다) */
#linesTbl { table-layout: fixed; }
#linesTbl select { width: 100%; }
/* 문장 안에 들어가는 자동 계산값 (하자보수 대상액) */
.auto-inline { display: inline-block; min-width: var(--ct-w-lg); padding: 2px 3px;
  background: #f4f4f6; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
table.ct td.auto::after { content: ''; }
/* 범례는 .doc.contract 밖에 있어 변수가 닿지 않는다 — 같은 보조 크기로 맞춤 */
.ct-legend { font-size: 11.5px; color: var(--text2); margin: 0 0 10px; }
.ct-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  vertical-align: -1px; margin: 0 4px 0 12px; }
.ct-legend i.in { background: #eef5fd; border: 1px solid #b9d3f0; }
.ct-legend i.au { background: #f4f4f6; border: 1px solid #d8d8dd; }
table.ct input.inline, .ct-date input,
table.ct input[type="date"] { width: auto; display: inline-block; }
/* 입력칸 폭 3단계 (.inline 뒤에 와야 폭 지정이 살아난다) */
table.ct input.w-sm { width: var(--ct-w-sm); }
table.ct input.w-md { width: var(--ct-w-md); }
table.ct input.w-lg { width: var(--ct-w-lg); }
table.ct td.period { white-space: nowrap; }
table.ct td.amt input { text-align: right; font-weight: 600; }
.ct-note { font-size: var(--ct-fs); margin: 12px 0 6px; line-height: 1.7; }
/* 조문/본문 자리에 놓이는 입력칸도 표 안 입력칸과 같은 모양 (기안서 본문 문구) */
.ct-note textarea {
  width: 100%; border: none; border-bottom: 1px dotted #b9d3f0; border-radius: 0;
  padding: 2px 3px; font: inherit; background: #eef5fd; resize: none; overflow: hidden;
}
.ct-note textarea:focus { border-bottom-color: var(--accent); background: #fff; outline: 1px solid var(--accent); box-shadow: none; }
.ct-date { text-align: center; margin: 10px 0 14px; font-size: var(--ct-fs); }
table.ct-sign { width: 100%; border-collapse: collapse; }
table.ct-sign th { border: 1px solid #333; background: #f0f0f2; padding: 4px; font-size: var(--ct-fs); }
table.ct-sign td { border: 1px solid #333; padding: var(--ct-pad); width: 50%; font-size: var(--ct-fs); }
table.ct-sign td { white-space: nowrap; }
/* 라벨은 손으로 띄어쓰지 않고 균등정렬로 폭을 채운다 (잘림 방지) */
table.ct-sign .l {
  display: inline-block; width: 84px; margin-right: 12px; color: #555;
  text-align: justify; text-align-last: justify; -moz-text-align-last: justify;
}
/* 입력칸이 셀 남은 폭을 다 쓰도록 (고정폭이면 주소가 잘림) */
table.ct-sign input { width: calc(100% - 110px); border: none; border-bottom: 1px dotted #b9d3f0;
  border-radius: 0; padding: 2px 3px; font-size: var(--ct-fs); background: #eef5fd; }
table.ct-sign td.seal input { width: calc(100% - 146px); }   /* "(인)" 자리 확보 */
.ct-page2 { margin-top: 26px; }
.ct-title2 { text-align: center; font-size: var(--ct-fs-title2); font-weight: 700; letter-spacing: 5px; margin-bottom: 12px; }
.ct-art { display: flex; gap: 12px; border-top: 1px solid var(--grid-border); padding: 7px 0; }
.ct-art-t { flex: 0 0 112px; font-weight: 600; font-size: var(--ct-fs-sm); white-space: pre-line; }
.ct-art-b { flex: 1; font-size: var(--ct-fs-sm); line-height: 1.6; }
.ct-art-b p { margin: 0 0 3px; white-space: pre-line; }
/* 조문 안의 빈칸 (모듈·인버터·추가 특약) — 표 입력칸과 같은 모양 */
.ct-art-b input.fill { width: 190px; display: inline-block; border: none; border-bottom: 1px dotted #b9d3f0;
  border-radius: 0; padding: 1px 3px; font-size: var(--ct-fs-sm); background: #eef5fd; }
.ct-art-b .fill-txt { display: none; }   /* 인쇄 전용 (화면에서는 입력칸을 보여준다) */
.ct-art-b .ct-x { display: block; }
.ct-art-b .ct-x b { font-weight: 400; margin-right: 3px; }
.ct-art-b input.fill.wide { width: calc(100% - 24px); }
.ct-art-b input.fill:focus { border-bottom-color: var(--accent); box-shadow: none; background: #fff; outline: 1px solid var(--accent); }

@media print {
  /* 여백 6mm — 브라우저(크롬)는 머리글·바닥글(URL·날짜·페이지번호)을 이 여백 안에 그리므로
     여백이 좁으면 그리지 않는다. 그래도 나오면 인쇄 대화상자의 '머리글 및 바닥글' 체크 해제. */
  @page { size: A4 portrait; margin: 6mm; }
  /* 화면 그대로를 A4 인쇄폭(198mm≈748px)에 맞춰 축소 — 글자만 줄이면 표·여백 비율이 틀어져서
     화면과 다른 문서처럼 보였다. zoom은 레이아웃에 반영돼 페이지 나눔도 정상 동작한다.
     견적서·원가계산서(.doc)와 계약서(.doc.contract) 모두 내용 폭이 820px이라 같은 값을 쓴다. */
  .doc { width: 820px; max-width: none; padding: 0; margin: 0; zoom: 0.91; }
  .doc.contract input, .doc.contract textarea {
    border-bottom-color: transparent !important; background: none !important;
  }
  /* 인쇄에서 잘리지 않게: 내용만큼 늘어난 높이 유지 + 스크롤바 제거 */
  .doc.contract textarea { overflow: hidden; resize: none; }   /* 크기조절 손잡이도 인쇄에 찍힌다 */
  /* 날짜칸의 달력 아이콘은 인쇄에 남기지 않는다 */
  .doc.contract input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
  /* 선택칸(공사명·자재)은 인쇄에서 고른 값만 글자로 남긴다 */
  .doc.contract select { appearance: none; border: none; background: none !important; padding-left: 0; }
  /* 빈 칸의 안내문구(placeholder)는 인쇄물에 나오면 안 된다 */
  .doc.contract input::placeholder, .doc.contract textarea::placeholder { color: transparent; }
  /* 지급시기 칸("구조물, 인버터 반입 3일후")이 열 폭보다 길어 인쇄에서 잘렸다 */
  @supports (field-sizing: content) {
    #c_pay1_note, #c_pay2_note, #c_pay3_note, #c_pay4_note {
      width: auto; min-width: 100%; field-sizing: content;
    }
  }
  .ct-art-b .ct-x.empty { display: none; }         /* 비워둔 추가 특약은 인쇄 제외 */
  /* 조문 안의 값은 입력칸이 아니라 본문 텍스트로 인쇄한다 — 입력칸은 글꼴이 본문과 달라 보인다 */
  .ct-art-b input.fill { display: none; }
  .ct-art-b .fill-txt { display: inline; }
  table.ct td.auto { background: none !important; }
  .ct-legend { display: none; }
  .doc.contract input[type="date"] { color-scheme: light; }
  table.ct-sign, .ct-note { page-break-inside: avoid; }   /* 서명란이 페이지 사이에서 잘리지 않게 */
  .ct-page2 { page-break-before: always; }
  .ct-art { page-break-inside: avoid; }
}
/* 결산서 — 계약서와 같은 규칙: 여백 6mm(머리글 자리 없음) + 화면 그대로 A4 인쇄폭에 맞춤 */
@media print {
  /* 표는 폭이 유동이라 A4 인쇄폭(198mm)에 그대로 맞는다 — 축소하면 글자만 작아진다 */
  #sGrid tr { page-break-inside: avoid; }    /* 한 줄이 페이지 사이에서 잘리지 않게 */
  #sGrid .btn { display: none; }             /* 행 삭제(✕)·＋행 버튼은 화면 전용 */
  /* 입력칸은 폭이 100% 고정이라 긴 값(규격·금액)이 인쇄에서 잘린다.
     field-sizing은 내용만큼 칸을 넓혀줘서 열 너비가 값에 맞춰진다 (미지원 브라우저는 종전대로). */
  @supports (field-sizing: content) {
    #sGrid input { width: auto; min-width: 100%; field-sizing: content; }
  }
  .grid-wrap { overflow: visible; border: none; }   /* 좌우 스크롤 영역이 인쇄에서 잘리는 것 방지 */
}
.print-only { display: none; }                /* 인쇄에만 나오는 블록 (지출결의서 첨부서류 등) */
@media print {
  nav, .no-print { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .card { box-shadow: none; padding: 0; }
}