/*
 * FO 야외 상영 안내 (OC-4000 개편) — 내부_아동권리영화제 시안 PC 1386:24504 (CRFF-48)
 * 단일 롱 콘텐츠 페이지(정적 SSR). 토큰 var()만 사용, PC 우선(MO 후속).
 * 섹션(실제 페이지 1386:24504 순서): 히어로·인트로·좌석안내 (완료) 진행시간표·상영작·참여프로그램·아이콘안내·오시는길·유의사항·FAQ (후속)
 *
 * 히어로 배너: 디자이너 제공 합성 PNG(hero-bg.png = 레드#ee3124+일러스트+딤) 사용 → CSS raw hex 없음
 */

/* ── 페이지 베이스 (body flex-column 에서 푸터 하단 고정) ── */
.outdoor {
  flex: 1 0 auto;
}

/* ══ ① 히어로 (Figma Sub_top 1386:24518) ══ */
.outdoor-hero {
  padding: var(--spacing-56) var(--spacing-40);
}
.outdoor-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  min-height: 580px;
  padding: var(--spacing-56) var(--spacing-80);
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-xxlarge);
  overflow: hidden;
}
/* 배너 배경 이미지 — 레드(#ee3124)+일러스트+딤 합성 PNG (Figma 1370:26704, 디자이너 제공본) */
.outdoor-hero-illust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* 헤드라인 (좌) */
.outdoor-hero-headline {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-12);
}
.outdoor-hero-title {
  color: var(--color-text-inverse);
  white-space: nowrap;
}

/* 정보 카드 (우) */
.outdoor-hero-quick {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  width: 440px;
  padding: var(--spacing-40) var(--spacing-32);
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-xlarge);
  background-color: var(--color-background);
}
.outdoor-hero-detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  margin: 0;
}
.outdoor-hero-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}
/* 아이콘 버블 (#f3f3f3 원 + 24 마스크 아이콘) */
.outdoor-hero-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--color-background-section);
}
.outdoor-hero-icon::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: var(--color-gray-30);   /* 시안 아이콘 #444 */
  -webkit-mask: var(--outdoor-hero-icon-mask) no-repeat center / contain;
  mask: var(--outdoor-hero-icon-mask) no-repeat center / contain;
}
.outdoor-hero-icon--date { --outdoor-hero-icon-mask: url("../../images/icon/func-calendar.svg"); }
.outdoor-hero-icon--time { --outdoor-hero-icon-mask: url("../../images/icon/func-clock.svg"); }
.outdoor-hero-icon--place { --outdoor-hero-icon-mask: url("../../images/icon/func-pin.svg"); }

.outdoor-hero-label {
  flex-shrink: 0;
  display: flex;              /* 아이콘 버블을 dt 안에 포함(dl 유효성) — 기존 row gap 과 동일 간격 유지 */
  align-items: center;
  gap: var(--spacing-12);
  margin: 0;
  color: var(--color-text-secondary);
}
.outdoor-hero-value {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: right;
  color: var(--color-text-heading);
}
.outdoor-hero-cta {
  width: 100%;
}
/* 예매하기 CTA 게이트(CRFF-57) — 예매기간외·매진 시 비활성 표시 */
.outdoor-hero-cta.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}
.outdoor-hero-cta-status {
  width: 100%;
  margin: var(--spacing-8) 0 0;
  text-align: center;
  color: var(--color-text-secondary);
}

/* ══ ② 인트로 (Figma section 1386:24565) ══ */
.outdoor-intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-56);
  align-items: flex-start;
  margin: var(--spacing-80) 0 0;   /* 상단 80 = 히어로와 간격 / 좌우 0 = 핑크 박스 풀블리드(시안 section x0 w1024·w1920, 라운드 유지) */
  padding: var(--spacing-120) var(--spacing-40) var(--spacing-80);   /* 시안 627:37117 — 배너 상단 122·좌우 42·head→map gap 56·하단 82 */
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-xxlarge);
  background-color: var(--color-pink-60);   /* 시안 highlight-strong #ffb1ed */
}
/* 상단 2컬럼 (좌 대제목 / 우 소개문) */
.outdoor-intro-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-24);
  width: 100%;
  padding: 0 var(--spacing-40);
}
.outdoor-intro-tit {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-12);
  color: var(--color-text-heading);
}
.outdoor-intro-eyebrow {
  margin: 0;
}
/* eyebrow 줄바꿈 — 1092px 미만에서 "제12회 세이브더칠드런 / 아동권리영화제" 2줄 (사용자 지정 BP) */
.outdoor-intro-eyebrow-br {
  display: none;
}
@media (max-width: 1091px) {
  .outdoor-intro-eyebrow-br {
    display: inline;
  }
}
.outdoor-intro-headline {
  margin: 0;
}
.outdoor-intro-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-12);
  color: var(--color-text-heading);
}
.outdoor-intro-txt p {
  margin: 0;
  word-break: keep-all; /* 한글 단어 단위 줄바꿈 (글자 중간 분리 방지) */
}
/* 모바일 전용 줄바꿈 — 인트로 소개문을 시안(627:40008) 줄바꿈 지점에 정확히 맞춤 (PC/태블릿은 자연 줄바꿈) */
.br-mo {
  display: none;
}
/* 행사 구역 배치도 (플레이스홀더 박스) */
.outdoor-intro-map {
  width: 100%;
  border-radius: var(--radius-xxlarge);   /* 48 — 배치도 모서리 라운드 (소개 시안 1988:4084 rounded 48). 이미지 코너가 불투명(크림)이라 CSS 클립 필요 */
  overflow: hidden;
}
/* 배치도 일러스트 — 폭 100%·높이 비율 자동 (라운드는 컨테이너 overflow 로 클립) */
.outdoor-intro-map picture,
.outdoor-intro-map img {
  display: block;
  width: 100%;
  height: auto;
}

