/* =============================================================
   전자세금계산서 화면 스킨 — 공통 화면 규칙(ui-tokens.css) 적용
   범위: #tax_invoice-content 안쪽만(발행 · 전송대기 · 발행완료 · 매입계산서 조회).
   계약관리에서 여는 계산서 발행 창(#ct-ti-mount)과 다른 메뉴는 그대로.
   원칙: 배치 · 입력 칸 · 버튼 · 문구 · 동작은 그대로, 색 · 글자 크기와 굵기 · 선 · 모서리 · 그림자만.
   - 안쪽 탭 4개(채운 파랑 · 초록 · 빨강 · 주황) → 세그먼트(회색 홈 안 흰 칸) — 고른 탭은 JS 가 붙이는 text-white 로 알아본다
   - 채운 버튼은 화면마다 하나: 발행 '미리보기 후 발행', 목록 '조회'
   - 합계 칸 4개는 흰 칸 + 같은 글자색(색으로 뜻을 나누지 않음), 마지막 칸 '청구금액 합계'만 굵게
   되돌리기: index.tsx 의 이 파일 <link> 한 줄을 빼면 원래 화면.
   ============================================================= */

/* ── 1. 바탕 · 글꼴 ── */
html #tax_invoice-content{ background:var(--ui-bg); color:var(--ui-text-1); -webkit-font-smoothing:antialiased }
html #tax_invoice-content *:not(i):not(.fas):not(.far):not(.fa){ font-family:var(--ui-font) !important }

/* ── 2. 머리: 그라데이션 · 그림자 → 흰 묶음, 제목 아이콘은 파란 칸 ── */
html #tax_invoice-content > .max-w-6xl > .flex:first-child{
  background:var(--ui-surface) !important; border:0 !important; box-shadow:none !important;
  border-radius:var(--ui-radius-panel) !important; padding:16px 18px !important; margin-bottom:var(--ui-gap) !important;
}
html #tax_invoice-content h2{ font-size:var(--ui-text-title1) !important; font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important; letter-spacing:var(--ui-tracking-tight) !important }
html #tax_invoice-content h2 > span{ background:var(--ui-accent) !important; border-radius:var(--ui-radius-card) !important; box-shadow:none !important }
html #tax_invoice-content h2 > span i{ color:var(--ui-on-accent) !important }
html #tax_invoice-content h2 + p{ color:var(--ui-text-2) !important; font-weight:var(--ui-weight-regular) !important; font-size:var(--ui-text-footnote) !important }

/* ── 3. 안쪽 탭 4개 → 세그먼트 ── */
html #tax_invoice-content > .max-w-6xl > .flex:first-child > .flex.gap-2{ background:var(--ui-fill); border-radius:var(--ui-radius-control); padding:2px; gap:2px !important }
html #tax_invoice-content [id^="ti-subtab-"]{
  background:transparent !important; border:0 !important; color:var(--ui-text-1) !important; box-shadow:none !important; transform:none !important;
  min-height:calc(var(--ui-control) - 4px); padding:0 14px !important; border-radius:var(--ui-radius-row) !important;
  font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important;
}
html #tax_invoice-content [id^="ti-subtab-"] i{ color:var(--ui-text-2) !important }
html #tax_invoice-content [id^="ti-subtab-"]:hover{ background:var(--ui-fill-subtle) !important }
html #tax_invoice-content [id^="ti-subtab-"].text-white{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important }
html #tax_invoice-content [id^="ti-subtab-"].text-white i{ color:var(--ui-accent) !important }
html #tax_invoice-content [id^="ti-subtab-"] span[class*="bg-"]{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-caption) !important }

