/* ═══ 규칙 한 장 : https://idc.kr/_claude/CODE_RULES.txt
   RUNIN.KR 러닝클래스 /class/ · /class/{slug}/ — World Marathon Majors 디자인(공용 wm- · 지면 고유 wmk-) · 2026-10-06 · 클로드A ═══
   설계서 : D:\작업중\2026년\10월\런닝인사이드\러닝클래스WMM시안\ref\class_설계서.md (값의 출처 = 5장 값표 · 4장 구역별 · 6-4 기능 규칙 · 8-6 목차)
   📌 사장님 10-06 : 「일단 , 라이브로 해 … 라이브로 하면서 중간 중간 보고해」 — 미리보기 결재 없이 켠다(D1~D18 = 기본안).
   🔴 이 파일은 홈 wmm.css «뒤에» 실린다(같은 부품·같은 값). 홈 부품(.wm-btn .wm-sec .wm-pc .wm-chip …)은 다시 정의하지 않고,
      이 지면 전용(wmk-)과 «옛 app.css·utmb.css·ri-cr-css 가 맡던 기능 규칙»만 둔다. 선택자는 전부 body.wmk-p 또는 .wmk 아래 — 홈·/find/·크루와 섞이지 않게.
   🔴 본문 마크업은 «원문 그대로»다(PHP 가 문자열로 옮김). 모양은 원래 class(ri-cr__* · 거르개 폼 · ri-item · ri-panel …)와 태그를 «여기서» 집어 입힌다.
      .ri-field 는 발 알림 폼에도 있다 → 거르개 규칙은 .wmk-src 아래(1.1.0 — 1.0.1 의 .wmk-filt 는 걷었다), 등록 폼 규칙은 #ri-cr 아래로만(설계 6-2).
   🔴 글자는 완전 검정(#000 = --wm-ink). 회색 글자 금지(옛 #333 · --ri-text-sub 인라인은 PHP 가 걷었다).
      v3.5(10-06 사장님 「넘 검정색이야」) : 검정은 «글자»에만 — 면·띠·2px 줄·단추 테두리·꺾쇠는 남색 #000075 · 1px 구분 줄은 #d6dce2.
   🔴 포인트 빨강(--wm-hot)은 이 지면 본문에 «0» — «지금 서둘러라»가 없다(설계 0-8). 「유료 상위 노출」 = 연회색 칩 + 검정(표시광고 표기 · 빨강 아님 · D8).
   🔴 장식용 가로줄 금지 — 옛 ri-cr__h 밑줄·동의 칸 테두리를 버렸다. 남긴 줄은 «목록·표 규칙»(머리 2px 남색 · 줄마다 1px #d6dce2) 뿐.
   🔴 사진 막·그라데이션·hover 확대 0(사장님 10-05 「블랙 오버레이 하지 마」) · 사진 위 글자 0 — 예외는 «불투명 흰 꼬리표 칩» 하나(규칙 3 «꼬리표» · /course/ 카드와 같음 · 1.1.0).
   🔴 :has() 는 쓰지 않는다 — 형제 선택자(+)·:first-of-type 으로만.
   🔵 되돌리기 : wmm-class/ENABLED(·ENABLED-single) → .off (CSS 만 고쳤으면 캐시 삭제 불필요 — 파일 링크 + ?ver=filemtime · 캐시본은 30분까지 옛 ver)
   ■ 1.0.0 (10-06) 첫 판. 설계와 다르게 둔 값(README 6장) : 훈련 카드 꼬리표 = 흰 칩(카드 바탕 #f7f9fa 위 #f2f4f5 는 안 보인다 — wmm-race 5장과 같은 처리) ·
     자리표시 글자 #767676(wmm-reg 1.0.1 과 같은 값) · 상세 첫 화면 글 칸 왼쪽 안쪽 0 · 사진 자르지 않음(wmm-race 1.0.1 검토와 같은 값)
   ■ 1.0.1 (10-06 검토 반영) ① 거르개 폼 이름 글자를 이 파일에서 걷음(아래 🔴) ② 빈 결과 위 2px 남색 줄 걷음(설계 4-5 엔 줄이 없다 · 목록이 없어 장식 줄)
     ③ 「뉴스 전체 →」 초점 = 남색 3px + 흰 2px(흰 바탕 위 — wmm.css:57 흰 테두리+검정 겹이 걸리고 있었다) ④ 의견 칸 「로그인하고 의견 남기기 →」 테두리·글자 남색 ·
     공감 줄 아이콘 남색(v3.5 «테두리·아이콘 = 남색» — avatar v2 · social 은 검정)
   ■ 1.1.0 (10-06 18시대 · 사장님 「대회일정 훈련코스 리뉴얼된 디자인풍이 좋아 … 러닝클래스가 많으면 대회일정처럼 쉽게 찾을 거 아냐」) — 목록만 /course/(B) 꼴
     2장 머리(h1 + 남색 개수) → 3장 왼쪽 칸(세로 목록 · 묶음 칩 · 조건 지우기 · 바로 가기 줄 · 숨긴 원래 폼) → 4장 오른쪽(0건 한 줄+단추 · 줄 목록 · 쪽 넘김 ·
     /course/ 사진 카드 꼴 훈련 카드 · 빈 결과) → 5장 등록 폼(오른쪽 칸 안 · 칸 2열은 1279↓) → 10장 폭별(≥992 왼쪽 28% sticky 7.5rem · 991↓ 위로 쌓고
     가로로 미는 줄 · 767↓ 왼쪽 칸 = 붙어 다니는 칩 띠 한 줄). 상세(7~9장)는 한 글자도 안 바꿨다. 값 출처 = B wmb/course.css(10-06 라이브 GET 1회)
   ■ 1.1.0 검토 반영(10-06 19시대 · 배포 전 · 판 번호 그대로 · 번호 = 검토 원문 번호 · PHP·README 와 같음) ② 폰 칩 띠는 «고르기 묶음이 있을 때만» 붙어 다닌다(.wmk-lay--f — PHP 가 단다 ·
     거르개 없는 ⓐ 의 띠 = 바로 가기 둘뿐인데 등록 폼 내내 화면 위 58px 를 덮고 있었다) ③ 로그인 992~1023 칸 top 2rem+32px(≥992 로그인 규칙이 세기로 이겨
     152px 빈 띠 — 상세 신청 칸도 같은 병이라 한 줄 같이) ④ ≥992 칸 overflow-x hidden + 오른쪽 안쪽 .45rem(비스듬 칩이 .36rem 삐져 가로 스크롤) ·
     칸 안 링크 초점은 «안쪽»(-3px — 칸·줄이 스크롤 상자라 바깥 초점이 잘린다 · 남색 칩 위는 흰 초점) ⑥ 479↓ 개수 6vw(2rem 이 h1 8vw 보다 컸다)
     ⑦ 초점 «검정 겹» 넷을 흰 바탕 규칙(3px 남색 + 2px 흰 겹 — 규칙 3 «초점»)으로 : 숨은 폼 「적용」 · 등록 「보내기」 · 상세 「신청하러 가기」 ·
     0건 「클래스 올리기」 단추(wmm.css:57 .wm-btn 값은 «남색·사진 위» 용 — 이 넷은 흰·연한 바탕 위) ⑧ 머리 주석 .wmk-filt → .wmk-src (⑤ = PHP «지금» 판정 · ① = PHP 숫자)
   🔴 이 파일에 «ri-filte»+«r» · «rec-wra»+«p» 두 낱말을 «붙여» 쓰지 않는다(주석 포함). A i18n-core 는 외국어 <title> 이 한글로 남으면 HTML «어디든»
      그 글자가 있으면 제목을 「Find a race」(records)로 바꾼다(i18n-core.php:584-586). wmm-class/INLINE 비상구로 이 CSS 가 HTML 에 실리면 판정이 바뀌어
      대조 #5 가 외국어 목록 6개를 늘 옛 지면으로 보낸다(10-06 검토 #1). 거르개 칸 안 이름은 «> form» · [class*="filter__foot"] 꼴로 집는다(세기 같음).
      PHP(runin_wmk_css_safe)도 실을 때 한 번 더 이스케이프한다 — 두 겹 */

/* ═══ 0. 기능 규칙 (설계 6-4) — 옛 CSS 를 걷으면서 «빠지면 오류 없이 깨지는» 것만 옮겼다 ═══ */

/* 🔴 꿀단지 div.ri-cr__hp(라벨 「홈페이지」) — 옛 classreg.php:200(style#ri-cr-css)에만 있었다. 드러나면 사람이 채우고,
      처리기(classreg.php:271)가 «접수되었습니다»라며 신청을 버린다(= 신청 소실). head 인라인 <style id="wmk-crit">(PHP RUNIN_WMK_CRIT)와
      «같은 값»을 한 번 더 — 둘 중 하나만 살아도 숨는다. display:none 금지(classreg.php:199 「기계가 그것을 보고 건너뛴다」). 지우지 말 것 */