/* ══ ③ 좌석안내 (Figma section 1386:24714) ══ */
.outdoor-seats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  padding: var(--spacing-80) var(--spacing-40);
}
.outdoor-seats-title {
  margin: 0;
  color: var(--color-text-heading);
}
.outdoor-seats-carousel {
  width: 100%;
}
.outdoor-seats-list {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 존 카드 — 존별 파스텔 배경(이미지 없음)·내용 세로중앙 (Figma 627:41108) */
.outdoor-seats-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  height: auto;   /* swiper-slide 기본 CSS(height:100%)를 해제 → align-items:stretch 로 카드 등높이(가장 긴 카드 기준) 정렬 */
  min-height: 274px;   /* 시안 카드 높이 (627:37141) */
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-40);   /* 시안 pt24·px24·pb40 (627:37141) */
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-large);
  overflow: hidden;
}
.outdoor-seats-card--vip {
  background-color: var(--color-zone-vip);
}
.outdoor-seats-card--picnic {
  background-color: var(--color-zone-picnic);
}
.outdoor-seats-card--pet {
  background-color: var(--color-zone-pet);
}
.outdoor-seats-card-body {
  flex: 1;   /* 카드 높이 채움 → 가격을 카드 하단에 정렬 */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  width: 100%;
  padding: 0 var(--spacing-8);
}
/* 타이포는 시안이 PC·MO 동일 스케일(28/18/14/28) — type-* 클래스 위에 크기만 고정 */
.outdoor-seats-card-name {
  margin: 0;
  font-size: 28px;
  color: var(--color-text-heading);
  white-space: nowrap;
}
.outdoor-seats-card-desc {
  margin: 0;
  font-size: 18px;
  color: var(--color-text-secondary);
  word-break: keep-all;   /* 태블릿↓ 자연 줄바꿈은 단어 단위 (PC 는 br-pc 로 문장별 고정) */
}
/* PC 전용 줄바꿈 — 좌석 설명을 PC 시안(627:37147)처럼 문장별로 고정. 태블릿(≤1023)은 숨겨 keep-all 자연 줄바꿈 */
.br-pc {
  display: inline;
}
.outdoor-seats-card-meta {
  margin-top: auto;   /* 가격을 카드 하단으로 밀어 카드 간 정렬(설명 길이 무관) */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  width: 100%;
}
.outdoor-seats-card-zone {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.outdoor-seats-card-price {
  margin: 0;
  font-size: 24px;   /* 시안 Title 3 (PC·태블릿 24) */
  color: var(--color-cta);
}
/* 카드 상단 헤드(이름 + 펫 에티켓 버튼) — 펫존만 버튼 포함 */
.outdoor-seats-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
}
/* 펫 에티켓 버튼 — PC: ⓘ + 텍스트 pill (Figma 2237:86262, bg #ffb1ed) */
.outdoor-seats-pet-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-8) var(--spacing-24) var(--spacing-8) var(--spacing-16);   /* 높이 40px(시안 badge_property) — 펫 카드 276 유지 */
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-pink-60);
  color: var(--color-text-heading);
  cursor: pointer;
}
.outdoor-seats-pet-btn-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("../../images/icon/func-info-line.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-info-line.svg") no-repeat center / contain;
}
.outdoor-seats-pet-btn-text {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* 반려견 에티켓 팝업 — PC/MO 형태가 다름 (공용 .modal 재사용, 본문만 커스텀)
   PC(2237:83657): 제목 22 + 상단 4px 보더(#222) 테이블(행 56·18px·px16, 상단 스페이서 20)
   MO(2237:89216): 회색 카드(#f3f3f3·r12·p16·13px 자연 줄바꿈) */
.outdoor-etiquette-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);   /* 항목 간 간격 — 구 min-height 56 고정(5항목 시안)은 11항목에서 한 줄 항목만 아래가 떠 보여 제거 (CRFF-392) */
  margin: 0;
  padding: var(--spacing-20) 0 var(--spacing-32);   /* 위: 시안 보더 아래 스페이서 20 / 아래: 스크롤 끝에서 마지막 항목이 고정 버튼에 붙지 않게 32 (CRFF-392) */
  border-top: 4px solid var(--color-text-heading);   /* line/outline/ui/black #222 */
  list-style: none;
}
.outdoor-etiquette-list li {
  display: grid;   /* [불릿|텍스트] — 행 높이는 콘텐츠(1~2줄)에 맞춤, 간격은 리스트 gap 담당 */
  grid-template-columns: auto 1fr;
  column-gap: var(--spacing-4);
  align-content: start;
  padding: 0 var(--spacing-16);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.5px;   /* 프로젝트 Body-3 표준 (시안 raw -0.36px 정규화) */
  color: var(--color-text-body);
}
.outdoor-etiquette-list li::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: 11px;   /* 첫 줄(lh 27) 세로 중앙 정렬 */
  border-radius: var(--radius-full);
  background-color: currentColor;
}
/* 고정버튼 상단 페이드는 이 팝업에서 제거 — 11항목이 스크롤될 때 마지막 항목 텍스트가 흐려 보여 발주처 지적 (CRFF-392, 구 5항목 시절 판단과 동일). 하단 여백 32 로 스크롤 끝 가독성 확보 */
#petEtiquetteModal .modal-actions--fixed::before {
  display: none;
}
/* MO(2237:89216) — 테이블 대신 회색 카드, 13px 자연 줄바꿈 */
@media (max-width: 1023px) {
  .outdoor-etiquette-list {
    gap: var(--spacing-4);
    padding: var(--spacing-16);
    border-top: none;
    border-radius: var(--radius-small);   /* 12 */
    background-color: var(--color-background-section);
  }
  .outdoor-etiquette-list li {
    column-gap: var(--spacing-6);
    min-height: 0;
    padding: 0;
    font-size: 13px;
    overflow-wrap: break-word;   /* 시안 자연 줄바꿈 */
  }
  .outdoor-etiquette-list li::before {
    margin-top: 8px;   /* 첫 줄(lh 19.5) 세로 중앙 */
  }
}

/* ══ ④ 진행 시간표 (Figma section 1386:24576) ══ */
.outdoor-schedule {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  padding: var(--spacing-80) var(--spacing-40);
}
.outdoor-schedule-title {
  margin: 0;
  color: var(--color-text-heading);
}
.outdoor-schedule-table {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 하단 변경 안내 문구 — 시안 외 추가(CRFF-392). 섹션 gap(32) 그대로, ⑥ program-note 와 동일 색 */
.outdoor-schedule-note {
  margin: 0;
  color: var(--color-text-body);
}
/* 행 (시간 셀 | 화살표 | 내용 셀) — 셀 테두리 2px 공유 위해 음수 마진 겹침 */
.outdoor-schedule-row {
  position: relative;
  display: flex;
  align-items: stretch;
}
.outdoor-schedule-row:not(:last-child) {
  margin-bottom: -2px;
}
/* 시간 셀 (핑크 pill) */
.outdoor-schedule-time {
  flex-shrink: 0;
  width: 200px;
  margin-right: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-large);
  background-color: var(--color-pink-60);
  color: var(--color-text-heading);
  text-align: center;
}
/* 내용 셀 */
.outdoor-schedule-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-24) var(--spacing-56);
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-large);
  background-color: var(--color-background-section);
}
.outdoor-schedule-content--highlight {
  background-color: var(--color-pink-80);
}
.outdoor-schedule-content-title {
  width: 100%;
  margin: 0;
  color: var(--color-text-heading);
}
.outdoor-schedule-content-desc {
  width: 100%;
  margin: 0;
  color: var(--color-text-body);
}
/* 화살표 아이콘 (시간·내용 셀 경계 위 다크 원) */
.outdoor-schedule-arrow {
  position: absolute;
  left: 180px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-heading);
}
.outdoor-schedule-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background-color: var(--color-background);
  -webkit-mask: url("../../images/icon/func-arrowNext.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-arrowNext.svg") no-repeat center / contain;
}

