/* 비대면·링크결제 — 공통 틀은 pay-shared.css */
/* 결제 종류 카드 3열: PC 270 · 간격 30 (870) / 태블릿 154.36 · 10.45 (484) / 모바일 105.12 · 10 (335) */
.link-payment-cards { --pay-n: 3; --pay-w: 870px; --pay-gap: 30px; }

/* 진행 순서 (STEP 1~3): PC 이미지 600 왼쪽 · 글 389 오른쪽 · 간격 130 */
.link-payment-steps { display: flex; flex-direction: column; gap: 50px; }
.link-payment-step { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 11.6%; }
.link-payment-step > img { flex: none; width: 53.57%; height: auto; }
.link-payment-step-text { flex: 0 1 389px; display: flex; flex-direction: column; gap: 13px; }
.link-payment-step-no { color: var(--blue); font-size: 20px; font-weight: 700; }
.link-payment-step-title { color: var(--ink); font-size: 30px; font-weight: 700; }
.link-payment-step-desc { color: #4d555e; font-size: 20px; font-weight: 500; }

/* 자동 결제: 배경 이미지 위 왼쪽 글 (PC 1120×317, 글 위치 96/107) */
.link-payment-auto { position: relative; }
.link-payment-auto-bg { width: 100%; height: auto; }
.link-payment-auto-text { position: absolute; left: 8.57%; top: 33.75%; display: flex; flex-direction: column; gap: 20px; color: var(--ink); }
.link-payment-auto-title { font-size: 30px; font-weight: 700; }
.link-payment-auto-desc { font-size: 20px; font-weight: 500; }
@media (min-width: 1024px) and (max-width: 1160px) { .link-payment-auto-text { left: 5.5%; } }

@media (max-width: 1023px) {
  .link-payment-cards { --pay-w: 484px; --pay-gap: 10.45px; }
  .link-payment-steps { gap: 30px; }
  .link-payment-step { gap: 40px; }
  .link-payment-step > img { width: 60.11%; aspect-ratio: 360.67 / 279.17; object-fit: cover; border-radius: 20px; }
  .link-payment-step-text { flex: 1 1 0; gap: 10px; }
  .link-payment-step-no { font-size: 18px; }
  .link-payment-step-title { font-size: 25px; }
  .link-payment-step-desc { font-size: 15px; }
  .link-payment-auto-bg { border-radius: 20px; }
  .link-payment-auto-text { left: 6.57%; top: 10.97%; gap: 10px; }
  .link-payment-auto-title { font-size: 25px; }
  .link-payment-auto-desc { font-size: 18px; }
}
@media (max-width: 767px) {
  .link-payment-band { min-height: 210px; }
  .link-payment-band .pay-head { margin-bottom: 15px; }
  .link-payment-cards { --pay-w: 100%; --pay-gap: 10px; }
  .link-payment-step { flex-direction: column; align-items: stretch; gap: 15px; }
  .link-payment-step > img { width: 100%; aspect-ratio: auto; border-radius: 0; }
  .link-payment-step-text { flex: none; gap: 5px; }
  .link-payment-step-no { font-size: 12px; }
  .link-payment-step-title { font-size: 15px; }
  .link-payment-step-desc { font-size: 12px; }
  .link-payment-auto-bg { border-radius: 0; }
  .link-payment-auto-text { left: 6.87%; top: 10.63%; gap: 5px; }
  .link-payment-auto-title { font-size: 15px; }
  .link-payment-auto-desc { font-size: 12px; }
}