/*
 * 메인 (MN-1000) 페이지 스타일 — 시안 627:3287(PC) / 627:14672(MO) (CRFF-52)
 * 섹션별 주석 구획. 색·간격·둥글기는 tokens.css var() 만 사용.
 * 진행: 셸 골격 + 섹션 헤드라인(공통 .section-headline → components.css). 섹션 본문은 순차 구현.
 */

/* ── 페이지 공통 ── */
/* 롱 페이지 full-bleed (online/community 관례). 섹션이 좌우 여백을 개별 제공 */

/* Common 전폭 섹션 좌우 여백 (PC 40 / MO 16) + 상단 리듬(시안 headline y=120 / MO 80) */
.main-section {
  padding: var(--spacing-120) var(--spacing-40) 0;
}

/* 브레이크포인트별 줄바꿈 — main 은 모바일 ≤767 기준(태블릿 768~1023 은 PC 줄바꿈 유지) */
.br-mo {
  display: none;
}

/* 태블릿(768~1023)은 PC 여백(pt120·px40) 유지 — 모바일만 pt80·px16 */
@media (max-width: 767px) {
  .main-section {
    padding: var(--spacing-80) var(--spacing-16) 0;
  }
  .br-pc {
    display: none;
  }
  .br-mo {
    display: inline;
  }
}

/* ── S3 12th CRFF 소식 캐러셀 (627:3313) ── */
/* TODO: 소식 콘텐츠 캐러셀 본문 */

/* ── S1 히어로 (627:3612 / MO 627:14920) ──
   배경 = 생성형 오브젝트 통이미지(--hero-bg, 627:6884 export 대기) + 빨강 폴백. 딤은 CSS 그라디언트.
   타이틀 캐러셀(좌) + quick 예매 패널(우, PC 전용). MO 는 중앙 headcopy(quick·CTA 제외). */
.main-hero {
  --hero-bg: url("/images/main/hero-bg.png");   /* 실루엣 통이미지 — 파일 도착 전엔 빨강만 노출 */
  --main-hero-autoplay: 5s;   /* 진행바 채움 속도 = Swiper autoplay delay */
  position: relative;
  min-height: 980px;
  overflow: hidden;
  border: 3px solid var(--color-gray-10);   /* 시안 hero 프레임 stroke 3 #222 (627:3612) */
  border-radius: var(--radius-xxlarge);   /* 시안 hero 프레임 r48 (627:3612) */
  background-color: #f3231a;   /* 시안 히어로 레드(#f3231a — 스케일 밖, 히어로 전용 raw) */
  background-image: var(--hero-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 딤(dimd)은 hero-bg.png 에 baked-in (627:6884 export) — 별도 오버레이 없음 */

/* 배너 등록 시(≥900, PC 이미지 노출 구간): PC 이미지(1920×980)가 잘리지 않게 히어로 높이를 이미지 비율에 연동 →
   뷰포트 폭에 맞춰 전체 이미지가 비율 유지 축소(고정 980 크롭 대신). 폴백(배너 없음)은 980 고정 유지. (CRFF-226)
   MO 이미지는 ≤899 에서만(히어로 모바일 전환 900 — quick↔인디케이터 겹침 회피), 900~1023 태블릿은 PC 이미지 + 이 축소로 처리. */
@media (min-width: 900px) {
  .main-hero--banner {
    /* 하단 앵커 빠른예매 패널(682+하단40=722)이 들어갈 최소 높이 — 이보다 히어로가 낮아지면
     * 패널 top 이 히어로 위(헤더 밑)로 삐져나와 overflow:hidden 에 잘림 (CRFF-422, 1280~1415).
     * 폭 넓으면 aspect-ratio 높이가 740 초과라 비구속 — 좁은 구간에서만 바닥값으로 작동. 배너는
     * object-fit:cover(좌측 기준)라 소폭 크롭만 늘고 좌측 콘텐츠는 보존. */
    min-height: 740px;
    width: 100%;   /* aspect-ratio + min-height 가 폭을 높이에서 역산(1450px)해 1280 뷰포트에서 가로 넘침나던 regression 차단 — 폭은 부모 고정, 높이만 aspect/min 으로 (CRFF-422) */
    aspect-ratio: 1920 / 980;
  }
}

/* 타이틀 캐러셀 */
.main-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.main-hero-slide {
  display: flex;
  align-items: center;
  height: 100%;
}

/* [CRFF-61] 관리자 등록 비주얼 배너 슬라이드 (t_banner) — 이미지 풀블리드 + 전체 클릭(설정 URL) */
.main-hero-slide--banner {
  position: relative;
}

.main-hero-banner {
  position: absolute;
  inset: 0;
  display: block;
}

.main-hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;   /* 뷰포트<이미지폭일 때 좌측 기준 크롭 — 좌측 텍스트·CTA 보존 (CRFF-226) */
}

.main-hero-banner-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.main-hero-title {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48);
  align-items: flex-start;
  max-width: 687px;
  padding-left: 106px;   /* 시안 좌측 106 */
  color: var(--color-text-inverse);
}

.main-hero-txt {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

.main-hero-heads {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.main-hero-tagline {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 24px;   /* title-3 */
  line-height: 1.35;
  letter-spacing: -0.5px;
}

.main-hero-headline {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 72px;   /* display-1 */
  line-height: 1.35;
  letter-spacing: -0.5px;
}

.main-hero-sub {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 20px;   /* body-2 */
  line-height: 1.5;
  letter-spacing: -0.5px;
}

.main-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  min-width: 135px;
  padding: 0 var(--spacing-32);
  border: 1px solid var(--color-text-inverse);
  border-radius: var(--radius-full);
  color: var(--color-text-inverse);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  text-decoration: none;
}

/* 인디케이터 (시안 627:3679): 이전/다음 화살표 + 진행 pill */
.main-hero-indicator {
  position: absolute;
  left: 106px;
  bottom: 76px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;   /* 시안 18.286 */
}

/* 이전/다음 화살표 — 흰 40% 원 + blur + chevron */
.main-hero-nav {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border: none;
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.4);   /* 시안 white 40% (white-40 토큰 없음 — 인디케이터 전용 raw) */
  -webkit-backdrop-filter: blur(22.857px);
  backdrop-filter: blur(22.857px);
  cursor: pointer;
}

.main-hero-nav::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
  background-color: var(--color-text-inverse);   /* 흰 chevron */
}

.main-hero-nav--prev::before {
  -webkit-mask: url("../../images/icon/func-paginationPrev.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-paginationPrev.svg") no-repeat center / contain;
}

.main-hero-nav--next::before {
  -webkit-mask: url("../../images/icon/func-paginationNext.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-paginationNext.svg") no-repeat center / contain;
}

/* 재생/일시정지 토글 — MO 인디케이터 전용(PC는 화살표) */
.main-hero-playpause { display: none; }

