/* market-top.css — /market 머리띠와 📊 오늘 시장 탭 (static/js/market-top.js, docs/market-page-redesign-design.md §3·§5).
   인라인 <style> 의 스코프 규칙(.mp-pane/.mr-pane/.bf-)과 부딪치지 않게 .mt-·.mk-·.ms-section 접두어만 쓰는 별도 파일 */
/*    색은 전부 tokens.css: 등락 --up/--down(한국식 오름 빨강), 전문가 --view-*, 점수 구간은 시장 점수 카드와 같은 규칙 */

/* 머리띠 — 홈의 '오늘 시장 한눈에' 띠와 같은 칩(home.css .ov-*). 여기선 탭 줄 바로 위라 아래 여백만 줄이고, 전문가 칩 색과 '최신 값' 표시를 더한다 */
.mk-strip { margin: 0 0 6px; }
.ov-v.ov-view-bull { color: var(--view-bull); }
.ov-v.ov-view-bear { color: var(--view-bear); }
.ov-v.ov-view-neutral { color: var(--view-neutral); }
.mk-strip-latest { align-self: center; }
.mt-top { margin: 4px 0 12px; }
/* 데스크톱: 점수 카드 | 수급 카드 두 열, 업종 흐름·달라진 점은 그 아래 전체 폭. 폰(900px 이하)은 한 열 */
.mt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.mt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; min-width: 0; }
.mt-card .ms-head, .mt-h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.mt-card .ms-head h2, .mt-h2 { font-size: 15px; color: var(--text-strong); }
.mt-h2 .mt-lead { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.mt-flows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mt-slot { min-width: 0; }
.mt-flow { box-sizing: border-box; background: var(--bg-inset); border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.mt-info { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; min-height: 18px; color: var(--text-muted); cursor: help; }
.mt-latest { padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.mt-loading { color: var(--text-muted); font-size: 12px; padding: 8px 0; }
.mt-flow-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 6px; }
.mt-flow-name { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.mt-flow-px { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mt-flow-chg { font-size: 13px; font-weight: 700; }
.mt-up { color: var(--up); } .mt-down { color: var(--down); } .mt-flat { color: var(--text-secondary); }
/* 가운데 0 기준 좌우 막대 — 오른쪽(+) 빨강, 왼쪽(−) 파랑. 길이는 호스트 칸(절반)의 %라 두 막대가 가운데에서 갈라진다 */
.mt-bar-row { display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 6.6em; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.mt-bar-name { color: var(--text-secondary); }
.mt-bar { position: relative; height: 10px; border-radius: 5px; background: var(--bg-card); overflow: hidden; }
.mt-bar::after { content: ''; position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: var(--text-muted); opacity: .6; }
.mt-bar-fill { position: absolute; top: 0; bottom: 0; }
.mt-bar-up { left: 50%; background: var(--up); border-radius: 0 5px 5px 0; }
.mt-bar-down { right: 50%; background: var(--down); border-radius: 5px 0 0 5px; }
.mt-bar-val { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-flow-time, .mt-flow-late { margin-top: 6px; color: var(--text-muted); font-size: 11px; }
.mt-flow-late { color: var(--warn); font-size: 13px; margin-top: 2px; }
.mt-diffbox { margin-top: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 14px; }
.mt-diffbox[hidden] { display: none; }
.mt-diff-title { font-size: 13px; font-weight: 700; color: var(--text-strong); margin-bottom: 4px; }
.mt-diff { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.mt-diff li { padding: 3px 0; overflow-wrap: anywhere; }
.mt-diff-k { display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 600; }
/* 업종 흐름 상자 — 두 열(상승·하락) + 칩 두 줄. 막대 길이는 열 안 최대값 기준 */
.mt-sectors { margin-top: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 14px; }
.mt-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 6px; }
.mt-sec-title { margin: 0; }
.mt-sec-tabs { display: inline-flex; gap: 4px; margin-right: auto; }
.mt-sec-tab { font: inherit; font-size: 12px; font-weight: 600; padding: 2px 12px; border-radius: 999px; cursor: pointer; background: var(--bg-inset); color: var(--text-secondary); border: 1px solid var(--border); }
.mt-sec-tab.is-on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-text); }
.mt-sec-tab:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.mt-sec-meta { color: var(--text-muted); font-size: 11px; }
.mt-sec-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.mt-sec-col { min-width: 0; }
.mt-sec-coltitle { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 4px 0; }
.mt-sec-list { list-style: none; margin: 0; padding: 0; }
.mt-sec-list li { display: grid; grid-template-columns: 1.4em minmax(0, 7.5em) minmax(24px, 1fr) 4.6em; align-items: center; gap: 6px; padding: 3px 0; font-size: 12px; }
.mt-sec-rank { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mt-sec-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); }
.mt-sec-bar { position: relative; height: 8px; border-radius: 4px; background: var(--bg-inset); overflow: hidden; }
.mt-sec-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.mt-sec-fill.mt-bar-up { background: var(--up); left: 0; right: auto; }
.mt-sec-fill.mt-bar-down { background: var(--down); left: 0; right: auto; }
.mt-sec-pct { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-sec-none { color: var(--text-muted); font-size: 12px; padding: 4px 0; }
/* 업종 딥링크(#sectors&…)로 고른 업종 — 패널과 목록 행·칩 강조 (docs/entity-links-design.md §2) */
.mt-sec-focus { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 8px; padding: 8px 10px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent-text); font-size: 13px; scroll-margin-top: 80px; }
.mt-sec-focus-t { font-weight: 700; color: var(--text-strong); }
.mt-sec-focus-fi { color: var(--text-secondary); font-size: 12px; }
.mt-sec-focus-chips { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mt-sec-focus-chips .mt-sec-chiplabel { min-width: 0; }
.mt-sec-list li.is-focus { background: var(--accent-soft); border-radius: 4px; }
.mt-chip.el-ent { text-decoration: none; }
.mt-chip.is-focus { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.mt-sec-name .el-ent, .mt-chip .el-ent { text-decoration-color: transparent; }
.mt-sec-name .el-ent:hover, .mt-chip .el-ent:hover { text-decoration-color: var(--accent-text); }
.mt-sec-chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.mt-sec-chiplabel { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 8.5em; }
.mt-chip { padding: 2px 9px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.mt-chip b { font-variant-numeric: tabular-nums; }
.mt-chip-up { background: var(--up-bg); color: var(--up-text); }
.mt-chip-down { background: var(--down-bg); color: var(--down-text); }
@media (max-width: 900px) {
    .mt-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .mt-card { padding: 12px; }
    .mt-sec-cols { grid-template-columns: minmax(0, 1fr); }
    .mt-sec-chiplabel { flex-basis: 100%; }
}

/* ---- 🧭 시장 점수 카드 (static/js/market-score.js 가 그린다) — 오늘 시장 탭(한국 #mscoreBoxKR)·시황 리포트 탭(미국 #mscoreBox) ----
   구간 색은 한국 HTS 처럼 강세 = --buy(빨강), 약세 = --sell(파랑), 중립 = 무채색 — index.html 점수 배지와 같은 규칙.
   ms-t-bb 매우 강세 · b 강세 · n 중립 · s 약세 · ss 매우 약세 */
.ms-section .ms-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 14px;
                    padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.ms-section .ms-head h2 { margin: 0; padding: 0; border: none; }
.ms-section .ms-lead { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.ms-section .ms-card { background: var(--bg-inset); border-radius: var(--radius-lg); padding: 14px; min-width: 0; }
.ms-section .ms-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.ms-section .ms-mk { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.ms-section .ms-idx { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.ms-section .ms-date { font-size: 12px; color: var(--text-secondary); }
.ms-section .ms-fallback { margin-top: 4px; font-size: 12px; color: var(--warn); }
.ms-section .ms-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 6px 0 10px; }
.ms-section .ms-score { font-size: 40px; font-weight: 800; line-height: 1.1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ms-section .ms-score.ms-t-b, .ms-section .ms-score.ms-t-bb { color: var(--buy); }
.ms-section .ms-score.ms-t-s, .ms-section .ms-score.ms-t-ss { color: var(--sell); }
.ms-section .ms-band { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.ms-section .ms-band.ms-t-b { background: var(--buy-bg); color: var(--buy-text); }
.ms-section .ms-band.ms-t-bb { background: color-mix(in srgb, var(--buy) 85%, black); color: var(--text-on-accent); }
.ms-section .ms-band.ms-t-s { background: var(--sell-bg); color: var(--sell-text); }
.ms-section .ms-band.ms-t-ss { background: color-mix(in srgb, var(--sell) 85%, black); color: var(--text-on-accent); }
.ms-section .ms-band.ms-t-n, .ms-section .ms-band.ms-t-none { background: color-mix(in srgb, var(--text-muted) 20%, transparent); color: var(--text-secondary); }
.ms-section .ms-badge { padding: 2px 8px; border: 1px solid var(--warn); border-radius: 999px; background: var(--warn-bg);
                     color: var(--warn); font-size: 11px; font-weight: 600; white-space: nowrap; }
.ms-section .ms-factors { list-style: none; margin: 0; padding: 0; }
/* 요인 줄: 이름(눌러 펼침) | 0~100 막대(왼쪽부터) | 점수 + 상태 라벨, 펼치면 근거 한 줄 + 입력값 목록.
   상태 색 --lv-* 는 tokens.css (70+ 양호 · 50–69 보통 · 30–49 주의 · 0–29 위험) — 강세·약세 빨강/파랑과 섞이지 않게 따로 둔다 */
.ms-section .ms-f { display: grid; grid-template-columns: 7.4em minmax(0, 1fr) 5.4em; align-items: center; gap: 2px 8px;
                 padding: 6px 0; border-top: 1px solid var(--border-soft); font-size: 13px; }
.ms-section .ms-f-name { color: var(--text-secondary); line-height: 1.25; word-break: keep-all; text-align: left; }
.ms-section button.ms-f-name { min-height: 32px; padding: 0 14px 0 0; border: none; background: transparent; font: inherit; cursor: pointer; position: relative; }
.ms-section button.ms-f-name::after { content: '▾'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--text-muted); }
.ms-section button.ms-f-name[aria-expanded="true"]::after { content: '▴'; }
.ms-section button.ms-f-name:hover { color: var(--text-primary); }
.ms-section .ms-bar { position: relative; height: 8px; border-radius: 4px; background: var(--bg-card); overflow: hidden; }
.ms-section .ms-bar-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--text-muted); }
.ms-section .ms-bar-fill.ms-lv-good { background: var(--lv-good); }
.ms-section .ms-bar-fill.ms-lv-mid { background: var(--lv-mid); }
.ms-section .ms-bar-fill.ms-lv-warn { background: var(--lv-warn); }
.ms-section .ms-bar-fill.ms-lv-bad { background: var(--lv-bad); }
.ms-section .ms-f-score { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.ms-section .ms-f-num { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.ms-section .ms-f-lv { font-size: 11px; font-weight: 700; }
.ms-section .ms-f-lv.ms-lv-good { color: var(--lv-good); }
.ms-section .ms-f-lv.ms-lv-mid { color: var(--lv-mid); }
.ms-section .ms-f-lv.ms-lv-warn { color: var(--lv-warn); }
.ms-section .ms-f-lv.ms-lv-bad { color: var(--lv-bad); }
.ms-section .ms-f-ins { grid-column: 1 / -1; list-style: none; margin: 2px 0 0; padding: 6px 8px; border-radius: var(--radius); background: var(--bg-card); }
.ms-section .ms-f-ins[hidden], .ms-section .ms-f-why[hidden] { display: none; }
.ms-section .ms-f-in { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 12px; }
.ms-section .ms-f-in-k { color: var(--text-secondary); min-width: 0; overflow-wrap: anywhere; }
.ms-section .ms-f-in-v { color: var(--text-primary); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ms-section .ms-legend { margin: 8px 0 0; color: var(--text-muted); font-size: 11px; }
.ms-section .ms-f-why { grid-column: 1 / -1; color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
.ms-section .ms-f-none { grid-column: 2 / -1; color: var(--text-muted); font-size: 12px; }
.ms-section .ms-sub { margin: 12px 0 4px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.ms-section .ms-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ms-section .ms-chip { padding: 1px 7px; border: 1px solid var(--border-soft); border-radius: 6px; background: var(--bg-card); font-size: 12px; }
.ms-section .ms-changes { margin: 0; padding-left: 18px; font-size: 12px; }
.ms-section .ms-changes li { margin: 2px 0; overflow-wrap: anywhere; }
.ms-section .ms-trend { display: block; width: 100%; height: auto; }
.ms-section .ms-trend .ms-zone-b { fill: var(--buy-bg); }
.ms-section .ms-trend .ms-zone-s { fill: var(--sell-bg); }
.ms-section .ms-trend .ms-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.ms-section .ms-trend .ms-line { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.ms-section .ms-trend .ms-dot { fill: var(--accent); }
.ms-section .ms-trend .ms-axis { fill: var(--chart-axis); font-size: 10px; }
.ms-section .ms-valid { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--border); }
.ms-section .ms-valid summary { padding: 8px 0; cursor: pointer; font-size: 14px; font-weight: 600; }
.ms-section .ms-vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.ms-section .ms-vt { min-width: 0; }
.ms-section .ms-vt h3 { margin: 0 0 6px; font-size: 13px; }
.ms-section .ms-vt td.ms-vb { text-align: left; }
.ms-section .ms-vt .ms-band { padding: 1px 8px; font-size: 12px; }
.ms-section .ms-vt tr.ms-vall td { font-weight: 700; }
.ms-section .ms-note { margin-top: 10px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
/* 카드 안 표(검증 표) — 시황 탭의 .mr-pane 표와 같은 값. 오늘 시장 탭에도 걸리게 상자 아래로 */
.ms-section .table-wrap { overflow-x: auto; }
.ms-section table { width: 100%; border-collapse: collapse; }
.ms-section th { background: var(--bg-inset); padding: 10px 6px; font-size: 12px; color: var(--text-secondary); text-align: center; white-space: nowrap; }
.ms-section td { padding: 8px 6px; text-align: center; border-top: 1px solid var(--border-soft); font-size: 13px; }
.ms-section .ms-vgrid-1 { grid-template-columns: minmax(0, 1fr); }
.ms-section .ms-card-solo { background: transparent; padding: 0; }
@media (max-width: 560px) {
    .ms-section .ms-vgrid { grid-template-columns: minmax(0, 1fr); }
    .ms-section .ms-score { font-size: 34px; }
    .ms-section th, .ms-section td { padding: 8px 4px; font-size: 12px; }
}

/* ---- 📐 기술적 위치 (static/js/tech-outlook.js, docs/technical-outlook-design.md §6) — 시장별 카드 두 장, 칩은 줄바꿈(390px) ---- */
.to-box { margin-top: 12px; }
.to-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.to-card { box-sizing: border-box; background: var(--bg-inset); border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.to-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 6px; color: var(--text-strong); }
.to-close { font-weight: 700; font-variant-numeric: tabular-nums; }
.to-chg { font-size: 12px; font-variant-numeric: tabular-nums; }
.to-chg.to-up { color: var(--buy); }
.to-chg.to-down { color: var(--sell); }
.to-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.to-chip { display: inline-flex; align-items: baseline; gap: 3px; max-width: 100%; box-sizing: border-box; padding: 2px 8px; border: 1px solid var(--border);
           border-radius: 999px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.to-chip b { color: var(--text-primary); font-weight: 600; }
.to-chip.to-up b, .to-chip.to-hot b { color: var(--buy); }
.to-chip.to-down b, .to-chip.to-cold b { color: var(--sell); }
.to-stats { margin: 8px 0 0; font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.to-ai { margin: 10px 0 0; font-size: 13px; color: var(--text-primary); overflow-wrap: anywhere; }
.to-tail, .to-empty { margin: 6px 0 0; font-size: 11px; color: var(--text-muted); }
.to-empty { font-size: 12px; }
@media (max-width: 640px) {
    .to-cards { grid-template-columns: minmax(0, 1fr); }
}