/* 연산왕 명예의 전당 — 데스크톱 우선. 토큰은 assets/css/c2m_ds.css 를 먼저 로드해야 한다.
   골격(배경·본문폭·히어로)은 king_list 와 같은 문법을 따른다 — 두 페이지를 오갈 때
   같은 곳에 있다는 느낌이 유지되어야 한다. */

/* 메달 색(--medal-N)은 c2m_ds.css 가 갖는다. 이 페이지는 그걸 먼저 로드하므로 그대로 쓴다.
   예전엔 여기에 같은 값을 다시 선언했는데, c2m_ds.css 가 **먼저** 실리는 탓에 로컬 선언이
   토큰을 덮어서 "토큰을 바꿔도 이 페이지만 안 바뀌는" 상태였다 — 토큰이 막으려던 바로 그것. */

body.king-rank {
  margin: 0;
  background: var(--c-bg-king);
  background-attachment: fixed;
  min-height: 100vh;
}

.kr2-main {
  width: var(--page-w);
  max-width: calc(100% - 40px);
  margin: 0 auto;
  padding: var(--sp-8) 0 96px;   /* 코어연산 학습(.ll-v2-main)과 같은 32px */
  box-sizing: border-box;
}

/* ── 히어로 ───────────────────────────────────────────────────
   코어연산 학습(.ll-hero)의 실측값을 그대로 따른다: 마스코트 높이 210px, 글·마스코트 모두
   아래 정렬, margin-bottom 0. 목록 페이지(.kl-hero)와 같은 값이다.
   ⚠ 마스코트를 키우면 글이 그만큼 아래로 밀려 왼쪽이 비어 보인다. 높이 210px 유지. */
.kr2-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-10);
  margin-bottom: 0;
}
.kr2-hero__text { flex: 1 1 auto; min-width: 0; padding-bottom: var(--sp-8); }
/* 제목 + 돌아가는 길. 목록 페이지의 「명예의 전당 보기」와 같은 자리·같은 모양이다.
   베이스라인이 아니라 세로 가운데로 맞춘다 — 알약은 글자가 아니라 덩어리라
   베이스라인에 걸면 제목 아래로 처져 보인다. */
.kr2-hero__titlerow {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-4);
}
.kr2-hero__title {
  margin: 0;
  font-family: 'HGAlmond60g', sans-serif;
  font-size: 56px; line-height: 1.1; color: var(--c-text);
}
.kr2-hero__desc {
  margin: var(--sp-2) 0 0;
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 18px; line-height: 26px; letter-spacing: -0.45px;
  color: var(--c-gray);
}
/* 마스코트 — 히어로 오른쪽. width/height 속성이 있어 로드 전에도 자리를 잡는다(레이아웃 이동 방지).
   display:block 이라야 인라인 이미지 아래 여백이 안 생겨 패널에 딱 붙는다.
   장식이므로 좁은 화면에서는 숨긴다: 폰에서 세로를 먹으면 정작 내용이 밀린다. */
.kr2-hero__mascot {
  flex: none;
  display: block;
  height: 210px;
  width: auto;
}

