/* ═══════════════════════════════════════════════════════════
   WHY HERO — why-hero.css  (풀스크린 100vh 연혁 히어로 · 레퍼 1:1 번안)
   #why 존 인트로 — 기존 #hero-secondary 헤더 통합(카피를 .why-hero__copy 로 이식). 타임라인 없음.
   · 배경 = 이미지 placeholder(지혁님 직접 삽입) + 단색 폴백 + 골드 듀오톤 오버레이(레퍼 초록→골드 번안).
   · FROM 2012=좌상 슬라이드(translateX -), TO 2026=우 슬라이드(translateX +). 위치=절대좌표(top/left/right),
     애니=transform 전용으로 분리(중복 충돌 방지). scroll-reveal .is-revealed 키잉 → 반복재생.
   · 가운데 알약 = flex 중앙(transform 미점유) + data-reveal fade-up. 하단 카피 = data-reveal fade-up.
   · Scroll = translateY bounce 루프(X는 translateX(-50%) 유지하며 단일 transform 으로 합성).
   · 직접 hex 금지(--gold/--gold-dark/--black4/--gray3/--white 토큰+fallback), 이모지 없음(Scroll=SVG 화살표).
   · #why 최상단 → dotmap(하단 #signature) sticky 시퀀스보다 위, 무영향.
═══════════════════════════════════════════════════════════ */

.why-hero {
  position: relative;
  display: flex; /* 가운데 알약만 in-flow → 중앙 정렬(transform 미사용 → fade-up 충돌 없음) */
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh; /* 폴백(구형 브라우저) */
  min-height: 100svh; /* 모바일 주소창 영역 제외 — 세로 오버플로/잘림 방지 */
  overflow: hidden;
  isolation: isolate;
  color: var(--white, #ffffff); /* 듀오톤 위 흰 텍스트 */
}

/* ── 배경 이미지 + 골드 듀오톤 오버레이 ── */
.why-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--black4, #1a1a1a); /* 파일 들어오기 전 빈 박스 폴백 — 단색 다크(+ ::after 골드 듀오톤) */
}
/* 배경 이미지 = HTML <img class="why-hero__bg-img">. 지혁님이 src만 교체(경로: assets/images/why/why-hero.jpg).
   z-index 0 → 듀오톤 오버레이(::after, z-index 1) 아래로 깔림 */
