.stable-toolbar,.stable-filters{display:flex;align-items:end;justify-content:space-between;gap:var(--pagu-space-3);flex-wrap:wrap;margin:var(--pagu-space-4) 0}
.stable-filters label,.inline-control{display:grid;gap:var(--pagu-space-2);color:var(--pagu-muted)}
.stable-filters select,.inline-control input{min-height:44px;padding:var(--pagu-space-2) var(--pagu-space-3);color:var(--pagu-fg);background:var(--pagu-panel);border:1px solid var(--pagu-line-strong);border-radius:var(--pagu-radius-sm)}
.stable-table-wrap{max-width:100%;overflow-x:auto;margin-top:var(--pagu-space-3)}
/* 최소 폭(760px)을 뺐다 — 좁은 화면은 아래 미디어쿼리에서 카드로 바꾼다 (2026-10-18). */
.stable-table{width:100%;border-collapse:collapse;color:var(--pagu-fg)}
.stable-table th,.stable-table td{padding:var(--pagu-space-3) var(--pagu-space-2);border-bottom:1px solid var(--pagu-line);text-align:left;vertical-align:top}
.stable-table th{color:var(--pagu-muted);font-size:var(--pagu-text-xs);font-weight:600;background:var(--pagu-bg-subtle)}
.stable-table td.num,.stable-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.stable-table small.stable-subtext,.stable-table .stable-reason{display:block}
/* styles-v2.css 의 td:first-child{font-weight:700} 이 작은 설명 글자까지 굵게 만든다 */
.stable-table small.stable-subtext{font-weight:500}
/* 링크 글자는 옆 칸 글자와 같은 높이에서 시작한다. 44px 상자 가운데에 글자를 두면 그 칸만 11px 아래로 처지고
   안내문은 줄 사이가 벌어졌다 (2026-10-14 사용자 지적). 누르는 범위 44px 는 위아래 padding 으로 지키고,
   같은 크기의 음수 margin 으로 되돌려 줄 높이는 차지하지 않게 한다. */
.stable-table a,#keyRequired a,#kimchiFx a{display:inline-block;padding-block:11px;margin-block:-11px;color:var(--pagu-accent)}
#keyRequired p{margin:var(--pagu-space-1) 0;line-height:1.6}
/* 프로젝트 칸의 "가입 제한" 표시는 언제나 이름 아래 줄에 둔다 — 자리가 남으면 옆에, 모자라면 아래에 붙어 줄마다 달랐다 */
.stable-table .c-head .stable-state{display:block;width:fit-content;margin-top:var(--pagu-space-1)}
details.section-block>summary,.stable-more>summary{display:flex;align-items:center;min-height:44px}
.stable-more{margin-top:var(--pagu-space-2)}
.stable-more>summary{color:var(--pagu-accent);font-weight:600;cursor:pointer}
.stable-state{display:inline-block;padding:4px 8px;border-radius:var(--pagu-radius-sm);font-size:var(--pagu-text-xs);color:var(--pagu-muted);background:var(--pagu-bg-subtle);white-space:nowrap}
.stable-state--bad{color:var(--pagu-down);background:var(--pagu-down-weak)}
.stable-state--warn{color:var(--pagu-warn);background:var(--pagu-warn-weak)}
/* 페그 상태 배지: 정상 = 파랑, 주의 = 옅은 빨강, 이탈 = 진한 빨강.
   이탈 배지의 글자는 --pagu-panel 을 쓴다 — 라이트 흰 글자/#c92a3a 5.42:1, 다크 #191d24/#ff7a86 6.6:1. */
.stable-state--ok{color:var(--pagu-accent-strong);background:var(--pagu-accent-weak)}
.stable-state--caution{color:var(--pagu-down);background:var(--pagu-down-weak)}
.stable-state--breach{color:var(--pagu-panel);background:var(--pagu-down);font-weight:700}
.stable-reason{margin-top:var(--pagu-space-1);color:var(--pagu-down);font-size:var(--pagu-text-xs);font-weight:600;white-space:normal}
.stable-notice{color:var(--pagu-warn)}
.stable-meta,.stable-subtext,.stable-empty{color:var(--pagu-muted);font-size:var(--pagu-text-sm)}
.stable-expanded td{padding:var(--pagu-space-4);background:var(--pagu-bg-subtle)}
.stable-section-risk{color:var(--pagu-muted)}
.stable-filters button,.stable-toolbar button{min-height:44px}

