/* ============================================================
   市場日報設計稿 · 外殼／市場頁／統一抽屜／手機規則
   正本契約：DESIGN.md（色彩 token、字級、列解剖、抽屜、手機、禁用清單）
   ------------------------------------------------------------
   層疊策略：本檔刻意不使用任何 z-index（前次 blocker 是浮動 root 掛了
   z-index 反而困住抽屜）。層疊全靠 DOM 順序＋position:fixed 解決：
   main → footer → .tool-dock → .drawer-root，後者永遠壓在前者之上；
   抽屜內遮罩在前、面板在後，面板自然壓住遮罩。
   表頭用 position:sticky 且 top 對齊 masthead 高度，兩者不重疊，
   因此也不需要靠 z-index 排順序。
   ============================================================ */

/* @font-face 不寫在這裡：字體路徑由 index.html 的 <meta name="daily-font-base"> 決定，
   daily.js 在載入時注入一段 @font-face（部署時試衣間建置腳本只要改 meta 就能換路徑）。
   宣告 font-weight: normal 的理由見 DESIGN.md §3（該字體檔不是可變字體，
   宣告 100 900 會讓瀏覽器不合成粗體，600 標題就與正文同粗）。 */

/* ============================================================
   主題 token（DESIGN.md §2 ＋ §11 主題系統）
   ------------------------------------------------------------
   <html data-theme="daily | daily-dark | okx | llama">，預設 daily。
   四套主題共用版面、字體、元件與所有 class，只換下列 token 與少量材質
   （圓角、列高、hover 底、chip 選中的填法）。新增顏色一律先加 token，
   不要在元件規則裡寫死色碼，否則某一套主題必定殘留白底。

   強調色拆成四個角色，因為 okx 的強調是白、llama 的填色藍當文字對比不足：
     --indigo       填色／圖形用強調（選中 chip 底、徽章底、散點命中點）
     --accent-ink   當文字或線條用的強調（選中頁籤、chevron hover、連結）
     --on-accent    疊在 --indigo 填色之上的文字色
     --chip-on-*    選中 chip 的底／字／邊，讓 okx 走白底黑字、llama 走藍底白字
   ============================================================ */

/* daily：淺色版，DESIGN.md §2 現值，不動 */
:root,
:root[data-theme="daily"] {
  color-scheme: light;

  --paper: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F3F3EE;
  --ink: #20282F;
  --ink-2: #5B6670;
  --ink-3: #8A939B;
  --rule: #E4E4DE;
  --rule-2: #CFCFC8;
  --indigo: #435FB5;
  --indigo-soft: #E9EDF8;
  --up: #157A4A;
  --down: #C8372D;
  --up-soft: #E6F4EC;
  --down-soft: #FBE9E7;
  --warn: #9A5C00;
  --warn-soft: #FFF4E0;

  --accent-ink: var(--indigo);
  --accent-hover: #2F4795;
  --on-accent: #FFFFFF;
  --chip-on-bg: var(--indigo-soft);
  --chip-on-fg: var(--indigo);
  --chip-on-border: var(--indigo);
  --link: var(--indigo);
  --tip-bg: var(--ink);
  --tip-fg: var(--paper);
  --mask: rgba(32, 40, 47, 0.28);
  --hover: var(--surface-2);
  --chip-bg: var(--surface-2);

  --r-sm: 4px;
  --r-md: 8px;
  --row-h: 62px;
}

/* daily-dark：日報深色，與淺色同一世界觀（同色相、同角色分工） */
:root[data-theme="daily-dark"] {
  color-scheme: dark;

  --paper: #121417;
  --surface: #1B1E22;
  --surface-2: #23272C;
  --ink: #ECEDEA;
  --ink-2: #A9B0B7;
  --ink-3: #737B83;
  --rule: #2B3036;
  --rule-2: #3A4048;
  --indigo: #8FA3E8;
  --indigo-soft: #26304A;
  --up: #4CC38A;
  --down: #F0655A;
  --up-soft: #16302A;
  --down-soft: #3A2220;
  --warn: #E0A23A;
  --warn-soft: #3A2E14;

  --accent-ink: var(--indigo);
  --accent-hover: #AEBDF0;
  --on-accent: #121417;
  --chip-on-bg: var(--indigo-soft);
  --chip-on-fg: var(--indigo);
  --chip-on-border: var(--indigo);
  --link: var(--indigo);
  --tip-bg: var(--ink);
  --tip-fg: var(--paper);
  --mask: rgba(0, 0, 0, 0.58);
  --hover: var(--surface-2);
  --chip-bg: var(--surface-2);

  --r-sm: 4px;
  --r-md: 8px;
  --row-h: 62px;
}

