/* 대시보드 '달러·환율' 탭(#fxRoot, fx.js가 그린다). 색·간격은 base.css 토큰만.
   원/달러 상승을 좋다/나쁘다로 단정하지 않으므로 상태색(초록·빨강)은 쓰지 않는다:
   원/달러 = --accent, 달러 전체(달러 인덱스) = --text-2, 원화 고유 요인 = --warn. */

.fx-root {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
    --fx-lab: 112px;   /* 막대 행: 이름 칸 */
    --fx-val: 58px;    /* 막대 행: 값 칸 */
    --fx-gap: 10px;
}

.fx-head { display: flex; flex-direction: column; gap: var(--sp-1); padding: 2px 2px 0; }
.fx-title { color: var(--text); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.fx-lede { max-width: 760px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; }

.fx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }

/* 카드(배경·테두리는 base.css .card) */
.fx-root .fx-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
    padding: var(--sp-5);
}
.fx-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-3);
}
.fx-card-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fx-card-title { color: var(--text); font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }
.fx-card-desc { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }

/* 기간·범위 칩(base.css .choice를 작게) */
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-root .fx-chip { height: 30px; padding: 0 12px; font-size: var(--fs-xs); }

/* 문장·보조 글 */
.fx-sentence { color: var(--text); font-size: var(--fs-sm); font-weight: 600; line-height: 1.6; }
.fx-sub { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.fx-meta { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.fx-foot {
    margin-top: auto;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.55;
}
.fx-note { color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
.fx-empty { padding: var(--sp-6) 0; color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.fx-source { padding: 0 2px var(--sp-2); color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; }

/* 로딩 자리 */
.fx-root .skeleton { flex-shrink: 0; }
.fx-sk-title { width: 40%; height: 14px; }
.fx-sk-big { width: 55%; height: 34px; }
.fx-sk-line { width: 100%; height: 12px; }
.fx-sk-line.is-short { width: 60%; }

.fx-error { padding: var(--sp-6) var(--sp-4); }

/* ── ① 지금 원/달러 ──────────────────────────────── */
.fx-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.fx-now-val {
    color: var(--text);
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
}
.fx-now-meta { color: var(--muted); font-size: var(--fs-xs); }

.fx-chgs { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chg {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: var(--fs-xs);
    white-space: nowrap;
}
.fx-chg-k { color: var(--muted); }
.fx-chg-arrow { color: var(--text-2); font-size: .66rem; }
.fx-chg-v { color: var(--text); font-weight: 700; }

/* 10년 위치 막대(백분위) */
.fx-pos { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-1); }
.fx-pos-label { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.fx-pos-track {
    position: relative;
    height: 8px;
    margin: 4px 7px;
    background: var(--surface3);
    border-radius: 999px;
}
.fx-pos-tick {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 1px;
    background: var(--border-strong);
}
.fx-pos-dot {
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border: 3px solid var(--surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--accent);
    transform: translate(-50%, -50%);
}
.fx-pos-ends {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    color: var(--muted);
    font-size: var(--fs-xs);
}
.fx-pos-ends span { display: flex; flex-direction: column; min-width: 0; }
.fx-pos-ends .is-right { align-items: flex-end; text-align: right; }
.fx-pos-ends b { color: var(--text-2); font-weight: 600; }
.fx-pos-text { color: var(--text); font-size: var(--fs-sm); font-weight: 600; }

/* 1년 추이(SVG) */
.fx-spark { display: flex; flex-direction: column; gap: 4px; }
.fx-spark-plot { position: relative; height: 64px; }
.fx-spark-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-spark-area { fill: var(--accent-soft); stroke: none; }
.fx-spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fx-spark-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border: 2px solid var(--surface);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.fx-spark-axis {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    color: var(--muted);
    font-size: var(--fs-xs);
}
.fx-spark-range { text-align: center; }

/* ── 0 기준 좌우 막대(② 왜 움직였나 · ④ 주요 통화) ─── */
.fx-bars { display: flex; flex-direction: column; gap: var(--sp-2); }
.fx-bar-row, .fx-peer {
    display: grid;
    grid-template-columns: var(--fx-lab) minmax(0, 1fr) var(--fx-val);
    align-items: center;
    gap: var(--fx-gap);
    min-width: 0;
}
.fx-bar-row.is-total {
    margin-top: 2px;
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--border-strong);
}
.fx-bar-label { color: var(--text-2); font-size: var(--fs-sm); min-width: 0; }
.fx-bar-row.is-total .fx-bar-label { color: var(--text); font-weight: 700; }
.fx-bar-track {
    position: relative;
    height: 12px;
    background: var(--surface2);
    border-radius: 6px;
}
.fx-bar-zero {
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 50%;
    width: 1px;
    background: var(--border-strong);
}
.fx-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 2px;
    border-radius: 3px;
}
.fx-bar.is-dxy   { background: var(--text-2); }
.fx-bar.is-local { background: var(--warn); }
.fx-bar.is-krw   { background: var(--accent); }
.fx-bar.is-peer  { background: var(--muted); }
.fx-bar-val { color: var(--text); font-size: var(--fs-sm); font-weight: 700; text-align: right; white-space: nowrap; }
.fx-bar-axis {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    margin: 0 calc(var(--fx-val) + var(--fx-gap)) 0 calc(var(--fx-lab) + var(--fx-gap));
    color: var(--muted);
    font-size: .7rem;
}

/* ③ 비교 차트 */
.fx-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-2); font-size: var(--fs-xs); }
.fx-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fx-sw { display: inline-block; flex-shrink: 0; width: 16px; height: 3px; border-radius: 2px; }
.fx-sw.is-krw { height: 3px; background: var(--accent); }
.fx-sw.is-dxy { height: 2px; background: var(--text-2); }
.fx-sw.is-gap { width: 12px; height: 12px; background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 3px; }

.fx-chart-wrap { position: relative; width: 100%; height: 300px; min-width: 0; }
.fx-chart-wrap--sm { height: 200px; }
.fx-chart-wrap canvas { touch-action: pan-y !important; }
.fx-card.is-loading .fx-chart-wrap canvas { opacity: .45; transition: opacity .15s; }
.fx-chart-msg {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--fs-sm);
    text-align: center;
}

