/* ============================================
   INTIN Website 2026 - 메인 페이지 스타일
   index.html 전용
   ============================================ */

.main-page {
  padding-top: var(--header-height);
}

/* -----------------------------
   0. Hero Carousel — hero 1~4 자동 슬라이드 (우→좌, 5초, 호버 정지)
   ----------------------------- */
.hero-carousel {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.hero-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

.hero-carousel .hero {
  flex: 0 0 100%;
  max-width: 100%;
}

/* 네비게이션 도트 */
.hero-carousel__dots {
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 10;
  pointer-events: none;
}

.hero-carousel__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: width 0.35s ease, background-color 0.35s ease;
}

/* 어두운 배경 (hero 1, 3) */
.hero-carousel--dark .hero-carousel__dot {
  background-color: rgba(255, 255, 255, 0.5);
}
.hero-carousel--dark .hero-carousel__dot.is-active {
  width: 24px;
  background-color: #ffffff;
}

/* 밝은 배경 (hero 2, 4) */
.hero-carousel--light .hero-carousel__dot {
  background-color: rgba(12, 24, 36, 0.3);
}
.hero-carousel--light .hero-carousel__dot.is-active {
  width: 24px;
  background-color: #0C1824;
}

/* PC 전용 화살표 (769px 이상에서만 표시) */
.hero-carousel__arrow {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.2s ease;
  flex-shrink: 0;
}

/* 화살표-도트 간격: 기존 gap(8px)의 2배 */
.hero-carousel__arrow--prev { margin-right: 8px; }
.hero-carousel__arrow--next { margin-left:  8px; }

/* 비활성 도트와 동일한 색상 → 호버/클릭 시 완전 불투명 */
.hero-carousel--dark .hero-carousel__arrow {
  color: rgba(255, 255, 255, 0.5);
}
.hero-carousel--dark .hero-carousel__arrow:hover,
.hero-carousel--dark .hero-carousel__arrow:active {
  color: #ffffff;
}

.hero-carousel--light .hero-carousel__arrow {
  color: rgba(12, 24, 36, 0.3);
}
.hero-carousel--light .hero-carousel__arrow:hover,
.hero-carousel--light .hero-carousel__arrow:active {
  color: #0C1824;
}

@media (min-width: 769px) {
  .hero-carousel__arrow {
    display: flex;
  }
}

/* -----------------------------
   1. Hero Section (공통)
   - 4개 히어로가 동일한 레이아웃을 공유
   - 변형: --reverse (좌측 숫자 / 우측 텍스트)
   ----------------------------- */
.hero {
  position: relative;
  min-height: 960px;
  padding: 120px 0 60px;
  background-color: var(--surface-dark-blue-3);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg-glow {
  position: absolute;
  inset: -10% -20% 60% 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(131, 0, 255, 0.6) 0%,
    rgba(131, 0, 255, 0) 70%
  );
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.hero--reverse .hero__bg-glow {
  inset: -10% 50% 60% -20%;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 64px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x);
  min-height: 780px;
}

.hero--reverse .hero__inner {
  grid-template-columns: 1fr 1fr;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 560px;
  align-self: center;
}

.hero--reverse .hero__content {
  order: 2;
}

.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  position: relative;
}

.hero--reverse .hero__visual {
  order: 1;
  justify-content: flex-start;
}

/* Tag (출처) */
.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 16px;
  background: var(--surface-opacity-black-3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hero__tag::before {
  content: '';
  width: 8px;
  height: 8px;
  background-color: var(--surface-primary);
  flex-shrink: 0;
}

.hero__tag-text {
  font-family: var(--font-pretendard);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-primary);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Heading */
.hero__heading {
  font-family: var(--font-pretendard);
  font-size: 100px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-neutral-2);
}

.hero__heading--accent {
  color: var(--surface-primary);
}

.hero__heading-line {
  display: block;
}

/* Description */
.hero__description {
  font-family: var(--font-pretendard);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-neutral-3);
  max-width: 460px;
}

/* CTA */
.hero__cta {
  margin-top: 8px;
}

/* CTA — disabled (현재 모든 hero CTA는 비활성 상태) */
.hero__cta[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

/* 거대 통계 숫자 — Figma 85:2676: 값 위, 단위 아래, 우측 정렬 */
.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--font-barlow);
  font-weight: 200;
  line-height: 1;
  color: var(--surface-white);
  white-space: nowrap;
  letter-spacing: -0.03em;
  text-align: right;
  margin: 0;
}

.hero__stat-value {
  /* 1280px 이상에서는 384px(=1280*0.30)로 고정, 그 이하에서는 30vw 비율로 축소 */
  font-size: clamp(180px, 30vw, 384px);
  display: block;
  line-height: 1;
}

.hero__stat-unit {
  /* 단위(%, 년, 배 등)는 별도 행으로 내려와 작게 표시
     1280px 이상에서는 120px(=1280*0.094 ≈ 384*0.3125, Figma 비율)로 고정 */
  font-size: clamp(60px, 9.4vw, 120px);
  display: block;
  line-height: 1;
  color: var(--surface-neutral-3);
  margin-left: 0;
  /* 위 숫자와의 행간 간격 보정 — 직전(-0.4em)의 절반만 적용해 간격을 약 2배로 확장 */
  margin-top: -0.2em;
}

