/* =============================================================
   견적서관리 스킨 — 공통 화면 규칙(ui-tokens.css) 적용
         (#quote-preview-overlay · #ts-preview-overlay · #quote-bundle-overlay · #quote-modal-overlay 의 위아래 막대).
   기능 · 배치 · 버튼 개수 · 문구는 그대로, "값"(색 · 글자 · 선 · 둥글기 · 높이)만 규칙으로.
   - 채운 파랑은 화면(창)마다 하나: 목록은 '온라인마케팅 견적서', 미리보기는 'PDF 다운로드', 작성 창은 '저장'.
   - 줄 높이 32px, 글자 11/12/13px, 굵기 400/600/700, 대비 4.5:1 이상.
   - 종류 표시는 칸 배지 대신 색 아이콘 + 글자(온라인 파랑 · 상품구입 주황 = 문서 색과 같음).
   - 견적서 · 거래명세표 문서 자체(창 안의 A4)는 렌더러가 그리므로 건드리지 않는다.
   되돌리기: index.tsx 의 이 파일 <link> 한 줄을 빼면 원래 화면.
   ============================================================= */

/* ━━ 1. 목록 화면(#quotes-content)은 ui-skin-quote-list.css (맥: 제목 한 줄 · 도구 한 줄 · 맥 표 · 상태 점) ━━ */

/* ━━ 2. 견적서 · 거래명세표 미리보기 창, 묶음 미리보기 창 — 바깥 틀만 ━━ */
html #quote-preview-overlay, html #ts-preview-overlay, html #quote-bundle-overlay{ background:var(--ui-scrim) !important }
html #quote-preview-overlay > div, html #ts-preview-overlay > div, html #quote-bundle-overlay > div{
  border-radius:var(--ui-radius-sheet) !important; box-shadow:var(--ui-elev-sheet) !important; overflow:hidden;
}
html #quote-preview-overlay > div > div:first-child, html #ts-preview-overlay > div > div:first-child{
  padding:0 12px 0 18px !important; height:44px; background:var(--ui-surface-alt) !important; border-color:var(--ui-line) !important;
}
html #quote-preview-overlay > div > div:first-child > span, html #ts-preview-overlay > div > div:first-child > span{
  font-family:var(--ui-font) !important; font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important;
}
html #quote-preview-overlay > div > div:first-child > span i, html #ts-preview-overlay > div > div:first-child > span i{ color:var(--ui-text-2) !important }
html #quote-preview-overlay > div > div:first-child > button, html #ts-preview-overlay > div > div:first-child > button{
  width:28px !important; height:28px !important; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill) !important;
}
html #quote-preview-overlay > div > div:first-child > button i, html #ts-preview-overlay > div > div:first-child > button i{ color:var(--ui-text-2) !important }
html #quote-preview-overlay #quote-preview-scroll, html #ts-preview-overlay > div > div:nth-child(2){ background:var(--ui-bg) !important }
html #quote-preview-overlay > div > div:last-child, html #ts-preview-overlay > div > div:last-child{
  padding:10px 14px !important; border-color:var(--ui-line) !important; background:var(--ui-surface) !important;
}
html #quote-preview-overlay > div > div:last-child > button, html #ts-preview-overlay > div > div:last-child > button{
  height:var(--ui-control) !important; padding:0 14px !important; border-radius:var(--ui-radius-control) !important; box-shadow:none !important;
  font-family:var(--ui-font) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important;
}
/* 채운 파랑은 'PDF 다운로드' 하나, Excel 은 흰 단추 */
html #quote-preview-overlay > div > div:last-child > button.bg-blue-600, html #ts-preview-overlay > div > div:last-child > button.bg-blue-600{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important }
html #quote-preview-overlay > div > div:last-child > button:not(.bg-blue-600){ background:var(--ui-surface) !important; color:var(--ui-text-1) !important; box-shadow:var(--ui-elev-control) !important }

