@charset "UTF-8";
/* ============================================================
   article.css — 記事詳細ページ専用
   （レイアウト / 記事ヘッダー / 目次 / 本文タイポ / 本文部品 / 表 / FAQ / 出典 / 記事末）

   本文HTMLは時期によって書き方が違う（WordPress移行記事・旧テンプレ・新テンプレ）。
   どの世代の部品も同じ「Signal Paper」の見た目にそろえるため、既存クラスを網羅してスタイルする。
   ============================================================ */

/* ------------------------------------------------------------
   レイアウト
   〜1099px : 1カラム（目次は本文上に折りたたみ）
   1100px〜 : 本文＋右レール（目次を追従表示・読了率リング）
   ------------------------------------------------------------ */
.article-layout {
  display: block;
}

.article-rail {
  display: none;
}

@media (min-width: 1100px) {
  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 272px;
    gap: var(--space-12);
    align-items: start;
  }

  .article-rail {
    display: block;
    position: sticky;
    top: 88px;
    padding-top: var(--space-16);
  }

  .toc--inline { display: none; }
}

.article {
  min-width: 0;
  --measure: 46rem;
}

.article > * {
  max-width: var(--measure);
}


/* ------------------------------------------------------------
   記事ヘッダー
   ------------------------------------------------------------ */
.article__header {
  padding-top: var(--space-4);
}

.article__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.article__category-icon {
  width: 14px;
  height: 14px;
}

.article__readtime {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.article__readtime svg { width: 14px; height: 14px; }

.article__title {
  margin-top: var(--space-5);
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.625rem);
  line-height: 1.35;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  padding-block: var(--space-4);
  border-block: 1px solid var(--color-border);
}

.article__author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.article__author-logo {
  width: 34px;
  height: 34px;
}

.article__author strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-heading);
  line-height: 1.3;
}

.article__author small {
  font-size: var(--font-size-xxs);
  color: var(--color-text-muted);
}

.article__eyecatch {
  margin-block: var(--space-8);
}

.article__eyecatch img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-bg-sunken);
  box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------
   目次
   ------------------------------------------------------------ */
.toc--inline {
  margin-block: var(--space-8);
  border-radius: var(--radius);
  background: var(--color-bg-paper);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
}

.toc__summary::-webkit-details-marker { display: none; }

.toc__summary-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.toc__summary-label svg { width: 18px; height: 18px; color: var(--color-primary); }

.toc__summary-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  color: var(--color-text-muted);
}

.toc__summary-count::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}

.toc--inline[open] .toc__summary-count::after {
  transform: rotate(-135deg) translateY(-2px);
}

.toc--inline .toc__nav {
  padding: 0 var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.toc__list {
  counter-reset: toc;
  font-size: var(--font-size-xs);
  line-height: 1.6;
}

.toc--inline .toc__list { padding-top: var(--space-3); }

.toc__item a {
  display: flex;
  gap: var(--space-2);
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.toc__item--h2 {
  counter-increment: toc;
}

.toc__item--h2 a {
  font-weight: 600;
  color: var(--color-text);
}

.toc__item--h2 a::before {
  content: counter(toc, decimal-leading-zero);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  padding-top: 2px;
  color: var(--color-text-faint);
}

.toc__item--h3 a {
  padding-left: 34px;
  font-size: var(--font-size-xxs);
}

.toc__item--h4 { display: none; }

.toc__item a:hover {
  color: var(--color-heading);
  background: var(--color-bg-subtle);
}

.toc__item a.is-current {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.toc__item a.is-current::before { color: var(--color-primary); }

/* 右レールの目次 */
.toc--rail {
  padding: var(--space-5) var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-bg-paper);
  box-shadow: var(--shadow-card);
}

.toc__rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px var(--space-3);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
}

.toc__rail-title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-heading);
}

/* 読了率リング（js/common.js が --read-ratio を更新する） */
.toc__ring {
  position: relative;
  width: 38px;
  height: 38px;
}

.toc__ring svg {
  width: 38px;
  height: 38px;
  transform: rotate(-90deg);
}

.toc__ring-track {
  fill: none;
  stroke: var(--color-bg-sunken);
  stroke-width: 3;
}

.toc__ring-bar {
  fill: none;
  stroke: var(--color-primary-bright);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--read-ratio, 0) * 100);
  transition: stroke-dashoffset 0.2s linear;
}

.toc__ring-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-heading);
}

.toc--rail .toc__nav {
  max-height: calc(100vh - 290px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.toc__top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--space-3) 10px 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xxs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
}

.toc__top svg { width: 14px; height: 14px; transform: rotate(-45deg); }
.toc__top:hover { color: var(--color-primary); }

/* ------------------------------------------------------------
   本文タイポグラフィ
   ------------------------------------------------------------ */
.article__body {
  counter-reset: h2;
  overflow-wrap: break-word;
}

.article__body > * + * {
  margin-top: var(--space-6);
}

