/* 견적 장부 — 화면이 곧 아버지의 견적서. 방향: .impeccable/surfaces/web-templates-index-html.md */
/* 글꼴은 web/static/fonts/에 둔다 (Nanum, OFL. 한글 음절·기호만 남긴 부분 집합). 오프라인에서도 같은 모양 */
@font-face { font-family: "Nanum Gothic"; font-weight: 400; font-display: swap;
  src: local("NanumGothic"), url("/static/fonts/NanumGothic-Regular.woff2") format("woff2"); }
@font-face { font-family: "Nanum Gothic"; font-weight: 700; font-display: swap;
  src: local("NanumGothicBold"), url("/static/fonts/NanumGothic-Bold.woff2") format("woff2"); }
@font-face { font-family: "Nanum Gothic"; font-weight: 800; font-display: swap;
  src: local("NanumGothicExtraBold"), url("/static/fonts/NanumGothic-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Nanum Myeongjo"; font-weight: 400; font-display: swap;
  src: local("NanumMyeongjo"), url("/static/fonts/NanumMyeongjo-Regular.woff2") format("woff2"); }
@font-face { font-family: "Nanum Myeongjo"; font-weight: 700; font-display: swap;
  src: local("NanumMyeongjoBold"), url("/static/fonts/NanumMyeongjo-Bold.woff2") format("woff2"); }
@font-face { font-family: "Nanum Myeongjo"; font-weight: 800; font-display: swap;
  src: local("NanumMyeongjoExtraBold"), url("/static/fonts/NanumMyeongjo-ExtraBold.woff2") format("woff2"); }
:root {
  --desk: #e4e5e2;          /* 종이가 놓인 책상 */
  --desk-line: #cdcfca;
  --paper: #ffffff;
  --ink: #111111;           /* 먹 */
  --ink-2: #4a4a48;         /* 연한 먹: 보조 글자 (종이 위 대비 8.9:1) */
  --ink-3: #6b6b68;         /* 더 연한 먹: 메타 (종이 위 5.4:1) */
  --rule: #111111;          /* 셀 괘선 */
  --rule-soft: #d6d6d2;
  --excel: #217346;         /* 엑셀 선택 테두리 */
  --excel-wash: #e8f2ec;
  --pen: #c8102e;           /* 빨간 교정펜 */

  --gothic: "Dotum", "돋움", "Nanum Gothic", "Apple SD Gothic Neo", sans-serif;
  --myeongjo: "Batang", "바탕", "BatangChe", "Nanum Myeongjo", "AppleMyungjo", serif;

  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.0625rem;
  --step-2: 1.25rem;
  --step-3: 1.5rem;

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--desk);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: var(--step-0);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  word-break: keep-all; overflow-wrap: anywhere;   /* 한글은 낱말 단위로 줄을 바꾼다 */
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--excel-wash); color: var(--ink); }
:focus-visible { outline: 2px solid var(--excel); outline-offset: 1px; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
* { scrollbar-width: thin; scrollbar-color: #b9bbb6 transparent; }

/* ---- 책상 위 띠 ---- */
.desk-bar {
  display: flex; align-items: baseline; gap: 28px;
  padding: 10px 20px 9px;
  border-bottom: 1px solid var(--desk-line);
  background: var(--desk);
}
.desk-name {
  font-family: var(--myeongjo); font-weight: 800; font-size: var(--step-1);
  text-decoration: none; letter-spacing: 0.02em;
}
.desk-name span { font-weight: 400; color: var(--ink-2); margin-left: 4px; }
.desk-nav { display: flex; gap: 18px; }
.desk-nav a {
  text-decoration: none; color: var(--ink-2); padding: 2px 0;
  border-bottom: 2px solid transparent;
}
.desk-nav a:hover { color: var(--ink); }
.desk-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--excel); font-weight: 700; }

/* ---- 견적 화면: 왼쪽 장부, 오른쪽 종이 ---- */
.desk { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px 1fr; }