/* ── 4. 팝빌 연결 안내 띠 ── */
html #tax_invoice-content #ti-popbill-status{ margin-left:0 !important; margin-right:0 !important; border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:none !important }
html #tax_invoice-content #ti-popbill-status.bg-red-50{ background:var(--ui-danger-tint) !important }
html #tax_invoice-content #ti-popbill-status strong{ color:var(--ui-text-1) !important }
html #tax_invoice-content #ti-popbill-status button{ color:var(--ui-accent-text) !important }
html #tax_invoice-content #ti-popbill-status i{ color:var(--ui-danger) !important }
html #tax_invoice-content #ti-popbill-status p{ color:var(--ui-text-1) !important; opacity:1 !important; font-size:var(--ui-text-footnote) !important }
html #tax_invoice-content #ti-popbill-status button{ display:inline-flex; align-items:center; min-height:var(--ui-control-sm); font-size:var(--ui-text-footnote) !important; transform:none !important }

/* ── 5. 목록 패널(전송대기 · 발행완료 · 매입): 흰 묶음, 그림자 없음 ── */
html #tax_invoice-content [id^="ti-panel-"] > .bg-white{ border:0 !important; box-shadow:none !important; border-radius:var(--ui-radius-panel) !important; background:var(--ui-surface) !important }
html #tax_invoice-content h4{ font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #tax_invoice-content h4 i{ color:var(--ui-text-2) !important }
html #tax_invoice-content p.uppercase{ text-transform:none !important; letter-spacing:0 !important; color:var(--ui-text-2) !important; font-weight:var(--ui-weight-semibold) !important }
html #tax_invoice-content p.uppercase i{ color:var(--ui-text-2) !important }
html #tax_invoice-content [id^="ti-panel-"] label{ color:var(--ui-text-2) !important; font-weight:var(--ui-weight-semibold) !important }
html #tax_invoice-content [id^="ti-panel-"] label i{ color:var(--ui-text-3) !important }
html #tax_invoice-content .text-red-400{ color:var(--ui-danger) !important }
/* 안내 띠 · 꼬리표(노랑) → 연회색 */
html #tax_invoice-content [id^="ti-panel-"] .bg-amber-50{ background:var(--ui-fill-subtle) !important; border:0 !important; color:var(--ui-text-2) !important }
html #tax_invoice-content [id^="ti-panel-"] .bg-amber-50 strong{ color:var(--ui-text-1) !important }
html #tax_invoice-content [id^="ti-panel-"] button.bg-amber-50{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important; border-radius:var(--ui-radius-control) !important; font-weight:var(--ui-weight-semibold) !important; min-height:var(--ui-control-sm); transform:none !important }
html #tax_invoice-content [id^="ti-panel-"] button.bg-amber-50 i{ color:var(--ui-warning) !important }
html #tax_invoice-content .text-amber-800, html #tax_invoice-content .text-amber-700, html #tax_invoice-content .text-amber-600{ color:var(--ui-text-1) !important }
html #tax_invoice-content .border-amber-200, html #tax_invoice-content .border-amber-100{ border-color:var(--ui-line) !important }

/* ── 6. 기간 · 월 고르기: 칩 → 회색 칩, 누르면 연파랑 ── */
html #tax_invoice-content .ti-period-btn{
  background:var(--ui-fill) !important; border:0 !important; color:var(--ui-text-1) !important; border-radius:var(--ui-radius-pill) !important;
  font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; min-height:var(--ui-control); padding-top:0 !important; padding-bottom:0 !important; transform:none !important; box-shadow:none !important;
}
html #tax_invoice-content .ti-period-btn:hover{ background:var(--ui-fill-hover) !important }
html #tax_invoice-content .ti-period-btn[class*="bg-blue-6"], html #tax_invoice-content .ti-period-btn.text-white,
html #tax_invoice-content .ti-period-btn[class*="bg-emerald-6"], html #tax_invoice-content .ti-period-btn[class*="bg-rose-6"]{
  background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; font-weight:var(--ui-weight-semibold) !important;
}

/* ── 7. 입력 칸 · 고르는 칸: 맥 입력란 ── */
html #tax_invoice-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]), html #tax_invoice-content select, html #tax_invoice-content 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 #tax_invoice-content input:not([type=checkbox]):not([type=radio]):focus, html #tax_invoice-content select:focus, html #tax_invoice-content textarea:focus{ box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important; outline:none !important }
html #tax_invoice-content input[readonly]{ background-color:var(--ui-fill-subtle) !important; color:var(--ui-text-2) !important; box-shadow:none !important }
html #tax_invoice-content select{ font-size:var(--ui-text-footnote) !important; min-height:var(--ui-control-sm) }

