:root {
  --primary: #1a5fb4;
  --primary-dark: #144a8f;
  --accent: #e66100;
  --correct: #26a269;
  --wrong: #c01c28;
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1f2328;
  --muted: #6b7280;
  --border: #d8dde3;
  --radius: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}

.app-header {
  background: var(--primary);
  color: #fff;
  padding: 20px 16px 14px;
  text-align: center;
}
.app-header h1 { margin: 0; font-size: 1.4rem; }
.app-header h1 a { color: #fff; text-decoration: none; }
.app-header .subtitle { margin: 4px 0 0; font-size: 0.8rem; opacity: 0.85; }

/* 解答中は見出しを細くして、空いた分を本文に回す。
   試験中に商品名と説明を大きく出しておく必要はない。 */
body.in-quiz .app-header { padding: 7px 16px; }
body.in-quiz .app-header h1 { font-size: 0.95rem; }
body.in-quiz .app-header .subtitle { display: none; }

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
}
@media (max-width: 560px) {
  main { padding: 10px 11px; }
}

.app-footer {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 16px;
  font-size: 0.72rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* ---------- home ---------- */
.set-switch {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 8px;
}
.set-switch-label {
  font-size: 0.82rem; color: var(--muted);
  flex: none; white-space: nowrap;   /* 縦書きに潰れるのを防ぐ */
}
/* セットが10個あり、狭い画面には収まらない。潰さずに横スクロールさせる。 */
.set-tabs {
  display: flex;
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--border); border-radius: 99px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.set-tabs::-webkit-scrollbar { display: none; }
.set-tab {
  flex: none; white-space: nowrap;   /* 1文字ずつ折り返させない */
  border: none; background: #fff; color: var(--primary);
  padding: 7px 18px; font: inherit; font-size: 0.85rem; cursor: pointer;
}
.set-tab.active { background: var(--primary); color: #fff; font-weight: 700; }

/* 「無料」の目印。鍵つきのセットが並んでいるときだけ出る */
.tab-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  vertical-align: 1px;
}
.set-tab.active .tab-badge { background: #fff; color: var(--primary); }

/* 何が無料で、鍵は何なのかの説明。最初に目に入る位置に置く */
.set-note {
  margin: 6px 0 10px;
  padding: 8px 10px;
  background: #eef6fb;
  border-left: 3px solid var(--accent);
  border-radius: 0 5px 5px 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--text);
}
.set-note p { margin: 0; }
.set-note b { color: var(--primary-dark); }

/* 購入の復元(アプリ版のみ)。ガイドライン 3.1.1 で必須の導線 */
.restore-link {
  display: inline-block;
  margin: 8px 0 0 10px;
  padding: 9px 14px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.restore-link:disabled, .shop-link:disabled { opacity: 0.6; cursor: default; }

/* 購入への導線(Web版はnoteへのリンク、アプリ版は課金ボタン) */
.shop-link {
  display: inline-block;
  margin-top: 8px;
  border: none;
  font: inherit;
  padding: 9px 18px;
  background: var(--accent);
  color: #fff;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

/* 狭い画面では見出しを上に出し、タブに幅をすべて渡す */
@media (max-width: 560px) {
  .set-switch { flex-direction: column; align-items: stretch; gap: 4px; }
  .set-tab { padding: 8px 14px; }
}

.menu-section h2 {
  font-size: 1.05rem;
  margin: 20px 0 10px;
  border-left: 4px solid var(--primary);
  padding-left: 8px;
}

.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .menu-grid { grid-template-columns: 1fr; } }

.menu-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  font: inherit;
  transition: box-shadow 0.15s, transform 0.15s;
}
.menu-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.1); transform: translateY(-1px); }
.menu-card span { display: block; }
.menu-card .card-title { font-weight: 700; color: var(--primary); }
.menu-card .card-desc { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.menu-card .card-stat { font-size: 0.75rem; color: var(--accent); margin-top: 4px; }

.menu-card.mock { border: 2px solid var(--accent); }
.menu-card.mock .card-title { color: var(--accent); }

/* ---------- quiz ---------- */
.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}
.quit-btn {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 10px; cursor: pointer; color: var(--muted); font-size: 0.8rem;
}

.progress-bar { height: 6px; background: var(--border); border-radius: 3px; margin-bottom: 10px; }
.progress-fill { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.3s; }

.question-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
}
/* 狭い画面では枠の余白まで本文に回す */
@media (max-width: 560px) {
  .question-card { padding: 12px 11px; }
}

