/* quiz.css */
/* 選択肢は縦に並べる */
.quiz .quiz-options {
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 400px;
}

/*.quiz .quiz-options button {
  padding: 0.5rem 1rem;
  border: 1px solid #1a355a;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}


/* 各ボタンの見た目調整 */
.quiz .quiz-options button {
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  border: 1px solid #1a355a;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

/* ホバー時 */
.quiz .quiz-options button:hover {
  background-color: #1a355a;
  color: #fff;
}

.quiz .quiz-options button.correct {
  background-color: #50e3c2;
  border-color: #50e3c2;
  color: #fff;
}

.quiz .quiz-options button.incorrect {
  background-color: #f5a623;
  border-color: #f5a623;
  color: #fff;
}

/* フィードバック */
.quiz-feedback {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-weight: bold;
  max-width: 500px;
  background-color: #f8f8f8;
}

/* 正解・不正解の色 */
.quiz-feedback.correct {
  background-color: #dff0d8;
  color: #3c763d;
  border: 1px solid #3c763d;
}

.quiz-feedback.incorrect {
  background-color: #f2dede;
  color: #a94442;
  border: 1px solid #a94442;
}


/* レイアウト基準 */
.quiz { --gap-1: 8px; --gap-2: 12px; --gap-3: 16px; --gap-4: 24px; --gap-5: 32px; }
.quiz-options { display: grid; gap: var(--gap-2); margin-block: var(--gap-2) var(--gap-3); }

/* 選択肢カード */
.quiz-option {
  display: block;
  padding: 12px 14px;
  border: 1px solid #d5d8de;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  line-height: 1.4;
}
.quiz-option input { display: none; }
.quiz-option:has(input:focus-visible) { outline: 3px solid #bcd3ff; }

/* 判定後の色表現（以前の“色で一目”を再現） */
.quiz-option.is-correct { border-color: #16a34a; background: #e8f7ec; }
.quiz-option.is-wrong   { border-color: #dc2626; background: #fdecec; }
.quiz-option.is-locked  { opacity: .85; cursor: default; }

/* ボタン間隔と見た目 */
.quiz-actions { margin-top: var(--gap-4); }
.quiz-submit {
  padding: 12px 18px;
  border-radius: 10px;
  border: none;
  background: #1f4aa8; color: #fff; font-weight: 600;
}
.quiz-submit:disabled { opacity: .6; cursor: not-allowed; }

/* フィードバックとリトライ */
.quiz-feedback, .quiz-reason {
  margin-top: var(--gap-3);
  padding: 12px 14px;
  border-radius: 10px;
  background: #f5f7fb;
}
.quiz-retry-wrap { margin-top: var(--gap-2); }
.quiz-retry {
  background: none; border: none; color: #1f4aa8; text-decoration: underline;
  padding: 8px 4px; cursor: pointer; font-weight: 600;
}

/* モバイル最適化 */
@media (max-width: 480px) {
  .quiz-actions { margin-top: var(--gap-5); }
  .quiz-submit { width: 100%; padding-block: 14px; border-radius: 12px; }
}