@charset "utf-8";
/* ==========================================================================
   X서버 · X SERVER  —  메인 페이지 MAIN

   구조 STRUCTURE
     HERO   : 로고 | 카드 6칸(메인 메뉴) | 슬로건 + 다운로드
     GRID   : 로그인/고객센터 | 게시판 | 공성전/보스타이머 | 랭킹
     STRIP  : 이용안내 | 서버정보 | 갤러리
     FOOT   : 카피라이트

   원칙 RULES
     · 테두리/제목/로고/버튼 = 전부 이미지 (PSD frame.png + 생성 네온 PNG)
     · 메뉴는 PSD 카드 6칸 하나뿐 (중복 메뉴 없음)
     · 모든 이미지는 원본 크기 이하로만 표시 (확대 없음 = 깨짐 없음)
     · 배경 캐릭터가 비치도록 패널은 반투명
   ========================================================================== */

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{ min-height:100%; }

body{
  overflow:hidden;                       /* 스크롤 없음 · NO SCROLL */
  background:#04010a url(../img/bg_hero.jpg) no-repeat center center;
  background-size:cover;
  background-attachment:fixed;
  color:#ddd2ee;
  font:14px/1.7 Tahoma, Verdana, "Malgun Gothic","맑은 고딕", Dotum, sans-serif;
  -webkit-font-smoothing:antialiased;
}

img{ border:0; display:block; max-width:100%; }
a{ color:#ddd2ee; text-decoration:none; outline:none; -webkit-tap-highlight-color:transparent; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; outline:none;
        -webkit-tap-highlight-color:transparent; }
ul,ol{ list-style:none; }

#app{
  /* 큰 화면에서 100% 로 늘리면 카드 6칸·패널이 과하게 벌어져 원본 시안과 멀어진다.
     최대 폭을 두고 가운데 정렬. 작은 화면에서는 max-width 가 걸리지 않아 손해가 없다. */
  width:100%; max-width:1720px; margin:0 auto;
  height:100%; overflow:hidden;
  display:flex; flex-direction:column; gap:10px;
  padding:8px 16px 10px;
}


/* ==========================================================================
   2. 공통 패널 · PANEL
   ========================================================================== */
.panel{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; min-height:0; min-width:0;
  border:9px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background:rgba(7,2,17,.62);
  background-clip:padding-box;
}

.p-head{
  flex:0 0 auto; height:36px;
  display:flex; align-items:center; gap:3px;
  margin:-1px -3px 7px; padding-right:8px;
  background:url(../img/ui/head_tile.png) repeat-x center;
  background-size:auto 36px;
}
/* 제목 띠(cap·head_tile)는 원본이 36px 이라 그대로 쓴다.
   제목 이미지는 53px 원본을 42px 로 줄여 쓴다 — 서브페이지와 같은 크기다.
   메인과 서브가 다르면 같은 이미지인데도 글자 크기가 달라 보인다. */
.p-head .cap{ height:36px; width:auto; flex:none; }
.p-head .ttl{ height:42px; width:auto; margin-left:2px; }

.p-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:0 6px 5px; }

/* 스크롤 없이 패널 안에 딱 맞게 · NO INNER SCROLLBAR */
.p-body.scroll{ display:flex; flex-direction:column; overflow:hidden; }
/* 목록 종류를 빠짐없이 적어야 한다.
   빠지면 그 목록만 높이를 안 나눠 가져서 아래쪽 항목이 잘린다. (보스출현이 그랬음) */
.p-body.scroll > .list,
.p-body.scroll > .rank,
.p-body.scroll > .boss,
.p-body.scroll > .hist,
.p-body.scroll > .pk,
.p-body.scroll > .glist,
.p-body.scroll > .grank,
.p-body.scroll > .slist{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.p-body.scroll > .list > li,
.p-body.scroll > .rank > li,
.p-body.scroll > .boss > li,
.p-body.scroll > .hist > li,
.p-body.scroll > .pk > li,
.p-body.scroll > .glist > li,
.p-body.scroll > .grank > li,
.p-body.scroll > .slist > li{ flex:1 1 0; min-height:0; }

/* ---------- 랭킹 박스 : 캐릭터 + 길드 한 박스 (원본 시안) ---------- */
/* 우측 아래 불꽃 캐릭터 워터마크 · FLAME FIGURE (보라색으로 변환한 원본 이미지) */
.p-rank::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-26px; bottom:-8px;
  width:184px; height:92%;
  background:url(../img/rank_flame.png) no-repeat right bottom;
  background-size:contain;
  opacity:.46;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 40%);
          mask-image:linear-gradient(to right, transparent 0, #000 40%);
}
.p-rank .p-head, .p-rank .p-body{ position:relative; z-index:1; }

.rank-box{ gap:6px; overflow:hidden; }
.rank-sec{ flex:1 1 0; min-height:0; display:flex; flex-direction:column;
           align-items:flex-start; }          /* 제목 이미지가 늘어나지 않게 */
/* 소제목(캐릭터·길드) 이미지도 원본 53px 로 */
.rank-sec .sec-ttl{ flex:none; height:53px; width:auto; margin:0 0 -3px -6px; }
.rank-sec .rank{ flex:1 1 auto; min-height:0; width:100%;
                 display:flex; flex-direction:column; }
.rank-sec .rank li{ flex:1 1 0; min-height:0; }

/* 탭 · TABS */
.tabs .tab{ position:relative; padding:0 5px; margin:0 1px; line-height:0; }
.tabs .tab > img:first-child{ height:40px; width:auto;
  filter:brightness(.5) saturate(.3); transition:filter .18s ease; }
.tabs .tab:hover > img:first-child{ filter:brightness(1.55) saturate(.4); }
.tabs .tab.on  > img:first-child{ filter:brightness(1.15); }
.tabs .tab .ul{ position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
                height:8px; width:auto; opacity:0; transition:opacity .18s ease; }
.tabs .tab.on .ul{ opacity:1; }