.kr2-hero__cta {
  flex: none;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.7);
  color: var(--c-gray); text-decoration: none;
  font-family: 'Pretendard-Medium', sans-serif; font-size: 14px;
}
.kr2-hero__cta:hover { background: #fff; color: var(--c-text); }

/* ── 흰 패널 ──────────────────────────────────────────────────
   목록 페이지(.kl-panel)·코어연산 학습(.ll-panel)과 같은 껍데기. */
.kr2-panel {
  padding: var(--sp-8) var(--sp-12) var(--sp-12);
  border-radius: var(--r-hero);
  background: var(--c-white);
  box-shadow: var(--sh-card);
  box-sizing: border-box;
}

/* 순위가 놓이는 면 — 흰 패널 위의 흰 카드·표는 서로 안 보인다. 한 톤 내려 띄운다. */
.kr2-stage {
  padding: var(--sp-6);
  border-radius: var(--r-card);
  background: var(--c-light);
}

/* ── 격자/상세 전환 + 월 셀렉트 + 범위 탭 ─────────────────────────
   패널 맨 위의 도구줄이다. 카드로 만들면 회색 면과 흰 카드가 겹겹이 쌓이므로
   면 없이 밑줄 하나로 구분한다. 코스 셀렉트는 없다 — 상세 화면에서도 코스를
   바꾸려면 격자를 거친다(설계 §6.4, back/now 링크가 그 자리를 대신한다). */
.kr2-pick {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-line2);
}
/* 격자로 돌아가는 길 — 상세 화면에서만 선다(격자 자체에는 "더 위"가 없다). */
.kr2-pick__back {
  flex: none;
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 14px; color: var(--fx-brand);
  text-decoration: none;
}
.kr2-pick__back:hover { text-decoration: underline; }
/* 지금 보고 있는 코스 — 셀렉트가 없으니 정적 텍스트로만 알린다. 좁아지면 잘라낸다
   (탭·도전하기 버튼이 이름표보다 우선이다). */
.kr2-pick__now {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 15px; color: var(--c-text);
}
/* 월 셀렉트 — Task 8 이 격자/상세 공용 진입점으로 옮기며 이 이름을 재사용했는데
   규칙을 안 옮겨 와 브라우저 기본 select(22px, system-ui)로 떨어져 있었다.
   Task 7 이전(59c6a4f6)의 값을 그대로 복원한다 — 임의로 새로 고르지 않는다. */
.kr2-pick__label {
  flex: none;
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 14px; color: var(--c-gray2);
}
.kr2-pick__select {
  flex: 1 1 auto; min-width: 0;
  height: 42px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: #fff;
  font-family: 'Pretendard-Medium', sans-serif;
  font-size: 15px; color: var(--c-text);
}
.kr2-pick__play {
  flex: none;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--fx-brand); color: #fff; text-decoration: none;
  font-family: 'Pretendard-Bold', sans-serif; font-size: 14px;
}
.kr2-pick__play:hover { background: #00827b; color: #fff; }

/* 과거 달 안내 — 순위가 멈춰 보이는 것도 문제지만, 진짜 문제는 이 화면의 도전하기를 누르면
   **이번 달** 기록이 된다는 점이다. 그래서 과거 달에서는 도전하기를 감추고 이 줄을 띄운다. */
.kr2-past { margin: var(--sp-3) 0 0; font-size: 14px; opacity: .8; }
.kr2-past a { margin-left: var(--sp-2); }

/* 이벤트 달 배지 — 결산 후 시상 행사가 붙는 달(3·6·9·12월). 집계는 다른 달과 같다.
   king_list.css 의 .kl-card__pick(「추천」 배지)과 같은 톤 — 토큰(--r-pill)·글꼴(Pretendard-Bold)·
   배경/글자색 짝을 그대로 가져온다. 배경 없는 border-radius 는 아무것도 안 칠해져 배지로 안 보인다. */
.kr2-event { display: inline-block; margin: var(--sp-3) 0 0; padding: var(--sp-1) var(--sp-3);
             border-radius: var(--r-pill); background: var(--fx-warn);
             font-family: 'Pretendard-Bold', sans-serif; font-size: 13px; line-height: 18px; color: #854f00; }

.kr2-tabs { flex: none; display: flex; gap: 4px; }
.kr2-tab {
  height: 42px; padding: 0 var(--sp-5);
  border: 0; border-radius: var(--r-pill);
  background: var(--c-light); color: var(--c-gray2);
  font: inherit;
  font-family: 'Pretendard-Bold', sans-serif; font-size: 14px;
  cursor: pointer;
}
.kr2-tab.is-on { background: var(--fx-brand); color: #fff; }
.kr2-tab:focus-visible { outline: 3px solid var(--fx-brand); outline-offset: 2px; }

/* ── 지난 달 챔피언 ─────────────────────────────────────────── */
/* 위치는 순위표 **아래**다(현재와 자리를 다투지 않게, 시간 순서로도 과거가 뒤). */
.kr2-champ {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-card);
  background: var(--c-light);
}
.kr2-champ__tag {
  flex: none;
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 13px; color: var(--c-gray2);
}
.kr2-champ__name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 15px; color: var(--c-text);
}
.kr2-champ__score {
  flex: none;
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 15px; color: var(--fx-brand);
  font-feature-settings: "tnum";
}

/* ── 시상대 (TOP 3) ──────────────────────────────────────────
   '명예의 전당'인데 1위가 목록의 첫 줄일 뿐이면 이름값을 못 한다.
   DOM 은 1·2·3 순서고 화면에서만 2·1·3 으로 세운다 — 읽는 순서(스크린리더·모바일)는
   등수대로여야 하고, 시상대 모양은 시각적 장치일 뿐이다. */
.kr2-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.kr2-pod {
  flex: 1 1 0;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-item);
  text-align: center;
  min-width: 0;
}
/* 1위가 가장 높고 가운데. 높이 차이가 시상대를 만든다. */
.kr2-pod--1 { order: 2; padding-top: var(--sp-8); padding-bottom: var(--sp-6); box-shadow: var(--sh-card); }
.kr2-pod--2 { order: 1; }
.kr2-pod--3 { order: 3; }

