/* =============================================================
   견적서 · 계약관리 쪽 남은 창 맥 시트 — 견적서와 다른 계약 · 견적서 이력 · 외주비 서비스 고르기 · 매출 공지 ·
   상품 수수료 분류 · 견적서 연결 · 계산서 안내 · 세금계산서 보기.
   마크업(테일윈드 창)은 그대로, 이 창들 id 안쪽만 덮는다. 값은 ui-tokens.css 에서만. 화면에서만(인쇄 그대로).
   흰 시트 · 뒤 배경 옅게 · 제목 17px(앞 색 아이콘 숨김) · 닫기 회색 동그라미 · 칸 28px · 표 머리 회색 12px · 줄 32px ·
   남색/파랑 테두리 단추 → 흰 단추, 채운 파랑은 창마다 주 행동 하나 · 경고 주황 · 지남 빨강 글자는 그대로.
   휴대폰: 아래에서 올라오는 시트. 되돌리기: index.tsx 의 이 파일 <link> 한 줄.
   ============================================================= */
@media screen {
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal){ background:var(--ui-scrim) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; font-family:var(--ui-font) }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) *{ font-family:var(--ui-font) }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div{ border:0 !important; border-radius:var(--ui-radius-sheet) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-sheet) !important; color:var(--ui-text-1); overflow:hidden }
/* 머리 줄 · 제목 */
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:first-child{ min-height:44px; padding:8px 10px 8px 16px !important; background:var(--ui-surface) !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:first-child :is(h2, h3), html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:first-child > span.font-bold{ font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:first-child :is(h2, h3, span, div) > i.fas:first-child{ display:none }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:first-child :is(p, .text-xs){ font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important }
/* 바닥 단추 줄 */
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:last-child:not(:first-child):has(> button, > a){ gap:8px !important; padding:10px 16px !important; background:var(--ui-surface) !important; border-top:var(--ui-hairline) solid var(--ui-line) !important }
/* 표: 머리 회색 12px · 줄 32px · 머리카락 선 */
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) table{ border-collapse:collapse; font-size:var(--ui-text-body); font-variant-numeric:tabular-nums }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) thead tr, html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) thead th{ background:var(--ui-fill-subtle) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) th{ height:28px; padding:0 10px !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) td{ padding:6px 10px !important; border-color:var(--ui-line) !important; font-size:var(--ui-text-body) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) tr.bg-indigo-50\/60, html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) tr[class*="bg-indigo-50"]{ background:var(--ui-accent-tint) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) :is(.text-indigo-700, .text-indigo-600){ color:var(--ui-accent-text) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) .text-\[10px\]{ font-size:var(--ui-text-caption) !important }
html #invoice-guide-modal p[style*="size:10px"]{ font-size:var(--ui-text-caption) !important }
/* 칸 */
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select){ height:var(--ui-control) !important; min-height:0 !important; padding:0 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background-color:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) textarea{ padding:6px 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-field) !important; font-size:var(--ui-text-body) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) :is(input, select, textarea):focus{ outline:none !important; box-shadow:var(--ui-focus-ring) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) input[type="checkbox"], html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) input[type="radio"]{ accent-color:var(--ui-accent) }
/* 파란 · 남색 안내 상자 → 회색 묶음 */
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) :is(.bg-blue-50, .bg-indigo-50, .bg-slate-50, .bg-gray-50):not(tr):not(button){ border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-fill-subtle) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) :is(.bg-blue-50, .bg-indigo-50):not(button) :is(.text-blue-700, .text-blue-800, .text-indigo-700, .text-indigo-800){ color:var(--ui-text-1) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) :is(.bg-blue-50, .bg-indigo-50):not(button) > i.fas:first-child{ display:none }
/* 단추: 흰 단추가 기본 */
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div button, html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:last-child > a{ display:inline-flex; align-items:center; justify-content:center; gap:4px; height:var(--ui-control-sm); min-height:0 !important; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:last-child:not(:first-child) > :is(button, a){ height:var(--ui-control) !important; padding:0 14px !important; font-size:var(--ui-text-body) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div button > i.fas, html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:last-child > a > i.fas{ display:none }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div button:focus-visible{ outline:none !important; box-shadow:var(--ui-focus-ring) !important }
/* 주 행동 하나 = 채운 파랑 */
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div :is(#sales-os-svc-save, button[onclick^="_salesCloseRevenueNotice"], button[onclick^="closeInvoiceGuideModal"]:not(.leading-none), button[onclick^="tiCloseViewerModal"]:not(.leading-none)){ background:var(--ui-accent) !important; box-shadow:none !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-semibold) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div #sales-os-svc-save:disabled{ opacity:.45 }
/* 매출 공지 머리의 날짜 배지는 작게 */
html #sales-revenue-notice-overlay > div > div:first-child span:not(:only-child){ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-2) !important; background:var(--ui-fill) !important }
/* 닫기: 회색 동그라미 */
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:first-child > button:last-child:is(:has(> i), .leading-none, .text-2xl, .text-xl){ display:inline-flex !important; align-items:center; justify-content:center; flex:none; width:22px !important; height:22px !important; min-height:0 !important; padding:0 !important; border:0 !important; border-radius:50% !important; background:var(--ui-fill) !important; box-shadow:none !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-callout) !important; line-height:1 !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:first-child > button:last-child:is(:has(> i), .leading-none, .text-2xl, .text-xl) i{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:first-child > button:last-child:is(:has(> i), .leading-none, .text-2xl, .text-xl):hover{ background:var(--ui-fill-hover) !important }
/* 위험 = 흰 단추 + 빨간 글자 */
html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div button:is(.text-red-600, .text-red-500, .text-rose-600, .bg-red-500, .bg-red-600){ color:var(--ui-danger) !important; font-weight:var(--ui-weight-semibold) !important }

/* 상품·수수료 분류(관리자): 이 창만 <section> · <header> · <footer> 로 그려서 따로 — 가운데 시트 · 분류는 회색 분할 단추 */
html #sales-financial-classification-overlay{ align-items:center !important; justify-content:center !important }
html #sales-financial-classification-overlay > section{ border:0 !important; border-radius:var(--ui-radius-sheet) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-sheet) !important; color:var(--ui-text-1) }
html #sales-financial-classification-overlay > section > header{ align-items:center !important; min-height:44px; padding:10px 10px 10px 16px !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html #sales-financial-classification-overlay > section > header h2{ margin-top:2px !important; font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #sales-financial-classification-overlay > section > header p{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #sales-financial-classification-overlay > section > header > button{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; padding:0 !important; border-radius:50% !important; background:var(--ui-fill) !important; color:var(--ui-text-2) !important }
html #sales-financial-classification-overlay > section > header > button i{ font-size:var(--ui-text-caption) }
html #sales-financial-classification-overlay > section > header > button:hover{ background:var(--ui-fill-hover) !important }
html #sales-financial-classification-overlay > section > footer{ padding:10px 16px !important; border-top:var(--ui-hairline) solid var(--ui-line) }
html #sales-financial-classification-overlay > section > footer p{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #sales-financial-classification-overlay > section > footer button{ height:var(--ui-control); padding:0 14px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important }
html #sales-financial-classification-overlay #sales-financial-classification-save{ background:var(--ui-accent) !important; box-shadow:none !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-semibold) !important }
html #sales-financial-classification-overlay #sales-financial-classification-save:hover{ background:var(--ui-accent-hover) !important }
html #sales-financial-classification-overlay #sales-financial-classification-summary{ border-color:var(--ui-line) !important; background:var(--ui-fill-subtle) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #sales-financial-classification-overlay #sales-financial-classification-summary b{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) }
html #sales-financial-classification-overlay #sales-financial-classification-items td > div{ display:inline-flex !important; gap:0 !important; padding:2px; border-radius:var(--ui-radius-control); background:var(--ui-fill) }
html #sales-financial-classification-overlay #sales-financial-classification-items td > div > button{ height:22px; padding:0 9px !important; border:0 !important; border-radius:calc(var(--ui-radius-control) - 2px) !important; background:transparent !important; box-shadow:none !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important }
html #sales-financial-classification-overlay #sales-financial-classification-items td > div > button.text-white{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important }
html #sales-financial-classification-overlay #sales-financial-classification-items td:last-child{ text-align:right }
}
@media screen and (max-width:767px){
  html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal){ align-items:flex-end !important; padding:0 !important }
  html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div{ width:100% !important; max-width:none !important; margin:0 !important; max-height:92vh !important; max-height:92dvh !important; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 !important; padding-bottom:env(safe-area-inset-bottom) }
  html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select){ height:var(--ui-control-mobile) !important; font-size:16px !important }
  html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div button{ height:32px }
  html :is(#quote-drift-overlay, #quote-versions-overlay, #sales-os-svc-overlay, #sales-revenue-notice-overlay, #sales-financial-classification-overlay, #qlp-overlay, #invoice-guide-modal, #ti-viewer-modal) > div > div:last-child:not(:first-child) > :is(button, a){ flex:1; height:44px !important }
  html #sales-financial-classification-overlay{ align-items:flex-end !important }
  html #sales-financial-classification-overlay > section{ width:100% !important; max-width:none !important; max-height:92vh !important; max-height:92dvh !important; overflow:auto !important; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 !important; padding-bottom:env(safe-area-inset-bottom) }
  html #sales-financial-classification-overlay > section > footer button{ height:44px }
  /* 휴대폰: 표를 옆으로 밀지 않게 — 품목 · 금액 한 줄, 분류 단추는 그 아래 폭 가득 */
  html #sales-financial-classification-overlay table{ min-width:0 !important }
  html #sales-financial-classification-overlay thead{ display:none }
  html #sales-financial-classification-overlay #sales-financial-classification-items tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; padding:8px 16px }
  html #sales-financial-classification-overlay #sales-financial-classification-items td{ padding:0 !important }
  html #sales-financial-classification-overlay #sales-financial-classification-items td:first-child{ display:none }
  html #sales-financial-classification-overlay #sales-financial-classification-items td:nth-child(2){ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  html #sales-financial-classification-overlay #sales-financial-classification-items td:last-child{ grid-column:1 / -1; margin-top:6px }
  html #sales-financial-classification-overlay #sales-financial-classification-items td > div{ display:flex !important }
  html #sales-financial-classification-overlay #sales-financial-classification-items td > div > button{ flex:1; height:30px }
  html #sales-financial-classification-overlay > section > footer{ flex-wrap:wrap }
  html #sales-financial-classification-overlay > section > footer > div{ flex:1 1 100%; }
  html #sales-financial-classification-overlay > section > footer > div > button{ flex:1 }
}