/* 公版策略 #30 的 3D 市場地圖分頁。
   前半段是 Map3D 模組自己需要的 class(m3d-*),從原型同步過來 ——
   模組會動態建立這些元素,沒有這段樣式標籤與圖例會變成裸文字。
   後半段是這個分頁自己的外框(時間軸、產業側欄)。
   ⚠️ 不要在這裡改 m3d-* 的版面語意(位置是 JS 每幀算的);只改顏色與字級。 */

/* 產業標籤:兩行(名稱／數值),外面一層半透明底 ——
   白字直接疊在淺色盤子上讀不出來,加底比加更粗的 text-shadow 乾淨。 */
.m3d-plate-label {
  display: flex; flex-direction: column; align-items: center; line-height: 1.25;
  padding: 2px 7px 3px; border-radius: 7px;
  /* 底色比原本淡(.52 → .38):標籤是**標註**,不該比地圖本身還搶眼。
     淡到讀不出來的風險由 text-shadow 接手。 */
  background: rgba(14,18,24,.38); backdrop-filter: blur(3px);
  font-family: var(--font-ui); color: #fff;
  white-space: nowrap; pointer-events: none; user-select: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
  transition: opacity .18s ease;
}
/* 去重疊藏起來的標籤:淡出而不是瞬間消失 */
.m3d-plate-label.is-off { opacity: 0; }
.m3d-pl-name { font-size: 11.5px; font-weight: 600; }
.m3d-pl-val {
  font-family: var(--font-num); font-size: 10px; font-weight: 500; opacity: .88;
}
.m3d-pl-val[hidden] { display: none; }

.m3d-tooltip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); padding: 8px 10px; font-size: 12px; min-width: 164px;
}
.m3d-tip-head { font-weight: 600; }
.m3d-tip-head b { font-family: var(--font-num); margin-inline-end: 5px; }
.m3d-tip-sub { color: var(--fg-dim); font-size: 11px; margin-bottom: 5px; }
.m3d-tip-row { display: flex; justify-content: space-between; gap: 14px; }
.m3d-tip-row span { color: var(--fg-dim); }
.m3d-tip-row b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.m3d-tip-row b.pos { color: var(--pos); }
.m3d-tip-row b.neg { color: var(--neg); }
.m3d-tip-row b.na  { color: var(--fg-faint); }
.m3d-tip-warn { margin-top: 5px; color: var(--warn); font-size: 11px; }

