/* TAK 公司簡介 Web — 舞台殼（使用者 2026-10-23：維持中間一個大屏，所有操作都在中間；色系用 V6 PPT）
   色票＝60_ppt_template/tak_theme.js；MnZn 內容仍用藍（--mn-*），NiZn 用綠（--ni-*）。不用外部函式庫；file:// 可開。 */
:root{
  --g:#009048; --g-dk:#00713A; --g-mid:#4FA97C; --sage:#A8D0B8; --sage-lt:#E6F2EB; --sage-vlt:#F1F8F3;
  --ink:#20302A; --ink-2:#5C6E64; --ink-3:#8FA197; --rule:#CFE0D6; --paper:#FFFFFF; --paper-2:#F7FAF8;
  --mn-50:#F6FAFD; --mn-100:#ECF4FA; --mn-200:#CFE4F2; --mn-500:#5FA3D0; --mn-700:#0A6293; --mn-ink:#202A32;
  --ni-50:#F1F8F3; --ni-100:#E6F2EB; --ni-200:#A8D0B8; --ni-500:#4FA97C; --ni-700:#00713A; --ni-ink:#20302A;
  --clay-0:#FFFFFF; --clay-1:#EEF6F1; --clay-2:#DCEBE2; --clay-line:#3E6B57;
  --font-latin:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --font-cjk:"Microsoft JhengHei","PingFang TC","Noto Sans CJK TC","Noto Sans TC";
  --font-mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
  --top-h:72px; --strip-h:26px; --foot-h:34px; --side:32px; --ease:cubic-bezier(.2,.7,.2,1);
}
:lang(zh-Hans){--font-cjk:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC","Noto Sans SC"}
:lang(ja){--font-cjk:"Yu Gothic UI","Yu Gothic","Meiryo","Hiragino Sans","Noto Sans CJK JP"}
:lang(de){hyphens:auto}
*{box-sizing:border-box}
html,body{height:100%}
body.stg{margin:0;color:var(--ink);background:var(--paper-2);font:400 15px/1.7 var(--font-latin),var(--font-cjk),sans-serif;overflow:hidden;
  background-size:900px auto}
.stg a{color:inherit}
.stg h1,.stg h2,.stg h3{margin:0;line-height:1.2;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.mono{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--g);outline-offset:2px}

/* ---------- 頂列 ---------- */
.stg-top{height:var(--top-h);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:0 var(--side);border-bottom:1px solid var(--rule);background:rgba(255,255,255,.9)}
.stg-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.stg-brand img{height:38px;width:auto}
.stg-brand b{font-size:19px;letter-spacing:.02em}
.stg-brand i{width:7px;height:7px;background:var(--g);display:block}
.stg-tabs{display:flex;justify-content:center;gap:2px;min-width:0}
.stg-tabs a{position:relative;padding:8px 12px;text-decoration:none;color:var(--ink-2);font-size:15px;white-space:nowrap}
.stg-tabs a small{font:11px var(--font-mono);color:var(--ink-3);margin-right:6px}
.stg-tabs a:hover{color:var(--ink)}
.stg-tabs a[aria-current="page"]{color:var(--g-dk);font-weight:700}
.stg-tabs a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--g)}
.stg-right{display:flex;align-items:center;gap:16px}
.stg-tag{font:500 10px/1.5 var(--font-mono);letter-spacing:.16em;color:var(--g-mid);text-transform:uppercase;text-align:right}
.stg-lang{display:flex;border:1px solid var(--rule);border-radius:999px;padding:2px;background:var(--paper)}
.stg-lang a{font:500 11px/1 var(--font-mono);padding:6px 8px;border-radius:999px;text-decoration:none;color:var(--ink-2)}
.stg-lang a[aria-current="true"]{background:var(--ink);color:#fff}

/* ---------- 圖框外標示列 ---------- */
.stg-strip{height:var(--strip-h);display:flex;justify-content:space-between;align-items:center;padding:0 var(--side);font:500 10px var(--font-mono);letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}

/* ---------- 舞台 ---------- */
.stg-main{position:relative;height:calc(100vh - var(--top-h) - var(--strip-h) - var(--foot-h));height:calc(100dvh - var(--top-h) - var(--strip-h) - var(--foot-h));padding:14px var(--side) 52px}
.stg-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stg-deco img{position:absolute;opacity:.16;width:520px;max-width:none}
.stg-deco .l{left:-260px;top:12%}.stg-deco .r{right:-240px;bottom:-40px;transform:scaleX(-1)}
.stg-deco svg{position:absolute;left:0;top:0;width:100%;height:100%}
.stg-deco svg path{fill:none;stroke:var(--sage);stroke-width:2}
.stg-frame{position:relative;height:100%;background:rgba(255,255,255,.92);border:1px solid var(--g-mid);
  background-image:linear-gradient(var(--sage-vlt) 1px,transparent 1px),linear-gradient(90deg,var(--sage-vlt) 1px,transparent 1px);background-size:24px 24px}
.stg-frame .c{position:absolute;width:14px;height:14px;border:0 solid var(--g)}
.stg-frame .tl{left:-5px;top:-5px;border-left-width:2px;border-top-width:2px}
.stg-frame .br{right:-5px;bottom:-5px;border-right-width:2px;border-bottom-width:2px}
.stg-label{position:absolute;left:14px;top:9px;z-index:3;font:600 10px var(--font-mono);letter-spacing:.16em;color:var(--g-dk);text-transform:uppercase}
.stg-plus{position:absolute;right:12px;top:6px;z-index:3;font:14px var(--font-mono);color:var(--g)}
.stg-scroll{position:absolute;inset:28px 0 0 0;overflow:auto;padding:14px 28px 28px;scrollbar-width:thin;scrollbar-color:var(--sage) transparent}
.stg-scroll.flex{display:flex;flex-direction:column;overflow:hidden}

/* 進場（換章時框內內容滑入） */
.stg-enter{animation:stgIn .55s var(--ease) both}
@keyframes stgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.leaving .stg-scroll{opacity:0;transform:translateX(calc(var(--dir,1) * -24px));transition:opacity .22s,transform .22s}

/* ---------- 框內標頭 ---------- */
.stg-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:end;padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:18px}
.stg-eyebrow{display:flex;align-items:center;gap:10px;font:600 10.5px var(--font-mono);letter-spacing:.18em;color:var(--g-dk);text-transform:uppercase;margin-bottom:10px}
.stg-eyebrow::before{content:"";width:22px;height:1px;background:var(--g-dk)}
.stg-head h1{font-size:clamp(28px,3.1vw,46px);font-weight:700;letter-spacing:-.01em}
.stg-head h1 .dot{color:var(--g)}
.stg-lead{margin:0;color:var(--ink-2);font-size:14px;max-width:34em;justify-self:end}

