/* 홈 시장 인포그래픽과 저장본 디파이 카드 */
.hero.hero--single {
  grid-template-columns: minmax(0, 1fr);
}

/* 카드는 위쪽 정렬 — 긴 페그 목록이 이웃 카드(김치·TVL)를 같은 높이로 늘리지 않게 */
.market-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--pagu-space-4);
}

.market-tile {
  min-width: 0;
  padding: var(--pagu-space-4);
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-lg);
  background: var(--pagu-panel);
}

.market-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pagu-space-2);
  min-height: 44px;
}

.market-tile-head h3 {
  min-width: 0;
  margin: 0;
  font-size: var(--pagu-text-sm);
}

.market-tile-head a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  color: var(--pagu-accent);
}

.market-tile-body {
  position: relative;
  margin-top: var(--pagu-space-3);
}

.market-skeleton {
  display: block;
  width: 100%;
  height: 154px;
  border-radius: var(--pagu-radius-md);
  background: var(--pagu-bg-subtle);
}

.peg-rows,
.kimchi-rows {
  display: grid;
  gap: 5px;
}

.peg-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 58px;
  align-items: center;
  gap: var(--pagu-space-2);
  min-height: 12px;
  font-size: var(--pagu-text-xs);
}

/* 점만 있으면 휴대폰에서 값을 볼 길이 없다 — 가격을 글자로 항상 보인다 (2026-10-18 소유자: 꼭 필요한 숫자는 남긴다) */
.peg-value {
  color: var(--pagu-fg);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.peg-value.is-bad { color: var(--pagu-down); font-weight: 700; }

.peg-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.peg-track,
.kimchi-track {
  position: relative;
  display: block;
  min-width: 0;
  height: 10px;
  border-radius: var(--pagu-radius-full);
  background: var(--pagu-bg-subtle);
}

.peg-band,
.peg-center,
.peg-dot,
.kimchi-center,
.kimchi-bar {
  position: absolute;
  display: block;
}

.peg-band {
  inset-block: 0;
  background: var(--pagu-accent-weak);
}

.peg-center,
.kimchi-center {
  z-index: 1;
  inset-block: -2px;
  left: 50%;
  width: 1px;
  background: var(--pagu-muted);
}

.peg-dot {
  z-index: 2;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid var(--pagu-panel);
  border-radius: var(--pagu-radius-full);
  background: var(--pagu-accent);
  transform: translate(-50%, -50%);
}

.peg-dot.is-bad { background: var(--pagu-down); }
.peg-dot.is-clamped { box-shadow: 0 0 0 1px var(--pagu-fg); }

.peg-axis {
  display: flex;
  justify-content: space-between;
  margin: var(--pagu-space-2) calc(58px + var(--pagu-space-2)) 0 calc(42px + var(--pagu-space-2));
  color: var(--pagu-muted);
  font-size: var(--pagu-text-xs);
  font-variant-numeric: tabular-nums;
}

.kimchi-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pagu-space-2);
  margin: 0 0 var(--pagu-space-4);
}

.kimchi-headline strong,
.tvl-number,
.protocol-tvl {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-variant-numeric: tabular-nums;
}

.kimchi-headline span,
.market-muted,
.protocol-change span,
.tvl-delta span {
  color: var(--pagu-muted);
  font-size: var(--pagu-text-xs);
}

.kimchi-row {
  display: grid;
  grid-template-columns: minmax(58px, 0.9fr) minmax(50px, 1fr) minmax(58px, auto);
  align-items: center;
  gap: var(--pagu-space-2);
  min-height: 18px;
  font-size: var(--pagu-text-xs);
}

.kimchi-track { height: 8px; overflow: hidden; }
.kimchi-bar { inset-block: 0; }
.kimchi-bar.pos { background: var(--pagu-up); }
.kimchi-bar.neg { background: var(--pagu-down); }
.kimchi-bar.is-thin { opacity: 0.42; }
.kimchi-row > strong { text-align: right; font-variant-numeric: tabular-nums; }
/* 거래가 적은 행은 흐린 막대만으로는 휴대폰에서 이유를 알 수 없다 — 짧은 글자로 보인다 */
.kimchi-thin { display: block; color: var(--pagu-muted); font-size: var(--pagu-text-xs); }

.tvl-headline,
.protocol-metrics {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pagu-space-2);
}

.tvl-number { display: block; text-align: left; }
.tvl-delta {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--pagu-space-2);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.tvl-sparkline {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: var(--pagu-space-3);
}

