/* ============================================================================
   KBF 공개 화면 — 선수정보 모달 (S31c)
   ----------------------------------------------------------------------------
   ⭐ **두 화면이 쓰는 공용 컴포넌트다.** 그래서 파일을 갈랐다.
        팀소개    `/team`             선수 카드를 누르면 뜬다
        개인순위  `/rank/individual`  「보기 →」를 누르면 뜬다 (`D-54-05` · KBF-42 6단계)

   원래 `kbf-team.css` 안에 있었는데 개인순위는 그 파일을 로드하지 않는다.
   팀 전용 규칙 1,000여 줄을 순위 화면에 딸려 보내는 대신 모달만 떼어냈다.

   ⚠️ 옮기면서 값이 바뀌지 않았음을 **computed style 23요소 × 2뷰포트 대조**로 확인했다
      (`D-55-07` — 「보이니까 됐다」가 아니라 재서 확인한다).
   ⚠️ 두 규칙은 팀 선택자와 **섞여 있었다.** 양쪽에 각자의 선택자만 남겼다 —
      `.kbf-pcard__photo img` 는 `kbf-team.css` 에 있다. 팀소개 필터는 KBF-96 2단계에서
      `kbf-sub.css` 의 `.kbf-filter-bar--team` 으로 흡수돼 더 이상 팀 전용 접두사가 아니다.

   KRDS 원본 컴포넌트(`krds-modal`) 위에 얹는 모디파이어다. 원본은 건드리지 않는다.
   ========================================================================= */

.kbf-pmodal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 인물 300×400 → 슬롯에 맞춰 위아래를 자른다 */
  border-radius: inherit;     /* 모바일 카드가 32px 원이 될 때 따라간다 */
}
.kbf-pmodal__photo img { display: block; }


/* ══ S31c — 선수정보 모달 (F71 / FG5) ═════════════════════════════════════ */

/* KRDS 원본 컴포넌트(krds-modal)를 쓴다. 열기/닫기·포커스 트랩·포커스 복귀·
   스크롤 잠금·Escape·role=dialog 가 JS 0줄로 따라온다.
   ⚠️ 특이도: KRDS 는 `.krds-modal .modal-dialog .modal-conts`(0,3,0) 같은 3클래스
      셀렉터를 쓴다. 아래는 `.kbf-pmodal.krds-modal …`(0,4,0)로 확실히 이긴다. */

/* 스크림 — 시안 #000000 opacity .9 (KRDS 기본은 #000000bf = 75%) */
.kbf-pmodal.krds-modal .modal-back { background-color: #000000E6; }

.kbf-pmodal.krds-modal .modal-dialog {
  align-items: flex-start;
  box-sizing: border-box;
  /* ⚠️ KBF-45 — 태블릿에서 뷰포트를 넘지 않게 max-width 로 */
  max-width: 1108px;
  width: 100%;
  height: auto;
  min-height: 0;
  padding-block: 60px;
}
.kbf-pmodal.krds-modal .modal-dialog .modal-content {
  align-items: stretch;
  box-sizing: border-box;
  max-width: 1108px;
  width: 100%;
  max-height: none;
  padding: 26px 40px 34px;
  background-color: #FCFCFC;
  border-radius: 14px;          /* ⚠️ 불일치 13 — 카드 radius 5종 중 하나 */
}

/* ── Head ── */
.kbf-pmodal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  padding-bottom: 22px;
}
.kbf-pmodal__title {
  margin: 0;
  color: var(--kbf-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: -0.03em;
}
/* 닫기 — KRDS 의 `.svg-icon.ico-popup-close` 를 쓰지 않는다. 그 클래스는 krds.go.kr 의
   ico_close.svg 를 mask-image 로 불러와 외부 요청이 난다(D-28-10).
   시안 자체 X path 를 인라인해 외부 참조를 애초에 없앤다. */
.kbf-pmodal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}

/* ── Body — KRDS 는 column + `>*{width:100%}` 이라 둘 다 덮는다 ── */
.kbf-pmodal.krds-modal .modal-dialog .modal-conts {
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  padding: 0;
  overflow-y: visible;
}
.kbf-pmodal.krds-modal .modal-dialog .modal-conts > * { width: auto; }

