/* ═══════════════════════════════════════════════════════════
   31. 옆커폰식 전면 리디자인 (mc-*)  ―  전부 블루·토큰 기반
   이미지 자리는 .img-slot 빈 상자("이미지 교체")로 표시합니다.
   ═══════════════════════════════════════════════════════════ */

/* 공통 */
.mc-eyebrow {
  display: inline-block; color: var(--brand-ink); font-weight: 700;
  letter-spacing: .04em; font-size: clamp(13px, 1.5vw, 15px);
  background: var(--brand-50); padding: 6px 14px; border-radius: 999px;
  margin-bottom: var(--space-4);
}
.mc-h2 { color: var(--ink-900); font-size: clamp(24px, 3.4vw, 40px); line-height: 1.25; letter-spacing: -.02em; text-align: center; }
.mc-h2 em { font-style: normal; color: var(--brand-ink); }
.mc-lead { color: var(--ink-500); font-size: clamp(15px, 1.6vw, 18px); text-align: center; margin-top: var(--space-3); line-height: 1.6; }

/* 이미지 교체 슬롯 */
.img-slot {
  display: flex; align-items: center; justify-content: center; width: 100%;
  background: var(--brand-50); border: 2px dashed var(--brand-400);
  border-radius: var(--radius-xl, 20px); color: var(--brand-ink); text-align: center;
}
.img-slot span { font-weight: 700; font-size: clamp(14px, 1.6vw, 18px); }
.img-slot small { display: block; margin-top: 4px; font-weight: 600; font-size: .72em; color: var(--ink-500); }

/* HERO */
.mc-hero { background: linear-gradient(160deg, var(--brand-50), #fff 70%); padding-block: clamp(48px, 7vw, 96px); }
.mc-hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.mc-hero__title { color: var(--ink-900); font-size: clamp(30px, 5vw, 56px); line-height: 1.18; letter-spacing: -.03em; margin-bottom: var(--space-5); }
.mc-hero__title em { font-style: normal; color: var(--brand-ink); }
.mc-hero__sub { color: var(--ink-500); font-size: clamp(16px, 1.9vw, 20px); line-height: 1.6; margin-bottom: var(--space-8); }
.mc-hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.mc-hero__cta .btn { height: auto; padding: 16px 28px; font-size: clamp(15px, 1.7vw, 18px); border-radius: 999px; }
.mc-hero__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.mc-hero__chips li { color: var(--ink-700); font-size: clamp(13px, 1.4vw, 15px); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.mc-hero__chips li::before { content: "\2713"; color: var(--brand-500); font-weight: 700; margin-right: 6px; }
.mc-hero__visual .img-slot { aspect-ratio: 5/4; }

/* STATS (블루 밴드 + 카운트업) */
.mc-stats { background: linear-gradient(120deg, var(--brand-600), var(--brand-500)); padding-block: clamp(36px, 5vw, 64px); }
.mc-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); text-align: center; }
.mc-stat__n { color: #fff; font-size: clamp(26px, 4vw, 44px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mc-stat__n i { font-style: normal; font-size: .42em; font-weight: 700; margin-left: 3px; }
.mc-stat span { display: block; margin-top: var(--space-2); color: rgba(255,255,255,.85); font-size: clamp(13px, 1.5vw, 16px); }

/* STEPS */
.mc-steps { padding-block: clamp(48px, 7vw, 96px); }
.mc-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); max-width: 1000px; margin: var(--space-12) auto 0; }
.mc-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl, 20px); padding: var(--space-8) var(--space-5); }
.mc-step__no { display: inline-block; color: var(--brand-500); font-weight: 800; font-size: clamp(13px, 1.5vw, 15px); letter-spacing: .08em; margin-bottom: var(--space-3); }
.mc-step__ico { width: 52px; height: 52px; border-radius: 14px; background: var(--brand-50); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.mc-step__ico .ico { width: 26px; height: 26px; color: var(--brand-500); }
.mc-step__name { color: var(--ink-900); font-weight: 700; font-size: clamp(16px, 1.8vw, 19px); margin-bottom: var(--space-2); }
.mc-step__desc { color: var(--ink-500); font-size: clamp(13px, 1.5vw, 15px); line-height: 1.6; }

/* COMPARE (두 카드) */
.mc-cmp { border-radius: var(--radius-xl, 20px); padding: var(--space-8); }
.mc-cmp--ours { background: var(--brand-500); color: #fff; box-shadow: 0 16px 40px rgba(var(--shadow-rgb), .25); }
.mc-cmp--them { background: var(--surface); border: 1px solid var(--line); color: var(--ink-700); }
.mc-cmp__head { font-weight: 800; font-size: clamp(17px, 2vw, 22px); margin-bottom: var(--space-5); }
.mc-cmp ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.mc-cmp li { display: flex; gap: 10px; align-items: flex-start; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.5; }
.mc-cmp li::before { font-weight: 800; flex: none; }
.mc-cmp--ours li::before { content: "\2713"; }
.mc-cmp--them li::before { content: "\2715"; color: var(--ink-300); }

/* REVIEWS (스토리 카드 + 이미지 슬롯) */
.mc-reviews { background: var(--surface-alt); padding-block: clamp(48px, 7vw, 96px); }
.mc-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); max-width: 1080px; margin: var(--space-12) auto 0; }
.mc-rv { background: var(--surface); border-radius: var(--radius-xl, 20px); overflow: hidden; border: 1px solid var(--line); }
.mc-rv .img-slot { aspect-ratio: 16/10; border-radius: 0; border: none; border-bottom: 2px dashed var(--brand-400); }
.mc-rv__body { padding: var(--space-6); }
.mc-rv__quote { color: var(--ink-900); font-weight: 600; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.55; margin-bottom: var(--space-4); }
.mc-rv__who { color: var(--ink-500); font-size: clamp(13px, 1.4vw, 14px); }

/* FAQ (details 아코디언) */
.mc-faq { padding-block: clamp(48px, 7vw, 96px); }
.mc-faq__list { max-width: 820px; margin: var(--space-10) auto 0; }
.mc-faq details { border-bottom: 1px solid var(--line); }
.mc-faq summary { cursor: pointer; list-style: none; padding: var(--space-5) var(--space-2); font-weight: 700; color: var(--ink-900); font-size: clamp(15px, 1.7vw, 18px); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.mc-faq summary::-webkit-details-marker { display: none; }
.mc-faq summary::after { content: "+"; color: var(--brand-500); font-weight: 700; font-size: 1.3em; flex: none; }
.mc-faq details[open] summary::after { content: "\2212"; }
.mc-faq__a { padding: 0 var(--space-2) var(--space-5); color: var(--ink-500); font-size: clamp(14px, 1.6vw, 16px); line-height: 1.7; }

/* CTA 밴드 */
.mc-cta { background: linear-gradient(120deg, var(--brand-600), var(--brand-500)); text-align: center; padding-block: clamp(48px, 7vw, 88px); }
.mc-cta__title { color: #fff; font-size: clamp(24px, 3.6vw, 40px); font-weight: 800; line-height: 1.3; letter-spacing: -.02em; margin-bottom: var(--space-3); }
.mc-cta__sub { color: rgba(255,255,255,.9); font-size: clamp(15px, 1.7vw, 18px); margin-bottom: var(--space-8); }
.mc-cta__btns { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.mc-cta .btn--primary { background: #fff; color: var(--brand-ink); }
.mc-cta .btn--primary:hover { background: #f1f0fe; }
.mc-cta .btn--ghost { border: 1px solid rgba(255,255,255,.6); color: #fff; background: transparent; }

/* ─────────── 반응형 (1024 / 768 / 480) ─────────── */
@media (max-width: 1024px) {
  .mc-steps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  /* 섹션 세로 여백 축소 */
  .mc-hero, .mc-steps, .mc-reviews, .mc-faq { padding-block: var(--space-16); }
  .mc-stats { padding-block: var(--space-12); }

  /* 히어로 : 세로 정렬 + 가운데 */
  .mc-hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .mc-hero__copy { text-align: center; }
  .mc-hero__title { font-size: clamp(27px, 8vw, 40px); }
  .mc-hero__cta { justify-content: center; }
  .mc-hero__chips { justify-content: center; }
  .mc-hero__visual { max-width: 440px; margin-inline: auto; width: 100%; }

  /* 스탯 2×2 */
  .mc-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-4); }


  /* 후기 : 옆커폰식 가로 스와이프(스크롤 스냅) */
  .mc-reviews__grid {
    display: flex; grid-template-columns: none;
    gap: var(--space-4);
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--space-4));
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
  .mc-reviews__grid::-webkit-scrollbar { display: none; }
  .mc-reviews__grid { scrollbar-width: none; }
  .mc-rv { flex: 0 0 80%; scroll-snap-align: center; }
}
@media (max-width: 480px) {
  /* CTA 버튼 풀폭 */
  .mc-hero__cta, .mc-cta__btns { flex-direction: column; }
  .mc-hero__cta .btn, .mc-cta__btns .btn { width: 100%; }
  /* 스텝 1열 */
  .mc-steps__grid { grid-template-columns: 1fr; }
  /* 피처카드 1열(30-sections 의 2열을 덮어씀 — 31 이 나중에 로드) */
  /* 히어로 이미지 여백 축소 */
  .mc-hero__visual .img-slot { aspect-ratio: 4/3; }
}

/* ─────────── 상단 이벤트 바 (옆커폰 .event_box 대응) ─────────── */
.mc-eventbar { background: var(--brand-700); color: #fff; }
.mc-eventbar a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 16px; color: #fff; text-decoration: none;
  font-size: clamp(12px, 1.4vw, 14px); font-weight: 600; line-height: 1.3;
}
.mc-eventbar .tag { background: rgba(255,255,255,.22); border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: .92em; flex: none; }
.mc-eventbar b { font-weight: 800; }
.mc-eventbar .arrow { font-weight: 800; }
@media (max-width: 480px) { .mc-eventbar .tag { display: none; } }

/* ─────────── 히어로 헤드라인 전환 모션 (옆커폰 tit1/tit2 방식) ─────────── */
.mc-rotate { display: grid; }
.mc-rotate__item {
  grid-column: 1; grid-row: 1;
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.mc-rotate__item.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mc-rotate__item { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   32. 스토리 구성 개편 — 아래 4개 섹션이 새로 추가됐습니다.
       ① .mc-cases  이런 상황이신가요 (방문자 공감)
       ② .mc-band   중간 CTA 밴드
       ③ .mc-trust  고객의 이야기 (옛 성장 막대그래프 자리)
       ④ .mc-warn   사칭 주의
   ═══════════════════════════════════════════════════════════ */

/* 헤더 오른쪽 안심 문구 (상담 버튼 아님 — 하단 고정 띠와 중복 방지) */
.header__hotline-lbl {
  color: var(--brand-ink); background: var(--brand-50);
  border-radius: 999px; padding: 4px 10px;
  font-size: clamp(11px, 1.2vw, 13px); font-weight: 700; flex: none;
}
.header__hotline a {
  color: var(--ink-900); font-weight: 800;
  font-size: clamp(15px, 1.7vw, 19px); font-variant-numeric: tabular-nums;
}

/* ② 중간 CTA 밴드 */
.mc-band { background: var(--brand-700); padding-block: clamp(36px, 5vw, 64px); }
.mc-band__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.mc-band__title { color: var(--on-dark); font-weight: 800; font-size: clamp(20px, 2.8vw, 32px); line-height: 1.35; letter-spacing: -.02em; }
.mc-band__sub { color: var(--on-dark-mid); font-size: clamp(14px, 1.6vw, 17px); margin-top: var(--space-3); }

/* ③ 고객의 이야기 */
.mc-trust { background: var(--surface-alt); padding-block: clamp(48px, 7vw, 96px); text-align: center; }
.mc-trust__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
  max-width: 1080px; margin: var(--space-12) auto 0; text-align: left;
}
.mc-story { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl, 20px); overflow: hidden; }
.mc-story .img-slot { aspect-ratio: 4/5; border-radius: 0; border: none; border-bottom: 2px dashed var(--brand-400); }
.mc-story__body { padding: var(--space-6); }
.mc-story__tag {
  display: inline-block; color: var(--brand-ink); background: var(--brand-50);
  border-radius: 999px; padding: 5px 12px;
  font-weight: 700; font-size: clamp(12px, 1.3vw, 14px); margin-bottom: var(--space-5);
}
/* 상황 / 진행 / 결과 — 라벨 붙은 3줄 */

/* 이야기를 뒷받침하는 숫자 — 블루 카드 한 장 */
.mc-trust__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
  max-width: 1080px; margin: var(--space-10) auto 0;
  background: linear-gradient(120deg, var(--brand-600), var(--brand-500));
  border-radius: var(--radius-xl, 20px); padding: var(--space-10) var(--space-6);
}
.mc-trust__note { color: var(--ink-500); font-size: clamp(12px, 1.3vw, 13px); margin-top: var(--space-5); line-height: 1.6; }

/* 성장 막대그래프를 '고객의 이야기' 안에 품었습니다.
   .d-growth 원래 스타일의 배경·여백만 꺼서 한 섹션처럼 이어지게 합니다.
   (막대 자체 스타일은 30-sections.css 를 그대로 씁니다) */
.mc-trust .d-growth { background: none; padding-block: 0; margin-top: var(--space-10); }
/* ★ 막대 라벨은 막대의 위(값)·아래(연도) 바깥에 absolute 로 붙습니다.
     30-sections.css 의 .d-growth { overflow: hidden } 때문에
     100%까지 자란 마지막 막대의 숫자와 연도 라벨 6개가 전부 잘려 있었습니다.
     넘침을 풀고, 차트 위아래에 라벨이 앉을 자리를 만들어 줍니다. */
.mc-trust .d-growth { overflow: visible; }
.mc-trust .d-growth__chart {
  box-sizing: border-box;
  padding-top: 2.6em;      /* 값 라벨(21만+) 자리 */
  padding-bottom: 2.4em;   /* 연도 라벨(2021~2026) 자리 */
  overflow: visible;
}

/* 그래프 다음에 오는 소제목 */
.mc-trust__sub {
  color: var(--ink-900); font-weight: 800;
  font-size: clamp(18px, 2.2vw, 26px); line-height: 1.35;
  margin-top: var(--space-16);
}
.mc-trust__sub em { font-style: normal; color: var(--brand-ink); }

/* ④ 사칭 주의 */
/* (사칭 주의 스타일은 아래 '38. 사칭 주의' 블록에 모았습니다) */

/* 가이드.md 3장 "섹션은 흰색 ↔ 연블루 번갈아 → 리듬"
   사칭주의(흰) 다음 FAQ 도 흰색이라 리듬이 끊겼습니다. FAQ 를 연블루로 돌립니다.
   최종: 히어로 → 연블루 → 흰 → 연블루 → 진블루 → 흰 → 연블루 → 흰 → 연블루 → 블루 */

/* ─────────── 반응형 ─────────── */
@media (max-width: 1024px) {
  .mc-cases__grid, .mc-trust__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .mc-cases, .mc-trust, .mc-warn { padding-block: var(--space-16); }
  /* 모바일 헤더 : 메뉴 5개와 전화번호가 한 줄에서 겹칩니다.
     전화는 화면 하단 고정 띠에 이미 있으므로 헤더에서는 뺍니다. */
  .header__hotline { display: none; }
  .mc-band__inner { flex-direction: column; align-items: stretch; text-align: center; }
  .mc-band__btn { width: 100%; text-align: center; }
  .mc-trust__stats { gap: var(--space-4); padding: var(--space-8) var(--space-4); }
  .mc-warn__box { flex-direction: column; gap: var(--space-4); padding: var(--space-6); }

  /* 고객 이야기 : 가로 스와이프 (후기와 동일 방식) */
  .mc-trust__grid {
    display: flex; grid-template-columns: none; gap: var(--space-4);
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--space-4));
    padding: var(--space-2) var(--space-4) var(--space-4);
  }
  .mc-trust__grid::-webkit-scrollbar { display: none; }
  .mc-story { flex: 0 0 80%; scroll-snap-align: center; }
}
@media (max-width: 480px) {
  .mc-cases__grid { grid-template-columns: 1fr; }
  .header__hotline a { font-size: 15px; }
}
/* ─── ③ 진행 절차 : 가로 4칸 ───
   점선과 원형 노드를 없앴습니다. 순서는 번호가 말해줍니다. */