/* Hero variants — 배경 보조 일러스트 (보라색 도넛 링) */
.hero__viz-graphic {
  position: absolute;
  left: 50%;
  top: 620px;
  width: 562px;
  height: 562px;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.hero__viz-graphic-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9;
}

/* Hero 1 — 버튼 가운데 정렬 (Hero 2 와 동일) */
.hero--1 .hero__cta {
  align-self: center;
}

/* Hero 2 — 라이트 테마 색상 오버라이드 (Figma 161:10843)
   - 다른 hero(다크블루 배경)와 달리 hero 2만 화이트 배경 + 다크블루 텍스트
   - cyan 강조와 보라 ambient glow는 그대로 유지 */
.hero--2 {
  background-color: var(--surface-neutal-white);
}
.hero--2 .hero__tag {
  background: rgba(255, 255, 255, 0.5);
}
.hero--2 .hero__heading {
  color: var(--surface-dark-blue-3);
}
.hero--2 .hero__heading--accent {
  color: var(--surface-primary);
}
.hero--2 .hero__description {
  color: var(--surface-dark-blue-3);
}
.hero--2 .hero__stat,
.hero--2 .hero__stat-unit {
  color: var(--surface-dark-blue-3);
}
/* Hero 2 — 보라 ambient glow 위치를 좌상단(reverse 기본)에서 우상단으로 이동 */
.hero--2 .hero__bg-glow {
  inset: -10% -20% 60% 50%;
}

/* Hero 2 — visual : content = 3 : 2 grid */
.hero--2 .hero__inner {
  grid-template-columns: 3fr 2fr;
}

/* Hero 2 — 콘텐츠 폭 (1fr 컬럼 안에서 자연 줄바꿈) */
.hero--2 .hero__content {
  max-width: 380px;
}

/* Hero 2 — 버튼 가운데 정렬 */
.hero--2 .hero__cta {
  align-self: center;
}

/* Hero 2 — visual 영역: stat 위쪽 가운데 정렬 (그래프는 absolute로 별도 처리) */
/* align-self: stretch 로 grid row 끝까지 늘려야 그래프 absolute(bottom)가
   hero 박스 자체 하단에 정확히 닿는다. (콘텐츠 컬럼이 더 길어도 안전) */
.hero--2 .hero__visual {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  align-self: stretch;
  min-height: 900px;
}

/* Hero 2 — 보라색 라인 그래프: visual 박스 가로 가운데, 세로는 hero 섹션 박스 하단 */
/* bottom: -60px → hero 섹션 padding-bottom(60px)을 침범하여 hero 박스 하단에 닿게 */
.hero--2 .hero__viz-graph {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 497px;
  height: 418px;
  pointer-events: none;
  z-index: 1;
  flex-shrink: 0;
}

.hero--2 .hero__viz-graph-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hero 3 — 본문 폭 490px (Figma 사양) */
.hero--3 .hero__description {
  max-width: 490px;
}

/* Hero 3 — 버튼 가운데 정렬 (490px 본문 컬럼 안) */
.hero--3 .hero__cta {
  align-self: center;
}

/* Hero 3 — 남/여 인물 통합 아이콘 (hero 섹션 박스 우하단 정렬) */
/* hero__inner 우측 끝과 가로 정렬: gutter 또는 1184px 컨테이너 우측 */
.hero--3 .hero__viz-human {
  position: absolute;
  bottom: 0;
  right: max(var(--gutter-x), calc((100% - var(--content-max)) / 2 + var(--gutter-x)));
  width: 445px;
  z-index: 1;
  pointer-events: none;
}

.hero--3 .hero__viz-human-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero 4 — 라이트 테마 색상 오버라이드 (Figma 161:10876)
   - hero 2와 동일한 라이트 테마 패턴 (다크블루 텍스트 + 화이트 배경)
   - cyan 강조, 보라 ambient glow, 보라 pill, 정자 일러스트는 유지
   - 정자 이미지 mix-blend는 lighten → exclusion (화이트 배경 사양) */
.hero--4 {
  background-color: var(--surface-neutal-white);
}
.hero--4 .hero__tag {
  background: rgba(255, 255, 255, 0.5);
}
.hero--4 .hero__heading {
  color: var(--surface-dark-blue-3);
}
.hero--4 .hero__heading--accent {
  color: var(--surface-primary);
}
.hero--4 .hero__description {
  color: var(--surface-dark-blue-3);
}
.hero--4 .hero__stat,
.hero--4 .hero__stat-unit {
  color: var(--surface-dark-blue-3);
}
/* Hero 4 — 좌상단 보라 ambient glow 제거 (대장 요청) */
.hero--4 .hero__bg-glow {
  display: none;
}

