/* =====================================================================
   ETF Radar — site.css
   全站唯一的設計系統。頁面層一律使用 var(--*)，不得自帶色票。

   規則
   1. 這個檔案是全站唯一色票來源。任何頁面（index / preview / observe /
      about）都不准在自己的 <style> 或 JS 裡寫死 #RRGGBB。需要新顏色時，
      先在這裡加 token，再從頁面用 var() 取用。
   2. JS 需要顏色（例如 lightweight-charts、canvas、SVG 產生器）時，用
      getComputedStyle(document.documentElement).getPropertyValue('--chart-up')
      讀本檔案的 --chart-* 變數，不要在 JS 裡硬寫色票。
   3. 介面本身是無彩黑灰：連結、按鈕、軸線、圖示、邊框一律走 --ink / --rule。
      紅綠只用來表示「數字的方向」——買＝紅（--buy）、賣＝綠（--sell）。
   4. 字級下限：整句中文說明不得小於 14px。數字用 .num（tabular-nums）對齊，
      但字體是 Inter，不是等寬程式碼字。
   5. 字體由各頁 <head> 以 <link> 載入 Google Fonts：
      Inter (400/500/600/700) + Noto Sans TC (400/500/700)，
      fallback 走 PingFang TC / Microsoft JhengHei。

   目錄
     01 tokens          色票 / 分類色階 / 字體 / 間距 / 圓角 / 陰影 / 圖表變數
     02 base            reset、排版基礎、.num / .buy / .sell
     03 layout          .sheet 容器、.wall 不對稱網格、.card、區段
     04 頁首 / 頁尾      .topbar / .banner / .foot
     05 元件            chip ＋ as-tabs / tabpanel（換內容的分頁）/ table /
                        rank / spark / badge / bar / bench / event / empty /
                        loading / explainer / tipbox /
                        donut ＋ legend（產業佔比）/ chart（K 線容器）/
                        prose（about 長文排版）
     06 桑基圖           .flowmap 家族（首頁資金流向圖）
     07 responsive      1440 / 1080 / 768 / 390
   ===================================================================== */


/* ── 01 tokens ─────────────────────────────────────────────────────── */
:root{
  /* 紙張三階：頁底暖白 → 卡片純白 → 內嵌凹槽 */
  --paper:#F6F4F0;
  --paper-deep:#EFEBE4;
  --paper-sink:#F3F0EA;
  --card:#FFFFFF;
  --card-fade:rgba(255,255,255,0);   /* 卡片白的透明端，漸層遮罩用 */

  /* 文字三階 */
  --ink:#1A1917;      /* 標題、重點數字 */
  --ink-2:#57534C;    /* 內文、次要說明 */
  --ink-3:#8B857B;    /* 註記、單位、名次 */
  --ink-4:#B4AEA3;    /* 最弱：版本號、淡出後的標籤 */

  /* 邊界（只做細節分隔，不當主要分層手段——分層靠卡片＋陰影） */
  --rule:#E5E0D7;
  --rule-soft:#EFEBE3;

  /* 方向色：只出現在數字上。白底對比 買 5.2:1、賣 5.2:1 */
  --buy:#C8352B;
  --buy-soft:rgba(200,53,43,.10);
  --buy-band:rgba(200,53,43,.55);   /* 圖形填色用（帶 fill-opacity） */
  --sell:#167C52;
  --sell-soft:rgba(22,124,82,.10);
  --sell-band:rgba(22,124,82,.55);

  /* 分類色階：圓餅／甜甜圈／堆疊條這種「要分成好幾塊」的圖形專用。
     介面無彩的規則在這裡一樣成立——分類不是方向，所以絕對不能借用
     --buy / --sell，否則「紅＝買」的約定會被稀釋成裝飾色。
     由深到淺六階，相鄰兩階亮度比約 1.5:1；面積上再用 --card 描邊隔開，
     淺色的兩階才不會黏成一塊。超過六類請合併成「其他」，不要再加階。 */
  --cat-1:#1A1917;
  --cat-2:#3D3A34;
  --cat-3:#605B52;
  --cat-4:#8B857B;
  --cat-5:#B4AEA3;
  --cat-6:#D9D4C9;

  /* 幾何 */
  --radius:18px;
  --radius-sm:15px;
  --radius-xs:10px;
  --radius-round:999px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-up:0 2px 4px rgba(0,0,0,.05), 0 16px 36px rgba(0,0,0,.09);
  --shadow-rail:0 1px 2px rgba(0,0,0,.03), 0 4px 14px rgba(0,0,0,.05);

  /* 間距階梯 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:22px; --s6:32px; --s7:48px; --s8:64px;

  /* 字體 */
  --font:"Inter","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --fs-lede:16px;
  --fs-body:15.5px;
  --fs-note:14.5px;
  --fs-min:14px;        /* 中文整句說明的下限，不得再小 */

  /* 互動 */
  --dim:.12;            /* 非相關元素淡出到這個 opacity */
  --dim-node:.2;        /* 節點（含文字標籤）淡出後仍要看得出位置 */
  --ease:.18s cubic-bezier(.2,.6,.3,1);

  /* ── 圖表主題變數 ──────────────────────────────────────────────
     lightweight-charts / canvas / SVG 產生器一律讀這幾個變數。
     台股慣例：漲＝紅、跌＝綠，和 --buy / --sell 同一組語意。 */
  --chart-bg:#FFFFFF;
  --chart-text:#57534C;
  --chart-text-dim:#8B857B;
  --chart-grid:#F1EDE6;
  --chart-border:#E5E0D7;
  --chart-crosshair:#8B857B;
  --chart-watermark:rgba(26,25,23,.05);
  --chart-up:#C8352B;
  --chart-down:#167C52;
  --chart-up-wick:#C8352B;
  --chart-down-wick:#167C52;
  --chart-vol-up:rgba(200,53,43,.28);
  --chart-vol-down:rgba(22,124,82,.28);
  --chart-line:#1A1917;
  --chart-area-top:rgba(26,25,23,.14);
  --chart-area-bottom:rgba(26,25,23,0);
  --chart-ma1:#1A1917;
  --chart-ma2:#8B857B;
  --chart-ma3:#B4AEA3;
  --chart-marker-buy:#C8352B;
  --chart-marker-sell:#167C52;
  --chart-marker-text:#FFFFFF;
  --chart-font:"Inter","Noto Sans TC","PingFang TC",sans-serif;
}