.article__body > p,
.article__body > ul,
.article__body > ol {
  color: var(--color-text);
}

/* h2：章番号（01, 02…）を等幅フォントで添える */
.article__body h2 {
  counter-increment: h2;
  position: relative;
  margin-top: var(--space-20);
  padding-top: var(--space-6);
  font-size: var(--font-size-h2);
  line-height: 1.42;
  letter-spacing: -0.025em;
  border-top: 1px solid var(--color-border);
  scroll-margin-top: 88px;
}

.article__body h2::before {
  content: "CHAPTER " counter(h2, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xxs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--cat-color, var(--color-primary));
}

.article__body h2::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--cat-color, var(--color-primary));
}

/* 記事内に手書きの「目次」見出しがある旧記事では番号を付けない */
.article__body .table-of-contents h2,
.article__body .toc-container h2 {
  counter-increment: none;
}

.article__body h3 {
  position: relative;
  margin-top: var(--space-12);
  padding-left: var(--space-4);
  font-size: var(--font-size-h3);
  line-height: 1.5;
  letter-spacing: -0.015em;
  scroll-margin-top: 88px;
}

.article__body h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--cat-color, var(--color-primary)), color-mix(in srgb, var(--cat-color, var(--color-primary)) 30%, transparent));
}

.article__body h4 {
  margin-top: var(--space-8);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.article__body h2 + *,
.article__body h3 + *,
.article__body h4 + * {
  margin-top: var(--space-4);
}

.article__body p {
  line-height: var(--line-height-body);
}

.article__body ul,
.article__body ol {
  padding-left: 1.4em;
}

.article__body ul { list-style: none; }
.article__body ol { list-style: decimal; }

.article__body ul > li {
  position: relative;
}

.article__body ul > li::before {
  content: "";
  position: absolute;
  left: -1.05em;
  top: 0.82em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--cat-color, var(--color-primary));
  opacity: 0.75;
  transform: rotate(45deg);
}

.article__body ol > li::marker {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--cat-color, var(--color-primary));
}

.article__body li + li {
  margin-top: var(--space-2);
}

.article__body strong {
  font-weight: 700;
  color: var(--color-heading);
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--color-primary-bright) 20%, transparent) 62%);
}

.article__body blockquote {
  position: relative;
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-8);
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.article__body blockquote::before {
  content: "“";
  position: absolute;
  left: 14px;
  top: 4px;
  font-family: Georgia, serif;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-border-strong);
}

.article__body hr {
  border: none;
  height: 1px;
  background: var(--color-border);
  margin-block: var(--space-12);
}

.article__body figure {
  margin-inline: 0;
}

.article__body img {
  border-radius: var(--radius);
  background: var(--color-bg-sunken);
}

.article__body p > img:only-child {
  margin-inline: auto;
}

/* 本文に直接埋め込まれた図解SVG（figureの中だけを対象にする） */
.article__body figure > svg {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

.article__body figcaption {
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.article__body .image-source {
  margin-top: var(--space-2);
  font-size: var(--font-size-xxs);
  color: var(--color-text-muted);
  text-align: right;
}

/* 外部リンクに印を付ける */
.article__body a[target="_blank"]:not(.source-embed__link)::after {
  content: "↗";
  margin-left: 2px;
  font-size: 0.8em;
  text-decoration: none;
  display: inline-block;
}

.article__body pre {
  padding: var(--space-5);
  overflow-x: auto;
  background: var(--color-ink);
  color: #e7e5e4;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: 1.75;
}

.article__body :not(pre) > code {
  padding: 2px 7px;
  background: var(--color-bg-subtle);
  box-shadow: var(--ring);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.86em;
  word-break: break-all;
}

/* 旧記事の本文内の手書き目次・免責・フッターは、ページ側の目次があるので控えめに */
.article.has-toc .article__body .table-of-contents,
.article.has-toc .article__body .toc-container {
  display: none;
}

.article__body .lead,
.article__body .lead-text {
  font-size: var(--font-size-lg);
  line-height: 1.95;
  color: var(--color-text);
}

.article__body .disclaimer,
.article__body .article-note,
.article__body .article-footer {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------
   本文部品：コールアウト（情報・注意・ポイント・コツ…）
   共通の箱：左上にアイコン付きのラベルを CSS で出す
   ------------------------------------------------------------ */
.article__body .info-box,
.article__body .risk-warning,
.article__body .key-point,
.article__body .tip-box,
.article__body .highlight-box,
.article__body .notice,
.article__body .stats-box,
.article__body .summary-box,
.article__body .article-summary,
.article__body .security-checklist,
.article__body .failure-case,
.article__body .calculation-example,
.article__body .formula-box,
.article__body .misconception-box,
.article__body .tech-diagram,
.article__body .code-example,
.article__body .editorial-note,
.article__body .audio-summary {
  --box-color: var(--color-primary);
  --box-bg: var(--color-bg-paper);
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-radius: var(--radius);
  background: var(--box-bg);
  box-shadow: var(--shadow-card);
  font-size: var(--font-size-sm);
  line-height: 1.9;
}

.article__body :is(.info-box, .risk-warning, .key-point, .tip-box, .highlight-box, .notice, .stats-box, .summary-box, .article-summary, .security-checklist, .failure-case, .calculation-example, .formula-box, .misconception-box, .tech-diagram, .code-example, .editorial-note, .audio-summary) > * + * {
  margin-top: var(--space-3);
}

.article__body :is(.info-box, .risk-warning, .key-point, .tip-box, .highlight-box, .notice, .stats-box, .summary-box, .article-summary, .security-checklist, .failure-case, .calculation-example, .formula-box, .misconception-box, .tech-diagram, .code-example, .editorial-note, .audio-summary)::before {
  content: attr(data-box-label);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-3);
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--box-color) 10%, white);
  color: var(--box-color);
  font-family: var(--font-body);
  font-size: var(--font-size-xxs);
  font-weight: 700;
  line-height: 1.5;
}