/* 묶음 미리보기: 칸 머리 버튼을 머리카락 선 버튼으로 */
html #quote-bundle-overlay .qb-pane-head button{
  background:var(--ui-surface) !important; border:var(--ui-hairline) solid var(--ui-line-control) !important; color:var(--ui-text-1) !important;
  height:var(--ui-control-sm) !important; padding:0 8px !important; border-radius:var(--ui-radius-row) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important;
}
html #quote-bundle-overlay .qb-pane-head .font-mono{ font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important }

/* ━━ 3. 작성 · 수정 창 바깥 틀(제목 막대 · 아래 단추 줄 · 칸 머리 · 비교안 막대)은 ui-skin-quote-form.css (맥 시트) ━━ */

/* ━━ 4. 작성 · 수정 창 안쪽 — 새 견적서 문서 모양에 맞춘다 (입력 칸 · 배치 · 버튼 그대로, 값만) ━━
   종류별 색은 문서와 같다: 온라인 파랑 · 상품구입 주황(--ui-doc-*). 보라 · 청록 · 남색 버튼은 회색/선 버튼으로. */
html #quote-modal-overlay [data-qf-col]{ --qc:var(--ui-doc-online); --qc-ink:var(--ui-doc-online-ink); --qc-tint:var(--ui-doc-online-tint); --qc-head:var(--ui-doc-online-head) }
html #quote-modal-overlay [data-qf-col="product_purchase"]{ --qc:var(--ui-doc-buy); --qc-ink:var(--ui-doc-buy-ink); --qc-tint:var(--ui-doc-buy-tint); --qc-head:var(--ui-doc-buy-head) }
html #quote-modal-overlay .qf-sheet, html #quote-modal-overlay .qf-sheet *:not(i):not(.fas):not(.far):not(.fa){ font-family:var(--ui-font) !important }

/* 문서 머리: 제목은 종류색, 아래 선 3px */
html #quote-modal-overlay .qf-sheet{ padding:24px 22px !important }
html #quote-modal-overlay .qf-sheet > div:first-of-type h1, html #quote-modal-overlay .qf-sheet h1{ color:var(--qc) !important; font-size:var(--ui-text-title1) !important; font-weight:var(--ui-weight-bold) !important; letter-spacing:var(--ui-tracking-tight) !important }
html #quote-modal-overlay .qf-sheet .h-\[2px\]{ height:3px !important; background:var(--qc) !important; margin-bottom:16px !important }

/* 받는 분 칸(왼쪽): 연한 종류색 바탕, 칸막이 없이 */
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-1{ border:0 !important; background:var(--qc-tint); border-radius:var(--ui-radius-panel); padding:6px 4px }
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-1 tr, html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-1 td{ border-color:transparent !important; background:transparent !important }
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-1 td:first-child{ color:var(--qc-ink) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important }
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-1 > p{ border:0 !important; background:transparent !important; font-style:normal !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; padding:6px 8px 2px !important }
/* 공급자 칸(오른쪽): 칸막이 없이 목록처럼, 글자 11px 이상 */
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0{ border:0 !important; font-size:var(--ui-text-caption) !important }
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0 tr{ border-color:transparent !important }
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0 td{ border-color:transparent !important; background:transparent !important; color:var(--ui-text-1) !important; padding-top:3px !important; padding-bottom:3px !important }
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0 td.font-bold{ color:var(--ui-text-2) !important; font-weight:var(--ui-weight-regular) !important }
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0 td[rowspan]{ color:var(--ui-text-2) !important; font-weight:var(--ui-weight-semibold) !important; border-right:var(--ui-hairline) solid var(--ui-line) !important }
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0 .text-\[9px\], html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0 .text-\[8px\]{ font-size:var(--ui-text-caption) !important }
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0 td.text-\[9px\]{ white-space:normal !important; word-break:keep-all }
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0 button{ color:var(--ui-accent-text) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important }
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0 .text-gray-300{ color:var(--ui-text-3) !important }
html #quote-modal-overlay .qf-manager-tag{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important; border:0 !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important }
html #quote-modal-overlay .qf-manager-tag i{ color:var(--ui-text-2) !important }
html #quote-modal-overlay .qf-manager-tag .remove-btn{ color:var(--ui-text-2) !important; font-size:var(--ui-text-body) !important }