/* ── 8. 조회 · 수집 버튼: 조회만 채운 파랑, 수집 업데이트는 회색 ── */
html #tax_invoice-content [id^="ti-panel-"] button.flex-1[class*="bg-emerald-6"], html #tax_invoice-content [id^="ti-panel-"] button.flex-1[class*="bg-rose-6"], html #tax_invoice-content [id^="ti-panel-"] button.flex-1[class*="bg-blue-6"]{
  background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; border:0 !important; box-shadow:none !important; transform:none !important;
  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;
}
html #tax_invoice-content [id^="ti-panel-"] button.flex-1[class*="bg-emerald-6"] i, html #tax_invoice-content [id^="ti-panel-"] button.flex-1[class*="bg-rose-6"] i{ color:var(--ui-on-accent) !important }
html #tax_invoice-content [id$="-sync-btn"]{
  background:var(--ui-fill) !important; color:var(--ui-text-1) !important; border:0 !important; box-shadow:none !important; transform:none !important;
  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;
}
html #tax_invoice-content [id$="-sync-btn"] i{ color:var(--ui-text-2) !important }
html #tax_invoice-content [id$="-sync-btn"]:hover{ background:var(--ui-fill-hover) !important }

/* ── 9. 합계 칸 4개: 흰 칸, 같은 글자색, 마지막 칸만 굵게 ── */
html #tax_invoice-content [id$="-summary"] > div{
  background:var(--ui-surface-alt) !important; border:0 !important; box-shadow:none !important; border-radius:var(--ui-radius-group) !important; text-align:left !important;
}
html #tax_invoice-content [id$="-summary"] > div > p:first-child{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #tax_invoice-content [id$="-summary"] > div > p:last-child{
  color:var(--ui-text-1) !important; font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; font-variant-numeric:tabular-nums;
}
/* 원래 '청구금액 합계' 칸은 흰 글자가 연한 바탕 위에 있어 거의 안 보이던 것 */
html #tax_invoice-content [id$="-summary"] > div:last-child{ background:var(--ui-accent-tint) !important }
html #tax_invoice-content [id$="-summary"] > div:last-child > p:first-child{ color:var(--ui-accent-text) !important }
html #tax_invoice-content [id$="-summary"] > div:last-child > p:last-child{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-bold) !important }