.mc-steps { padding-block: clamp(24px, 3vw, 40px); }
.mc-flow {
  list-style: none; padding: 0; margin: clamp(32px, 4vw, 56px) 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.2vw, 20px);
  position: static;
}
.mc-flow::before { content: none; }      /* 가운데 점선 제거 */
.mc-flow__item { position: static; width: auto; margin: 0; padding: 0; }
.mc-flow__item::after { content: none; } /* 원형 노드 제거 */
.mc-flow__card {
  height: 100%;
  border: none; border-radius: var(--radius-xl);
  background: var(--brand-50);
  padding: clamp(24px, 2.4vw, 36px);
  display: flex; flex-direction: column;
}
/* 마지막 단계(입금)만 색면 — 여기가 목적지라는 표시 */
.mc-flow__item:last-child .mc-flow__card { background: var(--brand-700); }
.mc-flow__item:last-child .mc-flow__no { color: var(--on-dark-mid); background: none; padding: 0; }
.mc-flow__item:last-child .mc-flow__name { color: var(--on-dark); }
.mc-flow__item:last-child .mc-flow__desc { color: var(--on-dark-mid); }
.mc-flow__item:last-child .mc-flow__ico .ico { color: rgba(255,255,255,.45); }
.mc-flow__no {
  display: block; background: none; color: var(--brand-ink);
  border-radius: 0; padding: 0;
  font-weight: 800; font-size: clamp(13px, 1.4vw, 15px); letter-spacing: .08em;
  margin-bottom: var(--space-4);
}
.mc-flow__name { color: var(--ink-900); font-weight: 700; font-size: clamp(17px, 2vw, 22px); line-height: 1.35; }
.mc-flow__desc { color: var(--ink-500); font-size: clamp(13px, 1.5vw, 16px); line-height: 1.6; margin-top: var(--space-3); padding-right: 0; }
/* 아이콘은 카드 아래에 은은하게 */
.mc-flow__ico { position: static; margin-top: auto; padding-top: var(--space-8); }
.mc-flow__ico .ico { width: 40px; height: 40px; color: var(--brand-500); }

/* ─── ④ 인증서 ─── */
.mc-certs__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.2vw, 20px);
  max-width: 1080px; margin: clamp(32px, 4vw, 56px) auto 0; text-align: left;
}
.mc-cert {
  display: flex; gap: var(--space-5); align-items: center;
  border-radius: var(--radius-xl); padding: clamp(20px, 2vw, 28px);
}
.mc-cert__shot { flex: none; }
.mc-cert__shot img {
  display: block; width: 96px; height: auto;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface);
}
.mc-cert__name { color: var(--ink-900); font-weight: 700; font-size: clamp(15px, 1.7vw, 18px); margin-bottom: var(--space-2); }
.mc-cert__desc { color: var(--ink-500); font-size: clamp(12px, 1.4vw, 15px); line-height: 1.6; }

/* ─────────── 반응형 ─────────── */
@media (max-width: 1024px) {  .mc-flow { grid-template-columns: repeat(2, 1fr); }
  .mc-certs__grid { grid-template-columns: 1fr; max-width: 620px; }
}
@media (max-width: 768px) {  .mc-flow { grid-template-columns: 1fr; }
  .mc-flow__ico { display: none; }

}
/* 흰 카드로 떠야 하는 섹션들 — 안쪽 컨테이너를 카드로 만듭니다 */
.mc-prod > .container,
.mc-steps > .container,
.mc-certs > .container {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 56px);
}
.mc-prod, .mc-steps, .mc-certs { background: none; padding-block: clamp(24px, 3vw, 40px); }

/* 카드 위에 또 카드를 얹으면 탁해집니다 — 안쪽 조각은 테두리만 남깁니다 */
.mc-certs .mc-cert { background: none; border: 1px solid var(--line); }
/* ─── 히어로 : 케이뱅크식 벤토 카드 묶음 ───
   큰 카드 1 + 작은 카드 2. 사진이 없으므로 색과 글자로만 채웁니다.
   (img/ 의 사진은 전부 비상금마켓 자료라 쓸 수 없습니다) */
.mc-hero { padding-block: clamp(24px, 3vw, 40px); }
.mc-hero__inner {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(12px, 1.2vw, 20px);
  align-items: stretch;
}
/* 큰 카드 : 두 줄을 세로로 차지합니다 */
.mc-hero__copy {
  grid-row: 1 / 3;
  /* ★ brand-500(#4262ff)까지 밝히면 그 위 15px 흰 글씨가 3.5:1 로 기준(4.5) 미달입니다.
       700→600 구간만 씁니다. 가장 밝은 지점(#2a3ccf)에서도 흰 글씨 7.9:1. */
  background: linear-gradient(150deg, var(--brand-700), var(--brand-600) 70%);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 3.4vw, 52px);
  display: flex; flex-direction: column; justify-content: center;
  /* 억지로 높이를 잡으면 버튼을 옮긴 뒤 아래가 텅 빕니다.
     오른쪽 두 카드 높이에 맞춰 자연스럽게 늘어나게 둡니다. */
  min-height: 0;
}
.mc-hero__copy .mc-eyebrow { background: rgba(255,255,255,.18); color: var(--on-dark); align-self: flex-start; }
.mc-hero__copy .mc-hero__title { color: var(--on-dark); }
.mc-hero__copy .mc-hero__title em { color: var(--on-dark); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.mc-hero__copy .mc-hero__sub { color: var(--on-dark-mid); }
.mc-hero__copy .mc-hero__chips li { background: rgba(255,255,255,.16); border-color: transparent; color: var(--on-dark); }
.mc-hero__copy .mc-hero__chips li::before { color: var(--on-dark); }
.mc-hero__cta .btn--primary { background: var(--surface); color: var(--brand-ink); }
.mc-hero__cta .btn--primary:hover { background: var(--brand-50); }
.mc-hero__cta .btn--ghost { border: 1px solid rgba(255,255,255,.55); color: var(--on-dark); background: transparent; }

/* 오른쪽 작은 카드 2장 */
.mc-hero__visual { display: contents; }
.mc-hero__side {
  border-radius: var(--radius-xl); padding: clamp(20px, 2.4vw, 36px);
  display: flex; flex-direction: column; justify-content: center;
}
.mc-hero__side--white { background: var(--surface); }
.mc-hero__side--tint { background: var(--brand-50); }
.mc-hero__side-label { color: var(--brand-ink); font-weight: 700; font-size: clamp(12px, 1.3vw, 15px); margin-bottom: var(--space-3); }
.mc-hero__side-big {
  color: var(--ink-900); font-weight: 800; line-height: 1.15;
  font-size: clamp(28px, 3.6vw, 52px); font-variant-numeric: tabular-nums;
}
.mc-hero__side-big i { font-style: normal; font-size: .42em; margin-left: 4px; }
.mc-hero__side-desc { color: var(--ink-500); font-size: clamp(13px, 1.4vw, 16px); line-height: 1.5; margin-top: var(--space-3); }

/* ─── 헤더 1단 : 왼쪽 로고 · 오른쪽 메뉴 ─── */
.header__logo { order: 1; }
.nav { order: 2; margin-left: auto; }

@media (max-width: 768px) {
  .mc-hero__inner { grid-template-columns: 1fr; grid-template-rows: none; }
  .mc-hero__copy { grid-row: auto; min-height: 0; text-align: left; }
  .mc-hero__copy .mc-hero__cta, .mc-hero__copy .mc-hero__chips { justify-content: flex-start; }
  .nav { border-top: none; padding-top: 0; }
  .mc-prod > .container, .mc-steps > .container,
  .mc-certs > .container { padding: var(--space-8) var(--space-5); }
}

/* ─── ⑥ 4단계 아래 USP 한 줄 ─── */
/* 상자를 치지 않습니다 — 이미 흰 상자 안이라 상자 안에 상자가 됩니다 */
.mc-flow__usp {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  margin: clamp(24px, 2.6vw, 40px) auto 0;
  padding: 0; background: none; border-radius: 0;
  color: var(--ink-500);
  font-size: clamp(13px, 1.4vw, 16px); line-height: 1.6; text-align: center;
}
.mc-flow__usp .ico { width: 22px; height: 22px; color: var(--brand-500); flex: none; }
.mc-flow__usp b { color: var(--brand-ink); }

/* ─── ⑧ 등록·인증 안의 사칭 주의 ─── */
.mc-certs__warn { margin-top: clamp(20px, 2vw, 32px); }

/* ─── FAQ : Q / A 표기 ─── */
.mc-faq summary { gap: var(--space-4); }
.mc-faq__q, .mc-faq__aBadge {
  flex: none; display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-weight: 800; font-size: 15px; font-family: inherit;
}
.mc-faq__q { background: var(--brand-500); color: var(--on-brand); margin-right: var(--space-3); }
.mc-faq__aBadge { background: var(--brand-50); color: var(--brand-ink); margin-right: var(--space-3); }
/* summary 는 flex 라 Q 뱃지 다음 글자가 남은 폭을 차지하게 둡니다 */
.mc-faq summary { align-items: center; }
.mc-faq__a { display: flex; align-items: flex-start; gap: 0; }

/* ─────────── 반응형 ─────────── */
@media (max-width: 1024px) {  }
@media (max-width: 768px) {
  .mc-flow__usp { flex-direction: column; text-align: center; gap: var(--space-3); }
  .mc-certs__warn .mc-warn__box { flex-direction: column; padding: var(--space-6); }
}@media (max-width: 1024px) {}
/* ─── 히어로 : 사진을 어둡게 깔기 ─── */
.mc-hero {
  position: relative; isolation: isolate;
  /* 카드가 위에 붙어 보여 위 여백을 키우고 아래를 줄여 균형을 맞춥니다 */
  padding-block: clamp(72px, 8vw, 132px) clamp(96px, 11vw, 180px);
}
.mc-hero::before {
  content: ""; position: absolute; z-index: -1;
  /* 헤더·상단 띠는 건드리지 않습니다. 히어로 바로 아래부터 시작합니다.
     ★ 화면 끝까지 닿는 배경이라 모서리는 각지게 둡니다(라운드 금지).
     ★ 카드가 끝나는 지점보다 더 내려와야 경계가 어색하지 않아,
       아래로 여유를 두고 그라데이션은 한참 뒤(78%)부터 페이지색으로 풉니다. */
  /* 밖으로 흘리면 다음 섹션 제목을 덮습니다.
     대신 히어로 자체를 아래로 길게 잡아(padding-bottom) 뒤 내용이 자연히 내려갑니다. */
  inset: 0;
  border-radius: 0;
  /* ★ 아래로 흐리게 풀지 않고 히어로가 끝나는 지점에서 딱 끊습니다.
       사진이 너무 밝으면 위 글자가 안 읽혀 균일한 딥네이비 막만 한 겹 덮습니다. */
  background-image:
    linear-gradient(var(--hero-scrim-2), var(--hero-scrim-2)),
    url("../img/main01-bg.jpg");
  background-size: cover, cover;
  /* Y 값을 키우면 사진의 아래쪽이 보이면서 이미지가 위로 올라갑니다 */
  background-position: 50% 40%, 50% 64%;
}

/* ─── 후기 사진 ─── */
.mc-story__shot { aspect-ratio: 4/5; overflow: hidden; }
.mc-story__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {}
@media (max-width: 1024px) {}

/* 펼쳐진 칸은 파란 색면이 --card-bg 가 됩니다 */

@media (max-width: 1024px) {}

/* FAQ : Q 배지 옆에 질문이 바로 붙게 (가운데로 밀리지 않도록).
   질문 글자는 태그로 감싸지 않은 텍스트라, +/− 기호를 오른쪽 끝으로 밀어 자리를 잡습니다. */
.mc-faq summary { justify-content: flex-start; text-align: left; }
.mc-faq summary::after { margin-left: auto; }
.mc-faq__a { text-align: left; }
/* ═══ 히어로 오른쪽 카드 (숫자 합치기 + 상담 버튼) ═══ */

/* 위 카드 : 숫자 두 개 */
.mc-hero__facts { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.mc-hero__facts li + li {
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.mc-hero__facts b {
  display: block; color: var(--ink-900); font-weight: 800; line-height: 1.15;
  font-size: clamp(22px, 2.6vw, 36px); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.mc-hero__facts span {
  display: block; margin-top: var(--space-2);
  color: var(--ink-500); font-size: clamp(12px, 1.3vw, 15px); line-height: 1.5;
}

/* 아래 카드 : 상담 버튼 두 개 */
.mc-talk { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.mc-talk__btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.mc-talk__btn:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-3); }
.mc-talk__ico {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  /* ★ --ico-bg-opacity: 1 로 두면 아이콘 '바탕 덩어리'가 100%가 되어
       수화기가 원에 완전히 묻힙니다(흰 동그라미만 보임). 기본 2톤을 씁니다. */
}
.mc-talk__ico .ico { width: 22px; height: 22px; }
.mc-talk__txt { min-width: 0; }
.mc-talk__txt b { display: block; font-weight: 700; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.3; }
.mc-talk__txt small { display: block; margin-top: 3px; font-size: clamp(11px, 1.2vw, 13px); line-height: 1.4; }

/* 카카오는 카카오 색이어야 알아봅니다 (의도된 예외) */
.mc-talk__btn--kakao { background: var(--kakao-bg); color: var(--kakao-ink); }
.mc-talk__btn--kakao .mc-talk__ico { background: var(--kakao-ink); color: var(--kakao-bg); }
.mc-talk__btn--kakao small { color: var(--kakao-ink); opacity: .72; }

/* brand-500 위에서는 흰 글자가 4.75:1 이라 부제목(작은 글씨)이 걸립니다.
   한 단계 진한 brand-600 을 쓰면 흰 글자 7.94:1, 부제목도 4.86:1 로 통과합니다. */
.mc-talk__btn--tel { background: var(--brand-600); color: var(--on-brand); }
.mc-talk__btn--tel .mc-talk__ico { background: rgba(255,255,255,.2); color: var(--on-brand); }
.mc-talk__btn--tel small { color: var(--on-dark-mid); }

@media (max-width: 900px) {
  /* 좁은 화면에서 두 개를 나란히 두면 부제목이 터져서 지워야 했는데,
     그러면 버튼에 이름만 남아 무엇을 하는 버튼인지 알기 어렵습니다.
     대신 위아래로 세워서 부제목을 그대로 살립니다. */
  .mc-talk { grid-template-columns: 1fr; }
  .mc-talk__btn { flex-direction: row; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
  .mc-talk__txt small { display: block; }
}

/* ═══════════════════════════════════════════════════════════
   ② 강점 아코디언 (.mc-need)  ―  한 덩어리로 관리합니다

   여기저기 덧붙이다 규칙이 서로 잘려 세로 텍스트가 남거나
   번호가 사라지는 문제가 났습니다. 이 블록 하나만 고치세요.

   구조
     · 가로로 늘어선 세로 카드 5장. '열린 칸' 하나만 넓어집니다.
     · 열린 칸은 자바스크립트가 .is-open 으로 옮깁니다(마우스를 떼도 유지).
     · 접힘 : 흰 카드에 사진이 은은하게 비침 · 번호만 보임
     · 펼침 : 사진이 카드를 꽉 채우고 아래쪽만 파란 가림막 + 흰 글자
   ═══════════════════════════════════════════════════════════ */

.mc-need { padding-block: clamp(24px, 3vw, 40px); }

/* 머리말 : 가운데 */
.mc-need__head { text-align: center; max-width: 44em; margin: 0 auto; }
.mc-need__head .mc-eyebrow { margin-inline: auto; }
.mc-need__title {
  color: var(--ink-900); font-weight: 800;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.35;
}
.mc-need__title em { font-style: normal; color: var(--brand-ink); }
.mc-need__desc {
  color: var(--ink-500); font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6; margin-top: var(--space-5);
}

/* 카드 줄 */
.mc-need__list {
  display: flex; gap: clamp(10px, 1vw, 16px);
  margin: clamp(36px, 4vw, 64px) 0 0; padding: 0; list-style: none;
}

.mc-need__item {
  position: relative; isolation: isolate;
  flex: 1 1 0; min-width: 0;
  height: clamp(300px, 32vw, 400px);
  /* ★ 카드 바탕을 파랗게 둡니다.
       접힘 : 이 파란 바탕 위로 사진이 은은하게 비칩니다.
       펼침 : 사진이 100%로 덮고 아래쪽만 가림막이 더해집니다.
       (바탕색을 바꾸지 않고 사진 농도만 움직이므로 열고 닫을 때 튀지 않습니다) */
  background: var(--brand-700);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 2.4vw, 36px);
  overflow: hidden; cursor: pointer;
  /* 배경색은 흰색 그대로 둡니다. 파란 느낌은 사진 위 가림막이 냅니다.
     배경까지 파랗게 바꾸면 접히는 동안 파란 덩어리가 남습니다. */
  transition: flex-grow var(--dur-xxslow) var(--ease-out);
}
.mc-need__item:hover,
.mc-need__item:focus-visible,
.mc-need__item.is-open { flex-grow: 3.4; }

/* 사진 (z -2) */
.mc-need__item::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  border-radius: inherit;
  /* 사진이라 카드를 꽉 채웁니다(cover).
     ※ 흰 배경 일러스트를 넣을 땐 100% auto 로 바꿔야 잘리지 않습니다. */
  background-size: cover; background-repeat: no-repeat;
  background-position: 50% 30%;
  opacity: .16;                         /* 접힘 : 파란 바탕이 이기고 실루엣만 남는 정도 */
  transition: opacity var(--dur-xxslow) var(--ease-out),
              background-position var(--dur-xxslow) var(--ease-out);
}
/* 가림막 (z -1) : 펼쳤을 때만. 아래쪽 글자 자리를 파랗게 덮습니다 */
/* 가림막 : 아래쪽 글자 자리를 파랗게 덮습니다.
   38%부터 진해져 88% 지점에서 불투명한 딥블루가 됩니다. */
.mc-need__item::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg,
      var(--photo-scrim-top) 0%,
      transparent 24%,
      transparent 38%,
      rgba(20, 34, 130, .78) 62%,
      var(--photo-scrim-bottom) 88%);
  opacity: 0;
  transition: opacity var(--dur-xxslow) var(--ease-out);
}
.mc-need__item:hover::after,
.mc-need__item:focus-visible::after,
.mc-need__item.is-open::after { opacity: 1; }

