/* 부가세 계산기 — 공통 도구 스타일에 없는 것만 정의한다. */

.vat-num { font-variant-numeric: tabular-nums; }
.vat-note { margin-top: var(--spacing-md, 1rem); font-size: var(--text-ui-sm, .8125rem); }

/* 기준 연도·출처 — 눈에 띄게, 계산 영역 바로 위 */
.vat-basis {
    display: flex; align-items: flex-start; gap: .5rem;
    margin-bottom: var(--spacing-lg, 1.5rem);
    padding: .75rem 1rem;
    border: 1px solid var(--border-color, #e5e8ed);
    border-radius: var(--radius-md, 8px);
    background: var(--primary-soft, #eef3fd);
    font-size: var(--text-sm, .875rem);
    overflow-wrap: anywhere;
}
.vat-basis > i { flex: 0 0 auto; color: var(--primary-strong, #2c56b8); margin-top: .2rem; }
.vat-basis > span { flex: 1 1 auto; min-width: 0; }
.vat-basis a { color: var(--primary-strong, #2c56b8); font-weight: 600; }

/* 두 갈래 선택(방향·방식) */
.vat-seg {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border: 1px solid var(--border-color, #e5e8ed);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}
.vat-seg-btn {
    min-height: 44px; padding: .5rem .6rem;
    border: 0; background: var(--bg-surface, #fff);
    color: var(--text-color, #1b1e24);
    font: inherit; font-size: var(--text-ui-sm, .8125rem); line-height: 1.3;
    cursor: pointer; word-break: keep-all;
}
.vat-seg-btn + .vat-seg-btn { border-left: 1px solid var(--border-color, #e5e8ed); }
.vat-seg-btn.is-active { background: var(--primary-strong, #2c56b8); color: #fff; font-weight: 700; }
.vat-seg-btn:focus-visible { outline: 2px solid var(--primary-strong, #2c56b8); outline-offset: -3px; }

/* 금액은 길어질 수 있어 한 줄에 하나씩(라벨 왼쪽·금액 오른쪽) — 숫자가 중간에서 끊기지 않게 */
.vat-stats { grid-template-columns: 1fr; gap: .5rem; }
.vat-stats .stat-item {
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
    text-align: left; padding: .75rem 1rem;
}
.vat-stats .stat-label { order: -1; flex: 0 0 auto; font-size: var(--text-sm, .875rem); }
.vat-stats .stat-number {
    font-variant-numeric: tabular-nums; font-size: clamp(1rem, 4.2vw, 1.25rem);
    text-align: right; min-width: 0; overflow-wrap: anywhere;
}
.vat-stat-total { background: var(--primary-soft, #eef3fd); }
.vat-formula {
    margin: var(--spacing-md, 1rem) 0 0;
    font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}

.vat-batch-info { margin: 0 0 .5rem; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.vat-table-wrap { overflow-x: auto; }
.vat-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm, .875rem); font-variant-numeric: tabular-nums; }
.vat-table th, .vat-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--border-color, #e5e8ed); text-align: right; white-space: nowrap; }
.vat-table th { font-weight: 600; color: var(--text-muted, #626977); font-size: var(--text-ui-sm, .8125rem); }
.vat-table .vat-col-no, .vat-table thead th:first-child, .vat-table tfoot th { text-align: left; }
.vat-table .vat-col-err { text-align: left; white-space: normal; color: var(--danger-color, #c0392b); }
.vat-table tr.is-error td { background: rgba(192, 57, 43, .06); }
.vat-table tfoot th, .vat-table tfoot td { font-weight: 700; border-top: 2px solid var(--border-color, #e5e8ed); border-bottom: 0; }

@media (max-width: 480px) {
    .vat-table th, .vat-table td { padding: .35rem .3rem; font-size: .75rem; }
}

/* display 를 준 요소는 [hidden] 을 이긴다 — 레이아웃의 전역 규칙에 기대지 않고 명시한다 */
#vatRateError[hidden], #vatError[hidden], #vatSingle[hidden], #vatBatch[hidden],
#vatSingleOut[hidden], #vatBatchOut[hidden], #vatBatchSum[hidden], #vatCalcArea[hidden] { display: none; }