/* =========================================================
   Green Egg — Figma "Web / App" 페이지 구성
   (Main 1 · OUR STORY · OUR SERVICES · PARTNERS 프레임 기준)
   섹션 = padding 80 · 라벨(title-sm) → 제목(display-lg, 좌우 64 들여쓰기) → 내용
   ========================================================= */
.fs { padding: var(--space-800); }
/* 섹션 배경 규칙 (Figma 09.25): 배너 뒤 섹션이 여러 개면 Surface → Surface High → Surface … 번갈아, 하나뿐이면 배경 없음(Background).
   :where()로 우선순위 0 — 브랜드 섹션(.fs-cta · Surface Primary)은 자기 색 유지, 순서는 그대로 셈 */
:where(main > .fs) { background: var(--surface); }
:where(main > .fs:nth-of-type(odd)) { background: var(--surface-high); }   /* 1번째 section = 배너 */
:where(main > .fbanner + .fs:last-of-type, main > .fs:only-of-type) { background: transparent; }
.fs-in { max-width: 1760px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-320); }
.fs-pad { padding-inline: var(--space-640); }
.fs-label { margin: 0; font-size: var(--title-sm); font-weight: var(--weight-bold); line-height: 1.2; color: var(--on-surface-primary); }
.fs-title { margin: 0; font-family: var(--font-main); font-size: var(--display-lg); font-weight: var(--weight-bold); line-height: 1.2; color: var(--on-surface); word-break: keep-all; }
.fs-title .dot { color: var(--on-surface-primary-bright); }

/* ---------- Main Banner (Figma 107:593) ---------- */
.fbanner { padding: var(--space-400) 0 var(--space-800); }
.fbanner-box { position: relative; height: 640px; overflow: hidden; background: var(--gray-black); color: var(--on-surface-white); }
.fbanner-img { position: absolute; top: 0; left: calc(50% + 240px); transform: translateX(-50%); width: 1920px; height: 1072px; max-width: none; object-fit: cover; }
.fbanner-grad { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 1920px; height: 320px; max-width: none; object-fit: cover; pointer-events: none; }
.fbanner-text { position: absolute; left: var(--space-800); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-320); filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.fbanner-copy { display: flex; flex-direction: column; gap: var(--space-160); }
.fbanner-est { display: flex; align-items: center; gap: var(--space-160); font-size: var(--body-lg); line-height: 20px; color: var(--on-surface-primary-brightest); }
.fbanner-est::before { content: ""; width: 16px; height: 1px; background: currentColor; }
.fbanner h1 { margin: 0; font-family: var(--font-main); font-size: var(--display-lg); font-weight: var(--weight-bold); line-height: 1.25; word-break: keep-all; }
.fbanner h1 .dot { color: var(--on-surface-primary-brightest); }
.fbanner-desc { display: flex; flex-direction: column; gap: var(--space-080); }
.fbanner-desc p { margin: 0; font-size: var(--body-lg); line-height: 20px; }
.fbanner-desc strong { font-weight: var(--weight-semibold); }
.fbanner-note { position: absolute; right: var(--space-400); bottom: var(--space-400); font-size: var(--body-sm); color: var(--on-surface-lowest); text-shadow: 0 2px 4px rgba(0,0,0,.4); }

/* ---------- ABOUT US (Figma 710:6775) ---------- */
.fs-about { display: flex; gap: var(--space-640); align-items: flex-start; }
.fs-about-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-160); }
.fs-about-main .fs-title { margin-bottom: var(--space-400); }
.fs-about-copy p { margin: 0 0 20px; font-size: var(--body-lg); line-height: 20px; color: var(--on-surface); }
.fs-about-copy p b { font-weight: var(--weight-semibold); }
.fs-profile { display: flex; gap: var(--space-640); align-items: center; flex: none; }
.fs-profile-photo { width: 234px; height: 336px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface); flex: none; }
.fs-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.fs-profile-info { display: flex; flex-direction: column; gap: var(--space-320); }
.fs-profile-name { display: flex; gap: var(--space-080); align-items: center; font-size: var(--title-sm); color: var(--on-surface-low); }
.fs-profile-name b { font-weight: var(--weight-bold); color: var(--on-surface); letter-spacing: .1em; }
.fs-profile-list { display: flex; flex-direction: column; gap: var(--space-080); }
.fs-profile-list > div { display: flex; flex-direction: column; gap: var(--space-080); }
.fs-profile-list .t { font-size: var(--body-lg); line-height: 20px; font-weight: var(--weight-semibold); color: var(--on-surface); }
.fs-profile-list .s { font-size: var(--body-md); line-height: 20px; color: var(--on-surface-low); }

/* ---------- Element/List Card (Figma 729:7478) ---------- */
.fs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-160); }
.fs-cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-card { background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--radius-md); padding: var(--space-480) var(--space-320); display: flex; flex-direction: column; gap: var(--space-160); }
.fs-card .k { margin: 0; font-size: var(--label-lg); font-weight: var(--weight-bold); line-height: 1.4; color: var(--on-surface-primary); }
.fs-card h3 { margin: 0; font-size: var(--title-sm); font-weight: var(--weight-semibold); line-height: 1.4; color: var(--on-surface); word-break: keep-all; }
.fs-card p { margin: 0; font-size: var(--body-lg); line-height: 1.4; color: var(--on-surface-low); word-break: keep-all; }

/* ---------- ROSTER (Figma 108:642) ---------- */
.fs-roster { display: flex; flex-direction: column; align-items: center; gap: var(--space-320); }
.fs-roster .fs-title { align-self: stretch; }
.fs-roster-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-320); width: 100%; max-width: 1440px; }
.fs-more { align-self: center; }

/* Roster_상세 툴바 (Figma 719:9375): 검색(좌) · 성별/국적/리그/포지션(우), 각 200px */
.fs-toolbar { align-self: stretch; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-320); flex-wrap: wrap; }
.fs-toolbar .fs-field { width: 200px; }
.fs-filters { display: flex; gap: var(--space-320); flex-wrap: wrap; }
.fs-search-box { position: relative; }
.fs-search-box .ico { position: absolute; left: var(--space-080); top: 50%; transform: translateY(-50%); color: var(--on-surface-low); pointer-events: none; }
.fs-search-box .input { padding-left: calc(var(--space-080) + 16px + var(--space-080)); }
.ico-search { -webkit-mask-image: url('icons/search.svg?v=2'); mask-image: url('icons/search.svg?v=2'); }

/* 서브페이지 배너: 영문 제목 */
.fbanner-sub h1 { text-transform: uppercase; }

/* ---------- PARTNERS (Figma 106:556) ---------- */
.fs-logos { display: flex; justify-content: center; align-items: center; gap: var(--space-800); flex-wrap: wrap; }
.fs-logos img { width: 256px; height: 256px; }

/* ---------- 파트너 모집 CTA (Figma 725:10596) ---------- */
.fs-cta { background: var(--surface-primary); color: var(--on-surface-white); }
.fs-cta .fs-title { color: var(--on-surface-white); text-align: center; }
.fs-cta-logo { align-self: center; width: 160px; height: 40px; }   /* Figma logo_full / Type=White */
.fs-cta .fs-title .dot { color: var(--on-surface-primary-brightest); }
.fs-cta-body { display: flex; flex-direction: column; align-items: center; gap: var(--space-320); text-align: center; }
.fs-cta-body p { margin: 0; font-size: var(--body-lg); line-height: 20px; font-weight: var(--weight-semibold); }

