/* ============================================================
   📜 祥興茶行 — 茶葉專欄 / 日式工藝誌風格
   2026-06-12 重塑:茶湯色票、封面故事、文字封面、注茶進度、
   滾動顯影、蓋印儀式、View Transitions。
   ============================================================ */

/* ── Custom Properties ───────────────────────────────────── */
:root {
  --parch:       #f2ece0;
  --parch-deep:  #e8dfd0;
  --ink:         #1c1812;
  --ink-mid:     #4a4035;
  --ink-light:   rgba(28, 24, 18, 0.38);
  --seal:        #a83228;            /* 印章紅:只留 hanko、期號、蓋印 */
  --seal-dim:    rgba(168, 50, 40, 0.1);
  --rule:        rgba(28, 24, 18, 0.12);
  --gold:        #a98b4f;
  --art-ease:    cubic-bezier(.22, .61, .36, 1);

  /* 茶湯色票(JS 依分類覆寫 --tea / --tea-soft) */
  --tea-green:   #5d7a3f;
  --tea-amber:   #a3742f;
  --tea-russet:  #8f4631;
  --tea-dark:    #2f4b3c;
  --tea:         var(--tea-dark);
  --tea-soft:    rgba(47, 75, 60, 0.12);
}

/* ── View Transitions(同文件過場)─────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
}
::view-transition-old(article-cover),
::view-transition-new(article-cover) {
  animation-duration: 0.32s;
  animation-timing-function: var(--art-ease);
}

/* ── 頁面基礎 ─────────────────────────────────────────────── */
.articles-page {
  min-height: 100vh;
  background: var(--parch);
  color: var(--ink);
  font-family: 'Source Sans 3', 'Noto Sans TC', system-ui, sans-serif;
  position: relative;
}

/* Paper grain texture */
.articles-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.articles-page > * { position: relative; z-index: 1; }

/* ── Hero Masthead(刊頭)──────────────────────────────────── */
.articles-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 40px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  border-bottom: 1px solid var(--rule);
}

.articles-hero::before {
  content: 'Hsianghsing Tea · 茶葉專欄';
  display: block;
  grid-column: 1 / -1;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-light);
  font-family: 'Source Sans 3', sans-serif;
  margin-bottom: -12px;
  animation: artHeroIn .7s var(--art-ease) both;
}

.articles-hero-title {
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 300;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  animation: artHeroIn .7s .08s var(--art-ease) both;
}

.articles-hero-sub {
  font-size: 14px;
  color: var(--ink-mid);
  margin: 0;
  line-height: 1.8;
  font-weight: 300;
  animation: artHeroIn .7s .16s var(--art-ease) both;
}

/* Hanko seal */
.articles-hero-seal {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border: 2px solid var(--seal);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  opacity: 0.55;
  animation: sealIn 1.1s .3s var(--art-ease) both;
  align-self: center;
}

@keyframes sealIn {
  from { opacity: 0; transform: scale(0.82) rotate(-10deg); }
  to   { opacity: 0.55; transform: scale(1) rotate(0deg); }
}

.articles-hero-seal-text {
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--seal);
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
}

.articles-hero-seal-year {
  font-family: 'Playfair Display', serif;
  font-size: 10px;
  color: var(--seal);
  letter-spacing: 0.08em;
}

@keyframes artHeroIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 封面故事(本期特輯)──────────────────────────────────── */
.cover-story {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 40px;
  display: grid;
  grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--rule);
}

.cover-story-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  padding-left: 34px;
}

/* 直書 kicker:本期特輯 */
.cover-story-kicker {
  position: absolute;
  left: 0;
  top: 2px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--tea);
  border-left: 1px solid var(--tea);
  padding-left: 10px;
  line-height: 1;
}

.cover-story-issue {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--seal);
  opacity: 0.7;
  letter-spacing: 0.04em;
}

.cover-story-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cover-story-title {
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
  color: var(--ink);
  letter-spacing: 0.02em;
  transition: color .25s var(--art-ease);
}

.cover-story:hover .cover-story-title { color: var(--tea); }

.cover-story-summary {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-mid);
  font-weight: 300;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cover-story-cta {
  font-size: 11px;
  font-family: 'Source Sans 3', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tea);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap .2s var(--art-ease);
}
.cover-story:hover .cover-story-cta { gap: 16px; }
.cover-story-cta::after {
  content: '';
  width: 36px;
  height: 1px;
  background: var(--tea);
  opacity: 0.5;
}

/* 印刷感:圖後方錯位茶色色塊 */
.cover-story-media {
  position: relative;
}
.cover-story-media::before {
  content: '';
  position: absolute;
  inset: 14px -14px -14px 14px;
  background: var(--tea-soft);
  border: 1px solid color-mix(in srgb, var(--tea) 30%, transparent);
  pointer-events: none;
}
.cover-story-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3; /* 封面統一 4:3＋cover 填滿（2026-07-10 業主拍板：產圖工具固定 1448×1086＝4:3，原 16:9 槽把資訊圖上下裁 25%；舊 16:9 照片封面改裁側邊＝照片無感）*/
  object-fit: cover;
  display: block;
}
img.cover-story-img { will-change: transform; }

/* ── 分類 Filter Tabs ─────────────────────────────────────── */
/* ── 搜尋 × 難度 工具列（2026-07-09 文章首頁優化）──────────────────── */
.articles-toolbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 40px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.articles-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  max-width: 420px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  transition: border-color .2s, box-shadow .2s;
}

.articles-search:focus-within {
  border-color: var(--ink-light);
  box-shadow: 0 2px 14px rgba(40, 30, 16, .08);
}

.articles-search svg {
  width: 16px;
  height: 16px;
  color: var(--ink-light);
  flex-shrink: 0;
}

.articles-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--ink);
  font-family: inherit;
}

.articles-search input::-webkit-search-cancel-button { display: none; }

.articles-search-clear {
  display: none;
  border: none;
  background: transparent;
  color: var(--ink-light);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
}

.articles-search-clear.show { display: block; }

.articles-levels {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.level-chip {
  padding: 6px 14px;
  border: 1px solid var(--lv, var(--rule));
  border-radius: 999px;
  background: transparent;
  color: var(--lv, var(--ink-mid));
  font-size: 12px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
  white-space: nowrap;
}

.level-chip:hover { background: var(--lv-soft); transform: translateY(-1px); }

.level-chip.active {
  background: var(--lv);
  color: #fbf8ef;
}

.article-level-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--lv-soft, rgba(0, 0, 0, .06));
  color: var(--lv, var(--ink-mid));
  font-size: 11px;
  letter-spacing: .1em;
  white-space: nowrap;
}

.articles-count {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 40px 0;
  font-size: 13px;
  color: var(--ink-mid);
  letter-spacing: .06em;
}

.articles-clear-btn {
  display: block;
  margin: 14px auto 0;
  padding: 8px 20px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mid);
  font-size: 13px;
  cursor: pointer;
}

.articles-clear-btn:hover { color: var(--ink); border-color: var(--ink-light); }