/* 왕관 — 등수 위. 도형은 공유 모듈(assets/js/rank_crown.js)이 그리고 색만 여기서 준다.
   ⚠ 색 클래스는 자리(.kr2-pod--N)가 아니라 **등수(.kr2-crown--N)** 다. 동점이면 두 번째
      자리에도 1위가 오는데, 자리로 칠하면 "1위인데 은관"이 나온다. */
.kr2-crown { width: 22px; height: 22px; margin-bottom: 2px; }
.kr2-pod--1 .kr2-crown { width: 30px; height: 30px; }
.kr2-crown--1 { fill: var(--medal-1); }
.kr2-crown--2 { fill: var(--medal-2); }
.kr2-crown--3 { fill: var(--medal-3); }

.kr2-pod__rank {
  font-family: 'HGAlmond60g', sans-serif;
  font-size: 32px; line-height: 1; color: var(--c-gray2);
}
.kr2-pod--1 .kr2-pod__rank { font-size: 44px; color: var(--medal-1); }
.kr2-pod--2 .kr2-pod__rank { color: var(--medal-2); }
.kr2-pod--3 .kr2-pod__rank { color: var(--medal-3); }

.kr2-pod__name {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: var(--sp-2);
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 16px; color: var(--c-text);
}
.kr2-pod--1 .kr2-pod__name { font-size: 19px; }
.kr2-pod__center {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 12px; color: var(--c-gray2);
}
.kr2-pod__score {
  margin-top: var(--sp-2);
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 20px; color: var(--fx-brand);
  font-feature-settings: "tnum";
}
.kr2-pod--1 .kr2-pod__score { font-size: 26px; }

/* 내 줄은 색이 아니라 테두리로 짚는다 — 메달 색과 겹치지 않게. */
.kr2-pod.is-me { box-shadow: var(--sh-card), inset 0 0 0 2px var(--fx-brand); }

/* ── 시즌 안내 (시상대 아래) ───────────────────────────────────
   순위는 이번 달, 내 기록은 통산이다. 그 차이를 적어두지 않으면
   "내 최고점은 있는데 순위표엔 왜 없지?" 가 된다. 시상대 바로 아래에서 표의 머리말이 된다.
   :empty — 응답이 오기 전과 season_note 가 빈 경우엔 자리를 차지하지 않는다. */
.kr2-season {
  margin: 0 0 var(--sp-4);
  text-align: center;
  font-family: 'Pretendard-Medium', sans-serif;
  font-size: 13px; line-height: 18px; color: var(--c-gray2);
}
.kr2-season:empty { display: none; }

