:root{
  --bg:#0b1020;
  --panel:#ffffff;
  --ink:#0f172a;
  --muted:#6b7280;
  --primary:#2563eb;
  --primary-ink:#fff;
  --ring:#93c5fd;
  --ok:#16a34a;
  --ng:#dc2626;
  --choice:#f8fafc;
  --choice-selected:#eff6ff; /* selected highlight */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--ink);
  background:#f1f5f9;
}

.practice-header{
  background:linear-gradient(135deg,#0f1840,#1f2d5c);
  color:#f4f7ff;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.25);
  margin-bottom:18px;
}
.practice-header__inner{
  width:min(1100px,92%);
  margin-inline:auto;
  padding:18px 4px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.practice-header__brand{display:flex;flex-direction:column;gap:6px;min-width:220px}
.practice-header__badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
}
.practice-header__title{font-size:clamp(22px,3.2vw,30px);font-weight:800;letter-spacing:.04em}
.practice-header__nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.practice-header__link{
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  border-radius:999px;
  text-decoration:none;
  color:inherit;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  font-weight:600;
  transition:.18s ease background,.18s ease color,.18s ease border-color;
}
.practice-header__link:hover{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.3)}
.practice-header__link.is-active{
  background:#fff;
  color:#102347;
  border-color:#fff;
  box-shadow:0 6px 16px rgba(15,23,42,.22);
}

@media (max-width:760px){
  .practice-header__inner{flex-direction:column;align-items:flex-start}
  .practice-header__nav{justify-content:flex-start}
}

.practice-shortcuts{display:flex;gap:10px;margin:12px 0 6px;flex-wrap:wrap}

/* ヘッダーは共通の /assets/site.css を利用するため、このページ固有のヘッダー関連スタイルは削除 */

.pill{ 
  border:0; border-radius:999px; padding:8px 12px; font-weight:700; cursor:pointer;
  font-size:13px; letter-spacing:.02em;
}
.pill--primary{ background:#fefce8; color:#854d0e; }
.pill--secondary{ background:#ecfeff; color:#164e63; }
.pill:focus{ outline:3px solid #fde68a }

.container{ max-width:960px; margin:24px auto; padding:0 14px }
.intro{ color:var(--muted); margin-bottom:10px}

.card{
  background:var(--panel);
  border-radius:12px; padding:16px;
  border:1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(15,23,42,.04);
}

.controls{ margin-bottom:18px }
.control-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px }
.control-group{ display:flex; align-items:center; gap:10px }
.label{ font-weight:700; color:#475569}
.check input{ margin-right:6px }
.btn{
  border:1px solid #d1d5db; background:#fff; color:#111827;
  padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:700;
}
.btn:hover{ background:#f3f4f6 }
.btn:focus{ outline:3px solid var(--ring) }
.btn[disabled]{ opacity:.5; cursor:not-allowed }
.btn--ghost{ background:#fff }
.btn--primary{ background:var(--primary); color:var(--primary-ink); border-color:transparent }
/* プライマリボタンのホバーは常に濃い青のまま（灰色に落ちないように除外） */
.btn.btn--primary:hover{ background: #1d4ed8; filter:none; color:#fff }
.btn.btn--primary:focus{ outline:3px solid var(--ring) }
/* 汎用ボタンのホバーは従来どおり */
.btn:not(.btn--primary):hover{ background:#f3f4f6 }

.switch{ display:inline-flex; align-items:center; gap:10px }
.switch input{ display:none }
.switch .slider{
  width:44px; height:24px; background:#e5e7eb; border-radius:999px; position:relative; display:inline-block
}
.switch .slider::after{
  content:""; width:18px; height:18px; position:absolute; top:3px; left:3px; border-radius:999px;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:.2s ease
}
.switch input:checked + .slider{ background:#bbf7d0 }
.switch input:checked + .slider::after{ transform:translateX(20px) }
.switch-label{ color:#111827; font-weight:600}

.nav-jump input{
  width:90px; padding:8px 10px; border:1px solid #d1d5db; border-radius:8px; font-weight:700;
}
.nav-jump input:focus{ outline:3px solid var(--ring) }

.paginator{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:8px
}
.page-chip{
  min-width:40px; text-align:center; padding:8px 10px; border:1px solid #d1d5db; border-radius:10px; cursor:pointer; background:#fff;
  font-weight:700;
}
.page-chip.active{ background:#111827; color:#fff; border-color:#111827 }
.page-chip:hover{ background:#f3f4f6 }
.page-gap{ padding:8px 6px; color:var(--muted) }

.quiz .q-meta{ display:flex; gap:10px; align-items:center}
.q-index{
  background:#e5e7eb; padding:6px 10px; border-radius:999px; font-weight:800; color:#111827
}
.tag{ border:1px solid #e5e7eb; padding:6px 10px; border-radius:999px; color:#111827; font-weight:700; background:#f8fafc}

.q-text{
  margin:16px 0 10px; font-size:20px; line-height:1.8; font-weight:700; color:#0f172a
}

.choices{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px
}
.choice{
  border:2px solid #e5e7eb; background:var(--choice); padding:14px 14px; border-radius:14px; display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .04s ease;
}
.choice:active{ transform:scale(.997) }
.choice.selected{
  background:var(--choice-selected);
  border-color:var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.choice .num{
  font-weight:900; width:2.5em; text-align:right; color:#334155
}
.choice .label{ flex:1; font-weight:700; font-size:18px; color:#0f172a }
.choice input{ display:none }

.choice.correct{ border-color:var(--ok); background:#ecfdf5 }
.choice.incorrect{ border-color:var(--ng); background:#fef2f2 }

.actions{
  margin-top:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap
}
.nav-left, .nav-right{ display:flex; gap:8px }
.nav-center{ display:flex; gap:8px }

.explain{ margin-top:6px; border-top:1px dashed #e5e7eb; padding-top:8px }
.explain summary{ font-weight:800; cursor:pointer }
.explain-body{ margin-top:10px; color:#111827; line-height:1.8 }
.explain .badge{ padding:2px 6px; border-radius:6px; font-weight:700 }

.history-list{ display:grid; grid-template-columns: 1fr; gap:10px; max-height:55vh; overflow:auto }
.history-item{
  padding:10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; display:flex; justify-content:space-between; align-items:center;
}
.history-item .info{ display:flex; flex-direction:column; gap:2px }
.history-item .meta{ color:var(--muted); font-size:12px }
.history-item .result.ok{ color:var(--ok); font-weight:800 }
.history-item .result.ng{ color:var(--ng); font-weight:800 }

.dialog{ border:none; border-radius:12px; padding:0; width:min(680px, 92vw) }
.dialog form{ padding:16px }
.dialog h3{ margin:0 0 8px }
.dialog .muted{ color:var(--muted) }
.dialog .dialog-actions{ margin-top:10px; display:flex; justify-content:flex-end }

kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background:#111827; color:#fff; padding:2px 6px; border-radius:6px; font-size:12px
}

@media (max-width:600px){
  .choice .num{ width:2em }
  .choice .label{ font-size:16px }
}