/* ==========================================================================
   bf.rank — 실시간 랭킹

   전역 main.css '11-2. 랭킹' 에서 옮겨 왔다.

   ※ 위젯 껍데기(.widget · .widget-head · .widget-tit · .widget-body)는 여기
     없다. 사이드바 위젯 다섯이 함께 쓰는 공용이라 전역에 남긴다. 다섯이 모두
     제 스타일을 갖게 되면 그때 공용 파일로 옮기는 편이 맞다.

   ※ 순위 배지(.no · .no1~3)는 여기 있다
     widget.php 의 $bf_no() 가 'no no1' 처럼 조립해 내보내므로 마크업만
     훑는 도구에는 안 잡힌다. 손으로 확인해 가져왔다.
   ========================================================================== */

.rank-post li + li { margin-top: 2px; }
.rank-post a {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 4px;
  border-radius: var(--r-xs);
  transition: background .18s;
}
.rank-post a:hover { background: var(--sky-50); }
.rank-post span {
  flex: 1 1 auto; min-width: 0;
  font-size: 13.5px; color: var(--ink-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-post a:hover span { color: var(--sky-t3); }
.no {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 6px;
  background: var(--sky-50);
  font-family: var(--font-en);
  font-size: 11px; font-weight: 700; color: var(--ink-400);
}
.no1 { background: var(--sky-600); color: #fff; }
.no2 { background: var(--sky-400); color: #fff; }
.no3 { background: var(--sky-300); color: #fff; }
/* --sky-300 은 다크에서도 연한 하늘색이라 혼자 하얗게 뜨고 흰 숫자가 묻힌다 */
:root[data-theme="dark"] .no3 { background: #4A80AC; }

.rank-user li {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 4px;
}
.rank-user li + li { border-top: 1px dashed var(--line-soft); }
.u-thumb {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--sky-100); color: var(--sky-t1);
}
.u-thumb .ico { width: 15px; height: 15px; }
.rank-user b { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-700); }
.rank-user i {
  flex: none;
  font-family: var(--font-en);
  font-size: 12px; font-weight: 700; color: var(--sky-t2);
}


/* 탭(인기글 · 회원) — 공용 껍데기 구역에 섞여 있었지만 이 위젯만 쓴다 */

.widget-tabs { display: flex; gap: 4px; }
.wtab {
  height: 26px; padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--sky-50);
  font-size: 12.5px; font-weight: 600; color: var(--ink-500);
  transition: all .18s;
}
.wtab.on { background: var(--sky-500); color: #fff; }
.wtab-panel { display: none; }
.wtab-panel.on { display: block; animation: fadeIn .25s ease; }

/* 이 위젯이 쓰는 애니메이션. 전역 main.css 에도 같은 이름이 있지만(.tab-panel ·
   .dt-panel 이 함께 쓴다) 위젯을 떼어 내도 돌아야 하므로 같은 정의를 둔다.
   내용이 같아 어느 쪽이 이겨도 결과가 같다. */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }