/* =============================================================
   계약관리에서 여는 창 스킨 — 공통 화면 규칙(ui-tokens.css) 적용
   범위: 세금계산서 처리 고르기(#ct-ti-action-menu) · 입금내역 매칭(#bank-match-modal)
        · 계약 취소 / 취소 되돌리기(#sales-cancel-overlay) 안쪽만.
   배치 · 동작은 그대로, "값"만 규칙으로. 창마다 채운 버튼은 하나(그 창의 확정 버튼).
   되돌리기: index.tsx 의 이 파일 <link> 한 줄을 빼면 원래 창.
   ============================================================= */

/* ── 0. 세 창 공통: 글꼴 · 창 틀 ── */
html #ct-ti-action-menu *:not(i):not(.fas):not(.far):not(.fa),
html #bank-match-modal *:not(i):not(.fas):not(.far):not(.fa),
html #sales-cancel-overlay *:not(i):not(.fas):not(.far):not(.fa){ font-family:var(--ui-font) !important }
html #ct-ti-action-menu > div, html #bank-match-modal > div, html #sales-cancel-overlay > div{
  border-radius:var(--ui-radius-sheet) !important; box-shadow:var(--ui-elev-sheet) !important; border:0 !important; color:var(--ui-text-1);
}

/* ━━ 1. 세금계산서 처리 고르기 ━━ */
html #ct-ti-action-menu > div > div:first-child{ background:var(--ui-surface) !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html #ct-ti-action-menu > div > div:first-child .w-11{ background:var(--ui-accent-tint) !important; color:var(--ui-accent) !important; box-shadow:none !important; border-radius:var(--ui-radius-group) !important }
html #ct-ti-action-menu h3{ color:var(--ui-text-1) !important; font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-bold) !important }
html #ct-ti-action-menu .text-\[11px\]{ font-size:var(--ui-text-caption) !important }
html #ct-ti-action-menu .text-gray-500, html #ct-ti-action-menu .text-gray-400{ color:var(--ui-text-2) !important }
html #ct-ti-action-menu .text-gray-800{ color:var(--ui-text-1) !important }
html #ct-ti-action-menu .text-gray-300{ color:var(--ui-text-3) !important }
html #ct-ti-action-menu > div > div:first-child button{
  width:28px !important; height:28px !important; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill) !important;
  color:var(--ui-text-2) !important; font-size:var(--ui-text-title3) !important;
}
/* 두 갈래 고르기: 흰 칸 + 머리카락 선, 마우스 올리면 옅은 회색 · 파란 선 */
html #ct-ti-action-menu #ct-ti-action-new, html #ct-ti-action-menu #ct-ti-action-match{
  border:var(--ui-hairline) solid var(--ui-line-control) !important; background:var(--ui-surface) !important;
  border-radius:var(--ui-radius-group) !important; padding:12px 14px !important;
}
html #ct-ti-action-menu #ct-ti-action-new:hover, html #ct-ti-action-menu #ct-ti-action-match:hover{ background:var(--ui-fill-subtle) !important; border-color:var(--ui-accent) !important }
html #ct-ti-action-menu #ct-ti-action-new:focus-visible, html #ct-ti-action-menu #ct-ti-action-match:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) !important }
html #ct-ti-action-menu #ct-ti-action-new .w-12{ background:var(--ui-accent-tint) !important; color:var(--ui-accent) !important; border-radius:var(--ui-radius-group) !important; width:40px !important; height:40px !important }
html #ct-ti-action-menu #ct-ti-action-match .w-12{ background:var(--ui-fill) !important; color:var(--ui-text-2) !important; border-radius:var(--ui-radius-group) !important; width:40px !important; height:40px !important }
html #ct-ti-action-menu #ct-ti-action-new .text-sm, html #ct-ti-action-menu #ct-ti-action-match .text-sm{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #ct-ti-action-menu #ct-ti-action-new .text-xs, html #ct-ti-action-menu #ct-ti-action-match .text-xs{ font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important }
html #ct-ti-action-menu #ct-ti-action-new .fa-chevron-right, html #ct-ti-action-menu #ct-ti-action-match .fa-chevron-right{ color:var(--ui-text-3) !important }
html #ct-ti-action-menu > div > div:last-child{ background:var(--ui-surface) !important; border-top:var(--ui-hairline) solid var(--ui-line) !important }
html #ct-ti-action-menu > div > div:last-child button{
  height:var(--ui-control); padding:0 14px !important; border:0 !important; background:var(--ui-fill) !important; color:var(--ui-text-1) !important;
  border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important;
}
html #ct-ti-action-menu > div > div:last-child button:hover{ background:var(--ui-fill-hover) !important }

