/* =========================
   header.css (헤더/네비 전용)
   - 공통(Reset/Container/Page/Hero/Section/Grid/Footer/Rank 등)은 site.css로 이동
   ========================= */

/* ───────── 상단 공지 ───────── */
.topnotice {
    background: var(--brand);
    color: #fff;
    text-align: center;
    font-size: 14px;
    padding: 8px 0;
}

/* ───────── 헤더 ───────── */
/* 1행: header-top 전체, 2행: brand / search / utils */
.site-header {
    padding: 10px 0 16px;
    display: grid;
    grid-template-columns: 1.2fr 2fr .8fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "top top top"
        "brand search utils";
    row-gap: 10px;
    position: relative;
}

    .site-header.container-1080 {
        display: grid !important;
    }

/* 상단 회원가입/로그인/고객센터 */
.header-top {
    grid-area: top;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.top-links {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
}

.top-link {
    text-decoration: none;
    color: inherit;
}

    .top-link:hover {
        color: var(--ink);
    }

.top-join {
    color: #236d28;
    font-weight: 600;
}

.top-sep {
    color: #ddd;
}

/* 고객센터 드롭다운 */
.cs-menu {
    position: relative;
    display: inline-block;
    padding-bottom: 0px;
}

.cs-btn {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cs-caret {
    font-size: 24px;
}

/* 드롭다운 박스 */
.cs-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0px;
    min-width: 140px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    border-radius: 4px;
    padding: 6px 0;
    display: none;
    z-index: 60;
}

    .cs-dropdown a {
        display: block;
        padding: 6px 12px;
        font-size: 13px;
        color: #333;
        text-decoration: none;
        white-space: nowrap;
    }

        .cs-dropdown a:hover {
            background: #f8f6ff;
            color: #5f0080;
        }

/* hover 시 드롭다운 노출 */
.cs-menu:hover .cs-dropdown {
    display: block;
}

/* 로고/탭 영역 */
.site-header .brand {
    grid-area: brand;
    display: flex;
    gap: 26px;
    align-items: center;
}

    .site-header .brand img {
        height: 40px;
        display: block;
    }

.brand-tabs{
    display:flex;
    align-items:center;
}
.brand-tabs a {
    margin-left: 5px;
    color: var(--muted);
    text-decoration: none;
    font-weight: 400;
    font-size: 18px;
    font-family: var(--font-main);
    line-height: 1;
}

    .brand-tabs a.active {
        color: #125117;
        font-weight: 400;
        font-size: 18px;
        font-family: var(--font-main);
        margin-right: 5px;
    }
.brand-tabs .top-sep {
    margin: 0 6px; /* 미세 조정 */
}
/* 검색 */
.search {
    grid-area: search;
    position: relative;
}

    .search form {
        display: flex;
        border: 2px solid var(--brand);
        border-radius: 24px;
        overflow: hidden;
    }

    .search input {
        flex: 1;
        border: 0;
        padding: 10px 14px;
        outline: none;
        font-size: 15px;
    }

    .search button {
        border: 0;
        padding: 0 14px;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .search button i {
            font-size: 16px;
        }

.search-suggest {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 100%;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
    z-index: 999;
    padding: 12px 12px 10px;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

    .search-suggest.open {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .search-suggest .ss-head {
        font-size: 13px;
        font-weight: 700;
        color: #333;
        margin-bottom: 8px;
    }

    .search-suggest .ss-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .search-suggest .ss-clear {
        border: 0;
        background: transparent;
        cursor: pointer;
        font-size: 12px;
        color: #999;
    }

        .search-suggest .ss-clear:hover {
            color: #666;
            text-decoration: underline;
        }

    .search-suggest .ss-empty {
        padding: 10px 8px 6px;
        font-size: 13px;
        color: #999;
    }

    .search-suggest .ss-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .search-suggest .ss-item {
        width: 100%;
        text-align: left;
        border: 1px solid #f0f0f0;
        background: #fafafa;
        color: #222;
        border-radius: 10px;
        padding: 10px 10px;
        cursor: pointer;
        font-size: 13px;
    }

        .search-suggest .ss-item:hover {
            background: #f3fbf4;
            border-color: #cfe9d1;
            color: var(--brand);
        }

    .search-suggest .ss-divider {
        height: 1px;
        background: #eee;
        margin: 10px 0;
    }

/* 우측 아이콘 영역 */
.utils {
    grid-area: utils;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
    position: relative;
}

.nav-utils-right {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
}

.util-link {
    position: relative;
    text-decoration: none;
    color: var(--ink);
}

    .util-link i {
        font-size: 22px;
    }

/* 장바구니 배지 */
.cart-link {
    padding-right: 2px;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ff0000;
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff;
}

/* ───────── 배송지 아이콘 툴팁 ───────── */
.ship-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px;
    margin: -6px;
}

    .ship-wrap::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 100%;
        width: 120px;
        height: 16px;
        pointer-events: auto;
    }

.ship-btn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.ship-tooltip {
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    max-width: 320px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 6px 18px rgba(0,0,0,.16);
    padding: 12px 14px 14px;
    font-size: 13px;
    color: #222;
    z-index: 1600;
    display: none;
}

.ship-wrap:hover .ship-tooltip {
    display: block;
}

.ship-tooltip::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.ship-tooltip::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 9px 9px 9px;
    border-style: solid;
    border-color: transparent transparent #ddd transparent;
}

.ship-line {
    margin-bottom: 10px;
}

.ship-loading {
    color: #777;
}

.ship-empty {
    color: #777;
}

.ship-addr .addr-main {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}

.ship-addr .addr-sub {
    font-size: 13px;
    color: #7b4ac7;
}

/* 버튼 */
.btn-ship-primary {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    border: 1px solid var(--brand);
    background: #fff;
    color: var(--brand);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

    .btn-ship-primary:hover {
        background: var(--brand);
        color: #fff;
    }

/* ───────── 글로벌 네비 ───────── */
.nav-condensed .global-nav {
    box-shadow: 0 2px #e7e7e7;
}

.global-nav {
    border-bottom: 1px solid var(--line);
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 25;
    padding: 10px 0 10px 0;
}

    .global-nav .nav-inner {
        display: flex;
        align-items: center;
        gap: 24px;
        height: 48px;
        position: relative;
        flex-wrap: nowrap;
    }

        .global-nav .nav-inner.container-1080 {
            display: flex !important;
        }

/* 카테고리 버튼 */
.cat-wrap {
    position: relative;
    height: 48px;
    flex: 0.05 0 auto;
}

.cat-btn .cat-ic {
    font-size: 18px;
    line-height: 1;
    margin-right: 8px;
    color: #333;
    display: inline-flex;
    align-items: center;
}

.global-nav .nav-inner > .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    white-space: nowrap;
    padding: 0 4px;
    margin-left: 24px;
    color: var(--ink);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color .2s ease, transform .2s ease;
}

    .global-nav .nav-inner > .nav-link:hover {
        color: var(--brand);
        transform: translateY(-1px);
    }

    .global-nav .nav-inner > .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 6px;
        height: 3px;
        border-radius: 999px;
        background: var(--brand);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .24s ease;
    }

    .global-nav .nav-inner > .nav-link.active {
        color: var(--brand);
        font-weight: 700;
    }

        .global-nav .nav-inner > .nav-link.active::after {
            transform: scaleX(1);
        }

