/* 首頁跨市場比較 — template-parts/compare.php（沿用 .sp-home 的配色，紅漲綠跌） */
.sp-cmp {
	--sp-bg: #131722; --sp-card: #1c2030; --sp-line: #2f354b; --sp-grid: #272d42;
	--sp-text: #e6e8ee; --sp-mute: #848e9c; --sp-up: #f0443a; --sp-dn: #16b36b; --sp-acc: #4e8cff;
	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-cmp *, .sp-cmp *::before, .sp-cmp *::after { box-sizing: border-box; }
.sp-cmp .sp-card { background: var(--sp-card); border: 1px solid var(--sp-line); border-radius: 10px; padding: 16px 18px; min-width: 0; }
.sp-cmp .sp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sp-cmp h2 { margin: 0; font-size: 18px; color: #fff; font-weight: 700; }
.sp-cmp .sp-meta { color: var(--sp-mute); font-size: 12px; font-weight: 400; }
.sp-cmp .sp-note { color: var(--sp-mute); font-size: 12px; margin: 10px 0 0; }
.sp-cmp .sp-up { color: var(--sp-up); }
.sp-cmp .sp-dn { color: var(--sp-dn); }
.sp-cmp .na { color: #4b5263; }
.sp-cmp a { color: inherit; text-decoration: none; }
.sp-cmp a:hover { text-decoration: underline; }

.sp-cmp .sp-cmp-ctrl { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-cmp .sp-seg { display: inline-flex; border: 1px solid var(--sp-line); border-radius: 6px; overflow: hidden; }
.sp-cmp .sp-seg button { background: transparent; color: var(--sp-mute); border: 0; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.sp-cmp .sp-seg button + button { border-left: 1px solid var(--sp-line); }
.sp-cmp .sp-seg button.on { background: var(--sp-acc); color: #fff; }

.sp-cmp .sp-cmp-scroll { overflow-x: auto; }
.sp-cmp .sp-cmp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0; }
.sp-cmp .sp-cmp-tbl th, .sp-cmp .sp-cmp-tbl td { padding: 7px 8px; border: 0; border-bottom: 1px solid var(--sp-grid); text-align: right; background: transparent; }
.sp-cmp .sp-cmp-tbl th { color: var(--sp-mute); font-weight: 600; font-size: 12px; position: sticky; top: 0; background: var(--sp-card); }
.sp-cmp .sp-cmp-tbl th[data-s] { cursor: pointer; user-select: none; }
.sp-cmp .sp-cmp-tbl th[data-s]:hover, .sp-cmp .sp-cmp-tbl th.sorted { color: #fff; }
.sp-cmp .sp-cmp-tbl th.sorted::after { content: attr(data-dir); margin-left: 3px; font-size: 10px; }
.sp-cmp .sp-cmp-tbl .l { text-align: left; }
.sp-cmp .sp-cmp-tbl td.l a { font-weight: 600; color: #fff; }
.sp-cmp .sp-cmp-tbl td.l small { display: block; color: var(--sp-mute); font-size: 11px; }
.sp-cmp .sp-cmp-tbl td.b { font-weight: 700; }
.sp-cmp .sp-cmp-tbl td.b small { display: block; color: var(--sp-mute); font-size: 10px; font-weight: 400; }
.sp-cmp .sp-cmp-tbl td.d { color: var(--sp-mute); font-size: 12px; }
.sp-cmp .sp-cmp-tbl tr.grp td { text-align: left; color: var(--sp-mute); font-size: 12px; font-weight: 700; background: var(--sp-bg); padding: 6px 8px; }
.sp-cmp .sp-cmp-tbl tbody tr:not(.grp):hover td { background: #22273a; }
.sp-cmp .sp-cmp-tbl .c-chk { width: 34px; text-align: center; }
.sp-cmp .sp-cmp-tbl .c-chk label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sp-cmp .sp-cmp-tbl .c-chk input { margin: 0; accent-color: var(--sp-acc); }
.sp-cmp .sp-cmp-tbl .c-chk i { width: 4px; height: 16px; border-radius: 2px; display: inline-block; }
.sp-cmp .sp-cmp-tbl td.mk { text-align: center; font-size: 12px; }
.sp-cmp .mk-TW { color: #ff8a80; } .sp-cmp .mk-JP { color: #ffd54f; } .sp-cmp .mk-KR { color: #80cbc4; } .sp-cmp .mk-US { color: #90caf9; }

.sp-cmp .sp-cmp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; margin-bottom: 8px; min-height: 20px; }
.sp-cmp .sp-cmp-legend .lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sp-cmp .sp-cmp-legend .lg i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.sp-cmp .sp-cmp-chart { height: 420px; width: 100%; }

@media (max-width: 720px) {
	.sp-cmp { padding: 12px; }
	.sp-cmp .sp-card { padding: 12px; }
	.sp-cmp .sp-cmp-chart { height: 320px; }
}
.sp-cmp .sp-twd-only { display: none; }
.sp-cmp.is-twd .sp-twd-only { display: block; }

/* 滑鼠提示框 */
.sp-cmp .sp-cmp-chart { position: relative; }
.sp-cmp .sp-cmp-tip { position: absolute; z-index: 5; display: none; pointer-events: none; min-width: 190px; background: rgba(19, 23, 34, .94); border: 1px solid var(--sp-line); border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.sp-cmp .sp-cmp-tip .tt { color: var(--sp-mute); margin-bottom: 4px; font-weight: 600; }
.sp-cmp .sp-cmp-tip .tr { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 6px; padding: 2px 0; white-space: nowrap; }
.sp-cmp .sp-cmp-tip .tr i { width: 10px; height: 3px; border-radius: 2px; }
.sp-cmp .sp-cmp-tip .tn { color: var(--sp-text); }
.sp-cmp .sp-cmp-tip .tn small { color: var(--sp-mute); margin-left: 4px; font-size: 10px; }
.sp-cmp .sp-cmp-tip b { font-variant-numeric: tabular-nums; }