/* 中学数学ラボ ドリル型の 見た目（lab.css の トークンを 使う。→ docs/math-lab.md §10）
   ⚠ 押す ものは 指の 幅（56px 以上）。スマホ 縦で 1画面に 収める */
.drill{display:flex; flex-direction:column; min-height:100dvh; background:var(--paper)}
.drill__head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px var(--pad); background:var(--panel); border-bottom:1px solid var(--rule)}
.drill__back{display:inline-flex; align-items:center; min-height:32px; padding:0 8px; margin-left:-8px; color:var(--ink2); font-size:12px; text-decoration:none; border-radius:6px; white-space:nowrap}
.drill__back:hover{color:var(--act); background:var(--paper)}
.drill__title{font-size:15px; font-weight:700; margin:0; white-space:nowrap}
.drill__title small{display:block; font-size:11px; font-weight:400; color:var(--ink2)}

.drill__body{display:none; flex-direction:column; gap:10px; width:100%; max-width:560px; margin:0 auto; padding:14px var(--pad) calc(16px + env(safe-area-inset-bottom,0px)); flex:1}
.drill__body.on{display:flex}
.drill__hud{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.drill__level{font-size:12px; color:var(--ink2); text-align:center; margin-top:-4px}
.drill__stat{background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:6px 8px; display:flex; flex-direction:column; min-width:0}
.drill__stat-l{font-size:10px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.drill__stat b{font-size:18px; font-variant-numeric:tabular-nums; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.drill__stat.hot b{color:#d9a441}
.drill__bar{position:relative; height:22px; background:var(--panel); border:1px solid var(--rule); border-radius:11px; overflow:hidden}
.drill__bar-in{position:absolute; inset:0 auto 0 0; background:var(--act); transition:width .15s linear}
.drill__bar.low .drill__bar-in{background:#c14434}
.drill__bar-t{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}

.drill__q{gap:14px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--rule); border-radius:14px; padding:22px 14px; text-align:center; font-size:clamp(26px, 6vw, 40px); font-weight:700; letter-spacing:.02em; font-variant-numeric:tabular-nums; min-height:96px; display:flex; align-items:center; justify-content:center}
.drill__ans{background:var(--panel); border:2px solid var(--act); border-radius:12px; min-height:64px; display:flex; align-items:center; justify-content:flex-end; padding:0 18px; font-size:36px; font-weight:700; font-variant-numeric:tabular-nums}
.drill__caret{display:inline-block; width:2px; height:36px; margin-left:4px; background:var(--act); animation:drill-blink 1s steps(2) infinite}
@keyframes drill-blink{to{opacity:0}}
.drill__msg{min-height:22px; text-align:center; font-weight:700; font-size:15px}
.drill__msg.ok{color:#2f9e4f}
.drill__msg.ng{color:#c14434}
.drill__msg.up{color:#d9a441}
.drill__pad{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:auto}
.drill__key{min-height:60px; border:1px solid var(--rule); background:var(--panel); border-radius:12px; font-size:26px; font-weight:700; color:var(--ink); cursor:pointer; touch-action:manipulation; user-select:none}
.drill__key:active{background:var(--paper); transform:translateY(1px)}
.drill__key--fn{font-size:22px; color:var(--ink2)}
.drill__key--go{grid-column:1 / -1; min-height:124px; background:var(--act); border-color:var(--act); color:#fff; font-size:22px}   /* 縦に 2倍（押し間違いを 減らす） */
.drill__key--sp{font-size:20px; color:var(--act); background:#f3f8fa}
.drill__key--var{font-style:italic; font-family:"Times New Roman",serif; font-size:26px}
/* 答えの 見た目 */
.drill__q .mfrac,.drill__msg .mfrac{display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; margin:0 2px; font-size:.72em; line-height:1.1}
.drill__q .mnum,.drill__msg .mnum{border-bottom:2px solid currentColor; padding:0 4px}
.drill__q .mden,.drill__msg .mden{padding:0 4px}
.drill__ans .mfrac{display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; margin:0 4px; font-size:.8em; line-height:1.15}
.drill__ans .mnum{border-bottom:2px solid currentColor; padding:0 6px}
.drill__ans .mden{padding:0 6px}
.drill__ans .mrt{white-space:nowrap}
.drill__ans .mrad{border-top:2px solid currentColor; padding:0 2px}
.drill__ans sup{font-size:.6em; vertical-align:super}
.drill__ans i{font-family:"Times New Roman",serif; font-style:italic; padding:0 1px}
.drill__ans .mop{margin:0 6px}
.drill__key--go:active{background:var(--act2)}
.shake{animation:drill-shake .4s}
@keyframes drill-shake{0%,100%{transform:none} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}}

.drill__screen[hidden]{display:none}
.drill__screen{width:100%; max-width:560px; margin:0 auto; padding:28px var(--pad) 40px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px}
.drill__screen h2{margin:0; font-size:24px}
.drill__rule{margin:0; color:var(--ink2); font-size:14px; line-height:1.8; max-width:36em}
.drill__best{margin:0; font-size:13px; color:var(--ink2); min-height:1.5em}
.drill__big{min-height:60px; min-width:220px; padding:0 30px; border:none; border-radius:30px; background:var(--act); color:#fff; font-size:20px; font-weight:700; cursor:pointer}
.drill__big:active{background:var(--act2)}
.drill__small{min-height:44px; padding:0 18px; border:1px solid var(--rule); border-radius:22px; background:var(--panel); color:var(--ink2); font-size:14px; cursor:pointer}
.drill__row{height:2px}
.drill__result{display:grid; grid-template-columns:1fr; gap:6px; width:100%; max-width:360px}
.drill__result-r{display:flex; justify-content:space-between; align-items:baseline; background:var(--panel); border:1px solid var(--rule); border-radius:10px; padding:10px 14px}
.drill__result-r span{color:var(--ink2); font-size:13px}
.drill__result-r b{font-size:20px; font-variant-numeric:tabular-nums}
.drill__newbest{margin:4px 0 0; color:#d9a441; font-weight:700}
.drill__end-h{color:var(--ink)}
/* 図の ある 問題（座標ドリル）: 図を 左、文を 右 */
.drill__q.has-fig{padding:12px 14px; font-size:clamp(20px, 4.6vw, 30px)}
.drill__fig{flex:0 0 auto; width:min(46vw, 210px)}
.drill__fig svg{display:block; width:100%; height:auto}
.drill__qt{flex:1 1 8em; min-width:6em}