/* 텍스트 ↔ UTF-8 16진수 변환기 — '바이트 대역판': 예시 → 텍스트 칸 → 글자 · 바이트 띠 → 16진수 칸 → [비트 돋보기 | 인코딩별 바이트]. 배치는 작업면 너비(컨테이너 u8x) 기준.
   색: 바이트 수(1·2·3·4)는 순서가 있는 값이라 파랑 한 색의 밝기 단계(dataviz --ordinal 검사: 밝게 #8fb0da·#5a8bc8·#2f6db0·#1b4377, 어둡게 #3d5d86·#4f7fbf·#79a5e2·#b4d0f5 통과),
   오류 바이트는 강조색 점선. 글자·숫자는 늘 글자 색이고 색 막대는 바이트 칸 아래 3px 띠로만 쓴다. */
.u8x-work{container:u8x / inline-size;--u8x-1:#8fb0da;--u8x-2:#5a8bc8;--u8x-3:#2f6db0;--u8x-4:#1b4377}
html[data-theme="dark"] .u8x-work{--u8x-1:#3d5d86;--u8x-2:#4f7fbf;--u8x-3:#79a5e2;--u8x-4:#b4d0f5}
@media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .u8x-work{--u8x-1:#3d5d86;--u8x-2:#4f7fbf;--u8x-3:#79a5e2;--u8x-4:#b4d0f5} }
.u8x-work [hidden]{display:none!important}
.u8x-work{font-family:var(--sans)}
html:lang(ko) .u8x-work{word-break:keep-all;overflow-wrap:anywhere}
.u8x-work .b1{--c:var(--u8x-1)} .u8x-work .b2{--c:var(--u8x-2)} .u8x-work .b3{--c:var(--u8x-3)} .u8x-work .b4{--c:var(--u8x-4)} .u8x-work .bx{--c:var(--accent)}
.u8x-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 예시 띠 */
.u8x-head{padding:10px 18px;border-bottom:1px solid var(--soft)}
.u8x-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.u8x-ex .v2-label{margin-right:4px}
.u8x-ex button{height:30px;padding:0 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);transition:background var(--ease),border-color var(--ease)}
.u8x-ex button:hover{background:var(--btn);border-color:var(--line)}

/* 두 칸 */
.u8x-box{padding:14px 18px 12px}
.u8x-bh{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 8px;min-height:32px}
.u8x-meta{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.u8x-act{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.u8x-ta{display:block;width:100%;box-sizing:border-box;margin:0;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:24px;resize:none;overflow-y:auto;transition:border-color var(--ease),box-shadow var(--ease)}
.u8x-ta--hex{font-family:var(--mono);font-size:14.5px;font-weight:600;line-height:22px;letter-spacing:.02em;word-break:normal;overflow-wrap:anywhere}
.u8x-ta::placeholder{color:var(--muted);opacity:.75;font-weight:400}
.u8x-ta:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.u8x-ta[aria-invalid="true"]{border-color:var(--accent)}
.u8x-fmt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 8px}
.u8x-chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.u8x-chips button{height:30px;padding:0 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--muted);transition:background var(--ease),color var(--ease),border-color var(--ease)}
.u8x-chips button:hover{background:var(--btn);color:var(--ink)}
.u8x-chips button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.u8x-case{margin-left:auto}
.u8x-case button{font-family:var(--mono)}
.u8x-st{margin:8px 0 0;min-height:18px;line-height:1.5}
.u8x-legacy{margin:8px 0 0;padding:8px 10px;border-left:2px solid var(--line);background:var(--wash);font-size:13px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.u8x-nfd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink)}

/* 방향 표시: 텍스트 칸을 고치면 ↓(인코딩), 16진수 칸을 고치면 ↑(디코딩) — 화살표가 돌아간다 */
.u8x-flow{display:flex;align-items:center;justify-content:center;gap:6px;height:24px;margin:0;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.u8x-flow svg{width:11px;height:13px;transition:transform 280ms cubic-bezier(.2,.8,.2,1)}
.u8x-work[data-src="hex"] .u8x-flow svg{transform:rotate(180deg)}

/* 글자 · 바이트 띠 */
.u8x-band{padding:12px 18px 12px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.u8x-sh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 8px}
.u8x-stat{font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.u8x-hint{font-family:var(--sans);font-size:12px;color:var(--muted)}
.u8x-lg{display:flex;flex-wrap:wrap;gap:2px 10px;margin-left:auto;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.u8x-lg i{display:inline-block;width:12px;height:4px;margin-right:4px;vertical-align:middle;border-radius:1px;background:var(--c)}
.u8x-strip{--row:54px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;max-height:calc(var(--row) * 3 + 12px);overflow-y:auto;padding:1px;margin:-1px;scroll-snap-type:y proximity;scroll-padding:1px;outline-offset:3px}
.u8x-strip.is-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 20px),transparent);mask-image:linear-gradient(#000 calc(100% - 20px),transparent)}
.u8x-strip:focus-visible{outline:2px solid var(--accent)}
.u8x-strip.is-empty{display:block}
.u8x-empty{margin:0;padding:14px 0;font-size:13px;color:var(--muted)}
.u8x-t{display:flex;flex-direction:column;box-sizing:border-box;height:var(--row);min-width:28px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);cursor:pointer;scroll-snap-align:start;transition:border-color var(--ease),box-shadow var(--ease)}
.u8x-t:hover{border-color:var(--line)}
.u8x-t i{flex:1 1 auto;display:grid;place-items:center;padding:0 5px;font-style:normal;font-family:var(--sans);font-size:19px;line-height:1;color:var(--ink);white-space:pre}
.u8x-t.is-tag i{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.u8x-t span{display:flex;border-top:1px solid var(--soft)}
.u8x-t b{flex:1 0 24px;min-width:24px;text-align:center;font-family:var(--mono);font-size:11px;font-weight:700;line-height:20px;color:var(--ink);box-shadow:inset 0 -3px 0 var(--c)}
.u8x-t b + b{border-left:1px solid var(--soft)}
.u8x-t.bx{border-style:dashed;border-color:var(--accent)}
.u8x-t.bx i{color:var(--accent);font-size:15px}
.u8x-t.is-sel{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.u8x-more{margin:6px 0 0;font-size:12px;color:var(--muted)}
.u8x-more:empty{display:none}

/* 비트 돋보기 | 인코딩별 바이트 */
.u8x-duo{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--soft)}
.u8x-lens{margin:0;padding:14px 18px 16px;min-width:0}
.u8x-enc{display:flex;flex-direction:column;min-width:0;padding:14px 18px 16px;border-top:1px solid var(--soft)}
@container u8x (min-width:600px){
  .u8x-duo{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .u8x-enc{border-top:0;border-left:1px solid var(--soft)}
}
.u8x-cap{margin:0 0 10px;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink)}
.u8x-bits{container:u8xbits / inline-size;display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:6px}
.u8x-col{min-width:0;text-align:center}
.u8x-g{margin:0 0 4px;border-radius:var(--radius);background:var(--wash);font-family:var(--mono);font-size:11px;font-weight:700;line-height:18px;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.u8x-by{margin:0;padding:6px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:13px;font-weight:700;line-height:18px;letter-spacing:.05em;white-space:nowrap;overflow:hidden}
.u8x-by .p{color:var(--muted);font-weight:600;opacity:.75}
.u8x-by .v{color:var(--ink)}
.u8x-by em{display:inline-block;font-style:normal}
.u8x-hx{margin:5px 0 0;font-family:var(--mono);font-size:16px;font-weight:800;line-height:20px;color:var(--ink)}
.u8x-col.is-bad .u8x-by{border-style:dashed;border-color:var(--accent)}
.u8x-col.is-bad .u8x-g{background:none}
@container u8xbits (max-width:330px){ .u8x-by{font-size:11px;letter-spacing:0} .u8x-g{font-size:10px;letter-spacing:0} .u8x-hx{font-size:14px} }
.u8x-bits.is-anim .v em{animation:u8xDrop 420ms cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) * 14ms)}
@keyframes u8xDrop{from{transform:translateY(-20px);opacity:0}to{transform:none;opacity:1}}
.u8x-rule{margin:10px 0 8px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.u8x-rows{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;margin:0}
.u8x-rows div{display:grid;grid-template-columns:minmax(40%,1fr) minmax(0,max-content);align-items:baseline;gap:8px;min-width:0;padding:6px 0;border-top:1px solid var(--soft)}
.u8x-rows dt{min-width:0;font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--muted)}
.u8x-rows dd{margin:0;min-width:0;font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink);text-align:right;overflow-wrap:anywhere}
@container u8x (max-width:420px){ .u8x-rows{grid-template-columns:minmax(0,1fr)} }

.u8x-bars{display:grid;gap:9px;margin:0 0 14px;padding:0;list-style:none}
.u8x-bars li{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:baseline;gap:4px 10px}
.u8x-bars span{min-width:0;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.u8x-bars i{grid-column:1 / -1;grid-row:2;display:block;height:10px;border-radius:1px;background:var(--soft);overflow:hidden}
.u8x-bars b{display:block;height:100%;width:0;border-radius:0 2px 2px 0;background:var(--line);transition:width 320ms cubic-bezier(.2,.8,.2,1)}
.u8x-bars li[data-k="utf8"] b{background:var(--u8x-3)}
.u8x-bars em{grid-row:1;grid-column:2;font-family:var(--sans);font-size:12px;font-style:normal;font-weight:600;color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.u8x-bars small{grid-column:1 / -1;grid-row:3;font-size:11.5px;font-weight:500;line-height:1.4;color:var(--accent)}
.u8x-bars small:empty{display:none}
.u8x-sh--comp{margin-bottom:6px}
.u8x-comp{display:flex;gap:2px;height:12px;margin:0 0 8px;border-radius:1px;overflow:hidden;background:var(--soft)}
.u8x-comp i{flex:0 1 0;min-width:0;background:var(--c);transition:flex-grow 320ms cubic-bezier(.2,.8,.2,1)}
.u8x-comp i.is-zero{display:none}
.u8x-cl{display:grid;gap:3px;margin:0;padding:0;list-style:none}
.u8x-cl li{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.5;color:var(--ink)}
.u8x-cl li i{flex:0 0 auto;width:10px;height:10px;border-radius:1px;background:var(--c)}
.u8x-cl li b{margin-left:auto;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.u8x-sum{margin:auto 0 0;padding-top:12px;font-size:13px;line-height:1.6;color:var(--ink)}

@container u8x (max-width:420px){
  .u8x-head,.u8x-box,.u8x-band,.u8x-lens,.u8x-enc{padding-left:14px;padding-right:14px}
  .u8x-fmt > .v2-label{flex-basis:100%}
  .u8x-fmt{column-gap:8px}
  .u8x-chips button{padding:0 5px}
  .u8x-case button{padding:0 8px}
  .u8x-lg{flex-basis:100%;margin-left:0;gap:2px 8px}
}
@media (prefers-reduced-motion: reduce){
  .u8x-flow svg,.u8x-bars b,.u8x-comp i{transition:none}
  .u8x-bits.is-anim .v em{animation:none}
}
.v2-article pre.u8x-code{margin:10px 0 16px;padding:12px 14px;overflow-x:auto;border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink)}
.v2-article pre.u8x-code code{padding:0;background:none;font-size:inherit;overflow-wrap:normal}
.v2-article .u8x-mono{font-family:var(--mono);font-weight:700;overflow-wrap:anywhere}