/* Hero 4 — 정자 일러스트 배경 글로우 (보라 그라데이션) */
.hero--4 .hero__viz-decor {
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: radial-gradient(
    ellipse at 30% 80%,
    rgba(175, 92, 255, 0.4) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* Hero 4 — 콘텐츠 폭 380px (Figma 사양) */
.hero--4 .hero__content {
  max-width: 380px;
}

/* Hero 4 — 버튼 가운데 정렬 */
.hero--4 .hero__cta {
  align-self: center;
}

/* Hero 4 — visual 영역 stack: stat(위) + pill(아래) */
.hero--4 .hero__visual-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 16px;
}

/* Hero 4 — 정자 일러스트 (좌하단 회전 이미지, mix-blend) */
.hero--4 .hero__viz-sperm {
  position: absolute;
  bottom: 0;
  left: max(var(--gutter-x), calc((100% - var(--content-max)) / 2 + var(--gutter-x)));
  width: 745px;
  height: 570px;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: exclusion;
  pointer-events: none;
  z-index: 1;
}

.hero--4 .hero__viz-sperm-img {
  display: block;
  width: 657px;
  height: 396px;
  transform: rotate(16.85deg);
  opacity: 0.75;
  object-fit: contain;
}

/* Hero 4 — 가로 알약 강조 (46년간 51.6%) */
.hero__pill {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background: var(--surface-dark-purple-2);
  border-radius: 999px;
  font-family: var(--font-pretendard);
  font-size: 24px;
  font-weight: 500;
  color: var(--surface-white);
  letter-spacing: var(--tracking-tight);
  box-shadow: var(--glow-01);
  margin-top: 24px;
  width: fit-content;
}

.hero__pill strong {
  font-weight: 700;
  margin: 0 4px;
}

/* Hero 4 — 알약 (반투명 보라 + backdrop-blur). 사이즈 축소판. */
.hero--4 .hero__pill {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  height: auto;
  padding: 14px 28px;
  margin-top: 0;
  font-size: 24px;
  font-weight: 500;
  border: 1px solid rgba(61, 73, 76, 0.1);
  background: rgba(153, 46, 255, 0.5);
  backdrop-filter: blur(6.5px);
  -webkit-backdrop-filter: blur(6.5px);
  box-shadow: none;
  justify-content: center;
  align-self: center;
  letter-spacing: normal;
}

/* 반응형 — Hero */
@media (max-width: 1024px) {
  .hero__heading {
    font-size: 72px;
  }
  .hero__description {
    font-size: 20px;
  }
  .hero__inner {
    gap: 40px;
  }
  .hero__viz-graphic {
    width: 420px;
    height: 420px;
    top: 500px;
  }
  .hero--2 .hero__content {
    max-width: 320px;
  }
  .hero--2 .hero__viz-graph {
    width: 408px;
    height: 344px;
  }
  .hero--3 .hero__viz-human {
    width: 340px;
  }
  .hero--4 .hero__content {
    max-width: 320px;
  }
  .hero--4 .hero__pill {
    padding: 12px 24px;
    font-size: 20px;
  }
  .hero--4 .hero__viz-sperm {
    width: 560px;
    height: 420px;
  }
  .hero--4 .hero__viz-sperm-img {
    width: 480px;
    height: 290px;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 96px 0 60px;
  }
  /* 모바일: 출처(tag) → 강조 숫자(stat) → 타이틀(heading) → 설명 → CTA 순으로 재배치
     hero__content / hero__visual 컨테이너를 display: contents 로 해체하여
     자식 요소를 직접 hero__inner 의 flex item 으로 끌어올린 뒤 order 부여 */
  .hero__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: auto;
  }
  .hero__content,
  .hero__visual {
    display: contents;
  }
  .hero__tag { order: 1; max-width: 100%; }
  /* 긴 텍스트(ex. Levine et al. …)가 hero 섹션 밖으로 overflow되면
     backdrop-filter가 바깥 어두운 영역을 샘플링해 검은 그라데이션이 생김 → 줄바꿈 허용 */
  .hero__tag-text { white-space: normal; }
  .hero__visual > * { order: 2; }
  .hero__heading { order: 3; }
  .hero__description { order: 4; }
  .hero__cta { order: 5; }
  .hero__heading {
    font-size: 48px;
  }
  .hero__description {
    font-size: 16px;
  }
  .hero__stat-value {
    font-size: clamp(140px, 40vw, 240px);
  }
  .hero__stat-unit {
    font-size: clamp(60px, 16vw, 100px);
  }
  .hero__pill {
    font-size: 16px;
    padding: 12px 24px;
  }
  .hero__viz-graphic {
    display: none;
  }
  .hero--2 .hero__content {
    max-width: 100%;
  }
  .hero--2 .hero__cta {
    align-self: flex-start;
  }
  .hero--2 .hero__viz-graph {
    display: none;
  }
  .hero--1 .hero__cta {
    align-self: flex-start;
  }
  .hero--3 .hero__cta {
    align-self: flex-start;
  }
  .hero--3 .hero__description {
    max-width: 100%;
  }
  .hero--3 .hero__viz-human {
    display: none;
  }
  .hero--4 .hero__content {
    max-width: 100%;
  }
  .hero--4 .hero__cta {
    align-self: flex-start;
  }
  .hero--4 .hero__pill {
    height: auto;
    padding: 12px 20px;
    font-size: 18px;
    width: fit-content;
    margin-top: 16px;
  }
  .hero--4 .hero__viz-sperm {
    display: none;
  }

  /* Hero 2 / Hero 4 — 모바일에서는 모든 요소 우측 정렬 */
  .hero--2 .hero__tag,
  .hero--4 .hero__tag {
    align-self: flex-end;
  }
  /* 박스가 화면 폭 가득 차야 text-align: right가 시각적으로 우측 끝까지 적용됨 */
  .hero--2 .hero__heading,
  .hero--4 .hero__heading,
  .hero--2 .hero__description,
  .hero--4 .hero__description {
    width: 100%;
    max-width: 100%;
    text-align: right;
  }
  .hero--2 .hero__stat,
  .hero--4 .hero__stat {
    width: 100%;
    align-items: flex-end;
    text-align: right;
  }
  .hero--2 .hero__cta,
  .hero--4 .hero__cta {
    align-self: flex-end;
  }
  /* visual-stack은 stretch로 두어 stat이 가로 100%, pill만 우측 정렬 (hero 2와 동일 패턴) */
  .hero--4 .hero__visual-stack {
    align-items: stretch;
    width: 100%;
  }
  .hero--4 .hero__pill {
    align-self: flex-end;
  }
  /* Hero 1/3/4 — 모바일에서는 헤딩 강제 줄바꿈 해제 (hero 2처럼 자연 흐름) */
  .hero__heading-line {
    display: inline;
  }
}

