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

/* ===================================
   1. CSS 변수 정의 (모바일 기본)
   =================================== */
:root {
  /* 페이지/카드 최대 너비 */
  --event-page-max-width: 1080px;
  --event-card-max-width: calc(1000 / 1080 * 100%);

  /* 카드 레이아웃 */
  --event-card-width: 100%;
  --event-card-gap: 1%;

  /* 타이틀 간격 */
  --event-title-gap-top: 4%;
  --event-title-gap-bottom: 1%;
  /* 히어로 패딩 */
  --event-hero-padding-top: 148%;

  --event-checkbox-a-top: 34%;
  --event-checkbox-b-top: 16%;
  --event-checkbox-c-top: 12%;
  --event-checkbox-left: 3%;

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

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

/* 고유: max-width */
.event-page {
  max-width: var(--event-page-max-width);
}

.event-page .event-bg-image {
  max-width: var(--event-page-max-width);
  height: auto;
}

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

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

/* 일반 카드 비율 (1000x288) */
.checkbox-pos-a,
.checkbox-pos-b {
  aspect-ratio: 1000/288;
}

/* 체크박스 C 카드 비율 (봄맞이 꿀광 패키지, 1000x400) */
.checkbox-pos-c {
  aspect-ratio: 1000/400;
}

.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;
  width: 100%;
  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);
}

.checkbox-pos-c .event-image-checkbox {
  left: var(--event-checkbox-left);
  top: var(--event-checkbox-c-top);
  height: 8.64%; /* 일반 카드(288px)와 동일 픽셀 크기: 288/400 × 12% */
}

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

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

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

.event-page .event-reservation-button {
  max-width: var(--event-page-max-width);
}

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

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

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

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

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