/* okx：2026-09-11 實測 okx.com 行情頁取色。純黑底、無彩色強調（強調＝白）、
   4px 小圓角、列較密。--down 由實測的 #CA3F64 調亮到 #DA5C79：原值在 #121212
   上只有 3.93:1，過不了正文 4.5:1，色相不變只提明度。 */
:root[data-theme="okx"] {
  color-scheme: dark;

  --paper: #000000;
  --surface: #121212;
  --surface-2: #1C1C1C;
  --ink: #FFFFFF;
  --ink-2: #B3B3B3;
  --ink-3: #909090;
  --rule: #262626;
  --rule-2: #3A3A3A;
  --indigo: #FFFFFF;
  --indigo-soft: #262626;
  --up: #25A750;
  --down: #DA5C79;
  --up-soft: #0F2A18;
  --down-soft: #33161E;
  --warn: #F0B90B;
  --warn-soft: #2E2610;

  --accent-ink: #FFFFFF;
  --accent-hover: #D6D6D6;
  --on-accent: #000000;
  --chip-on-bg: #FFFFFF;
  --chip-on-fg: #000000;
  --chip-on-border: #FFFFFF;
  --link: #FFFFFF;
  --tip-bg: #FFFFFF;
  --tip-fg: #000000;
  --mask: rgba(0, 0, 0, 0.66);
  --hover: #1A1A1A;
  --chip-bg: var(--surface-2);

  --r-sm: 4px;
  --r-md: 4px;
  --row-h: 56px;
}

/* okx-light：2026-09-13 實測 okx.com 行情頁切到 theme-light 取色。純白底、
   強調＝黑（主要按鈕黑底白字），4px 小圓角、列較密，材質同 okx 深色版。
   --up/--down 沿用 okx 深色版的品牌綠 #25A750／品牌粉 #EB4B6D 色相，但白底
   文字對比只有 3.1～3.7:1 過不了，調深到 #1A7C3B／#CB2850：白底 5.26/5.30:1、
   chip 底 #F5F5F5 上 4.83/4.87:1，兩個門檻都過 4.5。 */
:root[data-theme="okx-light"] {
  color-scheme: light;

  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F5F5;
  --ink: #000000;
  --ink-2: #5E5E5E;
  --ink-3: #8A8A8A;
  --rule: #E3E3E3;
  --rule-2: #D0D0D0;
  --indigo: #000000;
  --indigo-soft: #EDEDED;
  --up: #1A7C3B;
  --down: #CB2850;
  --up-soft: #F2FAF5;
  --down-soft: #FDEDF0;
  --warn: #9A5C00;
  --warn-soft: #FFF4E0;

  --accent-ink: #000000;
  --accent-hover: #333333;
  --on-accent: #FFFFFF;
  --chip-on-bg: #000000;
  --chip-on-fg: #FFFFFF;
  --chip-on-border: #000000;
  --link: #000000;
  --tip-bg: var(--ink);
  --tip-fg: var(--paper);
  --mask: rgba(0, 0, 0, 0.28);
  --hover: var(--surface-2);
  --chip-bg: var(--surface-2);

  --r-sm: 4px;
  --r-md: 4px;
  --row-h: 56px;
}

/* llama：2026-09-11 實測 defillama.com 深色取色。品牌藍做填色、連結藍做文字，
   6px 圓角、列 hover 走藍 12%。--down-soft 由 #351A18 壓暗到 #240F0D：
   原值配 #E24A42 只有 4.03:1，壓暗底色可保留站方那支紅不動。 */
:root[data-theme="llama"] {
  color-scheme: dark;

  --paper: #090B0C;
  --surface: #131516;
  --surface-2: #181A1B;
  --ink: #FFFFFF;
  --ink-2: #C6C6C6;
  --ink-3: #878787;
  --rule: #1F2224;
  --rule-2: #2C3033;
  --indigo: #1F67D2;
  --indigo-soft: #132A4A;
  --up: #3EB84F;
  --down: #E8554D; /* 2026-09-11 驗收：站方紅 #E24A42 在標籤底 #181A1B 只有 4.40:1，提亮到 4.85:1 */
  --up-soft: #12301A;
  --down-soft: #240F0D;
  --warn: #FF8E2B;
  --warn-soft: #33200E;

  --accent-ink: #6A9BE0;
  --accent-hover: #4B86DB;
  --on-accent: #FFFFFF;
  --chip-on-bg: #1F67D2;
  --chip-on-fg: #FFFFFF;
  --chip-on-border: #1F67D2;
  --link: #6A9BE0;
  --tip-bg: #FFFFFF;
  --tip-fg: #090B0C;
  --mask: rgba(0, 0, 0, 0.62);
  --hover: rgba(31, 103, 210, 0.12);
  --chip-bg: #232628;

  --r-sm: 6px;
  --r-md: 6px;
  --row-h: 62px;
}