/* ---------- CONTACT (Figma 718:7086) ---------- */
.fs-contact { display: flex; gap: var(--space-640); align-items: stretch; }
.fs-contact-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-160); text-align: center; }
.fs-contact-side p { margin: 0; font-size: var(--body-lg); line-height: 20px; color: var(--on-surface); }
.fs-contact-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-160); }
.fs-contact-links .sns { display: inline-flex; color: var(--on-surface); }
.fs-contact-links .sns .ico { width: 64px; height: 64px; }
.fs-form { flex: 1 1 0; min-width: 0; background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--radius-md); padding: var(--space-480) var(--space-320); display: flex; flex-direction: column; gap: var(--space-320); }
.fs-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-320); }
.fs-field { display: flex; flex-direction: column; gap: var(--space-040); min-width: 0; }
.fs-field > label { font-size: var(--label-lg); font-weight: var(--weight-semibold); line-height: 1.25; color: var(--on-surface-primary); }
.fs-form textarea.input { min-height: 36px; resize: vertical; }
.fs-form select.input, select.fs-select { appearance: none; -webkit-appearance: none; padding-right: var(--space-280); color: var(--on-surface-low); background: var(--surface) url('icons/chevron_down.svg') no-repeat right var(--space-080) center / 16px 16px; cursor: pointer; }
.fs-form-note { margin: 0; font-size: var(--body-lg); line-height: 20px; color: var(--on-surface-low); }
.fs-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-320); }
.fs-form-actions .ico, .fs-contact-links .btn .ico { width: 24px; height: 24px; }
.fs-form .form-note:empty { display: none; }

/* ---------- Profile Card (Figma 108:699): radius-md · 1.5 outline · 그림자 0 4 8 20% · 패널 패딩 24·16 ---------- */
.player-card { border: 1.5px solid var(--outline); border-radius: var(--radius-md); }
.pc-photo { aspect-ratio: 336 / 300; }
.pc-info { padding: var(--space-240) var(--space-160); }
.pc-tags .pc-tag:last-child { flex: 0 1 auto; }   /* 리그명은 글자 폭만큼, 남는 폭은 구단명이 사용 */
/* 이름 24px은 카드 폭이 Figma(336)에 가까울 때만 — 좁으면 기존 20px 유지(말줄임 방지) */
@media (min-width: 1700px) { .pc-name { font-size: var(--headline-sm); } }

/* ---------- Responsive ---------- */
/* 1920 기준 간격을 1440급 화면에서 조금 줄여 ABOUT 제목이 두 줄로 꺾이지 않게 */
@media (max-width: 1599.98px) {
  .fs-pad { padding-inline: 0; }
  .fs-about { gap: var(--space-480); }
  .fs-profile { gap: var(--space-320); }
}
@media (max-width: 1199.98px) {
  .fs { padding: var(--space-640) var(--space-400); }
  .fs-pad { padding-inline: 0; }
  .fs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-roster-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-about, .fs-contact { flex-direction: column; align-items: stretch; }
  .fs-about-main .fs-title { margin-bottom: var(--space-160); }
  .fs-profile { gap: var(--space-400); }
  .fbanner-text { left: var(--space-400); right: var(--space-400); }
}
@media (max-width: 979.98px) {
  .fs-cards.c3 { grid-template-columns: 1fr; }
  .fbanner-box { height: 560px; }
  .fbanner-img { left: 50%; width: 100%; height: 100%; object-position: 72% top; }
}
@media (max-width: 679.98px) {
  .fs { padding: var(--space-480) var(--space-200); }
  .fs-in { gap: var(--space-240); }
  .fs-cards { grid-template-columns: 1fr; }
  .fs-card { padding: var(--space-320) var(--space-240); }
  .fs-roster-list { gap: var(--space-160); }
  .fs-profile { flex-direction: column; align-items: flex-start; }
  .fs-logos { gap: var(--space-320); }
  .fs-logos img { width: 140px; height: 140px; }
  .fs-form { padding: var(--space-320) var(--space-200); gap: var(--space-240); }
  .fs-form-row { grid-template-columns: 1fr; gap: var(--space-240); }
  .fs-toolbar, .fs-filters { gap: var(--space-160); }
  .fs-toolbar .fs-search { width: 100%; }
  .fs-filters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .fs-filters .fs-field { width: auto; }
  .fs-form-actions { gap: var(--space-120); }
  .fs-form-actions .btn { flex: 1 1 auto; }
  .fs-contact-links .sns .ico { width: 48px; height: 48px; }
  .fs-contact { gap: var(--space-320); }
  .fbanner { padding: var(--space-200) 0 var(--space-480); }
  .fbanner-box { height: 480px; }
  .fbanner-text { left: var(--space-200); right: var(--space-200); gap: var(--space-240); }
  .fbanner-desc br { display: none; }
  .fbanner-note { right: var(--space-160); bottom: var(--space-160); }
}

/* =========================================================
   Roaster - Profile Card Detail (Figma 729:8131)
   1760×920 · 모서리 32 · 좌 카드 640 | 우 패널(surface-high, 좌우 48)
   ========================================================= */
.pd-modal { border: 2px solid var(--outline); border-radius: var(--radius-lg); }   /* Figma Profile Card Detail: Outline 2px 안쪽 · r16 (09.26) */

/* 좌 카드: 사진 위 · 하단 480 영역에 surface-high 그라데이션 + blur 40 */
.pd-card { background: var(--surface-high); }
.pd-card .pd-photo2 { background-position: center top; }
.pd-card .cap { top: var(--space-160); right: var(--space-160); font-size: var(--body-sm); color: var(--on-surface-white); text-shadow: 0 2px 4px rgba(0,0,0,.4); }
.pd-card .info { padding: var(--space-400) var(--space-320) var(--space-800); gap: var(--space-100); min-height: 52%;
  justify-content: flex-end;
  background: linear-gradient(color-mix(in srgb, var(--surface-high) 0%, transparent), var(--surface-high) 75%);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
.pd-card .pd-num2 { right: 0; bottom: -20px; font-weight: var(--weight-bold); font-size: 240px; line-height: 1; letter-spacing: -0.02em; color: var(--on-surface-light-gray); }
.pd-card .tag { font-size: var(--title-sm); line-height: 24px; }
.pd-card .tag .ico { width: 32px; height: 32px; }
.pd-card .nm { font-weight: var(--weight-bold); font-size: var(--headline-lg); line-height: 38px; letter-spacing: .08em; }
.pd-card .hr { background: var(--on-surface-primary); margin: 0; }
.pd-card .lbl { font-size: var(--title-sm); line-height: 24px; font-weight: var(--weight-semibold); color: var(--on-surface-low); }
.pd-card .val { font-size: var(--title-sm); line-height: 24px; font-weight: var(--weight-semibold); margin-top: var(--space-080); }

/* 우 패널 헤더: 제목 28 · 아이콘 36(흰 면, r8) · 버튼 2개 · 닫기(원형) · 아래 primary 1px 구분선 */
.pd-panel { position: relative; padding: var(--space-200) var(--space-480) 0; }
.pd-head { padding: 0 0 var(--space-200); border-bottom: 1px solid var(--on-surface-primary); }
.pd-head h2 { font-size: var(--headline-md); }
.pd-head .acts { gap: var(--space-160); }
.pd-head .pd-close { margin-left: var(--space-160); }
.pd-iconbtn { border: none; background: var(--gray-btn); }
.pd-iconbtn .ico { width: 20px; height: 20px; }
.pd-close { background: transparent; }
.pd-head .pd-act.btn-sm { min-height: 36px; font-size: var(--label-lg); }
/* 패널 하단 80px 페이드 (Figma Gradiant 384:2911) */
.pd-panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; pointer-events: none; background: linear-gradient(transparent, var(--surface-high)); }

