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

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

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

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

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

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

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

  /* 체크박스 C 위치 */
  --event-checkbox-c-top: 15.5%;

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

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

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

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

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

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

.checkbox-pos-a,
.checkbox-pos-b {
  aspect-ratio: 1055 / 342;
}

.checkbox-pos-c {
  aspect-ratio: 1055 / 409;
}

.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);
}

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

/* 44번 고유: 체크박스 크기 및 스타일 */
.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;
}

/* 44번 고유: 체크박스 위치 */
.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);
}

.checkbox-pos-c .event-image-checkbox {
  left: var(--event-checkbox-left);
  top: var(--event-checkbox-c-top);
  width: 3.5%;
  height: 10.5%;
}

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

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

/* 44번 고유: 예약 버튼 설정 */
.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: 32%;
    --event-checkbox-b-top: 18%;
    --event-checkbox-c-top: 15.5%;;
    --event-checkbox-left: 4.5%;
  }
}

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

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