/* 基本配色 */
body { background: #0b1020; color: #e9eefb; }
a { color: #d6dcff; }
a:hover { color: #ffffff; }

/* ナビ & オフキャンバス（常にダークを維持） */
.navbar, .offcanvas { background: #0f1530; }
.navbar .navbar-brand, .navbar .nav-link { color: #e9eefb; }
.navbar .nav-link:hover { color: #ffffff; }
.navbar .navbar-toggler { border-color: rgba(255,255,255,.25); }
.navbar .navbar-toggler-icon { filter: invert(1) brightness(1.2); }

/* カード（既定＝ダーク） */
.card { background: #121938; border: 1px solid rgba(255,255,255,.08); }

/* ボタン */
.btn-primary { background: #6c7bff; border: none; }
.btn-primary:hover, .btn-primary:focus { background: #5a6af5; }
.btn-outline-light { border-color: rgba(255,255,255,.25); color: #e9eefb; }
.btn-outline-light:hover, .btn-outline-light:focus { background: rgba(255,255,255,.1); color: #fff; }

/* テキスト色（ダーク時） */
.accent { color:#8be9fd; }
.muted { color: #b8c1ec; }
.text-question { color:#ffffff; }
.text-contrast { color:#ffffff; }       /* 結果見出し・summary など白で確実に見える */

/* 進捗バー */
.progress { background: rgba(255,255,255,.08); }
.progress-bar { background: #6c7bff; }

/* リスト（選択肢） */
.choice:hover { background: rgba(255,255,255,.06); }
.list-group-item { background: transparent; color: #e9eefb; border-color: rgba(255,255,255,.08); }
.list-group-item.active {
  background: linear-gradient(90deg, rgba(108,123,255,.25), rgba(108,123,255,.15));
  color: #fff; border-color: rgba(108,123,255,.6);
}

/* フォーム */
.form-control, .form-select { background: #0f1530; color: #e9eefb; border-color: rgba(255,255,255,.18); }
.form-control::placeholder { color: #a8b0d8; }
.form-control:focus, .form-select:focus {
  background: #0f1530; color: #fff; border-color: #6c7bff;
  box-shadow: 0 0 0 .2rem rgba(108,123,255,.25);
}

/* メール登録メッセージ（見やすい色） */
#subMsg { display:inline-block; margin-top:.25rem; }
#subMsg.text-success { color:#78e08f !important; }
#subMsg.text-warning { color:#ffd166 !important; }
#subMsg.text-danger  { color:#ff6b6b !important; }

/* ===== Hero (トップ見出し) ===== */
.hero {
  position: relative;
  background: url("/img/hero.jpg") center / cover no-repeat;
  min-height: 60vh;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
.hero .hero-body { position: relative; z-index: 1; }
.hero h1 { color: #ffffff; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.hero .lead { color: #e9eefb; }
.hero .btn.btn-outline-light:hover,
.hero .btn.btn-outline-light:focus { background: rgba(255,255,255,.15); color: #fff; }
@media (max-width: 576px) {
  .hero { min-height: 70vh; }
  .hero h1 { font-size: 1.9rem; }
  .hero .lead { font-size: 1.05rem; }
}

/* === About（検定の紹介）を読みやすく（ダークのまま） === */
.about-section { background: transparent; }
.about-section .card {
  background: rgba(18, 25, 56, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.text-contrast { color: #ffffff !important; }
.about-section ul li { color: #ffffff; }

/* ====== 結果レビュー（ダーク時） ====== */
.review-correct { color: #78e08f !important; font-weight: bold; }
.review-wrong { color: #ff6b6b !important; font-weight: bold; }
.review-answer { color: #ffffff !important; }
.review-question {
  color: #ffffff !important;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* ===== 記事本文（ダーク時の既定） ===== */
.prose { line-height: 1.9; color: #e9eefb; }
.prose h1, .prose h2, .prose h3 { color: #ffffff; margin-top: 1.5rem; }
.prose a { color: #d6dcff; }
.prose a:hover { color: #fff; }
.breadcrumb .link-muted { color: #a8b0d8; }
.breadcrumb .link-muted:hover { color: #d6dcff; }

/* === 記事ページ用（白基調エリアのみ） === */
/* === 記事ページ用（白基調エリアのみ） === */
/* ページ全体の背景は変えず（= ダークのまま）、白化は記事本文ボックスに限定 */

/* 記事本文ボックスだけ白化（左右はダークのまま残る） */
body.article-page .prose {
  color: #333333 !important;
  background: #ffffff !important;
  padding: 1.25rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
body.article-page .prose h1,
body.article-page .prose h2,
body.article-page .prose h3 { color: #111111 !important; }
body.article-page .prose a { color: #0066cc; }
body.article-page .prose a:hover { color: #004080; }

/* 記事本文内の補助テキストのみグレー化（外部の .muted は既存のまま） */
body.article-page .prose .muted { color: #666666 !important; }

/* 記事本文内の表も白基調に統一 */
body.article-page .prose table,
body.article-page .prose .table {
  background: #ffffff !important;
  color: #000000 !important;
}
body.article-page .prose th,
body.article-page .prose td {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ddd !important;
}

/* 記事ページ内のカード（本文内で使う場合のみ白） */
body.article-page .prose .card {
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  color: #000000 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
/* === 記事一覧カードを白基調に（一覧ページのカードだけ） === */
.articles-list .card {
  background: #ffffff !important;
  border: 1px solid #ddd !important;
  color: #000000 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.articles-list .card-title { color: #111111 !important; }
.articles-list .card-text  { color: #333333 !important; }
.articles-list .card .muted { color: #666666 !important; }