/* blog.css — ブログ用スタイル（読みやすく、少しポップに）
   依存: base.html で読み込まれる user.css のカラーバリアブル等
   配色はサイト既存の --ko-accent を優先し、未定義時は #0d6efd を使用 */

:root{
  --blog-accent: var(--ko-accent, #0d6efd);
  --blog-bg: #ffffff;
  --blog-muted: #6c757d;
  --blog-soft: #f7f8fb; /* セクション背景など */
  --blog-chip: #f1f3f5; /* チップ・カード背景 */
  --blog-shadow: 0 8px 24px rgba(0,0,0,.06);
  --blog-radius: 14px;
}

/* ---------- 共通ユーティリティ ---------- */
.blog-container{max-width: 960px;}
.text-muted-blog{color: var(--blog-muted);}
.round{border-radius: var(--blog-radius);}
.soft-bg{background: var(--blog-soft);} 

/* ---------- ブログ一覧（index） ---------- */
.blog-hero{background: var(--light-gray, var(--blog-soft)); padding: 64px 0 40px; margin-bottom: 8px;}
.blog-hero h1{font-weight: 800; letter-spacing: .02em;}
.blog-hero p{color: var(--blog-muted)}

.blog-toc{display:flex; flex-wrap:wrap; gap:.6rem}
.blog-toc a{
  display:inline-block; padding:.45rem .9rem; border-radius:999px;
  background: linear-gradient(180deg, #fff, #f3f4f7);
  border:1px solid #e9ecef; color:inherit; text-decoration:none;
  transition: transform .12s ease, box-shadow .2s ease;
}
.blog-toc a:hover{ transform: translateY(-1px); box-shadow: var(--blog-shadow); }

.blog-section{padding: 36px 0}
.blog-section h2{ scroll-margin-top: 92px; }

/* カード */
.card-post{
  display:flex; gap:14px; padding:14px; border:1px solid #e9ecef; border-radius: var(--blog-radius);
  background:#fff; height:100%; transition: box-shadow .2s ease, transform .12s ease;
}
.card-post:hover{ box-shadow: var(--blog-shadow); transform: translateY(-2px); }
.card-thumb{ width:120px; height:88px; flex:0 0 120px; border-radius:10px; background:#f1f3f5; object-fit:cover }
.card-body{ flex:1 1 auto }
.card-title{ font-weight:800; margin:0 0 .25rem 0; font-size:1.06rem; line-height:1.35 }
.card-summary{ color:#555; margin:0; font-size:.95rem }

.loadmore-wrap{ display:flex; justify-content:center; margin-top:14px }
.loadmore-btn{
  border:1px solid #ced4da; background:#fff; border-radius:999px; padding:.5rem 1.2rem;
  transition: background .15s ease, transform .1s ease, box-shadow .2s ease;
}
.loadmore-btn:hover{ background:#f8f9fa; box-shadow: var(--blog-shadow); transform: translateY(-1px); }

.empty-note{ color: var(--blog-muted); }

@media (max-width: 575.98px){
  .card-thumb{ width:104px; height:78px; flex-basis:104px; }
}

/* ---------- 記事ページ（post） ---------- */
.article-hero{ background: var(--light-gray, var(--blog-soft)); padding: 56px 0; margin-bottom: 20px; }
.article-hero h1{ font-weight: 900; letter-spacing: .01em; }
.article-meta{ color: var(--blog-muted); }

/* 記事サマリー（本文冒頭に表示する要約） */
.article-summary{
    text-align: center;
  font-size: 1.02rem;
  line-height: 1.8;
  color: #333;
  background: var(--blog-chip);
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: .9rem 1rem;
  margin: 0 0 1.2rem 0;
}

/* サムネイル（幅広） */
.thumb-wide{ max-height: 340px; object-fit: cover; border-radius: 16px; box-shadow: var(--blog-shadow); }

/* 読みやすい本文タイポグラフィ */
.article-body{ font-size: 1.06rem; line-height: 1.9; color: #222; }
.article-body p{ margin: 1rem 0; }
.article-body a{ color: var(--blog-accent); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .15em; }
.article-body a:hover{ text-decoration-thickness: .12em; }

.article-body h2{
  margin-top: 2.2rem; margin-bottom: .8rem; padding-left: .7rem; position: relative;
}
.article-body h2::before{
  content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 6px;
  border-radius: 6px; background: var(--blog-accent);
}
.article-body h3{ margin-top: 1.6rem; margin-bottom: .6rem; font-weight:800 }
.article-body h4{ margin-top: 1.2rem; margin-bottom: .4rem; font-weight:700 }
.article-body h5{ margin-top: 1rem; margin-bottom: .35rem; font-weight:700; font-size: 1.02rem }
.article-body h6{ margin-top: .9rem; margin-bottom: .3rem; font-weight:700; font-size: 1rem; color: var(--blog-muted) }

/* 引用・区切り */
.article-body blockquote{
  margin: 1.2rem 0; padding: .9rem 1rem .9rem 1.1rem;
  background: linear-gradient(180deg, #fff, #f8f9fb);
  border-left: 6px solid var(--blog-accent); border-radius: 0 12px 12px 0; color:#333;
}
.article-body hr{ border:0; height: 1px; background: linear-gradient(90deg, transparent, #e9ecef, transparent); margin: 2rem 0; }

/* リスト */
.article-body ul, .article-body ol{ padding-left: 1.2rem; margin: .8rem 0 1.2rem; }
.article-body li{ margin: .3rem 0; }
.article-body li::marker{ color: var(--blog-accent); }

/* テーブル */
.article-body table{ width:100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .98rem }
.article-body th, .article-body td{ border:1px solid #e6e8ec; padding:.6rem .7rem }
.article-body thead th{ background:#f4f6f9; font-weight:700 }
.article-body tbody tr:nth-child(odd){ background:#fafbfc }

/* コード */
.article-body pre{ background:#1e1e1e; color:#eee; padding:1rem; border-radius: 12px; overflow:auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) }
.article-body code{ background:#f3f4f7; padding:.15rem .35rem; border-radius:6px; }
.article-body pre code{ background: none; padding: 0; border-radius: 0; }

/* 画像・図版 */
.article-body img{ max-width: 100%; height: auto; border-radius: 12px; }
.article-body figure{ margin: 1.2rem 0; }
.article-body figcaption{ color: var(--blog-muted); font-size: .9rem; text-align:center; margin-top: .35rem }

/* 注意やポイント用のコールアウト（MDの>ブロック引用に class 付与されないため汎用） */
/* もし blog_build.py でクラス付与するようになれば .callout.* で上書き可能 */
.callout{ padding: .9rem 1rem; border-radius: 12px; border:1px solid #e9ecef; background: #fff; }
.callout.info{ border-color: rgba(13,110,253,.25); background: rgba(13,110,253,.06); }
.callout.warn{ border-color: rgba(255,193,7,.35); background: rgba(255,193,7,.12); }
.callout.ok{ border-color: rgba(25,135,84,.3); background: rgba(25,135,84,.1); }

/* 戻るチップ */
.article-nav a{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none }
.back-chip{ display:inline-block; background: var(--blog-chip); border-radius: 999px; padding:.35rem .85rem; font-size:.95rem; border:1px solid #e9ecef; }
.back-chip:hover{ background:#e9ecef; }

/* フォーカス可視化 */
.blog-toc a:focus, .loadmore-btn:focus, .card-post:focus{ outline: 3px solid color-mix(in srgb, var(--blog-accent) 35%, transparent); outline-offset: 2px; }

/* ダークモードは全体テーマ採用時のみ有効にする（誤作動での可読性低下を防止）
   - 端末設定のダークモードだけでは適用しない
   - body に .theme-dark が付与された場合のみ有効
*/
@media (prefers-color-scheme: dark){
  body.theme-dark{
    --blog-soft: #15171a;
    --blog-chip:#1d1f24;
    color-scheme: dark;
  }
  body.theme-dark .blog-hero,
  body.theme-dark .article-hero{ background: #15171a; }
  body.theme-dark .card-post{ background:#16181c; border-color:#262a31 }
  body.theme-dark .card-post:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.35); }
  body.theme-dark .card-summary{ color:#cbd1d8 }
  body.theme-dark .loadmore-btn{ background:#16181c; border-color:#2a2f38; color:#e8ecf1 }
  body.theme-dark .loadmore-btn:hover{ background:#1a1d22 }
  body.theme-dark .empty-note,
  body.theme-dark .article-meta{ color:#aab2bd }
  body.theme-dark .article-body{ color:#e7ebf2 }
  body.theme-dark .article-body a{ color: #86b7ff }
  body.theme-dark .article-body table{ border-color:#2b2f37 }
  body.theme-dark .article-body th,
  body.theme-dark .article-body td{ border-color:#2b2f37 }
  body.theme-dark .article-body thead th{ background:#1a1d23 }
  body.theme-dark .article-body tbody tr:nth-child(odd){ background:#16181c }
  body.theme-dark .article-body code{ background:#20232a; color:#e8edf5 }
}


/* ---------- 2025-11: 読みやすさ向上の強化スタイル ---------- */
/* 1) 本文の行幅を最適化して可読性を改善（約65–75字/行を目安） */
.article-body{ max-width: 760px; margin-inline: auto; }

/* 2) 冒頭の一段落を“導入”として少し目立たせる（サマリーが無い記事向け） */
/*.article-body > p:first-of-type{*/
/*  background: var(--blog-chip);*/
/*  border: 1px solid #e9ecef;*/
/*  border-radius: 12px;*/
/*  padding: .85rem 1rem;*/
/*}*/
/*@media (min-width: 768px){*/
/*  .article-body > p:first-of-type{ font-size: 1.12rem; line-height: 1.95; }*/
/*  !* ドロップキャップ（大きすぎないサイズ） *!*/
/*  !*.article-body > p:first-of-type:first-letter{*!*/
/*  !*  float: left; font-size: 2.4em; line-height: .9; padding-right: .08em; padding-top: .06em; font-weight: 800; color: var(--blog-accent);*!*/
/*  !*}*!*/
/*}*/

/* 3) 見出しに変化を追加（h3 に下線アクセント、h4 にチップ風） */
.article-body h3{
  position: relative; display: inline-block; padding-bottom: .18rem;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 2px no-repeat;
}
.article-body h4{
  display: inline-block; padding: .2rem .55rem; background: var(--blog-chip); border: 1px solid #e9ecef; border-radius: 999px; font-weight: 700;
}

/* 4) 段落間隔とタイポグラフィの微調整 */
.article-body p{ text-wrap: pretty; hanging-punctuation: first allow-end; }
.article-body p + p{ margin-top: .9rem; }

/* 5) 箇条書きの視認性をUP（インデントと行間） */
.article-body ul, .article-body ol{ margin-top: .9rem; margin-bottom: 1.2rem; }
.article-body li{ margin: .45rem 0; }

/* 6) 画像のみの段落を中央寄せにし、キャプション的に扱える余白を確保 */
/* 一部ブラウザでは :has() が無効な場合がありますが、対応ブラウザでの装飾強化目的に限定 */
.article-body p:has(> img){ text-align: center; }
.article-body p:has(> img) > img{ box-shadow: var(--blog-shadow); }

/* 7) 引用を種類分けして使えるように拡張（任意で class 付与時） */
.article-body blockquote.note{ border-left-color: #0d6efd; background: rgba(13,110,253,.06); }
.article-body blockquote.warn{ border-left-color: #ffc107; background: rgba(255,193,7,.12); }
.article-body blockquote.tip{  border-left-color: #198754; background: rgba(25,135,84,.10); }
/* ブロック引用の先頭 strong を小見出し風に */
.article-body blockquote > p:first-child > strong{ display:inline-block; margin-bottom:.25rem; font-weight:800 }

/* 8) インライン強調の改善 */
.article-body mark{ background: #fff3bf; padding: .05rem .25rem; border-radius: .25rem; }
.article-body kbd{ background: #212529; color:#fff; border-radius: .35rem; padding: .1rem .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9em }

/* 9) 表のヘッダー固定風の視覚（横スクロール時に見失いにくい） */
@media (min-width: 768px){
  .article-body thead th{ position: sticky; top: 0; z-index: 1; }
}

/* 10) ステップ表示に使えるユーティリティ（任意でクラス付与時） */
.steps{ counter-reset: step; list-style: none; padding-left: 0; }
.steps li{ counter-increment: step; position:relative; padding-left: 2.2rem; margin: .75rem 0; }
.steps li::before{
  content: counter(step); position:absolute; left:0; top:.05rem; width:1.6rem; height:1.6rem; border-radius:50%;
  background: var(--blog-accent); color:#fff; font-weight:800; display:grid; place-items:center; box-shadow: var(--blog-shadow);
}

/* 11) 戻るチップの視認性をやや強化 */
.back-chip{ box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.back-chip:hover{ transform: translateY(-1px); box-shadow: var(--blog-shadow); }

/* 12) ダークモードの微調整（追加分） */
@media (prefers-color-scheme: dark){
  body.theme-dark .article-body > p:first-of-type{ border-color:#2a2f38; }
  body.theme-dark .article-body h4{ background:#1d1f24; border-color:#2a2f38; }
  body.theme-dark .article-body mark{ background: #664d03; color:#fff; }
  body.theme-dark .article-body p:has(> img) > img{ box-shadow: 0 10px 24px rgba(0,0,0,.35); }
}


/* ---------- ブログインデックスのクリック誘導強化 ---------- */
/* blog_index.html で読み込まれるため、トップページのカードには影響しません */
.blog-grid .blog-card{
  display:block;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 12px;
  transition: box-shadow .2s ease, transform .12s ease, border-color .2s ease;
}
.blog-grid .blog-card:hover{
  box-shadow: var(--blog-shadow);
  transform: translateY(-2px);
  border-color: #dee2e6;
}
.blog-grid .blog-card:focus-visible{
  outline: 3px solid var(--blog-accent);
  outline-offset: 2px;
}
.blog-grid .blog-card .blog-title{ text-decoration: none; }
.blog-grid .blog-card:hover .blog-title{ text-decoration: underline; }
.blog-grid .blog-card .blog-link{ color: inherit; text-decoration: underline; }