/* ═══ RUNIN.KR 문의 /contact/ — World Marathon Majors 디자인(공용 wm- · 지면 고유 wmq-) · 2026-10-07 · 클로드A ═══
   규칙 한 장 : https://idc.kr/_claude/CODE_RULES.txt
   디자인 규칙 : 홈WMM시안\live\RUNIN_WMM_DESIGN.txt v3.5 · 부품 = RUNIN_WMM_PARTS.txt (값의 출처는 줄마다 주석)
   📌 사장님 10-06 21:1x 「제휴문의 리뉴얼 디자인해」 — /find/ · /course/ 꼴 : [왼쪽 30% 열 = 붙어 다니는 문의 갈래 9 → 열 맨 밑 받는 곳 | 오른쪽 = 폼 · 전용 지면 · 단계 · 사진 세 가지]
      → 맨 밑 자주 묻는 질문(긴 글 · 목록 둘) → /inside/ 한 칸(접는 줄) → 회사 표 → 부스러기 → 숫자 띠. 폰 = 갈래가 «붙어 다니는 가로 칩 띠»(«광고 · 제휴» 맨 앞).
   🔵 10-07 검토 반영 : #2 낮은 화면 칸 잘림 · #4 /inside/ 칸 접기 · #5 폰 «광고 · 제휴» 맨 앞 · #6 문답 목록 둘 · #7 폰 입력 중 띠 풀기 · #8 단추 초점 남색 · #9 폰 받는 곳 겹침
   🔴 이 파일은 홈 wmm.css «뒤에» 실린다(같은 부품·같은 값). 홈 부품(.wm-btn .wm-eb .wm-sec .wm-faq …)은 다시 정의하지 않고,
      이 지면 전용(wmq-)과 «옛 gear.css·riin-contact.css·app.css 가 맡던 기능 규칙»만 둔다. 선택자는 전부 body.wmq-p 또는 .wmq(새 main) 아래.
   🔴 폼은 «원문 마크업 그대로»다(PHP 가 문자열로 옮김 · class rgx-* 그대로). 모양 값 = 장비 문의 wmm-gear.css 10장(같은 rgx-form 꼴 — 두 문의 지면이 같은 모양).
   🔴 글자는 완전 검정(#000). 회색 글자 금지(입력칸 자리표시 글만 #767676 — 대회등록 Q1 과 같은 값·같은 결재 대기). 남색 글자 = 링크·고른 갈래·«광고 · 제휴»·번호만.
      면·2px 줄·단추 테두리·아이콘(가상 요소 포함) = 남색 #000075 (v3.5). 포인트 빨강 = 이 지면 본문 0(«지금 서둘러라» 자리가 없다).
   🔴 장식 가로줄 0 — 남는 선 = 목록·표 머리 2px 남색 · 줄 사이 1px #d6dce2 · 정의 표 머리칸 오른쪽 1px · 입력칸 · 폰 칩 띠 경계(/find/ .ri-fm 값).
   🔴 :has() 는 쓰지 않는다 — 고른 갈래는 스크립트가 붙이는 aria-current 로.
   🔵 되돌리기 : wmm-contact/ENABLED → ENABLED.off (CSS 만 고쳤으면 캐시 삭제 불필요 — 파일 링크 + ?ver=filemtime) */

/* ═══ 0. 기능 규칙 — 옛 CSS 를 걷으면서 «빠지면 오류 없이 깨지는» 것 ═══ */

/* 🔴 꿀단지 — 옛 gear.css·riin-contact.css 에만 있었다. 드러나면 사람이 채우고 처리기가 «성공한 척» 문의를 버린다.
      head 인라인 <style id="wmq-crit">(PHP RUNIN_WMQ_CRIT) 와 «같은 값»을 한 번 더 — 둘 중 하나만 살아도 숨는다. 지우지 말 것 */
body.wmq-p .rgx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* 화면낭독기 전용 글 — 빠지면 숨은 글이 화면에 다 보인다 (= .wm-sr · reg 0장 · find :12) */
body.wmq-p .ri-sr, body.wmq-p .screen-reader-text, body.wmq-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.wmq-p svg.ri-i { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
/* 알림 모달(원문 #ri-alert-modal · app.js 가 is-open·hidden 을 함께 바꾼다 · 이 지면엔 여는 단추 0 이지만 원료 보존) — 장비 0장 값 그대로 */
body.wmq-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.wmq-p .ri-modal.is-open { display: flex; }
body.wmq-p .ri-modal[hidden] { display: none; }
body.wmq-p .ri-modal__panel { max-height: 90vh; overflow-y: auto; }
body.wmq-p .ri-modal .wm-dlg__x { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--wm-navy); }
body.wmq-p .ri-modal .wm-dlg__x svg { width: 1.25rem; height: 1.25rem; }
body.ri-locked { overflow: hidden; }
/* [hidden] 짝 — 갈래 안내(#ct-note)·대회 등록 바로가기(#ct-go)는 «hidden» 으로 여닫힌다(원래 스크립트). 아래 .rgx-kn{display:flex} 가 hidden 을 이기면 빈 칸이 늘 보인다 */
.wmq [hidden] { display: none !important; }