/* ── 02 base ───────────────────────────────────────────────────────── */
*{box-sizing:border-box}
/* hidden 一定要真的隱藏。
   瀏覽器對 [hidden] 只給 display:none 的預設值，作者寫的 display:flex／grid
   （.toolbar、.chip-row、.lane-foot…）優先度更高，會把它蓋掉——結果就是
   JS 設了 el.hidden = true，元件卻還在畫面上而且可以點，但已經沒有任何
   事件掛著。全站在這裡一次補掉，頁面層不要再各自補一條。 */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 數字：對齊用 tabular-nums，字體仍是 Inter（不是等寬程式碼字） */
.num{font-variant-numeric:tabular-nums;letter-spacing:0}
/* 紅買綠賣是編碼，不是裝飾：容器裡任何 b{color:…}（特異度 0,1,1）都會蓋掉
   下面這兩條（0,1,0）。所以凡是給 <b> 上墨色的規則，都必須自己排除 .buy/.sell。 */
.buy{color:var(--buy)}
.sell{color:var(--sell)}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* ── 03 layout ─────────────────────────────────────────────────────── */
/* 置中容器 */
.sheet{max-width:1280px;margin:0 auto;padding:34px 28px 64px}
.sheet.wide{max-width:1440px}

/* 不對稱網格：12 欄，卡片大小刻意不一致 */
.wall{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-9{grid-column:span 9}
.col-12{grid-column:span 12}

/* 卡片 */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px 26px;
  min-width:0;
}
.card.tight{padding:18px 20px}
.card.flush{padding:20px 0}
.card.flush > *{padding-left:24px;padding-right:24px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.card-title{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.4}
.card-title.sm{font-size:17px}
.card-tag{font-size:var(--fs-min);color:var(--ink-2);font-variant-numeric:tabular-nums}
.card-note{margin-top:var(--s2);color:var(--ink-2);font-size:var(--fs-note);line-height:1.65}

/* 區段前言 */
.section-lead{grid-column:span 12;padding:14px 4px 0}
.section-lead h2{font-size:22px;font-weight:700;letter-spacing:-.018em}
.section-lead p{margin-top:6px;color:var(--ink-2);font-size:var(--fs-body);max-width:62ch}

/* 卡片內的次要連結 */
.more-link{
  display:inline-block;margin-top:18px;font-size:var(--fs-body);color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;
  transition:border-color var(--ease);
}
.more-link:hover{border-color:var(--ink)}


/* ── 04 頁首 / 頁尾 ────────────────────────────────────────────────── */
/* 品牌列＋導覽（內頁用） */
.topbar{
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  padding:6px 4px 22px;
}
.brand{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
}
.brand-dot{
  width:13px;height:13px;border-radius:50%;
  border:2.5px solid var(--ink);position:relative;flex:none;
}
.brand-dot::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--buy)}
.topnav{display:flex;gap:var(--s4);flex-wrap:wrap;margin-left:auto;align-items:center}
.topnav a{
  font-size:var(--fs-body);color:var(--ink-2);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;transition:var(--ease);
}
.topnav a:hover{color:var(--ink);border-bottom-color:var(--rule)}
.topnav a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}

