/* ══════════════════════════════════════════════════════════════════════
   🎨 만지는 수학 — 공통 틀 (2026-09-23)

   연소사 : "114편 전체에 이 틀 적용해줘"
            "더욱 재미 있고, 전문적이 될 수 있도록"
            "초등부 것은 너무 전문적 이기 보다는 더욱 재미 있게 해야 해"

   ⭐ 결을 둘로 가른다
      body.mf-kid   초등 59편 — 크고 둥글고 밝게 · 손맛 나는 움직임
      body.mf-pro   중고등 55편 — 촘촘하고 단정하게 · 숫자는 자리 맞춤

   ⛔ 편마다 있는 제 <style> 을 덮어야 하므로 **이 파일을 뒤에 싣는다**.
   ⛔ 114편 원본의 구조는 한 점도 안 바꾼다 — 겉모습과 배치만 얹는다.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --mf-gap: 18px;
  --mf-radius: 14px;
  --mf-line: rgba(0,0,0,.10);
}

/* ── 지면 폭을 넓혀 2단이 설 자리를 만든다 ───────────────────────── */
body .wrap{ max-width: 1180px !important; }

/* ── 판(card) 을 좌우 2단으로 ─────────────────────────────────────
   JS 가 그림 덩이를 .mf-L 로, 나머지를 .mf-R 로 싸 준다.
   🔴 오른쪽이 길면 flex 가 왼쪽을 같은 높이로 늘려 그림이 아래로 밀린다
      ⇨ align-items:flex-start + 왼쪽은 sticky 로 따라오게 (실측 규칙) */
body .card > .mf-two{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: var(--mf-gap);
}
body .card > .mf-two > .mf-L{
  flex: 0 0 42%;
  max-width: 42%;
  min-width: 0;
  align-self: flex-start;
  position: sticky;
  top: 10px;
}
body .card > .mf-two > .mf-R{
  flex: 1 1 auto;
  min-width: 0;
}
body .card > .mf-two > .mf-L svg{ max-width: 100%; height: auto; }
/* 🔴 2026-09-24 : 그림 속 KaTeX 근호(√)가 사라졌다 — 편의 `svg{width:100%;height:auto}` 와
      위 줄이 KaTeX 안쪽 svg(근호 획)까지 눌러 높이 0.1px 가 됐다.
      ⇨ KaTeX 자체 값(width:100% · height:inherit)으로 되돌린다 */
body .katex svg{ width: 100% !important; height: inherit !important; max-width: none !important; }

/* 좁은 화면에서는 위아래로 — 따라오기는 끈다 */
@media (max-width: 900px){
  /* 🔴 2026-09-25 실측 : 390px 에서 54편이 가로로 3~97px 넘쳤다 — 세로로 접을 때도 flex-start 가 남아
        오른쪽 칸이 «화면 폭»이 아니라 «안에 든 것의 최대 폭»으로 벌어졌다 ⇨ 폭에 맞추고 안쪽을 가둔다 */
  body .card > .mf-two{ flex-direction: column !important; align-items: stretch !important; }
  body .card > .mf-two > .mf-L{
    flex: none; max-width: 100%; position: static; margin-bottom: 10px;
  }
  body .card > .mf-two > .mf-L,
  body .card > .mf-two > .mf-R{ width: 100%; max-width: 100%; box-sizing: border-box; }
  body .card > .mf-two > .mf-R > *{ max-width: 100%; box-sizing: border-box; }
  body .card > .mf-two > .mf-R svg:not(.katex svg){ max-width: 100%; height: auto; }
  /* 막대 줄의 값 글이 한 줄로 굳어 칸 밖으로 나갔다(중2 닮음 128px 글) ⇨ 좁은 화면에서는 접게 */
  body .card .mf-R .val{ white-space: normal !important; min-width: 0; overflow-wrap: anywhere; }
}

