/* ═══════════════════════════════════════
   SINGLE BANNER — single-banner.css (v12)
   daphone-landing-page

   2026-04-20 v12 전면 재설계 (v11 → v12):
     ★ 옵션 C 선택: 이미지 제거, 텍스트 전용 검정 섹션
     ★ 기존 single-banner-with-text 구조 제거
        (단, .single-banner 는 banner-04 가 여전히 사용하므로 유지)
     ★ 신규 .event-banner 클래스 체계
        - 이미지 없음 → 겹침 문제 원천 차단
        - 반응형 분기 대폭 축소 (창 폭 변화에 무관)
     ★ 글자 마스크 스윕 애니메이션은 그대로 유지
        (hero "역전" 효과와 동일 기법)
     ★ 섹션 자체가 높이 담당, 텍스트는 중앙정렬만
═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   이벤트 배너 섹션 (외부 간격 + 검정 배경)
═══════════════════════════════════════ */
.event-banner-section {
  display: block;
  padding-block: 100px;
  padding-inline: 5%;
  background: #000;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════
   이벤트 배너 본체 (클릭 가능 링크)
═══════════════════════════════════════ */
.event-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.event-banner:hover {
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════
   텍스트 래퍼 (슬라이드-IN 진입)
═══════════════════════════════════════ */
.event-banner__text {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: clamp(1.1rem, 2.6vw, 2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;

  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.event-banner__main {
  display: inline-block;
  color: #fff;
}

/* ═══════════════════════════════════════
   ★ "다폰" & "이벤트" — 글자 마스크 스윕
   (hero "역전"과 동일 기법)
═══════════════════════════════════════ */

.event-banner__accent {
  display: inline-block;
}

.event-banner__accent em {
  display: inline-block;
  position: relative;
  font-style: normal;
  font-weight: 900;
  font-size: 1.25em;
  padding: 0 4px;

  /* ── 글자 마스크 스윕 기본 상태 ── */
  background-image: linear-gradient(
    90deg,
    var(--gold, #c9a84c) 0%,
    var(--gold, #c9a84c) 100%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  -webkit-background-clip: text;
  background-clip: text;
  color: rgba(255, 255, 255, 0.3);

  transition:
    background-size 0.9s cubic-bezier(0.6, 0.2, 0.3, 1),
    color 0.9s cubic-bezier(0.6, 0.2, 0.3, 1);
}

/* ═══════════════════════════════════════
   스크롤 진입 시 (.is-active)
═══════════════════════════════════════ */

.event-banner.is-active .event-banner__text {
  opacity: 1;
  transform: translateY(0);
}

.event-banner.is-active .event-banner__accent--1 em {
  background-size: 100% 100%;
  color: transparent;
  transition-delay: 0.5s;
}

.event-banner.is-active .event-banner__accent--2 em {
  background-size: 100% 100%;
  color: transparent;
  transition-delay: 1.1s;
}

/* ═══════════════════════════════════════
   반응형 (창 폭 변화에 무관한 구조)
═══════════════════════════════════════ */

@media (max-width: 768px) {
  .event-banner-section {
    padding-block: 70px;
  }
  .event-banner {
    padding: 30px 15px;
  }
  .event-banner__text {
    gap: 6px;
  }
  .event-banner__accent em {
    padding: 0 3px;
  }
}

@media (max-width: 480px) {
  .event-banner-section {
    padding-block: 50px;
  }
  .event-banner {
    padding: 24px 10px;
  }
  .event-banner__text {
    gap: 4px;
    line-height: 1.5;
  }
  .event-banner__accent em {
    padding: 0 2px;
    font-size: 1.2em;
  }
}

/* ═══════════════════════════════════════
   [LEGACY] .single-banner 유지
   - banner-04 는 여전히 .single-banner 클래스 사용 중
   - 단독 이미지 배너용 기본 스타일만 유지
═══════════════════════════════════════ */
.single-banner {
  display: block;
  margin: 0 auto;
  position: relative;
}

.single-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.single-banner + .single-banner {
  margin-top: 40px;
}

@media (max-width: 768px) {
  .single-banner + .single-banner {
    margin-top: 24px;
  }
}

/* ═══════════════════════════════════════
   접근성 (prefers-reduced-motion)
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .event-banner__text {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .event-banner__accent em {
    transition: none !important;
    background-size: 100% 100% !important;
    color: transparent !important;
  }
  .event-banner:hover {
    transform: none !important;
  }
}