/* ==========================================
   about.html 專屬樣式
   ------------------------------------------
   共用元件與 design tokens 在 style.css，不要重造。本檔沿用的既有元件：
     .page-hero / .page-hero-overlay / .page-hero-content   內頁標頭
     .breadcrumb / .breadcrumb-current                      麵包屑
     .pill-tab（左欄切換按鈕的底：手機是藥丸頁籤，768px 以上覆寫成縱向清單）
     .register-box                                          白底內容方框
     .filter-bar / .filter-select / .filter-search          會員名錄的縣市／區域下拉＋關鍵字搜尋
     .pagination / .pagination-btn                          會員名錄分頁
     .btn / .btn-primary                                    FAQ 底部 CTA

   本檔自己的元件（其他頁面沒有）：
     .about-ghost-btn      次要按鈕，FAQ「全部展開」與會員名錄「清除篩選」共用
     .about-board-*        理監事人物卡
     /* ==========================================
   內頁標頭
   ------------------------------------------
   背景圖寫在 CSS 而不是 inline style（全站 11 個 .page-hero 一致，見 style.css）。
   只寫 background-image：background-size: cover ＋ 置中由 .page-hero 提供，
   構圖靠上傳前裁好，不在 CSS 寫死縮放與位移（換一張主體在別處的圖就會歪掉，而且不報錯）。
   ⚠️ R12（客戶 2026-08-25）：由 `hero-1.jpg` 換成 `newhero-01.jpg`。
      舊註解寫的「hero-1 同時用在活動相簿封面與首頁相簿輪播第一張」已不適用本頁
      ——首頁相簿在 R1 一併換成 newhero 那批，活動相簿仍用 hero-1。
   ⚠️ `.page-hero` 有 60% 深紫遮罩，換圖後實測白色標題對比 **10.55**（AA 4.5、AAA 7），
      因為遮罩夠厚，底圖亮度變化影響有限。 */
.about-hero {
  background-image: url('../../images/hero/newhero-01.jpg');
}

/* ==========================================
   版面外框
   ========================================== */
.about-section {
  padding: 40px 24px 96px;
}

.about-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* 其他 6 個內頁的麵包屑下緣間距都是 24px，這裡跟著統一 */
.about-inner .breadcrumb {
  margin-bottom: 24px;
}

/* 🔴 minmax(0, 1fr) 不能寫成 1fr：
   左欄的橫向捲動頁籤與右欄的表格都比欄寬還寬，
   用預設的 minmax(auto, 1fr) 會被內容撐開，整頁就橫向溢出。 */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (min-width: 768px) {
  .about-section {
    padding: 48px 24px 96px;
  }

  .about-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .about-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
  }
}

/* ==========================================
   左欄切換
   ------------------------------------------
   手機（<768px）：橫向可捲動的藥丸頁籤，不維持窄長兩欄。
   768px 以上：縱向側欄，白底方框並跟著捲動固定。
   ========================================== */
/* 🔴 橫向捲動、捲軸厚度、snap、padding-bottom 全部由 style.css 的共用元件
   .scroll-tabs 提供（HTML 上與 .about-nav 一起掛）。這裡只留這一列自己的事。
   ⚠️ 不要在這裡重寫 overflow-x／scrollbar-width／padding-bottom——
      那正是「捲軸壓到按鈕下緣」的來源：每處各留一個自己猜的值。
      本頁原本寫 padding-bottom: 6px，而這台 Chrome 的傳統捲軸佔 15px，
      差的 9px 就是客戶截圖裡蓋住按鈕底部的那一截。 */
.about-nav {
  display: flex;
  gap: 8px;
}

.about-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 藥丸頁籤預設 padding 10px 24px，圖示已佔位置，橫向縮一點 */
  padding: 10px 16px;
}

.about-nav-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  /* 🔴 直式側欄時要把共用元件 .scroll-tabs 的兩件事關掉：
     overflow-x 回到 visible（不再需要橫向捲動，留著會多一個捲動容器，
     順帶讓側欄內的 sticky 失效），padding-bottom 歸零（沒有捲軸就不必留空間，
     否則按鈕下面會多一條 12px 的空白）。
     ⚠️ 這裡的 padding: 12px 已經涵蓋 padding-bottom，是刻意用簡寫一次蓋掉；
        改成 padding-inline／padding-top 之類的寫法時要記得補 padding-bottom: 0。 */
  .about-nav {
    flex-direction: column;
    gap: 4px;
    overflow-x: visible;
    overflow-y: visible;
    padding: 12px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    position: sticky;
    /* 用 --header-stack（含公告列 48px），不是 --header-height —— 見 style.css 該 token 的說明 */
  top: calc(var(--header-stack) + 24px);
  }

  /* 覆寫 .pill-tab：桌機是清單項目而不是藥丸
     ⚠️ 選擇器刻意是 .about-nav .about-nav-link（0,2,0），才蓋得過 .pill-tab（0,1,0），
        不必動用 !important。 */
  .about-nav .about-nav-link {
    /* 文字可能兩行（例如「現任理監事介紹」在放大模式下），不設 nowrap */
    white-space: normal;
    align-items: flex-start;
    border: none;
    border-left: 3px solid transparent;
    border-radius: var(--radius-sm);
    background-color: transparent;
    padding: 12px 12px 12px 13px;
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .about-nav .about-nav-link svg {
    /* 文字換行時圖示對齊第一行 */
    margin-top: 2px;
  }

  .about-nav .about-nav-link:hover {
    background-color: var(--color-bg-alt);
    color: var(--color-primary);
  }

  .about-nav .about-nav-link.is-active {
    background-color: var(--color-bg-alt);
    border-left-color: var(--color-primary);
    color: var(--color-primary);
  }
}

/* ==========================================
   分頁容器
   ------------------------------------------
   🔴 「預設全部可見、由 JS 反向啟用切換」：
      隱藏規則只在 <html> 有 about-tabs-on 時生效；沒有它就是六段內容依序全部顯示，
      JS 沒跑時使用者仍看得到所有內容，不會是空白頁。

   ⚠️ 這個 class 由 about.html 裡 <main> 開頭的 inline script 掛上，不是 js/about.js。
      外部檔要等下載，慢速網路下瀏覽器會先把六段全部畫出來、腳本到了才收起五段，
      使用者會看到一次很大的內容跳動。about.html 那段註解寫了完整理由，兩邊要一起看。
   ⚠️ inline script 有 2 秒保險絲：js/about.js 沒載到就把 class 拆掉、回到全部顯示。
   ========================================== */
.about-panels {
  min-width: 0;
}

html.about-tabs-on .about-panel {
  display: none;
}

html.about-tabs-on .about-panel.is-active {
  display: block;
}

/* 沒有開關（JS 沒跑）時，六段內容之間要有分隔，否則會黏成一團 */
html:not(.about-tabs-on) .about-panel+.about-panel {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

.about-panel-head {
  margin-bottom: 24px;
}

.about-panel-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.35;
  padding-bottom: 12px;
  /* 底線只在標題文字下方，用 inline-block 讓寬度跟著文字 */
  /* 🔴 1px 是客戶第二次指定的值（歷程：3px →「太粗」→ 2px →「還要再細，改成 1px」，
     截圖指的都是「公會簡介」下方那條）。顏色維持主色 --color-primary，要的是變細不是換色。
     ⚠️ 這裡原本留了一句「不要改成 1px，Retina 上會淡掉」——那是我方的顧慮，
        客戶看過 2px 之後仍指定 1px，以客戶為準，該註記已作廢。
        （1px 在 2x 螢幕上確實只有 0.5 實體像素、看起來比 1px 淡，這是預期行為不是 bug。）
     ⚠️ 客戶同一項還提到主導覽與 header top 的線也要 1px，那兩處在 style.css／partials，
        不在本檔範圍。 */
  border-bottom: 1px solid var(--color-primary);
  display: inline-block;
}
/* ⚠️ 這裡用 border-bottom（不是 ::after），所以沒有 border-radius 的問題——
   style.css 的 .nav-link::after 是畫一條 1px 高的方塊，需要 border-radius: 0.5px
   避免兩端被 1px 圓角各削掉一半；border-bottom 沒有那個現象。
   兩處的視覺結果一致（1px 實線、主色紫），不必為了「看起來一樣」而改成同一種實作。 */

