/* ═══ RUNIN.KR 뉴스 /news/ · 기사 /article/ — World Marathon Majors 디자인(wm- · 이 지면 고유 wmn-) · 2026-10-06 · 클로드A ═══
   규칙 한 장 : https://idc.kr/_claude/CODE_RULES.txt
   설계서 : D:\작업중\2026년\10월\런닝인사이드\뉴스WMM시안\ref\news_설계서.md (값의 출처 = 6-1 값표 · 3장 목록 · 4장 기사 · 4-4 표)
   짝 PHP : wmm-news.php (출력 버퍼에서 뼈대를 새로 짠다 — 옛 CSS(app.css·utmb.css·A 덧칠)는 이 지면에서 전부 걷힌다)
   v1.1.0 (10-06 저녁) : /news/ 목록 = 훈련코스 /course/ 꼴 «왼쪽 칸 + 3열 사진 카드»(2장 · 3-b · 4장 · 16-b) — 기사 /article/ 규칙은 그대로
   v1.1.0 검토 반영(10-06 밤 · 배포 전) : 칸 위 휠 막힘(overscroll contain 뺌) · 480~530 가로 넘침(제목 overflow-wrap) · 영어 칩 칸 넘침 ·
      폰 띠 분류 = 글자 탭(바로가기 칩과 꼴 나눔) · 칸 높이 calc · 칸 왼쪽 줄 맞춤 · 맨 밑 겹 여백 · 로그인 601~767 관리 막대 — README 12장
   🔴 이 파일은 홈 wmm.css «뒤에» 실린다. 홈 부품(.wm-sec .wm-chip .wm-btn .wm-st .wm-tbl .wm-list …)은 다시 정의하지 않고,
      이 지면 전용과 «옛 마크업이 기대던 기능 규칙»만 둔다. 선택자는 전부 body.wmn-p 또는 .wmn(main) 아래 — 홈·대회일정과 섞이지 않게.
   🔴 글자는 완전 검정(--wm-ink #000). 회색 글자 금지. 남색(--wm-navy)은 순위 숫자·링크·개수·고른 것만.
      포인트 빨강(--wm-hot)은 셋뿐 : 「속보」 꼬리표(카드·기사 머리) · 「이번 주 마감」 배지 · 머리 메뉴 NEW(공용 함수).
   🔴 장식 가로줄 금지 — 줄은 «목록 머리 2px 남색 + 줄마다 1px #d6dce2»(규칙 3장 목록 줄 · v3.5 «검정은 글자에만» — 예전 «2px 검정»)와 표뿐. 세로 막대(3px 남색)는 가로줄이 아니다.
   🔴 font 축약 금지(글꼴 자리 inherit 이면 선언 통째 버림 · 2026-09-24) · 단축 속성은 앞의 낱개를 덮는다(낱개는 단축 «뒤»에)
   🔴 :has() 는 «덤»으로만 쓴다(못 알아듣는 옛 브라우저도 내용은 다 보인다). */

/* ═══ 0. 기능 규칙 — 옛 CSS 를 걷으면서 «빠지면 오류 없이 깨지는» 것 (설계 6-4 D1 대안 c : wmm.css .wm-sub 공용 블록이 생기기 전까지 여기) ═══ */

/* 화면낭독기 전용 글 — 빠지면 「새 일정 있음」·「메뉴 열기」 같은 숨은 글이 화면에 다 보인다 (= .wm-sr · wmm-find.css 0장과 같은 값) */
body.wmn-p .ri-sr, body.wmn-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>) — h1·h2 의 전구·깃발·경고·달리기·시계·달력, 인터뷰 글 속 .ic. 크기를 안 주면 svg 기본 300×150 으로 줄이 터진다 */
body.wmn-p svg.ri-i { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
/* hidden 짝 — 옛 app.css 가 맡던 것. 공감 줄(ri-a-rc__sum · __c · __pick)·공감 줄 자리·알림 모달이 hidden 을 켜고 끈다.
   이 규칙이 없으면 .ri-a-rc__sum{display:flex}(ri-a-social-css)가 hidden 을 이겨 빈 «얼굴+0» 줄이 늘 보인다 */
body.wmn-p [hidden] { display: none !important; }
/* 알림 모달(app.js 가 is-open·hidden 을 함께 바꾼다) — 막 색 = .wm-dlg::backdrop 값 · /find/ 와 같은 값 */
body.wmn-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.wmn-p .ri-modal.is-open { display: flex; }
body.ri-locked { overflow: hidden; }
body.wmn-p .ri-modal__panel { max-height: 90vh; overflow-y: auto; }
body.wmn-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; }
body.wmn-p .ri-modal .wm-dlg__x { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--wm-ink); }
body.wmn-p .ri-modal .wm-dlg__x svg { width: 1.25rem; height: 1.25rem; }
body.wmn-p .ri-modal__note { margin-top: .75rem; font-size: .9375rem; }
body.wmn-p .ri-modal .ri-mailform { margin-top: 1.25rem; }
body.wmn-p .ri-modal .ri-mailform__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: end; }
body.wmn-p .ri-modal .ri-field label span { font-weight: 500; }

/* ═══ 1. 머리 — 메뉴 「뉴스」 «지금 여기»(목록 aria-current="page" · 기사 "true") + 메뉴 줄 붙어 다니기(find §11 과 같은 값) ═══ */
body.wmn-p .wm-nav li a[aria-current] { font-weight: 800; }
body.wmn-p .wm-nav li a[aria-current]::after { transform: none; }
body.wmn-p .wm-dlg--nav a[aria-current] { color: var(--wm-navy); }
/* 🔴 홈 .wm-nav{position:sticky} 는 header.wm-head 상자 안에 갇혀 헤더가 지나가면 같이 사라진다(find 검토 design 2) —
   ≥1024 에서 헤더 «통째»를 붙이고 로고 줄 높이(4.5625rem)만큼 위로 빼서 메뉴 줄만 남긴다. #nw-world 같은 닻은 html scroll-padding-top 4rem > 메뉴 53px 라 안 가린다 */
@media (min-width: 1024px) {
  body.wmn-p .wm-head { position: sticky; top: -4.5625rem; z-index: 50; }
  body.wmn-p.admin-bar .wm-head { top: calc(32px - 4.5625rem); }
}

/* ═══ 2. /news/ «찾기» 구역 (v1.1.0 · 사장님 10-06 18:2x 「대회일정 훈련코스 리뉴얼된 디자인풍이 좋아 그런 방식으로 …
         그래야 앞으로 러닝클래스가 많으면 대회일정처럼 쉽게 찾을 거 아냐, 뉴스 마찬가지고」)
   = B 훈련코스 /course/ 꼴(themes/runin/wmb/course.css 1장 값) : 머리(굵은 기울임 h1 + 설명) → [왼쪽 칸 | 오른쪽 칸(덩어리 머리 + 3열 사진 카드)]
   🔵 값은 course.css 그대로(.wmbc-lay 28%·2.5rem · .wmbc-tab · .wmbc-side .wm-chip 2.5rem · .wmbc-block 3rem · .cz-grid 1rem) — 새 숫자를 짓지 않는다.
      고정 칸 top 7.5rem · 992~1023 top 2rem 은 /find/ 값(이 지면도 ≥1024 에서 메뉴 줄이 붙어 다닌다 — 1장 · course 의 5rem 이면 메뉴 줄 아래 27px 뿐).
      칸 높이는 /find/ 의 80vh 가 아니라 «화면 − (top + 1rem)»(러닝클래스 wmm-class.css 와 같은 식) — 80vh 는 높이 600 아래에서 top 과 더해 화면을 넘는다(검토 #6).
   🔵 course 의 덩어리 머리 밑 1px 줄은 따라 하지 않는다(규칙 «장식 가로줄 금지» — 목록 줄·표만). 칸 목록 줄(2px 남색 머리 + 줄마다 1px)은 «목록 줄»이라 둔다.
   폭별 : ≥992 왼쪽 고정 칸 · 768~991 칸이 위로(가로 탭 줄 + 칩 줄 · 16-b) · ≤767 칸 = 붙어 다니는 띠(분류 글자 탭 + 바로가기 칩 · /find/ .ri-fm 값 · 16-b) ═══ */
.wmn .wmn-h1 { text-transform: none; line-height: 1; }                    /* = .wmbc-h1 · 크기 = .wm-h2 사다리(3rem → 991↓ 2.5rem → 479↓ 8vw) */
.wmn .wmn-h1 svg.ri-i { color: var(--wm-navy); margin-right: .1em; }
.wmn .wmn-lead strong { font-weight: 900; font-style: italic; color: var(--wm-navy); }   /* = .wmbc-lead b (훈련코스 설명 속 개수 꼴) — 강조 = 남색 */
.wmn .wmn-lay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }   /* 991↓ = 칸이 목록 위(.wmbc-lay 991 값) */
.wmn .wmn-side, .wmn .wmn-main { min-width: 0; }
.wmn .wmn-blk + .wmn-blk { margin-top: 3rem; }                             /* = .wmbc-block + .wmbc-block */

/* 칸 ⓐ 분류 = 우리 기사 분류(nav.nw-cats · a.wmn-tab) — 모든 폭 공통만 여기(폭별 꼴은 아래 ≥992 · 16-b) */
.wmn .wmn-tab { color: var(--wm-ink); transition: background-color .2s ease, color .2s ease; }
.wmn .wmn-tab i { font-weight: 700; font-style: normal; font-variant-numeric: tabular-nums; }   /* 개수 = 원문 <i> */
.wmn .wmn-tab.is-on, .wmn .wmn-tab[aria-current] { color: var(--wm-navy); }
/* 칸 ⓑ 칩 = 언론 분류 바로가기(nav.rec-anchors · #nw-…) = .wmbc-regions + .wmbc-side .wm-chip 값.
   🔵 기울기는 ::before 로 — B 링크엔 글자를 되세울 속 span 이 없고, 글자 마디에 span 을 끼우지 않는다(번역 열쇠) · 「속보」 아님 = 빨강 없음 */
