/* 杉峰資本 a11y.css — 手機觸控目標放大 (#2)。獨立檔、僅新增規則，不改動 styles.css。 */

/* 對比修正:原 --dim(#938b7c) 對 --bg 僅約 2.6:1,大量小字不及格。改 #73695a → 約 4.8:1 過 WCAG AA,仍明顯淡於 --txt 維持層級。 */
:root{ --dim:#73695a; }

/* 鍵盤聚焦可見框:全站互動元件補 :focus-visible(暗框 + 白色外圈,確保在 --cyan/綠色 active 分頁與彩色磚塊上都看得見)。 */
.btn:focus-visible,.ctgl:focus-visible,.chaintab:focus-visible,.themenav a:focus-visible,
.cdf-more:focus-visible,.watchstar:focus-visible,.del:focus-visible,.tcard:focus-visible,
.qt:focus-visible,.term:focus-visible,.sec-tile:focus-visible,.zone-node:focus-visible,
.d-buy:focus-visible,.newsrow:focus-visible,details.ctmenu>summary:focus-visible{
  outline:2px solid #2a2620; outline-offset:2px; box-shadow:0 0 0 2px #fffdf8; border-radius:6px;
}
/* .qt 鍵盤聚焦時也顯示提示框(對齊既有 :hover 行為) */
.qt:focus-visible::after{ opacity:1; visibility:visible; }

@media (max-width: 680px){
  /* 按鈕 / 連結型互動元素：≥44px 觸控區，並垂直置中對齊 */
  .ctgl, .chaintab, .btn, .themenav a, .watchstar, button,
  .searchfab, .backtop, .dc-more, .sr-links a, .weightbox summary,
  details.panel > summary.ph, .advset > summary, .hr-more > summary{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .ctgl, .chaintab, .btn, .themenav a, .watchstar, button,
  .searchfab, .backtop{
    min-width: 44px;
    justify-content: center;
  }
  /* 整列 / 卡片型可點目標：給足夠高度即可，不強制寬度避免破版 */
  .newsrow, .d-buy, .zn-head, .sec-tile, .tcard, .rrgcb, .chip-co,
  .zone-node, .tmtile{
    min-height: 44px;
  }
  .chip-co{
    display: inline-flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* 資金輪動氣泡圖 RRG — 手機篩選器格線防右側截斷（全選/全不選 + 各主題勾選） */
@media (max-width: 680px){
  .rrgcbs{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    overflow-x: hidden;
  }
  .rrgcbs > *{ flex: 0 0 auto; }
  .rrgcb{ flex: 0 0 auto; }
  /* RRG 下方的 ETF 圖例列同樣換行、不超出視窗 */
  .etflegs{ flex-wrap: wrap; max-width: 100%; }
}

/* ===== 全站圖表手機響應式 — 防止氣泡圖/桑基圖撐爆頁面造成截斷 ===== */
@media (max-width: 820px){
  /* 根治：任何寬元素都不再讓「整個頁面」產生水平捲動（周圍內容因此不被撐寬截斷） */
  html, body{ overflow-x: hidden; }

  /* 圖表類容器不超出視窗寬度 */
  .skscroll, .rrgwrap, .radar-wrap, .cmp-wrap,
  [class*="chart"], [class*="bubble"], [class*="rrg"]{
    max-width: 100% !important;
  }

  /* 面板內的「圖表 SVG」(RRG 氣泡圖/散點/ETF 比較圖，為 .pb 的直接子元素) 響應式縮放。
     刻意只選 .pb 的直接子 svg 與 .rrgwrap，不波及卡片內 / 頁首的小圖示與 logo。 */
  .pb > svg, svg.rrgwrap{
    max-width: 100% !important;
    height: auto !important;
  }

  /* Chart.js 等 canvas 圖表 */
  canvas{
    max-width: 100% !important;
    height: auto !important;
  }
}