/* ============================================================
   Daily Coffee 文章視覺化元件庫
   單一來源：發佈文章模板（api/publish.js）與後台預覽（admin/）都 link 這支。
   全部 scope 在 .article-body 與 .pv-body 之下，避免污染外框。
   配色：--coffee-* 為主，輔以提示色（綠/橘/藍）。
   ============================================================ */

.article-body, .pv-body {
  --dc-dark: #2C1810;
  --dc-mid: #6B4226;
  --dc-light: #C07A3E;
  --dc-cream: #F5EDE0;
  --dc-tip: #2E7D32;   --dc-tip-bg: #EAF6EC;
  --dc-warn: #B45309;  --dc-warn-bg: #FEF3E2;
  --dc-info: #1565C0;  --dc-info-bg: #E8F1FB;
  --dc-pro: #6B4226;   --dc-pro-bg: #F6EDE3;
}

/* ── 30 秒重點框 ───────────────────────────── */
.dc-quick {
  background: linear-gradient(180deg, #FFFaf4, var(--dc-cream));
  border: 1px solid var(--dc-light);
  border-left: 5px solid var(--dc-light);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin: 1.5rem 0;
}
.dc-quick > :first-child {
  font-weight: 700; color: var(--dc-mid); font-size: 1.05rem;
  margin: 0 0 0.6rem; padding: 0; border: none;
}
.dc-quick ul { margin: 0; padding-left: 1.2rem; list-style: none; }
.dc-quick li { margin: 0.4rem 0; padding-left: 0.2rem; line-height: 1.6; }
.dc-quick li strong { color: var(--dc-mid); }

/* ── Callout 彩色提示框（tip / warn / info / pro）── */
.dc-callout {
  border-radius: 8px; padding: 0.9rem 1.1rem; margin: 1.25rem 0;
  border-left: 4px solid var(--dc-pro); background: var(--dc-pro-bg);
}
.dc-callout > :first-child { font-weight: 600; margin-top: 0; }
.dc-callout > :last-child { margin-bottom: 0; }
.dc-callout.tip  { border-left-color: var(--dc-tip);  background: var(--dc-tip-bg); }
.dc-callout.tip  > :first-child { color: var(--dc-tip); }
.dc-callout.warn { border-left-color: var(--dc-warn); background: var(--dc-warn-bg); }
.dc-callout.warn > :first-child { color: var(--dc-warn); }
.dc-callout.info { border-left-color: var(--dc-info); background: var(--dc-info-bg); }
.dc-callout.info > :first-child { color: var(--dc-info); }
.dc-callout.pro  { border-left-color: var(--dc-pro);  background: var(--dc-pro-bg); }
.dc-callout.pro  > :first-child { color: var(--dc-pro); }

/* ── 比較卡（A / B 並排）─────────────────────── */
.dc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.5rem 0; }
.dc-compare-card {
  background: #fff; border: 1px solid var(--dc-cream); border-top: 3px solid var(--dc-light);
  border-radius: 10px; padding: 1rem 1.1rem;
}
.dc-compare-card .label {
  display: inline-block; background: var(--dc-light); color: #fff;
  font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 20px; margin-bottom: 0.5rem;
}
.dc-compare-card h3 { margin: 0.2rem 0 0.5rem; color: var(--dc-dark); font-size: 1.05rem; }
.dc-compare-card ul { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.92rem; }
@media (max-width: 560px) { .dc-compare { grid-template-columns: 1fr; } }

/* ── 步驟卡（自動編號）──────────────────────── */
.dc-steps { counter-reset: dcstep; margin: 1.5rem 0; display: grid; gap: 12px; }
.dc-step {
  position: relative; background: #fff; border: 1px solid var(--dc-cream);
  border-radius: 10px; padding: 1rem 1.1rem 1rem 3.2rem;
}
.dc-step::before {
  counter-increment: dcstep; content: counter(dcstep);
  position: absolute; left: 0.9rem; top: 1rem;
  width: 1.7rem; height: 1.7rem; background: var(--dc-light); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
}
.dc-step h3 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--dc-dark); }
.dc-step p:last-child { margin-bottom: 0; }

/* ── Checklist（✓ 清單）：淡綠底色區塊，配綠勾更凸出 ──── */
.dc-check {
  list-style: none; margin: 1.25rem 0; padding: 0.7rem 1.2rem;
  background: var(--dc-tip-bg); border: 1px solid #cfe6d3;
  border-left: 5px solid var(--dc-tip); border-radius: 10px;
}
.dc-check li {
  position: relative; padding: 0.4rem 0 0.4rem 1.8rem; line-height: 1.6;
  border-bottom: 1px dashed #cfe6d3;
}
.dc-check li:last-child { border-bottom: none; }
.dc-check li::before {
  content: "✓"; position: absolute; left: 0.3rem; top: 0.4rem;
  color: var(--dc-tip); font-weight: 700;
}

