@charset "UTF-8";
/* ============================================================================
   KBF 공개 화면 — KRDS 커스터마이즈 레이어
   ----------------------------------------------------------------------------
   KBF-28 (KBA-29) · Paper `07 Public Desktop` S26b/S31b/S31c
   추출 시점 Paper contentHash: ed9c241c

   원칙 — KRDS 개발자 가이드 준수
     "원본 코드값을 직접 수정하지 않고 프로젝트의 CSS 에 필요한
      토큰 값(CSS variable)을 재선언한다"
     → public/krds/1.1.0/* 는 무수정. 모든 커스터마이즈는 이 파일에서만.

   로드 순서
     1) /krds/1.1.0/css/krds.min.css   (KRDS 원본)
     2) /krds/kbf-public.css           (이 파일 — 후행이므로 동일 특이도에서 승)

   단위 — KRDS 는 html{font-size:62.5%} (1rem=10px) 를 선언한다.
     이 파일은 Paper 실측값을 px 로 적는다. px 는 루트 폰트 크기와 무관하므로
     시안 픽셀 일치가 보장된다. KRDS 컴포넌트 자체는 rem 그대로 둔다.
   ========================================================================= */


/* ── 1. Pretendard GOV (SIL Open Font License 1.1) ───────────────────────── */
/* KRDS 토큰 --krds-typo-font-type 이 이미 "Pretendard GOV" 이므로
   @font-face 만 선언하면 KRDS 컴포넌트에도 자동 적용된다. */

@font-face {
  font-family: "Pretendard GOV";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/pretendard-gov/PretendardGOV-Regular.subset.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/pretendard-gov/PretendardGOV-Medium.subset.woff2") format("woff2");
}
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/pretendard-gov/PretendardGOV-Bold.subset.woff2") format("woff2");
}

/* Paper 시안은 800·900 을 쓰나 배포 폰트에는 없다.
   400/500/700 만 실제 파일이 있으므로 그 이상은 700 으로 수렴시킨다.
   (합성 굵기 금지 — font-synthesis 를 끄지 않으면 브라우저가 가짜 볼드를 만든다) */
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/pretendard-gov/PretendardGOV-Bold.subset.woff2") format("woff2");
}


/* ── 2. KBF 확장 토큰 (Paper 실측값) ─────────────────────────────────────── */
/* 중립색은 KRDS gray 로 스냅하지 않고 시안값을 그대로 쓴다 —
   이번 범위는 "시안과 최대한 동일"이 우선이기 때문(KBA-29 알려진 제약 2). */

:root {
  /* 브랜드 */
  --kbf-navy-hero:        #002462;  /* 히어로 배경        (KRDS primary-80 ΔE 1.5) */
  --kbf-navy-promo:       #00328E;  /* 앱 프로모 배경     (primary-70 ΔE 3.7)      */
  --kbf-navy-sub:         #0A2E6E;  /* 히어로 셀렉트 배경                          */
  --kbf-logo:             #062C8B;  /* 로고 잉크          (primary-70 ΔE 7.4)      */
  --kbf-link:             #1D4ABC;  /* 링크·활성          (primary-60 ΔE 8.0)      */
  --kbf-accent-active:    #0036A5;  /* 필터 탭 활성 채움  (KBF-36 묶음 2 · S25b) */
  --kbf-broadcast:        #FAC305;  /* K바둑 CTA          (warning-30 ΔE 12.9)     */
  --kbf-live:             #DA0000;  /* LIVE 배지 — KBF-41 ④-b 정규화              */

  /* 리그 구분 */
  --kbf-league-regional:  #003078;  /* 전국시도바둑리그        */
  --kbf-league-club:      #0D4453;  /* 전국동호인 최강바둑리그 */
  /* ⚠️ 원값 #B66721 은 흰 글씨 대비가 4.24:1 로 AA(4.5) 미달이었다(D-38-06).
     같은 구성의 regional 12.4:1 · club 10.7:1 과 달리 주황만 중간 명도라 생긴 문제다.
     ΔE 5.7 의 최소 변경으로 4.98:1 을 확보했다. 발주처 브랜드 가이드가 확인되면
     원값으로 되돌릴 수 있도록 여기에 남긴다. */
  --kbf-league-student:   #A85C1E;  /* 전국학생바둑리그 (원값 #B66721) */

  /* 중립 (Gen-1 프로젝트 토큰 계승분 포함) */
  --kbf-ink:              #17191E;  /* 본문 기본       */
  --kbf-graphite:         #2C2F36;  /* 강조 보조       */
  --kbf-slate:            #474D5B;  /* 푸터 본문       */
  --kbf-muted:            #667085;  /* 보조 텍스트     */
  --kbf-disabled:         #98A2B3;  /* 날짜·비활성     */
  --kbf-line:             #C9CED7;  /* 입력 테두리     */
  --kbf-line-soft:        #D6DAE1;  /* 푸터 구분선     */
  --kbf-border:           #E3E7EC;  /* 카드·헤더 경계  */
  --kbf-divider:          #EDEFF3;  /* 목록 구분선     */
  --kbf-row-line:         #F1F3F6;  /* 표 행 구분선    */
  --kbf-surface-alt:      #F6F7F8;  /* 표 헤더 배경    */
  --kbf-surface-head:     #FAFAFB;  /* 카드 헤드 배경 — KBF-41 ④-b 정규화 */
  --kbf-page:             #F4F6F8;  /* 페이지 배경     */
  --kbf-surface:          #FFFFFF;

  /* 모바일 셸 (KBF-41 · Paper 08 Public Mobile 실측) */
  /* ⚠️ 시안은 --krds-gray-10 / -50 / --krds-primary-60 으로 적혀 있으나 그 이름들은
     Paper 문서 토큰이고 krds.min.css 는 정의하지 않는다(실측 0건). 그래서 값만 옮긴다.
     ✅ ④-b 해소 — 「경계선 회색 3종」(--kbf-nav-line #E6E8EA · --kbf-border #E3E7EC ·
     --kbf-border-thin #E9ECF1)은 서로 ΔE 1.7~2.1 로 육안 구분이 불가해
     **--kbf-border 하나로 수렴**시켰다. 앞의 둘은 삭제했다. */
  --kbf-nav-idle:         #6D7882;  /* Bottom Nav 비활성    */
  --kbf-nav-active:       #0B50D0;  /* Bottom Nav 활성      */

  /* 서브페이지 Sub Hero (KBF-36 · Paper S00b 실측). KRDS 팔레트에 없는 KBF 고유색이다.
     ⚠️ 나머지 서브페이지 색(gray-0/5/10/20/70/95 · primary-5/60)은 로컬 사본을 만들지
        않는다 — krds.min.css `:root` 가 `--krds-color-light-*` 로 이미 정의하고 값도
        Paper 토큰과 정확히 일치한다(8종 실측 대조). 사본은 갈라질 뿐이다. */
  --kbf-navy-subhero:     #011F51;  /* Sub Hero Band 배경   */
  --kbf-subhero-text:     #B9C8E4;  /* 브레드크럼·리드 본문 */
  --kbf-subhero-divider:  #7C93BE;  /* 브레드크럼 꺾쇠      */

  /* 레이아웃 */
  --kbf-container:        1440px;
  --kbf-gutter:             48px;   /* 좌우 패딩 → 내부 폭 1344 */
  --kbf-radius-card:         8px;
  --kbf-radius-ctl:          6px;
  --kbf-radius-chip:         4px;
}


