/* ══ 분수 표기 ══ */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 .25rem;line-height:1.1}
.fr-n{padding:0 .35rem;border-bottom:2.5px solid currentColor}
.fr-d{padding:0 .35rem}
.fr-int,.fr-w{display:inline-block;vertical-align:middle;margin:0 .15rem}
.fr-neg{vertical-align:middle;margin-right:.1rem}
.q-op{display:inline-block;margin:0 .5rem;color:#6b7280;font-weight:800}

/* ══ 풀이판 (분수 단계 엔진) ══ */
.wb{display:flex;flex-direction:column;gap:.4rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:1rem;padding:.9rem 1rem}
.wb-row{display:flex;align-items:center;gap:.75rem;min-height:2.9rem}
.wb-label{flex:0 0 4.2rem;font-size:.75rem;font-weight:800;color:#9ca3af;text-align:right}
.wb-body{flex:1;font-size:1.5rem;font-weight:800;color:#1f2937;display:flex;align-items:center;flex-wrap:wrap}
.wb-body.wb-empty{color:#d1d5db;font-size:1.25rem}
.wb-hint{font-size:1rem;color:#9ca3af;font-weight:700}
.wb-grp{display:inline-flex;align-items:center;white-space:nowrap}
.wb-filled{animation:pop .3s ease}
@media(max-width:420px){.wb-body{font-size:1.25rem}.wb-label{flex-basis:3.4rem}}

/* ══ 질문 · 입력 ══ */
.step-q{font-size:1.5rem;font-weight:900;color:#1f2937;margin-bottom:1.1rem;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.15rem}
@media(max-width:420px){.step-q{font-size:1.25rem}}
.fi{display:flex;align-items:center;gap:.4rem}
.fi-frac{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.fi-bar{width:3.6rem;height:3px;background:#374151;border-radius:2px}
.fi-box{width:4.6rem;padding:.55rem;font-size:1.3rem;font-weight:800;text-align:center;font-family:'Courier New',monospace;border:2px solid #d1d5db;border-radius:.7rem}
.fi-mini{width:3.2rem;padding:.35rem;font-size:1.1rem;margin-left:.3rem}
.ws-row{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:.1rem}
.ws-row .fi-box{width:3.6rem;padding:.4rem;font-size:1.15rem}
.ws-row .fi-mini{width:2.9rem;padding:.3rem;font-size:1rem;margin-left:.15rem}
.ws-row .fr{margin:0 .1rem}
.ws-row .fr-n,.ws-row .fr-d{padding:.2rem .35rem;white-space:nowrap}
.fi-good{border-color:#4ade80!important;background:#f0fdf4}
.fi-bad{border-color:#f87171!important;background:#fef2f2}
.fi-box:focus{outline:none;border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.2)}
.fi-box::placeholder{font-size:.8rem;color:#c7cbd1;font-weight:600}
.btn-check{padding:.75rem 1.25rem;background:#6366f1;color:#fff;border-radius:.75rem;font-weight:800;transition:.15s;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.btn-check:hover{background:#4f46e5}.btn-check:active{transform:scale(.95)}
.yn-btn{min-width:5rem;padding:.7rem 1.2rem;border-radius:.75rem;font-weight:800;font-size:1rem;transition:.15s;cursor:pointer;border:2px solid}
.yn-btn:active{transform:scale(.95)}
.yn-yes{background:#ecfdf5;color:#047857;border-color:#6ee7b7}.yn-yes:hover{background:#d1fae5}
.yn-no{background:#fef2f2;color:#b91c1c;border-color:#fca5a5}.yn-no:hover{background:#fee2e2}

/* ══ 단계별 시간 (과정형 레벨) ══ */
.st-clock{display:inline-flex;align-items:center;white-space:nowrap;border-radius:9999px;padding:.1rem .55rem;font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums;opacity:.85}
.tt{margin:0 auto 1.25rem;max-width:24rem;background:#fff;border:1px solid #e5e7eb;border-radius:1rem;padding:.5rem .25rem;text-align:left}
.tt-head{padding:.25rem .75rem .45rem;font-size:.72rem;font-weight:800;color:#9ca3af;letter-spacing:.05em}
.tt-row{display:flex;align-items:center;gap:.5rem;padding:.3rem .75rem;font-size:.85rem;font-weight:700;color:#4b5563;border-top:1px solid #f3f4f6}
.tt-no{flex:0 0 3.6rem;font-size:.7rem;font-weight:800;color:#9ca3af}
.tt-desc{flex:1;min-width:0;word-break:keep-all}
.tt-time{font-variant-numeric:tabular-nums;font-weight:800;color:#374151;white-space:nowrap}
.tt-sub{font-size:.72rem;font-weight:700;color:#9ca3af}
.tt-slow .tt-time{color:#c2410c}
.tt-total{border-top:2px solid #e5e7eb;color:#1f2937}
.tt-total .tt-time{color:#4338ca}

/* ══ 4지선다 ══ */
.quiz-q{font-size:2.5rem;font-weight:900;color:#1f2937;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
@media(max-width:420px){.quiz-q{font-size:1.9rem}}
.quiz-choice{padding:1rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:.85rem;font-size:1.6rem;font-weight:800;color:#374151;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;min-height:4.5rem}
.quiz-choice:hover:not(:disabled){background:#f3f4f6}
.quiz-choice:disabled{cursor:default}
.qc-right{background:#dcfce7!important;border:2px solid #86efac!important;color:#15803d!important}
.qc-wrong{background:#e5e7eb!important;color:#9ca3af!important}
.qc-answer{background:#fef2f2!important;border:2px solid #ef4444!important;color:#b91c1c!important}

/* ══ 그림 문제 (L1·L2) ══ */
.pic-q{display:flex;justify-content:center;margin-bottom:.9rem;flex-basis:100%}
.pic-q svg{max-width:100%;height:auto}
.pic-cap{font-size:1.15rem;font-weight:800;color:#374151;text-align:center;flex-basis:100%}
.pic-multi{display:flex;justify-content:center;align-items:center;gap:.6rem;flex-wrap:wrap;flex-basis:100%;margin-bottom:.9rem}
.pic-multi svg{max-width:30%;height:auto}
.pic-col{display:flex;flex-direction:column;align-items:center;gap:.45rem;flex-basis:100%;margin-bottom:.9rem}
.pic-col svg{max-width:100%;height:auto}
.q-hint{font-size:1.1rem;color:#9ca3af;font-weight:700}
.q-mid{font-size:1.3rem;color:#4b5563;font-weight:800;margin:0 .2rem}
.qc-num{font-size:inherit;font-weight:inherit;font-variant-numeric:tabular-nums}
.pair-sep{display:inline-block;margin:0 .55rem;font-size:1rem;color:#6b7280;font-weight:700}

/* ══ 교사 탭 ══ */
.ttab{padding:.5rem 1rem;border-radius:.75rem;background:#fff;color:#475569;font-weight:700;border:1px solid #cbd5e1;transition:.15s}
.ttab:hover{background:#f8fafc}
.ttab-on{background:#334155;color:#fff;border-color:#334155}

/* ══ 레벨 배지 ══ */
.lv-badge{margin-left:.4rem;display:inline-flex;align-items:center;border-radius:9999px;padding:.1rem .5rem;font-size:.7rem;font-weight:700;white-space:nowrap}

@keyframes pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes carryIn{0%{transform:scale(0) translateY(8px);opacity:0}60%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}