/* 首頁大標題橫幅 */
.banner{
  display:grid;grid-template-columns:minmax(0,1fr) 1px auto;
  gap:34px;align-items:end;padding:8px 4px 26px;
}
.banner-left{min-width:0}
.brandline{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.edition{
  margin-left:auto;font-size:13px;color:var(--ink-2);white-space:nowrap;
  border:1px solid var(--rule);border-radius:var(--radius-round);
  padding:2px 12px;background:var(--card);font-variant-numeric:tabular-nums;
}
.banner h1{
  font-size:clamp(28px,3.6vw,44px);line-height:1.28;font-weight:700;
  letter-spacing:-.022em;max-width:19ch;
}
.banner-lede{margin-top:14px;max-width:54ch;color:var(--ink-2);font-size:var(--fs-lede)}
.banner-date{margin-top:14px;font-size:var(--fs-body);line-height:1.7;color:var(--ink-2);max-width:60ch}
.banner-date b{font-weight:600;font-variant-numeric:tabular-nums}
.banner-date b:not(.buy):not(.sell){color:var(--ink)}
.banner-rule{background:var(--rule);width:1px;align-self:stretch;margin-top:12px}
.banner-figs{display:flex;gap:32px;padding-bottom:6px}
.fig{min-width:112px}
.fig-name{font-size:var(--fs-min);color:var(--ink-2);margin-bottom:2px}
.fig-num{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.25;font-variant-numeric:tabular-nums}
.fig-num small{font-size:15px;font-weight:500;margin-left:2px}
.fig-sub{font-size:var(--fs-min);color:var(--ink-3);line-height:1.55}

/* 頁尾 */
.foot{
  margin-top:40px;padding:24px 4px 0;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:var(--fs-min);color:var(--ink-3);line-height:1.7;
}
.foot p{max-width:74ch}
.foot a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.foot a:hover{color:var(--ink)}
.foot-end{font-size:13px;color:var(--ink-4)}


/* ── 05 元件 ───────────────────────────────────────────────────────── */

/* 藥丸型分頁／篩選鈕：選中＝黑底白字 */
.chip-row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.chip{
  font:inherit;font-size:var(--fs-min);color:var(--ink-2);
  background:var(--card);border:1px solid var(--rule);
  border-radius:var(--radius-round);padding:5px 15px;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--ease),border-color var(--ease),color var(--ease);
}
.chip:hover{border-color:#C9C3B7;color:var(--ink)}
.chip[aria-pressed="true"],
.chip[aria-selected="true"],
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip:disabled{opacity:.45;cursor:default}
.chip-row.on-paper .chip{background:var(--card)}

/* 分頁變體：.chip-row.as-tabs
   同一顆 .chip 有兩種工作——「篩掉一部分資料」（首頁：買賣都看／只看買進）
   和「整塊換內容」（明細頁：走勢／持股／產業…）。兩者長一樣使用者會分不出
   按下去會發生什麼事，所以換內容的那一排一定要用這個變體：
     底部一條 --rule 貫穿整列（暗示下面那塊是它管的）
     ＋ 選中的字重加粗
     ＋ 橫向間距放大到 --s3（篩選列是 --s2）
   刻意不做「連到貫穿線的指示線」：分頁一多在手機上會換行，第一行那顆的
   指示線就會掉到第二行中間。選中＝黑底白字（沿用 .chip 的 aria-selected）
   ＋字重加粗，本身已經夠明確，這裡不另設色票。
   用法：
     <div class="chip-row as-tabs" role="tablist">
       <button class="chip" role="tab" id="t-hold" aria-controls="p-hold" aria-selected="true">持股</button>
     <section class="tabpanel" role="tabpanel" id="p-hold" aria-labelledby="t-hold">…</section>
     <section class="tabpanel" role="tabpanel" hidden>…</section>
   切換時改 aria-selected 與面板的 hidden，不要用 display 直接寫在 style。 */
.chip-row.as-tabs{
  gap:var(--s2) var(--s3);   /* 橫向放大、換行時不要太鬆 */
  margin-top:18px;
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--rule);
}
.chip-row.as-tabs .chip{padding:6px 17px}
.chip-row.as-tabs .chip[aria-selected="true"],
.chip-row.as-tabs .chip[aria-pressed="true"],
.chip-row.as-tabs .chip.is-on{font-weight:600}
/* 分頁面板：只有被選中的那一塊留在文件流裡，其餘掛 hidden */
.tabpanel{margin-top:var(--s5)}
.tabpanel[hidden]{display:none}

