/* RNDBOX 홈 (리뉴얼) — 토큰은 rb.css */

/* ---------- 히어로 배너 ---------- */
.hm-hero { padding-top: 2.4rem; }
.hm-hero__swiper {
    position: relative; isolation: isolate;
    border-radius: var(--rb-radius-xl); overflow: hidden;
    background: var(--rb-night);
}
.hm-hero__slide { display: block; aspect-ratio: 1280 / 420; }
.hm-hero__slide picture, .hm-hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-hero__ui {
    position: absolute; right: 2rem; bottom: 2rem; z-index: 2;
    display: flex; align-items: center; gap: .2rem; padding: .4rem;
    border-radius: 999px; background: rgba(14, 10, 24, .55); color: #fff;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hm-hero__ui[hidden] { display: none; }
.hm-hero__ui button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.2rem; height: 3.2rem; padding: 0; border: 0; border-radius: 999px;
    background: transparent; color: #fff; cursor: pointer; transition: background-color .2s;
}
.hm-hero__ui button:hover { background: rgba(255, 255, 255, .16); }
.hm-hero__ui svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hm-hero__ui .hm-ico-play { fill: currentColor; stroke-width: 1.4; }
.hm-hero__pause .hm-ico-play, .hm-hero__pause[aria-pressed="true"] .hm-ico-pause { display: none; }
.hm-hero__pause[aria-pressed="true"] .hm-ico-play { display: block; }
.hm-hero .hm-hero__count {
    position: static; width: auto; min-width: 5.2rem; padding: 0 .4rem;
    font: 700 1.3rem/1 var(--rb-font-display); font-variant-numeric: tabular-nums; letter-spacing: .04em;
    text-align: center; color: rgba(255, 255, 255, .72);
}
.hm-hero .hm-hero__count .swiper-pagination-current { color: #fff; }
.hm-hero .swiper-button-disabled { opacity: .35; }

/* ---------- 공지 ---------- */
.hm-notice { margin-top: 1.6rem; }
.hm-notice__box {
    display: flex; align-items: center; gap: 1.2rem; height: 5.2rem; padding: 0 .6rem 0 1.8rem;
    border: 1px solid var(--rb-line); border-radius: 999px; background: #fff;
}
.hm-notice__label { display: inline-flex; align-items: center; gap: .6rem; flex: none; font-size: 1.4rem; font-weight: 700; color: var(--rb-violet); }
.hm-notice__label svg { width: 2rem; height: 2rem; }
.hm-notice__list { flex: 1; min-width: 0; height: 2.4rem; margin: 0; overflow: hidden; }
.hm-notice__list .swiper-slide {
    display: block; height: 2.4rem; line-height: 2.4rem; font-size: 1.45rem; color: var(--rb-ink-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-notice__list .swiper-slide:hover { color: var(--rb-ink); text-decoration: underline; text-underline-offset: 3px; }
.hm-notice__more {
    display: inline-flex; align-items: center; flex: none; height: 4rem; padding: 0 1.6rem;
    border-radius: 999px; font-size: 1.35rem; font-weight: 600; color: var(--rb-ink-3);
}
.hm-notice__more:hover { background: var(--rb-bg-2); color: var(--rb-ink); }

/* ---------- 박스 그리드 ---------- */
.hm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.6rem 2.4rem; margin: 0; padding: 0; list-style: none; }
.hm-card { display: flex; flex-direction: column; gap: 1.6rem; height: 100%; color: inherit; }
.hm-card:hover { color: inherit; }
.hm-card__media {
    position: relative; aspect-ratio: 1; overflow: hidden;
    border-radius: var(--rb-radius-lg); background: var(--rb-bg-2); box-shadow: var(--rb-shadow-1);
    transition: transform .35s var(--rb-ease), box-shadow .35s var(--rb-ease);
}
.hm-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--rb-ease); }
.hm-card:hover .hm-card__media { transform: translateY(-4px); box-shadow: var(--rb-shadow-2); }
.hm-card:hover .hm-card__media img { transform: scale(1.035); }
.hm-card__badges { position: absolute; left: 1.2rem; top: 1.2rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.hm-card__name { margin: 0; font: 700 1.7rem/1.35 var(--rb-font-display); letter-spacing: -.01em; color: var(--rb-ink); }
.hm-card__sub {
    margin: .4rem 0 0; font-size: 1.35rem; line-height: 1.5; color: var(--rb-ink-3);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-card__price { margin: 1rem 0 0; font: 800 2rem/1 var(--rb-font-display); letter-spacing: -.01em; color: var(--rb-ink); font-variant-numeric: tabular-nums; }
.hm-card__price small { margin-left: .1rem; font-size: 1.5rem; font-weight: 700; }

/* ---------- 베스트 후기 ---------- */
.hm-reviews__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.hm-reviews__list > li { min-width: 0; }
.hm-review {
    display: flex; flex-direction: column; height: 100%; padding: 1.4rem 1.4rem 1.6rem;
    border-radius: var(--rb-radius-lg); background: #fff; box-shadow: var(--rb-shadow-1);
    cursor: pointer; transition: transform .25s var(--rb-ease), box-shadow .25s var(--rb-ease);
}
.hm-review:hover { transform: translateY(-3px); box-shadow: var(--rb-shadow-2); }
.hm-review__img { aspect-ratio: 1; overflow: hidden; border-radius: var(--rb-radius); background: var(--rb-bg-3); }
.hm-review__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-review__product { display: flex; gap: .4rem; min-width: 0; margin: 1.4rem 0 0; font-size: 1.4rem; font-weight: 700; line-height: 1.4; color: var(--rb-ink); }
.hm-review__product span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-review__extra { flex: none; color: var(--rb-violet); }
.hm-review__text {
    margin: .6rem 0 0; font-size: 1.35rem; line-height: 1.55; color: var(--rb-ink-2); white-space: pre-line;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-review__meta { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: 1.4rem; font-size: 1.25rem; color: var(--rb-ink-3); }
.hm-review__user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-review__box { flex: none; padding: .3rem .8rem; border-radius: 999px; background: var(--rb-bg-2); font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; color: var(--rb-ink-2); text-transform: uppercase; }
.hm-empty { margin: 0; padding: 4.8rem 0; text-align: center; font-size: 1.5rem; color: var(--rb-ink-3); }

/* ---------- 통계 밴드 ---------- */
.hm-stats { position: relative; overflow: hidden; background: var(--rb-night); color: #fff; }
.hm-stats::before {
    content: ""; position: absolute; right: -16rem; bottom: -30rem; width: 72rem; height: 72rem; pointer-events: none;
    background: radial-gradient(closest-side, rgba(109, 58, 237, .5), rgba(109, 58, 237, 0));
}
.hm-stats__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.8rem; align-items: center; padding-block: 8.8rem; }
.hm-stats__eyebrow { color: #B9A2FF; }
.hm-stats__title { margin: 1rem 0 0; font: 800 4.4rem/1.12 var(--rb-font-display); letter-spacing: -.025em; color: #fff; }
.hm-stats__desc { max-width: 46rem; margin: 1.8rem 0 0; font-size: 1.5rem; line-height: 1.75; color: var(--rb-night-ink); }
.hm-stats__grid { display: grid; gap: 1.6rem; margin: 0; }
.hm-stat { padding: 2.8rem 3.2rem; border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--rb-radius-lg); background: rgba(255, 255, 255, .05); }
.hm-stat dt { display: flex; align-items: center; gap: .8rem; font-size: 1.4rem; font-weight: 600; color: var(--rb-night-ink); }
.hm-stat dt svg { width: 2rem; height: 2rem; color: #B9A2FF; }
.hm-stat dd { margin: 1rem 0 0; }
.hm-stat strong { display: block; font: 800 4.6rem/1.05 var(--rb-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; }
.hm-stat dd span { display: inline-flex; margin-top: 1.2rem; padding: .4rem 1rem; border-radius: 999px; background: rgba(143, 240, 184, .12); font-size: 1.3rem; font-weight: 600; color: #8FF0B8; }

/* ---------- 팝업 ---------- */
.hm-popup { position: fixed; inset: 0; z-index: 10010; display: none; align-items: center; justify-content: center; padding: 2.4rem; background: rgba(14, 10, 24, .6); }
.hm-popup.is-open { display: flex; }
.hm-popup__dialog { width: min(40rem, 100%); overflow: hidden; border-radius: var(--rb-radius-xl); background: var(--rb-night); box-shadow: var(--rb-shadow-3); }
.hm-popup__dialog img { display: block; width: 100%; height: auto; }
.hm-popup__foot { display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
.hm-popup__foot button { min-height: 5.2rem; border: 0; background: #fff; font-size: 1.4rem; font-weight: 600; color: var(--rb-ink-3); cursor: pointer; }
.hm-popup__foot button + button { border-left: 1px solid var(--rb-line); color: var(--rb-ink); }
.hm-popup__foot button:hover { background: var(--rb-bg-2); }

/* ---------- 반응형 ---------- */
@media (max-width: 1023px) {
    .hm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hm-reviews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hm-stats__inner { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; padding-block: 6.4rem; }
    .hm-stats__title { font-size: 3.4rem; }
}
@media (max-width: 767px) {
    .hm-hero { padding-top: 1.2rem; }
    .hm-hero__swiper { border-radius: var(--rb-radius-lg); }
    .hm-hero__slide { aspect-ratio: 750 / 420; }
    .hm-hero__ui { right: 1rem; bottom: 1rem; padding: .2rem; }
    .hm-hero__ui .hm-hero__nav { display: none; }
    .hm-hero__ui button { width: 2.8rem; height: 2.8rem; }
    .hm-hero .hm-hero__count { min-width: 4.4rem; font-size: 1.15rem; }

    .hm-notice { margin-top: 1.2rem; }
    .hm-notice__box { height: 4.8rem; gap: .8rem; padding-left: 1.4rem; }
    .hm-notice__label { font-size: 1.3rem; }
    .hm-notice__list .swiper-slide { font-size: 1.35rem; }
    .hm-notice__more { padding: 0 1.2rem; font-size: 1.25rem; }

    .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.8rem 1.2rem; }
    .hm-card { gap: 1.1rem; }
    .hm-card__media { border-radius: var(--rb-radius); }
    .hm-card__badges { left: .8rem; top: .8rem; }
    .hm-card__badges .rb-badge { height: 2rem; padding: 0 .7rem; font-size: 1.05rem; }
    .hm-card__name { font-size: 1.5rem; }
    .hm-card__sub { font-size: 1.25rem; }
    .hm-card__price { margin-top: .8rem; font-size: 1.75rem; }
    .hm-card__price small { font-size: 1.3rem; }

    .hm-reviews__list {
        display: flex; gap: 1.2rem; overflow-x: auto; overscroll-behavior-x: contain;
        margin: 0 calc(var(--rb-gutter) * -1); padding: .4rem var(--rb-gutter) 1.6rem;
        scroll-snap-type: x mandatory; scroll-padding-inline: var(--rb-gutter); scrollbar-width: none;
    }
    .hm-reviews__list::-webkit-scrollbar { display: none; }
    .hm-reviews__list > li { flex: 0 0 68%; max-width: 26rem; scroll-snap-align: start; }

    .hm-stats__inner { padding-block: 5.6rem; }
    .hm-stats__title { font-size: 2.8rem; }
    .hm-stats__desc { font-size: 1.4rem; }
    .hm-stat { padding: 2.2rem 2.4rem; }
    .hm-stat strong { font-size: 3.6rem; }
}