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

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

   [이 파일에 두는 것] 이 도구만의 것뿐이다. 입력칸 · 전환 단추 · 칩 · 결과 영역 · 상세 행 · 저장 카드 줄(.nxt-saved*) · 토스트 · 안내 본문의 모양은 tool-parts.css 가 정한다.
     ① 남은 시간 한 줄(.nxt-live) - 시안 renewal.css ④ D-Day 그대로
     ② 입력 패널의 예시 칩 줄 · 제목 칸
     ③ 저장한 디데이 카드 줄의 머리 · 안내 글
   [지운 것] 옛 규칙 전부 : .preset-row · .preset-chip, .mode-row(체크상자), .dday-display · .dday-title · .dday-num-row · .dday-num · .dday-months · .dday-date · .dday-live,
     .timeline-box · .timeline-row(.today - 틀의 .today 와 겹쳐 되돌리던 줄 포함) · .tl-*, .saved-list · .saved-item · .dday-badge · .del-btn · .saved-empty,
     slideIn 움직임, #ddayDisplay 의 .show 를 보고 바꾸던 빈 상태 규칙.
   [규칙] 전부 .nxt-light.nxt-dday-calculator 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 색은 --nxt-* 토큰만 쓴다.
   [명도 대비] 옅은 파랑(--nxt-tint) 위 : 남은 시간 글 --nxt-text-2 9.1 / 흰 패널 위 : 안내 글 --nxt-text-3 7.6 */

/* ============ ① 남은 시간 ============ */
/* 주 결과 상자 안의 맨 아래 줄. 1초마다 바뀐다(낭독기 알림 대상이 아니다). 숫자 폭이 흔들리지 않게 tabular-nums
   <p class="nxt-live"><i class="bi bi-hourglass-split" aria-hidden="true"></i><span>남은 시간 71일 14시간 28분 5초</span></p> */
.nxt-light.nxt-dday-calculator .nxt-live{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0 0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--nxt-text-2)}

/* ============ ② 입력 패널 ============ */
/* 예시 칩 줄 : 이름표(span.nxt-label) 바로 아래, 다음 칸과는 16px (공통 .nxt-chips 는 입력칸 아래에 붙는 줄이라 위 8px · 아래 0 이다) */
.nxt-light.nxt-dday-calculator .nxt-panel-in>.nxt-chips{margin:0 0 16px}
/* 제목 칸 : 글이 들어가는 칸이다 - 숫자 칸의 굵은 글자를 쓰지 않는다 */
.nxt-light.nxt-dday-calculator .nxt-input>input[type="text"]{font-weight:400}

/* ============ ③ 저장한 디데이 ============ */
/* 본문 맨 위 카드 줄. 머리의 제목은 h2 다(패널 제목과 같은 단계) - 크기는 공통 .nxt-history-title(15px) 그대로 */
.nxt-light.nxt-dday-calculator .nxt-saved>.nxt-hint{margin:4px 4px 0}
/* 카드의 이름이 길면(30자) 두 줄에서 자른다 - 카드 높이가 들쭉날쭉해지지 않게 */
.nxt-light.nxt-dday-calculator .nxt-saved-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.nxt-light.nxt-dday-calculator .nxt-saved-num{white-space:nowrap}