/* UUID 생성기 — 'UUID 해부대'. 작업면 폭 컨테이너 uuw, 해부도 폭 컨테이너 uua(큰 글자를 폭에 맞춤) */
.uu-work{container:uuw/inline-size;overflow:hidden}
.uu-work [hidden]{display:none !important}
.uu-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.uu-err{flex:1 1 100%;margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--accent)}

/* 버전 줄: 버전 카드 3 | 개수 폼(또는 v5 이름 공간·이름) */
.uu-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.uu-vw{flex:1 1 288px;min-width:0}
.uu-vw > .v2-label{display:block;margin:0 0 5px}
.uu-vers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.uu-vb{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;min-width:0;height:var(--v2-ctl);padding:0 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);text-align:left;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.uu-vb b{font-family:var(--mono);font-size:15px;font-weight:800;line-height:1}
.uu-vb small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.2;color:var(--muted)}
.uu-vb:hover{background:var(--btn)}
.uu-vb[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.uu-vb[aria-pressed="true"] small{color:var(--on-fill);opacity:.78}
.uu-cnt{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;flex:1 1 auto;min-width:0;margin:0}
.uu-nf{width:104px}
.uu-chips{display:flex;gap:4px}
.uu-chips button{height:var(--v2-ctl);min-width:38px;padding:0 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;transition:background var(--ease),color var(--ease)}
.uu-chips button:hover{background:var(--btn);color:var(--ink)}
.uu-chips button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.uu-new{margin-left:auto}

/* v5: 이름 공간 + 이름 */
.uu-v5{flex:1 1 100%;display:flex;flex-direction:column;gap:6px;min-width:0}
.uu-nsw{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:4px}
.uu-nsin{flex:0 1 100%;max-width:420px;height:var(--v2-ctl);padding:0 9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.uu-nsin[aria-invalid="true"]{border-color:var(--accent)}
.uu-nsv{font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.uu-nsin:not([hidden]) + .uu-nsv{display:none}
.uu-names{display:block;width:100%;min-height:72px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:13px;line-height:1.55;color:var(--ink);resize:vertical}
.uu-names:focus,.uu-nsin:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}

/* 해부도 */
.uu-ana{container:uua/inline-size;padding:14px 18px 16px;border-bottom:1px solid var(--soft);background:color-mix(in srgb, var(--wash) 50%, var(--card))}
.uu-ah{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.uu-src{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;min-width:0;font-family:var(--sans);font-size:13px;line-height:1.4}
.uu-src b{font-weight:750;color:var(--ink)}
.uu-src span{color:var(--muted);font-weight:600}
.uu-chk{display:flex;gap:8px;flex:1 1 300px;max-width:470px;min-width:0}
.uu-chk .v2-input{flex:1 1 auto;min-width:0}
.uu-chk input{text-align:left;font-family:var(--mono);font-size:13px;font-weight:600}
.uu-chk input::placeholder{font-family:var(--sans);font-size:12.5px}
.uu-chk input[aria-invalid="true"]{color:var(--accent)}
.uu-chkp{display:grid;place-items:center;padding:0 10px;border-right:1px solid var(--soft);background:var(--wash);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.uu-chkerr{margin-top:8px;text-align:right}

/* 5묶음: 글자 너비 1ch, 글자마다 아래 비트 4칸 */
.uu-grp{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;row-gap:14px;margin:20px 0 14px;font-family:var(--mono);font-size:clamp(17px, calc(4.3cqi - 2px), 36px);line-height:1;color:var(--ink)}
.uu-g{display:flex;flex-direction:column;gap:.24em}
.uu-hx{display:flex}
.uu-hx i{display:block;width:1ch;font-style:normal;font-weight:700;text-align:center;transition:color var(--ease),opacity var(--ease)}
.uu-dash{padding:0 .12em;color:var(--muted);font-weight:400}
.uu-brk{display:none}
.uu-bt{display:grid;column-gap:1px;height:clamp(7px, .3em, 10px);padding:0 .08em}
.uu-bt i{display:block;min-width:0;border-radius:1px;background:color-mix(in srgb, var(--rc) 20%, transparent);transition:opacity var(--ease),background var(--ease)}
.uu-bt i:nth-child(4n+1):not(:first-child){margin-left:2px}
.uu-bt i.on{background:var(--rc)}
/* 역할 색: 시각 ink · 버전/변형 accent · rand_a·클록 순번 ink 옅게 · 난수/해시/노드/정의 없음 muted */
.bt{--rc:var(--ink)}
.bv,.bx{--rc:var(--accent)}
.ba,.bq{--rc:color-mix(in srgb, var(--ink) 55%, var(--card))}
.br,.bh,.bn,.bu{--rc:var(--muted)}
.bz{--rc:var(--line)}
.uu-hx .cr,.uu-hx .ch,.uu-hx .cn,.uu-hx .cu,.uu-hx .cz{font-weight:500;color:color-mix(in srgb, var(--ink) 80%, var(--card))}
.uu-hx .ca,.uu-hx .cq{font-weight:600}
.uu-hx .cv{color:var(--accent);font-weight:800}
.uu-hx .cx{text-decoration:underline 2px var(--accent);text-underline-offset:.16em}
.uu-hx i.is-roll{color:var(--muted)}
/* 범례 강조: 고른 역할 말고는 흐리게 */
.uu-ana[data-hl] :where(.uu-bt i,.uu-hx i){opacity:.22}
.uu-ana[data-hl="t"] .bt,.uu-ana[data-hl="t"] .ct,.uu-ana[data-hl="v"] .bv,.uu-ana[data-hl="v"] .cv,.uu-ana[data-hl="x"] .bx,.uu-ana[data-hl="x"] .cx,
.uu-ana[data-hl="r"] .br,.uu-ana[data-hl="r"] .cr,.uu-ana[data-hl="a"] .ba,.uu-ana[data-hl="a"] .ca,.uu-ana[data-hl="h"] .bh,.uu-ana[data-hl="h"] .ch,
.uu-ana[data-hl="q"] .bq,.uu-ana[data-hl="q"] .cq,.uu-ana[data-hl="n"] .bn,.uu-ana[data-hl="n"] .cn,.uu-ana[data-hl="u"] .bu,.uu-ana[data-hl="u"] .cu,
.uu-ana[data-hl="z"] .bz,.uu-ana[data-hl="z"] .cz{opacity:1}
.uu-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 6px;margin:0 0 10px}
.uu-lg{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.uu-lg i{width:10px;height:10px;border-radius:2px;background:var(--rc)}
.uu-lg:hover,.uu-ana[data-hl] .uu-lg:focus-visible{background:var(--btn)}
.uu-info{max-width:640px;margin:0 auto;text-align:center;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
.uu-info span{display:block}
.uu-ana.is-dim .uu-grp,.uu-ana.is-dim .uu-leg,.uu-ana.is-dim .uu-info,.uu-ana.is-empty .uu-grp,.uu-ana.is-empty .uu-leg{opacity:.32}
.uu-lg[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* 출력판 */
.uu-out{padding:12px 18px 14px}
.uu-oh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 10px}
.uu-sg{display:flex;align-items:center;gap:8px;min-width:0}
.uu-sl{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
#uuCase button,#uuShape button{font-family:var(--mono);font-size:12.5px}
.uu-list{container:uul/inline-size;position:relative;display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, calc(var(--uu-ch, 36) * 1ch + var(--uu-ix, 2) * 6.6px + 50px)), 1fr));gap:1px 8px;margin:0;padding:4px;list-style:none;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:12.5px;overflow-y:auto;overscroll-behavior:contain}
.uu-list.is-scroll{background:linear-gradient(var(--paper) 30%, transparent) top/100% 26px no-repeat local,linear-gradient(transparent, var(--paper) 70%) bottom/100% 26px no-repeat local,radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--ink) 16%, transparent), transparent) top/100% 9px no-repeat scroll,radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) bottom/100% 9px no-repeat scroll,var(--paper)}
.uu-list li[role="option"]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:30px;padding:3px 3px 3px 7px;border-radius:3px;cursor:pointer;scroll-margin:4px}
.uu-list li[role="option"]:hover{background:var(--wash)}
.uu-list li[aria-selected="true"]{background:var(--btn);box-shadow:inset 2px 0 0 var(--ink)}
.uu-list li:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.uu-ix{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.uu-list code{min-width:0;font-family:inherit;font-size:max(10px, min(12.5px, calc((100cqi - var(--uu-ix, 2) * 6.6px - 60px) / var(--uu-ch, 36) * 1.64)));line-height:1.45;color:color-mix(in srgb, var(--ink) 84%, var(--card));overflow-wrap:anywhere}
.uu-list code i{font-style:normal}
.uu-list code .t{color:var(--ink);font-weight:700}
.uu-list code .v{color:var(--accent);font-weight:700}
.uu-list code .x{text-decoration:underline 1.5px var(--accent);text-underline-offset:2px}
.uu-list code .d{color:var(--muted)}
.uu-cp{display:grid;place-items:center;width:24px;height:24px;border-radius:4px;color:var(--muted);opacity:0;transition:opacity var(--ease),background var(--ease)}
.uu-cp .i,.uu-cp svg{width:14px;height:14px}
.uu-list li:hover .uu-cp,.uu-list li[aria-selected="true"] .uu-cp{opacity:1}
.uu-cp:hover{background:var(--card);color:var(--ink)}
.uu-br{grid-column:1/-1;padding:2px 8px;font-size:13px;line-height:22px;color:var(--muted)}
.uu-of{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.uu-msg{flex:1 1 220px;min-width:0;min-height:18px;margin:0}
.uu-sum{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.uu-ob{display:flex;gap:6px}
.uu-privacy{margin:0;padding:10px 18px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}

/* 중간 폭: 목록이 한 열이 되는 폭에서는 출력 설정을 목록 왼쪽 세로 칸으로 */
@container uuw (min-width:561px) and (max-width:719px){
  .uu-out{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start}
  .uu-oh{flex-direction:column;align-items:flex-start;gap:12px;max-width:236px;margin:0}
  .uu-sg{flex-direction:column;align-items:flex-start;gap:5px}
  .uu-of{grid-column:1/-1}
}
/* 좁은 작업면 */
@container uuw (max-width:560px){
  .uu-bar{padding:12px 14px;gap:10px}
  .uu-vw{flex-basis:100%}
  .uu-vb{padding:0 8px}
  .uu-cnt{flex-basis:100%}
  .uu-nf{flex:1 1 92px;width:auto}
  .uu-new{flex:1 1 100%;justify-content:center;margin-left:0}
  .uu-ana{padding:12px 14px 14px}
  .uu-chk{flex-basis:100%;max-width:none}
  .uu-chkerr{text-align:left}
  .uu-out{padding:12px 14px}
  .uu-oh{gap:8px 12px}
  .uu-of .uu-msg{flex-basis:100%}
  .uu-ob{flex:1 1 100%}
  .uu-ob .v2-btn{flex:1 1 0;justify-content:center}
  .uu-privacy{padding:10px 14px}
}
/* 해부도가 좁으면 두 줄(8-4-4- / 4-12)로 나눠 글자를 키운다 */
@container uua (max-width:540px){
  .uu-grp{font-size:clamp(16px, calc(8.2cqi - 4px), 32px)}
  .uu-brk{display:block;flex:0 0 100%;height:0}
}
/* 본문 표 안의 UUID·함수 이름은 하이픈에서 끊지 않는다(좁으면 .tbl 이 가로로 넘긴다) */
.v2-article .tbl td code{white-space:nowrap}
@media (prefers-reduced-motion: reduce){
  .uu-vb,.uu-hx i,.uu-bt i,.uu-cp{transition:none}
}