:root {
  --moneq-correct: #198754;
  --moneq-wrong: #dc3545;
}

body {
  background-color: #f8f9fa;
  -webkit-font-smoothing: antialiased;
}

/* ---- 4択の選択肢 ---- */
.quiz-choices li + li {
  margin-top: .5rem;
}

.quiz-choice {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  width: 100%;
  padding: .85rem 1rem;
  text-align: left;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  line-height: 1.5;
  color: #212529;
  transition: border-color .12s, background-color .12s;
}

.quiz-choice:hover:not(:disabled) {
  border-color: #0d6efd;
  background: #f0f6ff;
}

/* 回答後も読めるようにする。ブラウザ既定の disabled 表示は薄すぎる */
.quiz-choice:disabled {
  cursor: default;
  opacity: 1;
  color: #6c757d;
}

.quiz-choice.is-correct,
.quiz-choice.is-wrong {
  color: #212529;
}

.quiz-choice-key {
  flex: 0 0 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 600;
  color: #6c757d;
  background: #f1f3f5;
  border-radius: 50%;
}

/* 回答後の色分け。色だけに頼らず記号も添える */
.quiz-choice.is-correct {
  border-color: var(--moneq-correct);
  background: #e8f5ee;
}

.quiz-choice.is-correct .quiz-choice-key {
  color: #fff;
  background: var(--moneq-correct);
}

.quiz-choice.is-wrong {
  border-color: var(--moneq-wrong);
  background: #fdecee;
}

.quiz-choice.is-wrong .quiz-choice-key {
  color: #fff;
  background: var(--moneq-wrong);
}

.quiz-choice-mark {
  margin-left: auto;
  font-weight: 600;
  flex-shrink: 0;
}

.course-card {
  transition: transform .12s, box-shadow .12s;
}

.course-card:hover {
  transform: translateY(-2px);
}

.course-card h3 {
  color: #212529;
}

/* ---- 管理画面のモーダル ---- */
/* Bootstrap の JavaScript は読み込んでいないので、開閉は自前で行う */
.modal.is-open {
  display: block;
  background: rgba(0, 0, 0, .5);
}

.modal.is-open .modal-dialog {
  margin-top: 3rem;
}

/* ---- 連続出題の進捗バー ---- */
.progress-bar {
  transition: width .25s ease;
}