/**
 * 순위 페이지 전용 — style-new.css 의 다음 공백을 보완한다.
 *
 * 1) 표 마지막 열 `.ranking-compare-btn` 은 기본적으로 `border-radius: var(--action-btn-radius)`(12px)로
 *    같은 행의 `연도`(`.ranking-detail-btn` · 6px)보다 둥글게 보인다.
 *    운영 UI에서 한 줄에 맞춘 작은 필 형태는 `compare-action-pill` / 상세 버튼과 동일한 6px 기준을 따른다.
 *
 * 2) 순위 우측 트레이는 `.compare-tray--compact` 인데, style-new 의 순위 aside 밀도 규칙은
 *    `.compare-tray:not(.compare-tray--compact)` 에만 있어 접기형이 기본 `.compare-tray` 패딩을 타기 쉽다.
 *    `style-new.css` 8757~8852 구간과 동일 수치를 compact + collapsible 에 적용한다.
 */

/* ─── 순위 표·모바일 flex 액션 열: 연도 버튼(compare-action-pill)과 동일 외곽 — size 공통, 색만 cta / neutral ─── */
.ranking-page .ranking-table .ranking-action-cell-btn,
.ranking-page .ranking-mobile-flex .ranking-action-cell-btn,
.ranking-page .ranking-mobile-cards .ranking-action-cell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  max-width: 100%;
  height: 26px;
  min-height: 26px;
  margin: 0;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  border-radius: 6px;
  white-space: nowrap;
  vertical-align: middle;
}

.ranking-page .ranking-action-cell-btn .ranking-detail-btn__label {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ─── 표: 비교 버튼 radius(구버튼·보조). `.ranking-action-cell-btn` 가 있으면 위 블록이 우선 ─── */
.ranking-page .ranking-table .ranking-compare-btn,
.ranking-page .ranking-mobile-cards .ranking-compare-btn,
.ranking-page .ranking-mobile-flex .ranking-compare-btn {
  border-radius: 6px;
}

/* ─── PC: 순위 aside + 접기형 compact 트레이 — style-new 비-compact 순위 블록과 동일 밀도 ─── */
@media (min-width: 901px) {
  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact {
    width: 260px;
    max-width: 100%;
    padding: 8px 10px;
    font-size: 12px;
    border-radius: 8px;
    box-sizing: border-box;
  }

  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-tray-header--toggle {
    margin-bottom: 4px;
    padding-bottom: 4px;
  }

  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-tray-title {
    font-size: 13px;
  }

  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-tray-count {
    font-size: 11px;
  }

  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-tray-list {
    margin: 0 0 4px;
    padding: 0;
  }

  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-tray-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 3px 0;
    min-height: 30px;
    box-sizing: border-box;
  }

  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-tray-name {
    font-size: 12px;
    line-height: 1.25;
    align-self: center;
  }

  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-tray-actions {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
  }

  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-tray-hint {
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.35;
  }

  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-btn-group {
    margin-top: 4px;
  }

  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-btn-group button {
    height: 32px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-tray-detail,
  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-tray-yearly {
    height: auto;
    min-height: 26px;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-tray-remove {
    width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* style-new.css 6156~6213: ≥1024px shell 푸터 버튼 — 순위 aside compact 에도 동일 적용 */
@media (min-width: 1024px) {
  .ranking-page .ranking-tray-aside .compare-tray.compare-tray--compact .compare-btn-group button {
    height: 32px;
    min-height: 32px;
    padding: 4px 12px;
    font-size: 13px;
    line-height: 1.18;
  }
}