/* 펼치면 또렷해지고, 글자 자리를 내주려 살짝 위로 올라갑니다 */
.mc-need__item:hover::before,
.mc-need__item:focus-visible::before,
.mc-need__item.is-open::before { opacity: 1; background-position: 50% 26%; }

/* 번호 : 카드 왼쪽 위 고정 */
/* 번호 : 카드 패딩과 무관하게 왼쪽 위 모서리에 바짝 붙입니다 */
.mc-need__no {
  position: absolute; z-index: 1;
  top: clamp(14px, 1.3vw, 20px); left: clamp(16px, 1.5vw, 22px);
  display: block; margin: 0; line-height: 1;
  color: var(--on-dark-mid); font-weight: 800;
  font-size: clamp(17px, 2.2vw, 32px);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  transition: color var(--dur-slow) var(--ease);
}

/* 글자 덩어리 : 아래쪽에 띄워 둡니다.
   ★ 자리를 차지하게 두면, 좁은 칸에서 글이 카드 높이를 넘겨
     위로 넘친 번호가 잘려 사라집니다. */
.mc-need__body {
  position: absolute; z-index: 1;
  left: clamp(24px, 2.4vw, 36px);
  bottom: clamp(24px, 2.4vw, 36px);
  /* ★ 좌우를 카드에 붙이면 카드가 넓어지는 동안 글이 계속 다시 줄바꿈됩니다.
       펼친 상태의 폭(--open-w, 스크립트가 재서 넣습니다)으로 고정해 두면
       카드만 넓어지고 글은 처음부터 제자리에 있습니다. */
  right: auto;
  width: var(--open-w, calc(100% - 2 * clamp(24px, 2.4vw, 36px)));
  opacity: 0; transform: translateY(8px);
  /* 접힐 때는 기다리지 않고 바로 사라집니다 */
  transition: opacity var(--dur-fast) var(--ease) 0s,
              transform var(--dur-fast) var(--ease) 0s;
}
.mc-need__item:hover .mc-need__body,
.mc-need__item:focus-visible .mc-need__body,
.mc-need__item.is-open .mc-need__body {
  opacity: 1; transform: none;
  /* ★ 카드가 다 펼쳐진 뒤에 나타납니다.
       넓어지는 도중에 보이면 폭이 변할 때마다 글이 다시 줄바꿈되어
       두두둑 튀어 보입니다. 흔들림 없이 자리를 잡은 뒤 떠오르게 합니다. */
  transition: opacity var(--dur-base) var(--ease-out) var(--delay-text),
              transform var(--dur-base) var(--ease-out) var(--delay-text);
}

/* ★ 세로쓰기는 쓰지 않습니다. 글자 방향은 애니메이션이 안 돼
     펼칠 때 툭 바뀌고, 접힌 칸에 세로 글자가 흐릿하게 남습니다. */
.mc-need__name {
  writing-mode: horizontal-tb;
  color: var(--on-dark); font-weight: 700;
  font-size: clamp(17px, 2vw, 22px); line-height: 1.35;
}
.mc-need__sub {
  color: var(--on-dark-mid);
  font-size: clamp(13px, 1.5vw, 16px); line-height: 1.6;
  margin-top: var(--space-3);
}


/* ★★ 사진 경로 ★★
   HTML 에 style="--usp-img:url(...)" 로 넣으면 브라우저가 그 상대경로를
   '이 CSS 파일' 기준으로 풀어 css/img/... 를 찾다가 404 가 납니다.
   그래서 여기서 ../ 로 직접 지정합니다. 사진은 파일만 교체하세요. */
.mc-need__item:nth-child(1)::before { background-image: url("../img/usp/01.jpg"); }
.mc-need__item:nth-child(2)::before { background-image: url("../img/usp/02.jpg"); }
.mc-need__item:nth-child(3)::before { background-image: url("../img/usp/03.jpg"); }
.mc-need__item:nth-child(4)::before { background-image: url("../img/usp/04.jpg"); }
.mc-need__item:nth-child(5)::before { background-image: url("../img/usp/05.jpg"); }

@media (max-width: 1024px) {
  /* 세로로 세우면 칸이 전부 펼쳐진 상태입니다.
     한 칸만 사진+가림막이면 제각각으로 보이므로 전부 '펼친 모양'으로 통일합니다. */
  .mc-need { padding-block: var(--space-8); }
  .mc-need__list { flex-direction: column; }
  .mc-need__item,
  .mc-need__item.is-open {
    flex: none; height: auto; min-height: clamp(230px, 48vw, 320px);
  }
  .mc-need__item::before,
  .mc-need__item::after { opacity: 1; }

  /* 글이 자리를 차지해야 카드가 글 길이에 맞춰 늘어납니다 */
  /* 세로로 세우면 카드가 좁아지므로 고정 폭(--open-w)을 반드시 풀어야 합니다.
     안 풀면 카드보다 넓은 글상자가 되어 오른쪽이 잘립니다. */
  .mc-need__body {
    position: static; width: auto; right: auto;
    opacity: 1; transform: none; margin-top: auto;
  }
  .mc-need__item { display: flex; flex-direction: column; }
}

/* 카톡 버튼은 카카오 실제 아이콘(img/카톡아이콘.png)을 씁니다 */
.mc-talk__ico--png { background: none !important; }
.mc-talk__ico--png img { display: block; width: 38px; height: 38px; }

/* ═══ ② 상품 2종 — 큰 라운드 카드 두 장 ═══
   ★ 아이콘은 쓰지 않습니다. 금액을 큰 글씨로 앞세우는 게 이 자리의 역할입니다. */
.mc-prod { padding-block: clamp(24px, 3vw, 40px); text-align: center; }
.mc-prod .mc-eyebrow { margin-inline: auto; }
/* 섹션을 감싸던 흰 상자는 쓰지 않습니다 — 카드가 두 장이라 상자가 또 겹쳐 보입니다 */
.mc-prod > .container { background: none; border-radius: 0; padding-inline: var(--container-x); padding-block: 0; }
.mc-prod__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.2vw, 20px);
  max-width: 940px; margin: clamp(32px, 4vw, 56px) auto 0; text-align: left;
}
.mc-prod__card {
  background: var(--pc-bg); border-radius: var(--radius-xl);
  padding: clamp(32px, 3.6vw, 52px);
  display: flex; flex-direction: column;
}

