/* ══════════════════════════════════════════════════════════════════════
   🏛 만지는 수학 — «캔버스 A안» 결 (2026-09-23)

   연소사 : *"너가 클로드 디자인에서 가져온 디자인 컨셉과 맞아 지는지 살펴봐줘"*
            → 재어 보니 **안 맞았다**(색 토큰 20 ↔ 0 · 바탕 회청 ↔ 크림 · 이모지 0 ↔ 21)
            *"이 판만 먼저 수정해봐"*

   색은 시안(본보기 정비례 편)에서 **그대로 떠 왔다** — 지어내지 않았다.
   ⛔ 이 결은 `body.mc` 가 붙은 편에만 걸린다. 다른 편은 한 점도 안 바뀐다.
   ══════════════════════════════════════════════════════════════════════ */
body.mc{
  --k1:#f8f6f1;  --k2:#1f2933;  --k3:#d9d5cc;  --k4:#efebe3;  --k5:#e2ddd2;
  --k6:#22304a;  --k7:#f8f6f1;  --k8:#5b6470;  --k9:#22304a;  --k10:#ffffff;
  --k11:#3a5ba0; --k12:#ffffff; --k13:#c2412d; --k14:#2f855a; --k15:#d3ccbe;
  --k16:#e7e2d8; --k17:#3b4350; --k18:#8a93a3; --k19:#e0a526; --k20:#f1eee6;

  background: var(--k18) !important;      /* 회청 바탕 */
  color: var(--k2) !important;
}

/* ① 상단바 — 남색 한 겹 */
body.mc .top{
  background: linear-gradient(145deg, var(--k11), var(--k2)) !important;
  color: var(--k12) !important;
}
body.mc .top h1,
body.mc .top p,
body.mc .top .badge{ color: var(--k12) !important; }
body.mc .top .badge{
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
}

/* ② 판 — 아이보리 한 장 (흰 상자들이 떠다니지 않게) */
body.mc .card{
  background: var(--k1) !important;
  border: 1px solid var(--k3) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(30,30,30,.08) !important;
  padding: 16px 18px !important;
}

/* ③ 판 머리줄 — 배지 + 제목 + 오른쪽 「판 n / N」 */
body.mc .mc-head{
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 9px; margin-bottom: 11px;
  border-bottom: 1px solid var(--k3);
}
body.mc .mc-badge{
  flex: 0 0 auto;
  background: var(--k11); color: var(--k12);
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 6px;
}
body.mc .mc-head h2{
  margin: 0 !important; font-size: 15.5px !important;
  color: var(--k2) !important; letter-spacing: -.015em;
}
body.mc .mc-sub{ color: var(--k8); font-size: 12.5px; font-weight: 600; }
body.mc .mc-nof{
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  color: var(--k8); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.mc .mc-dot{ width: 22px; height: 5px; border-radius: 3px; background: var(--k15); }
body.mc .mc-dot.on{ background: var(--k11); }

/* ④ HUD 를 판 «안» 한 줄로 */
body.mc .card > .hud{
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--k3) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 0 12px !important;
  padding: 0 0 10px !important;
  font-size: 12.5px !important;
  color: var(--k8) !important;
  font-variant-numeric: tabular-nums;
}
body.mc .card > .hud b,
body.mc .card > .hud strong{ color: var(--k2) !important; }

/* ⑤ 글 상자 — 색을 한 계통으로 두고 «왼쪽 색막대»로만 가른다 */
body.mc .card .quest,
body.mc .card .why,
body.mc .card .tip,
body.mc .card .field{
  background: var(--k20) !important;
  border: 1px solid var(--k3) !important;
  border-left: 3px solid var(--k8) !important;
  border-radius: 8px !important;
  color: var(--k2) !important;
  box-shadow: none !important;
}
body.mc .card .quest{ border-left-color: var(--k11) !important; }
body.mc .card .why  { border-left-color: var(--k19) !important; }
body.mc .card .tip  { border-left-color: var(--k14) !important; }
body.mc .card .quest .big{ color: var(--k11) !important; }
body.mc .card .quest.done{ border-left-color: var(--k14) !important; }

/* ⑥ 막대 — 라벨 아래 설명 한 줄 (시안처럼 «무엇을 만지는지»가 보이게) */
body.mc .mc-what{
  display: block; margin-top: 1px;
  font-size: 11.5px; font-weight: 600; color: var(--k8);
}
body.mc .card input[type=range]{ accent-color: var(--k11); }

/* ⑦ 단추 */
body.mc .card .btn,
body.mc .card button{
  background: var(--k10) !important;
  border: 1px solid var(--k3) !important;
  color: var(--k2) !important;
  border-radius: 8px !important;
}
body.mc .card .btn:hover,
body.mc .card button:hover{ border-color: var(--k11) !important; }

/* ⑧ 진행막대 — 회청 바탕 위에서도 보이게 */
body.mc .mf-steps .mf-label{ color: var(--k1) !important; }
body.mc .mf-steps .mf-step{ background: rgba(255,255,255,.30) !important; }
body.mc .mf-steps .mf-step.on{ background: var(--k1) !important; }

/* ⑨ 아직 제 색이 남아 있던 상자 둘 — 같은 계통으로 (실측으로 찾았다) */
body.mc .card .solve,
body.mc .card .huntb{
  background: var(--k20) !important;
  border: 1px solid var(--k3) !important;
  border-left: 3px solid var(--k11) !important;
  border-radius: 8px !important;
  color: var(--k2) !important;
}
body.mc .card .huntb{ border-left-color: var(--k19) !important; }

/* ⑩ 판 «머리줄»에 「판 n / N」을 넣었으니 카드 밖 진행막대는 겹친다 — 숨긴다 */
body.mc .mf-steps{ display: none !important; }