/* 연산왕 코스 목록 — 데스크톱 우선. 토큰은 assets/css/c2m_ds.css 를 먼저 로드해야 한다.
   골격(본문폭·히어로·흰 패널·회색 면)은 learningList_v2 / level_list_v2 와 같은 문법을 따른다. */

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

.kl-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. 그래서 마스코트 발도 글 아래도 흰 패널 윗변에 닿고,
   제목은 히어로 위에서 ~85px 내려온 자리에 선다(코어연산 92px).
   ⚠ 마스코트를 키우면 글이 그만큼 아래로 밀려 왼쪽이 비어 보인다 — 287px 로 두었다가
      글 아래가 159px 비었다. 높이는 210px 를 유지할 것. */
.kl-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-10);
  margin-bottom: 0;
}
.kl-hero__text { flex: 1 1 auto; min-width: 0; padding-bottom: var(--sp-8); }
/* 제목 + 가는 길. 이 화면의 다른 목적지는 명예의 전당 하나뿐이라 제목 옆이 그 자리다.
   베이스라인이 아니라 세로 가운데로 맞춘다 — 알약은 글자가 아니라 덩어리라
   베이스라인에 걸면 제목 아래로 처져 보인다. */
.kl-hero__titlerow {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-4);
}
.kl-hero__title {
  margin: 0;
  font-family: 'HGAlmond60g', sans-serif;
  font-size: 56px; line-height: 1.1; color: var(--c-text);
}
.kl-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);
}
.kl-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;
}
.kl-hero__cta:hover { background: #fff; color: var(--c-text); }
/* 마스코트 — width/height 속성이 있어 로드 전에도 자리를 잡는다(레이아웃 이동 방지).
   display:block 이라야 인라인 이미지 아래 여백이 안 생겨 패널에 딱 붙는다.
   장식이므로 좁은 화면에서는 숨긴다: 폰에서 세로를 먹으면 정작 내용이 밀린다. */
.kl-hero__mascot {
  flex: none;
  display: block;
  height: 210px;
  width: auto;
}

/* ── 흰 패널 ──────────────────────────────────────────────────
   파스텔 배경 위에 흰 라운드 박스 하나, 내용은 전부 그 안에. 코어연산 학습(.ll-panel)과
   같은 껍데기라 두 페이지를 오갈 때 같은 시스템으로 읽힌다. */
.kl-panel {
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-hero);
  background: var(--c-white);
  box-shadow: var(--sh-card);
  box-sizing: border-box;
}

/* 카드가 놓이는 면 — 흰 패널 위의 흰 카드는 서로 안 보인다. 한 톤 내려 카드를 띄운다
   (코어연산 .ll-content 와 같은 이유·같은 색). */
.kl-board {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  padding: var(--sp-8);
  border-radius: var(--r-card);
  background: var(--c-light);
}

/* ── 학년군 ───────────────────────────────────────────────────
   16개를 그냥 나열하지 않는다. 코스는 6세→초6 으로 정확히 4개씩 4묶음이라, 그 구조를
   섹션 제목으로 드러내면 목록이 아니라 학습 여정으로 읽힌다. 제목 크기·자리는 코어연산의
   「1 레벨 / 5까지의 수」와 같다. --band 색은 king_courses.php 가 인라인으로 준다. */
