/* ==========================================
   article.html 專屬樣式
   ========================================== */
.article-section {
  padding: 64px var(--page-gutter) 96px;
}

/* 用 token 不寫 1440px 字面值：--container-max 是全站內容寬的唯一來源，
   寫死的那份不會跟著換，而且換寬度時 grep 不到（值一樣，看起來沒問題）。 */
.article-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.article-inner .breadcrumb {
  margin-bottom: 24px;
}

.article-box {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
}

@media (min-width: 768px) {
  .article-box {
    padding: 48px;
  }
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

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

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

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

.article-heading {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 32px 0 16px;
}

.article-list {
  margin: 0 0 20px;
  padding-left: 20px;
  color: var(--color-text);
  line-height: 1.9;
}

.article-list li {
  margin-bottom: 8px;
}

.article-table-wrap {
  overflow-x: auto;
  margin: 0 0 24px;
}

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

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

.article-table th {
  background-color: var(--gray-50);
  color: var(--color-heading);
  font-weight: 600;
}

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

/* 內文由後台編輯器輸出（2026-09-12 串接後台）：編輯器不會帶 class，這裡直接對標籤套上面
   .article-paragraph／.article-heading／.article-list／.article-table 同一套長相，
   blockquote 當重點方框、圖片不撐破欄寬（做法與隱私權政策頁的 .privacy-body 相同）。 */
.article-body {
  min-width: 0;
}

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

.article-body h2,
.article-body h3,
.article-body h4 {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 32px 0 16px;
}

.article-body h3,
.article-body h4 {
  font-size: 1.0625rem;
}

.article-body > :first-child {
  margin-top: 0;
}

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

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

.article-body ul,
.article-body ol {
  margin: 0 0 20px;
  padding-left: 20px;
  color: var(--color-text);
  line-height: 1.9;
}

.article-body li {
  margin-bottom: 8px;
}

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

.article-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;
}

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

.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 0.9375rem;
  line-height: 1.8;
}

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

.article-body th {
  background-color: var(--gray-50);
  color: var(--color-heading);
  font-weight: 600;
}

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

.article-attachments {
  margin-top: 8px;
}

/* 內文下方的圖片縮圖（後台「圖片上傳」區塊）：小縮圖格線，點了開共用燈箱（js/pages/article.js）。
   ⚠️ 放大效果掛在 img 上，不掛在 <a>：<a> 有 data-aos，AOS 動畫結束的 transform 會蓋掉 <a> 自己的 hover transform。 */
/* 縮圖寬度固定在 96～120px（使用者 2026-09-19：縮圖小一點），靠左排、放得下幾張就排幾張，不再撐滿整欄 */
.article-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 120px));
  gap: 8px;
  margin: 32px 0 8px;
}

.article-gallery-item {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  cursor: zoom-in;
}

.article-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

.article-gallery-item:hover img,
.article-gallery-item:focus-visible img {
  transform: scale(1.05);
}

.article-gallery-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .article-gallery-item img {
    transition: none;
  }

  .article-gallery-item:hover img,
  .article-gallery-item:focus-visible img {
    transform: none;
  }
}

/* 上一篇／下一篇：同分類文章導覽 */
.article-adjacent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.article-adjacent-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 24px;
  min-height: 1px;
  transition: opacity 0.2s ease-out;
}

.article-adjacent-prev {
  padding-left: 0;
  border-right: 1px solid var(--color-border);
  align-items: flex-start;
  text-align: left;
}

.article-adjacent-next {
  padding-right: 0;
  align-items: flex-end;
  text-align: right;
}

.article-adjacent-link:hover {
  opacity: 0.7;
}

.article-adjacent-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
}

.article-adjacent-title {
  font-size: 0.9375rem;
  color: var(--color-text);
  line-height: 1.6;
}
/* ==========================================
   M10（客戶 2026-08-17）：社群分享按鈕
   ------------------------------------------
   三顆：Facebook／LINE／複製連結。位置在附件下載之後、上一篇／下一篇之前。
   ✅ 品牌色用 style.css :root 既有的 --brand-facebook / --brand-line
      （右下角浮動社群鈕在用同一組），不另外調色。
   ⚠️ 白字配這兩個品牌色的對比：#1877F2 → 4.23、#06C755 → 2.26，都低於 AA 4.5。
      🔴 **三顆仍然統一用白字，這是已知並接受的取捨**（PM 2026-08-18 定案，
         2026-08-19 客戶把會員專區那顆也指定成白字，全站四處已一致）。
      ⚠️ 這段原本寫「LINE 那顆用深色文字（與 F3 會員專區同一個處理）」——**兩處都已改成白字**，
         那句話連同它引用的 F3 依據都已作廢，不要照著改回去。
      🔴 兩顆都不要改成金色 hover：那會讓兩個品牌色在 hover 時消失，
         使用者反而分不出是分享到哪裡。hover 只加深同色。
   ⚠️ 手機三顆會換行（flex-wrap），不要用固定寬度。
   ========================================== */
.article-share {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.article-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.article-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.article-share-btn svg,
.article-share-btn i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.article-share-btn.is-facebook {
  background-color: var(--brand-facebook);
  color: #FFFFFF;
}

.article-share-btn.is-facebook:hover,
.article-share-btn.is-facebook:focus-visible {
  background-color: var(--brand-facebook-hover);
}

/* 🔴 LINE 這顆用**白字**，對比只有 2.26（低於 AA 的 4.5）——
   **這是已知並接受的取捨，不是漏改**（PM 2026-08-18 定案）。三個理由：
     1. 綠底白字**正是 LINE 官方自己的按鈕用法**，使用者對它有既定認知
     2. 這一排的品牌按鈕本來就達不到 AA——Facebook 藍配白字也只有 4.23
     3. 三顆統一白字，視覺才一致
   ⚠️ **不要為了過 AA 去改 LINE 綠**：`#06C755` 是 PM 2026-08-12 定案的官方品牌色。
   ⚠️ 也不要改回深色字——那是 2026-08-18 之前的做法，PM 已明確否決。
   ✅ 按鈕本身有圖示＋文字＋色塊三個訊號，不是只靠文字顏色辨識（見 CLAUDE.md 七之二節）。 */
.article-share-btn.is-line {
  background-color: var(--brand-line);
  color: #FFFFFF;
}

.article-share-btn.is-line:hover,
.article-share-btn.is-line:focus-visible {
  background-color: var(--brand-line-hover);
}

/* 複製連結改成**實心紫底白字**（PM 2026-08-18），與另兩顆一樣是實心色塊——
   原本是白底＋邊框的次要按鈕外觀，夾在兩顆實心品牌鈕中間看起來像「還沒做好」。
   ⚠️ 紫底白字對比 **8.09**（Q4 前主色 #451470 是 13.23），仍遠高於 AA 的 4.5。
      （規格寫 6.72 是引錯了——那是歡迎區漸層「最亮端」的值，
       這裡是純色 --color-primary。）
   🔴 hover **仍走全站金色標準**：它不是品牌按鈕，沒有「顏色要保留」的理由
      （另兩顆是加深自己的品牌色，理由見上面 LINE 那段）。 */
.article-share-btn.is-copy {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

.article-share-btn.is-copy:hover,
.article-share-btn.is-copy:focus-visible {
  background-image: linear-gradient(135deg, var(--gold-from), var(--gold-to));
  color: var(--color-on-gold);
}