/* Hanbi — printable A4 practice sheet. Always light: it is paper. */
:root { --ink: #1E1A16; --ink2: #6A6157; --verm: #C23B22; --grid-line: rgba(194,59,34,.6); --grid-guide: rgba(194,59,34,.45); color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: #E9E3D8; color: var(--ink); font: 13px/1.35 -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif; }
.bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: #F4EFE6; border-bottom: 1px solid rgba(30,26,22,.1); font-size: 16px; }
.bar a { color: var(--verm); }
.bar button { font: inherit; font-weight: 650; color: #fff; background: var(--verm); border: 0; border-radius: 999px; padding: 9px 20px; cursor: pointer; }
.bar :focus-visible { outline: 2px solid var(--verm); outline-offset: 3px; }
.page { width: 210mm; height: 297mm; margin: 16px auto; padding: 11mm 13mm 9mm; background: #fff; display: flex; flex-direction: column; overflow: hidden; }
.page header, .page footer { color: var(--ink2); font-size: 9pt; }
.page header { margin-bottom: 3mm; }
.page footer { margin-top: auto; }
.row { margin-bottom: 2.2mm; }
.lab { display: flex; align-items: center; gap: 2mm; height: 6.6mm; font-size: 9pt; white-space: nowrap; overflow: hidden; }
.lab b { font-size: 11pt; }
.strip { display: inline-flex; gap: .6mm; margin-left: auto; padding-left: 2mm; }
.strip svg { width: 5.4mm; height: 5.4mm; flex: none; }
.boxes { display: grid; grid-template-columns: repeat(9, 17mm); justify-content: space-between; }
.grid { width: 100%; height: auto; display: block; }
.g-fill { fill: #fff; }
.g-border { display: none; }
.g-fill { stroke: var(--grid-line); stroke-width: 10; }
.g-guide { stroke: var(--grid-guide); stroke-width: 7; stroke-dasharray: 36 36; fill: none; }
.g-diag { stroke: var(--grid-guide); stroke-width: 6; stroke-dasharray: 18 42; fill: none; }
.s-ink { fill: var(--ink); }
.s-trace { fill: #cfc8bf; }
.s-next1 { fill: var(--verm); }
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .bar { display: none; }
  .page { margin: 0; break-after: page; }
  .page:last-child { break-after: auto; }
}
@media screen and (max-width: 230mm) { .page { zoom: .45; } }