@media (max-width: 640px) {
  .articles-toolbar { padding: 20px 20px 0; }
  .articles-search { flex: 1 1 100%; max-width: none; }
  .articles-levels { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .articles-levels::-webkit-scrollbar { display: none; }
  .articles-count { padding: 12px 20px 0; }
}

.articles-filter {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 40px 0;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.articles-filter::-webkit-scrollbar { display: none; }

.filter-tab {
  padding: 8px 20px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-light);
  font-size: 12px;
  font-family: 'Source Sans 3', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s var(--art-ease);
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-tab:hover {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.filter-tab.active {
  color: var(--tea);
  border-bottom-color: var(--tea);
  font-weight: 600;
}

/* ── 文章卡片 Grid ────────────────────────────────────────── */
.articles-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 40px 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* ── 文章卡片共用 ─────────────────────────────────────────── */
.article-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  transition: background .3s var(--art-ease);
}

.article-card:hover { background: var(--parch-deep); }
.article-card.is-loading { opacity: .6; }

/* 滾動顯影 */
.art-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--art-ease), transform .6s var(--art-ease);
}
.art-reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.article-card-cover {
  width: 100%;
  aspect-ratio: 4/3; /* 封面統一 4:3＋cover 填滿（2026-07-10，同 .cover-story-img 註解）*/
  object-fit: cover;
  display: block;
  transition: transform .5s var(--art-ease);
}

.article-card:hover img.article-card-cover { transform: scale(1.04); }

/* ── 文字封面 fallback(無圖文章)─────────────────────────── */
.article-cover-text {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--tea) 92%, #fff) 0%, var(--tea) 58%, color-mix(in srgb, var(--tea) 78%, #000) 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: 18px;
}
.article-cover-text::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  pointer-events: none;
}
.article-cover-text-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.14em;
  color: rgba(244, 239, 228, 0.96);
  max-height: calc(100% - 16px);
  max-width: calc(100% - 40px);
  overflow: hidden;
  margin-top: 8px;
}
.article-cover-text-issue {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(244, 239, 228, 0.62);
}

.article-card-body {
  padding: 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 期號(JS 計算,最新一篇期號最大)*/
.article-issue {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-style: italic;
  color: var(--seal);
  opacity: 0.65;
  flex-shrink: 0;
}

.article-category-badge {
  font-size: 10px;
  padding: 2px 8px;
  border: 1px solid var(--tea);
  border-radius: 0;
  color: var(--tea);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Source Sans 3', sans-serif;
  background: var(--tea-soft);
}

.article-date,
.article-read-time {
  font-size: 11px;
  color: var(--ink-light);
  font-family: 'Source Sans 3', sans-serif;
  letter-spacing: 0.02em;
}

.article-card-title {
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.02em;
}

.article-card-summary {
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.8;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 300;
}

.article-card-footer {
  padding: 0 24px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-family: 'Source Sans 3', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tea);
  transition: gap .2s var(--art-ease);
}

.article-card:hover .article-card-footer { gap: 14px; }

.article-card-footer::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tea);
  opacity: 0.28;
  transition: opacity .2s;
}

.article-card:hover .article-card-footer::after { opacity: 0.65; }

/* ── Skeleton(羊皮紙 shimmer)────────────────────────────── */
.is-skeleton { pointer-events: none; }

.sk-block,
.sk-line {
  background: linear-gradient(100deg,
    rgba(28, 24, 18, 0.07) 35%,
    rgba(28, 24, 18, 0.13) 50%,
    rgba(28, 24, 18, 0.07) 65%);
  background-size: 240% 100%;
  animation: skShimmer 1.4s ease-in-out infinite;
}

.sk-cover { aspect-ratio: 4/3; width: 100%; }
.sk-cover-lg { aspect-ratio: 4/3; width: 100%; }

.sk-line {
  height: 12px;
  margin: 10px 0;
  border-radius: 2px;
}
.sk-line.sk-tall { height: 20px; }

@keyframes skShimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* ── 空狀態 / Loading / 錯誤 ─────────────────────────────── */
.articles-loading,
.articles-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-light);
  font-size: 14px;
  font-family: 'Source Sans 3', sans-serif;
}

.articles-error-box {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-mid);
  font-size: 14px;
  font-family: 'Source Sans 3', sans-serif;
}

.articles-retry-btn {
  margin-top: 16px;
  padding: 10px 32px;
  background: transparent;
  border: 1px solid var(--ink-mid);
  color: var(--ink);
  font-size: 12px;
  font-family: 'Source Sans 3', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.articles-retry-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--parch);
}

/* ── 注茶閱讀進度(左下懸浮圓盞,與右下問阿興師呼應)──────── */
.article-progress-cup {
  position: fixed;
  left: 16px;
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  z-index: 90;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--parch);
  border: 1px solid var(--rule);
  box-shadow: 0 6px 22px rgba(28, 24, 18, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .3s var(--art-ease), transform .3s var(--art-ease);
}
.article-progress-cup.show { opacity: 1; transform: none; }
.article-progress-cup svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* 弧線從 12 點鐘方向開始注 */
}
.apc-track {
  fill: none;
  stroke: var(--rule);
  stroke-width: 2.5;
}
.apc-fill {
  fill: none;
  stroke: var(--tea);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 131.9;
  stroke-dashoffset: 131.9;
}
.apc-glyph {
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-mid);
}
.article-progress-cup.done .apc-glyph { color: var(--seal); }
.article-progress-cup.done { border-color: color-mix(in srgb, var(--seal) 35%, transparent); }

/* ── 文章詳情頁 ──────────────────────────────────────────── */
.article-detail {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 40px 100px;
}

.article-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  color: var(--tea);
  font-size: 11px;
  font-family: 'Source Sans 3', sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  background: none;
  border: none;
  margin: 32px 0 0;
  transition: gap .2s var(--art-ease);
}

.article-back-btn:hover { gap: 12px; }

/* 閱讀頁頂列：返回鈕 ｜ 日/夜切換（低調、靠右，不擋標題）2026-07-20 */
.article-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.article-topbar .tj-theme-ctrl {
  display: inline-flex;
  align-items: center;
  margin-top: 32px; /* 與 .article-back-btn 的上緣對齊 */
}

.article-hero {
  margin: 28px 0 40px;
}

.article-hero-cover {
  width: 100%;
  border-radius: 2px;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

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

.article-title {
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 20px;
  letter-spacing: 0.01em;
}

.article-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-light);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 36px;
  font-family: 'Source Sans 3', sans-serif;
  letter-spacing: 0.03em;
}

.article-byline { display: inline-flex; align-items: baseline; gap: 8px; }
.article-byline-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-light);
  border-right: 1px solid var(--rule);
  padding-right: 8px;
}

/* ── Markdown 內文排版 ────────────────────────────────────── */
.article-content {
  font-size: 16px;
  line-height: 2;
  color: var(--ink-mid);
}

.article-content h1,
.article-content h2,
.article-content h3 {
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  color: var(--ink);
  margin: 2.5em 0 .7em;
  line-height: 1.4;
}

.article-content h1 { font-size: 1.7em; font-weight: 400; }
.article-content h2 {
  font-size: 1.25em;
  font-weight: 400;
  padding-bottom: .4em;
  border-bottom: 1px solid var(--rule);
}
.article-content h3 { font-size: 1.05em; font-weight: 700; color: var(--tea); }

.article-content p { margin: 0 0 1.4em; }

.article-content img {
  width: 100%;
  border-radius: 2px;
  margin: 2em 0;
  display: block;
}

.article-content a {
  color: var(--tea);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--tea) 35%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
.article-content a:hover { text-decoration-color: var(--tea); }