/* --- 오르내림 색: 숫자 앞 ▲▼ 와 같이 쓴다 (색만으로 뜻을 전하지 않는다) --- */
.tone-up{color:var(--pagu-up)}
.tone-down{color:var(--pagu-down)}
.tone-flat{color:var(--pagu-muted)}
.chg{font-variant-numeric:tabular-nums;white-space:nowrap}
.chg--flag{font-weight:800}

/* --- 요약 칸 3개: 큰 숫자 + 두 낱말 이름 --------------------------------- */
.stable-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pagu-space-2);flex:1 1 320px;max-width:560px}
.stable-stat{display:grid;gap:2px;padding:var(--pagu-space-3);border:1px solid var(--pagu-line);border-radius:var(--pagu-radius-md);background:var(--pagu-panel)}
.stable-stat strong{color:var(--pagu-fg);font-size:var(--pagu-text-xl);font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.stable-stat span{color:var(--pagu-muted);font-size:var(--pagu-text-xs)}
.stable-stat--breach strong{color:var(--pagu-down)}

/* --- 페그 막대사탕 그림 (2026-10-20): 코인마다 한 줄, $1.00 에서 점까지 막대 ------------- */
.peg-strip{width:100%;margin-top:var(--pagu-space-4)}
.pegc{--pegc-sym:56px;--pegc-val:76px;--pegc-gap:var(--pagu-space-3);--pegc-row:30px;--pegc-axis:24px}
.pegc__legend{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:0 0 var(--pagu-space-1);color:var(--pagu-muted);font-size:var(--pagu-text-xs)}
.pegc__legend i{display:inline-block;width:14px;height:10px;border-radius:2px;background:color-mix(in srgb,var(--pagu-accent) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pagu-accent) 45%,transparent)}
.pegc__body{position:relative}
.pegc__grid{position:absolute;top:0;bottom:var(--pegc-axis);left:calc(var(--pegc-sym) + var(--pegc-gap));right:calc(var(--pegc-val) + var(--pegc-gap));z-index:1;pointer-events:none}
.pegc__band{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--pagu-accent) 9%,transparent);border-inline:1px dashed color-mix(in srgb,var(--pagu-accent) 45%,transparent)}
.pegc__gridline{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--pagu-line)}
.pegc__zero{position:absolute;top:-4px;bottom:0;left:50%;width:0;border-left:2px solid var(--pagu-line-strong);margin-left:-1px}
.pegc__rows{list-style:none;margin:0;padding:0}
.pegc__row,.pegc__axis{display:grid;grid-template-columns:var(--pegc-sym) minmax(0,1fr) var(--pegc-val);column-gap:var(--pegc-gap);align-items:center}
.pegc__row{position:relative;min-height:var(--pegc-row);border-radius:var(--pagu-radius-sm);outline:none;cursor:default}
.pegc__row:hover,.pegc__row.is-active{background:var(--pagu-bg-subtle)}
.pegc__row:focus-visible{box-shadow:inset 0 0 0 2px var(--pagu-focus)}
.pegc__sym{padding-left:var(--pagu-space-2);font-size:var(--pagu-text-sm);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pegc__val{padding-right:var(--pagu-space-2);color:var(--pagu-fg);font-size:var(--pagu-text-sm);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pegc__plot{position:relative;height:var(--pegc-row)}
.pegc__stem{position:absolute;top:50%;z-index:2;height:2px;margin-top:-1px;border-radius:1px;background:color-mix(in srgb,var(--pagu-accent) 55%,transparent)}
.pegc__dot{position:absolute;top:50%;z-index:3;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--pagu-accent);box-shadow:0 0 0 2px var(--pagu-panel);transition:transform var(--pagu-duration) var(--pagu-ease)}
.pegc__row:hover .pegc__dot,.pegc__row.is-active .pegc__dot{transform:scale(1.35)}
.pegc__row--warn .pegc__stem{background:color-mix(in srgb,var(--pagu-down) 45%,transparent)}
.pegc__row--warn .pegc__dot{background:var(--pagu-panel);box-shadow:inset 0 0 0 2px var(--pagu-down),0 0 0 2px var(--pagu-panel)}
.pegc__row--bad .pegc__stem{height:3px;margin-top:-1.5px;background:var(--pagu-down)}
.pegc__row--bad .pegc__dot{background:var(--pagu-down)}
.pegc__row--warn :is(.pegc__sym,.pegc__val){color:var(--pagu-down)}
.pegc__row--bad :is(.pegc__sym,.pegc__val){color:var(--pagu-down);font-weight:800}
/* 눈금 밖(±100bp 넘음)은 끝에 바깥을 가리키는 삼각형 */
.pegc__dot--edge-left,.pegc__dot--edge-right{border-radius:0;box-shadow:none}
.pegc__dot--edge-left{margin-left:0;clip-path:polygon(0 50%,100% 0,100% 100%)}
.pegc__dot--edge-right{margin-left:-10px;clip-path:polygon(100% 50%,0 0,0 100%)}
.pegc__axis{height:var(--pegc-axis);margin-top:2px}
.pegc__ticks{position:relative;height:100%}
.pegc__tick{position:absolute;top:4px;transform:translateX(-50%);color:var(--pagu-muted);font-size:var(--pagu-text-xs);font-variant-numeric:tabular-nums;white-space:nowrap}
.pegc__tick--start{transform:none}
.pegc__tick--end{transform:translateX(-100%)}
.pegc__tick--mid{color:var(--pagu-fg);font-weight:700}
/* 마우스를 올리면(휴대폰은 누르면) 뜨는 풍선 — 값은 줄 오른쪽에도 글자로 늘 보인다 */
.pegc__tip{position:absolute;z-index:5;min-width:184px;max-width:248px;padding:var(--pagu-space-2) var(--pagu-space-3);border:1px solid var(--pagu-line-strong);border-radius:var(--pagu-radius-md);background:var(--pagu-panel);box-shadow:var(--pagu-shadow-lg);font-size:var(--pagu-text-xs);pointer-events:none}
.pegc__tip[hidden]{display:none}
.pegc__tip-head{display:flex;align-items:baseline;gap:6px;margin-bottom:4px;min-width:0}
.pegc__tip-head strong{font-size:var(--pagu-text-sm)}
.pegc__tip-head span{overflow:hidden;color:var(--pagu-muted);text-overflow:ellipsis;white-space:nowrap}
.pegc__tip dl{display:grid;gap:2px;margin:0}
.pegc__tip dl div{display:flex;justify-content:space-between;gap:var(--pagu-space-3)}
.pegc__tip dt{color:var(--pagu-muted)}
.pegc__tip dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums;text-align:right}
.pegc__tip-state--warn,.pegc__tip-state--bad{color:var(--pagu-down)}
@media (pointer:coarse){.pegc{--pegc-row:36px}}
@media (max-width:480px){.pegc{--pegc-sym:48px;--pegc-val:66px;--pegc-gap:var(--pagu-space-2)}.pegc__tick--minor{display:none}}