/* ━━ 2. 입금내역 매칭 ━━ */
/* 머리: 진한 남색 띠 → 흰 바탕 + 본문색 제목 */
html #bank-match-modal > div > div:first-child{ background:var(--ui-surface) !important; color:var(--ui-text-1) !important; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #bank-match-modal > div > div:first-child h3{ font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important }
html #bank-match-modal > div > div:first-child p, html #bank-match-modal > div > div:first-child .text-slate-300{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #bank-match-modal > div > div:first-child .text-white{ color:var(--ui-text-1) !important }
html #bank-match-modal > div > div:first-child button[onclick*="bank-match-modal"]{
  width:28px !important; height:28px !important; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-title3) !important;
}
html #bank-match-modal > div > div:first-child [class*="bg-white/10"]{ background:var(--ui-fill-subtle) !important; border-color:var(--ui-line) !important; color:var(--ui-text-1) !important }
/* 왼쪽: 현재 계약 배정 */
html #bank-match-modal .bank-match-side{ background:var(--ui-surface-alt) !important; border-color:var(--ui-line) !important }
html #bank-match-modal .bank-match-side-label{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; letter-spacing:0 !important; color:var(--ui-text-2) !important }
html #bank-match-modal .bank-match-side-amount{ font-size:var(--ui-text-large) !important; font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important; letter-spacing:var(--ui-tracking-tight) !important }
html #bank-match-modal .bank-match-side-amount small{ font-size:var(--ui-text-body) !important; color:var(--ui-text-2) !important }
html #bank-match-modal .bank-match-timeline b{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
html #bank-match-modal .bank-match-timeline span{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #bank-match-modal .bank-match-side-note{ background:var(--ui-accent-tint) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; border-radius:var(--ui-radius-group) !important }
html #bank-match-modal .bank-match-warning{ background:var(--ui-danger-tint) !important; color:var(--ui-danger) !important; border-radius:var(--ui-radius-group) !important }
/* 조회 조건 */
html #bank-match-modal .bg-slate-50, html #bank-match-modal .bg-gray-50{ background:var(--ui-surface-alt) !important }
html #bank-match-modal .border-b, html #bank-match-modal .border-t, html #bank-match-modal .border, html #bank-match-modal .border-gray-200,
html #bank-match-modal .border-gray-300, html #bank-match-modal .border-slate-200, html #bank-match-modal .border-blue-100{ border-color:var(--ui-line) !important }
html #bank-match-modal input[type=date], html #bank-match-modal input[type=text]{
  height:var(--ui-control); background:var(--ui-surface) !important; border:var(--ui-hairline) solid var(--ui-line-control) !important;
  border-radius:var(--ui-radius-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important;
}
html #bank-match-modal input:focus{ border-color:var(--ui-accent) !important; box-shadow:var(--ui-focus-ring) !important; outline:none !important }
html #bank-match-modal input[type=checkbox]{ accent-color:var(--ui-accent) }
/* '조회'는 회색 버튼 — 채운 파랑은 '매칭 확정' 하나 */
html #bank-match-modal button[onclick^="fetchBankMatchList"]{
  height:var(--ui-control); background:var(--ui-fill) !important; color:var(--ui-text-1) !important; border-radius:var(--ui-radius-control) !important;
  font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important;
}
html #bank-match-modal button[onclick^="fetchBankMatchList"]:hover{ background:var(--ui-fill-hover) !important }
/* 빠른 기간 칩: 회색, 고른 칩은 연한 파랑 */
html #bank-match-modal button[onclick^="bmSetPeriod"]{
  min-height:24px; padding:0 9px !important; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill) !important; color:var(--ui-text-1) !important;
  font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important;
}
html #bank-match-modal button[onclick^="bmSetPeriod"].bg-blue-100{ background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important }
/* 계좌 · 레그 표시 칩 */
html #bank-match-modal .rounded-full.bg-emerald-100, html #bank-match-modal .rounded-full.bg-orange-100{ border:0 !important }
html #bank-match-modal .bg-emerald-100, html #bank-match-modal .bg-green-100{ background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important }
/* 주의 바탕 위 작은 글자는 주의색이 4.5:1에 못 미쳐 본문색으로 쓴다 */
html #bank-match-modal span.bg-orange-100.bg-orange-100, html #bank-match-modal span.bg-amber-100.bg-amber-100, html #bank-match-modal span.bg-yellow-100.bg-yellow-100,
html #bank-match-modal .bg-orange-100, html #bank-match-modal .bg-amber-100, html #bank-match-modal .bg-yellow-100,
html #bank-match-modal .bg-orange-100 *, html #bank-match-modal .bg-amber-100 *, html #bank-match-modal .bg-yellow-100 *{ background-color:var(--ui-warning-tint); color:var(--ui-text-1) !important }
html #bank-match-modal .bg-orange-100 *, html #bank-match-modal .bg-amber-100 *, html #bank-match-modal .bg-yellow-100 *{ background-color:transparent }
html #bank-match-modal .bg-violet-50{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important; border-color:transparent !important }
html #bank-match-modal .bg-red-100, html #bank-match-modal .bg-rose-50{ background:var(--ui-danger-tint) !important; color:var(--ui-danger) !important; border-color:transparent !important }
/* 글자 크기 · 색 */
html #bank-match-modal .text-\[9px\], html #bank-match-modal .text-\[10px\], html #bank-match-modal .text-\[11px\]{ font-size:var(--ui-text-caption) !important }
html #bank-match-modal .text-\[12px\], html #bank-match-modal .text-xs{ font-size:var(--ui-text-footnote) !important }
html #bank-match-modal .text-sm{ font-size:var(--ui-text-body) !important }
html #bank-match-modal .font-extrabold{ font-weight:var(--ui-weight-bold) !important }
html #bank-match-modal .font-medium{ font-weight:var(--ui-weight-regular) !important }
html #bank-match-modal .text-gray-800, html #bank-match-modal .text-gray-700, html #bank-match-modal .text-slate-800, html #bank-match-modal .text-slate-700{ color:var(--ui-text-1) !important }
html #bank-match-modal .text-gray-600, html #bank-match-modal .text-gray-500, html #bank-match-modal .text-gray-400,
html #bank-match-modal .text-slate-600, html #bank-match-modal .text-slate-500, html #bank-match-modal .text-slate-400{ color:var(--ui-text-2) !important }
html #bank-match-modal .text-gray-300{ color:var(--ui-text-2) !important }
html #bank-match-modal .text-blue-600, html #bank-match-modal .text-blue-700{ color:var(--ui-accent-text) !important }
html #bank-match-modal .text-emerald-600, html #bank-match-modal .text-emerald-700, html #bank-match-modal .text-green-600, html #bank-match-modal .text-green-700{ color:var(--ui-text-1) !important }
html #bank-match-modal .text-orange-600, html #bank-match-modal .text-orange-700, html #bank-match-modal .text-amber-600, html #bank-match-modal .text-amber-700{ color:var(--ui-warning) !important }
html #bank-match-modal .text-red-500, html #bank-match-modal .text-red-600, html #bank-match-modal .text-rose-700{ color:var(--ui-danger) !important }
/* 입금 목록 줄: 고른 줄 · 이 계약에 연결된 줄은 연한 파랑, 일부 사용 중은 주의색 바탕, 다 쓴 줄은 흐리게 */
html #bank-match-modal #bm-list > div, html #bank-match-modal #bm-list .space-y-0\.5{ font-size:var(--ui-text-footnote) }
html #bank-match-modal [id^="bm-row-"]{ border-radius:var(--ui-radius-control) !important; min-height:var(--ui-row); box-shadow:none !important; border:var(--ui-hairline) solid transparent !important }
html #bank-match-modal [id^="bm-row-"]:hover{ background:var(--ui-fill-subtle) !important; border-color:var(--ui-line) !important }
html #bank-match-modal [id^="bm-row-"].bg-emerald-50, html #bank-match-modal [id^="bm-row-"].bg-emerald-100{ background:var(--ui-accent-tint) !important; border-color:var(--ui-accent) !important }
html #bank-match-modal [id^="bm-row-"][class*="bg-amber-50"]{ background:var(--ui-warning-tint) !important }
html #bank-match-modal [id^="bm-row-"].bg-slate-50{ background:var(--ui-fill-subtle) !important; opacity:1 !important; color:var(--ui-text-2) }
html #bank-match-modal [id^="bm-row-"] .font-mono{ font-family:var(--ui-font-mono) !important }
html #bank-match-modal [id^="bm-row-"] [class*="rounded"][class*="px-1"]{ border-radius:var(--ui-radius-row) !important; animation:none !important }
html #bank-match-modal [id^="bm-row-"] .bg-emerald-600{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important }
html #bank-match-modal [id^="bm-row-"] .bg-amber-500{ background:var(--ui-warning-dot) !important }
html #bank-match-modal [id^="bm-row-"] .bg-gray-200{ background:var(--ui-fill) !important }
/* 선택 합계 바: 무지개 → 옅은 회색 */
html #bank-match-modal #bm-selection-bar{ background:var(--ui-surface-alt) !important; border-color:var(--ui-line) !important }
html #bank-match-modal #bm-sel-total{ color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important }
html #bank-match-modal #bm-confirm-btn{
  height:var(--ui-control); padding:0 14px !important; border:0 !important; background:var(--ui-accent) !important; color:var(--ui-on-accent) !important;
  border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; box-shadow:none !important;
  transition:none !important; animation:none !important; opacity:1 !important;
}
html #bank-match-modal #bm-confirm-btn:hover:not(:disabled){ background:var(--ui-accent-hover) !important }
html #bank-match-modal #bm-confirm-btn:disabled{ background:var(--ui-fill) !important; color:var(--ui-text-2) !important; opacity:1 !important }
html #bank-match-modal #bm-refresh-banner{ font-size:var(--ui-text-footnote) !important; border-color:var(--ui-line) !important }
/* 아래 '닫기' 회색 */
html #bank-match-modal > div > div:last-child button{
  height:var(--ui-control); border:0 !important; background:var(--ui-fill) !important; color:var(--ui-text-1) !important;
  border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important;
}
html #bank-match-modal > div > div:last-child button:hover{ background:var(--ui-fill-hover) !important }
html #bank-match-modal button:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) !important }
html #bank-match-modal .rounded-lg, html #bank-match-modal .rounded-md, html #bank-match-modal .rounded{ border-radius:var(--ui-radius-control) }