/* 資料表格 */
.dtable{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.dtable th{
  text-align:left;font-weight:600;font-size:var(--fs-min);color:var(--ink-2);
  padding:0 12px 9px;border-bottom:2px solid var(--rule-soft);
  white-space:nowrap;background:var(--card);
}
.dtable td{padding:10px 12px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody tr{transition:background var(--ease)}
.dtable tbody tr:hover{background:var(--paper-sink)}
.dtable th.n,.dtable td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dtable th[data-sort]{cursor:pointer;user-select:none}
.dtable th[data-sort]::after{content:"↕";margin-left:5px;color:var(--ink-4);font-weight:400}
.dtable th[aria-sort="ascending"]::after{content:"↑";color:var(--ink)}
.dtable th[aria-sort="descending"]::after{content:"↓";color:var(--ink)}
.dtable th[data-sort]:hover{color:var(--ink)}
.dtable thead.sticky th{position:sticky;top:0;z-index:2}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 表格比容器寬時的橫拉提示。
   只有捲軸真的存在才亮：外面包一層 .table-frame，JS 量到
   scrollWidth > clientWidth 就掛 .can-scroll，右緣浮一條漸層、
   下面補一行白話提示；滑到最右邊改掛 .at-end 把漸層收掉。
   沒有東西被藏起來時什麼都不出現，不要放假的漸層騙人。 */
.table-frame{position:relative}
.table-frame::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:36px;
  pointer-events:none;opacity:0;transition:opacity var(--ease);
  background:linear-gradient(to right,var(--card-fade),var(--card));
}
.table-frame.can-scroll::after{opacity:1}
.table-frame.at-end::after{opacity:0}
.table-hint{
  margin-top:var(--s2);font-size:var(--fs-note);color:var(--ink-3);
  line-height:1.7;display:none;
}
.table-frame.can-scroll ~ .table-hint{display:block}

/* 排行列：名次＋名稱＋代號＋金額＋幾檔基金 */
.rank-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:16px}
.rank-head{font-size:var(--fs-body);font-weight:600;color:var(--ink);padding-bottom:8px;border-bottom:2px solid var(--rule-soft)}
.rank-head.b{border-bottom-color:rgba(200,53,43,.30)}   /* 欄標題不染紅綠，只用底線暗示欄別 */
.rank-head.s{border-bottom-color:rgba(22,124,82,.30)}
.rank-list{margin-top:4px}
.rank-row{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--rule-soft)}
.rank-row:last-child{border-bottom:0}
.rank-i{font-size:var(--fs-min);color:var(--ink-3);width:15px;flex:none;line-height:1.5;padding-top:1px;font-variant-numeric:tabular-nums}
.rank-body{min-width:0;flex:1}
.rank-name{display:block;font-size:var(--fs-body);font-weight:500;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-name span{color:var(--ink-3);font-size:13px;font-weight:400;margin-left:5px;font-variant-numeric:tabular-nums}
.rank-meta{display:block;font-size:var(--fs-min);color:var(--ink-2);line-height:1.55}
.rank-meta b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 說明要能折行。這一行的金額 <b> 是 nowrap 且和 <i> 緊貼，中間沒有斷點，
   所以 <i> 再 nowrap 的話整列的 min-content 會超過手機寬度，把整頁撐寬
   （實測 390px 下賺賠排行列的 min-content 470px，document 被撐到 522px）。
   夠寬的時候本來就不會折，所以桌機版看起來完全一樣。 */
.rank-meta i{font-style:normal;white-space:normal;margin-left:9px;color:var(--ink-3)}

/* 量條：長度編碼金額、顏色編碼方向 */
.bar{
  display:block;position:relative;height:5px;border-radius:var(--radius-round);
  background:var(--paper-deep);overflow:hidden;margin-top:6px;
}
.bar-fill{
  display:block;height:100%;border-radius:var(--radius-round);
  background:var(--ink-3);transition:width var(--ease);
}
.bar.is-buy .bar-fill{background:var(--buy)}
.bar.is-sell .bar-fill{background:var(--sell)}
.bar.thick{height:8px}
/* 雙向量條：中線兩側各自延伸 */
.bar-split{position:relative;height:8px;background:var(--paper-deep);border-radius:var(--radius-round);overflow:hidden}
.bar-split .b-buy{position:absolute;top:0;bottom:0;left:50%;background:var(--buy)}
.bar-split .b-sell{position:absolute;top:0;bottom:0;right:50%;background:var(--sell)}

/* 迷你走勢線：顏色由 .up / .down 決定，SVG 內不寫色票 */
.spark{height:38px;margin-top:10px}
.spark svg{display:block;width:100%;height:100%}
.spark.tall{height:56px}
.spark.inline{height:22px;width:96px;margin:0;display:inline-block;vertical-align:middle}
.spark .s-line{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;stroke:var(--ink-3)}
.spark .s-area{stroke:none;fill:transparent}
.spark.up .s-line{stroke:var(--buy)}
.spark.up .s-area{fill:var(--buy-soft)}
.spark.down .s-line{stroke:var(--sell)}
.spark.down .s-area{fill:var(--sell-soft)}

/* 標籤 */
.badge{
  display:inline-block;font-size:13px;font-weight:600;line-height:1.6;
  padding:0 8px;border-radius:var(--radius-round);white-space:nowrap;
  background:var(--paper-deep);color:var(--ink-2);vertical-align:1px;
}
.badge.is-new{background:var(--buy-soft);color:var(--buy)}
.badge.is-exit{background:var(--sell-soft);color:var(--sell)}
.badge.is-stale{background:var(--paper-deep);color:var(--ink-3)}
.badge.is-solid{background:var(--ink);color:#fff}
.badge.code{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-2);border-radius:6px}

/* 兩欄工作台：左側可捲動 rail ＋ 右側主圖 stage */
.bench{display:grid;grid-template-columns:296px minmax(0,1fr);gap:20px;align-items:start}
.bench-rail{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-rail);
  padding:14px;max-height:calc(100vh - 132px);overflow-y:auto;overscroll-behavior:contain;
  position:sticky;top:16px;
}
.bench-stage{min-width:0;display:flex;flex-direction:column;gap:20px}
.rail-search{
  width:100%;font:inherit;font-size:var(--fs-body);color:var(--ink);
  background:var(--paper-sink);border:1px solid transparent;border-radius:var(--radius-xs);
  padding:8px 12px;margin-bottom:var(--s3);
}
.rail-search:focus{outline:none;border-color:var(--rule);background:var(--card)}
/* 資料還沒到位時搜尋框要看得出「現在還不能打」，不要讓人打了字才發現沒反應 */
.rail-search:disabled{color:var(--ink-3);opacity:.55;cursor:default}
.rail-list{display:flex;flex-direction:column;gap:2px}
.rail-item{
  display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
  background:none;border:0;border-radius:var(--radius-xs);padding:9px 11px;
  cursor:pointer;color:inherit;text-decoration:none;transition:background var(--ease);
}
.rail-item:hover{background:var(--paper-sink)}
.rail-item[aria-current="true"],.rail-item.is-on{background:var(--ink);color:#fff}
.rail-item[aria-current="true"] .rail-sub,.rail-item.is-on .rail-sub{color:rgba(255,255,255,.72)}
.rail-name{font-size:var(--fs-body);font-weight:500;line-height:1.45;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-sub{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}

/* 事件卡：日期＋類型＋金額＋損益 */
.event-list{display:flex;flex-direction:column;gap:var(--s2)}
.event{
  display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:baseline;
  background:var(--paper-sink);border-radius:var(--radius-sm);padding:12px 16px;
}
.event-date{font-size:var(--fs-min);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.event-kind{font-size:var(--fs-body);font-weight:600;color:var(--ink)}
.event-amt{font-size:var(--fs-body);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.event-note{grid-column:1/-1;font-size:var(--fs-min);color:var(--ink-2);line-height:1.6}
.event-pl{font-size:var(--fs-min);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.event.is-buy{box-shadow:inset 3px 0 0 var(--buy)}
.event.is-sell{box-shadow:inset 3px 0 0 var(--sell)}

/* 空狀態 / 載入中（.chart-empty 是圖表版，樣式沿用這一組） */
.empty,.chart-empty{
  margin-top:14px;padding:16px 18px;border-radius:var(--radius-sm);
  background:var(--paper-deep);color:var(--ink-2);font-size:var(--fs-body);line-height:1.7;
}
.empty b,.chart-empty b{font-weight:600}
.empty b:not(.buy):not(.sell),.chart-empty b:not(.buy):not(.sell){color:var(--ink)}
.loading{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.skel{
  height:12px;border-radius:var(--radius-round);
  background:linear-gradient(90deg,var(--paper-deep) 0%,var(--paper-sink) 50%,var(--paper-deep) 100%);
  background-size:220% 100%;animation:skel 1.4s ease-in-out infinite;
}
.skel.w-70{width:70%} .skel.w-45{width:45%} .skel.tall{height:120px;border-radius:var(--radius-sm)}
@keyframes skel{0%{background-position:120% 0}100%{background-position:-20% 0}}

/* 可展開的說明：術語解釋收在這裡，預設不佔版面 */
.explainer{margin-top:16px;border-top:1px solid var(--rule-soft);padding-top:12px}
.explainer summary{cursor:pointer;font-size:var(--fs-note);color:var(--ink-2);list-style:none}
.explainer summary::-webkit-details-marker{display:none}
.explainer summary::before{content:"＋ ";color:var(--ink-3)}
.explainer[open] summary::before{content:"－ "}
.explainer summary:hover{color:var(--ink)}
.explainer dl,.explainer p{margin:10px 0 0;font-size:var(--fs-note);color:var(--ink-2);line-height:1.7}
.explainer dt{font-weight:600;color:var(--ink);display:inline}
.explainer dd{margin:0 0 6px;display:inline}
.explainer dd::after{content:"";display:block}

/* 浮動說明泡泡：所有圖表共用（桑基圖、甜甜圈、K 線圖都掛這一個），
   放在 position:relative 的 .flowmap-wrap / .donut / .chart 裡面定位。
   各圖表不要自己再做一顆 tooltip。 */
.tipbox{
  position:absolute;pointer-events:none;z-index:5;opacity:0;
  transform:translate(-50%,-118%);
  background:var(--ink);color:#fff;border-radius:11px;padding:9px 13px;
  font-size:var(--fs-min);line-height:1.55;
  white-space:normal;max-width:min(280px,calc(100vw - 48px));width:max-content;
  box-shadow:0 8px 22px rgba(0,0,0,.20);transition:opacity .12s ease;
}
.tipbox.on{opacity:1}
.tipbox b{font-weight:600;font-variant-numeric:tabular-nums}

/* 可點的卡片（基金卡 / 導覽卡） */
.tile{
  display:block;text-decoration:none;color:inherit;
  background:var(--card);border-radius:var(--radius-sm);box-shadow:var(--shadow);
  padding:17px 18px 15px;min-width:0;
  transition:transform var(--ease),box-shadow var(--ease);
}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-up)}
.tile.lg{border-radius:var(--radius);padding:20px 22px}
.tile-title{font-size:17px;font-weight:700;letter-spacing:-.012em}
.tile-title.arrow::after{content:" →";color:var(--ink-3);font-weight:500}
.tile-desc{margin-top:5px;font-size:var(--fs-note);color:var(--ink-2);line-height:1.6}

/* 基金卡（首頁與基金列表共用） */
.fund-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.fund-grid.two{grid-template-columns:repeat(2,1fr)}
.fund-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fund-chg{font-size:var(--fs-min);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.fund-chg i{font-style:normal;font-weight:500;color:var(--ink-2);margin-right:4px}
.fund-name{margin-top:9px;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.45}
.fund-issuer{font-size:var(--fs-min);color:var(--ink-2)}
.fund-facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;font-size:var(--fs-min);color:var(--ink-2);line-height:1.55}
.fund-facts b{font-weight:600;font-variant-numeric:tabular-nums}
.fund-asof{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px;font-size:var(--fs-min);color:var(--ink-3);line-height:1.55}
.fund-move{margin-top:10px;padding-top:10px;border-top:1px solid var(--rule-soft);font-size:var(--fs-body);color:var(--ink-2);line-height:1.7}
.fund-move em{font-style:normal;font-weight:600;white-space:nowrap}

/* 數字格（今日數字） */
.stat-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:18px;
  background:var(--rule-soft);border-radius:var(--radius-sm);overflow:hidden;
}
.stat{background:var(--card);padding:14px 16px 15px}
.stat-name{font-size:var(--fs-min);color:var(--ink-2);line-height:1.55}
.stat-num{font-size:25px;font-weight:600;letter-spacing:-.02em;line-height:1.35;font-variant-numeric:tabular-nums}
.stat-num small{font-size:var(--fs-min);font-weight:500;margin-left:2px;color:inherit}

/* 產業甜甜圈（分類佔比）
   分類色只從 --cat-1…--cat-6 來。JS 負責算角度、挑第幾階，然後掛
   class="c3" 或 style="--cat:var(--cat-3)"；顏色一律不進 JS。
   段與段之間用 --card 描邊隔開，靠近的兩階才分得出來。
   中央是總計數字，圖例文字不小於 --fs-min。 */
.c1{--cat:var(--cat-1)}
.c2{--cat:var(--cat-2)}
.c3{--cat:var(--cat-3)}
.c4{--cat:var(--cat-4)}
.c5{--cat:var(--cat-5)}
.c6{--cat:var(--cat-6)}

/* 左圖右圖例；窄版改成上下 */
.donut-split{display:grid;grid-template-columns:minmax(0,208px) minmax(0,1fr);gap:24px;align-items:center;margin-top:18px}
.donut{position:relative;width:100%;max-width:228px;aspect-ratio:1;margin:0 auto}
.donut svg{display:block;width:100%;height:100%}
.donut-track{fill:none;stroke:var(--paper-deep)}
.donut-hole{fill:var(--card)}
.donut-arc{
  fill:var(--cat,var(--ink-3));stroke:var(--card);stroke-width:1.5;
  cursor:pointer;transition:opacity var(--ease),stroke-width var(--ease);
}
.donut-arc.is-dim{opacity:var(--dim-node)}
.donut-arc.is-lead{stroke-width:2.5}
.donut:focus-visible,.donut-arc:focus{outline:none}
.donut-arc:focus-visible{stroke:var(--ink);stroke-width:2}
/* 中央總計：不吃滑鼠事件，才不會擋住弧段的 hover */
.donut-center{
  position:absolute;inset:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 12px;
}
.donut-total{font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.25;font-variant-numeric:tabular-nums}
.donut-total small{font-size:15px;font-weight:500;margin-left:2px}
.donut-cap{margin-top:2px;font-size:var(--fs-min);color:var(--ink-2);line-height:1.5}

/* 圖例：色塊＋名稱＋數字，可做成 <button> 當篩選器 */
.legend{display:flex;flex-direction:column;min-width:0}
.legend-item{
  display:flex;align-items:baseline;gap:9px;width:100%;text-align:left;
  padding:7px 0;border-bottom:1px solid var(--rule-soft);
  font:inherit;font-size:var(--fs-min);line-height:1.55;color:inherit;
  background:none;border-left:0;border-right:0;border-top:0;
  transition:opacity var(--ease);
}
.legend-item:last-child{border-bottom:0}
button.legend-item{cursor:pointer}
button.legend-item:hover .legend-name{color:var(--ink)}
.legend-item.is-dim{opacity:.4}
.legend-swatch{
  width:11px;height:11px;border-radius:3px;flex:none;
  background:var(--cat,var(--ink-3));transform:translateY(1px);
}
.legend-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.legend-val{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.legend-sub{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-3)}

/* K 線圖容器
   lightweight-charts / canvas 只拿 .chart-host 當掛載點，高度由這裡定，
   不要在 HTML 寫 style="height:420px"；顏色讀 01 tokens 的 --chart-*。
   .chart 本身不設 overflow:hidden——圓角裁切放在 .chart-host，
   .tipbox 才能浮出圖表上緣而不被切掉。 */
.chart{position:relative;margin-top:16px}
.chart-host{
  height:clamp(300px,46vh,460px);
  border-radius:var(--radius-sm);overflow:hidden;background:var(--chart-bg);
}
.chart-host canvas{display:block}
/* 圖表上方的工具列：左邊放 .chip-row，右邊放區間／說明 */
.chart-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
/* 圖例沿用桑基圖的 .key 語彙：<span class="key"><i class="k-mark up"></i>買進</span> */
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:12px;font-size:var(--fs-note);color:var(--ink-2)}
.key i.k-line{background:var(--chart-line)}
.key i.k-ma{background:var(--chart-ma2)}
/* 買賣箭頭：三角形，方向本身就帶訊息，不是只靠顏色 */
.key i.k-mark{
  width:0;height:0;border-radius:0;background:none;
  border-left:6px solid transparent;border-right:6px solid transparent;
}
.key i.k-mark.up{border-bottom:9px solid var(--chart-marker-buy)}
.key i.k-mark.down{border-top:9px solid var(--chart-marker-sell)}
.chart-empty{
  margin-top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:clamp(220px,32vh,320px);
}

/* 長文排版（about 等純文字頁）
   02 base 為了版面把 margin 與 list-style 清光了，把它們加回來的唯一
   入口就是 .prose——長文頁不要在自己的 <style> 再重建一套排版。
   字級一律 >= --fs-min，行高 1.7，行長收在 68ch。 */
.prose{max-width:68ch}
.prose > :first-child{margin-top:0}
.prose p{margin-top:14px;font-size:var(--fs-body);line-height:1.7;color:var(--ink-2)}
.prose p.lede{font-size:var(--fs-lede);color:var(--ink)}
.prose h2{margin-top:var(--s6);font-size:21px;font-weight:700;letter-spacing:-.018em;line-height:1.4;color:var(--ink)}
.prose h3{margin-top:var(--s5);font-size:17px;font-weight:600;letter-spacing:-.012em;line-height:1.5;color:var(--ink)}
.prose h2 + p,.prose h3 + p{margin-top:8px}
.prose ul,.prose ol{margin-top:12px;padding-left:1.45em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-top:8px;font-size:var(--fs-body);line-height:1.7;color:var(--ink-2)}
.prose li::marker{color:var(--ink-3)}
.prose li > ul,.prose li > ol{margin-top:6px}
/* 名詞解釋：dt 一行、dd 縮排一行，跟 .explainer 的行內版不同用途 */
.prose dl{margin-top:16px}
.prose dt{margin-top:14px;font-size:var(--fs-body);font-weight:600;color:var(--ink)}
.prose dd{margin:4px 0 0;font-size:var(--fs-body);line-height:1.7;color:var(--ink-2)}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color var(--ease)}
.prose a:hover{border-color:var(--ink)}
.prose b,.prose strong{font-weight:600;color:var(--ink)}
.prose .num{color:var(--ink)}
.prose hr{margin:var(--s6) 0 0;border:0;border-top:1px solid var(--rule-soft)}
.prose-note{margin-top:10px;font-size:var(--fs-note);color:var(--ink-3);line-height:1.7}


/* ── 06 桑基圖 ─────────────────────────────────────────────────────── */
.flowmap-guide{
  margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;
  font-size:var(--fs-note);color:var(--ink-2);
}
.key{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.key i{width:22px;height:9px;border-radius:3px;display:inline-block}
.key i.k-buy{background:var(--buy-band)}
.key i.k-sell{background:var(--sell-band)}
.flowmap-wrap{position:relative;margin-top:16px;overflow-x:auto;overflow-y:hidden;padding-bottom:4px;-webkit-overflow-scrolling:touch}
/* 圖比容器寬時要橫向捲動，不能被全域的 svg{max-width:100%} 壓扁——
   壓扁會把 13.5px 的中文標籤縮成 7px，等於直接看不見。 */
.flowmap-wrap svg{display:block;max-width:none}
.flowmap-wrap svg text{user-select:none}

/* 連線 */
.flow-band{cursor:pointer;fill-opacity:.24;transition:opacity var(--ease),fill-opacity var(--ease)}
.flow-band.is-buy{fill:var(--buy)}
.flow-band.is-sell{fill:var(--sell)}
.flow-band.is-hot{fill-opacity:.62}
.flow-band.is-dim{opacity:var(--dim)}

/* 節點（整組含柱子＋文字標籤，兩者都是熱區） */
.fnode{cursor:pointer;transition:opacity var(--ease)}
.fnode.is-dim{opacity:var(--dim-node)}
.fnode-hit{fill:transparent}
.fnode-bar{transition:fill-opacity var(--ease)}
.fnode-bar.is-fund{fill:var(--ink)}
.fnode-bar.is-buy{fill:var(--buy);fill-opacity:.85}
.fnode-bar.is-sell{fill:var(--sell);fill-opacity:.85}
.fnode-label{font-size:13.5px;fill:var(--ink);font-weight:500}
.fnode-sub{font-size:12.5px;fill:var(--ink-3);font-variant-numeric:tabular-nums}
.fnode:hover .fnode-label,
.fnode.is-lead .fnode-label{font-weight:700}
.fnode:hover .fnode-hit{fill:rgba(26,25,23,.04)}
.fnode:focus{outline:none}
.fnode:focus-visible .fnode-hit{fill:rgba(26,25,23,.06);stroke:var(--ink);stroke-width:1.5}
.fnode.is-pinned .fnode-hit{fill:rgba(26,25,23,.05)}
.flow-axis{font-size:12.5px;fill:var(--ink-3);letter-spacing:.02em}

/* 圖下的一行狀態說明：亮起時講現在在看誰，離開回到預設 */
.flow-status{
  margin-top:12px;font-size:var(--fs-body);line-height:1.7;color:var(--ink-2);
  min-height:calc(var(--fs-body) * 1.7);
}
.flow-status b{font-weight:600}
.flow-status b:not(.buy):not(.sell){color:var(--ink)}
.flow-status .num{font-weight:600}
.flow-status.is-live{color:var(--ink)}
.flow-hint{margin-top:10px;font-size:var(--fs-body);line-height:1.7;color:var(--ink-3);display:none}


/* ── 07 responsive ─────────────────────────────────────────────────── */

/* 1440 以上：容器放寬，數字放大一階 */
@media (min-width:1440px){
  .sheet{max-width:1340px;padding:40px 36px 72px}
  .wall{gap:22px}
  .banner-figs{gap:40px}
  .fig-num{font-size:33px}
}

/* 中型：12 欄塌成整列。
   斷在 1200 而不是 1080——1081~1200 之間左欄只剩約 620px，
   桑基圖會被迫縮成窄版、跟右欄差出一大塊空白。 */
@media (max-width:1200px){
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 12}
  .stat-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1080px){
  .fund-grid{grid-template-columns:repeat(2,1fr)}
  .bench{grid-template-columns:1fr}
  /* 單欄時不要再包一層內捲框：320px 的框在手機上只看得到兩三列，
     會讓人以為清單只有那幾檔。清單直接跟著整頁捲。 */
  .bench-rail{position:static;max-height:none;overflow:visible}
}

/* 768：平板直式 / 大手機 */
@media (max-width:768px){
  .sheet{padding:26px 20px 52px}
  .banner{grid-template-columns:1fr;gap:22px;align-items:start}
  .banner-rule{width:auto;height:1px;margin:0}
  .banner-figs{gap:26px}
  .fig-num{font-size:26px}
  .topbar{gap:var(--s3);padding-bottom:18px}
  .topnav{margin-left:0;width:100%;gap:var(--s4)}
  .rank-cols{gap:18px}
  .chart-host{height:clamp(260px,42vh,380px)}
  .donut-split{grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:20px}
}

/* 640 以下：單欄 */
@media (max-width:640px){
  body{font-size:15.5px}
  .sheet{padding:22px 16px 44px}
  .card{padding:20px 18px;border-radius:16px}
  .card.flush > *{padding-left:18px;padding-right:18px}
  .wall,.stack{gap:16px}
  .banner h1{max-width:none}
  .banner-figs{flex-wrap:wrap;gap:18px 26px}
  .fig{min-width:88px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .rank-cols{grid-template-columns:1fr}
  .fund-grid,.fund-grid.two{grid-template-columns:1fr}
  .event{grid-template-columns:1fr auto}
  .flow-hint{display:block}
  .chart-host{height:280px}
  /* 分頁在手機上會換行：藥丸收窄一點，五個分頁才不會排到第三行 */
  .chip-row.as-tabs{gap:var(--s2);padding-bottom:var(--s2)}
  .chip-row.as-tabs .chip{padding:5px 13px}
  .tabpanel{margin-top:var(--s4)}
  .donut-split{grid-template-columns:1fr;gap:18px}
  .donut{max-width:206px}
  .prose h2{font-size:20px}
}

/* 390：iPhone 直式，收掉會撐寬的東西 */
@media (max-width:430px){
  .sheet{padding:20px 14px 40px}
  .card{padding:18px 15px}
  .card.flush > *{padding-left:15px;padding-right:15px}
  .card-title{font-size:19px}
  .banner-figs{gap:14px 20px}
  .fig{min-width:calc(50% - 10px)}
  .fig-num{font-size:24px}
  .edition{margin-left:0}
  .stat{padding:12px 13px}
  .stat-num{font-size:22px}
  .dtable{font-size:var(--fs-min)}
  .dtable td,.dtable th{padding-left:8px;padding-right:8px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .tile:hover{transform:none}
}
