@charset "UTF-8";
/* ============================================================================
   KBF 공개 화면 — S31b 팀소개 전용 스타일
   ----------------------------------------------------------------------------
   KBF-28 (KBA-29) · Paper `07 Public Desktop` / S31b · contentHash ed9c241c
   모든 수치는 .Docs/KBF-28/S31b-S31c-실측.md 인용. 눈대중 없음.

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




/* ══ Main Area (EZR) — 팀 목록 320 + 팀 상세 ══════════════════════════════ */

.kbf-team-main {
  box-sizing: border-box;
  width: 100%;
  padding: 24px var(--kbf-gutter) 44px;
}

/* `.krds-tab-area` 를 grid 로 재정의한다.
   krds_tab 이 `.tab` 과 `.tab-conts-wrap` 을 직계 자식으로 요구해 팀 목록 카드를 래퍼로
   감쌀 수 없다. DOM 은 평평하게 두고 배치만 grid-area 로 지정한다.
   KRDS 기본은 flex column + gap 32 이므로 전부 덮는다.
   ※ S26b 미디어 탭은 `.kbf-media` 스코프라 영향을 받지 않는다. */
.kbf-team-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: auto auto auto;
  align-items: start;
  column-gap: 24px;
  row-gap: 0;
  box-sizing: border-box;
  width: 100%;
}
.kbf-team-list__head   { grid-area: 1 / 1; }
.kbf-team-list__tabs   { grid-area: 2 / 1; }
.kbf-team-list__static { grid-area: 3 / 1; }
.kbf-team-detail-wrap  { grid-area: 1 / 2 / 4 / 3; min-width: 0; }

/* ── 팀 목록 ──────────────────────────────────────────────────────────────
   ⭐ KBF-128 — **치수·글자·색은 여기서 정하지 않는다.** 다른 화면의 하위 메뉴(LNB)와
      같은 모양이어야 하므로 `kbf-sub.css` §3 의 `--kbf-lnb-*` 변수를 한 출처로 쓰고,
      그 파일 §3-b 가 768px 이상에서 적용한다.
      🚨 여기에 같은 속성을 다시 적지 말 것 — 로드 순서가 `team → sub` 라 **져서 무효**가
         되거나(특이도가 같을 때), 특이도가 높으면 반대로 공통 규칙을 깨뜨린다.
      아래에 남은 것은 **팀 목록에만 있는 것**이다 — grid 배치와 button 초기화. */
