/* ══════════════════════════════════════════════════════════════
   台股盤後通 — stock.css（個股頁 stock/{code}/）
   v2 per-stock SEO 頁專屬視覺。沿用 style.css Design Token 與工具頁專業財經調性、
   tps-* 前綴、紅漲綠跌（.up/.down/.flat 由 style.css 提供）。Mobile First。
   載入順序：/common/css/ff-bootstrap.css → ../../style.css（token＋卡片骨架）
            → ../../subpage.css（麵包屑＋內鏈卡）→ 本檔（個股頁增補）。
   個股頁沿用 .tps-sub 容器寬度與 .tps-card 卡片骨架；本檔僅補個股頁特有元件。
   ══════════════════════════════════════════════════════════════ */

/* 個股頁容器：沿用 .tps-sub 寬度（subpage.css），卡片間距收斂 */
.tps-stock .tps-card { margin-bottom: var(--tps-sp-4); }

/* 交易警示色 token（v3 #31 第二段）：style.css 僅有紅漲 (--tps-c-up) 綠跌 (--tps-c-down)，無語意化
   warning；處置、注意、停牌屬「注意」而非「漲跌」，故用獨立琥珀色、與漲跌色分離避免誤讀。 */
.tps-stock { --tps-c-warn: #e0a23a; }

/* ── 頁首（代號＋簡稱 H1＋全名＋市場/產業標籤） ── */
.tps-stock__head { margin: var(--tps-sp-2) 0 var(--tps-sp-3); }
.tps-stock__title {
  display: flex;
  align-items: baseline;
  gap: var(--tps-sp-3);
  flex-wrap: wrap;
}
.tps-stock__code {
  font-family: var(--tps-ff-num);
  font-size: var(--tps-fs-xl);
  font-weight: 800;
  color: var(--tps-c-primary);
}
.tps-stock__name {
  font-size: var(--tps-fs-2xl);
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.tps-stock__fullname {
  font-size: var(--tps-fs-sm);
  color: var(--tps-c-text-secondary);
  margin: var(--tps-sp-2) 0 0;
}
.tps-stock__tags {
  display: flex;
  gap: var(--tps-sp-2);
  flex-wrap: wrap;
  margin-top: var(--tps-sp-2);
}
.tps-stock__market,
.tps-stock__industry {
  font-size: var(--tps-fs-xs);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.tps-stock__market { color: var(--tps-c-text-secondary); background: var(--tps-c-surface); }
.tps-stock__industry { color: var(--tps-c-primary); background: var(--tps-c-primary-soft); }

/* ── 公司檔案定義列表 ── */
.tps-deflist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}
.tps-deflist__row {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: var(--tps-sp-3);
  padding: var(--tps-sp-2) 0;
  border-bottom: 1px solid var(--tps-c-border);
}
.tps-deflist__row:last-child { border-bottom: none; }
.tps-deflist dt { color: var(--tps-c-text-muted); font-size: var(--tps-fs-sm); }
.tps-deflist dd { margin: 0; color: var(--tps-c-text); font-size: var(--tps-fs-sm); word-break: break-word; }

.tps-stock__contacts {
  display: flex;
  gap: var(--tps-sp-3);
  flex-wrap: wrap;
  margin-top: var(--tps-sp-3);
  padding-top: var(--tps-sp-3);
  border-top: 1px solid var(--tps-c-border);
}
.tps-stock__contact {
  font-size: var(--tps-fs-sm);
  color: var(--tps-c-primary);
  text-decoration: none;
}
.tps-stock__contact:hover { text-decoration: underline; }

/* ── 行情頭（收盤＋漲跌） ── */
.tps-quote__chg { font-family: var(--tps-ff-num); font-weight: 700; font-size: var(--tps-fs-lg); }
.tps-stock__period {
  font-size: var(--tps-fs-sm);
  color: var(--tps-c-text-secondary);
  margin: 0 0 var(--tps-sp-3);
}
.tps-stock__note {
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text-muted);
  margin: var(--tps-sp-3) 0 0;
  line-height: 1.5;
}
.tps-stock__lead { margin: 0 0 var(--tps-sp-3); color: var(--tps-c-text-secondary); font-size: var(--tps-fs-sm); }

/* 缺漏降級提示（區塊無資料時） */
.tps-empty-note {
  margin: 0;
  padding: var(--tps-sp-3) var(--tps-sp-4);
  background: var(--tps-c-surface);
  border-radius: var(--tps-r-sm);
  color: var(--tps-c-text-muted);
  font-size: var(--tps-fs-sm);
}

/* ── 內鏈清單（指標解讀、同產業個股） ── */
.tps-linklist { list-style: none; margin: 0; padding: 0; }
.tps-linklist li { padding: var(--tps-sp-2) 0; border-bottom: 1px solid var(--tps-c-border); }
.tps-linklist li:last-child { border-bottom: none; }
.tps-linklist a { color: var(--tps-c-primary); text-decoration: none; font-size: var(--tps-fs-sm); }
.tps-linklist a:hover { text-decoration: underline; }
.tps-linklist .tps-num { color: var(--tps-c-text-secondary); margin-right: var(--tps-sp-1); }
.tps-linklist--cols { display: grid; grid-template-columns: 1fr; gap: 0; }

/* 回工具頁（明確按鈕：原為極淡灰文字連結、夜底近乎看不到 → 改外框按鈕、亮字高對比） */
.tps-stock__back { margin: var(--tps-sp-6) 0 0; }
.tps-stock__back a {
  display: inline-flex;
  align-items: center;
  gap: var(--tps-sp-2);
  padding: var(--tps-sp-3) var(--tps-sp-5);
  font-size: var(--tps-fs-base);
  font-weight: 700;
  color: var(--tps-c-text);
  background: var(--tps-c-surface);
  border: 1px solid var(--tps-c-border);
  border-radius: var(--tps-r-sm);
  text-decoration: none;
  transition: color var(--tps-dur) var(--tps-ease), border-color var(--tps-dur) var(--tps-ease);
}
.tps-stock__back a:hover { color: var(--tps-c-primary); border-color: var(--tps-c-primary); }

/* ══════════════════════════════════════════════════════════════
   v3 #31 第二段 — hub 新區塊（籌碼面、交易警示、成交月年、最新動態 timeline）
   沿用 .tps-card 骨架、.tps-quote__grid + .tps-metric 數值格、Design Token、紅漲綠跌。
   ══════════════════════════════════════════════════════════════ */

/* 卡片內子區（籌碼面多子維度、成交月年）：子標題＋與上一子區的分隔 */
.tps-chip__sub { margin-top: var(--tps-sp-4); }
.tps-chip__sub:first-of-type { margin-top: var(--tps-sp-3); }
.tps-chip__subtitle {
  font-size: var(--tps-fs-sm);
  font-weight: 700;
  color: var(--tps-c-text-secondary);
  margin: 0 0 var(--tps-sp-3);
}
.tps-chip__note {
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text-muted);
  margin: var(--tps-sp-2) 0 0;
  line-height: 1.5;
}