/* 본문: 패딩 32 · 섹션 간격 32 */
.pd-body { padding: var(--space-320) var(--space-320) var(--space-800); gap: var(--space-320); scrollbar-width: thin; scrollbar-color: var(--outline-input) transparent; }
.pd-body > section + section:nth-of-type(3) { border-top: 1px solid var(--outline); padding-top: var(--space-320); }
.pd-body > section + section:nth-of-type(4) { border-top: 1px solid var(--outline); padding-top: var(--space-320); }
.pd-sec-head { height: 29px; padding-inline: var(--space-160); margin-bottom: var(--space-100); }
.pd-sec-head .meta { font-size: var(--body-lg); color: var(--on-surface-low); letter-spacing: 0; }

/* Component/List: 흰 면 · r16 · 패딩 16/32 · 4칸 + 세로 구분선(lowest, 위아래 32 여백) */
.pd-stats { display: flex; gap: var(--space-160); padding: var(--space-160) var(--space-320); background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-lg); }
.pd-stat { flex: 1 1 0; flex-direction: column; align-items: stretch; justify-content: center; gap: var(--space-080); padding: var(--space-160) var(--space-080); position: relative; }
.pd-stat + .pd-stat::before { content: ""; position: absolute; left: calc(-1 * var(--space-080) - .5px); top: var(--space-320); bottom: var(--space-320); width: 1px; background: var(--on-surface-lowest); }
.pd-stat .k { font-size: var(--body-lg); white-space: nowrap; }
.pd-stat .v { font-size: var(--body-lg); text-align: left; padding-left: 28px; }

/* 표: r16 · 머리행 surface-low · 행 높이 88 · 좌우 32 */
.pd-tablewrap { border: 1px solid var(--outline); }
.pd-table th { font-size: var(--body-lg); line-height: 1.4; text-transform: none; color: var(--on-surface-low); padding: var(--space-160) var(--space-080); }
.pd-table td { height: 88px; padding: var(--space-160) var(--space-080); font-size: var(--body-lg); font-weight: var(--weight-semibold); line-height: 1.4; }
.pd-table tr > :first-child { padding-left: calc(var(--space-320) + var(--space-080)); }
.pd-table tr > :last-child { padding-right: calc(var(--space-320) + var(--space-080)); }
.pd-date b { font-weight: var(--weight-semibold); color: var(--on-surface); }
.pd-date span { display: block; font-size: var(--body-md); font-weight: var(--weight-semibold); color: var(--on-surface-low); }
.pd-team { color: var(--on-surface); }
.pd-team .ico { width: 24px; height: 24px; background-color: var(--on-surface); }
.res { font-size: var(--body-md); font-weight: var(--weight-semibold); padding-left: 32px; margin-top: 0; }
.pd-contrib { font-size: var(--body-md); font-weight: var(--weight-semibold); }
/* Elment/Chip_Rating: 80×36 · r8 · 기본 surface-high+outline / 우수 primary+primary-high */
.pd-rating { min-width: 80px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-160); border: 1px solid var(--outline); font-size: var(--label-lg); font-weight: var(--weight-regular); }
.pd-rating.high { background: var(--on-surface-primary); border-color: var(--on-surface-primary-high); color: var(--on-surface-inverse); }   /* 다크: 밝은 초록 면 → 진한 글자 */

@media (min-width: 980px) {
  .pd-overlay { padding: var(--space-400) var(--space-800); }
  .pd-modal { max-width: 1760px; height: min(920px, 100%); max-height: none;
    grid-template-columns: clamp(360px, 36.4%, 640px) minmax(0, 1fr); }
}
/* ---------- 반응형 (09.23 폭 320~1920 측정 기반) ----------
   측정 결과: ① 카드 폭 < 437에서 구단·리그(20px) 잘림 ② 패널 < 580에서 스탯 라벨 잘림
   ③ 패널 < 760에서 헤더 버튼 줄바꿈 → 카드는 자기 폭 기준, 패널은 패널 폭 기준으로 단계 조정 */
.pd-card { container-type: inline-size; container-name: pdcard; }
.pd-card .tag { flex: 0 1 auto; min-width: 0; }
.pd-card .tag .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-card .row .tag:first-child { flex: 1 1 auto; }
.pd-card .tag-nat { flex: none; }
.pd-card .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container pdcard (max-width: 519px) {   /* 400~519: 한 단계 축소 */
  .pd-card .info { padding: var(--space-400) var(--space-240) var(--space-480); }
  .pd-card .tag { font-size: var(--body-lg); line-height: 20px; }
  .pd-card .tag .ico { width: 24px; height: 24px; }
  .pd-card .nm { font-size: var(--headline-md); line-height: 1.2; letter-spacing: .04em; }
  .pd-card .lbl, .pd-card .val { font-size: var(--body-lg); line-height: 20px; }
  .pd-card .pd-num2 { font-size: 180px; }
}
@container pdcard (max-width: 399px) {   /* < 400: 두 단계 축소 */
  .pd-card .info { padding: var(--space-320) var(--space-200) var(--space-320); gap: var(--space-080); }
  .pd-card .tag { font-size: var(--body-md); gap: var(--space-040); }
  .pd-card .tag .ico { width: 20px; height: 20px; }
  .pd-card .nm { font-size: var(--headline-sm); letter-spacing: 0; }
  .pd-card .lbl, .pd-card .val { font-size: var(--body-md); }
  .pd-card .pd-num2 { font-size: 140px; bottom: -12px; }
}
/* 패널 내용폭 < 680: 헤더 버튼을 아이콘만 (텍스트 버튼이 줄바꿈되기 전) */
@container pdpanel (max-width: 679.98px) {
  .pd-head .pd-act { min-width: 0; width: 36px; height: 36px; padding: 0; gap: 0; justify-content: center; }
  .pd-head .pd-act .txt { display: none; }   /* 문의하기는 아이콘만 남을 때 Figma arrow 아이콘 유지 */
  .pd-head .acts { gap: var(--space-080); }
  .pd-head .pd-close { margin-left: 0; }
}
/* 스탯(패널 내용폭 기준): 880+ = 4칸 / 480~879 = 2×2 / 360~479 = 2×2 + 라벨 14 / < 360 = 1열 */
@container pdpanel (max-width: 479px) { .pd-stat .k { font-size: var(--label-md); gap: var(--space-040); } .pd-stat .k .ico { width: 20px; height: 20px; } .pd-stat .v { padding-left: 24px; } }
@container pdpanel (max-width: 359px) {
  .pd-stats .pd-stat { flex-basis: 100%; }
  .pd-stats .pd-stat::before { display: none; }
  .pd-stats .pd-stat + .pd-stat { border-top: 1px solid var(--outline); }
  .pd-head h2 { font-size: var(--title-sm); }
  .pd-head .acts .pd-iconbtn:not(.pd-close) { display: none; }   /* 320급: 공유 숨김(제목 잘림 방지) */
}
/* 표: 셀 안 줄바꿈 대신 표 가로 스크롤 */
.pd-team, .pd-contrib, .pd-date b { white-space: nowrap; }
@container pdpanel (max-width: 879px) { .pd-table th:nth-child(2):nth-last-child(6) { min-width: 0; } }

