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

.clocks { list-style: none; margin: 3mm 0 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm 5mm; }
.c6 .clocks { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
.c9 .clocks { grid-template-rows: repeat(3, 1fr); }
.c12 .clocks { grid-template-rows: repeat(4, 1fr); }
.clocks li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2mm; min-height: 0; }
.clocks .no { position: absolute; left: 0; top: 0; font-size: 3.8mm; color: #555; }
.clk { width: 52mm; height: 52mm; font-family: "UD デジタル 教科書体 N", "UD Digi Kyokasho N", "Yu Gothic UI", sans-serif; }
.c6 .clk { width: 64mm; height: 64mm; }
.c12 .clk { width: 44mm; height: 44mm; }
.say { font-size: 6mm; display: flex; align-items: flex-end; gap: 1mm; white-space: nowrap; }
.say .ln { display: inline-block; width: 13mm; border-bottom: .35mm solid #333; height: 7mm; }
.say b { font-weight: 400; color: var(--red); }
.say b.given { color: #111; }
.clocks li .tools { position: absolute; right: 0; top: 0; display: none; }
.clocks li:hover .tools, .clocks li:focus-within .tools { display: flex; }
.clocks li .tools button { border: 1px solid var(--accent); background: #fff; color: var(--accent-strong); border-radius: .4rem; width: 2rem; height: 2rem; padding: 0; }

/* 時こくと時間：時計の下に問題の文 */
.clocks li.calc .clk { width: 40mm; height: 40mm; }
.cq { font-size: 4.4mm; text-align: center; line-height: 1.4; }