@charset "UTF-8";
/* ==========================================================================
   메인 페이지 전용 스타일 (home.css)
   - site.css 의 토큰(CSS 변수)과 .container / .card / .btn / .card-grid / .empty-state 를 재사용한다.
   - 공통 클래스는 여기서 재정의하지 않고 "홈 전용 컨텍스트"에서만 살짝 확장한다.
   - 모바일 퍼스트. 브레이크포인트 640px / 1024px.
   ========================================================================== */

.home {
    display: block;
    padding-bottom: var(--space-6);
}

/* --------------------------------------------------------------------------
   1. 히어로 (메인 비주얼 + 텍스트 + CTA)
   원본은 텍스트 없는 이미지 배너였으므로 이미지 아래에 텍스트 블록을 얹는다.
   -------------------------------------------------------------------------- */
.home-hero__inner {
    display: grid;
    gap: var(--space-6);
    padding-block: var(--space-5) var(--space-8);
}

.home-hero__media {
    max-width: 980px;   /* 원본 이미지 실측 폭. 확대 시 흐려지지 않도록 상한을 둔다 */
    width: 100%;
    margin-inline: auto;
    background: var(--color-cream);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.home-hero__media img {
    display: block;
    width: 100%;
    height: auto;
}

.home-hero__body {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    text-align: center;
}

.home-hero__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-4);
}

.home-hero__title {
    font-size: var(--font-size-2xl);
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.home-hero__lead {
    max-width: 46ch;
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
}

.home-hero__actions {
    margin-top: var(--space-2);
}

@media (min-width: 640px) {
    .home-hero__title {
        font-size: var(--font-size-3xl);
    }

    .home-hero__lead {
        font-size: var(--font-size-md);
    }
}

@media (min-width: 1024px) {
    .home-hero__inner {
        gap: var(--space-8);
        padding-block: var(--space-8) var(--space-12);
    }
}

/* --------------------------------------------------------------------------
   2. 섹션 헤더 (제목 + 더보기/전체보기)
   -------------------------------------------------------------------------- */
.home-section {
    margin-bottom: var(--space-10);
}

.home-section:last-child {
    margin-bottom: 0;
}

.home-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-primary);
}

.home-head__title {
    font-size: var(--font-size-lg);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.home-head__more {
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.home-head__more:hover,
.home-head__more:focus-visible {
    color: var(--color-primary);
}

@media (min-width: 640px) {
    .home-head__title {
        font-size: var(--font-size-xl);
    }
}

/* --------------------------------------------------------------------------
   3. BEST 상품 그리드
   -------------------------------------------------------------------------- */
.home-best {
    grid-template-columns: repeat(2, 1fr);
}

.home-product__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
}

.home-product__price {
    color: var(--color-accent);
    font-size: var(--font-size-sm);
}

.home-product__price strong {
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .home-best {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------------------------
   4. 공지사항 + 갤러리 2단 (모바일 1단)
   -------------------------------------------------------------------------- */
.home-duo__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

/* 그리드 자식 blowout 방지 */
.home-duo__grid > * {
    min-width: 0;
}

.home-duo .empty-state {
    padding-block: var(--space-8);
}

@media (min-width: 1024px) {
    .home-duo__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* 4.1 공지사항 목록 */
.home-notice {
    display: block;
}

.home-notice__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-1);
    border-bottom: 1px dashed var(--color-border);
}

.home-notice__link {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.home-notice__link:hover,
.home-notice__link:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.home-notice__date {
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    color: var(--color-warm-text);
    font-variant-numeric: tabular-nums;
}

/* 4.2 갤러리 썸네일 (최신 3건 · 모바일 2열 → 640px 이상 3열) */
.home-gallery {
    grid-template-columns: repeat(2, 1fr);
}

.home-gallery > li {
    display: flex;
    min-width: 0;
}

.home-gallery > li > .card {
    width: 100%;
}

.home-gallery .card__title {
    font-size: var(--font-size-sm);
}

/* 3건이므로 640px 이상에서는 한 줄에 3장 (빈 칸이 남지 않도록) */
@media (min-width: 640px) {
    .home-gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --------------------------------------------------------------------------
   5. 고객센터 배너 (주문·문의 안내)
   -------------------------------------------------------------------------- */
.home-cs__box {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-5);
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.home-cs__image {
    display: block;
    width: 100%;
    max-width: 334px;   /* 원본 이미지 실측 폭 */
    height: auto;
    margin-inline: auto;
    border-radius: var(--radius);
    background: var(--color-surface);
}

.home-cs__title {
    font-size: var(--font-size-lg);
    color: var(--color-primary-dark);
}

.home-cs__desc {
    margin-block: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.home-cs__list {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-5);
}

.home-cs__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.home-cs__row dt {
    flex: 0 0 44px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.home-cs__row dd {
    font-weight: 700;
    color: var(--color-text);
}

.home-cs__tel {
    font-size: var(--font-size-xl);
    letter-spacing: -0.02em;
    color: var(--color-primary-dark);
}

.home-cs__tel:hover,
.home-cs__tel:focus-visible {
    text-decoration: underline;
}

@media (min-width: 640px) {
    .home-cs__box {
        grid-template-columns: 240px 1fr;
        gap: var(--space-8);
        padding: var(--space-6);
    }

    .home-cs__title {
        font-size: var(--font-size-xl);
    }
}