/* ═══ RUNIN.KR 회사소개 /about/ — World Marathon Majors 디자인(공용 wm- · 지면 고유 wma-) · 2026-10-08 · 클로드A ═══
   규칙 한 장 : https://idc.kr/_claude/CODE_RULES.txt
   디자인 규칙 : 홈WMM시안\live\RUNIN_WMM_DESIGN.txt v3.5 — 4장 배치 ③ 첫 화면(사진 위 글 상자 + 단색 띠 · 막 없음) · ⑤ 숫자 띠 · ⑥ 사진 반 + 글 반(좌우 번갈아)
   📌 사장님 10-08 01:3x 「런닝인사이드 회사소개도 낼 오전에 진행해, 옛날 디자인이니까」 · 10:0x 「사진 셋 제미나이로 · 운영도 디자인 수정」
   🔴 이 파일은 홈 wmm.css «뒤에» 실린다(같은 토큰 --wm-*). 홈 부품(.wm-nums .wm-cr .wm-sec .wm-nw …)은 다시 정의하지 않고 이 지면 것(wma-)과
      «옛 app.css 가 맡던 기능 규칙»만 둔다. 선택자는 전부 body.wma-p 또는 .wma(새 main) 아래.
   🔴 본문 안쪽 조각(.ab-partner · .ab-cta)은 원문 마크업 그대로다(PHP 가 글 마디째 옮김 — 번역 열쇠 보존) → 여기서 모양만 입힌다.
   🔴 글자 완전 검정(#000) · 면·2px 줄·아이콘 = 남색 #000075 · 남색 면 위 강조 = 울트라 노랑 #ffd100(규칙 0장) · 빨강 0 · 사진 막 0 · 장식 가로줄 0
      (남는 선 = 목록 머리 2px 남색 · 줄 사이 1px #d6dce2)
   🔴 값은 규칙 표 그대로(10-08 검토 «새 숫자 지어내지 말 것») — 줄마다 어느 값인지 적었다. 표에 없는 값을 넣지 말 것.
   🔴 이 파일 주석에 꺾쇠 태그 글자를 쓰지 말 것 — INLINE 비상구에서 이 CSS 가 head 에 박히면 h1 찾기 정규식이 주석 속 태그를 잡아 대조 #10 이 원문을 낸다(10-08 검토)
   🔵 되돌리기 : wmm-about/ENABLED → ENABLED.off */

/* ═══ 0. 기능 규칙 — 옛 CSS 를 걷으면서 «빠지면 오류 없이 깨지는» 것(문의 0장과 같은 값) ═══ */
body.wma-p .ri-sr, body.wma-p .screen-reader-text, body.wma-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 으로 터진다(제휴 칸 머리 · 알림 모달) */
body.wma-p svg.ri-i { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
body.wma-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.wma-p .ri-modal.is-open { display: flex; }
body.wma-p .ri-modal[hidden] { display: none; }
body.wma-p .ri-modal__panel { max-height: 90vh; overflow-y: auto; }
body.wma-p .ri-modal .wm-dlg__x { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--wm-navy); }
body.wma-p .ri-modal .wm-dlg__x svg { width: 1.25rem; height: 1.25rem; }
body.ri-locked { overflow: hidden; }
.wma [hidden] { display: none !important; }

/* ═══ 1. 머리 — 메뉴 줄 붙어 다님(≥1024 · 문의·대회일정과 같은 값) ═══ */
@media (min-width: 1024px) {
  body.wma-p .wm-head { position: sticky; top: -4.5625rem; z-index: 50; }
  body.wma-p.admin-bar .wm-head { top: calc(32px - 4.5625rem); }
}

/* ═══ 2. 첫 화면 — 화면 폭 큰 사진(좌우 2% · 위 1.875rem = 홈 .wm-hero) · 높이 = 홈 .wm-hero__in(min(30rem,62vh) · 최소 24rem · 폰 26rem)
   글 상자는 사진 «위» 왼쪽 아래 · 글 뒤에만 단색 띠(제목 남색 · 설명 흰 — v3.5) ═══ */