.more{ margin-left:auto; font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.12em;
       color:#b674f0; text-shadow:0 0 8px rgba(178,104,240,.9); }
.more:hover{ color:#fff; text-shadow:0 0 10px rgba(255,255,255,.55); }


/* ==========================================================================
   3. 본 그리드 · MAIN GRID
   ========================================================================== */
/* 열 배치는 index.php 가 .gcol 로 직접 담는다.
   여기서는 격자만 잡고, 실제 열 규칙은 아래 [구조 변경] 절에 있다.
   (예전의 행 고정 격자 + .p-* grid-area 는 제거 — 행 높이를 고정하면
    내용이 짧을 때 그 행이 통째로 빈칸이 됐다) */
#grid{
  flex:0 0 auto; min-height:0;
  display:grid;
  gap:10px;
}


/* ---------- 로그인 · MEMBER LOGIN ----------
   패널 본문 높이(약 133px)에 폼이 딱 맞아야 한다.
   글꼴을 키운 뒤 내용이 넘쳐서 위아래가 잘렸으므로 높이/여백을 줄여 맞춤.
   입력 34+7, 버튼 44, 링크 9+20 = 155px → 32+5, 40, 5+20 = 134px       */
.p-login .p-head{ margin-bottom:4px; }
.p-login .p-body{ justify-content:center; padding-bottom:2px; }
.login input{
  width:100%; height:30px; margin-bottom:5px; padding:0 10px;
  background:rgba(0,0,0,.5); border:1px solid rgba(150,84,210,.5);
  color:#efe6fb; font-size:13px;
}
.login input::placeholder{ color:#8b7da4; font-size:12px; }
.login input:focus{ outline:none; border-color:#c77dff; box-shadow:0 0 9px rgba(168,92,232,.7); }
.sub-links{ margin-top:4px; text-align:center; font-size:12px; color:#9c8fb4; }
.sub-links a{ color:#a99cc0; }
.sub-links a:hover{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.38); }
.sub-links i{ display:inline-block; width:1px; height:10px; margin:0 8px -1px;
              background:rgba(150,84,210,.5); }

/* ---------- 고객센터 · SUPPORT ---------- */
/* 고객센터 항목 = 네온 이미지 · SUPPORT MENU (IMAGE LABELS) */
.slist{ flex:1 1 auto; display:flex; flex-direction:column; }
.slist li{ flex:1 1 auto; display:flex; align-items:center;
           border-bottom:1px solid rgba(140,74,206,.16); }
.slist li:last-child{ border-bottom:0; }
.slist a{ display:flex; align-items:center; width:100%; height:100%; line-height:0;
          padding:0 4px; transition:background-color .15s ease; }
.slist a:hover{ background-color:rgba(142,72,214,.2); }
.slist img{ height:38px; width:auto; filter:brightness(.92);
            transition:filter .18s ease, transform .18s ease; }
.slist a:hover img{ filter:brightness(1.68) saturate(.3); transform:translateX(6px); }


/* ---------- 게시판 목록 · BOARD ---------- */
.list li{
  display:flex; align-items:center; gap:9px;
  padding:5px 6px 5px 18px;
  background:url(../img/ui/bullet.png) no-repeat 2px center;
  background-size:12px auto;
  border-bottom:1px solid rgba(140,74,206,.15);
  transition:background-color .15s ease;
}
.list li:last-child{ border-bottom:0; }
.list li:hover{ background-color:rgba(142,72,214,.2); }
.list a{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
         color:#e4daf3; }
.list li:hover a{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.35); }
.list time{ flex:none; width:40px; text-align:right; font-size:12px; color:#9c8fb4; }
/* 게임 캐릭터가 아직 없는 회원에게 보여줄 안내 (로그인 박스) */
.li-nochar{ margin:6px 0 8px; padding:12px 10px; text-align:center;
            background:rgba(96,38,164,.18); border:1px solid rgba(150,84,210,.35); }
.li-nochar b{ display:block; font-size:14px; color:#e8d9ff; }
.li-nochar span{ display:block; margin-top:4px; font-size:12px; line-height:1.7; color:#a99cc0; }
.li-nochar a{ display:inline-block; margin-top:8px; padding:6px 14px; font-size:12px;
              color:#e8d9ff; background:rgba(0,0,0,.4);
              border:1px solid rgba(168,92,232,.5); }
.li-nochar a:hover{ color:#fff; background:rgba(96,38,164,.45); }

/* 목록 오른쪽 글쓴이(캐릭터명) — 날짜보다 길어서 자리를 더 준다 */
.list .who{ flex:none; max-width:34%; text-align:right; font-size:12px; color:#a99cc0;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tag{ display:inline-block; margin-right:7px; padding:1px 6px; font-size:12px;
      color:#f0e0ff; border:1px solid rgba(178,104,240,.6); }
.tag.hot{ color:#fff; border-color:rgba(226,180,255,.85); background:rgba(150,66,220,.4); }


/* ---------- 공성전 · SIEGE WAR ---------- */
.p-siege .p-body{ justify-content:flex-start; gap:7px; overflow:hidden; }
.p-siege .lord, .p-siege .cdown{ flex:none; }

/* 두 블록이 남는 높이를 나눠 가져 여백 없이 꽉 채움 */
.p-siege .sblock{ flex:1 1 0; min-height:0; display:flex; flex-direction:column; }
.p-siege .sblock .hist,
.p-siege .sblock .pk{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.p-siege .sblock .hist > li,
.p-siege .sblock .pk > li{ flex:1 1 0; min-height:0; }

/* 보스 처치 / PK 현황 블록 */
.sblock{ background:rgba(78,30,136,.16); padding:6px 9px 4px; }
.blk-lbl{ display:block; margin-bottom:3px; font-size:12px; letter-spacing:.05em; color:#a99cc0; }
.hist li{ display:flex; align-items:center; gap:9px; padding:3px 1px;
          border-bottom:1px solid rgba(140,74,206,.14); font-size:12px; }
.hist li:last-child{ border-bottom:0; }
.hist em{ flex:none; width:38px; font-style:normal; font-size:12px; color:#9c8fb4; }
.hist b{ flex:1 1 auto; min-width:0; font-weight:normal; color:#e4daf3;
         overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hist span{ flex:none; width:74px; text-align:right; font-size:12px; color:#9c8fb4;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hist span.win{ color:#ffe0a8; text-shadow:0 0 9px rgba(255,190,90,.6); }

/* PK 현황 · PK RECORD  (승자 vs 패자 / 승률) */
.blk-lbl u{ float:right; text-decoration:none; font-size:12px; color:#8a7ca6; letter-spacing:0; }

.pk li{ display:flex; align-items:center; gap:6px; padding:3px 1px;
        border-bottom:1px solid rgba(140,74,206,.14); font-size:12px; }
.pk li:last-child{ border-bottom:0; }

/* 승/패 뱃지·승률이 닉네임 길이와 상관없이 항상 같은 위치 (고정폭) */
.pk b{ flex:1 1 0; min-width:0; display:flex; align-items:center;
       justify-content:space-between; gap:4px; font-weight:normal; }
.pk b span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk i{ flex:none; width:20px; text-align:center; font-style:normal;
       font-size:12px; line-height:1; padding:2px 0; border-radius:1px; }

.pk .w span{ color:#ffe0a8; text-shadow:0 0 9px rgba(255,190,90,.5); }
.pk .w i{ color:#ffd08a; border:1px solid rgba(255,190,90,.6); }

.pk .l span{ color:#d3aeba; }
.pk .l i{ color:#ff9fb4; border:1px solid rgba(255,110,150,.5); }

.pk s{ flex:none; width:18px; text-align:center; text-decoration:none;
       font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.08em; color:#8a7ca6; }

.pk em{ flex:none; width:38px; text-align:right; font-style:normal;
        font:bold 12px/1 Tahoma,sans-serif; color:#c9a6f0;
        text-shadow:0 0 8px rgba(178,104,240,.6); }

.lord{ display:flex; align-items:center; gap:10px; padding:6px 9px;
       background:rgba(112,52,180,.20); }
.lord img{ flex:none; width:42px; height:42px; }
.lord .lbl{ display:block; font-size:12px; letter-spacing:.04em; color:#a99cc0; line-height:1.25;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lord strong{ display:block; margin:1px 0; font:bold 19px/1.1 "Malgun Gothic",sans-serif;
              color:#ffe9bc; text-shadow:0 0 14px rgba(255,196,90,.75); }
.lord .sub{ display:block; font-size:12px; line-height:1.3; color:#9c8fb4; }

.cdown{ text-align:center; padding:6px 4px; background:rgba(78,30,136,.22); }
.cdown .lbl{ display:block; font-size:12px; letter-spacing:.06em; color:#a99cc0; line-height:1.3; }
.cdown .clock{ margin:5px 0 4px; white-space:nowrap; line-height:1; }
.cdown .clock b{
  display:inline-block; min-width:34px; padding:3px 3px;
  font:bold 20px/1.1 Tahoma,sans-serif; color:#f6e9ff;
  text-shadow:0 0 16px rgba(196,132,255,1);
  background:rgba(24,7,48,.62);
}
.cdown .clock u{ display:inline-block; padding:0 5px 0 3px; font-size:12px;
                 text-decoration:none; color:#9c8fb4; }
.cdown .sub{ display:block; font-size:12px; line-height:1.35; color:#c9b6e6; }

.kv li{ display:flex; justify-content:space-between; align-items:center; gap:8px;
        padding:4px 8px; border-bottom:1px solid rgba(140,74,206,.16); font-size:12px; }
.kv li:last-child{ border-bottom:0; }
.kv span{ color:#a99cc0; }
.kv b{ font-weight:normal; color:#ecdfff; }


/* ---------- 보스 타이머 · BOSS TIMER ---------- */
.boss{ flex:1 1 auto; display:flex; flex-direction:column; }
.boss li{ flex:1 1 auto; display:flex; align-items:center; gap:8px; padding:5px 8px;
          border-bottom:1px solid rgba(140,74,206,.15);
          transition:background-color .15s ease; }
.boss li:last-child{ border-bottom:0; }
.boss li:hover{ background-color:rgba(142,72,214,.2); }
.boss b{ flex:1 1 auto; min-width:0; font-weight:normal; color:#e4daf3;
         overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.boss span{ flex:none; width:74px; text-align:right; font-size:12px; color:#9c8fb4;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.boss .t{ flex:none; width:70px; text-align:right; font-style:normal;
          font:bold 14px/1 Tahoma,sans-serif; color:#dcb6ff;
          text-shadow:0 0 10px rgba(178,104,240,.9); }
.boss li.soon{ background-color:rgba(206,58,102,.3); }
.boss li.soon .t{ color:#ffdde4; text-shadow:0 0 12px rgba(255,110,150,1); }
.boss li.soon b{ color:#fff; }


/* ---------- 랭킹 · RANKING ---------- */
.rank li{ display:flex; align-items:center; gap:10px; padding:5px 6px;
          border-bottom:1px solid rgba(140,74,206,.15);
          transition:background-color .15s ease; }
.rank li:last-child{ border-bottom:0; }
.rank li:hover{ background-color:rgba(142,72,214,.2); }
/* 4위부터는 네모 테두리 안에 숫자 — 서브페이지 랭킹과 같은 모양으로 맞춘다 */
.rank li i{ flex:none; width:20px; height:20px; font-style:normal; text-align:center;
            font:bold 12px/20px Tahoma,sans-serif; color:#c9a6f0;
            border:1px solid rgba(168,92,232,.5); }
.rank li .md{ flex:none; width:26px; height:26px; margin:-3px -2px; }
.rank li b{ flex:1 1 auto; min-width:0; font-weight:normal; color:#e4daf3;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank li em{ flex:none; width:58px; text-align:right; font-style:normal;
             font-size:12px; color:#a99cc0; }
.rank li.top b{ color:#f6e9ff; text-shadow:0 0 10px rgba(178,104,240,.75); }
.rank li:hover b{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.35); }


/* ==========================================================================
   4. 하단 스트립 · BOTTOM STRIP
   ========================================================================== */
/* ==========================================================================
   하단 유틸리티 바 · UTILITY BAR
   박스 3개를 한 줄짜리 얇은 바로 통합 (서버정보 | 퀵메뉴 | 갤러리)
   ========================================================================== */
#utilbar{
  flex:0 0 auto; height:clamp(84px, 10vh, 106px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);
  gap:20px;                              /* 두 박스가 붙어 보이지 않게 */
  border:0; background:none;            /* 두 박스를 따로 나눠 색을 다르게 */
  padding:0; overflow:visible;
}
#utilbar .ub{ min-width:0; height:100%; display:flex; align-items:center;
              gap:14px; padding:0 clamp(12px,1.2vw,22px);
              border:9px solid transparent;
              border-image:url(../img/frame.png) 16 stretch;
              background:rgba(7,2,17,.62); background-clip:padding-box; }

/* 이벤트 배너 슬라이드 : 초록 프레임으로 구분 · 패딩 없이 배너가 꽉 참
   ※ 배너 등록/삭제/순서/노출기간은 나중에 관리자 대시보드에서 관리 */
#utilbar .ub-bn{
  padding:0; gap:0; overflow:hidden;
  border-image:url(../img/frame_green.png) 16 stretch;
  background:rgba(3,16,11,.62); background-clip:padding-box;
}
.bn{ position:relative; width:100%; height:100%; overflow:hidden; }
.bn-item{ position:absolute; inset:0; display:block; line-height:0;
          opacity:0; visibility:hidden; transition:opacity .55s ease; }
.bn-item.on{ opacity:1; visibility:visible; }
.bn-item img{ width:100%; height:100%; object-fit:cover; object-position:left center; }

.bn-nav{ position:absolute; right:10px; bottom:8px; z-index:2; display:flex; gap:5px; }
.bn-dot{ width:9px; height:9px; padding:0; border:1px solid rgba(120,226,178,.55);
         background:rgba(0,0,0,.45); transition:.16s; }
.bn-dot span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.bn-dot:hover{ border-color:#7cf0bc; }
.bn-dot.on{ background:#7cf0bc; border-color:#7cf0bc;
            box-shadow:0 0 10px rgba(124,240,188,.9); }

#utilbar .ub-gal .ttl{ flex:none; height:42px; width:auto; }

/* 서버정보 */
#utilbar .spec{ flex:1 1 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
                gap:0; padding:0; }
#utilbar .spec li{ background:none; padding:0 4px; border-left:1px solid rgba(140,74,206,.16); }
#utilbar .spec li:first-child{ border-left:0; }
#utilbar .spec b{ font-size:clamp(17px,1.9vh,21px); }
#utilbar .spec b u{ font-size:12px; }
#utilbar .spec span{ margin-top:2px; font-size:12px; }

/* 퀵메뉴 */
#utilbar .qmenu{ flex:1 1 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
                 gap:4px; padding:0; }
#utilbar .qmenu a{ height:26px; }
#utilbar .qmenu img{ height:22px; }

/* 갤러리 */
#utilbar .ub-gal{ gap:10px; }
#utilbar .gmini{ flex:1 1 auto; min-width:0; display:grid;
                 grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; }
#utilbar .gmini a{ display:flex; align-items:center; justify-content:center;
                   overflow:hidden; height:clamp(46px,5.6vh,62px);
                   background:rgba(6,1,14,.55);
                   border:1px solid rgba(150,84,210,.22); }
/* 이미지 크기와 상관없이 잘리지 않고 전체가 보이게 */
#utilbar .gmini img{ max-width:100%; max-height:100%; width:auto; height:auto;
                     object-fit:contain;
                     transition:transform .25s ease, filter .25s ease; }
#utilbar .gmini a:hover img{ transform:scale(1.12); filter:brightness(1.7) saturate(.55); }
.ub-more{ flex:none; font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.12em;
          color:#b674f0; text-shadow:0 0 8px rgba(178,104,240,.9); white-space:nowrap; }
.ub-more:hover{ color:#fff; text-shadow:0 0 10px rgba(255,255,255,.55); }


/* ==========================================================================
   빠른 서비스 · QUICK SERVICE  (하단 · 청록 계열로 다른 박스와 구분)
   ※ 항목은 나중에 관리자 대시보드에서 추가·삭제·순서변경 예정
   ========================================================================== */
#qserv{
  flex:0 0 auto; height:clamp(70px, 8.2vh, 88px);
  display:flex; align-items:center; gap:clamp(10px,1.2vw,20px);
  padding:0 clamp(12px,1.2vw,22px);
  border:9px solid transparent;
  border-image:url(../img/frame_cyan.png) 16 stretch;
  background:linear-gradient(90deg, rgba(14,96,122,.26) 0%, rgba(2,16,24,.62) 100%);
  background-clip:padding-box;
}
#qserv .qs-ttl{ flex:none; height:42px; width:auto; }
#qserv ul{ flex:1 1 auto; min-width:0; display:grid;
           grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
#qserv li{ display:flex; }
#qserv a{ flex:1 1 auto; height:42px; display:flex; align-items:center; justify-content:center;
          background:rgba(20,104,132,.22); line-height:0;
          transition:background-color .16s ease, box-shadow .16s ease; }
#qserv a:hover{ background:rgba(60,186,220,.30);
                box-shadow:0 0 14px rgba(72,206,236,.45) inset; }
#qserv img{ height:41px; width:auto; filter:brightness(.95); transition:filter .16s ease; }
#qserv a:hover img{ filter:brightness(1.6) saturate(.45); }

/* ---------- 퀵메뉴 · QUICK MENU (하단 스트립) ---------- */
.qmenu{ flex:1 1 auto; min-height:0; display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:5px; padding:0 6px 6px; }
.qmenu li{ display:flex; }
.qmenu a{ flex:1 1 auto; display:flex; align-items:center; justify-content:center;
          background:rgba(78,30,136,.20); line-height:0;
          transition:background-color .16s ease; }
.qmenu a:hover{ background:rgba(142,72,214,.32); }
.qmenu img{ height:34px; width:auto; filter:brightness(.95);
            transition:filter .16s ease; }
.qmenu a:hover img{ filter:brightness(1.68) saturate(.3); }

.steps{ flex:1 1 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
        gap:8px; padding:0 6px 6px; align-content:stretch; }
.steps li{ display:flex; flex-direction:column; align-items:center; justify-content:center;
           text-align:center; padding:8px 4px 10px; background:rgba(78,30,136,.20); }
.steps img{ height:38px; width:auto; }
.steps b{ font-size:12px; color:#f0e0ff; margin-top:-1px;
          text-shadow:0 0 9px rgba(178,104,240,.75); }
.steps span{ font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.14em;
             color:#a082cc; margin-top:5px; }

.spec{ flex:1 1 auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
       gap:8px; padding:0 6px 6px; align-content:stretch; }
.spec li{ display:flex; flex-direction:column; align-items:center; justify-content:center;
          text-align:center; padding:8px 2px; background:rgba(78,30,136,.20); }
.spec b{ display:block; font:bold 22px/1.1 Tahoma,sans-serif; color:#f4e6ff;
         text-shadow:0 0 14px rgba(196,132,255,.95); }
.spec b u{ font-size:14px; text-decoration:none; color:#c49af0; }
.spec span{ display:block; margin-top:5px; font-size:12px; color:#a99cc0; }

.gallery{ flex:1 1 auto; min-height:0; display:grid;
          grid-template-columns:repeat(6,minmax(0,1fr));
          gap:6px; padding:0 6px 6px; }
.gallery a{ display:block; line-height:0; overflow:hidden; }
.gallery img{ width:100%; height:100%; object-fit:cover;
              transition:transform .25s ease, filter .25s ease; }
.gallery a:hover img{ transform:scale(1.12); filter:brightness(1.7) saturate(.55); }


/* ==========================================================================
   5. 버튼 · BUTTON
   ========================================================================== */
.btn{ display:flex; align-items:center; justify-content:center; flex:none;
      border:9px solid transparent;
      border-image:url(../img/ui/btn.png) 14 fill stretch; }
.btn:hover{ border-image:url(../img/ui/btn_on.png) 14 fill stretch; }

.btn-wide{ width:100%; height:44px; transition:transform .14s ease; }
.p-login .btn-wide{ height:40px; }        /* 로그인 패널 안에서는 조금 낮게 */
.btn-wide span{ display:flex; align-items:baseline; gap:8px;
                font:bold 15px/1 "Malgun Gothic",sans-serif; letter-spacing:.06em;
                color:#f4e8ff; text-shadow:0 0 10px rgba(196,132,255,1); }
.btn-wide span u{ font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.2em;
                  text-decoration:none; color:#c9a6f0; }
.btn-wide:hover span u{ color:#fff; }
.btn-wide:hover{ transform:translateY(-1px); }
.btn-wide:hover span{ color:#fff; text-shadow:0 0 14px #fff, 0 0 24px rgba(214,160,255,.9); }
.btn-wide:active{ transform:translateY(0); }

.btn-lg{ width:100%; height:58px; }
.btn-lg img{ height:44px; width:auto; transition:filter .16s ease; }
.btn-lg:hover img{ filter:brightness(1.65); }


/* ==========================================================================
   6. 푸터 · FOOTER
   ========================================================================== */
#foot{ flex:0 0 auto; display:flex; justify-content:center; align-items:center;
       height:clamp(24px,3vh,34px); }
.f-copy{ height:clamp(22px,2.8vh,30px); width:auto; opacity:.8; }


/* ==========================================================================
   7. 반응형 · RESPONSIVE
   ========================================================================== */

/* 화면 높이가 낮으면 공성전 패널 내부 여백을 줄여
   보스 처치 3줄 + PK 4줄이 잘리지 않게 한다 */
@media (max-height:980px){
  .lord{ padding:5px 9px; }
  .lord img{ width:38px; height:38px; }
  .lord strong{ font-size:17px; }
  .cdown{ padding:5px 4px; }
  .cdown .clock{ margin:4px 0 3px; }
  .cdown .clock b{ min-width:31px; padding:2px 3px; font-size:17px; }
  .sblock{ padding:5px 9px 3px; }
  .hist li{ padding:2px 1px; }
  .pk li{ padding:2px 2px; }
  .p-siege .p-body{ gap:5px; }
}

/* 1화면에 다 못 담는 좁은/낮은 화면에서만 스크롤 허용 */
@media (max-width:1180px), (max-height:820px){
  html,body{ height:auto; overflow:auto; }
  #app{ height:auto; min-height:100vh; overflow:visible; }
  #hero{ height:auto; }
  .h-promo{ min-height:210px; }
  .deck{ overflow:visible; }
  #grid{ flex:0 0 auto; }
  #strip{ height:auto; }
}

/* 좁은 화면의 열 수는 파일 아래 [구조 변경] 절에서 한곳에 모아 처리한다 */
@media (max-width:1080px){
  #strip{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .s-gallery{ grid-column:1 / -1; }
}

@media (max-width:760px){
  #app{ padding:12px 10px 14px; gap:10px; }
  .deck{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-items:center; gap:10px; }
  .card{ transform:none !important; }
  .promo-char{ right:-70px; opacity:.38; }
  #strip{ grid-template-columns:minmax(0,1fr); }
  .gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ==========================================================================
   [그누보드 이식 추가분]  회원 유틸바 · 나의 캐시 · 서브 제목
   원본 정적 사이트에 없던 요소만 여기 모아둔다. 위쪽 규칙은 건드리지 않음.
   ========================================================================== */

/* ==========================================================================
   로그인 후 회원 요약 박스 (메인 로그인 패널)
   ========================================================================== */
.login-in{ display:flex; flex-direction:column; height:100%; }
.li-hi{ display:flex; align-items:center; gap:8px; padding-bottom:8px;
        font-size:14px; color:#ddd2ee; border-bottom:1px solid rgba(150,84,210,.3); }
.li-hi b{ font:bold 15px/1 "Malgun Gothic",sans-serif; color:#f0e0ff;
          text-shadow:0 0 10px rgba(178,104,240,.7); }
.li-hi em{ margin-left:auto; padding:2px 7px; font-style:normal;
           font:bold 12px/1.6 Tahoma,sans-serif; letter-spacing:.06em;
           color:#c9bda6; border:1px solid rgba(190,165,120,.4); }
.li-hi em.on{ color:#a8ffd0; border-color:rgba(120,240,180,.45); }

.li-char{ display:flex; align-items:baseline; gap:8px; margin-top:8px; }
.li-char .lc-nm{ font:bold 15px/1.2 "Malgun Gothic",sans-serif; color:#f0e0ff; }
.li-char .lc-cl{ font-size:12px; color:#a99cc0; }

.li-stat{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin-top:7px; }
.li-stat li{ text-align:center; padding:5px 2px; background:rgba(0,0,0,.34);
             border:1px solid rgba(150,84,210,.22); }
.li-stat b{ display:block; font:bold 15px/1.1 Tahoma,sans-serif; color:#f0e0ff;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.li-stat span{ display:block; margin-top:2px; font-size:12px; color:#a99cc0; }

.li-cash{ margin-top:8px; }
.li-cash li{ display:flex; align-items:center; justify-content:space-between; gap:8px;
             padding:4px 2px; font-size:12px; border-bottom:1px solid rgba(140,74,206,.14); }
.li-cash li:last-child{ border-bottom:0; }
.li-cash span{ color:#a99cc0; }
.li-cash b{ font:bold 13px/1 Tahoma,sans-serif; color:#dcc6f7; }

.li-quick{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:8px; }
.li-quick a{ position:relative; height:30px; display:flex; align-items:center; justify-content:center;
             font-size:12px; color:#c6b8dc; background:rgba(0,0,0,.4);
             border:1px solid rgba(150,84,210,.36); }
.li-quick a:hover{ color:#fff; background:rgba(96,38,164,.42); }
/* 로그아웃은 같은 줄에 있되 눈에 덜 띄게 (실수로 누르지 않게) */
.li-quick a.out{ color:#9c8fb4; border-color:rgba(150,84,210,.24); }
.li-quick a.out:hover{ color:#fff; background:rgba(120,40,60,.42);
                       border-color:rgba(206,84,110,.5); }
.li-quick a i{ margin-left:5px; padding:1px 5px; font-style:normal;
               font:bold 12px/1.4 Tahoma,sans-serif; color:#fff;
               background:rgba(206,44,86,.9); }
.login-in .sub-links{ margin-top:auto; padding-top:8px; }
/* 배너 미등록 안내 (관리자에게만 보임) */
.bn-none{ padding:26px 10px; text-align:center; font-size:13px; color:#9c8fb4; }
.bn-none a{ color:#c9a6f0; }

/* ==========================================================================
   인포 스트립 · 대각 분할 3구역
     5단 그리드 아래에 붙는 구역.  세로 사이드바를 또 만드는 대신
     대각선으로 잘린 3개 존으로 나눠 메인에서만 보이는 화면을 만든다.
   ========================================================================== */
#istrip{
  flex:0 0 auto;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.3fr) minmax(0,0.95fr);
  gap:0;
  min-height:clamp(230px,26vh,300px);
  border:9px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(150,58,236,.20) 0%, rgba(150,58,236,0) 62%),
    linear-gradient(180deg, rgba(14,4,32,.86) 0%, rgba(6,1,16,.92) 100%);
  background-clip:padding-box;
  overflow:hidden;
}

/* 각 존 : 오른쪽 모서리를 대각으로 자른다 */
.iz{
  position:relative;
  padding:16px 26px 16px 22px;
  min-width:0;
}
.iz-1, .iz-2{
  clip-path:polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%);
  margin-right:-24px;
  z-index:2;
}
.iz-2{ z-index:1; }
.iz-3{ z-index:0; padding-left:46px; }
.iz-1{ background:linear-gradient(120deg, rgba(96,38,164,.34) 0%, rgba(20,5,44,.30) 100%); }
.iz-2{ background:linear-gradient(120deg, rgba(56,18,110,.30) 0%, rgba(10,2,26,.26) 100%); }
.iz-3{ background:linear-gradient(120deg, rgba(30,10,62,.26) 0%, rgba(6,1,16,.20) 100%); }

/* 존 번호 : 배경에 크게 */
.iz-no{
  position:absolute; right:34px; top:6px; z-index:0;
  font:bold 62px/1 Tahoma,sans-serif; letter-spacing:-.04em;
  color:rgba(178,104,240,.10);
  pointer-events:none;
}
.iz-3 .iz-no{ right:16px; }

.iz-ttl{
  position:relative; z-index:1;
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  margin:0 0 12px; padding-bottom:9px;
  font:bold 16px/1.2 "Malgun Gothic",sans-serif; color:#f0e0ff;
  text-shadow:0 0 14px rgba(178,104,240,.7);
  border-bottom:1px solid rgba(150,84,210,.32);
}
.iz-ttl u{ text-decoration:none; font:bold 12px/1 Tahoma,sans-serif;
           letter-spacing:.18em; color:#a98cd0; }
.iz-live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px;
          font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.14em; color:#ff9fb4; font-style:normal; }
.iz-live i{ width:7px; height:7px; border-radius:50%; background:#ff5676;
            box-shadow:0 0 9px 2px rgba(255,86,118,.9); animation:izPulse 1.6s ease-in-out infinite; }
@keyframes izPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* 존1 : 서버 정보 */
.iz-spec{ position:relative; z-index:1; display:grid;
          grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px; }
.iz-spec li{ display:flex; align-items:baseline; justify-content:space-between; gap:8px;
             padding:5px 0; font-size:13px; border-bottom:1px solid rgba(140,74,206,.14); }
.iz-spec span{ color:#a99cc0; white-space:nowrap; }
.iz-spec b{ color:#f0e0ff; font:bold 14px/1 Tahoma,sans-serif;
            text-shadow:0 0 9px rgba(178,104,240,.6); }

/* 존2 : 실시간 소식 */
.iz-feed{ position:relative; z-index:1; }
.iz-feed li{ display:flex; align-items:center; gap:9px;
             padding:5px 0; font-size:13px;
             border-bottom:1px solid rgba(140,74,206,.13); }
.iz-feed li:last-child{ border-bottom:0; }
.iz-feed li.empty{ justify-content:center; padding:40px 0; color:#9c8fb4; }
.iz-feed em{ flex:none; min-width:38px; padding:2px 6px; text-align:center;
             font:bold 12px/1.5 Tahoma,sans-serif; font-style:normal;
             color:#c9a6f0; background:rgba(96,38,164,.34);
             border-left:2px solid rgba(178,104,240,.6); }
.iz-feed li.k-boss em{ color:#ffd9a8; background:rgba(158,110,26,.3);
                       border-left-color:rgba(255,190,90,.7); }
.iz-feed li.k-pk em  { color:#ff9fb4; background:rgba(158,24,52,.3);
                       border-left-color:rgba(255,86,118,.7); }
.iz-feed a, .iz-feed .tx{ flex:1 1 auto; min-width:0; color:#e4daf3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.iz-feed a:hover{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.4); }
.iz-feed i{ flex:none; max-width:38%; font-style:normal; font-size:12px; color:#8a7ca6;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 존3 : 운영진 · 접속 */
.iz-online{ position:relative; z-index:1; display:flex; align-items:baseline; gap:7px; margin-bottom:11px; }
.iz-online b{ font:bold 30px/1 Tahoma,sans-serif; color:#a8ffd0;
              text-shadow:0 0 18px rgba(120,240,180,.8); }
.iz-online span{ font-size:13px; color:#a99cc0; }
.iz-gm{ position:relative; z-index:1; }
.iz-gm li{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px; }
.iz-gm i{ width:7px; height:7px; flex:none; border-radius:50%;
          background:#7a6c93; box-shadow:none; }
.iz-gm li.on i{ background:#8affc4; box-shadow:0 0 8px 2px rgba(120,240,180,.8); }
.iz-gm b{ color:#e4daf3; }
.iz-gm span{ margin-left:auto; font-size:12px; color:#a99cc0; }
.iz-gm li.on span{ color:#a8ffd0; }

/* 존 하단 링크 */
.iz-go{ position:relative; z-index:1; margin-top:12px; }
.iz-go a{ display:inline-flex; align-items:center; gap:9px;
          font:bold 13px/1 "Malgun Gothic",sans-serif; color:#dcc6f7;
          transition:gap .16s ease, color .16s ease; }
.iz-go a i{ width:22px; height:1px; background:#c78bff;
            box-shadow:0 0 8px rgba(199,139,255,.9); transition:width .16s ease; }
.iz-go a:hover{ color:#fff; gap:13px; }
.iz-go a:hover i{ width:34px; }

@media (max-width:1180px){
  #istrip{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .iz-3{ grid-column:1 / -1; padding-left:22px; }
  .iz-1, .iz-2{ clip-path:none; margin-right:0; }
}
@media (max-width:760px){
  #istrip{ grid-template-columns:minmax(0,1fr); }
  .iz-spec{ grid-template-columns:minmax(0,1fr); }
}

/* ==========================================================================
   [구조 변경]  행 격자 → 열 스택 (index.php 에서 열에 직접 담는다)
     · 행 격자 : 같은 행에서 낮은 패널 아래가 통째로 빈다
     · 다단 흐름(column-count) : 빈칸은 없지만 열마다 끝나는 높이가 달라
       아래가 톱니처럼 어긋난다 ← 이게 "정렬이 이상하다" 의 원인
     · 지금 : 열마다 패널을 직접 담고, 마지막 패널이 남은 높이를 먹어
       다섯 열의 위·아래가 한 줄로 딱 맞는다.
   ========================================================================== */
#grid{
  flex:0 0 auto;
  display:grid;
  /* 목록 패널(1~3열)에 글쓴이 이름이 들어가므로 그쪽을 조금 넓게,
     공성전·랭킹(4~5열)은 값이 짧으니 조금 좁게. 윗줄/아랫줄이 같은 폭이라 정렬은 유지된다. */
  grid-template-columns:1.08fr 1.08fr 1.08fr 0.95fr 0.81fr;
  /* 두 줄. 높이는 그 줄에서 가장 큰 패널의 내용만큼만.
     최소 높이를 걸면 글이 적을 때 박스 아래가 그만큼 빈다. */
  grid-template-rows:auto auto;
  gap:10px;
  align-items:stretch;
  column-count:auto;
}
/* 열 묶음(.gcol)은 좁은 화면용 흐름 순서를 잡아둘 뿐,
   넓은 화면에서는 풀어서 패널 하나하나를 격자 칸에 직접 앉힌다 */
#grid .gcol{ display:contents; }
/* 모든 박스가 자기 칸을 꽉 채운다 → 줄마다 바닥이 딱 맞는다.
   목록 개수를 바꿔서 줄 높이가 달라져도, 두 줄을 쓰는 공성전·랭킹이
   따라 늘어나며 안쪽 항목 간격으로 남는 높이를 나눠 가진다.
   (그래서 "PK 4개 / 랭킹 8위" 처럼 수를 억지로 맞출 필요가 없다) */
#grid .panel{ width:auto; margin:0; min-height:0; align-self:stretch; }

/* 두 줄을 쓰는 패널 : 남는 높이를 항목 사이로 흘려보낸다 */
#grid .p-siege .p-body{ justify-content:space-between; }
#grid .p-siege .hist,
#grid .p-siege .pk{ flex:0 1 auto; justify-content:space-between; }
#grid .p-rank .p-body{ justify-content:stretch; }
#grid .p-rank .rank-box{ flex:1 1 auto; justify-content:space-between; }
#grid .p-rank .rank-sec .rank{ flex:0 1 auto; justify-content:space-between; }

/* ---- 칸 배치 ----
   같은 줄에는 높이가 비슷한 패널끼리 모은다.
   윗줄 : 로그인 · 운영진 · 보스출현   (내용이 많은 쪽)
   아랫줄: 서버가이드 · 공지사항 · 자유게시판 (짧은 목록)
   4·5열 : 공성전 · 랭킹 은 두 줄을 통째로 쓴다
   → 줄 높이가 서로 비슷해져 억지로 늘어난 빈 박스가 생기지 않는다 */
#grid .p-login  { grid-area:1 / 1; }
#grid .p-support{ grid-area:2 / 1; }         /* 운영진 : 로그인 아래 */
#grid .p-notice { grid-area:1 / 2; }         /* 공지사항 */
#grid .p-sguide { grid-area:2 / 2; }         /* 서버가이드 : 공지사항 아래 */
#grid .p-free   { grid-area:2 / 3; }         /* 자유게시판 : 서버 정보 아래 */
#grid .p-srv    { grid-area:1 / 3; }         /* 서버 정보 : 3열 위 */
#grid .p-siege  { grid-area:1 / 4 / 3 / 5; }
#grid .p-rank   { grid-area:1 / 5 / 3 / 6; }

/* 패널 안쪽은 세로 flex — 목록이 남는 높이를 나눠 가져 박스 아래가 비지 않는다.
   (다단 메이슨리 시절 넣었던 display:block 강제는 제거. 그것 때문에 랭킹·공성전
    패널 아래에 큰 빈 공간이 남았다) */
#grid .p-body{ display:flex; flex-direction:column; justify-content:space-between;
               padding:0 6px 7px; }
/* 윗줄 세 박스(로그인·운영진·보스출현)는 안쪽 여백을 똑같이 맞춘다.
   박스 높이는 격자가 맞춰주므로, 여기서는 위아래 패딩만 통일하면 줄이 맞는다. */
#grid .p-login .p-body,
#grid .p-support .p-body,
#grid .p-boss .p-body{ padding:6px 8px 8px; }

/* 윗줄 박스도 남는 높이를 안에서 나눠 가진다 → 박스 아래가 비지 않는다.
     · 운영진 : GM 목록은 위, 사칭 주의 안내는 바닥 (GM 수가 1명이든 3명이든 채워짐)
     · 보스출현 : 항목 사이가 벌어짐
     · 로그인 : 비로그인 폼은 가운데, 로그인 후 내용은 위아래로 펴짐 */
#grid .p-support .p-body{ justify-content:space-between; }
#grid .p-support .gmlist{ flex:0 1 auto; justify-content:space-between; }
#grid .p-support .gm-note{ flex:none; margin-top:8px; }
#grid .p-boss .p-body{ justify-content:space-between; }
#grid .p-boss .boss{ flex:0 1 auto; justify-content:space-between; }
#grid .p-login .p-body{ justify-content:center; }
#grid .p-login .login-in{ flex:1 1 auto; justify-content:space-between; }
#grid .p-login .list, #grid .p-support .gmlist, #grid .p-boss .boss{ flex:0 0 auto; }
#grid .p-support .gmlist{ flex:0 0 auto; }
#grid .p-support .gm-note{ margin-top:8px; }
#grid .p-body.scroll{ overflow:hidden; }
/* 랭킹 : 캐릭터 목록이 몇 개든 길드 섹션은 그 아래로 밀린다.
   (예전엔 두 섹션을 flex:1 1 0 으로 반반 나눠서, 캐릭터가 6개만 넘어도 길드와 겹쳤다) */
#grid .rank-box{ display:flex; flex-direction:column; justify-content:flex-start;
                 gap:6px; overflow:visible; }
#grid .rank-sec{ flex:0 0 auto; min-height:0; display:flex; flex-direction:column;
                 align-items:flex-start; }
#grid .rank-sec .rank{ flex:0 0 auto; width:100%; }
#grid .rank-sec .rank li{ flex:0 0 auto; }
/* 목록은 남는 높이를 차지하되, 줄 자체는 눌리지 않고 줄 사이가 벌어진다.
   (줄에 flex:1 을 주면 공성전처럼 요소가 많은 패널에서 글자가 겹친다) */
#grid .list, #grid .rank, #grid .boss,
#grid .hist, #grid .pk, #grid .glist, #grid .grank, #grid .slist{
  flex:0 1 auto; min-height:0; display:flex; flex-direction:column;
  justify-content:space-between; }
#grid .list li, #grid .rank li, #grid .boss li,
#grid .hist li, #grid .pk li, #grid .glist li, #grid .grank li{
  flex:0 0 auto; min-height:0; display:flex; align-items:center; }
#grid .list li.empty{ display:block; }

/* 줄 간격 : 촘촘하게 */
.p-head{ margin-bottom:5px; }
.p-head .more{ white-space:nowrap; }   /* MORE + 가 두 줄로 내려가지 않게 */

/* 아랫줄 목록 패널(서버가이드·공지사항·자유게시판)은 위아래를 좀 더 띄운다.
   글이 적어 박스가 헐렁해 보이던 곳이라 안쪽 여백을 주는 편이 낫다. */
#grid .p-sguide .p-body,
#grid .p-notice .p-body,
#grid .p-free   .p-body{ padding:8px 9px 8px; justify-content:flex-start; }
/* 목록이 남는 높이를 차지하면 그만큼 박스 아래가 빈다 → 내용 높이만큼만 */
#grid .p-sguide .list,
#grid .p-notice .list,
#grid .p-free   .list{ flex:0 0 auto; justify-content:flex-start; gap:0; }
/* 줄 사이는 아주 촘촘하게. 박스 위아래 여백은 .p-body 패딩으로만 준다 */
#grid .p-sguide .list li,
#grid .p-notice .list li,
#grid .p-free   .list li{ padding:4px 6px 4px 18px; }
#grid .p-sguide .list li.empty,
#grid .p-notice .list li.empty,
#grid .p-free   .list li.empty{ margin:auto 0; padding:20px 6px; }
.list li { padding:6px 6px 6px 18px; }
.boss li { padding:6px 6px; }
.rank li {padding: 2.8px 6px;}
.rank li.top{ padding:3px 6px; }
.hist li, .pk li{ padding:5px 6px; }
.list li.empty{ padding:22px 6px; text-align:center; background:none; color:#9c8fb4; }

/* (윗줄 박스의 세로 정렬은 아래 [구조 변경] 절에서 한곳에 모아 처리한다) */
.p-login .login input{ margin-bottom:6px; }
.p-siege .blk-lbl{ margin-top:8px; }
.p-siege .lord{ padding:6px 9px; }
.p-siege .cdown{ padding:6px 4px; }

/* 페이지 끝 빈 공간 제거 : 내용이 짧으면 그만큼만.
   더불어 "1화면 고정" 시절의 overflow:hidden 을 푼다.
   그대로 두면 인포 스트립·빠른 서비스가 화면 밖에서 통째로 잘려 안 보인다.
   가로만 clip 해서 화면보다 넓은 상단 성운 밴드(#hero::before)는 계속 잘라낸다. */
html, body{ min-height:0; height:auto; overflow-y:auto; overflow-x:hidden; }
#app{ min-height:0; height:auto; overflow:visible; overflow-x:clip; padding-bottom:14px; }

/* ---------- 인포 스트립 : 존 높이 편차로 생기던 빈칸 ---------- */
#istrip{ align-items:stretch; min-height:0; }
.iz{ display:flex; flex-direction:column; }
.iz-spec, .iz-feed, .iz-gm{ flex:1 1 auto; align-content:start; }
.iz-go{ margin-top:auto; }        /* 링크를 바닥에 붙여 위쪽 여백을 없앤다 */

/* ---------- 반응형 ----------
   1500px 아래에서는 열 하나가 250px 밑으로 내려가 글자가 잘리기 시작한다.
   (공성전 카운트다운·보스 이름·MORE + 가 두 줄로 깨진다)
   그래서 5단 묶음을 풀고(.gcol → display:contents) 패널을 다시 흘려보낸다.
     · 열 수를 4로 줄이기만 하면 다섯 번째 열만 다음 줄에 혼자 떨어진다
     · 흘려보내면 빈칸 없이 고르게 채워진다 (바닥만 조금 어긋남)
   글자가 깨지는 것보다 이쪽이 낫다. */
@media (max-width:1500px){
  #grid, #grid.gn-2, #grid.gn-3, #grid.gn-4, #grid.gn-5{
    display:block;                 /* 격자 해제 → 다단 흐름 */
    column-count:4; column-gap:10px;
  }
  #grid .gcol{ display:contents; }
  #grid .panel{
    display:block; break-inside:avoid; -webkit-column-break-inside:avoid;
    page-break-inside:avoid; width:100%; margin:0 0 10px; flex:0 0 auto;
    grid-area:auto;               /* 넓은 화면의 칸 지정 해제 */
  }
}
@media (max-width:1180px){ #grid, #grid.gn-2, #grid.gn-3, #grid.gn-4, #grid.gn-5{ column-count:3; } }
@media (max-width:980px) { #grid, #grid.gn-2, #grid.gn-3, #grid.gn-4, #grid.gn-5{ column-count:2; } }
@media (max-width:700px) { #grid, #grid.gn-2, #grid.gn-3, #grid.gn-4, #grid.gn-5{ column-count:1; } }
/* ==========================================================================
   이벤트 시간표 · 24H TIMETABLE   (구 인포 스트립을 대신한다)
     하루 24시간을 가로축으로 깔고 이벤트가 열리는 시각을 점으로 찍는다.
     지금 시각에 세로선이 서고, 다음 이벤트까지 남은 시간이 위에 뜬다.
     내용은 전부 대시보드(설정 > 이벤트 시간표)에서 온다.
   ========================================================================== */
#evt{
  flex:0 0 auto; position:relative;
  padding:12px 16px 14px;
  border:9px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(150,58,236,.16) 0%, rgba(150,58,236,0) 64%),
    linear-gradient(180deg, rgba(14,4,32,.88) 0%, rgba(6,1,16,.94) 100%);
  background-clip:padding-box;
}

/* ---------- 머리줄 ---------- */
.ev-head{ display:flex; align-items:center; gap:16px; margin-bottom:10px; }
.ev-ttl{ flex:none; margin:0; font:bold 17px/1 Tahoma,sans-serif; color:#f0e6ff;
         text-shadow:0 0 12px rgba(178,104,240,.55); }
.ev-ttl u{ margin-left:8px; text-decoration:none;
           font:bold 11px/1 Tahoma,sans-serif; letter-spacing:2px; color:#a274d8; }
.ev-next{ flex:none; display:flex; align-items:center; gap:9px; margin:0;
          padding:5px 13px;
          background:linear-gradient(90deg, rgba(96,38,164,.42) 0%, rgba(24,6,52,.30) 100%);
          border:1px solid rgba(168,92,232,.42); }
.ev-next .lb{ font-size:12px; color:#a99cc0; }
.ev-next .nm{ font:bold 13px/1 Tahoma,sans-serif; color:#e8d9ff; }
.ev-next .cd{ font:bold 16px/1 Tahoma,sans-serif; color:#7ff0d8;
              text-shadow:0 0 10px rgba(60,230,190,.55); }
.ev-note{ flex:1 1 auto; margin:0; text-align:right; font-size:12px; color:#7e7195; }

/* ---------- 시간 눈금 ---------- */
.ev-scale{ display:flex; align-items:flex-end; gap:10px; margin-bottom:3px; }
.ev-scale .sc-lb{ flex:none; width:132px; }
.ev-scale .sc-bar{ flex:1 1 auto; position:relative; height:15px; }
.ev-scale .sc-bar i{ position:absolute; bottom:0; transform:translateX(-50%);
                     font:bold 11px/1 Tahoma,sans-serif; color:#7e7195; font-style:normal; }

/* ---------- 이벤트 줄 ---------- */
.ev-rows{ position:relative; }
.ev-rows > li{ display:flex; align-items:center; gap:10px;
               padding:6px 0; border-top:1px solid rgba(140,74,206,.16); }
.ev-rows > li:first-child{ border-top:0; }
.ev-rows > li:hover{ background:rgba(142,72,214,.10); }

.ev-nm{ flex:none; width:132px; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ev-nm b{ font-weight:normal; font-size:13px; color:#e4daf3;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-nm u{ text-decoration:none; font:bold 10px/1 Tahoma,sans-serif;
          letter-spacing:1px; color:#7e7195;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ev-line{ flex:1 1 auto; position:relative; height:22px;
          background:linear-gradient(90deg, rgba(96,38,164,.16) 0%, rgba(24,6,52,.10) 100%);
          border:1px solid rgba(140,74,206,.18); }
/* 4시간마다 옅은 세로 눈금 */
.ev-line::before{
  content:""; position:absolute; left:0; top:0; right:0; bottom:0;
  background:repeating-linear-gradient(90deg,
    rgba(140,74,206,.16) 0 1px, rgba(140,74,206,0) 1px 16.6667%);
  pointer-events:none;
}

.ev-dot{ position:absolute; top:50%; width:9px; height:9px; margin:-5px 0 0 -5px;
         background:#b268f0; border:1px solid #d7b0ff;
         transform:rotate(45deg);
         box-shadow:0 0 8px rgba(178,104,240,.75); }
.ev-dot em{ display:none; position:absolute; left:50%; bottom:14px;
            transform:translateX(-50%) rotate(-45deg); transform-origin:center;
            padding:2px 6px; white-space:nowrap;
            font:bold 11px/1 Tahoma,sans-serif; font-style:normal; color:#f0e6ff;
            background:rgba(10,2,26,.94); border:1px solid rgba(168,92,232,.6); }
.ev-dot:hover{ background:#f0d8ff; }
.ev-dot:hover em{ display:block; }
/* 이미 지난 시각은 흐리게 */
.ev-dot.past{ background:rgba(140,74,206,.30); border-color:rgba(168,92,232,.30);
              box-shadow:none; }
/* 다음에 열릴 시각 */
.ev-dot.next{ background:#7ff0d8; border-color:#c8fff2; width:11px; height:11px;
              margin:-6px 0 0 -6px;
              box-shadow:0 0 12px rgba(60,230,190,.9); }

.ev-cnt{ flex:none; width:40px; text-align:right;
         font:bold 13px/1 Tahoma,sans-serif; color:#c9a6f0; }
.ev-cnt u{ margin-left:2px; text-decoration:none; font-size:11px; color:#7e7195; }

/* ---------- 지금 시각 세로선 ---------- */
.ev-now{ position:absolute; top:0; bottom:0; width:0;
         border-left:1px dashed rgba(127,240,216,.75);
         pointer-events:none; z-index:2; }
.ev-now b{ position:absolute; top:-2px; left:0; transform:translateX(-50%);
           padding:1px 6px; font:bold 10px/1.5 Tahoma,sans-serif; color:#04180f;
           background:#7ff0d8; white-space:nowrap; }

/* ---------- 좁은 화면 ---------- */
@media (max-width:1100px){
  .ev-head{ flex-wrap:wrap; gap:8px 14px; }
  .ev-note{ flex:1 0 100%; text-align:left; }
}
@media (max-width:760px){
  #evt{ padding:10px 10px 12px; }
  .ev-scale .sc-lb{ width:86px; }
  .ev-nm{ width:86px; }
  .ev-nm u{ display:none; }
  .ev-cnt{ display:none; }
}

/* 최근게시물 : 공지로 체크한 글은 맨 위에 고정되고 태그가 붙는다 */
.list li.nt{ background-color:rgba(96,38,164,.16); background-image:none; padding-left:6px; }
.list li.nt:hover{ background-color:rgba(142,72,214,.26); }
.list .nt-tag{ flex:none; margin-right:7px; padding:2px 7px;
               font:bold 11px/1.5 "Malgun Gothic",sans-serif; color:#fff;
               background:linear-gradient(180deg,#7b2fc9 0%,#4a1489 100%);
               border:1px solid rgba(199,125,255,.55); }
.list li.nt a{ color:#f0e6ff; }

/* ==========================================================================
   실시간 로그 · 게임 안에서 일어난 일
     PK 와 보스 처치를 한 문장으로 시간순. (공성전 패널의 목록을 여기로 합쳤다)
   ========================================================================== */
.p-glog .p-head .live{ display:inline-flex; align-items:center; gap:5px; margin-left:auto;
                       font:bold 11px/1 Tahoma,sans-serif; letter-spacing:.12em; color:#7ff0d8;
                       cursor:default; text-shadow:0 0 9px rgba(60,230,190,.7); }
.p-glog .p-head .live i{ width:6px; height:6px; border-radius:50%; background:#7ff0d8;
                         box-shadow:0 0 8px rgba(60,230,190,1); animation:xsblink 1.6s infinite; }
@keyframes xsblink{ 0%,100%{opacity:1} 50%{opacity:.25} }

.glog li{ display:flex; align-items:center; gap:8px; padding:6px 4px;
          border-bottom:1px solid rgba(140,74,206,.14);
          transition:background-color .15s ease; }
.glog li:last-child{ border-bottom:0; }
.glog li:hover{ background-color:rgba(142,72,214,.16); }
.glog .tg{ flex:none; min-width:38px; text-align:center; padding:2px 6px;
           font:bold 11px/1.5 "Malgun Gothic",sans-serif; color:#fff; }
.glog .k-pk   .tg{ background:rgba(206,44,86,.85);  border:1px solid rgba(226,84,120,.6); }
.glog .k-boss .tg{ background:rgba(198,140,34,.85); border:1px solid rgba(255,208,138,.6); }
.glog .tx{ flex:1 1 auto; min-width:0; font-size:13px; color:#ddd2ee;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.glog .k-pk   .tx b{ color:#ff9db4; font-weight:normal; }
.glog .k-boss .tx b{ color:#ffd08a; font-weight:normal; }
.glog em{ flex:none; font-style:normal; font-size:12px; color:#8d7fa0; }
.glog li.empty{ display:block; padding:22px 6px; text-align:center; color:#9c8fb4; font-size:13px; }

/* ==========================================================================
   실시간 전광판 · GAME LIVE
     게임 안에서 방금 일어난 일이 오른쪽에서 왼쪽으로 흐른다.
     상자에 안 담는다 → 문장이 길어도 "…" 로 잘리지 않고 끝까지 읽힌다.
   ========================================================================== */
#gtick{
  flex:0 0 auto; position:relative; overflow:hidden;
  display:flex; align-items:stretch; height:40px;
  border:1px solid rgba(150,84,210,.42);
  background:
    linear-gradient(90deg, rgba(20,4,44,.96) 0%, rgba(10,2,24,.9) 50%, rgba(20,4,44,.96) 100%);
  box-shadow:inset 0 0 26px rgba(150,58,236,.22);
}
/* 위아래 얇은 네온 선 */
#gtick::before, #gtick::after{
  content:""; position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(178,104,240,.85), transparent);
}
#gtick::before{ top:0; }
#gtick::after { bottom:0; }

/* 왼쪽 LIVE 딱지
   꽉 찬 청록 사선 대신, 어두운 바탕에 테두리만 두른 얇은 배지.
   점 하나가 파동처럼 퍼져 "지금 살아 있다"는 느낌만 준다. */
.gt-lb{
  flex:none; position:relative; display:flex; align-items:center; gap:9px;
  margin:6px 0 6px 8px; padding:0 14px 0 11px;
  font:bold 11px/1 Tahoma,sans-serif; letter-spacing:.24em; color:#8ff3de;
  background:rgba(10,40,36,.5);
  border:1px solid rgba(60,230,190,.42);
  z-index:2;
}
.gt-lb i{
  position:relative; flex:none; width:6px; height:6px; border-radius:50%;
  background:#3fd9b8; box-shadow:0 0 8px rgba(60,230,190,.9);
}
.gt-lb i::after{
  content:""; position:absolute; left:50%; top:50%;
  width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
  border:1px solid rgba(60,230,190,.9);
  animation:gtwave 1.9s ease-out infinite;
}
@keyframes gtwave{
  0%   { transform:scale(1);   opacity:.85; }
  100% { transform:scale(3.6); opacity:0;   }
}

/* 흐르는 영역 */
.gt-win{ flex:1 1 auto; min-width:0; position:relative; overflow:hidden; }
/* 양 끝을 흐리게 해서 글이 툭 끊겨 보이지 않게 */
.gt-win::before, .gt-win::after{
  content:""; position:absolute; top:0; bottom:0; width:46px; z-index:2; pointer-events:none;
}
.gt-win::before{ left:0;  background:linear-gradient(90deg, rgba(14,3,32,1), rgba(14,3,32,0)); }
.gt-win::after { right:0; background:linear-gradient(270deg, rgba(14,3,32,1), rgba(14,3,32,0)); }

.gt-run{
  display:flex; align-items:center; gap:0;
  width:max-content; height:100%;
  animation:gtroll 46s linear infinite;
}
#gtick:hover .gt-run{ animation-play-state:paused; }   /* 읽고 싶으면 멈춘다 */
@keyframes gtroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.gt-i{
  display:inline-flex; align-items:center; gap:8px;
  padding:0 22px; white-space:nowrap;          /* 잘리지 않는다 */
  font-size:13px; color:#ddd2ee;
  border-right:1px solid rgba(150,84,210,.22);
}
.gt-i b{
  flex:none; padding:2px 7px; font:bold 11px/1.5 "Malgun Gothic",sans-serif; color:#fff;
}
.gt-i.k-pk   b{ background:rgba(206,44,86,.9);  border:1px solid rgba(226,84,120,.65); }
.gt-i.k-boss b{ background:rgba(198,140,34,.9); border:1px solid rgba(255,208,138,.65); }
.gt-i em{ font-style:normal; font-size:12px; color:#8d7fa0; }

@media (max-width:760px){
  #gtick{ height:36px; }
  .gt-lb{ padding:0 12px 0 10px; font-size:11px; letter-spacing:.1em; }
  .gt-i{ padding:0 14px; font-size:12px; }
}

/* 전광판 : 맵 이름 */
.gt-i u{ text-decoration:none; font-size:12px; color:#9c8fb4; }
.gt-i.k-pk   u{ color:#e08fa4; }
.gt-i.k-boss u{ color:#e3c791; }

/* 공성전 : 성 정보 (세금·자금·등록 길드) */
.castle{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
         margin:8px 0 0; background:rgba(150,84,210,.16); border:1px solid rgba(150,84,210,.24); }
.castle li{ display:flex; align-items:center; justify-content:space-between; gap:6px;
            padding:6px 9px; background:rgba(8,2,20,.72); }
.castle span{ font-size:12px; color:#a99cc0; white-space:nowrap; }
.castle b{ font-weight:normal; font-size:13px; color:#e4daf3; white-space:nowrap;
           overflow:hidden; text-overflow:ellipsis; }
.castle b.on{ color:#7ff0d8; }

/* 서버 정보 : 이름과 값을 두 줄씩 (경험치 1000x 처럼) */
.spec2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
        background:rgba(150,84,210,.16); border:1px solid rgba(150,84,210,.24); }
.spec2 li{ display:flex; flex-direction:column; gap:2px; padding:7px 10px;
           background:rgba(8,2,20,.72); }
.spec2 span{ font-size:12px; color:#a99cc0; white-space:nowrap;
             overflow:hidden; text-overflow:ellipsis; }
.spec2 b{ font-weight:normal; font-size:14px; color:#e8d9ff; white-space:nowrap;
          overflow:hidden; text-overflow:ellipsis; }

/* 서버 정보 : 줄 간격을 조금 더 여유 있게 */
.spec2 li{ padding:9px 10px; gap:3px; }
.spec2 span{ font-size:12px; line-height:1.4; }
.spec2 b{ font-size:14px; line-height:1.4; }

/* 서버 정보 : 첫 줄(서버 이름)은 가로 전체, 나머지는 두 칸씩 */
.spec2 li:first-child{ grid-column:1 / -1; }
.spec2 li:first-child span{ color:#b18ede; }
.spec2 li:first-child b{ font-size:16px; color:#f0e6ff;
                         text-shadow:0 0 12px rgba(178,104,240,.5); }

/* ==========================================================================
   자잘한 세로 정렬 손질
     · 서버 정보 : 칸이 늘어나도 글이 위에 붙지 않게 가운데로
     · LIVE 딱지 : 자간(letter-spacing) 때문에 오른쪽 여백이 커 보이던 것 보정
     · 공성전 점령 길드 : 글줄 여백이 위쪽에 몰려 있던 것 보정
   ========================================================================== */
#grid .p-srv .p-body{ justify-content:center; }
.spec2{ flex:0 0 auto; }
.spec2 li{ justify-content:center; }

.gt-lb{ padding:0 10px 0 12px; }

.p-siege .lord{ padding:8px 9px 6px; }

/* 최근게시물 : 댓글 수 (대시보드에서 게시판마다 켜고 끈다) */
.list .cmt{ margin-left:5px; font-style:normal; font-size:11px; color:#ff9db4;
            vertical-align:1px; }
.list .cmt::before{ content:"["; }
.list .cmt::after { content:"]"; }