/* 數值格次要說明（年最高、最低的發生日） */
.tps-metric__sub {
  display: block;
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text-muted);
  font-weight: 400;
  margin-top: 2px;
}

/* 大股東名稱標籤雲 */
.tps-taglist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tps-sp-2);
}
.tps-taglist li {
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text);
  background: var(--tps-c-surface);
  border: 1px solid var(--tps-c-border);
  border-radius: var(--tps-r-sm);
  padding: 3px 10px;
}

/* 事件列（內部人轉讓申報） */
.tps-eventlist { list-style: none; margin: 0; padding: 0; }
.tps-eventlist li {
  padding: var(--tps-sp-2) 0;
  border-bottom: 1px solid var(--tps-c-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--tps-sp-1) var(--tps-sp-3);
  align-items: baseline;
}
.tps-eventlist li:last-child { border-bottom: none; }
.tps-eventlist__main { font-size: var(--tps-fs-sm); color: var(--tps-c-text); }
.tps-eventlist__meta { font-size: var(--tps-fs-xs); color: var(--tps-c-text-muted); }

/* 交易警示旗標（除權息＝info 中性、處置、注意、停牌＝warn） */
.tps-flaglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tps-sp-2); }
.tps-flag {
  display: flex;
  gap: var(--tps-sp-3);
  align-items: flex-start;
  padding: var(--tps-sp-3);
  border-radius: var(--tps-r-sm);
  border: 1px solid var(--tps-c-border);
  background: var(--tps-c-surface);
}
.tps-flag__tag {
  flex: 0 0 auto;
  font-size: var(--tps-fs-xs);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.tps-flag__body { font-size: var(--tps-fs-sm); color: var(--tps-c-text); line-height: 1.5; }
.tps-flag--info .tps-flag__tag { color: var(--tps-c-primary); background: var(--tps-c-primary-soft); }
/* 警示色：用琥珀色（caution），刻意「不」用 --tps-c-up(紅漲)、--tps-c-down(綠跌)，避免與紅漲綠跌語意混淆。 */
.tps-flag--warn { border-color: color-mix(in srgb, var(--tps-c-warn) 45%, var(--tps-c-border)); }
.tps-flag--warn .tps-flag__tag { color: #1a1206; background: var(--tps-c-warn); }

/* 最新動態 timeline */
.tps-tl { list-style: none; margin: 0; padding: 0; }
.tps-tl__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tps-sp-1) var(--tps-sp-3);
  align-items: baseline;
  padding: var(--tps-sp-2) 0;
  border-bottom: 1px solid var(--tps-c-border);
}
.tps-tl__item:last-child { border-bottom: none; }
.tps-tl__date { font-size: var(--tps-fs-xs); color: var(--tps-c-text-muted); flex: 0 0 auto; }
.tps-tl__tag {
  flex: 0 0 auto;
  font-size: var(--tps-fs-xs);
  font-weight: 700;
  color: var(--tps-c-primary);
  background: var(--tps-c-primary-soft);
  border-radius: 999px;
  padding: 1px 8px;
}
.tps-tl__body { font-size: var(--tps-fs-sm); color: var(--tps-c-text); }

/* ══════════════════════════════════════════════════════════════
   v3 #31 第三段 — 歷史 spoke 頁（stock/{code}/{revenue|financials|dividends}/）
   沿用 hub .tps-card 骨架與 style.css 的 .tps-table；spoke 為純靜態年表（不掛 JS 排序）。
   ══════════════════════════════════════════════════════════════ */

