/* --- 投稿ページの基本的なリセットとbodyのスタイル --- */
body,
h1,
h2,
h3,
p,
ul,
pre {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  /* ★ 変更: サイト全体の背景色に統一 */
  background-color: #202122;
  color: #f0f0f0;
  /* デフォルト文字色を白系に */
}

 .explanation_post-home {
  background: #3f3f3f;
  /* justify-content: center; (削除) */
  display: flex;
  flex-direction: column;
  /* min-height: 100vh; */
}


/* --- レイアウト関連 --- */
.explanation_post {
  background: #3f3f3f;
  height: 100vh;
  /* overflow: hidden; */
}

.explanations-contaner {
  background: #020405;
  padding: 100px 200px 100px 200px;  
}

.layout-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.main-content {
  width: 100%;
  background-color: #000000; 
  padding: 2rem; 
  border-radius: 8px; 
  border: 1px solid rgba(0, 255, 0, 0.5); 
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.2); 
  color: #f0f0f0; 
  box-sizing: border-box; /* ← この行を追加 */
}

.sidebar-content {
  width: 100%;
}

/* --- レスポンシブデザイン (PC向け) --- */
/* 画面幅が1024px以上の場合に適用 */
@media (min-width: 1024px) {
  .layout-wrapper {
    flex-direction: row;
    /* 横並びに変更 */
  }

  .main-content {
    width: 75%;
    /* lg:w-3/4 に相当 */
  }

  .sidebar-content {
    width: 25%;
    /* lg:w-1/4 に相当 */
    position: sticky;
    /* ★ 変更: navbar(80px) + topbar(40px) + 隙間(2rem) */
    top: 100px;
    align-self: flex-start;
    /* self-start に相当 */
  }
}


/* --- コンテンツスタイル (ダークテーマ版) --- */
.thumbnail-contaner {
  background: #333;
  border: 1px solid rgba(0, 255, 0, 0.5); 
  width: 320px;
  height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
  margin-bottom: 1.5em;
}
.thumbnail {
  margin: 0;
  border-radius: 10px;
  
  /* 変更点: 固定幅をやめ、コンテナに収まるように調整する */
  /* width: 300px; */ /* <-- この行を削除またはコメントアウト */
  
  max-width: 100%;   /* コンテナの幅(320px)を最大値とする */
  max-height: 100%; /* コンテナの高さ(230px)を最大値とする */
  width: auto;      /* アスペクト比を維持 */
  height: auto;     /* アスペクト比を維持 */
}