/* 진행 pill — dim-white-20 + blur, 내부 활성 진행바 + 도트.
   Swiper 기본 pagination(position:absolute·width:100%·transform)보다 명시도 높여 정적 pill 로 고정 */
.main-hero .main-hero-pagination {
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;   /* 시안 13.714 */
  width: 224px;
  height: 64px;
  border-radius: var(--radius-full);
  background-color: var(--color-dim-white-40);   /* 시안 pill white-40 (nav와 동일) */
  -webkit-backdrop-filter: blur(22.857px);
  backdrop-filter: blur(22.857px);
}

/* 슬라이드 1개(배너 1장 등)면 Swiper 가 lock 클래스 부여 → 인디케이터 pill 숨김
   (커스텀 display:flex 가 Swiper 기본 .swiper-pagination-lock 을 덮으므로 명시도 높여 재지정) */
.main-hero .main-hero-pagination.swiper-pagination-lock {
  display: none;
}

.main-hero-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  border-radius: var(--radius-full);
  background-color: rgba(34, 34, 34, 0.4);   /* 시안 #222 40% (dark-40 토큰 없음 — 인디케이터 전용 raw) */
  opacity: 1;
}

/* 활성 = 진행바: 트랙(46×9, #222 40% — base bg-color) 위에 채움(#222 gradient) 을 bg-size 로 0→100% 애니메이션 */
.main-hero-pagination .swiper-pagination-bullet-active {
  width: 46px;
  background-image: linear-gradient(var(--color-gray-10), var(--color-gray-10));   /* 채움 #222 (100%) */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  animation: main-hero-fill var(--main-hero-autoplay, 5s) linear forwards;
}

@keyframes main-hero-fill {
  to { background-size: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .main-hero-pagination .swiper-pagination-bullet-active {
    animation: none;
    background-size: 40% 100%;   /* 정적 부분 채움 */
  }
}

/* quick 예매 패널 (PC 전용) */
.main-hero-quick {
  position: absolute;
  bottom: var(--spacing-40);   /* 하단 앵커(펼침) — 히어로 하단 40 (시안 627:3287 quick y268+672, 검수 2026-08-31) */
  right: var(--spacing-40);
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 442px;   /* top↔body 카드 맞닿음(시안 gap 0) */
}

.main-hero-quick-close { display: none; }   /* 모바일 하단 플로팅 바에서만 노출 */

.main-hero-quick-top {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);   /* 시안 group↔화살표 24 */
  width: 100%;
  padding: var(--spacing-40) var(--spacing-32);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xlarge);   /* 네 모서리 전부 둥금 — 검정 D-day 카드(펼침·접힘 공통, 시안 627:5607) */
  background-color: var(--color-gray-10);
  color: var(--color-text-inverse);
  text-align: left;
  cursor: pointer;
}

.main-hero-quick-group {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-16);   /* D-day↔텍스트 16 */
}

.main-hero-quick-dday {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background-color: var(--color-cta);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.5px;
}

.main-hero-quick-when {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.main-hero-quick-when-sub {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.5px;
}

.main-hero-quick-when-tit {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

.main-hero-quick-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: var(--color-text-inverse);   /* 흰 픽셀 chevron */
  -webkit-mask: url("../../images/common/ico-chevron-pixel.svg") no-repeat center / contain;
  mask: url("../../images/common/ico-chevron-pixel.svg") no-repeat center / contain;
  transform: rotate(180deg);   /* ⌄ → ^ (펼침=접기 액션, 시안 픽셀 chevron) */
  transition: transform 0.2s ease;
}

.main-hero-quick-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-56);
  padding: var(--spacing-40) var(--spacing-32);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xlarge);   /* 네 모서리 전부 둥금 — 흰 본문 카드(시안 627:5607) */
  background-color: var(--color-background);
}

/* summary↔detail 40 (body head↔button 은 body gap 56) */
.main-hero-quick-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

.main-hero-quick-summary {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
}

.main-hero-quick-detail {
  display: flex;
  flex-direction: column;
}

.main-hero-quick-row {
  display: flex;
  gap: var(--spacing-12);
  padding: var(--spacing-16) 0;
}

.main-hero-quick-row:first-child { padding-top: 0; }
.main-hero-quick-row:last-child { padding-bottom: 0; }
.main-hero-quick-row + .main-hero-quick-row { border-top: 1px solid var(--color-divider); }

.main-hero-quick-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 120px;
  flex-shrink: 0;
  white-space: nowrap;   /* 시안: "예매 가능 좌석" 한 줄(줄바꿈 금지) */
  color: var(--color-text-body);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.5px;
}

.main-hero-quick-value {
  flex: 1;
  min-width: 0;
  text-align: right;
  color: var(--color-text-heading);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: -0.5px;
}

.main-hero-quick-row--seats .main-hero-quick-label { align-items: flex-start; }

.main-hero-quick-row--seats .main-hero-quick-value {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  font-weight: 400;
}

.main-hero-quick-seat {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.main-hero-quick-seat-name {
  flex: 1;
  min-width: 0;
  text-align: right;   /* 시안: 좌석명 우측 정렬(카운트 쪽) */
  font-weight: 400;
  font-size: 18px;
  word-break: keep-all;   /* 320~375 좁은 폭에서 "(1인석)" 괄호 중간 끊김 방지 — 존이름/괄호 단위 줄바꿈 (CRFF-425) */
}

.main-hero-quick-seat-count {
  flex-shrink: 0;
  font-weight: 400;
  font-size: 18px;
}

.main-hero-quick-seat-count strong {
  display: inline-block;
  width: 40px;
  text-align: right;   /* 시안: 숫자 우측 정렬(자릿수 정렬) */
  font-weight: 700;
  font-size: 20px;
  color: var(--color-cta);
}

.main-hero-quick-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-10);
  color: var(--color-text-inverse);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.5px;
  text-decoration: none;
}

/* ── quick 상태: 접힘(close) ── */
/* 접힘(D-day 바만 — 영화제 기간 등) — 하단 56 (시안 1243:11957 quick y764+160/980) */
@media (min-width: 1024px) {
  .main-hero-quick.is-collapsed {
    bottom: var(--spacing-56);
  }
}
.main-hero-quick.is-collapsed .main-hero-quick-body { display: none; }
.main-hero-quick.is-collapsed .main-hero-quick-arrow { transform: rotate(0deg); }   /* ⌄ 펼치기 */

/* 모바일(≤767) 하단 바는 바닥에서 위로 펼치는 형태라 PC·태블릿(우측/하단 카드)과 화살표 방향이 반대다:
 * 펼침 = ⌄(아래=접기), 접힘 = ∧(위=펼치기). 회전 규칙이 전역이라 여기서 뒤집는다 (모바일 시안 627:15365 / 아이콘 1273:12773 — CRFF-184).
 * 태블릿(900~1023)은 PC와 동일 방향 유지(사용자 확정 2026-09-08) */