/* hub → 3 spoke 完整歷史內鏈（叢集樞紐）：每項標題＋描述＋累積期數副標 */
.tps-histlinks li { padding: var(--tps-sp-3) 0; }
.tps-histlink__title { display: block; color: var(--tps-c-primary); font-weight: 700; font-size: var(--tps-fs-base); }
.tps-histlink__desc { display: block; color: var(--tps-c-text-secondary); font-size: var(--tps-fs-sm); margin-top: 2px; }
.tps-histlink__meta { display: block; color: var(--tps-c-text-muted); font-size: var(--tps-fs-xs); margin-top: 2px; }

/* [暫時 hotfix] 隱藏整個「完整歷史資料」區塊：revenue、financials、dividends 三個 spoke 子頁尚未部署
   （spoke 部署 0、累積中），hub 連結點擊會導向 404（Azure 預設 404）。
   待 spoke 子頁實際上線後移除本規則、恢復 hub → spoke 內鏈樞紐角色。 */
.tps-stock section[aria-labelledby="t-hist"] { display: none; }

/* spoke 誠實累積標註橫幅：與 hub 資料橫幅同調性、單行說明（資料淺＝正常、不假裝有十年） */
.tps-databar--spoke {
  display: block;
  margin: 0 0 var(--tps-sp-4);
}
.tps-databar--spoke .tps-databar__note { font-size: var(--tps-fs-sm); line-height: 1.5; }

/* 歷史年表（靜態）：style.css 的 .tps-table thead th 預設 cursor:pointer（暗示可排序、給工具頁排行用）；
   spoke 年表為 build-time 靜態渲染、無 JS 排序，故此 modifier 還原成不可點、移除排序符位。 */
.tps-table--history thead th { cursor: default; user-select: text; }
.tps-table--history thead th[aria-sort]::after { content: none; }
/* 年增率欄趨勢條與數值同列：數值右對齊、條接在數字後（窄欄不換行） */
.tps-table--history td .tps-trend { margin-left: var(--tps-sp-2); }

/* 純 CSS 趨勢條（零圖依賴）：視覺化年增率方向與幅度；中性、非投資建議。 */
.tps-trend {
  display: inline-block;
  vertical-align: middle;
  width: 44px;
  height: 6px;
  border-radius: 999px;
  background: var(--tps-c-surface);
  overflow: hidden;
}
.tps-trend__fill { display: block; height: 100%; border-radius: 999px; }
.tps-trend--up .tps-trend__fill { background: var(--tps-c-up); }
.tps-trend--down .tps-trend__fill { background: var(--tps-c-down); }
.tps-trend--flat .tps-trend__fill { background: var(--tps-c-text-muted); }

/* ══════════════════════════════════════════════════════════════
   v3 #31 第四段 — ETF 獨立頁（etf/{code}/）
   沿用 hub .tps-card 骨架、.tps-deflist、.tps-quote__grid；ETF 特有：類型標籤、風險提示、缺口佔位卡。
   ══════════════════════════════════════════════════════════════ */

/* ETF 類型標籤（識別頭，沿用 .tps-stock__industry 形狀；風險型標紅） */
.tps-etf__type {
  font-size: var(--tps-fs-xs);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
  color: var(--tps-c-primary);
  background: var(--tps-c-primary-soft);
}
.tps-etf__type--risk { color: #1a1206; background: var(--tps-c-warn); }

/* 槓桿/反向風險提示卡（琥珀框、醒目但不喧賓奪主） */
.tps-etf__risk {
  border-color: color-mix(in srgb, var(--tps-c-warn) 50%, var(--tps-c-border));
  background: color-mix(in srgb, var(--tps-c-warn) 8%, var(--tps-c-surface));
}
.tps-etf__risk-title {
  font-size: var(--tps-fs-base);
  font-weight: 700;
  color: var(--tps-c-warn);
  margin: 0 0 var(--tps-sp-2);
}
.tps-etf__risk p { margin: 0; font-size: var(--tps-fs-sm); color: var(--tps-c-text); line-height: 1.6; }

/* 缺口維度誠實佔位卡（NAV/折溢價/持股/費用率/配息＝資料準備中、不放假資料） */
.tps-pending__list { list-style: none; margin: var(--tps-sp-2) 0 0; padding: 0; }
.tps-pending__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tps-sp-1) var(--tps-sp-3);
  padding: var(--tps-sp-3) 0;
  border-bottom: 1px solid var(--tps-c-border);
}
.tps-pending__item:last-child { border-bottom: none; }
.tps-pending__name { font-size: var(--tps-fs-sm); font-weight: 700; color: var(--tps-c-text); }
.tps-pending__desc { font-size: var(--tps-fs-xs); color: var(--tps-c-text-secondary); flex: 1 1 auto; }
.tps-pending__tag {
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text-muted);
  background: var(--tps-c-surface);
  border: 1px dashed var(--tps-c-border);
  border-radius: 999px;
  padding: 1px 10px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   v3 #31 第五段 — 公布情報流頁（disclosures/、disclosures/{yyyy-mm}/）
   全市場「最新公布」feed；事件依日期分段、每筆內鏈回個股 hub。沿用 .tps-card 骨架。
   ══════════════════════════════════════════════════════════════ */

