/* 計算プリントの 紙。work/sheets/engine.py の 紙と おなじ 組み（サイトの .band などと ぶつからない ように kp- を 付ける） */
.kp-page{box-sizing:border-box;width:210mm;height:296.5mm;padding:16mm;display:flex;flex-direction:column;gap:3.5mm;background:#fff;color:#23262b;font-family:"Klee One",serif;font-weight:600;position:relative;overflow:hidden;line-height:1.5;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.kp-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:5mm;align-items:center;border:2.2px solid var(--u);border-radius:6mm;padding:2mm 4mm 2mm 3mm;position:relative}
.kp-band::before{content:"";position:absolute;inset:0 0 auto;height:3.2mm;background:var(--u);border-radius:5mm 5mm 0 0}
.kp-mark{width:22mm;height:22mm;border-radius:5mm;background:var(--u);color:#fff;display:grid;place-items:center;margin-top:2mm;position:relative}
.kp-mark b{font-size:44pt;font-weight:600;line-height:1}
.kp-mark i{position:absolute;bottom:-2.6mm;left:50%;transform:translateX(-50%);font-style:normal;font-size:8pt;background:#fff;color:#23262b;border:1.4px solid var(--u);border-radius:9mm;padding:0 2mm;white-space:nowrap}
.kp-ttl{margin-top:2mm;display:grid;gap:1mm;min-width:0}
.kp-ttl small{font-size:9.5pt;color:#6b6f76;letter-spacing:.05em}
.kp-ttl h2{margin:0;font-size:18pt;font-weight:600;line-height:1.2;font-family:inherit;border:0;padding:0}
.kp-ttl span{font-size:10pt;color:#3b3f45}
.kp-who{display:flex;align-items:flex-end;gap:1mm;margin-top:2mm}
.kp-who img{width:22mm;height:22mm}
.kp-bubble{font-size:9.5pt;line-height:1.35;border:1.6px solid #23262b;border-radius:3mm;padding:1.5mm 2.5mm;margin-bottom:9mm;position:relative;white-space:nowrap}
.kp-bubble::after{content:"";position:absolute;right:-2.2mm;bottom:2.5mm;border:1.2mm solid transparent;border-left-color:#23262b}
.kp-meta{display:flex;gap:6mm;font-size:12pt;align-items:center}
.kp-meta div{display:flex;align-items:center;gap:2mm}
.kp-meta span{display:inline-block;border-bottom:1.4px solid #23262b;height:8mm}
.kp-q{display:flex;gap:2.5mm;align-items:center;font-size:16pt;margin:0}
.kp-q span{flex:none;width:10mm;height:10mm;border-radius:50%;background:var(--u);color:#fff;display:grid;place-items:center;font-size:14pt}
.kp-grid{display:grid;grid-template-columns:1fr 1fr;gap:5mm 8mm;padding-left:2mm}
.kp-c{display:flex;align-items:center;gap:3mm}
.kp-n{font-size:12pt;color:var(--u);width:6mm}
.kp-e{font-size:22pt;white-space:nowrap;text-align:right;width:calc(var(--d) * 4.6mm + 23mm)}
.kp-b{flex:none;width:18mm;height:18mm;border:2px solid #23262b;border-radius:1.5mm;display:grid;place-items:center;font-size:24pt;line-height:1}
.kp-ans .kp-b{color:#d4363a}
.kp-hint{display:flex;align-items:center;gap:4mm;margin-top:1mm;padding:2mm 4mm;border:1.6px dashed var(--u);border-radius:5mm;background:var(--ut)}
.kp-hint img{width:24mm;height:24mm;flex:none}
.kp-hint div{font-size:15pt;line-height:1.6}
.kp-hint b{display:block;color:var(--u);font-size:13pt;font-weight:600}
.kp-foot{margin-top:auto;display:grid;grid-template-columns:auto 1fr auto;gap:5mm;align-items:center;border-top:1.4px dashed #cfc9bf;padding-top:2.5mm}
.kp-hm{width:19mm;height:19mm;border:2px dashed var(--u);border-radius:50%;display:grid;place-items:center;font-size:8pt;color:var(--u);text-align:center;line-height:1.25}
.kp-site{font-size:9pt;color:#6b6f76;line-height:1.5}
.kp-site img{height:7mm;width:auto;display:block;margin:-1mm 0 0 -1mm}
.kp-qr{display:flex;align-items:center;gap:2mm;font-size:8.5pt;color:#6b6f76;text-align:right;line-height:1.35}
.kp-qr b{color:var(--u);font-weight:600}
.kp-qr svg{width:17mm;height:17mm;display:block;shape-rendering:crispEdges}
.kp-credit{font-size:6.3pt;line-height:1.35;color:#9aa0a6}
.kp-masu{--c:15mm;border-collapse:collapse;margin:1mm auto 0;table-layout:fixed}
.kp-masu-l{--c:20mm}
.kp-masu th,.kp-masu td{box-sizing:border-box;width:var(--c);height:var(--c);min-width:var(--c);padding:0;border:1px solid #23262b;text-align:center;font-weight:600;line-height:1;background:#fff;font-size:17pt}
.kp-masu th{background:var(--ut);font-size:19pt}
.kp-masu .kp-op{background:var(--u);color:#fff;font-size:22pt}
.kp-masu tr>:nth-child(5n+1){border-right-width:2px}
.kp-masu tr:nth-child(5n+1)>*{border-bottom-width:2px}
.kp-ans .kp-masu td{color:#d4363a}
/* 画面の 見本 */
#kp-print{display:none}
.kp-tool{scroll-margin-top:80px}
#kp-preview{display:grid;gap:16px;justify-items:center;min-width:0}
#kp-preview .kp-page{box-shadow:0 6px 20px rgba(58,46,43,.18)}
.kp-tool{display:grid;gap:var(--s2);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2);background:var(--cream)}
.kp-form{display:grid;gap:12px;grid-template-columns:1fr}
.kp-form[hidden]{display:none}
.kp-form label{display:grid;gap:4px;font-weight:700;min-width:0}
.kp-form select{font:inherit;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;color:var(--ink);width:100%}
.kp-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.kp-acts .btn-l{flex:1 1 200px;border:0;cursor:pointer;font:inherit;font-weight:900}
.kp-acts .btn-m{cursor:pointer;font:inherit;font-weight:700}
.kp-no{font-size:var(--f-s);color:var(--muted)}
@media (min-width:768px){.kp-form{grid-template-columns:2fr 1fr 1fr}}
/* 印刷: 紙だけを 出す */
@page{size:A4;margin:0}
@media print{
  html,body{margin:0!important;padding:0!important;background:#fff!important}
  body>*:not(#kp-print){display:none!important}
  #kp-print{display:block!important}
  #kp-print .kp-page{break-after:page;break-inside:avoid}
  #kp-print .kp-page:last-child{break-after:auto}
}