/* ============================================================
   SKH Blog Article Shared Styles
   blog 文章共用版型 — 引用 global-tokens.css 之後載入
   建立日期：2026-06-30

   變數對照（舊 → 新）：
   --coral        → --color-brand
   --coral-dark   → --color-brand-deep
   --coral-light  → --color-brand-accent
   --navy         → --color-slate-950
   --slate-700    → --color-slate-700
   --slate-500    → --color-slate-500
   --slate-300    → --color-slate-300
   --slate-100    → --color-slate-100
   --slate-50     → --color-slate-50
   --border       → --color-slate-200
   --serif        → --font-display
   --sans         → --font-body
   ============================================================ */

/* ─────────────────────────────────────────────
   1. BASE RESET
   ───────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-slate-700);
  line-height: 1.8;
}

section[id] { scroll-margin-top: 5rem; }

/* ─────────────────────────────────────────────
   2. PAGE TOP PADDING (fixed header offset)
   ───────────────────────────────────────────── */

.page-top-pad { padding-top: 104px; }
@media (max-width: 1199px) { .page-top-pad { padding-top: 96px; } }
@media (max-width: 1023px) { .page-top-pad { padding-top: 84px; } }
@media (max-width: 640px)  { .page-top-pad { padding-top: 72px; } }

/* ─────────────────────────────────────────────
   3. ARTICLE HEADER
   ───────────────────────────────────────────── */

.article-header { padding: 2rem 0 1.5rem; margin-bottom: 0; }

.article-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--color-brand);
  margin-bottom: 1rem;
}

.article-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700; color: var(--color-slate-950);
  line-height: 1.4; margin-bottom: 1rem;
}

.article-meta {
  display: flex; align-items: center; gap: 20px;
  font-size: 14px; color: var(--color-slate-500); flex-wrap: wrap;
}

.article-meta__author {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--color-slate-700);
}

.article-meta__author-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-brand-accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-brand); font-size: 16px; flex-shrink: 0;
}

.article-meta__date { display: flex; align-items: center; gap: 5px; }

.article-meta__tag {
  padding: 3px 10px; background: var(--color-brand-accent);
  color: var(--color-brand); border-radius: 20px;
  font-size: 12px; font-weight: 600;
}

/* ─────────────────────────────────────────────
   4. ARTICLE LAYOUT & BODY
   ───────────────────────────────────────────── */

.article-layout { max-width: 1080px; margin: 0 auto; }

.article-body { min-width: 0; }

.article-body h2 {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 700;
  color: var(--color-slate-950);
  margin: 2.5rem 0 1rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--color-brand-accent);
  line-height: 1.4;
}

.article-body h3 {
  font-size: 1.1rem; font-weight: 700;
  color: var(--color-slate-700);
  margin: 1.8rem 0 .75rem;
  display: flex; align-items: center; gap: 8px;
}

.article-body h3::before {
  content: ''; display: inline-block;
  width: 4px; height: 1em;
  background: var(--color-brand);
  border-radius: 2px; flex-shrink: 0;
}

.article-body p { margin: 0 0 1.2rem; }
.article-body ul, .article-body ol { margin: .8rem 0 1.2rem 1.5rem; }
.article-body li { margin-bottom: .5rem; }

.article-body a {
  color: var(--color-brand); text-decoration: underline;
  text-underline-offset: 3px; transition: color .2s;
}
.article-body a:hover { color: var(--color-brand-deep); }
.article-body strong { color: var(--color-slate-950); font-weight: 700; }

/* ─────────────────────────────────────────────
   5. FURTHER READING (inline)
   ───────────────────────────────────────────── */

.further-reading {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--color-slate-50);
  border-left: 3px solid var(--color-brand);
  padding: .85rem 1.1rem; border-radius: 0 8px 8px 0;
  margin: 1.5rem 0; font-size: 14px;
  color: var(--color-slate-500);
}
.further-reading i { color: var(--color-brand); margin-top: 2px; flex-shrink: 0; }
.further-reading a { color: var(--color-slate-700); font-weight: 500; }

