/* 결제 서비스 · 매장 인프라 서브페이지 공통 (van-pg · online-payment · link-payment · pos)
   디자인: PC 1920 · 태블릿 800 · 모바일 375 — 상단 그라데이션 배너, 회색 띠 카드 목록, 섹션 간격 150/100/50 */
.pay-main { padding-bottom: 150px; background: #f5f5f5; }

/* ───── 상단 배너 ───── */
.pay-hero {
  display: flex; align-items: center; height: 300px;
  background: linear-gradient(179.05deg, #6aa1cb 5.08%, #1687f5 95.46%);
}
.pay-hero-inner { width: min(1120px, 100% - 40px); margin-inline: auto; padding-left: 57px; }
.pay-hero-title { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: #fff; font-size: 30px; font-weight: 800; line-height: normal; }
.pay-hero-eyebrow { color: rgba(255, 255, 255, .7); font-size: 20px; font-weight: 600; }

/* ───── 회색 띠 (첫 섹션) ───── */
.pay-band { display: flex; align-items: center; min-height: 650px; padding: 70px 0; background: #f4f6f8; }
.pay-band-inner { width: min(1120px, 100% - 40px); margin-inline: auto; }

/* ───── 본문 섹션 ───── */
.pay-sec { width: min(900px, 100% - 40px); margin: 150px auto 0; }
.pay-sec--wide { width: min(1120px, 100% - 40px); }
.pay-head { margin-bottom: 50px; }

/* 카드 목록 (이미지 카드) — 페이지에서 --pay-n(열 수) · --pay-w(전체 폭) · --pay-gap 지정 */
.pay-cards {
  display: grid; grid-template-columns: repeat(var(--pay-n, 4), minmax(0, 1fr)); gap: var(--pay-gap, 20px);
  width: min(var(--pay-w, 100%), 100%); margin-inline: auto;
}
.pay-cards img, .pay-shot img { width: 100%; height: auto; }

@media (max-width: 1023px) {
  .pay-main { padding-bottom: 100px; }
  .pay-hero { height: 200px; background-image: linear-gradient(178.47deg, #6aa1cb 5.08%, #1687f5 95.46%); }
  .pay-hero-inner { width: min(600px, 100% - 40px); padding-left: 0; }
  .pay-hero-title { gap: 5px; font-size: 25px; }
  .pay-hero-eyebrow { font-size: 15px; }
  .pay-band { min-height: 350px; padding: 50px 0; }
  .pay-band-inner { width: min(600px, 100% - 40px); }
  .pay-sec, .pay-sec--wide { width: min(600px, 100% - 40px); margin-top: 100px; }
  .pay-head { margin-bottom: 30px; }
}
@media (max-width: 767px) {
  .pay-main { padding-bottom: 50px; }
  .pay-hero { height: 127px; background-image: linear-gradient(177.93deg, #6aa1cb 5.08%, #1687f5 95.46%); }
  .pay-hero-inner { width: calc(100% - 40px); text-align: center; }
  .pay-hero-title { align-items: center; font-size: 20px; }
  .pay-hero-eyebrow { font-size: 12px; }
  .pay-band { min-height: 220px; padding: 26px 0; }
  .pay-band-inner { width: calc(100% - 40px); }
  .pay-sec, .pay-sec--wide { width: calc(100% - 40px); margin-top: 50px; }
  .pay-head { margin-bottom: 20px; }
}