/* ==========================================================================
   docs.html 그림(Fig. N) 전용 스타일 — 각 그림의 내부 요소와 모션 규칙.
   색은 반드시 토큰에서만 가져온다 (docs/architecture.md §5).
   모션 규칙: docs-kit.js 가 prefers-reduced-motion 이 아닐 때만 .motion-on 을
   붙이고, 화면에 보일 때만 .is-inview, 한 번 본 뒤에는 .is-seen 을 붙인다.
   정지 상태가 곧 완성 상태다 — 애니메이션이 없어도 모든 값은 읽힌다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   페이지 핵심 · 그림 요약 · 용어 풀이
   (market.css 의 .market-key 와 같은 모양으로 맞춘다)
   -------------------------------------------------------------------------- */

.docs-key {
  margin: 8px 0;
  padding: 8px 0;
  border-block: 1px solid var(--pagu-line);
  color: var(--pagu-fg);
  font-size: 13px;
  font-weight: 600;
}

/* 그림 제목 바로 아래 한 문장 요약 — 숫자는 그림이 계산한 값과 같다 */
.docs-fig-key {
  margin: 0 0 8px;
  color: var(--pagu-fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

/* 처음 나오는 용어 옆 짧은 풀이 — 약어 자체는 진하게 */
.docs-jargon {
  margin: 4px 0 8px;
  color: var(--pagu-muted);
  font-size: 12px;
  line-height: 1.45;
}

.docs-jargon b {
  color: var(--pagu-fg);
  font-weight: 650;
}

/* SVG 안 글자는 선이 지나가도 읽히게 패널색 헤일로를 먼저 칠한다 */
.fig3-tick,
.fig3-plabel,
.fig5-tick,
.fig5-zl,
.fig5-il,
.fig5-leg,
.fig8-tick,
.fig8-mlab {
  paint-order: stroke;
  stroke: var(--pagu-panel);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Fig. 1 — 가격 단위: 기준 토큰 / 변동 토큰 분수 카드 + 배지 범례
   -------------------------------------------------------------------------- */

.fig1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.fig1-frac {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: 8px 12px;
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-md);
  background: var(--pagu-bg-subtle);
}

.fig1-tag {
  font-size: 12px;
  color: var(--pagu-muted);
  text-align: center;
}

.fig1-val {
  color: var(--pagu-fg);
  font-size: 20px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.fig1-val b {
  font-weight: inherit;
}

.fig1-bar {
  height: 2px;
  margin: 4px 0;
  background: var(--pagu-line-strong);
}

.fig1-bar i {
  display: block;
  height: 100%;
  background: var(--pagu-muted);
  transform-origin: left;
}

.docs-fig.motion-on.is-seen .fig1-bar i {
  animation: fig1draw 600ms var(--pagu-ease) both;
}

@keyframes fig1draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.fig1-eq {
  color: var(--pagu-muted);
  font-size: 20px;
  font-weight: 700;
}

.fig1-outv {
  color: var(--pagu-fg);
  font-size: 20px;
  font-weight: 700;
}

.fig1-outl {
  margin-top: 2px;
  color: var(--pagu-muted);
  font-size: 12px;
}

/* 배지 범례는 components.css의 공통 배지를 그대로 쓴다. */
.fig1-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Fig. 2 — 복리 횟수에 따른 APY (입력 + 횟수 선택 + 막대 비교)
   -------------------------------------------------------------------------- */

.fig2-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-bottom: 12px;
}

.fig2-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--pagu-muted);
  font-size: 12.5px;
  font-weight: 650;
}

.fig2-field input {
  width: 116px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--pagu-line-strong);
  border-radius: var(--pagu-radius-sm);
  background: var(--pagu-panel);
  color: var(--pagu-fg);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.fig2-field input:focus-visible {
  border-color: var(--pagu-focus);
}

.fig2-seg {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-sm);
}

.fig2-seg button {
  min-width: 52px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-left: 1px solid var(--pagu-line);
  background: var(--pagu-panel);
  color: var(--pagu-muted);
  font-size: 13.5px;
  font-weight: 650;
}

.fig2-seg button:first-child {
  border-left: 0;
}

.fig2-seg button:hover {
  background: var(--pagu-bg-subtle);
}

.fig2-seg button[aria-pressed="true"] {
  background: var(--pagu-accent-weak);
  color: var(--pagu-accent);
}

.fig2-out {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
}