body.wmk-p .ri-cr__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* 화면낭독기 전용 글 — 빠지면 「(새 창)」·메뉴 숨은 글이 화면에 다 보인다 (= .wm-sr, wmm.css:43 · find :12) */
body.wmk-p .ri-sr, body.wmk-p .screen-reader-text, body.wmk-p .ri-a-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; }
/* 아이콘(sprite <use>) — 크기를 안 주면 svg 기본 300×150 으로 터진다(find :14) */
body.wmk-p svg.ri-i { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
/* hidden 속성 — 옛 app.css 가 맡던 것. 공감 줄 요약·고르기 팝업·의견 수(social.php 가 hidden 으로 여닫는다)·숨은 알림 모달이 보이지 않게.
   알림 모달은 app.js 가 열 때 hidden 을 «뗀다»(app.js:125-126) — 이 규칙과 부딪치지 않는다(wmm-race 0장과 같음) */
body.wmk-p [hidden] { display: none !important; }
/* 알림 모달(app.js 가 is-open·hidden 을 함께 바꾼다 · 이 지면엔 여는 단추 0 이지만 원문 그대로 남겼다) — 막 색 = .wm-dlg::backdrop(wmm.css:493) · find :25-28 */
body.wmk-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.wmk-p .ri-modal.is-open { display: flex; }
body.ri-locked { overflow: hidden; }
body.wmk-p .ri-modal__panel { max-height: 90vh; overflow-y: auto; }
body.wmk-p .ri-modal__head h2 { padding-right: 3.5rem; font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; }   /* = .wm-hs */
body.wmk-p .ri-modal .wm-dlg__x { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
body.wmk-p .ri-modal .wm-dlg__x svg { width: 1.25rem; height: 1.25rem; }

/* ═══ 1. 머리 — 메뉴 줄 «붙어 다니기» · 「러닝클래스」 «지금 여기» (wmm-find.css 1장·11장 · wmm-reg.css 1장과 같은 값) ═══
   🔴 홈 .wm-nav{position:sticky} 는 header.wm-head 상자 «안»에 갇혀 헤더가 지나가면 같이 사라진다(find 검토 실측).
   → 헤더 «통째»를 붙이고 로고 줄 높이(4.5625rem = wmm.css .wm-brand__in)만큼 위로 빼서 메뉴 줄만 남긴다. 1023↓ 은 메뉴 줄이 없다(wmm.css:525) */
@media (min-width: 1024px) {
  body.wmk-p .wm-head { position: sticky; top: -4.5625rem; z-index: 50; }
  body.wmk-p.admin-bar .wm-head { top: calc(32px - 4.5625rem); }                            /* 로그인 화면 — 관리 막대(32px) 아래에 메뉴 줄 */
}
/* 목록 = aria-current="page" · 상세 = "true"(「러닝클래스 아래」) — 값과 상관없이 [aria-current] 로 잡는다(설계 4-9) */
body.wmk-p .wm-nav li a[aria-current] { font-weight: 800; }
body.wmk-p .wm-nav li a[aria-current]::after { transform: none; }                          /* 3px 남색 밑줄 고정(hover 값 wmm.css:171-173) */
body.wmk-p .wm-dlg--nav a[aria-current], body.wmk-p #wm-sheet a[aria-current] { color: var(--wm-navy); font-weight: 900; }

/* ═══ 2. 찾기 구역 머리 section.wmk-sec (1.1.0) — h1(원문 태그 · class 없음) + (ⓑ·ⓒ) 개수 사본 · 바로 아래 [왼쪽 칸 | 오른쪽] ═══
   /course/(B) 머리 꼴 = 큰 900 기울임 h1 + 남색 숫자. 설명 한 줄은 사장님 10-05 «맨 밑으로»(6장)라 여기엔 개수만(/find/ 머리와 같은 자리) */
.wmk .wmk-sec { padding-top: 2.5rem; padding-bottom: 0; }                                    /* 지면 첫 구역 = find .wm-fd-sec(wmm-find.css:60) · 아래 0(맨 밑 6장이 위 4rem 을 갖는다) */
.wmk .wmk-sec__hd { flex-wrap: wrap; align-items: flex-end; }                               /* .wm-sec__hd(양끝 정렬 · 아래 1.75rem) 그대로 + 줄바꿈 */
/* 🔵 h1 은 원문 태그 그대로라 class 가 없다(PHP 주석 — i18n-core 번역 자리 보존). 값 = .wm-h2(wmm.css:64) · 대문자 바꿈 없음(설계 4-1) */
.wmk .wmk-sec__hd > h1 { margin: 0; font-size: 3rem; line-height: 1.05; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: none; color: var(--wm-ink); min-width: 0; }
/* 개수 = .wm-find__cnt b(wmm.css:297) · find .wm-fd-cnt 와 같은 값 */
.wmk .wmk-cnt { font-size: 2rem; line-height: 1; font-weight: 900; font-style: italic; color: var(--wm-navy); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ═══ 3. 왼쪽 칸 div.wmk-side (1.1.0 — /course/ 거르개 칸 꼴 · B wmb/course.css 1장 값) ═══
   [묶음 이름 + 세로 목록(첫 select)] [묶음 이름 + 칩(나머지 select)] [조건 지우기] [바로 가기 줄] [원래 폼 div.wmk-src — 늘 숨김 · SELECTS 때만 보임]
   🔴 칸 바탕은 흰색(/course/ 와 같음 — 목록 줄·칩이 제 모양을 가진다). 줄은 «목록 머리 2px 남색 + 줄마다 1px» 규칙만(장식 줄 0) */
.wmk .wmk-lay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.wmk .wmk-lay--one { display: block; }
.wmk .wmk-side { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
.wmk .wmk-main { min-width: 0; }
.wmk .wmk-grp { min-width: 0; }
/* 묶음 이름(원문 label 글자 「수준」「형태」「지역」) = course .cz-group__n 값(.8125rem 900 기울임 대문자) · 검정 */
.wmk .wmk-gn { display: block; margin: 0 0 .6rem; font-size: .8125rem; line-height: 1.3; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--wm-ink); }
/* 세로 목록 = course .wmbc-tabs — 머리 2px 남색 · 줄마다 1px · 고르면 남색 글자 + 왼쪽 4px 남색 막대 · 숫자는 오른쪽 */
.wmk .wmk-tabs { display: flex; flex-direction: column; border-top: 2px solid var(--wm-navy); }
.wmk .wmk-tab {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-width: 0;
  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; color: var(--wm-ink); transition: background-color .2s ease, color .2s ease;
}
.wmk .wmk-tab__t { min-width: 0; }
.wmk .wmk-tab b { flex: none; font-size: .875rem; font-weight: 700; font-style: normal; font-variant-numeric: tabular-nums; }
.wmk .wmk-tab:hover { background: var(--wm-nav1); }
.wmk .wmk-tab.is-on { color: var(--wm-navy); }
.wmk .wmk-tab.is-on::before { content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 4px; background: var(--wm-navy); }
/* 칩 = 홈 .wm-chip(비스듬 회색 · 고르면 남색 + 흰 글자) · 칸 안 크기 = course .wmbc-side .wm-chip(2.5rem · 좌우 .95rem · .875rem) */
.wmk .wmk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; padding-left: .4rem; }
.wmk .wmk-side .wm-chip { height: 2.5rem; padding: 0 .95rem; font-size: .875rem; }
/* 자식 분류(원문 option 앞 전각 빈칸 — 「서울」 아래 「강남」) = 한 단 낮게 : 글자 .8125rem 700 */
.wmk .wmk-side .wm-chip.wmk-opt--sub { font-size: .8125rem; font-weight: 700; }
/* 조건 지우기 = 보조 단추(규칙 3 · v3.5 : 투명 · 2px 남색 테두리 · 남색 글자) · 작은 크기 = 칩 높이 */
.wmk .wmk-reset {
  align-self: flex-start; display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1rem;
  border: 2px solid var(--wm-navy); color: var(--wm-navy); font-size: .875rem; line-height: 1; font-weight: 800; font-style: italic; white-space: nowrap; transition: transform .2s ease;
}
.wmk .wmk-reset:hover { transform: translateY(-.2rem); }
/* 바로 가기 줄(「러닝 상식·훈련 →」 「클래스 올리기 →」) = 세로 목록과 같은 줄 꼴 · 화살표 남색(규칙 v3.5 «아이콘 = 남색») · hover 화살표만 .35rem */
.wmk .wmk-go { display: flex; flex-direction: column; border-top: 2px solid var(--wm-navy); }
.wmk .wmk-go__a {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-width: 0;
  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; color: var(--wm-ink); transition: background-color .2s ease, color .2s ease;
}
.wmk .wmk-go__a:hover { background: var(--wm-nav1); color: var(--wm-navy); }
.wmk .wmk-go__i { flex: none; color: var(--wm-navy); font-style: normal; font-weight: 800; transition: transform .2s ease; }
.wmk .wmk-go__a:hover .wmk-go__i { transform: translateX(.35rem); }
/* 칸 안 고르기·바로 가기 초점 — «안쪽» 3px(검토 반영 ④). 칸(≥992 세로 스크롤) · 줄(768~991 가로로 미는 줄) · 띠(767↓) 가 다 스크롤 상자라
   .wm :focus-visible 의 바깥 초점(2px 띄움 + 3px)이 칸 가장자리에서 잘린다(꽉 찬 세로 목록 줄은 좌우가 통째로 · 칩은 비스듬 모서리).
   남색으로 채운 «고른 칩»(≥768 칩 · 767↓ 세로 목록 줄도 칩 꼴)은 남색 초점이 안 보이니 흰 초점(규칙 3 «남색 위 = 흰 테두리») */
.wmk .wmk-side a:focus-visible { outline-offset: -3px; box-shadow: none; }
.wmk .wmk-side .wm-chip.is-on:focus-visible { outline-color: #fff; }
/* 원래 거르개 폼 — 늘 [hidden](0장 [hidden] 규칙 + 브라우저 기본). wmm-class/SELECTS 를 켠 날만 보인다 → 그때의 모양(1.0.1 거르개 칸 값 그대로).
   🔵 이름은 «> form» · [class*="filter__…"] 꼴로 집는다 — 머리 🔴(그 낱말을 이 파일에 붙여 쓰지 않는다) */
.wmk .wmk-src { min-width: 0; background: var(--wm-page); padding: 1rem 1rem 1.5rem; }
.wmk .wmk-src > form { margin: 0; }
.wmk .wmk-src .ri-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.wmk .wmk-src .ri-field { min-width: 0; margin: 0; }
.wmk .wmk-src .ri-field label { display: block; margin: 0 0 .3rem; font-size: .875rem; line-height: 1.4; font-weight: 900; font-style: italic; color: var(--wm-ink); }
.wmk .wmk-src select {
  display: block; width: 100%; min-height: 3.25rem; margin: 0; padding: .75rem 1rem;
  border: .125rem solid var(--wm-field); border-radius: 0; background-color: #fff; box-shadow: none;
  font-family: inherit; font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--wm-ink);
}
.wmk .wmk-src select:focus { outline: none; border-color: var(--wm-navy); box-shadow: 0 0 0 2px var(--wm-navy); }
.wmk .wmk-src [class*="filter__foot"] { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.wmk .wmk-src [class*="filter__count"] { font-size: 1.5rem; line-height: 1; font-weight: 900; font-style: italic; color: var(--wm-navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wmk .wmk-src .ri-header__spacer { flex: 1 1 0; }
.wmk .wmk-src button {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: .75rem 1.25rem; border: .125rem solid var(--wm-navy-bd); border-radius: 0; background: var(--wm-navy); color: #fff;
  font-family: inherit; font-size: .9375rem; line-height: 1; font-weight: 800; font-style: italic; cursor: pointer; transition: transform .2s ease;
}
.wmk .wmk-src button[data-ri="filter-reset"] { background: transparent; border: 2px solid var(--wm-navy); color: var(--wm-navy); }
.wmk .wmk-src button:hover { transform: translateY(-.2rem); }
/* 초점 = 흰·연한 바탕 규칙 «3px 남색 + 2px 흰 겹»(규칙 3 · 검토 반영 ⑦ — 옛 «흰 테두리 + 5px 검정 겹»은 남색·사진 위 용이고 v3.5 검정은 글자에만) */
.wmk .wmk-src button[type="submit"]:focus-visible { outline: 3px solid var(--wm-navy); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }

/* ═══ 4. 오른쪽 div.wmk-main (1.1.0) — ⓐ 한 줄+단추 → 훈련 카드 → 등록 폼 / ⓑ 줄 목록 → 쪽 넘김 → 훈련 카드 / ⓒ 빈 결과 ═══ */
/* ⓐ·ⓐ′ 0건 = «한 줄 + 클래스 올리기 단추»(사장님 결정 — 큰 빈 상자 아님 · 바탕·테두리 0). 단추 = 주 단추 .wm-btn 그대로 */
.wmk .wmk-none { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.wmk .wmk-none__t { margin: 0; font-size: 1.125rem; line-height: 1.5; font-weight: 800; color: var(--wm-ink); }
/* 단추 초점 — wmm.css:57 «.wm-btn:not(.wm-btn--line):focus-visible»(흰 테두리 + 5px 검정 겹 = 남색·사진 위 용)가 흰 쪽 위에서 걸린다
   → 흰 바탕 규칙 «3px 남색 + 2px 흰 겹»(규칙 3 · 「뉴스 전체 →」 1.0.1 과 같은 처리 · 세기 0,4,0 > 0,3,0 · 검토 반영 ⑦) */
.wmk .wmk-none .wmk-none__b:focus-visible { outline-color: var(--wm-navy); box-shadow: 0 0 0 2px #fff; }
/* 구역 사이 = course .wmbc-block + .wmbc-block 3rem */
.wmk .wmk-main > .wmk-tipw, .wmk .wmk-main > .wmk-regw { margin-top: 3rem; }

/* 러닝 상식·훈련 div.wmk-tipw > section.bk-sec.wmk-tips — /course/ 사진 카드 꼴(B wmb/course.css .cz-card 값)
   ① 사진 원본 16:9(인포그래픽 글자가 들어 있어 16:10 으로 자르면 글자가 잘린다 — 설계 D3 · course 는 16:10) · 막·그라데이션·확대 0
   ② 꼬리표 「훈련」 = 사진 왼쪽 아래 흰 비스듬 칩(course .cz-card__tag · 불투명 칩이라 사진 위 글자 규칙에 걸리지 않는다 — 규칙 3 «꼬리표»)
   ③ 글은 사진 «아래» 연한 바탕 #f7f9fa · 제목 900 기울임 · 날짜 800 · 카드 아무 데나 눌림(제목 링크 덮개 — 사진 링크와 같은 주소) · hover 바탕 #ebf2f5
   🔵 마크업은 원문 그대로(B 틀:111-125) — 꼬리표가 글 칸(.bk-item__body) «안»이라 글 칸을 display:contents 로 풀어 카드 격자의 사진 칸에 겹친다 */
.wmk .wmk-tipw > .wmk-tips { padding: 0; }                                                   /* 원문 section 에 덧붙인 wm-sec 안쪽(4rem 2%)을 오른쪽 칸 안에서는 0 */
.wmk .wmk-tips__hd { margin-bottom: 1.25rem; }
.wmk .wmk-tips__hd h2 { margin: 0; font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; letter-spacing: -.01em; color: var(--wm-ink); }   /* = .wm-hs (wmm.css:66) */
/* 「뉴스 전체 →」 = 링크 단추 꼴(.wm-btn--link — PHP 가 이름만 덧붙임). 화살표는 글자 속 «→» 라 따로 움직이지 않는다 → hover 밑줄 */
.wmk .wmk-tips__hd .nc-h2__more { flex: none; white-space: nowrap; font-weight: 800; font-style: italic; text-transform: none; }
.wmk .wmk-tips__hd .nc-h2__more:hover { text-decoration: underline; text-underline-offset: 4px; }
/* 초점 — PHP 가 붙인 wm-btn 때문에 wmm.css:57 «.wm-btn:not(.wm-btn--line)» 의 흰 테두리 + 5px 검정 겹이 걸린다(남색 단추용 값).
   → 흰 바탕 규칙(「초점 3px 남색 + 2px 흰 겹」)으로 되돌린다. 세기 0,4,0 > 0,3,0 (10-06 검토 #5) */
.wmk .wmk-tips__hd .nc-h2__more:focus-visible { outline-color: var(--wm-navy); box-shadow: 0 0 0 2px #fff; }
.wmk .wmk-tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }   /* course .cz-grid · 1279↓ 2열 · 479↓ 1열(10장) */
.wmk .wmk-tc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-content: start; min-width: 0; background: var(--wm-page); transition: background-color .2s ease; }
.wmk .wmk-tc:hover { background: var(--wm-nav2); }
.wmk .wmk-tc .wm-pc__f { grid-area: 1 / 1; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wm-grey); }
.wmk .wmk-tc .wm-pc__f img { width: 100%; height: 100%; object-fit: cover; }
.wmk .wmk-tc .wm-pc__b { display: contents; }
.wmk .wmk-tc .bk-item__k {
  grid-area: 1 / 1; align-self: end; justify-self: start; z-index: 1; margin: .9rem 0 .8rem .9rem;
  position: relative; isolation: isolate; display: inline-block; padding: .3rem .6rem;
  font-size: .75rem; line-height: 1; font-weight: 800; font-style: italic; color: var(--wm-ink); white-space: nowrap;
}
.wmk .wmk-tc .bk-item__k::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transform: skew(-16deg); }
.wmk .wmk-tc h3 { grid-area: 2 / 1; margin: 0; padding: 1.1rem 1.25rem 0; font-size: 1.25rem; line-height: 1.3; font-weight: 900; font-style: italic; }
.wmk .wmk-tc h3 a { transition: color .2s ease; }
.wmk .wmk-tc h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }        /* 카드 전체 눌림(줄 목록 덮개와 같은 방식) */
.wmk .wmk-tc:hover h3 a, .wmk .wmk-tc h3 a:focus-visible { color: var(--wm-navy); }
.wmk .wmk-tc .bk-item__m { grid-area: 3 / 1; margin: 0; padding: .55rem 1.25rem 1.4rem; font-size: .875rem; line-height: 1.5; font-weight: 800; }

/* 목록 줄 ul.ri-list.wmk-list > li.ri-item.wmk-row (ⓑ · 설계 4-4) — 클래스 줄엔 사진이 없다(B 목록 틀:175-193) → /find/ 꼴 줄 그대로
   줄 = [제목 · 한 줄 정보 | 유료 칩] + 남색 꺾쇠 › · 줄 전체 눌림 */
.wmk .wmk-list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--wm-navy); }   /* 규칙 3 목록 머리 줄(v3.5 남색) */
.wmk .wmk-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t f" "m f";
  column-gap: 2rem; row-gap: .25rem; align-items: center; padding: 1rem 2.75rem 1rem .25rem;   /* 오른쪽 2.75rem = 꺾쇠 자리(find .wm-fr 값) */
  border-bottom: 1px solid var(--wm-line); transition: background-color .2s ease;
}
.wmk .wmk-row:hover { background: var(--wm-page); }                                          /* = .wm-row a:hover */
.wmk .wmk-row > h2 { grid-area: t; margin: 0; min-width: 0; font-size: 1.125rem; line-height: 1.35; font-weight: 800; color: var(--wm-ink); }   /* 눈금 18 */
.wmk .wmk-row > h2 a { transition: color .2s ease; }
/* 줄 전체 눌림 — 옛 app.css:454 와 같은 «덮개» 방식(줄 안 링크는 제목 하나뿐 — 목록 틀 함정 1) */
.wmk .wmk-row > h2 a::after { content: ""; position: absolute; inset: 0; }
.wmk .wmk-row:hover > h2 a, .wmk .wmk-row > h2 a:focus-visible { color: var(--wm-navy); }
.wmk .wmk-row > p { grid-area: m; margin: 0; min-width: 0; font-size: .875rem; line-height: 1.5; font-weight: 500; }   /* = .wm-pc__s */
/* 꺾쇠 — li 의 가상 요소(덮개와 안 겹침) · 홈 chev 꼴 굵기 2 · 남색 1.5rem(find .wm-fr__t::after 와 같은 그림) · 장식이라 화면낭독 없음 */
.wmk .wmk-row::before {
  content: ""; position: absolute; right: .25rem; top: 50%; width: 1.5rem; height: 1.5rem; margin-top: -.75rem; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000075' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 「유료 상위 노출」 칩(.ri-flag--unknown — B 가 크루 「활동 확인 안 됨」 이름을 빌려 쓴다 · 우리 CSS 는 .wmk 범위라 크루 지면에 안 닿는다)
   = .wm-st 꼴(.75rem 800 기울임 · .3rem .6rem · skew) + 연회색 #f3f3f3 + 검정(규칙 3 «접수마감 = 연회색 칩 + 검정» 꼴 · 빨강 아님 — D8) */
.wmk .ri-flag--unknown {
  position: relative; isolation: isolate; display: inline-block; padding: .3rem .6rem; font-size: .75rem; line-height: 1;
  font-weight: 800; font-style: italic; color: var(--wm-ink); white-space: nowrap;
}
.wmk .ri-flag--unknown::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wm-chip); transform: skew(-16deg); }
.wmk .wmk-row > .ri-flag { grid-area: f; justify-self: end; }