/* 입력 칸: 흰 바탕 + 머리카락 선, 초점은 파란 고리 */
/* 맥 입력란 (계약 등록 · 수정 창과 같은 모양): 테두리 대신 안쪽 머리카락 선, 모서리 6px */
html #quote-modal-overlay .qf-input-c, html #quote-modal-overlay .qf-input-c-sm, html #quote-modal-overlay #qf-memo{ background:var(--ui-surface) !important; border:0 !important; border-radius:var(--ui-radius-row) !important; color:var(--ui-text-1) !important; box-shadow:var(--ui-elev-field) !important }
html #quote-modal-overlay .qf-input-c::placeholder, html #quote-modal-overlay .qf-input-c-sm::placeholder{ color:var(--ui-text-3) !important; opacity:1 }
html #quote-modal-overlay .qf-input-c:focus, html #quote-modal-overlay .qf-input-c-sm:focus, html #quote-modal-overlay #qf-memo:focus{ box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important; outline:none !important }

/* 품목 표: 바깥 테두리 · 세로선 없이, 머리 줄은 반투명 종류색 + 진한 글자, 줄 사이 머리카락 선 */
html #quote-modal-overlay .qf-sheet > div.border.overflow-hidden{ border:0 !important }
html #quote-modal-overlay .qf-sheet > div.border.overflow-hidden thead tr{ background:var(--qc-head) !important }
html #quote-modal-overlay .qf-sheet > div.border.overflow-hidden th{ color:var(--qc-ink) !important; border-color:transparent !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-bold) !important; text-align:left !important }
html #quote-modal-overlay .qf-sheet > div.border.overflow-hidden th:first-child{ border-radius:var(--ui-radius-card) 0 0 var(--ui-radius-card) }
html #quote-modal-overlay .qf-sheet > div.border.overflow-hidden th:last-child{ border-radius:0 var(--ui-radius-card) var(--ui-radius-card) 0 }
/* 칸 순서: 품명 · 비고 · 단가 · 횟수 · 합계 · (세액) — 숫자 칸 머리는 오른쪽 */
html #quote-modal-overlay .qf-sheet > div.border.overflow-hidden th:nth-child(3), html #quote-modal-overlay .qf-sheet > div.border.overflow-hidden th:nth-child(4),
html #quote-modal-overlay .qf-sheet > div.border.overflow-hidden th:nth-child(5), html #quote-modal-overlay [data-qf-col="online_marketing"] .qf-sheet > div.border.overflow-hidden th:nth-child(6){ text-align:right !important }
html #quote-modal-overlay .qf-sheet tbody[id^="qf-items-body"] tr{ border-color:var(--ui-line) !important }
html #quote-modal-overlay .qf-sheet tbody[id^="qf-items-body"] td{ border-right-color:transparent !important; font-size:var(--ui-text-footnote) !important; color:var(--ui-text-1) !important }
html #quote-modal-overlay .qf-sheet tbody[id^="qf-items-body"] td.text-gray-500{ color:var(--ui-text-2) !important }
html #quote-modal-overlay .qf-sheet tbody[id^="qf-items-body"] .qf-input-c{ font-size:var(--ui-text-footnote) !important }
html #quote-modal-overlay .qf-sheet tbody[id^="qf-items-body"] button.text-gray-300{ color:var(--ui-text-3) !important; min-width:var(--ui-target-min); min-height:var(--ui-target-min) }