/* ━━ 3. 계약 취소 · 취소 되돌리기 ━━ */
html #sales-cancel-overlay{ background:var(--ui-scrim) !important }
html #sales-cancel-overlay > div{ background:var(--ui-surface) !important }
html #sales-cancel-overlay #sales-cancel-title{ font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important }
html #sales-cancel-overlay > div > div{ border-color:var(--ui-line) !important }
html #sales-cancel-overlay > div > div:nth-child(2){ font-size:var(--ui-text-body) !important; color:var(--ui-text-1) !important; line-height:var(--ui-leading-read) !important }
html #sales-cancel-overlay > div > div:last-child{ background:var(--ui-surface) !important }
html #sales-cancel-overlay .text-\[12px\], html #sales-cancel-overlay .text-\[12\.5px\], html #sales-cancel-overlay .text-\[13px\]{ font-size:var(--ui-text-footnote) !important }
html #sales-cancel-overlay .text-slate-900, html #sales-cancel-overlay .text-slate-800{ color:var(--ui-text-1) !important }
html #sales-cancel-overlay .text-slate-700, html #sales-cancel-overlay .text-slate-600{ color:var(--ui-text-2) !important }
html #sales-cancel-overlay .font-bold{ font-weight:var(--ui-weight-semibold) !important }
html #sales-cancel-overlay .bg-slate-50, html #sales-cancel-overlay .bg-slate-100{ background:var(--ui-fill-subtle) !important }
html #sales-cancel-overlay .rounded-xl{ border-radius:var(--ui-radius-group) !important }
html #sales-cancel-overlay input, html #sales-cancel-overlay textarea{
  background:var(--ui-surface) !important; border:var(--ui-hairline) solid var(--ui-line-control) !important; border-radius:var(--ui-radius-control) !important;
  color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; box-shadow:none !important;
}
html #sales-cancel-overlay input{ min-height:var(--ui-control) }
html #sales-cancel-overlay input::placeholder, html #sales-cancel-overlay textarea::placeholder{ color:var(--ui-text-3) !important; opacity:1 }
html #sales-cancel-overlay input:focus, html #sales-cancel-overlay textarea:focus{ border-color:var(--ui-accent) !important; box-shadow:var(--ui-focus-ring) !important; outline:none !important }
html #sales-cancel-overlay .text-rose-600, html #sales-cancel-overlay .text-rose-700{ color:var(--ui-danger) !important }
html #sales-cancel-overlay #sales-cancel-error{ background:var(--ui-danger-tint) !important; color:var(--ui-danger) !important; border-radius:var(--ui-radius-control) !important }
html #sales-cancel-overlay > div > div:last-child button{
  height:var(--ui-control); padding:0 14px !important; border:0 !important; border-radius:var(--ui-radius-control) !important;
  font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; background:var(--ui-fill) !important; color:var(--ui-text-1) !important;
}
html #sales-cancel-overlay > div > div:last-child button:hover{ background:var(--ui-fill-hover) !important }
/* 확정 버튼: 취소는 빨강(되돌리기 가능하지만 합계에서 빠지는 일), 되돌리기는 파랑 */
html #sales-cancel-overlay #sales-cancel-submit.bg-rose-600{ background:var(--ui-danger) !important; color:var(--ui-on-accent) !important }
html #sales-cancel-overlay #sales-cancel-submit.bg-blue-600{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important }
html #sales-cancel-overlay #sales-cancel-submit:disabled{ background:var(--ui-fill) !important; color:var(--ui-text-2) !important }
html #sales-cancel-overlay button:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) !important }