.kl-band__head {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  padding: 0 var(--sp-2);
}
.kl-band__name {
  font-family: 'HGAlmond60g', sans-serif;
  font-size: 32px; line-height: 1.1;
  color: var(--band, var(--c-text));
}
.kl-band__sub {
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 15px; line-height: 22px; letter-spacing: -0.375px;
  color: var(--c-gray2);
}
.kl-band__cards {
  display: grid;
  /* ⚠ minmax(0, …) 다. `1fr` 은 `minmax(auto, 1fr)` 이라 트랙이 **내용의 최소 너비 아래로
     못 내려간다** — 줄바꿈 없는 긴 문자열(시상대의 "이름 학원명")이 들어오면 그 칸만 넓어지고
     나머지 셋이 쪼그라든다. 안쪽 min-width:0 만으로는 못 막는다(트랙이 먼저 정해진다).
     실측: 긴 학원명 하나가 4열의 폭 배분을 통째로 흔들었다. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}

/* ── 코스 카드 ──────────────────────────────────────────────── */
/* 동작이 둘이다: 카드 전체 = 플레이(.kl-card__go 를 ::after 로 펼친다), 오른쪽 아래 = 순위.
   position: relative 가 그 펼침의 기준이다. */
.kl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 168px;
  padding: var(--sp-5);
  border-radius: var(--r-card);
  background: var(--c-white);
  box-shadow: var(--sh-item);
  transition: transform .12s, box-shadow .12s;
}
.kl-card:hover { transform: translateY(-2px); box-shadow: var(--sh-card); }

/* 플레이 링크 — 글자 없이 카드 전체를 덮는다. 순위 링크보다 아래에 깔린다.
   ⚠ 이 링크 자체에 position 을 주면 안 된다. ::after 가 카드가 아니라 링크에 붙어 버린다. */
.kl-card__go::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
  z-index: 0;
}
.kl-card__go:focus-visible::after { outline: 3px solid var(--fx-brand); outline-offset: 2px; }

.kl-card__top {
  display: flex; align-items: baseline;
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
/* 코스 번호가 카드의 이름이다 — 게임·순위표·기록 페이지가 모두 이 번호로 부른다.
   색은 학년군 색: 코어연산에서 자기 학년 색을 본 학생이 여기서 같은 색을 찾는다.
   20px Bold = WCAG large text 라 밝은 학년군 색도 대비 기준(3:1)을 넘는다. */
.kl-card__num {
  flex: none;
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 20px; line-height: 26px; letter-spacing: -0.5px;
  color: var(--band, var(--fx-brand));
}
.kl-card__target {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 13px; line-height: 18px; color: var(--c-gray2);
}
.kl-card__pick {
  flex: none; margin-left: auto;
  padding: 3px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--fx-warn);
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 12px; line-height: 16px; color: #854f00;
}
.kl-card__desc {
  flex: 1 1 auto;
  margin: 0;
  font-family: 'Pretendard-Medium', sans-serif;
  font-size: 14px; line-height: 20px; letter-spacing: -0.35px;
  color: var(--c-text);
}
.kl-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line2);
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 13px; line-height: 18px; color: var(--c-gray2);
}

/* 순위 — 카드의 두 번째 동작. 플레이 링크 위에 떠 있어야 클릭이 가로채이지 않는다.
   테두리를 뺐다: 16장에 pill 이 16개 반복되면 강조가 아니라 무늬가 되고, 카드 전체가
   눌리는데 안에 '버튼'이 있으면 어디를 눌러야 하는지 헷갈린다. 텍스트 링크면 충분하다. */
.kl-card__rank {
  position: relative; z-index: 1;
  flex: none;
  padding: 4px 2px;
  color: var(--c-gray2); text-decoration: none;
  font-family: 'Pretendard-Medium', sans-serif; font-size: 12px; line-height: 16px;
}
.kl-card__rank:hover { color: var(--fx-brand); }
.kl-card__rank:focus-visible { outline: 3px solid var(--fx-brand); outline-offset: 2px; }

/* ── 이번 달 시상대 ─────────────────────────────────────────────
   카드 안 세 줄. 명예의 전당은 10위까지지만 여기는 3위까지다 — 16장 × 10줄이면
   목록이 아니라 순위표가 된다.

   **흰 카드 위의 흰 목록은 서로 안 보인다.** 그래서 한 톤 내린 면에 담는다 — 이 페이지가
   이미 세 번 쓰는 규칙이다(민트 → 흰 패널 → 회색 면 .kl-board → 흰 카드). 색도 새로 만들지
   않고 .kl-board 와 같은 --c-light 를 쓴다: 같은 뜻('한 톤 내린 면')에 값이 둘이면 안 된다.
   라운드는 --r-sm — 바깥 카드(--r-card, 24px)와 같으면 두 모서리가 겹쳐 보인다. */
