/* ==========================================================================
   奇點物理 SINGUL.｜網站樣式（多頁式，2026-10-13）
   色票命名沿用 01_素材/品牌色票.css 的 --singul-*；只用品牌應用規範 §1 的顏色。
   2026-10-13 講義頁改成教材頁（materials.html）：講義段換成 .material-*／.sample-*／dialog.lightbox。
   2026-10-16 首頁只留品牌短片（.home-stage）；選單小藍點換頁滑動、跨頁轉場與手機選單動畫（見最後一節「頁面轉場」）。
   規範：無漸層、無陰影、無圓角大於 2mm 的色塊；紙色底上的線用 rule 色。
   底色只有 bg 與 hi 兩種（§1 沒有白色，不用 #FFFFFF）。

   版面：
   - 桌機（≥960px）：左側固定選單欄 240px（hi 底、右邊 1px rule 線），內容區在右側，
     容器最大寬 960px、左右各 48px 留白。
   - 手機／平板（<960px）：選單改成上方列（左字標、右「選單」按鈕），展開後垂直排列；
     沒有 JS 時由各頁 <noscript> 樣式直接把選單展開。
   ========================================================================== */

:root {
  /* A 象牙鈷藍（主配色） */
  --singul-bg: #F5F0E5;       /* 網站底色 */
  --singul-hi: #F7F2E9;       /* 選單欄、卡片、區塊次底色 */
  --singul-fg: #2D3140;       /* 標題文字、目前頁選單項 */
  --singul-accent: #284FA0;   /* 點、按鈕、細線、小標 */
  --singul-body: #4D4A4A;     /* 內文 */
  --singul-rule: #C9C3B7;     /* 紙色底上的淡線 */

  /* H 深海冰藍（深色段落：頁尾）；h-hi 取自 01_素材/品牌規格.json 的 H.hi */
  --singul-h-bg: #162232;
  --singul-h-hi: #1B283A;
  --singul-h-fg: #F7F1E7;
  --singul-h-accent: #A9D8EC;

  --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --sidebar-w: 240px;         /* 桌機左側選單欄寬 */
  --topbar-h: 60px;           /* 手機上方列高 */
  --container: 960px;         /* 內容容器最大寬（含左右留白） */
  --gutter: 48px;             /* 內容容器左右留白 */

  /* 動態效果的曲線：全站轉場、選單、按鈕共用（只動 transform／opacity／顏色，交給 GPU 合成，不觸發重新排版） */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- 基礎 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }   /* 教材頁的錨點小按鈕等頁內跳轉 */
}