/* --- 이탈 칸: 숫자 옆에 가운데서 좌우로 자라는 막대 --------------------- */
.dev{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--pagu-space-2)}
.dev__bar{position:relative;display:inline-block;width:56px;height:8px;border-radius:var(--pagu-radius-full);background:var(--pagu-bg-subtle);box-shadow:inset 0 0 0 1px var(--pagu-line)}
.dev__bar::after,.kimchi-bar__track::after{content:"";position:absolute;top:-3px;bottom:-3px;left:50%;width:1px;background:var(--pagu-muted)}
.dev__bar i,.kimchi-bar__track i{position:absolute;top:0;bottom:0;border-radius:var(--pagu-radius-full);background:var(--pagu-accent)}
.dev--caution .dev__num{color:var(--pagu-down)}
.dev--caution .dev__bar i{background:var(--pagu-down-weak);box-shadow:inset 0 0 0 1px var(--pagu-down)}
.dev--breach .dev__num{color:var(--pagu-down);font-weight:800}
.dev--breach .dev__bar i{background:var(--pagu-down)}

/* --- 30일 작은 그래프 (72×20) -------------------------------------------- */
.spark{display:inline-block;vertical-align:middle;overflow:visible}
.spark__ref{stroke:var(--pagu-line-strong);stroke-dasharray:2 2}
.spark__line{fill:none;stroke:var(--pagu-accent);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.spark__end{fill:var(--pagu-accent)}
.supply-line{display:block;white-space:nowrap}
.supply-line small{color:var(--pagu-muted);font-size:var(--pagu-text-xs)}
.c-price.is-delayed{color:var(--pagu-muted)}

/* --- 김치 프리미엄: 큰 숫자 + 0 을 가운데 둔 막대 4줄 ------------------- */
.kimchi-headline{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--pagu-space-2);margin-top:var(--pagu-space-3)}
.kimchi-headline__value{font-size:var(--pagu-text-2xl);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.kimchi-headline__label{color:var(--pagu-muted);font-size:var(--pagu-text-sm)}
.kimchi-bars{display:grid;gap:var(--pagu-space-2);margin:var(--pagu-space-3) 0 0;padding:0;list-style:none}
.kimchi-bar{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) 72px;align-items:center;gap:var(--pagu-space-3);min-height:28px}
.kimchi-bar__name{color:var(--pagu-fg);font-size:var(--pagu-text-sm)}
.kimchi-bar__note{grid-column:1/-1;margin-top:-2px}
.kimchi-bar__track{position:relative;display:block;height:10px;border-radius:var(--pagu-radius-full);background:var(--pagu-bg-subtle);box-shadow:inset 0 0 0 1px var(--pagu-line)}
.kimchi-bar__track i.tone-up{background:var(--pagu-up)}
.kimchi-bar__track i.tone-down{background:var(--pagu-down)}
.kimchi-bar__value{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.kimchi-bar--thin .kimchi-bar__name,.kimchi-bar--thin .kimchi-bar__value{color:var(--pagu-muted)}
.kimchi-bar--thin .kimchi-bar__track i{background:var(--pagu-line-strong)}
/* 30초 라이브 확인 표시 (live-poll.js statusLabel) — 환율 줄 아래 작은 회색 글자 */
#kimchiStatus{margin:var(--pagu-space-1) 0 0}

/* --- 금리 막대: 기본(진한 파랑) + 보상(옅은 파랑·테두리), 30일 평균은 가는 눈금 --- */
.rate-bar{position:relative;display:block;width:100%;min-width:96px;height:10px;border-radius:var(--pagu-radius-full);background:var(--pagu-bg-subtle);box-shadow:inset 0 0 0 1px var(--pagu-line)}
.rate-bar__base,.rate-bar__reward{position:absolute;top:0;bottom:0;left:0}
.rate-bar__base{border-radius:var(--pagu-radius-full) 0 0 var(--pagu-radius-full);background:var(--pagu-accent)}
.rate-bar__reward{background:var(--pagu-accent-weak);box-shadow:inset 0 0 0 1px var(--pagu-accent)}
.rate-bar__mean{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--pagu-muted)}
.rate-bar--heavy{outline:2px solid var(--pagu-down);outline-offset:2px}
.stable-table .c-bar{min-width:120px;vertical-align:middle}
.stable-table .c-bar .stable-reason{margin-top:var(--pagu-space-2)}
.rate-legend{display:flex;flex-wrap:wrap;gap:var(--pagu-space-2) var(--pagu-space-4);margin:var(--pagu-space-2) 0;color:var(--pagu-muted);font-size:var(--pagu-text-sm)}
.rate-key{display:inline-flex;align-items:center;gap:6px}
.rate-key::before{content:"";display:inline-block;width:14px;height:10px;border-radius:3px}
.rate-key--base::before{background:var(--pagu-accent)}
.rate-key--reward::before{background:var(--pagu-accent-weak);box-shadow:inset 0 0 0 1px var(--pagu-accent)}
.rate-key--mean::before{width:2px;height:14px;border-radius:0;background:var(--pagu-muted)}

