/* ------------------------------------------------------------
 * online.css
 * - 온라인 영역 공통 레이아웃만 관리
 * ------------------------------------------------------------ */

.online-subtabs-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.online-stats-head{
  margin-bottom:14px;
}

.online-content-stack{
  min-height:320px;
}

.online-subview{
  display:none;
}

.online-subview.online-subview-active{
  display:block;
}

.shared-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}

.shared-page-numbers{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.shared-page-size{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.shared-page-size-btn,
.shared-page-number,
.shared-page-nav{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.shared-page-nav:disabled{
  opacity:.45;
}

.loading-skeleton{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(239,241,236,0.9), rgba(248,249,246,0.98));
}

.loading-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.58) 50%, rgba(255,255,255,0) 100%);
  animation:communityShimmer 1.2s infinite;
}

@keyframes communityShimmer{
  to{transform:translateX(100%)}
}

@media (max-width:400px){
  .online-subtabs-row{
    gap:8px;
  }
}