/* ── 3. 페이지 기반 ─────────────────────────────────────────────────────── */
/* KRDS 가 html·body 를 재정의하므로 여기서 KBF 값으로 되돌린다. */

body.kbf-public {
  background-color: var(--kbf-page);
  color: var(--kbf-ink);
  font-family: "Pretendard GOV", "Noto Sans KR", system-ui, sans-serif;
  font-synthesis: none;              /* 가짜 볼드/이탤릭 금지 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;                  /* 레거시 common.css 의 center 방지용 안전장치 */
}

/* Paper 는 1440 고정 컴프다. width:100% 로 두면 넓은 화면에서 늘어나
   카드 폭이 시안과 어긋난다(실측: 289px → 494px). 고정 폭 + 가운데 정렬로 못박는다. */
/* ⚠️ KBF-45 — `width` 가 아니라 `max-width` 다.
   width 로 두면 뷰포트가 좁아도 1440 을 차지해 768~1439 구간에서
   가로 스크롤이 강제된다(실측: 768·1024·1280 전부 scrollWidth 1440).
   @media (max-width:767px) 는 이 값을 덮지 않으므로 모바일만 멀쩡했다. */
.kbf-public .kbf-shell {
  max-width: var(--kbf-container);
  width: 100%;
  margin-inline: auto;
}

/* 폭 1344 를 만드는 공통 거터 */
.kbf-inner {
  box-sizing: border-box;
  width: 100%;
  padding-inline: var(--kbf-gutter);
}


/* ── 5. Public Header ───────────────────────────────────────────────────── */

.kbf-header {
  display: flex;
  align-items: center;
  gap: 64px;
  box-sizing: border-box;
  width: 100%;
  height: 92px;
  padding-inline: var(--kbf-gutter);
  background-color: var(--kbf-surface);
  border-bottom: 1px solid var(--kbf-border);
}

/* 로고 */
.kbf-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 7px;
  text-decoration: none;
}
.kbf-logo__mark {
  color: var(--kbf-logo);
  font-size: 30px;
  font-weight: 700;   /* 배포 폰트가 PretendardGOV-Bold(700)까지라 900 은 렌더되지 않았다 */
  line-height: 45px;
  letter-spacing: 0;
}
.kbf-logo__name {
  color: var(--kbf-ink);
  font-size: 23px;
  font-weight: 700;
  line-height: 35px;
  letter-spacing: 0;
}

/* GNB — 1뎁스 평면 7항목 */
.kbf-gnb {
  display: flex;
  align-items: center;
  align-self: center;
  flex-grow: 1;
  gap: 44px;
}
.kbf-gnb__item {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 13px 4px 10px;
  border-bottom: 3px solid transparent;
  color: var(--kbf-ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0;
  text-decoration: none;
}
.kbf-gnb__item[aria-current="page"] {
  /* KBF-36 — 시안 마스터가 생 hex 를 KRDS 토큰으로 스냅했다. krds.min.css `:root` 가
     `--krds-color-light-primary-60:#0b50d0` 를 정의하므로 로컬 사본을 만들지 않고 직접 쓴다.
     ⚠️ 다른 링크는 여전히 `--kbf-link`(#1D4ABC · ΔE 8.0)다 — 마스터 교정표가 GNB active
        한 축만 지목했기 때문이며 전면 스냅은 이 티켓 범위 밖이다(D-36-02). */
  border-bottom-color: var(--krds-color-light-primary-60);
  color: var(--krds-color-light-primary-60);
  font-weight: 700;
}
.kbf-gnb__item:hover { color: var(--kbf-link); }

/* 헤더 액션 */
.kbf-header__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 18px;
}

/* K바둑 방송 CTA — KRDS .krds-btn 마크업에 시안 치수를 얹는다 */
.kbf-public .krds-btn.kbf-btn-broadcast {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  min-height: 42px;
  padding-inline: 18px;
  border: 0;
  border-radius: var(--kbf-radius-ctl);
  background-color: var(--kbf-broadcast);
  color: var(--kbf-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;
  letter-spacing: 0;
}

.kbf-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}


/* ── 6. Sponsor Bar ─────────────────────────────────────────────────────── */

.kbf-sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 92px;
  gap: 0 24px;
  padding-inline: var(--kbf-gutter);
  background-color: var(--kbf-surface);
  border-top: 1px solid var(--kbf-border);
}