.about-panel-lead {
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-muted);
  max-width: 780px;
}

@media (min-width: 768px) {
  .about-panel-title {
    font-size: 1.75rem;
  }
}

/* ==========================================
   內容通用小元件
   ========================================== */
.about-subheading {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.5;
  margin: 0 0 12px;
}

.about-paragraph {
  margin: 0 0 16px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-text);
}

.about-paragraph:last-child {
  margin-bottom: 0;
}

/* R16（客戶 2026-08-25）：公會簡介末尾的精神標語「和諧・團結・真誠・服務」。
   ⚠️ 來源圖裡它是置中、深藍、比內文大的一行，我們用主色（紫）而不是照抄那個藍
      ——全站沒有那個藍，多一個色就是多一個沒人維護的例外。
   ⚠️ 字距放寬是因為分隔用的是全形「・」，緊排時四個詞會黏在一起。
   ⚠️ 用 `<p>` 不是 `<h4>`：它是一句標語不是章節標題，做成標題會跑進大綱結構裡。 */
.about-motto {
  margin: 28px 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  text-align: center;
}

.about-footnote {
  margin: 24px 0 0;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--color-muted);
}

/* 次要按鈕（白底細框）
   ⚠️ 本頁有兩個消費端：FAQ 的「全部展開／收合」與會員名錄的「清除篩選」，
      兩者都由 js/about.js 動態插入（純 JS 控制項寫在 HTML 裡，JS 沒跑就成了死按鈕）。
      要再加第三個也用這個 class，不要複製一份新樣式。 */
.about-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  transition: border-color 0.2s ease-out, color 0.2s ease-out;
}

.about-ghost-btn svg {
  width: 16px;
  height: 16px;
}

.about-ghost-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ==========================================
   1／6 公會簡介
   ========================================== */
/* 首段稍大：三段文字沒有小標，靠字級做出閱讀入口 */
.about-lede {
  font-size: 1.0625rem;
}

.about-figure-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.about-figure {
  margin: 0;
}

.about-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.about-figure-caption,
.about-chart-caption {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* 🔴 M5（客戶 2026-08-17）：「1024px 瀏覽時可以改成圖在上、文在下，
   就像 768px 瀏覽時一樣的排版。」
   斷點從 **1024 → 1280**，所以 1024–1279 沿用 768 的上下排版。

   原因是這一頁還有一個 260px 的左側分頁欄：1024 的可用寬度扣掉左欄與間距之後，
   再切成 5fr/6fr 兩欄，文字欄只剩十幾個字一行。
   ⚠️ **M3 用的是 1024，這裡用 1280，兩個數字不同是刻意的**
      （PM 2026-08-17 明確指示不要訂統一的「桌機／平板」界線，
      每個區塊照它自己的內容判斷）。**不要為了一致把它們統一。**
   ⚠️ `position: sticky` 的圖片也一起搬到 1280：上下排版時圖片在文字上方，
      sticky 會讓它卡在頂端不動，反而怪。 */
@media (min-width: 1280px) {
  .about-figure-row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: start;
  }

  .about-figure {
    position: sticky;
    top: calc(var(--header-stack) + 24px);
  }
}

/* ==========================================
   2／6 公會組織（只有一張組織圖）
   ------------------------------------------
   🔴 圖檔尚未放進 images/about/organization-chart.jpg 時，
      about.html 的 onerror 會在 .about-chart 掛 is-missing：
      連結整塊收起、改顯示說明文字，版面不會塌一個大洞。
   ========================================== */
.about-chart {
  margin: 0;
}

.about-chart-link {
  display: block;
  position: relative;
  /* 上限＝圖檔本身的像素寬。超過它就是放大模糊，不會更清楚。
     實際上內容欄最寬約 1140px（1440 容器減側欄），這條永遠不會生效，是防呆。 */
  max-width: 1197px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-alt);
  overflow: hidden;
}

.about-chart-img {
  display: block;
  /* 🔴 841／595 是 images/about/organization-chart.jpg 的實際尺寸。
     🔴 **R14（2026-08-25）：PM 換了新圖，而且從直式（1197×1678）變成橫式（841×595）。**
        只換檔案不改這一行的話，橫式圖會被塞進直式的 aspect-ratio 佔位框，
        `object-fit: contain` 讓它上下留一大片空白、圖本身被縮到很小
        ——**完全不會報錯，只是看起來很怪**。這正是 2026-08-11 踩過的同一個坑。
     ⚠️ 換圖時**三個地方要一起改**：這一行、about.html 的 `width`／`height` 屬性、
        以及那段註解裡寫的尺寸。
        ✅ 2026-09-03 PM 換的新圖畫布與內容邊界都與舊圖相同（都是 841×595、
           內容 bbox 都是 (0, 31, 841, 416)），所以那一輪這三處一個數字都沒改。
        🔴 但**下次換圖仍要自己量一次**，不要因為上次沒改就假設這次也不用。
        量尺寸的指令（🔴 不分格式，不要用只讀 PNG 檔頭的寫法——
        檔案已於 2026-09-03 由 .png 改成 .jpg，讀 PNG 檔頭會量出垃圾值而且不報錯）：
       python3 -c "from PIL import Image;print(Image.open('images/about/organization-chart.jpg').size)"

     🔴 刻意「滿欄寬 ＋ 等比例變高」，沒有設 max-height：
        配 max-height 會讓 object-fit: contain 在左右留下大片空白，
        圖反而變小（PM 實測反映「比原網站還小」就是這個原因）。
        ⚠️ 這條在換成橫式圖之後**更要守住**：橫式圖高度本來就矮，
           再加 max-height 只會讓它更小。
     ⚠️ 不要改成 cover 或加 transform 放大，那會把組織圖的邊邊裁掉。 */
  width: 100%;
  height: auto;
  aspect-ratio: 841 / 595;
  object-fit: contain;
}

/* 放大提示：組織圖細節多，一定要讓人知道可以點開 */
.about-chart-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

.about-chart-zoom svg {
  width: 16px;
  height: 16px;
}

/* 圖片載入失敗時的替代區塊（預設不顯示） */
.about-chart-missing {
  display: none;
}

.about-chart.is-missing .about-chart-link,
.about-chart.is-missing .about-chart-caption {
  display: none;
}

.about-chart.is-missing .about-chart-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 維持一塊有高度的區域，圖還沒放進來時版面不會塌成一條線 */
  min-height: 220px;
  margin: 0;
  padding: 32px 24px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-alt);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-muted);
  text-align: center;
}

/* ==========================================
   3／6 公會章程
   ========================================== */
.about-toc {
  margin-bottom: 20px;
}

