/* 画面の枠・A4 の紙・横の式の並びは九九プリントと同じ物を使う。ここには計算だけの所を書く */
@import url("../kuku/kuku.css");

#grades { grid-template-columns: repeat(6, 1fr); }
.types { display: flex; flex-direction: column; gap: .3rem; }
.types button { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: .55rem; padding: .45rem .75rem; min-height: 2.5rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.types button small { font-size: .72rem; color: var(--ink-soft); white-space: nowrap; }
.types button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 700; }
.seg button:disabled { opacity: .4; cursor: default; }

/* わり算のあまりの答えは□を広く */
.bx.w { width: 30mm; white-space: nowrap; }
.items li { white-space: nowrap; }
.bx.d { width: 24mm; } /* 小数の答え（22.68 など）が入る幅 */
.bx small { font-size: 3.6mm; color: var(--red); }

/* ひっ算：位をそろえたマス（1マス 11mm）。いちばん左は記号の列 */
.hgrid { list-style: none; margin: 5mm 0 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); gap: 2mm 4mm; }
.hgrid li { position: relative; display: flex; align-items: flex-start; gap: 2mm; padding-top: 2mm; }
.hgrid .no { font-size: 3.8mm; color: #555; font-family: "Yu Gothic UI", sans-serif; }
.hs { display: inline-flex; flex-direction: column; font-size: 8mm; line-height: 1; margin: 0 auto; }
.hr { display: grid; grid-template-columns: repeat(var(--w), 10mm); }
.hr.line { border-top: .5mm solid #222; padding-top: 1mm; margin-top: 1mm; }
.dc { height: 11mm; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.dc.a { color: var(--red); }
.dc.opm { font-size: 7mm; }
.hgrid li .tools { position: absolute; right: 0; top: 0; display: none; }
.hgrid li:hover .tools, .hgrid li:focus-within .tools { display: flex; }
.hgrid li .tools button { border: 1px solid var(--accent); background: #fff; color: var(--accent-strong); border-radius: .4rem; width: 2rem; height: 2rem; padding: 0; }

/* 分数：分子／横線／分母を縦に積む（5・6年）。答えの□は分数が入る高さに */
.fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; font-size: .82em; margin: 0 .5mm; }
.fr i { font-style: normal; padding: 0 1mm; }
.fr i:first-child { border-bottom: .35mm solid currentColor; }
.bx.f { height: 15mm; width: 17mm; }

/* 文の問題（more.js）：問題の文は小さめ・答えの□は右に */
.items.txt li { font-size: 5.4mm; white-space: normal; }
.items.txt .q { display: flex; align-items: center; gap: 2mm; flex: 1; }
.items.txt .tq { flex: 1; }
.items.txt .tu { font-size: 4.6mm; min-width: 8mm; }
.bx.wide { width: 70mm; }
.items.txt .bx b { font-size: 5mm; }