/* 모달 배치: 1280+ = Figma 비율 / 1024~1279 = 카드 360 고정 / 680~1023 = 위아래 쌓기(가운데 창) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .pd-overlay { padding: var(--space-240); }
  .pd-modal { grid-template-columns: 360px minmax(0, 1fr); }
}
@media (min-width: 680px) and (max-width: 1023.98px) {
  .pd-overlay { padding: var(--space-240); }
  .pd-modal { max-width: 760px; height: 100%; max-height: none; grid-template-columns: 1fr; grid-template-rows: 480px minmax(0, 1fr); }
}
/* 세로쌓기(< 1024): 카드가 가로로 넓고 낮아 정보 영역이 얼굴·어두운 배경을 덮음 → 정보 영역은 내용 높이만, 글자 뒤는 불투명 */
@media (max-width: 1023.98px) {
  .pd-card .info { min-height: 0; padding-top: var(--space-640); padding-bottom: var(--space-320);
    background: linear-gradient(transparent, var(--surface-high) var(--space-560, 56px));
    -webkit-mask-image: linear-gradient(transparent, #000 var(--space-480)); mask-image: linear-gradient(transparent, #000 var(--space-480)); }
}

/* 열 폭 — Recent: DATE·RATING 240 / Career: TEAM 최소 240 */
.pd-table th:first-child:nth-last-child(3), .pd-table th:nth-child(3):last-child { width: 240px; }
.pd-table th:nth-child(2):nth-last-child(6) { min-width: 240px; }

/* 패널 내용폭 < 880이면 4칸 → 2×2 (DATE OF BIRTH 한 줄 기준) */
@container pdpanel (max-width: 879px) {
  .pd-stats { flex-wrap: wrap; row-gap: 0; }
  .pd-stat { flex: 1 1 calc(50% - var(--space-160)); }
  .pd-stat:nth-child(3)::before { display: none; }
}
@media (max-width: 679.98px) {
  .pd-modal { border-radius: 0; }
  .pd-head h2 { font-size: var(--title-md); }
  .pd-head .acts { gap: var(--space-080); }
  .pd-head .pd-close { margin-left: 0; }
  .pd-stat { padding-inline: 0; }
  .pd-stat .k { white-space: normal; font-size: var(--label-md); gap: var(--space-040); }
  .pd-stat .k .ico { width: 20px; height: 20px; }
  .pd-stat .v { padding-left: 24px; }
  .pd-panel { padding: var(--space-160) var(--space-160) 0; }
  .pd-body { padding: var(--space-240) 0 var(--space-800); }
  .pd-stats { padding: var(--space-080) var(--space-160); }
  .pd-card .info { min-height: 0; }   /* 카드 글자 크기는 @container pdcard 단계가 담당 */
}

/* =========================================================
   Drop Down (Figma DS 718:6715 Element/Drop Down · 718:7289 Drop Down List · 718:7343 List Item)
   Default: 1px outline · Low 글자 · chevron down / Hover: 글자 밑줄 / Actived(열림): 2px outline-highest · 글자 On Surface · chevron up
   Disabled: Lowest / 목록: 2px outline-highest · r4 · 항목 36(패딩 8) · 5개 높이(180)까지, 넘치면 스크롤
   ========================================================= */
.dd { position: relative; width: 100%; }
.dd-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }  /* 값 · 필수 검증용 */
.dd-btn { display: flex; align-items: center; gap: var(--space-040); width: 100%; min-width: 120px; min-height: 36px;
  padding: calc(var(--space-080) - 1px) var(--space-080); border: 1px solid var(--outline-input); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--on-surface-low); font-family: var(--font-main); font-size: var(--body-lg); line-height: 20px;
  text-align: left; cursor: pointer; }
.dd-val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-ico { flex: none; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: url('icons/chevron_down.svg') center / contain no-repeat; mask: url('icons/chevron_down.svg') center / contain no-repeat; }
.dd-btn:hover .dd-val { text-decoration: underline; text-underline-offset: 2px; }
.dd-btn:focus-visible { outline: 2px solid var(--outline-highest); outline-offset: 2px; }
.dd.has-value .dd-btn { color: var(--on-surface); }
.dd.is-open .dd-btn { border-color: var(--outline-highest); color: var(--on-surface); }
.dd.is-open .dd-btn:hover .dd-val { text-decoration: none; }
.dd.is-open .dd-ico { -webkit-mask-image: url('icons/chevron_up.svg'); mask-image: url('icons/chevron_up.svg'); }
.dd.is-disabled .dd-btn { border-color: var(--outline); color: var(--on-surface-lowest); cursor: not-allowed; }
.dd.is-disabled .dd-btn:hover .dd-val { text-decoration: none; }
.dd-native:user-invalid + .dd-btn, .dd-native[aria-invalid="true"] + .dd-btn { border-color: var(--outline-red); }

.dd-list { position: absolute; left: 0; right: 0; top: calc(100% + var(--space-040)); z-index: 40; margin: 0; padding: 0; list-style: none;
  max-height: calc(36px * 5 + 4px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--outline-input) transparent; background: var(--gray-btn);
  border: 2px solid var(--outline-input); border-radius: var(--radius-sm); }