/* --- 좁은 화면: 표를 카드로 (360px 에서 가로 스크롤 없음) ---------------- */
@media(max-width:600px){.stable-toolbar{align-items:stretch}.stable-toolbar button{width:100%}.stable-stats{max-width:none}.stable-filters>*{flex:1 1 140px}}
@media(max-width:760px){
  .stable-table-wrap{overflow-x:visible}
  .stable-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .stable-table,.stable-table tbody{display:block;width:100%}
  .stable-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pagu-space-2) var(--pagu-space-3);margin-bottom:var(--pagu-space-2);padding:var(--pagu-space-3);border:1px solid var(--pagu-line);border-radius:var(--pagu-radius-md);background:var(--pagu-panel)}
  .stable-table td{display:block;min-width:0;padding:0;border:0;overflow-wrap:anywhere}
  .stable-table td.num{white-space:normal}
  .stable-table td::before{content:attr(data-label);display:block;color:var(--pagu-muted);font-size:var(--pagu-text-xs);font-weight:600}
  .stable-table td[data-label=""]::before{content:none}
  .stable-table .c-wide{grid-column:1/-1}
  .stable-expanded td{padding:0;background:none}
  .stable-table--peg .c-state{grid-column:2;grid-row:1;text-align:right}
  .stable-table--nav tr{grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr))}
  .stable-table--kimchi tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stable-table--kimchi .c-head,.stable-table--kimchi .c-note{grid-column:1/-1}
  .stable-table--defi tr{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stable-table--defi .c-head,.stable-table--defi .c-bar{grid-column:1/-1}
  .stable-table--cex tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stable-table--cex .c-apr{grid-column:2;grid-row:1}
  .stable-table--cex .c-bar,.stable-table--cex .c-cond{grid-column:1/-1}
  .stable-table .c-bar{min-width:0}
  .rate-bar{min-width:0}
  .dev__bar{width:40px}
  .dev{gap:6px}
  .kimchi-bar{grid-template-columns:minmax(84px,auto) minmax(0,1fr) 64px;gap:var(--pagu-space-2)}
}

