/* blog/posts/ 専用スタイル — body のみに適用 */
/* クラスは MkDocs フック（overrides/hooks/add_blog_class.py）がビルド時に付与する */

/* 旧 <p class="blog-main-title"> スタイル（使用箇所が残っている場合の互換） */
.md-content p.blog-main-title {
  font-size: 2.4rem !important;
  line-height: 1.4 !important;
  margin: 0 0 0.2rem 0 !important;
  color: var(--md-typeset-color) !important;
  font-weight: 300 !important;
}
body .md-content p.blog-main-title {
  font-size: 2.4rem !important;
  line-height: 1.4 !important;
  margin: 0 0 0.2rem 0 !important;
  color: var(--md-typeset-color) !important;
  font-weight: 300 !important;
}
@media only screen and (max-width: 767px) {
  .md-content p.blog-main-title,
  body .md-content p.blog-main-title {
    font-size: 2.8em !important;
  }
}

/* タイトル直後のリード段落は見出しにぴったり付ける（タイトル→本文の隙間を全ページ共通＝タイトル下0.2remに揃える） */
/* body .md-content p (0.75em) に詳細度で勝つ必要があるため、同等以上のセレクタにする */
body .md-content .blog-main-title + p {
  margin-top: 0 !important;
}

/* h1 */
body .md-content h1 {
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.3;
  color: var(--md-default-fg-color--light);
  letter-spacing: -0.01em;
  margin: 0 0 1.25em 0;
}
/* 記事・用語集の h1 は 1.6rem（一覧の h1 は index.md 側で非表示） */
body .md-content h1 {
  font-size: 1.6rem !important;
  line-height: 1.3 !important;
  font-weight: 300 !important;
  margin: 0 0 1.25em 0 !important;   /* shared/base.css の h1 余白(0.2rem)より優先 */
}

/* p タグ: MkDocs Material 標準の行間・フォントサイズに戻す */
body .md-content p {
  font-size: inherit !important;
  line-height: 2.0 !important;
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
  color: var(--md-typeset-color) !important;
  font-weight: 400 !important;
}


/* h2: 行頭マーカー ┃（リンク色）＋ 罫線・太字なし。記事ページ共通 */
body .md-content h2 {
  font-size: 1.6rem !important;
  line-height: 1.3 !important;
  font-weight: 300 !important;
  margin: 4em 0 0.8em 0 !important;
  padding: 0 !important;
  border: none !important;
  color: var(--md-typeset-color) !important;
  letter-spacing: 0 !important;
}
/* 下線の代わりに行頭の細い縦バー（罫線で区切らない） */
body .md-content h2::before,
body .md-content h2::before {
  content: "";
  display: inline-block;
  width: 0.24rem;
  height: 0.92em;
  background-color: var(--md-link-color);
  margin-right: 0.5em;
  vertical-align: -0.08em;
  border-radius: 1px;
}

/* h3: サブ見出し（文字色をリンク色に・マーカー／罫線／下線なし） */
body .md-content h3 {
  margin: 4rem 0 0.8rem 0 !important;
  font-size: 1.2rem !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  padding: 0 !important;
  border: none !important;
  color: var(--md-link-color) !important;
  letter-spacing: 0 !important;
}
/* H2 直後の H3 は上の余白を詰める */
body .md-content h2 + h3 {
  margin-top: 0.4em !important;
}
/* H2 / H3 直後の H4 は上の余白を詰める */
body .md-content h2 + h4,
body .md-content h3 + h4 {
  margin-top: 0.4em !important;
}

/* h4: 行頭マーカー │（リンク色 40% 透過＝ブルーカード枠と同色）＋ 控えめサイズ */
body .md-content h4 {
  font-size: 1.2em !important;
  line-height: 2.0 !important;
  font-weight: 500 !important;
  margin: 4em 0 0.5em 0 !important;
  padding: 0 !important;
  border: none !important;
  color: var(--md-typeset-color) !important;
}
body .md-content h4::before {
  content: ""; /* │ 相当の縦棒を実体ボックスで描画（太さを rem で制御） */
  display: inline-block;
  width: .2rem;
  height: 1em;
  background-color: var(--md-link-color-faint);
  margin-right: 0.5em;
  vertical-align: -0.15em;
}