.tps-disc { padding-top: var(--tps-sp-2); }
.tps-disc__day { margin-bottom: var(--tps-sp-5); }
.tps-disc__day:last-child { margin-bottom: 0; }
.tps-disc__date {
  font-family: var(--tps-ff-num);
  font-size: var(--tps-fs-base);
  font-weight: 800;
  color: var(--tps-c-primary);
  margin: 0 0 var(--tps-sp-3);
  padding-bottom: var(--tps-sp-2);
  border-bottom: 2px solid var(--tps-c-primary-soft);
}
.tps-disc__list { list-style: none; margin: 0; padding: 0; }
.tps-disc__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tps-sp-1) var(--tps-sp-3);
  padding: var(--tps-sp-3) 0;
  border-bottom: 1px solid var(--tps-c-border);
}
.tps-disc__item:last-child { border-bottom: none; }
.tps-disc__tag {
  flex: 0 0 auto;
  font-size: var(--tps-fs-xs);
  font-weight: 700;
  color: var(--tps-c-primary);
  background: var(--tps-c-primary-soft);
  border-radius: 999px;
  padding: 1px 9px;
}
/* 警示型事件（處置/注意/裁罰）：旗標用琥珀，與漲跌色分離 */
.tps-disc__item--warn .tps-disc__tag { color: #1a1206; background: var(--tps-c-warn); }
.tps-disc__stock { font-size: var(--tps-fs-sm); font-weight: 700; color: var(--tps-c-text); text-decoration: none; }
a.tps-disc__stock:hover { color: var(--tps-c-primary); text-decoration: underline; }
.tps-disc__stock .tps-num { color: var(--tps-c-text-secondary); margin-right: var(--tps-sp-1); font-weight: 400; }
.tps-disc__market {
  flex: 0 0 auto;
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text-muted);
  border: 1px solid var(--tps-c-border);
  border-radius: 999px;
  padding: 0 7px;
}
.tps-disc__summary { font-size: var(--tps-fs-sm); color: var(--tps-c-text-secondary); flex: 1 1 14em; }

