@charset "UTF-8";

:root{
  --ink:#1a1a1a;
  --line:#333;
  --faint:#bdbdbd;
  --bg:#eef1f5;
  --card:#fff;
  --accent:#2f6fd0;
  --accent2:#e8654a;
  --ok:#2e9e6b;
  --jp:"UD デジタル教科書体 N-R","UD Digi Kyokasho N-R","YuKyokasho Yoko","YuKyokasho","Hiragino Mincho ProN","Yu Mincho",serif;
  --ui:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ui);
  font-size:15px;
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

/* ---------- screen chrome ---------- */
.bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff;border-bottom:1px solid #d7dde5;
  padding:10px 18px;position:sticky;top:0;z-index:20;
}
.bar a.back{color:var(--accent);text-decoration:none;font-weight:600;white-space:nowrap}
.bar a.back:hover{text-decoration:underline}
.bar h1{font-size:18px;margin:0;font-weight:700}
.bar .sub{color:#7a848f;font-size:13px}

.panel{
  max-width:900px;margin:16px auto;padding:16px 18px;
  background:#fff;border:1px solid #d7dde5;border-radius:12px;
}
.panel h2{font-size:14px;margin:0 0 10px;color:#5b6672;letter-spacing:.04em}
.row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-bottom:12px}
.row:last-child{margin-bottom:0}
.row > label{display:inline-flex;align-items:center;gap:6px;font-size:14px}
select,input[type=number],input[type=text]{
  font:inherit;font-size:14px;padding:6px 8px;border:1px solid #c3ccd6;border-radius:8px;background:#fff;
}
input[type=number]{width:72px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid #c3ccd6;background:#fff;border-radius:999px;
  padding:6px 14px;font-size:14px;cursor:pointer;user-select:none;
}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

button{
  font:inherit;font-weight:600;cursor:pointer;
  border:1px solid #c3ccd6;background:#fff;border-radius:9px;padding:8px 16px;
}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover{filter:brightness(1.08)}
button.go{background:var(--accent2);border-color:var(--accent2);color:#fff}
button.go:hover{filter:brightness(1.08)}

.hint{font-size:13px;color:#7a848f;margin-top:10px}
.seed{font-variant-numeric:tabular-nums;color:#7a848f;font-size:13px}

/* ---------- sheet (A4) ---------- */
#out{padding:10px 0 60px}
/* 画面では実物の A4（210×297mm・余白18mm）として描く。印刷時は @page の余白に任せる */
.sheet{
  width:210mm;min-height:297mm;
  margin:0 auto 18px;padding:18mm;
  background:#fff;color:#000;
  box-shadow:0 2px 14px rgba(0,0,0,.13);
  position:relative;
  display:flex;flex-direction:column;
}
.sheet-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  border-bottom:2.2px solid #000;padding-bottom:3mm;margin-bottom:6mm;
}
.sh-l{min-width:0}
.sh-title{font-size:17pt;font-weight:700;letter-spacing:.02em;line-height:1.25}
.sh-note{font-size:9pt;color:#555;margin-top:1mm}
.sh-r{display:flex;gap:5mm;align-items:flex-end;white-space:nowrap;font-size:10pt}
.sh-r .fld{border-bottom:1.2px solid #000;display:inline-block;min-width:34mm;height:7mm}
.sh-r .fld.s{min-width:22mm}
.sh-body{flex:1}
.sh-foot{
  margin-top:6mm;padding-top:2mm;border-top:1px solid #bbb;
  display:flex;justify-content:space-between;font-size:8pt;color:#888;
}
.sheet.ans .sh-title::after{content:"　【こたえ】";font-size:12pt;color:#666}

/* answer visibility */
.ansonly{display:none}
body.show-ans .ansonly{display:block}
body.show-ans .sheet.ans{display:flex}
.sheet.ans{display:none}

/* ---------- print ---------- */
@page{size:A4 portrait;margin:18mm}
@media print{
  html,body{background:#fff}
  .noprint{display:none!important}
  #out{padding:0}
  /* 非表示の答えシートが末尾にあっても空白ページを作らないよう
     break-after ではなく break-before を使う */
  .sheet{
    width:auto;min-height:258mm;margin:0;padding:0;box-shadow:none;
    break-before:page;page-break-before:always;
  }
  .sheet:first-of-type{break-before:auto;page-break-before:auto}
  body:not(.show-ans) .sheet.ans{display:none!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- generic worksheet bits ---------- */
.qgrid{display:grid;gap:0}
.q{
  display:flex;align-items:baseline;gap:2.5mm;
  padding:3.2mm 2mm;border-bottom:1px dotted #c9c9c9;
  font-size:15pt;line-height:1.35;
}
.q .no{
  font-size:9pt;color:#666;min-width:8mm;flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.q .expr{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.blank{
  display:inline-block;min-width:16mm;border-bottom:1.6px solid #000;
  text-align:center;
}
.box{
  display:inline-block;width:9mm;height:9mm;border:1.6px solid #000;
  vertical-align:-2mm;text-align:center;line-height:9mm;font-size:13pt;
}
.aval{font-weight:700}

/* ---------- レベルバッジ ---------- */
.lvb{display:inline-flex;align-items:center;gap:2mm;vertical-align:middle}
.lvb-ring{
  width:14mm;height:14mm;border:0.6mm solid #000;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;background:#fff;flex:0 0 auto;
}
.lvb-ring img{width:86%;height:86%;object-fit:contain;display:block;margin-top:4%}
.lvb-stars{font-size:14pt;letter-spacing:.05em;line-height:1;font-family:var(--ui)}

/* ---------- 見出しの教科の札・バッジの並び ---------- */
.sheet-head.has-lv{justify-content:flex-start;align-items:center}
.sheet-head.has-lv .sh-l{flex:1}
.sh-tag{
  display:inline-block;font-size:10pt;font-weight:700;letter-spacing:.08em;
  color:#fff;background:var(--accent);border-radius:1.2mm;padding:.6mm 2.2mm;
  margin-right:2.5mm;vertical-align:.25em;
}