/* URL 인코더·디코더 — '주소 해부대': 예시 → [원문 | URL 인코딩] → 규칙 줄 → 경로 칩·상태 → 주소 해부(길이 띠 + 부분 표) → [기호 지도 | 언어·함수별 결과]. 배치는 작업면 너비(컨테이너 uen) 기준.
   색: 주소 부분(스킴·호스트·경로·쿼리·조각)은 차분한 다섯 색, 강조색은 '바뀐 글자'(기호 지도의 바꾸는 칸·함수 결과의 다른 곳)에만 쓴다. */
.uen-work{container:uen / inline-size;font-family:var(--sans);--uen-t0:color-mix(in srgb,var(--ink) 6%,var(--paper));
  --uen-scheme:#56698a;--uen-user:#8f5468;--uen-host:#86642f;--uen-port:#7d7464;--uen-path:#56762a;--uen-param:#2c7672;--uen-frag:#6b5a8e}
html[data-theme="dark"] .uen-work{--uen-scheme:#9db2d0;--uen-user:#d79ab0;--uen-host:#d6b27a;--uen-port:#b9ae9a;--uen-path:#a6c779;--uen-param:#7fc8c2;--uen-frag:#b8a7d8}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .uen-work{--uen-scheme:#9db2d0;--uen-user:#d79ab0;--uen-host:#d6b27a;--uen-port:#b9ae9a;--uen-path:#a6c779;--uen-param:#7fc8c2;--uen-frag:#b8a7d8}}
.uen-work [hidden]{display:none!important}
html:lang(ko) .uen-work{word-break:keep-all;overflow-wrap:anywhere}
.uen-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.uen-sh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 10px}
.uen-hint{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.uen-work code{font-family:var(--mono)}

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

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

/* 규칙 줄: 규칙 4 · 글자 인코딩 · 줄마다 따로 · 지우기(조절 칸 높이 42px) + 고른 규칙 설명 */
.uen-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 18px;box-shadow:inset 0 1px 0 var(--soft)} /* 윗선은 그림자로(align-check가 테두리 상자 안 tall 단추를 상자 높이로 잰다) */
.uen-rule{flex-wrap:nowrap}
.uen-rule button{height:var(--v2-ctl,42px);padding:0 12px;white-space:nowrap}
@container uen (max-width:459.98px){ .uen-rule{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%} .uen-rule button{min-width:0;padding:0 8px;overflow:hidden;text-overflow:ellipsis} } /* 좁으면 규칙 2×2(언어마다 이름 길이가 다르다) */
.uen-sel{display:inline-flex;align-items:center;gap:8px;min-width:0}
.uen-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}
.uen-sel select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.uen-sel small{font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap}
.uen-sel small:empty{display:none}
.uen-lines{height:var(--v2-ctl,42px);white-space:nowrap}
.uen-lines:has(input:disabled){opacity:.6}
#uenClear{margin-left:auto;align-self:flex-start}
.uen-rnote{flex:1 1 260px;margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.uen-rnote b{color:var(--ink)}
.uen-rnote code{padding:0 3px;border-radius:3px;background:var(--uen-t0);color:var(--ink);font-size:12.5px;white-space:nowrap}

/* 경로 칩 + 상태 */
.uen-route{padding:12px 18px 14px;border-top:1px solid var(--soft)}
.uen-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:0 0 8px;padding:0;list-style:none}
.uen-steps:empty{display:none}
.uen-steps li{position:relative;display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px solid var(--soft);border-radius:999px;background:var(--paper);font-size:12.5px;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
.uen-steps li + li{margin-left:20px}
.uen-steps li + li::before{content:"→";position:absolute;left:-16px;color:var(--muted);font-weight:400}
.uen-steps li:last-child{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.uen-steps.is-anim li{animation:uen-in .34s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes uen-in{from{opacity:0;transform:translateY(5px)}}
.uen-st{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0}
.uen-st .v2-status code{padding:0 3px;border-radius:3px;background:var(--uen-t0);font-size:.95em;word-break:break-all}
.uen-acts{display:inline-flex;flex-wrap:wrap;gap:6px}
.uen-acts:empty{display:none}
.uen-acts .v2-btn{height:32px;padding:0 11px;font-size:13px}

/* 주소 해부: 길이 띠 두 줄(인코딩 → 원문, 같은 눈금) + 부분 표 */
.uen-ana{padding:14px 18px 16px;border-top:1px solid var(--soft)}
.uen-ribbon{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 10px;margin:0 0 10px}
.uen-rb__l{font-size:12px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.uen-rb{display:flex;height:14px;border-radius:4px;overflow:hidden;background:var(--uen-t0)}
.uen-rb i{display:block;flex:none;height:100%;box-shadow:inset -1px 0 0 var(--paper)}
.uen-rb.is-go i{transition:width .8s cubic-bezier(.3,.7,.2,1) .12s}
.uen-rb .t-scheme,.uen-parts .t-scheme .uen-k i{background:var(--uen-scheme)}
.uen-rb .t-user,.uen-parts .t-user .uen-k i{background:var(--uen-user)}
.uen-rb .t-host,.uen-parts .t-host .uen-k i{background:var(--uen-host)}
.uen-rb .t-port,.uen-parts .t-port .uen-k i{background:var(--uen-port)}
.uen-rb .t-path,.uen-parts .t-path .uen-k i{background:var(--uen-path)}
.uen-rb .t-param,.uen-parts .t-param .uen-k i{background:var(--uen-param)}
.uen-rb .t-param + .t-param{box-shadow:inset 1px 0 0 var(--paper),inset -1px 0 0 var(--paper)}
.uen-rb .t-frag,.uen-parts .t-frag .uen-k i{background:var(--uen-frag)}
.uen-parts{list-style:none;margin:0;padding:0}
.uen-parts li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k a" "v v";align-items:center;gap:3px 8px;padding:8px 0;border-top:1px solid var(--soft)}
.uen-parts li:last-child{padding-bottom:0}
.uen-k{grid-area:k;display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;font-weight:700;color:var(--muted);word-break:break-all}
.uen-parts .t-param .uen-k{font-family:var(--mono);color:var(--ink)}
.uen-k i{flex:none;width:10px;height:10px;border-radius:3px}
.uen-k em,.uen-v em{font-style:normal;font-weight:500;color:var(--muted)}
.uen-v{grid-area:v;display:flex;flex-direction:column;gap:2px;min-width:0}
.uen-v b{font-size:15px;font-weight:600;line-height:1.5;word-break:break-all;overflow-wrap:anywhere}
.uen-v code{font-size:12px;line-height:1.5;color:var(--muted);word-break:break-all}
.uen-v small{font-size:12px;font-weight:600}
.uen-puny{font-family:var(--mono);color:var(--muted)}
.uen-warn{color:var(--accent)}
.uen-a{grid-area:a;display:flex;align-items:center;gap:6px}
.uen-ib{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);cursor:pointer}
.uen-ib:hover{background:var(--btn);border-color:var(--line)}
.uen-ib .i{width:15px;height:15px}
.uen-open{height:30px;padding:0 10px;font-size:12.5px;white-space:nowrap}
.uen-more{font-size:12.5px;color:var(--muted)}
@container uen (min-width:560px){
  .uen-parts li{grid-template-columns:150px minmax(0,1fr) auto;grid-template-areas:"k v a";align-items:start}
  .uen-k{min-height:24px}
}

/* 기호 지도 | 언어·함수별 결과 — 넓으면 나란히 */
.uen-pair{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--soft)}
.uen-map{margin:0;padding:14px 18px 16px;min-width:0}
.uen-fx{min-width:0;padding:14px 18px 16px;border-top:1px solid var(--soft)}
@container uen (min-width:920px){
  .uen-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .uen-fx{border-top:0;border-left:1px solid var(--soft)}
}
.uen-lg{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:11.5px;color:var(--muted)}
.uen-lg i{width:11px;height:11px;margin-left:5px;border:1px solid var(--soft);border-radius:3px;background:var(--paper)}
.uen-lg i.is-enc{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 40%,var(--paper))}
.uen-lg i.is-mix{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 55%,var(--paper))}
.uen-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
@container uen (min-width:520px){ .uen-tiles{grid-template-columns:repeat(7,minmax(0,1fr))} }
.uen-tl{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:50px;padding:4px 2px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--mono);cursor:pointer;transition:background .3s,border-color .3s}
.uen-tl b{font-size:17px;font-weight:700;line-height:1.1}
.uen-tl span{max-width:100%;overflow:hidden;font-size:11.5px;font-weight:650;line-height:1.2;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.uen-tl:last-child span{white-space:normal;word-break:break-all;text-align:center} /* ASCII 밖 글자 칸은 %XX가 길어 두 줄로 */
.uen-tl.is-enc{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent) 35%,var(--paper))}
.uen-tl.is-enc span{color:var(--accent)}
.uen-tl.is-mix{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 55%,var(--paper))}
.uen-tl sup{position:absolute;top:3px;right:4px;font-family:var(--sans);font-size:9.5px;font-weight:800;line-height:1;color:var(--ink)}
.uen-tl sup:empty{display:none}
.uen-tl.is-used{border-color:var(--line)}
.uen-tl.is-used.is-enc{border-color:var(--accent)}
.uen-tl.is-on{outline:2px solid var(--ink);outline-offset:1px}
.uen-tl:hover{border-color:var(--ink)}
.uen-tl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.uen-tl.is-flip span{animation:uen-flip .38s ease both;animation-delay:calc(var(--i) * 12ms)}
@keyframes uen-flip{from{opacity:0;transform:translateY(-5px)}}
.uen-tip{min-height:96px;margin-top:10px;padding:10px 12px;border-radius:var(--radius);background:var(--uen-t0);font-size:13px;line-height:1.6;box-sizing:border-box}
.uen-tip p{margin:0 0 6px}
.uen-tip p:last-child{margin:0}
.uen-tip small{color:var(--muted)}
.uen-g{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-right:7px;padding:0 4px;border-radius:5px;background:var(--paper);font-family:var(--mono);font-size:14px;vertical-align:middle}
.uen-tip strong{font-weight:700}
.uen-cells{display:flex;flex-wrap:wrap;gap:4px 14px}
.uen-cells > span{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px}
.uen-cells em{font-style:normal;font-size:12px;color:var(--muted)}
.uen-cells code{font-weight:700}
.uen-cells .is-cur em{color:var(--ink);font-weight:700}
.uen-cells .is-cur code{color:var(--accent)}
.uen-fns{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.uen-fns button{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n s" "o o";align-items:baseline;gap:2px 8px;width:100%;min-width:0;padding:7px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);text-align:left;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.uen-fns button:hover{background:var(--btn);border-color:var(--line)}
.uen-fns button.is-cur{border-color:var(--ink)}
.uen-fn{grid-area:n;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;min-width:0}
.uen-fn b{font-family:var(--mono);font-size:13px;font-weight:700}
.uen-fn small{font-size:11.5px;color:var(--muted)}
.uen-fo{grid-area:o;min-width:0;overflow:hidden;font-size:12.5px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.uen-fo mark{border-radius:2px;background:var(--accent-wash);color:var(--accent);font-weight:700}
.uen-fs{grid-area:s;font-size:11.5px;font-weight:700;color:var(--accent);white-space:nowrap}
.uen-fs.is-same{color:var(--muted)}
@container uen (min-width:560px) and (max-width:919.98px){
  .uen-fns button{grid-template-columns:196px minmax(0,1fr) auto;grid-template-areas:"n o s"}
}
@media (prefers-reduced-motion:reduce){
  .uen-steps.is-anim li,.uen-tl.is-flip span{animation:none}
  .uen-rb.is-go i,.uen-tl{transition:none}
}

/* 본문 */
.v2-article .uen-t code{font-size:12.5px;word-break:break-all;overflow-wrap:anywhere}
.v2-article .uen-t--sym td{font-family:var(--mono);font-size:13px;white-space:nowrap}
.v2-article .uen-t--sym td.k{font-family:var(--sans)}
.v2-article pre.uen-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.uen-code code{font-size:inherit;font-weight:500;overflow-wrap:normal;white-space:pre}
.v2-article p code,.v2-article li code{overflow-wrap:anywhere}
.v2-article .v2-src a,.v2-article .v2-src small{overflow-wrap:anywhere}