.mc-prod__kicker { color: var(--pc-kicker); font-weight: 700; font-size: clamp(12px, 1.3vw, 15px); }
.mc-prod__amount {
  color: var(--pc-amount); font-weight: 800; line-height: 1.05;
  font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; margin-top: var(--space-2);
}
.mc-prod__name {
  color: var(--pc-title); font-weight: 800; line-height: 1.3;
  font-size: clamp(18px, 2vw, 24px); margin-top: var(--space-6);
}
.mc-prod__desc {
  color: var(--pc-body); font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.6; margin-top: var(--space-3);
}
/* 어떤 한도를 쓰는지 */
.mc-prod__use {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--pc-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.mc-prod__use dd {
  margin: 0; background: var(--pc-chip); color: var(--pc-chip-ink);
  border-radius: 999px; padding: 8px 15px;
  font-size: clamp(12px, 1.3vw, 15px); font-weight: 700;
}
.mc-prod__note { color: var(--ink-500); font-size: clamp(13px, 1.4vw, 16px); line-height: 1.7; margin-top: var(--space-8); }

@media (max-width: 768px) {
  .mc-prod { padding-block: var(--space-8); }
  .mc-prod__grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   37. 단락 폭 통일 + 모바일 가로 스와이프
       · 폭이 820~1280px 로 제각각이라 섹션마다 좌우 끝이 어긋났습니다.
         --content-w 하나로 묶습니다. 이 값만 바꾸면 전부 같이 움직입니다.
       · 모바일에서 카드가 세로로 길게 쌓이면 스크롤이 끝없이 길어집니다.
         카드형은 가로로 넘겨 보게 합니다.
   ═══════════════════════════════════════════════════════════ */
/* 기준 폭 하나.
   ★ 흰 배경 상자(.container)가 있는 섹션과 없는 섹션의 좌우 끝을 맞춥니다.
     - 상자 없는 섹션 : 내용이 이 폭
     - 상자 있는 섹션 : 상자의 바깥 끝이 이 폭
   그래서 화면을 위아래로 훑을 때 좌우 선이 한 줄로 떨어집니다. */
/* --content-w 정의는 02-tokens-web.css 에 있습니다 (토큰은 토큰 파일에) */



.mc-hero__inner,
.mc-need__list,
.mc-prod__grid,
.mc-band__inner,
.mc-flow,
.mc-trust__grid,
.mc-trust__stats,
.mc-certs__grid,
.mc-faq__list,
.mc-cta__inner {
  max-width: var(--content-w);
  margin-inline: auto;
}
/* 머리말도 같은 폭 안에서 가운데 */
.mc-need__head, .mc-prod .mc-h2, .mc-prod .mc-lead,
.mc-steps .mc-h2, .mc-steps .mc-lead,
.mc-trust .mc-h2, .mc-trust .mc-lead,
.mc-certs .mc-h2, .mc-certs .mc-lead { max-width: var(--content-w); margin-inline: auto; }

@media (max-width: 768px) {
  /* ─── 카드형은 가로로 넘겨 봅니다 ───
     세로로 쌓으면 이 페이지에서만 카드가 17장이라 스크롤이 한없이 길어집니다. */
  .mc-need__list,
  .mc-prod__grid,
  .mc-flow,
  .mc-trust__grid,
  .mc-certs__grid {
    display: flex; flex-direction: row; grid-template-columns: none;
    gap: var(--space-3);
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* 화면 끝까지 흘러야 '더 있다'가 보입니다 */
    margin-inline: calc(-1 * var(--container-x));
    padding: var(--space-2) var(--container-x) var(--space-4);
  }
  .mc-need__list::-webkit-scrollbar,
  .mc-prod__grid::-webkit-scrollbar,
  .mc-flow::-webkit-scrollbar,
  .mc-trust__grid::-webkit-scrollbar,
  .mc-certs__grid::-webkit-scrollbar { display: none; }

  .mc-need__list > *,
  .mc-prod__grid > *,
  .mc-flow > *,
  .mc-trust__grid > *,
  .mc-certs__grid > * {
    flex: 0 0 82%; scroll-snap-align: center; min-width: 0;
  }
  /* 인증서는 가로로 넓어 한 장이 더 커도 됩니다 */
  .mc-certs__grid > * { flex-basis: 88%; }

  /* 강점 카드는 손가락으로는 호버가 없으니 전부 펼친 모양 */
  .mc-need__item,
  .mc-need__item.is-open { height: clamp(300px, 78vw, 380px); min-height: 0; }
}

/* ═══ 줄바꿈 다듬기 ═══
   짧은 설명글이 줄바꿈될 때 마지막 줄에 한두 단어만 남으면 어색합니다.
   text-wrap: balance 는 줄 길이를 고르게 나눠 문장 가운데쯤에서 끊어줍니다.
   (여러 줄 제목·짧은 문단에만 씁니다. 긴 본문에는 효과가 없습니다) */
.mc-h2, .mc-lead, .mc-need__title, .mc-need__desc,
.mc-need__name, .mc-need__sub,
.mc-prod__name, .mc-prod__desc, .mc-prod__note,
.mc-flow__name, .mc-flow__desc, .mc-flow__usp,
.mc-trust__sub, .mc-trust__note, .mc-story__tag, .mc-story__dl dd,
.mc-cert__name, .mc-cert__desc,
.mc-warn__title, .mc-warn__list li, .mc-warn__foot,
.mc-band__title, .mc-band__sub,
.mc-cta__title, .mc-cta__sub,
.mc-hero__title, .mc-hero__sub, .mc-hero__side-desc,
.mc-talk__txt small,
.mc-faq summary, .mc-faq__a {
  text-wrap: balance;
}
/* 답변처럼 문장이 길면 balance 가 안 걸립니다 — pretty 로 최소한 외톨이 단어만 막습니다 */
.mc-faq__a p, .mc-story__dl dd, .footer__notice { text-wrap: pretty; }

/* ═══ 단락 머리말 규격 통일 ═══
   .mc-h2 는 24~40px, .mc-need__title 은 26~44px 에 굵기도 달라
   섹션마다 제목 크기가 들쭉날쭉했습니다. 한 규칙으로 묶습니다.
   ★ 새 섹션을 만들면 제목에 .mc-h2 를 쓰세요. */
.mc-h2,
.mc-need__title {
  color: var(--ink-900);
  font-size: clamp(25px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: center;
}
.mc-h2 em,
.mc-need__title em { font-style: normal; color: var(--brand-ink); }

.mc-lead,
.mc-need__desc {
  color: var(--ink-500);
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.7;
  margin-top: var(--space-4);
  text-align: center;
}

/* ═══ 접힌 카드의 짧은 제목 ═══
   접혀 있을 때 번호만 있으면 뭘 말하는 칸인지 알 수 없습니다.
   짧은 제목을 번호 아래에 두고, 펼쳐지면 사라지면서 본문에 자리를 넘깁니다. */
.mc-need__short {
  position: absolute; z-index: 1;
  /* 펼쳤을 때 본문이 앉는 자리와 똑같이 아래쪽에 둡니다.
     같은 자리에서 글만 바뀌어야 시선이 안 튑니다. */
  left: clamp(24px, 2.4vw, 36px);
  right: clamp(24px, 2.4vw, 36px);
  bottom: clamp(24px, 2.4vw, 36px);
  margin: 0;
  color: var(--on-dark); font-weight: 700;
  font-size: clamp(13px, 1.5vw, 18px); line-height: 1.4;
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease);
}
/* 펼치면 자연스럽게 사라집니다 (본문보다 먼저 빠져야 겹쳐 보이지 않습니다) */
.mc-need__item:hover .mc-need__short,
.mc-need__item:focus-visible .mc-need__short,
.mc-need__item.is-open .mc-need__short { opacity: 0; }

@media (max-width: 768px) {
  /* 모바일은 모든 카드가 펼쳐진 모양이라 짧은 제목은 쓰지 않습니다 */
  .mc-need__short { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   38. 사칭 주의
       ★ 테두리(획)로 상자를 그리지 않습니다 — 우리 가이드 어법이 아닙니다.
         진한 붉은 '면'으로 채우고 글자를 밝게 얹습니다.
       ★ li 를 flex 로 두면 안의 <b> 가 별개 항목으로 쪼개져
         글이 제멋대로 흩어집니다(모바일에서 특히). block + 들여쓰기로 씁니다.
   ═══════════════════════════════════════════════════════════ */
.mc-certs__warn { margin-top: clamp(20px, 2vw, 32px); }
.mc-certs__warn .mc-warn__box,
.mc-warn__box {
  display: flex; gap: clamp(16px, 1.8vw, 26px); align-items: flex-start;
  max-width: none; margin: 0;
  background: var(--accent-600);          /* 진한 붉은 면 */
  border: none;
  border-radius: var(--radius-xl);
  padding: clamp(26px, 2.8vw, 40px);
  text-align: left;
}
.mc-warn__ico {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  /* ★ --ico-bg-opacity: 1 로 두면 바탕(삼각형)이 100%가 되어
       앞면(느낌표)이 같은 색으로 묻혀 사라집니다. 기본 2톤을 씁니다. */
}
.mc-warn__ico .ico { width: 24px; height: 24px; color: var(--accent-600); }

.mc-warn__title {
  color: var(--on-dark); font-weight: 800;
  font-size: clamp(17px, 2vw, 23px); line-height: 1.4;
  margin-bottom: var(--space-4);
}
.mc-warn__list { list-style: none; padding: 0; margin: 0; }
.mc-warn__list li {
  display: block; position: relative;    /* ★ flex 금지 — <b> 가 쪼개집니다 */
  padding-left: var(--space-5);
  color: var(--on-dark); opacity: .92;
  font-size: clamp(14px, 1.5vw, 16px); line-height: 1.65;
}
.mc-warn__list li + li { margin-top: var(--space-3); }
.mc-warn__list li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--on-dark); opacity: .7;
}
.mc-warn__list b { font-weight: 800; }
.mc-warn__foot {
  color: var(--on-dark); opacity: .8;
  font-size: clamp(13px, 1.4vw, 15px); line-height: 1.6;
  margin-top: var(--space-5);
}
.mc-warn__foot a { color: var(--on-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 768px) {
  .mc-certs__warn .mc-warn__box,
  .mc-warn__box { flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
}

/* ═══ 중간 CTA 밴드 ═══
   왼쪽 : 두 줄 문구(아래 줄에 화살표) · 오른쪽 : 상담 버튼 두 개 */
.mc-band__copy { min-width: 0; }
.mc-band__lead {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--on-dark); font-weight: 800;
  /* 위 줄(.mc-band__title)과 같은 크기여야 두 줄이 한 덩어리로 읽힙니다 */
  font-size: clamp(20px, 2.8vw, 32px); line-height: 1.35;
  margin-top: var(--space-2);
}
.mc-band__arrow { width: clamp(20px, 2vw, 26px); height: clamp(20px, 2vw, 26px); flex: none; }
.mc-band__sub { margin-top: var(--space-4); }

.mc-band__cta { display: flex; gap: var(--space-3); flex: none; }
.mc-band__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 16px 24px; border-radius: var(--radius-btn);
  font-weight: 800; font-size: clamp(14px, 1.6vw, 17px); white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.mc-band__btn:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-3); }
.mc-band__btn img { width: 26px; height: 26px; flex: none; }
.mc-band__btn .ico { width: 26px; height: 26px; flex: none; }
/* 카카오는 카카오 색이어야 알아봅니다 (의도된 예외) */
.mc-band__btn--kakao { background: var(--kakao-bg); color: var(--kakao-ink); }
.mc-band__btn--tel { background: var(--surface); color: var(--brand-ink); }

@media (max-width: 900px) {
  .mc-band__inner { flex-direction: column; align-items: flex-start; }
  .mc-band__cta { width: 100%; }
  .mc-band__btn { flex: 1 1 0; min-width: 0; }
}

/* 흰 상자의 바깥 끝을 기준 폭에 맞춥니다 (안쪽 카드는 상자 여백만큼 들어갑니다) */
.mc-steps > .container,
.mc-certs > .container { max-width: var(--content-w); }

/* ═══ ⑤ 진행 절차 — 앞 3단계 묶음 + 마지막 강조 ═══
   ★ 원 3개를 겹치고 화살표를 다는 건 참고 페이지 어법이라 쓰지 않습니다.
     우리 카드 언어(라운드 카드 + 색면 강조)로 같은 구조를 만듭니다. */
.mc-flow {
  display: grid;
  grid-template-columns: 1fr auto minmax(200px, 0.42fr);
  align-items: stretch;
  gap: clamp(12px, 1.4vw, 24px);
  margin: clamp(32px, 4vw, 56px) auto 0;
  list-style: none; padding: 0; position: static;
}
.mc-flow::before { content: none; }

/* 앞 3단계 : 한 덩어리 */
.mc-flow__group {
  display: grid; grid-template-columns: repeat(3, 1fr);
  list-style: none; margin: 0; padding: clamp(20px, 2vw, 32px);
  background: var(--surface-alt); border-radius: var(--radius-xl);
}
.mc-flow__step {
  padding: clamp(8px, 1vw, 16px) clamp(10px, 1.2vw, 20px);
  position: static; width: auto; margin: 0;
}
.mc-flow__step + .mc-flow__step { border-left: 1px solid var(--line); }
.mc-flow__step::after { content: none; }

.mc-flow__no {
  display: block; background: none; padding: 0; margin-bottom: var(--space-3);
  color: var(--brand-ink); font-weight: 800;
  font-size: clamp(11px, 1.2vw, 13px); letter-spacing: .08em;
}
.mc-flow__name { color: var(--ink-900); font-weight: 800; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.35; }
.mc-flow__desc { color: var(--ink-500); font-size: clamp(12px, 1.3vw, 15px); line-height: 1.6; margin-top: var(--space-2); padding-right: 0; }

/* 화살표 */
.mc-flow__arrow { display: grid; place-items: center; color: var(--brand-400); }
.mc-flow__arrow svg { width: clamp(22px, 2.4vw, 34px); height: clamp(22px, 2.4vw, 34px); }

/* 마지막 : 색면으로 떼어내 강조 */
.mc-flow__final {
  background: var(--brand-700); border-radius: var(--radius-xl);
  padding: clamp(24px, 2.6vw, 40px);
  display: flex; flex-direction: column; justify-content: center;
}
.mc-flow__final .mc-flow__no { color: var(--on-dark-mid); }
.mc-flow__final .mc-flow__name { color: var(--on-dark); font-size: clamp(19px, 2.2vw, 26px); }
.mc-flow__final .mc-flow__desc { color: var(--on-dark-mid); font-size: clamp(13px, 1.4vw, 16px); }

@media (max-width: 900px) {
  /* 좁아지면 위아래로 : 3단계 묶음 → 화살표 → 입금 */
  .mc-flow { grid-template-columns: 1fr; }
  .mc-flow__group { grid-template-columns: 1fr; gap: var(--space-2); }
  .mc-flow__step + .mc-flow__step { border-left: none; border-top: 1px solid var(--line); }
  .mc-flow__arrow { transform: rotate(90deg); }
}

/* ═══════════════════════════════════════════════════════════
   39. 모션 마무리
       · 등장은 10-base.css 의 .reveal 한 벌만 씁니다(따로 만들지 않습니다).
       · 여기서는 '멈춰 있는 것들'에 결이 맞는 반응만 더합니다.
       · 움직임을 줄이도록 설정한 기기에서는 전부 끕니다.
   ═══════════════════════════════════════════════════════════ */

/* 손을 올렸을 때 : 카드는 살짝 떠오르고, 링크는 색만 바뀝니다 */
/* ★ 이 카드들에는 .reveal 이 함께 붙어 있습니다.
     .js .reveal { transition: opacity, transform } 이 더 구체적이라
     여기서 transition 을 따로 쓰면 덮여서 아무 반응도 안 걸립니다.
     그래서 아래 '.js .reveal.카드' 규칙에 등장용과 반응용을 한 줄로 모았습니다.
     transform 은 등장에서 이미 쓰고 있으므로 hover 에서는 쓰지 않습니다. */
.mc-prod__card:hover, .mc-cert:hover, .mc-story:hover, .mc-flow__final:hover {
  box-shadow: var(--shadow-3);
}
.js .reveal.mc-prod__card,
.js .reveal.mc-cert,
.js .reveal.mc-story,
.js .reveal.mc-flow__final {
  transition:
    opacity var(--dur-enter) var(--ease-out) calc(var(--i, 0) * var(--stagger)),
    transform var(--dur-enter) var(--ease-out) calc(var(--i, 0) * var(--stagger)),
    background-color var(--dur-base) var(--ease) 0s,
    box-shadow var(--dur-base) var(--ease-out) 0s;
}

/* 눌렀을 때 살짝 오그라듭니다 — 손가락에 반응했다는 신호 */
.mc-talk__btn:active, .mc-band__btn:active,
.mc-need__btn:active, .btn:active { transform: scale(var(--press)); }

/* FAQ : 열고 닫힘이 이미 부드럽습니다. +/− 만 같이 돌려줍니다 */
.mc-faq summary::after { transition: transform var(--dur-base) var(--ease-out); }
.mc-faq details[open] summary::after { transform: rotate(180deg); }

/* 상단 안내 띠 화살표가 천천히 오갑니다 — 누를 수 있다는 신호 */
.mc-eventbar .arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.mc-eventbar a:hover .arrow { transform: translateX(5px); }

/* ★ 움직임 최소화 설정을 켠 기기에서는 등장·이동을 전부 끕니다.
     (어지럼증·멀미가 있는 분들에게는 이 움직임이 고통이 됩니다) */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal[data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mc-need__item, .mc-need__item::before, .mc-need__item::after,
  .mc-need__body, .mc-need__short, .mc-need__no,
  .mc-prod__card, .mc-cert, .mc-story, .mc-flow__final,
  .mc-talk__btn, .mc-band__btn, .mc-eventbar .arrow, .mc-band__arrow { transition: none !important; }
  .mc-prod__card:hover, .mc-cert:hover, .mc-story:hover, .mc-flow__final:hover { transform: none; }
}

/* ═══ 상품 카드 : 마우스를 댄 쪽이 파란 카드가 됩니다 ═══
   색을 변수 한 벌로 묶어 두면 변수만 갈아끼워도 카드 전체가 같이 넘어갑니다.
   (자바스크립트 없이 :hover 만으로 됩니다) */
.mc-prod__card {
  --pc-bg: var(--surface);
  --pc-kicker: var(--ink-500);
  --pc-amount: var(--brand-ink);
  --pc-title: var(--ink-900);
  --pc-body: var(--ink-500);
  --pc-line: var(--line);
  --pc-chip: var(--surface-alt);
  --pc-chip-ink: var(--ink-900);
}
.mc-prod__kicker, .mc-prod__amount, .mc-prod__name, .mc-prod__desc,
.mc-prod__use, .mc-prod__use dd {
  transition: color var(--dur-base) var(--ease),
              background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
/* 파란 상태 : 처음엔 첫 카드, 마우스를 대면 그 카드로 '옮겨가서 유지'됩니다.
   ★ :hover 로 하면 손을 떼는 순간 무조건 첫 카드로 되돌아갑니다.
     그래서 자바스크립트가 --fill 을 옮겨줍니다(강점 아코디언과 같은 방식). */
.mc-prod__card--fill {
  --pc-bg: var(--brand-600);
  --pc-kicker: var(--on-dark-mid);
  --pc-amount: var(--on-dark);
  --pc-title: var(--on-dark);
  --pc-body: var(--on-dark-mid);
  --pc-line: rgba(255, 255, 255, .22);
  --pc-chip: rgba(255, 255, 255, .16);
  --pc-chip-ink: var(--on-dark);
}

/* ═══ 40. 마우스 반응 — 구간별 ═══
   원칙 : 누를 수 있는 것만 반응합니다. 그냥 읽는 글은 움직이지 않습니다. */

/* 고객 이야기 : 사진이 아주 살짝 밀려 들어옵니다 */
.mc-story { overflow: hidden; }
.mc-story__shot img { transition: transform var(--dur-slow) var(--ease-out); }
.mc-story:hover .mc-story__shot img { transform: scale(1.05); }

/* 등록·인증 : 카드가 뜨고 서류가 또렷해집니다 */
.mc-cert__shot img { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease); }
.mc-cert:hover .mc-cert__shot img { transform: scale(1.04); box-shadow: var(--shadow-3); }

/* 진행 절차 : 배경을 밝히면 칸 경계가 드러나 묶음이 쪼개져 보입니다.
   글자 색만 바꿔 어느 단계를 보고 있는지 알려줍니다. */
.mc-flow__step .mc-flow__name { transition: color var(--dur-base) var(--ease); }
.mc-flow__step:hover .mc-flow__name { color: var(--brand-ink); }

/* FAQ : 줄 전체가 눌리는 자리라는 걸 알려줍니다 */
.mc-faq details { transition: background-color var(--dur-base) var(--ease); border-radius: var(--radius-md); }
.mc-faq details:hover { background: var(--surface-alt); }
.mc-faq summary { transition: color var(--dur-base) var(--ease); }
.mc-faq summary:hover { color: var(--brand-ink); }

/* 헤더 메뉴 · 푸터 링크 */
.footer__links a { transition: color var(--dur-fast) var(--ease); }
.footer__links a:hover { color: var(--on-dark); }

/* 히어로 옆 카드 : 상담 버튼 묶음이 있는 카드만 살짝 반응 */
.mc-hero__side--tint { transition: transform var(--dur-base) var(--ease-out); }
.mc-hero__side--tint:hover { transform: translateY(calc(var(--lift) / 2)); }

/* 사칭 주의 : 링크만 */
.mc-warn__foot a { transition: opacity var(--dur-fast) var(--ease); }
.mc-warn__foot a:hover { opacity: .75; }

/* 하단 고정 상담 띠 */
.site-cta .cta-btn { transition: filter var(--dur-fast) var(--ease), transform var(--dur-instant) var(--ease); }
.site-cta .cta-btn:hover { filter: brightness(1.06); }
.site-cta .cta-btn:active { transform: scale(var(--press)); }

@media (prefers-reduced-motion: reduce) {
  .mc-story__shot img, .mc-cert__shot img, .mc-flow__step,
  .mc-faq details, .mc-hero__side--tint, .site-cta .cta-btn,
  .mc-prod__card, .mc-prod__kicker, .mc-prod__amount,
  .mc-prod__name, .mc-prod__desc, .mc-prod__use, .mc-prod__use dd { transition: none !important; }
  .mc-story:hover .mc-story__shot img,
  .mc-cert:hover .mc-cert__shot img,
  .mc-hero__side--tint:hover { transform: none; }
}

/* FAQ : 질문 글자와 답변 글자의 시작점을 맞춥니다.
   summary 에만 gap 이 있어 질문이 15px 더 들어가 있었습니다.
   간격은 뱃지의 margin-right 로만 주고 gap 은 0 으로 둡니다. */
.mc-faq summary { gap: 0; }
.mc-faq__q, .mc-faq__aBadge { margin-right: var(--space-3); }

/* 모바일 히어로 : 위 여백이 72px 이나 되어 카드가 한참 아래에서 시작했습니다 */
@media (max-width: 768px) {
  .mc-hero { padding-block: var(--space-6) var(--space-16); }
}

/* 모바일 가로 스와이프 : 카드 폭을 확실히 고정합니다.
   ★ .mc-need__item 의 flex: none 이 .mc-need__list > * 의 flex-basis 를 이겨서
     카드가 '글 길이만큼' 넓어졌습니다(05번만 유독 넓었던 이유).
     자식 선택자를 클래스까지 붙여 우선순위를 올립니다. */
@media (max-width: 768px) {
  .mc-need__list > .mc-need__item,
  .mc-prod__grid > .mc-prod__card,
  .mc-flow__group > .mc-flow__step,
  .mc-trust__grid > .mc-story,
  .mc-certs__grid > .mc-cert { flex: 0 0 82%; }
  .mc-certs__grid > .mc-cert { flex-basis: 88%; }
}

/* ═══ 41. 상품 탭 (모바일 전용) ═══ */
.mc-prod__tabs { display: none; }

/* ═══ 42. 중간 CTA 밴드 버튼에 설명 한 줄 ═══ */
.mc-band__btn { align-items: center; }
.mc-band__btn-txt { display: block; text-align: left; min-width: 0; }
.mc-band__btn-txt b { display: block; font-weight: 800; font-size: clamp(14px, 1.6vw, 17px); line-height: 1.3; }
.mc-band__btn-txt small { display: block; margin-top: 2px; font-size: clamp(11px, 1.2vw, 13px); font-weight: 600; line-height: 1.4; }
.mc-band__btn--kakao small { color: var(--kakao-ink); opacity: .7; }
.mc-band__btn--tel small { color: var(--brand-ink); opacity: .72; }

@media (max-width: 900px) {
  /* 밴드 : 가운데 정렬 + 버튼을 위아래로 세워 설명이 살아 있게 */
  .mc-band__inner { flex-direction: column; align-items: center; text-align: center; }
  .mc-band__copy { text-align: center; }
  .mc-band__lead { justify-content: center; }
  .mc-band__cta { width: 100%; flex-direction: column; }
  .mc-band__btn { width: 100%; justify-content: flex-start; padding: 16px 20px; }
}

@media (max-width: 768px) {
  /* ─── 상품 : 탭으로 하나씩 ─── */
  .mc-prod__tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
    max-width: var(--content-w); margin: clamp(24px, 4vw, 40px) auto 0;
    background: var(--surface-alt); border-radius: 999px; padding: 5px;
  }
  .mc-prod__tab {
    border: none; cursor: pointer; font: inherit;
    background: none; color: var(--ink-500);
    border-radius: 999px; padding: 12px 8px;
    font-size: 14px; font-weight: 800;
    transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
  }
  .mc-prod__tab.is-on { background: var(--brand-600); color: var(--on-dark); }

  /* 탭이 있으니 옆으로 넘기지 않습니다 — 고른 카드 한 장만 */
  .mc-prod__grid {
    display: block; overflow: visible; margin-inline: 0;
    padding: var(--space-3) 0 0;      /* 탭 바로 아래에 붙입니다 */
    margin-top: 0;
  }
  .mc-prod__grid > .mc-prod__card { display: none; flex: none; }
  /* 탭을 누르면 카드가 아래에서 부드럽게 올라옵니다 */
  .mc-prod__grid > .mc-prod__card.is-on {
    display: flex;
    animation: prod-swap var(--dur-base) var(--ease-out) both;
  }
  @keyframes prod-swap {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  /* 탭 자체도 눌린 느낌을 줍니다 */
  .mc-prod__tab:active { transform: scale(var(--press)); }
  .mc-prod__tabs { margin-bottom: 0; }

  /* ─── 진행 절차 : 안쪽이 따로 스크롤되던 것 ───
     .mc-flow 는 '묶음 + 화살표 + 입금' 세 덩어리라 옆으로 넘길 대상이 아닙니다.
     스와이프 규칙에 걸려 안에서 가로 스크롤이 생겼습니다. 세로로 쌓습니다. */
  .mc-flow {
    display: grid; grid-template-columns: 1fr; gap: var(--space-4);
    overflow: visible; margin-inline: 0; padding: 0;
  }
  .mc-flow > * { flex: none; }
  .mc-flow__group { display: grid; grid-template-columns: 1fr; }
  .mc-flow__group > .mc-flow__step { flex: none; }

  /* ─── 방패 아이콘이 혼자 한 줄로 떨어지던 것 ───
     좁은 화면에서는 아이콘을 빼고 글만 둡니다. */
  .mc-flow__usp { display: block; }
  .mc-flow__usp .ico { display: none; }
}

/* ═══ 43. 섹션 라벨(eyebrow)은 언제나 제목 위 가운데 ═══
   히어로 안의 라벨만 예외입니다(그 카드는 왼쪽 정렬). */
.mc-prod > .container > .mc-eyebrow,
.mc-trust > .container > .mc-eyebrow,
.mc-certs > .container > .mc-eyebrow,
.mc-need__head > .mc-eyebrow {
  display: block; width: fit-content; margin-inline: auto;
}
.mc-prod, .mc-trust, .mc-certs { text-align: center; }

@media (max-width: 768px) {
  /* 사칭 주의 : 모바일에서는 가운데로 모읍니다 */
  .mc-certs__warn .mc-warn__box,
  .mc-warn__box { align-items: center; text-align: center; }
  .mc-warn__list li { padding-left: 0; text-align: center; }
  .mc-warn__list li::before { display: none; }
  .mc-warn__list li + li { margin-top: var(--space-4); }
}

/* ═══ 44. 사칭 주의 : PC 에서도 가운데 ═══ */
.mc-certs__warn .mc-warn__box,
.mc-warn__box {
  flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-5);
}
.mc-warn__list { max-width: 46em; margin-inline: auto; }
.mc-warn__list li { padding-left: 0; text-align: center; }
.mc-warn__list li::before { display: none; }
.mc-warn__list li + li { margin-top: var(--space-3); }

