/* URL 쿼리 ↔ 항목 표 — '쿼리 작업대': 예시 → 원래 주소 → 길이 띠(원래·결과) → 다시 만든 주소 → 항목 표 → 서버가 읽는 값. 배치는 작업면 너비(컨테이너 uqt) 기준.
   색: 항목은 차분한 두 색을 번갈아, 강조색은 '추적 매개변수'(띠·표의 클릭 ID·캠페인 태그)에만 쓴다. 고친 곳은 잉크색 밑줄. */
.uqt-work{container:uqt / inline-size;font-family:var(--sans);--uqt-t0:color-mix(in srgb,var(--ink) 6%,var(--paper));
  --uqt-p0:#2c7672;--uqt-p1:#56698a;--uqt-frag:#6b5a8e;--uqt-last:#8f5468;--uqt-join:#86642f;--uqt-base:color-mix(in srgb,var(--ink) 20%,var(--paper))}
html[data-theme="dark"] .uqt-work{--uqt-p0:#7fc8c2;--uqt-p1:#9db2d0;--uqt-frag:#b8a7d8;--uqt-last:#d79ab0;--uqt-join:#d6b27a}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .uqt-work{--uqt-p0:#7fc8c2;--uqt-p1:#9db2d0;--uqt-frag:#b8a7d8;--uqt-last:#d79ab0;--uqt-join:#d6b27a}}
.uqt-work [hidden]{display:none!important}
html:lang(ko) .uqt-work{word-break:keep-all}
.uqt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.uqt-work code{font-family:var(--mono)}
.uqt-ph{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 0 8px;min-height:32px}
.uqt-meta{margin-right:auto;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.uqt-meta code{padding:0 4px;border-radius:3px;background:var(--uqt-t0);color:var(--ink);font-size:12.5px;font-weight:700;word-break:break-all}
.uqt-src,.uqt-strip,.uqt-out,.uqt-tbl,.uqt-read{padding:14px 18px 16px;border-top:1px solid var(--soft)}
.uqt-src{border-top:0}

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

/* 원래 주소 */
.uqt-ta{display:block;width:100%;box-sizing:border-box;margin:0;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:14px;font-weight:600;line-height:22px;resize:none;overflow-y:auto;word-break:break-all;overflow-wrap:anywhere;transition:border-color var(--ease)}
.uqt-ta::placeholder{font-family:var(--sans);font-weight:400;color:var(--muted);opacity:.75}
.uqt-ta:focus{outline:none;border-color:var(--ink)}
.uqt-ta:focus-visible{box-shadow:0 0 0 1px var(--ink)}

/* 길이 띠: 원래·결과 두 줄을 같은 눈금으로. 항목 한 칸 = 그 항목이 주소에서 차지하는 글자 수 */
.uqt-cut{display:inline-flex;flex-wrap:wrap;gap:6px}
.uqt-cut b{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.uqt-cut .v2-btn:disabled b{background:var(--muted)}
.uqt-bars{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 10px}
.uqt-bl{font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap}
.uqt-bl b{display:inline-block;min-width:4ch;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.uqt-bar{display:flex;height:28px;border-radius:5px;overflow:hidden;background:var(--uqt-t0)}
.uqt-bar i{display:block;flex:none;height:100%;min-width:0;overflow:hidden;box-shadow:inset -1px 0 0 var(--card);cursor:pointer}
.uqt-bar i span{display:block;padding:0 5px;font:700 10.5px/28px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:clip;color:#fff;pointer-events:none}
.uqt-bar.is-go i{transition:width .5s cubic-bezier(.3,.7,.2,1),opacity .4s}
.uqt-bar i.is-out{opacity:0}
.s-base{background:var(--uqt-base)} .s-base span{color:var(--ink)!important}
.s-p,.s-p0{background:var(--uqt-p0)}
.s-p1{background:var(--uqt-p1)}
.s-id{background:repeating-linear-gradient(135deg,var(--accent) 0 6px,color-mix(in srgb,var(--accent) 72%,var(--card)) 6px 12px)}
.s-cmp{background:color-mix(in srgb,var(--accent) 38%,var(--card))} .s-cmp span{color:var(--ink)!important}
.s-frag{background:var(--uqt-frag)}
.uqt-bar i.is-chg,.uqt-bar i.is-add,.uqt-lg i.is-chg{box-shadow:inset 0 -4px 0 var(--ink),inset -1px 0 0 var(--card)}
html[data-theme="dark"] .uqt-bar i span{color:#1a1208}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .uqt-bar i span{color:#1a1208}}
.uqt-lg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:10px 0 0;font-size:11.5px;color:var(--muted)}
.uqt-lg i{display:inline-block;width:12px;height:10px;margin-right:-7px;border-radius:2px;vertical-align:-1px}

/* 다시 만든 주소 */
.uqt-res{min-height:44px;max-height:242px;overflow:auto;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:13.5px;font-weight:600;line-height:22px;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;color:var(--ink)}
.uqt-res:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.uqt-res .o-base,.uqt-res .o-sep,.uqt-res .o-frag{color:var(--muted)}
.uqt-res .o-chg,.uqt-res .o-add{background:var(--uqt-t0);text-decoration:underline 2px var(--ink);text-underline-offset:4px}
.uqt-ph0{font-family:var(--sans);font-weight:400;color:var(--muted)}
.uqt-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:10px}
.uqt-st{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;flex:1 1 260px;min-width:0}
.uqt-st .v2-status{line-height:1.6}
.uqt-acts{display:inline-flex;gap:6px}
.uqt-acts:empty{display:none}
.uqt-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.uqt-opt{display:inline-flex;align-items:center;gap:6px}
.uqt-opt .v2-seg button{min-width:44px;font-family:var(--mono)}
.uqt-fmt button{white-space:nowrap}

/* 항목 표: 번호 | 이름 | 값 | 빼기 — 모든 줄이 같은 열을 쓴다 */
.uqt-crumb{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:0 0 10px;padding:8px 10px;border-radius:var(--radius);background:var(--wash);font-size:12.5px;color:var(--muted)}
.uqt-crumb b{color:var(--ink)}
.uqt-fix{display:grid;grid-template-columns:minmax(28px,max-content) minmax(0,1fr);gap:6px;align-items:center;padding:0 36px 8px 0}
#uqtFragRow{padding:8px 36px 0 0;border-top:1px solid var(--soft)}
.uqt-k{font:700 11px/1 var(--mono);color:var(--muted);text-align:right;white-space:nowrap}
.uqt-in{width:100%;min-width:0;box-sizing:border-box;height:34px;padding:0 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--muted);font:600 13px/1 var(--mono)}
.uqt-in:focus,.uqt-n:focus,.uqt-v:focus{outline:none;border-color:var(--ink);color:var(--ink)}
.uqt-cols,.uqt-row{display:grid;grid-template-columns:28px minmax(0,34fr) minmax(0,66fr) 112px 30px;gap:0 6px}
.uqt-cols{padding:6px 0 4px;font-size:11px;font-weight:600;color:var(--muted)}
.uqt-cols span:first-child{text-align:right}
.uqt-rows{list-style:none;margin:0;padding:0}
.uqt-row{align-items:start;margin:0 -18px;padding:5px 18px;border-top:1px solid var(--soft);transition:background var(--ease)}
.uqt-row.is-sel{background:color-mix(in srgb,var(--wash) 85%,var(--paper))}
.uqt-no{font:700 11px/34px var(--mono);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.uqt-row.is-chg .uqt-no,.uqt-row.is-add .uqt-no{color:var(--ink);text-decoration:underline 2px;text-underline-offset:3px}
.uqt-n,.uqt-v{width:100%;min-width:0;box-sizing:border-box;margin:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.uqt-n{height:34px;padding:0 9px;font:700 13px/1 var(--mono)}
.uqt-v{display:block;field-sizing:content;max-height:186px;min-height:34px;padding:5px 9px;font-family:var(--sans);font-size:14px;font-weight:500;line-height:22px;resize:none;overflow-y:auto;word-break:break-all;overflow-wrap:anywhere}
.uqt-row.is-t-id .uqt-n{color:var(--accent)}
.uqt-x{grid-column:5;grid-row:1;width:30px;height:34px;padding:0;border:0;border-radius:var(--radius);background:none;color:var(--muted);font-size:19px;line-height:1;cursor:pointer;transition:background var(--ease),color var(--ease)}
.uqt-x:hover{background:var(--btn);color:var(--accent)}
.uqt-x:focus-visible,.uqt-open:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* 표시 열: 추적(회사 이름, 띠와 같은 무늬 점)·같은 이름·빈 값·서명·고침 … 칩은 열 너비 안에서 줄바꿈 */
.uqt-tags{grid-column:4;grid-row:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:3px;min-width:0;padding-top:7px}
.uqt-tags em,.uqt-open{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.uqt-tags em{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border:1px solid var(--soft);border-radius:10px;background:var(--paper);font-size:11px;font-style:normal;font-weight:650;color:var(--muted);white-space:nowrap}
.uqt-tags em.is-id,.uqt-tags em.is-cmp{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 35%,var(--paper))}
.uqt-tags em.is-id::before,.uqt-tags em.is-cmp::before{content:"";flex:none;width:9px;height:9px;border-radius:2px}
.uqt-tags em.is-id::before{background:repeating-linear-gradient(135deg,var(--accent) 0 2px,color-mix(in srgb,var(--accent) 60%,var(--card)) 2px 4px)}
.uqt-tags em.is-cmp::before{background:color-mix(in srgb,var(--accent) 38%,var(--card))}
.uqt-tags em.is-warn{border-style:dashed;border-color:var(--accent);color:var(--accent)}
.uqt-tags em.is-chg,.uqt-tags em.is-add{border-color:var(--ink);color:var(--ink)}
.uqt-open{height:20px;padding:0 8px;border:1px solid var(--line);border-radius:10px;background:var(--btn);font-family:var(--sans);font-size:11px;font-weight:700;color:var(--ink);white-space:nowrap;cursor:pointer}
.uqt-open:hover{background:var(--btn-hover)}
.uqt-empty{margin:0;padding:14px 0;border-top:1px solid var(--soft);font-size:13px;color:var(--muted);text-align:center}
.uqt-tools{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
@container uqt (min-width:720px){ .uqt-cols,.uqt-row{grid-template-columns:28px minmax(0,34fr) minmax(0,66fr) 136px 30px} }
@container uqt (max-width:519.98px){
  .uqt-cols{display:none}
  .uqt-row{grid-template-columns:24px minmax(0,1fr) 30px;gap:5px 6px}
  .uqt-x{grid-column:3}
  .uqt-row .uqt-v{grid-column:2 / 4;grid-row:2}
  .uqt-tags{grid-column:2 / 4;grid-row:3;padding-top:0}
  .uqt-tags:empty{display:none}
  .uqt-fix{grid-template-columns:minmax(24px,max-content) minmax(0,1fr);padding-right:0}
  #uqtFragRow{padding-right:0}
}

/* 서버가 읽는 값: 고른 이름을 여덟 환경이 읽은 결과. 왼쪽 띠 색 = 읽는 방식 */
.uqt-envs{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:0;padding:0;list-style:none}
.uqt-envs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:baseline;padding:8px 11px;border:1px solid var(--soft);border-left:3px solid var(--line);border-radius:var(--radius);background:var(--paper);transition:border-color var(--ease)}
.uqt-envs b{font-size:12.5px;font-weight:750}
.uqt-envs small{font-size:11px;font-weight:650;color:var(--muted);text-align:right}
.uqt-envs code{grid-column:1 / 3;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uqt-envs output{grid-column:1 / 3;font:700 13.5px/1.5 var(--mono);color:var(--ink);word-break:break-all;overflow-wrap:anywhere}
.uqt-envs li.k-first,.uqt-lg .k-first{border-left-color:var(--uqt-p0);background-color:var(--uqt-p0)}
.uqt-envs li.k-last,.uqt-lg .k-last{border-left-color:var(--uqt-last);background-color:var(--uqt-last)}
.uqt-envs li.k-list,.uqt-envs li.k-tree,.uqt-lg .k-list{border-left-color:var(--uqt-p1);background-color:var(--uqt-p1)}
.uqt-envs li.k-join,.uqt-lg .k-join{border-left-color:var(--uqt-join);background-color:var(--uqt-join)}
.uqt-envs li.k-drop,.uqt-envs li.k-part,.uqt-lg .k-drop{border-left-color:var(--accent);background-color:var(--accent)}
.uqt-envs li[class]{background-color:var(--paper)}
.uqt-envs li.k-drop output{color:var(--accent)}
.uqt-read.is-empty .uqt-envs{opacity:.5}
@container uqt (min-width:330px){ .uqt-envs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container uqt (max-width:519.98px){ .uqt-envs li{padding:7px 9px} .uqt-envs small{grid-column:1 / 3;grid-row:4;text-align:left} .uqt-envs small:empty{display:none} }
@container uqt (min-width:760px){ .uqt-envs{grid-template-columns:repeat(4,minmax(0,1fr))} }

@media (prefers-reduced-motion:reduce){ .uqt-bar.is-go i,.uqt-row,.uqt-envs li{transition:none} }

/* 본문 표·코드 */
.v2-article .uqt-t code{font-size:12.5px;word-break:normal;overflow-wrap:anywhere}
.v2-article .uqt-t td.k{white-space:nowrap}
.v2-article pre.uqt-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.uqt-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}