/* 노무 계산기 3종(연차 일수·야근 휴일수당·4대보험) 전용 스타일. 색은 app.css 의 CSS 변수만 쓴다 */
/* 작은 입력 묶음(통상임금 구성·근로시간) */
.wg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wg-grid label{display:block;min-width:0}
.wg-grid span{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:3px}
.wg-grid input{width:100%;box-sizing:border-box;padding:6px 8px;font-size:13.5px;border-radius:8px}
/* 산식을 한 줄씩 보여 주는 상자 */
.wg-calc{background:var(--soft);border-radius:12px;padding:10px 12px}
.wg-step{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line);font-size:13px}
.wg-step:last-child{border-bottom:0}
.wg-step span{color:var(--muted);font-weight:600;white-space:nowrap}
.wg-step b{text-align:right;overflow-wrap:anywhere;font-size:13.5px}
/* 표의 금액 칸 */
.wg-num{text-align:right;white-space:nowrap}
/* 입사일이 2017년 5월 30일보다 앞서면 누적을 셀 수 없어 누적 열만 접는다(일수 열은 옛 법과 같아 그대로 둔다) */
.t.no-cum .wg-cum{display:none}
.wg-item{word-break:keep-all;min-width:88px}
/* 두 기준 나란히 카드 */
.wg-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wg-card{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.wg-card.on{border-color:var(--coral)}
.wg-card small{display:block;color:var(--muted);font-size:12px;font-weight:700}
.wg-card b{display:block;font-size:24px;line-height:1.3;font-family:'Hahmlet',Pretendard,serif}
.wg-card span{display:block;font-size:12px;color:var(--ink2);overflow-wrap:anywhere}
/* 좁은 화면에서는 4대보험 표의 "합계" 열을 접는다. 노사 합계는 큰 숫자 아래 줄과 통계 칸에 그대로 있다 */
@media(max-width:420px){.wg-grid,.wg-two{grid-template-columns:1fr}.wg-step{flex-direction:column;gap:2px}.wg-step b{text-align:left}.wg-sum{display:none}.wg-item{min-width:0}}