/* 진법 변환기 — '진법 동시 편집판': 예시 → 진법 칸 다섯 줄 → 보기 줄 → 상태 → 비트판 → 풀이. 배치는 작업면 너비(컨테이너 nbc) 기준.
   강조색은 풀이의 '읽는 방향'(사다리 나머지·화살표·읽은 결과, 곱하기에서 뗀 자리)에만 쓴다. 오류·넘침 경고는 v2 규칙대로 강조색. */
.nbc-work{container:nbc / inline-size;font-family:var(--sans)}
.nbc-work [hidden]{display:none!important}
.nbc-work{overflow-wrap:anywhere}
html:lang(ko) .nbc-work{word-break:keep-all}
.nbc-hint,.nbc-from{font-size:12px;color:var(--muted)}
.nbc-from{font-family:var(--mono);font-weight:600;color:var(--ink)}

/* 본문: 긴 숫자·코드가 좁은 화면에서 줄을 넘지 않게 */
.v2-article code{overflow-wrap:anywhere}

/* 예시 */
.nbc-head{padding:12px 18px;border-bottom:1px solid var(--soft);border-radius:var(--radius) var(--radius) 0 0}
.nbc-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.nbc-ex .v2-label{margin-right:4px}
.nbc-ex button{display:inline-flex;align-items:baseline;gap:6px;min-height:30px;padding:4px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.nbc-ex button:hover{background:var(--btn);border-color:var(--line)}
.nbc-ex small{font-size:11.5px;font-weight:600;color:var(--muted)}
.nbc-ex b{font-family:var(--mono);font-size:12.5px;font-weight:700}

/* 진법 칸: 이름 | 값(여러 줄로 늘어남) | 복사 */
.nbc-rows{display:grid;gap:8px;margin:0;padding:16px 18px 12px}
.nbc-row{display:grid;grid-template-columns:132px minmax(0,1fr) 42px;align-items:start;gap:0 10px}
.nbc-tag{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;align-content:center;column-gap:9px;min-height:42px;margin:0;cursor:pointer}
.nbc-tag b{grid-row:1 / span 2;font-family:var(--mono);font-size:22px;font-weight:700;line-height:1;text-align:right;color:var(--ink)}
.nbc-tag span{font-size:13.5px;font-weight:700;line-height:1.25;color:var(--ink)}
.nbc-tag small{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;line-height:1.3;color:var(--muted)}
.nbc-tag--c{grid-template-columns:auto minmax(0,1fr);cursor:default}
.nbc-tag--c select{height:var(--v2-ctl);width:60px;padding:0 4px 0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:17px;font-weight:700;cursor:pointer}
.nbc-tag--c select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.nbc-tag--c label{display:grid;cursor:pointer}
.nbc-in{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:var(--v2-ctl);margin:0;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:16px;font-weight:600;line-height:22px;letter-spacing:.01em;resize:none;overflow:hidden;word-break:break-all;overflow-wrap:anywhere;transition:border-color var(--ease),box-shadow var(--ease),opacity var(--ease),background var(--ease)}
.nbc-in::placeholder{font-weight:400;color:var(--ink);opacity:.35}
.nbc-in:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.nbc-row.is-src .nbc-in{background:color-mix(in srgb,var(--wash) 60%,var(--paper))}
.nbc-row.is-stale .nbc-in{opacity:.45}
.nbc-row.is-bad .nbc-in{border-color:var(--accent)}
.nbc-copy{display:grid;place-items:center;width:42px;height:var(--v2-ctl);padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);color:var(--ink);cursor:pointer;transition:background var(--ease)}
.nbc-copy:hover{background:var(--btn-hover)}
.nbc-copy .i{width:15px;height:15px}

/* 보기 줄·상태 */
.nbc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:0 18px 14px 160px}
.nbc-acts{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.nbc-st{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:44px;margin:0;padding:10px 18px;border-top:1px solid var(--soft);background:color-mix(in srgb,var(--wash) 70%,var(--paper))}
.nbc-st .v2-status{font-size:13px;line-height:1.55}

/* 구역 머리 */
.nbc-sh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px}
.nbc-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-left:auto}
.nbc-work .v2-seg button small{margin-left:5px;font-family:var(--mono);font-weight:600;opacity:.75}
.nbc-work .v2-seg button small:empty{display:none}
.nbc-work .v2-seg button:disabled{opacity:.35;cursor:not-allowed}
.nbc-bits.is-stale,.nbc-how.is-stale{opacity:.45}