/* ══ ⑤ 상영작 (Figma section 1386:24519) ══
   카드 구조·반응형은 /original-film(pages/online.css .online-films*)과 동일 계열로 정렬 (2026-09-30):
   - ≥1280 · 2장 이하: 정적 flex(2카드 가로 꽉 채움, 1장이면 시안 폭 910 고정) — 화살표·인디케이터 숨김
   - ≥1280 · 3장↑ 또는 1024~1279: Swiper(좌우 화살표 + 인디케이터), 카드 최소폭 782 기준 1·2장 꽉 채움(js/outdoor/outdoor.js)
   - ≤1023: 세로 310 카드 Swiper(인디케이터만) — 아래 ≤1023 블록
   - 야외 고유 유지: 시놉시스 전문 노출·카드 높이 가변(CRFF-392), 1280~1919 내부 비율 조정, 카드 보더 #222 */
.outdoor-films {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  padding: var(--spacing-80) var(--spacing-40) var(--spacing-120);
}
.outdoor-films-title {
  margin: 0;
  color: var(--color-text-heading);
}
/* 캐러셀 + 인디케이터 래퍼 — 화살표(absolute) 기준 컨테이너 (online .online-films 동일) */
.outdoor-films-wrap {
  position: relative;
  width: 100%;
}
.outdoor-films-carousel {
  overflow: hidden;
}
.outdoor-films-list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 영화 카드 (포스터 좌 / 정보 우) */
.outdoor-films-card {
  display: flex;
  gap: var(--spacing-24);
  width: 910px;   /* Swiper 기본 카드 폭(시안 910) — 숫자 slidesPerView(1·2장 꽉 채움)일 땐 Swiper 인라인 폭이 덮어씀 */
  flex-shrink: 0;
  height: auto;   /* swiper-slide height:100% 무효화 → align-stretch 로 카드 동일높이. 태그 행이 있어 시안 660 고정 대신 내용 높이(시놉시스는 10줄 말줄임으로 상한, 2026-09-30) */
  padding: var(--spacing-16);   /* Figma 토큰 바인딩 spacing/16 (프레임 18px) */
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-large);
  background-color: var(--color-background);
  box-sizing: border-box;
  overflow: hidden;
}
/* 정적(≥1280·2장 이하 — Swiper 미활성): 2카드 가로 꽉 채움. 3장↑/≤1279 는 Swiper 라 고정폭 유지 (online 동일) */
.outdoor-films-carousel:not(.swiper-initialized) .outdoor-films-list {
  gap: var(--spacing-24);
}
.outdoor-films-carousel:not(.swiper-initialized) .outdoor-films-card {
  width: auto;
  flex: 1;
  min-width: 0;
}
/* 1개만 있으면 전체폭으로 늘리지 않고 최대(디자인) 카드 폭 910 고정 */
.outdoor-films-carousel:not(.swiper-initialized) .outdoor-films-card:only-child {
  width: 910px;
  max-width: 100%;
  flex: none;
}
/* 정적일 땐 스와이프 컨트롤(화살표·인디케이터) 숨김 */
.outdoor-films-carousel:not(.swiper-initialized) .outdoor-carousel-nav {
  display: none;
}
.outdoor-films-carousel:not(.swiper-initialized) ~ .outdoor-films-pagination {
  display: none;
}
/* 포스터 — 시안 442×624 고정(online 동일). 비율은 aspect-ratio 로 유지해 1280~1919 축소(42%)에서도 잘림 없음 */
.outdoor-films-card-poster {
  flex: 0 0 442px;
  min-width: 0;
  align-self: flex-start;   /* 행 stretch 차단 → aspect-ratio 유지. 정보 칸이 길어져도 포스터가 세로로 늘어나 cover 크롭되지 않음 (CRFF-392) */
  aspect-ratio: 442 / 624;
  border-radius: var(--radius-large);
  background-color: var(--color-text-heading);
  overflow: hidden;   /* 포스터 이미지 라운드 클리핑 */
}
.outdoor-films-card-poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 박스 비율(442/624)≈원본(884×1263·1250)이라 PC 무크롭, MO(높이 388 고정)만 상하 미세 크롭. 로드 실패 시 기본 포스터 폴백(템플릿 onerror) */
}
.outdoor-films-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48);
  padding: var(--spacing-16) var(--spacing-24) var(--spacing-24);   /* 하단 24 — 시안(2026-09-30)은 10줄 시놉시스가 카드 하단에 붙음 (online 80 과 상이) */
}
.outdoor-films-card-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
}
.outdoor-films-card-ratings,
.outdoor-films-card-properties {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}
.outdoor-films-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}
/* 제목+태그 그룹 (online .online-films-head 동일 구성) — 야외는 시놉시스 전문 노출이라 flex:1 하단 앵커 없이 상단 정렬(CRFF-392) */
.outdoor-films-card-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.outdoor-films-card-name {
  margin: 0;
  color: var(--color-text-heading);
}
.outdoor-films-card-detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}
.outdoor-films-card-director {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);   /* Figma 10px → 토큰 정규화 */
  margin: 0;
}
.outdoor-films-card-director span:first-child {
  color: var(--color-text-heading);
}
.outdoor-films-card-director span:last-child {
  color: var(--color-text-secondary);
}
.outdoor-films-card-desc {
  /* 시놉시스 10줄까지 노출, 초과분 말줄임(…) — 시안 반영(2026-09-30, 같은 날 오전 '전문 노출' 결정 대체).
     표준 line-clamp 병기 금지(CRFF-211). 10줄 이내면 카드 높이는 내용에 따라 줄어듦 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
  margin: 0;
  color: var(--color-text-body);
}

/* ── 상영작 캐러셀 좌우 화살표 — 80 원형 딤+블러 (online-carousel-nav 동일, Swiper 활성 시만) ── */
.outdoor-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;
}
.outdoor-carousel-nav::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background-color: var(--color-text-inverse);
}
.outdoor-carousel-nav--prev {
  left: var(--spacing-24);
}
.outdoor-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;
}
.outdoor-carousel-nav--next {
  right: var(--spacing-24);
}
.outdoor-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;
}
.outdoor-carousel-nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* ── 상영작 캐러셀 인디케이터 — active 32×8 바 + 8 도트 (online-carousel-pagination 동일) ── */
.outdoor-carousel-pagination {
  --swiper-pagination-bullet-horizontal-gap: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-32);
}
.outdoor-carousel-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-dim-20);
  opacity: 1;
}
.outdoor-carousel-pagination .swiper-pagination-bullet-active {
  width: 32px;
  background-color: var(--color-gray-10);
}