/* JSがラベルを付けるまでの既定ラベル（JS無効でも出る） */
.article__body .info-box::before            { content: "ℹ︎ 補足"; }
.article__body .risk-warning::before        { content: "⚠︎ 注意"; }
.article__body .key-point::before           { content: "✦ ポイント"; }
.article__body .tip-box::before             { content: "✓ コツ"; }
.article__body .highlight-box::before       { content: "✦ 重要"; }
.article__body .notice::before              { content: "⚠︎ お知らせ"; }
.article__body .stats-box::before           { content: "▦ データ"; }
.article__body .summary-box::before         { content: "≡ この記事の要点"; }
.article__body .article-summary::before     { content: "≡ 先に結論"; }
.article__body .security-checklist::before  { content: "✓ チェックリスト"; }
.article__body .failure-case::before        { content: "✕ 失敗例"; }
.article__body .calculation-example::before { content: "＝ 計算例"; }
.article__body .formula-box::before         { content: "ƒ 計算式"; }
.article__body .misconception-box::before   { content: "? よくある誤解"; }
.article__body .tech-diagram::before        { content: "⌘ しくみ"; }
.article__body .code-example::before        { content: "</> 例"; }
.article__body .editorial-note::before      { content: "✎ 編集・検証情報"; }
.article__body .audio-summary::before       { content: "♪ 音声の要約"; }

/* 色の割り当て（意味色は面積を小さく：左の帯とラベルだけ） */
.article__body .info-box,
.article__body .tech-diagram,
.article__body .stats-box    { --box-color: var(--color-primary); }
.article__body .key-point,
.article__body .highlight-box,
.article__body .summary-box,
.article__body .article-summary { --box-color: var(--color-primary); }
.article__body .tip-box,
.article__body .security-checklist,
.article__body .calculation-example { --box-color: var(--color-success); }
.article__body .risk-warning,
.article__body .notice,
.article__body .failure-case { --box-color: var(--color-danger); }
.article__body .misconception-box { --box-color: var(--color-warning); }
.article__body .formula-box,
.article__body .code-example,
.article__body .editorial-note,
.article__body .audio-summary { --box-color: var(--color-text-muted); }

/* 左端の色帯 */
.article__body :is(.info-box, .risk-warning, .key-point, .tip-box, .highlight-box, .notice, .stats-box, .security-checklist, .failure-case, .calculation-example, .misconception-box, .tech-diagram)::after {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--box-color);
}

/* 注意系は背景もごく薄く色づけて目に留める */
.article__body .risk-warning,
.article__body .notice { --box-bg: color-mix(in srgb, var(--color-danger) 3.5%, white); }

/* 「先に結論」「この記事の要点」は記事の顔なので一段強く */
.article__body .article-summary,
.article__body .summary-box {
  --box-bg: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 5%, white), white 70%);
  background: var(--box-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent), 0 10px 30px -14px rgba(31, 111, 214, 0.35);
}

.article__body .article-summary > strong:first-child,
.article__body .summary-box > h4:first-child {
  display: block;
  font-size: 1.0625rem;
  color: var(--color-heading);
  background: none;
}

/* 箱の中の見出し・太字は背景マーカーを外す */
.article__body :is(.info-box, .risk-warning, .key-point, .tip-box, .highlight-box, .notice, .stats-box, .summary-box, .article-summary, .security-checklist, .failure-case, .calculation-example, .formula-box, .misconception-box, .tech-diagram, .code-example, .editorial-note, .audio-summary) strong {
  background: none;
}

.article__body :is(.info-box, .key-point, .tip-box, .highlight-box, .security-checklist, .summary-box) h3,
.article__body :is(.info-box, .key-point, .tip-box, .highlight-box, .security-checklist, .summary-box, .step-guide) h4 {
  margin-top: 0;
  padding-left: 0;
  font-size: 1.0625rem;
}

