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

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

   [이 파일에 두는 것] 이 도구만의 것뿐이다. 입력칸 · 전환 단추 · 접이식 · 결과 영역 · 꼬리표 · 상세 행 · 토스트 · 안내 본문의 모양은 tool-parts.css 가 정한다.
     ① 게이지(구간 다섯 + 바늘 + 눈금 + 범례) - 시안 renewal.css ④ BMI. 자만 계산식(15 ~ 40)에 맞췄다
     (안내 본문 안의 글 표는 tool-parts.css ③-9 의 .nxt-guide .nxt-table 로 올라갔다 - 2026.10.15)
   [지운 것] 옛 규칙 전부 : .gender-row · .gender-btn, .field-row 의 3칸 줄, .minor-note, .bmi-display · .bmi-num · .bmi-cat(인라인 색을 덮던 규칙) · .bmi-msg,
     .bmi-gauge(그라데이션 띠) · .marker · .bmi-scale, .detail-table · .detail-row, .extra-info, #bmiDisplay 의 .show 를 보고 바꾸던 빈 상태 규칙.
   [규칙] 전부 .nxt-light.nxt-bmi-calculator 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다.
          색은 --nxt-* 토큰만 쓴다. 게이지 구간 색 다섯(--nxt-g1 ~ g5)만 이 파일이 정한다(시안 노트 A 7절).
   [명도 대비 - 흰 바탕, 비텍스트 3:1] g1 #64748B 4.8 · g2 #0F766E 5.5 · g3 #B45309 5.0 · g4 #C2410C 5.2 · g5 #B42318 6.6 / 바늘 #0F172A 17.9
          구간은 색만으로 알리지 않는다 - 조각 사이 2px 흰 틈, 아래 눈금 글자, 범례의 이름(지금 구간은 굵게 + aria-current)이 함께 있다. */

/* ============ ① 게이지 ============ */
/* <div class="nxt-gauge">
     <div class="nxt-gauge-track" aria-hidden="true"><span data-level="1"></span> … <span data-level="5"></span><i class="nxt-gauge-pin" style="left:29.97%"></i></div>
     <div class="nxt-gauge-scale" aria-hidden="true"><span>15</span><span>18.5</span><span>23</span><span>25</span><span>30</span><span>40+</span></div>
     <ul class="nxt-gauge-legend"><li data-for="2" aria-current="true"><i class="nxt-dot" data-level="2" aria-hidden="true"></i>정상</li> …</ul></div>

   자 : BMI 15 ~ 40 = 0 ~ 100%. bmi-calculator.js 의 계산식(pct = (bmi - 15) ÷ (40 - 15) × 100, 양끝에서 멈춤)이 바늘의 left 를 정한다.
        조각의 폭과 눈금 자리를 같은 자로 적는다 - 바늘이 경계(18.5 · 23 · 25 · 30)의 올바른 쪽에 선다.
          구간   15 ~ 18.5   18.5 ~ 23   23 ~ 25   25 ~ 30   30 ~ 40
          폭       3.5          4.5         2         5        10      (합 25)
          눈금   15 = 0%   18.5 = 14%   23 = 32%   25 = 40%   30 = 60%   40+ = 100%
        ※ 시안(p1-variants.html)은 15 ~ 35(÷ 20)로 그렸다. 계산식 줄을 바꾸지 않으려고 식의 자(15 ~ 40)에 조각 · 눈금을 맞췄다.
           30 이상은 한 조각(2단계 비만 이상)이다 - 2단계 · 3단계의 가름은 주 결과의 꼬리표 글자가 한다. */
