/*
 * 2026-10-02（issue 175）設計系統與全站外框：懸浮膠囊導覽、手機全螢幕選單、頁尾、跳到主要內容、暫停動態按鈕、游標、開場動畫，
 * 以及共用的元件 CSS（按鈕、eyebrow、標題、導言、文字連結、顆粒）。元件類別一律 cf- 前綴，不與內頁沿用的舊 class 衝突；
 * 內頁內容（issue 176）之後再逐步換成這一組。顏色與尺度只引用 design-tokens.css 的變數，這個檔案不出現色碼。
 * 動態分三層：靜態樣式（永遠有效）、@media (prefers-reduced-motion: no-preference) 內的動態、再加上 html:not([data-motion="off"])
 * ——使用者按下「暫停動態」或系統要求減少動態時，data-motion="off"，所有自動播放與位移動畫都不啟動。
 * 隱藏的初始狀態只掛在 html.js:not(.ready) 之下，並附 3 秒後自動顯示的保險動畫，所以 JS 失敗時內容不會一直藏著。
 */

/* ---------- 版面工具 ---------- */
.wrap { width: min(var(--max), 100% - var(--gutter) * 2); margin-inline: auto; }
.dark { color: var(--paper); }
.dark :focus-visible, .site-footer :focus-visible { outline-color: var(--soft); }
.grainy { position: relative; isolation: isolate; }
/* issue 382：深色區段的游標微光。位置讀 --gx／--gy（js/glow.js 只在滑鼠且允許動態時更新）；沒有 JS、觸控、減少動態時就是固定在右上的靜態光暈。
   z-index:-1 落在 .grainy 的堆疊環境內：在區段底色之上、所有內容之下；pointer-events:none 不擋點擊。 */
.hero::before, .site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(25rem circle at var(--gx, 72%) var(--gy, 30%), color-mix(in srgb, var(--cta) 16%, transparent), transparent 70%); }
.grainy::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("../assets/grain.svg"); }

/* ---------- 跳到主要內容 ---------- */
.skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 100; padding: .75rem 1.125rem; border-radius: .75rem; background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; transition: top .3s var(--ease); }
.skip-link:focus { top: 1rem; color: var(--paper); }

/* ---------- 共用元件：eyebrow、標題、導言、連結 ---------- */
.cf-eyebrow { display: inline-flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; color: var(--action); font-size: .75rem; line-height: 1.5; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.cf-eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; }
.dark .cf-eyebrow { color: var(--soft); }
.cf-h-xl, .cf-h-l { margin: 0; font-weight: 900; text-wrap: balance; font-feature-settings: "palt"; overflow-wrap: normal; }
.cf-h-xl { font-size: var(--fs-xl); line-height: 1.02; letter-spacing: -.025em; }
.cf-h-l { font-size: var(--fs-l); line-height: 1.1; letter-spacing: -.02em; }
.cf-lead { max-width: 52ch; margin: 1.5rem 0 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.75; }
.dark .cf-lead { color: var(--muted-on-dark); }
/* issue 189（C5）：文字連結的觸控高度至少 44px（與內頁 .text-link 同一規格）。 */
.cf-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: inherit; font-weight: 700; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.cf-link:is(:hover, :focus-visible) { background-size: 100% 1px; color: inherit; }
.dark .cf-link { color: var(--soft); }

/* ---------- 按鈕：底色由下往上填滿、箭頭往右推 ---------- */
.cf-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3rem; padding: .875rem 1.625rem; border: 0; border-radius: var(--r-pill); background: var(--cta); color: var(--on-accent); font: inherit; font-size: .9375rem; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; transition: box-shadow .45s var(--ease), color .3s; }
.cf-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--paper); transform: translateY(101%); transition: transform .5s var(--ease); }
.cf-btn:is(:hover, :focus-visible) { color: var(--on-accent); box-shadow: 0 .875rem 2.125rem color-mix(in srgb, var(--cta) 40%, transparent); }
.cf-btn:is(:hover, :focus-visible)::before { transform: none; }
.cf-btn .ar { display: inline-block; transition: transform .45s var(--ease); }
.cf-btn:is(:hover, :focus-visible) .ar { transform: translateX(.3rem); }
.cf-btn--ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 40%, transparent); }
.cf-btn--ghost::before { background: color-mix(in srgb, var(--paper) 14%, transparent); }
.cf-btn--ghost:is(:hover, :focus-visible) { color: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 40%, transparent); }
.cf-btn--sm { min-height: 2.75rem; padding: .6875rem 1.125rem; background: var(--ink); color: var(--paper); font-size: .875rem; }
.cf-btn--sm::before { background: var(--cta); }
.cf-btn--sm:is(:hover, :focus-visible) { color: var(--on-accent); box-shadow: none; }
.dark .cf-btn:focus-visible { outline-color: var(--soft); }

