/* salary-calculator.css - 공개 도구 "연봉 실수령액 계산기" 조각(WEB-INF/jsp/homepage/tool/salaryCalculator.jsp)의 스타일.
   2026.10.14 도구 개편 : P1 계산형 뼈대로 옮겼다(본보기는 loan-calculator.css).

   뿌리 : <div class="nxt nxt-salary-calculator nxt-normal nxt-light nxt-calc" …>
   걸리는 순서 : tool-common.css(토큰 · 2단 · 패널) → tool-parts.css(공통 부품) → 이 파일
                 (tool-calc.css · sols-tool-guide.css 는 걸지 않는다)

   [이 파일에 두는 것] 이 도구만의 것뿐이다. 입력칸 · 전환 단추 · 칩 · 접이식 · 더하기 빼기 · 결과 영역 · 도넛과 범례 · 안내 상자 · 토스트 · 안내 본문의
     모양은 tool-parts.css 가 정한다 - 여기 다시 적지 않는다. 시안 renewal.css ④ 에 이 도구의 절이 없어 공통 부품 위에 자리만 맞췄다.
     ① "옵션 더 보기" 안의 퇴직금 묶음(전환 단추 + 그 아래 도움말)
     ② 공제 범례(좁은 칸에서 긴 이름이 금액을 밀어내지 않게)
   [지운 것] 옛 규칙 전부 : 도넛 색 잇기(--c-pension …), .mode-toggle(.compact), #severanceToggleWrap, #severanceHint, .accordion*, .stepper*,
     .nxt-stepper-unit, .btn-calc, .banner(.show) · .banner-info, .result-hero .label, .witty(커피 문구 상자).
     도넛 조각의 색은 이제 스크립트가 그래프 색 토큰(--nxt-series-1~4)을 그대로 넣고, 범례 점은 공통 .nxt-dot(-2 · -3 · -4)이다.
   [규칙] 전부 .nxt-light.nxt-salary-calculator 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 색은 --nxt-* 토큰만 쓴다. */

/* ============ ① 퇴직금 묶음 ============ */
/* <div class="nxt-sal-sev" id="severanceWrap"><span class="nxt-label">퇴직금</span><div class="nxt-seg">…</div><p class="nxt-hint" id="severanceHint" hidden>…</p></div>
   연봉일 때만 보인다(hidden). "연봉에 포함"을 고르면 전환 단추 바로 아래에 13분할 도움말이 붙는다 - 단추의 아래 여백을 묶음 쪽으로 옮긴다 */
.nxt-light.nxt-salary-calculator .nxt-sal-sev{margin:0 0 16px}
.nxt-light.nxt-salary-calculator .nxt-sal-sev>.nxt-seg{margin-bottom:0}
.nxt-light.nxt-salary-calculator .nxt-sal-sev>.nxt-hint{margin-top:8px}

/* ============ ② 공제 범례 ============ */
/* 결과 패널 안쪽이 300px 안팎일 때(1000px 화면 · 375px 화면) "건강보험(장기요양 포함)"이 길어 비율 · 금액이 눌린다.
   이름만 줄을 바꾸고(낱말 단위), 점 · 비율 · 금액은 줄어들지 않게 한다 */
.nxt-light.nxt-salary-calculator .nxt-legend>li>span:not(.nxt-legend-pct){min-width:0}
.nxt-light.nxt-salary-calculator .nxt-legend-pct{flex:none;font-variant-numeric:tabular-nums}