/* 역할 하나 + 그 역할에 속한 로고들 = 쪼개지지 않는 한 덩어리.
   🚨 배지를 로고의 **형제**로 두면 태블릿 `flex-wrap` 에서 갈라진다 —
      `재정후원` 만 윗줄에 남고 문체부·KSPO 가 아랫줄로 떨어진다. */
.kbf-sponsor__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 14px;
}
/* 배지 자체는 KRDS 원본(`krds-badge bg-light-gray`)이 그린다. 눌리지 않게만 잡는다. */
.kbf-sponsor__role {
  flex-shrink: 0;
}
.kbf-sponsor__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* 레거시 `common.css:92` 의 `height:35px` 를 계승한다 — 로고 4종이 전부 h35 로
   제작돼 있어 이 한 줄이 넷을 같은 크기로 세운다.
   ⚠️ 이전의 슬롯 고정폭(`--kba/mcst/kspo/kbd` 280/280/300/240)은 **텍스트 슬롯 기준**
      이라 실물 로고로 바뀌며 근거를 잃었다. 남겨 두면 로고 옆에 설명 없는 여백이 생긴다
      (166px 로고에 280px 슬롯 → 114px 공백). 그래서 4종을 함께 지웠다. */
.kbf-sponsor__logo {
  display: block;
  width: auto;
  height: 35px;
}
.kbf-sponsor__divider {
  flex-shrink: 0;
  width: 1px;
  height: 34px;
  background-color: var(--kbf-border);
}


/* ── 7. Footer ──────────────────────────────────────────────────────────── */

.kbf-footer-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 62px;
  padding-inline: var(--kbf-gutter);
  background-color: var(--kbf-surface);
  border-top: 1px solid var(--kbf-border);
}
.kbf-footer-links__list {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* KBF-36 — 정책 3종은 목적지가 없어 span, 사이트맵은 오버레이를 여는 button 이다.
   세 태그가 같은 타이포를 공유하도록 클래스를 함께 받는다. */
.kbf-footer-links__list a,
.kbf-footer-links__list .kbf-footer-links__item {
  color: var(--kbf-slate);
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
  text-decoration: none;
}
.kbf-footer-links__list .is-primary {
  color: var(--kbf-link);
  font-weight: 700;
}
/* KBF-36 — 사이트맵은 button 이므로 브라우저 기본 스타일을 지운다. */
/* KBF-36 — 「시안은 링크로 그렸으나 목적지가 없는 것」의 공통 표시.
   빈 앵커(href="#")를 쓰지 않기로 했으므로 span/button 이 되며, a 의 기본 커서가
   사라진다. 색·크기는 각 컴포넌트 규칙이 그대로 적용된다(CSS 는 전부 클래스 셀렉터). */
.kbf-public [aria-disabled="true"] { cursor: default; }

.kbf-footer-links__btn {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* 🚨 `display: block` 이 **없어서 폭 0 으로 렌더되고 있었다**(KBF-28 이래 · 2026-08-30 발견).
   `<li>` 안의 `<span>` 은 인라인이라 `width`·`height` 가 **무시된다.**
   ⭐ 바로 아래 `kbf-footer-info__sep` 은 부모가 flex 라 span 이 **flex item 이 되어**
      자동으로 block 처럼 굴렀다 — 같은 CSS 인데 한쪽만 보였던 이유다.
   ⚠️ 1px 선이라 아무도 눈치채지 못했다. 시안에는 `Rectangle 1×12` 로 명시돼 있다. */
.kbf-footer-links__sep {
  display: block;
  width: 1px;
  height: 12px;
  background-color: var(--kbf-line-soft);
}

/* 「관련 사이트」 실동작 (KBF-42 7단계) — `filter-bar` 와 같은 방식.
   래퍼를 네이티브 셀렉트로 덮고 셰브론을 얹는다.
   🚨 셰브론에 `margin-left: auto` 가 필요하다 — `space-between` 은 **흐름에 남은 자식이
      둘 이상일 때만** 「양끝」이고, `<select>` 는 `absolute` 라 흐름에서 빠진다.
      같은 함정을 필터바에서 이미 겪었다(`D-54-11` 커밋 참조). */
.kbf-related-select { position: relative; }
.kbf-related-select > svg { pointer-events: none; margin-left: auto; }
.kbf-related-select__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-inline: 16px;
  padding-right: 40px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* 셀렉트(데스크톱)와 바텀시트 트리거(모바일)는 **같은 모양**이어야 한다 —
   뷰포트가 바뀌어도 사용자가 같은 것으로 알아본다. 그래서 껍데기를 공유한다. */
.kbf-related-select,
.kbf-related-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 222px;
  height: 38px;
  padding-inline: 14px;
  border: 1px solid var(--kbf-line);
  border-radius: var(--kbf-radius-chip);
  background-color: var(--kbf-surface);
  color: var(--kbf-slate);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
}
/* 🚨 트리거는 **모바일 전용**이다. 데스크톱에서는 네이티브 셀렉트를 쓴다 —
      JS 가 죽어도 목록이 펼쳐지는 이점이 있고, 마우스에서는 드롭다운이 어긋나지 않는다.
   ⚠️ `display:none` 이라 접근성 트리에서도 빠진다 ⇒ 스크린리더가 둘을 겹쳐 읽지 않는다. */
.kbf-related-trigger {
  display: none;
  cursor: pointer;
  font-family: inherit;
}
.kbf-related-trigger > svg { pointer-events: none; flex-shrink: 0; }

.kbf-footer-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  /* ⚠️ KBF-67 — 단축형 `padding` 을 갈랐다. 두면 `.kbf-bleed` 의 `padding-inline` 이
     **뒤에 와도** 네 방향이 함께 재설정되어 위아래 여백이 무너진다. */
  padding-block: 26px 34px;
  padding-inline: var(--kbf-gutter);
  background-color: var(--kbf-surface);
  border-top: 1px solid var(--kbf-border);
}
/* 🚨 `flex-wrap` 이 없으면 자식이 **줄을 바꾸는 대신 폭이 깎인다**(초기값 `nowrap` +
      기본 `flex-shrink: 1`). 깎인 폭 안에서 글자가 끊겨 「전화: 02)」/「2282-5500」 처럼
      **하나의 값이 두 줄로 갈라진다**(발주처 지적 2026-09-09 · 320~430px 에서 5개 전부).
   ⚠️ **넘침 검사로는 못 잡는다** — 넘치는 대신 깎아서 담으므로 `scrollWidth === clientWidth`
      가 유지된다. 볼 것은 넘침이 아니라 **줄 수**다. 그리고 줄 수는 텍스트 노드에 `Range` 를
      걸어야 센다 — flex item 은 블록 박스라 `el.getClientRects()` 가 몇 줄이든 1개만 준다.
   🔑 이 선언은 `67706ee`(`KBF-42` 브랜치)에 있었으나 그 브랜치가 `main` 에 병합되지 않았고,
      값만 다시 넣은 `571ee3b`(`KBF-69`)가 CSS 를 안 가져와 **유실됐다**(`KBF-100`).
   ⚠️ **`white-space: nowrap` 을 곁들이지 않는다.** 원본은 전화·팩스에 그것을 함께 넣었으나
      갈라서 재 보니 wrap 만으로 결과가 같았다(8개 폭 실측). 모든 값에 주면 320px 에서
      요소가 화면 밖으로 나간다.
   ⭐ 세로 gap 을 6px 로 따로 준다 — 줄이 나뉘어도 두 줄이 한 덩어리로 읽힌다.
   ⚠️ 데스크톱(내부 1344)은 한 줄에 다 들어가 wrap 이 발동하지 않는다(768·1024·1440 높이 20 실측). */
