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

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

  /* 타이틀 간격 */
  --event-title-gap-top: 2%;
  --event-title-gap-bottom: -6%;
  /* 히어로 패딩 */
  --event-hero-padding-top: 144%;
  /* 체크박스 A 위치 */
  --event-checkbox-a-top: 34.5%;

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

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

/* ===================================
   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: 1077/364;
}

.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: 551px) and (max-width: 768px) {
  :root {
    --event-checkbox-a-top: 34%;
    --event-checkbox-b-top: 22%;
    --event-checkbox-left: 5.8%;
  }
}

/* ===================================
   4. 반응형 - 425px 이하 (대형 모바일)
   =================================== */
@media (min-width: 426px) and (max-width: 550px) {
  :root {
    --event-checkbox-a-top: 32%;
    --event-checkbox-b-top: 20.2%;
    --event-checkbox-left: 5%;
  }
}

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

/* ===================================
   5. 반응형 - 375px 이하 (중형 모바일)
   =================================== */
@media (min-width: 321px) and (max-width: 375px) {
  :root {
    --event-checkbox-a-top: 31%;
    --event-checkbox-b-top: 19%;
    --event-checkbox-left: 4.3%;
  }
}

/* ===================================
  6. 반응형 - 320px 이하 (소형 모바일)
  =================================== */
@media (max-width: 320px) {
  :root {
    --event-checkbox-a-top: 30%;
    --event-checkbox-b-top: 19%;
    --event-checkbox-left: 3.5%;
  }
}