/* ═══ RUNIN.KR 홈 시안 v4 — World Marathon Majors 디자인 · 2026-10-05 · 클로드A ═══
   규칙 한 장 : https://idc.kr/_claude/CODE_RULES.txt
   사장님 10-05 「worldmarathonmajors.com 의 디자인 형태와 패턴처럼, 컨텐츠는 그대로, 색상도 판단해서 최대한 비슷하게」
   값의 출처 = WMM 원본 CSS(worldmarathonmajors.shared.css) :root 와 실측 (ref/WMM_실측_20261005.md)
   v4 = 독립 검토 3갈래(WMM 대조 24 · 기능 17 · 폰/접근성 23) 반영. 근거는 review/ 폴더. v3 원본은 wmm.v3.css.
   🔴 의도된 차이 : 글자는 사장님 상시 규칙대로 «완전 검정»(WMM #303030) · 글꼴 Pretendard(objektiv 는 유료 전용)
   🔴 새 접두어 wm- (runin-wmm) — 옛 ri-a-* / ri-m-* 출력 버퍼·덧칠 CSS 가 잘못 걸리지 않게. */

.wm {
  --wm-navy: #000075;        /* --signature-blue */
  --wm-navy-bd: #454581;     /* 단추 테두리 */
  /* 코스 색 — 사장님 10-05 밤 「풀코스·하프·10K·트레일런 색을 다르게」. 값 = WMM 대회 무늬 팔레트 실측(ref/포인트색/WMM_강조색.md).
     빨강 #e4002b 는 «핫» 몫이라 코스에 안 쓴다. 글자색은 대비로 정함(흰 글자는 풀코스만 8.9 · 나머지는 검정 6.8~14.4) */
  --wm-c-full: #004f71;      /* 풀코스 — 흰 글자 */
  --wm-c-half: #009cde;      /* 하프 — 검정 글자(흰 글자 3.08 ✗) */
  --wm-c-10k: #64ccc9;       /* 10K — 검정 */
  --wm-c-trail: #7ccc6c;     /* 트레일런 — 검정 */
  --wm-c-ultra: #ffd100;     /* 울트라 — 검정 */
  --wm-hot: #e32b2b;         /* 포인트 빨강 = adidas --gl-color-sale-text = sale-background = error (10-05 실측 · ref/포인트색/). 흰 글자 4.52 — 회색·남색·사진 위 «빨강 글자» 금지 */
  --wm-ink: #000;            /* 글자 (WMM #303030 → 사장님 규칙 #000) */
  --wm-ink2: #1f1f1f;        /* --darker-black */
  --wm-bg: #fff;
  --wm-page: #f7f9fa;        /* --page-background */
  --wm-nav1: #f3f7f8;        /* --nav-light-2 로고 줄 */
  --wm-nav2: #ebf2f5;        /* --main-nav-bg 메뉴 줄·발 */
  --wm-chip: #f3f3f3;        /* --white-text 라벨칩 */
  --wm-grey: #f0f0f3;        /* --background-grey */
  --wm-smoke: #f2f4f5;       /* --white-smoke (soft-light 막) */
  --wm-silver: #bbc1ca;      /* --silver-2 */
  --wm-field: #767676;       /* 입력칸 테두리 — 흰 바탕 4.54:1 (WCAG 1.4.11) */
  --wm-line: #d6dce2;
  --wm-f: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --wm-gx: 2%;               /* padding-global (WMM 2%) */
  --wm-sy: 4rem;             /* padding-section-medium */
  --wm-ease: cubic-bezier(.215, .61, .355, 1);
  margin: 0; background: var(--wm-bg); color: var(--wm-ink);
  font-family: var(--wm-f); font-size: 16px; line-height: 1.6; font-weight: 500;
  -webkit-font-smoothing: antialiased; word-break: keep-all;
  overflow-wrap: break-word;  /* 🔴 anywhere 는 격자 칸 폭을 한 글자로 만들어 «남/자» «031-/8015» 로 쪼갰다(v3 실측) */
}
/* 🔴 초기화는 :where() 로 특이도 0 — «.wm p{margin:0}» 이 «.wm-split__p{margin-top}» 을 이겨 제목·설명이 붙었다(v1 실측) */
:where(.wm) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.wm) :where(a) { color: inherit; text-decoration: none; }
:where(.wm) :where(img) { max-width: 100%; display: block; }
:where(.wm) :where(button) { font: inherit; color: inherit; cursor: pointer; }
:where(.wm) :where(ul) { list-style: none; margin: 0; padding: 0; }
:where(.wm) :where(h1, h2, h3, h4, p, figure) { margin: 0; }
html { scroll-padding-top: 4rem; }
html:has(dialog[open]) { overflow: hidden; }   /* 모달·시트가 열린 동안 뒤 화면을 잠근다 */
.wm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wm-nw { white-space: nowrap; }
.wm-skip { position: absolute; left: -999px; top: 0; background: var(--wm-navy); color: #fff; padding: 12px 16px; z-index: 999; }
.wm-skip:focus { left: 8px; top: 8px; }

/* 초점 — 남색 위·사진 위에서도 보이게 «두 겹» (v3 : 남색 띠 위 1.00:1 로 안 보였다) */
.wm :focus-visible { outline: 3px solid var(--wm-navy); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
.wm-today :focus-visible, .wm-hero :focus-visible, .wm-fab :focus-visible, .wm-btn:not(.wm-btn--line):focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px #000; }
.wm-cc:focus-visible, .wm-nc:focus-visible, .wm-iv__c:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 9px var(--wm-navy); }
.wm input[type=checkbox]:focus-visible { outline: 3px solid var(--wm-navy); outline-offset: 2px; }

/* ── 글자 꼴 : 제목은 «굵은 기울임» (WMM objektiv-mk1 900 italic → Pretendard 900 italic) ── */
.wm-h1, .wm-h2, .wm-h3, .wm-hs { font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: uppercase; }
.wm-h1 { font-size: clamp(2.5rem, 4.6vw, 4.75rem); line-height: .95; }   /* WMM hero 6.5vw/.9 · 96px@1584 */
.wm-h2 { font-size: 3rem; line-height: 1.05; }                        /* heading-style-h2 3rem/1 */
.wm-h3 { font-size: 2rem; line-height: 1.2; }
.wm-hs { font-size: 1.6875rem; line-height: 1.22; }                   /* «LATEST NEWS» 27/33 */
.wm-p { font-size: 1rem; line-height: 1.625; }                         /* 본문 16/26 */

/* 라벨칩 — 비스듬한 회색 칩 (subtitle-block : skew(-16deg) · #f3f3f3 · 좌우 1rem · 아래 2rem) */
.wm-eb { display: inline-block; align-self: flex-start; background: var(--wm-chip); transform: skew(-16deg); padding: 0 1rem; margin-bottom: 2rem; }
.wm-eb > span { display: inline-block; transform: skew(16deg); font-size: .875rem; line-height: 1; font-weight: 700; text-transform: uppercase; padding: .5rem 0; }

/* ── 단추 (WMM .button) — hover 는 «0.2rem 들림» 하나 ── */
.wm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--wm-navy); color: #fff !important; border: .125rem solid var(--wm-navy-bd);
  padding: 1rem 2rem; font-size: 1rem; line-height: 1; font-weight: 800; font-style: italic; text-transform: uppercase;
  transition: transform .2s ease;
}
.wm-btn:hover { transform: translateY(-.2rem); }
.wm-btn svg { width: 1.1rem; height: 1.1rem; }
.wm-btn--line { background: transparent; color: var(--wm-ink) !important; border-color: var(--wm-ink); }
.wm-btn--link { background: none; border: 0; padding: .25rem 0; color: inherit !important; }
.wm-btn--link svg { width: 1.5rem; height: 1rem; transition: transform .2s ease; }
.wm-btn--link:hover { transform: none; }
.wm-btn--link:hover svg { transform: translateX(.35rem); }
.wm-btn--sm { padding: .4rem .64rem; font-size: .8125rem; border: .125rem solid var(--wm-ink); background: transparent; color: var(--wm-ink) !important; }
.wm-btns { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

/* 넘김 화살표 — WMM : 120×52 칸 · hover 때 둥근 남색으로 채워짐 */
.wm-arw { width: 7.5rem; height: 3.25rem; border: 0; border-radius: 100vw; background: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background-color .2s ease, color .2s ease; }
.wm-arw svg { width: 2.5rem; height: 1.5rem; }
.wm-arw:hover:not([disabled]) { background: var(--wm-navy); color: #f0f0f3; }
.wm-arw[disabled] { opacity: .35; cursor: default; }
.wm-arws { display: flex; gap: .75rem; align-items: center; }
.wm-arws[hidden] { display: none; }

/* 고르기 칩 (필터·탭) — 테두리 없이 회색 칩, 고르면 남색 (v3 : 2px 검정 테두리 남발 → WMM 은 보조 단추에만) */
.wm-chip {
  display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1.1rem;
  border: 0; background: var(--wm-chip); transform: skew(-16deg);
  font-size: .9375rem; font-weight: 800; font-style: italic; transition: background-color .2s ease, color .2s ease;
}
.wm-chip > .wm-chip__t { display: inline-flex; align-items: center; gap: .4rem; transform: skew(16deg); }
.wm-chip b { font-weight: 500; font-style: normal; }
.wm-chip:hover { background: var(--wm-nav2); }
.wm-chip.is-on, .wm-chip[aria-selected="true"] { background: var(--wm-navy); color: #fff; }
.wm-chip.is-zero:not(.is-on) { background: transparent; box-shadow: inset 0 0 0 1px var(--wm-silver); }
.wm-chips { display: flex; flex-wrap: wrap; gap: .5rem .6rem; padding-left: .4rem; }

/* NEW 배지 */
.wm-new { display: inline-block; background: var(--wm-navy); color: #fff; font-size: .625rem; line-height: 1; font-weight: 800; font-style: italic; padding: .25rem .35rem; transform: skew(-16deg); letter-spacing: .02em; }
.is-on .wm-new, [aria-selected="true"] .wm-new { background: #fff; color: var(--wm-navy); }
/* 포인트 빨강 — 사장님 10-05 저녁 「아디다스도 메인색은 검정, 세일·핫은 빨강 — 포인트색을 잘 사용해」
   머리 메뉴의 NEW(아디다스 머리 메뉴의 «빨강 한 칸» 자리)와 «속보» 탭의 NEW 만. 다른 탭 NEW 는 남색 그대로(빨강이 흔해지면 포인트가 아니다).
   고른 탭(남색) 안은 «흰 상자 + 빨강 글자» — 빨강을 남색에 맞붙이지 않는다(대비 3.70) */
.wm-nav .wm-new, .wm-dlg--nav .wm-new, #wm-t-rht-news .wm-new { background: var(--wm-hot); color: #fff; }
#wm-t-rht-news.is-on .wm-new, #wm-t-rht-news[aria-selected="true"] .wm-new { background: #fff; color: var(--wm-hot); }

/* 상태 배지 (접수중 · 마감임박 · 접수예정) */
.wm-st { display: inline-block; transform: skew(-16deg); padding: .3rem .6rem; font-size: .75rem; line-height: 1; font-weight: 800; font-style: italic; background: var(--wm-navy); color: #fff; white-space: nowrap; }
.wm-st > span { display: inline-block; transform: skew(16deg); }
.wm-st--closing, .wm-st--extra { background: var(--wm-hot); color: #fff; }   /* 포인트 빨강 = «지금 서둘러라». 전 : 마감임박=검정 · 추가접수=테두리(접수예정과 같은 꼴이라 «아직 멀었다»로 읽혔다) */
.wm-st--scheduled { background: transparent; color: var(--wm-ink); box-shadow: inset 0 0 0 2px var(--wm-ink); }
.wm-dd { font-weight: 900; font-style: italic; font-size: .9375rem; white-space: nowrap; }

/* 사진 막 — WMM 그대로 : soft-light 연회색(#f2f4f5 .85) — 사진을 차분하게 */
.wm-soft { position: relative; }
.wm-soft::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--wm-smoke); opacity: .85; mix-blend-mode: soft-light; pointer-events: none; }

/* 사진 출처 — 라이선스 조건상 «읽혀야» 하는 글 → 어두운 바탕 */
.wm-cr { position: absolute; right: 0; bottom: 0; z-index: 3; font-size: .6875rem; line-height: 1.35; color: #fff; background: rgba(0,0,0,.62); padding: .15rem .45rem; max-width: 80%; text-align: right; }
.wm-cr a { text-decoration: underline; }

/* ═══ 머리 ═══════════════════════════════════════════════════════ */
/* 맨 위 남색 띠 = WMM 광고 띠 자리 → runin «오늘» 띠 */
.wm-today { background: var(--wm-navy); color: #fff; }
.wm-today__in { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0 var(--wm-gx); height: 3.5rem; }
.wm-today__tag { background: #fff; color: var(--wm-navy); transform: skew(-16deg); padding: .3rem .7rem; font-size: .8125rem; font-weight: 900; font-style: italic; flex: none; }
.wm-today__tag > span { display: inline-block; transform: skew(16deg); }
.wm-today__roll { position: relative; flex: 0 1 46rem; min-width: 0; height: 1.6rem; overflow: hidden; }
.wm-today__a { position: absolute; inset: 0; display: flex; gap: .75rem; align-items: center; min-width: 0; visibility: hidden; opacity: 0; transform: translateY(100%);
  transition: transform .5s var(--wm-ease), opacity .5s var(--wm-ease), visibility 0s linear .5s; font-size: .9375rem; font-weight: 600; }
.wm-today__a.is-on, .wm-today__a.is-out { visibility: visible; transition-delay: 0s; }
.wm-today__a.is-on { opacity: 1; transform: none; }
.wm-today__a.is-out { opacity: 0; transform: translateY(-100%); }
.wm-today__a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-today__a > b { flex: none; font-weight: 900; font-style: italic; }
.wm-today__a:hover span { text-decoration: underline; }
.wm-today__n { font-size: .8125rem; font-weight: 700; flex: none; }
.wm-today__nb { width: 2.75rem; height: 2.75rem; border: 0; background: none; color: #fff; font-size: 1.25rem; line-height: 1; font-weight: 900; flex: none; }

.wm-brand { background: var(--wm-nav1); }
.wm-brand__in { display: flex; align-items: center; gap: 1.5rem; height: 4.5625rem; padding: 0 var(--wm-gx); }
/* 로고 = 기존 런닝인사이드 로고 그대로 (사장님 10-05 「리뉴얼된 로고 캐릭터가 이상해, 기존 로고 캐릭터 사용」)
   라이브 .ri-logo 실측 : 그림 34px(폰 26) · 그림 뒤 8px · 「런닝」 18px 700 · 「인사이드」 900 · 검정 · 기울임 없음 */
.wm-logo { display: inline-flex; align-items: center; gap: 1px; font-size: 18px; line-height: 1; font-weight: 700; font-style: normal; color: var(--wm-ink) !important; letter-spacing: normal; }
.wm-logo svg { width: 34px; height: 34px; margin-right: 8px; flex: none; }
.wm-logo b { font-weight: 900; color: var(--wm-ink); }
.wm-brand__sp { flex: 1; }
.wm-brand__tools { display: flex; align-items: center; gap: 1.25rem; font-size: .875rem; font-weight: 700; }
.wm-brand__tools > a:hover { text-decoration: underline; }
.wm-ic { width: 1.5rem; height: 1.5rem; display: inline-block; vertical-align: middle; }
.wm-iconbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; background: none; border: 0; padding: 0; }
.wm-menu-btn { display: none; }
.wm-lang { position: relative; }
.wm-lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; min-height: 2.75rem; }
.wm-lang summary::-webkit-details-marker { display: none; }
.wm-lang ul { position: absolute; right: 0; top: 2.75rem; background: #fff; border: 2px solid var(--wm-ink); min-width: 10rem; z-index: 60; padding: .4rem 0; }
.wm-lang li a { display: flex; justify-content: space-between; padding: .55rem .9rem; font-weight: 600; }
.wm-lang li a:hover { background: var(--wm-nav2); }

.wm-nav { background: var(--wm-nav2); position: sticky; top: 0; z-index: 50; }
.wm-nav__in { display: flex; align-items: center; height: 3.3125rem; padding: 0 var(--wm-gx); }
.wm-nav ul { display: flex; align-items: stretch; height: 100%; flex: 1; }
.wm-nav li a { height: 100%; display: inline-flex; align-items: center; gap: .35rem; padding: 0 .8rem; font-size: 1rem; font-weight: 600; white-space: nowrap; position: relative; }
.wm-nav li:first-child a { padding-left: 0; }
.wm-nav li a::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 0; height: 3px; background: var(--wm-navy); transform: scaleX(0); transition: transform .2s ease; }
.wm-nav li:first-child a::after { left: 0; }
.wm-nav li a:hover::after { transform: none; }

/* 폰·태블릿 — 검색줄 + 아이콘 바로가기 한 줄 (기존 ri-a-nv 내용) */
.wm-mnv { display: none; }

/* ═══ 첫 화면 (WMM section-home-header) ═══════════════════════════ */
.wm-hero { padding: 1.875rem var(--wm-gx) 0; }
.wm-hero__in { position: relative; height: min(30rem, 62vh); min-height: 24rem;   /* 사장님 10-05 「상하 폭이 커」 (전 40.8rem) */
   overflow: hidden; background: var(--wm-ink2); color: #fff; isolation: isolate; }
.wm-hero__sl { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease-in-out; }
.wm-hero__sl.is-on { opacity: 1; z-index: 0; }
.wm-hero__sl img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* WMM 막 두 겹 : 회색 multiply(.54·.8) + 연회색 soft-light(.85) = «바랜 회색 사진» (v3 남색 막은 밝기 54·채도 117 로 정반대였다) */
.wm-hero__sl::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(27,27,27,.54); mix-blend-mode: multiply; opacity: .8; }
.wm-hero__sl::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--wm-smoke); opacity: .85; mix-blend-mode: soft-light; }
/* 글 뒤만 살짝 더 — 흰 설명글 대비 4.5:1 확보용 (가장 밝은 점 기준 재측정) */
.wm-hero__in::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.36) 45%, rgba(0,0,0,0) 72%), linear-gradient(315deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 26%, rgba(0,0,0,0) 42%); }
/* ↑ v4 화소 실측 : 사진 4장 중 2·3번째에서 설명 4.11·숫자 2.83 → 글 뒤·숫자 뒤만 그늘을 더 (사진 전체 톤은 WMM 막 그대로) */
.wm-hero__body { position: absolute; z-index: 2; left: 6%; top: 50%; translate: 0 -50%; max-width: min(36rem, 52%); }
.wm-hero__meta { display: inline-block; transform: skew(-16deg); background: #fff; color: var(--wm-navy); padding: .3rem .8rem; margin-bottom: 1rem; font-weight: 800; font-style: italic; font-size: .9375rem; }
.wm-hero__meta > span { display: inline-block; transform: skew(16deg); }
.wm-hero__meta b { font-weight: 900; }
.wm-hero h1 { color: #fff; }
.wm-hero__p { margin-top: 1rem; font-size: 1.125rem; line-height: 1.35; font-weight: 600; color: #fff; }
.wm-hero .wm-btns { margin-top: 1.5rem; }
.wm-hero__stat { position: absolute; z-index: 2; right: 5%; bottom: 10%; display: flex; gap: 2.5rem; }
.wm-hero__stat a { display: flex; flex-direction: column; align-items: flex-start; color: #fff; }
.wm-hero__stat b { font-size: 3rem; line-height: 1; font-weight: 900; font-style: italic; letter-spacing: -.02em; }
.wm-hero__stat span { margin-top: .5rem; font-size: .875rem; font-weight: 700; border-top: 2px solid #fff; padding-top: .35rem; }
.wm-hero__stat a:hover b { text-decoration: underline; text-decoration-thickness: 3px; }
/* 포인트 빨강 — «마감 임박» 라벨만 빨강 비스듬 칩(숫자는 흰색 그대로 : WMM 숫자표는 숫자를 칠하지 않는다).
   사진 위 빨강 «글자»는 대비 1.00~3.10 으로 불가 → 칩 + 흰 글자는 사진과 상관없이 4.52. 0건이면 PHP 가 is-hot 을 안 붙인다 */
.wm-hero__stat a.is-hot span { position: relative; isolation: isolate; border-top: 0; padding: .3rem .6rem; margin-top: .55rem; }
.wm-hero__stat a.is-hot span::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wm-hot); transform: skew(-16deg); }
.wm-hero__pb { position: absolute; z-index: 3; left: 6%; bottom: 1.25rem; display: flex; gap: .4rem; align-items: center; }
.wm-hero__pb button { width: 2.75rem; height: 2.75rem; border: 0; background: none; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.wm-hero__pb button svg { width: 1.1rem; height: 1.1rem; }
.wm-hero__pb i { display: block; width: 1.75rem; height: .25rem; background: rgba(255,255,255,.4); }
.wm-hero__pb i.is-on { background: #fff; }

/* ═══ 섹션 공통 ═══════════════════════════════════════════════════ */
.wm-sec { padding: var(--wm-sy) var(--wm-gx); position: relative; }
.wm-sec__hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.75rem; position: relative; z-index: 1; }
.wm-sec__hd--col { flex-direction: column; align-items: flex-start; gap: 0; }
.wm-sec__sub { margin-top: 1.25rem; font-size: 1rem; font-weight: 500; max-width: 60ch; }

/* ── 한눈에 보기 = WMM «LATEST NEWS» 카드 넘김 ── */
.wm-news { padding-top: 2rem; }
.wm-news .wm-tabs { margin-bottom: 1.75rem; position: relative; z-index: 1; }
.wm-pane { display: none; position: relative; z-index: 1; }
.wm-pane.is-on { display: block; }
.wm-track { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.wm-track::-webkit-scrollbar { display: none; }
.wm-nc { flex: 0 0 calc((100% - 8px) / 5);   /* 사장님 10-05 「썸네일 배지가 커, 5개 나오게」 (전 3.12장) */
   scroll-snap-align: start; position: relative; aspect-ratio: 502 / 530; overflow: hidden; background: var(--wm-ink2); color: #f0f0f3; display: block; isolation: isolate; }
.wm-nc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wm-nc::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--wm-smoke); opacity: .85; mix-blend-mode: soft-light; pointer-events: none; }
/* 아래 그라데이션 — WMM 은 #303030 6%→투명 77%. 포스터 사진은 밝아 제목 대비가 모자라(폰 최저 1.47:1) 더 진하게 */
.wm-nc::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(20,20,20,.94) 0%, rgba(20,20,20,.82) 45%, rgba(20,20,20,.35) 72%, rgba(0,0,0,0) 92%); }
.wm-nc__b { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.wm-nc__tag { align-self: flex-start; background: var(--wm-smoke); color: var(--wm-ink); transform: skew(-16deg); padding: .15rem .4rem; font-size: .625rem; font-weight: 600; }
.wm-nc__tag > span { display: inline-block; transform: skew(16deg); }
/* 포인트 빨강 — «속보» 칸 꼬리표만(다른 칸 꼬리표는 «분류»라 그대로). 10px 600 은 얇아 700 */
#wm-rht-news .wm-nc__tag { background: var(--wm-hot); color: #fff; font-weight: 700; }
.wm-nc__t { font-size: 1.1875rem; line-height: 1.25; font-weight: 900; font-style: italic; color: #f0f0f3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wm-nc__m { font-size: .75rem; font-weight: 600; color: #f0f0f3; }
.wm-nc__more { display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; font-weight: 700; font-style: italic; }
.wm-nc__more svg { width: .9rem; height: .9rem; }
.wm-news__ft { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.75rem; position: relative; z-index: 1; }
.wm-news__ft .wm-btn { flex: none; white-space: nowrap; }
.wm-dots { display: flex; flex-wrap: wrap; gap: 0; min-width: 0; }
.wm-dots button { width: 2.75rem; height: 2.75rem; border: 0; padding: 0; background: none; position: relative; }   /* 누르는 면 44px · 보이는 점 20px */
.wm-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 1.25rem; margin: -.625rem 0 0 -.625rem; border-radius: 50%; background: var(--wm-ink); }
.wm-dots button.is-on::before { background: var(--wm-navy); }

/* 기록 표 · 클래스 같은 «카드 아닌» 칸 */
.wm-tbl-wrap { overflow-x: auto; }
.wm-tbl { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.wm-tbl th, .wm-tbl td { padding: .85rem .75rem; text-align: left; border-bottom: 1px solid var(--wm-line); white-space: nowrap; }
.wm-tbl thead th { font-size: .8125rem; font-weight: 800; font-style: italic; text-transform: uppercase; border-bottom: 2px solid var(--wm-ink); }
.wm-tbl tbody tr:hover { background: var(--wm-page); }
.wm-tbl .rec-rank, .wm-tbl .rec-pt__n b { font-weight: 900; font-style: italic; }
.wm-tbl .rec-pt__ev { display: block; font-size: .8125rem; font-weight: 500; }
.wm-tbl .rec-pt__mv { font-size: .75rem; font-weight: 800; margin-right: .3rem; color: var(--wm-navy); }
.wm-pane__h { font-size: 1.25rem; font-weight: 900; font-style: italic; margin-bottom: .35rem; }
.wm-pane__s { font-size: .9375rem; margin-bottom: 1.25rem; }
.wm-pane__other { font-size: 1rem; }
.wm-pane__other a { text-decoration: underline; }

/* ── 숫자 띠 = WMM 메이저 로고 띠 자리 (큰 배경 글자 «MAJORS» 도 이 띠 뒤 — WMM 과 같은 자리) ── */
.wm-nums { position: relative; isolation: isolate; padding: 2.5rem var(--wm-gx) 1rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; overflow: hidden; }
.wm-wm { position: absolute; z-index: -1; right: -1%; bottom: -1.5rem; font-size: 9rem; line-height: 1; font-weight: 900; color: #eee; opacity: .59; white-space: nowrap; pointer-events: none; user-select: none; }
.wm-nums > a, .wm-nums > button { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem .5rem; border: 0; background: none; transition: transform .2s ease; }
.wm-nums > a:hover, .wm-nums > button:hover { transform: translateY(-.2rem); }
.wm-nums b, .wm-trust b, .wm-hero__stat b { font-variant-numeric: tabular-nums; }
.wm-nums b { font-size: 3.25rem; line-height: 1; font-weight: 900; font-style: italic; color: var(--wm-navy); letter-spacing: -.02em; }
.wm-nums b em { font-size: 1.25rem; font-style: italic; margin-left: .15rem; }
.wm-nums__l { font-size: .875rem; font-weight: 700; }   /* 🔴 «.wm-nums span» 은 숫자 칸 속 span 까지 잡아 숫자가 14px 로 작아졌다(v4 실측) */

/* ── 대회 찾기 ── */
.wm-find__pics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: 3rem; }
.wm-pc { display: flex; flex-direction: column; background: var(--wm-page); transition: background-color .2s ease; }
.wm-pc:hover { background: var(--wm-nav2); }
.wm-pc__f { aspect-ratio: 16 / 8; overflow: hidden; background: var(--wm-grey); }
.wm-pc__f img { width: 100%; height: 100%; object-fit: cover; }
.wm-pc__b { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.wm-pc__k { display: flex; align-items: center; gap: .75rem; }
.wm-pc__t { font-size: 1.25rem; line-height: 1.3; font-weight: 900; font-style: italic; }
.wm-pc__s, .wm-pc__c { font-size: .875rem; line-height: 1.5; }
.wm-pc__c { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wm-filt { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1.25rem; }
.wm-filt__g { display: grid; grid-template-columns: 4rem 1fr; align-items: center; gap: 1rem; }
.wm-filt__l { font-size: .875rem; font-weight: 900; font-style: italic; text-transform: uppercase; }
.wm-find__add { font-size: .9375rem; font-weight: 600; margin: .25rem 0 0 5rem; }
.wm-find__add a { text-decoration: underline; font-weight: 800; }
.wm-find__cnt { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .6rem; margin: 2.5rem 0 1rem; font-size: 1rem; font-weight: 700; }
.wm-find__cnt b { font-size: 2rem; line-height: 1; font-weight: 900; font-style: italic; color: var(--wm-navy); }
.wm-list { border-top: 2px solid var(--wm-ink); }
.wm-row a { display: grid; grid-template-columns: 6.5rem 3.5rem 1fr auto; gap: 1rem; align-items: center; padding: .75rem .25rem; border-bottom: 1px solid var(--wm-line); transition: background-color .2s ease; }
.wm-row a:hover { background: var(--wm-page); }
.wm-row a.no-thumb { grid-template-columns: 6.5rem 1fr auto; }
.wm-row__d { font-size: 1.125rem; font-weight: 900; font-style: italic; line-height: 1.1; white-space: nowrap; }
.wm-row__d em { font-size: .8125rem; font-style: italic; margin-left: .25rem; }
.wm-row__f { width: 3.5rem; aspect-ratio: 1; overflow: hidden; background: var(--wm-grey); }
.wm-row__f img { width: 100%; height: 100%; object-fit: cover; }
.wm-row__t { display: block; font-size: 1.0625rem; line-height: 1.35; font-weight: 800; }
.wm-row__s { display: block; font-size: .8125rem; margin-top: .15rem; }
.wm-row__s i { font-style: normal; font-weight: 800; margin-right: .4rem; }
.wm-row__r { display: flex; align-items: center; gap: .6rem; }
.wm-row[hidden] { display: none; }
/* PC 넓은 화면은 목록 2단 — 위→아래로 흘러 읽는 순서 그대로 (v3 : 대회 찾기 한 칸이 3,408px 로 WMM 홈 전체의 58%) */
@media (min-width: 1200px) {
  .wm-find .wm-list { columns: 2; column-gap: 3rem; }
  .wm-find .wm-row { break-inside: avoid; }
}
.wm-empty { padding: 2rem 0; font-weight: 600; }
.wm-empty a { text-decoration: underline; }
.wm-find__ft { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; }

/* ── «사진 반 + 글 반» (WMM layout-content-1) ── */
.wm-split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; margin: 0 var(--wm-gx); }
.wm-split + .wm-split { margin-top: 4rem; }
.wm-split__c { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 3rem 4rem 3rem 3rem; min-width: 0; align-self: stretch; }
.wm-split--rev .wm-split__c { order: 2; padding: 3rem 3rem 3rem 6rem; }
.wm-split__c > .wm-h2 { max-width: 16ch; }
/* 제목 ↔ 설명 52px · 설명 16px (WMM 실측. v3 24px·18px) */
.wm-split__p, .wm-cta__p { margin-top: 3.25rem; font-size: 1rem; line-height: 1.6; max-width: 55ch; }
.wm-split__c .wm-btns { margin-top: 2rem; }
/* 사진은 가로 760:490 고정 — 글이 길어도 세로로 늘지 않고 따라 내려온다 (v3 : 752×1027 세로 사진이 됐다) */
.wm-split__img { position: sticky; top: 4.5rem; align-self: start; aspect-ratio: 760 / 490; overflow: hidden; background: var(--wm-grey); }
.wm-split__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wm-split__grid { position: static; align-self: center; aspect-ratio: auto; overflow: visible; background: none; }
.wm-split__x { width: 100%; margin-top: 1.75rem; }

/* 랭킹 */
.wm-rk { width: 100%; }
.wm-rk__slide { display: none; }
.wm-rk__slide.is-on { display: block; }
.wm-rk__a { display: grid; grid-template-columns: 3.25rem minmax(4.5rem, auto) 1fr auto auto; gap: 1rem; align-items: baseline; padding: .8rem .25rem; border-bottom: 1px solid var(--wm-line); transition: background-color .2s ease; }
.wm-rk__slide .wm-rk__a:first-child { border-top: 2px solid var(--wm-ink); }
.wm-rk__a:hover { background: var(--wm-page); }
.wm-rk__n { font-size: 1.25rem; font-weight: 900; font-style: italic; color: var(--wm-navy); white-space: nowrap; }
.wm-rk__t { font-weight: 800; white-space: nowrap; }
.wm-rk__race { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-rk__rec { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wm-rk__pt { font-weight: 900; font-style: italic; white-space: nowrap; }
.wm-pager { display: flex; align-items: center; gap: .25rem; margin-top: 1rem; }
.wm-pager .wm-arw { width: 4.5rem; }
.wm-pager__n { font-weight: 900; font-style: italic; min-width: 3.5rem; text-align: center; }

/* 우승자 카드 — 손님 화면(riwc) 그대로 5장 : 사진 + 순위·코스·이름·기록 */
.wm-wc__vp { width: 100%; }
.wm-wc { display: none; background: var(--wm-page); }
.wm-wc.is-on { display: grid; grid-template-columns: 11rem 1fr; }
.wm-wc__ph { position: relative; background: var(--wm-grey); overflow: hidden; min-height: 14rem; }
.wm-wc__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wm-wc__b { padding: 1.5rem 1.75rem; min-width: 0; }
.wm-wc__top { display: flex; align-items: center; gap: .6rem; font-size: .8125rem; font-weight: 700; }
.wm-wc__top img { width: 1.6rem; height: auto; }
.wm-wc__race { font-size: 1.375rem; line-height: 1.25; font-weight: 900; font-style: italic; margin: .6rem 0 .2rem; }
.wm-wc__crown { font-size: .8125rem; }
.wm-wc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; margin-top: 1.1rem; }
.wm-wc__k { display: block; font-size: .75rem; font-weight: 800; font-style: italic; }
.wm-wc__v { display: block; font-size: 1.0625rem; font-weight: 900; white-space: nowrap; }
.wm-wc__v--rec { font-size: 1.625rem; font-style: italic; color: var(--wm-navy); line-height: 1.1; }
.wm-wc__more { display: inline-flex; margin-top: 1rem; font-weight: 800; font-style: italic; text-decoration: underline; }

/* 코스 묶음 */
.wm-cg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 100%; }
.wm-cc { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--wm-ink2); color: #f0f0f3; isolation: isolate; }
.wm-cc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wm-cc::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(20,20,20,.92) 8%, rgba(0,0,0,0) 70%); }
.wm-cc::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--wm-smoke); opacity: .85; mix-blend-mode: soft-light; pointer-events: none; }
.wm-cc__b { position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: .9rem; }
.wm-cc__t { display: block; font-size: 1rem; line-height: 1.3; font-weight: 900; font-style: italic; color: #f0f0f3; }
.wm-cc__s { display: block; font-size: .75rem; margin-top: .25rem; color: #f0f0f3; }

/* 크루 · 팀 이름 — 상자 대신 아래 줄 (v3 2px 상자 10개) */
.wm-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; width: 100%; border-top: 2px solid var(--wm-ink); }
.wm-name { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 3rem; padding: .75rem .25rem; border-bottom: 1px solid var(--wm-line); font-weight: 800; transition: background-color .2s ease; }
.wm-name::after { content: "›"; font-weight: 900; }
.wm-name:hover { background: var(--wm-page); }
.wm-team { margin-top: 2.75rem; width: 100%; }
.wm-team .wm-h3 { margin-bottom: .5rem; }

/* 선수 인터뷰 = WMM «ELITE SERIES» */
.wm-iv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.wm-iv__c { position: relative; background: var(--wm-nav2); aspect-ratio: 4 / 4.2; overflow: hidden; display: block; }
.wm-iv__c img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 92%; width: auto; max-width: none; }
.wm-iv__b { position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.wm-iv__who { background: var(--wm-navy); color: #fff; transform: skew(-16deg); padding: .4rem .9rem; font-size: 1.375rem; font-weight: 900; font-style: italic; }
.wm-iv__who > span, .wm-iv__lab > span { display: inline-block; transform: skew(16deg); }
.wm-iv__lab { background: #fff; transform: skew(-16deg); padding: .25rem .7rem; font-size: .875rem; font-weight: 800; font-style: italic; }
.wm-iv__cr { position: absolute; right: 0; top: 0; z-index: 2; font-size: .6875rem; background: rgba(255,255,255,.85); padding: .15rem .45rem; }

/* 회전 배너 = WMM 카드 넘김 (사진 위 · 글 아래) */
.wm-rc { flex: 0 0 calc((100% - 6px) / 4); scroll-snap-align: start; background: var(--wm-page); display: flex; flex-direction: column; transition: background-color .2s ease; }
.wm-rc:hover { background: var(--wm-nav2); }
.wm-rc__f { aspect-ratio: 3 / 2; overflow: hidden; position: relative; background: var(--wm-grey); }
.wm-rc__f img { width: 100%; height: 100%; object-fit: cover; }
.wm-rc__none { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; color: var(--wm-ink); }
.wm-rc__none b { font-size: 3rem; line-height: 1; font-weight: 900; font-style: italic; }
.wm-rc__none svg { width: 2rem; height: 2rem; margin-bottom: .5rem; }
.wm-rc__b { padding: 1.1rem 1.1rem 1.4rem; display: flex; flex-direction: column; gap: .45rem; }
.wm-rc__d { font-size: .875rem; font-weight: 800; }
.wm-rc__d i { font-style: italic; font-weight: 900; margin-left: .35rem; }
.wm-rc__t { font-size: 1.125rem; line-height: 1.3; font-weight: 900; font-style: italic; }
.wm-rc__s { font-size: .8125rem; }
.wm-rot__nav { display: flex; align-items: center; gap: .25rem; }
.wm-rot__pb { width: 2.75rem; height: 2.75rem; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; }
.wm-rot__pb svg { width: 1.25rem; height: 1.25rem; }
.wm-rot__all { font-weight: 800; font-style: italic; text-decoration: underline; margin-left: .75rem; }

/* 협업 문의 — 상자 줄이고 바탕으로 가른다 */
.wm-lead { background: var(--wm-page); }
.wm-lead__ch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-bottom: 2px; }
.wm-lead__c { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1.25rem; border: 0; background: var(--wm-chip); transition: background-color .2s ease, color .2s ease; }
.wm-lead__c:hover { background: var(--wm-nav2); }
.wm-lead__c svg { width: 2rem; height: 2rem; flex: none; }
.wm-lead__c b { display: block; font-size: 1.125rem; font-weight: 900; font-style: italic; }
.wm-lead__c small { display: block; font-size: .875rem; font-weight: 600; margin-top: .15rem; }
.wm-lead__c[aria-pressed="true"] { background: var(--wm-navy); color: #fff; }
.wm-lead__f { display: block; background: #fff; padding: 2.25rem; }
/* 🔴 갈래 여닫기 = leads.php 의 lead JS 가 form.hidden 을 바꾼다. display 를 준 규칙이 hidden 을 이기지 못하게 */
#ri-a-ld [hidden], #ri-a-ld[hidden] { display: none !important; }
.wm-lead__f .ri-a-ld__t, .wm-lead__f .ri-a-ld__t2 { font-size: 1.5rem; font-weight: 900; font-style: italic; }
.wm-lead__f .ri-a-ld__d, .wm-lead__f .ri-a-ld__d2 { margin: .4rem 0 1.25rem; }
.wm-lead__f .ri-a-ld__s1, .wm-lead__f .ri-a-ld__s2gr { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.wm-lead__f input[type=text], .wm-lead__f input[type=email], .wm-lead__f input[type=url], .wm-lead__f input[type=date], .wm-lead__f input[type=tel], .wm-lead__f select, .wm-lead__f textarea,
.wm-foot-mail input[type=email], .wm-foot-mail select, .wm-dlg input[type=email], .wm-dlg select {
  width: 100%; min-height: 3.25rem; padding: .75rem 1rem; border: .125rem solid var(--wm-field); background: #fff; font: inherit; font-size: 1rem; color: var(--wm-ink); border-radius: 0; }
.wm-lead__f textarea { grid-column: 1 / -1; min-height: 6rem; }
.wm-lead__f input:focus, .wm-lead__f select:focus, .wm-lead__f textarea:focus, .wm-foot-mail input:focus, .wm-foot-mail select:focus, .wm-dlg input:focus, .wm-dlg select:focus { outline: none; border-color: var(--wm-navy); box-shadow: 0 0 0 2px var(--wm-navy); }
.wm-lead__f .ri-a-ld__ag, .wm-foot-mail .ri-check, .wm-dlg .ri-check { display: flex; gap: .75rem; align-items: flex-start; margin: 1.25rem 0; font-size: .875rem; }
.wm-lead__f .ri-a-ld__ag input, .wm-foot-mail .ri-check input, .wm-dlg .ri-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--wm-navy); margin-top: .1rem; flex: none; }
.wm-lead__f .ri-a-ld__ag small, .wm-foot-mail .ri-check small, .wm-dlg .ri-check small { display: block; margin-top: .25rem; font-size: .8125rem; font-weight: 500; }
.wm-lead__f .ri-a-ld__ag a { text-decoration: underline; }
.wm-lead__f .ri-a-ld__hp, .wm-foot-mail .ri-hp, .wm-dlg .ri-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }   /* 꿀단지 — 드러나면 사람이 채워 «거짓 성공»이 난다(leads.php 222) */
.wm-lead__f .ri-a-ld__go, .wm-lead__f .ri-a-ld__go2, .wm-foot-mail button[type=submit], .wm-dlg button[type=submit] {
  display: inline-flex; align-items: center; background: var(--wm-navy); color: #fff; border: .125rem solid var(--wm-navy-bd); padding: 1rem 2rem; font-size: 1rem; font-weight: 800; font-style: italic; transition: transform .2s ease; }
.wm-lead__f .ri-a-ld__go:hover, .wm-foot-mail button[type=submit]:hover { transform: translateY(-.2rem); }
.wm-lead__f .ri-a-ld__s2 { margin-top: 2rem; padding-top: 2rem; border-top: 2px solid var(--wm-ink); }
.wm-lead__f [hidden] { display: none !important; }
/* 신뢰 숫자 — 숫자 띠와 같은 꼴 하나 */
.wm-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; text-align: center; }
.wm-trust__i { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem .5rem; }
.wm-trust b { font-size: 3.25rem; line-height: 1; font-weight: 900; font-style: italic; color: var(--wm-navy); }
.wm-trust__i span { font-size: .875rem; font-weight: 700; }
.wm-trust__p, .wm-own { margin-top: 1.5rem; font-size: .9375rem; max-width: 70ch; }
.wm-trust__p b, .wm-own b { font-weight: 800; }
.wm-own a { text-decoration: underline; }

/* 마지막 CTA = WMM «RUNNER PORTAL» */
.wm-cta { text-align: center; padding: 5rem var(--wm-gx); display: flex; flex-direction: column; align-items: center; }
.wm-cta .wm-eb { align-self: center; }
.wm-cta__p { max-width: 48rem; }
.wm-cta__p a { text-decoration: underline; font-weight: 800; }
.wm-cta .wm-btns { margin-top: 2rem; justify-content: center; }

/* ═══ 발 (WMM footer : #ebf2f5) ═══════════════════════════════════ */
.wm-foot { background: var(--wm-nav2); }
/* 메일 알림 띠 — WMM 에 없는 남색 덩어리라 발과 같은 연한 바탕으로 (v3 : CTA 바로 뒤 남색 332px) */
.wm-foot-mail { padding: 3.5rem var(--wm-gx) 3rem; border-bottom: 1px solid var(--wm-silver); display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: start; }
.wm-foot-mail p { margin-top: .75rem; }
.wm-foot-mail .ri-mailform__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: .5rem; align-items: end; }
.wm-foot-mail label, .wm-dlg label { display: block; font-size: .8125rem; font-weight: 800; margin-bottom: .3rem; }
.wm-foot-mail button[type=submit] { min-height: 3.25rem; }
.wm-foot-mail a { text-decoration: underline; }
.wm-foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 4rem var(--wm-gx) 3rem; }
.wm-foot__brand { max-width: 40rem; }
.wm-foot__brand p { margin-top: .75rem; font-size: .9375rem; }
.wm-foot__soc { display: flex; gap: 2rem; align-items: center; justify-content: flex-end; }
.wm-foot__soc a { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
.wm-foot__soc svg { width: 2.25rem; height: 2.25rem; }
.wm-foot__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; padding: 0 var(--wm-gx) 2.5rem; }
.wm-foot__cols h3 { font-size: .875rem; font-weight: 700; margin-bottom: .5rem; }
.wm-foot__cols a { display: block; font-size: .875rem; font-weight: 500; padding: .5rem 0; line-height: 1.2; }
.wm-foot__cols a:hover { text-decoration: underline; }
.wm-foot__help p { font-size: .875rem; padding: .3rem 0; }
.wm-foot__help a.wm-foot__tel { display: inline; padding: 0; font-weight: 900; font-style: italic; font-size: 1.25rem; }
.wm-foot__legal { margin: 0 var(--wm-gx); padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--wm-silver); font-size: .8125rem; display: flex; flex-direction: column; gap: .5rem; }
.wm-foot__legal nav { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.wm-foot__legal nav a:hover { text-decoration: underline; }
.wm-foot__legal .is-strong { font-weight: 900; }

/* 떠 있는 빠른 단추 (기존 내용 그대로) — 첫 화면을 가리지 않게 내려간 뒤에 */
.wm-fab { position: fixed; right: 1rem; bottom: 1.25rem; z-index: 70; display: flex; flex-direction: column; gap: 2px; opacity: 0; pointer-events: none; transform: translateY(1rem); transition: opacity .3s var(--wm-ease), transform .3s var(--wm-ease); }
.wm-fab.is-on { opacity: 1; pointer-events: auto; transform: none; }
.wm-fab a, .wm-fab button { width: 3.25rem; height: 3.25rem; background: var(--wm-navy); color: #fff; border: 0; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.wm-fab svg { width: 1.4rem; height: 1.4rem; }
.wm-fab a:hover, .wm-fab button:hover { background: var(--wm-ink); }
.wm-fab .wm-fab__tip { position: absolute; right: calc(100% + .5rem); white-space: nowrap; background: var(--wm-ink); color: #fff; font-size: .8125rem; font-weight: 800; padding: .35rem .6rem; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.wm-fab a:hover .wm-fab__tip, .wm-fab button:hover .wm-fab__tip, .wm-fab a:focus-visible .wm-fab__tip, .wm-fab button:focus-visible .wm-fab__tip { opacity: 1; }

/* 폰 아래 메뉴 (기존 내용) */
.wm-bn { display: none; }

/* 모달 · 시트 = <dialog> (초점 가두기 · Esc · 배경 inert 가 기본) */
.wm-dlg { border: 0; padding: 0; width: min(36rem, calc(100% - 2rem)); max-height: 90vh; background: #fff; color: var(--wm-ink); font-family: var(--wm-f); }
.wm-dlg::backdrop { background: rgba(0,0,30,.6); }
.wm-dlg__in { padding: 2rem; position: relative; }
.wm-dlg__x { position: absolute; right: 1rem; top: 1rem; width: 2.75rem; height: 2.75rem; border: 2px solid var(--wm-ink); background: #fff; font-size: 1.25rem; font-weight: 900; }
.wm-dlg .wm-names { margin-top: 1rem; }
.wm-dlg--nav ul li a { display: flex; align-items: center; gap: .5rem; padding: .85rem .25rem; border-bottom: 1px solid var(--wm-line); font-weight: 800; }


/* 순차 등장 — JS 가 있을 때만 숨긴다(.wm-js). 첫 화면은 빼고. 아래에서 위로 한 방향.
   🔴 v3 은 CSS 가 처음부터 숨겨 JS 가 늦거나 죽으면 첫 화면 제목·단추가 안 보였다 */
.wm-js .wm-rv:not(.is-in) { opacity: 0; transform: translateY(1.5rem); }
.wm-rv { transition: opacity .6s var(--wm-ease), transform .6s var(--wm-ease); transition-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
  .wm-js .wm-rv:not(.is-in) { opacity: 1; transform: none; }
  .wm *, .wm *::before, .wm *::after { transition: none !important; animation: none !important; }
  .wm-track { scroll-behavior: auto; }
}

/* ═══ 1279 이하 — 반 칸 안의 랭킹 5열이 비좁다 ═══ */
@media (max-width: 1279px) {
  .wm-rk__a { grid-template-columns: 3.25rem 1fr auto auto; gap: .6rem; }
  .wm-rk__race { display: none; }
  .wm-wc.is-on { grid-template-columns: 9rem 1fr; }
}
/* ═══ 1023 이하 — 주 메뉴를 폰 방식으로 (v3 : 768~1000px 에서 뒤쪽 메뉴가 숨은 채 잘렸다) ═══ */
@media (max-width: 1023px) {
  .wm-nav { display: none; }
  .wm-menu-btn { display: inline-flex; }
  .wm-mnv { display: block; background: var(--wm-nav1); padding: .5rem var(--wm-gx) .75rem; }
  .wm-mnv form { display: flex; border: .125rem solid var(--wm-ink); background: #fff; }
  .wm-mnv input { flex: 1; border: 0; padding: .75rem .9rem; font: inherit; min-width: 0; background: transparent; }
  .wm-mnv__scope { border: 0; border-right: 1px solid var(--wm-line); background: var(--wm-chip); padding: 0 .8rem; font-weight: 800; font-style: italic; }
  .wm-mnv button[type=submit] { border: 0; background: var(--wm-navy); color: #fff; padding: 0 1rem; min-width: 2.75rem; }
  .wm-mnv ul { display: flex; gap: 1.25rem; margin-top: .6rem; overflow-x: auto; scrollbar-width: none; }
  .wm-mnv ul::-webkit-scrollbar { display: none; }
  .wm-mnv li { flex: none; }
  .wm-mnv li a { display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: .75rem; font-weight: 800; padding: .3rem 0; min-width: 2.75rem; }
  .wm-mnv li svg { width: 1.375rem; height: 1.375rem; }
}
/* ═══ 991 이하 (WMM 태블릿) ═══ */
@media (max-width: 991px) {
  .wm-h2 { font-size: 2.5rem; }
  .wm-split, .wm-split--rev { grid-template-columns: 1fr; }
  /* WMM 폰 순서 : 글 → 사진 (v3 은 사진이 먼저) */
  .wm-split__c, .wm-split--rev .wm-split__c { order: 1; padding: 0; }
  .wm-split__img { order: 2; position: relative; top: auto; margin-top: 2.5rem; aspect-ratio: 5 / 3; }
  .wm-split__grid { aspect-ratio: auto; overflow: visible; background: none; margin-top: 2rem; }
  .wm-find__pics { grid-template-columns: repeat(2, 1fr); }
  .wm-nc { flex-basis: calc((100% - 4px) / 3); }
  .wm-rc { flex-basis: calc((100% - 2px) / 2.2); }
  .wm-lead__ch { grid-template-columns: repeat(2, 1fr); }
  .wm-foot-mail { grid-template-columns: 1fr; }
  .wm-foot__cols { grid-template-columns: repeat(3, 1fr); }
  .wm-hero__stat { gap: 1.5rem; }
  .wm-hero__stat b { font-size: 2.75rem; }
  .wm-hero__body { max-width: 70%; }
}
/* ═══ 767 이하 (WMM 폰 가로 · padding-global 3.5% · section 3rem) ═══ */
@media (max-width: 767px) {
  .wm { --wm-gx: 3.5%; --wm-sy: 3rem; }
  html { scroll-padding-bottom: calc(62px + 1rem); }
  .wm-h1 { font-size: 11vw; }
  .wm-h3 { font-size: 2rem; }
  .wm-today__in { height: 3rem; justify-content: flex-start; }
  .wm-today__nb { display: none; }
  .wm-brand__in { height: 3.75rem; gap: .5rem; }
  .wm-brand__tools { gap: .25rem; }
  .wm-brand__tools .wm-brand__login { display: none; }
  .wm-hero { padding-top: 1rem; }
  .wm-hero__in { height: auto; min-height: 26rem; display: flex; flex-direction: column; justify-content: flex-end; }
  .wm-hero__in::after { background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.15) 100%); }
  .wm-hero__body { position: relative; left: auto; top: auto; translate: none; max-width: none; padding: 2rem 1.25rem 1rem; }
  .wm-hero__p { font-size: 1rem; }
  .wm-hero__stat { position: relative; right: auto; bottom: auto; padding: 0 1.25rem 3rem; gap: 1.25rem; }
  .wm-hero__stat b { font-size: 2.25rem; }
  .wm-hero__pb { left: 1.25rem; bottom: .5rem; }
  .wm-sec__hd { flex-direction: column; align-items: flex-start; }
  .wm-news .wm-arws { display: none; }       /* WMM 은 폰에서 화살표를 숨긴다 (hide-mobile-portrait) */
  .wm-news .wm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--wm-gx)); padding: .1rem 0 .3rem .4rem; }
  .wm-news .wm-tabs::-webkit-scrollbar { display: none; }
  .wm-news .wm-chip { flex: none; }
  .wm-nc { flex-basis: calc((100% - 2px) / 2); }
  .wm-nc__t { font-size: 1rem; -webkit-line-clamp: 3; }
  .wm-nc::before { background: linear-gradient(to top, rgba(20,20,20,.95) 0%, rgba(20,20,20,.88) 55%, rgba(20,20,20,.55) 80%, rgba(20,20,20,.2) 100%); }   /* 폰 2장 줄 : 제목 대비 2.6 → 4.5 이상 */
  .wm-logo { font-size: 16px; }
  .wm-logo svg { width: 26px; height: 26px; }
  .wm-nc__b { left: .85rem; right: .85rem; bottom: .85rem; }
  .wm-dots { max-width: calc(100% - 12rem); }
  .wm-wm { font-size: 3.25rem; right: auto; left: var(--wm-gx); bottom: -.5rem; }
  .wm-nums { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .wm-nums b { font-size: 2.5rem; }
  .wm-find__pics { grid-template-columns: 1fr; }
  .wm-filt__g { grid-template-columns: 1fr; gap: .5rem; }
  .wm-find__add { margin-left: 0; }
  .wm-row a, .wm-row a.no-thumb { grid-template-columns: 1fr auto; gap: .3rem .75rem; padding: .7rem .25rem; }
  .wm-row__d { grid-column: 1 / -1; font-size: .9375rem; }
  .wm-row__f { display: none; }
  .wm-row__t { font-size: 1rem; }
  .wm-rk__n { font-size: 1.0625rem; }
  .wm-wc.is-on { grid-template-columns: 1fr; }
  .wm-wc__ph { min-height: 0; aspect-ratio: 16 / 10; }
  .wm-cg { grid-template-columns: repeat(2, 1fr); }
  .wm-names { grid-template-columns: 1fr; }
  .wm-iv { grid-template-columns: 1fr; }
  .wm-iv__c { aspect-ratio: 4 / 3.6; }
  .wm-rc { flex-basis: 78%; }
  .wm-rot__nav { flex-wrap: wrap; }
  .wm-lead__ch { grid-template-columns: 1fr; }
  .wm-lead__f { padding: 1.25rem; }
  .wm-lead__f .ri-a-ld__s1, .wm-lead__f .ri-a-ld__s2gr { grid-template-columns: 1fr; }
  .wm-trust { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .wm-trust b { font-size: 2.5rem; }
  .wm-foot-mail .ri-mailform__row { grid-template-columns: 1fr; }
  .wm-foot__cols { grid-template-columns: repeat(2, 1fr); }
  .wm-foot__soc { justify-content: flex-start; }
  .wm-fab { display: none; }
  .wm-bn { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #fff; border-top: 2px solid var(--wm-ink); padding-bottom: env(safe-area-inset-bottom); }
  .wm-bn a, .wm-bn button { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem 0 .6rem; font-size: .6875rem; font-weight: 800; background: none; border: 0; min-height: 3.5rem; }
  .wm-bn svg { width: 1.375rem; height: 1.375rem; }
  .wm-bn a[aria-current="page"] { color: var(--wm-navy); }
  .wm-foot { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 479px) {
  .wm { --wm-gx: 1rem; }
  .wm-h2 { font-size: 8vw; }
  .wm-h3 { font-size: 7vw; }
  .wm-split__c > .wm-h2 { max-width: none; }
}

/* ── 라이브 연결 (10-05) ─────────────────────────────────────────────
   · 메일 알림 안내칸 : B app.js 가 [data-ri-alert-msg] 의 className 을 'ri-mailform__msg is-ok|is-ng' 로 «통째로» 덮어쓴다 → 속성·그 이름으로만 꾸민다
   · .ri-a-ch : polish(꺾쇠 svg)가 혹시 돌아도 크기가 터지지 않게 (평소엔 새 홈에서 polish 를 뺀다) */
.wm [data-ri-alert-msg]:not(:empty), .wm .ri-a-ld__msg:not(:empty) { margin-top: .75rem; font-size: .875rem; font-weight: 700; color: var(--wm-ink); }
.wm .ri-mailform__msg.is-ok, .wm .ri-a-ld__msg:not(.is-err):not(:empty) { border-left: 3px solid var(--wm-navy); padding-left: .6rem; }
.wm .ri-mailform__msg.is-ng, .wm .ri-a-ld__msg.is-err { border-left: 3px solid var(--wm-hot); padding-left: .6rem; }   /* 전 #c8102e(기준 사이트에 없는 값) → 아디다스는 세일·오류에 같은 빨강 */
.wm svg.ri-a-ch { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; margin-left: .2em; flex: none; }
/* 5칸 줄의 빈자리 = «전체 보기» 칸 (사장님 10-05 「5개 나오게」 · 글이 4장인 칸) */
.wm-nc--all { background: var(--wm-navy); }
.wm-nc--all::before, .wm-nc--all::after { display: none; }
.wm-nc--all .wm-nc__b { top: 1.1rem; justify-content: space-between; }
.wm-nc--all .wm-nc__t { color: #fff; font-size: 1.5rem; line-height: 1.15; }
.wm-nc--all .wm-nc__more { color: #fff; }
.wm-nc--all .wm-nc__more svg { width: 2.5rem; height: 2.5rem; transition: transform .2s ease; }
.wm-nc--all:hover .wm-nc__more svg { transform: translateX(.35rem); }

/* D-day — 10-05 밤 한 번 숨겼다가 사장님 「접수마감 옆에 아까처럼 D-DAY」로 되살림. 접수중=RUN · 마감임박=FAST 는 PHP 가 글자로 바꿔 보낸다 */

/* 10-05 밤 C 검수에서 나온 둘 (C → A 21:40)
   ① 발 「대회 접수를 진행합니다.」 뒤 둘째 span 이 띄어쓰기 없이 붙어 «진행합니다.여기» 로 보였다 — 옛 A CSS 가 이 span 을 block 으로 내리던 것을 새 지면이 걷었기 때문. 줄을 바꿔 되살린다
   ② 옛 A CSS 를 걷은 지면에 #ri-main 속 배경 장식(.ri-a-bg — 깃발·점선 그림)이 남으면 «화면 폭 그림»으로 드러난다(C 1440px 실측) — 새 지면(body.wm)에선 숨긴다 */
.wm .ri-a-agency-sub { display: block; margin-top: .25rem; }
.wm .ri-a-bg { display: none !important; }

/* ═══ 10-05 밤 사장님 「메인의 기록 레이아웃이 깨졌어」
   기록 표 1위 칸의 왕관 svg(.ri-i.rec-pt__crown)에 크기 규칙이 없어 브라우저 기본 300×150 으로 커졌다 → 순위 칸 493px · 줄 높이 186px.
   새 홈은 옛 app.css(svg.ri-i 1em)를 걷었고, 왕관 그림 묶음(#ri-i-crown)도 홈에 없어 빈 칸만 남는다 → 왕관 자리는 숨기고, svg.ri-i 는 1em 으로.
   :where() = 특이도 0 — 다른 아이콘 크기 규칙(.wm-nc__more svg 등)을 이기지 않게 ═══ */
:where(.wm svg.ri-i) { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
.wm-tbl .rec-pt__crownwrap { display: none; }

/* ═══ 10-05 밤 사장님 「메인의 코스·크루 등은 블랙 오버레이 하지 마 — 흐리게 보이는 게 퀄리티 떨어지는 것 같아」
   WMM 그대로 옮긴 «사진 위 검은 그라데이션 + soft-light 연회색 막»을 걷는다 → 사진은 원본 그대로 선명하게.
   막 없이 사진 위 흰 글자는 대비가 안 나온다(포스터 사진 최저 1.47:1) → 글을 사진 «아래» 흰 바탕 검정 글자로 내린다.
   대상 : 한눈에 보기 탭 카드(.wm-nc — 속보·코스·크루·장비·런트립…) · 코스 묶음(.wm-cc) · 반반 구역 사진 막(.wm-soft)
   그대로 둔 것 : 첫 화면 큰 사진(.wm-hero) — 글이 사진 위에 있어 막을 걷으면 글이 안 읽힌다(사장님 판단 대기)
   되돌리기 = 이 덩어리를 지운다 ═══ */
.wm-nc::before, .wm-nc::after, .wm-cc::before, .wm-cc::after, .wm-soft::after { display: none; }
.wm-track { gap: 1rem; }
.wm-nc { flex-basis: calc((100% - 4rem) / 5); aspect-ratio: auto; background: transparent; color: var(--wm-ink); display: flex; flex-direction: column; overflow: visible; }
.wm-nc img { position: static; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--wm-page); }
.wm-nc__b { position: static; padding: .85rem 0 .25rem; }
.wm-nc__t, .wm-nc__m { color: var(--wm-ink); }
.wm-nc__more { color: var(--wm-navy); }
.wm-nc__t { transition: color .2s ease; }
.wm-nc:hover .wm-nc__t { color: var(--wm-navy); }
.wm-nc:focus-visible { outline: 3px solid var(--wm-navy); outline-offset: 3px; box-shadow: none; }
/* «전체 보기» 칸(남색) — 사진 칸과 같은 높이(줄 맞춤 stretch)로, 글은 칸 안에 */
.wm-nc--all { background: var(--wm-navy); color: #fff; }
.wm-nc--all .wm-nc__b { flex: 1; padding: 1.1rem; }
.wm-nc--all .wm-nc__t, .wm-nc--all .wm-nc__more { color: #fff; }
.wm-nc--all:hover .wm-nc__t { color: #fff; }
/* 코스 묶음 */
.wm-cg { gap: 1.75rem 1rem; }
.wm-cc { aspect-ratio: auto; background: transparent; color: var(--wm-ink); display: flex; flex-direction: column; overflow: visible; }
.wm-cc img { position: static; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--wm-page); }
.wm-cc__b { position: static; padding: .75rem 0 0; }
.wm-cc__t, .wm-cc__s { color: var(--wm-ink); }
.wm-cc__t { transition: color .2s ease; }
.wm-cc:hover .wm-cc__t { color: var(--wm-navy); }
.wm-cc:focus-visible { outline: 3px solid var(--wm-navy); outline-offset: 3px; box-shadow: none; }
@media (max-width: 991px) { .wm-nc { flex-basis: calc((100% - 2rem) / 3); } }
@media (max-width: 767px) {
  .wm-track { gap: .75rem; }
  .wm-nc { flex-basis: calc((100% - .75rem) / 2); }
  .wm-nc__b { padding-top: .65rem; }
  .wm-cg { gap: 1.25rem .75rem; }
}

/* ═══ 10-05 밤 첫 화면 큰 사진 — 사장님 「이거도 오버레이 지워」 다음 「메인 슬라이더에 타이틀 글자들이 전부 날라갔어 복구해」
   22:45 판은 막을 걷으면서 글·단추·숫자를 사진 «아래»로 내렸다 → 첫 화면엔 사진만 보여 «제목이 날아갔다»가 됐다.
   지금 판 : ① 사진 위 막 세 겹(회색 multiply · soft-light · 글 뒤 검은 그라데이션)은 걷은 채 — 사진 선명
            ② 글·단추·숫자는 원래 자리(사진 위 왼쪽 가운데 · 숫자 오른쪽 아래 · 폰은 사진 아래쪽)로 되돌림
            ③ 막 없이 흰 글자가 읽히도록 «글 상자 뒤에만» 단색 띠 — 제목 남색 · 설명·링크·숫자 검정. 사진 전체를 덮지 않는다
   되돌리기 = 이 덩어리를 지운다(그러면 옛 막 세 겹 판으로 돌아간다) ═══ */
.wm-hero__sl::before, .wm-hero__sl::after, .wm-hero__in::after { display: none; }
.wm-hero .wm-h1 { width: fit-content; background: var(--wm-navy); color: #fff; padding: .06em .22em .1em; }
.wm-hero__p { width: fit-content; background: #000; color: #fff; padding: .45rem .7rem; }
.wm-hero .wm-btn--link { background: #000; padding: .55rem .85rem; }
.wm-hero__stat { gap: .5rem; }
.wm-hero__stat a { background: #000; padding: .65rem .85rem .75rem; }
.wm-hero__pb { padding: 0 .5rem; background: rgba(0,0,0,.55); }
@media (max-width: 767px) {
  .wm-hero__p { padding: .4rem .6rem; }
  .wm-hero__stat { gap: .4rem; }
  .wm-hero__stat a { padding: .5rem .65rem .6rem; }
  /* 폰은 사진 폭이 좁아 아래 왼쪽 넘김 막대가 오른쪽 아래 사진 출처(.wm-cr)와 겹친다 → 사진 왼쪽 «위»로 */
  .wm-hero__pb { top: .5rem; bottom: auto; left: .5rem; }
}

/* ═══ 10-05 밤 사장님 「(협업 문의 아래 숫자 밑) 좌측에만 글자들이 있으니 균일하게 좌우에 글 내용이 있게 해」
   설명 두 단락(.wm-trust__p 대행 안내 · .wm-own 자료 출처)이 70ch 로 왼쪽에만 쌓여 오른쪽 절반이 비었다
   → 768 이상에서 두 단락을 좌우 반씩 나란히(위 숫자 4칸의 왼쪽 둘·오른쪽 둘 아래). 폰은 위아래 그대로.
   PHP 가 두 p 를 공백 없이 붙여 내보내므로 inline-block 사이 틈이 생기지 않는다(wmm-home.php 의 '</p><p class="wm-own"') ═══ */
@media (min-width: 768px) {
  .wm-lead > .wm-trust__p, .wm-lead > .wm-own { display: inline-block; vertical-align: top; width: calc(50% - 1.6rem); max-width: none; }
  .wm-lead > .wm-trust__p { margin-right: 3rem; }
}

/* ═══ 10-05 밤 사장님 「속보 전체보기 배지카드 배경」 — 「뛰는 이미지 + 오버레이」 → 「이미지보다 배경패턴, 뛰는 런닝 아이콘」
   → 마지막 「캐릭터 패턴 대신 큰 런닝 캐릭터 크게 한 개만」 : 남색 바탕 + 달리는 사람 «하나»를 칸 높이의 약 70% 로 크게(흰색 22%).
   자리 = 가운데보다 조금 오른쪽·아래 — 왼쪽 위 제목 「속보 전체 보기」, 왼쪽 아래 화살표와 겹치지 않게. 이 칸에만(다른 «전체 보기» 칸은 남색 그대로).
   그림 = Material Icons «directions_run»(Apache 2.0 — 상업 사용 가능 · 출처 표기 필요 없음). viewBox 를 사람 둘레로 잘라 칸에 꽉 차게.
   마우스를 올리면 사람이 앞(오른쪽)으로 조금 나아간다(늘 움직이는 무한 애니메이션은 쓰지 않는다 — 깜빡임·배터리)
   🔴 데이터 주소 안의 '#'은 %23 으로 — 그대로 두면 «조각 표시»로 읽혀 SVG 가 잘리고 그림이 안 나온다(10-05 실제로 걸림) ═══ */
#wm-rht-news .wm-nc--all { background-color: var(--wm-navy); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.5 1.2 17 22.3'%3E%3Cpath fill='%23fff' fill-opacity='.22' d='M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: auto 70%; background-position: 72% 62%; transition: background-position .5s ease; }
#wm-rht-news .wm-nc--all:hover { background-position: 80% 62%; }
@media (prefers-reduced-motion: reduce) { #wm-rht-news .wm-nc--all { transition: none; } }

/* ═══ 10-06 사장님 「모바일도 변경된 리뉴얼 디자인 색으로 하고 수정해 — 넘 검정색이야, 포인트 색 줄 거 있으면 판단해서 포인트 색 주고」
   원칙 : 검정(#000)은 «글자»에만. 면·선·단추 테두리·아이콘의 검정은 새 디자인 주색 남색(#000075 · --wm-navy)으로,
          «지금 서둘러라» 자리(마감 임박)에만 빨강(--wm-hot). 같은 부품이라 PC 도 함께 바뀐다(지면마다 색이 달라지면 안 된다).
   폰 실측(390 · 홈·대회일정·뉴스)에서 검정 면/굵은 선으로 잡힌 것 : 첫 화면 설명 띠·「찾는 대회가 없나요?」 띠·숫자 상자 ·
   머리 검색칸 테두리 · 보조 단추 테두리 · 목록/이름/랭킹 윗줄 · 아래 메뉴 윗줄 · 언어 펼침 테두리 — 아래가 그 전부다.
   되돌리기 = 이 덩어리 삭제 ═══ */
/* ① 첫 화면 — 사진 위 글은 «흰 띠»로(사진 선명 · 검정 덩어리 0). 제목만 남색 띠(그대로) */
.wm-hero__p { background: #fff; color: #000; }
.wm .wm-hero .wm-btn--link { background: #fff; color: var(--wm-navy) !important; border: 0; }
.wm-hero__stat a { background: #fff; color: #000; }
.wm-hero__stat b { color: var(--wm-navy); }
.wm-hero__stat span { border-top-color: var(--wm-navy); }
.wm-hero__stat a.is-hot b { color: var(--wm-hot); }            /* 포인트 : 마감 임박 숫자만 빨강 */
.wm-hero__stat a.is-hot span { color: #fff; }                 /* 빨강 비스듬 칩 위 흰 글자(그대로) */
.wm .wm-hero :focus-visible { outline-color: var(--wm-navy); box-shadow: none; }
/* ② 폰 머리 — 검색칸 남색 테두리 · 「대회」 칩 남색 · 바로가기 아이콘 남색(글자는 검정) */
.wm-mnv form { border-color: var(--wm-navy); }
.wm-mnv__scope { background: var(--wm-navy); color: #fff; border-right: 0; }
.wm-mnv li svg { color: var(--wm-navy); }
/* ③ 폰 아래 메뉴 — 윗줄·아이콘 남색 · 지금 지면 = 남색 굵게 + 위 3px 남색 막대 */
.wm-bn { border-top-color: var(--wm-navy); }
.wm-bn svg { color: var(--wm-navy); }
.wm-bn a[aria-current="page"] { color: var(--wm-navy); box-shadow: inset 0 3px 0 var(--wm-navy); }
/* ④ 보조 단추(테두리 단추) — 남색 테두리 + 남색 글자 */
.wm .wm-btn--line { color: var(--wm-navy) !important; border-color: var(--wm-navy); }
/* ⑤ 목록·이름·랭킹·표 머리의 2px 줄 — 남색(1px 줄 사이 선은 연회색 그대로) */
.wm-list, .wm-names { border-top-color: var(--wm-navy); }
.wm-rk__slide .wm-rk__a:first-child { border-top-color: var(--wm-navy); }
.wm-tbl thead th { border-bottom-color: var(--wm-navy); }
.wm .wm-fd .wm-fd-list { border-top-color: var(--wm-navy); }   /* 대회일정 목록 윗줄(wmm-find.css 116 보다 세게) */
/* ⑥ 언어 고르기 펼침 */
.wm-lang ul { border-color: var(--wm-navy); }
/* ⑦ 슬라이드 멈춤·진행 막대 — 반투명 검정 띠(=덮개)를 남색 단색 띠로. 폰에선 이 띠가 「국내 24 · 해외 0」 머리표를 덮어서
      본문 윗여백을 띠 높이(.5rem + 2.75rem)만큼 내린다(10-06 폰 실측) */
.wm-hero__pb { background: var(--wm-navy); }
@media (max-width: 767px) { .wm-hero__body { padding-top: 3.75rem; } }
/* ⑧ 메뉴 줄 오른쪽 「대회 등록 · 무료」(작은 테두리 단추) — 검정 테두리 → 남색(PC 메뉴 줄 · 10-06 PC 실측) */
.wm .wm-btn--sm { border-color: var(--wm-navy); color: var(--wm-navy) !important; }
/* ⑨ 나머지 검정 면·선(같은 원칙 — 10-06 grep 전수) : 넘김 점(안 고른 것) 검정 → 은색 #bbc1ca(고른 것 남색 그대로) ·
      떠 있는 단추 hover 검정 → 남색 단추 테두리색 #454581 · 그 말풍선 검정 → 남색 · 문의 안내 둘째 칸 윗줄 · 창 닫기 테두리 → 남색 */
.wm-dots button::before { background: #bbc1ca; }
.wm-dots button.is-on::before { background: var(--wm-navy); }
.wm-fab a:hover, .wm-fab button:hover { background: #454581; }
.wm-fab .wm-fab__tip { background: var(--wm-navy); }
.wm-lead__f .ri-a-ld__s2 { border-top-color: var(--wm-navy); }
.wm-dlg__x { border-color: var(--wm-navy); color: var(--wm-navy); }
/* 10-06 A — 날짜 요일·점수 «점»을 따로 마디로 뗐다(외국어 번역용 · wmm-home.php runin_wm_dow_html/pt_html). 사이 띄움은 여기서(글자 공백은 날짜 규칙이 먹는다) */
.wm-dow { margin-left: .3em; }
/* ═══ 10-06 규칙 v3.5 — 공용 부품 셋(A 것)을 모든 wm 지면에서 맞춘다(B·C 지면도 body.wm 이면 저절로)
   · 「로그인하고 의견 남기기」(avatar.php talk.css .riwc-login a = 2px 검정) → 남색 테두리·글자
   · 공감 줄 이름표(ri-a-social-css 회색 #5b6472 — B 런닝팀 상세에서 실측) → 검정(회색 글자 금지)
   · 첫 화면 사진 칸 바탕(사진 뜨기 전) 검정 → 남색 ═══ */
.wm .riwc-login a, .wm .riwc-login a:hover { border-color: var(--wm-navy); color: var(--wm-navy); }
.wm .ri-a-rc__l, .wm .ri-a-rc__t, .wm .ri-a-rc__e { color: #000; }
.wm-hero__in { background-color: var(--wm-navy); }
/* ═══ 10-06 공감 줄(A ri-a-social · 좋아요·의견·공유) «표준 꼴»을 모든 wm 지면에 — B 런닝팀 상세 대조에서 회색 아이콘·1px 윗줄 두 겹이 나왔다.
   지면 전용 CSS(.wm-rd · body.wmn-p · body.wmcr-p)가 있으면 그쪽이 이긴다(이 묶음은 .wm 하나라 특이도가 낮다). 값 = 보조 단추 꼴(v3.5) ═══ */
.wm .ri-a-rc { border-top: 0; font-family: var(--wm-f); }
.wm .ri-a-rc [hidden] { display: none; }                               /* .ri-a-rc__sum{display:flex} 가 hidden 을 이겨 빈 «얼굴+0» 줄이 보이는 것 막기 */
.wm .ri-a-rc__sum, .wm .ri-a-rc__n { color: #000; }
.wm .ri-a-rc__bar { display: flex; flex-wrap: wrap; gap: .5rem; border-top: 0; background: none; }
.wm .ri-a-rc__b { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.75rem; padding: 0 1rem; border: 2px solid var(--wm-navy); border-radius: 0; background: transparent; color: var(--wm-navy); font-size: .875rem; font-weight: 800; font-style: italic; text-decoration: none; }
.wm .ri-a-rc__b .ri-a-rc__l, .wm .ri-a-rc__b .ri-a-rc__ic { color: inherit; }
.wm .ri-a-rc__b.is-on { background: var(--wm-navy); border-color: var(--wm-navy-bd); color: #fff; }
.wm .ri-a-rc__pick { border: 2px solid var(--wm-navy); border-radius: 0; box-shadow: none; }
/* 의견 칸(#riwc-talk)이 없는 지면(런닝팀 등)에서는 「의견」 단추가 갈 곳이 없다 → 숨긴다(10-06 B 런닝팀 대조) */
.wm:not(:has(#riwc-talk)) .ri-a-rc__b[href="#riwc-talk"] { display: none; }
/* ═══ 10-06 공용 문답 부품 .wm-faq — 대회일정(wmm-find.css 45~57)에만 있던 것을 공용으로(C /inside/ 등 모든 wm 지면이 class 만 붙이면 같은 꼴).
   값은 WMM /race-draws 실측 그대로 · ⊕ 는 규칙 v3.5 «아이콘 = 남색»(옛 검정 2px 원 → 남색) ·
   마크업 : <div class="wm-faq"><details class="wm-faq__i"><summary><span class="wm-faq__q">질문</span></summary><div class="wm-faq__a">답</div></details>… ═══ */
.wm .wm-faq { margin-top: 2rem; max-width: 64rem; }
.wm .wm-faq__i { border-bottom: 1px solid var(--wm-line); }
.wm .wm-faq__i > summary { position: relative; display: block; list-style: none; cursor: pointer; padding: 1.5rem 4rem 1.5rem 0; font-size: 1.3rem; line-height: 1.5rem; font-weight: 700; }
.wm .wm-faq__i > summary::-webkit-details-marker { display: none; }
.wm .wm-faq__q { display: block; max-width: 50ch; }
.wm .wm-faq__i > summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 1.875rem; height: 1.875rem; margin-top: -.9375rem; border: 2px solid var(--wm-navy); border-radius: 50%;
  background: linear-gradient(var(--wm-navy), var(--wm-navy)) center / 50% 2px no-repeat, linear-gradient(var(--wm-navy), var(--wm-navy)) center / 2px 50% no-repeat; }
.wm .wm-faq__i[open] > summary::after { background: linear-gradient(var(--wm-navy), var(--wm-navy)) center / 50% 2px no-repeat; }
.wm .wm-faq__a { padding: 0 4rem 1.5rem 0; font-size: 1rem; line-height: 1.3; font-weight: 500; }
.wm .wm-faq__i > summary:focus-visible { outline: 3px solid var(--wm-navy); outline-offset: 2px; }
/* ═══ 10-06 한눈에 보기 탭 저절로 넘김(wmm.js «10-06 사장님 속보 5초…») — 다음 칸이 1.5초 동안 오른쪽에서 서서히 들어온다 ·
   구역 밖으로 삐지는 1.5rem 은 clip 으로 자른다(가로 스크롤 0) · 움직임 줄이기면 효과 없음 ═══ */
@keyframes wmPaneIn { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: none; } }
.wm-news { overflow-x: clip; }
.wm-news .wm-pane.is-on.wm-pane--in { animation: wmPaneIn 1.5s cubic-bezier(.215,.61,.355,1) both; }
.wm-news .wm-sec__hd .wm-news__pb { margin-left: auto; color: var(--wm-navy); flex: none; }
.wm-news .wm-sec__hd .wm-news__pb + .wm-arws { margin-left: 0; }
@media (max-width: 767px) { .wm-news .wm-sec__hd .wm-news__pb { position: absolute; right: 0; top: 0; margin: 0; } }
@media (prefers-reduced-motion: reduce) { .wm-news .wm-pane.is-on.wm-pane--in { animation: none; } .wm-news .wm-news__pb { display: none; } }
/* ═══ 10-06 부품 모음(RUNIN_WMM_PARTS) 만들다 찾은 공용 빈틈 넷 — 규칙 v3.5 «검정은 글자에만 · 아이콘은 남색»
   ① 접수예정 배지 2px 검정 테두리 → 남색 ② 접수마감 배지 꼴이 대회일정(.wm-fd) 안에만 있어 다른 지면(B·C)에선 남색(=접수중과 같은 꼴)으로 보였다 → 공용으로
   ③ 협업 문의 칸(.wm-lead__c) 아이콘 검정 → 남색 ④ 머리 도구 아이콘(검색·언어·메뉴) 검정 → 남색(로고 달리는 사람은 «기존 로고 그대로» 검정 유지) ═══ */
.wm-st--scheduled { color: var(--wm-navy); box-shadow: inset 0 0 0 2px var(--wm-navy); }
.wm .wm-st--closed { background: var(--wm-chip); color: var(--wm-ink); }
.wm-lead__c svg { color: var(--wm-navy); }
.wm-brand__tools .wm-iconbtn, .wm-brand__tools .wm-lang summary svg { color: var(--wm-navy); }
/* ═══ 10-07 폰 홈 «한 화면 4개» — A (사장님 10-07 00:2x 「모바일 한 화면에 두 개는 너무 커 — 1행에 2개 2행에 4개, 한 화면에 보이게」
   「위의 패턴대로 해서 모바일 수정해」「훈련장소 모바일 화면에 4개 나와도 충분하잖아」「수평 스크롤은 고객이 인지 못 한다」)
   본보기 = 홈 「훈련코스 · 육상트랙 175곳」(.wm-split--rev .wm-cg) 의 폰 값 그대로 — 2칸 격자 · 칸 사이 1.25rem(위아래) .75rem(좌우) ·
            사진 4:3 · 제목 1rem/1.3 900 기울임 · 밑줄 글 .75rem · 사진 아래 글 위 여백 .75rem (위 «10-05 밤 블랙 오버레이» 덩어리의 .wm-cg/.wm-cc 값)
   🔴 범위 : 폰(767 이하) «홈만»(body.home). 같은 wmm.css 를 /find/ /news/ /class/ /crew/ /teams/ 도 <link> 로 싣는다 → body.home 없이 쓰면 그 지면들이 같이 바뀐다.
            768 이상(PC·태블릿)은 한 글자도 안 바뀐다 — 아래 규칙은 전부 767 이하 @media 안에 있다.
   🔴 콘텐츠는 빼지 않는다(«업그레이드는 빼는 게 아니다») — 앞 몇 장만 보이는 칸은 같은 칸에 «전체 보기» 링크가 늘 보이는 칸뿐이다.
   🔴 규칙 파일(RUNIN_WMM_DESIGN.txt)의 «.wm-nc 1:1»·«카드 한 줄 5장»은 PC 값이다 — 폰 홈은 이 덩어리(4:3 · 2칸)가 우선. 1:1 로 «되돌리지» 말 것.
   같은 날 검토 두 벌 반영 : 외국어 바로가기 겹침 · 대회추가 4장 숨김 → 2×2 넘김 · 속보 달리는 사람 칸 살림 · 기록 표 가로 밀림 · 우승자 사진 잘림 ·
            사진 없는 카드 빈칸 · 랭킹 점수·기록 칸 폭 · 탭·랭킹 높이 출렁임 · :has() 없는 브라우저 · 320·/de/ 가로 밀림
   되돌리기 = 이 덩어리(끝의 480~767 작은 덩어리까지)를 지운다 ═══ */
@media (max-width: 767px) {
  /* ① 검색칸 밑 바로가기 8칸 — 왼쪽에 몰리고(사장님 31번 화면) 390 에선 뒤 칸이 화면 밖(가로로 밀어야 보임) → 한 줄 «같은 폭 칸» 으로 가득 채워 가운데 정렬.
        grid-auto-flow:column + grid-auto-columns 로 «칸 수 = 항목 수» (항목 수가 바뀌어도 고르게 펴진다).
        글자 크기 = (화면 폭 − 좌우 여백 2rem) ÷ 29 를 10~12px 로 묶음 — 실측 한국어 네 글자(「대회일정」)가 3.42em 이라 칸 폭(÷8)에 들어가는 최대값.
        (첫 판 2.8vw 는 «한 글자 ≈ 1em» 가정이라 360 에서 10.1px 까지 쓸데없이 작았다 → 지금 360 = 11.3px · 380 이상 = 12px 그대로) */
  body.home .wm-mnv ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; overflow: visible; }
  body.home .wm-mnv li { min-width: 0; }
  body.home .wm-mnv li a { min-width: 0; justify-content: center; text-align: center; }   /* 옛 min-width 2.75rem 은 좁은 칸에서 옆 칸을 침범한다 — 누르는 높이는 그대로 44px 이상 */
  body.home .wm-mnv li a span { white-space: nowrap; font-size: clamp(.625rem, calc((100vw - 2rem) / 29), .75rem); letter-spacing: -.01em; }
  /* 외국어 홈(body.ri-intl — /en/ /de/ /es/ /fr/ 등 여섯 곳 다 붙는다)은 한 낱말이 길다 — 한 줄 8칸이면 Laufgruppen·Classements·Équipement 등이
     옆 칸을 1~15px 덮었다(10-07 검토 실측 · 옛 가로 밀기는 안 겹쳤다) → 4칸 × 2줄. 긴 낱말은 칸 안에서 접힌다. 한국어 홈은 위 줄 그대로.
     :not(.ri-lang-ko) 대신 .ri-intl 로 거는 까닭 = ri-lang-ko 가 빠지는 날에도 한국어 글자가 작아지거나 접히지 않게 */
  body.home.ri-intl .wm-mnv ul { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: .6rem; }
  body.home.ri-intl .wm-mnv li a span { white-space: normal; font-size: .6875rem; line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere; }

  /* ② 한눈에 보기 — 가로로 미는 한 줄(2장) → 2칸 격자 두 줄(4장). 넘김 점은 가로 넘김 전용이라 폰에서 숨긴다(대회추가 칸만 예외 — 아래)
        (화살표 .wm-arws 는 위 767 규칙이 이미 숨김 · 탭 저절로 넘김의 멈춤 단추 .wm-news__pb 는 그대로 둔다). */
  body.home .wm-news .wm-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; overflow: visible; scroll-snap-type: none; }
  /* 칸에 카드가 4장보다 많으면 앞 4장만 — 그 칸 밑 「… 전체 보기」 단추(.wm-news__ft .wm-btn)가 있을 때만(:has · 없으면 다 보인다).
     코스·크루·장비·런트립·런닝팀의 5번째 = 남색 «전체 보기» 칸 → 바로 밑에 같은 주소 단추가 있어 빠지는 것이 없다.
     속보 칸과 대회추가 칸(data-wm-auto)은 여기서 빼고 아래에서 따로 다룬다. */
  body.home .wm-news .wm-pane:not(#wm-rht-news):has(.wm-news__ft .wm-btn) .wm-track:not([data-wm-auto]) > :nth-child(n+5) { display: none; }
  /* 속보 칸 = 속보 3장 + 「속보 전체 보기」 달리는 사람 칸(규칙 파일 4장 ③ «사장님 지정» 예외 — 10-05 사장님이 정한 칸이라 폰에서도 살린다).
     4번째 속보는 그 칸과 밑 단추(둘 다 /news/)로 간다. 달리는 사람 칸이 없는 날은 다른 칸과 같게 앞 4장. */
  body.home #wm-rht-news .wm-track:has(> .wm-nc--all) > .wm-nc:not(.wm-nc--all):nth-child(n+4) { display: none; }
  body.home #wm-rht-news:has(.wm-news__ft .wm-btn) .wm-track:not(:has(> .wm-nc--all)) > :nth-child(n+5) { display: none; }
  /* 대회추가 칸(data-wm-auto 4초) — 진짜 대회 8장 · «전체 보기» 칸 없음 · 밑 단추는 /find/(날짜순이라 «새로 추가된» 대회를 따로 못 찾는다).
     앞 4장만 두면 4장이 홈에서 사라진다(10-07 검토 실측 : 보성녹차·FILA RUN·빵빵런·안성맞춤) → 2×2 창이 한 칸씩 오른쪽→왼쪽으로 넘어간다
     (사장님 10-02 「4개 이상이면 우에서 좌로 슬라이딩」 — wmm.js 의 4초 자동 넘김이 그대로 돈다 · 늘 4장 · 칸 높이 2줄 고정 · 저절로 움직여 «더 있다»가 보인다).
     칸 순서는 위→아래, 왼→오(세로 두 장이 한 칸). 점은 이 칸에서만 다시 보인다(더 있다는 표시 · 원래 꼴 = 점 왼쪽 · 단추 오른쪽). */
  body.home .wm-news .wm-track[data-wm-auto] { grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-columns: calc((100% - .75rem) / 2); overflow-x: auto; scroll-snap-type: x mandatory; }
  body.home .wm-news .wm-nc img { aspect-ratio: 4 / 3; }                 /* 본보기 사진 비율(옛 폰 1:1 은 한 장이 화면 반을 먹었다) */
  /* 사진 없는 카드(장비 3·4번 · 런닝팀 2~4번 등 — 자료에 사진이 없다) : 격자에선 그 줄만 113px 로 납작해져 «깨진 줄»로 보였다 → 사진 자리에 «사진 빈칸» 회색(규칙 #f0f0f3).
     ::before 는 «10-05 밤» 덩어리에서 display:none · 그 앞 옛 규칙에선 사진 위 막(absolute)이라 position·inset·opacity·blend 를 다 되돌린다 */
  body.home .wm-news .wm-nc:not(.wm-nc--all):not(:has(> img))::before { content: ""; display: block; position: static; inset: auto; aspect-ratio: 4 / 3; background: var(--wm-grey); opacity: 1; mix-blend-mode: normal; }
  body.home .wm-news .wm-nc__b { padding: .75rem 0 0; gap: .4rem; }
  body.home .wm-news .wm-nc__t { font-size: 1rem; line-height: 1.3; }
  /* 제목 3줄 자리를 늘 잡는다 — 6.5초마다 탭이 돌 때 카드 칸 높이가 343~668px 로 출렁여 밑 내용이 300px 넘게 뛰었다(10-07 검토 실측 · 위 «사진 빈칸»과 함께 → 카드 칸 차이 19px 이하).
     같은 줄 두 카드의 날짜 줄도 나란히 선다. 제목은 원래 3줄에서 자르므로(line-clamp 3) 더 길어지는 카드는 없다.
     (날짜·장소 줄(.wm-nc__m)까지 두 줄 자리를 잡아 보니 한 줄짜리 칸마다 빈 줄이 생겨 카드가 헐거워 보였다 → 제목만) */
  body.home .wm-news .wm-nc:not(.wm-nc--all) .wm-nc__t { min-height: 3.9em; }   /* 3줄 × 1.3 */
  body.home .wm-news .wm-nc--all .wm-nc__b { padding: .85rem; }          /* 남색 «전체 보기» 칸은 글이 칸 안쪽 */
  body.home .wm-news .wm-dots { display: none; }
  body.home .wm-news .wm-news__ft { justify-content: flex-end; margin-top: 1.75rem; }   /* 점이 빠져도 「전체 보기」 단추는 원래 자리(오른쪽) */
  body.home .wm-news .wm-pane:has(> .wm-track[data-wm-auto]) .wm-dots { display: flex; }
  body.home .wm-news .wm-pane:has(> .wm-track[data-wm-auto]) .wm-news__ft { justify-content: space-between; }
  /* 「기록」 칸 표 — 9칸 659px 이 328~380px 칸에서 가로로 밀렸고, 이 칸의 주인공 «랭킹 포인트»(9번째)가 밀어야만 보였다(사장님 「수평 스크롤은 고객이 인지 못 한다」).
     폰에선 참가·1위·2위·3위 네 칸(5~8번째 · 머리 줄과 몸 줄 같은 자리)을 접는다 → 순위·선수·기록·대회·포인트가 한 화면에.
     네 칸은 같은 칸 밑 「… 전체 보기」 단추(/records/ 전체 표)에 그대로 있다. CSS 만으로는 칸마다 이름표(참가·1위…)를 붙일 수 없어 접는다(PHP 에 이름표를 넣으면 펼칠 수 있다) */
  body.home #wm-rht-rec .wm-tbl tr > :nth-child(n+5):nth-child(-n+8) { display: none; }
  body.home #wm-rht-rec .wm-tbl th, body.home #wm-rht-rec .wm-tbl td { padding: .7rem .4rem; white-space: normal; }
  body.home #wm-rht-rec .wm-tbl .rec-pt__b b, body.home #wm-rht-rec .wm-tbl .rec-pt__n { white-space: nowrap; }
  body.home #wm-rht-rec .wm-tbl .rec-pt__r { overflow-wrap: anywhere; }

  /* ③ 대회 찾기 위 사진 카드 4장 — 한 줄 1장(사진 16:8 · 한 장이 화면 3/4) → 2칸 격자 두 줄.
        🔴 minmax(0,1fr) : 옛 «1fr» 은 카드 속 긴 주소 글자(…갈무리 (http://…))의 최소 폭 381px 로 칸이 커져 390 화면이 397px 로 «가로로 밀리던» 원인(10-07 실측).
        상태 배지·FAST 낱말·제목·날짜·장소 글(.wm-pc__s)은 다 보인다. 홈페이지 갈무리 출처(.wm-pc__c)는 PC 처럼 두 줄까지(글은 DOM 에 그대로 · 12px). */
  body.home .wm-find__pics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; }
  body.home .wm-pc { min-width: 0; }
  body.home .wm-pc__f { aspect-ratio: 4 / 3; }
  body.home .wm-pc__b { padding: .65rem .65rem .85rem; gap: .35rem; }
  body.home .wm-pc__k { flex-wrap: wrap; gap: .3rem .45rem; }
  body.home .wm-pc__t { font-size: 1rem; line-height: 1.3; }
  body.home .wm-pc__s, body.home .wm-pc__c { font-size: .75rem; line-height: 1.45; }
  /* 대회 찾기 목록 줄 — 320 화면에서 긴 대회 이름(.wm-row__t)의 최소 폭이 줄을 330px 로 밀어 «가로로 밀림»(10-07 검토 실측 · 위 주소 문제에 가려져 있던 것).
     옛 767 규칙의 «1fr auto» → minmax(0,1fr) + 칸 안에서 접기 */
  body.home .wm-row a, body.home .wm-row a.no-thumb { grid-template-columns: minmax(0, 1fr) auto; }
  body.home .wm-row__t { overflow-wrap: anywhere; }
  /* 구역 제목 — /de/ 「Trainingsstrecken · Leichtathletikbahnen」 의 긴 낱말이 360~412 에서 화면을 10px 밀었다(검토 실측 · 옛 CSS 도 같음).
     칸보다 긴 낱말만 칸 안에서 끊긴다(한국어 제목은 그대로) */
  body.home .wm-h2 { overflow-wrap: anywhere; }
  /* 같은 까닭으로 본보기 구역(훈련코스 카드 격자) 자체도 /de/ 320 에서 긴 낱말(…Feuchtgebietswanderweg)이 «1fr» 칸을 360px 로 키웠다 →
     minmax(0,1fr) + 칸 안 접기. 글이 칸에 들어가는 한국어 화면은 값이 똑같다(본보기 값 그대로) */
  body.home .wm-split .wm-cg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home .wm-cc__t, body.home .wm-cc__s { overflow-wrap: anywhere; }

  /* ④ 「지금 접수중인 대회」 12장 — 가로로 미는 한 줄(78% 카드 · 화살표) → 2칸 격자. 머리의 「전체 12건」 링크(.wm-rot__all)가 보이므로 앞 6장만(세 줄).
        화살표·자동 넘김 멈춤 단추는 가로 넘김 전용이라 폰에서 숨긴다(격자에선 밀 것이 없다 — 저절로 움직이는 것이 없으니 멈춤 단추도 필요 없다).
        🔴 구역은 :has() 가 아니라 마크업(aria-labelledby="wm-rot-h" · wmm-home.php)으로 집는다 — :has() 없는 브라우저(크롬 105·삼성 인터넷 20·iOS 15.4 이전)에서
           격자 줄만 버려지고 멈춤 단추 숨김만 남으면 «혼자 움직이는데 멈출 수 없는» 띠가 된다(WCAG 2.2.2). 6장 자르기만 :has (없으면 12장 다 보인다 — 안전)
        ⚠️ 머리 설명 「접수 중인 대회를 하나씩 넘겨 보여 드립니다」는 PHP 글자라 그대로 — 폰에선 넘기지 않는다(문구는 사장님 판단 뒤 PHP 에서) */
  body.home section[aria-labelledby="wm-rot-h"] > .wm-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; overflow: visible; scroll-snap-type: none; }
  body.home section[aria-labelledby="wm-rot-h"]:has(.wm-rot__all) > .wm-track > .wm-rc:nth-child(n+7) { display: none; }
  body.home section[aria-labelledby="wm-rot-h"] .wm-rot__pb, body.home section[aria-labelledby="wm-rot-h"] .wm-arws { display: none; }
  body.home .wm-rot__all { margin-left: 0; }
  body.home .wm-rc { min-width: 0; }
  body.home .wm-rc__f { aspect-ratio: 4 / 3; }
  body.home .wm-rc__b { padding: .65rem .65rem .85rem; gap: .3rem; }
  body.home .wm-rc__d { font-size: .75rem; }
  body.home .wm-rc__t { font-size: 1rem; line-height: 1.3; }
  body.home .wm-rc__s { font-size: .75rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }   /* 트레일 거리 다섯 개 같은 긴 줄만 세 줄에서 자른다(글은 DOM 에 그대로) */
  body.home .wm-rc__none { padding: .75rem; }
  body.home .wm-rc__none b { font-size: 2rem; }
  body.home .wm-rc__none svg { width: 1.5rem; height: 1.5rem; }

  /* ⑤ 실시간 랭킹 포인트 — 이름 뒤가 텅 비고 기록·점수만 오른쪽 끝(사장님 34번 화면). 1279 이하에서 숨겨 둔 «대회 이름»(.wm-rk__race)을
        이름 밑 작은 둘째 줄로 꺼내 가운데를 채우고, 기록·점수 칸은 줄마다 같은 폭(오른쪽 맞춤) — 줄마다 따로 격자라 auto 폭이면 칸이 어긋난다.
        기록 칸 4.75rem = 두 자리 시간(«10:11:33» — 100K 트레일 우승 기록) 실측 73.5px 이 들어가는 폭. 점수 칸 3.75rem(«531점» 42px).
        숫자 꼴(순위·점수 900 기울임 · 기록 800 고정폭 숫자)은 그대로. */
  body.home .wm-rk__a { grid-template-columns: 2.75rem minmax(0, 1fr) 4.75rem 3.75rem; grid-template-areas: "n t rec pt" "n race rec pt"; column-gap: .6rem; row-gap: .1rem; align-items: center; padding: .7rem .25rem; }
  /* 외국어 점수 «466 Pkt.»·«440 pts» 는 62~66px — 3.75rem(60px) 칸을 2~6px 넘었다(검토 실측) → 4.5rem */
  body.home.ri-intl .wm-rk__a { grid-template-columns: 2.75rem minmax(0, 1fr) 4.75rem 4.5rem; }
  body.home .wm-rk__n { grid-area: n; }
  body.home .wm-rk__t { grid-area: t; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* 360 에선 한 줄 «…» 로 대회 이름 절반이 잘렸다 → 두 줄까지. min-height = 두 줄 자리(1.35 × 2) — 한 줄·두 줄 이름이 섞이면 6초마다 넘어가는 세 묶음 높이가
     467/467/483px 로 달라 밑 내용이 16px 씩 뛰었다(검토 실측) */
  body.home .wm-rk__race { grid-area: race; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; min-width: 0; min-height: 2.7em; font-size: .75rem; line-height: 1.35; font-weight: 500; color: var(--wm-ink); }
  body.home .wm-rk__rec { grid-area: rec; text-align: right; }
  body.home .wm-rk__pt { grid-area: pt; text-align: right; }

  /* ⑥ 최근 대회 우승자 — 한 장씩 넘기는 카드(← 1/12 →)는 «옆으로 넘겨야 보이는 것»이라 손님이 모른다 → 12명을 위아래로 다 보인다.
        꼴은 본보기(훈련코스) 그대로 2칸 사진 카드 — 사진 4:3 위 · 글 아래. 한 사람 = 나라·날짜 · 대회 · 장소 · 순위/코스/이름/기록(한 줄씩) · 「… 보기」 링크 — 자료는 하나도 안 뺀다.
        (검토 전 판은 72px 세로 사진 4:5 였는데 12장 중 11장이 768×329 가로 갈무리라 너비 34% 만 보였다 → 본보기 4:3)
        넘김 단추(1/12)는 넘길 것이 없으니 숨긴다. wmm.js 의 6.5초 넘김은 .is-on 만 바꾼다 — 아래는 .is-on 이든 아니든 같은 꼴이라 화면은 움직이지 않는다. */
  body.home .wm-wc__vp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; }
  body.home .wm-wc, body.home .wm-wc.is-on { display: flex; flex-direction: column; min-width: 0; background: none; }
  body.home .wm-wc__ph { width: 100%; min-height: 0; aspect-ratio: 4 / 3; }
  body.home .wm-wc__b { padding: .75rem 0 0; }
  body.home .wm-wc__top { font-size: .75rem; gap: .3rem .4rem; flex-wrap: wrap; }
  body.home .wm-wc__top img { width: 1.25rem; }
  body.home .wm-wc__race { font-size: 1rem; line-height: 1.3; margin: .3rem 0 .15rem; }
  body.home .wm-wc__crown { font-size: .75rem; line-height: 1.45; }
  body.home .wm-wc__grid { grid-template-columns: minmax(0, 1fr); gap: .1rem; margin-top: .4rem; }
  body.home .wm-wc__grid > div { min-width: 0; font-size: .875rem; line-height: 1.35; }   /* 줄 높이를 글자에 맞춘다 — 물려받은 16px × 1.6 줄 상자(26px)가 네 줄마다 7px 씩 남아 390 에서 넷째 카드 끝이 아래 메뉴 밑으로 들어갔다 */
  body.home .wm-wc__k { display: inline; font-size: .6875rem; margin-right: .3rem; }
  body.home .wm-wc__v { display: inline; font-size: .875rem; line-height: 1.35; white-space: normal; }
  body.home .wm-wc__v--rec { font-size: 1.0625rem; white-space: nowrap; }
  body.home .wm-wc__more { margin-top: .4rem; padding: .2rem 0; font-size: .8125rem; }
  body.home .wm-wc__vp .wm-pager { display: none; }

  /* ⑦ 선수 인터뷰 3장 — 한 줄 1장(화면 폭 큰 카드) → 같은 2칸 격자(칸 사이는 본보기 값). 사람 사진이 칸 높이에 서 있는 꼴이라
        비율은 PC 값 4:4.2 그대로(4:3 으로 줄이면 이름표가 얼굴을 덮는다). 이름표·꼬리표만 좁은 칸에 맞게 줄인다. 사진 출처 글자 크기는 그대로(11px). */
  body.home .wm-iv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; }
  body.home .wm-iv__c { aspect-ratio: 4 / 4.2; min-width: 0; }
  /* 장 수가 홀수면 마지막 한 장이 두 칸을 다 쓴다 — 3장일 때 셋째 옆 반 칸이 비어 «빠진 것»처럼 보였다(10-07 검토). 높이는 옆 카드와 같게(8.2:4.2 ≈ 두 칸 + 사이 0.75rem) · 사람은 가운데 */
  body.home .wm-iv__c:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 8.2 / 4.2; }
  /* 좁은 칸에선 위 오른쪽 사진 출처 띠(.wm-iv__cr · 약 22px)가 머리를 덮었다(10-07 390 실측 · 320 에선 86% 로도 2px) → 사람 키 = 86% 와 «칸 − 1.6rem» 중 작은 것 */
  body.home .wm-iv__c img { height: min(86%, calc(100% - 1.6rem)); }
  body.home .wm-iv__b { left: .6rem; right: .6rem; bottom: .6rem; gap: .35rem; }
  body.home .wm-iv__who { font-size: 1rem; padding: .3rem .6rem; }
  body.home .wm-iv__lab { font-size: .75rem; padding: .2rem .5rem; }
}
/* 480~767(큰 폰·접는 폰) : 랭킹 줄이 558px 까지 넓어져 «이름 옆 253px 빈칸»(줄의 45%)이 다시 생겼다(10-07 검토 실측 600) →
   기록·점수 칸도 같이 늘어 빈칸을 줄 전체에 고르게 나눈다. 기록은 가운데 맞춤. 최소 폭은 위 값(외국어 점수 포함) 그대로 */
@media (min-width: 480px) and (max-width: 767px) {
  body.home .wm-rk__a, body.home.ri-intl .wm-rk__a { grid-template-columns: 2.75rem minmax(0, 1.6fr) minmax(4.75rem, 1fr) minmax(4.5rem, .7fr); }
  body.home .wm-rk__rec { text-align: center; }
  /* 우승자 카드 — 600 에선 칸이 273px 로 넓어 4:3 사진(205px)만으로 두 줄이 831px → 아래 메뉴 위(782px)에 넷째 카드가 다 안 들어왔다(10-07 실측).
     넓은 폰에서만 16:9 — 사진 대부분이 768×329 가로 갈무리라 오히려 더 많이 보인다. 360~412 는 위 4:3(본보기) 그대로 */
  body.home .wm-wc__ph { aspect-ratio: 16 / 9; }
}

/* ═══ 10-07 사진 없는 대회 카드의 달리는 사람 아이콘 = 남색 — A ═══
   왜 : 규칙 v3.5 «검정은 글자에만 · 아이콘은 남색». .wm-rc__none 은 글자(10K 등)를 검정으로 쓰려고 color:ink 를 주는데,
        svg 가 currentColor 라 아이콘까지 검정이 됐다(10-07 최종 측정에서 짚음). 글자는 그대로 두고 아이콘만 남색. */
.wm-rc__none svg { color: var(--wm-navy); }

/* ═══ 10-08 상단 가운데 검색칸(.wm-hsearch) — A · 사장님 「상단 센터에 검색창 · 허드슨, 심진석, JTBC마라톤 등 검색하세요」 ═══
   PC(992↑)만 — 폰은 머리 아래 검색줄(.wm-mnv)이 이미 있다. 머리 오른쪽 돋보기 단추는 PC 에서 숨긴다(같은 일을 두 번 보이지 않게).
   안내문(placeholder) 색 = 남색 : 규칙 «회색 글자 금지» — 입력한 글자(검정)와는 색으로 갈린다. 테두리·단추 = 남색(v3.5 «선·면은 남색»). */
.wm-hsearch { display: none; }
@media (min-width: 992px) {
  .wm-brand__in > .wm-brand__sp { display: none; }
  .wm-hsearch { display: flex; flex: 0 1 38rem; margin: 0 auto; height: 2.75rem; border: 2px solid var(--wm-navy); background-color: #fff; }
  .wm-hsearch input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; padding: 0 1rem; font-size: .9375rem; font-weight: 600; color: var(--wm-ink); background-color: transparent; outline: none; }
  .wm-hsearch input::placeholder { color: var(--wm-navy); opacity: 1; font-weight: 500; }
  .wm-hsearch input::-webkit-search-cancel-button { cursor: pointer; }
  .wm-hsearch button { flex: 0 0 3.25rem; border: 0; background-color: var(--wm-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .wm-hsearch button svg { width: 1.25rem; height: 1.25rem; }
  .wm-hsearch:focus-within { box-shadow: 0 0 0 3px rgba(0, 0, 117, .18); }
  .wm-brand__tools .wm-iconbtn--search { display: none; }
}

/* ═══ 2026-10-12 클로드A · 기록랭킹 «로드 / 트레일» 칩 색 ═══
   사장님 10-12 「기록랭킹, 종합하고 로드 트레일에서 로드하고 트레일 버튼 색상 다르게 하는게 좋을거 같어,
                 그래야 각각 로드하고 트레일 아이템이 다르다고 판단 할거 같아서」
   · 범위 = B /records/ 랭킹 갈래 칩(.rec-chips--t2) 안의 로드·트레일 두 개만. 종합은 지금처럼 남색.
   · 색 = 대회일정·코스에서 이미 쓰는 «코스 색» 그대로(새 색을 고르지 않음) : 로드 = 풀코스 --wm-c-full · 트레일 = --wm-c-trail
     글자는 대비로 — 로드 판 흰 글자(8.9:1) · 트레일 판 검정 글자(위 :root 주석 «트레일런 — 검정»).
   · 안 눌렸을 때도 어느 쪽인지 보이게 칩 왼쪽에 그 색 굵은 띠(칩이 기울어 있어 띠도 같이 기운다 — WMM 꼴).
   · 🔴 B 마크업의 href(type=marathon · type=trail)와 .rec-chips--t2 로 고른다. B 가 이 둘을 바꾸면 조용히 안 걸린다 → 바꿀 때 판에 한 줄.
   · 되돌리기 = 이 블록만 지우면 끝. */
.wm .rec-chips--t2 .wm-chip[href*="type=marathon"] { box-shadow: inset .32rem 0 0 var(--wm-c-full); }
.wm .rec-chips--t2 .wm-chip[href*="type=trail"]    { box-shadow: inset .32rem 0 0 var(--wm-c-trail); }
.wm .rec-chips--t2 .wm-chip.is-on[href*="type=marathon"] { background: var(--wm-c-full); color: #fff; box-shadow: none; }
.wm .rec-chips--t2 .wm-chip.is-on[href*="type=trail"]    { background: var(--wm-c-trail); color: #000; box-shadow: none; }