@charset "utf-8";

/**
 * [현재 접속자 목록 스타일]
 * 역할: connect 스킨의 타이포·카드·아바타·호버·반응형 등 프리미엄 톤(블랙·골드) 디자인
 * 작성/수정일: 2026-05-13
 */

#current_connect {
  /* 색상·간격 토큰 */
  --cc-surface: #ffffff;
  --cc-border: #e7e7ea;
  --cc-border-soft: #f1f1f3;
  --cc-text: #15171a;
  --cc-muted: #6b7280;
  --cc-accent: #15171a;
  --cc-gold: #b8893d;
  --cc-gold-soft: #faf3e6;
  --cc-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
  --cc-radius: 14px;
  --cc-radius-sm: 10px;
  --cc-fs-title: 22px;
  --cc-fs-name: 15px;
  --cc-fs-meta: 13px;

  margin: 0;
  padding: 0;
}

#current_connect,
#current_connect * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------
 * 헤더
 * --------------------------------------------------------------- */
#current_connect .connect-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 18px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--cc-border);
}

#current_connect .connect-head__title {
  margin: 0;
  font-size: var(--cc-fs-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cc-text);
  line-height: 1.2;
}

#current_connect .connect-head__title .font-18 {
  font-size: inherit;
  font-weight: inherit;
}

#current_connect .connect-head__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid rgba(184, 137, 61, 0.35);
  background: var(--cc-gold-soft);
  color: var(--cc-gold);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

#current_connect .connect-head__count em {
  font-style: normal;
  font-weight: 500;
  color: var(--cc-gold);
  opacity: 0.85;
}

#current_connect .connect-head__sub {
  margin-left: auto;
  color: var(--cc-muted);
  font-size: var(--cc-fs-meta);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
 * 목록 컨테이너 (ul)
 * --------------------------------------------------------------- */
#current_connect .connect-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--cc-surface);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
  overflow: hidden;
}

/* 기존 #current_connect ul 광범위 규칙 재정의 */
#current_connect .connect-rows.list-posts {
  margin: 0;
}

/* ---------------------------------------------------------------
 * 행
 * --------------------------------------------------------------- */
#current_connect .connect-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cc-border-soft);
  transition: background-color 0.15s ease;
}

#current_connect .connect-row:last-child {
  border-bottom: 0;
}

#current_connect .connect-row:hover {
  background: var(--cc-gold-soft);
}

/* 번호 (golden circle) */
#current_connect .connect-row__num {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--cc-gold);
  background: #ffffff;
  border: 1px solid rgba(184, 137, 61, 0.35);
  border-radius: 50%;
  padding: 0;
  text-align: center;
  letter-spacing: 0;
  line-height: 1;
}

#current_connect .connect-row:hover .connect-row__num {
  background: var(--cc-gold);
  color: #ffffff;
  border-color: var(--cc-gold);
}

/* 이름 영역 */
#current_connect .connect-row__name {
  flex: 1 1 28%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: var(--cc-text);
  font-weight: 600;
  font-size: var(--cc-fs-name);
}

/* IP 컬럼 (마스킹된 IPv4: xxx.xxx.***.***)
 * [현재 접속자 IP] 역할: 접속 IP를 등폭/모노스페이스로 표시 — 작성/수정일: 2026-05-13
 */
#current_connect .connect-row__ip {
  flex: 0 0 150px;
  min-width: 0;
  padding: 3px 10px;
  font-family:
    "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    monospace;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cc-text);
  background: #f7f7f8;
  border: 1px solid var(--cc-border-soft);
  border-radius: 6px;
  text-align: center;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#current_connect .connect-row:hover .connect-row__ip {
  background: #ffffff;
  border-color: rgba(184, 137, 61, 0.35);
  color: var(--cc-gold);
}

#current_connect .connect-row__name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* 아바타 */
#current_connect .connect-row__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: #f3f4f6;
  border: 1px solid var(--cc-border);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px #ffffff inset;
}

#current_connect .connect-row__avatar img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 위치(URL/페이지명) */
#current_connect .connect-row__location {
  flex: 1 1 44%;
  min-width: 0;
  padding: 0;
  color: var(--cc-muted);
  font-size: var(--cc-fs-meta);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

#current_connect .connect-row__location a {
  color: var(--cc-muted);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

#current_connect .connect-row__location a:hover {
  color: var(--cc-gold);
  border-bottom-color: rgba(184, 137, 61, 0.6);
}

/* ---------------------------------------------------------------
 * 빈 상태
 * --------------------------------------------------------------- */
#current_connect .connect-empty {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  color: var(--cc-muted);
  font-size: var(--cc-fs-name);
  background: var(--cc-surface);
}

#current_connect .connect-empty__dot {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--cc-gold-soft);
  border: 1px solid rgba(184, 137, 61, 0.4);
}

#current_connect .connect-empty__title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--cc-text);
  margin: 0 0 4px;
}

#current_connect .connect-empty__sub {
  display: block;
  font-size: 12px;
  color: var(--cc-muted);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------
 * 반응형
 * --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #current_connect .connect-row {
    padding: 12px 14px;
    gap: 10px;
  }
  #current_connect .connect-row__num {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
  #current_connect .connect-row__avatar,
  #current_connect .connect-row__avatar img {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}

@media (max-width: 767.98px) {
  #current_connect .connect-row__ip {
    flex: 0 0 130px;
    font-size: 12px;
    padding: 2px 8px;
  }
}

@media (max-width: 575.98px) {
  #current_connect .connect-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  #current_connect .connect-row__name {
    flex: 1 1 calc(100% - 42px);
  }
  #current_connect .connect-row__ip {
    flex: 0 0 auto;
    margin-left: 42px;
    text-align: left;
  }
  #current_connect .connect-row__location {
    flex: 1 1 100%;
    padding-left: 42px;
    text-align: left;
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------
 * 레거시 hover/스타일 조정 — 기존 셀렉터가 의존하는 경우 대비
 * --------------------------------------------------------------- */
#current_connect ul.list-posts {
  margin: 0;
  padding: 16px;
  list-style: none;
}

#current_connect ul.list-posts > li {
  padding: 8px;
}