/*
 * Blog テーマ「ペーパー」— 既定テーマ。
 *
 * 別テーマはこのファイルを @import して変数だけ差し替える（blog-night.css 参照）。
 * レイアウト規則をテーマ毎に複製しないための約束事なので、構造を変えるときは
 * ここだけを直すこと。
 */

:root {
  --blog-bg: #fbfaf7;
  --blog-surface: #ffffff;
  --blog-border: #e3ded4;
  --blog-fg: #23201b;
  --blog-muted: #6f6960;
  --blog-accent: #9a5b2c;
  --blog-accent-soft: #f3e9df;
  --blog-radius: 12px;
  --blog-measure: 720px;
  --blog-wide: 1040px;
}

.blog {
  margin: 0;
  background: var(--blog-bg);
  color: var(--blog-fg);
  font-family: -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  line-height: 1.85;
  font-size: 16px;
}

.blog a { color: var(--blog-accent); text-decoration: none; }
.blog a:hover { text-decoration: underline; }
.blog img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- header */
.blog-header {
  border-bottom: 1px solid var(--blog-border);
  background: var(--blog-surface);
}
.blog-header__inner {
  max-width: var(--blog-wide);
  margin: 0 auto;
  padding: 26px 20px 22px;
}
.blog-header__brand {
  display: inline-block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--blog-fg);
}
.blog-header__tagline {
  margin: 6px 0 0;
  color: var(--blog-muted);
  font-size: 13px;
}

/* ------------------------------------------------------------------ main */
.blog-main { min-height: 60vh; }
.blog-wrap { max-width: var(--blog-wide); margin: 0 auto; padding: 34px 20px 80px; }
.blog-wrap--article { max-width: var(--blog-measure); }
.blog-empty { color: var(--blog-muted); padding: 28px 0; }
.blog-tag-head { margin: 0 0 22px; color: var(--blog-muted); }

/* ------------------------------------------------------------- post card */
.post-card-list { display: grid; gap: 22px; }

.post-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 18px;
  background: var(--blog-surface);
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius);
}
/* サムネイル未設定でも段組みが崩れないよう 1 カラムへ落とす */
.post-card--no-thumb { grid-template-columns: 1fr; }

.post-card__thumb { display: block; overflow: hidden; border-radius: 8px; }
.post-card__thumb img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.post-card__title { margin: 0 0 4px; font-size: 19px; line-height: 1.5; }
.post-card__title a { color: var(--blog-fg); }
/* 「先頭見出し」— 記事本文の最初の見出しをカードに出す（本 CMS のホーム表示要件） */
.post-card__heading {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--blog-accent);
  font-weight: 600;
}
.post-card__summary { margin: 0 0 10px; color: var(--blog-muted); font-size: 14px; }
.post-card__meta { margin: 0; font-size: 12px; color: var(--blog-muted); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.tag {
  display: inline-block;
  padding: 1px 9px;
  background: var(--blog-accent-soft);
  border-radius: 999px;
  font-size: 12px;
}

/* ----------------------------------------------------------------- pager */
.blog-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; }
.blog-pager__next { margin-left: auto; }

/* ------------------------------------------------------------------ post */
.post__header { margin-bottom: 30px; }
.post__title { margin: 0 0 10px; font-size: 30px; line-height: 1.4; }
.post__meta { margin: 0 0 18px; font-size: 13px; color: var(--blog-muted); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.post__hero { margin: 0 0 20px; }
.post__hero img { width: 100%; border-radius: var(--blog-radius); }
.post__summary {
  margin: 0;
  padding: 14px 16px;
  background: var(--blog-surface);
  border-left: 3px solid var(--blog-accent);
  border-radius: 0 8px 8px 0;
  color: var(--blog-muted);
}
.post__back { margin-top: 44px; }

.post-body { font-size: 16.5px; }
.post-body h2 { margin: 40px 0 12px; font-size: 22px; border-bottom: 1px solid var(--blog-border); padding-bottom: 6px; }
.post-body h3 { margin: 30px 0 10px; font-size: 18px; }
.post-body h4 { margin: 24px 0 8px; font-size: 16px; }
.post-body p { margin: 0 0 18px; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 1.6em; }
.post-body figure { margin: 24px 0; }
.post-body figcaption { margin-top: 6px; font-size: 12px; color: var(--blog-muted); text-align: center; }
.post-body blockquote {
  margin: 22px 0; padding: 4px 18px;
  border-left: 3px solid var(--blog-border); color: var(--blog-muted);
}
.post-body hr { margin: 34px 0; border: none; border-top: 1px solid var(--blog-border); }
.post-body pre {
  padding: 14px 16px; overflow-x: auto;
  background: var(--blog-accent-soft); border-radius: 8px; font-size: 13.5px;
}
.post-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.post-body th, .post-body td { border: 1px solid var(--blog-border); padding: 7px 10px; text-align: left; }

/* --------------------------------------------------- module (内部ブロック) */
.module-block {
  margin: 34px 0;
  padding: 18px;
  background: var(--blog-surface);
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius);
}
.module-block__heading { margin: 0 0 14px; font-size: 16px; }
.module-block .post-card { border: none; padding: 0; background: transparent; }
.module-block .post-card-list { gap: 16px; }

.board-thread-list { list-style: none; margin: 0; padding: 0; }
.board-thread-list__item {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--blog-border); font-size: 14px;
}
.board-thread-list__count { color: var(--blog-muted); font-size: 12px; white-space: nowrap; }

/* ---------------------------------------------------------------- footer */
.blog-footer {
  border-top: 1px solid var(--blog-border);
  background: var(--blog-surface);
  padding: 26px 20px 40px;
  text-align: center;
  color: var(--blog-muted);
  font-size: 13px;
}
.blog-footer__note { max-width: var(--blog-measure); margin: 0 auto 10px; }
.blog-footer__meta { margin: 0; display: flex; gap: 10px; justify-content: center; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 720px) {
  .post-card { grid-template-columns: 1fr; }
  .post__title { font-size: 24px; }
  .blog-wrap { padding: 24px 16px 60px; }
}