.wmn .wmn-jump { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding-left: .4rem; }
.wmn .wmn-jump > a { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .3rem; height: 2.5rem; padding: 0 .95rem; font-size: .875rem; line-height: 1; font-weight: 800; font-style: italic; color: var(--wm-ink); white-space: nowrap; transition: color .2s ease; }
.wmn .wmn-jump > a::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skew(-16deg); background: var(--wm-chip); transition: background-color .2s ease; }
.wmn .wmn-jump > a:hover::before { background: var(--wm-nav2); }
.wmn .wmn-jump small { font-size: inherit; font-weight: 500; font-style: normal; font-variant-numeric: tabular-nums; }   /* = .wm-chip b */

@media (min-width: 992px) {
  .wmn .wmn-lay { grid-template-columns: minmax(15rem, 28%) minmax(0, 1fr); gap: 2.5rem; align-items: start; }   /* = .wmbc-lay */
  .wmn .wmn-lay--solo { grid-template-columns: minmax(0, 1fr); }           /* 칸이 빈 지면(분류·바로가기 둘 다 없음) */
  /* 고정 칸 — 목록을 내려도 따라온다 · 길면 칸 «안»에서 스크롤. 안쪽 .3rem = 초점 테두리(3px+2px)가 칸 가장자리에서 잘리지 않게
     · margin-left −.3rem = 그 안쪽 여백만큼 왼쪽으로 → 칸 글자 시작이 h1·설명 시작과 같은 세로줄(검토 #7 : 1440 에서 34px → 29px · /course/ 도 29)
     · max-height = 화면 − (top 7.5rem + 아래 1rem) — 예전 80vh 는 화면 높이 600 아래에서 top 120px 와 더해 화면을 넘어 칸 끝에 손이 안 닿았다(검토 #6)
     · overflow-x hidden = 영어(독·불·서는 더 긴) 칩이 칸보다 넓으면 칸 안에 «가로 스크롤 막대»가 생겼다(검토 #3 · 992~1050 · 아래 칩 줄바꿈과 짝).
       overflow-y 가 auto 라 x 를 안 적으면 x 도 auto 가 된다
     🔴 overscroll-behavior:contain 을 «다시 넣지 마라»(검토 #1 · 10-06 실측) — overflow-y:auto 칸은 넘치는 것이 없어도 «스크롤 상자»라,
        contain 이면 크롬이 칸 위의 휠을 삼켜 지면이 안 구른다(1440×900 칸 위 휠 5번 : 지면 1500 → 1500 그대로 · 빼면 → 3500).
        /find/ .wm-fd-filt 에도 없다. 칸 끝에서 지면이 따라 구르는 것은 막을 일이 아니다 */
  .wmn .wmn-side { position: sticky; top: 7.5rem; display: flex; flex-direction: column; gap: 1.75rem; max-height: calc(100vh - 8.5rem); overflow-y: auto; overflow-x: hidden; margin-left: -.3rem; padding: .3rem .3rem 1rem; scrollbar-width: thin; }
  /* 칸 안 바로가기 칩 — «줄바꿈 허용»(검토 #3 : en 「Championships & National Team 8」 이 nowrap 이라 칸을 넘었다). 높이 2.5rem 은 «최소»로,
     긴 칩만 두 줄로 자란다(짧은 한국어 칩은 한 줄 그대로 — 칩 단위로 먼저 다음 줄로 넘어간다). 오른쪽 .4rem = 기운 바탕(skew −16°)이
     칸 오른쪽에서 잘리지 않을 자리(왼쪽 .4rem 과 짝) */
  .wmn .wmn-side .wmn-jump { padding-right: .4rem; }
  .wmn .wmn-side .wmn-jump > a { white-space: normal; height: auto; min-height: 2.5rem; padding-block: .5rem; line-height: 1.25; }
  /* 분류 = 세로 목록(.wmbc-tabs · .wmbc-tab) — 머리 2px 남색 · 줄마다 1px · 굵은 기울임 · 고른 것 = 남색 글자 + 왼쪽 4px 남색 막대 */
  .wmn .wmn-tabs ul { display: flex; flex-direction: column; border-top: 2px solid var(--wm-navy); }
  .wmn .wmn-tab { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .85rem .25rem .85rem .9rem; border-bottom: 1px solid var(--wm-line); font-size: 1.125rem; line-height: 1.2; font-weight: 900; font-style: italic; text-transform: uppercase; }
  .wmn .wmn-tab i { font-size: .875rem; }
  .wmn .wmn-tab:hover { background: var(--wm-nav1); }
  .wmn .wmn-tab.is-on::before, .wmn .wmn-tab[aria-current]::before { content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 4px; background: var(--wm-navy); }
}
/* 992~1023 — 칸은 붙는데 메뉴 줄이 안 붙는 폭(1장 ≥1024 만) → top 7.5rem 이 빈 띠로 남는다(/find/ 와 같은 값) */
@media (min-width: 992px) and (max-width: 1023px) {
  .wmn .wmn-side { top: 2rem; max-height: calc(100vh - 3rem); }        /* 높이 = 화면 − (top 2rem + 아래 1rem) · 검토 #6 */
}

/* 덩어리 머리 (= .wmbc-block__hd · 1px 밑줄 뺌) — h2(.wm-hs 1.6875rem 굵은 기울임) + 오른쪽 개수(「24건」 남색) 또는 작은 글(.cz-sec__note) */
.wmn .wmn-bhd { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 1.25rem; }
.wmn .wmn-bhd svg.ri-i, .wmn .wmn-rl__t svg.ri-i { color: var(--wm-navy); margin-right: .1em; }
.wmn .wmn-n { font-size: 1rem; font-weight: 800; font-style: italic; color: var(--wm-navy); white-space: nowrap; }
.wmn .wmn-note { font-size: .875rem; font-weight: 600; }                   /* = .cz-sec__note (검정 · 회색 글자 금지) */
.wmn .wmn-bhd + .wmn-sub { margin-top: 0; }
/* 선수 인터뷰 덩어리 머리 — 홈 함수가 h2.wm-h2(3rem)로 낸다 → 다른 덩어리 머리(.wm-hs)와 같은 크기(오른쪽 칸 안 · 지면 h1 보다 작게 · 검토 design #4) */
.wmn .wmn-iv .wm-h2 { font-size: 1.6875rem; line-height: 1.22; }

/* 격자 — 기사 «다른 기사»(15장)와 같이 쓰는 기본값 : 3열 · 세로 2.5rem · 가로 1.25rem (WMM hub 40/20). 목록은 3-b 에서 훈련코스 값으로 */
.wmn .wmn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.25rem; }

/* ═══ 3. 공용 카드 .wmn-c (설계 3-7) = 홈 .wm-pc 값 · 규칙 3장 «카드(사진 아래 글) · 바탕 #f7f9fa · 날짜 800 · 제목 900 기울임»
   🔴 사진 막·그라데이션·사진 위 글자 0 — 언론사 이름표(nw-item__credit · 권리 표기)는 «남기되» 사진 아래 블록으로 내린다(옛 rgba(0,0,0,.55) 띠 없어짐)
   🔴 transition 을 한 줄에 «등장(wm-rv : opacity·transform) + hover 바탕» 둘 다 적는다 — 한쪽만 적으면 다른 쪽이 덮여
      카드가 «툭» 나타나거나 hover 가 안 먹는다(runin 홈 CSS 함정 · 메모리 runin-home-css-traps) ═══ */
.wmn .wmn-c { display: flex; flex-direction: column; min-width: 0; background: var(--wm-page);
  transition: opacity .6s var(--wm-ease), transform .6s var(--wm-ease), background-color .2s ease; transition-delay: var(--d, 0s), var(--d, 0s), 0s; }
.wmn .wmn-c:hover { background: var(--wm-nav2); }
.wmn .wmn-c .nw-item__fig { display: block; }
/* 사진 16:8 — B 썸네일은 768×329(2.33:1) 갈무리라 4:3 이면 양옆이 많이 잘린다(Q3). 사진 hover 확대 없음(WMM 1.1배 따라 하지 않음) */
.wmn .wmn-c .nw-item__fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; background: var(--wm-grey); }
.wmn .wmn-c .nw-item__credit { display: block; position: static; padding: .5rem 1.25rem 0; font-size: .8125rem; line-height: 1.4; font-weight: 600; color: var(--wm-ink); background: none; }
.wmn .wmn-c .nw-item__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1.25rem 1.25rem 1.5rem; }
/* 꼬리표 = .wm-st 꼴(기울인 상자 · .75rem · 기울임) — 보통 = #f2f4f5 + 검정 700 · 속보 = 빨강 + 흰 글자 700(4.52) */
.wmn .wmn-c .nw-item__cat { position: relative; isolation: isolate; display: inline-block; padding: .3rem .6rem; font-size: .75rem; line-height: 1; font-weight: 700; font-style: italic; color: var(--wm-ink); }
.wmn .wmn-c .nw-item__cat::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skew(-16deg); background: var(--wm-smoke); }
.wmn .wmn-c--hot .nw-item__cat { color: #fff; }
.wmn .wmn-c--hot .nw-item__cat::before { background: var(--wm-hot); }
/* overflow-wrap:anywhere (검토 #2) — 글 칸이 align-items:flex-start 라 제목 폭 = «안 쪼개지는 가장 긴 조각». 인터뷰 제목
   「…“잠을 두 시간밖에 못 잤습니다”」 는 NBSP 로 이어지고 keep-all 이라 242px 짜리 한 조각 → 480~767 2열(칸 215px)에서
   지면이 옆으로 샜다(480 → 510 · 520 → 530). anywhere 는 «쪼갤 데가 없을 때만» 글자 사이를 끊고 최소 폭 계산에도 들어간다
   (break-word 는 최소 폭에 안 들어가 같은 넘침이 남는다). 보통 제목은 빈칸에서 그대로 끊긴다 */
.wmn .wmn-c .nw-item__t { font-size: 1.25rem; line-height: 1.3; font-weight: 900; font-style: italic; letter-spacing: -.01em; overflow-wrap: anywhere; }
.wmn .wmn-c .nw-item__t a { transition: color .2s ease; }
.wmn .wmn-c .nw-item__t a:hover { color: var(--wm-navy); }
.wmn .wmn-c .nw-item__s { font-size: .875rem; line-height: 1.5; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }   /* WMM 목록 3줄 */
.wmn .wmn-c .nw-item__lead { font-size: 1rem; line-height: 1.6; font-weight: 700; }
.wmn .wmn-c .nw-item__meta { align-self: stretch; margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; font-size: .875rem; line-height: 1.4; }
.wmn .wmn-c .nw-item__meta b, .wmn .wmn-c .nw-item__meta span { font-weight: 800; }   /* 규칙 «날짜 800» */
.wmn .wmn-c .nw-item__meta a { font-weight: 800; font-style: italic; color: var(--wm-navy); }
.wmn .wmn-c .nw-item__meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 사진 없는 카드(인터뷰 등) — 가짜 사진 칸을 만들지 않는다. 글 칸이 카드 높이만큼 */
.wmn .wmn-c--nopic .nw-item__body { height: 100%; }

/* ═══ 3-b. /news/ 목록 카드 = 훈련코스 사진 카드(.cz-card) 꼴 (v1.1.0 · .wmn--list 만 — 기사 «다른 기사» 카드는 3장 그대로 둔다)
   사진 → [옅은 바탕] 제목 900 기울임 → 한 줄 정보(출처 · 날짜 · 「원문 →」 남색 기울임) → 요약 2줄 · 꼬리표는 사진 «왼쪽 아래» 작은 기운 칩.
   🔵 사진 비율은 16:8 그대로(course 는 16:10) — 우리 기사 썸네일은 글자 든 갈무리(768×329 = 2.33:1)라 16:10 이면 양옆이 15%씩 잘려 글자가 끊긴다(9장 큰 사진 주석과 같은 까닭).
   🔵 차례는 CSS order 로만(마크업·읽기 차례 그대로) — 키보드 차례는 제목 링크 → 「원문」 링크로 화면 차례와 같다(요약엔 링크가 없다) ═══ */
.wmn--list .wmn-grid { gap: 1rem; }                                        /* = .cz-grid (3열은 위 기본값 · 폭별 16-b) */
.wmn--list .wmn-c { position: relative; }
.wmn--list .wmn-c .nw-item__body { gap: .55rem; padding: 1.1rem 1.25rem 1.4rem; }   /* = .cz-card__body */
/* 꼬리표 → 사진 왼쪽 아래(.cz-card__tag 자리 : left .9rem · bottom .8rem). 마크업은 그대로(글 칸 속 span) — 카드 기준 절대 자리 +
   margin-top 50%(= 사진 높이 : 16:8 · margin 의 % 는 «폭» 기준) − 2.15rem(꼬리표 높이 1.35rem = .75rem 글자 + .3rem×2 · + 아래 띄움 .8rem).
   🔴 사진 비율(위 16:8)을 바꾸면 이 50% 도 같이 바꿀 것(16:10 이면 62.5%) · 사진 없는 카드는 글 칸 안 그대로 */
.wmn--list .wmn-c:not(.wmn-c--nopic) .nw-item__cat { position: absolute; left: .9rem; top: 0; z-index: 1; margin-top: calc(50% - 2.15rem); white-space: nowrap; }
.wmn--list .wmn-c .nw-item__t { order: 1; }
.wmn--list .wmn-c .nw-item__meta { order: 2; margin-top: 0; gap: .2rem .9rem; font-size: .8125rem; line-height: 1.45; }   /* = .cz-card__m (제목 바로 아래 한 줄) */
.wmn--list .wmn-c .nw-item__s { order: 3; line-height: 1.6; -webkit-line-clamp: 2; }   /* = .cz-card__lead 2줄 */
.wmn--list .wmn-c .nw-item__lead { order: 4; }

/* ═══ 4. 고른 언론 기사 (설계 3-4 · WMM Editor's picks · v1.1.0) — 오른쪽 칸 3열 격자에서 [큰 카드 2칸 | 곁 1] / [곁 · 곁 · 곁] (5장이면 빈칸 0)
   곁 카드 묶음 div.nw-top__side 는 display:contents 로 «격자의 칸»이 되게(마크업 그대로) · 따라 하지 않음 : 구획 제목 밑 4px 남색 줄 · 사진 hover 확대 ═══ */
.wmn .wmn-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.wmn .wmn-picks .nw-top__side { display: contents; }
.wmn .wmn-picks .wmn-c--big { grid-column: span 2; }
.wmn .wmn-picks:not(:has(.nw-item--side)) .wmn-c--big { grid-column: 1 / -1; }   /* 곁기사가 없을 때(덤 · 옛 브라우저는 오른쪽 한 칸이 빈다) */
.wmn .wmn-c--big .nw-item__t { font-size: 1.5rem; line-height: 1.2; }
.wmn .wmn-c--big .nw-item__s { display: block; font-size: 1rem; line-height: 1.6; -webkit-line-clamp: unset; overflow: visible; }   /* 큰 카드 요약은 자르지 않는다 */

/* ═══ 5. 언론 분류 구역 (설계 3-5) — PC 3열 격자(3-b) · 폰은 «가로 밀기 줄»(16장 767↓) · 머리 = 덩어리 머리(2장) ═══ */

/* ═══ 6. 한 줄 소식 (설계 3-6) — 사진 없는 줄 목록 = 규칙 3장 «목록 줄» ═══ */
.wmn .wmn-brief .nw-brief { margin-top: 1.25rem; }                         /* .wm-list = 위 2px 남색 */
.wmn .wmn-brief .nw-brief li { padding: .85rem .25rem; border-bottom: 1px solid var(--wm-line); break-inside: avoid; }
.wmn .wmn-brief .nw-brief li > a { font-size: 1.0625rem; line-height: 1.35; font-weight: 800; }   /* = .wm-row__t */
.wmn .wmn-brief .nw-brief li > a:hover { color: var(--wm-navy); text-decoration: underline; text-underline-offset: 3px; }
.wmn .wmn-brief .nw-brief__m { display: block; margin-top: .15rem; font-size: .8125rem; font-weight: 600; }   /* = .wm-row__s */
.wmn .wmn-brief .nw-brief li > p { margin-top: .35rem; font-size: .875rem; line-height: 1.5; font-weight: 500; }
@media (min-width: 1280px) { .wmn .wmn-brief .nw-brief { columns: 2; column-gap: 3rem; } }   /* = 홈 .wm-find .wm-list — v1.1.0 오른쪽 칸이라 1200 → 1280(3열 카드와 같은 문턱) */

/* ═══ 7. 대회 소식 (설계 3-8 · v1.1.0) — 덩어리 머리(h2 + 오른쪽 작은 글) → 설명 → 목록 넷 «한 줄에 하나»(오른쪽 칸 폭에 2×2 면 이름이 쪼개진다).
   상태 = 배지 + 낱말(사장님 10-05 밤 RUN·FAST·STOP) ═══ */
.wmn .wmn-races .wmn-sub { margin-bottom: 1.25rem; }
.wmn .wmn-races__g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem 3rem; }   /* find 목록 2단 사이 3rem */
.wmn .wmn-rl__hd { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .75rem; }
.wmn .wmn-rl__t { font-size: 1.25rem; line-height: 1.3; font-weight: 900; font-style: italic; }   /* = .wm-pc__t · h2 태그는 그대로(모양만 작게) */
.wmn .wmn-rl__hd .wm-btn--link { font-size: .9375rem; white-space: nowrap; }
.wmn .wmn-list > li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: center; padding: .75rem .25rem; border-bottom: 1px solid var(--wm-line); transition: background-color .2s ease; }
.wmn .wmn-list > li:hover { background: var(--wm-page); }
.wmn .wmn-list .nw-d { font-size: 1.125rem; line-height: 1.1; font-weight: 900; font-style: italic; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* = .wm-row__d */
.wmn .wmn-list li > a { min-width: 0; font-size: 1rem; line-height: 1.35; font-weight: 800; }
.wmn .wmn-list li > a:hover { color: var(--wm-navy); text-decoration: underline; text-underline-offset: 3px; }
.wmn .wmn-st { display: inline-flex; align-items: center; gap: .5rem; justify-self: end; white-space: nowrap; }
.wmn .wmn-st-txt { font-size: .8125rem; line-height: 1; font-weight: 700; font-style: normal; }   /* 취소 = 배지 없이 굵은 글자(규칙 3장) · /find/ 취소 글자와 같은 값(wmm-find.css:163·533 — 검토 design #13) */
.wmn .wm-word { font-size: .9375rem; font-weight: 900; font-style: italic; white-space: nowrap; color: var(--wm-ink); }   /* find 13장 값 · 빨강 글자 금지 */
.wmn .wmn-list .nw-why { grid-column: 2 / -1; font-size: .8125rem; line-height: 1.5; font-weight: 500; }

/* ═══ 8. 맨 밑 안내 (규칙 4⑨ · Q12) — 「이 화면에 대해」 + 「접수 정보는 주최 측 공지가 우선」 ═══ */
/* 위 1rem (검토 #8) — 바로 위 «찾기» 구역(.wm-sec)이 아래 여백(--wm-sy)을 이미 가져 4rem 이면 1440 에서 빈 띠가 약 150px 였다 */
.wmn .wmn-end { padding-top: 1rem; padding-bottom: 2.5rem; }
.wmn .wmn-end .rec-notes h3 { margin-bottom: .75rem; font-size: 1.25rem; line-height: 1.3; font-weight: 900; font-style: italic; }
/* 🔴 :where(.wm) ul{list-style:none;padding:0} 이 점을 지운다 — 되살린다(race 설계 2-8) */
.wmn .wmn-end .rec-notes ul { max-width: 64rem; list-style: disc; padding-left: 1.25rem; }
.wmn .wmn-end .rec-notes li { font-size: .875rem; line-height: 1.6; font-weight: 500; }
.wmn .wmn-end .rec-notes li + li { margin-top: .35rem; }
.wmn .wmn-end a { text-decoration: underline; text-underline-offset: 3px; }
.wmn .wmn-end a:hover { color: var(--wm-navy); }
.wmn .wmn-end .rec-foot { margin-top: 1.5rem; font-size: .875rem; line-height: 1.6; font-weight: 500; }
/* 빈 안내(?cat= 분류가 비었을 때 · 언론 자료가 비었을 때) */
.wmn .wmn-empty { padding: 2rem; background: var(--wm-page); font-weight: 700; }
.wmn .wmn-empty .rec-why { display: block; margin-top: .5rem; font-size: .875rem; font-weight: 500; }
.wmn .wmn-etc { padding-top: 0; }

/* ═══ 9. 기사 머리·큰 사진 (설계 4-1 · 4-2) — 48rem 글 칸 하나를 가운데에(WMM 실측 768px) ═══ */
.wmn--art { padding-top: 7rem; }                                         /* WMM 지면 위 여백 112/96/64 (16장) */
.wmn .wmn-art { padding: 0 var(--wm-gx); }
.wmn .wmn-ahd, .wmn .wmn-body, .wmn .wmn-race, .wmn .wmn-foot, .wmn .wmn-talk, .wmn .wmn-x { max-width: 48rem; margin-left: auto; margin-right: auto; }
.wmn .wmn-crumb { margin-bottom: 1.5rem; font-size: .875rem; font-weight: 700; }   /* 제목 «위»(WMM · Q1) · 「›」는 글자 그대로 */
.wmn .wmn-crumb a { text-decoration: underline; text-underline-offset: 3px; }
.wmn .wmn-crumb a:hover { color: var(--wm-navy); }
/* 꼬리표 줄 — 분류·범위 = 회색 기울인 상자 · 「속보」(B 판정 .is-hot) = 빨강 + 흰 글자 700 · 진행 중 = 남색 + 흰 글자 800(상태 낱말 없음 — 접수 상태가 아니다) */
.wmn .wmn-flags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; padding-left: .3rem; }
.wmn .wmn-flags:not(:has(span)) { display: none; }                       /* 꼬리표가 하나도 없는 글(덤) */
.wmn .wmn-flags > span { position: relative; isolation: isolate; display: inline-block; padding: .3rem .6rem; font-size: .75rem; line-height: 1; font-weight: 700; font-style: italic; color: var(--wm-ink); }
.wmn .wmn-flags > span::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skew(-16deg); background: var(--wm-chip); }
.wmn .wmn-flags > .ar__kind.is-hot { color: #fff; }
.wmn .wmn-flags > .ar__kind.is-hot::before { background: var(--wm-hot); }
.wmn .wmn-flags > .ar__live { color: #fff; font-weight: 800; }
.wmn .wmn-flags > .ar__live::before { background: var(--wm-navy); }
/* 제목 = .wm-h2 크기 사다리 · 대문자 바꿈 없음(SEO = 제목 글자 그대로) · 긴 한글 제목은 낱말 단위로 (Q9) */
.wmn .wmn-t { margin-bottom: 1.5rem; font-size: 3rem; line-height: 1.05; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: none; word-break: keep-all; }
.wmn .wmn-lede { font-size: 1.125rem; line-height: 1.4; font-weight: 500; }   /* WMM text-size-medium */
.wmn .wmn-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-top: 1.25rem; margin-bottom: 3rem; font-size: .9rem; font-weight: 500; }
.wmn .wmn-meta b { font-weight: 800; }
.wmn .wmn-meta a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wmn .wmn-meta a:hover { color: var(--wm-navy); }
/* 큰 사진 — 최대 70rem(1120 · 원본보다 키우지 않는다) · 원본 1120:480 비율 그대로(갈무리에 글자가 있어 자르지 않는다) · 막 없음 · 출처는 사진 «아래» */
.wmn .wmn-hero { max-width: 70rem; margin: 0 auto 4rem; }
.wmn .wmn-hero img { display: block; width: 100%; height: auto; }
.wmn .wmn-hero figcaption { margin-top: .5rem; font-size: .8125rem; line-height: 1.5; font-weight: 500; text-align: left; color: var(--wm-ink); }

/* ═══ 10. 본문 글 (설계 4-3) — 🔴 모든 본문 규칙은 #wm-main #wmn-body 로 시작한다(세기 2,x,x).
   글 속 인라인 <style>(인터뷰 #riv · #rivk · #rivh … 세기 1,x,x)을 «차례가 아닌 세기»로 이기려는 것 — !important 없이.
   예외 하나 : 글쓴이가 태그에 직접 박은 style="…"(허드슨 4709 의 회색 사진 설명·둥근 사진)은 세기로 못 이겨 그 두 가지만 !important ═══ */
#wm-main #wmn-body { color: var(--wm-ink); font-size: 1rem; line-height: 1.6; font-weight: 500; }
#wm-main #wmn-body > :first-child { margin-top: 0; }
/* 글자 검정 — 글 속 스타일의 회색·와인색 글자(#463f36 · #64748b · #8a8073 …)를 덮는다. 상자 위 흰 글자(아래 12장)는 더 센 규칙이 다시 정한다 */
#wm-main #wmn-body :is(p, li, dt, dd, td, th, figcaption, h2, h3, h4, blockquote, small) { color: var(--wm-ink); }
#wm-main #wmn-body :is(b, strong) { font-weight: 800; color: inherit; }
#wm-main #wmn-body p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; font-weight: 500; }   /* WMM 본문 16/25.6 500 (#333 → #000) */
#wm-main #wmn-body h2 { margin: 3rem 0 1rem; padding: 0; border: 0; font-size: 2rem; line-height: 1.2; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: none; }   /* .wm-h3 */
#wm-main #wmn-body h3 { margin: 3rem 0 1rem; padding: 0; border: 0; font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: none; }   /* .wm-hs = 표 위 소제목(「남자 1~3위」) */
#wm-main #wmn-body h4 { margin: 2rem 0 .5rem; padding: 0; border: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 900; font-style: italic; }   /* .wm-pc__t */
#wm-main #wmn-body small { font-size: .875rem; line-height: 1.5; }
/* 링크 — 남색 밑줄(WMM #64ccc9 는 흰 바탕 1.91:1 → 따라 하지 않음) */
#wm-main #wmn-body a { color: var(--wm-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#wm-main #wmn-body a:hover { text-decoration-thickness: 2px; }
#wm-main #wmn-body ul, #wm-main #wmn-body ol { margin: 0 0 1rem; padding-left: 1.25rem; }
#wm-main #wmn-body ul { list-style: disc; }
#wm-main #wmn-body ol { list-style: decimal; }
#wm-main #wmn-body li { font-size: 1rem; line-height: 1.6; font-weight: 500; }
#wm-main #wmn-body li + li { margin-top: .25rem; }
/* 인용 — 왼쪽 3px 남색 «세로» 막대(가로줄 아님 · B .rec-stamp 3px) */
#wm-main #wmn-body blockquote:not(.instagram-media) { margin: 1.5rem 0; padding: 0 0 0 1.25rem; border: 0; border-left: 3px solid var(--wm-navy); font-size: 1.125rem; line-height: 1.6; font-weight: 600; }
#wm-main #wmn-body blockquote.instagram-media { max-width: 540px; margin-left: auto !important; margin-right: auto !important; }   /* embed.js 가 인라인으로 margin 을 박는다 */
#wm-main #wmn-body figure { margin: 0 0 1.5rem; }
#wm-main #wmn-body figure img { width: 100%; }
#wm-main #wmn-body img { max-width: 100%; height: auto; border-radius: 0; }
#wm-main #wmn-body figcaption { margin-top: .3125rem; padding: 0; font-size: 1rem; line-height: 1.6; font-weight: 500; text-align: center; background: none; }   /* WMM 1rem 가운데 */
#wm-main #wmn-body iframe:not(.instagram-media) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }   /* 영상 = WMM 768×432 */
#wm-main #wmn-body .ri-src { margin-top: 2rem; font-size: .875rem; line-height: 1.5; font-weight: 500; }   /* 자료·출처 줄 = .wm-pc__s */
#wm-main #wmn-body hr { display: none; }                                  /* 장식 가로줄 금지(지금 본문에 0개) */
/* 글쓴이가 박은 인라인 style 둘 — 회색 사진 설명(style="font-size:13.5px;color:#64748b;margin-top:10px;line-height:1.6")·둥근 사진(border-radius:12px).
   세기로 못 이겨서 이 둘만 !important. 사진 설명은 색만 덮으면 13.5px 로 남아 강병철·김영주 글(1rem)과 크기가 달랐다(검토 design #11) → 넷 다 덮는다 */
#wm-main #wmn-body figcaption[style] { color: var(--wm-ink) !important; font-size: 1rem !important; line-height: 1.6 !important; margin-top: .3125rem !important; }
#wm-main #wmn-body img[style] { border-radius: 0 !important; }

/* ═══ 11. 표 — 사장님 10-06 「표디자인 순위등 새롭게 전부 새로운 디자인으로」 (설계 4-4)
   꼴 = /records/ 랭킹 표(B wmb/records.css 10-06 라이브) + 홈 .wm-tbl :
   머리 줄 .8125rem 800 기울임 · 그 밑 2px 남색(맨 끝 v3.5 덩어리가 검정 → 남색으로 덮는다) · 줄마다 1px #d6dce2 · 순위 900 기울임 남색 · 1·2·3위 금·은·동 메달 · 기록 800 tabular · 이름 700 ·
   표 폭 = 글 칸 100% · 560↓ 가로 밀기. PHP(runin_wmn_table)가 단 이름 : div.wmn-tw[tabindex=0] > table.wm-tbl.wmn-tbl(.wmn-tbl--rk)
   [data-wmn-r 순위 열][data-wmn-t 기록 열][data-wmn-n 이름 열][data-wmn-prose][data-wmn-hr][data-wmn-nohd] · span.wmn-rk(--1/2/3) = 순위 칸 «속 전체»
   🔵 세기 2,x,x 라 인터뷰 글 속 #riv .result td(1,1,1) · tr.win td(1,2,2) · #rivh table.wk th(1,1,2) 를 모두 이긴다 ═══ */
#wm-main #wmn-body .wmn-tw { margin: 1.5rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#wm-main #wmn-body .wmn-tw:focus-visible { outline: 3px solid var(--wm-navy); outline-offset: 2px; }   /* tabindex=0 — 키보드로 가로 밀기(검토 design #8) */
#wm-main #wmn-body figure > .wmn-tw { margin-top: 0; margin-bottom: 0; }   /* 블록 편집기 표(figure.wp-block-table) — figure 아래 1.5rem 하나만(검토 design #15) · 좌우(560↓ 밀기)는 그대로 */
#wm-main #wmn-body :is(h2, h3, h4) + .wmn-tw { margin-top: 0; }          /* 표 위 소제목과 사이 = 소제목 아래 1rem 하나 */
#wm-main #wmn-body .wmn-tbl { width: 100%; min-width: 100%; margin: 0; border: 0; border-collapse: collapse; background: transparent; font-size: .9375rem; line-height: 1.4; }
/* 머리 줄이 없는 표(허드슨 table.wk) — 다른 목록·표의 «머리 2px 줄»이 없어 시작이 안 보였다(검토 design #10). 장식 줄이 아니라 목록 머리 줄 · 색은 맨 끝 v3.5 덩어리가 남색으로 */
#wm-main #wmn-body .wmn-tbl[data-wmn-nohd] { border-top: 2px solid var(--wm-ink); }
/* 표 제목 <caption> — 표 위 소제목(.wm-hs · 본문 h3)과 같은 꼴(검토 design #15) */
#wm-main #wmn-body .wmn-tbl caption { caption-side: top; text-align: left; padding: 0 0 1rem; font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; color: var(--wm-ink); }
#wm-main #wmn-body .wmn-tbl :is(th, td) { padding: .85rem .75rem; border: 0; border-bottom: 1px solid var(--wm-line); background: transparent; color: var(--wm-ink); text-align: left; vertical-align: middle; white-space: nowrap; font-size: inherit; letter-spacing: 0; }
/* 몸 칸 기본 500 — «tbody tr td»(2,1,3)로 인터뷰 글의 1등 줄 강조 «#riv .result tr.win td{800}»(1,2,2)를 걷는다(설계 4-5 «800 해제») */
#wm-main #wmn-body .wmn-tbl tbody tr td { font-weight: 500; background: transparent; }
#wm-main #wmn-body .wmn-tbl tbody th { font-weight: 800; }                /* 줄 머리 칸(허드슨 표의 요일·날짜) = .wm-tbl tbody th 800 */
#wm-main #wmn-body .wmn-tbl :is(thead th, thead td), #wm-main #wmn-body .wmn-tbl[data-wmn-hr] tr:first-child th {
  font-size: .8125rem; font-weight: 800; font-style: italic; text-transform: uppercase; border-bottom: 2px solid var(--wm-ink); }   /* 사장님 지시 · .wm-tbl thead th */
