/* JWT 디코더 전용 CSS (2026-10-22). '토큰 검문대': 예시 띠 · 토큰 칸(색 표시층 + 투명 textarea) · 구간 막대 · 검문 4관문 + 판정 줄 ·
   [유효 시간 | 서명 확인] 두 칸(같은 높이, 키 칸이 남는 높이를 채움) · 내용 표(↔ JSON 고치기 두 칸).
   구간 색 셋(헤더·페이로드·서명)은 토큰 글자·구간 막대·표 이름이 함께 쓴다. 움직임: 관문 등이 차례로 켜짐, 지금 표시 맥박, 시간선 이동 — reduced-motion 정지.
   작업면 700px 미만은 한 열, 관문은 2×2. 공용 부품은 assets/v2.css */
.jwt-work{container:jwt / inline-size;padding-bottom:18px;
  --jwt-h:#2f6f86;--jwt-p:#7b4f98;--jwt-s:#a35f0a;--jwt-ok:#3f7a35;--jwt-warn:#9a6200;--jwt-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
html[data-theme="dark"] .jwt-work{--jwt-h:#74bfd6;--jwt-p:#c49be0;--jwt-s:#e9a65a;--jwt-ok:#8cc77c;--jwt-warn:#e8bd62}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .jwt-work{--jwt-h:#74bfd6;--jwt-p:#c49be0;--jwt-s:#e9a65a;--jwt-ok:#8cc77c;--jwt-warn:#e8bd62}}
.jwt-work [hidden]{display:none !important}
.jwt-lb{font-family:var(--sans);font-size:12px;font-weight:800;color:var(--ink)}

/* 예시 띠 */
.jwt-head{padding:12px 18px;border-bottom:1px solid var(--soft)}
.jwt-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.jwt-ex .v2-label{margin-right:4px}
.jwt-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(--muted);transition:background var(--ease),color var(--ease),border-color var(--ease)}
.jwt-ex button:hover{background:var(--btn);color:var(--ink)}
.jwt-ex button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}

/* 토큰 칸 */
.jwt-tok{padding:16px 18px 0}
.jwt-ph{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px}
.jwt-meta{margin-right:auto;font-family:var(--sans);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.jwt-box{position:relative}
.jwt-ta,.jwt-back{display:block;box-sizing:border-box;width:100%;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--jwt-mono);font-size:13px;line-height:20px;letter-spacing:0;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;tab-size:2;overflow-y:auto}
.jwt-ta{position:relative;z-index:1;resize:none;background:transparent;color:transparent;caret-color:var(--ink);outline:0;transition:border-color var(--ease),box-shadow var(--ease)}
.jwt-ta:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.jwt-ta::placeholder{color:var(--muted);opacity:.85}
.jwt-ta::selection{background:color-mix(in srgb, var(--jwt-h) 30%, transparent);color:transparent}
.jwt-back{position:absolute;inset:0;z-index:0;background:var(--paper);color:var(--ink);pointer-events:none;scrollbar-width:none}
.jwt-back::-webkit-scrollbar{display:none}
.jwt-back .o{color:var(--muted)}
.jwt-back .s0{color:var(--jwt-h)}
.jwt-back .s1{color:var(--jwt-p)}
.jwt-back .s2{color:var(--jwt-s)}
.jwt-back .e{color:var(--muted)}
.jwt-back .d{color:var(--ink);font-weight:800}
.jwt-back .hl{background:color-mix(in srgb, currentColor 20%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, currentColor 35%, transparent)}
.jwt-back .er{background:var(--accent);color:var(--on-fill)}
.jwt-cands{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.jwt-cands button{height:28px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.jwt-cands button small{font-family:var(--jwt-mono);font-weight:400}
.jwt-cands button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.jwt-bar{margin-top:8px}
.jwt-bs{display:flex;gap:3px}
.jwt-b{min-width:0;height:6px;border-radius:1px;background:var(--muted)}
.jwt-b.s0{background:var(--jwt-h)}.jwt-b.s1{background:var(--jwt-p)}.jwt-b.s2{background:var(--jwt-s)}
.jwt-b.e{background:repeating-linear-gradient(135deg, var(--line) 0 3px, var(--soft) 3px 6px)}
.jwt-lg{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:5px}
.jwt-lg em{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;cursor:default}
.jwt-lg em::before{content:"";width:8px;height:8px;border-radius:1px;background:var(--muted)}
.jwt-lg em.s0::before{background:var(--jwt-h)}.jwt-lg em.s1::before{background:var(--jwt-p)}.jwt-lg em.s2::before{background:var(--jwt-s)}
.jwt-lg em.e::before{background:var(--line)}
.jwt-st{margin:8px 0 0;min-height:18px;line-height:1.5}
.jwt-notes{margin:4px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.jwt-notes li::before{content:"· "}

/* 검문 4관문 */
.jwt-gatebox{padding:16px 18px 0}
.jwt-gates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))}
.jwt-g{position:relative;display:flex;border:1px solid var(--soft);background:var(--paper);
  transition:border-color .25s ease, background .25s ease;transition-delay:calc(var(--i) * var(--gd, 0ms))}
