/* ==========================================================================
   資格・検定試験クイズ 共通テンプレート スタイル
   全ての /exams/<examId>/ ページから共通で読み込まれます。
   ここを1箇所編集するだけで、全資格ページのデザインが一括更新されます。
   ========================================================================== */
:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --text:#1a1f2b;
  --muted:#6b7280;
  --accent:#2563eb;
  --accent-dark:#1d4ed8;
  --correct:#16a34a;
  --correct-bg:#ecfdf3;
  --wrong:#dc2626;
  --wrong-bg:#fef2f2;
  --border:#e5e7eb;
  --ad-bg:#eef1f5;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
[data-theme="dark"]{
  --bg:#12141a;
  --card:#1c1f27;
  --text:#e8eaf0;
  --muted:#9aa1b2;
  --accent:#5b8def;
  --accent-dark:#7fa4f2;
  --correct:#34d399;
  --correct-bg:#0e2b22;
  --wrong:#f87171;
  --wrong-bg:#341313;
  --border:#2b2f3a;
  --ad-bg:#1a1d24;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12141a; --card:#1c1f27; --text:#e8eaf0; --muted:#9aa1b2;
    --accent:#5b8def; --accent-dark:#7fa4f2; --correct:#34d399; --correct-bg:#0e2b22;
    --wrong:#f87171; --wrong-bg:#341313; --border:#2b2f3a; --ad-bg:#1a1d24;
  }
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text);}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.7;
  padding-bottom:calc(64px + var(--safe-bottom)); /* 固定アンカー広告の分だけ余白 */
}
a{color:var(--accent);}
.app-shell{max-width:640px; margin:0 auto; padding:0 14px 24px;}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:var(--card); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
}
.site-header .logo{font-weight:700; font-size:0.95rem; display:flex; align-items:center; gap:6px; text-decoration:none; color:var(--text);}
.site-header .logo .emoji{font-size:1.1rem;}
.header-actions{display:flex; align-items:center; gap:10px;}
.header-actions a.all-list{font-size:0.78rem; color:var(--accent); text-decoration:none; font-weight:600; white-space:nowrap;}
.theme-toggle{
  border:1px solid var(--border); background:var(--card); color:var(--text);
  border-radius:999px; width:32px; height:32px; font-size:0.95rem; cursor:pointer;
}

.exam-title{text-align:center; margin:18px 0 6px;}
.exam-title h1{font-size:1.15rem; margin:0 0 4px;}
.exam-title p{color:var(--muted); font-size:0.8rem; margin:0;}

/* ---------- カード共通 ---------- */
.card{
  background:var(--card); border-radius:16px; padding:18px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06); margin-bottom:14px; border:1px solid var(--border);
}
h2.section-title{font-size:1rem; margin:0 0 10px;}

/* ---------- 設定画面 ---------- */
.option-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.pill-choice{
  flex:1; min-width:80px; text-align:center; padding:10px 8px; border-radius:12px;
  border:1.5px solid var(--border); background:var(--bg); font-size:0.9rem; cursor:pointer;
}
.pill-choice.active{border-color:var(--accent); background:rgba(37,99,235,0.08); color:var(--accent-dark); font-weight:700;}
.stat-mini{display:flex; justify-content:space-around; text-align:center; margin-bottom:10px;}
.stat-mini div span{display:block;}
.stat-mini .num{font-size:1.3rem; font-weight:700; color:var(--accent);}
.stat-mini .label{font-size:0.72rem; color:var(--muted);}

