@charset "UTF-8";
/* ============================================================================
   KBF 공개 화면 — S26b 통합 홈 전용 스타일
   ----------------------------------------------------------------------------
   KBF-28 (KBA-29) · Paper `07 Public Desktop` / S26b · contentHash ed9c241c
   모든 수치는 scratchpad s26b_*.jsx 실측 인용. 눈대중 없음.

   로드 순서: krds.min.css → kbf-public.css → kbf-home.css
   ========================================================================= */


/* ══ Stage ① Hero Band (ED2) ══════════════════════════════════════════════ */

/* ── 히어로 full-bleed (KBF-66 · KBA-67 · 2026-09-01) ────────────────────────
   **배경만 화면 끝까지 가고 내용은 제자리다.** 셸(`.kbf-shell`)이 `max-width:1440` 이라
   1920 에서 좌우 240px 흰 여백이 남던 것을 히어로만 탈출시켰다.

   🔑 **아래 `margin-inline` 과 `padding-inline` 은 짝이다.**
      `margin` 만 넣으면 **내용까지 따라 나가** 카피가 화면 가장자리로 붙는다.
      `padding` 이 나간 만큼(`50vw - 50%`)을 도로 빼서 내용을 제자리에 둔다.
      ⇒ 실측으로 **카피 left == 아래 행 left** 가 유지된다(1920 288/288 · 1600 128/128).

   ⭐ **1440 이하는 no-op 이다** — 셸이 뷰포트와 같아져 `50% - 50vw = 0` 이 된다.
      모바일·태블릿 회귀 위험이 **구조적으로 0**(실측: 1440·1024·768·390 전부 변화 없음).

   🔑 **카드가 안 커지는 이유 — 스와이퍼 컨테이너를 안 건드린다.**
      Swiper 가 `slidesPerView: 3`(`hero.blade.php:124`)이라 **컨테이너를 3등분**한다.
      컨테이너를 넓혔다면 카드가 289 → **449** 가 됐을 것이다(실측). 배경만 넓혀 289 를 지킨다.
      ⚠️ 검증할 때는 **`swiper.update()` 를 부른 뒤** 재야 한다 — 안 부르면 init 때 박힌
         인라인 `width:289.333px` 가 남아 **안 변한 것처럼 보인다**(첫 측정이 이렇게 속았다).

   ⚠️ **스크롤바** — `100vw` 는 세로 스크롤바 폭을 포함한다. 계산은 **자기 보정된다**
      (배경이 좌우 각 ~7.5px 넘쳐 `body{overflow-x:hidden}` 에 잘리지만 양 끝에는 닿고,
      `padding` 이 같은 항을 빼므로 내용 위치는 맞는다). 다만 **헤드리스가 오버레이
      스크롤바라 클래식 환경을 재현하지 못했다** — `D-66-03` 「확인 필요」.

   ⚠️ Paper 아트보드는 **1440 고정**이라 「화면 전체」를 표현할 수 없다.
      **코드가 시안을 벗어나는 의도된 차이**다(`D-66-02`). */
.kbf-hero {
  display: flex;
  align-items: flex-start;
  gap: 44px;
  box-sizing: border-box;
  height: 451px;                               /* 시안 개정 — Row1 오버랩을 위해 427 → 451 */
  /* ⚠️ KBF-67 — 가로 3속성(`width`·`margin-inline`·`padding-inline`)을 공용 `.kbf-bleed`
     로 옮겼다(`kbf-public.css`). 여기는 **세로만** 담당한다.
     🚨 되살리지 말 것 — `kbf-home.css` 가 **나중에 로드**되므로 공용 클래스를 이겨
        흡수가 무효가 된다. 계산식이 두 곳에 살면 한쪽만 고쳐질 때 어긋난다. */
  padding-block: 52px 44px;
  background-color: var(--kbf-navy-hero);      /* #002462 */
  position: relative;
}

/* ── 좌: 카피 ── */
.kbf-hero__copy {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 398px;
}
.kbf-hero__eyebrow {
  margin: 0;
  color: #9DB4DC;
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.02em;
}
.kbf-hero__headline {
  margin: 14px 0 0;
  color: var(--kbf-surface);
  font-size: 46px;              /* Paper: var(--text-display) */
  font-weight: 800;
  line-height: 58px;
  letter-spacing: -0.035em;
}
.kbf-hero__status {
  margin: 20px 0 0;
  color: #B9C8E4;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.02em;
}
.kbf-hero__filters {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.kbf-hero__select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  flex-shrink: 0;
  height: 40px;
  padding-inline: 14px;
  background-color: var(--kbf-navy-sub);       /* #0A2E6E */
  border: 1px solid #43619B;
  border-radius: var(--kbf-radius-chip);
  color: var(--kbf-surface);
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.02em;
  cursor: default;                             /* 데이터 연동 전 — 비활성 */
}
.kbf-hero__select--season { width: 156px; }
.kbf-hero__select--league { width: 134px; }

/* ── 우: 최근 경기 결과 ── */
.kbf-hero__results {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 16px;
  min-width: 0;                 /* swiper 가 flex 안에서 폭을 넘기지 않도록 */
  /* 🚨 캐러셀 버튼의 **기준 박스**다. 지우면 버튼이 `.kbf-hero`(=100vw)를 기준으로
     되돌아가 넓은 화면에서 카드 위에 겹친다. 아래 `.kbf-hero__nav` 주석 참조. */
  position: relative;
}
.kbf-hero__results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.kbf-hero__results-title {
  margin: 0;
  color: var(--kbf-surface);
  font-size: 19px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.02em;
}
.kbf-hero__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #C6D3EA;
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* ── 결과 카드 ── */
.kbf-result {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  background-color: #1B3868;
  border: 1px solid #2F5087;
  border-radius: var(--kbf-radius-ctl);        /* 6 */
}
.kbf-result__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  height: 42px;
  border-bottom: 1px solid #2F5087;
}
.kbf-result__league {
  color: #8FB0E0;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.01em;
}
.kbf-result__bar  { color: #5F7CB2; font-size: 14px; line-height: 18px; }
.kbf-result__date {
  color: #DCE5F4;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.01em;
}

.kbf-result__teams {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  padding-top: 18px;
  padding-inline: 14px;
}
.kbf-result__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  gap: 9px;
  min-width: 0;
}
/* 엠블럼 — 시안은 SVG 도형(흰 원 40 + 회색 링 + 안쪽 색)이었다. 실제 팀 로고
   (`team_yearlies.thumb`)로 바뀌면서 그 원과 링을 **CSS 가 대신 그린다.**
   ⚠️ 배경 흰색과 링을 빼지 말 것 — 투명 배경 로고가 많아 네이비 카드 위에서 떠 보인다.
   ⚠️ `box-sizing: border-box` 가 **필수다.** 없으면 padding 4+4 와 border 2 가 더해져
      40 이 50 이 된다(`kbf-sub.css` 의 `img.kbf-match__emblem--img` 가 겪은 것과 같다).
   ⭐ `object-fit: contain` — 로고 비율이 제각각이라 채우면 잘린다. */
.kbf-result__emblem {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: #FFFFFF;
  border: 1px solid #D6DEEC;
  border-radius: 50%;
}
img.kbf-result__emblem--img {
  object-fit: contain;
  padding: 4px;
}
/* thumb 이 없는 연도(2012~2014)의 폴백 — 팀명 2글자. 원 크기는 위 규칙이 정본이다. */
span.kbf-result__emblem {
  color: var(--kbf-navy-hero);
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.03em;
}
.kbf-result__team-name {
  color: var(--kbf-surface);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-align: center;
}
.kbf-result__vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 9px;
  width: 56px;
  padding-top: 9px;
}
.kbf-result__vs-label {
  color: #8FB0E0;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.02em;
}
.kbf-result__venue {
  margin-top: 13px;             /* Paper: 별도 래퍼의 padding-top 13 */
  color: #A9BDDF;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.02em;
}

.kbf-result__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  margin-top: auto;
  padding: 14px 14px 16px;
}
.kbf-result__score {
  margin: 0;
  color: var(--kbf-surface);
  font-size: 34px;
  font-weight: 800;
  line-height: 40px;
  letter-spacing: 0.02em;
}
.kbf-result__detail {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  height: 38px;
  border: 1px solid #5178B4;
  border-radius: var(--kbf-radius-chip);
  color: var(--kbf-surface);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* ── 캐러셀 컨트롤 ── */
.kbf-hero .swiper { width: 100%; }
.kbf-hero .swiper-slide { height: auto; }     /* 카드 높이 균등 */

.kbf-hero__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding-top: 12px;
}
/* swiper 기본 bullet 스타일을 시안값으로 덮는다 */
.kbf-hero__dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 8px;
  background-color: #8FB0E0;
  opacity: 1;
  transition: width .2s ease;
}
.kbf-hero__dots .swiper-pagination-bullet-active {
  width: 20px;
  background-color: var(--kbf-surface);
}

