/* BASIC css start */
/* =========================================================
   메이크샵 PC 상품 분류 페이지 CSS - 정리본
   ---------------------------------------------------------
   정리 원칙
   1. 기존 선택자와 최종 적용 스타일 최대한 유지
   2. 중복 선언 통합 / 들여쓰기 및 속성 순서 정리
   3. 구역별 주석으로 수정 위치 표시
   4. 공통 CSS에 있을 수 있는 스타일은 건드리지 않음
   ========================================================= */


/* =========================================================
   [01] 상품 분류 제목 (대분류명)
   - 상단 여백, 제목 크기, 정렬, 글꼴
   ========================================================= */

#prdBrand .cate-wrap .bcate {
    margin-top: 70px;
    text-align: center;
    font-size: 40px;
    color: #000;
    line-height: 35px;
    font-family: fantasy;
    font-weight: 600;
}


/* =========================================================
   [02] 카테고리 메뉴 전체 영역
   - 메뉴 폭(750px), 바깥 여백, 가운데 정렬
   - 원본에서 margin이 두 번 선언되어 최종 적용되던
     margin: 30px auto 만 남김
   ========================================================= */

#prdBrand .cate-wrap .mcate {
    zoom: 1;
    overflow: hidden;
    width: 750px;
    margin: 30px auto;
    text-align: center;
}

/* 카테고리 항목 배치 */
#prdBrand .cate-wrap .mcate li {
    display: inline-block;

}

/* 카테고리 링크 기본 디자인 */
#prdBrand .cate-wrap .mcate li a {
    display: inline-block;
    margin: 3px;
    padding: 0 7px;
    line-height: 30px;
    font-weight: normal;
    font-size: 11px;
    vertical-align: top;
    color: #000;
    border-radius: 0.3em;
}

/* 마우스 올림 / 현재 선택된 카테고리 */
#prdBrand .cate-wrap .mcate li a:hover,
#prdBrand .cate-wrap .mcate li a.sel {
    color: #ff0000;
    font-weight: bold;
}

/* 카테고리 메뉴 앞 구분용 span */
#prdBrand .cate-wrap .mcate li span {
    display: inline-block;
    margin: 0 7px;
}

/* 첫 번째 카테고리 항목의 span 숨김 */
#prdBrand .cate-wrap .mcate li#ct01 span {
    display: none;
}


/* =========================================================
   [03] 상품 목록 상단 제목 및 상품 개수/정렬 영역
   - .subTit: 서브 타이틀 (현재 HTML에서 비활성일 수 있음)
   - .item-info: 전체 상품 수 / 정렬 메뉴 영역
   ========================================================= */

#prdBrand .sub_wrap .subTit {
    margin: 0 auto; /* 원본 'argin' 오타 수정: 적용 시 위치 변화 가능 */
    width: 1192px;
    padding: 10px 0;
    background: #000;
    text-align: center;
    font-weight: bold;
    color: #fff;
}

#prdBrand .sub_wrap .item-wrap .item-info {
    width: 1400px;
    margin: 50px auto 0 auto;
    padding-top: 30px;
}

/* 전체 상품 개수 문구 */
div.item-total {
    color: black;
}


/* =========================================================
   [04] 상품 이미지 및 BEST 표시
   - 일반 상품 썸네일 높이
   - BEST 상품은 HTML에 height:480px 인라인 스타일이 있어
     아래 .thumb 높이보다 우선 적용됨
   ========================================================= */

.thumb {
    height: 450px;
}

.item-list {
    margin-bottom: 20px !important;
}

.bestTit {
    margin: 10px 0 0 0;
    border: 1px solid #000;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    padding: 3px 0 2px 0;
    width: 326px;
}


/* =========================================================
   [05] 상품 색상 표시
   - .prd-color: 색상 표시 영역 (다른 템플릿 사용 가능)
   - .abcd: 현재 일반 상품 HTML의 색상 칩 영역
   ========================================================= */

.prd-color {
    text-align: left;
    padding: 10px 0 0 0;
    width: 280px;
}

.item-wrap .item-cont .item-list .abcd {
    margin-top: 15px;
}

.abcd span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid #dddddd;
}


/* =========================================================
   [06] 상품 가격 표시
   - 할인 전 가격 / 할인율 / 판매가격 영역
   - display:grid는 현재 가격 줄 배치에 영향을 줄 수 있어 유지
   ========================================================= */

.item-wrap .item-cont .item-list .org_price {
    display: grid;
}


/* =========================================================
   [07] 구매 수 / 리뷰 수
   - HTML 인라인 스타일의 배치 속성을 CSS로 이전
   - 이전과 동일한 display / float / margin / padding 사용
   ========================================================= */

li.order_stock {
    display: inline-block;
    float: left;
    margin-top: 5px;
    color: black;
    font-weight: 500;
    font-size: 11px;
}

li.review_count {
    display: inline-block;
    float: left;
    padding-left: 15px;
    margin-top: 5px;
    color: black;
    font-weight: 500;
    font-size: 11px;
}


/* =========================================================
   [메모] 이번 정리에서 삭제/변경된 항목
   ---------------------------------------------------------
   - .mcate의 앞쪽 중복 margin 선언 삭제 (뒤쪽 값 유지)
   - border-*-radius 4개 -> border-radius 1개로 통합
   - 빈 규칙 '#prdBrand .sub_wrap {}' 삭제
   - 'argin: 0 auto' -> 'margin: 0 auto' 오타 수정
     (실제 .subTit 사용 중이면 좌우 정렬 변화 가능)
   - zoom / *display / !important / display:grid 는 유지
   - 판매수/리뷰수 인라인 속성을 CSS로 이동
   - 품절 글자의 인라인 스타일을 CSS로 이동
   - 그 외 HTML 인라인 스타일 및 메이크샵 공통 CSS는 유지
   ========================================================= */


/* =========================================================
   [08] 품절 표시
   - HTML의 인라인 색상 및 굵기를 CSS로 이동
   ========================================================= */

#prdBrand .item-list .org_price .price-soldout {
    color: #ff0000;
    font-weight: bold;
}


/* =========================================
   [08] 상품 가격 세부 디자인
========================================= */

/* 할인 전 가격 및 할인율 전체 */
.item-wrap .item-cont .item-list .price-original {
    color: #909090;
    font-size: x-small;
    font-weight: normal;
}

/* 할인율 */
.item-wrap .item-cont .item-list .price-discount {
    color: #ff0000;
    font-size: inherit;
    font-weight: inherit;
}

/* 실제 판매가격 */
.item-wrap .item-cont .item-list .price-current {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* 품절 표시 */
.item-wrap .item-cont .item-list .price-soldout {
    color: #ff0000;
    font-weight: bold;
}




/* =========================================
   ACC 쥬얼리 전용 2단 카테고리 메뉴
========================================= */

/* 첫 번째 메뉴의 불필요한 구분 공간 제거 */
#prdBrand .cate-wrap .acc-jewelry-parent-menu li:first-child span {
    display: none;
}

/* ACC 중분류 아래 간격 */
#prdBrand .cate-wrap.acc-jewelry-mode .acc-jewelry-parent-menu {
    margin-bottom: 8px;
}

/* 쥬얼리 소분류 위쪽 간격 */
#prdBrand .cate-wrap.acc-jewelry-mode > ul.mcate:not(.acc-jewelry-parent-menu) {
    margin-top: 8px;
}

/* BASIC css end */