.jwt-g > button{flex:1 1 auto;display:grid;grid-template-columns:auto minmax(0, 1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;min-width:0;margin:0;padding:11px 12px 10px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.jwt-g > button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.jwt-g + .jwt-g{margin-left:-1px}
.jwt-g::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform .32s ease, background .25s ease;transition-delay:calc(var(--i) * var(--gd, 0ms))}
.jwt-g i{grid-row:1 / 3;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);font-style:normal;font-family:var(--sans);font-size:11.5px;font-weight:800;color:var(--muted);background:var(--card);transition:background .25s ease, color .25s ease, border-color .25s ease;transition-delay:calc(var(--i) * var(--gd, 0ms))}
.jwt-g b{font-family:var(--sans);font-size:12.5px;font-weight:800;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.jwt-g span{font-family:var(--sans);font-size:12px;line-height:1.35;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.jwt-g[data-st="ok"]{border-color:color-mix(in srgb, var(--jwt-ok) 55%, var(--soft));z-index:1}
.jwt-g[data-st="ok"]::after{transform:scaleX(1);background:var(--jwt-ok)}
.jwt-g[data-st="ok"] i{background:var(--jwt-ok);border-color:var(--jwt-ok);color:var(--paper)}
.jwt-g[data-st="ok"] span{color:var(--jwt-ok)}
.jwt-g[data-st="bad"]{border-color:color-mix(in srgb, var(--accent) 60%, var(--soft));background:var(--accent-wash);z-index:2}
.jwt-g[data-st="bad"]::after{transform:scaleX(1);background:var(--accent)}
.jwt-g[data-st="bad"] i{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.jwt-g[data-st="bad"] span{color:var(--accent);font-weight:600}
.jwt-g[data-st="warn"]::after{transform:scaleX(1);background:var(--jwt-warn)}
.jwt-g[data-st="warn"] i{border-color:var(--jwt-warn);color:var(--jwt-warn)}
.jwt-g[data-st="warn"] span{color:var(--jwt-warn)}
.jwt-g[data-st="wait"] i{border-style:dashed;color:var(--ink)}
.jwt-g[data-st="wait"] span{color:var(--ink)}
.jwt-g[data-st="skip"] b,.jwt-g[data-st="skip"] i,.jwt-g[data-st="idle"] b{opacity:.55}
.jwt-g:hover{background:var(--wash)}
.jwt-verdict{margin:10px 0 0;padding:9px 12px;border-left:3px solid var(--line);background:var(--wash);font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink)}
.jwt-verdict[data-st="ok"]{border-left-color:var(--jwt-ok)}
.jwt-verdict[data-st="bad"]{border-left-color:var(--accent)}

/* 두 칸: 유효 시간 | 서명 확인 */
.jwt-work[data-state="jwe"] .jwt-duo,.jwt-work[data-state="err"] .jwt-duo,.jwt-work[data-state="empty"] .jwt-duo{display:none}
.jwt-duo{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:14px;padding:16px 18px 0;align-items:stretch}
.jwt-card{display:flex;flex-direction:column;min-width:0;padding:12px 14px 14px;border:1px solid var(--soft);background:var(--paper)}
.jwt-ch{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;min-height:30px}
.jwt-ch .v2-seg{margin-left:auto}
.jwt-count{margin:0}
.jwt-count b{display:block;font-family:var(--sans);font-size:21px;line-height:1.3;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.jwt-count small{display:block;margin-top:2px;font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.jwt-count[data-st="ok"] b{color:var(--jwt-ok)}
.jwt-count[data-st="bad"] b{color:var(--accent)}
.jwt-count[data-st="warn"] b{color:var(--jwt-warn)}
.jwt-count[data-st="idle"] b{font-size:15px;font-weight:600;color:var(--muted)}
.jwt-track{position:relative;height:78px;margin:12px 10px 4px}
.jwt-ax{position:absolute;left:-10px;right:-10px;top:31px;height:2px;background:var(--soft)}
.jwt-band{position:absolute;top:25px;height:14px;box-sizing:border-box;border:1px solid var(--jwt-ok);background:color-mix(in srgb, var(--jwt-ok) 22%, transparent);border-radius:2px;transition:left .9s linear, width .9s linear}
.jwt-band.is-open{border-right:0;border-radius:2px 0 0 2px;background:linear-gradient(90deg, color-mix(in srgb, var(--jwt-ok) 22%, transparent) 70%, transparent)}
.jwt-band.is-from{border-left:0;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--jwt-ok) 22%, transparent) 30%)}
.jwt-lw{position:absolute;top:25px;height:14px;background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--jwt-ok) 40%, transparent) 0 2px, transparent 2px 5px);transition:left .9s linear, width .9s linear}
.jwt-brk{position:absolute;top:21px;width:8px;height:22px;margin-left:-4px;background:var(--paper);border-left:2px solid var(--line);border-right:2px solid var(--line);transform:skewX(-20deg)}
.jwt-mk{position:absolute;top:21px;width:0;transition:left .9s linear}
.jwt-mk i{position:absolute;left:-1px;top:0;width:2px;height:22px;background:var(--jwt-p)}
.jwt-mk em{position:absolute;top:25px;left:0;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-family:var(--jwt-mono);font-size:11px;font-weight:700;color:var(--jwt-p)}
.jwt-mk.is-low em{top:41px}
.jwt-now{position:absolute;top:0;width:0;transition:left .9s linear}
.jwt-now em{position:absolute;top:0;left:0;transform:translateX(-50%);white-space:nowrap;font-style:normal;font-family:var(--sans);font-size:11px;font-weight:800;color:var(--ink)}
.jwt-now i{position:absolute;left:-6px;top:26px;width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--paper)}
.jwt-now i::before{content:"";position:absolute;left:5px;top:-10px;width:2px;height:10px;background:var(--ink)}
.jwt-now[data-st="ok"] i{background:var(--jwt-ok);animation:jwtPulse 1.8s ease-out infinite}
.jwt-now[data-st="bad"] i{background:var(--accent)}
@keyframes jwtPulse{0%{box-shadow:0 0 0 3px var(--paper), 0 0 0 3px color-mix(in srgb, var(--jwt-ok) 55%, transparent)}100%{box-shadow:0 0 0 3px var(--paper), 0 0 0 11px transparent}}
.jwt-tl{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px}
.jwt-tl li{display:grid;grid-template-columns:34px minmax(0, 1fr) auto;gap:8px;align-items:baseline;font-family:var(--sans);font-size:12.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.jwt-tl code{font-family:var(--jwt-mono);font-size:12px;font-weight:700;color:var(--jwt-p)}
.jwt-tl small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.jwt-tl li.is-miss span,.jwt-tl li.is-bad span{color:var(--jwt-warn)}
.jwt-life{margin:auto 0 0;padding-top:10px;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}

.jwt-alg{margin-left:auto;min-width:0}
.jwt-alg:empty{display:none}
.jwt-alg code{font-family:var(--jwt-mono);font-size:12.5px;font-weight:800;color:var(--jwt-h)}
.jwt-keyf{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.jwt-kh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 5px}
.jwt-kh .v2-label{margin:0}
.jwt-kh .v2-seg{margin-left:auto}
.jwt-key{flex:1 1 auto;box-sizing:border-box;width:100%;min-height:74px;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--jwt-mono);font-size:12px;line-height:18px;color:var(--ink);resize:vertical;outline:0;word-break:break-all}
.jwt-key:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.jwt-key::placeholder{color:var(--muted);opacity:.8}
.jwt-key:disabled{background:var(--wash);cursor:not-allowed}
.jwt-vres{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;margin:10px 0 0;padding:8px 10px;border:1px dashed var(--line);font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.jwt-vres b{font-size:13.5px;font-weight:800;color:var(--ink)}
.jwt-vres[data-st="ok"]{border:1px solid var(--jwt-ok);background:color-mix(in srgb, var(--jwt-ok) 9%, transparent)}
.jwt-vres[data-st="ok"] b{color:var(--jwt-ok)}
.jwt-vres[data-st="bad"]{border:1px solid var(--accent);background:var(--accent-wash)}
.jwt-vres[data-st="bad"] b{color:var(--accent)}
.jwt-vres[data-st="idle"]{display:none}
.jwt-exp{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:10px;margin-top:12px}
.jwt-exp .v2-input input{text-align:left;font-family:var(--jwt-mono);font-size:12.5px;font-weight:500}
.jwt-exp .v2-input input::placeholder{font-family:var(--sans);font-size:12px}
.jwt-safe{margin:6px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}

/* 내용 표 */
.jwt-claims{padding:16px 18px 0}
.jwt-cpy{display:flex;flex-wrap:wrap;gap:6px}
.jwt-tbl{border-top:1px solid var(--soft)}
.jwt-grp{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;padding:12px 6px 6px;border-bottom:1px solid var(--soft)}
.jwt-grp b{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12.5px;font-weight:800;color:var(--ink)}
.jwt-grp b::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--muted)}
.jwt-grp.s0 b::before{background:var(--jwt-h)}.jwt-grp.s1 b::before{background:var(--jwt-p)}.jwt-grp.s2 b::before{background:var(--jwt-s)}
.jwt-grp.e b::before{background:repeating-linear-gradient(135deg, var(--line) 0 3px, var(--soft) 3px 6px)}
.jwt-grp small{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.jwt-row{display:grid;grid-template-columns:minmax(118px, .75fr) minmax(0, 1.3fr) minmax(0, 1.55fr);gap:4px 14px;align-items:start;padding:8px 6px;border-bottom:1px solid var(--soft);outline:0}
.jwt-row:hover,.jwt-row:focus-visible{background:var(--wash)}
.jwt-row:focus-visible{box-shadow:inset 2px 0 0 var(--ink)}
.jwt-k{min-width:0}
.jwt-k code{font-family:var(--jwt-mono);font-size:12.5px;font-weight:800;color:var(--jwt-p);overflow-wrap:anywhere}
.jwt-row[data-seg="0"] .jwt-k code{color:var(--jwt-h)}
.jwt-row.is-enc .jwt-k code{color:var(--muted)}
.jwt-k small{display:block;margin-top:1px;font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}
.jwt-v{min-width:0;font-family:var(--jwt-mono);font-size:12.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.jwt-v code{font-family:inherit}
.jwt-s,.jwt-j{display:block;max-height:7.5em;overflow:auto;white-space:pre-wrap;word-break:break-all}
.jwt-dt{display:block;font-family:var(--sans);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.jwt-v small{display:block;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.jwt-raw{font-size:11.5px;color:var(--muted)}
.jwt-chips{display:flex;flex-wrap:wrap;gap:4px}
.jwt-chips code{padding:1px 6px;border:1px solid var(--soft);border-radius:2px;background:var(--wash);font-size:12px}
.jwt-d{min-width:0}
.jwt-d p{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted)}
.jwt-d .jwt-w{margin-top:4px;padding-left:9px;border-left:2px solid var(--jwt-warn);color:var(--ink)}
.jwt-row.is-ghost .jwt-v code{font-style:italic;color:var(--muted)}
.jwt-row.is-note{grid-template-columns:minmax(0, 1fr)}
.jwt-empty{margin:0;padding:18px 6px;font-family:var(--sans);font-size:13px;color:var(--muted)}

/* JSON 고치기 */
.jwt-edit{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.45fr);gap:14px;padding-top:12px;align-items:stretch}
.jwt-ecol{display:flex;flex-direction:column;gap:10px;min-width:0}
.v2-f.jwt-ecol{gap:0}
.jwt-edit .v2-f > label{margin-bottom:5px}
.jwt-ej{display:block;box-sizing:border-box;width:100%;min-height:118px;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--jwt-mono);font-size:12.5px;line-height:19px;color:var(--ink);resize:vertical;outline:0;tab-size:2}
.jwt-ej:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.jwt-ej--p{flex:1 1 auto;min-height:240px}
.jwt-ee{margin:5px 0 0;font-family:var(--sans);font-size:12px;color:var(--accent)}
.jwt-retime{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.jwt-sst{margin:auto 0 0;padding:8px 10px;border-left:3px solid var(--line);background:var(--wash);font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink)}
.jwt-sst[data-st="ok"]{border-left-color:var(--jwt-ok)}
.jwt-sst[data-st="bad"],.jwt-sst[data-st="warn"]{border-left-color:var(--accent)}

@container jwt (max-width:700px){
  .jwt-duo,.jwt-edit{grid-template-columns:minmax(0, 1fr)}
  .jwt-gates{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .jwt-g:nth-child(3){margin-left:0}
  .jwt-g:nth-child(n+3){margin-top:-1px}
  .jwt-row{grid-template-columns:minmax(104px, .7fr) minmax(0, 1.3fr)}
  .jwt-row .jwt-d{grid-column:1 / -1}
}
@container jwt (max-width:460px){
  .jwt-head,.jwt-tok,.jwt-gatebox,.jwt-duo,.jwt-claims{padding-left:14px;padding-right:14px}
  .jwt-exp{grid-template-columns:minmax(0, 1fr)}
  .jwt-row{grid-template-columns:minmax(0, 1fr)}
  .jwt-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
  .jwt-count b{font-size:18px}
  .jwt-tl li{grid-template-columns:30px minmax(0, 1fr)}
  .jwt-tl li small{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .jwt-g,.jwt-g::after,.jwt-g i,.jwt-band,.jwt-lw,.jwt-mk,.jwt-now{transition:none !important}
  .jwt-now i{animation:none !important}
}