/* 이진법 놀이판 (2026-10-01 새로 만듦) — 선반 위 전구 여덟 개.
   css/binary.css 는 미생물·큐비트·되감기 판도 함께 쓰므로 건드리지 않고, 새 판의 모양은 여기에 둔다.
   선반 윗면 높이와 전구 받침 자리는 js/binary.js 의 SHELF · FOOT (그림에서 잰 값). */
.bl-sec{margin:30px 0 0;padding-top:24px;border-top:1px solid var(--ink-3)}
.bl-h{font-family:var(--disp);font-weight:700;font-size:19px;margin-bottom:8px}
.bl-tip{color:var(--chalk-dim);font-size:14.5px;line-height:1.7;margin-bottom:12px}

.bl-read{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:4px 0 10px;min-height:52px}
.bl-dec{font-family:var(--mono);font-size:46px;line-height:1;color:var(--brass);min-width:2.2ch}
.bl-sum{font-family:var(--mono);font-size:16px;color:var(--chalk-dim)}
.bl-goal{font-size:16px;color:var(--chalk-dim)}
.bl-goal b{font-family:var(--mono);font-size:40px;color:var(--brass);margin-left:6px}

.bl-stage{position:relative;border-radius:var(--radius);overflow:hidden;background:#1a120b;user-select:none;-webkit-user-select:none}
.bl-bg{display:block;width:100%;height:auto;pointer-events:none}
.bl-row{position:absolute;left:0;right:0}
.bl-bulb{position:absolute;width:9.8%;padding:0;border:0;background:none;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.bl-bulb img{display:block;width:100%;height:auto;pointer-events:none;transition:filter .25s}
.bl-bulb:not(.is-on) img{filter:saturate(.7)}
.bl-bulb:hover img{filter:brightness(1.12)}
.bl-bulb:focus-visible{outline:2px solid #E3C86A;outline-offset:2px;border-radius:8px}
.bl-bulb.bl-pop img{animation:bl-pop .35s ease-out}
@keyframes bl-pop{0%{transform:scale(.92)}60%{transform:scale(1.06)}100%{transform:none}}
/* 놋쇠 명판 — 선반 앞면에 붙은 자리값 */
.bl-plate{position:absolute;left:50%;top:93%;transform:translateX(-50%);font-family:var(--mono);font-size:clamp(10px,1.6vw,14px);line-height:1;
  color:#3b2a0e;background:linear-gradient(180deg,#e9cf86,#b78f2e);padding:4px 6px 3px;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.45);pointer-events:none;white-space:nowrap}
.bl-bulb.is-on .bl-plate{background:linear-gradient(180deg,#fff0c0,#e3b84a)}

.bl-ctrl{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.bl-big{min-width:64px;height:48px;font-family:var(--mono);font-size:20px;border-radius:999px;cursor:pointer;
  color:#3b2a0e;border:1px solid #9c7a23;background:radial-gradient(circle at 50% 35%,#f4dc95,#c69a32);box-shadow:0 2px 0 #7d5f17}
.bl-big:active{transform:translateY(2px);box-shadow:0 0 0 #7d5f17}
.bl-small{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--ink-3);background:none;color:var(--chalk-dim);font-family:inherit;font-size:13.5px;cursor:pointer}
.bl-small:hover{color:var(--chalk);border-color:var(--chalk-dim)}
.bl-say{margin-top:12px;font-size:14.5px;line-height:1.75;color:var(--chalk-dim);min-height:1.75em}
.bl-say.is-win{color:var(--brass)}

.bl-input{width:100%;max-width:280px;height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--ink-3);background:var(--ink-2);color:var(--chalk);font-size:18px;font-family:inherit}
.bl-chars{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.bl-char{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:10px 12px;border-radius:10px;background:#1a120b}
.bc-g{grid-row:1/3;font-size:30px;text-align:center;color:#F3E7C2;font-family:var(--disp)}
.bc-n{font-size:12.5px;color:#C9B994}
.bc-b{display:flex;align-items:flex-end;flex-wrap:wrap;gap:1px}
.bc-b img{width:clamp(14px,3.4vw,26px);height:auto}
.bc-b img.gap{margin-right:8px}