@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; }

.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); }
/* 札の中の分数。**設定の画面でも紙と同じ書き方にそろえる**（「1/10」は使わない）。
   紙の分数はマス（--C）に比例させているが、札はマスと関係ないので px で持つ。
   同じ行の札は高さがそろうので、「10倍」の札だけ低くなることはない */
.group-pill .frac, .sb-facmenu .frac {
  font-size: 10px;
  line-height: 1.1;
  padding: 0 1px;
  /* **札の中では、札に対して中央に置く。**
     紙の分数は「横線をとなりの数字の中心に合わせる」ために持ち上げてあるが
     （.frac の position/top）、札にはとなりの数字が無いので、
     持ち上げたままだと札の中で上に寄る。ここで打ち消す */
  position: static;
  top: auto;
}
/* 札の中身（字でも分数でも）を、たて・よことも中央にそろえる */
.group-pill, .sb-facmenu button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.group-pill .frac .fr-n, .group-pill .frac .fr-d,
.sb-facmenu .frac .fr-n, .sb-facmenu .frac .fr-d { min-width: 0; }
.group-pill .frac .fr-n, .sb-facmenu .frac .fr-n { border-bottom-width: 1px; }
.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; }
.group-pill:disabled:hover { border-color: #ddd; color: #555; }

/* ── 右上ナビ ── */
.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;
}
.print-sheet .problems-grid {
  min-height: var(--grid-min-h, 240mm);
  align-content: space-evenly;
  /* **問題だけ、左の余白を詰める。** 紙の余白は 16mm（題名と指示文はそのまま）。
     問題は番号から始まるので、そこからさらに右に寄って見えていた */
  margin-left: -8mm;
  /* **右端には余裕を残す。** 答えを書く線は列の余りをすべて吸って伸びるので、
     放っておくと紙の内側ぴったりで終わる。0mm の紙は、字の出方が少し違う
     環境（フォント・OS・拡大率）でそのまま外に出る（check:layout が知らせる）。
     使わない余白を先に取っておく */
  padding-right: 4mm;
}

/* 列の幅いっぱいに広げ、余った横幅は答えの線に吸わせる */
.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;
}

/* ── 式：「もとの数 の 倍率 ＿＿＿」 ── */
.sb-formula {
  display: flex;
  /* **答えの線は数字の足もと（ベースライン）にそろえる。**
     center だと線が数字の下へ下がって見える（がい数で確かめた） */
  align-items: baseline;
  gap: calc(var(--C) * 0.18);
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.sb-n {
  font-size: calc(var(--C) * 1.05);
  font-weight: 700;
  color: #222;
  line-height: 1.15;
  flex: 0 0 auto;
  /* **紙の中でいちばん長い数に幅をそろえる。** そろえないと「の」から先が
     問題ごとに前後して、答えの線の始まりがぎざぎざになる。
     幅は描いたあとに実測して --num-w に入れる（書体で字の幅が違うので、
     けた数×係数で見積もるとずれる）。

     **右詰めにする。** 左詰めだと、けたの少ない数（0.7）のうしろに
     すき間が空いて「0.7　　の 10倍」と離れ、ひとつづきの問いに見えない。
     右詰めなら「の」から先がぴたりとそろい、けたの多い少ないは
     数の左はしに出る（算数の紙では見なれた形） */
  width: var(--num-w, auto);
  text-align: right;
}
.sb-o {
  font-size: calc(var(--C) * 0.62);
  font-weight: 600;
  color: #444;
  line-height: 1.15;
  flex: 0 0 auto;
}
/* 倍率（10倍・10分の1 など）。**ここも幅をそろえる**（倍率ごとに長さが
   違うので、そろえないと答えの線の始まりがずれる） */
.sb-fac {
  font-size: calc(var(--C) * 0.8);
  font-weight: 700;
  color: #222;
  line-height: 1.15;
  flex: 0 0 auto;
  width: var(--fac-w, auto);
  text-align: left;
}

/* ── 分数（減る側の倍率）──
   **「1/10」とは書かない。** 算数の教科書に出てこない書き方なので、
   分子・横線・分母の縦組みにする（利用者の指定・2026-09-24）。
   組み方は既存の分数単元（bunsu/style.css の .frac）と同じにそろえてある。

   横線は `border-bottom` ＝ 前景なので、背景を刷らない設定でも紙に残る
   （BACKLOG「塗りつぶしは background で描かない」）。
   色は `currentColor` にしておくと、なぞり書きで薄くしたときに線も一緒に薄くなる */
.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  /* **横線を、となりの数字の縦の中心に合わせる**（利用者の指定・2026-09-24）。
     まわりは数字の足もと（baseline）でそろえているので、分数をそのまま置くと
     横線が数字の足もとまで下がる（実測: 数字の中心より 14.9px 下）。
     `align-self: center` でも、式の行の高さは答えの線などで決まるので合わない。

     **持ち上げる量は分数の字を基準（em）にする。** マス（--C）に比例するので、
     問題数が変わってマスの大きさが変わっても、中心に来たままになる。
     `transform` ではなく `position` で動かすのは、変形した要素を別の層で描く
     ブラウザ（Safari）で印刷から落ちるのを避けるため（BACKLOG） */
  position: relative;
  top: -0.88em;
  padding: 0 calc(var(--C) * 0.10);
  /* **まわりの数と近い大きさにする。** 0.60マスにしていたら、分数だけが
     添え字のように小さく見えた。縦に積むぶん行は高くなるので、
     shosu_bai.html の H_ROWS も一緒に増やすこと */
  font-size: calc(var(--C) * 0.70);
  font-weight: 700;
  line-height: 1.15;
}
/* **線の太さも余白も em で持つ。** mm や px で持つと、マスの大きさが変わったとき
   分数の高さだけが比例しなくなり、上で持ち上げた量（top）が中心からずれる */