.article__body :is(.info-box, .key-point, .tip-box, .highlight-box, .security-checklist, .summary-box) h3::before {
  content: none;
}

/* 箱の中のリストはチェックマークに */
.article__body :is(.summary-box, .article-summary, .security-checklist, .tip-box) ul {
  padding-left: 0;
}

.article__body :is(.summary-box, .article-summary, .security-checklist, .tip-box) ul > li {
  padding-left: 1.75em;
}

.article__body :is(.summary-box, .article-summary, .security-checklist, .tip-box) ul > li::before {
  left: 0;
  top: 0.42em;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  opacity: 1;
  transform: none;
  background: color-mix(in srgb, var(--box-color) 12%, white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6fd6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.article__body :is(.security-checklist, .tip-box) ul > li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23177a52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
}

/* 数値データの箱：数字を大きく */
.article__body .stats-box ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-2);
  padding-left: 0;
}

.article__body .stats-box ul > li {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  background: var(--color-bg);
  box-shadow: var(--ring);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

.article__body .stats-box ul > li::before { content: none; }

/* 計算式：等幅で中央に */
.article__body .formula-box p {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-align: center;
  padding: var(--space-3);
  border-radius: 10px;
  background: var(--color-bg);
}

.article__body .formula-box p strong { font-family: var(--font-body); font-size: var(--font-size-sm); }

/* しくみ・コード例：ターミナル風 */
.article__body .tech-diagram,
.article__body .code-example {
  --box-bg: var(--color-ink);
  color: #d6d3d1;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  background: var(--box-bg);
  box-shadow: none;
}

.article__body :is(.tech-diagram, .code-example)::before {
  background: rgba(255, 255, 255, 0.08);
  color: #93c2f7;
}

.article__body :is(.tech-diagram, .code-example) strong { color: #fff; }
.article__body :is(.tech-diagram, .code-example) code { background: rgba(255, 255, 255, 0.06); box-shadow: none; color: #93c2f7; }
.article__body .tech-diagram::after { background: #3b8ff0; }

/* 誤解と正解 */
.article__body .misconception,
.article__body .correction {
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
}

.article__body .misconception { background: var(--color-danger-subtle); }
.article__body .correction { background: var(--color-success-subtle); }

/* 失敗例：状況・結果・原因・対策を読みやすく */
.article__body .failure-case > p > strong:first-child {
  display: inline-block;
  min-width: 3.5em;
  color: var(--color-danger);
}

/* 用語解説（辞書カード） */
.article__body div.crypto-term,
.article__body p.crypto-term {
  --box-bg: var(--color-bg-paper);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  font-size: var(--font-size-sm);
  line-height: 1.9;
  background:
    linear-gradient(90deg, var(--color-bg-subtle) 0 56px, transparent 56px),
    var(--box-bg);
  padding-left: calc(56px + var(--space-5));
  position: relative;
}

.article__body div.crypto-term::before,
.article__body p.crypto-term::before {
  content: "用語";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 56px;
  display: grid;
  place-items: center;
  writing-mode: vertical-rl;
  font-size: var(--font-size-xxs);
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--color-text-muted);
}

.article__body div.crypto-term > strong:first-child,
.article__body p.crypto-term > strong:first-child {
  font-size: 1.0625rem;
  color: var(--color-heading);
  background: none;
}

/* 本文中の用語強調（strong.crypto-term / span.crypto-term） */
.article__body strong.crypto-term,
.article__body span.crypto-term {
  background: none;
  border-bottom: 1.5px dotted var(--color-primary);
}

/* ------------------------------------------------------------
   メリット／デメリット（並ぶと2カラムに）
   ------------------------------------------------------------ */
.article__body .pro-list,
.article__body .con-list {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-bg-paper);
  box-shadow: var(--shadow-card);
  font-size: var(--font-size-sm);
}

.article__body .pro-list::before,
.article__body .con-list::before {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-3);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xxs);
  font-weight: 700;
}

.article__body .pro-list::before { content: "＋ メリット"; background: var(--color-success-subtle); color: var(--color-success); }
.article__body .con-list::before { content: "－ デメリット"; background: var(--color-danger-subtle); color: var(--color-danger); }

.article__body :is(.pro-list, .con-list) ul { padding-left: 1.5em; }
.article__body .pro-list ul > li::before { background: var(--color-success); border-radius: 50%; transform: none; }
.article__body .con-list ul > li::before { background: var(--color-danger); border-radius: 1px; height: 2px; top: 0.95em; transform: none; width: 8px; }

@media (min-width: 700px) {
  .article__body .pro-list:has(+ .con-list) {
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
    margin-right: 12px;
  }

  .article__body .pro-list + .con-list {
    display: inline-block;
    width: calc(50% - 8px);
    vertical-align: top;
  }
}

/* ------------------------------------------------------------
   手順・ステップ（縦のタイムライン）
   ------------------------------------------------------------ */