/* ④ 주요 통화 */
.fx-peers { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.fx-peer { padding: 5px 6px; border-radius: var(--radius-sm); }
.fx-peer.is-krw { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.fx-peer-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fx-peer-n { color: var(--text-2); font-size: var(--fs-sm); }
.fx-peer.is-krw .fx-peer-n { color: var(--text); font-weight: 800; }
.fx-peer-code { color: var(--muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-bar-axis--peers { margin-left: calc(var(--fx-lab) + var(--fx-gap) + 6px); margin-right: calc(var(--fx-val) + var(--fx-gap) + 6px); }

/* ⑤ 한미 금리차 */
.fx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.fx-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    background: var(--surface2);
    border-radius: var(--radius-md);
}
.fx-stat-k { color: var(--muted); font-size: var(--fs-xs); }
.fx-stat-v { color: var(--text); font-size: var(--fs-lg); font-weight: 700; white-space: nowrap; }
.fx-stat-sub { color: var(--muted); font-size: .7rem; }
.fx-stat.is-diff { box-shadow: inset 0 0 0 1px var(--accent-line); }
.fx-stat.is-diff .fx-stat-v { color: var(--accent-hover); }

/* ⑥ 내 투자에 미치는 영향 */
.fx-effect-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.fx-effect-main { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.fx-table-wrap { min-width: 0; }
.fx-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.fx-table th, .fx-table td { padding: 8px 8px; border-bottom: 1px solid var(--border); text-align: right; }
.fx-table thead th { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; vertical-align: bottom; }
.fx-table th:first-child { padding-left: 0; text-align: left; }
.fx-table tbody th { color: var(--text-2); font-weight: 600; }
.fx-table td { color: var(--text); white-space: nowrap; }
.fx-arrow-to { color: var(--muted); }
.fx-table td.fx-effect { color: var(--accent-hover); font-weight: 700; }

.fx-bp {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--surface2);
    border-radius: var(--radius-md);
}
.fx-bp-line { color: var(--text-2); font-size: var(--fs-sm); }
.fx-bp-line b { color: var(--text); }
.fx-bp-vals { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.fx-bp-vals > span { display: flex; flex-direction: column; gap: 2px; }
.fx-bp-vals b { color: var(--text); font-size: var(--fs-xl); font-weight: 800; line-height: 1.15; }
.fx-bp-ago b { color: var(--text-2); }

.fx-principle {
    padding-left: var(--sp-3);
    border-left: 3px solid var(--border-strong);
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* ── 레이아웃 ─────────────────────────────────────── */
@media (min-width: 960px) {
    .fx-grid--a { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .fx-grid--b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-effect-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}

@media (max-width: 640px) {
    .fx-root { --fx-lab: 96px; --fx-val: 52px; --fx-gap: 8px; }
    .fx-root .fx-card { padding: var(--sp-4); }
    .fx-card-head { flex-direction: column; align-items: stretch; }
    /* 터치 영역 44px, 칩은 줄바꿈 */
    .fx-root .fx-chip { height: 44px; padding: 0 14px; font-size: var(--fs-sm); }
    /* [다시 시도] 버튼(차트 안 메시지·ANUI.empty)도 44px */
    .fx-root .btn-sm { height: 44px; padding: 0 16px; }
    .fx-now-val { font-size: 2.2rem; }
    .fx-chart-wrap { height: 240px; }
    .fx-chart-wrap--sm { height: 180px; }
    .fx-bar-label { font-size: var(--fs-xs); }
    .fx-stat { padding: 8px 10px; }
    .fx-stat-v { font-size: var(--fs-md); }
    .fx-table { font-size: var(--fs-xs); }
    .fx-table th, .fx-table td { padding: 8px 4px; }
    .fx-table td { white-space: normal; }
    .fx-arrow-to { display: none; }
    .fx-spark-range { display: none; }
}

@media (max-width: 360px) {
    .fx-root { --fx-lab: 84px; --fx-val: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-card.is-loading .fx-chart-wrap canvas { transition: none; }
}