.frac .fr-n { border-bottom: 0.08em solid currentColor; padding-bottom: 0.06em; }
.frac .fr-d { padding-top: 0.06em; }
.frac .fr-n, .frac .fr-d { min-width: calc(var(--C) * 0.34); }
/* **答えを書く場所は1本の線として最後まで引く**（BACKLOG の決まり）。
   余った横幅は線に吸わせ、狭くなりすぎないよう mm の下限を持たせる。

   **上限も要る。** 線が余りをすべて吸うと、1列のときや けたの少ない設定で
   紙の端まで伸びて間延びする。逆にその長さを「1問に要る幅」として
   見積もると、けたの多い設定でマスが読めない大きさまで縮む。
   **上限は mm で持つ。** マス数で持つと、問題が少なくてマスが大きい紙では
   上限も一緒に伸びて、線が紙の端まで届いてしまう（BACKLOG「1列のときは
   紙の幅を使い切らない」）。見積もり側の頭打ち（ANS_MAX_CELLS）は別に持つ */
.sb-ans {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: max(calc(var(--C) * 2.2), 20mm);
  max-width: 55mm;
  height: calc(var(--C) * 1.15);
  border-bottom: 1.5px solid #666;
  /* **問いと書く場所のあいだを空ける**（利用者の指定・2026-09-24）。
     くっついていると、倍率と答えの線がひとつづきに見える */
  margin-left: calc(var(--C) * 0.3);
  /* **線の高さを、分数の分母の下のラインにそろえる**（利用者の指定・2026-09-24）。
     ふだんは数字の足もと（baseline）に引いているが、分数はその下まで伸びるので、
     線だけが分母の途中を横切って見えていた。
     0.465マスは実測値（マスの大きさを変えても一定）。
     **倍率が分数でない問題でも同じだけ下げる。** 行ごとに変えると、
     10倍 と 100分の1 が混ざった紙で線の高さがばらばらになる。
     下げたぶんの高さは shosu_bai.html の ANS_DROP で場所を取ってある */
  position: relative;
  top: calc(var(--C) * 0.465);
}
.sb-ans-val {
  font-size: calc(var(--C) * 1.05);
  font-weight: 700;
  color: #c0392b;
  line-height: 1.15;
}

/* ── ヒント：位取りの表（利用者の指定・2026-09-24）──
   上段＝位の名前、中段＝問題の数、下段＝子どもが書く空のマス。
   **表の幅は、答えが入るところまで広げてある**（renderer の tableRange）。

   枠線と文字だけで描く（背景で塗ると、背景を刷らない設定で紙から消える。
   BACKLOG「塗りつぶしは background で描かない」）。
   **右端にそろえる**（margin-left: auto）。問題ごとに要る位の数が違うので、
   左端でそろえると表の右側ががたつく */