/* 품목 추가 · 상품비 계산: 채운 버튼은 '저장' 하나뿐이라 둘 다 회색 칸 */
html #quote-modal-overlay .qf-sheet button[onclick^="_quoteAddItemRow"], html #quote-modal-overlay .qf-sheet button[onclick*="_quoteOpenOutsourcing"]{
  background:var(--ui-fill) !important; color:var(--ui-text-1) !important; border:0 !important; height:var(--ui-control);
  border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important;
}
html #quote-modal-overlay .qf-sheet button[onclick^="_quoteAddItemRow"] i, html #quote-modal-overlay .qf-sheet button[onclick*="_quoteOpenOutsourcing"] i{ color:var(--ui-text-2) !important }
html #quote-modal-overlay .qf-sheet button[onclick*="_quoteOpenOutsourcing"] [id^="qf-outsourcing-badge"]{ background:var(--ui-surface) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important }
html #quote-modal-overlay .qf-sheet .text-\[9px\], html #quote-modal-overlay .qf-sheet .text-\[10px\], html #quote-modal-overlay .qf-sheet .text-\[8px\]{ font-size:var(--ui-text-caption) !important }
html #quote-modal-overlay .qf-sheet .text-\[11\.5px\]{ font-size:var(--ui-text-footnote) !important }
html #quote-modal-overlay .qf-sheet .font-extrabold{ font-weight:var(--ui-weight-bold) !important }
html #quote-modal-overlay .qf-sheet .font-medium{ font-weight:var(--ui-weight-regular) !important }
html #quote-modal-overlay .qf-sheet .text-gray-400{ color:var(--ui-text-2) !important }

/* 합계: 칸막이 표 → 줄 두 개 + 굵은 종류색 선 아래 큰 합계 */
html #quote-modal-overlay .qf-sheet table.border.text-\[12px\]{ border:0 !important }
html #quote-modal-overlay .qf-sheet table.border.text-\[12px\] tr{ border-color:transparent !important }
html #quote-modal-overlay .qf-sheet table.border.text-\[12px\] td{ background:transparent !important; border-color:transparent !important; font-size:var(--ui-text-body) !important }
html #quote-modal-overlay .qf-sheet table.border.text-\[12px\] td:first-child{ color:var(--ui-text-2) !important; font-weight:var(--ui-weight-regular) !important; text-align:left !important }
html #quote-modal-overlay .qf-sheet table.border.text-\[12px\] tr:last-child td{ border-top:2px solid var(--qc) !important }
html #quote-modal-overlay .qf-sheet table.border.text-\[12px\] tr:last-child td:first-child{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #quote-modal-overlay .qf-sheet table.border.text-\[12px\] td[id^="qf-total"]{ color:var(--qc-ink) !important; font-size:var(--ui-text-title1) !important; font-weight:var(--ui-weight-bold) !important }
html #quote-modal-overlay .qf-sheet table.border.text-\[12px\] td[id^="qf-supply"], html #quote-modal-overlay .qf-sheet table.border.text-\[12px\] td[id^="qf-vat"]{ font-weight:var(--ui-weight-regular) !important }
/* 상품구입 현금 입금 안내 칸 */
html #quote-modal-overlay .qf-sheet .border-orange-200{ border-color:var(--qc-head) !important; background:var(--qc-tint) !important; border-radius:var(--ui-radius-panel) !important }
html #quote-modal-overlay .qf-sheet .border-orange-200 p{ color:var(--ui-text-1) !important }

/* 입금계좌: 칸막이 줄 → 연한 종류색 칸 */
html #quote-modal-overlay .qf-sheet > div.flex.items-center.border{ border:var(--ui-hairline) solid var(--qc-head) !important; background:var(--qc-tint); border-radius:var(--ui-radius-panel); font-size:var(--ui-text-footnote) !important; overflow:hidden }
html #quote-modal-overlay .qf-sheet > div.flex.items-center.border > span{ background:transparent !important; border-color:transparent !important }
html #quote-modal-overlay .qf-sheet > div.flex.items-center.border > span:first-child{ color:var(--qc-ink) !important; font-weight:var(--ui-weight-semibold) !important }
html #quote-modal-overlay .qf-sheet > div.flex.items-center.border > span.text-green-700, html #quote-modal-overlay .qf-sheet > div.flex.items-center.border > span.text-teal-700{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #quote-modal-overlay .qf-sheet > div.flex.items-center.border .font-mono{ font-family:var(--ui-font) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #quote-modal-overlay .qf-sheet > div.flex.items-center.border i{ display:none }
html #quote-modal-overlay .qf-sheet .text-gray-800.tracking-wide{ font-weight:var(--ui-weight-bold) !important }

/* 옆에 상품구입 견적서 붙이는 칸(.qf-slot)은 ui-skin-quote-form.css */