@media (max-width: 480px) {
  .hero__heading {
    font-size: 40px;
  }
}

/* 영문 Hero 제목 — 단어 단위 줄바꿈 + 폰트 크기 한 단계 축소
   word-break:keep-all + overflow-wrap:break-word 전역 설정이 영문에서
   알파벳 단위로 끊기는 문제 해결 */
html[lang="en"] .hero__heading {
  word-break: normal;
  overflow-wrap: normal;
  font-size: 72px;
}
@media (max-width: 1024px) {
  html[lang="en"] .hero__heading { font-size: 48px; }
}
@media (max-width: 768px) {
  html[lang="en"] .hero__heading { font-size: 36px; }
}
@media (max-width: 480px) {
  html[lang="en"] .hero__heading { font-size: 32px; }
}

/* -----------------------------
   2. Stats Section — 위기가 지속되는 이유 (Figma 85:2713)
   "진단의 사각지대" / "여성 우선 치료의 역설" / "시장의 편향"
   ----------------------------- */
.stats {
  position: relative;
  padding: 240px 0;
  background: var(--surface-dark-blue-3);
  overflow: hidden;
  isolation: isolate;
}

/* 보라 ambient glow 2개 (좌상단 + 우하단) */
.stats__glow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px);
  background: radial-gradient(
    ellipse at center,
    rgba(131, 0, 255, 0.5) 0%,
    rgba(131, 0, 255, 0) 70%
  );
}
.stats__glow--top {
  inset: -14% -50% 60% 14%;
}
.stats__glow--bottom {
  inset: 68% 8% -22% -44%;
  opacity: 0.7;
}

.stats__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x);
}

/* 인트로 — 우측 정렬 */
.stats__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-end;
  text-align: right;
}

.stats__heading {
  font-family: var(--font-pretendard);
  font-size: 100px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-neutral-2);
  margin: 0;
}

.stats__lead {
  font-family: var(--font-pretendard);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-neutral-3);
  margin: 0;
}

.lead-highlight {
  padding: 0 0.12em;
  background-color: #AF5CFF;
  color: var(--surface-white);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.text-highlight-white {
  color: #ffffff;
}

/* 그룹: 가운데 정렬 (제목 + 카드 그리드) */
.stats__group {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 40px;
  align-items: center;
}

.stats__title {
  font-family: var(--font-pretendard);
  font-size: 50px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-neutral-2);
  text-align: center;
  margin: 0;
}

.stats__grid {
  display: grid;
  gap: 24px;
  width: 100%;
}

.stats__grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.stats__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.stats__grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.stats__group--ticker {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
}

.stats__ticker {
  width: 100%;
  overflow: hidden;
}

.stats__ticker-track {
  --stats-ticker-distance: 4896px;
  --stats-ticker-duration: 40.8s;
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  width: max-content;
  animation: statsTickerScroll var(--stats-ticker-duration) linear infinite;
  will-change: transform;
}

.stats__ticker-track .stat-card {
  display: grid;
  grid-template-rows: 37px minmax(168px, 1fr) auto;
  align-items: stretch;
  flex: 0 0 clamp(450px, 45vw, 588px);
  min-height: 280px;
}

.stats__ticker-track .stat-card__value {
  align-self: center;
}

.stats__ticker-track .stat-card__caption {
  align-self: end;
}

.stats__ticker-track .stat-card:nth-child(odd) {
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    linear-gradient(
      180deg,
      var(--surface-dark-purple-3) 0%,
      var(--surface-dark-purple-2) 100%
    );
}

.stats__ticker-track .stat-card:nth-child(even) {
  background: linear-gradient(
    180deg,
    var(--surface-dark-blue-2) 0%,
    var(--surface-dark-blue-1) 100%
  );
}