/* ─────────────────────────────────────────────
   6. TABLE
   ───────────────────────────────────────────── */

.article-table-wrap {
  overflow-x: auto; margin: 1.5rem 0;
  border-radius: 10px; border: 1px solid var(--color-slate-200);
}

.article-table { width: 100%; border-collapse: collapse; font-size: 15px; }

.article-table th {
  background: var(--color-slate-950); color: #fff;
  padding: .75rem 1rem; text-align: left;
  font-weight: 600; font-size: 13px; letter-spacing: .03em;
}
.article-table th:first-child { border-radius: 10px 0 0 0; }
.article-table th:last-child  { border-radius: 0 10px 0 0; }

.article-table td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--color-slate-200);
  vertical-align: top;
}
.article-table tr:last-child td { border-bottom: none; }
.article-table tr:nth-child(even) td { background: var(--color-slate-50); }

/* ─────────────────────────────────────────────
   7. QA ACCORDION
   ───────────────────────────────────────────── */

.qa-list { margin: 1rem 0; }

.qa-item {
  border: 1px solid var(--color-slate-200);
  border-radius: 10px; margin-bottom: .75rem; overflow: hidden;
}

.qa-item summary {
  display: flex; align-items: center; gap: 12px;
  padding: 1.1rem 1.25rem; cursor: pointer;
  font-size: 16px; font-weight: 600; color: var(--color-slate-950);
  list-style: none; transition: background .2s;
}
.qa-item summary::-webkit-details-marker { display: none; }
.qa-item summary:hover { background: var(--color-slate-50); }
.qa-item[open] summary { background: var(--color-brand-accent); color: var(--color-brand-deep); }

.qa-q-num {
  min-width: 28px; height: 28px;
  background: var(--color-brand-accent);
  color: var(--color-brand); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.qa-item[open] .qa-q-num { background: var(--color-brand); color: #fff; }

.qa-chevron {
  margin-left: auto; color: var(--color-slate-300);
  font-size: 12px; transition: transform .25s;
}
.qa-item[open] .qa-chevron { transform: rotate(180deg); color: var(--color-brand); }

.qa-answer {
  padding: 1rem 1.25rem 1.25rem;
  font-size: 16px; line-height: 1.8;
  color: var(--color-slate-700);
  border-top: 1px solid var(--color-slate-200);
}

/* ─────────────────────────────────────────────
   8. CALLOUT BOX
   ───────────────────────────────────────────── */

.callout {
  background: linear-gradient(135deg, #FFF5F5 0%, var(--color-brand-accent) 100%);
  border: 1px solid var(--color-brand-a30);
  border-radius: 12px; padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.callout__title {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-brand);
  margin-bottom: .6rem;
}
.callout p { margin: 0; font-size: 15px; }

/* ─────────────────────────────────────────────
   9. RELATED ARTICLES (文末)
   ───────────────────────────────────────────── */

.related-articles { margin: 2.5rem 0; }

.related-articles__title {
  font-size: 13px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--color-slate-500);
  margin-bottom: 1rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-slate-200);
}

.related-articles__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 768px) { .related-articles__grid { grid-template-columns: 1fr; } }

.related-articles__card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; border: 1px solid var(--color-slate-200);
  border-radius: 10px; text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s; background: #fff;
}
.related-articles__card:hover {
  border-color: var(--color-brand);
  box-shadow: 0 4px 16px -4px var(--color-brand-a20);
}
.related-articles__card-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--color-brand);
}
.related-articles__card-title {
  font-size: 15px; font-weight: 700;
  color: var(--color-slate-950); line-height: 1.5;
}
.related-articles__card-desc {
  font-size: 13px; color: var(--color-slate-500);
  line-height: 1.6; flex: 1;
}
.related-articles__card-more {
  font-size: 13px; font-weight: 600; color: var(--color-brand);
  display: flex; align-items: center; gap: 4px; margin-top: 4px;
}