/* 首頁（深色、沉浸式 3D）：照 首頁試做_沉浸式3D\SAWA_首頁_沉浸式3D試做_v4b.html，從開場到頁尾全部深色。
   試做檔的 class 加上 h-／st- 前綴，避免和 site.css 的 .card、.btn、.wrap 衝突；其他頁面維持 site.css 的淺色便當格。
   版面狀態：html.gl＝3D 舞台；html.no-js（沒有 JS）或 html.nogl（瀏覽器不支援 WebGL）＝產品照片清單。 */
body.home{overscroll-behavior-x:none;--hac:#ff5a2e;--hac2:#ff7a55;--hink:#f2f2f4;--hmute:#a4a6b0;--hline:rgba(255,255,255,.12);--hpanel:#15161b;background:#09090c;color:var(--hink);overflow-x:clip}
html:has(body.home){background:#09090c;overflow-x:clip;overscroll-behavior-x:none}
.home a{color:inherit}
.home :focus-visible{outline-color:var(--hac2)}
/* 導覽列：沿用全站的 header，固定在上方、深色半透明 */
.home>header{position:fixed;top:0;left:0;right:0;z-index:20;padding:14px 0;pointer-events:none}
.home .head{pointer-events:auto;background:rgba(14,15,19,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px -14px rgba(0,0,0,.5);color:var(--hink)}
.home .head nav a{color:#d6d7dd}
.home .head nav a:hover,.home .head nav a[aria-current="page"]{background:rgba(255,255,255,.08);color:#fff}
.home .head .btn.ac{background:#c63d21;color:#fff}
#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;opacity:0;touch-action:pan-y}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 55% 45%,transparent 45%,rgba(0,0,0,.6) 100%);opacity:0}

/* 開場：晶圓日蝕 */
#intro{position:relative;height:200vh;z-index:2;pointer-events:none}
.eclipse{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#1b1d24 0,#0c0d11 52%,#050507 100%)}
.eclipse::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:radial-gradient(ellipse at 50% 45%,#000 0,rgba(0,0,0,.5) 45%,transparent 75%);mask:radial-gradient(ellipse at 50% 45%,#000 0,rgba(0,0,0,.5) 45%,transparent 75%)}
.eclipse::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(to bottom,transparent,rgba(255,90,46,.07),transparent);animation:hscan 6s linear infinite}
@keyframes hscan{to{top:110%}}
.disc{width:min(58vh,72vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 30%,#2b2e36 0,#121318 48%,#060608 100%);color:#fff;box-shadow:0 0 0 2px #ff5a2e,0 0 22px 3px rgba(255,90,46,.6),0 0 80px 18px rgba(255,110,70,.2),0 0 220px 70px rgba(255,255,255,.05),inset 0 0 60px rgba(255,90,46,.08);display:grid;place-items:center;text-align:center;position:relative;will-change:transform}
.disc::after{content:"";position:absolute;inset:-6%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.22) 0 1deg,transparent 1deg 6deg);mask:radial-gradient(circle,transparent 62%,#000 63%,#000 70%,transparent 71%);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%,#000 70%,transparent 71%)}
.disc .mark{margin:0;font-size:clamp(28px,5vw,56px);letter-spacing:.08em;font-weight:900;line-height:1.2}
.disc .mark b{color:#ff5a2e;text-shadow:0 0 18px rgba(255,90,46,.7)}
.disc .mark+p{margin:8px 0 0;font-size:clamp(11px,1.3vw,13px);letter-spacing:.32em;color:#9fa3ad}
.disc.big{box-shadow:none!important}.disc.big::after{display:none}.disc.big>div{opacity:0;transition:opacity .2s}
.corner{margin:0;position:absolute;bottom:9vh;font-size:12px;color:#8b8d96;letter-spacing:.08em;line-height:1.7}
.corner b{display:block;color:#f2f2f4;font-size:14px;letter-spacing:.02em}
.corner.l{left:6vw}.corner.r{right:6vw;text-align:right}
.hint{margin:0;position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);font-size:12px;color:#c9cad1;border:1px solid rgba(255,255,255,.14);padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.05);white-space:nowrap}
.lead{position:absolute;top:calc(50% + min(29vh,36vw) + 26px);left:50%;transform:translateX(-50%);text-align:center;width:min(640px,88vw)}
.lead h1{margin:0;font-size:clamp(20px,2.6vw,30px);font-weight:900;line-height:1.3;color:#f2f2f4}
.lead h1 span{color:#ff5a2e}

/* 產品舞台：捲動距離＋固定位置的卡片 */
#stops{position:relative;z-index:3;height:340vh;pointer-events:none}
.st-head{position:absolute;width:1px;height:1px;clip-path:inset(50%);white-space:nowrap;margin:0}
.st-card{position:fixed;left:max(4vw,24px);top:50%;transform:translateY(-46%);width:min(390px,86vw);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s,transform .45s,visibility 0s .45s;z-index:5;background:rgba(255,255,255,.96);color:#141417;border-radius:20px;padding:22px 24px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.st-card.on{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%);transition:opacity .45s,transform .45s,visibility 0s}
.st-card .no{margin:0;font-size:11px;letter-spacing:.24em;color:#b2361a;font-weight:700}
.st-card .no em{font-style:normal;color:#55555d}
.st-card h3{margin:8px 0 2px;font-size:clamp(28px,3vw,40px);line-height:1.1;font-weight:900}
.st-card .en{margin:0;color:#55555d;font-size:13px;letter-spacing:.06em}
.st-card .txt{font-size:14.5px;line-height:1.75;color:#3d3d45;margin:14px 0}
.st-card .pic{display:none;margin:12px 0 0}
.h-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.h-tags li{font-size:11.5px;border:1px solid #c3beb3;color:#4a4a52;border-radius:7px;padding:3px 9px;background:#fff}
.h-tags li.hot{border-color:rgba(200,64,31,.5);color:#b2361a}
.h-acts{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.h-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font:inherit;font-size:13.5px;font-weight:700;padding:10px 16px;border-radius:11px;border:1px solid #cfccc4;background:#fff;color:#141417;cursor:pointer;text-decoration:none}
.home a.h-btn{color:#141417}
.h-btn:hover{border-color:#c23a1b}
.h-btn.pri,.home a.h-btn.pri{background:#c23a1b;border-color:#c23a1b;color:#fff}
.h-feat{display:inline-block;margin-left:8px;font-size:11px;padding:3px 9px;border-radius:99px;background:#c23a1b;color:#fff;letter-spacing:.08em;vertical-align:middle;font-weight:700}
.h-spec{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
/* 放大檢視：規格摘要 */
.h-detail{position:fixed;right:max(4vw,24px);top:50%;transform:translateY(-50%) translateX(20px);width:min(360px,86vw);background:rgba(255,255,255,.9);color:#141417;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.06);box-shadow:0 20px 50px -20px rgba(0,0,0,.3);border-radius:18px;padding:20px 22px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,transform .4s,visibility 0s .4s;z-index:6}
.h-detail.on{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%);transition:opacity .4s,transform .4s,visibility 0s}
.h-detail h2{margin:0 0 4px;font-size:13px;letter-spacing:.2em;color:#b2361a}
.h-detail .nm{margin:0 0 10px;font-size:18px;font-weight:900}
.h-detail dl{margin:0;display:grid;grid-template-columns:92px 1fr;gap:9px 12px;font-size:13.5px}
.h-detail dt{color:#55555d}.h-detail dd{margin:0}
.h-detail .note{font-size:12px;color:#55555d;margin:12px 0 0}
.h-detail .note a{color:#b2361a;font-weight:700;display:inline-flex;align-items:center;min-height:44px}
.h-detail .drag{font-size:12px;color:#55555d;margin:10px 0 0}
.h-back{position:fixed;top:100px;left:50%;transform:translateX(-50%);z-index:7;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}
.h-back.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s,visibility 0s}
.stage-zoom #gl{touch-action:none}
.stage-zoom .lead,.stage-zoom .corner,.stage-zoom .hint{visibility:hidden}
.gl .h-detail{top:auto;left:16px;right:16px;bottom:16px;width:auto;max-width:600px;max-height:60vh;overflow:auto;margin:auto;padding:0 16px 12px;transform:none}
.gl .h-detail.on{transform:none}
.gl .h-detail:not(.expanded){padding-bottom:0;overflow:hidden}
.gl .h-detail:not(.expanded)>:not(.spec-toggle){display:none}
.gl .h-detail.expanded>h2{display:none}
.spec-toggle{width:100%;min-height:44px;border:0;background:transparent;color:#b2361a;font:inherit;font-weight:700;text-align:left;cursor:pointer;touch-action:none}
.spec-toggle::after{content:'＋';float:right}
.expanded .spec-toggle::after{content:'−'}
.h-rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.h-rail.on{opacity:1;visibility:visible;transition:opacity .4s,visibility 0s}
.h-rail button{width:24px;height:24px;border:0;background:none;cursor:pointer;padding:0;display:grid;place-items:center}
.h-rail button::before{content:"";width:9px;height:9px;border-radius:50%;background:#5d5d66}
.h-rail button.on::before{background:var(--hac);box-shadow:0 0 0 4px rgba(200,64,31,.25)}
.h-pager{position:fixed;left:max(4vw,24px);bottom:6vh;z-index:6;display:flex;align-items:center;gap:10px;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.h-pager.on{opacity:1;visibility:visible;transition:opacity .4s,visibility 0s}
.h-pager button{width:44px;height:44px;border-radius:50%;border:1px solid #c3beb3;background:#fff;font-size:18px;cursor:pointer;color:#141417}
.h-pager button:hover{border-color:#c23a1b;color:#c23a1b}
.h-pager span{font-size:12.5px;color:#c9cad1}
.h-swipe{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:6;font-size:12px;color:#fff;background:rgba(20,20,23,.78);padding:7px 14px;border-radius:99px;opacity:0;transition:.5s;pointer-events:none;white-space:nowrap}
.h-swipe.on{opacity:1}
.in-stage .qa-launch{opacity:0;pointer-events:none}

/* 結尾：比較表、DM、實績、詢價（深色） */
#outro{position:relative;z-index:4;background:linear-gradient(to bottom,transparent 0,#09090c 18vh);padding:46vh 0 8px}
.h-wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
.h-panel{background:var(--hpanel);border:1px solid rgba(255,255,255,.07);border-radius:22px;padding:28px;color:var(--hink)}
.h-grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.h-grid2.one{grid-template-columns:1fr}
.h-k{margin:0;font-size:11px;letter-spacing:.24em;color:var(--hac2);font-weight:700}
.h-panel h2{margin:8px 0 16px;font-size:26px;line-height:1.3}
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{text-align:left;padding:11px 10px;border-top:1px solid var(--hline);vertical-align:top;background:none}
.cmp thead td,.cmp thead th{border-top:0}
.cmp th{color:var(--hmute);font-weight:600;font-size:12.5px}
.cmp thead th{color:var(--hink);font-size:13px}
.cmp td.c{color:var(--hink)}.cmp td.c b{color:var(--hac2)}
.cmp td.m{color:var(--hmute)}
.h-note{font-size:12px;color:var(--hmute);margin:10px 0 0}
.h-dm{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.h-dm a{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:46px;text-decoration:none;border:1px solid var(--hline);border-radius:12px;padding:10px 14px;font-size:14px;background:#1b1c22}
.h-dm a:hover{border-color:var(--hac)}
.h-dm a span{font-size:12px;color:var(--hmute)}
.h-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:16px 0;padding:0;list-style:none}
.h-stat{background:var(--hpanel);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:20px}
.h-stat b{display:block;font-size:28px;font-weight:900;color:#fff;line-height:1.3}
.h-stat span{font-size:12.5px;color:var(--hmute)}
.h-inq{display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(120deg,#2a1510,#17181c 60%);color:#fff;border:1px solid rgba(255,90,46,.35);border-radius:22px;padding:30px;margin:16px 0}
.h-inq h2{margin:6px 0 0;font-size:28px}
.h-inq .h-btn{border-color:rgba(255,255,255,.2)}
/* 頁尾：沿用全站頁尾，改深色 */
.home .foot{position:relative;z-index:4;margin-top:0;padding-bottom:32px}
.home .foot-grid{background:var(--hpanel);color:#d6d7dd;border:1px solid rgba(255,255,255,.07)}
.home .foot strong{color:#fff}
.home .foot a{color:#e8e8ec}
.home>.wrap{position:relative;z-index:4}

/* 產品照片清單：沒有 JS（no-js）或沒有 WebGL（nogl） */
.no-js #gl,.nogl #gl,.no-js .vig,.nogl .vig,.no-js .h-detail,.nogl .h-detail,.no-js .h-back,.nogl .h-back,.no-js .h-rail,.nogl .h-rail,.no-js .h-pager,.nogl .h-pager,.no-js .h-swipe,.nogl .h-swipe,.no-js .hint,.nogl .hint{display:none}
.no-js #intro,.nogl #intro{height:auto}
.no-js .eclipse,.nogl .eclipse{position:relative}
.no-js #stops,.nogl #stops{height:auto;pointer-events:auto;width:min(1180px,calc(100% - 40px));margin:0 auto;padding:56px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.no-js .st-head,.nogl .st-head{position:static;width:auto;height:auto;clip-path:none;white-space:normal;grid-column:1/-1;font-size:28px;color:var(--hink)}
.no-js .st-card,.nogl .st-card{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;width:auto;transition:none}
.no-js .st-card .pic,.nogl .st-card .pic{display:block}
.no-js .st-card .pic img,.nogl .st-card .pic img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#ddd}
.no-js .h-spec,.nogl .h-spec{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;display:grid;grid-template-columns:84px 1fr;gap:6px 10px;font-size:13px;margin:12px 0 0}
.no-js .h-spec dt,.nogl .h-spec dt{color:#55555d}.no-js .h-spec dd,.nogl .h-spec dd{margin:0}
.no-js [data-zoom],.nogl [data-zoom]{display:none}
.no-js #outro,.nogl #outro{padding-top:56px;background:#09090c}

@media (prefers-reduced-motion:reduce){.eclipse::after{display:none}.st-card,.h-detail{transition:none}}
/* 手機與觸控：不用毛玻璃 */
@media (max-width:760px),(pointer:coarse){.home .head,.st-card,.h-detail{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.home .head{background:rgba(14,15,19,.96)}.st-card{background:#fff!important}.h-detail{background:#fff}}
@media (max-width:760px){
  /* 首頁手機：導覽列收成一列（舞台需要畫面高度）；「聯絡・詢價」已在選單裡，右側詢價鈕先收起 */
  .home>header{padding:8px 0}
  .home .head{flex-wrap:nowrap;border-radius:18px;padding:6px 8px 6px 12px;gap:4px;width:calc(100% - 16px)}
  .home .head .brand img{height:30px}
  .home .head nav{order:0;width:auto;margin-left:auto;justify-content:flex-end;font-size:13px}
  .home .head nav a{padding:0 7px}
  .home .head .btn{display:none}
  .hint{bottom:84px}
  .st-card{left:16px;right:16px;width:auto;top:auto;bottom:18px;transform:translateY(12px);border-radius:18px;padding:16px 18px}
  .st-card.on{transform:none}
  .st-card .txt{font-size:13.5px;margin:8px 0}
  .st-card h3{font-size:28px}
  .h-acts{margin-top:12px}
  .h-detail{left:16px;right:16px;width:auto;top:auto;bottom:18px;transform:none;max-height:calc(100vh - 140px);overflow:auto}
  .h-detail.on{transform:none}
  .h-back{top:76px}
  .h-rail{right:4px}
  .h-pager{left:auto;right:12px;bottom:auto;top:76px}
  .h-pager span{display:none}
  .h-swipe{bottom:auto;top:128px}
  .h-grid2{grid-template-columns:1fr}
  .h-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .h-stat{padding:16px}.h-stat b{font-size:19px}
  .h-inq{flex-direction:column;align-items:flex-start}
  .corner{display:none}
  .h-panel{padding:20px}
  .cmp{font-size:13px}.cmp th,.cmp td{padding:9px 6px}
}

/* 第4段：Lighthouse 色彩對比修正（首頁是深色，沿用淺色頁的 --mu 與連結繼承色會看不清楚）
   頁尾小字與「Cookie 設定」：#5d5d66 對 #15161b 只有 2.77，改用 --hmute（#a4a6b0）
   Cookie 橫幅是白底，裡面的「隱私權說明」連結繼承首頁的淺色字（#f2f2f4 對白底 1.11），改回深色字與站內強調色 */
.home .foot p.small,.home .foot .cookie-settings{color:var(--hmute)}
.home .consent{color:var(--ink)}
.home .consent p a{color:#b2361a}
@media (max-width:760px){
 .qa-launch{right:12px;bottom:12px;width:44px;height:44px;min-height:44px;padding:0;font-size:0}
 .qa-launch::before{content:"?";font-size:22px;line-height:1}
 .qa-avoid-on .qa-launch{visibility:hidden}
 .foot{padding-bottom:68px}
}
/* 2026-11-13 首頁 3D 產品舞台改版（A、E、F；使用者 2026-11-12 23:38 同意）：只在 3D 模式（html.gl）生效，沒有 JS／沒有 WebGL 的產品清單不變。
   A 打開就是第一個產品：拿掉 200vh 捲動開場，舞台固定佔滿一個畫面高（100svh），標題與角落文字留在舞台上方；開場鏡頭落下由 3D 程式處理。
   E 右側圓點、「往下捲動」提示在 3D 模式隱藏（文字不刪）。F 卡片只留產品名、一行說明、兩顆按鈕。
   --stage-bg：舞台底色集中在這裡，背景改色時只改這一處（3D 場景底色在 首頁舞台_v2_繪圖.js 的 0x09090c）。 */
.gl body.home{--stage-bg:#09090c;background:var(--stage-bg)}
.gl #intro{height:0}
.gl .eclipse{position:fixed;inset:0;height:100svh;background:linear-gradient(to bottom,rgba(9,9,12,.82) 0,rgba(9,9,12,.55) 110px,transparent 190px);overflow:visible;pointer-events:none}
.gl .eclipse::before,.gl .eclipse::after,.gl .disc,.gl .hint,.gl .h-rail{display:none}
.gl .lead{top:96px;transform:translateX(-50%);width:auto;white-space:nowrap}
.gl .lead h1{font-size:clamp(16px,1.6vw,22px);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.gl .lead h1 br{display:none}
.gl .lead h1 span{margin-left:.5em}
.gl .corner{bottom:auto;top:96px}
.gl #stops{height:100svh}
.gl .st-card{top:auto;bottom:calc(6vh + 60px);transform:translateY(12px);padding:16px 20px;width:min(380px,86vw)}
.gl .st-card.on{transform:none}
.gl .st-card .no,.gl .st-card .en,.gl .st-card .h-tags,.gl .st-card .h-feat{display:none}
.gl .st-card h3{margin:0;font-size:clamp(22px,2vw,28px)}
.gl .st-card .txt{margin:6px 0 0;font-size:13.5px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl .st-card .h-acts{margin-top:12px;flex-wrap:nowrap}
.gl .h-pager{bottom:6vh}
@media (max-width:760px){
 .gl .lead{top:72px;left:16px;transform:none;text-align:left}
 .gl .lead h1{font-size:15px}
 .gl .st-card{left:12px;right:12px;bottom:12px;width:auto;padding:12px 14px}
 .gl .st-card h3{font-size:21px}
 .gl .st-card .h-btn{flex:1}
 .gl .h-pager{top:66px;bottom:auto}
 .gl .h-swipe{top:122px}
}
/* 2026-11-13 第 2 段退回修正：3D 建好前（約 1～1.5 秒）先用卡片裡現有的產品實品照撐住模型位置，3D 一建好就淡出；卡片與箭頭照常可按，換產品時跟著換照片。
   手機版保留兩個角落文字：放在標題下一行，左右對齊，不擋卡片與箭頭。 */
.gl .st-card .pic{display:block;position:fixed;left:58%;top:52%;transform:translate(-50%,-50%);width:min(34vw,460px);margin:0;pointer-events:none;opacity:1;transition:opacity .6s,visibility 0s}
.gl .st-card .pic img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.gl:not(.st-ready) .st-card{transform:none;transition:opacity .45s,visibility 0s .45s}
.gl:not(.st-ready) .st-card.on{transition:opacity .45s,visibility 0s}
.gl.st-ready .st-card .pic{opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
@media (max-width:760px){
 .gl .st-card .pic{left:50%;top:44%;width:min(72vw,320px)}
 .gl .corner{display:block;top:112px;font-size:11px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
 .gl .corner b{font-size:13px}
 .gl .corner.l{left:16px}.gl .corner.r{right:16px}
 .gl .h-swipe{top:174px}
}
/* 2026-11-13（使用者 16:35）：「放大看 3D」改開全螢幕 3D 剖視圖（產品頁同一份 /assets/3d/<slug>.html，由 首頁舞台_v2.js 按下時才建 iframe）。
   上方一條標題列放產品名與關閉鈕，下方整片給剖視圖；剖視圖自己的旋轉、縮放、剖切按鈕都在 iframe 裡。 */
.h-viewer{position:fixed;inset:0;z-index:40;background:#09090c;display:flex;flex-direction:column;overscroll-behavior:contain}
.h-viewer[hidden]{display:none}
.h-viewer-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,4vw);background:#111216;border-bottom:1px solid rgba(255,90,46,.35)}
.h-viewer-name{margin:0;font-size:15px;font-weight:700;color:#f2f2f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-viewer-close{flex:0 0 auto;min-height:44px;min-width:96px;padding:0 18px;border-radius:11px;border:1px solid #c23a1b;background:#c23a1b;color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.h-viewer-close:hover{background:#d8461f}
.h-viewer-close:focus-visible{outline:3px solid #ffb199;outline-offset:2px}
.h-viewer iframe{display:block;border:0;flex:0 0 auto;transform-origin:0 0;background:#09090c}
body.viewer-open{overflow:hidden}
body.viewer-open .qa-launch{visibility:hidden}
@media (max-width:760px){.h-viewer-bar{padding:6px 10px 6px 14px}.h-viewer-name{font-size:14px}}
/* 2026-11-13（使用者 20:25）：標題「半導體製程」後面那段跟著目前產品換（首頁舞台_v2.js 換字）；換產品時短暫淡出再淡入。
   名稱框寬度由 JS 固定為最長名稱，換字時前半段不左右移動；只在 3D 舞台（.gl）生效，沒有 JS／WebGL 時照原樣。 */
.gl .lead h1 span{display:inline-block;text-align:left;transition:opacity .2s}
.gl .lead h1 span.swap{opacity:0}
@media (prefers-reduced-motion:reduce){.gl .lead h1 span{transition:none}}
/* 360px 以下一行放不下（會壓到右上角箭頭）：在「半導體製程」後面斷行，產品名稱獨立一行；兩行高度仍在角落文字（top 112px）上方 */
@media (max-width:359px){
 .gl .lead h1{line-height:1.25}
 .gl .lead h1 br{display:inline}
 .gl .lead h1 span{margin-left:0}
}
/* 2026-11-13（20:25 要求的連帶修正，Codex 審查必修，採方案 b）：角落兩組數字（1,500 × 1,850 mm、Since 2013）是多孔陶瓷真空吸盤的實績，
   只在舞台停在多孔陶瓷時顯示；換到其他產品時跟標題產品名稱一起淡出，切回多孔陶瓷時淡入。用文字顏色淡出（opacity 已由 JS 控制捲動淡出），
   只在 3D 舞台（.gl）生效，HTML 原始碼與沒有 JS／WebGL 時照原樣。 */
.gl .corner.l,.gl .corner.r,.gl .corner.l b,.gl .corner.r b{transition:color .2s,text-shadow .2s}
.gl .corner.spec-off,.gl .corner.spec-off b{color:transparent;text-shadow:0 1px 8px rgba(0,0,0,0)}
@media (prefers-reduced-motion:reduce){.gl .corner.l,.gl .corner.r,.gl .corner.l b,.gl .corner.r b{transition:none}}

/* 2026-11-13 導覽列 LOGO 與公司名稱放大（使用者 21:44「LOGO跟公司名稱太小」）：首頁同樣改成圖示＋網頁文字橫排（深色底用白字）。
   手機導覽列維持一列（舞台需要畫面高度）：公司名稱 13px、選單左右留白略縮；359px 以下放不下，只留圖示。 */
.home .head .brand{gap:12px;text-decoration:none;color:#f2f2f4}
.home .head .brand img{height:44px;width:auto}
.home .brand-t{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.home .brand-t b{font-size:19px;font-weight:900;letter-spacing:.08em}
.home .brand-t small{margin-top:4px;font-size:10.5px;font-weight:600;letter-spacing:.22em;color:#a4a6b0}
@media (max-width:760px){
 .home .head .brand{gap:6px;min-width:0}
 .home .head .brand img{height:28px}
 .home .brand-t b{font-size:13px;letter-spacing:.04em}
 .home .brand-t small{margin-top:2px;font-size:7.5px;letter-spacing:.14em}
 .home .head nav a{padding:0 5px}
}
@media (max-width:359px){.home .brand-t{display:none}}
/* 2026-11-13（使用者 21:44「點了產品之後產品敘述不見了」）：產品卡片固定在畫面下方，但它所在的舞台區塊（#stops，z-index 3）比下方結尾區（#outro，z-index 4）低一層；
   頁面只要往下捲一點（滾輪縮回後多滾的幾格、或手動捲一點），結尾區的深色漸層就從下面蓋上卡片，程式仍判斷「在舞台上」，卡片看起來被壓扁、變暗。
   舞台區塊提到結尾區上面，卡片在舞台上時一律完整顯示；離開舞台時照原本淡出（此時結尾區文字還在卡片下方，不會被卡片擋到）。 */
.gl #stops{z-index:5}
/* 同上（使用者 23:32「要嘛明確留在舞台、卡片完整顯示，要嘛明確離開」）：標題與角落文字在舞台上時完整顯示，離開舞台那一刻和卡片一起淡出（0.45 秒），之後跟著捲動。 */
.gl .lead{transition:opacity .45s}
.gl .corner.l,.gl .corner.r{transition:color .2s,text-shadow .2s,opacity .45s}
@media (prefers-reduced-motion:reduce){.gl .lead,.gl .corner.l,.gl .corner.r{transition:none}}

/* 2026-11-14 開場標題卡（使用者 09:51「先標題再動畫」）：頁面一打開先蓋一層和舞台同色的深色畫面，中央是 S 標誌與兩行字，
   至少 1.0 秒、最多等 3D 模型 3.0 秒後淡出 0.4 秒，同時開始鏡頭由遠到近（首頁舞台_v2.js 控制）。
   只在 3D 舞台（.gl）、這次瀏覽還沒看過（.intro-seen 由 <head> 讀 sessionStorage 加上）時出現；沒有 JS／WebGL 時不出現。
   2026-11-14 起「減少動態效果」時也出現（使用者 13:39），標題卡後改播簡化版開場（見檔尾 .rm-intro）。
   層級 25：蓋住導覽列（20），Cookie 提示（30）照常在上面。萬一首頁程式沒載到，8 秒後自己淡出（保險）。
   開場期間（還沒加 .intro-end）標題、角落數字、卡片、左右箭頭、滑動提示先藏起來，開場結束或改顯示靜態版時淡入（沿用各自 0.4～0.45 秒過渡）。 */
.tcard{display:none;position:fixed;inset:0;z-index:25;place-items:center;background:radial-gradient(ellipse at 50% 46%,#16171c 0,#09090c 62%);color:#f2f2f4;text-align:center;animation:tcard-safe .4s 8s forwards}
.tcard.out{opacity:0;transition:opacity .4s;pointer-events:none}
.tcard.gone{display:none!important}
@keyframes tcard-safe{to{opacity:0;visibility:hidden}}
.tcard-in{display:flex;flex-direction:column;align-items:center;padding:0 24px}
.tcard img{display:block;width:clamp(52px,5.2vw,80px);height:auto;margin:0 0 clamp(18px,2.2vw,30px)}
.tcard-t{margin:0;font-size:clamp(30px,4vw,60px);font-weight:900;letter-spacing:.08em;line-height:1.2;white-space:nowrap}
.tcard-t span{color:#ff5a2e}
.tcard-s{margin:clamp(10px,1.1vw,16px) 0 0;font-size:clamp(14px,1.45vw,21px);letter-spacing:.16em;color:#b4b6bf;white-space:nowrap}
.gl:not(.intro-seen) .tcard{display:grid}
.gl:not(.intro-seen):not(.intro-end) .lead,.gl:not(.intro-seen):not(.intro-end) .corner,.gl:not(.intro-seen):not(.intro-end) .st-card,
.gl:not(.intro-seen):not(.intro-end) .h-pager,.gl:not(.intro-seen):not(.intro-end) .h-swipe{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* 產品實品照（現有靜態版的一部分）：標題卡流程中，只有改顯示靜態版（逾時或提早略過，.st-wait）或放棄 3D（.st-static）時才出現；
   標題卡蓋住期間與直接推近時不出現，避免標題卡淡出時露出照片。沒有標題卡（同一工作階段返回）時照舊先顯示靜態版。
   2026-11-14 第 2 段退回修正（Codex 必修 2）：靜態版改回含實品照；3D 準備好時 3D 層淡入 0.4 秒、實品照同時淡出 0.4 秒（交叉淡化）。 */
.gl:not(.intro-seen):not(.st-wait):not(.st-static) .st-card .pic{opacity:0;visibility:hidden;transition:none}
.gl.st-wait:not(.st-ready) .st-card .pic{transition:opacity .4s,visibility 0s}
.gl.st-wait.st-ready .st-card .pic{transition:opacity .4s,visibility 0s .4s}
/* 第 2 段第 2 次退回修正（Codex 必修 1、2）：3D 準備好時不交叉淡化，實品照先淡出 0.4 秒、3D 層再淡入（首頁舞台_v2.js 的 PIC_OUT），兩種構圖不重疊；
   減少動態效果時實品照不播淡入淡出，和 3D 層在同一格直接切換。 */
@media (prefers-reduced-motion:reduce){.gl .st-card .pic{transition:none!important}}
/* 整體審查退回修正（Codex 必修）：首次造訪時 Cookie 提示原本（層級 30）蓋在開場標題卡上。首頁 3D 模式下提示改放在標題卡下面（層級 24，仍高於導覽列 20），
   提示照常在第一次繪製就產生（不拖慢 LCP），但被標題卡遮住，標題卡淡出時才一起露出；同意、拒絕、Cookie 設定的功能不變。 */
.gl .consent{z-index:24}
/* 2026-11-14 減少動態效果的簡化版開場（使用者 13:39「先做一段簡化版開場給我看」）：標題卡約 1 秒 → 淡出 0.4 秒（舞台已在下面以定位姿態顯示）→
   標題、角落數字、卡片、箭頭、滑動提示只做 0.4 秒透明度淡入；沒有鏡頭飛行、位移或縮放。.rm-intro 由首頁舞台_v2.js 只在這段開場期間加上，
   約 0.9 秒後（或被略過時立即）拿掉，之後照舊是減少動態效果的「不做過渡」。 */
.gl.rm-intro .lead,.gl.rm-intro .corner.l,.gl.rm-intro .corner.r,.gl.rm-intro .st-card,.gl.rm-intro .st-card.on,.gl.rm-intro .h-pager,.gl.rm-intro .h-swipe{transition:opacity .4s,visibility 0s}
/* 簡化版開場被略過（rmStop）時：.rm-skip 只存在一格，讓標題、角落數字、卡片、箭頭、滑動提示立即到最終狀態（取消進行中的淡入）；產品切換不經過這裡。 */
.gl.rm-skip .lead,.gl.rm-skip .corner,.gl.rm-skip .st-card,.gl.rm-skip .st-card.on,.gl.rm-skip .h-pager,.gl.rm-skip .h-swipe{transition:none!important}