/* 랭킹 전용 레이아웃 — 왼쪽 메뉴 + 표. 공통 규칙(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; }
}