/* BASIC css start */
body header{
    border-bottom:none;
}

body header.fixed{
    border-bottom:1px solid #e9e9e9;;
}

#LIST_PAGE{
    /*padding-top:115px;*/
}

.categoryList{
    width:276px;
}

.sort_box{
    padding-bottom:40px;
}

.sort_box p{
    font-size:16px;
    font-weight:500;
    line-height:20px;
}

.sort_box .goodsSort select{
    border:none;
    height:20px;
    font-size:14px;
}

.listWrap{
    width:1570px;
    padding:25px 0;
    margin: 0 auto;
}

.categoryList dl dt{
    padding:25px 0;
    font-size:26px;
    font-weight:600;
    line-height:32px;
    border-bottom:1px solid #e9e9e9;
}

.categoryList dl dd .depth_1 > li > a{
    display:block;
    padding:15px 0;
    font-size:18px;
    line-height:25px;
    font-weight:500;
    border-bottom:1px solid #e9e9e9;
}

.categoryList dl dd .depth_1 > li > a.on{
    border-bottom:3px solid #000;
}

.categoryList dl dd .depth_2{
    display:none;
    padding:29px 21.5px;
    background:#f8f8f8;
}

.categoryList dl dd .depth_2 li a{
    display:block;
    margin-bottom:20px;
    font-size:16px;
    line-height:26px;
    font-weight:500;
    color:#b1b1b1;
}

.categoryList dl dd .depth_2 li a.on{
    color:#000;
}

.categoryList dl dd .depth_2 li:last-child a{
    margin-bottom:0;
}







/*상품리스트 가로 4개씩*/
.goodsListWrap.grid_04 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* li 간격 */
}

.goodsListWrap.grid_04 ul li {
    flex: 0 0 calc((100% - 90px) / 4); 
    /* gap이 30px씩 3번 들어가므로 90px 빼줌 */
    margin-right: 0; /* gap이 대신 처리 */
    margin-bottom: 100px;
}



/* ✅ BEST ITEM 섹션 배경 전체 */
.goodsListSection {
    width: 100vw;                          /* 화면 전체 */
    margin-left: calc(-50vw + 50%);        /* 중앙 정렬 보정 */
    background-color: #f2f2f2;             /* 회색 배경 */
    padding: 150px 0;                      /* 위/아래 여백 */
    box-sizing: border-box;
    margin-bottom: 150px;
}


/* 내부 제목 스타일 */
.goodsListSection .goodsTitle {
    text-align: center;
    margin-bottom: 40px;
}
.goodsListSection .goodsTitle .cat-name {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}
.goodsListSection .goodsTitle .sub-title {
    font-size: 21px;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
}

/* ✅ 내부 그리드 (고정형) */
.goodsListSection .goodsListWrap {
    width: 1570px;                         /* 고정 너비 (기존 디자인 유지) */
    margin: 0 auto;                        /* 가운데 정렬 */
    padding: 0;
}


.goodsListSection .goodsListWrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 30px;
}

/* ✅ li 고정 크기 */
.goodsListSection .goodsListWrap ul li {
    width: 369px;                          /* 이미지와 동일한 고정 폭 */
    margin-bottom: 100px;
}

/* ✅ 반응형 제거 (고정 유지) */
@media (max-width: 9999px) {
    .goodsListSection {
        padding: 150px 0;
    }
    .goodsListSection .goodsListWrap {
        width: 1570px; /* 그대로 유지 */
    }
    .goodsListSection .goodsListWrap ul li {
        width: 369px;
    }
}

/* 기존 .wrap 스타일은 제거 */
/* wrap에 width, margin-left 등 적용하면 다른 레이아웃과 충돌 가능하므로 삭제 */


/* ✅ 이미지 크기 */
.goodsListSection .goodsListWrap ul li .imgBox img {
    width: 369px;
    height: 434px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}


.goodsListSection .goodsTitle .best-desc {
    display: block;
    font-size: 16px;
    color: #666;
    margin-top: 15px;
    font-weight: 400;
    text-align: center;
}

/* BASIC css end */