body {
  margin: 0;
  background: var(--singul-bg);
  color: var(--singul-body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.85;
  font-weight: 400;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

h1, h2, h3 {
  color: var(--singul-fg);
  letter-spacing: 0.05em;   /* 中文標題字距 +0.05em */
  line-height: 1.4;
}
h1 { font-size: 30px; font-weight: 500; }
h2 { font-size: 22px; font-weight: 500; }
h3 { font-size: 20px; font-weight: 500; }

a { color: var(--singul-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

:focus-visible {
  outline: 2px solid var(--singul-accent);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  padding: 8px 14px;
  background: var(--singul-accent);
  color: var(--singul-bg);
  z-index: 100;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ---------- 左側選單欄（桌機） ---------- */
.site-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--singul-hi);
  border-right: 1px solid var(--singul-rule);
  overflow-y: auto;
  scrollbar-width: thin;                               /* 視窗太矮而出現捲軸時：細、色票色 */
  scrollbar-color: var(--singul-rule) transparent;
  z-index: 50;
}
.sidebar-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 30px 24px 28px;
}
.brand { display: block; flex: none; }
.brand img { width: 170px; height: auto; }   /* 05 中英左右，最小 160px */

.site-nav {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  margin-top: 40px;
}
.site-nav ul { display: flex; flex-direction: column; gap: 2px; }
.site-nav ul a {
  position: relative;
  display: block;
  padding: 9px 0 9px 20px;
  color: var(--singul-body);
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.6;
}
.site-nav ul a { transition: color .25s ease; }
/* 目前頁的「點」：直徑 7px 的實心小藍點，是寫在目前頁連結裡的 <span class="nav-dot">。
   換頁時由最下面「頁面轉場」一節的 View Transitions 從上一頁的位置滑到這一頁（中途略拉長成膠囊再收回）。 */
.nav-dot {
  position: absolute;
  left: 2px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--singul-accent);
}
/* 滑過其他選項：同位置出現一圈空心細環（由小放大），提示點會移到這裡；目前頁不顯示 */
.site-nav ul a::before {
  content: "";
  position: absolute;
  left: 2px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border: 1.5px solid var(--singul-accent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.3);
  transition: opacity .2s ease, transform .35s var(--ease-out);
}
.site-nav ul a:hover { color: var(--singul-accent); text-decoration: none; }
.site-nav ul a:hover::before,
.site-nav ul a:focus-visible::before { opacity: 1; transform: none; }
.site-nav ul a:active::before { transform: scale(1.35); transition-duration: .1s; }
.site-nav ul a[aria-current="page"] { color: var(--singul-fg); font-weight: 700; }
.site-nav ul a[aria-current="page"]::before { display: none; }

.sidebar-foot { margin-top: auto; padding-top: 40px; }
.btn-ig {                          /* Instagram 外框按鈕（示意，連到聯絡頁） */
  width: 100%;
  min-width: 0;
  min-height: 56px;
  flex-direction: column;
  padding: 8px 10px;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.btn-ig span { display: block; }
.sidebar-note {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--singul-body);
}
.sidebar-tagline {                 /* 「一堂聽得懂的物理課」素材圖（自 12 切出的課程描述） */
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--singul-rule);
}
.sidebar-tagline img { width: 160px; }   /* 墨高約 14px（此圖墨高＝寬 × 8.7%），不低於全站最小字級；左欄內寬 192px 放得下 */

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 4px;
  background: none;
  border: 0;
  color: var(--singul-fg);
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.nav-toggle-bar {                 /* 三條線 → ✕：中線淡出、上下兩條收到中間再轉 45°（只動 transform） */
  position: relative;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: background-color .2s ease;
}
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease-out);
}
.nav-toggle-bar::before { transform: translateY(-7px); }
.nav-toggle-bar::after  { transform: translateY(7px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { transform: rotate(-45deg); }

/* ---------- 內容區（選單欄右側） ---------- */
.site-body {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-main { flex: 1 0 auto; padding: 72px 0 96px; }

.page-head { max-width: 720px; margin-bottom: 48px; }
.page-head h1 { margin-top: 2px; }
.page-head .lead { margin-top: 18px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--singul-accent);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
}
.dot {
  width: 7px; height: 7px;
  background: var(--singul-accent);
  border-radius: 50%;   /* 「點」：直徑 7px，遠小於 2mm 限制 */
}
.lead { font-size: 17px; }

.section { padding-top: 8px; }
.section + .section { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--singul-rule); }

/* ---------- 按鈕 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 150px;
  padding: 10px 28px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border: 1px solid var(--singul-accent);
  border-radius: 2px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--singul-accent); color: var(--singul-bg); }
.btn-primary:hover { background: var(--singul-fg); border-color: var(--singul-fg); }
.btn-secondary { background: transparent; color: var(--singul-accent); }
.btn-secondary:hover { background: var(--singul-hi); }
.btn-small { min-height: 38px; min-width: 0; padding: 4px 18px; font-size: 14px; }
@media (pointer: coarse) {
  .btn-small { min-height: 44px; }   /* 平板等觸控裝置（表格版面的「下載」鈕）：手指點擊高度 44px */
}

.nowrap { white-space: nowrap; }

/* ---------- 首頁：只有品牌短片的舞台 ---------- */
/* 內容區整個是一個舞台（桌機＝視窗高；手機＝視窗高扣掉上方列），不捲動、沒有頁尾，影片 contain 置中。
   用 svh（瀏覽器網址列展開時的可視高度），手機網址列收合／展開時舞台不會跟著跳。 */
