/* 버튼 그룹 active 유지 */
#bestRange .best-range-btn { 
  transition: background-color .2s, color .2s; 
}
#bestRange .best-range-btn.active { 
  background: linear-gradient(90deg,#a78bfa,#ec4899); 
  color:#fff; 
}

/* 순위 배지 (크기 확대 + z-index) */
.rank-badge {
  position:absolute; 
  right:.6rem; 
  bottom:.6rem;
  min-width:3.2rem; 
  height:3.2rem; 
  line-height:3.2rem;
  border-radius:9999px; 
  text-align:center; 
  font-weight:900; 
  font-size:1.25rem;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  padding:0 .5rem; 
  color:#fff; 
  z-index: 20;  
  background: linear-gradient(135deg,#6366f1,#a855f7);
  transform: translateZ(0);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
/* 숫자 출력 (크게 + 이탤릭) */
.rank-badge::after { 
  content: attr(data-rank); 
  font-size: 1.6rem;   /* ⬆ 숫자 크기 키움 */
  font-style: italic;  /* ⬅ 이탤릭 적용 */
}

/* 1~3위: SVG 왕관 아이콘 */
.rank-1::before, .rank-2::before, .rank-3::before {
  content: '';
  position: absolute;
  top: -1.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2rem;
  height: 1.4rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}

/* 금색 왕관 (1위) */
.rank-1::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 40"><path fill="%23FFD700" stroke="%23B8860B" stroke-width="2" d="M2 38 L10 10 L24 26 L32 6 L40 26 L54 10 L62 38 Z"/><circle cx="32" cy="6" r="4" fill="%23FFD700" stroke="%23B8860B" stroke-width="2"/></svg>');
}

/* 은색 왕관 (2위) */
.rank-2::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 40"><path fill="%23C0C0C0" stroke="%23808080" stroke-width="2" d="M2 38 L10 10 L24 26 L32 6 L40 26 L54 10 L62 38 Z"/><circle cx="32" cy="6" r="4" fill="%23C0C0C0" stroke="%23808080" stroke-width="2"/></svg>');
}

/* 동색 왕관 (3위) */
.rank-3::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 40"><path fill="%23CD7F32" stroke="%238B4513" stroke-width="2" d="M2 38 L10 10 L24 26 L32 6 L40 26 L54 10 L62 38 Z"/><circle cx="32" cy="6" r="4" fill="%23CD7F32" stroke="%238B4513" stroke-width="2"/></svg>');
}

/* 1~3위 배경 스타일 */
.rank-1{
  background: radial-gradient(circle at 30% 30%, #fffbea, #facc15 45%, #b45309 100%);
  color:#3d2f00; 
  border:3px solid rgba(255,255,255,.8);
  box-shadow: 0 0 20px rgba(250,204,21,0.9), 0 0 40px rgba(250,204,21,0.6);
}
.rank-2{
  background: radial-gradient(circle at 30% 30%, #f9f9f9, #d1d5db 45%, #6b7280 100%);
  color:#1f2937; 
  border:3px solid rgba(255,255,255,.8);
  box-shadow: 0 0 20px rgba(209,213,219,0.9), 0 0 40px rgba(209,213,219,0.6);
}
.rank-3{
  background: radial-gradient(circle at 30% 30%, #fff4e6, #f59e0b 45%, #92400e 100%);
  color:#422006; 
  border:3px solid rgba(255,255,255,.8);
  box-shadow: 0 0 20px rgba(245,158,11,0.9), 0 0 40px rgba(245,158,11,0.6);
}