/* Base64 인코더·디코더 — '묶음 판독대': 예시 → [원문 | Base64] → 조절판 → 판독 경로 → 묶음 레일 → [묶음 돋보기 | 같은 글, 다른 Base64]. 배치는 작업면 너비(컨테이너 b64) 기준.
   색: 글자 경계·바이트 자리는 글자 색을 종이색에 섞은 옅은 단계(라이트·다크 모두 토큰에서 나옴), 강조색은 고른 묶음과 6비트 칸막이에만 쓴다. */
.b64-work{container:b64 / inline-size;font-family:var(--sans);--b64-t0:color-mix(in srgb,var(--ink) 7%,var(--paper));--b64-t1:color-mix(in srgb,var(--ink) 15%,var(--paper));--b64-y0:color-mix(in srgb,var(--ink) 5%,var(--paper));--b64-y1:color-mix(in srgb,var(--ink) 13%,var(--paper));--b64-y2:color-mix(in srgb,var(--ink) 22%,var(--paper))}
.b64-work [hidden]{display:none!important}
html:lang(ko) .b64-work{word-break:keep-all;overflow-wrap:anywhere}
.b64-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.b64-sh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 10px}
.b64-hint{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* 예시 띠 */
.b64-head{padding:10px 18px;border-bottom:1px solid var(--soft)}
.b64-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.b64-ex .v2-label{margin-right:4px}
.b64-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)}
.b64-ex button:hover{background:var(--btn);border-color:var(--line)}

