/* ==========================================================================
   資格・検定試験クイズ 共通テンプレート スタイル
   全ての /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;}

/* ---------- トップページ：検索・カテゴリ絞り込み ---------- */
.search-box{position:relative; margin-bottom:12px;}
.search-box input{
  width:100%; box-sizing:border-box; padding:12px 14px 12px 38px; border-radius:12px;
  border:1.5px solid var(--border); background:var(--bg); color:var(--text); font-size:0.95rem;
}
.search-box input:focus{outline:none; border-color:var(--accent);}
.search-box .icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none;}
.filter-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px;}
.filter-chip{
  padding:7px 13px; border-radius:999px; border:1.5px solid var(--border); background:var(--bg);
  color:var(--text); font-size:0.78rem; cursor:pointer; white-space:nowrap;
}
.filter-chip.active{border-color:var(--accent); background:var(--accent); color:#fff; font-weight:700;}
.exam-group{margin-top:18px;}
.exam-group:first-of-type{margin-top:6px;}
.exam-group-title{
  font-size:0.82rem; font-weight:700; color:var(--muted); margin:0 0 8px; padding-left:2px;
  display:flex; align-items:center; gap:6px;
}
.exam-group-title .count{font-weight:400; color:var(--muted); font-size:0.74rem;}
.no-results{text-align:center; color:var(--muted); padding:24px 0; font-size:0.88rem;}
.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{color:#fff;}
.btn-share-x{background:#000;}
.btn-share-line{background:#06C755;}
.btn-row{display:flex; flex-direction:column; gap:10px;}
.share-row{display:flex; gap:10px;}
.share-row a{flex:1; text-decoration:none;}
.share-row .btn{margin:0;}

/* ---------- クイズ画面 ---------- */
.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;}
.ad-slot-placeholder{color:var(--muted); line-height:1.5;}

/* ---------- アフィリエイト誘導カード ---------- */
.promo-wrap{display:flex; flex-direction:column; gap:12px;}
.promo-card{
  position:relative; background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:16px 14px 14px; text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.promo-tag{
  position:absolute; top:8px; left:8px; background:var(--muted); color:#fff;
  font-size:0.62rem; font-weight:700; padding:2px 7px; border-radius:5px; letter-spacing:0.03em;
}
.promo-headline{
  font-size:0.86rem; line-height:1.6; margin:10px 0 14px; padding-top:6px; color:var(--text);
}
.btn-promo{width:100%; font-weight:700;}
.btn-promo-amazon{background:#FF9900; color:#111;}
.btn-promo-amazon:active{background:#e88a00;}
.btn-promo-course{background:var(--accent); color:#fff;}
.btn-promo-course:active{background:var(--accent-dark);}

.promo-card-banner{padding:16px 14px 14px;}
.promo-banner-img{display:block; max-width:100%; height:auto; margin:6px auto 0; border-radius:8px;}

/* 書籍カード（画像 or アイコン + タイトル + 一言 + ボタン） */
.promo-book-list{display:flex; flex-direction:column; gap:14px;}
.promo-book{
  display:flex; align-items:flex-start; gap:12px; text-align:left;
  padding-top:12px; border-top:1px dashed var(--border);
}
.promo-book:first-child{padding-top:0; border-top:none;}
.promo-book-media{
  flex:0 0 56px; width:56px; height:76px; border-radius:8px; overflow:hidden;
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
.promo-book-cover{width:100%; height:100%; object-fit:cover; display:block;}
.promo-book-icon{font-size:1.9rem; line-height:1;}
.promo-book-info{flex:1; min-width:0;}
.promo-book-title{font-size:0.8rem; line-height:1.5; margin:0 0 4px; color:var(--text); font-weight:600;}
.promo-book-note{font-size:0.72rem; line-height:1.5; margin:0 0 8px; color:var(--muted);}
.btn-promo-sm{padding:9px 8px; font-size:0.85rem;}
.promo-disclosure{font-size:0.68rem; line-height:1.6; color:var(--muted); text-align:center; margin:2px 4px 0;}
.promo-disclosure a{color:var(--muted); text-decoration:underline;}

.hidden{display:none !important;}

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