/*
 * WEB-05 쇼핑(/shop) — 옛 사이트(08-nabiplay nabiplay-web) "준비 중" 구조·문구를 새 부품으로 옮김.
 * 순서: 히어로(다크, download.css 의 .page-hero 를 함께 씁니다) → 인정 단말기 카테고리 카드 →
 *       사전가입 유도 배너 → 왜 검증한 기기인가 · 이미 기기가 있다면 → 고지문.
 * 색은 전부 tokens.css 의 var(--…) 만 씁니다.
 */

.shop-categories,
.shop-cta,
.shop-info {
  padding: 0 var(--space-8);
  margin-bottom: var(--space-16);
}

/* ── 인정 단말기 카테고리 카드 ────────────────────────────────────── */
.shop-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.shop-categories__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.shop-categories__art {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-card);
  background: var(--color-background);
  color: var(--color-primary);
}

.shop-categories__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.shop-categories__head h3 {
  margin: 0;
  font-size: var(--font-size-code);
}

.shop-categories__status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sheet);
  background: var(--color-background);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.shop-categories__role {
  font-size: var(--font-size-caption);
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-medium);
}

.shop-categories__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* ── 사전가입 유도 배너 ───────────────────────────────────────────── */
.shop-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8);
  margin-left: var(--space-8);
  margin-right: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--color-indigo-50);
}

.shop-cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 560px;
}

.shop-cta__text h2 {
  margin: 0;
  font-size: var(--font-size-title-md);
}

.shop-cta__text p {
  margin: 0;
  color: var(--color-text-muted);
}

.shop-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  padding: 0 var(--space-8);
  border-radius: var(--radius-sheet);
  /* color-primary + 흰 글자는 대비가 AA(4.5:1) 미달이라 더 짙은 pressed 톤을 씁니다 */
  background: var(--color-primary-pressed);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}

/* ── 왜 검증한 기기인가 · 이미 기기가 있다면 ──────────────────────── */
.shop-info__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.shop-info__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}

.shop-info__title {
  font-weight: var(--font-weight-bold);
}

.shop-info__desc {
  margin: 0;
  color: var(--color-text-muted);
}

/* ── 고지문 ───────────────────────────────────────────────────────── */
.shop-disclaimer {
  margin: 0 var(--space-8) var(--space-16);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* ── 반응형(explore.css 와 같은 기준점) ───────────────────────────── */
@media (max-width: 1024px) {
  .shop-categories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .shop-categories,
  .shop-cta,
  .shop-info,
  .shop-disclaimer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    margin-left: 0;
    margin-right: 0;
  }

  .shop-categories__grid {
    grid-template-columns: 1fr;
  }

  .shop-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .shop-info__grid {
    grid-template-columns: 1fr;
  }
}