.kl-card__podium {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-light);
  /* 세 줄 자리를 미리 잡는다(3×20 + 위아래 여백). 안 잡으면 응답이 온 순간 16장이
     한꺼번에 밀린다. */
  min-height: 84px;
}
/* JS 가 채우기 전(그리고 조회가 실패했을 때)의 상태. 자리를 지키는 것이 목적이라
   빈 칸으로 두지 않는다 — 여백만 있으면 고장으로 읽힌다. */
.kl-card__podium:empty::before {
  content: '순위 불러오는 중…';
  font-size: 12px; color: var(--c-disabled);
}
.kl-podium__row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 1px 0;
  font-size: 12px; line-height: 18px; color: var(--c-gray2);
}
/* 메달(1~3위) 과 숫자(모수 1 이라 메달을 못 주는 경우)가 같은 폭을 쓴다 —
   안 그러면 줄마다 이름 시작점이 달라진다. */
.kl-medal,
.kl-podium__num { flex: none; width: 14px; height: 14px; text-align: center; }
.kl-podium__num { font-size: 11px; line-height: 14px; color: var(--c-disabled); }
/* 이름 + 소속을 한 줄에. 두 줄로 쌓지 않는 이유: 세 줄짜리 시상대가 여섯 줄이 되어
   카드가 두 배가 된다.
   ⚠ 말줄임은 **둘이 따로** 한다. 묶어서 한 번에 줄이면 잘리는 자리가 글자 수에 따라
   정해져, 닉네임이 긴 학생은 이름이 잘리고 학원명은 아예 안 나온다. */
.kl-podium__who {
  display: flex; align-items: baseline; gap: var(--sp-2);
  flex: 1 1 auto; min-width: 0;
}
.kl-podium__name {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 소속 학원 — 이름을 밀어내지 않게 작게. **학원 범위에서는 서버가 아예 안 준다**
   (전원 같은 학원이라 열여섯 장에 같은 이름이 마흔여덟 번 반복될 뿐이다).
   명예의 전당의 .kr2-row__name small 과 같은 규칙·같은 크기.

   줄의 절반을 넘지 않는다: 이 줄의 주인공은 학생 이름이고 학원은 곁들이다. 넘치면
   **자기 자리에서** 말줄임한다(밧슈수학교육원본점 → 밧슈수학교…). */
.kl-podium__center {
  flex: 0 1 auto; min-width: 0; max-width: 50%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 11px; color: var(--c-disabled);
}
.kl-podium__score { flex: none; font-feature-settings: "tnum"; }
/* 내 줄만 짚는다. 색이 아니라 굵기로 — 16장에 강조색이 흩어지면 학년군 색이 안 읽힌다. */
.kl-podium__row.is-me { color: var(--c-text); font-family: 'Pretendard-Bold', sans-serif; }
/* 빈 코스 — 지금은 대부분이 여기다. 세 줄 자리를 그대로 두고 글자만 가운데에 놓는다:
   왼쪽 위에 한 줄만 있으면 "덜 그려졌다"로 읽히고, 자리를 줄이면 같은 줄의 카드끼리
   푸터 높이가 어긋나 격자가 너덜너덜해진다. */
.kl-podium__empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 60px;
  font-size: 12px; line-height: 18px; color: var(--c-disabled);
}

/* 메달 색은 c2m_ds.css 의 --medal-N 토큰이다(rank_crown.js 가 붙이는 클래스).
   `color` 가 아니라 `fill` 이다 — 공유 모듈의 <path> 에 fill 속성이 없어 currentColor 를
   안 따른다(형제 화면 myKingRecord.css·king_rank.css 도 fill 로 준다).
   ⚠ 여기서 :root 로 다시 선언하지 말 것 — 로드 순서 탓에 토큰을 덮어 이 페이지만 안 바뀐다. */
