/* 랭킹 전용 레이아웃 — 왼쪽 메뉴 + 표. 공통 규칙(site.css)과 같은 색, 옛 엔진 호환 문법만 사용 */
.rk { display: flex; align-items: flex-start; }
.rk__side { width: 200px; flex: 0 0 200px; margin-right: 28px; position: -webkit-sticky; position: sticky; top: 76px;
  background: #121827; border: 1px solid rgba(150, 175, 255, .14); border-radius: 12px; padding: 14px 10px; }
.rk__label { color: #dfc683; font-size: .75rem; letter-spacing: .2em; margin: 6px 8px 8px; }
.rk__label + .rk__link { margin-top: 0; }
.rk__link { display: block; padding: 9px 12px; border-radius: 8px; color: #c9d0de; text-decoration: none; font-weight: 700; font-size: .95rem; }
.rk__link:hover { background: #182033; color: #fff; }
.rk__link.on { background: rgba(73, 184, 255, .12); color: #49b8ff; }
.rk__side .rk__label:not(:first-child) { margin-top: 18px; }
.rk__main { flex: 1; min-width: 0; }
.rk__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.rk__head h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 2.2rem; margin: 0; }
.rk__time { color: #98a2b8; font-size: .85rem; margin: 6px 0 0; }
.rk__search { display: flex; align-items: center; }
.rk__search input { width: 200px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(150, 175, 255, .14); background: #0a0d15; color: #e8ecf5; font: inherit; margin-right: 8px; }
.rk__tabs, .rk__pages { display: flex; flex-wrap: wrap; border-bottom: 1px solid rgba(150, 175, 255, .14); margin-bottom: 14px; }
.rk__pages { border: 0; margin: 16px 0 0; }
.rk__tab { padding: 10px 16px; color: #98a2b8; text-decoration: none; font-weight: 700; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rk__tab:hover { color: #fff; }
.rk__tab.on { color: #49b8ff; border-bottom-color: #49b8ff; }
.rk__filter { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.rk__filter > * { margin: 0 8px 8px 0; }
.rk__filter select { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(150, 175, 255, .14); background: #0a0d15; color: #e8ecf5; font: inherit; }
.rk__h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.5rem; margin: 32px 0 12px; }

/* 종족 탭 — 천족·마족 따로 */
.rk__race { display: flex; margin-bottom: 16px; }
.rk__race-tab { flex: 1; text-align: center; padding: 12px 0; font-weight: 800; font-size: 1.05rem; text-decoration: none; color: #98a2b8;
  background: #121827; border: 1px solid rgba(150, 175, 255, .14); }
.rk__race-tab:first-child { border-radius: 10px 0 0 10px; }
.rk__race-tab:last-child { border-radius: 0 10px 10px 0; border-left: 0; }
.rk__race-tab--elyos.on { color: #fff; background: rgba(73, 184, 255, .28); border-color: rgba(73, 184, 255, .6); }
.rk__race-tab--asmodians.on { color: #fff; background: rgba(190, 110, 255, .28); border-color: rgba(190, 110, 255, .6); }

/* 표 */
.rt { width: 100%; border-collapse: collapse; background: #121827; border: 1px solid rgba(150, 175, 255, .14); border-radius: 10px; overflow: hidden; }
.rt th, .rt td { padding: 11px 14px; border-bottom: 1px solid rgba(150, 175, 255, .1); text-align: left; vertical-align: middle; }
.rt th { color: #98a2b8; font-size: .82rem; font-weight: 700; background: #0f1422; }
.rt tbody tr:hover { background: #182033; }
.rt__no { width: 64px; text-align: center; }
.rt__num { text-align: right; white-space: nowrap; }
.rt td.on, .rt th.on { color: #49b8ff; font-weight: 700; }
.rt__name { color: #e8ecf5; font-weight: 700; text-decoration: none; }
a.rt__name:hover { color: #49b8ff; }
.rt__sub { display: none; color: #98a2b8; font-size: .8rem; margin-top: 2px; }
.rt--plain td { color: #e8ecf5; }
.medal { display: inline-block; text-align: center; min-width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-weight: 800; color: #98a2b8; }
.medal--1 { background: rgba(223, 198, 131, .2); color: #dfc683; }
.medal--2 { background: rgba(200, 210, 225, .16); color: #d6dce8; }
.medal--3 { background: rgba(205, 140, 90, .18); color: #e0a070; }
.race { display: inline-block; font-size: .75rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.race--elyos { background: rgba(73, 184, 255, .15); color: #6cc6ff; }
.race--asmodians { background: rgba(190, 110, 255, .15); color: #c890ff; }
.race--balaur { background: rgba(62, 207, 142, .15); color: #3ecf8e; }
h3.race { font-size: 1rem; margin: 0 0 12px; padding: 3px 12px; }

/* 요새 카드 */
.fort { display: flex; flex-wrap: wrap; margin: 0 -7px; }
.fort__card { width: calc(25% - 14px); margin: 0 7px 14px; padding: 18px; background: #121827; border: 1px solid rgba(150, 175, 255, .14); border-top: 3px solid #3ecf8e; border-radius: 10px; }
.fort__card--elyos { border-top-color: #49b8ff; }
.fort__card--asmodians { border-top-color: #be6eff; }
.fort__region { color: #98a2b8; font-size: .8rem; margin: 0; }
.fort__name { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.3rem; margin: 4px 0 6px; }
.fort__owner { font-weight: 700; margin: 0 0 12px; }
.fort__card--elyos .fort__owner { color: #6cc6ff; }
.fort__card--asmodians .fort__owner { color: #c890ff; }
.fort__card--balaur .fort__owner { color: #3ecf8e; }
.fort__info { margin: 0; }
.fort__info > div { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid rgba(150, 175, 255, .1); font-size: .9rem; }
.fort__info dt { color: #98a2b8; }
.fort__info dd { margin: 0; }

/* 종족 현황 */
.vs__row { margin-bottom: 18px; }
.vs__label { display: block; color: #98a2b8; font-size: .85rem; margin-bottom: 6px; }
.vs__bar { display: flex; height: 40px; border-radius: 8px; overflow: hidden; background: rgba(190, 110, 255, .35); font-weight: 700; font-size: .9rem; }
.vs__e { display: flex; align-items: center; padding: 0 12px; background: rgba(73, 184, 255, .45); white-space: nowrap; }
.vs__a { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; white-space: nowrap; }
.dist { display: flex; }
.dist__col { width: 50%; padding-right: 24px; }
.dist__row { display: flex; align-items: center; padding: 5px 0; font-size: .9rem; }
.dist__row > span:first-child { width: 64px; color: #c9d0de; }
.dist__bar { flex: 1; height: 10px; background: #182033; border-radius: 5px; overflow: hidden; margin: 0 10px; }
.dist__bar i { display: block; height: 100%; background: #49b8ff; }
.dist__pct { width: 40px; text-align: right; color: #98a2b8; }

/* 명예의 전당 · 캐릭터 */
.hall, .pf__cards { display: flex; flex-wrap: wrap; margin: 0 -7px; }
.hall__card { width: calc(33.333% - 14px); margin: 0 7px 14px; padding: 20px; background: #121827; border: 1px solid rgba(150, 175, 255, .14); border-top: 3px solid #dfc683; border-radius: 10px; }
.hall__label { color: #98a2b8; font-size: .85rem; margin: 0 0 8px; }
.hall__value { font-family: Georgia, "Times New Roman", serif; font-size: 1.9rem; color: #f2f4fa; margin: 0 0 8px; }
.hall__who { margin: 0; font-weight: 700; }
.hall__who a { color: #e8ecf5; text-decoration: none; }
.hall__who a:hover { color: #49b8ff; }
.pf__head { margin-bottom: 18px; }
.pf__name { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 2rem; margin: 0 0 6px; }
.pf__head p { color: #c9d0de; margin: 0; }
.pf__head .race { margin-left: 0; margin-right: 6px; }
.coming h1 { margin-top: 0; }
.w0 { width: 0%; }
.w5 { width: 5%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w50 { width: 50%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w90 { width: 90%; }
.w95 { width: 95%; }
.w100 { width: 100%; }

@media (max-width: 900px) {
  .rk { display: block; }
  .rk__side { position: static; width: auto; margin: 0 0 18px; padding: 8px; display: flex; flex-wrap: wrap; }
  .rk__label { display: none; }
  .rk__link { margin: 0 4px 4px 0; padding: 8px 12px; }
  .fort__card { width: calc(50% - 14px); }
  .hall__card { width: calc(50% - 14px); }
}
@media (max-width: 720px) {
  .rt__opt { display: none; }
  .rt__sub { display: block; }
  .rt th, .rt td { padding: 10px 8px; }
  .rk__search { width: 100%; margin-top: 12px; }
  .rk__search input { flex: 1; width: auto; }
  .fort__card, .hall__card { width: calc(100% - 14px); }
  .dist { display: block; }
  .dist__col { width: auto; padding: 0 0 18px; }
}

/* 악세 드랍 현황 (10-10) — 집계 카드 3개 + 부위/캐릭터 두 칸 + 최근 기록 표 */
.drops__note { color: #98a2b8; font-size: .9rem; margin: 0 0 16px; }
.drops__cards { display: flex; flex-wrap: wrap; margin: 0 -7px; }
.drops__card { width: calc(33.333% - 14px); margin: 0 7px 14px; padding: 18px 20px; background: #121827; border: 1px solid rgba(150, 175, 255, .14); border-top: 3px solid #dfc683; border-radius: 10px; }
.drops__label { color: #98a2b8; font-size: .85rem; margin: 0 0 6px; }
.drops__value { font-family: Georgia, "Times New Roman", serif; font-size: 2rem; color: #f2f4fa; margin: 0 0 10px; }
.drops__info { margin: 0; }
.drops__info > div { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-top: 1px solid rgba(150, 175, 255, .1); font-size: .9rem; }
.drops__info dt { color: #98a2b8; }
.drops__info dt .race { margin-left: 0; }
.drops__info dd { margin: 0; font-weight: 700; }
.drops__cols { display: flex; margin: 0 -7px; }
.drops__col { width: 50%; padding: 0 7px; min-width: 0; }
.drops__col .rk__h2 { margin-top: 18px; }
.drops__item { color: #e8ecf5; font-weight: 700; }
.drops__item--legion { color: #ffb86c; }
.drops__src { display: inline-block; font-size: .72rem; font-weight: 700; color: #98a2b8; background: rgba(150, 175, 255, .12); padding: 0 6px; border-radius: 999px; vertical-align: 1px; }
#drops-top-empty, #drops-empty { margin-top: 10px; }
@media (max-width: 900px) {
  .drops__card { width: calc(50% - 14px); }
}
@media (max-width: 720px) {
  .drops__card { width: calc(100% - 14px); }
  .drops__cols { display: block; }
  .drops__col { width: auto; }
}

/* 캐릭터 페이지 — 착용 장비창 + 스펙 (10-10). 공식 캐릭터 검색 배치: 왼쪽 방어구 6 · 오른쪽 악세 6 · 아래 무기·날개·샤드 */
.pf__cols { display: flex; align-items: flex-start; margin: 0 -7px; }
.pf__cols > section { width: 50%; padding: 0 7px; min-width: 0; }
.eq__note, .st__saved { color: #98a2b8; font-size: .85rem; margin: 0 0 12px; }
.eq__board { display: flex; justify-content: center; align-items: flex-start; padding: 16px 12px 4px; background: #121827; border: 1px solid rgba(150, 175, 255, .14); border-radius: 10px 10px 0 0; }
.eq__row { display: flex; justify-content: center; padding: 4px 12px 16px; background: #121827; border: 1px solid rgba(150, 175, 255, .14); border-top: 0; border-radius: 0 0 10px 10px; }
.eq__col { display: flex; flex-direction: column; }
.eq__mid { width: 120px; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.eq__mid-race { margin: 0 0 8px; }
.eq__mid-class { font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; color: #e8ecf5; margin: 0; }
.eq__cell { position: relative; width: 56px; height: 56px; margin: 2px; border: 2px solid rgba(150, 175, 255, .25); border-radius: 6px; background: #0a0d15; cursor: default; outline: none; }
.eq__cell[tabindex] { cursor: pointer; }
.eq__cell:hover, .eq__cell:focus, .eq__cell.on { border-color: #fff; }
.eq__icon { position: absolute; left: 6px; top: 6px; width: 40px; height: 40px; }
.eq__cell--empty .eq__icon { opacity: .35; }
.eq__label { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: .62rem; color: #6c778c; letter-spacing: -.02em; }
.eq__cell--twohand .eq__label { color: #98a2b8; }
.eq__ench { position: absolute; right: 2px; bottom: 1px; font-size: .72rem; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.eq__charge { position: absolute; left: 3px; top: 1px; font-size: .68rem; font-weight: 800; color: #dfc683; text-shadow: 0 0 3px #000; }
/* 등급 테두리 — 일반 흰색 · 고급 녹색 · 희귀 파랑 · 유일 노랑 · 전승 주황 · 신화 보라 */
.eq__cell.q-junk, .eq__cell.q-common { border-color: rgba(220, 226, 240, .5); }
.eq__cell.q-rare { border-color: #3ecf8e; }
.eq__cell.q-legend { border-color: #49b8ff; }
.eq__cell.q-unique { border-color: #dfc683; }
.eq__cell.q-epic { border-color: #ffb86c; }
.eq__cell.q-mythic { border-color: #be6eff; }
.eq__tipname.q-junk, .eq__tipname.q-common { color: #e8ecf5; }
.eq__tipname.q-rare { color: #3ecf8e; }
.eq__tipname.q-legend { color: #49b8ff; }
.eq__tipname.q-unique { color: #dfc683; }
.eq__tipname.q-epic { color: #ffb86c; }
.eq__tipname.q-mythic { color: #be6eff; }
/* 툴팁 — 기본 숨김, 마우스 올림·키보드 초점·터치 탭(.on) 때 보임. 칸 오른쪽에 뜨고 화면 오른쪽 열은 왼쪽으로 */
.eq__tip { display: none; position: absolute; z-index: 20; left: 60px; top: -4px; width: 240px; padding: 10px 12px; background: #0f1422; border: 1px solid rgba(150, 175, 255, .35); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .55); text-align: left; cursor: default; }
.eq__cell:hover .eq__tip, .eq__cell:focus .eq__tip, .eq__cell.on .eq__tip { display: block; }
.eq__col:last-child .eq__tip { left: auto; right: 60px; }
.eq__tipname { margin: 0 0 2px; font-weight: 800; font-size: .95rem; }
.eq__tipsub { margin: 0 0 6px; color: #98a2b8; font-size: .78rem; }
.eq__tipinfo { margin: 0; font-size: .82rem; }
.eq__tipinfo > div { display: flex; padding: 3px 0; border-top: 1px solid rgba(150, 175, 255, .1); }
.eq__tipinfo dt { color: #98a2b8; width: 64px; flex: 0 0 64px; }
.eq__tipinfo dd { margin: 0; color: #e8ecf5; word-break: keep-all; }
/* 스펙 */
.st__h2sub { color: #98a2b8; font-size: .8rem; font-family: inherit; margin-left: 8px; }
.st__list { margin: 0; background: #121827; border: 1px solid rgba(150, 175, 255, .14); border-radius: 10px; overflow: hidden; }
.st__row { display: flex; justify-content: space-between; padding: 8px 14px; border-top: 1px solid rgba(150, 175, 255, .1); font-size: .9rem; }
.st__row:first-child { border-top: 0; }
.st__row dt { color: #98a2b8; }
.st__row dd { margin: 0; font-weight: 700; color: #e8ecf5; white-space: nowrap; }
@media (max-width: 900px) {
  .pf__cols { display: block; }
  .pf__cols > section { width: auto; }
  .eq__row .eq__tip { left: auto; right: 60px; }
}
@media (max-width: 520px) {
  .eq__mid { width: 72px; }
  .eq__tip { width: 200px; }
}

/* 캐릭터 검색 메뉴(10-10) */
/* 캐릭터 검색 메뉴 — 공통 .search(웹샵 가로 검색창)와 이름이 겹치지 않게 charsearch 로 분리, 위에서 아래로 쌓음 */
.charsearch{display:block;max-width:560px}
.charsearch__lead{margin:0 0 14px;color:var(--muted,#b7bcc8);line-height:1.6}
.charsearch__form{display:flex;align-items:center}
.charsearch__form input{flex:1;min-width:0;font-size:1.05rem;padding:10px 12px;border-radius:8px;border:1px solid rgba(150,175,255,.14);background:#0a0d15;color:#e8ecf5;font:inherit;margin-right:8px}
.charsearch__form .btn{white-space:nowrap;flex:0 0 auto}
.charsearch__tips{margin:16px 0 0;padding-left:18px;color:var(--muted,#9aa0ad);font-size:.92rem;line-height:1.7}

/* 캐릭터 방명록 (10-13) */
.gb { margin-top: 26px; }
.gb__form { margin: 0 0 14px; padding: 14px 16px; background: #121827; border: 1px solid rgba(150, 175, 255, .14); border-radius: 10px; }
.gb__line { display: flex; align-items: center; }
.gb__who { display: flex; align-items: center; color: #98a2b8; font-size: .85rem; white-space: nowrap; margin-right: 10px; }
.gb__who select, .gb__input { padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(150, 175, 255, .14); background: #0a0d15; color: #e8ecf5; font: inherit; }
.gb__who select { margin-left: 8px; max-width: 160px; }
.gb__input { flex: 1; min-width: 0; margin-right: 10px; }
.gb__line .btn { white-space: nowrap; }
.gb__hint { color: #98a2b8; font-size: .85rem; margin: 10px 0 0; }
.gb > .gb__hint { margin: 0 0 14px; }
.gb__list { list-style: none; margin: 0; padding: 0; background: #121827; border: 1px solid rgba(150, 175, 255, .14); border-radius: 10px; }
.gb__item { padding: 12px 16px; border-top: 1px solid rgba(150, 175, 255, .1); }
.gb__item:first-child { border-top: 0; }
.gb__meta { display: flex; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.gb__when { color: #98a2b8; font-size: .8rem; margin-left: 10px; }
.gb__del { margin: 0 0 0 auto; }
.gb__delbtn { background: none; border: 0; padding: 2px 6px; color: #98a2b8; font: inherit; font-size: .8rem; cursor: pointer; }
.gb__delbtn:hover, .gb__delbtn:focus { color: #ff8f8f; text-decoration: underline; }
.gb__body { margin: 6px 0 0; color: #e8ecf5; word-break: break-all; white-space: pre-wrap; }
.gb__pages { margin-top: 12px; text-align: center; }
.gb__page { display: inline-block; min-width: 30px; padding: 5px 8px; margin: 0 2px; border-radius: 6px; color: #c9d0de; border: 1px solid rgba(150, 175, 255, .14); font-size: .85rem; }
.gb__page.on { background: #dfc683; color: #0a0d15; border-color: #dfc683; font-weight: 700; }
@media (max-width: 720px) {
  .gb__line { display: block; }
  .gb__who { margin: 0 0 8px; }
  .gb__input { display: block; width: 100%; margin: 0 0 8px; box-sizing: border-box; }
}