/* ── 10. 목록 표 ── */
html #tax_invoice-content [id$="-list"] > div{ border:0 !important; box-shadow:none !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface) }
html #tax_invoice-content [id$="-list"] thead, html #tax_invoice-content [id$="-list"] thead tr{ background:var(--ui-surface-alt) !important; border-color:var(--ui-line) !important }
html #tax_invoice-content [id$="-list"] thead th{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important; letter-spacing:0 !important }
html #tax_invoice-content [id$="-list"] tbody tr{ background:var(--ui-surface) !important; border-color:var(--ui-line) !important }
html #tax_invoice-content [id$="-list"] tbody tr:hover{ background:var(--ui-fill-subtle) !important }
html #tax_invoice-content [id$="-list"] tbody td{ border-color:var(--ui-line) !important; font-variant-numeric:tabular-nums }
html #tax_invoice-content [id$="-list"] tbody td.text-blue-700, html #tax_invoice-content [id$="-list"] tbody td.text-emerald-700, html #tax_invoice-content [id$="-list"] tbody td.text-rose-700{ color:var(--ui-text-1) !important }
html #tax_invoice-content [id$="-list"] .divide-y > * + *{ border-color:var(--ui-line) !important }
/* 꼬리표: 발행자 · 상태 · 계약연결 */
html #tax_invoice-content [id$="-list"] td span.rounded-full, html #tax_invoice-content [id$="-list"] td span.rounded-md{
  border:0 !important; border-radius:var(--ui-radius-row) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important;
  background:var(--ui-fill) !important; color:var(--ui-text-1) !important; box-shadow:none !important;
}
html #tax_invoice-content [id$="-list"] td span.rounded-full i, html #tax_invoice-content [id$="-list"] td span.rounded-md i{ color:var(--ui-text-2) !important }
html #tax_invoice-content [id$="-list"] td span.bg-emerald-100{ background:var(--ui-success-tint) !important; color:var(--ui-success) !important }
html #tax_invoice-content [id$="-list"] td span.bg-emerald-100 i{ color:var(--ui-success) !important }
html #tax_invoice-content [id$="-list"] td span[class*="bg-red-1"], html #tax_invoice-content [id$="-list"] td span[class*="bg-rose-1"]{ background:var(--ui-danger-tint) !important; color:var(--ui-danger) !important }
html #tax_invoice-content [id$="-list"] td span[class*="bg-amber-1"], html #tax_invoice-content [id$="-list"] td span[class*="bg-yellow-1"]{ background:var(--ui-warning-tint) !important; color:var(--ui-warning) !important }
html #tax_invoice-content [id$="-list"] td button{ transform:none !important }
/* 전송대기: 줄 바탕(발행실패 연분홍) · 다시 확인 · 삭제 작은 단추 */
html #tax_invoice-content #ti-pending-list tbody tr[class*="bg-rose-50"]{ background:var(--ui-danger-tint) !important }
html #tax_invoice-content #ti-pending-list td button{
  min-height:var(--ui-control-sm); border:0 !important; border-radius:var(--ui-radius-row) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important;
  background:var(--ui-fill) !important; color:var(--ui-text-1) !important;
}
html #tax_invoice-content #ti-pending-list td button[class*="rose"], html #tax_invoice-content #ti-pending-list td button[class*="red"]{ color:var(--ui-danger) !important }
html #tax_invoice-content #ti-pending-list td span[class*="bg-indigo-5"]{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important }
/* 발행실패 줄(연분홍) 위의 꼬리표 · 삭제 단추는 흰 칸 + 빨간 글자(분홍 위 분홍이라 대비가 모자라던 것) */
html #tax_invoice-content #ti-pending-list tbody tr[class*="bg-rose-50"] td span.rounded-full, html #tax_invoice-content #ti-pending-list tbody tr[class*="bg-rose-50"] td span.rounded-md,
html #tax_invoice-content #ti-pending-list tbody tr[class*="bg-rose-50"] td button{ background:var(--ui-surface) !important; color:var(--ui-danger) !important }
html #tax_invoice-content #ti-pending-list tbody tr[class*="bg-rose-50"] td span i, html #tax_invoice-content #ti-pending-list tbody tr[class*="bg-rose-50"] td button i{ color:var(--ui-danger) !important }

