/* =============================================================
   견적서 목록 — 맥 고밀도. 범위: #quotes-content 안쪽 + 미리보기 창 바깥 틀(#quote-preview-overlay · #ts-preview-overlay · #quote-bundle-overlay)
   의 닫기 · 단추 · 묶음 머리만. 값은 ui-tokens.css 에서만. 견적서 · 거래명세표 문서(A4)는 렌더러가 그려 건드리지 않는다.
   제목 한 줄 · 채운 파랑 하나([+ 온라인마케팅 견적서]) · 도구 한 줄(유형 · 상태 · 검색 · 새로고침) · 맥 표 32px · 상태 점 + 글자.
   마크업: index.tsx #quotes-content, quote.js _quoteSingleRowHtml · _quoteBundleRowHtml · _showPdfPreviewModal · _showBundlePreviewModal.
   되돌리기: index.tsx 의 이 파일 <link> 한 줄 + 위 마크업.
   ============================================================= */
html #quotes-content.ql-mac{ background:var(--ui-bg); color:var(--ui-text-1) }
html #quotes-content.ql-mac, html #quotes-content.ql-mac *:not(i):not(.fas):not(.far){ font-family:var(--ui-font) }
html #quotes-content.ql-mac > .w-full{ padding:4px 16px 32px }
html #quotes-content .hidden{ display:none !important }
html #quotes-content .ql-sp{ flex:1 }
html #quotes-content .ql-dim{ color:var(--ui-text-2) }

/* 머리 */
html #quotes-content .ql-head{ display:flex; align-items:center; gap:8px; min-height:36px; margin:4px 0 8px; white-space:nowrap }
html #quotes-content .ql-head h2{ margin:0; font-size:var(--ui-text-title2); font-weight:var(--ui-weight-bold); color:var(--ui-text-1) }
html #quotes-content .ql-btn{ display:inline-flex; align-items:center; gap:6px; 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 #quotes-content #quote-drift-btn:not(.hidden){ display:inline-flex }
html #quotes-content .ql-btn.sm{ height:24px; padding:0 10px; font-size:var(--ui-text-footnote) }
html #quotes-content .ql-btn.pri{ background:var(--ui-accent); color:var(--ui-on-accent); box-shadow:none; font-weight:var(--ui-weight-semibold) }
html #quotes-content .ql-btn.pri:hover{ background:var(--ui-accent-hover) }
html #quotes-content .ql-btn:focus-visible, html #quotes-content .ql-pop:focus-visible, html #quotes-content .ql-row:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
html #quotes-content .ql-dot{ display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--ui-text-3) }
html #quotes-content .ql-dot.buy, html #quotes-content .ql-dot.orange{ background:var(--ui-warning-dot) }
html #quotes-content .ql-dot.blue{ background:var(--ui-accent) } html #quotes-content .ql-dot.green{ background:var(--ui-success) } html #quotes-content .ql-dot.red{ background:var(--ui-danger) }

/* 도구 한 줄 */
html #quotes-content .ql-tools{ display:flex; align-items:center; gap:8px; margin:0 0 8px; white-space:nowrap }
html #quotes-content .ql-pop{ height:24px; padding:0 24px 0 8px; border:0; border-radius:var(--ui-radius-control); background-color:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-footnote); cursor:default }
html #quotes-content .ql-search{ width:240px; height:26px; padding:0 10px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-fill); color:var(--ui-text-1); font-size:var(--ui-text-footnote) }
html #quotes-content .ql-search::placeholder{ color:var(--ui-text-3) }
html #quotes-content .ql-search:focus{ outline:none; box-shadow:var(--ui-focus-ring); background:var(--ui-surface) }

