/* ==========================================================================
   bf.visitor — 접속자 현황

   전역 main.css '11-3. 접속자' 에서 옮겨 왔다.
   ========================================================================== */

.vis-now {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  padding: 11px 13px;
  background: var(--sky-50); border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--ink-600);
}
.vis-now b {
  font-family: var(--font-en);
  font-size: 17px; font-weight: 700; color: var(--sky-t2);
}
.vis-now small { width: 100%; font-size: 11.5px; color: var(--ink-400); }
.vis-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(23,191,160,.6);
  animation: pulse 2s infinite;
}
.vis-stat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.vis-stat li { position: relative; text-align: center; }
.vis-stat li + li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1px; height: 20px; margin-top: -10px; background: var(--line);
}
.vis-stat span { display: block; font-size: 11.5px; color: var(--ink-400); }
.vis-stat b {
  display: block; margin-top: 2px;
  font-family: var(--font-en);
  font-size: 14px; font-weight: 700; color: var(--ink-800);
}
.vis-stat-sub {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line);
}


/* 새로고침 버튼. 공용 껍데기 구역에 있었지만 이 위젯만 쓴다 */

.widget-refresh {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--ink-400); background: var(--sky-50);
  transition: all .2s;
}
.widget-refresh:hover { background: var(--sky-100); color: var(--sky-t2); }
.widget-refresh .ico { width: 14px; height: 14px; }
.widget-refresh.is-spin .ico { animation: spin .6s linear; }

/* 이 위젯만 쓰는 애니메이션 — 접속중 점(.vis-dot)과 새로고침 회전 */
@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px rgba(23,191,160,0); }
  100% { box-shadow: 0 0 0 0 rgba(23,191,160,0); }
}
@keyframes spin { to { transform: rotate(360deg); } }