.stats__ticker-track .stat-card:nth-child(odd) .stat-card__source {
  color: var(--surface-secondary);
}

.stats__ticker-track .stat-card:nth-child(odd) .stat-card__source::before {
  background-color: var(--surface-secondary);
}

.stats__ticker-track .stat-card:nth-child(even) .stat-card__source {
  color: var(--surface-primary);
}

.stats__ticker-track .stat-card:nth-child(even) .stat-card__source::before {
  background-color: var(--surface-primary);
}

@keyframes statsTickerScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-1 * var(--stats-ticker-distance)), 0, 0);
  }
}

/* 카드 공통 */
.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 24px;
  overflow: hidden;
  text-align: center;
}

/* 카드 변형 — 다크블루 그라디언트 */
.stat-card--blue {
  background: linear-gradient(
    180deg,
    var(--surface-dark-blue-2) 0%,
    var(--surface-dark-blue-1) 100%
  );
}

/* 카드 변형 — 다크보라 그라디언트 + 검정 오버레이 */
.stat-card--purple {
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    linear-gradient(
      180deg,
      var(--surface-dark-purple-3) 0%,
      var(--surface-dark-purple-2) 100%
    );
}

/* 출처 라벨 — Figma 사양 (8px dot + 14px Medium uppercase) */
.stat-card__source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 16px;
  background: var(--surface-opacity-black-3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--font-pretendard);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: left;
  align-self: flex-start;
}

.stat-card__source::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.stat-card__source--empty {
  visibility: hidden;
}

/* blue 카드 — cyan source */
.stat-card--blue .stat-card__source {
  color: var(--surface-primary);
}
.stat-card--blue .stat-card__source::before {
  background-color: var(--surface-primary);
}

/* purple 카드 — secondary(보라) source */
.stat-card--purple .stat-card__source {
  color: var(--surface-secondary);
}
.stat-card--purple .stat-card__source::before {
  background-color: var(--surface-secondary);
}

/* 거대 숫자 + 단위 (Figma: 200px Barlow Condensed ExtraLight + 80px Pretendard Light) */
.stat-card__value {
  margin: 0;
  text-align: center;
  color: var(--surface-white);
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* 1200px 이상에서는 168px(=14% of 1200)로 고정, 그 이하에서는 14vw 비율로 축소 */
.stat-card__num {
  font-family: var(--font-barlow);
  font-weight: 200;
  font-size: clamp(96px, 14vw, 168px);
  line-height: 1;
}

/* 1200px 이상에서는 67px(≈5.6% of 1200)로 고정 */
.stat-card__unit {
  font-family: var(--font-pretendard);
  font-weight: 300;
  font-size: clamp(40px, 5.6vw, 67px);
  line-height: 1.5;
}

/* 캡션 — 24px Medium 가운데 정렬 */
.stat-card__caption {
  margin: 0;
  padding-top: 16px;
  font-family: var(--font-pretendard);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-neutral-3);
  text-align: center;
}

@media (max-width: 1024px) {
  .stats {
    padding: 160px 0;
  }
  .stats__heading {
    font-size: 64px;
  }
  .stats__lead {
    font-size: 18px;
  }
  .stats__title {
    font-size: 36px;
  }
  .stats__grid--3,
  .stats__grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats__ticker-track .stat-card {
    flex-basis: 510px;
  }
  .stat-card__caption {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .stats {
    padding: 120px 0;
  }
  .stats__heading {
    font-size: 44px;
  }
  .stats__title {
    font-size: 28px;
  }
  .stats__grid--2,
  .stats__grid--3,
  .stats__grid--4 {
    grid-template-columns: 1fr;
  }
  .stats__ticker-track {
    gap: 16px;
  }
  .stats__ticker-track .stat-card {
    flex-basis: 420px;
    min-height: 240px;
  }
  .stat-card {
    padding: 24px;
  }
  .stat-card__caption {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stats__ticker {
    overflow-x: auto;
  }
  .stats__ticker-track {
    animation: none;
  }
}

/* -----------------------------
   3. Recovery Section — 생식력은 회복될 수 있다 (Figma 85:2801)
   - 시안 배경, 다크블루 텍스트 + 흰색 거대 숫자
   ----------------------------- */
.recovery {
  position: relative;
  padding: 240px 0 0;
  background-color: var(--surface-primary);
  color: var(--surface-dark-blue-3);
  overflow: hidden;
}

.recovery__inner {
  display: flex;
  flex-direction: column;
  gap: 120px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x);
}

/* 인트로 — 좌측 정렬, 다크블루 */
.recovery__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.recovery__heading {
  font-family: var(--font-pretendard);
  font-size: 100px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-dark-blue-3);
  margin: 0;
}

.recovery__lead {
  font-family: var(--font-pretendard);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-dark-blue-3);
  margin: 0;
}

.recovery__lead-accent {
  font-weight: 500;
  color: var(--surface-white);
}

/* 출처 라벨 — 검정 반투명 박스 + cyan dot/text */
.recovery__source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 16px;
  margin-top: 16px;
  background: var(--surface-opacity-black-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--font-pretendard);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-primary);
  text-transform: uppercase;
  white-space: normal;
}