/* 쪽 넘김 nav.ri-pager.wmk-pager (설계 4-5) — paginate_links 출력 그대로 · .wm-chip 값(wmm.css:99-107) · 비스듬 상자는 ::before(글자가 span 에 안 싸여 있어서) */
.wmk .wmk-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin-top: 2.5rem; }
.wmk .wmk-pager .page-numbers {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem;
  padding: 0 1.1rem; font-size: .9375rem; line-height: 1; font-weight: 800; font-style: italic; color: var(--wm-ink); white-space: nowrap; transition: color .2s ease;
}
.wmk .wmk-pager .page-numbers::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wm-chip); transform: skew(-16deg); transition: background-color .2s ease; }
.wmk .wmk-pager a.page-numbers:hover::before { background: var(--wm-nav2); }
.wmk .wmk-pager .page-numbers.current { color: #fff; }
.wmk .wmk-pager .page-numbers.current::before { background: var(--wm-navy); }                 /* 지금 쪽 = 남색 + 흰 글자(규칙 3 «고르면 남색») */

/* 빈 결과 div.ri-empty.wm-empty.wmk-empty (ⓒ) — 위 0 · 아래 2rem · 머리 .wm-hs · 「조건 지우기」는 왼쪽 칸(폰 = 칩 띠 맨 앞)에 이미 있다(새 링크 0)
   🔴 1.0.1 : 위 2px 남색 줄을 걷었다 — 아래에 목록이 없으니 «표 머리 줄»이 아니라 장식 가로줄이다(사장님 «장식용 가로줄 금지») */
.wmk .wmk-empty { padding: 0 0 2rem; }
.wmk .wmk-empty h2 { margin: 0; font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; color: var(--wm-ink); }
.wmk .wmk-empty p { margin: .5rem 0 0; font-size: 1rem; line-height: 1.6; font-weight: 500; }

/* ═══ 5. 등록 신청 div.wmk-regw > section#ri-cr (ⓐ · 설계 4-6 — 오늘의 본체) ═══
   🔴 폼은 «원문 그대로»(컨트롤 53 · 서명 대조 #14). 옛 style#ri-cr-css 는 PHP 가 버렸다 — 아래가 그 «새 모양» 전부.
   🔴 classreg 가 칸을 더하면(A) 모양도 여기 더한다(classreg 머리 주석에 «wmm-class.css 5장도» — 설계 14장) */
.wmk .wmk-regw { padding: 0; }                                                              /* 1.1.0 : 오른쪽 칸 «안» — 위 간격은 4장(.wmk-main > .wmk-regw 3rem) · 좌우 0 */
.wmk .wmk-regw .u-reg { margin: 0; padding: 0; border: 0; background: none; }
/* 라벨칩 「RUNNING CLASS」 = .wm-eb 꼴(wmm.css:70-71) — 마크업에 속 span 이 없어 비스듬 상자를 ::before 로(글자는 바로 선다 · D16) */
.wmk .wmk-regw .u-sec__kicker {
  position: relative; isolation: isolate; display: inline-block; margin: 0 0 2rem; padding: .5rem 1rem;
  font-size: .875rem; line-height: 1; font-weight: 700; text-transform: uppercase; color: var(--wm-ink);
}
.wmk .wmk-regw .u-sec__kicker::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wm-chip); transform: skew(-16deg); }
/* h2 = .wm-h2 값(3rem/1.05 900 기울임 · 991↓ 2.5rem · 479↓ 8vw — 10장) */
.wmk .wmk-regw .u-sec__title { margin: 0; font-size: 3rem; line-height: 1.05; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: none; color: var(--wm-ink); }
.wmk .wmk-regw .u-reg__lead { margin: 1.25rem 0 0; max-width: 60ch; font-size: 1rem; line-height: 1.6; font-weight: 500; }   /* = .wm-sec__sub(wmm.css:225) */
/* 알림(?sent · ?err · ?wait — 둘 다 같은 꼴) = 남색 띠 + 흰 글자 700(reg Q2 와 같음 · 규칙 1 «남색 = 띠·강조» · 빨강 허용 목록에 «오류» 없음 — D5).
   자리는 원문 차례(설명 «뒤» · 폼 «앞») — 처리기가 #ri-cr 로 돌려보내면 메뉴 줄 아래 바로 보인다(html scroll-padding-top 4rem) */