.kbf-footer-info__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}
.kbf-footer-info__org {
  color: var(--kbf-graphite);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
}
.kbf-footer-info__txt {
  color: var(--kbf-muted);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
}
.kbf-footer-info__sep {
  width: 1px;
  height: 11px;
  background-color: var(--kbf-line-soft);
}
.kbf-footer-info__copy {
  padding-top: 4px;
  color: var(--kbf-disabled);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0;
}
/* 제작사 링크 — 부모 `__copy` 의 `--kbf-disabled`(#98A2B3)를 상속하면 대비가 **2.58:1** 로
   WCAG AA(4.5:1)에 미달한다. `--kbf-slate`(#474D5B)로 올리면 **8.47:1** 이다(실측).
   ⚠️ 밑줄을 함께 준다 — KRDS 기본이 `a { text-decoration: none }` 이라 색만으로는
      이것이 링크인지 알 수 없다.
   ⚠️ **색을 검증할 때는 전이를 먼저 꺼라**(`transition: none`). 안 끄면 전이 중간값
      (예 `rgb(111,119,135)`)이 잡혀 통과·실패가 타이밍에 따라 갈린다.
   🔑 이것도 `67706ee` 유실분이다 — 위 `__row` 와 같은 커밋에 있었다(`KBF-100`). */
.kbf-footer-info__copy a {
  color: var(--kbf-slate);
  text-decoration: underline;
}

/* KRDS 출처 표기 — 저작권법 제24조의2 출처 표기 의무 이행 */
.kbf-krds-notice {
  padding-top: 6px;
  color: var(--kbf-disabled);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: -0.02em;
}
.kbf-krds-notice a { color: var(--kbf-disabled); text-decoration: underline; }

/* ── 8. Bottom Navigation (모바일 전용) ──────────────────────────────────── */
/* KBF-41 (KBA-42) · Paper S00bm/S26bm 실측 — h76 · pt10 · 탭 w80 · 라벨 13/20
   데스크톱에서는 숨긴다. DOM 에는 있으나 렌더되지 않으므로 1440 회귀가 없다. */
.kbf-bottom-nav {
  display: none;
}

/* ── 8.5 「맨 위로」 (KBF-81 · S00b·S00bm 실측) ───────────────────────────
   ⚠️ 기본이 **안 보이고 초점도 안 가는** 상태다. `visibility: hidden` 은 화면에서만
      숨기는 것이 아니라 **Tab 순서와 접근성 트리에서도 뺀다** — `opacity: 0` 만 쓰면
      보이지 않는 버튼에 초점이 가서 키보드 사용자가 허공을 누른다.
   ⇒ JS 가 없으면 이 상태로 남는다. **죽은 버튼을 두지 않는다**(`AC-7`).

   ⚠️ `z-index` 는 Bottom Nav(100)보다 **낮게** 둔다. 자리가 겹치지 않도록 띄워 두었지만
      (모바일 bottom 92 = 76 + 16) 폰트 확대 등으로 겹치는 날이 오면 **하단 내비가 이겨야**
      한다 — 그쪽이 주 내비게이션이다. */