@media (max-width: 899px) {
  .main-hero-quick-arrow { transform: rotate(0deg); }                               /* 펼침 ⌄ */
  .main-hero-quick.is-collapsed .main-hero-quick-arrow { transform: rotate(180deg); }   /* 접힘 ∧ */
}

/* ── quick 상태: soldout(예매마감) ── */
.main-hero-quick-seat-soldout {
  flex-shrink: 0;
  width: 40px;
  text-align: right;
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.5px;
  color: var(--color-cta);   /* 마감 = 빨강 */
}

.main-hero-quick-cta--disabled {
  background-color: var(--color-background-section);   /* #f3f3f3 */
  color: var(--color-text-caption);   /* #767676 */
  cursor: default;
}

/* ── quick 상태: online(영화제중) — 상영작 3행 + 감상하기 ── */
.main-hero-quick-filmrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-24) 0;
}

.main-hero-quick-filmrow:first-child { padding-top: 0; }
.main-hero-quick-filmrow:last-child { padding-bottom: 0; }
.main-hero-quick-filmrow + .main-hero-quick-filmrow { border-top: 1px solid var(--color-divider); }

.main-hero-quick-filmrow .main-hero-quick-label {
  flex: 1;
  min-width: 0;
  width: auto;
}

.main-hero-quick-watch {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 124px;
  height: 44px;
  padding: 0 var(--spacing-24);
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  color: var(--color-text-heading);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.5px;
  text-decoration: none;
}

/* 히어로 배경 — 태블릿(900~1023)은 빨강+CSS 딤 (모바일은 이미지에 딤 포함, 아래 ≤899) */
@media (min-width: 900px) and (max-width: 1023px) {
  .main-hero {
    background-image: none;
  }
  .main-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 62%, rgba(0, 0, 0, 0) 89%);   /* 시안 1120:13136 dim stops (62.3%/89%) */
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
}

/* 태블릿(900~1023) — 좌측패딩 76 + quick 패널을 하단 우측 D-day 바로 (접힘 기본→클릭 시 펼침) */
@media (min-width: 900px) and (max-width: 1279px) {
  /* 상한 1023→1279 — 헤더 태블릿 전환(≤1279)과 히어로 quick 태블릿 플로팅 바를 함께 전환 */
  .main-hero-title { padding-left: 76px; }
  .main-hero-indicator { left: 76px; }
  /* CTA 버튼 유지 + 탭 영역을 슬라이드 전체로 확장 — 배너 탭 시 이동 (2026-08-30 CRFF-144) */
  .main-hero-slide { position: relative; }
  .main-hero-cta::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .main-hero-quick {
    top: auto;
    bottom: 56px;   /* 시안 하단 56 (인디케이터 우측 나란히) */
    right: 76px;   /* 시안 우측 76 (1024 − 바 x558 − 폭 390, 히어로 좌측패딩 76 대칭 — 검수 2026-09-15) */
    transform: none;
    width: 390px;   /* 시안 1120:13150 플로팅 바 폭 390 (PC 442 오버라이드) */
  }
  /* 태블릿 플로팅 바 = MO 사이징(시안 1120:13150: d-day58·텍스트18/24·화살표32·radius24) — PC 큰 값 오버라이드 */
  .main-hero-quick-top {
    padding: var(--spacing-24) var(--spacing-24) var(--spacing-24) var(--spacing-16);   /* 시안 pl16 pr24 py24 */
    border: none;
    border-radius: var(--radius-large);   /* 24 */
  }
  .main-hero-quick-dday { width: 58px; height: 58px; font-size: 14px; }
  .main-hero-quick-when-sub { font-size: 18px; }
  .main-hero-quick-when-tit { font-size: 24px; }
  .main-hero-quick-arrow { width: 32px; height: 32px; }
  /* 펼침 body — 바와 동일 톤(테두리 없음·radius24)으로 축소 (태블릿 펼침 시안 별도 없음 → MO 값 준용) */
  .main-hero-quick-body {
    gap: var(--spacing-40);
    padding: var(--spacing-24) var(--spacing-24) var(--spacing-32);
    border: none;
    border-radius: var(--radius-large);
  }
}