.wmk #ri-cr .ri-cr__msg { margin: 1.75rem 0 0; padding: 1.25rem; border: 0; border-radius: 0; background: var(--wm-navy); color: #fff; font-size: 1rem; line-height: 1.6; font-weight: 700; }
.wmk #ri-cr .ri-cr__msg b { font-weight: 900; color: #fff; }
/* 폼 판 — 흰 쪽 위 연한 판(.wm-lead 바탕 :415 + .wm-lead__f 안쪽 :423) */
.wmk #ri-cr .ri-cr__form { margin: 1.75rem 0 0; padding: 2.25rem; background: var(--wm-page); }
/* 폼 [hidden] — 아래 display 규칙이 hidden 을 이기지 못하게(지금 폼에 hidden 요소 0 · A 가 더할 때를 위한 짝) */
.wmk #ri-cr .ri-cr__form [hidden] { display: none !important; }
/* 소제목 「클래스」 · 「신청하시는 분」 = 폼 제목 꼴 1.5rem 900 기울임(.ri-a-ld__t :426) · 둘째는 위 3rem · 🔴 밑줄 없음(옛 1px 검정 밑줄 = 장식 가로줄) */
.wmk #ri-cr .ri-cr__h { margin: 3rem 0 1.25rem; padding: 0; border: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 900; font-style: italic; letter-spacing: -.01em; color: var(--wm-ink); }
.wmk #ri-cr .ri-cr__form > .ri-cr__h:first-of-type { margin-top: 0; }
.wmk #ri-cr .ri-cr__h small { font-size: .875rem; font-weight: 500; font-style: normal; color: var(--wm-ink); }
/* 칸 격자 — 3열(≥992) · 2열(768~991) · 1열(≤767 — 10장). 원문 차례 그대로 흐르면 행이 «누가 · 무엇 · 어디·언제 · 얼마·어디로»로 나뉜다(설계 4-6-3) */
.wmk #ri-cr .ri-cr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem .75rem; }
.wmk #ri-cr .ri-cr__f { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.wmk #ri-cr .ri-cr__f--wide { margin-top: 1.25rem; }
/* 칸 이름 .875rem 800 검정 · 필수 * = 검정 800(빨강 금지 — D10) · 「(선택)」 500 검정 */
.wmk #ri-cr .ri-cr__f label { font-size: .875rem; line-height: 1.4; font-weight: 800; color: var(--wm-ink); }
.wmk #ri-cr .ri-cr__f label b { font-weight: 800; color: var(--wm-ink); }
.wmk #ri-cr .ri-cr__f label span { font-weight: 500; color: var(--wm-ink); }
/* 입력칸 = 홈 협업 폼과 같은 값(wmm.css:429-433) · 글자 1rem = 아이폰 자동 확대 없음 · 모서리 0 */
.wmk #ri-cr .ri-cr__f input, .wmk #ri-cr .ri-cr__f select, .wmk #ri-cr .ri-cr__f textarea {
  display: block; width: 100%; min-height: 3.25rem; margin: 0; padding: .75rem 1rem;
  border: .125rem solid var(--wm-field); border-radius: 0; background-color: #fff; box-shadow: none;
  font-family: inherit; font-size: 1rem; line-height: 1.5; font-weight: 500; color: var(--wm-ink);
}
.wmk #ri-cr .ri-cr__f textarea { min-height: 6rem; resize: vertical; }                       /* wmm.css:432 */
/* 초점 = 테두리 남색 + 2px 남색 그림자(wmm.css:433) — 옛 빨강 그림자 rgba(185,28,28,.12) 버림. .wm :focus-visible 보다 특이도가 높다 */
.wmk #ri-cr .ri-cr__f input:focus, .wmk #ri-cr .ri-cr__f select:focus, .wmk #ri-cr .ri-cr__f textarea:focus { outline: none; border-color: var(--wm-navy); box-shadow: 0 0 0 2px var(--wm-navy); }
/* 자리표시 글자(「https://」 · 「무엇을 어떻게 가르치는지…」) — 입력칸 테두리와 같은 #767676(흰 바탕 4.54:1) + opacity 1(파이어폭스 반투명 끔).
   🔵 wmm-reg 1.0.1(라이브)과 같은 값 — 브라우저 기본(크롬 #a9a9a9 = 2.35:1)은 AA 미달·브라우저마다 달라 고정했다. 검정으로 할지는 reg Q1 사장님 결재 그대로 */
