/* ── twstock 個股期貨 · 排行頁(市場級)+ 單檔頁(個股級)共用 ──
   兩頁共用這一支;單檔頁的差異用 .sf-stock scope class。
   語意角色變數版(--surface-* / --border-* / --ink),不寫 body.dark-mode 覆寫。 */

#box_main {
  flex: 1;
  min-width: 0;
  min-height: 800px;
  padding-top: var(--space-16);
  padding-left: var(--space-16);
  max-width: 1340px;
}

/* ── Page head ── */
.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}
.titlewrap { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.titlewrap h1 { margin: 0; color: var(--ink); }
.titlewrap .meta { font-size: 12px; color: var(--color-greyMedium); }

/* 麵包屑:行內輕版、無底色(單檔頁才有) */
.crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-8);
  font-size: 12px; color: var(--color-greyMedium); margin-bottom: var(--space-8);
}
.crumb a { color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }
.crumb a:hover { color: var(--link-quiet-hover); }

.toolbar { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.ctrl {
  height: 32px; display: inline-flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-12);
  border: 1px solid var(--border-frame); background: transparent; color: var(--ink);
  border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background var(--motion-fast) ease; position: relative;
}
/* 熱區與視覺分開量:外框控件靠透明 pseudo 撐到 ≥44,不能改 min-height(會把邊框撐大)。
   垂直 8px:28px 的小控件(顯示其餘 / 匯出 CSV)剛好 44。水平只留 2px —— toolbar 的
   橫向間距是 8px,兩邊各外擴 8 會讓相鄰控件的熱區互相蓋住、搶點擊。 */
.ctrl::before { content: ""; position: absolute; inset: -10px -2px; }
.ctrl:hover { background: var(--surface-muted); }
/* 省略號放在內層 span:overflow:hidden 若加在按鈕本身,會把撐熱區的 ::before 一起裁掉
   (量到的可點高度就只剩 32)—— 跟 .segment 是同一個坑。 */
.ctrl.stock { font-weight: 600; max-width: 240px; }
.ctrl.stock .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctrl .caret {
  width: 6px; height: 6px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-left: 2px;
}
.searchwrap { position: relative; display: inline-flex; }
.searchwrap input {
  height: 32px; width: 200px; padding: 0 var(--space-12);
  border: 1px solid var(--border-frame); border-radius: var(--radius-sm);
  background: var(--surface-field); color: var(--ink); font-family: inherit; font-size: 13px;
}
.searchwrap input::placeholder { color: var(--color-greyMedium); }

/* overflow 不能是 hidden:它會把下面那個撐熱區的 pseudo 裁掉,量到的可點高度就只剩 32。
   圓角改由頭尾兩顆自己畫(外框 1px,所以內半徑要減 1)。 */