.wma .wma-hero { position: relative; margin: 1.875rem var(--wm-gx) 0; }
.wma .wma-hero__f { position: relative; margin: 0; height: min(30rem, 62vh); min-height: 24rem; overflow: hidden; background: var(--wm-grey); }
.wma .wma-hero__f img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }   /* 막·그라데이션 없음 · 자리 = 홈 .wm-hero__sl img */
.wma .wma-hero .wm-cr { top: 0; bottom: auto; }                                               /* 사진 출처는 오른쪽 «위» — 아래는 글 상자 자리 */
.wma .wma-hero__in { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
/* 꼬리말 = 라벨칩 값(.875rem · 700 · 대문자 · 바탕 #f3f3f3 · 좌우 1rem · 비스듬) — 속 글을 기울이지 않으려고 skew 대신 clip-path 로 비스듬 끝 */
.wma .wma-hero__k { background: var(--wm-chip); color: var(--wm-ink); font-size: .875rem; line-height: 1; font-weight: 700; text-transform: uppercase;
  padding: .5rem 1rem; clip-path: polygon(.45rem 0, 100% 0, calc(100% - .45rem) 100%, 0 100%); }
/* h1 = 원문 태그 그대로(class 없음 — i18n-core «맨 h1» 번역 자리). 값 = 홈 .wm-h1 (clamp(2.5rem,4.6vw,4.75rem)/.95 · 남색 띠 흰 글자 · 안쪽 .06em .22em .1em) */
.wma .wma-hero__in > h1 { width: fit-content; max-width: 100%; background: var(--wm-navy); color: #fff; padding: .06em .22em .1em;
  font-size: clamp(2.5rem, 4.6vw, 4.75rem); line-height: .95; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: uppercase; }
/* 큰 제목(원문 h2) = 작은 구역 머리 값(1.6875rem/1.22 · 900 기울임) · 흰 띠 검정 글자 */
.wma .wma-hero__t { width: fit-content; max-width: 100%; background: #fff; color: var(--wm-ink); padding: .3em .5em .35em;
  font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; }
/* 한 줄 = 홈 .wm-hero__p 값(1rem · 600 · 안쪽 .45rem .7rem) · 흰 띠 */
.wma .wma-hero__p { width: fit-content; max-width: 100%; background: #fff; color: var(--wm-ink); padding: .45rem .7rem; font-size: 1rem; line-height: 1.35; font-weight: 600; }

/* ═══ 3. 숫자 띠 — 홈 .wm-nums 그대로 + 칸 다섯(홈은 넷) ═══
   🔵 칸 앞에 «RUNNING INSIDE» 옅은 큰 글자(span.wm-wm · 절대 위치)가 첫 아이로 있다 → 칸 차례는 그 다음부터(nth-child 가 하나씩 밀린다 · 10-08 검토) */
.wma .wma-nums { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 1rem; }
.wma .wma-nums > div { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem .5rem; }

/* ═══ 4. 만든 사람 한 마디 — 가운데 · 본문 값(1rem/1.6) · 너비 = 홈 .wm-sec__sub(60ch) ═══ */
.wma .wma-lead { text-align: center; }
.wma .wma-lead__p { max-width: 60ch; margin: 0 auto; font-size: 1rem; line-height: 1.6; font-weight: 500; }
.wma .wma-lead__p strong { font-weight: 800; }

/* ═══ 5. 구역 머리 — 홈 .wm-h2 값(3rem/1.05 · 900 기울임 · 991↓ 2.5rem · 479↓ 8vw) · 한국어 문장이라 대문자 바꿈 없음 ═══ */
.wma .wma-h2 { font-size: 3rem; line-height: 1.05; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: none; margin: 0 0 2rem; max-width: 16ch; }

/* ═══ 6. 사진 반 + 글 반 (규칙 4장 ⑥ — 1fr 1fr · 사진 760:490 · 글 칸 안쪽 = 홈 .wm-split__c 3rem 4rem 3rem 3rem · 뒤집은 쪽 3rem 3rem 3rem 6rem) ═══ */
.wma .wma-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin: var(--wm-sy) var(--wm-gx) 0; }
/* 🔵 마크업 차례는 늘 [사진 · 글](사진이 먼저 떠오르게) — 자리는 order 로 : 기본 = 글 왼쪽 · 사진 오른쪽 / 뒤집은 쪽 = 사진 왼쪽 · 글 오른쪽 */
.wma .wma-split__c { order: 1; min-width: 0; padding: 3rem 4rem 3rem 3rem; }
.wma .wma-split__f { order: 2; position: relative; margin: 0; aspect-ratio: 760 / 490; overflow: hidden; background: var(--wm-grey); }
.wma .wma-split__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wma .wma-split--rev .wma-split__f { order: 1; }
.wma .wma-split--rev .wma-split__c { order: 2; padding: 3rem 3rem 3rem 6rem; }
.wma .wma-split__c > p { margin: 1rem 0 0; font-size: 1rem; line-height: 1.6; }
.wma .wma-split__c > .wma-h2 + p { margin-top: 0; }
.wma .wma-split__c strong { font-weight: 800; }

/* 제휴 칸 넷(원문 div.ab-partner) — 연한 바탕 카드(홈 .wm-pc 꼴 : 바탕 #f7f9fa · 제목 1.25rem/1.3 900 기울임 · 글 .875rem) · 아이콘 남색
   원문 줄바꿈 태그는 좁은 칸에서 글을 들쭉날쭉 끊어 숨긴다 */
.wma .ab-partner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.wma .ab-partner > div { background: var(--wm-page); padding: 1.25rem 1.25rem 1.5rem; min-width: 0; }
.wma .ab-partner h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .6rem; font-size: 1.25rem; line-height: 1.3; font-weight: 900; font-style: italic; }
.wma .ab-partner h3 svg.ri-i { width: 1.375rem; height: 1.375rem; color: var(--wm-navy); }   /* = 폰 바로가기·아래 메뉴 아이콘 크기(부품 모음 1장) */
.wma .ab-partner p { margin: 0; font-size: .875rem; line-height: 1.5; }
.wma .ab-partner p br { display: none; }
.wma .ab-partner p:empty { display: none; }
/* 문의 상자(원문 div.ab-cta) — 남색 면 + 흰 글자(규칙 1장 «면 = 남색») · 단추 = 홈 .wm-btn 값을 «남색 위 흰 바탕»으로 뒤집음 · hover 0.2rem 들림 */
.wma .ab-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; padding: 2rem; background: var(--wm-navy); color: #fff; }
.wma .ab-cta br { display: none; }
.wma .ab-cta > b { font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; }   /* 작은 구역 머리 값 */
.wma .ab-cta__btn { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--wm-navy) !important; border: .125rem solid #fff;
  padding: 1rem 2rem; font-size: 1rem; line-height: 1; font-weight: 800; font-style: italic; transition: transform .2s ease; }
