/* ═══ RUNIN.KR 런닝크루 목록 /crew/ · 상세 /crew/{slug}/ — World Marathon Majors 디자인(공용 wm- · 지면 고유 wmcr-) · 2026-10-06 · 클로드A ═══
   규칙 한 장 : https://idc.kr/_claude/CODE_RULES.txt
   설계서 : D:\작업중\2026년\10월\런닝인사이드\런닝크루WMM시안\ref\crew_설계서.md (값의 출처 = 6-1 값표 · 3장 목록 · 4장 상세 — 새 숫자 0)
   디자인 규칙 : 홈WMM시안\live\RUNIN_WMM_DESIGN.txt v3.5 — 🔴 설계서(v3.4 때 씀)의 «2px #000 · 보조 단추 2px #000 · 아이콘 #000» 은
      v3.5(10-06 사장님 「넘 검정색이야」)대로 «남색 #000075» 로 지었다. 검정(#000)은 «글자»에만. 1px 구분 줄은 연회색 #d6dce2 그대로.
   짝 PHP : wmm-crew.php (출력 버퍼에서 뼈대를 새로 짠다 — 옛 CSS(app.css·utmb.css·tokens.css·A 덧칠)는 이 지면에서 전부 걷힌다)
   🔴 이 파일은 홈 wmm.css «뒤에» 실린다(같은 부품·같은 값). 홈 부품(.wm-sec .wm-chip .wm-btn .wm-st .wm-eb …)은 다시 정의하지 않고,
      이 지면 전용(wmcr-)과 «옛 마크업이 기대던 기능 규칙»만 둔다. 선택자는 전부 body.wmcr-p 또는 .wmcr(main) 아래 — 홈·대회일정·/teams/ 와 섞이지 않게.
   1.0.1(10-06 검토) : 8-b 선수 인터뷰 구역 머리 크기만 더함(나머지 값 0 변경).
   🔴 이 파일에 «거르개 폼 옛 이름»·«기록 지면 옛 이름»·«의견 칸 이름» 글자를 쓰지 않는다(주석 포함 · 설계 2-0·7-4) —
      INLINE 비상구로 HTML 에 박히면 외국어 «상세» 제목 판정(i18n-core)이 바뀌고, 「의견 칸 안 무손질」 검사가 흐려진다. 거르개 폼은 .wmcr-form 으로 잡는다.
   🔴 글자는 완전 검정(--wm-ink #000). 회색 글자 금지. 남색은 개수·순번·링크 hover·면·2px 선·아이콘. 빨강(--wm-hot)은 이 지면에 0(크루엔 «서둘러라»가 없다 · 머리 NEW 는 공용).
   🔴 장식 가로줄 금지 — 줄은 «목록·표 머리 2px 남색 + 줄마다 1px #d6dce2» 뿐. 패널 상자 테두리·이어 보기 위 2px·지도 1px·인터뷰 카드 1px 은 걷는다.
   🔴 사진 막·그라데이션·hover 확대 0 · 사진 위 글자 0(대표 사진은 글 칸 «옆», 폰은 «아래»).
   🔴 :has() 는 쓰지 않는다 — 고름은 서버 is-on·aria-current, 빈 표는 서버 wmcr-dl--none.
   🔴 font 축약 금지(글꼴 자리 inherit 이면 선언 통째 버림 · 2026-09-24) · 단축 속성은 앞의 낱개를 덮는다(낱개는 단축 «뒤»에).
   🔵 되돌리기 : wmm-crew/ENABLED → ENABLED.off (이 파일은 그대로 둬도 아무 지면에도 안 걸린다 — body.wmcr-p 가 없으면 0) */

/* ═══ 0. 기능 규칙 — 옛 CSS 를 걷으면서 «빠지면 오류 없이 깨지는» 것 (설계 9-3 ⓪ · 대회 상세·뉴스 0장과 같은 값) ═══ */
/* 화면낭독기 전용 글 — 빠지면 「 (새 창)」·「메뉴 열기」 같은 숨은 글이 화면에 다 보인다 (= .wm-sr · wmm.css:43) */
body.wmcr-p .ri-sr, body.wmcr-p .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; }
/* 아이콘(sprite <use>) — 크기를 안 주면 svg 기본 300×150 으로 줄이 터진다(크루 목록 1쪽 = 줄 24 × 아이콘 4~5) */
body.wmcr-p svg.ri-i { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
/* hidden 짝 — 옛 app.css 가 맡던 것. 공감 줄(ri-a-rc__sum · __pick)·공감 줄 자리·알림 모달·숨은 ch select 가 hidden 을 쓴다.
   없으면 .ri-a-rc__sum{display:flex}(ri-a-social-css)가 hidden 을 이겨 빈 «얼굴+0» 줄이 늘 보인다(뉴스 0장) */
body.wmcr-p [hidden] { display: none !important; }
/* 알림 모달(app.js 가 is-open·hidden 을 함께 바꾼다) — 막 색 = .wm-dlg::backdrop 값 · /find/ 13장과 같은 값 */
body.wmcr-p .ri-modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,30,.6); }
body.wmcr-p .ri-modal.is-open { display: flex; }
body.ri-locked { overflow: hidden; }
body.wmcr-p .ri-modal__panel { max-height: 90vh; overflow-y: auto; }
body.wmcr-p .ri-modal__head h2 { padding-right: 3.5rem; font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; text-transform: uppercase; }   /* = .wm-hs */
body.wmcr-p .ri-modal .wm-dlg__x { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--wm-navy); }
body.wmcr-p .ri-modal .wm-dlg__x svg { width: 1.25rem; height: 1.25rem; }
body.wmcr-p .ri-modal__note { margin-top: .75rem; font-size: .9375rem; }
body.wmcr-p .ri-modal .ri-mailform { margin-top: 1.25rem; }
body.wmcr-p .ri-modal .ri-mailform__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: end; }
body.wmcr-p .ri-modal .ri-field label span { font-weight: 500; }

/* ═══ 1. 머리 — 메뉴 「런닝크루」 «지금 여기»(목록 aria-current="page" · 상세 "true") + 메뉴 줄 붙어 다니기(find §11 · 대회 상세 1장과 같은 값) ═══
   🔴 홈 .wm-nav{position:sticky} 는 header.wm-head 상자 «안»에 갇혀 헤더가 지나가면 같이 사라진다(find 검토 실측 : 6,000px 내리면 메뉴 top −5,871).
   → ≥1024 에서 헤더 «통째»를 붙이고 로고 줄 높이(4.5625rem = wmm.css .wm-brand__in)만큼 위로 빼서 메뉴 줄만 남긴다. 그래야 거르개 칸·오른쪽 칸 top 7.5rem 이 «메뉴 줄 아래»에 선다 */