/* ===== 스크롤 시 우측에 붙는 간단 검색 + 아이콘 ===== */
.nav-right-slim {
    margin-left: auto;
    display: none;
    align-items: center;
    gap: 12px;
}

body.nav-condensed .nav-right-slim {
    display: flex;
}

.nav-search {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    padding: 0 8px;
    height: 30px;
    background: #fafafa;
    position: relative;
}

    .nav-search input {
        border: none;
        outline: none;
        font-size: 13px;
        width: 140px;
        background: transparent;
    }

    .nav-search button {
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 14px;
    }

/* 네비게이션 안에서 재사용하는 아이콘 스타일 */
.global-nav .util-link {
    color: #222;
    font-size: 18px;
    position: relative;
}

.global-nav .cart-badge {
    position: absolute;
    right: -8px;
    top: -6px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #f33;
    color: #fff;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 나머지 글로벌 네비 요소 */
.cat-btn {
    background: transparent;
    border: 0;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
}

    .cat-btn .ic {
        font-size: 22px;
    }


/* ───────── 메가 패널(2단) ───────── */
.mega-panel {
    position: absolute;
    left: 0;
    top: 100%;
    width: 580px;
    max-height: 80vh;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    z-index: 50;
    display: none;
    padding: 10px 12px;
}

.cat-wrap:hover .mega-panel {
    display: block;
}

/* (과거 단일 목록용 규칙과의 호환) */
.mega-panel ul, .mega-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.mega-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
}

    .mega-item:hover {
        background: #f8f6ff;
    }