.recovery__source::before {
  content: '';
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--surface-primary);
}

/* 70-80 빅스탯 — 가운데 정렬 */
.recovery__big-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  margin: 0;
}

.recovery__big-num {
  font-family: var(--font-barlow);
  font-weight: 700;
  /* 1200px 이상에서 480px 고정, 그 이하에서는 비례 축소 */
  font-size: clamp(160px, 40vw, 480px);
  line-height: 1;
  color: var(--surface-white);
  letter-spacing: -0.02em;
  margin: 0;
  white-space: nowrap;
}

.recovery__big-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 64px;
  background: var(--surface-white);
  color: var(--surface-primary);
  border-radius: 99px;
  font-family: var(--font-pretendard);
  font-size: 50px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

.recovery__caption {
  font-family: var(--font-pretendard);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-white);
  margin: 0;
}

/* CTA 블록 — 가운데 정렬, 다크블루 */
.recovery__cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.recovery__cta-heading {
  font-family: var(--font-pretendard);
  font-size: 100px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-dark-blue-3);
  margin: 0;
}

.recovery__cta-sub {
  font-family: var(--font-pretendard);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-dark-blue-3);
  margin: 0;
  max-width: 1000px;
}

/* 돋보기 + 정자 일러스트 — 섹션 바닥에 닿도록 */
.recovery__magnifier {
  display: block;
  width: 100%;
  max-width: 856px;
  margin-top: 40px;
  margin-bottom: 0;
}

.recovery__magnifier img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media (max-width: 1024px) {
  .recovery {
    padding: 160px 0 0;
  }
  .recovery__inner {
    gap: 80px;
  }
  .recovery__heading,
  .recovery__cta-heading {
    font-size: 64px;
  }
  .recovery__lead,
  .recovery__caption,
  .recovery__cta-sub {
    font-size: 18px;
  }
  .recovery__big-pill {
    font-size: 32px;
    padding: 8px 40px;
  }
}

@media (max-width: 600px) {
  .recovery {
    padding: 120px 0 0;
  }
  .recovery__heading,
  .recovery__cta-heading {
    font-size: 44px;
  }
  .recovery__big-pill {
    font-size: 24px;
    padding: 8px 28px;
  }
}

/* -----------------------------
   4. Products Section — 제품 영역
   생식능력을 확인하는 가장 빠른 방법
   ----------------------------- */
.products {
  background-color: var(--surface-white);
  color: var(--surface-dark-blue-3);
  padding: 120px 0;
}

.products__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 80px;
}

.products__pill {
  display: inline-block;
  padding: 8px 24px;
  background: var(--surface-primary);
  color: var(--surface-white);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: 24px;
}

.products__heading {
  font-family: var(--font-pretendard);
  font-size: clamp(40px, 7vw, 100px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-dark-blue-3);
  margin-bottom: 20px;
}

.products__lead {
  font-family: var(--font-pretendard);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-dark-blue-3);
}

/* 제품 사진 (product_hagobogo / product_hagobogo_pro) */
.products__photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 86px;
  max-width: 806px;
  margin: 0 auto 60px;
}

.products__photo-item {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.products__photo-item img {
  width: 100%;
  max-width: 360px;
  height: auto;
  object-fit: contain;
}

/* 제품 카드 그리드 */
.products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 86px;
  max-width: 806px;
  margin: 0 auto 80px;
}

.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.product-card__logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card__logo img {
  width: 100%;
  max-width: 360px;
  height: auto;
  object-fit: contain;
}

/* Figma: 177x65, padding 16px 32px, font 24px/700 */
.product-card__cta {
  font-size: 24px;
  font-weight: 700;
  padding: 16px 32px;
  white-space: nowrap;
}

/* 비교표 */
.compare-table {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.compare-table__row {
  display: grid;
  /* Figma: 300px | 40px gap | 240px | 40px gap | 300px (총 920px, 1184px 행 내 중앙 정렬) */
  grid-template-columns: 300px 240px 300px;
  justify-content: center;
  align-items: center;
  column-gap: 40px;
  padding: 32px 0;
  background: #F2F6F9;
  border-radius: 12px;
  font-family: var(--font-pretendard);
  letter-spacing: var(--tracking-tight);
}

.compare-table__cell {
  font-weight: 700;
  font-size: clamp(20px, 3.5vw, 50px);
  color: #0B1824;
}

.compare-table__cell--left {
  text-align: center;
}

.compare-table__cell--right {
  text-align: center;
}

.compare-table__cell--label {
  text-align: center;
  font-size: clamp(14px, 2vw, 32px);
  font-weight: 700;
  color: #8F979F;
}

@media (max-width: 768px) {
  .products {
    padding: 80px 0;
  }
  .products__lead {
    font-size: 18px;
  }
  /* 모바일에서도 2열 유지 — 데스크탑과 동일 레이아웃 */
  .products__photos {
    gap: 16px;
    max-width: 100%;
    margin-bottom: 32px;
  }
  .products__grid {
    gap: 16px;
    max-width: 100%;
    margin-bottom: 40px;
  }
  .product-card {
    gap: 16px;
  }
  .product-card__logo img {
    max-width: 100%;
  }
  .product-card__cta {
    font-size: clamp(12px, 3.5vw, 18px);
    padding: 10px 16px;
  }
  .compare-table__row {
    /* 모바일에서도 3열 유지, 비율 기반으로 스케일 */
    grid-template-columns: 1fr clamp(56px, 18vw, 120px) 1fr;
    column-gap: clamp(8px, 2vw, 24px);
    padding: 16px 12px;
    border-radius: 8px;
  }
  .compare-table__cell {
    font-size: clamp(14px, 4.5vw, 28px);
  }
  .compare-table__cell--label {
    font-size: clamp(10px, 2.8vw, 18px);
  }
}

/* -----------------------------
   5. Section divider intro — "환경적 공격" / "위기가 지속되는 이유" 헤더 텍스트
   ----------------------------- */
.section-intro {
  padding: 96px 0 0;
  text-align: center;
}

.section-intro__title {
  font-family: var(--font-pretendard);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-neutral-2);
  margin-bottom: 24px;
}