.page-home .site-body { min-height: 0; }
.site-main.home-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 320px;
  padding: 0;
  overflow: hidden;
}
/* 品牌短片（07_品牌短片）：assets/video 裡是「網站專用版」——白底、顏色預先除以紙色，
   用 multiply 疊在 #F5F0E5 上剛好乘回品牌色。瀏覽器解碼影片時淺色會偏一點，直接放紙色底的影片會看出一個方框；
   白色在任何瀏覽器都解得準，乘上去就和網頁底色完全一樣。不加框、不加圓角，看起來直接畫在頁面上。
   影片元素填滿舞台、object-fit: contain：上下或左右多出來的地方是影片元素的白底，乘上去一樣是紙色，看不出邊界。
   .hero-film 用 isolation 自成一層、底色紙色：multiply 只在這一層裡和紙色相乘，不必每格去和整頁混色（播放時比較省 GPU）。 */
.hero-film {
  position: absolute;
  inset: 0;
  background: var(--singul-bg);
  isolation: isolate;
}
.hero-film-video {
  display: block;
  width: 100%;
  height: 100%;
  background: #FFFFFF;          /* 載入前也是白，乘上去＝紙色 */
  mix-blend-mode: multiply;
  object-fit: contain;
}
/* 右下角的暫停／播放／重播（自動播放超過 5 秒的動態要能停下來；品牌官網影片的慣例位置）。
   有 JS 才顯示（HTML 預設 hidden）；短片開始後才淡入，不搶開場。 */
.film-control {
  position: absolute;
  right: 24px; bottom: 24px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  color: var(--singul-fg);
  background: var(--singul-bg);
  border: 1px solid var(--singul-rule);
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .6s ease, color .2s ease, border-color .2s ease;
}
.film-control.is-ready { opacity: 1; }
.film-control:hover { color: var(--singul-accent); border-color: var(--singul-accent); }
.film-icon { display: none; width: 16px; height: 16px; fill: currentColor; }
.film-control[data-state="pause"]  .film-icon-pause,
.film-control[data-state="play"]   .film-icon-play,
.film-control[data-state="replay"] .film-icon-replay { display: block; }

/* ---------- 卡片（課程／首頁入口） ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  padding: 36px 32px 32px;
  background: var(--singul-hi);   /* 卡片次底色 hi */
  border: 1px solid var(--singul-rule);
  border-top: 2px solid var(--singul-accent);
}
.card h2 { margin-bottom: 16px; font-size: 20px; }   /* 卡片標題用 h2（頁面 h1 之下不跳層），字級維持原本 h3 的 20px */
.card p { font-size: 16px; }
.card p.card-label {            /* 放在 .card p 之後、優先序更高，13px 才會生效 */
  margin-bottom: 10px;
  color: var(--singul-accent);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.card-list { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--singul-rule); }
.card-list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.8;
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.78em;
  width: 5px; height: 5px;
  background: var(--singul-accent);
  border-radius: 50%;
}

/* ---------- 教材（materials.html） ---------- */
/* 四顆錨點小按鈕：緊貼 page-head 下方，連到四個 section.material */
.material-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -12px 0 56px;
}
.material-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 16px;
  background: var(--singul-hi);
  border: 1px solid var(--singul-rule);
  border-radius: 2px;
  color: var(--singul-fg);
  font-size: 14px;
  letter-spacing: 0.08em;
}
.material-jump a { transition: border-color .2s ease, color .2s ease; }
.material-jump a:hover { border-color: var(--singul-accent); color: var(--singul-accent); text-decoration: none; }

/* 每一類教材一個 section.material（同時帶 .section 取得區塊間距與分隔線） */
.material { scroll-margin-top: 24px; }   /* 錨點跳轉時標題不貼視窗頂；手機版另算上方列高 */
.material-label {                        /* 「01　進度講義」：與 .eyebrow 同一套 14px accent 小標 */
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  color: var(--singul-accent);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
}
.material h2 { max-width: 720px; }
.material-grid {                         /* 左：特色＋適合＋按鈕；右：試讀縮圖或占位卡 */
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 56px;
  align-items: start;
  margin-top: 28px;
}

.feature-list { margin-top: 24px; }       /* 也用於 teacher.html 教學特色 */
.feature-list li {
  position: relative;
  padding: 12px 0 12px 20px;
  border-top: 1px solid var(--singul-rule);
  font-size: 16px;
}
.feature-list li:last-child { border-bottom: 1px solid var(--singul-rule); }
.feature-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: calc(12px + 0.8em);
  width: 5px; height: 5px;
  background: var(--singul-accent);
  border-radius: 50%;
}
.feature-list strong { color: var(--singul-fg); font-weight: 500; }
.material-text .feature-list { margin-top: 0; }

