/* =========================
   Base / Reset
========================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans KR, Apple SD Gothic Neo, "Malgun Gothic";
  color: rgba(255,255,255,0.92);
  background: #070A12;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* =========================
   Layout helpers
========================= */
.wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.page { min-height: 100vh; display: flex; flex-direction: column; }
.main { flex: 1; padding: 18px 0 24px; }

.muted { opacity: .78; }
.small { font-size: 12px; }

/* =========================
   Backgrounds
   - bgVideo: MP4
   - bg: fallback gradient
   - plus additional global dim layer for safety
========================= */
.bgVideo {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}
.bgVideo__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.06);
}

/* 영상 위에 전체적으로 어둡게: 컨텐츠 가독성 핵심 */
.bgVideo__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 18, 0.3);
}

/* 비네팅 + 상단/하단 집중 어둡게 */
.bgVideo__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 800px at 50% 12%, rgba(0,0,0,0.40), transparent 62%),
    radial-gradient(900px 700px at 50% 110%, rgba(0,0,0,0.62), transparent 55%),
    radial-gradient(1400px 900px at 50% 50%, transparent 55%, rgba(0,0,0,0.62));
  pointer-events: none;
}

/* 비디오가 없거나 실패할 때의 백업 */
.bg{
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(900px 650px at 18% 10%, rgba(0,255,170,.12), transparent 60%),
    radial-gradient(900px 650px at 82% 18%, rgba(120,90,255,.14), transparent 60%),
    radial-gradient(1000px 750px at 50% 100%, rgba(86,211,255,.10), transparent 62%),
    linear-gradient(180deg, #070A12, #050714 55%, #040612);
}

/* ✅ 최종 안전장치: 페이지 전체를 살짝 더 어둡게 (컨텐츠 가림 방지) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.30));
  pointer-events: none;
}

/* 모션 감소 설정 시 영상 숨김 */
@media (prefers-reduced-motion: reduce) {
  .bgVideo__media { display: none; }
  .bgVideo__overlay { background: rgba(5, 7, 18, 0.82); }
}

/* =========================
   Header
========================= */
.header{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
  background: rgba(7, 10, 18, 0.62);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.header__inner{
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand{ display:flex; align-items:center; gap: 12px; min-width: 0; }
.brand__mark{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:grid; place-items:center;
  font-weight: 950;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 16px 50px rgba(0,0,0,0.40);
}
.brand__text{ min-width: 0; }
.brand__title{ font-weight: 950; letter-spacing: -0.02em; }
.brand__sub{
  font-size: 12px;
  opacity: .75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header__right{ display:flex; align-items:center; gap:10px; }

/* Status pill */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.24); /* 어두운 pill */
  font-size: 12px;
  white-space: nowrap;
}
.pill__dot{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,0.7); }
.pill--loading .pill__dot{ animation: pulse 1.2s ease-in-out infinite; }
.pill--ok{
  border-color: rgba(0,255,170,0.26);
  background: rgba(0,255,170,0.10);
}
.pill--ok .pill__dot{ background: rgba(0,255,170,0.95); }
.pill--bad{
  border-color: rgba(255,70,90,0.26);
  background: rgba(255,70,90,0.10);
}
.pill--bad .pill__dot{ background: rgba(255,70,90,0.95); }
@keyframes pulse{ 0%,100%{ transform: scale(1); opacity:.5 } 50%{ transform: scale(1.5); opacity:1 } }

.iconBtn{
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
}
.iconBtn:active{ transform: translateY(1px); }

/* =========================
   Main Layout
========================= */
.layout{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 18px;
  align-items: start;
}

/* =========================
   HERO CARD (dark & readable)
   Goal: never be swallowed by video background
   - darker base
   - stronger border
   - stronger shadow
   - subtle inner gradient
========================= */
.heroCard{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(0,255,170,0.06), transparent 55%),
    radial-gradient(1000px 600px at 85% 10%, rgba(120,90,255,0.07), transparent 60%),
    rgba(6, 8, 16, 0.78); /* ✅ 어두운 카드 */
  box-shadow:
    0 30px 120px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.40);
  backdrop-filter: blur(14px);
  overflow: hidden;
  position: relative;
}

/* 카드 안쪽 컨트라스트를 위한 inner overlay */
.heroCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.24));
}

.heroCard__head{ padding: 22px 22px 16px; position: relative; z-index: 1; }
.heroCard__divider{
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 0 22px;
  position: relative;
  z-index: 1;
}
.heroCard__body{ padding: 18px 22px 22px; position: relative; z-index: 1; }

/* Server header (icon + text aligned) */
.serverHeader{
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 18px;
  align-items: start;
}
.serverHeader__icon{
  width: 84px; height: 84px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.28);
  overflow: hidden;
  box-shadow: 0 18px 70px rgba(0,0,0,0.45);
}
.serverHeader__icon img{ width: 100%; height: 100%; object-fit: cover; display: none; }
.serverHeader__fallback{
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-weight: 980;
  font-size: 28px;
  background: linear-gradient(135deg, rgba(0,255,170,0.22), rgba(120,90,255,0.20));
}

.serverHeader__meta{ min-width: 0; padding-top: 2px; }
.serverHeader__title{
  margin: 2px 0 10px;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-shadow: 0 8px 26px rgba(0,0,0,0.55); /* 가독성 강화 */
}
.serverHeader__desc{
  margin: 0 0 14px;
  opacity: .86;
  line-height: 1.65;
  max-width: 62ch;
}

/* Chips */
.chips{ display:flex; flex-wrap: wrap; gap: 10px; }
.chip{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);  /* 더 어둡게 */
  font-size: 12px;
  white-space: nowrap;
}
.chip b{ font-weight: 950; }