/* 版面常數：四套主題共用，不隨主題改 */
:root {
  --font-main: "GenJyuuGothic Mono", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;

  --head-h: 64px;
  --dock-w: 76px;
  --dur: 200ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.5;
  caret-color: var(--accent-ink);
  scrollbar-color: var(--rule-2) transparent;
  scrollbar-width: thin;
}
body.drawer-open { overflow: hidden; }

/* 瀏覽器表面：選取、捲軸、焦點環、連結底線位置 */
::selection { background: var(--indigo-soft); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border: 3px solid var(--paper); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 2px; }
a { color: var(--link); text-underline-offset: 3px; }
code { font-family: var(--font-main); background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-sm); }

h1, h2, h3, p, ul, ol { margin: 0; }
button { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* 數字一律等寬、右對齊 */
.num, .c-num, .page-title-num, .ctx-val, .dv-val, .drawer-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--ink-2); }

/* ---------- Masthead ---------- */
/* masthead 刻意不 sticky。masthead 與焦點區表頭若同時 sticky 又都不掛 z-index，
   DOM 較後的表頭會畫在 masthead 之上；要壓回去只能給 masthead z-index，
   那又會把它推到 .tool-dock／.drawer-root 之上，等於重演前次 blocker。
   規格明文要求的是「焦點區表頭固定」，masthead 常駐只是加分項，因此捨棄後者。
   頁籤與工具列的常駐可及性由固定在視窗上的 .tool-dock 承擔。 */
.masthead {
  position: static;
  height: var(--head-h);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
}
.brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.brand-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.brand-sub { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tabbar { display: flex; gap: 4px; justify-self: center; }
.tab-btn {
  appearance: none; background: none; border: 0;
  padding: 0 18px; height: 40px;
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 120ms linear;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.is-on { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }

/* 主題選單：桌機顯示完整名稱、手機顯示縮寫（選項文字由 daily.js 依斷點改寫）。
   用原生 <select> 而不是四顆按鈕，手機 masthead 才塞得下，觸控目標也夠大。 */
.theme-pick { justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
.theme-pick-label { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.theme-select {
  appearance: none;
  height: 36px; padding: 0 30px 0 12px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  font: inherit; font-size: 13px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.theme-select:hover { border-color: var(--rule-2); }
.theme-select option { background: var(--surface); color: var(--ink); }

/* ---------- 狀態提醒條 ---------- */
.stale-bar {
  background: var(--warn-soft);
  border-bottom: 1px solid var(--rule);
  color: var(--warn);
  font-size: 13px;
  padding: 10px 24px;
}

/* ---------- 即時性徽章（2026-09-24 階段 6：市場／資金流／TradFi 頁首） ---------- */
.live-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; margin-left: 8px;
  border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
  vertical-align: middle; cursor: help; white-space: nowrap;
}
.live-badge.is-live { background: var(--indigo-soft); color: var(--indigo); }
.live-badge.is-static { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule); }
.live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* fix1（major #3）：「更新於 N 分鐘前」改可見文字（原本只在 title tooltip，手機摸不到）。
   跟徽章同一行、字級與 .page-ts 一致，縮短措辭「N 分前」在窄螢幕也放得下。 */
.live-updated {
  display: inline-block; margin-left: 6px; font-size: 13px; color: var(--ink-2);
  white-space: nowrap; vertical-align: middle;
}
.live-updated[hidden] { display: none; }
.live-stale-warn {
  margin: 4px 0 0; font-size: 13px; color: var(--warn);
}
.live-stale-warn[hidden] { display: none; }

/* ---------- 版面骨架 ---------- */
.page {
  width: min(1240px, calc(100vw - 176px));
  margin: 0 auto;
  padding: 28px 0 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tab[hidden] { display: none; }
.tab { display: flex; flex-direction: column; gap: 24px; outline: none; }

/* ---------- 頁首帶 ---------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.page-head-main { min-width: 0; }
.page-ts { font-size: 13px; color: var(--ink-2); }
.page-title { font-size: 28px; font-weight: 600; line-height: 1.25; margin: 6px 0 12px; letter-spacing: -0.01em; }
.page-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  appearance: none; cursor: pointer;
  height: 32px; padding: 0 14px;
  background: var(--chip-bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 13px; color: var(--ink-2);
  transition: background 120ms linear, color 120ms linear;
}
.chip:hover { color: var(--ink); border-color: var(--rule-2); }
.chip.is-on { background: var(--chip-on-bg); border-color: var(--chip-on-border); color: var(--chip-on-fg); font-weight: 600; }

.page-context { display: flex; gap: 28px; padding-bottom: 4px; }
.ctx-stat { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.ctx-label { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.ctx-val { font-size: 18px; font-weight: 600; white-space: nowrap; }

/* ---------- 面板 ---------- */
.focus-panel, .panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* 焦點區刻意不加 overflow:hidden：它會讓自己變成 sticky 的捲動容器，
   表頭就被固定在「面板頂端 + 64px」而不是視窗頂端，直接壓在第一列上。
   圓角改由表頭自己的 border-radius 收邊。 */
.focus-panel { border-color: var(--rule-2); overflow: visible; }
.focus-panel > .table > .row-head { border-radius: var(--r-md) var(--r-md) 0 0; }
/* 釘價表只有 8 列，表頭不需要 sticky，也就不會撞到 .panel 的 overflow:hidden */
#pinTable .row-head { position: static; }
.panel-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px 12px;
}
.panel-head h2 { font-size: 18px; font-weight: 600; }
.panel-sub { font-size: 13px; color: var(--ink-2); }

.panel-details { padding: 0; }
.panel-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 8px;
}
.panel-details > summary::-webkit-details-marker { display: none; }
.panel-details > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg); margin-top: -4px;
}
.panel-details[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }
.panel-details > summary h2 { font-size: 18px; font-weight: 600; }
.details-body { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.details-body p { color: var(--ink); }

/* ---------- 列解剖（全站共用） ---------- */
.table { display: block; }
.row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  min-height: var(--row-h);
  border-top: 1px solid var(--rule);
}
.table-body .row:first-child { border-top: 1px solid var(--rule-2); }
.row-head {
  position: sticky;
  top: 0;
  min-height: 42px;
  background: var(--surface-2);
  border-top: 0;
  border-bottom: 1px solid var(--rule-2);
  font-size: 13px;
  color: var(--ink-2);
}
.row-head .c-num { font-weight: 400; }
.row[data-clickable] { cursor: pointer; }
.row[data-clickable]:hover { background: var(--hover); }
.table-compact .row { min-height: 48px; }

