/* =========================================================
   Pure Gold — 페이지 전용 스타일 (puregold/index.php 에서만 로드)
   main.css 뒤에 로드되어 .footer 등을 오버라이드함
   ========================================================= */

/* 플로팅 CTA 기준값 — 탑 버튼이 겹침 회피에 참조하므로 상속되도록 :root 에 둔다 */
:root { --pg-cta-h: 50px; --pg-cta-bottom: 120px; }

/* ===== 상단 비주얼(Hero) — 이미지 배경만 (텍스트 영역은 추후) ===== */
/* height는 디자인 비율(1920:920)을 vw로 환산 → 구형 브라우저에서도 동작(aspect-ratio 미사용) */
.pg-visual { position: relative; width: 100%; height: 100vh; background: #f6ede0 url("/resources/img/puregold/puregold-visual.webp?v=20260918b") no-repeat center center; background-size: cover; }
/* 좌측 텍스트 영역(리드·타이틀·워드마크·버튼) — 디자인 기준 좌측 18.75%, 세로 중앙, 중앙 정렬. 요소 간격은 각 요소 margin 으로(디자인 간격이 균일하지 않음) */
.pg-visual__inner { position: absolute; left: 18.75%; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; width: 337px; max-width: calc(100% - 48px); text-align: center; color: #978654; }
/* 로고 락업(h1): 디자인 아웃라인 SVG(리드+타이틀+워드마크). 브랜드 전용 서체라 텍스트 대신 SVG 사용 */
.pg-visual__lockup { margin: 0 0 25px; }
.pg-visual__lockup-img { display: block; width: 337px; max-width: 100%; height: auto; }
.pg-visual__lockup-img--mo { display: none; }   /* PC 기본 — 모바일용은 숨김 */
.pg-visual__btn,
.pg-float-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 327px; max-width: 100%; height: 50px; box-sizing: border-box; padding: 10px 20px; border: 1px solid #fff; border-radius: 4px; background: linear-gradient(98deg, #978654 2%, #836518 52%, #bba15f 101%); color: #fff; font-family: "Noto Sans KR", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.36px; text-decoration: none; }
.pg-visual__btn-arrow { flex: 0 0 auto; width: 11px; height: 11px; }

/* 하단 플로팅 CTA — 히어로 버튼과 동일한 모양(위 선택자 공유), 위치/등장만 별도
   PC(≥1025): 비주얼 안의 버튼이 화면에서 사라지면 아래에서 슝 올라와 하단 120px 지점에 고정
   모바일·태블릿(≤1024): 비주얼 버튼을 감추고 처음부터 하단 24px에 노출
   공통: '퓨어골드 만나보기' 영역에서는 다시 아래로 숨김
   --pg-cta-bottom 은 고정 위치이자 숨김 상태의 이동량 → 한 값만 바꾸면 둘 다 따라감
   크기: 높이 50px 고정, 너비 327px(히어로 버튼과 동일), 화면이 좁아지면 좌우 24px 여백을 남기고 줄어듦 */
.pg-float-cta { position: fixed; left: 50%; bottom: var(--pg-cta-bottom); z-index: 90; opacity: 0; visibility: hidden;
  max-width: calc(100% - 48px);
  transform: translate(-50%, calc(100% + var(--pg-cta-bottom)));
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease, visibility 0s linear 0.55s; }
.pg-float-cta.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease, visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) {
  .pg-float-cta { transition: opacity 0.2s ease, visibility 0s linear 0.2s; transform: translate(-50%, 0); }
  .pg-float-cta.is-visible { transition: opacity 0.2s ease, visibility 0s linear 0s; }
}
/* 1025~1300: 가로형 이미지 유지, 텍스트 영역을 좌측으로 이동해 캔과 겹침 방지 */
@media (min-width: 1025px) and (max-width: 1300px) {
  .pg-visual__inner { left: 8%; }
}

/* ≤1024: 세로형 비주얼 이미지로 교체 + 텍스트 상단 중앙 배치(태블릿·모바일 공통) */
@media (max-width: 1024px) {
  .pg-visual { min-height: 0; max-height: none; background-image: url("/resources/img/puregold/puregold-visual-mo.webp?v=20260918c"); background-position: center; }
  /* 세로 이미지라 상단 여백 쪽에 배치 + 락업 축소 */
  .pg-visual__inner { left: 50%; top: 15%; transform: translateX(-50%); width: 100%; }
  .pg-visual__lockup { margin-bottom: 0px; }
  .pg-visual__lockup-img { width: 100%; margin: 0 auto; }
  .pg-visual__lockup-img--pc { display: none; }
  .pg-visual__lockup-img--mo { display: block; }
  /* 비주얼 안의 CTA는 숨기고, 플로팅 CTA만 하단 24px에 상시 노출 */
  .pg-visual__btn { display: none; }
  :root { --pg-cta-bottom: 24px; }
  .pg-float-cta { width: 327px; font-size: 16px; } /* 높이 50px는 공유 규칙 유지 */
}

/* ≤480: 플로팅 CTA와 탑 버튼이 가로로 겹치는 구간(뷰포트 약 463px 이하부터 발생)
   → CTA가 떠 있는 동안만 탑 버튼을 CTA 위로 올린다. CTA는 DOM에서 #top_btn 바로 앞 형제 */
@media (max-width: 480px) {
  #top_btn { transition: bottom 0.35s ease; }
  .pg-float-cta.is-visible ~ #top_btn {
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--pg-cta-bottom) + var(--pg-cta-h) + 12px);
  }
}

