/* 雑記だけに適用する読み物用の調整。共通 CSS の配色と本文欄を使う。 */
.blog-main {
  display: block;
  max-width: 1200px;
}

.blog-article {
  box-sizing: border-box;
  width: min(100% - 2em, 720px);
  max-width: 720px;
  margin: 1em auto;
  padding: 1.5em 2em;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.blog-article h1 { line-height: 1.4; }
.blog-article h2 { margin: 1.6em 0 0.4em; }
.blog-article h3 { margin: 1.4em 0 0.3em; }

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em 1em;
  color: #555;
  font-size: 0.9em;
}

.blog-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3em 0.8em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-tags li::before { content: "#"; }
.blog-entry { border-bottom: 1px solid #c0c0c0; padding: 0.5em 0 1em; }
.blog-entry h2 { margin-bottom: 0.2em; font-size: 1.25em; }
.blog-entry p { margin: 0.6em 0; }
.blog-body p { margin: 1em 0; }
.blog-body img { max-width: 100%; height: auto; }
.blog-body pre { overflow-x: auto; padding: 0.8em 1em; background: #efefef; border: 1px solid #c0c0c0; line-height: 1.5; }
.blog-body code { font-family: Consolas, "Courier New", monospace; }
.blog-body :not(pre) > code { background: #efefef; padding: 0.1em 0.25em; }
.blog-body blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid #c0c0c0; color: #444; }
.blog-post-nav { border-top: 1px solid #c0c0c0; margin-top: 2em; padding-top: 0.5em; }
.blog-post-nav ul { list-style: none; padding: 0; }
.blog-post-nav li { margin: 0.4em 0; }

@media (max-width: 1000px) {
  .blog-main { padding: 0 1em; }
  .blog-article { width: 100%; max-width: 720px; padding: 1em; }
}

@media (max-width: 600px) {
  .blog-page #site-name-text { padding-left: 0; }
  .blog-page #site-name-text a { font-size: clamp(1.1em, 5vw, 1.5em); white-space: nowrap; }
  .blog-page .menu-toggle { margin-right: 0; }
}