/* ══════════════════════════════════════════════════════════════════
   THE STEPPER 메인 — 첫 화면 아래 구역 (2026-11-10)
   값은 css/stepper-tokens.css 변수만 쓴다(색·글자 크기·모서리·그림자). 규칙: docs/renewal/design-rules.md
   모든 규칙은 .mn(첫 화면 아래 구역을 감싼 div) 안에서만 걸린다. 첫 화면(.tg-hero)·공통 헤더·바닥글에는 영향 없음.
   index.html 은 css/stepper-a.css(공통 헤더·바닥글용)도 함께 불러온다. 그 파일의 전역 규칙
   (body 글꼴·크기, a·a:hover 색, p 여백, h1~h3 굵기, :focus-visible 색)이 이 구역을 덮지 않게 아래 「기본」에서 .mn 범위로 다시 정한다.
   휴대폰 배치: 899px 이하 하나로 통일. 새 애니메이션 없음.
   ══════════════════════════════════════════════════════════════════ */

/* ── 기본 ── */
.mn {
  background: var(--c-bg);
  color: var(--c-navy);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.mn :where(p, figure, blockquote, ol, ul) { margin: 0; }          /* stepper-a.css:60 p 여백 덮기(낮은 우선순위라 아래 클래스 규칙이 이김) */
.mn :where(ol, ul) { list-style: none; padding: 0; }
.mn :where(h2, h3) { margin: 0; }
.mn a { color: var(--c-blue); }                                     /* stepper-a.css:57–58 a·a:hover 색 덮기 */
.mn a:hover { color: var(--c-blue-hover); }
.mn :focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }  /* stepper-a.css:59 초점 색 덮기 */
.mn-wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.mn-sec { padding: var(--sec-py) 0; }

/* ── 구역 머리: 라벨(Barlow 번호 + 한글, 14px 빨강) → 제목(Noto Serif KR 900 남색) ── */
.mn-head { margin-bottom: 48px; }
.mn-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mn-label {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px;
  font-size: var(--fs-small); font-weight: 700; line-height: 1.4; color: var(--c-red);
}
.mn-label__no { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: var(--fs-small); letter-spacing: .04em; }
.mn-title {
  font-family: var(--f-serif); font-weight: 900; font-size: var(--fs-section);
  line-height: 1.25; letter-spacing: -.02em; color: var(--c-navy);
}
.mn-lead { margin-top: 24px; font-size: var(--fs-lead); line-height: 1.7; color: var(--c-sub); }
.mn-desc { margin-top: 16px; font-size: var(--fs-body); color: var(--c-sub); }
/* 문장 안 영문 브랜드명 — Barlow Condensed 900 기울임, 자간은 첫 화면 브랜드 글자(.tg-brand-name .02em)와 같게.
   글자 크기는 둘레 글자를 그대로 이어받고 기준선(baseline)에 맞춘다 */
.mn-brand { font-family: var(--f-display); font-style: italic; font-weight: 900; letter-spacing: .02em; color: var(--c-blue); vertical-align: baseline; }
.mn-more {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-body); font-weight: 700; text-decoration: none;
}
.mn-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── 버튼: 알약형 두 종류만 ── */
.mn-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.mn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--r-pill);
  font-family: var(--f-sans); font-size: var(--fs-body); font-weight: 700; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
}
.mn .mn-btn--fill { background: var(--c-blue); color: var(--c-surface); }
.mn .mn-btn--fill:hover { background: var(--c-blue-hover); color: var(--c-surface); }
.mn .mn-btn--line { background: var(--c-surface); color: var(--c-blue); box-shadow: var(--btn-line); }
.mn .mn-btn--line:hover { color: var(--c-blue-hover); box-shadow: inset 0 0 0 1.5px var(--c-blue-hover); }

/* ── 카드 공통 ── */
.mn-card { background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--sh-card); }

