/* 홈 (/) — Figma PC 1:441 · 태블릿 1:363 · 모바일 1:294 */

/* ───────── 히어로 슬라이드 (promo template 1:5727 — 3초마다 전환, ease-out 800ms, 점 클릭 시 해당 화면) ───────── */
.home-hero { position: relative; }
.home-hero-slider { position: relative; height: calc(100vw * 1135 / 1920); overflow: hidden; background: #4b4b4b; } /* 시안 비율 그대로 (폭이 바뀌어도 사진이 확대·잘림 없이) */
.home-slides { display: grid; height: 100%; }
.home-slide {
  grid-area: 1 / 1; display: flex; align-items: center; height: 100%;
  position: relative; background: #4b4b4b;
  opacity: 0; visibility: hidden; transition: opacity .8s var(--ease-out), visibility 0s linear .8s;
}
.home-slide-bg, .home-slide-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-slide-bg img { object-fit: cover; object-position: center; }

.home-slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s var(--ease-out), visibility 0s; }
.home-slide-inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: calc(100vw * 50 / 1920); padding-left: calc(100vw * 260 / 1920); }
.home-slide-title { color: #fff; font-size: max(32px, 100vw * 60 / 1920); font-weight: 800; line-height: normal; }
.home-slide--dark .home-slide-title { color: #31373f; }
.home-slide-btn { width: max(100px, 100vw * 140 / 1920); height: max(38px, 100vw * 55 / 1920); font-size: max(15px, 100vw * 22 / 1920); font-weight: 600; }
.home-dots { position: absolute; left: 50%; bottom: 59px; display: flex; gap: 28px; transform: translateX(-50%); }
.home-dot { width: 18px; height: 17px; border-radius: 50%; background: #d9d9d9; transition: background-color .3s var(--ease-out); }
.home-dot.is-active { background: #2e2e27; }

/* ───────── 섹션 공통 ───────── */
.home-sec { padding-top: 150px; }
.home-faq { padding-bottom: 150px; }
.home-pay { padding-top: 100px; }
.home-title-43 { line-height: 43px; }
.home-faq .faq-list { margin-top: 50px; }

/* ───────── 1. 나에게 필요한 결제 서비스 ───────── */
.home-pay-list { display: flex; flex-direction: column; gap: 40px; margin-top: 50px; }
.home-pay-row { display: flex; align-items: center; justify-content: flex-end; gap: 150px; }
.home-pay-row.is-rev { flex-direction: row-reverse; }
.home-pay-text { flex: none; display: flex; flex-direction: column; gap: 13px; width: 351px; }
.home-pay-label { color: var(--blue); font-size: 20px; font-weight: 700; }
.home-pay-title { color: var(--ink); font-size: 30px; font-weight: 700; line-height: normal; }
.home-pay-sub { color: #4d555e; font-size: 18px; font-weight: 500; }
.home-pay-img { flex: none; width: 500px; aspect-ratio: 4 / 3; border-radius: 20px; object-fit: cover; }

/* ───────── 2. 온라인 결제와 현장 결제 ───────── */
.home-env-img { width: 940px; max-width: 100%; margin: 50px auto 0; }

/* ───────── 3·5. 장비 카드 ───────── */
.home-cards { display: flex; justify-content: center; gap: 18px; margin-top: 50px; }
.home-cards > li { flex: none; width: 360px; }
.home-card { position: relative; display: block; border-radius: 20px; }
.home-card img { width: 100%; }
.home-card-text {
  position: absolute; left: 0; right: 0; bottom: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; text-align: center; white-space: nowrap;
}
.home-card-title { font-size: 30px; font-weight: 700; line-height: normal; }
.home-card-more { font-size: 20px; font-weight: 500; }
.home-card:hover .home-card-more, .home-card:focus-visible .home-card-more { text-decoration: underline; text-underline-offset: 3px; }

/* ───────── 4. 배너 — 고객 요청으로 화면 전체 폭 띠 (배경 = 배너 이미지 바탕색 #f4f6f8) ───────── */
.home-band { margin-top: 150px; background: #f4f6f8; border-block: 1px solid rgba(0, 0, 0, .06); }
.home-band-box { position: relative; height: 530px; }
.home-band-text { position: absolute; left: 90px; top: 50%; display: flex; flex-direction: column; gap: 20px; color: var(--ink); transform: translateY(-50%); }
.home-band-title { font-size: 30px; font-weight: 700; line-height: normal; white-space: nowrap; }
.home-band-desc { font-size: 20px; font-weight: 500; }
.home-band-img { position: absolute; right: 68px; top: 65px; width: 604px; height: auto; }

/* ───────── 5. 업종별 베스트 조합 (탭) ───────── */
.home-tablist { display: flex; justify-content: center; margin-top: 50px; }
.home-tab {
  flex: none; display: flex; align-items: center; justify-content: center; width: 140px; height: 60px; 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);
}
.home-tab.is-wide { width: 160px; }
.home-tab[aria-selected="true"] { background: var(--blue); color: #fff; }
.home-tab[aria-selected="false"]:hover { color: var(--blue); }

/* ───────── PC 좁은 폭 (1024~1160) ───────── */
@media (min-width: 1024px) and (max-width: 1160px) {
  .home-pay-row { gap: 90px; }
  .home-cards { gap: 14px; }
  .home-cards > li { width: calc((100% - 28px) / 3); }
  .home-band-text { left: 40px; }
  .home-band-img { width: calc(100% - 420px); top: 50%; transform: translateY(-50%); }
}

/* ───────── 태블릿 (디자인 800) ───────── */
@media (max-width: 1023px) {
  .home-hero-slider { height: calc(100vw * 473 / 800); }
  .home-slide-inner { gap: calc(100vw * 20 / 800); padding-left: calc(100vw * 97 / 800); }
  .home-slide-title { font-size: calc(100vw * 30 / 800); }
  .home-slide-btn { width: calc(100vw * 100 / 800); height: calc(100vw * 35 / 800); font-size: calc(100vw * 15 / 800); }
  .home-dots { bottom: 36px; gap: 18px; }
  .home-dot { width: 11.4px; height: 10.94px; }

  .home-sec { padding-top: 100px; }
  .home-faq { padding-bottom: 100px; }
  .home-pay { padding-top: 100px; }
  .home-title-43 { line-height: normal; }
  .home-sec > .wrap { width: min(600px, 100% - 40px); }

  /* 태블릿·모바일 디자인에는 이 섹션 제목이 없음 → 화면에서만 숨김 (문서 구조용으로 유지) */
  .home-pay .sec-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .home-pay-list { gap: 50px; margin-top: 0; }
  .home-pay-row, .home-pay-row.is-rev { justify-content: space-between; gap: 40px; }
  .home-pay-text { gap: 10px; width: 200px; }
  .home-pay-label { font-size: 18px; }
  .home-pay-title { font-size: 25px; }
  .home-pay-sub { font-size: 15px; }
  .home-pay-img { flex: 1 1 auto; width: auto; min-width: 0; max-width: 360.67px; aspect-ratio: 360.67 / 279.17; }

  .home-env-desc { font-size: 15px; }
  .home-env-img { margin-top: 30px; }

  .home-cards { gap: 18px; margin-top: 30px; padding-block: 3.36px; }
  .home-cards > li { width: calc((100% - 36px) / 3); max-width: 188px; }
  .home-card { border-radius: 10px; }
  .home-card-text { bottom: 20.9px; gap: 5.23px; }
  .home-card-title { font-size: 15px; }
  .home-card-more { font-size: 10px; }

  .home-band { margin-top: 100px; }
  .home-band-box { width: min(600px, 100% - 40px); height: auto; aspect-ratio: 600 / 370; }
  .home-band-text { left: 39.39px; top: 40.61px; gap: 10px; transform: none; }
  .home-band-title { font-size: 25px; }
  .home-band-desc { font-size: 20px; }
  .home-band-img { left: 12.222%; right: auto; top: auto; bottom: 0; width: 75.5%; }

  .home-tablist { margin-top: 30px; }
  .home-tab { width: 93.33px; height: 40px; border-radius: 66.67px; font-size: 13.33px; } /* 인스턴스 축소 비율(2/3) 반영 — 화면상 크기 */
  .home-tab.is-wide { width: 106.67px; }
  .home-best .home-cards { margin-top: 30px; }

  .home-faq .faq-list { margin-top: 30px; }
}

/* ───────── 모바일 (디자인 375) ───────── */
@media (max-width: 767px) {
  .home-hero-slider { height: calc(100vw * 600 / 375); }
  .home-slide { align-items: center; padding: calc(100vw * 387 / 375) 0 calc(100vw * 98 / 375); }
  .home-slide-inner { gap: calc(100vw * 20 / 375); padding-left: calc(100vw * 40 / 375); padding-right: 20px; }
  .home-slide-btn { width: calc(100vw * 90 / 375); height: calc(100vw * 35 / 375); font-size: calc(100vw * 15 / 375); }
  .home-slide-title { font-size: calc(100vw * 25 / 375); }
  .home-dots { bottom: 39px; }

  .home-sec { padding-top: 50px; }
  .home-faq { padding-bottom: 50px; }
  .home-pay { padding-top: 50px; }
  .home-sec > .wrap { width: min(335px, 100% - 40px); }

  .home-pay-list { gap: 30px; }
  .home-pay-row, .home-pay-row.is-rev { flex-direction: column; align-items: stretch; gap: 15px; }
  .home-pay-text { gap: 5px; width: 100%; }
  .home-pay-label { font-size: 12px; }
  .home-pay-title { font-size: 15px; }
  .home-pay-sub { font-size: 12px; }
  .home-pay-img { width: 100%; max-width: none; aspect-ratio: 4 / 3; }

  .home-env-desc { margin-top: 5px; font-size: 12px; }
  .home-env-img { margin-top: 20px; }

  .home-cards { gap: 5px; margin-top: 20px; padding-block: 0; }
  .home-cards > li { width: calc((100% - 10px) / 3); max-width: 108px; }
  .home-card { border-radius: 6px; }
  .home-card-text { bottom: 12.04px; gap: 3.01px; }
  .home-card-title { font-size: 8.64px; }
  .home-card-more { font-size: 5.76px; }

  .home-band { margin-top: 50px; }
  .home-band-box { width: min(335px, 100% - 40px); height: 206.89px; aspect-ratio: auto; } /* 320 폭에서도 문구와 기기가 겹치지 않게 높이 고정 */
  .home-band-text { left: 23px; top: 22px; gap: 5px; }
  .home-band-title { font-size: 15px; }
  .home-band-desc { font-size: 12px; }

  .home-tablist { margin-top: 20px; }
  .home-tab { width: 65px; height: 29px; border-radius: 47.59px; font-size: 9.52px; } /* 인스턴스 축소 비율 반영 — 화면상 크기 */
  .home-tab.is-wide { width: 75px; }
  .home-tab { flex: 0 1 auto; min-width: 0; } /* 320 폭에서 줄어들도록 */
  .home-best .home-cards { margin-top: 20px; }

  .home-faq .faq-list { margin-top: 20px; }
}