*{ box-sizing: border-box; }
ul{ margin: 0; padding: 0; list-style: none; }

.ui-subtitle {
  margin: 0 0 16px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: .2px;
}

.server-card{
  max-width: 860px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01) 60%, transparent),
              var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 28px);
}

/* 정보 그리드: 모바일 1열 → 데스크톱 2열 */
.info-grid {
  display: grid;
  gap: 10px 18px;
  margin: 0;
  #border:1px solid #ddd;
  background: #222;
  padding:10px 0;
}

.info-grid .row{
  display: grid;
  grid-template-columns: minmax(80px, 120px) 1fr;
  gap: 10px 16px;
  padding: 10px 15px;
  border-bottom: 1px dashed rgba(255,255,255,.06);
  align-items: center;
}
.info-grid .row:last-child{ border-bottom: 0; }

.tit {
  margin: 0;
  font-weight: 600;
  color: var(--muted);
}
.con {
  margin: 0;
  word-break: break-word;
}

/* 주소 표시 + 복사 버튼 */
.addr{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}
.copy-btn{
  margin-left: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.copy-btn:hover{ border-color: var(--accent); }

/* 상태 뱃지 */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .6rem; border-radius:.5rem;
  font-size:.85rem; font-weight:600;
  border:1px solid var(--border, rgba(255,255,255,.15));
  background:var(--card, #1f2937); color:var(--text, #e5e7eb);
}

.badge::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%;
  background:currentColor; opacity:.9;
}

/* 열림 = 초록 */
.badge--open{
  color:#10b981;
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.35);
}

/* 닫힘 = 붉은/회색 */
.badge--closed{
  color:#ef4444;
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.35);
}

/* (선택) 열림 점 깜박임 효과 */
.badge--open::before{
  animation: pulse 1.4s infinite ease-in-out;
}
@keyframes pulse{
  0%,100%{ transform:scale(.9); opacity:.7; }
  50%{ transform:scale(1.2); opacity:1; }
}

.status-online {
  color:#10b981;
}

/* 모바일: 한 줄씩 세로 정렬 */
@media (max-width: 640px){
  .info-grid { gap: 0; }
  .info-grid .row{
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .tit{ font-size: 14px; }
  .con{ font-size: 15px; }
}

/* 넓은 화면: 2열 카드 느낌으로 촘촘하게 */
@media (min-width: 860px){
  .info-grid{
    grid-template-columns: 1fr 1fr;
  }
  .info-grid .row{
    border-bottom: 0;
    border-right: 1px dashed rgba(255,255,255,.06);
    padding: 12px 14px;
  }
  .info-grid .row:nth-child(2n){
    border-right: 0;
  }
}


.mainVideo{
  width: 100%;
  max-width: 1200px;   /* 선택: 최대 너비 제한 */
  margin: 0 auto;      /* 선택: 가운데 정렬 */
}
.mainVideo iframe{
  width: 100%;
  aspect-ratio: 16 / 9; /* 비디오 비율 */
  height: auto;         /* 높이는 비율에 의해 자동 */
  display: block;
  border: 0;
}

.ui-tab-menu{ margin: 8px 0 16px; }
.tab-list{
  background: var(--card);
  padding: 6px;
}
.bt-tab-menu{
  padding: 10px 14px;

  user-select: none;
}
.bt-tab-menu:hover{ color: var(--text); border-color: var(--row); }

.member-section{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(12px, 3vw, 20px);
}

/* list */
.player-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background-color: #222;
  padding:5px;
}

/* item */
.player-item{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--row);
  cursor: pointer;
  scroll-margin-top: 112px;
}
.player-item:hover{ background: rgba(255,255,255,.06); }
/* 팝업 열려있을 때도 같은 효과 */
.player-item.is-pop-open { background: rgba(255,255,255,.06); }
/* 팝업 닫힐 때 잠깐 적용해 hover 무효화 */
body.suppress-hover .player-item:hover {
  background: transparent !important;
}

.player-name{
  font-weight: 600;
  letter-spacing: .2px;
}
.player-meta{
  display: flex; align-items: center; gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

/* badges */

.meta-date{
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* desktop enhancements */
@media (min-width: 720px){
  .player-list{
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1100px){
  .player-list{
    grid-template-columns: 1fr 1fr 1fr;
  }
}


/* 배지와 이름 정렬 보강 */
.player-main{
  display: flex; align-items: center; gap: 8px;
  border-left:4px solid #ddd;
  padding-left: 15px;
}
.player-main.is-online { border-color: #3b82f6; } /* 파랑 */
.player-main.is-offline{ border-color: #ef4444; } /* 빨강 */




/* 팝업 기본 스타일 */
#player-item-pop.player-pop {
  position: absolute;
  display: none;
  z-index: 1000;
  min-width: 180px;
  background: var(--card, #fff);
  color: var(--text, #222);
  border: 1px solid var(--border, #ddd);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
#player-item-pop .pop-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .7rem 1rem;
  font-size: 1rem;
  background: inherit;
  color: inherit;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}
#player-item-pop .pop-item + .pop-item {
  border-top: 1px solid var(--border, #eee);
}

/* ▲ 화살표 (상단 중앙 근처) */
#player-item-pop .pop-arrow {
  position: absolute;
  top: -8px;                 /* 팝업 상단 바깥으로 살짝 */
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--card, #fff);  /* 화살표 색 = 배경 */
  /* 외곽선(보더) 느낌 주려면 아래 1px 음영 */
  filter: drop-shadow(0 -1px 0 var(--border, #ddd));
}