:root{--gap:12px}
body{font-family:Arial, sans-serif; margin:10px; line-height:1.35}
header{display:flex; justify-content:space-between; align-items:center; gap:var(--gap)}
h1{font-size:1.2rem; margin:0}
h2{font-size:1.2rem}
.logo{height:52px; width:auto}
label{display:block; margin:10px 0}
input, select{width:100%; padding:10px; font-size:16px; box-sizing:border-box}
button{width:100%; padding:12px; font-size:16px; margin-top:10px}
iframe{width:100%; height:70vh; border:1px solid #ddd; border-radius:10px}
.confirm{position:sticky; bottom:0; background:#fff; padding:10px 0}
.checkbox{display:flex; gap:10px; align-items:center}
.quiz fieldset{border:1px solid #ddd; border-radius:12px; padding:10px; margin:12px 0}
.quiz legend{padding:0 6px}
.opt{display:block; padding:8px 0}
.quizimg{max-width:100%; border-radius:12px; margin:10px 0; border:1px solid #ddd}
.result{font-size:1.1rem}
.list{margin:10px 0 18px}
@media(min-width:900px){
  body{max-width:900px; margin:20px auto}
  h1{font-size:1.5rem}
}