/* fx-trend.css：HouseYang 首頁歷年單價走勢圖（接在各區排行旁邊）。圖沒載成功時沒有 .has-trend，排行維持單欄。 */
.market-trend { margin: var(--space-6, 48px) 0 0; min-width: 0; }
.market-trend .trend-cap { margin: 0 0 var(--space-1, 8px); font: 700 var(--text-xs, .8125rem)/1.7 var(--font-kicker, sans-serif); letter-spacing: .08em; color: var(--slate, #3a4d63); }
.market-trend .trend-read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-height: 3.4em; margin: 0 0 var(--space-2, 16px); font-size: var(--text-sm, .9375rem); line-height: 1.7; color: var(--slate, #3a4d63); }
.trend-year { font: 600 1.375rem/1.3 var(--font-number, sans-serif); font-variant-numeric: tabular-nums; color: var(--navy, #0e1b2e); }
.trend-chip { white-space: nowrap; }
.trend-chip::before { content: ''; display: inline-block; width: 10px; height: 3px; margin-right: 6px; vertical-align: middle; background: currentColor; }
.trend-chip b { font-family: var(--font-number, sans-serif); font-variant-numeric: tabular-nums; }
.trend-chip small { font-size: var(--text-xs, .8125rem); opacity: .8; }
.trend-chip.is-town { color: var(--coral-deep, #e4433f); }
.trend-chip.is-county { color: var(--navy, #0e1b2e); }
.trend-chip.is-nation { color: var(--slate, #3a4d63); }
.market-trend svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.market-trend svg:focus-visible { outline: 2px solid var(--coral, #ff5e5b); outline-offset: 4px; }
.trend-gridline { stroke: var(--line, #0e1b2e26); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trend-axis { stroke: var(--slate, #3a4d63); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trend-tick { font: 400 11px var(--font-number, sans-serif); fill: var(--slate, #3a4d63); }
.trend-line { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trend-line.is-nation { stroke: var(--slate, #3a4d63); stroke-width: 1.5; opacity: .5; }
.trend-line.is-county { stroke: var(--navy, #0e1b2e); stroke-width: 2.5; }
.trend-line.is-town { stroke: var(--coral, #ff5e5b); stroke-width: 2.5; }
.trend-rule { stroke: var(--navy, #0e1b2e); stroke-width: 1; opacity: .28; vector-effect: non-scaling-stroke; }
.trend-dot { stroke: var(--paper, #f8f4ec); stroke-width: 2; }
.trend-dot.is-nation { fill: var(--slate, #3a4d63); }
.trend-dot.is-county { fill: var(--navy, #0e1b2e); }
.trend-dot.is-town { fill: var(--coral, #ff5e5b); }
/* 換縣市時線條淡入一次 */
.market-trend svg > g:nth-of-type(2) { opacity: 0; transition: opacity 260ms cubic-bezier(.23, 1, .32, 1); }
.market-trend.is-in svg > g:nth-of-type(2) { opacity: 1; }
.market-trend .trend-note { margin: var(--space-2, 16px) 0 0; }
@media (min-width: 1024px) {
  .market-live.has-trend .market-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: var(--space-8, 64px); align-items: start; }
  .market-live.has-trend .market-controls, .market-live.has-trend .market-sum, .market-live.has-trend .market-note { grid-column: 1 / -1; }
  .market-live.has-trend .market-bars { grid-column: 1; }
  .market-live.has-trend .market-trend { grid-column: 2; margin: 0; }
}
/* 手機上整張圖縮小，刻度字要放大才讀得到（圖寬 350px 時 17 單位約等於 10.6px） */
@media (max-width: 639px) {
  .trend-tick { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .market-trend svg > g:nth-of-type(2) { opacity: 1; transition: none; }
}