/* =============================================================
   견적서 작성 · 수정 창 — 맥 시트(바깥 틀). 범위: #quote-modal-overlay 안쪽만, 값은 ui-tokens.css 에서만.
   제목 막대(제목 · 세트 · [미리보기] · 닫기), 견적서 위 추가 안내 줄([+ 상품구입비용 견적서 추가])와 아래 단추 줄(합계 · 취소 · 저장)은 고정,
   가운데(견적서 칸 · 내부 메모)만 스크롤 — 창이 화면 높이를 넘지 않는다. 채운 파랑은 [저장] 하나.
   견적서 종이 안쪽(.qf-sheet) 모양은 ui-skin-quote.css 4번(문서와 같게) 그대로.
   마크업: quote.js quoteShowForm · _quoteColumnHtml · _quotePlanBarHtml · _quoteRenderFootBar.
   되돌리기: index.tsx 의 이 파일 <link> 한 줄 + quote.js 위 함수들.
   ============================================================= */
html #quote-modal-overlay.qf-ov{ display:flex; align-items:center; justify-content:center; padding:16px; background:var(--ui-scrim) }
html #quote-modal-overlay .qf-win{ display:flex; flex-direction:column; width:100%; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); border-radius:var(--ui-radius-sheet); background:var(--ui-bg); box-shadow:var(--ui-elev-sheet); overflow:hidden; font-family:var(--ui-font); transition:max-width var(--ui-dur-fast) var(--ui-ease) }
html #quote-modal-overlay .qf-win *:not(i):not(.fas):not(.far){ font-family:var(--ui-font) }
html #quote-modal-overlay .qf-sp{ flex:1 }
html #quote-modal-overlay .qf-dim{ color:var(--ui-text-2); font-size:var(--ui-text-footnote) }

/* 제목 막대 */
html #quote-modal-overlay .qf-hd{ flex:none; display:flex; align-items:center; gap:8px; min-height:44px; padding:6px 10px 6px 16px; background:var(--ui-surface); border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #quote-modal-overlay .qf-title{ font-size:var(--ui-text-title3); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1); white-space:nowrap }
html #quote-modal-overlay .qf-setinfo{ font-size:var(--ui-text-footnote); color:var(--ui-text-2); white-space:nowrap }
html #quote-modal-overlay .qf-hbtn{ height:var(--ui-control); padding:0 12px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-body); font-weight:var(--ui-weight-regular); white-space:nowrap; cursor:default }
html #quote-modal-overlay .qf-hbtn.sm{ height:var(--ui-control-sm); padding:0 10px; font-size:var(--ui-text-footnote) }
html #quote-modal-overlay .qf-x{ position:relative; flex:none; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:transparent; cursor:default }
html #quote-modal-overlay .qf-x::before, html #quote-modal-overlay .qf-x::after{ content:""; position:absolute; left:8px; top:13.5px; width:12px; height:1.5px; border-radius:1px; background:var(--ui-text-2); transform:rotate(45deg) }
html #quote-modal-overlay .qf-x::after{ transform:rotate(-45deg) }
html #quote-modal-overlay .qf-x:hover{ background:var(--ui-fill) }
html #quote-modal-overlay .qf-link{ height:22px; padding:0 4px; border:0; background:transparent; color:var(--ui-accent-text); font-size:var(--ui-text-footnote); cursor:default }
html #quote-modal-overlay .qf-link.danger{ color:var(--ui-danger) }

