/* 실업급여 계산기 — 공통 도구 스타일에 없는 것만 정의한다. */

.ub-num { font-variant-numeric: tabular-nums; }
.ub-hint { margin: .4rem 0 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); line-height: 1.55; }
.ub-hint:empty { display: none; }
.ub-alert { margin-top: var(--spacing-md, 1rem); }
/* .alert-tool 의 display 가 [hidden] 을 이기므로 명시한다 — 안 그러면 빈 경고 상자가 남는다. */
.ub-alert[hidden], #ubAgeWrap[hidden], #ubBirthWrap[hidden] { display: none; }

/* 요율 기준 — 눈에 띄게, 좁은 화면에서는 줄바꿈 */
.ub-basis {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem;
    margin-bottom: var(--spacing-md, 1rem);
    padding: .7rem 1rem;
    border: 1px solid var(--border-color, #e5e8ed);
    border-left: 4px solid var(--accent-primary, #3b6fe0);
    border-radius: var(--radius-md, 8px);
    background: var(--primary-soft, #eef3fd);
    font-size: var(--text-ui-sm, .8125rem);
    font-variant-numeric: tabular-nums;
}
.ub-basis-year { font-weight: 700; color: var(--primary-strong, #2c56b8); }
.ub-basis a { color: var(--primary-strong, #2c56b8); text-decoration: underline; }
.ub-basis-note { flex-basis: 100%; color: var(--text-muted, #626977); }

.ub-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md, 1rem); }
@media (max-width: 480px) { .ub-row { grid-template-columns: 1fr; } }

.ub-main {
    display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center;
    padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
    border: 1px solid var(--border-color, #e5e8ed);
    border-radius: var(--radius-md, 8px);
    background: var(--primary-soft, #eef3fd);
}
.ub-main-label { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.ub-main-value {
    font-size: 2.1rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere;
    color: var(--primary-strong, #2c56b8); font-variant-numeric: tabular-nums;
}
.ub-main-sub { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); line-height: 1.5; overflow-wrap: anywhere; }

.ub-stats { margin-top: var(--spacing-md, 1rem); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ub-stats .stat-number { font-size: var(--text-xl, 1.25rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ub-tag { display: block; margin-top: .25rem; font-size: .72rem; font-weight: 600; }
.ub-tag:empty { display: none; }
.ub-tag[data-tone="upper"] { color: #b4541a; }
.ub-tag[data-tone="lower"] { color: #2e7d5b; }
.ub-tag[data-tone="none"] { color: var(--text-muted, #626977); }

.ub-table-wrap { margin-top: var(--spacing-lg, 1.5rem); overflow-x: auto; }
.ub-table { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: var(--text-sm, .875rem); }
.ub-table th, .ub-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--border-color, #e5e8ed); text-align: left; font-variant-numeric: tabular-nums; }
.ub-table th { font-weight: 600; color: var(--text-muted, #626977); font-size: var(--text-ui-sm, .8125rem); }
.ub-table td.is-current { font-weight: 700; background: var(--primary-soft, #eef3fd); color: var(--primary-strong, #2c56b8); }