/* 글 속 그림 (assets/figures.js). 코드 블록과 같은 창 모양, 블로그의 종이색·명조·세이지 초록을 그대로 쓴다 */
.prose th, .prose td { word-break: keep-all; }
.fig-figure { margin: 32px 0; }
.fig-figure figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.6; word-break: keep-all; }

.fig { container-type: inline-size; position: relative; color: var(--ink); font: 13px/1.45 var(--sans); overflow-wrap: normal; word-break: keep-all; }
.fig:not([data-ready]) { min-height: 240px; }
.fig *, .fig *::before, .fig *::after { box-sizing: border-box; }
.fig p, .fig ol, .fig li, .fig b, .fig em, .fig h4 { margin: 0; padding: 0; }
.fig-win { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fffefb; box-shadow: 0 5px 20px rgba(70, 80, 60, .1); }
.fig-bar { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #f6f5ee; }
.fig-bar i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.fig-bar i:nth-child(1) { background: #e8a19a; }
.fig-bar i:nth-child(2) { background: #ecc880; }
.fig-bar i:nth-child(3) { background: #a0c79b; }
.fig .fig-title { min-width: 0; margin-left: 8px; overflow: hidden; color: var(--ink); font: 600 12.5px/1 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.fig .fig-clock { min-width: 5ch; margin-left: auto; color: var(--muted); font: 11px/1 var(--mono); font-style: normal; font-variant-numeric: tabular-nums; text-align: right; }
.fig-bar::after { content: ""; position: absolute; left: 0; bottom: -1px; width: calc(var(--p, 0) * 100%); height: 2px; background: var(--green); opacity: .5; }
.fig.is-still .fig-bar::after { display: none; }
.fig .fig-note { padding: 12px 20px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.fig-body { padding: 10px 14px 6px; }
.fig-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig-svg text { font-family: var(--sans); white-space: pre; }
.fig-svg text.mono { font-family: var(--mono); }
.fig-foot { padding: 14px 20px 16px; border-top: 1px solid var(--line); background: #f9f8f2; }

.fig .fig-steps { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.fig .fig-steps li { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 4px; border-radius: 99px; color: var(--muted); font-size: 12.5px; white-space: nowrap; transition: background .3s, color .3s; }
.fig .fig-steps i { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #d3d6ca; border-radius: 50%; font: 600 11px/1 var(--mono); font-style: normal; transition: background .3s, color .3s, border-color .3s; }
.fig .fig-steps li.done i { background: #d3d6ca; border-color: transparent; color: var(--ink); }
.fig .fig-steps li.on { background: #eef1e5; color: var(--ink); font-weight: 600; }
.fig .fig-steps li.on i { background: var(--green); border-color: transparent; color: #fff; }
.fig .fig-say { min-height: 22px; font-size: 14.5px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; animation: fig-say .45s ease both; }
.fig .fig-steps + .fig-say { margin-top: 12px; }
.fig .fig-say[data-tone="info"] { color: var(--ink); }
.fig .fig-say[data-tone="ok"] { color: #4f6b38; }
.fig .fig-say[data-tone="bad"] { color: #b25a43; }
.fig .fig-say[data-tone="warn"] { color: #9a6a2e; }
.fig .fig-say[data-tone="muted"] { color: var(--muted); }
@keyframes fig-say { from { opacity: 0; transform: translateY(4px); } }
@container (max-width: 520px) {
  .fig .fig-steps li:not(.on) span { display: none; }
  .fig .fig-steps li:not(.on) { padding-right: 4px; }
  .fig .fig-steps + .fig-say { min-height: 44px; }
  .fig-body { padding-inline: 8px; }
  .fig .fig-note, .fig-foot { padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) { .fig .fig-say { animation: none; } }

/* ---------- 같은 평균, 다른 요청 (perf.js의 same-mean): 폭에 맞춰 다시 그리는 산점도 ---------- */
.sm { --c-a: #3f6f82; --c-b: #6e5a8c; --c-slow: #be5a43; --c-slow-bg: #f8e8e2; --c-mean: #5f7a45; --c-mean-t: #4f6b38; --c-thr: #b98336; --c-ok: #4f6b38; --c-ok-bg: #e8f0df; --grid: #eeefe6; --grid-base: #d6d9cd; --halo: #fffefb; padding: 6px 6px 0; }
.sm svg { display: block; overflow: visible; }
.sm-pn { min-width: 0; }
.sm-pn-a { --dot: var(--c-a); }
.sm-pn-b { --dot: var(--c-b); }
.sm-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.sm-name { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.sm-name i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.sm-chip { padding: 2px 10px; border-radius: 99px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.sm-chip b { font-weight: 700; }
.sm-chip.ok { color: var(--c-ok); background: var(--c-ok-bg); }
.sm-chip.bad { color: var(--c-slow); background: var(--c-slow-bg); }
.sm-gap { display: flex; align-items: center; justify-content: flex-end; height: 24px; }
.sm-eq { display: grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 12px/1 var(--mono); opacity: 0; }
.sm .tick { fill: var(--muted); font: 500 11px var(--mono); }
.sm .gl { stroke: var(--grid); stroke-width: 1; }
.sm .gl.base { stroke: var(--grid-base); }
.sm .dot { fill: var(--dot); transition: fill .35s; }
.sm .dot.slow { fill: var(--c-slow); }
.sm .halo, .sm .rip { fill: none; stroke: var(--c-slow); }
.sm .halo { stroke-width: 1.2; }
.sm .rip { stroke-width: 1.6; }
.sm .mean { fill: none; stroke: var(--c-mean); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke-width .3s; }
.sm[data-step="2"] .mean { stroke-width: 3; }
.sm .mean-t { fill: var(--c-mean-t); font: 600 12px var(--mono); text-anchor: end; paint-order: stroke; stroke: var(--halo); stroke-width: 5px; stroke-linejoin: round; }
.sm .mean-t.on { font-weight: 700; }
.sm .thr { stroke: var(--c-thr); stroke-width: 1.3; stroke-dasharray: 5 4; }
.sm .thr-t { fill: var(--c-thr); font: 600 11px var(--mono); transition: opacity .3s; paint-order: stroke; stroke: var(--halo); stroke-width: 4px; }
.sm .cur { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }

/* ---------- 요청이 지나가는 길 (loadgen-common.js의 path): HTML로 짠 구성도 ---------- */
.pt { --gap: 20px; --arrow: #8f9588; --k6: #3f6f82; --apm: #5f7a45; --inner: #b98336; --inner-bg: #f9f3e4; --node-bg: #f9f8f2; --node-line: #d6d9cd; --r: 6px; padding: 22px 20px 20px; }
.pt-map { position: relative; display: grid; }
.pt .n { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 52px; padding: 8px; background: var(--node-bg); border: 1px solid var(--node-line); border-radius: var(--r); text-align: center; }
.pt .n b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.pt .n small { color: var(--muted); font: 11.5px var(--mono); }
.pt .n1 { --node-line: var(--k6); }
.pt .n4, .pt .n5 { --node-line: var(--apm); }
.pt .inner { --node-line: var(--inner); --node-bg: var(--inner-bg); }
.pt .s { min-width: 0; text-align: center; }
.pt .s b { display: block; color: var(--sc); font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.pt .s small { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; }
.pt .s1 { --sc: var(--k6); }
.pt .s2 { --sc: var(--apm); }
.pt:not(.col) .pt-map { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap);
  grid-template-areas: ". . . in ." "n1 n2 n3 n4 n5" "s1 s1 s1 s1 ." ". . . s2 s2"; }
.pt:not(.col) .n1 { grid-area: n1; } .pt:not(.col) .n2 { grid-area: n2; } .pt:not(.col) .n3 { grid-area: n3; }
.pt:not(.col) .n4 { grid-area: n4; } .pt:not(.col) .n5 { grid-area: n5; } .pt:not(.col) .inner { grid-area: in; margin-bottom: 30px; }
.pt:not(.col) .s1 { grid-area: s1; } .pt:not(.col) .s2 { grid-area: s2; }
.pt:not(.col) .s { position: relative; padding-top: 18px; margin-top: 14px; }
.pt:not(.col) .s::before { content: ""; position: absolute; inset: 0 0 auto; height: 9px; border: 1.5px solid var(--sc); border-top: 0; border-radius: 0 0 5px 5px; }
.pt:not(.col) .s2 { margin-top: 10px; }
.pt:not(.col) .n1::after, .pt:not(.col) .n2::after, .pt:not(.col) .n3::after, .pt:not(.col) .n4::after { content: ""; position: absolute; top: 50%; left: 100%; width: var(--gap); height: 1.5px; margin-top: -.75px; background: var(--arrow); }
.pt:not(.col) .n1::before, .pt:not(.col) .n2::before, .pt:not(.col) .n3::before, .pt:not(.col) .n4::before { content: ""; position: absolute; top: 50%; left: calc(100% + var(--gap) - 6px); margin-top: -4px; border: 4px solid transparent; border-left: 7px solid var(--arrow); border-right: 0; }
.pt:not(.col) .inner::after { content: ""; position: absolute; top: 100%; left: 50%; width: 0; height: 30px; border-left: 1.5px dashed var(--inner); }
.pt:not(.col) .inner::before { content: ""; position: absolute; top: calc(100% + 24px); left: 50%; margin-left: -4px; border: 4px solid transparent; border-top: 7px solid var(--inner); border-bottom: 0; }
.pt.col .pt-map { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; row-gap: 22px;
  grid-template-areas: "n1 s1 ." "n2 s1 ." "n3 s1 ." "n4 s1 s2" "n5 . s2" "in in in"; }
.pt.col .n1 { grid-area: n1; } .pt.col .n2 { grid-area: n2; } .pt.col .n3 { grid-area: n3; }
.pt.col .n4 { grid-area: n4; } .pt.col .n5 { grid-area: n5; } .pt.col .inner { grid-area: in; margin-top: 4px; }
.pt.col .s1 { grid-area: s1; } .pt.col .s2 { grid-area: s2; }
.pt.col .s { display: flex; flex-direction: column; justify-content: center; padding: 10px 9px; border-left: 3px solid var(--sc); border-radius: 4px 8px 8px 4px; background: color-mix(in srgb, var(--sc) 10%, transparent); text-align: left; }
.pt.col .s small { font-size: 11.5px; line-height: 1.5; }
.pt.col .n1::after, .pt.col .n2::after, .pt.col .n3::after, .pt.col .n4::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1.5px; height: 22px; margin-left: -.75px; background: var(--arrow); }
.pt.col .n1::before, .pt.col .n2::before, .pt.col .n3::before, .pt.col .n4::before { content: ""; position: absolute; top: calc(100% + 16px); left: 50%; margin-left: -4px; border: 4px solid transparent; border-top: 7px solid var(--arrow); border-bottom: 0; }
.pt.col .inner { flex-direction: row; justify-content: center; align-items: baseline; gap: 10px; flex-wrap: wrap; border-style: dashed; }