/* layout/header.css — Header · mobile drawer · nav · hero controls */
/* 스크롤 전 헤더 — 배경 없음 (transparent · transparent-dark) */
#main-header:not(.scrolled):not([data-header-mode="solid"]) {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}

/* solid — 흰 배경·다크 로고/메뉴 (크기는 index 스크롤 전과 동일, scroll 시 .scrolled로 축소) */
#main-header[data-header-mode="solid"] .logo-white {
    opacity: 0;
}

#main-header[data-header-mode="solid"] .logo-color {
    opacity: 1;
}

#main-header[data-header-mode="solid"] .header-nav {
    --nav-link-base: var(--gray-900);
}

#main-header[data-header-mode="solid"] .header-mobile-left,
#main-header[data-header-mode="solid"] .header-icons {
    color: var(--gray-900);
}

#main-header[data-header-mode="solid"] .header-icon-btn {
    color: var(--btn-dark-hover);
}

/* 스크롤 후 헤더 · 서브페이지(solid) 초기 상태 */
#main-header.scrolled,
#main-header.menu-open,
#main-header[data-header-mode="solid"] {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: none;
}

#main-header.scrolled {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* 헤더 높이 · 좌우 여백 */
#main-header {
    --header-icon-size: 1.5rem;
    height: 4rem;
    padding-inline: 1.5rem;
    border-bottom: 1px solid transparent;
    transition: height 0.5s ease, background-color 0.5s ease, border-color 0.5s ease;
}

@media (min-width: 1316px) {
    #main-header {
        padding-inline: 3rem;
    }
}

@media (min-width: 768px) {
    #main-header {
        height: 5rem;
    }
}

@media (min-width: 1024px) {
    #main-header {
        height: 5.5rem;
    }
}

/* 스크롤 후 헤더 높이·아이콘 축소 (solid는 색상만 고정, 크기는 scroll 시에만) */
#main-header.scrolled {
    height: var(--header-height-scrolled);
    --header-icon-size: 1.375rem;
}

/* 1024px 이하 — header-nav 폰트 축소 비율과 동일하게 아이콘 축소 (14/15) */
@media (max-width: 1023px) {
    :root {
        --header-icon-size-default: calc(1.5rem * 15 / 17);
        --header-icon-size-scrolled: calc(1.375rem * 14 / 15);
    }

    #main-header {
        --header-icon-size: var(--header-icon-size-default);
    }

    #main-header.scrolled {
        --header-icon-size: var(--header-icon-size-scrolled);
    }
}

@media (min-width: 768px) {
    #main-header.scrolled {
        height: var(--header-height-scrolled);
    }
}

@media (min-width: 1024px) {
    #main-header.scrolled {
        height: var(--header-height-scrolled);
    }
}

.header-left {
    gap: 1.25rem;
    transition: gap 0.5s ease;
}

.header-mobile-left {
    gap: 0.375rem;
}

@media (max-width: 767px) {
    :root {
        /* clamp 하한(1rem)과 본문 px-6(1.5rem) 불일치 방지 — 모바일 좌우 여백 통일 */
        --space-page: 1.5rem;
        --header-padding-x: 1.5rem;
    }

    #main-header {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding-inline: var(--header-padding-x);
        --mobile-toolbar-icon-size: var(--header-icon-size);
        --header-svg-unit: calc(var(--header-icon-size) / 24);
    }

    #main-header.menu-open {
        z-index: 80;
    }

    .header-mobile-left,
    .header-icons {
        position: relative;
        z-index: 2;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
    }

    .header-mobile-left {
        justify-content: flex-start;
    }

    .header-icons {
        justify-content: flex-end;
    }

    /* 본문 var(--space-page)와 맞추기 — SVG viewBox 좌우 여백 보정 */
    .header-mobile-left .header-icon-btn,
    .header-icons .header-icon-btn {
        padding: 0;
    }

    /* 햄버거: path x=4, stroke 1.75 round cap → 좌측 ≈ 3.125 */
    .header-menu-btn {
        margin-inline-start: calc(var(--header-svg-unit) * -3.125);
    }

    /* 장바구니: path 우측 stroke edge ≈ 21.875 → 우측 inset ≈ 2.125 */
    .header-icons > a[href="cart.html"].header-icon-btn {
        margin-inline-end: calc(var(--header-svg-unit) * -2.125);
    }

    .header-left {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        flex: none;
        justify-content: center;
        max-width: 50%;
    }

    .header-logo {
        height: clamp(2.125rem, 7vw, 2.75rem);
        max-width: clamp(6.5rem, 38vw, 9.5rem);
    }

    .header-icons .header-search-desktop,
    .header-icons .header-auth-hidden {
        display: none !important;
        width: 0;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        pointer-events: none;
    }
}