/* --- docs-kit 조합 ----------------------------------------------------- */

/* docs-section 의 목록 규칙(padding-left·li margin)이 차트·막대의 ol/ul 에 번지는 걸 되돌린다 */
.watch-article .pegc__rows,
.watch-article .kimchi-bars{padding-left:0}
.watch-article .pegc__row,
.watch-article .kimchi-bar{margin-bottom:0}

/* docs-fig 안에서는 그림틀이 간격을 주므로 안쪽 요소의 위 여백을 없앤다 */
.watch-article .docs-fig .peg-strip,
.watch-article .docs-fig .stable-table-wrap,
.rates-article .docs-fig .stable-table-wrap{margin-top:0}

/* 그림틀 머리: 제목 오른쪽 끝에 배지. 좁으면 다음 줄로 내린다 (conferences .conf-chart-fig 패턴) */
.watch-article .docs-fig-head,
.rates-article .docs-fig-head{flex-wrap:wrap;row-gap:var(--pagu-space-2)}
.watch-article .docs-fig-head pagu-badge,
.rates-article .docs-fig-head pagu-badge{margin-left:auto;align-self:center}

/* 접힌 칸의 안내 문장은 작은 글자를 유지한다 (docs-more p 의 16px 을 되돌림) */
.watch-article .docs-more .stable-meta,
.rates-article .docs-more .stable-meta{font-size:var(--pagu-text-sm)}

/* "더 보기" 단추 — conferences .conf-more / boros .boros-more 와 같은 모양 */
.stable-more-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:var(--pagu-touch-min);
  margin:var(--pagu-space-2) 0 0;
  border:1px solid var(--pagu-line);
  border-radius:var(--pagu-radius-sm);
  background:var(--pagu-panel);
  color:var(--pagu-accent);
  font:inherit;
  font-size:var(--pagu-text-sm);
  font-weight:700;
  cursor:pointer;
}
.stable-more-btn:hover,
.stable-more-btn:focus-visible{border-color:var(--pagu-accent);background:var(--pagu-accent-weak)}
.stable-more-btn[hidden]{display:none}

.stable-key { margin: var(--pagu-space-4) 0; padding-left: var(--pagu-space-3); border-left: 3px solid var(--pagu-accent); color: var(--pagu-fg); font-weight: 700; }
.stable-takeaway { margin: var(--pagu-space-2) 0 var(--pagu-space-4); color: var(--pagu-fg); font-size: var(--pagu-text-sm); line-height: 1.6; }
.pegc { --pegc-val: 112px; --pegc-row: 48px; }
.pegc__zero { border-left: 2px solid var(--pagu-fg); }
.pegc__val small { display: block; color: var(--pagu-muted); font-size: var(--pagu-text-xs); }
.pegc__sym { overflow: visible; text-overflow: clip; }
.stable-table .c-apy { min-width: 120px; }
.stable-table--defi .c-apy small { white-space: normal; }
.stable-table .c-head .stable-state { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .stable-table--defi tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stable-table--defi .c-apy { min-width: 0; }
}
@media (max-width: 480px) {
  .pegc { --pegc-val: 98px; --pegc-gap: 8px; --pegc-row: 48px; }
  .pegc__val { padding-right: 0; }
  .pegc__sym { padding-left: 0; }
}

