/* TOEIC Part 5 最強ドリル — 印刷用（A4 たて）。画面では紙のプレビュー＋操作バー */
:root {
  --navy: #0b2a4a; --acc: #ff6a1a; --ink: #111a24; --sub: #56626f; --line: #c9d2dc; --soft: #f1f4f8; --ok: #0a7a4f; --mark: #fff0bf;
  --en: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #d9dee5; color: var(--ink); font: 8.4pt/1.55 "Noto Sans JP", system-ui, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.en { font-family: var(--en); }
.grow { flex: 1; }
sup { font-size: .6em; }

/* ---------- 操作バー（画面だけ） ---------- */
.bar { position: sticky; top: 0; z-index: 5; background: var(--navy); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.bar-in { max-width: 820px; margin: 0 auto; padding: 10px 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 8px 14px; align-items: center; font-size: 13px; line-height: 1.5; }
.bar-back { color: #fff; text-decoration: none; font-weight: 700; opacity: .85; white-space: nowrap; }
.bar-t { display: flex; flex-direction: column; min-width: 0; }
.bar-t b { font-size: 15px; }
.bar-t small { opacity: .75; font-size: 11px; }
.bar-go { border: 0; border-radius: 12px; background: var(--acc); color: #fff; font: 800 15px/1 "Noto Sans JP", sans-serif; padding: 13px 18px; box-shadow: 0 4px 0 #b84a0d; cursor: pointer; white-space: nowrap; }
.bar-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #b84a0d; }
.bar-go:disabled { opacity: .5; cursor: wait; }
.bar-opts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.bar-opts label { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12); border-radius: 999px; padding: 4px 11px 4px 8px; cursor: pointer; font-size: 12.5px; }
.bar-opts input { accent-color: var(--acc); margin: 0; }
.bar-tip { grid-column: 1 / -1; margin: 0; font-size: 11.5px; opacity: .8; }
@media (max-width: 560px) {
  .bar-in { grid-template-columns: 1fr auto; }
  .bar-back { grid-column: 1 / -1; }
}
.loading { text-align: center; padding: 60px 16px; color: var(--sub); font-size: 14px; background: #fff; }

/* ---------- 紙 ---------- */
#doc { width: 210mm; margin: 16px auto 40px; }
.sec { background: #fff; padding: 11mm 11mm 12mm; margin-bottom: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.14); }

/* 見出し */
.ph { display: flex; align-items: flex-end; gap: 10px; border-bottom: 2.2pt solid var(--navy); padding-bottom: 2.2mm; margin-bottom: 2.6mm; }
.ph-brand { display: flex; align-items: center; gap: 2.6mm; flex: 1; min-width: 0; }
.logo { width: 10mm; height: 10mm; flex: none; }
.ph-k { font: 700 7.2pt/1.3 "Noto Sans JP", sans-serif; color: var(--sub); letter-spacing: .02em; }
.ph-t { font-size: 12pt; font-weight: 900; line-height: 1.3; color: var(--navy); white-space: nowrap; }
.ph-t b { color: var(--ink); }
.ph-f { display: grid; grid-template-columns: auto auto; gap: 1.4mm 5mm; font: 600 7.5pt/1 var(--sans); color: var(--sub); }
.ph-f span { display: flex; align-items: flex-end; gap: 1.5mm; white-space: nowrap; }
.ph-f i { display: inline-block; width: 24mm; border-bottom: .6pt solid #333; height: 3.4mm; }
.ph-f i.s { width: 12mm; }
.ph-c { font: 600 7pt/1.35 var(--sans); color: var(--sub); text-align: right; }

.band { display: flex; gap: 4mm; align-items: center; background: var(--navy); color: #fff; padding: 1.3mm 3mm; font: 600 8pt/1.2 var(--sans); letter-spacing: .04em; }
.band b { font-weight: 800; letter-spacing: .12em; }
.band-r { margin-left: auto; font-family: "Noto Sans JP", sans-serif; font-weight: 700; letter-spacing: 0; color: #ffd2b3; }
.dir { font: 8.3pt/1.4 var(--en); margin: 2mm 0 3mm; color: #222; }

/* 問題（2段組・本番の冊子ふう） */
.qs { column-count: 2; column-gap: 8mm; column-rule: .5pt solid #dde3ea; }
.q { break-inside: avoid; padding: 0 0 3.3mm; }
.qt { margin: 0; font: 9.8pt/1.42 var(--en); text-align: left; hyphens: manual; padding-left: 7.2mm; text-indent: -7.2mm; }
.qn { display: inline-block; width: 7.2mm; text-indent: 0; font-weight: 700; font-family: var(--sans); font-size: 9pt; }
.blank { display: inline-block; width: 15mm; border-bottom: .8pt solid #000; margin: 0 .8mm; vertical-align: baseline; }
.ch { list-style: none; margin: 1mm 0 0; padding: 0 0 0 7.2mm; display: grid; gap: .4mm 2mm; font: 9.4pt/1.35 var(--en); }
.ch.c4 { grid-template-columns: repeat(4, auto); justify-content: start; column-gap: 5mm; }
.ch.c2 { grid-template-columns: 1fr 1fr; }
.ch.c1 { grid-template-columns: 1fr; }
.ch.c4 li, .ch.c2 li { white-space: nowrap; }
.ch b { font-family: var(--sans); font-weight: 600; font-size: 8.2pt; margin-right: .6mm; }
.stop { text-align: center; font: 800 8.5pt/1 var(--sans); letter-spacing: .08em; margin: 1mm 0 3mm; color: var(--navy); }

/* クレジット */
.credit { display: flex; gap: 2.6mm; align-items: center; border-top: .6pt solid var(--line); padding-top: 2mm; margin-top: 2mm; font-size: 7.2pt; line-height: 1.45; color: var(--sub); break-inside: avoid; }
.credit .logo { width: 7mm; height: 7mm; }
.credit b { color: var(--ink); }
.credit small { font-size: 6.4pt; }

/* マークシート（問題の後の余白に入れる／問題なしなら単独ページ） */
.sheet-in { break-inside: avoid; border: .8pt solid var(--navy); padding: 2mm 4mm 2mm; margin: 1mm 0 0; }
.sh-h { display: flex; gap: 4mm; align-items: flex-end; border-bottom: 1.5pt solid var(--navy); padding-bottom: 1.5mm; margin-bottom: 2.5mm; font: 600 7.5pt/1 var(--sans); color: var(--sub); }
.sh-h b { font: 800 10pt/1 var(--sans); letter-spacing: .1em; color: var(--navy); }
.sh-h span { display: flex; align-items: flex-end; gap: 1.5mm; }
.sh-h i { display: inline-block; width: 28mm; border-bottom: .6pt solid #333; height: 3.4mm; }
.sh-h i.s { width: 12mm; }
.sh { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: column; grid-template-rows: repeat(10, auto); gap: .8mm 8mm; }
.sh-c { font-size: 6.4pt; color: var(--sub); text-align: right; margin-top: 1.6mm; }
.sh-r { display: flex; align-items: center; gap: 2.4mm; font: 700 8.5pt/1 var(--sans); }
.sh-r b { width: 7mm; }
.sh-r i { width: 4.4mm; height: 4.4mm; border: .7pt solid #444; border-radius: 50%; display: grid; place-items: center; font: 600 6.5pt/1 var(--sans); font-style: normal; color: #666; }

/* 解答・解説 */
.key { display: grid; grid-template-columns: 16mm repeat(15, 1fr); border: .7pt solid var(--navy); margin-bottom: 0; font: 800 9pt/1 var(--sans); }
.key-h { grid-row: span 2; display: grid; place-items: center; background: var(--navy); color: #fff; font: 900 7.5pt/1.25 "Noto Sans JP", sans-serif; text-align: center; padding: 0 1.5mm; }
.key span { display: flex; flex-direction: column; align-items: center; gap: .6mm; padding: 1.1mm 0; border-left: .5pt solid var(--line); }
.key span:nth-child(n+17) { border-top: .5pt solid var(--line); }
.key small { font-size: 6pt; font-weight: 600; color: var(--sub); }
.sec-a .credit { border-top: 0; margin: 0 0 2.4mm; padding-top: 1.6mm; }
.exs { font-size: 8.15pt; line-height: 1.5; column-count: 2; column-gap: 6mm; column-rule: .5pt solid #dde3ea; }
.ex { padding: 0 0 2mm; margin: 0 0 2mm; border-bottom: .5pt dashed var(--line); orphans: 2; widows: 2; }
.ex p { margin: 0; }
.ex-h { display: flex; align-items: center; gap: 2mm; break-after: avoid; }
.ex-h .no { background: var(--navy); color: #fff; font: 800 8pt/1 var(--sans); padding: .9mm 1.6mm; border-radius: 1mm; }
.ex-h .an { font: 700 8.6pt/1.2 var(--sans); color: var(--ok); }
.ex-h .an .en { font-size: 9.6pt; }
.ex-h .cat { margin-left: auto; font-size: 6.8pt; color: var(--sub); border: .5pt solid var(--line); border-radius: 1mm; padding: .2mm 1.2mm; white-space: nowrap; }
.kz { margin: 1.2mm 0 .8mm !important; font-weight: 700; font-size: 8.2pt; line-height: 1.45; color: var(--navy); background: #eef3f9; border-left: 1.6mm solid var(--acc); padding: .7mm 2mm; break-after: avoid; }
.fq { font-size: 8.8pt; line-height: 1.38; color: #222; }
.fq .fill { background: var(--mark); padding: 0 .6mm; }
.tr { color: #333; }
.tr::before { content: "訳"; display: inline-block; font-size: 6.6pt; font-weight: 700; color: #fff; background: #8a96a3; border-radius: .8mm; padding: 0 1mm; margin-right: 1.4mm; line-height: 1.5; vertical-align: .3mm; }
.e { margin-top: .8mm !important; }
.why { list-style: none; margin: .8mm 0 0; padding: 0; font-size: 7.6pt; line-height: 1.38; color: #333; }
.why li { padding-left: 2mm; text-indent: -2mm; }
.why li b { color: var(--ink); margin-right: 1.2mm; }
.why li.ok b { color: var(--ok); }
.vo { margin-top: 1mm !important; font-size: 7.4pt; color: #333; }
.vo i { font-style: normal; font-size: 6.6pt; font-weight: 700; color: #fff; background: #8a96a3; border-radius: .8mm; padding: 0 1mm; margin-right: 1.4mm; }

/* ---------- 印刷 ---------- */
@page {
  size: A4 portrait;
  margin: 10mm 11mm 11mm;
  @bottom-left { content: "© 原田英語 ｜ TOEIC® Part 5 最強ドリル ｜ haradaeigo.com/toeic-dai5mon"; font: 6.5pt "Noto Sans JP", sans-serif; color: #7a8591; }
  @bottom-right { content: counter(page) " / " counter(pages); font: 6.5pt "Inter", sans-serif; color: #7a8591; }
}
@media print {
  body { background: #fff; }
  .bar { display: none; }
  #doc { width: auto; margin: 0; zoom: 1 !important; }
  .sec { padding: 0; margin: 0; box-shadow: none; }
  .sec + .sec { break-before: page; }
}