.kbf-team-list__head {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.kbf-team-list__title { margin: 0; }
.kbf-team-list__tabs   { box-sizing: border-box; }
.kbf-team-list__static {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--kbf-border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

/* KRDS 탭 토큰 재선언 — `.tab` 자신이 선언하므로 조상에 쓰면 무시된다.
   ⚠️ 높이·글자크기·글자색 세 토큰은 KBF-128 이 `kbf-sub.css` §3-b 로 옮겼다.
      LNB 와 같은 값이어야 해서 한 출처에서 읽는다. 여기 남은 둘은 팀 전용이다
      (KRDS 기본 탭의 밑줄·배경을 지운다). */
.kbf-team-list__tabs.tab {
  --krds-tab--button-color-action: transparent;
  --krds-tab--button-color-border: transparent;
  width: 100%;
}
.kbf-team-list__tabs.tab > ul {
  flex-direction: column;   /* KRDS 는 row */
  gap: 0;
  overflow: visible;        /* KRDS 는 overflow-x:auto */
}
.kbf-team-list__tabs.tab > ul > li { width: 100%; }

/* 항목의 뼈대만 둔다 — button 초기화와 배치. 치수·글자·색·구분선은 `kbf-sub.css` §3-b.
   ⚠️ `.kbf-team-list__link` 는 **렌더되지 않는다**(더미 시절 정적 9팀의 잔재 · 뷰에 0 건).
      KBF-128 범위가 아니라 지우지 않고 그대로 둔다. */
.kbf-team-list__tabs.tab .btn-tab,
.kbf-team-list__link {
  display: flex;
  align-items: center;
  /* 🚨 `<button>` 은 브라우저 기본이 `text-align: center` 다. LNB 항목은 `<a>` 라 그
        기본이 없어서, 이 두 줄이 없으면 팀 이름만 가운데로 몰린다. 계산값 비교로는
        안 보였고 화면을 봐서 찾았다(KBF-128). */
  justify-content: flex-start;
  text-align: left;
  box-sizing: border-box;
  width: 100%;
  background: none;
  text-decoration: none;
  cursor: pointer;
}
/* 🚨 구분선을 `border-top` + `li + li` 로 그리던 규칙을 지웠다. 특이도가 (0,4,1) 이라
      공통 규칙의 `border-bottom` 을 이겨 선이 두 방식으로 겹쳤다. LNB 와 같게
      **모든 항목의 아래쪽**에 긋는다 — `kbf-sub.css` §3-b 소관. */
.kbf-team-list__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ══ Team Detail (F18) ════════════════════════════════════════════════════ */

.kbf-team-detail {
  box-sizing: border-box;
  width: 100%;
  margin-top: 0;                          /* KRDS .tab-conts { margin-top: 32 } */
  padding: 34px 34px 38px;
  background-color: var(--kbf-surface);
  border: 1px solid var(--kbf-border);
  border-radius: 8px;
}
.kbf-team-detail.active { gap: 0; }       /* KRDS .tab-conts.active { gap } */

/* ── Team Header (F19) ── */
.kbf-team-header {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: 44px;
  width: 100%;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--kbf-divider);
}
.kbf-team-header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 183px;
  height: 170px;
  background-color: var(--kbf-surface);
  border: 1px solid var(--kbf-border);
  border-radius: 4px;                     /* ⚠️ 불일치 13 — 카드 radius 5종 중 하나 */
}
.kbf-team-header__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  gap: 26px;
}
.kbf-team-header__name {
  margin: 0;
  color: var(--kbf-ink);
  font-size: 42px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: -0.04em;
}
.kbf-team-header__meta {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
}
/* 슬롯은 div, 구분선은 span 이라 nth-of-type 이 슬롯만 센다 */
.kbf-team-header__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ⚠️ KBF-45 — flex-shrink:0 이면 슬롯 4개(212+170+170+150=702)가 태블릿에서 안 줄어
     부모를 밀어낸다. width 는 :nth-of-type (0,2,0) 이라 그대로 두고 shrink 로 축소시킨다
     — 비율은 유지되고 1440 에서는 원래 값에 도달한다. */
  flex-shrink: 1;
  min-width: 0;
  gap: 12px;
}
.kbf-team-header__slot:nth-of-type(1) { width: 212px; }
.kbf-team-header__slot:nth-of-type(2) { width: 170px; }
.kbf-team-header__slot:nth-of-type(3) { width: 170px; }
.kbf-team-header__slot:nth-of-type(4) { width: 150px; }
.kbf-team-header__sep {
  flex-shrink: 0;
  width: 1px;
  height: 44px;
  background-color: var(--kbf-border);
}
.kbf-team-header__label {
  color: var(--kbf-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -0.02em;
}
.kbf-team-header__value {
  color: var(--kbf-muted);
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.02em;
}

/* ── 섹션 ── */
/* 팀 소개 (KBF-104) — 헤더 바로 다음, 코칭스태프 위. 리듬은 --staff 와 같다. */
.kbf-team-section--intro   { padding-top: 28px; }

/* 🔑 `pre-line` 이고 `pre-wrap` 이 아니다. 개행은 살리고 **연속 공백은 접는다**.
   값에 「전통과 명문의··구단」처럼 이중 공백이 있고 레거시도 그것을 접었으므로
   (`common.css:157` 에 white-space 규칙이 0건 ⇒ 개행·공백이 둘 다 접혔다),
   `pre-line` 이면 레거시와의 차이가 **개행 하나로 한정된다.** 그것이 편차 ②다.
   `pre-wrap` 으로 가면 이중 공백까지 살아나 편차가 둘이 된다. */
.kbf-team-intro { white-space: pre-line; }

.kbf-team-section--staff   { padding-top: 28px; padding-bottom: 30px; }
.kbf-team-section--players { padding-top: 30px; border-top: 1px solid var(--kbf-divider); }
.kbf-team-section__title {
  margin: 0;
  padding-bottom: 18px;
  color: var(--kbf-ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.03em;
}
.kbf-team-cards {
  display: flex;
  box-sizing: border-box;
  gap: 16px;
  width: 100%;
}
.kbf-team-cards--row2 { justify-content: center; padding-top: 16px; }

/* ── 인물 카드 ── */
.kbf-pcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 221px;
  padding-inline: 12px;
  background-color: var(--kbf-surface);
  border: 1px solid var(--kbf-border);
  border-radius: 6px;
}
.kbf-pcard--player { padding-top: 12px; }
/* 선택 상태는 테두리만이 아니라 사진 팔레트까지 톤이 옮겨간다(팔레트는 데이터가 갖는다).
   border-box 라 2px 로 굵어져도 폭 221 이 유지된다. */
.kbf-pcard--player.is-selected {
  background-color: #F5F9FE;
  border-width: 2px;
  border-color: var(--kbf-link);
}
.kbf-pcard__role {
  padding-block: 12px;
  color: var(--kbf-link);
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: -0.02em;
}
.kbf-pcard__photo {
  display: flex;
  flex-shrink: 0;
  width: 197px;
  height: 196px;
}
.kbf-pcard__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 인물 300×400 → 슬롯에 맞춰 위아래를 자른다 */
  border-radius: inherit;     /* 모바일 카드가 32px 원이 될 때 따라간다 */
}

