/* 착공 × 금리 대시보드. dashboard.css 의 --re-* 토큰을 그대로 쓴다.

   390px 에서 가로로 넘치지 않는 게 조건이다 — 칩 줄은 wrap 하고, 차트는
   viewBox 로 줄어들며, 카드는 auto-fit 으로 접힌다. */

.re-app.is-supply { margin: 0 0 2rem; }

.sp-controls { margin: 0 0 0.9rem; }

.sp-metric {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.6rem;
}

.sp-metric button,
.sp-chip {
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.34rem 0.6rem;
  border: 1px solid var(--re-grid, #e3e5e7);
  border-radius: 999px;
  background: #fff;
  color: var(--re-ink2, #646769);
  cursor: pointer;
}

.sp-metric button.is-on,
.sp-chip.is-on {
  background: var(--re-ink, #3d4144);
  border-color: var(--re-ink, #3d4144);
  color: #fff;
}

.sp-chip[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 넷을 다 골랐을 때 나머지 칩을 숨기지 않는다 — 사라지면 왜 안 눌리는지 모른다.
   대신 눌러도 반응하지 않는다는 걸 흐리게 알린다. */
.sp-chip[data-full] { opacity: 0.5; }

.sp-picks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.sp-picks-label,
.sp-always {
  font-size: 0.74rem;
  color: var(--re-muted, #7a8288);
}

.sp-picks-label b { color: var(--re-ink, #3d4144); }

.sp-always { flex-basis: 100%; }

.sp-chart { margin: 0.2rem 0 0.4rem; }
.sp-chart svg { display: block; width: 100%; height: auto; }

.sp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.7rem;
  font-size: 0.74rem;
  color: var(--re-ink2, #646769);
}

.sp-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }

.sp-legend i {
  width: 0.7rem;
  height: 0.18rem;
  border-radius: 999px;
}

.sp-legend-sep {
  width: 100%;
  height: 0;
}

.sp-note {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--re-muted, #7a8288);
}

/* 지표 셋의 뜻. 탭 바로 아래에 셋을 다 펼쳐 둔다 — 눌러 봐야 아는 화면이 되면
   '지수' 가 무엇의 지수인지 끝내 모르고 지나간다. 고른 것만 잉크색이 된다. */
.sp-defs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.35rem 1.1rem;
  margin: 0 0 0.75rem;
}

.sp-def {
  padding-left: 0.55rem;
  border-left: 2px solid var(--re-grid, #e3e5e7);
}

.sp-def.is-on { border-left-color: var(--re-ink, #3d4144); }

.sp-def dt {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--re-muted, #7a8288);
}

.sp-def.is-on dt { color: var(--re-ink, #3d4144); }

.sp-def dd {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--re-muted, #7a8288);
}

.sp-def dd b { font-weight: 600; color: var(--re-ink2, #646769); }

/* 스탯 타일. 테두리 대신 옅은 면으로 구분한다 — 칸마다 선을 두르면 표처럼 보이고,
   선의 잉크가 정작 읽어야 할 숫자와 무게를 다툰다.
   grid 의 1fr 로 늘리지 않는다 — 지역을 하나만 고르면 타일 둘이 화면 폭까지
   벌어져, 큰 숫자와 스파크라인 사이가 텅 빈다. 타일은 내용만큼만 차지하고
   남는 자리는 여백으로 둔다. */
.sp-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0;
}

.sp-card {
  flex: 1 1 8.6rem;
  max-width: 13rem;
  padding: 0.55rem 0.7rem 0.5rem;
  border-radius: 0.5rem;
  background: #f6f7f8;
}

.sp-card-name {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.74rem;
  color: var(--re-ink2, #646769);
}

/* 이름 옆의 점이 계열 색을 지고, 글자는 잉크색을 지킨다. */
.sp-card-name i {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
}

.sp-card-value {
  margin: 0.12rem 0 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--re-ink, #3d4144);
  overflow-wrap: anywhere;
}

.sp-card-value span {
  margin-left: 0.25rem;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--re-muted, #7a8288);
}

.sp-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.3rem;
  min-height: 18px;
}

.sp-card-delta {
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--re-muted, #7a8288);
}

.sp-spark { flex: none; display: block; }

.sp-cards-foot {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  color: var(--re-muted, #7a8288);
}

.sp-cards-foot b { font-weight: 600; color: var(--re-ink2, #646769); }

.sp-limits {
  margin: 1.2rem 0 0;
  padding: 0 0 0 1.1rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--re-ink2, #646769);
}

.sp-error { color: #d03b3b; font-size: 0.85rem; }

@media (max-width: 480px) {
  .sp-metric button, .sp-chip { font-size: 0.74rem; padding: 0.3rem 0.5rem; }
  /* 390px 에서 두 칸이 들어간다. 값이 1.35rem 으로 줄어도 타일 안에서 제일 큰
     글자라 위계는 그대로다. */
  .sp-card {
    flex-basis: 7.2rem;
    max-width: none;
    padding: 0.5rem 0.55rem 0.45rem;
  }
  .sp-card-value { font-size: 1.35rem; }
  .sp-defs { gap: 0.3rem; }
  .sp-def dd { font-size: 0.7rem; }
}