/* 실험실(묶음 기계·칸 건물) 전용 스타일 — lab.js·bitslab.js 담당이 관리. app.css 뒤에 읽힌다.
   색·간격·반경은 DESIGN.md 토큰만: 잉크 #3b3252 · 판 #fffdf9 · 진법 4색 · 틴트 · 값 색 · palette-8(#5a7390 #c9636d) · 반경 8/11/18/pill */
#lab {
  --ink: #3b3252; --sub: #5a7390; --card: #fffdf9; --line: #e8e4f0; --yel: #ffd54a; --red: #c9636d;
  --b10: #b3831f; --b2: #7566c0; --b8: #2b968f; --b16: #2e77c8;
  --lab-top: 96px; --lab-dock: 120px;
  font-family: var(--kr); color: var(--ink); word-break: keep-all;
}
#lab .ic { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 위 막대: ← · 제목 · (사슬·단계 | 진법·칸막이 고르기) · 소리 */
#lab .lab-top { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
#lab .lab-title { display: flex; align-items: center; gap: 6px; min-height: 52px; margin: 0; padding: 8px 18px; border-radius: 9999px; background: rgba(255, 253, 249, .9);
  font: 800 24px/1.2 var(--kr); letter-spacing: -.01em; text-wrap: balance; white-space: nowrap; }
#lab .lab-top .sound { margin-left: auto; display: flex; gap: 10px; }

/* 사슬: 45(10) → 101101(2) → 55(8) · 단계: ① 2로 나누기 ② 아래에서 위로 읽기 … */
#lab .lab-path { flex: 1 1 420px; max-width: 820px; margin: 0 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 18px 10px; border-radius: 18px;
  background: rgba(255, 253, 249, .92); box-shadow: 0 14px 36px rgba(96, 74, 150, .16), 0 2px 6px rgba(96, 74, 150, .08); }
#lab .lab-path[hidden] { display: none; }
#lab .lp-chain { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; font: 600 32px/1.15 var(--num); font-variant-numeric: tabular-nums; }
#lab .lc { display: inline-flex; align-items: baseline; white-space: nowrap; }
#lab .lv { letter-spacing: .02em; }
#lab .lq { display: inline-grid; place-items: center; width: .82em; height: 1.05em; margin: 0 1px; border: 3px dashed #cdc5de; border-radius: 8px; color: var(--sub); font-size: .7em; vertical-align: middle; transform: translateY(-.08em); }
#lab .ll { color: var(--b16); }
#lab .la { color: var(--sub); font-weight: 600; font-size: .8em; }
#lab .lb { display: inline-block; margin-left: 3px; padding: 1px 8px 2px; border-radius: 9999px; background: #fff; font: 700 17px/1.2 var(--num); transform: translateY(.1em); box-shadow: inset 0 0 0 2px var(--bc, var(--ink)); }
#lab .lb.b10, #numDlg .lb.b10 { --bc: var(--b10); color: #8a6417; } #lab .lb.b2, #numDlg .lb.b2 { --bc: var(--b2); color: var(--b2); }
#lab .lb.b8, #numDlg .lb.b8 { --bc: var(--b8); color: #1f716b; } #lab .lb.b16, #numDlg .lb.b16 { --bc: var(--b16); color: var(--b16); }
#lab .lp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font: 600 17px/1.3 var(--kr); color: var(--sub); }
#lab .lp-steps li { display: inline-flex; align-items: center; gap: 6px; }
#lab .lp-steps .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 9999px; box-shadow: inset 0 0 0 2px #cdc5de; font: 700 15px var(--num); }
#lab .lp-steps .no svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#lab .lp-steps li.on { color: var(--ink); font-weight: 800; }
#lab .lp-steps li.on .no { background: var(--yel); box-shadow: none; color: var(--ink); }
#lab .lp-steps li.ok .no { background: #8fdfb9; box-shadow: none; color: #1f5a41; }

