/* ═══════════════════════════════════════════════════════════
   WHY REASONS — why.css
   #why 내부 "왜 다폰인가" 좌우 교차 4블록 (BBQ 레퍼런스식 2단) — 02 '투자금 회수' 삭제됨
   · 각 블록 = .why-row(텍스트칸 + 이미지칸). 수동 .why-row--reverse 로 좌우 교차(base/reverse/base/reverse).
   · #why 는 .section--tint(연노랑) 밴드 → 내부는 투명, 톤이 비치게. (다크 배경 롤백됨)
   · 강조 단어는 .why-gold(기존 --gold 변수 재사용, hex 직박 금지).
   · 이미지 자리 src="#"(빈 상태) → 깨진 아이콘 대신 연골드 점선 placeholder 박스.
   · 등장: scroll-reveal 엔진(data-reveal + .is-revealed 토글) 재사용.
     - 자체 IntersectionObserver 만들지 않음. 새 JS 없음.
     - 텍스트칸 translateX / 이미지칸 scale 초기상태만 이 파일에서 스코프 정의.
     - 진입 애니는 바깥 래퍼(.why-row__text/.why-row__media), hover 는 안쪽 img → transform 점유 충돌 분리.
     - prefers-reduced-motion 은 scroll-reveal.css 의 !important 가드가 자동 처리.
   · 검정 풀배경·이모지 없음. 빨강은 포인트 외 사용 안 함.
═══════════════════════════════════════════════════════════ */

.why-reasons {
  background: transparent; /* 톤은 .section--tint(연노랑) 밴드가 담당 */
  scroll-margin-top: 80px;
}

/* ── 한 블록(좌우 2단) ── */
.why-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 72px) 24px;
}

/* 짝수 블록(02·04) 좌우 반전 — 이미지 좌 / 텍스트 우 */
.why-row--reverse .why-row__text {
  order: 2;
}
.why-row--reverse .why-row__media {
  order: 1;
}

/* ── 텍스트 칸 ── */
.why-row__text {
  min-width: 0;
}
.why-row__title {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 900;
  line-height: 1.32;
  color: var(--color-text, #1a1a1a);
  margin: 0;
  word-break: keep-all;
}
/* 강조 단어 — 골드(기존 변수 재사용) */
.why-gold {
  color: var(--gold, #f0c000);
}

/* BBQ식 가는 가로 구분선 — 제목과 부제 사이 */
.why-row__rule {
  display: block;
  width: 56px;
  height: 3px;
  margin: 20px 0;
  border-radius: 2px;
  background: var(--gold, #f0c000);
}

.why-row__sub {
  font-size: clamp(0.96rem, 1.6vw, 1.1rem);
  line-height: 1.85;
  color: var(--color-text-sub, #555);
  margin: 0;
  word-break: keep-all;
}

/* ── 이미지 칸 — src="#"(빈 상태) placeholder 박스 ── */
.why-row__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 20px;
  /* 연한 골드/그레이 배경 + 점선 → 깨진 이미지 아이콘 안 뜨고 박스로 보이게 */
  background: color-mix(in srgb, var(--gold, #f0c000) 8%, #f4f4f4);
  border: 1px dashed color-mix(in srgb, var(--gold, #f0c000) 28%, #ffffff);
}
.why-row__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 빈/깨진 상태에서 alt 텍스트·깨짐 아이콘 노출 최소화 */
  color: transparent;
  font-size: 0;
}

/* hover — 안쪽 img 에만 scale(진입 transform 은 바깥 .why-row__media → 충돌 회피) */
@media (hover: hover) {
  .why-row__img {
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  .why-row__media:hover .why-row__img {
    transform: scale(1.02);
  }
}

/* ═══════════════════════════════════════════════════════════
   진입 애니메이션 — scroll-reveal 엔진(data-reveal/.is-revealed) 재사용
   · 초기 opacity:0 + transition 은 scroll-reveal.css 의 [data-reveal] 기본 규칙이 담당.
   · 여기서는 초기 transform(translateX/scale)만 섹션 스코프로 덮어씀.
   · .is-revealed 최종상태(transform:none)는 명시 규칙으로 항상 우선.
═══════════════════════════════════════════════════════════ */

/* 텍스트칸: 좌측 블록 -24px → 0 / 우측(.reverse) 블록 +24px → 0 */
html.sr-ready .why-row__text[data-reveal] {
  transform: translateX(-24px);
}
html.sr-ready .why-row--reverse .why-row__text[data-reveal] {
  transform: translateX(24px);
}
/* 이미지칸: scale 0.96 → 1 */
html.sr-ready .why-row__media[data-reveal] {
  transform: scale(0.96);
}
/* 등장 완료 — 최종상태(소스 순서상 마지막 → 동일 특이도에서 우선) */
html.sr-ready .why-row__text[data-reveal].is-revealed,
html.sr-ready .why-row__media[data-reveal].is-revealed {
  transform: none;
}

/* ═══════════════════════════════════════════════════════════
   반응형 — 모바일 세로 1단 (텍스트 먼저 → 이미지)
═══════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .why-row {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 560px;
  }
  /* 모든 블록 동일 순서: 텍스트(1) → 이미지(2). 교차는 데스크탑에서만 */
  .why-row__text,
  .why-row--reverse .why-row__text {
    order: 1;
  }
  .why-row__media,
  .why-row--reverse .why-row__media {
    order: 2;
  }
}

/* (WHY CLOSER 블록 제거됨 — "월 평균 매출…" 마무리 블록은 dotmap 페이즈3로 이식.
   .why-closer* 마크업/스타일 모두 삭제. 관련 CSS 없음.) */