/* 견적서 계산기 — 카드 폭(컨테이너) 기준: 좁으면(폰) 줄마다 「품목 / 수량·단가 / 금액」 쌓기, 620px 넘으면 표 한 줄 */
[data-app="quote-calculator"]{ container-type:inline-size; }
[data-app="quote-calculator"] .qc-edit{ display:flex; flex-direction:column; gap:12px; }
[data-app="quote-calculator"] .ndt-in{ max-width:100%; }
[data-app="quote-calculator"] .qc-note{ display:flex; align-items:flex-start; gap:8px; margin:0; padding:8px 10px; border-radius:10px; background:#FFF7E0; color:#5C4300; font-size:13px; line-height:1.5; }
[data-app="quote-calculator"] .qc-note b{ flex:none; padding:0 7px; border-radius:6px; background:#F5C84C; color:#3A2A00; font-size:12px; line-height:20px; }
[data-app="quote-calculator"] .qc-head{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
[data-app="quote-calculator"] .qc-f{ display:flex; flex-direction:column; gap:3px; min-width:0; }
[data-app="quote-calculator"] .qc-df .ndt-in{ max-width:13em; }
[data-app="quote-calculator"] input[type="date"].ndt-in{ min-width:0; }
/* 품목 줄 — 좁은 카드 */
[data-app="quote-calculator"] .qc-cols{ display:none; }
[data-app="quote-calculator"] .qc-rows{ list-style:none; margin:0; padding:0; border-top:1px solid #E9EBEF; }
[data-app="quote-calculator"] .qc-row{ display:grid; grid-template-columns:20px minmax(0,1fr) minmax(0,1.3fr) 32px; grid-template-areas:"no n n del" ". q p ." ". a a ."; gap:6px; align-items:end; padding:10px 0; border-bottom:1px solid #E9EBEF; }
[data-app="quote-calculator"] .qc-no{ grid-area:no; align-self:center; font-size:12.5px; font-weight:800; color:#8A8F98; text-align:center; font-variant-numeric:tabular-nums; }
[data-app="quote-calculator"] .qc-n{ grid-area:n; min-width:0; }
[data-app="quote-calculator"] .qc-qf{ grid-area:q; }
[data-app="quote-calculator"] .qc-pf{ grid-area:p; }
[data-app="quote-calculator"] .qc-qf, [data-app="quote-calculator"] .qc-pf{ display:flex; flex-direction:column; gap:2px; min-width:0; }
[data-app="quote-calculator"] .qc-lb{ font-size:11.5px; font-weight:700; color:#6B717B; }
[data-app="quote-calculator"] .qc-q, [data-app="quote-calculator"] .qc-p{ text-align:right; font-variant-numeric:tabular-nums; }
[data-app="quote-calculator"] .qc-amt{ grid-area:a; display:flex; justify-content:flex-end; align-items:baseline; gap:4px; min-width:0; font-variant-numeric:tabular-nums; }
[data-app="quote-calculator"] .qc-amt .qc-lb{ margin-right:4px; }
[data-app="quote-calculator"] .qc-amt b{ font-size:15px; font-weight:800; color:#1A1A1A; overflow-wrap:anywhere; }
[data-app="quote-calculator"] .qc-amt .qc-u{ font-size:13px; color:#4B5059; }
[data-app="quote-calculator"] .qc-del{ grid-area:del; align-self:center; justify-self:end; width:32px; padding:0; color:#6B717B; }
[data-app="quote-calculator"] .qc-del:hover{ color:#B42318; border-color:#F0B5AF; }
[data-app="quote-calculator"] .ndt-in.qc-bad{ border-color:#D92D20; background:#FEF3F2; }
/* 아래: 줄 추가·엑셀 붙여넣기 / 합계 */
[data-app="quote-calculator"] .qc-bottom{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
[data-app="quote-calculator"] .qc-left{ display:flex; flex-direction:column; gap:6px; min-width:0; }
[data-app="quote-calculator"] .qc-paste{ border:1px solid #E6E7EB; border-radius:12px; padding:0 12px; background:#FAFBFC; }
[data-app="quote-calculator"] .qc-paste[open]{ padding-bottom:12px; }
[data-app="quote-calculator"] .qc-paste summary{ cursor:pointer; min-height:40px; display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; color:#314B86; }
[data-app="quote-calculator"] .qc-paste p{ margin:0 0 6px; }
[data-app="quote-calculator"] textarea.ndt-in.qc-pin{ min-height:96px; font-size:14px; }
[data-app="quote-calculator"] .qc-paste .qc-pmsg{ margin:6px 0 4px; font-size:13px; font-weight:700; color:#13703F; }
[data-app="quote-calculator"] .qc-pmsg:empty{ display:none; }
[data-app="quote-calculator"] .qc-pv{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:#4B5059; }
[data-app="quote-calculator"] .qc-pv:empty{ display:none; }
[data-app="quote-calculator"] .qc-pv li{ display:flex; justify-content:space-between; gap:8px; min-width:0; }
[data-app="quote-calculator"] .qc-pv li span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-app="quote-calculator"] .qc-pv li b{ flex:none; font-weight:700; font-variant-numeric:tabular-nums; }
[data-app="quote-calculator"] .qc-sum{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:12px; background:#F3F5F8; }
/* 금액은 숫자 가운데서 끊지 않음: 이름 옆에 안 들어가면 숫자 통째로 다음 줄(오른쪽 맞춤) — 폰에서 「3,960,636,4 / 60원」으로 잘리던 문제 */
[data-app="quote-calculator"] .qc-line{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 10px; font-size:14px; color:#4B5059; font-variant-numeric:tabular-nums; }
[data-app="quote-calculator"] .qc-line > span{ flex:none; }
[data-app="quote-calculator"] .qc-line b{ min-width:0; margin-left:auto; color:#1A1A1A; font-weight:800; text-align:right; overflow-wrap:break-word; }
[data-app="quote-calculator"] .qc-adjl b{ color:#B42318; }
[data-app="quote-calculator"] .qc-totl{ margin-top:4px; padding-top:8px; border-top:1px solid #DCE0E6; color:#1A1A1A; font-weight:800; }
[data-app="quote-calculator"] .qc-totl small{ font-size:12px; font-weight:600; color:#6B717B; }
[data-app="quote-calculator"] .qc-totl b{ font-size:24px; font-weight:900; letter-spacing:-.01em; }
[data-app="quote-calculator"] .qc-unitf{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; font-size:13px; font-weight:700; color:#4B5059; }
[data-app="quote-calculator"] .qc-unitf > span{ flex:none; white-space:nowrap; }
[data-app="quote-calculator"] .qc-unitf select{ flex:0 1 auto; width:auto; min-width:0; background:#fff; }
[data-app="quote-calculator"] .qc-btns .ndt-btn{ white-space:normal; text-align:center; max-width:100%; }
[data-app="quote-calculator"] .qc-msg{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; font-size:13px; font-weight:700; color:#13703F; }
[data-app="quote-calculator"] .qc-foot{ margin:0; }
[data-app="quote-calculator"] .qc-foot.qc-warn{ padding:8px 10px; border-radius:10px; background:#FEF3F2; color:#912018; font-size:13px; font-weight:700; }
[data-app="quote-calculator"] .qc-sheet{ display:none; }
/* 좁은 카드(폰): 합계 숫자를 조금 작게 — 흔한 금액은 「합계」 옆 한 줄에 들어가게 */
@container (max-width:300px){
  [data-app="quote-calculator"] .qc-totl b{ font-size:21px; }
}
/* 폰·태블릿(손가락): 글자 16px — 입력칸을 누를 때 화면이 확대되지 않게 */
@media (pointer:coarse){
  [data-app="quote-calculator"] .ndt-in, [data-app="quote-calculator"] textarea.ndt-in.qc-pin{ font-size:16px; }
}
/* 넓은 카드: 표 한 줄 */
@container (min-width:620px){
  [data-app="quote-calculator"] .qc-head{ grid-template-columns:minmax(0,1fr) 13em; }
  [data-app="quote-calculator"] .qc-cols, [data-app="quote-calculator"] .qc-row{ grid-template-columns:30px minmax(0,1fr) 84px 132px 128px 34px; }
  [data-app="quote-calculator"] .qc-cols{ display:grid; gap:6px; margin-bottom:-6px; font-size:12px; font-weight:800; color:#6B717B; }
  [data-app="quote-calculator"] .qc-cols span:nth-child(1){ text-align:center; }
  [data-app="quote-calculator"] .qc-cols span:nth-child(n+3){ text-align:right; }
  [data-app="quote-calculator"] .qc-cols small{ font-weight:600; }
  [data-app="quote-calculator"] .qc-row{ grid-template-areas:"no n q p a del"; align-items:center; padding:6px 0; }
  [data-app="quote-calculator"] .qc-row .qc-lb{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  [data-app="quote-calculator"] .qc-amt .qc-u{ display:none; }
  [data-app="quote-calculator"] .qc-bottom{ grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; }
}
/* 인쇄(견적서 인쇄 · PDF 저장): 입력 화면 대신 견적서 한 장 */
/* ⚠️ 인쇄본에는 font-variant-numeric:tabular-nums 를 쓰지 말 것 — PDF로 저장하면 그 숫자가 복사·검색되지 않음(10/2 실측) */
@media print{
  [data-app="quote-calculator"]{ border:0; padding:0; border-radius:0; background:#fff; color:#000; }
  [data-app="quote-calculator"] .qc-edit{ display:none !important; }
  [data-app="quote-calculator"] .qc-sheet{ display:block; font-size:11pt; line-height:1.5; color:#000; }
  /* 「(예시)」 칸이 남은 채 인쇄하면 맨 위 빨간 줄 — 인쇄 미리 보기에서 바로 보이게 */
  [data-app="quote-calculator"] .qc-s-ex{ margin:0 0 12pt; padding:5pt 8pt; border:1.5pt dashed #B42318; color:#B42318; font-size:10.5pt; font-weight:700; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  [data-app="quote-calculator"] .qc-s-title{ margin:0 0 18pt; padding-left:.6em; text-align:center; font-size:24pt; font-weight:800; letter-spacing:.6em; }
  [data-app="quote-calculator"] .qc-s-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:16pt; padding-bottom:6pt; border-bottom:1.5pt solid #000; }
  [data-app="quote-calculator"] .qc-s-to b{ font-size:15pt; font-weight:800; }
  [data-app="quote-calculator"] .qc-s-blank{ display:inline-block; min-width:12em; height:1.2em; border-bottom:1pt solid #000; vertical-align:bottom; }
  [data-app="quote-calculator"] .qc-s-date .qc-s-blank{ min-width:8em; }
  [data-app="quote-calculator"] .qc-s-date{ white-space:nowrap; }
  [data-app="quote-calculator"] .qc-s-lead{ margin:10pt 0 6pt; }
  [data-app="quote-calculator"] .qc-s-big{ display:flex; justify-content:space-between; align-items:baseline; gap:12pt; margin:0 0 12pt; padding:8pt 10pt; border:1.5pt solid #000; }
  [data-app="quote-calculator"] .qc-s-big small{ font-size:9.5pt; }
  [data-app="quote-calculator"] .qc-s-big b{ font-size:16pt; font-weight:900; }
  [data-app="quote-calculator"] .qc-s-tbl, [data-app="quote-calculator"] .qc-s-sum{ border-collapse:collapse; }
  [data-app="quote-calculator"] .qc-s-tbl{ width:100%; }
  [data-app="quote-calculator"] .qc-s-tbl thead{ display:table-header-group; }
  [data-app="quote-calculator"] .qc-s-tbl tr{ break-inside:avoid; page-break-inside:avoid; }
  [data-app="quote-calculator"] .qc-s-tbl th, [data-app="quote-calculator"] .qc-s-tbl td{ padding:4pt 6pt; border:.75pt solid #555; vertical-align:top; overflow-wrap:anywhere; }
  [data-app="quote-calculator"] .qc-s-tbl thead th{ border-bottom:1.5pt solid #000; font-weight:800; text-align:center; }
  [data-app="quote-calculator"] .qc-s-tbl th:nth-child(1){ width:7%; }
  [data-app="quote-calculator"] .qc-s-tbl th:nth-child(3){ width:10%; }
  [data-app="quote-calculator"] .qc-s-tbl th:nth-child(4), [data-app="quote-calculator"] .qc-s-tbl th:nth-child(5){ width:17%; }
  [data-app="quote-calculator"] .qc-s-tbl .c{ text-align:center; }
  [data-app="quote-calculator"] .qc-s-tbl .r{ text-align:right; white-space:nowrap; }
  [data-app="quote-calculator"] .qc-s-note{ margin:4pt 0 0; font-size:9pt; color:#333; }
  [data-app="quote-calculator"] .qc-s-sum{ min-width:55%; margin:10pt 0 0 auto; break-inside:avoid; page-break-inside:avoid; }
  [data-app="quote-calculator"] .qc-s-sum th{ padding:3pt 14pt 3pt 0; text-align:left; font-weight:700; }
  [data-app="quote-calculator"] .qc-s-sum th small{ font-weight:500; font-size:9pt; }
  [data-app="quote-calculator"] .qc-s-sum td{ padding:3pt 0; text-align:right; white-space:nowrap; }
  [data-app="quote-calculator"] .qc-s-sum tr.tot th, [data-app="quote-calculator"] .qc-s-sum tr.tot td{ padding-top:5pt; border-top:1.5pt solid #000; font-size:13pt; font-weight:900; }
}