/* 진법 · 칸막이 고르기(자유 실험만) */
#lab .lab-pick { display: flex; gap: 6px; padding: 6px; margin-left: auto; border-radius: 9999px; background: rgba(255, 253, 249, .9); box-shadow: 0 14px 36px rgba(96, 74, 150, .16); }
#lab .lab-pick[hidden] { display: none; }
#lab .lab-pick + .sound { margin-left: 0; }
#lab .lp-opt { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 64px; padding: 0 18px; border: 0; border-radius: 9999px; background: transparent; color: var(--ink);
  font: 700 22px var(--kr); cursor: pointer; transition: transform .3s cubic-bezier(.22, .61, .36, 1); white-space: nowrap; }
#lab .lp-opt .num { font: 700 28px var(--num); }
#lab .lp-opt:hover { transform: translateY(-2px); }
#lab .lp-opt:active { transform: translateY(2px); }
#lab .lp-opt:focus-visible { outline: 4px solid var(--b16); outline-offset: 2px; }
#lab .lp-opt[aria-checked="true"] { color: #fff; background: var(--ink); }
#lab .lp-opt.b2[aria-checked="true"] { background: var(--b2); } #lab .lp-opt.b8[aria-checked="true"] { background: var(--b8); }
#lab .lp-opt.b10[aria-checked="true"] { background: var(--b10); } #lab .lp-opt.b16[aria-checked="true"] { background: var(--b16); }
#lab .lp-opt.target::after { content: ""; position: absolute; inset: -5px; border-radius: 9999px; border: 4px solid var(--yel); pointer-events: none; }
#lab .lp-opt .lb { font-size: 15px; }
#lab .lp-opt[aria-checked="true"] .lb { box-shadow: none; color: var(--ink); }
#lab .cells { display: inline-flex; gap: 2px; padding: 3px; border-radius: 6px; box-shadow: inset 0 0 0 2px currentColor; }
#lab .cells i { width: 9px; height: 13px; border-radius: 3px; border: 2px solid currentColor; opacity: .75; }
#lab .cells.open { box-shadow: none; gap: 4px; }

/* ── 크게 작게 보기: 무대 오른쪽 가운데. [맞춤]은 크게·옮겼을 때만 */
#lab .lab-zoom { position: absolute; right: max(12px, env(safe-area-inset-right)); top: calc((var(--lab-top) + 100dvh - var(--lab-dock)) / 2); transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; padding: 6px; border-radius: 9999px; background: rgba(255, 253, 249, .78); box-shadow: 0 14px 36px rgba(96, 74, 150, .14); }
#lab .zb { width: 56px; min-width: 56px; min-height: 56px; border-radius: 9999px; box-shadow: none; background: transparent; }
#lab .zb .ic { width: 26px; height: 26px; }
#lab .zb[disabled] { opacity: .35; }
#lab .zb[hidden] { display: none; }

/* ── 아래 조작 막대: 숫자 고르기 · (젤리 1개) · 한 단계 · 자동 · 처음부터 */
#lab .lab-dock { position: absolute; left: 50%; right: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 10px; align-items: stretch;
  padding: 10px; border-radius: 18px; background: rgba(255, 253, 249, .78); box-shadow: 0 14px 36px rgba(96, 74, 150, .16), 0 2px 6px rgba(96, 74, 150, .08); max-width: calc(100% - 24px); }