/* ---------- 懸浮膠囊導覽 ---------- */
.site-header { position: fixed; inset: .75rem .75rem auto; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .5rem .5rem 1.125rem; border-radius: var(--r-pill); isolation: isolate; transition: translate .6s var(--ease), box-shadow .35s var(--ease); }
/* issue 190：Logo 原色不改，所以膠囊要是真正的白底。78% 半透明疊在深色首屏上會變成一塊灰條，把淺藍 Logo 吃掉；
   改成近乎實白（96%）加細邊與較深的柔和陰影，像一張浮在頁面上的白卡，Logo 依 CI 原樣清楚呈現。 */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 60%, transparent) inset; }
@supports (backdrop-filter: blur(1px)) { .site-header::before { background: color-mix(in srgb, var(--paper) 99%, transparent); backdrop-filter: blur(18px) saturate(1.6); } }
/* 陰影只在捲離頁首頂端後出現（data-scrolled，chrome.js 設定）。陰影畫在 .site-header 本身，收起（data-hidden）時一併拿掉：
   原本陰影分別畫在 header 與 ::before、且收起位移只有 140%，往上滑出後視窗頂端會殘留約 35px 的灰帶。 */
.site-header[data-scrolled]:not([data-hidden]) { box-shadow: 0 .625rem 2.25rem color-mix(in srgb, var(--deeper) 24%, transparent), 0 1px 3px color-mix(in srgb, var(--deeper) 16%, transparent); }
.site-header[data-hidden] { translate: 0 -140%; box-shadow: none; }
/* issue 189（C5）：Logo 的點擊區至少 44px 高（圖本身約 39px），圖垂直置中。 */
.brand { display: flex; flex: 0 0 auto; align-items: center; width: 9.5rem; min-height: 2.75rem; line-height: 1; }
.brand img { display: block; width: 100%; height: auto; }
/* issue 190：寬螢幕放大 Logo（約 176px），提高品牌存在感；981–1200px 的精簡導覽維持原尺寸，導覽仍是單行。 */
@media (min-width: 75.0625rem) { .brand { width: 11rem; } }
.nav-primary { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-end; gap: .5rem; min-width: 0; }
.nav-menu { display: contents; }
.nav-menu ul { margin: 0; padding: 0; list-style: none; }
.nav-menu > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.nav-primary a:not(.nav-cta), .nav-primary summary { color: var(--ink); text-decoration: none; }
.nav-menu > ul > li > a, .nav-menu > ul > li > .nav-group > .nav-top { display: block; padding: .5rem .875rem; border-radius: var(--r-pill); font-size: .875rem; font-weight: 700; white-space: nowrap; transition: background .3s; }
.nav-menu > ul > li > a:is(:hover, :focus-visible), .nav-menu > ul > li > .nav-group > .nav-top:is(:hover, :focus-visible), .nav-disclosure[open] > .nav-toggle { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.nav-menu a[aria-current="page"] { color: var(--action); }
.nav-group { position: relative; display: flex; align-items: center; }
/* issue 425：新文章數徽章（元素由 new-articles.js 建立，沒有 JS 時不存在）。桌機掛在「資安洞察中心」文字後；手機收合時改掛在漢堡鈕右上角（純數字），展開後回到項目旁。不做動畫，所以不需要 reduced-motion 例外。 */
.nb { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: var(--r-pill); background: var(--badge-red); color: var(--paper); font-size: .75rem; font-weight: 700; line-height: 1; letter-spacing: 0; }
.nb-item { margin-inline-start: .375rem; vertical-align: .125em; }
.nb-dot { position: absolute; top: -.25rem; right: -.25rem; min-width: 1.25rem; padding: 0 .25rem; border: 2px solid var(--paper); }
.cf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html.menu-open .nb-dot { display: none; }
@media (min-width: 61.3125rem) { .nb-dot { display: none; } }
/* issue 187：展開器與子選單之間的空隙補一塊看不見的感應區，滑鼠往下移時不會離開群組。 */
@media (min-width: 61.3125rem) { .nav-group:has(> .nav-disclosure[open])::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .75rem; } }
.nav-disclosure { position: static; }
.nav-disclosure > .nav-toggle { display: grid; place-items: center; width: 1.75rem; height: 2.75rem; margin-left: -.5rem; border-radius: var(--r-pill); list-style: none; cursor: pointer; }
.nav-disclosure > .nav-toggle::-webkit-details-marker { display: none; }
.nav-disclosure > .nav-toggle::after { content: ""; width: .4375rem; height: .4375rem; margin-top: -.25rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .35s var(--ease); }
.nav-disclosure[open] > .nav-toggle::after { transform: rotate(225deg); margin-top: .25rem; }
/* issue 292：下拉寬度依內容決定（最小 12rem、最大 17.5rem），品牌名變短後不再顯得過寬。 */
.nav-group .nav-disclosure > ul { position: absolute; top: calc(100% + .625rem); left: 0; z-index: 2; width: max-content; min-width: 12rem; max-width: min(17.5rem, 100vw - 2rem); max-height: 65vh; overflow-y: auto; padding: .5rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--paper); box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--deeper) 22%, transparent); }
.nav-menu > ul > li:nth-last-child(-n+3) > .nav-group .nav-disclosure > ul { left: auto; right: 0; }
.nav-disclosure > ul a { display: block; padding: .625rem .875rem; border-radius: .75rem; font-size: .875rem; font-weight: 600; line-height: 1.5; }
.nav-disclosure > ul a:is(:hover, :focus-visible) { background: var(--wash); }
.nav-group .nav-group .nav-disclosure > ul { position: static; width: auto; max-height: none; padding: .25rem 0 .25rem .75rem; border: 0; border-left: 2px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.site-header .nav-cta { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .6875rem 1.125rem; border: 0; border-radius: var(--r-pill); background: var(--cta); color: var(--on-accent); font-size: .875rem; font-weight: 700; line-height: 1.4; text-decoration: none; white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s; }
.site-header .nav-cta:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--cta) 86%, var(--ink)); color: var(--on-accent); box-shadow: 0 .5rem 1.25rem color-mix(in srgb, var(--cta) 35%, transparent); }
.site-header .nav-cta span { display: inline-block; transition: transform .45s var(--ease); }
.site-header .nav-cta:is(:hover, :focus-visible) span { transform: translateX(.25rem); }
.incident-hotline { display: none; margin: 0 .5rem; color: var(--ink); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
@media (min-width: 87.5rem) { .incident-hotline { display: block; } }

/* 漢堡鈕（只在手機且 JS 就緒時顯示）。 */
.nav-burger { position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; color: var(--ink); cursor: pointer; transition: background .3s; }
/* 漢堡鈕只在手機且 JS 就緒時顯示（見下方 980px 斷點）。 */
.nav-burger { display: none; }
.nav-burger { order: 2; background: var(--ink); color: var(--paper); }
.nav-burger-bars, .nav-burger-bars::before, .nav-burger-bars::after { display: block; width: 1.125rem; height: 2px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease), background .3s; }
.nav-burger-bars { position: relative; }
.nav-burger-bars::before, .nav-burger-bars::after { content: ""; position: absolute; left: 0; }
.nav-burger-bars::before { top: -.375rem; }
.nav-burger-bars::after { top: .375rem; }
html.menu-open .nav-burger-bars { background: transparent; }
html.menu-open .nav-burger-bars::before { top: 0; transform: rotate(45deg); }
html.menu-open .nav-burger-bars::after { top: 0; transform: rotate(-45deg); }

