/* スティッキーフッター用のスタイル */
body {
  display: flex; /* body全体をFlexboxコンテナにする */
  flex-direction: column; /* 子要素を縦に並べる */
  min-height: 100vh; /* bodyの高さを最低でも画面の高さ100%にする */
}

main {
  flex-grow: 1; /* main要素ができるだけ多くのスペースを埋めるように伸ばす */
}

/* 広告プレースホルダー用のスタイル */
.ad-placeholder {
  background-color: #f8f9fa; /* 背景を薄いグレーに */
  border: 1px solid #dee2e6; /* 枠線を追加 */
  padding: 1rem; /* 内側の余白 */
  text-align: center; /* テキストを中央揃えに */
  margin-bottom: 1rem; /* 下に少し余白を追加 */
  font-size: 0.9rem; /* 文字を少し小さく */
  color: #6c757d; /* 文字色をグレーに */
}

/* ▼▼▼ YouTube埋め込み動画をレスポンシブ対応させるためのスタイル ▼▼▼ */
.youtube-embed-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9のアスペクト比 */
  height: 0;
  overflow: hidden;
  margin-bottom: 1rem;
}

.youtube-embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ▼▼▼ 目次用のスタイルを追記 ▼▼▼ */
#toc-list ul {
  padding-left: 1rem; /* 下の階層のインデントをインデント*/
}

#toc-list a {
  text-decoration: none;
  display: block;
  padding: 0.2rem 0;
}

/* ライトモードでのリンク色（デフォルト） */
[data-bs-theme="light"] #toc-list a {
  color: #212529;
}

/* ダークモードでのリンク色 */
[data-bs-theme="dark"] #toc-list a {
  color: #ced4da; /* 読みやすい明るいグレーに */
}

/* ホバー時のスタイル */
#toc-list a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] #toc-list a:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
/* --- ダークモード用のスタイル --- */

/* ダークモード時のページ全体の背景色 */
[data-bs-theme="dark"] body {
  background-color: #121212; /* より深い黒に近い色 */
}

/* ダークモード時のカードとリストグループのスタイル */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .list-group-item {
  background-color: #212529; /* 背景より少し明るいダークグレー */
  border-color: rgba(255, 255, 255, 0.1); /* 境界線を少しだけ明るく */
}

/* ダークモード時のリスト内のリンクの色 */
[data-bs-theme="dark"] .list-group-item a {
  color: #8cb4ff;
}

[data-bs-theme="dark"] .list-group-item a:hover {
  color: #a9c7ff;
}

/* ダークモード時のフッターのスタイル */
[data-bs-theme="dark"] .footer.bg-light {
  background-color: #212529 !important;
  color: #adb5bd;
}

/* ダークモード時のフッター内の.text-mutedの色 */
[data-bs-theme="dark"] .footer .text-muted {
  color: #6c757d !important;
}

/* ダークモード時の広告プレースホルダーのスタイル */
[data-bs-theme="dark"] .ad-placeholder {
  background-color: #212529;
  border-color: rgba(255, 255, 255, 0.1);
  color: #6c757d;
}

/* ▼▼▼ Toast UI Editorのダークモード用スタイルを追記 ▼▼▼ */
[data-bs-theme="dark"] .toastui-editor-defaultUI {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .toastui-editor-defaultUI-toolbar {
  background-color: #212529;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .toastui-editor-md-container,
[data-bs-theme="dark"] .toastui-editor-ww-container {
  background-color: #2b3035;
}

[data-bs-theme="dark"] .toastui-editor-contents {
  color: #f8f9fa; /* テキストの色を白っぽく */
}

[data-bs-theme="dark"] .toastui-editor-toolbar-icons {
  border-color: transparent;
  color: #f8f9fa;
}

[data-bs-theme="dark"] .toastui-editor-toolbar-icons:hover {
  background-color: #495057;
}

[data-bs-theme="dark"] .toastui-editor-popup {
  background-color: #212529;
  border-color: rgba(255, 255, 255, 0.2);
}

/* ダークモード時のToast UI Editorの本文テキストの色を上書き */
[data-bs-theme="dark"] .toastui-editor-contents,
[data-bs-theme="dark"] .ProseMirror {
  color: #ced4da; /* 読みやすい明るいグレーに設定 */
}

/* ダークモード時のToast UI Editorの「プレビュー」エリアのスタイル */
[data-bs-theme="dark"] .toastui-editor-md-preview {
  background-color: #2b3035; /* 背景色を編集エリアと合わせる */
}

/* プレビュー内の全てのテキスト要素（見出し、段落、リストなど）の色を明るくする */
[data-bs-theme="dark"] .toastui-editor-md-preview .toastui-editor-contents * {
  color: #ced4da !important;
}

/* プレビュー内の見出しの下線の色だけ調整 */
[data-bs-theme="dark"] .toastui-editor-md-preview .toastui-editor-contents h1,
[data-bs-theme="dark"] .toastui-editor-md-preview .toastui-editor-contents h2,
[data-bs-theme="dark"] .toastui-editor-md-preview .toastui-editor-contents h3,
[data-bs-theme="dark"] .toastui-editor-md-preview .toastui-editor-contents h4,
[data-bs-theme="dark"] .toastui-editor-md-preview .toastui-editor-contents h5,
[data-bs-theme="dark"] .toastui-editor-md-preview .toastui-editor-contents h6 {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* ▼▼▼ タグクラウド用のスタイルを追加 ▼▼▼ */
.tag-cloud-container .badge {
  margin: 2px 4px; /* タグ同士の余白 */
  transition: all 0.2s ease-in-out; /* ホバー時のアニメーション */
  text-decoration: none;
}
.tag-cloud-container .badge:hover {
  transform: scale(1.1);
}

/* 投稿数に応じた文字サイズ */
.tag-size-1 {
  font-size: 0.8rem;
}
.tag-size-2 {
  font-size: 0.9rem;
}
.tag-size-3 {
  font-size: 1rem;
  font-weight: bold;
}
.tag-size-4 {
  font-size: 1.2rem;
  font-weight: bold;
}
.tag-size-5 {
  font-size: 1.4rem;
  font-weight: bold;
}