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

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

   이미지 렌더링:
   - 이미지를 static 배치로 원본 크기 그대로 렌더링
   - max-width: 100%로 반응형 자동 축소
   - aspect-ratio 하드코딩 불필요
   =================================== */

/* ===================================
   1. CSS 변수 정의 (모바일 기본)
   =================================== */
:root {
  /* 카드 간격 */
  --event-card-gap: -1.5%;

  /* 카드 폭 (ref.png 1080 기준 1029 비율) */
  --event-card-width: 95.28%;

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

  /* 타이틀 폭 (ref.png 1080 기준 1045 비율) */
  --event-title-width: 96.85%;

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

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

  /* 체크박스 A 위치 (큰 이미지: sec00, 1029x424) */
  --event-checkbox-a-top: 14%;

  /* 체크박스 B 위치 (작은 이미지: sec01~03, sec05 대부분, 1029x316) */
  --event-checkbox-b-top: 18%;

  /* 체크박스 C 위치 (중대형: sec04_01, 1029x426) */
  --event-checkbox-c-top: 12%;

  /* 체크박스 D 위치 (중형: sec04_02, 1029x395) */
  --event-checkbox-d-top: 13%;

  /* 체크박스 E 위치 (중소형: sec05_04, 1029x368) */
  --event-checkbox-e-top: 14%;

  /* 체크박스 F 위치 (sec01_01, sec01_02, sec05_01 전용, 1029x316) */
  --event-checkbox-f-top: 36%;
}

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

.event-page {
  max-width: 1080px;
}

.event-page .event-bg-image {
  max-width: 1080px;
  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: 1029px;
  margin: 0 auto;
  align-items: center;
}

/* ===================================
   3. 카드 간격 설정
   =================================== */
.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);
}

/* 카드 이미지 (static 배치 - 컨테이너 너비 100% 렌더링) */
.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;
}

/* ===================================
   4. 체크박스 위치 (이미지 타입별)
   =================================== */

/* 큰 이미지 (sec00) */
.checkbox-pos-a {
  aspect-ratio: 1029 / 424;
}

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

/* 작은 이미지 (sec01~03, sec05 대부분) */
.checkbox-pos-b {
  aspect-ratio: 1029 / 316;
}

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

/* 중대형 (sec04_01) */
.checkbox-pos-c {
  aspect-ratio: 1029 / 426;
}

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

/* 중형 (sec04_02) */
.checkbox-pos-d {
  aspect-ratio: 1029 / 395;
}

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

/* 중소형 (sec05_04) */
.checkbox-pos-e {
  aspect-ratio: 1029 / 368;
}

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

/* sec01_01, sec01_02, sec05_01 전용 */
.checkbox-pos-f {
  aspect-ratio: 1029 / 316;
}

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

/* 섹션 타이틀 이미지 - 이미지 원본 크기 기반 */
.event-section-title-img {
  width: var(--event-title-width);
  max-width: 1045px;
}

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

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

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

/* ===================================
   5. 반응형 - 480px~768px (태블릿)
   =================================== */
@media (min-width: 480px) and (max-width: 768px) {
  :root {
    --event-checkbox-left: 4%;
    --event-checkbox-a-top: 14%;
    --event-checkbox-b-top: 17%;
    --event-checkbox-c-top: 12%;
    --event-checkbox-d-top: 12%;
    --event-checkbox-e-top: 14%;
    --event-checkbox-f-top: 35%;
  }
}

/* ===================================
   6. 반응형 - 361px~479px (모바일)
   =================================== */
@media (min-width: 361px) and (max-width: 479px) {
  :root {
    --event-checkbox-left: 3%;
    --event-checkbox-a-top: 14%;
    --event-checkbox-b-top: 14%;
    --event-checkbox-c-top: 10%;
    --event-checkbox-d-top: 10%;
    --event-checkbox-e-top: 11%;
    --event-checkbox-f-top: 32%;
  }
}

/* ===================================
   7. 반응형 - 360px 이하 (소형 모바일)
   =================================== */
@media (max-width: 360px) {
  :root {
    --event-checkbox-left: 2%;
    --event-checkbox-a-top: 11%;
    --event-checkbox-b-top: 14%;
    --event-checkbox-c-top: 10%;
    --event-checkbox-d-top: 10%;
    --event-checkbox-e-top: 11%;
    --event-checkbox-f-top: 31%;
  }
}