/* 대시보드 '예측 범위' 탭(#forecastRoot, forecast.js가 그린다). 색·간격은 base.css 토큰만.
   클래스 접두사는 fr-(dashboard.css에 .fc-only·.fc-label이 이미 있다).
   판정 배지 색은 "얼마나 믿을 만한가": 강건 --good 테두리, 국면 의존 --warn, 근거 없음 --muted, 나쁨 --bad.
   실제선 --text, 중심선 --accent 점선, 80% 범위 --accent 반투명, 범위 밖 점 --bad, 파동 연장선 --warn 점선.
   2차: 국채금리를 그대로 이어 그린 경로 --muted 점선, 검증 통과 표시 --good 테두리, 참고 표시 --muted,
   주의 상자 --warn 왼쪽 줄, 금리차 역전 --warn 옅은 채움, 경기침체 회색 띠. */

.fr-root {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-width: 0;
}

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

/* 시리즈 칩 4개: 이름 + 요약 한 줄 */
.fr-series {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-1);
}
.fr-sc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-2);
    text-align: left;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.fr-sc:hover { border-color: var(--accent-line); color: var(--text); }
.fr-sc.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.fr-sc-name { font-size: var(--fs-sm); font-weight: 700; }
.fr-sc-line { color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; overflow-wrap: anywhere; }
.fr-sc.is-on .fr-sc-line { color: var(--text-2); }
.fr-sk-chipline { width: 80%; height: 11px; }

/* ── 카드 공통(배경·테두리는 base.css .card, 여백은 dashboard.css .card) ── */
.fr-root .fr-card { gap: var(--sp-3); min-width: 0; }
.fr-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-3);
}
.fr-card-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.fr-card-title { color: var(--text); font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }
.fr-card-desc { max-width: 820px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
.fr-sub-title { margin-top: var(--sp-2); color: var(--text); font-size: var(--fs-sm); font-weight: 700; }

/* 칩 */
.fr-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fr-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface2);
    color: var(--text-2);
    font-size: var(--fs-xs);
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.fr-chip:hover { border-color: var(--accent-line); color: var(--text); }
.fr-chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 700; }

.fr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.fr-row-label { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }

/* 글 */
.fr-sentence { color: var(--text); font-size: var(--fs-sm); font-weight: 600; line-height: 1.6; }
.fr-sub { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.fr-muted { color: var(--muted); font-weight: 400; }
.fr-small { font-size: var(--fs-xs); }
.fr-note { color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
.fr-empty { padding: var(--sp-4) 0; color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.fr-notes {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--muted);
    font-size: var(--fs-xs);
    line-height: 1.55;
}
.fr-notes li { padding-left: 10px; position: relative; }
.fr-notes li::before { content: '·'; position: absolute; left: 0; }
.fr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* 판정 배지: 좋고 나쁨이 아니라 '얼마나 믿을 만한가' */
.fr-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}
.fr-badge.is-robust { border-color: var(--good); color: var(--good); }
.fr-badge.is-regime { border-color: var(--warn); color: var(--warn); }
.fr-badge.is-none   { border-color: var(--border-strong); color: var(--muted); }
.fr-badge.is-bad    { border-color: var(--bad); color: var(--bad); }

/* 범례 */
.fr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-2); font-size: var(--fs-xs); }
.fr-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fr-sw { display: inline-block; flex-shrink: 0; width: 16px; height: 2px; border-radius: 2px; }
.fr-sw.is-actual { background: var(--text); }
.fr-sw.is-actual-soft { background: var(--muted); }
.fr-sw.is-fit { background: var(--accent); }
.fr-sw.is-center, .fr-sw.is-ext, .fr-sw.is-trend, .fr-sw.is-ref { height: 0; border-radius: 0; border-top: 2px dashed var(--accent); }
.fr-sw.is-ext { border-top-color: var(--warn); }
.fr-sw.is-trend { border-top-color: var(--text-2); }
.fr-sw.is-ref { border-top-style: dotted; border-top-color: var(--warn); }
.fr-sw.is-band, .fr-sw.is-band-far {
    width: 14px;
    height: 10px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 3px;
}
.fr-sw.is-band-far { opacity: .5; }
.fr-sw.is-miss { width: 7px; height: 7px; background: var(--bad); border-radius: 50%; }

