/* ==========================================================================
   Pagu.info 공통 부품 스타일 — 0단계
   src/tokens.css 를 먼저 불러온 뒤 사용한다.
     <link rel="stylesheet" href="src/tokens.css" />
     <link rel="stylesheet" href="src/components.css" />
   담는 것: 데이터 상태 배지(pagu-badge), 차트 카드(pagu-chart), 카드/표 기본형.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 데이터 상태 배지 — <pagu-badge status="live|example|pending">
      숫자 옆에 반드시 붙는다. architecture.md 6-3
   -------------------------------------------------------------------------- */

pagu-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pagu-space-1);
  flex-wrap: wrap;
  vertical-align: middle;
  font-family: var(--pagu-font-sans);
  font-size: var(--pagu-text-xs);
  line-height: 1.4;
}

.pagu-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: var(--pagu-radius-full);
  font-size: var(--pagu-text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.pagu-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* 실데이터 — 초록 */
.pagu-badge--live {
  color: var(--pagu-up);
  background: var(--pagu-up-weak);
  border-color: color-mix(in srgb, var(--pagu-up) 25%, transparent);
}

/* 예시 — 노란 테두리 (architecture.md 명시) */
.pagu-badge--example {
  color: var(--pagu-warn);
  background: var(--pagu-warn-weak);
  border-color: var(--pagu-warn);
  border-style: dashed;
}

/* 준비 중 — 회색 */
.pagu-badge--pending {
  color: var(--pagu-neutral);
  background: var(--pagu-neutral-weak);
  border-color: color-mix(in srgb, var(--pagu-neutral) 22%, transparent);
}

/* 데이터가 오래된 경우 — 경고 톤 */
.pagu-badge--stale {
  color: var(--pagu-warn);
  background: var(--pagu-warn-weak);
  border-color: color-mix(in srgb, var(--pagu-warn) 40%, transparent);
}

.pagu-badge__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--pagu-space-1);
  color: var(--pagu-muted);
  font-size: var(--pagu-text-xs);
  font-variant-numeric: tabular-nums;
}

.pagu-badge__source {
  color: var(--pagu-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 2px 0;
}

.pagu-badge__source:hover,
.pagu-badge__source:focus-visible {
  color: var(--pagu-accent-strong);
}

/* 예시 데이터가 들어간 영역 전체를 감쌀 때 (노란 테두리 강조) */
.pagu-example-zone {
  border: 1px dashed var(--pagu-warn);
  border-radius: var(--pagu-radius-md);
  background: var(--pagu-warn-weak);
  padding: var(--pagu-space-4);
}

/* --------------------------------------------------------------------------
   2. 카드 / 벤토 그리드 기본형
   -------------------------------------------------------------------------- */

.pagu-card {
  background: var(--pagu-panel);
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-lg);
  box-shadow: var(--pagu-shadow-sm);
  padding: var(--pagu-space-5);
}

.pagu-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pagu-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--pagu-space-4);
}

.pagu-card__title {
  margin: 0;
  font-size: var(--pagu-text-lg);
  font-weight: 700;
  color: var(--pagu-fg);
}

.pagu-card__desc {
  margin: var(--pagu-space-1) 0 0;
  color: var(--pagu-muted);
  font-size: var(--pagu-text-sm);
}

.pagu-bento {
  display: grid;
  gap: var(--pagu-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.pagu-bento--wide {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   3. 차트 카드 — <pagu-chart>
   -------------------------------------------------------------------------- */

pagu-chart {
  display: block;
  position: relative;
  width: 100%;
}

.pagu-chart__frame {
  position: relative;
  width: 100%;
  min-height: 160px;
  border-radius: var(--pagu-radius-md);
  overflow: hidden;
  background: var(--pagu-panel);
}

.pagu-chart__canvas {
  width: 100%;
}

.pagu-chart__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pagu-space-2);
  text-align: center;
  padding: var(--pagu-space-5) var(--pagu-space-4);
  min-height: 160px;
  color: var(--pagu-muted);
  font-size: var(--pagu-text-sm);
  background: var(--pagu-bg-subtle);
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-md);
}

.pagu-chart__state img {
  width: 48px;
  height: 48px;
  opacity: 0.9;
}

.pagu-chart__state--error {
  color: var(--pagu-down);
  background: var(--pagu-down-weak);
  border-color: color-mix(in srgb, var(--pagu-down) 30%, transparent);
}

.pagu-chart__state[hidden],
.pagu-chart__frame[hidden] {
  display: none;
}

.pagu-chart__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pagu-space-3);
  flex-wrap: wrap;
  margin-top: var(--pagu-space-3);
  font-size: var(--pagu-text-xs);
  color: var(--pagu-muted);
}

/* 차트 로딩 중 뼈대 */
.pagu-chart__skeleton {
  min-height: 160px;
  border-radius: var(--pagu-radius-md);
  background: linear-gradient(
    90deg,
    var(--pagu-bg-subtle) 0%,
    var(--pagu-line) 50%,
    var(--pagu-bg-subtle) 100%
  );
  background-size: 200% 100%;
  animation: pagu-shimmer 1.3s linear infinite;
}

@keyframes pagu-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   4. 표 — 데스크톱은 표, 360px 모바일은 가로 스크롤 (AGENTS.md 규칙)
   -------------------------------------------------------------------------- */

.pagu-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-md);
  background: var(--pagu-panel);
}

.pagu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pagu-text-sm);
  min-width: 320px;
}

.pagu-table th,
.pagu-table td {
  padding: var(--pagu-space-3);
  border-bottom: 1px solid var(--pagu-line);
  text-align: left;
  white-space: nowrap;
}