.dd.is-up .dd-list { top: auto; bottom: calc(100% + var(--space-040)); }
.dd-item { padding: var(--space-080); min-height: 36px; font-size: var(--body-lg); line-height: 20px; color: var(--on-surface-low); background: var(--gray-btn); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-item:hover, .dd-item.is-active { background: var(--gray-btn-hover); }
.dd-item:active, .dd-item[aria-selected="true"] { background: var(--gray-btn-active); color: var(--on-surface); }
.dd-item[aria-disabled="true"] { background: var(--gray-btn); color: var(--on-surface-lowest); cursor: not-allowed; }

/* 안내 토스트 (공유 링크 복사 · 개발 중 안내) — 모달(z 100) 위 */
.ge-toast { position: fixed; left: 50%; bottom: var(--space-400); z-index: 300; transform: translate(-50%, 8px); opacity: 0;
  max-width: calc(100vw - 2 * var(--space-200)); padding: var(--space-120) var(--space-200); border-radius: var(--radius-md);
  background: var(--on-surface); color: var(--on-surface-inverse); font-size: var(--body-md); line-height: 20px; text-align: center;
 transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.ge-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* EN 모드: 모달 스탯 라벨은 Figma처럼 대문자 (지원폼과 공유하는 번역 "Date of Birth" 등 포함) */
html[lang="en"] .pd-stat .k { text-transform: uppercase; }

/* ---------- CONTACT — Element/Form (Figma 786:6149) ----------
   Default: 카드 2개만 → 카드를 누르면 폼이 열림. 선수 지원(Type2)은 지원서 안내 띠가 위에 붙음, 일반 문의(Type3)는 폼만. */
.cf { justify-content: flex-start; }
.cf-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-320); }
/* Element/Card Button: State Default · Hover Pressed · Active · Disabled */
.card-btn {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-160);
  /* Figma 선은 안쪽(inside) → 테두리 1.5px만큼 패딩을 빼서 200px 유지 */
  min-height: 200px; padding: calc(var(--space-480) - 1.5px) calc(var(--space-320) - 1.5px); text-align: left;
  background: var(--gray-btn); border: 1.5px solid var(--outline); border-radius: var(--radius-md);
  font-family: var(--font-main); cursor: pointer; transition: background-color .16s ease, border-color .16s ease;
}
.card-btn:is(:hover, :active) { background: var(--gray-btn-hover); }
.card-btn[aria-pressed="true"] { background: var(--gray-btn-active); border-color: var(--outline-highest); }
.card-btn:focus-visible { outline: 2px solid var(--outline-highest); outline-offset: 2px; }
.card-btn-k { font-size: var(--body-lg); line-height: 1.4; font-weight: var(--weight-bold); color: var(--on-surface-primary); }
.card-btn-t { font-size: var(--title-sm); line-height: 1.4; font-weight: var(--weight-semibold); color: var(--on-surface); }
.card-btn-d { font-size: var(--body-lg); line-height: 1.4; color: var(--on-surface-low); }
/* 다크 모드: 눌림 · 호버 면(Gray-600 · 700) 위 보조 글자가 묻혀서 한 단계 밝게 (10.04) */
@media (prefers-color-scheme: dark) {
  .card-btn:is(:hover, :active, [aria-pressed="true"]) .card-btn-d { color: var(--on-surface); }
  .card-btn[aria-pressed="true"] .card-btn-k { color: var(--on-surface-primary-bright); }
  .dd-item:is(:hover, .is-active) { color: var(--on-surface); }
}

.cf-body { display: flex; flex-direction: column; gap: var(--space-320); }
.cf-body[hidden], .cf-apply[hidden] { display: none; }
/* 선수 지원 안내 띠 */
.cf-apply {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-320);
  padding: var(--space-080) var(--space-160); background: var(--surface-primary);
  border: 1px solid var(--outline-highest); border-radius: var(--radius-md); color: var(--on-surface-white);
}
.cf-apply-copy { display: flex; flex-direction: column; gap: var(--space-080); min-width: 0; }
.cf-apply-copy p { margin: 0; font-size: var(--body-lg); line-height: 20px; }
.cf-apply-copy .cf-apply-t { font-weight: var(--weight-semibold); }
.cf-apply .btn { flex: none; }
.cf-apply .ico { width: 24px; height: 24px; }

/* Element/Check Box: 32 터치 영역 안에 24 상자 · Selected = Outline Highest 2px + 체크 */
.cf-actions { justify-content: space-between; align-items: center; }
.check { display: inline-flex; align-items: center; gap: var(--space-080); cursor: pointer; font-size: var(--body-lg); line-height: 20px; color: var(--on-surface-low); }
.check input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.check-box { position: relative; flex: none; width: 32px; height: 32px; }
.check-box::before { content: ""; position: absolute; inset: 4px; background: var(--surface); border: 1.5px solid var(--outline-input); border-radius: var(--radius-sm); }
.check-box::after { content: ""; position: absolute; inset: 4px; background: var(--on-surface); -webkit-mask: url('icons/check.svg') center / 24px no-repeat; mask: url('icons/check.svg') center / 24px no-repeat; opacity: 0; }
.check input:checked + .check-box::before { border: 2px solid var(--outline-highest); }
.check input:checked + .check-box::after { opacity: 1; }
.check input:focus-visible + .check-box::before { outline: 2px solid var(--outline-highest); outline-offset: 2px; }
.check.is-error .check-box::before { border-color: var(--outline-red); }
.form-note.err { color: var(--outline-red); font-weight: var(--weight-semibold); }

@media (max-width: 679.98px) {
  .cf-choice { grid-template-columns: 1fr; gap: var(--space-160); }
  .card-btn { min-height: 0; padding: var(--space-240) var(--space-200); }
  .cf-apply { flex-direction: column; align-items: stretch; padding: var(--space-160); }
  .cf-actions { flex-direction: column; align-items: stretch; }
}
.dd-item[hidden] { display: none; }

/* ---------- 지원서 동의 · 이용 조건 (09.25) ----------
   건강 정보 = 별도 선택 동의, 동의 전 입력칸 비활성. 각 동의는 「내용 보기」로 항목 · 목적 · 보유 기간 · 거부 권리 고지 */
.opt { font-size: var(--body-md); font-weight: var(--weight-regular); color: var(--on-surface-low); }
.field-hint { margin: var(--space-080) 0 0; font-size: var(--body-sm); line-height: 1.5; color: var(--on-surface-low); }
/* 칸 아래 오류 문구 (지원서 — 브라우저 기본 말풍선 대신, 10.12) */
.field-err { margin: var(--space-080) 0 0; font-size: var(--body-sm); line-height: 1.5; color: var(--on-surface-red); font-weight: var(--weight-semibold); }
/* 사진 선택: 기본 파일 버튼 숨기고 버튼 + 파일 이름 (Figma List=6: Button Gray · Sm, 간격 16) */
.file-pick { position: relative; display: flex; align-items: center; gap: var(--space-160); min-width: 0; }
.file-native { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.file-btn { flex: none; cursor: pointer; }
.file-native:focus-visible + .file-btn { outline: 2px solid var(--outline-highest); outline-offset: 2px; }
.file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--body-lg); color: var(--on-surface-low); }
.file-pick.has-file .file-name { color: var(--on-surface); }
.file-pick.is-error .file-btn { outline: 1px solid var(--outline-red); outline-offset: 0; }
.gate { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-240); transition: opacity .16s ease; }
.gate[disabled] { opacity: .45; }
.gate[hidden] { display: none; }
.consent + .gate, .consent + .consent, .gate + .consent { margin-top: var(--space-160); }
.consent-line { display: flex; flex-direction: column; gap: var(--space-080); }
.consent-line .check { color: var(--on-surface); }
.consent-more { margin-left: 40px; font-size: var(--body-sm); color: var(--on-surface-low); }
.consent-more summary { cursor: pointer; width: max-content; min-height: 32px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.consent-more dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-080) var(--space-160); margin: var(--space-080) 0 0; padding: var(--space-160); background: var(--surface-high, var(--gray-btn-active)); border-radius: var(--radius-sm); line-height: 1.5; }
.consent-more dt { font-weight: var(--weight-semibold); color: var(--on-surface); }
.consent-more dd { margin: 0; }
.apply-terms { margin: 0 0 var(--space-160); padding-left: 1.2em; font-size: var(--body-sm); line-height: 1.6; color: var(--on-surface); }
.consent-policy { margin: 0 0 var(--space-240); font-size: var(--body-sm); color: var(--on-surface-low); }
.consent-policy a, .fs-form .cf-policy a { color: var(--on-surface-primary); text-decoration: underline; text-underline-offset: 3px; }
.guardian { margin-top: var(--space-240); padding: var(--space-240); border: 1.5px solid var(--outline); border-radius: var(--radius-md); }
.guardian-note { margin: 0; font-size: var(--body-sm); font-weight: var(--weight-semibold); color: var(--on-surface); }
@media (max-width: 679.98px) { .consent-more { margin-left: 0; } .consent-more dl { grid-template-columns: 1fr; } }
.consent-more a { color: var(--on-surface-primary); text-decoration: underline; text-underline-offset: 3px; }
.cf-more { margin-left: 40px; }

