/*
 * WEB-05 다운로드(/download) — 옛 사이트(08-nabiplay nabiplay-web) 구조·문구를 새 부품으로 옮김.
 * 순서: 히어로(다크) → 기기 구성 2가지 → 내려받기 3카드 → 안드로이드 설치 안내 →
 *       PC 커넥터(macOS·Windows) → 브라우저 확장.
 * .page-hero 는 쇼핑(/shop)과 함께 씁니다(Pages::PageHeroComponent · shop.css 에는 따로 두지 않습니다).
 * 색은 전부 tokens.css 의 var(--…) 만 씁니다.
 */

.download-page.layout-full-width,
.shop-page.layout-full-width {
  max-width: 1280px;
  padding: 0;
}

/* ── 공용 히어로(다크 — home-hero 와 같은 배경·태그 조합) ────────────── */
.page-hero {
  padding: var(--space-16) var(--space-8);
  margin-bottom: var(--space-16);
  background: var(--color-background-dark);
  color: var(--color-background);
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 640px;
}

.page-hero__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sheet);
  background: var(--color-ink-2);
  border: 1px solid var(--color-ink-3);
  color: var(--color-ink-muted);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.page-hero__title {
  margin: 0;
  color: var(--color-background);
  font-size: var(--font-size-title-xl);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.page-hero__desc {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-code);
  line-height: 1.6;
}

/* ── 절 제목(각 section 공용) ─────────────────────────────────────── */
.download-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.download-section-head h2 {
  margin: 0;
  font-size: var(--font-size-title-md);
}

.download-section-head p {
  margin: 0;
  color: var(--color-text-muted);
}

.download-case,
.download-club,
.download-guide,
.download-connector,
.download-extension {
  padding: 0 var(--space-8);
  margin-bottom: var(--space-16);
}

.download-config__tag {
  display: inline-flex;
  align-self: flex-start;
  height: 28px;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sheet);
  background: var(--color-indigo-50);
  color: var(--color-primary-pressed);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
}

.download-config__device-roles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
}

.download-config__role {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.download-apps__requirement {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.download-apps__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  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;
  text-align: center;
}

.download-apps__cta--disabled {
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ── 안드로이드 설치 안내 ─────────────────────────────────────────── */
.download-guide__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.download-guide__col h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-code);
}

.download-guide__col ol {
  margin: 0;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-muted);
}

/* ── PC 커넥터(macOS · Windows) ───────────────────────────────────── */
.download-connector__platform {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-line);
}

.download-connector__platform h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-title-md);
}

.download-connector__download {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.download-connector__download .download-apps__cta {
  width: auto;
  padding: 0 var(--space-8);
}

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

/* 단계 제목에 번호(1. 2. 3.)가 이미 있어 목록 번호는 감춥니다(번호가 두 번 보이던 문제). */
.download-connector__steps {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.download-connector__steps h3,
.download-connector__steps h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-body);
}

.download-connector__steps p {
  margin: 0;
  color: var(--color-text-muted);
}

/* ── 브라우저 확장 ────────────────────────────────────────────────── */
.download-extension__download {
  margin-bottom: var(--space-6);
}

.download-extension__download .download-apps__cta {
  width: auto;
  display: inline-flex;
  padding: 0 var(--space-8);
}

.download-extension__steps {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-muted);
}

.download-extension__addresses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.download-extension__address {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sheet);
  background: var(--color-surface);
}

.download-extension__address-browser {
  font-weight: var(--font-weight-bold);
}

.download-extension__address-value {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* ── 기기 구성 2가지(2026-10-06 개편): 위에 글 + 그림, 아래에 기기 카드 ─── */
.download-case__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--color-grey-100);
}

.download-case__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.download-case__copy h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.3;
}

.download-case__copy p {
  margin: 0;
  color: var(--color-text-muted);
}

.download-case__figure {
  margin: 0;
}

.download-case__figure img {
  width: 100%;
  height: auto;
}

.download-case__devices {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  list-style: none;
  margin: 1px 0 0;
  padding: 0;
  border-radius: 0 0 var(--radius-sheet) var(--radius-sheet);
  overflow: hidden;
}

.download-case__device {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-grey-100);
}

.download-case__device-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* 그림 속 번호와 같은 번호 — 그림의 기기와 아래 설명을 잇습니다. */
.download-case__number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-background);
  font-weight: var(--font-weight-bold);
}

.download-case__device-name {
  margin: 0;
  font-size: 20px;
}

.download-case__device .download-config__device-roles {
  justify-content: flex-start;
  gap: var(--space-2);
}

.download-case__device .download-config__role {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-grey-200);
  color: var(--color-grey-800);
}

.download-case__note {
  flex: 1;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: 1.6;
}

.download-case__app {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.download-case__app .download-apps__cta,
.download-club__actions .download-apps__cta {
  padding: 0 var(--space-6);
}

/* ── 나비클럽(콘텐츠 고유 지문 생성) ─────────────────────────────── */
.download-club {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: var(--space-8);
  scroll-margin-top: var(--space-20);
}

.download-club__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.download-club__register {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--color-primary-pressed);
  font-weight: var(--font-weight-bold);
}

.download-club__art img {
  width: 100%;
  height: auto;
}

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

  .download-club__art {
    display: none;
  }
}

@media (max-width: 767px) {
  .download-case__intro {
    padding: var(--space-6) var(--space-4);
  }

  .download-case__devices {
    grid-auto-flow: row;
  }

  .page-hero {
    padding: var(--space-8) var(--space-4);
  }

  .download-case,
  .download-club,
  .download-guide,
  .download-connector,
  .download-extension {
    padding: 0 var(--space-4);
  }

  .download-guide__cols {
    grid-template-columns: 1fr;
  }
}