/* ═══════════════════════════════════════════════════════════════════════
   page-chrome.css ── 內頁共用外殼（header／footer／版面基元）唯一正本
   建立 2026-07-31（su 拍板「現在就抽共用」，避免 monitor／about 各複製第三份）

   【適用範圍】內頁：plant.html／monitor.html／about.html
   【不適用】index.html —— 首頁 footer 已與內頁分歧（多 .site-footer::before
      等首頁專用處理，見 index.html:551-735），刻意不併入，勿把本檔 link 進首頁。

   【內容來源】全數平移自 plant.html（2026-07-24 建置、07-30 驗收通過的版本），
      值逐條照抄未改，行號標於各區塊。改內頁 header／footer 只動這支＝三頁同步。

   【載入順序】tokens.css → fonts.css → components.css → 本檔 → 頁內 <style>
      （須在 tokens 後：--nav-h 覆寫 tokens 預設 80px）
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════ 轉場旋鈕與版面基元（來源 plant.html:28-53）══════════ */
:root{
  /* ── Header 浮島→歸位轉場旋鈕（完整移植自 index.html :root，JS 會覆寫，此為初值避免 FOUC）── */
  --nav-h: 67px;                /* 覆寫 tokens.css 預設 80px，對齊首頁 docked 實際高度 */
  --p:0;                        /* 0=浮島 1=docked（歸位滿寬實底）*/
  --brand-ink:0;                /* 0=白字 1=墨字 */
  --island-top:38;              /* 島態上緣下推 */
  --island-side:38;             /* 島態左右加大 inset */
  --pill-radius:34;             /* 膠囊圓角 */
  --pill-alpha:1;               /* 膠囊白底不透明度(島態) */
  --pill-pad-x:12;              /* 膠囊左右內距(島態) */
  --pill-pad-y:12;              /* 膠囊上下內距(島態) */
}
*,*::before,*::after{ box-sizing:border-box; }
/* ⚠ 這裡曾短暫加過 html{scrollbar-gutter:stable} 來防 lightbox 鎖捲時的水平位移，已於同日移除：
   它是全域且永久生效，會讓經典捲軸環境下整頁內容永久右縮一個捲軸寬（實測 1920→1905），
   等於拿「永久視覺差異」換「暫時狀態不位移」——代價不對稱。
   正解＝補償只在燈箱開啟期間施加（見 lightbox.css 的 html.lb-lock 規則組）。 */
body{
  margin:0; overflow-x:clip;    /* clip 不用 hidden：hidden 令 body 成 scrollport、後代 sticky 失黏（frontend-pitfalls）*/
  padding-top:var(--nav-h);     /* 內頁 header 為 fixed docked，內容需讓出高度 */
}
h1,h2,h3{ font-family:var(--font-serif); line-height:var(--lh-title); margin:0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--wrap-px); }
.block{ position:relative; padding:92px 0 108px; }
.sec-h{ font-family:var(--font-serif); font-size:clamp(26px,4vw,42px); font-weight:700; color:var(--c-ink); }
.sec-rule{ display:block; width:54px; height:5px; border-radius:var(--r-full); background:var(--c-primary); margin:14px 0 4px; }
.card{ border-radius:var(--r); background:var(--c-bg); box-shadow:var(--paper-lift); padding:22px 24px; position:relative; border:0; }

/* ═══════ 主段標 plan-b：Comfortaa 巨字英文 → 中文小副標 → 全寬細線 ═══════
   2026-08-27 su 拍板「三頁一起改」而搬進共用檔。動機＝su 08-03 對內頁的評語
   「跟首頁差太遠、不連貫」，在段標這層一直沒落地：首頁 07-14 就改用本系統
   （`Sites`／`History`），三支內頁卻還停在上面那組 .sec-h + .sec-rule 紫短棒。
   `DESIGN.md §5` 已把本系統寫成「段標正解」，故此處是補上落差、不是新設計。

   值逐條照抄 index.html:164-166,231-238（該檔為 canonical，未改任何數字）：
   巨字 clamp(52px,8vw,108px)/line-height .96／中文副標 clamp(18px,1.6vw,20px)＋珊瑚圓點／
   全寬 1px 線 opacity .50。⚠ 珊瑚圓點是「段落標記語言」不是裝飾（07-14 su 拍板 A）。
   ⚠ 英文巨字屬 su 拍板保留的 accent（`DESIGN.md §2`），不受「顯示層不出現英文」鐵則約束。
   ⚠ 不搬 index 的 `data-qenter`：那是首頁專屬的進場控制器，內頁走 [data-cut]。
   ⚠ .sec-h／.sec-rule 保留未刪——次級段標（如 plant「相關核電廠」22px）仍用它，
     首頁本身也是兩套並存，這是有意的兩層階梯，不是殘留。 */
.sec-head{ margin-bottom:clamp(28px,4vw,44px); }
.sec-head .mh-en{ font-family:var(--en-round); font-weight:700; text-transform:none; color:var(--c-ink);
  line-height:.96; letter-spacing:.005em; font-size:clamp(52px,8vw,108px); margin:0; }
.sec-head .mh-zh{ font-family:var(--font-serif); font-weight:500; color:var(--c-eyebrow); letter-spacing:.05em;
  font-size:clamp(18px,1.6vw,20px); margin:18px 0 0; white-space:nowrap;
  display:flex; align-items:center; gap:10px; }
.sec-head .mh-zh::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--c-coral); }
.sec-head .mh-line{ display:block; width:100vw; margin-left:calc(50% - 50vw); height:1px; background:var(--c-ink); opacity:.50; margin-top:22px; }

/* Breadcrumb（來源 plant.html:54-58；線稿定錨各內頁皆有此列，故列入共用）*/
.crumb{ padding:18px 0 6px; font-size:13px; color:var(--c-sub); }
.crumb a{ color:var(--c-text); text-decoration:none; }
.crumb a:hover{ color:var(--c-coral); }
.crumb .sep{ margin:0 8px; opacity:.5; }

/* ══════════ HEADER：拱形＋浮島→docked morph＋hover 膠囊（來源 plant.html:55-91）══════════
   內頁差異（su 拍板）：①無 scroll-spy is-active 態（單頁無段落可捲入）；②無手機漢堡 bottom sheet（本站桌機專用提案期，
   ≤768 直接隱藏 nav-menu，沿用原簡化 nav.css 的既有行為，不新增漢堡）；③捲動驅動改單純 window scroll（見 page-chrome.js，
   不搬 index 專屬的 Lenis/cut/scrollytelling 控制器）。 */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:80; height:var(--nav-h); }