/* ---------- 개인정보처리방침 (privacy.html) ---------- */
.legal-page .fs-in { max-width: 960px; }
.legal { display: flex; flex-direction: column; gap: var(--space-160); font-size: var(--body-lg); line-height: 1.7; color: var(--on-surface); }
.legal h2 { margin: var(--space-400) 0 0; font-size: var(--title-sm); line-height: 1.4; font-weight: var(--weight-bold); color: var(--on-surface-high); scroll-margin-top: 240px; }
.legal p, .legal ul { margin: 0; }
.legal ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-080); }
.legal-lead { color: var(--on-surface-low); }
.legal-toc { padding: var(--space-240); background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--radius-md); }
.legal-toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: var(--space-480); }
.legal-toc a { color: var(--on-surface); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-table { overflow-x: auto; border: 1.5px solid var(--outline); border-radius: var(--radius-md); background: var(--surface); }
.legal-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--body-md); line-height: 1.55; }
.legal-table th, .legal-table td { padding: var(--space-120) var(--space-160); text-align: left; vertical-align: top; border-bottom: 1px solid var(--outline); }
.legal-table th { background: var(--surface-high); font-weight: var(--weight-semibold); white-space: nowrap; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-tag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; background: color-mix(in srgb, var(--outline-red) 12%, transparent); color: var(--outline-red); font-size: var(--label-sm); font-weight: var(--weight-semibold); }
.legal-card { padding: var(--space-240); background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-040); }
@media (max-width: 679.98px) { .legal-toc ol { columns: 1; } }
.footer-privacy { color: inherit; font-weight: var(--weight-bold); text-decoration: none; }
.footer-privacy:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 동의 화면의 「중요한 내용」(민감정보 · 보유 기간 · 제공받는 자와 목적)은 굵게 + 밑줄로 구분 (개인정보 보호법 제22조②) */
.em { font-weight: var(--weight-bold); text-decoration: underline; text-underline-offset: 3px; color: var(--on-surface-high); }

/* ---------- 개인정보 처리방침 창 (폼에서 열 때 페이지 이동 없이) ---------- */
html.ge-lock, html.ge-lock body { overflow: hidden; }
.ge-sheet { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: var(--space-240); background: var(--disabled); }
.ge-sheet.open { display: flex; }
.ge-sheet-panel { width: min(880px, 100%); max-height: min(85vh, 900px); display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-xl, 16px); overflow: hidden; }
.ge-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-160); padding: var(--space-200) var(--space-240); border-bottom: 1px solid var(--outline); }
.ge-sheet-head h2 { margin: 0; font-size: var(--title-sm); font-weight: var(--weight-bold); color: var(--on-surface-high); }
.ge-sheet-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--on-surface); cursor: pointer; }
.ge-sheet-close:hover { background: var(--gray-btn-hover); }
.ge-sheet-close .ico { width: 24px; height: 24px; }
.ge-sheet-body { overflow-y: auto; padding: var(--space-240); overscroll-behavior: contain; }
.ge-sheet-body .legal h2 { margin-top: var(--space-320); scroll-margin-top: 0; }
.ge-sheet-body .legal h2:first-of-type { margin-top: var(--space-160); }
.ge-sheet-loading { margin: 0; color: var(--on-surface-low); }
.ge-sheet-foot { margin: 0; padding: var(--space-120) var(--space-240); border-top: 1px solid var(--outline); font-size: var(--body-sm); color: var(--on-surface-low); }
@media (max-width: 679.98px) { .ge-sheet { padding: 0; align-items: flex-end; } .ge-sheet-panel { max-height: 92vh; border-radius: 16px 16px 0 0; } .ge-sheet-body { padding: var(--space-200); } }

/* ======================================================================
   선수 지원 (join) — Figma CONTACT Player 807:6060 · CONTACT Player List 807:7947
   ====================================================================== */
.join-intro, .join-wizard { background: transparent; }   /* 안내 · 단계는 한 번에 하나만 보임 = 단독 섹션 → 배경 없음 */
.join-intro-in, .wz-wrap { display: flex; flex-direction: column; gap: var(--space-320); }
.join-sub { margin: 0; font-size: var(--body-lg); line-height: 1.4; color: var(--on-surface-low); }

/* Element/List Card */
.list-cards { list-style: none; margin: 0; padding: 0 var(--space-800, 80px); display: flex; flex-direction: column; gap: var(--space-160); }
.list-card { display: flex; flex-direction: column; justify-content: center; gap: var(--space-160); padding: calc(var(--space-480) - 1.5px) calc(var(--space-320) - 1.5px); background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--radius-md); }
.list-card-k { font-size: var(--body-lg); line-height: 1.4; font-weight: var(--weight-bold); color: var(--on-surface-primary); }
.list-card-t { font-size: var(--title-sm); line-height: 1.4; font-weight: var(--weight-semibold); color: var(--on-surface); }
.join-start { display: flex; justify-content: center; }

/* 단계 화면: 가운데 992px */
.wz-wrap { max-width: 992px; margin-inline: auto; width: 100%; }
.wz-head { display: flex; flex-direction: column; gap: var(--space-160); }
.join-wizard .fieldset { margin: 0; }
.join-wizard .fieldset > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 제목은 위 wz-title이 보여줌 */
.join-wizard .wz-step.is-active { display: flex; flex-direction: column; gap: var(--space-320); }

/* Step: STEP n / 9 + 9칸 막대 */
.join-wizard .wz-progress { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-080); margin: 0; }
.join-wizard .wz-count { font-size: var(--label-sm, 12px); line-height: 14px; font-weight: var(--weight-semibold); letter-spacing: 0; color: var(--on-surface-low); }
.join-wizard .wz-count b { font-family: var(--font-main); font-size: inherit; font-weight: inherit; color: var(--on-surface-primary); }
.wz-segs { display: flex; gap: 2px; height: 10px; padding: 0; border: 1px solid var(--outline); border-radius: 999px; overflow: hidden; background: var(--surface); }
.wz-segs span { flex: 1 1 0; background: var(--surface-low); transition: background-color .2s ease; }
.wz-segs span.on { background: var(--surface-primary); }

/* 왜 필요한가요? — Surface Primary 띠 */
.join-wizard .wz-why { display: flex; flex-direction: column; gap: var(--space-080); margin: 0; padding: var(--space-080) var(--space-160); background: var(--surface-primary); border: 1px solid var(--outline-highest); border-left: 1px solid var(--outline-highest); border-radius: var(--radius-md); color: var(--on-surface-white); font-size: var(--body-lg); line-height: 20px; }
.join-wizard .wz-why b { color: inherit; font-weight: var(--weight-semibold); }