/* 手機（≤980px）：有 JS 時選單收成全螢幕面板，圓形從漢堡鈕擴散；沒有 JS 時不收合，膠囊改成可換行的圓角帶。 */
@media (max-width: 61.25rem) {
  .site-header { flex-wrap: wrap; border-radius: 1.75rem; }
  html.js .site-header { flex-wrap: nowrap; border-radius: var(--r-pill); }
  .nav-primary { flex-wrap: wrap; }
  html.js .nav-primary { flex-wrap: nowrap; }
  .nav-menu > ul { justify-content: flex-end; }
  html.js .nav-burger:not([hidden]) { display: grid; }
  html.js .nav-menu { position: fixed; inset: 0; z-index: -2; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 7.5rem var(--gutter) 2.5rem; overflow-y: auto; background: var(--deeper); color: var(--paper); clip-path: circle(0 at calc(100% - 2.625rem) 2.625rem); visibility: hidden; transition: clip-path .8s var(--ease), visibility 0s .8s; }
  html.menu-open { overflow: hidden; }
  html.js .nav-menu .nb-item { min-width: 1.75rem; height: 1.75rem; margin-inline-start: .625rem; padding: 0 .5rem; font-size: 1rem; vertical-align: .3em; }
  html.menu-open .nav-menu { clip-path: circle(150% at calc(100% - 2.625rem) 2.625rem); visibility: visible; transition-delay: 0s; }
  html.js .nav-menu > ul { display: grid; gap: .375rem; justify-content: stretch; }
  html.js .nav-menu > ul > li > a, html.js .nav-menu > ul > li > .nav-group > .nav-top { padding: .25rem 0; border-radius: 0; background: none; color: var(--paper); font-size: clamp(1.875rem, 8vw, 2.75rem); font-weight: 900; line-height: 1.2; white-space: normal; }
  html.js .nav-menu a:not(.nav-cta), html.js .nav-menu summary { color: var(--paper); }
  html.js .nav-menu a[aria-current="page"] { color: var(--soft); }
  html.js .nav-group { align-items: flex-start; }
  html.js .nav-disclosure { flex: 1; }
  html.js .nav-disclosure > .nav-toggle { margin: .5rem 0 0 .5rem; width: 2.75rem; background: color-mix(in srgb, var(--paper) 10%, transparent); }
  html.js .nav-group { flex-wrap: wrap; }
  html.js .nav-group .nav-disclosure > ul { position: static; width: auto; max-width: none; max-height: none; flex-basis: 100%; padding: .25rem 0 .75rem .75rem; border: 0; border-left: 2px solid var(--deep-line); border-radius: 0; background: none; box-shadow: none; }
  /* issue 189（B4）：第一層的展開器佔滿一整列，子選單才有整個面板的寬度（原本 ul 的 flex-basis 落在窄的 details 裡，子項被擠成右側窄欄）。
     展開鈕改成絕對定位在標籤列右端，標籤右側讓出空間；收合時 details 高度為 0，不多佔一列。 */
  html.js .nav-menu > ul > li > .nav-group { position: relative; padding-right: 3.5rem; }
  html.js .nav-menu > ul > li > .nav-group > .nav-disclosure { flex: 1 0 100%; min-width: 0; }
  html.js .nav-menu > ul > li > .nav-group > .nav-disclosure > .nav-toggle { position: absolute; top: max(0px, calc((clamp(1.875rem, 8vw, 2.75rem) * 1.2 + .5rem - 2.75rem) / 2)); right: 0; margin: 0; }
  html.js .nav-menu > ul > li > .nav-group > .nav-disclosure > ul { margin: .5rem -3.5rem 0 0; }
  html.js .nav-group .nav-disclosure > ul a { color: var(--muted-on-dark); font-size: 1.0625rem; }
  html.js .nav-group .nav-disclosure > ul a:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--paper) 8%, transparent); }
  html.js .nav-menu a:focus-visible, html.js .nav-menu summary:focus-visible { outline-color: var(--soft); }
  html.js .site-header .nav-menu .nav-cta { align-self: flex-start; min-height: 3.25rem; padding-inline: 1.75rem; background: var(--cta); color: var(--on-accent); font-size: 1rem; }
  html.js .incident-hotline { display: block; margin: 0; color: var(--muted-on-dark); font-size: .875rem; white-space: normal; }
}

