/* =============================================================
   계약관리에서 여는 '전자세금계산서 발행' 창(#ct-tax-invoice-modal) — 공통 화면 규칙
   이 창은 세금계산서 화면의 발행 서식(#ti-panel-issue)을 그대로 옮겨 와 보여준다.
   그래서 서식 규칙은 ui-skin-tax-invoice.css 의 발행 서식 규칙과 같아야 한다(아래 2절 — 테스트가 같은지 확인).
   입력 칸 · 버튼 · 문구 · 발행 동작은 그대로. 창 틀 · 머리 · 아래 버튼 모양만 규칙으로.
   - 머리: 연파랑 띠 + 그림자 진 파란 아이콘 → 흰 머리 + 파란 아이콘 칸, 거래처 이름은 검정
   - 아래 버튼: 취소 · 초기화 회색, '발행 미리보기'만 채운 파랑
   되돌리기: index.tsx 의 이 파일 <link> 한 줄을 빼면 원래 모양.
   ============================================================= */

/* ── 1. 창 틀 · 머리 · 아래 막대 ── */
html #ct-tax-invoice-modal > div{ border-radius:var(--ui-radius-sheet) !important; box-shadow:var(--ui-elev-sheet) !important; font-family:var(--ui-font); background:var(--ui-bg) !important }
html #ct-tax-invoice-modal > div > div:first-child{ background:var(--ui-surface) !important; border-color:var(--ui-line) !important; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 !important }
html #ct-tax-invoice-modal > div > div:first-child .rounded-2xl{ width:36px !important; height:36px !important; border-radius:var(--ui-radius-card) !important; background:var(--ui-accent) !important; box-shadow:none !important }
html #ct-tax-invoice-modal > div > div:first-child .rounded-2xl i{ font-size:var(--ui-text-callout) !important }
html #ct-tax-invoice-modal > div > div:first-child p{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #ct-tax-invoice-modal > div > div:first-child p.text-rose-600{ color:var(--ui-danger) !important }
html #ct-tax-invoice-modal > div > div:first-child h3{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important }
html #ct-tax-invoice-modal #ct-ti-close-btn{ width:var(--ui-target-min); height:var(--ui-target-min); border-radius:var(--ui-radius-pill); background:var(--ui-fill) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-callout) !important }
html #ct-tax-invoice-modal > div > div:last-child{ background:var(--ui-surface) !important; border-color:var(--ui-line) !important; border-radius:0 0 var(--ui-radius-sheet) var(--ui-radius-sheet) !important }
html #ct-tax-invoice-modal > div > div:last-child button{
  min-height:var(--ui-control); padding:0 18px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:none !important; transform:none !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 #ct-tax-invoice-modal > div > div:last-child button[onclick^="ctTiShowConfirmAndIssue"]{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important }
html #ct-tax-invoice-modal > div > div:last-child button[onclick^="ctTiShowConfirmAndIssue"]:hover{ background:var(--ui-accent-hover) !important }
/* 서식은 흰 종이 한 장으로(창 바탕은 연회색) */
html #ct-tax-invoice-modal #ct-ti-mount{ padding:16px !important }

/* ── 2. 발행 서식 — ui-skin-tax-invoice.css 발행 서식 규칙과 같게(범위만 이 창) ── */
html #ct-tax-invoice-modal input:not([type=checkbox]):not([type=radio]):not([type=hidden]), html #ct-tax-invoice-modal select, html #ct-tax-invoice-modal textarea{ border:0 !important; box-shadow:var(--ui-elev-field) !important; border-radius:var(--ui-radius-row) !important; background-color:var(--ui-surface) !important;
  color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important; }