.tvl-sparkline polyline {
  fill: none;
  stroke: var(--pagu-accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* 라이브 확인 시각 (live-poll.js statusLabel) — 작은 회색 글자, 좁은 타일에서도 넘치지 않게 */
.market-tile-status { margin: var(--pagu-space-2) 0 0; min-width: 0; overflow-wrap: anywhere; }

.market-failure-value { display: block; text-align: left; color: var(--pagu-muted); }
.market-muted { margin: var(--pagu-space-2) 0 0; text-align: left; }
.up { color: var(--pagu-up); }
.down { color: var(--pagu-down); }
.muted { color: var(--pagu-muted); }


.market-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; }
.market-takeaway { margin: var(--pagu-space-2) 0 var(--pagu-space-3); color: var(--pagu-muted); font-size: var(--pagu-text-sm); line-height: 1.6; }
.market-source { margin-top: var(--pagu-space-4); padding-top: var(--pagu-space-3); border-top: 1px solid var(--pagu-line); }
.market-source pagu-badge { display: block; }
.market-tile-head { justify-content: flex-start; }
.market-tile-head h3 { font-size: var(--pagu-text-base); }
.peg-row { min-height: 22px; }
.peg-row strong { overflow: visible; text-overflow: clip; }
.tvl-headline { flex-wrap: wrap; }
.tvl-delta { flex-wrap: wrap; justify-content: flex-start; }
.tvl-delta span { flex-basis: 100%; }
.tvl-sparkline { height: 96px; }
.market-ranking { width: 100%; overflow-x: auto; }
.market-protocol-table { width: 100%; border-collapse: collapse; font-size: var(--pagu-text-sm); }
.market-protocol-table :is(th, td) { padding: var(--pagu-space-4) var(--pagu-space-3); border-bottom: 1px solid var(--pagu-line); vertical-align: top; }
.market-protocol-table thead th { color: var(--pagu-muted); background: var(--pagu-bg-subtle); font-size: var(--pagu-text-xs); }
.market-protocol-table :is(th, td):nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.market-protocol-table :is(th, td):nth-child(-n+2) { text-align: left; }
.market-protocol-table small { display: block; color: var(--pagu-muted); font-size: var(--pagu-text-xs); font-weight: 500; }
.market-protocol-table a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--pagu-accent); overflow-wrap: anywhere; }
.market-rank { width: 48px; color: var(--pagu-muted); }
.market-size { width: 40%; }
.market-size-bar { display: block; height: 8px; margin: var(--pagu-space-2) 0 var(--pagu-space-1); border-radius: var(--pagu-radius-sm); background: var(--pagu-bg-subtle); overflow: hidden; }
.market-size-bar i { display: block; height: 100%; background: var(--pagu-accent); }
.market-protocol-error { color: var(--pagu-muted); }
@media (max-width: 899px) { .market-tile-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .market-protocol-table :is(th, td) { padding: var(--pagu-space-3) var(--pagu-space-1); }
  .market-rank { width: 28px; }
  .market-size { width: 31%; }
  .market-protocol-table thead th { white-space: normal; }
  .market-protocol-table thead small { white-space: normal; }
}

/* DeFi ranking only: the home market board keeps its finished geometry. */
[data-page="defi-dashboard"] .page-title { margin-bottom: 12px; }
[data-page="defi-dashboard"] .market-key { margin: 6px 0; padding: 6px 0; border: 0; border-block: 1px solid var(--pagu-line); font-size: 13px; font-weight: 600; }
[data-page="defi-dashboard"] .market-terms { margin: 0; color: var(--pagu-muted); font-size: 12px; line-height: 1.45; }
[data-page="defi-dashboard"] .data-meta { margin-top: 8px; }
[data-page="defi-dashboard"] #protocols { border-top: 0; padding-top: 0; }
[data-page="defi-dashboard"] .market-takeaway { margin: 4px 0 8px; font-size: 13px; line-height: 1.45; }
[data-page="defi-dashboard"] .market-protocol-table { min-width: 640px; font-size: 13px; line-height: 19px; }
[data-page="defi-dashboard"] .market-protocol-table :is(th, td) { height: 34px; padding: 7px 10px; }
[data-page="defi-dashboard"] .market-protocol-table thead th { font-size: 12px; }
[data-page="defi-dashboard"] .market-protocol-table a { padding-block: 6px; margin-block: -6px; }
[data-page="defi-dashboard"] .market-protocol-table tbody th small { display: inline; margin-left: 8px; }
[data-page="defi-dashboard"] .market-protocol-table tbody tr:last-child > * { border-bottom: 1px solid var(--pagu-line); }
[data-page="defi-dashboard"] .market-size { width: 40%; }
[data-page="defi-dashboard"] .market-size strong { display: inline-block; width: 80px; }
[data-page="defi-dashboard"] .market-size small { display: inline-block; width: 48px; }
[data-page="defi-dashboard"] .market-size-bar { display: inline-block; width: calc(100% - 152px); height: 6px; margin: 0 12px; vertical-align: middle; }
[data-page="defi-dashboard"] .market-size-bar i { background: var(--pagu-muted); }
@media (min-width: 1024px) {
  [data-page="defi-dashboard"] .market-takeaway { display: inline; margin-left: 12px; line-height: 24px; }
  [data-page="defi-dashboard"] .market-ranking { margin-top: 8px; }
}
@media (max-width: 767px), (pointer: coarse) {
  [data-page="defi-dashboard"] .market-protocol-table tbody :is(th, td) { height: 44px; padding-block: 12px; }
  [data-page="defi-dashboard"] .market-protocol-table a { padding-block: 13px; margin-block: -13px; }
}