.ledger {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--paper);
  border-right: 1px solid var(--desk-line);
}
.ledger-search {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.ledger-search input, .ledger-search select, .price-fields input {
  font: inherit; color: var(--ink);
  background: var(--paper);
  border: 1px solid #8d8e8a; border-radius: 0;
  padding: 7px 9px;
}
.ledger-search input { padding-right: 30px; }
.ledger-search input::placeholder, .price-fields input::placeholder { color: var(--ink-3); }
.ledger-search input:focus, .ledger-search select:focus, .price-fields input:focus {
  outline: none; border-color: var(--excel); box-shadow: inset 0 0 0 1px var(--excel);
}
.key-hint {
  position: absolute; right: calc(14px + 8px + 104px + 8px); top: 22px;
  font: 700 11px/1 var(--gothic); color: var(--ink-3);
  border: 1px solid var(--rule-soft); padding: 2px 5px;
  pointer-events: none;
}
.ledger-search input:focus ~ .key-hint, .ledger-search input:not(:placeholder-shown) ~ .key-hint { display: none; }
.ledger-search select { width: 104px; }

#ledger-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ledger-count {
  margin: 0; padding: 8px 14px 6px;
  font-size: var(--step--1); color: var(--ink-3);
}
.ledger-count strong { color: var(--ink); }

.ledger-rows { list-style: none; margin: 0; padding: 0 0 24px; }
.ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr auto;
  grid-template-areas: "date client total" ". site site";
  column-gap: 8px; row-gap: 1px;
  padding: 7px 14px 7px 14px;
  border-bottom: 1px solid #ececea;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.ledger-row:hover { background: #f5f6f4; }
