/* Black & White Ranking Widget (wr_hit + wr_3) */
.bw-card{
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.bw-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px;
    background: #1c2f53;


    color:#fff;


}
.bw-title {
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 16px;
    font-family: 'Pretendard';
}


.bw-more{ color:#ddd; text-decoration:none; font-weight:600; }
.bw-more:hover{ color:#fff; text-decoration:underline; }

.bw-list{
    list-style:none; margin:0; padding:8px 10px 12px; background:#fff;
}
.bw-item{
    display:grid; grid-template-columns: 36px 1fr auto;
    align-items:center;
    padding:9px 8px;
    border-bottom:1px solid #f0f0f0;
}
.bw-item:last-child{ border-bottom:none; }

.bw-rank{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px;
    font-weight:800; border-radius:4px; background:#fff;
}
.bw-subj{
    color:#111; text-decoration:none; font-weight:700;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size: 16px;
    font-family: Pretendard;
}
.bw-subj:hover{ text-decoration:underline; }
.bw-count{
    color:#000; font-weight:800; letter-spacing:.2px;
    display:inline-flex; align-items:center; gap:8px;
}

/* 변동 뱃지 */
.bw-delta{ font-style:normal; padding:2px 6px; border-radius:12px; font-weight:800; }
.bw-delta.up   { background:#eaf7ef; color:#0a8f3e; }   /* 상승 */
.bw-delta.down { background:#fff0f0; color:#d23a3a; }   /* 하락 */
.bw-delta.new  { background:#eef3ff; color:#2b79ff; }   /* 신규 */
.bw-delta.same { background:#f2f2f2; color:#555; }      /* 동일 */

@media (max-width: 420px){
    .bw-item{ grid-template-columns: 30px 1fr auto; }
    .bw-subj{ font-weight:600; }
    .bw-count{ font-weight:700; font-size:.95rem; gap:6px; }
}


/* 랭킹 번호/아이콘 공통 */
.bw-item .bw-rank{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:28px; height:28px;
    font-weight:700;
    line-height:1;           /* 숫자 수직정렬 안정화 */
    margin-right:8px;
}

/* 상위 1~3등 이미지일 때 여백/정렬 보정 */
.bw-item .bw-rank.top1 img,
.bw-item .bw-rank.top2 img,
.bw-item .bw-rank.top3 img{
    display:block;
    width:24px; height:24px; /* 아이콘 크기 */
}

/* 숫자 등수 가독성 */
.bw-item .bw-rank:not(.top1):not(.top2):not(.top3){
    font-size:14px;
    color:#111;
    background:#f3f5f7;
    border-radius:6px;
}



/* 1위 제목 (금색 느낌) */
.bw-item .bw-rank.top1 + .bw-subj {
    color: #ff0000;  /* gold */
    font-weight: 700;
}

/* 2위 제목 (은색 느낌) */
.bw-item .bw-rank.top2 + .bw-subj {
    color: #002aff;  /* silver */
    font-weight: 700;
}

/* 3위 제목 (동색 느낌) */
.bw-item .bw-rank.top3 + .bw-subj {
    color: #c15e00;  /* bronze */
    font-weight: 700;
}

/* 기본 상태 */
.bw-subj {
    text-decoration: none;     /* 밑줄 제거 */
    transition: transform 0.2s ease, color 0.2s ease; /* hover 애니메이션 부드럽게 */
    display: inline-block;     /* transform 적용하려면 block/inline-block 필요 */
}

/* hover 시 효과 */
.bw-subj:hover {
    text-decoration: none;     /* hover 시에도 밑줄 제거 */
    transform: translateY(-2px); /* 위로 살짝 이동 */

}

@media (max-width: 760px) {
    .bw-subj {
        font-size:15px;
    }

    .bw-count {
        letter-spacing: 0;
        gap: 3px;
        font-size: 11px;
    }

    .bw-item {


        padding: 8px 0;

    }

}