.material-fit { margin-top: 20px; font-size: 16px; }
.material-fit strong { color: var(--singul-fg); font-weight: 500; }
.material-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.material-grid--single { grid-template-columns: 1fr; max-width: 720px; }   /* 學測複習：沒有縮圖，只有左欄 */

/* 章節目錄／考點目錄（2026-10-19）：接在 .material-grid 下方，上緣一條 rule 線 */
.material-toc {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--singul-rule);
}
.material-toc h3 { font-size: 16px; letter-spacing: 0.12em; color: var(--singul-accent); font-weight: 500; }
.chapter-list {                          /* 必修／選修章節：兩欄，每章一格 */
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
  margin-top: 10px;
}
.chapter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--singul-rule);
  font-size: 16px;
}
.chapter-num { flex: none; color: var(--singul-accent); font-size: 13px; letter-spacing: 0.12em; }
.chapter-name { color: var(--singul-fg); font-weight: 500; letter-spacing: 0.05em; }
.chapter-secs {                          /* 小節：整行換到章名下面，14px，用「・」分隔 */
  flex-basis: 100%;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.chapter-secs .sep { color: var(--singul-accent); margin: 0 2px; }
.chapter.is-wip .chapter-name { color: var(--singul-body); font-weight: 400; }
.tag-wip {                               /* 還沒有課本的章：細框小標籤（圓角 2px） */
  display: inline-block;
  padding: 0 8px;
  font-size: 13px;             /* 全站最小 13px（同 .card-label） */
  line-height: 20px;
  letter-spacing: 0.1em;
  color: var(--singul-body);
  border: 1px solid var(--singul-rule);
  border-radius: 2px;
}
.topic-volumes {                         /* 學測 46 個考點：四冊，兩欄（864px 內容寬放四欄太擠） */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
  margin-top: 10px;
}
.topic-volume h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--singul-accent);
  color: var(--singul-fg);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.topic-count { font-size: 13px; font-weight: 400; letter-spacing: 0.06em; color: var(--singul-body); }
.topic-list { margin: 0; padding: 0; list-style: none; }
.topic-list li {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--singul-rule);
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.topic-num { flex: none; min-width: 3em; color: var(--singul-accent); font-size: 13px; letter-spacing: 0.08em; }

.material-sub {                          /* 各主線下方的「段考複習講義」小區塊：h3＋一句說明＋試讀 PDF 按鈕｜2×2 縮圖 */
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--singul-rule);
}
.material-sub h3 { max-width: 720px; }
.material-sub .material-grid { margin-top: 20px; }
.material-sub-desc { font-size: 16px; }

/* 試讀縮圖 2×2：外層 <a href="大圖"> 沒有 JS 時直接開圖，有 JS 時由 script.js 開 lightbox */
.sample-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.sample-link { display: block; color: var(--singul-body); transition: color .2s ease; }
.sample-link:hover { text-decoration: none; color: var(--singul-accent); }
.sample-link img { width: 100%; border: 1px solid var(--singul-rule); transition: border-color .2s ease; }
.sample-link:hover img,
.sample-link:focus-visible img { border-color: var(--singul-accent); }
.sample-caption {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-align: center;
}
.sample-pending {                        /* 尚無試讀的占位卡 */
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 220px;
  justify-content: center;
  padding: 36px 28px;
  background: var(--singul-hi);
  border: 1px solid var(--singul-rule);
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.05em;
}
.sample-pending strong { color: var(--singul-fg); font-weight: 500; font-size: 16px; }