body.wmcr-p .wm-nav li a[aria-current] { font-weight: 800; }
body.wmcr-p .wm-nav li a[aria-current]::after { transform: none; }
body.wmcr-p .wm-dlg--nav a[aria-current] { color: var(--wm-navy); }
@media (min-width: 1024px) {
  body.wmcr-p .wm-head { position: sticky; top: -4.5625rem; z-index: 50; }
  body.wmcr-p.admin-bar .wm-head { top: calc(32px - 4.5625rem); }                         /* 로그인 화면 — 관리 막대(32px) 아래에 메뉴 줄 */
}

/* ═══ 2. 목록 «찾기» 구역 (설계 3-1 · 3-3 — 규칙 ⑨ /find/ 본보기) ═══ */
.wmcr .wmcr-sec { padding-top: 2.5rem; }                                                   /* 메뉴 바로 밑 지면 첫 구역 = find .wm-fd-sec */
.wmcr .wmcr-hd { align-items: flex-end; }
.wmcr .wmcr-h1 { margin: 0; }                                                               /* 글자 꼴 = .wm-hs(1.6875rem/1.22 900 기울임) */
/* 개수 「147개」 = find .wm-fd-cnt 값 — 2rem 900 기울임 남색(규칙 «숫자 남색») */
.wmcr .wmcr-cnt { font-size: 2rem; line-height: 1; font-weight: 900; font-style: italic; color: var(--wm-navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 몸 = [왼쪽 30% 거르개 칸 | 오른쪽 목록] (≥992) · 그 아래는 위로 쌓임 — find 11장 · WMM §9-2 */
.wmcr .wmcr-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.wmcr .wmcr-main { min-width: 0; }

/* ═══ 3. 거르개 칸 aside.wmcr-filt (설계 3-2) — 폼은 원래 속성 그대로, 모양만 wm ═══ */
.wmcr .wmcr-filt { background: var(--wm-page); padding: 1rem 1rem 2rem; min-width: 0; }   /* 규칙 1 «연한 바탕(카드·폼 구역)» · WMM §5 안쪽 */
.wmcr .wmcr-form { margin: 0; }
.wmcr .wmcr-f { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }        /* 고르기 칸 한 줄에 하나 · 사이 = .wm-chips 세로 간격 */
.wmcr .wmcr-f .ri-field { min-width: 0; }
.wmcr .wmcr-f label { display: block; margin-bottom: .5rem; font-size: .875rem; line-height: 1.2; font-weight: 900; font-style: italic; text-transform: uppercase; }   /* = .wm-filt__l */
/* select = 규칙 1 입력칸(find select 값) — 테두리 .125rem #767676(흰 바탕 4.54:1) · 모서리 0 · 초점 남색 테두리 + 2px 남색 겹 */
.wmcr .wmcr-f select {
  width: 100%; min-height: 3.25rem; padding: .75rem 1rem; border: .125rem solid var(--wm-field); border-radius: 0; background: #fff;
  font-family: inherit; font-size: 1rem; line-height: 1.25; font-weight: 500; color: var(--wm-ink);
}
.wmcr .wmcr-f select:focus { outline: none; border-color: var(--wm-navy); box-shadow: 0 0 0 2px var(--wm-navy); }
/* 채널 칩 6 — 홈 .wm-chip 값(비스듬 회색 · 고르면 남색 + 흰 글자) · 글자 .9375rem 800 기울임(find 코스 칩)
   아이콘 = «로고 색»(사장님 08-25 「밴드·카페·다음카페·당근 각각 로고 버튼으로」 · 값 = B utmb.css:5030-5034 그대로) · 고른 칩 안에서는 흰색 */
.wmcr .wmcr-ch { margin-top: 2rem; }
.wmcr .wmcr-ch .wm-chip { color: var(--wm-ink); }
.wmcr .wmcr-ch .wm-chip.is-on { color: #fff; }
.wmcr .wmcr-ch svg.ri-i { width: 1.0625rem; height: 1.0625rem; }                            /* = 옛 17px */
.wmcr .crew-ch__b--insta svg.ri-i { color: #C13584; }
.wmcr .crew-ch__b--band svg.ri-i { color: #1EC800; }
.wmcr .crew-ch__b--ncafe svg.ri-i { color: #03C75A; }
.wmcr .crew-ch__b--dcafe svg.ri-i { color: #326EDC; }
.wmcr .crew-ch__b--daangn svg.ri-i { color: #FF6F0F; }
.wmcr .wmcr-ch .wm-chip.is-on svg.ri-i { color: #fff; }                                     /* 옛 utmb.css:5037 과 같은 판단 */
/* 단추 줄 = .wm-btns 꼴(사이 1rem 1.5rem) · 위 2rem · 적용 = 주 단추 · 조건 지우기 = 보조 단추(v3.5 남색 테두리 — wmm.css ④) */
.wmcr .wmcr-ft { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }

/* ═══ 4. 크루 줄 ul.wmcr-list > li.wmcr-r (설계 3-5) — 줄 자체는 링크가 아니다(이름 링크 + 바깥 채널 링크가 따로) ═══
   격자 칸 이름 : n 이름 · st 활동 배지 · i 정보(지역·요일·장소·비용) · ch 채널 링크 · la 최근 활동 — grid-template-areas 라 DOM 차례와 상관없고 없는 칸은 그 자리만 빈다 */
.wmcr .wmcr-list { border-top: 2px solid var(--wm-navy); }                                  /* 규칙 3 «목록 머리 줄» — v3.5 남색(= wmm.css ⑤ .wm-list) */
.wmcr .wmcr-r {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n st" "i i" "ch ch" "la la";
  gap: .3rem 2rem; align-items: center; padding: .7rem .25rem; border-bottom: 1px solid var(--wm-line); transition: background-color .2s ease;
}
.wmcr .wmcr-r:hover { background: var(--wm-page); }
/* 이름 = .wm-row__t 값 · hover 남색 .2s · 밑줄 없음. 깃발 아이콘(24번 반복되는 장식)은 지우지 않고 숨긴다 */
.wmcr .wmcr-r > h2 { grid-area: n; min-width: 0; margin: 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 800; overflow-wrap: anywhere; }
.wmcr .wmcr-r > h2 > svg.ri-i { display: none; }
.wmcr .wmcr-r > h2 a { color: var(--wm-ink); transition: color .2s ease; }
.wmcr .wmcr-r > h2 a:hover, .wmcr .wmcr-r > h2 a:focus-visible { color: var(--wm-navy); }
/* 활동 배지 (설계 3-5 표 · 16장 D2 — 규칙 3장 배지 꼴 중 뜻이 가까운 것 · 빨강 0 · 영문 낱말 0)
   바탕값 = 연회색 칩(«활동 확인 안 됨»·모르는 값 = 접수마감 꼴) — 서버가 낯선 상태 이름을 보내도 «이번 주 활동»처럼 보이지 않게 */
.wmcr .wmcr-fl { grid-area: st; justify-self: end; align-self: start; background: var(--wm-chip); color: var(--wm-ink); }
.wmcr .wmcr-fl--live { background: var(--wm-navy); color: #fff; }                            /* 이번 주 활동 = 접수중 꼴(남색 + 흰 글자 · 대비 15.4) */
.wmcr .wmcr-fl--quiet { background: transparent; color: var(--wm-ink); box-shadow: inset 0 0 0 2px var(--wm-navy); }   /* 한 달 이상 조용 = 접수예정 꼴(2px 남색 테두리 · v3.5) */
.wmcr .wmcr-fl--unknown { background: var(--wm-chip); color: var(--wm-ink); }               /* 활동 확인 안 됨 = 접수마감 꼴(find .wm-st--closed) */
/* 정보 줄 = .wm-pc__s 값(.875rem/1.5 500) · 칸 사이 .25rem 1rem · 아이콘 남색(v3.5 «아이콘은 남색») · 지역만 800(정렬 기준이 지역이라 · 사장님 08-25 「서울부터」)
   🔵 칸마다 min-width 0 + anywhere — 「한강·양재천·잠수교·반포종합운동장」 같은 띄어쓰기 없는 긴 장소가 폰 390 에서 가로로 넘치지 않게 */
.wmcr .wmcr-r__i { grid-area: i; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; font-size: .875rem; line-height: 1.5; font-weight: 500; min-width: 0; }
.wmcr .wmcr-r__i > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.wmcr .wmcr-r__i svg.ri-i { margin-right: .4rem; color: var(--wm-navy); }                  /* 사이 .4rem = .wm-chip__t */
.wmcr .wmcr-k--pin { font-weight: 800; }
/* 채널 링크 = .875rem 700 검정 · hover 밑줄(offset 3px · B 값) · 아이콘 «로고 색»(utmb.css:4966·5041-5044 값 그대로) */
.wmcr .wmcr-r__c { grid-area: ch; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; min-width: 0; }
.wmcr .wmcr-r__c a { min-width: 0; max-width: 100%; font-size: .875rem; line-height: 1.5; font-weight: 700; color: var(--wm-ink); overflow-wrap: anywhere; }
.wmcr .wmcr-r__c a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wmcr .wmcr-r__c svg.ri-i { margin-right: .4rem; color: var(--wm-navy); }
.wmcr .wmcr-r__c .is-insta svg.ri-i { color: #C13584; }
.wmcr .wmcr-r__c .is-band svg.ri-i { color: #1EC800; }
.wmcr .wmcr-r__c .is-ncafe svg.ri-i { color: #03C75A; }
.wmcr .wmcr-r__c .is-dcafe svg.ri-i { color: #326EDC; }
.wmcr .wmcr-r__c .is-daangn svg.ri-i { color: #FF6F0F; }
/* 최근 활동 = .wm-row__s 크기 .8125rem 600 검정(옛 인라인 .78rem 은 서버가 class 로 바꿨다) */
.wmcr .wmcr-r__la { grid-area: la; margin: 0; font-size: .8125rem; line-height: 1.5; font-weight: 600; }
/* 인터뷰 카드 자리 — 카드가 없으면(C 가 끔) 숨김 */
.wmcr .wmcr-ric:empty { display: none; }

/* ═══ 5. 쪽 넘기기 nav.wmcr-pager (설계 3-6) — .wm-chip 값 · 비스듬 바탕은 ::before(속 span 이 없어 글자를 바로 세울 수 없다 — 뉴스 .wmn-chip 수법) ═══ */
.wmcr .wmcr-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin-top: 2rem; padding-left: .4rem; }
.wmcr .wmcr-pager .page-numbers {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; min-width: 2.75rem; padding: 0 1.1rem; color: var(--wm-ink);
  font-size: .9375rem; line-height: 1; font-weight: 800; font-style: italic; font-variant-numeric: tabular-nums;
}
.wmcr .wmcr-pager .page-numbers::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wm-chip); transform: skew(-16deg); transition: background-color .2s ease; }
.wmcr .wmcr-pager a.page-numbers:hover::before { background: var(--wm-nav2); }
.wmcr .wmcr-pager .page-numbers.current { color: #fff; }
.wmcr .wmcr-pager .page-numbers.current::before { background: var(--wm-navy); }
.wmcr .wmcr-pager .page-numbers.dots::before { background: none; }

/* ═══ 6. 빈 결과 · 등록 안내 (설계 3-7 — 오늘 라이브 0 · 로컬 흉내로 시험) ═══ */
.wmcr .wmcr-empty { padding: 2rem; background: var(--wm-page); font-weight: 500; }
.wmcr .wmcr-empty .wm-hs { margin: 0 0 .75rem; }
.wmcr .wmcr-empty p { margin: 0; font-size: 1rem; line-height: 1.6; }
/* 크루 0곳 — parts/register-cta.php 원문 + 이름 하나. 라벨칩 = .wm-eb 꼴(비스듬은 ::before) · h2 = .wm-h2 · 「적어 주세요」 표 = 4-4 표 꼴 · 오른쪽 상자 #f7f9fa · 메일 단추 = 주 단추 */
.wmcr .wmcr-reg .u-sec__kicker { position: relative; isolation: isolate; display: inline-block; margin: 0 0 2rem .4rem; padding: .5rem 1rem; font-size: .875rem; line-height: 1; font-weight: 700; text-transform: uppercase; }
.wmcr .wmcr-reg .u-sec__kicker::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wm-chip); transform: skew(-16deg); }
.wmcr .wmcr-reg .u-sec__title { margin: 0; font-size: 3rem; line-height: 1.05; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: uppercase; }
.wmcr .wmcr-reg .u-reg__lead { margin: 1.25rem 0 0; font-size: 1rem; line-height: 1.6; font-weight: 500; max-width: 60ch; }
.wmcr .wmcr-reg .u-reg__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2rem; }
.wmcr .wmcr-reg .u-reg__h3 { margin: 0 0 1rem; font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; }
.wmcr .wmcr-reg .u-reg__need { margin: 0; border-top: 2px solid var(--wm-navy); }
.wmcr .wmcr-reg .u-reg__need > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); border-bottom: 1px solid var(--wm-line); }
.wmcr .wmcr-reg .u-reg__need dt { margin: 0; padding: .85rem .75rem; font-size: .8125rem; font-weight: 800; font-style: italic; }
.wmcr .wmcr-reg .u-reg__need dd { margin: 0; padding: .85rem .75rem; font-size: 1rem; line-height: 1.5; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.wmcr .wmcr-reg .u-reg__side { padding: 2rem; background: var(--wm-page); }
.wmcr .wmcr-reg .u-reg__side p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; }
.wmcr .wmcr-reg .u-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 2rem; background: var(--wm-navy); color: #fff; border: .125rem solid var(--wm-navy-bd); font-size: 1rem; line-height: 1; font-weight: 800; font-style: italic; transition: transform .2s ease; }
.wmcr .wmcr-reg .u-cta:hover { transform: translateY(-.2rem); }
.wmcr .wmcr-reg .u-panel__src { font-size: .8125rem; line-height: 1.6; font-weight: 500; color: var(--wm-ink); }
@media (min-width: 992px) { .wmcr .wmcr-reg .u-reg__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; } }

/* ═══ 7. 러너 인터뷰 카드 #ric-sec 덮기 (설계 3-4 · C 의 위젯 — 글·사진·링크·마크업은 안 건드리고 «자리와 모양»만) ═══
   🔴 ric-css(C)는 body 안(우리 CSS «뒤»)에 실린다 → «특이도»로 이긴다 : body.wmcr-p #ric-sec a.ric-card .x (1,3,2~) > #ric-sec a.ric-card .x (1,2,1).
   🔵 C 가 카드 이름·마크업을 바꾸면 이 덮기가 어긋날 수 있다 — 깨지진 않고 «C 의 옛 모양»으로 보일 뿐(판 17장에 알림). 되돌리기 = 이 덩어리 삭제 */
body.wmcr-p #ric-sec { max-width: none; margin: 0 0 2rem; padding: 0; }
/* 「러너 인터뷰 ③」 = 라벨칩 .wm-eb 꼴(.875rem 700 대문자 · #f3f3f3 · 비스듬은 ::before — 마크업에 속 span 이 없어서) · 달리는 사람 아이콘 남색 */
body.wmcr-p #ric-sec .ric-lead { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 1rem .4rem; padding: .5rem 1rem; color: #000; font-size: .875rem; line-height: 1; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
body.wmcr-p #ric-sec .ric-lead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wm-chip); transform: skew(-16deg); }
body.wmcr-p #ric-sec .ric-lead svg { width: 1em; height: 1em; fill: var(--wm-navy); }
/* 카드 = .wm-pc 값(바탕 #f7f9fa · 테두리 0 · hover #ebf2f5 .2s) · 격자 300px 1fr 는 C 값 그대로 */
body.wmcr-p #ric-sec a.ric-card { min-height: 0; background: var(--wm-page); border: 0; color: #000; transition: background-color .2s ease; }
body.wmcr-p #ric-sec a.ric-card:hover { background: var(--wm-nav2); }
body.wmcr-p #ric-sec a.ric-card .ph { background: var(--wm-grey); background-image: none; border: 0; }          /* 사선 무늬·오른쪽 1px 줄 걷음(720↓ 아래 1px 줄도) */
body.wmcr-p #ric-sec a.ric-card:hover img { transform: none; }                                                  /* 사진 확대 hover 없음(규칙 5장) */
body.wmcr-p #ric-sec a.ric-card .lb { color: #000; font-size: .875rem; font-weight: 700; }
body.wmcr-p #ric-sec a.ric-card h3 { color: #000; font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; letter-spacing: -.01em; transition: color .2s ease; }   /* = .wm-hs */
body.wmcr-p #ric-sec a.ric-card:hover h3 { color: var(--wm-navy); }
body.wmcr-p #ric-sec a.ric-card p { color: #000; font-size: 1rem; line-height: 1.6; font-weight: 500; }
/* 「인터뷰 전문 읽기 →」 = 주 단추 꼴 · 대회 이름 = 보조 단추 꼴(v3.5 2px 남색) · 카드 hover 때 주 단추 .2rem 들림 */
body.wmcr-p #ric-sec a.ric-card .go { padding: 1rem 2rem; font-size: 1rem; line-height: 1; font-weight: 800; font-style: italic; letter-spacing: 0; transition: transform .2s ease; }
body.wmcr-p #ric-sec a.ric-card .go1 { background: var(--wm-navy); color: #fff; border: .125rem solid var(--wm-navy-bd); }
body.wmcr-p #ric-sec a.ric-card:hover .go1 { background: var(--wm-navy); transform: translateY(-.2rem); }
body.wmcr-p #ric-sec a.ric-card .go2 { background: transparent; color: var(--wm-navy); border: .125rem solid var(--wm-navy); }
body.wmcr-p #ric-sec .ric-prev { margin: .75rem 0 0; color: #000; font-size: .875rem; line-height: 1.6; font-weight: 500; }
body.wmcr-p #ric-sec .ric-prev a { color: #000; font-weight: 800; border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }

/* ═══ 8. 인스타그램 구역 section.wmcr-ig (설계 3-8) — 머리 = .wm-sec__hd--col + 라벨칩 + .wm-h2 · 격자는 A runin-a-ig-css 값 그대로 ═══ */
.wmcr .wmcr-ig__t { margin: 0; }
/* 권리 안내 #6b7280 12px → #000 .8125rem 500(회색 글자 금지) */
body.wmcr-p .runin-ig-note { margin-top: 1rem; color: #000; font-size: .8125rem; line-height: 1.5; font-weight: 500; }
/* 임베드 넘침 막기 — A design.php:180-181 값(그 CSS 를 걷으므로 옮긴다). 안 옮기면 인스타 iframe 의 min-width 326px 이 폰·좁은 칸에서 가로로 넘친다 */
body.wmcr-p iframe.instagram-media { max-width: 100% !important; min-width: 0 !important; width: 100% !important; }

/* ═══ 8-b. 선수 인터뷰 구역 section.wmcr-iv (1.0.1 · 10-06 검토 #4) — 옛 지면의 «떠 있는 배너» aside#ri-a-iv 를 홈 함수 runin_wm_iv() 로 «구역»으로 ═══
   카드·사진·띠는 홈 wmm.css .wm-iv 그대로(라이브 홈·뉴스와 같은 꼴 — 바탕 #ebf2f5 · 사진 위 글은 남색·흰 «단색 띠»뿐 · 막 0 · 출처 글 유지).
   머리만 뉴스(wmm-news.css .wmn-iv)와 같은 사다리로 줄인다 — 홈 .wm-h2(3rem)이면 상세 h1(3rem)과 크기가 같아진다(뉴스 검토 design #4).
   2rem → 479↓ 7vw(= 홈 .wm-h3 값 · 16장 479 블록). 되돌리기 = 이 줄 + 16장 479 의 .wmcr-iv 한 줄 삭제(홈 꼴 3rem 으로) */
.wmcr .wmcr-iv .wm-h2 { font-size: 2rem; line-height: 1.2; }

/* ═══ 9. 맨 밑 section.wmcr-end (규칙 ⑨ · 사장님 10-05 「맨 밑으로」 — find .wm-fd-hd · .wm-fd-crumb · .wm-fd-lead 값) ═══ */
.wmcr .wmcr-crumb { margin: 0 0 2rem; font-size: .875rem; line-height: 1.6; font-weight: 700; }
.wmcr .wmcr-crumb a { text-decoration: underline; text-underline-offset: 3px; }
.wmcr .wmcr-crumb a:hover { color: var(--wm-navy); }
.wmcr .wmcr-lead { margin: 0; max-width: 55ch; font-size: 1rem; line-height: 1.625; font-weight: 500; }
.wmcr .wmcr-lead b { font-weight: 800; color: var(--wm-ink); }                               /* 「무료」 — 빨강 금지(규칙 3장) */
.wmcr .wmcr-end > :last-child { margin-bottom: 0; }

/* ═══ 10. 상세 머리 section.wmcr-hero (설계 4-1 — 대회 상세 2-4 꼴 · 홈 .wm-split 1fr 1fr) ═══
   🔴 사진 위 글 0 · 막 0 · 그라데이션 0 · hover 확대 0. 대표 사진은 글 칸 «옆»(폰 «아래») — 원래 img(852×480 · srcset · fetchpriority) 그대로.
   🔵 글 칸 왼쪽 안쪽 0 — .wm-split 의 3rem 을 그대로 두면 h1 이 아래 본문·오른쪽 칸보다 48px 들어가 왼쪽 선이 어긋난다(대회 상세 10-06 검토와 같은 판단) */
.wmcr .wmcr-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin: 0 var(--wm-gx); padding-top: 1.875rem; }
.wmcr .wmcr-hero__c { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; align-self: stretch; min-width: 0; padding: 3rem 4rem 3rem 0; }
/* 사진 없는 크루 — WMM /races 머리 꼴 : 글 칸 하나 · 최대 64rem · 위 5rem 아래 2.5rem(find .wm-fd-hd · 대회 상세 nopic 과 같은 출처) */
.wmcr .wmcr-hero--nopic { display: block; padding: 5rem 0 2.5rem; }
.wmcr .wmcr-hero--nopic .wmcr-hero__c { max-width: 64rem; padding: 0; }
.wmcr .wmcr-hero__st { margin: 0 0 1rem; }
/* h1 = .wm-h2 크기 3rem/1.05(991↓ 2.5rem · 479↓ 8vw) 900 기울임 검정.
   🔴 text-transform:none — 크루 이름은 고유명사(「JSRC (Jamsil Running Club)」을 대문자로 바꾸지 않는다) */
.wmcr .wmcr-hero .wmcr-h1 { margin: 0; color: var(--wm-ink); font-size: 3rem; line-height: 1.05; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: none; overflow-wrap: anywhere; }
.wmcr .wmcr-hero__sub { margin: 1rem 0 0; font-size: 1.125rem; line-height: 1.35; font-weight: 600; }   /* = .wm-hero__p 값 · 바탕 띠 없음(사진 위가 아니다) */
/* 사진 칸 — 852:480(img 의 width·height 속성 · B 가 이 비율로 자른 판) · 최대 852px(늘리지 않음 = 흐려지지 않게) · 빈칸 바탕 #f0f0f3 */
.wmcr .wmcr-hero__img { min-width: 0; max-width: 852px; margin: 0; aspect-ratio: 852 / 480; overflow: hidden; background: var(--wm-grey); }
.wmcr .wmcr-hero__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ═══ 11. 상세 본문 격자 div.wmcr-one (설계 4-2) — [본문 칸 | 오른쪽 30% 붙는 칸] · 폰은 활동 표 바로 뒤에 오른쪽 칸 ═══ */
.wmcr .wmcr-one { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; padding: 4rem var(--wm-gx) 0; }
.wmcr .wmcr-one__main { display: flex; flex-direction: column; gap: 3rem; min-width: 0; }     /* 패널 사이 3rem(폰도 — 규칙 4 폰 구역 간격) */
/* 오른쪽 칸 = 대회 상세 2-7 값 : 바탕 #f7f9fa · 안쪽 1.5rem 1rem 2rem(폰) → 2rem 1rem 4rem(≥992) · sticky 7.5rem · 칸 안 스크롤 */
.wmcr .wmcr-side { min-width: 0; padding: 1.5rem 1rem 2rem; background: var(--wm-page); }
@media (min-width: 992px) {
  .wmcr .wmcr-one { grid-template-columns: minmax(0, 1fr) 30%; column-gap: 3rem; align-items: start; }
  /* 최대 높이 — 오른쪽 아래 떠 있는 단추 묶음(.wm-fab 4칸 = 아래 1.25rem + 3.25rem × 4 + 사이 2px × 3)에 칸 아래쪽 단추가 가리지 않게 그만큼 + 숨 1rem 을 뺀다(대회 상세 10-06 검토 값) */
  .wmcr .wmcr-side { position: sticky; top: 7.5rem; max-height: min(80vh, calc(100vh - 7.5rem - (1.25rem + 4 * 3.25rem + 3 * 2px) - 1rem)); overflow-y: auto; padding: 2rem 1rem 4rem; }
  body.wmcr-p.admin-bar .wmcr-side { top: calc(7.5rem + 32px); max-height: min(80vh, calc(100vh - 7.5rem - 32px - (1.25rem + 4 * 3.25rem + 3 * 2px) - 1rem)); }
}
@media (min-width: 992px) and (max-width: 1023px) {   /* 메뉴 줄 없는 폭(1023↓) — top 7.5rem 이 빈 띠로 남지 않게 칸 안쪽 위와 같은 2rem(find 11장) */
  .wmcr .wmcr-side { top: 2rem; }
  body.wmcr-p.admin-bar .wmcr-side { top: calc(2rem + 32px); }
}

/* ═══ 12. 패널 (설계 4-3~4-9) — 테두리·바탕·그림자 0(흰 바탕 · 장식 줄 금지) · 머리 = .wm-hs 값 ═══ */
.wmcr .wmcr-pn { min-width: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
/* 패널·오른쪽 칸 머리 h2 = .wm-hs 1.6875rem/1.22 900 기울임 · 🔴 대문자 바꿈 없음(「@jsrc_official」 같은 계정 글자) · 아이콘 남색(인스타만 로고 색) */
.wmcr .wmcr-pn > h2, .wmcr .wmcr-sp > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.25rem; color: var(--wm-ink); font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: none; }
.wmcr .wmcr-pn > h2 svg.ri-i, .wmcr .wmcr-sp > h2 svg.ri-i { width: 1em; height: 1em; color: var(--wm-navy); }
.wmcr .wmcr-pn--ig > h2 svg.ri-i { color: #C13584; }
.wmcr .wmcr-pn > p { margin: 0; font-size: 1rem; line-height: 1.6; font-weight: 500; }      /* 가입 방법 · 그 밖 패널 글 */
/* 4-4 활동 표 dl.wmcr-dl — 사장님 「표는 새 꼴」(= /records/ 표 꼴) : 머리 2px 남색 · 줄마다 1px #d6dce2 · dt .8125rem 800 기울임 대문자 · dd 1.0625rem 800 · 숫자 tabular-nums
   칸 6.5rem = .wm-row 날짜 칸 · 안쪽 .85rem .75rem = .wm-tbl td */
.wmcr .wmcr-dl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); margin: 0; border-top: 2px solid var(--wm-navy); }
.wmcr .wmcr-dl--none { border-top: 0; }                                                       /* 값 0개 = 빈 표 머리만 남지 않게(서버가 붙인다) */
.wmcr .wmcr-dl > dt, .wmcr .wmcr-dl > dd { margin: 0; padding: .85rem .75rem; border-bottom: 1px solid var(--wm-line); }
.wmcr .wmcr-dl > dt { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; line-height: 1.35; font-weight: 800; font-style: italic; text-transform: uppercase; }
.wmcr .wmcr-dl > dt svg.ri-i { color: var(--wm-navy); }
.wmcr .wmcr-dl > dd { min-width: 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* 4-5 찾아가는 지도 — iframe 폭 100% · 테두리 0(옛 1px 줄 걷음) · 빈칸 바탕 #f0f0f3 · 높이는 원래 인라인 300px 그대로 */
.wmcr .wmcr-pn--map iframe { display: block; width: 100%; border: 0; background: var(--wm-grey); }
.wmcr .crew-map__addr { margin: 1rem 0 0; font-size: 1rem; line-height: 1.6; font-weight: 500; }
.wmcr .crew-map__addr b { margin-right: .5rem; font-weight: 800; }
/* 4-7 소개 글(의견 칸 «밖»만 — 의견 칸 안은 A avatar v2 가 주인이라 이 파일이 잡지 않는다) */
.wmcr .wmcr-pn--intro > p, .wmcr .wmcr-pn--intro > ul, .wmcr .wmcr-pn--intro > ol { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; font-weight: 500; }
.wmcr .wmcr-pn--intro > ul { list-style: disc; padding-left: 1.25rem; }
.wmcr .wmcr-pn--intro > ol { list-style: decimal; padding-left: 1.25rem; }
.wmcr .wmcr-pn--intro > p a, .wmcr .wmcr-pn--intro > ul a, .wmcr .wmcr-pn--intro > ol a { color: var(--wm-navy); text-decoration: underline; text-underline-offset: 3px; }
/* 4-9 인스타그램 — 갈래 A(게시물 격자) · 갈래 B(안내 + 주 단추). 격자 minmax(240px,1fr) 는 임베드 최소 폭 240 과 짝(B 크루 상세 틀 머리 주석 54줄)
   🔴 이 파일엔 «크루 상세 틀 파일 이름» 글자도 쓰지 않는다 — INLINE 비상구로 목록 HTML 에 박히면 seo-desc 가 목록을 «크루 상세»로 오판한다(strpos 판정) */
.wmcr .crew-ig__h { color: var(--wm-ink); font-size: 1rem; font-weight: 700; font-style: normal; text-transform: none; }   /* 옛 회색(--ri-mut) 걷음 */
.wmcr .crew-ig__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; align-items: start; }
.wmcr .crew-ig__grid .instagram-media a { text-decoration: underline; text-underline-offset: 3px; }          /* 임베드가 그려지기 전 「인스타그램 게시물 보기」 링크 */
.wmcr .crew-ig__more { margin: 2rem 0 0; }
.wmcr .crew-ig__lead { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.6; font-weight: 500; }
.wmcr .wmcr-pn--ig .wm-btn { line-height: 1.25; text-align: center; }

/* ═══ 13. 오른쪽 칸 — 채널(로고 단추) · 활동 확인 (설계 4-10) ═══ */
.wmcr .wmcr-sp + .wmcr-sp { margin-top: 2rem; }
.wmcr .wmcr-sp > p { margin: 0; font-size: .875rem; line-height: 1.6; font-weight: 500; color: var(--wm-ink); }   /* 「공개된 채널이 확인되지 않았습니다.」·활동 확인 글 — 옛 회색 .85rem 은 서버가 걷었다 */
.wmcr .wmcr-sp > p + p { margin-top: .5rem; }
/* 채널 단추 = 보조 단추 꼴(v3.5 2px 남색 테두리 + 남색 글자 — wmm.css ④) · 높이 3.25rem · 폭 100% · 왼쪽 맞춤 · hover .2rem 들림(.wm-btn) */
.wmcr .wmcr-chb { width: 100%; min-height: 3.25rem; justify-content: flex-start; padding: 0 1.25rem; font-size: 1rem; line-height: 1.25; text-align: left; overflow-wrap: anywhere; }
.wmcr .wmcr-chb svg.ri-i { width: 1.25rem; height: 1.25rem; color: var(--wm-navy); }          /* 오픈채팅(달리는 사람) = 남색 */
.wmcr .wmcr-chb.is-insta svg.ri-i { color: #C13584; }
.wmcr .wmcr-chb.is-band svg.ri-i { color: #1EC800; }
.wmcr .wmcr-chb.is-ncafe svg.ri-i { color: #03C75A; }
.wmcr .wmcr-chb.is-dcafe svg.ri-i { color: #326EDC; }
.wmcr .wmcr-chb.is-daangn svg.ri-i { color: #FF6F0F; }

/* ═══ 14. 공감·공유 줄 (설계 4-8 · A social.php — 뉴스 14장 값을 «복사» · v3.5 남색) — 마크업·JS 그대로, 모양만. 의견 칸 «안»은 건드리지 않는다 ═══ */
body.wmcr-p .ri-a-rc { margin: 0 0 1.5rem; padding: 0; border-top: 0; font-family: var(--wm-f); }        /* 위 1px 줄 걷기(장식 가로줄) */
body.wmcr-p .ri-a-rc__sum { padding: 0 0 .75rem; color: var(--wm-ink); font-size: .875rem; font-weight: 600; }
body.wmcr-p .ri-a-rc__n { color: var(--wm-ink); font-weight: 800; }
body.wmcr-p .ri-a-rc__faces i { border-color: var(--wm-line); box-shadow: none; }
body.wmcr-p .ri-a-rc__bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 0; border-top: 0; background: none; }
/* 단추 = 보조 단추 꼴(2px 남색 테두리 · 남색 글자 · 모서리 0 · 800 기울임 · hover = .2rem 들림, 색 채우기 없음) */
body.wmcr-p .ri-a-rc__b {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.75rem; min-height: 2.75rem; padding: 0 1rem;
  border: 2px solid var(--wm-navy); border-radius: 0; background: transparent; color: var(--wm-navy); text-decoration: none;
  font-family: var(--wm-f); font-size: .875rem; line-height: 1; font-weight: 800; font-style: italic; transition: transform .2s ease;
}
body.wmcr-p .ri-a-rc__b:hover, body.wmcr-p .ri-a-rc__b:active { background: transparent; transform: translateY(-.2rem); }
body.wmcr-p .ri-a-rc__b.is-on { background: var(--wm-navy); border-color: var(--wm-navy-bd); color: #fff; }
/* 아이콘 선 꼴 — 원래 ri-a-social-css(head 허용) 값과 같다. 그 링크를 못 받으면 svg 가 «꽉 찬 덩어리»가 되므로 여기에도 둔다 */
body.wmcr-p .ri-a-rc__ic svg { display: block; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.wmcr-p .ri-a-rc__b.is-on .ri-a-rc__ic svg { fill: currentColor; }
body.wmcr-p .ri-a-rc__c { color: var(--wm-navy); font-weight: 800; }
body.wmcr-p .ri-a-rc__b.is-on .ri-a-rc__c { color: #fff; }
body.wmcr-p .ri-a-rc__b:focus-visible, body.wmcr-p .ri-a-rc__p:focus-visible { outline: 3px solid var(--wm-navy); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
/* 감정 고르개 — 흰 둥근 알약·그림자 → 흰 바탕 2px 남색 · 모서리 0 (자리·열림은 ri-a-social-css 그대로) */
body.wmcr-p .ri-a-rc__pick { border: 2px solid var(--wm-navy); border-radius: 0; box-shadow: none; background: #fff; }
body.wmcr-p .ri-a-rc__p { border-radius: 0; color: var(--wm-ink); font-family: var(--wm-f); font-size: .6875rem; font-weight: 700; }
body.wmcr-p .ri-a-rc__p:hover { background: var(--wm-page); }
body.wmcr-p .ri-a-rc__p.is-on { color: var(--wm-navy); }
/* 알림 토스트 — 검정 알약 → 남색 면(v3.5 «검정 면 금지») · 모서리 0 · 흰 글자 600 */
body.wmcr-p .ri-a-rc__toast { border-radius: 0; background: var(--wm-navy); color: #fff; font-family: var(--wm-f); font-weight: 600; }

/* ═══ 15. 이어 보기 section.wmcr-nav > nav.crew-nav (설계 4-11) — 회색 바탕 세 칸 · 줄 없음 · 순번 남색(16장 D16) ═══
   🔵 /teams/ 상세도 .crew-nav 를 쓴다 — 여기 규칙은 전부 .wmcr(이 지면 main) 아래라 /teams/ 는 그대로 */
.wmcr .wmcr-nav { padding-bottom: 0; }
.wmcr .crew-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: stretch; margin: 0; padding: 0; border: 0; }   /* 옛 위 2px 줄 걷음 */
.wmcr .crew-nav__a, .wmcr .crew-nav__mid {
  display: flex; flex-direction: column; justify-content: center; gap: .25rem; min-width: 0;
  padding: 1.25rem 1.25rem 1.5rem; border: 0; background: var(--wm-page); color: var(--wm-ink); transition: background-color .2s ease;   /* = .wm-pc 값 */
}
.wmcr .crew-nav__a:hover, .wmcr .crew-nav__mid:hover { background: var(--wm-nav2); }
.wmcr .crew-nav__a small { color: var(--wm-ink); font-size: .8125rem; line-height: 1.35; font-weight: 800; font-style: italic; }   /* 옛 회색·주황 걷음 */
.wmcr .crew-nav__a b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.0625rem; line-height: 1.35; font-weight: 800; }   /* 한 줄 말줄임(B 값) */
.wmcr .crew-nav__a--next { text-align: right; }
.wmcr .crew-nav__mid { align-items: center; text-align: center; font-size: 1rem; line-height: 1.4; font-weight: 800; }
.wmcr .crew-nav__mid small { color: var(--wm-navy); font-size: .9375rem; font-weight: 900; font-style: italic; font-variant-numeric: tabular-nums; }   /* 「19 / 147」 — 규칙 «숫자 남색» */
.wmcr .crew-nav__gap { display: block; }                                                     /* 첫/끝 크루 — 빈 칸(바탕 없음) */
.wmcr .crew-nav__ch { display: inline-flex; margin-right: .4rem; vertical-align: -.125em; }
.wmcr .crew-nav__ch svg.ri-i { width: 1em; height: 1em; color: var(--wm-navy); }
.wmcr .crew-nav__ch.is-insta svg.ri-i { color: #C13584; }
.wmcr .crew-nav__ch.is-band svg.ri-i { color: #1EC800; }
.wmcr .crew-nav__ch.is-ncafe svg.ri-i { color: #03C75A; }
.wmcr .crew-nav__ch.is-dcafe svg.ri-i { color: #326EDC; }
.wmcr .crew-nav__ch.is-daangn svg.ri-i { color: #FF6F0F; }

/* ═══ 16. 폭별 ═══════════════════════════════════════════════════════ */
/* 목록 ≥768 — 줄 2칸 격자 [이름 | 배지] / [정보] / [채널 | 최근 활동] · 안쪽 .75rem .25rem(= .wm-row a) */
@media (min-width: 768px) {
  .wmcr .wmcr-r { grid-template-areas: "n st" "i i" "ch la"; padding: .75rem .25rem; }
  .wmcr .wmcr-r__la { justify-self: end; }
}
/* 목록 ≥992 — 왼쪽 30% 거르개 칸(sticky 7.5rem = 메뉴 줄 아래 · 칸 안 스크롤 80vh) | 오른쪽 목록 · 사이 3rem (find 11장 · WMM §9-2) */
@media (min-width: 992px) {
  .wmcr .wmcr-body { grid-template-columns: 30% minmax(0, 1fr); gap: 3rem; align-items: start; }
  .wmcr .wmcr-body--one { grid-template-columns: minmax(0, 1fr); }                           /* 크루 0곳 = 폼 없음 → 등록 안내가 전체 폭 */
  .wmcr .wmcr-filt { position: sticky; top: 7.5rem; max-height: 80vh; overflow-y: auto; padding: 2rem 1rem 4rem; }
  body.wmcr-p.admin-bar .wmcr-filt { top: calc(7.5rem + 32px); }
}
@media (min-width: 992px) and (max-width: 1023px) {
  .wmcr .wmcr-filt { top: 2rem; }
  body.wmcr-p.admin-bar .wmcr-filt { top: calc(2rem + 32px); }
}
/* 목록 ≥1280 — WMM /races 줄 비율 1.75fr 1fr 1fr · [이름 | 채널 | 배지] / [정보 | 채널 | 최근 활동] · 채널은 세로 줄(위아래 가운데) */
@media (min-width: 1280px) {
  .wmcr .wmcr-r { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "n ch st" "i ch la"; }
  .wmcr .wmcr-r__c { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; align-self: center; gap: .25rem; }
}
/* 991 이하 — 거르개 칸이 목록 «위»로 · select 는 한 줄에 같은 폭으로 나란히(2개든 3개든 — 숫자 안 지음) · 상세 머리 세로 · 본문 칸 풀어 오른쪽 칸을 활동 표 뒤로 */
@media (max-width: 991px) {
  .wmcr .wmcr-f { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .wmcr .wmcr-hero { grid-template-columns: minmax(0, 1fr); }
  .wmcr .wmcr-hero__c { padding: 0; }
  .wmcr .wmcr-hero__img { margin-top: 2.5rem; }                                               /* = .wm-split__img 991↓ */
  .wmcr .wmcr-hero .wmcr-h1 { font-size: 2.5rem; }
  .wmcr .wmcr-hero--pic { padding-top: 2.5rem; }
  /* 차례 : 활동 표(1) → 오른쪽 칸 채널·활동 확인(2) → 나머지 패널(3 · DOM 차례) — 가입하려면 채널부터(대회 상세 Q3 와 같은 판단).
     display:contents 는 뜻 없는 div(본문 칸 껍데기)에만 쓴다 — 안의 패널·목록은 그대로 화면 읽기에 잡힌다.
     🔵 소개 글이 없는 크루는 공감 줄이 본문 칸 «끝»에 붙는다(id="ri-main" 고리) → 나머지와 같은 3 */
  .wmcr .wmcr-one { display: flex; flex-direction: column; gap: 3rem; }
  .wmcr .wmcr-one__main { display: contents; }
  .wmcr .wmcr-one__main > * { order: 3; }
  .wmcr .wmcr-one__main > .wmcr-pn--act { order: 1; }
  .wmcr .wmcr-side { order: 2; }
}
/* 767 이하 (폰 390) — 거르개 칸은 «숨기지 않는다»(find 의 폰 칩 띠가 크루엔 없다 · 16장 D5) · 채널 칩은 한 줄 가로 밀기 · 단추 한 줄 */
@media (max-width: 767px) {
  .wmcr .wmcr-sec { padding-top: 3rem; }                                                     /* 규칙 4 폰 구역 간격 */
  .wmcr .wmcr-hd { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; }   /* h1 과 개수 한 줄 (wmm.css 767↓ 세로 쌓기를 되돌림) */
  .wmcr .wmcr-filt { padding: 1rem 1rem 1.5rem; }
  .wmcr .wmcr-ch { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: .1rem 0 .3rem .4rem; }   /* = find 폰 칩 줄 값 */
  .wmcr .wmcr-ch::-webkit-scrollbar { display: none; }
  .wmcr .wmcr-ch .wm-chip { flex: none; }
  .wmcr .wmcr-ft { gap: .75rem 1rem; }
  .wmcr .wmcr-ft .wm-btn { flex: 1 1 0; min-width: 0; padding-left: 1rem; padding-right: 1rem; }
  .wmcr .wmcr-hero--nopic { padding-top: 3rem; }
  .wmcr .wmcr-one { padding-top: 3rem; }
  .wmcr .crew-nav { grid-template-columns: minmax(0, 1fr); }
  .wmcr .crew-nav__mid { order: 3; }                                                          /* 목록(n / 전체)은 맨 끝 — B 640↓ 과 같은 판단 · 경계만 767 */
  .wmcr .crew-nav__gap { display: none; }
  .wmcr .crew-nav__a--next { text-align: left; }
}
@media (max-width: 479px) {
  .wmcr .wmcr-hero .wmcr-h1 { font-size: 8vw; }
  /* 활동 표 한 칸으로 쌓기(dt 위 · dd 아래 · dt 아래 줄 없음 — 대회 상세 facts ≤479 꼴) */
  .wmcr .wmcr-dl { grid-template-columns: minmax(0, 1fr); }
  .wmcr .wmcr-dl > dt { padding-bottom: .25rem; border-bottom: 0; }
  .wmcr .wmcr-dl > dd { padding-top: 0; }
  .wmcr .wmcr-reg .u-sec__title { font-size: 8vw; }
  .wmcr .wmcr-iv .wm-h2 { font-size: 7vw; }                                                   /* 8-b 인터뷰 구역 머리 = 홈 .wm-h3 479↓ */
}
@media (max-width: 991px) and (min-width: 480px) {
  .wmcr .wmcr-reg .u-sec__title { font-size: 2.5rem; }
}

/* ═══ 17. 움직임 줄이기 — 단추 들림·hover 전환 끔 ═══ */
@media (prefers-reduced-motion: reduce) {
  .wmcr *, .wmcr *::before, .wmcr *::after, body.wmcr-p .ri-a-rc__b, body.wmcr-p #ric-sec a.ric-card, body.wmcr-p #ric-sec a.ric-card .go { transition: none !important; }
  body.wmcr-p .ri-a-rc__b:hover, body.wmcr-p #ric-sec a.ric-card:hover .go1, .wmcr .wmcr-reg .u-cta:hover { transform: none; }
}

/* 10-06 A 라이브 전 실측 — 인스타그램 임베드 스크립트가 넣는 2px 높이 보조 iframe(.instagram-media)의 «부모 div» 가 화면 폭(1440)이라
   구역 왼쪽 여백(29px)만큼 오른쪽으로 삐져 PC 에 가로 스크롤이 생겼다(옛 지면은 1200 틀 안이라 안 보였다).
   → 구역에서 가로만 잘라 낸다(clip 은 스크롤 상자를 만들지 않아 세로 sticky·그림자에 영향 없음) */
body.wmcr-p .wmcr-ig { overflow-x: clip; }
body.wmcr-p .wmcr-ig div { max-width: 100%; }