.explanation_post-contaner h1 {
  font-size: 1.8em;
  font-weight: normal;
  /* ★ 変更: テーマカラー適用 */
  color: rgb(0, 255, 0);
  border-bottom: 1px solid rgba(0, 255, 0, 0.3);
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
  /* グロー追加 */

  padding-bottom: 0.3em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* 最初のh1だけマージントップを調整 */
.explanation_post-contaner h1:first-of-type {
  margin-top: 0.5em;
}


.explanation_post-contaner h2 {
  font-size: 1.5em;
  font-weight: normal;
  /* ★ 変更: テーマカラー適用 */
  color: rgb(0, 255, 0);
  border-bottom: 1px solid rgba(0, 255, 0, 0.3);

  padding-bottom: 0.25em;
  margin-top: 1.3em;
  margin-bottom: 0.5em;
}

.explanation_post-contaner h3 {
  font-size: 1.2em;
  font-weight: bold;
  /* ★ 変更: テーマカラー適用 */
  color: rgb(0, 255, 0);
  opacity: 0.9;

  margin-top: 1em;
  margin-bottom: 0.5em;
}

.explanation_post-contaner p,
.explanation_post-contaner ul li {
  line-height: 1.7;
  /* 行間を少し広げる */
  margin-bottom: 1em;
  color: #f0f0f0;
  /* 文字色を白系に */
}

.explanation_post-contaner ul {
  padding-left: 1.5em;
  /* リストのインデント */
}

.explanation_post-contaner a {
  /* ★ 変更: リンク色を白系に、ホバーで緑 */
  color: #f0f0f0;
  text-decoration: underline;
  transition: color 0.3s;
}

.explanation_post-contaner a:hover {
  color: rgb(0, 255, 0);
  text-decoration: underline;
}

/* インラインコード */
.explanation_post-contaner code {
  /* ★ 変更: ダークテーマのコードスタイル */
  background-color: #333;
  color: #f0f0f0;
  border: 1px solid #444;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: monospace;
}

/* コードブロック */
.explanation_post-contaner pre {
  /* ★ 変更: ダークテーマのコードブロックスタイル */
  background-color: #0d0d0d;
  /* 真っ黒に近い背景 */
  color: #f0f0f0;
  border: 1px solid #333;

  padding: 1em;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* preタグ内のcodeタグは背景を継承 */
.explanation_post-contaner pre code {
  background-color: transparent;
  border: none;
  padding: 0;
}

/* 目次のインデント (既存のまま) */
.toc-h1 {
  padding-left: 0;
}

.toc-h2 {
  padding-left: 1.5em;
}

.toc-h3 {
  padding-left: 3em;
}

.zoomable-image-container {
  margin: 1em 0;
}

.zoomable-image-container img {
  /* ★ 変更: 幅をコンテナに合わせ、枠線をテーマに合わせる */
  width: 100%;
  max-width: 600px;
  /* 最大幅は維持 */
  height: auto;
  border: 1px solid rgba(0, 255, 0, 0.5); 
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
  border-radius: 4px;
}























/* explanations_post.css の末尾に追加 */

/* =======================================
   レスポンシブ対応 (メディアクエリ)
   ======================================= */

/* --- タブレットサイズ (1024px 以下) --- */
@media (max-width: 1024px) {
    .layout-wrapper {
        flex-direction: column; /* 縦積みに変更 */
    }

    .main-content,
    .sidebar-content {
        width: 100%; /* 幅を100%に */
    }

    .sidebar-content {
        position: static; /* sticky を解除 */
        height: auto;     /* 高さを自動に */
        margin-top: 0; 
        order: -1; 
        
        /* ★ 追加: 最大幅を設定し、中央揃えにする */
        max-width: 600px; /* 最大幅 (お好みで調整) */
        margin-left: auto;
        margin-right: auto;
    }

    .main-content {
        order: 0; 
        margin-top: 2rem; 
    }
}


/* --- スマートフォンサイズ (767px 以下) --- */
@media (max-width: 767px) {
    .explanations-contaner {
        padding: 1rem; /* 全体の左右余白を詰める */
    }

    .layout-wrapper {
        padding-top: 80px; /* Navbar(60px) + Topbar(40px) - α */
        gap: 1.5rem; /* メインとサイドバーの隙間を詰める */
    }

    .main-content {
        padding: 1.5rem; /* コンテンツ内の余白を詰める */
    }

    /* --- コンテンツスタイル調整 --- */
    .thumbnail-contaner {
        width: 100%; /* サムネイルコンテナの幅を100%に */
        height: auto; /* 高さは自動 */
    }
    .thumbnail {
        width: 100%; /* サムネイル画像の幅を100%に */
        max-width: 300px; /* 最大幅は維持 */
        height: auto;
    }

    .explanation_post-contaner h1 {
        font-size: 1.6em;
    }
    .explanation_post-contaner h2 {
        font-size: 1.3em;
    }
    .explanation_post-contaner h3 {
        font-size: 1.1em;
    }

    .explanation_post-contaner p,
    .explanation_post-contaner ul li {
        font-size: 0.95em; /* 本文の文字サイズを少し小さく */
    }

    .explanation_post-contaner pre {
        padding: 0.8em;
        font-size: 0.9em; /* コードブロックの文字サイズ調整 */
    }

    .zoomable-image-container img {
        max-width: 100%; /* 画像がコンテナからはみ出さないように */
    }
}