/* ---------- 左清單＋右內容 ---------- */
.stg-ld{flex:1;min-height:0;display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px}
.stg-list{overflow:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--sage) transparent}
.stg-list .grp{font:600 10px var(--font-mono);letter-spacing:.16em;color:var(--ink-3);margin:14px 0 6px;text-transform:uppercase}
.stg-list .grp:first-child{margin-top:0}
.stg-item{display:grid;grid-template-columns:30px 1fr;gap:4px 8px;padding:11px 10px 11px 12px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);border-left:2px solid transparent;cursor:pointer}
.stg-item b{font:500 11px/1.9 var(--font-mono);color:var(--ink-3)}
.stg-item span{font-size:15px;line-height:1.35}
.stg-item small{display:block;font:500 9.5px var(--font-mono);letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase;margin-top:4px}
.stg-item:hover{background:var(--sage-vlt)}
.stg-item.on{border-left-color:var(--g);background:linear-gradient(90deg,var(--sage-lt),transparent)}
.stg-item.on span{color:var(--g-dk);font-weight:700}
.stg-item.mn.on{border-left-color:var(--mn-700);background:linear-gradient(90deg,var(--mn-100),transparent)}.stg-item.mn.on span{color:var(--mn-700)}
.stg-item .n{grid-column:2;font:11px var(--font-mono);color:var(--ink-3)}
.stg-find{display:flex;align-items:center;gap:6px;border:1px solid var(--rule);background:var(--paper);height:32px;padding:0 8px;margin-bottom:8px;font-size:13px}
.stg-find input{border:0;outline:0;background:transparent;font:inherit;flex:1;min-width:0}
.stg-detail{position:relative;min-height:0;overflow:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--sage) transparent}
.stg-panel{display:none}
.stg-panel.on{display:block;animation:stgIn .4s var(--ease) both}
.stg-ptitle{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:10px}
.stg-ptitle h2{font-size:clamp(22px,2.2vw,32px);font-weight:700}
.stg-badge{flex:none;font:600 11px var(--font-mono);letter-spacing:.08em;border:1px solid var(--g-mid);color:var(--g-dk);padding:5px 9px}
.stg-panel p{margin:0 0 10px;color:var(--ink);max-width:62em}
.stg-sub{display:flex;justify-content:space-between;font:600 10px var(--font-mono);letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;border-top:1px solid var(--rule);padding-top:10px;margin:16px 0 10px}
.stg-foot-note{font-size:12px;color:var(--ink-3);margin-top:12px}