/* 맥 표 */
html #quotes-content .ql-list{ border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); overflow:hidden }
html #quotes-content .ql-scroll{ overflow-x:auto }
html #quotes-content .ql-tbl{ width:100%; border-collapse:collapse; font-size:var(--ui-text-body); font-variant-numeric:tabular-nums }
html #quotes-content .ql-tbl th{ height:28px; padding:0 10px; border-bottom:var(--ui-hairline) solid var(--ui-line); background:var(--ui-surface); color:var(--ui-text-2); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); text-align:left; white-space:nowrap }
html #quotes-content .ql-tbl .r{ text-align:right }
html #quotes-content .ql-tbl td{ height:var(--ui-row); padding:0 10px; border-bottom:var(--ui-hairline) solid var(--ui-line); color:var(--ui-text-1); white-space:nowrap; vertical-align:middle }
html #quotes-content .ql-tbl tbody tr:last-child > td{ border-bottom:0 }
html #quotes-content .ql-row{ cursor:default }
@media (hover:hover){ html #quotes-content .ql-row:hover > td{ background:var(--ui-fill-subtle) } }
html #quotes-content .ql-no{ font-family:var(--ui-font-mono) !important; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #quotes-content .ql-who{ max-width:160px; overflow:hidden; text-overflow:ellipsis; font-weight:var(--ui-weight-semibold) }
html #quotes-content .ql-work{ max-width:220px; overflow:hidden; text-overflow:ellipsis; color:var(--ui-text-2) }
html #quotes-content .ql-amt{ font-weight:var(--ui-weight-semibold) }
html #quotes-content .ql-st{ display:inline-flex; align-items:center; gap:6px; font-size:var(--ui-text-footnote) }
html #quotes-content .qt-plus{ margin-left:4px; color:var(--ui-text-2); font-family:var(--ui-font) !important; font-weight:var(--ui-weight-regular) }
html #quotes-content .qt-types{ display:inline-flex; align-items:center; gap:5px; font-size:var(--ui-text-body); color:var(--ui-text-1) }
html #quotes-content .qt-types .qt-plus{ margin:0 1px }
html #quotes-content .qt-dot{ display:inline-block; flex:none; width:7px; height:7px; border-radius:50% }
html #quotes-content .qt-dot-on{ background:var(--ui-accent) }
html #quotes-content .qt-dot-buy{ background:var(--ui-warning-dot) }
html #quotes-content .ql-empty{ height:auto !important; padding:40px 0 !important; text-align:center; color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
html #quotes-content .ql-foot{ height:30px; display:flex; align-items:center; padding:0 12px; border-top:var(--ui-hairline) solid var(--ui-line); color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
/* 액션: [첫 자리] 폭 고정 + [⋯] — 줄마다 같은 자리 */
html #quotes-content .qt-acts{ display:flex; align-items:center; gap:4px }
html #quotes-content .ql-act{ display:inline-flex; align-items:center; justify-content:center; gap:5px; width:70px; height:22px; padding:0; 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-footnote); white-space:nowrap; cursor:default }
html #quotes-content .ql-act.done, html #quotes-content .ql-act.part{ box-shadow:none; background:transparent; color:var(--ui-text-2) }
html #quotes-content .ql-act.part{ color:var(--ui-warning) }
html #quotes-content .ql-more{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:22px; padding:0; border:0; border-radius:var(--ui-radius-control); background:transparent; color:var(--ui-text-2); cursor:default }
html #quotes-content .ql-more:hover{ background:var(--ui-fill) }
/* 좁은 노트북: 액션 칸을 오른쪽에 붙여 표만 옆으로 밀리고 단추는 늘 보이게 */
@media (min-width:768px) and (max-width:1180px){
  html #quotes-content .ql-tbl th, html #quotes-content .ql-tbl td{ padding:0 7px }
  html #quotes-content .ql-who{ max-width:110px } html #quotes-content .ql-work{ max-width:140px }
}
html #quotes-content .ql-tbl td[data-col="actions"], html #quotes-content .ql-tbl th:last-child{ position:sticky; right:0; background:var(--ui-surface); box-shadow:inset var(--ui-hairline) 0 0 var(--ui-line) }
@media (hover:hover){ html #quotes-content .ql-row:hover > td[data-col="actions"]{ background:var(--ui-fill-subtle) } }

/* 휴대폰(사용자 B안): 두 줄 목록 — 1줄 수신 · 금액 / 2줄 작업명 · 상태 · [계약등록] · [⋯]. 유형 · 견적번호 · 작성자 · 날짜는 줄을 눌러 여는 미리보기에 */
@media (max-width:767px){
  html #quotes-content.ql-mac > .w-full{ padding:4px 12px 32px }
  html #quotes-content .ql-head{ flex-wrap:wrap; white-space:normal }
  html #quotes-content .ql-head h2{ width:100% }
  html #quotes-content .ql-head .ql-sp{ display:none }
  html #quotes-content .ql-head .ql-btn{ flex:1; justify-content:center; height:var(--ui-control-mobile) }
  html #quotes-content .ql-tools{ flex-wrap:wrap }
  html #quotes-content .ql-tools .ql-sp{ display:none }
  html #quotes-content .ql-pop{ height:30px }
  html #quotes-content .ql-search{ order:3; flex:1 1 100%; width:auto; height:32px }
  html #quotes-content .ql-tools .ql-btn.sm{ height:30px }
  html #quotes-content .ql-tbl, html #quotes-content .ql-tbl tbody{ display:block }
  html #quotes-content .ql-tbl thead{ display:none }
  html #quotes-content .ql-tbl tr{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"w w a" "k s x"; align-items:center; gap:2px 10px; padding:8px 12px; border-bottom:var(--ui-hairline) solid var(--ui-line) }
  html #quotes-content .ql-tbl td{ display:none; height:auto; padding:0; border:0; position:static; box-shadow:none; background:transparent }
  html #quotes-content .ql-tbl td[colspan]{ display:block; grid-column:1 / -1 }
  html #quotes-content .ql-tbl td.ql-who{ display:block; grid-area:w; max-width:none }
  html #quotes-content .ql-tbl td.ql-amt{ display:block; grid-area:a }
  html #quotes-content .ql-tbl td.ql-work{ display:block; grid-area:k; max-width:none; font-size:var(--ui-text-footnote) }
  html #quotes-content .ql-tbl td:nth-child(6){ display:block; grid-area:s; justify-self:end }
  html #quotes-content .ql-tbl td[data-col="actions"]{ display:block; grid-area:x }
  html #quotes-content .ql-tbl td.ql-amt{ justify-self:end }
  html #quotes-content .ql-act{ height:26px; width:64px } html #quotes-content .ql-more{ height:26px; width:28px }
}

/* ── 미리보기 창 바깥 틀: 닫기 · 단추 · 묶음 머리 (문서는 그대로) ── */
html #quote-preview-overlay .qp-x, html #ts-preview-overlay .qp-x, html #quote-bundle-overlay .qp-x{ position:relative; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:transparent; cursor:default }
html #quote-preview-overlay .qp-x::before, html #quote-preview-overlay .qp-x::after, html #ts-preview-overlay .qp-x::before, html #ts-preview-overlay .qp-x::after, html #quote-bundle-overlay .qp-x::before, html #quote-bundle-overlay .qp-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-preview-overlay .qp-x::after, html #ts-preview-overlay .qp-x::after, html #quote-bundle-overlay .qp-x::after{ transform:rotate(-45deg) }
html #quote-preview-overlay .qp-x:hover, html #ts-preview-overlay .qp-x:hover, html #quote-bundle-overlay .qp-x:hover{ background:var(--ui-fill) }
html #quote-bundle-overlay .qp-btn{ height:var(--ui-control); 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-family:var(--ui-font); font-size:var(--ui-text-body); white-space:nowrap; cursor:default }
html #quote-bundle-overlay .qp-btn.sm{ height:var(--ui-control-sm); padding:0 10px; font-size:var(--ui-text-footnote) }
html #quote-bundle-overlay .qp-btn.bg-blue-600{ background:var(--ui-accent); color:var(--ui-on-accent); box-shadow:none; font-weight:var(--ui-weight-semibold) }
html #quote-bundle-overlay .qb-hd{ background:var(--ui-surface-alt) !important; border-color:var(--ui-line) !important; font-family:var(--ui-font) }
html #quote-bundle-overlay .qb-count{ flex:none; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #quote-bundle-overlay .qb-hd .font-bold{ font-size:var(--ui-text-title3) !important; color:var(--ui-text-1) !important }
html #quote-bundle-overlay .qb-hd .text-\[11px\]{ font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important }
html #quote-bundle-overlay .qb-ft{ background:var(--ui-surface) !important; border-color:var(--ui-line) !important; font-family:var(--ui-font) }
html #quote-bundle-overlay .qb-ft .text-xs{ font-size:var(--ui-text-body) !important; color:var(--ui-text-2) !important }
html #quote-bundle-overlay .qb-ft b{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) !important }
html #quote-bundle-overlay .qb-ft .text-gray-400{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) }
html #quote-bundle-overlay .qb-panes{ background:var(--ui-line) }
html #quote-bundle-overlay .qb-pane{ background:var(--ui-surface) }
html #quote-bundle-overlay .qb-divider{ background:var(--ui-line) }
html #quote-bundle-overlay .qb-pane-head{ background:var(--ui-surface); border-bottom:var(--ui-hairline) solid var(--ui-line); font-family:var(--ui-font) }
html #quote-bundle-overlay .qb-pane-body{ background:var(--ui-bg) }
html #quote-bundle-overlay .qb-pane-head .qt-types{ display:inline-flex; align-items:center; gap:5px; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #quote-bundle-overlay .qb-pane-head .qt-dot{ display:inline-block; width:7px; height:7px; border-radius:50% }
html #quote-bundle-overlay .qb-pane-head .qt-dot-on{ background:var(--ui-doc-online) } html #quote-bundle-overlay .qb-pane-head .qt-dot-buy{ background:var(--ui-doc-buy) }
html #quote-bundle-overlay .qb-amt{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1); font-variant-numeric:tabular-nums }
html #quote-bundle-overlay .qb-tabs{ padding:6px 16px; background:var(--ui-surface); border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #quote-bundle-overlay .qb-seg{ display:inline-flex; padding:2px; border-radius:var(--ui-radius-control); background:var(--ui-fill) }
html #quote-bundle-overlay .qb-tab{ height:24px; padding:0 12px; border:0; border-radius:calc(var(--ui-radius-control) - 2px); background:transparent; color:var(--ui-text-1); font-family:var(--ui-font); font-size:var(--ui-text-footnote); white-space:nowrap; cursor:default }
html #quote-bundle-overlay .qb-tab.on{ background:var(--ui-surface); box-shadow:var(--ui-elev-control); font-weight:var(--ui-weight-semibold) }