/* 画面の枠（設定の欄・ボタン・A4の紙・印刷）は漢字プリントと同じ物を使う。ここには九九だけの所を書く */
@import url("../kanji/app.css");

.dan { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; margin-bottom: .5rem; }
.dan button { border: 1px solid var(--line); background: #fff; border-radius: .5rem; min-height: 2.8rem; font-size: 1.15rem; font-weight: 700; color: #9aa09a; }
.dan button small { font-size: .65rem; font-weight: 400; margin-left: .1rem; }
.dan button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }

.sheet { font-family: "UD デジタル 教科書体 N", "UD Digi Kyokasho N", "BIZ UDPGothic", "Yu Gothic UI", sans-serif; }
.sh-time { display: flex; gap: 3mm; justify-content: flex-end; font-size: 3.8mm; margin-top: 2mm; }
.sh-time span { border-bottom: .3mm solid #555; min-width: 14mm; text-align: right; padding: 0 1mm; }
.sh-time span:first-child { border: none; min-width: 0; }
.sh-time .pt { min-width: 18mm; }

.items { list-style: none; margin: 4mm 0 0; padding: 0; flex: 1; display: grid; grid-auto-flow: column; column-gap: 10mm; }
.items.c1 { grid-template-columns: 1fr; }
.items.c2 { grid-template-columns: 1fr 1fr; }
.items li { position: relative; display: flex; align-items: center; gap: 3mm; border-bottom: .2mm dashed #ccc; font-size: 7mm; font-variant-numeric: tabular-nums; }
.items .no { font-size: 3.8mm; width: 9mm; color: #555; font-family: "Yu Gothic UI", sans-serif; }
.bx { display: inline-grid; place-items: center; width: 15mm; height: 9.5mm; border: .35mm solid #222; vertical-align: middle; }
.bx b { color: var(--red); font-weight: 400; }
.items li .tools { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: none; }
.items li:hover .tools, .items li:focus-within .tools { display: flex; }
.items li .tools button { border: 1px solid var(--accent); background: #fff; color: var(--accent-strong); border-radius: .4rem; width: 2rem; height: 2rem; padding: 0; }
/* 行の数で高さを割る（数が少ない時は大きく） */
.items { grid-template-rows: repeat(var(--rows, 25), 1fr); }
.items.r10 { --rows: 10; } .items.r15 { --rows: 15; } .items.r20 { --rows: 20; } .items.r25 { --rows: 25; }

.lead2 { font-size: 4mm; margin: 3mm 0; }
.kt { border-collapse: collapse; margin: 4mm auto 0; font-size: 7mm; }
.kt th, .kt td { border: .35mm solid #333; width: 17mm; height: 17mm; text-align: center; }
.kt th { background: #eef2ed; }
.kt td.ans { color: var(--red); }
/* 唱え方：式の上に小さく */
.tonae { display: inline-block; width: 24mm; font-size: 3.6mm; color: #555; white-space: nowrap; letter-spacing: .03em; vertical-align: middle; }
.answer .tonae { width: 48mm; }
/* 見る用の九九の表 */
.kt.ref td { width: 20mm; height: 24mm; font-size: 4.2mm; line-height: 1.25; vertical-align: middle; }
.kt.ref td small { display: block; font-size: 2.8mm; color: #666; }
.kt.ref td b { font-size: 7mm; }
/* 賞状 */
.award { justify-content: center; }
.aw-frame { flex: 1; border: 2.2mm double #8a6a2a; outline: .6mm solid #8a6a2a; outline-offset: -5mm; padding: 22mm 18mm; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
.aw-title { font-size: 15mm; letter-spacing: .15em; font-weight: 700; white-space: nowrap; }
.aw-name { font-size: 9mm; display: flex; align-items: flex-end; gap: 3mm; }
.aw-name span { display: inline-block; width: 90mm; border-bottom: .4mm solid #333; }
.aw-body { font-size: 7mm; line-height: 2.1; margin: 0; }
.aw-date { font-size: 6mm; display: flex; gap: 2mm; align-items: flex-end; }
.aw-date span { display: inline-block; width: 16mm; border-bottom: .3mm solid #333; }