/* 苦手克服プリント（/print/）。画面はA4のプレビュー、印刷はそのままA4に載る。
   site.css の変数を使うが、印刷を主目的にするので色は最小限にする。 */

.ps-body { background: #eef2f6; margin: 0; padding: 0 0 40px;
  /* site.css が body を flex にしている。フレックスコンテナの中では
     改ページ指定（break-after）が無視され、紙面が用紙をまたいで
     途中で切れる。このページでは通常のブロックに戻す */
  display: block;
  /* iOS/WebKit は画面幅より広い紙（210mm）を縮小表示すると文字だけ勝手に
     拡大する（13px→19px）。番号枠から数字が溢れ、1ページに載る量も
     印刷結果とずれるので、自動拡大を切って指定どおりの大きさで出す */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 画面だけの操作バー */
.ps-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: #fff; border-bottom: 1px solid #dde5ec;
}
.ps-home { font-size: 14px; color: #475569; text-decoration: none; }
.ps-free {
  font-size: 12px; font-weight: 700; color: #b45309;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 999px; padding: 3px 10px;
}
.ps-btn {
  margin-left: auto; border: 0; border-radius: 10px; cursor: pointer;
  background: #0284c7; color: #fff; font-size: 15px; font-weight: 700; padding: 10px 18px;
}
.ps-note { max-width: 640px; margin: 40px auto; padding: 0 20px; color: #334155; line-height: 1.7; }

/* A4（210x297mm）の紙に載せる箱。画面でも印刷でも同じ寸法にして、
   画面で見たままが刷られるようにする。
   高さは用紙より2mm低い295mm。297mmきっかりだと端末側の丸めで1pxあふれ、
   その1pxが次の用紙に送られて白紙が1枚ずつ挟まる（iOSで発生）。
   画面も同じ295mmで組むので、印刷で下が切れることはない */
.ps-page {
  /* 中身の幅は 170mm（210 - 20 - 20）。端末が余白を広げても印刷側で
     この幅を保てるようにするため、余裕を見た値にしてある。
     幅が変わると行の折り返しが変わり、縦に伸びてページからあふれる */
  width: 210mm; height: 295mm; box-sizing: border-box;
  margin: 20px auto; padding: 16mm 20mm 12mm;
  background: #fff; color: #111827;
  box-shadow: 0 2px 12px rgba(15, 39, 64, .12);
  display: flex; flex-direction: column; overflow: hidden;
}
.ps-fit { }   /* 画面が狭いときだけ、縮小した紙を入れる枠になる */

.ps-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  border-bottom: 3px solid #0284c7; padding-bottom: 8px;
}
.ps-head h1 { font-size: 22px; font-weight: 800; color: #0c2740; margin: 0; }
.ps-sub { font-size: 12px; color: #475569; margin: 4px 0 0; }
.ps-headright { text-align: right; font-size: 11px; color: #475569; }
.ps-headright p { margin: 0; }
.ps-guide {
  font-size: 11.5px; color: #334155; line-height: 1.5;
  background: none; border: 0; border-left: 3px solid #7dd3fc;
  padding: 3px 0 3px 9px; margin: 8px 0 0;
}

/* 2段組み。column-count は iOS の印刷で1段に潰れるので、
   段は要素として並べ、どの問題をどの段に置くかは JS が実測して決める */
/* 仕切り線は背景で引く。段に border を付けると2段の幅が揃わない */
.ps-cols { flex: 1; display: flex; gap: 9mm; margin: 9px 0 0; overflow: hidden;
  background: linear-gradient(#eef2f6, #eef2f6) center / 1px 100% no-repeat; }
.ps-col { flex: 1 1 0; min-width: 0; list-style: none; margin: 0; padding: 0; }
.ps-q { border-bottom: 1px dashed #cbd5e1; padding: 4px 0 5px; }
.ps-qhead { display: flex; align-items: center; gap: 8px; }
/* 印刷のインクを減らすため、番号もタグも塗らずに枠線で表す */
/* 2桁（10問目以降）でも潰れないよう、幅は下限だけ決めて中身に合わせる */
.ps-no {
  flex: 0 0 auto; min-width: 21px; height: 21px; padding: 0 3px; box-sizing: border-box;
  border-radius: 6px;
  background: none; border: 1.3px solid #0c2740; color: #0c2740;
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.ps-tag {
  font-size: 10.5px; font-weight: 700; color: #b91c1c;
  background: none; border: 1px solid #f0a9a9; border-radius: 999px; padding: 1px 8px;
}
.ps-tag-sim { color: #0369a1; border-color: #9ad2f0; }
.ps-prompt { font-size: 13px; font-weight: 700; color: #0c2740; line-height: 1.45; margin: 5px 0 0; }
.ps-img { display: block; width: 100%; max-width: 27mm; height: auto; margin: 5px 0 0; border: 1px solid #e2e8f0; border-radius: 6px; }

/* 選択問題 */
/* 4択は2列。縦に4行だと1問の背が高くなり、2カラムでも枚数が増える */
.ps-choices { list-style: none; margin: 5px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.ps-choices li.is-long { grid-column: 1 / -1; }   /* 長い選択肢は1行使う */
.ps-choices li { font-size: 12px; color: #1f2937; line-height: 1.5; }
.ps-k { color: #0284c7; font-weight: 700; padding-right: 5px; }

/* 記述問題の解答欄。マス目にすると文字数がヒントになるので、区切りのない記入欄 */
.ps-field {
  width: 100%; max-width: 56mm; height: 9mm; margin: 5px 0 0;
  border: 1px solid #94a3b8; border-radius: 3px; background: #fff;
}

/* 解答ページ */
.ps-a { display: flex; gap: 7px; padding: 7px 0; border-bottom: 1px dashed #e2e8f0; }
.ps-ans { font-size: 14px; font-weight: 800; color: #0c4a6e; margin: 0; }
.ps-exp { font-size: 12px; color: #334155; line-height: 1.55; margin: 3px 0 0; }
.ps-link { font-size: 10.5px; color: #64748b; margin: 2px 0 0; }

.ps-foot {
  flex: 0 0 auto; padding-top: 7px; border-top: 1px dashed #7dd3fc;
  display: flex; align-items: center; gap: 9px; font-size: 10.5px; color: #64748b;
}
.ps-pageno { margin-left: auto; font-weight: 700; color: #475569; }
.ps-qr { width: 13mm; height: 13mm; flex: 0 0 auto; image-rendering: pixelated; }
.ps-brand { font-weight: 800; color: #0c2740; }

/* 画面が狭いときだけ出す案内（印刷には出さない） */
.ps-hint {
  display: none; margin: 0; padding: 7px 14px;
  background: #f8fafc; border-bottom: 1px solid #e2e8f0;
  font-size: 11.5px; color: #475569; line-height: 1.5;
}

/* 画面が狭いときだけ出す、右下の印刷ボタン */
.ps-fab {
  display: none; position: fixed; right: 14px; bottom: 14px; z-index: 20;
  border: 0; border-radius: 999px; cursor: pointer;
  background: #0284c7; color: #fff; font-size: 14px; font-weight: 700;
  padding: 12px 18px; box-shadow: 0 3px 12px rgba(2, 132, 199, .45);
}

/* スマホでも紙のかたちを崩さない。1カラムに組み替えると画面で見た形と
   印刷結果が食い違う。A4のまま画面幅に収まるよう縮小して見せる。
   縮小は zoom ではなく transform で行う（zoom だと WebKit が最小フォント
   9px まで文字を押し上げ、番号枠から数字があふれて組みも崩れる）。
   transform は見た目だけを縮めるので、組みは印刷と同じまま保たれる。
   screen 限定にしないと、印刷側にも縮小がかかる */
@media screen and (max-width: 800px) {
  .ps-hint { display: block; }
  .ps-fab { display: block; }
  /* 上のバーは固定をやめる。固定のままだとスクロール中ずっと紙の上部を
     覆って読めなくなる（印刷は右下のボタンから） */
  .ps-bar { position: static; gap: 8px; padding: 8px 12px; flex-wrap: nowrap; }
  .ps-home, .ps-free, .ps-btn { white-space: nowrap; }
  .ps-home { font-size: 13px; }
  .ps-free { font-size: 11px; padding: 2px 8px; }
  .ps-btn { font-size: 13px; padding: 9px 13px; }
  /* 紙1枚ぶんの高さは .ps-page と同じ295mm × 倍率。縮小しても余白が残らない */
  .ps-fit {
    height: calc(295mm * var(--ps-zoom, 1));
    margin: 8px 8px 0; overflow: hidden;
  }
  .ps-page {
    transform: scale(var(--ps-zoom, 1)); transform-origin: top left;
    margin: 0; box-shadow: 0 1px 6px rgba(15, 39, 64, .18);
  }
}

@media print {
  /* 印刷では画面用の飾りを消す。紙面そのものは画面と同じ寸法のまま刷る */
  .ps-bar, .ps-note, .ps-hint, .ps-fab { display: none !important; }
  .ps-body { background: #fff; padding: 0; }
  /* 用紙の余白は @page に任せ、紙面の高さは中身なりにする。
     箱の高さを用紙に合わせて固定すると、端末が @page の余白指定を無視して
     自前の余白（10〜13mm程度）を足したときに収まらず、あふれた分が次の
     用紙に送られて白紙が1枚ずつ挟まる（iOSで発生）。高さを決めなければ、
     余白が多少違っても紙をまたぐことはない。
     どの問題をどのページに載せるかは JS が決めているので、
     ブラウザには「1枚ずつ改ページする」ことだけ任せればよい */
  .ps-fit {
    height: auto !important; margin: 0 !important; overflow: visible !important;
    break-after: page; page-break-after: always;
  }
  .ps-fit:last-child { break-after: auto; page-break-after: auto; }
  .ps-page {
    transform: none !important; box-shadow: none;
    /* 中身の幅は画面と同じ170mm（190 - 10 - 10）に固定する。width:auto に
       すると端末の余白ぶん段が細くなり、行が余分に折り返して縦に伸びる。
       箱の幅を190mmにするのは iOS 対策。iOSは印刷時、文書の幅を用紙の
       印字可能幅（210mm - 余白 ≒ 185mm前後）に合わせて拡大縮小してから刷る。
       箱が170mmだと約1.09倍に拡大され、高さも同率で伸びて紙面の下端
       （フッター）が次の用紙に落ちる。190mmなら縮小方向（約0.97倍）になり、
       どんな余白でも 紙面の縦横比 247/190 < 用紙の 297/210 なので収まる。
       寸法どおりに刷るPCのエンジンでは、左右10mmの余白が付くだけで変わらない */
    width: 190mm; height: auto; margin: 0 auto; padding: 0 10mm; overflow: visible;
    break-after: auto; page-break-after: auto;   /* 改ページは .ps-fit だけに持たせる */
  }
  /* 余白は小さめに要求する。端末がこれを無視して自前の余白を使っても
     収まるよう、紙面の中身は最大245mm程度に抑えてある */
  @page { size: A4 portrait; margin: 8mm; }
}

/* 理由を書かせる問題など、答えが長いものは罫線にする */
.ps-lines { margin: 8px 0 0; }
.ps-lines span { display: block; height: 9mm; border-bottom: 1px solid #94a3b8; }