:root{
  --blue-900:#0f2a4a;
  --blue-800:#123763;
  --blue-700:#1a4a82;
  --blue-600:#2563a8;
  --blue-500:#3b82c4;
  --accent:#e8a33d;
  --bg:#f4f6f9;
  --card:#ffffff;
  --text:#1c2733;
  --text-sub:#5b6b7c;
  --green:#1f9d55;
  --green-bg:#e7f7ee;
  --red:#d0342c;
  --red-bg:#fdeceb;
  --border:#e1e6ec;
  --shadow: 0 2px 10px rgba(15,42,74,0.08);
  --radius:14px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-text-size-adjust:100%;
}

.app{
  max-width:720px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

header.topbar{
  background:linear-gradient(135deg,var(--blue-900),var(--blue-700));
  color:#fff;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  position:sticky;
  top:0;
  z-index:20;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
header.topbar .title-wrap{flex:1;min-width:0;}
header.topbar h1{
  font-size:16px;
  margin:0;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
header.topbar .sub{font-size:11px;opacity:.8;margin-top:2px;}
.icon-btn{
  background:rgba(255,255,255,0.14);
  border:none;
  color:#fff;
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
}
.icon-btn:active{background:rgba(255,255,255,0.28);}

main{
  flex:1;
  padding:18px 16px 40px;
}

.screen{display:none;}
.screen.active{display:block;animation:fadein .18s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ---------- HOME ---------- */
.hero{
  text-align:center;
  padding:18px 8px 8px;
}
.hero h2{
  font-size:20px;
  margin:0 0 6px;
  color:var(--blue-900);
}
.hero p{
  font-size:13px;
  color:var(--text-sub);
  margin:0;
  line-height:1.6;
}

.mode-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:20px;
}
.mode-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 18px;
  box-shadow:var(--shadow);
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:center;
  gap:16px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.mode-card:active{transform:scale(0.98);}
.mode-card .badge{
  flex:0 0 auto;
  width:52px;height:52px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  color:#fff;
}
.mode-card.m1 .badge{background:linear-gradient(135deg,#2563a8,#3b82c4);}
.mode-card.m2 .badge{background:linear-gradient(135deg,#1f9d55,#4cbb7a);}
.mode-card.m3 .badge{background:linear-gradient(135deg,#c4602a,#e8a33d);}
.mode-card.m4 .badge{background:linear-gradient(135deg,#7c3aed,#a78bfa);}
.mode-card .body{flex:1;min-width:0;}
.mode-card h3{margin:0 0 4px;font-size:16px;color:var(--text);}
.mode-card p{margin:0;font-size:12.5px;color:var(--text-sub);line-height:1.5;}
.mode-card .arrow{color:var(--border);font-size:20px;}

.filter-box{
  margin-top:22px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
}
.filter-box label{
  display:block;
  font-size:12px;
  color:var(--text-sub);
  margin-bottom:8px;
  font-weight:600;
}
.filter-hint{
  font-size:11.5px;
  color:var(--text-sub);
  margin:10px 0 0;
  line-height:1.5;
}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-sub);
  padding:7px 12px;
  border-radius:999px;
  font-size:12.5px;
  cursor:pointer;
  user-select:none;
}
.chip.active{
  background:var(--blue-700);
  border-color:var(--blue-700);
  color:#fff;
  font-weight:600;
}

.stats-strip{
  margin-top:18px;
  display:flex;
  gap:10px;
}
.stat-pill{
  flex:1;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 8px;
  text-align:center;
}
.stat-pill .num{font-size:18px;font-weight:700;color:var(--blue-800);}
.stat-pill .lbl{font-size:11px;color:var(--text-sub);margin-top:2px;}

/* ---------- QUIZ ---------- */
.quiz-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  gap:10px;
}
.progress-wrap{flex:1;}
.progress-text{font-size:12.5px;color:var(--text-sub);margin-bottom:6px;display:flex;justify-content:space-between;}
.progress-bar{height:6px;background:var(--border);border-radius:4px;overflow:hidden;}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--blue-600),var(--accent));border-radius:4px;transition:width .2s ease;}
.cat-tag{
  display:inline-block;
  font-size:11px;
  background:var(--blue-800);
  color:#fff;
  padding:3px 9px;
  border-radius:999px;
  margin-bottom:10px;
}

.q-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 16px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
}
.q-meta{font-size:11.5px;color:var(--text-sub);margin-bottom:8px;}
.q-text{
  font-size:15px;
  line-height:1.75;
  white-space:pre-line;
  color:var(--text);
  margin:0;
}

.choices{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}
.choice-btn{
  display:flex;
  align-items:flex-start;
  gap:10px;
  text-align:left;
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  line-height:1.6;
  color:var(--text);
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.choice-btn .num{
  flex:0 0 auto;
  width:24px;height:24px;
  border-radius:50%;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;color:var(--text-sub);
  margin-top:1px;
}
.choice-btn:active{background:#f0f4f8;}
.choice-btn.selected{border-color:var(--blue-600);background:#eef5fb;}
.choice-btn.selected .num{background:var(--blue-600);border-color:var(--blue-600);color:#fff;}

.choice-btn.correct{border-color:var(--green);background:var(--green-bg);}
.choice-btn.correct .num{background:var(--green);border-color:var(--green);color:#fff;}
.choice-btn.wrong{border-color:var(--red);background:var(--red-bg);}
.choice-btn.wrong .num{background:var(--red);border-color:var(--red);color:#fff;}
.choice-btn.disabled{cursor:default;}

.feedback-box{
  margin-top:14px;
  border-radius:12px;
  padding:14px 15px;
  font-size:13.5px;
  line-height:1.7;
  display:none;
}
.feedback-box.show{display:block;animation:fadein .15s ease;}
.feedback-box.correct{background:var(--green-bg);border:1px solid #bfe6cd;}
.feedback-box.wrong{background:var(--red-bg);border:1px solid #f3c8c4;}
.feedback-title{font-weight:700;margin-bottom:6px;font-size:14px;}
.feedback-box.correct .feedback-title{color:var(--green);}
.feedback-box.wrong .feedback-title{color:var(--red);}
.feedback-exp{color:var(--text);}

.nav-row{
  display:flex;
  gap:10px;
  margin-top:6px;
}
.btn{
  flex:1;
  border:none;
  border-radius:12px;
  padding:13px 14px;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
}
.btn-primary{background:var(--blue-700);color:#fff;}
.btn-primary:active{background:var(--blue-800);}
.btn-secondary{background:#fff;color:var(--blue-700);border:1.5px solid var(--blue-700);}
.btn-secondary:active{background:#eef5fb;}
.btn-accent{background:linear-gradient(135deg,#c4602a,var(--accent));color:#fff;}
.btn-ghost{background:none;color:var(--text-sub);border:1.5px solid var(--border);}
.btn:disabled{opacity:.45;cursor:default;}

.jump-grid{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:14px 0;
}
.jump-dot{
  width:30px;height:30px;
  border-radius:8px;
  border:1.5px solid var(--border);
  background:#fff;
  font-size:11.5px;
  color:var(--text-sub);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.jump-dot.answered{background:var(--blue-600);border-color:var(--blue-600);color:#fff;}
.jump-dot.current{outline:2px solid var(--accent);outline-offset:1px;}

/* ---------- RESULT ---------- */
.result-hero{
  text-align:center;
  background:linear-gradient(135deg,var(--blue-900),var(--blue-700));
  color:#fff;
  border-radius:var(--radius);
  padding:26px 16px;
  margin-bottom:16px;
}
.result-hero .score{
  font-size:42px;
  font-weight:800;
  line-height:1;
}
.result-hero .score small{font-size:20px;font-weight:600;opacity:.85;}
.result-hero .rate{font-size:14px;margin-top:8px;opacity:.9;}
.result-hero .msg{
  margin-top:12px;
  font-size:13px;
  background:rgba(255,255,255,0.15);
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
}

.result-actions{display:flex;gap:10px;margin-bottom:18px;}

.review-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 15px;
  margin-bottom:12px;
}
.review-item.wrong{border-left:4px solid var(--red);}
.review-item.correct{border-left:4px solid var(--green);}
.review-head{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  color:var(--text-sub);
  margin-bottom:8px;
}
.review-head .result-tag{
  font-weight:700;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
}
.review-item.correct .result-tag{background:var(--green-bg);color:var(--green);}
.review-item.wrong .result-tag{background:var(--red-bg);color:var(--red);}
.review-q{font-size:14px;line-height:1.65;white-space:pre-line;margin:0 0 10px;}
.review-choice{
  font-size:13px;
  padding:8px 10px;
  border-radius:8px;
  margin-bottom:6px;
  line-height:1.55;
}
.review-choice.user-wrong{background:var(--red-bg);color:var(--red);}
.review-choice.correct-ans{background:var(--green-bg);color:var(--green);}
.review-exp{
  font-size:12.5px;
  color:var(--text-sub);
  background:#f6f8fa;
  border-radius:8px;
  padding:10px 11px;
  margin-top:8px;
  line-height:1.7;
}

.filter-toggle-row{display:flex;gap:8px;margin-bottom:14px;}
.filter-toggle-row .chip{flex:1;text-align:center;}

.ad-slot{
  display:block;
  width:auto;
  margin:18px 16px 0;
  min-height:0;
  overflow:hidden;
}

footer.appfoot{
  text-align:center;
  font-size:11px;
  color:var(--text-sub);
  padding:14px;
}
footer.appfoot .foot-links{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 10px;
}
footer.appfoot .foot-links a{color:inherit;text-decoration:underline;}

.static-page{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px 18px;
  line-height:1.8;
  font-size:14px;
}
.static-page h1{font-size:19px;margin:0 0 4px;color:var(--blue-900);}
.static-page .static-updated{font-size:12px;color:var(--text-sub);margin:0 0 18px;}
.static-page h2{font-size:15px;margin:22px 0 8px;color:var(--blue-800);border-left:4px solid var(--blue-500);padding-left:8px;}
.static-page h2:first-of-type{margin-top:0;}
.static-page p{margin:0 0 10px;}
.static-page ul{margin:0 0 10px;padding-left:1.3em;}
.static-page li{margin-bottom:4px;}
.static-page table{width:100%;border-collapse:collapse;margin:0 0 10px;font-size:13.5px;}
.static-page table th,.static-page table td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--border);vertical-align:top;}
.static-page table th{width:8.5em;color:var(--text-sub);font-weight:600;white-space:nowrap;}
.static-page a{color:var(--blue-600);}
.static-page .sitemap-list{list-style:none;padding-left:0;}
.static-page .sitemap-list a{display:inline-block;padding:2px 0;}
.static-page .sitemap-sub{padding-left:1.2em;margin-top:2px;}
.static-page .contact-mail{display:inline-block;margin-top:6px;font-weight:700;font-size:15px;}
.static-page .note-box{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--text-sub);margin:14px 0;}

@media (min-width:600px){
  .q-text{font-size:16px;}
  header.topbar h1{font-size:18px;}
}