.wma .ab-cta__btn:hover { transform: translateY(-.2rem); }
.wma .ab-cta__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #000; }   /* 규칙 3장 «남색 위 초점 = 흰 테두리 + 검정 겹» */
.wma .ab-cta__tel { flex: 1 1 100%; font-size: .875rem; line-height: 1.6; font-weight: 600; }
.wma .ab-cta__tel b { font-weight: 900; }

/* ═══ 7. 무엇을 하나 — 10-08 사장님 「하지 않습니다 삭제 · 텍스트 우측 · 좌측 이미지 · 순차액션」 → 사진 반 + 글 반(6장 꼴) 안의 ✓ 목록
   목록 = 규칙 3장 «목록 줄»(머리 2px 남색 · 줄마다 1px #d6dce2) · 줄 앞 선 아이콘(✓ 남색 · 24칸 굵기 2) · 줄마다 .wm-rv(0.08초씩 차례) ═══ */
.wma .wma-dd__h { margin: 0 0 .5rem; font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; }
.wma .wma-dd__l { border-top: 2px solid var(--wm-navy); }
.wma .wma-dd__l li { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid var(--wm-line); font-size: 1rem; line-height: 1.6; font-weight: 600; }
.wma .wma-dd__l li::before { content: ""; flex: none; width: 1.375rem; height: 1.375rem; margin-top: .1rem; background-color: var(--wm-navy);
  -webkit-mask: var(--wma-ic) center / contain no-repeat; mask: var(--wma-ic) center / contain no-repeat; }
