:root{
  --ink:#1f2933;--muted:#697386;--line:#d7dde8;
  --accent:#356f9e;--accent-strong:#285979;
  --answer:#eaf2f8;--paper:#fff;--desk:#eef2f5;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--desk);
  font-family:"BIZ UDPGothic","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif}
.toolbar{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:center;padding:12px 16px;background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(31,41,51,.08)}
button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);
  font:inherit;font-weight:700;cursor:pointer}
button.primary{border-color:var(--accent);background:var(--accent);color:#fff}
button.primary:hover{background:var(--accent-strong)}
button:hover{border-color:var(--accent)}
.screen-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;
  min-height:calc(100vh - 61px);padding:18px}
.sheet{position:relative;flex:none;width:210mm;height:297mm;padding:10mm 11mm 9mm;overflow:hidden;
  background:var(--paper);box-shadow:0 8px 32px rgba(31,41,51,.16);
  break-after:page;page-break-after:always}
.sheet:last-child{break-after:auto;page-break-after:auto}
.sheet-header{display:grid;grid-template-columns:1fr auto;gap:5mm;align-items:end;height:27mm;
  padding-bottom:4mm;border-bottom:1px solid var(--ink)}
h1{margin:0;font-size:19pt;font-weight:800;line-height:1.12}
.subhead{margin-top:1.7mm;color:var(--muted);font-size:8.8pt;line-height:1.3}
.meta{display:grid;grid-template-columns:15mm 13mm 4mm 13mm 4mm;row-gap:2.2mm;
  align-items:end;font-size:9.5pt;white-space:nowrap}
.meta-line{height:5.2mm;border-bottom:1px solid var(--ink)}
.meta-line-wide{grid-column:span 3}
.answer-mark{display:grid;place-items:center;min-width:40mm;min-height:17mm;
  border:1px solid var(--ink);font-size:18pt;font-weight:800}
.sheet-body{height:248mm;padding-top:5mm}
.standard-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:9mm;height:100%}
.standard-column{display:grid;min-width:0;min-height:0}
.problem-row{display:grid;grid-template-columns:9mm 1fr;gap:2mm;align-items:center;
  min-width:0;min-height:0;border-bottom:1px solid color-mix(in srgb,var(--accent) 10%,#fff)}
.num{color:var(--muted);font-size:8.7pt;line-height:1;text-align:right}
.expr{display:flex;align-items:center;min-width:0;font-size:15pt;font-weight:700;white-space:nowrap}
.blank,.answer-value{display:inline-flex;align-items:center;justify-content:center;min-width:16mm;height:7.6mm;
  padding:0 2mm;border-radius:2px;vertical-align:middle}
.blank{border:1.7px solid var(--ink);background:#fff}
.answer-value{border:1.2px solid var(--muted);background:var(--answer);font-size:13.5pt;font-weight:800}
.op{display:inline-flex;align-items:center;justify-content:center;margin:0 1.1mm}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:4mm 6mm;height:100%}
.task-card{min-width:0;border:1px solid var(--line);border-radius:3mm;padding:3.5mm;background:#fff}
.task-card.answer{background:color-mix(in srgb,var(--answer) 45%,#fff)}
.task-title{margin:0 0 2.4mm;font-size:11pt;font-weight:800;line-height:1.3}
.token-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.2mm}
.token{display:grid;place-items:center;min-height:11mm;border:1.3px solid var(--ink);border-radius:999px;
  background:#fff;font-size:13pt;font-weight:800}
.token.correct{border:2px solid var(--accent);background:var(--answer);color:var(--accent-strong)}
.section-label{display:flex;align-items:center;gap:2mm;margin:0 0 3mm;padding:2mm 3mm;
  border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff);
  font-size:12pt;font-weight:800}
table{width:100%;border-collapse:collapse}
th,td{border:1px solid var(--line);padding:2mm;text-align:center}
th{background:color-mix(in srgb,var(--accent) 10%,#fff);font-weight:800}
.small-note{color:var(--muted);font-size:8pt;line-height:1.4}
@media(max-width:860px){.screen-wrap{align-items:start;overflow-x:auto}}
@page{size:A4 portrait;margin:0}
@media print{
  html,body{width:210mm;background:#fff}
  .toolbar{display:none!important}
  .screen-wrap{display:block;min-height:0;padding:0}
  .sheet{width:210mm;height:297mm;margin:0;padding:10mm 11mm 9mm;box-shadow:none;
    page-break-inside:avoid;break-inside:avoid}
  .sheet::after{content:attr(data-footer);position:absolute;right:6mm;bottom:2mm;
    color:var(--muted);font-size:7pt;font-weight:700;line-height:1;white-space:nowrap}
}