/* 圖例 */
.legend {
  position: absolute; z-index: 10; left: 10px; bottom: 10px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow);
  padding: 6px 10px 8px; max-width: min(340px, calc(100% - 20px));
}
.legend-toggle {
  font: inherit; font-size: 11px; font-weight: 600; color: var(--fg-dim);
  background: none; border: 0; padding: 2px 0 4px; cursor: pointer; display: block; width: 100%;
  text-align: left; letter-spacing: .04em;
}
.legend-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.legend-toggle::after { content: ' ▾'; color: var(--fg-faint); }
.legend.collapsed .legend-toggle::after { content: ' ▸'; }
.legend.collapsed #legend { display: none; }
/* 收起來時留一行摘要 —— 多數時候「高度是什麼、顏色是什麼」就夠了 */
.legend-summary {
  font-size: 11px; color: var(--fg-dim); padding-bottom: 2px;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.legend-summary[hidden] { display: none; }
.m3d-legend-row {
  display: grid; grid-template-columns: 58px minmax(0,1fr) auto;
  align-items: center; gap: 2px 8px; font-size: 11.5px; padding: 1.5px 0;
}
.m3d-chan { color: var(--fg-dim); }
/* 欄名不要截字:排名色階的說明比原本的數字區間長很多,
   截成「RS…」等於沒說。寬度不夠就換行,圖例高一點沒關係。 */
.m3d-field { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.m3d-detail { display: flex; align-items: center; gap: 8px; }
.m3d-unit { color: var(--fg-faint); font-weight: 400; }
.m3d-swatch { width: 54px; height: 9px; border-radius: 2px; flex: none; border: 1px solid var(--line); }
.m3d-range { color: var(--fg-faint); font-size: 10.5px; white-space: nowrap; }
.m3d-ghostchip {
  width: 54px; height: 9px; border-radius: 2px; flex: none;
  background: #9aa0a8; opacity: .35; border: 1px solid var(--line);
}
.m3d-legend-note { margin-top: 3px; padding-top: 4px; border-top: 1px solid var(--line-soft); }


/* ── 點柱子跳出來的日線 K 小視窗 ─────────────────────────
   原型是深色玻璃面板;這裡是淺色頁,所以整組改成淺色。
   K 棒本身的紅綠**不動** —— 那是資料不是裝飾(台股紅漲綠跌)。
   位置由 kpanel.js 每幀寫在 left/top 上,不要在這裡加 transform。 */
.m3d-kp {
  position: absolute; z-index: 22; pointer-events: auto; width: 282px;
  /* 🔴 容器比卡片還窄時(#35 的 3D 舞台在 390px 視窗只剩 152px),
     寫死 282px 會讓卡片對稱地溢出兩側、右半張被視窗邊緣切掉 ——
     切掉的正好是最新的那幾根 K。夾位救不了(把中心夾在哪都會溢出
     (卡片寬 - 容器寬)/2),寬度本身要跟著縮。
     圖本來就有 viewBox + 下面的 svg{width:100%},所以會自己等比縮。
     容器夠寬時這條完全不作用,#30 一個像素都不會變。 */
  max-width: 100%;
  background: rgba(252,253,255,.96); backdrop-filter: blur(8px);
  border: 1px solid rgba(249,115,22,.45); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16,24,40,.22);
  font-family: var(--font-ui); color: #292524;
  padding: 7px 8px 6px; cursor: default;
}
.m3d-kp-head { display: flex; align-items: baseline; gap: 5px; line-height: 1.2; }
.m3d-kp-head b { font-family: var(--font-num); font-size: 13px; color: #C2410C; }
.m3d-kp-head span { font-size: 12.5px; font-weight: 600; }
.m3d-kp-head em {
  font-size: 10.5px; font-style: normal; color: #78716C; margin-inline-start: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m3d-kp-x {
  margin-inline-start: auto; flex: none; width: 19px; height: 19px; padding: 0;
  background: rgba(16,24,40,.07); border: 0; border-radius: 5px;
  color: #57534E; font-size: 14px; line-height: 17px; cursor: pointer;
}
.m3d-kp-x:hover { background: rgba(16,24,40,.15); color: #292524; }
/* 🔴 圖例擠不下時要整組換行,不可以讓每個標籤自己斷字。
   實測:#35 的圖例有四格(65根30分K / MA20 / 高線 / 低線),
   擠在 266px 裡每一格都被壓成直排(「高」「線」上下疊)。
   em 給 nowrap 讓標籤不斷字,容器給 wrap 讓整組掉到下一行。
   #30 的圖例只有三格、塞得下,所以這兩條對它完全不作用。 */
.m3d-kp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 3px 0 1px; }
.m3d-kp-price b { font-family: var(--font-num); font-size: 17px; font-weight: 600; }
.m3d-kp-price i {
  font-style: normal; font-size: 10px; color: #78716C;
  margin-inline-start: auto; font-family: var(--font-num);
}
.m3d-kp-chart { position: relative; margin: 1px 0 2px; }
.m3d-kp-chart svg { display: block; width: 100%; height: auto; }
.m3d-kp-cross {
  position: absolute; top: 0; bottom: 14px; width: 1px;
  background: rgba(194,65,12,.75); opacity: 0; pointer-events: none;
  transform: translateX(-.5px);
}
/* K 棒:紅漲綠跌(台股習慣)。與 theme.js 的 kchart.up/down 對齊。 */
.m3d-kbar.up    path, .m3d-kbar.up    rect { fill: #e8443f; stroke: #e8443f; stroke-width: 1; }
.m3d-kbar.down  path, .m3d-kbar.down  rect { fill: #17a95a; stroke: #17a95a; stroke-width: 1; }
.m3d-kbar.flat  path, .m3d-kbar.flat  rect { fill: #9aa3ad; stroke: #9aa3ad; stroke-width: 1; }
.m3d-kvol.up   rect { fill: #e8443f; opacity: .5; }
.m3d-kvol.down rect { fill: #17a95a; opacity: .5; }
/* 月線顏色寫成變數:圖例色塊要跟它同色,寫兩次遲早有一邊忘了改。
   淺底不能用原型那個淺黃 #f5c451(白底看不見),所以這裡是深橘。 */
.s30-m3d .m3d-kp { --m3d-ma: #D97706; }
.m3d-kma { fill: none; stroke: var(--m3d-ma); stroke-width: 1.1; opacity: .9; }
/* 疊圖參考線(年高線)。顏色與虛線由 kchart.js 寫在 inline style,
   這裡只定義不會變的部分 —— 在這裡寫 stroke 會把它蓋掉。 */
.m3d-kln { fill: none; stroke-width: 1.3; opacity: .95; stroke-linecap: butt; }
/* 價格列右邊的圖例。月線吃 CSS 變數,疊圖線吃 JS 寫進來的 --c。 */
.m3d-kp-price i { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.m3d-kp-price em {
  font-style: normal; display: inline-flex; align-items: center; gap: 3px;
  white-space: nowrap;
}
.m3d-kp-price em::before {
  content: ''; width: 10px; height: 0;
  border-top: 2px solid var(--c, currentColor);
}
.m3d-kp-price em.dash::before { border-top-style: dashed; }
.m3d-kp-price em.ma::before { border-top-color: var(--m3d-ma); }
.m3d-kgrid { stroke: rgba(16,24,40,.12); stroke-width: 1; }
.m3d-kax { fill: #78716C; font-size: 8.5px; font-family: var(--font-num); }
.m3d-kax.dim { fill: #A8A29E; }
.m3d-kp-read {
  /* 高度固定成兩行:不固定的話第一根 K 棒沒有前一天、漲跌顯示「—」,
     這一列只有一行 → 面板矮一截 → 夾位把整個面板往上推,滑過去會一直跳。 */
  display: flex; flex-wrap: wrap; gap: 1px 7px; align-items: baseline;
  align-content: flex-start; overflow: hidden;
  font-size: 10px; color: #57534E; font-family: var(--font-num);
  border-top: 1px solid rgba(16,24,40,.08); padding-top: 4px;
  line-height: 1.45; height: 36px;
}
.m3d-kp-read b { color: #292524; font-weight: 600; margin-inline-start: 1px; }
.m3d-kp-read .d { color: #C2410C; }
.m3d-kp-read .v { margin-inline-start: auto; }
.m3d-kp-read .pos, .m3d-kp-price .pos { color: #D1322C; }
.m3d-kp-read .neg, .m3d-kp-price .neg { color: #0F9C33; }
.m3d-kp-read .flat, .m3d-kp-price .flat, .m3d-kp-read .na { color: #78716C; }
.m3d-kp-foot { font-size: 9.5px; color: #A8A29E; margin-top: 3px; }
.m3d-kp-state { padding: 20px 4px; text-align: center; font-size: 12px; color: #78716C; }
.m3d-kp-state.warn { color: #B45309; }
@media (max-width: 480px) {
  .m3d-kp { width: 252px; }
  .m3d-kp-read { height: 52px; }
}

/* ── 分頁外框 ─────────────────────────────────────────── */
.s30-m3d {
  display: flex; flex-direction: column; gap: 8px; min-height: 0;
  /* 顏色一律寫死:這個分頁會被掛進別人的容器,繼承來的文字色可能是任何東西
     (實測掛在深色頁上時整個側欄變成看不清的淡灰) */
  color: #292524;

  /* ⚠️ 這一組變數非加不可。
     上面那段 m3d-* 是從原型頁同步過來的,原型自己定義了 --panel / --line /
     --shadow 這些變數;app-talkstock **沒有**這組命名。
     少了它們,tooltip 的 background / border / box-shadow 全部解析失敗 →
     說明框變成**透明的字浮在 3D 上**,完全讀不出來(使用者 2026-10-18 回報)。
     定義在 .s30-m3d 上就夠:tooltip、標籤、K 面板都掛在 host 裡面。 */
  --panel: #ffffff;
  --panel-2: #FAFAF9;
  --fg: #292524;
  --fg-dim: #57534E;
  --fg-faint: #A8A29E;
  --line: #E7E5E4;
  --line-soft: #F5F5F4;
  --accent: #F97316;          /* 品牌橘 */
  --pos: #16A34A;
  --neg: #DC2626;
  --warn: #B45309;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.10);
  --font-ui: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', system-ui, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.s30-m3d-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 2px;
}
.s30-m3d-bar input[type=range] { flex: 1; min-width: 140px; accent-color: #F97316; }
.s30-m3d-btn {
  font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap;
  background: #fff; border: 1px solid #E7E5E4; border-radius: 8px;
  padding: 5px 11px; color: #57534E;
}
.s30-m3d-btn:hover { color: #292524; border-color: #D6D3D1; }
.s30-m3d-btn[aria-pressed="true"] { background: #F97316; border-color: #F97316; color: #fff; }
.s30-m3d-day {
  font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600;
  min-width: 6.4em; color: #292524;
}

.s30-m3d-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 8px; min-height: 0; }
.s30-m3d-side {
  border: 1px solid #E7E5E4; border-radius: 10px; background: #fff;
  display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.s30-m3d-side h4 {
  margin: 0; padding: 7px 10px; font-size: 12.5px; font-weight: 600;
  border-bottom: 1px solid #F5F5F4; color: #292524;
}
#s30M3dInds { overflow: auto; flex: 1; min-height: 0; }
.s30-m3d-ind {
  display: grid; grid-template-columns: 5.2em 1fr 3em; align-items: center; gap: 7px;
  width: 100%; background: none; border: 0; border-bottom: 1px solid #F5F5F4;
  padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; text-align: left;
  color: #292524;
}
.s30-m3d-ind:hover { background: #FFFBF5; }
.s30-m3d-ind-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s30-m3d-ind-b {
  height: 8px; border-radius: 4px; background: #F5F5F4; overflow: hidden;
  box-shadow: inset 0 0 0 1px #E7E5E4;
}
.s30-m3d-ind-b i { display: block; height: 100%; background: #16A34A; }
.s30-m3d-ind-c {
  font-variant-numeric: tabular-nums; font-size: 11px; color: #78716C; text-align: right;
}

.s30-m3d-stage {
  position: relative; border: 1px solid #E7E5E4; border-radius: 10px;
  overflow: hidden; background: #fff; min-height: 420px;
}
.s30-m3d-host { width: 100%; height: 100%; position: relative; overflow: hidden; }
.s30-m3d-host canvas { touch-action: none; }
.s30-m3d-loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: #fff; color: #78716C; font-size: 13px; z-index: 30;
}
.s30-m3d-legend {
  position: absolute; z-index: 10; left: 8px; bottom: 8px;
  background: rgba(255,255,255,.94); border: 1px solid #E7E5E4; border-radius: 9px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08); padding: 5px 9px 7px;
  max-width: min(330px, calc(100% - 16px));
}
.s30-m3d-legend-t {
  font: inherit; font-size: 11px; font-weight: 600; color: #57534E;
  background: none; border: 0; padding: 2px 0; cursor: pointer; letter-spacing: .04em;
}
.s30-m3d-legend-t::after { content: ' \25BE'; color: #A8A29E; }
.s30-m3d-legend.collapsed .s30-m3d-legend-t::after { content: ' \25B8'; }
.s30-m3d-legend.collapsed #s30M3dLegend { display: none; }

.s30-m3d-note { font-size: 11px; color: #78716C; line-height: 1.7; margin: 0; }
.s30-m3d-note b { color: #57534E; }

@media (max-width: 900px) {
  .s30-m3d-wrap { grid-template-columns: 1fr; }
  .s30-m3d-side { max-height: 190px; }
  .s30-m3d-stage { min-height: 340px; }
  .s30-m3d-bar input[type=range] { flex: 1 1 100%; order: 3; }
}