/* ── 판 진행막대 — 지금 몇째 판인지 늘 보이게 ─────────────────── */
.mf-steps{
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 14px; flex-wrap: wrap;
}
.mf-steps .mf-step{
  flex: 1 1 60px; height: 7px; border-radius: 99px;
  background: var(--mf-line); cursor: pointer; border: 0; padding: 0;
  transition: background .18s ease, transform .18s ease;
}
.mf-steps .mf-step:hover{ transform: scaleY(1.6); }
.mf-steps .mf-step.on{ background: var(--mf-accent, #3A5BA0); }
.mf-steps .mf-label{
  flex: 0 0 auto;                      /* ⛔ 안 박으면 폭이 0 으로 줄어 글자가 세로로 쪼개진다 */
  font-size: 13px; font-weight: 700; opacity: .75; white-space: nowrap;
}

/* ══ 초등 결 — 크고 둥글고 밝게 ════════════════════════════════ */
body.mf-kid{ font-size: 18px; }
body.mf-kid .card{
  border-radius: 20px !important;
  padding: 20px 22px !important;
  box-shadow: 0 3px 14px rgba(0,0,0,.07);
  margin-bottom: 22px !important;
}
body.mf-kid .card > *{ line-height: 1.75; }
body.mf-kid .how,
body.mf-kid .why{ font-size: 17px !important; }
body.mf-kid h2{ font-size: 22px !important; letter-spacing: -.01em; }
/* 🔴 2026-09-26 : `body.mf-kid button` 이 머리의 ☰·아이콘 단추까지 22→44px 로 키워 배지를 덮었다(초1~5 44편)
      ⇨ 판 안 단추에만 건다 (.top·메뉴판은 제 크기) */
body.mf-kid .card .btn,
body.mf-kid .card button{
  border-radius: 999px !important;
  font-size: 17px !important;
  padding: 11px 20px !important;
}
/* 손이 가는 곳은 커야 한다 — 초등 손가락 기준 44px */
body.mf-kid input[type="range"]{ height: 30px; }
body.mf-kid .mf-steps .mf-step{ height: 10px; }
/* 성공했을 때 살짝 튀어오르게 — 만진 보람 */
body.mf-kid .result-banner,
body.mf-kid .mf-pop{ animation: mf-pop .42s cubic-bezier(.2,1.4,.5,1); }
@keyframes mf-pop{
  0%{ transform: scale(.86); opacity: 0 }
  60%{ transform: scale(1.04) }
  100%{ transform: scale(1); opacity: 1 }
}

/* ══ 중·고등 결 — 촘촘하고 단정하게 ════════════════════════════ */
body.mf-pro{ font-size: 15.5px; }
body.mf-pro .card{
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-bottom: 14px !important;
}
body.mf-pro h1{ font-size: 21px !important; }
body.mf-pro h2{ font-size: 17px !important; }
body.mf-pro .how{ font-size: 13.5px !important; opacity: .85; }
body.mf-pro .hud,
body.mf-pro .ctrl-val,
body.mf-pro .mf-num{ font-variant-numeric: tabular-nums; }
body.mf-pro .btn,
body.mf-pro button{ border-radius: 8px !important; font-size: 14.5px !important; }

/* ── 어느 결이든 : 그림이 글을 가리지 않게 ───────────────────── */
body .card svg{ overflow: visible; }
body .card > .mf-two > .mf-L > *{ margin-left: 0 !important; margin-right: 0 !important; }

/* ══════════════════════════════════════════════════════════════════
   🎈 초등을 «더 재미있게» — 2026-09-23 연소사
      "초등부 것은 너무 전문적 이기 보다는 더욱 재미 있게 해야 해"

   🔴 글씨 크기·모서리만 바꾸니 중고등과 거의 같아 보였다(눈으로 잡음).
      ⇨ **놀이판처럼** 보이게 세 군데를 더 손본다 :
         ① 그림 칸을 «놀이판»으로 (연한 바탕 · 도톰한 테두리 · 그림자)
         ② 판 번호를 동그란 «도장»으로
         ③ 제목을 크고 또렷하게 · 목표 상자를 말풍선처럼
   ══════════════════════════════════════════════════════════════════ */

/* ① 그림 칸 = 놀이판 */
body.mf-kid .card > .mf-two > .mf-L{
  background: rgba(255,255,255,.72);
  border: 2.5px solid rgba(0,0,0,.07);
  border-radius: 18px;
  padding: 12px 10px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.04);
}
body.mf-kid .card > .mf-two{ gap: 22px; }

/* ② 판 번호를 동그란 도장으로 — 원본에 있는 번호 딱지를 키운다 */
body.mf-kid .card h2{ display: flex; align-items: center; gap: 9px; }
body.mf-kid .card h2 > b:first-child,
body.mf-kid .card h2 > span:first-child{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; border-radius: 50%;
  background: var(--mf-accent, #3A5BA0); color: #fff;
  font-size: 17px; font-weight: 900; flex: 0 0 auto;
}

/* ③ 목표·주문 상자를 말풍선처럼 */
body.mf-kid .quest,
body.mf-kid .mission-box,
body.mf-kid .order{
  border-radius: 16px !important;
  border-width: 2.5px !important;
  font-size: 18px !important;
  position: relative;
}
body.mf-kid .why,
body.mf-kid .tip,
body.mf-kid .field{ border-radius: 14px !important; }

/* 손가락 힌트를 크게 — 만질 수 있다는 표 */
body.mf-kid .drag-hint,
body.mf-kid .hand-hint{ font-size: 20px !important; }

/* ══ 중·고등은 반대로 더 단정하게 ═══════════════════════════════ */
body.mf-pro .card > .mf-two > .mf-L{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  padding: 8px 6px;
}
body.mf-pro .card > .mf-two{ gap: 16px; }
body.mf-pro .drag-hint{ font-size: 13px !important; opacity: .7; }

/* 손가락 딱지는 판 머리가 아니라 그림 칸 안 오른쪽 위에 (2026-09-25 — 판 n / N 을 덮었다) */
.card > .mf-two > .mf-L{ position: relative; }
/* ⛔ 띄워 겹치면(absolute) 그림 글자·판 머리를 덮는다(1400px 14편 · 390px 거의 전 편 실측) ⇨ 자기 줄을 갖는다 */
.card .drag-hint.mf-hint-in,
.card > .drag-hint.mf-hint-low{
  position: static !important; display: block !important;
  width: max-content !important; max-width: 100%;
  margin: 0 0 6px auto !important; transform: none !important;
}
/* 위 줄의 margin-left:auto 가 「그림 칸 아이는 여백 0」(더 센 선택자)에 졌다 ⇨ 같은 세기로 한 번 더 */
body .card > .mf-two > .mf-L > .drag-hint.mf-hint-in{ margin-left: auto !important; }

/* ══════════════════════════════════════════════════════════════════
   🏛 «전문적으로 보이게» — 2026-09-23 연소사 *"이건 전문성있게 고쳐진 것인가?"*

   🔴 2단·목차·진행막대만 얹었더니 겉은 그대로였다.
      실측(중2 삼각형의성질) 머리띠 184px · 이모지 47개 · 본문 15.5px
      ↔ 완성형 본보기(정비례) 머리띠 한 줄 · 이모지 0개 · 본문 16px
   🔑 전문적으로 보이게 하는 것은 «색»이 아니라 **짜임과 밀도**다 —
      얇은 상단바 · 한 줄 머리 · 촘촘한 여백 · 이모지 0 · 자리 맞춤 숫자.
   ⛔ 하트·별(목숨·점수)과 단추 속 이모지는 기능이라 남긴다.
   ══════════════════════════════════════════════════════════════════ */

/* ① 머리띠를 한 줄로 — 184px 이 먹던 자리를 본문에 돌려준다
   🔴 2026-09-24 연소사 *"메뉴판 아이콘 부분 겹쳐 있어"* —
      `padding: … !important` 로 한꺼번에 주면 **위쪽도 덮어쓴다**.
      그 자리는 JS(`자리비우기()`)가 ☰ 아이콘줄을 «재서» 넣는 곳이다
      (인라인 `padding-top:44px`). 덮는 순간 ☰ 가 배지 위로 내려앉는다
      (실측 아이콘줄 14~36 ↔ 배지 13~47 — 가로·세로 22px 씩 겹침).
   ⇨ **위쪽은 절대 건드리지 않는다.** 좌·우·아래만 준다. */
body.mf-pro .top{
  padding-right: 16px !important;
  padding-bottom: 12px !important;
  padding-left: 16px !important;
  min-height: 0 !important;
}
body.mf-pro .top h1{
  font-size: 20px !important;
  margin: 0 0 2px !important;
  line-height: 1.25 !important;
}
body.mf-pro .top p,
body.mf-pro .top .sub{
  font-size: 12.5px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  opacity: .88;
}
body.mf-pro .top .badge{
  font-size: 11.5px !important;
  letter-spacing: .04em;
}

/* ② 본문 밀도 — 본보기와 같은 16px */
body.mf-pro{ font-size: 16px; }

/* ③ 글 상자 — 앞 이모지를 걷은 자리에 얇은 색 막대를 세운다 */
body.mf-pro .card .why.mf-tidy,
body.mf-pro .card .tip.mf-tidy,
body.mf-pro .card .quest.mf-tidy{
  border-left: 3px solid var(--mf-accent, #2d5a68);
  padding-left: 11px !important;
}
body.mf-pro .card h2.mf-tidy,
body.mf-pro .card h3.mf-tidy{ letter-spacing: -.015em; }

/* ④ 손가락 힌트 — 이모지 대신 한 줄 꼬리표로 */
body.mf-pro .mf-hint{
  display: inline-block;
  font-size: 11.5px !important;
  letter-spacing: .03em;
  font-weight: 700;
  color: var(--mf-accent, #2d5a68);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 9px;
  opacity: .72 !important;
}

/* ⑤ 한 줄로 바꾼 그림 안 분수 — 앞뒤 글자와 붙어 보이지 않게 */
.mf-frac1{ margin: 0 .22em; }

/* ══ ⑥ 실생활 사례 놀이터 (manji-cases.js · 2026-09-24) ══════════════
   판 머리 바로 밑에 폭 전체로 선다 — 누르면 판 자체가 그 사례로 바뀐다
   🔴 manji-canvas.css 의 `body.mc .card button`(!important)이 뒤에 실려 이긴다 —
      ⇨ `body .card .mcs-btn` 으로 한 단계 더 세게 · 색은 캔버스 토큰을 먼저 쓴다 */
.mcs-row{
  margin: 4px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--k3, var(--mf-line));
  border-radius: var(--mf-radius);
  background: var(--k20, rgba(58, 91, 160, .045));
}
.mcs-head{ font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--k8, inherit); margin-bottom: 8px; }
.mcs-btns{ display: flex; flex-wrap: wrap; gap: 8px; }
body .card .mcs-btn{
  display: inline-flex !important; align-items: center; gap: 7px;
  padding: 7px 13px 7px 10px !important;
  border: 1.5px solid var(--k3, var(--mf-line)) !important;
  border-radius: 999px !important;
  background: var(--k10, #fff) !important; color: var(--k2, inherit) !important;
  font-weight: 700; cursor: pointer; line-height: 1.25;
  transition: transform .12s, border-color .12s, background .12s;
}
body .card .mcs-btn .ic{ width: 18px; height: 18px; flex: none; }
body .card .mcs-btn .mcs-hint{ font-size: .8em; font-weight: 600; opacity: .62; }
body .card .mcs-btn:hover{ transform: translateY(-1px); border-color: var(--k11, var(--mf-accent, #3A5BA0)) !important; }
body .card .mcs-btn.on{
  border-color: var(--k11, var(--mf-accent, #3A5BA0)) !important;
  background: var(--k11, var(--mf-accent, #3A5BA0)) !important;
  color: var(--k12, #fff) !important;
  box-shadow: 0 2px 8px rgba(58, 91, 160, .28);
}
body .card .mcs-btn.on .mcs-hint{ opacity: .88; }
.mcs-story{ margin-top: 10px; font-size: .95em; line-height: 1.6; color: var(--k2, inherit); }
.mcs-story:empty{ display: none; }
body.mf-kid .card .mcs-btn{ font-size: 16px !important; padding: 9px 15px 9px 12px !important; }
body.mf-kid .card .mcs-btn .ic{ width: 22px; height: 22px; }
body.mf-pro .card .mcs-btn{ font-size: 13.5px !important; }
@media print{ .mcs-btns{ display: none; } .mcs-row{ border: 0; padding: 0; background: none; } }

/* ⑦ 그림 속 세로 분수(교과서 꼴) — 앞뒤 한글에 붙지 않게 (2026-09-25) */
svg foreignObject .katex{ margin: 0 .18em; }