/* ═══════════════════════════════════════════════════════════
   SALES — sales.css  (가맹점 매출 현황 · #why 존 밖 독립 섹션)
   · A~F 6개 카드(오버레이 위치 시스템). 3열 그리드(3×2), 좌→우 stagger 등장.
   · 흰 배경 — 직전 #why(연노랑 tint) ↔ 직후 #support>#solution(다크)와 교차.
   · 이미지+오버레이를 .sales-card 한 래퍼로 묶어 같이 스케일(% 상대좌표, px 고정 금지) → 반응형 위치 고정.
   · 값(.sales-card__value)=빨강(--color-point-red 재사용), 접미(.sales-card__suffix)=검정 텍스트.
   · 금액 '팡' = 인트로 카피 introPop 재사용(scale 1.8→1, blur 4→0) · scroll-reveal(is-revealed) 진입 트리거 · 반복재생(unobserve 금지) · reduced-motion 정지.
   · 이미지 경로 = 디스크 실파일 규칙 {letter}-sales.png (지혁님이 매출표 PNG 직접 교체).
═══════════════════════════════════════════════════════════ */

.sales {
  background: var(--white, #ffffff);
  scroll-margin-top: 80px;
  padding: 100px 5%; /* 전역 section 9% → 5%로 좌우 여백 축소(3카드 폭 확대) */
}

/* 3열 그리드(3개 × 2줄). 태블릿 2열 / 모바일 1열로 반응형 축소 */
/* max-width 1160 → 1280(인접 #pricing 톤) — 화면 폭 더 사용 */
.sales__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  gap: clamp(16px, 2.4vw, 28px);
  max-width: 1280px;
  margin: 0 auto;
}

