/* 플래시 암산 — 앱 전용 스타일(공통은 css/site.css 사본 · 손대지 않음) */
:root { --accent: #d9480f; --accent-soft: #fdebe3; }
.flash-screen { background: #0f172a; color: #fff; border-radius: var(--radius); min-height: 280px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.flash-screen.idle { color: #64748b; font-size: 1rem; }
.flash-num { font-size: clamp(72px, 18vw, 180px); }
.flash-num.count { color: #fbbf24; }
.flash-screen .hint-idle { position: absolute; inset: auto 0 14px; text-align: center; color: #94a3b8; font-size: .85rem; padding: 0 14px; }
.answer-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 14px; }
.answer-form label { grid-column: 1 / -1; font-weight: 600; }
.answer-form input { font-size: 1.6rem; font-family: var(--mono); text-align: center; min-height: 54px; }
.result { margin-top: 14px; }
.verdict { font-size: 1.6rem; font-weight: 800; }
.verdict.ok { color: var(--ok); } .verdict.bad { color: var(--bad); }
.nums { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.nums span { font-family: var(--mono); background: var(--soft); padding: 3px 9px; border-radius: 6px; font-size: .95rem; }
.nums span.neg { color: var(--bad); }
.nums .eq { background: transparent; color: var(--muted); }
.range-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 8px; align-items: center; }
.range-row output { font-family: var(--mono); text-align: right; font-weight: 700; }
.problem { font-size: clamp(40px, 9vw, 84px); text-align: center; padding: 10px 0; }
.drill-meta { display: flex; justify-content: space-between; color: var(--muted); font-weight: 600; }
.mistake-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.mistake-list li { display: flex; justify-content: space-between; gap: 10px; background: #fde8e8; padding: 6px 10px; border-radius: 8px; font-family: var(--mono); }
.mistake-list li b { color: var(--ok); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 140px; margin-top: 8px; }
.bars > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: .75rem; color: var(--muted); gap: 4px; }
.bars i { display: block; width: 100%; max-width: 44px; background: var(--accent); border-radius: 6px 6px 0 0; min-height: 2px; }
.bars b { font-family: var(--mono); color: var(--text); }
@media (max-width: 600px) { .flash-screen { min-height: 220px; } }