.wma .wma-dd__c--do { --wma-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E"); }
.wma .wma-dd__c--dont { --wma-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }

/* ═══ 8. 운영 — 사장님 10-08 「운영도 디자인 수정하고」
   [왼쪽 남색 면 : 머리 + 한 줄 소개(작은 구역 머리 값 · 회사 이름 = 울트라 노랑 — 남색 위 강조 · 규칙 0장)] | [오른쪽 연한 면 : 주소 · 대표전화 · 메일 줄(목록 줄 꼴 · 아이콘 남색) + 안내 한 줄]
   두 칸 높이는 격자가 맞춘다(나란한 칸 높이 맞춤 — 사장님 09-22 규칙) ═══ */
/* 자리 : 10:2x 「순서를 좌우로 변경해」 [연락처 | 남색] → 10:5x 「운영배지를 좌측으로 이동해」 → 마크업 [남색(운영) 5 | 연락처 7]
   「운영 속 달리는 캐릭터 희미하게 배경」 → 남색 칸 배경 = 홈 «속보 전체 보기» 칸과 같은 그림·값
   (Material Icons «directions_run» · Apache 2.0 · 흰색 22% · 칸 높이 70% · 오른쪽 아래 — 왼쪽 위 글과 겹치지 않게 · 무한 애니메이션 없음 — 마우스 올리면 조금 앞으로) */
.wma .wma-ops { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin: var(--wm-sy) var(--wm-gx) 0; }
.wma .wma-ops__l { display: flex; flex-direction: column; justify-content: center; padding: 3rem; color: #fff;
  background-color: var(--wm-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.5 1.2 17 22.3'%3E%3Cpath fill='%23fff' fill-opacity='.22' d='M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: auto 70%; background-position: 92% 70%; transition: background-position .5s ease; }
.wma .wma-ops__l:hover { background-position: 97% 70%; }
.wma .wma-ops__l .wma-h2 { color: #fff; margin-bottom: 1.5rem; }
.wma .wma-ops__lead { font-size: 1.6875rem; line-height: 1.22; font-weight: 900; font-style: italic; }
.wma .wma-ops__lead strong { color: var(--wm-c-ultra); font-weight: 900; }                 /* #ffd100 · 남색 위 대비 10.9:1 */
.wma .wma-ops__r { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding: 3rem; background: var(--wm-page); }
.wma .wma-ops__list { border-top: 2px solid var(--wm-navy); }
.wma .wma-ops__list li { display: flex; align-items: center; gap: .85rem; padding: 1rem 0; border-bottom: 1px solid var(--wm-line); font-size: 1rem; line-height: 1.6; font-weight: 700; }
.wma .wma-ic { width: 1.375rem; height: 1.375rem; flex: none; color: var(--wm-navy); }
.wma .wma-ops__list a { text-decoration: underline; text-underline-offset: .2em; transition: color .2s ease; }
.wma .wma-ops__list a:hover { color: var(--wm-navy); }
.wma .wma-ops__note { display: flex; align-items: flex-start; gap: .6rem; font-size: .875rem; line-height: 1.6; font-weight: 500; }
.wma .wma-ops__note .wma-ic { width: 1.125rem; height: 1.125rem; margin-top: .15rem; }

/* ═══ 9. 부스러기 — 지면 맨 밑(문의 .wmq-end 와 같은 꼴) ═══ */
.wma .wma-crumbs { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.wma .wma-crumb { font-size: .875rem; line-height: 1.5; font-weight: 600; }
.wma .wma-crumb a { text-decoration: underline; text-underline-offset: .2em; }
.wma .wma-crumb span[aria-hidden] { color: var(--wm-navy); margin: 0 .35rem; }

/* ═══ 10. 폭별 ═══ */
@media (max-width: 1199px) and (min-width: 992px) {
  .wma .ab-partner { grid-template-columns: minmax(0, 1fr); }        /* 반 칸 안 카드 둘은 1024 에서 한 줄 10자 남짓(검토) → 한 줄 하나 */
}
@media (max-width: 991px) {
  .wma .wma-h2 { font-size: 2.5rem; }
  /* 숫자 다섯 = 6칸 격자 : 위 셋(2칸씩) · 아래 둘(3칸씩) — 빈 칸 없이 */
  .wma .wma-nums { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wma .wma-nums > .wm-rv { grid-column: span 2; }
  .wma .wma-nums > .wm-rv:nth-child(5), .wma .wma-nums > .wm-rv:nth-child(6) { grid-column: span 3; }   /* 첫 아이 = 옅은 글자 span → 넷째·다섯째 칸 */
  /* 사진 반 + 글 반 → 한 줄로 : 글 먼저, 사진 아래(홈 .wm-split 폰 꼴과 같은 차례) */
  .wma .wma-split, .wma .wma-split--rev { grid-template-columns: minmax(0, 1fr); }
  .wma .wma-split__c, .wma .wma-split--rev .wma-split__c { order: 1; padding: 0 0 2rem; }
  .wma .wma-split__f, .wma .wma-split--rev .wma-split__f { order: 2; }
  .wma .wma-ops { grid-template-columns: minmax(0, 1fr); }
  .wma .wma-ops__l, .wma .wma-ops__r { padding: 2.5rem 2rem; }
}
@media (max-width: 767px) {
  .wma .wma-hero__f { height: auto; min-height: 26rem; }                                      /* = 홈 폰 .wm-hero__in */
  .wma .wma-hero__f img { position: absolute; inset: 0; }
  .wma .wma-hero__in { left: 1rem; right: 1rem; bottom: 1.25rem; }
  .wma .wma-hero__in > h1 { font-size: 11vw; }                                               /* 규칙 2장 «h1 폰 11vw» */
  .wma .wma-hero__t { font-size: 1.25rem; }                                                  /* = 홈 카드 제목 .wm-pc__t */
  .wma .wma-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wma .wma-nums > .wm-rv, .wma .wma-nums > .wm-rv:nth-child(5) { grid-column: auto; }
  .wma .wma-nums > .wm-rv:nth-child(6) { grid-column: 1 / -1; }                             /* 다섯째 칸 = 한 줄 통째 */
  .wma .wma-split__c > p br { display: none; }   /* 원문 줄바꿈은 PC 폭에 맞춘 것 — 폰에선 글을 들쭉날쭉 끊는다(한 마디·운영은 남긴다 : 줄이 곧 뜻의 단위) */
  .wma .wma-ops__l, .wma .wma-ops__r { padding: 2rem 1.25rem; }
  .wma .ab-cta { padding: 1.5rem 1.25rem; }
}
@media (max-width: 479px) {
  .wma .wma-h2 { font-size: 8vw; }                                                            /* 규칙 2장 «h2 479↓ 8vw» */
  .wma .wma-ops__lead { font-size: 1.25rem; }
  .wma .ab-partner { grid-template-columns: minmax(0, 1fr); }
  .wma .ab-cta__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .wma .ab-cta__btn, .wma .wma-ops__list a, .wma .wma-ops__l { transition: none; }
}