/* ── 순위표 ─────────────────────────────────────────────────── */
.kr2-board {
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-item);
  overflow: hidden;
}
.kr2-board__head,
.kr2-row {
  display: grid;
  grid-template-columns: 72px 1fr 140px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}
.kr2-board__head {
  border-bottom: 1px solid var(--c-line2);
  font-family: 'Pretendard-Medium', sans-serif;
  font-size: 13px; color: var(--c-gray2);
}
.kr2-board__col-score { text-align: right; }

.kr2-row { border-top: 1px solid var(--c-line2); }
.kr2-row:first-child { border-top: 0; }
.kr2-row__rank {
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 18px; color: var(--c-gray2);
  font-feature-settings: "tnum";
}
.kr2-row__name {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 16px; color: var(--c-text);
}
/* 소속 학원은 이름을 밀어내지 않게 작게. 학원 범위에서는 전원 같은 학원이라 서버가 안 준다. */
.kr2-row__name small {
  margin-left: var(--sp-2);
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 12px; color: var(--c-gray2);
}
.kr2-row__score {
  text-align: right;
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 18px; color: var(--c-text);
  font-feature-settings: "tnum";
}

/* 내 줄. 메달 색과 겹치지 않게 연산왕 틸로 짚는다 — 표가 놓인 면이 이미 회색(.kr2-stage)이라
   회색 배경만으로는 "칠해진 줄"로 안 읽힌다. 왼쪽 띠가 스캔할 때 먼저 눈에 걸린다. */
.kr2-row.is-me {
  background: #E8F3F2;
  box-shadow: inset 3px 0 0 var(--fx-brand);
}

.kr2-empty {
  margin: 0;
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
  font-family: 'Pretendard-Medium', sans-serif;
  font-size: 15px; line-height: 22px; color: var(--c-gray2);
}

/* ── 내 순위 (TOP 밖일 때만) ─────────────────────────────────── */
.kr2-me {
  display: grid;
  grid-template-columns: 72px 72px 1fr 140px;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-card);
  background: var(--fx-brand);
  color: #fff;
}
.kr2-me__label {
  font-family: 'Pretendard-Medium', sans-serif;
  font-size: 13px; opacity: .85;
}
.kr2-me__rank {
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 18px; font-feature-settings: "tnum";
}
.kr2-me__name {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Pretendard-Bold', sans-serif; font-size: 16px;
}
.kr2-me__score {
  text-align: right;
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 18px; font-feature-settings: "tnum";
}

.kr2-foot {
  margin: var(--sp-3) 0 0;
  text-align: right;
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 13px; color: var(--c-gray2);
}

