/* 협회 메인 배너의 원본 배경과 상단 메뉴 / 하단 상품권 구성을 재사용합니다. */
.purchase-banner {
  color: var(--white);
  background: var(--navy) url('../assets/koreagift-20261030/installment-banner.png') center / cover no-repeat;
  scroll-margin-top: 0;
}
.purchase-banner__inner {
  min-height: 540px;
  padding-block: 48px 38px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.purchase-banner h2 { font-size: 36px; line-height: 1.4; font-weight: 700; }
.purchase-banner__intro > p { margin-top: 8px; font-size: 16px; line-height: 1.8; }
.purchase-banner__nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.purchase-banner__nav a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 10px 17px;
  background: color-mix(in srgb, var(--white) 14%, transparent);
  border: 1px solid var(--white-line);
  border-radius: 4px;
  backdrop-filter: blur(10px);
  font-size: 14px;
  line-height: 1.5;
  transition: background var(--transition), color var(--transition);
}
.purchase-banner__nav a:hover { color: var(--ink); background: var(--white); }
.purchase-banner__nav .banner-chat { background: var(--white); color: var(--ink); font-weight: 700; gap: 9px; }
.purchase-banner__nav .banner-chat:hover { background: var(--box-bg); color: var(--po-deep); }
.purchase-banner__nav .icon { width: 18px; height: 18px; }
.purchase-banner__products { width: min(650px, 56%); margin-left: auto; margin-top: auto; }
.purchase-banner__cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.purchase-banner__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 212px;
  padding: 22px;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: background var(--transition),color var(--transition);
}
.purchase-banner__card > img { width: 62px; height: 45px; object-fit: contain; object-position: left center; margin-bottom: 42px; }
.purchase-banner__card > span { display: block; margin-top: auto; }
.purchase-banner__card strong { display: block; font-size: 20px; font-weight: 700; line-height: 1.55; letter-spacing: -.04em; }
.purchase-banner__card small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.7; color: var(--ink-2); }
.purchase-banner__card > .icon {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 10px;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--white);
}
.purchase-banner__card > .icon use { transform: rotate(-45deg); transform-origin: 12px 12px; }
.purchase-banner__card:hover { color: var(--white); background: var(--po-deep); }
.purchase-banner__card:hover small { color: var(--white); }
.purchase-banner__card:hover > .icon { color: var(--po-deep); background: var(--white); }
.purchase-banner__note { margin-top: 12px; font-size: 11px; line-height: 1.8; color: var(--white-muted); text-align: right; }
.purchase-banner a:focus-visible { outline-color: var(--hero-accent); }
@media (max-width: 1180px) {
  .purchase-banner__products { width: 60%; }
  .purchase-banner__card { padding: 20px; }
  .purchase-banner__card strong { font-size: 18px; }
}
@media (max-width: 900px) {
  .purchase-banner__inner { min-height: 530px; gap: 64px; padding-block: 40px 32px; }
  .purchase-banner h2 { font-size: 31px; }
  .purchase-banner__intro > p { font-size: 14px; }
  .purchase-banner__nav { gap: 8px; margin-top: 22px; }
  .purchase-banner__nav a { font-size: 12px; padding-inline: 13px; }
  .purchase-banner__products { width: 73%; }
  .purchase-banner__card strong { font-size: 17px; }
}
@media (max-width: 600px) {
  .purchase-banner { background-position: 43% center; }
  .purchase-banner__inner { min-height: auto; padding-block: 34px 28px; gap: 76px; }
  .purchase-banner h2 { font-size: 27px; letter-spacing: -.045em; }
  .purchase-banner__intro > p { font-size: 13px; line-height: 1.9; max-width: 340px; margin-top: 10px; }
  .purchase-banner__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
  .purchase-banner__nav a { padding: 10px 8px; font-size: 12px; min-height: 46px; }
  .purchase-banner__nav a:nth-child(3) { grid-column: 1 / -1; }
  .purchase-banner__products { width: 100%; }
  .purchase-banner__cards { gap: 10px; }
  .purchase-banner__card { min-height: 184px; padding: 16px 12px; }
  .purchase-banner__card > img { width: 52px; height: 40px; margin-bottom: 46px; }
  .purchase-banner__card > .icon { width: 32px; height: 32px; padding: 7px; top: 13px; right: 11px; border-radius: 6px; }
  .purchase-banner__card strong { font-size: 14px; letter-spacing: -.05em; }
  .purchase-banner__card small { font-size: 10px; letter-spacing: -.02em; margin-top: 5px; }
  .purchase-banner__note { text-align: left; font-size: 10px; }
}
@media (max-width: 360px) {
  .purchase-banner h2 { font-size: 25px; }
  .purchase-banner__card strong { font-size: 13px; }
  .purchase-banner__card small { font-size: 9px; }
}