/* 画面の枠と A4 の紙・練習のマスは漢字プリントと同じ物を使う。ここにはひらがなだけの所を書く */
@import url("../kanji/app.css");

.kana { display: flex; flex-direction: column; gap: .2rem; }
.krow { display: grid; grid-template-columns: 3rem repeat(5, 1fr); gap: .2rem; }
.krow button { font-family: var(--kyokasho); font-size: 1.25rem; border: 1px solid var(--line); background: #fff; border-radius: .4rem; min-height: 2.4rem; color: #9aa09a; padding: 0; }
.krow button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 700; }
.krow .rowhead { font-size: .8rem; color: var(--accent-strong); background: #f7f9f6; }

/* なぞり：1年生向けにマスを大きく（24mm・9マス） */
.kana-trace .cell { width: 24mm; height: 24mm; font-size: 19mm; }
.kana-trace .pcols { gap: 2mm; }

/* 絵を見て書く：2列×5段 */
.pgrid { list-style: none; margin: 4mm 0 0; padding: 0; flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 1fr); gap: 3mm 6mm; }
.pgrid li { position: relative; display: flex; align-items: center; gap: 4mm; border: .3mm solid #ddd; border-radius: 3mm; padding: 2mm 3mm; }
.pic { font-size: 19mm; line-height: 1; width: 22mm; flex: none; text-align: center; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.kbs { display: flex; }
.kb { width: var(--kb, 15mm); height: var(--kb, 15mm); border: .35mm solid #222; display: grid; place-items: center; font-size: calc(var(--kb, 15mm) * .8); line-height: 1; margin-left: -.35mm;
  background-image: linear-gradient(#ccc, #ccc), linear-gradient(#ccc, #ccc); background-size: 100% .2mm, .2mm 100%; background-position: center; background-repeat: no-repeat; }
.kb.given { background-image: none; background-color: #f4f4f4; }
.kb b { font-weight: 400; }
.kb b.a { color: var(--red); }
.kb.small b { font-size: 8mm; transform: translate(1.5mm, 1.5mm); }
.pgrid li .tools { position: absolute; right: 1mm; top: 1mm; display: none; }
.pgrid li:hover .tools, .pgrid li:focus-within .tools { display: flex; }
.pgrid li .tools button { border: 1px solid var(--accent); background: #fff; color: var(--accent-strong); border-radius: .4rem; width: 2rem; height: 2rem; padding: 0; }

/* 字数が多い言葉はマスを小さく（列の幅＝約90mm に収める） */
.kbs.n4 { --kb: 14mm; } .kbs.n5 { --kb: 12mm; } .kbs.n6 { --kb: 10mm; }
.pgrid li { min-width: 0; overflow: hidden; }