/*
 * 상생마켓 홈페이지 — 상점프로그램 다운로드 페이지(download.html) 전용 스타일
 * 소스: 디자인 확정본 03-download-pc.html / 03-download-mobile.html의 <style> 블록 중
 * 이 페이지에서만 쓰는 규칙만 이식했다.
 * 헤더·푸터·버튼·카드·섹션 폭·알약형 탭(.dnav/.dtab)은 main.css를 그대로 재사용한다.
 * 색·라운드·포커스 값은 main.css의 CSS 변수를 참조한다(하드코딩 금지 — policy.css와 같은 컨벤션).
 *
 * ⚠️ 스텝 카드 클래스에 d- 접두를 붙인 이유:
 *   main.css에 이미 .step/.stepn/.stept/.stepd가 있는데(메인 "이용 방법" 가로 4단계 스텝)
 *   확정본 03의 스텝 카드와 정의가 정면으로 다르다(가운데 정렬 vs 2열 그리드).
 *   같은 이름을 쓰면 전역 CSS라 메인 페이지가 깨진다 — 반드시 분리된 이름을 유지할 것.
 *
 * 브레이크포인트는 확정본의 900px 단일이 아니라 main.css 기준(980/620)을 따른다.
 * 헤더·푸터를 네 페이지가 공유하므로 두 기준이 섞이면 그 사이 구간에서
 * 헤더만 모바일이고 본문은 PC인 어정쩡한 화면이 나온다.
 */

/* 본문 컬럼 — 스텝 카드가 와이드 화면에서 지나치게 늘어나지 않도록 제한 */
.col { max-width: 940px }

/* 보조 배지 — "예: .NET 런타임 등" / "문제 발생 시에만" */
.q {
  background: #F6E3CE; color: #9C4711;
  padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: .82em;
}

/* ── 다운로드 ① 기본프로그램 — 큰 카드로 강조 ──
   기획서 §4.10: 3항목의 무게가 다르다. "필수" 배지는 쓰지 않고 크기 차이로만 구분한다. */
.dlmain {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 28px 30px; background: #F4FAF5; border-color: #B9DDBE;
}
.dlmain-l { display: flex; align-items: center; gap: 18px }
.dlmain-icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--color-primary); color: #fff;
  font-size: 19px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none;
}
.dlmain-title { font-size: 19px; font-weight: 800; letter-spacing: -.03em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.dlmain-desc { font-size: 14px; color: #4A524C; line-height: 1.7; margin-top: 5px; max-width: 440px }
.dlmain-btn { flex: none; padding: 15px 30px; font-size: 15.5px }

/* ── 다운로드 ②③ 기타 — 작은 목록 행으로 축소 ── */
.dlsub-label { font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); margin: 14px 2px 8px }
.dlsub {
  display: flex; align-items: center; gap: 16px; padding: 15px 20px;
  border-bottom: 1px solid #EFF2EF; background: #fff;
}
.dlsub:last-child { border-bottom: 0 }
.dlsub.optional { background: #FAFBFA }
.dlsub-title { font-size: 14px; font-weight: 700; letter-spacing: -.02em; flex: none; min-width: 190px }
.dlsub-desc { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.6; flex: 1 }
.dlsub-btn { flex: none; padding: 8px 16px; font-size: 12.5px }

/* ── 시작 안내 스텝 카드 ── */
.dstep { display: grid; grid-template-columns: 34px 1fr; gap: 0 18px; padding: 30px 32px 32px }
.dstepbody { grid-column: 2 }
.dstepn {
  width: 34px; height: 34px; border-radius: 100px; background: var(--color-primary); color: #fff;
  font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 0 0 6px #F5F8F5;
}
.dstept { font-size: 16.5px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 6px }
.dstepd { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.75 }
.dshot {
  grid-column: 2; margin-top: 20px; background: #F2F5F2; border: 1px solid #E7ECE7;
  border-radius: var(--radius-card); padding: 24px; display: flex; justify-content: center;
  transition: background-color .28s ease;
}
.card:hover .dshot { background: #EEF4EF }
.dstepimg {
  width: 100%; max-width: 900px; height: auto; display: block; border-radius: 10px;
  border: 1px solid #E0E6E0; background: #fff; box-shadow: 0 12px 30px rgba(20,40,26,.12);
}

/* 태블릿+폰 — 스텝 카드가 1열로 접히고 다운로드 버튼이 전폭이 된다 */
@media (max-width: 980px) {
  .dstep { grid-template-columns: 1fr; padding: 24px 20px 26px }
  .dstepbody, .dshot { grid-column: 1 }
  .dstepn { margin-bottom: 14px }
  .dshot { padding: 12px; border-radius: 12px }

  .dlmain { padding: 22px 20px }
  .dlmain-l { width: 100% }
  .dlmain-btn { width: 100%; text-align: center; margin-top: 14px }

  .dlsub { flex-wrap: wrap }
  .dlsub-title { width: 100%; min-width: auto }
  .dlsub-btn { width: 100%; text-align: center; margin-top: 2px }
}

/* 폰 폭 — 03-download-mobile.html 확정본 수치로 정밀 대응 */
@media (max-width: 620px) {
  .dlmain { padding: 20px }
  .dlmain-l { gap: 12px }
  .dlmain-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 15px }
  .dlmain-title { font-size: 16px; gap: 6px }
  .dlmain-desc { font-size: 13px; margin-top: 4px }
  .dlmain-btn { padding: 13px; font-size: 14.5px }

  .dlsub-label { font-size: 12px; margin: 14px 2px 6px }
  .dlsub { flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 16px }
  .dlsub-title { font-size: 13.5px }
  .dlsub-desc { font-size: 12px }
  .dlsub-btn { padding: 9px; font-size: 12.5px }

  .dstep { padding: 22px 18px 24px }
  .dstepn { width: 30px; height: 30px; font-size: 14px; margin-bottom: 12px }
  .dstept { font-size: 15px }
  .dstepd { font-size: 13.5px }
  .dshot { margin-top: 16px }
  .dstepimg { border-radius: 8px; box-shadow: 0 8px 20px rgba(20,40,26,.1) }

  /* 시작 안내 탭 — 폰에서는 줄바꿈 대신 가로 스크롤(확정본 모바일 31~33행).
     .dnav는 약관 페이지와 공유하는 클래스라 이 페이지 전용 modifier에만 적용한다. */
  .dnav-x { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none }
  .dnav-x::-webkit-scrollbar { display: none }
  .dnav-x .dtab { flex: none; font-size: 14px; padding: 11px 17px; min-height: 44px }
}