/* /assets/css/article.css */
/* ==== Tokens ==== */
:root{
  --ink:#0f172a; --ink2:#334155; --muted:#64748b; --line:#e5e7eb;
  --accent:#0ea5e9; --pop:#fff3d6;
  --radius:16px; --space:16px; --space-s:10px; --space-l:24px; --maxw:980px;
  --h1:clamp(24px,5vw,40px); --h2:clamp(18px,3.6vw,28px); --h3:clamp(16px,3vw,22px);
}

/* ==== Layout base ==== */
.page{ padding:24px 0; color:var(--ink); }
.article{ max-width: var(--maxw); margin: 0 auto; }

/* ==== Breadcrumb ==== */
.breadcrumb ol{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; padding:0; margin:0 0 10px; font-size:.92rem; color:var(--muted);
}
.breadcrumb li::after{ content:'›'; margin-left:8px; color: var(--muted); }
.breadcrumb li:last-child::after{ content:''; }
.breadcrumb a{ color:inherit; text-decoration:none; border-bottom:1px dotted transparent; }
.breadcrumb a:hover{ border-color: var(--accent); }

/* ==== Article Header ==== */
.article-header{
  border:1px solid var(--line); border-radius:20px;
  padding: var(--space-l); background: linear-gradient(180deg,#eef6ff,#fff);
  margin-bottom: var(--space);
}
.article-title{ font-size: var(--h1); margin: 6px 0; }
.article-meta{ color: var(--muted); font-size: .95rem; }

/* ==== TOC ==== */
.toc{
  border:1px solid var(--line); border-radius:16px; background:#fff;
  padding:12px; margin:12px 0;
}
.toc-title{ margin:0 0 6px; font-size:.95rem; color:var(--muted); letter-spacing:.04em; }
.toc nav{ max-height:42vh; overflow:auto; }
.toc-list{ margin:0; padding-left:1.2rem; }
.toc-list li{ margin:4px 0; }
.toc .toc-sub{ margin-top:6px; padding-left:16px; list-style:none; }
.toc a{
  color:inherit; text-decoration:none;
  border:1px dashed transparent; border-radius:8px; padding:4px 6px; display:inline-block;
}
.toc a:hover{ border-color: var(--accent); }
.toc a.is-active{ background:#e0f2fe; border-color:#7dd3fc; }

/* ==== Content ==== */
.content{ margin:12px 0; }
.content h2{ font-size: var(--h2); margin:14px 0 8px; }
.content h3{ font-size: var(--h3); margin:10px 0 6px; }
.content p{ line-height:1.9; }
.content .lead{ color:var(--ink2); font-size:1.05rem; }
.content a{ color:#0369a1; }

/* 見出し直リンク（#） */
.content h2, .content h3{ scroll-margin-top:84px; }
.h-anchor{
  margin-left:8px; opacity:0; text-decoration:none; font-size:.8em; color:var(--muted);
}
.content h2:hover .h-anchor,
.content h3:hover .h-anchor{ opacity:1; }

/* ==== Figures ==== */
figure{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; margin:10px 0; }
figure img{ display:block; width:100%; height:auto; }
figcaption{ font-size:12px; color:var(--muted); padding:8px 10px; }

/* ==== References & Disclaimer ==== */
.references{ border-top:1px solid var(--line); margin-top:18px; padding-top:10px; }
.references ol{ padding-left:1.2rem; }
.references li{ margin:6px 0; }
.disclaimer{ margin-top:14px; font-size:.95rem; color:var(--ink2); }

/* ==== Responsive (2カラム) ==== */
@media (min-width:980px){
  .article{ display:grid; grid-template-columns:280px 1fr; gap:16px; }
  .article-header{ grid-column:1 / -1; }
  .toc{ position:sticky; top:72px; align-self:start; }
}