/* 試讀大圖 lightbox：<dialog> 填滿視窗，H 深海冰藍不透明底（::backdrop 同色），無陰影、無漸層、圓角 2px */
dialog.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--singul-h-bg);
  color: var(--singul-h-fg);
  overflow: hidden;
}
dialog.lightbox::backdrop { background: var(--singul-h-bg); }
dialog.lightbox:not([open]) { display: none; }   /* 不支援 <dialog> 的舊瀏覽器也要藏起來，否則 position:fixed 會整頁蓋住 */
dialog.lightbox[open] { display: flex; flex-direction: column; animation: fade-in .25s ease; }
dialog.lightbox[open]::backdrop { animation: fade-in .25s ease; }
dialog.lightbox[open] .lightbox-img { animation: lightbox-rise .4s var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes lightbox-rise { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); } }
body:has(dialog.lightbox[open]) { overflow: hidden; }   /* 開著時鎖住背景捲動 */
.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding: 12px 20px;
  border-bottom: 1px solid var(--singul-h-hi);
}
.lightbox-title { font-size: 14px; letter-spacing: 0.08em; }
.lightbox-close {
  flex: none;
  min-height: 44px;
  min-width: 88px;
  padding: 6px 18px;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--singul-h-accent);
  background: transparent;
  border: 1px solid var(--singul-h-accent);
  border-radius: 2px;
  cursor: pointer;
}
.lightbox-close:hover { background: var(--singul-h-hi); }
.lightbox-close:focus-visible { outline-color: var(--singul-h-accent); }
.lightbox-stage {                         /* 圖片以外的底色區，點了關閉 */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.lightbox-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--singul-h-hi);
  cursor: default;
}

/* ---------- 教學理念 ---------- */
.slogan-wrap { display: flex; justify-content: center; padding: 8px 0 24px; }
.slogan { width: 520px; max-width: 100%; }   /* 13 陪伴標語（含落款） */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.pillar {
  padding: 28px 0 8px;
  border-top: 1px solid var(--singul-rule);
}
.pillar h2 { margin-bottom: 12px; font-size: 20px; }   /* 同上，三柱標題用 h2 */
.pillar p { font-size: 16px; }
.pillar p.pillar-num {          /* 放在 .pillar p 之後、優先序更高，14px 才會生效 */
  margin-bottom: 10px;
  color: var(--singul-accent);
  font-size: 14px;
  letter-spacing: 0.2em;
}

/* ---------- 師資（2026-10-19 四位老師：.teacher-list 卡片 2×2，下方教學特色四位共用） ---------- */
.teacher-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.teacher-card {
  display: flex;
  flex-direction: column;
  padding: 28px 32px 28px;
  background: var(--singul-hi);
  border: 1px solid var(--singul-rule);
  border-top: 2px solid var(--singul-accent);
}
/* 真人照：去背 PNG 直接放在紙色底上，不加框、不加圓角；固定 4:5 的框、靠底置中，四張站在同一條基準線 */
.teacher-photo {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 4 / 5;
  margin: 0 auto 22px;
  background: var(--singul-bg);
}
.teacher-photo img:first-child {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.teacher-avatar {                 /* Q 版小圖當點綴：右下角，和真人照同一條地平線 */
  position: absolute;
  right: 6px; bottom: 0;
  width: 64px;
  height: auto;
}
.teacher-card h2 { font-size: 22px; }
.teacher-card .cred-list { margin-top: 14px; }
.teacher-text { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--singul-rule); }
.teacher-text .feature-list { margin-top: 20px; max-width: 720px; }
.cred-list { margin-top: 24px; }
.cred-list li {
  padding: 10px 0;
  border-top: 1px solid var(--singul-rule);
  color: var(--singul-fg);
  font-size: 16px;
  letter-spacing: 0.05em;
}
.cred-list li:last-child { border-bottom: 1px solid var(--singul-rule); }

/* ---------- 考古題專區／作業詳解專區（兩頁共用 .exam-* 樣式；表格由 _管理後台/清單工具/build_exams.py／build_solutions.py 產生） ---------- */
.exam-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: 16px;
  padding: 22px 24px 24px;
  background: var(--singul-hi);
  border: 1px solid var(--singul-rule);
}
.exam-filters--two { grid-template-columns: 1fr 1.6fr; }   /* 作業詳解頁：只有類型＋關鍵字 */
.exam-filters label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--singul-body);
}
.exam-filters select,
.exam-filters input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--singul-fg);
  background: var(--singul-bg);
  border: 1px solid var(--singul-rule);
  border-radius: 2px;
  -webkit-appearance: none;
  appearance: none;
}
.exam-filters select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232D3140' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.exam-filters select:focus,
.exam-filters input:focus { border-color: var(--singul-accent); outline-offset: 1px; }
.exam-filters input::placeholder { color: var(--singul-body); opacity: 1; }   /* 不用透明度混出 §1 以外的顏色 */