/* ── 비로그인 안내 ───────────────────────────────────────────── */
.kr2-guest {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-card);
  background: var(--c-light);
  font-family: 'Pretendard-Medium', sans-serif;
  font-size: 15px; line-height: 22px; color: var(--c-gray);
}
.kr2-guest a {
  margin-left: auto; flex: none;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--fx-brand); color: #fff; text-decoration: none;
  font-family: 'Pretendard-Bold', sans-serif; font-size: 14px;
}
.kr2-guest a:hover { background: #00827b; }

/* ── 좁은 화면 ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .kr2-panel { padding: var(--sp-6) var(--sp-6) var(--sp-10); }
  .kr2-stage { padding: var(--sp-4); }
}
@media (max-width: 860px) {
  /* 마스코트는 장식이다. 폰에서 세로를 먹으면 정작 내용이 밀린다. */
  .kr2-hero__mascot { display: none; }
  .kr2-hero { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .kr2-hero__text { padding-bottom: var(--sp-6); }
  .kr2-hero__titlerow { gap: var(--sp-3); }
  .kr2-hero__title { font-size: 40px; }
  /* 한 줄에 다 넣으면 select 가 눌린다 — 도구줄을 통째로 줄바꿈하고 순서를 명시한다.
     label·select 는 order 를 안 받으면 기본값 0 이라 back·now(1·2) 보다 앞으로 튀어나온다 —
     코스 상세에서 "‹ 전체 코스" 링크보다 월 셀렉트가 먼저 보이는 순서 역전이 이래서 생겼었다. */
  .kr2-pick { flex-wrap: wrap; }
  .kr2-pick__back { order: 1; }
  .kr2-pick__now { order: 2; flex: 1 1 200px; }
  .kr2-pick__label { order: 3; }
  .kr2-pick__select { order: 4; flex: 1 1 200px; }
  .kr2-tabs { order: 5; flex: 1 1 auto; }
  .kr2-tab { flex: 1 1 auto; }
  .kr2-pick__play { order: 6; flex: 1 1 auto; text-align: center; }
  .kr2-guest { flex-wrap: wrap; }
  .kr2-guest a { margin-left: 0; }
}
@media (max-width: 700px) {
  /* 좁으면 시상대가 셋 다 눌린다 — 등수 순서(1·2·3)로 세워 쌓는다. order 를 초기화하면
     DOM 순서가 그대로 화면 순서가 된다. */
  .kr2-podium { flex-direction: column; align-items: stretch; }
  .kr2-pod { max-width: none; flex-direction: row; align-items: baseline; gap: var(--sp-3);
             text-align: left; padding: var(--sp-4) var(--sp-5); }
  .kr2-pod--1, .kr2-pod--2, .kr2-pod--3 { order: 0; padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
  /* 가로로 누우면 왕관이 등수 왼쪽에 선다 — 위아래 여백을 걷고 크기를 맞춘다. */
  .kr2-crown, .kr2-pod--1 .kr2-crown { width: 18px; height: 18px; margin-bottom: 0; align-self: center; flex: none; }
  .kr2-pod__rank, .kr2-pod--1 .kr2-pod__rank { font-size: 24px; width: 40px; flex: none; }
  .kr2-pod__name, .kr2-pod--1 .kr2-pod__name { margin-top: 0; font-size: 16px; flex: 1 1 auto; }
  .kr2-pod__center { display: none; }
  .kr2-pod__score, .kr2-pod--1 .kr2-pod__score { margin-top: 0; font-size: 18px; flex: none; }
}
@media (max-width: 560px) {
  .kr2-panel { padding: var(--sp-5) var(--sp-4) var(--sp-8); border-radius: var(--r-card-lg); }
  .kr2-stage { padding: var(--sp-3); }
  .kr2-board__head, .kr2-row { grid-template-columns: 48px 1fr 96px; padding: var(--sp-3) var(--sp-4); }
  .kr2-me { grid-template-columns: 48px 56px 1fr 96px; padding: var(--sp-3) var(--sp-4); }
  .kr2-row__name, .kr2-me__name { font-size: 15px; }
  .kr2-row__score, .kr2-me__score, .kr2-row__rank, .kr2-me__rank { font-size: 16px; }
  /* 좁으면 학원명이 이름을 밀어낸다 — 이름이 먼저다. */
  .kr2-row__name small { display: none; }
}

/* ── 격자 뷰 ─────────────────────────────────────────────────────────────────
   코스 목록 페이지와 같은 규칙(4열 → 2열 → 1열)을 쓴다. 두 화면을 오갈 때 같은 문법이 보인다. */
.kr2-band { margin-bottom: var(--sp-6); }
.kr2-band__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.kr2-band__name { color: var(--band); font-weight: 700; }
/* king_list.css 의 .kl-band__sub 와 같은 값 — 두 화면을 오갈 때 부제의 톤이 갈리지 않게. */
.kr2-band__sub {
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 15px; line-height: 22px; letter-spacing: -0.375px;
  color: var(--c-gray2);
}

/* ⚠ minmax(0, …) 다. `1fr` 은 `minmax(auto, 1fr)` 이라 트랙이 **내용의 최소 너비 아래로
   못 내려간다** — 줄바꿈 없는 긴 문자열(시상대의 이름·학원명)이 들어오면 그 칸만 넓어지고
   나머지 셋이 쪼그라든다. 안쪽 min-width:0 만으로는 못 막는다(트랙이 먼저 정해진다).
   king_list.css 에 같은 함정에 물린 기록이 있다. */
.kr2-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }

.kr2-card { display: block; background: #fff; border-radius: 12px; padding: var(--sp-4);
            text-decoration: none; color: inherit; }
.kr2-card__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-3); }
/* 코스 번호가 카드의 이름이다(목록 페이지 .kl-card__num 과 같은 역할) — 학년군 색을 그대로 받는다.
   대상 표기($target)는 '6세 상'처럼 항상 짧아 줄바꿈 걱정은 없다. */