.wmk #ri-cr ::placeholder { color: var(--wm-field); opacity: 1; }
/* 칸 아래 예시 — 눈금 14 · 검정(옛 11.5px #333 → #000) */
.wmk #ri-cr .ri-cr__f small { font-size: .875rem; line-height: 1.5; font-weight: 500; color: var(--wm-ink); }
/* 동의 칸 = 홈 협업 폼 동의(.ri-a-ld__ag :434-436) · 판이 연한 바탕이라 «흰 바탕» · 테두리 없음(가로줄 0) · 체크 1.25rem 남색 */
.wmk #ri-cr .ri-cr__agree { display: flex; gap: .75rem; align-items: flex-start; margin: 2rem 0 0; padding: 1.25rem; border: 0; border-radius: 0; background: #fff; font-size: .875rem; line-height: 1.6; font-weight: 500; color: var(--wm-ink); cursor: pointer; }
.wmk #ri-cr .ri-cr__agree input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; flex: none; accent-color: var(--wm-navy); }
.wmk #ri-cr .ri-cr__agree b { font-weight: 800; color: var(--wm-ink); }
.wmk #ri-cr .ri-cr__agree small { display: block; margin-top: .25rem; font-size: .875rem; line-height: 1.6; font-weight: 500; color: var(--wm-ink); }
.wmk #ri-cr .ri-cr__note { margin: 1.25rem 0 0; font-size: .875rem; line-height: 1.6; font-weight: 500; color: var(--wm-ink); }
/* 단추 줄 = .wm-btns 꼴(사이 1rem 1.5rem · wmm.css:88) · 위 2rem */
.wmk #ri-cr .ri-cr__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 2rem 0 0; }
.wmk #ri-cr .ri-cr__submit span { font-size: .875rem; line-height: 1.5; font-weight: 500; color: var(--wm-ink); }
/* 「등록 신청 보내기」 = 주 단추(.wm-btn 값 wmm.css:74-80). 🔵 class(u-cta u-cta--sm)는 원문 그대로 두고 여기서 집는다(설계 6-1 «class 도 안 바꾼다») */
.wmk #ri-cr .ri-cr__submit button[type="submit"] {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 0; padding: 1rem 2rem; border: .125rem solid var(--wm-navy-bd); border-radius: 0; background: var(--wm-navy); color: #fff;
  font-family: inherit; font-size: 1rem; line-height: 1; font-weight: 800; font-style: italic; text-transform: uppercase; cursor: pointer;
  transition: transform .2s ease;
}
.wmk #ri-cr .ri-cr__submit button[type="submit"]:hover { transform: translateY(-.2rem); }
.wmk #ri-cr .ri-cr__submit button[type="submit"]:focus-visible { outline: 3px solid var(--wm-navy); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }   /* 연한 판 위 — 위 숨은 폼 「적용」과 같은 값(검토 반영 ⑦) */

/* ⓐ′ B mailto 상자(section.u-reg — classreg 정규식이 안 맞은 날만 · 설계 4-6-4 최소 꼴) — 라벨칩·h2·설명은 위와 같은 값 */
.wmk .wmk-regw .u-reg__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 1.75rem; }
.wmk .wmk-regw .u-reg__h3 { margin: 0 0 1.25rem; font-size: 1.5rem; line-height: 1.2; font-weight: 900; font-style: italic; color: var(--wm-ink); }
/* 「이렇게 적어 주세요」 dl = 표 꼴(4-8-2 값 — 이름 칸 6.5rem · 머리 2px 남색 · 줄마다 1px) */
.wmk .wmk-regw .u-reg__need { margin: 0; border-top: 2px solid var(--wm-navy); }
.wmk .wmk-regw .u-reg__need > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); border-bottom: 1px solid var(--wm-line); }
.wmk .wmk-regw .u-reg__need dt { margin: 0; padding: .85rem .75rem; font-size: .875rem; font-weight: 800; font-style: italic; }
.wmk .wmk-regw .u-reg__need dd { margin: 0; padding: .85rem .75rem; min-width: 0; font-size: 1rem; font-weight: 500; }
.wmk .wmk-regw .u-reg__side { min-width: 0; background: var(--wm-page); padding: 1.25rem; }
.wmk .wmk-regw .u-reg__note { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.6; font-weight: 500; }
.wmk .wmk-regw .u-reg__side a.u-cta {
  display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; border: .125rem solid var(--wm-navy-bd);
  background: var(--wm-navy); color: #fff; font-size: 1rem; line-height: 1; font-weight: 800; font-style: italic; transition: transform .2s ease;
}
.wmk .wmk-regw .u-reg__side a.u-cta:hover { transform: translateY(-.2rem); }
.wmk .wmk-regw .u-panel__src { margin: 1rem 0 0; font-size: .875rem; line-height: 1.6; font-weight: 500; }
@media (min-width: 1280px) {
  /* 1.1.0 : 오른쪽 칸 안이라 992 에선 좁다(약 650px) → 두 칸은 1280 부터 */
  .wmk .wmk-regw .u-reg__grid { grid-template-columns: minmax(0, 1fr) 30%; gap: 3rem; align-items: start; }
}

/* ═══ 6. 맨 밑 section.wmk-hd (목록·상세 공통 · 설계 4-7 · 규칙 4⑨ 「맨 밑으로」 — 사장님 10-05) = find .wm-fd-hd 값(wmm-find.css:39-41) ═══ */
.wmk .wmk-hd { padding: 4rem var(--wm-gx) 2.5rem; }
.wmk .wmk-hd .ri-crumb { margin: 0 0 1rem; font-size: .875rem; line-height: 1.5; font-weight: 700; }
.wmk .wmk-hd .ri-crumb a { text-decoration: underline; text-underline-offset: 3px; }
.wmk .wmk-hd .ri-hero__sub { margin: 0; max-width: 60ch; font-size: 1rem; line-height: 1.6; font-weight: 500; }

