@charset "utf-8";

/*
 * LUMID 쇼핑몰 흰색 상단 메뉴
 * 기존 다온테마의 HTML과 동작은 유지하고 색상과 구분선만 정돈합니다.
 */

#hd {
    background: #fff;
}

#tnb {
    border-bottom-color: #eceff3;
    background: #fff;
}

#tnb a {
    color: #5f6368;
}

#tnb a:hover,
#tnb a:focus {
    color: #111;
}

#hd_wrapper {
    background: #fff;
}

#hd_scha #sch_str {
    border: 1px solid #222;
    color: #111;
    background: #fff;
}

#hd_scha #sch_str:hover,
#hd_scha #sch_str:focus {
    border-color: #111;
}

#hd_scha #sch_submit {
    color: #111;
}

/* 주 메뉴는 흰색, 전체 카테고리 버튼만 검정색으로 구분합니다. */
#hd_menu {
    height: 48px;
    border-top: 1px solid #eceff3;
    border-bottom: 1px solid #dfe3e8;
    background: #fff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}

#hd_menu button#menu_open {
    height: 47px;
    color: #fff;
    background: #111;
}

#hd_menu .ul_1st .active,
#hd_menu .ul_1st > li.active {
    height: 47px;
    border-bottom: 3px solid #e8492a;
}

#hd_menu .ul_1st > li > a {
    height: 47px;
    line-height: 47px;
    color: #222;
    font-weight: 500;
}

#hd_menu .ul_1st > li:hover > a,
#hd_menu .ul_1st > li > a:focus {
    color: #e8492a;
}

#hd_menu .ul_2nd {
    top: 47px;
    border-color: #e2e5e9;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}

#hd_menu .ul_2nd > li > a:hover,
#hd_menu .ul_2nd > li.active > a {
    color: #e8492a;
    background: #f7f8fa;
}

/*
 * 모바일/태블릿 카테고리 메뉴
 * 기존 검정 띠를 PC 상단 메뉴와 같은 흰색 계열로 통일합니다.
 */
@media (max-width: 1300px) {
    #mobile_hd,
    #mobile_hd_wr,
    #categories {
        background: #fff;
    }

    #mobile_hd_wr {
        border-bottom: 0;
    }

    #categories {
        border-top: 0;
        border-bottom: 0;
        box-shadow: none;
    }

    #categories ul li {
        color: #222;
    }

    #categories ul li a {
        color: #222;
        font-weight: 500;
    }

    #categories ul li a:hover,
    #categories ul li a:focus,
    #categories ul li.active a {
        color: #e8492a;
    }

    #categories ul li.active:after {
        background: #e8492a;
    }

    /* 검색 영역에 겹쳐 보이던 위·아래·왼쪽 선을 제거합니다. */
    #searchpn {
        margin-top: 0;
        border: 0;
    }

    #searchpn #hd_sch_2 {
        border: 0;
        background: #f8fafc;
    }

    #searchpn #sch_str {
        background: #f8fafc;
    }

    /* 헤더 전체에는 선 대신 아주 옅은 한 겹의 그림자만 사용합니다. */
    #mobile_hd {
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05);
    }
}

/* 영카트의 완전한 모바일 전용 화면도 동일한 흰색 헤더를 사용합니다. */
@media (max-width: 768px) {
    #hd,
    #hd_wr {
        background: #fff;
    }

    #hd_wr {
        border-bottom: 0;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    }

    #btn_hdcate,
    #btn_hdsch,
    #btn_hduser,
    #btn_hdcart {
        color: #222;
    }

    #hd_sch {
        background: #fff;
        border-bottom: 0;
    }

    #hd_sch #sch_str {
        color: #222;
        background: #f7f8fa;
        border: 1px solid #dfe3e8;
    }
}
/* 루미드는 사이트 포인트를 운영하지 않으므로 고객용 포인트 링크를 숨깁니다. */
.win_point,
#ol_after_pt,
.my_point,
a.point[href*="point.php"],
a[href*="/bbs/point.php"] {
    display: none !important;
}

#point_coupon {
    display: none !important;
}

/* 상품명 아래 구분선과 같은 색으로 상품 이미지 영역을 가볍게 구분합니다. */
.sct_40 .sct_img {
    position: relative;
}

.sct_10 .sct_img::after,
.smt_10 .sct_img::after,
.smt_20 .sct_img::after,
.sct_40 .sct_img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 1px solid #d9dde2;
    box-sizing: border-box;
    pointer-events: none;
}

/* PC 상품검색/카테고리 목록은 한 줄에 4개로 통일합니다. */
@media (min-width: 1101px) {
    .sct_10.lists-row .sct_li {
        width: 23.5% !important;
        margin-right: 2% !important;
        clear: none !important;
    }

    .sct_10.lists-row .sct_li:nth-child(4n) {
        margin-right: 0 !important;
    }

    .sct_10.lists-row .sct_li:nth-child(4n + 1) {
        clear: both !important;
    }

    .sct_10.lists-row .sct_img > a > img {
        width: 100% !important;
        height: auto !important;
    }
}