/* 981–1200px：頂層項目不換行，改用精簡間距與字級，任何寬度導覽膠囊都維持單行（issue 176）。 */
@media (min-width: 61.3125rem) {
  .nav-menu > ul { flex-wrap: nowrap; }
}
@media (min-width: 61.3125rem) and (max-width: 75rem) {
  .site-header { gap: .5rem; padding-left: .875rem; }
  .brand { width: 7.5rem; }
  .nav-primary { gap: .25rem; }
  .nav-menu > ul { gap: 0; }
  .nav-menu > ul > li > a, .nav-menu > ul > li > .nav-group > .nav-top { padding: .5rem .5rem; font-size: .8125rem; }
  .nav-disclosure > .nav-toggle { width: 1.5rem; margin-left: -.4375rem; }
  .site-header .nav-cta { padding-inline: .875rem; font-size: .8125rem; }
  .site-header .nav-cta span { display: none; }
}
/* 沒有 JS 時手機的膠囊會因連結換行而變高（不收合），內容多讓出一截，免得被蓋住。 */
@media (max-width: 61.25rem) {
  html:not(.js) main:not(.home-main) { padding-top: calc(clamp(2.5rem, 6vw, 6rem) + 11rem); }
  html:not(.js) .hero-eyebrow { margin-top: 17rem; }
}
/* 內頁沒有滿版 Hero：讓出膠囊導覽的高度。 */
main:not(.home-main) { padding-top: calc(clamp(2.5rem, 6vw, 6rem) + 4.5rem); }

