@charset "utf-8";
/* ==========================================================================
   X서버 · X SERVER  —  서브페이지 공통 SUB PAGES

   구조 STRUCTURE
     SHEAD    : 로고 + 서브 네비 + 로그인
     STITLE   : 페이지 제목 + 경로
     SBODY    : 페이지별 내용 (게시판 / 랭킹 / 갤러리 / 폼)
     FOOT     : 카피라이트

   · 메인(style.css)과 색·테두리 이미지를 그대로 공유
   · 서브페이지는 내용 길이가 달라서 세로 스크롤 허용
   ========================================================================== */

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

html{ height:100%; }

body{
  min-height:100%;
  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; }
table{ border-collapse:collapse; width:100%; }

/* 너비 100% · 화면 크기에 따라 자동 조절 (여백은 메인과 동일) */
/* overflow-x:clip → 화면 폭보다 넓은 상단 성운 밴드(#hero::before)를 잘라내
   가로 스크롤이 생기지 않게 한다 (clip 은 hidden 과 달리 스크롤 컨테이너를 안 만듦) */
/* 선택자 이름은 반드시 #app — head.php 가 여는 최상위 상자와 같은 이름이어야 한다.
   예전엔 #wrap 으로 적혀 있어서 max-width 가 통째로 안 먹었고,
   그래서 메인은 1720px, 서브만 화면 꽉 참 → 두 페이지 폭이 달라 보였다.
   여백·최대폭·gap 은 style.css 의 #app 과 한 글자도 다르면 안 된다. */
#app{ min-height:100vh; width:100%; max-width:1720px; margin:0 auto;
      display:flex; flex-direction:column; overflow-x:clip;
      padding:8px 16px 10px; gap:10px; }


/* ==========================================================================
   1. 상단 · SUB HEADER (구버전 · 미사용)
   ========================================================================== */
#shead{
  flex:0 0 auto;
  display:flex; align-items:center; gap:18px;
  padding:8px 16px;
  border:9px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background:rgba(7,2,17,.62);
  background-clip:padding-box;
}
.s-logo{ flex:none; display:flex; align-items:center; gap:2px; }
.s-logo .logo{ height:56px; width:auto; }
.s-logo .logo-sub{ height:25px; width:auto; margin-left:-6px; }

.s-nav{ flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center;
        gap:clamp(0px,0.8vw,15px); flex-wrap:wrap; }
.s-nav a{ display:block; line-height:0; position:relative; }
.s-nav img{ height:42px; width:auto; filter:brightness(.82) saturate(.7);
            transition:filter .18s ease; }
.s-nav a:hover img{ filter:brightness(1.68) saturate(.3); }   /* 움직임 없이 하얗게만 */
.s-nav a.on img{ filter:brightness(1.25); }

.s-me{ flex:none; display:flex; align-items:center; gap:8px; font-size:12px; color:#a99cc0; }
.s-me b{ color:#f0e0ff; font-weight:normal; text-shadow:0 0 9px rgba(178,104,240,.8); }
.s-me a{ color:#a99cc0; }
.s-me a:hover{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.38); }
.s-me i{ display:inline-block; width:1px; height:10px; background:rgba(150,84,210,.5); }


/* ==========================================================================
   2. 페이지 제목 · PAGE TITLE
   ========================================================================== */
#stitle{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:0 14px;                       /* 위아래 여백 제거 · 높이로만 조절 */
  height:52px;
  border:9px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background:rgba(7,2,17,.55);
  background-clip:padding-box;
}
#stitle .cap{ height:32px; width:auto; flex:none; }
#stitle .ttl{ height:42px; width:auto; }
.crumb{ margin-left:auto; font-size:12px; color:#9c8fb4; white-space:nowrap; }
.crumb a{ color:#a99cc0; }
.crumb a:hover{ color:#fff; }
.crumb span{ color:#c9a6f0; }


/* ==========================================================================
   3. 본문 패널 · CONTENT PANEL
   ========================================================================== */
/* 좌 사이드 + 본문 + 우 사이드 3단 · 메인과 동일한 밀도 */
/* 사이드는 글자가 "데스… / 블러…" 로 잘리지 않을 만큼만 넓게.
   ※ 이 규칙은 반드시 아래 반응형 미디어쿼리보다 "앞"에 있어야 한다.
     뒤에 두면 좁은 화면에서도 3단이 강제되어 본문 폭이 0 이 된다. */
#scols{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:clamp(258px,20vw,320px) minmax(0,1fr) clamp(268px,20.5vw,340px);
  gap:clamp(9px,.9vw,14px); align-items:start;
}
#sleft { min-width:0; display:flex; flex-direction:column; gap:12px; }
#sbody { min-width:0; display:flex; flex-direction:column; gap:12px; }
#saside{ min-width:0; display:flex; flex-direction:column; gap:12px; }

/* 하단 스트립 · BOTTOM STRIP */
#sstrip{
  flex:0 0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);
  gap:12px;
}

.panel{
  position:relative;
  display:flex; flex-direction:column; 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 8px; padding-right:8px;
  background:url(../img/ui/head_tile.png) repeat-x center;
  background-size:auto 36px;
}
.p-head .cap{ height:36px; width:auto; flex:none; }
.p-head .ttl{ height:42px; width:auto; margin-left:2px; }
.p-body{ padding:0 8px 10px; }

.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); }


/* ==========================================================================
   4. 게시판 목록 · BOARD LIST
   ========================================================================== */
