/* 홈 배너 — 가격대·테마 슬라이더 / 매물 배너 레일 / 매입 안내 배너.
   배경만 픽셀 이미지이고 시계·문구는 실시간으로 그린다. */

.bn-block { margin: 14px 0; }

/* 원본의 좌우 구도를 유지하고 세로만 1.2배 확장한 홈 전용 프레임. */
.hero-carousel.has-db {
  width: 100%; max-width: none; margin: 0; padding-bottom: 38px;
  background: #fff; border-radius: 0;
}
.hero-carousel.has-db .hero-track,
.hero-carousel.has-db .hero-slide-db.is-campaign,
.hero-carousel.has-db .hero-slide-bg { border-radius: 0; }
.page-home .hero-slide-db.is-campaign {
  display: block; height: auto; min-height: 0; max-height: none; aspect-ratio: 430 / 226.8;
  padding: 0; border: 0; color: inherit; background: transparent;
  overflow: hidden; cursor: pointer; font: inherit; text-align: left; container-type: inline-size;
}
.page-home .hero-slide-db.is-campaign .hero-slide-blur { display: none; }
.page-home .hero-slide-db.is-campaign .hero-slide-bg {
  inset: 0; background-size: 100% 100%; background-position: center; border-radius: 0;
  transform: scale(1); transform-origin: center; will-change: transform;
}
@keyframes heroCampaignZoom {
  from { transform: scale(1); }
  to { transform: scale(1.17); }
}
.page-home .hero-slide-db.is-campaign.is-active .hero-slide-bg {
  animation: heroCampaignZoom 3s cubic-bezier(.2, .64, .32, 1) both;
}
.hero-campaign-copy {
  position: absolute; z-index: 5; left: 5.5%; top: 50%; width: 43%; padding: 0;
  transform: translateY(-50%); box-sizing: border-box; color: #fff; background: none;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif; text-shadow: 0 1px 8px rgba(0, 0, 0, .58);
}
.hero-campaign-copy small, .hero-campaign-copy strong, .hero-campaign-copy em { display: block; font-style: normal; word-break: keep-all; }
.hero-campaign-copy small { margin-bottom: .9cqw; font-size: clamp(12px, 2.7cqw, 18px); font-weight: 500; opacity: .82; }
.hero-campaign-copy strong { font-size: clamp(22px, 5.7cqw, 39px); font-weight: 800; letter-spacing: -.045em; line-height: 1.12; }
.hero-campaign-copy em { margin-top: 1.4cqw; font-size: clamp(12px, 2.6cqw, 17px); font-weight: 400; line-height: 1.35; opacity: .82; }
.hero-campaign-copy.is-light { color: #17221f; background: none; text-shadow: 0 1px 8px rgba(255, 255, 255, .5); }
.hero-campaign-copy.is-right { left: auto; right: 5.5%; }
.hero-campaign-copy.is-top-left { top: 12%; width: 37%; transform: none; }
.hero-campaign-copy.is-compact { width: 34%; padding: 0; }
.hero-slide-db[data-hero-action="wedding"] .hero-campaign-copy {
  left: 5.5%; top: 3%; width: 48%; transform: none;
}
.hero-slide-db[data-hero-action="wedding"] .hero-campaign-copy small { display: none; }
.hero-slide-db[data-hero-action="vintage"] .hero-campaign-copy {
  left: auto; right: calc(5% - 15px); top: 50%; width: 34%; transform: translateY(-50%);
}
.hero-slide-db[data-hero-action="vintage"] .hero-slide-bg { left: 15px; right: -15px; }
.hero-slide-db[data-hero-action="sale"] .hero-slide-bg { left: -20px; right: 0; }
.hero-slide-db[data-hero-action="sale"] .hero-campaign-copy small { font-size: clamp(15.6px, 3.51cqw, 23.4px); }
.hero-slide-db[data-hero-action="sale"] .hero-campaign-copy strong { font-size: clamp(28.6px, 7.41cqw, 50.7px); }
.hero-slide-db[data-hero-action="sale"] .hero-campaign-copy em { font-size: clamp(15.6px, 3.38cqw, 22.1px); }
.page-home .hero-slide-db[data-hero-action="diver"] .hero-slide-bg { left: calc(-10% - 25px); right: 0; background-position: center; }
.hero-slide-db[data-hero-action="diver"] .hero-campaign-copy { left: calc(5.5% + 10px); }
.hero-slide-db[data-hero-action="diver"] .hero-campaign-copy small { font-size: clamp(13.2px, 2.97cqw, 19.8px); }
.hero-slide-db[data-hero-action="diver"] .hero-campaign-copy strong { font-size: clamp(24.2px, 6.27cqw, 42.9px); }
.hero-slide-db[data-hero-action="diver"] .hero-campaign-copy em { font-size: clamp(13.2px, 2.86cqw, 18.7px); }
.page-home .hero-slide-db[data-hero-action="women"] .hero-slide-bg { left: -20px; right: 0; }

/* 이미지 밖 흰 영역 우측에 구구스형 이전·현재/전체·다음 표시를 둔다. */
.hero-dots {
  left: 0; right: 0; bottom: 7px; width: 100%; padding: 0 clamp(12px, 3.5cqw, 24px); box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) 24px 1.2em 1px 1.2em 24px;
  justify-content: end; align-items: center; justify-items: center; column-gap: 7px;
  color: #171917; opacity: 1; text-shadow: none;
}
.hero-progress {
  display: block; justify-self: stretch; height: 2px; margin-inline: 5%;
  overflow: hidden; background: #e2e4e3;
}
.hero-progress i { display: block; width: 0; height: 100%; background: #171917; transition: width .35s ease; }
.hero-count-current,
.hero-count-total,
.hero-count-separator {
  font-size: clamp(12px, 2.55cqw, 15px); font-weight: 700; line-height: 24px;
  font-variant-numeric: tabular-nums;
}
.hero-count-current, .hero-count-total { width: 1.2em; text-align: center; }
.hero-count-total { opacity: .68; }
.hero-count-separator { width: 1px; height: 11px; overflow: hidden; color: transparent; background: #171917; opacity: 1; }
.hero-count-nav {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  padding: 0; border: 0; border-radius: 0; background: none; color: inherit;
  font: inherit; font-size: 22px; font-weight: 400; line-height: 24px; cursor: pointer;
}
.hero-count-nav:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-slide-db.is-campaign.is-active .hero-slide-bg { animation: none; }
}

/* 공통 오버레이·텍스트 */
.bn-fx {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(94deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .40) 44%, rgba(0, 0, 0, .06) 78%);
}
.bn-tx {
  position: absolute; left: 8%; top: 50%; transform: translateY(-50%);
  z-index: 4; width: 60%; color: #fff; text-align: left;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
}
.bn-lead {
  display: block; margin-bottom: 6px; font-size: clamp(11.5px, 2.2vw, 14px); font-weight: 500;
  letter-spacing: -.02em; color: rgba(255, 255, 255, .74);
}
.bn-t {
  display: block; font-size: clamp(20px, 4.4vw, 28px); font-weight: 800; letter-spacing: -.045em;
  line-height: 1.14; word-break: keep-all; text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.bn-sm {
  display: block; margin-top: 6px; font-size: clamp(11px, 2.1vw, 13.5px); font-weight: 400;
  letter-spacing: -.03em; color: rgba(255, 255, 255, .72); text-shadow: none;
}

/* 가격대·테마 슬라이더 */
.bn-slider { position: relative; overflow: hidden; }
.bn-track { display: flex; transition: transform .34s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.bn-cat {
  position: relative; flex: 0 0 100%; width: 100%; aspect-ratio: 430 / 125;
  overflow: hidden; display: block; padding: 0; border: 0; cursor: pointer;
  background-color: #20262b; background-size: cover; background-position: center;
  -webkit-user-select: none; user-select: none; font: inherit;
}
/* 추천매물 3번째 줄 뒤에 들어가는 단독 매물 배너 */
#homeOnSale .home-sale-grid > .bn-block {
  grid-column: 1 / -1; margin: 6px 0 10px; padding: 0;
}
.feat-card {
  position: relative; display: block; flex: 0 0 100%; width: 100%; aspect-ratio: 430 / 189;
  overflow: hidden; scroll-snap-align: start; background-color: #1a2925;
  background-size: cover; background-position: center;
  -webkit-user-select: none; user-select: none; container-type: inline-size;
}
.feat-card, .feat-card * { -webkit-user-drag: none; }
.feat-card .bn-fx {
  background: linear-gradient(96deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .14) 48%, rgba(0, 0, 0, 0) 68%);
}
.feat-card .bn-tx { left: 5.8%; width: 46%; }