/* ---------- 頁尾 ---------- */
.site-footer { position: relative; overflow: hidden; padding: 4rem 0 2.5rem; background: var(--deeper); color: var(--muted-on-dark); font-size: .875rem; line-height: 1.75; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem 3rem; padding-top: 3.5rem; border-top: 1px solid var(--deep-line); }
.footer-brand { flex: 0 1 22rem; }
.footer-brand strong { display: block; margin-bottom: .5rem; color: var(--paper); font-size: 1.0625rem; }
.footer-brand p, .footer-trademark { margin: 0 0 .5rem; }
/* issue 207：主要據點的地址與電話（網站設定「公司據點」第一個）。 */
.footer-office { display: grid; gap: .125rem; margin: 0 0 .5rem; font-style: normal; }
.footer-links { flex: 1 1 10rem; }
.footer-links h2 { margin: 0 0 .875rem; color: var(--paper); font-size: .875rem; letter-spacing: 0; }
.footer-links ul { margin: 0; padding: 0; list-style: none; }
.footer-links ul { display: grid; gap: .5rem; }
/* 頁尾網站地圖：欄位與連結由伺服器依主選單輸出。寬螢幕時品牌欄在左、地圖在右；較窄時地圖獨佔一列，
   欄位自動換行（auto-fit），手機兩欄，第一欄（通常是原廠清單，項目最多）橫跨兩欄並分兩直行，避免窄欄裡的詞被硬折。 */