/* 몸통: 견적서 칸 + 메모만 스크롤 */
html #quote-modal-overlay .qf-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px }
html #quote-modal-overlay .qf-cols{ display:flex; gap:12px; align-items:flex-start }
html #quote-modal-overlay .qf-col{ flex:1 1 0; width:0; min-width:0; display:flex; flex-direction:column; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); overflow:hidden }
html #quote-modal-overlay .qf-colhd{ display:flex; align-items:center; gap:8px; min-height:36px; padding:4px 10px 4px 14px; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #quote-modal-overlay .qf-kind{ display:inline-flex; align-items:center; gap:6px; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1); white-space:nowrap }
html #quote-modal-overlay .qf-kdot{ width:8px; height:8px; border-radius:50%; background:var(--ui-doc-online) }
html #quote-modal-overlay .qf-kdot.buy{ background:var(--ui-doc-buy) }
html #quote-modal-overlay .qf-planbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 14px; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #quote-modal-overlay .qf-seg{ display:inline-flex; padding:2px; border-radius:var(--ui-radius-control); background:var(--ui-fill) }
html #quote-modal-overlay .qf-seg button{ height:22px; padding:0 10px; border:0; border-radius:calc(var(--ui-radius-control) - 2px); background:transparent; color:var(--ui-text-1); font-size:var(--ui-text-footnote); white-space:nowrap; cursor:default }
html #quote-modal-overlay .qf-seg button .num{ margin-left:4px; color:var(--ui-text-2); font-variant-numeric:tabular-nums }
html #quote-modal-overlay .qf-seg button.on{ background:var(--ui-surface); box-shadow:var(--ui-elev-control); font-weight:var(--ui-weight-semibold) }
/* 상품구입비용(또는 온라인) 견적서 추가 안내 줄: 종류 색 점선 테두리 + 연한 종류 바탕 — 눈에 띄되 채운 단추는 아님 */
html #quote-modal-overlay .qf-addbar{ display:flex; align-items:center; gap:10px; margin-bottom:12px; padding:8px 10px 8px 14px; border:1px dashed var(--ui-doc-buy); border-radius:var(--ui-radius-group); background:var(--ui-doc-buy-tint) }
html #quote-modal-overlay .qf-addbar.on{ border-color:var(--ui-doc-online); background:var(--ui-doc-online-tint) }
html #quote-modal-overlay .qf-addbar .qf-kdot{ flex:none; width:10px; height:10px }
html #quote-modal-overlay .qf-addbar-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
html #quote-modal-overlay .qf-addbar-t b{ font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold); color:var(--ui-doc-buy-ink) }
html #quote-modal-overlay .qf-addbar.on .qf-addbar-t b{ color:var(--ui-doc-online-ink) }
html #quote-modal-overlay .qf-addbar-t span{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #quote-modal-overlay .qf-addbar .qf-hbtn{ flex:none; font-weight:var(--ui-weight-semibold) }
html #quote-modal-overlay .qf-memo-grp{ margin-top:12px }
html #quote-modal-overlay .qf-cap{ display:block; margin:0 4px 5px; font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); color:var(--ui-text-2) }
html #quote-modal-overlay #qf-memo{ display:block; width:100%; min-height:52px; padding:6px 10px; resize:vertical; font-size:var(--ui-text-body); line-height:18px }

/* 아래 단추 줄 */
html #quote-modal-overlay .qf-ft{ flex:none; display:flex; align-items:center; gap:8px; min-height:52px; padding:8px 14px 8px 16px; background:var(--ui-surface); border-top:var(--ui-hairline) solid var(--ui-line) }
html #quote-modal-overlay .qf-ft-l{ flex:1; min-width:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
html #quote-modal-overlay .qf-sum{ font-size:var(--ui-text-body); color:var(--ui-text-2); white-space:nowrap }
html #quote-modal-overlay .qf-sum b{ margin-left:4px; font-size:var(--ui-text-title3); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1); font-variant-numeric:tabular-nums }
html #quote-modal-overlay .qf-sum.off{ color:var(--ui-text-3) } html #quote-modal-overlay .qf-sum.off b{ color:var(--ui-text-2); font-weight:var(--ui-weight-regular) }
html #quote-modal-overlay .qf-fbtn{ height:var(--ui-control); min-width:72px; padding:0 14px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-body); white-space:nowrap; cursor:default }
html #quote-modal-overlay .qf-fbtn.pri{ background:var(--ui-accent); color:var(--ui-on-accent); box-shadow:none; font-weight:var(--ui-weight-semibold) }
html #quote-modal-overlay .qf-fbtn.pri:hover{ background:var(--ui-accent-hover) }
html #quote-modal-overlay .qf-fbtn:disabled{ opacity:.5 }

@media (max-width:767px){
  html #quote-modal-overlay.qf-ov{ padding:0; align-items:stretch }
  html #quote-modal-overlay .qf-win{ max-width:none !important; max-height:none; height:100%; border-radius:0 }
  html #quote-modal-overlay .qf-hd{ flex-wrap:wrap; padding:6px 8px 6px 14px; padding-top:calc(6px + env(safe-area-inset-top)) }
  html #quote-modal-overlay .qf-hbtn{ height:var(--ui-control-mobile) }
  html #quote-modal-overlay .qf-body{ padding:8px }
  html #quote-modal-overlay .qf-cols{ flex-direction:column }
  html #quote-modal-overlay .qf-col{ width:auto; flex:1 1 auto; align-self:stretch }
  html #quote-modal-overlay .qf-colhd, html #quote-modal-overlay .qf-planbar{ flex-wrap:wrap }
  html #quote-modal-overlay .qf-addbar{ flex-wrap:wrap; margin-bottom:8px }
  html #quote-modal-overlay .qf-addbar .qf-hbtn{ margin-left:20px; width:calc(100% - 20px) }
  html #quote-modal-overlay .qf-ft{ flex-wrap:wrap; padding-bottom:calc(8px + env(safe-area-inset-bottom)) }
  html #quote-modal-overlay .qf-ft-l{ width:100%; flex:none }
  html #quote-modal-overlay .qf-fbtn{ flex:1; height:var(--ui-control-mobile) }
}