.nav-arch{ position:absolute; top:0; left:0; width:100%; height:220px; pointer-events:none; will-change:filter; opacity:var(--p); }
.nav-arch path{ fill:var(--c-page-bg); }
#archStroke{ fill:none; stroke:var(--c-primary-dark); stroke-width:1.6; stroke-opacity:.30; stroke-linecap:round; }
.nav-inner{
  position:relative; z-index:2; height:var(--nav-h);
  max-width:var(--maxw); margin:0 auto;
  padding-inline:calc(var(--wrap-px) + (1 - var(--p)) * var(--island-side) * 1px);
  transform:translateY(calc((1 - var(--p)) * var(--island-top) * 1px));
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ font-family:var(--font-serif); font-weight:700; font-size:calc(20px + (1 - var(--p)) * 4px); letter-spacing:.02em; white-space:nowrap;
  color:color-mix(in srgb, var(--c-ink) calc(var(--brand-ink) * 100%), #fff);
  text-decoration:none;
  text-shadow:0 1px 2px rgba(30,25,20, calc((1 - var(--p)) * .42)); }
.nav-pill{
  background:color-mix(in srgb, #fff calc((1 - var(--p)) * var(--pill-alpha) * 100%), transparent);
  border-radius:calc((1 - var(--p)) * var(--pill-radius) * 1px);
  padding:calc((1 - var(--p)) * var(--pill-pad-y) * 1px) calc((1 - var(--p)) * var(--pill-pad-x) * 1px);
}
.nav-menu{ display:flex; gap:0; list-style:none; margin:0; padding-inline:0; }
.nav-menu a{ position:relative; display:inline-flex; align-items:center; isolation:isolate; overflow:hidden; padding:8px 18px; border-radius:999px;
  font-family:var(--font-serif); font-size:15px; font-weight:500; color:var(--c-text); text-decoration:none; opacity:.94;
  transition:opacity .2s ease, color .25s ease; }
/* nav hover：膠囊·由左滑入（07-12 su 校台定稿移植）；::after 需 pointer-events:none 避免攔截鄰項點擊（frontend-pitfalls） */
.nav-menu a::after{ content:""; position:absolute; inset:0; width:100%; z-index:-1; pointer-events:none;
  border-radius:999px;
  background:color-mix(in srgb, var(--c-coral) 6%, transparent);
  transform:translateX(-101%); opacity:1;
  transition:transform 310ms cubic-bezier(.4,0,.2,1), background-color .2s ease; }
.nav-menu a:hover{ opacity:1; color:var(--c-ink); }
.nav-menu a:hover::after{ transform:translateX(0); }
@media (max-width:768px){
  .nav-menu{ display:none; } .nav-pill{ display:none; }
  /* header 上移（su 2026-08-26 三案比較選 B）：島態下推 38 → 16，brand 上緣 51px → 29px。
     38 在手機上讓 header 像漂在半空（右側 nav 已隱藏、只剩一行孤字）；0 又貼死上緣、
     浮島感消失且容易被 iOS Safari 狀態列與瀏海壓到。16 兩者取中。
     ⚠ 只影響首屏島態；捲動後 --p→1 進 docked 貼頂實底，該狀態不吃這個值。 */
  :root{ --island-top:16; }
  /* Logo 左移靠齊（su 2026-08-26 於 Figma 14399:1130 標註）：島態的 --island-side:38 會把
     header 內容比 .wrap 多推 38px，桌機因為右側 nav-pill 對稱、讀起來是刻意的浮島 inset；
     但窄版 nav-pill 是 display:none，只剩 brand 被推著，就變成「logo 沒對齊內容」。
     實測三斷點 brand 都比 h1／麵包屑右偏 38px。窄版歸零即與 .wrap 同欄。
     ⚠ 只動 --island-side 不動 --island-top：su 說的是「左移」，垂直位置維持島態下推。 */
  .site-header > *{ --island-side:0; }
}

/* ══════════ FOOTER（來源 plant.html:410-456；本體移植自 index.html canonical 583-735）══════════ */
.site-footer{ position:relative; background:var(--c-bg-soft); padding:152px 0 32px; margin-top:-64px; overflow:hidden; }   /* 07-24 對齊首頁幾何（padding-top 152＋margin-top -64）：間距零手感差＋TOP 按鈕淨空 32px 不撞 */
/* ── 布幕揭露：footer 釘視窗底(z0)藏在內容後，捲到頁底 clip-path 由下往上拉開（同 index）── */
/* .page-body＝內頁內容層通用類（2026-07-31 抽共用時由 .page-plant 泛化，值未改；各內頁 <main> 需帶此 class）*/
.page-body{ position:relative; z-index:1; background:var(--c-page-bg);
  border-radius:0 0 44px 44px; }   /* 內容 z1+實底才蓋得住 fixed footer */

/* ═══════ 內容層下緣收邊：左下／右下 44px ═══════
   2026-08-27 su 指出「footer 上方那塊三頁都該有圓角，為什麼不是共用規則」——確實該是，這裡補上。
   歷史成因＝這條原本只寫在 `plant.html:201` 的 `.block.band-tail`（07-24 plant 建置時就地寫），
   而 page-chrome.css 是 07-31 才抽出來的；那次搬了 header／footer／版面基元／breadcrumb，
   漏了這條（與段標系統同一次遺漏）。monitor／about 於是一直是直角切齊 footer。

   ⚠ **白底是收邊的一部分，不是可選項**——這點我第一版判斷錯、實測才修正：
     `.page-body` 的地色與 footer 底色**都是 #f4f5fb**，圓角切在同色上完全看不見。
     plant 之所以看得到圓角，是因為它末段 .band-tail 帶白底、與 footer 有明度差。
     所以「白帶＋下緣圓角」要一起當成同一個收邊語言搬過來，三頁末段都掛 .band-tail。
   ⚠ .page-body 仍給圓角＝保險層：末段若哪天沒掛 .band-tail，至少內容層自己收得住邊。
     不用 overflow:hidden，那會裁掉段標的 100vw 全幅線。
   值 44px＝與 hero 下緣同一個圓角語言（index.html:335 canonical，su 07-14 拍板）。 */
.block.band-tail{ background:var(--c-bg); border-radius:0 0 44px 44px; }
body.footer-curtain .site-footer{ position:fixed; left:0; right:0; bottom:0; z-index:0; will-change:clip-path; }
#footerSpacer{ width:100%; height:0; pointer-events:none; }
.footer-bg-layer{ position:absolute; z-index:0; pointer-events:none; max-width:none !important; user-select:none; }
.footer-bg-back{ width:130%; left:-15%; bottom:-10%; opacity:.34; filter:blur(18px) saturate(90%); }
.footer-bg-front{ width:118%; left:-9%; bottom:-16%; opacity:.40; filter:blur(12px) saturate(94%); }
.footer-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(244,245,251,.10) 0%, rgba(244,245,251,.18) 25%, rgba(244,245,251,.78) 50%, rgba(244,245,251,.85) 100%); }
.footer-wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding-inline:var(--wrap-px); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:0 96px; }
.footer-identity{ max-width:34ch; }
.footer-org-name{ font-family:var(--font-serif); font-weight:700; font-size:clamp(26px,2.4vw,36px); line-height:1.3; color:var(--c-ink); margin:0 0 20px; }
.footer-org-name a{ color:inherit; text-decoration:none; }
.footer-tagline{ font-family:var(--font-sans); font-size:14px; line-height:1.75; color:var(--c-sub); margin:0; }
.footer-index{ display:flex; flex-direction:column; }
.footer-nav-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.footer-nav-list a{ position:relative; display:inline-block; font-family:var(--font-sans); font-weight:500; font-size:15px; color:var(--c-text); text-decoration:none; transition:color .2s ease; }
.footer-nav-list a::after{ content:''; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:color-mix(in srgb, var(--c-coral) 75%, var(--c-ink) 25%); transition:right .25s ease; }
.footer-nav-list a:hover{ color:color-mix(in srgb, var(--c-coral) 75%, var(--c-ink) 25%); }
.footer-nav-list a:hover::after{ right:0; }
.footer-contact-list{ list-style:none; margin:40px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-contact-list li{ font-family:var(--font-sans); font-size:13px; line-height:1.75; color:var(--c-sub); }
.footer-contact-list a{ color:var(--c-text); text-decoration:none; transition:color .2s ease; }
.footer-contact-list a:hover{ color:color-mix(in srgb, var(--c-coral) 75%, var(--c-ink) 25%); }
.footer-bottom{ margin-top:64px; font-family:var(--font-sans); font-size:12px; color:var(--c-sub); }
.footer-back-top{ position:absolute; top:-56px; right:var(--wrap-px); display:inline-flex; align-items:center; gap:6px;
  padding:9px 16px; border:1px solid var(--c-text); border-radius:var(--r-full); background:transparent; color:var(--c-text);
  font-family:var(--font-sans); font-size:12.5px; font-weight:600; letter-spacing:.02em; line-height:1; cursor:pointer;
  appearance:none; transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease; }
.footer-back-top svg{ width:12px; height:12px; flex-shrink:0; }
.footer-back-top:hover{ background:var(--c-text); color:var(--c-bg-soft); transform:translateY(-2px); }
.footer-back-top:focus-visible{ outline:2px solid var(--c-text); outline-offset:2px; }
@media (max-width:768px){
  .site-footer{ padding:128px 0 28px; }   /* 對齊首頁 @media footer padding */
  .footer-grid{ grid-template-columns:1fr; gap:48px 0; }
  .footer-identity{ max-width:none; }
  .footer-bottom{ margin-top:48px; }
  .footer-back-top{ top:-40px; padding:7px 13px; font-size:12px; }
}
@media (max-width:480px){
  .footer-org-name{ font-size:24px; }
  .footer-bg-back{ width:190%; left:-45%; opacity:.48; }
  .footer-bg-front{ width:170%; left:-35%; opacity:.55; }
}

/* ══════════ 共用掛勾（來源 plant.html:458-470）══════════ */
/* 圖片載完淡入（2026-07-30，防素材讀取斷裂觀感）*/
img[data-fade]{ opacity:0; transition:opacity .45s ease; }
img[data-fade].is-loaded{ opacity:1; }
@media (prefers-reduced-motion:reduce){ img[data-fade]{ opacity:1; transition:none; } }

/* 段落進場 cut reveal（2026-08-26 自 monitor.html:85-96 抽共用，三支內頁通用）
   su 2026-07-31 拍板：A 案整篇淡入上浮＋每個 cut 各自獨立觸發。
   調性＝ease-out 收尾、**無回彈**（overshoot 會廉價化紙雕調性）——08-26 su 覆核維持，
   刻意不採首頁段標 [data-qenter] 的 back.out(1.9) Q 彈手感，內外頁在此有意不同。
   ⚠ 動的是外層容器，**刻意不碰 img 自己的 opacity**——圖片已有上方 img[data-fade]
     「載完淡入」機制，兩套若打在同一屬性上會互相蓋掉。
   顆粒度由標記決定：monitor 下在每篇 .art、about／plant 下在 section.block。
   .js-reveal 由各頁 <head> 前置腳本掛上；無 JS／reduce-motion 時不掛＝直接終態。
   觀察器正本＝page-chrome.js 末段。 */
.js-reveal [data-cut]{ opacity:0; transform:translateY(24px);
  transition:opacity .6s ease-out, transform .6s ease-out; }
.js-reveal [data-cut].is-in{ opacity:1; transform:none; }   /* 終態清掉 transform，不留 containing block */
.js-reveal [data-cut].is-instant{ transition:none; }        /* 進站時已在視窗內者：直接到位不播動畫 */
@media (prefers-reduced-motion:reduce){
  .js-reveal [data-cut]{ opacity:1; transform:none; transition:none; }
}

/* Lenis 平滑捲動基礎樣式（2026-07-30，捲動阻尼）
   ⚠ .lenis-smooth 的 scroll-behavior:auto 是必要的——tokens.css:123 有全域 scroll-behavior:smooth，
   不覆寫掉會與 Lenis 每幀寫入捲軸互打（同 index.html:1673 的「卡頓真兇」因果）。
   ⚠ .lenis-stopped{overflow:hidden} 在內頁是安全的（內頁無 cut takeover，只有 lightbox 會 stop）；
   但抽掉捲軸寬會造成整頁水平位移 → lightbox.js 開啟時補 --sbw 補償，見該檔。
   首頁 index.html 刻意不寫這條（cut 期間會整頁位移），勿把本檔 link 進首頁。*/
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-smooth iframe{ pointer-events:none; }


/* ══════════ 手機漢堡 ＋ 置底 Bottom Sheet（2026-08-26 自 index.html:122-153/213 抽共用）══════════
   su 2026-08-26 指示「內頁的漢堡補上、跟首頁同步」。
   ⚠ 這推翻本檔第 52 行記載的舊拍板「內頁無手機漢堡 bottom sheet（本站桌機專用提案期）」——
     該前提已不成立（現在三支內頁都在做真 RWD），舊註記留著但以本區塊為準。
   數值逐條照抄首頁，未做任何調整，確保兩邊手感一致。
   sheet 是頁面級 fixed 疊層、**不在 .site-header 祖鏈內**，才不會碰到 navArch 弧與 --p 的
   island/docked morph（首頁那條註解已載明，內頁沿用同一結構）。
   backdrop z78（低於 header z80）→ 開啟時再點漢堡仍可收合；sheet z200 疊最上。 */
.mobile-nav-toggle{
  display:none;   /* 桌機隱藏；@768 改 flex */
  width:44px; height:44px; flex:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:0; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent;
  border-radius:50%;
  /* 島態(--p=0)白正圓膠囊底，docked(--p=1)化開透明，跟 .nav-pill 同一套 --p 公式 */
  background:color-mix(in srgb, #fff calc((1 - var(--p)) * 100%), transparent);
}
.mobile-nav-toggle span{ display:block; width:21px; height:2px; border-radius:2px; background:var(--c-text);
  transition:transform .32s cubic-bezier(.34,1.2,.4,1), opacity .2s ease; }
.mobile-nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mobile-nav-toggle.is-active span:nth-child(2){ opacity:0; }
.mobile-nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mnav-backdrop{ position:fixed; inset:0; z-index:78; background:rgba(38,32,25,.34);
  opacity:0; pointer-events:none; transition:opacity .3s ease; }
.mnav-backdrop.is-open{ opacity:1; pointer-events:auto; }
.mnav-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--c-bg); border-radius:26px 26px 0 0; box-shadow:0 -12px 30px rgba(42,39,35,.20);
  padding:10px 22px calc(34px + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .4s cubic-bezier(.32,.92,.35,1); }
.mnav-sheet.is-open{ transform:translateY(0); }
.mnav-handle{ width:38px; height:5px; border-radius:var(--r-full); background:var(--c-line); margin:8px auto 20px; cursor:grab; }
.mnav-list{ list-style:none; margin:0; padding:0; }
.mnav-list a{ display:flex; align-items:center; min-height:56px;
  font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--c-ink);
  text-decoration:none; border-bottom:1px solid var(--c-line-2); }
.mnav-list li:last-child a{ border-bottom:0; }

/* ⚠ 這個 @media 必須放在上方基礎樣式**之後**：.mobile-nav-toggle 的 display:none 與這裡的
   display:flex 特異性相同，靠順序決勝。08-26 我先把顯示規則寫在檔案上方第 87 行那個
   @media 裡、基礎樣式卻 append 在檔尾，結果 none 反而後到、漢堡在窄版永遠不可見
   （Playwright 報 element is not visible）。同理日後再追加漢堡相關規則也要接在這之後。 */
@media (max-width:768px){
  .mobile-nav-toggle{ display:flex; }   /* ≤768 顯示漢堡（取代橫列 nav）*/
}