.ledger-row[aria-selected="true"] {
  background: var(--excel-wash);
  box-shadow: inset 0 0 0 2px var(--excel);
}
.lr-date { grid-area: date; color: var(--ink-3); font-size: var(--step--1); padding-top: 1px; }
.lr-client { grid-area: client; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-total { grid-area: total; text-align: right; font-weight: 700; }
.lr-site {
  grid-area: site; font-size: var(--step--1); color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lr-site.is-temp, td.is-temp { color: var(--ink-3); font-style: normal; }
.lr-doc { font-weight: 700; color: var(--ink); margin-right: 5px; }
.lr-mark {
  position: absolute; right: 14px; bottom: 6px;
  font: 700 11px/1 var(--myeongjo); color: var(--pen);
  border: 1px solid var(--pen); border-radius: 50%;
  width: 18px; height: 18px; display: grid; place-items: center;
  transform: rotate(-8deg);
}
.review-excluded .lr-client, .review-excluded .lr-total { text-decoration: line-through; color: var(--ink-3); }

.ledger-empty { padding: 18px 16px; color: var(--ink-2); font-size: var(--step--1); }
.ledger-empty p { margin: 0 0 8px; max-width: 34ch; }
.ledger-empty b { color: var(--ink); }

/* ---- 종이 ---- */
.sheet-desk { min-height: 0; overflow: auto; padding: 28px 28px 56px; }
.sheet-desk:focus { outline: none; }
.sheet-wrap { display: flex; gap: 28px; align-items: flex-start; }

.sheet {
  flex: 0 0 auto;
  /* A4 한 장이 화면 높이에 들어온다: 책상 띠 47px + 위아래 여백 56px */
  --sheet-h: max(640px, calc(100dvh - 47px - 56px));
  width: min(760px, calc(var(--sheet-h) * 210 / 297));
  min-height: var(--sheet-h);
  display: flex; flex-direction: column;
  container-type: inline-size;
  background: var(--paper);
  padding: 24px 30px 26px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.08), 0 10px 28px -12px rgba(17, 17, 17, 0.22);
  font-family: var(--gothic);
  animation: sheet-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sheet-in { from { opacity: 0.4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } .ledger-row { transition: none; } }

.sheet-title {
  margin: 0; text-align: center;
  font: 800 clamp(1.75rem, 6.4cqi, 2.5rem)/1.1 var(--myeongjo);
  letter-spacing: 0.5em; padding-left: 0.5em;   /* 見 積 書 의 벌어진 자간 */
}
.sheet-no { margin: 10px 0 0; font-size: var(--step--1); width: 110px; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }

.sheet-head { display: grid; grid-template-columns: 1fr 48cqi; gap: 3cqi; margin-top: 10px; }
.sheet-left { display: flex; flex-direction: column; justify-content: space-between; padding-top: 6px; }
.sheet-date { margin: 0; font: 400 clamp(0.9375rem, 2.9cqi, 1.125rem)/1.3 var(--myeongjo); }
.sheet-client {
  margin: 16px 0 0; text-align: right;
  font: 800 clamp(1.125rem, 4cqi, 1.5rem)/1.25 var(--myeongjo);
  border-bottom: 1px solid var(--rule); padding-bottom: 6px;
}
.sheet-site {
  margin: 10px 0 0; min-height: 1.6em; text-align: center;
  font: 400 clamp(0.9375rem, 2.8cqi, 1.0625rem)/1.4 var(--myeongjo);
  border-bottom: 1px solid var(--rule); padding-bottom: 4px;
}

/* 명판: 원본 양식의 공급자 박스를 SVG 한 장으로 (web/templates/_nameplate.svg.html).
   좌표계(viewBox 폭 300)가 고정이라 박스 폭에 맞춰 통째로 늘고 준다. 글자 크기는 viewBox 단위 */
.nameplate { display: block; width: 100%; height: auto; color: var(--ink); align-self: start; }
.nameplate text { fill: currentColor; }
.np-frame { fill: var(--paper); stroke: currentColor; stroke-width: 1.5; }
.np-rule { stroke: currentColor; stroke-width: 0.75; }
.np-side { font: 700 11px var(--myeongjo); text-anchor: middle; }
.np-label { font: 400 9.5px var(--myeongjo); text-anchor: middle; }
.np-logo path { fill: none; stroke: currentColor; stroke-width: 1.2; }
.np-logo text { font: 800 7.5px var(--gothic); text-anchor: middle; }
.np-name { font: 800 14px var(--myeongjo); text-anchor: middle; letter-spacing: 0.06em; }
.np-rep { font: 800 12.5px var(--myeongjo); text-anchor: middle; letter-spacing: 0.06em; }
.np-v { font: 400 10.5px var(--myeongjo); }
.np-num { font: 400 10.5px var(--gothic); font-variant-numeric: tabular-nums; }
.pen { color: var(--pen); font-family: var(--myeongjo); font-weight: 700; }

.sheet-amount {
  margin: 14px 0 10px; min-height: 1.4em;
  font: 800 clamp(1.0625rem, 3.5cqi, 1.3125rem)/1.3 var(--myeongjo);
  white-space: pre-wrap;
}

.sheet-body { flex: 1; }
.sheet-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: clamp(13px, 2.6cqi, 14px); }
.c-name { width: 23%; } .c-spec { width: 23%; } .c-unit { width: 9%; } .c-qty { width: 10%; } .c-price { width: 15%; } .c-amount { width: 20%; }
.sheet-table th, .sheet-table td { border: 1px solid var(--rule); padding: 1px 6px; height: 1.4em; vertical-align: middle; }
.sheet-table thead th {
  font: 400 1.1em/1.2 var(--myeongjo); text-align: center; height: 2.2em;
  letter-spacing: 0.04em; white-space: nowrap; padding: 2px 3px;
}
.sheet-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-unit { text-align: center; }
.t-num { text-align: right; }
.sheet-table td.t-num { text-overflow: clip; overflow: visible; }   /* 숫자에는 말줄임을 붙이지 않는다 */
.t-sub td { color: var(--ink-2); }
/* 빈 줄도 원본처럼 같은 높이. 22줄 양식이 종이 한 장에 들어오도록 줄 높이는 1.6em */
.sheet-table tfoot th {
  font: 800 1.2em/1.2 var(--myeongjo); text-align: center; height: 2.4em; letter-spacing: 0.05em;
}
.sheet-table tfoot th span { font-weight: 400; font-size: 0.88em; letter-spacing: 0; }
.sheet-table td.t-total { font-weight: 800; font-size: 1.2em; position: relative; overflow: visible; }
/* 엑셀 행 번호: 모든 숫자는 원본 행으로 돌아간다. 괘선 밖 여백에 연하게 */
.c-row { width: 26px; }
.sheet-table { margin-left: -26px; width: calc(100% + 26px); }
.sheet-table .t-row {
  border: 0; padding: 0 6px 0 0; text-align: right;
  font: 400 10px/1 var(--gothic); color: var(--ink-3); overflow: visible;
}
/* 교정펜: 합계가 항목 합과 다를 때 합계에 동그라미, 옆에 항목 합 */
.pen-circle { position: relative; display: inline-block; }
.pen-circle::after {
  content: ""; position: absolute; inset: -4px -8px; border: 1.5px solid var(--pen); border-radius: 50%;
  transform: rotate(-3deg); pointer-events: none;
}
.pen-sum { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) rotate(-2deg); font-size: 0.72em; white-space: nowrap; }
.t-note { position: absolute; left: 6px; top: 50%; transform: translateY(-50%) rotate(-4deg); font-size: 11px; }