/* ═══ 1. 머리 — 메뉴 줄이 «붙어 다니게»(≥1024 · find·reg·news 와 같은 값 : 헤더 통째 sticky + 로고 줄 4.5625rem 만큼 위로) ═══ */
@media (min-width: 1024px) {
  body.wmq-p .wm-head { position: sticky; top: -4.5625rem; z-index: 50; }
  body.wmq-p.admin-bar .wm-head { top: calc(32px - 4.5625rem); }                            /* 로그인 화면 — 관리 막대(32px) 아래에 메뉴 줄 */
}

/* ═══ 2. 지면 머리 — h1(원문 태그 그대로 · class 없음) + 한 줄(p.ri-lede 원문) ═══ */
.wmq .wmq-sec { padding-top: 2.5rem; }                                                        /* 지면 첫 구역 = find .wm-fd-sec · reg .wmg-sec */
.wmq .wmq-hd { margin-bottom: 2.5rem; }
/* 🔵 h1 은 class 가 없다(PHP 주석 — i18n-core «맨 <h1>» 번역 자리). 값은 .wm-h2 와 같다(wmm.css:62-64 · reg 2장과 같은 줄) */
.wmq .wmq-hd > h1 { font-size: 3rem; line-height: 1.05; font-weight: 900; font-style: italic; letter-spacing: -.01em; text-transform: uppercase; color: var(--wm-ink); }
.wmq .wmq-hd .ri-lede { margin-top: 1.25rem; max-width: 60ch; font-size: 1rem; line-height: 1.6; font-weight: 500; }   /* = .wm-sec__sub (wmm.css:225) */
.wmq .wmq-hd .ri-lede strong { font-weight: 800; }

/* ═══ 3. 격자 — [왼쪽 30% 열 : 붙어 다니는 갈래 칸 → 열 맨 밑 받는 곳 | 오른쪽] (≥992 · /find/ 값) · ≤991 은 한 줄로 쌓고 갈래는 붙어 다니는 칩 띠(9장) ═══ */
.wmq .wmq-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }          /* wmm-find.css:62 */
.wmq .wmq-side, .wmq .wmq-main { min-width: 0; }
/* 칸 머리(「문의 갈래」 · 「받는 곳」) = .wm-filt__l 값(wmm.css:293 — /find/ 거르개 칸 묶음 이름과 같은 꼴) */
.wmq .wmq-side__h { margin: 0 0 .9rem; font-size: .875rem; line-height: 1.2; font-weight: 900; font-style: italic; text-transform: uppercase; }

/* ═══ 4. 갈래 목록 (모든 폭 공통 — 폭별 꼴은 아래 ≥992 · 9장) ═══ */
.wmq .wmq-cat { position: relative; display: flex; align-items: center; color: var(--wm-ink); transition: background-color .2s ease, color .2s ease; }
.wmq .wmq-cat svg { flex: none; color: var(--wm-navy); }                                     /* 아이콘 = 남색(v3.5) */
/* «광고 · 제휴» — 사장님이 이 지면을 «제휴문의»라 부르신다 → 늘 남색 글자 900(강조 = 남색 · 빨강 아님 — 규칙 1장) */
.wmq .wmq-cat--ad { color: var(--wm-navy); }

