/* ============================================================
   記事本文（/blog/<slug> の .article）2026-10-25
   DB の記事本文は旧デザイン向けの素の HTML（目次・表・h2〜h4・引用・旧CTAカード・style 直書きの枠）なので、
   新デザインの変数（site.css の :root）で読みやすく整える。h2 のマーカー線は site.css 側のものを使う。
   ============================================================ */

.article {
  font-size: var(--fs-16);
  line-height: 1.9;
  color: var(--text);
  overflow-wrap: anywhere;
}
.article > :first-child { margin-top: 0; }

/* ---- 本文 ---- */
.article p { margin: 0 0 1.1em; }
.article strong { font-weight: 700; }
.article a { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.article a:hover { text-decoration-thickness: 2px; }

/* ---- 見出し（h2 > h3 > h4 > h5・h6 の差をはっきりさせる） ---- */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 { color: var(--text); font-weight: 700; scroll-margin-top: calc(var(--h-header) + 16px); }

.article h2 {
  font-size: var(--fs-20);
  line-height: 1.5;
  margin: 2.4em 0 .9em;
  padding-top: 1.2em;
  border-top: 1px solid var(--border);
}
.article h3 {
  font-size: var(--fs-18);
  line-height: 1.55;
  margin: 2em 0 .7em;
  padding-left: 12px;
  border-left: 4px solid var(--brand);
}
.article h4 {
  font-size: var(--fs-16);
  line-height: 1.6;
  margin: 1.6em 0 .5em;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.article h5,
.article h6 { font-size: var(--fs-16); color: var(--text-2); margin: 1.4em 0 .4em; }

@media (min-width: 768px) {
  .article h2 { font-size: var(--fs-24); }
  .article h3 { font-size: var(--fs-20); }
}

/* ---- 目次 ---- */
.article .toc {
  margin: 1.6em 0 2em;
  padding: 16px 18px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  line-height: 1.7;
}
.article .toc > p:first-child { margin: 0 0 8px; font-size: var(--fs-16); }
.article .toc ol,
.article .toc ul { margin: 0; padding-left: 1.6em; }
.article .toc ol { list-style: decimal; }
.article .toc ul { list-style: disc; }
.article .toc li { margin: 0 0 6px; padding-left: 2px; }
.article .toc li::marker { color: var(--brand); font-weight: 700; }
.article .toc a { color: var(--text); text-decoration: none; }
.article .toc a:hover { color: var(--brand); text-decoration: underline; }

/* ---- リスト ---- */
.article ul,
.article ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin: 0 0 .45em; padding-left: 2px; }
.article li::marker { color: var(--brand); }
.article ol > li::marker { font-weight: 700; }
.article li > ul,
.article li > ol { margin: .45em 0 0; }

/* ---- 表（スマホは横にスクロール。列がつぶれないよう最小幅を持たせる） ---- */
.article .table-scroll {
  margin: 1.2em 0 1.6em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.article table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
  line-height: 1.6;
}
.article th,
.article td {
  min-width: 7em;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.article th:last-child,
.article td:last-child { border-right: 0; }
.article tbody tr:last-child td,
.article tbody tr:last-child th { border-bottom: 0; }
.article thead th { background: var(--surface-2); font-weight: 700; white-space: nowrap; }
.article tbody th,
.article tbody td:first-child { font-weight: 700; }
.article tbody tr:nth-child(even) td,
.article tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.article table p { margin: 0; }

/* ---- 引用・区切り・画像・コード ---- */
.article blockquote {
  margin: 1.4em 0;
  padding: 12px 16px;
  border-left: 4px solid var(--brand);
  background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-2);
}
.article blockquote p:last-child { margin-bottom: 0; }
.article hr { border: 0; border-top: 1px solid var(--border); margin: 2.4em 0; }
.article img,
.article svg { max-width: 100%; height: auto; }
.article img { border-radius: var(--r-sm); }
.article figure { margin: 1.6em 0; }
.article figcaption { font-size: var(--fs-13); color: var(--text-3); }
.article code { padding: 1px 6px; background: var(--surface-2); border-radius: var(--r-sm); font-size: .9em; }

/* ---- 本文中の旧CTAカード（「Share Cart で買い物リストをLINE共有」） ---- */
.article .card { margin: 1.6em 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.article .card-body { padding: 20px 16px; }
.article .text-center { text-align: center; }
.article .text-primary { color: var(--brand); }
.article .hint-text { font-size: var(--fs-13); color: var(--text-3); }
.article .mb-4 { margin-bottom: 16px; }
.article a.btn { text-decoration: none; }
.article a.btn-line,
.article a.btn-line:hover { color: #fff; }

/* ---- style 直書きの枠をダークモードでも読めるようにする ---- */
:root[data-mode="dark"] .article [style*="#f0faf0"] { background: var(--brand-soft) !important; color: var(--text) !important; }
:root[data-mode="dark"] .article [style*="color:#555"],
:root[data-mode="dark"] .article [style*="color:#888"] { color: var(--text-3) !important; }