/* ===========================================================
   ブログの追加分

   基礎は本体サイトの https://supercherenko.com/styles.css を読んでいる。
   ここには記事一覧・記事本文・目次だけを足す。変数（--shelf --paper --ink
   --indigo --vermilion --mincho --gothic --mono --mono-jp など）は本体の定義を使う。

   本体の3つの制約をここでも守る:
   - 白い紙（--paper）は値札だけ。記事を白いカードで並べない。
     コードブロックも紙にせず、地に沈める
   - 朱の塗りは押せるものだけ。ここで使う塗りは .btn--primary のみ
     （本体の定義をそのまま使う）。日付・目次・タグは藍と墨
   - 明朝は語る言葉だけ。記事タイトルと本文の h2 のみ。
     説明・目次・日付・本文の段落はすべて角ゴ
   =========================================================== */

/* ── パンくず ─────────────────────────────────
   棚板の稜線の直下に小さく置く。意匠の主役ではないので線も面も持たせない */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .5rem;
  margin-bottom: 1rem;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.crumb a { color: var(--indigo); }
.crumb a + a::before {
  content: "/";
  margin-right: .5rem;
  color: var(--rail);
}

/* ── 記事一覧 ─────────────────────────────────
   白い箱を並べない。罫線で区切った行にする（本体の .kinds__item と同じ骨格） */
.posts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.posts__item { border-bottom: 1px solid var(--shelf-edge); }
.posts__item:first-child { border-top: 1px solid var(--shelf-edge); }
/* 最後の行の下罫は引かない。下の .posts__foot が --board の太い罫で
   一覧を閉じるので、細い罫と2本並ぶと空の帯に見える */
.posts__item:last-child { border-bottom: 0; }

.posts__link {
  display: block;
  padding: 1.375rem 0;
  text-decoration: none;
}
.posts__link:hover .posts__title { color: var(--indigo); }

/* 日付は記録なので等幅。日本語が混じるので --mono-jp */
.posts__date {
  display: block;
  font-family: var(--mono-jp);
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
  letter-spacing: .01em;
  color: var(--ink-soft);
  margin-bottom: .375rem;
}

/* 一覧の見出しは角ゴ。明朝は記事本体の中だけに残す。
   ここで明朝にすると一覧全体が「語る言葉」で埋まって希少性が消える */
.posts__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.7;
  margin: 0 0 .375rem;
  color: var(--ink);
}
.posts__desc {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 44rem;
}

.posts__empty {
  padding: 1.5rem 0;
  border-top: 1px solid var(--shelf-edge);
  border-bottom: 1px solid var(--shelf-edge);
  color: var(--ink-soft);
}

.posts__foot {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--board);
  padding-top: 1.5rem;
}
.posts__foot-lead {
  font-size: 1rem;
  line-height: 1.95;
  color: var(--ink-soft);
  max-width: 38rem;
  margin-bottom: 1.25rem;
}

/* ── 記事の題と日付 ───────────────────────────── */
.post__title { max-width: 46rem; }

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  align-items: baseline;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.post__date,
.post__updated {
  font-family: var(--mono-jp);
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
  color: var(--ink-soft);
}
.post__updated {
  padding-left: 1rem;
  border-left: 1px solid var(--rail);
}

/* ── 目次 ─────────────────────────────────────
   藍の縦線1本で束ねる。本体の .note と同じ扱い（塗らない） */
.toc {
  border-left: 3px solid var(--indigo);
  padding: .25rem 0 .25rem 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  max-width: 44rem;
}
.toc__title {
  font-family: var(--gothic);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  margin-bottom: .625rem;
}
.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.toc__list li {
  counter-increment: toc;
  font-size: 1rem;
  line-height: 1.9;
}
.toc__list li::before {
  content: counter(toc) ".";
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--ink-soft);
  margin-right: .5rem;
}
.toc__list a { color: var(--indigo); }

/* ── 記事本文 ─────────────────────────────────
   行長は本体の .doc（44rem）より少しだけ広い。
   記事は長文で、表とコードが入るため */
.post {
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.95;
}
.post > * + * { margin-top: 1.125rem; }

.post p { color: var(--ink-soft); }
.post strong { color: var(--ink); font-weight: 700; }
.post a { color: var(--indigo); }

/* 明朝はここだけ。段の見出しと同じ役（語る） */
.post h2 {
  font-family: var(--mincho);
  font-size: clamp(1.1875rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink);
  margin-top: clamp(2.25rem, 5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--shelf-edge);
  scroll-margin-top: clamp(1.5rem, 4vw, 3rem);
}
.post h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* h3 は角ゴ。明朝を2階層に使うと希少性が消える */
.post h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
  margin-top: 2rem;
  scroll-margin-top: clamp(1.5rem, 4vw, 3rem);
}

.post ul,
.post ol { padding-left: 1.5rem; color: var(--ink-soft); }
.post li + li { margin-top: .375rem; }
.post li::marker { color: var(--rail); }

/* 引用。紙を敷かず、桟と同じ細い線1本で示す */
.post blockquote {
  margin: 1.5rem 0;
  border-left: 1px solid var(--rail);
  padding: .125rem 0 .125rem 1.25rem;
  color: var(--ink-soft);
}
.post blockquote p + p { margin-top: .75rem; }

/* コードは記録なので等幅。
   白い紙は値札だけの決まりがあるので --paper を使わず、
   墨をごく薄く敷いて地に沈める（浮かせない） */
.post code {
  font-family: var(--mono);
  font-size: .9375em;
  background: rgb(21 23 27 / .055);
  padding: .125em .375em;
}
.post pre {
  font-family: var(--mono);
  font-size: .875rem;
  line-height: 1.8;
  background: rgb(21 23 27 / .055);
  border-left: 2px solid var(--rail);
  padding: 1rem 1.125rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}
.post pre code { background: none; padding: 0; font-size: 1em; }

/* 表。数値を読ませるので等幅と tabular-nums */
.post table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.8;
  margin: 1.5rem 0;
}
.post th,
.post td {
  text-align: left;
  vertical-align: top;
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--shelf-edge);
}
.post th {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--board);
  white-space: nowrap;
}
.post td { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.post img {
  display: block;
  max-width: 100%;
  height: auto;
}
.post figure { margin: 1.75rem 0; }
.post figcaption {
  margin-top: .625rem;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

.post hr {
  border: 0;
  border-top: 1px solid var(--shelf-edge);
  margin: 2.25rem 0;
}

/* ── 関連アプリ ───────────────────────────────── */
.related {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--board);
  padding-top: 1.25rem;
  max-width: 46rem;
}
.related__title {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-soft);
  margin-bottom: .5rem;
}
.related__body { display: flex; flex-wrap: wrap; gap: 0 .875rem; align-items: baseline; }
.related__link { font-size: 1.0625rem; font-weight: 700; color: var(--indigo); }
.related__link::after { content: " →"; }
.related__for { font-size: .9375rem; color: var(--ink-soft); }

/* ── 記事末尾の相談 ───────────────────────────── */
.post__cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--board);
  padding-top: 1.5rem;
  max-width: 46rem;
}
.post__cta-lead {
  font-size: 1rem;
  line-height: 1.95;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

/* ── 狭い画面 ─────────────────────────────────── */
@media (max-width: 34rem) {
  .post pre { padding: .875rem 1rem; }
  .post table { font-size: .875rem; }
  .post th, .post td { padding: .5rem .5rem; }
  .toc { padding-left: 1rem; }
}