/* KPI */
.stg-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--ink);margin:14px 0}
.stg-kpis div{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule)}
.stg-kpis b{display:block;font:700 30px/1.1 var(--font-latin);color:var(--g-dk);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stg-kpis b small{font:500 12px var(--font-mono);color:var(--ink-2);margin-left:4px;letter-spacing:0}
.stg-kpis span{font-size:12.5px;color:var(--ink-2)}

/* 卡片 */
.stg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:12px 0}
.stg-card{position:relative;background:var(--paper);border:1px solid var(--rule);padding:14px 16px 16px;text-decoration:none;color:inherit;display:block}
.stg-card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--g)}
.stg-card h3{font-size:15px;margin-bottom:6px}.stg-card p{margin:0;font-size:13px;color:var(--ink-2)}
a.stg-card:hover{border-color:var(--g-mid)}

/* 時間軸（參考站個人歷程） */
.stg-tl{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:18px;margin:14px 0 20px}
.stg-tl div{position:relative;padding-top:20px;border-top:1px solid var(--rule)}
.stg-tl div::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;background:var(--ink-3)}
.stg-tl div.on::before{background:var(--g)}
.stg-tl b{display:block;font:300 26px/1.1 var(--font-latin);color:var(--ink-2)}.stg-tl div.on b{color:var(--g)}
.stg-tl span{font-size:12.5px;color:var(--ink-2)}

