/* 隱私權政策 — 本頁專屬樣式
   共用元件與 design tokens 在 style.css，不要重造。
   ------------------------------------------
   本頁是法律性質長文，設計上只解決三件事：
     1. 行寬（正文 max-width，見 .privacy-body）
     2. 錨點跳轉不被 sticky header 壓住（見 --privacy-anchor-offset）
     3. 桌機把章節目錄釘在側邊，手機改成內容上方的一張卡
   本頁不需要 JS：目錄是純 HTML 的 href="#id"，html 已有 scroll-behavior: smooth。
   ========================================== */

.privacy-section {
  /* 錨點跳轉後標題與 header 之間的距離 ＝ 整個 sticky 區塊的高度 ＋ 20px 呼吸空間。

     🔴 一定要用 --header-stack，不要用 --header-height：
        --header-height 只是「導覽那一列」，整個 sticky 區塊還包含 header top 工具列
        與公告跑馬燈（三者的總和就是 --header-stack）。
        用錯的後果是章節標題被 header 蓋住一截，而且不會報錯。
     ⚠️ 這裡刻意不寫任何實際數字：那些值 2026-08-12 才剛從
        52/80/48（合 180）改成 43/72/48（合 163），寫死的數字每次改 header 都要重找一遍。
        要看目前的值請去 style.css 的 :root，那裡是唯一來源。
     ⚠️ 歷程：原本寫的是 --header-height + 68px，數字上剛好夠，
        但那 68 是「先量出被壓住、再往上加」湊出來的，header 一改就失準。 */
  --privacy-anchor-offset: calc(var(--header-stack) + 20px);

  padding: 64px var(--page-gutter) 96px;
}

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

/* 內頁標頭背景圖寫在這裡，不用 inline style
   （⚠️ 括號裡原本寫「其他內頁是寫 inline」——那是 2026-08-18 之前的舊狀況，
     全站 11 個 .page-hero 現在一律走 CSS，沒有例外）。
   ⚠️ page-hero.jpg 是通用圖，**contact／downloads／links／member-center／privacy／sitemap
      六頁共用**——改這個檔案六頁會一起變（S10，客戶 2026-08-26 就是這樣換的）。
      活動花絮 gallery 用自己的 gallery-hero.jpg，不受影響。 */
.privacy-hero {
  background-image: url('../../images/hero/page-hero.jpg');
}

.privacy-breadcrumb {
  margin-bottom: 24px;
}

/* ==========================================
   版面：手機單欄（目錄在上），1024px 起目錄移到左側並釘住
   ========================================== */
.privacy-layout {
  display: grid;
  /* 🔴 minmax(0, 1fr) 不可以只寫 1fr：1fr ＝ minmax(auto, 1fr)，
        auto 的下限是項目的 min-content，長網址或不可斷的字串會把軌道撐得比容器寬。
        （同一個坑在 style.css 的 .courses-grid 上有完整記錄。） */
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 1024px) {
  .privacy-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
}

/* ==========================================
   章節目錄
   ========================================== */
.privacy-toc {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  min-width: 0;
}

@media (min-width: 1024px) {
  .privacy-toc {
    position: sticky;
    top: var(--privacy-anchor-offset);
    /* 放大字級時目錄會變高；限制高度並允許內部捲動，避免長過視窗後看不到後段章節 */
    max-height: calc(100vh - var(--privacy-anchor-offset) - 24px);
    overflow-y: auto;
  }
}

.privacy-toc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 12px;
}

.privacy-toc-title svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.privacy-toc-list {
  margin: 0;
  padding-left: 1.6em;
  font-size: 0.9375rem;
  color: var(--color-muted);
}

.privacy-toc-list li {
  margin-bottom: 6px;
}

.privacy-toc-list li:last-child {
  margin-bottom: 0;
}

/* ⚠️ 這裡不可以寫 display: inline-block。
   inline-block 的基線是它「最後一行」的基線，章節名一旦換行（例如「蒐集目的、利用期間、
   地區、對象與方式」），<ol> 的序號就會掉到第二行去對齊，看起來像少了一個編號。
   維持 inline 才會對齊第一行。 */
.privacy-toc-list a {
  color: var(--color-text);
  line-height: 1.6;
  transition: color 0.2s ease-out;
}

.privacy-toc-list a:hover,
.privacy-toc-list a:focus-visible {
  color: var(--color-primary);
}

/* ==========================================
   正文
   ========================================== */
.privacy-body {
  /* 長文行寬：46rem ＝ 736px，約 44 個中文字一行。
     用 rem 而不是 px，放大字級時行寬跟著放大，一行的字數才維持不變。 */
  max-width: 46rem;
  min-width: 0;
  /* 章節編號由 CSS 產生，與目錄的 <ol> 自動編號一起連動，不必手寫數字 */
  counter-reset: privacy-sec;
}

.privacy-body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease-out;
}

.privacy-body a:hover,
.privacy-body a:focus-visible {
  color: var(--color-primary-hover);
}

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

