* { box-sizing: border-box; }
html, body { margin: 0; }

:root {
  --sheet-w: 210mm;
  --sheet-h: 297mm;
  --page-w: 190mm;
  --page-h: 276mm;
}

body {
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  background: #e8eaed;
  color: #202124;
}

/* ---------- 操作画面 ---------- */
#app { display: flex; height: 100vh; }

#sidebar {
  width: 420px;
  flex: none;
  background: #fff;
  border-right: 1px solid #dadce0;
  overflow-y: auto;
  padding: 12px 16px 40px;
}

#preview { flex: 1; overflow: auto; padding: 20px; }

h1 { font-size: 18px; margin: 4px 0 8px; }

h2 {
  font-size: 14px;
  margin: 18px 0 8px;
  padding-left: 8px;
  border-left: 4px solid #1a73e8;
}

button {
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #dadce0;
  background: #fff;
  border-radius: 6px;
  padding: 3px 8px;
}
button:hover { background: #f1f3f4; }

button.primary {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
  font-weight: bold;
  padding: 6px 14px;
}
button.primary:hover { background: #1765cc; }

input[type=text], input[type=date], select { font: inherit; font-size: 13px; padding: 3px 6px; }
#catalog-filter { width: 100%; margin-bottom: 6px; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; font-size: 13px; }
.muted { color: #5f6368; font-size: 12px; }
.status { font-size: 12px; color: #188038; min-height: 1.4em; }

.catalog-group summary { cursor: pointer; font-weight: bold; font-size: 13px; padding: 4px 0; }

.catalog-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 13px;
}
.catalog-item:hover { background: #f1f3f4; }
.catalog-item .name { flex: 1; }
.catalog-item .last { color: #5f6368; font-size: 11px; width: 4.5em; text-align: right; }
.catalog-item.done .name { color: #9aa0a6; text-decoration: line-through; }

.set-item {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  padding: 5px 6px;
  margin-bottom: 6px;
  background: #fff;
  font-size: 13px;
}
.set-item.dragging { opacity: 0.4; }
.set-item .handle { cursor: grab; color: #9aa0a6; padding: 0 4px; }
.set-item .name { flex: 1; }
.set-item input[type=number] { width: 48px; text-align: center; font: inherit; }
.set-item.unknown .name { color: #d93025; }

.preview-empty { color: #5f6368; text-align: center; margin-top: 80px; }

/* ---------- 用紙（画面上の見た目）と本文 ---------- */

/* 用紙1枚。画面では余白10mmを付けて実物に近く見せる */
.sheet {
  width: var(--sheet-w);
  height: var(--sheet-h);
  padding: 10mm;
  margin: 0 auto 16px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* 印刷される本文。余白10mmの内側に収まる大きさ */
.page {
  width: var(--page-w);
  height: var(--page-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #000;
}

/* 文字の種類 */
body.font-gothic .page {
  font-family: "BIZ UDPGothic", "BIZ UDPゴシック", "Hiragino Sans",
    "ヒラギノ角ゴシック", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
}
body.font-maru .page {
  font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN",
    "HG丸ｺﾞｼｯｸM-PRO", "BIZ UDPGothic", "Hiragino Sans", "Meiryo", sans-serif;
}
body.font-kyokasho .page {
  font-family: "UD デジタル 教科書体 NK-R", "UD Digi Kyokasho NK-R",
    "UDDigiKyokashoNK-R", "YuKyokasho Yoko", "游教科書体 横用",
    "Klee", "クレー", "Hiragino Sans", "Meiryo", sans-serif;
}

/* 日付・名前（タイトルの上の行） */
.page-meta {
  display: flex;
  align-items: flex-end;
  font-size: 10.5pt;
  margin-bottom: 1.5mm;
}
.page-meta .meta-name { margin-left: auto; }
.page-meta .name-line {
  display: inline-block;
  width: 45mm;
  border-bottom: 1px solid #000;
  margin-left: 2mm;
}

/* タイトルは改行しない（長いときは自動で文字を小さくする） */
.page-title {
  font-size: 17pt;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  border-bottom: 2px solid #000;
  padding-bottom: 1.5mm;
  margin-bottom: 2mm;
}

.page-instruction { font-size: 9.5pt; line-height: 1.35; margin-bottom: 3mm; }

.problems {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-auto-flow: column;
  column-gap: 8mm;
}

.item { display: flex; align-items: center; white-space: nowrap; overflow: hidden; min-height: 0; }

/* 問題番号と、帯分数に見えないための空白 */
.qno { width: 1.8em; flex: none; text-align: center; font-size: 0.85em; }
.qgap { width: 0.9em; flex: none; }

.expr { display: inline-flex; align-items: center; gap: 0.3em; }

/* 上下式の分数：分子の下線を分数線にする */
.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  line-height: 1.15;
}
.frac .n { border-bottom: 1.5px solid #000; padding: 0 0.2em; }
.frac .d { padding: 0 0.2em; }

.mixed { display: inline-flex; align-items: center; gap: 0.1em; }

.box {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  border: 2px solid #000;
  padding: 0.1em 0.35em;
  font-weight: bold;
}

.op { padding: 0 0.05em; }

/* 補足の小さい文字（例：「百の位まで」） */
.note-small { font-size: 0.7em; }

/* 図形など（今後の教材用）：文字サイズに合わせて伸び縮みする */
.figure { display: inline-block; vertical-align: middle; }
.figure svg { display: block; }

/* ---------- 印刷 ---------- */
@media print {
  body { background: #fff; }
  #sidebar { display: none !important; }
  #app { display: block; height: auto; }
  #preview { padding: 0; overflow: visible; }
  .preview-empty { display: none; }

  /* 余白は @page で付けるので、用紙の枠は外す */
  .sheet {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    box-shadow: none;
    overflow: visible;
    break-after: page;
    page-break-after: always;
  }
  .sheet:last-child { break-after: auto; page-break-after: auto; }
}

#sidebar { width: 500px; }
.item { padding-right: 4px; }
.expr { max-width: 100%; }
.blank-space { display: inline-block; vertical-align: middle; }
.hole-box { display: inline-block; border: 1.5px solid #333; border-radius: 0.15em; box-sizing: border-box; vertical-align: middle; margin: 0 0.15em; }
.ans-bold, .box { border: none !important; font-weight: bold; padding: 0 0.2em; }
.expr.has-sub-note { display: inline-flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25em; white-space: nowrap !important; line-height: 1.35; }
.ans-sub-note { flex-basis: 100%; width: 100%; font-size: 0.68em; color: #444; margin-top: 0.1em; line-height: 1.28; white-space: normal; }
.diag-sheet-sections { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 4.5mm; min-height: 0; overflow: hidden; }
.diag-sec { border-top: 1px solid #bbb; padding-top: 2.2mm; }
.diag-sec:first-child { border-top: none; padding-top: 0; }
.diag-sec-title { font-size: 10.5pt; font-weight: bold; margin-bottom: 1.8mm; display: flex; align-items: baseline; gap: 6px; }
.diag-sec-goal { font-size: 8.5pt; font-weight: normal; color: #444; }
.diag-sec-problems { display: grid; grid-auto-flow: row !important; column-gap: 6mm; row-gap: 2.8mm; align-items: start; overflow: visible; }
.badge { display: inline-block; font-size: 10px; font-weight: bold; padding: 1px 5px; border-radius: 4px; line-height: 1.3; flex: none; }
.badge-基礎 { background: #e6f4ea; color: #137333; border: 1px solid #ceead6; }
.badge-標準 { background: #e8f0fe; color: #1967d2; border: 1px solid #d2e3fc; }
.badge-発展 { background: #fef7e0; color: #b06000; border: 1px solid #feefc3; }
.badge-diag { background: #f3e8fd; color: #7627bb; border: 1px solid #e9d2fd; }
.catalog-item-wrap { padding: 4px 6px; border-radius: 6px; }
.catalog-item-wrap:hover { background: #f1f3f4; }
.catalog-item { padding: 0; white-space: nowrap; }
.catalog-item .name { white-space: normal; line-height: 1.35; }
.catalog-item:hover { background: transparent; }
.catalog-goal { font-size: 11px; color: #5f6368; margin: 2px 0 0 28px; line-height: 1.3; }
.nav-box { background: #f8fafd; border: 1px solid #d2e3fc; border-radius: 8px; padding: 10px 12px; margin: 8px 0 14px; }
.nav-box-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; white-space: nowrap; }
.nav-box-title { font-size: 13px; font-weight: bold; color: #1967d2; white-space: nowrap; }
.nav-box-sub { font-size: 11px; color: #5f6368; white-space: nowrap; }
.nav-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.nav-grid-2 { display: grid; grid-template-columns: 1fr; gap: 6px; }
.nav-btn { font-size: 12px; padding: 5px 4px; border-radius: 6px; background: #fff; border: 1px solid #dadce0; text-align: center; white-space: nowrap; width: 100%; }
.nav-btn:hover { background: #e8f0fe; border-color: #1a73e8; color: #1967d2; }
.nav-btn.diag-primary { background: #7627bb; color: #fff; border-color: #7627bb; font-weight: bold; padding: 6px 8px; }
.nav-btn.diag-primary:hover { background: #5e1d96; }
.diag-panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #c6dafc; }
.diag-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 0; border-bottom: 1px solid #eee; font-size: 12px; }
.diag-item-name { flex: 1; line-height: 1.3; }
.diag-item-goal { display: block; font-size: 10.5px; color: #666; }
.diag-radios { display: flex; gap: 3px; flex: none; }
.diag-radios button { font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.diag-radios button.active-ok { background: #1e8e3e; color: #fff; border-color: #1e8e3e; }
.diag-radios button.active-warn { background: #f9ab00; color: #fff; border-color: #f9ab00; }
.diag-radios button.active-ng { background: #d93025; color: #fff; border-color: #d93025; }
.prescription-box { background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px; padding: 8px 10px; margin-top: 8px; font-size: 12px; }
.prescription-title { font-weight: bold; color: #b06000; margin-bottom: 4px; }
.prescription-list { margin: 4px 0; padding-left: 18px; line-height: 1.45; }