.fig2-outl {
  color: var(--pagu-muted);
  font-size: 13px;
  font-weight: 700;
}

.fig2-out strong {
  color: var(--pagu-accent);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.fig2-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fig2-bar {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 30px;
}

.fig2-bar-l {
  color: var(--pagu-muted);
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
}

.fig2-bar-t {
  display: block;
  height: 14px;
  overflow: hidden;
  border-radius: var(--pagu-radius-sm);
  background: var(--pagu-neutral-weak);
}

.fig2-bar-t i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pagu-line-strong);
  transition: width 400ms var(--pagu-ease);
}

.fig2-bar--sel .fig2-bar-t i {
  background: var(--pagu-accent);
}

.fig2-bar-v {
  color: var(--pagu-muted);
  font-family: var(--pagu-font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fig2-bar--sel .fig2-bar-v {
  color: var(--pagu-fg);
  font-weight: 700;
}

.fig2-note {
  margin-top: 8px;
  color: var(--pagu-muted);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Fig. 3 — 가격 구간과 토큰 구성 (가격 축 + 누적 막대 + 슬라이더)
   -------------------------------------------------------------------------- */

.fig3-axis {
  display: block;
  width: 100%;
  height: auto;
}

.fig3-line {
  stroke: var(--pagu-line-strong);
  stroke-width: 1.5;
}

.fig3-band {
  fill: var(--pagu-accent-weak);
}

.fig3-markline {
  stroke: var(--pagu-accent);
  stroke-width: 2;
}

.fig3-dot {
  fill: var(--pagu-accent);
  stroke: var(--pagu-panel);
  stroke-width: 2;
}

.fig3-tick {
  fill: var(--pagu-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.fig3-plabel {
  fill: var(--pagu-accent);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fig3-stack {
  display: flex;
  height: 22px;
  margin: 2px 0 8px;
  overflow: hidden;
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-sm);
}

.fig3-eth {
  display: block;
  background: var(--pagu-accent);
  transition: width 160ms linear;
}

.fig3-usd {
  display: block;
  background: var(--pagu-line-strong);
  transition: width 160ms linear;
}

.fig3-shares {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#fig3-ethv {
  color: var(--pagu-accent);
}

#fig3-usdv {
  color: var(--pagu-fg);
}

.fig3-status {
  margin: 6px 0 2px;
  color: var(--pagu-muted);
  font-size: 13px;
}

.fig3-slider,
.fig8-slider {
  width: 100%;
  min-height: 44px;
  accent-color: var(--pagu-accent);
}

/* 좁은 화면: SVG 안 글자가 실 렌더링 11px 이상이 되게 사용자 단위를 키운다.
   (viewBox 730 → 360px 화면에서 약 0.4배 → 28px 이 약 11.7px) */
@media (max-width: 560px) {
  .fig3-tick {
    font-size: 28px;
    transform: translateY(5px);
  }

  .fig3-plabel {
    font-size: 28px;
    transform: translateY(14px);
  }

  /* 라벨이 커져서 마커 선이 글자를 가로지르지 않게 선 시작을 내린다 */
  .fig3-markline {
    y1: 30px;
  }
}

/* 561–767px 사이: 표시 폭이 viewBox(730)보다 작아 기본 13px 글자가
   렌더링 기준 8–11px로 줄어든다. 같은 대응을 덜 키운 크기로 적용한다 */
@media (min-width: 561px) and (max-width: 767px) {
  .fig3-tick {
    font-size: 17px;
    transform: translateY(4px);
  }

  .fig3-plabel {
    font-size: 17px;
    transform: translateY(7px);
  }

  .fig3-markline {
    y1: 26px;
  }
}

/* --------------------------------------------------------------------------
   Fig. 4 — 구간 폭과 집중도 (로그 눈금 막대 4개, 한 번만 자람)
   -------------------------------------------------------------------------- */

.fig4-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fig4-bars li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.fig4-l {
  color: var(--pagu-muted);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fig4-t {
  display: block;
  height: 16px;
  overflow: hidden;
  border-radius: var(--pagu-radius-sm);
  background: var(--pagu-neutral-weak);
}

.fig4-t i {
  display: block;
  width: calc(var(--w, 1) * 100%);
  min-width: 3px;
  height: 100%;
  border-radius: inherit;
  background: var(--pagu-accent);
  transform-origin: left;
}

.docs-fig.motion-on.is-seen .fig4-t i {
  animation: fig4grow 600ms var(--pagu-ease) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}

@keyframes fig4grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.fig4-v {
  color: var(--pagu-fg);
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fig4-note {
  margin-top: 8px;
  color: var(--pagu-muted);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Fig. 5 — LP 가치 vs 그냥 보유 (로그 x 선 그래프, 한 번만 그림)
   -------------------------------------------------------------------------- */

.fig5-chart {
  display: block;
  width: 100%;
  height: auto;
}

.fig5-grid {
  stroke: var(--pagu-line);
  stroke-width: 1;
}

.fig5-band {
  fill: var(--pagu-accent-weak);
}

.fig5-lp {
  fill: none;
  stroke: var(--pagu-accent);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.fig5-hodl {
  fill: none;
  stroke: var(--pagu-fg);
  stroke-width: 1.8;
  stroke-linejoin: round;
  opacity: 0.75;
}

.fig5-pt {
  fill: var(--pagu-panel);
  stroke: var(--pagu-accent);
  stroke-width: 2;
}

.fig5-tick {
  fill: var(--pagu-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.fig5-zl {
  fill: var(--pagu-accent);
  font-size: 12px;
  font-weight: 650;
}

.fig5-il {
  fill: var(--pagu-fg);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.fig5-leg {
  font-size: 12px;
  font-weight: 700;
}

.fig5-leg--lp {
  fill: var(--pagu-accent);
}

.fig5-leg--hd {
  fill: var(--pagu-fg);
}

.docs-fig.motion-on.is-seen .fig5-lines {
  animation: fig5wipe 1.2s var(--pagu-ease) both;
}

@keyframes fig5wipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* 좁은 화면 전용 범례·포인트 표 (SVG 안 글자 대신 HTML 로).
   레이아웃은 상시 정의하고 표시 여부만 미디어 쿼리가 켠다 */
.fig5-small {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.fig5-smallleg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 700;
}

.fig5-sw {
  width: 14px;
  height: 3px;
  border-radius: 1px;
}

.fig5-sw--lp {
  background: var(--pagu-accent);
}

.fig5-sw--hd {
  background: var(--pagu-fg);
  opacity: 0.75;
}

.fig5-smallpts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--pagu-muted);
}

.fig5-smallpts b {
  color: var(--pagu-fg);
  font-weight: 700;
}

/* 좁은 화면: SVG 안 글자가 실 렌더링 9.5px 이상이 되게 사용자 단위를 키우고,
   점 라벨·범례는 HTML 블록으로 옮긴다 (viewBox 720 → 360px 화면 약 0.4배) */
@media (max-width: 560px) {
  .fig5-il,
  .fig5-leg {
    display: none;
  }

  .fig5-tick {
    font-size: 28px;
  }

  /* y 눈금은 겹치지 않게 하나 건너 하나만 남기고, 남은 큰 수는
     왼쪽 여백에 들어가지 않아 플롯 안쪽으로 돌려 자기 눈금선 아래에 둔다 */
  .fig5-y5,
  .fig5-y15 {
    display: none;
  }

  .fig5-y10,
  .fig5-y20 {
    text-anchor: start;
    transform: translateY(22px);
  }

  .fig5-zl {
    font-size: 28px;
  }

  .fig5-small {
    display: flex;
  }
}

/* 561–767px 사이: 표시 폭이 viewBox(720)보다 작아 기본 12px 글자가
   렌더링 기준 8–11px로 줄어든다. 좁은 화면과 같은 대응을 덜 키워 적용한다 */
@media (min-width: 561px) and (max-width: 767px) {
  .fig5-il,
  .fig5-leg {
    display: none;
  }

  .fig5-tick {
    font-size: 17px;
  }

  .fig5-y5,
  .fig5-y15 {
    display: none;
  }

  .fig5-y10,
  .fig5-y20 {
    text-anchor: start;
    transform: translateY(13px);
  }

  .fig5-zl {
    font-size: 17px;
  }

  .fig5-small {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   Fig. 6 — YT 수익 흐름 (만기까지 이자·보상 방울이 흐르는 타임라인)
   -------------------------------------------------------------------------- */

.fig6-track {
  display: flex;
  /* stretch 가 아니라 center — 양 끝 노드 카드는 자기 높이가 같아 자리가 안 바뀌고,
     가운데 흐름 칸만 내용 높이로 중앙에 선다 (보이는 자리는 stretch 일 때와 같다). */
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.fig6-node {
  flex: none;
  min-width: 118px;
  padding: 10px 12px;
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-md);
  background: var(--pagu-bg-subtle);
}

.fig6-buy {
  border-color: color-mix(in srgb, var(--pagu-accent) 35%, transparent);
  background: var(--pagu-accent-weak);
}

.fig6-nl {
  color: var(--pagu-muted);
  font-size: 12px;
  font-weight: 650;
}

.fig6-buy .fig6-nl {
  color: var(--pagu-accent);
}

.fig6-nv {
  color: var(--pagu-fg);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.fig6-nv b {
  font-weight: inherit;
}

.fig6-mid {
  display: flex;
  flex: 1;
  min-width: 90px;
  flex-direction: column;
  justify-content: center;
}

.fig6-lane {
  position: relative;
  height: 26px;
  border-bottom: 2px solid var(--pagu-line-strong);
}

.fig6-drop {
  position: absolute;
  top: 11px;
  left: calc(var(--d, 0) * 32% + 8%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pagu-accent);
}

.docs-fig.motion-on.is-inview .fig6-drop {
  animation: fig6flow 3s var(--pagu-ease) infinite;
  animation-delay: calc(var(--d, 0) * 1s);
  animation-fill-mode: backwards;
}

@keyframes fig6flow {
  from {
    left: 0;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  to {
    left: calc(100% - 8px);
    opacity: 0;
  }
}

.fig6-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.fig6-axis span {
  color: var(--pagu-muted);
  font-size: 11.5px;
}

.fig6-row {
  margin-top: 6px;
  color: var(--pagu-fg);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.fig6-row b {
  font-weight: 750;
}

@media (max-width: 560px) {
  .fig6-track {
    flex-direction: column;
  }

  .fig6-mid {
    min-height: 64px;
  }
}

/* --------------------------------------------------------------------------
   Fig. 7 — PT 루핑 (마름모 회전 + 바퀴 수 표시)
   -------------------------------------------------------------------------- */

.fig7-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.fig7-loop {
  position: relative;
  flex: none;
  width: 228px;
  height: 228px;
  /* 마름모 꼭짓점 위 노드가 translate(-50%,-50%) 로 박스 밖 절반쯤
     나가므로, 겉에 여백을 둬 옆의 .fig7-rows 를 덮지 않게 한다.
     가로 여백은 가장 넓은 노드("collateral")의 절반보다 크게. */
  margin: 16px 48px;
}

.fig7-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fig7-edges rect {
  fill: none;
  stroke: var(--pagu-line-strong);
  stroke-width: 1.5;
}

.fig7-node {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 7px 12px;
  border: 1px solid var(--pagu-line-strong);
  border-radius: var(--pagu-radius-sm);
  background: var(--pagu-panel);
  color: var(--pagu-fg);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.fig7-n1 {
  left: 50%;
  top: 2.9%;
}

.fig7-n2 {
  left: 97.1%;
  top: 50%;
}

.fig7-n3 {
  left: 50%;
  top: 97.1%;
}

.fig7-n4 {
  left: 2.9%;
  top: 50%;
}

.fig7-dot {
  position: absolute;
  left: calc(50% - 4.5px);
  top: calc(2.9% - 4.5px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pagu-accent);
}

.docs-fig.motion-on.is-inview .fig7-dot {
  animation: fig7lap 4s linear infinite;
}

@keyframes fig7lap {
  0% {
    left: calc(50% - 4.5px);
    top: calc(2.9% - 4.5px);
  }
  25% {
    left: calc(97.1% - 4.5px);
    top: calc(50% - 4.5px);
  }
  50% {
    left: calc(50% - 4.5px);
    top: calc(97.1% - 4.5px);
  }
  75% {
    left: calc(2.9% - 4.5px);
    top: calc(50% - 4.5px);
  }
  100% {
    left: calc(50% - 4.5px);
    top: calc(2.9% - 4.5px);
  }
}

.fig7-lap {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 1.35em;
  overflow: hidden;
  transform: translate(-50%, -50%);
  color: var(--pagu-accent);
  font-size: 12.5px;
  font-weight: 700;
}

.fig7-reel {
  display: flex;
  flex-direction: column;
}

.fig7-reel span {
  height: 1.35em;
  line-height: 1.35em;
  text-align: center;
  white-space: nowrap;
}

.docs-fig.motion-on.is-inview .fig7-reel {
  animation: fig7reel 12s linear infinite;
}

@keyframes fig7reel {
  0%,
  32% {
    transform: translateY(0);
  }
  33%,
  65% {
    transform: translateY(-1.35em);
  }
  66%,
  99% {
    transform: translateY(-2.7em);
  }
  100% {
    transform: translateY(0);
  }
}

.fig7-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fig7-row {
  color: var(--pagu-fg);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.fig7-row b {
  font-weight: 750;
}

/* 좁은 화면: 마름모를 줄여도 노드는 글자 크기 그대로라, 여백도 함께 줄여
   노드가 그림 밖으로 나가지 않게 한다 */
@media (max-width: 420px) {
  .fig7-loop {
    width: 168px;
    height: 168px;
    margin: 14px 40px;
  }
}

/* --------------------------------------------------------------------------
   Fig. 8 — YT 가격 → Implied APY (슬라이더 + 곡선 위 표시)
   -------------------------------------------------------------------------- */

.fig8-out {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.fig8-outl {
  color: var(--pagu-muted);
  font-size: 13px;
  font-weight: 700;
}

.fig8-out strong {
  color: var(--pagu-accent);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.fig8-meta {
  margin: 2px 0 8px;
  color: var(--pagu-muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.fig8-meta b {
  color: var(--pagu-fg);
  font-weight: 700;
}

.fig8-chart {
  display: block;
  width: 100%;
  height: auto;
}

.fig8-grid {
  stroke: var(--pagu-line);
  stroke-width: 1;
}

.fig8-tick {
  fill: var(--pagu-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.fig8-curve {
  fill: none;
  stroke: var(--pagu-accent);
  stroke-width: 2;
  stroke-linejoin: round;
}

.fig8-mline {
  stroke: var(--pagu-line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.fig8-mdot {
  fill: var(--pagu-panel);
  stroke: var(--pagu-muted);
  stroke-width: 1.5;
}

.fig8-mlab {
  fill: var(--pagu-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.fig8-dot {
  fill: var(--pagu-accent);
  stroke: var(--pagu-panel);
  stroke-width: 2;
}

/* 좁은 화면 전용 표시점 표 (SVG 안 글자 대신 HTML 로) */
.fig8-marks {
  display: none;
}

/* 좁은 화면: SVG 안 글자가 실 렌더링 11px 이상이 되게 사용자 단위를 키우고,
   곡선 위 표시점 라벨은 HTML 목록으로 옮긴다 (viewBox 560 → 약 0.52배) */
@media (max-width: 560px) {
  .fig8-tick {
    font-size: 22px;
  }

  .fig8-mlab {
    display: none;
  }

  .fig8-marks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 4px 0 2px;
    padding: 0;
    list-style: none;
    color: var(--pagu-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  .fig8-marks b {
    color: var(--pagu-fg);
    font-weight: 700;
  }
}

/* --------------------------------------------------------------------------
   Fig. 9 — 데이터가 화면에 오기까지 (출처 → 단위 환산 → 화면 + 실패 가지)
   -------------------------------------------------------------------------- */

.fig9-flow {
  display: flex;
  align-items: center;
  gap: 0;
}

.fig9-srcs {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
}

.fig9-node {
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-md);
  background: var(--pagu-panel);
  text-align: center;
}

.fig9-nl {
  color: var(--pagu-fg);
  font-size: 13px;
  font-weight: 700;
}

.fig9-ns {
  margin-top: 1px;
  color: var(--pagu-muted);
  font-size: 11px;
}

.fig9-warn {
  color: var(--pagu-warn);
  font-weight: 700;
}

.fig9-link {
  position: relative;
  flex: 1;
  min-width: 34px;
  height: 2px;
  background: var(--pagu-line-strong);
}

.fig9-pkt {
  position: absolute;
  top: -3px;
  left: calc(var(--d, 0) * 45% + 12%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pagu-accent);
}

.docs-fig.motion-on.is-inview .fig9-pkt {
  animation: fig9pkt 3s linear infinite;
  animation-delay: calc(var(--d, 0) * 1.5s);
  animation-fill-mode: backwards;
}

@keyframes fig9pkt {
  from {
    left: 0;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  to {
    left: calc(100% - 8px);
    opacity: 0;
  }
}

.fig9-mid {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
}

.fig9-conv {
  border-color: color-mix(in srgb, var(--pagu-accent) 35%, transparent);
}

.fig9-screen {
  border-color: color-mix(in srgb, var(--pagu-accent) 35%, transparent);
  background: var(--pagu-accent-weak);
}

.fig9-fail {
  position: relative;
  margin-top: 12px;
  padding: 5px 9px;
  border: 1px dashed var(--pagu-warn);
  border-radius: var(--pagu-radius-sm);
  background: var(--pagu-warn-weak);
  color: var(--pagu-warn);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.fig9-fail i {
  position: absolute;
  left: 50%;
  top: -12px;
  width: 0;
  height: 12px;
  border-left: 1px dashed var(--pagu-warn);
}

@media (max-width: 560px) {
  .fig9-node {
    padding: 8px 9px;
  }

  .fig9-nl {
    font-size: 11.5px;
  }

  .fig9-link {
    min-width: 20px;
  }

  .fig9-fail {
    /* 그림 안 글자 하한 11px (공통 그림 규격) */
    font-size: 11px;
    white-space: normal;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Fig. 10 — 하지 않는 것 (지우개 줄 + 데이터 흐름)
   -------------------------------------------------------------------------- */

.fig10-off {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.fig10-off li {
  padding: 9px 14px;
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-sm);
  background: var(--pagu-bg-subtle);
}

.fig10-off li span {
  position: relative;
  color: var(--pagu-muted);
  font-size: 13.5px;
  font-weight: 650;
}

.fig10-off li span::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--pagu-down);
  transform-origin: left;
}

.docs-fig.motion-on.is-seen .fig10-off li span::after {
  animation: fig10strike 400ms var(--pagu-ease) both;
  animation-delay: calc(var(--i, 0) * 140ms);
}

@keyframes fig10strike {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.fig10-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.fig10-step {
  padding: 8px 12px;
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-sm);
  background: var(--pagu-panel);
  color: var(--pagu-fg);
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

.fig10-arrow {
  color: var(--pagu-muted);
}

.fig10-sub {
  margin-top: 1px;
  color: var(--pagu-muted);
  font-size: 11px;
  font-weight: 500;
}

.fig10-line {
  margin-top: 14px;
  color: var(--pagu-muted);
  font-size: 13px;
}

/* 2026-10-30 — reading-page application of the shared compact system. */
.docs-shell .page-title { margin-bottom: 12px; }
.docs-shell .docs-index { gap: 0; border: 1px solid var(--pagu-line); border-radius: 3px; margin-bottom: 12px; }
.docs-shell .docs-index-card { border: 0; border-radius: 0; align-items: baseline; }
.docs-shell .docs-index-card:not(:nth-child(3n + 1)) { border-left: 1px solid var(--pagu-line); }
.docs-shell .docs-index-card:nth-child(n + 4) { border-top: 1px solid var(--pagu-line); }
.docs-shell .docs-index-num { font-size: 12px; }
.docs-shell .docs-index-icon { align-self: center; }
.docs-shell .docs-article > .docs-section:first-child { border-top: 0; padding-top: 8px; }
.docs-shell .docs-fig { padding: 10px 12px; }
.docs-shell .docs-stat-v { font-size: 20px; }
.docs-shell .docs-table { line-height: 19px; }
.docs-shell .docs-table :is(th, td) { padding: 7px 10px; }
.docs-shell .docs-table-wrap { max-width: 100%; overflow-y: hidden; }
.docs-shell .docs-formula { overflow-y: hidden; }
.docs-shell :is(.fig2-field, .fig2-bar-l, .fig4-l, .fig6-axis span, .fig7-lap, .fig8-meta, .fig9-ns, .fig9-fail, .fig10-sub) { font-size: 12px; }
.docs-shell :is(.fig2-seg button, .fig6-row, .fig7-row, .fig10-off li span) { font-size: 13px; }
.docs-shell :is(.fig2-out, .fig8-out) { justify-content: space-between; gap: 8px; }
.docs-shell :is(.fig2-out strong, .fig8-out strong) { color: var(--pagu-fg); font-size: 22px; font-weight: 700; text-align: right; }
.docs-shell :is(.fig2-bar-v, .fig4-v) { text-align: right; }
.docs-shell :is(.fig2-bar, .fig4-bars li) { gap: 8px; }
.docs-shell :is(.fig2-bars, .fig4-bars) { gap: 4px; }
.docs-shell .fig2-bar { min-height: 28px; }
.docs-shell :is(.fig2-bar--sel .fig2-bar-t i, .fig4-t i, .fig6-drop, .fig7-dot, .fig9-pkt) { background: var(--pagu-muted); }
.docs-shell .fig2-seg button[aria-pressed="true"] { background: var(--pagu-bg-subtle); color: var(--pagu-fg); }
.docs-shell .fig6-track { gap: 12px; margin-bottom: 8px; }
.docs-shell .fig6-node { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.docs-shell .fig6-buy { border-color: var(--pagu-line); background: var(--pagu-bg-subtle); }
.docs-shell .fig6-buy .fig6-nl { color: var(--pagu-muted); }
.docs-shell .fig6-nv { font-size: 20px; font-weight: 700; text-align: right; }
.docs-shell .fig7-wrap { gap: 16px; }
.docs-shell .fig7-loop { width: 192px; height: 192px; margin: 16px 48px; }
.docs-shell .fig7-node { padding: 8px 12px; font-size: 12px; }
.docs-shell .fig7-lap { color: var(--pagu-fg); }
.docs-shell .fig7-rows { gap: 4px; }
.docs-shell :is(.fig9-conv, .fig9-screen) { border-color: var(--pagu-line); background: var(--pagu-bg-subtle); }
.docs-shell .fig9-node { padding: 8px 12px; }
.docs-shell .fig9-fail { margin-top: 12px; padding: 4px 8px; background: var(--pagu-bg-subtle); }
.docs-shell .fig10-off { margin-bottom: 12px; }
.docs-shell .fig10-off li { padding: 8px 12px; }
.docs-shell .fig10-off li span::after { background: var(--pagu-muted); }
.docs-shell .fig10-line { margin-top: 12px; }
/* A single series needs no accent; LP vs HODL retains its two-series key. */
.docs-shell .fig8-curve { stroke: var(--pagu-fg); }
.docs-shell .fig8-dot { fill: var(--pagu-fg); }
@media (min-width: 1024px) {
  .docs-shell .docs-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-block: 6px; }
  .docs-shell .docs-stat-l { order: -1; margin: 0; text-align: left; }
  .docs-shell .docs-stat-v { margin: 0; white-space: nowrap; }
}
@media (min-width: 1280px) {
  .docs-shell .docs-toc { padding-top: 0; }
  .docs-shell .docs-toc-link { align-items: flex-start; }
}
@media (min-width: 768px) and (pointer: fine) {
  .docs-shell :is(.fig2-field input, .fig2-seg button) { min-height: 32px; padding-block: 4px; font-size: 13px; }
  .docs-shell :is(.fig3-slider, .fig8-slider) { min-height: 32px; }
}
@media (max-width: 767px) {
  .docs-shell #uniswap-v3 > .docs-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(min-content, 1fr); }
  .docs-shell #uniswap-v3 > .docs-stats .docs-stat { display: flex; flex-direction: column; }
  .docs-shell #uniswap-v3 > .docs-stats .docs-stat-v b { white-space: nowrap; }
  .docs-shell #uniswap-v3 > .docs-stats .docs-stat-u { display: block; }
  .docs-shell #uniswap-v3 > .docs-stats .docs-stat-l { margin-top: auto; padding-top: 4px; }
}
@media (max-width: 600px) {
  .docs-shell .docs-index-card:not(:nth-child(3n + 1)) { border-left: 0; }
  .docs-shell .docs-index-card:nth-child(even) { border-left: 1px solid var(--pagu-line); }
  .docs-shell .docs-index-card:nth-child(n + 3) { border-top: 1px solid var(--pagu-line); }
}
@media (max-width: 560px) {
  .docs-shell .fig9-flow { flex-wrap: wrap; gap: 8px; }
  .docs-shell .fig9-srcs { width: 100%; flex-direction: row; gap: 0; }
  .docs-shell .fig9-srcs .fig9-node { flex: 1; }
  .docs-shell .fig9-srcs .fig9-node + .fig9-node { border-left: 0; }
  .docs-shell .fig9-srcs + .fig9-link { flex: 0 0 20px; }
  .docs-shell .fig9-nl { font-size: 12px; }
}
@media (max-width: 420px) {
  .docs-shell .fig7-loop { width: 168px; height: 168px; margin: 16px 40px; }
}