/* ═══ 45. 마지막 CTA : 친절한 상담 버튼 ═══ */
.mc-cta__btns { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.mc-cta__btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 16px 26px; border-radius: var(--radius-btn);
  text-align: left; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.mc-cta__btn:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-3); }
.mc-cta__btn:active { transform: scale(var(--press)); }
.mc-cta__btn img { width: 26px; height: 26px; flex: none; }
.mc-cta__btn .ico { width: 26px; height: 26px; flex: none; }
.mc-cta__btn b { display: block; font-weight: 800; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.3; }
.mc-cta__btn small { display: block; margin-top: 2px; font-size: clamp(11px, 1.2vw, 13px); font-weight: 600; line-height: 1.4; }
.mc-cta__btn--kakao { background: var(--kakao-bg); color: var(--kakao-ink); }
.mc-cta__btn--kakao small { opacity: .7; }
.mc-cta__btn--tel { background: var(--surface); color: var(--brand-ink); }
.mc-cta__btn--tel small { opacity: .72; }

@media (max-width: 768px) {
  .mc-cta__btns { flex-direction: column; }
  .mc-cta__btn { width: 100%; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-prod__grid > .mc-prod__card.is-on { animation: none; }
}

/* 고객 이야기 : 사례 카드와 숫자 상자가 너무 떨어져 있었습니다.
   (안내문 두 줄을 지우면서 그 자리가 빈 공간으로 남았습니다) */
.mc-trust__stats { margin-top: clamp(16px, 2vw, 28px); }
@media (max-width: 768px) {
  .mc-trust__grid { padding-bottom: var(--space-2); }
  .mc-trust__stats { margin-top: var(--space-4); }
}

/* 고객 이야기 안 소제목 : 섹션 제목보다 한 단계 작게, 하지만 확실한 제목으로.
   설명 한 줄이 따라붙어 위 단락과 짜임이 같아집니다. */
.mc-trust__sub {
  color: var(--ink-900); font-weight: 800;
  font-size: clamp(20px, 2.6vw, 30px); line-height: 1.35;
  letter-spacing: 0; text-align: center;
  margin-top: clamp(40px, 5vw, 72px);
}
.mc-trust__sub + .mc-lead { margin-top: var(--space-3); }

/* ═══ 46. 사칭 주의 : 제목·본문·각주의 층을 되살립니다 ═══
   가운데로 모으면서 간격을 다 똑같이 벌려놨더니
   제목인지 항목인지 구분이 사라졌습니다. 세 층을 다시 나눕니다. */
.mc-warn__title {
  font-size: clamp(18px, 2.2vw, 25px);
  line-height: 1.35;
  margin-bottom: clamp(18px, 2vw, 26px);   /* 제목과 본문 사이는 넓게 */
}
.mc-warn__list {
  display: inline-block;                    /* 목록 자체를 한 덩어리로 */
  text-align: left;                         /* 항목 글은 왼쪽 정렬이 읽기 쉽습니다 */
  max-width: 34em;
}
.mc-warn__list li {
  padding-left: var(--space-5); text-align: left;
  font-size: clamp(13px, 1.4vw, 15px); line-height: 1.55;
  opacity: .95;
}
.mc-warn__list li::before {                 /* 불릿을 되살립니다 */
  display: block; content: ""; position: absolute;
  left: 2px; top: .6em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--on-dark); opacity: .7;
}
.mc-warn__list li + li { margin-top: var(--space-2); }   /* 항목끼리는 촘촘하게 */
.mc-warn__foot {
  margin-top: clamp(18px, 2vw, 26px);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .25);        /* 각주는 선으로 끊어줍니다 */
  font-size: clamp(12px, 1.3vw, 14px); opacity: .78;
}
.mc-warn__box { gap: var(--space-4); }