@media (max-width: 400px) {
    .mobile-drawer {
        padding-left: calc(var(--space-page) + var(--mobile-nav-x-start));
        padding-right: var(--space-page);
    }
}

@media (max-width: 360px) {
    .header-left {
        max-width: 46%;
    }

    .header-logo {
        height: clamp(2rem, 6.5vw, 2.5rem);
        max-width: clamp(6rem, 36vw, 8.5rem);
    }

    #main-header.scrolled .header-logo {
        height: clamp(2rem, 6vw, 2.375rem);
        max-width: clamp(6.25rem, 34vw, 7.75rem);
    }

    .hero-slider-controls {
        padding-inline: 1rem;
    }

    .hero-slider-dot {
        width: 24px;
    }
}

@media (min-width: 768px) {
    .header-left {
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .header-left {
        gap: 3.5rem;
    }
}

#main-header.scrolled .header-left {
    gap: 1rem;
}

@media (min-width: 768px) {
    #main-header.scrolled .header-left {
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    #main-header.scrolled .header-left {
        gap: 2.75rem;
    }
}

.header-icons {
    transition: gap 0.5s ease;
}

@media (min-width: 768px) {
    .header-icons {
        gap: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .header-icons {
        gap: 1rem;
    }
}

@media (min-width: 768px) {
    #main-header.scrolled .header-icons {
        gap: 0.625rem;
    }
}

@media (min-width: 1024px) {
    #main-header.scrolled .header-icons {
        gap: 0.75rem;
    }
}

.header-logo {
    height: var(--header-logo-h);
    max-width: clamp(6.5rem, 38vw, 9.5rem);
    transition: height 0.5s ease, max-width 0.5s ease;
}

.header-logo img {
    max-width: 100%;
}

@media (min-width: 768px) {
    .header-logo {
        height: 2.75rem;
        max-width: none;
    }
}

@media (min-width: 1024px) {
    .header-logo {
        height: 3rem;
    }
}

#main-header.scrolled .header-logo {
    height: 2.25rem;
}

@media (max-width: 767px) {
    /* 모바일 툴바 gap — 좌(햄버거·검색) / 우(로그인·장바구니) 동일 */
    .header-mobile-left,
    .header-icons,
    #main-header.scrolled .header-mobile-left,
    #main-header.scrolled .header-icons,
    #main-header.menu-open .header-mobile-left,
    #main-header.menu-open .header-icons {
        gap: 0.375rem;
    }

    #main-header.scrolled .header-logo {
        height: clamp(2rem, 6vw, 2.375rem);
        max-width: clamp(6.25rem, 34vw, 7.75rem);
    }
}

@media (min-width: 768px) {
    #main-header.scrolled .header-logo {
        height: 2.375rem;
    }
}

@media (min-width: 1024px) {
    #main-header.scrolled .header-logo {
        height: 2.5rem;
    }
}

.header-nav {
    gap: 2rem;
    font-size: 1.0625rem;
    align-items: flex-end !important;
    --nav-underline-bottom: 2px;
    --nav-underline-height: 1px;
    --nav-submenu-offset: calc(var(--nav-underline-bottom) - var(--nav-underline-height));
    --nav-link-base: var(--white);
    --nav-link-fill-duration: 0.3s;
    transition: font-size 0.5s ease, gap 0.5s ease;
}

#main-header.scrolled .header-nav {
    --nav-link-base: var(--gray-900);
}

@media (min-width: 1024px) {
    .header-nav {
        gap: 3rem;
        font-size: 1.0625rem;
    }
}

#main-header.scrolled .header-nav {
    gap: 1.625rem;
    font-size: var(--text-ui-md);
}