/* ══ ⑥ 참여 프로그램 (Figma section 1386:24665) ══ */
.outdoor-program {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  padding: var(--spacing-80) var(--spacing-40);
}
.outdoor-program-title {
  margin: 0;
  color: var(--color-text-heading);
}
.outdoor-program-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}
.outdoor-program-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 타원 그래픽 카드 */
.outdoor-program-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-24);
  aspect-ratio: 908 / 606;
  padding: var(--spacing-40);
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-large);
  overflow: hidden;
  background-repeat: no-repeat;
}
/* 핑크 배경 + 노랑 단일 타원(SVG) */
.outdoor-program-card--single {
  background-color: var(--color-pink-60);
  background-image: url("../../images/outdoor/program-ellipse-single.svg");
  background-size: 100% 100%;
}
/* 초록 배경 + 파랑 이중 타원(SVG, 2배폭 중앙) */
.outdoor-program-card--double {
  background-color: var(--color-green-60);
  background-image: url("../../images/outdoor/program-ellipse-double.svg");
  background-size: 200% 100%;
  background-position: center;
}
.outdoor-program-card-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  width: 100%;
  color: var(--color-text-heading);
  text-align: center;
}
.outdoor-program-card-title {
  margin: 0;
  white-space: nowrap;
}
/* 4개 카드 제목 태블릿 전용 개행(시안 627:37705 — 각 제목 2줄).
   기본 숨김(≥1280·MO 는 base nowrap 1줄), 960~1279 에서만 표시 */
.outdoor-prog-title-br {
  display: none;
}
.outdoor-program-card-desc {
  margin: 0;
}
/* 하단 안내(불릿) */
.outdoor-program-note {
  display: flex;
  gap: var(--spacing-4);
  align-items: flex-start;
  margin: 0;
  color: var(--color-text-body);
}
.outdoor-program-note-bullet {
  flex-shrink: 0;
  width: 4px;
  height: 29px;
}
.outdoor-program-note span {
  flex: 1;
  min-width: 0;
}

/* ══ ⑦ 아이콘 안내 (Figma section 1399:26565) ══ */
.outdoor-zones {
  padding: var(--spacing-80) var(--spacing-40);
}
.outdoor-zones-list {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
.outdoor-zones-card {
  flex: 1 1 25%;   /* basis 0 은 패딩이 폭에 얹혀 카드별 패딩 차이(--tight)로 등폭이 깨짐 — border-box 균등 분배 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-24);
  padding: var(--spacing-40);
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-large);
  background-color: var(--color-background);
  overflow: hidden;
}

/* 푸드존·브랜드존 — 설명 한 줄 유지용 좌우 축소 */
.outdoor-zones-card--tight {
  padding-right: var(--spacing-20);
  padding-left: var(--spacing-20);
}
/* 2톤 아이콘 (검정 base + 빨강 accent 오버레이, 80px) */
.outdoor-zones-icon {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}
.outdoor-zones-icon img {
  position: absolute;
}
.outdoor-zones-icon-photo-base { top: 12.5%; left: 9.38%; width: 81.24%; height: 73.69%; }
.outdoor-zones-icon-photo-accent { top: 35.17%; left: 32.05%; width: 35.9%; height: 35.91%; }
.outdoor-zones-icon-food-base { top: 12.5%; left: 15.63%; width: 66.06%; height: 39.27%; }
.outdoor-zones-icon-food-accent { top: 41.53%; left: 18.64%; width: 57.8%; height: 45.97%; }
.outdoor-zones-icon-play-base { top: 19.1%; left: 4.93%; width: 88.66%; height: 62.5%; }
.outdoor-zones-icon-play-accent { top: 30.35%; left: 21.8%; width: 16.88%; height: 16.87%; }
.outdoor-zones-icon-brand-base { top: 24.87%; left: 24.88%; width: 50.24%; height: 50.3%; }
.outdoor-zones-icon-brand-accent { top: 6.25%; left: 6.25%; width: 87.5%; height: 87.5%; }
.outdoor-zones-card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-12);
  width: 100%;
}
.outdoor-zones-card-title {
  margin: 0;
  color: var(--color-text-heading);
  white-space: nowrap;
}
.outdoor-zones-card-desc {
  margin: 0;
  color: var(--color-text-body);
  text-align: center;
}

/* ══ ⑧ 오시는 길 (Figma section 1386:24757) ══ */
.outdoor-place {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  padding: var(--spacing-80) var(--spacing-40);
}
.outdoor-place-title {
  margin: 0;
  color: var(--color-text-heading);
}
.outdoor-place-title-mo {
  display: none;   /* PC 는 "오시는 길", MO 에서 "장소" 로 스왑 */
}
.outdoor-place-box {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-24);
  overflow: hidden;
}
/* 지도 영역 (플레이스홀더 — 실제 지도 연동 후속) */
.outdoor-place-map {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 640px;
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-large);
  background-color: var(--color-text-heading);
  color: var(--color-text-inverse);
}
/* 카카오맵 로드 성공 시(CRFF-224) — 폴백 중앙정렬(flex)을 지도용 블록 레이아웃으로 되돌린다.
   overflow: hidden 은 둥근 모서리 밖으로 지도 타일이 비어져 나오지 않게 한다. */
.outdoor-place-map.is-map-loaded {
  display: block;
  overflow: hidden;
}
/* 위치·교통 정보 패널 */
.outdoor-place-info {
  flex: 0 1 596px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-40);
  padding: var(--spacing-80) var(--spacing-40);
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-large);
  background-color: var(--color-background);
}
.outdoor-place-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  width: 100%;
}
.outdoor-place-name {
  margin: 0;
  color: var(--color-text-heading);
  white-space: nowrap;
}
.outdoor-place-address {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;
}
.outdoor-place-address-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);   /* Figma 10px → 토큰 정규화 */
}
.outdoor-place-address-text {
  margin: 0;
  color: var(--color-text-body);
  white-space: nowrap;
}
.outdoor-place-copy {
  flex-shrink: 0;
  padding: var(--spacing-4) var(--spacing-8);
  border: 1px solid var(--color-gray-70);
  border-radius: var(--radius-xsmall);
  background-color: transparent;
  color: var(--color-text-heading);
  cursor: pointer;
}
.outdoor-place-detail {
  margin: 0;
  color: var(--color-text-body);
}
.outdoor-place-transport {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.outdoor-place-transport-row {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-16);
}
/* 교통 flag — .flag 재사용 + 검정 테두리/색/고정폭 104 (시안 스코프) */
.outdoor-place-flag {
  flex-shrink: 0;
  min-width: 104px;
  border-color: var(--color-text-heading);
}
.outdoor-place-flag--bus { background-color: var(--color-green-60); }
.outdoor-place-flag--subway { background-color: var(--color-pink-60); }
.outdoor-place-flag--car { background-color: var(--color-background-section); }
.outdoor-place-transport-desc {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--color-text-body);
  word-break: keep-all;
}