html #ct-tax-invoice-modal input:not([type=checkbox]):not([type=radio]):focus, html #ct-tax-invoice-modal select:focus, html #ct-tax-invoice-modal textarea:focus{ box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important; outline:none !important }
html #ct-tax-invoice-modal input[readonly]{ background-color:var(--ui-fill-subtle) !important; color:var(--ui-text-2) !important; box-shadow:none !important }
html #ct-tax-invoice-modal select{ font-size:var(--ui-text-footnote) !important; min-height:var(--ui-control-sm) }
html #ct-tax-invoice-modal #ti-panel-issue .tid-paper{ border:0 !important; box-shadow:var(--ui-elev-raised) !important; border-radius:var(--ui-radius-panel) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-title{ font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-brand .b1{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-bold) !important; font-size:var(--ui-text-caption) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-brand .b2{ color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important; letter-spacing:0 !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-rule{ height:1px !important; background:var(--ui-accent) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-box, html #ct-tax-invoice-modal #ti-panel-issue .tid-items-box{ border:var(--ui-hairline) solid var(--ui-line-control) !important; border-radius:var(--ui-radius-control); overflow:hidden }
html #ct-tax-invoice-modal #ti-panel-issue .tid-tbl td, html #ct-tax-invoice-modal #ti-panel-issue .tid-items th, html #ct-tax-invoice-modal #ti-panel-issue .tid-items td,
html #ct-tax-invoice-modal #ti-panel-issue .tid-totals td{ border-color:var(--ui-line) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-lbl, html #ct-tax-invoice-modal #ti-panel-issue .tid-vlabel, html #ct-tax-invoice-modal #ti-panel-issue .tid-items th, html #ct-tax-invoice-modal #ti-panel-issue .tid-totals .tl{ background:var(--ui-surface-alt) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; }
html #ct-tax-invoice-modal #ti-panel-issue .tid-fixed{ font-size:var(--ui-text-footnote) !important; color:var(--ui-text-1) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-totals .tv{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important; font-variant-numeric:tabular-nums }
html #ct-tax-invoice-modal #ti-panel-issue .tid-totals tr:last-child .tv{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-inp.sm{ font-size:var(--ui-text-footnote) !important; min-height:26px }
html #ct-tax-invoice-modal #ti-panel-issue .tid-items input[type=date]{ font-size:var(--ui-text-caption) !important; padding:3px 2px 3px 4px !important; letter-spacing:-.3px !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-items input[type=date]::-webkit-calendar-picker-indicator{ margin:0; padding:0; width:10px }
html #ct-tax-invoice-modal #ti-panel-issue table.tid-totals{ border:var(--ui-hairline) solid var(--ui-line-control) !important; border-collapse:separate !important; border-spacing:0; border-radius:var(--ui-radius-control); overflow:hidden }
html #ct-tax-invoice-modal #ti-panel-issue table.tid-totals tr + tr td{ border-top:var(--ui-hairline) solid var(--ui-line) }
html #ct-tax-invoice-modal #ti-panel-issue table.tid-totals .tl{ border-right:var(--ui-hairline) solid var(--ui-line) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-recipient-none{ border:var(--ui-hairline) dashed var(--ui-line-dashed) !important; color:var(--ui-text-2) !important; border-radius:var(--ui-radius-control); font-size:var(--ui-text-footnote) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-field > label{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important; font-size:var(--ui-text-footnote) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-field > label span{ color:var(--ui-text-2) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-stamp-line .co{ font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-del{ color:var(--ui-text-3) !important; display:inline-flex; align-items:center; justify-content:center; min-width:var(--ui-control-sm); min-height:var(--ui-control-sm) }
html #ct-tax-invoice-modal #ti-panel-issue .tid-del:hover{ color:var(--ui-danger) !important }
html #ct-tax-invoice-modal #ti-search-area .text-amber-500{ color:var(--ui-text-2) !important }
html #ct-tax-invoice-modal #ti-advertiser-search{ font-size:var(--ui-text-body) !important }
html #ct-tax-invoice-modal #ti-advertiser-search::placeholder{ color:var(--ui-text-2) !important }
html #ct-tax-invoice-modal #ti-panel-issue button[class*="text-[10.5px]"], html #ct-tax-invoice-modal #ti-panel-issue button[class*="text-[11px]"]{ font-size:var(--ui-text-footnote) !important; min-height:var(--ui-control-sm); border:0 !important; border-radius:var(--ui-radius-control) !important; transform:none !important;
  background:var(--ui-fill) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important; }
html #ct-tax-invoice-modal #ti-panel-issue button.bg-indigo-50{ background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-actions button{ min-height:var(--ui-control); border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; transform:none !important; box-shadow:none !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-actions button.border{ background:var(--ui-fill) !important; border:0 !important; color:var(--ui-text-1) !important }
html #ct-tax-invoice-modal .text-gray-800, html #ct-tax-invoice-modal .text-gray-700, html #ct-tax-invoice-modal .text-gray-900{ color:var(--ui-text-1) !important }
html #ct-tax-invoice-modal .text-gray-600, html #ct-tax-invoice-modal .text-gray-500, html #ct-tax-invoice-modal .text-gray-400, html #ct-tax-invoice-modal .text-gray-300{ color:var(--ui-text-2) !important }
html #ct-tax-invoice-modal [class*="text-[9"], html #ct-tax-invoice-modal [class*="text-[10"]{ font-size:var(--ui-text-caption) !important }
html #ct-tax-invoice-modal .font-extrabold, html #ct-tax-invoice-modal .font-black{ font-weight:var(--ui-weight-bold) !important }
@media (max-width:767px){
  html #ct-tax-invoice-modal #ti-panel-issue .tid-paper > .tid-box{ overflow-x:auto !important; -webkit-overflow-scrolling:touch }
  html #ct-tax-invoice-modal #ti-panel-issue .tid-paper > .tid-box > table{ min-width:600px }
  html #ct-tax-invoice-modal #ti-panel-issue .tid-grid2 > .tid-col:first-child{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  html #ct-tax-invoice-modal #ti-panel-issue .tid-grid2 > .tid-col:first-child table{ min-width:520px }
  html #ct-tax-invoice-modal #ti-panel-issue table.tid-totals{ min-width:0 !important; width:100% }
  html #ct-tax-invoice-modal #ti-panel-issue .tid-actions button{ white-space:nowrap; flex:1 }
}

/* ── 3. 이 창에서만 ── */
html #ct-tax-invoice-modal .text-red-400{ color:var(--ui-danger) !important }
html #ct-tax-invoice-modal #ti-panel-issue .tid-paper{ padding:20px 22px 16px !important }
@media (max-width:767px){
  html #ct-tax-invoice-modal > div{ margin:0 8px !important }
  html #ct-tax-invoice-modal #ct-ti-mount{ padding:10px !important }
  html #ct-tax-invoice-modal #ti-panel-issue .tid-paper{ padding:14px 12px !important }
  html #ct-tax-invoice-modal > div > div:first-child{ padding:12px 14px !important }
  html #ct-tax-invoice-modal > div > div:last-child{ padding:10px 12px !important }
  html #ct-tax-invoice-modal > div > div:last-child > div{ gap:8px !important }
  html #ct-tax-invoice-modal > div > div:last-child button{ min-height:var(--ui-control-mobile); padding:0 12px !important }
}