/* 欄位模板：一律 minmax(0, …) 起跳，任何寬度都不會撐出橫向捲動 */
#wlTable .row { grid-template-columns: minmax(0, 1.4fr) 108px 100px 118px 122px minmax(0, 1.5fr) 26px; }
#pinTable .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 64px 132px 96px; }

.c-id { min-width: 0; }
.c-sym { font-size: 16px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-meta { font-size: 13px; color: var(--ink-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-num { text-align: right; font-size: 15px; white-space: nowrap; }
.c-unit { color: var(--ink-2); font-size: 13px; margin-left: 2px; }
.c-span { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.c-tags { display: flex; flex-wrap: wrap; gap: 6px; overflow: hidden; }
.c-flag { font-size: 13px; }
.c-act { display: flex; justify-content: flex-end; color: var(--ink-3); }
.c-act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.row[data-clickable]:hover .c-act { color: var(--accent-ink); }

.tag {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 8px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tag.hi { color: var(--up); }
.tag.lo { color: var(--down); }
.tag-more { color: var(--ink-2); }
.tag-more-m { display: none; }

.flag-on { color: var(--warn); }
.flag-off { color: var(--ink-2); }

.empty {
  padding: 28px 20px;
  color: var(--ink-2);
  font-size: 15px;
  border-top: 1px solid var(--rule);
}
.table-more { padding: 14px 20px; border-top: 1px solid var(--rule); }
.table-more[hidden] { display: none; }
.btn-ghost {
  appearance: none; cursor: pointer;
  height: 36px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-md);
  font-size: 13px; color: var(--ink-2);
}
.btn-ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn-primary {
  appearance: none; cursor: pointer;
  height: 40px; padding: 0 16px;
  background: var(--indigo); border: 1px solid var(--indigo); border-radius: var(--r-md);
  font-size: 15px; color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.caveat, .disclaimer {
  font-size: 13px; color: var(--ink-2);
  padding: 12px 20px 0;
  line-height: 1.6;
}
.disclaimer { padding-bottom: 16px; }
.caveat + .disclaimer { padding-top: 8px; }

/* ---------- 圖表 ---------- */
.chart-host { padding: 0 12px 4px; }
.chart-host svg { display: block; width: 100%; height: auto; }
.sc-axis { stroke: var(--rule-2); stroke-width: 1; }
.sc-grid { stroke: var(--rule); stroke-width: 1; }
.sc-zero { stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 4 4; }
.sc-tick { fill: var(--ink-3); font-size: 12px; font-family: var(--font-main); }
.sc-alab { fill: var(--ink-2); font-size: 13px; font-family: var(--font-main); }
/* 非命中點：小而淡（r 2.4／0.28），密集區才看得出疏密而不是糊成一塊深灰。
   stroke-width 5 配 pointer-events: all 只為了把命中範圍撐大到手指與滑鼠點得到，
   stroke: none 所以畫面上完全看不到這圈。 */
.sc-pt {
  fill: var(--ink-3); fill-opacity: 0.28;
  stroke: none; stroke-width: 5;
  pointer-events: all;
}
/* 命中點最後才畫（daily.js 的 DOM 順序），加一圈紙色光暈把它從底下那團灰點裡挑出來 */
.sc-pt.hit {
  fill: var(--indigo); fill-opacity: 1;
  stroke: var(--paper); stroke-width: 1.5;
  cursor: pointer;
}
.sc-pt.hit:hover { r: 6; fill: var(--accent-hover); }
.sc-pt.flash { stroke: var(--indigo); stroke-width: 6; stroke-opacity: 0.25; }
/* 超出 1%~99% 分位範圍、貼邊顯示者改畫空心圓，與範圍內的實心點一眼可分，且一律不標籤 */
.sc-pt.clamped { fill: none; fill-opacity: 1; stroke: var(--ink-2); stroke-width: 1.2; stroke-opacity: 0.75; }
.sc-pt.clamped.hit { stroke: var(--indigo); stroke-opacity: 1; }
.sc-lab { fill: var(--ink-2); font-size: 12px; font-family: var(--font-main); pointer-events: none; }

/* 散點 hover／點擊提示。position: relative 只為定位，層疊靠 DOM 順序
   （提示框是 #scatterHost 的最後一個子節點），不宣告任何層疊層級。 */
#scatterHost { position: relative; }
.sc-tip {
  position: absolute; left: 0; top: 0;
  width: max-content; max-width: min(280px, 82vw);
  pointer-events: none;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: var(--r-md);
  padding: 7px 10px;
  font-size: 13px; line-height: 1.6;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  opacity: 0; transition: opacity 120ms linear;
}
.sc-tip.is-on { opacity: 1; }

.chart-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 4px 20px 18px;
  font-size: 13px; color: var(--ink-2);
}
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg-note { color: var(--ink-2); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-hit { background: var(--indigo); }
.dot-base { background: var(--ink-3); opacity: 0.45; }

/* 市場分佈概覽移到關注清單上方後，整個面板要壓在 400px 內，
   1024 高的首屏才看得到關注清單表頭。壓法：面板頭與圖說縮 padding、
   圖高改 --sc-h（daily.js 讀它決定 SVG 高度），不動其他面板的節奏。 */
#scatterPanel {
  --sc-h: 244px;
  max-height: 400px;
  display: flex; flex-direction: column;
}
#scatterPanel .panel-head { padding: 12px 20px 4px; flex: none; }
#scatterPanel .chart-host { padding-bottom: 0; flex: none; }
#scatterPanel .chart-legend { padding: 2px 20px 4px; gap: 4px 18px; flex: none; }
/* 超出範圍與標籤重疊這兩段註腳長度隨資料浮動，放在最後一格吃剩餘高度；
   萬一某天的資料讓它長過剩餘空間就自己捲，面板整體仍不破 400px。 */
#scatterPanel .chart-note { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.chart-note {
  font-size: 13px; color: var(--ink-2); line-height: 1.6;
  padding: 0 20px 12px;
}
.chart-note:empty { display: none; }

/* ---------- 佔位框 ---------- */
.placeholder {
  margin: 0 20px 4px;
  max-width: 700px; min-height: 300px;
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.ph-title { font-size: 16px; font-weight: 600; }
.ph-body { font-size: 15px; color: var(--ink-2); max-width: 60ch; }
.ph-tag { font-size: 13px; color: var(--warn); }

/* ---------- 頁腳 ---------- */
.site-foot {
  border-top: 1px solid var(--rule);
  padding: 20px 0 40px;
  width: min(1240px, calc(100vw - 176px));
  margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between;
}
.foot-line { font-size: 13px; color: var(--ink-2); }
.foot-note { font-size: 13px; color: var(--ink-2); }

/* ---------- 倉位計算器抽屜內容（calc-，2026-09-24） ----------
   只用既有 token；欄位輸入框與列同一套面／線色，算出的值用 accent-ink 標示。 */
.calc { padding: 12px 20px 8px; }
.calc-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.calc-seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--r-md); overflow: hidden; }
.calc-seg button { appearance: none; cursor: pointer; background: var(--surface-2); border: 0; color: var(--ink-2); font-size: 13px; padding: 6px 14px; }
.calc-seg button.is-on { background: var(--indigo-soft); color: var(--accent-ink); font-weight: 600; }
.calc-btn { appearance: none; cursor: pointer; background: var(--surface); border: 1px solid var(--rule-2); color: var(--ink-2); font-size: 13px; padding: 6px 10px; border-radius: var(--r-md); }
.calc-btn:hover, .calc-btn:focus-visible { color: var(--accent-ink); border-color: var(--accent-ink); }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 10px; }
.calc-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calc-f label { font-size: 13px; color: var(--ink-2); display: flex; justify-content: space-between; align-items: baseline; white-space: nowrap; overflow: hidden; }
.calc-tag { font-size: 12px; color: var(--accent-ink); visibility: hidden; }
.calc-f.is-calc .calc-tag { visibility: visible; }
.calc-in { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-md); overflow: hidden; }
.calc-in:focus-within { border-color: var(--accent-ink); }
.calc-f.is-calc .calc-in { background: var(--indigo-soft); }
.calc-f.is-calc input { color: var(--accent-ink); font-weight: 600; }
.calc-in input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; padding: 7px 9px; outline: none; }
.calc-unit { padding: 0 8px; color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.calc-msg { margin-top: 12px; }
.calc-note { border: 1px solid var(--rule-2); border-left: 3px solid var(--warn); background: var(--warn-soft); color: var(--ink); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 8px 11px; font-size: 13px; line-height: 1.6; margin-bottom: 8px; }
.calc-note.is-bad { border-left-color: var(--down); background: var(--surface-2); }
.calc-result { background: var(--surface-2); border: 1px solid var(--rule-2); border-radius: var(--r-md); padding: 9px 11px; font-size: 14px; line-height: 1.6; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.calc-h { font-size: 13px; color: var(--ink-2); margin: 12px 0 6px; }
.calc-h-sub { margin-top: 6px; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.calc-table th, .calc-table td { border-bottom: 1px solid var(--rule); padding: 5px 4px; text-align: right; white-space: nowrap; }
.calc-table th { color: var(--ink-2); font-weight: 400; }
.calc-table td:first-child, .calc-table th:first-child { text-align: left; }
.calc-table td.is-over { color: var(--down); }
.calc-link { margin-top: 12px; font-size: 13px; }
.calc-link a { color: var(--accent-ink); }

/* ---------- 右緣工具列 ---------- */
.tool-dock {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-end;
}
.dock-btn {
  position: relative;
  appearance: none; cursor: pointer;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-md);
  color: var(--ink-2);
  transition: width var(--dur) var(--ease), color 120ms linear, border-color 120ms linear;
}
.dock-btn:hover, .dock-btn:focus-visible { color: var(--accent-ink); border-color: var(--accent-ink); }
.dock-btn.is-on { background: var(--indigo-soft); border-color: var(--accent-ink); color: var(--accent-ink); }
.dock-icon { display: flex; width: 22px; height: 22px; }
.dock-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dock-label {
  position: absolute;
  right: calc(100% + 8px);
  white-space: nowrap;
  background: var(--tip-bg);
  color: var(--tip-fg);
  font-size: 13px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.dock-btn:hover .dock-label, .dock-btn:focus-visible .dock-label { opacity: 1; }
.dock-badge {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo); color: var(--on-accent);
  border: 2px solid var(--paper);
  border-radius: 999px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.dock-badge.is-zero { background: var(--surface-2); color: var(--ink-2); border-color: var(--paper); }

/* ---------- 統一抽屜 ---------- */
.drawer-root { position: fixed; inset: 0; }
.drawer-root[hidden] { display: none; }
.drawer-mask {
  position: absolute; inset: 0;
  background: var(--mask);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer-root.is-open .drawer-mask { opacity: 1; }
.drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--rule-2);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}
.drawer-root.is-open .drawer { transform: translateX(0); }
.drawer-grip { display: none; }
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 20px;
  border-bottom: 1px solid var(--rule);
}
.drawer-title { font-size: 18px; font-weight: 600; }
.drawer-count { font-size: 13px; color: var(--ink-2); margin-right: auto; }
.drawer-close {
  appearance: none; cursor: pointer;
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--r-md);
  color: var(--ink-2);
}
.drawer-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.drawer-close:hover { background: var(--hover); color: var(--ink); }
.drawer-note {
  font-size: 13px; color: var(--ink-2);
  padding: 12px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  line-height: 1.6;
}
.drawer-note:empty { display: none; }
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.drawer-body .row { padding-inline: 20px; grid-template-columns: minmax(0, 1fr) auto; }
/* 2026-09-24 階段 6：三欄改四欄（id＋已結算＋預估＋年化），420px 抽屜內縮欄寬與字級
   避免溢出（見 _plans/market_live_spec.md 驗收 4，Playwright 量 getBoundingClientRect）。*/