/* ═══ 7. 상세 첫 화면 header.ri-hero.wmk-hero (설계 4-8-1 · 2-6) — [글 칸 | 사진 칸] · 사진 위 글 0 · 막 0 ═══
   틀 = 홈 .wm-split(wmm.css:321-323) : 1fr 1fr · 좌우 2% · 위 1.875rem.
   🔵 글 칸 왼쪽 안쪽은 0 — .wm-split 의 3rem 을 그대로 두면 h1 이 아래 강습 정보·신청 칸보다 48px 들어가 왼쪽 선이 어긋난다(wmm-race 1.0.1 검토와 같은 값) */
.wmk--one .wmk-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin: 0 var(--wm-gx); padding-top: 1.875rem; }
.wmk--one .wmk-hero__c { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; align-self: stretch; min-width: 0; padding: 3rem 4rem 3rem 0; }
/* 사진 없는 클래스 — WMM /races 머리 꼴 : 위 5rem 아래 2.5rem · 글 칸 하나(최대 64rem — race .wmr-hero--nopic) */
.wmk--one .wmk-hero--nopic { display: block; padding: 5rem 0 2.5rem; }
.wmk--one .wmk-hero--nopic .wmk-hero__c { max-width: 64rem; padding: 0; }
.wmk--one .wmk-hero__c > p:not(.ri-hero__sub) { margin: 0 0 1rem; }                          /* 「유료 상위 노출」 칩 줄(칩 꼴 = 4장 .ri-flag--unknown) */
/* h1 = .wm-h2 크기 · 900 기울임 · 🔴 text-transform:none — 클래스 이름은 고유명사 */
.wmk--one .wmk-hero__c > h1 { margin: 0; font-size: 3rem; line-height: 1.05; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: none; color: var(--wm-ink); }
/* 수준 · 형태 · 지역 = .wm-hero__p 값(wmm.css:204) · 사진 위가 아니라 띠 없음 */
.wmk--one .wmk-hero__c > .ri-hero__sub { margin: 1rem 0 0; font-size: 1.125rem; line-height: 1.35; font-weight: 600; }
/* 사진 칸 — 원래 <img> 그대로(alt·srcset·loading) · 최대 원본 1120px · 🔴 자르지 않는다(규칙 «원본 그대로 선명하게»).
   ri-hero 크기는 1120×480 으로 잘라 만들지만 원본이 그보다 작으면 워드프레스가 원본을 그대로 준다(세로 포스터 등) — 1120:480 상자에 cover 로 채우면 위아래가 잘린다
   (wmm-race 1.0.1 검토). → 높이는 사진 비율대로 · 한도는 첫 화면 사진 높이 min(30rem, 62vh)(규칙 4장 ③) · 넘으면 contain(남는 옆 = 사진 빈칸 회색) */
.wmk--one .wmk-hero .ri-hero__img { min-width: 0; max-width: 1120px; overflow: hidden; background: var(--wm-grey); }
.wmk--one .wmk-hero .ri-hero__img img { display: block; width: 100%; height: auto; max-height: min(30rem, 62vh); object-fit: contain; }

