/* ==========================================================================
   MAPLE REMAKE — 룬 확률표 (runes.html 전용)
   style.css 의 토큰(--sky/--grass/--accent/--line …)만 사용하는 플랫 테마 확장.
   이 파일은 룬 확률표 페이지에서만 로드된다.
   구조: 탭 2개 · 좌측 목록 / 우측 확률표 (몬스터 도감의 dex-split 과 같은 형태)
   ========================================================================== */

.rune-page {
  --fixed-bg: #e9f5e4;
  --fixed-ink: #2c6421;
  --tone-mute-bg: #f2efe8;
  --list-gap: 18px;
  --list-w: 296px;
}

/* 표가 길어 기본(1120px)보다 넓은 폭을 쓴다 — 도감과 동일 */
.rune-page .container {
  width: min(1400px, 100% - 48px);
}

.rune-page .page-body {
  padding: 40px 0 88px;
}

/* ---------- 탭 ---------- */

.rune-tabbar {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  padding: 12px 0;
  margin-bottom: 6px;
  background: var(--sky-light);
}

.rune-tabbar .filter-tabs {
  margin-bottom: 0;
}

.rune-view[hidden] {
  display: none;
}

/* ---------- 좌: 목록 / 우: 확률표 ---------- */

.rune-split {
  display: grid;
  grid-template-columns: var(--list-w) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.rune-list-panel {
  position: sticky;
  top: calc(var(--nav-h) + 66px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--nav-h) - 92px);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.rune-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
  font-size: 0.92rem;
}

.rune-list-head strong {
  font-weight: 900;
}

.rune-list-info {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.rune-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.rune-row {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-left: 4px solid transparent;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}

.rune-row:last-child {
  border-bottom: 0;
}

.rune-row:hover {
  background: #fff8ef;
  border-left-color: var(--accent);
}

.rune-row.is-active {
  background: #fff2e0;
  border-left-color: var(--accent-deep);
}

.rune-row-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rune-row-name {
  font-weight: 700;
  font-size: 0.97rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rune-row-meta {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.79rem;
  font-weight: 700;
}

/* ---------- 상세(확률표) ---------- */

.rune-detail {
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.rune-panel[hidden] {
  display: none;
}

.rune-panel-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}

.rune-panel-head h2 {
  margin: 0;
  font-size: 1.12rem;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.rune-panel-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.7;
}

/* ---------- 표 ---------- */

/* 표마다 제목 — 고정 옵션 표와 랜덤 옵션 표를 갈라 놓는다 */
.rune-table-head {
  padding: 16px 20px 10px;
  border-top: 1px solid var(--line);
}

.rune-detail .rune-table-head:first-of-type {
  border-top: 0;
}

.rune-table-head h3 {
  margin: 0;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rune-table-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.7;
}

.rune-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tone-mute-bg);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.rune-table-wrap {
  overflow-x: auto;
}

.rune-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.91rem;
}

.rune-table th,
.rune-table td {
  padding: 9px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.rune-table thead th {
  background: #ffffff;
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--line);
}

.rune-table .col-p {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rune-table tbody tr:last-child td {
  border-bottom: 0;
}

.rune-table tbody tr:hover {
  background: #fffaf3;
}

/* ---------- 배지 · 각주 ---------- */

.rune-badge {
  flex: none;
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--tone-mute-bg);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
  line-height: 1.5;
}

.rune-badge.job-warrior { background: #fdecec; color: #b3261e; }
.rune-badge.job-mage { background: #eaf0fd; color: #2a4d9b; }
.rune-badge.job-archer { background: var(--fixed-bg); color: var(--fixed-ink); }
.rune-badge.job-thief { background: #f3ecfb; color: #6a3fa0; }
.rune-badge.job-pirate { background: #fff1d8; color: #7c4f24; }

.rune-sub {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.rune-footnote {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  text-align: center;
  line-height: 1.9;
}

/* ---------- 반응형 ---------- */

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

  .rune-list-panel {
    position: static;
    max-height: 320px;
  }
}

@media (max-width: 960px) {
  .rune-page .container {
    width: min(1400px, 100% - 40px);
  }
}

@media (max-width: 600px) {
  .rune-page .container {
    width: min(1400px, 100% - 32px);
  }

  .rune-panel-head,
  .rune-table th,
  .rune-table td {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ---------- 인쇄 (선택한 표만) ---------- */

@media print {
  .site-nav,
  .site-footer,
  .page-hero,
  .rune-tabbar,
  .rune-list-panel {
    display: none !important;
  }

  .rune-page .page-body {
    padding: 0;
  }

  .rune-page .container {
    width: 100%;
  }

  .rune-split {
    display: block;
  }

  .rune-detail {
    border: 0;
    box-shadow: none;
  }

  .rune-table tbody tr {
    break-inside: avoid;
  }
}