/* BASIC css start */
/* prd-class-hd */
#productClass .page-body { padding-top:40px }

/* 제목 (h2) 스타일 */
#productClass .page-hd h2 {
    font-size: 24px;
    font-weight: 800;
    color: #FF7F00 !important; /* !important 추가로 강제 적용 (임시 방편으로 사용 후, 근본 원인 해결 권장) */
    margin-bottom: 5px; 
    line-height: 1.2;
}

/* 본문 (best-intro) 스타일 */
.best-intro {
    font-size: 16px; /* 현재보다 키워서 가독성 확보 */
    line-height: 1.6; /* 줄 간격 넓혀서 편안하게 읽을 수 있도록 */
    color: #444; /* 진한 회색 계열로 내용 전달력 높이기 */
    font-weight: 500;
    margin-bottom: 25px; /* 상품 목록과 간격 조절 */
}

.best-intro .highlight {
    color: #FF7F00; /* 주황색으로 강조 */
    font-weight: 700;
}

/* prd-class-hd */
#productClass .page-body { padding-top:40px }


.best-intro {
    font-size: 1.3em; /* 글씨 크기를 기본 크기의 1.3배로 설정 */
    line-height: 1.6; /* 줄 간격을 조금 넓혀 가독성을 높입니다. (선택 사항) */
    font-weight: bold; /* 내용을 강조하기 위해 굵게 설정하는 것을 권장합니다. (선택 사항) */
    color: #333; /* 글자색을 약간 진하게 설정하여 눈에 띄게 합니다. (선택 사항) */
    margin-bottom: 25px; /* 아래쪽 상품 목록과 간격을 띄웁니다. (선택 사항) */
}

/* 📌 .item-list에 position: relative 적용 (필수 수정) */
.item-list {
    position: relative; 
}
/* 기존 .item-list .thumb { position: relative; } 코드는 제거하거나 주석 처리합니다. */
/* 순위 번호 디자인 및 위치 지정 */
.rank-num {
  
    top: 5px; /* 이미지 상단에서 5px 아래 */
    left: 5px; /* 이미지 좌측에서 5px 오른쪽 */
    z-index: 10; /* 다른 요소 위에 표시되도록 가장 높은 Z-인덱스 부여 */
    
    /* 디자인 요소 */
    background-color: #ff4d4d; /* 눈에 띄는 배경색 (빨간색 계열 추천) */
    color: #fff; /* 흰색 글자 */
    font-size: 14px; /* 적당한 글자 크기 */
    font-weight: bold; /* 굵게 */
    padding: 3px 6px; /* 내부 여백 */
    border-radius: 10px; /* 모서리를 둥글게 */
    text-align: center;
}


/* BASIC css end */