.kr2-card__num {
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 15px; color: var(--band, var(--fx-brand));
}
.kr2-card__target {
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 12px; color: var(--c-gray2);
}

/* 축소 시상대 — 마크업은 상세 화면과 **같은 .kr2-pod** 다. 크기만 여기서 줄인다.
   그래야 podHtml() 하나를 두 뷰가 공유한다(king_rank_common.js). */
/* min-height 는 **기록 있는 카드의 시상대 높이와 같아야 한다** — 빈 카드만 쪼그라들면 격자가
   들쭉날쭉해진다. 학원명 줄이 붙으면서 96 → 165 가 됐다(실측). 시상대 구성이 바뀌면 다시 잴 것. */
.kr2-card__podium { gap: var(--sp-1); margin-bottom: var(--sp-3); min-height: 165px; }
/* 2·3위만 줄인다 — 1위(.kr2-pod--1)는 :not() 으로 아예 뺀다. 1위 확대분은 아래 블록이
   담당한다(같은 specificity 로 나중에 실려 이기는 방식이 아니라, 여기서 매칭 자체를
   안 하게 한다). 자세한 이유는 아래 블록 주석. */
.kr2-card .kr2-pod:not(.kr2-pod--1) { padding: var(--sp-2) var(--sp-1); }
.kr2-card .kr2-pod:not(.kr2-pod--1) .kr2-pod__rank { font-size: 16px; }
.kr2-card .kr2-pod:not(.kr2-pod--1) .kr2-pod__name { font-size: 12px; margin-top: 0; }
.kr2-card .kr2-pod:not(.kr2-pod--1) .kr2-pod__score { font-size: 12px; }
/* 학원명 — **상세 화면과 같은 자리**다. 전국 범위에서만 오고(학원 범위는 서버가 null 을 준다)
   격자에서만 감추면 같은 시상대가 두 화면에서 다른 정보를 갖게 된다.
   폭은 이미 안전하다: `.kr2-pod` 에 min-width:0, `.kr2-pod__center` 에 max-width:100% + 말줄임이
   걸려 있어 「수학의뜰_다산하늘 영재교육원」 같은 긴 이름도 칸을 넘기지 않는다. 그 둘 중 하나라도
   빠지면 375px 에서 페이지가 가로로 넘친다(최종 리뷰 실측 422px vs 375px).
   ⚠ 700px 쿼리의 `.kr2-pod__center { display: none }`(상세 화면이 가로로 누울 때 학원명을 버린다)이
     카드에 상속되지 않도록 클래스 둘로 이긴다 — 폰에서도 카드는 세 칸에 학원명을 유지한다. */
.kr2-card .kr2-pod__center {
  /* 칸이 좁다(실측 59px ≈ 5글자). 말줄임 한 줄로는 「픽스처 시…」/「픽스처 옆…」처럼 접두사가
     같은 학원이 구분되지 않아 정보가 되지 못한다. 두 줄까지 풀어 ~10글자를 보인다. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; overflow: hidden;
  /* 「수학의뜰_다산하늘 영재교육원」처럼 밑줄로 이어 붙어 한 낱말이 되는 이름이 실서버에 있다.
     이게 없으면 그 낱말이 안 끊겨 칸을 밀어낸다. */
  overflow-wrap: anywhere;
  font-size: 11px; line-height: 1.25;
  /* **두 줄 자리를 늘 잡는다.** 안 그러면 한 줄짜리 학원명 카드만 낮아져 격자가 들쭉날쭉해진다 —
     줄바꿈을 허용하면서 높이는 고정하는 것이 이 한 줄의 일이다. */
  min-height: 2.5em;
}
.kr2-card .kr2-crown { width: 14px; height: 14px; }