/* ---------- 大きい親指タップボタン ---------- */
.btn{
  display:block; width:100%; border:none; border-radius:14px; font-weight:700;
  font-size:1rem; padding:16px 14px; cursor:pointer; text-align:center;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary{background:var(--accent); color:#fff;}
.btn-secondary{background:rgba(37,99,235,0.1); color:var(--accent-dark);}
.btn-ghost{background:transparent; color:var(--muted); border:1.5px solid var(--border);}
.btn-share{background:#000; color:#fff;}
.btn-row{display:flex; flex-direction:column; gap:10px;}

/* ---------- クイズ画面 ---------- */
.progress-track{height:8px; background:var(--border); border-radius:6px; overflow:hidden; margin:4px 0 14px;}
.progress-fill{height:100%; background:var(--accent); transition:width .25s ease;}
.q-meta{display:flex; justify-content:space-between; font-size:0.78rem; color:var(--muted); margin-bottom:6px;}
.q-text{font-size:1.05rem; font-weight:700; margin-bottom:16px; white-space:pre-wrap;}
.choice-list{display:flex; flex-direction:column; gap:10px; margin-bottom:12px;}
.choice{
  text-align:left; background:var(--bg); color:var(--text); border:1.6px solid var(--border);
  border-radius:14px; padding:14px 16px; font-size:0.96rem; width:100%;
}
.choice:active{transform:scale(0.99);}
.choice.correct{background:var(--correct-bg); border-color:var(--correct); color:var(--correct); font-weight:700;}
.choice.wrong{background:var(--wrong-bg); border-color:var(--wrong); color:var(--wrong); font-weight:700;}
.choice.disabled{pointer-events:none; opacity:0.92;}
.explain-box{
  background:rgba(37,99,235,0.08); border:1px solid rgba(37,99,235,0.25); border-radius:12px;
  padding:12px 14px; font-size:0.88rem; margin-top:4px; display:none;
}
.explain-box.show{display:block;}
.explain-box .verdict{font-weight:700; display:block; margin-bottom:4px;}
.explain-box .verdict.ok{color:var(--correct);}
.explain-box .verdict.ng{color:var(--wrong);}

/* ---------- 結果画面 ---------- */
.score-circle{
  width:140px; height:140px; margin:6px auto 4px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:conic-gradient(var(--accent) calc(var(--pct,0)*1%), var(--border) 0);
}
.score-circle .inner{
  width:112px; height:112px; border-radius:50%; background:var(--card);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.score-circle .inner .big{font-size:1.5rem; font-weight:800;}
.score-circle .inner .small{font-size:0.72rem; color:var(--muted);}

.related-list{display:flex; flex-direction:column; gap:10px; margin-top:8px;}
.related-card{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--border); border-radius:12px; padding:12px 14px; text-decoration:none; color:var(--text); background:var(--bg);
}
.related-card .name{font-weight:600; font-size:0.9rem;}
.related-card .cat{font-size:0.72rem; color:var(--muted);}
.related-card .arrow{color:var(--accent); font-weight:700;}

.review-item{border-top:1px solid var(--border); padding:12px 0; font-size:0.9rem;}
.tag{display:inline-block; font-size:0.7rem; font-weight:700; padding:2px 8px; border-radius:999px; margin-right:4px;}
.tag.ng{background:var(--wrong-bg); color:var(--wrong);}
.tag.ok{background:var(--correct-bg); color:var(--correct);}

/* ---------- フッター ---------- */
.site-footer{margin-top:22px; font-size:0.78rem; color:var(--muted);}
.footer-cats{display:flex; flex-direction:column; gap:10px; margin-bottom:14px;}
.footer-cats .cat-group b{display:block; font-size:0.82rem; color:var(--text); margin-bottom:4px;}
.footer-cats .cat-group .links{display:flex; flex-wrap:wrap; gap:8px;}
.footer-cats .cat-group .links a{font-size:0.76rem; text-decoration:none;}
.footer-note{text-align:center; padding-top:10px; border-top:1px solid var(--border);}

/* ---------- 広告枠 ---------- */
.ad-slot{
  background:var(--ad-bg); border:1px dashed var(--border); border-radius:10px;
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  font-size:0.72rem; margin:14px 0; min-height:60px; text-align:center; padding:6px;
}
.ad-slot.ad-anchor{
  position:fixed; left:0; right:0; bottom:0; z-index:30; min-height:50px;
  border-radius:0; border:none; border-top:1px solid var(--border);
  padding-bottom:var(--safe-bottom); background:var(--ad-bg);
}
.ad-slot.ad-inline{min-height:90px;}

.hidden{display:none !important;}

@media (min-width:480px){
  .app-shell{padding:0 20px 28px;}
}