/* Element/Form 카드: 흰 면 · 안쪽 필드는 632px */
.wz-card { padding: calc(var(--space-480) - 1.5px) max(var(--space-320), calc((100% - 632px) / 2)); background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--radius-md); }
.wz-card .field:last-child { margin-bottom: 0; }
.join-wizard .form-grid-2 { gap: 0 var(--space-320); }

/* 버튼 줄: 왼쪽 취소 · 이전 / 오른쪽 다음 단계 + 임시 저장하기 */
.join-wizard .wz-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-160); margin: 0; }
.join-wizard .wz-nav .wz-prev { margin: 0; }
.wz-nav-r { display: flex; align-items: center; gap: var(--space-160); }

/* Element/Radio Button: 32 영역 · 24 원 · Selected = Outline Highest 2px + 12 점 */
.join-wizard .radio-row { gap: var(--space-160); }
.join-wizard .radio-row label { gap: var(--space-080); min-height: 32px; }
.join-wizard .radio-row input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 4px; border: 1.5px solid var(--outline-input); border-radius: 50%; background: var(--surface); display: grid; place-content: center; cursor: pointer; }
.join-wizard .radio-row input[type="radio"]::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--on-surface); transform: scale(0); transition: transform .12s ease; }
.join-wizard .radio-row input[type="radio"]:checked { border: 2px solid var(--outline-highest); }
.join-wizard .radio-row input[type="radio"]:checked::before { transform: scale(1); }
.join-wizard .radio-row input[type="radio"]:focus-visible { outline: 2px solid var(--outline-highest); outline-offset: 2px; }

@media (max-width: 1023.98px) { .list-cards { padding: 0; } }
@media (max-width: 679.98px) {
  .list-card { min-height: 0; padding: var(--space-240) var(--space-200); }
  .wz-card { padding: var(--space-240) var(--space-200); }
  /* 모바일 버튼: 1줄 = 다음 단계(주 버튼, 전체 폭) · 2줄 = 이전 | 임시 저장 — 가장 중요한 버튼이 가장 크게, 엄지 닿는 위치에 */
  .join-wizard .wz-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-120); }
  .wz-nav-r { display: contents; }
  .wz-nav-r .wz-next, .wz-nav-r .wz-review-open { grid-column: 1 / -1; order: -1; }
  .join-wizard .wz-nav .btn { width: 100%; }
}

/* 지원 단계 간격 = Figma CONTACT Player List (09.25) — 행 32 · 라벨↔입력 4 · 카드↔버튼 32 */
.join-wizard .field { gap: var(--space-040); margin-bottom: var(--space-320); align-content: start; }
.join-wizard .field > label { font-size: var(--body-lg); line-height: 1.2; color: var(--on-surface-primary); }
.join-wizard .wz-card > :last-child,
.join-wizard .wz-card > .form-grid-2:last-child > .field:nth-last-child(-n+2) { margin-bottom: 0; }
.join-wizard .radio-row label { color: var(--on-surface-low); }
.join-wizard .radio-row label:has(:checked) { color: var(--on-surface); }
.join-wizard .wz-nav { margin-top: var(--space-320); }
.join-wizard .field-hint { margin: 0; }
.join-wizard .field-err { margin: 0; }
/* 칸 간격 (10.12): 2열 그리드 안 칸은 자기 margin 대신 행 간격(row-gap) — 모바일 1열에서 마지막 칸 margin 0 때문에 다음 칸과 붙던 문제. 그리드 자체가 아래 간격을 가짐 */
.join-wizard .form-grid-2 { row-gap: var(--space-320); margin-bottom: var(--space-320); }
.join-wizard .form-grid-2 > .field { margin-bottom: 0; }
.join-wizard .wz-card > .form-grid-2:last-child, .join-wizard .gate > .form-grid-2:last-child { margin-bottom: 0; }
.join-wizard .gate { gap: var(--space-320); }
.join-wizard .gate > .field, .join-wizard .gate > .form-grid-2 { margin-bottom: 0; }
.join-wizard input[type="date"].input { height: 36px; }
.join-wizard .consent-policy { margin-bottom: var(--space-320); }
/* 모바일: 섹션 안쪽 간격을 다른 페이지(.fs-in 24)와 같은 단계로 */
@media (max-width: 679.98px) {
  .join-intro-in, .wz-wrap, .join-wizard .wz-step.is-active { gap: var(--space-240); }
  .join-wizard .field { margin-bottom: var(--space-240); }
  .join-wizard .form-grid-2 { row-gap: var(--space-240); margin-bottom: var(--space-240); }
  .join-wizard .gate { gap: var(--space-240); }
  .join-wizard .wz-nav { margin-top: var(--space-240); }
  .join-wizard .consent-policy { margin-bottom: var(--space-240); }
}
/* 처리방침은 한국어가 공식본 — EN 모드에서만 안내 한 줄 (전문 번역은 법률 검토 후) */
.legal-lang-note { display: none; margin: 0 0 var(--space-240); padding: var(--space-160) var(--space-200); border: 1.5px solid var(--outline); border-radius: var(--radius-md); background: var(--surface); font-size: var(--body-md); line-height: 1.5; color: var(--on-surface); }
html[lang="en"] .legal-lang-note { display: block; }
/* 09.25 선수 협의중 자리표시 카드 — 사진 비움 · 눌러도 반응 없음 */
.player-card.is-pending { cursor: default; }
.player-card.is-pending:hover { transform: none; }
.player-card.is-pending .pc-photo { background: var(--gray-900); filter: none; }   /* 사진 자리 = 사진처럼 어두운 면 (모드 무관 고정) */

/* 09.27 모바일 · 태블릿 배너: 글자가 선수 얼굴(사진 가운데 · 위 20%)을 가리지 않게
   사진은 위쪽에 얼굴 중심으로 두고 아래로 검게 사라지게 → 글자는 사진 아래에 (문구 길이와 무관하게 겹침 없음) */