.section-intro__title--dark {
  color: var(--surface-dark-blue-3);
}

.section-intro__lead {
  font-family: var(--font-pretendard);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-neutral-3);
  max-width: 760px;
  margin: 0 auto;
}

/* -----------------------------
   6. Animations — 스크롤 진입 효과
   ----------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------
   7. Outreach — 아웃리치 마케팅 섹션
   배경: --surface-primary-2 (#c4ebf3)
   ----------------------------- */
/* Figma: 배경색 #C4EBF3 (light blue), padding 240px 상하 */
.outreach {
  background-color: #C4EBF3;
  color: #0B1824;
  padding: 120px 0;
}

.outreach__head {
  margin-bottom: 64px;
}

.outreach__head--right {
  text-align: right;
}

/* Figma: 100px/700, #0B1824 */
.outreach__title {
  font-family: var(--font-pretendard);
  font-size: clamp(40px, 7vw, 100px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: #0B1824;
  margin-bottom: 16px;
}

/* Figma: 24px/500, #0B1824 */
.outreach__lead {
  font-family: var(--font-pretendard);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-dark-blue-3);
}

.outreach__head--right .outreach__lead {
  margin-left: auto;
}

/* 인플루언서 그리드 — Figma: 4열, gap 8px, 각 280x392 */
.outreach__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 40px;
}

.outreach__card {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 280 / 392;
  transition: transform 0.25s ease;
}

.outreach__card:hover {
  transform: translateY(-4px);
}

.outreach__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 인스타그램 통계 알약 — Figma: max-width 800px, gap 20px */
.outreach__stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

/* Figma: 800x72, bg white, padding 16px 40px, border-radius 99px */
.social-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 800px;
  padding: 16px 40px;
  background: #ffffff;
  border-radius: 99px;
  gap: 24px;
}

/* 인스타그램 아이콘 — 좌측 고정 */
.social-pill__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
}

/* 뷰 아이콘 + 조회수 — 중앙 고정폭 */
.social-pill__count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-pretendard);
  font-size: 21px;
  font-weight: 700;
  color: #0B1824;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 110px;
}

.social-pill__count-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

/* URL — 우측 */
.social-pill__url {
  font-size: 18px;
  font-weight: 500;
  color: #2EC4FF;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.social-pill__url:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .outreach {
    padding: 80px 0;
  }
  .outreach__lead {
    font-size: 18px;
  }
  .outreach__head {
    margin-bottom: 40px;
  }
  .outreach__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .social-pill {
    padding: 12px 20px;
    gap: 14px;
  }
  .social-pill__icon {
    width: 28px;
    height: 28px;
  }
  .social-pill__count {
    font-size: 15px;
    min-width: 80px;
  }
  .social-pill__count-icon {
    width: 16px;
    height: 16px;
  }
  .social-pill__url {
    font-size: 12px;
  }
}

/* -----------------------------
   8. Channels — 해외시장 마케팅 채널
   ----------------------------- */
.channels {
  margin-top: 80px;
  background: var(--surface-white);
  border-radius: 24px;
  padding: 56px 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.channels__title {
  text-align: center;
  font-family: var(--font-pretendard);
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-dark-blue-3);
  margin-bottom: 48px;
}

.channels__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px 64px;
  margin-bottom: 56px;
}

.channels__logo {
  height: 56px;
  max-width: 240px;
  object-fit: contain;
  filter: grayscale(0.1);
  transition: filter 0.25s ease, transform 0.25s ease;
}

.channels__logo:hover {
  filter: grayscale(0);
  transform: scale(1.05);
}

.channels__listings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.channels__listing {
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: flex-start;
}

.channels__listing img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