#wm-main #wmn-body .wmn-tbl tbody tr { transition: background-color .2s ease; }
#wm-main #wmn-body .wmn-tbl tbody tr:hover { background: var(--wm-page); }
#wm-main #wmn-body .wmn-tbl td > :is(b, strong):first-child { font-weight: 800; }   /* 4666 「5km」 같은 첫 칸 굵은 글자 */
/* 순위 열 폭 = 글자만큼 — PHP 가 «머리 칸 글자»로 고른 열(data-wmn-r · 첫 열이 아닐 수 있다 — 검토 design #3). :has() 없이 열 번호로(옛 브라우저도) */
#wm-main #wmn-body .wmn-tbl[data-wmn-r="1"] tr > :nth-child(1):not([colspan]), #wm-main #wmn-body .wmn-tbl[data-wmn-r="2"] tr > :nth-child(2):not([colspan]),
#wm-main #wmn-body .wmn-tbl[data-wmn-r="3"] tr > :nth-child(3):not([colspan]), #wm-main #wmn-body .wmn-tbl[data-wmn-r="4"] tr > :nth-child(4):not([colspan]),
#wm-main #wmn-body .wmn-tbl[data-wmn-r="5"] tr > :nth-child(5):not([colspan]), #wm-main #wmn-body .wmn-tbl[data-wmn-r="6"] tr > :nth-child(6):not([colspan]),
#wm-main #wmn-body .wmn-tbl[data-wmn-r="7"] tr > :nth-child(7):not([colspan]), #wm-main #wmn-body .wmn-tbl[data-wmn-r="8"] tr > :nth-child(8):not([colspan]) { width: 1%; }
/* 순위 숫자(4위부터) — B .wmb-rk__n 값 */
#wm-main #wmn-body .wmn-rk { display: inline-block; font-size: 1.125rem; line-height: 1; font-weight: 900; font-style: italic; color: var(--wm-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 순위 칸 속 <b>·<strong>(글쓴이가 굵게 한 「1」) — span 이 칸 속 전체를 감싸므로 span 의 900 을 그대로 따른다(본문 b 800 규칙에 지지 않게) */
#wm-main #wmn-body .wmn-rk :is(b, strong) { font-weight: inherit; }
/* 1·2·3위 메달 — 기울인 상자(::after · skew -16°) 안에 «꽉 찬 왕관»(::before 마스크 · currentColor) + 숫자. 값·왕관 경로 = B records.css:104-121 그대로
   금 = 홈 울트라 노랑 #ffd100(검정 14.4:1) · 은 = --wm-silver #bbc1ca · 동 #d99a5b(8.7:1 · B 가 정한 값). 숫자는 빨강·남색이 아니라 검정 */