.exam-count {
  margin: 24px 0 28px;
  font-size: 15px;
  letter-spacing: 0.06em;
}
.exam-count strong { color: var(--singul-fg); font-weight: 500; }

.exam-group + .exam-group { margin-top: 48px; }
.exam-group h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--singul-accent);
  font-size: 20px;
}
.exam-group-count {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--singul-body);
}

.exam-table { width: 100%; border-collapse: collapse; table-layout: fixed; }   /* 固定欄寬：每個類型各一張表，欄位左緣才會對齊 */
.exam-table col.col-year  { width: 5.5em; }   /* 「未標年度」4 字＋內距約 76px */
.exam-table col.col-chapter { width: 5.5em; } /* 作業詳解：「第十二章」4 字 */
.exam-table col.col-type  { width: 6em; }     /* 「分科測驗」4 字；自訂 5 字類型也放得下 */
.exam-table col.col-size  { width: 5.5em; }   /* 「10.5 MB」 */
.exam-table col.col-date  { width: 7.5em; }   /* 「2026-10-13」 */
.exam-table col.col-dl    { width: 5.5em; }   /* 「下載」小按鈕 */
/* 標題欄（col-title）不設寬，吃剩餘寬度 */
.exam-table th {
  padding: 12px 10px;
  border-bottom: 1px solid var(--singul-rule);
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--singul-body);
  white-space: nowrap;
}
.exam-table td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--singul-rule);
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.6;
}
.exam-table th:first-child, .exam-table td:first-child { padding-left: 4px; }
.exam-table th:last-child,  .exam-table td:last-child  { padding-right: 4px; text-align: right; }
.exam-table td.exam-year, .exam-table td.exam-chapter, .exam-table td.exam-type, .exam-table td.exam-size, .exam-table td.exam-date { white-space: nowrap; letter-spacing: 0.04em; }
.exam-table td.exam-title { color: var(--singul-fg); font-weight: 500; }
.exam-table .btn { white-space: nowrap; }

.exam-empty, .exam-none {
  padding: 48px 24px;
  background: var(--singul-hi);
  border: 1px solid var(--singul-rule);
  text-align: center;
  font-size: 16px;
  letter-spacing: 0.05em;
}