.sheet-notes { margin-top: 10px; font-size: var(--step--1); font-weight: 700; }
.sheet-notes p { margin: 0 0 2px; }

.sheet.is-excluded .sheet-amount, .sheet.is-excluded .t-total {
  text-decoration: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2px;
}

/* ---- 여백 메모 ---- */
.margin-meta { padding-bottom: 2px; }
.meta-facts { margin: 0; display: grid; gap: 3px; border-top: 1px solid var(--desk-line); padding-top: 7px; }
.meta-facts div { display: grid; grid-template-columns: 34px 1fr; gap: 6px; align-items: baseline; }
.meta-facts dt { color: var(--ink-3); }
.meta-facts dd { margin: 0; min-width: 0; color: var(--ink); }
.meta-file {
  all: unset; cursor: pointer; overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-color: #9a9b97; text-underline-offset: 3px;
}
.meta-file:hover { text-decoration-color: var(--excel); color: var(--excel); }
.meta-file:focus-visible { outline: 2px solid var(--excel); outline-offset: 1px; }
.meta-reasons { margin: 7px 0 0; line-height: 1.45; }
.meta-actions { margin: 10px 0 0; }
.meta-actions a { color: var(--ink); text-underline-offset: 3px; }
.meta-actions a:hover { color: var(--excel); }
.margin { flex: 1 1 220px; min-width: 0; max-width: 340px; padding-top: 6px; font-size: var(--step--1); }
.margin section + section { margin-top: 26px; }
.margin h2 { margin: 0 0 6px; font: 700 var(--step-0)/1.3 var(--myeongjo); }
.margin-stat { margin: 0 0 8px; color: var(--ink-2); }
.margin-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--desk-line); }
.margin-list li { border-bottom: 1px solid var(--desk-line); }
.margin-list a {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px;
  padding: 6px 2px; text-decoration: none; color: var(--ink-2);
}
.margin-list a span { white-space: normal; }
.margin-list a b { color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.margin-list a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.55); }
.margin-list li[aria-current="true"] a { color: var(--ink); box-shadow: inset 0 0 0 2px var(--excel); padding-left: 6px; padding-right: 6px; }
.margin-more { display: inline-block; margin-top: 8px; color: var(--ink-2); }

.sheet-empty { color: var(--ink-2); padding: 40px 8px; }