/* ═══ 47. FAQ : 흰 상자 없이 ═══
   바로 위 '믿고 맡기셔도 됩니다'가 이미 흰 상자라 두 개가 붙어 반복돼 보였습니다.
   FAQ 는 상자를 벗기고 항목을 흰 카드로 띄웁니다. */
.mc-faq { background: none; padding-block: clamp(40px, 5vw, 80px); }
.mc-faq > .container { background: none; padding-block: 0; max-width: var(--container-max); }
/* 다른 단락과 같은 폭으로 (820px 로 좁히면 혼자만 안쪽으로 들어가 보입니다) */
.mc-faq__list { max-width: var(--content-w); margin-inline: auto; }
.mc-faq details {
  background: var(--surface);
  border-bottom: none;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.mc-faq details:hover { background: var(--surface); box-shadow: var(--shadow-3); }
.mc-faq details[open] { box-shadow: var(--shadow-3); }
.mc-faq summary { padding: var(--space-5) var(--space-6); }
.mc-faq__a { padding: 0 var(--space-6) var(--space-5); }

/* ═══ 48. 사칭 주의 : 톤을 낮춥니다 ═══
   진한 붉은 면은 페이지에서 혼자 튀어서 '광고 경고'처럼 보였습니다.
   연한 붉은 면 + 진한 붉은 제목으로 낮춥니다.
   주의색은 유지하되 소리를 줄이는 방식입니다(은행 고지문 톤). */
.mc-certs__warn .mc-warn__box,
.mc-warn__box {
  background: var(--accent-50);
  padding: clamp(28px, 3vw, 44px);
}
.mc-warn__ico { background: var(--accent-600); }
.mc-warn__ico .ico { color: var(--on-dark); }
.mc-warn__title { color: var(--accent-600); }
.mc-warn__body {
  color: var(--ink-700); opacity: 1;
  max-width: 42em; margin-inline: auto;
  font-size: clamp(13px, 1.5vw, 16px); line-height: 1.8;
  text-align: center;
}
.mc-warn__body b { color: var(--ink-900); font-weight: 800; }
.mc-warn__body a { color: var(--accent-600); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
/* 목록·각주는 더 이상 쓰지 않습니다 (한 문단으로 합쳤습니다) */
.mc-warn__list, .mc-warn__foot { display: none; }

@media (max-width: 768px) {
  .mc-warn__body br { display: none; }   /* 좁은 화면에선 자연스럽게 흐르게 */
  .mc-warn__body { line-height: 1.75; }
}

/* ═══ 49. 후기 카드 : 기록만 담백하게 ═══
   상담 중에 상황·진행·결과를 다 적어 둘 수는 없습니다.
   실제로 남는 건 '어떤 상품으로 얼마를, 몇 시에' 정도입니다. */
.mc-story__tag {
  display: inline-block; margin-bottom: var(--space-3);
  background: var(--brand-50); color: var(--brand-ink);
  border-radius: 999px; padding: 6px 13px;
  font-size: clamp(12px, 1.3vw, 14px); font-weight: 700;
}
.mc-story__amount {
  color: var(--ink-900); font-weight: 800; line-height: 1.1;
  font-size: clamp(24px, 2.8vw, 34px); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.mc-story__time {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--ink-500); font-size: clamp(12px, 1.3vw, 15px);
}
.mc-story__time .ico { width: 17px; height: 17px; color: var(--brand-500); flex: none; }

/* ═══ 50. 드래그하면 파랗게 영역이 잡히던 것 ═══
   손가락으로 옆으로 넘기려는데 글자가 선택되어 파랗게 칠해졌습니다.
   ★ 누르고 넘기는 것들만 선택을 끕니다.
     FAQ 답변·푸터의 사업자 정보는 복사할 수 있어야 하므로 그대로 둡니다. */
.mc-need__list, .mc-need__item,
.mc-prod__grid, .mc-prod__card, .mc-prod__tabs, .mc-prod__tab,
.mc-flow, .mc-flow__group, .mc-flow__step, .mc-flow__final,
.mc-trust__grid, .mc-story,
.mc-certs__grid, .mc-cert,
.mc-hero__side, .mc-talk, .mc-talk__btn,
.mc-band__cta, .mc-band__btn,
.mc-cta__btns, .mc-cta__btn,
.header, .mc-eventbar, .site-cta, .btn,
.mc-faq summary {
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;   /* 누를 때 회색 사각형이 번쩍이던 것 */
}
/* 사진은 길게 눌러도 '이미지 저장' 메뉴가 뜨지 않게, 끌어당겨지지도 않게 */
.mc-need__item img, .mc-story__shot img, .mc-cert__shot img,
.mc-talk__ico img, .mc-band__btn img, .mc-cta__btn img, .header__logo img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none; user-select: none;
  pointer-events: none;
}
/* 링크·버튼 자체는 눌려야 하므로 되살립니다 */
.mc-talk__btn, .mc-band__btn, .mc-cta__btn, .header__logo { pointer-events: auto; }

/* ═══ 51. 중간 CTA 밴드 : 두 줄 제목을 한 덩어리로 ═══
   크기·줄간이 제각각이라 두 줄이 따로 노는 것처럼 보였습니다.
   같은 크기·같은 줄간으로 묶고 사이 간격만 아주 좁힙니다. */
.mc-band__title,
.mc-band__lead {
  font-size: clamp(20px, 2.8vw, 32px);
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: 0;
}
.mc-band__lead { margin-top: 2px; }
.mc-band__sub { margin-top: var(--space-5); font-size: clamp(13px, 1.4vw, 16px); line-height: 1.6; }

@media (max-width: 768px) {
  .mc-band__title, .mc-band__lead { font-size: clamp(19px, 5.2vw, 24px); }
  .mc-band__lead { gap: var(--space-2); }
  .mc-band__arrow { width: 20px; height: 20px; }
  .mc-band__sub { margin-top: var(--space-4); }
  /* 버튼 안 두 줄도 숨 쉴 자리를 줍니다 */
  .mc-band__btn { padding: 15px 18px; gap: var(--space-3); }
  .mc-band__btn-txt small { margin-top: 3px; }
}

/* ═══ 52. 나란히 놓인 CTA 버튼은 크기를 맞춥니다 ═══
   내용 길이에 따라 폭이 달라지면 한 쌍으로 안 보입니다.
   같은 줄에 놓인 버튼은 폭·높이를 같게 잡습니다. */
.mc-talk,
.mc-band__cta,
.mc-cta__btns {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3); align-items: stretch;
}
.mc-band__cta { max-width: 460px; }
.mc-cta__btns { max-width: 520px; margin-inline: auto; }
.mc-talk__btn, .mc-band__btn, .mc-cta__btn { width: 100%; height: 100%; }
/* 글이 짧은 쪽도 같은 높이가 되도록 세로 가운데.
   글이 짧은 버튼(전화 상담)은 오른쪽이 비어 보여서
   아이콘+글자 덩어리를 가로도 가운데로 모읍니다. */
.mc-band__btn, .mc-cta__btn { align-items: center; justify-content: center; }

@media (max-width: 900px) {
  .mc-talk, .mc-band__cta, .mc-cta__btns { grid-template-columns: 1fr; }
  .mc-band__cta, .mc-cta__btns { max-width: none; }
}

/* ═══ 53. 모바일 헤더 : 이벤트 버튼이 메뉴 자리로, 메뉴는 햄버거로 ═══
   PC : 지금처럼 상단 띠 배너 + 가로 메뉴 그대로.
   모바일 : 띠 배너를 없애고 그 문구를 헤더 안 파란 버튼으로 옮깁니다.
            메뉴 4개는 햄버거(≡)를 눌렀을 때 오른쪽 서랍으로 열립니다.
            여닫는 동작은 js/site.js 의 setupMobileMenu() 가 이미 처리합니다. */
.header__cta, .header__burger { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 768px) {
  /* 띠 배너 내용이 헤더 버튼으로 들어갔으므로 배너 자체는 숨깁니다 */
  .mc-eventbar { display: none; }

  /* 파란 상담 버튼 : 로고와 햄버거 사이, 오른쪽에 붙습니다
     ★ 로고에 order:1 이 걸려 있어(위 '헤더 1단' 규칙) 순서를 명시합니다 :
       로고(1) → 버튼(2) → 햄버거(3) */
  .header__cta {
    display: inline-flex; align-items: center; gap: 5px;
    order: 2;
    margin-left: auto; flex: none;
    background: var(--brand-600); color: var(--on-brand);
    font-weight: 800; font-size: 12.5px; line-height: 1; white-space: nowrap;
    padding: 10px 13px; border-radius: 999px;
  }
  .header__cta .arrow { font-weight: 800; }

  /* 햄버거 버튼 : 줄 3개 (순서는 맨 오른쪽 = 3) */
  .header__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    order: 3;
    width: 38px; height: 38px; flex: none;
    background: none; border: 0; padding: 9px 8px; cursor: pointer;
  }
  .header__burger span { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--ink-900); }

  /* 메뉴 : 오른쪽에서 미끄러져 나오는 서랍 */
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(76vw, 300px); min-width: 0; margin-left: 0;
    background: var(--surface);
    z-index: 1200;
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    padding: 68px 22px 22px;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .14);
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; justify-content: flex-start; gap: 0; overflow: visible; }
  .nav__list a {
    display: block; padding: 15px 2px;
    font-size: 16px; font-weight: 700;
    border-bottom: 1px solid var(--line);
  }

  /* 서랍 안 닫기(X) 버튼 */
  .nav__close {
    display: grid; place-items: center;
    position: absolute; top: 14px; right: 14px;
    width: 40px; height: 40px;
    font-size: 28px; line-height: 1;
    background: none; border: 0; cursor: pointer; color: var(--ink-900);
  }

  /* 서랍 뒤 어두운 막 : 누르면 닫힙니다 */
  .nav-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(10, 15, 40, .45);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease);
    z-index: 1100;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

  /* 헤더는 z-index 1000이라 1100짜리 막에 가려집니다.
     메뉴가 열린 동안만 헤더(와 그 안의 서랍)를 막 위로 올립니다. */
  .header.is-menu-open { z-index: 1300; }
}

/* ═══ 54. 선택된 상품 카드 : 금속 광택이 스치듯 지나가는 효과 ═══
   파란(선택된) 카드 위로 밝은 빛줄기가 왼쪽→오른쪽으로 지나갑니다.
   일정한 속도가 아니라 빠르게 출발해 천천히 빠져나가도록
   cubic-bezier 로 가속·감속을 줍니다. 한 번 지나가고 잠시 쉽니다. */
.mc-prod__card { position: relative; overflow: hidden; }
.mc-prod__card::after {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: 0;
  width: 42%;
  /* 끝이 선처럼 끊겨 보이지 않게 : 띠 전체(0→100%)에 걸쳐 서서히 밝아졌다 어두워집니다.
     블러를 살짝 얹어 경계를 한 번 더 뭉갭니다. */
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, .06)  30%,
    rgba(255, 255, 255, .32)  50%,
    rgba(255, 255, 255, .06)  70%,
    rgba(255, 255, 255, 0)    100%);
  filter: blur(5px);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
  opacity: 0;                       /* 흰 카드에서는 보이지 않게 */
}
.mc-prod__card--fill::after {
  opacity: 1;
  /* 곡선을 세게 : 아주 천천히 나타났다가 → 중간에 확 지나가고 → 끝에서 길게 감속
     빛이 실제로 지나가는 시간은 약 4.9초 (한 번 지나가고 2초쯤 쉼) */
  animation: mc-card-shine 7s cubic-bezier(.9, 0, .1, 1) infinite;
}
@keyframes mc-card-shine {
  0%   { transform: translateX(-140%) skewX(-18deg); }
  70%  { transform: translateX(340%) skewX(-18deg); }
  100% { transform: translateX(340%) skewX(-18deg); }  /* 나머지 시간은 쉼 */
}

/* ═══ 55. 성장 그래프 : 올해만 도드라지게 ═══
   지난해 막대들은 연한 톤으로 낮추고, 올해(21만+) 숫자는 한 단계 키웁니다. */
.mc-trust .d-growth__bar:not(.d-growth__bar--now) .d-growth__col {
  background: linear-gradient(180deg, var(--brand-100), var(--brand-400));
}
.mc-trust .d-growth__bar--now .d-growth__val { font-size: clamp(18px, 2.4vw, 26px); }

/* ═══ 56. STEP 04 '입금 완료' : 빛이 퍼져나가는 강조 ═══
   상자 테두리에서 파란 빛무리가 바깥으로 붕— 하고 퍼졌다 사라지기를
   반복합니다. 두 겹을 시간차(절반)로 돌려 계속 물결치는 느낌을 줍니다. */
.mc-flow__final { position: relative; }
.mc-flow__final::before,
.mc-flow__final::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-xl);
  pointer-events: none;
  animation: mc-final-pulse 2.8s ease-out infinite;
}
.mc-flow__final::after { animation-delay: 1.4s; }
@keyframes mc-final-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(66, 98, 255, .45); }
  75%  { box-shadow: 0 0 0 26px rgba(66, 98, 255, 0); }
  100% { box-shadow: 0 0 0 26px rgba(66, 98, 255, 0); }
}

/* ═══ 57. 첫 방문 팝업 : 카톡 고객센터 프로필 확인 안내 ═══
   사칭(가짜 고객센터) 피해를 막기 위한 안내로 내용을 바꿨습니다.
   왼쪽 = 진짜 프로필(로고 + 초록 O), 오른쪽 = 가짜(회색 실루엣 + 빨강 X). */
.d-pop__warnico {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin-inline: auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  color: var(--danger);
}
.d-pop__warnico .ico { width: 32px; height: 32px; }
/* 이 아이콘의 세모는 흐리게 하지 않고 꽉 채웁니다 (경고는 또렷해야 합니다) */
.d-pop__warnico .b { fill-opacity: 1; }

.d-pop__compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  margin-top: var(--space-6);
}
.d-pop__profile b { display: block; margin-top: var(--space-3); font-size: var(--fs-sm); font-weight: 800; }
.d-pop__profile--ok b { color: var(--success); }
.d-pop__profile--no b { color: var(--danger); }