/* ══ ⑨ 유의 사항 (Figma section 1386:24783) ══ */
.outdoor-notice {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-80) var(--spacing-40);
}
/* 다크 타이틀 바 */
.outdoor-notice-head {
  display: flex;
  align-items: center;
  padding: var(--spacing-40);
  border-radius: var(--radius-large);
  background-color: var(--color-text-heading);
}
.outdoor-notice-title {
  margin: 0;
  color: var(--color-text-inverse);
}
/* 회색 불릿 박스 */
.outdoor-notice-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin: 0;
  padding: var(--spacing-40);
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-large);
  background-color: var(--color-background-section);
  list-style: none;
}
.outdoor-notice-item {
  display: flex;
  gap: var(--spacing-4);
  align-items: flex-start;
}
.outdoor-notice-bullet {
  flex-shrink: 0;
  width: 4px;
  height: 29px;
}
.outdoor-notice-item span {
  flex: 1;
  min-width: 0;
  color: var(--color-text-body);
}

/* ══ ⑩ FAQ (Figma section 1386:24796) — 다크 타이틀바 + .accordion 리스트 ══ */
.outdoor-faq {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-80) var(--spacing-40);
}
/* 다크 타이틀 바 (유의사항과 동일 패턴) */
.outdoor-faq-head {
  display: flex;
  align-items: center;
  padding: var(--spacing-40);
  border-radius: var(--radius-large);
  background-color: var(--color-text-heading);
}
.outdoor-faq-title {
  margin: 0;
  color: var(--color-text-inverse);
}
/* 아코디언 리스트 박스 */
.outdoor-faq-list {
  overflow: hidden;
  border: 2px solid var(--color-text-heading);
  border-radius: var(--radius-large);
  background-color: var(--color-background);
}
.outdoor-faq-heading {
  margin: 0;
}
.outdoor-faq-item + .outdoor-faq-item {
  border-top: 1px solid var(--color-border);
}
/* 답변 리치텍스트 간격 (CRFF-416, 시안 2961:4015/4016) — 공통 .accordion-answer 는
 * p·ul·li margin:0 이라 문단·리스트·항목이 다 붙어 나옴. outdoor FAQ 한정으로 간격 복원. */
.outdoor-faq-item .accordion-answer p + ul,
.outdoor-faq-item .accordion-answer p + ol {
  margin-top: var(--spacing-8);   /* 답변 문단 ↔ 리스트 8 */
}
.outdoor-faq-item .accordion-answer li + li {
  margin-top: var(--spacing-4);   /* 리스트 항목 간 4 */
}
/* 한글 어절 단위 줄바꿈 — 기본 normal 은 "대/중 교통"처럼 어절 중간이 끊김 (질문 제목과 동일 정책) */
.outdoor-faq-item .accordion-answer p,
.outdoor-faq-item .accordion-answer li {
  word-break: keep-all;
}
/* 답변·불릿 좌측선을 질문 텍스트에 정렬 (질문·답변·불릿 수직 동일 좌측정렬, MO 전용 시안 없음).
 * 질문 텍스트 x = 버튼 pad + Q + gap → PC 40+20+24=84 / 태블릿·모바일(≤1023) 16+22+16=54. */
.outdoor-faq-item .accordion-answer {
  padding-left: 84px;
}
.outdoor-faq-item .accordion-answer ul,
.outdoor-faq-item .accordion-answer ol {
  padding-left: 0;
  list-style-position: inside;   /* 불릿을 답변 좌측선에 올려 질문·답변과 한 줄로 */
}
@media (max-width: 1023px) {
  .outdoor-faq-item .accordion-answer {
    padding-left: 54px;
  }
}

/* ── ③ 좌석안내: MO+태블릿(≤1023) 세로 리스트 (CRFF-211 — 캐러셀에서 전환) ── */
/* 좌석안내 태블릿↓(≤1279, 시안 627:37525): 펫버튼 ⓘ 아이콘만 + 설명 keep-all. 카드 캐러셀은 모바일(≤1023)에서만. */
@media (max-width: 1279px) {
  /* 펫 에티켓 버튼은 ⓘ 아이콘만(원형) — 텍스트 숨김 */
  .outdoor-seats-pet-btn {
    padding: var(--spacing-8);
  }
  .outdoor-seats-pet-btn-text {
    display: none;
  }
  /* 좌석 설명 문장별 고정 줄바꿈 해제 → keep-all 자연 줄바꿈 (시안 627:37544) */
  .br-pc {
    display: none;
  }
}
/* 좌석안내 모바일(≤1023): 캐러셀(스와이프·85% peek·gap0·동일높이). 태블릿(1024~1279)은 3카드 flex 유지. */
@media (max-width: 1023px) {
  .outdoor-seats-list {
    gap: 0;   /* 간격은 Swiper spaceBetween(16) 담당 */
  }
  .outdoor-seats-card {
    flex: none;
    width: 85%;
    height: auto;
  }
}
/* 좌석안내 태블릿(1024~1279) 카드 높이 — 시안 box 328(빈백/피크닉)·330(펫) (627:37525). 넓은 태블릿에서 설명 줄 줄어도 328 유지 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .outdoor-seats-card {
    min-height: 328px;
  }
}

/* ══════════════════════════════════════════════════════════════════
 * ⑤ 상영작 — MO+태블릿(≤1023): 세로 310 카드 Swiper + 인디케이터(화살표 미노출)
 * /original-film(pages/online.css ≤1023 .online-films*) 동일 값. 769~1023 도 세로 카드(종전 가로 910 peek 폐기, 2026-09-30).
 * 섹션 거터(769~1023: 40 / ≤768: 16 — MO 블록에서 재보정)만큼 캐러셀을 풀블리드로 확장해 다음 카드 peek 이 화면 끝까지 보이게 한다.
 * ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .outdoor-films-carousel {
    margin: 0 calc(-1 * var(--spacing-40));
    padding: 0 var(--spacing-40);
  }
  .outdoor-films-card {
    flex-direction: column;
    width: 310px;
    padding: var(--spacing-16) var(--spacing-16) var(--spacing-24);
  }
  .outdoor-films-card-poster {
    flex: none;
    align-self: stretch;   /* column 카드에서는 가로 stretch 유지 */
    width: 100%;
    height: 388px;
    aspect-ratio: auto;
    border-radius: var(--radius-small);
  }
  .outdoor-films-card-info {
    flex: none;
    width: 100%;
    gap: var(--spacing-16);
    padding: 0;
  }
  /* MO 는 [속성배지 | 등급배지] 한 줄 양끝 (시안 badge행). 속성 배지 없는 카드도 등급 배지는 오른쪽 정렬 유지 */
  .outdoor-films-card-badges {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-8);
  }
  .outdoor-films-card-properties {
    order: -1;
  }
  .outdoor-films-card-ratings {
    margin-left: auto;
  }
  .outdoor-films-card-ratings .badge-rating {
    width: 24px;   /* 시안 MO 24 — 카드 내 축소 관례 (online·community 동일) */
    height: 24px;
  }
  .outdoor-films-card-text {
    flex: none;
    gap: var(--spacing-16);
  }
  .outdoor-films-card-head {
    gap: var(--spacing-4);
  }
  .outdoor-films-card-name {
    font-size: 24px;   /* 시안 MO 24 (heading-1 MO 30과 상이 — 개별 지정) */
  }
  .outdoor-films-card-detail {
    gap: var(--spacing-8);
  }
  .outdoor-films-card-director {
    gap: var(--spacing-4);
  }
  .outdoor-films-card-director span:first-child {
    font-size: 14px;   /* 시안 MO 14 */
  }
  .outdoor-films-card-director span:last-child {
    font-size: 13px;   /* 시안 MO 13 */
  }
  .outdoor-films-card-desc {
    font-size: 14px;   /* 시안 MO 14 */
    color: var(--color-text-secondary);   /* 시안 MO desc #6e6e6e (PC #555과 상이) */
  }
  .outdoor-carousel-nav {
    display: none;   /* MO 시안은 인디케이터만 */
  }
}