.article__body ul.step-list,
.article__body ol.step-list,
.article__body div.step-list {
  counter-reset: step;
  position: relative;
  padding-left: 0;
  list-style: none;
}

.article__body :is(ul, ol).step-list > li,
.article__body div.step-list > .step,
.article__body div.step-list > .step-item {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding: 0 0 var(--space-5) 3.25rem;
}

.article__body :is(ul, ol).step-list > li::before,
.article__body div.step-list > .step::before,
.article__body div.step-list > .step-item::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 500;
  opacity: 1;
  transform: none;
  box-shadow: 0 0 0 4px var(--color-bg);
  z-index: 1;
}

.article__body :is(ul, ol).step-list > li::after,
.article__body div.step-list > .step::after,
.article__body div.step-list > .step-item::after {
  content: "";
  position: absolute;
  left: calc(1.05rem - 1px);
  top: 2.4rem;
  bottom: 0.2rem;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--color-border-strong) 0 4px, transparent 4px 8px);
}

.article__body :is(ul, ol).step-list > li:last-child::after,
.article__body div.step-list > .step:last-child::after,
.article__body div.step-list > .step-item:last-child::after {
  display: none;
}

.article__body :is(ul, ol).step-list > li:last-child::before {
  background: var(--color-primary);
}

/* 旧テンプレの .step-guide（見出し付きの手順カード） */
.article__body .step-guide {
  counter-increment: guide;
  position: relative;
  padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-6) + 2.6rem);
  border-radius: var(--radius);
  background: var(--color-bg-paper);
  box-shadow: var(--shadow-card);
  font-size: var(--font-size-sm);
}

.article__body .step-guide::before {
  content: "";
  position: absolute;
  left: var(--space-5);
  top: var(--space-5);
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--color-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 55% no-repeat;
}

.article__body .step-guide + .step-guide { margin-top: var(--space-3); }
.article__body .step-guide > * + * { margin-top: var(--space-3); }

/* チェックリスト（ul.check-list） */
.article__body ul.check-list {
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-5);
  border-radius: var(--radius);
  background: var(--color-bg-paper);
  box-shadow: var(--shadow-card);
}

.article__body ul.check-list > li {
  padding-left: 1.9em;
}

.article__body ul.check-list > li::before {
  left: 0;
  top: 0.4em;
  width: 1.2em;
  height: 1.2em;
  border-radius: 6px;
  transform: none;
  opacity: 1;
  background: var(--color-primary-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6fd6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ------------------------------------------------------------
   マスコットの会話（クリプ先生・まなぶ）：吹き出し＋アバター
   ------------------------------------------------------------ */
.article__body .mascot-dialogue {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(#e7e5e4 1px, transparent 1px) 0 0 / 16px 16px,
    var(--color-bg-subtle);
}

.article__body .mascot-dialogue__line {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px var(--space-3);
  margin: 0;
  align-items: start;
  font-size: var(--font-size-sm);
  line-height: 1.85;
}

.article__body .mascot-dialogue__line::before {
  content: "";
  grid-row: span 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff center / 88% no-repeat;
  box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(12, 10, 9, 0.12);
}

.article__body .mascot-dialogue__line--student::before { background-image: url("/images/site/ui/avatar-manabu.webp"); }
.article__body .mascot-dialogue__line--cat::before     { background-image: url("/images/site/ui/avatar-kurip.webp"); }

.article__body .mascot-dialogue__name {
  grid-column: 2;
  display: block;
  font-size: var(--font-size-xxs);
  font-weight: 700;
  color: var(--color-text-muted);
  line-height: 1.4;
  background: none;
}

/* 名前の後ろのセリフ本文を吹き出しに見せる：JSが .mascot-dialogue__text で包む */
.article__body .mascot-dialogue__text {
  grid-column: 2;
  position: relative;
  justify-self: start;
  padding: var(--space-3) var(--space-4);
  border-radius: 4px 18px 18px 18px;
  background: #fff;
  box-shadow: var(--shadow-card);
  color: var(--color-text);
}

/* 先生（猫）は右側・インク色の吹き出し */
.article__body .mascot-dialogue__line--cat {
  grid-template-columns: minmax(0, 1fr) 52px;
}

.article__body .mascot-dialogue__line--cat::before {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.article__body .mascot-dialogue__line--cat .mascot-dialogue__name,
.article__body .mascot-dialogue__line--cat .mascot-dialogue__text {
  grid-column: 1;
  grid-row: auto;
  justify-self: end;
  text-align: left;
}

.article__body .mascot-dialogue__line--cat .mascot-dialogue__name { text-align: right; }

.article__body .mascot-dialogue__line--cat .mascot-dialogue__text {
  border-radius: 18px 4px 18px 18px;
  background: var(--color-ink);
  color: #f5f5f4;
  box-shadow: none;
}

.article__body .mascot-dialogue__line--cat .mascot-dialogue__text strong { color: #fff; background: none; }

@media (max-width: 520px) {
  .article__body .mascot-dialogue { padding: var(--space-4) var(--space-3); }
  .article__body .mascot-dialogue__line { grid-template-columns: 40px minmax(0, 1fr); }
  .article__body .mascot-dialogue__line--cat { grid-template-columns: minmax(0, 1fr) 40px; }
  .article__body .mascot-dialogue__line::before { width: 40px; height: 40px; }
}

/* ------------------------------------------------------------
   音声プレイヤー
   ------------------------------------------------------------ */
.article__body .article-audio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--color-ink);
  color: #e7e5e4;
}

.article__body .article-audio p {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
}

.article__body .article-audio p::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #3b8ff0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3Crect x='3.5' y='14' width='4.5' height='6.5' rx='2'/%3E%3Crect x='16' y='14' width='4.5' height='6.5' rx='2'/%3E%3C/svg%3E") center / 58% no-repeat;
  flex-shrink: 0;
}

.article__body .article-audio strong { color: #fff; background: none; }

.article__body .article-audio audio {
  flex: 1;
  min-width: 240px;
  height: 40px;
  margin: 0;
  border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------
   出典カード（source-embed）
   ------------------------------------------------------------ */
.article__body .source-embed {
  position: relative;
  border-radius: var(--radius);
  background: var(--color-bg-paper);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.article__body .source-embed:hover {
  box-shadow: var(--shadow-card-hover);
}

.article__body .source-embed__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  grid-template-rows: auto auto 1fr;
  gap: 6px var(--space-5);
  min-height: 132px;
  padding: var(--space-5);
  color: var(--color-text);
  text-decoration: none;
}

.article__body .source-embed__link:hover { color: var(--color-text); }

.article__body .source-embed__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xxs);
  font-weight: 700;
  color: var(--color-primary);
}

.article__body .source-embed__label::before {
  content: "SOURCE";
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-subtle);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.article__body .source-embed__title {
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-heading);
}

.article__body .source-embed__link:hover .source-embed__title { color: var(--color-primary); }

.article__body .source-embed__meta {
  display: flex;
  flex-wrap: wrap;
  align-self: end;
  gap: 4px var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-xxs);
  font-family: var(--font-mono);
}

