/* carry-core.com "/27" Fund Security(자금 안정성) 페이지 전용 스타일 — 실측 기반(legal-pages-audit.md).
   헤더/푸터는 main.css 공통. 실측 확인: hero/features/CTA 세 섹션 모두 풀블리드(뷰포트 폭 그대로,
   max-width 캡 없음) — Company/Home처럼 1160/1220px 캡을 씌우지 말 것. */

.fs-hero {
  position: relative;
  min-height: 560px;
  padding: 120px 40px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* 사진 배경 위 흰 글씨 — 가독성을 위한 스크림(CLAUDE.md §3 원칙). */
.fs-hero::before { content: ""; position: absolute; inset: 0; background: rgba(10, 15, 30, 0.25); }
.fs-hero-inner { position: relative; z-index: 1; max-width: 640px; }
/* 실측: "anton" 디스플레이 폰트를 쓰지만 이 프로젝트는 Pretendard만 로드되어 있어(CLAUDE.md 폰트
   조합 원칙) 굵은 weight로 근사 처리. */
.fs-hero-headline { font-size: 60px; font-weight: 800; line-height: 1.1; color: #fff; margin: 0 0 20px; }
.fs-hero-body { font-size: 16px; font-weight: 400; line-height: 1.6; color: #fff; margin: 0; }

.fs-features { background: #fff; padding: 90px 40px; text-align: center; }
.fs-features-inner { max-width: 1180px; margin: 0 auto; }
.fs-features-eyebrow { font-size: 14px; font-weight: 700; color: #155DFC; letter-spacing: 2px; margin-bottom: 16px; }
.fs-features-heading { font-size: 40px; font-weight: 700; color: #000; margin: 0 0 24px; }
.fs-features-intro { font-size: 16px; font-weight: 400; color: #62748E; line-height: 1.6; max-width: 720px; margin: 0 auto 8px; }

/* 실측(라이브 스크린샷 대조, live_27_kr_seg1.png): 2열이 아니라 3열, 체커보드 패턴으로
   짝수번째 카드만 파란 배경+흰 글씨, 홀수번째는 연회색 배경+검정 글씨 — 카드마다 라운드
   박스(패딩/radius) 있음. 아이콘 파일 자체가 이미 흰 뱃지+파란 글리프를 baked-in으로 갖고
   있어서 두 배경 색 위에 그대로 재사용해도 자연스러움(별도 variant 불필요). */
.fs-features-grid {
  margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left;
}
.fs-feature-item { display: flex; flex-direction: column; background: #F1F5F9; border-radius: 20px; padding: 40px; }
.fs-feature-item:nth-child(even) { background: #155DFC; }
.fs-feature-item:nth-child(even) .fs-feature-title,
.fs-feature-item:nth-child(even) .fs-feature-body { color: #fff; }
.fs-feature-item:nth-child(even) .fs-feature-body { color: rgba(255, 255, 255, 0.85); }
.fs-feature-icon { width: 56px; height: 56px; margin-bottom: 16px; }
.fs-feature-title { font-size: 20px; font-weight: 700; color: #000; margin: 0 0 8px; }
.fs-feature-body { font-size: 15px; font-weight: 400; color: #62748E; line-height: 1.7; margin: 0; }

/* 실측: CTA 배너는 원본 이미지(1919x756) 비율의 fluid 박스(뷰포트 폭에 비례해 높이도 커짐,
   567px@1440 -> 681px@1728) — background-size:cover, aspect-ratio로 재현. KR은 이미지 자체에
   텍스트가 baked-in(추가 DOM 텍스트 없음), EN은 같은 배경 위에 실제 DOM 텍스트가 오버레이됨. */
.fs-cta {
  position: relative;
  aspect-ratio: 1919 / 756;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
/* EN은 텍스트 없는 별도 파일(desktop-08-cta-banner-en.png, 1920x640)이라 비율이 KR(1919x756)과
   다름 — 실제 파일 치수로 맞춤. */
body.lang-en .fs-cta { aspect-ratio: 1920 / 640; }
.fs-cta-inner { position: relative; z-index: 1; max-width: 480px; padding: 0 40px 0 80px; color: #fff; }
.fs-cta-headline { font-size: 34px; font-weight: 700; line-height: 1.25; margin: 0 0 16px; }
.fs-cta-body { font-size: 15px; font-weight: 400; line-height: 1.6; margin: 0 0 4px; color: rgba(255, 255, 255, 0.92); }

@media (max-width: 720px) {
  .fs-hero { padding: 56px 24px; min-height: 420px; }
  .fs-hero-headline { font-size: 36px; }
  .fs-hero-body { font-size: 14px; }

  .fs-features { padding: 48px 20px; }
  .fs-features-heading { font-size: 26px; }
  .fs-features-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .fs-feature-item { padding: 28px; }

  /* 실측: 모바일은 데스크톱 배경 재사용이 아니라 헤딩+본문+카드가 전부 baked-in된 별도 세로형
     이미지(`<img>`)를 그대로 씀 — 위 `.fs-cta`(desktop-only)는 모바일에서 안 보이고, 이 이미지가
     대신 렌더링됨. */
  /* 실측(2026-08-12, 라이브 모바일 390px): width:100% 풀블리드가 아니라 370px(좌우 10px 여백)로
     렌더됨 — 원본 1408×3260 비율 그대로, 크롭 없음. 이 `<img>`는 `<section>`으로 안 감싸여 있어서
     위아래 여백이 전혀 없었는데, 라이브는 섹션 상하 48px 정도의 여백이 있었음(실측: 이미지 높이만
     856px인데 이 블록 전체는 957px). */
  .fs-cta-mobile.mobile-only { display: block !important; width: 370px; max-width: 100%; height: auto; margin: 48px auto; }
}