/* ── 響應式：平板以上 ── */
@media (min-width: 600px) {
  .tps-deflist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tps-sp-5); }
  .tps-deflist__row:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .tps-linklist--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tps-sp-5); }
  .tps-linklist--cols li { border-bottom: 1px solid var(--tps-c-border); }
}
@media (min-width: 768px) {
  .tps-linklist--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════
   財神開示 widget（cai-shen-kai-shi，csks-*）— TASK-177 #13
   事實 SSOT：docs/output/sites/stock-god-168/demo/cai-shen-kai-shi/final/index.html（總監定稿）。
   ─ 沿用 168 既有 Semantic Token（--tps-*，style.css SSOT），App 內求一致。
   ─ widget 專屬 Component 層（--csks-*）承載「傳統廟宇籤詩風」個性（App 間求個性）。
   ─ 訊號燈三級語意色刻意「不」用紅漲綠跌（--tps-c-up/down），避免投資評等聯想（DOC-SA-004「三級燈號」段）。
   ─ HTML 由 stock-page-template.mjs blockCaishen 建置時烤入（條件顯示：有 174 資料才出）；互動由 cluster.js 承載。
   版位層序（DOC-UX-001 IA-A002）：①抽籤敘事 ②訊號燈摘要（前置）③財神開示 ④歷史區間
   ⑤資料時間來源 ⑥免責（緊鄰開示、單一警語）⑦廣告 ⑧付費入口 ⑨收合。
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* widget 專屬 Component 層（v1 廟宇籤詩風個性；引用方向：Component(csks-*) → 自身 Primitive / 168 Semantic）*/
  --csks-cinnabar-900: #5e1410;          /* 深朱（卷軸軸頭暗部、廟柱）*/
  --csks-cinnabar-700: #8c1d18;          /* 廟宇朱紅（主朱、籤筒筒身）*/
  --csks-cinnabar-600: #a8261f;          /* 朱紅亮部 */
  --csks-cinnabar-500: #c0392b;          /* 印泥朱（落款印、強調）*/
  --csks-gold-500: #d4a23a;              /* 廟宇金漆（= 168 primary，血緣一致）*/
  --csks-gold-400: #e8c168;              /* 亮金（描邊高光、籤頭）*/
  --csks-gold-300: #f4dca0;              /* 淺金（金線細節）*/
  --csks-paper-100: #f3e7cf;             /* 宣紙底（卷面正常態，淺）*/
  --csks-paper-200: #e7d4b0;             /* 宣紙陰影、籤格線 */
  --csks-paper-ink: #3a2a18;             /* 卷面墨字（深褐，宣紙上正文）*/
  --csks-paper-ink-soft: #6b5638;        /* 卷面次要墨字 */

  /* 訊號燈三級語意（避紅買綠賣；金=正向穩健、藍灰=中性持平、琥珀=留意需注意）*/
  --csks-signal-strong: var(--csks-gold-500);
  --csks-signal-strong-soft: rgba(212, 162, 58, 0.16);
  --csks-signal-neutral: #8294b8;
  --csks-signal-neutral-soft: rgba(130, 148, 184, 0.16);
  --csks-signal-watch: var(--csks-c-watch, #e0a23a);
  --csks-signal-watch-soft: rgba(224, 162, 58, 0.18);
  --csks-signal-na: #6b7ba0;

  /* Component 語意 */
  --csks-scroll-bg: var(--csks-paper-100);
  --csks-scroll-bg-2: #f7eed9;
  --csks-scroll-edge: var(--csks-cinnabar-700);
  --csks-scroll-ink: var(--csks-paper-ink);
  --csks-rod: var(--csks-cinnabar-700);
  --csks-rod-cap: var(--csks-gold-400);
  --csks-seal: var(--csks-cinnabar-500);
}

/* 財神開示整體掛載區（IA-A001 入口區，置於個股頁卡片流中）*/
.csks {
  --csks-stagger: 0ms;
  margin-bottom: var(--tps-sp-4);
}

/* ── ① 入口：籤筒按鈕（WIRE-A001 按鈕態）── */
.csks-trigger {
  display: flex;
  align-items: center;
  gap: var(--tps-sp-4);
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  padding: var(--tps-sp-4) var(--tps-sp-5);
  border-radius: var(--tps-r);
  color: var(--tps-c-text);
  background:
    radial-gradient(120% 140% at 12% 50%, rgba(232, 193, 104, 0.12), transparent 45%),
    linear-gradient(135deg, var(--csks-cinnabar-700) 0%, var(--csks-cinnabar-900) 100%);
  border: 1px solid var(--csks-gold-500);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(244, 220, 160, 0.18);
  transition: transform var(--tps-dur) var(--tps-ease),
              box-shadow var(--tps-dur) var(--tps-ease),
              border-color var(--tps-dur) var(--tps-ease);
}
.csks-trigger:hover {
  transform: translateY(-1px);
  border-color: var(--csks-gold-400);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(244, 220, 160, 0.28);
}
.csks-trigger:active { transform: translateY(0); }
.csks-trigger:focus-visible { outline: 3px solid var(--csks-gold-300); outline-offset: 3px; }

/* 籤筒 icon（AD 素材 <img> + onerror 回退 inline-SVG、骨架屏免回填）*/
.csks-trigger__lots {
  position: relative;
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  color: var(--csks-gold-400);
}
.csks-trigger__lots svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
.csks-trigger__lots .csks-asset {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}

/* ── 骨架屏免回填機制：AD 圖檔素材槽位 ── */
.csks-asset[data-skeleton] {
  background: linear-gradient(90deg, var(--csks-paper-200) 25%, #f0e2c6 37%, var(--csks-paper-200) 63%);
  background-size: 400% 100%;
  animation: csks-shimmer 1.4s ease infinite;
}
.csks-asset.is-loaded[data-skeleton] { background: none; animation: none; }
.csks-asset.is-error { display: none !important; }
.csks-trigger__text { flex: 1 1 auto; min-width: 0; }
.csks-trigger__title {
  display: flex; align-items: center; gap: var(--tps-sp-2);
  font-size: var(--tps-fs-lg); font-weight: 800; letter-spacing: 0.04em;
  color: var(--csks-gold-300);
}
.csks-trigger__title .csks-seal-mark {
  font-size: var(--tps-fs-xs); font-weight: 700;
  color: var(--csks-cinnabar-900); background: var(--csks-gold-400);
  border-radius: var(--tps-r-sm); padding: 1px 7px; letter-spacing: 0.1em;
}
.csks-trigger__sub {
  font-size: var(--tps-fs-sm); color: rgba(243, 231, 207, 0.78);
  margin-top: 3px;
}
.csks-trigger__cue {
  flex: 0 0 auto; align-self: center;
  font-size: var(--tps-fs-xs); color: var(--csks-gold-300);
  border: 1px solid rgba(212, 162, 58, 0.5); border-radius: 999px;
  padding: 3px 10px; white-space: nowrap;
}
.csks[data-open="true"] .csks-trigger { border-radius: var(--tps-r) var(--tps-r) 0 0; }
.csks[data-open="true"] .csks-trigger__cue::before { content: "收合 ▲"; }
.csks[data-open="false"] .csks-trigger__cue::before { content: "抽一籤 ▾"; }

/* ── 卷軸外層（WIRE-A002）：展開／收合容器 ── */
.csks-scrollwrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--tps-dur) var(--tps-ease), opacity var(--tps-dur) var(--tps-ease);
}
.csks[data-open="true"] .csks-scrollwrap {
  max-height: 4000px;
  opacity: 1;
}