/* ═══ 8. 상세 몸 div.wmk-body (설계 4-8-2~4-8-4) — [강습 정보 · 나머지 | 오른쪽 30% 신청 칸 sticky] · DOM 차례 = 정보 → 신청 → 나머지(D14) ═══ */
.wmk--one .wmk-body { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 var(--wm-gx); }
.wmk--one .wmk-info, .wmk--one .wmk-rest { min-width: 0; }
.wmk--one .wmk-info { padding-top: 2.5rem; }
@media (min-width: 992px) {
  .wmk--one .wmk-body { grid-template-columns: minmax(0, 1fr) 30%; grid-template-areas: "info side" "rest side"; grid-template-rows: auto 1fr; column-gap: 3rem; align-items: start; }   /* race .wmr-body */
  .wmk--one .wmk-info { grid-area: info; }
  .wmk--one .wmk-body > .ri-side { grid-area: side; }
  .wmk--one .wmk-rest { grid-area: rest; }
}
/* 패널 머리 h2(강습 정보 · 강사 이력 · 클래스 소개 · 신청) = .wm-hs 값 · 아래 1.75rem(.wm-sec__hd) */
.wmk--one .ri-panel { margin: 0; padding: 0; border: 0; background: none; }
.wmk--one .ri-panel > h2 { margin: 0 0 1.75rem; font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; letter-spacing: -.01em; color: var(--wm-ink); }
/* 강습 정보 «표» — 마크업은 dl 그대로(D13 — table 로 바꾸면 i18n 번역 자리가 달라진다) · CSS 로만 표 꼴(규칙 «/records/ 꼴» : 머리 2px 남색 · 줄 1px) */
.wmk--one .wmk-info .ri-dl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); margin: 0; border-top: 2px solid var(--wm-navy); }   /* 이름 칸 6.5rem = 홈 .wm-row 날짜 칸(:299) */
.wmk--one .wmk-info .ri-dl > dt, .wmk--one .wmk-info .ri-dl > dd { margin: 0; padding: .85rem .75rem; border-bottom: 1px solid var(--wm-line); min-width: 0; }   /* = .wm-tbl(:259) */
.wmk--one .wmk-info .ri-dl > dt { font-size: .875rem; line-height: 1.5; font-weight: 800; font-style: italic; }
.wmk--one .wmk-info .ri-dl > dd { font-size: 1rem; line-height: 1.6; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* 신청 칸 aside.ri-side(인라인 style 만 뺀 원문) — find 거르개 칸·race 접수 칸과 같은 값 : 바탕 #f7f9fa · 안쪽 2rem 1rem 4rem(≥992) · sticky 7.5rem */
.wmk--one .wmk-body > .ri-side { min-width: 0; margin-top: 2rem; padding: 1.5rem 1rem 2rem; background: var(--wm-page); }
.wmk--one .ri-side .ri-panel > h2 { margin-bottom: 1rem; }
/* 「신청하러 가기」 = 주 단추(.wm-btn 값) 폭 100% · rel="nofollow noopener" target="_blank" 원문 그대로 · 「(새 창)」은 화면낭독 전용 그대로 */
.wmk--one .ri-side .ri-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 1rem 2rem; border: .125rem solid var(--wm-navy-bd);
  background: var(--wm-navy); color: #fff; text-align: center; font-size: 1rem; line-height: 1.25; font-weight: 800; font-style: italic; transition: transform .2s ease;
}
.wmk--one .ri-side .ri-btn:hover { transform: translateY(-.2rem); }
.wmk--one .ri-side .ri-btn:focus-visible { outline: 3px solid var(--wm-navy); outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }   /* 연한 칸 위 — 흰 바탕 규칙(검토 반영 ⑦) */
.wmk--one .ri-side .ri-panel > p { margin: 0; font-size: 1rem; line-height: 1.6; font-weight: 500; color: var(--wm-ink); }   /* 「신청 주소가 아직 …」 — 옛 회색 인라인은 PHP 가 걷었다 */
.wmk--one .ri-side .ri-panel > p:last-child { margin-top: 1.25rem; font-size: .875rem; }   /* 「결제와 환불은 … 중개하지 않습니다.」 — 검정 */
@media (min-width: 992px) {
  /* 최대 높이 — 오른쪽 아래 떠 있는 단추 묶음(.wm-fab 4칸 = wmm.css:487-489 의 아래 1.25rem + 3.25rem × 4 + 사이 2px × 3)에 칸 아래가 가리지 않게(race 와 같은 식) */
  .wmk--one .wmk-body > .ri-side { margin-top: 2.5rem; position: sticky; top: 7.5rem; max-height: min(80vh, calc(100vh - 7.5rem - (1.25rem + 4 * 3.25rem + 3 * 2px) - 1rem)); overflow-y: auto; padding: 2rem 1rem 4rem; }
  body.wmk-p.admin-bar .wmk--one .wmk-body > .ri-side { top: calc(7.5rem + 32px); max-height: min(80vh, calc(100vh - 7.5rem - 32px - (1.25rem + 4 * 3.25rem + 3 * 2px) - 1rem)); }
}
@media (min-width: 992px) and (max-width: 1023px) {
  .wmk--one .wmk-body > .ri-side { top: 2rem; }                                              /* 메뉴 줄 없는 폭(find 11장과 같은 판단) */
}
/* 강사 이력 · 클래스 소개 — 구역 사이 위 4rem(폰 3rem) · 글 1rem/1.6 500 · 최대 55ch(.wm-split__p) · 본문 링크 남색 800 밑줄 */
.wmk--one .wmk-rest > .ri-panel { padding-top: var(--wm-sy); }
.wmk--one .wmk-rest .ri-panel p { margin: 0 0 1rem; max-width: 55ch; font-size: 1rem; line-height: 1.6; font-weight: 500; }
.wmk--one .wmk-rest .ri-prose a { color: var(--wm-navy); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
/* :where(.wm) ul 초기화(list-style none · 안쪽 0)가 본문 목록 점을 지운다(race 2-11 함정) → 본문 안에서만 되살린다 */
.wmk--one .wmk-rest .ri-prose ul { list-style: disc; margin: 0 0 1rem; padding-left: 1.25rem; }
.wmk--one .wmk-rest .ri-prose ol { list-style: decimal; margin: 0 0 1rem; padding-left: 1.25rem; }
.wmk--one .wmk-rest .ri-prose li { margin: 0 0 .35rem; max-width: 55ch; }
.wmk--one .wmk-rest .ri-prose h3, .wmk--one .wmk-rest .ri-prose h4 { margin: 2rem 0 .75rem; font-size: 1.25rem; line-height: 1.3; font-weight: 900; font-style: italic; }
.wmk--one .wmk-rest .ri-prose img { height: auto; }
.wmk--one .wmk-rest .ri-prose figure { margin: 0 0 1rem; }

/* ═══ 9. 공감 줄 · 의견 칸 div.wmk-talk (설계 4-8-5) ═══
   의견 칸 모양은 A avatar v2(ri-av-css)가 «주인» — 여기서는 ① 구역 간격 ② 글자 #000(avatar 와 같은 값 — CSS 를 못 받는 날의 바닥)
   ③ 공감 줄(A social.php — avatar 밖)의 회색 글자·장식 줄·옛 파랑 초점만 덮는다(wmm-race 6장 끝과 같은 처리) */
.wmk--one .wmk-talk { padding-top: var(--wm-sy); }
/* avatar 의 #riwc-talk.riwc-talk{margin:3rem 0 .5rem}(세기 1,1,0)이 위 4rem 과 겹쳐 7rem 이 되지 않게 — 세기 1,3,0 으로 이긴다 */
.wmk--one .wmk-talk #riwc-talk.riwc-talk { margin: 0; padding-top: 0; border-top: 0; }
.wmk--one .riwc-talk__h, .wmk--one .riwc-talk__sub, .wmk--one .riwc-cm--none, .wmk--one .riwc-cm__h time, .wmk--one .riwc-cm__b { color: #000; }
/* 「로그인하고 의견 남기기 →」(로그인 전) — avatar v2(의견칸WMM/avatar.php:153-154)가 «2px #000 테두리 + 검정 글자»(옛 보조 단추 값)로 칠한다.
   v3.5 보조 단추 = 2px 남색 테두리 + 남색 글자(규칙 64줄 · wmm.css 10-06 ④) → 이 지면에서만 덮는다(세기 0,2,1 · hover 0,3,1 > avatar 0,1,1 · 0,2,1 —
   avatar CSS 는 body 안이라 «뒤»에 실려 세기가 같으면 진다). avatar 자체를 고치면 대회 상세도 같이 바뀐다 — 그건 avatar 주인(A) 몫(README 9장).
   🔵 같은 날 홈 wmm.css 끝(「10-06 규칙 v3.5 — 공용 부품 셋」 .wm .riwc-login a)에 «같은 값»이 들어왔다(로컬 16:00 · 라이브 여부 모름).
      그 판이 라이브면 이 줄은 겹치기만 한다(값이 같아 부딪힘 0) — 홈 판이 라이브인 것을 확인한 뒤 지워도 된다 */
.wmk--one .riwc-login a, .wmk--one .riwc-login a:hover { border-color: var(--wm-navy); color: var(--wm-navy); }
.wmk--one .ri-a-rc { margin: 0 0 1.5rem; border-top: 0; }
.wmk--one .wmk-rest > .ri-a-rc { margin: var(--wm-sy) 0 0; }                                 /* 본문 빈 글 — 서버가 «나머지» 끝에 놓은 공감 줄(설계 4-12) */
.wmk--one .ri-a-rc__bar { border-top: 0; background: var(--wm-page); margin-top: .25rem; }
.wmk--one .ri-a-rc__sum, .wmk--one .ri-a-rc__b, .wmk--one .ri-a-rc__p, .wmk--one .ri-a-rc__n, .wmk--one .ri-a-rc__c { color: #000; }
.wmk--one .ri-a-rc__p.is-on { color: var(--wm-navy); }
/* 공감 줄 아이콘(좋아요·의견·공유 — social.php 선 아이콘 stroke:currentColor · 누르면 fill:currentColor) = 남색(v3.5 «아이콘 = 남색» · 글자는 검정 그대로) */
.wmk--one .ri-a-rc__ic { color: var(--wm-navy); }
.wmk--one .ri-a-rc__b:focus-visible, .wmk--one .ri-a-rc__p:focus-visible { outline: 3px solid var(--wm-navy); outline-offset: -3px; box-shadow: inset 0 0 0 5px #fff; }
/* 의견 바로가기(#riwc-talk) 도착 자리 — 붙는 메뉴 줄(3.3125rem) + 숨 1rem − html scroll-padding-top 4rem(wmm.css:48 · 둘은 «더해진다» — race 1.0.1 검토) */
@media (min-width: 1024px) {
  .wmk--one #riwc-talk { scroll-margin-top: calc(3.3125rem + 1rem - 4rem); }
  body.wmk-p.admin-bar .wmk--one #riwc-talk { scroll-margin-top: calc(32px + 3.3125rem + 1rem - 4rem); }
}

/* ═══ 10. 폭별 ═══════════════════════════════════════════════════════ */
/* ≥992 (1.1.0) — 찾기 구역 [왼쪽 칸 28%(최소 15rem) | 오른쪽] · 사이 2.5rem(B wmb/course.css .wmbc-lay 값)
   왼쪽 칸 sticky = /find/ 거르개 칸과 같은 «메뉴 줄 아래» 7.5rem · 칸이 화면보다 길면 칸 안에서 스크롤(overscroll contain — 칸 끝에서 지면이 따라 구르지 않게) */
@media (min-width: 992px) {
  .wmk .wmk-lay { grid-template-columns: minmax(15rem, 28%) minmax(0, 1fr); align-items: start; }
  /* 10-06 A 배포 전 — overscroll-behavior:contain 걷음(뉴스 검토 #1 실측 : 넘칠 것이 없어도 이 칸 위에서 바퀴를 굴리면 «페이지가 안 내려간다». 다시 넣지 마라) */
  .wmk .wmk-side { position: sticky; top: 7.5rem; max-height: calc(100vh - 7.5rem - 1rem); overflow-y: auto; padding-bottom: 1rem; scrollbar-width: thin; }
  /* overflow-y:auto 면 가로도 auto 로 계산된다 → 비스듬 칩(skew −16° · 높이 2.5rem)이 오른쪽으로 약 .36rem 삐져 칸에 가로 스크롤이 생긴다.
     가로는 막고 오른쪽 안쪽 .45rem 로 삐진 모서리 자리를 준다(왼쪽은 칩 줄 안쪽 .4rem 이 이미 있다 · 검토 반영 ④) */
  .wmk .wmk-side { overflow-x: hidden; padding-right: .45rem; }
  body.wmk-p.admin-bar .wmk .wmk-side { top: calc(7.5rem + 32px); max-height: calc(100vh - 7.5rem - 32px - 1rem); }
}
@media (min-width: 992px) and (max-width: 1023px) {
  .wmk .wmk-side { top: 2rem; max-height: calc(100vh - 3rem); }                              /* 메뉴 줄 없는 폭 — 빈 띠가 남지 않게(wmm-find.css:366) */
  /* 로그인 화면 — 위 ≥992 의 «body.wmk-p.admin-bar …»(세기 0,4,1)가 이 폭에서도 이겨 칸이 7.5rem+32px(152px) 아래에 붙었다(메뉴 줄이 없는 폭이라 빈 띠).
     같은 세기 + 뒤 차례로 이긴다(검토 반영 ③) · 상세 신청 칸도 같은 병이라 한 줄 같이(8장 992~1023 은 비로그인 값만 있었다) */
  body.wmk-p.admin-bar .wmk .wmk-side { top: calc(2rem + 32px); max-height: calc(100vh - 3rem - 32px); }
  body.wmk-p.admin-bar .wmk--one .wmk-body > .ri-side { top: calc(2rem + 32px); }
}
/* 1279↓ — 오른쪽 칸이 좁아진다 : 훈련 카드 2열(course .cz-grid 1279 값) · 등록 폼 칸 2열 */
@media (max-width: 1279px) {
  .wmk .wmk-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wmk #ri-cr .ri-cr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 991↓ (WMM 태블릿) — 큰 머리 2.5rem · 상세 한 줄(글 → 사진 → 정보 → 신청 → 나머지)
   (1.1.0) 왼쪽 칸이 오른쪽 «위»로 쌓인다(sticky 풂) — 세로 목록·칩 묶음은 «가로로 미는 줄»로(B course.css 991 값 — 목록이 화면 아래로 밀려나지 않게) */
@media (max-width: 991px) {
  .wmk .wmk-sec__hd > h1, .wmk .wmk-regw .u-sec__title, .wmk--one .wmk-hero__c > h1 { font-size: 2.5rem; }
  .wmk .wmk-lay { gap: 1.5rem; }
  .wmk .wmk-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }   /* 「조건 지우기」 · 바로 가기 줄은 한 줄에 나란히 */
  .wmk .wmk-side > .wmk-grp, .wmk .wmk-side > .wmk-src { flex: 1 1 100%; }
  /* 묶음 이름을 줄 «앞»에 나란히(course 991 .cz-group__n 꼴) — 쌓인 칸 높이를 줄여 목록이 첫 화면에 일찍 보이게 */
  .wmk .wmk-grp { display: flex; align-items: center; gap: 0 .75rem; }
  .wmk .wmk-gn { flex: none; margin: 0; }
  .wmk .wmk-tabs, .wmk .wmk-chips { flex: 1 1 auto; min-width: 0; }
  .wmk .wmk-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-top: 0; border-bottom: 1px solid var(--wm-line); margin-right: calc(-1 * var(--wm-gx)); }
  .wmk .wmk-tabs::-webkit-scrollbar { display: none; }
  .wmk .wmk-tab { flex: none; gap: .4rem; border-bottom: 0; padding: .75rem 1rem .85rem 0; font-size: 1rem; white-space: nowrap; }
  .wmk .wmk-tab:hover { background: none; color: var(--wm-navy); }
  .wmk .wmk-tab.is-on::before { left: 0; right: 1rem; top: auto; bottom: 0; width: auto; height: 4px; }   /* 왼쪽 막대 → 아래 막대(course 991) */
  .wmk .wmk-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--wm-gx)); padding: .1rem 0 .3rem .4rem; }
  .wmk .wmk-chips::-webkit-scrollbar { display: none; }
  .wmk .wmk-side .wm-chip { flex: none; }
  .wmk .wmk-go { flex-direction: row; flex-wrap: wrap; gap: 0 1.5rem; border-top: 0; }
  .wmk .wmk-go__a { border-bottom: 0; padding: .5rem 0; font-size: 1rem; justify-content: flex-start; }
  .wmk .wmk-go__a:hover { background: none; }
  .wmk--one .wmk-hero { grid-template-columns: minmax(0, 1fr); }
  .wmk--one .wmk-hero__c { padding: 0; }
  .wmk--one .wmk-hero .ri-hero__img { margin-top: 2.5rem; }                                  /* = .wm-split__img 991↓ 값 */
}
/* 767↓ (폰 · 구역 3rem · padding-global 3.5% = wmm.css 767 블록) */
@media (max-width: 767px) {
  /* 지면 머리 — 홈 .wm-sec__hd 는 폰에서 세로로 쌓지만, 개수는 h1 «오른쪽»에 둔다(설계 2-5) */
  .wmk .wmk-sec__hd { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: .5rem 1rem; }
  .wmk .wmk-hd { padding-top: 3rem; }
  /* (1.1.0) 왼쪽 칸 → «붙어 다니는 칩 띠» 한 줄(/find/ 폰 칩 띠 wmm-find.css 12장 값 : sticky 0 · 흰 바탕 · 아래 1px · 가로로 밀기 · 오른쪽 끝까지).
     묶음·목록 상자를 display:contents 로 풀어 칩·이름이 한 줄에 흐른다(링크를 두 벌 만들지 않는다 — 대조 #25 와 같은 DOM).
     「조건 지우기」는 띠 맨 앞(order −1 — 고른 뒤 손가락이 바로 닿게) · 원래 폼(SELECTS 때 보이는 것 포함)은 폰에서 숨김(/find/ 폰 거르개 칸과 같은 판단) */
  .wmk .wmk-lay { gap: 1.25rem; }
  .wmk .wmk-side {
    position: sticky; top: 0; z-index: 30; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .5rem .6rem;
    overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--wm-gx)); padding: .6rem 0 .5rem .4rem;
    background: #fff; border-bottom: 1px solid var(--wm-line);
  }
  .wmk .wmk-side::-webkit-scrollbar { display: none; }
  /* 고르기 묶음이 없는 띠(ⓐ 오늘 — 바로 가기 둘뿐)는 붙어 다니지 않는다 : 등록 폼을 쓰는 내내(자판이 올라온 폰) 화면 위 58px 를 덮을 까닭이 없다.
     /find/ 도 거르개 띠만 붙인다. 표식 .wmk-lay--f 는 PHP 가 묶음 ≥1 일 때만 단다(검토 반영 ② · 세기 0,4,0 > 위 0,2,0) */
  .wmk .wmk-lay:not(.wmk-lay--f) > .wmk-side { position: static; }
  .wmk .wmk-grp, .wmk .wmk-tabs, .wmk .wmk-chips, .wmk .wmk-go { display: contents; }
  .wmk .wmk-gn { flex: none; margin: 0 .1rem 0 .6rem; font-size: .75rem; white-space: nowrap; }
  .wmk .wmk-side > .wmk-grp:first-child > .wmk-gn { margin-left: 0; }
  .wmk .wmk-reset { order: -1; flex: none; }
  .wmk .wmk-side .wmk-src { display: none; }
  /* 세로 목록 줄 · 바로 가기 줄 → 칩 꼴(비스듬 상자는 ::before — 글자는 바로 선다 · 고르면 남색 + 흰 글자) */
  .wmk .wmk-tab, .wmk .wmk-go__a {
    position: relative; isolation: isolate; flex: none; display: inline-flex; align-items: center; gap: .4rem; height: 2.5rem; padding: 0 .95rem;
    border: 0; background: none; font-size: .875rem; line-height: 1; font-weight: 800; white-space: nowrap;
  }
  .wmk .wmk-tab::before, .wmk .wmk-go__a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wm-chip); transform: skew(-16deg); transition: background-color .2s ease; }
  .wmk .wmk-tab:hover, .wmk .wmk-go__a:hover { background: none; color: var(--wm-ink); }
  .wmk .wmk-tab:hover::before, .wmk .wmk-go__a:hover::before { background: var(--wm-nav2); }
  .wmk .wmk-tab.is-on, .wmk .wmk-tab.is-on:hover { color: #fff; }
  .wmk .wmk-tab.is-on::before, .wmk .wmk-tab.is-on:hover::before { left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; background: var(--wm-navy); }
  .wmk .wmk-side .wmk-tab.is-on:focus-visible { outline-color: #fff; }                    /* 남색 칩 꼴 위 — 흰 안쪽 초점(3장 끝 «칸 안 초점» 과 짝) */
  .wmk .wmk-tab b { font-size: .8125rem; font-weight: 500; }
  .wmk .wmk-go__i { font-size: .875rem; }
  /* 목록 줄 — 칩이 제목 «위»(DOM 차례 그대로) · 오른쪽 안쪽 2.25rem */
  .wmk .wmk-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "f" "t" "m"; padding-right: 2.25rem; }
  .wmk .wmk-row > .ri-flag { justify-self: start; margin: 0 0 .25rem .3rem; }
  /* 등록 폼 — 판 안쪽 1rem(좌우 여백 확보) · 칸 한 줄에 하나 */
  .wmk #ri-cr .ri-cr__form { padding: 1rem; }
  .wmk #ri-cr .ri-cr__grid { grid-template-columns: minmax(0, 1fr); }
  .wmk #ri-cr .ri-cr__agree { padding: 1rem; }
  .wmk .wmk-main > .wmk-tipw, .wmk .wmk-main > .wmk-regw { margin-top: 2.5rem; }
  /* 상세 */
  .wmk--one .wmk-hero { padding-top: 1.5rem; }
  .wmk--one .wmk-hero--nopic { padding: 3rem 0 1.5rem; }
  .wmk--one .wmk-hero__c > .ri-hero__sub { font-size: 1rem; }
  .wmk--one .wmk-body > .ri-side { margin-top: 2rem; }
}
/* 601~767 로그인 화면 — 관리 막대(46px)가 위에 붙어 있다(워드프레스 600↓ 은 막대가 따라오지 않는다) */
@media (min-width: 601px) and (max-width: 767px) {
  body.wmk-p.admin-bar .wmk .wmk-side { top: 46px; }
}
/* 479↓ — 큰 머리 8vw · 주 단추 폭 100% · 훈련 카드 1열(course .cz-grid 479 값) */
@media (max-width: 479px) {
  .wmk .wmk-sec__hd > h1, .wmk .wmk-regw .u-sec__title, .wmk--one .wmk-hero__c > h1 { font-size: 8vw; }
  .wmk .wmk-cnt { font-size: 6vw; }                                                          /* 2rem(32px)가 h1 8vw(390 = 31px)보다 컸다 — 숫자는 h1 보다 작게(검토 반영 ⑥) */
  .wmk .wmk-tgrid { grid-template-columns: minmax(0, 1fr); }
  .wmk #ri-cr .ri-cr__submit button[type="submit"] { width: 100%; }
  .wmk .wmk-none__b { width: 100%; }
}

/* ═══ 11. 움직임 줄이기 — 칩·단추·카드·줄 transition 끔 ═══ */
@media (prefers-reduced-motion: reduce) {
  .wmk *, .wmk *::before, .wmk *::after { transition: none !important; }
}

/* ═══ 10-07 떠 있는 단추(.wm-fab) 밑에 꺾쇠가 깔리던 것 — A (wmm-find.css 끝 블록과 같은 값 · 이유도 같음) ═══ */
@media (min-width: 768px) {
  .wmk .wmk-row { padding-right: 6rem; }
  .wmk .wmk-row::before { right: 3.75rem; }
}