/* 고담 홈페이지 웹 셸
 * 기존 user 화면의 DOM/ID와 페이지별 CSS를 보존하고, 웹 화면에 필요한 폭과 리듬만 확장한다.
 * 색상은 order_godam 기존 common/main/admin 팔레트에서 가져온다.
 */
:root {
    --homepage-green: #9a6f50;
    --homepage-green-soft: #FFF8F0;
    --homepage-ink: #333333;
    --homepage-muted: #666666;
    --homepage-subtle: #999999;
    --homepage-paper: #FAFAFA;
    --homepage-white: #FFFFFF;
    --homepage-line: #E5E5E5;
    --homepage-warm: #9a6f50;
    --homepage-max: 1280px;
}

html { scroll-behavior: smooth; }
body {
    background: var(--homepage-paper);
    color: var(--homepage-ink);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
.homepage-page { background: var(--homepage-white); }
.homepage-page .wrap { width: 100%; max-width: none; }
.homepage-site-header { display: none; }
.homepage-site-header__qr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: var(--homepage-muted);
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    word-break: keep-all;
    cursor: pointer;
}
.homepage-site-header__qr svg { width: 18px; height: 18px; flex-shrink: 0; }
.homepage-site-header__qr:hover { color: var(--homepage-warm); }
.homepage-site-header__qr:focus-visible { outline: 2px solid var(--homepage-warm); outline-offset: 2px; }
.homepage-site-footer { display: block; margin-top: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.wrap {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--homepage-max);
    min-height: 0;
    background: var(--homepage-white);
    box-shadow: none;
}
.homepage-page .bottom-nav { display: none; }