#lab .lab-dock .btn { flex-direction: column; gap: 4px; min-width: 104px; min-height: 80px; padding: 8px 14px; border-radius: 18px; font: 700 20px/1.1 var(--kr); }
#lab .lab-dock .btn[hidden] { display: none; }
#lab .lab-dock .btn.step { min-width: 176px; font-size: 22px; }
#lab .lab-dock .pic { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; font: 700 26px var(--num); }
#lab .lab-dock .pic svg.icon { display: block; }
#lab .lab-dock .pic .ic { width: 30px; height: 30px; }
#lab .lab-dock .pic .cells i { width: 11px; height: 16px; }
#lab .lab-dock .pic .wts { font: 700 22px var(--num); letter-spacing: .08em; }
#lab .lab-dock .pic .zic { width: 26px; height: 26px; border-radius: 50%; border: 7px solid #cfc8de; box-sizing: border-box; }
#lab .lab-dock .pic .jel { width: 24px; height: 24px; border-radius: 8px; background: #ff8db4; box-shadow: inset 0 -3px 0 rgba(224, 98, 143, .5); }
#lab .lab-dock .pic b { font: 700 24px var(--num); }
#lab .lab-dock .pill { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.3em; padding: 0 .3em; border-radius: 9999px; color: #fff; font: 700 22px var(--num); }
#lab .pill.b2 { background: var(--b2); } #lab .pill.b8 { background: var(--b8); } #lab .pill.b10 { background: var(--b10); } #lab .pill.b16 { background: var(--b16); }
#lab #lAuto[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* 키보드로 전구 켜고 끄기(초점이 들어오면 보인다) */
#lab .lab-keys { position: fixed; left: 50%; bottom: calc(var(--lab-dock) + 8px); z-index: 3; display: flex; gap: 8px; padding: 8px; border-radius: 18px; background: rgba(255, 253, 249, .96); box-shadow: 0 14px 36px rgba(96, 74, 150, .16); transform: translateX(-50%); }
#lab .lab-keys[hidden] { display: none; }
#lab .lab-keys:not(:focus-within) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
#lab .lab-keys .btn { min-width: 64px; padding: 0 12px; font: 700 22px var(--num); }
#lab .lab-keys .btn[aria-pressed="true"] { background: var(--yel); color: var(--ink); }

/* ── 숫자 고르기 */
#numDlg { --ink: #3b3252; --sub: #5a7390; --b10: #b3831f; --b2: #7566c0; --b8: #2b968f; --b16: #2e77c8; color: var(--ink); word-break: keep-all; }
#numDlg .sheet-head h2 { text-wrap: balance; }
#numDlg .np-out { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 10px; border-radius: 18px; background: #fffdf9; box-shadow: inset 0 0 0 3px #e8e4f0; }
#numDlg .np-out .num { font: 700 64px/1.1 var(--num); min-width: 1.4em; text-align: center; letter-spacing: .02em; }
#numDlg .np-out .unit { font: 700 24px var(--kr); }
#numDlg .np-out .lb { display: inline-block; padding: 1px 10px 3px; border-radius: 9999px; background: #fff; font: 700 22px var(--num); box-shadow: inset 0 0 0 2px var(--bc, var(--ink)); }
#numDlg .np-out.bad { box-shadow: inset 0 0 0 4px #c9636d; }
#numDlg .np-hint { margin: 10px 0 14px; text-align: center; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
#numDlg .np-keys { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 10px; }
#numDlg .np-keys.wide { grid-template-columns: repeat(4, 1fr); }
#numDlg .np-keys.wide .del, #numDlg .np-keys.wide .ok { grid-column: span 2; }
#numDlg .nk { min-height: 68px; border: 0; border-radius: 18px; background: #fffdf9; color: var(--ink); font: 700 32px var(--num); cursor: pointer;
  box-shadow: 0 6px 0 rgba(59, 50, 82, .12), 0 14px 36px rgba(96, 74, 150, .12); transition: transform .3s cubic-bezier(.22, .61, .36, 1); display: inline-flex; align-items: center; justify-content: center; }