/* 차트 */
.fr-chart-wrap { position: relative; width: 100%; height: 320px; min-width: 0; }
.fr-chart-wrap--tall { height: 360px; }
.fr-chart-wrap--sm { height: 220px; }
.fr-chart-wrap canvas { touch-action: pan-y !important; }

/* 로딩 자리 */
.fr-sk { display: flex; flex-direction: column; gap: var(--sp-2); }
.fr-root .skeleton { flex-shrink: 0; }
.fr-sk-title { width: 35%; height: 14px; }
.fr-sk-chart { width: 100%; height: 220px; }
.fr-sk-line { width: 100%; height: 12px; }
.fr-sk-line.is-short { width: 60%; }
.fr-root .fr-problem { padding: var(--sp-6) var(--sp-4); }

/* ── A. 보조(일별 실효금리·참고선) ───────────────────── */
.fr-extras { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2) var(--sp-4); }
.fr-tip { min-width: 0; max-width: 100%; }
.fr-tip > summary {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-height: 30px;
    padding: 4px 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-2);
    font-size: var(--fs-xs);
    cursor: pointer;
    list-style: none;
}
.fr-tip > summary::-webkit-details-marker { display: none; }
.fr-tip > summary b { color: var(--text); }
.fr-tip-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    color: var(--muted);
    font-size: .66rem;
    font-weight: 700;
}
.fr-tip[open] > summary { border-color: var(--accent-line); }
.fr-tip > p { max-width: 560px; margin-top: 6px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
.fr-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    color: var(--text-2);
    font-size: var(--fs-xs);
    cursor: pointer;
}
.fr-check input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ── 표(A 지평별 · C 성적표) ─────────────────────────── */
.fr-table-wrap { min-width: 0; overflow-x: auto; }
.fr-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.fr-table th, .fr-table td {
    padding: 8px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}
.fr-table thead th { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; vertical-align: bottom; }
.fr-table th:first-child { padding-left: 0; }
.fr-table tbody th { color: var(--text-2); font-weight: 600; white-space: nowrap; }
.fr-table td { color: var(--text); }
.fr-th-sub { display: block; color: var(--muted); font-weight: 400; }
.fr-model { display: block; color: var(--text-2); }
.fr-band-label { display: block; font-size: var(--fs-xs); }
.fr-ci { display: block; font-size: var(--fs-xs); line-height: 1.45; }
.fr-skill.is-neg, .fr-dec-val.is-neg, .fr-errs .is-neg { color: var(--bad); }

/* C: 행을 누르면 아래에 10년대별 막대 */
.fr-crow { cursor: pointer; }
.fr-crow:hover > th, .fr-crow:hover > td { background: var(--surface2); }
.fr-crow.is-on > th, .fr-crow.is-on > td, .fr-alt.is-on > td { background: var(--accent-soft); }
.fr-hbtn {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.fr-hbtn::after { content: ' ›'; color: var(--muted); }
.fr-hbtn[aria-pressed="true"] { color: var(--accent-hover); }
.fr-alt > td { padding-top: 0; color: var(--muted); font-size: var(--fs-xs); }
.fr-alt.is-on > td, .fr-crow + .fr-alt > td { border-top: 0; }

.fr-decades {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4);
    background: var(--surface2);
    border-radius: var(--radius-md);
    min-width: 0;
}
.fr-dec-title { color: var(--text); font-size: var(--fs-sm); font-weight: 700; }
.fr-verdict-text { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.fr-dec-list { display: flex; flex-direction: column; gap: 6px; }
.fr-dec-row {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) 52px 76px;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.fr-dec-row.is-thin { opacity: .45; }
.fr-dec-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; color: var(--text-2); font-size: var(--fs-sm); }
.fr-dec-label .fr-muted { font-size: .7rem; }
.fr-dec-track { position: relative; height: 12px; background: var(--surface3); border-radius: 6px; }
.fr-dec-zero { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--border-strong); }
.fr-dec-bar { position: absolute; top: 0; bottom: 0; min-width: 2px; background: var(--accent); border-radius: 3px; }
.fr-dec-bar.is-neg { background: var(--bad); }
.fr-dec-val { color: var(--text); font-size: var(--fs-sm); font-weight: 700; text-align: right; white-space: nowrap; }
.fr-dec-cov { color: var(--muted); font-size: var(--fs-xs); text-align: right; white-space: nowrap; }
/* 중심선이 '지금 값 유지'인 행: 막대 없이 범위 적중만 */
.fr-root .fr-dec-row.fr-dec-row--cov { grid-template-columns: 104px minmax(0, 1fr); }
.fr-dec-covonly { color: var(--text); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }

/* 읽는 법 · 예전 AI 예측선 */
.fr-how > summary, .fr-root .fr-why > summary {
    display: flex;
    align-items: center;
    min-height: 36px;
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.fr-how > summary:hover, .fr-root .fr-why > summary:hover { color: var(--text); }
.fr-how > summary::-webkit-details-marker, .fr-root .fr-why > summary::-webkit-details-marker { display: none; }
.fr-how > summary { list-style: none; }
.fr-root .fr-why > summary { list-style: none; }
.fr-how > summary::after, .fr-root .fr-why > summary::after {
    content: '+';
    margin-left: var(--sp-2);
    color: var(--muted);
    font-weight: 400;
}
.fr-how[open] > summary::after, .fr-root .fr-why[open] > summary::after { content: '−'; }
.fr-how > p, .fr-how > ul, .fr-why-body p, .fr-why-body ul {
    margin-top: var(--sp-2);
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.65;
}
.fr-how > ul, .fr-why-body ul { padding-left: 18px; }
.fr-how b { color: var(--text); }
.fr-root .fr-why { display: block; }
.fr-root .fr-why > summary { font-size: var(--fs-md); color: var(--text); }

/* ── B. 슬라이더 ───────────────────────────────────── */
.fr-slider {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}
.fr-range { width: 100%; min-width: 0; height: 30px; accent-color: var(--accent); cursor: pointer; }
.fr-output { min-width: 88px; color: var(--text); font-size: var(--fs-sm); font-weight: 700; text-align: right; white-space: nowrap; }

/* ── D. 파동 방식 ─────────────────────────────────── */
.fr-wave-sum {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface2);
    border-radius: var(--radius-md);
}
.fr-wave-fit { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }
.fr-wave-fit b { color: var(--text); }
.fr-wave-miss { color: var(--text); font-size: var(--fs-sm); font-weight: 700; line-height: 1.6; }
.fr-demo-text { display: flex; flex-direction: column; gap: 4px; }
.fr-errs { list-style: none; display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); font-size: var(--fs-xs); color: var(--text-2); }
.fr-errs-h { color: var(--muted); }
.fr-conclusion {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface2);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.65;
}
.fr-conclusion-title { color: var(--text); font-weight: 700; }

.fr-disclaimer { margin: 0 2px var(--sp-5); color: var(--muted); font-size: .74rem; line-height: 1.6; }

/* ── 2차: 검증 통과 / 참고 표시, 주의 상자 ─────────────────── */
/* 카드 자리(연방기금금리 경로·비슷했던 과거): 비어 있으면 상자도 간격도 없다 */
.fr-wrap { display: contents; }
.fr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 9px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    white-space: nowrap;
}
.fr-tag.is-pass { border-color: var(--good); color: var(--good); }
.fr-tag.is-ref  { border-color: var(--border-strong); color: var(--muted); }
.fr-tag.is-auto { border-color: var(--accent-line); color: var(--accent-hover); }