.about-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.about-toc-list a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-alt);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.about-toc-list a:hover {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

@media (min-width: 640px) {
  .about-toc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .about-toc-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.about-charter-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 錨點跳轉時避開 sticky header，否則章名會被壓在 header 底下 */
.about-chapter {
  /* 🔴 用 --header-stack（導覽 80 ＋ 公告列 48 ＝ 128），不是 --header-height。
     只用 --header-height 會少算公告列，實測章節標題會停在 top 89–95，
     被 sticky header 蓋住——而且不會報錯，只是「跳過去發現標題不見了」。 */
  scroll-margin-top: calc(var(--header-stack) + 16px);
}

.about-chapter-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.5;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.about-clause-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-clause {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-clause-no {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-heading);
}

.about-clause-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-text);
}

/* 歷次修訂備註
   ⚠️ 原站只在前 6 項寫了字面編號「1.」～「6.」，後 4 項沒有編號；
      我們用 <ol> 讓瀏覽器編到 10。理由與判準寫在 about.html 的備註區註解，
      要改呈現方式前先讀那段。 */
.about-note-list {
  margin: 0;
  padding-left: 24px;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--color-text);
}

.about-note-list li {
  margin-bottom: 12px;
}

.about-note-list li:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .about-clause {
    flex-direction: row;
    gap: 20px;
  }

  /* ⚠️ 寬度用 em 不用 px：文字放大模式下「第二十三條」才不會被壓到換行 */
  .about-clause-no {
    flex-shrink: 0;
    width: 6em;
    line-height: 1.9;
  }

  .about-clause-text {
    flex: 1;
    min-width: 0;
  }
}

/* ==========================================
   表格（目前只有會員名錄在用；理監事名單 2026-08-11 已改成卡片）
   ------------------------------------------
   🔴 .about-table-wrap 只在「卡片模式」（<1024px）是捲動容器，
      而且只為了關住卡片內那些無斷行點的號碼（見 .about-table-members td 的註解）。
      1024px 以上它是 overflow: visible ——那是表頭 sticky 黏在視窗上的前提，
      理由寫在「1024px 以上：回到表格」那段，改這裡之前先讀。
   ========================================== */
.about-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.about-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

/* 表格標題給讀螢幕軟體用，視覺上不顯示（不用 display:none，那樣會被略讀） */
.about-table-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.about-table th,
.about-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  vertical-align: top;
}

.about-table th {
  background-color: var(--color-bg-alt);
  color: var(--color-heading);
  font-weight: 600;
}

.about-table td {
  color: var(--color-text);
}

.about-table tbody tr:hover td {
  background-color: var(--color-bg-alt);
}

.about-table-no {
  color: var(--color-muted);
}

.about-table-name {
  font-weight: 600;
  color: var(--color-heading);
}

/* 沒有資料的欄位（原站就是空白，例如部分會員沒有傳真） */
.about-blank {
  color: var(--color-muted);
}

/* ==========================================
   4／6 現任理監事介紹（人物卡片）
   ------------------------------------------
   ⚠️ 2026-08-11：原本是「職稱／姓名」兩欄表格（.about-roster*），
      PM 指定改成卡片格狀排列並預留照片位置，表格樣式已刪除，不是搬到別處。
   🔴 姓名字串逐字沿用原站（含「立法委員 張宏陸」「羅惠民 律師」這種帶頭銜的寫法），
      分組小標是我方為了版面可讀性所加，原站沒有分組。
   🔴 照片還沒拿到：預設看到的是首字圓形佔位，真實照片放進
      images/about/board/ 就會自動蓋上去（命名規則寫在 about.html 的註解）。
      不用外部佔位服務（專案規範禁止）。
   ========================================== */
.about-board-groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about-board-group-title {
  margin: 0 0 14px;
  padding-bottom: 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

/* 🔴 手機（<640px）：一欄，卡片橫向（頭像左、文字右）。
      為什麼不在手機也排成方形卡片格狀：這個 panel 在 .register-box 裡，
      375px 螢幕實測可用寬度只有 264px（360 − 版面左右 48 − 方框左右 48），
      連兩個 120px 的軌道都排不下，最後還是一欄——
      而直立方形卡片一張約 140px 高，50 張就是 7000px 的一片牆。
      橫向卡片一張約 82px，同樣的一欄少掉四成高度，也不會被誤認成表格。
   🔴 640px 以上才換成方形卡片格狀，並用 minmax(160px, 1fr)。
      軌道下限一定要給值、不能只寫 1fr（＝minmax(auto,1fr)）：
      卡片內有「立法委員 張宏陸」這種長字串，auto 下限會被 min-content 撐開而橫向溢出。 */
.about-board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.about-board-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

/* 照片位置：圓形框。載入前與載入失敗時看到的是首字，不會有破圖。

   🔴 底色是 --purple-600 配白色首字，**不要改回淺灰**。
      歷程：原本是 --color-bg-alt（#ECECEC）配主色首字，結果
        主要人物卡（灰底 #ECECEC）→ 圓圈與卡片同色，對比 1.00，完全看不出範圍
        一般成員卡（白底）        → 1.18，也幾乎看不出來
      2026-08-12 客戶附截圖反映「看不出頭像範圍在哪裡」，指定「改其他顏色」。

   ⚠️ 中間試過「加一圈 2px 外環」，客戶明確否決（「頭貼範圍不要有框線」），
      所以改成純粹靠底色區分，**不要再加 box-shadow 或 border 當外環**。

   ⚠️ 為什麼往深色走而不是淡紫：淡紫兩邊都顧不到——
        --purple-200 #C6A8DE：對灰卡只有 1.77，看不出範圍
        --brand-purple-soft（當時是 #9B82BE）：對灰卡 2.81，但主色首字在它上面只有 3.99（未達 4.5）
        ⚠️ R21（2026-08-25）已把該 token 改成 #704C8C，**上面那兩個數字是當年的值、不是現值**；
           這段保留的是「為什麼不往淡紫走」的判準，不是可以直接引用的對比表。
      深底配白字兩邊都過。

   🔴 色值歷程（客戶調過兩次，不要再往深或往淺亂動）：
        --brand-purple #451470 → 沒用（104px 的實心深紫圓圈太厚重）
        --purple-600  #714C8E → 客戶 2026-08-12 回報「太深了，可以改淺一點嗎」
        --purple-500  #8A5FA8 → **現值**。白字 4.90:1、對白卡 4.90、對灰卡 4.15
      ⚠️ **不能再往淺走了**：--purple-400 #A376C7 的白字只剩 3.52，讀不清楚。
         真要更淺就得把首字改成深紫，但那時圓圈對白卡只有 2.x（#B490D4 是 2.66、
         #C6A8DE 是 2.09），「看不出頭像範圍」那個原始問題會直接回來。
         換句話說 --purple-500 是「白字」這個前提下的下限。 */
.about-board-photo {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--purple-500);
}

.about-board-initial {
  font-size: 1.25rem;
  /* 一般字重（400），客戶 2026-08-12 指定「不要用粗體」。
     ⚠️ 白字在 --purple-500 上是 4.90:1，剛好過 AA 4.5——而 AA 對「粗體 18.66px 以上」
        才放寬到 3:1，這裡改成一般字重反而**不能**用那條放寬。
        4.90 已經是用一般文字門檻（4.5）算過的，所以改字重不影響合規。
     ⚠️ 但也因此不要再把底色往淺調：一般字重的細筆畫在低對比下更難辨識。 */
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF;
}

@media (min-width: 640px) {
  .about-board-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
  }

  .about-board-card {
    flex-direction: column;
    gap: 10px;
    padding: 16px 12px;
    text-align: center;
  }

  .about-board-photo {
    width: 72px;
    height: 72px;
  }

  .about-board-initial {
    font-size: 1.5rem;
  }
}

