/* ── 이진법 놀이판 /binary/ ──────────────────────────────
   science.css 위에 얹는다. 스위치는 손가락으로 누르는 물건이므로
   판 전체를 모바일 기준으로 잡는다. */

.bn-sec{margin:34px 0 40px;padding:22px 20px 24px;border:1px solid var(--ink-3,rgba(140,160,200,.16));
  border-radius:13px}
.bn-h{font-family:'Gowun Batang',serif;font-size:1.02rem;margin:0 0 12px;opacity:.92}
.bn-tip{font-size:13.5px;line-height:1.7;opacity:.78;margin:0 0 14px}
.bn-note{font-size:12.5px;line-height:1.75;opacity:.62;margin:14px 0 0}

/* 예측 관문 */
.bn-gate{padding:14px 2px 4px}
.bn-gate-q{font-size:14.5px;line-height:1.7;margin:0 0 12px}
.bn-gate-btns{display:flex;gap:9px;flex-wrap:wrap}
.bn-gate-btns button{font:inherit;font-size:13.5px;padding:9px 16px;border-radius:8px;cursor:pointer;
  border:1px solid var(--ink-3,rgba(140,160,200,.2));background:transparent;color:inherit;transition:.15s}
.bn-gate-btns button:hover{border-color:var(--cyan,#6fb7c9)}
.bn-gate-a{font-size:13.5px;line-height:1.75;margin:13px 0 0;padding:11px 13px;border-radius:8px;
  background:rgba(111,183,201,.08);border:1px solid rgba(111,183,201,.25)}

/* 스위치 판 */
.bn-board{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:6px 0 14px}
.bn-bit{font:inherit;border:1px solid var(--ink-3,rgba(140,160,200,.2));border-radius:9px;
  background:transparent;color:inherit;cursor:pointer;padding:9px 2px 8px;text-align:center;
  transition:border-color .15s,background .15s;user-select:none;-webkit-user-select:none}
.bn-bit .bn-bulb{display:block;width:20px;height:20px;margin:0 auto 6px;border-radius:50%;
  border:1.5px solid var(--ink-3,rgba(140,160,200,.35));background:transparent;transition:.15s}
.bn-bit .bn-digit{display:block;font-family:'IBM Plex Mono',monospace;font-size:15px;opacity:.55}
.bn-bit .bn-val{display:block;font-size:10.5px;opacity:.45;margin-top:3px;letter-spacing:.02em}
.bn-bit.is-on{border-color:var(--brass,#c8a86b);background:rgba(200,168,107,.10)}
.bn-bit.is-on .bn-bulb{background:var(--brass,#c8a86b);border-color:var(--brass,#c8a86b);
  box-shadow:0 0 12px rgba(200,168,107,.55)}
.bn-bit.is-on .bn-digit{opacity:1}
.bn-bit.bn-flip{animation:bnflip .45s ease}
@keyframes bnflip{0%{transform:translateY(0)}30%{transform:translateY(-4px)}100%{transform:translateY(0)}}

/* 읽는 자리 */
.bn-read{text-align:center;margin:4px 0 10px}
.bn-eq{font-family:'IBM Plex Mono',monospace;font-size:13px;opacity:.7;margin:0 0 2px;min-height:1.4em;
  word-break:keep-all}
.bn-dec{font-family:'Gowun Batang',serif;font-size:44px;line-height:1.15;margin:0;color:var(--brass,#c8a86b)}

/* 조작 줄 */
.bn-ctrl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.bn-ctrl-sp{flex:0 0 10px}
.bn-ctrl button{font:inherit;font-size:13.5px;padding:8px 15px;border-radius:8px;cursor:pointer;
  border:1px solid var(--ink-3,rgba(140,160,200,.2));background:transparent;color:inherit;transition:.15s}
.bn-ctrl button:hover{border-color:var(--cyan,#6fb7c9)}

/* 판 2 */
.bn-target{text-align:center;font-size:14px;margin:2px 0 12px;opacity:.85}
.bn-target b{font-family:'Gowun Batang',serif;font-size:30px;color:var(--cyan,#6fb7c9);margin-left:8px}
.bn-win{text-align:center;font-size:14.5px;line-height:1.7;margin:6px 0 12px;padding:11px 13px;
  border-radius:8px;background:rgba(200,168,107,.10);border:1px solid rgba(200,168,107,.4)}

/* 판 3 */
.bn-input{font:inherit;font-size:16px;width:100%;box-sizing:border-box;padding:11px 13px;
  border-radius:9px;border:1px solid var(--ink-3,rgba(140,160,200,.25));background:transparent;
  color:inherit;margin:0 0 14px}
.bn-input:focus{outline:none;border-color:var(--cyan,#6fb7c9)}
.bn-chars{display:flex;flex-direction:column;gap:8px}
.bn-char{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--ink-3,rgba(140,160,200,.14));
  border-radius:9px;flex-wrap:wrap}
.bn-char .bc-g{font-family:'Gowun Batang',serif;font-size:22px;min-width:34px;text-align:center}
.bn-char .bc-n{font-size:12px;opacity:.6;min-width:86px}
.bn-char .bc-b{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;
  color:var(--brass,#c8a86b);word-break:break-all}

@media (max-width:560px){
  .bn-board{gap:4px}
  .bn-bit{padding:7px 1px 6px;border-radius:7px}
  .bn-bit .bn-bulb{width:15px;height:15px}
  .bn-bit .bn-digit{font-size:13px}
  .bn-bit .bn-val{font-size:9px}
  .bn-dec{font-size:36px}
}
.bn-play{margin-top:6px}