/* 🚨 **로고만 `contain` 이다.** 실측 비율이 0.93~3.78 로 제각각이고(1500×397 가로 띠도 있다)
      `cover` 로 자르면 그런 로고는 글자가 통째로 날아간다 — `D-55-03` 과 같은 함정이다.
      치수는 플레이스홀더 SVG 와 같은 143×132 로 둬 프레임 안쪽 여백을 유지한다. */
.kbf-team-header__logo img {
  width: 143px;
  height: 132px;
  object-fit: contain;
}

.kbf-pcard__rule {
  flex-shrink: 0;
  width: 197px;
  height: 3px;
  background-color: #1B3E73;
}
.kbf-pcard__name {
  padding-top: 14px;
  padding-bottom: 16px;
  color: var(--kbf-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
}
/* 데스크톱 숨김 — 모바일 MQ 에서 각각 되켠다(각주 구간).
   ⚠️ 원래 이 블록은 네 줄이었다. 앞 둘(`__tab-short`·`__select--team`)은 필터 소관이라
      KBF-96 2단계에서 `kbf-sub.css` 의 `--team` 변형으로 옮겼다. */
.kbf-team-list__count,
.kbf-team-section__count { display: none; }

/* ══ 반응형 — 모바일 (S31bm 390×1160) ════════════════════════════════════ */
/* 브레이크포인트는 ① 과 동일하게 KRDS 원본(max-width:767px)을 승계한다.
   ⚠️ 색은 신규 토큰을 만들지 않고 기존 토큰에 수렴시킨다 —
      시안의 --krds-gray-50 · --krds-primary-60 은 --kbf-nav-idle/-active 와 값이 정확히 같다.
      나머지 회색(gray-20/30/40/70/90)은 근접한 기존 토큰으로 대체했고 그 차이는 D-41-* 로 기록한다.
      ⚠️ ④-b 갱신 — ① 이 만든 --kbf-nav-line(#E6E8EA)은 --kbf-border(#E3E7EC)와 ΔE 1.74 라
      **--kbf-border 로 수렴하며 삭제**됐다. 아래에서 --kbf-border 를 쓰는 자리가 그것이다. */
@media (max-width: 767px) {

  /* ── ① 레이아웃 — grid 해제. DOM 순서가 곧 시안 순서다 ── */
  /* ⚠️ krds_tab 은 `.krds-tab-area.layer > .tab` 을 **직계 자식**으로 찾을 뿐
        display 값은 보지 않는다. 구조를 건드리지 않으므로 JS 는 그대로 동작한다. */
  .kbf-team-main   { padding: 20px 0 44px; }
  .kbf-team-layout { display: flex; flex-direction: column; gap: 8px; }
  .kbf-team-list__tabs,
  .kbf-team-list__static { display: none; }


  /* ── ④ Footnote — 팀 목록 헤드를 각주로 재활용한다(D-39 결정) ── */
  .kbf-team-list__head {
    height: auto;
    padding: 0 var(--kbf-gutter);
    background-color: transparent;
    border: 0;
    border-radius: 0;
  }
  .kbf-team-list__title {
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.02em;
    color: var(--kbf-nav-idle);
  }
  .kbf-team-list__count { display: inline; }

  /* ── ⑤ 상세 카드 — 테두리를 벗는다 ── */
  .kbf-team-detail {
    padding: 0 var(--kbf-gutter);
    background-color: transparent;
    border: 0;
    border-radius: 0;
  }

  /* ── ⑥ Team Header — display:contents 로 래퍼를 풀어 2단 grid 로 재배치 ── */
  /* .kbf-team-header__info 는 의미 없는 레이아웃 래퍼다. 풀면 name·meta 가
     조부모의 직계 grid item 이 되어 「로고 + 팀명」 한 줄, 「메타」 아래 줄이 된다. */
  .kbf-team-header {
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: center;
    gap: 10px 14px;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .kbf-team-header__info { display: contents; }
  .kbf-team-header__logo {
    grid-row: 1;
    grid-column: 1;
    width: 84px;
    height: 78px;
    border-color: var(--kbf-border);
    border-radius: var(--kbf-radius-chip);
  }
  .kbf-team-header__logo svg { width: 56px; height: 52px; }
  .kbf-team-header__logo img { width: 56px; height: 52px; }
  .kbf-team-header__name {
    grid-row: 1;
    grid-column: 2;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.02em;
  }
  .kbf-team-header__meta {
    grid-row: 2;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .kbf-team-header__slot {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  /* 원본 :nth-of-type(0,2,0) 폭 고정 해제 — 같은 특이도 (D-41-01) */
  .kbf-team-header__meta .kbf-team-header__slot { width: auto; }
  .kbf-team-header__sep { display: none; }
  .kbf-team-header__label {
    flex-shrink: 0;
    width: 56px;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    color: var(--kbf-nav-idle);
  }
  .kbf-team-header__value {
    font-size: 13px;
    line-height: 22px;
    color: var(--kbf-slate);
  }

  /* ── ⑦ 섹션 제목 ── */
  .kbf-team-section--intro   { padding-top: 12px; }
  .kbf-team-section--staff   { padding: 12px 0 0; }
  .kbf-team-section--players { padding-top: 12px; border-top: 0; }
  .kbf-team-section__title {
    padding-bottom: 2px;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: -0.02em;
  }
  /* Roster Head — 「선수단 …… 7명」 양끝 정렬 */
  .kbf-team-section--players .kbf-team-section__title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .kbf-team-section__count {
    display: inline;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: var(--kbf-nav-idle);
  }

  /* ── ⑧ 코칭스태프 — 카드 4장을 한 줄 텍스트로 흘린다 ── */
  .kbf-team-section--staff .kbf-team-cards {
    display: block;
    font-size: 13px;
    line-height: 22px;
    color: var(--kbf-slate);
  }
  .kbf-pcard--staff {
    display: inline;
    width: auto;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
  }
  .kbf-pcard--staff .kbf-pcard__photo { display: none; }
  .kbf-pcard--staff .kbf-pcard__role {
    padding: 0;
    color: var(--kbf-slate);
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
  }
  .kbf-pcard--staff .kbf-pcard__role::after { content: "\00a0"; }
  .kbf-pcard--staff .kbf-pcard__name {
    padding: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
  }
  .kbf-pcard--staff:not(:last-child)::after { content: " · "; }

  /* ── ⑨ 선수단 — 카드 그리드를 텍스트 행 목록으로 ── */
  .kbf-team-cards {
    flex-direction: column;
    gap: 0;
  }
  .kbf-team-cards--row2 { justify-content: flex-start; padding-top: 0; }
  .kbf-pcard--player {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 0;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--kbf-border);
    border-radius: 0;
  }
  /* 원본이 (0,2,0) 이므로 같은 특이도로 맞춘다 (D-41-01) */
  .kbf-pcard--player.is-selected {
    border-width: 0 0 1px 0;
    border-color: var(--kbf-border);
  }
  /* ⚠️ 사진 SVG 는 143×132 하드코딩이라 32 정사각에 넣으면 왜곡된다.
        시안도 사진이 아니라 회색 원이므로 SVG 를 숨기고 원형 배경만 남긴다. */
  .kbf-pcard__photo {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background-color: var(--kbf-border);
  }
  .kbf-pcard--player .kbf-pcard__photo svg { display: none; }
  .kbf-pcard__rule { display: none; }
  .kbf-pcard--player .kbf-pcard__name {
    flex-grow: 1;
    padding: 0;
    text-align: left;
    font-size: 15px;
    line-height: 23px;
  }
  .kbf-pcard--player::after {
    content: "›";
    flex-shrink: 0;
    color: var(--kbf-disabled);
    font-size: 17px;
    line-height: 26px;
  }}

/* ══════════════════════════════════════════════════════════════════════
   KBF-47 QA — 태블릿(768~1439) 잘림 해소 · 팀소개
   🚨 근본 원인은 카드가 아니라 **KRDS `tab-area.layer` 의 2열 그리드**다.
      768px 에서도 좌우 분할이 유지돼 콘텐츠 열이 **328px** 밖에 안 됐고,
      그 안에 221px 카드 4개(932)를 nowrap 으로 넣어 **3개가 밖으로 나갔다**.
   ⇒ ① 태블릿에서 그리드를 1열로 접어 콘텐츠에 전폭을 준다
      ② 그래도 4개(932)는 안 들어가므로 **wrap** 으로 2×2 가 되게 한다
   ⚠️ KRDS **원본 파일은 건드리지 않는다** — 여기서 덮을 뿐이다.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1439px) {
  .krds-tab-area.layer { grid-template-columns: 1fr; }

  .kbf-team-cards {
    flex-wrap: wrap;
    justify-content: center;
  }

}