/* ==========================================
   圓形頭像的照片載入機制（理監事卡片 ＋ 會員名錄共用）
   ------------------------------------------
   🔴 這是本頁「照片還沒上傳」的唯一一套機制，兩個消費端共用這四條規則，
      不要為第三個地方再複製一份：
        .about-board-photo  ／ -initial ／ -img   現任理監事介紹（50 張卡片）
        .about-member-photo ／ -initial ／ -img   會員名錄（60 筆，表格與卡片模式都用）
      圓圈尺寸與首字字級各自在自己那一段設定（兩者差很多：104／72／56 對 48／28），
      共用的只有「怎麼避免破圖」這件事。

   🔴 預設 opacity: 0，載入成功才由 onload 補上 is-loaded。
      照片檔還沒放進來時（現在理監事 50 張、會員 60 張全部 404），
      使用者不會先看到一整片破圖圖示再消失。
   🔴 onerror 直接 this.remove()：留著一個 404 的 <img> 在 DOM 裡，
      某些瀏覽器仍會畫出 alt 文字或破圖框，蓋在首字佔位上面。
   ⚠️ 反過來說：JS 完全關閉時（onload 不會執行）照片不會顯示，看到的是首字佔位——
      職稱、姓名、編號都是純文字，永遠看得見，不會少內容。 */
.about-board-img,
.about-member-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.about-board-img.is-loaded,
.about-member-img.is-loaded {
  opacity: 1;
}

.about-board-role {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.about-board-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-heading);
}

/* 理事長／監事長：橫向大卡，與同組其他人區隔。
   ⚠️ 刻意不用 grid-column: span 2 做成寬卡——auto-fill 在窄螢幕只有 1 欄，
      span 2 會長出隱性欄位而橫向溢出。改成 grid 外面獨立一張卡，寬度天生安全。
   🔴 選擇器寫成 .about-board-card.about-board-lead（0,2,0），不是 .about-board-lead（0,1,0）：
      要蓋過 640px media query 裡的 .about-board-card{flex-direction:column}，
      同分時比的是先後順序，寫成單一 class 會在桌機被改成直立卡。
      提高一級之後不必在意這段擺在檔案的哪個位置。
   🔴 底色是「灰底 ＋ 主色淺框」，不是金色漸層。
      歷程：2026-08-12 上午依 PM 指示改成金色漸層 → 客戶看了說「很突兀」→
      同日改回這一版（＝ 8454c64 的原樣）。**不要再改成金色。**
      理由（客戶沒說，但比對得出來）：這張卡在版面上是「一群灰白卡片裡的第一張」，
      金色在全站的語意是「互動狀態」（hover／focus，見 style.css 七之二節），
      拿來當靜態底色會和 hover 的語言互相打架，看起來像「這張卡被滑到了」。
      要突顯理事長／監事長，靠的是「橫向大卡 ＋ 較大頭像 ＋ 較大姓名」，
      也就是尺寸階層，不是換色。
   ⚠️ 因此本區塊不需要任何文字顏色覆寫：灰底上的 --color-muted／--color-heading
      與白卡一致，改回來時連帶把三條 --color-on-gold 覆寫與頭像的 transparent／
      內描邊一起刪掉了（那三條是為了金底才存在的）。 */
.about-board-card.about-board-lead {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  /* 不吃滿整列：橫向卡片只有頭像與兩行字，拉到 900px 寬會空一大片 */
  max-width: 420px;
  margin-bottom: 12px;
  padding: 16px;
  border-color: var(--color-primary-soft);
  background-color: var(--color-bg-alt);
  text-align: left;
}

/* 🔴 照片接入點保留：客戶之後會提供理監事照片。
   頭像的圓形容器、首字佔位、opacity: 0 ＋ onload 的機制都沒有動，
   丟檔進 images/about/board/<姓名>.jpg 就會自動蓋上去（命名規則在 about.html 的註解）。

   🔴 這裡**只覆寫尺寸，不覆寫底色**。
      底色與首字顏色由 .about-board-photo／.about-board-initial 統一提供
      （深紫底＋白字，理由寫在那一段）——三種頭像（主要人物卡、一般成員卡、
      會員名錄）用同一組顏色，換色只要改一個地方。
      ⚠️ 曾經在這裡覆寫成「白底 ＋ 2px 主色外環」，客戶否決了外環
         （「頭貼範圍不要有框線」），連帶白底也不需要了。
         **不要再把 background-color 或 box-shadow 加回這一條。** */
.about-board-lead .about-board-photo {
  width: 72px;
  height: 72px;
}

.about-board-lead .about-board-initial {
  font-size: 1.75rem;
}

.about-board-lead .about-board-name {
  font-size: 1.25rem;
}

@media (min-width: 640px) {
  .about-board-card.about-board-lead {
    margin-bottom: 16px;
    padding: 20px;
  }

  .about-board-lead .about-board-photo {
    width: 104px;
    height: 104px;
  }

  .about-board-lead .about-board-initial {
    font-size: 2rem;
  }
}

/* --- 人物卡 hover（2026-08-12 客戶指定：「加上陰影以及框線加深」）---
   🔴 這一段必須排在上面所有 .about-board-lead 規則的**後面**，不是隨手擺。
      .about-board-card:hover 與 .about-board-card.about-board-lead 的
      specificity 都是 (0,2,0)，同分時比先後順序——寫在前面的話，
      主要人物卡 hover 時 border-color 會被 lead 那條的 --color-primary-soft 蓋回去，
      而且不會報錯，只會「兩張大卡沒有 hover 效果」。

   ⚠️ 不用金色漸層：全站的金色 hover 標準（CLAUDE.md 七之二）是給
      按鈕與整塊可點擊區域用的。人物卡目前不是連結（點了沒反應），
      套金底會讓長輩以為可以點進去看介紹。客戶指定的就是陰影＋框線加深，照做。
   ⚠️ 陰影用 --shadow-md（帶品牌紫色調，不是死黑）；框線由 --color-border #E6E1EA
      加深成 --color-primary，實測對比 **6.84:1**（對主要人物卡的 #ECECEC 底；
      Q4 前主色是 #451470／11.21:1。原本的 #E6E1EA 框線對同一張卡只有 1.20:1），
      加上陰影就是兩個訊號，不是只有一個。
   🔴 transition 只寫在這裡會有半邊問題（滑出時不會有動畫），所以寫在卡片本身；
      但只列舉 border-color／box-shadow 兩個屬性，不寫 all——
      卡片內有照片的 opacity 過場（is-loaded），all 會把它一起接管。 */
.about-board-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.about-board-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* 主要人物卡的底色較深（#ECECEC），--shadow-md 那層淡紫在它上面幾乎看不出來，
   所以這張改用 --shadow-lg，讓兩種卡片的 hover 強度看起來一致。 */
.about-board-card.about-board-lead:hover {
  box-shadow: var(--shadow-lg);
}

/* 使用者要求減少動態時只拿掉過場，hover 的視覺變化要留著
   ——那是「這張卡在被指著」的唯一提示，拿掉就等於沒有 hover。 */
@media (prefers-reduced-motion: reduce) {
  .about-board-card {
    transition: none;
  }
}

/* ==========================================
   5／6 會員名錄
   ------------------------------------------
   🔴 六個欄位（編號／姓名／事務所／地址／電話／傳真）在窄螢幕排不成表格，
      所以「<1024px 是卡片、≥1024px 才是表格」——mobile-first，卡片是預設值。
      （分界 2026-08-12 由 768px 改成 1024px，客戶指定；理由見下方兩段註解。）
      欄位名稱由 <td data-label="…"> 提供，卡片模式用 ::before 顯示，
      唯一例外是姓名——它在卡片模式是「照片＋姓名」的卡片標頭，不顯示欄位名。
   🔴 表格模式沒有任何捲軸（客戶指定），所以表格沒有 min-width、
      .about-table-wrap 沒有 max-height。這兩件事與表頭 sticky 的 top 是綁在一起的三角關係，
      改一個就要改另外兩個——「1024px 以上：回到表格」那段有完整說明。
   ========================================== */
