/* 견적서 문서(.doc) 서식 — 원장님께 드리는 공식 문서라 어두운 기기에서도 흰 종이 + 먹색 괘선 표 (index.html: app.css → structure.css → doc.css).
   v0.8.0 공식 문서 양식: 제목 '견 적 서', 수신(귀중)과 공급자 칸, 합계 금액 한 줄, 번호 붙은 절 제목, 1px 괘선 표.
   글꼴은 본문과 같은 한 가지(Pretendard → 맑은 고딕)로, 굵기는 400·600·700만, 숫자는 같은 폭(tabular-nums)으로 줄을 맞춘다.
   색은 .doc의 --d-* 토큰만 쓰고 :root 토큰·어두운 판은 두지 않는다. 그림 없이 글·괘선만 써서 흑백으로 찍어도 같은 내용이 보인다.
   길이는 rem, 화면 폭 기준은 em, px는 선·모서리에만. */

/* ── 견적서 (항상 흰 종이 + 표 서식) ─────────── */
.doc-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  max-width: 53.75rem;
  margin: 0 auto 0.875rem;
}
.doc {
  --d-ink: #111111;
  --d-ink-2: #3f434a;
  --d-ink-3: #5d626b;
  --d-rule: #111111;
  --d-line: #c9cdd3;
  --d-soft: #f4f5f6;
  color-scheme: light;
  max-width: 53.75rem;
  margin: 0 auto;
  padding: 3rem 3.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--d-ink);
  box-shadow: var(--shadow);
  font-family: var(--font-body);
  font-size: 0.84375rem;
  font-weight: 400;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.doc strong,
.doc b {
  font-weight: 700;
}

/* 머리: 제목 · 수신 / 공급자 · 합계 금액 */
.doc-head {
  margin-bottom: 1.75rem;
}
.doc .doc-title {
  margin: 0 0 1.5rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--d-rule);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.5em;
  text-align: center;
}
.doc-parties {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: 1.25rem 2rem;
  align-items: start;
}
.doc-to-name {
  margin: 0 0 0.625rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--d-rule);
  font-size: 1.0625rem;
}
.doc-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem;
  margin: 0;
  font-size: 0.8125rem;
}
.doc-meta > div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.5rem;
}
.doc-meta dt {
  color: var(--d-ink-3);
}
.doc-meta dd {
  margin: 0;
}
.doc-lead {
  margin: 0.875rem 0 0;
  font-size: 0.8125rem;
}
.doc table.doc-from {
  border-top: 1px solid var(--d-rule);
  border-bottom: 1px solid var(--d-rule);
  font-size: 0.8125rem;
}
.doc .doc-from caption {
  padding-bottom: 0.25rem;
  color: var(--d-ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: left;
}
.doc .doc-from th {
  width: 4.5rem;
  border-top: 0;
  border-bottom: 1px solid var(--d-line);
  font-weight: 600;
}
.doc .doc-from td {
  border-bottom: 1px solid var(--d-line);
}
.doc .doc-from tr:last-child > * {
  border-bottom: 0;
}
.doc-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin: 1.5rem 0 0;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--d-rule);
  border-bottom: 1px solid var(--d-rule);
  background: var(--d-soft);
}
.doc-sum-l {
  font-weight: 600;
}
.doc-sum-l small {
  color: var(--d-ink-3);
  font-size: 0.75rem;
  font-weight: 400;
}
.doc-sum strong {
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
}
.doc-sum-n {
  margin-left: auto;
  font-size: 1rem;
  font-weight: 600;
}

/* 절 · 표 */
.doc section {
  margin-bottom: 1.625rem;
}
.doc h2 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}
.doc h3 {
  margin: 1rem 0 0.375rem;
  font-size: 0.84375rem;
  font-weight: 600;
}
.doc h4 {
  margin: 0.75rem 0 0.25rem;
  color: var(--d-ink-2);
  font-size: 0.8125rem;
  font-weight: 600;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--d-rule);
  font-size: 0.78125rem;
}
.doc th {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--d-ink-3);
  background: var(--d-soft);
  color: var(--d-ink);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}