@media (min-width: 992px) {
  .wmq .wmq-body { grid-template-columns: 30% minmax(0, 1fr); gap: 3rem; align-items: start; }   /* wmm-find.css:350 (WMM §9-2 왼쪽 30% · §5 사이 3rem) */
  /* (10-07 검토 #2) 왼쪽 열 = «통째 높이»(stretch) · 두 덩어리 : 갈래 칸(붙어 다님) → 받는 곳(열 맨 밑 · 흐름 그대로).
     첫 판은 칸 «통째»(갈래 9 + 받는 곳 ≈ 915px)를 붙이고 높이를 화면 − 8.5rem 으로 막아, 낮은 화면에서 받는 곳이 칸 안 스크롤로 잘렸다
     (1440×900 갈무리 «대표전화» 뒤 · 1366×768 은 갈래 9 만 · 잘린 줄 = 이 칸에만 있는 «그 밖의 모든 문의 → sales@idc.kr»·덧말 · «더 있다» 표시 0).
     검토 원안(줄 촘촘 + «높이 860 이하면 붙임 풀기»)은 줄인 뒤 실측(ko 827~850 · en 846~907px + 위아래 136px = 963~1043 높이 필요)으로 보면
     900 높이에서도 그대로 잘리고, 경계를 1050 으로 올리면 1080p 모니터(창 안 높이 약 950)도 못 붙는다 → 붙는 것은 «갈래 칸»만(ko 약 430px).
     받는 곳은 폰(≤991)과 같은 «내용 뒤» 자리 — 사진 세 가지 옆에서 늘 다 보인다 */
  .wmq .wmq-side { align-self: stretch; display: flex; flex-direction: column; }
  .wmq .wmq-side__nav { flex: 1 1 auto; }                                                    /* 갈래 칸이 붙어 다닐 «길» — 받는 곳 앞에서 멈춘다(겹침 0) */
  /* 갈래 칸 — /find/ 거르개 칸 값(#f7f9fa · 안쪽 2rem 1rem · sticky 7.5rem = 메뉴 줄 아래) · 높이 상한 = 화면 − (top + 1rem)(뉴스 검토 #6) = 600 미만 화면의 안전망
     · overflow-x hidden = 긴 외국어 갈래가 칸 안 가로 막대를 만들지 않게(뉴스 검토 #3) · overscroll-behavior 는 넣지 않는다(뉴스 검토 #1 — 휠을 삼킨다) */
  .wmq .wmq-cats { position: sticky; top: 7.5rem; max-height: calc(100vh - 8.5rem); overflow-y: auto; overflow-x: hidden; background: var(--wm-page); padding: 2rem 1rem; scrollbar-width: thin; }
  /* 목록 줄 = 뉴스 세로 분류(.wmn-tab ≥992)·.wm-list 꼴 : 머리 2px 남색 · 줄마다 1px · 고른 것 = 남색 글자 + 왼쪽 4px 남색 막대 + 흰 바탕
     글자 = 메뉴 값(1rem · 굵게 — 규칙 2장 «메뉴 1rem 600»보다 한 단 굵게 : 칸 안 한글 문장이라 기울이지 않는다) */
  .wmq .wmq-cats__l { border-top: 2px solid var(--wm-navy); }
  /* (10-07 검토 #2) 줄 높이 3rem → 2.5rem · 위아래 .7 → .5rem — 갈래 칸(ko 457 · en 476~494px)이 낮은 화면(1280×650 실측)에도 잘림 없이 붙게(눌러 고르는 칸 높이 40px) */
  .wmq .wmq-cat { gap: .75rem; min-height: 2.5rem; padding: .5rem .5rem .5rem .9rem; border-bottom: 1px solid var(--wm-line); font-size: 1rem; line-height: 1.3; font-weight: 700; }
  .wmq .wmq-cat svg { width: 1.375rem; height: 1.375rem; }                                    /* = 폰 바로가기·아래 메뉴 아이콘 크기(부품 모음 1장) */
  .wmq .wmq-cat:hover { background: var(--wm-nav2); }
  .wmq .wmq-cat[aria-current] { background: #fff; color: var(--wm-navy); font-weight: 900; }
  .wmq .wmq-cat[aria-current]::before { content: ""; position: absolute; left: 0; top: .6rem; bottom: .6rem; width: 4px; background: var(--wm-navy); }   /* = .wmn-tab.is-on::before */
  .wmq .wmq-cat--ad { font-weight: 900; }
  .wmq .wmq-to { margin-top: 1.5rem; padding: 2rem 1rem; background: var(--wm-page); }       /* (검토 #2) 받는 곳 = 갈래 칸과 같은 값의 «따로 한 칸» */
}
/* 992~1023 — 칸은 붙는데 메뉴 줄이 안 붙는 폭(1장 ≥1024 만) → top 7.5rem 이 빈 띠로 남는다(/find/ :366 · 뉴스와 같은 값) */
@media (min-width: 992px) and (max-width: 1023px) {
  .wmq .wmq-cats { top: 2rem; max-height: calc(100vh - 3rem); }
}

/* ═══ 5. 받는 곳(≥992 왼쪽 열 맨 밑 · ≤991 내용 뒤) — 메일 둘 · 대표전화 · 응대 시간 = 정의 목록(머리 2px 남색 · 줄마다 1px) ═══ */
.wmq .wmq-to__l { margin: 0; border-top: 2px solid var(--wm-navy); }
.wmq .wmq-to__l > div { padding: .75rem .25rem; border-bottom: 1px solid var(--wm-line); }
.wmq .wmq-to__l dt { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .8125rem; line-height: 1.35; font-weight: 800; }   /* = .wm-row__s 크기 */
.wmq .wmq-to__l dt svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--wm-navy); }
.wmq .wmq-to__l dd { margin: .25rem 0 0 1.625rem; font-size: 1rem; line-height: 1.45; font-weight: 700; }   /* 왼쪽 = 아이콘 1.125rem + 사이 .5rem → 글자 시작 맞춤 */
.wmq .wmq-to__l dd a { color: var(--wm-navy); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }   /* 메일·전화가 쪼개지지 않게(runin_wm_nw 와 같은 뜻) */
.wmq .wmq-to__n { margin-top: .75rem; font-size: .8125rem; line-height: 1.5; font-weight: 500; }