.bd-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bd-count{ font-size:12px; color:#a99cc0; }
.bd-count b{ color:#f0e0ff; font-weight:normal; }
.bd-search{ margin-left:auto; display:flex; gap:6px; }
.bd-search select, .bd-search input{
  height:32px; padding:0 9px;
  background:rgba(0,0,0,.5); border:1px solid rgba(150,84,210,.5);
  color:#efe6fb; font-size:12px;
}
.bd-search input{ width:180px; }
.bd-search input::placeholder{ color:#8b7da4; }
.bd-search select:focus, .bd-search input:focus{
  outline:none; border-color:#c77dff; box-shadow:0 0 9px rgba(168,92,232,.7); }

.bd-list thead th{
  padding:9px 8px; font-size:12px; font-weight:normal; letter-spacing:.06em;
  color:#b18ede; text-align:center;
  background:rgba(78,30,136,.28);
  border-bottom:1px solid rgba(178,104,240,.35);
}
.bd-list tbody td{
  padding:9px 8px; font-size:14px; text-align:center; color:#c6b8dc;
  border-bottom:1px solid rgba(140,74,206,.15);
}
.bd-list tbody tr{ transition:background-color .15s ease; }
.bd-list tbody tr:hover{ background-color:rgba(142,72,214,.2); }
.bd-list .no{ width:70px; color:#9c8fb4; }
.bd-list .subj{ text-align:left; }
.bd-list .subj a{ color:#e4daf3; }
.bd-list tbody tr:hover .subj a{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.35); }
.bd-list .writer{ width:130px; }
.bd-list .date{ width:100px; color:#9c8fb4; font-size:12px; }
.bd-list .hit{ width:80px; color:#9c8fb4; font-size:12px; }
.bd-list tr.notice td{ background:rgba(96,40,160,.16); }
.bd-list tr.notice .no{ color:#ffd08a; }

.cmt{ display:inline-block; margin-left:6px; font-size:12px; color:#c9a6f0; }
.new{ display:inline-block; margin-left:5px; padding:0 4px;
      font:bold 12px/15px Tahoma,sans-serif; color:#fff;
      background:rgba(168,52,236,.7); }
.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); }

.bd-btm{ position:relative; display:flex; align-items:center; margin-top:14px; min-height:36px; }
.bd-btm .wr-btn{ position:absolute; right:0; top:0; }
.paging{ margin:0 auto; display:flex; align-items:center; gap:4px; }
.paging a, .paging strong{
  min-width:30px; height:30px; padding:0 8px;
  display:flex; align-items:center; justify-content:center;
  font:bold 12px/1 Tahoma,sans-serif;
  border:1px solid rgba(140,74,206,.35); color:#b8a8d0;
  transition:.15s;
}
.paging a:hover{ border-color:#c77dff; color:#fff; box-shadow:0 0 10px rgba(168,92,232,.6); }
.paging strong{ border-color:#c77dff; color:#fff;
                background:rgba(150,66,220,.45); box-shadow:0 0 12px rgba(168,92,232,.7); }


/* ==========================================================================
   5. 게시글 보기 · VIEW
   ========================================================================== */
.vw-head{ padding:12px 4px 12px; border-bottom:1px solid rgba(178,104,240,.3); }
.vw-head h2{ font:bold 20px/1.4 "Malgun Gothic",sans-serif; color:#f4e9ff;
             text-shadow:0 0 14px rgba(178,104,240,.7); }
.vw-meta{ margin-top:8px; display:flex; flex-wrap:wrap; gap:14px;
          font-size:12px; color:#9c8fb4; }
.vw-meta b{ color:#c9a6f0; font-weight:normal; }

.vw-body{ padding:20px 4px 26px; min-height:220px; line-height:1.9; color:#d6cae8; }
.vw-body p{ margin-bottom:14px; }
.vw-body strong{ color:#f0e0ff; }
.vw-body ul{ margin:0 0 14px 4px; }
.vw-body ul li{ padding:3px 0 3px 17px;
                background:url(../img/ui/bullet.png) no-repeat 2px 11px; background-size:11px auto; }
.vw-body img{ margin:10px 0; }

.vw-nav{ border-top:1px solid rgba(140,74,206,.22); }
.vw-nav li{ display:flex; align-items:center; gap:12px; padding:9px 4px;
            border-bottom:1px solid rgba(140,74,206,.15); font-size:12px; }
.vw-nav li:last-child{ border-bottom:0; }
.vw-nav em{ flex:none; width:60px; font-style:normal; color:#9c8fb4; }
.vw-nav a{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
           white-space:nowrap; color:#c6b8dc; }
.vw-nav a:hover{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.35); }

.vw-btm{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.vw-btm .right{ margin-left:auto; display:flex; gap:8px; }


/* ==========================================================================
   6. 댓글 · COMMENT
   ========================================================================== */
.cm-list li{ display:flex; gap:12px; padding:11px 4px;
             border-bottom:1px solid rgba(140,74,206,.15); }
.cm-list li:last-child{ border-bottom:0; }
.cm-who{ flex:none; width:120px; }
.cm-who b{ display:block; font-weight:normal; color:#e6c5ff; font-size:12px; }
.cm-who span{ display:block; font-size:12px; color:#8d7fa0; }
.cm-txt{ flex:1 1 auto; min-width:0; font-size:14px; color:#cfc2e0; line-height:1.75; }

.cm-write{ display:flex; gap:8px; margin-top:12px; }
.cm-write textarea{
  flex:1 1 auto; height:74px; padding:9px 10px; resize:vertical;
  background:rgba(0,0,0,.5); border:1px solid rgba(150,84,210,.5);
  color:#efe6fb; font:14px/1.7 inherit;
}
.cm-write textarea:focus{ outline:none; border-color:#c77dff; box-shadow:0 0 9px rgba(168,92,232,.7); }


/* ==========================================================================
   7. 글쓰기 폼 · WRITE FORM
   ========================================================================== */
.form-row{ display:flex; align-items:flex-start; gap:12px;
           padding:11px 4px; border-bottom:1px solid rgba(140,74,206,.15); }
.form-row > label{ flex:none; width:130px; padding-top:8px;
                   font-size:12px; color:#b18ede; }
.form-row > label u{ text-decoration:none; color:#ff9fb4; }
.form-in{ flex:1 1 auto; min-width:0; }
.form-in input[type=text], .form-in input[type=password], .form-in select{
  width:100%; max-width:520px; height:34px; padding:0 10px;
  background:rgba(0,0,0,.5); border:1px solid rgba(150,84,210,.5);
  color:#efe6fb; font-size:14px;
}
.form-in textarea{
  width:100%; height:300px; padding:10px;
  background:rgba(0,0,0,.5); border:1px solid rgba(150,84,210,.5);
  color:#efe6fb; font:14px/1.8 inherit; resize:vertical;
}
.form-in input:focus, .form-in select:focus, .form-in textarea:focus{
  outline:none; border-color:#c77dff; box-shadow:0 0 9px rgba(168,92,232,.7); }
.form-in .hint{ margin-top:6px; font-size:12px; color:#8d7fa0; }
.form-chk{ display:flex; align-items:center; gap:6px; font-size:12px; color:#c6b8dc; }
.form-btm{ display:flex; justify-content:center; gap:10px; margin-top:16px; }


/* ==========================================================================
   8. 버튼 · BUTTON
   ========================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center;
      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 span{ font:bold 12px/1 "Malgun Gothic",sans-serif; letter-spacing:.04em;
           color:#f0e0ff; text-shadow:0 0 9px rgba(178,104,240,.95); white-space:nowrap; }
.btn:hover span{ color:#fff; text-shadow:0 0 11px rgba(255,255,255,.6); }
.btn-s{ height:36px; padding:0 6px; min-width:86px; }
.btn-m{ height:42px; padding:0 10px; min-width:130px; }
.btn-l{ height:52px; padding:0 14px; min-width:190px; }
.btn-l span{ font-size:14px; letter-spacing:.06em; }
.btn-ghost{ border-image:none; border:1px solid rgba(150,84,210,.5);
            background:rgba(0,0,0,.35); }
.btn-ghost:hover{ border-image:none; border-color:#c77dff;
                  box-shadow:0 0 10px rgba(168,92,232,.6); }


/* ==========================================================================
   9. 랭킹 · RANKING
   ========================================================================== */
/* ==========================================================================
   랭킹 서비스 · RANKING SERVICE
   유형 선택(캐릭터/길드/PK) -> 시상대 -> 전체 순위
   유형별로 색을 달리해 구분 : 캐릭터 보라 / 길드 금색 / PK 레드
   ========================================================================== */
/* ---------- 유형 선택 : 가로 세그먼트 탭 (컴팩트) ---------- */
.rk-select{ display:flex; gap:0; margin-bottom:14px;
            border:1px solid rgba(150,84,210,.35); background:rgba(6,1,14,.5); }
.rk-sel{
  flex:1 1 0; position:relative; cursor:pointer;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:2px 10px;
  padding:11px 14px; min-width:0;
  border-left:1px solid rgba(150,84,210,.22);
  transition:background-color .18s ease;
}
.rk-sel:first-child{ border-left:0; }
.rk-sel .ic{ flex:none; height:42px; width:auto; filter:brightness(.62) saturate(.5);
             transition:filter .18s ease; }
/* 두 줄로만 쓴다 — 윗줄 : 이름 + 보기 / 아랫줄 : 설명.
   (한 줄에 다 넣으면 "레벨 · 스탯 · 상위 100" 이 잘려서 … 이 붙고,
    order 를 안 주면 보기가 셋째 줄로 밀려 위아래가 벌어진다) */
.rk-sel .rk-nm{ order:0; flex:0 1 auto; min-width:0; }
.rk-sel .go{   order:1; flex:none; margin-left:auto; white-space:nowrap; }
.rk-sel .cnt{  order:2; flex:1 0 100%; min-width:0; font-size:12px; color:#8d7fa0;
               white-space:nowrap; overflow:visible; text-overflow:clip; }
.rk-sel::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
                background:transparent; transition:background .18s ease; }
.rk-sel:hover{ background:rgba(142,72,214,.14); }
.rk-sel:hover .ic{ filter:brightness(1.1) saturate(.8); }

.rk-sel.on{ background:rgba(142,72,214,.22); }
.rk-sel.on .ic{ filter:brightness(1.15); }
.rk-sel.on .cnt{ color:#c9b8e2; }
.rk-sel.on::after{ background:#c77dff; box-shadow:0 0 12px rgba(199,125,255,.95); }

.rk-sel.c-guild.on{ background:rgba(198,140,34,.20); }
.rk-sel.c-guild.on::after{ background:#ffd08a; box-shadow:0 0 12px rgba(255,208,138,.95); }
.rk-sel.c-guild.on .cnt{ color:#e3c791; }
.rk-sel.c-pk.on{ background:rgba(206,44,86,.20); }
.rk-sel.c-pk.on::after{ background:#ff8aa6; box-shadow:0 0 12px rgba(255,138,166,.95); }
.rk-sel.c-pk.on .cnt{ color:#eaa9b9; }

/* ---------- TOP 3 : 가로 한 줄 슬림 카드 ---------- */
.podium{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
         gap:10px; margin-bottom:14px; }
.podium[hidden]{ display:none; }
.pod{ position:relative; display:flex; align-items:center; gap:11px;
      padding:10px 13px; min-width:0;
      background:linear-gradient(90deg, rgba(96,38,164,.22) 0%, rgba(8,2,20,.55) 100%);
      border-left:2px solid rgba(178,104,240,.55); }
.pod img{ flex:none; width:34px; height:34px; }
.pod .txt{ min-width:0; flex:1 1 auto; }
.pod b{ display:block; font:bold 16px/1.2 "Malgun Gothic",sans-serif; color:#f0e4ff;
        text-shadow:0 0 11px rgba(178,104,240,.7);
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod em{ display:block; margin-top:3px; font-style:normal; font-size:12px; color:#a99cc0;
         overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod .no{ flex:none; font:bold 22px/1 Tahoma,sans-serif; color:rgba(178,104,240,.30); }

/* 1위 강조 */
.pod-1{ background:linear-gradient(90deg, rgba(200,146,30,.30) 0%, rgba(20,12,2,.58) 100%);
        border-left-color:#ffd08a; box-shadow:0 0 20px rgba(255,190,90,.18) inset; }
.pod-1 b{ font-size:18px; color:#fff6e2; text-shadow:0 0 14px rgba(255,196,90,.9); }
.pod-1 .no{ color:rgba(255,208,138,.45); }
.pod-2{ border-left-color:#d5dcf0; }
.pod-2 .no{ color:rgba(213,220,240,.35); }
.pod-3{ border-left-color:#e8a072; }
.pod-3 .no{ color:rgba(232,160,114,.35); }

/* ---------- 도구 줄 · TOOLS ---------- */
.rk-tools{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.rk-tools .lb{ font-size:12px; color:#a99cc0; }
.rk-tools .lb b{ color:#f0e0ff; font-weight:normal; }
.rk-tools form{ margin-left:auto; display:flex; gap:6px; }
.rk-tools select, .rk-tools input{
  height:32px; padding:0 9px; background:rgba(0,0,0,.5);
  border:1px solid rgba(150,84,210,.5); color:#efe6fb; font-size:12px; }
.rk-tools input{ width:170px; }
.rk-tools input::placeholder{ color:#8b7da4; }
.rk-tools select:focus, .rk-tools input:focus{
  outline:none; border-color:#c77dff; box-shadow:0 0 9px rgba(168,92,232,.7); }

/* 내 순위 강조 */
.rk-list tr.me td{ background:rgba(150,66,220,.24); }
.rk-list tr.me .nm{ color:#fff; text-shadow:0 0 10px rgba(255,255,255,.38); }
.rk-me{ margin-top:10px; padding:9px 12px; font-size:12px; color:#c9b8e2;
        background:rgba(96,38,164,.18); border-left:2px solid rgba(178,104,240,.55); }
.rk-me b{ color:#f0e0ff; font-weight:normal; }

.rk-tabs{ display:flex; gap:8px; margin-bottom:12px; }
.rk-tabs button{ padding:0 6px; line-height:0; position:relative; }
.rk-tabs img{ height:42px; width:auto; filter:brightness(.5) saturate(.3);
              transition:filter .18s ease; }
.rk-tabs button:hover img{ filter:brightness(1.55) saturate(.4); }
.rk-tabs button.on img{ filter:brightness(1.15); }

.rk-list td{ padding:8px; font-size:14px; text-align:center; color:#c6b8dc;
             border-bottom:1px solid rgba(140,74,206,.15); }
.rk-list tbody tr{ transition:background-color .15s ease; }
.rk-list tbody tr:hover{ background-color:rgba(142,72,214,.2); }
.rk-list .rk{ width:80px; }
.rk-list .rk img{ width:30px; height:30px; margin:0 auto; }
/* 표 머리글 : 본문(보라)과 확실히 구분되게 청록 계열 + 바탕 띠 */
.rk-list thead th{
  padding:11px 8px; text-align:center;
  font:bold 14px/1.4 "Malgun Gothic",sans-serif; letter-spacing:.02em;
  color:#8fe6ff; text-shadow:0 0 10px rgba(90,200,255,.5);
  background:linear-gradient(180deg, rgba(22,68,102,.55) 0%, rgba(10,26,48,.30) 100%);
  border-bottom:1px solid rgba(120,214,255,.42);
}
/* 이름 칸은 머리글도 같이 왼쪽 정렬 → 닉네임이 분류(캐릭터 NAME) 바로 아래에 옴 */
.rk-list thead th:nth-child(2){ text-align:left; padding-left:34px; }
.rk-list .nm{ text-align:left; padding-left:34px; color:#e4daf3; }
.rk-list tbody tr:hover .nm{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.35); }
.rk-list tr.top .nm{ color:#f6e9ff; text-shadow:0 0 10px rgba(178,104,240,.75); }


/* ==========================================================================
   10. 갤러리 · GALLERY
   ========================================================================== */
.gl-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.gl-grid a{ display:block; }
.gl-thumb{ position:relative; overflow:hidden; line-height:0;
           border:1px solid rgba(150,84,210,.35); }
.gl-thumb img{ width:100%; height:auto; transition:transform .3s ease, filter .3s ease; }
.gl-grid a:hover .gl-thumb img{ transform:scale(1.1); filter:brightness(1.6) saturate(.6); }
.gl-cap{ padding:7px 2px 0; font-size:12px; color:#c6b8dc;
         overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gl-grid a:hover .gl-cap{ color:#fff; }
.gl-date{ font-size:12px; color:#8d7fa0; }


/* ==========================================================================
   11. 다운로드 · DOWNLOAD
   ========================================================================== */
.dl-hero{ position:relative; overflow:hidden; display:flex; align-items:center;
          gap:20px; padding:22px 24px; }
.dl-hero img.item{ position:absolute; right:-24px; top:50%; transform:translateY(-50%);
                   height:150%; width:auto; max-width:none; opacity:.9; pointer-events:none;
                   filter:drop-shadow(0 0 24px rgba(190,110,255,.7)); }
.dl-txt{ position:relative; z-index:1; max-width:calc(100% - 130px); }
.dl-txt h2{ font:bold 24px/1.3 "Malgun Gothic",sans-serif; color:#fff;
            text-shadow:0 0 20px rgba(178,88,255,1); }
.dl-txt h2 span{ display:block; margin-top:5px; font:bold 12px/1 Tahoma,sans-serif;
                 letter-spacing:.3em; color:#cba6f5; }
.dl-txt p{ margin-top:10px; font-size:12px; line-height:1.8; color:#cdbee4; }
.dl-btns{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }

.dl-info{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.dl-info li{ padding:12px 14px; background:rgba(78,30,136,.20); }
.dl-info em{ display:block; font-style:normal; font-size:12px; letter-spacing:.08em;
             color:#a99cc0; }
.dl-info b{ display:block; margin-top:5px; font:bold 16px/1.2 Tahoma,sans-serif;
            color:#f0e0ff; text-shadow:0 0 11px rgba(178,104,240,.8); }

.spec-tbl th, .spec-tbl td{ padding:10px 12px; font-size:14px;
                            border-bottom:1px solid rgba(140,74,206,.15); }
.spec-tbl th{ width:150px; text-align:left; font-weight:normal; color:#b18ede;
              background:rgba(78,30,136,.18); }
.spec-tbl td{ color:#d6cae8; }


/* ==========================================================================
   12. 고객센터 · SUPPORT
   ========================================================================== */
.sp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.sp-card{ display:flex; flex-direction:column; gap:6px; padding:18px 16px 20px;
          background:rgba(78,30,136,.18); transition:background-color .18s ease; }
.sp-card:hover{ background:rgba(142,72,214,.28); }
.sp-card b{ font:bold 15px/1.3 "Malgun Gothic",sans-serif; color:#f0e0ff;
            text-shadow:0 0 10px rgba(178,104,240,.8); }
.sp-card em{ font-style:normal; font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.2em;
             color:#a082cc; }
.sp-card p{ margin-top:4px; font-size:12px; line-height:1.7; color:#a99cc0; }

.faq li{ border-bottom:1px solid rgba(140,74,206,.15); }
.faq li:last-child{ border-bottom:0; }
.faq .q{ display:flex; align-items:center; gap:10px; width:100%; padding:12px 4px;
         text-align:left; transition:background-color .15s ease; }
.faq .q:hover{ background-color:rgba(142,72,214,.18); }
.faq .q i{ flex:none; font-style:normal; font:bold 14px/1 Tahoma,sans-serif; color:#c9a6f0; }
.faq .q span{ flex:1 1 auto; min-width:0; font-size:14px; color:#e4daf3; }
.faq .q u{ flex:none; text-decoration:none; font-size:12px; color:#9c8fb4; }
.faq .a{ padding:4px 4px 16px 30px; font-size:12px; line-height:1.85; color:#b8a8d0; }
.faq .a[hidden]{ display:none; }


/* ==========================================================================
   13. 회원가입 · JOIN
   ========================================================================== */
.jn-terms{ height:150px; overflow-y:auto; padding:12px 14px; margin-bottom:8px;
           background:rgba(0,0,0,.4); border:1px solid rgba(140,74,206,.3);
           font-size:12px; line-height:1.85; color:#b8a8d0;
           scrollbar-width:thin; scrollbar-color:rgba(178,104,240,.6) rgba(60,20,100,.15); }
.jn-terms::-webkit-scrollbar{ width:7px; }
.jn-terms::-webkit-scrollbar-track{ background:rgba(60,20,100,.14); }
.jn-terms::-webkit-scrollbar-thumb{ background:rgba(178,104,240,.55); }


/* ==========================================================================
   13-2. 사이드바 위젯 · SIDEBAR WIDGETS
   ========================================================================== */

/* --- 로그인 --- */
.side-login input{
  width:100%; height:34px; margin-bottom:7px; padding:0 10px;
  background:rgba(0,0,0,.5); border:1px solid rgba(150,84,210,.5);
  color:#efe6fb; font-size:12px;
}
.side-login input::placeholder{ color:#8b7da4; }
.side-login input:focus{ outline:none; border-color:#c77dff; box-shadow:0 0 9px rgba(168,92,232,.7); }
.side-login .btn{ width:100%; height:38px; }
.sub-links{ margin-top:9px; 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); }

/* --- 공성전 --- */
.lord{ display:flex; align-items:center; gap:10px; padding:8px 10px;
       background:rgba(112,52,180,.20); }
.lord img{ flex:none; width:42px; height:42px; }
.lord .lbl{ display:block; font-size:12px; color:#a99cc0; line-height:1.25;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lord strong{ display:block; margin:1px 0; font:bold 18px/1.15 "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:8px 4px; margin-top:8px; background:rgba(78,30,136,.22); }
.cdown .lbl{ display:block; font-size:12px; color:#a99cc0; line-height:1.3; }
.cdown .clock{ margin:6px 0 5px; white-space:nowrap; line-height:1; }
.cdown .clock b{ display:inline-block; min-width:32px; padding:3px 2px;
                 font:bold 19px/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 4px 0 2px; font-size:12px;
                 text-decoration:none; color:#9c8fb4; }
.cdown .sub{ display:block; font-size:12px; line-height:1.35; color:#c9b6e6; }

/* --- 보스 타이머 --- */
.boss li{ display:flex; align-items:center; gap:8px; padding:6px 6px;
          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; }

/* ==========================================================================
   내 캐릭터 헤더 바 · MY CHARACTER BAR  (본문 맨 위 가로형)
   ========================================================================== */
.mychar-bar .mc-row{
  display:flex; align-items:center; gap:clamp(10px,1.4vw,22px);
  flex-wrap:wrap; padding:4px 4px 8px;
}
.mychar-bar .mc-img{
  flex:none; width:58px; height:72px; object-fit:cover; object-position:top center;
  border:1px solid rgba(178,104,240,.45);
}
.mychar-bar .mc-who{ flex:none; min-width:0; }
.mychar-bar .mc-who b{
  display:block; font:bold 18px/1.2 "Malgun Gothic",sans-serif; color:#f6e9ff;
  text-shadow:0 0 12px rgba(178,104,240,.85);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mychar-bar .mc-who span{ display:block; margin-top:2px; font-size:12px; color:#a99cc0; }
.mychar-bar .mc-who em{
  display:inline-block; margin-top:5px; padding:1px 7px; font-style:normal;
  font:bold 12px/1.6 Tahoma,sans-serif; letter-spacing:.1em;
  color:#a8ffd0; border:1px solid rgba(120,240,180,.45);
}
.mychar-bar .mc-who em.off{ color:#c0b3d4; border-color:rgba(150,120,190,.4); }

.mychar-bar .mc-stat{ flex:none; display:flex; margin:0; }
.mychar-bar .mc-stat li{
  /* column-reverse : 항목명(레벨 LEVEL)이 위, 숫자가 아래로 오게 */
  display:flex; flex-direction:column-reverse; align-items:center; justify-content:center;
  gap:3px; padding:2px clamp(10px,1.2vw,20px);
  border-bottom:0; border-left:1px solid rgba(140,74,206,.2);
}
.mychar-bar .mc-stat li:first-child{ border-left:0; }
.mychar-bar .mc-stat span{ font-size:12px; color:#a99cc0; white-space:nowrap; }
.mychar-bar .mc-stat b{
  font:bold 17px/1.1 Tahoma,sans-serif; color:#f0e0ff;
  text-shadow:0 0 12px rgba(178,104,240,.85);
}

.mychar-bar .mc-exp{ flex:1 1 190px; min-width:170px; margin:0; padding:8px 12px 9px; }
.mychar-bar .mc-btn{ flex:none; margin:0; }
.mychar-bar .mc-btn a{ min-width:96px; }

@media (max-width:900px){
  .mychar-bar .mc-stat{ flex:1 0 100%; justify-content:space-between; }
  .mychar-bar .mc-stat li{ flex:1 1 0; padding:2px 6px; }
  .mychar-bar .mc-exp{ flex:1 0 100%; }
  .mychar-bar .mc-btn{ flex:1 0 100%; }
  .mychar-bar .mc-btn a{ flex:1 1 0; }
}


/* --- 내 캐릭터 정보 · MY CHARACTER (사이드바용 · 미사용) --- */
.mychar{ display:flex; align-items:center; gap:11px; padding:9px 10px;
         background:rgba(112,52,180,.20); }
.mc-img{ flex:none; width:52px; height:64px; object-fit:cover; object-position:top center;
         border:1px solid rgba(178,104,240,.45); }
.mc-info{ min-width:0; }
.mc-info b{ display:block; font:bold 17px/1.2 "Malgun Gothic",sans-serif; color:#f6e9ff;
            text-shadow:0 0 12px rgba(178,104,240,.85);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-info span{ display:block; margin-top:3px; font-size:12px; color:#a99cc0;
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-info em{ display:inline-block; margin-top:5px; padding:1px 6px; font-style:normal;
             font:bold 12px/1.5 Tahoma,sans-serif; letter-spacing:.1em;
             color:#a8ffd0; border:1px solid rgba(120,240,180,.45); }
.mc-info em.off{ color:#c0b3d4; border-color:rgba(150,120,190,.4); }

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

.mc-exp{ margin-top:8px; padding:7px 8px 8px; background:rgba(78,30,136,.20); }
.mc-exp .lb{ display:flex; justify-content:space-between; font-size:12px; color:#a99cc0; }
.mc-exp .lb b{ color:#dcb6ff; font-weight:normal; }
.mc-exp .bar{ position:relative; height:8px; margin-top:5px;
              background:rgba(0,0,0,.5); overflow:hidden; }
.mc-exp .bar i{ display:block; height:100%;
                background:linear-gradient(90deg, rgba(120,40,200,.9), rgba(214,160,255,1));
                box-shadow:0 0 12px rgba(190,124,255,.9); }

.mc-btn{ display:flex; gap:6px; margin-top:9px; }
.mc-btn a{ flex:1 1 0; height:32px; display:flex; align-items:center; justify-content:center;
           font:bold 12px/1 "Malgun Gothic",sans-serif; color:#e6c5ff;
           border:1px solid rgba(150,84,210,.5); background:rgba(0,0,0,.3);
           transition:.15s; }
.mc-btn a:hover{ border-color:#c77dff; color:#fff; box-shadow:0 0 10px rgba(168,92,232,.6); }

/* --- 외침 · SHOUT --- */
.shout li{ padding:6px 6px; border-bottom:1px solid rgba(140,74,206,.15);
           transition:background-color .15s ease; }
.shout li:last-child{ border-bottom:0; }
.shout li:hover{ background-color:rgba(142,72,214,.18); }
.shout .who{ display:flex; align-items:center; gap:6px; }
.shout .who b{ font-weight:normal; font-size:12px; color:#ffe0a8;
               text-shadow:0 0 8px rgba(255,190,90,.5); }
.shout .who em{ margin-left:auto; font-style:normal; font-size:12px; color:#8d7fa0; }
.shout .msg{ display:block; margin-top:2px; font-size:12px; line-height:1.5; color:#d6cae8;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.shout-write{ display:flex; gap:6px; margin-top:9px; }
.shout-write input{ flex:1 1 auto; min-width:0; height:32px; padding:0 9px;
                    background:rgba(0,0,0,.5); border:1px solid rgba(150,84,210,.5);
                    color:#efe6fb; font-size:12px; }
.shout-write input::placeholder{ color:#8b7da4; }
.shout-write input:focus{ outline:none; border-color:#c77dff;
                          box-shadow:0 0 9px rgba(168,92,232,.7); }
.shout-write button{ flex:none; width:56px; height:32px;
                     font:bold 12px/1 "Malgun Gothic",sans-serif; color:#e6c5ff;
                     border:1px solid rgba(150,84,210,.5); background:rgba(0,0,0,.3);
                     transition:.15s; }
.shout-write button:hover{ border-color:#c77dff; color:#fff;
                           box-shadow:0 0 10px rgba(168,92,232,.6); }

/* --- PK 현황 · PK RECORD (승자 vs 패자 / 승률) --- */
.blk-lbl{ display:block; margin-bottom:5px; font-size:12px; color:#a99cc0; }
.blk-lbl u{ float:right; text-decoration:none; font-size:12px; color:#8a7ca6; }
/* 승/패 뱃지와 승률이 닉네임 길이와 상관없이 항상 같은 위치에 오도록 고정폭 */
.pk li{ display:flex; align-items:center; gap:6px; padding:4px 2px;
        border-bottom:1px solid rgba(140,74,206,.15); 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; }
.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; 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); }

/* --- 보스 처치 현황 · BOSS KILLS --- */
.hist li{ display:flex; align-items:center; gap:9px; padding:5px 4px;
          border-bottom:1px solid rgba(140,74,206,.15); font-size:12px;
          transition:background-color .15s ease; }
.hist li:last-child{ border-bottom:0; }
.hist li:hover{ background-color:rgba(142,72,214,.18); }
.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); }

/* --- 주간 일정 · WEEKLY SCHEDULE --- */
.sched li{ display:flex; align-items:center; gap:9px; padding:6px 5px;
           border-bottom:1px solid rgba(140,74,206,.15); font-size:12px;
           transition:background-color .15s ease; }
.sched li:last-child{ border-bottom:0; }
.sched i{ flex:none; width:22px; height:22px; font-style:normal; text-align:center;
          font:bold 12px/22px "Malgun Gothic",sans-serif; color:#c9a6f0;
          border:1px solid rgba(168,92,232,.45); }
.sched b{ flex:1 1 auto; min-width:0; font-weight:normal; color:#d8ccea;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sched em{ flex:none; font-style:normal; font-size:12px; color:#9c8fb4; }
.sched li.today{ background-color:rgba(150,66,220,.26); }
.sched li.today i{ color:#1a0a02; background:#ffd08a; border-color:#ffd08a; }
.sched li.today b{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.5); }
.sched li.today em{ color:#ffe0a8; }

/* ==========================================================================
   운영자 쪽지쓰기 : 운영자 선택 · GM PICKER
   상담가능한 운영자만 선택 가능. 둘 다 가능하면 사용자가 고른다.
   ========================================================================== */
.gmpick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
.gmpick label{
  position:relative; display:flex; align-items:center; gap:11px;
  padding:12px 14px; cursor:pointer;
  background:linear-gradient(90deg, rgba(158,110,26,.20) 0%, rgba(48,26,6,.10) 100%);
  border:1px solid rgba(255,190,90,.35);
  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.gmpick label:hover{ border-color:rgba(255,208,138,.75);
                     box-shadow:0 0 14px rgba(255,190,90,.35); }
.gmpick input{ position:absolute; opacity:0; width:0; height:0; }
.gmpick input:checked + .gmp-in{ }
.gmpick label:has(input:checked){
  border-color:#ffd08a; background:linear-gradient(90deg, rgba(198,140,34,.34) 0%, rgba(64,36,8,.16) 100%);
  box-shadow:0 0 18px rgba(255,190,90,.45);
}
.gmpick label.off{ cursor:not-allowed;
  background:linear-gradient(90deg, rgba(96,74,116,.16) 0%, rgba(30,20,44,.08) 100%);
  border-color:rgba(150,120,190,.3); }
.gmpick label.off:hover{ border-color:rgba(150,120,190,.3); box-shadow:none; }
.gmpick label.off .gm-av{ filter:grayscale(.7) brightness(.75); }
.gmpick label.off .gm-who b{ color:#cbbfe2; text-shadow:none; }
.gmpick .gm-av{ flex:none; width:44px; height:44px; }
.gmpick .gm-who{ min-width:0; flex:1 1 auto; }
.gmpick .gm-who b{ display:block; font:bold 17px/1.2 "Malgun Gothic",sans-serif;
                   color:#ffe9bc; text-shadow:0 0 11px rgba(255,196,90,.75);
                   overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gmpick .gm-who span{ display:block; margin-top:3px; font-size:12px; color:#c2ab84; }
.gmpick .gm-st{ margin-left:0; }

.gm-guide{ margin:12px 0 4px; padding:10px 13px; font-size:12px; line-height:1.75;
           color:#c9b48f; background:rgba(120,84,20,.14);
           border-left:2px solid rgba(255,190,90,.4); }
.gm-guide b{ color:#ffe0a8; font-weight:normal; }


/* --- 퀵메뉴 · QUICK MENU (사이드바 · 한글만 · 컴팩트) --- */
.qmenu{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
.qmenu li{ display:flex; }
.qmenu a{ flex:1 1 auto; height:28px; 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:26px; width:auto; filter:brightness(.95); transition:filter .16s ease; }
.qmenu a:hover img{ filter:brightness(1.68) saturate(.3); }

/* --- 쿠폰 등록 · COUPON --- */
.coupon{ display:flex; gap:6px; }
.coupon input{ flex:1 1 auto; min-width:0; height:34px; padding:0 10px;
               background:rgba(0,0,0,.5); border:1px solid rgba(150,84,210,.5);
               color:#efe6fb; font-size:12px; letter-spacing:.06em; }
.coupon input::placeholder{ color:#8b7da4; letter-spacing:0; }
.coupon input:focus{ outline:none; border-color:#c77dff; box-shadow:0 0 9px rgba(168,92,232,.7); }
.coupon button{ flex:none; width:62px; height:34px;
                font:bold 12px/1 "Malgun Gothic",sans-serif; color:#e6c5ff;
                border:1px solid rgba(150,84,210,.5); background:rgba(0,0,0,.3);
                transition:.15s; }
.coupon button:hover{ border-color:#c77dff; color:#fff; box-shadow:0 0 10px rgba(168,92,232,.6); }
.coupon-hint{ margin-top:8px; font-size:12px; line-height:1.65; color:#8d7fa0; }
.coupon-hint b{ color:#c9a6f0; font-weight:normal; }

/* --- 길드 랭킹 · GUILD RANK --- */
.grank li{ display:flex; align-items:center; gap:9px; padding:5px 5px;
           border-bottom:1px solid rgba(140,74,206,.15);
           transition:background-color .15s ease; }
.grank li:last-child{ border-bottom:0; }
.grank li:hover{ background-color:rgba(142,72,214,.2); }
.grank 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); }
.grank li:nth-child(1) i{ color:#1a0a02; background:#ffd08a; border-color:#ffd08a; }
.grank li:nth-child(2) i{ color:#12141c; background:#d5dcf0; border-color:#d5dcf0; }
.grank li:nth-child(3) i{ color:#2a1206; background:#e8a072; border-color:#e8a072; }
.grank b{ flex:1 1 auto; min-width:0; font-weight:normal; color:#e4daf3; font-size:12px;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.grank em{ flex:none; font-style:normal; font-size:12px; color:#9c8fb4; }
.grank li:hover b{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.35); }

/* --- 캐릭터 랭킹 · CHARACTER RANK (우측 사이드) ---
   메인(style.css)의 .rank 와 같은 모양. 서브에는 style.css 가 실리지 않아 여기에 둔다. */
.rank li{ display:flex; align-items:center; gap:9px; 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); }
.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; font-size:13px;
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank li em{ flex:none; 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); }

/* --- 서버가이드 목록 · SERVER GUIDE --- */
.glist li{ display:flex; align-items:center; gap:8px; padding:6px 4px 6px 17px;
           background:url(../img/ui/bullet.png) no-repeat 2px center;
           background-size:11px auto;
           border-bottom:1px solid rgba(140,74,206,.15);
           transition:background-color .15s ease; }
.glist li:last-child{ border-bottom:0; }
.glist li:hover{ background-color:rgba(142,72,214,.18); }
.glist a{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
          white-space:nowrap; color:#e4daf3; font-size:12px; }
.glist li:hover a{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.35); }
.glist em{ flex:none; font-style:normal; font-size:12px; color:#9c8fb4; }

/* --- 인기글 --- */
.hot li{ display:flex; align-items:center; gap:8px; padding:6px 4px;
         border-bottom:1px solid rgba(140,74,206,.15);
         transition:background-color .15s ease; }
.hot li:last-child{ border-bottom:0; }
.hot li:hover{ background-color:rgba(142,72,214,.2); }
.hot i{ flex:none; width:18px; height:18px; font-style:normal; text-align:center;
        font:bold 12px/18px Tahoma,sans-serif; color:#e6c5ff;
        border:1px solid rgba(168,92,232,.55); }
.hot li:nth-child(-n+3) i{ color:#ffe0a8; border-color:rgba(255,190,90,.6); }
.hot a{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
        white-space:nowrap; color:#e4daf3; font-size:12px; }
.hot li:hover a{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.35); }
.hot em{ flex:none; font-style:normal; font-size:12px; color:#9c8fb4; }

/* --- 하단 스트립 : 이용안내 / 서버정보 / 갤러리 --- */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.steps li{ display:flex; flex-direction:column; align-items:center; justify-content:center;
           text-align:center; padding:9px 4px 11px; background:rgba(78,30,136,.20);
           word-break:keep-all; }
.steps img{ height:36px; 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{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.spec li{ display:flex; flex-direction:column; align-items:center; justify-content:center;
          text-align:center; padding:12px 2px; background:rgba(78,30,136,.20); }
.spec b{ display:block; font:bold 21px/1.1 Tahoma,sans-serif; color:#f4e6ff;
         text-shadow:0 0 14px rgba(196,132,255,.95); }
.spec b u{ font-size:12px; text-decoration:none; color:#c49af0; }
.spec span{ display:block; margin-top:5px; font-size:12px; color:#a99cc0; }

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


/* ==========================================================================
   13-4. 로그인 전용 페이지 · LOGIN PAGE
   ========================================================================== */
.lg-card{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:300px minmax(0,1fr);
  align-items:stretch; gap:0;
  border:11px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background:linear-gradient(135deg, rgba(150,58,236,.22) 0%, rgba(38,10,76,.55) 45%, rgba(8,2,20,.88) 100%);
  background-clip:padding-box;
}
.lg-visual{
  position:relative; overflow:hidden; min-height:380px;
  display:flex; align-items:flex-end; justify-content:center;
  border-right:1px solid rgba(150,84,210,.28);
}
.lg-visual img{
  height:112%; width:auto; max-width:none;
  opacity:.85;
  filter:drop-shadow(0 0 30px rgba(190,110,255,.65));
}
.lg-visual .cap-txt{
  position:absolute; left:0; right:0; bottom:14px; text-align:center;
  font:bold 12px/1.4 "Malgun Gothic",sans-serif; color:#f0e2ff;
  text-shadow:0 0 14px rgba(178,88,255,1), 0 2px 10px rgba(0,0,0,.95);
}
.lg-visual .cap-txt span{
  display:block; margin-top:4px; font:bold 12px/1 Tahoma,sans-serif;
  letter-spacing:.28em; color:#b892e2;
}

.lg-form{ padding:34px 40px 34px;
          display:flex; flex-direction:column; justify-content:center;
          align-items:flex-start; }        /* stretch 방지 : 이미지가 늘어나지 않게 */
.lg-form form{ width:100%; max-width:420px; }
.lg-ttl{ flex:none; height:52px; width:auto; margin-left:-6px; }
.lg-desc{ margin:10px 0 20px; font-size:12px; line-height:1.8; color:#a99cc0; }

.lg-form .row{ margin-bottom:10px; }
.lg-form label{ display:block; margin-bottom:5px; font-size:12px; letter-spacing:.06em; color:#b18ede; }
.lg-form input[type=text], .lg-form input[type=password]{
  width:100%; max-width:420px; height:42px; padding:0 12px;
  background:rgba(0,0,0,.5); border:1px solid rgba(150,84,210,.5);
  color:#efe6fb; font-size:14px;
}
.lg-form input::placeholder{ color:#8b7da4; }
.lg-form input:focus{ outline:none; border-color:#c77dff; box-shadow:0 0 10px rgba(168,92,232,.75); }

.lg-opt{ display:flex; align-items:center; gap:14px; max-width:420px;
         margin:4px 0 16px; font-size:12px; color:#c6b8dc; }
.lg-opt label{ display:flex; align-items:center; gap:6px; margin:0; color:#c6b8dc; font-size:12px; }
.lg-opt a{ margin-left:auto; font-size:12px; color:#a99cc0; }
.lg-opt a:hover{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.38); }

.lg-form .btn-login{ width:100%; max-width:420px; height:52px; }
.lg-form .btn-login span{ font-size:15px; letter-spacing:.16em; }

.lg-under{ max-width:420px; margin-top:16px; padding-top:14px;
           border-top:1px solid rgba(140,74,206,.22);
           display:flex; align-items:center; gap:12px; flex-wrap:wrap;
           font-size:12px; color:#9c8fb4; }
.lg-under a{ color:#c9a6f0; }
.lg-under a:hover{ color:#fff; text-shadow:0 0 9px rgba(255,255,255,.38); }
.lg-under .join{ margin-left:auto; }

.lg-notice{ display:flex; align-items:center; gap:10px; padding:11px 14px;
            margin-top:12px; max-width:520px;
            background:rgba(78,30,136,.20); font-size:12px; color:#b8a8d0; }
.lg-notice b{ flex:none; padding:2px 7px; font:bold 12px/1.6 Tahoma,sans-serif;
              color:#fff; background:rgba(168,52,236,.7); }


/* ==========================================================================
   13-3. 본문 하단 배너 · CONTENT BANNER
   ========================================================================== */
.sbanner{
  position:relative; overflow:hidden;
  min-height:150px; padding:18px 150px 18px 20px;
  border:11px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background:linear-gradient(135deg, rgba(150,58,236,.32) 0%, rgba(58,14,110,.28) 42%, rgba(8,2,20,.86) 100%);
  background-clip:padding-box;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
}
.sb-item{
  position:absolute; right:-14px; top:50%;
  height:160%; width:auto; max-width:none;
  transform:translateY(-50%);
  opacity:.55; pointer-events:none;
  filter:drop-shadow(0 0 24px rgba(190,110,255,.6));
  transition:transform .5s cubic-bezier(.2,.8,.3,1), opacity .35s ease;
}
.sbanner:hover .sb-item{ transform:translateY(-50%) rotate(-5deg) scale(1.05); opacity:.78; }

.sb-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); }
.sb-title{ position:relative; z-index:1; margin-top:10px;
  font:bold 24px/1.1 "Malgun Gothic",sans-serif; color:#fff;
  text-shadow:0 0 22px rgba(178,88,255,1), 0 2px 12px rgba(0,0,0,.95); }
.sb-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); }
.sb-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); }
.sb-go{ position:relative; z-index:1; margin-top:12px;
  display:inline-flex; align-items:center; gap:9px;
  font:bold 12px/1 "Malgun Gothic",sans-serif; color:#f0e2ff;
  text-shadow:0 0 10px rgba(178,104,240,.9); transition:gap .18s ease, color .18s ease; }
.sb-go b{ font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.22em; color:#b674f0; }
.sb-go::after{ content:""; width:22px; height:1px; background:#c78bff;
  box-shadow:0 0 8px rgba(199,139,255,.95); transition:width .18s ease; }
.sbanner:hover .sb-go{ gap:14px; color:#fff; }
.sbanner:hover .sb-go::after{ width:34px; }


/* ==========================================================================
   14. 푸터 · FOOTER
   ========================================================================== */
#foot{ flex:0 0 auto; display:flex; justify-content:center; align-items:center;
       height:44px; }
.f-copy{ height:30px; width:auto; opacity:.8; }


/* ==========================================================================
   15. 반응형 · RESPONSIVE
   ========================================================================== */
/* 아래 order/flex 규칙은 전부 구버전 서브헤더(#shero) 전용이다.
   #shero 로 한정하지 않으면 지금 쓰는 공용 상단(#hero, hero.css) 의
   3단 격자에까지 order 가 걸려 칸 순서가 뒤집힌다.
   (프로모가 왼쪽, 로고가 가운데, 카드가 오른쪽 세로로 무너지던 원인) */
@media (max-width:1400px){
  #shero{ height:auto; grid-template-columns:minmax(0,1fr); gap:14px; }
  #shero .h-side{ order:3; flex-direction:row; align-items:center; justify-content:center;
                  flex-wrap:wrap; gap:8px 14px; height:auto; }
  #shero .h-logo{ order:1; }
  #shero .deck{ order:2; flex-wrap:wrap; overflow:visible; gap:12px; }
  #shero .h-side .side-login{ display:flex; gap:7px; align-items:center; }
  #shero .h-side .side-login input{ width:150px; margin:0; }
  #shero .h-side .side-login .btn{ width:96px; }
  #shero .h-side .sub-links{ margin:0; }
  #shero .h-side .util{ margin:0; padding:0; border:0;
                        display:flex; gap:12px; flex-wrap:wrap; }

  #sstrip{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  #sstrip .s-gal{ grid-column:1 / -1; }
}

/* 3단 → 1단 은 상단이 세로로 쌓이는 지점(1180px, hero.css 와 동일)에서 같이 바뀐다.
   1280x768 같은 흔한 화면에서 서브만 먼저 1단이 되면 메인과 따로 놀아 보인다. */
@media (max-width:1180px){
  #scols{ grid-template-columns:minmax(0,1fr); }
  #sleft, #saside{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* 1단이 되면 칸 높이를 억지로 맞출 이유가 없다 */
  #scols{ align-items:start; }
  #sleft  > .panel:last-child,
  #saside > .panel:last-child,
  #sbody  > #container{ flex:0 0 auto; }
}
@media (max-width:1100px){
  #shead{ flex-wrap:wrap; justify-content:center; gap:10px 14px; }
  .s-nav{ order:3; flex:1 0 100%; }
}
/* 로그인 페이지 · LOGIN PAGE */
@media (max-width:900px){
  .lg-card{ grid-template-columns:minmax(0,1fr); }
  .lg-visual{ min-height:260px; border-right:0;
              border-bottom:1px solid rgba(150,84,210,.28); }
  .lg-visual img{ height:260px; }
  .lg-form{ padding:24px 20px 26px; }
}

@media (max-width:760px){
  #app{ padding:8px 10px 14px; }        /* 메인과 동일 */
  .lg-ttl{ height:44px; }
  .lg-opt{ flex-wrap:wrap; gap:8px; }
  .lg-opt a{ margin-left:0; }
  .lg-under{ flex-direction:column; align-items:flex-start; gap:6px; }
  .lg-under .join{ margin-left:0; }
  .card{ transform:none !important; }
  .h-side .side-login{ flex:1 0 100%; }
  .h-side .side-login input{ flex:1 1 auto; width:auto; }
  #sleft, #saside{ grid-template-columns:minmax(0,1fr); }
  #sstrip{ grid-template-columns:minmax(0,1fr); }
  .steps, .spec{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gmini{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .s-logo .logo{ height:52px; }
  .s-nav img{ height:40px; }
  #stitle{ flex-wrap:wrap; }
  .crumb{ margin-left:0; flex:1 0 100%; }

  /* 게시판 표 : 작성자 · 조회 열 숨김 (헤더 포함) */
  .bd-list col{ width:auto !important; }
  .bd-list th:nth-child(3), .bd-list td:nth-child(3),
  .bd-list th:nth-child(5), .bd-list td:nth-child(5){ display:none; }
  .bd-list th, .bd-list td{ padding:8px 5px; }
  .bd-list .no{ width:52px; font-size:12px; }
  .bd-list .date{ width:62px; font-size:12px; }

  .bd-top{ flex-wrap:wrap; gap:8px; }
  .bd-count{ flex:1 0 100%; }
  .bd-search{ flex:1 0 100%; margin-left:0; }
  .bd-search select{ flex:0 0 auto; min-width:0; }
  .bd-search input{ flex:1 1 auto; width:auto; min-width:0; }
  .paging{ flex-wrap:wrap; justify-content:center; }
  .bd-btm{ flex-direction:column; gap:10px; }
  .bd-btm .wr-btn{ position:static; }

  .spec-tbl th{ width:110px; }
  .spec-tbl th, .spec-tbl td{ padding:8px; font-size:12px; }
  .vw-head h2{ font-size:17px; }
  .vw-btm{ flex-wrap:wrap; }
  .vw-btm .right{ margin-left:0; }
  .form-row{ flex-direction:column; gap:6px; }
  .form-row > label{ width:auto; padding-top:0; }
  .cm-list li{ flex-direction:column; gap:4px; }
  .cm-who{ width:auto; display:flex; gap:8px; align-items:baseline; }
  .dl-hero img.item{ opacity:.3; }
  .dl-txt{ max-width:100%; }
}

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

/* ---------- 나의 캐시 ---------- */
.p-cash .cashlist{ display:flex; flex-direction:column; }
.p-cash .cashlist li{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 6px; font-size:13px;
  border-bottom:1px solid rgba(140,74,206,.16);
}
.p-cash .cashlist li:last-child{ border-bottom:0; }
.p-cash .cashlist span{ color:#a99cc0; }
.p-cash .cashlist span u{ text-decoration:none; margin-left:5px;
                          font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.08em; color:#7f719c; }
.p-cash .cashlist b{ font:bold 15px/1 Tahoma,sans-serif; color:#f0e0ff;
                     text-shadow:0 0 10px rgba(178,104,240,.7); }
.p-cash .cashlist li.site{ margin-top:4px; padding-top:10px;
                           border-top:1px solid rgba(150,84,210,.35); }
.p-cash .cashlist li.site b{ color:#a8ffd0; text-shadow:0 0 10px rgba(120,240,180,.6); }
.p-cash .cash-btn{ display:flex; gap:7px; margin-top:10px; }
.p-cash .cash-btn a{
  flex:1 1 0; height:34px; 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,.4);
  transition:color .16s ease, background .16s ease;
}
.p-cash .cash-btn a:hover{ color:#fff; background:rgba(96,38,164,.4); }

/* ---------- 서브 제목 : 이미지 대신 글자 (페이지마다 제목이 달라서) ---------- */
#stitle .ttl-txt{
  flex:0 0 auto; margin:0 0 0 4px;
  font:bold 19px/1.3 "Malgun Gothic",sans-serif; color:#f0e0ff;
  text-shadow:0 0 16px rgba(178,104,240,.7);
}

/* ---------- 내 캐릭터 : 오프라인 표시 ---------- */
.mychar-bar .mc-who em.off{
  color:#c9bda6; border-color:rgba(190,165,120,.4);
}

/* ==========================================================================
   계정정보 페이지 · mypage.php
   ========================================================================== */
.acc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.acc-box{ padding:14px 16px; background:rgba(0,0,0,.34);
          border:1px solid rgba(150,84,210,.28); }
.acc-lb{ display:block; margin-bottom:10px; padding-bottom:8px;
         font:bold 13px/1 "Malgun Gothic",sans-serif; color:#dcc6f7;
         border-bottom:1px solid rgba(150,84,210,.3); }
.acc-lb u{ text-decoration:none; margin-left:6px;
           font:bold 12px/1 Tahoma,sans-serif; letter-spacing:.12em; color:#8a7ca6; }
.acc-list li{ display:flex; align-items:center; justify-content:space-between; gap:10px;
              padding:7px 0; font-size:13px; border-bottom:1px solid rgba(140,74,206,.14); }
.acc-list li:last-child{ border-bottom:0; }
.acc-list span{ color:#a99cc0; }
.acc-list b{ color:#e4daf3; font-weight:normal; text-align:right; }
.acc-list b.hi{ font:bold 15px/1 Tahoma,sans-serif; color:#f0e0ff;
                text-shadow:0 0 10px rgba(178,104,240,.7); }
.acc-list b.on{ color:#a8ffd0; }
.acc-list b.bad{ color:#ff9fb4; }
.acc-empty{ padding:34px 6px; text-align:center; font-size:13px; line-height:1.9; color:#9c8fb4; }
.acc-btn{ display:flex; gap:7px; margin-top:12px; }
.acc-btn a{ flex:1 1 0; height:34px; 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,.4); }
.acc-btn a:hover{ color:#fff; background:rgba(96,38,164,.4); }

/* 캐릭터 카드 */
.chr-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.chr{ padding:14px 16px; background:linear-gradient(160deg, rgba(96,38,164,.2), rgba(8,2,20,.55));
      border:1px solid rgba(150,84,210,.3); }
.chr-top{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
          padding-bottom:10px; margin-bottom:10px;
          border-bottom:1px solid rgba(150,84,210,.3); }
.chr-nm{ font:bold 17px/1.2 "Malgun Gothic",sans-serif; color:#f0e0ff;
         text-shadow:0 0 12px rgba(178,104,240,.8); }
.chr-cl{ font-size:12px; color:#c9a6f0; }
.chr-gd{ margin-left:auto; padding:3px 9px; font-size:12px; color:#ffe9bc;
         background:rgba(158,110,26,.26); border-left:2px solid rgba(255,190,90,.6); }
.chr-key{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:10px; }
.chr-key li{ text-align:center; padding:7px 3px; background:rgba(0,0,0,.35);
             border:1px solid rgba(150,84,210,.22); }
.chr-key b{ display:block; font:bold 17px/1.1 Tahoma,sans-serif; color:#f0e0ff;
            text-shadow:0 0 10px rgba(178,104,240,.7); }
.chr-key span{ display:block; margin-top:4px; font-size:12px; color:#a99cc0; }
.chr-stat{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:9px; }
.chr-stat li{ display:flex; gap:7px; font-size:13px; }
.chr-stat span{ color:#a99cc0; }
.chr-stat b{ color:#e4daf3; font-weight:normal; }
.chr-sub{ display:flex; flex-wrap:wrap; gap:6px 14px; padding-top:9px;
          border-top:1px solid rgba(140,74,206,.16); }
.chr-sub li{ display:flex; gap:7px; font-size:12px; }
.chr-sub span{ color:#8a7ca6; }
.chr-sub b{ color:#c6b8dc; font-weight:normal; }
.chr-sub b.bad{ color:#ff9fb4; }

@media (max-width:1100px){ .acc-grid{ grid-template-columns:minmax(0,1fr); } }

/* ==========================================================================
   운영자 쪽지쓰기 · gm.php  알림
   ========================================================================== */
.gm-msg{ margin:0 0 12px; padding:12px 16px; font-size:13px; }
.gm-msg.ok { color:#a8ffd0; background:rgba(24,120,72,.18); border-left:2px solid rgba(120,240,180,.6); }
.gm-msg.err{ color:#efb4bf; background:rgba(158,24,52,.18); border-left:2px solid rgba(255,86,118,.65); }

/* ==========================================================================
   쪽지함 · memo.php
   ========================================================================== */
.memo-tab{ display:flex; gap:6px; margin-bottom:14px; }
.memo-tab a{
  flex:1 1 0; height:44px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; color:#c6b8dc;
  background:rgba(0,0,0,.4); border:1px solid rgba(150,84,210,.35);
  transition:color .16s ease, background .16s ease;
}
.memo-tab a u{ text-decoration:none; font:bold 12px/1 Tahoma,sans-serif;
               letter-spacing:.12em; color:#8a7ca6; }
.memo-tab a:hover{ color:#fff; background:rgba(96,38,164,.4); }
.memo-tab a.on{
  color:#fff; font-weight:bold;
  background:linear-gradient(180deg, rgba(150,58,236,.6), rgba(48,12,92,.8));
  border-color:#c77dff; box-shadow:0 0 18px rgba(178,104,240,.45);
}
.memo-tab a.on u{ color:#dcc6f7; }

.memo-list{ width:100%; border-collapse:collapse; }
.memo-list th{
  padding:11px 8px; font-size:13px; color:#dcc6f7; font-weight:bold;
  background:linear-gradient(180deg, rgba(96,38,164,.45) 0%, rgba(28,8,56,.32) 100%);
  border-top:1px solid rgba(150,84,210,.4);
  border-bottom:1px solid rgba(150,84,210,.4);
}
.memo-list td{ padding:11px 8px; font-size:14px; color:#ddd2ee;
               border-bottom:1px solid rgba(140,74,206,.16); text-align:center; }
.memo-list td.sj{ text-align:left; }
.memo-list td.sj a{ color:#e4daf3; }
.memo-list tr:hover td{ background:rgba(142,72,214,.14); }
.memo-list tr:hover td.sj a{ color:#fff; }
.memo-list tr.new td.sj a{ color:#f6e9ff; font-weight:bold; }
.memo-list .new-badge{ margin-left:7px; padding:1px 6px; font-style:normal;
  font:bold 12px/1.5 Tahoma,sans-serif; color:#fff; background:rgba(206,44,86,.85); }
.memo-list td.dt, .memo-list td.nm{ color:#a99cc0; font-size:13px; white-space:nowrap; }
.memo-list td.dl a{ color:#a99cc0; font-size:12px; }
.memo-list td.dl a:hover{ color:#ff9fb4; }
.memo-empty{ padding:56px 0 !important; color:#9c8fb4 !important; }

.memo-view{ margin-bottom:16px; padding:16px 18px;
            background:rgba(96,38,164,.14); border:1px solid rgba(150,84,210,.35); }
.memo-view .mv-top{ display:flex; align-items:baseline; gap:12px; padding-bottom:10px;
                    margin-bottom:12px; border-bottom:1px solid rgba(150,84,210,.3); }
.memo-view .mv-top b{ font-size:15px; color:#f0e0ff; }
.memo-view .mv-top span{ margin-left:auto; font-size:13px; color:#9c8fb4; }
.memo-view .mv-body{ min-height:90px; font-size:14px; line-height:1.9; color:#ddd2ee; }
.memo-view .mv-btn{ display:flex; gap:7px; margin-top:14px; }
.memo-view .mv-btn a{ padding:8px 16px; font-size:13px; color:#c6b8dc;
  background:rgba(0,0,0,.4); border:1px solid rgba(150,84,210,.4); }
.memo-view .mv-btn a:hover{ color:#fff; background:rgba(96,38,164,.4); }

/* ==========================================================================
   [서브 여백 정리]  메인과 같은 원칙 — 내용 높이만큼만
     · #app 이 화면 높이(100vh)까지 늘어나 본문 아래가 크게 비었다
     · 좌·우 사이드 길이가 달라 짧은 쪽 아래가 비었다
     · 패널 안쪽 여백·줄 간격이 넓었다
   ========================================================================== */
html, body{ min-height:0; height:auto; }
#app{ min-height:0; padding-bottom:14px; }

/* 세 칸의 바닥은 본문 쪽에서 맞춘다.
   사이드 패널까지 늘리면 내용 없는 박스가 크게 벌어져 오히려 지저분하다.
   → 사이드는 내용만큼만, 가운데 본문(게시판 테두리)만 가장 긴 칸까지 내려온다. */
#scols{ align-items:stretch; }
#sleft, #saside{ align-content:start; }
#sleft > .panel, #saside > .panel{ min-height:0; flex:0 0 auto; }
/* 본문은 #sbody > #wrapper > #container_wr > #container 순으로 감싸여 있다.
   중간 상자마다 늘어나라고 일러줘야 게시판 테두리가 사이드와 같은 높이로 내려온다 */
#sbody > #wrapper{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
#sbody > #wrapper > #container_wr{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
#sbody > #wrapper > #container_wr > #container{ flex:1 1 auto; }
#sbody > .panel:last-child{ flex:1 1 auto; }

/* MORE + 가 두 줄로 내려가지 않게 */
.p-head .more, #scols .p-head .more{ white-space:nowrap; }

/* 게시판 본문 : 글이 적어도 과하게 높지 않게 */
#container{ min-height:0; padding:12px 14px 16px; }

/* 패널 안쪽 여백·줄 간격 (메인과 동일 기준) */
#scols .p-head{ margin-bottom:5px; }
#scols .p-body{ padding:0 6px 7px; }
#scols .list li { padding:6px 6px 6px 18px; }
#scols .boss li { padding:6px 6px; }
#scols .rank li,
#scols .grank li{ padding:5px 6px; }
#scols .hist li,
#scols .pk li   { padding:5px 6px; }
#scols .glist li{ padding:6px 6px 6px 18px; }
#scols .lord    { padding:6px 9px; }
#scols .cdown   { padding:6px 4px; }
#scols .blk-lbl { margin-top:8px; }
#scols .gm-note { margin-top:6px; }

/* 사이드 패널 사이 간격 */
#sleft, #saside{ gap:10px; }
/* ==========================================================================
   이용 제한 안내 · blocked.php
   ========================================================================== */
.bk-top{ display:flex; align-items:center; gap:14px; margin:4px 0 14px; padding:14px 16px;
         background:linear-gradient(90deg, rgba(206,44,86,.22) 0%, rgba(40,6,20,.30) 100%);
         border:1px solid rgba(226,84,120,.45); }
.bk-icon{ flex:none; width:38px; height:38px; border-radius:50%;
          font:bold 22px/38px Tahoma,sans-serif; text-align:center; color:#fff;
          background:rgba(206,44,86,.9); box-shadow:0 0 16px rgba(226,84,120,.7); }
.bk-h{ display:block; font-size:16px; color:#ffd9e2; }
.bk-sub{ display:block; margin-top:3px; font-size:13px; color:#c6b8dc; }
.bk-sub b{ color:#ffd9e2; }

.bk-list{ margin:0 0 12px; border:1px solid rgba(150,84,210,.32); background:rgba(0,0,0,.3); }
.bk-list li{ display:flex; align-items:center; gap:12px; padding:9px 14px;
             border-bottom:1px solid rgba(150,84,210,.16); }
.bk-list li:last-child{ border-bottom:0; }
.bk-list span{ flex:0 0 110px; font-size:12px; color:#a99cc0; }
.bk-list b{ flex:1 1 auto; min-width:0; font-weight:normal; font-size:14px; color:#e4daf3; }
.bk-list b.ok{ color:#7ff0d8; }
.bk-list b.bad{ color:#ff9db4; }

.bk-note{ margin:0 0 14px; padding:11px 14px; font-size:13px; line-height:1.8; color:#b6a8cc;
          background:rgba(96,38,164,.16); border:1px solid rgba(150,84,210,.3); }

.bk-btn{ display:flex; gap:8px; margin:0 0 6px; }
.bk-btn a{ padding:10px 20px; font-size:13px; color:#c6b8dc;
           background:rgba(0,0,0,.42); border:1px solid rgba(150,84,210,.42); }
.bk-btn a:hover{ color:#fff; background:rgba(96,38,164,.45); }
.bk-btn a.go{ color:#fff; background:linear-gradient(180deg,#7b2fc9 0%,#4a1489 100%);
              border-color:rgba(199,125,255,.6); font-weight:bold; }

/* 내 캐릭터 상태 */
.bk-chars{ margin:6px 0 4px; border:1px solid rgba(150,84,210,.28); background:rgba(0,0,0,.28); }
.bk-chars li{ display:flex; align-items:center; gap:12px; padding:9px 14px;
              border-bottom:1px solid rgba(150,84,210,.14); }
.bk-chars li:last-child{ border-bottom:0; }
.bk-chars b{ flex:0 0 130px; min-width:0; font-weight:normal; font-size:14px; color:#e4daf3;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-chars .cl{ flex:1 1 auto; min-width:0; font-size:12px; color:#a99cc0;
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-chars .lv{ flex:none; font-size:12px; color:#c9a6f0; }
.bk-chars em{ flex:none; min-width:56px; text-align:center; padding:3px 9px;
              font-style:normal; font-size:12px; color:#7ff0d8;
              border:1px solid rgba(60,230,190,.45); background:rgba(0,60,50,.28); }
.bk-chars li.off b{ color:#ff9db4; }
.bk-chars li.off em{ color:#ff9db4; border-color:rgba(226,84,120,.5); background:rgba(70,6,24,.35); }

/* ==========================================================================
   실시간 전광판 · GAME LIVE   (서브페이지)
     메인(style.css)과 한 글자도 다르면 안 된다.
     서브에는 style.css 가 실리지 않아 같은 규칙을 여기에 둔다.
   ========================================================================== */#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; }


/* 전광판 : 맵 이름 */
.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; }


/* ==========================================================================
   공지사항 작은 상자 (서브 좌측 맨 위)
     본문을 가리지 않게 줄 간격을 좁히고 글자도 한 단계 작게 쓴다.
     공지로 체크한 글은 색을 달리해 눈에 먼저 들어오게 한다.
   ========================================================================== */
.p-snote .p-body{ padding-bottom:6px; }
.glist.tight li{ padding:4px 4px 4px 16px; background-size:10px auto; }
.glist.tight a{ font-size:12px; line-height:1.35; }
.glist.tight li.nt{ background-color:rgba(142,72,214,.16); }
.glist.tight li.nt a{ color:#f0e6ff; font-weight:bold; }
#scols .glist.tight li{ padding:4px 6px 4px 17px; }

/* ==========================================================================
   이벤트 배너 | 스크린샷 띠 (#utilbar) · 서브페이지
     메인(style.css)과 한 글자도 다르면 안 된다.
     서브에는 style.css 가 실리지 않아 같은 규칙을 여기에 둔다.
   ========================================================================== */#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); }



.bn-none{ padding:26px 10px; text-align:center; font-size:13px; color:#9c8fb4; }
.bn-none a{ color:#c9a6f0; }