.privacy-body p:last-child {
  margin-bottom: 0;
}

/* 版本與最後更新日期 */
.privacy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
}

.privacy-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.privacy-meta-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.privacy-lead {
  font-size: 1.0625rem;
  margin-bottom: 24px;
}

/* 內文由後台編輯器輸出：前言第一段當 lead、blockquote 當重點方框、清單套 .privacy-list 的樣式
   （原本前台寫死時是用 .privacy-lead／.privacy-callout／.privacy-dl／.privacy-list 這些 class，編輯器不會帶 class） */
.privacy-intro > p:first-child {
  font-size: 1.0625rem;
  margin-bottom: 24px;
}

.privacy-body blockquote {
  background-color: var(--color-bg-alt);
  border-left: 4px solid var(--color-primary-soft);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 0 0 24px;
}

.privacy-body blockquote > :last-child {
  margin-bottom: 0;
}

.privacy-body ul,
.privacy-body ol {
  margin: 0 0 16px;
  padding-left: 1.5em;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-text);
}

.privacy-body li {
  margin-bottom: 6px;
}

.privacy-body li:last-child {
  margin-bottom: 0;
}

.privacy-body li > strong {
  color: var(--color-heading);
}

/* 編輯器的表格：第一欄（th）當標題欄，長相比照原本的 .privacy-dl-bordered */
.privacy-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 1rem;
  line-height: 1.8;
}

.privacy-body th,
.privacy-body td {
  border: 1px solid var(--color-border);
  padding: 10px 14px;
  vertical-align: top;
  text-align: left;
}

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

/* 後台沒拖過欄寬（沒有 <colgroup>）時，標題欄給固定寬；拖過就照 <col> 的寬度 */
.privacy-body table:not(:has(colgroup)) th {
  width: 160px;
}

.privacy-body table[style] {
  max-width: 100%;
}

.privacy-body th p,
.privacy-body td p {
  margin: 0;
}

.privacy-body blockquote table {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .privacy-body table:not(:has(colgroup)) th {
    width: 110px;
  }
}

/* 重點方框（名詞定義、會員名錄公開揭露） */
.privacy-callout {
  background-color: var(--color-bg-alt);
  border-left: 4px solid var(--color-primary-soft);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 0 0 24px;
}

.privacy-callout-strong {
  border-left-color: var(--color-primary);
}

.privacy-callout-title {
  font-weight: 600;
  color: var(--color-heading);
}

.privacy-callout .privacy-dl {
  margin-bottom: 0;
}

/* 章節 */
.privacy-article {
  /* 錨點跳轉後標題不被 sticky header 壓住 */
  scroll-margin-top: var(--privacy-anchor-offset);
}

.privacy-article+.privacy-article {
  margin-top: 40px;
}

.privacy-article-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.5;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.privacy-article-title::before {
  counter-increment: privacy-sec;
  content: counter(privacy-sec) ". ";
  color: var(--color-primary);
}

/* 項目對照（情境／項目、告知事項、保存期間、聯絡方式共用） */
.privacy-dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 16px;
}

.privacy-dl dt {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.9;
  color: var(--color-heading);
}

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

.privacy-dl dd:last-child {
  margin-bottom: 0;
}

.privacy-dl-bordered dd {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.privacy-dl-bordered dd:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

@media (min-width: 768px) {

  /* 兩欄對照。dt／dd 嚴格一對一交替，靠 grid 自動排版落在同一列，
     所以新增項目時 dt 後面一定要緊接一個 dd，不可以一個 dt 配兩個 dd。
     ⚠️ 兩欄時同一列的高度由 grid 拉齊（預設 align-items: stretch），
        所以 dt 與 dd 的 padding-bottom 要一樣，底線才會對齊在同一條水平線上。 */
  .privacy-dl {
    grid-template-columns: 11.5rem minmax(0, 1fr);
  }

  /* 兩欄的間距用 dt 的 padding-right 提供，不用 column-gap：
     column-gap 會在兩欄的底線之間留一段沒有線的空白，看起來像兩條斷開的線；
     padding 算在 dt 的框內，底線就會一路延伸到 dd 的底線，接成同一條。 */
  .privacy-dl dt {
    padding-right: 24px;
  }

  .privacy-dl dt,
  .privacy-dl dd {
    padding-bottom: 16px;
  }

  /* 兩欄時列間距改由 padding 提供，dd 的 margin 要歸零，否則會多出一段空白 */
  .privacy-dl dd {
    margin-bottom: 0;
  }

  .privacy-dl dt:last-of-type,
  .privacy-dl dd:last-child {
    padding-bottom: 0;
  }

  .privacy-dl-bordered dt {
    border-bottom: 1px solid var(--color-border);
  }

  .privacy-dl-bordered dt:last-of-type {
    border-bottom: none;
  }
}

/* 條列 */
.privacy-list {
  margin: 0 0 16px;
  padding-left: 1.5em;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--color-text);
}

.privacy-list li {
  margin-bottom: 6px;
}

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