.mega-panel,
.mega-left,
.mega-right {
    overscroll-behavior: contain;
}

.mega-left,
.mega-right {
    overflow: auto;
    max-height: calc(80vh - 20px);
}

/* 2단 그리드 */
.mega-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    min-height: 320px;
}

/* 왼쪽: 1단계 */
.mega-left {
    border-right: 1px solid var(--line);
    padding-right: 8px;
    overflow: auto;
    max-height: calc(80vh - 20px);
}

.mega-lv1 {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.mega-left .cat-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

    .mega-left .cat-item:hover {
        background: #f6f4ff;
    }

    .mega-left .cat-item.on {
        background: #eaf6ec;
        color: var(--brand);
    }

    .mega-left .cat-item .arrow {
        margin-left: auto;
        color: #aaa;
    }

/* 기본 아이콘/텍스트 크기 */
.mega-ico {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 22px;
}

.mega-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 오른쪽: 2단계(중분류) */
.mega-right {
    padding-left: 4px;
    overflow: auto;
    max-height: calc(80vh - 20px);
}
.mega-right-ico {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 22px;
}

.sub-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

/* ✅ 중분류 텍스트 좌측정렬 강제 */
.sub-link {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    gap: 10px;
}
/* ✅ 중분류 상단: 현재 선택된 대분류명 */
.sub-main-title {
    width: 100%;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 5px 0 10px 0;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    .sub-main-title:hover {
        border-color: var(--brand);
        color: var(--brand);
        background: #f6fbf7;
    }
        .sub-link:hover {
            border-color: var(--brand);
            color: var(--brand);
            background: #f6fbf7;
        }

        .sub-empty {
            color: #999;
            font-size: 13px;
            padding: 10px;
        }

.item-soldout {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-weight: 800;
    letter-spacing: .08em;
    font-size: 18px;
}

/* =========================
   Home Quick Icons (1-row, scroll-snap)
   ========================= */
.home-quickicons-wrap {
    width: 100%;
    display: flex;
    justify-content: center; /* ✅ 전체 중앙 정렬 */
    margin: 12px 0 18px;
}

.home-quickicons {
    /* ✅ 가운데에 놓고, 넘치면 가로 스크롤 */
    width: min(1090px, 100%);
    padding: 10px 14px;
    display: flex;
    gap: 14px;
    justify-content: center; /* ✅ 아이콘 묶음 중앙 정렬 (스크롤 가능 상태에서도 기본 중앙) */
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    /* ✅ 그룹 단위로 “툭툭” 맞춰지는 스냅 */
    scroll-snap-type: x mandatory;
    scroll-padding: 14px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* ✅ 기본 스크롤바 숨김 */
    scrollbar-width: none; /* Firefox */
}

    .home-quickicons::-webkit-scrollbar { /* Chrome/Safari/Edge */
        display: none;
    }

.qi-item {
    flex: 0 0 auto;
    /* ✅ 아이템도 스냅 대상 */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    width: 110px; /* 텍스트 포함 박스 폭 */
    text-decoration: none;
    display: grid;
    grid-template-rows: 100px auto; /* 아이콘 100 + 텍스트 */
    justify-items: center;
    align-items: center;
    row-gap: 6px;
    color: inherit;
    position: relative;
}

    .qi-item img {
        width: 70px; /* 100x100 */
        height: 70px;
        object-fit: contain;
        display: block;
        /*  원형 */
        border-radius: 30%;
        /*  테두리 */
        border: 1px solid #e5e5e5;
        /*  배경 */
        background: #ffffff;
        /*  내부 여백 (아이콘과 테두리 간격) */
        padding: 4px;
        /* 부드러운 효과 */
        transition: all .25s ease;
    }
    /* 마우스 오버 효과 */
    .qi-item:hover img {
        border-color: #125117; /* 브랜드 컬러로 변경 가능 */
        box-shadow: 0 6px 14px rgba(0,0,0,0.08);
        transform: translateY(-4px);
    }
    .qi-item span {
        font-size: 13px;
        line-height: 1.2;
        white-space: nowrap;
    }

.section-title-block.center-title-block {
    text-align: center;
}
.section-title-with-icon.two-line-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    width: auto;
    max-width: 100%;
    white-space: normal;
}
.section-title-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
}

    .section-title-with-icon span {
        display: inline-block;
        flex: 0 1 auto;
        min-width: 0;
        white-space: normal;
        word-break: keep-all;
    }