/* Rates screen: filters share a rail; all rate components remain visible. */
.rates-shell .page-title { margin-bottom: 8px; }
.rates-shell .stable-key { margin: 6px 0; padding: 6px 0; border: 0; border-block: 1px solid var(--pagu-line); font-size: 13px; font-weight: 600; }
.rates-shell .page-title .stable-meta { font-size: 12px; line-height: 1.45; }
.rates-definitions { display: flex; flex-wrap: wrap; gap: 0 16px; }
.rates-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 8px 0; margin-bottom: 12px; border-bottom: 1px solid var(--pagu-line); }
.rates-shell .stable-filters { gap: 8px; margin: 0; justify-content: flex-start; }
.rates-shell .stable-filters label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.rates-shell .stable-filters select { min-height: var(--pagu-control-height); padding: 4px 24px 4px 8px; font-size: 13px; }
.rates-shell .stable-filters button { min-height: var(--pagu-control-height); padding: 4px 12px; border: 1px solid var(--pagu-line-strong); border-radius: 2px; background: var(--pagu-panel); color: var(--pagu-fg); font-size: 13px; }
.rates-tools #ratesMeta { margin-left: auto; font-size: 12px; }
.rates-tools .rate-legend { margin: 0; font-size: 12px; }
.rates-shell .stable-table { font-size: 13px; line-height: 1.45; }
.rates-shell .stable-table :is(th, td) { padding: 6px 10px; vertical-align: top; }
.rates-shell .stable-table thead th { padding-block: 8px; }
.rates-shell .stable-table small.stable-subtext { font-size: 12px; line-height: 1.45; }
.rates-shell .stable-table td.c-bar { vertical-align: top; padding-top: 12px; }
.rates-shell .stable-table .c-apr .stable-subtext { white-space: normal; }
.rates-shell .stable-table a { padding-block: 0; margin-block: 0; }
.rates-shell .stable-table .c-apy .rate-components { display: flex; justify-content: flex-end; flex-wrap: wrap; column-gap: 8px; }
.rates-shell .stable-state { padding: 1px 5px; white-space: normal; background: var(--pagu-bg-subtle); }
.rates-shell .stable-reason { font-size: 12px; color: var(--pagu-warn); }
.rates-shell .rate-bar { height: 6px; border: 1px solid var(--pagu-line); border-radius: 2px; box-shadow: none; }
.rates-shell .rate-bar__base, .rates-shell .rate-key--base::before { background: var(--pagu-muted); border-radius: 2px; }
.rates-shell .rate-bar__reward, .rates-shell .rate-key--reward::before { background: var(--pagu-neutral-weak); border: 1px solid var(--pagu-muted); box-shadow: none; }
.rates-shell .rate-bar--heavy { outline-color: var(--pagu-warn); }
.rates-shell .docs-fig-head { margin-bottom: 6px; }
.rates-shell .stable-takeaway { font-size: 13px; line-height: 1.45; margin-bottom: 6px; }
.rates-shell .stable-table-wrap { margin-top: 6px; }
@media (min-width: 768px) {
  .rates-shell .stable-table tbody { line-height: 19px; }
  .rates-shell .stable-table :is(small.stable-subtext, .stable-state) { line-height: 17px; }
}
@media (max-width: 760px) {
  .rates-shell .stable-table tbody { gap: 0; }
  .rates-shell .stable-table tbody tr { padding: 10px 0; border: 0; border-bottom: 1px solid var(--pagu-line); border-radius: 0; gap: 6px 12px; }
  .rates-shell .stable-table tbody td { padding: 0; }
  .rates-shell .stable-table td.c-bar { padding-top: 4px; }
  .rates-shell .stable-table .c-head a { display: inline-flex; min-height: 44px; align-items: center; }
  /* Match the APR value below its 12px label while preserving a 44px link. */
  .rates-shell .stable-table.stable-table--cex .c-head a { align-items: flex-start; padding-top: calc(12px * 1.45); }
  .rates-tools { gap: 8px; }
  .rates-tools #ratesMeta { margin-left: 0; flex-basis: 100%; }
  .rates-shell .stable-filters { flex: 1 1 100%; align-items: stretch; }
  .rates-shell .stable-filters label { display: grid; gap: 4px; flex: 1 1 100px; }
  .rates-shell .stable-filters select { width: 100%; }
  .rates-shell .stable-filters button { align-self: end; }
}
@media (max-width: 767px), (pointer: coarse) {
  .rates-shell .stable-filters :is(select, button) { min-height: 44px; }
  .rates-shell .stable-table .c-head a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Watch screen: reuse the rates rail, stat tiles and continuous table rows.
   Keep every override scoped here so the finished rates screen stays unchanged. */
.watch-shell .page-title { margin-bottom: 8px; }
.watch-shell .stable-key { margin: 8px 0; padding: 4px 0; border: 0; border-block: 1px solid var(--pagu-line); font-size: 13px; font-weight: 600; }
.watch-shell .stable-meta { font-size: 12px; line-height: 1.45; }
.watch-shell .watch-tools { align-items: center; gap: 8px 16px; margin: 0 0 12px; padding: 8px 0; border-bottom: 1px solid var(--pagu-line); }
.watch-shell .inline-control { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.watch-shell .inline-control input { width: 88px; height: var(--pagu-control-height); min-height: var(--pagu-control-height); padding: 4px 8px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.watch-shell .watch-tools button { min-height: var(--pagu-control-height); }
.watch-shell .stable-stats { max-width: none; margin: 0; gap: 0; }
.watch-shell .stable-stat { padding: 8px 12px; border: 0; border-radius: 0; text-align: right; }
.watch-shell .stable-stat + .stable-stat { border-left: 1px solid var(--pagu-line); }
.watch-shell .stable-stat strong { font-size: 20px; font-weight: 700; line-height: 24px; }
.watch-shell #watchMeta { flex-basis: 100%; margin: 0; }
.watch-shell .docs-article > .docs-section:first-child { border-top: 0; }
.watch-shell .docs-fig-head { margin-bottom: 8px; }
.watch-shell .stable-takeaway { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.watch-shell .stable-more-btn { min-height: var(--pagu-control-height); margin-top: 8px; font-weight: 600; }
.watch-shell .stable-table-wrap { overflow-y: hidden; }
.watch-shell .stable-table { font-size: 13px; line-height: 19px; }
.watch-shell .stable-table :is(th, td) { height: 36px; padding: 6px 10px; vertical-align: top; }
.watch-shell .stable-table th { padding-block: 8px; line-height: 19px; }
.watch-shell .stable-table a { padding-block: 0; margin-block: 0; }
.watch-shell .stable-table small.stable-subtext { font-size: 12px; line-height: 17px; }
.watch-shell .supply-line > small { font-size: 13px; }
/* td 만 푼다 — th 까지 normal 이면 760px 이하에서 1px 로 접힌 표 머리 안의
   글자("KRW price (KRW, time)")가 낱말 가운데서 끊긴다. 머리는 nowrap 유지. */
.watch-shell .stable-table td.c-price { white-space: normal; }
.watch-shell .stable-table .c-price small { white-space: nowrap; }
.watch-shell .stable-table .c-state { min-width: 88px; }
.watch-shell .stable-state { padding: 0 5px; font-size: 13px; line-height: 19px; }
.watch-shell .stable-state--ok { color: var(--pagu-muted); background: var(--pagu-bg-subtle); }
.watch-shell .stable-reason { font-size: 12px; line-height: 17px; color: var(--pagu-warn); }
.watch-shell .dev { display: flex; min-height: 19px; }
.watch-shell :is(.dev__bar, .kimchi-bar__track) { height: 6px; border: 1px solid var(--pagu-line); border-radius: 2px; box-shadow: none; }
.watch-shell :is(.dev__bar, .kimchi-bar__track) i { border-radius: 2px; background: var(--pagu-muted); box-shadow: none; }
.watch-shell .dev--caution .dev__bar i { background: var(--pagu-down-weak); border: 1px solid var(--pagu-down); }
.watch-shell .dev--breach .dev__bar i { background: var(--pagu-down); }
.watch-shell .spark { vertical-align: top; }
.watch-shell .spark__line { stroke: var(--pagu-muted); }
.watch-shell .spark__end { fill: var(--pagu-muted); }
.watch-shell .pegc { --pegc-row: 36px; --pegc-val: 184px; --pegc-time: 184px; --pegc-gap: 12px; }
.watch-shell :is(.pegc__row, .pegc__axis) { grid-template-columns: var(--pegc-sym) minmax(0, 1fr) var(--pegc-val) var(--pegc-time); }
.watch-shell .pegc__grid { right: calc(var(--pegc-val) + var(--pegc-time) + 2 * var(--pegc-gap)); }
.watch-shell .pegc__row { border-bottom: 1px solid var(--pagu-line); border-radius: 0; }
.watch-shell .pegc__row:focus-visible { outline: 2px solid var(--pagu-focus); outline-offset: -2px; box-shadow: none; }
.watch-shell .pegc__plot { height: calc(var(--pegc-row) - 1px); }
.watch-shell .pegc__val { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 8px; padding-right: 0; }
.watch-shell .pegc__time { padding-right: 8px; font-size: 12px; line-height: 17px; text-align: right; color: var(--pagu-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.watch-shell .pegc__legend { gap: 8px; }
.watch-shell .pegc__legend i { background: var(--pagu-neutral-weak); border: 1px solid var(--pagu-muted); box-shadow: none; }
.watch-shell .pegc__band { background: var(--pagu-bg-subtle); border-color: var(--pagu-line-strong); }
.watch-shell .pegc__stem { background: var(--pagu-muted); }
.watch-shell .pegc__dot { background: var(--pagu-muted); box-shadow: none; outline: 2px solid var(--pagu-panel); }
.watch-shell .pegc__row--warn .pegc__stem { background: var(--pagu-down); }
.watch-shell .pegc__row--warn .pegc__dot { background: var(--pagu-panel); border: 2px solid var(--pagu-down); }
.watch-shell .pegc__row--bad :is(.pegc__stem, .pegc__dot) { background: var(--pagu-down); }
.watch-shell .pegc__tip-head span { white-space: normal; overflow: visible; text-overflow: clip; }
.watch-shell .kimchi-headline { justify-content: flex-end; gap: 8px; margin-top: 8px; }
.watch-shell .kimchi-headline__label { order: -1; }
.watch-shell .kimchi-bars { gap: 0; margin-top: 8px; }
.watch-shell .kimchi-bar { min-height: 36px; padding-block: 8px; gap: 4px 12px; border-bottom: 1px solid var(--pagu-line); }
.watch-shell .kimchi-bar__note { margin: 0; }
.watch-shell #kimchiFx { margin-top: 8px; }
@media (min-width: 1024px) {
  .watch-shell .stable-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-block: 6px; }
  .watch-shell .stable-stat span { order: -1; margin: 0; text-align: left; }
}
@media (min-width: 1280px) {
  .watch-shell .docs-toc { padding-top: 0; }
  .watch-shell .stable-table :is(.c-asset, .c-price) small.stable-subtext { display: inline; margin-left: 8px; white-space: normal; }
  .watch-shell .supply-line { display: inline-block; }
  .watch-shell .supply-line + .supply-line { margin-left: 8px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .watch-shell .pegc { --pegc-val: 112px; --pegc-time: 176px; --pegc-row: 36px; --pegc-gap: 8px; }
  .watch-shell .pegc__val { display: block; font-size: 13px; line-height: 17px; }
}
@media (max-width: 767px) {
  .watch-shell .watch-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .watch-shell .inline-control { justify-content: space-between; min-width: 0; }
  .watch-shell .inline-control input { width: 72px; }
  .watch-shell .stable-stats { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .watch-shell .stable-stat { padding: 8px; }
  .watch-shell .stable-stat strong { font-size: 18px; }
  .watch-shell .watch-tools button { width: auto; padding-inline: 8px; }
  .watch-shell #watchMeta { grid-column: 1 / -1; }
  .watch-shell .pegc { --pegc-val: 104px; --pegc-gap: 8px; --pegc-row: 34px; }
  .watch-shell :is(.pegc__row, .pegc__axis) { grid-template-columns: var(--pegc-sym) minmax(0, 1fr) var(--pegc-val); }
  .watch-shell .pegc__row { padding-block: 4px; }
  .watch-shell .pegc__grid { right: calc(var(--pegc-val) + var(--pegc-gap)); }
  .watch-shell .pegc__val { display: block; line-height: 17px; }
  .watch-shell .pegc__time { grid-column: 1 / -1; padding-right: 0; }
  .watch-shell .pegc__axis > :last-child { display: none; }
  .watch-shell .kimchi-bar { grid-template-columns: 100px minmax(0, 1fr) 64px; gap: 4px 8px; }
}
@media (max-width: 760px) {
  .watch-shell .stable-table-wrap { overflow: visible; }
  .watch-shell .stable-table tbody tr { margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--pagu-line); border-radius: 0; gap: 8px 12px; }
  .watch-shell .stable-table tbody td { height: auto; padding: 0; }
  .watch-shell .stable-table .c-price small { white-space: normal; }
  .watch-shell .stable-table--peg .c-asset { grid-column: 1; grid-row: 1; }
  .watch-shell .stable-table--peg tr:has(.c-asset a) .c-state { padding-top: 12px; }
  .watch-shell .stable-table--nav tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .watch-shell .stable-table--nav .c-asset { grid-column: 1 / -1; }
  .watch-shell .stable-table--kimchi tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .watch-shell .stable-table--kimchi .c-vol { grid-column: 1 / -1; }
}
@media (max-width: 767px), (pointer: coarse) {
  .watch-shell :is(.inline-control input, .watch-tools button, .stable-more-btn, .pegc__row) { min-height: 44px; }
  .watch-shell .stable-table .c-asset a { display: inline-block; min-height: 44px; padding-block: 12px; }
}
@media (min-width: 761px) and (pointer: coarse) {
  .watch-shell .stable-table :is(th, td) { height: 44px; }
  .watch-shell .stable-table .c-asset a { margin-block: -12px; }
}
@media (min-width: 1280px) and (pointer: coarse) {
  .watch-shell .docs-toc-link { align-items: flex-start; }
}