/* 모바일(≤899 — 히어로만 겹침 회피 위해 전환 900, 타 섹션은 767 유지) — 중앙정렬·CTA 없음·일시정지·작은 사이즈 */
@media (max-width: 899px) {
  .main-hero {
    min-height: 680px;
    background-image: url("/images/main/hero-bg-mo.png");   /* 모바일 모티프 (상단) + 빨강 하단 */
    background-position: top center;
    background-size: cover;
    border: 2px solid var(--color-gray-10);
    border-bottom: none;   /* 시안: 상·좌·우 2px, 하단 없음 */
    border-radius: var(--radius-large);   /* 24 */
  }
  /* 모바일 quick — 하단 플로팅 바(접힘 기본)→펼치면 바 위로 성장, body 는 바 아래 (시안 627:15707) */
  .main-hero-quick {
    display: flex;
    position: fixed;
    top: auto;   /* base top:50% 해제 (top+bottom 동시 지정 시 높이 늘어남 방지) */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 20;
    touch-action: none;   /* 바 위 스와이프 시 페이지 스크롤 차단 → 바만 펼침/접힘 */
    transform: translateY(0);   /* 열림 = top+body 전체 노출 (바닥 고정) */
    transition: transform 0.3s ease;   /* 스냅 애니메이션 */
  }
  /* 접힘 = body 높이만큼 아래로 밀어 D-day 바(핸들)만 노출 (--quick-body-h: main.js 가 측정) */
  .main-hero-quick.is-collapsed { transform: translateY(var(--quick-body-h, 100%)); }
  /* 자동 숨김 — 스크롤 정지(1s)·아래로 스크롤 시 바 전체를 화면 밖으로. 위로 스크롤 시 제거→버튼 peek 복귀.
   * is-collapsed 뒤에 둬 둘 다 있을 때 우선(완전 숨김). 펼침 상태에선 JS 가 적용 안 함 */
  .main-hero-quick.is-hidden { transform: translateY(100%); }
  /* 드래그 중엔 손가락 즉시 추종(트랜지션 off) */
  .main-hero-quick.is-dragging { transition: none; }
  /* 모바일: 접힘이어도 body 렌더(끌어올림 슬라이드용) — base display:none 해제 */
  .main-hero-quick.is-collapsed .main-hero-quick-body { display: flex; }
  .main-hero-quick-top {
    gap: var(--spacing-24);
    padding: var(--spacing-24) var(--spacing-24) var(--spacing-24) var(--spacing-16);
    border: none;
    border-radius: var(--radius-large);   /* 24 (시안 바 4모서리) */
  }
  .main-hero-quick-dday { width: 58px; height: 58px; font-size: 14px; }
  .main-hero-quick-when-sub { font-size: 18px; }
  .main-hero-quick-when-tit { font-size: 24px; }
  .main-hero-quick-arrow { width: 32px; height: 32px; }
  /* 닫기 버튼 — 접힘 상태에만 노출(펼침 시안엔 없음), 바 위 8px·우측 28 */
  .main-hero-quick.is-collapsed .main-hero-quick-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -32px;   /* 바 위 8px (닫기 24 + gap 8) */
    right: 28px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background-color: var(--color-gray-10);
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    cursor: pointer;
  }
  .main-hero-quick-close::before {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--color-text-inverse);
    -webkit-mask: url("../../images/icon/func-close.svg") no-repeat center / contain;
    mask: url("../../images/icon/func-close.svg") no-repeat center / contain;
  }
  /* 펼침 body (시안 627:15707): 바 아래 흰 카드, 상단만 둥글게 */
  .main-hero-quick-body {
    gap: var(--spacing-40);
    padding: var(--spacing-24) var(--spacing-24) var(--spacing-32);
    border: none;
    border-radius: var(--radius-large) var(--radius-large) 0 0;
  }
  .main-hero-quick-head { gap: var(--spacing-24); }   /* summary↔detail */
  .main-hero-quick-summary { font-size: 20px; }
  .main-hero-quick-row { gap: var(--spacing-24); padding: var(--spacing-12) 0; }
  .main-hero-quick-label { gap: var(--spacing-6); }
  .main-hero-quick-row--seats .main-hero-quick-value { gap: var(--spacing-12); }
  .main-hero-quick-seat { gap: var(--spacing-4); }
  .main-hero-quick-seat-count strong,
  .main-hero-quick-seat-soldout { font-size: 18px; }
  .main-hero-quick-cta { height: 52px; font-size: 15px; }
  /* FAB — 퀵바 위 24px (시안 1650:12274). 노출 높이는 main.js 가 --fab-quick-offset 으로 전달 */
  .fab.is-above-quick {
    bottom: calc(var(--fab-quick-offset, 0px) + var(--spacing-24));
    transition: transform 0.2s ease, bottom 0.3s ease;   /* 바 펼침/접힘 스냅과 동조 */
  }
  /* 하단 고정 quick 바(접힘 핸들 110px)가 푸터 카피라이트를 덮는 겹침 해소 —
     메인 푸터에 바 높이(110) + 기본 하단 여백(80)만큼 확보해 콘텐츠가 바 위로 뜨게 (시안 1936:26710) */
  .main ~ .site-footer {
    padding-bottom: calc(var(--spacing-80) + 110px);
  }
  .main-hero-slide {
    position: relative;   /* CTA 오버레이 기준 */
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 124px;
    text-align: center;
  }
  .main-hero-title {
    align-items: center;
    max-width: none;
    padding: 0 var(--spacing-16);
    text-align: center;
  }
  .main-hero-txt { gap: var(--spacing-12); }
  .main-hero-heads { gap: var(--spacing-12); }
  .main-hero-headline { font-size: 44px; }
  .main-hero-tagline { font-size: 18px; }
  .main-hero-sub { font-size: 18px; }
  /* CTA 시각 숨김 + 슬라이드 전체 탭 영역 — 배너 탭 시 이동 (2026-08-30 CRFF-144) */
  .main-hero-cta {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: auto;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: none;
    text-indent: -9999px;
  }
  .main-hero-indicator {
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--spacing-40);
    gap: var(--spacing-12);
  }
  .main-hero-nav { display: none; }
  .main-hero-playpause {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    cursor: pointer;
  }
  .main-hero-playpause::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: var(--color-text-inverse);
    -webkit-mask: url("../../images/icon/func-pause.svg") no-repeat center / contain;
    mask: url("../../images/icon/func-pause.svg") no-repeat center / contain;
  }
  .main-hero-playpause.is-paused::before {
    -webkit-mask-image: url("../../images/icon/func-play.svg");
    mask-image: url("../../images/icon/func-play.svg");
  }
  .main-hero .main-hero-pagination {
    width: 160px;
    height: 44px;
    gap: var(--spacing-12);
    background-color: rgba(255, 255, 255, 0.4);
  }
  .main-hero-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.4);
  }
  .main-hero-pagination .swiper-pagination-bullet-active {
    width: 40px;
    background-image: linear-gradient(var(--color-text-inverse), var(--color-text-inverse));
  }
}

/* ── S2 바로가기 (627:3291 / MO 627:14674) — full-bleed 색상 바 3행 ──
   각 행: 모티프 + 타이틀 + 설명 + dot-next. 인접 행 보더 -2px 겹침. 색은 -60 토큰. */
.main-link-list {
  list-style: none;
}

.main-link-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-40);
  min-height: 168px;
  padding: var(--spacing-24) var(--spacing-40);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xxlarge);   /* 48 */
  overflow: hidden;
  text-decoration: none;
}

.main-link-list li + li .main-link-row {
  margin-top: -2px;   /* 인접 보더 겹침 (시안 mb-[-2px]) */
}

.main-link-row--pink { background-color: var(--color-pink-60); }
.main-link-row--green { background-color: var(--color-green-60); }
.main-link-row--purple { background-color: var(--color-purple-60); }

.main-link-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  padding-left: var(--spacing-12);   /* 시안 pl-12 */
}

.main-link-motif {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}

.main-link-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-40);
}

.main-link-title {
  flex-shrink: 0;
  width: 316px;   /* 시안 tit 452 − 모티프 120 − gap 16: 타이틀 칼럼 고정폭 → 3행 설명 좌측정렬 (627:3301 w-452) */
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 56px;   /* display-2 */
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  white-space: nowrap;
}

.main-link-desc {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
}

.main-link-arrow {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* 좁은 태블릿(768~899) — 나란히 두면 설명이 눌려서 텍스트만 세로 스택(모티프·타이포는 PC 유지) */
@media (min-width: 768px) and (max-width: 899px) {
  .main-link-text {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
  }
  .main-link-title { width: auto; }   /* 세로 스택 구간은 고정폭 해제 */
}

/* 모바일(≤767) — 모티프 축소·텍스트 스택·작은 사이즈 */
@media (max-width: 767px) {
  .main-link-row {
    gap: var(--spacing-24);
    min-height: 148px;
    padding: var(--spacing-24) var(--spacing-16);
    border-radius: var(--radius-large);   /* MO 24 */
  }
  .main-link-body {
    padding-left: 0;
  }
  .main-link-motif { width: 80px; height: 80px; }
  .main-link-text {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
  }
  .main-link-title { width: auto; font-size: 24px; line-height: 1.2; }
  .main-link-desc { font-size: 14px; color: var(--color-text-subtitle); }
  .main-link-arrow { width: 40px; height: 40px; }
}

/* ── S4 마퀴 (627:3342 / MO 627:14721) — 로고 타이포 무한 흐름 밴드 ──
   #222 밴드에 타일 PNG(@2x) 가로 나열. 흐름은 순수 CSS 키프레임(등속):
   트랙 안에 동일 타일 묶음(.main-marquee-group)을 2벌 두고 트랙을 -50%(= 묶음 1벌 폭) 이동 → 끝과 시작이 정확히 이어짐.
   묶음 폭 = 타일 폭 합 + gap×10 이 되도록 묶음 뒤에 gap 만큼 padding-right 를 둔다(트랙 자체에는 gap 없음).
   Swiper(autoplay delay:0)는 슬라이드 1장당 이동 시간이 고정이라 타일 폭(279~608px)마다 속도가 출렁여 폐기.
   타일 5·7·8 은 평문 저높이. */
.main-marquee {
  overflow: hidden;
  background-color: var(--color-gray-10);   /* 시안 #222 */
  padding: var(--spacing-24) 0;
}

.main-marquee-track {
  display: flex;
  width: max-content;   /* 묶음 2벌 실제 폭(컨테이너 폭에 눌리지 않게) */
  will-change: transform;
  animation: main-marquee-scroll var(--main-marquee-duration, 40s) linear infinite;   /* 묶음 1벌이 지나가는 시간 — 흐름 속도 조정 지점 */
}

.main-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--spacing-16);             /* 시안 PC gap 16 */
  padding-right: var(--spacing-16);   /* 묶음 경계에도 동일 gap */
}