/* 홈페이지 홍보 상세: 앱용 세로 미디어 화면 대신 콘텐츠 중심의 웹 문서 흐름을 사용한다. */
.homepage-page.homepage-page--promotion_detail .promotion-detail-header {
    position: static;
    width: min(100% - 64px, 960px);
    max-width: 960px;
    height: auto;
    min-height: 58px;
    margin-inline: auto;
    padding: 0;
    background: var(--homepage-white);
    border-bottom: 1px solid var(--homepage-line);
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    width: 100%;
    min-width: 0;
    padding-block: 16px;
    color: var(--homepage-subtle);
    font-size: 13px;
    line-height: 1.5;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-breadcrumb a {
    color: var(--homepage-muted);
    font-weight: 500;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-breadcrumb a:hover { color: var(--homepage-warm); }
.homepage-page.homepage-page--promotion_detail .promotion-detail-breadcrumb span { color: var(--homepage-line); }
.homepage-page.homepage-page--promotion_detail .promotion-detail-header__title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    text-align: left;
    overflow-wrap: anywhere;
    color: var(--homepage-ink);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-page {
    width: min(100% - 64px, 960px);
    margin-inline: auto;
    padding: 32px 0 64px;
    background: var(--homepage-white);
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-article {
    display: flex;
    flex-direction: column;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-info {
    order: 1;
    padding: 0 0 24px;
    border-bottom: 0;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-top {
    margin: 0 0 12px;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-category {
    margin: 0;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-title {
    max-width: 760px;
    font-size: 28px;
    line-height: 1.3;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-meta { margin-top: 10px; }
.homepage-page.homepage-page--promotion_detail .promotion-detail-summary {
    max-width: 760px;
    margin-top: 12px;
    font-size: 15px;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-media {
    order: 2;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--homepage-paper);
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-video,
.homepage-page.homepage-page--promotion_detail .promotion-detail-embed,
.homepage-page.homepage-page--promotion_detail .promotion-detail-image,
.homepage-page.homepage-page--promotion_detail .promotion-detail-external {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-video,
.homepage-page.homepage-page--promotion_detail .promotion-detail-embed,
.homepage-page.homepage-page--promotion_detail .promotion-detail-image { object-fit: contain; }
.homepage-page.homepage-page--promotion_detail .promotion-detail-video,
.homepage-page.homepage-page--promotion_detail .promotion-detail-embed,
.homepage-page.homepage-page--promotion_detail .promotion-detail-image,
.homepage-page.homepage-page--promotion_detail .promotion-detail-external { background: var(--homepage-paper); }
.homepage-page.homepage-page--promotion_detail .promotion-detail-external__image { object-fit: cover; }
.homepage-page.homepage-page--promotion_detail .promotion-detail-media:has(> .promotion-detail-image) {
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-media:has(> .promotion-detail-image) .promotion-detail-image {
    height: auto;
    aspect-ratio: auto;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-content {
    order: 3;
    padding: 28px 0 0;
    border-top: 1px solid var(--homepage-line);
    margin-top: 28px;
    font-size: 15px;
    line-height: 1.8;
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-content img { border-radius: 6px; }
.homepage-page.homepage-page--promotion_detail .promotion-comments {
    order: 4;
    padding: 28px 0 0;
    margin-top: 28px;
    border-top: 1px solid var(--homepage-line);
}
.homepage-page.homepage-page--promotion_detail .promotion-comments__title {
    margin: 0 0 16px;
    color: var(--homepage-ink);
    font-size: 16px;
    font-weight: 600;
}
.homepage-page.homepage-page--promotion_detail .promotion-comment {
    padding: 16px 0;
    border-bottom: 1px solid var(--homepage-line);
}
.homepage-page.homepage-page--promotion_detail .promotion-comment:last-child {
    border-bottom: 0;
}
.homepage-page.homepage-page--promotion_detail .promotion-comment__name,
.homepage-page.homepage-page--promotion_detail .promotion-comment__body {
    color: var(--homepage-ink);
}
.homepage-page.homepage-page--promotion_detail .promotion-comment__date {
    color: var(--homepage-subtle);
}
.homepage-page.homepage-page--promotion_detail .promotion-comment__delete {
    border: 1px solid var(--homepage-line);
    border-radius: 2px;
    background: var(--homepage-white);
    color: var(--homepage-ink);
}
.homepage-page.homepage-page--promotion_detail .promotion-comment-form {
    gap: 10px;
    margin-top: 20px;
}
.homepage-page.homepage-page--promotion_detail .promotion-comment-form__label {
    color: var(--homepage-ink);
}
.homepage-page.homepage-page--promotion_detail .promotion-comment-form textarea {
    min-height: 96px;
    padding: 12px 14px;
    border: 1px solid var(--homepage-line);
    border-radius: 2px;
    background: var(--homepage-white);
    color: var(--homepage-ink);
}
.homepage-page.homepage-page--promotion_detail .promotion-comment-form__submit,
.homepage-page.homepage-page--promotion_detail .promotion-comment-login button {
    min-width: 88px;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 2px;
    background: var(--homepage-warm);
    color: var(--homepage-white);
    white-space: nowrap;
    word-break: keep-all;
    flex-shrink: 0;
}
.homepage-page.homepage-page--promotion_detail .promotion-comment-login {
    margin-top: 20px;
    padding: 20px 16px;
    border: 1px solid var(--homepage-line);
    border-radius: 2px;
    background: var(--homepage-paper);
}
.homepage-page.homepage-page--promotion_detail .promotion-comment-login p {
    color: var(--homepage-ink);
}
.homepage-page.homepage-page--promotion_detail .promotion-comment-loadmore {
    border: 1px solid var(--homepage-line);
    border-radius: 2px;
    background: var(--homepage-white);
    color: var(--homepage-ink);
}
.homepage-page.homepage-page--promotion_detail .promotion-detail-loading { padding: 32px 0 0; }
.homepage-page.homepage-page--promotion_detail .promotion-detail-empty { padding: 64px 0 0; }

@media (max-width: 767px) {
    .homepage-page.homepage-page--promotion_detail .promotion-detail-header {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: calc(100% - 32px);
        min-height: 52px;
    }
    .homepage-page.homepage-page--promotion_detail .promotion-detail-page {
        width: 100%;
        padding: 24px 16px 48px;
    }
    .homepage-page.homepage-page--promotion_detail .promotion-detail-title { font-size: 22px; }
    .homepage-page.homepage-page--promotion_detail .promotion-detail-summary { font-size: 14px; }
    .homepage-page.homepage-page--promotion_detail .promotion-detail-content {
        margin-top: 22px;
        padding-top: 22px;
    }
    .homepage-page.homepage-page--promotion_detail .promotion-comments {
        margin-top: 22px;
        padding-top: 22px;
    }
    .homepage-page.homepage-page--promotion_detail .promotion-detail-loading { padding-top: 24px; }
    .homepage-page.homepage-page--promotion_detail .promotion-detail-empty { padding-top: 48px; }
}

/* 홈페이지 인증 화면: 앱의 화면 단위 폼을 웹 서비스의 콘텐츠 카드로 확장한다. */
.homepage-page--login .login-wrap,
.homepage-page--join .join-content,
.homepage-page--find_id .find-content,
.homepage-page--find_pw .find-content {
    width: min(100% - 64px, 720px);
    max-width: 720px;
    margin: 0 auto;
}

.homepage-page--login .login-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    align-items: center;
    gap: 64px;
    min-height: 500px;
    padding: 48px 0 64px;
}
.homepage-page--login .login-form {
    padding: 32px;
    border: 1px solid var(--homepage-line);
    border-radius: 2px;
    background: var(--homepage-white);
}
.homepage-page--login .login-form__input { height: 52px; margin-bottom: 12px; border-radius: 2px; background: var(--homepage-paper); }
.homepage-page--login .login-form__btn { height: 52px; margin-top: 8px; border-radius: 2px; background: var(--homepage-warm); }

.homepage-page--join .join-content {
    padding: 40px 32px 24px;
    border: 1px solid var(--homepage-line);
    border-radius: 2px;
    background: var(--homepage-white);
}
.homepage-page--join .join-header {
    width: min(100% - 64px, 720px);
    margin: 0 auto;
    border-bottom: 1px solid var(--homepage-line);
}
.homepage-page--join .join-form__group { margin-bottom: 22px; }
.homepage-page--join .join-form__input,
.homepage-page--join .verify-input { height: 48px; border-radius: 2px; background: var(--homepage-paper); }
.homepage-page--join .join-form__check-btn,
.homepage-page--join .verify-btn { min-height: 48px; border-radius: 2px; background: var(--homepage-white); color: var(--homepage-warm); border: 1px solid var(--homepage-warm); white-space: nowrap; }
.homepage-page--join .join-terms { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--homepage-line); }
.homepage-page--join .join-footer { width: min(100% - 64px, 720px); margin: 0 auto; padding: 24px 0 56px; }
.homepage-page--join .join-footer__btn { height: 52px; border-radius: 2px; background: var(--homepage-warm); }
.homepage-page--join .join-footer { position: static; transform: none; border: 0; background: var(--homepage-white); }

.homepage-page--find_id .find-header,
.homepage-page--find_pw .find-header {
    width: min(100% - 64px, 720px);
    margin: 0 auto;
    position: static;
    height: 68px;
    padding: 0;
    border-bottom: 1px solid var(--homepage-line);
}
.homepage-page--find_id .find-header__title,
.homepage-page--find_pw .find-header__title { padding-right: 0; text-align: center; font-size: 20px; }
.homepage-page--find_id .find-content,
.homepage-page--find_pw .find-content {
    padding: 40px 0 64px;
    border: 0;
    background: var(--homepage-white);
}
.homepage-page--find_id .find-tabs,
.homepage-page--find_pw .find-tabs { gap: 0; margin: 0 0 32px; border-bottom: 1px solid var(--homepage-line); }
.homepage-page--find_id .find-tab,
.homepage-page--find_pw .find-tab { flex: 0 0 50%; padding: 14px 8px 13px; border-radius: 0; background: transparent; color: var(--homepage-muted); font-weight: 500; }
.homepage-page--find_id .find-tab--active,
.homepage-page--find_pw .find-tab--active { border-bottom: 2px solid var(--homepage-warm); color: var(--homepage-warm); font-weight: 700; }
.homepage-page--find_id .find-form-input,
.homepage-page--find_pw .find-form-input { min-height: 48px; border-radius: 2px; background: var(--homepage-paper); }
.homepage-page--find_id .find-btn--primary,
.homepage-page--find_pw .find-btn--primary { min-height: 52px; border-radius: 2px; background: var(--homepage-warm); }
.homepage-page--find_id .find-btn--outline,
.homepage-page--find_pw .find-btn--outline { border-radius: 2px; border-color: var(--homepage-warm); color: var(--homepage-warm); }
.homepage-page--find_id .find-result-box,
.homepage-page--find_pw .find-result-box { border: 1px solid var(--homepage-line); border-radius: 2px; box-shadow: none; }

/* 인증 페이지 제목은 데스크톱과 모바일 모두 웹 헤더의 중앙축에 고정합니다. */
.homepage-page--find_id .find-header__title,
.homepage-page--find_pw .find-header__title { text-align: center; }

@media (max-width: 767px) {
    .homepage-page--login .login-wrap,
    .homepage-page--join .join-content,
    .homepage-page--find_id .find-content,
    .homepage-page--find_pw .find-content { width: 100%; max-width: none; }
    .homepage-page--login .login-wrap { display: block; min-height: 0; padding: 40px 16px 48px; }
    .homepage-page--login .login-form { padding: 24px 16px; }
    .homepage-page--join .join-header,
    .homepage-page--find_id .find-header,
    .homepage-page--find_pw .find-header { width: 100%; }
    .homepage-page--join .join-content { padding: 28px 16px 20px; border-right: 0; border-left: 0; }
    .homepage-page--join .join-footer { width: 100%; padding: 16px 16px 40px; }
    .homepage-page--find_id .find-content,
    .homepage-page--find_pw .find-content { padding: 28px 16px 48px; border: 0; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .homepage-page--login .login-wrap { display: block; min-height: 0; padding: 40px 0 56px; }
}

/* 계정·약관·쿠폰 웹 내비게이션 최종 규칙
 * 모바일 앱의 중앙 탭/회색 패널 대신 사이트 콘텐츠 폭에 맞춘 문서형 탭 바를 사용한다.
 * 색상은 이 파일 상단의 홈페이지 토큰(기존 고담 CSS 팔레트)을 재사용한다.
 */
.homepage-page--account .page-content,
.homepage-page--coupons .page-content,
.homepage-page--terms .content,
.homepage-page--privacy .content {
    background: var(--homepage-white) !important;
}

.homepage-page--account .page-content {
    max-width: 1120px;
    padding-top: 44px;
}
.homepage-page--account .section {
    max-width: 900px;
    margin-inline: auto;
    padding: 0;
}
.homepage-page--account .section + .section { margin-top: 48px; }
.homepage-page--account .section__title {
    max-width: none;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--homepage-line);
    font-size: 18px;
    font-weight: 700;
}
.homepage-page--account .form-card {
    max-width: none;
    padding: 28px 32px 32px;
    border: 1px solid var(--homepage-line);
    border-radius: 2px;
    background: var(--homepage-white);
}
.homepage-page--account .form-group { margin-bottom: 20px; }
.homepage-page--account .form-group__label { color: var(--homepage-muted); }
.homepage-page--account .form-group__input { border-radius: 2px; }
.homepage-page--account .btn { border-radius: 2px; }
.homepage-page--account .withdraw-card {
    max-width: none;
    margin-top: 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--homepage-line);
}

.homepage-page--coupons .page-content {
    max-width: 1120px;
    padding-top: 40px;
}
.homepage-page--coupons .page-content > .tab-filter,
.homepage-page--coupons .page-content > .coupon-count,
.homepage-page--coupons .page-content > .coupon-list,
.homepage-page--coupons .page-content > #emptyState,
.homepage-page--coupons .page-content > #loading {
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
}
/* 홈페이지 배송지 카드: 넓은 화면에서 두 장씩 배치한다. */
@media (min-width: 960px) {
    .homepage-page--addresses .page-content > #addressList[style*="display: block"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .homepage-page--addresses #addressList > .address-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        margin: 0;
    }
    .homepage-page--addresses .address-card__header { gap: 12px; }
    .homepage-page--addresses .address-card__name,
    .homepage-page--addresses .address-card__recipient,
    .homepage-page--addresses .address-card__phone,
    .homepage-page--addresses .address-card__address {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: keep-all;
    }
    .homepage-page--addresses .address-card__badge { flex-shrink: 0; }
    .homepage-page--addresses .address-card__address { flex: 1; }
    .homepage-page--addresses .address-card__btn {
        min-width: 0;
        min-height: 44px;
        white-space: nowrap;
        word-break: keep-all;
    }
}
.homepage-page--coupons .tab-filter {
    justify-content: flex-start;
    gap: 32px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--homepage-line);
    background: var(--homepage-white);
}
.homepage-page--coupons .tab-btn {
    flex: 0 0 auto;
    min-width: 96px;
    padding: 14px 4px 13px;
    border-bottom: 2px solid transparent;
    color: var(--homepage-muted);
    font-size: 14px;
    text-align: left;
}
.homepage-page--coupons .tab-btn.active {
    color: var(--homepage-warm);
    border-bottom-color: var(--homepage-warm);
    font-weight: 700;
}
.homepage-page--coupons .coupon-count { padding: 0 0 14px; }
.homepage-page--coupons .coupon-list { padding: 0; }
.homepage-page--coupons .coupon-card {
    border-radius: 2px;
    box-shadow: none;
}

.homepage-page--terms .tabs,
.homepage-page--privacy .tabs {
    display: flex;
    justify-content: flex-start;
    gap: 32px;
    width: min(100% - 64px, 960px);
    margin: 0 auto;
    border-bottom: 1px solid var(--homepage-line);
    background: var(--homepage-white);
}
.homepage-page--terms .tabs .tab-btn,
.homepage-page--privacy .tabs .tab-btn {
    flex: 0 0 auto;
    min-width: 120px;
    padding: 14px 4px 13px;
    border-bottom: 2px solid transparent;
    color: var(--homepage-muted);
    font-size: 14px;
    text-align: left;
}
.homepage-page--terms .tabs .tab-btn.active,
.homepage-page--privacy .tabs .tab-btn.active {
    color: var(--homepage-warm);
    border-bottom-color: var(--homepage-warm);
    font-weight: 700;
}
.homepage-page--terms .content,
.homepage-page--privacy .content {
    max-width: 1120px;
    padding-top: 32px;
}
.homepage-page--terms .policy-content,
.homepage-page--privacy .policy-content {
    max-width: 960px;
    margin-inline: auto;
    padding: 40px 48px;
    border: 1px solid var(--homepage-line);
    border-radius: 2px;
    background: var(--homepage-white);
}

@media (max-width: 767px) {
    .homepage-page--account .page-content { padding-top: 28px; }
    .homepage-page--account .section { width: 100%; }
    .homepage-page--account .section + .section { margin-top: 36px; }
    .homepage-page--account .form-card { padding: 20px 16px 24px; }
    .homepage-page--coupons .page-content { padding-top: 24px; }
    .homepage-page--coupons .tab-filter { gap: 18px; }
    .homepage-page--coupons .tab-btn { min-width: 0; padding-inline: 2px; }
    .homepage-page--terms .tabs,
    .homepage-page--privacy .tabs { width: calc(100% - 32px); gap: 20px; }
    .homepage-page--terms .tabs .tab-btn,
    .homepage-page--privacy .tabs .tab-btn { min-width: 0; }
    .homepage-page--terms .content,
    .homepage-page--privacy .content { padding-top: 24px; }
    .homepage-page--terms .policy-content,
    .homepage-page--privacy .policy-content { padding: 24px 18px; }
}

.header {
    max-width: var(--homepage-max);
    height: 76px;
    padding: 0 32px;
    border-bottom: 1px solid var(--homepage-line);
}
.header__logo { height: 54px; }
.header__btn {
    width: 44px;
    height: 44px;
    color: var(--homepage-ink);
    border-radius: 8px;
}
.header__btn:hover { background: var(--homepage-green-soft); color: var(--homepage-green); }
.header__btn:focus-visible,
.bottom-nav__item:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #FFC107;
    outline-offset: 2px;
}
.header__right { gap: 4px; }
.cart-badge__count { background: var(--homepage-green); }

.container,
.page-content,
.content,
.find-content,
.login-wrap,
.join-wrap,
.account-content,
.order-content,
.cart-content {
    width: min(100% - 64px, 1120px);
    margin-inline: auto;
}
.container.has-header { padding-top: 100px; padding-bottom: 112px; }

.banner-wrap {
    border-radius: 14px;
    background: var(--homepage-green-soft);
    box-shadow: 0 8px 24px rgba(51,51,51,.08);
}
.banner-item { aspect-ratio: 2.8 / 1; }
.banner-item img { object-position: center; }
.banner-indicator { bottom: 18px; }
.tab-wrap {
    margin-top: 28px;
    border-bottom: 1px solid var(--homepage-line);
}
.tab-list { gap: 28px; padding: 0 4px; }
.tab-item {
    position: relative;
    padding: 16px 2px 14px;
    color: var(--homepage-muted);
    font-size: 15px;
    font-weight: 500;
}
.tab-item.active { color: var(--homepage-green); background: transparent; font-weight: 700; }
.homepage-page--main .tab-item { border-radius: 0; }
.tab-item.active::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: var(--homepage-green);
}
.sub-category-wrap { padding: 14px 4px; background: var(--homepage-paper); border: 0; }
.sub-category-chip { border-radius: 7px; border-color: var(--homepage-line); }
.sub-category-chip.active { background: var(--homepage-green); border-color: var(--homepage-green); }
.schedule-bubble { margin-top: 12px; background: var(--homepage-green-soft); border: 0; color: var(--homepage-green); }

.homepage-page--main .product-grid { gap: 40px 10px; padding-top: 20px; }
.homepage-page--main .product-card__name,
.homepage-page--main .product-item__name { font-size: 18px; margin-top: 6px; margin-bottom: 6px; }
.homepage-page--main .product-card__price,
.homepage-page--main .product-item__price { font-size: 18px; }
.homepage-page--main .product-card__stock { font-size: 14px; }
@media (min-width: 768px) {
    body.homepage-page--main .container,
    body.homepage-page--product_detail .detail-content {
        width: min(100% - 64px, 1120px);
        margin-inline: auto;
        padding-inline: 0;
    }
    .homepage-page--main .product-grid { padding-inline: 0; }
}
@media (min-width: 768px) and (max-width: 1050px) {
    body.homepage-page--main .container,
    body.homepage-page--product_detail .detail-content { width: calc(100% - 40px); }
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 20px;
    padding: 30px 10px;
}
.product-card,
.product-item { min-width: 0; background: var(--homepage-white); }
.product-card__image,
.product-item__image {
    overflow: hidden;
    border-radius: 12px;
    background: var(--homepage-paper);
    aspect-ratio: 1 / 1;
}
.product-card__image img,
.product-item__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-card:hover .product-card__image img,
.product-item:hover .product-item__image img { transform: scale(1.04); }
.product-card__name,
.product-item__name { margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.product-card__price,
.product-item__price { margin-top: 6px; color: var(--homepage-green); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

.page-header,
.cart-header {
    max-width: var(--homepage-max);
}
.page-header,
.cart-header {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    transform: none;
    z-index: 90;
    width: 100%;
    min-height: 76px;
    padding: 0 32px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--homepage-line);
}
.page-header__title,
.cart-header__title { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }

.bottom-nav {
    position: static;
    width: min(100% - 64px, 1120px);
    max-width: none;
    height: auto;
    margin: 48px auto 0;
    padding: 22px 0 30px;
    justify-content: flex-start;
    gap: 28px;
    background: transparent;
    border-top: 1px solid var(--homepage-line);
    box-shadow: none;
}
.bottom-nav__item { flex: 0 0 auto; flex-direction: row; gap: 8px; padding: 4px 0; color: var(--homepage-subtle); }
.bottom-nav__item.active { color: var(--homepage-green); }
.bottom-nav__icon { width: 20px; height: 20px; }
.bottom-nav__label { font-size: 13px; }
body.has-bottom-nav { padding-bottom: 0; background: var(--homepage-paper); }

.form-card,
.login-form,
.join-form,
.order-section,
.cart-summary,
.address-card,
.notice-card,
.faq-item,
.qna-item {
    border-color: var(--homepage-line);
    border-radius: 12px;
}
input, select, textarea { border-radius: 8px; }
button[class*="primary"],
button[class*="btn"],
.login-form__btn,
.join-form__btn,
.cart-summary__btn,
.find-btn--primary {
    transition: transform .2s ease, filter .2s ease, background-color .2s ease;
}
button[class*="primary"]:hover,
button[class*="btn"]:hover,
.login-form__btn:hover,
.join-form__btn:hover,
.cart-summary__btn:hover,
.find-btn--primary:hover { filter: brightness(.94); transform: translateY(-1px); }
button[class*="primary"]:active,
button[class*="btn"]:active,
.login-form__btn:active,
.join-form__btn:active,
.cart-summary__btn:active,
.find-btn--primary:active { transform: translateY(1px) scale(.99); }

.empty-state, .cart-empty, .loading { min-height: 260px; padding: 72px 24px; text-align: center; }
.empty-state__icon, .cart-empty__icon { background: var(--homepage-green-soft); }
.load-more__spinner { border-color: var(--homepage-line); border-top-color: var(--homepage-green); }

@media (max-width: 767px) {
    .homepage-page { padding-bottom: 0; }
    .header { height: 60px; padding: 0 12px; left: 0; right: 0; transform: none; margin-inline: auto; }
    .header__logo { height: 44px; }
    .page-header, .cart-header { top: 0; }
    .container, .page-content, .content, .find-content, .login-wrap, .join-wrap, .account-content, .order-content, .cart-content { width: 100%; }
    .container.has-header { padding-top: 72px; padding-bottom: 84px; }
    .banner-wrap { border-radius: 0; margin-inline: -0px; }
    .banner-item { aspect-ratio: 1.75 / 1; }
    .tab-wrap { margin-top: 12px; }
    .tab-list { gap: 20px; padding-inline: 16px; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; padding: 30px 10px; }
    .product-card__name, .product-item__name { font-size: 14px; }
    .product-card__price, .product-item__price { font-size: 15px; }
    .page-header, .cart-header { min-height: 60px; padding: 0 16px; }
    .page-header__title, .cart-header__title { font-size: 18px; }
    .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; height: var(--footer-height, 60px); margin: 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); gap: 16px; overflow-x: auto; background: var(--homepage-white); border-top: 1px solid var(--homepage-line); box-shadow: 0 -4px 16px rgba(51,51,51,.06); z-index: 1000; }
    .bottom-nav__item { flex: 1 0 auto; justify-content: center; }
    .homepage-page .cart-summary { position: static; transform: none; }
    .homepage-page .order-footer,
    .homepage-page .detail-footer { bottom: 0; }
    .homepage-page .search-header,
    .homepage-page .cart-header,
    .homepage-page .order-header,
    .homepage-page .detail-header { top: 0; width: 100%; max-width: 480px; }
}

/* 홈페이지 상품 속성 배지: 목록/검색/장바구니 썸네일 좌상단 공통 스타일 */
.homepage-product-card__img {
    position: relative;
    overflow: hidden;
}
.homepage-product-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    pointer-events: none;
}
.homepage-product-badges--overlay {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
}
.homepage-product-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 5px 13px;
    border-radius: 999px;
    color: var(--homepage-white, #fff);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.homepage-product-badge--reserve { background-color: var(--homepage-warm, #9a6f50); }
.homepage-product-badge--kids { background-color: #2e7d32; }
.homepage-product-badge--nationwide { background-color: #1565c0; }
.product-info__badges .homepage-product-badges {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}
.product-info__badges .homepage-product-badge {
    min-height: 26px;
    font-size: 12px;
}
.homepage-page--cart .cart-item__img.homepage-product-card__img {
    overflow: hidden;
}
.homepage-page--cart .homepage-product-badges--overlay {
    top: 6px;
    left: 6px;
    gap: 3px;
}
.homepage-page--cart .homepage-product-badge {
    min-height: 20px;
    padding: 0 6px;
    font-size: 10px;
}

@media (max-width: 767px) {
    .homepage-page--cart .homepage-product-badges--overlay {
        top: 5px;
        left: 5px;
        gap: 2px;
    }
    .homepage-page--cart .homepage-product-badge {
        min-height: 22px;
        padding: 0 7px;
        font-size: 11px;
    }
}

/* 마이페이지: 실제 주문·쿠폰 데이터와 기존 메뉴만 사용하는 웹 쇼핑 계정 허브 */
.homepage-page--mypage .wrap { width: 100%; max-width: none; }
.homepage-page--mypage .mypage-header,
.homepage-page--mypage .site-info-section { display: none; }
.homepage-page--mypage .mypage-web-intro {
    width: min(100% - 64px, 1120px);
    margin: 0 auto;
    padding: 52px 0 30px;
    border-bottom: 1px solid var(--homepage-line);
}
.homepage-page--mypage .mypage-web-intro__title { margin: 0; color: var(--homepage-ink); font-size: 34px; line-height: 1.2; letter-spacing: -.05em; }
.homepage-page--mypage .mypage-web-intro__desc { margin: 11px 0 0; color: var(--homepage-muted); font-size: 14px; }
.homepage-page--mypage .mypage-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    gap: 44px 64px;
    align-items: start;
    width: min(100% - 64px, 1120px);
    margin: 0 auto;
    padding: 36px 0 88px;
}
.homepage-page--mypage #loginPrompt,
.homepage-page--mypage #userInfo,
.homepage-page--mypage #logoutBtn { display: none; }
.homepage-page--mypage #userInfo[style*="display: block"] { display: flex !important; }
.homepage-page--mypage .user-info {
    grid-column: 1 / -1;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 48px;
    margin: 0;
    padding: 30px 32px;
    border: 1px solid var(--homepage-line);
    background: var(--homepage-white);
    color: var(--homepage-ink);
}
.homepage-page--mypage .user-info__identity { min-width: 220px; }
.homepage-page--mypage .user-info__welcome { margin: 0 0 8px; color: var(--homepage-muted); font-size: 13px; }
.homepage-page--mypage .user-info__name { margin: 0; color: var(--homepage-ink); font-size: 24px; line-height: 1.3; letter-spacing: -.03em; }
.homepage-page--mypage .user-info__id { margin: 6px 0 0; color: var(--homepage-muted); font-size: 13px; }
.homepage-page--mypage .user-info__account-link { display: inline-block; margin-top: 18px; color: var(--homepage-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.homepage-page--mypage .user-info__point { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); min-width: min(100%, 390px); margin: 0; padding: 0; background: transparent; border-radius: 0; }
.homepage-page--mypage .user-info__point-item { display: flex; flex-direction: column; justify-content: center; padding: 12px 28px; border-left: 1px solid var(--homepage-line); text-align: left; }
.homepage-page--mypage .user-info__point-label { margin: 0 0 8px; color: var(--homepage-muted); font-size: 13px; }
.homepage-page--mypage .user-info__point-value { margin: 0; color: var(--homepage-ink); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.homepage-page--mypage .login-prompt {
    grid-column: 1 / -1;
    margin: 0;
    padding: 36px;
    border: 1px solid var(--homepage-line);
    background: var(--homepage-white);
    text-align: left;
}
.homepage-page--mypage .login-prompt__text { margin-bottom: 18px; color: var(--homepage-ink); font-size: 20px; font-weight: 600; }
.homepage-page--mypage .login-prompt__btn { min-width: 132px; border-radius: 4px; background: var(--homepage-warm); text-align: center; }
.homepage-page--mypage .guest-order-section { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--homepage-line); }
.homepage-page--mypage .guest-order-section__title { margin: 0 0 14px; color: var(--homepage-ink); font-size: 15px; font-weight: 600; }
.homepage-page--mypage .guest-order-section__fields { display: flex; gap: 10px; }
.homepage-page--mypage .guest-order-section__fields input { min-width: 0; flex: 1; height: 48px; padding: 0 14px; border: 1px solid var(--homepage-line); border-radius: 4px; background: var(--homepage-white); font-size: 14px; }
.homepage-page--mypage .guest-order-section__fields button { flex: 0 0 auto; min-width: 116px; height: 48px; border-radius: 4px; background: var(--homepage-warm); color: var(--homepage-white); font-size: 14px; font-weight: 600; }
.homepage-page--mypage .menu-group { min-width: 0; margin: 0; background: transparent; }
.homepage-page--mypage .menu-group--primary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.homepage-page--mypage .menu-group__title { margin: 0; padding: 0 0 15px; color: var(--homepage-ink); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.homepage-page--mypage .menu-group--primary .menu-group__title { grid-column: 1 / -1; }
.homepage-page--mypage .menu-item { min-height: 68px; padding: 0; border-bottom: 1px solid var(--homepage-line); color: var(--homepage-ink); transition: color .2s ease, background-color .2s ease; }
.homepage-page--mypage .menu-item:hover { padding: 0; color: var(--homepage-warm); background: var(--homepage-paper); }
.homepage-page--mypage .menu-item__left { min-width: 0; gap: 13px; }
.homepage-page--mypage .menu-item__icon { flex: 0 0 auto; width: 22px; height: 22px; color: currentColor; }
.homepage-page--mypage .menu-item__copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.homepage-page--mypage .menu-item__text { color: currentColor; font-size: 15px; line-height: 1.35; }
.homepage-page--mypage .menu-item__desc { color: var(--homepage-muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
.homepage-page--mypage .menu-item__arrow { flex: 0 0 auto; color: var(--homepage-subtle); }
.homepage-page--mypage .menu-group--primary .menu-item { min-height: 92px; padding: 18px 20px; border-top: 1px solid var(--homepage-line); }
.homepage-page--mypage .menu-group--primary .menu-item + .menu-item { border-left: 1px solid var(--homepage-line); }
.homepage-page--mypage .menu-group--primary .menu-item:hover { padding: 18px 20px; }
.homepage-page--mypage .menu-group--settings { padding-left: 8px; }
.homepage-page--mypage .logout-btn { grid-column: 1 / -1; justify-self: end; width: auto; margin: 0; padding: 8px 0; border: 0; color: var(--homepage-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.homepage-page--mypage :is(.login-prompt__btn, .user-info__account-link, .menu-item, .guest-order-section__fields button, .logout-btn):focus-visible { outline: 2px solid var(--homepage-warm); outline-offset: 3px; }
.homepage-page--mypage.is-guest .menu-group,
.homepage-page--mypage.is-guest .logout-btn { display: none !important; }

@media (max-width: 960px) {
    .homepage-page--mypage .mypage-content { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .homepage-page--mypage .menu-group--primary,
    .homepage-page--mypage .logout-btn { grid-column: 1; }
    .homepage-page--mypage .menu-group--settings { padding-left: 0; }
}

@media (min-width: 768px) and (max-width: 820px) {
    .homepage-page--mypage .user-info { flex-direction: column; gap: 24px; }
    .homepage-page--mypage .user-info__point { width: 100%; min-width: 0; }
}

@media (max-width: 767px) {
    .homepage-page--mypage .mypage-web-intro { width: calc(100% - 32px); padding: 30px 0 22px; }
    .homepage-page--mypage .mypage-web-intro__title { font-size: 27px; }
    .homepage-page--mypage .mypage-content { display: block; width: 100%; padding: 24px 16px 56px; }
    .homepage-page--mypage #userInfo[style*="display: block"] { display: block !important; }
    .homepage-page--mypage .user-info { display: block; padding: 24px 20px; }
    .homepage-page--mypage .user-info__point { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; margin-top: 24px; border-top: 1px solid var(--homepage-line); }
    .homepage-page--mypage .user-info__point-item { padding: 18px 0 0; border-left: 0; }
    .homepage-page--mypage .user-info__point-item + .user-info__point-item { padding-left: 18px; border-left: 1px solid var(--homepage-line); }
    .homepage-page--mypage .login-prompt { padding: 26px 20px; }
    .homepage-page--mypage .login-prompt__text { font-size: 18px; }
    .homepage-page--mypage .guest-order-section__fields { flex-direction: column; }
    .homepage-page--mypage .guest-order-section__fields button { width: 100%; }
    .homepage-page--mypage .menu-group { margin-top: 34px; }
    .homepage-page--mypage .menu-group--primary { display: block; }
    .homepage-page--mypage .menu-group--primary .menu-group__title { display: block; }
    .homepage-page--mypage .menu-group--primary .menu-item,
    .homepage-page--mypage .menu-group--primary .menu-item:hover { min-height: 64px; padding: 0; border-top: 0; border-left: 0; }
    .homepage-page--mypage .menu-item__desc { display: none; }
    .homepage-page--mypage .logout-btn { display: block; margin: 34px 0 0 auto; }
}

/* 주문내역: 웹 쇼핑몰 레이아웃 */
.homepage-orders-page { width: 100%; }
.homepage-orders-intro {
    width: min(100% - 64px, 1120px);
    margin: 0 auto;
    padding: 40px 0 28px;
    border-bottom: 1px solid var(--homepage-line);
}
.homepage-orders-intro__title {
    margin: 0;
    color: var(--homepage-ink);
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -.05em;
}
.homepage-orders-intro__description {
    margin: 10px 0 0;
    color: var(--homepage-muted);
    font-size: 14px;
}
.homepage-page--orders .page-content {
    width: min(100% - 64px, 1120px);
    padding: 28px 0 72px;
    margin: 0 auto;
    background: var(--homepage-white);
}
.homepage-page--orders #orderList { display: block; border-top: 0; }
@media (min-width: 1024px) {
    .homepage-page--orders .page-content { padding-top: 0; }
}
.homepage-page--orders .order-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: "header header" "body footer";
    column-gap: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--homepage-line);
    background: var(--homepage-white);
}
.homepage-page--orders .order-card__header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 18px 0 12px;
    background: transparent;
    border-bottom: 0;
}
.homepage-page--orders .order-card__date {
    flex-shrink: 0;
    color: var(--homepage-ink);
    font-size: 15px;
    font-weight: 700;
}
.homepage-page--orders .order-card__number { min-width: 0; overflow: hidden; color: var(--homepage-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.homepage-page--orders .order-card__body { grid-area: body; display: block; min-width: 0; padding: 0 0 20px; }
.homepage-page--orders .order-card__info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px 96px;
    grid-template-areas: "name price status" "pickup price status";
    align-items: center;
    column-gap: 24px;
    row-gap: 7px;
}
.homepage-page--orders .order-card__name { grid-area: name; min-width: 0; margin: 0; color: var(--homepage-ink); font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.homepage-page--orders .order-card__pickup { grid-area: pickup; margin: 0 !important; color: var(--homepage-muted) !important; font-size: 13px !important; }
.homepage-page--orders .order-card__price { grid-area: price; margin: 0; color: var(--homepage-warm); font-size: 17px; font-weight: 700; white-space: nowrap; }
.homepage-page--orders .order-card__status { grid-area: status; min-width: 72px; padding: 8px 10px; border-radius: 2px; text-align: center; font-size: 12px; }
.homepage-page--orders .order-card__footer { grid-area: footer; display: flex; align-items: center; justify-content: flex-end; margin: 0; padding: 0 0 20px; border-top: 0; text-align: right; }
.homepage-page--orders .order-card__btn { width: auto; min-height: 40px; padding: 10px 16px; border-color: var(--homepage-line); border-radius: 2px; color: var(--homepage-ink); font-size: 13px; white-space: nowrap; word-break: keep-all; }
.homepage-page--orders .order-card__btn:hover { border-color: var(--homepage-warm); color: var(--homepage-warm); }
.homepage-page--orders .order-card__btn:focus-visible { outline: 2px solid var(--homepage-warm); outline-offset: 3px; }
.homepage-page--orders #emptyState { display: none; }
.homepage-page--orders .empty-state { padding: 56px 16px; border-top: 1px solid var(--homepage-line); }
.homepage-page--orders .loading { padding: 36px; color: var(--homepage-muted); }
.homepage-page--orders .infinite-scroll-empty { padding: 56px 16px; border-top: 1px solid var(--homepage-line); text-align: center; color: var(--homepage-muted); }
.homepage-page--orders .infinite-scroll-end { padding: 28px; color: var(--homepage-subtle); text-align: center; font-size: 12px; }

@media (max-width: 1023px) {
    .homepage-page--orders .page-content { width: calc(100% - 48px); }
    .homepage-page--orders #orderList { border-top: 0; }
    .homepage-page--orders .order-card { display: block; margin-bottom: 16px; border: 1px solid var(--homepage-line); border-radius: 6px; overflow: hidden; }
    .homepage-page--orders .order-card__header { justify-content: space-between; padding: 16px 18px; background: var(--homepage-paper); border-bottom: 1px solid var(--homepage-line); }
    .homepage-page--orders .order-card__body { padding: 18px; }
    .homepage-page--orders .order-card__info { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "pickup status"; }
    .homepage-page--orders .order-card__footer { justify-content: flex-end; padding: 0 18px 18px; }
}

@media (max-width: 767px) {
    .homepage-page--orders .homepage-site-header { display: block; }
    .homepage-page--orders .homepage-site-header__inner { width: 100%; min-height: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 0 16px; padding: 10px 16px 0; }
    .homepage-page--orders .homepage-site-header__brand img { height: 42px; }
    .homepage-page--orders .homepage-site-header__nav { display: flex; order: initial; width: auto; margin: 0; gap: 16px; }
    .homepage-page--orders .homepage-site-header__nav a { padding: 10px 0; font-size: 13px; }
    .homepage-page--orders .homepage-site-header__search { display: none; }
    .homepage-page--orders .homepage-site-header__cart { padding: 10px 0; font-size: 13px; }
    .homepage-page--orders .homepage-site-header__utility { grid-column: 1 / -1; order: 4; justify-content: flex-end; min-height: 38px; margin-top: 8px; border-top: 1px solid var(--homepage-line); gap: 16px; }
    .homepage-page--orders .homepage-site-header__auth-group { gap: 16px; }
    .homepage-page--orders .homepage-site-header__utility a { white-space: nowrap; }
    .homepage-orders-intro { display: block; width: calc(100% - 32px); padding: 28px 0 24px; }
    .homepage-orders-intro__title { font-size: 28px; }
    .homepage-orders-intro__description { margin-top: 8px; font-size: 13px; line-height: 1.6; }
    .homepage-page--orders .page-content { width: calc(100% - 32px); min-height: calc(100dvh - 170px); padding: 24px 0 48px; }
    .homepage-page--orders .order-card { margin-bottom: 12px; border: 1px solid var(--homepage-line); border-radius: 8px; overflow: hidden; }
    .homepage-page--orders .order-card__header { padding: 16px; }
    .homepage-page--orders .order-card__body { padding: 16px; }
    .homepage-page--orders .order-card__info { display: block; }
    .homepage-page--orders .order-card__price { margin-top: 10px; }
    .homepage-page--orders .order-card__status { margin-top: 8px; }
    .homepage-page--orders .order-card__footer { padding: 0 16px 16px; }
    .homepage-page--orders .order-card__btn { width: 100%; min-height: 44px; }
    .homepage-page--orders .empty-state,
    .homepage-page--orders .infinite-scroll-empty { padding: 48px 16px; }
}

@media (min-width: 768px) {
    .homepage-page .wrap { min-height: calc(100dvh - 210px); }
    .homepage-page--main .container.has-header { padding-top: 32px; padding-bottom: 32px; }
    .homepage-page--login .login-wrap { max-width: 520px; min-height: auto; padding-block: 24px 40px; }
    .homepage-page--join .join-content,
    .homepage-page--account .page-content,
    .homepage-page .find-content { max-width: 600px; margin-inline: auto; }
    .homepage-page--main .wrap > .header { display: none; }
    .homepage-page:not(.homepage-page--main) .wrap > .header {
        position: static;
        width: 100%;
        max-width: none;
        transform: none;
    }
    .homepage-page--main .tab-item { background: transparent; border-radius: 0; }
    .homepage-page--main .tab-item.active { background: transparent; color: var(--homepage-warm); }
    .homepage-site-header {
        display: block;
        background: var(--homepage-white);
        border-bottom: 1px solid var(--homepage-line);
    }
    .homepage-site-header__inner,
    .homepage-site-footer__inner {
        width: min(100% - 64px, 1120px);
        min-height: 76px;
        margin-inline: auto;
    }
    .homepage-site-footer__inner {
        display: flex;
        align-items: center;
        gap: 28px;
    }
    .homepage-site-header__inner {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 28px;
    }
    .homepage-site-header__start {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        display: flex;
        align-items: center;
        gap: 28px;
        min-width: 0;
    }
    .homepage-site-header__brand img { width: auto; height: 52px; }
    .homepage-site-header__nav { display: flex; align-items: center; gap: 24px; }
    .homepage-site-header__nav a { padding: 10px 0; color: var(--homepage-muted); font-size: 14px; font-weight: 600; }
    .homepage-site-header__nav a:hover,
    .homepage-site-header__nav a.active { color: var(--homepage-warm); }
    .homepage-site-header__search {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        display: flex;
        align-items: center;
        width: 240px;
        height: 38px;
        margin: 0;
        padding: 0 8px 0 10px;
        border: 1px solid var(--homepage-line);
        border-radius: 8px;
        background: var(--homepage-white);
        cursor: text;
    }
    .homepage-site-header__search input {
        min-width: 0;
        flex: 1;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        outline: 0;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        color: var(--homepage-ink);
        font-size: 13px;
        line-height: normal;
        cursor: text;
    }
    .homepage-site-header__search button { flex-shrink: 0; width: 24px; height: 24px; color: var(--homepage-muted); }
    .homepage-site-header__search svg { width: 18px; height: 18px; }
    .homepage-site-header__end {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }
    .homepage-site-header__utility { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
    .homepage-site-header__auth-group { display: inline-flex; align-items: center; gap: 12px; }
    .homepage-site-header__auth-group[hidden] { display: none; }
    .homepage-site-header__utility a { color: var(--homepage-subtle); font-size: 14px; }
    .homepage-site-header__utility a:hover,
    .homepage-site-header__utility a.active { color: var(--homepage-warm); }
    .homepage-site-header__utility .homepage-site-header__catalog {
        color: var(--homepage-muted);
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .homepage-site-header__utility .homepage-site-header__catalog:hover,
    .homepage-site-header__utility .homepage-site-header__catalog.active { color: var(--homepage-warm); }
    .homepage-site-header__cart { position: relative; display: inline-block; padding: 10px 0; color: var(--homepage-ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
    .homepage-site-header__cart:hover { color: var(--homepage-warm); }
    .homepage-site-header__cart-badge {
        position: absolute;
        display: none;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        top: -4px;
        right: -12px;
        margin-left: 0;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--homepage-warm);
        color: var(--homepage-white);
        font-size: 10px;
        font-weight: 700;
        line-height: 18px;
        vertical-align: 1px;
    }
    .homepage-site-header__cart-badge[style*="display: flex"] { display: inline-flex; }
    .homepage-site-header__cart[hidden],
    .homepage-site-header__cart-badge[hidden] { display: none !important; }
    .homepage-site-footer { display: block; background: var(--homepage-paper); border-top: 1px solid var(--homepage-line); }
    .homepage-site-footer__inner { min-height: 0; padding: 28px 0; align-items: flex-start; justify-content: space-between; color: var(--homepage-muted); font-size: 12px; }
    .homepage-site-footer__brand { display: block; margin-bottom: 4px; color: var(--homepage-warm); font-size: 16px; }
    .homepage-site-footer nav { display: flex; gap: 20px; }
    .homepage-site-footer nav a:hover { color: var(--homepage-warm); }
    .homepage-page:not(.homepage-page--main) .header,
    .homepage-page .page-header,
    .homepage-page .join-header,
    .homepage-page .mypage-header,
    .homepage-page .find-header,
    .homepage-page .promotion-detail-header,
    .homepage-page .cart-select-all,
    .homepage-page .search-header,
    .homepage-page .cart-header,
    .homepage-page .order-header,
    .homepage-page .detail-header {
        width: min(100% - 64px, 1120px);
        max-width: 1120px;
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        margin-inline: auto;
    }
    .homepage-page .cart-content,
    .homepage-page .order-content,
    .homepage-page .search-content,
    .homepage-page .detail-content,
    .homepage-page .join-content { padding-top: 24px; }
    .homepage-page .search-content { max-width: 1120px; margin-inline: auto; }
    .homepage-page .cart-summary { bottom: 0; }
    .homepage-page .join-footer { width: min(100% - 64px, 600px); max-width: 600px; }
    .homepage-page .cart-summary,
    .homepage-page .order-footer,
    .homepage-page .detail-footer {
        width: min(100% - 64px, 1120px);
        max-width: 1120px;
    }
}

@media (min-width: 768px) and (max-width: 1050px) {
    .homepage-site-header__inner {
        width: calc(100% - 40px);
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 10px 16px;
        padding: 12px 0;
    }
    .homepage-site-header__start { display: contents; }
    .homepage-site-header__brand {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }
    .homepage-site-header__search {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        width: 160px;
        margin: 0;
    }
    .homepage-site-header__end {
        grid-column: 2;
        grid-row: 1;
    }
    .homepage-site-header__nav {
        grid-column: 1 / -1;
        grid-row: 2;
        width: auto;
        gap: 20px;
    }
    .homepage-site-header__utility { gap: 8px; }
    .homepage-site-header__auth-group { gap: 8px; }
}

@media (max-width: 767px) {
    .homepage-site-header__utility { flex-wrap: wrap; }
    .homepage-site-header__qr { font-size: 13px; }
    .homepage-site-header__start,
    .homepage-site-header__end { display: contents; }
    .homepage-site-header__brand { grid-column: 1; }
    .homepage-site-header__nav { grid-column: 2; }
    .homepage-site-header__cart { grid-column: 3; }
    .homepage-site-header__utility a { font-size: 13px; }
    .homepage-site-header__utility .homepage-site-header__catalog {
        color: var(--homepage-muted);
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

@media (min-width: 768px) {
    .homepage-page:not(.homepage-page--main) .header,
    .homepage-page .terms-header,
    .homepage-page .privacy-header {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: min(100% - 64px, 1120px);
        max-width: 1120px;
        margin-inline: auto;
    }
    .homepage-page .terms-content,
    .homepage-page .privacy-content,
    .homepage-page .complete-wrap { width: min(100% - 64px, 1120px); max-width: 1120px; margin-inline: auto; }
    .homepage-page--cart .wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        grid-template-areas: "cart-intro cart-intro" "cart-select cart-summary" "cart-content cart-summary" "cart-empty cart-empty";
        align-content: start;
        width: min(100%, 1120px);
        margin-inline: auto;
    }
    .homepage-page--cart .cart-select-all { grid-area: cart-select; width: auto; margin: 0; }
    .homepage-page--cart .cart-content { grid-area: cart-content; width: auto; margin: 0; padding: 24px 32px 180px 0; }
    .homepage-page--cart .cart-empty { grid-area: cart-empty; width: auto; }
    .homepage-page--cart .cart-summary { grid-area: cart-summary; position: sticky; top: 96px; align-self: start; width: auto; margin: 24px 0 0 32px; }
    .homepage-page--cart .cart-select-all[hidden],
    .homepage-page--cart .cart-summary[hidden],
    .homepage-page--cart .cart-empty[hidden] { display: none; }
}

@media (max-width: 767px) {
    .homepage-site-footer { padding: 24px 16px; }
    .homepage-site-footer__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; color: var(--homepage-muted); font-size: 12px; }
    .homepage-site-footer nav { display: flex; flex-flow: row wrap; align-items: center; gap: 8px 16px; }
    .homepage-site-footer__brand { display: block; margin-bottom: 3px; color: var(--homepage-warm); font-size: 15px; }
    .homepage-page--cart .cart-header,
    .homepage-page--cart .cart-select-all,
    .homepage-page--cart .cart-content,
    .homepage-page--cart .cart-empty,
    .homepage-page--cart .cart-summary { width: 100%; margin-inline: 0; }
    .homepage-page--cart .cart-select-all { position: static; transform: none; height: 44px; }
    .homepage-page--cart .cart-summary { position: static; padding: 20px 16px 28px; }
    .homepage-page--cart .cart-content { padding: 24px 16px; }
    .homepage-page--cart .cart-empty { padding: 56px 20px; }
}

.homepage-page--cart .cart-select-all label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.homepage-page--cart .cart-select-all > button { color: var(--homepage-subtle); font-size: 13px; }
.homepage-page--cart .cart-summary__row--discount { color: var(--homepage-warm); }
.homepage-page--cart .cart-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
}
.homepage-page--cart .cart-empty__icon svg { width: 42px; height: 42px; }
.homepage-page--cart .cart-empty__button { display: inline-flex; margin-top: 16px; padding: 11px 18px; border-radius: 8px; background: var(--homepage-warm); color: var(--homepage-white); font-size: 13px; font-weight: 600; }
.homepage-page--cart .cart-empty__button:hover { filter: brightness(.94); }
.homepage-site-footer__business { margin-top: 14px; font-size: 13px; line-height: 1.7; }
.homepage-site-footer__business p { margin: 0; }
.homepage-site-footer__links { flex-shrink: 0; }

/* 메인 카테고리: 모바일 탭을 그대로 확대하지 않고 웹 상점의 탐색 바처럼 정돈한다. */
.homepage-page--main .tab-wrap {
    width: 100%;
    margin: 20px auto 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.homepage-page--main .tab-wrap::-webkit-scrollbar { display: none; }
.homepage-page--main .tab-list {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-width: max-content;
    padding: 0;
}
.homepage-page--main .tab-item {
    min-width: 96px;
    padding: 15px 18px 14px;
    text-align: center;
    color: var(--homepage-muted);
    font-size: 15px;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}
.homepage-page--main .tab-item:hover { color: var(--homepage-warm); background: var(--homepage-green-soft); }
.homepage-page--main .tab-item.active {
    color: var(--homepage-white);
    background: var(--homepage-warm);
}
.homepage-page--main .tab-item.active::after { display: none; }

/* 마이페이지 하위 화면 공통 웹 문서 헤더 */
.homepage-account-intro,
.homepage-policy-intro {
    width: min(100% - 64px, 1120px);
    margin: 0 auto;
    padding: 52px 0 32px;
    border-bottom: 1px solid var(--homepage-line);
}
.homepage-account-intro__eyebrow {
    margin: 0 0 10px;
    color: var(--homepage-warm);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
}
.homepage-account-intro__title {
    margin: 0;
    color: var(--homepage-ink);
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -.05em;
}
.homepage-account-intro__description {
    margin: 12px 0 0;
    color: var(--homepage-muted);
    font-size: 14px;
}
.homepage-page--addresses .page-header,
.homepage-page--coupons .page-header,
.homepage-page--account .page-header,
.homepage-page--terms .header,
.homepage-page--privacy .header { display: none; }
.homepage-page--addresses .page-content,
.homepage-page--coupons .page-content,
.homepage-page--account .page-content,
.homepage-page--terms .content,
.homepage-page--privacy .content {
    width: min(100% - 64px, 1120px);
    max-width: none;
    margin: 0 auto;
    padding: 40px 0 96px;
}
.homepage-page--addresses .page-content > #addressList,
.homepage-page--coupons .page-content > .coupon-list,
.homepage-page--account .page-content > .section,
.homepage-page--terms .policy-content,
.homepage-page--privacy .policy-content {
    max-width: 760px;
    margin-inline: auto;
}
.homepage-page--addresses .page-content > #addressList:empty::before {
    content: '등록된 배송지가 없습니다.';
    display: block;
    padding: 72px 24px;
    border: 1px solid var(--homepage-line);
    color: var(--homepage-muted);
    text-align: center;
}
.homepage-page--addresses .address-card,
.homepage-page--coupons .coupon-card,
.homepage-page--account .form-card {
    border: 1px solid var(--homepage-line);
    border-radius: 10px;
    background: var(--homepage-white);
    box-shadow: 0 8px 24px rgba(51,51,51,.05);
}
.homepage-page--addresses .address-card + .address-card,
.homepage-page--coupons .coupon-card + .coupon-card { margin-top: 12px; }
.homepage-page--coupons .tab-filter {
    display: flex;
    max-width: 760px;
    margin: 0 auto 24px;
    border-bottom: 1px solid var(--homepage-line);
}
.homepage-page--coupons .tab-btn {
    flex: 1;
    padding: 14px 10px;
    color: var(--homepage-muted);
    border-bottom: 2px solid transparent;
}
.homepage-page--coupons .tab-btn.active { color: var(--homepage-warm); border-bottom-color: var(--homepage-warm); font-weight: 700; }
.homepage-page--coupons .coupon-count { max-width: 760px; margin: 0 auto 14px; color: var(--homepage-muted); font-size: 13px; }
.homepage-page--coupons .coupon-count__number { color: var(--homepage-ink); font-size: 18px; font-weight: 700; }
.homepage-page--account .section + .section { margin-top: 36px; }
.homepage-page--account .section__title { max-width: 760px; margin: 0 auto 12px; color: var(--homepage-ink); font-size: 18px; }
.homepage-page--account .form-card { max-width: 760px; margin-inline: auto; padding: 28px; }
.homepage-page--account .withdraw-card { max-width: 760px; margin-inline: auto; border-top: 1px solid var(--homepage-line); padding-top: 24px; }
.homepage-page--terms .tabs { width: min(100% - 64px, 760px); margin: 28px auto 0; border-bottom: 1px solid var(--homepage-line); }
.homepage-page--terms .content { padding-top: 28px; }
.homepage-page--terms .policy-content,
.homepage-page--privacy .policy-content { padding: 36px 40px; border: 1px solid var(--homepage-line); border-radius: 10px; background: var(--homepage-white); line-height: 1.8; }
.homepage-page--terms .policy-content h2,
.homepage-page--privacy .policy-content h2 { margin: 30px 0 12px; color: var(--homepage-ink); font-size: 17px; }
.homepage-page--terms .policy-content h2:first-child,
.homepage-page--privacy .policy-content h2:first-child { margin-top: 0; }

@media (max-width: 767px) {
    .homepage-page--main .tab-wrap { width: 100%; margin-top: 20px; }
    .homepage-page--main .tab-list { justify-content: flex-start; padding-inline: 16px; }
    .homepage-page--main .tab-item { min-width: auto; padding-inline: 15px; }
    .homepage-account-intro,
    .homepage-policy-intro { width: calc(100% - 32px); padding: 30px 0 22px; }
    .homepage-account-intro__title { font-size: 28px; }
    .homepage-account-intro__description { font-size: 13px; line-height: 1.6; }
    .homepage-page--addresses .page-content,
    .homepage-page--coupons .page-content,
    .homepage-page--account .page-content,
    .homepage-page--terms .content,
    .homepage-page--privacy .content { width: calc(100% - 32px); padding: 24px 0 56px; }
    .homepage-page--account .form-card { padding: 20px 16px; }
    .homepage-page--terms .tabs { width: calc(100% - 32px); margin-top: 18px; }
    .homepage-page--terms .policy-content,
.homepage-page--privacy .policy-content { padding: 24px 18px; font-size: 14px; }
}

/* 홈페이지 전용 마감 오버라이드: 앱 공용 CSS의 빈 상태/그라디언트를 덮는다. */
.homepage-page--main .tab-list::before,
.homepage-page--main .tab-list::after { display: none; }
.homepage-page--main .banner-empty { background: var(--homepage-green-soft); }
.homepage-page--addresses .empty-state__icon,
.homepage-page--coupons .empty-state__icon { color: var(--homepage-warm); }
.homepage-page--addresses .empty-state__icon svg,
.homepage-page--coupons .empty-state__icon svg { width: 36px; height: 36px; }

@media (max-width: 767px) {
    .homepage-page--main .banner-empty { background: var(--homepage-green-soft); }
}

/* 메인 카테고리 최종 규칙: JS가 넣는 앱용 inline 색상보다 홈페이지 탐색 규칙을 우선한다. */
.homepage-page--main .tab-item,
.homepage-page--main .tab-item[style] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    min-height: 48px;
    padding-block: 0;
    background: transparent !important;
    color: var(--homepage-muted) !important;
    border-radius: 0 !important;
}
.homepage-page--main .tab-item:hover,
.homepage-page--main .tab-item[style]:hover { background: var(--homepage-green-soft) !important; color: var(--homepage-warm) !important; }
.homepage-page--main .tab-item.active,
.homepage-page--main .tab-item.active[style] {
    background: transparent !important;
    color: var(--homepage-warm) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--homepage-warm);
}
.homepage-page--main .tab-item.active::after { display: none !important; }

/* 계정/정책 모바일 헤더: 데스크톱 웹 헤더와 동일한 2행 내비게이션을 사용한다. */
@media (max-width: 767px) {
    .homepage-page--addresses .homepage-site-header,
    .homepage-page--coupons .homepage-site-header,
    .homepage-page--account .homepage-site-header,
    .homepage-page--terms .homepage-site-header,
    .homepage-page--privacy .homepage-site-header,
    .homepage-page--orders .homepage-site-header {
        display: block;
        background: var(--homepage-white);
        border-bottom: 1px solid var(--homepage-line);
    }
    .homepage-page--addresses .homepage-site-header__inner,
    .homepage-page--coupons .homepage-site-header__inner,
    .homepage-page--account .homepage-site-header__inner,
    .homepage-page--terms .homepage-site-header__inner,
    .homepage-page--privacy .homepage-site-header__inner,
    .homepage-page--orders .homepage-site-header__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 0 16px;
        width: 100%;
        min-height: 0;
        padding: 10px 16px 0;
    }
    .homepage-page--addresses .homepage-site-header__brand img,
    .homepage-page--coupons .homepage-site-header__brand img,
    .homepage-page--account .homepage-site-header__brand img,
    .homepage-page--terms .homepage-site-header__brand img,
    .homepage-page--privacy .homepage-site-header__brand img,
    .homepage-page--orders .homepage-site-header__brand img { height: 42px; }
    .homepage-page--addresses .homepage-site-header__nav,
    .homepage-page--coupons .homepage-site-header__nav,
    .homepage-page--account .homepage-site-header__nav,
    .homepage-page--terms .homepage-site-header__nav,
    .homepage-page--privacy .homepage-site-header__nav,
    .homepage-page--orders .homepage-site-header__nav {
        display: flex;
        order: initial;
        width: auto;
        margin: 0;
        gap: 16px;
    }
    .homepage-page--addresses .homepage-site-header__nav a,
    .homepage-page--coupons .homepage-site-header__nav a,
    .homepage-page--account .homepage-site-header__nav a,
    .homepage-page--terms .homepage-site-header__nav a,
    .homepage-page--privacy .homepage-site-header__nav a,
    .homepage-page--orders .homepage-site-header__nav a { padding: 10px 0; font-size: 13px; }
    .homepage-page--addresses .homepage-site-header__search,
    .homepage-page--coupons .homepage-site-header__search,
    .homepage-page--account .homepage-site-header__search,
    .homepage-page--terms .homepage-site-header__search,
    .homepage-page--privacy .homepage-site-header__search,
    .homepage-page--orders .homepage-site-header__search { display: none; }
    .homepage-page--addresses .homepage-site-header__cart,
    .homepage-page--coupons .homepage-site-header__cart,
    .homepage-page--account .homepage-site-header__cart,
    .homepage-page--terms .homepage-site-header__cart,
    .homepage-page--privacy .homepage-site-header__cart,
    .homepage-page--orders .homepage-site-header__cart { padding: 10px 0; font-size: 13px; }
    .homepage-page--addresses .homepage-site-header__utility,
    .homepage-page--coupons .homepage-site-header__utility,
    .homepage-page--account .homepage-site-header__utility,
    .homepage-page--terms .homepage-site-header__utility,
    .homepage-page--privacy .homepage-site-header__utility,
    .homepage-page--orders .homepage-site-header__utility {
        display: flex;
        align-items: center;
        grid-column: 1 / -1;
        order: 4;
        justify-content: flex-end;
        min-height: 38px;
        margin-top: 8px;
        border-top: 1px solid var(--homepage-line);
        gap: 16px;
        white-space: nowrap;
    }
    .homepage-page--addresses .homepage-site-header__auth-group,
    .homepage-page--coupons .homepage-site-header__auth-group,
    .homepage-page--account .homepage-site-header__auth-group,
    .homepage-page--terms .homepage-site-header__auth-group,
    .homepage-page--privacy .homepage-site-header__auth-group,
    .homepage-page--orders .homepage-site-header__auth-group { gap: 16px; }
    .homepage-page--addresses .homepage-site-header__utility a,
    .homepage-page--coupons .homepage-site-header__utility a,
    .homepage-page--account .homepage-site-header__utility a,
    .homepage-page--terms .homepage-site-header__utility a,
    .homepage-page--privacy .homepage-site-header__utility a,
    .homepage-page--orders .homepage-site-header__utility a { white-space: nowrap; }
}

/* 상품 상세 웹 레이아웃: 앱의 고정 폭 세로 흐름을 쇼핑몰형 구매 화면으로 확장 */
.homepage-page--product_detail .detail-header { position: sticky; top: 0; left: auto; transform: none; max-width: none; }
.homepage-page--product_detail .detail-content {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(360px, 1fr);
    grid-template-areas:
        "media purchase"
        "tabs tabs";
    column-gap: 64px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 48px 32px 96px;
}
.homepage-page--product_detail .product-detail__media { grid-area: media; min-width: 0; }
.homepage-page--product_detail .product-image { width: 100%; aspect-ratio: 1; border-radius: 14px; }
.homepage-page--product_detail .product-image img { object-fit: cover; object-position: center; background: var(--homepage-paper); }
.homepage-page--product_detail .product-image video { width: 100%; height: 100%; object-fit: contain; background: var(--homepage-paper); }
.homepage-page--product_detail .product-image video[hidden] { display: none; }
.homepage-page--product_detail .product-image-gallery { padding: 14px 0 0; border: 0; }
.homepage-page--product_detail .product-image-gallery__item { width: 72px; height: 72px; flex-basis: 72px; border-radius: 9px; }
.homepage-page--product_detail .product-detail__purchase { grid-area: purchase; align-self: start; position: sticky; top: 104px; min-width: 0; }
.homepage-page--product_detail .product-info { padding: 12px 0 0; }
.homepage-page--product_detail .product-info__category { color: var(--homepage-muted); font-size: 14px; letter-spacing: .02em; }
.homepage-page--product_detail .product-info__name { margin: 10px 0 22px; font-size: clamp(24px, 3vw, 34px); line-height: 1.25; letter-spacing: -.04em; }
.homepage-page--product_detail .product-info__price { padding-bottom: 20px; border-bottom: 1px solid var(--homepage-line); }
.homepage-page--product_detail .product-info__current-price { color: var(--homepage-warm); font-size: 28px; }
.homepage-page--product_detail .product-info__stock { margin-top: 16px; }
.homepage-page--product_detail .option-section { padding: 20px 0 0; border: 0; }
.homepage-page--product_detail .quantity-selector { padding: 20px 0; border-top: 1px solid var(--homepage-line); }
.homepage-page--product_detail .detail-footer { position: static; left: auto; bottom: auto; transform: none; width: 100%; max-width: none; padding: 16px 0 0; border-top: 1px solid var(--homepage-line); }
.homepage-page--product_detail .detail-footer__cart-btn { flex: 1; width: auto; gap: 8px; border-color: var(--homepage-warm); color: var(--homepage-warm); white-space: nowrap; }
.homepage-page--product_detail .detail-footer__buy-btn { background: var(--homepage-warm); }
.homepage-page--product_detail .purchase-disabled-notice { border-radius: 8px; background: var(--homepage-paper); }
.homepage-page--product_detail .quantity-selector__btn:disabled { cursor: not-allowed; opacity: .45; }
.homepage-page--product_detail .detail-tabs { grid-area: tabs; margin-top: 72px; border-top: 1px solid var(--homepage-line); }
.homepage-page--product_detail .detail-tab-content { grid-column: 1 / -1; padding: 32px 0 24px; }
.homepage-page--product_detail .detail-tab-content:not(.active) { display: none; }
.homepage-page--product_detail .quantity-selector__btn:hover { border-color: var(--homepage-warm); color: var(--homepage-warm); }
.homepage-page--product_detail #productDiscount,
.homepage-page--product_detail #productOriginalPrice,
.homepage-page--product_detail #quantityDiscountBadge,
.homepage-page--product_detail #optionSection,
.homepage-page--product_detail #selectedOptionInfo { display: none; }

@media (max-width: 767px) {
    .homepage-site-footer__business { margin-top: 12px; }
    .homepage-page--product_detail .detail-header { position: sticky; }
    .homepage-page--product_detail .detail-content { display: block; padding: 0 0 96px; }
    .homepage-page--product_detail .product-image { border-radius: 0; aspect-ratio: 1; }
    .homepage-page--product_detail .product-image-gallery { padding: 10px 16px 12px; }
    .homepage-page--product_detail .product-info { position: static; padding: 20px 16px; }
    .homepage-page--product_detail .product-detail__purchase { position: static; }
    .homepage-page--product_detail .product-info__name { font-size: 22px; }
    .homepage-page--product_detail .option-section,
    .homepage-page--product_detail .quantity-selector { margin-top: 0; padding: 16px; }
    .homepage-page--product_detail .detail-footer { position: static; margin-top: 0; width: 100%; padding: 12px 16px; border-top: 1px solid var(--homepage-line); }
    .homepage-page--product_detail .detail-tabs { margin-top: 24px; }
    .homepage-page--product_detail .detail-tab-content { padding: 20px 16px 50px; }
}
.homepage-page .popup-modal__btn--close { color: var(--homepage-warm); }
.homepage-page .godam-modal {
    max-width: 420px;
    padding: 24px;
    border: 1px solid var(--homepage-line);
    box-shadow: 0 20px 60px rgba(51, 51, 51, .18);
}
.homepage-page .godam-modal__btn--confirm { background: var(--homepage-warm); }
.homepage-page .godam-modal__btn--confirm:hover { filter: brightness(.94); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* 상품 상세·장바구니 웹 최종 레이아웃 */
.homepage-page--product_detail .detail-header,
.homepage-page--cart .cart-header { display: none !important; }

.homepage-page--product_detail .detail-content {
    grid-template-areas:
        "breadcrumb breadcrumb"
        "hero hero"
        "tabs tabs";
    grid-template-columns: minmax(0, 1fr);
    padding-top: 56px;
}
.homepage-page--product_detail .product-detail__hero {
    grid-area: hero;
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(380px, 1fr);
    grid-template-areas: "media purchase";
    column-gap: 72px;
    align-items: start;
    min-width: 0;
}
.homepage-page--product_detail .product-web-breadcrumb { grid-area: breadcrumb; margin: 0 0 26px; color: var(--homepage-subtle); font-size: 13px; }
.homepage-page--product_detail .product-web-breadcrumb span { margin: 0 7px; color: var(--homepage-line); }
.homepage-page--product_detail .product-detail__purchase {
    padding: 30px 32px 32px;
    border: 1px solid var(--homepage-line);
    border-radius: 14px;
    background: var(--homepage-white);
}
.homepage-page--product_detail .product-info { padding: 0; }
.homepage-page--product_detail .product-info__category { margin: 0 0 12px; font-size: 13px; }
.homepage-page--product_detail .product-info__name { margin: 0 0 24px; font-size: clamp(24px, 2.4vw, 32px); }
.homepage-page--product_detail .product-info__price { align-items: baseline; padding: 0 0 24px; border-bottom: 1px solid var(--homepage-line); }
.homepage-page--product_detail .product-info__current-price { font-size: 30px; letter-spacing: -.04em; }
.homepage-page--product_detail .product-info__stock {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin: 20px 0 0;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--homepage-green-soft);
    color: var(--homepage-warm);
    font-size: 13px;
    font-weight: 600;
}
.homepage-page--product_detail .product-info__stock:empty { display: none; }
.homepage-page--product_detail .quantity-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding: 18px 0;
    border-top: 1px solid var(--homepage-line);
    border-bottom: 1px solid var(--homepage-line);
}
.homepage-page--product_detail .quantity-selector__label { color: var(--homepage-muted); font-size: 14px; font-weight: 600; }
.homepage-page--product_detail .quantity-selector__controls { margin-left: 0; gap: 0; border: 1px solid var(--homepage-line); border-radius: 8px; overflow: hidden; }
.homepage-page--product_detail .quantity-selector__btn { width: 40px; height: 40px; border: 0; border-radius: 0; background: var(--homepage-paper); color: var(--homepage-ink); }
.homepage-page--product_detail .quantity-selector__value { width: 42px; min-width: 42px; font-size: 15px; }
.homepage-page--product_detail .detail-footer { gap: 10px; padding: 24px 0 0; border-top: 0; }
.homepage-page--product_detail .detail-footer__cart-btn,
.homepage-page--product_detail .detail-footer__buy-btn { min-height: 52px; border-radius: 8px; }
.homepage-page--product_detail .detail-footer__buy-btn #totalPriceText { font-size: 16px; font-weight: 700; }
.homepage-page--product_detail .detail-footer__cart-btn { flex: 1; }
.homepage-page--product_detail .detail-footer__buy-btn { flex: 1.25; }

.homepage-page--cart .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 352px;
    grid-template-areas: "cart-intro cart-intro" "cart-select cart-summary" "cart-content cart-summary" "cart-empty cart-empty";
    column-gap: 32px;
    align-content: start;
    width: min(100% - 64px, 1120px);
    margin-inline: auto;
}
.homepage-page--cart .cart-web-intro { grid-area: cart-intro; padding: 56px 0 34px; border-bottom: 1px solid var(--homepage-line); }
.homepage-page--cart .cart-web-intro h1 { margin: 0; font-size: 34px; letter-spacing: -.05em; }
.homepage-page--cart .cart-web-intro p:last-child { margin: 12px 0 0; color: var(--homepage-muted); font-size: 14px; }
.homepage-page--cart .cart-select-all { grid-area: cart-select; position: static; width: auto; height: auto; min-height: 54px; margin: 24px 0 0; padding: 0 4px; transform: none; background: transparent; border-bottom: 1px solid var(--homepage-line); }
.homepage-page--cart .cart-content { grid-area: cart-content; width: auto; margin: 0; padding: 0 0 96px; }
.homepage-page--cart .cart-item { margin: 12px 0; padding: 20px; border: 1px solid var(--homepage-line); border-radius: 12px; background: var(--homepage-white); }
.homepage-page--cart .cart-item + .cart-item { margin-top: 12px; }
.homepage-page--cart .cart-item__img { width: 104px; height: 104px; border-radius: 8px; overflow: hidden; }
.homepage-page--cart .cart-item__img video,
.homepage-page--order .order-item__img video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.homepage-page--cart .cart-item__name { font-size: 15px; font-weight: 600; }
.homepage-page--cart .cart-item__actions { margin-top: 14px; }
.homepage-page--cart .cart-summary { grid-area: cart-summary; position: sticky; top: 100px; left: auto; right: auto; transform: none; align-self: start; width: auto; max-width: none; margin: 24px 0 0; padding: 28px; border: 1px solid var(--homepage-line); border-radius: 14px; background: var(--homepage-white); box-shadow: 0 8px 24px rgba(51,51,51,.06); }
.homepage-page--cart .cart-summary__row { margin-bottom: 14px; }
.homepage-page--cart .cart-summary__total { margin: 22px 0 18px; padding-top: 20px; font-size: 18px; }
.homepage-page--cart .cart-summary__btn { height: 52px; border-radius: 8px; background: var(--homepage-warm); }
.homepage-page--cart .cart-empty { grid-area: cart-empty; width: auto; }
.homepage-page--product_detail .empty-content__icon svg { width: 32px; height: 32px; display: block; margin: 0 auto; }

@media (max-width: 767px) {
    .homepage-page--product_detail .homepage-site-header,
    .homepage-page--cart .homepage-site-header { display: block; }
    .homepage-page--product_detail .homepage-site-header__inner,
    .homepage-page--cart .homepage-site-header__inner { width: 100%; min-height: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 0 16px; padding: 10px 16px 0; }
    .homepage-page--product_detail .homepage-site-header__brand img,
    .homepage-page--cart .homepage-site-header__brand img { height: 42px; }
    .homepage-page--product_detail .homepage-site-header__nav,
    .homepage-page--cart .homepage-site-header__nav { display: flex; order: initial; width: auto; margin: 0; gap: 16px; }
    .homepage-page--product_detail .homepage-site-header__nav a,
    .homepage-page--cart .homepage-site-header__nav a { padding: 10px 0; font-size: 13px; }
    .homepage-page--product_detail .homepage-site-header__search,
    .homepage-page--cart .homepage-site-header__search { display: none; }
    .homepage-page--product_detail .homepage-site-header__cart,
    .homepage-page--cart .homepage-site-header__cart { padding: 10px 0; font-size: 13px; }
    .homepage-page--product_detail .homepage-site-header__utility,
    .homepage-page--cart .homepage-site-header__utility { display: flex; align-items: center; grid-column: 1 / -1; order: 4; justify-content: flex-end; min-height: 38px; margin-top: 8px; border-top: 1px solid var(--homepage-line); gap: 16px; white-space: nowrap; }
    .homepage-page--product_detail .homepage-site-header__auth-group,
    .homepage-page--cart .homepage-site-header__auth-group { gap: 16px; }
    .homepage-page--product_detail .homepage-site-header__utility a,
    .homepage-page--cart .homepage-site-header__utility a { white-space: nowrap; }
    .homepage-page--product_detail .detail-content { display: block; padding: 24px 16px 72px; }
    .homepage-page--product_detail .product-detail__hero { display: block; }
    .homepage-page--product_detail .product-web-breadcrumb { margin-bottom: 18px; }
    .homepage-page--product_detail .product-detail__purchase { padding: 24px 20px; border-radius: 12px; }
    .homepage-page--product_detail .product-info__name { font-size: 24px; }
    .homepage-page--product_detail .product-image { border-radius: 10px; }
    .homepage-page--product_detail .product-info { padding: 0; }
    .homepage-page--product_detail .detail-footer { padding: 20px 0 0; }
    .homepage-page--cart .wrap { display: block; width: 100%; }
    .homepage-page--cart .cart-web-intro { padding: 36px 16px 24px; }
    .homepage-page--cart .cart-web-intro h1 { font-size: 28px; }
    .homepage-page--cart .cart-select-all { margin: 0; padding: 0 16px; }
    .homepage-page--cart .cart-content { padding: 8px 16px 36px; }
    .homepage-page--cart .cart-item { padding: 16px; }
    .homepage-page--cart .cart-item__img { width: 84px; height: 84px; }
    .homepage-page--cart .cart-item__qty button { width: 40px; height: 40px; }
    .homepage-page--cart .cart-summary { position: static; left: auto; right: auto; transform: none; margin: 0 16px 40px; padding: 24px 20px; }
}

/* 태블릿 장바구니: 상품 정보가 좁은 2열에서 찌그러지지 않도록 세로 흐름으로 전환 */
@media (min-width: 768px) and (max-width: 960px) {
    .homepage-page--cart .wrap {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "cart-intro" "cart-select" "cart-content" "cart-summary" "cart-empty";
        width: min(100% - 48px, 760px);
    }
    .homepage-page--cart .cart-select-all { margin-top: 20px; }
    .homepage-page--cart .cart-content { padding-bottom: 28px; }
    .homepage-page--cart .cart-summary { position: static; left: auto; right: auto; transform: none; width: 100%; max-width: none; margin: 0 0 56px; }
}

/* 주문/인증 화면 표현 클래스와 JS display 토글의 초기 상태 */
.homepage-is-hidden,
.homepage-page--main #scheduleBubble,
.homepage-page--main #subCategoryWrap,
.homepage-page--main #emptyState,
.homepage-page--main #loadMore,
.homepage-page--main #popupOverlay,
.homepage-page--main #popupHeader,
.homepage-page--main #btnPopupToday,
.homepage-page--orders #orderList,
.homepage-page--orders #emptyState,
.homepage-page--addresses #addressList,
.homepage-page--addresses #emptyState,
.homepage-page--coupons #emptyState,
.homepage-page--faq #emptyState,
.homepage-page--find_pw #certGroup,
.homepage-page--find_pw #formStep2,
.homepage-page--order #verifySection,
.homepage-page--order #verifyCodeRow,
.homepage-page--order #verifyResendRow,
.homepage-page--order #reserveScheduleInfoSection,
.homepage-page--order #firstComeEventSection,
.homepage-page--order #pickupMethodSection,
.homepage-page--order #pickupTimeSection,
.homepage-page--order #reservePickupSection,
.homepage-page--order #extraRegionGroup,
.homepage-page--order #couponSection,
.homepage-page--order #paymentMethodDesc,
.homepage-page--order #cashReceiptSection,
.homepage-page--order #cashReceiptForm,
.homepage-page--order #addressModal,
.homepage-page--order #addressFormSection,
.homepage-page--order_detail #orderDetail,
.homepage-page--order_detail #payMethodRow,
.homepage-page--order_detail #cashReceiptRow,
.homepage-page--order_detail #actionButtons { display: none; }
.homepage-page--stats #loginRequired,
.homepage-page--stats #statsContent,
.homepage-page--stats #emptyState,
.homepage-page--orders #orderList,
.homepage-page--orders #emptyState,
.homepage-page--addresses #addressList,
.homepage-page--addresses #emptyState,
.homepage-page--coupons #emptyState,
.homepage-page--faq #emptyState,
.homepage-page--find_id #certGroup,
.homepage-page--promotion_detail #promotionEmpty,
.homepage-page--promotion_detail #promotionDetailArticle,
.homepage-page--order_complete #paymentNotice,
.homepage-page--join #verifyCodeRow,
.homepage-page--join #verifyResendRow,
.homepage-page--join #verifyComplete,
.homepage-page--account #phoneVerifyGroup { display: none; }
.homepage-page--order input[name="pickupMethod"] { display: none; }
.find-login-link { display: block; margin-top: 20px; text-decoration: none; }
.reserve-filter__label { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 8px 0; color: var(--homepage-muted); font-size: 13px; }
.form-group__input--full { width: 100%; }
.reserve-date-select { margin-bottom: 14px; }
.reserve-time-title { margin-top: 4px; }
.order-notice { margin-top: 8px; color: var(--homepage-muted); font-size: 13px; }
.order-section__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.order-section__title--flush { margin-bottom: 0; }
.btn-address-list { display: none; padding: 8px 16px; border: 1px solid var(--homepage-line); border-radius: 6px; background: var(--homepage-paper); color: var(--homepage-muted); font-size: 13px; cursor: pointer; }
.address-search-row { display: flex; gap: 8px; margin-bottom: 8px; }
.address-search-row__postcode { flex: 1; }
.btn-search-addr { min-width: 100px; height: 48px; border: 1px solid var(--homepage-line); border-radius: 8px; background: var(--homepage-paper); color: var(--homepage-ink); font-size: 14px; cursor: pointer; }
.address-input { margin-bottom: 8px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox-label__input { width: 18px; height: 18px; }
.checkbox-label__text { color: var(--homepage-ink); font-size: 14px; }
.coupon-select-row { display: flex; align-items: center; gap: 8px; }
.coupon-select-btn { display: flex; flex: 1; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--homepage-line); border-radius: 8px; background: var(--homepage-white); color: var(--homepage-ink); font-size: 14px; text-align: left; cursor: pointer; }
.order-summary__row--coupon { color: var(--homepage-warm); }
.order-summary__row--quantity { color: var(--homepage-muted); }
.cash-receipt-toggle { display: flex; align-items: center; gap: 8px; }
.cash-receipt-toggle__input { width: 20px; height: 20px; }
.cash-receipt-toggle__label { font-size: 14px; font-weight: 500; }
.cash-receipt-form { margin-top: 12px; padding: 12px; border-radius: 8px; background: var(--homepage-paper); }
.cash-receipt-form__types { display: flex; gap: 8px; margin-bottom: 8px; }
.cash-receipt-form__type { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.cash-receipt-form__input { font-size: 14px; }
.pay-method-desc-row { padding: 8px 0; border-bottom: 1px solid var(--homepage-line); color: var(--homepage-muted); font-size: 13px; }

@media (max-width: 767px) {
    /* 홍보 상세 모바일 웹 헤더: 다른 홈페이지 화면에는 노출하지 않는다. */
    .homepage-page--promotion_detail .homepage-site-header { display: block; }
    .homepage-page--promotion_detail .homepage-site-header__inner {
        width: 100%;
        min-height: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0 16px;
        padding: 10px 16px 0;
    }
    .homepage-page--promotion_detail .homepage-site-header__brand img { width: auto; height: 42px; }
    .homepage-page--promotion_detail .homepage-site-header__nav {
        display: flex;
        order: initial;
        width: auto;
        margin: 0;
        gap: 16px;
    }
    .homepage-page--promotion_detail .homepage-site-header__nav a { padding: 10px 0; font-size: 13px; }
    .homepage-page--promotion_detail .homepage-site-header__search { display: none; }
    .homepage-page--promotion_detail .homepage-site-header__utility {
        display: flex;
        align-items: center;
        grid-column: 1 / -1;
        order: 4;
        justify-content: flex-end;
        min-height: 38px;
        margin-top: 8px;
        border-top: 1px solid var(--homepage-line);
        gap: 16px;
    }
    .homepage-page--promotion_detail .homepage-site-header__auth-group {
        display: inline-flex;
        align-items: center;
        gap: 16px;
    }
    .homepage-page--promotion_detail .homepage-site-header__auth-group[hidden] { display: none; }
    .homepage-page--promotion_detail .homepage-site-header__utility a { white-space: nowrap; }
    .homepage-page--promotion_detail .homepage-site-header__cart { padding: 10px 0; font-size: 13px; }
}

/* 주소록·쿠폰 목록은 웹 목록 폭, 계정 폼·정책 본문은 읽기 폭을 유지한다. */
@media (min-width: 768px) {
    .homepage-page--addresses .page-content > #addressList,
    .homepage-page--addresses .page-content > #emptyState,
    .homepage-page--addresses .page-content > #loading,
    .homepage-page--coupons .page-content > .tab-filter,
    .homepage-page--coupons .page-content > .coupon-count,
    .homepage-page--coupons .page-content > .coupon-list,
    .homepage-page--coupons .page-content > #emptyState,
    .homepage-page--coupons .page-content > #loading { max-width: 960px; }
}
.homepage-page--addresses .homepage-site-header__auth-group[hidden],
.homepage-page--coupons .homepage-site-header__auth-group[hidden],
.homepage-page--account .homepage-site-header__auth-group[hidden],
.homepage-page--terms .homepage-site-header__auth-group[hidden],
.homepage-page--privacy .homepage-site-header__auth-group[hidden],
.homepage-page--orders .homepage-site-header__auth-group[hidden] { display: none !important; }

/* 마이페이지 하위 화면은 주문내역과 같은 흰색 문서 표면을 사용한다.
 * 원본 앱 CSS의 회색 page-content와 중첩 카드 그림자를 홈페이지에서만 평탄화한다. */
.homepage-page--addresses,
.homepage-page--coupons,
.homepage-page--account,
.homepage-page--terms,
.homepage-page--privacy,
.homepage-page--addresses .wrap,
.homepage-page--coupons .wrap,
.homepage-page--account .wrap,
.homepage-page--terms .wrap,
.homepage-page--privacy .wrap,
.homepage-page--addresses .page-content,
.homepage-page--coupons .page-content,
.homepage-page--account .page-content,
.homepage-page--terms .content,
.homepage-page--privacy .content {
    background: var(--homepage-white) !important;
}
.homepage-page--account .form-card,
.homepage-page--addresses .address-card,
.homepage-page--coupons .coupon-card {
    box-shadow: none;
}

/* 통계 웹 대시보드: 실제 주문 데이터를 PC 정보 위계에 맞춰 재구성 */
.homepage-page--stats .page-header { display: none !important; }
.homepage-page--stats .wrap { width: 100%; max-width: none; }
.homepage-page--stats .stats-web-intro {
    width: min(100% - 64px, 1120px);
    margin: 0 auto;
    padding: 40px 0 26px;
    border-bottom: 1px solid var(--homepage-line);
}
.homepage-page--stats .stats-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--homepage-muted); font-size: 13px; }
.homepage-page--stats .stats-breadcrumb a { color: var(--homepage-muted); text-decoration: none; }
.homepage-page--stats .stats-breadcrumb a:hover { color: var(--homepage-warm); }
.homepage-page--stats .stats-breadcrumb span[aria-current="page"] { color: var(--homepage-ink); font-weight: 600; }
.homepage-page--stats .stats-web-intro .homepage-account-intro__title { margin: 0; }
.homepage-page--stats .page-content {
    width: min(100% - 64px, 1120px);
    max-width: none;
    margin: 0 auto;
    padding: 36px 0 88px;
}
.homepage-page--stats .login-required,
.homepage-page--stats #emptyState { display: none; }
.homepage-page--stats .stats-content {
    display: none;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr);
    grid-template-areas:
        "summary summary"
        "monthly favorites"
        "weekly category";
    gap: 44px 48px;
}
.homepage-page--stats #statsContent[style*="display: block"] { display: grid !important; }
.homepage-page--stats .stats-section { min-width: 0; margin: 0; border: 0; border-top: 1px solid var(--homepage-line); border-radius: 0; background: var(--homepage-white); box-shadow: none; overflow: visible; }
.homepage-page--stats .stats-section--summary { grid-area: summary; border-top: 0; }
.homepage-page--stats .stats-section--monthly { grid-area: monthly; }
.homepage-page--stats .stats-section--favorites { grid-area: favorites; }
.homepage-page--stats .stats-section--weekly { grid-area: weekly; }
.homepage-page--stats .stats-section--category { grid-area: category; }
.homepage-page--stats .stats-section__title { margin: 0; padding: 18px 0 15px; border: 0; border-bottom: 1px solid var(--homepage-line); background: transparent; color: var(--homepage-ink); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.homepage-page--stats .stats-section--summary .stats-section__title { padding-top: 0; }
.homepage-page--stats .stats-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; border-bottom: 1px solid var(--homepage-line); }
.homepage-page--stats .summary-card { min-width: 0; min-height: 108px; padding: 24px 22px; border-radius: 0; border-right: 1px solid var(--homepage-line); background: var(--homepage-white); text-align: left; }
.homepage-page--stats .summary-card:last-child { border-right: 0; }
.homepage-page--stats .summary-card__value { margin-bottom: 8px; color: var(--homepage-ink); font-size: 26px; font-weight: 700; overflow-wrap: anywhere; }
.homepage-page--stats .summary-card__label { color: var(--homepage-muted); font-size: 14px; }
.homepage-page--stats .stats-favorites,
.homepage-page--stats .stats-weekly,
.homepage-page--stats .stats-category,
.homepage-page--stats .stats-monthly { min-width: 0; padding: 18px 0 0; }
.homepage-page--stats .favorite-item { padding: 14px 0; }
.homepage-page--stats .favorite-item__rank { width: 28px; height: auto; justify-content: flex-start; margin-right: 12px; border-radius: 0; background: transparent; color: var(--homepage-warm); font-variant-numeric: tabular-nums; }
.homepage-page--stats .favorite-item__name { overflow-wrap: anywhere; }
.homepage-page--stats .favorite-item__bar-fill,
.homepage-page--stats .category-item__bar-fill,
.homepage-page--stats .weekly-bar.active .weekly-bar__fill { background: var(--homepage-warm); }
.homepage-page--stats .weekly-chart { height: 180px; }
.homepage-page--stats .monthly-item { display: grid; grid-template-columns: minmax(110px, 1fr) 72px minmax(120px, auto); gap: 16px; padding: 15px 0; }
.homepage-page--stats .monthly-item__month,
.homepage-page--stats .monthly-item__count,
.homepage-page--stats .monthly-item__amount { min-width: 0; font-variant-numeric: tabular-nums; }
.homepage-page--stats .monthly-item__count { text-align: right; }
.homepage-page--stats .monthly-item__amount { color: var(--homepage-ink); overflow-wrap: anywhere; }
.homepage-page--stats .loading { min-height: 180px; border-top: 1px solid var(--homepage-line); border-bottom: 1px solid var(--homepage-line); }
.homepage-page--stats .login-required,
.homepage-page--stats #emptyState {
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: 100%;
    margin: 0;
    padding: 38px 40px;
    border-top: 1px solid var(--homepage-line);
    border-bottom: 1px solid var(--homepage-line);
    background: var(--homepage-white);
    text-align: left;
}
.homepage-page--stats #emptyState[style*="display: block"],
.homepage-page--stats #loginRequired[style*="display: block"] { display: flex !important; }
.homepage-page--stats .stats-state__copy { min-width: 0; }
.homepage-page--stats .stats-state__title { margin: 0; color: var(--homepage-ink); font-size: 20px; line-height: 1.4; letter-spacing: -.02em; }
.homepage-page--stats .login-required__text,
.homepage-page--stats .empty-state__subtext { margin: 8px 0 0; color: var(--homepage-muted); font-size: 14px; line-height: 1.6; }
.homepage-page--stats .login-required .btn,
.homepage-page--stats #emptyState .btn { flex: 0 0 auto; min-width: 128px; min-height: 44px; padding: 12px 22px; border-radius: 2px; background: var(--homepage-warm); color: var(--homepage-white); white-space: nowrap; }
.homepage-page--stats :is(.stats-breadcrumb a, .login-required .btn, #emptyState .btn):focus-visible { outline: 2px solid var(--homepage-warm); outline-offset: 3px; }

@media (min-width: 768px) {
    .homepage-page--stats .homepage-site-header { display: block; }
}

@media (max-width: 1023px) {
    .homepage-page--stats .stats-content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "summary" "monthly" "favorites" "weekly" "category";
        gap: 32px;
    }
    .homepage-page--stats .stats-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .homepage-page--stats .summary-card { border-bottom: 1px solid var(--homepage-line); }
    .homepage-page--stats .summary-card:nth-child(2n) { border-right: 0; }
    .homepage-page--stats .summary-card:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 767px) {
    .homepage-page--stats .homepage-site-header {
        display: block;
        background: var(--homepage-white);
        border-bottom: 1px solid var(--homepage-line);
    }
    .homepage-page--stats .homepage-site-header__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 0 16px;
        width: 100%;
        min-height: 0;
        padding: 10px 16px 0;
    }
    .homepage-page--stats .homepage-site-header__brand img { height: 42px; }
    .homepage-page--stats .homepage-site-header__nav { display: flex; order: initial; width: auto; margin: 0; gap: 16px; }
    .homepage-page--stats .homepage-site-header__nav a { padding: 10px 0; font-size: 13px; }
    .homepage-page--stats .homepage-site-header__search { display: none; }
    .homepage-page--stats .homepage-site-header__cart { padding: 10px 0; font-size: 13px; }
    .homepage-page--stats .homepage-site-header__utility {
        display: flex; align-items: center; grid-column: 1 / -1; order: 4;
        justify-content: flex-end; min-height: 38px; margin-top: 8px;
        border-top: 1px solid var(--homepage-line); gap: 16px; white-space: nowrap;
    }
    .homepage-page--stats .homepage-site-header__auth-group { gap: 16px; }
    .homepage-page--stats .homepage-site-header__auth-group[hidden] { display: none !important; }
    .homepage-page--stats .homepage-site-header__utility a { white-space: nowrap; }
    .homepage-page--stats .stats-web-intro { width: calc(100% - 32px); padding: 28px 0 20px; }
    .homepage-page--stats .stats-breadcrumb { margin-bottom: 10px; font-size: 12px; }
    .homepage-page--stats .page-content { width: calc(100% - 32px); padding: 24px 0 56px; }
    .homepage-page--stats #statsContent[style*="display: block"] { display: block !important; }
    .homepage-page--stats .stats-section { margin-bottom: 28px; }
    .homepage-page--stats .stats-section__title { padding-top: 14px; font-size: 17px; }
    .homepage-page--stats .summary-card { min-height: 96px; padding: 20px 14px; }
    .homepage-page--stats .summary-card__value { font-size: 21px; }
    .homepage-page--stats .monthly-item { grid-template-columns: minmax(92px, 1fr) 58px minmax(92px, auto); gap: 8px; }
    .homepage-page--stats .login-required,
    .homepage-page--stats #emptyState { align-items: flex-start; flex-direction: column; gap: 22px; padding: 28px 20px; }
    .homepage-page--stats .login-required .btn,
    .homepage-page--stats #emptyState .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .homepage-page--stats .loading__spinner { animation: none; }
    .homepage-page--stats .favorite-item__bar-fill,
    .homepage-page--stats .category-item__bar-fill,
    .homepage-page--stats .weekly-bar__fill { transition: none; }
}

/* 약관 탭은 문서 본문을 따라가며, 앱 CSS의 fixed/sticky 동작을 사용하지 않는다. */
.homepage-page--terms .tabs {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    transform: none !important;
}

/* 메인 모바일도 앱용 햄버거 헤더 대신 웹 사이트 헤더를 사용한다. 기존 버튼 DOM은 JS 계약을 위해 유지한다. */
@media (max-width: 767px) {
    .homepage-site-footer {
        background: var(--homepage-paper);
        border-top: 1px solid var(--homepage-line);
    }
    .homepage-page--main .wrap > .header { display: none !important; }
    .homepage-page--main .homepage-site-header {
        display: block;
        background: var(--homepage-white);
        border-bottom: 1px solid var(--homepage-line);
    }
    .homepage-page--main .homepage-site-header__inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 0 16px;
        width: 100%;
        min-height: 0;
        padding: 10px 16px 0;
    }
    .homepage-page--main .homepage-site-header__brand img { height: 42px; }
    .homepage-page--main .homepage-site-header__nav {
        display: flex;
        order: initial;
        width: auto;
        margin: 0;
        gap: 16px;
    }
    .homepage-page--main .homepage-site-header__nav a { padding: 10px 0; font-size: 13px; }
    .homepage-page--main .homepage-site-header__search { display: none; }
    .homepage-page--main .homepage-site-header__cart { padding: 10px 0; font-size: 13px; }
    .homepage-page--main .homepage-site-header__utility {
        display: flex;
        align-items: center;
        grid-column: 1 / -1;
        order: 4;
        justify-content: flex-end;
        min-height: 38px;
        margin-top: 8px;
        border-top: 1px solid var(--homepage-line);
        gap: 16px;
        white-space: nowrap;
    }
    .homepage-page--main .homepage-site-header__auth-group { gap: 16px; }
    .homepage-page--main .homepage-site-header__auth-group[hidden] { display: none !important; }
    .homepage-page--main .homepage-site-header__utility a { white-space: nowrap; }
}

/* 좁은 웹 메인: 고정 앱 헤더 여백을 제거하고 모든 콘텐츠의 좌우선을 맞춘다. */
@media (max-width: 767px) {
    .homepage-page--main .container.has-header {
        width: 100%;
        padding: 16px 16px 40px;
    }
    .homepage-page--main .homepage-site-header__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 0 16px;
        padding: 12px 16px;
    }
    .homepage-page--main .homepage-site-header__brand { grid-column: 1; grid-row: 1; }
    .homepage-page--main .homepage-site-header__brand img { width: auto; height: 40px; }
    .homepage-page--main .homepage-site-header__cart {
        grid-column: 3;
        grid-row: 1;
        position: relative;
        white-space: nowrap;
    }
    .homepage-page--main .homepage-site-header__utility {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        min-height: 40px;
        margin-top: 4px;
        border-top: 0;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 4px 16px;
    }
    .homepage-page--main .homepage-site-header__auth-group { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; }
    .homepage-page--main .homepage-site-header__utility a { display: inline-flex; align-items: center; min-height: 36px; }
    .homepage-page--main .homepage-site-header__nav {
        grid-column: 1 / -1;
        grid-row: 3;
        flex-wrap: wrap;
        gap: 0 20px;
        justify-content: flex-end;
    }
    .homepage-page--main .banner-wrap { border-radius: 8px; box-shadow: none; }
    .homepage-page--main .tab-wrap { margin-top: 20px; }
    .homepage-page--main .tab-list { padding-inline: 0; gap: 20px; }
    .homepage-page--main .product-grid { padding: 20px 0 24px; }
}
@media (min-width: 600px) and (max-width: 767px) {
    .homepage-page--main .homepage-site-header__utility {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
    }
    .homepage-page--main .homepage-site-header__nav { grid-row: 2; }
}

@media (max-width: 599px) {
    .homepage-page--main .homepage-site-header__inner { padding: 10px 16px 4px; }
    .homepage-page--main .homepage-site-header__utility {
        width: 100%;
        margin-top: 8px;
        padding-top: 4px;
        border-top: 1px solid var(--homepage-line);
        justify-content: flex-end;
        gap: 0 12px;
    }
    .homepage-page--main .homepage-site-header__auth-group {
        justify-content: flex-end;
        gap: 0 12px;
    }
    .homepage-page--main .homepage-site-header__utility a { min-height: 44px; }
    .homepage-page--main .homepage-site-header__cart {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
    }
    .homepage-page--main .homepage-site-header__cart-badge {
        position: static;
        flex-shrink: 0;
    }
    .homepage-page--main .homepage-site-header__cart[hidden],
    .homepage-page--main .homepage-site-header__cart-badge[hidden] { display: none !important; }
    .homepage-page--main .homepage-site-header__nav { justify-content: flex-start; gap: 0 16px; }
    .homepage-page--main .homepage-site-header__nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 주문서 최종 우선순위: 파일 내 공통 홈페이지 규칙보다 홈페이지 주문서가 우선한다. */
@media (min-width: 768px) {
    .homepage-page--order .order-header { display: none !important; }
    .homepage-page--order .order-content {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 360px;
        align-items: start;
        gap: 0 56px;
        width: min(100% - 64px, 1200px) !important;
        max-width: 1200px;
        padding: 42px 0 140px !important;
        background: var(--homepage-white);
    }
    .homepage-page--order .order-form-content {
        grid-column: 1;
        min-width: 0;
    }
    .homepage-page--order .order-content::before { grid-column: 1 / -1; content: '주문하기'; display: block; margin-bottom: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--homepage-line); color: var(--homepage-ink); font-size: 30px; font-weight: 700; letter-spacing: -.04em; }
    .homepage-page--order .order-section { grid-column: 1; margin: 0; padding: 28px 0; border: 0; border-bottom: 1px solid var(--homepage-line); border-radius: 0; background: var(--homepage-white); }
    .homepage-page--order .order-section__title { margin: 0 0 20px; color: var(--homepage-ink); font-size: 18px; font-weight: 700; }
    .homepage-page--order .order-section:has(.order-summary) { grid-column: 2; grid-row: 2; position: static; align-self: start; margin: 0; padding: 24px; border: 1px solid var(--homepage-line); background: var(--homepage-white); }
    .homepage-page--order .order-section:has(#paymentMethods) { grid-column: 2; grid-row: 3; align-self: start; padding: 24px; border: 1px solid var(--homepage-line); border-top: 0; }
    .homepage-page--order .order-summary { padding: 0; }
    .homepage-page--order .order-summary__total { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--homepage-ink); }
    .homepage-page--order .order-summary__total span:last-child { color: var(--homepage-warm); font-size: 24px; }
    .homepage-page--order .order-footer { position: fixed; z-index: 95; top: auto; right: max(32px, calc((100vw - 1200px) / 2)); bottom: 24px; left: auto; width: 360px; max-width: none; box-sizing: border-box; padding: 0 24px 24px; transform: none; border: 1px solid var(--homepage-line); border-top: 0; background: var(--homepage-white); }
    .homepage-page--order .order-footer__btn { height: 52px; border-radius: 4px; background: var(--homepage-warm); }
    .homepage-page--order .form-group__input, .homepage-page--order .form-group__textarea, .homepage-page--order select, .homepage-page--order .verify-input, .homepage-page--order .coupon-select-btn { border-radius: 4px; background: var(--homepage-white); }
    .homepage-page--order .pickup-method { border-radius: 4px; background: var(--homepage-white); }
}
@media (max-width: 767px) {
    .homepage-page--order .homepage-site-header { display: block; background: var(--homepage-white); border-bottom: 1px solid var(--homepage-line); }
    .homepage-page--order .homepage-site-header__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 0 16px; width: 100%; min-height: 0; padding: 10px 16px 0; }
    .homepage-page--order .homepage-site-header__brand img { height: 42px; }
    .homepage-page--order .homepage-site-header__nav { display: flex; order: initial; width: auto; margin: 0; gap: 16px; }
    .homepage-page--order .homepage-site-header__nav a { padding: 10px 0; font-size: 13px; }
    .homepage-page--order .homepage-site-header__search { display: none; }
    .homepage-page--order .homepage-site-header__cart { padding: 10px 0; font-size: 13px; white-space: nowrap; }
    .homepage-page--order .homepage-site-header__utility { display: flex; align-items: center; grid-column: 1 / -1; order: 4; justify-content: flex-end; min-height: 38px; margin-top: 8px; border-top: 1px solid var(--homepage-line); gap: 16px; white-space: nowrap; }
    .homepage-page--order .homepage-site-header__auth-group { display: inline-flex; align-items: center; gap: 16px; }
    .homepage-page--order .homepage-site-header__auth-group[hidden] { display: none !important; }
    .homepage-page--order .homepage-site-header__utility a { white-space: nowrap; }
    .homepage-page--order .order-header { display: none !important; }
    .homepage-page--order .order-content { width: 100% !important; padding: 24px 16px 150px !important; background: var(--homepage-white); }
    .homepage-page--order .order-form-content { width: 100%; min-width: 0; }
    .homepage-page--order .order-section { margin: 0; padding: 24px 0; border-radius: 0; border-bottom: 1px solid var(--homepage-line); }
    .homepage-page--order .order-section:has(.order-summary) { border: 0; }
    .homepage-page--order .order-footer { width: 100%; max-width: none; padding: 12px 16px; border-top: 1px solid var(--homepage-line); background: var(--homepage-white); }
}

/* 주문서 보정: fixed CTA로 사이트 푸터를 가리지 않고 일반 문서 흐름에 둔다. */
@media (min-width: 1024px) {
    .homepage-page--order .order-footer {
        position: static;
        width: 360px;
        max-width: none;
        margin: 0 max(32px, calc((100vw - 1200px) / 2)) 40px auto;
        padding: 16px 24px 24px;
        box-sizing: border-box;
        transform: none;
        border: 1px solid var(--homepage-line);
        background: var(--homepage-white);
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .homepage-page--order .order-content {
        grid-template-columns: minmax(0, 1fr);
        width: min(100% - 48px, 760px) !important;
    }
    .homepage-page--order .order-form-content {
        grid-column: 1;
        min-width: 0;
    }
    .homepage-page--order .order-section,
    .homepage-page--order .order-section:has(.order-summary),
    .homepage-page--order .order-section:has(#paymentMethods) {
        grid-column: 1;
        grid-row: auto;
        position: static;
        padding: 28px 0;
        border: 0;
        border-bottom: 1px solid var(--homepage-line);
    }
    .homepage-page--order .order-section:has(.order-summary),
    .homepage-page--order .order-section:has(#paymentMethods) { padding: 28px 0; }
    .homepage-page--order .order-footer {
        position: static;
        width: min(100% - 48px, 760px);
        max-width: none;
        margin: 0 auto 40px;
        padding: 16px 0 24px;
        transform: none;
        border-top: 1px solid var(--homepage-line);
        background: var(--homepage-white);
    }
}

/* 선택 상태는 앱 공용 CSS의 녹색 대신 홈페이지 고담 primary를 사용한다. */
.homepage-page--order .pickup-method.selected {
    border-color: var(--homepage-warm) !important;
    background: var(--homepage-green-soft) !important;
    color: var(--homepage-warm) !important;
}
.homepage-page--order .payment-method.selected {
    border-color: var(--homepage-warm) !important;
    background: var(--homepage-green-soft) !important;
}
.homepage-page--order .payment-method.selected .payment-method__radio {
    border-color: var(--homepage-warm) !important;
}
.homepage-page--order .payment-method.selected .payment-method__radio::after {
    background: var(--homepage-warm) !important;
}

/* 검색 결과는 앱형 고정 헤더 대신 웹 카탈로그의 탐색·목록 리듬을 사용한다. */
.homepage-page--search .wrap {
    width: 100%;
    max-width: none;
}
.homepage-page--search .search-header {
    position: static;
    width: min(100% - 64px, 1120px);
    max-width: 1120px;
    height: 88px;
    margin-inline: auto;
    padding: 20px 0;
    gap: 14px;
    background: var(--homepage-white);
    border-bottom: 1px solid var(--homepage-line);
    transform: none;
}
.homepage-page--search .search-header__label {
    flex: 0 0 auto;
    color: var(--homepage-ink);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}
.homepage-page--search .search-header__input {
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--homepage-line);
    border-radius: 4px;
    background: var(--homepage-paper);
    color: var(--homepage-ink);
    font-size: 15px;
}
.homepage-page--search .search-header__input:focus {
    background: var(--homepage-white);
    border-color: var(--homepage-warm);
}
.homepage-page--search .search-header__btn {
    width: 48px;
    height: 48px;
    color: var(--homepage-ink);
    border: 1px solid var(--homepage-line);
    border-radius: 4px;
}
.homepage-page--search .search-header__btn:hover {
    color: var(--homepage-warm);
    border-color: var(--homepage-warm);
}
.homepage-page--search .search-content {
    width: min(100% - 64px, 1120px);
    max-width: 1120px;
    margin-inline: auto;
    padding: 34px 0 72px;
}
.homepage-page--search .search-results__count {
    margin: 0;
    color: var(--homepage-ink);
    font-size: 17px;
    font-weight: 600;
}
.homepage-page--search .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 38px 24px;
    padding: 24px 0 0;
}
.homepage-page--search .product-card {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--homepage-white);
}
.homepage-page--search .product-card__img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--homepage-paper);
}
.homepage-page--search .product-card__img img,
.homepage-page--search .product-card__img video,
.homepage-page--search .product-card__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}
.homepage-page--search .product-card__cart {
    right: 12px;
    bottom: 12px;
    width: 38px;
    height: 38px;
    z-index: 3;
    background: var(--homepage-warm);
    box-shadow: 0 4px 12px rgba(51,51,51,.16);
}
.homepage-page--search .product-card__play {
    display: none;
}
.homepage-page--search .product-card__cart:hover {
    filter: brightness(.94);
}
.homepage-page--search .product-card__info {
    padding: 14px 2px 0;
}
.homepage-page--search .product-card__name {
    margin-bottom: 8px;
    color: var(--homepage-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}
.homepage-page--search .product-card__price {
    color: var(--homepage-warm);
    font-size: 18px;
    line-height: 1.25;
}
.homepage-page--search .product-card__stock {
    margin-top: 7px;
    color: var(--homepage-subtle);
    font-size: 12px;
}
.homepage-page--search .product-card__stock--low {
    color: var(--homepage-warm);
}
.homepage-page--search .search-empty {
    min-height: 320px;
    padding: 110px 20px;
    color: var(--homepage-muted);
    border-top: 1px solid var(--homepage-line);
}
.homepage-page--search #searchBefore {
    padding: 16px 0 20px;
}
.homepage-page--search .popular-keywords,
.homepage-page--search .recent-keywords {
    max-width: 720px;
    margin-bottom: 28px;
}
.homepage-page--search .popular-keywords__title,
.homepage-page--search .recent-keywords__title {
    color: var(--homepage-ink);
    font-size: 14px;
    font-weight: 700;
}
.homepage-page--search .popular-keywords__item,
.homepage-page--search .recent-keywords__item {
    border-radius: 4px;
    background: var(--homepage-paper);
    color: var(--homepage-muted);
}

