/* ==========================================================================
   答え合わせ（AnswerCheck） - styles.css
   --------------------------------------------------------------------------
   初学者向けメモ:
   - :root は「CSS変数（カスタムプロパティ）」を定義する場所です。
   - 変数は var(--変数名) で参照します。
   - 目的: Bootstrap の見た目を少しだけ調整して、読みやすく整えること。
   ========================================================================== */

:root {
  --ac-card-radius: 14px;
  /* カード角丸 */
  --ac-soft-border: rgba(0, 0, 0, .10);
  /* 薄い枠線 */
  --ac-muted: rgba(0, 0, 0, .55);
  /* 補助テキスト色 */
}

/* --------------------------------------------------------------------------
   Header / Footer
   - position: sticky でヘッダを上部に固定
   -------------------------------------------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  /* Bootstrapのナビなどと競合しないよう少し高め */
}

.app-footer {
  position: static;
}

/* --------------------------------------------------------------------------
   Overall stat pill（全体集計の小さなピル表示）
   -------------------------------------------------------------------------- */
.badge-stat {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--ac-soft-border);
  padding: .35rem .6rem;
  border-radius: 999px;
  background: #fff;
}

.badge-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Section stats row（セクション集計）
   -------------------------------------------------------------------------- */
.section-stats {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}

/* --------------------------------------------------------------------------
   Card radius tuning（Bootstrapのカード角丸を統一）
   -------------------------------------------------------------------------- */
.card {
  border-radius: var(--ac-card-radius);
}

.card-header {
  border-top-left-radius: var(--ac-card-radius) !important;
  border-top-right-radius: var(--ac-card-radius) !important;
}

.card-footer {
  border-bottom-left-radius: var(--ac-card-radius) !important;
  border-bottom-right-radius: var(--ac-card-radius) !important;
}

/* --------------------------------------------------------------------------
   Two-column answer/correct grid（回答/正解を2列に）
   - 画面が狭い場合は1列に落とす（レスポンシブ）
   -------------------------------------------------------------------------- */
.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 768px) {
  .option-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Options: horizontal, compact（近接の原則: 近いものは関連がある）
   - チェックボックスとラベルの距離を詰めて、読み取りやすくします。
   -------------------------------------------------------------------------- */
.option-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  /* 選択肢同士の横方向の間隔 */
  row-gap: 4px;
  /* 縦方向の間隔 */
  padding: 4px 0;
}

.option-list .form-check {
  display: flex;
  align-items: center;
  gap: 4px;
  /* checkbox と label の間隔 */
  margin: 0;
}

.option-list .form-check-input {
  margin-top: 0;
  /* Bootstrapの既定のズレを打ち消す */
}

/* --------------------------------------------------------------------------
   Search group width（検索欄の最小幅）
   -------------------------------------------------------------------------- */
.search-group {
  min-width: 280px;
}

/* Help nudge（初回案内） */
#helpNudge {
  border-radius: var(--ac-card-radius);
}

/* Question footer actions（各問題パネル右下のボタン群） */
.q-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}