/* 코인 거래소 이동 환차이 계산기 전용 CSS (2026-10-16). 2패널 계산형(단순 복리 계산기와 같은 골격) + 결과 안 김프 미터 + 아래 가격 차이 → 수수료 막대·도착 가격 변화 표. 공용 부품은 assets/v2.css. 접두 ecw- */
.ecw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.ecw-in{padding:16px 18px 18px;min-width:0}
.ecw-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.ecw-fields .full{grid-column:1 / -1}
.ecw-seglabel{display:block;margin:0 0 5px}
.ecw-seg{display:flex;flex-wrap:nowrap}
.ecw-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} /* 긴 로케일 라벨(id 'Luar negeri → Lokal')은 버튼 안 두 줄 */
.v2-input.ecw-pre b{border-left:0;border-right:1px solid var(--soft)}
.ecw-presets{display:flex;flex-wrap:wrap;gap:6px}
.ecw-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)}
.ecw-presets button:hover{background:var(--btn);color:var(--ink);border-color:var(--line)}
.ecw-hint{display:block;margin-top:8px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.ecw-help{margin:12px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.ecw-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.ecw-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column;container:ecwout / inline-size}
.ecw-out > .v2-label{display:block;margin-bottom:6px}
.ecw-out .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(18px, calc(100cqi / (var(--ecw-len, 8) * .62)), 1em)} /* 글자 수로 크기를 줄여 큰 금액도 한 줄 */
.ecw-out .v2-big.is-neg span{color:var(--accent)}
.ecw-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)}
/* 김프 미터: 막대 위 = 지금 김프, 막대 아래 = 0%·손익분기, 남는 구간은 칠함 */
.ecw-meter{margin:14px 0 2px}
.ecw-meter > .v2-label{display:block;margin-bottom:26px}
.ecw-mtrk{position:relative;height:10px;margin:0 2px 30px;border-radius:5px;background:var(--soft)}
.ecw-mtrk i{position:absolute;top:0;display:block;font-style:normal}
.ecw-mtrk b{position:absolute;left:0;transform:translateX(-50%);font-family:var(--sans);font-size:11.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.ecw-mtrk .is-l b{transform:none}
.ecw-mtrk .is-r b{transform:translateX(-100%)}
.ecw-zone{height:100%;border-radius:5px;background:repeating-linear-gradient(135deg,var(--accent-wash) 0 6px,transparent 6px 10px);border:1px solid var(--accent);opacity:.9;transition:left 420ms cubic-bezier(.3,.7,.3,1),width 420ms cubic-bezier(.3,.7,.3,1)}
.ecw-zone b{display:none}
.ecw-zero,.ecw-be{width:0;height:18px;top:-4px !important;border-left:1px solid var(--muted);transition:left 420ms cubic-bezier(.3,.7,.3,1)}
.ecw-be{border-left:2px solid var(--ink)}
.ecw-zero b,.ecw-be b{top:22px;color:var(--muted);font-weight:600}
.ecw-be b{color:var(--ink);font-weight:700}
.ecw-now{width:0;height:0;top:5px !important;transition:left 420ms cubic-bezier(.3,.7,.3,1)} /* 값이 바뀌면 표식이 새 김프로 미끄러진다(R45) */
.ecw-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}
.ecw-now.is-ok::before{border-color:var(--accent)}
.ecw-now b{bottom:12px;top:auto;color:var(--ink)}
.ecw-rows{margin-top:10px}
.ecw-rows li span em{display:block;font-style:normal;font-size:11.5px;color:var(--muted)}
.ecw-rows li > span{flex:1 1 auto;min-width:0}
.ecw-rows li b{flex:0 0 auto;text-align:right;white-space:nowrap} /* 값은 한 줄('+0,60 %'가 갈라지지 않게), 줄어드는 쪽은 설명 */
.ecw-rows li.is-miss b{color:var(--muted);font-weight:600}
.ecw-rows li.is-neg b{color:var(--accent)}
.ecw-caveat{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.ecw-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.ecw-caveat + .ecw-foot{margin-top:14px}
.ecw-foot .v2-status{margin-left:auto}
/* 아래: 가격 차이 → 수수료 막대와 도착 가격 변화 표(위아래로 쌓음 — 나란히 두면 es·id 표 머리글이 잘림) */
.ecw-below{border-top:1px solid var(--soft)}
.ecw-below:has(> .ecw-below-in > [hidden]:first-child + [hidden]){display:none}
.ecw-below-in{display:grid;grid-template-columns:minmax(0,1fr)}
.ecw-wf-box,.ecw-sv-box{padding:14px 18px 18px;min-width:0}
.ecw-wf-box > .v2-label,.ecw-sv-box > .v2-label{display:block;margin-bottom:10px}
.ecw-sv-box{border-top:1px solid var(--soft)}
.ecw-wf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:max-content minmax(60px,1fr) max-content;gap:7px 10px;align-items:center;font-family:var(--sans);font-size:12.5px}
.ecw-wf li{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:center}
.ecw-wf li > span:first-child{color:var(--muted)}
.ecw-wf li > b{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ecw-trk{position:relative;display:block;height:14px}
.ecw-trk .ecw-z{position:absolute;top:-3px;bottom:-3px;width:0;border-left:1px dashed var(--line)}
.ecw-trk .ecw-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) */
.ecw-wf li.is-neg .ecw-bar{background:repeating-linear-gradient(135deg,var(--accent) 0 3px,transparent 3px 6px);border:1px solid var(--accent);opacity:.85}
.ecw-wf li.is-neg > b{color:var(--accent)}
.ecw-wf li.is-net .ecw-bar{background:var(--accent);opacity:1}
.ecw-wf li[data-k="net"]{padding-top:7px;border-top:1px solid var(--soft)}
.ecw-sv-box .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.ecw-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.ecw-table th,.ecw-table td{padding:7px 8px;border-top:1px solid var(--soft);text-align:left;white-space:nowrap}
.ecw-table thead th{font-size:11.5px;font-weight:700;color:var(--muted);border-top:0;white-space:normal;vertical-align:bottom} /* 긴 로케일 머리글은 줄바꿈 */
.ecw-table tbody th{font-weight:600}
.ecw-table .n{text-align:right}
.ecw-table td.is-neg{color:var(--accent)}
.ecw-table tr.is-cur th,.ecw-table tr.is-cur td{background:var(--accent-wash);color:var(--ink)}
@media (max-width:720px){
  .ecw-grid{grid-template-columns:minmax(0,1fr)}
  .ecw-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .ecw-in,.ecw-out,.ecw-wf-box,.ecw-sv-box{padding-left:12px;padding-right:12px}
  .ecw-table{font-size:12.5px}
  .ecw-table th,.ecw-table td{padding:7px 3px}
}
@media (prefers-reduced-motion:reduce){ .ecw-zone,.ecw-zero,.ecw-be,.ecw-now,.ecw-trk .ecw-bar{transition:none} }
@container v2in (max-width:330px){ .ecw-fields > .ecw-coin{grid-column:1 / -1} } /* 수량 단위가 긴 언어(es 'monedas')는 반쪽 칸에서 '90,0002'가 잘림 */
@container v2in (max-width:300px){ .ecw-fields{grid-template-columns:minmax(0,1fr)} }