/* 위 막대(진한 막 위): '미리보기'는 흰 칸, 세트 표시는 흰 글자 진하게 */
html #quote-modal-overlay #qf-setinfo{ background:var(--ui-surface) !important; color:var(--ui-text-1) !important }
/* 아래 내부 메모(진한 막 위): 흰 칸 + 진한 글자 */
html #quote-modal-overlay #qf-memo{ font-size:var(--ui-text-body) !important }
html #quote-modal-overlay #qf-memo::placeholder{ color:var(--ui-text-3) !important }
/* 비교표: 보라 점선 칸 → 연회색 칸 */
html #quote-modal-overlay .qf-sheet [id^="qf-compare-"] > div{ background:var(--ui-fill-subtle) !important; border:0 !important; border-radius:var(--ui-radius-panel) !important }
html #quote-modal-overlay .qf-sheet [id^="qf-compare-"] .text-violet-700, html #quote-modal-overlay .qf-sheet [id^="qf-compare-"] .text-violet-600{ color:var(--ui-text-1) !important }
html #quote-modal-overlay .qf-sheet [id^="qf-compare-"] .border-violet-200{ border-color:var(--ui-line) !important }
html #quote-modal-overlay .qf-sheet [id^="qf-compare-"] .text-gray-500, html #quote-modal-overlay .qf-sheet [id^="qf-compare-"] .text-gray-400{ color:var(--ui-text-2) !important }
html #quote-modal-overlay .qf-sheet [id^="qf-compare-"] .text-\[11\.5px\]{ font-size:var(--ui-text-footnote) !important }
/* 구분 글자(| /)와 작은 버튼 누를 자리 */
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0 [id^="qf-manager-sep"]{ color:var(--ui-text-2) !important }
html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0 button{ min-height:var(--ui-target-min) !important; display:inline-flex; align-items:center }
html #quote-modal-overlay .qf-manager-tag .remove-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:var(--ui-target-min); min-height:var(--ui-target-min) }
/* 합계 표 굵은 선이 칸 사이에서 끊기지 않게 */
html #quote-modal-overlay .qf-sheet table.border.text-\[12px\] td{ border-right-width:0 !important }

html #quote-modal-overlay .qf-sheet .qf-fixed-value{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-1) !important }
html #quote-modal-overlay .qf-sheet .text-\[10\.5px\]{ font-size:var(--ui-text-caption) !important }
html #quote-modal-overlay .qf-sheet b{ font-weight:var(--ui-weight-bold) !important }
/* 아래 합계 막대 */