.drawer-body .row-fr { grid-template-columns: minmax(0, 0.85fr) auto auto auto; column-gap: 6px; }
.drawer-body .row .c-tags { margin-top: 6px; }
.drawer-body .row .c-meta b { font-weight: 600; }
/* fix2（#20，2026-09-24 fresh 驗收第二輪）：原本這裡把 .c-meta-fr 設成
   overflow:visible+nowrap 讓方向說明（如「空方付費 · 做多收」）完整不截斷，但欄寬只有
   95px、文字需要 117px，會溢出到抽屜外造成橫向捲動。改回繼承 .c-meta 預設的
   ellipsis 截斷（完整句子仍在 title／data-copy-attr，桌機 hover 看得到），
   不寫死欄寬，靠截斷保證 scrollWidth ≤ clientWidth。 */
.drawer-body .row-fr .c-num { font-size: 13px; white-space: nowrap; }
.drawer-body .row-fr .c-unit { font-size: 11px; margin-left: 1px; }
.drawer-body .table-body .row:first-child { border-top: 0; }
.drawer-foot {
  border-top: 1px solid var(--rule);
  padding: 12px 20px;
  font-size: 13px; color: var(--ink-2);
  line-height: 1.6;
}
.drawer-foot:empty { display: none; }

/* 抽屜內共用小元件 */
.seg {
  display: flex; gap: 4px;
  padding: 12px 20px 0;
}
.seg-btn {
  appearance: none; cursor: pointer;
  flex: 1; height: 36px;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-md);
  font-size: 13px; color: var(--ink-2);
}
.seg-btn.is-on { background: var(--chip-on-bg); border-color: var(--chip-on-border); color: var(--chip-on-fg); font-weight: 600; }
.seg-panel[hidden] { display: none; }