.footer-map { flex: 1 1 max(34rem, calc(100% - 25rem)); display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 2rem 2.5rem; align-content: start; }
.footer-map .footer-links { flex: none; min-width: 0; }
.footer-map .footer-links h2 { margin-bottom: 1rem; color: var(--on-dark-eyebrow); font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
.footer-map .footer-links h2 a { color: inherit; }
.footer-map .footer-links ul { gap: .625rem; }
.footer-map .footer-links li a { font-size: .9375rem; text-wrap: balance; }
/* issue 266：依分類分組的欄（代理與夥伴）：第一組在左，其餘組上下疊在右；小標比欄標題小一級。 */
.footer-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
.footer-group:first-child { grid-row: 1 / span 3; }
.footer-group:not(:first-child) { grid-column: 2; }
.footer-group + .footer-group:not(:nth-child(2)) { margin-top: 1.25rem; }
.footer-group h3 { margin: 0 0 .625rem; color: var(--muted-on-dark); font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
@media (min-width: 64rem) { .footer-map .footer-links--grouped { grid-column: span 2; } }
.footer-policy { margin: 0 0 1rem; }
.footer-policy ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .8125rem; }
@media (min-width: 64rem) {
  .footer-map .footer-links li a { white-space: nowrap; }
  .footer-map .footer-links:has(.footer-split) { grid-column: span 2; }
  .footer-map .footer-split { display: block; columns: 2; column-gap: 2rem; }
  .footer-map .footer-split li { break-inside: avoid; margin-bottom: .625rem; }
}
.site-footer .footer-contact { margin-top: .5rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.5rem; border-radius: var(--r-pill); background: var(--cta); color: var(--on-accent); font-size: .9375rem; font-weight: 800; background-size: auto; }
.site-footer .footer-contact:is(:hover, :focus-visible) { background: var(--paper); color: var(--ink); }
@media (max-width: 30rem) {
  .footer-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .footer-map .footer-links:first-child { grid-column: 1 / -1; }
  .footer-map .footer-links:first-child ul { display: block; columns: 2; column-gap: 1.25rem; }
  .footer-map .footer-links:first-child li { break-inside: avoid; margin-bottom: .625rem; }
  .footer-map .footer-links--grouped .footer-group ul { display: grid; columns: auto; }
  .footer-map .footer-links--grouped .footer-group li { margin-bottom: 0; }
}
.site-footer a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.site-footer a:is(:hover, :focus-visible) { color: var(--paper); background-size: 100% 1px; }
.footer-credentials { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.footer-credentials li { display: flex; align-items: center; gap: .625rem; }
.footer-credentials img { display: block; width: auto; max-width: 8rem; max-height: 2.75rem; padding: .375rem .625rem; border-radius: .625rem; background: var(--paper); }
.footer-wordmark { margin: 4rem 0 0; color: color-mix(in srgb, var(--outline-dark) 14%, transparent); font-family: "Inter Tight", var(--font-body); font-size: clamp(3.5rem, 13.4vw, 15rem); font-weight: 800; letter-spacing: -.035em; line-height: .8; text-align: center; white-space: nowrap; user-select: none; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; font-size: .8125rem; }
.footer-trademarks { max-width: 48rem; }
/* 暫停動態（WCAG 2.2.2）：頁尾底列的文字按鈕；預設 hidden，由 chrome.js 在允許動態時顯示。沒有頁尾時單獨成列（.motion-bar）。 */
.motion-bar { display: flex; justify-content: center; padding: 1rem 0; background: var(--deeper); }
.motion-toggle { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--deep-line); border-radius: var(--r-pill); background: transparent; color: var(--paper); font: inherit; font-size: .8125rem; cursor: pointer; transition: background-color .3s, border-color .3s; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:is(:hover, :focus-visible) { background: var(--deep); border-color: var(--muted-on-dark); }
.motion-toggle:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.motion-toggle-icon { display: block; width: .5rem; height: .75rem; border: solid currentColor; border-width: 0 .1875rem; box-sizing: content-box; }
.motion-toggle[aria-pressed="true"] .motion-toggle-icon { width: 0; height: 0; border-style: solid; border-width: .375rem 0 .375rem .625rem; border-color: transparent transparent transparent currentColor; margin-left: .125rem; }

/* ---------- 開場線條：每個分頁只播一次；沒有 JS、減少動態、暫停動態時不出現 ---------- */
.intro { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; background: var(--deeper); clip-path: inset(0); transition: clip-path 1.1s var(--ease); }
html.js:not(.no-intro) .intro { display: grid; animation: cf-intro-out .01s 2.4s forwards; }
.intro.done { clip-path: inset(0 0 100% 0); pointer-events: none; }
/* issue 392：開場改為 DevaEye 原廠白色標誌眨一下眼（與換頁轉場同一組圖、同一個動作），取代原本像眼睛的兩道弧線。 */
.intro-mark { display: block; width: 11rem; height: 5rem; background: url("../assets/brand/devaeye-mark-line-white.png") center / 11rem 5rem no-repeat, url("../assets/brand/devaeye-mark-arcs-white.png") center / 11rem 5rem no-repeat; animation: cf-intro-blink 1.2s linear .4s both; }
@keyframes cf-intro-blink {
  0% { opacity: 0; background-size: 11rem 5rem, 11rem 5rem; }
  20%, 45% { opacity: 1; background-size: 11rem 5rem, 11rem 5rem; animation-timing-function: ease-in; }
  55%, 60% { background-size: 11.6rem 5rem, 11rem 0.6rem; animation-timing-function: var(--ease); }
  75%, 100% { opacity: 1; background-size: 11rem 5rem, 11rem 5rem; }
}
@keyframes cf-intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }

/* ---------- 跟隨游標：遇到 [data-cur] 放大並顯示字樣；只在 pointer: fine 且允許動態時由 chrome.js 建立 ---------- */
.cur { position: fixed; left: 0; top: 0; z-index: 80; width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem; border-radius: 50%; background: var(--cta); mix-blend-mode: difference; opacity: 0; pointer-events: none; transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s; }
.cur span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-accent); font-size: .75rem; font-weight: 800; letter-spacing: .12em; opacity: 0; transition: opacity .2s; }
.cur.on { opacity: 1; }
/* 放大時變成偏移到游標右下的小膠囊，不蓋住正在指的標題文字（issue 176）。 */
.cur.big { width: 3rem; height: 1.5rem; margin: 1rem 0 0 1.25rem; opacity: .94; border-radius: var(--r-pill); background: var(--cta); mix-blend-mode: normal; }
.cur.big span { font-size: .6875rem; opacity: 1; }
html[data-motion="off"] .cur { display: none; }

/* ---------- 暫停動態／減少動態：不做位移與擴散 ---------- */
html[data-motion="off"] .site-header, html[data-motion="off"] .nav-menu { transition: none; }

/* issue 189：中文標題的片語（Rendering/HeadingPhrases 依全形標點切開）。放得下的片語不拆，行只在片語之間斷；片語比一行長時內部照一般規則換行。 */
.ph { display: inline-block; }

/* issue 178：編輯者在標題輸入的 <br> 只在 768px 以上換行；手機交給平衡斷行，避免孤字行。 */
@media (max-width: 767px) { br.br-wide { display: none; } }