:root {
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    line-height: 1.7;
    margin: 0;
    background: #fff;
    color: #222;
}

.site-title {
    font-style: italic;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #222;
    text-shadow: 6px 6px 2px rgba(0,0,0,0.2);
}

.content img {
    max-width: 100%;
    height: auto;
}

.content pre, .content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95em;
}

/* プロフィールの軽微な調整だけ（装飾は付けない） */
.profile {
    font-size: 0.95rem;
}

.profile-avatar {
    border: 1px solid #e5e5e5;
}

/* text-decoration-none 指定時もホバーしたいときに使用 */
a.hover-underline:hover {
    text-decoration: underline !important;
}

a {
    color: #0077cc;
}

a:hover {
    color: #005fa3;
}

/* 見出しの余白を控えめに（素朴な間隔） */
h1, h2, h3 {
    margin-top: 0;
}

/* 記事の表示を調整 */
/* 版面：本文の最大幅と行長を調整（約65字） */
.container, main.container { max-width: 72ch; }

/* 段落：行間と段落間のメリハリ */
.content p { line-height: 1.85; margin: 0 0 1.05em; }

/* 見出し：少しだけ締まる感じに */
.content h2 { margin: 2.0em 0 .6em; font-size: 1.35rem; letter-spacing: .02em; }
.content h3 { margin: 1.6em 0 .4em; font-size: 1.15rem; }

/* ドロップキャップ：最初の段落の1文字だけ大きく（雑誌っぽさ） */
.content > p:first-of-type::first-letter {
  float: left; font-size: 3.2rem; line-height: .9; padding: .15rem .35rem 0 0; font-weight: 600;
}

/* 強調ボックス：blockquoteを淡い紙面のように */
.content blockquote {
  margin: 1.4em 0; padding: .9em 1em; background: #fafafa;
  border-left: 4px solid #e5e5e5; color: #444;
}

/* 区切り線：HRを“見出しの間”の空気に */
.content hr { border: 0; height: 1px; background: linear-gradient(to right,#0000,#ddd,#0000); margin: 2.2em 0; }

/* 画像：キャプション風（figcaptionが無くてもattrで代用可） */
.content img { display: block; max-width: 100%; margin: 1.2em auto .4em; }
.content img[alt]::after { content: attr(alt); display: block; text-align: center; color: #777; font-size: .85rem; margin-top: .2em; }
/* ↑ altをキャプションに使う小技（不要なら削除） */

/* 暗転モードのささやかな配慮 */
@media (prefers-color-scheme: dark) {
  body, header, footer { background:#111; color:#ddd; }
  a { color:#7fb8ff; }
  /* Bootstrapのクラス上書き */
  .text-muted,
  .text-secondary,
  .text-body-secondary { color: #aaa !important; }
  .fw-light, .fw-normal, .fw-semibold { font-weight: 600 !important; }
  .bg-light, .bg-body-secondary, .bg-white { background: #181818 !important; }
  .border, .border-light, .border-secondary { border-color: #333 !important; }
  .shadow-sm, .shadow { box-shadow: 0 1px 3px rgba(255,255,255,0.05) !important; }
  /* 独自スタイルの上書き */
  .site-title { color: #eee !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.6); }
  .content blockquote { background:#181818; border-left-color:#333; color:#bbb; }
  .post-list li { border-color:#222; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
  .post-list li .text-muted.small { background:#1a1a1a; border-color:#2a2a2a; color:#aaa; }
}