/* 전자결제서비스 — 공통 틀은 pay-shared.css
   결제 수단 탭: 버튼 클릭 시 아래 이미지 변경 (템플릿 1:5144, 공통 data-tabs) */
.online-payment-hero .pay-hero-eyebrow { line-height: 28px; letter-spacing: -0.4px; }
@media (min-width: 1024px) { .online-payment-first { margin-top: 100px; } }

.online-payment-tablist { display: flex; justify-content: center; gap: 1px; margin-bottom: 50px; }
.online-payment-tablist [role="tab"] {
  display: flex; align-items: center; justify-content: center; width: 140px; height: 60px; padding: 10px; border-radius: 100px;
  background: #fff; color: var(--ink); font-size: 20px; font-weight: 700; white-space: nowrap;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.online-payment-tablist [role="tab"]:hover { background: #e9eef4; }
.online-payment-tablist [role="tab"][aria-selected="true"] { background: var(--blue); color: #fff; }
.online-payment-panel { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 3062 / 1646; }
.online-payment-panel img { width: 100%; height: auto; }

@media (max-width: 1023px) {
  .online-payment-hero .pay-hero-eyebrow { line-height: normal; letter-spacing: 0; }
  .online-payment-tablist { gap: .67px; margin-bottom: 33.33px; }
  /* 디자인 글자 10px 은 너무 작아 14px 로 키움 (버튼 크기는 디자인 그대로) */
  .online-payment-tablist [role="tab"] { width: 93.33px; height: 40px; padding: 6.67px; font-size: 14px; }
}
@media (max-width: 767px) {
  .online-payment-tablist { gap: .48px; margin-bottom: 20px; }
  /* 디자인 글자 4.76px 은 읽을 수 없어 12px 로 키움 · 좁은 화면에서는 버튼 폭이 줄어듦 */
  .online-payment-tablist [role="tab"] { flex: 0 1 66.62px; width: auto; min-width: 0; height: 28.55px; padding: 4px; font-size: 12px; }
  /* 모바일 디자인: 이미지 가장자리 여백을 잘라 확대 (117.36%) */
  .online-payment-panel { border-radius: 10px; }
  .online-payment-panel img { position: absolute; left: -8.68%; top: -8.68%; width: 117.36%; max-width: none; height: 117.36%; }
}