.why-hero__bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 영역 꽉 채움 */
  color: transparent; /* 빈/깨진 상태(alt="") 아이콘 노출 최소화 → 폴백 박스 보이게 */
  font-size: 0;
}
/* 듀오톤(상단 그레이 → 하단 골드) + 가독용 어두운 베이스 — 레퍼 초록 자리를 골드로 번안 */
.why-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1; /* 배경 img(z-index 0) 위 → 이미지 위에 듀오톤 덮임(FROM/TO 텍스트 가독) */
  background:
    /* 가독용 어두운 베이스(검정 풀배경 예외 — 히어로 한정, 토큰 기반) */
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--black4, #1a1a1a) 50%, transparent) 0%,
      color-mix(in srgb, var(--black4, #1a1a1a) 28%, transparent) 45%,
      color-mix(in srgb, var(--black4, #1a1a1a) 58%, transparent) 100%
    ),
    /* 듀오톤: 상단 그레이 → 하단 골드 */
    linear-gradient(
        180deg,
        color-mix(in srgb, var(--gray3, #666666) 55%, transparent) 0%,
        transparent 42%,
        color-mix(in srgb, var(--gold, #f0c000) 62%, transparent) 100%
      );
  pointer-events: none;
}

/* ── 좌상 FROM 2012 / 우(중하) TO 2026 — 위치=절대, 애니=transform ── */
.why-hero__from,
.why-hero__to {
  position: absolute;
  z-index: 1;
  font-family: var(--font-en, sans-serif);
  font-size: clamp(1.2rem, 4vw, 3rem); /* 라벨(FROM/TO) 크기 — 확대 */
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
  color: color-mix(
    in srgb,
    var(--white, #ffffff) 55%,
    transparent
  ); /* 라벨 반투명 흰 */
}
.why-hero__from {
  top: clamp(84px, 12vh, 150px); /* 상단 네비/노치 아래 */
  left: clamp(20px, 5vw, 64px);
  text-align: left;
}
.why-hero__to {
  top: clamp(40%, 44vh, 50%);
  right: clamp(20px, 5vw, 64px);
  text-align: right;
}
/* 초대형 연도(폭의 ~40%+) — 흰 채움. z-index 1(엠블럼/카피 아래)로 겹쳐도 가독 유지 */
.why-hero__from b,
.why-hero__to b {
  display: block;
  margin-top: 0.06em;
  font-weight: 700;
  font-size: clamp(
    4.5rem,
    40vw,
    28rem
  ); /* 화면 폭 시원하게 채움 (30vw/20rem → 40vw/28rem, ~1.4x) */
  line-height: 0.82;
  color: var(--white, #ffffff); /* 숫자 흰 채움 */
}

/* ── 가운데 로고 엠블럼 (골드 원 배경 제거 — 회전 점선 링 + 로고만, 로고는 어두운 배경 위 직접 노출) ──
   · 골드 원 배경/그림자 제거. 원 크기/위치(점선 링 지름 기준)는 width/aspect-ratio/border-radius 그대로 유지. */
.why-hero__emblem {
  position: relative;
  z-index: 3; /* 초대형 숫자(z-index 1) 위 — in-flow flex 중앙 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(150px, 22vw, 280px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: transparent; /* 골드 원 배경 제거(linear-gradient + 그림자 삭제) */
}
.why-hero__logo {
  position: relative;
  z-index: 1;
  width: 58%;
  height: 58%;
  object-fit: contain;
}
/* 회전 점선 링 — 로고 원 바깥에 겹침. rotate 전용 무한 루프(느리게 24s). 안쪽 래퍼(.why-hero__ring) 단독 → emblem fade-up 과 transform 분리 */
.why-hero__ring {
  position: absolute;
  inset: clamp(-18px, -1.8vw, -10px); /* 원 바깥으로 */
  border-radius: 50%;
  border: 3px dashed color-mix(in srgb, var(--white, #ffffff) 62%, transparent); /* 점선 눈금 링 */
  animation: whyHeroSpin 24s linear infinite;
}
@keyframes whyHeroSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ── 좌하단 카피 ── */
.why-hero__copy {
  position: absolute;
  z-index: 3; /* 초대형 숫자(z-index 1) 위 — 겹쳐도 카피 가독 우선 */
  left: clamp(20px, 5vw, 64px);
  bottom: clamp(72px, 12vh, 140px);
  max-width: min(620px, 80vw);
  text-align: left;
  text-shadow: 0 2px 14px
    color-mix(in srgb, var(--black4, #1a1a1a) 60%, transparent); /* 흰 숫자 위에서도 분리 */
}
.why-hero__copy h2 {
  font-size: clamp(1.3rem, 3.4vw, 2.4rem);
  font-weight: 900;
  line-height: 1.4;
  word-break: keep-all;
}
.why-hero__copy h2 em {
  font-style: normal;
  color: var(--gold, #f0c000); /* 노란 강조 토큰 */
}
.why-hero__copy p {
  margin-top: clamp(8px, 1.2vw, 14px);
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 500;
  line-height: 1.6;
  color: color-mix(in srgb, var(--white, #ffffff) 88%, transparent);
  word-break: keep-all;
}

/* ── 하단 중앙 Scroll (bounce 루프) ── */
.why-hero__scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(16px, 3vh, 32px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-en, sans-serif);
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: color-mix(in srgb, var(--white, #ffffff) 80%, transparent);
  animation: whyHeroScroll 1.6s ease-in-out infinite;
}
.why-hero__scroll-arrow {
  display: block;
}
/* X는 -50% 유지하며 Y만 bounce → 단일 transform 합성(중복 충돌 방지) */
@keyframes whyHeroScroll {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 8px);
  }
}

/* ── FROM 좌 / TO 우 슬라이드 진입 (container .is-revealed 키잉, 반복재생) ──
   container(.why-hero[data-reveal])가 관찰 대상 → 그 .is-revealed 에 자식 연도 슬라이드 키잉.
   FROM/TO span 은 자체 data-reveal 미보유 → reduced-motion 가드는 아래 별도 블록에서 처리. */
html.sr-ready .why-hero .why-hero__from,
html.sr-ready .why-hero .why-hero__to {
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}
html.sr-ready .why-hero .why-hero__from {
  transform: translateX(-64px); /* 좌에서 진입 */
}
html.sr-ready .why-hero .why-hero__to {
  transform: translateX(64px); /* 우에서 진입 */
}
html.sr-ready .why-hero.is-revealed .why-hero__from,
html.sr-ready .why-hero.is-revealed .why-hero__to {
  opacity: 1;
  transform: translateX(0);
}

/* ── 모션 줄이기 — 슬라이드/스크롤 bounce 정지, 즉시 표시 ──
   (scroll-reveal 가드는 [data-reveal] 만 커버 → FROM/TO·Scroll 은 자체 처리) */
@media (prefers-reduced-motion: reduce) {
  html.sr-ready .why-hero .why-hero__from,
  html.sr-ready .why-hero .why-hero__to {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .why-hero__scroll {
    animation: none !important;
    transform: translateX(-50%) !important;
  }
  .why-hero__ring {
    animation: none !important; /* 회전 링 정지 */
  }
}

/* ── 반응형 — 태블릿 이하: 엠블럼(로고+회전링) 숨김 ──
   FROM/TO 초대형 숫자가 가운데로 모여 로고와 겹치기 시작하는 폭부터. 데스크탑(≥1025px)만 노출.
   부모 display:none 이면 자식도 미렌더(회전 애니도 정지)이나, 명시적으로 셋 다 숨김.
   덮는 규칙 없음(자식에 display 규칙 없고 동일 특이성 후행 → 우선 적용) → !important 불필요. */
@media (max-width: 1024px) {
  .why-hero__emblem,
  .why-hero__ring,
  .why-hero__logo {
    display: none;
  }
}

/* ── 반응형 — 좁은 화면: 초대형 숫자 겹침 완화 ── */
@media (max-width: 640px) {
  .why-hero__from b,
  .why-hero__to b {
    font-size: clamp(
      3rem,
      42vw,
      10rem
    ); /* 모바일 — 폭 채우되 줄바꿈/축소로 안 깨지게 */
  }
  .why-hero__to {
    top: clamp(38%, 42vh, 46%);
  }
  .why-hero__copy {
    bottom: clamp(84px, 16vh, 150px);
  }
}