.d-pop__avatar {
  position: relative;
  display: grid; place-items: center;
  width: min(104px, 100%); aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
}
/* 실제 카톡 프로필 사진이라 원에 꽉 채웁니다 */
.d-pop__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.d-pop__avatar--none {
  border: 2px dashed var(--line);
  box-shadow: none;
  background: var(--surface-alt);
  color: var(--ink-300, #b9bfca);
  /* overflow:hidden 을 쓰면 모서리의 X 배지까지 잘립니다 — 실루엣은 원 안에 들어오는 크기라 자를 필요가 없습니다 */
}
.d-pop__avatar--none svg { width: 58%; height: 58%; margin-top: 6%; }
.d-pop__mark {
  position: absolute; top: -4px; right: -4px;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: #fff; font-style: normal; font-weight: 800; font-size: 13px; line-height: 1;
  border: 2px solid var(--surface);
}
.d-pop__mark--o { background: var(--success); }
.d-pop__mark--x { background: var(--danger); }

/* 사칭 주의 문구 : 연한 빨강 상자로 또렷하게 */
.d-pop__scam {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  color: var(--ink-700);
  font-size: var(--fs-sm);
  line-height: 1.6;
  /* 단어 중간에서 줄이 끊기지 않게 (한국어 어절 단위 줄바꿈) */
  word-break: keep-all;
}
.d-pop__scam strong {
  display: block; margin-bottom: 4px;
  color: var(--danger); font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  .mc-prod__card--fill::after { animation: none; opacity: 0; }
  .mc-flow__final::before, .mc-flow__final::after { animation: none; box-shadow: none; }
  .nav, .nav-backdrop { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   히어로 리디자인 : 가운데 정렬 · 화이트~연라벤더 · 모델 사진
   ------------------------------------------------------------
   시안(피니페이형)을 참고한 원컬럼 브랜드 히어로입니다.
   - 배경 : 위쪽 연라벤더 → 아래쪽 화이트
   - 헤드라인 : 첫 단어만 블루(em), 나머지는 딥네이비
   - 인물 뒤 : 부드러운 원형 글로우
   이 블록이 파일 맨 끝이라 앞의 '벤토/사진막' 히어로 규칙을 전부 덮습니다.
   ═══════════════════════════════════════════════════════════ */
.mc-hero--center {
  position: relative;
  isolation: isolate;
  text-align: center;
  overflow: hidden;
  padding-block: clamp(52px, 6.5vw, 100px) 0;
  /* ★ 색상은 첨부 캡처(스니핏형)에서 그대로 추출한 hex 값입니다.
       - 배경  : #ffffff (순백)
       - 헤드라인: #17181c (니어블랙)
       - 포인트 : #3d5afe (블루)
       - 서브   : #6b7280 (그레이) */
  --hero-bg:     #ffffff;
  --hero-ink:    #17181c;
  --hero-accent: #685df9;
  --hero-sub:    #6b7280;
  background: var(--hero-bg);
}
/* 기존 히어로의 어두운 배경 사진막(::before)을 제거합니다 */
.mc-hero--center::before { content: none; background: none; }

/* grid 였던 inner 를 세로 1열 중앙 정렬로 되돌립니다 */
.mc-hero--center .mc-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-template-columns: none;
  grid-template-rows: none;
  gap: 0;
}

.mc-hero--center .mc-hero__head { max-width: 820px; }

.mc-hero--center .mc-hero__title {
  color: var(--hero-ink);
  font-weight: 800;
  /* 살짝 축소 : 최대 60 → 48px */
  font-size: clamp(26px, 4.6vw, 48px);
  line-height: 1.22;
  letter-spacing: -.035em;
  margin: 0 0 var(--space-5);
}
/* em = 강조어(비상금 한도) — 파란 그라데이션(밝은 블루 → 딥 인디고).
   background-clip:text 로 글자 안에만 그라데이션이 채워집니다.
   미지원 브라우저는 color(단색 블루)로 자연스럽게 폴백됩니다. */
.mc-hero--center .mc-hero__title em {
  font-style: normal;
  text-decoration: none;
  color: var(--hero-accent);                 /* 폴백 단색 */
  background: linear-gradient(100deg, #8676fa 0%, #685df9 45%, #4a34c9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 그라데이션이 글자 폭에 딱 맞게 */
  background-size: 100% 100%;
}

.mc-hero--center .mc-hero__sub {
  color: var(--hero-sub);
  /* 살짝 축소 : 최대 21 → 18px */
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}

.mc-hero--center .mc-hero__model {
  color: var(--ink-700);
  font-size: clamp(12px, 1.35vw, 15px);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}
.mc-hero--center .mc-hero__model b {
  color: var(--brand-ink);
  font-weight: 800;
  margin-left: 6px;
  letter-spacing: .04em;
}

/* 인물 컷 + 뒤 글로우 */
.mc-hero--center .mc-hero__figure {
  position: relative;
  margin: clamp(24px, 3.6vw, 48px) auto 0;
  width: min(660px, 90%);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.mc-hero--center .mc-hero__glow {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: 96%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,.95) 0%,
    rgba(225,229,250,.7) 40%,
    rgba(225,229,250,0) 70%);
}
.mc-hero--center .mc-hero__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* placeholder.svg 로 대체될 때 너무 밋밋하지 않게 살짝 둥글게 */
  border-radius: 12px;
}

@media (max-width: 768px) {
  .mc-hero--center { padding-block: clamp(36px, 8vw, 64px) 0; }
  .mc-hero--center .mc-hero__inner { text-align: center; }
  /* 모바일 : 제목은 크게 유지 + 모델도 다시 키워 세로 길이 확보 */
  .mc-hero--center .mc-hero__figure { width: min(470px, 90%); }
  .mc-hero--center .mc-hero__title { font-size: clamp(31px, 8.6vw, 42px); }
}

/* ═══════════════════════════════════════════════════════════
   회사 연혁 : 다크 배경 가로 타임라인
   ------------------------------------------------------------
   - 배경 : 니어블랙 (#17181b)
   - 상단 팀 사진(라운드) → 제목 → 가로 타임라인
   - 정거장 5개(2025~2020, 최신이 왼쪽). 위/아래 번갈아 배치.
   - 최신(2025) 점만 노랑, 나머지 파랑.
   ═══════════════════════════════════════════════════════════ */
.mc-history {
  --hs-bg:    #17181b;   /* 섹션 배경 */
  --hs-year:  #9d8ffb;   /* 연도 라벨(보라, 다크 배경용) */
  --hs-desc:  #eceef2;   /* 설명 글자 */
  --hs-rail:  rgba(255,255,255,.16);
  --hs-dot:   #685df9;   /* 보라 점 */
  --hs-now:   #f6b21b;   /* 노랑 점(최신) */
  background: var(--hs-bg);
  padding-block: clamp(48px, 7vw, 96px);
}

/* 상단 팀 사진 */
.mc-history__photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: #0e0f12;
}
.mc-history__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

.mc-history__title {
  color: #fff;
  font-weight: 500;                 /* ① 훨씬 얇게 (기존 800 → 500) */
  font-size: clamp(22px, 3.2vw, 40px);
  line-height: 1.3;
  letter-spacing: -.02em;
  margin: clamp(28px, 4vw, 52px) 0 clamp(36px, 5vw, 64px);
}

/* ── 타임라인 격자 : 5열 × [위 / 점줄 / 아래] 3행 ──
   윗줄이 auto 공유행이라 다섯 정거장의 점이 자동으로 한 줄에 맞습니다. */
.mc-history__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto 22px auto;
  column-gap: clamp(12px, 1.6vw, 28px);
  align-items: start;
}

/* 가로 레일 : 첫 점 ~ 마지막 점(1~5 격자선) */
.mc-history__rail {
  grid-row: 2;
  grid-column: 1 / 5;
  align-self: center;
  height: 2px;
  background: var(--hs-rail);
}

/* 정거장 점 : 각 열의 왼쪽 격자선 중앙에 */
.mc-history__dot {
  grid-row: 2;
  align-self: center;
  justify-self: start;
  transform: translateX(-50%);
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--hs-dot);
  position: relative; z-index: 1;
}
.mc-history__dot--now {
  background: var(--hs-now);
  box-shadow: 0 0 0 5px rgba(246, 178, 27, .18);
}

/* 정거장 글 : 왼쪽 세로선으로 점과 이어짐 */
.mc-history__item {
  border-left: 2px solid var(--hs-rail);
  padding-left: clamp(12px, 1vw, 16px);
  /* ② 각 줄이 어중간하게 꺾여 한 칸 내려가지 않도록, 글줄 폭에 맞춰 늘렸습니다.
     칸을 넘치는 만큼은 옆(빈) 칸 쪽으로 자연스럽게 이어집니다. */
  width: max-content;
  max-width: min(440px, 40vw);
}
.mc-history__item--top    { grid-row: 1; align-self: end;   padding-bottom: 18px; }
.mc-history__item--bottom { grid-row: 3; align-self: start; padding-top: 18px; }

.mc-history__year {
  display: block;
  color: var(--hs-year);
  font-weight: 800;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: .01em;
  margin-bottom: 8px;
}
.mc-history__desc {
  color: var(--hs-desc);
  font-weight: 400;                 /* ② 두 단계 얇게 (기존 600 → 400) */
  font-size: clamp(13px, 1.35vw, 15px);
  line-height: 1.6;
  margin: 0;
}

/* ── 모바일 : 가로 타임라인을 세로 타임라인으로 ── */
@media (max-width: 768px) {
  /* 세로형 : 각 항목의 왼쪽 테두리가 이어져 하나의 세로선이 됩니다.
     DOM 순서가 이미 최신→과거라 연도 순서가 그대로 유지됩니다. */
  .mc-history__timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 8px;
  }
  .mc-history__rail, .mc-history__dot { display: none; }
  .mc-history__item {
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: stretch;
    width: auto;
    max-width: none;
    position: relative;
    border-left: 2px solid var(--hs-rail);
    padding: 0 0 clamp(28px, 6vw, 40px) 26px;
  }
  /* 마지막(가장 과거) 항목은 아래로 뻗는 선을 끊습니다 */
  .mc-history__item:last-child { border-left-color: transparent; padding-bottom: 4px; }
  /* 선 위에 얹히는 점 (배경색 링으로 선과 띄웁니다) */
  .mc-history__item::before {
    content: "";
    position: absolute; left: -7px; top: 3px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--hs-dot);
    box-shadow: 0 0 0 3px var(--hs-bg);
  }
  /* 최신(2025) 점만 노랑 */
  .mc-history__item--now::before { background: var(--hs-now); }
  .mc-history__year { margin-bottom: 4px; }
}

/* ═══════════════════════════════════════════════════════════
   두 번째 섹션 : 아이콘 카드 리스트 (보라 배경 + 흰 카드)
   ------------------------------------------------------------
   레퍼런스처럼 보라 배경 위에 흰 라운드 카드를 세로로 쌓고,
   각 카드 왼쪽에 브랜드 보라 아이콘 칩을 둬 로고색이 도드라지게 합니다.
   (기존 mc-need 아코디언 규칙은 마크업이 바뀌어 적용되지 않습니다)
   ═══════════════════════════════════════════════════════════ */