@media (max-width:767px){

  /* 미리보기: A4 문서(794px)가 화면 폭에 눌려 글자가 세로로 쪼개지던 것 → A4 그대로 축소해서 보여줌
     (크기 계산은 그대로 — 축소는 그리기에서만. 다운로드 PDF 는 따로 만들어서 영향 없음) */
  html #quote-preview-overlay, html #ts-preview-overlay{ padding:8px !important }
  html #quote-preview-overlay #quote-preview-scroll, html #ts-preview-overlay > div > div:nth-child(2){ padding:8px !important }
  html #quote-preview-overlay #_quote_pdf_root, html #ts-preview-overlay #_ts_pdf_root{
    flex-shrink:0 !important; transform-origin:top left; transform:scale(var(--qd-s));
    margin-right:calc(794px * (var(--qd-s) - 1)) !important; margin-bottom:calc(1123px * (var(--qd-s) - 1)) !important;
    --qd-s:.86;
  }
}
@media (max-width:600px){ html #quote-preview-overlay #_quote_pdf_root, html #ts-preview-overlay #_ts_pdf_root{ --qd-s:.62 } }
@media (max-width:480px){ html #quote-preview-overlay #_quote_pdf_root, html #ts-preview-overlay #_ts_pdf_root{ --qd-s:.5 } }
@media (max-width:429px){ html #quote-preview-overlay #_quote_pdf_root, html #ts-preview-overlay #_ts_pdf_root{ --qd-s:.44 } }
@media (max-width:374px){ html #quote-preview-overlay #_quote_pdf_root, html #ts-preview-overlay #_ts_pdf_root{ --qd-s:.4 } }

/* ━━ 4-2. 묶음 미리보기 — A4 문서를 칸 폭에 맞춰 '그대로 축소' ━━
   원래: 두 견적서를 나란히 놓으면 칸(PC 1440 기준 약 680px)이 A4 폭(794px)보다 좁아 문서가 눌려
         줄이 더 꺾이고(PDF 와 다른 모양), 휴대폰에선 글자가 세로로 쪼개짐.
   크기 계산은 A4 그대로(그리기에서만 축소)라 거래명세표 빈 줄 · 다운로드 PDF 에 영향 없음. 칸 폭별 단계는 아래 @container — 배율 = 단계 아래쪽 폭 ÷ 794 (넘치지 않게 내림). */
html #quote-bundle-overlay .qb-pane-body{ container:qbpane / inline-size }
html #quote-bundle-overlay .qb-pane-body [id$="_pdf_root"]{
  --qd-s:1; flex-shrink:0 !important; transform-origin:top left; transform:scale(var(--qd-s));
  margin-right:calc(794px * (var(--qd-s) - 1)) !important; margin-bottom:calc(1123px * (var(--qd-s) - 1)) !important;
}
html #quote-bundle-overlay .qb-pane-body > div{ min-width:0 }
@container qbpane (max-width:793px){ html #quote-bundle-overlay .qb-pane-body [id$="_pdf_root"]{ --qd-s:0.94 } }
@container qbpane (max-width:749px){ html #quote-bundle-overlay .qb-pane-body [id$="_pdf_root"]{ --qd-s:0.86 } }
@container qbpane (max-width:689px){ html #quote-bundle-overlay .qb-pane-body [id$="_pdf_root"]{ --qd-s:0.78 } }
@container qbpane (max-width:619px){ html #quote-bundle-overlay .qb-pane-body [id$="_pdf_root"]{ --qd-s:0.68 } }
@container qbpane (max-width:539px){ html #quote-bundle-overlay .qb-pane-body [id$="_pdf_root"]{ --qd-s:0.57 } }
@container qbpane (max-width:459px){ html #quote-bundle-overlay .qb-pane-body [id$="_pdf_root"]{ --qd-s:0.5 } }
@container qbpane (max-width:399px){ html #quote-bundle-overlay .qb-pane-body [id$="_pdf_root"]{ --qd-s:0.45 } }
@container qbpane (max-width:359px){ html #quote-bundle-overlay .qb-pane-body [id$="_pdf_root"]{ --qd-s:0.38 } }
@media (max-width:767px){
  html #quote-bundle-overlay{ padding:6px !important }
  html #quote-bundle-overlay > div{ width:100% !important; height:96vh !important }
  html #quote-bundle-overlay > div > div:first-child{ padding:10px 12px !important }
  html #quote-bundle-overlay > div > div:first-child > div > span:first-child{ white-space:nowrap; flex-shrink:0 }
  html #quote-bundle-overlay .qb-pane-head{ flex-wrap:wrap; row-gap:6px !important; padding:8px 10px !important }
  html #quote-bundle-overlay .qb-pane-head > div:first-child{ flex-wrap:wrap; min-width:0 }
  html #quote-bundle-overlay .qb-pane-head > div:first-child > *{ white-space:nowrap }
  html #quote-bundle-overlay .qb-pane-body{ padding:8px !important }
  /* 아래 막대: 합계 한 줄 · 버튼 줄 */
  html #quote-bundle-overlay > div > div:last-child{ flex-direction:column !important; align-items:stretch !important; gap:8px !important; padding:10px 12px !important }
  html #quote-bundle-overlay > div > div:last-child > div:last-child{ display:grid !important; grid-template-columns:1fr auto; gap:8px !important }
  html #quote-bundle-overlay > div > div:last-child button{ white-space:nowrap; min-height:var(--ui-control-mobile) }
}

/* ━━ 5. 휴대폰 작성 창 — 배치만 위아래로 쌓는다 (입력 칸 · 버튼 · 순서 그대로) ━━
   원래: 견적서 칸(폭 0 에서 늘어남) + 옆 견적서 붙이기 칸(208px 고정)이 가로로 붙어, 390 폭에서 견적서 칸이 거의 0 이 되며 글자가 세로로 쪼개짐. */
@media (max-width:767px){
  html #quote-modal-overlay #qf-columns > [data-qf-col]{ flex:1 1 auto !important; width:auto !important }
  html #quote-modal-overlay .qf-sheet{ padding:16px 14px !important }
  /* 받는 분 · 공급자: 위아래로 */
  html #quote-modal-overlay .qf-sheet > .flex.gap-3{ flex-direction:column !important }
  html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0{ width:auto !important }
  html #quote-modal-overlay .qf-sheet > .flex.gap-3 > .flex-shrink-0 td{ white-space:normal !important }
  /* 품목 표: 칸이 7개라 표만 옆으로 밀어 본다(화면 전체는 고정) */
  html #quote-modal-overlay .qf-sheet > div.border.overflow-hidden{ overflow-x:auto !important; -webkit-overflow-scrolling:touch }
  html #quote-modal-overlay .qf-sheet > div.border.overflow-hidden > table{ min-width:600px }
  html #quote-modal-overlay .qf-sheet .qf-input-c{ min-height:32px }
  /* 품목 추가 · 상품비 계산, 합계 */
  html #quote-modal-overlay .qf-sheet button[onclick^="_quoteAddItemRow"], html #quote-modal-overlay .qf-sheet button[onclick*="_quoteOpenOutsourcing"]{ height:var(--ui-control-mobile) !important }
  html #quote-modal-overlay .qf-sheet > .flex.items-stretch{ flex-direction:column !important; align-items:stretch !important }
  html #quote-modal-overlay .qf-sheet > .flex.items-stretch > .flex-shrink-0{ align-items:stretch !important }
  html #quote-modal-overlay .qf-sheet table.border.text-\[12px\]{ min-width:0 !important; width:100% }
  html #quote-modal-overlay .qf-sheet .border-orange-200 p{ white-space:normal !important }
  html #quote-modal-overlay .qf-sheet > div.flex.items-center.border{ flex-wrap:wrap }
  html #quote-modal-overlay .qf-sheet > div.flex.items-center.border > span:first-child{ width:100% }
}




/* ⋯ 메뉴 · 묶음 견적서 고르기 메뉴(맥 메뉴 모양) */
html #quote-row-menu{ position:fixed; z-index:9996; min-width:200px; padding:5px; background:var(--ui-surface); border-radius:var(--ui-radius-card); box-shadow:var(--ui-elev-popover); font-family:var(--ui-font) }
html #quote-row-menu hr{ border:0; border-top:var(--ui-hairline) solid var(--ui-line); margin:4px 6px }
html #quote-row-menu .qrm-item{ display:flex; align-items:center; gap:12px; width:100%; height:28px; padding:0 10px; border:0; background:none; border-radius:var(--ui-radius-row); font-size:var(--ui-text-body); color:var(--ui-text-1); text-align:left; cursor:pointer }
html #quote-row-menu .qrm-item small{ margin-left:auto; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #quote-row-menu .qrm-item:hover, html #quote-row-menu .qrm-item:focus-visible{ outline:none; background:var(--ui-accent); color:var(--ui-on-accent) }
html #quote-row-menu .qrm-item:hover small, html #quote-row-menu .qrm-item:focus-visible small{ color:var(--ui-on-accent) }
html #quote-row-menu .qrm-danger{ color:var(--ui-danger) }
html #quote-row-menu .qrm-danger:hover, html #quote-row-menu .qrm-danger:focus-visible{ background:var(--ui-danger); color:var(--ui-on-accent) }
html #quote-row-menu .qrm-off, html #quote-row-menu .qrm-off:hover{ background:none; color:var(--ui-text-3); cursor:not-allowed }
html #quote-row-menu .qrm-off small, html #quote-row-menu .qrm-off:hover small{ color:var(--ui-text-3) }
html #quote-bundle-menu{ border:0 !important; border-radius:var(--ui-radius-card) !important; box-shadow:var(--ui-elev-popover) !important; padding:5px !important; font-family:var(--ui-font) }