@media (max-width: 979.98px) {
  .fbanner-box { height: auto; display: flex; flex-direction: column; }
  .fbanner-img { position: relative; top: auto; left: auto; transform: none; width: 100%; height: clamp(300px, 70vw, 520px);
    object-fit: cover; object-position: 50% 18%;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
  .fbanner-grad { display: none; }
  .fbanner-text { position: relative; top: auto; left: auto; right: auto; transform: none; margin-top: calc(-1 * var(--space-640)); padding: 0 var(--space-400) var(--space-480); }
  .fbanner-note { position: relative; top: auto; right: auto; bottom: auto; align-self: flex-end; margin: calc(-1 * var(--space-320)) var(--space-400) var(--space-200); }   /* 사진 위가 아니라 배너 맨 아래 */
}
@media (max-width: 679.98px) {
  .fbanner-img { height: clamp(260px, 80vw, 420px); }
  .fbanner-text { margin-top: calc(-1 * var(--space-480)); padding: 0 var(--space-200) var(--space-400); }
}
@media (max-width: 679.98px) { .fbanner-note { margin: calc(-1 * var(--space-240)) var(--space-200) var(--space-160); } }
/* 09.27 980~1439: 사진 위에 글자가 겹치는 폭 — 글 묶음 폭을 줄이고 사진을 오른쪽으로 더 밀어 얼굴과 떨어뜨림 */
@media (min-width: 980px) and (max-width: 1439.98px) {
  .fbanner-text { right: auto; max-width: 520px; }
  .fbanner-img { left: calc(50% + 320px); }
}

/* ===== 지원서 제출 완료 서명 모션 (09.27 · join) =====
   로고 → 필기체 「Green Egg」를 빠르게 씀 → 밑줄 휙 → 막이 위로 걷히며 접수 완료 화면
   폰트: Mayonice (Khurasan, 개인 · 상업 무료) */
@font-face { font-family: "Mayonice"; src: url("font/Mayonice.ttf") format("truetype"); font-display: block; }
.ge-sign { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: var(--background); transition: transform .55s cubic-bezier(.85,0,.15,1); }
.ge-sign.out { transform: translateY(-100%); pointer-events: none; }
.ge-sign-in { width: min(900px, 88vw); }
.ge-sign-logo { display: block; width: fit-content; margin: 0 auto var(--space-480); opacity: 0; transform: translateY(8px); }
.ge-sign-logo img { display: block; height: 48px; width: auto; }
.ge-sign.play .ge-sign-logo { animation: geSignLogo .45s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes geSignLogo { to { opacity: 1; transform: none; } }
.ge-sign-meta { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .14em; color: var(--on-surface-lowest); text-transform: uppercase; }
.ge-sign svg { display: block; width: 100%; height: auto; overflow: visible; }
.ge-sign .ch { fill: var(--on-surface-primary); fill-opacity: 0; stroke: var(--on-surface-primary); stroke-width: 1.4; stroke-dasharray: 900; stroke-dashoffset: 900; stroke-linecap: round; stroke-linejoin: round; }
.ge-sign.play .ch { animation: geSignDraw var(--d) cubic-bezier(.8,0,.2,1) forwards, geSignInk .14s ease-out forwards; animation-delay: var(--t), calc(var(--t) + var(--d) * .6); }
@keyframes geSignDraw { to { stroke-dashoffset: 0; } }
@keyframes geSignInk { to { fill-opacity: 1; stroke-width: .6; } }
.ge-sign .flourish { fill: none; stroke: var(--on-surface-primary); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ge-sign.play .flourish { animation: geSignDraw .3s cubic-bezier(.9,0,.1,1) forwards; animation-delay: var(--ft); }
.ge-sign .rule { stroke: var(--outline-input); stroke-width: 1; }
.ge-sign .x { font-family: var(--font-main); font-size: 22px; fill: var(--on-surface-lowest); }
@media (max-width: 679.98px) { .ge-sign-in { width: 82vw; } .ge-sign-logo { margin-bottom: var(--space-320); } .ge-sign-logo img { height: 36px; } }
/* 10.04 접수 완료 안내 = 「왜 필요한가요?」 띠와 같은 모양 (초록 면 · 흰 글자) */
.join-intro .apply-done { margin: 0; padding: var(--space-080) var(--space-160); background: var(--surface-primary); border: 1px solid var(--outline-highest); border-radius: var(--radius-md); color: var(--on-surface-white); font-size: var(--body-lg); line-height: 20px; font-weight: var(--weight-semibold); }
/* 10.04 입력 내용 확인 = Figma Contact List / List=10
   흰 폼 카드(48/64) 안에 단계별 카드: 제목(20 Bold Primary) + 「수정」(Primary 버튼) → 구분선 → 항목(왼쪽 라벨 Low · 오른쪽 값) */
.join-wizard .wz-review:not([hidden]) { display: flex; flex-direction: column; gap: var(--space-320); }
.join-wizard .rv-card { padding: calc(var(--space-480) - 1.5px) calc(var(--space-640) - 1.5px); }
.join-wizard .rv-body { display: flex; flex-direction: column; gap: var(--space-320); }
.join-wizard .rv-group { margin: 0; display: flex; flex-direction: column; gap: var(--space-080); padding: calc(var(--space-480) - 1.5px) calc(var(--space-320) - 1.5px); background: var(--surface); border: 1.5px solid var(--outline); border-radius: var(--radius-md); }
.join-wizard .rv-h { margin: 0; padding: 0; border: 0; gap: var(--space-080); }
.join-wizard .rv-h h4 { font-size: var(--title-sm); line-height: 1.4; font-weight: var(--weight-bold); color: var(--on-surface-primary); }
.join-wizard .rv-edit { flex: none; }
.join-wizard .rv-edit:hover { text-decoration: underline; }
.join-wizard .rv-hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--outline); }
.join-wizard .rv-group dl { gap: var(--space-080); }
.join-wizard .rv-row { gap: var(--space-160); }
.join-wizard .rv-row dt { min-width: 0; font-size: var(--body-lg); line-height: 1.4; color: var(--on-surface-low); }
.join-wizard .rv-row dd { font-size: var(--body-lg); line-height: 1.4; color: var(--on-surface); }
.join-wizard .rv-nav { margin-top: 0; }
@media (max-width: 679.98px) {
  .join-wizard .wz-review:not([hidden]) { gap: var(--space-240); }
  .join-wizard .rv-card { padding: var(--space-240) var(--space-200); }
  .join-wizard .rv-body { gap: var(--space-160); }
  .join-wizard .rv-group { padding: var(--space-240) var(--space-200); }
  .join-wizard .rv-nav .wz-edit { grid-column: 1 / -1; }
}
/* 10.04 모바일 외부 채널: 2줄로 균형 — Instagram + Transfermarkt / Email + Inscoutnetwork (아이콘 · 버튼 한 쌍씩) */
@media (max-width: 679.98px) {
  .fs-contact-links { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: var(--space-120) var(--space-160); }   /* 버튼은 내용 폭(hug) — 두 버튼은 긴 쪽에 맞춰 같은 폭 */
  .fs-contact-links > a:nth-of-type(1) { grid-area: 1 / 1; }   /* Instagram */
  .fs-contact-links > a:nth-of-type(2) { grid-area: 2 / 1; }   /* Email */
  .fs-contact-links > a:nth-of-type(3) { grid-area: 1 / 2; }   /* Transfermarkt */
  .fs-contact-links > a:nth-of-type(4) { grid-area: 2 / 2; }   /* Inscoutnetwork */
  .fs-contact-links .btn { width: 100%; }
}
.ge-sign-cap { margin: var(--space-320) 0 0; text-align: center; font-size: var(--body-lg); line-height: 1.5; color: var(--on-surface); opacity: 0; transform: translateY(6px); }
.ge-sign.play .ge-sign-cap { animation: geSignLogo .4s ease forwards; animation-delay: var(--ct); }
/* 10.04 접수 안내는 웹 · 모바일 모두 같은 두 줄 (줄마다 꺾이지 않게) */
.ge-sign-cap span, .join-intro .apply-done span { display: block; white-space: nowrap; }
@media (max-width: 679.98px) { .ge-sign-cap, .join-intro .apply-done { font-size: var(--body-md); } }