:root {
  /* 지면 */
  --bg: #0B0E13;  --surface: #131820;  --surface-2: #18202B;
  --line: #232C38;  --line-2: #2E3A49;

  /* 글자 */
  --text: #E6EAF0;    /* 16.01:1 on --bg */
  --text-2: #C8D2DE;  /* 12.64:1 */
  --text-3: #A3AEBD;  /*  8.60:1 */
  --text-dim: #6E7A8B;/*  4.44:1 — 본문 텍스트 금지. 장식·비활성 전용 */

  /* 브랜드 — 로고·링크·화면당 1~2곳 */
  --brand: #22D3EE;  --brand-ink: #0B0E13;

  /* 인터랙션 — 링크·포커스·화면당 1개의 주 CTA. 지금은 --brand와 같은 값 */
  --action: var(--brand);

  /* 숫자 전용 폰트 스택 — 본문 스택과 동일. 트리거 발생 시 값만 분리한다 */
  --font-num: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif;

  /* 데이터 — 평점 스케일 전용 */
  --rating-hi: #F5C518;    /* 8.0 이상 */
  --rating-good: #4ADE80;  /* 7.0 이상 */
  --rating-mid: #8A96A6;   /* 6.0 이상 */
  --rating-low: #F05D5E;   /* 6.0 미만 */
}

/* 라이트 팔레트는 나중에 만든다. 흰 배경 위 현재 값의 대비 — rating-hi 1.63 / rating-good 1.74 /
   rating-mid 3.00 / rating-low 3.26 / brand 1.81. 전부 사용 불가. 지면 색만 바꿔서는 성립하지 않는다. */
[data-theme="light"] { /* TODO: 3차 구현 */ }

body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--action); text-decoration: none; }
a:hover { filter: brightness(1.2); }
.num { font-variant-numeric: tabular-nums; }

/* 선수 이미지 폴백 — 이미지가 깨져도 칸이 무너지지 않는다.
   넥슨이 Referer를 막으면 핫링크가 통째로 실패한다. 실루엣이 같은 크기를 차지한다. */
.player-img { background: var(--surface-2); object-fit: cover; object-position: top; }
.player-fallback {
  width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-dim); font-size: 28px; font-weight: 600;
}

/* 최근 검색 칩 — 데이터가 아니라 이동 수단이다. 브랜드 색을 쓰지 않는다 */
.recent-chip {
  padding: 4px 10px; font-size: 12px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
}
.recent-chip:hover { border-color: var(--line-2); filter: none; }

/* 광고 슬롯 — 애드센스 승인 전이라 비어 있지만 자리는 지금 확정한다 */
.ad-slot {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px dashed var(--line); border-radius: 7px;
  color: var(--text-dim); font-size: 11px; letter-spacing: 0.5px;
}
.ad-slot:empty::after { content: "광고"; }
/* 사이드 레일 — 300x250(중형 사각형), 표준 애드센스 규격. .rail 과 함께 1279px 이하에서 숨는다 */
.ad-slot.rail { width: 300px; min-height: 250px; }
/* 본문 인라인 — 336x280(대형 사각형, 표준 애드센스 규격). 160x200은 표준 규격이 아니라서 교정.
   좁은 폭에서도 살아남는 슬롯(.fold 를 쓰지 않는다) */
.ad-slot.inline { width: 336px; min-height: 280px; }

/* 본문 + 사이드 레일 한 행. 치수를 인라인이 아니라 클래스로 두는 이유는 아래 미디어쿼리다 —
   인라인 style 은 우선순위가 높아 `display: none` 을 이긴다 (layout.html 주석 참고) */
.page { display: flex; gap: 24px; padding: 24px 32px 0; }
.rail { flex-shrink: 0; width: 312px; display: flex; flex-direction: column; gap: 16px; }

/* 좁은 폭에서 접히는 2차 블록. 접힌 게 있다는 사실만 한 줄로 남긴다 */
.fold-note { display: none; }

/* 반응형 — 창 축소가 주 사용 패턴이다 */
@media (max-width: 1279px) { .rail { display: none; } }
@media (max-width: 759px) {
  .fold { display: none; }
  .fold-note { display: flex; }
  .page { padding: 16px 18px 0; }
}