/* ===== 브랜드 스토리 — 배경만 고정, 텍스트는 일반 스크롤 + 진입 페이드업, 배경 캔→잔 크로스페이드 ===== */
/* 배경 고정은 CSS sticky 가 담당(JS pin 없음 — pin 은 fixed 전환 순간 덜커덩거린다). 콘텐츠는 -100vh 로 겹쳐 스크롤 */
.pg-story { position: relative; background: #f7f0e6; } /* 다음/이전 섹션과 동일 크림 → 핀 경계 서브픽셀 틈에 어두운 라인 방지 */
.pg-story__bg-stage { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 0; }
.pg-story__bg { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
.pg-story__bg--can { background-image: url("/resources/img/puregold/puregold-can-closeup.webp?v=260916"); }
.pg-story__bg--glass { background-image: url("/resources/img/puregold/puregold-chalice-closeup.webp?v=2"); opacity: 0; } /* 시작은 캔, 스크롤 중 잔으로 페이드 */
/* 콘텐츠: sticky 배경(100vh) 위로 -100vh 만큼 끌어올려 겹친 뒤 자연 스크롤 → 섹션 전체 높이는 그대로.
   padding-top = 첫 텍스트 앞 리드인(배경 캔만 보이는 여백). 첫 블록을 키우지 않고 여기서 여백을 줘야
   3개 텍스트 사이 텀(각 80vh)이 균일하게 유지됨 */
.pg-story__content { position: relative; z-index: 1; margin-top: -100vh; padding-top: 30vh; }
/* 각 텍스트 블록 = 스크롤 텀(80vh). 값 하나로 등장 간격 조절 — 레퍼런스(aupalevodka)식 부드러운 흐름 */
.pg-story__text { min-height: 80vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 10vh clamp(24px, 8vw, 160px); color: #fff; }
.pg-story__text--right { align-items: flex-end; text-align: right; }
.pg-story__text--left { align-items: flex-start; text-align: left; }
/* 두 번째 문구는 배경 전환과 함께 늦게 등장 → 그만큼 스크롤 구간을 길게 */
.pg-story__text[data-story="2"] { min-height: 120vh; }
/* 텍스트 그림자: 피그마 값 그대로(drop-shadow 0 0 5.95px rgba(0,0,0,0.25)), 별도 스크림 없음 */
.pg-story__box { max-width: 560px; text-align: left; filter: drop-shadow(0px 0px 5.95px rgba(0, 0, 0, 0.25)); word-break: keep-all; }
.pg-story__title { margin: 0 0 17px; font-family: "Artois", sans-serif; font-weight: 400; font-size: clamp(36px, 4.4vw, 62px); line-height: 1; letter-spacing: -0.5px; }
.pg-story__desc { margin: 0; font-family: "Noto Sans KR", sans-serif; font-weight: 500; font-size: clamp(16px, 1.6vw, 24px); line-height: 1.6; letter-spacing: -0.4px; }
.pg-story.is-motion .pg-story__box { will-change: transform, opacity; }
.pg-story.is-motion .pg-story__bg { will-change: transform; }
/* 마지막 텍스트 뒤 여유 구간 = 상단 리드인(콘텐츠 padding-top 30vh)과 동일하게 → 위·아래 대칭 여유 */
.pg-story__tail { height: 30vh; }

/* 모바일: 세로형 배경 이미지 + 텍스트 하단 정렬(바닥에서 100px) + 좌우 여백 24px */
@media (max-width: 768px) {
  #container { overflow: visible; overflow-x: clip; }
  .pg-story__bg--can { background-image: url("/resources/img/puregold/puregold-can-closeup-mo.webp?v=260916"); }
  .pg-story__bg--glass { background-image: url("/resources/img/puregold/puregold-chalice-closeup-mo.webp?v=2"); }
  .pg-story__content { padding-top: 0; } /* 모바일은 하단 정렬이라 상단 리드인 불필요 */
  /* 하단 여백 60 → 130px: 문구가 화면 바닥에 딱 붙어 뚝 잘려 보이던 것 완화 */
  .pg-story__text, .pg-story__text--right, .pg-story__text--left { min-height: 80vh; justify-content: flex-end; align-items: stretch; text-align: left; padding: 0 24px 130px; }
  /* PC 는 2번 블록이 120vh(특성도가 높아 모바일까지 먹는다) → 모바일은 1↔2번 문구 사이를 줄인다 */
  .pg-story__text[data-story="2"] { min-height: 83vh; }
  /* 마지막 문구가 위로 빠져나가는 동안 sticky 배경이 더 붙어 있도록 (0이면 배경이 먼저 풀려 뚝 잘린다) */
  .pg-story__tail { height: 48vh; }
  .pg-story__box { max-width: none; width: auto; }
  .pg-story__title { font-size: 36px; }
  .pg-story__desc { font-size: 16px; line-height: 1.5; }
}

/* ===== Footer ===== */
.footer { padding: 40px 160px 60px; background: linear-gradient(90deg, rgba(151, 134, 84, 0.8), rgba(151, 134, 84, 0.8)), #fff; }
.footer__inner { max-width: none; }

/* 로고 흰색 처리 */
.footer__logo img { filter: brightness(0) invert(1); }

/* 저작권/링크/구분선 흰색 */
.footer__copyright .footer__copyright-text { color: #fff; }
.footer__copyright .footer__copyright-text::before { background: rgba(255, 255, 255, 0.6); }
.footer__link { color: #fff; }
.footer__link:hover { color: #fff; opacity: 0.7; }

/* 연락처/경고문 흰색 */
.footer__contact .footer__contact-text, .footer__contact a { color: #fff; }
.footer__contact a:hover { color: #fff; opacity: 0.7; }
.footer__warning { color: #fff; }

/* SNS 아이콘: 반투명 흰 배경 + 흰 아이콘 */
.footer__channel li { position: relative; }
.footer__channel li a { background: rgba(255, 255, 255, 0.12); }
.footer__channel li a:hover { background: rgba(255, 255, 255, 0.24); }
.footer__channel li a img { filter: brightness(0) invert(1); }
.footer__channel li:nth-child(2) a { background: #AC9E76; }
.footer__channel li:nth-child(2) a:hover { background: #B8AB86; }
.footer__channel li:nth-child(2) a img { filter: invert(1); mix-blend-mode: lighten; }
.footer__channel li:nth-child(2):after { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: rgba(255, 255, 255, 0.12); pointer-events: none; }

/* 반응형: 좁은 화면에서 좌우 여백 축소 (모바일 전용 푸터 디자인 제공 시 별도 반영) */
@media (max-width: 1440px) { .footer { padding: 40px 80px 60px; } }
@media (max-width: 1024px) { .footer { padding: 40px 40px 60px; } }
@media (max-width: 768px) { .footer { padding: 30px 24px 70px; } }

/* =========================================================
   Pure Gold 만나보기 (매장 찾기) — Figma node 10405:1263
   ========================================================= */
.pg-locator { position: relative; overflow: hidden; box-sizing: border-box; background: #eeeeee url("/resources/img/puregold/puregold-locator-pattern.png?v=20260907") center / cover no-repeat; }
/* 1400 기준 컴포지션을 중앙 고정 → 넓은 화면에서도 캔/잔이 가장자리로 벌어지지 않음 */
.pg-locator__wrap { position: relative; width: 100%; max-width: 1920px; height: 640px; margin: 0 auto; }

/* 좌측 캔 / 우측 잔 (장식 이미지) — 상단 기준 배치 + 섹션보다 크게 → 밑부분이 하단에서 잘림. 그림자는 투명 PNG라 drop-shadow */
.pg-locator__bottle, .pg-locator__glass { position: absolute; width: auto; z-index: 1; pointer-events: none; user-select: none; filter: drop-shadow(31px 11px 40px rgba(100, 93, 70, 0.17)) drop-shadow(64px 8px 24px rgba(133, 125, 102, 0.04)); }
/* 병·잔 모두 '바닥 기준' 동일 앵커(bottom) + 같은 height 비율 → 반응형에서 함께 잘리고 함께 축소되어 위치 일관 */
.pg-locator__bottle { left: 21%; bottom: -18%; height: 110%; width: auto; }
.pg-locator__glass { right: 11%; bottom: -18%; height: 110%; }

/* 중앙 콘텐츠 */
.pg-locator__inner { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; box-sizing: border-box; }
.pg-locator__pin { display: block; width: 42px; height: auto; margin-bottom: 15px; }
.pg-locator__wordmark { display: block; width: 220px; height: auto; margin-bottom: 5px; }
/* 영문(Artois 대문자)과 한글(Noto Bold)은 글자 잉크 영역이 달라서 baseline 정렬만으로는
   한글이 3.5px 처져 보인다. 한글을 0.03em 올려 두 글자의 시각 중심을 맞춤(위아래 ±2px 대칭).
   실측 이상값은 브레이크포인트별 0.0099~0.0312em 이며, 0.03em 단일값의 오차는 최대 0.76px. */
.pg-locator__title { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 0 0 12px; color: #978654; line-height: 1.3; }
.pg-locator__title-en { font-family: "Artois", sans-serif; font-weight: 400; font-size: 56px; letter-spacing: -1.12px; text-transform: uppercase; }
.pg-locator__title-ko { position: relative; top: -0.03em; font-family: "Noto Sans KR", sans-serif; font-weight: 700; font-size: 48px; letter-spacing: -0.96px; }
.pg-locator__desc { margin: 0 0 30px; color: #978654; font-family: "Noto Sans KR", sans-serif; font-weight: 500; font-size: 20px; line-height: 1.35; letter-spacing: -0.4px; }

/* 검색창(실제 검색 아님, 장식): 안내문구 + 검색 버튼 */
.pg-search { display: flex; align-items: center; justify-content: space-between; width: 365px; max-width: 100%; min-height: 64px; box-sizing: border-box; padding: 10px 14px; background: #fff; border: 2px solid rgba(151, 134, 84, 0.5); border-radius: 9px; box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.18), 3px 3px 5px rgba(0, 0, 0, 0.2); text-decoration: none; cursor: pointer; }
.pg-search__placeholder { flex: 0 1 auto; text-align: left; font-family: "Noto Sans KR", sans-serif; font-weight: 500; font-size: 18px; letter-spacing: -0.36px; color: #b8b8b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-search__submit { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; width: 110px; min-height:40px; box-sizing: border-box; padding: 0 18px; background: #978654; color: #fff; border-radius: 4px; font-family: "Noto Sans KR", sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.36px; white-space: nowrap; }

@media (max-width: 1600px) {
  .pg-locator__title-en { font-size: 50px; }
  .pg-locator__title-ko { font-size: 44px; }
  .pg-locator__bottle { left: 11%; height: 104%; }
  .pg-locator__glass { right: 6%; height: 104%; }
}

@media (max-width: 1300px) {
  .pg-locator__title-en { font-size: 46px; }
  .pg-locator__title-ko { font-size: 40px; }
  .pg-locator__bottle { height: 90%; }
  .pg-locator__glass { right: 1%; height: 90%; }
}

@media (max-width: 1100px) {
  .pg-locator__wrap { height: 500px; }
}

@media (max-width: 1024px) {
  .pg-locator__wrap { height: auto; padding: 60px 24px; }
  .pg-locator__inner{ position: static; transform: none; padding: 0; }
  .pg-locator__title-en { font-size: 40px; }
  .pg-locator__title-ko { font-size: 34px; }
  .pg-locator__bottle, 
  .pg-locator__glass{ display: none; }
  .pg-locator__pin { width: 39px; }
  .pg-locator__wordmark { width: 204px; }
  .pg-locator__title { gap: 6px; }
  .pg-locator__desc { font-size: 18px; margin-bottom: 30px; }
  .pg-locator__title-en { font-size: 42px; letter-spacing: -0.6px; }
  .pg-locator__title-ko { font-size: 38px; letter-spacing: -0.6px; }
  .pg-search { min-height: 50px; width: 100%; max-width: 285px; padding: 8px 14px; }
  .pg-search__placeholder { font-size: 14px; }
  .pg-search__submit { width: 90px; min-height: 33px; font-size: 14px; padding: 0 14px; }
}

/* =========================================================
   만나보기 섹션 금가루 — 위에서 떨어져 바닥에 쌓임 (Figma Make 레퍼런스 'Add gold dust animation' 이식)
   · 순수 CSS 키프레임, 입자/알갱이 DOM 은 JS 가 생성(puregold/index.php)
   · 섹션이 화면에 있을 때만 재생(.is-active) → 쌓임이 그때부터 시작되고, 벗어나면 일시정지(진행 상태 유지)
   · --pg-dust-h : 낙하 거리(섹션 높이). JS 가 리사이즈마다 갱신
   ========================================================= */
.pg-dust { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; --pg-dust-h: 640px; }

/* 입자: 바깥 요소는 낙하(translateY), 안쪽 요소는 흔들림+회전 — 레이아웃을 건드리지 않고 transform 만 사용 */
.pg-dust__p { position: absolute; top: -20px; animation: pg-dust-fall linear infinite; animation-play-state: paused; }
.pg-dust__p i { display: block; border-radius: 50%; animation: pg-dust-sway ease-in-out infinite; animation-play-state: paused; }
.pg-dust__p--rect i { border-radius: 2px; }
@keyframes pg-dust-fall {
  0%   { transform: translateY(-10%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(calc(var(--pg-dust-h) + 40px)); opacity: 0; }
}
@keyframes pg-dust-sway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(18px) rotate(180deg); }
  75%      { transform: translateX(-18px) rotate(540deg); }
}

/* 바닥에 쌓이는 층: 0 → 130px 로 45초간 자람.
   위로 갈수록 촘촘한 stop 으로 서서히 투명해져 '바닥에 고르게 내려앉은 금가루'처럼 자연스럽게 흩어진다.
   (마스크 없이 gradient 알파만으로 페이드 → 방사형 '둔덕' 없이 바닥 전체 균일, 구형 브라우저도 동일 동작) */
.pg-dust__pile { display:none; position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: linear-gradient(to top,
    #b0902a 0%,
    #c29f3d 14%,
    rgba(206, 169, 66, 0.82) 32%,
    rgba(222, 187, 79, 0.55) 52%,
    rgba(235, 199, 88, 0.32) 70%,
    rgba(244, 207, 95, 0.14) 85%,
    rgba(245, 208, 96, 0.04) 94%,
    rgba(245, 208, 96, 0) 100%);
  animation: pg-dust-pile 45s ease-out forwards; animation-play-state: paused; }
@keyframes pg-dust-pile {
  0%   { height: 0; opacity: 0; }
  6%   { opacity: 1; }
  100% { height: 90px; opacity: 1; }
}

/* 바닥 알갱이: 쌓인 층 위에서 반짝임 */
.pg-dust__grains { display:none; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; }
.pg-dust__g { position: absolute; border-radius: 50%; animation: pg-dust-settle 5s ease-in-out infinite; animation-play-state: paused; }
@keyframes pg-dust-settle {
  0%, 100% { opacity: 0;   transform: translateY(3px) scale(0.6); }
  50%      { opacity: 0.9; transform: translateY(0)   scale(1); }
}

/* 재생 제어 */
.pg-dust.is-active .pg-dust__p,
.pg-dust.is-active .pg-dust__p i,
.pg-dust.is-active .pg-dust__pile,
.pg-dust.is-active .pg-dust__g { animation-play-state: running; }

/* 모바일(≤768): 하단에 쌓이는 층·바닥 알갱이 제거(떨어지는 입자만 남김) */
@media (max-width: 768px) {
  .pg-dust__pile, .pg-dust__grains { display: none; }
}

/* 모션 축소 환경: 떨어지는 입자/반짝임은 끄고, 쌓인 층만 정적으로 표시 */
@media (prefers-reduced-motion: reduce) {
  .pg-dust__p, .pg-dust__g { display: none; }
  .pg-dust__pile { animation: none; height: 90px; opacity: 1; }
}

/* =========================================================
   Pure Gold 소개 (제품 + 영양 배지) — Figma node 10405:1237
   ========================================================= */
.pg-intro { min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 120px 41px; background: #f7f0e6; }
.pg-intro__title { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #978654; text-align: center; }
/* 제품 특징 한 줄 + 우측 각주 */
.pg-intro__claims { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-family: "Noto Sans KR", sans-serif; }
.pg-intro__claim-list { margin: 0; display: flex; align-items: baseline; gap: 14px; font-weight: 500; font-size: 20px; line-height: 1; letter-spacing: -0.4px; }
.pg-intro__claim-list > span { flex: 0 0 auto; white-space: nowrap; }
.pg-intro__claim-list b { font-weight: 600; }
.pg-intro__claim-list > span + span::before { content: ""; display: inline-block; width: 1px; height: 0.93em; margin-right: 14px; background: currentColor; opacity: 0.5; vertical-align: -0.09em; }
.pg-intro__claim-note { margin: 0; font-weight: 400; font-size: 14px; line-height: 1; letter-spacing: -0.28px; }
.pg-intro__claims sup { font-size: 0.7em; line-height: 0; vertical-align: super; margin-left: -1px; }
.pg-intro__claim-list sup { display: inline-block; width: 0; }
/* 제품명은 로고(SVG) */
.pg-intro__heading { margin: 0; line-height: 0; }
.pg-intro__heading img { display: block; width: 350px; max-width: 100%; height: auto; }

/* 캔 + 영양 배지 */
.pg-intro__product { display: flex; align-items: center; justify-content: center; gap: 54px; width: 100%; }
.pg-intro__product::before { content: ""; flex: 0 0 125px; } /* 배지와 같은 폭의 빈 칸 */
.pg-intro__can { flex: 0 0 auto; }
.pg-intro__can img { display: block; height: 483px; width: auto; filter: drop-shadow(29px 27px 13px rgba(0, 0, 0, 0.09)); }
.pg-intro__badges { flex: 0 0 125px; display: flex; flex-direction: column; gap: 11px; }
.pg-intro__badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 125px; height: 125px; border-radius: 50%; color: #fff; font-family: "Artois", sans-serif; text-transform: uppercase; line-height: 1; }
.pg-intro__badge--sugar { background: #897436; }
.pg-intro__badge--gluten { background: #978654; }
.pg-intro__badge--alcohol { background: #b7a570; }
.pg-intro__badge-top { font-size: 22px; }
.pg-intro__badge-big { font-size: 49px; margin-top: 4px; }
.pg-intro__badge--alcohol .pg-intro__badge-big { font-size: 56px; }
.pg-intro__badge-unit { position:relative; top:-8px; margin-left:2px; font-size: 28px; }

/* 설명 */
.pg-intro__desc { display: flex; flex-direction: column; gap: 15px; text-align: center; color: #807247; font-family: "Noto Sans KR", sans-serif; font-weight: 400; font-size: 20px; line-height: 1.4; letter-spacing: -0.4px; }
.pg-intro__desc p { margin: 0; }

/* 태블릿 */
@media (max-width: 1024px) {
  .pg-intro { min-height: 0; gap: 30px; padding: 50px 24px; }
  .pg-intro__heading img { width: 300px; }
  .pg-intro__claim-list { font-size: 17px; gap: 12px; }
  .pg-intro__claim-list > span + span::before { margin-right: 12px; }
  .pg-intro__claim-note { font-size: 12px; }
  .pg-intro__can img { height: 400px; }
  .pg-intro__product::before { display: none; }
  .pg-intro__badges { flex-basis: 108px; }
  .pg-intro__badge { width: 108px; height: 108px; }
  .pg-intro__badge-top { font-size: 18px; }
  .pg-intro__badge-big { font-size: 42px; }
  .pg-intro__badge--alcohol .pg-intro__badge-big { font-size: 48px; }
  .pg-intro__desc { font-size: 16px; line-height: 1.4 }
  .pg-intro__badge-unit {top:-4px;}
}

/* 모바일 */
@media (max-width: 768px) {
  .pg-intro__claims { margin-top: 6px; }
  .pg-intro__claim-list { font-size: 15px; gap: 8px; letter-spacing: -0.26px; }
  .pg-intro__claim-list > span + span::before { margin-right: 8px; }
  .pg-intro__claim-note { font-size: 11px; letter-spacing: -0.22px; }
  .pg-intro__heading img { width: 220px; }
  .pg-intro__product { gap: 13px; }
  .pg-intro__badges { flex-basis: 67px; }
  .pg-intro__can img { height: 253px; filter: drop-shadow(14px 13px 9px rgba(0, 0, 0, 0.09)); }
  .pg-intro__badges { gap: 6px; }
  .pg-intro__badge { width: 67px; height: 67px; }
  .pg-intro__badge-top { font-size: 12px; }
  .pg-intro__badge-big { font-size: 23px; margin-top: 4px; }
  .pg-intro__badge--alcohol .pg-intro__badge-big { font-size: 26px; }
  .pg-intro__badge-unit { font-size: 14px; top:-3px;}
  .pg-intro__desc p { word-break: keep-all; }
}

/* inter01 스크롤 모션: JS가 .pg-ready 부여 시에만 초기 은닉/이동(JS 없으면 그대로 노출)
   타이틀=중앙에 보이다가 상단 닿으면 위로 / 캔·설명·배지=아래에서 위로 순차 등장 */
.pg-intro.pg-ready .pg-intro__title { transform: translateY(var(--pg-title-shift, 25vh)); transition: transform 1s ease; }
.pg-intro.pg-ready .pg-intro__can,
.pg-intro.pg-ready .pg-intro__desc { opacity: 0; transform: translateY(40px); transition: opacity 0.65s ease, transform 0.65s ease; }
.pg-intro.pg-ready .pg-intro__badge { opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease, transform 0.5s ease; }
.pg-intro.pg-ready.is-active .pg-intro__title { transform: translateY(0); }
.pg-intro.pg-ready.is-active .pg-intro__can { opacity: 1; transform: translateY(0); transition-delay: 0.35s; } /* 속도·텀 살짝 늘림 */
.pg-intro.pg-ready.is-active .pg-intro__desc { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.pg-intro.pg-ready.is-active .pg-intro__badge--sugar { opacity: 1; transform: translateY(0); transition-delay: 0.55s; }
.pg-intro.pg-ready.is-active .pg-intro__badge--gluten { opacity: 1; transform: translateY(0); transition-delay: 0.75s; }
.pg-intro.pg-ready.is-active .pg-intro__badge--alcohol { opacity: 1; transform: translateY(0); transition-delay: 0.95s; }
@media (prefers-reduced-motion: reduce) {
  .pg-intro.pg-ready .pg-intro__title,
  .pg-intro.pg-ready .pg-intro__can,
  .pg-intro.pg-ready .pg-intro__desc,
  .pg-intro.pg-ready .pg-intro__badge { transform: none; opacity: 1; transition: none; }
}

/* =========================================================
   마지막: 제품 구매 유도 (캔 + 4팩) — Figma node 12156:3321
   좌측 텍스트(리드+제품명+버튼) / 우측 제품 이미지(단일 캔 + 4팩)
   ========================================================= */
/* 배경은 화면 폭 전체(풀블리드). 높이는 이미지 비율이 정해 잘림이 없다 */
.pg-buy { position: relative; overflow: hidden; background: #f7f0e6; aspect-ratio: 3840 / 1360; padding: 0 20px; box-sizing: border-box; }
.pg-buy__inner { position: relative; width: 1400px; max-width: 100%; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: flex-start; gap: 40px; }
.pg-buy__bg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-buy__bg--mo { display: none; }   /* PC 기본 — 모바일용은 숨김 */
.pg-buy__text { position: relative; z-index: 1; flex: 0 0 50%; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.pg-buy__title { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
/* 제품명은 로고(SVG, 흰색) — h2 는 마크업/접근성용으로 남기고 안의 이미지 크기만 잡는다 */
.pg-buy__name { margin: 0; line-height: 0; }
.pg-buy__name img { display: block; width: 350px; max-width: 100%; height: auto; }
.pg-buy__btn { display: inline-flex; align-items: center; justify-content: center; width: 327px; max-width: 100%; height: 50px; box-sizing: border-box; padding: 10px 20px; border-radius: 4px; background: #fff; color: #978654; font-family: "Noto Sans KR", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -0.36px; text-decoration: none; }


/* 1024 이하: 세로컷 배경 + 텍스트 하단 정렬 */
@media (max-width: 1024px) {
  .pg-buy { aspect-ratio: auto; display: block; padding: 0; }
  .pg-buy__bg--pc { display: none; }
  .pg-buy__bg--mo { display: block; position: static; width: 100%; height: auto; object-fit: fill; }
  .pg-buy__inner { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-width: none; height: auto; margin: 0;
                   flex-direction: column; justify-content: flex-end; gap: 28px; padding: 0 24px 13%; box-sizing: border-box; }
  .pg-buy__text { flex: 0 0 auto; width: 100%; }
  .pg-buy__name img { width: 300px; }
}

/* 모바일: 텍스트 위 / 제품 이미지 아래로 세로 스택 → 높이 auto */
@media (max-width: 768px) {
  .pg-buy__name img { width: 220px; }
}