.main-marquee-item {
  flex-shrink: 0;
}

.main-marquee-item img {
  display: block;
  width: auto;
  height: 160px;   /* 타일 기본 높이 (pill·320@2x → 160). 평문 저높이 타일은 아래 모디파이어 */
}

.main-marquee-item--h80 img { height: 80px; }     /* 타일5 (Frame6) */
.main-marquee-item--h93 img { height: 93px; }     /* 타일7 (Frame4) */
.main-marquee-item--h118 img { height: 118px; }   /* 타일8 (Frame3) */

@keyframes main-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }   /* 묶음 1벌 폭만큼 이동 후 처음으로(동일 화면이라 점프 없음) */
}

@media (prefers-reduced-motion: reduce) {
  .main-marquee-track { animation: none; }   /* 정적 밴드 */
}

@media (max-width: 1023px) {
  .main-marquee-group {
    gap: var(--spacing-8);             /* 시안 MO gap 7.7 */
    padding-right: var(--spacing-8);
  }
}

@media (max-width: 767px) {
  .main-marquee { padding: var(--spacing-12) 0; }   /* 시안 MO pad 11.5 */
  .main-marquee-item img { height: 77px; }   /* 시안 MO 76.9 */
  .main-marquee-item--h80 img { height: 38px; }
  .main-marquee-item--h93 img { height: 44px; }
  .main-marquee-item--h118 img { height: 57px; }
}

/* ── S3 "12th CRFF" 소식 캐러셀 (627:3313 / MO 627:14696) ──
   2단 슬라이드: 좌 다크카드(#222) 타이틀+서브 / 우 연두카드 이미지+노란 마스크. 화살표·도트는 좌측 카드 위. */
/* 하단 여백 — 아래 마퀴(패딩 없는 flush 밴드)와 붙지 않도록 (시안 crff 섹션 pb 120) */
.main-crff {
  padding-bottom: var(--spacing-120);
}

.main-crff-carousel {
  position: relative;
  margin-top: var(--spacing-56);
}

.main-crff-slide {
  display: flex;
  align-items: stretch;
  height: 890px;
}

/* [CRFF-61] 소식 슬라이드 전체 클릭 링크 — 기존 flex 자식 배치 보존(display:contents) */
.main-crff-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.main-crff-text {
  flex: 1 1 50%;   /* 다크/이미지 카드 정확히 50:50 — basis 0 이면 타이틀 콘텐츠폭으로 밀려 next 화살표 우측 gap 어긋남 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-40);
  padding: var(--spacing-120) var(--spacing-56) var(--spacing-80);
  background-color: var(--color-gray-10);
  border-radius: var(--radius-xxlarge);   /* 48 */
  color: var(--color-text-inverse);
  text-align: center;
}

.main-crff-title {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 72px;   /* display-1 */
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.main-crff-sub {
  margin-top: var(--spacing-40);
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 22px;   /* body-1 */
  line-height: 1.45;
  letter-spacing: -0.5px;
}

.main-crff-img {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xxlarge);
  background-color: #e9f4bf;   /* 시안 연두 — 스케일 밖 raw (이미지·마스크가 대부분 덮음) */
}

.main-crff-photo,
.main-crff-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-crff-mask {
  pointer-events: none;
}

/* 화살표 (흰 원 80) — 좌측 다크카드 좌/우 가장자리. 기본 숨김 → 캐러셀 hover 시 노출 */
.main-crff-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 마우스 오버 시에만 좌우 버튼 노출 */
.main-crff-carousel:hover .main-crff-nav {
  opacity: 1;
  visibility: visible;
}

.main-crff-nav::before {
  content: "";
  width: 32px;
  height: 32px;
  background-color: var(--color-gray-10);
}

.main-crff-nav--prev { left: var(--spacing-40); }
.main-crff-nav--prev::before {
  -webkit-mask: url("../../images/icon/func-paginationPrev.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-paginationPrev.svg") no-repeat center / contain;
}

.main-crff-nav--next { left: calc(50% - 80px - var(--spacing-40)); }   /* 다크카드 우측 가장자리 (시안 left 800) */
.main-crff-nav--next::before {
  -webkit-mask: url("../../images/icon/func-paginationNext.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-paginationNext.svg") no-repeat center / contain;
}

/* 도트 — 다크카드(좌측 절반) 하단 중앙. Swiper 기본(width:100%·bottom:8·transform)보다 명시도 높여 고정 */
.main-crff-carousel .main-crff-pagination {
  position: absolute;
  left: 0;
  bottom: var(--spacing-80);   /* 시안 카드 하단 80 */
  width: 50%;                  /* 텍스트카드(좌측 절반) */
  transform: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;   /* 시안 14.222 */
}

.main-crff-pagination .swiper-pagination-bullet {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  border: 1.3px solid var(--color-text-inverse);   /* 비활성: 흰 아웃라인 */
  background-color: transparent;
  opacity: 1;
}

/* 활성: 링(32) + 안쪽 채운 점(14) — 시안 */
.main-crff-pagination .swiper-pagination-bullet-active {
  position: relative;
  width: 32px;
  height: 32px;
  border-width: 2px;   /* 시안 1.778 */
  background-color: transparent;
}

.main-crff-pagination .swiper-pagination-bullet-active::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-inverse);
}

/* 태블릿(768~1023) 12th CRFF — 세로 스택(다크 텍스트카드 위 / 이미지카드 아래), 도트만 (1120:12776) */
/* 태블릿(768~1279): 시안(1120:12776) 세로 스택 — 다크카드 위 / 이미지 아래.
   1024~1279도 태블릿 디자인 적용(기존 ≤1023 → ≤1279 확장, PC 좌우는 ≥1280) */