/* --- 篩選列：沿用 style.css 的共用元件 .filter-bar，只覆寫三件事 --- */
/* 1. 共用元件的 padding 是給整頁寬的區塊用的（32px 24px 0），
      這裡是方框內部，上方不需要再留 32px。 */
.about-panel .filter-bar {
  padding: 0;
}

/* 2. 🔴 共用元件在 768px 起是「不換行的一排 ＋ 下拉固定 200px」。
      本頁的篩選列不是整頁寬，而是在右欄裡——768px 螢幕的右欄只有約 387px，
      兩個 200px 下拉加上搜尋框的 min-content（約 180px）合計約 604px，
      會把整頁撐出橫向捲動。所以本頁改成可換行、下拉可壓縮：
      768px 時「兩個下拉一排、搜尋框折到第二排」，1024px 以上三個一排。

   🔴 這三條一定要包在 @media (min-width: 768px) 裡，不可以裸寫。
      共用元件在 768px 以下是 flex-direction: column，而 flex-basis 走的是主軸——
      直排時主軸是「垂直」，`flex: 1 1 160px` 就變成「高度 160px」。
      實測後果：手機版三個控制項各被撐成 160／160／240px 高，中間空一大片，
      而且不會有任何錯誤訊息，只會看起來很奇怪。 */
@media (min-width: 768px) {
  .about-panel .filter-bar-inner {
    flex-wrap: wrap;
  }

  .about-panel .filter-select-wrap {
    flex: 1 1 160px;
  }

  /* min-width: 0 是必要的：input 的 min-width: auto 是它的 min-content（約 180px），
     不歸零的話 flex 縮不下去，窄欄位一樣會溢出。 */
  .about-panel .filter-search {
    flex: 1 1 240px;
    min-width: 0;
  }
}

/* 筆數說明與「清除篩選」同一列（清除鈕由 js/about.js 插入） */
.about-result-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 16px 0 20px;
}

.about-search-count {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-muted);
}

.about-filter-tools:empty {
  display: none;
}

/* --- <1024px（預設）：一筆一張卡片 --- */
/* 🔴 分界是 1024px，不是 768px（2026-08-12 客戶指定，原本是 768px）：
      客戶原話「1280px 我看起來還算正常，比較長的文字會自動換行。
      但 1024px 以下就改成卡片，不然要左右滑動不好瀏覽。」
      1024px 時右欄只有約 612px（1024 − 版面左右 48 − 側欄 260 − gap 40 − 方框左右 64），
      六欄在這個寬度非折不可，折到那個程度就不如卡片。 */
.about-table-members thead {
  display: none;
}

/* 🔴 flex column ＋ 姓名列 order: -1，把「照片＋姓名」提到卡片最上面當標頭。
   為什麼不是維持 display: block 讓照片留在原本的位置：
   姓名是第二個 td，照片會落在卡片中間的值欄裡，看起來像某一列的附屬圖，
   而客戶要的是「照片在卡片左上」。用 order 就不必為卡片模式另寫一份 HTML。
   ⚠️ 改 display 就要回頭確認 [hidden]（見下一段）——這次也一樣。 */