.article__body .source-embed__preview {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: stretch;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
  overflow: hidden;
  border-left: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.article__body .source-embed__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.article__body .source-embed__arrow {
  position: absolute;
  right: calc(168px + var(--space-5));
  bottom: var(--space-4);
  color: var(--color-text-faint);
  font-size: 1rem;
  transition: transform var(--transition), color var(--transition);
}

.article__body .source-embed:hover .source-embed__arrow {
  color: var(--color-primary);
  transform: translate(2px, -2px);
}

@media (max-width: 600px) {
  .article__body .source-embed__link { grid-template-columns: minmax(0, 1fr); }
  .article__body .source-embed__preview { display: none; }
  .article__body .source-embed__arrow { right: var(--space-4); }
}

/* ------------------------------------------------------------
   図版（生成画像・インフォグラフィック）
   ------------------------------------------------------------ */
.article__body .article-generated-image img,
.article__body .article-infographic img,
.article__body .wp-block-image img,
.article__body .article-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.article__body .article-generated-image,
.article__body .article-infographic {
  margin-block: var(--space-8) var(--space-12);
}

.article__body .source-embed {
  margin-block: var(--space-8) var(--space-12);
}

.article__body :is(.article-generated-image, .article-infographic, .source-embed)
  + :is(.article-generated-image, .article-infographic, .source-embed) {
  margin-top: var(--space-12);
}

.article__body .article-infographic {
  padding: var(--space-4);
  border-radius: calc(var(--radius) + 4px);
  background: var(--color-bg-paper);
  box-shadow: var(--shadow-card);
}

.article__body .article-infographic img,
.article__body .article-infographic svg {
  box-shadow: none;
  border-radius: 10px;
  background: transparent;
}

.article__body .article-infographic figcaption,
.article__body .article-generated-image figcaption {
  display: flex;
  justify-content: center;
  gap: 6px;
  text-align: left;
}

/* ------------------------------------------------------------
   表（js/article.js が .table-wrap で包み、はみ出す時は影と案内を出す）
   ------------------------------------------------------------ */
.article__body .comparison-table,
.article__body .comparison-table-wrapper,
.article__body .wp-block-table {
  margin-inline: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0;
}

.article__body .table-wrap {
  position: relative;
  border-radius: var(--radius);
  background: var(--color-bg-paper);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.article__body .table-wrap__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* 横にはみ出している時だけ、右端に影と「スクロールできます」の案内 */
.article__body .table-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
  background: linear-gradient(to left, rgba(12, 10, 9, 0.08), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.article__body .table-wrap.is-overflow:not(.is-end)::after { opacity: 1; }

.article__body .table-wrap__hint {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xxs);
  color: var(--color-text-muted);
  background: var(--color-bg);
}

.article__body .table-wrap.is-overflow .table-wrap__hint { display: flex; }

.article__body .table-wrap__hint::before {
  content: "";
  width: 22px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%236b6560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h20M5 2 1 6l4 4M17 2l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hint-swipe 1.8s ease-in-out infinite;
}

@keyframes hint-swipe {
  0%, 100% { transform: translateX(-3px); }
  50%      { transform: translateX(3px); }
}

.article__body table {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  background: var(--color-bg-paper);
}

.article__body .table-wrap.is-wide table {
  min-width: 640px;
}

.article__body th,
.article__body td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  line-break: strict;
}

.article__body th + th,
.article__body td + td,
.article__body th + td,
.article__body td + th {
  border-left: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}

.article__body thead th,
.article__body tr.is-head > * {
  position: sticky;
  top: 0;
  background: var(--color-bg-subtle);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  white-space: nowrap;
  z-index: 1;
}

.article__body tbody tr:last-child > * {
  border-bottom: 0;
}

/* 1列目＝行の見出し：太字にして行を追いやすく */
.article__body tbody td:first-child,
.article__body tbody th:first-child {
  font-weight: 700;
  color: var(--color-heading);
  background: color-mix(in srgb, var(--color-bg-subtle) 45%, white);
}

.article__body tbody tr {
  transition: background-color var(--transition);
}

.article__body tbody tr:hover > * {
  background: color-mix(in srgb, var(--color-primary) 4%, white);
}

/* 数値セル（js が .is-num を付ける）は右寄せ・等幅 */
.article__body td.is-num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ○×などの記号をバッジに（js が .mark-* を付ける） */
.article__body .mark {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  line-height: 1;
}

.article__body .mark--good { background: var(--color-success-subtle); color: var(--color-success); }
.article__body .mark--mid  { background: var(--color-warning-subtle); color: var(--color-warning); }
.article__body .mark--bad  { background: var(--color-danger-subtle);  color: var(--color-danger); }
.article__body .mark--neutral { background: var(--color-bg-sunken); color: var(--color-text); font-weight: 600; }

/* 数値の大小をセルの中の薄いバーで見せる（js が --bar を付ける） */
.article__body td.has-bar {
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--color-primary-bright) 16%, transparent) var(--bar, 0%), transparent var(--bar, 0%));
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: 0 100%;
}