/* ── 11. 발행 서식(종이 모양은 유지, 선 · 글자 · 입력 칸만) ── */
html #tax_invoice-content #ti-panel-issue .tid-paper{ border:0 !important; box-shadow:var(--ui-elev-raised) !important; border-radius:var(--ui-radius-panel) !important }
html #tax_invoice-content #ti-panel-issue .tid-title{ font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important }
html #tax_invoice-content #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 #tax_invoice-content #ti-panel-issue .tid-brand .b2{ color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important; letter-spacing:0 !important }
html #tax_invoice-content #ti-panel-issue .tid-rule{ height:1px !important; background:var(--ui-accent) !important }
html #tax_invoice-content #ti-panel-issue .tid-box, html #tax_invoice-content #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 #tax_invoice-content #ti-panel-issue .tid-tbl td, html #tax_invoice-content #ti-panel-issue .tid-items th, html #tax_invoice-content #ti-panel-issue .tid-items td,
html #tax_invoice-content #ti-panel-issue .tid-totals td{ border-color:var(--ui-line) !important }
html #tax_invoice-content #ti-panel-issue .tid-lbl, html #tax_invoice-content #ti-panel-issue .tid-vlabel, html #tax_invoice-content #ti-panel-issue .tid-items th, html #tax_invoice-content #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 #tax_invoice-content #ti-panel-issue .tid-fixed{ font-size:var(--ui-text-footnote) !important; color:var(--ui-text-1) !important }
html #tax_invoice-content #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 #tax_invoice-content #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 #tax_invoice-content #ti-panel-issue .tid-inp.sm{ font-size:var(--ui-text-footnote) !important; min-height:26px }
/* 공급일자(날짜) 칸은 좁아서 원래 크기 11px 유지 — 12px 이면 날짜 끝이 잘림 */
html #tax_invoice-content #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 #tax_invoice-content #ti-panel-issue .tid-items input[type=date]::-webkit-calendar-picker-indicator{ margin:0; padding:0; width:10px }
/* 합계 표: 진한 테두리 → 머리카락 선 + 둥근 모서리 */
html #tax_invoice-content #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 #tax_invoice-content #ti-panel-issue table.tid-totals tr + tr td{ border-top:var(--ui-hairline) solid var(--ui-line) }
html #tax_invoice-content #ti-panel-issue table.tid-totals .tl{ border-right:var(--ui-hairline) solid var(--ui-line) !important }
html #tax_invoice-content #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 #tax_invoice-content #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 #tax_invoice-content #ti-panel-issue .tid-field > label span{ color:var(--ui-text-2) !important }
html #tax_invoice-content #ti-panel-issue .tid-stamp-line .co{ font-weight:var(--ui-weight-bold) !important; color:var(--ui-text-1) !important }
html #tax_invoice-content #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 #tax_invoice-content #ti-panel-issue .tid-del:hover{ color:var(--ui-danger) !important }
/* 공급받는자 찾기: 노란 테두리 · 아이콘 → 맥 입력란 + 회색 돋보기 */
html #tax_invoice-content #ti-search-area .text-amber-500{ color:var(--ui-text-2) !important }
html #tax_invoice-content #ti-advertiser-search{ font-size:var(--ui-text-body) !important }
html #tax_invoice-content #ti-advertiser-search::placeholder{ color:var(--ui-text-2) !important }
/* 작은 버튼(재생성 · 품목 추가) */
html #tax_invoice-content #ti-panel-issue button[class*="text-[10.5px]"], html #tax_invoice-content #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 #tax_invoice-content #ti-panel-issue button.bg-indigo-50{ background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important }
/* 아래 버튼: 초기화 회색, 미리보기 후 발행 채운 파랑 */
html #tax_invoice-content #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 #tax_invoice-content #ti-panel-issue .tid-actions button.border{ background:var(--ui-fill) !important; border:0 !important; color:var(--ui-text-1) !important }
html #tax_invoice-content #ti-issue-btn{ background:var(--ui-accent) !important; color:var(--ui-on-accent) !important }
html #tax_invoice-content #ti-issue-btn:hover{ background:var(--ui-accent-hover) !important }

/* ── 12. 글자색 · 크기 · 굵기 정리 ── */
html #tax_invoice-content .text-gray-800, html #tax_invoice-content .text-gray-700, html #tax_invoice-content .text-gray-900{ color:var(--ui-text-1) !important }
html #tax_invoice-content .text-gray-600, html #tax_invoice-content .text-gray-500, html #tax_invoice-content .text-gray-400, html #tax_invoice-content .text-gray-300{ color:var(--ui-text-2) !important }
html #tax_invoice-content [class*="text-[9"], html #tax_invoice-content [class*="text-[10"]{ font-size:var(--ui-text-caption) !important }
html #tax_invoice-content .font-extrabold, html #tax_invoice-content .font-black{ font-weight:var(--ui-weight-bold) !important }
html #tax_invoice-content button{ transform:none }

