/* 레이아웃: 달빛 히어로 전면 → 좁은 중앙 컬럼(1160px) 위에 패널 카드가 쌓이는 수직 스크롤.
   단일 다크 테마(심야 코발트) — 게임 서버 사이트의 세계관에 맞춰 의도적으로 라이트 테마 없음. */
:root{
  color-scheme: dark;
  --ink:#060911;          /* 가장 깊은 밤 */
  --panel:#0C1322;        /* 패널 바닥 */
  --panel-2:#111A2D;      /* 한 단계 밝은 면 */
  --line:#1E2B45;         /* 경계선 */
  --fog:#8EA3C4;          /* 흐린 본문 */
  --moon:#E8F0FF;         /* 달빛 흰색 — 제목 */
  --rune:#64B7F0;         /* 룬 블루 — 상호작용 */
  --gold:#D7B169;         /* 금박 — 강조/휘장 */
  --ember:#E2694F;        /* 경고/임박 */
  --leaf:#63C39A;         /* 정상/완료 */

  --d:"Noto Serif KR", "Nanum Myeongjo", serif;
  --b:"Noto Sans KR", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;
  --l:"Cinzel", "Noto Serif KR", serif;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ink); color:var(--fog);
  font-family:var(--b); font-weight:400; font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--d); color:var(--moon); margin:0; text-wrap:balance; line-height:1.3}
a{color:var(--rune); text-decoration:none}
:focus-visible{outline:2px solid var(--rune); outline-offset:3px; border-radius:2px}

.wrap{max-width:1160px; margin:0 auto; padding-inline:20px}
.eyebrow{
  font-family:var(--l); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin:0 0 10px; display:block;
}