@media (max-width: 768px) {
  .channels {
    margin-top: 56px;
    padding: 40px 20px;
  }
  .channels__logos {
    gap: 24px 32px;
  }
  .channels__logo {
    height: 40px;
    max-width: 140px;
  }
  .channels__listings {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------
   9. Office — 사무실/공간 이미지 푸터 직전
   ----------------------------- */
/* ========== Office 섹션 (Figma 85:2973) ========== */
.office {
  background: #F2F6F9;
  padding: 120px 0 0;
}

/* 헤더: 제목 + 로고 + 설명 */
.office__head {
  margin-bottom: 80px;
}

.office__title {
  font-family: var(--font-pretendard);
  font-size: clamp(40px, 7vw, 100px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: #0B1824;
  margin-bottom: 40px;
}

/* 로고 + 설명 한 행 */
.office__head-body {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 32px 40px;
  background: #ffffff;
  border-radius: 16px;
}

.office__logo {
  width: 230px;
  flex-shrink: 0;
  object-fit: contain;
}

.office__desc {
  font-family: var(--font-pretendard);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: #0B1824;
  flex: 1;
}

/* 생산 설비 2×2 그리드 — Figma: 575px×2열, gap 32, 각 이미지 575x319 */
.office__facilities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 80px;
}

.office__facility {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.office__facility img {
  width: 100%;
  aspect-ratio: 575 / 319;
  object-fit: cover;
  border-radius: 12px;
}

.office__facility figcaption {
  font-family: var(--font-pretendard);
  font-size: clamp(14px, 2.5vw, 32px);
  font-weight: 500;
  color: #050A27;
  text-align: center;
  padding-top: 4px;
}

/* 인증 카드 3열 — Figma: 360x261, gap 32 */
.office__certs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 80px;
}

.office-cert-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 269px;
  padding: 28px 28px 24px;
  background: #ffffff;
  border: 1px solid rgba(11, 24, 36, 0.08);
  border-radius: 8px;
  box-shadow: 0 18px 34px rgba(11, 24, 36, 0.12);
}

.office-cert-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 142px;
}

.office-cert-card__mark img {
  display: block;
  width: auto;
  max-width: 148px;
  max-height: 132px;
  object-fit: contain;
}

.office-cert-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.office-cert-card__title {
  font-family: var(--font-pretendard);
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: #0B1824;
}

.office-cert-card__desc {
  font-family: var(--font-pretendard);
  font-size: clamp(14px, 1.35vw, 20px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  color: #8B949E;
}

.office-cert-card__desc,
.office-cert-card__title {
  overflow-wrap: anywhere;
}

.office__certs > img {
  width: 100%;
  height: auto;
  display: block;
}

/* 사무실 전경 풀 와이드 */
.office__photo {
  width: 100%;
  margin-top: 0;
}

.office__photo img {
  width: 100%;
  height: clamp(180px, 20vw, 268px);
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 모바일 대응 */
@media (max-width: 768px) {
  .office {
    padding: 80px 0 0;
  }
  .office__head-body {
    flex-direction: column;
    gap: 24px;
    padding: 24px;
  }
  .office__logo {
    width: 160px;
  }
  .office__facilities {
    gap: 16px;
    margin-bottom: 56px;
  }
  .office__certs {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 56px;
  }
  .office-cert-card {
    min-height: 244px;
    padding: 24px;
  }
  .office-cert-card__mark {
    height: 132px;
  }
}

/* ============================================
   Threats — 환경적 공격 (Figma 85:2679)
   - 다크 보라 배경 + mix-blend-screen 일러스트
   - 3개 카드 그리드 (각 출처/제목/본문)
   ============================================ */
.threats {
  position: relative;
  padding: 240px 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    var(--surface-dark-purple-2);
  overflow: hidden;
  isolation: isolate;
}

.threats__bg {
  position: absolute;
  top: -108px;
  left: -256px;
  width: calc(100% + 512px);
  height: 1340px;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  filter: blur(4px);
}

.threats__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.threats__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x);
}

.threats__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.threats__title {
  font-family: var(--font-pretendard);
  font-size: 100px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-neutral-2);
}

.threats__lead {
  font-family: var(--font-pretendard);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-neutral-3);
  margin: 0;
}

.threats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.threat-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  min-height: 320px;
  padding: 40px;
  border: 1px solid #AF5CFF;
  background: var(--surface-dark-purple-3);
}

.threat-card__source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 16px;
  background: var(--surface-opacity-black-3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-family: var(--font-pretendard);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-secondary);
  text-transform: uppercase;
  white-space: nowrap;
}

.threat-card__source::before {
  content: '';
  width: 8px;
  height: 8px;
  background-color: var(--surface-secondary);
  flex-shrink: 0;
}

.threat-card__title {
  margin: 0;
  padding-top: 16px;
  font-family: var(--font-pretendard);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--surface-neutral-2);
}

.threat-card__desc {
  font-family: var(--font-pretendard);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  color: var(--surface-neutral-3);
}

@media (max-width: 1024px) {
  .threats {
    padding: 160px 0;
  }
  .threats__title {
    font-size: 72px;
  }
  .threats__lead {
    font-size: 18px;
  }
  .threats__grid {
    grid-template-columns: 1fr;
  }
  .threat-card {
    height: auto;
    min-height: 260px;
  }
}

@media (max-width: 768px) {
  .threats {
    padding: 120px 0;
  }
  .threats__title {
    font-size: 56px;
  }
  .threats__lead {
    font-size: 18px;
  }
  .threat-card {
    padding: 32px;
  }
  .threat-card__title {
    font-size: 22px;
  }
  .threat-card__desc {
    font-size: 16px;
  }
}