/* 9판 마을 실험(exps.js, #tip 화면). 토큰은 app.css :root(DESIGN.md 진법젤리 확장)만. 반경 18 · 11 · 끝까지 둥글게. 숫자 Fredoka · 한글 Pretendard.
   움직임은 누른 결과를 보여 줄 때만(손가락 펴기 · 카드 넘기기 · 짠! 뒤집기 · 저울 기울기 · 로켓) — 줄인 움직임이면 바로 그 모습. */
.cheer { display: block; width: 72px; height: 72px; flex: none; }
.cheer.pop { animation: chop .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes chop { 0% { transform: translateY(14px) scale(.6, .4); } 45% { transform: translateY(-16px) scale(.92, 1.1); } 70% { transform: translateY(0) scale(1.08, .92); } }
.ex-goal { display: grid; justify-items: center; gap: 12px; min-height: 64px; }
.ex-q { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin: 0; font: 700 24px/1.3 var(--kr); }
.ex-q .big { font-size: 40px; color: var(--b2); }
.ex-done { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin: 0; font: 800 24px/1.3 var(--kr); text-wrap: balance; text-align: center; }
.ex-done.big { flex-direction: column; padding: 24px; border-radius: 18px; background: linear-gradient(180deg, var(--t16), var(--card) 62%); box-shadow: var(--shadow); }
.ex-say { min-height: 40px; }
.tp-body h2 { font: 800 20px/1.3 var(--kr); }

/* 램프(칸 하나의 불) — 손 실험 .tsw .lamp 와 같은 모양 */
.ab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ab .lamp { width: 28px; height: 28px; border-radius: 50%; background: #e1dbee; }
.ab.on .lamp { background: var(--v4); box-shadow: 0 0 0 3px rgba(201, 154, 28, .45), 0 0 14px 4px rgba(255, 213, 74, .7); }
.ab .wt { font-size: 16px; color: var(--ink-2); }
.ab > .num:last-child { font: 700 24px var(--num); }

/* ── 1 손가락 2진법: 손 그림 + 겹친 투명 단추 */
.ex-hand { position: relative; width: min(100%, 440px); aspect-ratio: 400 / 360; margin: 0 auto; }
.hand { display: block; width: 100%; height: 100%; overflow: visible; }
.hand .palm { fill: var(--card); stroke: var(--ink); stroke-width: 5; }
.hand .fg { fill: var(--zero); stroke: var(--ink); stroke-width: 5; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--fold)); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.hand .fg.on { fill: var(--c); transform: none; }
.hand .thumbg { transform: rotate(24deg); transform-origin: 316px 268px; }
.hand .face ellipse { fill: var(--ink); }
.hand .face path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.hand .face .blush { fill: var(--v1); opacity: .45; }
.hand .bd { font: 700 30px var(--num); fill: var(--mute); text-anchor: middle; dominant-baseline: middle; }
.hand .bd.on { fill: var(--ink); }
.fbtn { position: absolute; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 6px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; touch-action: manipulation; }
.fbtn.f4 { rotate: 24deg; align-items: center; padding: 0 0 0 6px; }
.tp-line .nw { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 12px; }   /* 더하기 식은 한 덩어리로(줄바꿈은 = 앞뒤에서만) */
.fbtn .fw { font-size: 22px; transition: opacity .25s; }
.fbtn:not(.on) .fw { opacity: .55; }
.fbtn:focus-visible { outline: 4px solid var(--b16); outline-offset: 2px; }
@media (hover: hover) { .fbtn:hover .fw { opacity: 1; scale: 1.12; } }
.fbtn .fw { transition: opacity .25s, scale .25s var(--ease); }

/* ── 2 마술 카드(10판 공연): 순서 띠 · 마술사 박사 · 카드 한 장씩 크게 · 짠!(뒤집기 + 반짝) · 비밀 공개(큰 수부터 1 / 0) */
.mflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 640px; width: 100%; margin: 0 auto; padding: 0; list-style: none; }
.mflow li { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 4px 10px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); font: 700 17px/1.2 var(--kr); color: var(--ink-2); text-align: center; }
.mflow li .num { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 17px; }
.mflow li.done { background: var(--t2); color: var(--ink); box-shadow: none; }
.mflow li[aria-current] { background: var(--ink); color: #fff; box-shadow: none; }
.mflow li[aria-current] .num { background: var(--v4); }
.mmage { display: block; flex: none; width: 128px; height: auto; filter: drop-shadow(0 10px 14px rgba(96, 74, 150, .18)); }
.mmage.bob { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -8px; } }
.mstage { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 28px; padding: 24px 20px; border-radius: 18px; background: linear-gradient(180deg, var(--t2), var(--card) 70%); box-shadow: var(--shadow); }
.msay { display: grid; gap: 8px; max-width: 460px; padding: 18px 22px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px rgba(59, 50, 82, .08), 0 8px 20px rgba(96, 74, 150, .12); font: 600 22px/1.45 var(--kr); text-wrap: pretty; }
.msay p { margin: 0; }
.mrange { font: 700 64px/1 var(--num); color: var(--b2); }
.mrange .op { margin: 0 6px; color: var(--ink-2); }
.msub { margin: 0; font: 600 18px/1.45 var(--kr); color: var(--ink); text-align: center; text-wrap: pretty; }
.msay .msub { text-align: left; }
.msub .nb { white-space: nowrap; }
.mdeck { display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mdeck li { display: grid; place-items: center; width: 44px; height: 56px; border-radius: 9px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); font: 700 20px var(--num); color: var(--ink-2); }
.mdeck li .ic { width: 24px; height: 24px; }
.mdeck li.now { background: var(--v4); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
.mdeck li.is-y { background: var(--t8); color: var(--ink); box-shadow: inset 0 0 0 2px var(--b8); }
.mdeck li.is-n { background: var(--zero); color: var(--ink-2); box-shadow: none; }
.mbig { width: min(100%, 520px); margin: 0 auto; padding: 16px 20px 22px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 5px var(--c), var(--shadow); }
.mbig.pop { animation: deal .5s var(--ease); }
@keyframes deal { from { opacity: 0; transform: perspective(900px) translateX(48px) rotateY(-50deg); } }
.mbh { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 20px var(--kr); color: var(--ink-2); }
.mbh > .num:first-child { margin-right: auto; }
.mbh .mfirst { font-size: 34px; }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; font: 600 38px/1.35 var(--num); text-align: center; }
.mgrid li { border-radius: 11px; }
.mgrid li.first { background: var(--c); box-shadow: inset 0 -3px 0 rgba(59, 50, 82, .14); font-weight: 700; }
.mq { margin: 0; font: 800 26px/1.35 var(--kr); text-align: center; text-wrap: balance; }
.mq b { color: var(--b2); }
.mshow { display: grid; justify-items: center; gap: 10px; padding: 22px 16px 28px; border-radius: 18px; background: linear-gradient(180deg, var(--t2), var(--card) 62%); box-shadow: var(--shadow); }
.mshow .mmage { width: 108px; }
.mtalk { margin: 0; font: 800 26px var(--kr); text-align: center; text-wrap: balance; }
.mflip { position: relative; width: 190px; height: 190px; perspective: 900px; }
.mf { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; backface-visibility: hidden; animation: flipA .7s var(--ease) .75s both; }
.mf.front { background: var(--ink); color: var(--v4); font: 700 110px/1 var(--num); }
.mf.back { background: var(--card); color: var(--b2); font: 700 112px/1 var(--num); box-shadow: inset 0 0 0 5px var(--b2), var(--shadow); animation-name: flipB; }
@keyframes flipA { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes flipB { from { transform: rotateY(-180deg); } to { transform: rotateY(0); } }
.mflip.now .mf.front { display: none; }
.mflip.now .mf.back { animation: none; }
.spk { position: absolute; inset: 0; pointer-events: none; }
.spk i { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; background: var(--v4); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: spark .9s var(--ease) 1.3s both; }
.spk i:nth-child(1) { --x: -130px; --y: -60px; } .spk i:nth-child(2) { --x: 128px; --y: -74px; } .spk i:nth-child(3) { --x: -140px; --y: 54px; }
.spk i:nth-child(4) { --x: 136px; --y: 62px; background: var(--v1); } .spk i:nth-child(5) { --x: -40px; --y: -122px; background: var(--v16); } .spk i:nth-child(6) { --x: 48px; --y: 120px; background: var(--v8); }
@keyframes spark { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.2) rotate(90deg); } }
.mflip.now .spk { display: none; }
.mwhy { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: min(100%, 640px); margin: 0 auto; padding: 0; list-style: none; }
.mwhy li { display: grid; justify-items: center; gap: 8px; padding: 14px 6px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); animation: rise .45s var(--ease) calc(var(--i) * .14s) both; }
.mwhy li.is-y { background: var(--t2); box-shadow: inset 0 0 0 3px var(--b2); }
.mwhy li.is-n { background: var(--zero); box-shadow: none; }
.mmini .chip { font-size: 30px; }
.mans { font: 700 18px var(--kr); }
.mwhy .mbit { font-size: 28px; }
.mwhy .mbit.zero { background: var(--card); color: var(--ink-2); }
.msum { animation: rise .45s var(--ease) .8s both; }