.fr-callout {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--warn-soft);
    border-left: 3px solid var(--warn);
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.6;
}
.fr-more > summary {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    color: var(--text-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.fr-more > summary::-webkit-details-marker { display: none; }
.fr-more > summary::after { content: '+'; margin-left: 6px; color: var(--muted); font-weight: 400; }
.fr-more[open] > summary::after { content: '−'; }
.fr-more > p { margin-top: 4px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
/* 주가 A 카드 "왜 선이 1자인가요?" — 사용자가 직접 물은 내용이라 본문 크기로 */
.fr-why-line > summary { color: var(--accent); font-size: var(--fs-sm); }
.fr-why-line > p { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; }

.fr-sw.is-m1 { height: 0; border-radius: 0; border-top: 2px dotted var(--muted); }
.fr-sw.is-inv { width: 14px; height: 10px; background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 3px; }
.fr-sw.is-rec { width: 14px; height: 10px; background: var(--surface3); border: 1px solid var(--border-strong); border-radius: 3px; }
.fr-sw.is-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }

/* 성적표: 직전 방식 대비·범위 점수 줄, 자동 판정 줄 */
.fr-prev { display: block; margin-top: 2px; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.45; }
.fr-alt--switch > td, .fr-alt--vix > td { line-height: 1.55; }
.fr-switch-head { color: var(--text-2); font-weight: 600; }
.fr-switch-reason { color: var(--muted); }
.fr-dec-title--sub { margin-top: var(--sp-2); }
.fr-root .fr-dec-row.fr-dec-row--nocov { grid-template-columns: 104px minmax(0, 1fr) 52px; }

/* 주가 1개월: VIX 구간별 범위 적중(예전 → 지금) */
.fr-vix { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 2px; }
.fr-vix-title { color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; }
.fr-vix-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
.fr-vix-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fr-vix-label { color: var(--text-2); font-size: var(--fs-xs); }
.fr-vix-line { display: grid; grid-template-columns: 30px minmax(0, 1fr) 36px; align-items: center; gap: 6px; }
.fr-vix-name { color: var(--muted); font-size: .7rem; }
.fr-vix-track { position: relative; height: 8px; background: var(--surface3); border-radius: 4px; }
.fr-vix-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.fr-vix-bar.is-prev { background: var(--border-strong); }
.fr-vix-bar.is-now { background: var(--accent); }
.fr-vix-target { position: absolute; top: -3px; bottom: -3px; left: 80%; width: 1px; background: var(--text-2); }
.fr-vix-val { color: var(--text); font-size: var(--fs-xs); text-align: right; white-space: nowrap; }

/* 연방기금금리 경로 카드 */
.fr-rawline { color: var(--text); font-size: var(--fs-sm); font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.fr-table td.is-weak, .fr-table td.is-weak .num { color: var(--muted); }
.fr-table .is-neg { color: var(--bad); }

/* 참고 카드(접힘): 금리차와 경기침체 · 비슷했던 과거 */
.fr-root .fr-ref { display: block; }
.fr-root .fr-ref > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--sp-2);
    min-height: 36px;
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.fr-root .fr-ref > summary::-webkit-details-marker { display: none; }
.fr-root .fr-ref > summary::after { content: '+'; margin-left: auto; color: var(--muted); font-weight: 400; }
.fr-root .fr-ref[open] > summary::after { content: '−'; }
.fr-ref-title { min-width: 0; overflow-wrap: anywhere; }
.fr-ref-body { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); min-width: 0; }
/* 아직 침체가 오지 않은 역전 행: 경고색 대신 흐린 기울임(이 카드는 신호를 계산하지 않는다) */
.fr-table--inv tr.is-open > th, .fr-table--inv tr.is-open > td { color: var(--muted); font-style: italic; }
.fr-feats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px var(--sp-4);
    font-size: var(--fs-xs);
}
.fr-feats li { display: flex; justify-content: space-between; gap: var(--sp-2); min-width: 0; padding: 3px 0; border-bottom: 1px solid var(--border); }
.fr-feat-label { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.fr-feat-val { color: var(--text); white-space: nowrap; }

/* ── 중간 폭: 표를 행마다 '라벨: 값' 카드로 ──────────────── */
@media (max-width: 760px) {
    .fr-table thead { display: none; }
    .fr-table, .fr-table tbody, .fr-table tr, .fr-table th, .fr-table td { display: block; width: 100%; }
    .fr-table tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
    .fr-table th, .fr-table td { padding: 3px 0; border-bottom: 0; }
    .fr-table td[data-label] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
    .fr-table td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        max-width: 45%;
        color: var(--muted);
        font-size: var(--fs-xs);
    }
    .fr-cell { min-width: 0; text-align: right; }
    .fr-table tbody th { font-size: var(--fs-sm); }
    .fr-crow { padding: 8px 10px; border-radius: var(--radius-sm); }
    .fr-crow.is-on, .fr-alt.is-on { background: var(--accent-soft); }
    .fr-crow.is-on > th, .fr-crow.is-on > td, .fr-alt.is-on > td,
    .fr-crow:hover > th, .fr-crow:hover > td { background: transparent; }
    .fr-crow:has(+ .fr-alt) { border-bottom: 0; }
    .fr-alt { padding: 0 10px 8px; }
    .fr-alt > td { padding: 0; }
    .fr-decades { padding: var(--sp-3); }
    /* 금리차 역전 표·비슷했던 과거 표: 행마다 칸 3개를 한 줄에(라벨 위, 값 아래) — 줄 수를 줄인다 */
    .fr-table.fr-table--inv tr, .fr-table.fr-table--an tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px var(--sp-2);
    }
    .fr-table--inv tbody th, .fr-table--an tbody th { grid-column: 1 / -1; }
    .fr-table--inv td[data-label], .fr-table--an td[data-label] { flex-direction: column; align-items: flex-start; gap: 0; }
    .fr-table--inv td[data-label]::before, .fr-table--an td[data-label]::before { max-width: none; }
    .fr-table--inv .fr-cell, .fr-table--an .fr-cell { text-align: left; }
}