@media (min-width: 768px) and (max-width: 1279px) {
  .main-crff-slide { flex-direction: column; height: auto; }
  .main-crff-text {
    flex: none;
    height: 890px;
    padding: 104px var(--spacing-40);
    border-radius: 64px;   /* 시안 raw (radius 토큰 스케일 밖) */
  }
  .main-crff-sub { margin-top: var(--spacing-40); font-size: 36px; }   /* 시안 title↔sub 40 (1120:12778 gap 42.01→40) */
  .main-crff-img {
    flex: none;
    height: 890px;
    border-radius: 64px;
  }
  .main-crff-nav { display: none; }   /* 화살표 제거 — 도트만 */
  .main-crff-carousel .main-crff-pagination {
    left: 0;
    width: 100%;
    top: auto;
    bottom: calc(50% + var(--spacing-120));   /* 다크카드(상단) 하단 영역 */
  }
}

@media (max-width: 767px) {
  .main-crff { padding-bottom: var(--spacing-80); }   /* MO 섹션 리듬 80 */
  .main-crff-carousel { margin-top: var(--spacing-40); }
  .main-crff-slide { flex-direction: column; height: auto; }
  .main-crff-text {
    flex: none;
    height: 340px;   /* 시안 다크카드 340 */
    gap: var(--spacing-24);
    padding: var(--spacing-40) var(--spacing-16);
    border-radius: var(--radius-large);   /* 24 */
  }
  .main-crff-title { font-size: 28px; }   /* MO title-2 */
  .main-crff-sub { margin-top: var(--spacing-16); font-size: 14px; }   /* 시안 title↔sub 16 (627:14704) */
  .main-crff-img { flex: none; height: 340px; border-radius: var(--radius-large); }
  .main-crff-nav { display: none; }   /* 화살표 제거 — 도트만 */
  .main-crff-carousel .main-crff-pagination {
    left: 0;
    width: 100%;
    top: auto;
    bottom: calc(50% + var(--spacing-40));   /* 다크카드(상단) 하단 */
  }
  .main-crff-pagination .swiper-pagination-bullet { width: 11px; height: 11px; }
  .main-crff-pagination .swiper-pagination-bullet-active { width: 24px; height: 24px; }
  .main-crff-pagination .swiper-pagination-bullet-active::before { width: 11px; height: 11px; }
}

/* ── S5 아이의 시선을 담은 영화 (627:3423 / MO 627:14802) ──
   섹션 헤드라인(공통) + 영화 카드 캐러셀. 카드는 메인 스코프(online 카드와 구조 상이, C2 결정). */
.main-movie {
  padding-bottom: var(--spacing-120);   /* 다음 섹션과 간격 */
  background-color: var(--color-background-section);   /* 시안 섹션 배경 #f3f3f3 */
}

.main-movie-carousel {
  position: relative;
  margin-top: var(--spacing-56);
}

/* 카드 */
.main-movie-card.swiper-slide {
  width: 568px;   /* 시안 카드 폭 */
  height: auto;
}

.main-movie-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-gray-95);   /* 시안 카드 배경 #f5f5f5 (토큰 신규) */
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xxlarge);   /* 48 */
  overflow: visible;   /* body를 카드 외곽선에 겹쳐 라운드 동심화(코너 여백 제거) — 아래 body margin 참조 */
}

/* [CRFF-61] 영화 카드 전체 클릭 링크(→ UT-08) — 기존 flex 자식 배치 보존(display:contents) */
.main-movie-card-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.main-movie-card-top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding: var(--spacing-24) var(--spacing-32) var(--spacing-32);
}

.main-movie-card-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-movie-card-ratings {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
}

/* 상단 제목+태그 (온라인 수상작 카드 .online-award-head 동일 구조, 2026-09-30 카드 구조 변경)
   — 제목 1줄 말줄임 + 태그 1줄(넘치면 숨김) + min-height 로 top 높이 고정 → 캐러셀 포스터 상단 정렬 */
.main-movie-card-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
  min-height: 76px;   /* heading-2 32×1.35(43.2) + gap 8 + body-4 16×1.5(24) — 태그 없는 카드도 행 높이 예약 */
}

.main-movie-card-name {
  color: var(--color-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-movie-card-tags {
  flex-wrap: nowrap;   /* components .movie-tags 는 줄바꿈 허용 — 메인 카드는 1줄 고정 */
  overflow: hidden;
}

.main-movie-card-body {
  position: relative;
  height: 801px;   /* 시안 포스터 영역 */
  /* 카드 테두리(2px) 바깥으로 확장해 카드 외곽선과 겹침 → 두 라운드 동심화(코너 여백 제거) */
  margin: 0 -2px -2px;
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xxlarge);
  overflow: hidden;
}

.main-movie-card-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-movie-card-dim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 224px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));   /* 시안 dimmed */
}

.main-movie-card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-32) var(--spacing-32) var(--spacing-40);
}

.main-movie-card-reco {   /* 한줄추천글 — 포스터 하단 캡션, 감독명 위 (기존 캡션 제목 Title3 서식 승계) */
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 24px;   /* 시안 Title3 */
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--color-text-inverse);
  display: -webkit-box;   /* 최대 2줄 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.main-movie-card-director {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 18px;   /* 시안 Body3 */
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-gray-85);   /* 시안 #ddd (다크 포스터 위 보조 텍스트) */
}

/* 캐러셀 화살표 (online-carousel-nav 계열 — dim-40 blur 80). 메인 내 재사용 → 향후 공통 승격 후보 */
.main-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 80px;
  height: 80px;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-dim-40);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.main-carousel-nav::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background-color: var(--color-text-inverse);
}

.main-carousel-nav--prev { left: 0; }
.main-carousel-nav--prev::before {
  -webkit-mask: url("../../images/icon/func-paginationPrev.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-paginationPrev.svg") no-repeat center / contain;
}

.main-carousel-nav--next { right: 0; }
.main-carousel-nav--next::before {
  -webkit-mask: url("../../images/icon/func-paginationNext.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-paginationNext.svg") no-repeat center / contain;
}

.main-carousel-nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  .main-movie { padding-top: 72px; padding-bottom: 72px; }   /* 시안 MO 영화 섹션 상하 72 (타 섹션 80과 상이) */
  .main-movie-carousel { margin-top: var(--spacing-40); }
  .main-movie-card.swiper-slide { width: 280px; }
  .main-movie-card { border-width: 1px; border-radius: var(--radius-medium); }   /* MO 1px·16 */
  .main-movie-card-top { gap: var(--spacing-16); padding: var(--spacing-16) var(--spacing-16) var(--spacing-24); }
  .main-movie-card-body { height: 313px; margin: 0 -1px -1px; border-width: 1px; border-radius: var(--radius-medium); }
  .main-movie-card-dim { height: 95px; }
  .main-movie-card-caption { padding: 0 var(--spacing-16) var(--spacing-24); }
  .main-movie-card-badges { min-height: 28px; }   /* MO 수상 뱃지(28) 유무와 무관하게 행 높이 고정 → 포스터 상단 정렬 (등급 뱃지만 있으면 22) */
  .main-movie-card-head { gap: var(--spacing-4); min-height: 58px; }   /* heading-2 24×1.35(32.4) + 4 + body-4 14×1.5(21) */
  .main-movie-card-reco { font-size: 18px; }
  .main-movie-card-director { font-size: 14px; }
  .main-movie-card-ratings .badge-rating { width: 22px; height: 22px; }
  .main-carousel-nav { display: none; }   /* MO 시안은 스와이프만 */
}

