/*
 * 메인(카드 영역) 전용 스타일 — W7 레인 A (design-system §2-13 카드 배너·§3 섹션 간격, 시안 mockup/web/index.html · web/m/index.html).
 * 화면 전용이라 bp-components.css 에 넣지 않고 메인 JSP 가 pageHead 로만 불러온다. 값은 토큰(bp-tokens.css)을 쓰고, 시안 치수(1920 캔버스 × 0.748 = PC 1440 화면 px)는 주석에 근거를 적는다.
 * 기기 차이는 서버가 PC/MO JSP 를 나눠 고르고, 같은 클래스의 기기별 값은 [data-device] 로 분기한다(폭 미디어쿼리 없음).
 */

/* ── 히어로(정적 1장) ─────────────────────────────────────────── */
.r1home__hero { margin: 0; background: var(--bp-color-bg-band); }
.r1home__hero-title { margin: 0; font-size: inherit; line-height: 0; }   /* h1 안의 이미지 — 이름은 alt */
.r1home__hero-img { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 500; object-fit: cover; }
[data-device="mo"] .r1home__hero-img { aspect-ratio: 678 / 500; }

/* ── 분홍 블록 + 카드 ─────────────────────────────────────────── */
/* PC: 히어로↔분홍 블록 67, 분홍 블록 폭 1356(--bp-w-wide), 안쪽 패널 폭 1128(--bp-w-panel) = 좌우 여백 114 */
.r1home__band {
  width: calc(100% - 2 * var(--bp-space-6));
  max-width: var(--bp-w-wide);
  margin: 67px auto var(--bp-space-9);
  padding: 114px clamp(var(--bp-space-5), 8.4%, 114px);
  background: var(--bp-color-bg-band);
  border-radius: var(--bp-radius-xl);
}
.r1home__card {
  padding: 46px 57px 71px;
  background: var(--bp-color-bg-card-warm);
  border-radius: 18px;
  box-shadow: var(--bp-shadow-card);
}
.r1home__head { display: flex; align-items: center; gap: 10px; margin-left: -23px; }
.r1home__head-icon { flex: none; width: 40px; height: 43px; }
.r1home__title { margin: 0; font-size: var(--bp-fs-title); letter-spacing: -0.04em; color: var(--bp-color-brand-deep); }
.r1home__banners { display: flex; align-items: center; justify-content: space-between; margin-top: 64px; }
.r1home__banner {
  position: relative;
  display: block;
  flex: 0 1 450px;
  min-width: 0;
  border-radius: 21px;
  overflow: hidden;
  transition: transform var(--bp-dur-base) ease;
}
.r1home__banner img { display: block; width: 100%; height: auto; aspect-ratio: 601 / 295; }
.r1home__divider { flex: none; align-self: center; width: 4.5px; height: 174px; border-radius: 3px; background: var(--bp-color-border-soft); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .r1home__banner:hover { z-index: 1; transform: scale(1.25); }   /* design-system §2-13: 두 카드 배너만 hover 125% */
}
.r1home__banner:focus-visible { z-index: 1; }

/* ── 카드사 바로가기 · 첫만남이용권 ────────────────────────────── */
.r1home__extra { display: grid; justify-items: center; gap: var(--bp-space-3); margin-top: var(--bp-space-6); text-align: center; }
.r1home__issuers { display: grid; justify-items: center; gap: var(--bp-space-3); }
.r1home__issuers-title { font-size: var(--bp-fs-body); font-weight: var(--bp-fw-medium); color: var(--bp-color-text-muted); }
.r1home__issuer-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bp-space-2); margin: 0; padding: 0; list-style: none; }
.r1home__issuer {
  display: inline-flex; align-items: center; gap: var(--bp-space-2);
  min-height: var(--bp-touch-min); padding: 0 var(--bp-space-5);
  font-size: var(--bp-fs-body); font-weight: var(--bp-fw-medium); color: var(--bp-color-text-strong);
  background: var(--bp-color-bg-surface); border: 1px solid var(--bp-color-border-soft); border-radius: var(--bp-radius-pill);
}
.r1home__issuer::before { content: ""; width: 10px; height: 10px; border-radius: var(--bp-radius-circle); background: var(--bp-color-brand); }
.r1home__issuer[data-card="lotte"]::before { background: var(--bp-card-lotte); }
.r1home__issuer[data-card="samsung"]::before { background: var(--bp-card-samsung); }
.r1home__issuer[data-card="kb"]::before { background: var(--bp-card-kb); }
.r1home__issuer[data-card="shinhan"]::before { background: var(--bp-card-shinhan); }
.r1home__issuer[data-card="ibk"]::before { background: var(--bp-card-ibk); }
.r1home__issuer[data-card="nh"]::before { background: var(--bp-card-nh); }
.r1home__issuer:hover { background: var(--bp-color-brand-soft); }
.r1home__empty { margin: 0; color: var(--bp-color-text-muted); }
.r1home__more { margin: 0; }
.r1home__more-link { display: inline-flex; align-items: center; min-height: var(--bp-touch-min); color: var(--bp-color-brand-text); text-decoration: underline; text-underline-offset: 3px; }

/* ── 카드 영역이 닫힌 경우(HOME_CARD 닫힘) ─────────────────────── */
.r1home__closed { display: grid; justify-items: center; gap: var(--bp-space-3); padding-block: var(--bp-space-9); text-align: center; }

/* ── MO ────────────────────────────────────────────────────────
   시안(414 폭): 분홍 블록 좌우 18·위 44·안쪽 15, 반경 26, 제목 20 굵게 + 아이콘 31×34, 흰 패널 반경 18, 배너 148×197 두 장(390 폭에서는 140 까지 줄어 사이가 벌어진다) + 가운데 세로선 1.5 */
[data-device="mo"] .r1home__band {
  width: auto; max-width: none;
  margin: 44px 18px var(--bp-space-8);
  padding: 40px 15px 24px;
  border-radius: 26px;
}
[data-device="mo"] .r1home__title { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 20px; letter-spacing: -0.075em; }
[data-device="mo"] .r1home__head-icon { width: 31px; height: 34px; }
[data-device="mo"] .r1home__card { margin-top: 12px; padding: 24px 12px; border-radius: 18px; box-shadow: var(--bp-shadow-card); }
[data-device="mo"] .r1home__banners { margin-top: 0; }
[data-device="mo"] .r1home__banner { flex: 0 1 140px; border-radius: 8px; }
[data-device="mo"] .r1home__banner img { aspect-ratio: 400 / 533; }
[data-device="mo"] .r1home__divider { margin-inline: 6px; width: 1.5px; height: 163px; border-radius: 0; background: var(--bp-color-border-soft); }
[data-device="mo"] .r1home__extra { margin-top: var(--bp-space-5); }
[data-device="mo"] .r1home__more-link { font-size: var(--bp-fs-body); }