/* 卷軸本體：朱紅軸框 + 上下木軸 + 宣紙卷面 */
.csks-scroll {
  position: relative;
  background:
    linear-gradient(180deg, var(--csks-scroll-bg-2) 0%, var(--csks-scroll-bg) 22%, var(--csks-scroll-bg) 100%);
  color: var(--csks-scroll-ink);
  border: 2px solid var(--csks-scroll-edge);
  border-top: none; border-bottom: none;
  background-blend-mode: multiply;
}
.csks-rod {
  height: 18px;
  background: linear-gradient(180deg, var(--csks-cinnabar-600), var(--csks-cinnabar-900));
  border: 2px solid var(--csks-gold-500);
  position: relative;
}
.csks-rod--top { border-radius: var(--tps-r) var(--tps-r) 4px 4px; border-bottom: none; }
.csks-rod--bottom { border-radius: 4px 4px var(--tps-r) var(--tps-r); border-top: none; }
.csks-rod::before, .csks-rod::after {
  content: ""; position: absolute; top: 50%; width: 14px; height: 26px;
  transform: translateY(-50%);
  background: radial-gradient(circle at 40% 35%, var(--csks-gold-300), var(--csks-gold-500) 70%, var(--csks-cinnabar-900));
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.csks-rod::before { left: -9px; }
.csks-rod::after { right: -9px; }

/* 卷面內距 */
.csks-scroll__inner { padding: var(--tps-sp-5) var(--tps-sp-5) var(--tps-sp-4); }
@media (min-width: 768px) { .csks-scroll__inner { padding: var(--tps-sp-6) var(--tps-sp-7); } }

/* 卷面內分隔線（金線細紋）*/
.csks-rule {
  height: 0; border: none;
  border-top: 1px solid var(--csks-paper-200);
  margin: var(--tps-sp-5) 0;
  position: relative;
}
.csks-rule::after {
  content: "\2756"; position: absolute; top: -0.7em; left: 50%; transform: translateX(-50%);
  background: var(--csks-scroll-bg); padding: 0 var(--tps-sp-3);
  color: var(--csks-gold-500); font-size: var(--tps-fs-sm);
}

/* 卷面區段共用標題（朱紅小印 + 標籤）*/
.csks-sec__label {
  display: inline-flex; align-items: center; gap: var(--tps-sp-2);
  font-size: var(--tps-fs-sm); font-weight: 800; letter-spacing: 0.06em;
  color: var(--csks-cinnabar-700);
  margin: 0 0 var(--tps-sp-3);
}
.csks-sec__label::before {
  content: ""; width: 14px; height: 14px; border-radius: 3px;
  background: var(--csks-seal);
  box-shadow: inset 0 0 0 1.5px var(--csks-gold-300);
}

/* ── 卷首財神主視覺（ScrollHeader、AD 素材 caishen-hero）── */
.csks-hero {
  position: relative;
  margin: calc(-1 * var(--tps-sp-5)) calc(-1 * var(--tps-sp-5)) var(--tps-sp-5);
  border-radius: 0;
  overflow: hidden;
  line-height: 0;
  background: linear-gradient(180deg, rgba(94,20,16,0.06), transparent);
}
@media (min-width: 768px) {
  .csks-hero { margin: calc(-1 * var(--tps-sp-6)) calc(-1 * var(--tps-sp-7)) var(--tps-sp-6); }
}
.csks-hero__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1600 / 840;
  object-fit: cover; object-position: center 22%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
.csks-hero[data-skeleton] {
  background: linear-gradient(90deg, var(--csks-cinnabar-900) 25%, var(--csks-cinnabar-700) 37%, var(--csks-cinnabar-900) 63%);
  background-size: 400% 100%;
  animation: csks-shimmer 1.4s ease infinite;
  min-height: 120px;
}
.csks-hero.is-loaded[data-skeleton] { background: linear-gradient(180deg, rgba(94,20,16,0.06), transparent); animation: none; }
.csks-hero.is-error { display: none; }

/* ── 卷面疊字：股票名稱＋代號（動態隨個股變；FE 填實際值）── */
.csks-hero__plaque {
  position: absolute;
  top: 0; bottom: 0;
  left: 52%; right: 3.5%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(2px, 0.8vw, 8px);
  padding-bottom: 3%;
  line-height: 1.15;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}
.csks-hero__name {
  writing-mode: horizontal-tb;
  font-weight: 800;
  font-size: clamp(1.25rem, 5.2vw, 2.6rem);
  letter-spacing: 0.06em;
  color: var(--csks-paper-ink);
  text-shadow:
    0 1px 0 rgba(247, 238, 217, 0.9),
    0 0 1px rgba(247, 238, 217, 0.9),
    0 2px 6px rgba(94, 20, 16, 0.18);
  max-width: 100%;
  word-break: keep-all;
  overflow: hidden;
}
.csks-hero__code {
  font-family: var(--tps-ff-num); font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(0.7rem, 2.4vw, 1.05rem);
  letter-spacing: 0.18em;
  color: var(--csks-cinnabar-700);
  background: rgba(247, 238, 217, 0.72);
  border: 1px solid rgba(140, 29, 24, 0.35);
  border-radius: 999px;
  padding: 2px clamp(6px, 1.6vw, 12px);
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(94, 20, 16, 0.18);
}
@media (max-width: 539px) {
  .csks-hero__plaque { left: 48%; right: 4%; padding-bottom: 6%; gap: 4px; }
  .csks-hero__name { font-size: clamp(1.1rem, 6.4vw, 1.7rem); }
  .csks-hero__code { font-size: clamp(0.62rem, 3vw, 0.8rem); letter-spacing: 0.12em; }
}
@media (min-width: 768px) {
  .csks-hero__plaque { left: 50%; right: 4%; }
  .csks-hero__name { font-size: clamp(1.8rem, 4.4vw, 3rem); }
  .csks-hero__code { font-size: clamp(0.85rem, 1.6vw, 1.1rem); }
}

/* ── ① 抽籤敘事開場 ── */
.csks-prologue {
  font-size: var(--tps-fs-lg);
  line-height: 1.8;
  color: var(--csks-paper-ink);
  text-align: center;
  letter-spacing: 0.02em;
}
.csks-prologue__lead {
  display: block; font-size: var(--tps-fs-sm); letter-spacing: 0.16em;
  color: var(--csks-cinnabar-600); margin-bottom: var(--tps-sp-2);
}
.csks-prologue b { color: var(--csks-cinnabar-700); font-weight: 800; }

/* ── ② 財務訊號燈摘要（前置、可快速掃描）── */
.csks-signals {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tps-sp-3);
}
@media (min-width: 560px) { .csks-signals { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .csks-signals { grid-template-columns: repeat(4, 1fr); } }

.csks-signal {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--tps-sp-4);
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid var(--csks-paper-200);
  border-radius: var(--tps-r-sm);
}
.csks-signal__head { display: flex; align-items: center; gap: var(--tps-sp-2); }
.csks-signal__lamp {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
}
.csks-signal__lamp svg { width: 16px; height: 16px; }
.csks-signal__dim { font-size: var(--tps-fs-sm); font-weight: 700; color: var(--csks-paper-ink); }
.csks-signal__label { font-size: var(--tps-fs-sm); color: var(--csks-paper-ink-soft); line-height: 1.5; }