.article__body table strong { background: none; }

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.faq {
  margin-top: var(--space-20);
}

.faq__heading,
.sources__heading {
  margin: var(--space-2) 0 var(--space-6);
  font-size: var(--font-size-h2);
  letter-spacing: -0.025em;
}

.faq__item {
  border-radius: var(--radius);
  background: var(--color-bg-paper);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition);
}

.faq__item + .faq__item {
  margin-top: var(--space-3);
}

.faq__item[open] {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 10px 26px -14px rgba(31, 111, 214, 0.35);
}

.faq__question {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__q,
.faq__a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 500;
  flex-shrink: 0;
}

.faq__q { background: var(--color-ink); color: #fff; }
.faq__a { background: var(--color-primary-subtle); color: var(--color-primary); }

.faq__toggle {
  position: relative;
  width: 18px;
  height: 18px;
}

.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 1.8px;
  margin-top: -0.9px;
  border-radius: 2px;
  background: var(--color-text-muted);
  transition: transform 0.25s var(--ease-out);
}

.faq__toggle::after { transform: rotate(90deg); }
.faq__item[open] .faq__toggle::after { transform: rotate(0deg); }

.faq__answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--font-size-sm);
  line-height: 1.9;
  color: var(--color-text);
  animation: faq-in 0.3s var(--ease-out);
}

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* 本文に書かれた旧形式のFAQ（.faq-item）も同じ見た目に */
.article__body .faq-item {
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--color-bg-paper);
  box-shadow: var(--shadow-card);
}

.article__body .faq-item + .faq-item { margin-top: var(--space-3); }

.article__body .faq-question,
.article__body .faq-item h3 {
  margin: 0;
  padding: 0 0 0 38px;
  position: relative;
  font-size: var(--font-size-base);
  counter-increment: none;
}

.article__body .faq-question::before,
.article__body .faq-item h3::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 0;
  bottom: auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

.article__body .faq-answer {
  margin-top: var(--space-3);
  padding-left: 38px;
  font-size: var(--font-size-sm);
}

/* ------------------------------------------------------------
   出典
   ------------------------------------------------------------ */
.sources {
  margin-top: var(--space-16);
}

.sources__list {
  counter-reset: src;
  display: grid;
  gap: var(--space-2);
}

.sources__list li {
  counter-increment: src;
}

.sources__list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  background: var(--color-bg-paper);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-xs);
  line-height: 1.6;
}

