/* ===================================
   이벤트 고유 스타일
   (공통 스타일은 event.detail.page.css 참조)

   브레이크포인트:
   - 기본: 모바일 (~479px)
   - 480px~: 대형 모바일/소형 태블릿
   - 768px~: 태블릿/소형 데스크톱
   - 1078px~: 대형 데스크톱
   =================================== */

/* ===================================
   1. CSS 변수 정의 (모바일 기본)
   =================================== */
:root {
  /* 카드 레이아웃 */
  --event-card-width: 100%;
  --event-card-gap: -9.5%;

  /* 타이틀 간격 */
  --event-title-gap-top: -4%;
  --event-title-gap-bottom: -9.5%;

  /* 히어로 패딩 */
  --event-hero-padding-top: 142%;

  /* 체크박스 A 위치 */
  --event-checkbox-a-top: 35%;

  /* 체크박스 B 위치 */
  --event-checkbox-b-top: 23.5%;

  /* 체크박스 공통 좌측 위치 */
  --event-checkbox-left: 5.5%;
}

/* ===================================
   2. 고유 스타일 (공통 오버라이드)
   =================================== */

/* 고유: max-width 1078px */
.event-page {
  max-width: 1078px;
}

.event-page .event-bg-image {
  max-width: 1078px;
  height: auto;
}

/* 고유: 이미지 스택 설정 */
.event-image-stack {
  padding-top: var(--event-hero-padding-top);
  padding-bottom: 25%;
  gap: 0;
}

/* 고유: 카드 설정 */
.event-card {
  width: var(--event-card-width);
  margin: 0 auto;
  align-items: center;
}

.checkbox-pos-a,
.checkbox-pos-b {
  aspect-ratio: 1078 / 404;
}

.event-card + .event-card {
  margin-top: var(--event-card-gap);
}

.event-card + .event-section-title-img {
  margin-top: var(--event-title-gap-top);
}

.event-section-title-img + .event-card {
  margin-top: var(--event-title-gap-bottom);
}

/* 고유: 카드 이미지 (absolute 배치) */
.event-card-img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: contain;
}

/* 고유: 체크박스 크기 및 스타일 */
.event-image-checkbox {
  width: 4%;
  height: 12%;
  min-width: 20px;
  flex-shrink: 0;
  margin: 6px 8px 6px 6px;
  align-self: flex-start;
  border-radius: 5px;
}

/* 고유: 체크박스 위치 */
.checkbox-pos-a .event-image-checkbox {
  left: var(--event-checkbox-left);
  top: var(--event-checkbox-a-top);
}

.checkbox-pos-b .event-image-checkbox {
  left: var(--event-checkbox-left);
  top: var(--event-checkbox-b-top);
}

/* 고유: 섹션 타이틀 이미지 */
.event-section-title-img {
  width: var(--event-card-width);
}

.event-product-item {
  margin: 0;
}

/* 고유: 예약 버튼 설정 */
.event-page .event-reservation-button-container {
  max-width: 1078px;
  padding: 0 0 env(safe-area-inset-bottom);
}

.event-page .event-reservation-button {
  max-width: 1078px;
}

/* ===================================
   3. 반응형 - 768px 이하 (태블릿)
   =================================== */
@media (min-width: 480px) and (max-width: 768px) {
  :root {
    --event-checkbox-a-top: 34%;
    --event-checkbox-b-top: 23%;
    --event-checkbox-left: 5.3%;
  }
}

/* ===================================
   4. 반응형 - 479px 이하 (모바일)
   =================================== */
@media (min-width: 361px) and (max-width: 479px) {
  :root {
    --event-checkbox-a-top: 32%;
    --event-checkbox-b-top: 21%;
    --event-checkbox-left: 4.3%;
  }
}

/* ===================================
   5. 반응형 - 360px 이하 (소형 모바일)
   =================================== */
@media (max-width: 360px) {
  :root {
  --event-checkbox-a-top: 31%;
  --event-checkbox-b-top: 19.5%;
  --event-checkbox-left: 3%;
  }
}