/* ==========================================================================
   MAPLE REMAKE — 랭킹 (ranking.html / boss-rank.html)
   style.css 의 토큰만 쓰는 플랫 테마 확장.
   ========================================================================== */

.rk-page .container {
  width: min(880px, 100% - 48px);
}

.rk-page .page-body {
  padding: 36px 0 88px;
}

.rk-sections {
  margin-bottom: 14px;
}

.rk-bosses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.rk-bosses[hidden] {
  display: none;
}

.rk-boss-tab {
  padding: 8px 18px;
  font-size: 0.9rem;
}

.rk-boss-tab.is-active {
  background: var(--grass-deep);
  border-color: var(--grass-deep);
}

.rk-panel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.rk-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.rk-panel-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.rk-info {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.rk-refresh {
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.rk-refresh:hover {
  border-color: var(--accent-deep);
  color: var(--accent-deep);
}

/* 한 줄 = 순위 | 캐릭터 | (레벨) | 기록 */
.rk-head,
.rk-row {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
}

.rk-head.is-boss,
.rk-list.is-boss .rk-row {
  grid-template-columns: 52px minmax(0, 1fr) 64px 132px;
}

.rk-head.is-exp,
.rk-list.is-exp .rk-row {
  grid-template-columns: 52px minmax(0, 1fr) 132px;
}

.rk-head {
  padding-top: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.rk-head .rk-score,
.rk-row .rk-score {
  text-align: right;
}

.rk-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rk-row + .rk-row {
  border-top: 1px solid var(--line);
}

.rk-row.is-top {
  background: #fffaf0;
}

.rk-rank {
  font-weight: 900;
  text-align: center;
}

.rk-row .rk-rank {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border-radius: 50%;
  color: var(--muted);
}

.rk-rank.is-top { color: #ffffff; }
.rk-rank.is-top1 { background: #e0a100; }
.rk-rank.is-top2 { background: #8f9aa6; }
.rk-rank.is-top3 { background: #b9703a; }

.rk-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rk-nick {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.rk-job {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f2efe8;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.rk-job.job-warrior { background: #fdecec; color: #b3261e; }
.rk-job.job-mage { background: #e6f4fd; color: #1a6389; }
.rk-job.job-archer { background: #e9f5e4; color: #2c6421; }
.rk-job.job-thief { background: #f3ecfb; color: #6a3fa0; }
.rk-job.job-pirate { background: #fff1d8; color: #7c4f24; }

.rk-level {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.rk-score strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.rk-score small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.rk-note {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

.rk-note.is-error {
  color: var(--danger);
  font-weight: 700;
}

.rk-sk {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #f0ece2 25%, #faf8f2 50%, #f0ece2 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

.rk-row.is-skeleton { grid-template-columns: 52px minmax(0, 1fr) 96px !important; }
.rk-sk-rank { width: 26px; margin: 0 auto; }
.rk-sk-name { width: 46%; }

.rk-foot {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  text-align: center;
}

/* ---------- 보스 랭킹 단독 화면 (게임 클라이언트 웹 UI) ---------- */

/* html 배경(하늘색)이 내용 아래로 비치지 않게 문서 전체를 흰색으로.
   게임 웹뷰가 :has() 를 지원하지 않으므로 <html> 에 직접 붙인 클래스로 지정한다. */
html.rk-embed-root,
body.rk-embed {
  background: #ffffff;
}

.rk-embed .rk-page .container {
  width: min(760px, 100% - 24px);
}

.rk-embed .rk-page {
  padding: 14px 0 20px;
}

.rk-embed .rk-bosses {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -12px 12px;
  padding: 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 600px) {
  .rk-page .container {
    width: min(880px, 100% - 24px);
  }

  .rk-head,
  .rk-row {
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .rk-head.is-boss,
  .rk-list.is-boss .rk-row {
    grid-template-columns: 38px minmax(0, 1fr) 104px;
  }

  .rk-head.is-exp,
  .rk-list.is-exp .rk-row {
    grid-template-columns: 38px minmax(0, 1fr) 104px;
  }

  /* 좁은 화면에서는 레벨 열을 접는다 (직업 배지는 유지) */
  .rk-head.is-boss .rk-level,
  .rk-list.is-boss .rk-level {
    display: none;
  }

  .rk-player {
    flex-wrap: wrap;
    gap: 2px 6px;
  }

  .rk-boss-tab {
    padding: 7px 12px;
    font-size: 0.84rem;
  }

  .rk-panel-head {
    padding: 12px;
  }
}

/* 단독 화면은 보스 탭 + 표만 — 제목·기준 시각·새로고침 버튼·카드 테두리를 모두 숨긴다 */
.rk-embed .rk-panel-head {
  display: none;
}

.rk-embed .rk-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.rk-embed .rk-page {
  padding: 0 0 12px;
}

.rk-embed .rk-bosses {
  margin-bottom: 0;
}