@charset "utf-8";
/* ==========================================================================
   X서버 · X SERVER  —  상단 공용 HERO  (메인 index.html · 모든 서브페이지 공용)

   ★ 이 파일 하나만 고치면 메인과 서브페이지 상단이 동시에 바뀝니다.
     엠블럼 로고 / 카드 6칸 메뉴 / NEW UPDATE 프로모 박스
   ========================================================================== */

/* 스크롤바 자리를 항상 확보 · 메인(스크롤 없음)과 서브(스크롤 있음)의
   가로 폭을 똑같이 맞춰 상단 메뉴가 좌우로 밀리지 않게 한다 */
html{ scrollbar-gutter:stable; }

/* 브라우저 기본 스크롤바가 밝아서 서브페이지 오른쪽에 '여백'처럼 보인다.
   배경과 같은 어두운 색으로 얇게 처리 (메인은 스크롤이 없어 자리만 비워둠) */
html{ scrollbar-width:thin; scrollbar-color:rgba(126,62,190,.65) rgba(6,2,14,1); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:rgba(6,2,14,1); }
::-webkit-scrollbar-thumb{ background:rgba(126,62,190,.7);
                           border:3px solid rgba(6,2,14,1); border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(178,104,240,.95); }


/* ==========================================================================
   공용 컴포넌트 : 운영진 · GAME MASTER
   메인·서브 공통. 다른 패널(보라)과 구분되도록 금색 계열로 처리.
   ========================================================================== */