#numDlg .nk:hover { transform: translateY(-2px); }
#numDlg .nk:active { transform: translateY(3px); }
#numDlg .nk:focus-visible { outline: 4px solid var(--b16); outline-offset: 3px; }
#numDlg .nk.lt { color: var(--b16); }
#numDlg .nk.ok { background: #ffd54a; font: 800 24px var(--kr); }
#numDlg .nk.ok[disabled] { opacity: .42; cursor: not-allowed; transform: none; }
#numDlg .nk .ic { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── 3D 위 HUD(논리 px): 숫자 띠 · 16진 찌그러짐 · 넘침 판 */
.hud .dstrip { display: grid; gap: 10px 10px; align-items: start; padding: 16px 22px; font-size: 46px; }
.hud .dstrip.s16 { grid-template-columns: repeat(8, auto) auto; }
.hud .dstrip.s16 .over { grid-column: 9; grid-row: 1 / span 2; align-self: center; margin-left: 10px; }
.hud .dstrip.s8 { grid-template-columns: repeat(8, auto) auto; }
.hud .dstrip.s8 .over { margin-left: 10px; }
.hud .dstrip .sd { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 3px; border-radius: 18px; }
.hud .dstrip .sd.hit { background: #fff3c4; box-shadow: 0 0 0 4px #ffd54a; }
.hud .dstrip .sv { display: inline-flex; align-items: baseline; font: 600 24px var(--num); color: var(--ink); }
.hud .dstrip .sv .bs { font-size: 15px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--bc, var(--ink)); transform: none; }
.hud .dstrip .bs.b10 { --bc: #b3831f; } .hud .dstrip .bs.b8 { --bc: #2b968f; } .hud .dstrip .bs.b16 { --bc: #2e77c8; }
.hud .dstrip .chip.ov { background: transparent; color: #8f86a8; box-shadow: inset 0 0 0 4px #cdc5de; border: 0; outline: 3px dashed #cdc5de; outline-offset: -3px; }
.hud .sqwrap { position: absolute; }
.hud .sqbox { box-shadow: 0 0 0 5px #c9636d, inset 0 -.07em 0 rgba(59, 50, 82, .14); overflow: hidden; min-width: 1.25em; }
.hud .sq2 { display: inline-block; transform: scaleX(.6); letter-spacing: -.07em; font-weight: 700; }
.hud .sqx { position: absolute; right: -14px; top: -14px; line-height: 0; }
.hud .sqband { display: flex; align-items: center; gap: 12px; padding: 6px 26px; font-size: 60px; }
.hud .card.ovf { display: flex; align-items: center; gap: 12px; padding: 6px 26px; font-size: 44px; }

/* ── 덩어리 층: 더미 ×배지 · 빠른 나눗셈 ×세기 · 등식 카드(32 = 16 + 16) · 방 게이지 */
.hud .pileb .chip { font-size: 40px; background: #fffdf9; box-shadow: 0 6px 16px rgba(96, 74, 150, .22), inset 0 0 0 3px #cdc5de; }
.hud .cntb { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9999px; background: #fffdf9; box-shadow: 0 10px 26px rgba(96, 74, 150, .2); font-size: 40px; }
.hud .cntb .chip { box-shadow: none; }
.hud .eqfx { gap: 12px; padding: 6px 26px; font-size: 52px; }
.hud .gz { height: 26px; border-radius: 9999px; background: rgba(255, 253, 249, .94); box-shadow: inset 0 0 0 2px #cdc5de, 0 3px 8px rgba(96, 74, 150, .18); overflow: hidden; }
.hud .gz .gf { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; }
.hud .gz .gt { position: absolute; inset: 0; display: grid; place-items: center; font: 700 20px/1 var(--num); color: var(--ink); font-variant-numeric: tabular-nums; }
.hud .gz.seg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(var(--seg) - 2px), #fffdf9 calc(var(--seg) - 2px) var(--seg)); }
.hud .gz.full { box-shadow: inset 0 0 0 3px #b3831f, 0 0 0 4px rgba(255, 213, 74, .6); }
.hud .gz.over { box-shadow: inset 0 0 0 3px #c9636d, 0 3px 8px rgba(96, 74, 150, .18); }

/* ── 좁은 화면: 제목은 읽기 전용으로 숨기고(사슬 줄이 같은 정보), 폰은 사슬·고르기를 둘째 줄로 */
@media (max-width: 1100px) {
  #lab .lab-title { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
  #lab .lab-path { flex-basis: 280px; padding: 6px 14px 8px; }
  #lab .lp-chain { font-size: 28px; }
}
@media (max-width: 960px) and (orientation: landscape) {
  #lab .lp-opt .w { display: none; }
  #lab .lp-opt.lgs .cells { display: none; }
  #lab .lp-opt.lgs[data-g="0"] .w { display: inline; }
  #lab .lab-dock .btn { min-width: 92px; min-height: 72px; padding: 6px 10px; }
  #lab .lab-dock .btn.step { min-width: 150px; }
}
@media (max-width: 700px) {
  #lab .lab-top { gap: 8px; padding: max(8px, env(safe-area-inset-top)) 8px 6px; }
  #lab .lab-path, #lab .lab-pick { order: 5; flex: 1 1 100%; max-width: none; margin: 0; }
  #lab .lab-pick { justify-content: space-between; padding: 4px; }
  #lab .lp-opt { flex: 1; justify-content: center; padding: 0 8px; min-width: 0; }
  #lab .lp-opt.b2 .w, #lab .lp-opt.b8 .w, #lab .lp-opt.b10 .w, #lab .lp-opt.b16 .w, #lab .lp-opt.lgs .cells { display: none; }
  #lab .lp-opt.lgs .w { font-size: 18px; }
  #lab .lp-chain { font-size: 24px; gap: 2px 8px; }
  #lab .lb { font-size: 15px; padding: 0 6px 1px; }
  #lab .lp-steps { font-size: 16px; gap: 2px 10px; }
  #lab .lp-steps li:not(.on) .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #lab .lab-top .sound { order: 1; margin-left: auto; }
  #lab .lab-zoom { padding: 4px; gap: 4px; }
  #lab .zb { width: 52px; min-width: 52px; min-height: 52px; }
  #lab .lab-dock { left: 8px; right: 8px; transform: none; max-width: none; bottom: calc(8px + env(safe-area-inset-bottom)); gap: 6px; padding: 6px; }
  #lab .lab-dock .btn { flex: 1 1 0; min-width: 0; min-height: 72px; padding: 6px 4px; font-size: 17px; letter-spacing: -.02em; }
  #lab .lab-dock .btn.step { flex: 1.6 1 0; min-width: 0; font-size: 18px; }
  #lab .lab-dock .pic { font-size: 22px; min-height: 28px; }
}

/* 터치: 두 번 눌러 확대 지연 없이 · 움직임 줄이기면 단추 움직임도 멈춤 */
#lab button, #lab a, #numDlg button { touch-action: manipulation; }
#numDlg { overscroll-behavior: contain; }
#numDlg .np-out .num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { #lab .lp-opt, #numDlg .nk { transition: none; } #lab .lp-opt:hover, #numDlg .nk:hover { transform: none; } }

/* 사다리: 세·네 자리 수(100~2048)는 글자와 묶음 그림을 조금 작게(나머지 칸과 겹치지 않게) */
.labLad.n3 .lrow .nm { font-size: 46px; letter-spacing: -.01em; }
.labLad.n4 .lrow .nm { font-size: 40px; letter-spacing: -.02em; }
.labLad.n3 .lrow .nm svg.icon { max-width: 30px; max-height: 44px; height: auto; margin-right: 2px; }

/* 숫자 고르기: 자릿수 단추(1·2·3·4자리 아무 수) */
#numDlg .np-digs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
#numDlg .np-digs[hidden] { display: none; }
#numDlg .nd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 76px; padding: 6px 4px; border: 0; border-radius: 18px;
  background: #f1edff; color: var(--ink); cursor: pointer; box-shadow: inset 0 0 0 2px #cdc5de; transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
#numDlg .nd .dn { font: 700 30px/1 var(--num); }
#numDlg .nd .dw { font: 700 17px/1.1 var(--kr); }
#numDlg .nd .dr { font: 600 16px/1.1 var(--num); color: var(--sub); font-variant-numeric: tabular-nums; }
#numDlg .nd:hover { transform: translateY(-2px); }
#numDlg .nd:active { transform: translateY(2px); }
#numDlg .nd:focus-visible { outline: 4px solid var(--b16); outline-offset: 3px; }
#numDlg .nd[disabled] { cursor: progress; }
@media (prefers-reduced-motion: reduce) { #numDlg .nd { transition: none; } #numDlg .nd:hover { transform: none; } }