/* exchange-rate-calculator.css - 공개 도구 "환율 계산기" 조각(WEB-INF/jsp/homepage/tool/exchangeRateCalculator.jsp)의 스타일. 2026.10.14 도구 개편 : P1 계산형 뼈대로 옮겼다(본보기 = 대출이자 계산기). 뿌리 :
걸리는 순서 : tool-common.css(토큰 · 2단 · 패널) → tool-parts.css(공통 부품) → 이 파일 (tool-calc.css · sols-tool-guide.css 는 걸지 않는다) [이 파일에 두는 것] 이 도구만의 것뿐이다. 입력칸 · 전환 단추 · 칩 · 탭 · 표 · 차트 · 선택 창 · 불러오기 · 토스트 · 안내 본문의 모양은 tool-parts.css 가 정한다. ① 금액 2칸(통화 단추 + 큰 입력칸) · 방향 바꾸기 · 기준율 한 줄 · 빈 상태 - 시안 renewal.css ④ 환율 ② 통화 정보 패널 ③ 아래 패널 : 기간 단추 · 차트의 가리킴(말풍선) · 최고 최저 한 줄 · 값 표 · 통계 · 해외직구 ④ 통화 선택 창 : 항목 안쪽(통화 이름 칸 · 값 자리) · 찾는 통화가 없을 때 (항목을 단추로 쓰는 꼴 · 찾기 칸의 보통 굵기 · 안내 본문의 글 표는 tool-parts.css 로 올라갔다 - 2026.10.15) ⑤ 좁은 화면 [지운 것] 옛 규칙 전부 : .fx-two-col · .fx-col-* · .fx-section-title · .section-label · .dc-title, .fx-loading · .fx-spinner · .fx-error* · .fx-retry-btn, .hot-banner, .quick-chip-grid · .quick-chip, .fx-field · .input-wrap · .currency-btn · .swap-row · .swap-btn · .rate-info, .quick-table* · .detail-card · .change-row · .travel-tip · .duty-result · .prepay-grid, .chart-tabs · .chart-wrap · .chart-* · .stats-grid · .stat-box, .modal-overlay · .currency-modal · .cm-*, 색 이름 잇기(--c-up · --c-down → tool-parts.css 의 --nxt-up · --nxt-down). [규칙] 전부 .nxt-light.nxt-exchange-rate-calculator 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 색은 --nxt-* 토큰만 쓴다 (예외 : 어두운 말풍선 위의 흰 글자 #fff). 글꼴 굵기는 400 과 700 만. */ /* ============ ① 금액 2칸 ============ */ /* 금액 한 줄 = 통화 단추 + 입력칸.
이 도구에는 주 결과 상자(.nxt-hero)가 없다 - 금액 2칸이 주 결과다(양쪽 다 고칠 수 있다). 그래서 이 2칸만 높이 52px · 글자 20px */ .nxt-light.nxt-exchange-rate-calculator .nxt-fx-row{display:flex;gap:8px;min-width:0} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-row>.nxt-input{flex:1 1 auto;min-height:52px} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-row>.nxt-input>input{height:50px;font-size:20px;text-align:right} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-row>.nxt-input>.nxt-clear{height:52px} .nxt-light.nxt-exchange-rate-calculator .nxt-cur{flex:none;justify-content:flex-start;gap:8px;min-height:52px;padding:8px 10px;font-size:14px;font-weight:400} .nxt-light.nxt-exchange-rate-calculator .nxt-cur>.bi{font-size:13px;color:var(--nxt-text-3)} /* 통화 이름은 길다("중국 위안(역외 CNH 기준)") - 단추가 입력칸을 밀어내지 않게 줄인다. 전체 이름은 단추의 aria-label 과 통화 선택 창에 있다 */ .nxt-light.nxt-exchange-rate-calculator .nxt-cur-name{max-width:8.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-swap{display:flex;justify-content:center;margin:-8px 0 8px} /* 기준율 한 줄 :

매매기준율 1 USD = 1,336원 · 한국수출입은행 2026.10.13 (화) 기준

*/ .nxt-light.nxt-exchange-rate-calculator .nxt-fx-rate{margin:0;font-size:14px;line-height:1.6;color:var(--nxt-text-2)} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-rate>strong{font-weight:700;font-variant-numeric:tabular-nums;color:var(--nxt-text)} /* 빈 상태 : 계산 패널 안, 행동 줄 자리에 나온다(금액을 지웠을 때만). 공통 빈 상태(168px)보다 낮게 - 2칸 아래가 길어지지 않게 */ .nxt-light.nxt-exchange-rate-calculator .nxt-fx-empty{min-height:0;padding:16px} /* ============ ② 통화 정보 패널 ============ */ /*

USD미국 달러

전일 대비 …3.40원 (-0.25%)1 USD 기준

자주 쓰는 금액

…

…

*/ .nxt-light.nxt-exchange-rate-calculator .nxt-fx-info{display:grid;gap:12px;min-width:0} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-title{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:700;color:var(--nxt-text)} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-change{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;font-size:14px;color:var(--nxt-text-2)} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-per{font-size:13px;color:var(--nxt-text-3)} /* ============ ③ 아래 패널 : 추이 · 해외직구 ============ */ /* 기간 단추(전환 단추 5개) */ .nxt-light.nxt-exchange-rate-calculator .nxt-fx-period{flex:1 1 300px;max-width:420px;margin:0} /* 차트 위를 가리키면(마우스 · 손가락) 그 날의 값이 뜬다. 값은 아래 "값 표"로도 준다(키보드 · 낭독기) */ .nxt-light.nxt-exchange-rate-calculator .nxt-chart-plot{cursor:crosshair;touch-action:pan-y} .nxt-light.nxt-exchange-rate-calculator .nxt-chart-dot{pointer-events:none} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-tip{position:absolute;z-index:1;margin:-12px 0 0;padding:4px 8px;border-radius:6px;background:var(--nxt-inverse);color:#fff; font-size:13px;font-weight:700;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;transform:translate(-50%,-100%)} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-tip[data-edge="start"]{transform:translate(0,-100%)} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-tip[data-edge="end"]{transform:translate(-100%,-100%)} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-tip[data-side="below"]{margin-top:12px;transform:translate(-50%,0)} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-tip[data-side="below"][data-edge="start"]{transform:translate(0,0)} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-tip[data-side="below"][data-edge="end"]{transform:translate(-100%,0)} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-peak{margin:12px 0 0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--nxt-text-2)} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-fold{margin-top:12px} /* 값 표 : 3년이면 수백 줄이라 감싸개가 자기 칸 안에서 세로로도 굴린다(tabindex="0" - 키보드로 굴린다). 머리 줄은 위에 붙는다 */ .nxt-light.nxt-exchange-rate-calculator .nxt-fx-values{max-height:360px;overflow:auto} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-values:focus-visible{outline-offset:1px} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-values thead th{position:sticky;top:0;z-index:1;border-bottom:0;box-shadow:inset 0 -1px 0 var(--nxt-line-dk)} .nxt-light.nxt-exchange-rate-calculator .nxt-fx-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px} /* 해외직구 : 작은 결과 아래의 내역 */ .nxt-light.nxt-exchange-rate-calculator .nxt-fx-duty-rows{margin-top:8px} /* ============ ④ 통화 선택 창 ============ */ /* 이 도구는 Tab 으로 항목마다 닿게 항목을 단추로 쓴다 :