/* quiz_v2.css */
.quiz { --gap-2:12px; --gap-3:16px; --gap-4:24px; --gap-5:32px; }

.quiz .quiz-options{
  display:grid;
  gap:var(--gap-2);
  margin-block:var(--gap-2) var(--gap-3);
  max-width:480px;
}

/* 選択肢カード（ラベル＝大きなタップターゲット） */
.quiz .quiz-option{
  position:relative;
  display:block;
  padding:12px 14px;
  border:1px solid #d5d8de;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  line-height:1.5;
  transition: background-color .15s, border-color .15s;
}
.quiz .quiz-option:hover{ background:#fafbfd; }
.quiz .quiz-option input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; appearance:none; margin:0; cursor:pointer;
}
.quiz .quiz-option:focus-within{ outline:3px solid #bcd3ff; outline-offset:2px; }

/* 判定後の色（不正解は選んだ項目のみ赤。正解は選んだ項目のみ緑） */
.quiz .quiz-option.is-correct{ border-color:#16a34a; background:#e8f7ec; }
.quiz .quiz-option.is-wrong  { border-color:#dc2626; background:#fdecec; }
.quiz .quiz-option.is-locked { opacity:.95; cursor:default; }

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

/* スマホ最適化：余白を広めに */
@media (max-width:480px){
  .quiz .quiz-options{ gap: var(--gap-3); }
  .quiz .quiz-feedback{ margin-top: var(--gap-4); }
}