/* ── 폰(≤640px) ───────────────────────────────────── */
@media (max-width: 640px) {
    .fr-series { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fr-sc { padding: 8px 10px; }
    .fr-card-head { flex-direction: column; align-items: stretch; }
    .fr-card-titles { flex-basis: auto; }
    /* 터치 영역 44px, 칩은 줄바꿈 */
    .fr-chip { height: 44px; padding: 0 14px; font-size: var(--fs-sm); }
    .fr-tip > summary, .fr-check { min-height: 44px; }
    .fr-hbtn { min-height: 44px; }
    .fr-root .btn-sm { height: 44px; padding: 0 16px; }
    .fr-how > summary, .fr-root .fr-why > summary { min-height: 44px; }
    .fr-chart-wrap { height: 240px; }
    .fr-chart-wrap--tall { height: 260px; }
    .fr-chart-wrap--sm { height: 200px; }
    .fr-sk-chart { height: 180px; }
    .fr-slider { grid-template-columns: minmax(0, 1fr) auto; }
    .fr-slider .fr-row-label { grid-column: 1 / -1; }
    .fr-range { height: 44px; }
    .fr-dec-row { grid-template-columns: 76px minmax(0, 1fr) 44px 62px; gap: 8px; }
    .fr-dec-label { font-size: var(--fs-xs); }
    .fr-dec-val { font-size: var(--fs-xs); }
    .fr-root .fr-dec-row.fr-dec-row--cov { grid-template-columns: 76px minmax(0, 1fr); }
    .fr-dec-covonly { font-size: var(--fs-xs); }
    .fr-root .fr-dec-row.fr-dec-row--nocov { grid-template-columns: 76px minmax(0, 1fr) 44px; }
    .fr-more > summary, .fr-root .fr-ref > summary { min-height: 44px; }
    .fr-vix-grid { grid-template-columns: minmax(0, 1fr); }
    .fr-feats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 360px) {
    .fr-dec-row { grid-template-columns: 68px minmax(0, 1fr) 40px; }
    .fr-root .fr-dec-row.fr-dec-row--cov { grid-template-columns: 68px minmax(0, 1fr); }
    .fr-root .fr-dec-row.fr-dec-row--nocov { grid-template-columns: 68px minmax(0, 1fr) 40px; }
    .fr-dec-cov { display: none; }
}