@charset "UTF-8";

/* ===================================================
   🌌 背景色と基本の文字色
   =================================================== */
body {
  background-color: #1C212F; /* メイン背景：夜空色 */
  color: #e6dfd9;            /* メイン文字色：淡いグレー */
  transition: background-color 0.4s ease, color 0.4s ease;
}

header {
  background-color: #1C212F; /* 固定ヘッダーの背景色 */
}

footer {
  opacity: 0.7;       
}

/* リンク色 */
a {
  color: #d4b28c; /* 基本のゴールドベージュ */
}

/* ===================================================
   🏷️ NEWバッジ（赤抜き白抜き）
   =================================================== */
.new-badge {
  background-color: #ff6b6b; /* 赤地 */
  color: #ffffff;            /* 白抜き文字 */
}

/* ===================================================
   🧭 ジャンプバナーの色
   =================================================== */
.log-banner {
  background-color: #242b3d; /* バナー背景：少し明るい紺 */
  border: 1px solid #d4b28c;  /* 枠線：ゴールド */
}

.banner-title {
  color: #d4b28c; /* タイトル：ゴールド */
}

.banner-desc {
  color: #e6dfd9; /* 説明文：淡いグレー */
  opacity: 0.8;
}

/* 🌟 バナーホバー時の色反転 */
.log-banner:hover {
  background-color: #d4b28c; /* 背景がゴールドに */
}

.log-banner:hover .banner-title,
.log-banner:hover .banner-desc {
  color: #1C212F !important; /* 文字が夜空色に反転 */
  opacity: 1;
}

/* ===================================================
   📖 漫画ページの装飾色
   =================================================== */
.comic-divider {
  background-color: #d4b28c; /* 飾り線：ゴールド */
}

/* ナビゲーションボタン（prev, next） */
.nav-btn {
  background-color: transparent;
  border: 1px solid #d4b28c;
  color: #d4b28c !important;
}

.nav-btn:hover {
  background-color: #d4b28c;  
  color: #1C212F !important;  
  opacity: 1;
}

/* 一覧に戻るボタン（back） */
.btn-back {
  border-color: #e6dfd9;
  color: #e6dfd9 !important;
}

.btn-back:hover {
  background-color: #e6dfd9;
  color: #1C212F !important;
}

/* ===================================================
   🎪 同人誌（offline）ページのカラー装飾
   =================================================== */
.book-card {
  background-color: #242b3d;  /* カード背景：少し明るい紺 */
  border: 1px solid #d4b28c;  /* 枠線：ゴールド */
}

.book-cover img {
  box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* 表紙の影 */
}

.book-status {
  background-color: #ff4a4a;  /* タグ：元気な赤 */
  color: #ffffff;
}

.book-info h3 {
  color: #e6dfd9;
  border-bottom: 1px dashed #d4b28c; /* タイトル下のゴールド破線 */
}

.event-meta i {
  color: #d4b28c; /* アイコン：ゴールド */
}

.book-spec th, .book-spec td {
  border-bottom: 1px solid rgba(212, 178, 140, 0.2); /* 薄いゴールドの区切り線 */
}
.book-spec th {
  color: #d4b28c; /* スペック項目名：ゴールド */
}

.book-story h4 {
  color: #d4b28c; /* 「あらすじ」の見出し：ゴールド */
}
.book-story p {
  opacity: 0.9;
}

/* 通販ボタンの色 */
.shop-btn {
  background-color: transparent;
  border: 1px solid #d4b28c;
  color: #d4b28c !important;
}
/* マウスホバー時の光る演出 */
.shop-btn:hover {
  background-color: #d4b28c;
  color: #1C212F !important;
}

/* ===================================================
   👤 プロフィール（about）ページのカラー
   =================================================== */
.profile-card {
  background-color: rgba(255, 255, 255, 0.03); 
  border: 1px solid rgba(212, 178, 140, 0.1);  
}

.profile-avatar img {
  border: 3px solid #d4b28c;
}

.profile-info h3 {
  color: #e6dfd9;
}

.profile-info h4 {
  color: #d4b28c;            
}

.profile-info i {
  color: #d4b28c;            
}