/* assets/style.css — シンプルな白基調のUI */
:root {
--bg: #ffffff;
--panel: #ffffff;
--text: #1f2937; /* gray-800 */
--muted: #6b7280; /* gray-500 */
--primary: #2563eb; /* blue-600 */
--ok: #059669; /* emerald-600 */
--ng: #dc2626; /* red-600 */
--border: #e5e7eb; /* gray-200 */
}


* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", Helvetica, Arial, sans-serif;
line-height: 1.6;
}


/* レイアウト */
.container { max-width: 760px; margin: 24px auto; padding: 0 16px; }
.header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.header h1 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.scoreboard { margin-left: auto; color: var(--muted); font-weight: 600; }
.reset { background: #fff; border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.reset:hover { background: #f8fafc; }


.quiz, .feedback {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
margin-top: 12px;
}


.question { font-size: 1.05rem; margin-bottom: 12px; font-weight: 600; }
.choices { display: grid; gap: 10px; }


.choice {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
background: #fff;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease;
}
.choice input { width: 18px; height: 18px; }
.choice:hover { background: #f8fafc; }
.choice.correct { border-color: var(--ok); background: #ecfdf5; }
.choice.wrong { border-color: var(--ng); background: #fef2f2; }


.loader { color: var(--muted); }


.nav { display: flex; gap: 10px; margin-top: 14px; }
.primary, .secondary { padding: 10px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; font-weight: 600; }
.primary { background: var(--primary); color: #fff; }
.primary:hover { filter: brightness(0.97); }
.primary[disabled] { opacity: .6; cursor: not-allowed; }
.secondary { background: #fff; color: var(--text); border-color: var(--border); }
.secondary:hover { background: #f8fafc; }


.badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 0.8rem; border: 1px solid var(--border); color: var(--muted); background: #f8fafc; }
.badge.ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge.ng { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.explanation { color: var(--muted); margin-top: 6px; }
.footer { margin-top: 22px; color: var(--muted); }


/* モバイル最適化 */
@media (max-width: 420px) {
.header { gap: 8px; }
.scoreboard { margin-left: 0; }
}