/* ═══════════════════════════════════════════════════════════
   EVT BAND — evt-band.css
   점주 이벤트 영역: 휴대폰 "이벤트 충전" 게이지(100% 차오름 + 수면 물결)
   레퍼런스 "그릇에 물 차오름" → 휴대폰에 골드 차오름으로 번안.

   · 골드 밴드(var(--gold)). 상단 평평 / 하단 concave 곡선 컷(복원) → 아래 #promo(흰/tint)로 둥글게 이어짐.
   · 화면 바탕 흰색 + 흰 글씨 '드러남' 연출: 처음엔 흰 위 흰 글씨라 안 보이다가 골드 차오르며 드러남(의도).
   · 우측 멘트(배지·제목·부제) 전부 흰색(골드 배경 대비).
     색: 골드(게이지·물결·밴드) + 흰색(화면·글씨·멘트) + 다크브라운(휴대폰 테두리·노치·배지 배경).
   · 가운데 정렬(휴대폰 고정) + 우측 멘트는 충전 100%(3초) 시 translateX 슬라이드 등장.
   · 다크브라운 = 시스템에 brown 토큰 부재 → 기존 골드/블랙 변수에서 1회 파생(직접 hex 아님).
   · 진입: scroll-reveal(data-reveal + .is-revealed) 재사용, unobserve 없음(재진입 반복 재생).
   · transform 점유 충돌 방지: 휴대폰 외곽(opacity만) / 게이지(translateY) / 물결(translateX) / 멘트(translateX) = 각각 다른 요소.
   · prefers-reduced-motion → 애니 정지, 최종(100%) 즉시 표시. 빨강·이모지 없음.
═══════════════════════════════════════════════════════════ */