#wm-main #wmn-body .wmn-rk--1, #wm-main #wmn-body .wmn-rk--2, #wm-main #wmn-body .wmn-rk--3 {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .3rem; padding: .32rem .7rem .32rem .55rem; font-size: 1rem; color: var(--wm-ink); }
#wm-main #wmn-body :is(.wmn-rk--1, .wmn-rk--2, .wmn-rk--3)::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: skew(-16deg); background: var(--wmn-medal); }
#wm-main #wmn-body :is(.wmn-rk--1, .wmn-rk--2, .wmn-rk--3)::before { content: ""; flex: none; width: 1.05em; height: 1.05em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.4 7.2l5.2 4.6L12 3.6l4.4 8.2 5.2-4.6L19.6 17.6H4.4z'/%3E%3Cpath d='M4.4 19.2h15.2v2.4H4.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.4 7.2l5.2 4.6L12 3.6l4.4 8.2 5.2-4.6L19.6 17.6H4.4z'/%3E%3Cpath d='M4.4 19.2h15.2v2.4H4.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
#wm-main #wmn-body .wmn-rk--1 { --wmn-medal: var(--wm-c-ultra); }
#wm-main #wmn-body .wmn-rk--2 { --wmn-medal: var(--wm-silver); }
#wm-main #wmn-body .wmn-rk--3 { --wmn-medal: #d99a5b; }
/* 기록·시각 열(PHP 가 칸 글자로 판정 : 2:30:18 · 31:28 · 6:18/km) — 800 · 숫자 폭 고정 · 줄바꿈 없음 (1~8열) */
#wm-main #wmn-body .wmn-tbl[data-wmn-t~="1"] tbody td:nth-child(1), #wm-main #wmn-body .wmn-tbl[data-wmn-t~="2"] tbody td:nth-child(2),
#wm-main #wmn-body .wmn-tbl[data-wmn-t~="3"] tbody td:nth-child(3), #wm-main #wmn-body .wmn-tbl[data-wmn-t~="4"] tbody td:nth-child(4),
#wm-main #wmn-body .wmn-tbl[data-wmn-t~="5"] tbody td:nth-child(5), #wm-main #wmn-body .wmn-tbl[data-wmn-t~="6"] tbody td:nth-child(6),
#wm-main #wmn-body .wmn-tbl[data-wmn-t~="7"] tbody td:nth-child(7), #wm-main #wmn-body .wmn-tbl[data-wmn-t~="8"] tbody td:nth-child(8) {
  font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 이름 열(순위 표에서 머리 칸 「이름·선수…」 열, 없으면 순위 다음 «숫자도 시각도 아닌» 첫 열) — 700 · 1열(「이름 | 순위 | 기록」 꼴)도 둔다 */
#wm-main #wmn-body .wmn-tbl[data-wmn-n="1"] tbody td:nth-child(1),
#wm-main #wmn-body .wmn-tbl[data-wmn-n="2"] tbody td:nth-child(2), #wm-main #wmn-body .wmn-tbl[data-wmn-n="3"] tbody td:nth-child(3),
#wm-main #wmn-body .wmn-tbl[data-wmn-n="4"] tbody td:nth-child(4), #wm-main #wmn-body .wmn-tbl[data-wmn-n="5"] tbody td:nth-child(5),
#wm-main #wmn-body .wmn-tbl[data-wmn-n="6"] tbody td:nth-child(6), #wm-main #wmn-body .wmn-tbl[data-wmn-n="7"] tbody td:nth-child(7),
#wm-main #wmn-body .wmn-tbl[data-wmn-n="8"] tbody td:nth-child(8) { font-weight: 700; }
/* 마디 줄(「남자부」처럼 colspan 칸 하나뿐인 줄 — PHP 판정에서 빠지는 줄) — 작은 머리 꼴 800 기울임 · 줄바꿈 허용(긴 마디 이름이 표를 넓히지 않게) */
#wm-main #wmn-body .wmn-tbl tbody tr > [colspan]:only-child { padding-top: 1.5rem; font-weight: 800; font-style: italic; white-space: normal; }
/* 긴 글 칸이 있는 표(24자 넘는 칸 · 또는 14자 넘고 낱말 넷 이상) — 줄바꿈 허용 · 첫 칸만 한 줄(.wm-tbl 의 nowrap 을 글 표에 물려주지 않는다) ·
   여러 줄 칸 옆의 짧은 칸(날짜·요일)은 위에 붙인다(검토 design #1) */
#wm-main #wmn-body .wmn-tbl[data-wmn-prose] :is(th, td) { white-space: normal; min-width: 6rem; vertical-align: top; }
#wm-main #wmn-body .wmn-tbl[data-wmn-prose] tr > :first-child { white-space: nowrap; min-width: 0; }
/* 표 뒤 각주 p > small */
#wm-main #wmn-body .wmn-tw + p > small:only-child { display: block; margin-top: -1rem; }

/* ═══ 12. 글 속 «자기 디자인» 덮기 (설계 4-5 · Q6) — 인터뷰 글(#riv 강병철 · #rivk 김영주 · #rivh 허드슨 …)
   B 의 글·스타일 블록은 그대로다. 새 꼴은 «같은 class 이름»에 세기 2,x,x 로 입힌다 → 다음 인터뷰 글이 새 id(#riv2)를 써도 class 가 같으면 저절로 덮인다.
   ① 변수 다시 정의(가장 적게 건드림) ② 글꼴 Pretendard(명조 0) ③ 모서리·그림자·테두리 0 ④ 장식 가로줄(.pull·.nstat·.foot·.sub::after·.by·.stats) 0 ⑤ 회색·와인 → 검정·남색 ═══ */
#wm-main #wmn-body [id^="riv"] { --ink: #000; --ink2: #000; --muted: #000; --paper: #fff; --card: #fff; --wine: var(--wm-navy); --gold: var(--wm-navy); --line: var(--wm-line);
  color: var(--wm-ink); background: transparent; font-family: var(--wm-f); line-height: 1.6; }
#wm-main #wmn-body [id^="riv"] :is(h1, h2, h3, h4, p, div, span, dt, dd, figcaption, a, td, th, b, strong, li, i) { font-family: var(--wm-f); }
/* 글 속 안쪽 칸 .in — 강병철 글 «#riv .body .in{max-width:748px}»(1,2,0)가 48rem(768) 글 칸보다 20px 좁아 본문이 제목보다 양쪽 10px 들어가 있었다(검토 design #12).
   폭·좌우 안쪽 여백을 글 칸에 맡긴다(마스트 .mast .in 의 22px 도 — 바탕을 걷었으므로 제목 줄과 맞춘다) */
#wm-main #wmn-body [id^="riv"] .in { max-width: none; padding-left: 0; padding-right: 0; }
/* 마스트헤드·검은 첫 화면(.mast · .hero — 강병철 #riv 원형 꼴) → 흰 바탕 검정 글자. 사진 위 글자(.hfig figcaption)는 사진 «아래»로 */
#wm-main #wmn-body .mast { background: transparent; border: 0; }
#wm-main #wmn-body .mast .bn, #wm-main #wmn-body .mast .kd { color: var(--wm-ink); letter-spacing: 0; }
#wm-main #wmn-body .mast .bn i { color: var(--wm-navy); }
#wm-main #wmn-body .hero { background: transparent; color: var(--wm-ink); padding: 0 0 2rem; }
#wm-main #wmn-body .hero::after { display: none; }
#wm-main #wmn-body .hero h1 { margin: 1rem 0 0; color: var(--wm-ink); font-size: 2rem; line-height: 1.2; font-weight: 900; font-style: italic; letter-spacing: -.01em; }
#wm-main #wmn-body .hero .ky { color: var(--wm-ink); font-size: .875rem; font-weight: 700; letter-spacing: 0; }
#wm-main #wmn-body .hero .dek { color: var(--wm-ink); font-size: 1.125rem; line-height: 1.6; }
#wm-main #wmn-body .hero .by { border-top: 0; padding-top: 0; color: var(--wm-ink); }
#wm-main #wmn-body .hero .by b { color: var(--wm-ink); }
#wm-main #wmn-body .hfig img { border: 0; border-radius: 0; box-shadow: none; }
#wm-main #wmn-body .hfig figcaption { position: static; padding: 0; border-radius: 0; background: none; color: var(--wm-ink); }
#wm-main #wmn-body .stats { border-top: 0; }
#wm-main #wmn-body .stat .v { color: var(--wm-navy); font-size: 1.6875rem; font-weight: 900; font-style: italic; }
#wm-main #wmn-body .stat .l { color: var(--wm-ink); font-size: .875rem; font-weight: 700; }
/* 머리글 — 첫 글자 큰 와인 글씨(드롭캡)·첫 낱말 큰 명조(.lw) 걷기 → 4-1 머리글 꼴 1.125rem/1.6 500 */
#wm-main #wmn-body .lead { font-size: 1.125rem; line-height: 1.6; font-weight: 500; }
#wm-main #wmn-body .lead::first-letter { float: none; margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; }
#wm-main #wmn-body .lead .lw { font-family: inherit; font-size: 1.25rem; font-weight: 900; font-style: italic; letter-spacing: 0; color: var(--wm-ink); }
/* 숫자 칸 .nstat — 위아래 선 걷고 칸마다 연한 바탕(카드 칸 #f7f9fa) · 값 = .wm-hs 크기 남색 900 기울임(숫자 띠 꼴) */
#wm-main #wmn-body .nstat { gap: .5rem; margin: 0 0 1.5rem; border: 0; }
#wm-main #wmn-body .nstat .st { padding: 1rem 1.25rem; background: var(--wm-page); }
#wm-main #wmn-body .nstat .v { font-family: inherit; font-size: 1.6875rem; line-height: 1.1; font-weight: 900; font-style: italic; color: var(--wm-navy); font-variant-numeric: tabular-nums; }
#wm-main #wmn-body .nstat .l { margin-top: .25rem; font-size: .875rem; font-weight: 700; color: var(--wm-ink); }
#wm-main #wmn-body [id^="riv"] .ic { color: var(--wm-navy); }
/* 마디 머리 .sub — 와인 동그라미 번호 → 남색 기울인 상자(.wm-st) · 오른쪽으로 흐르던 가는 줄(.sub::after) 걷기 */
#wm-main #wmn-body .sub { gap: .75rem; margin: 3rem 0 1rem; }
#wm-main #wmn-body .sub::after { display: none; }
#wm-main #wmn-body .sub h2 { margin: 0; }
#wm-main #wmn-body .sub .n, #wm-main #wmn-body h2 .no, #wm-main #wmn-body .wkg .k {
  position: relative; isolation: isolate; width: auto; height: auto; min-width: 0; padding: .3rem .6rem; border-radius: 0; background: transparent;
  color: #fff; font-family: inherit; font-size: .75rem; line-height: 1; font-weight: 800; font-style: italic; letter-spacing: 0; }
#wm-main #wmn-body :is(.sub .n, h2 .no, .wkg .k)::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skew(-16deg); background: var(--wm-navy); }
#wm-main #wmn-body h2 .no { display: table; margin: 0 0 .5rem .3rem; }   /* 허드슨 #rivh 마디 번호(제목 위 작은 글자) */
/* 문답 — 질문 1rem 800 검정(왼쪽 세로 막대는 글이 준 것 그대로 · 색만 남색) · 「Q」 둥근 와인 상자 → 남색 각진 상자 */
#wm-main #wmn-body :is(.qa .q, p.q) { margin: 1.5rem 0 .5rem; font-size: 1rem; line-height: 1.6; font-weight: 800; }
#wm-main #wmn-body .q::before { border-radius: 0; background: var(--wm-navy); font-family: inherit; font-style: italic; }
#wm-main #wmn-body .q .en { margin-top: .25rem; font-size: .875rem; font-weight: 500; color: var(--wm-ink); }   /* 허드슨 영문 질문 — 글 속 회색(#94a3b8) 걷기 */
/* 인용 .pull — 위아래 2px 선 걷기 → 왼쪽 3px 남색 세로 막대 + 1.6875rem 900 기울임 검정 · 위 큰 따옴표 장식 걷기 */
#wm-main #wmn-body .pull { margin: 2rem 0; padding: 0 0 0 1.25rem; border: 0; border-left: 3px solid var(--wm-navy); text-align: left; color: var(--wm-ink);
  font-family: inherit; font-size: 1.6875rem; line-height: 1.3; font-weight: 900; font-style: italic; }
#wm-main #wmn-body .pull::before { display: none; }
/* 사진 .rfig — 둥근 모서리·테두리·카드 바탕 걷기 · 설명 = 4-3 figcaption 꼴 */
#wm-main #wmn-body .rfig { overflow: visible; border: 0; border-radius: 0; background: transparent; }
#wm-main #wmn-body .rfig img { border-radius: 0; }
/* 결과 표 .result(강병철) — 바탕·테두리·진한 제목 띠(#231a12) 걷기 → 제목 = 표 위 소제목 꼴(.wm-hs = 본문 h3 · 1.6875rem → 767↓ 1.375rem — 검토 design #5 :
   5256 표 위 h3 와 크기가 달랐다) · 표 = 11장 · 주석 .8125rem 검정 */
#wm-main #wmn-body .result { overflow: visible; margin: 1.5rem 0; border: 0; border-radius: 0; background: transparent; }
#wm-main #wmn-body .result .rt { margin: 0 0 1rem; padding: 0; background: none; color: var(--wm-ink); font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; letter-spacing: 0; }
#wm-main #wmn-body .result .wmn-tw { margin: 0; }
#wm-main #wmn-body .result .rc { padding: .5rem 0 0; border: 0; color: var(--wm-ink); font-size: .8125rem; font-weight: 500; }
#wm-main #wmn-body .result .m { color: var(--wm-ink); }
/* 기록 칸 격자 .grid4(김영주 구간 기록) — 사장님 「표 … 전부 새로운 디자인으로」 : 표가 아니라 칸 격자지만 «기록 표»라 같은 꼴로.
   둥근 칸·와인 윗줄·그림자 걷기 → 칸마다 연한 바탕 · 거리 .8125rem 800 기울임 · 시각 900 기울임 숫자 폭 고정 · 완주 칸 = 남색 단색 + 흰 글자 */
#wm-main #wmn-body .grid4 { gap: .5rem; }
#wm-main #wmn-body .grid4 .c { padding: 1rem .75rem; border: 0; border-radius: 0; box-shadow: none; background: var(--wm-page); }
#wm-main #wmn-body .grid4 .k { font-size: .8125rem; font-weight: 800; font-style: italic; letter-spacing: 0; color: var(--wm-ink); }
#wm-main #wmn-body .grid4 .t { margin-top: .35rem; font-family: inherit; font-size: 1.6875rem; line-height: 1.1; font-weight: 900; font-style: italic; letter-spacing: -.01em; color: var(--wm-ink); font-variant-numeric: tabular-nums; }
#wm-main #wmn-body .grid4 .c--fin { background: var(--wm-navy); }
#wm-main #wmn-body .grid4 .c--fin :is(.k, .t, .ic) { color: #fff; }
/* 한 주 훈련 칸 .wkg — 둥근 칸 걷기 · 요일 = 남색 기울인 상자(위 .sub .n 과 같은 규칙) · 쉬는 날 = 라벨칩 회색 + 검정 */
#wm-main #wmn-body .wkg { gap: .5rem; }
#wm-main #wmn-body .wkg .c, #wm-main #wmn-body .wkg .c--rest { border: 0; border-radius: 0; background: var(--wm-page); }
#wm-main #wmn-body .wkg .k { display: inline-block; margin: 0 0 .75rem; }
#wm-main #wmn-body .wkg .c--rest .k { color: var(--wm-ink); }
#wm-main #wmn-body .wkg .c--rest .k::before { background: var(--wm-chip); }
#wm-main #wmn-body .wkg .t { font-size: .875rem; line-height: 1.6; color: var(--wm-ink); }
/* 상자 .box(크루·장비 정보) — 둥근 테두리·와인 윗줄 걷기 → 연한 바탕 · 라벨 = 라벨칩(흰 바탕 기울인 상자) · 줄 사이 선 걷기 */
#wm-main #wmn-body .box { margin: 2rem 0; padding: 1.25rem 1.25rem 1.5rem; border: 0; border-radius: 0; background: var(--wm-page); }
#wm-main #wmn-body .box .bk { position: relative; isolation: isolate; display: inline-block; margin: 0 0 1rem .3rem; padding: .5rem 1rem; color: var(--wm-ink);
  font-size: .875rem; line-height: 1; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