/* ── 13. 휴대폰 ── */
@media (max-width:767px){
  html #tax_invoice-content > .max-w-6xl > .flex:first-child{ padding:14px !important }
  html #tax_invoice-content > .max-w-6xl > .flex:first-child > .flex.gap-2{ width:100%; overflow-x:auto; flex-wrap:nowrap !important }
  html #tax_invoice-content [id^="ti-subtab-"]{ flex:0 0 auto !important; min-height:var(--ui-control-mobile) }
  /* 작성일자 · 종류 · 관리번호 줄: 칸이 좁아 글자가 세로로 쪼개지던 것 → 줄만 옆으로 밀기 */
  html #tax_invoice-content #ti-panel-issue .tid-paper > .tid-box{ overflow-x:auto !important; -webkit-overflow-scrolling:touch }
  html #tax_invoice-content #ti-panel-issue .tid-paper > .tid-box > table{ min-width:600px }
  html #tax_invoice-content [id^="ti-panel-"] button.flex-1, html #tax_invoice-content [id$="-sync-btn"]{ min-height:var(--ui-control-mobile) }
  /* 목록 표: 칸이 쪼개져 이름이 세로로 서던 것 → 표만 옆으로 밀기 */
  html #tax_invoice-content [id$="-list"] > div{ overflow-x:auto !important; -webkit-overflow-scrolling:touch }
  html #tax_invoice-content [id$="-list"] table{ min-width:860px }
  html #tax_invoice-content [id$="-list"] th, html #tax_invoice-content [id$="-list"] td{ white-space:nowrap }
  /* 공급받는자 칸: 4칸 표가 좁아 '123-45-/67890', '가상상/회 강남/점'처럼 꺾이던 것 → 칸 폭 지키고 옆으로 밀기 */
  html #tax_invoice-content #ti-panel-issue .tid-grid2 > .tid-col:first-child{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  html #tax_invoice-content #ti-panel-issue .tid-grid2 > .tid-col:first-child table{ min-width:520px }
  /* 합계 표가 종이 밖으로 밀려나던 것 → 폭 맞춤 */
  html #tax_invoice-content #ti-panel-issue table.tid-totals{ min-width:0 !important; width:100% }
  html #tax_invoice-content #ti-panel-issue .tid-actions button{ white-space:nowrap; flex:1 }
  html #tax_invoice-content [id$="-summary"] > div > p:last-child{ font-size:var(--ui-text-callout) !important }
}

/* ━━ 휴대폰 세로 길이 줄이기 (목록 화면: 발행완료 · 전송대기 · 매입) ━━
   원래: 조회 조건(기간 버튼 2줄 · 시작일/종료일 위아래 · 발행자/거래처/상태 3줄 · 월별 버튼 2줄)과 합계 칸 2×2 가 쌓여
         목록이 화면 1.5장 아래에서 시작. 사용자: 휴대폰에서 세로 스크롤 많은 것을 싫어함.
   → 버튼 줄은 옆으로 밀기 한 줄, 날짜 2칸 나란히, 거르기 3칸 나란히, 합계 칸 낮게. 칸 · 버튼 · 동작은 그대로. */