/* 캐러셀 컨트롤 — Paper 시안을 수정한 뒤 그 값을 반영한 것이다.
   원래 시안(prev 434 / next 1388 / top 189)은 next 가 카드 우측 경계(1392)를 4px 침범하고
   컨테이너 밖으로 30px 튀어나오는 반면 prev 는 카드에서 22px 떨어져 좌우가 비대칭이었다.
   우측 여백 48px 중 버튼이 34px 을 차지해 대칭 배치가 기하학적으로 불가능했던 것이 원인.
   → Paper 에서 양쪽 모두 카드 경계를 17px 씩 양분하도록 고치고(EGA-0/EGE-0) 여기에 반영한다.
     prev  473~507  (카드 좌측 490 을 17px 양분)
     next 1375~1409 (카드 우측 1392 를 17px 양분)
     top   201      (카드 영역 92~344 의 수직 중앙 218 기준)

   ── 🚨 그 절대 좌표를 **경계 기준 좌표로 바꿨다** (2026-09-07) ──────────────
   위 네 숫자는 **뷰포트가 정확히 1440 일 때만 맞는다.** 기준 박스가 `.kbf-hero` 였고
   그것은 `.kbf-bleed` 로 `width: 100vw` 라, `left: 1375px` 이 「화면 왼쪽 끝에서
   1375px」을 뜻했다. 카드 영역은 화면 폭을 따라 움직이는데 버튼은 못 움직였다.

     뷰포트   카드 우측   next 침범량
      1280      1232      -143  (허공에 떠 있었다)
      1440      1392        17  ← 설계값
      1600      1472        97
      1920      1632       257  ← 사용자가 발견한 화면
      2560      1952       577

   ⇒ 기준 박스를 `.kbf-hero__results`(카드와 폭이 같다)로 옮기고 좌우를 경계 기준으로 쓴다.
     `top: 149` = 201(옛 값) − 52(`.kbf-hero` padding-top) ⇒ **화면상 위치는 그대로다.**
   ⚠️ `--next` 에 `left: auto` 가 **필수다.** 위 규칙이 `left` 를 주는 것은 아니지만,
      되살릴 때 `left` 와 `right` 를 함께 두면 `left` 가 이겨 `right` 가 무시된다.
   ⚠️ 밖에서 `calc(50vw - 50% …)` 로 계산하는 방법은 **불가능하다** — 버튼 기준으로 `50%` 는
      셸이 아니라 `.kbf-hero` 자신의 padding box(=100vw)를 가리켜 그 항이 늘 0 이 된다.
   🔒 `tests/e2e/hero-carousel.mjs` 가 다섯 폭에서 침범량 17px 을 잠근다. */
.kbf-hero__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 149px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 34px;
  background-color: #FFFFFF21;
  cursor: pointer;
  z-index: 2;
}
.kbf-hero__nav--prev { left: -17px; }
.kbf-hero__nav--next { left: auto; right: -17px; }
.kbf-hero__nav:disabled,
.kbf-hero__nav.swiper-button-disabled { opacity: .4; cursor: default; }

/* Swiper 부재 시 폴백 — 시안이 그린 2페이지(4~6번째)만 노출 */
.kbf-hero.is-static .swiper-wrapper { display: flex; gap: 17px; }
.kbf-hero.is-static .swiper-slide { flex: 1 1 0; }
.kbf-hero.is-static .swiper-slide:nth-child(-n+3),
.kbf-hero.is-static .swiper-slide:nth-child(n+7) { display: none; }
.kbf-hero.is-static .kbf-hero__nav { opacity: .4; pointer-events: none; }


/* ══ Main Content 컨테이너 (EGI) ═══════════════════════════════════════════ */

/* 시안 개정 — Row1 이 히어로 네이비 위로 40px 겹친다.
   margin-top 은 padding-top 26 을 상쇄해야 하므로 -(40+26) = -64.
   배경은 투명이어야 겹치는 구간에서 네이비가 비친다(페이지 배경은 body 가 깐다).
   히어로가 position:relative 라 positioned 요소로서 static 인 이 블록보다 먼저 위에 그려진다.
   → 카드가 네이비 아래로 숨지 않도록 여기에도 스태킹을 준다. */
.kbf-main-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-sizing: border-box;
  width: 100%;
  margin-top: -64px;
  padding: 26px var(--kbf-gutter) 34px;
  background-color: transparent;
  position: relative;
  z-index: 1;
}
.kbf-row {
  display: flex;
  gap: 24px;
  width: 100%;
}

/* 카드 공통 */
.kbf-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: var(--kbf-surface);
  border: 1px solid var(--kbf-border);
  border-radius: var(--kbf-radius-card);
}
.kbf-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.kbf-card__head--inset { padding-bottom: 18px; padding-inline: 20px; }
.kbf-card__title {
  margin: 0;
  color: var(--kbf-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.03em;
}
.kbf-card__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--kbf-muted);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-decoration: none;
}


/* ══ Stage ② Row1 — 퀵링크 · 방송 프로모 (EGJ) ════════════════════════════ */

.kbf-quicklinks {
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  /* ⚠️ KBF-45 — 852px 고정을 852:468 **비율**로 바꾼다.
     flex-shrink:0 + 절대폭이면 부모가 좁아져도 안 줄어 태블릿에서 넘친다.
     ⚠️ D-41-01 ⑤ — flex 는 3속성을 세트로 준다(grow/shrink/basis). */
  /* ⚠️ min-width:0 이 없으면 flex 자식의 기본 min-width:auto 가
     「콘텐츠보다 작아지지 않음」을 강제해 852:468 비율이 깨진다(실측 826:78). */
  flex: 852 1 0;
  min-width: 0;
  height: 174px;
  padding-inline: 16px;
  background-color: var(--kbf-surface);
  border: 1px solid var(--kbf-border);
  border-radius: var(--kbf-radius-card);
}
.kbf-quicklink {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;      /* 구분선이 132 폭을 넘기지 않도록 */
  flex-shrink: 0;
  gap: 12px;
  width: 132px;
  text-decoration: none;
}
/* 시안 개정 — 항목 사이 세로 구분선 */
.kbf-quicklink:not(:last-child) {
  border-right: 1px solid var(--kbf-border);
}
.kbf-quicklink__title {
  color: var(--kbf-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.02em;
}
.kbf-quicklink__sub {
  color: var(--kbf-muted);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.02em;
}

.kbf-promo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  flex-shrink: 0;
  flex: 468 1 0;
  min-width: 0;   /* KBF-45 — 852:468 비율 유지 */
  height: 174px;
  padding-inline: 24px;
  background-color: #181B20;
  border-radius: var(--kbf-radius-card);
  position: relative;
  overflow: hidden;
}
.kbf-promo__panel {
  position: absolute;
  left: 268px;
  top: 0;
  width: 200px;
  height: 174px;
  background-color: #23272E;
  border-top-right-radius: var(--kbf-radius-card);
  border-bottom-right-radius: var(--kbf-radius-card);
}
.kbf-promo__art { position: absolute; left: 296px; top: 52px; }

/* KBF-61 — 패널에 앉히는 중계 화면 사진(`live.jpg` 500×340).
   `contain` 이라 200×136 으로 앉고 위아래 19px 씩 패널 배경(#23272E)이 남는다.
   ⚠️ 위 `.kbf-promo__art` 선언을 **일부러 남겨 둔다** — 마크업(Blade)에서만 주석 처리했고
      되살릴 때 이 CSS 가 함께 있어야 한다. */
.kbf-promo__shot { display: block; width: 100%; height: 100%; object-fit: contain; }

.kbf-badge--live {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 24px;
  border-radius: 3px;
  background-color: var(--kbf-live);  /* ✅ 불일치 1 해소(④-b) — 오늘의 경기 배지와 통일 */
  color: var(--kbf-surface);
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.04em;
  position: relative;
}
.kbf-promo__title {
  margin: 0;
  color: var(--kbf-surface);
  font-size: 23px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: -0.03em;
  position: relative;
}
.kbf-promo__sub {
  margin: 0;
  color: #B6BCC5;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  position: relative;
}
.kbf-public .krds-btn.kbf-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 210px;                       /* 시안 개정 — 우측 화살표 추가로 186 → 210 */
  height: 38px;
  min-height: 38px;
  margin-top: 2px;
  padding-inline: 16px;
  border: 0;
  border-radius: 5px;
  background-color: var(--kbf-broadcast);  /* ✅ 불일치 2 해소(④-b) — 헤더 CTA 와 통일 */
  color: var(--kbf-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.02em;
  position: relative;
}


