걸리는 순서 : tool-common.css(토큰 · 2단 · 패널) → tool-parts.css(공통 부품) → 이 파일 (tool-calc.css · sols-tool-guide.css 는 걸지 않는다) 배치 : div.nxt-tabs.nxt-tabs-lg + div.nxt-tabpanel × 2 > div.nxt-cols.nxt-p1 > 입력 패널 + 결과 패널(고정) - 2단 · 빈 상태가 탭마다 하나씩이다 [이 파일에 두는 것] 이 도구만의 것뿐이다. 탭 · 입력칸 · 접이식 · 결과 영역 · 상세 행 · 안내 상자 · 토스트 · 안내 본문의 모양은 tool-parts.css 가 정한다 - 여기 다시 적지 않는다. 시안 renewal.css ④ 에 이 도구의 절이 없어 공통 부품 위에 자리만 맞췄다(시안 p1-variants.html 의 인라인 여백을 이름 붙여 옮겼다). ① 날짜 두 칸의 줄 ② 재직일수 한 줄 ③ 급여 세 칸 묶음과 [달마다 다르게] 단추 ④ 산출 과정의 둘째 줄 [지운 것] 옛 규칙 전부 : .tab-bar · .tab-panel(.active), .field-row, 날짜 · 숫자 칸의 옛 손질, .badge-row · .badge(재직일수 알약), .accordion*, .btn-calc, .banner(.show) · .banner-info, .result-grid · .result-card, table.detail-table, .notice, 옛 @media. [규칙] 전부 .nxt-light.nxt-severance-pay-calculator 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 색은 --nxt-* 토큰만 쓴다. */ /* ============ ① 날짜 두 칸 ============ */ /*

입사일

퇴사일

공통 가로 줄(.nxt-field-row)은 줄을 바꾸지 않는다. 날짜 칸은 150px 아래로 좁아지면 글자(2025-12-31)와 달력 단추가 겹치므로, 패널이 좁으면(1000px 화면의 입력 패널 · 375px 화면) 한 칸씩 내려가게 한다 */ /* 줄바꿈은 tool-parts.css 의 .nxt-field-row-wrap(조각에 달았다 - 기준 폭 150px)이 한다. 이 도구의 규칙은 없다 */ /* ============ ② 재직일수 한 줄 ============ */ /* 날짜 칸 바로 아래에 붙인다(칸의 아래 여백 16px 을 당긴다) */ .nxt-light.nxt-severance-pay-calculator .nxt-sev-service{margin:-8px 0 16px} /* ============ ③ 급여 세 칸 · [달마다 다르게] ============ */ /* 글자 단추는 안 여백(10px)만큼 왼쪽으로 당겨 글자를 입력칸의 왼쪽 선에 맞춘다 */ .nxt-light.nxt-severance-pay-calculator .nxt-sev-months>.nxt-hint{margin:-8px 0 16px} .nxt-light.nxt-severance-pay-calculator .nxt-sev-swap{margin:-8px 0 16px -10px} /* ============ ④ 산출 과정의 둘째 줄 ============ */ /*

98,901원9,000,000원 / 91일

값 아래에 어떻게 나온 수인지 한 줄(보통 굵기 · 회색 7.6:1). 이름(dt)은 줄어들지 않게 하고, 긴 둘째 줄은 값 칸 안에서 꺾는다 */ /* 둘째 줄의 모양은 tool-parts.css ③-3 의 .nxt-rows-sub 다(조각의 이름도 그것으로 바꿨다). 여기는 이름(dt)이 줄어들지 않게 하는 것만 */ .nxt-light.nxt-severance-pay-calculator .nxt-rows dt{flex:0 0 auto;max-width:50%}