/* BASIC css start */
/* 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; /* 아래쪽 상품 목록과 간격을 띄웁니다. (선택 사항) */
}

/* 썸네일 영역에 position: relative를 적용하여, 
   하위 요소인 순위 번호(rank-num)의 기준점을 만듭니다. */
.item-list .thumb {
    position: relative; 
    /* 이미지 링크나 dt 태그에 이미 position: relative;가 적용되어 있다면 생략 가능 */
}

/* 순위 번호 디자인 및 위치 지정 */
.rank-num {
    position: absolute; /* 절대 위치 지정 */
    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: 3px; /* 모서리를 둥글게 */
    text-align: center;
}
/* BASIC css end */