/* 공개 화면 스타일. index.html 이 <link> 로 불러온다.
   코치스에서 배운 것 하나를 그대로 가져왔다 — 화면 파일이 2000줄을 넘기면
   문서 끝에 남은 확인용 <script> 가 눈에 안 띈다. 그래서 처음부터 나눠 둔다.

   색과 글꼴은 코치스와 같다. 같은 코브의 화면이 두 가지 톤으로 보이면
   안 되고, 여기 온 사람 상당수는 코치스를 이미 봤다. */
:root{
  --bg:#FFFFFF;--soft:#F4F5F6;--panel:#FAFAFA;--ink:#0A0A0A;--ink-2:#5E6266;
  --line:#EBEDEF;--ok:#127A3E;--warn:#B45309;--err:#B42318;
  --sans:"Pretendard Variable",Pretendard,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.5}
::selection{background:var(--ink);color:#fff}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* ── 헤더 ───────────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;gap:26px;height:60px}
.brand{display:flex;align-items:center;gap:9px;flex:none;text-decoration:none;color:inherit}
/* COV 심볼. 검정 원본을 그대로 쓴다 — 예전 로고가 흰색이라 여기에
   `filter:invert(1)` 이 있었는데, 파일만 바꾸고 이 줄을 남기면 흰 바탕에
   흰 로고가 되어 통째로 사라진다.
   높이 26px. 심볼은 거의 정사각형이라(2799x3032) 글자 로고와 같은 높이로
   맞추면 훨씬 작아 보인다 — 가로폭이 절반도 안 되기 때문이다. */
.brand .mark{height:26px;width:auto;object-fit:contain;display:block}
.brand .wordmark{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--ink-2);white-space:nowrap}
/* 좁은 화면에서 이름을 지우는 기준은 360px 이다. 520px 이던 때가 있었는데,
   그러면 흔한 폰(390~430)에서 헤더가 각진 V 심볼 하나만 남는다. 이 사이트는
   링크로 전달돼서 열리는 물건이라, 처음 뜬 화면에 이름이 없으면 어디에
   들어온 건지 알 방법이 없다. 메뉴가 두 개뿐이라 자리는 남는다. */
@media(max-width:360px){.brand .wordmark{display:none}}
.gnb{display:flex;gap:20px;margin-left:auto}
.gnb a{font-size:15px;font-weight:700;color:var(--ink-2);text-decoration:none;transition:.15s}
.gnb a.on,.gnb a:hover{color:var(--ink)}

/* ── 히어로 ─────────────────────────────────────────────────────── */
.hero{padding:36px 0 10px}
.hero h1{font-size:26px;font-weight:900;letter-spacing:-.03em}
.hero .hsub{margin-top:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--ink-2);margin-bottom:8px}

/* ── 종목 탭 ─────────────────────────────────────────────────────
   버튼 이름은 서버가 준다. 여기에 '테니스' 를 적지 않는다. */
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:20px 0 0}
.tabs:empty{display:none}
.tab{font-size:13.5px;font-weight:700;padding:9px 16px;border-radius:100px;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;transition:.15s}
.tab:hover{border-color:var(--ink);color:var(--ink)}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ── 프로그램 카드 ───────────────────────────────────────────────
   사진은 코트다. 코치스의 카드 사진은 사람이었지만 여기서 팔리는 것은
   사람이 아니라 '거기서 3개월을 보낸다' 는 것이라, 얼굴 자리에 코트가 온다.
   (촬영 자산이 없는 프로그램도 있으므로 사진은 없으면 그냥 빠진다.)

   사진을 넣어도 조건(언제·어디서·얼마)은 카드 본문에 그대로 둔다 —
   목록에서 실제로 비교되는 것은 사진이 아니라 그 세 줄이고,
   그걸 상세로 밀어 넣으면 비교하려고 카드를 하나씩 열어야 한다. */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:18px 0 40px}
@media(max-width:760px){.grid{grid-template-columns:1fr}}
/* 프로그램이 한 개뿐일 때. 2열 그리드에 카드가 하나면 왼쪽 절반만 차고 오른쪽이
   통째로 빈다. 화면이 넓을수록 '아직 안 만든 자리' 처럼 읽히는데, 지금 공개하는
   프로그램은 정확히 한 개다 — 첫 방문자가 보는 화면이 늘 그 상태다.
   한 장일 때만 칸을 넓혀 빈자리를 줄인다. 가운데로 옮기지는 않는다 —
   제목과 탭이 왼쪽에 붙어 있어서 카드만 가운데로 가면 줄이 어긋나 보인다.
   두 장이 되면 이 규칙은 저절로 꺼진다.
   (.empty 는 grid-column:1/-1 로 두 칸을 다 쓰므로 여기 해당되지 않는다.) */