.section-title-icon {
    width: 55px;
    height: 55px;
    object-fit: contain;
    flex: 0 0 55px;
}
.section-title-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    min-width: 0;
}
.section-title-main {
    margin: 0;
    font-size: 28px; /* 필요시 기존 h3 크기에 맞게 조정 */
    font-weight: 700;
    line-height: 1.2;
    word-break: keep-all;
}
.section-title-text .section-sub {
    margin: 4px 0 0;
    text-align: left;
    line-height: 1.3;
}
/* =========================
   Home 섹션 타이틀 중앙 배치
   ========================= */
.section-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 70px;
}

    .section-header > .center-title-block {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: max-content;
        max-width: calc(100% - 180px);
        text-align: center;
    }

    .section-header > .center-title-block .section-title-with-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0;
        width: auto;
        max-width: 100%;
    }
        .section-header > .center-title-block .section-title-with-icon.two-line-title {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            max-width: 100%;
        }
        .section-header > .center-title-block .section-title-with-icon span {
            display: inline-block;
            min-width: 0;
            word-break: keep-all;
            white-space: normal;
        }

    .section-header > .center-title-block .section-sub {
        text-align: center;
        margin-top: 6px;
    }

/* 오른쪽 전체보기/컨트롤은 기존처럼 우측 유지 */
.section-header > div:last-child {
    margin-left: auto;
    position: relative;
    z-index: 2;
}