/* ══ Stage ② Row2 — 다음 경기 · 순위 TOP5 (EIF) ═══════════════════════════ */

.kbf-next {
  flex-shrink: 0;
  width: 462px;
  padding: 22px 24px 18px;
}
.kbf-next__when {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding-top: 22px;
  color: var(--kbf-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.02em;
}
.kbf-next__bar { color: var(--kbf-line); font-weight: 400; }

.kbf-next__teams {
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: 20px;
}
.kbf-next__team {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  gap: 10px;
  min-width: 0;
}
/* 넘기기로 가려진 경기.
   🚨 **전역 `.is-hidden` 을 믿으면 안 된다.** 이 파일의 `.is-hidden` 은
      `@media (max-width:767px)` 안에서 `[data-kbf-panel]` 에만 걸린다(`:1784`).
      데스크톱에서는 아무 효과가 없어 3장이 그대로 쌓였다(카드 341 → 701 실측).
   ⚠️ 그렇다고 전역 `.is-hidden{display:none}` 을 만들면 데스크톱에서 나란히 보여야 할
      개인 순위 카드(`.kbf-rankcard--player.is-hidden`)까지 사라진다. 이 항목만 잡는다. */
.kbf-next__item.is-hidden { display: none; }

/* ── 팀 엠블럼 ──
   `KBF-57` — 도형 SVG(`art/emblem`)를 실이미지로 갈아탔다. `.kbf-result__emblem`(최근 경기
   결과 · 40px)과 같은 규칙을 56px 로 옮긴 것이며, 값이 태그를 고른다:
   thumb 이 있으면 `<img>`, 없으면 팀명 2글자 `<span>`(2012~2014 는 thumb 이 0건이다).
   ⚠️ 두 태그가 **같은 상자**여야 폴백일 때 레이아웃이 흔들리지 않는다. */
.kbf-next__emblem {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background-color: #FFFFFF;
  border: 1px solid #D6DEEC;
  border-radius: 50%;
}
img.kbf-next__emblem--img {
  object-fit: contain;
  padding: 6px;
}
span.kbf-next__emblem {
  color: var(--kbf-navy-hero);
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.03em;
}
.kbf-next__team-name {
  color: var(--kbf-link);
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.02em;
  text-align: center;
}
.kbf-next__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  color: var(--kbf-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.02em;
}

/* ⚠️ 지금 이 규칙을 쓰는 마크업이 없다(`KBF-57` · 2026-09-08).
   `game_matches.venue` 가 전 연도 NULL 이라(2023·24·25 각 0/15 실측) 장소 줄을 그리지
   않기로 했기 때문이다. **지우지 않는 이유** — 값이 들어오기 시작하면 그대로 되살릴
   자리이고, 지우면 그때 치수를 다시 정해야 한다. 마크업 쪽에도 같은 주석을 남겼다. */
.kbf-next__venue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding-top: 18px;
  color: var(--kbf-muted);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
}