/* ---- 단가 이력 ---- */
.price-desk { flex: 1; overflow: auto; padding: 28px 32px 56px; }
.price-form { max-width: 1080px; }
.price-title { margin: 0; font: 800 var(--step-3)/1.2 var(--myeongjo); }
.price-lede { margin: 6px 0 16px; color: var(--ink-2); }
.price-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.price-fields label { display: grid; gap: 4px; font-size: var(--step--1); color: var(--ink-2); }
.price-fields input { width: 220px; }
.price-fields .f-short input { width: 110px; }
#price-rows { max-width: 1080px; margin-top: 20px; }
.price-empty { padding: 0; }
.price-empty p { max-width: 60ch; }
.price-answer {
  margin: 0; padding: 14px 18px; background: var(--paper);
  border: 1px solid var(--rule);
  font: 400 var(--step-1)/1.4 var(--myeongjo);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
}
.price-answer strong { font: 800 1.75rem/1.1 var(--myeongjo); }
.price-answer span { color: var(--ink-2); font-family: var(--gothic); font-size: var(--step-0); }
#price-rows .ledger-count { padding: 12px 0 6px; }
.price-table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: 0.875rem; }
.price-table th, .price-table td { border: 1px solid var(--rule); padding: 5px 8px; text-align: left; }
.price-table thead th { font: 400 0.9375rem/1.2 var(--myeongjo); background: var(--paper); position: sticky; top: -28px; }
.price-table td { white-space: nowrap; }
.price-table .t-num { text-align: right; }
.price-table .t-strong { font-weight: 800; }
.price-table tbody tr:hover td { background: #f5f6f4; }
.t-date a { text-decoration: none; }
.t-date a:hover { text-decoration: underline; color: var(--excel); }

/* ---- 견적 작성: 왼쪽 세 문, 가운데 고치는 종이, 오른쪽 단가 메모 ---- */
.writer { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px max-content minmax(290px, 380px); justify-content: start; }
.doors { overflow-y: auto; padding: 18px 16px 32px 20px; border-right: 1px solid var(--desk-line); }
.door { background: var(--paper); border: 1px solid var(--rule); margin-bottom: 10px; }
.door[open] { box-shadow: inset 0 0 0 1px var(--excel); border-color: var(--excel); }
.door summary {
  list-style: none; cursor: pointer; padding: 11px 14px 10px; display: grid; gap: 2px;
}
.door summary::-webkit-details-marker { display: none; }
.door summary b { font: 800 var(--step-1)/1.25 var(--myeongjo); }
.door summary span { font-size: var(--step--1); color: var(--ink-2); }
.door summary:hover b { color: var(--excel); }
.door summary:focus-visible { outline: 2px solid var(--excel); outline-offset: -2px; }
.door-body { padding: 0 14px 14px; display: grid; gap: 9px; font-size: var(--step--1); }
.door-go { color: var(--ink); font-weight: 700; }
.door-now { margin: 0; color: var(--ink-2); line-height: 1.45; }
.door-now p { margin: 0 0 4px; }
.draft-notes { margin: 4px 0 6px; padding-left: 1.1em; display: grid; gap: 3px; }
.door-hint { margin: -2px 0 0; color: var(--ink-3); line-height: 1.45; }
.door-editing { margin: 14px 2px 0; font-size: var(--step--1); color: var(--ink-2); line-height: 1.5; }
.mesh-form label { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; color: var(--ink-3); }
.mesh-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.mesh-form legend { float: left; color: var(--ink-3); width: 52px; padding: 0; margin-right: -4px; }
.mesh-form fieldset label { display: flex; gap: 4px; color: var(--ink); }
.mesh-form input[type="radio"] { accent-color: var(--excel); margin: 0; }
.mesh-form select, .mesh-form input:not([type="radio"]), .door-body input[type="search"] {
  font: inherit; font-size: var(--step-0); color: var(--ink); background: var(--paper);
  border: 1px solid #8d8e8a; border-radius: 0; padding: 5px 7px; width: 100%;
}
.unit-field { display: flex; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; overflow-wrap: normal; }
.unit-field input { flex: 1; min-width: 0; }
.mesh-form select:focus, .mesh-form input:focus, .door-body input[type="search"]:focus {
  outline: none; border-color: var(--excel); box-shadow: inset 0 0 0 1px var(--excel);
}
.pick-list { max-height: 360px; overflow-y: auto; }
.pick-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.pick-rows a {
  display: grid; grid-template-columns: 54px 1fr auto; grid-template-areas: "d c t" ". s s";
  gap: 0 6px; padding: 6px 2px; border-bottom: 1px solid #ececea; text-decoration: none; color: var(--ink);
}
.pick-rows a:hover { background: var(--excel-wash); }
.pk-date { grid-area: d; color: var(--ink-3); }
.pk-client { grid-area: c; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-rows b { grid-area: t; }
.pk-site { grid-area: s; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-more { margin: 6px 0 0; color: var(--ink-3); }

.btn {
  font: 700 var(--step-0)/1 var(--gothic); color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 0; padding: 9px 14px; cursor: pointer;
}
.btn:hover { background: var(--excel-wash); border-color: var(--excel); }
.btn:focus-visible { outline: 2px solid var(--excel); outline-offset: 2px; }
.btn-primary { background: var(--excel); border-color: var(--excel); color: #fff; }
.btn-primary:hover { background: #1a5c38; border-color: #1a5c38; }

.writer-desk { display: flex; flex-direction: column; align-items: flex-start; }
.writer-actions { width: 0; min-width: 100%; display: flex;   /* 칸 폭은 종이가 정한다 */
  flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }   /* 종이 바로 위: 첫 화면에 늘 보이고 종이를 가리지 않는다 */
.writer-hint { width: 0; min-width: 100%; font-size: var(--step--1); color: var(--ink-3); margin: 10px 0 0; }
.writer .sheet { --sheet-h: max(640px, calc(100dvh - 47px - 56px - 48px)); }   /* 위 버튼 줄만큼 줄인다 */
.writer-error { margin: 0 0 10px; }
.writer-saved { margin: 0 0 10px; color: var(--excel); font-weight: 700; }

/* 종이 위 입력칸은 테두리 없는 셀. 포커스된 칸만 엑셀 초록 셀 테두리 */
.cell-in {
  font: inherit; color: inherit; background: transparent; border: 0; border-radius: 0;
  width: 100%; padding: 0; margin: 0; min-width: 0;
}
.cell-in::placeholder { color: var(--ink-3); }
.cell-in:focus { outline: 2px solid var(--excel); outline-offset: 1px; background: var(--paper); }
.cell-in[readonly] { cursor: default; }
.cell-in.t-num { text-align: right; }
.cell-in.t-unit { text-align: center; }
.sheet-client .cell-in { width: calc(100% - 3.2em); text-align: right; font: inherit; }
.sheet-site .cell-in { text-align: center; }
.date-y { width: 3.1em; text-align: center; }
.date-md { width: 1.7em; text-align: center; }
.edit-table td { padding: 0 4px; }
.edit-table .cell-in:focus { outline: none; background: transparent; }
.edit-table .edit-row td:focus-within { box-shadow: inset 0 0 0 2px var(--excel); background: var(--paper); }
.edit-table td .cell-in { height: 1.4em; line-height: 1.4em; }
.edit-table .edit-row.is-active td:not(.t-row) { background: var(--excel-wash); }
.edit-table .edit-row.is-active .t-row { color: var(--excel); font-weight: 700; }
.sheet.is-editing .sheet-amount { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vat-toggle { font: 400 var(--step--1) var(--gothic); color: var(--ink-2); white-space: nowrap; }
.vat-toggle input { accent-color: var(--excel); }
.sheet.is-editing .sheet-notes { display: grid; gap: 4px; }
.sheet.is-editing .sheet-notes .cell-in { font-weight: 700; border-bottom: 1px dashed var(--rule-soft); }

.suggest { padding: 28px 22px 32px 0; overflow-y: auto; max-width: none; }
.suggest h2 { margin: 0 0 8px; font: 700 var(--step-0)/1.35 var(--myeongjo); }
.sg-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--desk-line); }
.sg-pick {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--desk-line); font-size: var(--step--1);
}
.sg-pick small { display: block; color: var(--ink-3); font-size: var(--step--1); margin-top: 2px; }
.sg-pick b { font-size: var(--step-1); white-space: nowrap; }
.sg-pick:hover { background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px var(--excel); }
.sg-pick[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--excel); background: rgba(255, 255, 255, 0.6); }
.sg-pick:focus-visible { outline: 2px solid var(--excel); outline-offset: -2px; }
.sg-empty, .sg-note { font-size: var(--step--1); color: var(--ink-2); margin: 8px 0 0; line-height: 1.5; }
.suggest h3 { margin: 16px 0 6px; font: 700 var(--step--1)/1.35 var(--gothic); color: var(--ink-2); }
.suggest h3 small { font-weight: 400; color: var(--ink-3); font-size: inherit; }
.sg-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--desk-line); }
.sg-row .sg-pick { border-bottom: 0; flex: 1; min-width: 0; }
.sg-open { align-self: center; padding: 4px 2px 4px 8px; font-size: var(--step--1); color: var(--ink-3); white-space: nowrap; }
.sg-open:hover { color: var(--excel); }