.gmlist{ display:flex; flex-direction:column; gap:4px; }
.gm{
  display:flex; align-items:center; gap:8px; padding:4px 9px;
  background:linear-gradient(90deg, rgba(158,110,26,.26) 0%, rgba(48,26,6,.10) 100%);
  border-left:2px solid rgba(255,190,90,.6);
}
.gm-av{ flex:none; width:30px; height:30px; }
.gm-who{ min-width:0; flex:1 1 auto; }
.gm-who b{ display:block; font:bold 15px/1.25 "Malgun Gothic",sans-serif; color:#ffe9bc;
           text-shadow:0 0 11px rgba(255,196,90,.75);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gm-who span{ display:block; margin-top:2px; font-size:12px; color:#c2ab84;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 한글/영문을 두 줄로 쌓아 폭을 줄임 → 닉네임이 잘리지 않는다 */
.gm-st{ margin-left:auto; flex:none; padding:2px 7px; white-space:nowrap;
        display:flex; flex-direction:column; align-items:center;
        font:bold 12px/1.25 "Malgun Gothic",sans-serif; letter-spacing:0;
        color:#a8ffd0; border:1px solid rgba(120,240,180,.45); }
.gm-st u{ text-decoration:none; font:bold 12px/1.25 Tahoma,sans-serif;
          letter-spacing:.04em; opacity:.75; }
.gm-st.off{ color:#c9bda6; border-color:rgba(190,165,120,.4); }

/* 닉네임 미정인 두 번째 운영자 */
.gm.tbd{ background:linear-gradient(90deg, rgba(96,74,116,.20) 0%, rgba(30,20,44,.10) 100%);
         border-left-color:rgba(162,132,202,.45); }
.gm.tbd .gm-who b{ color:#cbbfe2; text-shadow:none; }
.gm.tbd .gm-av{ filter:grayscale(.7) brightness(.8); }
.gm-st.tbd{ color:#c0b3d4; border-color:rgba(150,120,190,.4); }

/* 사칭 주의 안내 : 경고이므로 레드 계열 */
.gm-note{ margin-top:5px; padding:6px 9px; font-size:12px; line-height:1.55;
          color:#efb4bf; background:rgba(158,24,52,.18);
          border-left:2px solid rgba(255,86,118,.65); }
.gm-note b{ color:#ff9fb4; font-weight:bold;
            text-shadow:0 0 9px rgba(255,80,115,.55); }


/* ==========================================================================
   1. HERO
   ========================================================================== */
#hero{
  position:relative;
  flex:0 0 auto;
  /* 카드(46 + 200 + 반사 42 = 288) 에 딱 맞춰 아래 빈 공간 최소화 */
  height:clamp(288px, 26.7vh, 300px);
  /* 좌우 칸을 같은 폭으로 → 카드 줄 중심 = 화면 중심 = 행성·로고 중심 */
  display:grid; grid-template-columns:315px minmax(0,1fr) 315px;
  gap:16px; align-items:stretch;
}

/* ---------- 헤더 성운 배경 · HERO NEBULA
   원본(header.jpg)은 성운이 페이지 폭 전체를 덮고 그 위에 카드가 얹힌 구조다.
   bg_full.jpg 의 성운을 좌우로 이어붙여 만든 hero_band.jpg 를
   화면 끝까지 깔아 카드가 검정 위에 떠 보이지 않게 한다.
   (행성 + X SERVER 로고가 이 이미지 가운데에 들어있다) ---------- */
#hero::before{
  content:""; position:absolute; z-index:0;
  left:50%; top:-8px;                    /* #app 위쪽 여백만큼 끌어올려 화면 최상단에 붙임 */
  width:3200px; height:100px;
  transform:translateX(-50%);
  background:url(../img/hero_band.jpg) no-repeat center top;
  pointer-events:none;
}
#hero > *{ position:relative; z-index:1; }

/* ---------- 로고 엠블럼 · LOGO EMBLEM ---------- */
.h-logo{ position:relative; display:flex; align-items:center; justify-content:center; }

.h-logo .emblem{                                   /* 뒤에서 천천히 도는 마법진 */
  position:absolute; top:50%; left:50%;
  height:clamp(186px, 23vh, 258px); width:auto; max-width:none;
  opacity:.5; pointer-events:none;
  transform:translate(-50%,-50%);
  animation:sigil 52s linear infinite;
}
@keyframes sigil{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

.lg-in{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }

.h-logo .orn{ height:clamp(11px,1.5vh,17px); width:auto; opacity:.92; }
.h-logo .orn-t{ margin-bottom:clamp(-8px,-0.8vh,-3px); }
.h-logo .orn-b{ margin-top:clamp(-5px,-0.5vh,-1px); }

.h-logo .logo{
  height:clamp(64px, 8.2vh, 88px); width:auto;
  animation:logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{ filter:brightness(1); }
  50%    { filter:brightness(1.22); }
}
.h-logo .logo-sub{ height:clamp(25px, 3.2vh, 34px); width:auto;
                   margin-top:clamp(-13px,-1.4vh,-8px); }
.h-logo .badge{ height:clamp(25px, 3.2vh, 34px); width:auto;
                margin-top:clamp(1px,0.5vh,5px); }

@media (prefers-reduced-motion:reduce){
  .h-logo .emblem, .h-logo .logo{ animation:none; }
}

/* ---------- 카드 6칸 = 메인 메뉴 (원본 PSD · 원본 크기 · 테두리 없음) ---------- */
.deck{ display:flex; justify-content:center; align-items:flex-start;
       gap:19px;                 /* 원본 카드 간격과 동일 */
       padding-top:46px;         /* 원본처럼 성운·로고 아래에서 카드가 시작 */
       overflow:hidden; }
.card{
  display:flex; flex-direction:column; align-items:center;
  transform-origin:50% 100%;
  transition:transform .24s cubic-bezier(.2,.8,.3,1);
}
/* 원본 이미지에 이미 기울기·원근이 들어있으므로 CSS 로는 기울이지 않는다.
   (아크·확대를 주면 카드끼리 높이가 어긋나 보임) */

.card .face{
  width:130px; height:200px;                       /* 원본 크기 그대로 */
  box-shadow:0 12px 30px rgba(0,0,0,.7);
  transition:filter .22s ease, box-shadow .22s ease;
}
/* 반사 아래쪽은 이미 검게 사라진 구간이라 빈 여백으로 보임 → 42px 로 잘라 씀 */
.card .refl{ width:130px; height:42px; object-fit:cover; object-position:top;
             margin-top:0; opacity:.72;      /* 카드와 반사 사이 여백 없음 */
             transition:filter .22s ease, opacity .22s ease; }
.card:hover{ z-index:2; }                           /* 위아래 움직임 없음 · NO LIFT */
.card:hover .face{                                  /* 마우스 올리면 하얗게만 */
  filter:brightness(1.58) saturate(.45) contrast(1.05);
  box-shadow:0 20px 48px rgba(190,124,255,.6);
}
.card:hover .refl{ opacity:1; filter:brightness(1.7) saturate(.5); }

/* ---------- 우측 : 신규 업데이트 프로모 (다른 패널과 다른 스타일) ---------- */
.h-promo{
  position:relative; overflow:hidden;
  height:100%;
  padding:clamp(7px,1.0vh,11px) 100px clamp(6px,0.9vh,10px) 16px;   /* 우측은 이미지 자리 */
  border:11px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background:
    linear-gradient(135deg, rgba(150,58,236,.34) 0%, rgba(58,14,110,.30) 42%, rgba(8,2,20,.86) 100%);
  background-clip:padding-box;
  display:flex; flex-direction:column; align-items:flex-start;
}
.promo-char{                                   /* 신규 업데이트 아이템 : 우측에 걸침 */
  position:absolute; right:-18px; top:50%;
  height:142%; width:auto; max-width:none;
  transform:translateY(-50%);
  opacity:.55; pointer-events:none;                /* 반투명 · TRANSLUCENT */
  filter:drop-shadow(0 0 24px rgba(190,110,255,.6)) drop-shadow(0 6px 18px rgba(0,0,0,.6));
  transition:transform .5s cubic-bezier(.2,.8,.3,1), filter .35s ease, opacity .35s ease;
}
.h-promo:hover .promo-char{
  transform:translateY(-50%) rotate(-5deg) scale(1.05);
  opacity:.78;
  filter:drop-shadow(0 0 34px rgba(214,150,255,.9)) drop-shadow(0 6px 18px rgba(0,0,0,.6));
}

.promo-badge{
  position:relative; z-index:1;
  display:inline-block; padding:3px 11px;
  font:bold 12px/1.5 Tahoma,sans-serif; letter-spacing:.24em;
  color:#fff; background:rgba(168,52,236,.75);
  box-shadow:0 0 16px rgba(190,90,255,.85);
}
.promo-title{
  position:relative; z-index:1; margin-top:11px;
  font:bold 27px/1.1 "Malgun Gothic",sans-serif; letter-spacing:-.01em;
  color:#fff; text-shadow:0 0 22px rgba(178,88,255,1), 0 2px 12px rgba(0,0,0,.95);
}
.promo-title span{
  display:block; margin-top:5px;
  font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.3em; color:#cba6f5;
  text-shadow:0 0 12px rgba(150,70,220,.95);
}
.promo-desc{
  position:relative; z-index:1; margin-top:9px;
  font-size:12px; line-height:1.65; color:#cdbee4;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.promo-desc b{ color:#f2ddff; font-weight:bold; }

.promo-go{
  position:relative; z-index:1; margin-top:auto;
  display:inline-flex; align-items:center; gap:9px;
  padding-top:12px;
  font:bold 12px/1 "Malgun Gothic",sans-serif; letter-spacing:.04em;
  color:#f0e2ff; text-shadow:0 0 10px rgba(178,104,240,.9);
  transition:gap .18s ease, color .18s ease;
}
.promo-go b{ font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.22em; color:#b674f0; }
.promo-go::after{
  content:""; width:22px; height:1px; background:#c78bff;
  box-shadow:0 0 8px rgba(199,139,255,.95);
  transition:width .18s ease;
}
.h-promo:hover .promo-go{ gap:14px; color:#fff; }
.h-promo:hover .promo-go::after{ width:34px; }



/* ==========================================================================
   상단 반응형 · HERO RESPONSIVE
   ========================================================================== */
/* ---- 상단(HERO) 분기 : sub.css 와 반드시 동일하게 유지 ---- */
/* 좌우 칸은 항상 같은 폭으로 유지 → 카드 줄이 화면 중앙(행성·로고)과 어긋나지 않음 */
@media (max-width:1680px){
  #hero{ grid-template-columns:280px minmax(0,1fr) 280px; gap:12px; }
  /* #grid 의 열 규칙은 style.css 한 곳에서만 관리한다 (여기 있던 5열 고정폭은 제거) */
}

/* 카드 6장(6×130 + 여백)이 들어가도록 좌우 칸을 먼저 줄임 */
@media (max-width:1500px){
  #hero{ grid-template-columns:244px minmax(0,1fr) 244px; gap:10px; }
  .deck{ gap:10px; }
}

/* 1280~1400 : 아직 가로로 충분히 들어간다 (카드 6×130 + 간격 = 830)
   여기서 세로로 쌓아버리면 1280x768 같은 화면에서 상단이 화면을 다 먹는다. */
@media (max-width:1400px){
  #hero{ grid-template-columns:196px minmax(0,1fr) 244px; gap:8px; }
  .deck{ gap:8px; padding-top:40px; }
  .h-logo .logo{ height:clamp(52px,7vh,70px); }
  .h-logo .emblem{ height:clamp(150px,19vh,200px); }
  .h-promo{ padding-right:64px; }
  .promo-title{ font-size:21px; }
  .promo-char{ right:-34px; height:126%; }
  /* 영문 부제·버튼이 두 글자씩 끊겨 내려가지 않게 (ABYSS CA / NYON, 자세 / 히 보기) */
  .promo-title span{ white-space:nowrap; font-size:11px; letter-spacing:1px; }
  .promo-go{ white-space:nowrap; }
}

/* 이보다 좁으면 카드가 깨지므로 그때 세로로 쌓는다 */
@media (max-width:1180px){
  #hero{ height:auto; grid-template-columns:minmax(0,1fr); gap:14px; }
  #hero::before{ height:78px; }
  .h-logo{ order:1; padding-top:74px; }   /* 성운·로고 밴드와 겹치지 않게 */
  .deck{ order:2; flex-wrap:wrap; overflow:visible; gap:12px; padding-top:0; }
  .h-promo{ order:3; min-height:200px; }
}

@media (max-width:820px){
  #hero::before{ width:1600px; height:62px; }
  /* 카드 6장을 3열로. 2열이면 세로로 너무 길어져 상단이 화면을 다 먹는다. */
  .deck{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
         justify-items:center; gap:8px; padding-top:0; overflow:visible; }
  .card{ transform:none !important; width:100%; }
  .card .face{ width:100%; max-width:130px; height:auto; }
  .card .refl{ width:100%; max-width:130px; height:auto; }
}
@media (max-width:520px){
  .deck{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* 회원 유틸바(#hd-util)를 화면 우측 상단에 띄우기 위한 기준 */
#app{ position:relative; }

/* ==========================================================================
   회원 유틸바 · #hd-util
     성운 띠의 "왼쪽 빈 구간" 에 얹는다.
     우측은 NEW UPDATE 프로모 박스가 최상단부터 차지하므로 겹치면 안 된다.
   ========================================================================== */
#app{ position:relative; }

#hd-util{
  position:absolute; left:clamp(12px,1.6vw,22px); top:6px; z-index:20;
  display:flex; align-items:center; gap:2px;
  padding:4px 6px;
  background:rgba(6,1,16,.72);
  border:1px solid rgba(150,84,210,.32);
  border-radius:2px;
  font-size:12px; line-height:1;
}
#hd-util .hu-me{ padding:5px 9px; color:#c6b8dc; white-space:nowrap; }
#hd-util .hu-me b{ color:#f0e0ff; }
#hd-util a{
  padding:5px 9px; color:#a99cc0; white-space:nowrap;
  transition:color .16s ease, background .16s ease;
}
#hd-util a u{
  text-decoration:none; margin-left:5px;
  font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.08em; color:#7f719c;
}
#hd-util a:hover{ color:#fff; background:rgba(96,38,164,.42); }
#hd-util a:hover u{ color:#c9a6f0; }

/* 관리자 대시보드만 금색으로 눈에 띄게 */
#hd-util .hu-adm{
  margin-left:4px;
  color:#ffe9bc;
  background:linear-gradient(90deg, rgba(158,110,26,.42), rgba(48,26,6,.28));
  border-left:2px solid rgba(255,190,90,.7);
}
#hd-util .hu-adm u{ color:#d8b271; }
#hd-util .hu-adm:hover{ color:#fff; background:rgba(158,110,26,.62); }

/* 좁은 화면 : 겹칠 자리가 없으므로 흐름 안으로 내린다 */
@media (max-width:1100px){
  #hd-util{
    position:static; justify-content:center; flex-wrap:wrap;
    margin:0 0 8px; border-radius:0;
  }
}