/* 試験用紙（画面・印刷共通。寸法はすべて mm）— 画面の見た目とは独立。ここは印刷結果そのもの */

/* ---------- 試験用紙（画面・印刷共通。寸法はすべて mm） ---------- */

.paper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--W);
  /* ページより少し低くする。Chrome と Safari で端の丸めが違い、ぴったりだと次のページに送られて端が切れる */
  height: calc(var(--H) - var(--slack, 1.2mm));
  padding: var(--pad-t, 10mm) var(--pad-x, 10mm) var(--pad-b, 22mm);
  overflow: hidden;
  background: #fff;
  color: #111;
  font-size: var(--f); /* --f ＝ 解答マスの大きさの基準。--tf ＝ 問題文の大きさ（--f 以下）。指定がなければ両方同じ */
  line-height: 1.3;
}

.paper-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.5mm 6mm;
  min-height: var(--head, 15mm);
  padding-bottom: 2mm;
  border-bottom: 0.4mm solid #111;
  font-size: 5mm;
}
.paper-title { font-size: 6.4mm; font-weight: 700; letter-spacing: 0.18em; }
.stamp {
  display: inline-block;
  margin-left: 4mm;
  padding: 0 2mm;
  border: 0.5mm solid #d33;
  border-radius: 1mm;
  color: #d33;
  font-size: 4.6mm;
  letter-spacing: 0.1em;
}
.paper-count { font-size: 4.2mm; color: #444; }
.paper-fields { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 1.5mm 6mm; margin-left: auto; font-size: 4.2mm; max-width: 100%; }
.paper-sub { font-size: 4.4mm; color: #333; }
.of-total { margin-left: 1mm; font-size: 4.2mm; white-space: nowrap; }
.paper-fields .field { display: inline-flex; align-items: baseline; gap: 1.2mm; white-space: nowrap; }
.fill { display: inline-block; width: 40mm; border-bottom: 0.3mm solid #111; }
.fill.short { width: 18mm; }
.paper.lang-en .paper-title { letter-spacing: 0.02em; font-size: 5.4mm; }
.paper.lang-en .paper-fields {
  flex-basis: 100%;
  justify-content: flex-end;
  margin-left: 0;
  flex-wrap: nowrap;
  font-size: 3.8mm;
  gap: 1.2mm 4mm;
}
.paper.lang-en .fill { width: 26mm; }
.paper.lang-en .fill.short { width: 18mm; }
.paper.lang-en .stamp { letter-spacing: 0.04em; font-size: 4mm; margin-left: 2mm; }

.paper-ins {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6mm 5mm;
  padding-top: 1.6mm;
  font-size: 3.9mm;
  line-height: 1.5;
  color: #222;
}
.ins-item { text-wrap: balance; } /* 長くて折り返すときも、「す）」だけが次の行に落ちないよう、行の長さをそろえる */
.ins-item b { margin-right: 1.5mm; }
.ins-item.stack { flex-basis: 100%; }
.ins-item.stack b { display: block; margin-right: 0; }

.paper-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 3mm; padding-top: 1.5mm; }
.paper-empty { margin: auto; color: #888; font-size: 4.4mm; }

/* 1段 = 右から左へ問題を並べる */
.tier {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
}
.tier + .tier { border-top: 0.25mm dashed #777; padding-top: 2mm; }

.q {
  flex: 0 0 calc(100% / var(--cols));
  min-width: 0;
  display: flex;
  flex-direction: row-reverse; /* 右＝問題文、左＝解答欄 */
  justify-content: flex-start;
  align-items: stretch;
  /* 問題文と解答欄のすき間・列の余白は、マスではなく文字に合わせる（マスを大きくしても、すき間は広げない） */
  gap: calc(0.35 * var(--tf, var(--f)));
  padding: 0 calc(0.3 * var(--tf, var(--f)));
  border-left: 0.3mm solid #999; /* 文が折り返して2列目に入っても、隣の問題との境目が分かるよう、線を少し濃く太く */
  overflow: hidden;
}
.tier .q:first-child { border-right: 0; }

.q-main {
  flex: none;
  font-size: var(--tf, var(--f)); /* 問題文の大きさ。中にある解答マス（□・方格）は、これに引きずられず --f で決める */
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.55;
  letter-spacing: 0.04em;
}
.q-no {
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 1.5em; height: 1.5em;
  margin-bottom: 0.55em;
  border: 0.3mm solid #111;
  border-radius: 50%;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1.4em;
  text-align: center;
  letter-spacing: 0;
}
.tcy { text-combine-upright: all; -webkit-text-combine: horizontal; }

/* 出題する語に線を引く（縦書きでは右側に線） */
.tgt {
  border-right: 0.3mm solid #111;
  padding-right: 0.08em;
  margin-right: 0.08em;
}
.mas-kanji { font-size: 1.4em; line-height: 1.15; }
.mas-yomi { font-size: 0.6em; color: #333; }

/* 線を引いた語 ＋ そのすぐ左横の答え欄（方格）。縦書きの列の中に、語と欄が横並びで入る */
.nb { white-space: nowrap; }
.tgt-col { display: block; }
.tgt-wrap {
  display: inline-flex;
  flex-direction: column;   /* 縦書きでは「列」方向＝右から左：語が右、欄が左 */
  align-items: flex-start;
  gap: 0.18em;
  min-height: calc(var(--n) * 1.25 * var(--f)); /* 欄の高さぶんは文の長さに数える（列の下端で欄がはみ出さないように）。欄はマスの大きさ --f で決まる */
  vertical-align: top;
}
.side {
  display: flex;
  flex-direction: column;
  align-items: center;
  writing-mode: horizontal-tb;
  padding-top: 0.15em;
}
.side .lineans { margin-left: 0; }
.side .kakko, .side .lineans { height: calc((var(--n) + 0.6) * 1.2em); }

/* なぞり書き：薄い字を上からなぞる */
.trace-ch {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  line-height: 1;
  color: #b9b9b9;
}

/* 例文穴埋めの四角 */
.box {
  position: relative;
  display: inline-block;
  font-size: var(--f); /* 問題文の中にあっても、マスの大きさは文字ではなく --f で決める */
  width: 1.25em; height: 1.25em;
  margin: 0.08em 0;
  border: 0.3mm solid #111;
  box-sizing: border-box;
  text-align: center;
  line-height: 1;
  vertical-align: middle;
  text-indent: 0;
  writing-mode: horizontal-tb;
}
.box .ans-ch { line-height: 1.05em; }
.box::before, .box::after { content: ""; position: absolute; background: #9db3c2; }
.box::before { left: 50%; top: 0; bottom: 0; width: 0.2mm; margin-left: -0.1mm; }
.box::after { top: 50%; left: 0; right: 0; height: 0.2mm; margin-top: -0.1mm; }
.is-answer .box::before, .is-answer .box::after { display: none; }
.hint-ruby { ruby-align: center; }
/* □の右に付く読みがなが、□の枠に重ならないように。Safari は□を Chrome より右（0.3字ぶん）に置いて重なるので、□を文字と同じ基準線にそろえ、読みがなの左に余白をとる */
.hint-ruby .box { vertical-align: baseline; }
.hint-ruby rt { font-size: 0.6em; color: #333; }
.hint-ruby-box rt { padding-left: calc(0.4 * var(--f)); } /* □が読みがなの土台のときだけ、読みがなを□の枠からずらす（送りがなの「借」のような、字だけが土台のときは詰める） */

/* 解答欄 */
.q-ans {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(1.75 * var(--tf, var(--f))); /* 問題番号の高さに合わせる位置決めなので、マスではなく文字に合わせる */
  writing-mode: horizontal-tb;
}
.cell {
  position: relative;
  display: block;
  font-size: var(--f); /* 問題文の中（線を引いた語の横）に置かれても、マスの大きさは --f で決める */
  width: 1.25em; height: 1.25em;
  margin-top: -0.3mm;
  border: 0.3mm solid #111;
  background: #fff;
  text-align: center;
  line-height: 1.2em;
}
/* 十字の補助線（印刷でも消えにくい実線） */
.cell::before, .cell::after { content: ""; position: absolute; background: #9db3c2; }
.cell::before { left: 50%; top: 0; bottom: 0; width: 0.2mm; margin-left: -0.1mm; }
.cell::after { top: 50%; left: 0; right: 0; height: 0.2mm; margin-top: -0.1mm; }
/* 解答用紙では補助線を消す（「二」が「三」に見えないように） */
.is-answer .cell::before, .is-answer .cell::after { display: none; }
.cell.practice { width: 1.25em; height: 1.25em; }
.ans-ch { color: #d22; font-weight: 700; }
.cell .ans-ch { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; line-height: 1; }
.box .ans-ch { display: block; }

.kakko, .lineans {
  display: block;
  position: relative;
  font-size: var(--f); /* 解答欄なので、問題文の中に置かれてもマスの大きさ --f で決める */
  width: 1.25em;
  height: calc((var(--n) + 1) * 1.2em);
  writing-mode: horizontal-tb;
}
.kakko::before, .kakko::after {
  content: "";
  position: absolute; left: 12%; right: 12%;
  height: 0.6em;
  border: 0.3mm solid #111;
}
.kakko::before { top: 0; border-bottom: 0; border-radius: 0.6em 0.6em 0 0; }
.kakko::after { bottom: 0; border-top: 0; border-radius: 0 0 0.6em 0.6em; }
.lineans { border-left: 0.3mm solid #111; margin-left: 0.6em; }
.q-ans.free-lines { flex-direction: row-reverse; align-items: stretch; }
.q-ans.free-lines .lineans { margin-left: 0.9em; }
.ans-vert {
  position: absolute; top: 0.6em; left: 0; right: 0;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  text-align: center;
  color: #d22;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.lineans .ans-vert { left: 0.15em; right: auto; top: 0; }

.free-ans {
  flex: 1 1 0;      /* 枠の高さの残りいっぱいを使い、はみ出す分は次の列へ折り返す */
  min-height: 0;
  display: block;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  color: #d22;
  font-weight: 700;
  line-height: 1.15;
}
.lineans.fill, .kakko.fill { flex: 1 1 0; min-height: 0; height: auto; }

.paper-brand {
  position: absolute;
  right: var(--pad-x, 10mm);
  bottom: var(--safe, 13mm); /* 家庭用プリンターの下端（約0.5インチ）より内側 */
  font-size: 3.4mm;
  letter-spacing: 0.12em;
  color: #333;
}

/* 送りがな：字数がわからない1つの長い枠（十字の補助線は付けない） */
.box.okuri-one { height: calc(var(--k, 2) * 1.25em); }
.box.okuri-one::before, .box.okuri-one::after { display: none; }
.box.okuri-one .ans-okuri {
  position: absolute; inset: 0.1em 0 0 0;
  -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; text-orientation: upright; line-height: 1.05;
  display: block; margin: 0 auto; width: 1.05em; color: #d22;
}

/* 種類が変わる最初の問題の上に付ける「ここから ○○」の札。札のある段は、全問の番号の高さをそろえる */
/* 札の文字は問題文の0.6倍。ただし用紙が細かくなっても読めるよう、2.4mm を下限にする（文字が2.8mm以下の極小の用紙では 0.6倍のまま） */
.tier.has-sec { --sec-f: max(calc(0.6 * var(--tf, var(--f))), min(2.4mm, calc((var(--tf, var(--f)) - 2.8mm) * 12))); }
.tier.has-sec .q { position: relative; padding-top: calc(2.6 * var(--sec-f) + 0.34 * var(--tf, var(--f))); }
.q-sec {
  position: absolute; top: 0.1em; left: 0; right: 0;
  writing-mode: horizontal-tb; white-space: nowrap;
  font-size: var(--sec-f); line-height: 1.15; font-weight: 700; text-align: center;
  border-bottom: 0.35mm solid #111; padding: 0 0.4mm 0.1em;
  overflow: hidden;
  letter-spacing: 0;
}

/* ---------- 筆順練習プリント（横書き。1字1行） ----------
   筆順データ：KanjiVG (Ulrich Apel) CC BY-SA 3.0 ／ 読みデータ：KANJIDIC2 (EDRDG) CC BY-SA 4.0
   --sg ＝ 大きい字の枠の一辺、--sc ＝ 練習マスの一辺、--sgap ＝ マスの間（すべて mm。JS が入れる） */

.paper-stroke { font-size: 4mm; }
.paper-stroke .paper-body { gap: 0; padding-top: 0; display: block; overflow: hidden; }
/* 見出しは「名前」とページ番号と1行に収める（A4縦の 190mm に入る大きさにする） */
.paper-stroke .paper-title { font-size: 5.8mm; letter-spacing: 0.1em; }
.paper-stroke .fill { width: 40mm; }

.s-lead { margin: 1.6mm 0 0; font-size: 3.5mm; line-height: 1.5; color: #333; }
.s-page { font-size: 4mm; color: #444; white-space: nowrap; }

.sentry {
  display: flex;
  align-items: flex-start;
  gap: 5mm;
  padding: 2.4mm 0;
  border-bottom: 0.25mm dashed #99a3b5;
  break-inside: avoid;
  page-break-inside: avoid;
}
/* ページ分けは JS が1行ずつ実測して決めるので、行の高さが「何番目か」で変わらないようにする
   （最後の行の下線だけは消す。高さは減る方向なので、はみ出しには働かない） */
.sentry:last-child { border-bottom: none; }

/* 大きい字＋赤い番号。田字格の補助線つき */
.s-glyph {
  position: relative;
  flex: 0 0 auto;
  width: var(--sg);
  height: var(--sg);
  box-sizing: border-box;
  border: 0.4mm solid #37465f;
  background: #fff;
}
.s-glyph i, .s-cell i { position: absolute; background: #c3ccdb; }
.s-glyph i.v, .s-cell i.v { left: 50%; top: 0; bottom: 0; width: 0.2mm; transform: translateX(-0.1mm); }
.s-glyph i.h, .s-cell i.h { top: 50%; left: 0; right: 0; height: 0.2mm; transform: translateY(-0.1mm); }
.s-glyph svg, .s-cell svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 字・学年・画数・読み */
.s-meta { flex: 0 0 var(--smeta); min-width: 0; font-size: 3.5mm; line-height: 1.6; }
.s-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1mm 1.6mm; }
.s-ch { font-size: 6.6mm; font-weight: 700; line-height: 1.1; }
.s-tag {
  display: inline-block; padding: 0.2mm 1.6mm; border-radius: 2mm;
  background: #5a6b8c; color: #fff; font-size: 2.9mm; line-height: 1.5; white-space: nowrap;
}
.s-yomi { margin-top: 1.2mm; }
.s-yomi > div { display: flex; gap: 1.4mm; }
.s-yomi .s-k { flex: 0 0 auto; color: #67707f; font-size: 2.9mm; padding-top: 0.3mm; }
.s-yomi .s-v { min-width: 0; }
.s-r { white-space: nowrap; }   /* 「さ（げる）」が行をまたいで切れないように */
.s-ok { color: #c0392b; }   /* 送りがな */
.s-more { color: #8a93a3; }

/* 練習欄：なぞり書き → 書き取り */
.s-prac { flex: 1 1 auto; min-width: 0; }
.s-prac > p { margin: 0 0 1.2mm; font-size: 2.9mm; color: #67707f; }
.s-cells { display: flex; flex-wrap: wrap; gap: var(--sgap); }
.s-cell {
  position: relative; flex: 0 0 auto;
  width: var(--sc); height: var(--sc);
  box-sizing: border-box;
  border: 0.3mm solid #37465f;
  background: #fff;
}

.s-credit {
  position: absolute;
  left: var(--pad-x, 10mm);
  bottom: var(--safe, 13mm);
  max-width: calc(100% - (var(--pad-x, 10mm) * 2) - 46mm);
  font-size: 2.5mm; line-height: 1.4; color: #444; letter-spacing: 0;
}

.paper-stroke .paper-empty { font-size: 4.4mm; }