/* ══════════════════════════════════════════════════════════════════════
   ✨ 만지는 수학 — «재미» 한 겹 (2026-09-23)

   연소사 : "지금까지는 별로 재미는 없어, 더욱 재미 있고, 전문적이 될 수 있도록"
            "초등부 것은 너무 전문적 이기 보다는 더욱 재미 있게 해야 해"

   ⭐ 재미는 «장식»이 아니라 **손이 갈 곳을 알려 주고, 만진 보람을 돌려주는 것**이다.
      ① 만질 수 있는 곳이 숨 쉰다 — 처음 몇 초만
      ② 맞히면 초등은 색종이가 터지고, 중고등은 테두리만 한 번 빛난다
      ③ 판을 끝내면 진행막대에 도장이 찍힌다

   ⛔ 끝없이 움직이는 것은 두지 않는다 — 공부를 방해한다.
   ⛔ 「움직임 줄이기」를 켠 분에게는 전부 끈다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 만질 수 있는 곳이 숨 쉰다 (처음 6초 · 세 번만) ──────────── */
@keyframes mf-breathe{
  0%,100%{ box-shadow: 0 0 0 0 var(--mf-accent, #3A5BA0); }
  50%    { box-shadow: 0 0 0 6px transparent; }
}
.mf-touchable{ animation: mf-breathe 2s ease-out 3; }
body.mf-kid .mf-touchable{ animation-duration: 1.6s; }

/* ── ② 맞혔을 때 ─────────────────────────────────────────────── */
/* 초등 : 색종이가 잠깐 흩날린다 */
.mf-confetti{
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9998; overflow: hidden;
}
.mf-confetti i{
  position: absolute; width: 9px; height: 14px; border-radius: 2px;
  opacity: .95; animation: mf-fall 1.5s cubic-bezier(.2,.6,.5,1) forwards;
}
@keyframes mf-fall{
  0%  { transform: translate3d(0,0,0) rotate(0deg); opacity: 1 }
  100%{ transform: translate3d(var(--dx,0), 74vh, 0) rotate(var(--rot,540deg)); opacity: 0 }
}
/* 중·고등 : 테두리만 한 번 조용히 빛난다 */
@keyframes mf-glow{
  0%  { box-shadow: 0 0 0 0 var(--mf-accent, #3A5BA0); }
  100%{ box-shadow: 0 0 0 14px transparent; }
}
.mf-glow{ animation: mf-glow .7s ease-out 1; }

/* ── ③ 판을 끝내면 도장 ──────────────────────────────────────── */
.mf-steps .mf-step.done{
  background: var(--mf-accent, #3A5BA0);
  position: relative;
}
.mf-steps .mf-step.done::after{
  content: "✓";
  position: absolute; right: -2px; top: -13px;
  font-size: 12px; font-weight: 900; color: var(--mf-accent, #3A5BA0);
}
body.mf-kid .mf-steps .mf-step.done::after{ font-size: 15px; top: -16px; }

/* ── 초등만 : 판 제목 옆에 작은 «지금 여기» 표 ───────────────── */
body.mf-kid .card.mf-here{
  outline: 3px solid var(--mf-accent, #3A5BA0);
  outline-offset: 3px;
  transition: outline-color .3s ease;
}

/* ── 움직임을 싫어하시는 분께는 전부 끈다 ───────────────────── */
@media (prefers-reduced-motion: reduce){
  .mf-touchable, .mf-glow, .mf-confetti i{ animation: none !important; }
  .mf-confetti{ display: none !important; }
}