/* ── 팔각 배지(첫 화면 배지와 같은 꼴, index.html .tg-badge 의 polygon 과 같은 비율) ── */
.ix-stage__oct {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-blue); color: var(--c-yellow);
  clip-path: polygon(29.29% 0, 70.71% 0, 100% 29.29%, 100% 70.71%, 70.71% 100%, 29.29% 100%, 0 70.71%, 0 29.29%);
  font-family: var(--f-display); font-style: italic; font-weight: 800; line-height: 1;
}

/* ── 누적 방문자 줄 ── */
.mn-visitors { padding-top: 32px; }
.mn-visitors__line {
  display: flex; align-items: baseline; gap: 12px; max-width: 360px;
  padding-top: 16px; border-top: 1px solid var(--c-line);
}
.mn-visitors__label { font-size: var(--fs-small); font-weight: 700; color: var(--c-sub); }
.mn-visitors__num { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: var(--fs-section-m); line-height: 1; color: var(--c-blue); }
.mn-visitors__unit { margin-left: 4px; font-family: var(--f-sans); font-style: normal; font-weight: 700; font-size: var(--fs-small); color: var(--c-sub); }

/* ── 01 영상 ── */
.mn-videos { display: flex; gap: 24px; align-items: flex-start; }
.mn-videos__main { flex: 2; min-width: 0; }
.mn-videos__side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.mn-video__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-sm); background: var(--c-navy); box-shadow: var(--sh-card);
}
.mn-video__btn {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0;
  border: 0; background: var(--c-navy); cursor: pointer; display: block; font: inherit;
}
.mn-video__btn img { width: 100%; height: 100%; object-fit: cover; }
.mn-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); }
.mn-videos__side .mn-play { width: 56px; height: 56px; }
.mn-play__oct { fill: var(--c-blue); }
.mn-play__tri { fill: var(--c-yellow); }
.mn-video__btn:hover .mn-play__oct, .mn-video__btn:focus-visible .mn-play__oct { fill: var(--c-blue-hover); }
.mn-video__btn:focus-visible { outline-offset: -4px; outline-color: var(--c-yellow); }
.mn-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mn-video figcaption { margin-top: 12px; font-size: var(--fs-small); font-weight: 700; line-height: 1.5; color: var(--c-navy); }

/* ── 02 왜 기록하는가 + 숫자 줄 ── */
.mn-why { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.mn-why__more { margin-top: 16px; }
.mn-points { display: flex; flex-direction: column; gap: 16px; }
.mn-points li {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start;
  padding: 24px; background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--sh-card);
}
.mn-points__num { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: var(--fs-card); line-height: 1.2; color: var(--c-blue); }
.mn-points__title { font-size: var(--fs-lead); font-weight: 700; line-height: 1.4; color: var(--c-navy); margin-bottom: 4px; }
.mn-points p { font-size: var(--fs-body); color: var(--c-sub); }
.mn-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px;
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
}
.mn-stats li { display: flex; flex-direction: column; gap: 8px; padding: 32px 24px; border-left: 1px solid var(--c-line); }
.mn-stats li:first-child { border-left: 0; padding-left: 0; }
.mn-stats__value { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: var(--fs-hero); line-height: 1; color: var(--c-blue); }
.mn-stats__unit { margin-left: 4px; font-family: var(--f-sans); font-style: normal; font-weight: 700; font-size: var(--fs-lead); color: var(--c-blue); }
.mn-stats__label { font-size: var(--fs-small); font-weight: 700; color: var(--c-sub); }

/* ── 03 교육 원칙 — 파랑 띠 ── */
.mn-quote { background: var(--c-blue); padding: var(--sec-py) 0; }
.mn-label--on-blue { color: var(--c-yellow); }            /* 빨강은 파랑 바탕에서 읽기 어려워 노랑(파랑 위 강조 허용 색) */
.mn-quote__body { position: relative; max-width: 980px; padding-top: 24px; }
.mn-quote__mark {
  display: block; height: 0.5em; margin-bottom: 16px;
  font-family: var(--f-serif); font-weight: 900; font-size: var(--fs-hero); line-height: 1; color: var(--c-yellow);
}
.mn-quote__text { font-family: var(--f-serif); font-weight: 700; font-size: var(--fs-hero-m); line-height: 1.55; letter-spacing: -.01em; color: var(--c-surface); }
.mn-quote__cite { display: block; margin-top: 32px; font-style: normal; font-size: var(--fs-body); font-weight: 700; color: var(--c-yellow); }