/* 引用連結 [n]：上標、可點跳到參考文獻（2026-07-09） */
.article-content a.cite-ref {
  font-size: .72em;
  vertical-align: super;
  line-height: 0;
  font-weight: 600;
  color: var(--tea);
  text-decoration: none;
  padding: 0 1px;
  white-space: nowrap;
  cursor: pointer;
}
.article-content a.cite-ref:hover { text-decoration: underline; text-underline-offset: 2px; }
.article-content li.cite-flash {
  animation: citeFlash 1.6s ease-out;
  border-radius: 6px;
}
@keyframes citeFlash {
  0%, 30% { background: color-mix(in srgb, var(--tea) 22%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tea) 10%, transparent); }
  100% { background: transparent; box-shadow: none; }
}

/* 圖表/示意圖防跑版（2026-07-09）：mermaid 家譜樹等寬圖在窄螢幕或英日文更長時，
   一律裝進可橫捲容器、SVG 不超出寬度，避免撐爆整頁版面。 */
.article-content .mermaid {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  margin: 24px 0;
}
.article-content .mermaid svg { max-width: 100%; height: auto; }
.article-content svg { max-width: 100%; height: auto; }
/* 寬圖（家譜樹等）：JS 判定原生寬度遠超容器時掛 .mermaid--wide——
   SVG 以原生寬度呈現、容器橫捲（縮到 100% 在手機＝小到不可讀），下方附滑動提示 */
.article-content .mermaid--wide { text-align: left; }
.article-content .mermaid--wide svg { max-width: none; }
.article-content .mermaid-swipe-hint {
  margin: -14px 0 28px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.55;
}

.article-content blockquote {
  margin: 2em 0;
  padding: 18px 24px;
  border-left: 3px solid var(--tea);
  background: var(--tea-soft);
  border-radius: 0 2px 2px 0;
  color: var(--ink-mid);
  font-style: italic;
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: 1.02em;
  line-height: 1.85;
}

.article-content code {
  font-family: monospace;
  background: var(--parch-deep);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: .88em;
  color: var(--tea);
  border: 1px solid var(--rule);
}

.article-content pre {
  background: var(--parch-deep);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 20px;
  overflow-x: auto;
  margin: 1.5em 0;
}

.article-content pre code {
  background: none;
  padding: 0;
  color: var(--ink);
  border: none;
  font-size: .85em;
}

.article-content table {
  /* 2026-07-04 健檢修：手機無橫捲容器＝多欄表格擠爛/撐破欄 */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 14px;
}

.article-content th {
  background: var(--parch-deep);
  color: var(--ink);
  font-weight: 700;
  padding: 10px 16px;
  text-align: left;
  border-bottom: 2px solid var(--rule);
  font-family: 'Source Sans 3', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-content td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-mid);
}

/* 圖表備援對照表收進 details（2026-07-09 tea-gift-guide 重排起採用） */
.article-content details {
  margin: 12px 0 28px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .4);
}

.article-content details summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-mid);
  letter-spacing: .04em;
}

.article-content details table {
  margin: 12px 0 4px;
}

.article-content ul,
.article-content ol {
  padding-left: 1.5em;
  margin: 0 0 1.4em;
}

.article-content li { margin-bottom: .5em; }

/* 書籤卡片 */
.article-content ul li > a:only-child {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  margin: 4px 0;
  background: var(--tea-soft);
  border: 1px solid color-mix(in srgb, var(--tea) 20%, transparent);
  border-left: 3px solid var(--tea);
  border-radius: 0 2px 2px 0;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: .92em;
  transition: background .18s, transform .15s;
}

.article-content ul li > a:only-child::before {
  content: '→';
  color: var(--tea);
  font-size: 13px;
  flex-shrink: 0;
}

.article-content ul li > a:only-child:hover {
  background: color-mix(in srgb, var(--tea) 14%, transparent);
  transform: translateX(4px);
}

.article-content ul:has(li > a:only-child) {
  list-style: none;
  padding-left: 0;
}

.article-content hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2.5em 0;
}

/* ── 文末蓋印儀式 ─────────────────────────────────────────── */
.article-endmark {
  margin: 64px 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.endmark-seal {
  width: 76px;
  height: 76px;
  border: 2.5px solid var(--seal);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--seal);
  opacity: 0;
  transform: scale(1.8) rotate(8deg);
}

.article-endmark.stamped .endmark-seal {
  animation: stampIn .45s var(--art-ease) forwards;
}

/* 蓋章:大→小減速落定,85% 處輕微過壓再回正(非彈跳) */
@keyframes stampIn {
  0%   { opacity: 0; transform: scale(1.8) rotate(8deg); }
  70%  { opacity: 0.9; transform: scale(0.96) rotate(-2.5deg); }
  85%  { opacity: 0.88; transform: scale(1.02) rotate(-3deg); }
  100% { opacity: 0.85; transform: scale(1) rotate(-3deg); }
}

.endmark-seal-main {
  writing-mode: vertical-rl;
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
}

.endmark-seal-sub {
  writing-mode: vertical-rl;
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  opacity: 0.75;
  line-height: 1;
}

.endmark-caption {
  font-size: 11px;
  font-family: 'Source Sans 3', sans-serif;
  letter-spacing: 0.22em;
  color: var(--ink-light);
  opacity: 0;
  transition: opacity .6s var(--art-ease) .3s;
}
.article-endmark.stamped .endmark-caption { opacity: 1; }

.endmark-next {
  margin-top: 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--art-ease) .5s, transform .6s var(--art-ease) .5s;
}
.article-endmark.stamped .endmark-next {
  opacity: 1;
  transform: translateY(0);
}

.endmark-next-label {
  font-size: 10px;
  font-family: 'Source Sans 3', sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tea);
}

.endmark-next-title {
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.6;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.endmark-next:hover .endmark-next-title { border-bottom-color: var(--ink); }

/* ── 問阿興師浮動入口 ─────────────────────────────────────── */
.article-ask-master {
  position: fixed;
  right: 20px;
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--parch);
  color: var(--tea-dark);
  border: 1px solid var(--tea-dark);
  border-radius: 999px;
  font-size: 13px;
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(28, 24, 18, 0.16);
  transition: background .2s, color .2s, transform .2s var(--art-ease);
}
.article-ask-master:hover {
  background: var(--tea-dark);
  color: var(--parch);
  transform: translateY(-2px);
}
.article-ask-master svg { flex-shrink: 0; }
.article-ask-master.is-loading { opacity: .55; pointer-events: none; }

/* ── 分享列 ───────────────────────────────────────────────── */
.article-share-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 40px 0 8px;
  padding: 20px 24px;
  background: var(--parch-deep);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.article-share-label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  flex-shrink: 0;
}
.article-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.article-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 2px;
  font-size: 12px;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.article-share-btn:hover { opacity: .82; }
.article-share-line {
  background: #06c755;
  color: #fff;
}
.article-share-threads {
  background: #000;
  color: #fff;
}
.article-share-fb {
  background: #1877f2;
  color: #fff;
}
.article-share-copy {
  background: var(--parch);
  color: var(--ink-mid);
  border: 1px solid var(--rule);
}