/* 1위 칸만 다시 한 단계 키운다 — 위 축소 규칙은 :not(.kr2-pod--1) 로 이 칸을 애초에
   건드리지 않으므로, 여기와 거기는 같은 대상을 다투지 않는다(순서를 바꿔도 결과가 안 바뀐다).
   (700px 이하에서는 시상대가 가로 한 줄로 눕고, 상세 화면도 그 폭에서는 계단을 접는다 —
   여기서도 같은 선택을 따라 이 보정을 그 미디어쿼리 밖에 둔다.) */
.kr2-card .kr2-pod--1 { padding-top: var(--sp-3); }
.kr2-card .kr2-pod--1 .kr2-crown { width: 18px; height: 18px; }
.kr2-card .kr2-pod--1 .kr2-pod__rank { font-size: 20px; }
.kr2-card .kr2-pod--1 .kr2-pod__name { font-size: 13px; }
.kr2-card .kr2-pod--1 .kr2-pod__center { font-size: 12px; }
.kr2-card .kr2-pod--1 .kr2-pod__score { font-size: 14px; }

/* 기록 없는 코스 — 비워 두면 카드 높이가 들쭉날쭉해진다. king_list.css 의 .kl-podium__empty 와
   같은 톤(비활성 회색)을 쓴다. 시상대가 flex 이므로 ::before 가 그 안의 한 칸으로 가운데 선다. */
.kr2-card.is-empty .kr2-card__podium::before {
  content: '아직 기록이 없어요';
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 12px; color: var(--c-disabled);
}

/* king_list.css 의 .kl-card__best 와 같은 문법: 평소엔 회색 13px, 수상은 연산왕 틸로 강조. */
.kr2-card__me {
  margin-top: var(--sp-2);
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 13px; color: var(--c-gray2);
}
.kr2-card__me.is-award { font-family: 'Pretendard-Bold', sans-serif; font-weight: 700; color: var(--fx-brand); }
.kr2-card__me.is-none { opacity: .5; }

@media (max-width: 1100px) { .kr2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 1열이라도 bare 1fr 은 minmax(auto,1fr) 이라 트랙이 내용 최소 폭 아래로 못 내려간다 —
   .kr2-pod__name 이 white-space:nowrap 이라 긴 표시명 하나가 카드를, 카드가 그리드를 밀어
   375px 에서 페이지 가로 스크롤이 생겼다(스펙 §6.8, 위 463행과 같은 함정, 1열도 예외 없음). */
@media (max-width: 560px)  { .kr2-grid { grid-template-columns: minmax(0, 1fr); } }

/* ⚠ **폰에서도 카드 시상대는 3칸을 유지한다.** king_rank.css 의 700px 미디어쿼리가
   .kr2-podium 을 세로로 눕히는데(상세 화면용), 그게 카드에 상속되면 폰에서 격자와 상세가
   구분이 안 되고 카드 하나가 세 줄이 되어 스크롤이 세 배가 된다.
   1열이면 카드가 화면 폭(~350px)이라 칸당 ~110px 이고, 표시명이 마스킹 실명 3글자로
   고정이라(학생의 65%가 닉네임이 비어 있다) 좁지 않다. */
@media (max-width: 700px) {
  .kr2-card__podium { flex-direction: row; align-items: flex-end; }
  .kr2-card .kr2-pod { flex-direction: column; align-items: center; text-align: center;
                       padding: var(--sp-2) var(--sp-1); }
  .kr2-card .kr2-crown { width: 14px; height: 14px; margin-bottom: var(--sp-1); align-self: center; }
  .kr2-card .kr2-pod__rank { font-size: 16px; width: auto; }
  .kr2-card .kr2-pod__name { font-size: 12px; }
}