/* 首頁台股儀表板 — template-parts/home-tw-dashboard.php
 * 台股慣例：紅漲綠跌（改 --sp-up / --sp-dn 即可反轉） */
.sp-home {
	--sp-bg: #131722; --sp-card: #1c2030; --sp-line: #2f354b; --sp-grid: #272d42;
	--sp-text: #e6e8ee; --sp-mute: #848e9c;
	--sp-up: #f0443a; --sp-dn: #16b36b;
	--q-rise: #e5533d; --q-rot: #d9a520; --q-wait: #7d8590; --q-ebb: #1fa36a;
	background: var(--sp-bg); color: var(--sp-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", sans-serif;
	padding: 20px; border-radius: 12px; box-sizing: border-box;
	display: flex; flex-direction: column; gap: 20px;
}
.sp-home *, .sp-home *::before, .sp-home *::after { box-sizing: border-box; }
.sp-home .sp-card { background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: 10px; padding: 16px 18px; }
.sp-home .sp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sp-home h2 { margin: 0; font-size: 18px; color: #fff; font-weight: 700; }
.sp-home h3 { margin: 0 0 8px; font-size: 14px; color: var(--sp-mute); font-weight: 600; }
.sp-home .sp-meta { color: var(--sp-mute); font-size: 12px; }
.sp-home .sp-note { color: var(--sp-mute); font-size: 12px; margin: 10px 0 0; }
.sp-home .sp-up { color: var(--sp-up) !important; }
.sp-home .sp-dn { color: var(--sp-dn) !important; }
.sp-home a { color: inherit; text-decoration: none; }
.sp-home a:hover { text-decoration: underline; }
.sp-home button { font-family: inherit; }

/* ① 漲跌排行 */
.sp-home .sp-breadth { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.sp-home .sp-b-up { color: var(--sp-up); white-space: nowrap; }
.sp-home .sp-b-dn { color: var(--sp-dn); white-space: nowrap; }
.sp-home .sp-b-bar { flex: 1; height: 8px; border-radius: 4px; overflow: hidden; display: flex; background: var(--sp-grid); }
.sp-home .sp-b-bar i { display: block; height: 100%; }
.sp-home .sp-b-up-bar { background: var(--sp-up); }
.sp-home .sp-b-dn-bar { background: var(--sp-dn); margin-left: auto; }
.sp-home .sp-mv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-home .sp-list { list-style: none; margin: 0; padding: 0; counter-reset: sp; }
.sp-home .sp-list li { counter-increment: sp; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px; align-items: center;
	padding: 6px 4px; border-bottom: 1px solid var(--sp-grid); font-size: 14px; }
.sp-home .sp-list li::before { content: counter(sp); color: var(--sp-mute); font-size: 12px; text-align: right; }
.sp-home .sp-list li.sp-extra { display: none; }
.sp-home.sp-show-all .sp-list li.sp-extra { display: grid; }
.sp-home .sp-list .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-home .sp-list .nm small { color: var(--sp-mute); margin-right: 6px; font-size: 12px; }
.sp-home .sp-list .v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sp-home .sp-list .v small { display: block; color: var(--sp-mute); font-weight: 400; font-size: 11px; }
.sp-home .sp-more { margin-top: 12px; background: var(--sp-grid); color: var(--sp-text); border: 1px solid var(--sp-line);
	border-radius: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.sp-home .sp-more:hover { border-color: var(--sp-mute); }

/* ② 類股輪動 */
.sp-home .sp-quads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.sp-home .sp-q { background: var(--sp-bg); border: 1px solid var(--sp-line); border-left: 4px solid; border-radius: 8px; padding: 8px 12px;
	display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.sp-home .sp-q b { grid-row: span 2; font-size: 26px; line-height: 1; }
.sp-home .sp-q span { font-weight: 700; font-size: 14px; }
.sp-home .sp-q small { color: var(--sp-mute); font-size: 11px; }
.sp-home .q-rise { border-left-color: var(--q-rise); } .sp-home .q-rise b { color: var(--q-rise); }
.sp-home .q-rot  { border-left-color: var(--q-rot); }  .sp-home .q-rot b  { color: var(--q-rot); }
.sp-home .q-wait { border-left-color: var(--q-wait); } .sp-home .q-wait b { color: var(--q-wait); }
.sp-home .q-ebb  { border-left-color: var(--q-ebb); }  .sp-home .q-ebb b  { color: var(--q-ebb); }
.sp-home .sp-sec-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
.sp-home .sp-bubble-wrap { position: relative; min-width: 0; }
/* 畫布大小交給 Chart.js 依這個框決定，不要用 CSS 硬設畫布尺寸，否則點擊位置會跑掉 */
.sp-home .sp-bubble-box { position: relative; height: 440px; }
.sp-home #sp_bubble { display: block; }
.sp-home .sp-sec-detail { background: var(--sp-bg); border: 1px solid var(--sp-line); border-radius: 8px; padding: 14px; font-size: 13px; }
.sp-home .sp-sec-detail h4 { margin: 0 0 4px; font-size: 16px; color: #fff; display: flex; align-items: center; gap: 8px; }
.sp-home .sp-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; color: #fff; }
.sp-home .sp-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 10px 0 12px; }
.sp-home .sp-kv div { display: flex; flex-direction: column; }
.sp-home .sp-kv small { color: var(--sp-mute); font-size: 11px; }
.sp-home .sp-kv b { font-size: 15px; font-variant-numeric: tabular-nums; }
.sp-home .sp-sec-detail table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-home .sp-sec-detail th { color: var(--sp-mute); font-weight: 400; text-align: right; padding: 4px; border-bottom: 1px solid var(--sp-line); }
.sp-home .sp-sec-detail th:first-child, .sp-home .sp-sec-detail td:first-child { text-align: left; }
.sp-home .sp-sec-detail td { padding: 5px 4px; border-bottom: 1px solid var(--sp-grid); text-align: right; font-variant-numeric: tabular-nums; }

.sp-home .sp-replay { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sp-home .sp-replay button { background: var(--sp-grid); color: #fff; border: 1px solid var(--sp-line); border-radius: 6px;
	padding: 5px 14px; font-size: 13px; cursor: pointer; white-space: nowrap; min-width: 84px; }
.sp-home .sp-replay button.on { border-color: var(--q-rot); color: var(--q-rot); }
.sp-home .sp-replay input[type=range] { flex: 1; accent-color: var(--q-rot); min-width: 0; }
.sp-home .sp-replay span { color: var(--sp-mute); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 118px; }

.sp-home .sp-sec-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-home .sp-sec-ctrl select { background: var(--sp-bg); color: var(--sp-text); border: 1px solid var(--sp-line); border-radius: 6px;
	padding: 4px 8px; font-size: 13px; height: auto; min-height: 0; width: auto; }
.sp-home .sp-sec-ctrl select:disabled { opacity: .45; }

.sp-home .sp-crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; flex-wrap: wrap; }
.sp-home .sp-crumb b { color: #fff; font-size: 15px; }
.sp-home .sp-crumb span { color: var(--sp-mute); font-size: 12px; }
.sp-home .sp-crumb .sp-back { background: var(--sp-grid); color: #fff; border: 1px solid var(--sp-line); border-radius: 6px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.sp-home .sp-crumb .sp-back:hover { border-color: var(--sp-mute); }

.sp-home .sp-zoom { position: absolute; top: 12px; right: 14px; z-index: 5; display: flex; gap: 4px; }
.sp-home .sp-zoom button { background: rgba(19,23,34,.85); color: #fff; border: 1px solid var(--sp-line); border-radius: 6px;
	min-width: 30px; height: 28px; padding: 0 8px; font-size: 14px; line-height: 1; cursor: pointer; }
.sp-home .sp-zoom button:hover { border-color: var(--sp-mute); }
.sp-home .sp-zoom #sp_zoom_reset { font-size: 12px; }
.sp-home .sp-zoom #sp_zoom_reset.on { border-color: var(--q-rot); color: var(--q-rot); }
.sp-home .sp-bubble-wrap.sp-zoomed #sp_bubble { cursor: grab; }
.sp-home #sp_bubble { touch-action: pan-y; }

/* ③ 加權指數 */
.sp-home .sp-idx-px { font-variant-numeric: tabular-nums; margin-left: 6px; }
.sp-home #sp_idx_chg { font-size: 14px; font-weight: 700; }
.sp-home .sp-ranges { display: flex; gap: 4px; flex-wrap: wrap; }
.sp-home .sp-ranges button { background: transparent; color: var(--sp-mute); border: 1px solid var(--sp-line); border-radius: 6px;
	padding: 4px 10px; font-size: 12px; cursor: pointer; }
.sp-home .sp-ranges button.on { background: var(--sp-grid); color: #fff; border-color: var(--sp-mute); }
.sp-home .sp-idx-chart { width: 100%; height: 380px; }

@media (max-width: 900px) {
	.sp-home { padding: 12px; }
	.sp-home .sp-mv-grid { grid-template-columns: minmax(0, 1fr); }
	.sp-home .sp-quads { grid-template-columns: repeat(2, 1fr); }
	.sp-home .sp-sec-body { grid-template-columns: 1fr; }
	.sp-home .sp-bubble-box { height: 360px; }
	.sp-home .sp-idx-chart { height: 300px; }
}

/* 日股英文名稱 */
.sp-home a small.en { display: block; margin: 1px 0 0; color: #848e9c; font-size: 11px; font-weight: 400; line-height: 1.25; white-space: normal; }
.sp-home .sp-mv-col, .sp-home .sp-movers { min-width: 0; } .sp-home .sp-list li > * { min-width: 0; }