/* BASIC css start */
* { margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; }

img {
    width: 100%;
    display: block; /* 이미지 하단 미세한 공백 틈 제거 */
}

.wrap {
    text-align: center; 
    margin-top: 0; /* PC 환경 상단 여백 완벽 제거 (기존 68px -> 0) */
}
.wrap > div { position: relative; width: 100%; }

.flex { display: flex; }

.bcate { 
    padding: 100px 0 35px; 
    font-size: 30px; 
    color: #000; 
    font-weight: 500;  
    font-family: 'Lato', sans-serif;
    text-align: center; 
    border-bottom: solid 1px #eee; 
}

.list_wrap_line {
    width: 100%; /* 이미지 1장만 있어도 가로 100% 꽉 차도록 강제 */
    flex: 1;     /* flex 부모 안에서 영역을 온전히 차지하도록 보장 */
}

.prod_list_r {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 15px;
    row-gap: 28px;
}
.prod_list_r li {
    flex-basis: calc(25% - 15px); /* PC에서는 4개씩 나열 */
}
            
.item_list_name { margin-top: 10px; }
.item_em, .item_span { 
    font-style: normal;
    font-size: 13px;
    display: block;
    margin-bottom: 4px;
    line-height: 15px;
}
.item_list { margin-right: 0; }

/* =========================================
   모바일 최적화 (가로 768px 이하 화면 해상도)
   ========================================= */
@media screen and (max-width: 768px) {
    .wrap {
        margin-top: 0; /* 모바일 환경 상단 여백 완벽 제거 (기존 20px -> 0) */
    }
    .bcate { 
        padding: 40px 0 20px; /* 카테고리 타이틀 여백 축소 */
        font-size: 22px;      /* 폰트 크기 모바일 최적화 */
    }
    .prod_list_r {
        column-gap: 8px;
        row-gap: 20px;
    }
    .prod_list_r li {
        flex-basis: calc(50% - 4px); /* 만약 상품 리스트가 있다면 모바일에서는 2개씩 나열되도록 최적화 */
    }
}
/* BASIC css end */