/* ══════════════════ MO 반응형 (Figma MO 875:3624, ≤768px) ══════════════════ */
@media (max-width: 768px) {
  .br-mo {
    display: inline;
  }
  /* 좌석 캐러셀 규칙(폭·gap·펫버튼·br-pc)은 ≤1279 블록에서 처리 (1280 미만 모바일 적용) */
  /* ── 전역: 콘텐츠 600 캡 중앙정렬 + 좌우 거터 16 ── */
  .outdoor {
    width: 100%;           /* 뷰포트 폭 고정 (flex min-content 로 밀리는 것 방지) */
    max-width: 600px;
    min-width: 0;
    margin: 0 auto;
    overflow-x: hidden;    /* 미변환/캐러셀 섹션 가로 넘침이 페이지를 늘리지 않게 */
    padding-bottom: var(--spacing-120);   /* 마지막 섹션↔둥근 상단 푸터 여백 (시안 1404:27039, 섹션 pb-0 으로 사라진 간격 복원) */
  }
  .outdoor-hero,
  .outdoor-seats,
  .outdoor-schedule,
  .outdoor-films,
  .outdoor-program,
  .outdoor-zones,
  .outdoor-place,
  .outdoor-notice,
  .outdoor-faq {
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
  .outdoor-intro {
    margin-left: var(--spacing-16);
    margin-right: var(--spacing-16);
  }
  /* 세로 리듬: 시안 MO 는 섹션마다 pt-80·pb 없음 → 섹션 간 80 (PC py-80 유지 시 160 되던 것 교정)
   * 최하단 요소(FAQ)는 pb 를 0으로 비워 컨테이너 .outdoor 의 자체 padding-bottom-120
   * (마지막 섹션↔푸터 여백)이 중복 없이 그대로 적용되게 한다. */
  .outdoor-seats,
  .outdoor-schedule,
  .outdoor-films,
  .outdoor-program,
  .outdoor-zones,
  .outdoor-place,
  .outdoor-notice,
  .outdoor-faq {
    padding-bottom: 0;
  }

  /* ⑩ FAQ: 긴 질문은 말줄임(…) 대신 줄바꿈 (CRFF-416, 시안 627:40184 — MO 2줄 허용).
   * 공통 .accordion-title 의 white-space:nowrap 를 FAQ MO 에서만 해제. 시안 질문은 nowrap 없음. */
  .outdoor-faq-item .accordion-title {
    white-space: normal;
    word-break: keep-all;
  }

  /* ── ① 히어로: 세로 스택(일러스트 상단 + 제목 중앙 + 정보카드 하단), MO 배경 PNG ── */
  .outdoor-hero {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
  }
  .outdoor-hero-inner {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-height: 280px;
    padding: 0 var(--spacing-16);
    border: 0;
    border-radius: var(--radius-large);
  }
  .outdoor-hero-illust {
    object-position: top;   /* MO 배경은 세로형 — 상단 일러스트 정렬 */
  }
  .outdoor-hero-headline {
    flex: none;
    width: 100%;
    justify-content: flex-start;
    padding: var(--spacing-80) 0 var(--spacing-48);
  }
  .outdoor-hero-title {
    font-size: 32px;   /* MO Heading 2 (PC display-2 56 → MO 32) */
    text-align: center;
    white-space: normal;
  }
  .outdoor-hero-quick {
    width: 100%;
    margin-bottom: var(--spacing-40);
    padding: var(--spacing-32);
    border-radius: var(--radius-large);
  }
  .outdoor-hero-detail {
    gap: var(--spacing-16);
  }
  .outdoor-hero-icon {
    width: 32px;
    height: 32px;
  }
  .outdoor-hero-icon::before {
    width: 16px;
    height: 16px;
  }

  /* ── ② 인트로: 2컬럼 → 1컬럼(중앙정렬), 풀블리드 핑크 박스 ── */
  .outdoor-intro {
    margin: var(--spacing-80) 0 0;
    gap: var(--spacing-40);
    padding: var(--spacing-80) var(--spacing-16) var(--spacing-40);
  }
  .outdoor-intro-head {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-24);
    padding: 0;
    text-align: center;
  }
  .outdoor-intro-tit {
    align-items: center;
    text-align: center;
  }
  .outdoor-intro-eyebrow {
    font-size: 20px;
  }
  .outdoor-intro-headline {
    font-size: 44px;
    line-height: 1.2;
  }
  .outdoor-intro-txt {
    align-items: center;
    font-size: 18px;
    text-align: center;
  }

  /* ── ④ 진행 시간표: 가로행 유지·압축(시간셀 128·아이콘 24), 폰트는 type-* MO 자동 ── */
  .outdoor-schedule-time {
    width: 128px;
    padding: var(--spacing-24) var(--spacing-16);
  }
  .outdoor-schedule-content {
    padding: var(--spacing-40) var(--spacing-16) var(--spacing-40) var(--spacing-24);
  }
  .outdoor-schedule-arrow {
    left: 115px;
    width: 24px;
    height: 24px;
  }
  .outdoor-schedule-arrow::before {
    width: 14px;
    height: 14px;
  }

  /* ── ⑤ 상영작: 카드 규칙은 ≤1023 블록(세로 310 카드) — 여기선 거터 16 기준 캐러셀 풀블리드만 보정 ── */
  .outdoor-films-carousel {
    margin: 0 calc(-1 * var(--spacing-16));
    padding: 0 var(--spacing-16);
  }

  /* ── ⑥ 참여 프로그램: 2×2 그리드 → 1열 스택(카드 h320), 카드3·4 색/타원 스왑 ── */
  .outdoor-program-list {
    grid-template-columns: 1fr;
  }
  .outdoor-program-card {
    aspect-ratio: auto;
    height: 320px;
  }
  /* MO 는 pink-single / green-double 교대 → 카드3(뱃지)=핑크+단일, 카드4(쓱싹쓱싹)=초록+이중 */
  .outdoor-program-card:nth-child(3) {
    background-color: var(--color-pink-60);
    background-image: url("../../images/outdoor/program-ellipse-single.svg");
    background-size: 100% 100%;
    background-position: center;
  }
  .outdoor-program-card:nth-child(4) {
    background-color: var(--color-green-60);
    background-image: url("../../images/outdoor/program-ellipse-double.svg");
    background-size: 200% 100%;
    background-position: center;
  }
  .outdoor-program-card-title {
    font-size: 30px;
  }
  .outdoor-program-card-desc {
    color: var(--color-text-subtitle);
  }

  /* ── ⑦ 아이콘 안내: 4열 → 1열 스택, 아이콘 80→52 (제목24·설명16 type-* MO 자동) ── */
  .outdoor-zones-list {
    flex-direction: column;
  }
  .outdoor-zones-card {
    flex: none;
  }
  .outdoor-zones-icon {
    width: 52px;
    height: 52px;
  }

  /* ── ⑧ 오시는 길: 지도|패널 가로 → 세로 스택, 패널 풀폭 ── */
  .outdoor-place-title-pc {
    display: none;
  }
  .outdoor-place-title-mo {
    display: inline;
  }
  .outdoor-place-box {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-12);
  }
  .outdoor-place-map {
    flex: none;
    width: 100%;
    height: auto;
    padding: var(--spacing-120) 0;
  }
  /* 폴백은 padding 으로 높이를 만들지만, 지도는 컨테이너 높이가 확정돼야 렌더된다 */
  .outdoor-place-map.is-map-loaded {
    height: 320px;
    padding: 0;
  }
  .outdoor-place-info {
    flex: none;
    width: 100%;
    justify-content: flex-start;
    padding: var(--spacing-24);
  }
  .outdoor-place-name {
    font-size: 28px;
  }
  /* 주소·복사·중앙광장 → 인라인 wrap 한 줄 흐름 */
  .outdoor-place-address {
    flex-direction: column;   /* CRFF-424: row-wrap→column — 복사 버튼이 상세와 같은 줄로 섞이지 않게 */
    align-items: stretch;
    gap: var(--spacing-8);
  }
  .outdoor-place-address-row {
    align-items: flex-start;   /* 주소 2줄 줄바꿈 시 복사 버튼 상단 정렬 (base flex 유지 — display:contents 제거) */
  }
  .outdoor-place-address-text,
  .outdoor-place-detail {
    font-size: 15px;
    color: var(--color-text-secondary);
  }
  /* 320~350 좁은 폭에서 주소가 nowrap 으로 카드 밖 넘쳐 잘리던 것 해소 — 어절 단위 줄바꿈 + flex 수축 (CRFF-424) */
  .outdoor-place-address-text {
    white-space: normal;
    word-break: keep-all;
    min-width: 0;
    flex: 1;
  }
  .outdoor-place-copy {
    font-size: 15px;
  }
  /* 교통 행: 가로(flag|설명) → 세로(flag 위·설명 아래), flag 80×32 */
  .outdoor-place-transport-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
  }
  .outdoor-place-flag {
    min-width: 80px;
  }
  .outdoor-place-transport-desc {
    font-size: 15px;
  }

  /* ── ⑨ 유의 사항: 다크바·박스 패딩 축소(40 → px24 py32), 제목28·불릿18 유지 ── */
  .outdoor-notice-head {
    padding: var(--spacing-32) var(--spacing-24);
  }
  .outdoor-notice-list {
    padding: var(--spacing-32) var(--spacing-24);
  }
  .outdoor-notice-item span {
    font-size: 18px;   /* 시안 불릿 18 유지 (type-body-3 MO 자동축소 15 방지) */
  }

  /* ── ⑩ FAQ: 다크바 패딩 축소, 아코디언 행은 .accordion 컴포넌트 MO 변형 처리 ── */
  .outdoor-faq-head {
    padding: var(--spacing-32) var(--spacing-24);
  }
}