@media (min-width: 768px) and (max-width: 1050px) {
    .homepage-page--search .search-header,
    .homepage-page--search .search-content { width: calc(100% - 40px); }
    .homepage-page--search .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .homepage-page--search .search-header {
        width: 100%;
        height: 68px;
        padding: 10px 16px;
        gap: 8px;
    }
    .homepage-page--search .search-header__label { display: none; }
    .homepage-page--search .search-header__input { height: 48px; }
    .homepage-page--search .search-header__btn { width: 44px; height: 48px; }
    .homepage-page--search .search-content {
        width: 100%;
        padding: 26px 16px 56px;
    }
    .homepage-page--search .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 14px;
        padding-top: 20px;
    }
    .homepage-page--search .product-card__info { padding-top: 10px; }
    .homepage-page--search .product-card__name { font-size: 14px; }
    .homepage-page--search .product-card__price { font-size: 16px; }
}

/* 주문서 결제 패널: 금액·결제수단·CTA를 하나의 웹 사이드바로 유지한다. */
@media (min-width: 1024px) {
    .homepage-page--order .order-payment-sidebar {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        position: sticky;
        top: 96px;
        min-width: 0;
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
        border: 1px solid var(--homepage-line);
        background: var(--homepage-white);
    }
    .homepage-page--order .order-payment-sidebar .order-section {
        grid-column: auto;
        grid-row: auto;
        margin: 0;
        padding: 24px;
        border: 0;
        border-bottom: 1px solid var(--homepage-line);
        border-radius: 0;
        background: var(--homepage-white);
    }
    .homepage-page--order .order-payment-sidebar .order-section__title { margin-bottom: 20px; }
    .homepage-page--order .order-payment-sidebar .order-footer {
        position: static;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 20px 24px 24px;
        transform: none;
        border: 0;
        background: var(--homepage-white);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .homepage-page--order .order-payment-sidebar {
        grid-column: 1;
        grid-row: auto;
        position: static;
        max-height: none;
        overflow: visible;
    }
    .homepage-page--order .order-payment-sidebar .order-section {
        grid-column: 1;
        grid-row: auto;
        padding: 28px 0;
        border: 0;
        border-bottom: 1px solid var(--homepage-line);
        border-radius: 0;
    }
    .homepage-page--order .order-payment-sidebar .order-footer {
        position: static;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 16px 0 24px;
        transform: none;
        border: 0;
        background: var(--homepage-white);
    }
}

@media (max-width: 767px) {
    .homepage-page--order .order-payment-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        border: 0;
        background: var(--homepage-white);
    }
    .homepage-page--order .order-payment-sidebar .order-section {
        padding: 24px 0;
        border: 0;
        border-bottom: 1px solid var(--homepage-line);
        border-radius: 0;
    }
    .homepage-page--order .order-payment-sidebar .order-footer {
        position: static;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 16px 0 24px;
        transform: none;
        border: 0;
        background: var(--homepage-white);
    }
}