/* Join panel - dark within dark, but separated */
.joinPanel{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.30);
  backdrop-filter: blur(10px);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.joinPanel__head{
  display:flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.joinPanel__title{ font-weight: 980; letter-spacing: -0.02em; }

.label{ font-size: 12px; opacity: .78; margin-bottom: 8px; }
.hint{ margin-top: 7px; font-size: 12px; opacity: .75; line-height: 1.45; }

.addrRow{ display:flex; align-items:center; gap: 12px; }
.addrCode{
  flex: 1;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  padding: 12px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{
  border-color: rgba(0,255,170,0.30);
  background: rgba(0,255,170,0.14);
}

.joinPanel__grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mini{
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.mini__k{ font-size: 12px; opacity: .75; margin-bottom: 7px; }
.mini__v{
  font-weight: 980;
  letter-spacing: -0.02em;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.joinPanel__foot{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display:flex; align-items:center; justify-content: space-between; gap: 12px;
}

/* Switch */
.switch{ display:inline-flex; align-items:center; gap: 10px; cursor:pointer; user-select:none; }
.switch input{ display:none; }
.switch__ui{
  width: 44px; height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  position: relative;
}
.switch__ui::after{
  content:"";
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  position:absolute; top:2px; left:2px;
  transition: transform .2s ease;
}
.switch input:checked + .switch__ui{
  border-color: rgba(0,255,170,0.28);
  background: rgba(0,255,170,0.16);
}
.switch input:checked + .switch__ui::after{ transform: translateX(18px); }
.switch__text{ font-size: 12px; opacity: .85; }
.footNote{ text-align: right; }

/* =========================
   Side Panels (also dark for readability)
========================= */
.side{ display:grid; gap: 18px; }

.panel{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(6, 8, 16, 0.72); /* darker */
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 90px rgba(0,0,0,0.45);
  padding: 16px;
  position: relative;
}
.panel--soft{
  background: rgba(6, 8, 16, 0.64);
}

.panel__head{
  display:flex; align-items:baseline; justify-content:space-between; gap: 10px;
  margin-bottom: 12px;
}
.panel__title{ font-weight: 980; letter-spacing: -0.02em; }
.subhead{ margin-top: 10px; font-size: 12px; opacity: .78; }

.stats{
  display:grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items:center;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.24);
}
.stats__divider{ width:1px; height: 48px; background: rgba(255,255,255,0.12); justify-self:center; }
.stats__num{ font-size: 36px; font-weight: 980; letter-spacing: -0.03em; }
.stats__label{ font-size: 12px; opacity: .75; margin-top: 4px; }

.players{ display:grid; gap: 10px; margin-top: 10px; }
.playerRow{
  display:flex; align-items:center; justify-content: space-between; gap: 10px;
  padding: 12px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
  min-width: 0;
}
.playerRow__name{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Badge (no wrap) */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space: nowrap;
  line-height: 1;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  font-size: 12px;
  font-weight: 950;
  flex: 0 0 auto;
}
.badge--muted{ opacity: .85; }

/* Diagnostics */
.diag{ display:grid; gap: 10px; }
.diagRow{
  display:flex; align-items:center; justify-content: space-between; gap: 10px;
  padding: 11px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
}
.diagRow .k{ font-size: 12px; opacity: .78; }
.diagRow .v{ font-size: 12px; font-weight: 950; white-space: nowrap; }

/* Warn */
.warn{
  margin-top: 12px;
  padding: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,195,70,.22);
  background: rgba(255,195,70,.10);
}
.warn__t{ font-weight: 980; margin-bottom: 6px; }
.warn__d{ font-size: 12px; opacity: .9; line-height: 1.45; }

/* =========================
   Footer (sticky footer area)
========================= */
.footer{
  margin-top: 0;
  padding: 14px 0 18px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(7, 10, 18, 0.50);
  backdrop-filter: blur(12px);
}

/* =========================
   Toast
========================= */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  font-size: 12px;
  z-index: 50;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* =========================
   Overlay Loader
========================= */
.overlay{
  position: fixed;
  inset: 0;
  z-index: 60;
  display:grid;
  place-items:center;
  background: rgba(5, 7, 18, 0.60);
  backdrop-filter: blur(12px);
}
.overlay[aria-hidden="true"]{
  opacity:0;
  visibility:hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.overlay__card{
  width: min(420px, calc(100% - 40px));
  padding: 16px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.28);
  box-shadow: 0 26px 90px rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  gap: 12px;
}
.loader{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.22);
  border-top-color: rgba(255,255,255,0.92);
  animation: spin .9s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }
.overlay__t{ font-weight: 980; letter-spacing: -0.02em; }
.overlay__d{ margin-top: 2px; }

/* =========================
   Responsive
========================= */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .joinPanel__grid{ grid-template-columns: 1fr; }
  .serverHeader{ grid-template-columns: 76px 1fr; }
  .serverHeader__icon{ width: 76px; height: 76px; border-radius: 22px; }
  .serverHeader__title{ font-size: 28px; }
}

@media (max-width: 520px){
  .header__inner{ flex-direction: column; align-items: flex-start; }
  .header__right{ width: 100%; justify-content: space-between; }
  .heroCard__head{ padding: 18px 16px 14px; }
  .heroCard__body{ padding: 16px; }
  .heroCard__divider{ margin: 0 16px; }

  .serverHeader{ grid-template-columns: 1fr; gap: 14px; }
  .serverHeader__icon{ width: 72px; height: 72px; }

  .addrRow{ flex-direction: column; align-items: stretch; }
  .btn{ width: 100%; }

  .joinPanel__head{ flex-direction: column; align-items: flex-start; }
  .joinPanel__foot{ flex-direction: column; align-items: flex-start; }
  .footNote{ text-align: left; }
}