/* ===== 0. 変数の定義（元のコードの数値をそのままセット） ===== */
:root {
  --main-bg: #001200;           /* body等の背景色 */
  --text-color: #ffffff;        /* 基本の文字色 */
  --accent-color: #800000;      /* h2の線、ボタン、フッター等のエンジ色 */
  --post-bg: rgba(255, 255, 255, 0.05); /* 投稿枠の背景 */
  --name-color: #ffcc00;        /* 名前やレス番号の黄色 */
  --input-bg: #f9f9f9;          /* 入力欄の背景 */
  --input-text: #333333;        /* 入力欄の文字色 */
  --anchor-color: #4da6ff;      /* アンカーの青色 */
  --border-color: #333333;      /* 入力枠などの線 */
  --post-border: #222222;       /* 投稿の下線 */
  --date-color: #aaaaaa;        /* 日付のグレー */
}

/* ===== 1. 全体のスタイル ===== */
body {
  margin: 0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  background-color: var(--main-bg);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

header {
  background-image: url(images/IMG_0304.jpeg);
  background-color: #333;
  padding: 80px 20px;
  background-size: cover;
  background-position: center;
  text-align: center;
}

h1 {
  color: white;
  font-size: 60px;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* ===== フォーム部分 ===== */
section {
  padding: 30px 20px;
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  color: var(--text-color);
  border-left: 5px solid var(--accent-color);
  padding-left: 15px;
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input, textarea {
  padding: 12px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
  font-size: 16px;
  color: var(--input-text);
}

#postBtn {
  background-color: var(--accent-color);
  color: white;
  padding: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
}

#postBtn:disabled { background-color: #555; }

/* ===== 投稿一覧部分 ===== */
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.sync-text {
  font-size: 14px;
  color: var(--name-color);
  font-weight: normal;
  opacity: 0;
  transition: opacity 0.3s;
}
.is-loading { opacity: 1; }

.reload-btn {
  background-color: transparent;
  border: 1px solid var(--text-color);
  color: var(--text-color);
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
}

.post-item {
  background-color: var(--post-bg);
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
  border-bottom: 1px solid var(--post-border);
  transition: opacity 0.3s, background-color 0.3s;
  scroll-margin-top: 50px; /* ジャンプ位置：最新版の50pxを採用 */
}

/* ★アンカー・レス番号機能（維持）★ */
.res-num {
  color: var(--name-color);
  font-weight: bold;
  margin-right: 10px;
  font-family: monospace;
}

.anchor {
  color: var(--anchor-color);
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}

/* アンカーで飛んだ先の投稿を光らせる（維持） */
.post-item:target {
  animation: anchor-flash 2s ease-out;
}

@keyframes anchor-flash {
  0% { background-color: rgba(255, 204, 0, 0.3); } 
  100% { background-color: var(--post-bg); }
}

.loading-fade { opacity: 0.5; }

.post-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.post-name {
  font-weight: bold;
  color: var(--name-color);
}

.post-date {
  font-size: 12px;
  color: var(--date-color);
}

/* ===== ナビ、メニュー、フッター ===== */
footer { text-align: center; padding: 20px; background-color: var(--accent-color); font-size: 14px; color: white; }

.nav-container { position: absolute; top: 20px; right: 20px; z-index: 100; }
.nav-btn { background-color: var(--accent-color); color: white; padding: 8px 20px; border: 1px solid white; border-radius: 20px; cursor: pointer; font-weight: bold; transition: 0.3s; }

.menu-btn { position: absolute; top: 20px; left: 20px; font-size: 30px; color: white; cursor: pointer; z-index: 101; }

.side-menu { 
  position: fixed; top: 0; left: -250px; width: 250px; height: 100%; 
  background-color: var(--main-bg); 
  border-right: 1px solid var(--accent-color); 
  transition: 0.3s; z-index: 200; padding-top: 60px; 
}
.side-menu.open { left: 0; }
.side-menu ul { list-style: none; padding: 0; }
.side-menu ul li a { display: block; padding: 15px 25px; color: var(--text-color); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
.side-menu ul li a:hover { background-color: var(--accent-color); }
.close-btn { position: absolute; top: 10px; right: 20px; font-size: 30px; color: white; cursor: pointer; }