@media (max-width:767px){
  html #tax_invoice-content [id^="ti-panel-"] > .bg-white{ padding:14px !important }
  html #tax_invoice-content [id^="ti-panel-"] .mb-5 > .grid.items-end{ grid-template-columns:1fr 1fr !important; gap:8px !important }
  html #tax_invoice-content [id^="ti-panel-"] .mb-5 > .grid.items-end > div:first-child{ grid-column:1 / -1 }
  html #tax_invoice-content [id^="ti-panel-"] .mb-5 > .grid.items-end > div:last-child{ grid-column:1 / -1 }
  html #tax_invoice-content [id^="ti-panel-"] .mb-5 > .grid.items-end .flex.gap-1.flex-wrap,
  html #tax_invoice-content [id^="ti-panel-"] [id$="-month-quick"]{ flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
  html #tax_invoice-content [id^="ti-panel-"] .mb-5 > .grid.items-end .flex.gap-1.flex-wrap > button, html #tax_invoice-content [id^="ti-panel-"] [id$="-month-quick"] > button{ flex-shrink:0; white-space:nowrap }
  html #tax_invoice-content [id^="ti-panel-"] .mb-5 > .grid.items-end label{ margin-bottom:4px !important }
  /* 발행자 · 거래처 · 상태: 한 줄에 셋, 이름은 칸 위 */
  html #tax_invoice-content [id^="ti-panel-"] .mb-5 > .mt-3.flex.flex-wrap.items-center{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px !important }
  html #tax_invoice-content [id^="ti-panel-"] .mb-5 > .mt-3.flex.flex-wrap.items-center > div.flex.items-center{ flex-direction:column; align-items:stretch !important; gap:2px !important; min-width:0 }
  html #tax_invoice-content [id^="ti-panel-"] .mb-5 > .mt-3.flex.flex-wrap.items-center > div.flex.items-center > select{ width:100% !important; min-width:0 }
  html #tax_invoice-content [id^="ti-panel-"] .mb-5 > .mt-3.flex.flex-wrap.items-center > span:not([class*="hidden"]){ display:none }
  html #tax_invoice-content [id^="ti-panel-"] .mb-5 > .mt-3.flex.flex-wrap.items-center > [id$="-month-quick"]{ grid-column:1 / -1 }
  /* 합계 칸: 2×2 그대로, 높이만 81 → 약 56px */
  html #tax_invoice-content [id$="-summary"]{ gap:6px !important; margin-bottom:12px !important }
  html #tax_invoice-content [id$="-summary"] > div{ padding:8px 10px !important }
  html #tax_invoice-content [id$="-summary"] > div > p:first-child{ margin-bottom:0 !important }
}

/* ━━ 기간 드롭다운 · 맥 목록 (사용자 요청 2026-10-27) ━━ */
/* 기간 선택: 알약 단추 13개 → 맥 팝업 단추 하나(옆 날짜칸과 같은 높이) */
html #tax_invoice-content select.ti-period-select{
  height:38px; padding:0 30px 0 12px; 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; font-weight:var(--ui-weight-semibold) !important; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--ui-text-2) 50%), linear-gradient(135deg, var(--ui-text-2) 50%, transparent 50%) !important;
  background-position:right 15px top 50%, right 11px top 50% !important; background-size:4px 4px !important; background-repeat:no-repeat !important;
}
html #tax_invoice-content select.ti-period-select:focus{ outline:none; box-shadow:var(--ui-focus-ring) !important }

/* 발행완료 · 매입 목록: 한 줄 표(36px), 칸 안 줄바꿈 없음 */
html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) thead th{ height:30px; padding:0 10px !important; white-space:nowrap }
html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) tbody td{ height:36px; padding:0 10px !important; white-space:nowrap; vertical-align:middle }
html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) tbody td.font-semibold{ font-weight:var(--ui-weight-semibold) !important }
/* 발행자 · 상태 칩: 아이콘 없이 글자만, 같은 높이 */
html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) td span.rounded-full{ height:20px; padding:0 8px !important; border:0 !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-semibold) !important }
html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) td span.rounded-full > i{ display:none !important }
html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) td span.rounded-full[class*="bg-blue-1"], html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) td span.rounded-full[class*="bg-violet-1"],
html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) td span.rounded-full[class*="bg-indigo-5"]{ background:var(--ui-fill) !important; color:var(--ui-text-1) !important }
/* 연결완료: 회색 글자만 · 계약등록: 연한 파랑 작은 단추(액션 칸 폭 고정) */
html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) td span.rounded-md.text-gray-400{ background:transparent !important; border:0 !important; color:var(--ui-text-2) !important }
html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) td span.rounded-md > i, html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) td button.rounded-md > i{ display:none !important }
html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) td button.rounded-md{ height:24px; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-accent-tint) !important; color:var(--ui-accent-text) !important; font-size:var(--ui-text-footnote) !important }
html #tax_invoice-content :is(#ti-sell-list, #ti-buy-list) td:last-child{ width:96px }