/* 三級語意配色（避紅買綠賣）*/
.csks-signal--strong .csks-signal__lamp { background: var(--csks-signal-strong); color: var(--csks-cinnabar-900); }
.csks-signal--strong { border-color: color-mix(in srgb, var(--csks-signal-strong) 50%, var(--csks-paper-200)); }
.csks-signal--neutral .csks-signal__lamp { background: var(--csks-signal-neutral); }
.csks-signal--watch .csks-signal__lamp { background: var(--csks-signal-watch); color: var(--csks-cinnabar-900); }
.csks-signal--watch { border-color: color-mix(in srgb, var(--csks-signal-watch) 50%, var(--csks-paper-200)); }
.csks-signal--na .csks-signal__lamp { background: var(--csks-signal-na); }
.csks-signal--na { border-style: dashed; }
.csks-signal--na .csks-signal__label { font-style: italic; }

/* ── ③ 財神白話開示（敘事延伸閱讀）── */
.csks-oracle {
  font-size: var(--tps-fs-base);
  line-height: 1.95;
  color: var(--csks-paper-ink);
  letter-spacing: 0.01em;
}
.csks-oracle p { margin: 0 0 var(--tps-sp-3); }
.csks-oracle p:last-child { margin-bottom: 0; }
.csks-oracle__open::first-letter {
  float: left; font-size: 2.6em; line-height: 0.86; font-weight: 800;
  color: var(--csks-cinnabar-700); margin: 4px var(--tps-sp-2) 0 0;
}

/* ── ④ 歷史區間（事實、明標非預測）── */
.csks-range__grid { display: grid; grid-template-columns: 1fr; gap: var(--tps-sp-3); }
@media (min-width: 560px) { .csks-range__grid { grid-template-columns: repeat(2, 1fr); } }
.csks-range__item {
  padding: var(--tps-sp-3) var(--tps-sp-4);
  background: rgba(255,255,255,0.4);
  border: 1px solid var(--csks-paper-200); border-radius: var(--tps-r-sm);
}
.csks-range__label { font-size: var(--tps-fs-xs); color: var(--csks-paper-ink-soft); }
.csks-range__value { font-family: var(--tps-ff-num); font-variant-numeric: tabular-nums;
  font-size: var(--tps-fs-lg); font-weight: 700; color: var(--csks-paper-ink); margin-top: 2px; }
.csks-badge-fact {
  display: inline-block; font-size: var(--tps-fs-xs); font-weight: 700;
  color: var(--csks-cinnabar-700); background: rgba(140, 29, 24, 0.1);
  border: 1px solid rgba(140, 29, 24, 0.3); border-radius: var(--tps-r-sm);
  padding: 1px 8px; margin-left: var(--tps-sp-2); letter-spacing: 0.04em;
}

/* ── ⑤ 資料整理時間與來源 ── */
.csks-meta { display: flex; flex-wrap: wrap; gap: var(--tps-sp-1) var(--tps-sp-4);
  font-size: var(--tps-fs-xs); color: var(--csks-paper-ink-soft); }
.csks-meta a { color: var(--csks-cinnabar-700); }

/* ── 必備免責（單一完整警語、緊鄰開示標題下）── */
.csks-disclaimer {
  font-size: var(--tps-fs-xs); line-height: 1.7; color: var(--csks-paper-ink-soft);
  background: rgba(140, 29, 24, 0.06);
  border-left: 3px solid var(--csks-cinnabar-600);
  border-radius: 0 var(--tps-r-sm) var(--tps-r-sm) 0;
  padding: var(--tps-sp-3) var(--tps-sp-4);
  margin: 0;
}
.csks-disclaimer strong { color: var(--csks-cinnabar-700); }
.csks-disclaimer--lead {
  margin-top: var(--tps-sp-3);
  text-align: left;
}
.csks-disclaimer--lead::before {
  content: "\1FA84"; margin-right: 6px;
}