/* 누끼 상품을 조명과 낮은 좌대가 있는 전시물처럼 독립시킨다. */
.feat-showcase {
  position: absolute; z-index: 2; inset: 0 1.5% 0 51%; overflow: hidden;
}
.feat-ph {
  position: absolute; left: 50%; bottom: 12%; z-index: 5; width: 72%; height: 78%;
  transform: translateX(-50%); object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 8px 11px rgba(0, 0, 0, .52));
}
.feat-light {
  position: absolute; left: 50%; top: -2%; z-index: 2; width: 78%; height: 82%;
  transform: translateX(-50%); clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
  filter: blur(8px); opacity: .7;
}
.feat-plinth {
  position: absolute; left: 50%; bottom: 5%; z-index: 3; width: 72%; height: 15%;
  transform: translateX(-50%); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(10, 13, 12, .72));
  box-shadow: inset 0 1px rgba(255, 255, 255, .38), 0 10px 18px rgba(0, 0, 0, .3);
}
.feat-gs {
  position: absolute; left: 50%; bottom: 11%; z-index: 4; width: 58%; height: 8%;
  transform: translateX(-50%); border-radius: 50%; filter: blur(5px);
  background: radial-gradient(ellipse, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 72%);
}
/* 누끼가 아닌 사진(JPEG 등)은 둥근 카드로 */
.feat-ph.card {
  left: 50%; bottom: 8%; width: 80%; height: 84%; transform: translateX(-50%); border-radius: 10px;
  background-color: #fff; object-fit: cover; filter: none;
  border: 1px solid rgba(255, 255, 255, .26); box-shadow: 0 10px 26px rgba(0, 0, 0, .46);
}
.feat-br {
  display: block; margin-bottom: 4px; font-size: clamp(10.5px, 2vw, 13px); font-weight: 800;
  letter-spacing: .07em; color: rgba(255, 255, 255, .66); font-family: 'Pretendard', sans-serif;
}
.feat-nm {
  display: block; font-size: clamp(15px, 4.2cqw, 21px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.15; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); overflow: hidden;
}
.feat-nm-line {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feat-ref {
  display: block; margin-top: 5px; font-size: clamp(10.5px, 2.05vw, 13px); font-weight: 400;
  color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feat-sp {
  display: block; margin-top: 7px; font-size: clamp(11.5px, 2.2vw, 14px); font-weight: 500; letter-spacing: -.02em;
  color: rgba(255, 255, 255, .76); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feat-pr {
  display: block; margin-top: 9px; font-size: clamp(22px, 4.3vw, 30px); font-weight: 800; letter-spacing: -.04em;
  line-height: 1; text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.feat-pr i { font-style: normal; font-size: clamp(12px, 2.3vw, 15px); font-weight: 800; margin-left: 2px; opacity: .9; }

/* 매입 안내 배너 */
.bn-buy {
  position: relative; display: block; width: 100%; aspect-ratio: 430 / 125; overflow: hidden;
  background-color: #12211d; background-size: cover; background-position: center; container-type: inline-size;
  border: 0; padding: 0; color: inherit; text-align: inherit; font: inherit; cursor: pointer; appearance: none;
}
.bn-buy .bn-fx { display: none; }
.bn-buy .bn-tx { left: 6.5%; width: 43%; }
.bn-buy .bn-lead { line-height: 1.2; }
.bn-buy .bn-lead { font-size: clamp(11px, 2.35cqw, 15px); }
.bn-buy .bn-t { font-size: clamp(17px, 4.25cqw, 28px); line-height: 1.18; text-shadow: 0 1px 8px rgba(0, 0, 0, .56); }
.bn-buy.is-dark-copy .bn-tx,
.bn-buy.is-dark-copy .bn-lead { color: #20231f; }
.bn-buy.is-dark-copy .bn-t { text-shadow: 0 1px 8px rgba(255, 255, 255, .5); }

/* 가격대 배너에서 컬렉션 필터를 대신 눌러줄 때 필터 화면이 깜빡이지 않게 */
.bn-filter-silent #filterPage { visibility: hidden; }

@media (min-width: 520px) {
  .bn-block { padding: 0 16px; }
  #homeOnSale .home-sale-grid > .bn-block { padding: 0; }
}