/* ===== デザイントークン（暖色・紙質感） ===== */
:root {
  --color-paper: oklch(97.5% 0.012 88);
  --color-paper-2: oklch(94.5% 0.016 88);
  --color-paper-3: oklch(90.5% 0.019 86);
  --color-surface: oklch(99% 0.007 88);
  --color-ink: oklch(22% 0.018 64);
  --color-ink-2: oklch(34% 0.018 68);
  --color-muted: oklch(40% 0.016 72);
  --color-rule: oklch(78% 0.018 84);
  --color-rule-2: oklch(61% 0.021 78);
  --color-accent: oklch(43% 0.12 248);
  --color-accent-soft: oklch(91% 0.035 248);
  --color-success: oklch(42% 0.11 147);
  --color-success-soft: oklch(93% 0.035 147);
  --color-error: oklch(48% 0.17 28);
  --color-error-soft: oklch(94% 0.035 28);
  --color-focus: oklch(49% 0.17 248);

  --font-display: "Shippori Mincho", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --sheet-font: "Klee One", "Yu Gothic", serif;

  --radius-card: 0.5rem;
  --radius-input: 0.4rem;
  --radius-control: 0.35rem;
  --rule-hair: 1px;
  --shadow-whisper: 0 1px 2px rgba(30, 20, 10, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
}
button, input, select { font: inherit; }

/* ===== ヘッダー ===== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.75rem;
  padding: .9rem clamp(1rem, 3vw, 2.5rem);
  background: var(--color-surface);
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
  gap: 1rem;
}
.logo-container { display: flex; align-items: center; gap: .85rem; }
.logo-icon {
  width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 700;
}
.app-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}
.app-subtitle { margin: .1rem 0 0; font-size: .85rem; color: var(--color-muted); }
.app-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.app-nav a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .75rem;
  font-size: .82rem; font-weight: 500;
  color: var(--color-ink-2);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-control);
  text-decoration: none;
}
.app-nav a:hover { background: var(--color-paper-3); }
.app-nav a[aria-current="page"] { border-color: var(--color-ink-2); color: var(--color-ink); }

/* ===== レイアウト ===== */
.main-container {
  display: grid;
  grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1rem, 3vw, 2rem);
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.75rem);
}
@media (max-width: 1000px) {
  .main-container { display: flex; flex-direction: column; align-items: stretch; }
  .control-panel { max-width: 40rem; margin-inline: auto; width: 100%; }
  .preview-container { width: 100%; }
}
@media (max-width: 600px) {
  .preview-header { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ===== コントロールパネル ===== */
.control-panel {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-whisper);
  overflow: hidden;
}
.card {
  padding: 1.35rem 1.5rem;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.card:last-of-type { border-bottom: 0; }
.card-title {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.card-title::before {
  content: "";
  width: .5rem; height: .5rem; flex: 0 0 .5rem;
  background: var(--color-accent);
}

/* 折りたたみカード */
details.card { padding: 0; }
details.card > summary.card-title {
  padding: 1.35rem 1.5rem 1.1rem;
  margin: 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
details.card > summary.card-title::-webkit-details-marker { display: none; }
details.card > summary.card-title::after {
  content: "";
  width: .55rem; height: .55rem;
  margin-left: auto;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
details.card[open] > summary.card-title::after { transform: rotate(-135deg); }
details.card > .card-body { padding: 0 1.5rem 1.35rem; }

.form-group { margin-bottom: 1.1rem; }
.form-group:last-child { margin-bottom: 0; }
label { display: block; font-size: .85rem; font-weight: 500; color: var(--color-ink-2); margin-bottom: .4rem; }

select, input[type="text"], input[type="number"] {
  width: 100%;
  min-height: 2.6rem;
  padding: .5rem .7rem;
  color: var(--color-ink);
  background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  outline: 2px solid transparent;
  outline-offset: 1px;
}
select:focus, input:focus-visible {
  border-color: var(--color-ink-2);
  outline: 2px solid var(--color-focus);
}

.option-grid { display: grid; gap: .55rem; margin-bottom: 1.1rem; }
.option-grid:last-child { margin-bottom: 0; }
.check-row { display: flex; align-items: center; gap: .55rem; min-height: 1.8rem; margin: 0; cursor: pointer; font-size: .9rem; font-weight: 400; color: var(--color-ink-2); }
.check-row input { width: 1.1rem; height: 1.1rem; flex: 0 0 1.1rem; accent-color: var(--color-accent); cursor: pointer; }

.op-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--color-rule); }
.op-block[hidden] { display: none; }
.op-title { font-size: .82rem; font-weight: 700; color: var(--color-ink-2); margin-bottom: .6rem; }
.digits-wrap { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.digit-field { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 500; color: var(--color-muted); margin: 0; }
.digit-field select { width: auto; min-height: 2.15rem; padding: .3rem .5rem; font-size: .85rem; }
.rows-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.rows-row label { margin: 0; }
.rows-row select { width: auto; min-height: 2.15rem; padding: .3rem .5rem; font-size: .85rem; }

.help-text { font-size: .78rem; color: var(--color-muted); line-height: 1.5; margin-top: .5rem; }
.notice-text { font-size: .78rem; color: var(--color-accent); line-height: 1.5; margin-top: .5rem; }
.error { font-size: .82rem; color: var(--color-error); min-height: 1.1em; padding: 0 1.5rem; }
.error:empty { display: none; }

/* ===== ボタン ===== */
.btn-row { display: flex; flex-direction: column; gap: .65rem; padding: 1.35rem 1.5rem 1.5rem; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.85rem;
  padding: .7rem 1rem;
  color: var(--color-paper);
  background: var(--color-ink);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-control);
  font-size: .92rem; font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.btn:hover { background: var(--color-ink-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-secondary {
  color: var(--color-ink);
  background: var(--color-surface);
  border-color: var(--color-rule-2);
}
.btn-secondary:hover { background: var(--color-paper-3); }
.btn-print {
  color: #fff;
  background: var(--color-success);
  border-color: var(--color-success);
}
.btn-print:hover { background: oklch(from var(--color-success) calc(l - 0.06) c h); }
.btn-small {
  min-height: 2.15rem;
  padding: .4rem .7rem;
  font-size: .8rem;
}
.btn-danger {
  color: var(--color-error);
  background: var(--color-surface);
  border-color: var(--color-error-soft);
}
.btn-danger:hover { background: var(--color-error-soft); }

/* ===== プリセット・履歴・苦手管理 ===== */
.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem .6rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  margin-bottom: .5rem;
  font-size: .83rem;
}
.list-row:last-child { margin-bottom: 0; }
.list-row-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.list-row-title { font-weight: 600; color: var(--color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row-meta { font-size: .74rem; color: var(--color-muted); }
.list-row-actions { display: flex; gap: .35rem; flex: 0 0 auto; }
.list-empty { font-size: .82rem; color: var(--color-muted); padding: .3rem 0; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  font-size: .72rem; font-weight: 700;
  background: var(--color-error-soft); color: var(--color-error);
  border-radius: 999px;
}
.sync-status { font-size: .74rem; color: var(--color-muted); display: flex; align-items: center; gap: .35rem; }
.sync-status .dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--color-success); flex: 0 0 auto; }
.sync-status.offline .dot { background: var(--color-error); }

/* ===== プレビュー領域 ===== */
.preview-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; min-width: 0; }
.preview-header {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .35rem .1rem .75rem;
  border-bottom: var(--rule-hair) solid var(--color-rule-2);
}
.preview-title { font-size: .9rem; font-weight: 700; color: var(--color-ink-2); }
.preview-hint { font-size: .78rem; color: var(--color-muted); }

.a4-wrapper {
  width: 100%;
  max-width: 210mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8mm;
  padding: 4px 0 2rem;
}
.sheet {
  width: 210mm;
  min-height: 297mm;
  background: #fff;
  color: #1a1a1a;
  font-family: var(--sheet-font);
  padding: 12mm 12mm 10mm;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 12px 28px rgba(40, 28, 10, .18);
  display: flex;
  flex-direction: column;
}
.sheet-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 6px;
  margin-bottom: 8mm;
  gap: 12px;
}
.sheet-title { font-size: 20px; font-weight: 700; }
.sheet-badge { font-size: 12px; font-weight: 700; color: #b3401f; margin-left: 8px; }
.sheet-meta { font-size: 13px; color: #222; display: flex; gap: 18px; }
.sheet-meta .slot { border-bottom: 1px solid #999; min-width: 90px; display: inline-block; }

.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-auto-flow: row;
  gap: 4mm;
}
.cell {
  border: 1px solid #bbb;
  border-radius: 4px;
  padding: 4mm 3mm;
  display: flex;
  flex-direction: column;
}
.cell .no { font-size: 13px; font-weight: 700; color: #222; margin-bottom: 2mm; }
.cell .no.markable { cursor: pointer; padding: 1px 4px; border-radius: 3px; }
.cell .no.markable:hover { background: var(--color-error-soft); }
.cell.wrong { outline: 2px solid var(--color-error); outline-offset: -1px; background: var(--color-error-soft); }
.cell.wrong .no { color: var(--color-error); }
.cell .instruction { font-size: 11px; color: #555; margin-bottom: 1.5mm; }

/* 問題数が多いときはセル・文字を詰めてA4に収める */
.sheet[data-count="20"] .grid { gap: 3mm; }
.sheet[data-count="20"] .cell { padding: 3mm 2mm; }
.sheet[data-count="20"] .calc-grid, .sheet[data-count="20"] .div-dividend, .sheet[data-count="20"] .div-divisor, .sheet[data-count="20"] .div-spacer { font-size: 19px; }
.sheet[data-count="25"] .grid { gap: 2.5mm; }
.sheet[data-count="25"] .cell { padding: 2.5mm 2mm; }
.sheet[data-count="25"] .cell .no { margin-bottom: 1mm; }
.sheet[data-count="25"] .calc-grid, .sheet[data-count="25"] .div-dividend, .sheet[data-count="25"] .div-divisor, .sheet[data-count="25"] .div-spacer { font-size: 16px; }
.sheet[data-count="25"] .div-workspace { min-height: 6mm; }

/* 筆算本体 */
.calc {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2mm;
}
.calc-grid {
  display: grid;
  justify-content: end;
  font-family: inherit;
  font-size: 22px;
  line-height: 1.1;
}
.d {
  width: 1.1em;
  text-align: center;
  padding: 1px 0;
}
.d.dot { width: .5em; }
.op { font-weight: 700; }
.carry {
  height: 0.9em;
  border: 1px dotted #c0392b;
  border-radius: 2px;
  margin: 0 1px 1px;
}
.carry.empty { border: none; }
.ruled {
  border-bottom: 1px solid #1a1a1a;
  height: 0;
  margin-top: 2px;
}
.answer-box {
  height: 1.5em;
  margin-top: 3px;
  border: 1px dotted #999;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.answer-box.filled {
  border-style: solid;
  border-color: #b3401f;
  color: #b3401f;
  font-weight: 700;
}
.missing-box {
  border: 1px solid #999;
  border-radius: 2px;
  background: repeating-linear-gradient(135deg, #f4f0e8, #f4f0e8 3px, #fff 3px, #fff 6px);
}
.missing-box.filled {
  background: none;
  color: #b3401f;
  font-weight: 700;
  border-color: #b3401f;
}

/* わり算の筆算（ブラケット形式＋作業スペース） */
.division { align-items: flex-start; }
.div-quotient-row, .div-main-row { display: flex; align-items: flex-end; }
.div-spacer { font-size: 22px; visibility: hidden; padding-right: 4px; white-space: nowrap; }
.div-divisor { font-size: 22px; padding-right: 4px; }
.div-quotient-boxes { display: flex; gap: 2px; }
.div-quotient-boxes .qbox {
  width: 1.1em; height: 1.3em;
  border: 1px dotted #999; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.div-quotient-boxes .qbox.filled { border-style: solid; border-color: #b3401f; color: #b3401f; font-weight: 700; }
.div-bracket { border-top: 2px solid #1a1a1a; border-left: 2px solid #1a1a1a; padding: 2px 6px 0 6px; }
.div-dividend { font-size: 22px; letter-spacing: .25em; white-space: nowrap; }
.div-workspace { min-height: 12mm; width: 100%; }
.div-remainder-row { font-size: 13px; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.div-remainder-row .answer-box { width: 1.6em; height: 1.3em; margin-top: 0; }

/* ===== 印刷 ===== */
@page { size: A4 portrait; margin: 0; }
@media print {
  body { background: #fff; }
  .app-header, .control-panel, .preview-header, .error, .no-print { display: none !important; }
  .main-container { display: block !important; padding: 0 !important; max-width: none !important; }
  .preview-container { display: block !important; padding: 0 !important; gap: 0 !important; }
  .a4-wrapper { display: block !important; max-width: none !important; padding: 0 !important; }
  .sheet {
    width: 210mm;
    min-height: 297mm;
    box-shadow: none;
    border: none;
    margin: 0;
    page-break-after: always;
    padding: 12mm 12mm 10mm;
  }
  .sheet:last-child { page-break-after: auto; }
  .cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cell.wrong { outline: none !important; background: none !important; }
  .cell.wrong .no { color: #222 !important; }
  .cell .no.markable { cursor: default; }
}