/* ── 3 글자도 숫자예요 */
.asc { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; padding: 18px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px rgba(59, 50, 82, .08); }
.abig { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 18px; background: linear-gradient(180deg, var(--t8), var(--card) 62%); box-shadow: inset 0 0 0 3px var(--b8); font: 700 112px/1 var(--num); color: var(--ink); }
.aside { display: grid; justify-items: center; gap: 10px; }
.aside .tp-line { font-size: 34px; }
.abits { display: flex; gap: 6px; }
.azk { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.azb { min-width: 0; padding: 0; font-size: 28px; }
.aname { display: grid; gap: 10px; justify-items: center; }
.arow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.arow li { display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 8px 10px; border-radius: 11px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); font: 600 18px var(--num); }
.arow li b { font-size: 30px; }
.arow li .n { font-size: 20px; }
.arow .empty, .spairs .empty { min-width: 0; padding: 8px 14px; font: 600 18px var(--kr); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); background: transparent; }

/* ── 4 전구판 16진법 읽기: [문제 풀기] 무늬 보고 고르기 · [내가 만들기] 전구 단추 8칸(4칸마다 한 글자) */
.hxm { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hxarea { display: grid; gap: 20px; }
.hxb { display: flex; justify-content: center; gap: 8px; padding: 18px 12px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px rgba(59, 50, 82, .08); }
.hxb .ab.cut { margin-right: 18px; }
.hxb .ab.cut::after { content: ""; position: absolute; top: -6px; bottom: -6px; right: -14px; width: 4px; border-radius: 2px; background: var(--b16); }
.hxb.ln-faint .ab.cut::after { opacity: .3; }
.hxb.ln-none .ab.cut { margin-right: 0; }
.hxb.ln-none .ab.cut::after { display: none; }
.hxb:not(.ln-solid):not(.hint) .wt { visibility: hidden; }
.hxc { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hxo { position: relative; min-width: 140px; min-height: 88px; font: 700 44px var(--num); }
.hxo[disabled] { animation: shake .4s var(--ease); }
.hxmk { display: flex; justify-content: center; align-items: stretch; gap: 14px; padding: 18px 12px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px rgba(59, 50, 82, .08); }
.hxgrp { display: grid; justify-items: center; gap: 12px; }
.hxbits { display: flex; gap: 6px; }
.hbit { min-width: 64px; min-height: 64px; padding: 6px 4px 8px; border: 0; border-radius: 11px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation; }
.hbit.on { background: var(--t16); }
@media (hover: hover) { .hbit:not([disabled]):hover { background: var(--t2); } .hbit.on:not([disabled]):hover { background: var(--t16); } }
.hbit:focus-visible { outline: 4px solid var(--b16); outline-offset: 2px; }
.hbit[disabled] { cursor: default; }
.hxcut { flex: none; width: 4px; border-radius: 2px; background: var(--b16); }
.hxdig { display: grid; justify-items: center; gap: 2px; min-width: 120px; margin: 0; padding: 8px 14px; border-radius: 11px; background: var(--t16); }
.hxdig b { font: 700 56px/1.05 var(--num); }
.hxdig b .chip { font-size: .9em; }
.hxdig .qm { color: var(--b16); }
.hxsum { font-size: 18px; color: var(--ink); }
.hbit .wt { color: var(--ink); }
.rk { position: absolute; right: 8px; top: -18px; color: var(--b16); }
.rk .ic { width: 36px; height: 36px; }
.rk.go { animation: launch 1.4s cubic-bezier(.55, 0, .75, .4) .1s forwards; }
@keyframes launch { 20% { transform: translateY(6px) rotate(-8deg); } 100% { transform: translateY(-62vh) rotate(-8deg); opacity: 0; } }

/* ── 5 진법 저울: 팔(기울기 --t)에 접시 둘이 매달리고, 접시는 거꾸로 돌려 늘 수평 */
.scl { --t: 0deg; position: relative; width: min(100%, 600px); height: 290px; margin: 0 auto; }
.scl .post { position: absolute; left: 50%; top: 66px; bottom: 0; translate: -50% 0; width: 18px; border-radius: 9px 9px 4px 4px; background: var(--mute); }
.scl .post::after { content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: 96px; height: 16px; border-radius: 8px; background: var(--mute); }
.arm { position: absolute; left: 22%; right: 22%; top: 62px; height: 14px; rotate: var(--t); transition: rotate .6s cubic-bezier(.3, 1.4, .5, 1); }
.beam { position: absolute; inset: 0; border-radius: 7px; background: var(--ink); }
.beam::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 26px; height: 26px; border-radius: 50%; background: var(--v4); box-shadow: inset 0 0 0 4px var(--ink); }
.pan { position: absolute; top: 7px; width: min(200px, 40vw); display: grid; justify-items: center; gap: 6px; padding-top: 70px; rotate: calc(var(--t) * -1); transform-origin: 50% 0; transition: rotate .6s cubic-bezier(.3, 1.4, .5, 1); }
.pan.l { left: 0; translate: -50% 0; }
.pan.r { right: 0; translate: 50% 0; }
.pan::before { content: ""; position: absolute; left: 50%; top: 0; translate: -50% 0; width: 84%; height: 70px;   /* 고리에서 접시 양 끝으로 내려오는 줄 두 가닥 */
  background: linear-gradient(to top left, transparent calc(50% - 2px), var(--mute) calc(50% - 1px), var(--mute) calc(50% + 1px), transparent calc(50% + 2px)) left / 50% 100% no-repeat,
    linear-gradient(to top right, transparent calc(50% - 2px), var(--mute) calc(50% - 1px), var(--mute) calc(50% + 1px), transparent calc(50% + 2px)) right / 50% 100% no-repeat; }
.pan::after { content: ""; order: 2; width: 100%; height: 12px; border-radius: 0 0 18px 18px; background: var(--b2); }
.pempty { width: 100%; height: 64px; border-radius: 11px; border: 3px dashed var(--line); }
.pcard { min-width: 0; width: 100%; padding: 0 8px; font: 600 26px var(--num); }
.pv { order: 3; }
.sdeck { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.scard { min-width: 120px; font: 600 26px var(--num); }
.scard.up { opacity: .45; box-shadow: inset 0 0 0 3px var(--line); }
.spairs { display: grid; justify-items: center; gap: 10px; }
.spairs ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.spairs li { display: inline-flex; align-items: center; gap: 4px 8px; padding: 6px 14px; border-radius: 11px; background: var(--t8); box-shadow: inset 0 0 0 2px var(--ok); font: 600 24px var(--num); }

@media (max-width: 560px) {
  .ex-q { font-size: 20px; }
  .abig { width: 110px; height: 110px; font-size: 80px; }
  .aside .tp-line { font-size: 26px; }
  .abits, .hxb { gap: 4px; }
  .ab .lamp { width: 22px; height: 22px; }
  .ab .wt { font-size: 14px; }
  .ab > .num:last-child { font-size: 20px; }
  .hxb { padding: 14px 6px; }
  .hxb .ab.cut { margin-right: 12px; }
  .hxb .ab.cut::after { right: -9px; }
  .hxo { min-width: 96px; font-size: 36px; }
  .hxmk { flex-direction: column; align-items: center; gap: 10px; padding: 12px 6px; }
  .hxcut { width: 100%; height: 4px; }
  .hxgrp { grid-template-columns: auto auto; align-items: center; gap: 8px; }
  .hxbits { gap: 2px; }
  .hbit { min-width: 62px; padding: 4px 2px 6px; }
  .hxdig { min-width: 64px; padding: 6px 8px; }
  .hxdig b { font-size: 40px; }
  .hxsum { font-size: 16px; }
  .hxadd { display: none; }   /* 좁은 칸: 더하기 식은 빼고 10진법 값만 */
  .mflow { gap: 4px; }
  .mflow li { flex-direction: column; gap: 2px; min-height: 0; padding: 6px 2px; border-radius: 11px; font-size: 14px; }
  .mstage { padding: 18px 14px; gap: 14px; }
  .mmage { width: 96px; }
  .msay { padding: 14px 16px; font-size: 19px; }
  .mrange { font-size: 52px; }
  .mbig { padding: 12px 12px 16px; }
  .mgrid { font-size: 30px; gap: 4px; }
  .mq { font-size: 22px; }
  .mwhy { gap: 4px; }
  .mwhy li { padding: 10px 2px; gap: 6px; border-radius: 11px; }
  .mmini .chip { font-size: 22px; }
  .mans { font-size: 14px; }
  .mwhy .mbit { font-size: 22px; }
  .mflip { width: 160px; height: 160px; }
  .mf.front, .mf.back { font-size: 92px; }
  .scl { height: 270px; }
  .arm { left: 25%; right: 25%; }
  .pcard, .scard { font-size: 22px; }
  .scard { min-width: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .hand .fg, .arm, .pan { transition: none; }
  .cheer.pop, .rk.go, .hxo[disabled], .mmage.bob, .mbig.pop, .mf, .mwhy li, .msum { animation: none; }
  .mf.front, .spk { display: none; }
}