.doc th.r {
  text-align: right;
}
.doc th.c {
  text-align: center;
}
.doc td {
  padding: 0.375rem 0.5rem;
  border-bottom: 1px solid var(--d-line);
  vertical-align: top;
}
.doc td.r {
  text-align: right;
  white-space: nowrap;
}
.doc td.c {
  text-align: center;
}
.doc .kv td:first-child {
  width: 22%;
  background: var(--d-soft);
  color: var(--d-ink-2);
  font-weight: 600;
}
.doc tr.sub td {
  background: var(--d-soft);
}
.doc tr.total td {
  border-top: 1px solid var(--d-rule);
  border-bottom: 3px double var(--d-rule);
  font-weight: 700;
}
.doc .money col.c-no {
  width: 3rem;
}
.doc .money col.c-item {
  width: 13rem;
}
.doc .money col.c-amt {
  width: 7.5rem;
}
.doc .notes {
  margin: 0.5rem 0 0;
  padding-left: 1.125rem;
  color: var(--d-ink-2);
  font-size: 0.78125rem;
}
.doc p.notes {
  padding-left: 0;
}
.doc .tag {
  display: inline-block;
  margin: 0 0.25rem;
  padding: 0 0.375rem;
  border: 1px solid var(--d-ink-3);
  border-radius: 2px;
  color: var(--d-ink);
  font-size: 0.75rem;
  font-weight: 600;
}
.doc .muted {
  color: var(--d-ink-3);
}
.doc .remarks {
  margin: 0;
  padding: 0.625rem 0.75rem 0.625rem 1.75rem;
  border-top: 1px solid var(--d-rule);
  border-bottom: 1px solid var(--d-line);
  font-size: 0.78125rem;
}
.doc .remarks li {
  margin: 0.1875rem 0;
}
@media (max-width: 45em) {
  .doc {
    padding: 1.5rem 1rem;
  }
  .doc-parties {
    grid-template-columns: minmax(0, 1fr);
  }
  .doc-sum-n {
    margin-left: 0;
  }
}

