@charset "utf-8";
/* ==========================================================================
   메인 배치
     들어오자마자 보여야 하는 순서로 위에서부터 쌓는다.
       1  공성전 남은 시간 (가로 띠)
       2  순위 명예의 전당 (가로 띠, 1위가 가장 크다)
       3  로그인 · 공지 · 게시판 · 운영진 · PK
     아래로 내려가면 이벤트 시간표 · 빠른 서비스.
     스크롤은 허용하되 첫 화면이 비지 않게 채운다.
   ========================================================================== */

/* 좌우 여백을 줄여 화면을 넓게 쓴다 */
#app{ max-width:1860px; }

/* ==========================================================================
   1. 전장 띠 · BATTLE BAND
     공성전과 순위를 한 줄에 나란히 둔다. 두 줄로 나누면 그만큼 자리를 먹는다.
   ========================================================================== */
/* 아래 간격은 #app 의 gap(10px)이 준다. 여기서 margin 을 또 주면 이 줄만 20px 로 벌어진다 */
#battle{ flex:0 0 auto; display:flex; align-items:stretch; gap:10px; margin-bottom:0; }
#battle > #siegebar{ flex:0 0 auto; width:32%; max-width:520px; margin-bottom:0;
                     flex-direction:column; }
#battle > #rband{ flex:1 1 0; min-width:0; margin-bottom:0; }

/* 띠 안에서는 세로로 쌓는다 — 가로로 늘어놓으면 좁아서 글자가 겹친다 */
#battle .sb-lord{ flex:0 0 auto; border-right:0;
                  border-bottom:1px solid rgba(150,84,210,.28); }
#battle .sb-clock{ flex:1 1 auto; padding:8px 14px; }
#battle .sb-spec{ flex:0 0 auto; align-self:stretch;
                  grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 10px 9px; }
#battle .sb-spec li{ min-width:0; padding:4px 8px; }

#siegebar{
  flex:0 0 auto; position:relative; overflow:hidden;
  display:flex; align-items:stretch; gap:0; margin-bottom:10px;
  border:9px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background:
    radial-gradient(90% 180% at 22% 50%, rgba(150,70,230,.30) 0%, rgba(150,70,230,0) 62%),
    linear-gradient(90deg, rgba(26,9,56,.94) 0%, rgba(8,2,20,.94) 70%) no-repeat center;
  background-clip:border-box; background-origin:border-box;
  background-size:calc(100% - 9px) calc(100% - 9px);
}

/* 점령 길드 */
.sb-lord{ flex:0 0 auto; display:flex; align-items:center; gap:12px;
          padding:8px 22px 8px 16px; min-width:0;
          border-right:1px solid rgba(150,84,210,.28); }
.sb-crown{ flex:none; height:46px; width:auto;
           filter:drop-shadow(0 0 14px rgba(255,190,90,.55)); }