.about-table-members tr {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

/* ⚠️ 原本這裡有一條 `.about-table-members tr[hidden] { display: none }`，2026-08-13 刪除：
   已由 `style.css` Base Reset 的全站 `[hidden][hidden]` 涵蓋（見 CLAUDE.md 五節 2-2）。 */

.about-table-members tr+tr {
  margin-top: 12px;
}

.about-table-members td {
  display: grid;
  /* 5em 剛好放得下最長的欄位名「事務所名稱」（0.875rem × 5 字），
     再窄一點標籤自己就會換行，再寬一點 320px 下的地址會多折一行 */
  grid-template-columns: 5em minmax(0, 1fr);
  gap: 0 10px;
  padding: 3px 0;
  border-bottom: none;
  /* 地址與事務所名稱很長，卡片模式一定要能換行 */
  white-space: normal;
  /* 🔴 overflow-wrap: anywhere 不是保險，是修 320px 的橫向捲軸：
     320px 下值欄只有 78.6px（5em 標籤 84.4 ＋ gap 10 之後剩下的），
     而「86671331#89」「29661460~61」這類號碼中間沒有任何斷行點（# 與 ~ 都不是），
     整段 106px 會撐出約 11px 溢出——實測 .about-table-wrap
     在 320px 是 clientWidth 207／scrollWidth 218，卡片清單下方會多一條橫向捲軸。
     ⚠️ 只有整頁沒有溢出（overflow-x: auto 把它關在容器裡），所以肉眼很容易漏掉，
        要量 wrap 的 scrollWidth 才看得到。 */
  overflow-wrap: anywhere;
}

.about-table-members td::before {
  content: attr(data-label);
  color: var(--color-muted);
  font-size: 0.875rem;
  line-height: 1.9;
}

/* --- 會員照片（表格與卡片模式共用的那一層） ---
   🔴 照片與姓名包在同一個 <span class="about-member-person"> 裡，兩個模式共用同一份 HTML。
      不用 td 自己當 flex 容器：表格模式的 td 必須是 display: table-cell，
      改掉它欄寬就不成立了。多包一層 span 是兩個模式都能排版的唯一寫法。
   ⚠️ min-width: 0 是必要的：flex 項目預設不可小於 min-content，
      「吳惠敏(新莊)」這種較長的姓名在窄欄裡會把欄位撐出去。 */
.about-member-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.about-member-name-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* 圓形照片框。載入前與載入失敗時看到的是姓氏首字，不會有破圖
   （opacity: 0 ＋ onload 的機制與理監事卡片共用，見上面「圓形頭像的照片載入機制」）。
   🔴 卡片模式 60px、表格模式 28→36px（2026-08-12 客戶指定「大頭貼尺寸太小，要放大一點」）。
      表格模式那一顆與姓名欄寬 18→20% 是綁在一起的，理由寫在 1024px 那段的欄寬表格裡，
      改其中一個就要回頭看另一個。 */
.about-member-photo {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  /* 與理監事頭像同一組顏色（深紫底＋白字），理由見 .about-board-photo */
  background-color: var(--purple-500);
}

/* 首字跟著圓圈等比放大：48px 配 1.125rem，60px 配 1.375rem。
   ⚠️ 圓圈放大但首字沒放大的話，看起來會像「小字掉在大圓中間」。
   ⚠️ 顏色與理監事頭像一致（深紫底配白字），不要改回主色——
      主色配 --purple-600 底只有 1.20:1，完全讀不到
      （Q4 前主色 #451470 是 1.97，本來就不行；改成 #6B2FA8 之後更糟）。 */
.about-member-initial {
  font-size: 1.375rem;
  /* 一般字重，與 .about-board-initial 一致（客戶指定不要粗體） */
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF;
}

/* --- 卡片模式：姓名列（照片＋姓名）當成卡片標頭 --- */
/* 🔴 標頭刻意不顯示「姓名」這個欄位名（::before 收起來）：
   照片旁邊一個較大的粗體人名，本身就已經是卡片的標題，
   再掛一個「姓名」標籤反而讓標頭看起來像資料列的一部分。
   其餘五個欄位仍然保留標籤——它們沒有照片撐著，少了標籤就認不出是什麼。 */
.about-table-members .about-table-name {
  order: -1;
  display: flex;
  padding: 0 0 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: 1.0625rem;
}

.about-table-members .about-table-name::before {
  display: none;
}

/* 卡片模式下整格反白會像壞掉，hover 交給卡片本身 */
.about-table-members tbody tr:hover td {
  background-color: transparent;
}

.about-table-members tbody tr:hover {
  border-color: var(--color-primary-soft);
}

/* --- 1024px 以上：回到表格 --- */
/* 🔴 這張表沒有任何捲軸（客戶指定，兩個方向都是硬需求）。改這一段之前先讀完：

   歷程（不要走回頭路）：
     2026-08-12 上午 .about-table-wrap 是「表格自己的捲動視窗」
       （max-height: calc(100vh - 240px) ＋ overflow: auto），表頭 sticky top: 0 黏在它頂端。
     客戶看了說不要那條上下捲軸 → 同日改成現在這樣：容器不再捲動，整張表自然展開。

   🔴 拿掉容器的捲動之後，表頭 sticky 的參考對象就換人了，這不是可選的連動：
      position: sticky 只認「最近的捲動祖先」。原本 .about-table-wrap 因為
      overflow-x: auto 就已經是一個捲動容器（overflow 只要有一軸不是 visible，
      另一軸的 visible 會被計算成 auto），所以 thead 是黏在那個 div 裡、top: 0 才對。
      現在這個容器在 1024px 以上是 overflow: visible ＝ 不再是捲動容器，
      thead 於是黏在視窗上，top 必須讓開整個 sticky header ⇒ var(--header-stack)。
      ⚠️ 只改其中一邊都會壞，而且不會報錯：
         留著 overflow 卻改 top ⇒ top 完全沒有效果（表頭跟著表格離開畫面）。
         拿掉 overflow 卻留 top: 0 ⇒ 表頭黏在視窗最上緣、被 header 整片蓋住。

   🔴 top 一定要用 var(--header-stack)，不要寫死數字。
      ⚠️ 這裡刻意不抄它的值：那個總和 2026-08-12 才從 180 改成 163
         （客戶要求把 header 縮矮），抄過來的數字每次改 header 都要重找一遍。
         要看目前的值請去 style.css 的 :root，那裡是唯一來源。
      而且工具列在放大字級／窄螢幕會換行變高——寫死的數字不會一直對，
      日後 header 再多一列時也只有這個 token 會被更新。

   🔴 「表格永遠不橫向溢出」是這一版能成立的前提，所以 min-width 整條刪掉了：
      原本有 min-width: 45rem（810px）讓六欄不折行、靠容器橫向捲動吸收，
      現在改成六欄一律可換行、寬度跟著容器。1024px 的容器只有約 612px，
      這是客戶接受的取捨（他的原話是「比較長的文字會自動換行」沒問題）。
      ⚠️ 任何時候想把 min-width 加回來，就等於把橫向捲軸與容器捲動一起加回來，
         表頭 sticky 也要一起改回 top: 0——三件事是綁在一起的。 */
@media (min-width: 1024px) {
  .about-table-members thead {
    display: table-header-group;
  }

  /* 🔴 border-collapse 從 collapse 換成 separate：
     collapse 的框線屬於「表格」而不是「儲存格」，sticky 的 thead 移動時
     底線會留在原地，捲起來就是一排沒有底線的表頭浮在資料上。
     separate ＋ border-spacing: 0 讓每個儲存格自己帶框線，外觀不變。 */
  .about-table-members {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
  }

  /* 🔴 overflow 一定要回到 visible：預設值（卡片模式用的 overflow-x: auto）
     會讓這個 div 變成捲動容器，thead 就黏在它裡面而不是視窗上。 */
  .about-table-wrap {
    overflow: visible;
  }

  .about-table-members thead th {
    position: sticky;
    top: var(--header-stack);
    /* 資料列要從表頭底下穿過去，不能疊在上面。
       ⚠️ 1 就夠：.site-header 是 z-index 50，數字比它小才會被 header 蓋住，
          不然捲動時表頭會浮在導覽列上面。 */
    z-index: 1;
    /* 表頭底下沒有東西擋，資料列捲上來時要有實心底色才看得清楚
       （--color-bg-alt 是不透明色，不必再多寫一層） */
    background-color: var(--color-bg-alt);
  }

  .about-table-members tr {
    display: table-row;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
  }

  .about-table-members tr+tr {
    margin-top: 0;
  }

  /* 🔴 欄寬只認 thead 這一列（table-layout: fixed 的規則），下在 td 的 class 上不會生效。
     百分比合計 100：9 ＋ 20 ＋ 25 ＋ 22 ＋ 12 ＋ 12
     （2026-08-12 由 9／18／25／24／12／12 改來：照片放大 28→36px，
       姓名欄 18→20% 吸收那 8px，多出來的 2% 從地址欄扣——
       🔴 為什麼扣地址不扣事務所：1440px 下事務所 25% 的可用寬 237px 剛好壓在
          資料中位數 236px 上，扣 1% 就會讓多數列從一行變兩行、整張表變長；
          地址中位數 240px 在 24% 的 227px 下本來就已經折行，扣 2% 不改變它的行數。）

     🔴 全部用百分比、沒有 min-width，所以這組數字必須在「最窄的表格模式」也成立。
        1024px 的表格容器約 612px（1024 − 版面 48 − 側欄 260 − gap 40 − 方框 64），
        左右內距各 10px ⇒ 每欄可用文字寬 = 612 × % − 20。

     資料實測（canvas measureText 量全部 60 筆，預設 18px、表格 0.9375rem＝16.875px）：
       編號   表頭「編號」33.7px、資料「001」27.8px
       姓名   中位數 51px、最長「吳惠敏(新莊)」96px（只有一筆）
       事務所 中位數 236px、p90 253px、最長 337px
       地址   中位數 240px、p75 257px、p90 288px、最長 308px
       電話／傳真 中位數約 80px、最長 108／109px

     各寬度下的文字可用寬（612／868／1028 分別是 1024／1280／1440 的容器）：
                612px(1024)   868px(1280)   1028px(1440)
       編號  9%      35            58            72     ← 表頭 33.7 剛好放得下
       姓名 20%     102           154           186     ← 再扣照片 36＋gap 8 ⇒ 58／110／142
       事務所25%     133           197           237     ← 1440 接近中位數 236，多數一行
       地址 22%      115           171           206
       電話 12%       53            84            103
       傳真 12%       53            84            103

     🔴 編號給到 9% 是刻意的浪費：它只要放 34px，1440px 下會空掉 38px。
        但表頭「編號」在 612px 下若折成兩行，整排表頭就變兩行高——
        寧可寬螢幕空一點，也不要窄螢幕的表頭斷字。
     🔴 姓名 20% 是「照片 36px ＋ gap 8px ＋ 三個字 50.6px」反推的：
        1024px 下剩 58px，只多 7px 餘裕。低於 19% 三字姓名就會折行，
        而姓名是這張表最重要的一欄。
        ⚠️ 所以照片尺寸與這個百分比是綁在一起的：再把表格模式的照片改大
           （.about-member-photo 在本 media query 內是 36px），
           就要同步加寬姓名欄，否則姓名會斷字，而且不會報錯。
     ⚠️ 1024–1279px 每列必然折成好幾行（事務所 133px 放不下 14 個字），
        這是「不要橫向捲軸 ＋ 保留六欄」必然的代價，不是漏調。
        真要壓低列高只有兩條路：減欄位，或事務所／地址改成同一格上下兩行。
        不要再試著調百分比——上表已經是這六欄在 612px 下的最佳解。 */
  .about-table-members th,
  .about-table-members td {
    display: table-cell;
    /* 左右 10px 而不是共用的 16px：6 欄光是內距就佔 192px，
       在 612px 的容器裡等於把電話欄逼到剩下 30px */
    padding: 12px 10px;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
  }

  /* 🔴 表頭也要能換行（原本繼承 .about-table 的 nowrap）：
     fs-lg ＋ 1024px 下「事務所名稱」是 103px、欄寬只有 133px 還撐得住，
     但側欄或字級再動一次就會溢出到隔欄，看起來像壞掉。
     表頭折兩行只是變高，不會遮住別的欄。 */
  .about-table-members th {
    white-space: normal;
  }

  /* 卡片模式的欄位名（td 的 data-label）在表格模式要收起來，表頭已經有了 */
  .about-table-members td::before {
    display: none;
  }

  .about-table-members .about-th-no {
    width: 9%;
  }

  .about-table-members .about-th-name {
    width: 20%;
  }

  .about-table-members .about-th-office {
    width: 25%;
  }

  .about-table-members .about-th-addr {
    width: 22%;
  }

  .about-table-members .about-th-tel,
  .about-table-members .about-th-fax {
    width: 12%;
  }

  /* 事務所名稱與地址最長，靠換行吸收；姓名只有一筆帶括號註記，也讓它能折 */
  .about-table-members .about-td-office,
  .about-table-members .about-td-addr,
  .about-table-members .about-table-name {
    white-space: normal;
  }

  /* --- 表格模式的姓名欄：照片縮小、恢復成一般儲存格 --- */
  /* 🔴 這四條是把卡片模式的「卡片標頭」還原回儲存格：
     order／border-bottom／margin／字級都是卡片模式才要的，
     漏掉任何一條在表格裡都會看到多一條分隔線或欄位錯位。 */
  .about-table-members .about-table-name {
    order: 0;
    display: table-cell;
    padding: 12px 10px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--color-border);
    font-size: inherit;
  }

  /* 表格模式的照片小一號：卡片模式的 60px 會把列高撐到 60px 以上，
     而 30 筆全展開時列高是整頁長度的主要來源。
     🔴 28 → 36px（2026-08-12 客戶指定放大）。上限就是 36：
        1440px 下多數列只有一行文字，列高＝照片 36 ＋ 上下內距 24 ＝ 60px；
        再往上加就是整張表等比變長（每加 4px × 30 列 ＝ 多 120px）。
     🔴 放大 8px 一定要同步把姓名欄從 18% 加寬到 20%，兩件事不能只做一件：
        1024px 下姓名欄可用文字寬 ＝ 欄寬 − 內距 20 − 照片 − gap 8，
        18% 時是 109.8 − 20 − 36 − 8 ＝ 45.8px，放不下三個字的 50.6px，
        所有三字姓名都會折行——而且不會報錯，只是姓名變兩行。 */
  .about-member-photo {
    width: 36px;
    height: 36px;
  }

  .about-member-initial {
    font-size: 1.0625rem;
  }

  .about-member-person {
    gap: 8px;
  }

  /* 🔴 tabular-nums：等寬數字讓電話／傳真上下對齊，也讓欄寬可以算得準
       （比例數字每一列寬度都不同，只能抓最寬的那一列預留）。
     ⚠️ white-space 刻意留 normal 而不是 nowrap：欄寬是算出來的，
        萬一某個環境字寬略寬，nowrap 會讓號碼溢出到隔欄看起來像壞掉；
        normal ＋ overflow-wrap 最差只是折成兩行。 */
  .about-table-members .about-td-tel,
  .about-table-members .about-td-fax {
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .about-table-members tbody tr:hover td {
    background-color: var(--color-bg-alt);
  }
}

/* 空狀態 */
.about-empty {
  padding: 40px 16px;
  text-align: center;
}

.about-empty svg {
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  color: var(--color-primary-soft);
}

.about-empty-title {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-heading);
}