/* 이 줄의 값: 지금 수량·단가와 그 근거. 직접 고친 값은 교정펜 */
.line-basis { background: var(--paper); border: 1px solid var(--rule); padding: 10px 12px 8px; margin-bottom: 18px; }
.line-basis h2 { margin: 0 0 6px; font: 700 var(--step-0)/1.35 var(--myeongjo); }
.lb-item + .lb-item { border-top: 1px solid var(--rule-soft); margin-top: 6px; padding-top: 6px; }
.lb-head { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--step--1); color: var(--ink-2); }
.lb-head b { font-size: var(--step-1); color: var(--ink); }
.lb-why { margin: 2px 0 0; font-size: var(--step--1); line-height: 1.45; color: var(--ink-2); }
.lb-item.is-manual .lb-head b { text-decoration: underline; text-decoration-color: var(--pen); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---- 견적서 하단 공용 표시 정보 ---- */
.sheet-footer { margin-top: 12px; font-size: var(--step--1); font-weight: 700; position: relative; }
.sheet-footer p { margin: 0 0 2px; }
.sheet-footer.is-empty { font-weight: 400; }
.sheet-footer-edit { font-size: var(--step--1); font-weight: 400; color: var(--ink-3); }
.sheet-footer:not(.is-empty) .sheet-footer-edit { position: absolute; right: 0; top: 0; }
.sheet-footer-edit:hover { color: var(--excel); }

/* ---- 설정 ---- */
.settings-block { max-width: 640px; display: grid; gap: 10px; }
.settings-block h2 { margin: 18px 0 0; font: 700 var(--step-1)/1.35 var(--myeongjo); }
.settings-block .price-lede { margin: 0; }
.settings-block textarea {
  font: 700 var(--step-0)/1.6 var(--gothic); color: var(--ink); background: var(--paper);
  border: 1px solid #8d8e8a; border-radius: 0; padding: 8px 10px; resize: vertical;
}
.settings-block textarea:focus { outline: none; border-color: var(--excel); box-shadow: inset 0 0 0 1px var(--excel); }
.settings-preview { background: var(--paper); border: 1px solid var(--rule-soft); padding: 10px 12px; margin: 0; }
.settings-preview .is-empty { font-weight: 400; color: var(--ink-3); }
.settings-block .btn { justify-self: start; }

/* ---- 로그인 ---- */
.desk-user { margin-left: auto; display: flex; align-items: baseline; gap: 10px; font-size: var(--step--1); color: var(--ink-2); }
.desk-user button { font: inherit; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #9a9b97; }
.desk-user button:hover { color: var(--excel); }
.login-body { display: block; }
.login-desk { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-sheet { width: min(420px, 100%); min-height: 0; padding: 36px 36px 32px; display: grid; gap: 14px; animation: none; }
.login-title { margin: 0 0 10px; text-align: center; font: 800 1.75rem/1.3 var(--myeongjo); letter-spacing: 0.04em; }
.login-title span { display: block; font-weight: 400; font-size: var(--step-1); letter-spacing: 0.3em; color: var(--ink-2); margin-top: 4px; }
.login-field { display: grid; gap: 5px; font-size: var(--step--1); color: var(--ink-2); }
.login-field input { font: inherit; font-size: var(--step-1); color: var(--ink); background: var(--paper);
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 6px 2px; }
.login-field input:focus { outline: none; border-bottom: 2px solid var(--excel); padding-bottom: 5px; }
.login-go { margin-top: 8px; justify-self: stretch; }
.login-error { margin: 0; }

/* ---- 좁은 화면 ---- */
@media (max-width: 1180px) {
  .writer { grid-template-columns: 260px max-content 240px; }
  .writer .doors { padding-left: 14px; padding-right: 12px; }
  .writer-desk.sheet-desk { padding-left: 20px; padding-right: 20px; }
  .sheet-wrap { flex-direction: column; }
  .margin { max-width: 760px; width: 100%; }
}
@media (max-width: 900px) {
  .writer { display: block; overflow-y: auto; }   /* 좁은 화면: 문 → 종이 → 단가 메모를 위아래로, 페이지가 통째로 스크롤 */
  .writer .doors, .writer .writer-desk, .writer .suggest { overflow: visible; }
  .writer .doors { border-right: 0; border-bottom: 1px solid var(--desk-line); padding: 14px 16px; }
  .writer .suggest { padding: 0 16px 32px; }
  .writer-desk { padding: 16px; }
  .desk-bar { gap: 16px; padding: 10px 16px 9px; }
  .desk-name span { display: none; }
  .desk-nav { gap: 14px; }
  .desk-nav a { white-space: nowrap; }
  .desk { grid-template-columns: 1fr; grid-template-rows: minmax(240px, 42vh) 1fr; }
  .ledger { border-right: 0; border-bottom: 1px solid var(--desk-line); }
  .sheet-desk { padding: 16px; }
  .sheet { width: 100%; min-height: 0; padding: 22px 16px 26px; }
  .sheet-head { grid-template-columns: 1fr; }
  .nameplate { max-width: 300px; justify-self: end; }
  .sheet-body { overflow-x: auto; }
  .sheet-table { font-size: 0.8125rem; min-width: 520px; }
  .c-row { width: 0; } .sheet-table { margin-left: 0; width: 100%; } .sheet-table .t-row { font-size: 0; padding: 0; }
  .sheet-table td { white-space: normal; }
  .price-desk { padding: 18px 16px 40px; }
  .price-fields input, .price-fields .f-short input { width: 100%; }
  .price-fields label { flex: 1 1 140px; }
  .price-table-wrap, #price-rows { overflow-x: auto; }
}