/* 지사모집 — 메인 페이지의 띠·판·칸 모양을 빌려 쓴다. 색은 사이트 변수와 이미 쓰는 값만.
   짙은 자주(#8f2f64)는 쓰지 않는다 — 핵심 이유 판·맺음 상자에 썼더니 잘 안 보이고 무거워 연분홍으로 (2026-10-19) */

/* 제목 아래 소개가 제목과 한 덩어리로 읽히게 제목 아래 여백을 줄인다 */
.page-hero { padding-bottom: 30px; }

/* ── 소개: 큰 소개 글 → 설명 → 상담 신청 단추 ── */
.rc-intro { padding: 4px 0 84px; }
.rc-lead { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--dark); line-height: 1.42; letter-spacing: -.04em; margin-bottom: 18px; word-break: keep-all; }
.rc-sub { font-size: 1.08rem; color: var(--gray); line-height: 1.85; margin-bottom: 30px; max-width: 62ch; word-break: keep-all; }
/* 메인 첫 화면 '전화 상담' 단추와 같은 모양 — 올리면 같은 만큼 살짝 뜬다 */
.rc-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--pink); color: #fff; padding: 16px 32px; border-radius: var(--r-pill); font-size: 1rem; font-weight: 800; text-decoration: none; box-shadow: 0 8px 22px rgba(176,53,121,.32); transition: background .2s, box-shadow .2s, transform .2s; }
.rc-btn:hover { background: var(--pink-dark); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(176,53,121,.4); }
.rc-btn:focus-visible { outline: 3px solid var(--pink-light); outline-offset: 3px; }

/* 띠: 흰 띠와 옅은 띠를 번갈아 (메인 '왜 드림맘' 띠와 같은 바탕·선) */
.rc-band { padding: 92px 0; background: var(--paper); }
.rc-band.is-wash { background: var(--wash); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.rc-title { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--title); letter-spacing: -.04em; line-height: 1.35; margin-bottom: 36px; text-wrap: balance; word-break: keep-all; }

/* 둥근 네모 아이콘 (메인 '왜 드림맘'과 같은 모양, 조금 크게) */
.rc-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--pink-pale); color: var(--pink); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }

/* ── 핵심 이유: 가로로 긴 흰 카드 두 장. 왼쪽 글, 오른쪽 짙은 자주 판(화면 / 교육 순서) ── */
.rc-reasons { display: grid; gap: 24px; }
.reason-card { background: var(--paper); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 20px 20px 20px 52px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); gap: 28px 48px; align-items: center; }
.reason-text { padding: 28px 0; }
/* 예시 이미지의 큰 번호를 옮긴 것 */
.reason-mark { display: block; font-family: var(--font-display); font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--pink); font-variant-numeric: tabular-nums; margin-bottom: 22px; }
.reason-card h3 { font-size: 1.55rem; font-weight: 800; color: var(--dark); letter-spacing: -.035em; line-height: 1.35; margin-bottom: 8px; }
.reason-card .reason-sub { font-size: 1.06rem; font-weight: 700; color: var(--pink-dark); margin-bottom: 22px; }
.reason-card p { font-size: 1.02rem; color: var(--gray); line-height: 1.85; }
.reason-text > p:last-child { margin-bottom: 0; }
.reason-chips { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 6px; }
.reason-chips li { font-size: .9rem; font-weight: 700; color: var(--pink-dark); background: var(--pink-pale); border-radius: var(--r-pill); padding: 8px 12px; line-height: 1.3; letter-spacing: -.02em; }

/* 오른쪽 판: 연분홍 바탕에 01 관리시스템 화면, 02 교육 순서 */
.reason-visual, .edu-flow { background: var(--pink-pale); border-radius: 14px; }
.reason-visual { margin: 0; padding: 34px 26px 18px; }
/* 그림 둘레의 투명 여백(그림자 자리)만큼 바깥으로 넓혀 화면 끝이 판 안쪽 여백에 맞게 */
.reason-visual img { display: block; width: calc(100% + 20px); max-width: none; height: auto; margin: -10px -10px -6px; }
.reason-visual figcaption { font-size: .8rem; color: var(--ink-3); text-align: center; margin-top: 6px; }

/* 교육 순서: 분홍 테두리 점 + 가는 선 (개설 절차의 번호 칸과 구별되게 번호 없이) */
.edu-flow { list-style: none; margin: 0; padding: 56px 22px 52px; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); position: relative; }
.edu-flow::before { content: ''; position: absolute; top: 63px; left: calc(22px + (100% - 44px) / var(--n, 5) / 2); right: calc(22px + (100% - 44px) / var(--n, 5) / 2); height: 2px; background: var(--pink-light); }
.edu-flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; font-size: 1.02rem; font-weight: 700; color: var(--dark); line-height: 1.45; word-break: keep-all; padding: 0 4px; }
.edu-flow li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--pink); box-sizing: border-box; box-shadow: 0 0 0 5px var(--pink-pale); }