.mc-need--cards {
  /* 상단=파랑(#7686f9) → 하단=보라(#8b6df9) */
  background: linear-gradient(180deg, #7686f9 0%, #8b6df9 100%);
  padding-block: clamp(52px, 7vw, 104px);
}
.mc-need--cards .mc-need__head {
  text-align: center; max-width: 44em;
  margin: 0 auto clamp(28px, 4vw, 48px);
}
.mc-need--cards .mc-need__head .mc-eyebrow {
  display: inline-block; margin-inline: auto;
  background: rgba(255,255,255,.18);
  color: #fff;
}
.mc-need--cards .mc-need__title { color: #fff; font-weight: 700; }
.mc-need--cards .mc-need__title em { color: #fff; }   /* 보라 배경이라 강조도 흰색 */
.mc-need--cards .mc-need__desc { color: rgba(255,255,255,.86); }

/* 카드 목록 */
.mc-cards {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 520px;
  display: flex; flex-direction: column;
  gap: clamp(12px, 1.6vw, 18px);
}
.mc-card {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 22px);
  background: #fff;
  border-radius: 18px;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px);
  box-shadow: 0 12px 32px rgba(28, 18, 88, .18);
}

/* 아이콘 칩 — 브랜드 보라를 도드라지게 */
.mc-card__ico {
  flex: none;
  width: clamp(42px, 5vw, 50px); height: clamp(42px, 5vw, 50px);
  display: grid; place-items: center;
}
.mc-card__ico svg { width: 100%; height: 100%; display: block; }

.mc-card__txt { min-width: 0; }
.mc-card__txt b {
  display: block; color: var(--ink-900);
  font-weight: 700; font-size: clamp(16.5px, 2.1vw, 20px); line-height: 1.35;
}
.mc-card__txt span {
  display: block; margin-top: 4px;
  color: var(--ink-500); font-size: clamp(13px, 1.55vw, 15.5px); line-height: 1.5;
}

@media (max-width: 480px) {
  .mc-card { align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   진행 4단계 : 폰 사진 카드 + 흰 카드 세로 번호 타임라인
   ------------------------------------------------------------
   연라벤더 배경 위에 폰 사진 → 흰 카드 세로 타임라인(1~4단계).
   마지막 단계 배지만 보라로 강조합니다.
   (기존 mc-flow 규칙은 마크업이 바뀌어 적용되지 않습니다)
   ═══════════════════════════════════════════════════════════ */
/* 위로 갈수록 흰색 → 아래는 라벤더 */
.mc-steps--guide { background: linear-gradient(180deg, #ffffff 0%, #f3f2fc 40%, #eae9fb 100%); }
/* 기존 redesign 의 '흰 상자 컨테이너'를 해제하고 폭을 좁혀 가운데로 */
.mc-steps--guide > .container {
  background: none; border-radius: 0;
  /* 위아래 여백은 0, 좌우는 화면 끝에 붙지 않게 여백 유지 */
  padding: 0 clamp(18px, 5vw, 24px);
  max-width: 720px;
}
.mc-steps--guide .mc-h2 { color: var(--ink-900); }
.mc-steps--guide .mc-lead { color: var(--ink-500); }

/* 폰 사진 카드 */
.mc-guide__photo {
  margin: clamp(28px, 4vw, 48px) auto clamp(20px, 3vw, 30px);
  border-radius: 22px; overflow: hidden;
  aspect-ratio: 16 / 10; background: #dfe0f4;
  box-shadow: 0 14px 38px rgba(58, 46, 130, .14);
}
.mc-guide__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 흰 카드 안 세로 타임라인 */
.mc-guide__card {
  list-style: none; margin: 0;
  /* 세로로 더 길게 : 카드 위아래 여백을 키웠습니다 */
  padding: clamp(36px, 5vw, 60px) clamp(24px, 3vw, 44px);
  background: #fff; border-radius: 22px;
  box-shadow: 0 14px 38px rgba(58, 46, 130, .10);
}
.mc-guide__step {
  position: relative; display: grid;
  grid-template-columns: 34px 1fr; column-gap: clamp(14px, 2vw, 20px);
  /* 단계 사이 간격을 키워 세로로 길어지게 */
  padding-bottom: clamp(40px, 6vw, 68px);
}
.mc-guide__step:last-child { padding-bottom: 0; }
/* 배지끼리 잇는 세로 연결선 */
.mc-guide__step:not(:last-child)::before {
  content: ""; position: absolute; left: 17px; top: 38px; bottom: 0;
  width: 2px; background: #e6e7f1; transform: translateX(-50%);
}
.mc-guide__badge {
  align-self: start; position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: #eef0f6; color: #9298a6;
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
}
/* 마지막 단계만 보라 강조 */
.mc-guide__step--on .mc-guide__badge {
  background: var(--brand-500); color: #fff;
  box-shadow: 0 5px 14px rgba(104, 93, 249, .45);
}
.mc-guide__txt b {
  display: block; color: var(--ink-900);
  font-weight: 800; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.3;
}
.mc-guide__txt span {
  display: block; margin-top: 6px;
  color: var(--ink-500); font-size: clamp(13.5px, 1.5vw, 16px); line-height: 1.55;
}
.mc-steps--guide .mc-flow__usp { margin-top: clamp(24px, 3vw, 36px); }

/* ═══════════════════════════════════════════════════════════
   세 번째 섹션 리디자인 : 상품 비교 카드
   아이콘 헤더 + 큰 금액 + 체크리스트, 한도 큰 카드(신용카드)를 보라로 강조.
   기존 mc-prod 카드/탭 규칙은 마크업이 바뀌어 적용되지 않습니다.
   ═══════════════════════════════════════════════════════════ */
.mc-prod--v2 { background: none; padding-block: clamp(48px, 7vw, 96px); }
.mc-prod--v2 > .container { background: none; border-radius: 0; padding: 0 clamp(20px, 4vw, 28px); }

.mc-plan__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  max-width: 860px; margin: clamp(32px, 4vw, 52px) auto 0;
  align-items: stretch;
}
.mc-plan {
  position: relative; display: flex; flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 10px 30px rgba(40, 30, 100, .06);
  transition: transform .25s ease, background .25s ease,
              box-shadow .25s ease, border-color .25s ease;
}
/* ★ 마우스를 올린 카드가 보라색으로 변하고 살짝 커집니다 (글씨는 흰색으로 전환) */
.mc-plan:hover {
  border-color: transparent; color: #fff;
  background: linear-gradient(160deg, #7b6ffb 0%, #6355f6 100%);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 26px 50px rgba(88, 70, 230, .34);
}
.mc-plan:hover .mc-plan__type { color: #fff; }
.mc-plan:hover .mc-plan__amount i { color: rgba(255, 255, 255, .82); }
.mc-plan:hover .mc-plan__amount b { color: #fff; }
.mc-plan:hover .mc-plan__desc { color: rgba(255, 255, 255, .88); }
.mc-plan:hover .mc-plan__ico { background: rgba(255, 255, 255, .2); color: #fff; }
.mc-plan:hover .mc-plan__feats { border-top-color: rgba(255, 255, 255, .24); }
.mc-plan:hover .mc-plan__feats li { color: #fff; }
.mc-plan:hover .mc-plan__feats li::before { background: rgba(255, 255, 255, .26); color: #fff; }
@media (hover: none) {
  /* 터치 기기에서는 확대 없이 정적으로 */
  .mc-plan:hover { transform: none; }
}
/* 추천(신용카드) 카드 — 보라 그라데이션 + 살짝 띄움 */
.mc-plan__grid:not(:has(.mc-plan:hover)) .mc-plan--featured {
  border-color: transparent; color: #fff;
  background: linear-gradient(160deg, #7b6ffb 0%, #6355f6 100%);
  box-shadow: 0 22px 46px rgba(88, 70, 230, .34);
}
.mc-plan__badge {
  position: absolute; top: -13px; right: 22px;
  background: var(--hs-now, #f6b21b); color: #3a2b06;
  font-weight: 800; font-size: 12.5px;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
}
.mc-plan__head { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(14px, 2vw, 20px); }
.mc-plan__ico {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-vivid);
}
.mc-plan__grid:not(:has(.mc-plan:hover)) .mc-plan--featured .mc-plan__ico { background: rgba(255, 255, 255, .2); color: #fff; }
.mc-plan__ico .ico { width: 26px; height: 26px; }
.mc-plan__type { font-weight: 800; font-size: clamp(16px, 1.8vw, 19px); color: var(--ink-900); line-height: 1.25; }
.mc-plan__grid:not(:has(.mc-plan:hover)) .mc-plan--featured .mc-plan__type { color: #fff; }

.mc-plan__amount { margin: 2px 0 clamp(14px, 2vw, 18px); line-height: 1; }
.mc-plan__amount i { display: block; font-style: normal; font-size: 13px; color: var(--ink-500); margin-bottom: 8px; }
.mc-plan__grid:not(:has(.mc-plan:hover)) .mc-plan--featured .mc-plan__amount i { color: rgba(255, 255, 255, .82); }
.mc-plan__amount b {
  font-size: clamp(34px, 5vw, 48px); font-weight: 800; letter-spacing: -.02em;
  color: var(--brand-ink); font-variant-numeric: tabular-nums;
}
.mc-plan__grid:not(:has(.mc-plan:hover)) .mc-plan--featured .mc-plan__amount b { color: #fff; }
.mc-plan__amount b span { font-size: .46em; font-weight: 700; margin-left: 3px; letter-spacing: 0; }

.mc-plan__desc {
  color: var(--ink-500); font-size: clamp(13.5px, 1.5vw, 15px); line-height: 1.55;
  margin: 0 0 clamp(16px, 2vw, 20px);
}
.mc-plan__grid:not(:has(.mc-plan:hover)) .mc-plan--featured .mc-plan__desc { color: rgba(255, 255, 255, .88); }

.mc-plan__feats {
  list-style: none; margin: auto 0 0; padding: clamp(14px, 2vw, 18px) 0 0;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 9px;
}
.mc-plan__grid:not(:has(.mc-plan:hover)) .mc-plan--featured .mc-plan__feats { border-top-color: rgba(255, 255, 255, .24); }
.mc-plan__feats li {
  display: flex; align-items: center; gap: 9px;
  font-size: clamp(13.5px, 1.5vw, 15px); font-weight: 600; color: var(--ink-700);
}
.mc-plan__grid:not(:has(.mc-plan:hover)) .mc-plan--featured .mc-plan__feats li { color: #fff; }
.mc-plan__feats li::before {
  content: "\2713"; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 900;
  background: var(--brand-50); color: var(--brand-vivid);
}
.mc-plan__grid:not(:has(.mc-plan:hover)) .mc-plan--featured .mc-plan__feats li::before { background: rgba(255, 255, 255, .26); color: #fff; }

@media (max-width: 768px) {
  .mc-plan__grid { grid-template-columns: 1fr; max-width: 460px; }
  .mc-plan__grid:not(:has(.mc-plan:hover)) .mc-plan--featured { transform: none; }   /* 세로 스택에서는 띄우지 않음 */
}

/* ═══════════════════════════════════════════════════════════
   실제 고객님 후기 : 다크 배경 밴드 + 세로 2단 흰 카드
   (첨부 시안 그대로 — 배경·박스 배치·텍스트 배치·폰트 느낌 카피)
   이미지는 넣지 않고 '이미지 자리'로 표시만 합니다.
   ═══════════════════════════════════════════════════════════ */
/* 풀블리드 밴드가 만드는 미세한 가로 넘침을 이 섹션에서 클립 */
.mc-trust { overflow-x: hidden; }
/* 화면 끝까지 닿는 다크 밴드 (컨테이너 밖으로 빼냄) */
.mc-rvband {
  position: relative; left: 50%; right: 50%;
  width: 100vw; margin-left: -50vw; margin-right: -50vw;
  background: #17181b;
  padding-block: clamp(48px, 7vw, 88px);
  margin-block: clamp(40px, 6vw, 72px);
}
.mc-rvband__inner {
  max-width: 560px; margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 24px);
  text-align: center;
}
.mc-rvband .mc-eyebrow {
  display: inline-block; margin-inline: auto;
  background: rgba(255, 255, 255, .14); color: #fff;
}
.mc-rvband__title {
  color: #fff; font-weight: 800;
  font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.02em;
  margin: 14px 0 clamp(28px, 4vw, 44px);
}

/* 세로 2단 카드 */
.mc-reviews {
  display: flex; flex-direction: column;
  gap: clamp(20px, 3vw, 30px);
  text-align: left;
  /* ★ 동명(기존 템플릿) .mc-reviews 규칙의 연회색 배경·패딩을 무효화 */
  background: none;
  padding: 0;
}
.mc-review {
  background: #fff; border-radius: 24px;
  padding: clamp(18px, 3vw, 22px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
}
/* 이미지 자리 (표시만) */
.mc-review__ph {
  aspect-ratio: 16 / 10; border-radius: 16px;
  background: transparent;               /* ★ 회색 채움 배경 제거 */
  border: 2px dashed #d7dae2;            /* 이미지 넣을 자리만 얇은 점선으로 표시 */
  color: #aeb4c0;
  display: grid; place-items: center; text-align: center;
  font-weight: 700; font-size: 14px; line-height: 1.35;
  margin-bottom: clamp(16px, 2.4vw, 22px);
}
.mc-review__ph small { display: block; font-weight: 600; font-size: 12px; opacity: .85; margin-top: 3px; }
.mc-review__body { padding: 0 clamp(4px, 1vw, 8px); }
.mc-review__name {
  margin: 0; font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(19px, 2.2vw, 22px); color: #17181c; line-height: 1.3;
}
.mc-review__tag {
  display: inline-block; margin-top: 12px;
  background: #e9e8fb; color: #6a5cf5;
  font-weight: 700; font-size: clamp(14px, 1.6vw, 15px);
  padding: 6px 13px; border-radius: 9px;
}
.mc-review__quote {
  margin: clamp(16px, 2.2vw, 20px) 0 0;
  color: #55585f; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.6;
}
.mc-review__foot {
  margin-top: clamp(18px, 2.6vw, 22px);
  padding-top: clamp(16px, 2.2vw, 20px);
  border-top: 1px solid #ececf0;
  display: flex; align-items: center; justify-content: space-between;
}
.mc-review__foot span { color: #17181c; font-weight: 800; font-size: clamp(15px, 1.7vw, 17px); }
.mc-review__foot b {
  color: #17181c; font-weight: 800;
  font-size: clamp(19px, 2.3vw, 23px); font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   서비스 소개 배너 : 폰 목업(이미지 자리) + 오른쪽 카피
   ------------------------------------------------------------
   연회색 배경, 왼쪽에 폰 목업 두 개(겹침·이미지 자리),
   오른쪽에 윗줄+큰 카피+소개 링크. 레이아웃만 재현.
   ═══════════════════════════════════════════════════════════ */
.mc-intro { background: #f6f7f9; padding-block: clamp(28px, 4vw, 60px); }
.mc-intro__inner {
  display: grid; grid-template-columns: 1.4fr 1fr;
  align-items: center; gap: clamp(24px, 4vw, 56px);
}

/* 왼쪽 : 아이폰 2개 이미지 (약 1.5배 확대 + 아래 그림자) */
.mc-intro__visual { display: flex; justify-content: center; align-items: center; overflow: visible; }
.mc-intro__visual img {
  display: block; width: 100%; max-width: 500px; height: auto;
  /* 폰 실루엣 그림자 : 진하게 + 아래로 내려 바닥에 몰리게 + 블러 줄여 또렷하게 */
  filter: drop-shadow(0 34px 12px rgba(24, 16, 56, .48));
}
.mc-intro__phone {
  flex: none; width: clamp(140px, 19vw, 200px); aspect-ratio: 200 / 430;
  border-radius: 28px; background: #fff; border: 1px solid #e2e4ea;
  box-shadow: 0 24px 50px rgba(40, 40, 80, .16);
  display: grid; place-items: center;
  color: #b2b7c2; font-weight: 700; font-size: 14px;
}
.mc-intro__phone--back  { transform: translateY(26px) rotate(-4deg); margin-right: -44px; z-index: 1; }
.mc-intro__phone--front { transform: translateY(-8px); z-index: 2; }

/* 오른쪽 : 카피 (오른쪽 정렬) */
/* 오른쪽 정렬 유지하되, 오른쪽 여백을 더 줘 텍스트를 중앙 쪽으로 */
.mc-intro__copy { text-align: right; padding-right: clamp(12px, 7vw, 100px); }
.mc-intro__eyebrow { color: var(--ink-500); font-size: clamp(15px, 1.8vw, 19px); font-weight: 500; margin: 0 0 10px; }
.mc-intro__title {
  color: var(--ink-900); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(22px, 3.2vw, 34px); line-height: 1.4; margin: 0;
}
.mc-intro__title em { font-style: normal; color: var(--brand-ink); }
.mc-intro__more {
  display: inline-block; margin-top: clamp(24px, 3vw, 40px);
  color: var(--ink-500); font-weight: 600; font-size: clamp(14px, 1.5vw, 16px);
  text-decoration: none; transition: color .2s ease;
}
.mc-intro__more span { color: var(--brand-500); font-weight: 800; margin-left: 4px; }
.mc-intro__more:hover { color: var(--ink-900); }

@media (max-width: 768px) {
  /* 모바일 : 텍스트를 위로, 폰 이미지를 아래로. 둘 사이 간격을 좁힘 */
  .mc-intro__inner { grid-template-columns: 1fr; gap: 4px; }
  .mc-intro__copy { order: -1; text-align: center; padding-right: 0; margin-bottom: 0; }
  .mc-intro__visual { margin-bottom: 0; margin-top: -10px; }
}

/* ═══════════════════════════════════════════════════════════
   히어로 모델 · 인트로 폰 : 등장(생성) 효과
   - 히어로 모델 : 첫 화면이라 로드 시 아래에서 떠오르며 등장
   - 인트로 폰   : 스크롤로 보일 때(reveal→is-visible) 떠오르며 등장
   ═══════════════════════════════════════════════════════════ */
@keyframes mcRiseIn {
  from { opacity: 0; transform: translateY(48px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* 히어로 모델 컷 */
.js .mc-hero--center .mc-hero__photo {
  animation: mcRiseIn .95s cubic-bezier(.2, .7, .2, 1) .12s both;
}

/* 인트로 폰 : 이미지가 떠오르며 등장.
   ★ 트랜지션 대신 '애니메이션'을 쓰는 이유 : 이 섹션이 첫 화면 근처라 로드 시
     is-instant(즉시표시) 처리로 트랜지션이 무시됩니다. 애니메이션은 무시되지 않아
     로드/스크롤 어느 쪽이든 등장 모션이 반드시 재생됩니다. */
.js .mc-intro__visual.reveal {
  transform: none;
  transition: opacity var(--dur-enter) var(--ease-out);
}
.js .mc-intro__visual img { opacity: 0; }
.js .mc-intro__visual.is-visible img {
  animation: mcRiseIn .95s cubic-bezier(.2, .7, .2, 1) both;
}

/* 모션 최소화 사용자는 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
  .js .mc-hero--center .mc-hero__photo { animation: none; }
  .js .mc-intro__visual img { opacity: 1; transform: none; animation: none; }
}