/* ══════════════════════════════════════════════════════════════════
 * 태블릿 (769–1279) — OC-4000 전용 오버라이드 (1024 시안 기준).
 * ⚠️ FO 최초 min-width 미디어쿼리(design-guide.md 단일분기 예외 · outdoor.css 한정).
 * base(넓은 PC ≥1280)·MO(≤768) 무손상.
 * ══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1279px) {
  /* ⑤ 상영작 — 769~1023 세로 카드는 ≤1023 블록, 1024~1279 는 Swiper(1·2장 꽉 채움, js/outdoor/outdoor.js)가 폭을 잡으므로 이 블록엔 규칙 없음 (2026-09-30 /original-film 정렬) */

  /* ⑥ 참여 프로그램 — 좁은 PC 는 카드 세로형(460×606, 시안). 넓은 PC 는 가로형(908/606) base 유지 */
  .outdoor-program-card {
    aspect-ratio: 460 / 606;
  }
  .outdoor-program-card-title {
    white-space: normal;     /* 좁은 폭 제목 줄바꿈(넓은 PC nowrap 유지) — 잘림 방지 */
    word-break: keep-all;    /* 어절(공백) 단위 줄바꿈 — 단어 중간 끊김 방지 */
  }
  .outdoor-program-card-desc {
    word-break: keep-all;    /* 설명 어절 단위 줄바꿈 — 시안 <br> 지점과 동일(단어 중간 끊김 방지) */
  }
  /* 타원 그래픽 — native 비율 유지(908×606·1816×646), 높이 채우고 폭은 오버플로우.
     좁아지면 가운데 확대(center crop)가 아니라 시안 앵커대로 한쪽을 크롭해 보여줌 */
  .outdoor-program-card--single,
  .outdoor-program-card--double {
    background-size: auto 100%;
  }
  /* 단일 타원(1 키즈파워·4 쓱싹쓱싹) — 시안 앵커 이미지 좌측(left:-2) */
  .outdoor-program-card--single {
    background-position: left center;
  }
  /* 이중 타원(2·3) — 시안 앵커 이미지 우측(-454 상당) */
  .outdoor-program-card--double {
    background-position: right center;
  }
}

