/* 読みもの（/articles/{slug}/）と一覧（/articles/）。共通の部品は content.css、ヘッダー・フッターは doc.css、色と寸法は tokens.css。
   規則は docs/DESIGN.md（カードの左端に色線を付けない・強調は墨の 2px 線・グラデーションなし・絵文字なし）。
   本文は子どもが縦画面で読む前提で、行間 2・段落の間を広めに取る。本文の中で太字は使わない。 */

.article h1 { margin: 6px 0 10px; font-size: 28px; font-weight: 900; line-height: 1.5; }
.article .lead { font-size: 16px; line-height: 2; color: var(--ink-1); }
@media (max-width: 560px) { .article h1 { font-size: 24px; } }

/* ---- タグ（種類＝川の青・時代＝黄土・分野＝苔） ---- */
.art-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line-2); background: var(--card); font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.4;
  color: var(--ink-2); text-decoration: none; white-space: nowrap; }
a.tag:hover { border-color: var(--line-ink); color: var(--ink-1); }
.tag-type { border-color: color-mix(in srgb, var(--river) 45%, var(--paper-1)); background: var(--river-pale); color: var(--river-deep); }
.tag-era { border-color: color-mix(in srgb, var(--ochre) 45%, var(--paper-1)); background: var(--ochre-pale); color: color-mix(in srgb, var(--ochre) 70%, var(--ink-1)); }
.tag-field { border-color: color-mix(in srgb, var(--moss) 40%, var(--paper-1)); background: var(--moss-pale); color: color-mix(in srgb, var(--moss) 70%, var(--ink-1)); }
.art-card .tag { min-height: 22px; padding: 0 8px; font-size: 11.5px; }

/* ---- 冒頭のサムネ・もくじ ---- */
.art-eyecatch { margin: 0 0 18px; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; background: var(--paper-2); }
.art-eyecatch img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-toc { margin: 22px 0 8px; padding: 14px 18px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-1); }
.art-toc-title { margin: 0 0 4px; font-size: 13px; font-weight: 900; }
.art-toc ol { margin: 0; padding-left: 22px; }
.art-toc li { margin: 2px 0; font-size: 14.5px; line-height: 1.9; }
.art-toc a { color: var(--ink-1); text-decoration: none; }
.art-toc a:hover { color: var(--river-deep); text-decoration: underline; }
@media (min-width: 1080px) { .art-toc { display: none; } }   /* 広い画面は右カラムのもくじを使う */

/* ---- 本文 ---- */
.art-body { margin-top: 8px; }
.art-body h2 { scroll-margin-top: 72px; margin: 48px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--line-ink);
  font-size: 21px; font-weight: 900; line-height: 1.6; }
.art-body h3 { margin: 26px 0 6px; font-size: 16.5px; font-weight: 900; line-height: 1.7; }
.art-body p { margin: 0 0 18px; font-size: 16px; font-weight: 500; line-height: 2.05; }
.art-body a { color: var(--river-deep); }
.art-body a:hover { color: var(--river-deep); text-decoration-thickness: 2px; }

/* 比較表（content.css の .fig-compare を本文の幅で） */
.art-compare { margin: 6px 0 22px; }
.art-compare .fig-compare table { font-size: 15px; }
.art-compare .fig-compare th, .art-compare .fig-compare td { padding: 12px 14px; line-height: 1.9; }
.art-compare figcaption, .art-figure figcaption { margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--ink-3); }
.art-compare figcaption { text-align: right; }
.art-compare figcaption a { font-weight: 700; text-decoration: none; }
.art-compare figcaption a::after { content: ' ›'; }
@media (max-width: 560px) {
  .art-compare .fig-compare table { font-size: 14px; }
  .art-compare .fig-compare th, .art-compare .fig-compare td { padding: 9px 9px; }
}

/* 図 */
.art-figure { margin: 6px 0 22px; }
.art-figure img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper-2); }

/* 年表の流れ（年を左に、縦の線でつなぐ） */
.art-timeline { position: relative; margin: 6px 0 20px; padding: 4px 0 4px; list-style: none; }
.art-timeline::before { content: ''; position: absolute; left: 76px; top: 14px; bottom: 14px; width: 2px; background: var(--line-2); }
.art-timeline li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 26px; align-items: baseline; padding: 6px 0; }
/* 点は年（ルビなし）の箱の上下中央に置く。年と項目名はベースラインでそろうので、項目名にルビがあっても点は字の中央に来る */
.art-timeline .y { position: relative; line-height: 1.5; font-size: 15px; font-weight: 900; color: var(--river-deep); font-variant-numeric: tabular-nums; text-align: right; }
.art-timeline .y::after { content: ''; position: absolute; right: -19px; top: 50%; width: 12px; height: 12px; margin-top: -7px; border-radius: 50%;
  box-sizing: border-box; background: var(--paper-0); border: 2px solid var(--river); }
