/* ことばプリント（絵とマス）
   版面は つくしドリルの「ことばを かく」と同じ。
   大きさは JS が .print-sheet に mm で入れる（--ill 絵／--cell マス）。 */

/* **Safari は印刷の向きを「縦」で開く。** WebKit が `@page { size }` を
   見ないため（利用者の報告・2026-10-20）。横向きの紙が縦の用紙に乗るので、
   そのまま刷ると A4 からはみ出す。寸法での指定も併記しておく（同じ意味だが、
   keyword だけを解さない版への保険）。それでも読まない版では、
   印刷の設定で用紙の向きを「横」にしてもらうほかない */
@page { size: A4 landscape; size: 297mm 210mm; margin: 0; }

:root {
  --ink: #3a3a3a;
  --accent: #3a7fd5;      /* 主題の字・なまえ欄の枠 */
  --line: #444;           /* マスの線 */
}

* { box-sizing: border-box; }
*, *::before, *::after {
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

body {
  margin: 0;
  background: #FBF8F1;                     /* つくしひろばのクリーム */
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  color: var(--ink);
}

/* ── 上のボタン ─────────────────────────────── */
.top-btns {
  position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 50;
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: rgba(251,248,241,.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid #eadfcc;
}
.top-btn {
  appearance: none; border: 1px solid #d9cdb6; background: #fff;
  border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 700;
  color: #5c4433; cursor: pointer;
}
.top-btn:disabled { opacity: .45; cursor: default; }
.top-note { font-size: 12.5px; color: #8a7a68; min-width: 0; flex: 0 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 上の帯のページ操作（‹ 1 / 3 › ＋ 複製 削除）──────────
   **札（ピル）にしない。文字と小さな記号だけ**（利用者の指定・2026-10-30）。
   帯の真ん中に置き、紙の上の場所を取らない */
/* 真ん中に**固定はしない**。固定すると幅1100px以下で右の知らせの文と重なった。
   空いた幅の中央に置き、狭いときは右の文のほうを省略する */
.page-nav { margin: 0 auto; flex: none; display: flex; align-items: center; gap: 2px; }
.pn-arrow { appearance: none; border: 0; background: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px; font-size: 22px; line-height: 1;
  color: #5c4433; padding: 0 0 2px; }
.pn-arrow:hover:not(:disabled) { background: #f1ece1; }
.pn-arrow:disabled { opacity: .25; cursor: default; }
.pn-now { min-width: 52px; text-align: center; font-size: 14px; font-weight: 700;
  color: #5c4433; font-variant-numeric: tabular-nums; }
.pn-now.bad { color: #b5382a; }
.pn-tools { display: flex; align-items: center; gap: 2px; margin-left: 10px;
  padding-left: 10px; border-left: 1px solid #e6dccb; }
.pn-tool { appearance: none; border: 0; background: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px; color: #6b5a47; font-size: 18px;
  display: flex; align-items: center; justify-content: center; padding: 0; }
.pn-tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pn-tool:hover:not(:disabled) { background: #f1ece1; color: #3f6b38; }
.pn-tool.danger:hover:not(:disabled) { background: #fdf1ef; color: #b5382a; }
.pn-tool:disabled { opacity: .3; cursor: default; }

/* ── 記号のボタンの説明（マウスを重ねると、すぐ文字で出す）──
   **title では出さない。** ブラウザの説明は出るまで1秒ほど待たされ、
   Safari では出ないこともある（利用者の指定・2026-10-30）。
   帯の下に出す（上は画面の外になるため） */
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); white-space: nowrap; pointer-events: none; z-index: 60;
  background: #443124; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4;
  padding: 4px 9px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* ── 上の帯の倍率（－ 80% ＋）── */
.zoom-mini { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.zm-btn, .zm-now { appearance: none; border: 0; background: none; cursor: pointer;
  height: 28px; border-radius: 6px; color: #5c4433; font: inherit; padding: 0; }
.zm-btn { width: 28px; font-size: 16px; }
.zm-now { min-width: 48px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.zm-btn:hover, .zm-now:hover { background: #f1ece1; }
.top-btn-preview, .top-btn-print { margin-left: 8px; background: #5aa454; color: #fff; border-color: #4e9148; }

/* ── 画面の組み ─────────────────────────────── */
.app { display: flex; gap: 20px; padding: 68px 16px 72px; align-items: flex-start; }
.panel {
  width: 320px; flex-shrink: 0; background: #fff; border: 1px solid #eadfcc;
  border-radius: 16px; padding: 14px; box-shadow: 0 2px 10px rgba(92,68,51,.08);
}
.panel-header { font-weight: 800; margin-bottom: 10px; }
.badge { font-size: 12px; background: #eef5e9; color: #4e7a3f; border-radius: 999px; padding: 2px 8px; }
.panel-section { margin-bottom: 14px; }
.panel-section > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.hint { font-size: 12px; color: #7a6a58; line-height: 1.5; margin: 6px 0 0; }
.pill-group { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  appearance: none; border: 1px solid #d9cdb6; background: #fff; border-radius: 999px;
  padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; color: #5c4433;
}
.pill.active { background: #5aa454; border-color: #4e9148; color: #fff; }
.seg { display: inline-flex; gap: 0; border: 1px solid #d9cdb6; border-radius: 999px;
  overflow: hidden; background: #fff; }
.seg .pill { border: 0; border-radius: 0; padding: 7px 14px; }
.seg .pill + .pill { border-left: 1px solid #e8dfcd; }
.btn-main {
  width: 100%; appearance: none; border: 0; border-radius: 12px; padding: 12px;
  background: #5aa454; color: #fff; font: inherit; font-weight: 800; cursor: pointer;
}
.btn-main:disabled { background: #e7e0d2; color: #9a8a76; cursor: default; }
.btn-sub {
  appearance: none; border: 1px solid #d9cdb6; background: #fff; border-radius: 10px;
  padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; color: #5c4433;
}
/* メーカーの名前（画面だけ。何を作る道具かを示す） */
.maker-title {
  margin: 0 0 0 4px; font-size: 15px; font-weight: 800; color: #5c4433;
  white-space: nowrap;
}

/* 指示文の定型文（紙の上から呼ぶ。印刷には出ない）
   **印は出しっぱなしにする。** マウスを載せるまで出さないと、定型文があること
   自体に気づけない。中身の有無で「ことばの札 ⇄ 小さな印」と姿が変わる作りも
   やめ、**どちらでも同じ印**を1つだけ置く（利用者の指定・2026-10-20） */
.instr-wrap { position: relative; display: flex; }
.instr-pick {
  position: absolute; top: 0; right: 100%; margin-right: 6px; z-index: 6;
  width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #a9c9a2; background: #f3f9f1; border-radius: 999px;
  font: inherit; color: #3f6b38; cursor: pointer;
  box-shadow: 0 1px 4px rgba(92,68,51,.14); transition: background .12s;
}
.instr-pick svg { width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; }
.instr-pick:hover { background: #e7f3e4; border-color: #8ab582; }

.instr-menu {
  position: absolute; z-index: 20; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e0d6c3; border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 28px rgba(92,68,51,.22); width: 280px;
}
.instr-menu-head {
  margin: 2px 8px 6px; font-size: 11px; font-weight: 800; color: #a89883;
  font-family: "M PLUS Rounded 1c", sans-serif;
}
.instr-menu button {
  display: flex; align-items: center; gap: 6px; width: 100%;
  text-align: left; border: 0; background: none; cursor: pointer;
  padding: 8px 8px; border-radius: 8px; font: inherit;
}
/* **刷ったときの字で見せる**（選ぶ前に仕上がりが分かる） */
.instr-menu .line {
  font-family: "YuKyokasho Medium", "游教科書体 ミディアム", serif;
  font-size: 14px; color: #3a3a3a; line-height: 1.4;
}
.instr-menu .tick { width: 12px; color: #5aa454; font-size: 12px; }
.instr-menu button:hover, .instr-menu button:focus-visible {
  background: #f4f8f2; outline: none;
}
.instr-menu button.on .line { color: #3f6b38; font-weight: 700; }
.instr-menu .blank { border-top: 1px solid #f0e8d9; margin-top: 4px; padding-top: 10px; }
.instr-menu .blank .line {
  font-family: "M PLUS Rounded 1c", sans-serif; font-size: 12px; color: #8a7a68;
}

select {
  width: 100%; border: 1px solid #d9cdb6; border-radius: 8px; padding: 7px 9px;
  font: inherit; font-size: 13px; background: #fff; color: #5c4433;
}
input[type="text"], input[type="number"] {
  width: 100%; border: 1px solid #d9cdb6; border-radius: 8px; padding: 7px 9px;
  font: inherit; font-size: 14px;
}
.err { color: #c0392b; font-size: 12px; margin-top: 4px; }

/* 使い方（読むのは先生・保護者） */
.howto { margin-top: 16px; border-top: 1px solid #f0e8d9; padding-top: 12px; }
.howto h3 { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: #5c4433; }
.howto ol { margin: 0; padding-left: 1.2em; }
.howto li { font-size: 12px; line-height: 1.7; color: #7a6a58; }

/* 問題の行（絵・ことば・マス数） */
.rows { display: flex; flex-direction: column; gap: 10px; }
.row {
  border: 1px solid #eadfcc; border-radius: 12px; padding: 8px;
  display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center;
}
.drop {
  width: 56px; height: 56px; border: 2px dashed #d9cdb6; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 11px; color: #a89883; text-align: center; overflow: hidden; background: #fff;
}
.drop.over { border-color: #5aa454; background: #f1f8ef; }
.drop img { width: 100%; height: 100%; object-fit: contain; }
.row-cells { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #7a6a58; }
.row-cells input { width: 52px; }
.row-del { grid-column: 3; }

/* ── ページ（紙の外。印刷には出ない）────────────────
   **紙はぜんぶ縦に並べ、スクロールで見る**（利用者の指定・2026-10-20）。
   目次は上に貼り付けておき、押すとその紙まで送る */
.sheets { display: flex; flex-direction: column; align-items: center; gap: 28px; }
/* 送り先の紙は、上のボタン（52px）と目次の帯のぶんだけ下げて止める */
.page-slot { display: flex; flex-direction: column; align-items: center;
  scroll-margin-top: 112px; }
.page-head {
  align-self: stretch; display: flex; align-items: center; gap: 8px;
  padding: 0 2px 6px;
}
.page-no { font-size: 12px; font-weight: 800; color: #a89883; }
.page-head-tools { margin-left: auto; display: flex; gap: 6px; }
.page-add-end {
  margin-top: 4px; align-self: center; appearance: none; cursor: pointer;
  border: 1.5px dashed #d9cdb6; background: #fff; border-radius: 14px;
  padding: 14px 28px; font: inherit; font-size: 14px; font-weight: 700; color: #6b5a47;
}
.page-add-end:hover:not(:disabled) { border-color: #a9c9a2; background: #f4f8f2; color: #3f6b38; }
.page-add-end:disabled { opacity: .45; cursor: default; }
.page-bar {
  position: sticky; top: 60px; z-index: 40;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: rgba(255,255,255,.96); border: 1px solid #eadfcc; border-radius: 999px;
  padding: 6px 10px; box-shadow: 0 1px 4px rgba(92,68,51,.1);
}
.page-bar-label { font-size: 12px; font-weight: 700; color: #a89883; margin-right: 2px; }
.page-chip {
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px;
  border: 1px solid #d9cdb6; background: #fff; color: #6b5a47;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.page-chip:hover { border-color: #a9c9a2; background: #f4f8f2; }
.page-chip.on { background: #5aa454; border-color: #4e9148; color: #fff; }
/* 使えない字が残っているページは赤く示す（開かなくても分かるように） */
.page-chip.bad { border-color: #e3b4ac; color: #b5382a; }
.page-chip.bad.on { background: #c0392b; border-color: #b5382a; color: #fff; }
.page-tool {
  width: 28px; height: 28px; padding: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e0d6c3; background: #fff; color: #6b5a47; cursor: pointer;
}
.page-tool svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.page-tool:hover:not(:disabled) { background: #f1f8ef; border-color: #a9c9a2; color: #3f6b38; }
.page-tool.danger:hover:not(:disabled) { background: #fdf1ef; border-color: #e3b4ac; color: #b5382a; }
.page-bar button:disabled, .page-tool:disabled { opacity: .4; cursor: default; }

/* ── 列ごとのなぞりスイッチ（紙の外。印刷には出ない）────── */
.sheet-wrapper { flex-direction: column; align-items: center; gap: 10px; }
.trace-bar { position: relative; height: 30px; align-self: center; }
.trace-chip {
  position: absolute; top: 0; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 6px;
  border: 1px solid #d9cdb6; border-radius: 999px; background: #fff;
  font: inherit; font-size: 12px; font-weight: 700; color: #8a7a68; cursor: pointer;
  box-shadow: 0 1px 3px rgba(92,68,51,.12); white-space: nowrap;
}
.trace-chip .knob {
  width: 26px; height: 15px; border-radius: 999px; background: #e3dbcc;
  position: relative; transition: background .15s;
}
.trace-chip .knob::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.trace-chip.on { color: #3f6b38; border-color: #a9c9a2; background: #f3f9f1; }
.trace-chip.on .knob { background: #5aa454; }
.trace-chip.on .knob::after { transform: translateX(11px); }
.trace-chip:hover { border-color: #a9c9a2; }
/* スイッチに触れている列を光らせる */
.col--lit .m { background: #f5faf3; }

/* ── 紙 ────────────────────────────────────── */
.sheet-wrapper { display: flex; justify-content: center; flex: 1; }
.print-sheet {
  width: 297mm; height: 210mm; padding: 5mm; background: #fff; overflow: hidden;
  box-shadow: 0 8px 24px -8px rgba(92,68,51,.35);
  /* 右の帯が先に来るので row-reverse。本体が左の残りを使う。
     **帯と本体のすき間は 6mm**（レイアウトの計算に入れている GAP_BAND と同じ。
     ここを入れ忘れると、1列目がなまえ欄にくっつく） */
  display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 6mm;
  font-family: "YuKyokasho Medium", "游教科書体 ミディアム", serif;
}

/* 右の帯（縦書き） */
/* **帯はなまえ欄の幅ぴったりにする。** 以前あった主題の字の枠に合わせて
   40mm 取っていた名残で、1列目との間が16mm 空いていた
   （利用者の指摘・2026-10-20）。詰めたぶんは列が広く使う */
.band { display: flex; flex-direction: row; align-items: flex-start; flex-shrink: 0;
  height: 100%; width: 36mm; gap: 4mm; }
.band-main { display: flex; flex-direction: column; align-items: flex-end;
  width: 24mm; height: 100%; }
.target {
  width: 31mm; height: 31mm; margin-right: 1.5mm; flex-shrink: 0;
  border: 2px solid var(--accent); border-radius: 3mm; background: rgba(58,127,213,.07);
  display: flex; align-items: center; justify-content: center;
}
.target span { color: var(--accent); font-size: 24.8mm; line-height: 1; }
.target--off { border: 0; background: none; }      /* 主題の字を出さないとき */
.vtext { writing-mode: vertical-rl; text-orientation: upright;
  line-height: 1.1; letter-spacing: .06em; }
.instr { width: 8mm; font-size: 5.5mm; color: #555; outline: none; }
/* なまえ欄は低学年の漢字プリントと同じ（枠は灰色・ラベルは枠の外・下揃え） */
.name-field { width: 24mm; height: 120mm; position: relative; flex-shrink: 0;
  margin-top: auto; align-self: flex-end;
  display: flex; flex-direction: column; align-items: flex-start; }
.name-label { position: absolute; top: 2mm; left: 21mm;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: 3.9mm; color: #444; letter-spacing: .15em; }
.name-box { width: 20mm; flex: 1; border: 1.5px solid #888; border-radius: 1mm; position: relative; }
.name-box::after { content: ''; position: absolute; left: 50%; top: 2px; bottom: 2px;
  border-left: 1px dashed rgba(0,0,0,.22); }

/* 本体。列は右から左（縦書きの紙なので読む向きとそろえる） */
/* **列は右から詰める。** 増やした列がすぐ左に並ぶ（利用者の指定・2026-10-18）。
   均等に散らすと、1列足すたびに既にある列まで動いて落ち着かない */
.body { flex: 1; display: flex; flex-direction: row-reverse; align-items: flex-start;
  justify-content: flex-start; gap: 4mm; }
.col { display: flex; flex-direction: column; align-items: center; width: var(--ill); }
/* **画像の枠は編集中だけ。** 刷る紙には出さない（利用者の指定・2026-10-18）。
   場所は取ったままにするので、マスの位置は変わらない */
.ill { width: var(--ill); height: var(--ill); border-radius: 1mm; background: #fff; }
.editing .ill { border: 1px solid #c9bda6; }
.ill img { width: 100%; height: 100%; object-fit: contain; display: block; }
.masu { display: flex; flex-direction: column; margin-top: 4mm; }
.m { width: var(--cell); height: var(--cell); border: 1px solid var(--line);
  margin-top: -0.5px; position: relative; }
.m::before { content: ''; position: absolute; left: 50%; top: 2px; bottom: 2px;
  border-left: 1px dashed rgba(0,0,0,.2); }
.m::after { content: ''; position: absolute; top: 50%; left: 2px; right: 2px;
  border-top: 1px dashed rgba(0,0,0,.2); }
.m svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 出どころ表示（assets/credit.js が足す）。
   **位置を決めておくこと。** この紙は flex なので、決めないと
   credit が列の1つとして左はしに並び、文字が切れて出る */
.print-sheet { position: relative; }
.sheet-credit {
  position: absolute; left: 8mm; bottom: 5mm; height: 3.5mm;
  display: flex; align-items: center; pointer-events: none;
}
.sheet-credit img { height: 100%; width: auto; display: block; }
/* **編集中の紙には出さない。刷るときと印刷プレビューにだけ出す**
   （利用者の指定・2026-10-31）。印刷プレビューの紙は .editing を持たない */
@media screen { .editing .sheet-credit { display: none; } }

/* ── 紙の上で作るための飾り（印刷には出さない）──────────
   **編集の道具は紙の寸法を変えないこと。** ことばの入力欄は
   マスの上に重ねて置き、位置取りから外してある（absolute）。
   並びに入れると、画面と刷った紙で列の高さが変わる */
.editing .col { position: relative; }
.editing .ill { position: relative; cursor: pointer; }
/* 空の枠の案内。**枠からはみ出さないように**、＋と文を縦に積み、
   文は2行まで折り返す（利用者の指摘・2026-10-18） */
.plus {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1mm;
  padding: 2mm; text-align: center; color: #c9b9a2; line-height: 1;
  /* **字の大きさは列の幅について決める**（利用者の指摘・2026-10-31）。
     mm で決め打ちにしていたため、列を細くすると文が枠からはみ出していた */
  font-size: clamp(3mm, calc(var(--ill) * .16), 8mm);
}
.editing .ill--empty { border-style: dashed; border-color: #cbbda6; }
.editing .ill:hover { background: #fbf8f1; }
.col-del {
  position: absolute; top: 1.5mm; right: 1.5mm; z-index: 5; width: 7mm; height: 7mm; line-height: 1;
  border-radius: 999px; border: 1px solid #d9cdb6; background: #fff; color: #8a7a68;
  font-size: 4mm; cursor: pointer; opacity: 0; transition: opacity .15s;
}
.editing .col:hover .col-del { opacity: 1; }
/* **マスに直接打つ。** 透明な入力欄をマスの列に重ねる。
   字はマス側が描くので、1字＝1マスでぴたりと合う */
.masu { position: relative; }
.tap {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3;
  opacity: 0; border: 0; padding: 0; margin: 0; font-size: 16px; cursor: text;
}
.m--ghost { border-style: dashed; border-color: #cbbda6; }
/* **なぞり「なし」のときの控え。** マスは空のまま（刷り上がりと同じ）にして、
   入力した字は列の右横にふりがなのように出す。位置取りに入れない（absolute）ので、
   紙の寸法は変わらない（利用者の指定・2026-10-18） */
/* **なぞり「なし」のときの控え。** マスは空のまま（刷り上がりと同じ）にして、
   入力した字を**マスの右上に小さく**置く。枠の外へ出すと隣の列と重なる
   （利用者の指摘・2026-10-18）。画面だけの表示で、紙には出ない。
   **字形はなぞりと同じ輪郭を使う**（フォントの有無に左右されない） */
.minich {
  position: absolute; top: 0.6mm; right: 0.8mm; z-index: 2;
  width: calc(var(--cell) * 0.22); height: calc(var(--cell) * 0.22);
}
.minich svg { width: 100%; height: 100%; display: block; }
.minich svg path { fill: #3a7fd5; opacity: 1; }
.m.bad .minich svg path { fill: #c0392b; }
/* 使えない字（漢字・英数字など）。**何が入っているかは見せる**。
   字形データが無いので画面用の字で赤く出す。この列は紙に出ない */
.rawch {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: calc(var(--cell) * 0.55); color: #c0392b; line-height: 1;
}
/* 列に添える赤い知らせ（印刷には出ない） */
.col-error {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 20px; white-space: nowrap; z-index: 6;
  background: #fdf1ef; border: 1px solid #e3b4ac; color: #b5382a;
  border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700;
  font-family: "M PLUS Rounded 1c", sans-serif;
  box-shadow: 0 1px 3px rgba(92,68,51,.12);
}
/* 打っている間だけ、マスの中に出す下書きの字（なぞりと同じ字形・色は青） */
.m--draft svg path { fill: #3a7fd5; opacity: .45; }

.m.bad { border-color: #c0392b; }
.m.bad .typed { color: #c0392b; }
/* **縦書きなのでカーソルは水平の線**。次の字が入るマスの上辺に出す */
.caret {
  position: absolute; left: 15%; right: 15%; top: 6%; height: 2.5px; z-index: 4;
  background: #5aa454; border-radius: 2px; animation: caret-blink 1.1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
/* 打ち終わりの次のマス。位置取りに入れない（紙の寸法を変えないため） */
.ghost {
  position: absolute; top: 100%; left: 0; width: var(--cell); height: var(--cell);
  border: 1px dashed #cbbda6;
}

/* 指示文はその場で書き替える */
.editing .instr { outline: 1px dashed transparent; outline-offset: 2px; }
.editing .instr:hover, .editing .instr:focus { outline-color: #cbbda6; }
.editing .instr:empty::before { content: attr(data-ph); color: #cfc3b0; }

/* ── 常設の空き列（いちばん左）。打つ／落とすと本物の列になる ── */
/* **本物の列と見分けがつくようにする**（利用者の指摘・2026-10-30）。
   薄くするだけだと、ページがちょうど埋まったときに「最後の列」に見え、
   印刷に出ないことが分からなかった。点線の枠と「＋」だけを見せ、
   画像の枠とマスは隠す（押せる・落とせるように、場所は残して透明にする）。
   打ち始めたら（入力欄に入ったら）ふつうのマスを見せる */
.editing .col--ghost { align-self: stretch; border-radius: 4px;
  outline: 1.5px dashed #cbbda6; outline-offset: 6px; cursor: pointer; }
.editing .col--ghost:hover { outline-color: #5aa454; background: rgba(90,164,84,.05); }
.editing .col--ghost:not(:focus-within) > * { opacity: 0; }
.editing .col--ghost:not(:focus-within)::after {
  content: "＋"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  font-size: calc(28px * var(--inv, 1)); line-height: 1; color: #b5a68c; }
.editing .col--ghost:not(:focus-within):hover::after { color: #5aa454; }

/* ── 列の道具（触っている列にだけ出す）─────────────
   **寸法は px。** mm にすると画面のズームで縮み、札の字が折れる
   （利用者の指摘・2026-10-18） */
/* **列の幅に収める。** はみ出すと隣の列に重なり、隣の道具が押せなくなる
   （実際にそうなった・2026-10-18）。収まらない分は2段に折り返す */
.col-tools {
  position: absolute; right: 4px; top: 4px;
  display: flex; gap: 4px; z-index: 6; max-width: var(--ill);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.col:hover .col-tools, .col:focus-within .col-tools, .col--sel .col-tools,
.col-tools:has([aria-expanded="true"]) { opacity: 1; pointer-events: auto; }

/* 「⋯」は**倍率に関係なく同じ大きさ**（--inv は 1÷倍率。紙の zoom を打ち消す）。
   丸ボタンを並べていたころは、紙といっしょに縮んで小さすぎた（2026-10-30） */
.col-tools .col-more {
  width: calc(30px * var(--inv, 1)); height: calc(30px * var(--inv, 1));
  border-width: calc(1px * var(--inv, 1));
  box-shadow: 0 calc(1px * var(--inv, 1)) calc(4px * var(--inv, 1)) rgba(92,68,51,.2);
}
.col-tools .col-more svg { width: calc(18px * var(--inv, 1)); height: calc(18px * var(--inv, 1));
  fill: currentColor; stroke: none; }
.col-tools .col-more[aria-expanded="true"] { background: #eef7ec; border-color: #5aa454; color: #3f6b38; }
.col-tools button {
  position: relative; width: 20px; height: 20px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e0d6c3; background: rgba(255,255,255,.95); border-radius: 999px;
  color: #6b5a47; cursor: pointer; box-shadow: 0 1px 3px rgba(92,68,51,.16);
  transition: background .12s, color .12s, border-color .12s;
}
.col-tools button svg {
  width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.col-tools button:hover { background: #f1f8ef; border-color: #a9c9a2; color: #3f6b38; }
/* **削除だけ赤。** 取り返しのつかない操作は色で分ける */
.col-tools button.danger:hover { background: #fdf1ef; border-color: #e3b4ac; color: #b5382a; }
/* 「画像を削除」は、画像のアイコンに斜線を重ねる */
/* ── マスの数を直接いじる持ち手（印刷には出ない）────────
   **マスの端に置く。** 数字を上げ下げする小さな札より、
   増える場所・減る場所がそのまま分かる */
.cell-more, .cell-less {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 22px; height: 22px; border-radius: 999px; padding: 0;
  border: 1px solid #d9cdb6; background: #fff; color: #6b5a47;
  font: inherit; font-size: 13px; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 3px rgba(92,68,51,.16);
  opacity: 0; pointer-events: none; transition: opacity .12s;
}
.cell-more { bottom: -11px; }
.cell-less { bottom: calc(var(--cell) - 11px); }
.col:hover .cell-more, .col:focus-within .cell-more,
.col:hover .cell-less, .col:focus-within .cell-less { opacity: 1; pointer-events: auto; }
.cell-more:hover { background: #f1f8ef; border-color: #a9c9a2; color: #3f6b38; }
.cell-less:hover { background: #fdf1ef; border-color: #e3b4ac; color: #b5382a; }

.col-tools .slash {
  position: absolute; left: 4px; right: 4px; top: 50%; height: 1.6px;
  background: currentColor; transform: rotate(-45deg); border-radius: 2px;
}

/* はじめて開いた人への案内（一度でも触ると出さない） */
.plus em { display: block; font-style: normal; line-height: 1.25;
  font-size: clamp(2mm, calc(var(--ill) * .085), 3.4mm); }
.plus em i {
  display: block; font-style: normal; line-height: 1.3;
  font-size: clamp(1.8mm, calc(var(--ill) * .065), 2.6mm);
  color: #d3c6b2; margin-top: 1mm;
}
/* 案内を出すときは ＋ を小さくして、文の場所を空ける */
.plus:has(em) { font-size: clamp(2.5mm, calc(var(--ill) * .12), 6mm); }
/* **狭い列では、読めない大きさまで縮める前に案内を減らす**。
   字だけ小さくしていくと、枠の中で2〜3行に折れて読めなくなる。
   細い列（30mm 未満）は「画像を追加」だけ、もっと細い列（24mm 未満）は ＋ だけ */
.sheet--narrow .plus em i { display: none; }
.sheet--tiny .plus em { display: none; }
.sheet--tiny .plus:has(em) { font-size: clamp(3mm, calc(var(--ill) * .16), 8mm); }

/* ドラッグしている間だけ、絵の受け口を光らせる（ふだんは何も出さない） */
.dropping .ill { border-color: #5aa454; border-style: dashed; background: #f3f9f1; }
.dropping .ill::after {
  content: "ここにドロップ"; position: absolute; inset: auto 0 1.5mm 0;
  text-align: center; font-size: 3mm; color: #4e8c47;
}
.dropping .ill img { opacity: .35; }
.dropping .drop.over, .drop.over { border-color: #5aa454; background: #eef7ec; }
.guide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 3.4mm; line-height: 1.4; color: #c9b9a2; text-align: center;
}

/* 絵をつけない紙。マスは紙の上から始まる */
.col--noill .masu { margin-top: 0; }

/* 問題がまだ無いとき */
.placeholder { margin: auto; color: #a89883; font-size: 5mm; }

/* ── 画像のテンプレート（全画面の手前）──────────── */
.lib {
  position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(60,45,35,.42); backdrop-filter: blur(2px);
}
.lib[hidden] { display: none; }
.lib-box {
  width: min(1040px, 100%); height: min(760px, 90vh);
  background: #fff; border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(60,45,35,.3);
}
.lib-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid #f0e8d9;
}
.lib-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: #5c4433; white-space: nowrap; }
.lib-head input[type="search"] {
  flex: 1; min-width: 120px; border: 1px solid #d9cdb6; border-radius: 999px;
  padding: 9px 14px; font: inherit; font-size: 14px;
}
.lib-head input[type="search"]:focus { outline: 2px solid #a9c9a2; outline-offset: -1px; }
.lib-close {
  width: 34px; height: 34px; border-radius: 999px; border: 1px solid #e0d6c3;
  background: #fff; font-size: 18px; color: #8a7a68; cursor: pointer;
}
.lib-close:hover { background: #f6f2ea; }
.lib-body { flex: 1; display: flex; min-height: 0; }
/* 行のレール（押すとその行へ飛ぶ。いま見ている行が光る） */
.lib-rail {
  width: 56px; flex-shrink: 0; border-right: 1px solid #f0e8d9;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 0; overflow: auto;
}
.lib-rail button {
  width: 36px; height: 36px; border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: 15px; font-weight: 700; color: #8a7a68; cursor: pointer;
}
.lib-rail button:hover { background: #f4f8f2; color: #3f6b38; }
.lib-rail button.on { background: #5aa454; color: #fff; }
.lib-grid { flex: 1; overflow: auto; padding: 4px 16px 20px; scroll-behavior: smooth; }
/* 行の見出しは貼り付く（どこを見ているか分かるように） */
.lib-grid h3 {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 10px 2px 8px;
  background: linear-gradient(#fff 72%, rgba(255,255,255,0));
  font-size: 13px; font-weight: 800; color: #8a7a68;
}
.lib-cards {
  display: grid; gap: 10px; padding-bottom: 10px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.lib-card {
  border: 1px solid #eadfcc; border-radius: 12px; background: #fff; padding: 8px;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: inherit; transition: transform .12s, box-shadow .12s, border-color .12s;
}
.lib-card img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.lib-card span { font-size: 13px; color: #5c4433; font-weight: 700; }
.lib-card:hover { transform: translateY(-2px); border-color: #a9c9a2; box-shadow: 0 6px 16px rgba(92,68,51,.14); }
.lib-card:focus-visible { outline: 2px solid #5aa454; outline-offset: 2px; }
.lib-empty { color: #8a7a68; font-size: 14px; padding: 24px 4px; }

/* ── ズームバー ───────────────────────────── */
.zoom-bar {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; z-index: 50;
  background: rgba(255,255,255,.95); border: 1px solid #eadfcc; border-radius: 999px;
  padding: 6px 12px; box-shadow: 0 2px 10px rgba(92,68,51,.12);
}
.zoom-btn, .zoom-reset {
  appearance: none; border: 1px solid #d9cdb6; background: #fff; border-radius: 999px;
  width: 32px; height: 32px; font: inherit; cursor: pointer; color: #5c4433;
}
.zoom-reset { width: auto; padding: 0 12px; }
.zoom-slider { width: 160px; }

/* ── 印刷 ─────────────────────────────────────────────────
   **この節はスタイルシートの末尾に置く。** 途中に置くと、後ろにある
   `.print-sheet` の指定に上書きされて効かなくなる（全単元で同じ決まり）。

   Safari で「紙が A4 からはみ出す」と報告された（利用者の指摘・2026-10-20）。
   原因と直しは BACKLOG.md「印刷で白紙のページが出る（2026-08-31・全18単元）」
   と同じ3つ。1枚しか作れなかったうちは表に出ていなかった:

   1. **印刷は block で流す。** 紙を包む箱が flex のままだと、用紙に
      入りきらないときにページをまたいで分割されず、紙まるごとはみ出す
   2. **改ページは包む箱（.page-slot）が持つ。** 紙そのものに付けると
      最後に空のページが増える
   3. **紙面ちょうど（210mm）だと高さが整数pxへ切り上がり**、わずかに
      はみ出して中身の無いページが挟まる。0.2mm だけ低くする */
@media print {
  body { background: #fff; }
  .ill { border: 0 !important; }
  .print-sheet {
    box-shadow: none;
    /* 画面の倍率を持ち込むと紙の寸法が狂う */
    zoom: 1 !important;
    height: 209.8mm !important;
    overflow: hidden !important;
    page-break-after: auto !important;
    break-after: auto !important;
  }
  /* **画面の部品は必ず消す。** block で流すと、消し忘れた部品が紙の「上」に
     積まれて紙を押し下げ、下がはみ出して次のページができる */
  .top-btns, .zoom-mini, .panel, .page-nav, .page-add-end,
  .no-print { display: none !important; }
  /* **包む箱は印刷用に戻しきる。** display だけ直しても、画面用の高さ・
     はみ出し・余白が残っていると紙が切れたり、余白のぶん空ページが増える */
  html, body, .app, .sheet-wrapper, .sheets, .page-slot, .preview-area {
    display: block !important; height: auto !important; overflow: visible !important;
    padding: 0 !important; margin: 0 !important; gap: 0 !important;
  }
  .page-slot { break-after: page; page-break-after: always; }
  .page-slot:last-child { break-after: auto; page-break-after: auto; }
  /* 作る画面からそのまま刷ったとき用。空き列と、指示文の空欄の案内は紙に出さない */
  .col--ghost { display: none !important; }
  .editing .instr:empty::before { content: none !important; }
}

/* ── 選んだ列（枠と、入れ替えの矢印）──────────────
   矢印は列の**縦の真ん中の左右**に出す。道具の並びに入れていたころは
   小さくて見にくかった。36px にしたら今度は大きすぎたので 28px（どちらも
   利用者の指摘・2026-10-30）。寸法は px */
.editing .col.col--sel { outline: 2px solid #5aa454; outline-offset: 6px; border-radius: 4px; }
/* **枠は紙の縦いっぱいに取る**（マスの数で長さが変わらないように。
   利用者の指定・2026-10-30）。本体を紙の高さまで伸ばし、選んだ列だけ
   その高さに合わせる。列の中身は上から並ぶので、置き場所は変わらない。
   矢印もこの高さの真ん中に来る */
.editing .body { align-self: stretch; }
.editing .col.col--sel { align-self: stretch; }
.col-move { position: absolute; left: 0; right: 0; top: 50%; height: 0; z-index: 8;
  pointer-events: none; }
.col-move .mv {
  position: absolute; top: 0; transform: translateY(-50%);
  width: calc(28px * var(--inv, 1)); height: calc(28px * var(--inv, 1));
  padding: 0; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; pointer-events: auto;
  background: #fff; border: calc(2px * var(--inv, 1)) solid #5aa454; color: #3f6b38;
  box-shadow: 0 2px 6px rgba(63,107,56,.25); transition: background .12s, transform .12s;
}
.col-move .mv:hover { background: #eef7ec; }
.col-move .mv:active { transform: translateY(-50%) scale(.94); }
.col-move .mv svg { width: calc(16px * var(--inv, 1)); height: calc(16px * var(--inv, 1));
  fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* 枠の外側へ半分はみ出させる（枠の線の上に乗る位置） */
.col-move .mv-left  { left: calc(-22px * var(--inv, 1)); }
.col-move .mv-right { right: calc(-22px * var(--inv, 1)); }
@media print { .col.col--sel { outline: none; } .col-move { display: none; } }

/* ── 列のメニュー（「⋯」で開く）──────────────────
   **紙の外（body の直下）に出す**ので、紙の倍率に縮められない。
   文字つきで、押しやすい大きさにする */
.col-menu {
  position: fixed; z-index: 70; min-width: 190px; padding: 6px;
  background: #fff; border: 1px solid #e0d6c3; border-radius: 12px;
  box-shadow: 0 10px 28px -8px rgba(92,68,51,.35);
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
}
.col-menu[hidden] { display: none; }
.col-menu button {
  appearance: none; display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: none; border-radius: 8px; padding: 10px 12px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: #5c4433; text-align: left;
}
.col-menu button:hover, .col-menu button:focus-visible { background: #f1f8ef; color: #3f6b38; outline: none; }
.col-menu button.danger { color: #b5382a; }
.col-menu button.danger:hover, .col-menu button.danger:focus-visible { background: #fdf1ef; color: #b5382a; }
.col-menu .ic { position: relative; width: 20px; height: 20px; flex: none; }
.col-menu .ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.col-menu .ic .slash { position: absolute; left: 50%; top: -1px; bottom: -1px; width: 2px;
  background: currentColor; transform: translateX(-50%) rotate(45deg); border-radius: 1px; }
@media print { .col-menu { display: none !important; } }

/* 押せない段（列が多くて入りきらない大きさ）は薄くする。理由は title で出す */
/* 列の数（最大）。紙の絵のボタンを横に並べる（入る列の数を絵で見せる） */
.size-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.size-btn { appearance: none; font: inherit; cursor: pointer; padding: 6px 4px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: #fff; border: 1.5px solid #e8dfcd; border-radius: 8px; color: #5c4433; }
.size-btn svg { width: 100%; max-width: 46px; height: auto; display: block; }
.size-btn span { font-size: 12px; font-weight: 700; line-height: 1; }
.size-btn .sz-paper { fill: #fff; stroke: #b5a68c; stroke-width: 1; }
.size-btn .sz-band { fill: none; stroke: #cbbda6; stroke-width: .6; }
.size-btn .sz-cols rect { fill: #e9e1d2; }
.size-btn:hover { border-color: #5aa454; }
.size-btn.active { border-color: #4e9148; background: #f1f8ef; color: #3f7a3a; }
.size-btn.active .sz-cols rect { fill: #5aa454; }
.size-btn.active .sz-paper { stroke: #4e9148; }
/* 入りきらない段。押せないが、理由の説明は出す（マウスが乗るように disabled にしない） */
.size-btn[aria-disabled="true"] { cursor: not-allowed; }
.size-btn[aria-disabled="true"] > * { opacity: .35; }   /* 説明の吹き出しは薄くしない */
/* 説明はパネルからはみ出さないよう、左の2つは左はし、右の2つは右はしにそろえる */
.size-btn:nth-child(-n+2)[data-tip]:hover::after { left: 0; transform: none; }
.size-btn:nth-child(n+3)[data-tip]:hover::after { left: auto; right: 0; transform: none; }
.size-btn[aria-disabled="true"]:hover { border-color: #e8dfcd; }