/* 인쇄: 견적서만 종이에 (머리줄·작성 화면 숨기기와 1rem = 16px 고정은 app.css @media print) */
@media print {
  .doc {
    max-width: none;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .doc .tw {
    overflow: visible;
  }
  .doc tr,
  .doc-parties,
  .doc-sum {
    break-inside: avoid;
  }
  .doc h2,
  .doc h3,
  .doc h4 {
    break-after: avoid;
  }
  .doc .tw + p.notes {
    break-before: avoid;
  }
}

/* ── 공통: 작은 글자 바닥값(화면에서도 12px), 긴 낱말이 칸 밖으로 나가지 않게 ── */
.doc td,
.doc th,
.doc li,
.doc p,
.doc dd {
  overflow-wrap: anywhere;
}
.doc td small,
.doc th small {
  display: block;
  margin-top: 0.0625rem;
  color: var(--d-ink-3);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
}
.doc td.r small {
  white-space: nowrap;
}

/* ── 프로그램 구성: 층 표 ── */
.doc .layers col.c-ly {
  width: 7rem;
}
.doc .layers col.c-bk {
  width: 10.5rem;
}
.doc .layers col.c-use {
  width: 8.5rem;
}
.doc .layers col.c-m {
  width: 6.5rem;
}
.doc .layers th.ly {
  border-top: 1px solid var(--d-ink-3);
  border-bottom: 1px solid var(--d-line);
  background: var(--d-soft);
  color: var(--d-ink);
  vertical-align: top;
  white-space: normal;
}
.doc .layers th.ly span {
  display: block;
  font-weight: 700;
}
.doc .layers tbody + tbody tr:first-child > td {
  border-top: 1px solid var(--d-ink-3);
}
.doc .layers tbody.divider td {
  padding: 0.25rem 0.5rem;
  border-top: 1px dashed var(--d-ink-2);
  border-bottom: 1px dashed var(--d-ink-2);
  color: var(--d-ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
}
.doc .layers .bk .tag {
  margin-right: 0;
}
.doc .progs {
  margin-bottom: 0.75rem;
}

/* ── 기존 프로그램 · 업무별 흐름 ── */
.doc .plain {
  margin: 0;
  padding-left: 1.125rem;
}
.doc .plain li {
  margin: 0.1875rem 0;
}
.doc .flows {
  margin: 0;
  padding-left: 1.5rem;
}
.doc .flows li {
  margin: 0.375rem 0;
}
.doc .flows .muted {
  margin-left: 0.25rem;
  font-size: 0.75rem;
}

/* ── 좁은 화면(휴대폰): 여러 칸 표는 줄마다 쌓고 값 앞에 칸 이름(data-l)을 붙인다. 종이 인쇄에는 쓰지 않음 ── */
@media screen and (max-width: 40em) {
  .doc table.stack,
  .doc table.stack > tbody,
  .doc table.stack > tfoot,
  .doc table.stack tr,
  .doc table.stack td,
  .doc table.stack th {
    display: block;
    width: auto;
  }
  .doc table.stack > thead,
  .doc table.stack > colgroup {
    display: none;
  }
  .doc table.stack tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--d-line);
  }
  .doc table.stack td,
  .doc table.stack th {
    padding: 0.0625rem 0;
    border: 0;
    background: none;
    text-align: left;
    white-space: normal;
  }
  .doc table.stack td:empty {
    display: none;
  }
  .doc table.stack td[data-l]::before {
    content: attr(data-l);
    display: inline-block;
    min-width: 5rem;
    margin-right: 0.5rem;
    color: var(--d-ink-3);
    font-size: 0.75rem;
    font-weight: 600;
  }
  .doc table.stack td.bk {
    font-weight: 600;
  }
  /* 이름표 없는 설명 칸(하는 일)은 이름 밑 설명 줄, 값이 없는 칸(—)은 숨김 */
  .doc table.stack td.does {
    color: var(--d-ink-2);
  }
  .doc table.stack td.nil {
    display: none;
  }
  /* 구축비 표의 번호 칸은 휴대폰에서 숨김 (항목 이름에 이미 '자동화 1'처럼 번호가 있음) */
  .doc table.money.stack td.c {
    display: none;
  }
  /* 시간·금액·점수 같은 짧은 숫자 칸은 한 줄에 나란히 (넘치면 다음 줄로) */
  .doc table.stack td.r:not(:empty),
  .doc table.stack td.c:not(:empty) {
    display: inline-block;
    margin-right: 1rem;
  }
  .doc table.stack td.r[data-l]::before,
  .doc table.stack td.c[data-l]::before {
    min-width: 0;
    margin-right: 0.375rem;
  }
  .doc table.stack td.r small {
    display: inline;
    margin-left: 0.375rem;
    white-space: normal;
  }
  .doc table.stack tr.sub,
  .doc table.stack tr.hl {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background: var(--d-soft);
  }
  .doc table.stack tr.total {
    border-top: 1px solid var(--d-rule);
    border-bottom: 1px solid var(--d-rule);
    font-weight: 700;
  }
  /* 층 칸은 층의 제목 줄이 된다 */
  .doc .layers.stack th.ly {
    margin: 0 0 0.375rem;
    padding: 0.375rem 0.5rem;
    border-top: 1px solid var(--d-rule);
    background: var(--d-soft);
  }
  .doc .layers.stack th.ly small {
    display: inline;
    margin-left: 0.375rem;
  }
  .doc .layers.stack th.ly span {
    display: inline;
  }
  .doc .layers.stack tbody.divider tr {
    padding: 0;
    border-bottom: 0;
  }
  .doc .layers.stack tbody.divider td {
    margin: 0.75rem 0 0.25rem;
    padding: 0.25rem 0;
    border-top: 1px dashed var(--d-ink-2);
    border-bottom: 1px dashed var(--d-ink-2);
    text-align: center;
  }
  .doc .layers.stack tbody + tbody tr:first-child > td {
    border-top: 0;
  }
  .doc .layers.stack > tbody {
    margin-top: 0.75rem;
  }
}

/* ── 인쇄(A4): 본문·표 글자 9pt(0.75rem, 인쇄는 1rem = 16px 고정) 이상, 줄·흐름 한 줄은 쪽 사이에서 나뉘지 않게 ── */
@media print {
  .doc,
  .doc table {
    font-size: 0.75rem;
  }
  .doc .layers > tbody,
  .doc .flows li,
  .doc .plain li,
  .doc .remarks li,
  .doc .notes li {
    break-inside: avoid;
  }
  /* 합계 줄(tfoot)은 표 끝에 한 번만 — 쪽마다 되풀이되면 쪽 합계처럼 읽힘 (v0.7) */
  .doc tfoot {
    display: table-row-group;
  }
  .doc caption {
    break-after: avoid;
  }
  /* 절 제목 바로 밑 안내 줄도 뒤따르는 표·목록과 같은 쪽에 */
  .doc h2 + p,
  .doc h3 + p {
    break-after: avoid;
  }
  /* 표 바로 밑 안내 줄은 앞 표와 같은 쪽에 */
  .doc .tw + p.notes {
    break-before: avoid;
  }
  .doc .doc-title {
    font-size: 1.5rem;
  }
}