/* ── 04 커리큘럼 · 05 AI 코치 — 글 + 태구 두 칸 ── */
.mn-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 64px; align-items: start; }
.mn-split__main { min-width: 0; }
#ai .mn-split { align-items: center; }

/* 커리큘럼 목록 — 흰 카드형 줄(--r-sm), 한 번에 하나만 펼침(동작은 js/stepper-index.js) */
.mn-stages { margin-top: 32px; display: flex; flex-direction: column; gap: 8px; }
.mn .ix-stage { background: var(--c-surface); border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--c-line); }
.mn .ix-stage:has(.ix-stage__btn[aria-expanded="true"]) { box-shadow: var(--sh-card); }
.mn .ix-stage h3 { margin: 0; font-weight: inherit; }
.mn .ix-stage__btn {
  width: 100%; min-height: 72px; padding: 12px 20px 12px 16px; margin: 0; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; text-align: left; color: var(--c-navy); font: inherit;
  display: grid; grid-template-columns: 42px 1fr auto 24px; align-items: center; gap: 16px;
}
.mn .ix-stage__oct { width: 42px; height: 42px; font-size: var(--fs-lead); }
.mn .ix-stage__name { font-size: var(--fs-lead); font-weight: 700; line-height: 1.4; }
.mn .ix-stage__btn:hover .ix-stage__name { color: var(--c-blue); }
.mn .ix-stage__range { font-size: var(--fs-small); color: var(--c-sub); white-space: nowrap; }
.mn .ix-stage__sign { font-size: var(--fs-card); font-weight: 700; line-height: 1; text-align: center; color: var(--c-blue); }
.mn .ix-stage__panel { padding: 0 20px 20px 74px; }
.mn .ix-stage__panel li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--c-line); }
.mn .ix-chap__no { font-size: var(--fs-small); font-weight: 700; color: var(--c-sub); padding-top: 2px; }
.mn .ix-chap__title { font-size: var(--fs-body); line-height: 1.6; color: var(--c-navy); }
.mn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* AI 코치 「학습 중」 안내 — 흰 카드 + 파랑 라벨 */
.mn-note {
  display: flex; gap: 16px; margin-top: 32px; padding: 24px;
  background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--sh-card);
}
.mn-note__label { flex: none; font-size: var(--fs-small); font-weight: 700; line-height: 1.7; color: var(--c-blue); }
.mn-note p { font-size: var(--fs-body); color: var(--c-sub); }

/* 태구 임시 그림 — 부품 SVG(모두 같은 viewBox -20 50 840 918)를 같은 크기로 겹침. 움직임 없음 */
.mn-taegu { position: relative; width: 100%; max-width: 400px; aspect-ratio: 840 / 918; margin: 0 auto; }
.mn-taegu img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mn-taegu--curr { position: sticky; top: 120px; max-width: 360px; }
.mn-taegu--join { max-width: 320px; }

