/* =============================================================
   세금계산서 발행 미리보기 창(#ti-confirm-modal) — 공통 화면 규칙
   범위: #ti-confirm-modal 안쪽만. 세금계산서 화면 · 계약관리 어디서 열어도 같은 창.
   원칙: 계산서 양식(칸 배치 · 공급자 빨강 / 공급받는자 파랑 구분 · 문구)은 그대로,
         연한 빨강 · 파랑 글자는 같은 색 계열에서 진하게(대비 4.5:1 이상), 창 틀 · 버튼 · 안내 띠만 규칙으로.
   - '즉시발행' 주황 → 채운 파랑(창의 확정 버튼 하나), '수정하기'는 회색
   - 휴대폰: 계산서 표는 칸 폭을 지키고 옆으로 밀기(이름 칸이 세로로 쪼개지던 것)
   되돌리기: index.tsx 의 이 파일 <link> 한 줄을 빼면 원래 모양.
   ============================================================= */

/* ── 1. 창 틀 ── */
html #ti-confirm-modal > div{ border-radius:var(--ui-radius-sheet) !important; box-shadow:var(--ui-elev-sheet) !important; font-family:var(--ui-font) }
html #ti-confirm-modal h3{ font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important }
html #ti-confirm-modal h3 + p{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #ti-confirm-modal > div > div:first-child button{
  width:var(--ui-target-min); height:var(--ui-target-min); border-radius:var(--ui-radius-pill) !important; background:var(--ui-fill) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-callout) !important; transform:none !important;
}
html #ti-confirm-modal > div > div:first-child, html #ti-confirm-modal > div > div:last-child{ border-color:var(--ui-line) !important }
html #ti-confirm-modal > div > div:last-child{ background:var(--ui-surface-alt) !important }

/* ── 2. 계산서 양식: 색 구분은 유지, 글자만 진하게 ── */
html #ti-confirm-modal #ti-preview-sheet{ border-color:var(--ui-line-control) !important; border-radius:var(--ui-radius-control) !important }
html #ti-confirm-modal #ti-preview-sheet [style*="color:#e02424"]{ color:var(--ui-danger) !important }
html #ti-confirm-modal #ti-preview-sheet [style*="color:#1d4ed8"]{ color:var(--ui-accent-text) !important }
html #ti-confirm-modal #ti-preview-sheet [style*="color:#6b7280"], html #ti-confirm-modal #ti-preview-sheet [style*="color:#374151"]{ color:var(--ui-text-2) !important }
/* 승인번호 안내('발행 시 국세청에서 부여됩니다') — JS 가 연회색을 넣던 것 */
html #ti-confirm-modal #tc-approval-num{ color:var(--ui-text-2) !important }
/* 합계 줄의 빈 칸 '-' 는 비어 있다는 표시라 흐린 색 유지 */
html #ti-confirm-modal #ti-preview-sheet [style*="font-size:11px"]{ font-size:var(--ui-text-caption) !important }

/* ── 3. 수신 확인 · 경고 띠 ── */
html #ti-confirm-modal .bg-blue-50{ background:var(--ui-accent-tint) !important; border:0 !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important }
html #ti-confirm-modal .bg-blue-50 .bg-green-100{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important }
html #ti-confirm-modal .bg-amber-50{ background:var(--ui-warning-tint) !important; border:0 !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important }
html #ti-confirm-modal .bg-amber-50 i{ color:var(--ui-warning) !important }
html #ti-confirm-modal .bg-amber-50 strong{ color:var(--ui-danger) !important }

/* ── 4. 아래 버튼: 수정하기 회색, 즉시발행 채운 파랑 ── */
html #ti-confirm-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;
  font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-semibold) !important; transform:none !important; box-shadow:none !important;
}
html #ti-confirm-modal > div > div:last-child button:not(#ti-confirm-issue-btn){ background:var(--ui-fill) !important; color:var(--ui-text-1) !important }
html #ti-confirm-modal #ti-confirm-issue-btn{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important }
html #ti-confirm-modal #ti-confirm-issue-btn:hover{ background:var(--ui-accent-hover) !important }
html #ti-confirm-modal #ti-confirm-issue-btn:disabled{ opacity:.5 }

/* ── 5. 휴대폰: 창은 화면 거의 전체, 계산서 표는 옆으로 밀기 ── */
@media (max-width:767px){
  html #ti-confirm-modal > div{ margin:0 8px !important; max-height:94vh !important }
  html #ti-confirm-modal > div > div:first-child{ padding:12px 14px !important }
  html #ti-confirm-modal > div > div:nth-child(2){ padding:10px !important; overflow-x:auto !important }
  html #ti-confirm-modal #ti-preview-sheet{ min-width:720px }
  html #ti-confirm-modal > div > div:last-child{ padding:10px 12px !important }
  html #ti-confirm-modal > div > div:last-child button{ min-height:var(--ui-control-mobile) }
}