.about-empty-desc {
  margin: 0 auto;
  max-width: 420px;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-muted);
}

/* 分頁
   ⚠️ 右下角有固定的浮動按鈕組（約 76px 寬）。分頁是置中的，
      在窄螢幕上最右邊那顆按鈕可能被浮動鈕蓋住，所以手機版留出右側空間。 */
.about-pagination {
  flex-wrap: wrap;
  margin-top: 24px;
  padding-right: 56px;
}

.about-pagination:empty {
  margin-top: 0;
}

@media (min-width: 768px) {
  .about-pagination {
    padding-right: 0;
  }
}

/* ==========================================
   6／6 FAQ
   ========================================== */
/* ⚠️ 刻意靠左，不靠右：右下角有固定的浮動按鈕組（文字大小／社群／回到頂端），
   靠右的按鈕在某些捲動位置會剛好被它蓋住而點不到。 */
.about-faq-tools {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
}

.about-faq-tools:empty {
  display: none;
}

.about-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 用原生 <details>：不依賴 JS 也能展開收合 */
/* 🔴 border-left 一律 4px，hover／展開只換顏色不換寬度。
      改 padding 或 border-width 來做 hover 會讓整串問答在滑過時上下跳動。
   🔴 預設色是 --color-border，不是 transparent（2026-08-12 客戶指定）：
      原本預設透明、只有 hover 與展開才有顏色，客戶反映「預設狀態左邊框線不見了」。
      現在三個狀態是「淺灰 → 主色」的層次：
        預設   --color-border（看得到有一條，但不搶眼）
        hover  --color-primary
        展開   --color-primary（滑鼠移開也還看得出讀到哪）
   ⚠️ overflow: hidden 保留：summary 的 hover 底色會鋪滿整條，
      沒有裁切的話直角會露在圓角外面。box-shadow 畫在框外，不受影響。 */
.about-faq-item {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* 目前展開的那一筆固定帶主色標示，滑鼠移開也還看得出讀到哪 */
.about-faq-item[open] {
  border-left-color: var(--color-primary);
}

/* 🔴 hover 不可以只換文字顏色（實測「深紫→更深紫」的對比只有 1.24 倍，
      1 ＝ 完全沒變化，這就是客戶說「好像沒有一樣」的原因）。
   🔴 但也不用金色漸層（2026-08-12 客戶指定改成淺灰底）：
      客戶要的是「像滑到左欄分頁按鈕那樣」——.about-nav-link:hover 用的就是
      --color-bg-alt，這裡跟它一致，整頁的 hover 語言才是同一套。
      金色現在只留給按鈕類的互動（style.css 七之二節），不鋪在整條問答上。
   ⚠️ 三個訊號仍然同時給，不靠單一文字顏色：淺灰底（在 .about-faq-q 上）
      ＋ 左框線變主色 ＋ 陰影。陰影是客戶指定保留的。 */
.about-faq-item:hover {
  border-color: var(--color-primary-soft);
  border-left-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.about-faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
  /* background-color 一起帶進 transition：hover 改成淺灰底之後，
     只讓文字漸變、底色瞬間跳，會看起來像閃了一下。
     ⚠️ 框線與陰影的 transition 在 .about-faq-item 上，兩邊時間要一致（都是 0.2s）。 */
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
}

/* 預設的三角形標記換成 lucide 箭頭 */
.about-faq-q::-webkit-details-marker {
  display: none;
}

.about-faq-q::marker {
  content: '';
}

.about-faq-q svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
  transition: transform 0.2s ease-out;
}

.about-faq-item[open] .about-faq-q svg {
  transform: rotate(180deg);
}