.sb-who{ min-width:0; }
.sb-who .lbl{ display:block; font-size:11.5px; letter-spacing:.04em; color:#a99cc0; }
.sb-who strong{ display:block; margin:1px 0 2px;
                font:bold 24px/1.1 "Malgun Gothic",sans-serif; color:#fff;
                text-shadow:0 0 18px rgba(178,88,255,.95);
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-who .sub{ display:block; font-size:12px; color:#b18ede; white-space:nowrap;
              overflow:hidden; text-overflow:ellipsis; }

/* 카운트다운 — 이 띠에서 가장 크다 */
.sb-clock{ flex:1 1 auto; min-width:0;
           display:flex; flex-direction:column; align-items:center; justify-content:center;
           padding:5px 18px; }
.sb-clock .lbl{ font-size:12px; letter-spacing:.1em; color:#b18ede; }
.sb-clock .clock{ display:flex; align-items:baseline; gap:3px; margin:2px 0 1px; }
.sb-clock .clock b{ font:bold 34px/1 Tahoma,sans-serif; color:#fff;
                    text-shadow:0 0 20px rgba(178,88,255,1), 0 2px 10px rgba(0,0,0,.9); }
.sb-clock .clock u{ margin:0 9px 0 2px; text-decoration:none;
                    font:bold 12px/1 "Malgun Gothic",sans-serif; color:#9c8fb4; }
.sb-clock .clock u:last-of-type{ margin-right:0; }
.sb-clock .sub{ font-size:12px; color:#a99cc0; }

/* 성 수치 */
.sb-spec{ flex:0 0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
          gap:1px; align-self:center; margin:8px 12px 8px 0;
          background:rgba(150,84,210,.18); border:1px solid rgba(150,84,210,.26); }
.sb-spec li{ display:flex; flex-direction:column; gap:1px; padding:5px 12px;
             background:rgba(8,2,20,.7); min-width:96px; }
.sb-spec span{ font-size:11px; color:#a99cc0; white-space:nowrap; }
.sb-spec b{ font:bold 13.5px/1.1 Tahoma,"Malgun Gothic",sans-serif; color:#e8d9ff;
            white-space:nowrap; }
.sb-spec b.on{ color:#7ff0d8; }

/* ==========================================================================
   2. 명예의 전당 · HALL OF FAME
     순위를 옆줄에 세우지 않는다. 가로로 깔고 1위 칸을 가장 크게 준다.
   ========================================================================== */
/* overflow:hidden 을 두면 안쪽 것들이 테두리 안쪽(패딩 상자)에서 잘린다.
   그래서 제목 띠가 테두리 선까지 못 나가 왼쪽·위에 검은 틈이 생겼다.
   다른 상자(.p-head)처럼 선까지 꽉 차게 두려면 잘라내기를 없애야 한다. */
#rband{
  flex:0 0 auto; position:relative;
  display:flex; align-items:stretch; margin-bottom:10px;
  border:9px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background:linear-gradient(90deg, rgba(24,8,52,.94) 0%, rgba(8,2,20,.94) 62%) no-repeat center;
  background-clip:border-box; background-origin:border-box;
  background-size:calc(100% - 9px) calc(100% - 9px);
}
#rband{ flex-direction:column; }
#rband .rb-head{
  flex:0 0 auto; height:36px; display:flex; align-items:center; gap:4px;
  margin:-4.5px -4.5px 0; padding:0 10px 0 9px;
  background:url(../img/ui/head_tile.png) repeat-x center;
  background-size:auto 36px;
}
#rband .rb-head .cap{ height:27px; width:auto; flex:none; }
/* 다른 상자 제목과 같은 크기(42px). 예전에는 잘려서 40px 로 줄여 뒀었다. */
#rband .rb-head .ttl{ height:42px; width:auto; flex:none; margin-left:2px; }
#rband .rb-head .more{ margin-left:auto; flex:none; }

#rband .rb-body{ flex:1 1 auto; min-width:0; display:flex; align-items:stretch;
                 gap:8px; padding:6px 6px 4px; }

/* ---------- 캐릭터 순위 : 한 줄에 배지 · 닉네임 · 직업 · 계급 · 레벨 ---------- */
.rb-chars{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.rb-chars li{
  flex:1 0 auto; min-width:0; position:relative;
  display:flex; align-items:center; gap:9px;
  padding:4px 11px 4px 6px;
  background:rgba(10,3,26,.6);
  border:1px solid rgba(150,84,210,.26);
  transition:border-color .2s ease, background .2s ease;
}
.rb-chars li:hover{ border-color:rgba(199,139,255,.75); background:rgba(32,11,66,.7); }

.rb-chars li.rb-1{
  background:
    radial-gradient(70% 200% at 4% 50%, rgba(255,190,90,.22) 0%, rgba(255,190,90,0) 62%),
    linear-gradient(90deg, rgba(120,60,200,.30) 0%, rgba(10,3,26,.6) 62%);
  border-color:rgba(255,205,130,.55); }
.rb-chars li.rb-2{ border-color:rgba(199,139,255,.42); }
.rb-chars li.rb-3{ border-color:rgba(178,104,240,.34); }

.rb-md{ flex:none; height:30px; width:auto;
        filter:drop-shadow(0 0 7px rgba(0,0,0,.55)); }
.rb-1 .rb-md{ height:36px; }
.rb-no{ flex:none; width:30px; text-align:center;
        font:bold 16px/1 Tahoma,sans-serif; color:#8d7fa0; }

/* 이름 뒤의 칸들은 폭을 고정한다.
   그냥 이어 붙이면 이름이 길고 짧은 만큼 직업·수치가 줄마다 들쭉날쭉해진다. */
.rb-nm{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        font:bold 14px/1.2 "Malgun Gothic",sans-serif; color:#f0e6ff; }
.rb-1 .rb-nm{ font-size:17px; color:#fff; text-shadow:0 0 14px rgba(255,205,130,.55); }

.rb-cls{ flex:0 0 104px; display:flex; justify-content:center; }
.rb-chars .cls{ text-decoration:none; font-size:11.5px; white-space:nowrap;
                overflow:hidden; text-overflow:ellipsis; }

.rb-rk{ flex:0 0 26px; display:flex; align-items:center; justify-content:center; }
.rb-chars .pkr{ max-width:24px; max-height:24px; }

/* PK 킬 수 · 보스 처치 수 — 이름표를 위에 얹고 숫자를 아래에 */
.rb-kv{ flex:0 0 62px; display:flex; flex-direction:column; align-items:center;
        gap:1px; line-height:1.1; }
.rb-kv i{ font-style:normal; font-size:10px; letter-spacing:.02em; color:#8d7fa0; }
.rb-kv b{ font:bold 13px/1 Tahoma,sans-serif; color:#dcc6f7; }
.rb-kv.pk b{ color:#ff9fb4; }
.rb-kv.bs b{ color:#8ff3de; }
.rb-1 .rb-kv b{ font-size:15px; }

/* 폭을 고정하면 1위 줄(글씨가 큼)에서 딱지 두 개가 못 들어가 두 줄로 접힌다.
   내용 폭대로 두고(최소 196px), 절대 접히지 않게 한다. 이름 칸이 대신 줄어든다. */
.rb-lv{ flex:0 0 auto; min-width:196px; text-align:right; padding-left:6px;
        font:bold 12.5px/1 Tahoma,sans-serif; font-style:normal;
        color:#dcc6f7; white-space:nowrap; }
.rb-lv .lvset{ flex-wrap:nowrap; }
.rb-1 .rb-lv .lvset b{ font-size:14px; }

/* ---------- 레벨 딱지 — 일반 레벨과 마스터 레벨 구분 ----------
   401 이라고만 두면 일반인지 마스터인지 알 수 없다.
   그래서 숫자 앞에 무슨 레벨인지 작게 붙이고 색으로도 나눈다.
   (보라 = 일반 · 금색 = 마스터 · 청록 = 스탯) */
.lvset{ display:inline-flex; flex-wrap:wrap; align-items:center;
        justify-content:flex-end; gap:4px; vertical-align:middle; }
.lvset b{ display:inline-flex; align-items:center; gap:4px; padding:2px 6px;
          font:bold 13px/1.2 Tahoma,sans-serif; white-space:nowrap; }
.lvset b i{ font:normal 10px/1 "Malgun Gothic",sans-serif; font-style:normal; opacity:.9; }
.lvset .lv-n{ color:#efe3ff; background:rgba(120,52,205,.30);
              border:1px solid rgba(178,104,240,.45); }
.lvset .lv-n i{ color:#b18ede; }
.lvset .lv-m{ color:#ffe6a8; background:rgba(150,100,12,.26);
              border:1px solid rgba(255,205,130,.45);
              text-shadow:0 0 10px rgba(255,190,90,.55); }
.lvset .lv-m i{ color:#e0b877; }
.lvset .lv-s{ color:#9fe8d6; background:rgba(18,86,76,.30);
              border:1px solid rgba(90,220,190,.4); }
.lvset .lv-s i{ color:#6fc9b6; }

/* 옆줄 랭킹 목록은 칸이 좁다 — 가로로 늘어놓으면 딱지가 잘린다.
   그래서 여기서는 위아래로 쌓고 한 치수 줄인다. */
.rank li em{ flex:none; width:auto; max-width:none; }
.rank li em .lvset{ flex-direction:row; align-items:center;
                    flex-wrap:nowrap; gap:3px; }
/* 목록의 .rank li b 규칙(이름 칸)이 딱지에도 걸려 글자를 잘라 버린다 — 되돌린다 */
.rank li em .lvset b{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  flex:none;
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  padding:1px 4px;
  gap:2px;
  font-size: 12px;
  }
/* 목록의 순위 번호(.rank li i) 규칙이 딱지 안 글씨에도 걸린다 — 되돌린다 */
.rank li em .lvset b i{
  flex:none;
  width:auto;
  height:auto;
  border:0;
  text-align:left;
  font: normal 10px/1 "Malgun Gothic",sans-serif;
  }
.rank li em .lvset{gap: 2px;}

/* 종합랭킹 표 — 레벨 칸은 두 줄로 접히지 않게 한 줄로 세운다 */
.rk-list td.lv{ white-space:nowrap; }
.rk-list td.lv .lvset{ flex-wrap:nowrap; justify-content:center; }

/* 좁아지면 뒤쪽 칸부터 접는다 — 이름과 레벨은 끝까지 남긴다 */
@media (max-width:1500px){ .rb-cls{ flex-basis:84px; } }
@media (max-width:1340px){ .rb-kv.bs{ display:none; } }
@media (max-width:1180px){ .rb-cls{ display:none; } }
.rb-none{ flex:1 1 auto; display:flex; align-items:center; justify-content:center;
          color:#8d7fa0; font-size:13px; }

/* ==========================================================================
   길드 문장 · GUILD CREST
     순위를 줄로 늘어놓지 않는다. 1위 길드의 마크를 문장처럼 크게 걸고
     이름 · 길드마스터 · 인원 · 점수를 그 아래에 모은다.
     2위부터는 작은 줄로 밑에 붙는다.
   ========================================================================== */
.rb-guild{ flex:0 0 auto; width:214px; display:flex; flex-direction:column; gap:5px;
           padding-left:10px; border-left:1px solid rgba(150,84,210,.3); }
/* 제목 줄 — 다른 패널 머리(.p-head)와 같은 짜임.
   앞에 세로 막대(cap), 그 옆에 제목 그림. */
.rb-guild .sec-head{ flex:none; display:flex; align-items:center; gap:6px; margin:0; }
.rb-guild .sec-head .cap{ flex:none; height:26px; width:auto; }
.rb-guild .sec-ttl{ flex:none; height:30px; width:auto; }

.gcrest{
  flex:1 1 auto; min-height:0; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 10px;
  background:
    radial-gradient(85% 120% at 50% 22%, rgba(255,190,90,.16) 0%, rgba(255,190,90,0) 62%),
    linear-gradient(180deg, rgba(34,12,66,.92) 0%, rgba(8,2,20,.92) 100%);
  border:1px solid rgba(255,205,130,.34);
  box-shadow:inset 0 0 26px rgba(255,190,90,.08);
}
/* 문장 뒤 빛 */
.gcrest::before{
  content:""; position:absolute; left:50%; top:26px; width:96px; height:96px;
  margin-left:-48px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,190,90,.24) 0%, rgba(255,190,90,0) 68%);
}
.gcrest-mk{
  position:relative; flex:none; display:flex; align-items:center; justify-content:center;
  width:62px; height:62px; margin-bottom:2px;
  background:rgba(0,0,0,.55);
  border:2px solid rgba(255,205,130,.55);
  box-shadow:0 0 16px rgba(255,190,90,.35), inset 0 0 12px rgba(0,0,0,.7);
  transform:rotate(45deg);
}
.gcrest-mk img{ width:44px; height:44px; image-rendering:pixelated; transform:rotate(-45deg); }
.gcrest-nm{ position:relative; max-width:100%; overflow:hidden; text-overflow:ellipsis;
            white-space:nowrap; font:bold 17px/1.2 "Malgun Gothic",sans-serif; color:#fff;
            text-shadow:0 0 14px rgba(255,205,130,.6); }
.gcrest-ms{ position:relative; font-size:11.5px; color:#c9a6f0; white-space:nowrap;
            overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.gcrest-no{ position:relative; display:flex; gap:7px; margin-top:2px; }
.gcrest-no em{ font-style:normal; padding:1px 7px; font:bold 11px/1.6 Tahoma,sans-serif;
               color:#ffe6b8; background:rgba(255,190,90,.10);
               border:1px solid rgba(255,205,130,.3); white-space:nowrap; }

/* 2위부터 — 순위마다 강조색을 달리한다 (2위 은색 · 3위 동색) */
.gnext{ flex:0 0 auto; display:flex; flex-direction:column; gap:4px; }
.gnext li{ display:flex; align-items:center; gap:7px; padding:4px 8px; min-width:0;
           background:rgba(10,3,26,.55); border:1px solid rgba(150,84,210,.22);
           border-left-width:3px; }
.gnext i{ flex:none; font-style:normal; font:bold 11px/1 Tahoma,sans-serif; color:#b18ede; }
.gnext .gmk{ flex:none; width:20px; height:20px; image-rendering:pixelated;
             border:1px solid rgba(150,84,210,.35); background:rgba(0,0,0,.45); }
.gnext b{ min-width:0; font:bold 12.5px/1.2 "Malgun Gothic",sans-serif; color:#e8d9ff;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 2위 : 은색 */
.gnext li:nth-child(1){ border-left-color:rgba(206,216,240,.85);
                        background:linear-gradient(90deg, rgba(150,162,196,.16) 0%, rgba(10,3,26,.55) 60%); }
.gnext li:nth-child(1) i{ color:#ced8f0; }
.gnext li:nth-child(1) b{ color:#f2f5ff; }
.gnext li:nth-child(1) .gmk{ border-color:rgba(206,216,240,.5); }
/* 3위 : 동색 */
.gnext li:nth-child(2){ border-left-color:rgba(226,150,96,.85);
                        background:linear-gradient(90deg, rgba(176,104,54,.18) 0%, rgba(10,3,26,.55) 60%); }
.gnext li:nth-child(2) i{ color:#e29660; }
.gnext li:nth-child(2) b{ color:#ffe2cd; }
.gnext li:nth-child(2) .gmk{ border-color:rgba(226,150,96,.5); }

/* ==========================================================================
   3. 본문 격자 — 폭을 일부러 어긋나게
   ========================================================================== */
#grid{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:stretch; gap:10px;
}
#grid .gcol{ display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0; }
#grid .gcol:nth-child(1){ flex:0.95 1 0; }   /* 로그인 · 운영진 · 서버정보 */
#grid .gcol:nth-child(2){ flex:1.75 1 0; }   /* 공지사항 · 게시판 */
#grid .gcol:nth-child(3){ flex:1.4 1 0; }    /* 보스 처치 · PK 현황 */

#grid .gcol > .panel,
#grid .gcol > .gpair{ flex:1 1 auto; min-height:0; }
#grid .panel{ width:auto; margin:0; min-height:0; align-self:auto; }

/* 상자 안 : 남는 높이는 줄이 나눠 먹는다 (줄어들지는 않는다) */
#grid .p-body{ display:flex; flex-direction:column; justify-content:flex-start; }
#grid .list, #grid .glist, #grid .rank, #grid .grank,
#grid .hist, #grid .pk, #grid .boss, #grid .gmlist{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
}
#grid .list > li, #grid .rank > li, #grid .grank > li,
#grid .hist > li, #grid .pk > li, #grid .boss > li, #grid .gmlist > li{
  flex:1 0 auto;
}

#grid .p-support .p-body{ justify-content:flex-start; }
#grid .p-support .gmlist{ gap:6px; }
#grid .p-support .gm-note{ flex:0 0 auto; margin-top:7px; }

#grid .p-login .p-body{ justify-content:flex-start; }
#grid .p-login .login,
#grid .p-login .login-in{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
#grid .p-login .login input{ flex:1 0 auto; min-height:30px; margin-bottom:5px; }
#grid .p-login .login .btn-wide{ flex:1 0 auto; min-height:40px; height:auto; }
#grid .p-login .login .sub-links{ flex:0 0 auto; }
#grid .p-login .login-in .li-hi,
#grid .p-login .login-in .li-quick,
#grid .p-login .login-in .sub-links{ flex:0 0 auto; }
#grid .p-login .login-in .li-stat{ flex:1 1 auto; min-height:0; }
#grid .p-login .login-in .li-stat li{ display:flex; flex-direction:column; justify-content:center; }

#grid .p-notice .list > li > a{ font-size:14px; }
#grid .p-notice .list .who{ font-size:12px; }
#grid .p-cut.natural{ align-self:stretch; }

/* 오른쪽 끝 그림은 좌우를 뒤집어 왼쪽 그림과 마주 보게 한다 */
.p-cut.flip img{ transform:scaleX(-1); }

/* ==========================================================================
   맨 아래 안내 두 줄 — 명령어 · 사냥터
     사람이 몇 명이든 늘 같은 내용이라 서버가 한산해도 빈 자리가 없다.
   ========================================================================== */
/* 위 간격도 #app 의 gap 이 준다 — margin 을 더하면 이 두 줄만 벌어진다 */
#cmdbar, #huntbar{
  flex:0 0 auto; position:relative; overflow:hidden; margin-top:0;
  border:9px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background:
    radial-gradient(120% 220% at 0% 50%, rgba(150,70,230,.22) 0%, rgba(150,70,230,0) 60%),
    linear-gradient(90deg, rgba(22,8,48,.92) 0%, rgba(8,2,20,.92) 70%) no-repeat center;
  background-clip:border-box; background-origin:border-box;
  background-size:calc(100% - 9px) calc(100% - 9px);
  padding:10px 12px 12px;
}

.cb-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:9px; }
.cb-head b{ font:bold 15px/1.2 "Malgun Gothic",sans-serif; color:#f0e6ff;
            text-shadow:0 0 14px rgba(178,104,240,.6); }
.cb-head u{ text-decoration:none; font:bold 10.5px/1 Tahoma,sans-serif;
            letter-spacing:.18em; color:#8d7fa0; }
.cb-head .cb-tip{ font-size:11.5px; color:#8d7fa0; }
.cb-head .cb-tip kbd{ padding:1px 5px; font:bold 11px/1.5 Consolas,monospace; color:#dcc6f7;
                      background:rgba(0,0,0,.5); border:1px solid rgba(150,84,210,.5); }
.cb-head .cb-more{ font:bold 11px/1 Tahoma,sans-serif; letter-spacing:.12em; color:#c9a6f0; }
.cb-head .cb-more:hover{ color:#fff; text-shadow:0 0 10px rgba(199,139,255,.9); }

/* ---------- 찾기 ---------- */
.cb-find{ position:relative; margin-left:auto; }
.cb-find input{
  width:190px; height:30px; padding:0 28px 0 30px;
  font-size:12.5px; color:#efe6fb;
  background:rgba(0,0,0,.5); border:1px solid rgba(150,84,210,.45);
  transition:border-color .15s, box-shadow .15s, width .18s;
}
.cb-find input::placeholder{ color:#7a6b99; }
.cb-find input:focus{ width:250px; outline:none; border-color:#c77dff;
                      box-shadow:0 0 12px rgba(168,92,232,.55); }
.cb-find::before{
  content:""; position:absolute; left:10px; top:50%; width:13px; height:13px; margin-top:-6px;
  pointer-events:none;
  background:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238d7fa0'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z'/%3E%3C/svg%3E") no-repeat center/13px;
}
.cb-x{ position:absolute; right:6px; top:50%; width:20px; height:20px; margin-top:-10px;
       display:none; cursor:pointer; font:14px/1 Tahoma,sans-serif; color:#9c8fb4;
       background:transparent; border:0; }
.cb-x:hover{ color:#fff; }

/* ---------- 분류 탭 ---------- */
.cb-tabs{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px;
          padding-bottom:8px; border-bottom:1px solid rgba(150,84,210,.28); }
.cb-tab{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:5px 11px; font:12.5px/1.4 "Malgun Gothic",sans-serif; color:#a99cc0;
  background:rgba(0,0,0,.36); border:1px solid rgba(150,84,210,.3); transition:.15s;
}
.cb-tab i{ font-style:normal; font:bold 10px/1 Tahoma,sans-serif; color:#7a6b99; }
.cb-tab:hover{ color:#fff; border-color:rgba(199,139,255,.6); background:rgba(96,38,164,.3); }
.cb-tab.on{ color:#fff; font-weight:bold;
            background:linear-gradient(180deg, rgba(156,66,240,.55), rgba(72,20,140,.65));
            border-color:rgba(199,139,255,.75);
            box-shadow:0 0 14px rgba(178,104,240,.35), inset 0 1px 0 rgba(255,255,255,.14); }
.cb-tab.on i{ color:#e0c9ff; }
/* 찾는 중에는 어느 탭도 켜진 게 아니다 */
#cmdbar.searching .cb-tab.on{ color:#a99cc0; font-weight:normal; background:rgba(0,0,0,.36);
                              border-color:rgba(150,84,210,.3); box-shadow:none; }

/* ---------- 명령어 ---------- */
/* 3칸. 4칸으로 줄이면 설명이 잘려 무슨 명령어인지 알 수 없다 */
.cb-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.cb-list li{ display:flex; align-items:center; gap:7px; min-width:0;
             padding:7px 10px; background:rgba(10,3,26,.6);
             border:1px solid rgba(150,84,210,.3);
             transition:border-color .15s, background .15s; }
.cb-list li:hover{ border-color:rgba(199,139,255,.7); background:rgba(32,11,66,.7); }
.cb-cmd{
  flex:none; padding:3px 9px; cursor:pointer; white-space:nowrap;
  font:bold 13px/1.5 Consolas,"Malgun Gothic",monospace; color:#fff;
  background:linear-gradient(180deg, rgba(150,58,236,.5), rgba(48,12,92,.7));
  border:1px solid rgba(199,139,255,.5); transition:.14s;
}
.cb-cmd:hover{ border-color:#c77dff; box-shadow:0 0 10px rgba(178,104,240,.6); }
.cb-cmd:active{ transform:translateY(1px); }
.cb-cmd.done{ color:#8ff3de; border-color:rgba(124,240,196,.85);
              background:linear-gradient(180deg, rgba(40,180,140,.45), rgba(12,60,46,.7)); }
.cb-ar{ flex:none; font-style:normal; font-size:11px; color:#8d7fa0; white-space:nowrap; }
.cb-ds{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        font-size:12.5px; color:#c6b8dc; }
.cb-al{ flex:none; padding:1px 5px; font-style:normal; font:bold 10px/1.5 Tahoma,sans-serif;
        color:#c9a6f0; background:rgba(96,38,164,.32); border:1px solid rgba(150,84,210,.4); }
.cb-co{ flex:none; font-style:normal; font-size:11px; color:#ffd08a; white-space:nowrap; }
.cb-co.free{ color:#8ff3de; }

.cb-none{ display:none; padding:22px 0 8px; text-align:center; font-size:13px; color:#8d7fa0; }

/* ---------- 사냥터 ---------- */
.hb-list{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.hb-list li{ min-width:0; padding:8px 11px; background:rgba(10,3,26,.6);
             border:1px solid rgba(150,84,210,.3); border-left:2px solid rgba(199,139,255,.55); }
.hb-lv{ display:block; font:bold 13px/1.3 Tahoma,"Malgun Gothic",sans-serif; color:#ffe6b8; }
.hb-mp{ display:block; margin-top:3px; font-size:12px; line-height:1.6; color:#c6b8dc;
        word-break:keep-all; }

@media (max-width:1280px){
  .cb-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hb-list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  .cb-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hb-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .cb-list, .hb-list{ grid-template-columns:minmax(0,1fr); }
  .cb-head .cb-tip{ display:none; }
}

/* ==========================================================================
   쪽지 알림
     안 읽은 쪽지가 있으면 오른쪽 아래에 뜬다. 다 읽으면 사라진다.
     메인·서브 어디서나 떠야 해서 두 화면이 모두 읽는 이 파일에 둔다.
   ========================================================================== */
#memo-toast{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  display:none; align-items:center; gap:13px;
  min-width:330px; max-width:min(92vw,430px); padding:14px 16px;
  background:linear-gradient(180deg, rgba(38,14,80,.97) 0%, rgba(12,4,28,.97) 100%);
  border:1px solid rgba(199,139,255,.6);
  box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 30px rgba(150,58,236,.3);
}
#memo-toast.on{ display:flex; animation:mtin .35s cubic-bezier(.2,.7,.3,1); }
@keyframes mtin{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

#memo-toast .mt-ic{
  flex:none; position:relative; width:36px; height:26px;
  background:linear-gradient(180deg,#c78bff,#7a2cc9);
  box-shadow:0 0 16px rgba(178,104,240,.75);
}
/* 봉투 뚜껑 */
#memo-toast .mt-ic::after{
  content:""; position:absolute; left:3px; top:3px; width:30px; height:15px;
  border-top:2px solid rgba(255,255,255,.85);
  transform:perspective(22px) rotateX(38deg);
}
/* 답변 알림은 색을 달리해 쪽지와 한눈에 구분되게 */
#memo-toast.k-reply{ border-color:rgba(124,240,196,.6);
                     box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 30px rgba(40,200,150,.28); }
#memo-toast.k-reply .mt-ic{ background:linear-gradient(180deg,#8ff3de,#1d8f6b);
                            box-shadow:0 0 16px rgba(80,230,190,.7); }
#memo-toast.k-reply .mt-sub b{ color:#8ff3de; }
#memo-toast.k-reply .mt-go{
  background:linear-gradient(180deg, rgba(46,190,146,.95), rgba(14,96,74,.95));
  border-color:rgba(124,240,196,.7); }
#memo-toast.k-reply .mt-go:hover{ background:linear-gradient(180deg,#3fd9b8,#127a5e); }

#memo-toast .mt-tx{ flex:1 1 auto; min-width:0; }
#memo-toast .mt-tx b{ display:block; font-size:14px; color:#fff;
                      text-shadow:0 0 12px rgba(199,139,255,.6); }
#memo-toast .mt-sub{ display:block; margin-top:4px; font-size:12px; line-height:1.6; color:#c6b8dc; }
#memo-toast .mt-sub b{ display:inline; font-size:12px; color:#ffd98a; text-shadow:none; }

#memo-toast .mt-go{
  flex:none; padding:9px 14px; font-size:12.5px; font-weight:bold; color:#fff;
  background:linear-gradient(180deg, rgba(168,72,244,.92), rgba(84,24,158,.95));
  border:1px solid rgba(199,139,255,.7);
}
#memo-toast .mt-go:hover{ background:linear-gradient(180deg, rgba(190,96,255,1), rgba(102,32,186,1)); }
#memo-toast .mt-x{
  flex:none; width:24px; height:24px; padding:0; cursor:pointer;
  font:16px/1 Tahoma,sans-serif; color:#9c8fb4;
  background:transparent; border:1px solid rgba(150,84,210,.4);
}
#memo-toast .mt-x:hover{ color:#fff; border-color:rgba(199,139,255,.8); }

@media (max-width:640px){
  #memo-toast{ right:10px; left:10px; bottom:10px; min-width:0; max-width:none;
               flex-wrap:wrap; padding-right:40px; }
  #memo-toast .mt-go{ width:100%; text-align:center; }
  /* 닫기는 오른쪽 위 구석에 — 아래로 떨어지면 자리만 먹는다 */
  #memo-toast .mt-x{ position:absolute; right:10px; top:10px; }
}

/* 머리말 쪽지함 옆 안 읽은 개수 */
#hd-util .hu-memo{ position:relative; }
#hd-util .hu-memo #memo-n{
  display:inline-block; margin-left:5px; padding:0 6px; font-style:normal;
  font:bold 11px/17px Tahoma,sans-serif; color:#fff;
  background:rgba(206,44,86,.9); box-shadow:0 0 10px rgba(230,60,100,.6);
}

/* 성을 차지한 길드가 아직 없을 때 — 왕관도 글씨도 한 톤 죽인다 */
.sb-lord.none .sb-crown, .lord.none img{ opacity:.42; filter:grayscale(.55); }
.sb-lord.none strong.empty, .lord.none strong.empty{ color:#9c8fb4; text-shadow:none; }

/* 길드 마크 */
.rb-guild .gmk{ flex:none; width:26px; height:26px; image-rendering:pixelated;
                border:1px solid rgba(150,84,210,.35); background:rgba(0,0,0,.45); }

.gpair{ display:flex; align-items:stretch; gap:10px; }
.gpair > .panel{ flex:1 1 0; min-width:0; }

#grid .list li.empty{ flex:1 1 auto; display:flex; align-items:center;
                      justify-content:center; padding:10px 6px; }

/* PK 현황 : 줄이 몇 개 없을 때 사이가 벌어지지 않게 위에서부터 채운다 */
#grid .p-pk .p-body{ justify-content:flex-start; }
#grid .p-pk .blk-lbl{ flex:0 0 auto; margin-bottom:3px; }
#grid .p-pk .pk{ flex:0 0 auto; }
#grid .p-pk .pk > li{ flex:0 0 auto; padding:5px 6px; }

/* ==========================================================================
   서브페이지
     옆줄을 없앴다. 본문이 화면을 통째로 쓰고,
     옆줄에 있던 상자들은 맨 위 가로 띠와 본문 아래 가로 덱으로 나뉜다.
   ========================================================================== */
/* 옆줄(사이드바) 상자만 — 본문은 건드리지 않는다.
   목록 줄이 남는 높이를 나눠 먹어 상자 안이 비지 않게 한다. */
#sleft .glist,  #sleft .pk,  #sleft .cashlist,  #sleft .gmlist,
#sleft .hist,   #sleft .bosslog,
#saside .glist, #saside .pk, #saside .cashlist, #saside .gmlist,
#saside .hist,  #saside .bosslog{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
#sleft .glist > li,  #sleft .pk > li,  #sleft .cashlist > li,
#sleft .gmlist > li, #sleft .hist > li, #sleft .bosslog > li,
#saside .glist > li, #saside .pk > li, #saside .cashlist > li,
#saside .gmlist > li, #saside .hist > li, #saside .bosslog > li{ flex:1 0 auto; }

/* ---------- 맨 위 가로 띠 ---------- */
/* 아래 간격은 #app 의 gap(10px)이 준다. 여기서 margin 을 또 주면 이 줄만 20px 로 벌어진다 */
#sstrip{
  position:relative; overflow:hidden;
  display:flex; align-items:stretch; margin-bottom:0;
  border:9px solid transparent;
  border-image:url(../img/frame.png) 16 stretch;
  background:
    radial-gradient(80% 190% at 18% 50%, rgba(150,70,230,.26) 0%, rgba(150,70,230,0) 62%),
    linear-gradient(90deg, rgba(26,9,56,.94) 0%, rgba(8,2,20,.94) 72%) no-repeat center;
  background-clip:border-box; background-origin:border-box;
  background-size:calc(100% - 9px) calc(100% - 9px);
}
.ss-lord{ flex:0 0 auto; display:flex; align-items:center; gap:10px;
          padding:8px 20px 8px 14px; text-decoration:none;
          border-right:1px solid rgba(150,84,210,.28); }
.ss-lord img{ flex:none; height:38px; width:auto;
              filter:drop-shadow(0 0 12px rgba(255,190,90,.5)); }
.ss-who{ min-width:0; }
.ss-who em{ display:block; font-style:normal; font-size:11px; color:#a99cc0; }
.ss-who b{ display:block; font:bold 17px/1.2 "Malgun Gothic",sans-serif; color:#fff;
           text-shadow:0 0 14px rgba(178,88,255,.9);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-lord:hover .ss-who b{ color:#ffe6b8; }

.ss-clock{ flex:1 1 auto; min-width:0; display:flex; align-items:center;
           justify-content:center; gap:12px; padding:6px 16px; }
.ss-clock em{ font-style:normal; font-size:12px; letter-spacing:.08em; color:#b18ede; }
.ss-clock .clock{ display:flex; align-items:baseline; gap:2px; }
.ss-clock .clock b{ font:bold 26px/1 Tahoma,sans-serif; color:#fff;
                    text-shadow:0 0 16px rgba(178,88,255,1); }
.ss-clock .clock u{ margin:0 8px 0 2px; text-decoration:none;
                    font:bold 11px/1 "Malgun Gothic",sans-serif; color:#9c8fb4; }
.ss-clock .clock u:last-of-type{ margin-right:0; }

.ss-spec{ flex:0 0 auto; display:flex; align-self:center; gap:1px; margin:7px 12px 7px 0;
          background:rgba(150,84,210,.18); border:1px solid rgba(150,84,210,.26); }
.ss-spec li{ display:flex; flex-direction:column; gap:1px; padding:4px 13px;
             background:rgba(8,2,20,.7); min-width:86px; }
.ss-spec em{ font-style:normal; font-size:11px; color:#a99cc0; white-space:nowrap; }
.ss-spec b{ font:bold 13.5px/1.1 Tahoma,"Malgun Gothic",sans-serif; color:#e8d9ff;
            white-space:nowrap; }

@media (max-width:1280px){
  #sstrip{ flex-wrap:wrap; }
  .ss-lord{ flex:1 1 100%; border-right:0; border-bottom:1px solid rgba(150,84,210,.28); }
  .ss-spec{ margin:7px 12px; }
}
@media (max-width:900px){
  .ss-spec{ flex-wrap:wrap; }
  #sdeck > .panel{ flex:1 1 100%; }
}

/* ==========================================================================
   좁은 화면
   ========================================================================== */
@media (max-width:1500px){
  .sb-spec{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rb-chars li.rb-1{ flex:1.6 1 0; }
  .rb-guild{ max-width:210px; }
}
@media (max-width:1280px){
  #siegebar{ flex-wrap:wrap; }
  .sb-lord{ flex:1 1 100%; border-right:0; border-bottom:1px solid rgba(150,84,210,.28); }
  .sb-clock{ flex:1 1 auto; }
  #grid{ flex-wrap:wrap; }
  #grid .gcol:nth-child(1){ flex:1 1 320px; }
  #grid .gcol:nth-child(2){ flex:2 1 430px; }
  #grid .gcol:nth-child(3){ flex:1 1 300px; }
}
@media (max-width:1100px){
  #rband{ flex-wrap:wrap; }
  #rband .rb-head{ flex:1 0 100%; flex-direction:row; align-items:center;
                   margin-right:-4.5px; padding:4px 12px; background-size:100% 36px; }
  .rb-guild{ display:none; }
}
@media (max-width:900px){
  /* 공성전 띠와 랭킹 띠를 가로로 붙여 두면 폭이 좁아 세로 막대처럼 짜부라진다 */
  #battle{ flex-direction:column; }
  #battle > #siegebar,
  #battle > #rband{ flex:0 0 auto; width:100%; max-width:none; }

  #grid{ flex-direction:column; }
  #grid .gcol,
  #grid .gcol:nth-child(1),
  #grid .gcol:nth-child(2),
  #grid .gcol:nth-child(3){ flex:0 0 auto; width:100%; }
  /* 세로로 쌓을 때는 "남는 높이 나눠 갖기"(flex:1 1 0)를 풀어야 한다.
     안 그러면 기준 높이가 0 이라 상자가 납작하게 눌려 버린다. */
  .gpair{ flex-direction:column; }
  .gpair > .panel{ width:100%; }
  #grid .gcol > .panel,
  #grid .gpair > .panel,
  #grid .gcol > .gpair{ flex:0 0 auto; min-height:0; }
  .rb-chars{ flex-wrap:wrap; }
  .rb-chars li,
  .rb-chars li.rb-1,
  .rb-chars li.rb-2,
  .rb-chars li.rb-3{ flex:1 1 220px; }
  .sb-spec{ grid-template-columns:repeat(3,minmax(0,1fr)); margin:8px 12px; }
}

/* 손전화 : 한 줄에 하나씩, 높이는 내용만큼만.
   가로로 삐져나가는 것이 하나라도 있으면 화면 전체가 옆으로 밀려 잘린다. */
@media (max-width:640px){
  html, body{ overflow-x:hidden; }
  #app{ height:auto; max-width:100%; padding-left:6px; padding-right:6px; }

  #battle .sb-spec{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* 랭킹 : 세로 방향으로 쌓이므로 wrap 을 두면 옆 칸으로 넘어가 버린다 */
  .rb-chars{ flex-wrap:nowrap; }
  .rb-chars li,
  .rb-chars li.rb-1,
  .rb-chars li.rb-2,
  .rb-chars li.rb-3{ flex:0 0 auto; width:100%; padding:6px 10px; }
  .rb-md{ height:26px; }
  .rb-1 .rb-md{ height:30px; }
  .rb-nm{ font-size:13.5px; }
  .rb-1 .rb-nm{ font-size:15px; }
  .rb-kv{ flex-basis:52px; }
  .rb-lv{ flex-basis:120px; }

  /* 옆 그림은 접는다 — 좁은 화면에서는 글이 먼저다 */
  .p-cut, .p-cut.natural{ display:none; }

  /* 빠른 서비스 : 제목을 위로 올리고 단추는 두 칸씩 */
  #qserv{ height:auto; flex-direction:column; align-items:stretch; gap:8px; padding:10px; }
  #qserv .qs-ttl{ align-self:center; }
  #qserv li{ flex:1 1 calc(50% - 3px); }

  /* 로그인 · 운영진 상자 안의 줄들도 넘치지 않게 */
  .li-stat{ flex-wrap:wrap; }
  .li-stat > li{ flex:1 1 0; min-width:0; }
  .li-quick{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gmlist li{ flex-wrap:wrap; }

  /* 그림이 제 크기를 고집하면 그만큼 화면이 옆으로 밀린다 */
  #qserv img, .gmlist img, .li-stat img{ max-width:100%; }
  #grid .panel, #battle > section, #qserv{ max-width:100%; }
}

/* ==========================================================================
   LIVE 전광판 · 기록이 없을 때의 대기 화면
     회색 한 줄만 두면 죽은 줄처럼 보인다.
     · LIVE 점은 계속 파동을 내고
     · 빛줄기가 한 번씩 왼쪽에서 오른쪽으로 훑고
     · 대기 문구 · 다음 공성전 · 오픈 예정 · 접속 인원이 번갈아 올라온다
   ========================================================================== */
#gtick.gt-wait .gt-lb{ color:#8ff3de; border-color:rgba(60,230,190,.42); background:rgba(10,40,36,.5); }
#gtick.gt-wait .gt-lb i{ background:#3fd9b8; box-shadow:0 0 8px rgba(60,230,190,.9); }
#gtick.gt-wait .gt-lb i::after{ animation:gtwave 2.6s ease-out infinite; opacity:1; }

/* 훑고 지나가는 빛줄기 */
.gt-sweep{
  position:absolute; top:0; bottom:0; left:-30%; width:30%; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(178,104,240,0), rgba(178,104,240,.18) 50%, rgba(178,104,240,0));
  animation:gtsweep 5.5s ease-in-out infinite;
}
@keyframes gtsweep{ 0%{ left:-30%; } 55%,100%{ left:100%; } }

/* 번갈아 올라오는 문구 */
.gt-wl{ position:relative; height:100%; margin:0; padding:0; list-style:none; }
.gt-wl li{
  position:absolute; left:0; right:0; top:0; bottom:0;
  display:flex; align-items:center; gap:10px; padding:0 18px;
  font-size:13px; color:#cdbee4; white-space:nowrap; pointer-events:none;
  opacity:0; transform:translateY(9px);
  transition:opacity .5s ease, transform .5s ease;
}
.gt-wl li.on { opacity:1; transform:translateY(0); }
.gt-wl li.out{ opacity:0; transform:translateY(-9px); }
.gt-wl li > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.gt-wl li b{
  flex:none; padding:3px 8px;
  font:bold 10.5px/1 "Malgun Gothic",Tahoma,sans-serif; letter-spacing:.06em; color:#fff;
  background:rgba(120,52,205,.55); border:1px solid rgba(178,104,240,.55);
}
.gt-wl li.w-siege  b{ background:rgba(198,140,34,.72); border-color:rgba(255,208,138,.65); }
.gt-wl li.w-open   b{ background:rgba(20,120,100,.72); border-color:rgba(90,220,190,.6);  }
.gt-wl li.w-online b{ background:rgba(206,44,86,.72);  border-color:rgba(226,84,120,.6);  }

/* 「기다리는 중···」 점 세 개가 차례로 밝아진다 */
.gt-dots s{ text-decoration:none; opacity:.2; animation:gtdot 1.4s infinite; }
.gt-dots s:nth-child(2){ animation-delay:.2s; }
.gt-dots s:nth-child(3){ animation-delay:.4s; }
@keyframes gtdot{ 0%,60%,100%{ opacity:.2; } 30%{ opacity:1; } }

@media (max-width:640px){
  .gt-wl li{ padding:0 12px; font-size:12px; gap:8px; }
}