@media (min-width: 1024px) {
    #main-header.scrolled .header-nav {
        gap: 2.25rem;
        font-size: 1rem;
    }
}

.header-menu-btn__icon {
    position: relative;
    display: block;
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    flex-shrink: 0;
    transition: width 0.5s ease, height 0.5s ease;
}

.header-menu-icon {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    transition: opacity 0.2s ease;
}

.header-menu-icon--close {
    opacity: 0;
}

#main-header.menu-open .header-menu-icon--open {
    opacity: 0;
}

#main-header.menu-open .header-menu-icon--close {
    opacity: 1;
}

.header-nav-link {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 800;
}

.header-nav-link::after {
    bottom: calc(-1 * var(--nav-underline-bottom));
}

.header-nav-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
}

/* 트리거 → 하위메뉴 이동 시 hover 끊김 방지 */
.header-nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: calc(var(--nav-submenu-offset) + 0.75rem);
    background: transparent;
}

.header-nav-link--dropdown {
    border: 0;
    padding-inline: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 800;
    line-height: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    text-align: left;
}

.header-nav-link--dropdown::after,
.header-nav-link--dropdown:hover::after {
    display: none;
}

#main-header.scrolled .header-nav-link,
#main-header.scrolled .header-nav-link--dropdown {
    font-weight: 700;
}

.header-nav-submenu {
    position: absolute;
    top: calc(100% + var(--nav-submenu-offset));
    left: 0;
    z-index: 60;
    box-sizing: border-box;
    width: max(100%, max-content);
    min-width: 100%;
    padding: 1.125rem 1.625rem;
    background-color: var(--brand-gold);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    font-size: 1.0625rem;
    visibility: hidden;
    pointer-events: none;
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--nav-link-fill-duration) ease, visibility 0s linear var(--nav-link-fill-duration), font-size 0.5s ease, padding 0.5s ease, gap 0.5s ease;
}

#main-header.scrolled .header-nav-submenu {
    font-size: var(--text-ui-md);
    padding: 1rem 1.5rem;
    gap: 0.5625rem;
}

.header-nav-submenu::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: calc(var(--nav-submenu-offset) + 0.75rem);
}

.header-nav-dropdown:hover .header-nav-submenu,
.header-nav-dropdown:focus-within .header-nav-submenu,
.header-nav-submenu:hover {
    visibility: visible;
    pointer-events: auto;
    clip-path: inset(0 0 0 0);
    transition-delay: 0s;
}

.header-nav-submenu__link {
    display: block;
    color: var(--white);
    font-weight: 700;
    font-size: 1em;
    letter-spacing: var(--tracking-ko-ui);
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.header-nav-submenu__link:hover {
    opacity: 0.85;
}

/* 모바일 메뉴 패널 — 헤더 아래 페이드 인 */
.mobile-drawer {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 75;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.mobile-drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-drawer .mobile-nav {
    opacity: 0;
    transition: opacity 0.24s ease 0.04s;
}

.mobile-drawer.is-open .mobile-nav {
    opacity: 1;
}

body.mobile-menu-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .mobile-drawer {
        --mobile-nav-icon-size: var(--header-icon-size-default, calc(1.5rem * 15 / 17));
        --mobile-nav-link-size: 1.125rem;
        --mobile-nav-sublink-size: 0.9375rem;
        --mobile-nav-item-py: 1rem;
        --mobile-nav-chevron-size: 1.25rem;
        --mobile-nav-x-start: calc(5 / 24 * var(--mobile-nav-icon-size));
        padding-top: 1.5rem;
        padding-bottom: 2rem;
        padding-left: calc(var(--space-page) + 0.25rem + var(--mobile-nav-x-start));
        padding-right: calc(var(--space-page) + 0.25rem);
    }

    #main-header.scrolled ~ #mobile-drawer {
        top: var(--header-height-scrolled);
        --mobile-nav-icon-size: var(--header-icon-size-scrolled, calc(1.375rem * 14 / 15));
        transition: opacity 0.28s ease, visibility 0.28s ease, top 0.5s ease;
    }
}

@media (min-width: 768px) {
    .mobile-drawer {
        display: none;
    }
}