/* 圖片輪播 */
.stg-car{position:relative;border:1px solid var(--rule);background:var(--paper)}
.stg-car .bar{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid var(--rule);font:600 10px var(--font-mono);letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.stg-car .view{position:relative;aspect-ratio:16/9;max-height:52vh;overflow:hidden;background:var(--sage-vlt)}
.stg-car figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s}
.stg-car figure.on{opacity:1}
.stg-car img{width:100%;height:100%;object-fit:contain}
.stg-car figcaption{position:absolute;left:12px;bottom:10px;background:rgba(32,48,42,.82);color:#fff;font-size:13px;padding:5px 10px}
.stg-car .ctl{position:absolute;right:10px;bottom:10px;display:flex;gap:4px}
.stg-car button{width:34px;height:30px;border:1px solid var(--rule);background:rgba(255,255,255,.95);cursor:pointer;font:600 13px var(--font-mono);color:var(--ink)}
.stg-car button:hover{border-color:var(--g)}
.stg-zoom{position:fixed;inset:0;z-index:50;background:rgba(32,48,42,.86);display:flex;align-items:center;justify-content:center;padding:4vh 4vw}
.stg-zoom img{max-width:100%;max-height:100%;object-fit:contain;background:#fff}
.stg-zoom[hidden]{display:none}

/* 熱點圖（廠區 2.5D、場景） */
.stg-hot{position:relative}
.stg-hot svg{display:block;width:100%;height:auto}
.stg-hot #labels,.stg-hot svg>text,.stg-hot svg>.legend{display:none}
.stg-hot .pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:0;background:var(--paper);box-shadow:0 0 0 2px var(--g),0 4px 10px rgba(32,48,42,.18);cursor:pointer;padding:0;font:700 10px var(--font-mono);color:var(--g-dk)}
.stg-hot .pin.on{background:var(--g);color:#fff}
.stg-hot .tip{position:absolute;z-index:4;width:min(280px,70%);background:var(--paper);border:1px solid var(--g-mid);padding:12px 14px;font-size:13px;box-shadow:0 10px 24px rgba(32,48,42,.14)}
.stg-hot .tip b{display:block;font-size:15px;margin-bottom:2px}.stg-hot .tip[hidden]{display:none}

/* ---------- 總覽（主 index）：章節格狀地圖 ---------- */
.stg-ov{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,1fr);gap:14px;flex:1;min-height:0}
.stg-ov a{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--paper);border:1px solid var(--rule);text-decoration:none;color:inherit;overflow:hidden;transition:border-color .2s,transform .2s var(--ease)}
.stg-ov a:hover,.stg-ov a:focus-visible{border-color:var(--g);transform:translateY(-2px)}
.stg-ov a .no{font:600 11px var(--font-mono);letter-spacing:.14em;color:var(--g)}
.stg-ov a h2{font-size:20px}
.stg-ov a small{font:500 10px var(--font-mono);letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.stg-ov a p{margin:auto 0 0;font-size:13px;color:var(--ink-2);max-width:26em;position:relative;z-index:1}
.stg-ov a img{position:absolute;right:-8px;bottom:-8px;width:44%;max-width:180px;opacity:.95;pointer-events:none}
.stg-ov .big{grid-column:span 2;grid-row:span 2}
.stg-ov .big h2{font-size:clamp(26px,2.6vw,38px)}
.stg-ov .big img{width:62%;max-width:360px}

/* ---------- HUD 與頁尾 ---------- */
.stg-hud{position:absolute;left:calc(var(--side) - 8px);bottom:8px;z-index:6;display:flex;align-items:center;gap:0;background:var(--paper);border:1px solid var(--rule);font-size:12px}
.stg-hud>*{padding:7px 12px;border-right:1px solid var(--rule)}
.stg-hud>*:last-child{border-right:0}
.stg-hud a,.stg-hud button{border:0;background:none;font:inherit;color:var(--g-dk);cursor:pointer;text-decoration:none;font-weight:700}
.stg-hud .keys{color:var(--ink-3);font-family:var(--font-mono);font-size:11px}
.stg-hud kbd{font:inherit;border:1px solid var(--rule);padding:0 4px;margin:0 2px;color:var(--ink-2)}
.stg-xy{position:absolute;right:var(--side);bottom:16px;font:500 10px var(--font-mono);letter-spacing:.14em;color:var(--ink-3)}
.stg-foot{height:var(--foot-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--side);border-top:1px solid var(--rule);font:500 11px var(--font-mono);color:var(--ink-3);letter-spacing:.06em;background:var(--paper)}
.stg-foot .r{text-align:right}

/* 精簡動態 */
html.calm *,html.calm *::before,html.calm *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- 平板 ---------- */
@media (max-width:1100px){
  .stg-tag{display:none}
  .stg-tabs a{padding:8px 8px;font-size:14px}.stg-tabs a small{display:none}
  .stg-ov{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stg-ld{grid-template-columns:200px minmax(0,1fr);gap:18px}
}
/* ---------- 手機：分頁換到名稱下一列；框仍在，框內直向捲動；HUD 一列 ---------- */
@media (max-width:767px){
  :root{--top-h:96px;--side:12px;--foot-h:30px}
  .stg-top{grid-template-columns:1fr auto;grid-template-rows:52px 44px;gap:0 10px;padding:0 var(--side)}
  .stg-brand img{height:30px}.stg-brand b{font-size:16px}
  .stg-tabs{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:0}
  .stg-tabs a{padding:10px 10px;font-size:14px}
  .stg-lang a:not([aria-current="true"]){display:none}
  .stg-strip{display:none}
  .stg-main{padding:10px var(--side) 44px}
  .stg-deco{display:none}
  .stg-scroll,.stg-scroll.flex{display:block;overflow:auto;padding:10px 14px 20px}
  .stg-head{grid-template-columns:minmax(0,1fr);gap:8px}
  .stg-lead{justify-self:start}
  .stg-ld{display:block}
  .stg-list{display:flex;gap:6px;overflow-x:auto;padding:0 0 8px;margin:0 -2px 12px;position:sticky;top:-10px;z-index:3;background:rgba(255,255,255,.96)}
  .stg-list .grp,.stg-find{display:none}
  .stg-item{flex:none;display:block;border:1px solid var(--rule);border-left-width:1px;padding:7px 10px;white-space:nowrap}
  .stg-item b,.stg-item small,.stg-item .n{display:none}
  .stg-item span{font-size:13px}
  .stg-item.on{border-color:var(--g);background:var(--sage-lt)}
  .stg-item.mn.on{border-color:var(--mn-700);background:var(--mn-100)}
  .stg-detail{overflow:visible;padding:0}
  .stg-ov{display:flex;flex-direction:column}
  .stg-ov a{min-height:120px}
  .stg-hud{left:var(--side);bottom:6px;font-size:11px}.stg-hud .keys{display:none}
  .stg-xy{bottom:12px}
  .stg-foot{grid-template-columns:1fr auto}.stg-foot .r{display:none}
  .stg-tl{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ======================================================================
   框內內容元件（流程圖、目錄表格、材質頁）
   ====================================================================== */
/* V5 製造流程圖：1600 寬畫布，stage.js 等比縮放到容器寬；手機最小 0.5 倍可左右滑 */
.fl-host{overflow-x:auto;overflow-y:hidden;margin:8px 0}
.fl-wrap{position:relative}
.fl{position:absolute;left:0;top:0;transform-origin:0 0;color:var(--ink)}
.fl-a{position:absolute}.fl-box{display:flex;align-items:center;justify-content:center}
.fl-ic img{width:100%;height:100%;object-fit:contain;display:block}.fl-ic img.st{display:none}
html.calm .fl-ic img.an{display:none}html.calm .fl-ic img.st{display:block}
@media (prefers-reduced-motion:reduce){.fl-ic img.an{display:none}.fl-ic img.st{display:block}}
.fl-lab{display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.fl-badge{width:28px;height:28px;border-radius:50%;background:var(--g);color:#fff;font:700 15px Arial;display:flex;align-items:center;justify-content:center}
.fl-lab b{font-size:19px;color:var(--g-dk)}.fl-lab i{font:400 13px Arial;color:var(--ink-2);font-style:normal}
.fl-plab{text-align:center;white-space:nowrap}.fl-plab b{display:block;font-size:16px}.fl-plab span{font-size:12.5px;color:var(--ink-2)}
.fl-cap{text-align:center;white-space:nowrap;font-size:12.5px;color:var(--ink-2)}
.fl-arw{position:absolute;height:22px}
.fl-arw .fl-bar{position:absolute;left:0;right:16px;top:6px;height:10px;background:var(--g);border-radius:2px}
.fl-arw .fl-hd{position:absolute;right:0;top:0;border-left:18px solid var(--g);border-top:11px solid transparent;border-bottom:11px solid transparent}
.fl-arw em{position:absolute;top:8px;width:6px;height:6px;border-radius:50%;background:#fff;animation:flRun 1.5s linear infinite;opacity:0}
.fl-arw em:nth-of-type(2){animation-delay:.5s}.fl-arw em:nth-of-type(3){animation-delay:1s}
@keyframes flRun{0%{left:2px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 24px);opacity:0}}
.fl-bypass{border:2px dashed var(--g-mid);border-radius:12px;background:rgba(241,248,243,.8)}
.fl-ptitle{display:flex;align-items:center;white-space:nowrap}.fl-ptitle b{color:var(--g-dk);font-size:16px}
.fl-tag{font-size:12px;color:#fff;background:var(--g-mid);border-radius:10px;padding:2px 9px}.fl-sub{font-size:12.5px;color:var(--ink-2)}
.fl-next{font-size:14px;color:var(--g-dk);font-weight:700;white-space:nowrap}
.fl svg.fl-a{pointer-events:none}
.fl-line{stroke:var(--g-mid);stroke-width:3;fill:none;stroke-dasharray:8 6;animation:flDash 1s linear infinite}
@keyframes flDash{to{stroke-dashoffset:-24}}

/* 目錄：工具列、外形組跳轉、外形分組、資料表 */
.stg-tools{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:8px 0;background:rgba(255,255,255,.96);border-bottom:1px solid var(--rule)}
.stg-seg{display:flex;border:1px solid var(--rule);padding:2px;background:var(--paper)}
.stg-seg button{border:0;background:none;padding:5px 10px;font-size:12.5px;cursor:pointer;color:var(--ink-2)}
.stg-seg button[aria-pressed=true]{background:var(--fam,var(--g-dk));color:#fff}
.stg-tog{font-size:12.5px;color:var(--ink-2);display:flex;gap:5px;align-items:center}
.stg-legend{margin-left:auto;font:11px var(--font-mono);color:var(--ink-3)}
.stg-rail{display:flex;gap:6px;overflow-x:auto;padding:8px 0;scrollbar-width:thin}
.stg-rail a{flex:none;white-space:nowrap;padding:3px 9px;border:1px solid var(--rule);background:var(--paper);font:11px/1.5 var(--font-mono);color:var(--ink-2);text-decoration:none}
.stg-rail a .n{color:var(--ink-3);margin-left:4px}.stg-rail a:hover{border-color:var(--fam,var(--g))}
.stg-grp{margin:18px 0 30px;scroll-margin-top:96px}
.stg-grp-head{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:end;margin-bottom:10px}
.stg-grp-head h3{font:700 24px/1.1 var(--font-mono);color:var(--fam-ink,var(--ink))}
.stg-grp-head .k{font:600 10px var(--font-mono);letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.stg-grp-head .cnt{font-size:13px;color:var(--ink-2)}
.stg-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.stg-fig{position:relative;margin:0;height:170px;display:flex;align-items:center;justify-content:center;padding:26px 10px 10px;border:1px solid var(--rule);background:var(--paper);
  background-image:linear-gradient(var(--sage-vlt) 1px,transparent 1px),linear-gradient(90deg,var(--sage-vlt) 1px,transparent 1px);background-size:16px 16px}
.stg-fig img{max-height:100%;width:auto;mix-blend-mode:multiply}
.stg-fig .tag{position:absolute;left:8px;top:6px;font:10px var(--font-mono);letter-spacing:.08em;color:var(--ink-2)}
.stg-tbl{overflow:auto;max-height:64vh;border:1px solid var(--rule);background:var(--paper)}
table.stg-data{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.stg-data th,.stg-data td{padding:8px 9px;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
.stg-data thead th{position:sticky;top:0;z-index:2;background:var(--fam-100,var(--sage-lt));color:var(--fam-ink,var(--ink));font-weight:700}
.stg-data thead tr:last-child th{top:28px}
.stg-data thead tr:only-child th{top:0}
.stg-data thead th.cg{text-align:left;font:600 10.5px var(--font-mono);letter-spacing:.06em;color:var(--fam-700,var(--g-dk));background:var(--fam-50,var(--sage-vlt))}
.stg-data th .u{display:block;font:400 10.5px var(--font-mono);color:var(--ink-2)}
.stg-data th:first-child,.stg-data td:first-child{position:sticky;left:0;z-index:1;text-align:left;background:var(--paper);border-right:1px solid var(--rule)}
.stg-data thead th:first-child{z-index:3;background:var(--fam-100,var(--sage-lt))}
.stg-data tbody tr:hover td{background:var(--fam-50,var(--sage-vlt))}
.stg-data td.pn{line-height:1.5}.stg-data td.pn a{font-family:var(--font-mono);font-weight:600;color:var(--fam-700,var(--g-dk));text-decoration:none}
.stg-data .tol{display:block;font:10.5px/1.2 var(--font-mono);color:var(--ink-3)}
.stg-data td.na{color:var(--ink-3)}
.v-dim .c-eff,.v-eff .c-dim{display:none}.no-tol .tol{display:none}
.stg-notes{font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:12px}.stg-notes .en{color:var(--ink-3)}
[data-family="mnzn"]{--fam:var(--mn-700);--fam-50:var(--mn-50);--fam-100:var(--mn-100);--fam-700:var(--mn-700);--fam-ink:var(--mn-ink);--fam-200:var(--mn-200)}
[data-family="nizn"]{--fam:var(--ni-700);--fam-50:var(--ni-50);--fam-100:var(--ni-100);--fam-700:var(--ni-700);--fam-ink:var(--ni-ink);--fam-200:var(--ni-200)}

/* 材質頁 */
.stg-mat-hero{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-items:end;margin-bottom:18px}
.stg-mat-hero .lab{font:700 clamp(54px,6vw,96px)/.95 var(--font-mono);letter-spacing:-.04em;color:var(--fam-ink,var(--ink))}
.stg-new{display:inline-block;vertical-align:top;margin-left:10px;font:700 11px/1 var(--font-mono);letter-spacing:.1em;padding:6px 8px;background:var(--sage-lt);color:var(--g-dk)}
.stg-mat-hero .subt{font-size:16px;margin:6px 0 0}.stg-mat-hero .subt span{display:block;font:11px var(--font-mono);color:var(--ink-2);letter-spacing:.06em}
.stg-mat-hero .desc{font-size:14px;margin:0}
.stg-mat-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.stg-mat-grid .stg-box:first-child{grid-row:span 2}
.stg-box{border:1px solid var(--rule);background:var(--paper);padding:14px}
.stg-box h3{font-size:14px;margin-bottom:8px;display:flex;justify-content:space-between;gap:8px}
.stg-box h3 small{font:600 10px var(--font-mono);letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.stg-box .stg-tbl{border:0;max-height:none}
.stg-data.mat td,.stg-data.mat th{white-space:normal}.stg-data.mat td:not(:first-child){white-space:nowrap}
.stg-data .sub{display:block;font:10.5px var(--font-mono);color:var(--ink-3)}
.stg-curves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stg-curves a{display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);background:var(--paper);padding:8px}
.stg-curves img{width:100%;height:auto;mix-blend-mode:multiply}
.stg-role{display:inline-block;font:700 10.5px/1 var(--font-mono);padding:4px 6px;margin-right:4px}
.stg-role.primary{background:var(--fam-200,var(--sage));color:var(--fam-ink,var(--ink))}.stg-role.alternate{border:1px solid var(--fam-200,var(--sage));color:var(--fam-700,var(--g-dk))}
.stg-chips{display:flex;flex-wrap:wrap;gap:6px}
.stg-chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:1px solid var(--rule);background:var(--paper);font-size:12.5px;text-decoration:none;color:var(--ink)}
.stg-chip:hover{border-color:var(--fam,var(--g))}
.stg-src{font:10.5px/1.6 var(--font-mono);color:var(--ink-3);margin:8px 0 0}

@media (max-width:1100px){.stg-mat-hero,.stg-mat-grid{grid-template-columns:minmax(0,1fr)}.stg-mat-grid .stg-box:first-child{grid-row:auto}.stg-curves{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.stg-tools{position:static}.stg-legend{display:none}.stg-grp-head{grid-template-columns:minmax(0,1fr)}.stg-figs{grid-template-columns:1fr 1fr}.stg-fig{height:120px}
  .stg-data td.pn{font-size:12px}.stg-tbl{max-height:70vh}.stg-curves{grid-template-columns:minmax(0,1fr)}.stg-kpis b{font-size:24px}}

/* ---------- 修正（2026-10-23 實測後） ---------- */
/* 總覽：只有 02 是大卡，06／07 橫跨兩欄；小卡圖放右下、不壓字 */
.stg-ov .wide{grid-column:span 2}
.stg-ov a:not(.big) img{width:32%;max-width:120px;right:6px;bottom:6px;opacity:.9}
.stg-ov a:not(.big) p{max-width:64%}
.stg-ov .wide p{max-width:70%}
/* 深層頁（目錄、材質）標頭精簡 */
.stg-head.compact{padding-bottom:10px;margin-bottom:12px}
.stg-head.compact h1{font-size:clamp(22px,2vw,30px)}
.stg-head.compact .stg-eyebrow{margin-bottom:6px}
/* 平板：頂列改兩列（名稱／語言＋分頁），框內可捲動 */
@media (max-width:1100px){
  :root{--top-h:100px}
  .stg-top{grid-template-columns:1fr auto;grid-template-rows:56px 44px;gap:0 12px}
  .stg-tabs{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .stg-scroll.flex{display:block;overflow:auto}
  .stg-ld{height:calc(100% - 120px);min-height:420px}
  .stg-ov{grid-auto-rows:minmax(170px,auto)}
}
/* 手機：熱點說明卡改放在圖下方、全寬 */
@media (max-width:767px){
  .stg-hot .tip{position:relative;left:auto!important;right:auto!important;top:auto!important;width:100%;margin-top:8px}
  .stg-ov .wide{grid-column:auto}
  .stg-ov a:not(.big) p,.stg-ov .wide p{max-width:68%}
  .stg-ld{height:auto;min-height:0}
}
.stg-ov a:not(.big):not(.wide) p{font-size:12.5px;line-height:1.6}