/* 시급·주휴수당 계산기 — 공통 도구 스타일에 없는 것만 정의한다. */

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

/* 요율 기준 연도·출처 — 눈에 띄게 */
.hw-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-left: 4px solid var(--primary-strong, #2c56b8);
    border-radius: var(--radius-md, 8px);
    background: var(--primary-soft, #eef3fd);
    font-size: var(--text-sm, .875rem);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.hw-basis i { margin-top: .2rem; color: var(--primary-strong, #2c56b8); }
.hw-basis a { font-weight: 600; }
.hw-basis-note { color: var(--text-muted, #626977); }

.hw-wage-row { display: flex; gap: .5rem; align-items: stretch; }
.hw-wage-row .input-tool { flex: 1 1 auto; min-width: 0; }
.hw-wage-row .btn-tool { flex: 0 0 auto; white-space: nowrap; }

.hw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md, 1rem); }
.hw-pair[hidden] { display: none; }

.hw-main {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    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);
    text-align: center;
}
.hw-main-label { font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }
.hw-main-value {
    font-size: 2rem; font-weight: 700; line-height: 1.2;
    color: var(--primary-strong, #2c56b8); font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.hw-main-sub { font-size: var(--text-sm, .875rem); color: var(--text-muted, #626977); }

.hw-stats { margin-top: var(--spacing-md, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw-stats .stat-number { font-size: var(--text-lg, 1.125rem); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hw-stats .stat-label { text-transform: none; letter-spacing: 0; }

.hw-compare { margin: var(--spacing-lg, 1.5rem) 0 0; }
.hw-compare > div {
    display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    padding: .5rem 0; border-bottom: 1px solid var(--border-color, #e5e8ed);
}
.hw-compare dt { color: var(--text-muted, #626977); font-size: var(--text-sm, .875rem); }
.hw-compare dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.hw-compare-help { margin: .5rem 0 0; font-size: var(--text-ui-sm, .8125rem); color: var(--text-muted, #626977); }

@media (max-width: 420px) {
    .hw-pair { grid-template-columns: 1fr; }
    .hw-main-value { font-size: 1.75rem; }
}

/* .alert-tool 은 display:flex 라 hidden 속성을 이긴다 — 이 화면의 알림은 hidden 으로 여닫으므로 되돌린다. */
.alert-tool[hidden] { display: none; }