:root { --bg:#f7f8fa; --fg:#222; --muted:#666; --line:#dde3ea; --accent:#1a6fb5; --accent-dark:#155a92; --ok:#2e7d32; --ng:#c62828; --pending:#999; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif; line-height:1.8; font-size:17px; }
.site-header { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; padding:12px 16px; background:#fff; border-bottom:1px solid var(--line); }
.site-title { font-weight:700; font-size:1.2rem; color:var(--accent); text-decoration:none; }
.site-tagline { color:var(--muted); font-size:.9rem; }
.site-account { margin-left:auto; font-size:.9rem; display:flex; align-items:center; gap:10px; }
.site-links { font-size:.9rem; }
.site-link { color:inherit; border:1px solid currentColor; border-radius:999px; padding:2px 10px; text-decoration:none; opacity:.85; }
.site-link:hover { opacity:1; }
.account { display:inline-flex; align-items:center; gap:10px; }
.account-name { color:var(--fg); text-decoration:none; font-weight:600; }
.logout-form { display:inline; }
.link-button { background:none; border:none; color:var(--accent); cursor:pointer; font-size:.9rem; padding:0; text-decoration:underline; }
.account-link { color:var(--accent); }
.site-footer { text-align:center; color:var(--muted); font-size:.85rem; padding:32px 16px; }
.container { max-width:860px; margin:0 auto; padding:16px; }
h1 { font-size:1.6rem; margin:8px 0 4px; }
h2 { font-size:1.25rem; margin:28px 0 8px; border-bottom:2px solid var(--accent); padding-bottom:4px; }
h3 { font-size:1.05rem; margin:16px 0 6px; color:var(--accent-dark); }
.lead, .notice { color:var(--muted); }
.notice { background:#fff; border-left:4px solid var(--pending); padding:8px 12px; }
.unit-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.unit-card a { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px; text-decoration:none; color:var(--fg); }
.unit-card a:hover { border-color:var(--accent); }
.unit-card--pending a { color:var(--muted); background:#f3f4f6; }
.unit-order { display:inline-block; min-width:1.6em; text-align:center; background:var(--accent); color:#fff; border-radius:999px; font-size:.8rem; padding:1px 6px; }
.unit-card--pending .unit-order { background:var(--pending); }
.badge { margin-left:auto; font-size:.75rem; color:var(--pending); border:1px solid var(--pending); border-radius:4px; padding:0 6px; }
.breadcrumb { font-size:.9rem; color:var(--muted); }
.explanation { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 20px; margin:12px 0; }
.explanation h2 { margin-top:0; }
.explanation h3 { margin-top:20px; }
.explanation table { border-collapse:collapse; margin:10px 0; font-size:.95rem; }
.explanation th, .explanation td { border:1px solid var(--line); padding:5px 10px; text-align:left; }
.explanation th { background:#eef3f8; }
.explanation pre { background:#f0f3f7; padding:10px 12px; border-radius:6px; overflow-x:auto; font-size:.9rem; line-height:1.4; }
.explanation blockquote { border-left:4px solid var(--accent); margin:10px 0; padding:4px 12px; color:var(--muted); }
.button { display:inline-block; border:none; border-radius:8px; padding:12px 22px; font-size:1.05rem; cursor:pointer; }
.button--primary { background:var(--accent); color:#fff; }
.button--primary:hover { background:var(--accent-dark); }
.start-form { margin:20px 0; }
.button--secondary { background:#fff; color:var(--accent); border:1px solid var(--accent); text-decoration:none; }
.notice--error { border-left-color:var(--ng); color:var(--ng); }
.question-list, .result-list { list-style:none; padding:0; margin:16px 0; display:grid; gap:10px; }
.question, .result { background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.question--invalid { border-color:var(--ng); background:#fff6f6; }
.question-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.question-number { display:inline-block; min-width:2em; text-align:center; background:var(--accent); color:#fff; border-radius:999px; font-size:.85rem; padding:2px 8px; }
.question-prompt { font-size:1.15rem; }
.answer-input { margin-top:8px; width:100%; max-width:320px; font-size:1.1rem; padding:8px 10px; border:1px solid var(--line); border-radius:6px; }
.choices { list-style:none; padding:0; margin:8px 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:6px; }
.choices label { display:block; background:#f7f8fa; border:1px solid var(--line); border-radius:6px; padding:8px 10px; cursor:pointer; }
.problem { color:var(--ng); margin:6px 0 0; font-size:.95rem; }
.quiz-form>.button { margin-top:8px; }
.score-card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 20px; text-align:center; }
.score { font-size:2.4rem; font-weight:700; color:var(--accent); }
.actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px; }
.result--correct { border-left:5px solid var(--ok); }
.result--wrong { border-left:5px solid var(--ng); }
.mark { margin-left:auto; font-size:1.4rem; font-weight:700; }
.result--correct .mark { color:var(--ok); } .result--wrong .mark { color:var(--ng); }
.result-detail { display:grid; grid-template-columns:auto 1fr; gap:2px 12px; margin:8px 0 0; font-size:.95rem; }
.result-detail dt { color:var(--muted); } .result-detail dd { margin:0; }
.table { width:100%; border-collapse:collapse; background:#fff; font-size:.95rem; }
.table th, .table td { border:1px solid var(--line); padding:6px 10px; text-align:left; }
.table th { background:#eef3f8; }
.score-cell { font-weight:700; color:var(--accent); }
@media (max-width: 480px) { body { font-size:16px; } .container { padding:12px; } }