/* 비트판: 바이트 > 4비트 묶음 > 칸, 묶음 아래 16진수 한 자리 */
.nbc-bits{padding:16px 18px;border-top:1px solid var(--soft);transition:opacity var(--ease)}
.nbc-board{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 28px}
.nbc-grid{display:grid;grid-template-columns:repeat(var(--nbc-cols,1),max-content);gap:18px 12px;padding-top:13px}
.nbc-byte{display:flex;gap:6px}
.nbc-ng{position:relative;display:flex;gap:2px;padding-bottom:21px}
.nbc-bit{position:relative;display:grid;place-items:center;width:22px;height:30px;padding:0;border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--muted);font-family:var(--mono);font-size:13px;font-weight:700;cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.nbc-bit b{font-weight:inherit}
.nbc-bit[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.nbc-bit:hover{border-color:var(--ink)}
.nbc-bit:focus-visible{outline:2px solid var(--accent);outline-offset:2px;z-index:1}
.nbc-bit i{position:absolute;bottom:100%;left:-4px;right:-4px;margin-bottom:2px;font-style:normal;font-size:9.5px;font-weight:600;line-height:1;text-align:center;color:var(--muted)}
.nbc-bit.is-sign{border-style:dashed;border-color:var(--ink)}
.nbc-bit.is-sign[aria-pressed="true"]{border-style:solid}
.nbc-nib{position:absolute;left:0;right:0;bottom:0;padding-top:2px;border-top:1px solid var(--soft);font-family:var(--mono);font-size:12px;font-weight:700;line-height:16px;text-align:center;color:var(--ink)}
.nbc-read{flex:1 1 230px;min-width:0;list-style:none;margin:0;padding:0}
.nbc-read li{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--soft);font-size:13px}
.nbc-read li:first-child{border-top:0;padding-top:0}
.nbc-read span{color:var(--muted)}
.nbc-read b{margin-left:auto;font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere;word-break:break-all;color:var(--muted)}
.nbc-read li.is-on span{font-weight:700;color:var(--ink)}
.nbc-read li.is-on span::before{content:"";display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;border-radius:50%;background:var(--ink)}
.nbc-read li.is-on b,.nbc-read li:last-child b{color:var(--ink)}
.nbc-bnote{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.nbc-bnote.is-warn{color:var(--accent)}

/* 풀이 */
.nbc-how{padding:16px 18px 20px;border-top:1px solid var(--soft);transition:opacity var(--ease)}
.nbc-steps{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 32px}
.nbc-blk{min-width:0}
.nbc-blk--lad{flex:1 1 230px}
.nbc-blk--lad.is-wide{flex-basis:100%}
.nbc-bits.is-off .nbc-hint{display:none}
.nbc-blk--exp{flex:2 1 300px}
.nbc-bh{display:flex;flex-direction:column;gap:2px;margin:0 0 10px}
.nbc-bh b{font-size:13.5px;font-weight:750;color:var(--ink)}
.nbc-bh span{font-size:12px;line-height:1.5;color:var(--muted)}
.nbc-neg{margin:10px 0 0;font-size:12.5px;color:var(--muted)}

/* 나눗셈 사다리: 나누는 수 | ㄴ자 몫 | 나머지, 오른쪽 화살표는 아래에서 위로 */
.nbc-lrows{--rh:28px;position:relative;display:inline-grid;grid-template-columns:auto auto auto;max-width:100%;margin:0;padding:0 28px 0 0;list-style:none;font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
.nbc-lrows li{display:contents}
.nbc-lrows li > span{box-sizing:border-box;overflow-wrap:normal;height:var(--rh);line-height:calc(var(--rh) - 4px);padding:2px 0;white-space:nowrap}
.nbc-lrows .dv{padding-right:6px;text-align:right;color:var(--muted)}
.nbc-lrows .q{padding:2px 12px 2px 10px;border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);text-align:right;color:var(--ink)}
.nbc-lrows .q small{margin-left:6px;font-size:12px;font-weight:800;color:var(--accent)}
.nbc-lrows .r{padding-left:10px}
.nbc-lrows .r em{font-style:normal;font-weight:800;color:var(--accent)}
.nbc-lrows .r small{margin-left:4px;font-size:10.5px;color:var(--muted)}
.nbc-lrows .is-last .q{border-color:transparent;font-weight:800;color:var(--accent)}
.nbc-lrows .nbc-skip .q{border-left-style:dashed;border-bottom:0;font-family:var(--sans);font-size:12px;color:var(--muted);text-align:left}
.nbc-lrows.has-arrow::after{content:"";position:absolute;right:8px;top:calc(var(--rh) + 6px);bottom:6px;width:0;border-left:2px solid var(--accent);transform-origin:bottom}
.nbc-lrows.has-arrow::before{content:"";position:absolute;right:4px;top:calc(var(--rh) + 2px);border:5px solid transparent;border-top:0;border-bottom:7px solid var(--accent)}
.nbc-lread{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.nbc-lread b{display:inline-block;max-width:100%;font-family:var(--mono);font-size:15px;font-weight:800;color:var(--accent);word-break:normal;overflow-wrap:anywhere}
.nbc-mulw{margin-top:18px}
.nbc-mulw.is-only{margin-top:0}
.nbc-mul{display:grid;grid-template-columns:auto auto auto;gap:0;width:max-content;max-width:100%;margin:0;padding:0;list-style:none;font-family:var(--mono);font-size:13.5px;font-variant-numeric:tabular-nums}
.nbc-mul li{display:contents}
.nbc-mul li > *{padding:4px 14px 4px 0;border-bottom:1px solid var(--soft);overflow-wrap:anywhere}
.nbc-mul li > :last-child{padding-right:6px;padding-left:6px}
.nbc-mul em{font-style:normal;font-weight:800;text-align:center;color:var(--accent)}
.nbc-mul li.is-loop > *{background:var(--accent-wash)}

/* 자리값 펼치기 */
.nbc-src{margin:0 0 8px;font-family:var(--mono);font-size:15px;font-weight:700;word-break:break-all}
.nbc-src code{font:inherit}
.nbc-src sub,.nbc-sum sub{font-size:10.5px;font-weight:600;color:var(--muted)}
.nbc-pv{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px 4px}
.nbc-pc{display:grid;justify-items:center;align-content:start;min-width:46px;padding:6px 6px 5px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.nbc-pc b{font-family:var(--mono);font-size:17px;font-weight:800;line-height:1.15}
.nbc-pc i{font-family:var(--mono);font-size:11px;font-style:normal;color:var(--muted)}
.nbc-pc small{width:100%;margin-top:3px;padding-top:2px;border-top:1px solid var(--soft);font-family:var(--mono);font-size:11.5px;font-weight:600;text-align:center;overflow-wrap:anywhere}
.nbc-pc--more{border-style:dashed}
.nbc-pc--more small{font-family:var(--sans)}
.nbc-op{align-self:center;font-family:var(--mono);color:var(--muted)}
.nbc-sum{margin:10px 0 0;font-family:var(--mono);font-size:15px;word-break:break-all}
.nbc-sum b{font-weight:800}
.nbc-sg{margin-left:8px;font-family:var(--sans);font-size:12px;color:var(--muted)}

/* 2·8·16 묶음 지름길 */
.nbc-blk--short{margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--soft)}
.nbc-grp{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 6px}
.nbc-gl{min-width:64px;font-size:11.5px;font-weight:600;color:var(--muted)}
.nbc-gc{display:grid;justify-items:center;padding:4px 7px 3px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.nbc-gc b{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.06em}
.nbc-gc i{width:100%;margin-top:2px;padding-top:1px;border-top:1px solid var(--soft);font-family:var(--mono);font-size:15px;font-style:normal;font-weight:800;text-align:center}

/* 움직임: 값을 바꾸면 풀이 줄이 차례로 들어오고, 비트는 뒤집힌다 */
@keyframes nbcIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes nbcGrow{from{transform:scaleY(0)}to{transform:none}}
@keyframes nbcFlip{from{transform:rotateX(90deg)}to{transform:none}}
.nbc-how.is-anim .nbc-lrows li > span,.nbc-how.is-anim .nbc-mul li > *,.nbc-how.is-anim .nbc-pc,.nbc-how.is-anim .nbc-gc{animation:nbcIn .32s cubic-bezier(.2,.7,.3,1) both;animation-delay:min(calc(var(--i,0) * 40ms),720ms)}
.nbc-how.is-anim .nbc-lrows.has-arrow::after{animation:nbcGrow .45s ease-out .32s both}
.nbc-how.is-anim .nbc-lrows.has-arrow::before{animation:nbcIn .2s ease-out .7s both}
.nbc-bit.is-flip{animation:nbcFlip .28s ease-out}
@media (prefers-reduced-motion:reduce){
  .nbc-how.is-anim *,.nbc-how.is-anim .nbc-lrows::after,.nbc-how.is-anim .nbc-lrows::before,.nbc-bit.is-flip{animation:none!important}
}

/* 좁은 작업면 */
@container nbc (max-width:600px){
  .nbc-row{grid-template-columns:100px minmax(0,1fr) 42px;gap:0 8px}
  .nbc-tag{grid-template-columns:28px minmax(0,1fr);column-gap:7px}
  .nbc-tag b{font-size:19px}
  .nbc-tag span{font-size:12.5px}
  .nbc-bar{padding-left:18px}
  .nbc-ctl{margin-left:0}
}
@container nbc (max-width:420px){
  .nbc-head,.nbc-rows,.nbc-bits,.nbc-how,.nbc-st{padding-left:14px;padding-right:14px}
  .nbc-bar{padding:0 14px 14px}
  .nbc-row{grid-template-columns:60px minmax(0,1fr) 42px;gap:0 6px}
  .nbc-tag{grid-template-columns:minmax(0,1fr);justify-items:start;row-gap:1px}
  .nbc-tag b{grid-row:auto;font-size:17px}
  .nbc-tag span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .nbc-tag--c{grid-template-columns:minmax(0,1fr)}
  .nbc-tag--c select{width:58px}
  .nbc-tag--c label small{display:none}
  .nbc-acts{margin-left:0}
}