/* ═══ 6. 폼 — 장비 문의 wmm-gear.css 10장 값 그대로(같은 rgx-form 꼴 · 두 문의 지면이 같은 모양). 폼 규칙은 .rgx-form 아래로만(발 알림 폼·모달과 안 겹치게) ═══ */
.wmq .ri-cform { margin: 0; }
/* 알림(보낸 뒤·오류 — 10-07 사본엔 없음 · 같은 처리기 꼴 대비) = 장비 .rgx-msg 값 : 보냄 #f7f9fa · 그 밖 남색 띠 흰 글자 700(빨강 아님) */
.wmq .rgx-msg { margin: 0 0 1.75rem; padding: 1.25rem; font-size: 1rem; line-height: 1.6; }
.wmq .rgx-msg b { display: block; font-weight: 800; }
.wmq .rgx-msg--ok { background: var(--wm-page); font-weight: 600; }
.wmq .rgx-msg--no { background: var(--wm-navy); color: #fff; font-weight: 700; }
.wmq .rgx-msg--no a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.wmq .rgx-form { margin: 0; }
.wmq .rgx-fs { min-width: 0; margin: 0 0 3rem; padding: 0; border: 0; }
.wmq .rgx-fs legend { padding: 0; margin: 0 0 1.25rem; font-size: 1.5rem; line-height: 1.2; font-weight: 900; font-style: italic; text-transform: uppercase; }
.wmq .rgx-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; }
.wmq .rgx-f { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.wmq .rgx-fs > .rgx-f + .rgx-f { margin-top: 1.25rem; }
.wmq .rgx-f--wide { grid-column: 1 / -1; }
.wmq .rgx-f label { display: block; margin: 0 0 .3rem; font-size: .875rem; line-height: 1.4; font-weight: 800; }
.wmq .rgx-f label em { margin-left: .25rem; font-style: normal; font-size: .75rem; font-weight: 800; color: var(--wm-navy); }   /* 「필수」 — 빨강 금지 */
.wmq .rgx-f input, .wmq .rgx-f select, .wmq .rgx-f textarea { width: 100%; min-height: 3.25rem; margin: 0; padding: .75rem 1rem; border: .125rem solid var(--wm-field); border-radius: 0;
  background: #fff; color: var(--wm-ink); font: inherit; font-size: 1rem; }                  /* 입력 글자 1rem — 아이폰 확대 없음 */
.wmq .rgx-f textarea { resize: vertical; line-height: 1.6; }
.wmq .rgx-f input:focus, .wmq .rgx-f select:focus, .wmq .rgx-f textarea:focus { outline: none; border-color: var(--wm-navy); box-shadow: 0 0 0 2px var(--wm-navy); }
/* 자리표시 글자 = 입력칸 테두리와 같은 #767676(흰 바탕 4.54:1) — 브라우저 기본 회색(크롬 2.35:1)은 AA 미달·브라우저마다 다르다(reg 1.0.1 · Q1 결재 대기 그대로) */
.wmq .rgx-form ::placeholder { color: var(--wm-field); opacity: 1; }
.wmq .rgx-f__hint { display: block; margin-top: .4rem; font-size: .875rem; line-height: 1.5; font-weight: 500; }
.wmq .rgx-f__hint b { font-weight: 800; color: var(--wm-navy); }                               /* 「광고 · 제휴」 — 원문이 <b> 로 강조한 갈래 · 강조 = 남색 */
.wmq .rgx-f__hint em { margin-left: .5rem; font-style: normal; font-weight: 800; color: var(--wm-navy); white-space: nowrap; }
/* 갈래 안내 — 고른 갈래 바로 아래(원래 스크립트가 data-note 를 #ct-note 에 쓰고 hidden 을 연다) · #ct-go = 대회 등록 신청 바로가기.
   #f7f9fa 칸(규칙 1 «연한 바탕») + 앞에 남색 선 아이콘(가상 요소 = mask — 색은 바탕색 남색 · 폼 마크업 0 변경) */
.wmq .rgx-kn { display: flex; align-items: flex-start; gap: .6rem; margin: .75rem 0 0; padding: .9rem 1rem; background: var(--wm-page); font-size: .9375rem; line-height: 1.6; font-weight: 600; }
.wmq .rgx-kn::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem; background: var(--wm-navy);
  -webkit-mask: 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' stroke-linejoin='miter'%3E%3Cpath d='M4 5h16v11H9l-5 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' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wmq .rgx-kn--go::before {
  -webkit-mask-image: 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' stroke-linejoin='miter'%3E%3Crect x='3.5' y='5' width='17' height='15.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M12 13v5M9.5 15.5h5'/%3E%3C/svg%3E");
          mask-image: 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' stroke-linejoin='miter'%3E%3Crect x='3.5' y='5' width='17' height='15.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4M12 13v5M9.5 15.5h5'/%3E%3C/svg%3E"); }
.wmq .rgx-kn + .rgx-kn { margin-top: .5rem; }
.wmq .rgx-kn a { color: var(--wm-navy); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
/* 개인정보 칸 — #f7f9fa 2.25rem · h2 1.25rem 900 기울임 · 정의 표(위 2px 남색 · 줄 1px · 머리칸 118px — /find/ 펼침 표 값) · 체크 1.25rem 남색 */
.wmq .rgx-agree { margin: 0 0 2rem; padding: 2.25rem; background: var(--wm-page); }
.wmq .rgx-agree h2 { margin: 0 0 1rem; font-size: 1.25rem; line-height: 1.3; font-weight: 900; font-style: italic; }
.wmq .rgx-agree__d { margin: 0; border-top: 2px solid var(--wm-navy); background: #fff; }
.wmq .rgx-agree__d > div { display: grid; grid-template-columns: 118px minmax(0, 1fr); border-bottom: 1px solid var(--wm-line); }
.wmq .rgx-agree__d dt { min-width: 0; margin: 0; padding: .85rem .75rem; border-right: 1px solid var(--wm-line); font-size: .9375rem; line-height: 1.4; font-weight: 800; overflow-wrap: anywhere; }
.wmq .rgx-agree__d dd { min-width: 0; margin: 0; padding: .85rem .75rem; font-size: .9375rem; line-height: 1.6; font-weight: 500; }
.wmq .rgx-agree__d dd b { font-weight: 800; }
.wmq .rgx-agree__n { margin: 1rem 0; font-size: .875rem; line-height: 1.6; }
.wmq .rgx-agree__n a { font-weight: 800; color: var(--wm-navy); text-decoration: underline; text-underline-offset: 3px; }
.wmq .rgx-agree__c { margin: 0; }
.wmq .rgx-agree__c label { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.wmq .rgx-agree__c input { flex: none; width: 1.25rem; height: 1.25rem; margin: .2rem 0 0; accent-color: var(--wm-navy); }
.wmq .rgx-agree__c span { font-size: 1rem; line-height: 1.6; }
.wmq .rgx-agree__c b { font-weight: 800; }
.wmq .rgx-agree__c em { margin-left: .25rem; font-style: normal; font-size: .75rem; font-weight: 800; color: var(--wm-navy); }
/* 보내기 줄 — button.rgx-btn(class 그대로) = 주 단추(.wm-btn 값 wmm.css:74-80) · 덧말 .875rem */
.wmq .rgx-form__go { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 2rem 0 0; }
.wmq .rgx-form__go span { flex: 1 1 16rem; font-size: .875rem; line-height: 1.6; font-weight: 500; }
.wmq .rgx-form__go span b { font-weight: 800; }
.wmq .rgx-btn { -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: inherit; font-size: 1rem; line-height: 1; font-weight: 800; font-style: italic;
  text-transform: uppercase; cursor: pointer; transition: transform .2s ease; }
.wmq .rgx-btn:hover { transform: translateY(-.2rem); }                                       /* 규칙 3 hover «0.2rem 들림» 하나 */
/* (10-07 검토 #8) 초점 = 남색 3px 링 + 3px 떨어짐(흰 바탕이 틈으로 보인다) — wmm.css:674 .wm-nc 와 같은 꼴. 첫 판 «흰 테두리 + 검정 겹»(wmm.css:57)은 v3.5 «검정은 글자만»에 어긋난다.
   검토 원안(box-shadow 5px 남색 + 흰 outline)은 쓰지 않는다 — 흰 테두리가 흰 바탕에 묻히고 남은 2px 남색이 남색 단추에 붙어 «초점이 안 보인다» */
.wmq .rgx-btn:focus-visible { outline: 3px solid var(--wm-navy); outline-offset: 3px; box-shadow: none; }

/* ═══ 7. 오른쪽 덩어리 공통 — 덩어리 사이 4rem(구역 간격 값) · 머리 = .wm-hs(1.6875rem 900 기울임) ═══ */
.wmq .wmq-blk { margin-top: 4rem; }
.wmq .wmq-blk__h { margin: 0 0 1.25rem; text-transform: none; }
.wmq .wmq-note { margin-top: 1rem; font-size: .875rem; line-height: 1.6; font-weight: 500; }

/* ═══ 8. 전용 지면 — 아이콘 + 짧은 글 칸(부품 모음 15장 ① = .wm-lead__c 값 : 바탕 #f3f3f3 · 아이콘 2rem 남색 · 1.125rem 900 기울임 · 사이 2px) ═══ */
.wmq .wmq-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.wmq .wmq-card { display: flex; align-items: center; gap: .9rem; min-height: 5rem; padding: 1.1rem 1rem 1.1rem 1.25rem; background: var(--wm-chip); color: var(--wm-ink); transition: background-color .2s ease; }
.wmq .wmq-card:hover { background: var(--wm-nav2); }                                          /* = .wm-lead__c:hover */
.wmq .wmq-card > svg:first-child { width: 2rem; height: 2rem; flex: none; color: var(--wm-navy); }
.wmq .wmq-card b { flex: 1 1 auto; min-width: 0; font-size: 1.125rem; line-height: 1.3; font-weight: 900; font-style: italic; }
.wmq .wmq-card--ad b { color: var(--wm-navy); }                                              /* 광고 · 제휴 · 등재 문의 — 갈래 칸과 같은 강조 */
.wmq .wmq-card__go { width: .9rem; height: .9rem; flex: none; color: var(--wm-navy); transition: transform .2s ease; }   /* = 카드 «자세히 보기» 꺾쇠 .9rem */
.wmq .wmq-card:hover .wmq-card__go { transform: translateX(.2rem); }

/* ═══ 9. 보내신 다음에는 — 단계 3칸(장비 «고르는 기준» 번호 2rem 900 기울임 남색 wmm-gear.css:531 값 + 아이콘 2rem) · 사진 세 가지 — 아이콘 3칸 ═══ */
.wmq .wmq-steps, .wmq .wmq-chks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.wmq .wmq-step, .wmq .wmq-chk { padding: 1.5rem 1.25rem; background: var(--wm-page); }
/* 윗줄 = [큰 남색 번호 | 아이콘] — 단계·사진 같은 꼴. 🔴 번호는 글 p «밖»(PHP 주석 — 외국어 자동번역 마디 보존) */
.wmq .wmq-step__top, .wmq .wmq-chk__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.wmq .wmq-step__n, .wmq .wmq-chk__n { font-size: 2rem; line-height: 1; font-weight: 900; font-style: italic; color: var(--wm-navy); font-variant-numeric: tabular-nums; }
.wmq .wmq-step__top svg, .wmq .wmq-chk__top svg { width: 2rem; height: 2rem; flex: none; color: var(--wm-navy); }
.wmq .wmq-step__t { font-size: .9375rem; line-height: 1.6; font-weight: 500; }
.wmq .wmq-chk__t { font-size: 1rem; line-height: 1.5; font-weight: 800; }
.wmq .wmq-chk__d { margin-top: .4rem; font-size: .875rem; line-height: 1.6; font-weight: 500; }

/* ═══ 10. 자주 묻는 질문 — 공용 .wm-faq(wmm.css 10-06 · ⊕ 남색) + 이 지면 답 속 꼴 ═══ */
.wmq .wmq-wrap { max-width: 64rem; }                                                          /* = .wm-faq 최대 폭(WMM container-medium) — 머리·표·한 칸을 같은 세로줄에 */
.wmq .wmq-faqs .wm-sec__hd { margin-bottom: 0; }
/* 질문은 h3(원문 rct-card__h 와 같은 단계) — 브라우저 h3 기본 글자 크기를 끄고 summary 값(1.3rem 700)을 받는다. 🔴 font 단축 «단독» inherit 는 안전(축약 속 inherit 은 선언째 버려진다 — CLAUDE.md 09-24) */
.wmq .wm-faq__q { font: inherit; margin: 0; }
/* 답 줄 간격 — 공용 1.3 은 짧은 영문 답 값. 이 지면 답은 한국어 여러 줄이라 본문 값 1.6(.wm line-height)으로 */
.wmq .wm-faq__a { line-height: 1.6; }
.wmq .wm-faq__a > * + * { margin-top: .75rem; }
.wmq .wm-faq__a a { color: var(--wm-navy); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.wmq .wmq-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 1rem; margin: 0; }
.wmq .wmq-kv dt { padding-top: .1rem; font-size: .875rem; font-weight: 800; white-space: nowrap; }
.wmq .wmq-kv dd { margin: 0; }
.wmq .wmq-faq__go span { margin-left: .5rem; font-size: .875rem; font-weight: 500; }
.wmq .wmq-faq__go a + a { margin-left: .75rem; }
.wmq .wmq-faq__lead { font-weight: 700; }
.wmq .wmq-fork { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.wmq .wmq-fork__c { padding: 1.25rem; background: var(--wm-page); }
.wmq .wmq-fork__c > * + * { margin-top: .6rem; }
.wmq .wmq-fork__h { font-weight: 900; font-style: italic; }
.wmq .wm-faq__a .wmq-link { display: inline-flex; align-items: center; font-weight: 800; font-style: italic; text-decoration: none; }   /* 링크 단추(남색 글자 + 화살표 글자 원문) */
.wmq .wm-faq__a .wmq-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.wmq .wm-faq__a .wmq-note { margin-top: .6rem; }
.wmq .wmq-faqs__foot { margin-top: 1.5rem; }
.wmq .wmq-faq2 { margin-top: 3rem; }                                                           /* (검토 #6) 갈래 아닌 두 문답 — 머리 없이 한 칸 띄워 «다른 묶음» */

/* ═══ 11. 사이트를 만드는 일도 — /inside/ 로 가는 «한 칸»(#f7f9fa · 안쪽 2.25rem = 장비 .rgx-take 값) ═══
   [제목 · 한 줄 | 단추] + 접는 줄(꼬리표 4 = 손잡이 · ⊕ 남색 → 덧말 · 숫자 4 · 기준일)
   (10-07 검토 #4) 첫 판은 다 펼쳐 10줄 가까웠다 + «945 등록 대회»가 숫자 띠 «1,035건»과 붙어 보였다 → 숫자는 접힌 속(PHP 주석) */
.wmq .wmq-bizsec, .wmq .wmq-whosec { padding-top: 0; }                                       /* 앞 구역 아래 4rem 이 사이 — 두 겹(8rem) 막기 */
.wmq .wmq-biz { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.25rem 3rem; padding: 2.25rem; background: var(--wm-page); }
.wmq .wmq-biz__h { margin: 0 0 .5rem; text-transform: none; }
.wmq .wmq-biz__p { font-size: 1rem; line-height: 1.6; font-weight: 500; }
.wmq .wmq-biz__go { margin: 0; }
/* 접는 줄 — 공용 .wm-faq__i 의 ⊕(남색 · wmm.css:812-814)만 빌리고 크기·줄은 이 칸 값 : 아래 1px 줄 없음(장식 줄 0) · 글자 1rem */
.wmq .wmq-biz__more { grid-column: 1 / -1; border-bottom: 0; }
.wmq .wmq-biz__more > summary { padding: .25rem 3rem .25rem 0; font-size: 1rem; line-height: 1.5; }
.wmq .wmq-biz__more > .wm-faq__a { padding: 1.25rem 3rem 0 0; }
.wmq .wmq-biz__in > * + * { margin-top: .75rem; }
.wmq .wmq-biz__in { margin-top: 1rem; }
/* 하는 일 꼬리표 — 비스듬 바탕(::before)만 기울이고 글자는 바로(reg 3-3 꼴) · 연한 바탕 위라 흰 칩 · summary 안이라 span(구절 내용만) */
.wmq .wmq-tags { display: flex; flex-wrap: wrap; gap: .5rem .6rem; padding-left: .4rem; }
.wmq .wmq-tags > span { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 2rem; padding: 0 .8rem; font-size: .875rem; line-height: 1; font-weight: 800; }
.wmq .wmq-tags > span::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skew(-16deg); background: #fff; }
.wmq .wmq-biz__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }   /* 위 1.25rem = 덧말과 숫자 사이 */
.wmq .wmq-biz__nums li { display: flex; flex-direction: column; gap: .25rem; }
.wmq .wmq-biz__nums b { font-size: 2rem; line-height: 1; font-weight: 900; font-style: italic; color: var(--wm-navy); font-variant-numeric: tabular-nums; }   /* 집계 숫자 = 남색(빨강 금지) */
.wmq .wmq-biz__nums span { font-size: .875rem; font-weight: 700; }

/* ═══ 12. 받는 곳 — 회사 정의 표(장비 .rgx-facts 값 : 위 2px 남색 · 줄 1px · 머리칸 10rem · 오른쪽 1px) ═══ */
.wmq .wmq-facts { margin: 0; border-top: 2px solid var(--wm-navy); background: #fff; }
.wmq .wmq-facts > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); border-bottom: 1px solid var(--wm-line); }
.wmq .wmq-facts dt { min-width: 0; margin: 0; padding: .85rem .75rem; border-right: 1px solid var(--wm-line); font-size: .9375rem; line-height: 1.4; font-weight: 800; overflow-wrap: anywhere; }
.wmq .wmq-facts dd { min-width: 0; margin: 0; padding: .85rem .75rem; font-size: 1rem; line-height: 1.6; font-weight: 500; }
.wmq .wmq-facts dd a { font-weight: 700; color: var(--wm-navy); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ═══ 13. 맨 밑 부스러기 (find·reg 자리 · reg 8장 값) ═══ */
.wmq .wmq-end { padding-top: 0; padding-bottom: 2.5rem; }
.wmq .wmq-crumb { margin: 0; font-size: .875rem; font-weight: 700; color: var(--wm-ink); }
.wmq .wmq-crumb a { text-decoration: underline; text-underline-offset: 3px; }

/* ═══ 14. 폭별 (1199 · 991 · 767 · 479) ═══ */
@media (max-width: 1199px) {
  .wmq .wmq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 991↓ — 칸이 풀린다 : 갈래 = «붙어 다니는 가로 칩 띠»(/find/ 폰 .ri-fm · 뉴스 16-b 값 : sticky top 0 · 흰 바탕 · 아래 1px · z 30)
   받는 곳 = 오른쪽 내용 «뒤»로. .wmq-side 를 display:contents 로 풀어 두 덩어리를 따로 줄 세운다(마크업 하나로 두 폭) */
@media (max-width: 991px) {
  .wmq .wmq-hd > h1 { font-size: 2.5rem; }                                                    /* wmm.css:540 (.wm-h2 991↓) */
  .wmq .wmq-hd { margin-bottom: 1.5rem; }
  .wmq .wmq-body { display: flex; flex-direction: column; gap: 2rem; }
  .wmq .wmq-side, .wmq .wmq-side__nav { display: contents; }                                /* 감싼 칸(검토 #2)도 풀어 칩 띠가 .wmq-body 의 줄 항목으로 */
  .wmq .wmq-cats { order: -1; position: sticky; top: 0; z-index: 30; margin: 0 calc(-1 * var(--wm-gx)); padding: .5rem var(--wm-gx); background: #fff; border-bottom: 1px solid var(--wm-line); }
  .wmq .wmq-cats .wmq-side__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }   /* 눈에서만 숨김(nav 이름표로 남는다) */
  .wmq .wmq-cats nav { overflow-x: auto; scrollbar-width: none; }
  .wmq .wmq-cats nav::-webkit-scrollbar { display: none; }
  .wmq .wmq-cats__l { display: flex; gap: .6rem; width: max-content; padding: .1rem .5rem; }    /* 양쪽 .5rem = 비스듬 바탕이 띠 끝에서 잘리지 않을 자리 */
  /* 칩 = 고르기 칩 값(wmm.css:99 · 뉴스 바로가기 칩 2.5rem) — 바탕만 비스듬(::after), 글자는 바로 · 고른 것 = 남색 바탕 흰 글자(규칙 3) */
  .wmq .wmq-cat { isolation: isolate; flex: none; gap: .4rem; height: 2.5rem; padding: 0 .95rem; font-size: .875rem; line-height: 1; font-weight: 800; font-style: italic; white-space: nowrap; }
  .wmq .wmq-cat::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: skew(-16deg); background: var(--wm-chip); transition: background-color .2s ease; }
  .wmq .wmq-cat:hover::after { background: var(--wm-nav2); }
  .wmq .wmq-cat svg { width: 1.125rem; height: 1.125rem; }
  .wmq .wmq-cat[aria-current] { color: #fff; }
  .wmq .wmq-cat[aria-current]::after { background: var(--wm-navy); }
  .wmq .wmq-cat[aria-current] svg { color: #fff; }
  /* (10-07 검토 #5) «광고 · 제휴» 칩 = 띠 맨 앞 — 390 폭엔 칩이 1.5장만 보여 6번째면 발 «문의»로 온 사람이 못 본다(사장님이 이 지면을 «제휴문의»라 부르신다).
     차례만 바꾼다(마크업·PC 세로 칸 차례 그대로) · 고른 칩으로 띠를 미는 스크립트는 화면 자리(getBoundingClientRect)로 재서 order 와 상관없다 */
  .wmq .wmq-cats__ad { order: -1; }
  /* (10-07 검토 #7) 글을 치는 동안(#wmq-js 가 .wmq-body 에 wmq-typing) 띠를 붙이지 않는다 — 자판 + 띠 + 아래 메뉴가 화면 1/3. sticky ↔ relative 는 흐름 자리가 같다 */
  .wmq .wmq-body.wmq-typing .wmq-cats { position: relative; }
  .wmq .wmq-main { order: 0; }
  .wmq .wmq-to { order: 1; padding: 1.25rem; background: var(--wm-page); }
  /* (10-07 검토 #9) 대표전화·응대 시간 = 한 화면 뒤 회사 표와 겹친다 → 폰에선 메일 두 줄·덧말만 */
  .wmq .wmq-to__dup { display: none; }
  .wmq .wmq-biz { grid-template-columns: minmax(0, 1fr); }
}
/* 로그인 화면 — WP 관리 막대가 601~782 에서 46px · 783↑ 32px «고정»이라 top 0 이면 띠가 그 밑으로 숨는다(뉴스·러닝클래스와 같은 값) */
@media (min-width: 601px) and (max-width: 782px) {
  body.admin-bar .wmq .wmq-cats { top: 46px; }
}
@media (min-width: 783px) and (max-width: 991px) {
  body.admin-bar .wmq .wmq-cats { top: 32px; }
}
/* 767↓ — 폼 칸 한 줄에 하나 · 덩어리 한 줄에 하나 · 안쪽 1.25rem(장비 폰 값) */
@media (max-width: 767px) {
  .wmq .wmq-sec { padding-top: 2rem; }
  .wmq .rgx-grid2 { grid-template-columns: minmax(0, 1fr); }
  .wmq .rgx-agree, .wmq .wmq-biz { padding: 1.25rem; }
  .wmq .rgx-agree__d > div { grid-template-columns: 84px minmax(0, 1fr); }
  .wmq .rgx-agree__d dt { padding: .65rem .5rem; font-size: .875rem; }
  .wmq .rgx-agree__d dd { padding: .65rem .6rem; font-size: .9375rem; }
  .wmq .rgx-form__go .rgx-btn { width: 100%; }
  .wmq .wmq-blk { margin-top: 3rem; }
  .wmq .wmq-steps, .wmq .wmq-chks, .wmq .wmq-fork { grid-template-columns: minmax(0, 1fr); }
  .wmq .wmq-step, .wmq .wmq-chk { padding: 1.25rem; }
  .wmq .wmq-facts > div { grid-template-columns: 7rem minmax(0, 1fr); }
  .wmq .wmq-facts dt { padding: .65rem .5rem; font-size: .875rem; }
  .wmq .wmq-facts dd { padding: .65rem .6rem; }
  .wmq .wm-faq__a, .wmq .wmq-biz__more > .wm-faq__a { padding-right: 0; }
  .wmq .wmq-kv { grid-template-columns: minmax(0, 1fr); }
  .wmq .wmq-biz__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 479↓ — 전용 지면 한 줄에 하나 · h1 8vw(wmm.css:623) */
@media (max-width: 479px) {
  .wmq .wmq-hd > h1 { font-size: 8vw; }
  .wmq .wmq-cards { grid-template-columns: minmax(0, 1fr); }
  .wmq .wmq-card { min-height: 4rem; }
}

/* ═══ 15. 움직임 줄이기 — 칩·단추·카드 transition 끔(wmm.css 의 .wm * 규칙과 같은 뜻 · 이 파일이 뒤라 한 번 더) ═══ */
@media (prefers-reduced-motion: reduce) {
  .wmq .wmq-cat, .wmq .wmq-cat::after, .wmq .wmq-card, .wmq .wmq-card__go, .wmq .rgx-btn { transition: none; }
  .wmq .rgx-btn:hover, .wmq .wmq-card:hover .wmq-card__go { transform: none; }
}