.kbf-gotop {
  position: fixed;
  right: 48px;      /* 콘텐츠 그리드 여백과 같다(1440 − 1344 = 96 ÷ 2) */
  bottom: 40px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background-color: var(--kbf-accent-active);
  color: var(--krds-color-light-gray-0);
  box-shadow: 0 2px 10px rgba(19, 20, 22, 0.18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.kbf-gotop.is-on {
  opacity: 1;
  visibility: visible;
}
.kbf-gotop:focus-visible {
  outline: 2px solid var(--kbf-link);
  outline-offset: 2px;
}
/* 움직임에 어지러움을 느끼는 사용자가 있다. 나타나고 사라지는 것 자체는 남기되
   **움직임만** 없앤다 — 상태 변화가 안 보이면 버튼이 있는지 알 수 없다. */
@media (prefers-reduced-motion: reduce) {
  .kbf-gotop { transition: none; }
}

/* ── 9. 반응형 — 모바일 ─────────────────────────────────────────────────── */
/* 브레이크포인트는 KRDS 원본을 승계한다 — krds.min.css 가 max-width:767px 를
   모바일 경계로 쓰고 Paper 토큰 --breakpoint-tablet 이 768px 이라 767/768 로
   정확히 맞물린다. 신규 브레이크포인트를 만들지 않는다.

   ⚠️ 768~1439 구간은 이 범위 밖이라 1440 고정이 유지된다(태블릿에서 가로 스크롤).
      KBA-42 수용기준이 390 / 1440 만 요구하므로 **의도적으로 남긴 공백**이다. */
/* ══ 반응형 — 태블릿 (768~1439) ═══════════════════════════════════════════
   ⚠️ Paper 에 이 구간 시안이 없다(1440·390 두 벌만 작도). **규칙을 우리가 정의**한다.
      근거는 실측 — 1024 에서 헤더 내부가 928px 인데
      로고 151 + gap 64 + GNB 670 + gap 64 + Actions 266 = **1215** 로 287 초과했다.
      ⇒ 잘림의 주원인이 헤더였다.

   ⚠️⚠️ **가로 스크롤이 문제가 아니었다** — `body { overflow-x: hidden }` 때문에
      애초에 밀 수 없고, 넘친 부분은 **잘려서 영구 손실**된다. 스크롤보다 나쁘다.
      (KBF-45 티켓 본문의 「사용자가 가로로 밀어야 콘텐츠를 본다」는 사실이 아니다) */
/* ══ 공용 full-bleed — 배경만 화면 끝까지, 내용은 제자리 (KBF-67) ═════════════
   셸(`.kbf-shell`)이 `max-width: 1440` 이라 1920 화면에서 좌우 240px 흰 여백이 남는다.
   크롬 다섯 영역과 홈 히어로가 이 클래스로 **배경만** 셸을 탈출한다.
   ⚠️ **본문 행은 대상이 아니다** — 넓히면 홈 카드가 한쪽만 커진다(`KBF-60` 보류 사유).

   🔑 **정의 위치가 계약이다.** 대상 규칙 다섯이 각자 `padding-inline` 을 선언하고
      `.kbf-bleed` 와 특이도가 **똑같다**(둘 다 `(0,1,0)`). 같으면 **소스 순서가 이긴다.**
      ⇒ 반드시 다섯 규칙 **뒤** · 첫 `@media` **앞**에 둔다.
      ⚠️ `D-41-01`(CSS 재선언 무효화)이 이 저장소에서 5회 반복됐다. 옮기지 말 것.
      🔒 `ShellBleedTest` 가 이 순서를 **문자열 인덱스로 잠근다.**

   ⭐ **아래 미디어쿼리들과 충돌하지 않는다** — 전부 `≤1439` 이고 그 구간은
      셸 == 뷰포트라 `50% - 50vw = 0` 이 되어 **이 규칙이 no-op** 이다.
      거기서 `padding-inline: var(--kbf-gutter)` 를 다시 선언해도 계산 결과가 같다.

   🔑 **`margin-inline` 과 `padding-inline` 은 짝이다.** `margin` 만 있으면 배경과
      **함께 내용도** 밖으로 나간다. `padding` 이 나간 만큼(`50vw - 50%`)을 도로 뺀다.

   ⚠️ 대상이 단축형 `padding` 을 쓰면 **여기 뒤에 와도** 가로 보정이 날아간다.
      `.kbf-footer-info` 를 `padding-block` + `padding-inline` 으로 가른 이유다.

   ⚠️ `100vw` 는 세로 스크롤바 폭을 포함한다. 계산은 자기 보정되나(배경이 좌우 각
      ~7.5px 넘쳐 `body{overflow-x:hidden}` 에 잘리고 내용 위치는 맞는다)
      **클래식 스크롤바 실기기 확인은 아직 못 했다** — `D-66-03` 「확인 필요」. */
.kbf-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50% + var(--kbf-gutter));
}