/* ── S8 뉴스레터 신청 (627:3566 / MO 627:14868) ──
   핑크 컨테이너: PC 2단(좌 head/deco · 우 form) / MO 1열(head→form→deco). 폼은 공통 form 컴포넌트 재사용. */
.main-newsletter {
  padding: var(--spacing-120) var(--spacing-40);
}

.main-newsletter-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(857px, 1fr);   /* 우 form 최소 857px(시안 627:3576 폼 폭) — 동의문 한 줄이 카드 안에 들어오게. 좌 head/deco 는 가변(shrink) */
  grid-template-areas: "head form" "deco form";
  column-gap: var(--spacing-24);
  row-gap: var(--spacing-56);
  align-items: center;
  padding: var(--spacing-40);
  background-color: var(--color-pink-60);
  border-radius: var(--radius-xxlarge);   /* 48 */
  overflow: hidden;
}

.main-newsletter-headline {
  grid-area: head;
  padding: var(--spacing-40) var(--spacing-40) 0;
}

.main-newsletter-title {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
}

.main-newsletter-sub {
  margin-top: var(--spacing-16);
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
}

.main-newsletter-deco {
  grid-area: deco;
  padding: 0 var(--spacing-40) var(--spacing-40);
}

.main-newsletter-deco img {
  display: block;
  width: 100%;
  height: auto;
}

.main-newsletter-form {
  grid-area: form;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-48);
  padding: var(--spacing-64) var(--spacing-48);
  background-color: var(--color-background);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);   /* 24 */
}

.main-newsletter-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  width: 100%;
}

.main-newsletter-agree {
  align-items: flex-start;   /* 긴 동의문 상단 정렬 */
  font-size: 15px;   /* 디자이너 요청: 동의문 15px */
}

/* 디자이너 요청: PC에서 동의문 한 줄 고정 (MO·태블릿은 줄바꿈 유지).
   폼 카드를 min 857px(시안 폼 폭)로 잡아 한 줄 동의문이 카드 안에 들어옴(넘침 해소). */
@media (min-width: 1024px) {
  .main-newsletter-agree {
    white-space: nowrap;
  }
}

.main-newsletter-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 64px;
  padding: 0 var(--spacing-32);
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-10);
  color: var(--color-text-inverse);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.5px;
  cursor: pointer;
}

/* 태블릿~중간PC(768~1439) — 세로 스택(head/form/deco), 사이징은 PC 상속.
   2단(좌 head/deco + 우 form min 857)은 폼 폭 확보되는 ≥1440 에서만 (시안: 태블릿 1024=1단, PC 1920=2단). */
@media (min-width: 768px) and (max-width: 1439px) {
  .main-newsletter-container {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "form" "deco";
  }
}

@media (max-width: 767px) {
  .main-newsletter {
    padding: var(--spacing-80) var(--spacing-16);
  }
  .main-newsletter-container {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "form" "deco";
    row-gap: var(--spacing-24);   /* 시안 MO 핑크박스 gap 24 (627:14869) */
    padding: var(--spacing-24) var(--spacing-16);   /* 시안 MO py24 px16 */
    border-radius: var(--radius-large);   /* 시안 MO 24 (PC 48 오버라이드) */
  }
  .main-newsletter-headline {
    padding: var(--spacing-16);   /* 시안 MO 헤드라인 p16 (627:14870) */
  }
  .main-newsletter-title { font-size: 30px; }
  .main-newsletter-sub { margin-top: var(--spacing-8); font-size: 16px; }   /* 시안 MO title↔sub 8 (627:14871) */
  .main-newsletter-deco {
    padding: 0;   /* 시안 MO 데코 full 폭 (627:14885, 좌우 여백 없음) */
  }
  .main-newsletter-form {
    gap: var(--spacing-24);   /* 시안 MO 폼 gap 24 (627:14874) */
    padding: var(--spacing-24) var(--spacing-24) var(--spacing-48);   /* 시안 MO pt24 px24 pb48 */
    border-radius: var(--radius-medium);   /* 시안 MO 16 (PC 24 오버라이드) */
  }
  .main-newsletter-submit {
    min-width: 124px;   /* 시안 MO 버튼 min 124 (627:14884) */
    height: 52px;
    padding: 0 var(--spacing-24);
    font-size: 15px;
  }
}

/* ── S9 파트너 로고 (627:3583 / MO 627:14889) ──
   4그룹 회색 바(gray-90 r24): 라벨(heading-1) + 세로 구분선 + 로고 리스트. */
.main-partner {
  padding: 0 var(--spacing-40) var(--spacing-80);
  margin-bottom: 200px;   /* 시안 footer 위 여백 200 (627:3287·1120:12718 — 스케일 밖 원값) */
}

.main-partner-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.main-partner-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-40);
  padding: var(--spacing-20) var(--spacing-80);
  background-color: var(--color-gray-90);
  border-radius: var(--radius-large);   /* 24 */
}

.main-partner-label {
  flex-shrink: 0;
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 40px;   /* heading-1 */
  line-height: 1.35;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  white-space: nowrap;
}

.main-partner-divider {
  flex-shrink: 0;
  width: 2px;
  height: 40px;
  background-color: var(--color-border);
}

.main-partner-logos {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-24);
}

.main-partner-item {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-20);
}

.main-partner-logo {
  height: 66px;
  width: auto;
  object-fit: contain;
}

/* 태블릿(768~1023) 파트너 — 로고 줄바꿈 대신 가로 스와이프(넘치면 스크롤) */
@media (min-width: 768px) and (max-width: 1023px) {
  .main-partner-logos {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;   /* 스크롤바 숨김 (터치 스와이프로 이동) */
  }
  .main-partner-logos::-webkit-scrollbar { display: none; }
  .main-partner-item { flex-shrink: 0; }   /* 로고 원본 크기 유지 → 넘치면 스와이프 */
}

@media (max-width: 767px) {
  .main-partner {
    padding: 0 var(--spacing-16) var(--spacing-80);
    margin-bottom: var(--spacing-120);   /* 시안 MO footer 위 120 (627:14672) */
  }
  .main-partner-group {
    gap: var(--spacing-16);
    padding: var(--spacing-20) 0 var(--spacing-20) var(--spacing-24);   /* 로고 스와이프가 우측 엣지까지 닿도록 pr 제거 (2026-08-30) */
  }
  .main-partner-label { font-size: 24px; }
  .main-partner-divider { height: 24px; }
  .main-partner-logos {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;   /* 스크롤바 숨김 (터치 스와이프로 이동) */
  }
  .main-partner-logos::-webkit-scrollbar { display: none; }
  .main-partner-item { flex-shrink: 0; padding: 0 var(--spacing-8); }   /* 원본 크기 유지 → 넘치면 스와이프 */
  .main-partner-logo { height: 44px; }
}

