/* P8-C「1次不等式」 style.css — Ver.0.1.0
 * 本フォルダのみで自己完結。P8-A/P8-B/他レッスンのCSSとは一切共有しない。
 */
*{box-sizing:border-box;}
body{
  margin:0; font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  background:#f7f6f2; color:#222; line-height:1.6;
}
#app{ max-width:760px; margin:0 auto; padding:16px; }
h1{ font-size:1.5rem; margin:0.4em 0; }
h2{ font-size:1.2rem; margin:0.6em 0 0.4em; }
.intro{ background:#eef3fb; border-radius:8px; padding:10px 14px; }
.example{ background:#f3f0e6; border-radius:8px; padding:8px 12px; }
.q, .q-context{ font-size:1.05rem; margin:0.6em 0; }
.q-sub{ font-weight:bold; }
ul.opts, ul.diag-opts{ list-style:none; padding:0; margin:10px 0; display:flex; flex-direction:column; gap:8px; }
.opt-btn, .diag-btn, .cand-btn, .lesson-btn, .base-btn{
  display:block; width:100%; text-align:left; padding:12px 14px; font-size:1rem;
  border:2px solid #4a6b8a; border-radius:8px; background:#fff; color:#223; cursor:pointer;
}
.opt-btn:hover, .opt-btn:focus, .diag-btn:hover, .diag-btn:focus{ background:#eaf1fb; }
.numeric-input{ display:flex; gap:8px; margin:10px 0; align-items:center; }
.numeric-input input{ font-size:1.1rem; padding:8px; width:7em; border:2px solid #4a6b8a; border-radius:6px; }
.numeric-input button, #nextBtn, #toHome, #toDiag, #revealMore, #fwdMore, #toggleBtn, #btnStart, #btnFinal, #btnGoal, #btnConfirm33, .back{
  padding:10px 14px; font-size:1rem; border-radius:8px; border:2px solid #2e5c3e; background:#e8f3ea; cursor:pointer;
}
#feedback{ min-height:1.4em; font-weight:bold; margin-top:8px; }
#feedback.ok{ color:#1e7a34; }
#feedback.bad{ color:#b0392b; }
.fig-reveal table{ border-collapse:collapse; margin:10px 0; }
.fig-reveal th, .fig-reveal td{ border:1px solid #888; padding:4px 10px; text-align:center; }
.figure{ width:100%; max-width:320px; height:auto; display:block; margin:10px auto; }
.lesson-list, .base-list{ list-style:none; padding:0; display:flex; flex-direction:column; gap:6px; }
.back{ margin-bottom:10px; }

@media (max-width:760px){
  #app{ padding:12px; }
}
@media (max-width:390px){
  .numeric-input input{ width:5em; }
  .figure{ max-width:280px; }
}
@media (max-width:320px){
  .figure{ max-width:260px; }
  body{ overflow-x:hidden; }
}