/* ---- 02-Home (page-specific, Figma node 2184:5337) ----
   이 화면에 1번만 쓰이는 섹션(배너/제로핫딜 스트립)과 섹션 레이아웃 래퍼는
   component.css가 아니라 여기 둔다 (컴포넌트 분리 기준 2026-08-19).
   카드 상품 이미지는 card.html과 동일한 관례로 회색 placeholder 처리. */

.page-home__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* TopBar(60px)/Navbar(95px) 고정에 가려지지 않도록 여백 확보 (common.css 참고) */
  padding: calc(60px + 16px) 16px calc(95px + 32px);
}

/* promo-timer-row 아래(26px) → banner → strip(20px) → strip 아래(26px) → home-categories 순서.
   쌍마다 gap 값이 달라 flex gap 대신 margin-top으로 개별 지정 */
.home-highlights {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.home-highlights>.promo-banner {
  margin-top: 26px;
}

.home-highlights>.promo-strip {
  margin-top: 12px;
}

.home-highlights>.home-categories {
  margin-top: 26px;
}

.home-categories {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* Promo Banner — 이 화면 전용, 1회성이라 컴포넌트로 안 뺌 */
/* 관리자페이지에서 이미지 업로드로 반영되는 영역이라 배너 자체는 이미지 처리만 하고,
   카운터("1/8")만 실제로 퍼블리싱 */
.promo-banner {
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: 4px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}

.promo-banner__track {
  display: flex;
  height: 100%;
  transition: transform 0.35s ease;
  will-change: transform;
}

.promo-banner__image {
  display: block;
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
  /* object-fit: cover; */
  user-select: none;
  -webkit-user-drag: none;
}

.promo-banner__counter {
  position: absolute;
  right: 12px;
  bottom: 12px;

  padding: 4px 8px;
  border-radius: 12px;

  background: rgba(0, 0, 0, 0.5);
  color: #fff;

  z-index: 2;
}

/* Promo Strip("제로핫딜") — 이 화면 전용, 1회성 */
.promo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 20px 24px;
  border-radius: 4px;
  background: var(--color-yellow-100);
}

.promo-strip__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.promo-strip__title {
  color: var(--color-black-100);
}

.promo-strip__desc {
  color: var(--color-gray-700);
}

.promo-strip__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 11px;
  color: var(--color-gray-1000);
  white-space: nowrap;
}

/* 섹션 공용 헤더(최근 본 숙소 / 찜한 숙소 / 지역별 Best) */
.home-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.home-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.home-section__title {
  color: var(--color-black-100);
}

.home-section__link {
  color: var(--color-gray-1000);
}

/* 최근 본 숙소 — 스크롤이 아니라 드래그로 넘기는 슬라이드(js/common.js [data-slide-track] 공통 핸들러) */
.home-recent__scroll {
  overflow: hidden;
  width: 100%;
}

.home-recent__track {
  display: flex;
  gap: 12px;
  cursor: grab;
  user-select: none;
  transition: transform 0.25s ease;
}

.home-recent__track .card--full {
  flex-shrink: 0;
}

/* 찜한 숙소 — 한 줄, 카드가 넘치면 드래그로 넘기는 슬라이드(js/common.js [data-slide-track] 공통 핸들러 재사용) */
.home-wishlist__scroll {
  overflow: hidden;
  width: 100%;
}

.home-wishlist__track {
  display: flex;
  gap: 12px;
  cursor: grab;
  user-select: none;
  transition: transform 0.25s ease;
}

.home-wishlist__track .card--small {
  flex-shrink: 0;
  width: 165px;
}

/* 지역별 Best — 탭도 가로 스크롤, 랭킹 리스트는 card__* 서브요소 재사용 */
.home-ranking__tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  width: 100%;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.home-ranking__tabs::-webkit-scrollbar {
  display: none;
}

.home-ranking__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.ranking-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.ranking-item__rank {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  flex-shrink: 0;
  background: var(--color-orange-500);
  color: var(--color-white-100);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.ranking-item__thumb {
  width: 78px;
  height: 78px;
  border-radius: 2px;
  background: var(--color-gray-200);
  flex-shrink: 0;
  align-self: center;
}

.ranking-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: center;
}

.ranking-divider {
  height: 1px;
  background: var(--color-gray-200);
  width: 100%;
}

/* TopBar 알림 아이콘 unread 표시 — 이 화면 전용 상태(Icon/Notification-on/24) */
.topbar__icon-btn {
  position: relative;
}

.topbar__notif-dot {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-red-500);
  border: 1.5px solid var(--color-white-100);
}

/* 골드등급 배너 — 이 화면 전용, 1회성 */
.gold-tier-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 87px;
  padding: 16px 16px 16px 80px;
  border-radius: 4px;
  background: var(--color-accent);
  overflow: hidden;
}

.gold-tier-banner__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 82px;
  height: 87px;
}

.gold-tier-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gold-tier-banner__title {
  color: var(--color-white-100);
}

.gold-tier-banner__desc {
  color: var(--color-white-a75);
}

.gold-tier-banner__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 11px;
  color: var(--color-yellow-100);
  white-space: nowrap;
}

.promo-timer__zero-coupon::before {
    animation: none !important;

    background: conic-gradient(
        #033744 0deg var(--promo-ring-target),
        #e5e5e5 var(--promo-ring-target) 360deg
    );
}