/* 🔴 hover 底色是淺灰（--color-bg-alt），不是金色漸層——2026-08-12 客戶指定，
      與左欄分頁按鈕 .about-nav-link:hover 同一個值，見上面 .about-faq-item:hover 的註解。
   🔴 文字色改成主色而不是留在 --color-heading：淺灰底與白底的差異本身不大，
      問題文字一起變色才看得出「滑到這一條」。
      ⚠️ 不要因此把左框線那個訊號拿掉——單靠文字顏色對長輩使用者常常等於沒有。
   ⚠️ 這裡不再需要任何 --color-on-gold：底色已經不是金色了。 */
.about-faq-q:hover,
.about-faq-q:focus-visible {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
}

/* 鍵盤操作也要看得見。outline-offset 用負值：summary 貼著圓角框，
   正值會讓外框跑到 .about-faq-item 的框線外面而被 overflow: hidden 裁掉。 */
.about-faq-q:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.about-faq-a {
  padding: 0 20px 20px;
}

.about-faq-a .about-paragraph {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}

/* FAQ 底部聯絡卡
   🔴 PM 反映它和上面 9 筆 FAQ 太像（同樣白底＋細框＋圓角），會被當成第 10 筆問答滑過去。
      所以改成「明顯是另一種東西」：實心主色底 ＋ 白字 ＋ 金色按鈕 ＋ 金色圓形圖示，
      並把上方間距從 24 拉到 40／48px。
   ⚠️ 刻意不靠放大字級做區隔——放大只是變成「更大的同一種東西」，還是會被當成 FAQ。
   ⚠️ 沿用 .register-box 只為了圓角與內距的基準，底色與框線都在這裡蓋掉；
      因為 about.css 在 style.css 之後載入，同分時本檔勝出，不必動用 !important。
      🔴 也因此 padding 兩個斷點都要自己寫：style.css 的
         @media(min-width:768px) .register-box{padding:32px} 會被本檔的 24px 壓過去。 */
.about-contact-card {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border-color: transparent;
  background-color: var(--color-primary);
}

/* 白字在主色 #6B2FA8 上的對比是 8.09:1，遠高於 AA
   （Q4 前主色是 #451470／13.23:1——主色改亮會讓這個數字變小，換色時要重量） */
.about-contact-card .about-subheading,
.about-contact-card .about-paragraph {
  color: #FFFFFF;
}

/* 🔴 標題比 .about-subheading 的 1.125rem 大一級（2026-08-12 客戶指定「字級加大」）。
   ⚠️ 為什麼上一版刻意「不」放大、這一版又放大：
      上一版的問題是這張卡與 9 筆白底問答太像，會被當成第 10 筆滑過去，
      當時判斷放大只是變成「更大的同一種東西」，所以改用實心主色底 ＋ 金色按鈕解決。
      區隔已經由底色做到了，現在放大純粹是讓 CTA 的標題有份量，
      不是拿字級當區隔手段——兩件事不衝突。
   ⚠️ 用 rem（全站有文字放大切換，px 不會跟著放大也不會報錯）。 */
.about-contact-card .about-subheading {
  font-size: 1.375rem;
  line-height: 1.4;
}

.about-contact-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  /* 長字串（電話、信箱）在窄螢幕要能壓縮，不然會把卡片撐出橫向捲動 */
  min-width: 0;
}

/* 圖示是裝飾性的：JS 沒跑時 <i data-lucide> 不會變成 SVG，這個圓圈就是空的，
   不會少任何資訊（標題、說明、按鈕都是純文字／連結）。 */
.about-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--gold-from), var(--gold-to));
  color: var(--color-on-gold);
}

.about-contact-icon svg {
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  .about-contact-card {
    margin-top: 48px;
    padding: 28px 32px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  .about-contact-main {
    align-items: center;
  }

  .about-contact-card .about-subheading {
    font-size: 1.5rem;
  }

  .about-contact-card .btn {
    flex-shrink: 0;
  }
}

/* ══════════════════════════════════════════
   🔴 這裡原本有兩段死碼，R18（2026-08-25）清掉：
     1. 一個**空的** `@media (min-width: 640px) { }`
     2. 一段**沒有大括號、直接卡在檔尾**的 `html` 選擇器
        （註解寫「開啟時鎖住背景捲動」）
   ⚠️ 第 2 段不只是沒作用，它會**吃掉接在後面新增的規則**：
      `html` 後面沒有 `{`，parser 會把下一條規則的選擇器接上去變成
      `html .新規則`（後代選擇器）——特異性變了、而且**不會報錯**。
      本輪要在檔尾加 `.about-fees-*` 才發現。
   ✅ 鎖背景捲動這件事**現在由 `css/lightbox.css` 的 `body.lb-open` 負責**，
      功能沒有消失（燈箱是唯一會鎖捲動的地方）。
   ⚠️ 兩段都是本輪之前就在 HEAD 裡的（不是 R 軌造成的），已回報 PM。
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   R18：收費標準（客戶 2026-08-25）
   ══════════════════════════════════════════ */
.about-fees-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.about-fees-head .about-subheading {
  margin-bottom: 0;
}

/* 🔴 年度與更新日期是這一頁的必要資訊，不是裝飾：費用逐年調整，
   沒有標示的話明年沒有人分得出這是哪一年的，而**畫面看起來完全正常**。 */
.about-fees-updated {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.about-fees-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.about-fees-table th,
.about-fees-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.about-fees-table thead th {
  background-color: var(--color-bg-alt);
  font-weight: 600;
  color: var(--color-heading);
}

.about-fees-table tbody th {
  font-weight: 400;
  color: var(--color-text);
}

.about-fees-table tbody tr:last-child th,
.about-fees-table tbody tr:last-child td {
  border-bottom: none;
}

.about-fees-amount {
  font-weight: 700;
  color: var(--color-heading);
  white-space: nowrap;
}

.about-fees-nonmember {
  margin: 16px 0 0;
  color: var(--color-muted);
}

/* 逐字照抄 xlsx 的兩則附註。⚠️ 原文自帶開頭的「●」，
   所以清單不能再有 marker，否則會變成兩顆點。 */
.about-fees-notes {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.about-fees-notes li {
  margin-bottom: 8px;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-text);
}

.about-fees-notes li:last-child {
  margin-bottom: 0;
}

/* 🔴 手機不用橫向捲動，改成「欄名＋值」的堆疊卡片（做法與 `.course-schedule` 一致）。
   理由：長輩使用者不一定發現表格可以左右滑——只丟一個 overflow-x 等於把問題
   藏在畫面外。這裡只有兩欄，堆疊完全放得下，沒有必要捲。
   ⚠️ 欄名由 `data-label` 提供，`<td>`／`<th>` 少寫 `data-label` 就會變成一行沒有標題的值。 */
@media (max-width: 639px) {
  .about-fees-table thead {
    /* 視覺上隱藏但保留給輔助技術（同 .about-table-caption 的做法） */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .about-fees-table,
  .about-fees-table tbody,
  .about-fees-table tr,
  .about-fees-table th,
  .about-fees-table td {
    display: block;
  }

  .about-fees-table tbody tr {
    margin-bottom: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .about-fees-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .about-fees-table tbody th,
  .about-fees-table tbody td {
    display: flex;
    gap: 12px;
    border-bottom: 1px solid var(--color-border);
  }

  .about-fees-table tbody tr td:last-child {
    border-bottom: none;
  }

  .about-fees-table tbody th::before,
  .about-fees-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 5.5em;
    font-weight: 600;
    color: var(--color-muted);
  }
}