/* 모바일 드로어 네비 — PC 하위메뉴와 동일 항목 */
.mobile-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mobile-nav__group {
    width: 100%;
}

.mobile-nav__link,
.mobile-nav__trigger {
    font-size: var(--mobile-nav-link-size, 1.125rem);
    font-weight: 700;
    color: var(--gray-900);
    transition: color 0.2s ease, font-size 0.5s ease;
}

.mobile-nav__link:hover,
.mobile-nav__trigger:hover,
.mobile-nav__sublink:hover {
    color: var(--brand-gold);
}

.mobile-nav__link {
    display: block;
    padding: var(--mobile-nav-item-py, 1rem) 0;
    transition: padding 0.5s ease;
}

.mobile-nav__row {
    display: flex;
    align-items: center;
    width: 100%;
}

.mobile-nav__link--parent {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding-right: 0.5rem;
}

.mobile-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    width: auto;
    min-width: 0;
    min-height: calc(var(--mobile-nav-item-py, 1rem) * 2 + var(--mobile-nav-link-size, 1.125rem));
    margin-left: auto;
    padding: 0;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease, min-height 0.5s ease;
}

.mobile-nav__toggle:hover {
    color: var(--brand-gold);
}

.mobile-nav__trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--mobile-nav-item-py, 1rem) 0;
    text-align: left;
    cursor: pointer;
    transition: padding 0.5s ease;
}

.mobile-nav__chevron {
    display: block;
    width: var(--mobile-nav-chevron-size, 1.25rem);
    height: var(--mobile-nav-chevron-size, 1.25rem);
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 0;
    transition: transform 0.25s ease, width 0.5s ease, height 0.5s ease;
}

.mobile-nav__group.is-open .mobile-nav__chevron {
    transform: rotate(180deg);
}

.mobile-nav__submenu {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0 0 0.75rem 1rem;
}

.mobile-nav__submenu[hidden] {
    display: none;
}

.mobile-nav__sublink {
    display: block;
    padding: 0.5rem 0;
    font-size: var(--mobile-nav-sublink-size, 0.9375rem);
    font-weight: 600;
    color: var(--gray-600);
    transition: color 0.2s ease, font-size 0.5s ease;
}

.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.header-icon-btn > svg {
    display: block;
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    flex-shrink: 0;
    overflow: visible;
    transition: width 0.5s ease, height 0.5s ease;
}

/* 로그인(마이페이지) — 장바구니·검색 대비 터치·가독성 */
.header-auth-login > svg {
    width: calc(var(--header-icon-size) * 1.2);
    height: calc(var(--header-icon-size) * 1.2);
}

.header-auth-admin > svg {
    width: var(--header-icon-size);
    height: var(--header-icon-size);
}

.header-icon-btn:hover,
.header-icon-btn:focus-visible,
#main-header .header-icon-btn:hover,
#main-header .header-icon-btn:focus-visible,
#main-header[data-header-mode="solid"] .header-icon-btn:hover,
#main-header[data-header-mode="solid"] .header-icon-btn:focus-visible,
#main-header.scrolled .header-icon-btn:hover,
#main-header.scrolled .header-icon-btn:focus-visible,
#main-header.menu-open .header-icon-btn:hover,
#main-header.menu-open .header-icon-btn:focus-visible,
.product-share-btn:hover,
.product-share-btn:focus-visible {
    color: var(--brand-gold);
    opacity: 1;
}

.product-share-btn {
    margin-top: calc(0.5rem - 1px);
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: var(--btn-dark-hover);
    cursor: pointer;
}

.product-share-btn > svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* 검색 아이콘: 모바일(햄버거 옆) / PC(우측) — custom.css display가 Tailwind hidden을 덮지 않도록 분리 */
.header-search-desktop {
    display: none !important;
}

@media (min-width: 768px) {
    .header-search-desktop {
        display: inline-flex !important;
    }
}

.header-auth-hidden {
    display: none !important;
}

.cart-count {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(calc(-50% + 9px));
    min-width: 14px;
    height: 14px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background-color: var(--brand-gold);
    color: var(--white);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
}

.hero-slider-controls {
    padding-inline: var(--space-page);
}

@media (min-width: 768px) {
    .hero-slider-controls {
        padding-inline: 3rem;
    }
}