.sources__list a::before {
  content: counter(src, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: var(--font-size-xxs);
  color: var(--color-text-faint);
}

.sources__list a:hover {
  color: var(--color-primary);
  box-shadow: var(--shadow-card-hover);
}

.sources__title {
  font-weight: 600;
}

.sources__publisher {
  grid-column: 2;
  font-size: var(--font-size-xxs);
  color: var(--color-text-muted);
}

.sources__icon {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  color: var(--color-text-faint);
}

/* ------------------------------------------------------------
   記事の終わり（マスコット＋カテゴリへの導線）
   ------------------------------------------------------------ */
.article-end {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-16);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--color-primary-bright) 10%, transparent), transparent 60%),
    var(--color-bg-paper);
  box-shadow: var(--shadow-card);
}

.article-end__mascot {
  width: 96px;
  animation: float-y 5s ease-in-out infinite;
}

.article-end__body {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.article-end__title {
  font-weight: 700;
  color: var(--color-heading);
}

.article-end__text {
  font-size: var(--font-size-xs);
  line-height: 1.85;
  color: var(--color-text-muted);
}

.article-end .button { margin-top: var(--space-2); }

@media (max-width: 520px) {
  .article-end { grid-template-columns: 1fr; text-align: left; }
  .article-end__mascot { width: 76px; }
}

/* ------------------------------------------------------------
   記事下の新着（2列のリスト）
   ------------------------------------------------------------ */
.latest-list--grid {
  display: grid;
}

@media (min-width: 820px) {
  .latest-list--grid { grid-template-columns: 1fr 1fr; }
  .latest-list--grid .latest-list__item:nth-child(2) { border-top: 0; }
  .latest-list--grid .latest-list__item:nth-child(even) { border-left: 1px solid var(--color-border); }
}

.related .section-head,
.more-latest .section-head {
  margin-bottom: var(--space-6);
}


/* ------------------------------------------------------------
   R1レビュー対応
   ------------------------------------------------------------ */

/* 旧記事は本文全体が <div class="article-content"> などで包まれているため、
   入れ子の中でも段落・部品の間に呼吸を作る（詳細度を0,1,0に抑え、部品側の指定を優先させる） */
.article__body :where(div, section, article, header, footer, nav) > :where(* + *) {
  margin-top: var(--space-6);
}

.article__body :where(div, section, article) > :where(h2, h3) {
  margin-top: var(--space-16);
}

.article__body :where(div, section, article) > :where(h4) {
  margin-top: var(--space-8);
}

.article__body :where(.table-wrap, .table-wrap__scroll, .mascot-dialogue__line, .source-embed, .source-embed__link) > * {
  margin-top: 0;
}

.article__body .mascot-dialogue > * + * { margin-top: 0; }

/* 旧記事の <br><br> による疑似段落を1行空けに揃える */
.article__body br + br { display: none; }

/* スマホでは表を「列数×9em」まで広げて横スクロールにし、1列目を固定する */
@media (max-width: 639px) {
  .article__body .table-wrap table {
    min-width: max(100%, calc(var(--cols, 3) * 8.5em));
  }

  .article__body .table-wrap tbody td:first-child,
  .article__body .table-wrap tbody th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 6.5em;
    box-shadow: 1px 0 0 var(--color-border);
  }

  .article__body .table-wrap thead th:first-child {
    left: 0;
    z-index: 2;
  }
}

/* スマホでは図解（SVG・図版SVG）を縮めすぎず、横スクロールで読ませる */
@media (max-width: 639px) {
  .article__body figure.is-scroll-figure {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .article__body figure.is-scroll-figure > svg,
  .article__body figure.is-scroll-figure > img {
    min-width: 600px;
  }

  .article__body .figure-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-2);
    font-size: var(--font-size-xxs);
    color: var(--color-text-muted);
  }

  .article__body .figure-hint::before {
    content: "";
    width: 22px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%236b6560' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h20M5 2 1 6l4 4M17 2l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: hint-swipe 1.8s ease-in-out infinite;
  }
}

@media (min-width: 640px) {
  .article__body .figure-hint { display: none; }
}

/* 記事内の写真・イラストは彩度を少し抑え、紙面のトーンに寄せる */
.article__body .article-generated-image img,
.article__body .article-image,
.article__body .wp-block-image img,
.article__body p > img {
  filter: saturate(0.85);
}

/* 読了率リング：数値に % を添える */
.toc__ring-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-top: 13px;
}

.toc__ring-num::after {
  content: "%";
  font-size: 0.5rem;
}

/* 旧記事の本文画像・アイキャッチ：彩度を落として紙面になじませ、透かしを枠外へ */
.article.is-legacy .article__eyecatch img,
.article.is-legacy .article__body img:not([src$=".svg"]) {
  filter: saturate(0.5) contrast(0.93) brightness(1.03);
}

.article.is-legacy .article__eyecatch { overflow: hidden; border-radius: var(--radius-lg); }
.article.is-legacy .article__eyecatch img { transform: scale(1.06); transform-origin: 50% 40%; }