@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800&display=swap');

:root {
  --C: 10mm;
  --accent: #3a7bd5;
  --border: #bbb;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
  background: #FBF8F1; color: #222; /* つくしひろばのクリーム */
}

/* ===== アプリレイアウト ===== */
.app { display: flex; height: 100vh; overflow: hidden; }

.panel {
  width: 270px; min-width: 230px;
  background: #fff; border-right: 1px solid #ddd;
  padding: 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.panel h2 { font-size: 14px; font-weight: 700; color: #555; letter-spacing: .05em; }
.panel-section { display: flex; flex-direction: column; gap: 6px; }
/* **[hidden] は display:flex に負ける。** 明示的に消さないと、
   使わない設定欄（モードごとに出し分ける欄）が出たままになる */
.panel-section[hidden] { display: none !important; }
.panel-section label { font-size: 13px; font-weight: 600; color: #333; }
.panel-section input[type=number] {
  width: 100%; padding: 6px 8px;
  border: 1px solid #ccc; border-radius: 6px;
  font-size: 13px; background: #fafafa;
}
.panel-section input:focus { outline: none; border-color: var(--accent); }
.hint-note { font-size: 11px; color: #999; font-weight: 400; white-space: pre-line; }

/* 複数えらべる欄はチェックにする（札だと1つだけ選ぶように見える）。
   作りは既存単元（kaku/style.css）と同じにそろえてある */
.check-group { display: flex; flex-direction: column; gap: 5px; }
.check-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; cursor: pointer; user-select: none;
}
/* その単位を習う学年。**設定の画面にだけ出す**（紙には出さない）。
   どれが2年でどれが3年かが分かると、先生が選びまちがえない */
.check-grade { color: #999; font-size: 11px; margin-left: 2px; }
.check-row input[type=checkbox] {
  width: 15px; height: 15px; cursor: pointer;
  accent-color: var(--accent); flex-shrink: 0;
}
/* 作れない組み合わせ。押せないことを見せる */
.check-row.disabled { opacity: .35; cursor: not-allowed; }
.check-row.disabled input { cursor: not-allowed; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; }
.toggle-row span { font-size: 13px; }
.toggle-row.locked { opacity: .4; }
.toggle-row.locked .slider { cursor: not-allowed; }
/* **flex-shrink: 0 を必ず付ける。** ラベルが長いとスイッチが押し潰され、
   他のトグルと大きさがそろわなくなる（BACKLOG・全単元に横展開ずみ） */
.toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: #ccc; border-radius: 22px; cursor: pointer; transition: background .2s; }
.slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .2s; }
.toggle input:checked + .slider { background: var(--accent); }
.toggle input:checked + .slider::before { transform: translateX(18px); }

.btn { width: 100%; padding: 9px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.btn:hover { opacity: .85; }
.btn-primary { background: var(--accent); color: #fff; }

.divider { border: none; border-top: 1px solid #eee; }

/* ── 選択ピル ── */
.group-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.group-pill {
  padding: 6px 12px; border: 1.5px solid #ddd; border-radius: 20px;
  background: #fff; color: #555; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.group-pill:hover { border-color: var(--accent); color: var(--accent); }
/* 札の中身を、たて・よことも中央にそろえる */
.group-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.group-pill.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff; box-shadow: 0 1px 4px rgba(58,123,213,.3);
}
/* 作れない倍率（patternsFor が返さなかったもの）。押せないことを見せる */
.group-pill:disabled { opacity: .35; cursor: not-allowed; }
/* その設定を使う問い方が選ばれていない欄。見出しも薄くして、
   いまは効かないことが分かるようにする */
.panel-section.is-off > label { opacity: .5; }
.group-pill:disabled:hover { border-color: #ddd; color: #555; }

/* 検査（check:layout）から問い方を切り替えるための、見えない札。
   **この指定は `.group-pill` の指定より後に置く。** 前に置いたら、
   あとから来る `.group-pill { display: inline-flex }` に上書きされて、
   空の札が画面に並んだ（重なり合う指定は後ろが勝つ）。
   画面から消えていても JS の click() は届く（tanni.html の check-probe） */
.group-pill.check-probe { display: none; }

/* ── 右上ナビ ── */
.top-btns { position: fixed; top: 16px; right: 20px; z-index: 200; display: flex; gap: 8px; }
.top-btn { padding: 8px 18px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: opacity .15s, transform .1s; }
.top-btn:hover   { opacity: .88; }
.top-btn:active  { transform: translateY(1px); }
.top-btn:disabled { opacity: .4; cursor: default; transform: none; }
.top-btn-settings { background: #fff; color: #333; }
/* 目次へ戻る。単元に入ったあと帰り道がブラウザの戻るしか無かったので足した
   （つくしひろばに同梱するにあたっての追加。UI_RULES.md にも入れてある） */
.top-btn-back { background: #fff; color: #333; text-decoration: none; display: inline-flex; align-items: center; }
.top-btn-preview  { background: #e67e22; color: #fff; }
.top-btn-print    { background: #27ae60; color: #fff; }
.top-btn-answer   { background: #f0f2f5; color: #333; }
.top-btn-answer.active { background: #2ecc71; color: #fff; }
@media print { .top-btns { display: none; } }

/* ── プレビューエリア ── */
.preview-area { flex: 1; overflow: auto; padding: 24px; display: flex; flex-direction: column; align-items: center; }
.sheet-wrapper { flex-shrink: 0; }
#sheetsContainer { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.print-sheet {
  background: #fff; width: 210mm; height: 297mm; overflow: hidden;
  padding: 12mm 16mm;
  box-shadow: 0 8px 24px -8px rgba(92,68,51,.35); /* クリーム地で紙の縁が出る濃さ */
  transform-origin: top left;
  position: relative; /* 出どころ表示を紙の左下に置くため */
}

.sheet-header { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 5mm; }
.sheet-title {
  flex: 1; min-width: 40mm; outline: none;
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic Pro', sans-serif;
  font-size: 32px; font-weight: 800;
  /* **題は1行に収める。** 折り返すと名前欄が押し下がり、問題を並べる高さも減る。
     入りきらないときは JS（fitTitle）が字を小さくする */
  white-space: nowrap;
  overflow: hidden;
}
.sheet-title[contenteditable="true"]:empty::before { content: attr(data-placeholder); color: #ccc; }
.header-field { display: flex; align-items: flex-end; gap: 4px; font-size: 18px; white-space: nowrap; }
.header-field .line { display: inline-block; width: 60px; border-bottom: 1px solid #333; }
.header-field .name-line { width: 70mm; }

.sheet-instruction {
  min-height: 6mm; margin-bottom: 5mm;
  /* JS の _instructionSize と必ずそろえること */
  font-size: 15px; line-height: 1.7; color: #222;
  outline: none; white-space: pre-wrap;
}
.sheet-instruction:empty::before { content: attr(data-placeholder); color: #bbb; }
.sheet-instruction[contenteditable="true"] { border-bottom: 1px dashed #ccc; padding-bottom: 2px; cursor: text; }
.instruction-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 11px; color: #999; }
.inst-size-btn { width: 20px; height: 20px; padding: 0; border: 1px solid #ddd; border-radius: 4px; background: #f5f5f5; color: #555; font-size: 13px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.inst-size-btn:hover { background: #e8e8e8; }
#instSizeDisplay { font-size: 12px; color: #555; min-width: 18px; text-align: center; }
@media print { .no-print { display: none !important; } }

/* ── 問題グリッド ── */
.problems-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
  column-gap: var(--col-gap, 6mm);
  row-gap: var(--row-gap, 8mm);
  justify-items: start;
  align-items: start;
}
/* ヒントを右上に置くための基準。中身は絶対配置なので高さに効かない。
   **紙を縦に使い切るのはこの箱の役目**（段が1つでも2つでも同じ） */
#problemsOutput, .problems-output {
  position: relative;
  min-height: var(--grid-min-h, 240mm);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.print-sheet .problems-grid {
  /* **段が2つある紙では、下の段の高さも合わせて紙を埋める。**
     min-height を両方に掛けると2枚ぶんの高さになるので、
     背の高さは「問題の箱」ぜんたいで持つ（#problemsOutput） */
  min-height: 0;
  align-content: space-evenly;
  /* **問題だけ、左の余白を詰める。** 紙の余白は 16mm（題名と指示文はそのまま）。
     問題は番号から始まるので、そこからさらに右に寄って見えていた */
  margin-left: -8mm;
  /* **右端には余裕を残す。** 答えを書く線は列の余りをすべて吸って伸びるので、
     放っておくと紙の内側ぴったりで終わる。0mm の紙は、字の出方が少し違う
     環境（フォント・OS・拡大率）でそのまま外に出る（check:layout が知らせる）。
     使わない余白を先に取っておく。
     **この単元は線を伸ばす作り**（.sm-ans の flex:1）なので、線は必ずここで止まる。
     グリッドは margin-left: -8mm で左へ出ているぶん、右へも 8mm 長い。
     実測で 4mm→「余裕 0.0mm」、10mm→「0.0〜1.5mm」だったので、
     **3mm 以上の余裕が出る 15mm** にした（check:layout の下限は 3mm） */
  padding-right: 15mm;
}

/* 列の幅いっぱいに広げ、余った横幅は答えの線に吸わせる */
.prob-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--C) * 0.2);
  width: 100%;
  position: relative;   /* ヒントを下にぶら下げるため */
}

.prob-label {
  /* **番号の幅もそろえる。**（1）と（10）で幅が違うと、そのぶん式全体が右へずれ、
     数の幅をそろえても答えの線がそろわない。幅は描いたあとに実測して入れる */
  width: var(--label-w, auto);
  flex: 0 0 auto;
  font-size: min(calc(var(--C) * 0.6), 6mm);
  font-weight: 600;
  color: #555;
  white-space: nowrap;
  min-width: calc(var(--C) * 1.5);
  text-align: right;
}

/* ── 式：「1を3こ、0.1を4こ、0.01を7こ 合わせた数 ＿＿＿」 ── */
.sm-formula {
  display: flex;
  /* **書き込む線は数字の足もと（ベースライン）にそろえる。**
     center だと線が数字の下へ下がって見える（がい数・小数の10倍で確かめた） */
  align-items: baseline;
  gap: calc(var(--C) * 0.2);
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
/* 問いの側。**幅をそろえる**（そろえないと答えの線がぎざぎざになる）。
   幅は描いたあとに実測して --ask-w に入れる（書体で字の幅が違うので、
   字数×係数で見積もるとずれる） */
.sm-ask {
  flex: 0 0 auto;
  width: var(--ask-w, auto);
  text-align: left;
}
/* 「1を3こ」のひとかたまり。折り返さない */
.sm-term { white-space: nowrap; }
/* 「合わせた数」の前は、読点よりも広くあける（文の切れ目なので） */
.sm-tail { margin-left: calc(var(--C) * 0.35); }

/* 分解の □。**書き込むのはこの中**なので、答えの線は引かない。
   枠線で描く（塗りは、背景を刷らない設定で消える） */
.sm-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* **子どもが数字を書き入れる枠なので、大きく取る**（利用者の指摘・2026-09-28）。
     1.15倍（マス5mmで5.8mm）では小さすぎた。8mm の下限も置く */
  width: max(calc(var(--C) * 1.6), 8mm);
  height: max(calc(var(--C) * 1.5), 7.5mm);
  border: 1.2px solid #666;
  border-radius: 0.6mm;
  margin: 0 calc(var(--C) * 0.08);
  vertical-align: middle;
}

.sm-num {
  font-size: calc(var(--C) * 1.0);
  font-weight: 700;
  color: #222;
  line-height: 1.15;
}
/* 「を」「こ」「、」「合わせた数」。数より小さく、読点のぶんだけ間を取る。
   **0.62 から 0.70 に上げた**（利用者の指定・2026-09-28）。
   実測（12問・0.001まで・4つの問い方）でいちばん長い行の幅は
   0.62→175.3mm、0.70→200.9mm、0.75→210.3mm（紙は約176mm＋のりしろ）。
   **0.75 以上は紙から出る**ので 0.70 が上限。そのぶん問題数の上限を
   12→10 に下げてある（shosu_mikata.html の HARD_MAX） */
.sm-word {
  font-size: calc(var(--C) * 0.70);
  font-weight: 700;
  color: #222;
  line-height: 1.15;
  margin: 0 calc(var(--C) * 0.04);
}

/* **書き込む場所は1本の線として最後まで引く**（BACKLOG の決まり）。
   **幅は固定にする。** この単元は問い方を1枚に混ぜられるので、伸びる作りだと
   「合わせた数」の行と「何こ」の行で右端がばらつく
   （BACKLOG「異なる出題パターンを混在させるなら、答え欄を固定幅にする」）。
   答えの形を決めつける下書き（小数点など）は引かない */
.sm-ans {
  /* **線の右には必ず余白を残す。** グリッドの padding では効かなかった
     （実測: 線の右端がグリッドの枠線ぎりぎりまで伸びた）ので、
     線そのものに余白を持たせる。check:layout の下限は 3mm */
  margin-right: 6mm;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* **幅は答えの字数から決める**（renderer の ansSize が style で入れる）。
     列の余りを吸わせていたころは、「何こ集めた数」の答え（306 の3字）に
     62mm の線が引かれていて長すぎた（利用者の指摘・2026-09-28） */
  flex: 0 0 auto;
  height: calc(var(--C) * 1.15);
  border-bottom: 1.5px solid #666;
  margin-left: calc(var(--C) * 0.3);
}

.sm-ans-val {
  font-size: calc(var(--C) * 1.0);
  font-weight: 700;
  color: #c0392b;
  line-height: 1.15;
}

/* ── 段の見出し（問い方が2つの紙だけ）──
   **どちらの問いなのかを段ごとに言う。** 1つだけの紙では出さない
   （上の指示文と同じことを2度書かない） */
.sm-lead {
  margin: 0 0 2mm -8mm;
  /* **段の見出しは指示文そのもの**（紙の上に別の指示文は置いていない）。
     0.66倍（マス5mmで12.5px）では、問題の数字 18.9px に対して小さすぎた。
     0.85倍に上げてもなお、紙の下には余裕が残る（実測・2026-10-03） */
  font-size: min(calc(var(--C) * 0.85), 6mm);
  font-weight: 700;
  color: #222;
}
.problems-grid + .sm-lead { margin-top: 6mm; }

/* ── ヒント：位の大きさを紙の右上に並べる ──
   **枠線と文字だけで描く**（背景で塗ると、背景を刷らない設定で紙から消える）。
   **問題を並べる箱の外に置く**（#hintBar）。中に入れると、帯のぶんの高さが
   「問題を並べられる高さ」から引かれず、紙の下がはみ出す */
.sm-hint {
  position: absolute;
  top: 0;
  right: 0.5mm;
  /* 置き場所は上か下か。**組んだあとに測って、行が短いほうへ置く**
     （shosu_mikata.html の fitHint） */
  /* **2段の表**（上＝位の名前と大きさ、下＝空のマス）。
     列は位の数だけ。小数点の列だけ細くする */
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  align-items: stretch;
  border: 0.3mm solid #666;
  border-radius: 1mm;
  overflow: hidden;
  background: #fff;
}
.sm-hint--bottom { top: auto; bottom: 0; }
/* 行の横に置けない紙では、**問題の上に帯として置く**（高さをもらう）。
   重ねたまま刷るよりよい。高さは hintBandMm() が数に入れる */
.sm-hint--flow {
  position: static;
  /* **中身なりの幅で右へ寄せる。** grid は放っておくと幅いっぱいに広がり、
     紙の端から端までの帯になってしまった（実測 178mm） */
  width: max-content;
  margin: 0 0 3mm auto;
}

/* 上の段：位の名前（小さく）と大きさ（太く）。
   **表ぜんたいの大きさは --rel-size ひとつで決める。**
   こうしておくと、行と重なったときに JS（fitHint）が縮めて逃がせる。
   字だけを小さくしても表の幅は変わらず、重なったままだった（実測） */
.sm-hint-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1mm;
  /* **上の段は詰める**（表の背を低くする。利用者の指定・2026-10-03）。
     書き込む欄の高さは減らさない */
  padding: calc(var(--rel-size, 3.2mm) * 0.15) calc(var(--rel-size, 3.2mm) * 0.4)
           calc(var(--rel-size, 3.2mm) * 0.12);
  border-bottom: 0.3mm solid #666;
}
/* 列の区切り。**先頭の列以外**に左の線を引く（小数点の列には引かない） */
.sm-hint-dot ~ .sm-hint-head,
.sm-hint-head ~ .sm-hint-head { border-left: 0.3mm solid #999; }
.sm-hint-dot ~ .sm-hint-cell,
.sm-hint-cell ~ .sm-hint-cell { border-left: 0.3mm solid #999; }
/* 位の分数。**横線は分子の下の罫線**で引くので、必ず水平になる */
.sm-frac {
  display: inline-flex;
  flex-direction: column;
  /* **横線は分母の幅いっぱいまで引く。** center だと分子の幅しか線が引けず、
     1/1000 のときに線が短くて分数に見えなかった（実測） */
  align-items: stretch;
  text-align: center;
  line-height: 1.0;
  font-size: var(--rel-size, 3.2mm);
  font-weight: 700;
  color: #222;
}
.sm-frac-n { border-bottom: 0.3mm solid #222; }
.sm-frac-d { padding-top: 0.2mm; }
/* 一のくらいは分数にしない（1/1 とは書かない） */
.sm-frac-one {
  /* 一のくらいの「1」。分数と高さをそろえる（上下中央に置く） */
  margin: auto 0;
  font-size: var(--rel-size, 3.2mm);
  font-weight: 700;
  color: #222;
  line-height: 1.0;
}
.sm-hint-size {
  font-size: calc(var(--rel-size, 3.2mm) * 0.85);
  line-height: 1.15;
  font-weight: 700;
  color: #222;
  white-space: nowrap;
}
/* 下の段：書き込む空のマス */
.sm-hint-cell {
  /* **書き込む欄なので、縦を長めに取る**（利用者の指定・2026-10-03） */
  height: calc(var(--rel-size, 3.2mm) * 3.6);
  min-width: calc(var(--rel-size, 3.2mm) * 2.6);
}
/* 小数点の列。**一のくらいと小数第一位のあいだ**に細く置く */
.sm-hint-dot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(var(--rel-size, 3.2mm) * 0.2);
  width: calc(var(--rel-size, 3.2mm) * 0.85);
  font-size: calc(var(--rel-size, 3.2mm) * 1.5);
  font-weight: 700;
  color: #222;
}
.sm-hint-dot-head { border-bottom: 0.3mm solid #666; }

/* 設定画面で押して直せる場所。印刷には出ない見た目 */
.sm-editable { cursor: pointer; border-radius: 2px; }
.sm-editable:hover { background: #eef4fd; }
@media print { .sm-editable:hover { background: none; } }

/* ── 印刷 ── */
@page { size: A4 portrait; margin: 0; }
@media print {
  body { background: #fff; }
  .app { display: block; height: auto; }
  .panel { display: none; }
  .preview-area { padding: 0; overflow: visible; }
  .sheet-wrapper { width: auto !important; height: auto !important; }
  .print-sheet {
    box-shadow: none; transform: none !important; margin: 0;
    width: 210mm; height: 297mm; overflow: visible;
    page-break-after: always;
  }
  #sheetsContainer { gap: 0; }
  .print-sheet:last-child { page-break-after: avoid; }
  .sheet-instruction { border: none; padding: 0; }
}

/* ── ズームバー ── */
.zoom-bar {
  position: fixed; bottom: 20px; right: 24px; z-index: 150;
  display: flex; align-items: center; gap: 1px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 20px; padding: 3px 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  opacity: .55; transition: opacity .2s; user-select: none;
}
.zoom-bar:hover { opacity: 1; }
.zoom-btn {
  width: 26px; height: 26px; border: none; border-radius: 13px;
  background: transparent; font-size: 15px; font-weight: 700;
  color: #444; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.zoom-btn:hover { background: rgba(0,0,0,.07); }
.zoom-reset {
  min-width: 42px; border: none; border-radius: 4px;
  background: transparent; font-size: 12px; font-weight: 600;
  color: #555; cursor: pointer; padding: 2px 4px;
  transition: background .12s; border-left: 1px solid rgba(0,0,0,.09);
  margin-left: 2px; padding-left: 7px;
}
.zoom-reset:hover { background: rgba(0,0,0,.07); }
.zoom-slider {
  -webkit-appearance: none; appearance: none;
  width: 90px; height: 3px;
  background: rgba(0,0,0,.18); border-radius: 2px;
  outline: none; cursor: pointer; margin: 0 2px;
}
.zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: #3a7bd5; box-shadow: 0 1px 3px rgba(58,123,213,.4);
  transition: transform .1s;
}
.zoom-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.zoom-slider::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; border: none;
  background: #3a7bd5; box-shadow: 0 1px 3px rgba(58,123,213,.4);
}
@media print { .zoom-bar { display: none; } }

/* 印刷では拡大縮小を戻す。画面の zoom をそのまま持ち込むと紙の寸法が狂う */
@media print {
  .print-sheet { zoom: 1 !important; transform: none !important; }
}

/* ── 印刷で白紙のページが出るのを直す（2026-08-31・全単元） ──────────
   **この節は必ずスタイルシートの末尾に置く。** 途中に置くと、後ろにある
   `.print-sheet` の指定（overflow: visible など）に上書きされて効かなくなる。

   1. **改ページは包む箱（.sheet-wrapper）に付ける。**
      `.print-sheet:last-child` は「箱の中のただ一つの子」なのですべての紙に当たり、
      page-break-after を avoid に上書きしてしまう（＝2枚目以降が白紙）
   2. **印刷は block で流す。** flex のままだと紙まるごと次のページへ送られる
   3. **紙面ちょうど（297mm）だと高さが整数pxへ切り上がり**、
      わずかにはみ出して中身の無いページが挟まる。少しだけ低くする */
@media print {
  .print-sheet {
    height: 296.8mm !important;
    overflow: hidden !important;
    page-break-after: auto !important;
    break-after: auto !important;
  }
  /* **画面の部品は必ず消す。** block で流すと、消し忘れた部品が紙の「上」に
     積まれて紙を押し下げ、下がはみ出して2ページ目ができる */
  .panel, .top-btns, .zoom-bar, .instruction-toolbar, .no-print { display: none !important; }
  html, body, .app, .preview-area, #sheetsContainer {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  .sheet-wrapper { break-after: page; page-break-after: always; }
  .sheet-wrapper:last-child { break-after: auto; page-break-after: auto; }
}

/* ── 出どころ表示（刷った紙だけを見ても、どこの教材か分かるように）──
   **no-print を付けない。** 画面の飾りではなく、紙に残すためのもの。
   位置と大きさはドリルのPDFと同じ（高さ3.5mm・左8mm・下5mm）。
   決めごとは docs/backlog.md「5.（実装ずみ）」 */
.sheet-credit {
  position: absolute; left: 8mm; bottom: 5mm; height: 3.5mm;
  pointer-events: none; user-select: none;
}
.sheet-credit img { height: 100%; width: auto; display: block; }