@media(min-width:761px){
  .grid:has(.pcard:only-child){grid-template-columns:minmax(0,640px)}
}
.pcard{cursor:pointer;text-align:left;width:100%;border:1px solid var(--line);border-radius:18px;
  background:#fff;padding:0;overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.pbody{padding:24px 24px 22px;display:flex;flex-direction:column;gap:14px}
/* 사진 칸의 높이를 aspect-ratio 로 고정한다. 이미지가 늦게 도착해도
   카드 높이가 안 변해서, 목록이 다 뜬 뒤 아래가 밀리는 일이 없다. */
.pshot{aspect-ratio:16/9;background:var(--line);overflow:hidden}
.pshot img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s}
.pcard:hover .pshot img{transform:scale(1.03)}
/* 코치 얼굴 줄 — 사진 아래쪽에 걸쳐 얹는다.
   `.pbody` 의 첫 칸이라 margin-top 음수가 padding 위로 뚫고 올라간다.
   `position:relative` 가 없으면 사진 뒤로 깔린다(배경은 앞 형제의 이미지보다 먼저 칠해진다).
   흰 테두리는 `box-shadow` 로 준다 — border 로 주면 4:5 가 테두리만큼 어긋난다.
   `height:auto` 를 빼면 위쪽 전역 `img{height:100%}` 가 aspect-ratio 를 눌러
   사진 칸만 키가 커진다(맨 위 img 규칙 참고). */