/* Hero variant — sits flush under the title, no box chrome */
.article-share-bar--hero {
  margin: 16px 0 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.article-share-bar--hero .article-share-copy {
  background: var(--parch-deep);
}

/* ── 相關好茶 ─────────────────────────────────────────────── */
.related-products-section {
  margin-top: 60px;
  padding: 28px 32px;
  background: var(--parch-deep);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.related-products-title {
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 20px;
  letter-spacing: 0.04em;
}

.related-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.related-product-card {
  background: var(--parch);
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--rule);
  transition: border-color .2s var(--art-ease), transform .2s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.related-product-card:hover {
  border-color: var(--tea);
  transform: translateY(-2px);
}

.related-product-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.related-product-img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(150deg, var(--parch-deep) 0%, #ddd5c2 100%);
  position: relative;
}
.related-product-img-placeholder::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--rule);
}

.related-product-info { padding: 10px 13px 14px; }

.related-product-name {
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.5;
}

.related-product-cta {
  font-size: 11px;
  color: var(--tea);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-family: 'Source Sans 3', sans-serif;
}

/* ── 主頁最新文章(保留備用)────────────────────────────── */
.latest-articles-section { padding: 32px 0 8px; }
.latest-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.latest-article-link { text-decoration: none; color: inherit; display: block; }

/* ── 推薦閱讀(編輯風,與列表卡同語言)───────────────────── */
.recommended-articles {
  /* 2026-07-04 健檢修：底 padding 避開「問阿興師」fixed 浮鈕 */
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 40px 80px;
  border-top: 1px solid var(--rule);
}

.recommended-articles-header {
  margin-bottom: 24px;
}

.recommended-articles-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-light);
  font-family: 'Source Sans 3', sans-serif;
}

.recommended-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.rec-article-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  transition: background .3s var(--art-ease);
}

.rec-article-card:hover { background: var(--parch-deep); }

.rec-article-cover {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--parch-deep);
}

.rec-article-cover-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--art-ease);
}
.rec-article-cover .article-cover-text { aspect-ratio: auto; height: 100%; }
.rec-article-cover .article-cover-text-title { font-size: 14px; }

.rec-article-card:hover img.rec-article-cover-media { transform: scale(1.04); }