.sb-table {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  margin-left: auto;
}
.sb-trow {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), calc(var(--C) * 1.15));
}
/* **3段とも同じ枠のマスにする**（利用者の指定・2026-09-24）。
   位の名前だけ枠なしにしていたが、表として読むなら位も枠の中にあるほうがよい。
   高さも3段そろえる（縦にきれいに並ぶ） */
.sb-tc {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: calc(var(--C) * 1.15);
  border: 0.25mm solid #666;
  margin-left: -0.25mm;          /* 隣どうしで線を重ねて、二重線にしない */
  padding: 0 calc(var(--C) * 0.04);
}
/* 見出しだけは、長い分母（1000）がはみ出さないように切る。
   数のマスは切らない（小数点の点が枠の上に乗るため） */
.sb-tname { overflow: hidden; }
.sb-trow + .sb-trow .sb-tc { margin-top: -0.25mm; }
/* **位名の下は2重線**（利用者の指定・2026-09-24）。見出しと中身の区切りを見せる。
   `double` は太さが足りないと1本に潰れるので 0.9mm 取る */
.sb-tname { border-bottom: 0.9mm double #666; }
/* 見出しのすぐ下の行は、自分の上の枠線を持たない。
   持ったままだと2重線のすぐ下にもう1本増えて3本に見える。
   線を重ねるための負のマージンも、ここだけ外す */
.sb-trow:nth-child(2) .sb-tc { margin-top: 0; border-top: none; }
/* 位の名前 */
.sb-tname {
  font-size: calc(var(--C) * 0.5);
  font-weight: 600;
  color: #555;
  line-height: 1.1;
}
/* 名前の中の分数は、紙の倍率より小さくして見出しらしくする。
   持ち上げ（.frac の top）は、まわりに数字が無いので打ち消す */
.sb-tname .frac {
  position: static;
  top: auto;
  /* **分母が「1000」でも枠にくっつかない大きさにする。**
     0.42マスだとマス幅（1.15マス）をほぼ使い切って、線と字が触れて見えた */
  font-size: calc(var(--C) * 0.36);
  padding: 0;
}
.sb-tname .frac .fr-n, .sb-tname .frac .fr-d { min-width: 0; }
/* 小数点。**部屋は作らず、一の位のマスの右はし（境目の線）の上に置く**
   （利用者の指定・2026-09-24）。**問題の数の段だけ**に打つ。
   空の段には打たない（そこは小数点も子どもが書く）。
   **下にそろえる。** まん中に置くと中黒（・）に見えて、小数点として読めない。
   字で書くので前景として必ず刷られる（BACKLOG「塗りつぶしは background で描かない」） */
.sb-tcell.sb-dp { position: relative; }
.sb-tcell.sb-dp::after {
  content: '.';
  position: absolute;
  right: calc(var(--C) * -0.09);
  bottom: calc(var(--C) * 0.06);
  font-size: calc(var(--C) * 0.95);
  font-weight: 700;
  color: #222;
  line-height: 1;
}

/* 数を入れるマス。中段（問題の数）も下段（空欄）も同じ */
.sb-tcell {
  font-size: calc(var(--C) * 0.95);
  font-weight: 700;
  color: #222;
  line-height: 1;
}


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

/* 紙の上で倍率を選ぶ小窓（設定画面だけ。印刷には出ない） */
.sb-facmenu {
  position: absolute; z-index: 300;
  display: flex; flex-wrap: wrap; gap: 4px;
  width: 170px; padding: 7px;
  background: #fff; border: 1px solid #ccc; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.sb-facmenu button {
  flex: 1 0 45%; padding: 5px 4px;
  border: 1.5px solid #ddd; border-radius: 14px;
  background: #fff; color: #555; font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.sb-facmenu button:hover { border-color: var(--accent); color: var(--accent); }
.sb-facmenu button.active { background: var(--accent); border-color: var(--accent); color: #fff; }


/* ── 印刷 ── */
@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; }
  .sb-facmenu { display: none !important; }
}

/* ── ズームバー ── */
.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; }