#wm-main #wmn-body .box .bk::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skew(-16deg); background: #fff; }
#wm-main #wmn-body .box h3 { margin: 0 0 .75rem; padding: 0; border: 0; font-size: 1.25rem; line-height: 1.3; }
#wm-main #wmn-body .box dl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem 1rem; margin: 0; font-size: 1rem; }
#wm-main #wmn-body .box dt { padding: 0; border: 0; font-weight: 800; white-space: normal; }
#wm-main #wmn-body .box dd { margin: 0; padding: 0; border: 0; font-weight: 500; }
/* 바깥 링크 단추 .band(밴드 바로가기) = .wm-btn 주 단추(남색 · 흰 글자 · 800 기울임 · 모서리 0 · 테두리 .125rem #454581 · 안쪽 1rem 2rem · hover .2rem 들림) */
#wm-main #wmn-body .box .band { display: inline-flex; align-items: center; margin-top: 1rem; padding: 1rem 2rem; border: .125rem solid var(--wm-navy-bd); border-radius: 0;
  background: var(--wm-navy); color: #fff; font-size: 1rem; line-height: 1; font-weight: 800; font-style: italic; text-decoration: none; transition: transform .2s ease; }
#wm-main #wmn-body .box .band:hover { transform: translateY(-.2rem); }
/* 덧말 .note · 원문 인용 .src — 둥근 상자·점선 걷기 → 연한 바탕 + 왼쪽 3px 남색 세로 막대 */
#wm-main #wmn-body .note, #wm-main #wmn-body .src { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 0; border-left: 3px solid var(--wm-navy); border-radius: 0; background: var(--wm-page); font-size: .9375rem; line-height: 1.6; color: var(--wm-ink); }
#wm-main #wmn-body .src .t { margin: 0 0 .35rem; font-size: .8125rem; font-weight: 800; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--wm-ink); }
#wm-main #wmn-body .src p { margin: 0; font-size: .9375rem; font-style: italic; }
/* 글 맺음 .foot · .end — 위 선 걷기 · .875rem/1.6 검정 */
#wm-main #wmn-body :is(.foot, .end) { margin-top: 2rem; padding: 0; border: 0; font-size: .875rem; line-height: 1.6; font-weight: 500; color: var(--wm-ink); }

/* ═══ 13. 이 대회 정보 · 확인 안내 (설계 4-6) — 원문 aside.ar__race · footer.ar__foot «그대로» + wmn- 이름 덧붙임.
   값은 avatar v2 talk.css:43-49(.ar__race·.ar__foot 에 !important)와 «일부러 같게» — 그래서 두 규칙이 겨루지 않는다.
   🔴 한쪽 값을 바꾸면 다른 쪽도 같이(아니면 talk.css 의 !important 가 이긴다) ═══ */
.wmn .wmn-race { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 3rem; padding: 1.25rem 1.5rem; background: var(--wm-page); }
.wmn .wmn-race .ar__race-l { font-size: .875rem; font-weight: 800; font-style: italic; }
.wmn .wmn-race a { font-size: 1.125rem; font-weight: 900; font-style: italic; color: var(--wm-navy); }
.wmn .wmn-race a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wmn .wmn-foot { margin-top: 1.5rem; font-size: .875rem; line-height: 1.6; font-weight: 500; }
.wmn .wmn-foot a { text-decoration: underline; text-underline-offset: 3px; }
.wmn .wmn-foot a:hover { color: var(--wm-navy); }
.wmn .wmn-x { margin-top: 2rem; }

/* ═══ 14. 공감·공유 줄 (설계 4-7 · A social.php) — 마크업·JS 는 그대로, 모양만. 의견 칸(#riwc-talk) «안»은 건드리지 않는다(avatar v2 가 새 꼴) ═══ */
body.wmn-p .ri-a-rc { margin: 3rem 0 0; padding: 0; border-top: 0; font-family: var(--wm-f); }   /* 위 1px 줄 걷기(장식 가로줄) */
body.wmn-p .ri-a-rc__sum { padding: 0 0 .75rem; font-size: .875rem; font-weight: 600; color: var(--wm-ink); }
body.wmn-p .ri-a-rc__n { font-weight: 800; color: var(--wm-ink); }
body.wmn-p .ri-a-rc__faces i { border-color: var(--wm-line); box-shadow: none; }
body.wmn-p .ri-a-rc__bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 0; border-top: 0; }
/* 단추 = 보조 단추 꼴(2px 테두리 · 모서리 0 · 800 기울임 · hover = .2rem 들림, 색 채우기 없음) — 테두리·글자색은 맨 끝 v3.5 덩어리가 남색으로 */
body.wmn-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-ink); border-radius: 0; background: transparent; color: var(--wm-ink); 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.wmn-p .ri-a-rc__b:hover, body.wmn-p .ri-a-rc__b:active { background: transparent; transform: translateY(-.2rem); }
body.wmn-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.wmn-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.wmn-p .ri-a-rc__b.is-on .ri-a-rc__ic svg { fill: currentColor; }
body.wmn-p .ri-a-rc__c { font-weight: 800; color: var(--wm-navy); }
body.wmn-p .ri-a-rc__b.is-on .ri-a-rc__c { color: #fff; }
body.wmn-p .ri-a-rc__b:focus-visible, body.wmn-p .ri-a-rc__p:focus-visible { outline: 3px solid var(--wm-navy); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }
/* 감정 고르개 — 흰 둥근 알약·그림자 → 흰 바탕 2px 테두리(맨 끝 v3.5 덩어리가 남색으로) · 모서리 0 (자리·열림은 ri-a-social-css 그대로) */
body.wmn-p .ri-a-rc__pick { border: 2px solid var(--wm-ink); border-radius: 0; box-shadow: none; background: #fff; }
body.wmn-p .ri-a-rc__p { border-radius: 0; color: var(--wm-ink); font-family: var(--wm-f); font-size: .6875rem; font-weight: 700; }
body.wmn-p .ri-a-rc__p:hover { background: var(--wm-page); }
body.wmn-p .ri-a-rc__p.is-on { color: var(--wm-navy); }
/* 알림 토스트 — 남색빛 검정 알약 → 검정 · 모서리 0 · 흰 글자 600 */
body.wmn-p .ri-a-rc__toast { border-radius: 0; background: #000; color: #fff; font-family: var(--wm-f); font-weight: 600; }

/* ═══ 15. 다른 기사 (설계 4-9 · WMM OTHER NEWS) — 머리 h2 | 「뉴스 전체 →」 보조 단추 · 3열 × 2줄 · 세로 4rem 가로 2rem
   따라 하지 않음 : 「READ MORE ›」 단추 새로 만들기(카드에 이미 링크 둘) · 사진 hover 확대 · 제목 대문자 ═══ */
.wmn .wmn-more__in { max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t all" "list list"; align-items: end; gap: 2rem 1.5rem; }
.wmn .wmn-more__t { grid-area: t; }
.wmn .wmn-more__all { grid-area: all; justify-self: end; }
.wmn .wmn-grid--more { grid-area: list; gap: 4rem 2rem; }
.wmn .wmn-more__x { grid-column: 1 / -1; }

/* ═══ 16. 폭별 (1279 · 1023 · 991 · 767 · 560 · 479) — 기사와 같이 쓰는 것 · 목록 «찾기» 구역은 16-b ═══ */
@media (max-width: 991px) {
  .wmn .wmn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wmn--art { padding-top: 6rem; }
  .wmn .wmn-t { font-size: 2.5rem; }
}
@media (max-width: 767px) {
  .wmn .wmn-grid { grid-template-columns: minmax(0, 1fr); }
  /* 언론 분류 8구역 = 구역마다 «가로 밀기 줄»(카드 85% · 홈 .wm-track 폰 값) — 1열로 쌓으면 카드 49장이 세로로 늘어선다(Q11) · 화살표 없음(손가락으로 민다) */
  .wmn .wmn-grid--rail { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--wm-gx)); padding-right: var(--wm-gx); }
  .wmn .wmn-grid--rail::-webkit-scrollbar { display: none; }
  .wmn .wmn-grid--rail > .wmn-c { flex: 0 0 85%; scroll-snap-align: start; }
  /* 대회 소식 줄 — 날짜가 한 줄 위(= 홈 .wm-row 폰 값) */
  .wmn .wmn-list > li { grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .75rem; padding: .7rem .25rem; }
  .wmn .wmn-list .nw-d { grid-column: 1 / -1; font-size: .9375rem; }
  .wmn .wmn-list .nw-why { grid-column: 1 / -1; }
  /* 기사 */
  .wmn--art { padding-top: 4rem; }
  .wmn .wmn-lede { font-size: 1rem; line-height: 1.6; }
  .wmn .wmn-hero { margin-bottom: 3rem; }
  .wmn .wmn-hero figcaption { overflow-wrap: anywhere; }
  /* 다른 기사 — 「뉴스 전체 →」는 목록 «아래»(WMM 폰) · 세로 3rem */
  .wmn .wmn-more__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "list" "all"; }
  .wmn .wmn-more__all { justify-self: start; margin-top: .5rem; }
  .wmn .wmn-grid--more { row-gap: 3rem; }
  #wm-main #wmn-body h2 { font-size: 1.6875rem; }
  #wm-main #wmn-body h3 { font-size: 1.375rem; }
  #wm-main #wmn-body :is(.result .rt, .wmn-tbl caption) { font-size: 1.375rem; }   /* = 본문 h3 폰 값 */
  #wm-main #wmn-body .pull { font-size: 1.375rem; }
  #wm-main #wmn-body .grid4 .t { font-size: 1.375rem; }
}
/* 표 — 560↓ 감싸개가 화면 끝까지 나가 가로로 밀어 본다(B .rec-scroll 폰 값 · WMM /race-draws) */
@media (max-width: 560px) {
  #wm-main #wmn-body .wmn-tw { margin-left: calc(-1 * var(--wm-gx)); margin-right: calc(-1 * var(--wm-gx)); padding: 0 var(--wm-gx); }
  /* 강병철 결과 표 — 12장 «.result .wmn-tw{margin:0}»(2,2,0)이 위 밀기 규칙(2,1,0)을 이겨 화면 끝까지 안 나갔다(검토 design #14). 같은 세기로 뒤에 다시 */
  #wm-main #wmn-body .result .wmn-tw { margin-left: calc(-1 * var(--wm-gx)); margin-right: calc(-1 * var(--wm-gx)); padding: 0 var(--wm-gx); }
  #wm-main #wmn-body .wmn-tbl :is(th, td) { padding: .75rem .6rem; }
}
@media (max-width: 479px) {
  .wmn .wmn-t { font-size: 8vw; }
}

/* ═══ 16-b. /news/ 목록 «찾기» 구역 폭별 (v1.1.0) — 훈련코스 course.css 3장 문턱(1279 · 991 · 479) + /find/ 폰 칩 띠(767) ═══ */
@media (max-width: 1279px) {
  .wmn--list .wmn-grid, .wmn .wmn-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* = .cz-grid 1279 */
  .wmn .wmn-picks .wmn-c--big { grid-column: 1 / -1; }                    /* 큰 카드 한 줄 → 곁 2×2 */
}
/* 768~991 — 칸이 목록 «위» : 분류 = 가로 탭 줄(고른 것 = 남색 + 아래 4px 막대) · 칩 = 가로 밀기 한 줄 (= course.css 991 값 · 탭 줄 밑 1px 은 뺐다 — 장식 가로줄 금지) */
@media (min-width: 768px) and (max-width: 991px) {
  .wmn .wmn-side { display: flex; flex-direction: column; gap: 1rem; }
  .wmn .wmn-tabs ul { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--wm-gx)); }
  .wmn .wmn-tabs ul::-webkit-scrollbar { display: none; }
  .wmn .wmn-tabs li { flex: none; }
  .wmn .wmn-tab { position: relative; display: flex; align-items: baseline; gap: .4rem; padding: .75rem 1rem .85rem 0; font-size: 1rem; line-height: 1.2; font-weight: 900; font-style: italic; text-transform: uppercase; white-space: nowrap; }
  .wmn .wmn-tab i { font-size: .875rem; }
  .wmn .wmn-tab.is-on::before, .wmn .wmn-tab[aria-current]::before { content: ""; position: absolute; left: 0; right: 1rem; bottom: 0; height: 4px; background: var(--wm-navy); }
  .wmn .wmn-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--wm-gx)); padding: .1rem 0 .3rem .4rem; }
  .wmn .wmn-jump::-webkit-scrollbar { display: none; }
  .wmn .wmn-jump > a { flex: none; }
}
/* 767↓ — 칸 = «붙어 다니는 띠»(/find/ 폰 .ri-fm 값 : sticky top 0 · 흰 바탕 · 아래 1px · z 30) — 한 줄 가로 밀기 [분류 글자 탭 … | 바로가기 칩 …].
   🔵 한 줄로 둔다 — 두 줄(분류 + 칩)이면 폰 첫 화면 세로 110px 가 늘 가려진다. 높이 3.5rem < html scroll-padding-top 4rem 이라
      칩으로 #nw-… 에 가면 구역 머리가 띠 아래로 보인다.
   🔵 분류(?cat= = 지면을 다시 부르는 거르개)는 «글자 탭»(768~991 가로 탭 줄과 같은 꼴 : 900 기울임 · 고른 것 = 남색 글자 + 아래 4px 남색 막대),
      바로가기(#nw-… = 지면 안 이동)만 기운 회색 칩 — 예전엔 둘 다 같은 칩이라 한 줄에서 «하는 일»이 구별되지 않았다(검토 #5).
      고른 분류가 띠 밖(4~6번째)이면 PHP 의 작은 스크립트(script#wmn-side-cur)가 «띠만» 옆으로 밀어 보이게 한다(지면은 안 구른다) */