/* ── 4. 모바일: 누르기 쉬운 높이 ── */
@media (max-width:767px){
  html #bank-match-modal input[type=date], html #bank-match-modal input[type=text], html #bank-match-modal #bm-confirm-btn,
  html #sales-cancel-overlay input, html #sales-cancel-overlay > div > div:last-child button,
  html #ct-ti-action-menu > div > div:last-child button{ min-height:var(--ui-control-mobile) }
  html #bank-match-modal [id^="bm-row-"]{ min-height:var(--ui-target-min) }
}
@media (prefers-reduced-motion:reduce){
  html #ct-ti-action-menu *, html #bank-match-modal *, html #sales-cancel-overlay *{ transition-duration:0ms !important; animation:none !important }
}

/* ━━ 4. 발행된 세금계산서 보기 — 맥 '훑어보기' 창 + 팝빌 화면 그대로 ━━ */
html #ct-ti-viewer-modal{ background:var(--ui-scrim) !important; padding:16px }
html #ct-ti-viewer-modal *:not(i){ font-family:var(--ui-font) }
html #ct-ti-viewer-modal .ctv-win{
  display:flex; flex-direction:column; width:min(1060px,100%); height:min(900px,92vh); overflow:hidden;
  background:var(--ui-surface); border-radius:var(--ui-radius-sheet); box-shadow:var(--ui-elev-sheet); color:var(--ui-text-1); font-size:var(--ui-text-body);
}
html #ct-ti-viewer-modal .ctv-titlebar{ display:flex; align-items:center; gap:12px; height:44px; padding:0 12px 0 16px; background:var(--ui-surface-alt); border-bottom:var(--ui-hairline) solid var(--ui-line); flex:none }
html #ct-ti-viewer-modal .ctv-lights{ display:flex; gap:8px }
html #ct-ti-viewer-modal .ctv-lights i{ width:12px; height:12px; border-radius:50%; display:block }
html #ct-ti-viewer-modal .ctv-lights i:nth-child(1){ background:var(--ui-danger-dot) }
html #ct-ti-viewer-modal .ctv-lights i:nth-child(2){ background:var(--ui-warning-dot) }
html #ct-ti-viewer-modal .ctv-lights i:nth-child(3){ background:var(--ui-success-dot) }
html #ct-ti-viewer-modal .ctv-title{ font-weight:var(--ui-weight-bold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
html #ct-ti-viewer-modal .ctv-sub{ font-size:var(--ui-text-footnote); color:var(--ui-text-2); white-space:nowrap }
html #ct-ti-viewer-modal .ctv-x{ margin-left:auto; width:28px; height:28px; border:0; border-radius:var(--ui-radius-pill); background:var(--ui-fill); color:var(--ui-text-2); font-size:var(--ui-text-title3); line-height:1; cursor:pointer; flex:none }
html #ct-ti-viewer-modal .ctv-x:hover{ background:var(--ui-fill-hover) }
html #ct-ti-viewer-modal .ctv-tools{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:var(--ui-hairline) solid var(--ui-line); flex:none; flex-wrap:nowrap }
html #ct-ti-viewer-modal .ctv-tools > *{ flex:none }
html #ct-ti-viewer-modal .ctv-tools > .ctv-src{ flex:1 1 auto }
html #ct-ti-viewer-modal .ctv-src{ margin-right:auto; font-size:var(--ui-text-footnote); color:var(--ui-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
html #ct-ti-viewer-modal .ctv-src b, html #ct-ti-viewer-modal .ctv-mono{ font-family:var(--ui-font-mono); color:var(--ui-text-1); font-weight:var(--ui-weight-semibold) }
html #ct-ti-viewer-modal .ctv-seg{ display:inline-flex; padding:2px; gap:2px; border-radius:var(--ui-radius-control); background:var(--ui-fill) }
html #ct-ti-viewer-modal .ctv-seg button{ height:24px; padding:0 12px; border:0; border-radius:5px; background:transparent; color:var(--ui-text-1); font-size:var(--ui-text-footnote); cursor:pointer }
html #ct-ti-viewer-modal .ctv-seg button.on{ background:var(--ui-surface); box-shadow:var(--ui-elev-control); font-weight:var(--ui-weight-semibold) }
html #ct-ti-viewer-modal .ctv-btn{ display:inline-flex; align-items:center; justify-content:center; height:var(--ui-control); padding:0 12px; border:0; border-radius:var(--ui-radius-control);
  background:var(--ui-fill); color:var(--ui-text-1); font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold); cursor:pointer; text-decoration:none; white-space:nowrap }