.part-label {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  padding: 2px 10px;
  border-radius: 99px;
  margin-bottom: 7px;
}

/* 「Questions 147-149 refer to the following e-mail.」の行。
   本番の問題冊子でも本文と同じ大きさの1行なので、見出し扱いにして大きくしない。 */
.ref-line {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 7px;
}

.doc-type {
  display: inline-block;
  background: #eef2f7;
  color: var(--primary-dark);
  font-size: 0.72rem;
  padding: 2px 10px;
  border-radius: 99px;
  margin: 0 0 6px 6px;
}

/* 本文は Part 6/7 で長くなる。行間と字送りを詰めて、
   1画面に入る量を増やす(本番の問題冊子も行間は詰まっている)。 */
.passage {
  background: #fbfcfd;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 12px;
  margin-bottom: 10px;
  white-space: pre-wrap;
  font-size: 0.86rem;
  line-height: 1.5;
  overflow-x: auto;
}
.passage .blank-mark { font-weight: 700; color: var(--accent); }

.p1-image { margin: 4px 0 14px; text-align: center; }
.p1-image img {
  width: 100%; max-width: 360px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}

.audio-controls { margin: 10px 0 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.play-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 99px;
  padding: 10px 20px; font-size: 0.95rem; cursor: pointer; font-weight: 700;
}
.play-btn:disabled { opacity: 0.5; cursor: default; }
.stop-btn {
  background: none; border: 1px solid var(--border); border-radius: 99px;
  padding: 10px 16px; cursor: pointer; color: var(--muted);
}
.audio-note { font-size: 0.75rem; color: var(--muted); width: 100%; }

/* 設問と選択肢も詰める。Part 3/4/6/7 は1画面に設問が3〜4問並ぶため、
   ここの余白が積み上がって画面外に押し出していた。 */
.q-block + .q-block { margin-top: 4px; }
.q-text { font-weight: 700; margin: 0 0 7px; font-size: 0.94rem; line-height: 1.45; }
.q-number { color: var(--primary); margin-right: 6px; }