/* ── 06 회원 도장 ── */
.mn-dojang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.mn-regions { padding: 24px 32px; }
.mn-regions > p { color: var(--c-sub); }
.mn .ix-regions { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 32px; }
.mn .ix-regions li { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.mn .ix-regions li:nth-last-child(-n+2) { border-bottom: 0; }
.mn .ix-regions__count { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: var(--fs-lead); color: var(--c-blue); }
.mn-map[hidden] { display: none; }

/* ── 07 세미나 — 사진 왼쪽 배치 유지 ── */
.mn-seminar { position: relative; overflow: hidden; }
.mn-seminar__photo {
  position: absolute; top: 0; bottom: 0; left: 0; width: 60%; margin: 0; overflow: hidden;
  /* 사진 오른쪽을 바탕으로 녹이는 마스크 — 마스크는 투명도만 쓰므로 색 자리에 변수(불투명 색)를 넣었다 */
  -webkit-mask-image: linear-gradient(to right, var(--c-navy) 40%, transparent 100%);
          mask-image: linear-gradient(to right, var(--c-navy) 40%, transparent 100%);
}
.mn-seminar__photo img { width: 100%; height: 100%; object-fit: cover; }
.mn-seminar .mn-wrap { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.mn-seminar__text { width: 100%; max-width: 560px; padding: 32px; background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--sh-card); }
.mn-schedule { margin-top: 24px; }
.mn .ix-schedule li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.mn .ix-schedule li:first-child { border-top: 1px solid var(--c-line); }
.mn .ix-schedule__date { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-blue); }
.mn .ix-schedule__title { font-weight: 700; color: var(--c-navy); }
.mn .ix-schedule__detail { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--c-sub); }
.mn .ix-schedule__empty { padding: 16px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); color: var(--c-sub); }
.mn .ix-schedule__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 12px; }
.mn .ix-schedule__label { font-size: var(--fs-small); font-weight: 700; color: var(--c-red); }
.mn .ix-schedule__note { font-size: var(--fs-small); color: var(--c-sub); }
/* 예정 세미나가 없을 때 안내 카드 + 지난 세미나(2026-11-10) */
.mn .ix-schedule__notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-radius: var(--r-sm); background: var(--c-bg); }
.mn .ix-schedule__notice-text { font-size: var(--fs-body); font-weight: 700; color: var(--c-navy); }
.mn .ix-schedule__notice + .ix-schedule__head { margin-top: 32px; }
.mn .ix-schedule--past li { grid-template-columns: 168px 1fr; }  /* 날짜 + 「종료」 가 한 줄에 들어가게 */
.mn .ix-schedule--past .ix-schedule__date { color: var(--c-sub); }
.mn .ix-schedule__ended {
  display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: var(--r-pill); vertical-align: 2px;
  background: var(--c-bg); font-family: var(--f-sans); font-style: normal; font-weight: 700; font-size: var(--fs-caption); line-height: 1.7; color: var(--c-sub);
}

/* ── 08 후기 ── */
.mn-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mn-review { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px; background: var(--c-surface); border-radius: var(--r-card); box-shadow: var(--sh-card); }
.mn-review blockquote { font-family: var(--f-serif); font-weight: 700; font-size: var(--fs-lead); line-height: 1.7; color: var(--c-navy); }
.mn-review figcaption { font-size: var(--fs-small); color: var(--c-sub); }

/* ── 09 마무리 안내 ── */
.mn-join { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 64px; align-items: center; padding: 56px 64px; }