/* 조절판: 원문 쪽(글자 인코딩·파일) | Base64 쪽(글자 모양·패딩·줄 나눔·줄마다 따로) — 모든 조절 칸 높이 42px */
.b64-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;padding:12px 18px;border-top:1px solid var(--soft)}
.b64-set{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.b64-set > .v2-label{min-width:52px}
.b64-bar .v2-seg{flex-wrap:nowrap}
.b64-bar .v2-seg button{height:var(--v2-ctl,42px);padding:0 12px;white-space:nowrap}
.b64-bar .v2-seg button:disabled{opacity:.45;cursor:not-allowed}
.b64-sel{display:inline-flex;align-items:center;gap:8px}
.b64-sel select{height:var(--v2-ctl,42px);max-width:100%;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600}
.b64-sel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.b64-sel select:disabled{opacity:.5}
.b64-sel small{font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap}
.b64-sel small:empty{display:none}
.b64-lines{height:var(--v2-ctl,42px);white-space:nowrap}

/* 두 칸: 넓으면 나란히(높이는 격자가 맞춤), 좁으면 위아래 */
.b64-duo{display:grid;grid-template-columns:minmax(0,1fr)}
.b64-pane{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px 18px 16px}
.b64-pane + .b64-pane{border-top:1px solid var(--soft)}
.b64-ph{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0;min-height:32px}
.b64-meta{margin-right:auto;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.b64-ta{display:block;flex:1 1 auto;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),opacity var(--ease)}
.b64-ta--b64{font-family:var(--mono);font-size:14px;font-weight:600;line-height:22px;letter-spacing:.01em;word-break:break-all;overflow-wrap:anywhere}
.b64-ta::placeholder{color:var(--muted);opacity:.75;font-weight:400}
.b64-ta:focus{outline:none;border-color:var(--ink)}
.b64-ta:focus-visible{box-shadow:0 0 0 1px var(--ink)}
.b64-ta[readonly]{background:var(--wash)}
.b64-ta.is-stale{opacity:.45}
.b64-pane.is-drop .b64-ta,.b64-pane.is-drop .b64-card{border-style:dashed;border-color:var(--accent)}
.b64-trunc{margin:0;font-size:12px;color:var(--muted)}
@container b64 (min-width:640px){
  .b64-duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .b64-pane + .b64-pane{border-top:0;border-left:1px solid var(--soft)}
}

/* 파일 카드(파일을 넣었거나 풀어 낸 바이트가 글이 아닐 때) */
.b64-card{flex:1 1 auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;align-items:start;gap:12px 14px;min-height:160px;box-sizing:border-box;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.b64-card img{flex:0 0 auto;width:96px;height:96px;object-fit:contain;border:1px solid var(--soft);border-radius:var(--radius);background:repeating-conic-gradient(var(--b64-t0) 0 25%,var(--paper) 0 50%) 0 0 / 12px 12px}
.b64-card img.is-px{image-rendering:pixelated}
.b64-card__t{display:flex;flex-direction:column;gap:5px;min-width:0}
.b64-card img[hidden] + .b64-card__t{grid-column:1 / -1}
.b64-card__t b{font-family:var(--mono);font-size:14px;overflow-wrap:anywhere}
.b64-card__t > span{font-size:13px;color:var(--muted)}
.b64-card__t code{font-family:var(--mono);font-size:12px;color:var(--ink);overflow-wrap:anywhere}
.b64-card__a{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px}

/* 판독 경로: 거친 단계를 차례로(칩 사이 화살표) */
.b64-route{padding:12px 18px;border-top:1px solid var(--soft);background:color-mix(in srgb,var(--wash) 55%,var(--card))}
.b64-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:0;padding:0;list-style:none}
.b64-step{position:relative;display:inline-flex;align-items:baseline;gap:6px;min-height:28px;box-sizing:border-box;padding:4px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-size:12px;line-height:18px;color:var(--muted)}
.b64-step b{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.b64-step + .b64-step{margin-left:20px}
.b64-step + .b64-step::before{content:"→";position:absolute;left:-16px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:12px;color:var(--muted)}
.b64-step.is-dir{padding:0;border:0;background:none;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.b64-step.is-dir + .b64-step{margin-left:10px}
.b64-step.is-dir + .b64-step::before{content:none}
.b64-step.is-out{border-color:var(--fill);background:var(--fill);color:color-mix(in srgb,var(--on-fill) 75%,var(--fill))}
.b64-step.is-out b{color:var(--on-fill)}
.b64-step.is-warn{border-style:dashed;border-color:var(--line)}
.b64-step.is-err{border-color:var(--accent);color:var(--accent)}
.b64-step.is-err b{color:var(--accent)}
.b64-x{margin:-4px -6px -4px 0;width:24px;height:24px;border:0;border-radius:var(--radius);background:none;font-size:15px;line-height:24px;color:var(--muted);cursor:pointer}
.b64-x:hover{background:var(--btn);color:var(--ink)}
.b64-steps.is-in .b64-step{animation:b64-in .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes b64-in{from{opacity:0;transform:translateX(-6px)}}
.b64-st{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 0}
.b64-st:has(.v2-status:empty):has(#b64Again[hidden]){display:none}
.b64-st .v2-status{font-size:13px;line-height:1.6}
.b64-st .v2-status a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.b64-inl{height:28px;padding:0 10px;font-size:12px}
.b64-ctx{display:inline-block;padding:0 4px;border-radius:3px;background:var(--paper);font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-all}
.b64-ctx mark{background:none;color:var(--accent);font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* 묶음 레일: 묶음 하나 = [글자 줄 | 바이트 3 | Base64 4글자], 세 줄 높이에서 스크롤(걸친 줄 없음) */
.b64-railbox{padding:14px 18px 16px;border-top:1px solid var(--soft)}
.b64-lg{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:11.5px;color:var(--muted)}
.b64-lg i{width:10px;height:10px;border-radius:2px;background:var(--b64-t0)}
.b64-lg i.t1{margin-left:-4px;margin-right:2px;background:var(--b64-t1)}
.b64-lg b{margin-left:8px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.b64-rail{--q-h:76px;display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));grid-auto-rows:var(--q-h);gap:6px;max-height:calc(var(--q-h) * 3 + 14px);overflow-y:auto;padding:1px;scroll-padding:1px;border-radius:var(--radius)}
.b64-rail.is-bin{--q-h:54px}
.b64-rail:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.b64-rail.is-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
.b64-q{display:grid;grid-template-rows:24px 20px minmax(0,1fr);min-width:0;height:var(--q-h);box-sizing:border-box;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);overflow:hidden;cursor:pointer;transition:border-color var(--ease),box-shadow var(--ease)}
.b64-q:hover{border-color:var(--line)}
.b64-q .g,.b64-q .b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.b64-q .g i{display:block;min-width:0;padding-left:3px;font-style:normal;font-size:14px;line-height:24px;white-space:nowrap;overflow:hidden;color:var(--ink)}
.b64-q .g i.t0{background:var(--b64-t0)}
.b64-q .g i.t1{background:var(--b64-t1)}
.b64-q .g i.st{box-shadow:inset 2px 0 0 color-mix(in srgb,var(--ink) 55%,var(--paper))}
.b64-q .g i.nm{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:-.02em;color:var(--muted)}
.b64-q .b b{font-family:var(--mono);font-size:11px;font-weight:600;line-height:20px;text-align:center;color:var(--muted)}
.b64-q .b b.z{margin:3px;border:1px dashed var(--line);border-radius:2px}
.b64-q .c{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;border-top:1px solid var(--soft)}
.b64-q .c b{font-family:var(--mono);font-size:16px;font-weight:800;text-align:center;color:var(--ink)}
.b64-q .c b.eq{font-weight:500;color:var(--muted)}
.b64-q.is-sel{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.b64-rail .b64-sep{grid-column:1 / -1;display:flex;align-items:flex-end;gap:8px;padding:0 2px 4px;font-size:11.5px;font-weight:700;color:var(--muted)}
.b64-sep::after{content:"";flex:1;border-bottom:1px dashed var(--line);margin-bottom:6px}
.b64-rail.is-bin .b64-q{grid-template-rows:20px minmax(0,1fr)}
.b64-rail.is-bin .b64-q .g{display:none}
.b64-empty{margin:0;font-size:13px;color:var(--muted);list-style:none}
.b64-more{margin:6px 0 0;font-size:12px;color:var(--muted)}
.b64-more:empty{display:none}

/* 묶음 돋보기 | 같은 글, 다른 Base64 */
.b64-pair{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--soft)}
.b64-lens{margin:0;padding:14px 18px 16px;min-width:0}
.b64-varbox{padding:14px 18px 16px;min-width:0;border-top:1px solid var(--soft)}
@container b64 (min-width:640px){
  .b64-pair{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .b64-varbox{border-top:0;border-left:1px solid var(--soft)}
}
.b64-bits{position:relative;max-width:420px}
.b64-row{display:grid;grid-template-columns:repeat(24,minmax(0,1fr))}
.b64-row--y .y{grid-column:span 8;display:flex;flex-direction:column;align-items:center;gap:1px;padding-bottom:6px;font-family:var(--mono)}
.b64-row--y b{font-size:14px;font-weight:800;color:var(--ink)}
.b64-row--y small{max-width:100%;overflow:hidden;font-size:12px;line-height:16px;white-space:nowrap;color:var(--muted)}
.b64-row--y .z b{color:var(--muted);font-weight:500}
.b64-row--b{position:relative}
.b64-row--b i{height:28px;font-style:normal;font-family:var(--mono);font-size:12px;font-weight:600;line-height:28px;text-align:center;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.b64-row--b i.y0{background:var(--b64-y0)}
.b64-row--b i.y1{background:var(--b64-y1)}
.b64-row--b i.y2{background:var(--b64-y2)}
.b64-row--b i.z{background:var(--paper);color:var(--muted);border-style:dashed}
.b64-row--b i:first-child{border-left:1px solid var(--line);border-radius:3px 0 0 3px}
.b64-row--b i:nth-child(24){border-right:1px solid var(--line);border-radius:0 3px 3px 0}
.b64-row--b .cut{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;border-radius:1px;background:var(--accent);transition:left .6s cubic-bezier(.2,.8,.2,1),opacity .3s}
.b64-row--b .c1{left:calc(100% / 3)}
.b64-row--b .c2{left:calc(200% / 3)}
.b64-row--b .c3{left:100%;opacity:0}
.b64-lens.is-6 .c1{left:25%}
.b64-lens.is-6 .c2{left:50%}
.b64-lens.is-6 .c3{left:75%;opacity:1}
.b64-row--s .s{grid-column:span 6;display:flex;flex-direction:column;align-items:center;padding-top:8px;opacity:0;transform:translateY(-4px);transition:opacity .25s .5s,transform .25s .5s}
.b64-lens.is-6 .b64-row--s .s{opacity:1;transform:none}
.b64-row--s small{font-family:var(--mono);font-size:11px;line-height:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.b64-row--s b{font-family:var(--mono);font-size:22px;font-weight:800;line-height:28px;color:var(--ink)}
.b64-row--s .z b{font-weight:500;color:var(--muted)}
.b64-rule{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.b64-lens.is-empty .b64-rule{margin-top:0}
.b64-vars{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:4px 0;margin:0;padding:0;list-style:none}
.b64-vars li{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}
.b64-vars button,.b64-vars li.is-miss{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center;column-gap:10px;min-height:32px;box-sizing:border-box;padding:4px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font:inherit;text-align:left;color:var(--ink);cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.b64-vars button:hover{border-color:var(--line);background:var(--btn)}
.b64-vars li.is-miss{cursor:default;color:var(--muted)}
.b64-vars li.is-miss code{white-space:normal}
.b64-vars .nm{font-size:12px;font-weight:650;white-space:nowrap}
.b64-vars code{min-width:0;overflow:hidden;font-family:var(--mono);font-size:12px;white-space:nowrap;text-overflow:ellipsis}
.b64-vars code s{text-decoration:none;color:var(--muted)}
.b64-vars em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.b64-vars li.b64-empty{display:block;grid-column:1 / -1;font-size:13px;color:var(--muted)}
@container b64 (max-width:420px){
  .b64-vars{grid-template-columns:minmax(0,1fr) max-content}
  .b64-vars .nm{grid-column:1 / -1;white-space:normal}
  .b64-vars code{grid-column:1}
}

@media (prefers-reduced-motion: reduce){
  .b64-row--b .cut,.b64-row--s .s{transition:none}
  .b64-steps.is-in .b64-step{animation:none}
}
.b64-rail .b64-empty{grid-column:1 / -1;align-self:start}

/* 본문 */
.v2-article code{font-family:var(--mono);font-size:.92em;font-weight:600;overflow-wrap:anywhere}
.v2-article pre.b64-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.b64-code code{font-size:inherit;font-weight:500;overflow-wrap:normal;white-space:pre}
.v2-article .b64-t-alpha td,.v2-article .b64-t-alpha th{text-align:center}