/* ---------- 聯絡 ---------- */
.contact-inner { max-width: 640px; }
.contact-avatar {               /* G 頭像不加外框（§9.2）；素材本身含 0.5H 安全留白 */
  width: 88px;
  height: 88px;
  margin: 0 0 24px -6px;
}
.contact-handle { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.contact-handle a {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.contact-handle small,
.contact-site small {
  font-size: 14px;
  color: var(--singul-body);
}
.contact-site { margin-top: 18px; color: var(--singul-fg); letter-spacing: 0.05em; }
.contact-more { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--singul-rule); font-size: 16px; }

/* ---------- 頁尾（H 深海冰藍） ---------- */
.site-footer {
  background: var(--singul-h-bg);
  color: var(--singul-h-fg);
  padding: 56px 0 36px;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.footer-logo { width: 190px; }   /* 05 中英左右 H 配色版（深色底） */
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.footer-nav a {
  color: var(--singul-h-fg);
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 6px 0;
  transition: color .2s ease;
}
.footer-nav a:hover { color: var(--singul-h-accent); }
.footer-copy {
  padding-top: 26px;
  width: 100%;
  border-top: 1px solid var(--singul-h-hi);
  color: var(--singul-h-fg);
  font-size: 14px;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   RWD
   ========================================================================== */
/* 桌機但視窗矮（13 吋筆電 1280×720 扣掉瀏覽器列會碰到）：左欄上下留白、選單間距縮小，整欄約 550px 高，不出捲軸 */
@media (min-width: 960px) and (max-height: 720px) {
  .sidebar-inner { padding: 20px 24px 20px; }
  .site-nav { margin-top: 24px; }
  .site-nav ul a { padding: 6px 0 6px 20px; }
  .sidebar-foot { padding-top: 24px; }
  .sidebar-tagline { margin-top: 14px; padding-top: 14px; }
}

/* 960～1199px：內容欄只有 720～960px，多欄版面改單欄 */
@media (max-width: 1199px) {
  .card-grid { grid-template-columns: 1fr; max-width: 640px; }
  .material-grid { grid-template-columns: 1fr; gap: 40px; }
  .material-samples { max-width: 480px; }
  .pillars { grid-template-columns: 1fr; max-width: 640px; }
  .teacher-list { grid-template-columns: 1fr; max-width: 640px; }
}

/* <960px：選單欄改成上方列 */
@media (max-width: 959px) {
  :root { --gutter: 24px; }

  .site-sidebar {
    position: sticky;
    top: 0; bottom: auto;
    width: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--singul-rule);
  }
  .sidebar-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    min-height: var(--topbar-h);
    padding: 0 var(--gutter);
  }
  .brand { padding: 3px 0; }                       /* 字標連結點擊高度 44px */
  .brand img { width: 160px; }
  .nav-toggle { display: inline-flex; }

  /* 展開／收合：整片淡入並往下滑 8px，選項依序浮現（@starting-style＋display allow-discrete；
     不支援的舊瀏覽器直接出現，功能不受影響）。沒有 JS 時由各頁 <noscript> 把 opacity／transform 改回來並直接展開。 */
  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    margin: 0;
    padding: 4px var(--gutter) 24px;
    max-height: calc(100vh - var(--topbar-h));
    max-height: calc(100dvh - var(--topbar-h));   /* 手機網址列展開時，最後一項也看得到 */
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--singul-hi);
    border-bottom: 1px solid var(--singul-rule);
    opacity: 0;
    transform: translate3d(0, -8px, 0);
    transition: opacity .2s ease, transform .3s var(--ease-out), display .3s allow-discrete;
  }
  .site-nav.is-open { display: flex; opacity: 1; transform: none; }
  @starting-style {
    .site-nav.is-open { opacity: 0; transform: translate3d(0, -8px, 0); }
    .site-nav.is-open li { opacity: 0; transform: translate3d(0, -6px, 0); }
  }
  .site-nav.is-open li { transition: opacity .3s ease, transform .4s var(--ease-out); }
  .site-nav.is-open li:nth-child(2) { transition-delay: 25ms; }
  .site-nav.is-open li:nth-child(3) { transition-delay: 50ms; }
  .site-nav.is-open li:nth-child(4) { transition-delay: 75ms; }
  .site-nav.is-open li:nth-child(5) { transition-delay: 100ms; }
  .site-nav.is-open li:nth-child(6) { transition-delay: 125ms; }
  .site-nav.is-open li:nth-child(7) { transition-delay: 150ms; }
  .site-nav.is-open li:nth-child(8) { transition-delay: 175ms; }
  .site-nav ul { gap: 0; }
  .site-nav li { border-top: 1px solid var(--singul-rule); }
  .site-nav li:first-child { border-top: 0; }
  .site-nav ul a { padding: 13px 0 13px 20px; }
  .sidebar-foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--singul-rule); }
  .btn-ig { flex-direction: row; gap: 0.5em; min-height: 48px; font-size: 15px; }
  .sidebar-tagline { display: none; }   /* 手機選單裡省略課程描述小圖，Hero 已有 */

  .site-body { margin-left: 0; min-height: calc(100vh - var(--topbar-h)); }
  .page-home .site-body { min-height: 0; }
  .site-main { padding: 56px 0 80px; }
  .site-main.home-stage {                           /* 扣掉上方列＋它的 1px 底線，剛好一屏、不會多出 1px 捲動 */
    height: calc(100vh - var(--topbar-h) - 1px);
    height: calc(100svh - var(--topbar-h) - 1px);
    padding: 0;
  }
  .film-control { right: 16px; bottom: 16px; }
  .material { scroll-margin-top: calc(var(--topbar-h) + 16px); }   /* 上方列是 sticky，錨點跳轉要把它算進去 */
}