/* ── 섹션 헤드글 (그리드 위) ── */
.sales__head {
  max-width: 920px;
  margin: 0 auto clamp(28px, 4vw, 48px);
  text-align: center;
}
.sales__title {
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.35;
  color: var(--color-text, #1a1a1a);
  word-break: keep-all;
}
/* '다퍼주는 폰가게' — 노란 강조(색)=바깥 .sales__hl / 팡 애니(transform)=안쪽 .sales__hl-pop → 충돌 방지 */
.sales__hl {
  color: var(--gold, #f0c000); /* 노란 강조 토큰 재사용 */
}
.sales__hl-pop {
  display: inline-block; /* introPop transform 적용 위해 */
}
/* 헤드 진입 시 '다퍼주는 폰가게' 팡 — 인트로 introPop 재사용. is-revealed 키잉 → 재진입 반복(unobserve 금지) */
html.sr-ready .sales__head[data-reveal] .sales__hl-pop {
  opacity: 0; /* 팡 트리거 전 숨김 */
}
html.sr-ready .sales__head[data-reveal].is-revealed .sales__hl-pop {
  animation: introPop 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) 0.1s both;
}

/* ── 면책 문구 (그리드 하단) — 작은 회색, 가운데 ── */
.sales__disclaimer {
  margin: clamp(18px, 2.6vw, 28px) auto 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-sub, #555555);
  word-break: keep-all;
}

/* ── 하단 강조 CTA 밴드 (상단 리드 + 빨간 알약 큰 강조) ── */
.sales__cta-band {
  margin: clamp(28px, 4vw, 48px) auto 0;
  text-align: center;
}
.sales__cta-lead {
  margin-bottom: clamp(12px, 1.6vw, 18px);
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  font-weight: 700;
  color: var(--color-text, #1a1a1a);
  word-break: keep-all;
}
.sales__cta-main {
  display: inline-block;
  padding: clamp(0.5em, 1.4vw, 0.7em) clamp(1.2em, 3vw, 1.8em);
  border-radius: 999px; /* 빨간 알약 */
  background: var(--color-point-red, #e23b34); /* 빨강 토큰 재사용 */
  color: var(--white, #ffffff); /* 흰 텍스트 */
  font-size: clamp(1.2rem, 3.6vw, 2rem);
  font-weight: 900;
  line-height: 1.25;
  word-break: keep-all;
}

/* ── 카드: 이미지+오버레이 래퍼 ── */
.sales-card {
  position: relative; /* 오버레이(.sales-card__amount) 기준 */
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--gold, #f0c000) 8%, #ffffff); /* 빈 상태 폴백 톤 */
}
.sales-card__image {
  display: block;
  width: 100%;
  height: auto;
  min-height: clamp(180px, 38vw, 300px); /* src="#" 빈 상태 영역 확보 — 이미지 삽입 후 자연 비율 */
  object-fit: contain; /* 매출표 PNG 잘리지 않게 */
  color: transparent; /* 깨진/빈 이미지 alt 노출 최소화 */
  font-size: 0;
}

/* 헤더 라벨 — '표 상단 중앙' 빨간 알약(pill). 빨강 토큰 재사용 + 흰 텍스트. % 상대좌표로 래퍼와 함께 스케일 */
/* [확정필요] PNG에 'A지점' 헤더가 이미 포함되면 HTML의 .sales-card__label 블록 제거(중복 방지) */
.sales-card__label {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%); /* 가로 중앙 정렬 */
  z-index: 2;
  padding: 0.34em 1.25em;
  border-radius: 999px; /* 둥근 알약 */
  background: var(--color-point-red, #e23b34); /* 빨강 토큰 재사용 */
  color: var(--white, #ffffff); /* 흰 텍스트 */
  font-family: var(--font-ko, sans-serif);
  font-size: clamp(0.85rem, 2.4vw, 1.15rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* B지점 전용 '1억 돌파' 추가 뱃지 — 빨간 알약. 헤더(.sales-card__label) 바로 아래. 빨강 토큰 재사용 */
/* [위치조정] B지점 1억 돌파 뱃지 위치 — top % 조정으로 헤더 아래↔옆 이동 */
.sales-card__milestone {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.3em 1em;
  border-radius: 999px; /* 둥근 알약 */
  background: var(--color-point-red, #e23b34); /* 빨강 토큰 재사용 */
  color: var(--white, #ffffff); /* 흰 텍스트 */
  font-family: var(--font-ko, sans-serif);
  font-size: clamp(0.75rem, 2vw, 1rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* 오버레이 — PNG 하단 '월 매출' 행 우측 빈 매출칸 위. 위치 = % 상대좌표(px 고정 금지) → 래퍼와 함께 스케일 */
.sales-card__amount {
  position: absolute;
  /* [위치조정] "월 매출" 행 텍스트와 동일 높이 우측칸 — 이미지 삽입 후 top/left % 미세조정 */
  top: 96%;
  left: 68%;
  transform: translate(-50%, -50%); /* 기준점 = 칸 중앙 */
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  white-space: nowrap;
  pointer-events: none;
}
.sales-card__value {
  display: inline-block; /* transform(펀치) 적용 위해 */
  font-family: var(--font-en, sans-serif);
  font-size: clamp(1.1rem, 4.4vw, 2.2rem); /* 이미지 비율 추종 */
  font-weight: 900;
  line-height: 1;
  color: var(--color-point-red, #e23b34); /* 빨강 토큰 재사용 */
  transform-origin: center;
}
.sales-card__suffix {
  font-size: clamp(0.85rem, 2.6vw, 1.3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-text, #1a1a1a); /* 검정 텍스트 */
}

/* 금액 '팡' — 인트로 카피 introPop(intro.css 키프레임) 그대로 재사용: scale 1.8→1 + opacity 0→1 + blur 4→0.
   '팩트만 강조' — 흔들림 없이 확 나타나 탁 박힘. scroll-reveal 진입(.is-revealed) 키잉 → 재진입마다 반복(unobserve 금지). */
/* 값 초기 숨김(팡 트리거 전) — JS 동작(sr-ready) 시에만 */
html.sr-ready .sales-card[data-reveal] .sales-card__value {
  opacity: 0;
}
html.sr-ready .sales-card[data-reveal].is-revealed .sales-card__value {
  animation: introPop 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) var(--pop-delay, 0s)
    both;
}
/* 카드별 팡 stagger(좌→우): A0.1 B0.2 C0.3 D0.4 E0.5 F0.6 */
.sales-card:nth-child(1) {
  --pop-delay: 0.1s;
}
.sales-card:nth-child(2) {
  --pop-delay: 0.2s;
}
.sales-card:nth-child(3) {
  --pop-delay: 0.3s;
}
.sales-card:nth-child(4) {
  --pop-delay: 0.4s;
}
.sales-card:nth-child(5) {
  --pop-delay: 0.5s;
}
.sales-card:nth-child(6) {
  --pop-delay: 0.6s;
}
/* 모션 줄이기 — 팡 정지, 값/헤드 즉시 표시. scroll-reveal.js도 reduced-motion 시 is-revealed 미부여 */
@media (prefers-reduced-motion: reduce) {
  html.sr-ready .sales-card[data-reveal] .sales-card__value,
  html.sr-ready .sales-card[data-reveal].is-revealed .sales-card__value,
  html.sr-ready .sales__head[data-reveal] .sales__hl-pop,
  html.sr-ready .sales__head[data-reveal].is-revealed .sales__hl-pop {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* 반응형 — 태블릿 2열 */
@media (max-width: 900px) {
  .sales__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
  }
}

/* 반응형 — 모바일 1열 + 오버레이 초기값(이미지 삽입 후 미세조정) */
@media (max-width: 560px) {
  .sales__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
  }
  .sales-card__amount {
    /* [위치조정] 모바일 "월 매출" 행 우측칸 미세조정 */
    top: 96%;
    left: 66%;
  }
}