/* ── 좌: 프로필 ── */
.kbf-pmodal__profile {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 21px;
  width: 384px;
}
.kbf-pmodal__card {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 384px;
  height: 398px;
  background-color: var(--kbf-surface);
  border: 1px solid var(--kbf-border);
  border-radius: 8px;
}
.kbf-pmodal__deco { position: absolute; }
.kbf-pmodal__deco--tl { left: 0;     top: 0; }
.kbf-pmodal__deco--br { left: 264px; top: 248px; }

.kbf-pmodal__photo {
  position: absolute;
  left: 52px;
  top: 26px;
  box-sizing: border-box;
  width: 280px;
  height: 345px;
  background-color: #E8ECF1;
  border: 1px solid #DCE3EC;
}
.kbf-pmodal__plate {
  position: absolute;
  left: 43px;
  top: 328px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 3px;
  width: 298px;
  height: 70px;
  background-color: #00216D;    /* ⚠️ 불일치 11 — 네이비 계열 누적 */
  border-radius: 4px;
}
.kbf-pmodal__plate-name {
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.03em;
}
.kbf-pmodal__plate-role {
  color: #AFC2E4;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.02em;
}

.kbf-pmodal__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  gap: 18px;
  width: 384px;
  height: 172px;
  padding-inline: 26px;
  background-color: var(--kbf-surface);
  border: 1px solid var(--kbf-border);
  border-radius: 8px;
}
.kbf-pmodal__row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: 14px;
  width: 100%;
}
.kbf-pmodal__label {
  flex-shrink: 0;
  width: 66px;
  color: var(--kbf-muted);
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.02em;
}
.kbf-pmodal__value {
  color: var(--kbf-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
}

/* ── 우: 전적 ── */
.kbf-pmodal__stats {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 28px;
  width: 620px;
}
.kbf-pmodal__statcard {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 620px;
  padding: 14px 26px 42px;
  background-color: var(--kbf-surface);
  border: 1px solid var(--kbf-border);
  border-radius: 8px;
}
.kbf-pmodal__stathead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding-bottom: 14px;
}
.kbf-pmodal__stattitle {
  margin: 0;
  color: var(--kbf-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.03em;
}
/* 연도 상자의 **껍데기**. 안에 실동작 `<select>` 가 들어간다(KBF-84).
   ⚠️ 대국 기록이 하나도 없는 선수에게는 여전히 장식 `<span aria-disabled>` 이다
      — 고를 것이 없는 고르는 자리를 만들지 않는다. 그때도 이 치수를 그대로 쓴다. */
.kbf-pmodal__season {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 157px;
  height: 42px;
  padding-inline: 14px;
  background-color: var(--kbf-surface);
  border: 1px solid var(--kbf-line);
  border-radius: 5px;           /* ⚠️ 불일치 13 — radius 종류가 또 늘었다 */
  color: var(--kbf-ink);
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.02em;
}

/* ══ 셀렉트 층 — search-bar·filter-bar·team-filter 와 **같은 공식** (KBF-84 · 다섯 번째 패턴) ══
   위 두 상자(`__season` 157×42 · `__stattabs-season` 104×40)의 치수는 건드리지 않는다.
   `<select>` 를 그 위에 덮어 씌우고, 셰브론만 흐름에 남긴다.

   🚨 `margin-left: auto` 가 **필수다.** 래퍼는 `justify-content: space-between` 인데
      그것은 **흐름에 남은 자식이 둘 이상일 때만** 「양끝」이 된다. 실동작 `<select>` 는
      `position: absolute` 라 흐름에서 빠져 셰브론 하나만 남고, 그러면 space-between 이
      그냥 **시작점**이 된다 ⇒ 아이콘이 왼쪽으로 가 연도 글자 위에 겹친다.
      발주처가 `/news` 에서 실제로 신고한 결함이고(KBF-78), 그때 게이트가 없어
      **9일간 화면에 남아 있었다.**
   ⚠️ 중복 선언처럼 보여도 지우지 말 것 — `space-between` 은 여기서 작동하지 않는다.
   🔒 `SelectChevronTest` 가 이 세 규칙을 **문자열로** 잠근다. 셀렉터 이름을 바꾸면
      그 앵커도 함께 고쳐야 한다. */
.kbf-pmodal__select { position: relative; }
.kbf-pmodal__select > svg,
.kbf-pmodal__select > img { pointer-events: none; margin-left: auto; }
.kbf-pmodal__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
/* 두 상자의 폭이 달라 여백만 따로 잡는다 — 오른쪽은 셰브론 자리다.
   ⚠️ 위 공통 규칙 안에 넣지 않는다: `SelectChevronTest::extract()` 가 앵커부터
      **다음 `}`** 까지만 잘라 검사하므로 그 블록은 자기 완결적이어야 한다. */
.kbf-pmodal__season .kbf-pmodal__native { padding-inline: 14px; padding-right: 40px; }
.kbf-pmodal__stattabs-season .kbf-pmodal__native { padding-inline: 12px; padding-right: 30px; }

/* 고를 것이 없거나 **하나뿐**일 때 — 상자도 셰브론도 없는 **라벨**이다(KBF-84).
   ⭐ 상자를 지우는 이유: 테두리와 셰브론이 곧 「누를 수 있다」는 약속이다. 지킬 수 없는
      약속이면 하지 않는 편이 낫다. 값(연도)은 그대로 읽힌다 — 그건 실제 정보다. */
/* 연도 칩 줄 — **모바일 전용**이다. 데스크톱은 셀렉트를 그대로 쓴다(KBF-88).
   기본값을 none 으로 두어 미디어쿼리 안에서만 켠다 — `.kbf-pmodal__stattabs` 와 같은 방식. */
.kbf-pmodal__years { display: none; }

.kbf-pmodal__season-static {
  flex-shrink: 0;
  color: var(--kbf-ink);
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.02em;
}

/* 표는 S26b 순위표와 같은 이유로 flex + ARIA 다 — KRDS 가 table 요소를 재정의한다 */
.kbf-pmodal__table { display: flex; flex-direction: column; width: 100%; }
.kbf-pmodal__thead,
.kbf-pmodal__trow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
}
.kbf-pmodal__thead {
  height: 53px;
  background-color: #F0F5FD;
  border-bottom: 1px solid var(--kbf-border);
}
.kbf-pmodal__trow {
  height: 58px;
  border-bottom: 1px solid var(--kbf-divider);
}
.kbf-pmodal__c {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  text-align: center;
}
.kbf-pmodal__c--label { flex: 0 0 138px; }
.kbf-pmodal__thead .kbf-pmodal__c { color: var(--kbf-ink); font-weight: 500; }
.kbf-pmodal__trow .kbf-pmodal__c--label { color: var(--kbf-slate); }
.kbf-pmodal__c--empty { color: var(--kbf-disabled); }
.kbf-pmodal__stattabs {
  display: none;
}
@media (max-width: 767px) {

  /* ══ S31cm — 선수정보 모달을 바텀시트로 (KBF-41 ③) ═════════════════════ */
  /* ⭐ 슬라이드에 JS 가 필요 없다. krds_modal 이 .krds-modal 자신에 .in 을 토글하고
        (classList.add("in") 2건 · remove 3건) 아래 규칙이 bottom 을 0 으로 올린다.
     ⚠️ KRDS 는 .krds-modal[data-type=bottom-sheet](0,3,0) 로 같은 것을 제공하지만
        우리 골격이 (0,4,0) 이라 속성을 붙여도 진다. 그래서 여기에 직접 쓴다
        (KRDS 원본은 무수정 유지). 특이도는 (0,4,0) 으로 맞춘다 — D-41-01. */
  .kbf-pmodal.krds-modal .modal-dialog {
    align-items: flex-end;
    width: 100%;
    padding-block: 0;
  }
  .kbf-pmodal.krds-modal .modal-dialog .modal-content {
    position: fixed;
    left: 0;
    bottom: -100%;
    width: 100%;
    /* ⚠️ 짝 = `kbf-popup.css` 의 공개 팝업 바텀시트(`max-height: 90%`). 값이 다른 것은
       의도다 — 저쪽은 **팝업 설계 계약 §1.2 가 90% 를 명시**했고 이쪽은 선수 모달(`S31c`)
       규격이다(`D-35-07` · KBF-36 판정 = 유지). 한쪽 수정 시 다른 쪽도 확인할 것. */
    max-height: 85vh;
    padding: 0 0 16px;
    background-color: var(--kbf-surface);
    border: 0;                       /* KRDS 기본 테두리 1px 때문에 388 이 된다 — 시안은 390 */
    border-radius: 12px 12px 0 0;
    transition: bottom 0.3s ease;
  }
  .kbf-pmodal.krds-modal.in .modal-dialog .modal-content { bottom: 0; }

  /* ── Header 56 ── */
  /* ⚠️⚠️ D-41-01 세 번째 재발. KRDS 가 모바일 헤더를 (0,3,0)·(0,4,0) 으로 잡는다 —
        .krds-modal:not([data-type=bottom-sheet]) .modal-dialog .modal-header
        우리가 .kbf-pmodal__head(0,1,0) 로 쓰면 진다(실측 padding 52px 24px 0 이 그대로였다).
        data-type 을 안 붙였으니 그 :not() 규칙이 적용된다 ⇒ 같은 수준으로 맞춘다. */
  .kbf-pmodal.krds-modal .modal-dialog .modal-header {
    flex-shrink: 0;
    height: 56px;
    padding: 0 var(--kbf-gutter);
  }
  .kbf-pmodal.krds-modal .modal-dialog .modal-header .modal-title {
    font-size: 17px;
    line-height: 26px;
    letter-spacing: -0.02em;
  }
  .kbf-pmodal__close {
    width: 36px;
    height: 36px;
  }
  .kbf-pmodal__close svg { width: 20px; height: 20px; }

  /* ── Body — 세로 흐름 + 내부 스크롤 ── */
  .kbf-pmodal.krds-modal .modal-dialog .modal-conts {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 0 var(--kbf-gutter);
    overflow-y: auto;
  }
  .kbf-pmodal.krds-modal .modal-dialog .modal-conts > * { width: 100%; }

  /* ── ① Profile — 카드 껍데기를 풀어 2단 grid 로 재배치 ── */
  /* .kbf-pmodal__plate 가 absolute 라 카드 안에 떠 있다. display:contents 로 카드를
     풀면 photo·plate·deco 가 profile 의 직계 grid item 이 되어 마크업 무수정으로
     「사진 좌 · 이름/메타 우」가 된다(② 의 .kbf-team-header__info 와 같은 기법). */
  .kbf-pmodal__profile {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;
    gap: 10px 14px;
    width: 100%;
  }
  .kbf-pmodal__card { display: contents; }
  .kbf-pmodal__deco { display: none; }
  .kbf-pmodal__photo {
    position: static;
    grid-row: 1 / 3;
    grid-column: 1;
    width: 120px;
    height: 150px;
    background-color: var(--kbf-border);
    border: 1px solid var(--kbf-line);
    border-radius: var(--kbf-radius-chip);
    overflow: hidden;
  }
  /* 원본 SVG 는 280×345 다. 120×150 컨테이너 밖으로 삐져나온다 —
     시안도 사진이 아니라 회색 사각이므로 숨긴다(② 의 .kbf-pcard__photo 와 같은 처리). */
  .kbf-pmodal__photo svg { display: none; }
  .kbf-pmodal__plate {
    position: static;
    grid-row: 1;
    grid-column: 2;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    width: auto;
    height: auto;
    background-color: transparent;
    border-radius: 0;
  }
  .kbf-pmodal__plate-name {
    color: var(--kbf-ink);
    font-size: 22px;
    line-height: 30px;
  }
  .kbf-pmodal__plate-role {
    color: var(--kbf-nav-idle);
    font-size: 13px;
    line-height: 20px;
  }
  .kbf-pmodal__info {
    grid-row: 2;
    grid-column: 2;
    gap: 2px;
    width: auto;
    height: auto;
    padding-inline: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
  }
  .kbf-pmodal__row {
    align-items: baseline;
    gap: 8px;
  }
  .kbf-pmodal__row svg { display: none; }   /* 시안에 프로필 아이콘이 없다 */
  .kbf-pmodal__label {
    flex-shrink: 0;
    width: 44px;
    color: var(--kbf-nav-idle);
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
  }
  .kbf-pmodal__value {
    color: var(--kbf-slate);
    font-size: 13px;
    line-height: 22px;
  }

  /* ── ② Controls — 탭 2개 + 시즌 Select ── */
  .kbf-pmodal__stattabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
  }
  .kbf-pmodal__stattabs-list { display: flex; align-items: center; gap: 6px; }
  .kbf-pmodal__stattab {
    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-pmodal__stattab.is-active {
    background-color: var(--kbf-ink);
    color: var(--kbf-surface);
    font-weight: 700;
  }
  .kbf-pmodal__season-static { font-size: 13px; line-height: 20px; }

  /* ── 연도 칩 (KBF-88 · KBA-89) ──────────────────────────────────────────
     🚨 **탭과 다른 모양이어야 한다.** 바로 위 줄이 이미 채워진 알약(KBF 전적/역대)이라
        칩까지 알약이면 **어느 것이 무엇인지 흐려진다.** 밑줄로 가른다.
     ⚠️ `flex-shrink: 0` 이 **필수다.** 없으면 칩이 줄어들며 줄바꿈돼 시트가 세로로
        늘어난다 — 가로로 미는 것이 이 줄의 설계다(`D-45-06` 계열). */
  .kbf-pmodal__years {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .kbf-pmodal__years::-webkit-scrollbar { display: none; }
  .kbf-pmodal__year {
    flex-shrink: 0;
    box-sizing: border-box;
    height: 34px;
    padding-inline: 2px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--kbf-muted);
    font-size: 15px;
    line-height: 32px;
    cursor: pointer;
  }
  /* 「역대 리그 전적」 탭에서는 감춘다 — 연도와 무관한 합계라 고를 이유가 없다(`D-84-09`).
     특이도 (0,2,0) 이라 위 `display: flex` 를 이긴다. */
  .kbf-pmodal__years.is-hidden { display: none; }
  .kbf-pmodal__year.is-active {
    border-bottom-color: var(--kbf-ink);
    color: var(--kbf-ink);
    font-weight: 700;
  }
  .kbf-pmodal__stattabs-season {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 104px;
    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;
  }

  /* ── ③ 전적표 — 카드 껍데기를 벗고 표만 ── */
  .kbf-pmodal__stats { width: 100%; gap: 0; }
  .kbf-pmodal__statcard {
    width: 100%;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
  }
  /* 탭이 고른 것만 보인다. ⚠️ @media 안에서만 정의해야 데스크톱에서 2표가 유지된다. */
  .kbf-pmodal__statcard.is-hidden { display: none; }
  .kbf-pmodal__stathead { display: none; }   /* 제목·Select 는 탭 스트립으로 올라갔다 */

  .kbf-pmodal__thead,
  .kbf-pmodal__trow { gap: 10px; }
  .kbf-pmodal__thead {
    height: 28px;
    background-color: transparent;
    border-bottom: 1px solid var(--kbf-line);
  }
  .kbf-pmodal__trow {
    height: 44px;
    border-bottom: 1px solid var(--kbf-border);
  }
  .kbf-pmodal__c {
    flex: 0 0 auto;
    font-size: 13px;
    line-height: 20px;
  }
  .kbf-pmodal__c--label { flex: 1 1 0; text-align: left; }
  .kbf-pmodal__thead .kbf-pmodal__c { color: var(--kbf-nav-idle); font-weight: 400; }
  .kbf-pmodal__trow  .kbf-pmodal__c { color: var(--kbf-slate); }
  .kbf-pmodal__trow  .kbf-pmodal__c--label { color: var(--kbf-ink); font-weight: 500; }
  /* 열폭 — 시안 실측 (라벨은 grow) */
  .kbf-pmodal__thead .kbf-pmodal__c:nth-child(2),
  .kbf-pmodal__trow  .kbf-pmodal__c:nth-child(2) { width: 46px; }
  .kbf-pmodal__thead .kbf-pmodal__c:nth-child(3),
  .kbf-pmodal__thead .kbf-pmodal__c:nth-child(4),
  .kbf-pmodal__thead .kbf-pmodal__c:nth-child(5),
  .kbf-pmodal__trow  .kbf-pmodal__c:nth-child(3),
  .kbf-pmodal__trow  .kbf-pmodal__c:nth-child(4),
  .kbf-pmodal__trow  .kbf-pmodal__c:nth-child(5) { width: 30px; }
  .kbf-pmodal__thead .kbf-pmodal__c:nth-child(6),
  .kbf-pmodal__trow  .kbf-pmodal__c:nth-child(6) { width: 54px; }}