.pagu-table thead th {
  background: var(--pagu-bg-subtle);
  color: var(--pagu-muted);
  font-weight: 600;
  font-size: var(--pagu-text-xs);
}

.pagu-table tbody tr:last-child td {
  border-bottom: none;
}

.pagu-table .pagu-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --------------------------------------------------------------------------
   5. 작은 보조 요소
   -------------------------------------------------------------------------- */

.pagu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pagu-space-2);
  min-height: var(--pagu-touch-min);
  padding: 0 var(--pagu-space-4);
  border: 1px solid var(--pagu-line-strong);
  border-radius: var(--pagu-radius-md);
  background: var(--pagu-panel);
  color: var(--pagu-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--pagu-duration) var(--pagu-ease),
    background var(--pagu-duration) var(--pagu-ease);
}

.pagu-btn:hover { background: var(--pagu-bg-subtle); }
.pagu-btn:active { transform: translateY(1px); }

.pagu-btn--primary {
  background: var(--pagu-accent);
  border-color: var(--pagu-accent);
  /* 고정 흰색 금지 — accent 가 다크에서 연한 라벤더가 되어 2.58:1 로 깨진다.
     tokens.css 의 --on-accent 가 테마별로 흰색/어두운색을 준다 (4.70:1 / 6.93:1). */
  color: var(--on-accent, #ffffff);
}

.pagu-btn--primary:hover { background: var(--pagu-accent-strong); }

.pagu-value {
  font-variant-numeric: tabular-nums;
  font-size: var(--pagu-text-xl);
  font-weight: 700;
  color: var(--pagu-fg);
}

.pagu-value--up { color: var(--pagu-up); }
.pagu-value--down { color: var(--pagu-down); }

.pagu-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 420px) {
  .pagu-card { padding: var(--pagu-space-4); }
  .pagu-value { font-size: var(--pagu-text-lg); }
}

/* ---------------------------------------------------------------------------
   데이터 소스 선택 바 (.pagu-source-bar)
   "어느 마켓/풀의 값을 입력칸에 채울까"를 고르는 줄. 3단계 Pendle 계산기 3개가 쓴다.

   색은 전부 --pagu-* 에서만 가져온다. 고정색이나 rgba 흰색을 쓰면 다크 모드에서
   어두운 배경 위 어두운 글자가 된다 (docs/architecture.md §5 "색을 새로 쓸 때").
   --------------------------------------------------------------------------- */
.pagu-source-bar {
  display: grid;
  gap: var(--pagu-space-3);
  padding: var(--pagu-space-4);
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-lg);
  background: var(--pagu-bg-subtle);
  color: var(--pagu-muted);
}

.pagu-source-bar__pick {
  display: grid;
  /* 네트워크(좁게) + 마켓(남는 폭 전부) + 새로고침 버튼. 마켓 이름이 길어도
     minmax(0, …) 때문에 줄이 밖으로 밀리지 않고 select 안에서 … 로 잘린다. */
  grid-template-columns: minmax(0, 18ch) minmax(0, 1fr) auto;
  gap: var(--pagu-space-3);
  align-items: end;
}

.pagu-source-bar label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  color: var(--pagu-muted);
  font-size: var(--pagu-text-sm);
  font-weight: 650;
}

.pagu-source-bar select {
  width: 100%;
  min-width: 0;
  min-height: var(--pagu-touch-min);
  padding: 0 var(--pagu-space-3);
  border: 1.5px solid var(--pagu-line);
  border-radius: var(--pagu-radius-md);
  background: var(--pagu-panel);
  color: var(--pagu-fg);
  font: inherit;
  font-weight: 600;
  text-overflow: ellipsis;
}

.pagu-source-bar select:focus-visible,
.pagu-source-bar button:focus-visible {
  outline: 2px solid var(--pagu-focus);
  outline-offset: 2px;
}

.pagu-source-bar button {
  min-height: var(--pagu-touch-min);
  padding: 0 var(--pagu-space-4);
  border: 1.5px solid var(--pagu-line);
  border-radius: var(--pagu-radius-md);
  background: var(--pagu-panel);
  color: var(--pagu-fg);
  font: inherit;
  font-size: var(--pagu-text-sm);
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.pagu-source-bar button:hover { border-color: var(--pagu-line-strong); }
.pagu-source-bar button:disabled { cursor: default; color: var(--pagu-muted); opacity: 0.6; }

.pagu-source-bar__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pagu-space-2) var(--pagu-space-3);
  align-items: center;
}

/* 실패 사유·갱신 시각 안내. 숫자가 섞이므로 자릿수를 고정한다. */
.pagu-source-bar__note {
  margin: 0;
  min-width: 0;
  flex: 1 1 14rem;
  color: var(--pagu-muted);
  font-size: var(--pagu-text-xs);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.pagu-source-bar__note--error { color: var(--pagu-down); }

/* 마켓을 고르면 "어느 칸이 채워졌는지" 알려주는 칩들 */
.pagu-source-bar__filled {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pagu-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagu-source-bar__filled li {
  padding: 2px var(--pagu-space-2);
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-full);
  background: var(--pagu-panel);
  color: var(--pagu-muted);
  font-size: var(--pagu-text-xs);
  font-variant-numeric: tabular-nums;
}

/* 좁아지면 먼저 버튼을 아래 줄 전체로 내리고, 더 좁아지면 전부 한 칸씩 쌓는다. */
@media (max-width: 760px) {
  .pagu-source-bar__pick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pagu-source-bar__pick button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 560px) {
  .pagu-source-bar__pick { grid-template-columns: minmax(0, 1fr); }
  .pagu-source-bar button { width: 100%; }
}