.art-timeline .l { font-size: 15.5px; font-weight: 700; line-height: 1.9; color: var(--ink-1); text-decoration: none; }
.art-timeline .l:hover { color: var(--river-deep); text-decoration: underline; }

/* その後の流れ（2列。スマホは縦に積む） */
.art-flows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0 20px; }
@media (max-width: 640px) { .art-flows { grid-template-columns: 1fr; } }
.art-flows.single { grid-template-columns: 1fr; }   /* 1本の流れ */
.art-flow-c { --flow-c: color-mix(in srgb, var(--ochre) 60%, var(--paper-1)); --flow-ink: color-mix(in srgb, var(--ochre) 75%, var(--ink-1)); }
.art-flow { padding: 14px 16px 10px; border-radius: 14px; background: var(--card); border: 2px solid var(--flow-c); }
.art-flow-a { --flow-c: color-mix(in srgb, var(--river) 60%, var(--paper-1)); --flow-ink: var(--river-deep); }
.art-flow-b { --flow-c: color-mix(in srgb, var(--moss) 60%, var(--paper-1)); --flow-ink: color-mix(in srgb, var(--moss) 75%, var(--ink-1)); }
.art-flow-title { margin: 0 0 8px !important; font-size: 15px !important; font-weight: 900 !important; color: var(--flow-ink); }
.art-flow ol { margin: 0; padding: 0; list-style: none; }
.art-flow li { position: relative; margin: 0 0 22px; padding: 8px 12px; border-radius: 10px; background: var(--paper-1); font-size: 14.5px; line-height: 1.9; }
.art-flow li:last-child { margin-bottom: 4px; }
.art-flow li:not(:last-child)::after { content: '↓'; position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%); color: var(--flow-ink); font-weight: 900; }
.art-flow .when { display: block; font-size: 12px; font-weight: 700; color: var(--flow-ink); }
/* 番号だけの手順（.steps）は、番号を丸いバッジにして文と同じ行に置く。バッジは字の上下中央（DESIGN.md「行頭の印とルビ」） */
.art-flow.steps li { padding-left: 44px; }
/* inline-block ＋ overflow: hidden で、箱の下端がベースラインになる（inline-grid だと中の数字の基線になり、8px 下がる）。
   vertical-align の em はバッジ自身の字の大きさになるので、親の字の大きさ（--flow-fs）から px で計算する */
.art-flow li { --flow-fs: 14.5px; }
.art-flow.steps .when { display: inline-block; overflow: hidden; width: 24px; height: 24px; margin: 0 8px 0 -32px; border-radius: 50%;
  background: var(--flow-ink); color: var(--paper-0); font-size: 12.5px; line-height: 24px; text-align: center;
  vertical-align: calc(var(--flow-fs) * 0.43 - 12px); }

