/* loan-calculator.css - 공개 도구 "대출이자 계산기" 조각(WEB-INF/jsp/homepage/tool/loanCalculator.jsp)의 스타일.
   2026.10.14 도구 개편 : P1 계산형 뼈대로 옮겼다(계산형 도구의 본보기).

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

   [이 파일에 두는 것] 이 도구만의 것뿐이다. 입력칸 · 전환 단추 · 칩 · 탭 · 결과 영역 · 비교 두 열(.nxt-cmp) · 표 · 토스트 · 안내 본문의 모양은 tool-parts.css 가 정한다 - 여기 다시 적지 않는다.
     ① 조건 비교(A / B) : 입력 맨 위의 조건 전환, 결과 두 열의 좁은 칸 처리, 아래 패널의 [볼 조건]   - 시안 renewal.css ④ 대출
     ② 연도별 상환 일정표
   [지운 것] 옛 규칙 전부 : 도넛 색 잇기, .compare-toggle-btn, .loan-cols · .loan-col*, 빈 금액 칸의 오류 감추기(:has(:placeholder-shown)),
     .result-cols · .result-col*, .compare-summary, .container.compare-on …, .schedule-table*, .btn-csv, .prepay-grid · .prepay-result,
     월별 360줄 표의 안쪽 스크롤(.nxt-loan-schedule - 연도별 줄로 바뀌어 필요 없다).
   [규칙] 전부 .nxt-light.nxt-loan-calculator 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 색은 --nxt-* 토큰만 쓴다. */

/* ============ ① 조건 비교 ============ */
/* 조건 A / B 전환(비교를 켰을 때만) : 입력 패널 맨 위
   <div class="nxt-condbar"><div class="nxt-seg" role="group" aria-label="고칠 조건">…</div><p class="nxt-hint">…</p></div> */
.nxt-light.nxt-loan-calculator .nxt-condbar{margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--nxt-line)}
.nxt-light.nxt-loan-calculator .nxt-condbar>.nxt-seg{margin:0}
.nxt-light.nxt-loan-calculator .nxt-condbar>.nxt-hint{margin-top:8px}
/* 결과 두 열 : 조건 B 의 점은 비교 묶음 색 */
.nxt-light.nxt-loan-calculator .nxt-cmp-col[data-cond="B"] .nxt-dot{background:var(--nxt-series-3)}
/* 열이 좁다(1000px · 375px 에서 안쪽 130px 안팎). 숫자가 길면("125,000,046원") 30px 로는 넘친다 -
   열을 크기 기준으로 삼고(container), 숫자 글자 크기를 "열 폭 ÷ 글자 폭"으로 줄인다. --w 는 loan-calculator.js 가 숫자마다 넣는 글자 폭(em)이다.
   container 단위를 모르는 브라우저에서는 이 묶음이 통째로 빠지고 tool-parts.css 의 크기(--nxt-num-lg) 그대로다 */
@supports (width:1cqi){
	.nxt-light.nxt-loan-calculator .nxt-cmp-col{container-type:inline-size}
	.nxt-light.nxt-loan-calculator .nxt-cmp-col .nxt-hero-num{font-size:min(var(--nxt-num-lg),calc(100cqi / var(--w,7)))}
}
.nxt-light.nxt-loan-calculator .nxt-cmp-col .nxt-hero-value{margin:0}
/* 그 조건에 결과가 없을 때 열 안의 한 줄 : <p class="nxt-cmp-none">대출 금액을 넣으면 나옵니다.</p> */
.nxt-light.nxt-loan-calculator .nxt-cmp-none{margin:8px 0 4px;font-size:14px;line-height:1.5;color:var(--nxt-text-2)}
/* 아래 패널의 [볼 조건] : <div class="nxt-below-pick"><span class="nxt-label">볼 조건</span><div class="nxt-seg nxt-seg-auto">…</div><p class="nxt-below-cond">…</p></div> */
.nxt-light.nxt-loan-calculator .nxt-below-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 16px}
.nxt-light.nxt-loan-calculator .nxt-below-pick>.nxt-label{margin:0}
.nxt-light.nxt-loan-calculator .nxt-below-pick>.nxt-seg{margin:0}

/* ============ ② 연도별 상환 일정표 ============ */
/* <div class="nxt-table-wrap" tabindex="0" role="region" aria-label="연도별 상환 일정"><table class="nxt-table nxt-year-table">
     <thead>…</thead>
     <tbody><tr><th scope="row"><button type="button" class="nxt-rowtoggle" aria-expanded="false" aria-controls="loanY1">…1년차</button></th><td>…</td>…</tr></tbody>
     <tbody id="loanY1" class="nxt-table-sub" hidden>  그 해의 월별 줄 - 펼칠 때 만든다  </tbody> …
   감싸개가 자기 칸 안에서만 가로로 굴린다(화면 전체는 밀리지 않는다) */
.nxt-light.nxt-loan-calculator .nxt-year-table{min-width:560px}