.choices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.choice-btn {
  display: flex; align-items: flex-start; gap: 9px; width: 100%;
  text-align: left; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 11px; cursor: pointer; font: inherit;
  font-size: 0.9rem; line-height: 1.45;
  transition: border-color 0.1s, background 0.1s;
}
/* タッチ端末では hover が押したまま残るので、マウスのある環境だけに限定する */
@media (hover: hover) {
  .choice-btn:hover:not(:disabled):not(.selected) { border-color: var(--primary); background: #f4f8fd; }
}
.choice-btn { -webkit-tap-highlight-color: transparent; }
.choice-btn:disabled { cursor: default; }
.choice-letter { font-weight: 700; color: var(--primary); flex-shrink: 0; }
.choice-btn.correct { border-color: var(--correct); background: #eafaf1; }
.choice-btn.wrong { border-color: var(--wrong); background: #fdeef0; }
.choice-btn.correct .choice-letter { color: var(--correct); }
.choice-btn.wrong .choice-letter { color: var(--wrong); }

.feedback { border-radius: 8px; padding: 12px 14px; margin-top: 12px; font-size: 0.9rem; }
.feedback.ok { background: #eafaf1; border: 1px solid var(--correct); }
.feedback.ng { background: #fdeef0; border: 1px solid var(--wrong); }
.feedback .verdict { font-weight: 700; margin-bottom: 6px; }
.feedback.ok .verdict { color: var(--correct); }
.feedback.ng .verdict { color: var(--wrong); }

details.script-box { margin-top: 10px; font-size: 0.88rem; }
details.script-box summary { cursor: pointer; color: var(--primary); font-weight: 700; }
details.script-box .script-body {
  background: #fbfcfd; border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; margin-top: 8px; white-space: pre-wrap;
}

.nav-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.next-btn {
  background: var(--primary); color: #fff; border: none; border-radius: 99px;
  padding: 10px 26px; font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.next-btn:hover { background: var(--primary-dark); }

/* ---------- result ---------- */
.result-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; text-align: center;
}
.result-score { font-size: 2.4rem; font-weight: 700; color: var(--primary); margin: 6px 0; }
.result-rate { color: var(--muted); margin-bottom: 14px; }
.result-msg { font-weight: 700; margin-bottom: 16px; }

.review-list { margin-top: 18px; text-align: left; }
.review-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; font-size: 0.88rem;
}
.review-item .ri-q { font-weight: 700; }
.review-item .ri-a { margin-top: 4px; }
.review-item .ri-a .ok { color: var(--correct); font-weight: 700; }
.review-item .ri-a .ng { color: var(--wrong); font-weight: 700; }
.review-item .ri-exp { color: var(--muted); margin-top: 4px; }

.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.secondary-btn {
  background: #fff; color: var(--primary); border: 1px solid var(--primary);
  border-radius: 99px; padding: 10px 22px; font-weight: 700; cursor: pointer; font: inherit;
}

.history-note { font-size: 0.78rem; color: var(--muted); margin-top: 14px; }

/* ---------- voice settings ---------- */
.voice-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.voice-row {
  display: flex; align-items: center; gap: 10px;
  background: #fbfcfd; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 0.88rem;
}
.voice-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.voice-row .voice-play { padding: 6px 12px; flex-shrink: 0; }
.voice-name { font-weight: 700; }
.voice-meta { color: var(--muted); font-size: 0.78rem; margin-left: auto; text-align: right; }
.voice-star { color: var(--accent); font-weight: 700; }

/* ---------- pick quiz ---------- */
.pick-row { cursor: pointer; }
.pick-row:hover { border-color: var(--primary); background: #f4f8fd; }
.pick-label { font-size: 0.86rem; }

/* ===== 解答は印を付けるだけ(採点は最後) ===== */
/* 選んだ選択肢は、行そのものの色を変えて分かるようにする
   (記号だけを白抜きにすると「文字が反転しただけ」に見えて分かりにくい) */
.choice-btn.selected {
  border: 2px solid var(--primary);
  background: #cfe3fa;
  box-shadow: inset 5px 0 0 var(--primary);
  padding: 9px 11px;              /* 枠が太くなる分を調整して行の高さを保つ */
  font-weight: 600;
  color: #10375e;
}
.choice-btn.selected .choice-letter { color: var(--primary); }

/* ===== 制限時間 ===== */
.timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin-right: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
}
.timer.urgent { background: #c0392b; color: #fff; }

/* ===== 結果画面の解答・解説 ===== */
.only-wrong {
  display: inline-block;
  margin: 4px 0 14px;
  font-size: 14px;
  cursor: pointer;
}
.only-wrong input { margin-right: 6px; }
.ri-head {
  font-weight: 700;
  color: #1a5fb4;
  margin-bottom: 4px;
}
.ri-heading {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}
.ri-q-block {
  border-top: 1px solid #e5e5e5;
  padding-top: 10px;
  margin-top: 12px;
}
.ri-q { font-weight: 600; margin-bottom: 8px; }
.ri-mark {
  margin-left: 8px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.ri-mark.ok { background: #e6f4ea; color: #1e7e34; }
.ri-mark.ng { background: #fdecea; color: #c0392b; }
.ri-choice {
  padding: 5px 10px;
  border-radius: 6px;
  margin-bottom: 3px;
  font-size: 15px;
}
.ri-choice.correct { background: #e6f4ea; }
.ri-choice.wrong { background: #fdecea; }
.ri-you, .ri-ans {
  font-size: 11px;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  vertical-align: middle;
}
.ri-you { background: #c0392b; color: #fff; }
.ri-ans { background: #1e7e34; color: #fff; }
.ri-exp {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

/* 商標表記は常時出すが、目立たせない */
.app-footer .legal {
  font-size: 0.72rem;
  opacity: 0.55;
  margin-top: 4px;
}

/* ===== 合言葉によるセット解放 ===== */
.set-tab.locked { opacity: 0.55; }
.unlock-box {
  margin: 18px 0 6px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: #fafbfc;
}
.unlock-note {
  display: block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: #666;
}

/* ===== 続きから再開 ===== */
.resume-box {
  border: 2px solid var(--primary);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: #f2f7fd;
}
.resume-title { font-weight: 700; color: var(--primary); }
.resume-desc { font-size: 0.88rem; margin: 4px 0 10px; }
.resume-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== 予想スコア ===== */
.score-box {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f6f8fa;
  border: 1px solid var(--border);
  text-align: left;
}
.score-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 8px; }
.sc-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0;
}
.sc-row span { flex: 1; font-size: 0.9rem; }
.sc-row b { font-size: 1.4rem; color: var(--primary); font-variant-numeric: tabular-nums; }
.sc-row small { color: #666; font-size: 0.75rem; min-width: 6.5em; text-align: right; }
.sc-row.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
.sc-row.total b { font-size: 1.7rem; }
.score-note { font-size: 0.72rem; color: #666; margin-top: 8px; line-height: 1.6; }