/* ══════════════════════════════════════════════════════════════════
 * 히어로 전용 — 769~1023 세로 스택 (사용자 결정 2026-08-13).
 * 히어로 row(제목 좌 209 + 박스 우 440)는 ~917px 미만에서 박스와 겹쳐 성립 불가 →
 * 이 구간은 모바일(≤768)과 동일한 세로 스택으로. 배경 PNG 는 picture source(≤1023)가 MO 본을 이미 사용.
 * ⚠️ 히어로만 mobile/desktop 경계가 1024 (다른 섹션은 768). base(row) 위에서 이 블록이 덮음.
 * ══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1023px) {
  /* ⑦ 오시는 길 — 세로형(맵 전폭 위 + 정보 전폭 아래). 시안 627:37766 (맵 640·gap24 유지, 정보 패딩 40) */
  .outdoor-place-box {
    flex-direction: column;
  }
  .outdoor-place-map {
    flex: none;
    width: 100%;
  }
  .outdoor-place-info {
    flex: none;
    width: 100%;
    padding: var(--spacing-40);
  }

  .outdoor-hero {
    padding: var(--spacing-16);   /* 상하 16 + 좌우 거터 16 */
  }
  .outdoor-hero-inner {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-height: 280px;
    padding: 0 var(--spacing-16);
    border: 0;
  }
  .outdoor-hero-illust {
    object-position: top;
  }
  .outdoor-hero-headline {
    flex: none;
    width: 100%;
    padding: var(--spacing-80) 0 var(--spacing-48);
  }
  .outdoor-hero-title {
    font-size: 32px;
    text-align: center;
    white-space: normal;
  }
  .outdoor-hero-quick {
    width: 100%;
    margin-bottom: var(--spacing-40);
    padding: var(--spacing-32);
    border-radius: var(--radius-large);
  }
  .outdoor-hero-detail {
    gap: var(--spacing-16);
  }
  .outdoor-hero-icon {
    width: 32px;
    height: 32px;
  }
  .outdoor-hero-icon::before {
    width: 16px;
    height: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════
 * 히어로 전용 — PC(≥1024) 제목: nowrap 제거 → 헤드라인(flex:1 min-width:0) 가용폭 안에서 자동 줄바꿈.
 * 폭이 줄면 텍스트가 더 여러 줄로 reflow 되어 우측 카드와 "만나되" 겹치지 않음(카드가 텍스트 위로 안 올라감).
 * max-width 고정 없이 가용폭을 채우고, 긴 회차명(editionName·가변) 단어는 overflow-wrap 으로 강제 줄바꿈 (CRFF-227).
 * 769~1023 은 세로 스택(별도 블록)이라 무관.
 * ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .outdoor-hero-title {
    white-space: normal;
    word-break: keep-all;      /* 한글 어절 단위(공백에서 줄바꿈) */
    overflow-wrap: anywhere;   /* 긴 회차명 단어는 넘치지 않게 강제 줄바꿈 */
  }
}

/* ══════════════════════════════════════════════════════════════════
 * ⑥ 참여 프로그램 제목 — 960~1279 는 시안(627:37705)대로 4개 제목 모두 2줄.
 * 각 제목의 <br class="outdoor-prog-title-br"> 를 이 구간에서만 표시하고,
 * 줄별로 nowrap 유지(한 줄이 더 쪼개지지 않게).
 * 769~959 는 카드가 좁아 위 769~1279 블록의 keep-all 자연 줄바꿈 유지.
 * ══════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) and (max-width: 1279px) {
  .outdoor-program-card-title {
    white-space: nowrap;
  }
  .outdoor-prog-title-br {
    display: revert;
  }
}

/* ══════════════════════════════════════════════════════════════════
 * ⑦ 준비물 설명 — 넓은 카드(≥1280)에선 어절 단위 줄바꿈(시안).
 * CJK 글자 중간 끊김("협찬사/와") 방지. 좁은 카드(≤1279)는 시안이 char-break 라 base 유지.
 * ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .outdoor-zones-card-desc,
  .outdoor-films-card-name,   /* 제목 "졸/업영상"·"똥황/토" 글자 중간 끊김 방지 — 어절 단위 줄바꿈 */
  .outdoor-films-card-desc {   /* 상영작 시놉시스 "도/시"·"원/작" 글자 중간 끊김 방지 (10줄 말줄임과 병행) */
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  /* 상영작 카드 폭·3장↑ 처리는 base 정적 규칙 + Swiper(countAware) 로 통일 — 구 flex-wrap 2열 방식 폐기 (2026-09-30 /original-film 정렬) */
}

/* ══════════════════════════════════════════════════════════════════
 * ⑤ 상영작 — 1280~1919 (1920 미만 데스크톱: 1440·1680·1728 등) 카드 내부 비율 재조정 (CRFF-392, 2026-09-30)
 * 시안(1920 기준 포스터 442 / 정보 408)을 그대로 축소하면 1440 에서 텍스트 칸이 269px 로 좁아져
 * 20px 시놉시스가 13줄·카드 868px 로 늘어남. 포스터 42% · 정보 칸 여백 축소 · 본문 18 로 (제목 32 는 이후 base 승격)
 * 카드 582px(포스터 265×375 / 텍스트 339px)로 균형.
 * 상한 1679→1919 확장: 포스터를 /original-film 과 같은 442 고정으로 맞추면서 1680~1919 도 정보 칸이
 * 286~406px 로 좁아져 카드가 ~950px 까지 늘어나는 것을 실측(1680)해 같은 처리로 묶음. ≥1920 은 시안 값.
 * (Swiper 1장/뷰·1장 정적(910) 케이스는 포스터가 42% 로 커지지만 깨지지 않아 예외 두지 않음)
 * ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) and (max-width: 1919px) {
  .outdoor-films-card {
    gap: var(--spacing-20);
  }
  .outdoor-films-card-poster {
    flex: 0 0 42%;
  }
  .outdoor-films-card-info {
    flex: 1 1 0;
    gap: var(--spacing-32);
    padding: var(--spacing-8) var(--spacing-8) var(--spacing-16) 0;
  }
  .outdoor-films-card-badges {
    gap: var(--spacing-16);
  }
  .outdoor-films-card-text {
    gap: var(--spacing-24);
  }
  /* 제목 32 는 base(type-heading-2, 시안 2026-09-30)로 승격돼 이 블록의 개별 지정 삭제 */
  .outdoor-films-card-detail {
    gap: var(--spacing-16);
  }
  .outdoor-films-card-desc {
    font-size: 18px;
    line-height: 28px;
  }
}