/* TOC: ブログページは h2 までに制限（h3 のネストを非表示） */
body .md-nav--secondary .md-nav__item > .md-nav {
  display: none !important;
}

/* blog 記事タイトルと Continue reading を 01-color.css の --md-link-color 相当色に */
/* light: --typeset-color-2 = #003682 / dark: --typeset-color-2-d = #4D8BCC */
[data-md-color-scheme="default"] .md-post__title a,
[data-md-color-scheme="default"] .md-post__title a:visited,
[data-md-color-scheme="default"] .md-post h2 a,
[data-md-color-scheme="default"] .md-post h2 a:visited,
[data-md-color-scheme="default"] .md-post__action a,
[data-md-color-scheme="default"] .md-post__action a:visited {
  color: var(--typeset-color-2) !important;
  text-decoration: none;
}
[data-md-color-scheme="slate"] .md-post__title a,
[data-md-color-scheme="slate"] .md-post__title a:visited,
[data-md-color-scheme="slate"] .md-post h2 a,
[data-md-color-scheme="slate"] .md-post h2 a:visited,
[data-md-color-scheme="slate"] .md-post__action a,
[data-md-color-scheme="slate"] .md-post__action a:visited {
  color: var(--typeset-color-2-d) !important;
  text-decoration: none;
}
.md-post__title a:hover,
.md-post h2 a:hover,
.md-post__action a:hover {
  color: var(--md-link-hover-color) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* テーブル: 一番上の行と最左列を薄グレーに（素のMarkdownテーブルのみ対象） */
body .md-typeset table:not([class]) thead th,
body .md-typeset table:not([class]) tbody tr td:first-child,
body .md-typeset table:not([class]) tbody tr th:first-child {
  background-color: var(--md-typeset-table-color--light);
}

/* テーブル: 縦の罫線も行の罫線と同じ濃さで表示 */
body .md-typeset table:not([class]) th,
body .md-typeset table:not([class]) td {
  border-right: .05rem solid var(--md-typeset-table-color);
}
body .md-typeset table:not([class]) th:last-child,
body .md-typeset table:not([class]) td:last-child {
  border-right: none;
}

/* blockquote(引用): 左の縦罫線を細く（Material 既定 .2rem の半分）＋上下に少し余白＋罫線と文字の間にパディング */
body .md-typeset blockquote {
  border-left-width: .1rem !important;
  margin-top: 1.5em !important;
  margin-bottom: 1.5em !important;
  padding-left: 1rem !important;
}

/* blockquote 内のリポジトリ案内: <small> のテキスト・アイコン・リンク文字をすべて青に */
body .md-typeset blockquote small,
body .md-typeset blockquote small * {
  color: var(--md-link-color) !important;
}

/* blog index 目次: フェーズ見出し */

/* details アコーディオン: 非エンジニアにも開閉できると分かるデザイン */
body .md-typeset details {
  margin: 1.2em 0;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
body .md-typeset details > summary {
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 0.75em 3.2em 0.75em 1em !important;
  background: #f3f6fb;
  color: var(--md-link-color);
  font-weight: 500;
  position: relative;
  user-select: none;
  transition: background-color 0.15s ease;
}
body .md-typeset details > summary::before {
  display: none !important;
  content: none !important;
}
/* FontAwesome chevron 矢印（右端） */
body .md-typeset details > summary::after {
  content: "\f078";       /* fa-chevron-down */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
  font-weight: 900;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--md-link-color);
  font-size: 0.95em;
  transition: transform 0.2s ease;
}
body .md-typeset details[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
}
body .md-typeset details > summary:hover {
  background: #e7eef9;
}
body .md-typeset details > summary:focus-visible {
  outline: 2px solid var(--md-link-color);
  outline-offset: -2px;
}
body .md-typeset details > *:not(summary) {
  padding: 0 1em;
}
body .md-typeset details[open] > summary {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}


/* ============================================================ */
/* 以下、旧 11-toc.css / 12-ref-card.css / 13-refine.css を集約     */
/* いずれも blog/posts 専用スタイル（他ページでは未使用）          */
/* ============================================================ */


/* ===== [旧 11-toc.css] ===== */
/* ToC depth control is handled per-page in overrides/main.html */


/* ===== [旧 12-ref-card.css] 用語リンクカード（細枠・外部参照用） ===== */
/* カード本体（細枠） */
.ref-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--md-card-border-soft);
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--md-typeset-color) !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.ref-card:hover {
  border-color: var(--md-link-hover-color);
  background-color: var(--md-default-fg-color--lightest);
}
.ref-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ref-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}
.ref-card-desc {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--md-default-fg-color--light);
  margin-top: 0.1rem;
}
.ref-card:hover .ref-card-title {
  color: var(--md-link-hover-color) !important;
}