.kl-medal--1 { fill: var(--medal-1); }
.kl-medal--2 { fill: var(--medal-2); }
.kl-medal--3 { fill: var(--medal-3); }

/* ── 시상대 범위 탭 ──────────────────────────────────────────────
   탭 하나가 카드 16장을 함께 바꾼다. 명예의 전당(.kr2-tabs)과 같은 모양이다. */
.kl-scope {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.kl-scope__label {
  font-family: 'Pretendard-Medium', sans-serif;
  font-size: 14px; line-height: 20px; color: var(--c-gray2);
}
.kl-scope__tabs { display: flex; gap: 4px; }
.kl-scope__tab {
  padding: 6px var(--sp-3);
  border: 1px solid var(--c-line2); border-radius: var(--r-pill);
  background: #fff; color: var(--c-gray2); cursor: pointer;
  font-family: 'Pretendard-Medium', sans-serif; font-size: 13px; line-height: 18px;
}
.kl-scope__tab.is-on { border-color: var(--fx-brand); background: var(--fx-brand); color: #fff; }
.kl-scope__tab:focus-visible { outline: 3px solid var(--fx-brand); outline-offset: 2px; }

/* 최고점 — 푸터 왼쪽을 통째로 차지한다(레벨 범위를 뺀 뒤 여기 말고 들어올 것이 없다).
   색은 학년군이 아니라 연산왕 틸이다: 학년이 아니라 '내 점수'를 뜻한다.
   min-width:0 은 flex 자식이 제 내용보다 작아질 수 있게 한다 — 없으면 여섯 자리 점수가
   좁은 카드에서 '순위' 링크를 밀어낸다. */
.kl-card__bestwrap { min-width: 0; overflow: hidden; white-space: nowrap; }
.kl-card__bestlabel {
  margin-right: 4px;
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 12px; color: var(--c-gray2);
}
/* 숫자가 자리를 옮기지 않도록 tnum. 미기록은 '—' 로 자리를 지킨다. */
.kl-card__best {
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 16px; color: var(--fx-brand);
  font-feature-settings: "tnum";
}
.kl-card__best.is-empty {
  font-family: 'Pretendard-Regular', sans-serif; font-size: 15px; color: var(--c-disabled);
}

/* 「추천」 카드만 테두리로 한 번 더 짚는다. 강조는 한 곳에만 준다. */
.kl-card.is-pick { box-shadow: var(--sh-card), inset 0 0 0 2px var(--fx-brand); }

/* ── 비로그인 안내 ─────────────────────────────────────────────
   패널 안이라 배경은 흰색이 아니라 연한 회색이다(민트 위에 떠 있을 때 쓰던 반투명 흰색은
   흰 패널 위에서 보이지 않는다). */
.kl-guest {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: 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);
}
.kl-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;
}
.kl-guest a:hover { background: #00827b; }

/* ── 좁은 화면 ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .kl-panel { padding: var(--sp-8) var(--sp-6); }
  .kl-board { padding: var(--sp-5); gap: var(--sp-8); }
  .kl-band__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  /* 마스코트는 장식이다. 폰에서 세로를 먹으면 정작 내용이 밀린다. */
  .kl-hero__mascot { display: none; }
  .kl-hero { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
  .kl-hero__text { padding-bottom: var(--sp-6); }
  .kl-hero__titlerow { gap: var(--sp-3); }
  .kl-hero__title { font-size: 40px; }
  .kl-band__name { font-size: 26px; }
  .kl-guest { flex-wrap: wrap; }
  .kl-guest a { margin-left: 0; }
}
@media (max-width: 560px) {
  .kl-panel { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-card-lg); }
  .kl-board { padding: var(--sp-4); }
  .kl-band__cards { grid-template-columns: 1fr; }
  /* 한 열로 쌓이면 16장이 세로로 늘어선다 — 격자 높이를 맞추려던 최소 높이는 여기선
     빈 공간일 뿐이라 푼다. */
  .kl-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kl-card { transition: none; }
  .kl-card:hover { transform: none; }
}