.segment { display: inline-flex; border: 1px solid var(--border-frame); border-radius: var(--radius-sm); }
.segment button {
  height: 32px; padding: 0 var(--space-12); border: none; background: transparent; color: var(--color-greyMedium);
  font-size: 12px; font-family: inherit; cursor: pointer; border-right: 1px solid var(--border-frame);
  transition: background var(--motion-fast) ease; position: relative; white-space: nowrap;
}
.segment button::before { content: ""; position: absolute; inset: -8px 0; }
.segment button:first-child { border-radius: calc(var(--radius-sm) - 1px) 0 0 calc(var(--radius-sm) - 1px); }
.segment button:last-child { border-right: none; border-radius: 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0; }
.segment button:only-child { border-radius: calc(var(--radius-sm) - 1px); }
.segment button:hover { background: var(--surface-muted); }
.segment button.active { background: var(--surface-control-on); color: var(--ink); font-weight: 600; }
.toolbar .pro_note { font-size: 12px; padding: var(--space-8) 0; color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.toolbar .pro_note:hover { color: var(--link-quiet-hover); }

/* ── Layout grid ── */
.analysis { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-16); align-items: start; }
.col-main { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.col-side { display: flex; flex-direction: column; gap: var(--space-16); position: sticky; top: var(--space-16); }
#box_content { display: flex; flex-direction: column; gap: var(--space-16); }

/* ── Card ── */
.card { background: var(--surface-card); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-16); }
.card-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-12); }
.card-h h6 { margin: 0; color: var(--ink); }
.card-h .right { display: flex; gap: var(--space-8); align-items: center; }
.card-h .meta { font-size: 12px; color: var(--color-greyMedium); display: inline-flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.chart_box { position: relative; }
.chart-note { font-size: 12px; line-height: 1.6; color: var(--color-greyMedium); margin: var(--space-8) 0 0; }
.card-body-note { margin: 0 0 var(--space-12); font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.card-body-note:last-child { margin-bottom: 0; }

/* studio/base.css(與 crypto 共用)用 base token 畫骨架;這裡改成跟著本頁的卡片走 */
.is-wait .skel { background: var(--surface-card); }

.num, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: "Roboto Mono", monospace; }
.mut { color: var(--color-greyMedium); }

/* ── 圖例色塊(序列 → 顏色的 CSS 分身,JS 那份 SERIES 是同一組)── */
.lgd { display: inline-flex; align-items: center; gap: var(--space-4); color: var(--color-greyMedium); }
.lgd .sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.lgd .ln { width: 12px; height: 2px; border-radius: 1px; display: inline-block; }
.sw-vol { background: var(--color-data-2); }
.sw-basis { background: var(--color-greyMedium); }
.ln-fut { background: var(--color-data-1); }
.ln-spot { background: var(--ink); }
.ln-oi { background: var(--color-data-3); }

.has-tip { border-bottom: 1px dotted var(--color-greyLightMedium); cursor: help; }

/* ── 摘要帶 ── */
/* .card 前綴是為了贏過 main.css 的 p:lang(…) { margin: 0 }(0,1,1);少了它下邊距實際是 0 */
.card .band-lead { font-size: 13px; line-height: 1.75; color: var(--ink-2); margin: 0 0 var(--space-16); max-width: 70ch; }
.band-lead b { font-weight: 600; color: var(--ink); }
.band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.band .b { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.band .b + .b { border-left: 1px solid var(--border-hairline); padding-left: var(--space-24); }
.band .lab { font-size: 12px; color: var(--color-greyMedium); }
.band .val {
  font-family: "Roboto Mono", monospace; font-variant-numeric: tabular-nums;
  font-size: 32px; font-weight: 500; line-height: 1.05; color: var(--ink);
  overflow-wrap: anywhere;
}
/* 標的名是漢字,不進 mono */
.band .val.cjk { font-family: inherit; font-size: 28px; font-weight: 600; }
.band .val .unit {
  font-size: 13px; font-weight: 400; color: var(--color-greyMedium);
  margin-left: var(--space-4); font-family: inherit;
}
.band .sub { font-size: 12px; color: var(--color-greyMedium); font-variant-numeric: tabular-nums; }
.band-foot {
  display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; margin-top: var(--space-16);
  padding-top: var(--space-12); border-top: 1px solid var(--border-hairline);
  font-size: 12px; color: var(--color-greyMedium);
}
.band-foot a { color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }
.band-foot a:hover { color: var(--link-quiet-hover); }

/* ── 判讀(tag 一律中性:這兩頁不出現 green / red)── */
.read { display: flex; flex-direction: column; gap: var(--space-8); }
.read .line {
  border: 1px solid var(--border-frame); border-radius: var(--radius-sm); padding: var(--space-8) var(--space-12);
  font-size: 13px; line-height: 1.6; display: flex; gap: var(--space-8); align-items: flex-start; color: var(--ink-2);
}
.read .tag {
  flex: none; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; line-height: 1;
  border-radius: var(--radius-micro); margin-top: 3px;
}
.tag-neu { background: var(--tag-neutral-bg); color: var(--tag-neutral-text); }

/* ── 側欄:安靜 key–value 列 ── */
.kv { display: flex; flex-direction: column; }
.kv .r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); padding: var(--space-8) 0; font-size: 13px; }
.kv .r + .r { border-top: 1px solid var(--border-hairline); }
/* 長區間時「結算日」的值會列出十幾個日期並換行;key 不能跟著被擠成一字一行 */
.kv .k { color: var(--color-greyMedium); font-size: 12px; white-space: nowrap; }
.kv .v { font-family: "Roboto Mono", monospace; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.kv .v .unit { font-size: 12px; color: var(--color-greyMedium); margin-left: 3px; font-family: inherit; }

.linklist { display: flex; flex-direction: column; }
.linklist a { padding: var(--space-8) 0; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.linklist a + a { border-top: 1px solid var(--border-hairline); }
.linklist a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── 表格(排行表 + 日資料表共用)── */
.tbl-wrap { overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 520px; }
.is-wait .tbl-wrap { min-height: 360px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.tbl thead th {
  position: sticky; top: 0; background: var(--surface-card); color: var(--color-greyMedium);
  font-weight: 600; font-size: 12px; padding: var(--space-8); border-bottom: 1px solid var(--border-hairline);
  text-align: right; white-space: nowrap;
}
table.tbl thead th.lft { text-align: left; }
table.tbl tbody td { padding: 7px var(--space-8); text-align: right; border-bottom: 1px solid var(--border-hairline); font-family: "Roboto Mono", monospace; color: var(--ink); white-space: nowrap; }
table.tbl tbody td.lft { text-align: left; font-family: inherit; color: var(--ink-2); }
table.tbl tbody tr:hover td { background: var(--surface-row-hover); }
/* 表尾那列安靜列:被排行漏掉的契約(上游暫時失敗或近期無成交都在內)。
   它是一句話,要能換行 —— 資料欄的 nowrap 會把它撐成一條長列。 */
table.tbl tbody tr.dim td { color: var(--color-greyMedium); white-space: normal; }

.rowlink { color: var(--ink); text-decoration: none; font-weight: 600; }
.rowlink .nm { font-family: "Plus Jakarta Sans", "Noto Sans TC", sans-serif; }
.rowlink:hover { text-decoration: underline; text-underline-offset: 3px; }

.tagm {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-micro);
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  font-family: "Plus Jakarta Sans", "Noto Sans TC", sans-serif;
  background: var(--tag-neutral-bg); color: var(--tag-neutral-text);
}
.tagm.smonly { display: none; }

.tbl-foot {
  margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--border-hairline);
  font-size: 12px; color: var(--color-greyMedium);
  display: flex; gap: var(--space-12); flex-wrap: wrap; align-items: center;
}
/* 窄寬時 .tbl-foot 會換行,後面的 span 在繪製順序上壓在鈕的熱區 pseudo 上,
   elementFromPoint 量到的可點高度就掉回視覺高。抬一層讓熱區真的拿得到點擊。 */
.tbl-foot .ctrl { z-index: 1; }

/* 跨規格搜尋提示裡的切換鈕:看起來是安靜連結,但必須是真 button(鍵盤 + 熱區) */
.tbl-foot .linkish {
  border: none; background: transparent; padding: 0; font: inherit; cursor: pointer;
  color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px;
  position: relative;
}
.tbl-foot .linkish::before { content: ""; position: absolute; inset: -14px -4px; }
.tbl-foot .linkish:hover { color: var(--link-quiet-hover); }
.tbl-foot .linkish + .linkish { margin-left: var(--space-8); }

/* ── SEO 說明(.seo-explain 本體在 main.css)── */
.seo-explain p + p { margin-top: var(--space-8); }
.seo-explain a { color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }
.seo-explain a:hover { color: var(--link-quiet-hover); }
.seo-explain b { color: var(--ink-2); font-weight: 600; }

/* ── States ── */
.loader_wrap { display: flex; flex-direction: column; gap: var(--space-12); justify-content: center; align-items: center; padding: var(--space-48) 0; color: var(--color-greyMedium); font-size: 14px; text-align: center; }
.loader_wrap .sub { font-size: 12px; max-width: 46ch; line-height: 1.7; }
.loader_wrap a { color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }

/* ── RWD ── */
@media (max-width: 1300px) {
  .analysis { grid-template-columns: 1fr; }
  .col-side { position: static; }
  #box_main { padding-left: 0; }
  /* RWD 側欄鈕已經寫出頁名 —— 收掉頁標題,保留 meta 那行 */
  .titlewrap h1 { display: none; }
  /* 次要欄:排行表的「量／未平倉」、日資料表的「現股收 / 價差」(圖上已呈現) */
  table.tbl .hide-md { display: none; }
}
@media (max-width: 768px) {
  .pagehead { flex-direction: column; align-items: stretch; }
  /* 直排時控件靠 pseudo 外擴的熱區會互相靠近 —— 間距放大一階 */
  .toolbar { width: 100%; flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .ctrl.stock { max-width: none; width: 100%; justify-content: space-between; }
  .searchwrap, .searchwrap input { width: 100%; }
  .segment { width: 100%; }
  .segment button { flex: 1; padding: 0 var(--space-4); }
  table.tbl thead th { padding: var(--space-6); }
  table.tbl tbody td { padding: var(--space-6); }
  /* 次要欄:排行表的期貨代號 / 均未平倉 / 分鐘線欄;日資料表的 開 / 高 / 低。
     單檔表的「未平倉」永遠不隱藏 —— 它是那頁的主角。 */
  table.tbl .hide-sm { display: none; }
  /* 分鐘線欄被砍掉時補一個行內 tag:它是這頁的 Agent 掛鉤,不能在手機上整個消失 */
  .tagm.smonly { display: inline-flex; margin-left: var(--space-6); }
  .band { grid-template-columns: 1fr; gap: var(--space-12); }
  .band .b + .b { border-left: none; border-top: 1px solid var(--border-hairline); padding-left: 0; padding-top: var(--space-12); }
  .band .val { font-size: 28px; }
  .band .val.cjk { font-size: 24px; }
  .card { padding: var(--space-12); }
}