.kbf-next__chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding-top: 16px;
}
.kbf-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  height: 28px;
  padding-inline: 12px;
  border-radius: var(--kbf-radius-chip);
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.02em;
}
.kbf-chip--schedule  { background-color: #FDEEDA; color: #9A5B10; }
/* 🚧 `--broadcast` 는 지금 **소비처가 0**이다 — 「다음 경기」(2026-09-08)와 「오늘의 경기」
   (`KBF-57` · 2026-09-13)가 차례로 「K바둑 생중계」 칩을 뺐다. 중계 여부를 담을 컬럼이
   DB 에 없어서다. **지우지 않는다** — 2단계 CMS 티켓이 컬럼을 만들면 칩이 돌아온다. */
.kbf-chip--broadcast { background-color: #FFF3CC; color: #9A5B10; }
.kbf-chip--info      { background-color: #E7EEFB; color: var(--kbf-link); }
/* KBF-135 「팀 선정 대기 중」 — 날짜로 정해지는 예정·종료와 달리 아직 정해진 것이 없다는 뜻이라 회색이다. */
.kbf-chip--pending   { background-color: #E6E8EA; color: #464C53; }

.kbf-next__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding-top: 18px;
}
.kbf-next__arrow {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.kbf-next__count {
  color: var(--kbf-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.01em;
}
/* 경기가 없을 때 — 「준비 중입니다.」. 옆 순위 카드와 높이를 맞추려고 남은 세로를 채우고
   글을 가운데에 둔다. 글 모양은 `.kbf-empty-league`(kbf-sub.css)를 따르되 카드에 맞게 줄였다. */
.kbf-next__empty {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 240px;
  text-align: center;
}
.kbf-next__empty-tit {
  margin: 0;
  color: var(--kbf-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 26px;
}
.kbf-next__empty-desc {
  margin: 0;
  color: var(--kbf-muted);
  font-size: 15px;
  line-height: 23px;
}
/* KBF-136 빈 상태 — 흐린 가상 대진 위에 「경기 전 / 팀 선정 대기 중」(Paper `S26b-N1` D).
   대진 층이 자기 높이로 자리를 잡고, 문구 층은 그 위에 absolute 로 덮는다.
   ⚠️ Paper 는 `filter: blur` 를 캡처하지 못해 시안을 `backdrop-filter` 로 그렸다. 브라우저에서는
      `filter` 쪽이 지원 범위가 넓어 이쪽을 쓴다 — 보이는 결과는 같다. */
.kbf-next__stage {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.kbf-next__decor {
  filter: blur(5px);
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}
.kbf-next__emblem.kbf-next__emblem--blank {
  background-color: #CDD1D5;
  border-color: #CDD1D5;
}
.kbf-next__stage .kbf-next__empty {
  position: absolute;
  inset: 0 -8px;
  min-height: 0;
  background-color: rgba(255, 255, 255, 0.55);
  border-radius: 6px;
}
.kbf-next__stage .kbf-next__empty-tit {
  font-size: 19px;
  line-height: 28px;
  letter-spacing: -0.02em;
}
.kbf-next__stage .kbf-next__empty-desc {
  color: #464C53;
  font-weight: 500;
}
/* KBF-135 챔피언결정전 팀 선정 대기 — 엠블럼·팀 이름 자리를 비워 둔 모양(Paper `S26b-N1` B).
   `span.kbf-next__emblem`(0,1,1)을 이기려고 클래스 두 개(0,2,0)로 쓴다. */
.kbf-next__emblem.kbf-next__emblem--pending {
  background-color: #F4F5F6;
  border: 1.5px dashed #B1B8BE;
  color: #8A949E;
  font-size: 22px;
  line-height: 28px;
}
.kbf-next__team-name.kbf-next__team-name--pending {
  color: #6D7882;
  font-weight: 500;
}

/* ── 순위표 (flex + ARIA) ── */
.kbf-card--flush { padding-top: 22px; }
.kbf-rankcard--team   { flex-shrink: 0; width: 405px; }
.kbf-rankcard--player { flex-grow: 1; min-width: 0; }

.kbf-rank { display: flex; flex-direction: column; width: 100%; }
.kbf-rank__head,
.kbf-rank__row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding-inline: 20px;
}
.kbf-rank__head {
  height: 38px;
  background-color: var(--kbf-surface-alt);
  border-top: 1px solid var(--kbf-border);
  border-bottom: 1px solid var(--kbf-border);
}
.kbf-rank__row {
  height: 45px;
  border-bottom: 1px solid var(--kbf-row-line);
}
.kbf-rank__row:last-child { border-bottom: 0; }

.kbf-rank__c {
  color: var(--kbf-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.02em;
}
.kbf-rank__head .kbf-rank__c {
  color: var(--kbf-muted);
  font-size: 13px;
  line-height: 16px;
}
.kbf-rank__c--rank   { flex-shrink: 0; width: 42px; }
.kbf-rank__c--player { flex-shrink: 0; width: 88px; }
.kbf-rank__c--grow   { flex-grow: 1; min-width: 0; }
.kbf-rank__c--num    { flex-shrink: 0; width: 36px; text-align: center; }
.kbf-rank__c--wide   { flex-shrink: 0; width: 64px; text-align: right; }
.kbf-rank__c--muted  { color: var(--kbf-muted); font-weight: 400; }
.kbf-rank__team {
  display: flex;
  align-items: center;
  gap: 9px;
}

.kbf-promo__cta-spacer { flex-grow: 1; }


/* ══ Stage ③ Row3 — 뉴스·공지 (EN7) ═══════════════════════════════════════ */

.kbf-news {
  flex-shrink: 0;
  width: 660px;
  padding: 22px 24px 20px;
}
.kbf-notice {
  flex-grow: 1;
  min-width: 0;
  padding: 22px 24px 20px;
}
.kbf-news__head   { padding-bottom: 18px; }
.kbf-notice__head { padding-bottom: 14px; }

/* ── 대표기사 ── */
.kbf-news__featured {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  gap: 20px;
  width: 100%;
  padding-bottom: 18px;
}

/* 사진 플레이스홀더 — 마크업은 partials/art/news-photo.blade.php */
.kbf-news__photo {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 268px;
  height: 145px;
  background-color: #15325F;
  border-radius: 6px;
}
.kbf-news__photo-band {
  position: absolute;
  left: 0;
  top: 0;
  width: 268px;
  height: 52px;
  background-color: #1B3E73;
  border-radius: 6px 6px 0 0;
}
.kbf-news__photo-mark {
  position: absolute;
  left: 96px;
  top: 16px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 900;
  line-height: 18px;
  letter-spacing: -0.03em;
}
.kbf-news__photo-art {
  position: absolute;
  left: 20px;
  top: 66px;
}

/* KBF-63 — 실 썸네일. 목록(`kbf-sub.css` `.kbf-news-card__thumb img`)과 같은 `cover` 다.
   `border-radius: inherit` 로 부모의 6px 을 따라간다 — 부모에 `overflow:hidden` 을 넣지
   않는 이유는 도형 분기(absolute 자식 3개)의 렌더를 건드리지 않기 위해서다.
   ⚠️ 위 `-band`/`-mark`/`-art` 선언은 **지우지 않는다.** 썸네일이 없는 기사가 그것을 쓴다. */
.kbf-news__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.kbf-news__featured-text {
  flex-grow: 1;
  min-width: 0;
}
/* 18px/27px = 150% — S26b 에서 KRDS 행간 규격을 충족하는 유일한 지점이다. */
.kbf-news__headline {
  margin: 0;
  color: var(--kbf-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: -0.03em;
  white-space: pre-wrap;   /* 시안의 2줄 개행을 데이터가 갖고 있다 */
}
.kbf-news__date {
  margin: 0;
  padding-top: 10px;
  color: var(--kbf-disabled);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.02em;
}
.kbf-news__summary {
  margin: 0;
  padding-top: 10px;
  color: var(--kbf-muted);
  font-size: 13px;
  line-height: 21px;
  letter-spacing: -0.02em;
}

/* ── 서브 목록 ── */
.kbf-news__list {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--kbf-divider);
  list-style: none;
}
.kbf-news__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  height: 34px;
}
.kbf-news__bullet {
  flex-shrink: 0;
  width: 8px;
  color: var(--kbf-disabled);
  font-size: 14px;
  line-height: 18px;
}
.kbf-news__item-title {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--kbf-ink);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kbf-news__item-date {
  flex-shrink: 0;
  width: 78px;
  color: var(--kbf-disabled);
  font-size: 13px;
  line-height: 16px;
  text-align: right;
}

/* ── 공지 목록 ── */
.kbf-notice__list {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kbf-notice__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  height: 50px;
  border-top: 1px solid var(--kbf-divider);
}
.kbf-notice__title {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--kbf-ink);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kbf-notice__date {
  flex-shrink: 0;
  width: 78px;
  color: var(--kbf-disabled);
  font-size: 13px;
  line-height: 16px;
  text-align: right;
}

/* ── 배지 — KRDS 원본 컴포넌트, 색만 시안값으로 재선언 ──
   ⚠️ KRDS 는 --krds-badge--* 를 `.krds-badge` 규칙 안에서 자체 선언한다. 커스텀 속성은
      자기 요소의 선언이 상속값을 이기므로 조상에 재선언하면 **에러 없이 무시된다.**
      반드시 배지 요소 자신을 더 높은 특이도로 잡아야 한다 — (0,2,0) > (0,1,0).
      참고: high-contrast 모드(`[data-krds-mode=high-contrast] .krds-badge`, 0,2,1)는
      이보다 높지만 이 프로젝트는 해당 속성을 설정하지 않는다. */
.kbf-notice .krds-badge {
  --krds-badge--color-danger-element-lighter:  #FCE9E9;
  --krds-badge--color-danger-text:             #B9080A;
  --krds-badge--color-primary-element-lighter: #DFE7F5;
  --krds-badge--color-primary-text:            var(--kbf-link);

  flex-shrink: 0;
  width: 46px;
  height: 24px;
  padding: 0;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.02em;
}


/* ══ Stage ③ Row4 — 미디어·앱 (EPF) ═══════════════════════════════════════ */

.kbf-media {
  /* ⚠️ KBF-45 — 972px 고정을 972:348 **비율**로. 합 1320 + gap 24 = 1344 */
  flex: 972 1 0;
  min-width: 0;
  padding: 22px 24px;
}
.kbf-media__head { padding-bottom: 16px; }

/* ── 탭 — KRDS 원본 컴포넌트 (krds-tab-area) ──
   (a) 토큰 재선언 7건. KRDS 원본 CSS 는 건드리지 않는다.
   ⚠️ 재선언 대상은 `.krds-tab-area` 가 아니라 `.tab` 이다. KRDS 는 --krds-tab--* 를
      `.tab` 규칙 안에서 자체 선언하고, 커스텀 속성은 자기 요소의 선언이 상속값을
      이기므로 조상에 재선언하면 **에러 없이 무시된다.** (0,2,0) > (0,1,0) 로 이긴다.
      참고: `[data-krds-mode=high-contrast] .tab`(0,2,1)은 이보다 높지만 이 프로젝트는
      해당 속성을 설정하지 않는다. */
.kbf-media .tab {
  --krds-tab--button-size-height:             42px;              /* 48 → 42 */
  --krds-tab--button-pc-font-size:            14px;              /* 17 → 14 */

  /* ⚠️ `.full` 변형은 별도 토큰 계열을 쓴다 — `.tab.full .btn-tab`(0,3,0)이
     `.tab .btn-tab`(0,2,0)을 이기고 height/font-size 를 --krds-tab--full-button-* 로
     다시 잡는다(기본 5.6rem=56px / 1.9rem=19px). 위 두 줄만 덮으면 무효가 된다. */
  --krds-tab--full-button-size-height:        42px;              /* 56 → 42 */
  --krds-tab--full-button-pc-font-size:       14px;              /* 19 → 14 */
  --krds-tab--full-button-mobile-font-size:   14px;              /* 767px 이하 대비 */

  --krds-tab--button-color-text:              var(--kbf-muted);  /* 비활성 */
  --krds-tab--button-color-action:            transparent;       /* 배경 제거 */
  --krds-tab--line-button-color-border:       transparent;       /* 버튼별 하단선 → ul 로 이관 */
  --krds-tab--line-button-color-text-active:  var(--kbf-link);
  --krds-tab--line-button-color-line-active:  var(--kbf-link);
}

/* (b) 토큰으로 표현할 수 없는 것만 규칙으로 덮는다 — 업그레이드 시 깨질 표면을 여기로 한정한다. */
.kbf-media .krds-tab-area { gap: 0; }                            /* 32 → 0 (아래 margin 이 20 부여) */
.kbf-media .tab-conts     { margin-top: 20px; }                  /* 32 → 20 */

/* 기준선은 버튼이 아니라 ul 이 그린다. 시안의 선은 카드 전폭 924 인데 탭 합계는 496 뿐이라
   버튼에 걸면 선이 중간에서 끊긴다. */
.kbf-media .tab.line.full > ul             { border-bottom: 1px solid var(--kbf-border); }
.kbf-media .tab.line.full .btn-tab         { font-weight: 400; letter-spacing: -0.02em; }
.kbf-media .tab.line.full .active .btn-tab { font-weight: 700; }
.kbf-media .tab.line.full .btn-tab::before { height: 2px; bottom: -1px; }  /* .4rem=4px → 2px */

/* 탭 폭은 시안 실측값이므로 데이터가 아니라 CSS 가 갖는다 (.kbf-rankcard--team{width:405px} 와 같은 방식).
   KRDS 의 .tab.full>ul>li{flex:1 1 0} 균등 4등분을 해제한다. */
.kbf-media .tab.line.full > ul > li:nth-child(1) { flex: 0 0 148px; }
.kbf-media .tab.line.full > ul > li:nth-child(2) { flex: 0 0 120px; }
.kbf-media .tab.line.full > ul > li:nth-child(3) { flex: 0 0 110px; }
.kbf-media .tab.line.full > ul > li:nth-child(4) { flex: 0 0 118px; }

/* ── 썸네일 그리드 ── */
.kbf-media__grid {
  display: flex;
  box-sizing: border-box;
  gap: 16px;
  width: 100%;
}
.kbf-media__item {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px;
  width: 219px;
  text-decoration: none;
}

/* 썸네일 플레이스홀더 — 마크업은 partials/art/media-thumb.blade.php */
.kbf-media__thumb {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 219px;
  height: 124px;
  background-color: #0D0F12;
  border-radius: 4px;
}
.kbf-media__badge {
  position: absolute;
  left: 8px;
  top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 20px;
  padding-inline: 7px;
  background-color: #0B3CF5;
  border-radius: 2px;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  line-height: 12px;
  letter-spacing: 0.04em;
}
.kbf-media__play {
  position: absolute;
  left: 88px;
  top: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  background-color: #FFFFFFEB;
  border-radius: 42px;
}
/* 시안은 var(--font-mono) = IBM Plex Mono 다. 그 서체는 self-host 되어 있지 않고
   웹폰트를 불러오면 "외부 요청 0건" 수용 기준을 깬다 → 시스템 mono 로 대체한다(편차 기록).
   한 곳에서만 쓰이므로 변수로 승격하지 않는다. */
.kbf-media__duration {
  position: absolute;
  left: 170px;
  top: 100px;
  color: var(--kbf-line);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
}
.kbf-media__title {
  overflow: hidden;
  height: 40px;              /* 2줄 × 20px */
  color: var(--kbf-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
}
.kbf-media__date {
  color: var(--kbf-disabled);
  font-size: 12px;
  line-height: 16px;
}

/* ── 앱 프로모 ── */
.kbf-app {
  display: flex;
  flex-direction: column;
  /* ⚠️ KBF-45 — grow 1 이면 972:1 이 된다. 원래 비율 972:348 을 명시한다. */
  flex: 348 1 0;
  min-width: 0;
  box-sizing: border-box;
  /* ⚠️ KBF-55 — padding 을 뺐다. 배너가 모서리까지 채워야 옆 미디어 카드와 무게가 맞는다.
     여백은 이미지 안에 그려져 있다. */
  padding: 0;
  overflow: hidden;          /* radius 밖으로 이미지가 삐져나오지 않게 */
  background-color: var(--kbf-navy-promo);
  border-radius: var(--kbf-radius-card);
}

/* ── 협회 홈페이지 배너 (KBF-55 → KBF-62 · 2026-09-01) ────────────────────
   ⚠️ KBF-55 는 **두 장**을 싣고 뷰포트로 하나만 보였다. KBF-62 가 **한 장으로 통일**하고
      `<a>` 로 감쌌다. 뷰포트별 전환 모디파이어 3곳을 걷어냈다 — 소비처가 0 이 됐다.
      ⭐ 이 파일의 선례를 따른다(KBF-55 가 같은 자리에서 6개 규칙을 걷어내며
         *「죽은 규칙을 남기면 다음 사람이 「쓰이는 줄 알고」 건드린다」* 고 적었다).
         되살릴 근거는 커밋 이력에 있다.
      ⚠️ **이미지 파일(`season-2026-*.jpg`)은 남겼다** — 발주처 자산이라 다시 못 만든다.
         CSS 는 git 에 있으니 지운다. 비대칭이지만 이유가 다르다(`D-62-04`).

   🔑 `aspect-ratio` 를 **`<a>` 가 든다.** 부모가 `flex-direction: column` 이라
      **flex 항목이 슬롯 높이를 만드는데, 감싸는 순간 `<a>` 가 그 항목이 되기 때문**이다.
      ⚠️ 여기에 `height: 100%` 를 쓰면 안 된다 — 부모 높이를 자식이 정하는데 자식이 부모를
         참조하는 **순환**이 된다(2026-08-27 실측: 모바일 350 × 0). 비율로 높이를 만든다.

   실측(2026-09-01) — 1440 `335×323` · 768 `460×402` · 390 `350×306`.
   ⚠️ 슬롯이 이미지보다 가로로 좁아 **데스크톱에서 좌우 각 18px 잘린다**(`D-62-02`).
      텍스트가 가운데라 「대한바둑협회」·「바로가기」는 안전하다. */
.kbf-app__link {
  display: block;
  width: 100%;
  aspect-ratio: 740 / 646;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.kbf-app__banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* ⚠️ KBF-55 — `.kbf-app__title` · `__sub` · `__actions` · `__qr` · `__buttons` · `__btn`
   6개 규칙을 여기서 걷어냈다. 앱 프로모를 대회 배너 이미지로 바꿔 소비처가 0이 됐다.
   되살릴 일이 있으면 커밋 이력에서 꺼낼 것 — 죽은 규칙을 남기면 다음 사람이
   「쓰이는 줄 알고」 건드린다. */


/* ══ Stage ④ Row5 — 오늘의 경기·기보 (ERY) ════════════════════════════════ */

.kbf-today {
  flex-shrink: 0;
  width: 660px;
  padding: 22px 24px 20px;
}
.kbf-gibo {
  flex-grow: 1;
  min-width: 0;
  padding: 22px 24px 20px;
}
.kbf-today__head,
.kbf-gibo__head { padding-bottom: 14px; }

.kbf-today__list,
.kbf-gibo__list {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kbf-today__item,
.kbf-gibo__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 14px;
  height: 58px;
  border-top: 1px solid var(--kbf-divider);
}

/* ── 배지 — KRDS 원본 컴포넌트, 색만 시안값으로 재선언 ──
   ⚠️ ~~3종(bg-danger=LIVE · bg-primary=방송중 · bg-light-gray=예정)~~ ⇒ **2종이 됐다**
      (`KBF-57` · `N2` 판정 2026-09-13). 지금은 bg-primary=예정 · bg-light-gray=종료 다.
      LIVE·방송중을 담을 컬럼이 DB 에 없어 그 두 상태를 화면에서 뺐다.
   ⚠️ --krds-badge--* 는 `.krds-badge` 자신이 선언하므로 조상에 재선언하면 무시된다.
      배지 요소를 (0,2,0) 으로 잡아야 (0,1,0) 인 원본을 이긴다.
      --color-text-basic 은 예정 배지가 쓴다. */
.kbf-today .krds-badge {
  /* 🚧 LIVE bg — **미사용**(KBF-57 이 그 상태를 뺐다). 지우지 않고 남기는 이유는
     되살릴 여지가 아니라 **왜 없는지를 여기서 읽게** 하려는 것이다. 컬럼이 생겨
     중계 상태를 다시 말하게 되면 그때 판단한다.
  --krds-badge--color-danger-element:       var(--kbf-live); */
  --krds-badge--color-primary-element:      #002A8D;   /* 예정 bg (원래 「방송중」 색) */
  --krds-badge--color-gray-element-lighter: #D9DDE3;   /* 종료 bg (원래 「예정」 색) */
  --krds-badge--color-gray-text:            #474D5B;   /* 종료 text */
  --krds-badge--color-text-basic:           #FFFFFF;   /* 예정 text */

  flex-shrink: 0;
  width: 56px;
  height: 26px;
  padding: 0;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: 0.03em;
}

.kbf-today__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  gap: 4px;
}
.kbf-today__when {
  color: var(--kbf-disabled);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.01em;
}
.kbf-today__match {
  overflow: hidden;
  color: var(--kbf-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 시안이 같은 칩을 두 크기로 그렸다 — Stage ② 는 h28/padding12/13px, 여기는 h26/padding10/12px.
   색(--broadcast)은 그대로 재사용하고 크기만 덮는다. 이름이 그 사실을 숨기지 않는다. */
.kbf-chip--compact {
  height: 26px;
  padding-inline: 10px;
  font-size: 12px;
}

.kbf-today__view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  gap: 5px;
  width: 66px;
  height: 30px;
  border: 1px solid var(--kbf-line);
  border-radius: var(--kbf-radius-chip);
  color: var(--kbf-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* ── 주요 기보 ── */
.kbf-gibo__link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: 14px;
  width: 100%;
  text-decoration: none;
}
/* KBF-133 — 마크업에서 `__meta` 가 `__text` 안(세 번째 자식)으로 들어왔다.
   1440 미만(태블릿·모바일)은 예전 모양 [제목/대국자 | 결과 74px] 을 **grid 로 되살린다.**
   1440 이상 3단(318px)에서는 아래 `@media (min-width:1440px)` 가 세로로 쌓는다. */
.kbf-gibo__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
  column-gap: 14px;          /* 예전 `__link` 의 gap 과 같다 */
  row-gap: 4px;              /* 예전 flex column 의 gap 과 같다 */
}
.kbf-gibo__title   { grid-column: 1; grid-row: 1; }
.kbf-gibo__players { grid-column: 1; grid-row: 2; }
.kbf-gibo__meta    { grid-column: 2; grid-row: 1 / span 2; }
.kbf-gibo__title {
  overflow: hidden;
  color: var(--kbf-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kbf-gibo__players {
  color: var(--kbf-disabled);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.02em;
}
.kbf-gibo__meta {
  flex-shrink: 0;
  width: 74px;
  color: var(--kbf-link);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-align: right;
}


/* ══ KBF-133 — 뉴스 줄 3단 (리그 뉴스 660 · 공지 318 · 주요 기보 318) ════════════
   발주처 요청(2026-09-19) 「주요 기보 리그 뉴스로 옮겨서 3단으로」 · 시안 Paper `S26b-H2a`.
   마크업은 `home/row-news-notice.blade.php` 에 있다.

   🚨 **왜 `@media (min-width:1440px)` 안에 두나** — 이 파일은 `kbf-public.css` **뒤에** 로드된다.
      기본 규칙에 `flex: 1 1 0` 을 두면 태블릿 규칙 `.kbf-row--news-notice > * { flex: 1 1 340px }`
      (`kbf-public.css` · 같은 특이도 0,1,0)을 **나중 선언이라 이겨 버린다** — 태블릿에서 줄바꿈이
      사라지고 세 칸이 좁게 눌린다. 그래서 3단 규칙은 데스크톱 폭에만 건다.
      1440 미만(태블릿·모바일)은 이 블록이 없던 때와 같게 그려진다.

   ⚠️ 뉴스 카드(`.kbf-news` 660 고정)는 **한 줄도 바꾸지 않았다** — 사용자가 「지금 화면과
      정확히 같게」를 요구한 대상이다. 줄 높이 482 는 뉴스 카드가 정한다.
   ══════════════════════════════════════════════════════════════════════ */

/* 1440 미만에서 감싸기 요소가 없던 것처럼 보이게 한다 — 제목·날짜가 다시 `li` 의 flex 항목이 된다. */
.kbf-notice__text { display: contents; }

@media (min-width: 1440px) {
  /* 공지·기보가 남은 636px 을 똑같이 나눈다(318 · 318). `flex-grow` 만 두면 내용 폭 차이만큼 갈린다. */
  .kbf-notice,
  .kbf-gibo {
    flex: 1 1 0;
    min-width: 0;
  }

  /* 공지 한 줄 = 「제목 / 날짜」 두 줄. 한 줄 높이 50 은 그대로라 8줄이 482 안에 든다. */
  .kbf-notice__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    gap: 2px;
  }
  .kbf-notice__date {
    width: auto;
    text-align: left;
  }

  /* 기보 한 줄 = 제목(두 줄까지) / 대국자 / 결과. 58px 고정이면 넘치므로 높이를 푼다. */
  .kbf-gibo__item {
    height: auto;
    min-height: 58px;
    padding-block: 10px;
  }
  /* 🚨 `align-items` 를 반드시 다시 준다. 기본 규칙(grid)의 `center` 가 남으면 세로 flex 에서는
     **가로** 정렬이 되어 대국자·결과가 글 영역 가운데로 몰린다(KBF-133 후속 · 1440 실측
     제목 x 1155 · 대국자 1221 · 결과 1216). */
  .kbf-gibo__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  /* 썸네일을 제목 첫 줄 높이에 맞춘다(사용자 결정 2A). 글이 3~4줄(78px)이라 세로 가운데면
     썸네일이 제목이 아니라 대국자 옆에 뜬다. */
  .kbf-gibo__link { align-items: flex-start; }
  .kbf-gibo__title {
    white-space: normal;
    word-break: keep-all;
  }
  .kbf-gibo__meta {
    width: auto;
    text-align: left;
  }
}


/* ══ Stage ④ Row6 — KBF 바둑리그 소개 (EUJ) ═══════════════════════════════ */

/* ⚠️ Row 가 아니라 Card 다 — .kbf-row 래퍼가 없고 .kbf-main-content 의 gap:28 이 간격을 준다. */
.kbf-league      { padding: 22px 24px 24px; }
.kbf-league__head { padding-bottom: 16px; }

.kbf-league__cards {
  display: flex;
  box-sizing: border-box;
  gap: 24px;
  width: 100%;
}
.kbf-league__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-basis: 0;
  flex-grow: 1;
  position: relative;
  overflow: hidden;                 /* 일러스트가 둥근 모서리 밖으로 새지 않게 */
  box-sizing: border-box;
  gap: 8px;
  height: 154px;
  padding-inline: 22px;
  border-radius: 6px;
}
.kbf-league__card--regional { background-color: var(--kbf-league-regional); }
.kbf-league__card--club     { background-color: var(--kbf-league-club); }
.kbf-league__card--student  { background-color: var(--kbf-league-student); }

/* 일러스트는 DOM 상 텍스트보다 먼저 온다. 텍스트에 relative 를 주어 스태킹을 고정한다.
   (시안 카드 2·3 은 SVG 가 마지막 자식이라 텍스트를 덮을 수 있는 구조였다.) */
.kbf-league__art { position: absolute; }
.kbf-league__card--regional .kbf-league__art { left: 300px; top: 22px; }
.kbf-league__card--club     .kbf-league__art { left: 288px; top: 26px; }
.kbf-league__card--student  .kbf-league__art { left: 284px; top: 24px; }

.kbf-league__name,
.kbf-league__sub,
.kbf-league__more { position: relative; }

.kbf-league__name {
  margin: 0;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: -0.03em;
}
.kbf-league__sub {
  margin: 0;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.02em;
}
.kbf-league__card--regional .kbf-league__sub { color: #B9C8E4; }
.kbf-league__card--club     .kbf-league__sub { color: #A9C6CE; }
.kbf-league__card--student  .kbf-league__sub { color: #F2DCC7; }

.kbf-league__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  gap: 5px;
  width: 112px;
  height: 32px;
  margin-top: 4px;
  border: 1px solid #FFFFFF8C;
  border-radius: var(--kbf-radius-chip);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* ══ 모바일 전용 요소 — 데스크톱에서는 숨긴다 ═════════════════════════════ */
/* KBF-41 (KBA-42) ④ · Paper 08 Public Mobile S26bm 실측 */
.kbf-mobile-nav,
.kbf-rank-tabs,
.kbf-news-tabs {
  display: none;
}

/* ══ 반응형 — 모바일 (S26bm 390×3788) ════════════════════════════════════ */
/* 브레이크포인트는 ①~③ 과 동일하게 KRDS 원본(max-width:767px)을 승계한다.
   ⚠️ 특이도 — kbf-home.css 에는 (0,3,0)+ 규칙이 있다
      .kbf-public .krds-btn.kbf-promo__cta · .kbf-media .tab.line.full > ul > li
      덮을 때 같은 수준으로 쓴다(D-41-01 이 ①②③ 연속 재발했다). */
@media (max-width: 767px) {

  /* ── 골격 ─────────────────────────────────────────────────────────────── */
  /* 히어로를 세로로 풀고 **네이비 배경을 __copy 로 옮긴다**.
     그래야 그 아래 Sub Nav·Filter·Recent 가 흰 배경 위에 온다(시안). */
  .kbf-hero {
    flex-direction: column;
    /* ⚠️ 데스크톱은 align-items:flex-start 다. column 으로 바꾸면 그것이 **자식 폭**을
       auto 로 만들어 Swiper 가 폭 계산에 실패한다(실측 scrollWidth 33,554,432 = 2^25).
       stretch 로 되돌려야 자식이 390 을 채운다. */
    align-items: stretch;
    gap: 0;
    height: auto;
    padding: 0;
    background-color: transparent;
  }
  .kbf-hero__copy {
    width: 100%;
    padding: 16px var(--kbf-gutter) 28px;
    background-color: var(--kbf-navy-hero);
  }
  .kbf-hero__eyebrow {
    color: var(--kbf-subhero-text, #B9C8E4);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.08em;
  }
  .kbf-hero__headline {
    margin-top: 10px;
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: -0.03em;
  }
  .kbf-hero__status {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
  }
  /* 히어로 안의 시즌·리그 셀렉트는 mobile-nav 의 Filter Bar 가 대신한다 */
  .kbf-hero__filters { display: none; }
  /* 캐러셀 좌우 화살표 — 시안에 없다(Dots 만) */
  .kbf-hero__nav { display: none; }

  .kbf-main-content {
    margin-top: 0;              /* 데스크톱 -64 오버랩은 네이비 겹침 연출이라 해제 */
    gap: 8px;
    padding: 12px var(--kbf-gutter) 0;   /* 좌우 여백을 컨테이너가 갖는다 → 블록 350 */
  }
  .kbf-row {
    flex-direction: column;     /* ⭐ 2열 → 1열. ③~⑫ 순서가 그대로 시안 순서다 */
    gap: 8px;
  }
  /* 카드 껍데기를 벗는다 — 시안은 블록 사이 테두리가 없다.
     ⚠️ padding 을 반드시 함께 벗겨야 한다. border-box 라 폭은 390 으로 맞아도
        content box 가 390−48=342 로 좁아져 콘텐츠가 넘치고 scrollWidth 가 401 이 된다
        (자식 rect.right 는 377 이라 「390 초과」 탐지에 걸리지 않는다). */
  .kbf-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
  }

  /* ── Sub Nav + Filter Bar (mobile-nav) ────────────────────────────────── */
  /* 시안 실측(S26bm) — Main Area 안에서 Sub Nav y=16 · Main Content y=72.
     ⇒ Sub Hero 하단과 Sub Nav 사이 16, Sub Nav 와 Filter Bar 사이 16.
     검산: 16 + 칩 40 + 16 + 셀렉트 40 = 112 = 시안 Main Content y(72) + 40 */
  .kbf-mobile-nav { display: block; padding-top: 16px; }
  .kbf-subnav {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 40px;
    padding-inline: var(--kbf-gutter);
  }
  .kbf-subnav__chip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 40px;
    padding-inline: 16px;
    background-color: var(--kbf-surface);
    border: 1px solid var(--kbf-line);
    border-radius: 20px;
    color: var(--kbf-slate);
    font-size: 15px;
    line-height: 23px;
  }
  .kbf-subnav__chip.is-active {
    background-color: var(--kbf-nav-active);
    border-color: var(--kbf-nav-active);
    color: var(--kbf-surface);
    font-weight: 700;
  }
  .kbf-mobile-filter { padding: 16px var(--kbf-gutter) 0; }
  .kbf-mobile-filter__select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 156px;
    height: 40px;
    padding-inline: 12px;
    background-color: var(--kbf-surface);
    border: 1px solid var(--kbf-line);
    border-radius: var(--kbf-radius-chip);
    color: var(--kbf-ink);
    font-size: 13px;
    line-height: 20px;
  }

  /* ── ② Recent Results ─────────────────────────────────────────────────── */
  .kbf-hero__results {
    gap: 8px;
    padding: 12px var(--kbf-gutter) 0;
  }
  /* ⚠️ Swiper CSS 의 .swiper{overflow:hidden} 이 없어 슬라이드 5장이 뷰포트 밖까지 늘어난다.
        데스크톱은 902 폭 안에서 우연히 가려졌을 뿐이다. */
  .kbf-result-swiper { overflow: hidden; }
  .kbf-hero__results-title {
    color: var(--kbf-ink);          /* 데스크톱은 네이비 위 흰 글씨였다 */
    font-size: 17px;
    line-height: 26px;
  }
  .kbf-hero__more {
    color: var(--kbf-nav-idle);
    font-size: 13px;
    line-height: 20px;
  }

  /* 결과 카드 — 데스크톱 [헤드/팀즈/풋] 3단을 3행 grid 로 재배치한다.
     display:contents 로 중간 래퍼를 풀어 손자들이 직접 grid item 이 되게 한다
     (②③ 에서 쓴 기법). ⚠️ 상단 4px 바는 시안 전용이라 border-top 으로 근사한다. */
  .kbf-result {
    display: grid;
    grid-template-columns: 1fr 24px 12px;
    column-gap: 8px;
    box-sizing: border-box;
    width: 100%;
    padding: 6px 12px;
    background-color: var(--kbf-surface);
    border: 1px solid var(--kbf-line);
    border-top: 4px solid var(--kbf-public-success, #147D50);
    border-radius: var(--kbf-radius-chip);
    overflow: hidden;
  }
  .kbf-result__head,
  .kbf-result__teams,
  .kbf-result__vs,
  .kbf-result__foot { display: contents; }
  .kbf-result__league,
  .kbf-result__bar,
  .kbf-result__vs-label,
  .kbf-result__detail { display: none; }
  /* 엠블럼 — 시안(S26bm)에 없다.
     🚨 셀렉터가 `svg` 만 지목하던 것을 넓혔다. 엠블럼이 SVG 도형에서 실제 로고 `<img>` 로
        바뀌면서, 좁은 셀렉터를 그대로 뒀다면 **모바일에 시안에 없는 로고가 되살아났을 것**이다.
        `.kbf-result__emblem` 은 `<img>` 와 2글자 폴백 `<span>` 을 함께 잡는다.
     ⚠️ `svg` 도 남겨 둔다 — 도형으로 되돌릴 일이 생겨도 이 규칙이 먼저 깨지지 않게 한다. */
  .kbf-result__team svg,
  .kbf-result__team .kbf-result__emblem { display: none; }

  .kbf-result__date {
    grid-row: 1;
    grid-column: 1;
    color: var(--kbf-nav-idle);
    font-size: 13px;
    line-height: 20px;
  }
  .kbf-result__venue {
    grid-row: 1;
    grid-column: 2 / -1;
    justify-self: end;
    white-space: nowrap;
    color: var(--kbf-nav-idle);
    font-size: 13px;
    line-height: 20px;
  }
  .kbf-result__team {
    grid-column: 1;
    align-items: flex-start;
    gap: 0;
  }
  .kbf-result__teams > .kbf-result__team:first-child { grid-row: 2; }
  .kbf-result__teams > .kbf-result__team:last-child  { grid-row: 3; }
  .kbf-result__teams > .kbf-result__team:first-child .kbf-result__team-name {
    color: var(--kbf-ink);
    font-weight: 500;
  }
  .kbf-result__team-name {
    color: var(--kbf-slate);
    font-size: 15px;
    line-height: 24px;
  }
  .kbf-result__score {
    grid-row: 2 / 4;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    font-size: 15px;
    line-height: 24px;
  }
  .kbf-result__score-sep { display: none; }
  .kbf-result__score-part:first-of-type { color: var(--kbf-ink); font-weight: 700; }
  .kbf-result__score-part:last-of-type  { color: var(--kbf-nav-idle); }
  .kbf-result::after {
    content: "›";
    grid-row: 2 / 4;
    grid-column: 3;
    align-self: center;
    color: var(--kbf-disabled);
    font-size: 17px;
    line-height: 26px;
  }

  /* ── ③ Quicklinks — 6타일 가로 1줄(852) → 2열 3행 ─────────────────────── */
  .kbf-quicklinks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    /* ⚠️ 원본이 height:174px(가로 1줄 기준)다. 그대로 두면 3행 grid 가 1행 높이로 잘려
       타일이 겹친다(실측 328 이어야 할 것이 174 였다). */
    height: auto;
  }
  .kbf-quicklink {
    width: auto;
    height: 104px;
  }

  /* ── ④ Broadcast Promo ────────────────────────────────────────────────── */
  .kbf-promo {
    width: 100%;
    height: 164px;           /* 시안 350×164 */
    /* 🚨 KBF-61 — 이 한 줄이 없으면 카드가 **높이 0 으로 접혀 통째로 사라진다.**
       ① 이 행은 모바일에서 flex-direction:column 이라 `flex-basis` 가 **높이**를 지배한다.
          데스크톱 단축속성 `flex: 468 1 0` 의 basis:0 이 살아남아 위 height:164px 를 이긴다.
       ② 보통은 flex 항목의 `min-height:auto`(자동 최소 크기)가 내용 높이만큼은 지켜 준다.
          그런데 `overflow` 가 visible 이 아니면 그 보호가 0 으로 풀린다 — 아래 overflow:hidden
          이 바로 그것이다. 그래서 같은 행의 .kbf-quicklinks(basis:0 이지만 overflow 기본값)는
          330px 을 지키고 이 카드만 무너졌다.
       ⇒ `flex` 3속성은 **세트로** 재선언한다(`D-41-01` ⑤ 와 같은 계열). */
    flex: 0 0 auto;
    overflow: hidden;        /* 원래 근거였던 __art SVG 는 KBF-61 이 주석 처리해 지금은 잠들었다.
                                지우지 않는다 — 되살리면 다시 필요하고, 위 ② 의 전제이기도 하다. */
  }
  /* absolute 배경 패널(left 268 · 200×174) — 468 폭 전제라 390 에서는 의미가 없다 */
  .kbf-promo__panel { display: none; }
  /* ⚠️ 원본이 .kbf-public .krds-btn.kbf-promo__cta (0,3,0) 라 같은 수준으로 쓴다 (D-41-01) */
  .kbf-public .krds-btn.kbf-promo__cta {
    width: 168px;
    height: 38px;
  }

  /* ── ⑤ Next Match · ⑥ Rank ────────────────────────────────────────────── */
  .kbf-next     { width: 100%; }
  /* 모바일은 옆 카드와 높이를 맞출 일이 없다(세로로 쌓인다) — 빈 자리를 짧게 둔다. */
  .kbf-next__empty { min-height: 140px; }
  .kbf-rankcard { width: 100%; }

  /* ── ⑦ News · 공지 ────────────────────────────────────────────────────── */
  /* 탭 라벨이 「리그 뉴스」인데 카드 제목도 「리그 뉴스」라 중복된다.
     시안 ⑦ 은 탭 아래 바로 대표기사가 온다 — 제목만 숨기고 「전체 보기」는 남긴다. */
  .kbf-news .kbf-card__title,
  .kbf-notice .kbf-card__title { display: none; }
  .kbf-news   { width: 100%; }
  .kbf-notice { width: 100%; }
  /* 데스크톱은 [사진 268 | 텍스트] 가로다. 시안은 사진 350×160 위 · 텍스트 아래 세로. */
  .kbf-news__featured {
    flex-direction: column;
    gap: 8px;
  }
  .kbf-news__photo,
  .kbf-news__photo-band { width: 100%; }
  .kbf-news__photo { height: 160px; }

  /* ── ⑧ Media — 썸네일 그리드를 가로 스크롤로 ──────────────────────────── */
  .kbf-media { width: 100%; }
  /* 탭 4개가 390 에서 2줄로 접힌다. 시안은 「Tabs (scroll)」 — 한 줄 가로 스크롤이다.
     ⚠️ 원본이 .kbf-media .tab.line.full > ul (0,4,0) 라 같은 수준으로 쓴다 (D-41-01) */
  .kbf-media .tab.line.full > ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .kbf-media .tab.line.full > ul::-webkit-scrollbar { display: none; }
  .kbf-media .tab.line.full > ul > li { flex-shrink: 0; }
  .kbf-media__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .kbf-media__grid::-webkit-scrollbar { display: none; }
  .kbf-media__item,
  .kbf-media__thumb {
    flex-shrink: 0;
    width: 200px;
  }

  /* ── ⑨ 대회 배너 (KBF-55) ─────────────────────────────────────────────── */
  .kbf-app { width: 100%; }
  /* 🚨 `flex: 348 1 0` 을 **세트로** 되돌린다. 모바일은 부모가 column 이라
     `flex-basis: 0` 이 **높이**에 걸린다 — 기준 높이가 0 이 되고 남는 공간이 없어
     `grow` 가 아무것도 더하지 못한다. 자식이 222px 인데 부모가 0 이 됐다
     (2026-08-27 실측). `D-41-01` 다섯 번째 사례 — **flex 3속성은 세트로 재선언한다.** */
  .kbf-app { flex: 0 0 auto; }

  /* ⚠️ KBF-62 — 뷰포트별 배너 전환을 걷어냈다. 한 장이라 고를 것이 없다.
     슬롯은 `.kbf-app__link` 의 비율이 만든다(390 실측 350×306). */

  /* ── ⑩ Today · ⑪ Gibo ─────────────────────────────────────────────────── */
  .kbf-today { width: 100%; }
  .kbf-gibo  { width: 100%; }

  /* ── ⑥⑦ 탭 — 순위(팀/개인) · 소식(뉴스/공지) ──────────────────────────── */
  /* 마크업 계약은 kbf-public.js 참조: [data-kbf-tabs] > [data-kbf-tab] · [data-kbf-panel]
     ⚠️ .is-hidden 은 **여기(@media) 안에서만** display:none 이다.
        데스크톱에서는 클래스가 붙어 있어도 두 카드가 그대로 나란히 보인다. */
  .kbf-rank-tabs,
  .kbf-news-tabs { display: block; }
  .kbf-rank-tabs__list,
  .kbf-news-tabs__list {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .kbf-rank-tab,
  .kbf-news-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 34px;
    padding-inline: 14px;
    background-color: var(--kbf-surface-alt);
    border: 0;
    border-radius: var(--kbf-radius-chip);
    color: var(--kbf-slate);
    font-size: 15px;
    line-height: 24px;
    cursor: pointer;
  }
  .kbf-rank-tab.is-active,
  .kbf-news-tab.is-active {
    background-color: var(--kbf-ink);
    color: var(--kbf-surface);
    font-weight: 700;
  }
  /* 계약 기반으로 일반화한다 — 클래스를 하나씩 열거하면 빠뜨린다
     (실제로 .kbf-news.is-hidden 을 빠뜨려 뉴스와 공지가 동시에 보였다). */
  [data-kbf-panel].is-hidden { display: none; }

  /* ── ⑫ League — 카드 3장을 가로 스크롤로 ──────────────────────────────── */
  .kbf-league { width: 100%; }
  .kbf-league__cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;                 /* 시안 카드 x: 0·250·500 ⇒ 240 + 10 */
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .kbf-league__cards::-webkit-scrollbar { display: none; }
  /* 🚨 D-41-01 계열 — 이번 건은 「특이도」가 아니라 「flex 속성 간 우선순위」다.
     데스크톱이 flex-basis:0 + flex-grow:1 을 걸어 두었는데 여기서 flex-shrink 만
     껐다. flex 컨테이너에서는 flex-basis 가 width 를 이기므로 width:240px 이
     통째로 무시되고 3카드가 컨테이너를 나눠 가졌다 — 실측 111px = (350-10×2)/3.
     가로 스크롤이 무력화되고 2번 카드가 scrollH 183 > clientH 170 으로 넘쳤다.
     ⇒ 모바일에서 데스크톱의 flex 3속성은 **세트로** 되돌려야 한다. */
  .kbf-league__card {
    flex: 0 0 240px;         /* grow 0 · shrink 0 · basis 240 — width 보다 이것이 이긴다 */
    width: 240px;
    height: 170px;
    padding-inline: 16px;    /* 데스크톱 22 → 시안 16 (내부 텍스트 폭 208) */
    overflow: hidden;        /* __art SVG 가 absolute 로 카드 밖까지 나간다 */
  }
}

/* ══════════════════════════════════════════════════════════════════════
   KBF-47 QA — 태블릿(768~1439) 잘림 해소 · 홈
   🚨 미디어 그리드 4항목(219×4 + gap 48 = 924)이 컨테이너(405)를 넘어 3개가 잘렸다.
   ⇒ 모바일과 같은 방식 — **가로 스크롤로 도달 가능**하게 만든다.
      「밀 수 있으면 손실이 아니다」가 D-45-01 의 구분이다.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1439px) {
  /* ── 대회 배너 (KBF-55) ────────────────────────────────────────────────
     🚨 이 구간에서 배너가 **158px 로 눌려 글자가 잘렸다**(2026-08-27 실측 —
        「2026」이 「6」으로, 「KBF바둑리그」가 「KBF바」로 보였다).
        `object-fit: cover` 는 비율을 지키느라 **좌우를 잘라낸다.**

     ⚠️ 「이미지로 바꾸면 눌려도 비율만 준다」는 판단이 반쪽이었다 —
        버튼 21px 문제는 사라졌지만 **글자 잘림이라는 새 문제**가 생겼다.

     ⇒ 배너를 **한 줄 아래로 내리고 가로형**을 쓴다. 폭이 넉넉해져 잘리지 않는다. */
  .kbf-row--media-app { flex-wrap: wrap; }
  .kbf-card.kbf-media { flex: 1 1 100%; }
  .kbf-app {
    flex: 0 0 auto;
    width: 100%;
    max-width: 460px;      /* 너무 넓어지면 배너가 띠처럼 늘어진다 */
    margin-inline: auto;
  }
  /* ⚠️ KBF-62 — 배너 한 장이라 전환이 없다(768 실측 460×402). */

  .kbf-media__grid {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .kbf-media__grid::-webkit-scrollbar { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   KBF-50 — 미디어 썸네일 실이미지
   `.kbf-media__thumb` 은 219×124 (radius 4 · overflow 미지정) 이므로
   이미지를 absolute 로 깔고 **부모에 clip 을 준다** — 그래야 radius 가 먹는다.
   ⚠️ 오버레이(배지·재생·시간)는 그대로 위에 뜬다(그쪽이 absolute 이거나 나중 형제).
   ══════════════════════════════════════════════════════════════════════ */
.kbf-media__thumb { overflow: hidden; }
.kbf-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}