.evt-band {
  position: relative;
  background: var(--gold, #f0c000);
  /* 상단 평평 / 하단 곡선용 여유 패딩(곡선이 콘텐츠 안 가리게) */
  padding: clamp(56px, 8vw, 88px) 24px clamp(104px, 13vw, 150px);
  overflow: hidden;
  /* 다크브라운 토큰(시안 #412402 매핑) — 기존 변수에서 1회 파생, 이후 var()로만 재사용 */
  --evt-brown: color-mix(
    in srgb,
    var(--gold-dark, #c9a000) 42%,
    var(--black, #000000)
  );
  /* 보라색 토큰 — 요청에 따른 1회성 강조(팔레트(골드/브라운) 외 색, 단일 정의 후 var()로만 사용) */
  --evt-purple: #7c3aed;
}

/* ── 하단 곡선 컷(복원) ── 골드 영역 하단이 둥글게, 아래 #promo 배경(흰/tint)이 반원으로 올라옴.
   left/right -5% 로 양옆 여유. ⚠️ 정적 border-radius 만 — transform 애니 금지(점유 충돌 방지). */
.evt-band::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5%;
  right: -5%;
  height: clamp(56px, 8vw, 96px);
  background: var(--color-bg-tint, #fff7e0); /* = 아래 #promo(.section--tint) 배경 */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 1;
}

/* ── 레이아웃 ── 휴대폰+멘트 묶음을 가운데 정렬(휴대폰 고정, 멘트만 슬라이드 등장) */
.evt-band__inner {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2px, 0.6vw, 8px); /* 휴대폰↔텍스트 더 바짝(가운데 정렬 유지) */
}
.evt-band__copy {
  max-width: 460px;
}

/* ═══════════════════════════════════════════════════════════
   휴대폰 실루엣 + 게이지
═══════════════════════════════════════════════════════════ */
.phone {
  position: relative;
  width: clamp(158px, 22vw, 208px);
  aspect-ratio: 1 / 2;
  margin: 0 auto;
  border: 5px solid var(--evt-brown);
  border-radius: 34px;
  background: var(--white, #ffffff); /* 화면 흰 배경 유지(v4 다크브라운 취소) — '드러남' 연출용 */
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* 상단 노치(다크브라운) — translateX 는 정적 위치용(게이지 애니와 별개 요소) */
.phone__notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  height: 15px;
  border-radius: 999px;
  background: var(--evt-brown);
  z-index: 3;
}

/* 화면(게이지 클립 영역) — 흰 바탕(미충전 영역). 흰 글씨가 여기선 안 보이다가 골드 차오르며 드러남 */
.phone__screen {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  overflow: hidden;
  background: var(--white, #ffffff);
}

/* 게이지 — translateY 로 아래→위 차오름(액체 슬라이드 업). 차오름 translateY 는 이 요소에만.
   z-index 1: 흰 화면 바탕 위 / 퍼센트 텍스트(readout z-index 2) 아래 → 골드가 글씨 뒤를 채워 '드러남'. */
.phone__gauge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    to top,
    var(--gold-dark, #c9a000),
    var(--gold, #f0c000)
  );
  /* 은은한 골드 글로우 1겹 — 흰 화면 위 차오를 때 빛나게(과하지 않게) */
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold, #f0c000) 38%, transparent);
  --fill: 1; /* [확정필요] 게이지 목표 비율(100%) = 대표님 확인. 연출용 수치이며 실매출 아님 */
  /* JS 미동작 폴백: 목표 비율만큼 채움(아래로 (1-fill)*100% 내림) */
  transform: translateY(calc((1 - var(--fill, 1)) * 100%));
}

/* 수면 물결 — 게이지(액체) 내부 자식. translateX 만(차오름 translateY 와 다른 요소 → 충돌 없음).
   색은 mask(모양) + background(색) 분리 → 골드 톤(다크브라운 화면 위에서 도드라짐), hex 직박 아님. */
.phone__wave {
  position: absolute;
  top: -7px; /* 액체 상단 수면 */
  left: 0;
  width: 200%; /* 휴대폰 2배 → 끊김 없이 흐름 */
  height: 16px;
  background: var(--gold, #f0c000); /* 골드 물결(액체와 동색 골드) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q10 0 20 8 T40 8 V16 H0 Z' fill='%23000'/%3E%3C/svg%3E")
    repeat-x left top / 50% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q10 0 20 8 T40 8 V16 H0 Z' fill='%23000'/%3E%3C/svg%3E")
    repeat-x left top / 50% 100%;
  animation: evtWave 2.2s linear infinite;
  transform: translateX(0);
}
@keyframes evtWave {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); /* 200% 폭의 절반 = 타일 1개 → 무한 끊김 없음 */
  }
}

/* 중앙 퍼센트 + 소제목 — 게이지 위 레이어 */
.phone__readout {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
/* 흰 글씨 — 처음엔 흰 화면 위라 안 보이다가 골드 게이지가 글씨 뒤를 채우며 드러남(의도 연출) */
.phone__percent {
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  color: var(--white, #ffffff);
}
.phone__caption {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white, #ffffff);
}

/* ── 우측 이벤트 멘트 ── 골드 배경 위 전부 흰색 텍스트 */
.evt-band__tag {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--white, #ffffff);
  /* 배지 배경 = 다크브라운(흰 글씨 가독성 ↑), 테두리 살짝 흰색 */
  background: var(--evt-brown);
  border: 1px solid color-mix(in srgb, var(--white, #ffffff) 35%, transparent);
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 16px;
}
.evt-band__title {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 900;
  line-height: 1.34;
  color: var(--white, #ffffff);
  margin: 0 0 18px;
  word-break: keep-all;
}
/* "특별 창업 이벤트" — 보라 형광펜 밑줄(글자 하단을 덮는 반투명 보라 밴드) */
.evt-band__title-evt {
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--evt-purple, #7c3aed) 55%, transparent) 0,
    color-mix(in srgb, var(--evt-purple, #7c3aed) 55%, transparent) 40%,
    transparent 40%
  );
  background-repeat: no-repeat;
  padding: 0 0.08em 0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.evt-band__sub {
  font-size: clamp(0.98rem, 1.6vw, 1.1rem);
  line-height: 1.8;
  color: color-mix(in srgb, var(--white, #ffffff) 95%, transparent); /* 흰색 살짝 톤다운 */
  margin: 0;
  word-break: keep-all;
}

/* ═══════════════════════════════════════════════════════════
   진입 애니메이션 — scroll-reveal 엔진(.is-revealed) 재사용
   · 휴대폰 외곽: data-reveal="fade-in"(opacity만 — 외곽엔 transform 없음).
   · 게이지: 휴대폰 .is-revealed 에 키잉 → 3초에 걸쳐 100% 차오름. 재진입 반복.
   · 멘트: 게이지 100% 도달(3초)에 맞춰 translateX 슬라이드 인(엔진 data-reveal-delay="3.4s" 동기화).
═══════════════════════════════════════════════════════════ */
html.sr-ready .phone[data-reveal] .phone__gauge {
  transform: translateY(100%); /* 트리거 전 비어있음(아래로 내림) */
}
html.sr-ready .phone[data-reveal].is-revealed .phone__gauge {
  animation: evtFill 3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes evtFill {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(calc((1 - var(--fill, 1)) * 100%));
  }
}

/* (우측 멘트 등장 애니 삭제 — 처음부터 정적 표시. data-reveal 제거로 엔진 비대상) */

/* 모션 줄이기 — 게이지 100% 즉시 / 물결 정지 */
@media (prefers-reduced-motion: reduce) {
  html.sr-ready .phone[data-reveal] .phone__gauge,
  html.sr-ready .phone[data-reveal].is-revealed .phone__gauge {
    transform: translateY(calc((1 - var(--fill, 1)) * 100%)) !important;
    animation: none !important;
  }
  .phone__wave {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   EVT LEAD — [이동] 기존 event-banner(검정) 텍스트를 연노랑(tint)으로 이동.
   · 검정 박스 제거 → 연노랑 위 텍스트만. accent=진한 골드(연노랑 위 가독성) / 본문=다크브라운.
   · 위치: .evt-band 곡선 아래 ~ #promo 헤더 위. 컴팩트 패딩 → "지금이 타이밍" 위로 당김(수정2).
   · (이전 .event-banner-section padding 보정 규칙은 마크업 이동으로 불필요 → 제거)
═══════════════════════════════════════════════════════════ */
.evt-lead {
  /* .evt-band 스코프 밖 → 동일 다크브라운 토큰 재파생(직접 hex 아님) */
  --evt-brown: color-mix(
    in srgb,
    var(--gold-dark, #c9a000) 42%,
    var(--black, #000000)
  );
  background: transparent; /* 톤은 .section--tint 가 담당(연노랑) */
  /* 상단 컴팩트(곡선 직후) / 하단 축소 → 아래 #promo 헤더 위로 당김 */
  padding: clamp(10px, 2vw, 20px) 24px clamp(22px, 3.5vw, 34px);
  text-align: center;
}
.evt-lead__link {
  display: inline-flex;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.evt-lead__link:hover {
  transform: translateY(-2px);
}
.evt-lead__text {
  margin: 0;
  /* 제목급 확대 — why/promo 큰제목(최대 2.3~2.4rem)보다 한 단계 키워 "핵심"으로 읽히게 */
  font-size: clamp(1.8rem, 4.4vw, 2.9rem);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  word-break: keep-all;
}
.evt-lead__accent {
  color: var(--gold-dark, #c9a000); /* 골드 강조(연노랑 위 가독성 위해 진한 골드) */
}
.evt-lead__main {
  color: var(--evt-brown); /* 본문 다크브라운 */
}

/* 수정1 — 배너 단어 3덩어리 순차 등장(scroll-reveal 재사용, 재진입 반복 / unobserve 없음).
   각 단어 1개 애니(scale+opacity 한 keyframe) → transform 중복 없음. */
html.sr-ready .evt-lead__text[data-reveal] > * {
  opacity: 0; /* 트리거 전 숨김 */
}
html.sr-ready .evt-lead__text[data-reveal].is-revealed > * {
  animation: evtWordPop 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) var(--w-delay, 0s)
    both;
}
/* stagger: 다폰 0s / 에서 점주님들을 위한 0.25s / 이벤트 0.5s */
.evt-lead__text > *:nth-child(1) {
  --w-delay: 0s;
}
.evt-lead__text > *:nth-child(2) {
  --w-delay: 0.25s;
}
.evt-lead__text > *:nth-child(3) {
  --w-delay: 0.5s;
}
@keyframes evtWordPop {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 모션 줄이기 — 즉시 전체 표시 */
@media (prefers-reduced-motion: reduce) {
  html.sr-ready .evt-lead__text[data-reveal] > *,
  html.sr-ready .evt-lead__text[data-reveal].is-revealed > * {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   반응형 — 모바일 세로 스택
═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .evt-band__inner {
    flex-direction: column;
    gap: 34px; /* 모바일 세로 스택은 기존 간격 유지 */
    text-align: center;
  }
  .phone {
    margin: 0 auto;
  }
  .evt-band__copy {
    max-width: 100%;
  }
}