/* ── 개설 준비: 흰 판 하나를 세 칸으로 (메인 '왜 드림맘'과 같은 판) ── */
.rc-support { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.support-cell { padding: 40px 36px 42px; border-left: 1px solid var(--border); }
.support-cell:first-child { border-left: none; }
.support-cell .rc-icon { margin-bottom: 22px; }
.support-cell h3 { font-size: 1.2rem; font-weight: 800; color: var(--dark); letter-spacing: -.03em; margin-bottom: 10px; }
.support-cell p { font-size: 1rem; color: var(--gray); line-height: 1.8; word-break: keep-all; }
.rc-note { font-size: .88rem; color: var(--ink-3); line-height: 1.7; margin-top: 16px; }

/* ── 이런 분들 + 모집 안내: 한 띠에 나란히 ── */
.rc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 36px 64px; align-items: start; }
.rc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rc-list li { position: relative; background: var(--paper); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px 20px 62px; font-size: 1.03rem; font-weight: 600; color: var(--dark); line-height: 1.55; word-break: keep-all; text-wrap: pretty; }
/* 분홍 원 안에 흰 체크 (선 두 개로 그린다) */
.rc-list li::before { content: ''; position: absolute; left: 22px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--pink); }
.rc-list li::after { content: ''; position: absolute; left: 30px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* 이용요금·바우처 표와 같은 둥근 테두리 상자 */
.rc-table-wrap { background: var(--paper); border: 1px solid var(--border-pink); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(176,53,121,.06); }
.rc-table { width: 100%; border-collapse: collapse; }
.rc-table th, .rc-table td { padding: 20px 24px; border-bottom: 1px solid var(--border-pink); text-align: left; vertical-align: top; font-size: 1.02rem; line-height: 1.6; }
.rc-table tr:last-child th, .rc-table tr:last-child td { border-bottom: none; }
.rc-table th { width: 124px; background: #fdf3f7; color: var(--pink-dark); font-weight: 800; white-space: nowrap; }
.rc-table td { color: var(--dark); }

/* ── 개설 절차: 단계마다 아이콘 원을 선으로 잇고, 아래에 번호·이름. PC 는 가로, 좁은 화면은 세로 ── */
.rc-steps { list-style: none; margin: 0 0 56px; padding: 44px 24px 40px; background: var(--wash); border: 1px solid var(--border); border-radius: 18px;
  display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); position: relative; }
/* 첫 원 가운데부터 마지막 원 가운데까지 (위 여백 44 + 원 반지름 32 - 선 굵기 절반) */
.rc-steps::before { content: ''; position: absolute; top: 75px; left: calc(24px + (100% - 48px) / var(--n, 6) / 2); right: calc(24px + (100% - 48px) / var(--n, 6) / 2); height: 2px; background: var(--border-pink); }
.rc-steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
/* 바깥 고리(box-shadow)를 판 바탕색으로 둘러 선이 원에 닿기 전에 끊겨 보이게 */
.rs-icon { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; background: var(--pink-pale); color: var(--pink); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px var(--wash); margin-bottom: 18px; }
.rs-mark { color: var(--pink); font-size: .84rem; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; line-height: 1.3; margin-bottom: 4px; }
.rs-label { font-size: 1.08rem; font-weight: 800; color: var(--dark); letter-spacing: -.03em; line-height: 1.4; word-break: keep-all; }

/* ── 맺음: 연분홍 상자. 왼쪽 글, 오른쪽 상담 신청 단추 (맨 위 단추와 같은 모양) ── */
.rc-cta { background: var(--pink-pale); border-radius: 18px; padding: 56px 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title btn" "desc btn"; column-gap: 48px; align-items: center; }
.rc-cta h2 { grid-area: title; font-family: var(--font-display); font-size: 1.85rem; font-weight: 800; color: var(--title); letter-spacing: -.04em; line-height: 1.45; margin-bottom: 12px; word-break: keep-all; }
.rc-cta p { grid-area: desc; color: var(--gray); font-size: 1.05rem; line-height: 1.7; align-self: start; }
.rc-cta .rc-btn { grid-area: btn; }

@media (max-width: 900px) {
  .reason-card { grid-template-columns: 1fr; padding: 20px; }
  .reason-text { padding: 16px 12px 0; }
  .reason-visual { padding: 26px 16px 14px; }
  /* 교육 순서: 세로로 */
  .edu-flow { grid-template-columns: 1fr; gap: 18px; padding: 26px 24px; }
  .edu-flow::before { top: 36px; bottom: 36px; left: 31px; right: auto; width: 2px; height: auto; }
  .edu-flow li { flex-direction: row; text-align: left; gap: 16px; padding: 0; }
  .edu-flow li::before { flex-shrink: 0; }
  /* 개설 준비: 한 줄에 한 칸, 아이콘은 왼쪽 */
  .rc-support { grid-template-columns: 1fr; }
  .support-cell { border-left: none; border-top: 1px solid var(--border); display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 24px 22px; }
  .support-cell:first-child { border-top: none; }
  .support-cell .rc-icon { grid-row: span 2; margin: 0; }
  .support-cell h3 { margin: 4px 0 4px; }
  .rc-pair { grid-template-columns: 1fr; gap: 56px; }
  /* 개설 절차: 세로로 — 아이콘 원 왼쪽, 번호·이름 오른쪽 (왼쪽 여백 26 + 원 반지름 26 - 선 굵기 절반) */
  .rc-steps { grid-template-columns: 1fr; gap: 20px; padding: 28px 26px; }
  .rc-steps::before { top: 52px; bottom: 52px; left: 51px; right: auto; width: 2px; height: auto; }
  .rc-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "icon mark" "icon label"; column-gap: 18px; text-align: left; padding: 0; }
  .rs-icon { grid-area: icon; width: 52px; height: 52px; font-size: 1.2rem; margin: 0; box-shadow: 0 0 0 4px var(--wash); }
  .rs-mark { grid-area: mark; align-self: end; margin-bottom: 1px; }
  .rs-label { grid-area: label; align-self: start; }
  /* 맺음: 글 아래 단추 */
  .rc-cta { grid-template-columns: 1fr; grid-template-areas: "title" "desc" "btn"; padding: 44px 40px; }
  .rc-cta p { margin-bottom: 26px; }
  .rc-cta .rc-btn { justify-self: start; }
}

@media (max-width: 768px) {
  .page-hero { padding-bottom: 18px; }
  .rc-intro { padding-bottom: 52px; }
  .rc-lead { font-size: 1.55rem; line-height: 1.42; margin-bottom: 12px; }
  .rc-sub { font-size: .96rem; margin-bottom: 22px; }
  .rc-btn { width: 100%; justify-content: center; box-sizing: border-box; padding: 16px 20px; }
  .rc-band { padding: 56px 0; }
  .rc-title { font-size: 1.42rem; margin-bottom: 22px; }
  .reason-card { padding: 14px; border-radius: 16px; gap: 20px; }
  .reason-text { padding: 14px 10px 0; }
  .reason-mark { font-size: 2.4rem; margin-bottom: 16px; }
  .reason-card h3 { font-size: 1.26rem; }
  .reason-card .reason-sub { font-size: .96rem; margin-bottom: 16px; }
  .reason-card p { font-size: .96rem; }
  .reason-chips li { font-size: .86rem; padding: 7px 13px; }
  .reason-visual { padding: 22px 10px 12px; border-radius: 12px; }
  .edu-flow { border-radius: 12px; padding: 24px 20px; }
  .edu-flow::before { left: 27px; }
  .edu-flow li { font-size: .97rem; }
  .support-cell h3 { font-size: 1.1rem; }
  .support-cell p { font-size: .94rem; }
  .rc-list li { font-size: .96rem; padding: 17px 16px 17px 54px; }
  .rc-list li::before { left: 18px; width: 22px; height: 22px; margin-top: -11px; }
  .rc-list li::after { left: 25.5px; width: 4px; height: 9px; margin-top: -6px; }
  .rc-table th, .rc-table td { padding: 15px 14px; font-size: .92rem; }
  .rc-table th { width: 84px; }
  /* 개설 절차: 원을 조금 줄인다 (왼쪽 여백 20 + 원 반지름 23 - 선 굵기 절반) */
  .rc-steps { gap: 18px; padding: 24px 20px; margin-bottom: 40px; border-radius: 16px; }
  .rc-steps::before { top: 46px; bottom: 46px; left: 42px; }
  .rc-steps li { grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; }
  .rs-icon { width: 46px; height: 46px; font-size: 1.08rem; }
  .rs-mark { font-size: .8rem; }
  .rs-label { font-size: 1.02rem; }
  /* 맺음 제목이 두 줄짜리라 좁은 화면에선 글자를 줄인다 */
  .rc-cta { padding: 32px 22px; border-radius: 16px; }
  .rc-cta h2 { font-size: 1.28rem; line-height: 1.5; margin-bottom: 10px; }
  .rc-cta p { font-size: .93rem; margin-bottom: 22px; }
  .rc-cta .rc-btn { justify-self: stretch; }
}