/* 계정·약관·쿠폰 최종 웹 표면: 페이지별 앱 CSS보다 우선 적용 */
.homepage-page--account .page-content,
.homepage-page--coupons .page-content,
.homepage-page--terms .content,
.homepage-page--privacy .content { background: var(--homepage-white) !important; }
.homepage-page--account .page-content { max-width: 1120px; padding-top: 44px; }
.homepage-page--account .section { max-width: 900px; margin-inline: auto; padding: 0; }
.homepage-page--account .page-content > .section { max-width: 900px; }
.homepage-page--account .section + .section { margin-top: 48px; }
.homepage-page--account .section__title { max-width: none; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--homepage-line); font-size: 18px; font-weight: 700; }
.homepage-page--account .form-card { max-width: none; padding: 28px 32px 32px; border: 1px solid var(--homepage-line); border-radius: 2px; background: var(--homepage-white); }
.homepage-page--account .form-group { margin-bottom: 20px; }
.homepage-page--account .form-group__input, .homepage-page--account .btn { border-radius: 2px; }
.homepage-page--account .withdraw-card { max-width: none; margin-top: 0; padding: 24px 0 0; border-top: 1px solid var(--homepage-line); }
.homepage-page--coupons .page-content { max-width: 1120px; padding-top: 20px; }
.homepage-page--coupons .page-content > .tab-filter,
.homepage-page--coupons .page-content > .coupon-count,
.homepage-page--coupons .page-content > .coupon-list,
.homepage-page--coupons .page-content > #emptyState,
.homepage-page--coupons .page-content > #loading { width: 100%; max-width: 960px; margin-inline: auto; }
.homepage-page--coupons .page-content > .tab-filter { width: fit-content; max-width: 100%; margin-right: auto; }
.homepage-page--coupons .tab-filter { justify-content: flex-start; gap: 28px; width: fit-content; margin: 0 auto 24px 0; border-bottom: 0; background: var(--homepage-white); }
.homepage-page--coupons .tab-btn { flex: 0 0 auto; min-width: 0; min-height: 44px; padding: 12px 2px 10px; border: 0; border-bottom: 3px solid transparent; color: var(--homepage-muted); font-size: 14px; text-align: left; white-space: nowrap; }
.homepage-page--coupons .tab-btn:hover { color: var(--homepage-ink); }
.homepage-page--coupons .tab-btn.active { color: var(--homepage-warm); border-bottom-color: var(--homepage-warm); font-weight: 700; }
.homepage-page--coupons .tab-btn:focus-visible,
.homepage-page--terms .tabs .tab-btn:focus-visible,
.homepage-page--privacy .tabs .tab-btn:focus-visible { outline: 2px solid var(--homepage-warm); outline-offset: 3px; }
.homepage-page--coupons .coupon-count { padding: 0 0 14px; }
.homepage-page--coupons .coupon-list { padding: 0; }
.homepage-page--coupons .coupon-card { border-radius: 2px; box-shadow: none; }
.homepage-page--terms .tabs, .homepage-page--privacy .tabs { display: flex; justify-content: flex-start; gap: 28px; width: fit-content; max-width: 100%; margin: 0 auto; border-bottom: 0; background: var(--homepage-white); }
.homepage-page--terms .tabs .tab-btn, .homepage-page--privacy .tabs .tab-btn { flex: 0 0 auto; min-width: 0; min-height: 44px; padding: 12px 2px 10px; border: 0; border-bottom: 3px solid transparent; color: var(--homepage-muted); font-size: 14px; text-align: left; white-space: nowrap; }
.homepage-page--terms .tabs .tab-btn:hover, .homepage-page--privacy .tabs .tab-btn:hover { color: var(--homepage-ink); }
.homepage-page--terms .tabs .tab-btn.active, .homepage-page--privacy .tabs .tab-btn.active { color: var(--homepage-warm); border-bottom-color: var(--homepage-warm); font-weight: 700; }
.homepage-page--terms .content, .homepage-page--privacy .content { max-width: 1120px; padding-top: 32px; }
.homepage-page--terms .policy-content, .homepage-page--privacy .policy-content { max-width: 960px; margin-inline: auto; padding: 40px 48px; border: 1px solid var(--homepage-line); border-radius: 2px; background: var(--homepage-white); }
@media (max-width: 767px) {
    .homepage-page--account .page-content { padding-top: 28px; }
    .homepage-page--account .section,
    .homepage-page--account .page-content > .section { width: 100%; max-width: none; }
    .homepage-page--account .section + .section { margin-top: 36px; }
    .homepage-page--account .form-card { padding: 20px 16px 24px; }
    .homepage-page--coupons .page-content { padding-top: 24px; }
    .homepage-page--coupons .tab-filter { gap: 18px; max-width: 100%; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
    .homepage-page--coupons .tab-filter::-webkit-scrollbar { display: none; }
    .homepage-page--coupons .tab-btn { min-width: 0; padding-inline: 2px; }
    .homepage-page--terms .tabs, .homepage-page--privacy .tabs { width: 100%; gap: 20px; overflow-x: auto; scrollbar-width: none; }
    .homepage-page--terms .tabs::-webkit-scrollbar, .homepage-page--privacy .tabs::-webkit-scrollbar { display: none; }
    .homepage-page--terms .tabs .tab-btn, .homepage-page--privacy .tabs .tab-btn { min-width: 0; }
    .homepage-page--terms .content, .homepage-page--privacy .content { padding-top: 24px; }
    .homepage-page--terms .policy-content, .homepage-page--privacy .policy-content { padding: 24px 18px; }
}

@media (min-width: 1024px) {
    .homepage-page--login .login-wrap { max-width: 720px; }
}

/* 배송지·쿠폰 웹 목록은 페이지 제목과 같은 1120px 문서 폭을 사용한다. */
.homepage-page--addresses .page-content,
.homepage-page--coupons .page-content {
    width: min(100% - 64px, 1120px);
    max-width: none;
    margin-inline: auto;
}
.homepage-page--addresses .page-content > #addressList,
.homepage-page--addresses .page-content > #emptyState,
.homepage-page--addresses .page-content > #loading,
.homepage-page--coupons .page-content > .tab-filter,
.homepage-page--coupons .page-content > .coupon-count,
.homepage-page--coupons .page-content > .coupon-list,
.homepage-page--coupons .page-content > #emptyState,
.homepage-page--coupons .page-content > #loading {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}
.homepage-page--addresses .page-content > #addressList[style*="display: block"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.homepage-page--addresses #addressList > .address-card,
.homepage-page--coupons .coupon-list > .coupon-card {
    min-width: 0;
    margin: 0;
}
.homepage-page--coupons .tab-filter {
    width: 100%;
    max-width: none;
    margin: 0 0 24px;
}
@media (min-width: 768px) {
    .homepage-page--coupons .tab-filter { margin-bottom: 16px; }
}
.homepage-page--coupons .coupon-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}
.homepage-page--coupons .coupon-card__left {
    min-width: 0;
}
.homepage-page--coupons .coupon-card__name,
.homepage-page--coupons .coupon-card__desc,
.homepage-page--coupons .coupon-card__condition,
.homepage-page--coupons .coupon-card__period {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.homepage-page--coupons .coupon-card__right {
    width: 150px;
    flex: 0 0 150px;
}
.homepage-page--coupons .coupon-card__discount { font-size: 28px; }

@media (min-width: 960px) {
    .homepage-page--addresses .page-content > #addressList[style*="display: block"],
    .homepage-page--coupons .coupon-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .homepage-page--addresses .page-content,
    .homepage-page--coupons .page-content {
        width: calc(100% - 32px);
    }
}

/* 홈페이지 인증 문서 헤더: 앱형 뒤로가기 바 대신 제목과 본문이 이어지는 웹 흐름을 사용한다. */
.homepage-page--login .page-header,
.homepage-page--join .join-header,
.homepage-page--find_id .find-header,
.homepage-page--find_pw .find-header {
    position: static;
    display: block;
    height: auto;
    min-height: 0;
    padding: 40px 0 20px;
    border-bottom: 0;
    background: var(--homepage-white);
}
.homepage-page--login .page-header__back,
.homepage-page--login .page-header__right,
.homepage-page--join .join-header__back,
.homepage-page--join .join-header__right,
.homepage-page--find_id .find-header__back,
.homepage-page--find_pw .find-header__back { display: none; }
.homepage-page--login .page-header__title,
.homepage-page--join .join-header__title,
    .homepage-page--find_id .find-header__title,
    .homepage-page--find_pw .find-header__title {
    display: block;
    padding: 0;
    color: var(--homepage-ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}
.homepage-page--find_id .find-header,
.homepage-page--find_pw .find-header { width: min(100% - 64px, 720px); }
.homepage-page--find_id .find-header__title,
.homepage-page--find_pw .find-header__title { font-size: 28px; }
.homepage-page--login .login-wrap { padding-top: 20px; }
.homepage-page--join .join-content,
.homepage-page--find_id .find-content,
.homepage-page--find_pw .find-content { margin-top: 0; }

.homepage-page--join .join-header__title { text-align: center; }

@media (max-width: 767px) {
    .homepage-page--login .page-header,
    .homepage-page--join .join-header,
    .homepage-page--find_id .find-header,
    .homepage-page--find_pw .find-header { padding: 28px 16px 16px; }
    .homepage-page--login .page-header__title,
    .homepage-page--join .join-header__title,
    .homepage-page--find_id .find-header__title,
    .homepage-page--find_pw .find-header__title { font-size: 24px; }
    .homepage-page--find_id .find-header__title,
    .homepage-page--find_pw .find-header__title { text-align: center; }
    .homepage-page--find_id .find-header,
    .homepage-page--find_pw .find-header { width: 100%; }
    .homepage-page--login .login-wrap { padding-top: 24px; }
}

/* find_id/find_pw 제목은 최종 웹 헤더 기준에서도 중앙 정렬을 유지합니다. */
.homepage-page--find_id .find-header__title,
.homepage-page--find_pw .find-header__title { text-align: center !important; }

/* 홈페이지 로그인: 목적이 분명한 단일 인증 표면 */
.homepage-page--login .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.homepage-page--login .login-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: min(100% - 64px, 980px);
    max-width: 420px;
    min-height: 0;
    margin: 0 auto;
    padding: 40px 0;
}
.homepage-page--login .login-brand {
    display: block;
    margin-bottom: 24px;
    text-align: center;
}
.homepage-page--login .login-brand:focus-visible {
    outline: 2px solid var(--homepage-warm);
    outline-offset: 6px;
}
.homepage-page--login .login-brand__logo {
    display: block;
    width: 112px;
    height: auto;
    margin: 0 auto;
}
.homepage-page--login .login-form {
    width: 100%;
    padding: 36px;
    border: 1px solid var(--homepage-line);
    border-radius: 2px;
    background: var(--homepage-white);
    box-shadow: 0 12px 24px rgba(51, 51, 51, .08);
}
.homepage-page--login .login-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding-bottom: 0;
}
.homepage-page--login .login-links a,
.homepage-page--login .login-footer a {
    display: inline-block;
    padding: 6px 0;
    color: var(--homepage-ink);
    font-size: 13px;
}
.homepage-page--login .login-links a:hover,
.homepage-page--login .login-footer a:hover { color: var(--homepage-warm); }
.homepage-page--login .login-links a + a {
    position: relative;
}
.homepage-page--login .login-links a + a::before {
    position: absolute;
    top: 50%;
    left: -11px;
    width: 1px;
    height: 12px;
    background: var(--homepage-line);
    content: '';
    transform: translateY(-50%);
}
.homepage-page--login .login-footer {
    margin: 20px 0 0;
    color: var(--homepage-muted);
    font-size: 13px;
    text-align: center;
}
.homepage-page--login .login-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.homepage-page--login .login-form__field label {
    color: var(--homepage-ink);
    font-size: 14px;
    font-weight: 600;
}
.homepage-page--login .login-form__input {
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--homepage-line);
    border-radius: 2px;
    background: var(--homepage-paper);
    color: var(--homepage-ink);
    font-size: 15px;
    transition: border-color .2s ease, background-color .2s ease;
}
.homepage-page--login .login-form__input::placeholder { color: var(--homepage-subtle); }
.homepage-page--login .login-form__input:hover { border-color: var(--homepage-muted); }
.homepage-page--login .login-form__input:focus {
    outline: none;
    border-color: var(--homepage-warm);
    background: var(--homepage-white);
}
.homepage-page--login .login-form__btn {
    width: 100%;
    height: 52px;
    margin-top: 4px;
    border: 0;
    border-radius: 2px;
    background: var(--homepage-warm);
    color: var(--homepage-white);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.homepage-page--login .login-form__btn:hover { background: var(--homepage-ink); }
.homepage-page--login .login-form__btn:active { transform: translateY(1px); }
.homepage-page--login .login-form__btn:disabled { background: var(--homepage-subtle); cursor: wait; }
.homepage-page--login .login-form__input:focus-visible,
.homepage-page--login .login-form__btn:focus-visible {
    outline: 2px solid var(--homepage-warm);
    outline-offset: 3px;
}
@media (max-width: 767px) {
    .homepage-page--login .login-wrap {
        width: 100%;
        min-height: 0;
        padding: 32px 16px;
    }
    .homepage-page--login .login-form { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .homepage-page--login .login-form__input,
    .homepage-page--login .login-form__btn { transition: none; }
}