.nxt-light.nxt-bmi-calculator{--nxt-g1:#64748B;--nxt-g2:#0F766E;--nxt-g3:#B45309;--nxt-g4:#C2410C;--nxt-g5:#B42318}
.nxt-light.nxt-bmi-calculator .nxt-gauge{min-width:0;padding:14px 14px 12px;border:1px solid var(--nxt-line);border-radius:10px}
.nxt-light.nxt-bmi-calculator .nxt-gauge-track{position:relative;display:flex;height:14px;margin:6px 0 0}
.nxt-light.nxt-bmi-calculator .nxt-gauge-track>span{min-width:0;border-right:2px solid var(--nxt-panel)}
.nxt-light.nxt-bmi-calculator .nxt-gauge-track>span[data-level="1"]{flex:3.5 1 0;border-radius:7px 0 0 7px}
.nxt-light.nxt-bmi-calculator .nxt-gauge-track>span[data-level="2"]{flex:4.5 1 0}
.nxt-light.nxt-bmi-calculator .nxt-gauge-track>span[data-level="3"]{flex:2 1 0}
.nxt-light.nxt-bmi-calculator .nxt-gauge-track>span[data-level="4"]{flex:5 1 0}
.nxt-light.nxt-bmi-calculator .nxt-gauge-track>span[data-level="5"]{flex:10 1 0;border-right:0;border-radius:0 7px 7px 0}
/* 구간 색 : 게이지 조각 · 범례 점 · 꼬리표 점이 같은 data-level 을 쓴다 (색은 속성으로만. 인라인 색 금지) */
.nxt-light.nxt-bmi-calculator [data-level="1"]{background:var(--nxt-g1)}
.nxt-light.nxt-bmi-calculator [data-level="2"]{background:var(--nxt-g2)}
.nxt-light.nxt-bmi-calculator [data-level="3"]{background:var(--nxt-g3)}
.nxt-light.nxt-bmi-calculator [data-level="4"]{background:var(--nxt-g4)}
.nxt-light.nxt-bmi-calculator [data-level="5"]{background:var(--nxt-g5)}
/* 바늘 : 흰 테두리를 두른 어두운 막대. left 만 인라인으로 바뀐다 */
.nxt-light.nxt-bmi-calculator .nxt-gauge-pin{position:absolute;top:-6px;bottom:-6px;left:0;width:6px;margin-left:-5px;border:2px solid var(--nxt-panel);border-radius:5px;background:var(--nxt-text);box-sizing:content-box;transition:left .3s ease}
/* 눈금 글자 6개 : 위의 자 그대로. 첫 글자는 왼쪽 끝, 끝 글자는 오른쪽 끝에 맞춘다 */
.nxt-light.nxt-bmi-calculator .nxt-gauge-scale{position:relative;height:20px;margin:8px 0 0;font-size:13px;line-height:20px;font-variant-numeric:tabular-nums;color:var(--nxt-text-3)}
.nxt-light.nxt-bmi-calculator .nxt-gauge-scale>span{position:absolute;top:0;white-space:nowrap;transform:translateX(-50%)}
.nxt-light.nxt-bmi-calculator .nxt-gauge-scale>span:nth-child(1){left:0;transform:none}
.nxt-light.nxt-bmi-calculator .nxt-gauge-scale>span:nth-child(2){left:14%}
.nxt-light.nxt-bmi-calculator .nxt-gauge-scale>span:nth-child(3){left:32%}
.nxt-light.nxt-bmi-calculator .nxt-gauge-scale>span:nth-child(4){left:40%}
.nxt-light.nxt-bmi-calculator .nxt-gauge-scale>span:nth-child(5){left:60%}
.nxt-light.nxt-bmi-calculator .nxt-gauge-scale>span:nth-child(6){left:100%;transform:translateX(-100%)}
.nxt-light.nxt-bmi-calculator .nxt-gauge-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;padding:0;list-style:none;font-size:13px;color:var(--nxt-text-2)}
.nxt-light.nxt-bmi-calculator .nxt-gauge-legend>li{display:inline-flex;align-items:center;gap:6px}
.nxt-light.nxt-bmi-calculator .nxt-gauge-legend>li[aria-current="true"]{font-weight:700;color:var(--nxt-text)}

@media (prefers-reduced-motion:reduce){
	.nxt-light.nxt-bmi-calculator .nxt-gauge-pin{transition:none}
}