.pfaces{margin-top:-30px;position:relative;display:flex;gap:6px;padding-bottom:2px}
.pfaces.bare{margin-top:0}
.pfaces img{width:38px;height:auto;aspect-ratio:4/5;border-radius:9px;
  object-fit:cover;background:#141414;display:block;box-shadow:0 0 0 3px #fff}
.pcard:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(0,0,0,.4)}
.pcard:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pcard-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pcat{font-size:11px;font-weight:800;padding:5px 10px;border-radius:100px;background:var(--ink);color:#fff}
.pstate{font-size:11px;font-weight:800;padding:5px 10px;border-radius:100px;
  border:1px solid var(--line);color:var(--ink-2)}
.pstate.open{background:var(--ok);border-color:var(--ok);color:#fff}
.pstate.few{background:#fff;border-color:var(--warn);color:var(--warn)}
/* 미개설. 회색으로 두지 않는다 — '종료' 와 같은 색이면 같은 소식으로 읽힌다.
   이건 환급이 걸린 소식이라 눈에 걸려야 한다. */
.pstate.off{background:#fff;border-color:var(--err);color:var(--err)}
.pcard h2{font-size:19px;font-weight:900;letter-spacing:-.02em}
.pcard h2 span{display:block;margin-top:4px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.ptag{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.pfacts{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:14px}
.pfact{display:flex;gap:12px;font-size:13.5px}
.pfact b{flex:0 0 62px;font-weight:700;color:var(--ink-2)}
.pfact span{font-weight:600}
.pcard-cta{font-size:13.5px;font-weight:800;margin-top:2px}
.pcard-cta.off{color:var(--ink-2)}

/* ── 모집 현황 ──────────────────────────────────────────────────────
   목표 · 최소 개설선 · 마감. 카드에서는 compact, 상세에서는 전체를 그린다.
   같은 마크업을 공유하므로 여기 한 벌만 있다. */
.goal{display:flex;flex-direction:column;gap:10px}
.ghead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.glabel{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--ink-2)}
/* 남은 시간. 마감이 다가오는 것이 이 화면에서 유일하게 움직이는 값이라
   숫자 폭이 흔들리지 않게 tabular-nums 를 준다. */
.gleft{font-size:12px;font-weight:800;color:var(--warn);font-variant-numeric:tabular-nums}
.gnum{display:flex;align-items:baseline;gap:6px}
.gnum b{font-size:26px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.gnum span{font-size:13px;font-weight:700;color:var(--ink-2)}
.gnum em{margin-left:auto;font-style:normal;font-size:13px;font-weight:800;color:var(--ink-2);
  font-variant-numeric:tabular-nums}

/* 막대. height 를 명시하는 이유 — app.css 맨 위의 img 전역 규칙과 같은 함정이
   여기에도 있다. 안쪽 <i> 는 width 만 인라인으로 받으므로 높이는 여기서 준다. */
.gbar{position:relative;height:8px;border-radius:100px;background:var(--soft);overflow:hidden}
.gbar>i{display:block;height:100%;border-radius:100px;background:var(--ink);
  transition:width .4s ease}
/* 최소 개설선 눈금. overflow:hidden 안에 있으므로 100% 위치에서도 잘리지 않게
   translateX 로 폭의 절반을 되돌린다. */
.gbar>u{position:absolute;top:-2px;width:2px;height:12px;background:var(--warn);
  transform:translateX(-1px);text-decoration:none}

/* 한 문장 안내. 세 구간의 색이 다르다 — 아직 모자란 것과 이미 넘긴 것은
   같은 톤으로 읽히면 안 된다. */
.gsay{font-size:13px;line-height:1.6;font-weight:600;color:var(--ink-2)}
.gsay.need{color:var(--warn)}
.gsay.safe,.gsay.done{color:var(--ok)}
/* 분자가 무엇인지 못 박는 줄. 이걸 빼면 '24명 중 9명' 이 신청자 수로 읽힌다. */
.gnote{font-size:11.5px;line-height:1.6;color:var(--ink-2)}
.gnote b{font-weight:800;color:var(--ink)}

/* 카드 안의 축소판. 문장과 주석 없이 막대와 숫자만 남긴다 —
   카드는 비교하는 자리이고, 설명은 상세가 한다. */
.goal.compact{gap:7px;border-top:1px solid var(--line);padding-top:14px}
.gmeta{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gmeta b{font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
.gmeta span{font-size:12px;font-weight:700;color:var(--warn);font-variant-numeric:tabular-nums}

/* 목록이 비었을 때. 지어내지 않는다 — 없으면 없다고 쓴다. */
.empty{grid-column:1/-1;text-align:center;padding:64px 20px;border:1px dashed var(--line);border-radius:18px}
.empty-t{font-size:16px;font-weight:800}
.empty-b{margin-top:8px;font-size:14px;color:var(--ink-2);line-height:1.7}

/* ── 상세 ───────────────────────────────────────────────────────── */
.detail{padding:14px 0 40px}
/* 코트 사진. 첫 장을 크게 두고 나머지를 아래에 나란히 놓는다.
   전부 같은 크기로 늘어놓으면 셋 중 무엇을 보라는 것인지가 없어진다. */
.dshots{margin:20px 0 4px;display:flex;flex-direction:column;gap:10px}
.dshots img{width:100%;display:block;border-radius:14px;background:var(--line);object-fit:cover}
/* max-height 가 없으면 넓은 화면에서 첫 장이 600px 넘게 자라서
   일정·참가비가 전부 스크롤 아래로 밀린다. 사진은 분위기고
   사람이 실제로 확인하러 온 것은 그 조건이다. */
.dshots .lead{aspect-ratio:2/1;max-height:360px}
.dshots .rest{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dshots .rest img{aspect-ratio:2/1}
@media(max-width:560px){.dshots .rest{grid-template-columns:1fr}}
.back{font-size:14px;font-weight:700;color:var(--ink-2);padding:8px 0;margin-bottom:8px}
.back:hover{color:var(--ink)}
.dhead{padding:12px 0 24px;border-bottom:1px solid var(--line)}
.dhead h1{font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1.25}
@media(max-width:560px){.dhead h1{font-size:24px}}
.dhead .dsub{margin-top:8px;font-size:15px;font-weight:700;color:var(--ink-2)}
.dhead .dtag{margin-top:14px;font-size:15px;line-height:1.7;max-width:640px}

/* 마감 뒤의 결과. 뒤로가기 바로 아래, 제목보다 위에 둔다 —
   이미 신청한 사람이 결과를 보러 들어오는 자리라서, 프로그램 소개를
   스크롤해 내려가야 결과가 나오면 그건 결과를 알린 것이 아니다. */
.dresult{margin:8px 0 4px;padding:16px 18px;border-radius:14px;border:1.5px solid var(--line);
  display:flex;flex-direction:column;gap:6px}
.dresult b{font-size:15.5px;font-weight:900;letter-spacing:-.02em}
.dresult span{font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.dresult.confirmed{border-color:var(--ok);background:rgba(18,122,62,.05)}
.dresult.confirmed b{color:var(--ok)}
.dresult.canceled{border-color:var(--err);background:rgba(180,35,24,.05)}
.dresult.canceled b{color:var(--err)}

/* 상세의 모집 현황. 조건 표 바로 위에 상자로 세운다. */
.detail>.goal{margin:24px 0 0;padding:18px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel)}

/* 모집 · 개설 방식.
   모집 현황 바로 아래에 붙인다 — 숫자를 본 다음 문장이 그 숫자의 정체를
   설명하는 순서다. 유의사항 쪽으로 내리면 안 읽힌다. 그러면 안 적은 것과 같다.
   경고 색을 쓰지 않는다. 겁주는 고지가 아니라 운영 방식 설명이다. */
.pact{margin:16px 0 0;padding:20px;border:1.5px solid var(--ink);border-radius:16px;background:#fff}
.pact-h{font-size:16px;font-weight:900;letter-spacing:-.02em}
.pact-s{margin-top:8px;font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.pact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media(max-width:640px){.pact-grid{grid-template-columns:1fr}}
.pact-col{padding:15px 16px;border-radius:12px;background:var(--panel)}
.pact-col>b{display:block;font-size:12px;font-weight:800;letter-spacing:.02em;margin-bottom:9px}
.pact-col.cov>b{color:var(--ok)}
.pact-col.you>b{color:var(--ink)}
.pact-col ul,.pact-back ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.pact-col li,.pact-back li{position:relative;padding-left:13px;font-size:13px;line-height:1.65;
  font-weight:600;color:var(--ink-2)}
.pact-col li::before,.pact-back li::before{content:"";position:absolute;left:0;top:8px;
  width:4px;height:4px;border-radius:50%;background:var(--ink-2)}
.pact-col li b,.pact-back li b{font-weight:800;color:var(--ink)}
.pact-back{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.pact-back>b{display:block;font-size:13px;font-weight:800;margin-bottom:9px}

/* 입금 안내 안에서 같은 말을 한 번 더. 실제로 돈이 나가는 자리다. */
.pay .trust{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.pay .trust b{font-weight:800;color:var(--ink)}

/* 다음 기수 알림. 두 칸을 나란히 두되 폰에서는 접는다 —
   신청 폼의 두 칸 줄이 480px 아래에서 붙어 읽혔던 것과 같은 함정이다. */
.arow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:480px){.arow{grid-template-columns:1fr}}
.alertbox .submit{margin-top:16px}

/* 조건 표 — 언제·어디서·얼마. 상세에서 가장 먼저 읽히는 자리다. */
.dspec{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;margin:24px 0 4px}
@media(max-width:560px){.dspec{grid-template-columns:1fr}}
.dspec .row{display:flex;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line);font-size:14px}
.dspec .row:nth-child(2n){border-left:1px solid var(--line)}
@media(max-width:560px){.dspec .row:nth-child(2n){border-left:none}}
.dspec .row b{flex:0 0 74px;font-weight:700;color:var(--ink-2)}
.dspec .row span{font-weight:600}
.dspec .row em{display:block;font-style:normal;margin-top:3px;font-size:12.5px;
  font-weight:600;color:var(--ink-2)}

.sec{padding:34px 0 0}
.sec-h{font-size:18px;font-weight:900;letter-spacing:-.02em;margin-bottom:4px}
.sec-s{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:16px}

/* 개념 카드 (point) */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.points{grid-template-columns:1fr}}
.point{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.point b{display:block;font-size:14.5px;font-weight:800;margin-bottom:6px}
.point span{font-size:13.5px;color:var(--ink-2);line-height:1.65}

/* 아카데미 */
.acads{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.acads{grid-template-columns:1fr}}
.acad{border:1px solid var(--line);border-radius:14px;padding:18px}
.acad .an{font-size:15px;font-weight:900}
.acad .ax{margin-top:12px;font-size:13px;color:var(--ink-2);line-height:1.6}

/* 코치 얼굴 줄. 사진이 있는 사람은 사진, 없는 사람은 이니셜 타일이다.
   둘 다 같은 크기·같은 검은 바탕이라 한 줄에 섞여도 어긋나 보이지 않는다.

   **flex 가 아니라 3칸 그리드다.** flex 로 채우면 코치가 둘인 아카데미의 얼굴이
   셋인 아카데미보다 1.5배 커져서, 카드 세 장을 나란히 놓았을 때 얼굴 크기가
   제각각이 된다. max-width 로 눌러도 이번엔 오른쪽에 빈 자리가 남아 잘린 것처럼
   보인다. 칸을 셋으로 고정하면 어느 카드든 얼굴 크기가 같고, 둘뿐인 카드의
   빈 칸은 사고가 아니라 격자로 읽힌다. 넷 이상이면 다음 줄로 넘어간다.

   `height:auto` 를 빼면 안 된다. 위쪽 전역 규칙에 `img{height:100%}` 가 있어서,
   이 규칙이 선택자 우선순위로 이기더라도 height 를 적지 않으면 그 100% 가 그대로
   남는다. 그러면 aspect-ratio 가 무시되어 사진 타일만 키가 커지고, 이름 줄이
   아래 설명 문단을 덮는다. 이니셜 타일은 img 가 아니라서 멀쩡해 보이는 탓에
   화면만 보고는 원인을 못 찾는다. */
.acad .faces{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* `align-self:start` 를 빼면 안 된다. 역할 줄이 한 줄인 코치(‘GCM 아카데미 코치’)와
   두 줄인 코치(‘GCM 아카데미 헤드코치’)가 한 격자에 섞이는데, 그때 짧은 칸이
   세로 가운데로 내려가서 사진 윗변이 옆 칸과 어긋난다. 얼굴 셋이 계단처럼
   보이는데, 원인이 역할 글자 수라는 것은 화면만 보고는 알 수 없다. */
.acad .face{min-width:0;align-self:start}
.acad .face img,.acad .face .mono{width:100%;height:auto;aspect-ratio:4/5;border-radius:10px;
  object-fit:cover;background:#141414;display:block}
.acad .face .mono{display:grid;place-items:center;color:#fff;font-size:22px;
  font-weight:900;letter-spacing:-.02em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.acad .face b{display:block;margin-top:7px;font-size:12.5px;font-weight:700;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 역할 한 줄. 이름 밑에 작게. 없는 코치도 있어서 자리를 비워 두지 않는다 —
   비워 두면 격자에서 어떤 칸만 아래로 길어진 것처럼 보인다. */
/* `word-break:keep-all` — 없으면 '헤드코치' 가 '헤드 / 코치' 로 잘린다.
   한국어는 기본값(break-word)에서 어절 한가운데를 끊는다. */
.acad .face em{display:block;margin-top:2px;font-size:11px;font-weight:600;font-style:normal;
  text-align:center;color:var(--ink-2);line-height:1.35;word-break:keep-all}

/* 누를 수 있는 얼굴.
   button 기본 스타일을 전부 지우고 시작한다 — 브라우저 기본 배경·테두리가
   남으면 격자 안에서 이 칸만 회색 상자가 된다.
   '소개 보기' 칩은 항상 보인다. hover 에만 나오게 하면 폰에서는 영원히
   안 보이고, 이 화면은 대부분 폰에서 열린다. */
.acad button.face{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;
  font:inherit;color:inherit;text-align:inherit;cursor:pointer;display:block;width:100%}
.acad button.face img,.acad button.face .mono{transition:filter .12s,transform .12s}
.acad button.face:hover img,.acad button.face:hover .mono{filter:brightness(1.08);transform:translateY(-2px)}
.acad button.face:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:12px}
.acad .face .more{display:block;margin-top:4px;font-size:10.5px;font-weight:800;letter-spacing:.02em;
  text-align:center;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

/* 사진이 아직 없는 코치의 이름 줄. 얼굴 격자 밑에 따로 선다.
   빈 사진 칸을 만들지 않으면서 누를 것은 남기는 자리다.
   폰에서 손가락으로 눌러야 하므로 높이를 34px 밑으로 내리지 않는다. */
.cnames{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
.cname{-webkit-appearance:none;appearance:none;cursor:pointer;font:inherit;
  min-height:34px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:none;color:var(--ink);
  font-size:12.5px;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.cname:hover{background:var(--panel)}
.cname:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* 코치 카드 — 사람마다 한 장. (2026-08-31 CHOI)
   아카데미가 하나뿐인 프로그램이 쓴다. 아카데미 상자가 없으므로 위 .acad
   규칙은 안 걸린다.

   **auto-fit 이다. 고정 칸이 아니다.** 코치 수가 프로그램마다 다른데
   3칸으로 박아 두면 두 사람인 코트에서 오른쪽 한 칸이 통째로 빈다 —
   지금 고치고 있는 것이 정확히 그 증상이다. auto-fit 은 남는 트랙을
   접어서 있는 카드끼리 폭을 나눠 갖는다.

   **사진 폭은 고정(96px)이다.** 1fr 로 두면 카드가 넓어질수록 얼굴만
   커져서, 코치가 둘인 코트와 셋인 코트의 얼굴 크기가 달라진다.
   그리고 위쪽 전역 규칙에 `img{width:100%;height:100%}` 가 있으므로
   width 와 height 를 둘 다 적어야 aspect-ratio 가 산다. */
.ccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.ccards.one{grid-template-columns:minmax(0,420px)}
/* 폰에서는 한 줄에 한 장이라 카드가 화면 폭을 다 쓴다. 그때 96px 얼굴은
   카드 왼쪽 구석에 붙은 섬네일로 보인다 — 자리가 있으면 얼굴을 키운다. */
@media(max-width:560px){
  .ccards,.ccards.one{grid-template-columns:1fr}
  .ccard img{width:118px}
}
.ccard{display:flex;gap:14px;align-items:center;text-align:left;min-width:0;
  border:1px solid var(--line);border-radius:14px;padding:14px}
.ccard img{width:96px;height:auto;aspect-ratio:4/5;flex:none;border-radius:10px;
  object-fit:cover;background:#141414;display:block}
.ccard .ci{min-width:0}
.ccard .ci b{display:block;font-size:16px;font-weight:800;letter-spacing:-.01em}
/* `word-break:keep-all` — 없으면 '헤드코치' 가 '헤드 / 코치' 로 잘린다. */
.ccard .ci em{display:block;margin-top:5px;font-size:12.5px;font-weight:600;font-style:normal;
  color:var(--ink-2);line-height:1.45;word-break:keep-all}
/* '소개 보기' 는 항상 보인다. hover 에만 나오게 하면 폰에서는 영원히 안 보이고,
   이 화면은 대부분 폰에서 열린다. */
.ccard .ci .more{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:800;
  color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
button.ccard{-webkit-appearance:none;appearance:none;background:none;font:inherit;
  color:inherit;cursor:pointer;width:100%}
button.ccard img{transition:filter .12s,transform .12s}
button.ccard:hover img{filter:brightness(1.08);transform:translateY(-2px)}
button.ccard:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* 코치 소개 창. 동의 전문과 같은 창(privacyOverlay)을 쓴다. */
.coach{display:flex;gap:14px;align-items:center}
.coach .cp{width:88px;height:110px;flex:none;border-radius:12px;object-fit:cover;background:#141414;display:block}
.coach .cp.mono{display:grid;place-items:center;color:#fff;font-size:30px;font-weight:900;letter-spacing:-.02em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.coach .ch{min-width:0}
.coach h3{font-size:21px;font-weight:900;letter-spacing:-.02em}
.coach .crole{margin-top:5px;font-size:13px;font-weight:700;color:var(--ink-2);line-height:1.5}
.coach .cig{display:inline-block;margin-top:8px;font-size:12px;font-weight:800;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:2px}
/* 경력이 짧은 태그 두어 개일 때만. 긴 줄을 알약에 넣으면 알약이 두 줄로
   접히고, 그게 서너 개 서면 어디까지가 한 항목인지 눈으로 못 자른다. */
.ccar{list-style:none;margin-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.ccar li{padding:6px 11px;border-radius:999px;background:var(--panel);font-size:12px;font-weight:700;color:var(--ink)}
/* 경력이 여러 줄이고 묶음이 있을 때(선수 경력 / 코치 경력 / COV Training).
   여기서 칩을 쓰면 열두 개가 줄바꿈되며 뒤엉켜서 어느 것이 어느 묶음인지
   사라진다. 묶음이 있는 순간 칩을 버리고 목록으로 간다. */
.cgrp{margin-top:18px}
.cgrp>b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.03em;color:var(--ink-2)}
.cgrp ul{list-style:none;margin-top:8px;display:grid;gap:5px}
/* 묶음 제목이 없는 코치(받은 자료에 제목이 없었다). 제목 자리만큼 더
   벌어지면 위 요소와 남남처럼 읽힌다. */
.cgrp>ul:first-child{margin-top:0}
.cgrp li{position:relative;padding-left:11px;font-size:13.5px;font-weight:700;
  line-height:1.6;word-break:keep-all}
.cgrp li::before{content:"";position:absolute;left:0;top:.66em;width:3px;height:3px;
  border-radius:50%;background:var(--ink-2)}
.cbio{margin-top:14px;font-size:14px;line-height:1.75;font-weight:600;color:var(--ink-2)}
/* 소개 창을 닫기 전에 마지막으로 남는 문장. 코치 개인의 자랑이 아니라
   코브가 무엇을 하는 회사인지를 적는다. 이 창을 여는 이유가 그것이다. */
.cnote{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:700;line-height:1.7;color:var(--ink-2)}

/* 로테이션 표 — 이 프로그램의 핵심이라 표로 보여 준다.
   서버가 계산해서 준 것을 그대로 그린다. 같은 식을 여기서 다시 계산하지 않는다. */
/* 표가 520px 라 375px 폰에서는 '3개월 차' 열이 화면 밖에 있다. 옆으로 밀면
   보이지만, 미는 줄을 모르면 그냥 잘린 표로 읽힌다 — 실제로 오른쪽 끝에서
   '쏘요니&잭슨 아카데'까지만 보여서 깨진 화면처럼 보였다.
   3개월 로테이션이 이 프로그램의 핵심인데 3개월 차가 안 보이면 안 된다.

   그래서 오른쪽에 그림자를 깐다. `background-attachment: local, scroll` 이
   핵심이다 — 첫 레이어(흰색 덮개)는 내용을 따라 같이 밀리고 둘째 레이어
   (그림자)는 칸에 붙어 있는다. 끝까지 밀면 덮개가 그림자 자리로 와서
   저절로 사라진다. 스크롤 이벤트를 듣는 JS 가 필요 없고, 따라서 표가
   늘거나 줄어도 손댈 곳이 없다. */
.rotwrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;
  background:
    linear-gradient(to left, var(--bg) 0 30px, transparent 30px) right center / 30px 100% no-repeat,
    linear-gradient(to left, rgba(0,0,0,.13), transparent 26px) right center / 26px 100% no-repeat;
  background-attachment:local, scroll}
.rot{border-collapse:collapse;width:100%;min-width:520px;font-size:13.5px}
.rot th,.rot td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line)}
.rot tr:last-child td{border-bottom:none}
.rot th{background:var(--panel);font-weight:800;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.rot td b{font-weight:800}
.rot td small{display:block;margin-top:2px;color:var(--ink-2);font-weight:600}
.rot .gcell{font-weight:900;white-space:nowrap}
.rot .gcell em{font-style:normal;display:block;margin-top:2px;font-size:12px;
  font-weight:700;color:var(--ink-2)}

/* 유의사항 · FAQ */
.notes{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.note{padding:16px 18px;border-bottom:1px solid var(--line)}
.note:last-child{border-bottom:none}
.note b{display:block;font-size:14px;font-weight:800;margin-bottom:5px}
.note span{font-size:13.5px;color:var(--ink-2);line-height:1.7;white-space:pre-line}
.faq summary{list-style:none;cursor:pointer;font-size:14.5px;font-weight:800;
  padding:16px 18px;display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-left:auto;font-size:16px;color:var(--ink-2);font-weight:700}
.faq[open] summary::after{content:'−'}
.faq div{padding:0 18px 18px;font-size:13.5px;color:var(--ink-2);line-height:1.75;white-space:pre-line}
.faq{border-bottom:1px solid var(--line)}
.faq:last-child{border-bottom:none}

/* 상세 하단 CTA. 자리 수를 여기서 한 번 더 말한다 — 위까지 스크롤해서
   올라가 확인하게 만들면 그 왕복에서 사람이 빠진다. */
.dcta{position:sticky;bottom:0;z-index:30;margin:36px -20px 0;padding:14px 20px 20px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 26%);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dcta .seats{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.dcta .seats b{color:var(--ink);font-weight:900}
.submit{margin-left:auto;flex:0 0 auto;background:var(--ink);color:#fff;border-radius:13px;
  padding:16px 34px;font-size:15px;font-weight:800;transition:.15s}
.submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 28px -16px rgba(0,0,0,.7)}
.submit:disabled{background:var(--soft);color:var(--ink-2);cursor:not-allowed;transform:none;box-shadow:none}
@media(max-width:520px){.submit{width:100%;margin-left:0}}

/* ── 폼 (신청 · 조회) ────────────────────────────────────────────── */
.form,.lookup{max-width:640px;margin:0 auto;padding:26px 0 60px}
.form h1,.lookup h1{font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1.3}
.form .lead,.lookup .lead{margin-top:10px;font-size:14.5px;color:var(--ink-2);line-height:1.7}
.fsec{border:1px solid var(--line);border-radius:16px;padding:20px;margin-top:22px}
.fsec.opt{border-style:dashed}
.fsec-h{margin-bottom:16px}
.fsec-h b{display:block;font-size:15px;font-weight:900}
/* 직계 자식만 잡는다. `>` 를 빼면 제목 안의 `<b>…<span class="req">*</span></b>` 까지
   같이 걸려서, 필수 별표가 회색으로 작아진 채 다음 줄로 떨어진다. */
.fsec-h > span{display:block;margin-top:5px;font-size:13px;color:var(--ink-2);line-height:1.6}
.fg{margin-bottom:16px}
.fg:last-child{margin-bottom:0}
.fg label{display:block;font-size:13.5px;font-weight:800;margin-bottom:7px}
.req{color:var(--err);margin-left:3px}
.inp{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:13px 14px;
  font-size:15px;background:#fff;color:var(--ink);transition:.15s}
.inp:focus{outline:none;border-color:var(--ink)}
.inp::placeholder{color:#A6ACB2}
.inp.ta{resize:vertical;line-height:1.6}
/* 두 칸 줄은 아래 여백을 스스로 갖는다. 안쪽 `.fg` 에 맡기면 안 된다 —
   `.fg:last-child{margin-bottom:0}` 이 두 번째 칸에 걸리는데, 480px 아래에서
   한 줄로 접히면 그 칸이 맨 아래가 되면서 다음 항목 이름이 바로 붙는다.
   '성별' 버튼과 '인스타그램 아이디' 가 붙어 한 덩어리로 읽혔다.
   두 칸일 때는 첫 칸의 여백이 줄 높이를 만들어 주고 있어서 화면상 티가 나지 않는다. */
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.two .fg{margin-bottom:0}
.two:last-child{margin-bottom:0}
@media(max-width:480px){.two{grid-template-columns:1fr}}
.hint{margin-top:7px;font-size:12.5px;color:var(--ink-2);line-height:1.6}
.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt2{font-size:13.5px;font-weight:700;padding:11px 16px;border-radius:11px;
  border:1.5px solid var(--line);color:var(--ink-2);transition:.15s}
.opt2:hover{border-color:var(--ink)}
.opt2.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:800}
/* 여러 개를 고르는 줄. 하나만 고르는 줄과 눌린 모양이 같으면 사람이
   '하나만 고르는 줄' 로 읽고 하나만 고른다. 채우지 않고 테두리만 굵힌다. */
.opts.multi .opt2.on{background:#fff;color:var(--ink);border-width:2px;padding:10px 15px}
.opts.multi .opt2.on::before{content:"✓ ";font-weight:900}

/* ── 동의 ────────────────────────────────────────────────────────
   다섯 줄이 한 덩어리로 보여야 한다. 흩어 놓으면 '전부 필수' 로 읽혀서,
   선택 두 줄까지 눌러야 하는 줄 알고 마지못해 누른다. */
.agree{display:flex;gap:10px;align-items:flex-start;margin-top:14px;cursor:pointer;
  font-size:13.5px;color:var(--ink-2);line-height:1.6}
.agree input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--ink)}
.agree b{color:var(--ink);font-weight:800}
.agree em{display:block;margin-top:3px;font-style:normal;font-size:12.5px;color:var(--ink-2)}
/* 선택 항목은 한 눈에 구별돼야 한다 — 안 눌러도 되는 줄이라는 것이
   글자('(선택)')만으로는 잘 안 읽힌다. */
.agree.opt b{color:var(--ink-2)}
.agree.all{margin-top:0;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:14.5px}
.agree.all b{font-weight:900}
.agree-sec{margin-top:22px}
/* 금액은 값이라 서버에서 온다. 동의 바로 위에 둔다 — 1기 신청서의
   [최종확인] 자리다. 여기서 한 번 더 보이지 않으면 '얼마인지 몰랐다' 가 나온다. */
.agree-price{margin-bottom:16px;padding:13px 16px;border-radius:12px;
  background:var(--ink);color:#fff;font-size:14px;font-weight:800}
.plink{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* 제출이 막은 칸. 안내 문구는 제출 버튼 옆에 뜨는데 그 칸은 화면 밖일 수 있어서
   app.js 의 `fail()` 이 여기까지 데려온다 — 데려다 놓기만 하면 여러 칸 중
   어느 것인지 다시 못 찾는다. 손대는 순간 클래스가 떨어진다. */
.fg.bad .inp,.fg.bad .opt2,.fg.bad .filebtn{border-color:var(--err)}
.fg.bad > label,.agree.bad b{color:var(--err)}
.vmsg{margin-top:12px;font-size:13.5px;font-weight:700;line-height:1.6}
.vmsg.err{color:var(--err)}
.vmsg.ok{color:var(--ok)}
.form .submit,.lookup .submit{margin:22px 0 0;width:100%;text-align:center}

/* 영상 칸 — 1기에 가장 막혔던 자리라 화면에서 가장 공들인 칸이다. */
.vidbox{border:1.5px solid var(--line);border-radius:14px;padding:18px;background:var(--panel)}
.vidbox.filled{border-color:var(--ink);background:#fff}
.vidpick{display:flex;gap:8px;margin-bottom:14px}
.vidpick button{flex:1;font-size:13.5px;font-weight:700;padding:11px 8px;border-radius:10px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink-2);transition:.15s}
.vidpick button.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:800}
.filebtn{width:100%;border:1.5px dashed var(--line);border-radius:11px;padding:22px 14px;
  background:#fff;font-size:13.5px;font-weight:700;color:var(--ink-2);transition:.15s}
.filebtn:hover{border-color:var(--ink);color:var(--ink)}
.filebtn.has{border-style:solid;border-color:var(--ink);color:var(--ink)}
.bar{height:5px;border-radius:100px;background:var(--soft);overflow:hidden;margin-top:12px;display:none}
.bar.on{display:block}
.bar i{display:block;height:100%;background:var(--ink);width:0;transition:width .2s}

/* ── 접수 완료 ──────────────────────────────────────────────────── */
.done{max-width:600px;margin:0 auto;padding:60px 0 80px;text-align:center}
.done .mk{width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 22px}
.done h2{font-size:23px;font-weight:900;letter-spacing:-.02em}
.done p{margin-top:14px;font-size:14.5px;color:var(--ink-2);line-height:1.8}
.done .card{margin-top:26px;text-align:left;border:1px solid var(--line);border-radius:16px;padding:20px}
.done .card b{display:block;font-size:14px;font-weight:900;margin-bottom:8px}
.done .card p{margin-top:0;font-size:13.5px}
/* 접수 화면의 계좌 칸. 위의 `.done .card b{display:block}` 이 .kv 안의 <b>
   에도 걸려서 '계좌' 라벨이 제 줄을 차지해 버린다 — 되돌려 준다. */
.done .card.pay .kv b{display:inline;flex:0 0 74px;font-size:14px;font-weight:700;
  color:var(--ink-2);margin-bottom:0}
.done .card.pay .kv{margin-top:0}
.done .card.pay p{margin-top:14px;color:var(--ink-2);line-height:1.75}
/* 문단 안의 <b> 도 마찬가지다. 카드 제목만 block 이면 되는데 셀렉터가 카드 전체를
   잡고 있어서, 문장 중간의 <b>신청 조회</b> 가 제 줄을 차지하며 한 문장이 세 줄로
   끊겼다("진행 상황은 / 신청 조회 / 에서 이름과…"). .pay 에만 되돌려 놨던 것을
   문단 전체로 넓힌다 — 카드가 하나 더 생길 때마다 같은 줄을 또 적게 된다. */
.done .card p b{display:inline;font-size:inherit;font-weight:800;color:var(--ink);margin-bottom:0}
.done .btns{display:flex;gap:10px;margin-top:28px}
.done .btns button{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:14px;
  font-size:14px;font-weight:800;transition:.15s}
.done .btns button:hover{border-color:var(--ink)}
.done .btns button.key{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── 조회 결과 ──────────────────────────────────────────────────── */
.res{max-width:640px;margin:0 auto 60px;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.res-h{padding:22px;border-bottom:1px solid var(--line)}
.res-h .rtitle{font-size:17px;font-weight:900}
.res-h .rsub{margin-top:5px;font-size:13.5px;color:var(--ink-2)}
.chip{display:inline-block;font-size:12px;font-weight:800;padding:6px 12px;border-radius:100px;
  background:var(--soft);color:var(--ink-2);margin-bottom:12px}
.chip.ok{background:var(--ok);color:#fff}
.chip.act{background:var(--ink);color:#fff}
.res-b{padding:22px}
.res-b + .res-b{border-top:1px solid var(--line)}
.res-b h3{font-size:14px;font-weight:900;margin-bottom:12px}
.kv{display:flex;gap:14px;font-size:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:none}
.kv b{flex:0 0 84px;font-weight:700;color:var(--ink-2)}
.kv span{font-weight:700;word-break:break-all}
.kv span.big{font-size:17px;font-weight:900}
.copy{margin-left:auto;flex:0 0 auto;font-size:11.5px;font-weight:800;padding:5px 10px;
  border-radius:8px;border:1.5px solid var(--line);color:var(--ink-2);transition:.15s}
.copy:hover{border-color:var(--ink);color:var(--ink)}
.paynote{margin-top:14px;font-size:13px;color:var(--ink-2);line-height:1.75;white-space:pre-line}
.steps{display:flex;gap:0;margin-bottom:6px}
.step{flex:1;text-align:center;padding:12px 4px;border:1px solid var(--line);border-right:none;
  font-size:12px;font-weight:700;color:var(--ink-2);background:var(--panel)}
.step:first-child{border-radius:11px 0 0 11px}
.step:last-child{border-right:1px solid var(--line);border-radius:0 11px 11px 0}
.step.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:800}
.step small{display:block;font-size:10px;font-weight:700;opacity:.72;margin-bottom:2px}

/* ── 푸터 ───────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:26px 0 44px;margin-top:20px}
.fmeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.fbrand{display:flex;align-items:center;gap:5px;font-weight:700}
.fbrand img{height:15px;width:auto;object-fit:contain}
.sep{width:1px;height:11px;background:var(--line)}
/* 구분선은 한 줄로 들어갈 때만 구분선이다. 폰에서는 바닥글이 세 줄로 접히면서
   구분선이 줄 맨 앞으로 밀려나 '| 개인정보처리방침' 처럼 읽혔다 — 무엇과 무엇을
   나누는지 알 수 없는 막대가 문장 앞에 하나 붙어 있는 꼴이다.
   접히는 폭에서는 지우고 줄바꿈이 대신 나누게 둔다. */
@media (max-width:560px){ .fmeta .sep{display:none} .fmeta{gap:8px 0} }
.fcontact{font-weight:600}
.flink{color:var(--ink-2);text-decoration:none;font-weight:700}
.flink:hover{color:var(--ink)}

/* ── 오버레이 (개인정보처리방침) ─────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.5);
  display:none;align-items:flex-end;justify-content:center}
.overlay.open{display:flex}
@media(min-width:640px){.overlay{align-items:center}}
.sheet{background:#fff;width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
  border-radius:20px 20px 0 0}
@media(min-width:640px){.sheet{border-radius:20px}}
.sheet-body{padding:26px 24px 8px;position:relative}
.close{position:absolute;top:16px;right:18px;font-size:24px;line-height:1;color:var(--ink-2)}
.privacy-doc h4{font-size:13.5px;font-weight:900;margin:18px 0 7px}
.privacy-doc ul{padding-left:17px}
.privacy-doc li{font-size:13px;color:var(--ink-2);line-height:1.75;margin-bottom:3px}
.cta{padding:16px 24px 24px}
.btn-ghost{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:14px;
  font-size:14px;font-weight:800}
.btn-ghost:hover{border-color:var(--ink)}