@media (max-width: 767px) {
  .wmn--list .wmn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* = .cz-grid 480~767 (언론 구역은 위 가로 밀기 줄 그대로) */
  .wmn .wmn-side { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .6rem; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--wm-gx)); padding: .5rem var(--wm-gx); background: #fff; border-bottom: 1px solid var(--wm-line); }
  .wmn .wmn-side::-webkit-scrollbar { display: none; }
  .wmn .wmn-side > nav { flex: none; }
  .wmn .wmn-tabs ul { display: flex; padding-left: 0; }
  .wmn .wmn-tabs li { flex: none; }
  /* 글자 탭 — 높이 2.5rem = 옆 칩과 같은 줄 높이(띠 57px 그대로) · 오른쪽 1rem = 탭 사이 · 고른 것 글자색은 2장 공통(남색) 그대로 */
  .wmn .wmn-tab { position: relative; display: inline-flex; align-items: center; gap: .35rem; height: 2.5rem; padding: 0 1rem 0 0; font-size: .9375rem; line-height: 1; font-weight: 900; font-style: italic; text-transform: uppercase; white-space: nowrap; }
  .wmn .wmn-tab i { font-size: .8125rem; }
  .wmn .wmn-tab.is-on::before, .wmn .wmn-tab[aria-current]::before { content: ""; position: absolute; left: 0; right: 1rem; bottom: 0; height: 4px; background: var(--wm-navy); }
  .wmn .wmn-jump { flex-wrap: nowrap; gap: .6rem; padding-left: 0; }
  .wmn .wmn-jump > a { flex: none; }
}
/* 로그인 화면 601~767 (검토 #9) — WP 관리 막대가 601~782 에서 46px «고정»이라 top 0 이면 띠가 그 밑으로 숨는다
   (600↓ 은 막대가 지면과 같이 구른다 · 768~782 는 띠가 안 붙는다). 러닝클래스 wmm-class.css 와 같은 값 */
@media (min-width: 601px) and (max-width: 767px) {
  body.admin-bar .wmn .wmn-side { top: 46px; }
}
@media (max-width: 479px) {
  .wmn--list .wmn-grid, .wmn .wmn-picks { grid-template-columns: minmax(0, 1fr); }   /* = .cz-grid 479 */
  .wmn .wmn-picks .wmn-c--big { grid-column: auto; }
}

/* ═══ 17. 움직임 줄이기 — 등장·hover 움직임 끄기(내용은 다 보인다 : wmm.css 가 .wm-rv 를 보이게 둔다) ═══ */
@media (prefers-reduced-motion: reduce) {
  .wmn *, .wmn *::before, .wmn *::after, body.wmn-p .ri-a-rc__b { transition: none !important; }
  body.wmn-p .ri-a-rc__b:hover, #wm-main #wmn-body .box .band:hover { transform: none; }
}

/* ═══ 10-06 규칙 v3.5 «검정은 글자에만» — 기사 표 머리 2px · 공감 단추 테두리 · 고르기 팝업 테두리를 남색으로(A 전수 검사) · 되돌리기 = 이 덩어리 삭제 ═══ */
#wm-main #wmn-body .wmn-tbl :is(thead th, thead td), #wm-main #wmn-body .wmn-tbl[data-wmn-hr] tr:first-child th { border-bottom-color: var(--wm-navy); }
#wm-main #wmn-body .wmn-tbl[data-wmn-nohd] { border-top-color: var(--wm-navy); }
body.wmn-p .ri-a-rc__b { border-color: var(--wm-navy); color: var(--wm-navy); }
body.wmn-p .ri-a-rc__b.is-on { background: var(--wm-navy); border-color: var(--wm-navy-bd); color: #fff; }
body.wmn-p .ri-a-rc__pick { border-color: var(--wm-navy); }
body.wmn-p .ri-a-rc__toast { background: var(--wm-navy); }   /* v1.1.0 — 공유 토스트 검정 면(13장 #000) → 남색(v3.5 «검정 면 금지 — 예외 없음») */

/* ═══ 18. 옛 캐시본 호환 (v1.1.0) — 배포 직후 «v1.0.1 마크업 캐시본 + 새 CSS» 가 만나는 몇 분(news/ 캐시를 비우기 전) 동안
   분류 칩(옛 a.wmn-chip · section.wmn-own 맨 앞 nav)이 맨 글자 줄이 되지 않게 옛 값 그대로 둔다.
   새 마크업엔 .wmn-chip 도 «.wmn-own 바로 아래 .wmn-tabs» 도 없어 아무 일도 안 한다. news/ 캐시를 비우고 30분 넘게 지나면 이 덩어리는 지워도 된다 ═══ */
.wmn .wmn-own > .wmn-tabs { margin-bottom: 2rem; }
.wmn .wmn-own > .wmn-tabs ul { display: flex; flex-direction: row; flex-wrap: wrap; gap: .5rem .6rem; padding-left: .4rem; border-top: 0; }
.wmn .wmn-chip { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 2.75rem; padding: 0 1.1rem; font-size: .9375rem; font-weight: 800; font-style: italic; color: var(--wm-ink); white-space: nowrap; }
.wmn .wmn-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skew(-16deg); background: var(--wm-chip); }
.wmn .wmn-chip.is-on, .wmn .wmn-chip[aria-current] { color: #fff; }
.wmn .wmn-chip.is-on::before, .wmn .wmn-chip[aria-current]::before { background: var(--wm-navy); }
.wmn .wmn-chip i { font-style: normal; font-size: .8125rem; font-weight: 500; margin-left: .4rem; }
.wmn .wmn-hd > .wmn-jump { flex-wrap: wrap; overflow: visible; margin-top: 2rem; margin-right: 0; }   /* 옛 머리(section.wmn-hd) 속 바로가기 — 767↓ 한 줄(nowrap)이면 390 에서 문서가 951px 로 샌다(흉내 실측) */