/* =========================================================
   메인 페이지 (Figma: 올바른사람_메인2, 1440px 기준)
   후기 슬라이더 · Why 비교 · Data · Process · Caution 은 blog.css 컴포넌트 재사용
   ========================================================= */

/* 섹션 제목 위 영문 라벨 (시안: 26px, 밑줄이 글자에 더 가까움) */
.mn-why .eyebrow-underline, .mn-review .eyebrow-underline, .mn-service .eyebrow-underline,
.mn-faq .eyebrow-underline, .mn-process .eyebrow-underline, .mn-caution .eyebrow-underline { padding: 0 4.8px 2px; font-size: 31.2px; line-height: 1.2; letter-spacing: 0; }

/* ---------- 1. Hero ---------- */
.mn-hero .hero-inner { padding-top: 150px; }
.mn-hero .hero-title { font-size: 54px; line-height: 72px; letter-spacing: 0; }
.mn-br-mo { display: none; }
.mn-hero-badge { display: table; margin: 30px auto 0; padding: 7.2px 20.4px; line-height: 30px; background: var(--blue); color: #fff; font-size: 21.6px; font-weight: 600; }
.mn-hero .btn-outline { margin-top: 85.2px; }

/* ---------- 2. Problem ---------- */
.mn-problem { padding: 183.6px 0 112.8px; color: #fff; background:
  linear-gradient(90deg, rgba(3, 34, 59, .4) 0, rgba(3, 34, 59, 0) 240px, rgba(3, 34, 59, 0) calc(100% - 240px), rgba(3, 34, 59, .4) 100%),
  linear-gradient(180deg, #03223b 0%, #03223b 62%, #042540 66%, #032b4b 73%, #023257 80%, #023c68 86.5%, #02477a 93%, #01518c 100%); }
.mn-problem .eyebrow-badge { margin-bottom: 102px; padding: 0 20.4px; font-size: 31.2px; line-height: 37.2px; }
.mn-problem-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45.6px; max-width: 1384.8px; margin: 0 auto; }
.mn-problem-cards li { min-height: 240px; padding: 44.4px 52.8px 0; border: 1px solid rgba(255, 255, 255, .5); border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.mn-problem-cards b { display: block; font-size: 41.4px; font-weight: 600; line-height: 1.1; color: #e2e8ef; }
.mn-problem-cards strong { display: block; margin-top: 8.4px; font-size: 36px; font-weight: 700; letter-spacing: -.01em; }
.mn-problem-cards p { margin-top: 8.4px; font-size: 18px; }
.mn-problem-dots { margin-top: 102px; gap: 30px; }

/* ---------- 3. Branding + 대표 소개 ---------- */
.mn-brand { padding: 174px 0 94.8px; text-align: center; background: linear-gradient(180deg, #fff 0%, #e5f4ff 100%); }
.mn-brand-title { font-size: 86.4px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #111; }
.mn-brand-title .blog-dot::before { top: -12px; }
.mn-brand-sub { margin-top: 31.2px; font-size: 21.6px; color: #3c3c3c; }
.mn-brand-box { display: table; margin: 78px auto 0; padding: 0 21.6px; line-height: 76.8px; background: var(--blue); color: #fff; font-size: 57.6px; font-weight: 700; }
.mn-ceo { position: relative; left: 25.2px; max-width: 1125.6px; height: 771.6px; margin: 115.2px auto 0; text-align: left; }
.mn-ceo-photo { position: absolute; left: 0; top: 73.2px; z-index: 1; width: 439.2px; height: 631.2px; margin: 0; border-radius: 4.8px; overflow: hidden; background: #e6e8ec; box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.mn-ceo-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.mn-ceo-card { position: absolute; top: 0; right: 0; bottom: 0; left: 236.4px; padding: 180px 86.4px 0 300px; background: #fff; border-radius: 12px; }
.mn-ceo-card .blog-ceo-head { margin-left: 36px; }
.mn-ceo-card .blog-ceo-head strong { font-size: 26px; }
.mn-ceo-card p { font-size: 21.6px; line-height: 36px; color: #000; word-break: break-all; }
.mn-ceo-card .blog-ceo-head + p { margin-top: 84px; }
.mn-ceo-card p + p { margin-top: 36px; }
.mn-ceo-card b { font-weight: 600; }

/* ---------- 4. Why (blog-why 재사용) ---------- */
.mn-why .eyebrow-underline { margin-bottom: 24px; }
.mn-why .blog-compare { margin-top: 79.2px; }
.mn-why .blog-compare-bad { padding-top: 68.4px; }
.mn-why .blog-compare-bad h3 { font-size: 28.8px; }
.mn-why .blog-compare-bad ul { margin-top: 33.6px; gap: 30px; font-size: 21.6px; }
.mn-why .blog-compare-good { padding-top: 55.2px; }
.mn-why .blog-compare-good h3 svg { width: 39.6px; height: 39.6px; }
.mn-why .blog-compare-good ul { margin-top: 63.6px; gap: 33.6px; font-size: 28.8px; letter-spacing: 0; }

/* ---------- 5. Review + 재계약 ---------- */
.mn-review { padding: 144px 0 175.2px; background: linear-gradient(90deg, #fff 0%, #e5f4ff 100%); }
.mn-review .eyebrow-underline { margin-bottom: 40.8px; }
.mn-review .blog-sub { margin-top: 12px; color: #3c3c3c; }
.mn-review .blog-review-slider { margin-top: 68.4px; }
.mn-review .blog-quote { margin-top: 108px; font-size: 36px; letter-spacing: 0; }
.mn-vdots { display: flex; flex-direction: column; align-items: center; gap: 22.8px; margin-top: 158.4px; }
.mn-vdots i { width: 8.4px; height: 8.4px; border-radius: 50%; background: var(--blue); }
.mn-recontract-title { margin-top: 129.6px; }
.mn-review .mn-recontract-title + .blog-sub { margin-top: 21.6px; }
.mn-review .mn-recontract-slider { margin-top: 84px; }
.mn-recontract-slider .blog-review-track li { flex: 0 0 336px; height: 429.6px; }
.mn-recontract-slider .blog-review-track img { object-fit: contain; }
.mn-recontract-slider .blog-review-viewport { max-width: 1100px; margin: 0 auto; } /* 카드 3장(336×3 + 간격 46×2)만 보이게 */
/* 후기 카드: 모든 화면에서 1080x1598 캡처 비율, 나머지는 꽉 차게 확대(넘치는 부분 잘림) */
.mn-review-flat.mn-recontract-slider .blog-review-track li { height: auto; aspect-ratio: 1080 / 1598; }
.mn-review-flat .blog-review-track img { object-fit: cover; }
@media (max-width: 760px) {
  /* 후기·재계약: 화살표 없이 스와이프, 화살표 자리만큼 이미지 확대 */
  .mn-recontract-slider.blog-review-slider { padding: 0; }
  .mn-recontract-slider .blog-arrow { display: none; }
}

/* ---------- 6. Service ---------- */
.mn-service { position: relative; padding: 126px 0 138px; color: #fff; background: #2a2622 center/cover no-repeat; }
.mn-service::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.mn-service .container { position: relative; z-index: 1; }
.mn-service .mn-service-eyebrow { margin-bottom: 36px; padding: 0 6px 2px; color: #fff; font-weight: 500; }
.mn-service-grid { display: grid; grid-template-columns: repeat(2, 633.6px); justify-content: center; gap: 31.2px 32.4px; margin-top: 82.8px; }
.mn-service-grid li { min-height: 225.6px; padding: 31.2px 44.4px 28.8px; border-radius: 9.6px; background: rgba(0, 0, 0, .67); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mn-service-grid b { display: block; font-size: 31.2px; font-weight: 700; line-height: 1.2; color: var(--blue); }
.mn-service-grid h3 { margin-top: 9.6px; font-size: 28.8px; font-weight: 700; }
.mn-service-grid p { margin-top: 3.6px; font-size: 16.8px; line-height: 36px; color: #eee; }
.mn-service-grid p .c-blue { font-weight: 700; }

/* ---------- 8. FAQ ---------- */
.mn-faq { padding: 138px 0 186px; background: #ebeced; }
.mn-faq .eyebrow-underline { margin-bottom: 26.4px; }
.mn-faq-list { max-width: 1348.8px; margin: 87.6px auto 0; }
.mn-faq-item + .mn-faq-item { margin-top: 86.4px; }
.mn-faq-item dt { padding-left: 16.8px; font-size: 28.8px; font-weight: 700; color: #111; }
.mn-faq-item dt span { display: inline-block; padding: 0 3.6px; line-height: 43.2px; background: linear-gradient(transparent 47%, #c2ddf1 47%, #c2ddf1 87%, transparent 87%); }
.mn-faq-item dd { margin: 21.6px 0 0; padding: 36px 52.8px; background: #f5f6f6; border-radius: 16.8px; font-size: 21.6px; line-height: 36px; color: #000; }

/* ---------- 9. Process + 10. Caution ---------- */
.mn-tail { background: linear-gradient(180deg, #fff 0%, #fff 33%, #e5f4ff 100%); }
.mn-tail .blog-process, .mn-tail .blog-caution { background: none; }
.mn-tail .mn-process { padding-top: 182.4px; }
.mn-process .eyebrow-underline { margin-bottom: 4.8px; }
.mn-process .blog-steps { margin-top: 132px; }
.mn-process .blog-steps p { display: flex; align-items: center; justify-content: center; min-height: 64.8px; margin-top: 33.6px; font-size: 21.6px; line-height: 32.4px; }
.mn-tail .mn-caution { padding-top: 148.8px; }
.mn-caution .eyebrow-underline { margin-bottom: 31.2px; }
.mn-caution .blog-sub-sm { margin-top: 7.2px; font-size: 21.6px; }
.mn-caution .blog-caution-cols { margin-top: 82.8px; }
.mn-caution .blog-caution-list, .mn-caution .blog-caution-box { margin-top: 64.8px; }
.mn-caution .blog-caution-list li, .mn-caution .blog-caution-box { font-size: 21.6px; }

/* ---------- Responsive ---------- */
@media (min-width: 761px) {
  .mn-recontract-slider .blog-review-track { gap: 46px; justify-content: safe center; }
}
@media (max-width: 1400px) {
  .mn-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .mn-problem-cards { gap: 18px; }
  .mn-problem-cards li { height: auto; min-height: 200px; padding: 34px 28px 30px; }
  .mn-problem-cards strong { font-size: 28.8px; }
  .mn-ceo { left: 0; }
  .mn-ceo-photo { width: 300px; height: 430px; top: 106px; }
  .mn-ceo-card { left: 150px; padding: 120px 36px 0 190px; }
}
@media (max-width: 760px) {
  .mn-why .eyebrow-underline, .mn-review .eyebrow-underline, .mn-service .eyebrow-underline,
  .mn-faq .eyebrow-underline, .mn-process .eyebrow-underline, .mn-caution .eyebrow-underline { font-size: 21.6px; margin-bottom: 14px; }

  .mn-hero .hero-inner { padding-top: 56px; }
  .mn-hero .hero-title { font-size: 33.6px; line-height: 1.4; }
  .mn-br-mo { display: inline; }
  .mn-hero-badge { margin-top: 20px; padding: 5px 10px; line-height: 24px; font-size: 15.6px; }
  .mn-hero .btn-outline { margin-top: 36px; }

  .mn-problem { padding: 80px 0 60px; }
  .mn-problem .eyebrow-badge { margin-bottom: 30px; font-size: 24px; line-height: 33.6px; }
  .mn-problem-cards { grid-template-columns: 1fr; gap: 14px; }
  .mn-problem-cards li { height: auto; padding: 24px 24px 26px; border-radius: 14px; }
  .mn-problem-cards b { font-size: 31.2px; }
  .mn-problem-cards strong { margin-top: 8px; font-size: 24px; }
  .mn-problem-cards p { margin-top: 8px; font-size: 16.8px; }
  .mn-problem-dots { margin-top: 40px; gap: 16px; }

  .mn-brand { padding: 90px 0 70px; }
  .mn-brand-title { font-size: 40.8px; }
  .mn-brand-title .blog-dot::before { top: -5px; }
  .mn-brand-sub { margin-top: 24px; font-size: 18px; }
  .mn-brand-box { margin-top: 36px; padding: 0 12px; line-height: 52.8px; font-size: 26.4px; }
  .mn-ceo { left: 0; height: auto; display: flex; flex-direction: column; align-items: center; margin-top: 44px; }
  .mn-ceo-photo { position: relative; top: 0; width: 240px; height: 320px; }
  .mn-ceo-card { position: static; width: 100%; margin-top: -40px; padding: 70px 22px 34px; }
  .mn-ceo-card .blog-ceo-head { margin-left: 0; gap: 14px; }
  .mn-ceo-card .blog-ceo-head strong { font-size: 18px; }
  .mn-ceo-card p { font-size: 16.8px; line-height: 31.2px; word-break: keep-all; }
  .mn-ceo-card .blog-ceo-head + p { margin-top: 24px; }
  .mn-ceo-card p + p { margin-top: 16px; }

  .mn-why .blog-compare { margin-top: 50px; }
  .mn-why .blog-compare-good { padding-top: 44px; }
  .mn-why .blog-compare-bad { order: 0; padding-top: 40px; border-radius: 6px 6px 0 0; }
  .mn-why .blog-compare-bad h3 { font-size: 26.4px; }
  .mn-why .blog-compare-bad ul { margin-top: 24px; gap: 16px; font-size: 18px; }
  .mn-why .blog-compare-good ul { margin-top: 30px; gap: 22px; font-size: 20.4px; }

  .mn-review { padding: 80px 0; }
  .mn-review .blog-review-slider, .mn-review .mn-recontract-slider { margin-top: 36px; }
  .mn-review .blog-quote { margin-top: 50px; font-size: 21.6px; }
  .mn-vdots { margin-top: 64px; gap: 12px; }
  .mn-recontract-title { margin-top: 56px; }
  .mn-review .mn-recontract-title + .blog-sub { margin-top: 14px; }
  .mn-recontract-slider .blog-review-track li { flex: 0 0 calc((100% - 14px) / 2); height: auto; aspect-ratio: 280 / 358; }

  .mn-service { padding: 90px 0; }
  .mn-service .mn-service-eyebrow { margin-bottom: 14px; }
  .mn-service-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .mn-service-grid li { min-height: 0; padding: 24px 22px; }
  .mn-service-grid b { font-size: 26.4px; }
  .mn-service-grid h3 { font-size: 22.8px; }
  .mn-service-grid p { line-height: 28.8px; }
  .mn-service-grid p br { display: none; }

  .mn-faq { padding: 80px 0; }
  .mn-faq-list { margin-top: 40px; }
  .mn-faq-item + .mn-faq-item { margin-top: 36px; }
  .mn-faq-item dt { padding-left: 2px; font-size: 20.4px; }
  .mn-faq-item dt span { line-height: 33.6px; }
  .mn-faq-item dd { margin-top: 12px; padding: 20px; font-size: 16.8px; line-height: 28.8px; }

  .mn-tail .mn-process { padding-top: 80px; }
  .mn-process .blog-steps { margin-top: 50px; }
  .mn-process .blog-steps p { min-height: 0; margin-top: 22px; font-size: 18px; line-height: 1.5; }
  .mn-tail .mn-caution { padding-top: 80px; }
  .mn-caution .blog-sub-sm { margin-top: 10px; font-size: 18px; }
  .mn-caution .blog-caution-cols { margin-top: 40px; }
  .mn-caution .blog-caution-list, .mn-caution .blog-caution-box { margin-top: 18px; }
  .mn-caution .blog-caution-list li, .mn-caution .blog-caution-box { font-size: 16.8px; }
}

/* 1.2배 확대 후 좁은 데스크톱에서 재계약 슬라이드 3장이 한 화면에 들어오도록 */
@media (min-width: 761px) and (max-width: 1400px) {
  .mn-recontract-slider .blog-review-track li { flex: 0 0 calc((100% - 92px) / 3); height: auto; aspect-ratio: 280 / 358; }
}

/* ---------- Data 섹션 슬라이더 (화살표로 카드 이동) ---------- */
/* 폭·카드 크기를 인스타 페이지 데이터 섹션(.ig-data)과 모든 화면 폭에서 동일하게 맞춤 */
.mn-data .blog-data-inner { max-width: 1308px; padding: 0 28.8px; }
.mn-data-slider { max-width: none; margin: 8.4px 0 0; padding: 0; }
.mn-data-slider .blog-review-viewport { padding: 0 0 36px; margin-bottom: -36px; }
.mn-data-slider .blog-data-grid { display: flex; gap: 30px; transition: transform .45s ease; }
.mn-data-slider .blog-data-card { flex: 0 0 min(396px, calc((100% - 60px) / 3)); min-width: 0; padding-bottom: 39.3px; }
.mn-data-slider .blog-data-shot { height: 323px; }
.mn-data-slider .blog-data-body { margin-top: 24px; padding-top: 33.6px; }
.mn-data-slider .blog-arrow { top: 40%; }
.mn-data-slider .blog-arrow-prev { left: -55.2px; }
.mn-data-slider .blog-arrow-next { right: -55.2px; }
@media (max-width: 1420px) { /* 바깥 여백이 모자라면 화살표를 카드 가장자리에 걸침 */
  .mn-data-slider .blog-arrow-prev { left: -18px; }
  .mn-data-slider .blog-arrow-next { right: -18px; }
}
@media (max-width: 760px) {
  .mn-data .blog-data-inner { padding: 0 20px; }
  .mn-data-slider .blog-arrow { display: none; }
  .mn-data-slider .blog-review-viewport { overflow: visible; padding: 0; margin: 0; }
  .mn-data-slider .blog-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; overflow: visible; margin: 0; padding: 4px 0 0; transform: none !important; transition: none; }
  .mn-data-slider .blog-data-card { padding: 10px 10px 19.2px; border-radius: 14px; }
  .mn-data-slider .blog-data-shot { height: 139px; aspect-ratio: auto; }
  /* 플레이스 캡처는 내용이 가장자리까지 차 있어 잘려 보임 → 좌우 여백 */
  .mn-data-slider .blog-data-shot-place img { padding: 0 8px; }
  .mn-data-slider .blog-data-body { margin-top: 10px; padding: 12px 2px 0; }
  .mn-data-slider .blog-data-lead { font-size: 16.8px; }
  .mn-data-slider .blog-data-value { margin-top: 7.2px; }
  .mn-data-slider .blog-data-value span { padding: 0 5px; font-size: 16.8px; line-height: 24px; letter-spacing: -.03em; word-break: keep-all; }
  .mn-data-slider .blog-data-src { margin-top: 6px; font-size: 13.2px; }
}

.mn-data-slider.is-static .blog-arrow { display: none; }