/* ══ 휴대폰 배치(899px 이하) — 기준 출처: css/stepper-tokens.css 주석·js/stepper-layout.js MOBILE_MAX ══ */
@media (max-width: 899px) {
  .mn-wrap { padding: 0 var(--gutter-m); }
  .mn-sec, .mn-quote { padding: var(--sec-py-m) 0; }
  .mn-head { margin-bottom: 32px; }
  .mn-title { font-size: var(--fs-section-m); }
  .mn-lead { font-size: var(--fs-body); margin-top: 16px; }
  .mn-btn { height: var(--btn-h-m); }
  .mn-btns { gap: 8px; margin-top: 24px; }
  .mn-btns .mn-btn { flex: 1 1 100%; }
  .mn-card, .mn-points li, .mn-note, .mn-seminar__text, .mn-review { border-radius: var(--r-card-m); box-shadow: var(--sh-card-m); }
  .mn-video__frame { box-shadow: var(--sh-card-m); }
  .mn .ix-stage:has(.ix-stage__btn[aria-expanded="true"]) { box-shadow: var(--sh-card-m); }

  .mn-visitors { padding-top: 24px; }
  .mn-visitors__line { max-width: none; }

  .mn-videos { flex-direction: column; }
  .mn-videos__main, .mn-videos__side { width: 100%; flex: none; }
  .mn-play, .mn-videos__side .mn-play { width: 56px; height: 56px; }

  .mn-why { grid-template-columns: 1fr; gap: 32px; }
  .mn-points li { grid-template-columns: 40px 1fr; padding: 20px; }
  .mn-points__num { font-size: var(--fs-card-m); }
  .mn-points__title { font-size: var(--fs-body); }
  .mn-stats { grid-template-columns: repeat(2, 1fr); margin-top: 48px; }
  .mn-stats li { padding: 24px 16px; border-left: 0; border-top: 1px solid var(--c-line); }
  .mn-stats li:nth-child(-n+2) { border-top: 0; }
  .mn-stats li:nth-child(odd) { padding-left: 0; }
  .mn-stats li:nth-child(even) { border-left: 1px solid var(--c-line); }
  .mn-stats__value { font-size: var(--fs-hero-m); }
  .mn-stats__unit { font-size: var(--fs-small); }

  .mn-quote__mark { font-size: var(--fs-hero-m); }
  .mn-quote__text { font-size: var(--fs-card-m); }
  .mn-quote__cite { margin-top: 24px; font-size: var(--fs-small); }

  /* 커리큘럼·AI 코치: 구역 머리(라벨+제목) 오른쪽에 태구 112px, 나머지 내용은 그 아래 전체 폭 */
  .mn-split { grid-template-columns: minmax(0, 1fr) 112px; column-gap: 16px; row-gap: 0; align-items: center; }
  .mn-split__main { display: contents; }
  .mn-split__main > * { grid-column: 1 / -1; }
  .mn-split__main > .mn-split__head { grid-column: 1; grid-row: 1; }
  .mn-split .mn-taegu { grid-column: 2; grid-row: 1; width: 112px; max-width: none; margin: 0; position: relative; top: auto; }  /* sticky 해제 — 겹친 그림의 기준점이라 relative 유지 */
  .mn .ix-stage__btn { grid-template-columns: 42px 1fr 24px; grid-template-areas: "no name sign" "no range sign"; gap: 0 12px; padding: 12px 16px 12px 12px; }
  .mn .ix-stage__no { grid-area: no; }
  .mn .ix-stage__name { grid-area: name; font-size: var(--fs-body); }
  .mn .ix-stage__range { grid-area: range; }
  .mn .ix-stage__sign { grid-area: sign; }
  .mn .ix-stage__panel { padding: 0 16px 16px 16px; }
  .mn .ix-stage__panel li { grid-template-columns: 1fr; gap: 0; }
  .mn-note { flex-direction: column; gap: 4px; padding: 20px; margin-top: 24px; }

  .mn-dojang { grid-template-columns: 1fr; gap: 32px; }
  .mn-regions { padding: 16px 20px; }
  .mn .ix-regions { grid-template-columns: 1fr; }
  .mn .ix-regions li:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-line); }
  .mn .ix-regions li:last-child { border-bottom: 0; }

  .mn-seminar { padding-top: 0; }
  .mn-seminar__photo { position: relative; width: 100%; height: 260px;
    -webkit-mask-image: linear-gradient(to bottom, var(--c-navy) 50%, transparent 100%);
            mask-image: linear-gradient(to bottom, var(--c-navy) 50%, transparent 100%); }
  .mn-seminar .mn-wrap { display: block; margin-top: -48px; }
  .mn-seminar__text { max-width: none; padding: 24px 20px; }
  .mn .ix-schedule li { grid-template-columns: 1fr; gap: 2px; }
  .mn .ix-schedule__notice { padding: 20px; }
  .mn .ix-schedule__notice .mn-btn { flex: 1 1 100%; }

  .mn-reviews { grid-template-columns: 1fr; gap: 16px; }
  .mn-review { padding: 24px; gap: 16px; }
  .mn-review blockquote { font-size: var(--fs-body); }

  .mn-join { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px; text-align: left; }
  .mn-join .mn-taegu { max-width: 160px; }
}