/* ── S7 공지사항 (627:3521 / MO 627:14824) ──
   하늘색+구름 배경 통이미지(SVG) + 헤드라인 + 카드(PC 2×2 / MO 1열). */
.main-notice {
  position: relative;
  padding-bottom: var(--spacing-120);
  background-color: var(--color-sky-60);   /* 시안 하늘 배경 #AEE4FF */
  background-image: url("/images/main/notice-bg.png");   /* 구름 투명 PNG 오버레이 (2026-08-30 교체) */
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

.main-notice-list {
  list-style: none;
  margin-top: var(--spacing-56);   /* 시안 headline↔list gap 56 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* minmax(0,·) — 카드 제목 nowrap 이 트랙을 밀어내지 않도록 */
  gap: var(--spacing-24);
}

.main-notice-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  min-height: 210px;   /* 카드 높이 고정 — 본문 줄 수 달라도 정렬 유지 */
  padding: var(--spacing-40);
  background-color: var(--color-background);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);   /* 24 */
  overflow: hidden;
  text-decoration: none;
}

.main-notice-card-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

.main-notice-card-title {
  flex: 1;
  min-width: 0;
  max-width: 100%;   /* MO(head 세로 배치)에서 nowrap 제목이 카드 폭을 넘지 않도록 */
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.main-notice-card-date {
  flex-shrink: 0;
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-heading);
  white-space: nowrap;
}

.main-notice-card-desc {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-secondary);   /* 시안 #6e6e6e */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 태블릿(768~1023) — 1열만 (카드 사이징·배경·간격은 PC 상속) */
@media (min-width: 768px) and (max-width: 1023px) {
  .main-notice-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .main-notice {
    padding-bottom: var(--spacing-80);
    background-color: var(--color-sky-60);   /* #AEE4FF — 구름은 투명 png 오버레이 (시안 627:14824) */
    background-image: url("/images/main/notice-bg-mo.png");
  }
  .main-notice-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-16);
    margin-top: var(--spacing-40);
  }
  .main-notice-card {
    gap: var(--spacing-16);
    min-height: 164px;
    padding: var(--spacing-24);
    border-width: 1px;
    border-radius: var(--radius-medium);
  }
  .main-notice-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
  }
  .main-notice-card-title { font-size: 20px; font-weight: 800; }
  .main-notice-card-date { font-size: 13px; color: var(--color-text-subtitle); }
  .main-notice-card-desc { font-size: 15px; }
}

/* ── 메인 팝업 레이어 (CRFF-203, 배너·팝업 레이어 모듈 v0.97) ─────────────────────
 * 마크업: templates/main/section-popup.html — 기존 .modal-overlay(딤·오픈토글) 상속,
 * 다이얼로그(.main-popup)만 화면 전용. 동작: js/main-popup.js.
 * <div class="modal-overlay main-popup-overlay"><div class="main-popup" role="dialog" …>
 *   <div class="swiper main-popup-slides">…슬라이드(a.main-popup-slide-link>picture>img)…</div>
 *   <div class="main-popup-indicator">…(2장↑)</div>
 *   <div class="main-popup-actions">…</div>
 * </div></div>
 */
.main-popup {
  position: relative;
  display: flex;
  flex-direction: column;
  /* CRFF-214: PC 400px 폭이 과소 — BO 권장 원본(600×700)이 축소 없이 보이도록 600px 로 확대
     (세로는 max-height 캡 유지 — 낮은 화면에선 이미지가 contain 으로 비율 유지 축소) */
  width: min(600px, calc(100vw - var(--spacing-32)));
  max-height: calc(100dvh - var(--spacing-48));
  overflow-y: auto;   /* 콘텐츠가 뷰포트보다 큰 예외 상황 대비 폴백 */
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-32);
  border-radius: var(--radius-large);
  background-color: var(--color-background);
  outline: none;   /* 프로그램적 포커스(tabindex=-1) 링 제거 */
}

.main-popup-slides {
  /* 폭을 명시해야 한다 — Swiper 기본 CSS(.swiper{margin-left/right:auto})가 세로 flex(.main-popup) 안에서 stretch 를 막아
     컨테이너 폭이 내용물(슬라이드·링크·이미지 전부 width:100% 순환 참조)로 정해지고, 크롬이 이를 최대 레이아웃 폭(3.3e7px)으로
     포화시킨 값을 Swiper 가 슬라이드 인라인 폭으로 굳혀 이미지가 안 보인다(2장 이상 = Swiper 초기화 시에만 발생, 2026-09-30 운영) */
  width: 100%;
  border-radius: var(--radius-small);
  overflow: hidden;
  background-color: var(--color-background-section);   /* 이미지 로딩 전/여백 배경 */
}

/* 슬라이드 내부 중앙 정렬 — 이미지가 max-height 로 축소돼도 레터박스 형태로 중앙에 위치 */
.main-popup-slides .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-popup-slide-link {
  display: block;
  width: 100%;
}

.main-popup-slide-link[href] {
  cursor: pointer;
}

/* 비율 유지 가변 축소 — width 100%(가로 맞춤) + max-height(뷰포트 안 보장), object-fit 은 방어적 보강 */
.main-popup-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 260px);
  object-fit: contain;
  margin: 0 auto;
}

.main-popup-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-24);
}

.main-popup-indicator .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  gap: var(--spacing-8);
  width: auto;
  margin: 0;
}

.main-popup-indicator .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-dim-20);
  opacity: 1;
  transition: width 0.15s;
}

.main-popup-indicator .swiper-pagination-bullet-active {
  width: 32px;
  background-color: var(--color-text-heading);
}

/* 자동 넘김 정지/재생 토글 — 접근성 필수(자동재생 제어), 아이콘은 currentColor mask 전환 */
.main-popup-play {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-secondary);
}

.main-popup-play::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: var(--main-popup-play-icon, url("../../images/icon/func-pause.svg")) no-repeat center / contain;
  mask: var(--main-popup-play-icon, url("../../images/icon/func-pause.svg")) no-repeat center / contain;
}

.main-popup-play.is-paused {
  --main-popup-play-icon: url("../../images/icon/func-play.svg");
}

.main-popup-actions {
  display: flex;
  gap: var(--spacing-8);
  margin-top: var(--spacing-24);
}

.main-popup-actions .button {
  flex: 1 0 0;
  min-width: 0;
}

@media (max-width: 1023px) {
  .main-popup {
    width: calc(100vw - var(--spacing-32));
    padding: var(--spacing-16) var(--spacing-16) var(--spacing-24);
  }
  .main-popup-image {
    max-height: calc(100dvh - 220px);
  }
}