/* 控えめ版（アイコン・色なし・全幅）― 添付ファイル風の控えめカード */
.ref-card--quiet {
  display: flex;
  width: 100%;
  margin: 0.8rem 0 1.4rem 0;
  padding: 1.15rem 1.15rem;
  border-color: var(--md-card-border-soft);
  border-radius: 10px;
}
.ref-card--quiet:hover {
  border-color: var(--md-default-fg-color--lighter);
  background-color: transparent;
}
.ref-card--quiet .ref-card-title {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--md-typeset-color) !important;
}
.ref-card--quiet .ref-card-desc {
  font-size: 0.7rem;
}
.ref-card--quiet:hover .ref-card-title {
  color: var(--md-typeset-color) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}


/* ===== [旧 13-refine.css] ブログ装飾の洗練：fig-meta / repo-link / keypoint / table ===== */

/* ① 図のキャプション（1 行・無彩色・小さめ） */
/* body .md-content p の font-size:inherit に詳細度で勝つため
   .fig-meta もブログ用セレクタ（p.fig-meta）に格上げしている */
body .md-content p.fig-meta,
.fig-meta {
  display: block;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--md-default-fg-color--light) !important;
  margin: 0 0 0.4rem 0 !important;
  letter-spacing: 0.02em;
}
.fig-meta i {
  margin-right: 0.3rem;
  opacity: 0.85;
}

/* ② GitHub リポジトリリンク（ブロック引用 → カード） */
.repo-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  margin: 0.6rem 0 1.2rem 0;
  border: 1px solid var(--md-card-border-soft); /* カード枠：少し濃いめ（全カード共通） */
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--md-typeset-color) !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.repo-link:hover {
  border-color: var(--md-link-hover-color);
  background-color: var(--md-default-fg-color--lightest);
}
.repo-link .repo-link-icon {
  flex: 0 0 auto;
  font-size: 1.4rem;
}
.repo-link .repo-link-path {
  flex: 1 1 auto;
  min-width: 0;
  font-family: monospace;
  font-size: 0.84rem;
  color: var(--md-link-color);
  word-break: break-all;
}
.repo-link .repo-link-arrow {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  transition: transform 0.2s ease, color 0.2s ease;
}
.repo-link:hover .repo-link-arrow {
  transform: translateX(3px);
  color: var(--md-link-hover-color);
}

/* ③ キーポイント（⬛ の置き換え：左アクセント罫＋淡い背景） */
.keypoint {
  border-left: 3px solid var(--md-link-color);
  background: var(--md-default-fg-color--lightest);
  padding: 0.65rem 1rem;
  margin: 1rem 0 1.4rem 0;
  border-radius: 0 6px 6px 0;
  font-size: 0.95em;
  line-height: 1.9;
}

/* ④ テーブルの精緻化（クラス無しの素のテーブルのみ） */
/* 文字は固定 12px（スケールの .smallest）。このファイルはブログ限定 */
.md-typeset table:not([class]) {
  font-size: 12px;
}
.md-typeset table:not([class]) th {
  background: var(--md-default-fg-color--lightest);
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.4rem 0.7rem !important;
  font-variant-numeric: tabular-nums;
}
.md-typeset table:not([class]) tbody tr:hover {
  background-color: var(--md-default-fg-color--lightest);
}

/* ヘッダー・メニューのロゴは出さない（サイト名だけにする） */
.md-header .md-header__button.md-logo,
.md-nav--primary .md-nav__title .md-nav__button.md-logo,
.md-nav__button.md-logo { display: none !important; }

/* 左のサイドバー（PC幅）の最上部にある、リンクのないサイト名の見出しは出さない
   （ヘッダーに同じサイト名が出ているため）。スマホのメニュー（ドロワー）では、ここが見出しになるので残す。 */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    display: none;
  }
}