/* ── Pull quote 大引言（顯著底色區塊）──────────── */
.dc-quote {
  background: linear-gradient(135deg, var(--dc-pro-bg), var(--dc-cream));
  border: 1px solid var(--dc-light); border-radius: 12px;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-style: italic; font-weight: 500;
  color: var(--dc-mid); text-align: center; line-height: 1.6;
  margin: 2rem 0; padding: 1.6rem 2rem 1.6rem 3.2rem; position: relative;
}
.dc-quote::before {
  content: "\201C"; position: absolute; left: 0.9rem; top: 0.3rem;
  font-size: 3.4rem; color: var(--dc-light); opacity: 0.5; line-height: 1; font-family: Georgia, "Noto Serif TC", serif;
}

/* ── 資訊卡（重點數據 / 時間地點）：明確區塊 + 框線 ── */
.dc-info-card {
  background: #fff; border: 1px solid var(--dc-light); border-left: 5px solid var(--dc-light);
  border-radius: 10px; padding: 1rem 1.2rem; margin: 1.25rem 0;
  display: flex; gap: 0.85rem; align-items: flex-start;
  box-shadow: 0 1px 3px rgba(44,24,16,0.05);
}
.dc-info-card .ic-icon {
  font-size: 1.4rem; line-height: 1; background: var(--dc-cream);
  width: 2.4rem; height: 2.4rem; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dc-info-card .ic-body { flex: 1; }
.dc-info-card .ic-body :first-child { margin-top: 0; font-weight: 700; color: var(--dc-mid); }
.dc-info-card .ic-body :last-child { margin-bottom: 0; }

/* ── badge 小標籤 ───────────────────────────── */
.dc-badge {
  display: inline-block; background: var(--dc-light); color: #fff;
  font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.55rem; border-radius: 12px; vertical-align: middle;
}

/* ── H2 小標：暖棕漸層底色區塊（跳出 #F5EDE0 頁面背景，明顯區分段落）──
   舊版用 --dc-cream，和文章頁 body 背景同色 → 底色看不出來。改暖棕漸層。 */
.article-body h2, .pv-body h2 {
  background: linear-gradient(180deg, #FBEFDB, #EAD6B4) !important;
  color: var(--dc-dark) !important;
  border-left: 6px solid var(--dc-light) !important;
  border-top: none !important;
  padding: 0.7rem 1rem !important;
  border-radius: 6px;
  margin: 2.6rem 0 1.1rem !important;
  font-size: 1.3rem;
  box-shadow: 0 1px 2px rgba(44,24,16,0.06);
}
.article-body h3, .pv-body h3 {
  color: var(--dc-mid); border-left: 3px solid var(--dc-light);
  padding-left: 0.6rem; margin: 1.6rem 0 0.6rem;
}

/* ── 表格：明確框線 + 表頭底色 + 斑馬紋（覆蓋模板）──── */
.article-body table, .pv-body table {
  width: 100%; border-collapse: collapse !important; margin: 1.5rem 0; font-size: 0.95rem;
  border: 1px solid var(--dc-light) !important; border-radius: 8px; overflow: hidden;
}
.article-body th, .pv-body th {
  background: var(--dc-mid) !important; color: #fff !important;
  padding: 0.7rem 0.9rem !important; text-align: left; border: 1px solid var(--dc-light) !important;
  font-weight: 600;
}
.article-body td, .pv-body td {
  padding: 0.65rem 0.9rem !important; border: 1px solid #e6ddd0 !important;
  vertical-align: top;
}
.article-body tbody tr:nth-child(even), .pv-body tbody tr:nth-child(even) { background: #faf6f0; }

/* ── FAQ 手風琴（<details>/<summary>）──────────── */
/* 重點：AI 產的答案常是「裸文字節點」（<details><summary>…</summary>純文字</details>），
   用子元素 padding 無法替文字節點留白 → 會貼框線。改成 details 自身左右 padding 給留白，
   summary 用負 margin 撐回滿版；這樣連純文字答案也有左右留白、不貼框。 */
.article-body details, .pv-body details {
  border: 1px solid var(--dc-cream); border-radius: 8px; margin: 0.6rem 0;
  background: #fff; overflow: hidden; padding: 0 1.3rem;
}
.article-body details[open], .pv-body details[open] { border-color: var(--dc-light); padding-bottom: 1.1rem; }
.article-body summary, .pv-body summary {
  cursor: pointer; margin: 0 -1.3rem; padding: 0.9rem 2.6rem 0.9rem 1.3rem;
  font-weight: 600; color: var(--dc-mid);
  list-style: none; position: relative; background: var(--dc-cream); transition: background 0.15s;
}
.article-body details[open] summary, .pv-body details[open] summary { margin-bottom: 0.9rem; }
.article-body summary::-webkit-details-marker, .pv-body summary::-webkit-details-marker { display: none; }
.article-body summary:hover, .pv-body summary:hover { background: #efe3d4; }
.article-body summary::after, .pv-body summary::after {
  content: "＋"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--dc-light); font-weight: 700; font-size: 1.1rem; transition: transform 0.2s;
}
.article-body details[open] summary::after, .pv-body details[open] summary::after { content: "−"; }
/* 答案若是元素（<p> 等）給上下間距；左右留白由上面 details padding 提供 */
.article-body details > :not(summary), .pv-body details > :not(summary) {
  margin: 0.5rem 0; line-height: 1.75; color: var(--dc-dark);
}
.article-body details > :not(summary):last-child, .pv-body details > :not(summary):last-child { margin-bottom: 0; }

/* ── 延伸閱讀 / 相關文章（區塊，標題列同其他元件）──── */
.dc-related {
  background: var(--dc-cream); border: 1px solid var(--dc-light); border-left: 5px solid var(--dc-light);
  border-radius: 10px; padding: 1.1rem 1.3rem; margin: 2rem 0;
}
.dc-related > :first-child { font-weight: 700; color: var(--dc-mid); margin: 0 0 0.7rem; font-size: 1.18rem; }
.dc-related ul { margin: 0; padding-left: 0; list-style: none; }
.dc-related li { margin: 0.5rem 0; padding-left: 1.5rem; position: relative; line-height: 1.6; }
.dc-related li::before { content: "📖"; position: absolute; left: 0; }
.dc-related a { color: var(--dc-light); font-weight: 600; text-decoration: underline; }

/* ── 資料來源（區塊，同其他元件樣式）─────────────── */
.dc-sources {
  background: #faf6f0; border: 1px solid var(--dc-cream); border-radius: 10px;
  padding: 1rem 1.3rem; margin: 2.5rem 0 1rem; font-size: 0.9rem; color: var(--dc-mid);
}
.dc-sources > :first-child { font-weight: 700; margin: 0 0 0.5rem; color: var(--dc-mid); font-size: 1.18rem; }
.dc-sources ul { margin: 0; padding-left: 1.2rem; }
.dc-sources li { margin: 0.3rem 0; line-height: 1.6; }
.dc-sources a { color: var(--dc-light); font-weight: 500; text-decoration: underline; word-break: break-all; }

/* ============================================================
   文章目錄 TOC（桌機左側 fixed 卡片；手機浮動按鈕＋底部 overlay）
   由各模板的 <script> 從 .article-body 的 <h2> 自動產生。
   ============================================================ */
.article-body h2, .pv-body h2 { scroll-margin-top: 24px; }  /* 點目錄捲過去時上方留白 */

/* ── 桌機側欄（≥1280px 才出現；置中內文左側 20px 留白處）── */
.dc-toc-side {
  position: fixed; top: 96px; left: calc(50vw - 620px); width: 220px;
  max-height: calc(100vh - 130px); overflow-y: auto;
  background: #fff; border: 1px solid var(--dc-cream); border-radius: 12px;
  padding: 14px 12px; font-size: 0.86rem; line-height: 1.5;
  box-shadow: 0 2px 12px rgba(44,24,16,0.07); z-index: 20;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;  /* 捲進文章才淡入，避開頂部大圖 */
}
.dc-toc-side.show { opacity: 1; pointer-events: auto; }
.dc-toc-title { font-weight: 700; color: var(--dc-mid); margin: 0 0 8px; padding: 0 4px; }
.dc-toc-list { list-style: none; margin: 0; padding: 0; }
.dc-toc-list a {
  display: block; padding: 6px 9px; border-radius: 6px; color: var(--dc-dark);
  text-decoration: none; border-left: 3px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-toc-list a:hover { background: var(--dc-cream); }
.dc-toc-list a.active { background: var(--dc-cream); color: var(--dc-mid); font-weight: 700; border-left-color: var(--dc-light); }
@media (max-width: 1279px) { .dc-toc-side { display: none !important; } }

/* ── 手機浮動按鈕（<1280px 才出現）── */
.dc-toc-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 30;
  width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--dc-mid); color: #fff; font-size: 22px; line-height: 1;
  box-shadow: 0 4px 16px rgba(44,24,16,0.28);
}
@media (min-width: 1280px) { .dc-toc-fab { display: none !important; } }

/* ── 手機底部 overlay 目錄 ── */
.dc-toc-overlay {
  position: fixed; inset: 0; z-index: 40; background: rgba(44,24,16,0.45);
  display: none; align-items: flex-end;
}
.dc-toc-overlay.open { display: flex; }
.dc-toc-sheet {
  background: #fff; width: 100%; max-height: 72vh; overflow-y: auto;
  border-radius: 16px 16px 0 0; padding: 14px 16px 28px;
  animation: dcTocUp 0.2s ease;
}
@keyframes dcTocUp { from { transform: translateY(20px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
.dc-toc-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dc-toc-sheet-head span { font-weight: 700; color: var(--dc-mid); font-size: 1.05rem; }
.dc-toc-close { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--dc-mid); padding: 4px 8px; }
.dc-toc-sheet .dc-toc-list a { padding: 11px 8px; border-bottom: 1px solid var(--dc-cream); border-left: none; border-radius: 0; white-space: normal; }
.dc-toc-sheet .dc-toc-list a.active { background: var(--dc-cream); color: var(--dc-mid); font-weight: 700; }