/* 年号の語呂合わせ */
.art-mnemonic { margin: 4px 0 22px; padding: 14px 18px 16px; border-radius: var(--r-lg); background: var(--ochre-pale); }
.art-mnemonic .gl { display: flex; align-items: baseline; gap: 10px; margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.art-mnemonic .yr { font-size: 13px; color: var(--ochre); font-variant-numeric: tabular-nums; }
.art-mnemonic .tx { margin: 0; font-size: 18px; font-weight: 700; line-height: 2; }

/* 入試のポイント */
.art-points { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.art-points li { padding: 12px 16px 12px 40px; border-radius: 12px; background: var(--card); border: 1px solid var(--line-1);
  font-size: 15px; line-height: 2; }
/* 行頭の印は文字の流れの中に置き、ベースラインから「ルビを除いた字の上下中央」に合わせる（DESIGN.md「行頭の印とルビ」） */
.art-points li::before { content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 15px 0 -23px; border-radius: 50%;
  background: var(--river); vertical-align: var(--mark-mid-8); }

/* 確認問題（一問一答と同じ開き方） */
.art-quiz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 10px; padding: 0; list-style: none; }
.art-q details { border-radius: 12px; border: 1px solid var(--line-1); background: var(--card); box-shadow: var(--shadow-1); }
.art-q details[open] { border: 2px solid var(--line-ink); margin: -1px; }
.art-q summary { display: flex; align-items: baseline; gap: 12px; min-height: 52px; padding: 12px 14px; cursor: pointer; list-style: none;
  border-radius: 11px; }   /* ホバーの背景を枠の角丸に合わせる（四隅。枠 1px の内側） */
.art-q details[open] summary { border-radius: 10px; }   /* 開くと枠が 2px */
.art-q summary::-webkit-details-marker { display: none; }
.art-q summary:hover { background: var(--paper-0); }
.art-q summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.art-q .qn { flex: none; min-width: 34px; height: 26px; position: relative; top: var(--badge-nudge); display: grid; place-items: center; border-radius: var(--r-sm);
  background: var(--river-pale); color: var(--river-deep); font-size: 13px; font-weight: 900; }
.art-q .qb { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; line-height: 2; overflow-wrap: anywhere; }
.art-q .qm { flex: none; align-self: center; padding: 5px 12px; border-radius: var(--r-pill); border: 2px solid var(--line-2);
  font-size: 12.5px; font-weight: 700; color: var(--river-deep); white-space: nowrap; }
.art-q details[open] .qm { border-color: transparent; color: var(--ink-3); }
.art-q .ans { padding: 0 14px 14px 60px; }
.art-q .ans .a { margin: 0 0 6px; padding: 8px 12px; border-radius: var(--r-md); background: var(--moss-pale); font-size: 16px; font-weight: 900; line-height: 2; }
.art-q .ans .a::before { content: '答え'; margin-right: 10px; font-size: 12px; font-weight: 700; color: var(--moss); }
.art-q .ans .ex { margin: 0; font-size: 14px; line-height: 2; color: var(--ink-2); }
@media (max-width: 480px) { .art-q .ans { padding-left: 14px; } }
.art-quiz-more { text-align: right; font-size: 14px !important; }
.art-quiz-more a { font-weight: 700; text-decoration: none; }
.art-quiz-more a::after { content: ' ›'; }

/* ---- 一覧・関連のカード ---- */
.art-related { margin-top: 44px; }
.art-related h2 { margin: 0 0 12px; font-size: 21px; font-weight: 900; }
.art-cards { margin: 0; padding: 0; list-style: none; }
.art-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .art-grid { grid-template-columns: 1fr; } }
.art-card[hidden] { display: none; }
.art-card > a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 16px; background: var(--paper-texture), var(--card);
  border: 1px solid var(--line-1); box-shadow: var(--shadow-1); color: var(--ink-1); text-decoration: none; }
.art-card > a:hover { border-color: var(--line-ink); color: var(--ink-1); }
.art-card-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line-1); }
.art-card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-card-thumb.icon { display: grid; place-items: center; }
.art-card-thumb.icon img { width: 45%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.art-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 16px; min-width: 0; flex: 1; }
.art-card-body .art-tags { margin: 0; gap: 4px; }
.art-card-title { font-size: 18px; font-weight: 900; line-height: 1.6; }
.art-card-lead { font-size: 13.5px; line-height: 1.9; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.art-card-date { margin-top: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* 絞り込みと並べ替え（JS が動くときだけ出す） */
.art-filter { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 18px 0 18px;
  padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-1); }
.art-filter-tags { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.art-filter .tag { min-height: 36px; padding: 0 14px; font-size: 13.5px; cursor: pointer; }
.art-filter .tag .n { font-size: 11.5px; font-weight: 500; opacity: .75; }
.art-filter .tag[aria-pressed="true"] { border: 2px solid var(--line-ink); background: var(--ink-1); color: var(--paper-0); }
.art-filter .tag:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.art-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.art-sort select { min-height: 36px; padding: 0 30px 0 12px; border-radius: var(--r-md); border: 2px solid var(--line-2); background: var(--card);
  font: inherit; font-size: 14px; color: var(--ink-1); }
.art-sort select:focus-visible { outline: none; border-color: var(--line-ink); box-shadow: var(--focus-ring); }
.art-empty { margin: 8px 0; font-size: 14px; color: var(--ink-3); }

.art-policy { margin: 40px 0 0; padding-top: 16px; border-top: 1px solid var(--line-1); font-size: 12.5px; line-height: 1.9; color: var(--ink-3); }
.art-policy a { color: var(--ink-3); }
.era-link.hub { border-color: var(--line-ink); }