/* 참고사이트(myloveyou.co.kr 모바일) 스타일 — ≤1090px */

.mref-header-extra,
.mref-icon-wrap,
.mref-col-switch,
#header .header_top .mref-btn-my,
#header .header_top .mref-top-cart .mref-cart-img,
.mref-menu-prev,
.mref-menu-next {
    display: none;
}

@media screen and (max-width: 1090px) {

    /* ---- 헤더: 햄버거 / 로고 / 카트+마이 ---- */
    #header .header_top {
        height: 60px !important;
        border-bottom: 0 !important;
        background: #fff !important;
    }

    #header .header_top .asideBtn {
        display: block !important;
        left: 12px !important;
        top: 50% !important;
        width: 28px !important;
        height: 28px !important;
        margin-top: -14px !important;
        background: url('/m/images/menubar.png') center / 22px auto no-repeat !important;
        z-index: 40 !important;
    }
    #header .header_top .asideBtn:before,
    #header .header_top .asideBtn:after,
    #header .header_top .asideBtn span {
        display: none !important;
    }

    #header .header_top .headerLogo {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 140px !important;
        pointer-events: none;
        z-index: 20 !important;
    }
    #header .header_top .headerLogo a { pointer-events: auto; }
    #header .header_top .headerLogo a img,
    #header .header_top .headerLogo .shop_logo {
        max-width: 130px !important;
        max-height: 46px !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    #header .header_top .layoutStateRight {
        right: 8px !important;
        top: 0 !important;
        width: auto !important;
        height: 60px !important;
        z-index: 40 !important;
    }
    #header .header_top .layoutstatelog {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 2px !important;
        height: 60px !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }
    #header .header_top .layoutstatelog > a:not(.basket):not(.mref-btn-my):not(.mref-top-cart) {
        display: none !important;
    }
    #header .header_top .layoutstatelog .top_search {
        display: none !important;
    }

    /* 카트 (왼쪽) → 마이(오른쪽) — 참고사이트 순서 */
    #header .header_top .layoutstatelog > a.basket,
    #header .header_top .mref-top-cart {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-size: 0 !important;
        order: 1 !important;
        z-index: 30 !important;
    }
    #header .header_top .mref-btn-my {
        display: block !important;
        position: relative !important;
        right: auto !important;
        top: auto !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: url('/m/images/common/btn_mem_view.png') center top / 40px auto no-repeat !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
        font-size: 0 !important;
        line-height: 0 !important;
        order: 2 !important;
        z-index: 30 !important;
    }

    #header .header_top .layoutstatelog > a.basket span:first-child,
    #header .header_top .mref-top-cart span:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #header .header_top .pc-cart-img {
        display: none !important;
    }
    #header .header_top .mref-cart-img {
        display: block !important;
        width: 28px !important;
        height: 28px !important;
        object-fit: contain !important;
        vertical-align: top !important;
    }
    #header .header_top .layoutstatelog > a.basket .count,
    #header .header_top .layoutstatelog > a.basket .cart-count,
    #header .header_top .mref-top-cart .count,
    #header .header_top .mref-top-cart .cart-count {
        position: absolute !important;
        right: 0 !important;
        top: 2px !important;
        left: auto !important;
        bottom: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
        margin: 0 !important;
        padding: 0 3px !important;
        border-radius: 8px !important;
        background: #f00 !important;
        background-color: #f00 !important;
        color: #fff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    #header .header_top .layoutstatelog > a.basket .count span,
    #header .header_top .mref-top-cart .count span {
        position: static !important;
        display: inline !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        color: #fff !important;
        font-size: 10px !important;
        line-height: 16px !important;
    }

    /* PC GNB 숨기고 모바일 메뉴바 표시 */
    #header .header_gnb,
    .brand_zone_menu {
        display: none !important;
    }

    .mref-header-extra {
        display: block !important;
        width: 100% !important;
        background: #fff !important;
        border-bottom: 1px solid #eee !important;
    }

    .mref-searchbar {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .mref-searchbar .top_search {
        position: relative !important;
        width: 90% !important;
        padding: 0 3% !important;
        border: 3px solid #5ba6f5 !important;
        border-radius: 20px !important;
        margin: 5px auto !important;
        box-sizing: border-box !important;
        background: #fff !important;
        z-index: 20 !important;
    }
    .mref-searchbar .top_text_cont {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        float: none !important;
    }
    .mref-searchbar .top_text_cont::after { display: none !important; }
    .mref-searchbar .top_srarch_text {
        float: none !important;
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        height: 32px !important;
        line-height: 32px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        border: 0 !important;
        background: transparent !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }
    .mref-searchbar .btn_top_srarch {
        float: none !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 4px 0 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
    }

    /* ---- 가로 카테고리 메뉴바 (+화살표) ---- */
    .mref-menubar {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 40px !important;
        border-bottom: 1px solid #ccc !important;
        overflow: hidden !important;
        background: #fff !important;
    }
    .mref-menu-prev,
    .mref-menu-next {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        z-index: 5 !important;
        width: 28px !important;
        height: 40px !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: #fff !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 14px auto !important;
        cursor: pointer !important;
    }
    .mref-menu-prev {
        left: 0 !important;
        background-image: url('/m/images/menuarrow_prev.png') !important;
    }
    .mref-menu-next {
        right: 0 !important;
        background-image: url('/m/images/menuarrow_next.png') !important;
    }
    .mref-menubar-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        height: 40px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0 30px !important;
        box-sizing: border-box !important;
        scroll-behavior: smooth !important;
    }
    .mref-menubar-track::-webkit-scrollbar { display: none !important; }
    .mref-menubar-track > div {
        flex: 0 0 auto !important;
        height: 40px !important;
        line-height: 40px !important;
        padding: 0 10px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
    .mref-menubar-track > div a {
        font-size: 15px !important;
        color: #222 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    /* ---- 홈 아이콘 4열 (이미지 정렬) ---- */
    .mref-icon-wrap {
        display: block !important;
        width: 100% !important;
        padding: 0 5% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .mref-icon-wrap::after {
        content: "" !important;
        display: block !important;
        clear: both !important;
    }
    .mref-icon-wrap > div {
        float: left !important;
        width: 22% !important;
        margin: 10px 4% 0 0 !important;
        padding: 10px 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    .mref-icon-wrap > div:nth-child(4n) {
        margin-right: 0 !important;
    }
    .mref-icon-wrap > div > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 45px !important;
    }
    .mref-icon-wrap > div a img {
        width: 45px !important;
        height: 45px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
        vertical-align: top !important;
    }
    .mref-icon-wrap > div p {
        margin: 0 !important;
        padding: 5px 0 0 !important;
        font-size: 12px !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    .mref-icon-wrap > div p a {
        color: #3e8bdb !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    /* ---- 상품 1/2/3열 전환 버튼 ---- */
    .mref-col-switch {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 0 !important;
        padding: 8px 12px 4px !important;
        box-sizing: border-box !important;
    }
    .mref-col-switch .chgViewTypeLink {
        display: inline-block !important;
        opacity: 0.35 !important;
        line-height: 0 !important;
        margin: 0 !important;
    }
    .mref-col-switch .chgViewTypeLink.on {
        opacity: 1 !important;
    }
    .mref-col-switch .chgViewTypeLink img {
        width: 30px !important;
        height: auto !important;
        border: 1px solid #ddd !important;
        padding: 7px !important;
        margin-right: -5px !important;
        box-sizing: content-box !important;
        background: #fff !important;
        vertical-align: top !important;
    }

    /* ---- 상품 그리드: CSS Grid (기존 flex/width 충돌 회피) ---- */
    .main_goods_cont .goods_list_cont ul,
    .main_goods_cont ul.grid5,
    .main_goods_cont ul.grid6,
    .main_goods_cont ul.grid4,
    .main_goods_cont ul.grid3 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 4px 8px 12px !important;
        box-sizing: border-box !important;
        list-style: none !important;
        float: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    .goods_list_item .item_gallery_type > ul,
    .goods_list_item .goods_list_cont ul,
    .goods_list_cont > ul,
    .sct_wrap > ul.sct,
    .sct_wrap ul.sct_10,
    .sct_wrap ul.sct_20,
    .sct_wrap ul.sct_30,
    .sct_wrap ul.smt_10,
    .sct_wrap ul.smt_20,
    .sct_wrap div.smt_20,
    .sct_wrap .smt_20.sct,
    #sct ul.sct {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 4px 8px 12px !important;
        box-sizing: border-box !important;
        list-style: none !important;
        float: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    .main_goods_cont .goods_list_cont ul > li,
    .main_goods_cont ul.grid5 > li,
    .main_goods_cont ul.grid6 > li,
    .main_goods_cont ul.grid4 > li,
    .main_goods_cont ul.grid3 > li,
    .goods_list_item .item_gallery_type > ul > li,
    .goods_list_item .goods_list_cont ul > li,
    .goods_list_cont > ul > li,
    .sct_wrap > ul.sct > li,
    .sct_wrap ul.sct_10 > li,
    .sct_wrap ul.sct_20 > li,
    .sct_wrap ul.sct_30 > li,
    .sct_wrap ul.smt_10 > li,
    .sct_wrap ul.smt_20 > li,
    .sct_wrap .smt_20 .sct_li,
    .sct_wrap div.smt_20 .sct_li,
    #sct ul.sct > li {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: none !important;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        height: auto !important;
    }

    /* smt_20 절대배치 해제 */
    .sct_wrap .smt_20 .sct_ul,
    .sct_wrap div.smt_20 .sct_ul,
    .sct_wrap .smt_20 .sct_ul_first {
        display: contents !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        top: auto !important;
        left: auto !important;
        float: none !important;
    }

    /* 상품 이미지 정렬 */
    .goods_list_item .item_gallery_type .item_photo_box,
    .sct_wrap .sct_img,
    .main_goods_cont .item_photo_box {
        position: relative !important;
        overflow: hidden !important;
        background: #f7f7f7 !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        margin-bottom: 8px !important;
    }
    .goods_list_item .item_gallery_type .item_photo_box a,
    .sct_wrap .sct_img a,
    .main_goods_cont .item_photo_box a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
    .goods_list_item .item_gallery_type .item_photo_box img,
    .sct_wrap .sct_img img,
    .main_goods_cont .item_photo_box img,
    .main_goods_cont ul > li img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        margin: 0 auto !important;
    }

    /* 1열 — 분류 목록만 (홈 BEST/메인상품은 항상 2열 유지) */
    html.mref-cols-1 .goods_list_item .item_gallery_type > ul,
    html.mref-cols-1 .goods_list_item .goods_list_cont ul,
    html.mref-cols-1 .sct_wrap > ul.sct,
    html.mref-cols-1 .sct_wrap ul.sct_10,
    html.mref-cols-1 .sct_wrap ul.sct_20,
    html.mref-cols-1 .sct_wrap ul.sct_30,
    html.mref-cols-1 .sct_wrap ul.smt_10,
    html.mref-cols-1 .sct_wrap ul.smt_20,
    html.mref-cols-1 .sct_wrap div.smt_20,
    html.mref-cols-1 #sct ul.sct,
    body.mref-cols-1 .goods_list_item .item_gallery_type > ul,
    body.mref-cols-1 .goods_list_item .goods_list_cont ul,
    body.mref-cols-1 .sct_wrap > ul.sct,
    body.mref-cols-1 .sct_wrap ul.sct_10,
    body.mref-cols-1 .sct_wrap ul.sct_20,
    body.mref-cols-1 .sct_wrap ul.sct_30,
    body.mref-cols-1 .sct_wrap ul.smt_10,
    body.mref-cols-1 .sct_wrap ul.smt_20,
    body.mref-cols-1 .sct_wrap div.smt_20,
    body.mref-cols-1 #sct ul.sct {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* 3열 — 분류 목록만 */
    html.mref-cols-3 .goods_list_item .item_gallery_type > ul,
    html.mref-cols-3 .goods_list_item .goods_list_cont ul,
    html.mref-cols-3 .sct_wrap > ul.sct,
    html.mref-cols-3 .sct_wrap ul.sct_10,
    html.mref-cols-3 .sct_wrap ul.sct_20,
    html.mref-cols-3 .sct_wrap ul.sct_30,
    html.mref-cols-3 .sct_wrap ul.smt_10,
    html.mref-cols-3 .sct_wrap ul.smt_20,
    html.mref-cols-3 .sct_wrap div.smt_20,
    html.mref-cols-3 #sct ul.sct,
    body.mref-cols-3 .goods_list_item .item_gallery_type > ul,
    body.mref-cols-3 .goods_list_item .goods_list_cont ul,
    body.mref-cols-3 .sct_wrap > ul.sct,
    body.mref-cols-3 .sct_wrap ul.sct_10,
    body.mref-cols-3 .sct_wrap ul.sct_20,
    body.mref-cols-3 .sct_wrap ul.sct_30,
    body.mref-cols-3 .sct_wrap ul.smt_10,
    body.mref-cols-3 .sct_wrap ul.smt_20,
    body.mref-cols-3 .sct_wrap div.smt_20,
    body.mref-cols-3 #sct ul.sct {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px 6px !important;
        padding: 4px 6px 12px !important;
    }

    html.mref-cols-3 .item_info_cont .item_name,
    html.mref-cols-3 .item_info_cont .item_money_box,
    html.mref-cols-3 .sct_txt,
    html.mref-cols-3 .sct_cost,
    html.mref-cols-3 .item_gallery_type .item_name,
    html.mref-cols-3 .item_gallery_type .item_price,
    body.mref-cols-3 .item_info_cont .item_name,
    body.mref-cols-3 .item_info_cont .item_money_box,
    body.mref-cols-3 .sct_txt,
    body.mref-cols-3 .sct_cost,
    body.mref-cols-3 .item_gallery_type .item_name,
    body.mref-cols-3 .item_gallery_type .item_price {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    /* 홈 메인상품: 열전환과 무관하게 항상 2열 */
    html.mref-cols-1 .main_goods_cont .goods_list_cont ul,
    html.mref-cols-1 .main_goods_cont ul.grid5,
    html.mref-cols-1 .main_goods_cont ul.grid6,
    html.mref-cols-1 .main_goods_cont ul.grid4,
    html.mref-cols-1 .main_goods_cont ul.grid3,
    html.mref-cols-3 .main_goods_cont .goods_list_cont ul,
    html.mref-cols-3 .main_goods_cont ul.grid5,
    html.mref-cols-3 .main_goods_cont ul.grid6,
    html.mref-cols-3 .main_goods_cont ul.grid4,
    html.mref-cols-3 .main_goods_cont ul.grid3,
    body.mref-cols-1 .main_goods_cont .goods_list_cont ul,
    body.mref-cols-1 .main_goods_cont ul.grid5,
    body.mref-cols-1 .main_goods_cont ul.grid6,
    body.mref-cols-1 .main_goods_cont ul.grid4,
    body.mref-cols-1 .main_goods_cont ul.grid3,
    body.mref-cols-3 .main_goods_cont .goods_list_cont ul,
    body.mref-cols-3 .main_goods_cont ul.grid5,
    body.mref-cols-3 .main_goods_cont ul.grid6,
    body.mref-cols-3 .main_goods_cont ul.grid4,
    body.mref-cols-3 .main_goods_cont ul.grid3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 8px !important;
    }

    /* HOT MODEL 등 메인 배너: 모바일에서도 2·3열 유지 */
    .mainBanner ul.cols3 {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .mainBanner ul.cols3 > li {
        width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
        padding: 0 3px !important;
        box-sizing: border-box !important;
    }
    .mainBanner ul.cols2 > li,
    .mainBanner ul.cols2_1 > li {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
    }
    .mainBanner ul.cols2 > li img,
    .mainBanner ul.cols2_1 > li img,
    .mainBanner ul.cols3 > li img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover !important;
    }

    /* 정렬바 + 열전환 버튼 간격 */
    .goods_list_item .goods_pick_list,
    .shop-sort-bar {
        margin-top: 4px !important;
    }
}