@media (min-width: 768px) and (max-width: 1439px) {

  /* 헤더 — 간격을 줄여 3블록이 들어가게 한다 */
  .kbf-header { gap: 24px; }
  .kbf-gnb    { gap: 20px; min-width: 0; }
  .kbf-header__actions { gap: 12px; }

  /* GNB — 줄바꿈을 막고(「대진표/결과」가 2줄로 깨졌다) 폰트를 한 단계 줄인다 */
  .kbf-gnb__item { white-space: nowrap; font-size: 15px; }

  /* K바둑 CTA — ⚠️ 숨기지 않는다(발주처 핵심 동선). 폭만 줄인다.
     특이도 (0,3,0) — 원본 `.kbf-public .krds-btn.kbf-btn-broadcast` 와 맞춘다(D-41-01). */
  .kbf-public .krds-btn.kbf-btn-broadcast {
    font-size: 13px;
    padding-inline: 12px;
    gap: 6px;
  }

  /* ── 다열 그리드 축약 ──────────────────────────────────────────────────
     시안 카드 폭이 1440 기준 절대값이라(462·405·660 …) 태블릿에서 안 줄어
     오른쪽 카드가 통째로 잘렸다(실측: 「개인 순위 TOP 5」).
     ⇒ wrap 을 허용하고 340px 를 하한으로 균등 분배한다.
        928px 에서 2열, 768px 에서 2열, 좁아지면 1열로 자연히 접힌다.

     ⚠️ D-41-01 ⑤ — 카드에 `flex-shrink:0` + `width` 가 함께 걸려 있으므로
        flex 3속성과 width 를 **세트로** 재선언해야 이긴다.
     ⚠️ 퀵링크·미디어 행은 제외한다 — 이미 852:468 · 972:348 **비율**로 유동화돼 있고
        여기서 덮으면 그 비율이 깨진다. */
  .kbf-row--match-rank,
  .kbf-row--news-notice,
  .kbf-row--today-gibo {
    flex-wrap: wrap;
  }
  .kbf-row--match-rank > *,
  .kbf-row--news-notice > *,
  .kbf-row--today-gibo > * {
    flex: 1 1 340px;
    width: auto;
    min-width: 0;
  }

  /* ── 퀵링크 6항목 ─────────────────────────────────────────────────────
     ⚠️ 항목이 132px 고정이라 6×132=792 가 wrap(565)을 넘어
     「주요 기보」·「기록실」 2개가 **보이지 않았다**(실측 1024). 기능 손실이다.
     ⇒ 균등 유동으로 바꿔 6개를 모두 남긴다. 텍스트는 줄바꿈된다. */
  .kbf-quicklink {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

/* 🚨 이 블록은 **반드시 위 1439 블록 뒤에 온다.** 처음엔 앞에 뒀다가 통째로 무효화됐다.
   둘 다 `(min-width:768px)` 미디어쿼리 안의 같은 셀렉터라 **특이도가 동률**이고,
   동률이면 CSS 는 **나중에 선언된 쪽**을 쓴다. 앞에 두면 1439 블록의
   `font-size:15px`·`gap:20px` 가 이긴다 — 실측으로 확인했다(GNB 필요폭이 안 줄었다).
   ⇒ `D-41-01`(CSS 재선언 무효화) 계열의 **6번째 사례**이며, 앞선 5건이 전부
      「특이도」였던 것과 달리 이번 원인은 **선언 순서**다. 셀렉터를 아무리 맞춰도
      순서가 틀리면 진다. */
/* ── 태블릿 하단 768~1023 — GNB 가 헤더 액션을 침범한다 ──────────────────────
   🚨 KBF-36 실측(1440 기준 시안엔 없는 구간). 768px 에서
        GNB 가용 254px  vs  7항목 필요 527px   → 273px 이 액션 영역으로 흘러
        「대진표/결과·기록실·뉴스/공지·주요기보」 4개가 K바둑 CTA 위에 겹쳐 그려지고
        클릭이 CTA 에 먹힌다(elementFromPoint 로 확인 — 메뉴 도달 불가).

   ⚠️⚠️ **`KBF-45` 가 이 구간을 만들면서도 못 봤다.** 그 티켓은 「페이지 가로 스크롤 0」을
        지표로 썼는데 `.kbf-gnb` 는 `overflow:visible` 이라 **문서 폭을 늘리지 않고 겹치기만**
        한다. `D-45-02`(「진단 지표를 잘못 잡아 네 번 빗나갔다」)와 같은 계열이며,
        옳은 지표는 **「GNB 항목의 right 가 액션 박스의 left 를 넘는가」**다.

   ⚠️ CTA 는 숨기지 않는다 — KBF-45 가 「발주처 핵심 동선」으로 판정했다. 라벨만 시각적으로
      접고 아이콘을 남기며, `aria-label` 이 있어 스크린리더에는 그대로 읽힌다.
   ⚠️ 좌우 gutter(48)는 건드리지 않는다 — 본문 컨테이너와 어긋난다. */
@media (min-width: 768px) and (max-width: 1023px) {
  .kbf-header          { gap: 16px; }
  .kbf-header__actions { gap: 8px; }
  .kbf-gnb             { gap: 10px; }
  .kbf-gnb__item       { font-size: 13px; padding-inline: 0; }   /* 13px = KRDS 본문 최소 */

  /* 특이도 (0,3,0) — 원본과 동률로 맞춘다(D-41-01 5연패의 교훈). */
  .kbf-public .krds-btn.kbf-btn-broadcast { padding-inline: 10px; gap: 0; }
  .kbf-btn-broadcast__label { display: none; }
}


@media (max-width: 767px) {

  /* 🚨 D-44-01(안 C · 사용자 결정) — 모바일 헤더 햄버거를 제거한다.
     모바일은 GNB 가 숨겨져 **Bottom Nav 「더보기」가 유일한 주 내비게이션**인데
     헤더에도 햄버거가 있으면 전체메뉴 진입점이 둘이 된다. 데스크톱은 GNB 7항목이
     평면으로 다 보여 「사이트맵」 성격이므로 그대로 둔다.
     ⚠️ 검색 버튼은 남긴다 — 모바일에도 검색 진입점이 필요하고 중복이 아니다. */
  .kbf-icon-btn--menu { display: none; }
  :root {
    --kbf-container: 100%;
    --kbf-gutter:     20px;   /* 390 − 20×2 = 350 = 시안 내부 폭 */
  }

  /* Context Header — 시안 h56. GNB 7항목과 K바둑 CTA 를 걷어내고
     로고 + 아이콘 2개(검색·전체메뉴)만 남긴다. 마크업은 그대로다. */
  .kbf-header {
    height: 56px;
    gap: 0;
    justify-content: space-between;
  }
  .kbf-gnb {
    display: none;
  }
  /* ⚠️ 특이도를 맞춰야 한다 — 원본이 `.kbf-public .krds-btn.kbf-btn-broadcast`(0,3,0) 라
     `.kbf-btn-broadcast`(0,1,0) 로는 후행이어도 이기지 못한다(실측으로 확인). */
  .kbf-public .krds-btn.kbf-btn-broadcast {
    display: none;
  }

  /* Bottom Navigation — 시안 노드명이 「fixed · 뷰포트 하단 고정」이다 */
  .kbf-bottom-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    height: 76px;
    padding-top: 10px;
    background-color: var(--kbf-surface);
    border-top: 1px solid var(--kbf-border);
  }

  /* 「맨 위로」 — Bottom Nav **위로** 띄운다. 76(내비) + 16(여백) = 92.
     ⚠️ 이 값은 위 `.kbf-bottom-nav { height: 76px }` 에 **묶여 있다.** 내비 높이를
        바꾸면 여기도 함께 바꿔야 한다 — 안 바꾸면 버튼이 내비에 깔려 안 눌린다. */
  .kbf-gotop { right: 20px; bottom: 92px; }

  .kbf-bottom-nav__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 80px;
    color: var(--kbf-nav-idle);
    text-decoration: none;
  }
  .kbf-bottom-nav__tab[aria-current="page"] {
    color: var(--kbf-nav-active);
    font-weight: 700;
  }
  .kbf-bottom-nav__label {
    font-size: 13px;
    line-height: 20px;
  }

  /* ── Sponsor Bar — 4항목이 고정폭(280·280·300·240)이라 390 을 넘는다 ── */
  /* ⚠️ 시안에 모바일 Sponsor/Footer 규격이 없다 — S26bm·S31bm 모두 Bottom Nav 로 끝난다.
        ~~가로 스크롤을 만들지 않는 선에서 합리적으로 접었고~~
     🚨 **그 판단을 뒤집었다**(사용자 지시 2026-08-28) — 접으니 **두 줄**이 됐고
        (항목 폭 합 519 + gap 54 = 573 > 390) 후원 표기가 흐트러져 보인다.
        ⇒ **한 줄 + 가로 스크롤**. 손가락으로 넘긴다.
     ⭐ Swiper 컴포넌트를 쓰지 않았다 — 4개 고정이라 점·화살표가 필요 없고,
        CSS 만으로 하면 **JS 가 죽어도 넘어간다**(홈 히어로 Swiper 와 다른 선택). */
  .kbf-sponsor {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0 18px;
    height: auto;
    padding-block: 18px;
    padding-inline: var(--kbf-gutter);
    /* ⚠️ 안쪽 스크롤이라 **페이지는 안 밀린다** — `KBF-45`·`KBF-47` 의
       「가로로 밀리지 않는다」 검사(`scrollX === 0`)는 그대로 통과한다. */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kbf-sponsor::-webkit-scrollbar { display: none; }
  /* 스냅 단위는 **그룹**이다 — 로고 하나가 아니라 「역할 + 그 로고들」이 한 칸으로 선다. */
  .kbf-sponsor__group {
    scroll-snap-align: center;
  }
  /* 구분선을 되살린다 — 한 줄이 되면서 항목 경계가 다시 필요해졌다. */
  .kbf-sponsor__divider { display: block; }

  /* ── Footer — 좌우 배치를 세로로 ── */
  .kbf-footer-links {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    height: auto;
    padding-block: 16px;
  }
  /* ~~4항목 + 구분선 3개를 gap 10 · 13px 로 **한 줄에 담는다**~~
     🚨 **그 전제가 깨졌다**(2026-08-30 · `KBF-58`). 라벨이 발주처 값으로 바뀌며
        21자 → **29자**가 됐다(「이메일주소무단수집거부」 11자 · 「찾아오시는길」 6자).
        한 줄로는 **350px 에 들어가지 않는다** — 구분선을 살리면 391 > 390 이다.
     ⇒ **2줄로 접는다.** 「개인정보처리방침 · 이메일주소무단수집거부」 /
        「이용약관 · 찾아오시는길」 로 나뉘어 오히려 읽기 쉽다.
     ⚠️ 13px 하한은 그대로 지킨다 — KRDS 최소 글자 크기다. 더 줄여서 한 줄에
        욱여넣지 않는다. */
  /* ⚠️ **위 「2줄로 접는다」가 flex 로는 성립하지 않았다**(`KBF-100` 실측 2026-09-09).
        flex 는 들어가는 만큼 탐욕적으로 채우므로 실제로는 **3+1** 이 되어 「찾아오시는길」이
        혼자 남았다(줄폭 306 / 68 · 비율 4.5:1). 「한 줄에 2개」는 flex 로 표현할 수 없다.
     ⇒ **grid 로 열 수를 직접 적는다.** 2+2 가 되어 줄폭이 226 / 170 으로 고르다.
     ❌ `flex-basis: calc(50% - 6px)` 는 쓰지 않는다 — 실측에서 **1+1+1+1 세로 4줄**로
        무너졌다(높이 59 → 104). 아래 구분선 `<li>` 가 gap 을 먹어 한 줄이 `100% + 12` 가 된다.
     ⚠️ 440px 이상이면 4개가 한 줄에 담기지만 **여기서는 그래도 2+2 로 둔다**(사용자 확정
        2026-09-09). 440~767 구간의 높이가 26 → 59 로 늘어나는 것이 그 대가다. */
  .kbf-footer-links__list {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 8px 12px;
  }
  /* 줄이 나뉘면 구분선이 줄 끝에 매달려 가리키는 것이 없어진다.
     ⚠️ wrap 위치는 글자 길이에 따라 달라져 **어느 구분선이 끝에 갈지 예측할 수 없다.**
        그래서 개별로 숨기지 못하고 전부 감춘다 — 줄바꿈과 gap 이 경계를 대신한다.
     🚨 **`span` 이 아니라 `li` 를 감춘다**(`KBF-100`). grid 에서는 `<li aria-hidden>` 이
        칸을 하나 차지해 2열 배치가 무너진다. 안쪽 `span` 만 숨기는 것으로는 부족하다.
     ⚠️ 기본 규칙 `.kbf-footer-links__sep`(위쪽 `display: block`)은 그대로 둔다 —
        `FooterLinksTest` 가 그 규칙을 잠근다. */
  .kbf-footer-links__list li[aria-hidden] { display: none; }
  .kbf-footer-links__list .kbf-footer-links__item {
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
  }
  /* 🚨 모바일은 **바텀시트로 갈아탄다**(`KBF-58` · 2026-08-30).
     브라우저 네이티브 드롭다운이 ① KRDS 와 이질적이고 ② 셀렉트 박스와 폭·위치가
     어긋난다(사용자 지적). **그건 브라우저 UI 라 CSS 로 바꿀 수 없다.**
     ⇒ 셀렉트를 감추고 우리가 그린 시트를 여는 버튼으로 바꾼다. */
  .kbf-related-select { display: none; }
  .kbf-related-trigger { display: flex; width: 100%; }

  /* fixed Bottom Nav 가 가리는 만큼 본문 끝을 밀어낸다.
     ⚠️ `body` 에 주면 안 된다 — body 의 하단 padding 은 viewport 로 전파되어
        스크롤 영역을 늘리지 못한다(실측: html·body·.kbf-shell 의 scrollHeight 가
        전부 1537 로 동일했고 KRDS 출처 표기가 42px 잘렸다).
        실제 콘텐츠 컨테이너인 .kbf-shell 에 준다. */
  .kbf-public .kbf-shell {
    padding-bottom: 76px;
  }
}

/* 스킵 내비 타깃 — `tabindex="-1"` 이 붙은 <main> 에 초점이 갈 때 포커스 링이
   본문 전체를 두르는 것을 막는다. 초점 자체는 유지된다(접근성).

   🚨 **KRDS 포커스 링은 두 겹이다** — `outline` **과** `box-shadow`(`--krds-primary-50`
      #256EF4 · 0 0 0 4px). `outline` 만 끄면 **파란 사각형이 그대로 남는다.**
      실제로 그렇게 새어 나갔다(`D-47-08`) — LNB 아래 빈 공간이나 클릭 불가 요소
      (`<span aria-disabled>` 페이저 등)를 누르면 초점이 가장 가까운 focusable 조상인
      이 `<main>` 으로 흘러와 본문 전체에 파란 테두리가 생겼다.
   ⚠️ `D-41-01`·`D-45-06` 과 같은 계열 — **한 속성만 덮으면 나머지가 살아남는다.** */
#kbf-main:focus,
#kbf-main:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════
   KBF-47 QA — 태블릿(768~1439) 잘림 해소 · 공통 셸
   🚨 스폰서 로고 7항목(로고 4 + 구분선 3 · 총 1,103px)이 nowrap 고정폭이라
      768~1024 에서 **양끝이 잘렸다**(실측: -167..113 · 696..936). `body{overflow-x:hidden}`
      이라 밀 수도 없어 **영구 손실**이었다(D-45-01 유형). 18화면 전부에 나타났다.
   ⇒ 모바일(≤767)이 이미 쓰던 대응을 그대로 태블릿까지 넓힌다. 새 규칙을 만들지 않는다.
   ⚠️ 파일 끝에 둔 이유 — 기본 규칙보다 뒤여야 이긴다(D-41-01 · 같은 특이도면 나중 선언 승).
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1439px) {
  .kbf-sponsor {
    flex-wrap: wrap;
    /* 가로 간격을 28 로 벌린다 — 그룹 **내부** gap 이 14 라, 그룹 사이가 같은 18 이면
       「역할이 어디까지인지」가 흐려진다. 구분선을 지우는 대신 간격이 경계를 맡는다. */
    gap: 14px 28px;
    height: auto;
    padding-block: 18px;
  }
  .kbf-sponsor__divider { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   디스클로저 chevron — **외부 의존 차단** (KBF-104 · KBA-106 · D-28-10)

   🚨 `krds.min.css` 는 `krds.go.kr` 의 SVG 아이콘을 **350회** 참조하고 디스클로저
      chevron 도 그중 하나다(`.krds-disclosure .btn-conts-expand::before`).
      그대로 쓰면 수용기준 「외부 요청 0건」이 깨진다.

   **실측** `/team?year=2016&id=1604` (설명 보유 5팀)
      대책 전  디스클로저 5개 · 외부요청 **1건** → ico_expand.svg
      대책 후  디스클로저 5개 · 외부요청 **0건**
   ⚠️ `/team`(기본 2025)에서는 재현되지 않는다 — 그 해에 설명 보유 팀이 **0**이라
      디스클로저가 아예 안 그려진다. **게이트의 표본으로는 이 결함이 보이지 않는다.**

   🔑 **왜 전역인가** — 이 함정은 화면의 속성이 아니라 **컴포넌트의 속성**이다.
      이 파일은 모든 공개 화면에 실리므로(`layouts/krds.blade.php:36`) 한 블록으로
      지금과 앞으로의 모든 디스클로저를 덮는다. 화면별로 좁히면 다음 사람이 다른
      화면에 디스클로저를 넣을 때 같은 함정을 다시 밟는다.

   🔑 **왜 `mask-image` 한 속성만 덮는가** — 저장소에 선례가 둘이고 전략이 다르다.
      `kbf-sub.css:108` 은 마스크를 끄고 `background-image` 로 갈았는데 그러면
      `background-color` 로 오던 **토큰 색이 끊긴다.** `kbf-player-modal.css:77` 은
      KRDS 클래스를 아예 안 쓰고 자체 SVG 를 인라인했는데, chevron 은 KRDS 가 만드는
      `::before` 라 그 길은 마크업 + 회전 규칙을 따로 써야 한다.
      마스크 URL 만 바꾸면 **크기·색·회전이 전부 KRDS 것으로 남는다.**

   ⚠️ **기준 방향은 「원 안 오른쪽 화살표」다**(원본 `ico_expand.svg` 실측 — 원 외곽선 + `>`).
      KRDS 가 `.active` 에서 `rotate(-90deg)` 를 걸어 펼침 상태를 만들므로, 방향을
      바꾸면 한쪽 상태의 화살표가 엉뚱한 곳을 가리킨다.
   ⚠️ `data:` 는 게이트가 명시로 허용한다(`tests/e2e/team-roster.mjs:53`).
   ══════════════════════════════════════════════════════════════════════ */
.krds-disclosure .btn-conts-expand::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 1.6a8.4 8.4 0 1 1 0 16.8 8.4 8.4 0 0 1 0-16.8z'/%3E%3Cpath d='M10.8 8.5 14.3 12l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 1.6a8.4 8.4 0 1 1 0 16.8 8.4 8.4 0 0 1 0-16.8z'/%3E%3Cpath d='M10.8 8.5 14.3 12l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}