/*
  [DEV:PROMO] 백업에 없던 홈 프로모션 전용 스타일. 홈에서 responsive.css 다음에 로드한다.
  구조: index.html #navPromo / 선물 시차·노출 모션: js/promotion.js / 자산: assets/index/promo-*.
  투명도는 배경·글자·장식별 선언으로 분리한다. 박스 opacity로 본문까지 흐리게 만들지 않는다.
  운영 문구·혜택·모션 확인 지점은 docs/CHANGE_DETAILS.md. 이번 작업은 주석 정리만 수행.
*/
/* [개발자 확인 20260828] 프로모션 재노출: 제공 SVG의 #0CB3EE 배경,
   #FDC02E 상품 테두리, #185CFF 타이틀 마커, #0270D6 안내 띠를 코드로 구현.
   1920px 기준 중앙 콘텐츠 1280px / 상단 94px / 하단 안내 120px.
   이미지 자체 비율을 유지하며 문구는 이미지가 아닌 편집 가능한 HTML이다. */
.promo-event {
  position: relative;
  background: #0cb3ee;
  font-family: var(--font-round);
  font-weight: var(--weight-bold);
  text-align: center;
  color: #fff;
}
.promo-event__scene { position: relative; overflow: hidden; isolation: isolate; }
.promo-event__inner {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
  padding-block: 94px 70px;
}
.promo-event__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 22px;
  border-radius: 999px;
  background: #fff;
  color: #299ff4;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--weight-extrabold);
}
.promo-event__eyebrow img { width: 32px; height: 32px; }
.promo-event__title { margin: 28px 0 0; }
.promo-event__intro { display: block; font-size: 28px; line-height: 40px; font-weight: var(--weight-bold); word-break: keep-all; }
.promo-event__headline { display: block; font-size: 44px; line-height: 60px; font-weight: var(--weight-extrabold); }
.promo-event__headline > span { padding-inline: 4px; background: linear-gradient(transparent 44%, #185cff 44%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.promo-event__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 62px; }
.promo-event__product {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: 616 / 520;
  min-width: 0;
  background: #fff;
  border: 14px solid #fdc02e;
  border-radius: 48px;
  overflow: hidden;
}
.promo-event__product-name {
  display: grid;
  place-items: center;
  flex: none;
  width: 40%;
  min-height: 70px;
  padding: 8px;
  margin: 0;
  border-radius: 0 0 32px 32px;
  background: #fdc02e;
  font-size: 28px;
  line-height: 40px;
  font-weight: var(--weight-extrabold);
}
.promo-event__product-image {
  display: block;
  width: 78%;
  height: auto;
  min-height: 0;
  max-height: 70%;
  object-fit: contain;
  margin: auto;
}
/* [개발자 확인 20260828] 증정 안내 박스 배경 불투명도를 60% → 42%로 조정.
   SVG 기준 #BFE2FF·24px 라운드 유지. 배경에만 투명도를 적용하여 문구는 흐려지지 않는다. */
.promo-event__summary { margin-top: 56px; padding: 30px 24px; border-radius: 24px; background: rgb(191 226 255 / 42%); color: #1a1a1a; }
.promo-event__summary p { margin: 0; font-size: 28px; line-height: 40px; font-weight: var(--weight-extrabold); }
.promo-event__summary small { display: block; margin-top: 8px; font-size: 14px; line-height: 22px; color: #475569; }
.promo-event__notice { position: relative; z-index: 1; display: grid; place-items: center; min-height: 120px; padding: 28px 24px; background: #0270d6; }
/* [개발자 확인 20260828] PC·모바일 안내 문구는 내부 왼쪽 정렬,
   문구 묶음은 내용 너비 기준으로 가운데 배치한다. 좁은 화면에서는 여백 안에서 줄바꿈한다. */
/* [개발자 확인 20260828] 공통 목록 리셋과 무관하게 disc 불렛을 표시하고,
   불렛 포함 목록 전체는 중앙 배치, 각 항목과 이어지는 줄은 왼쪽 정렬한다. */
.promo-event__notice > ul { box-sizing: border-box; width: fit-content; max-width: min(1280px, 100%); margin: 0 auto; padding: 0 0 0 20px; list-style: disc outside; text-align: left; }
/* [개발자 확인 20260828] 안내 문구와 불렛의 흰색 불투명도를 PC·모바일 공통 60%로 조정. */
.promo-event__notice li { display: list-item; margin: 0; color: rgb(255 255 255 / 60%); font-size: 14px; line-height: 22px; }
.promo-event__notice li + li { margin-top: 4px; }

/* [개발자 확인 20260828] 회전은 img, 시차 이동은 부모에 분리해 transform 충돌 방지.
   배경의 흐린 선물 2개는 정적이며 양사이드 선물 2개만 JS로 이동한다. */
.promo-event__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.promo-event__gift { position: absolute; transform: translate3d(0, var(--gift-y, 0px), 0); }
/* [개발자 확인 20260828] 선물은 시차 transform을 유지한 채 opacity만 800ms 페이드인.
   JS/IntersectionObserver 미지원 시 숨기지 않으며, 모션 축소 설정 시 즉시 표시한다. */
.promo-event__scene.is-gift-reveal-ready .promo-event__gift {
  opacity: 0;
  transition: opacity 800ms ease-out;
}
.promo-event__scene.is-gift-reveal-ready.is-gift-visible .promo-event__gift { opacity: 1; }
.promo-event__gift img { display: block; width: 100%; height: auto; filter: drop-shadow(0 40px 30px rgb(26 26 26 / 10%)); }
.promo-event__gift--left { width: 332px; left: calc(50% - 1040px); top: 150px; }
/* [개발자 확인 20260828] 좌측 선물 이미지만 불투명도 80% 적용. 부모의 페이드인·시차 모션은 유지한다. */
.promo-event__gift--left img { opacity: .8; transform: rotate(25deg) scaleX(-1); }
.promo-event__gift--right { width: 460px; right: calc(50% - 1170px); top: 450px; }
.promo-event__gift--right img { transform: rotate(-30deg); }
/* [개발자 확인 20260828] 뒤쪽 선물 2개의 블러를 PC·모바일 공통 15px → 10px로 조정. 불투명도 43% 유지. */
.promo-event__decor::before, .promo-event__decor::after { content: ''; position: absolute; background: url('../assets/index/promotion-gift-20260828.svg') center / contain no-repeat; opacity: .43; filter: blur(10px); }
.promo-event__decor::before { width: 280px; height: 280px; top: -140px; right: 14%; transform: rotate(-135deg); }
.promo-event__decor::after { width: 696px; height: 696px; bottom: -380px; left: 10%; transform: rotate(154deg); }

/* [개발자 확인 20260828] 좁은 PC/태블릿에서는 선물을 화면 가장자리로 이동하고
   모바일에서도 카드 2열·상품 비율 유지. 글자 최소 14px 및 안내 22px 행간 준수. */
@media (max-width: 1440px) {
  .promo-event__inner { width: calc(100% - 96px); }
  .promo-event__gift--left { width: 220px; left: -150px; top: 100px; }
  .promo-event__gift--right { width: 260px; right: -180px; top: 380px; }
}
@media (max-width: 768px) {
  .promo-event__inner { width: calc(100% - 48px); padding-block: 56px 40px; }
  .promo-event__title { margin-top: 24px; }
  .promo-event__intro { max-width: 440px; margin-inline: auto; font-size: 16px; line-height: 24px; }
  .promo-event__headline { margin-top: 8px; font-size: 28px; line-height: 40px; }
  .promo-event__products { margin-top: 32px; gap: 16px; }
  .promo-event__product { border-width: 6px; border-radius: 24px; aspect-ratio: 1 / 1.12; }
  .promo-event__product-name { width: 70%; min-height: 40px; border-radius: 0 0 16px 16px; padding: 4px; font-size: 20px; line-height: 28px; }
  .promo-event__product-image { width: 90%; max-height: 65%; }
  /* [개발자 확인 20260828] 모바일도 공통 배경색·불투명도 42%·24px 라운드를 상속한다. */
  .promo-event__summary { margin-top: 24px; padding: 24px 16px; }
  .promo-event__summary p { font-size: 20px; line-height: 28px; word-break: keep-all; }
  .promo-event__notice { padding: 24px; }
  .promo-event__notice span { display: block; }
  .promo-event__gift--left { width: 120px; left: -86px; top: 100px; }
  .promo-event__gift--right { width: 140px; right: -100px; top: 290px; }
  .promo-event__decor::before { width: 150px; height: 150px; top: -80px; right: 0; }
  .promo-event__decor::after { width: 340px; height: 340px; bottom: -190px; left: -100px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-event__gift { transform: none; }
  .promo-event__scene.is-gift-reveal-ready .promo-event__gift { opacity: 1; transition: none; }
}