html #ct-ti-viewer-modal .ctv-btn:hover{ background:var(--ui-fill-hover) }
html #ct-ti-viewer-modal .ctv-btn:disabled{ color:var(--ui-text-3); cursor:default; background:var(--ui-fill-subtle) }
html #ct-ti-viewer-modal .ctv-btn.default{ background:var(--ui-accent); color:var(--ui-on-accent); min-width:84px }
html #ct-ti-viewer-modal .ctv-btn.default:hover{ background:var(--ui-accent-hover) }
html #ct-ti-viewer-modal .ctv-btn.danger{ color:var(--ui-danger) }
html #ct-ti-viewer-modal button:focus-visible, html #ct-ti-viewer-modal a:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
html #ct-ti-viewer-modal .ctv-stage{ position:relative; flex:1; min-height:0; overflow:auto; background:var(--ui-bg) }
html #ct-ti-viewer-modal .ctv-holder{ display:flex; justify-content:center; padding:16px }
html #ct-ti-viewer-modal .ctv-scale{ overflow:hidden; flex:none; background:var(--ui-surface); box-shadow:var(--ui-elev-raised) }
html #ct-ti-viewer-modal .ctv-frame{ display:block; border:0; background:var(--ui-surface); transform-origin:top left }
html #ct-ti-viewer-modal .ctv-stage:not([data-st="ok"]) .ctv-holder{ visibility:hidden; height:0; padding:0 }
html #ct-ti-viewer-modal .ctv-state{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:100%; padding:28px; text-align:center }
html #ct-ti-viewer-modal .ctv-stage[data-st="loading"] .ctv-loading, html #ct-ti-viewer-modal .ctv-stage[data-st="error"] .ctv-error{ display:flex }
html #ct-ti-viewer-modal .ctv-state p{ margin:0; font-size:var(--ui-text-callout) }
html #ct-ti-viewer-modal .ctv-state small{ max-width:460px; font-size:var(--ui-text-footnote); color:var(--ui-text-2); line-height:var(--ui-leading-read) }
html #ct-ti-viewer-modal .ctv-spin{ width:22px; height:22px; border-radius:50%; border:2.5px solid var(--ui-fill); border-top-color:var(--ui-accent); animation:ctv-spin .8s linear infinite }
@keyframes ctv-spin{ to{ transform:rotate(360deg) } }
html #ct-ti-viewer-modal .ctv-sum{ width:min(360px,100%); background:var(--ui-surface); border-radius:var(--ui-radius-group); text-align:left }
html #ct-ti-viewer-modal .ctv-sum:empty{ display:none }
html #ct-ti-viewer-modal .ctv-kv{ display:flex; justify-content:space-between; gap:12px; min-height:32px; align-items:center; padding:0 14px; font-size:var(--ui-text-body) }
html #ct-ti-viewer-modal .ctv-kv + .ctv-kv{ border-top:var(--ui-hairline) solid var(--ui-line) }
html #ct-ti-viewer-modal .ctv-kv span{ color:var(--ui-text-2) }
html #ct-ti-viewer-modal .ctv-kv b{ font-weight:var(--ui-weight-semibold); font-variant-numeric:tabular-nums }
html #ct-ti-viewer-modal [hidden]{ display:none !important }
html #ct-ti-viewer-modal .ctv-acts{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
html #ct-ti-viewer-modal .ctv-foot{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:var(--ui-hairline) solid var(--ui-line); flex:none }
html #ct-ti-viewer-modal .ctv-gap{ flex:1 }
@media (max-width:767px){
  html #ct-ti-viewer-modal{ padding:0 }
  html #ct-ti-viewer-modal .ctv-win{ width:100%; height:100%; border-radius:0 }
  html #ct-ti-viewer-modal .ctv-sub{ display:none }
  html #ct-ti-viewer-modal .ctv-tools{ flex-wrap:wrap }
  html #ct-ti-viewer-modal .ctv-seg{ display:none }   /* 휴대폰은 화면 폭에 맞춰 보여 주므로 배율 버튼이 뜻이 없다 */
  html #ct-ti-viewer-modal .ctv-src{ width:100%; margin-right:0 }
  html #ct-ti-viewer-modal .ctv-btn{ min-height:var(--ui-control-mobile) }
  html #ct-ti-viewer-modal .ctv-foot{ flex-wrap:wrap }
  html #ct-ti-viewer-modal .ctv-foot .default{ flex:1 }
}
@media (prefers-reduced-motion:reduce){ html #ct-ti-viewer-modal .ctv-spin{ animation-duration:2.4s } }

/* ━━ 세금계산서 매칭 창(#ct-ti-match-modal) — 맥 시트 (사용자: 인트라넷 전체 맥 디자인 2026-10-28) ━━
   진한 남색 머리 띠 → 흰 머리 + 본문색 제목(입금 매칭 창과 같게). 채운 단추는 '조회' 하나, '수집 업데이트'는 회색 칸. */
html #ct-ti-match-modal > div{ border-radius:var(--ui-radius-sheet) !important; box-shadow:var(--ui-elev-sheet) !important; border:0 !important; font-family:var(--ui-font) }
html #ct-ti-match-modal .ct-match-header{ background:var(--ui-surface) !important; color:var(--ui-text-1) !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html #ct-ti-match-modal .ct-match-header h3{ color:var(--ui-text-1) !important; font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-bold) !important }
html #ct-ti-match-modal .ct-match-header p{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #ct-ti-match-modal .ct-match-header button{ width:28px !important; height:28px !important; border:0 !important; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill) !important; color:var(--ui-text-2) !important }
html #ct-ti-match-modal #ct-match-search-btn{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; border:0 !important; border-radius:var(--ui-radius-control) !important; height:38px }
html #ct-ti-match-modal #ct-match-search-btn:hover{ background:var(--ui-accent-hover) !important }
html #ct-ti-match-modal #ct-match-sync-btn{ background:var(--ui-surface) !important; color:var(--ui-text-1) !important; border:0 !important; box-shadow:var(--ui-elev-control) !important; border-radius:var(--ui-radius-control) !important; height:38px; font-size:var(--ui-text-body) !important }
html #ct-ti-match-modal #ct-match-sync-btn i{ color:var(--ui-text-2) !important }
html #ct-ti-match-modal input:not([type="checkbox"]):not([type="radio"]){ border:0 !important; box-shadow:var(--ui-elev-field) !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; height:38px }
html #ct-ti-match-modal input:not([type="checkbox"]):not([type="radio"]):focus{ outline:none !important; box-shadow:var(--ui-focus-ring) !important }
html #ct-ti-match-modal label{ color:var(--ui-text-2) !important; font-weight:var(--ui-weight-semibold) !important }
html #ct-ti-match-modal .bg-gray-50{ background:var(--ui-surface-alt) !important }
html #ct-ti-match-modal [class*="border-gray-1"], html #ct-ti-match-modal [class*="border-slate-2"]{ border-color:var(--ui-line) !important }


/* ━━ 확인·관리 '예정일 등록'(#acfu-overlay) — 맥 시트. 칩 = 둥근 단추, 선택 = 시스템 파랑 테두리, 채운 버튼은 [등록] 하나 ━━ */
html #acfu-overlay{ background:var(--ui-scrim) !important }
html #acfu-overlay *:not(i):not(.fas):not(.far):not(.fa){ font-family:var(--ui-font) !important }
html #acfu-overlay .acfu-modal{ max-width:400px; padding:16px 18px 14px !important; border:0 !important; border-radius:var(--ui-radius-sheet) !important; box-shadow:var(--ui-elev-sheet) !important; color:var(--ui-text-1) }
html #acfu-overlay .acfu-t{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #acfu-overlay .acfu-s{ font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important }
html #acfu-overlay .acfu-g{ margin:12px 0 6px !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important; letter-spacing:0 !important; color:var(--ui-text-2) !important }
html #acfu-overlay .acfu-chip{ height:var(--ui-control) !important; padding:0 11px !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 }
html #acfu-overlay .acfu-chip.on{ background:var(--ui-accent-tint) !important; box-shadow:inset 0 0 0 1px var(--ui-accent-system) !important; color:var(--ui-accent-text) !important; font-weight:var(--ui-weight-semibold) !important }
html #acfu-overlay .acfu-inp{ height:var(--ui-control) !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; font-size:var(--ui-text-footnote) !important; color:var(--ui-text-1) !important }
html #acfu-overlay .acfu-inp:focus{ box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
html #acfu-overlay .acfu-prev{ margin-top:12px !important; padding:8px 11px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-fill-subtle) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #acfu-overlay .acfu-foot{ margin-top:14px !important; gap:8px !important }
html #acfu-overlay .acfu-btn{ height:var(--ui-control) !important; 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 #acfu-overlay .acfu-btn i{ display:none }
html #acfu-overlay .acfu-btn.pri{ background:var(--ui-accent) !important; box-shadow:none !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-semibold) !important }
html #acfu-overlay .acfu-btn.danger{ color:var(--ui-danger) !important }
@media (hover:hover){ html #acfu-overlay .acfu-btn:hover, html #acfu-overlay .acfu-chip:hover:not(.on){ background:var(--ui-fill-subtle) !important } html #acfu-overlay .acfu-btn.pri:hover{ background:var(--ui-accent-hover) !important } }
@media (max-width:767px){ html #acfu-overlay .acfu-chip, html #acfu-overlay .acfu-inp, html #acfu-overlay .acfu-btn{ height:var(--ui-control-mobile) !important } html #acfu-overlay .acfu-inp{ font-size:16px !important } }

/* ━━ 계약 상세 창(#sales-doc-modal · 칸반 · 카드 보기에서 카드 누르면) — 맥 시트. 단추 · 내용 그대로, 휴대폰은 아래에서 올라오는 시트 ━━ */
html #sales-doc-modal{ background:var(--ui-scrim) !important }
html #sales-doc-modal *:not(i):not(.fas):not(.far):not(.fa){ font-family:var(--ui-font) !important }
html #sales-doc-modal > div{ max-width:600px !important; border-radius:var(--ui-radius-sheet) !important; box-shadow:var(--ui-elev-sheet) !important; color:var(--ui-text-1) }
html #sales-doc-modal > div > div:first-child{ height:48px; padding:0 14px 0 18px !important; border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html #sales-doc-modal > div > div:first-child > div:first-child{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #sales-doc-modal > div > div:first-child > div:first-child i{ display:none }
html #sales-doc-modal > div > div:first-child button:not(:last-child){ height:var(--ui-control-sm); 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 }
html #sales-doc-modal > div > div:first-child button:not(:last-child) i{ display:none }
html #sales-doc-modal > div > div:first-child button:last-child{ width:24px !important; height:24px !important; border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill) !important; color:var(--ui-text-2) !important; font-size:11px }
html #sales-doc-modal .p-6{ padding:12px 18px 18px !important; scrollbar-gutter:stable }
html #sales-doc-modal [id^="sales-latest-change-"]{ margin-bottom:10px !important; padding:6px 10px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-bg) !important; font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #sales-doc-modal .text-\[20px\]{ font-size:var(--ui-text-title2, 17px) !important; font-weight:var(--ui-weight-semibold) !important; letter-spacing:0 !important; color:var(--ui-text-1) !important }
html #sales-doc-modal .text-\[13px\]{ font-size:var(--ui-text-footnote) !important; color:var(--ui-text-2) !important }
html #sales-doc-modal .pb-4.border-b{ padding-bottom:10px !important; border-color:var(--ui-line) !important }
html #sales-doc-modal .font-mono{ border:0 !important; background:transparent !important; padding:0 !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important; font-family:var(--ui-font-mono) !important }
html #sales-doc-modal .grid.grid-cols-2{ gap:0 18px !important; padding:6px 0 !important; margin:0 0 10px; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #sales-doc-modal .grid.grid-cols-2 > div{ height:28px; align-items:center; font-size:var(--ui-text-footnote) !important }
html #sales-doc-modal .grid.grid-cols-2 .text-gray-400{ color:var(--ui-text-2) !important }
html #sales-doc-modal .grid.grid-cols-2 .font-semibold{ font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #sales-doc-modal .bg-gray-50.rounded-lg{ background:var(--ui-bg) !important; border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-footnote) !important; color:var(--ui-text-1) !important; margin-bottom:10px !important }
html #sales-doc-modal .bg-gray-50.rounded-lg b{ font-weight:var(--ui-weight-semibold) !important; font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #sales-doc-modal .text-\[12px\].font-bold.mb-2{ margin-bottom:4px !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-2) !important }
html #sales-doc-modal .text-\[12px\].font-bold.mb-2 i{ display:none }
html #sales-doc-modal table{ margin-bottom:8px !important }
html #sales-doc-modal thead tr{ border-bottom:var(--ui-hairline) solid var(--ui-line) !important }
html #sales-doc-modal th{ height:26px; padding:0 6px !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #sales-doc-modal td{ height:30px; padding:0 6px !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important; font-variant-numeric:tabular-nums }
html #sales-doc-modal td:first-child{ color:var(--ui-text-3) !important }
html #sales-doc-modal tbody tr{ border-color:var(--ui-line) !important }
html #sales-doc-modal td .text-\[10\.5px\]{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #sales-doc-modal .flex-col.items-end{ gap:0 !important; padding-top:6px !important; border-color:var(--ui-line) !important; font-size:var(--ui-text-footnote) !important }
html #sales-doc-modal .flex-col.items-end > div{ height:24px; align-items:center; width:220px !important }
html #sales-doc-modal .flex-col.items-end .text-gray-400{ color:var(--ui-text-2) !important }
html #sales-doc-modal .flex-col.items-end .font-semibold{ font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #sales-doc-modal .flex-col.items-end > div:last-child{ height:30px; margin-top:2px !important; padding-top:0 !important; border-color:var(--ui-line) !important }
html #sales-doc-modal .flex-col.items-end > div:last-child span{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #sales-doc-modal .mt-4.pt-3.border-t{ margin-top:10px !important; padding-top:10px !important; border-color:var(--ui-line) !important; gap:14px !important }
html #sales-doc-modal .mt-4.pt-3.border-t > span{ padding:0 !important; background:transparent !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #sales-doc-modal .mt-4.pt-3.border-t > span i{ font-size:11px; color:var(--ui-text-3) } html #sales-doc-modal .mt-4.pt-3.border-t > span i.fa-circle-check{ color:var(--ui-success) }
/* 아직 안 한 단계: 꽉 찬 회색 동그라미 → 속 빈 동그라미(상세 칸 · 펼친 줄과 같은 모양) */
html #sales-doc-modal .mt-4.pt-3.border-t > span i.fa-circle{ display:inline-block; width:11px; height:11px; border-radius:50%; color:transparent !important; box-shadow:inset 0 0 0 1px var(--ui-line-dashed) }
html #sales-doc-modal .mt-4.pt-3.border-t > span i.fa-circle::before{ content:none }
@media (max-width:767px){
  html #sales-doc-modal{ align-items:flex-end !important; padding:0 !important }
  html #sales-doc-modal > div{ max-width:none !important; max-height:88vh !important; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 !important }
  html #sales-doc-modal .grid.grid-cols-2{ grid-template-columns:1fr !important }
  html #sales-doc-modal .grid.grid-cols-2 > div{ height:40px }
  html #sales-doc-modal table{ width:100% }
}