.dsec { border-top: 1px solid var(--rule); padding: 16px 20px; }
.dsec:first-child { border-top: 0; }
.dsec-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.dsec-body { font-size: 15px; color: var(--ink); }
.state-line {
  font-size: 13px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2); line-height: 1.6;
}
.state-line.warn { background: var(--warn-soft); color: var(--warn); }
.note-line { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.shortage { font-size: 13px; color: var(--warn); padding: 12px 20px; }

.dv { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 4px 0; }
.dv-row { display: contents; }
.dv-label { font-size: 13px; color: var(--ink-2); }
.dv-val { font-size: 15px; text-align: right; }
.dv-head { padding: 16px 20px 4px; }
.dv-sym { font-size: 22px; font-weight: 600; }
.dv-full { font-size: 13px; color: var(--ink-2); }
.dv-actions { padding: 12px 20px 20px; }

.dir-score { font-size: 13px; color: var(--ink-2); }
.tie-note { font-size: 13px; color: var(--warn); }

/* ---------- 手機 ---------- */
@media (max-width: 767px) {
  :root { --head-h: 56px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  .masthead { height: auto; }
  .masthead-inner {
    height: auto;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand theme" "tabs tabs";
    padding: 0 16px 8px;
    gap: 8px;
  }
  .brand { grid-area: brand; height: 48px; align-items: center; flex-wrap: wrap; gap: 0 8px; }
  .brand-name { font-size: 16px; }
  .brand-sub { font-size: 12px; }
  .theme-pick { grid-area: theme; align-self: center; }
  .theme-pick-label { display: none; }
  .theme-select { height: 44px; }
  .tabbar { grid-area: tabs; justify-self: stretch; gap: 4px; background: var(--surface-2); border-radius: var(--r-md); padding: 3px; }
  .tab-btn { flex: 1; height: 36px; padding: 0; border-bottom: 0; border-radius: var(--r-sm); }
  .tab-btn.is-on { background: var(--surface); border: 1px solid var(--rule-2); }

  .page, .site-foot { width: calc(100vw - 32px); }
  .page { padding-top: 20px; gap: 20px; }
  .page-title { font-size: 24px; }
  .page-head { align-items: flex-start; }
  .page-context {
    width: 100%;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    padding-right: 24px;
    -webkit-overflow-scrolling: touch;
    /* 右緣漸隱：提示脈絡帶還能往右捲。用 mask 不用浮動元素，
       維持本檔「不掛 z-index」的層疊策略；漸隱段落 24px 由 padding 讓出，
       沒有溢出時只蓋到留白，不會吃掉最後一顆 chip。 */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), rgba(0, 0, 0, 0) 100%);
  }
  .page-context::-webkit-scrollbar { display: none; }
  .ctx-stat {
    text-align: left; flex: none;
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
    padding: 8px 12px;
  }

  .row { padding-inline: 14px; gap: 4px 10px; }

  #wlTable .row {
    grid-template-columns: minmax(0, 1fr) auto 18px;
    padding-block: 10px;
  }
  #wlTable .row-head { display: none; }
  #wlTable .c-id { grid-column: 1; grid-row: 1 / 3; }
  #wlTable .c-px { grid-column: 2; grid-row: 1; }
  #wlTable .c-chg { grid-column: 2; grid-row: 2; }
  #wlTable .c-fr, #wlTable .c-oi { display: none; }
  #wlTable .c-tags { grid-column: 1 / 3; grid-row: 3; }
  #wlTable .c-tags .tag:nth-of-type(n + 3) { display: none; }
  #wlTable .c-tags .tag.tag-more-m { display: inline-flex; }
  #wlTable .c-act { grid-column: 3; grid-row: 1 / 4; align-self: center; }

  #pinTable .row { grid-template-columns: minmax(0, 1fr) auto; padding-block: 10px; }
  #pinTable .row-head { display: none; }
  #pinTable .c-id { grid-column: 1; grid-row: 1; }
  #pinTable .c-span { grid-column: 1; grid-row: 2; white-space: normal; }
  #pinTable .c-num { grid-column: 2; }
  #pinTable .c-flag { grid-column: 2; grid-row: 2; text-align: right; }

  /* 手機本來就是往下捲的版面，400px 上限只為桌機首屏而設，這裡放開，
     註腳照自己的長度展開，不要變成面板裡的小捲動框。 */
  /* 圖高 320（DESIGN §7 手機圖表固定高），軸刻度字級維持 12px */
  #scatterPanel { --sc-h: 320px; max-height: none; display: block; }
  #scatterPanel .chart-note { overflow: visible; }
  .placeholder { margin-inline: 14px; min-height: 220px; }
  .chart-host { padding-inline: 6px; }
  .chart-legend { padding-inline: 14px; }
  .panel-head, .table-more, .caveat, .disclaimer { padding-inline: 14px; }

  /* 工具列改底部固定列 */
  .tool-dock {
    top: auto; bottom: 0; right: 0; left: 0;
    transform: none;
    flex-direction: row; align-items: stretch;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    gap: 0;
    background: var(--surface);
    border-top: 1px solid var(--rule-2);
  }
  /* 2026-09-25 mobile_clip：四顆（多了倉位計算）橫排時「圖示＋文字＋計數」一顆要
     ~100px，375 寬放不下第四顆。改兩行：上排圖示、下排文字，計數徽章掛在圖示右上角；
     四顆等分（flex-basis 0＋min-width 0），320 寬每顆 80px 仍放得下四字標籤。 */
  .dock-btn {
    flex: 1 1 0; min-width: 0; width: auto; height: 56px;
    flex-direction: column; gap: 2px;
    border: 0; border-radius: 0; background: none;
  }
  .dock-btn.is-on { background: var(--indigo-soft); }
  .dock-label {
    position: static; opacity: 1; background: none; color: inherit; padding: 0;
    font-size: 12px; line-height: 1.2;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .dock-badge {
    position: absolute; top: 4px; right: auto; left: calc(50% + 8px);
    border: 0; min-width: 18px; height: 18px;
    font-size: 12px;
  }

  /* 抽屜改底部面板 */
  .drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; height: 88vh;
    border-left: 0;
    border-top: 1px solid var(--rule-2);
    border-radius: 12px 12px 0 0;
    transform: translateY(100%);
  }
  .drawer-root.is-open .drawer { transform: translateY(0); }
  .drawer-grip {
    display: block;
    width: 40px; height: 4px;
    background: var(--rule-2);
    border-radius: 999px;
    margin: 8px auto 0;
    flex: none;
  }
  .drawer-head { padding: 8px 8px 12px 16px; }
  .drawer-note, .drawer-foot, .dsec, .seg, .dv-head, .dv-actions, .shortage { padding-inline: 16px; }
  .drawer-body .row { padding-inline: 16px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .page, .site-foot { width: calc(100vw - 120px); }
  .row { gap: 8px; }
  #wlTable .row { grid-template-columns: minmax(0, 1.1fr) 92px 84px 104px 104px minmax(0, 1fr) 22px; }
  #wlTable .c-tags .tag:nth-of-type(n + 3) { display: none; }
  #wlTable .c-tags .tag.tag-more-m { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}

/* 倉位計算器抽屜：手機單欄（2026-09-24） */
@media (max-width: 767px) {
  .calc { padding: 10px 14px 8px; }
  .calc-grid { grid-template-columns: 1fr; }
}