/* =========================================================
   연산랩 · 디자인  (색·글꼴은 :root 토큰만 바꾸면 전체 반영)
   화면 상태: .app[data-screen="home|quiz|result|record|more"], 문제 상태: .app[data-state="ask|ok|bad"]
   ========================================================= */
@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-subset.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Baloo 2";src:url("fonts/baloo2-800.woff2") format("woff2");font-weight:800;font-display:swap}
:root{
  --pink1:#FF6380; --pink2:#FF839D; --blue1:#57BEFF; --blue2:#2D8BF2; --yellow1:#FFC447; --yellow2:#FFAD2B; --green1:#57D08A; --green2:#38BF77;
  --navy:#0D326D; --ink:#112F65; --muted:#6F87A7; --line:#DFE8F2; --bg:#F8FBFF; --card:#FFFFFF; --soft:#F2F7FD;
  --primary:#0F7FF3; --primary-l:#E6F1FF; --ok:#1FB574; --ok-l:#E5FAF0; --bad:#F2556A; --bad-l:#FFECEF; --sun-l:#FFF4D2; --sun-ink:#8A5A00;
  --shadow:0 8px 22px rgba(38,74,118,.08);
  --font:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif; --num:"Baloo 2","Pretendard",sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#EDF3F8;color:var(--ink);font-family:var(--font);letter-spacing:-.035em;word-break:keep-all;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0;touch-action:manipulation}
svg{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.mascot svg{fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
:focus-visible{outline:3px solid var(--yellow1);outline-offset:2px;border-radius:10px}
[hidden]{display:none!important}
.app{position:relative;max-width:440px;min-height:100dvh;margin:0 auto;background:#fff;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));overflow-x:hidden}
@media (min-width:460px){ .app{box-shadow:0 18px 60px rgba(24,52,94,.14)} }
.screen{display:none;padding:0 16px 16px}
.app[data-screen="home"] .screen[data-screen="home"],.app[data-screen="quiz"] .screen[data-screen="quiz"],.app[data-screen="result"] .screen[data-screen="result"],.app[data-screen="record"] .screen[data-screen="record"],.app[data-screen="more"] .screen[data-screen="more"]{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}

/* ---------- 1. 홈 ---------- */
.hero{position:relative;height:300px;margin:0 -16px;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(180deg,#EAF5FF 0%,#F6FAFF 70%,#FFFFFF 100%);overflow:hidden;text-align:center}
.hero-back,.hero-sound{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.85);display:grid;place-items:center;color:var(--ink);z-index:3}
.hero-back{left:12px}.hero-sound{right:12px;color:var(--primary)}
.hero-back svg,.hero-sound svg{width:21px;height:21px;stroke-width:2.4}
.hero-sound .ic-off{display:none}.hero-sound[aria-pressed="false"]{color:var(--muted)}.hero-sound[aria-pressed="false"] .ic-on{display:none}.hero-sound[aria-pressed="false"] .ic-off{display:block}
.hero-badge{position:relative;z-index:2;display:inline-block;margin-top:20px;padding:5px 16px;border-radius:999px;background:linear-gradient(135deg,#3D9BFF,#1576F0);color:#fff;font-size:15px;font-weight:900;box-shadow:0 6px 14px rgba(21,118,240,.22)}
.hero-title{position:relative;z-index:2;margin:6px 0 0;font-size:46px;font-weight:950;letter-spacing:-.06em;line-height:1;color:var(--navy)}
.hero-nums i{position:absolute;font-style:normal;font-family:var(--num);font-weight:800;font-size:30px;animation:float 3s ease-in-out infinite}
.hero-nums i:nth-child(1){left:7%;top:116px;color:#FFB52B}.hero-nums i:nth-child(2){left:17%;top:150px;color:#2D8BF2;animation-delay:.4s}
.hero-nums i:nth-child(3){right:8%;top:104px;color:#FF6380;animation-delay:.8s}.hero-nums i:nth-child(4){right:6%;top:170px;color:#38BF77;animation-delay:1.2s}
.hero-nums i:nth-child(5){left:30%;top:96px;color:#FF839D;font-size:24px;animation-delay:1.6s}.hero-nums i:nth-child(6){right:24%;top:92px;color:#57BEFF;font-size:24px;animation-delay:2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mascot--hero{position:absolute;left:50%;top:92px;width:150px;height:150px;transform:translateX(-50%);z-index:1}
.hero-pencil{position:absolute;left:calc(50% - 104px);top:104px;width:34px;height:118px;transform:rotate(-24deg);z-index:2;fill:none;stroke:none}
.hero-sub{position:absolute;left:0;right:0;bottom:12px;margin:0;font-size:16px;font-weight:800;color:#2C4A78;line-height:1.35;z-index:2}
.hero-sub b{font-size:19px;font-weight:950;color:var(--navy)}
.mascot svg{display:block;width:100%;height:100%}
.ops{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.op{height:62px;border-radius:18px;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 14px rgba(38,74,118,.10);transition:transform .1s;position:relative}
.op:active{transform:scale(.97)}
.op .sign{font-size:32px;font-weight:900;line-height:1}.op b{font-size:18px;font-weight:900}
.op--add{background:linear-gradient(135deg,var(--pink1),var(--pink2))}.op--sub{background:linear-gradient(135deg,var(--blue1),var(--blue2))}
.op--mul{background:linear-gradient(135deg,var(--yellow1),var(--yellow2))}.op--div{background:linear-gradient(135deg,var(--green1),var(--green2))}
.op[aria-pressed="true"]{outline:3px solid #0D326D;outline-offset:2px}
.op[aria-pressed="true"]::after{content:"";position:absolute;top:-8px;right:-6px;width:24px;height:24px;border-radius:50%;background:#0D326D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.sec-title{margin:22px 2px 10px;font-size:19px;font-weight:950;color:var(--ink)}
.grades{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.grade{height:46px;border-radius:14px;background:#F6FAFF;border:1.5px solid #E4ECF4;color:#7188A6;font-size:16px;font-weight:850}
.grade[aria-pressed="true"]{background:#fff;border:2px solid var(--primary);color:#126BE8}
.diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:10px;padding:4px;border-radius:14px;background:#EEF4FA}
.diff{height:40px;border-radius:11px;font-size:15px;font-weight:850;color:#6D84A4}
.diff[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(38,74,118,.12)}
.level-note{margin:10px 4px 0;font-size:13.5px;font-weight:700;color:var(--muted);min-height:20px;line-height:1.45}
.level-note b{color:var(--ink)}
.start{width:100%;height:58px;margin-top:14px;border-radius:18px;background:linear-gradient(135deg,#118AFF,#0875EE);color:#fff;font-size:19px;font-weight:950;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 18px rgba(8,117,238,.22)}
.start svg{width:20px;height:20px;stroke-width:2.6}
.start:disabled{background:#C9D6E6;box-shadow:none}
.today{margin:12px 0 0;text-align:center;font-size:14px;font-weight:800;color:var(--muted)}
.today b{color:var(--ink)}

/* ---------- 하단 메뉴 ---------- */
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:440px;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
.nav button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0;border-radius:12px;color:#778BA8;font-size:12px;font-weight:850}
.nav svg{width:22px;height:22px}
.nav button[aria-current="true"]{color:var(--primary);background:var(--primary-l)}
.app[data-screen="quiz"] .nav{display:none}
.app[data-screen="quiz"]{padding-bottom:16px}

/* ---------- 공통 부품 ---------- */
.icon-btn{width:42px;height:42px;border-radius:14px;background:var(--soft);color:var(--muted);display:grid;place-items:center}
.icon-btn svg{width:20px;height:20px}
.bubble{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px 14px;font-size:15.5px;font-weight:800;line-height:1.4;box-shadow:var(--shadow);max-width:240px}
.bubble::after{content:"";position:absolute;left:-7px;bottom:16px;width:14px;height:14px;background:#fff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.bubble b{color:var(--primary)}
.btn{width:100%;min-height:56px;border-radius:18px;font-size:18px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px}
.btn--primary{background:linear-gradient(135deg,#118AFF,#0875EE);color:#fff;box-shadow:0 8px 18px rgba(8,117,238,.22)}
.btn--accent{background:linear-gradient(135deg,var(--pink1),var(--pink2));color:#fff;box-shadow:0 8px 18px rgba(255,99,128,.25)}
.btn--plain{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font-size:16px;min-height:52px}
.btn--ghost{color:var(--muted);font-size:15px;min-height:46px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);background:#15386F;color:#fff;font-size:14px;font-weight:800;padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;transition:.18s;z-index:60;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.page-title{margin:0;padding:calc(18px + env(safe-area-inset-top,0px)) 2px 14px;font-size:24px;font-weight:950}
.mascot.is-hop{animation:hop .8s ease-in-out 2}.mascot.is-tilt{animation:tilt 1s ease-in-out 1;transform-origin:50% 85%}
@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-12px) rotate(-3deg)}}
@keyframes tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}70%{transform:rotate(6deg)}}

/* ---------- 2. 문제 ---------- */
.q-head{display:flex;align-items:center;gap:8px;padding-top:calc(12px + env(safe-area-inset-top,0px))}
.q-title{flex:1;font-size:16px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-count{font-family:var(--num);font-size:22px;font-weight:800}
.combo{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:999px;background:var(--sun-l);color:var(--sun-ink);font-size:13px;font-weight:900}
.combo svg{width:14px;height:14px;fill:#FF8A3D;stroke:none}
.q-bar{height:10px;border-radius:5px;background:#E2ECF8;margin-top:10px;overflow:hidden}
.q-bar i{display:block;height:100%;width:0;background:var(--primary);border-radius:5px;transition:width .3s}
.coach{display:flex;align-items:flex-end;gap:6px;padding:6px 0 4px}
.mascot--coach{width:80px;height:80px;flex:none}
.coach .bubble{margin-bottom:20px}
.problem{position:relative;background:#fff;border:3px solid transparent;border-radius:26px;box-shadow:var(--shadow);padding:14px 10px 18px;display:flex;flex-direction:column;align-items:center;gap:10px}
.app[data-state="ok"] .problem{border-color:var(--ok)}
.app[data-state="bad"] .problem{border-color:var(--bad);background:#FFFAFB}
.level-tag{font-size:12.5px;font-weight:800;color:var(--muted);background:var(--soft);border-radius:999px;padding:4px 10px}
.expr{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--num);font-weight:800;color:var(--ink);font-size:52px;line-height:1.05;flex-wrap:wrap}
.expr .op-sign{color:#9AABC6;font-size:44px}
.expr.is-long{font-size:42px}.expr.is-long .op-sign{font-size:36px}
.read-btn{width:36px;height:36px;border-radius:11px;background:var(--soft);color:var(--primary);display:grid;place-items:center;margin-left:4px}
.read-btn svg{width:19px;height:19px}
.ans-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.eq{font-family:var(--num);font-size:42px;font-weight:800;color:#9AABC6}
.ans{min-width:132px;height:80px;padding:0 14px;border-radius:22px;background:#F3F8FF;border:3px dashed #9CC2FF;display:inline-flex;align-items:center;justify-content:center;font-family:var(--num);font-size:52px;font-weight:800;color:var(--ink);cursor:pointer}
.ans--rem{min-width:84px}
.ans .caret{display:none;width:4px;height:44px;border-radius:2px;background:var(--primary);margin-left:4px;animation:blink 1s step-end infinite}
.ans.is-active{border-color:var(--primary);background:#EAF3FF}
.ans.is-active .caret{display:inline-block}
.rem{display:inline-flex;align-items:center;gap:6px}
.rem-label{font-size:15px;font-weight:900;color:var(--muted)}
@keyframes blink{50%{opacity:0}}
.app[data-state="ok"] .ans{background:var(--ok);border:3px solid var(--ok);color:#fff}
.app[data-state="bad"] .ans{background:var(--sun-l);border:3px solid var(--yellow1);color:var(--sun-ink)}
.ans .wrong-num{font-size:34px;color:#A9B6CC;text-decoration:line-through;text-decoration-color:var(--bad);text-decoration-thickness:4px;margin-right:8px}
.problem.is-pop{animation:pop .45s ease-out}.problem.is-shake{animation:shake .4s ease-in-out}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.feedback{margin-top:12px}
.fb-ok,.fb-bad{display:none}
.app[data-state="ok"] .fb-ok{display:flex}.app[data-state="bad"] .fb-bad{display:block}
.fb-ok{flex-wrap:wrap;justify-content:center;gap:8px}
.fb-chip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:15px;font-weight:900}
.fb-chip .star{width:20px;height:20px;fill:#FFC447;stroke:#E3A800;stroke-width:1.4}
.fb-chip--speed{color:var(--ok)}.fb-chip--slow{color:var(--sun-ink)}
.autobar{width:100%;height:8px;border-radius:4px;background:#E2ECF8;overflow:hidden;margin-top:6px}
.autobar i{display:block;height:100%;width:0;background:var(--ok);border-radius:4px}
.app[data-state="ok"] .autobar i{animation:fillbar var(--auto,900ms) linear forwards}
@keyframes fillbar{to{width:100%}}
.explain{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:14px 16px;font-size:15.5px;font-weight:800;line-height:1.65}
.explain .muted{color:var(--muted);font-size:13.5px}
.explain .big{font-family:var(--num);font-size:26px;font-weight:800}
.explain .c1{color:var(--primary)}.explain .c2{color:var(--sun-ink)}
.explain table{border-collapse:collapse;margin:6px 0;font-family:var(--num);font-size:24px;font-weight:800}
.explain td{padding:0 5px;text-align:center;min-width:24px}
.explain .carry td{font-size:14px;color:var(--bad);height:16px}
.explain .line td{border-top:3px solid var(--ink)}
.app[data-state="ok"] .keypad,.app[data-state="bad"] .keypad{display:none}
.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.keypad button{height:60px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 3px 10px rgba(38,74,118,.06);font-family:var(--num);font-size:32px;font-weight:800;color:var(--ink);transition:transform .06s}
.keypad button:active{transform:scale(.95)}
.keypad .key-del{background:#EEF4FA;color:var(--muted);display:grid;place-items:center}
.keypad .key-del svg{width:28px;height:28px}
.keypad .key-ok{background:linear-gradient(135deg,#118AFF,#0875EE);color:#fff;border:0;font-family:var(--font);font-size:20px;font-weight:900}
@media (max-height:740px){ .mascot--coach{width:58px;height:58px}.coach .bubble{font-size:14px;margin-bottom:12px}.expr{font-size:42px}.ans{height:66px;font-size:42px}.keypad{gap:7px}.keypad button{height:50px;font-size:27px}.problem{padding:10px 8px 12px} }
@media (max-height:660px){ .coach{display:none}.keypad button{height:46px} }

/* 별 터짐 */
.burst{position:fixed;inset:0;pointer-events:none;z-index:50}
.burst i{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;animation:burst 1s cubic-bezier(.15,.8,.3,1) forwards}
.burst i svg{width:100%;height:100%;stroke:#fff;stroke-width:1.4}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.3)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){ .burst{display:none} .mascot.is-hop,.mascot.is-tilt,.problem.is-pop,.problem.is-shake,.hero-nums i{animation:none} }

/* ---------- 3. 결과 ---------- */
.screen[data-screen="result"]{padding-top:calc(16px + env(safe-area-inset-top,0px))}
.result-top{display:flex;align-items:center;gap:8px;padding:16px}
.result-score{flex:1}.result-score small{font-size:14px;font-weight:800;color:var(--muted)}
.score b{font-family:var(--num);font-size:56px;font-weight:800;line-height:1.05}.score span{font-family:var(--num);font-size:26px;font-weight:800;color:#9AABC6}
.stars{display:flex;flex-wrap:wrap;gap:1px}.stars svg{width:18px;height:18px;stroke-width:1.4}.stars .on{fill:#FFC447;stroke:#E3A800}.stars .off{fill:#fff;stroke:#C9D6EA}
.result-msg{margin:6px 0 0;font-size:14px;font-weight:800}
.mascot--result{width:112px;height:112px;flex:none}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px}
.result-stats div{padding:12px;text-align:center}.result-stats div+div{border-left:1px solid var(--line)}
.result-stats b{display:block;font-family:var(--num);font-size:24px;font-weight:800}.result-stats span{font-size:12.5px;font-weight:700;color:var(--muted)}
.c-ok{color:var(--ok)}.c-bad{color:var(--bad)}
.result-level,.result-wrong{margin-top:12px;padding:14px 16px}
.result-level h3,.result-wrong h3{margin:0 0 6px;font-size:16px;font-weight:900}
.result-level p{margin:0;font-size:14.5px;font-weight:700;color:#2C4A78;line-height:1.5}
.wrong-list{display:flex;flex-wrap:wrap;gap:6px}
.wrong-list span{height:34px;padding:0 12px;border-radius:999px;background:var(--bad-l);color:var(--bad);font-family:var(--num);font-size:16px;font-weight:800;display:inline-flex;align-items:center}

/* ---------- 4. 기록 ---------- */
.rec-sum{display:grid;grid-template-columns:repeat(3,1fr);padding:4px 0}
.rec-sum div{padding:12px 6px;text-align:center}.rec-sum div+div{border-left:1px solid var(--line)}
.rec-sum b{display:block;font-family:var(--num);font-size:24px;font-weight:800}.rec-sum span{font-size:12.5px;font-weight:700;color:var(--muted)}
.rec-list{display:grid;gap:10px;margin-top:12px}
.rec-op{padding:14px 16px}
.rec-op h3{margin:0 0 8px;display:flex;align-items:center;gap:8px;font-size:17px;font-weight:900}
.rec-op h3 i{width:30px;height:30px;border-radius:10px;color:#fff;display:grid;place-items:center;font-style:normal;font-size:19px;font-weight:900}
.rec-row{display:grid;grid-template-columns:1fr 54px 42px;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:14px;font-weight:750}
.rec-row .bar{grid-column:1/-1;height:6px;border-radius:3px;background:#E8EFF7;overflow:hidden}
.rec-row .bar i{display:block;height:100%;border-radius:3px;background:var(--ok)}
.rec-row .pct{text-align:right;font-family:var(--num);font-weight:800}
.rec-row .n{text-align:right;color:var(--muted);font-size:12.5px}
.rec-empty{padding:28px 16px;text-align:center;color:var(--muted);font-weight:700}

/* ---------- 5. 더보기 ---------- */
.more-list{overflow:hidden}
.more-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:56px;padding:0 16px;font-size:16px;font-weight:800;border-top:1px solid var(--line);text-align:left}
.more-row:first-child{border-top:0}
.more-row input{width:22px;height:22px;accent-color:var(--primary)}
.more-row svg{width:18px;height:18px;color:var(--muted)}
.more-row--danger{color:var(--bad)}
.more-note{margin:14px 4px;font-size:13.5px;font-weight:700;color:var(--muted);line-height:1.55}

/* ===== 상단(히어로) — 받은 디자인 구도: 큰 제목 아래 캐릭터, 숫자는 양옆, 문구는 아래 ===== */
.hero{height:404px;background:linear-gradient(180deg,#EAF5FF 0%,#F3F9FF 62%,#FFFFFF 100%)}
.hero-badge{margin-top:24px;font-size:17px;padding:6px 20px}
.hero-title{font-size:60px;margin-top:4px;letter-spacing:-.07em;text-shadow:0 3px 0 #fff}
.hero-nums i{font-size:42px;text-shadow:0 3px 0 rgba(255,255,255,.9),0 6px 10px rgba(38,74,118,.12)}
.hero-nums i:nth-child(1){left:6%;top:168px}.hero-nums i:nth-child(2){left:18%;top:196px}
.hero-nums i:nth-child(3){right:6%;top:150px}.hero-nums i:nth-child(4){right:4%;top:290px}
.hero-nums i:nth-child(5){left:5%;top:300px;font-size:28px;color:#57BEFF}.hero-nums i:nth-child(6){right:24%;top:150px;font-size:26px;color:#57D08A}
.hero-sub{bottom:0;padding:26px 0 14px;font-size:18px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 42%)}.hero-sub b{font-size:23px}
.hero .hero-bird{position:absolute;left:50%;top:160px;width:min(80%,330px);transform:translateX(-50%);z-index:1;pointer-events:none}
.hero[data-hero="bird"] .mascot--hero,.hero[data-hero="bird"] .hero-pencil{display:none}
.hero[data-hero="bird"] .hero-bird{display:block!important}
.hero[data-hero="gugu"] .mascot--hero{top:150px;width:200px;height:200px}
.hero[data-hero="gugu"] .hero-pencil{top:182px;left:calc(50% - 96px);height:136px;width:40px;transform:rotate(-18deg)}

/* 캐릭터 이미지 (배움랩 비둘기 라인업) */
.mascot img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.hero[data-hero="char"] .hero-bird-wrap,.hero[data-hero="char"] .hero-bird,.hero[data-hero="char"] .hero-pencil{display:none!important}
.hero[data-hero="char"] .mascot--hero{top:150px;width:210px;height:200px}
.page-title{display:flex;align-items:flex-end;justify-content:space-between}
.mascot--record{width:72px;height:72px;margin-bottom:-6px}

/* ===== 분수·소수 (4~6학년) ===== */
.expr .op-sign{margin:0 2px}
.expr b.op-sign{font-weight:800}
.expr .mix{font-size:38px;letter-spacing:-.02em;white-space:nowrap}
.expr .lbl{font-family:var(--font);font-size:16px;font-weight:900;color:var(--muted);margin-right:6px}
.fr-wrap{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.fr-w{font-family:var(--num);font-weight:800}
.fr{display:inline-flex;flex-direction:column;align-items:center;line-height:1;vertical-align:middle}
.fr i{font-style:normal;font-family:var(--num);font-weight:800;padding:0 4px}
.fr i:first-child{border-bottom:3px solid currentColor;padding-bottom:2px}
.fr i:last-child{padding-top:2px}
.expr .fr{font-size:.62em}.expr .fr-w{font-size:1em}
.explain .fr,.wrong-list .fr,.coach .fr,.ans .fr{font-size:.85em}
.explain .fr i:first-child{border-bottom-width:2px}
.explain .ex-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-family:var(--num);font-size:21px;font-weight:800;margin:6px 0}
.explain .ex-line.muted{font-size:15px}
.wrong-list .wl{height:auto;min-height:34px;padding:4px 12px;gap:4px}
.wrong-list .wl .op-sign{color:inherit;font-size:1em}
.ans-area{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.ans-mixed{display:inline-flex;align-items:center;gap:8px}
.ans--w{min-width:64px;height:84px}
.ans--w.is-empty:not(.is-active){border-style:dotted;opacity:.55}
.ans-frac{display:inline-flex;flex-direction:column;align-items:center;gap:6px}
.ans-frac .ans{min-width:96px;height:56px;font-size:36px;border-radius:16px}
.ans-bar{display:block;width:110px;height:4px;border-radius:2px;background:var(--ink)}
.ans--result{min-width:150px;height:auto;min-height:80px;padding:8px 16px;gap:10px;cursor:default}
.ans--result .wrong-num{display:inline-flex;align-items:center}
.ans--result .right{display:inline-flex;align-items:center}
.app[data-state="ok"] .ans-frac .ans,.app[data-state="ok"] .ans--w{background:var(--ok);border-color:var(--ok);color:#fff}
.app[data-state="ok"] .ans-bar{background:var(--ok)}
.keypad .key-dot{display:none}
.app[data-kind="dec"] .keypad .key-dot{display:block;order:10}
.app[data-kind="dec"] .keypad [data-k="0"]{order:11}
.app[data-kind="dec"] .keypad .key-del{order:12}
.app[data-kind="dec"] .keypad .key-ok{order:13;grid-column:1 / -1;height:54px}
@media (max-height:740px){ .ans-frac .ans{height:46px;font-size:30px}.ans--w{height:70px}.app[data-kind="dec"] .keypad .key-ok{height:46px}.expr .mix{font-size:32px} }
.app[data-state="ok"] .ans--w.is-empty{display:none}
.rec-miss{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--bad-l);color:var(--bad);font-size:11.5px;font-weight:800}