/* ── ⑦ 廣告位（沿用站台既有廣告載入；此為佔位框）── */
.csks-ad {
  margin-top: var(--tps-sp-5);
  min-height: 90px;
  display: grid; place-items: center;
  border: 1px dashed var(--csks-paper-200);
  border-radius: var(--tps-r-sm);
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0 8px, transparent 8px 16px);
  color: var(--csks-paper-ink-soft); font-size: var(--tps-fs-xs);
}

/* ── ⑧ 付費升級入口佔位（成為信徒會員、財神即時開示）── */
.csks-upsell {
  display: flex; align-items: center; gap: var(--tps-sp-3);
  margin-top: var(--tps-sp-4);
  padding: var(--tps-sp-4) var(--tps-sp-5);
  border-radius: var(--tps-r);
  color: var(--csks-gold-300);
  background: linear-gradient(135deg, var(--csks-cinnabar-700), var(--csks-cinnabar-900));
  border: 1px solid var(--csks-gold-500);
}
.csks-upsell__icon { flex: 0 0 auto; font-size: 1.6rem; }
.csks-upsell__text { flex: 1 1 auto; }
.csks-upsell__title { font-weight: 800; letter-spacing: 0.02em; }
.csks-upsell__sub { font-size: var(--tps-fs-xs); color: rgba(243, 231, 207, 0.78); margin-top: 2px; }
.csks-upsell__cta {
  flex: 0 0 auto; font-family: inherit; cursor: pointer;
  font-size: var(--tps-fs-sm); font-weight: 700;
  color: var(--csks-cinnabar-900); background: var(--csks-gold-400);
  border: none; border-radius: 999px; padding: 8px 16px;
  transition: background var(--tps-dur) var(--tps-ease);
}
.csks-upsell__cta:hover { background: var(--csks-gold-300); }
.csks-upsell__cta:focus-visible { outline: 2px solid var(--csks-gold-300); outline-offset: 2px; }

/* ── ⑨ 收合控制 ── */
.csks-collapse {
  display: block; width: 100%; margin-top: var(--tps-sp-5);
  font-family: inherit; cursor: pointer;
  font-size: var(--tps-fs-sm); font-weight: 700; color: var(--csks-cinnabar-700);
  background: transparent; border: 1px solid var(--csks-paper-200);
  border-radius: var(--tps-r-sm); padding: var(--tps-sp-3);
  transition: background var(--tps-dur) var(--tps-ease);
}
.csks-collapse:hover { background: rgba(140, 29, 24, 0.06); }
.csks-collapse:focus-visible { outline: 2px solid var(--csks-cinnabar-600); outline-offset: 2px; }

/* ════ 四態（DOC-UX-001 WIRE-A003、DOC-SA-004 狀態處理）════ */
.csks__state { display: none; }
.csks[data-state="success"] .csks__state--success,
.csks[data-state="loading"] .csks__state--loading,
.csks[data-state="error"]   .csks__state--error,
.csks[data-state="partial"] .csks__state--success { display: block; }

/* Loading：骨架屏 */
.csks-skel { display: grid; gap: var(--tps-sp-3); }
.csks-skel__line, .csks-skel__lamp, .csks-skel__block {
  background: linear-gradient(90deg, var(--csks-paper-200) 25%, #f0e2c6 37%, var(--csks-paper-200) 63%);
  background-size: 400% 100%;
  animation: csks-shimmer 1.4s ease infinite;
  border-radius: 6px;
}
.csks-skel__line { height: 14px; }
.csks-skel__line--w70 { width: 70%; } .csks-skel__line--w50 { width: 50%; }
.csks-skel__lamps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tps-sp-3); }
@media (min-width: 900px) { .csks-skel__lamps { grid-template-columns: repeat(4, 1fr); } }
.csks-skel__block { height: 64px; }
.csks-skel__hint { text-align: center; font-size: var(--tps-fs-sm); color: var(--csks-cinnabar-600); letter-spacing: 0.08em; }
@keyframes csks-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Error：載入失敗 + 重試 */
.csks-error { text-align: center; padding: var(--tps-sp-5) var(--tps-sp-4); color: var(--csks-paper-ink); }
.csks-error__art { width: 96px; height: 96px; margin: 0 auto var(--tps-sp-3); color: var(--csks-cinnabar-600); }
.csks-error__art svg { width: 100%; height: 100%; }
.csks-error__msg { font-size: var(--tps-fs-base); margin: 0 0 var(--tps-sp-4); }
.csks-retry {
  font-family: inherit; cursor: pointer; font-size: var(--tps-fs-sm); font-weight: 700;
  color: #fff; background: var(--csks-cinnabar-600);
  border: none; border-radius: 999px; padding: 8px 20px;
}
.csks-retry:hover { background: var(--csks-cinnabar-500); }
.csks-retry:focus-visible { outline: 2px solid var(--csks-gold-400); outline-offset: 2px; }

/* prefers-reduced-motion（WCAG、DOC-UI-003 全域處理精神）*/
@media (prefers-reduced-motion: reduce) {
  .csks-asset[data-skeleton],
  .csks-hero[data-skeleton],
  .csks-skel__line, .csks-skel__lamp, .csks-skel__block {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  }
  .csks-trigger, .csks-scrollwrap, .csks-upsell__cta, .csks-collapse {
    transition-duration: 0.01ms !important;
  }
  .csks[data-open="true"] .csks-scrollwrap { transition: none; }
}