/* ───────── 상단 바 ───────── */
.topbar{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:rgba(6,9,17,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; gap:18px; min-height:62px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px; margin-right:auto}
.sigil{width:30px; height:30px; flex:none}
.brand b{font-family:var(--d); color:var(--moon); font-size:17px; letter-spacing:-.01em; display:block; line-height:1.2}
.brand span{font-family:var(--l); font-size:9.5px; letter-spacing:.22em; color:var(--gold); display:block}
nav.main{display:flex; gap:4px; flex-wrap:wrap; min-width:0}
nav.main a{
  color:var(--fog); font-size:13.5px; font-weight:500; padding:7px 11px; border-radius:6px;
  transition:color .18s, background .18s; white-space:nowrap;
}
nav.main a:hover{color:var(--moon); background:var(--panel-2)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--b); font-weight:700; font-size:13.5px; padding:10px 18px;
  border-radius:4px; border:1px solid var(--line); background:var(--panel-2); color:var(--moon);
  cursor:pointer; transition:border-color .2s, background .2s, transform .12s; white-space:nowrap;
}
.btn:hover{border-color:var(--rune); background:#16213a}
.btn:active{transform:translateY(1px)}
.btn.gold{
  background:linear-gradient(180deg,#E6C684,#BE9343);
  color:#1A1203; border-color:#E6C684; font-weight:700;
}
.btn.gold:hover{filter:brightness(1.08); border-color:#F0D598}
.btn.sm{padding:7px 13px; font-size:12.5px}

/* ───────── 히어로 ───────── */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-img{
  position:absolute; inset:0; background-image:url("hero.jpg");
  background-size:cover; background-position:center 38%;
}
.hero-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 70% 18%, rgba(6,9,17,0) 0%, rgba(6,9,17,.25) 45%, rgba(6,9,17,.82) 100%),
    linear-gradient(90deg, rgba(6,9,17,.94) 0%, rgba(6,9,17,.74) 42%, rgba(6,9,17,.28) 100%),
    linear-gradient(0deg, var(--ink) 2%, rgba(6,9,17,0) 48%);
}
.hero .wrap{position:relative; padding-block:clamp(56px,10vw,104px) clamp(40px,7vw,78px)}
.hero-copy{max-width:560px}
.status{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500;
  border:1px solid rgba(99,195,154,.4); background:rgba(99,195,154,.09); color:var(--leaf);
  padding:5px 12px; border-radius:999px; margin-bottom:20px;
}
.dot{width:6px; height:6px; border-radius:50%; background:var(--leaf); box-shadow:0 0 0 3px rgba(99,195,154,.18)}
h1{
  font-size:clamp(34px,6.2vw,58px); font-weight:700; letter-spacing:-.025em; margin:0 0 6px;
  text-shadow:0 2px 40px rgba(6,9,17,.9);
}
.hero h1 em{font-style:normal; color:var(--gold)}
.tagline{
  font-family:var(--l); font-size:clamp(11px,2vw,13px); letter-spacing:.3em; color:var(--gold);
  text-transform:uppercase; margin:0 0 20px;
}
.lede{font-size:16px; line-height:1.85; color:#B8C8E2; margin:0 0 30px; max-width:48ch}
.hero-cta{display:flex; gap:11px; flex-wrap:wrap; margin-bottom:38px}

.counters{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  max-width:640px;
}
.counters div{background:rgba(12,19,34,.88); padding:15px 16px}
.counters dt{
  font-size:11px; letter-spacing:.1em; color:var(--fog); margin:0 0 5px; font-weight:500;
}
.counters dd{
  margin:0; font-family:var(--d); font-size:clamp(18px,3.4vw,25px); font-weight:700; color:var(--moon);
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.counters dd small{font-size:12px; font-weight:400; color:var(--fog); font-family:var(--b); margin-left:3px}

/* ───────── 섹션 공통 ───────── */
section{padding-block:clamp(52px,7vw,84px); border-bottom:1px solid #121B2D}
.shead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px}
.shead h2{font-size:clamp(22px,3.6vw,30px); font-weight:700; letter-spacing:-.02em}
.shead p{margin:7px 0 0; font-size:14px; max-width:58ch}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:8px}
.pad{padding:clamp(18px,2.6vw,26px)}

/* ───────── 공지 ───────── */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:0; border-bottom:1px solid var(--line); padding:0 4px}
.tabs button{
  background:none; border:0; border-bottom:2px solid transparent; color:var(--fog);
  font-family:var(--b); font-size:14px; font-weight:500; padding:13px 14px; cursor:pointer;
  transition:color .18s, border-color .18s; margin-bottom:-1px;
}
.tabs button[aria-selected="true"]{color:var(--moon); border-bottom-color:var(--gold)}
.tabs button:hover{color:var(--moon)}
.board{list-style:none; margin:0; padding:0}
.board li{border-bottom:1px solid #141E33}
.board li:last-child{border-bottom:0}
.board a{
  display:flex; align-items:center; gap:14px; padding:14px 16px; color:var(--fog);
  transition:background .16s; flex-wrap:wrap;
}
.board a:hover{background:var(--panel-2)}
.board a:hover .t{color:var(--moon)}
.tag{
  font-size:11px; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:3px;
  border:1px solid; flex:none;
}
.tag.notice{color:var(--gold); border-color:rgba(215,177,105,.38); background:rgba(215,177,105,.08)}
.tag.update{color:var(--rune); border-color:rgba(100,183,240,.38); background:rgba(100,183,240,.08)}
.tag.event{color:var(--ember); border-color:rgba(226,105,79,.38); background:rgba(226,105,79,.08)}
.board .t{flex:1 1 220px; min-width:0; font-size:14.5px; color:#C3D2E8}
.board .d{font-size:12.5px; color:#6F83A4; font-variant-numeric:tabular-nums; flex:none}
.new{color:var(--ember); font-size:10px; font-weight:700; font-family:var(--l); letter-spacing:.08em}

/* ───────── 서버 정보 ───────── */
.spec{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.spec div{background:var(--panel); padding:17px 19px; min-width:0}
.spec dt{font-size:12px; letter-spacing:.06em; color:#7E92B4; margin-bottom:6px}
.spec dd{margin:0; font-family:var(--d); font-size:17px; font-weight:700; color:var(--moon); font-variant-numeric:tabular-nums}
.spec dd span{font-size:12.5px; font-family:var(--b); font-weight:400; color:var(--fog); display:block; margin-top:3px}

.classes{display:grid; grid-template-columns:repeat(auto-fit,minmax(152px,1fr)); gap:10px; margin-top:16px}
.cls{
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:15px 16px;
  min-width:0; transition:border-color .2s, transform .2s;
}
.cls:hover{border-color:rgba(215,177,105,.45); transform:translateY(-2px)}
.cls b{display:block; font-family:var(--d); color:var(--moon); font-size:15px; margin-bottom:3px}
.cls span{font-size:12.5px; line-height:1.6; display:block; color:#7E92B4}

/* ───────── 보스 ───────── */
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:var(--panel)}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:14px}
thead th{
  text-align:left; font-family:var(--b); font-weight:500; font-size:12px; letter-spacing:.08em;
  color:#7E92B4; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--panel-2);
  white-space:nowrap;
}
tbody td{padding:14px 16px; border-bottom:1px solid #141E33; vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(17,26,45,.6)}
.bname{font-family:var(--d); font-weight:700; color:var(--moon); font-size:15px; white-space:nowrap}
.bname small{display:block; font-family:var(--l); font-size:10px; letter-spacing:.14em; color:#6F83A4; font-weight:500}
.tnum{font-variant-numeric:tabular-nums; white-space:nowrap}
.pill{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  padding:4px 10px; border-radius:999px; border:1px solid; white-space:nowrap;
}
.pill.soon{color:var(--ember); border-color:rgba(226,105,79,.42); background:rgba(226,105,79,.1)}
.pill.wait{color:#8EA3C4; border-color:var(--line); background:var(--panel-2)}
.pill.live{color:var(--leaf); border-color:rgba(99,195,154,.42); background:rgba(99,195,154,.1)}
.drop{color:var(--gold); font-size:13px}

/* ───────── 자동 홍보 ───────── */
.promo-grid{display:grid; grid-template-columns:1.25fr .9fr; gap:18px; align-items:start}
.field{display:block; margin-bottom:14px}
.field label{display:block; font-size:12.5px; color:#7E92B4; margin-bottom:7px; letter-spacing:.04em}
input[type=text], select, textarea{
  width:100%; background:var(--ink); border:1px solid var(--line); border-radius:5px;
  color:var(--moon); font-family:var(--b); font-size:14px; padding:11px 13px; line-height:1.6;
}
input[type=text]:focus, select:focus, textarea:focus{border-color:var(--rune); outline:none}
textarea{resize:vertical; min-height:132px; font-size:13.5px; line-height:1.8; color:#C3D2E8}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.promo-actions{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:12px}
.copied{font-size:12.5px; color:var(--leaf); opacity:0; transition:opacity .25s}
.copied.on{opacity:1}
.reward{list-style:none; margin:0; padding:0}
.reward li{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:11px 0; border-bottom:1px dashed #1A2538; font-size:13.5px;
}
.reward li:last-child{border-bottom:0}
.reward b{color:var(--gold); font-family:var(--d); font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums}
.sites{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.sites span{
  font-size:12px; padding:5px 11px; border-radius:4px; border:1px solid var(--line);
  background:var(--panel-2); color:#A9BBD6;
}

/* ───────── 커뮤니티 ───────── */
.comm{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:14px}
.ccard{
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:22px;
  display:flex; flex-direction:column; gap:9px; min-width:0; transition:border-color .2s;
}
.ccard:hover{border-color:rgba(100,183,240,.45)}
.ccard h3{font-size:17px}
.ccard p{margin:0; font-size:13.5px; flex:1}
.ccard .meta{font-family:var(--l); font-size:10.5px; letter-spacing:.16em; color:var(--gold)}

.rank{list-style:none; margin:0; padding:0; counter-reset:r}
.rank li{
  display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:center;
  padding:11px 0; border-bottom:1px solid #141E33; font-size:14px;
}
.rank li:last-child{border-bottom:0}
.rank .n{
  font-family:var(--l); font-size:13px; color:#6F83A4; font-variant-numeric:tabular-nums; text-align:center;
}
.rank li:nth-child(-n+3) .n{color:var(--gold)}
.rank .who{color:var(--moon); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rank .who small{color:#7E92B4; font-size:12px; margin-left:7px}
.rank .v{font-variant-numeric:tabular-nums; font-size:13px; color:#A9BBD6; white-space:nowrap}

/* ───────── 다운로드 ───────── */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-bottom:18px}
.step{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:20px; min-width:0}
.step .num{
  font-family:var(--l); font-size:11px; letter-spacing:.2em; color:var(--gold); display:block; margin-bottom:9px;
}
.step h3{font-size:16px; margin-bottom:6px}
.step p{margin:0; font-size:13.5px}
.dl-strip{
  display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border:1px solid rgba(215,177,105,.3); background:linear-gradient(180deg, rgba(215,177,105,.07), rgba(215,177,105,.02));
  border-radius:8px; padding:20px 24px;
}
.dl-strip .f{min-width:0}
.dl-strip h3{font-size:18px; margin-bottom:4px}
.dl-strip p{margin:0; font-size:13px}
.hash{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; color:#6F83A4;
  word-break:break-all; margin-top:8px; display:block;
}
.req{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-top:18px}
.req div{background:var(--panel); padding:15px 18px; min-width:0}
.req dt{font-size:11.5px; color:#7E92B4; letter-spacing:.06em; margin-bottom:5px}
.req dd{margin:0; font-size:13.5px; color:#C3D2E8}

/* ───────── 고객센터 ───────── */
.support{display:grid; grid-template-columns:.85fr 1.15fr; gap:18px; align-items:start}
.contact{list-style:none; margin:0; padding:0}
.contact li{padding:13px 0; border-bottom:1px solid #141E33}
.contact li:last-child{border-bottom:0}
.contact .k{font-size:12px; color:#7E92B4; letter-spacing:.06em; display:block; margin-bottom:5px}
.contact .v{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.contact .v code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; color:var(--moon);
  background:var(--panel-2); border:1px solid var(--line); border-radius:4px; padding:4px 9px;
  user-select:all; word-break:break-all;
}
details.faq{border-bottom:1px solid #141E33}
details.faq:last-of-type{border-bottom:0}
details.faq summary{
  cursor:pointer; list-style:none; padding:15px 2px; font-size:14.5px; color:#C3D2E8;
  display:flex; gap:12px; align-items:flex-start; font-weight:500;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"Q"; font-family:var(--l); color:var(--gold); font-size:13px; flex:none; line-height:1.6}
details.faq[open] summary{color:var(--moon)}
details.faq .a{padding:0 2px 16px 26px; font-size:13.5px; margin:0}

/* ───────── 푸터 ───────── */
footer{padding-block:34px 44px; color:#5C6E8C; font-size:12.5px}
footer .wrap{display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; align-items:flex-start}
footer p{margin:0 0 6px}
footer nav{display:flex; gap:16px; flex-wrap:wrap}
footer nav a{color:#7E92B4; font-size:12.5px}
.disclaimer{font-size:11.5px; color:#4E5F7A; margin-top:14px; max-width:60ch}

@media (max-width:860px){
  .promo-grid, .support{grid-template-columns:1fr}
  .counters{grid-template-columns:repeat(2,minmax(0,1fr))}
  nav.main{display:none}
}
@media (max-width:420px){
  .row2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ═══════════ 멀티 페이지 추가 스타일 ═══════════ */

/* 현재 페이지 표시 */
nav.main a[aria-current="page"]{color:var(--moon); background:var(--panel-2); box-shadow:inset 0 -2px 0 var(--gold)}

/* 모바일 메뉴 버튼 */
.burger{
  display:none; background:var(--panel-2); border:1px solid var(--line); border-radius:5px;
  width:38px; height:36px; cursor:pointer; padding:0; align-items:center; justify-content:center;
}
.burger span{display:block; width:16px; height:1.5px; background:var(--moon); position:relative}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--moon);
}
.burger span::before{top:-5px} .burger span::after{top:5px}

@media (max-width:860px){
  .burger{display:inline-flex}
  nav.main{
    display:none; order:9; width:100%; flex-direction:column; gap:0;
    border-top:1px solid var(--line); padding:8px 0 12px;
  }
  nav.main.open{display:flex}
  nav.main a{padding:11px 10px; font-size:14.5px}
  .topbar .wrap{padding-bottom:0}
  nav.main.open + .btn{margin-bottom:12px}
}

/* 하위 페이지 상단 배너 */
.page-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.page-hero .bg{
  position:absolute; inset:0; background-image:url("hero.jpg");
  background-size:cover; background-position:center 32%; filter:saturate(.85);
}
.page-hero .veil{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,9,17,.96) 0%, rgba(6,9,17,.86) 50%, rgba(6,9,17,.6) 100%),
    linear-gradient(0deg, var(--ink) 4%, rgba(6,9,17,.35) 100%);
}
.page-hero .wrap{position:relative; padding-block:clamp(34px,5.5vw,56px) clamp(26px,4vw,40px)}
.page-hero h1{font-size:clamp(26px,4.6vw,40px); margin-bottom:8px}
.page-hero p{margin:0; max-width:58ch; font-size:14.5px; color:#B8C8E2}
.crumb{
  font-family:var(--l); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#6F83A4; margin:0 0 12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.crumb a{color:#6F83A4} .crumb a:hover{color:var(--gold)}
.crumb i{font-style:normal; opacity:.5}

/* 섹션 하단 더보기 줄 */
.more{
  display:flex; justify-content:flex-end; gap:10px; margin-top:16px; flex-wrap:wrap;
}

/* 홈 — 섹션 미리보기 카드로 가는 입구 */
.gates{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.gate{
  display:block; background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:20px; color:var(--fog); transition:border-color .2s, transform .2s; min-width:0;
}
.gate:hover{border-color:rgba(215,177,105,.5); transform:translateY(-2px)}
.gate b{display:block; font-family:var(--d); font-size:16px; color:var(--moon); margin-bottom:5px}
.gate span{display:block; font-size:13px; line-height:1.65; color:#7E92B4}
.gate .go{
  display:inline-block; margin-top:10px; font-family:var(--l); font-size:10.5px;
  letter-spacing:.18em; color:var(--gold);
}

/* 페이지 넘김 */
.pager{display:flex; gap:6px; justify-content:center; margin-top:20px; flex-wrap:wrap}
.pager a, .pager span{
  min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:5px; font-size:13px; color:var(--fog);
  background:var(--panel); font-variant-numeric:tabular-nums; padding:0 10px;
}
.pager a:hover{border-color:var(--rune); color:var(--moon)}
.pager .cur{background:var(--panel-2); color:var(--moon); border-color:var(--gold)}

/* 본문 노트 박스 */
.note{
  border-left:2px solid var(--gold); background:rgba(215,177,105,.06);
  padding:14px 18px; border-radius:0 6px 6px 0; font-size:13.5px; margin-top:18px;
}
.note b{color:var(--moon)}

/* 첫 섹션이 배너 바로 아래 올 때 윗여백 축소 */
section.first{padding-top:clamp(34px,4.5vw,52px)}

/* ═══════════ 우측 하단 상시 문의 버튼 ═══════════ */
.floats{
  position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  z-index:80; display:flex; flex-direction:column; gap:10px;
}
.float{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.45); transition:transform .18s, filter .18s;
  border:1px solid rgba(255,255,255,.14);
}
.float:hover{transform:translateY(-3px); filter:brightness(1.1)}
.float svg{width:26px; height:26px}
.float.kakao{background:#FEE500} .float.kakao svg{fill:#191600}
.float.telegram{background:#2AABEE} .float.telegram svg{fill:#fff}
.float.discord{background:#5865F2} .float.discord svg{fill:#fff}

footer .sites a{
  font-size:12px; padding:5px 11px; border-radius:4px; border:1px solid var(--line);
  background:var(--panel-2); color:#A9BBD6; transition:border-color .2s, color .2s;
}
footer .sites a:hover{border-color:var(--gold); color:var(--moon)}

@media (max-width:520px){
  .floats{right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); gap:8px}
  .float{width:46px; height:46px}
  .float svg{width:23px; height:23px}
}