.rec-article-body {
  padding: 14px 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.rec-article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rec-article-title {
  font-family: 'Noto Serif TC', 'Noto Serif TC Fallback', serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rec-article-summary {
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Reduced motion:全部靜止 ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .articles-hero::before,
  .articles-hero-title,
  .articles-hero-sub,
  .articles-hero-seal { animation: none; opacity: 1; transform: none; }
  .articles-hero-seal { opacity: 0.55; }
  .art-reveal { opacity: 1; transform: none; transition: none; }
  .sk-block, .sk-line { animation: none; }
  .article-endmark .endmark-seal { animation: none; opacity: 0.85; transform: scale(1) rotate(-3deg); }
  .endmark-caption, .endmark-next { opacity: 1; transform: none; transition: none; }
  .article-card-cover, .rec-article-cover-media, .cover-story-img { transition: none; }
  .article-progress-cup { transition: none; }
}

/* ── 響應式 ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* P2 收斂（2026-07-03）：頁首帶佔屏過高——padding 減半、標題縮級，
     目標＝進頁第一屏就看到封面故事 */
  .articles-hero {
    padding: 22px 20px 20px;
    grid-template-columns: 1fr auto;
    gap: 14px;
  }
  .articles-hero-title { font-size: clamp(30px, 8vw, 38px); margin-bottom: 8px; }
  .articles-hero-sub { font-size: 13px; line-height: 1.6; }
  .articles-hero::before { margin-bottom: -6px; }

  /* 檜印手機版保留(縮小),全頁最有記憶點的元素不再隱藏 */
  .articles-hero-seal {
    width: 64px; /* 56px 會讓直書「祥興茶行」折成兩欄溢出圓框 */
    height: 64px;
    border-width: 1.5px;
  }
  .articles-hero-seal-text { font-size: 10px; }
  .articles-hero-seal-year { font-size: 8px; }

  .cover-story {
    grid-template-columns: 1fr;
    padding: 28px 20px 32px;
    gap: 22px;
  }
  /* 手機:圖在上、文在下 */
  .cover-story-media { order: -1; }
  .cover-story-media::before { inset: 10px -8px -8px 10px; }
  .cover-story-text { padding-left: 30px; gap: 10px; }
  .cover-story-title { font-size: clamp(22px, 6vw, 28px); }

  .articles-filter { padding: 18px 20px 0; }

  .articles-grid {
    grid-template-columns: 1fr;
    padding: 24px 20px calc(60px + env(safe-area-inset-bottom, 0px));
  }

  .article-detail { padding: 0 20px calc(100px + env(safe-area-inset-bottom, 0px)); }
  .related-products-grid { grid-template-columns: 1fr 1fr; }

  .article-ask-master {
    right: 14px;
    padding: 10px 16px;
    font-size: 12px;
  }

  .article-progress-cup {
    left: 12px;
    width: 44px;
    height: 44px;
  }
  .apc-glyph { font-size: 14px; }
}

@media (max-width: 680px) {
  .recommended-articles {
    padding: 36px 20px 64px;
  }
  .recommended-articles-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rec-article-card {
    flex-direction: row;
    gap: 14px;
  }
  .rec-article-cover {
    width: 110px;
    min-width: 110px;
    aspect-ratio: auto;
    height: auto;
  }
  .rec-article-body { padding: 10px 4px 12px; }
}

/* 文末「回專欄列表」次要動線（2026-07-04 健檢修：讀畢原本只有往下的動線） */
.endmark-backlist {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  color: var(--tea, #5a7b68);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.endmark-backlist:hover { text-decoration: underline; }

/* ── 寬圖（家譜等 Mermaid）燈箱（2026-07-14）：點圖放大取代硬橫捲 ── */
.art-mmlb {
  position: fixed; inset: 0; z-index: 10070;
  background: rgba(18, 23, 19, 0.97);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.25s ease;
}
.art-mmlb.in { opacity: 1; }
.art-mmlb-scroll {
  position: absolute; inset: 0;
  overflow: auto; -webkit-overflow-scrolling: touch;
  display: grid; place-items: center;
}
.art-mmlb-stage { padding: 20px; }
.art-mmlb-stage svg { display: block; background: #f7f3e8; border-radius: 12px; padding: 14px; box-sizing: content-box; }
.art-mmlb-bar {
  position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; gap: 10px;
}
.art-mmlb-bar button {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #f3ead6; font-size: 19px; cursor: pointer;
}
.art-mmlb-bar button:active { transform: scale(0.94); }

/* ============================================================
   🌙 夜間閱讀體驗（night）— 內文／內容框／SVG／表格深色化
   2026-07-20：全部 scope 在 [data-tj-theme="night"] 之下（手機＝body、
   桌機＝.dar-detail 皆帶此屬性）。變數覆蓋再收斂到閱讀容器
   (.article-detail/.article-content)，list 場景（#tjPage）完全不受影響，
   day 模式 100% 不變。內容框是文章 inline 寫死的樣式，故用屬性選擇器
   ＋!important 覆蓋。色票對齊各篇文章實際使用值。
   ============================================================ */

/* 1) 內文 CSS 變數覆蓋（收斂在閱讀容器，避免波及 list 場景） */
[data-tj-theme="night"] .article-detail,
[data-tj-theme="night"] .article-content {
  --ink:         #e8e1d0;
  --ink-mid:     #c4bca8;
  --ink-light:   rgba(232, 225, 208, 0.42);
  --rule:        rgba(232, 225, 208, 0.14);
  --tea-green:   #9cbf86;
  --tea-amber:   #cfa15e;
  --tea-russet:  #d08a6f;
  --parch-deep:  #1b2a20;               /* code/pre/th 的淺底 → 深底 */
  /* 蓋過每篇 inline 在 .article-detail 上的分類色，夜間連結/h3 用暖金 */
  --tea:         #c1a05a !important;
  --tea-soft:    rgba(193, 160, 90, 0.16) !important;
}

/* details 展開框（day 是半透明白）→ 深色 */
[data-tj-theme="night"] .article-content details {
  background: rgba(255, 255, 255, 0.04);
}

/* 2) 內容框（卡片／callout）背景與邊框：屬性選擇器＋!important */
[data-tj-theme="night"] .article-content [style*="#fbfdf9"] { background: #16241c !important; }
[data-tj-theme="night"] .article-content [style*="#fbf6ec"] { background: #241f14 !important; }
[data-tj-theme="night"] .article-content [style*="rgba(47,93,58,.06)"],
[data-tj-theme="night"] .article-content [style*="rgba(62,107,78,.08)"] { background: rgba(150, 200, 160, 0.08) !important; }
[data-tj-theme="night"] .article-content [style*="rgba(54,73,52,.14)"],
[data-tj-theme="night"] .article-content [style*="rgba(54,73,52,.16)"] { border-color: rgba(210, 225, 205, 0.18) !important; }

/* 2b) 內容框內的 inline 文字色提亮 */
[data-tj-theme="night"] .article-content [style*="color:#2f5d3a"],
[data-tj-theme="night"] .article-content [style*="color:#3e6b4e"] { color: #a8cbb0 !important; }
[data-tj-theme="night"] .article-content [style*="color:#9a4a2e"] { color: #e0a07e !important; }
[data-tj-theme="night"] .article-content [style*="color:#b07a2e"] { color: #cdaa63 !important; }
[data-tj-theme="night"] .article-content [style*="color:#6a7a68"],
[data-tj-theme="night"] .article-content [style*="color:#6b7a6b"],
[data-tj-theme="night"] .article-content [style*="color:#8a8a7a"],
[data-tj-theme="night"] .article-content [style*="color:#4a5a48"],
[data-tj-theme="night"] .article-content [style*="color:#666"] { color: #9aa694 !important; }
[data-tj-theme="night"] .article-content [style*="color:#5a4a2e"] { color: #cbb48a !important; }

/* 3) SVG 示意圖：淺底 rect → 深底；文字 fill 提亮；分子式鍵結線提亮 */
[data-tj-theme="night"] .article-content svg [fill="#fbfdf9"],
[data-tj-theme="night"] .article-content svg [fill="#fbfef9"],
[data-tj-theme="night"] .article-content svg [fill="#fbf6ec"] { fill: #16241c; }
[data-tj-theme="night"] .article-content svg [fill="#2f5d3a"],
[data-tj-theme="night"] .article-content svg [fill="#3e6b4e"],
[data-tj-theme="night"] .article-content svg [fill="#6b8f5a"] { fill: #a8cbb0; }
[data-tj-theme="night"] .article-content svg [fill="#9a4a2e"] { fill: #e0a07e; }
[data-tj-theme="night"] .article-content svg [fill="#b07a2e"] { fill: #cdaa63; }
[data-tj-theme="night"] .article-content svg [fill="#6a7a68"],
[data-tj-theme="night"] .article-content svg [fill="#6b7a6b"],
[data-tj-theme="night"] .article-content svg [fill="#8a8a7a"],
[data-tj-theme="night"] .article-content svg [fill="#666"] { fill: #9aa694; }
[data-tj-theme="night"] .article-content svg [fill="#5a4a2e"] { fill: #cbb48a; }
/* 分子式（RDKit）：碳鍵 stroke 深綠、氮藍/氧紅 在夜底幾乎看不見 → 提亮 */
[data-tj-theme="night"] .article-content svg [style*="stroke:#285133"] { stroke: #9cbf86 !important; }
[data-tj-theme="night"] .article-content svg [style*="stroke:#0000FF"] { stroke: #6f9bff !important; }
[data-tj-theme="night"] .article-content svg [style*="stroke:#FF0000"] { stroke: #ff7a7a !important; }
[data-tj-theme="night"] .article-content svg [fill="#0000FF"] { fill: #6f9bff; }
[data-tj-theme="night"] .article-content svg [fill="#FF0000"] { fill: #ff7a7a; }

/* 4) grade-reg 表格（夜間）：邊框/表頭底/RWD 卡片標籤色 */
[data-tj-theme="night"] .article-content .grade-reg th,
[data-tj-theme="night"] .article-content .grade-reg td,
[data-tj-theme="night"] .article-content .grade-reg tr { border-color: rgba(210, 225, 205, 0.16) !important; }
[data-tj-theme="night"] .article-content .grade-reg thead { background: rgba(150, 200, 160, 0.10) !important; }
[data-tj-theme="night"] .article-content .grade-reg td::before { color: #9cbf86 !important; }

/* 5) Mermaid 夜間保底網（防「深色主題沒套到 → 深底上深字/深框＝整張空白」）：
   不論 mermaid 用哪個 theme 渲染，一律把節點填色/框線/文字/邊線/箭頭/邊標籤
   強制成夜間可讀色。與上方 JS(theme:'dark') 為雙保險。 */
[data-tj-theme="night"] .article-content .mermaid .nodeLabel,
[data-tj-theme="night"] .article-content .mermaid .edgeLabel,
[data-tj-theme="night"] .article-content .mermaid .cluster-label,
[data-tj-theme="night"] .article-content .mermaid span,
[data-tj-theme="night"] .article-content .mermaid p,
[data-tj-theme="night"] .article-content .mermaid text { color: #e8e1d0 !important; fill: #e8e1d0 !important; }
[data-tj-theme="night"] .article-content .mermaid .node rect,
[data-tj-theme="night"] .article-content .mermaid .node polygon,
[data-tj-theme="night"] .article-content .mermaid .node circle,
[data-tj-theme="night"] .article-content .mermaid .node ellipse,
[data-tj-theme="night"] .article-content .mermaid .node path { fill: #16241c !important; stroke: #9cbf86 !important; }
[data-tj-theme="night"] .article-content .mermaid .edgePaths path,
[data-tj-theme="night"] .article-content .mermaid .flowchart-link { stroke: #cfa15e !important; }
[data-tj-theme="night"] .article-content .mermaid marker path { fill: #cfa15e !important; stroke: #cfa15e !important; }
[data-tj-theme="night"] .article-content .mermaid .edgeLabel rect,
[data-tj-theme="night"] .article-content .mermaid .label-container { fill: #12100c !important; }
[data-tj-theme="night"] .article-content .mermaid .edgeLabel foreignObject div,
[data-tj-theme="night"] .article-content .mermaid .edgeLabel .labelBkg { background-color: #12100c !important; }

/* ============================================================
   專欄文章元件（art-*）  2026-08-07
   ------------------------------------------------------------
   ⚠️ 為什麼有這一區：文章內文長期只能用 inline style，因為專案文件誤記
   「CSS class 不會存活」。實際上 DOMPurify 預設放行 class（.chart-block /
   .map-block 就是靠 class 被 querySelectorAll 找到的），而本檔在
   articles.html 與 index.html 兩端都有載入 —— 也就是說，文章一直都能用
   完整 CSS，只是沒人幫它寫。

   用 class 取代 inline style 換回來的東西：真正的 media query（而不是
   flex-wrap 硬湊）、深色模式跟著 data-tj-theme 走（而不是靠
   [style*="#fbfdf9"] 這種比對 inline 色碼的 !important 覆蓋）、hover 與
   過場、以及「改一次全站文章一起變」。

   ⚠️ 命名一律 art- 前綴避免與站台其他樣式撞名。
   ⚠️ 新增元件請同步：.claude/skills/chayan（寫作端詞彙表）與
      scripts/article-render-check.html（QA 工具）。
   ============================================================ */

.article-content,
#dtArticles .dar-d-content {
  --artc-ink:     #232b25;
  --artc-muted:   #5d6a58;
  --artc-faint:   #909a88;
  --artc-line:    rgba(35, 43, 37, .14);
  --artc-surface: #fffdf8;
  --artc-tea:     #3e6b4e;
  --artc-gold:    #a8802f;
  --artc-clay:    #9a4a2e;
}
[data-tj-theme="night"] .article-content,
[data-tj-theme="night"] .dar-d-content {
  --artc-ink:     #e8e1d0;
  --artc-muted:   #b3ab97;
  --artc-faint:   #7f8877;
  --artc-line:    rgba(232, 225, 208, .17);
  --artc-surface: #1a2019;
  --artc-tea:     #86b291;
  --artc-gold:    #d3ab60;
  --artc-clay:    #d1815d;
}

/* ── A. 巢狀層級（art-nest）：包含關係就畫成包含，不要用箭頭排成流程 ── */
.article-content .art-nest,
.dar-d-content .art-nest { margin: 1.6em 0; }
.article-content .art-lv,
.dar-d-content .art-lv {
  border: 1.5px solid var(--artc-tea);
  border-radius: 18px;
  padding: clamp(11px, 2.6vw, 19px);
  background: color-mix(in srgb, var(--artc-tea) 7%, transparent);
}
.article-content .art-lv .art-lv,
.dar-d-content .art-lv .art-lv { margin-top: .75em; border-radius: 14px; }
/* 由外而內換色＋縮圓角，靠層數自動生效，寫作端不必逐層指定 */
.art-lv .art-lv { border-color: var(--artc-gold); background: color-mix(in srgb, var(--artc-gold) 9%, transparent); }
.art-lv .art-lv .art-lv { border-color: var(--artc-clay); background: color-mix(in srgb, var(--artc-clay) 10%, transparent); border-radius: 11px; }
.art-lv .art-lv .art-lv .art-lv { border-color: var(--artc-ink); background: var(--artc-surface); border-radius: 9px; }
.article-content .art-lv__head,
.dar-d-content .art-lv__head {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; line-height: 1.5;
}
.article-content .art-lv__tag,
.dar-d-content .art-lv__tag {
  font-size: .68em; letter-spacing: .14em; color: var(--artc-tea); white-space: nowrap;
}
.art-lv .art-lv > .art-lv__head > .art-lv__tag { color: var(--artc-gold); }
.art-lv .art-lv .art-lv > .art-lv__head > .art-lv__tag { color: var(--artc-clay); }
.art-lv .art-lv .art-lv .art-lv > .art-lv__head > .art-lv__tag { color: var(--artc-faint); }
.article-content .art-lv__name,
.dar-d-content .art-lv__name { font-weight: 700; font-size: 1em; color: var(--artc-ink); }

/* ── B. 縮放尺（art-scale）：層層縮排＋量級條。條長用 style="--w:38%" 指定 ── */
.article-content .art-scale,
.dar-d-content .art-scale { margin: 1.6em 0; display: flex; flex-direction: column; }
.article-content .art-scale__row,
.dar-d-content .art-scale__row {
  display: flex; align-items: center; gap: 12px;
  padding: .55em 0; border-bottom: 1px solid var(--artc-line);
}
.art-scale__row:last-child { border-bottom: none; }
.article-content .art-scale__lv,
.dar-d-content .art-scale__lv {
  flex: none; width: 4.6em; text-align: right;
  font-size: .68em; letter-spacing: .1em; color: var(--artc-faint);
}
.article-content .art-scale__name,
.dar-d-content .art-scale__name {
  flex: 1; min-width: 0; font-weight: 700; color: var(--artc-ink);
  padding-left: calc(var(--depth, 0) * 14px);
}
.article-content .art-scale__bar,
.dar-d-content .art-scale__bar {
  flex: none; width: var(--w, 20%); max-width: 150px; height: 7px;
  border-radius: 99px; background: var(--artc-tea);
}
.art-scale__row:nth-child(2) .art-scale__bar { background: var(--artc-gold); }
.art-scale__row:nth-child(3) .art-scale__bar { background: var(--artc-clay); }
.art-scale__row:nth-child(4) .art-scale__bar { background: var(--artc-ink); }
@media (max-width: 520px) {
  .art-scale__bar { display: none; }        /* 窄畫面條會擠掉名稱，直接不顯示 */
  .art-scale__lv { width: 3.4em; }
}

/* ── C. 並列欄（art-cols）：結構相同的數筆資料，別排成一段文字 ── */
.article-content .art-cols,
.dar-d-content .art-cols {
  display: grid; gap: 16px; margin: 1.6em 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.article-content .art-col,
.dar-d-content .art-col { border-top: 3px solid var(--artc-tea); padding-top: 12px; min-width: 0; }
.art-col--gold { border-top-color: var(--artc-gold); }
.art-col--clay { border-top-color: var(--artc-clay); }
.article-content .art-col__name,
.dar-d-content .art-col__name { display: block; font-weight: 700; font-size: 1em; margin-bottom: .35em; color: var(--artc-ink); }
.article-content .art-col p,
.dar-d-content .art-col p { font-size: .92em; color: var(--artc-muted); line-height: 1.85; margin: 0 0 .6em; }
.article-content .art-col__tag,
.dar-d-content .art-col__tag {
  display: inline-block; font-size: .78em; color: var(--artc-faint);
  border: 1px solid var(--artc-line); border-radius: 999px; padding: 2px 10px;
}

/* ── D. 段前引導（art-lead）：導引性文字不需要一整張卡片 ── */
.article-content .art-lead,
.dar-d-content .art-lead {
  border-top: 1px solid var(--artc-line); border-bottom: 1px solid var(--artc-line);
  padding: 1.05em 0; margin: 1.6em 0;
}
.article-content .art-lead__label,
.dar-d-content .art-lead__label {
  display: block; font-size: .7em; letter-spacing: .18em;
  color: var(--artc-tea); margin-bottom: .5em;
}
.article-content .art-lead p,
.dar-d-content .art-lead p { margin: 0 0 .5em; }
.article-content .art-lead p:last-child,
.dar-d-content .art-lead p:last-child { margin-bottom: 0; font-size: .92em; color: var(--artc-muted); }

/* B 的變體：右側改放「有幾個」而不是量級條。
   ⚠️ 用途分野——有真實數字時一律用 --count（數字本身就是資訊）；
   沒有數字、只想表達「一層比一層小」時才用量級條，且不可宣稱比例。 */
.article-content .art-scale--count .art-scale__bar,
.dar-d-content .art-scale--count .art-scale__bar { display: none; }
.article-content .art-scale__num,
.dar-d-content .art-scale__num {
  flex: none; font-size: .84em; color: var(--artc-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── E. 定義列（art-dl）：「地名 → 說明」這種清單，別排成 ・粗體 一長串 ──
   地名靠左對齊成一欄，說明在右，掃讀時眼睛不用來回找開頭。 */
.article-content .art-dl,
.dar-d-content .art-dl { margin: 1.5em 0; display: flex; flex-direction: column; gap: .85em; }
.article-content .art-dl__row,
.dar-d-content .art-dl__row { display: flex; flex-wrap: wrap; gap: .2em 1.1em; }
.article-content .art-dl__term,
.dar-d-content .art-dl__term {
  flex: 0 0 clamp(6.5em, 24%, 11em); font-weight: 700; color: var(--artc-clay); line-height: 1.75;
}
.art-dl--tea .art-dl__term { color: var(--artc-tea); }
.art-dl--gold .art-dl__term { color: var(--artc-gold); }
.article-content .art-dl__desc,
.dar-d-content .art-dl__desc { flex: 1 1 16em; min-width: 0; color: var(--artc-muted); line-height: 1.85; }
@media (max-width: 560px) {
  .art-dl__term { flex-basis: 100%; }        /* 窄畫面改上下堆疊，別把說明擠成一字一行 */
  .art-dl__desc { flex-basis: 100%; }
}

/* E 的變體：term 是序號（一、二、三）而不是詞條時（art-dl--num）——
   預設 term 欄寬 clamp(6.5em,24%,11em) 是為「詞條 → 說明」設計的，放一個
   「一」字進去，桌機看起來像無故縮排，窄畫面（term 100%）更會讓那一個字
   自己獨佔一行。序號只需要自己的寬度。 */
.article-content .art-dl--num .art-dl__term,
.dar-d-content .art-dl--num .art-dl__term { flex: 0 0 auto; min-width: 1.7em; }
@media (max-width: 560px) {
  .art-dl--num .art-dl__term { flex-basis: auto; }
  .art-dl--num .art-dl__desc { flex-basis: 12em; }   /* 別讓說明被擠到序號下一行 */
}

/* ── F. 輕註記（art-note）：需要一點份量但不必整張卡片的補充 ──
   只用左側細線＋淡底，不搶正文。真正需要被隔離的警語才用完整卡片。 */
.article-content .art-note,
.dar-d-content .art-note {
  border-left: 2px solid var(--artc-line); padding: .2em 0 .2em 1.1em; margin: 1.4em 0;
  color: var(--artc-muted); font-size: .94em;
}
.article-content .art-note b,
.dar-d-content .art-note b { color: var(--artc-ink); }
.art-note--tea { border-left-color: var(--artc-tea); }
.art-note--gold { border-left-color: var(--artc-gold); }
.art-note--clay { border-left-color: var(--artc-clay); }

/* ── G. 圖說（art-cap）：圖／示意圖下方的說明，含資料授權與限制句 ──
   ⚠️ 限制句放這裡而不是卡片裡：它必須貼著圖被看到，但不該搶走圖的份量。
   不設固定寬度、不進 SVG——翻成英日文變長時自己換行，不會撐破版面。 */
.article-content .art-cap,
.dar-d-content .art-cap {
  text-align: center; font-size: .84em; line-height: 1.7;
  color: var(--artc-muted); margin: -4px 0 1.7em;
  text-wrap: pretty;
}
.article-content .art-cap b,
.dar-d-content .art-cap b { color: var(--artc-ink); font-weight: 700; }

/* ── H. 圖框（art-fig）：置中放示意圖／SVG，取代 inline 的 text-align ── */
.article-content .art-fig,
.dar-d-content .art-fig { margin: 1.6em 0; text-align: center; }

/* ── I. 警語卡（art-call）：⚠️ 全篇最多留兩三個 ──
   卡片的力量來自稀有：帶框區塊一多，讀者會連真正的警語一起略過。
   只有「安全提醒／資料限制／會踩到的坑」值得用它；補充說明用 art-note。
   ⚠️ 一律淡色底＋左粗條，不要白底——白底卡片在頁面上就是一塊空白，
   既沒有卡片的份量，又打斷了正文。 */
.article-content .art-call,
.dar-d-content .art-call {
  border-left: 4px solid var(--artc-gold);
  background: color-mix(in srgb, var(--artc-gold) 10%, transparent);
  border-radius: 0 12px 12px 0;
  padding: clamp(12px, 2.4vw, 16px) clamp(14px, 3vw, 20px);
  margin: 1.7em 0;
  line-height: 1.85;
}
.art-call--tea  { border-left-color: var(--artc-tea);  background: color-mix(in srgb, var(--artc-tea) 9%, transparent); }
.art-call--clay { border-left-color: var(--artc-clay); background: color-mix(in srgb, var(--artc-clay) 9%, transparent); }
.article-content .art-call__title,
.dar-d-content .art-call__title { display: block; font-weight: 700; margin-bottom: .3em; color: var(--artc-ink); }
.article-content .art-call .art-dl,
.dar-d-content .art-call .art-dl { margin: .6em 0 0; gap: .6em; }

/* E 的補件：群組共同的註（art-dl__foot）——「以上都在勐海縣」這種
   一次管住上面好幾列的限定語。它屬於清單，不該掉回正文變成孤兒句。 */
.article-content .art-dl__foot,
.dar-d-content .art-dl__foot {
  color: var(--artc-faint); font-size: .9em; line-height: 1.75; padding-top: .15em;
}

/* ── J. 示意圖配色（art-svg）：SVG 的 fill 寫死就不會跟著夜間主題變 ──
   在 <svg> 掛 art-svg，文字一律吃 --artc-ink，例外用 __muted / __clay；
   方塊用 __box 系列，色相與 art-nest 同一組。原本的 fill/stroke 屬性
   請保留當後備（CSS 有載入時 class 會蓋過它）。 */
.article-content .art-svg text,
.dar-d-content .art-svg text { fill: var(--artc-ink); }
.article-content .art-svg .art-svg__muted,
.dar-d-content .art-svg .art-svg__muted { fill: var(--artc-muted); }
.article-content .art-svg .art-svg__clay,
.dar-d-content .art-svg .art-svg__clay { fill: var(--artc-clay); }
/* 三色系的文字色：用在「證據強度」這類需要與方塊同色的標籤，
   以及 SVG 裡的軸線／箭頭（改用 <rect>+fill 而非 stroke，才吃得到 fill 變數）。 */
.article-content .art-svg .art-svg__tea,
.dar-d-content .art-svg .art-svg__tea { fill: var(--artc-tea); }
.article-content .art-svg .art-svg__gold,
.dar-d-content .art-svg .art-svg__gold { fill: var(--artc-gold); }
.article-content .art-svg .art-svg__box,
.dar-d-content .art-svg .art-svg__box {
  fill: color-mix(in srgb, var(--artc-tea) 7%, transparent); stroke: var(--artc-tea);
}
/* ⚠️ 這三條的選擇器必須跟上面 __box 那條一樣長（同帶 .article-content /
   .dar-d-content），否則權重輸給 __box，三個色系全部被壓成同一個綠——
   2026-08-08 實測 --clay/--gold/--head 三個修飾子完全沒生效。 */
.article-content .art-svg .art-svg__box--head,
.dar-d-content .art-svg .art-svg__box--head { fill: color-mix(in srgb, var(--artc-tea) 13%, transparent); }
.article-content .art-svg .art-svg__box--gold,
.dar-d-content .art-svg .art-svg__box--gold { fill: color-mix(in srgb, var(--artc-gold) 9%, transparent); stroke: var(--artc-gold); }
.article-content .art-svg .art-svg__box--gold.art-svg__box--head,
.dar-d-content .art-svg .art-svg__box--gold.art-svg__box--head { fill: color-mix(in srgb, var(--artc-gold) 15%, transparent); }
.article-content .art-svg .art-svg__box--clay,
.dar-d-content .art-svg .art-svg__box--clay { fill: color-mix(in srgb, var(--artc-clay) 12%, transparent); stroke: var(--artc-clay); }
/* 虛線框／輔助線：文章裡寫死的 stroke 色碼夜間不會變，一律改掛這個 class
   （原本的 stroke 屬性留著當後備，CSS 有載入時會被蓋掉）。 */
.article-content .art-svg .art-svg__rule,
.dar-d-content .art-svg .art-svg__rule { stroke: var(--artc-faint); fill: none; }

/* art-dl 的框線版：列數多時（本專案實測 18 列）純靠留白會糊成一片。
   ⚠️ 刻意不用白底卡——白底在米色紙面上是一塊空白，既沒份量又打斷正文。
   改用極淡的同色系底＋細框＋列間分隔線：結構清楚，但不搶正文。 */
.article-content .art-dl--boxed,
.dar-d-content .art-dl--boxed {
  border: 1px solid var(--artc-line); border-radius: 12px;
  background: color-mix(in srgb, var(--artc-tea) 4%, transparent);
  padding: .35em 1.05em; gap: 0;
}
.article-content .art-dl--boxed .art-dl__row,
.dar-d-content .art-dl--boxed .art-dl__row {
  padding: .8em 0; border-bottom: 1px solid var(--artc-line);
}
.art-dl--boxed .art-dl__row:last-of-type { border-bottom: none; }
.art-dl--boxed.art-dl--gold { background: color-mix(in srgb, var(--artc-gold) 5%, transparent); }
.art-dl--boxed:not(.art-dl--tea):not(.art-dl--gold) { background: color-mix(in srgb, var(--artc-clay) 4%, transparent); }
.article-content .art-dl--boxed .art-dl__foot,
.dar-d-content .art-dl--boxed .art-dl__foot { padding: .7em 0 .55em; }

/* ── K. 對照表（art-table）：多欄對照資料，窄畫面自動卡片化 ──
   ⚠️ 為什麼需要它：本專案的對照表常是 5 欄 × 10 列以上（產區、唛號、分廠…），
   基礎 .article-content table 只給「整張橫向捲動」，手機上讀到第 5 欄要一路捲，
   讀完又捲不回第 1 欄＝表格等於失效。過去各篇是在內文寫一份 <style> 自救，
   那份 CSS 逐篇各寫一份、互不一致，而且色碼全寫死＝夜間主題整張表不會變色。

   用法：<table class="art-table">，每個 <td> 帶 data-label="欄名"。
   ⚠️ data-label 是窄畫面的欄名來源（thead 在窄畫面隱藏），漏填該格就沒有欄名。
   ⚠️ 第一欄視為該列的標題（窄畫面獨立成一條色帶、不印 data-label），
      所以請把「這一列在講誰」放第一欄。
   ⚠️ 欄名要短（翻成英日文會變長）；長句一律放格子內容，不要塞進 data-label。 */
.article-content .art-table,
.dar-d-content .art-table {
  display: block;                    /* 表格自己橫向捲動，不讓整頁橫捲 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-collapse: collapse;
  margin: 1.7em 0;
  font-size: .88em;
  line-height: 1.7;
}
.article-content .art-table thead th,
.dar-d-content .art-table thead th {
  background: color-mix(in srgb, var(--artc-tea) 14%, transparent);
  color: var(--artc-ink);
  font-family: inherit;              /* 覆蓋基礎 th 的 11px／大寫／字距 */
  font-size: .95em;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  padding: .6em .8em;
  border: 1px solid var(--artc-line);
}
.article-content .art-table tbody td,
.dar-d-content .art-table tbody td {
  padding: .6em .8em;
  border: 1px solid var(--artc-line);
  vertical-align: top;
  color: var(--artc-muted);
}
.art-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--artc-tea) 4%, transparent); }
.article-content .art-table tbody td:first-child,
.dar-d-content .art-table tbody td:first-child { font-weight: 700; color: var(--artc-tea); }
.article-content .art-table b,
.dar-d-content .art-table b { color: var(--artc-ink); }

@media (max-width: 640px) {
  /* 一列變一張卡：欄名由 data-label 補回來，橫向捲動的需求歸零 */
  .article-content .art-table thead,
  .dar-d-content .art-table thead { display: none; }
  .article-content .art-table tbody tr,
  .dar-d-content .art-table tbody tr {
    display: block;
    border: 1px solid var(--artc-line);
    border-radius: 12px;
    margin: 0 0 .9em;
    padding: .3em .25em;
    background: color-mix(in srgb, var(--artc-tea) 4%, transparent);
  }
  /* ⚠️ 欄名用「懸掛縮排」而不是 flex／grid：格子裡的 <b>、<a> 在 flex 容器下
     會各自變成獨立的 flex item，中間被 gap 撐開、還可能單獨掉行（實測
     「那是<b>等級名不是編號</b>」會斷成兩塊）。改用 padding-left ＋負
     text-indent，格子內容維持正常的行內排版，換行後仍對齊在欄名右側。 */
  .article-content .art-table tbody td,
  .dar-d-content .art-table tbody td {
    display: block;
    border: none; border-bottom: 1px solid var(--artc-line);
    padding: .5em .7em .5em 5.6em;
    text-indent: -5.1em;
  }
  .art-table tbody tr td:last-child { border-bottom: none; }
  .article-content .art-table tbody td[data-label]::before,
  .dar-d-content .art-table tbody td[data-label]::before {
    content: attr(data-label);
    display: inline-block; min-width: 4.6em; padding-right: .5em;
    color: var(--artc-faint); font-weight: 400; text-indent: 0;
  }
  /* 沒填 data-label 的格子不做懸掛縮排，否則會空出一塊沒有欄名的縮排 */
  .article-content .art-table tbody td:not([data-label]),
  .dar-d-content .art-table tbody td:not([data-label]) { padding-left: .7em; text-indent: 0; }
  /* 第一欄＝該列標題：獨立一條色帶，不重複印欄名 */
  .article-content .art-table tbody td:first-child,
  .dar-d-content .art-table tbody td:first-child {
    background: color-mix(in srgb, var(--artc-tea) 9%, transparent);
    border-radius: 8px; border-bottom: none;
    margin: .15em .25em .4em; padding: .5em .7em;
    text-indent: 0; font-size: 1.06em;
  }
  .article-content .art-table tbody td:first-child[data-label]::before,
  .dar-d-content .art-table tbody td:first-child[data-label]::before { content: none; }
}