/* 환테크 수익 계산기 전용 CSS (2026-10-17). 2패널 계산형(코인 거래소 이동 계산기와 같은 골격) + 결과 안 환율 눈금 + 아래 팔 때 환율별 손익 막대·수수료 수준별 표. 공용 부품은 assets/v2.css. 접두 fxp- */
.fxp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.fxp-in{padding:16px 18px 18px;min-width:0}
.fxp-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.fxp-fields .full{grid-column:1 / -1}
.fxp-fields > [hidden]{display:none} /* .v2-f 의 display 가 hidden 을 덮지 않게 */
.fxp-seglabel{display:block;margin:0 0 5px}
.fxp-seg{display:flex;flex-wrap:nowrap}
.fxp-seg button{flex:1 1 0;min-width:0;height:var(--v2-ctl,42px);padding:0 6px;font-family:var(--sans);font-size:13px;font-weight:700;line-height:1.15;white-space:normal;text-wrap:balance} /* 긴 로케일 라벨은 버튼 안 두 줄 */
.fxp-presets{display:flex;flex-wrap:wrap;gap:6px}
.fxp-presets button{height:30px;padding:0 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.fxp-presets button:hover{background:var(--btn);color:var(--ink);border-color:var(--line)}
.fxp-hint{display:block;margin-top:8px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.fxp-help{margin:12px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.fxp-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.fxp-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column;container:fxpout / inline-size}
.fxp-out > .v2-label{display:block;margin-bottom:6px}
.fxp-out .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(18px, calc(100cqi / (var(--fxp-len, 8) * .62)), 1em)} /* 글자 수로 크기를 줄여 큰 금액도 한 줄 */
.fxp-out .v2-big.is-neg span{color:var(--accent)}
.fxp-out .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
/* 환율 눈금: 막대 위 = 팔 환율(목표) 표식, 막대 안 = 산 환율·손익분기 눈금과 남는 구간, 숫자는 아래 범례 */
.fxp-ruler{margin:14px 0 2px}
.fxp-ruler > .v2-label{display:block;margin-bottom:26px}
.fxp-trk{position:relative;height:10px;margin:0 2px;border-radius:5px;background:var(--soft)}
.fxp-trk i{position:absolute;top:0;display:block;font-style:normal}
.fxp-zone{height:100%;border-radius:5px;background:repeating-linear-gradient(135deg,var(--accent-wash) 0 6px,transparent 6px 10px);border:1px solid var(--accent);box-sizing:border-box;transition:left 420ms cubic-bezier(.3,.7,.3,1),width 420ms cubic-bezier(.3,.7,.3,1)}
.fxp-tb,.fxp-tbe{width:0;height:18px;top:-4px !important;transition:left 420ms cubic-bezier(.3,.7,.3,1)}
.fxp-tb{border-left:1px dashed var(--muted)}
.fxp-tbe{border-left:2px solid var(--ink)}
.fxp-now{width:0;height:0;top:5px !important;transition:left 420ms cubic-bezier(.3,.7,.3,1)} /* 값이 바뀌면 표식이 새 환율로 미끄러진다(R45) */
.fxp-now::before{content:"";position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:3px solid var(--muted);box-sizing:border-box}
.fxp-now.is-ok::before{border-color:var(--accent)}
.fxp-now b{position:absolute;left:0;bottom:12px;transform:translateX(-50%);font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.fxp-now.is-l b{transform:none}
.fxp-now.is-r b{transform:translateX(-100%)}
.fxp-legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--sans);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fxp-legend li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fxp-legend i{display:inline-block;flex:0 0 auto}
.fxp-legend .k-now i{width:10px;height:10px;border-radius:50%;border:2px solid var(--muted);box-sizing:border-box}
.fxp-legend .k-now.is-ok i{border-color:var(--accent)}
.fxp-legend .k-now{color:var(--ink);font-weight:700}
.fxp-legend .k-be i{width:0;height:12px;border-left:2px solid var(--ink)}
.fxp-legend .k-be{color:var(--ink);font-weight:600}
.fxp-legend .k-b i{width:0;height:12px;border-left:1px dashed var(--muted)}
.fxp-legend .k-zone i{width:16px;height:8px;border-radius:3px;border:1px solid var(--accent);background:repeating-linear-gradient(135deg,var(--accent-wash) 0 4px,transparent 4px 7px)}
.fxp-rows{margin-top:10px}
.fxp-rows li span em{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.fxp-rows li > span{flex:1 1 auto;min-width:0}
.fxp-rows li b{flex:0 0 auto;text-align:right;white-space:nowrap} /* 값은 한 줄, 줄어드는 쪽은 설명 */
.fxp-rows li.is-neg b{color:var(--accent)}
.fxp-caveat{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.fxp-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.fxp-caveat + .fxp-foot{margin-top:14px}
.fxp-foot .v2-status{margin-left:auto}
/* 아래: 팔 때 환율별 손익 막대(0 가운데)와 수수료 수준별 표 — 위아래로 쌓음(나란히 두면 긴 로케일 표 머리글이 잘림) */
.fxp-below{border-top:1px solid var(--soft)}
.fxp-below:has(> [hidden]:first-child + [hidden]){display:none}
.fxp-bar-box,.fxp-lv-box{padding:14px 18px 18px;min-width:0}
.fxp-bar-box > .v2-label,.fxp-lv-box > .v2-label{display:block;margin-bottom:10px}
.fxp-lv-box{border-top:1px solid var(--soft)}
.fxp-bars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:max-content minmax(60px,1fr) max-content;gap:6px 10px;align-items:center;font-family:var(--sans);font-size:12.5px;font-variant-numeric:tabular-nums}
.fxp-bars li{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:center}
.fxp-bars li > span:first-child{color:var(--muted);white-space:nowrap}
.fxp-bars li > span:first-child em{margin-left:6px;font-style:normal;font-size:11px;font-weight:700;color:var(--ink)}
.fxp-bars li > b{text-align:right;font-weight:700;white-space:nowrap}
.fxp-btrk{position:relative;display:block;height:14px}
.fxp-btrk .fxp-z{position:absolute;left:50%;top:-3px;bottom:-3px;width:0;border-left:1px dashed var(--line)}
.fxp-btrk .fxp-bar{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--ink);opacity:.32;transition:left 420ms cubic-bezier(.3,.7,.3,1),width 420ms cubic-bezier(.3,.7,.3,1)} /* 값이 바뀌면 막대가 새 길이로(R45) */
.fxp-bars li.is-neg .fxp-bar{background:repeating-linear-gradient(135deg,var(--accent) 0 3px,transparent 3px 6px);border:1px solid var(--accent);opacity:.85}
.fxp-bars li.is-neg > b{color:var(--accent)}
.fxp-bars li.is-cur{box-shadow:inset 0 0 0 999px var(--accent-wash);border-radius:4px}
.fxp-bars li.is-cur > span:first-child{color:var(--ink);font-weight:700}
.fxp-bars li.is-cur:not(.is-neg) .fxp-bar{background:var(--accent);opacity:1}
.fxp-lv-box .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.fxp-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.fxp-table th,.fxp-table td{padding:7px 8px;border-top:1px solid var(--soft);text-align:left;white-space:nowrap}
.fxp-table thead th{font-size:11.5px;font-weight:700;color:var(--muted);border-top:0;white-space:normal;word-break:keep-all;vertical-align:bottom} /* 긴 로케일 머리글은 줄바꿈 */
.fxp-table tbody th{font-weight:600}
.fxp-table .n{text-align:right}
.fxp-table td.is-neg{color:var(--accent)}
.fxp-table tr.is-cur th,.fxp-table tr.is-cur td{background:var(--accent-wash);color:var(--ink)}
@media (max-width:720px){
  .fxp-grid{grid-template-columns:minmax(0,1fr)}
  .fxp-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .fxp-in,.fxp-out,.fxp-bar-box,.fxp-lv-box{padding-left:12px;padding-right:12px}
  .fxp-table{font-size:12.5px}
  .fxp-table th,.fxp-table td{padding:7px 4px}
  .fxp-bars{gap:6px 7px;font-size:12px;grid-template-columns:max-content minmax(36px,1fr) max-content}
  .fxp-bars li > span:first-child em{display:block;margin-left:0;font-size:10.5px} /* 아주 긴 금액(루피아 수조)도 360px 안에: 꼬리표는 환율 아래 줄로 */
}
@media (prefers-reduced-motion:reduce){ .fxp-zone,.fxp-tb,.fxp-tbe,.fxp-now,.fxp-btrk .fxp-bar{transition:none} }
@container v2in (max-width:300px){ .fxp-fields{grid-template-columns:minmax(0,1fr)} }