/* 印刷用ページ（白黒・A4 縦。英語のページは US Letter も選べる） */
:root { --ink: #111; --sub: #555; --line: #D9D6CE; --accent: #2F5D8A; --bg: #E9E7E1; color-scheme: light; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; font-size: 16px; line-height: 1.6; }
:root:lang(en) body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.bar { position: sticky; top: 0; z-index: 2; background: #FFFFFF; border-bottom: 1px solid var(--line); padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.bar h1 { font-size: 17px; margin: 0 8px 0 0; }
.bar label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.bar select { font: inherit; min-height: 40px; padding: 0 6px; border: 2px solid #858891; border-radius: 6px; background: #FFFFFF; color: var(--ink); max-width: 100%; }
.bar input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); }
.btn { appearance: none; font: inherit; font-weight: 700; min-height: 44px; padding: 0 18px; border-radius: 6px; border: 2px solid var(--accent); background: var(--accent); color: #FFFFFF; cursor: pointer; }
.btn.sub { background: #FFFFFF; color: var(--accent); }
.btn:disabled { opacity: .5; }
.note { width: 100%; margin: 0; color: var(--sub); font-size: 14px; }
.sheets { padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sheet { background: #FFFFFF; width: 210mm; max-width: 100%; min-height: 297mm; padding: 12mm; box-shadow: 0 2px 10px rgba(0,0,0,.15); display: flex; flex-direction: column; }
body.letter .sheet { width: 8.5in; min-height: 11in; }
.head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1.5px solid var(--ink); padding-bottom: 2mm; margin-bottom: 6mm; gap: 8mm; }
.head .t { font-size: 19px; font-weight: 700; }
.head .blank { font-size: 13px; white-space: nowrap; }
.head .blank span { display: inline-block; width: 38mm; border-bottom: 1px solid var(--ink); margin: 0 3mm 0 1mm; }
.rule { font-size: 13px; margin: -3mm 0 5mm; color: var(--ink); }
.grid { display: grid; gap: 8mm 10mm; justify-content: space-around; flex: 1; align-content: start; }
.q { break-inside: avoid; display: flex; flex-direction: column; align-items: flex-start; }
.q .cap { font-size: 13px; font-weight: 700; margin-bottom: 2mm; }
.q .cap span { font-weight: 400; color: var(--sub); margin-left: 3mm; }
.q .keys { font-size: 13px; margin-top: 2mm; max-width: 80mm; display: flex; flex-wrap: wrap; gap: 1.5mm 4mm; }
.q .kk { white-space: nowrap; font-size: 14px; }
.q .blank { display: inline-block; width: 7mm; height: 7mm; border: .3mm solid var(--ink); border-radius: .6mm; vertical-align: middle; margin-left: 1mm; }
.foot { font-size: 11px; color: var(--sub); text-align: right; margin-top: 4mm; }
.busy { color: var(--sub); padding: 24px; }

/* 筆算（board.js の形） */
.hissan { --cw: 9mm; display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); grid-template-rows: repeat(var(--rows), calc(var(--cw) * 1.1)); font-size: calc(var(--cw) * .62); line-height: 1; font-variant-numeric: tabular-nums; }
.hs-cell { position: relative; display: flex; align-items: center; justify-content: center; font-weight: 600; z-index: 1; }
.hs-sign { display: flex; align-items: center; justify-content: center; font-size: .9em; z-index: 1; }
.hs-line { align-self: start; border-top: .5mm solid var(--ink); margin-top: -.25mm; }
.hs-over { margin-left: 30%; }
.hs-bracket { display: flex; margin-left: 30%; color: var(--ink); }
.hs-bracket svg { width: 45%; height: 100%; overflow: visible; }
.hs-cell.box { border: .35mm solid var(--ink); margin: 1mm; border-radius: .6mm; }
.hs-cell.ans { color: #555; font-weight: 400; }
.letter .sym { font-weight: 600; font-size: .9em; }
.letter.given .sym { position: absolute; top: .5mm; left: .8mm; font-size: max(.32em, 8px); color: var(--sub); }

@page { size: A4 portrait; margin: 0; }
@media print {
  body { background: #FFFFFF; }
  .bar { display: none; }
  .sheets { padding: 0; gap: 0; display: block; }
  .sheet { box-shadow: none; width: 210mm; height: 297mm; min-height: 0; break-after: page; overflow: hidden; }
  body.letter .sheet { width: 8.5in; height: 11in; }
  .sheet:last-child { break-after: auto; }
}
@media (max-width: 820px) { .sheet { padding: 6mm; min-height: 0; } .hissan { --cw: 7mm !important; } }