@media (max-width: 759px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; line-height: 1.8; }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
  .card h2, .pillar h2 { font-size: 18px; }   /* 卡片／三柱的 h2 跟手機 h3 同級 */

  .site-main { padding: 48px 0 64px; }
  .page-head { margin-bottom: 36px; }

  .section + .section { margin-top: 48px; padding-top: 40px; }
  .card { padding: 28px 22px 24px; }
  .teacher-card { padding: 24px 22px; }
  .teacher-photo { max-width: 260px; }
  .teacher-text { margin-top: 48px; padding-top: 36px; }
  .card p { font-size: 15px; }
  .material-jump { margin: -8px 0 40px; }
  .material-grid { gap: 32px; margin-top: 24px; }
  .material-sub { margin-top: 36px; padding-top: 28px; }
  .material-toc { margin-top: 32px; padding-top: 22px; }
  .chapter-list, .topic-volumes { grid-template-columns: 1fr; }
  .sample-grid { gap: 12px; }
  .material-actions .btn { flex: 1 1 220px; }   /* 375px 寬時兩顆按鈕各自一行，不會折字 */
  .lightbox-bar { padding: 8px 16px; }
  .lightbox-stage { padding: 12px; }
  .slogan { width: 100%; max-width: 360px; }
  .contact-handle a { font-size: 19px; }

  /* 考古題／作業詳解：篩選列單欄；表格改成一筆一張卡片 */
  .exam-filters, .exam-filters--two { grid-template-columns: 1fr; gap: 14px; padding: 18px 18px 20px; }
  .exam-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .exam-table, .exam-table tbody { display: block; width: 100%; }
  .exam-table tr {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    padding: 16px 18px 18px;
    background: var(--singul-hi);
    border: 1px solid var(--singul-rule);
    border-top: 2px solid var(--singul-accent);
  }
  .exam-table tr[hidden] { display: none; }
  .exam-table td {
    display: flex;
    gap: 12px;
    padding: 3px 0;
    border: 0;
    font-size: 15px;
    text-align: left;
    white-space: normal;
  }
  .exam-table td::before {
    content: attr(data-label);
    flex: 0 0 4.5em;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--singul-body);
  }
  .exam-table td:first-child { padding-left: 0; }    /* 蓋掉桌機的 4px，四個標籤左緣才對齊 */
  .exam-table td:last-child  { padding-right: 0; }
  .exam-table td.exam-title {
    display: block;
    order: -1;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--singul-rule);
    font-size: 17px;
  }
  .exam-table td.exam-title::before { display: none; }
  .exam-table td.exam-dl { display: block; padding-top: 14px; }
  .exam-table td.exam-dl::before { display: none; }
  .exam-table td.exam-dl .btn { width: 100%; min-height: 44px; }

  .site-footer { padding: 44px 0 30px; }
  .footer-logo { width: 176px; }
}

/* ==========================================================================
   頁面轉場（跨頁 View Transitions：Chrome／Edge 126+、Safari 18.2+；其他瀏覽器照常直接換頁）
   - 左側選單欄（手機＝上方列）有自己的名字，換頁時原地不動，只有目前項目的粗體交叉淡換。
   - 小藍點（.nav-dot，桌機）有自己的名字：瀏覽器把它從上一頁的位置補間到這一頁，
     途中沿移動方向拉長成小膠囊再收回（image-pair 的 scale）。不支援的瀏覽器由 script.js 第 5 段用 transform 補上同樣的滑動。
   - 內容區（root）：舊頁 0.2 秒淡出，新頁淡入並上浮 12px。
   只動 transform／opacity，全部在 GPU 合成層完成。
   ========================================================================== */
@view-transition { navigation: auto; }

.site-sidebar { view-transition-name: sidebar; }
@media (min-width: 960px) {
  .nav-dot { view-transition-name: nav-dot; }
}

::view-transition-group(nav-dot) {
  animation-duration: .55s;
  animation-timing-function: cubic-bezier(.65, 0, .35, 1);
}
::view-transition-group(sidebar) { animation-duration: .45s; }   /* 粗體從舊項目換到新項目，和點的移動一起完成 */
::view-transition-image-pair(nav-dot) {
  animation: nav-dot-stretch .55s cubic-bezier(.65, 0, .35, 1);
}
@keyframes nav-dot-stretch {
  45% { transform: scale(.75, 1.9); }
}

::view-transition-old(root) { animation: vt-fade-out .2s ease both; }
::view-transition-new(root) { animation: vt-rise-in .45s cubic-bezier(.22, 1, .36, 1) .05s both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } }

/* 系統設定「減少動態效果」：停用介面轉場。首頁短片依使用者要求每次回首頁重播，可手動暫停。 */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}