/* 모바일에서 터치 스와이프 */
@media (max-width: 768px) {
    .section-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        min-height: auto;
    }

        .section-header > .center-title-block {
            position: static;
            left: auto;
            transform: none;
            width: auto;
            max-width: 100%;
        }

        .section-header > div:last-child {
            margin-left: 0;
        }
    .section-title-with-icon.two-line-title {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        max-width: 100%;
    }
    .section-title-text {
        align-items: flex-start;
        text-align: left;
    }

    .section-title-main {
        font-size: 18px;
        line-height: 1.25;
    }

    .section-title-text .section-sub {
        font-size: 13px;
        margin-top: 3px;
    }

    .section-title-icon {
        width: 50px !important;
        height: auto;
        flex: 0 0 0px;
        margin-top:0px !important;
    }
    .section-title-with-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        max-width: 100%;
        white-space: normal;
    }

        .section-title-with-icon span {
            width: auto;
            max-width: none;
            flex: 0 1 auto;
            word-break: keep-all;
        }

    .section-title-with-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        max-width: 100%;
    }

        .section-title-with-icon span {
            flex: 0 1 auto;
            width: auto;
            max-width: calc(100% - 30px);
            word-break: keep-all;
        }


    .home-quickicons-wrap {
        margin: 2px 0 18px;
    }
    .home-quickicons {
        justify-content: flex-start; /* 모바일에서는 왼쪽부터*/
        padding: 0px 14px;
    }
    .qi-item {
        width: 80px; /* 텍스트 포함 박스 폭 */
    }
    .qi-item img {
        width: 70px !important; /* 100x100 */
    }

}

        /* ============================================================
   ✅ Mobile Header / BottomTabBar (CLEAN)
   - PC: site-header + global-nav 사용
   - Mobile: m-header 표시, site-header 숨김
   - (중요) global-nav는 "숨기지 않음" : mega-panel
   ============================================================ */
        /* 기본(PC): 모바일 헤더 숨김 */
        .m-header {
            display: none;
        }

        @media (max-width: 768px) {

            .site-header.container-1080 {
                display: none !important;
            }
            /* ✅ 1) 모바일에서 PC 상단 헤더만 숨김(중복 제거 핵심) */
            header.site-header {
                display: none !important;
            }
            /* ✅ 2) 모바일 헤더 표시 */
            .m-header {
                display: block !important;
                position: sticky;
                top: 0;
                background: #fff;
                border-bottom: 1px solid var(--line);
                z-index: 3200 !important; /* global-nav(3000) 보다 크게 */
                overflow: visible !important; /* tooltip 잘림 방지 */
            }

            .m-header-inner {
                height: 56px;
                padding: 0 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                overflow: visible !important; /* tooltip 잘림 방지 */
            }

            .m-header .ship-tooltip {
                z-index: 3300 !important;
                margin: 10px -15px;
            }

            .ship-tooltip::after {
                z-index: 2;
                left: 55%;
            }

            .ship-tooltip::before {
                left: 55%;
            }

            .m-logo img {
                height: 40px;
                display: block;
            }

            .m-icons {
                display: inline-flex;
                align-items: center;
                gap: 15px;
            }

            .m-icon {
                border: 0;
                background: transparent;
                cursor: pointer;
                color: var(--ink);
                text-decoration: none;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                position: relative;
                padding: 6px;
            }

                .m-icon i {
                    font-size: 20px;
                }

            .m-cart .m-badge {
                position: absolute;
                top: 2px;
                right: 2px;
                min-width: 16px;
                height: 16px;
                padding: 0 4px;
                border-radius: 999px;
                background: #ff0000;
                color: #fff;
                font-size: 10px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 0 0 2px #fff;
            }
            /*  3) global-nav는 유지(mega-panel이 여기 안에 있음)
        대신 sticky 위치만 모바일 헤더 아래로 */
            .global-nav {
                top: 56px;
                position: sticky;
                z-index: 3000 !important;
            }
            /*  4) 모바일에서는 nav-condensed 우측 슬림검색/아이콘은 사용 안 함 */
            .nav-right-slim,
            body.nav-condensed .nav-right-slim {
                display: none !important;
            }
            /*  5) 모바일에서 PC용 카테고리 버튼(상단)은 숨김
        (하지만 cat-wrap 자체는 DOM에 살아있어야 mega-panel이 뜸) */
            .global-nav .cat-btn {
                display: none !important;
            }
            /*  6) 상단 링크(베스트/스페셜/특가/미용/건강)는 가로 스크롤로 */
            .global-nav .nav-inner {
                gap: 18px !important;
                height: auto !important;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding: 0 6px;
            }

                .global-nav .nav-inner > .nav-link {
                    margin-left: 0 !important;
                    padding: 0 2px !important;
                    height: 46px !important;
                    font-size: 16px !important;
                    font-weight: 600;
                    flex: 0 0 auto;
                }

                    .global-nav .nav-inner > .nav-link::after {
                        bottom: 5px;
                        height: 3px;
                    }
                .global-nav .nav-inner::-webkit-scrollbar {
                    display: none;
                }

            .global-nav .nav-inner {
                scrollbar-width: none;
            }
            /*  하단바 카테고리 클릭 → body.wm-cat-open 시 mega-panel 오버레이 */
            /* 하단 탭바 높이(너 CSS 기준 64px) */
            :root {
                --wm-bottom-tab-h: 64px;
            }

            body.wm-cat-open {
                overflow: hidden !important;
                height: 100vh;
            }

                body.wm-cat-open .m-header {
                    z-index: 1200 !important; /* mega-panel(5000) 아래로 */
                }

                    body.wm-cat-open .m-header .ship-tooltip {
                        display: none !important;
                    }

                body.wm-cat-open .cat-wrap .mega-panel {
                    display: block !important;
                    background: #fff !important;
                    position: fixed !important;
                    left: 0 !important;
                    top: 0 !important;
                    right: 0 !important;
                    bottom: var(--wm-bottom-tab-h) !important; /*  탭바 위까지만 */
                    width: 100vw !important;
                    height: auto !important; /*  bottom 기준으로 자동 */
                    max-height: none !important;
                    z-index: 5000 !important;
                    overflow: hidden !important; /*  바깥(패널)은 고정 */
                    padding: 0 !important;
                    touch-action: none; /*  바깥은 스크롤 막고 */
                    border-radius: 0px;
                }

                body.wm-cat-open .mega-grid {
                    height: 100% !important; /*  패널 내부 높이를 채움 */
                    min-height: 0 !important;
                    gap: 0 !important;
                    grid-template-columns: 44vw 1fr !important;
                }

                body.wm-cat-open .mega-left,
                body.wm-cat-open .mega-right {
                    height: 100% !important;
                    max-height: 100% !important;
                    overflow-y: scroll !important; /*  auto 대신 scroll로 강제 */
                    overflow-x: hidden !important;
                    -webkit-overflow-scrolling: touch;
                    overscroll-behavior: contain;
                    touch-action: pan-y; /* 터치 스크롤 살아남 */
                }
                /* 스크롤바는 숨기되 스크롤은 유지 */
                body.wm-cat-open .mega-left,
                body.wm-cat-open .mega-right {
                    scrollbar-width: none;
                    -ms-overflow-style: none;
                }

                    body.wm-cat-open .mega-left::-webkit-scrollbar,
                    body.wm-cat-open .mega-right::-webkit-scrollbar {
                        width: 0;
                        height: 0;
                        display: none;
                    }
                    /* 항목 패딩/글자 크기 모바일 최적화 */
                    body.wm-cat-open .mega-left .cat-item {
                        padding: 10px 10px;
                    }

                body.wm-cat-open .sub-link {
                    padding: 10px 12px;
                    border: 0px;
                    border-radius: 0px;
                }

                /* 중분류 컨테이너를 3열 그리드로 */
                body.wm-cat-open .sub-wrap {
                    display: grid !important;
                    grid-template-columns: repeat(3, 1fr) !important;
                    gap: 10px !important;
                    align-items: stretch;
                }
                /*  각 중분류 아이템: 아이콘(상단) + 텍스트(하단) */
                body.wm-cat-open .sub-link {
                    flex-direction: column !important;
                    justify-content: center !important;
                    align-items: center !important;
                    text-align: center !important;
                    white-space: normal !important;
                    overflow: visible !important;
                    text-overflow: clip !important;
                    padding: 12px 8px !important;
                    min-height: 92px; /* 신규: 타일 높이 균일화 */
                    gap: 8px !important;
                }
                /* 아이콘 키우기 */
                body.wm-cat-open .mega-right-ico {
                    width: 42px !important;
                    height: 42px !important;
                    flex: 0 0 42px !important;
                }
                /* 텍스트(2행이 필요하면 자연스럽게 줄바꿈) */
                body.wm-cat-open .sub-link .sub-name {
                    display: block;
                    font-size: 13px;
                    line-height: 1.2;
                    word-break: keep-all;
                }


            section img {
                width: 100% !important;
                margin-top: 0px !important;
            }
        }