/*
 * FO 온라인 상영 (NC-3100 오리지널 필름 · NC-3200 단편영화 수상작 · NC-3300 아동감독상 특별전) — CRFF-51
 * 시안: 공유_아동권리영화제 PC 627:62069 / MO 627:64504
 * 히어로·세그먼트탭·FAB 는 공통 컴포넌트(components.css sub-hero/.tab--segment/.fab — CRFF-51 승격)
 * 값 추출표: claudedocs/crff51-online-value-table.md
 */

/* 히어로 배경 공급 (합성 SVG — 레드 #ee3124 + 일러스트 + 딤, community 관례) */
.online .sub-hero {
  --sub-hero-bg: url("../../images/online/hero-bg.svg");
  --sub-hero-bg-mo: url("../../images/online/hero-bg-mo.svg");
}

/* 브레이크포인트별 줄바꿈 (community 관례 계승) */
.br-mo {
  display: none;
}

/* ── 탭 래퍼 — 시안 tab_group: pt16 pb56 px48(40+8) ── */
.online-tab {
  padding: var(--spacing-16) var(--spacing-48) var(--spacing-56);
}

/* ── 소개 — 핑크 풀블리드 박스 (Figma 627:62120·62879·63266) ── */
.online-intro-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-56);
  padding: var(--spacing-120) var(--spacing-40) var(--spacing-80);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xxlarge);
  background-color: var(--color-pink-60);
}
/* 온라인 상영 계열 소개 비주얼 제거 → 박스 상하 대칭 패딩 (CRFF-211, OG-3100·NC-3200·NC-3300) */
.online--original .online-intro-box,
.online--awards .online-intro-box,
.online--special .online-intro-box {
  padding: var(--spacing-80) var(--spacing-40);
}

.online-intro-head {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--spacing-24);
  padding: 0 var(--spacing-40);
}

.online-intro-tit {
  flex: 1;
  min-width: 0;
  min-height: 152px; /* 시안 627:62883 — 타이틀 영역 2줄 높이(display-2 56×1.35×2) 확보 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 시안 items-start — 타이틀도 상단 정렬(1줄이면 아래 여백) */
  color: var(--color-text-heading);
}

.online-intro-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 시안 627:62880 — 텍스트는 박스 상단 정렬(타이틀은 세로중앙) */
  gap: var(--spacing-12);
  color: var(--color-text-heading);
}

/* 소개 비주얼 — 탭별 구성: original=그린+일러스트+포스터2 / awards=다크 플레이스홀더 / special=그린+일러스트+포스터1 */
.online-intro-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-28); /* 시안 28 — 포스터 간격 */
  height: 640px;
  border-radius: var(--radius-xxlarge);
  overflow: hidden;
}

.online-intro-visual--original,
.online-intro-visual--special {
  background-color: var(--color-green-60);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.online-intro-visual--original {
  background-image: url("../../images/online/intro-graphic-original.svg");
}

.online-intro-visual--special {
  background-image: url("../../images/online/intro-graphic-special.svg");
  /* 시안(822:82512): 2800×800 원본 고정 + 중앙 — 좌우 타원이 박스 밖으로 크게 잘리는 구도 (100% 축소 금지) */
  background-size: 2800px 800px;
}

.online-intro-visual--placeholder {
  background-color: var(--color-gray-10);
  color: var(--color-text-inverse);
}

.online-intro-visual-poster {
  position: relative;
  width: 442px;
  height: 624px;
  border-radius: var(--radius-xxlarge);
  object-fit: cover;
}

/* ── 공통 섹션 리듬 — pt120 + 타이틀 + 콘텐츠 32 (Figma 627:62130 등) ── */
.online-section {
  padding: var(--spacing-120) var(--spacing-40) 0;
}
/* 마지막 섹션(상영작)은 하단 여백 80 — 푸터 상단 간격(시안 NC-3100 콘텐츠→푸터 80, awards/special online-vote 동일).
 * 스와이퍼(인디케이터) 노출 시에도 이 여백이 인디케이터 아래→푸터 간격이 된다. */
.online-section:last-of-type {
  padding-bottom: var(--spacing-80);
}

.online-section-tit {
  color: var(--color-text-heading);
}

.online-section-tit + .online-steps,
.online-section-tit + .online-films,
.online-section-tit + .online-awards {
  margin-top: var(--spacing-32);
}

/* ── 제작 과정 — 4단계 카드 + 핑크 원형 화살표 (Figma 627:62130, community-steps 동일 계열) ── */
.online-steps {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  list-style: none;
  margin: 0;
  padding: 0;
}

.online-steps-item {
  flex: 1;
  min-width: 128px;
  align-self: stretch;
  display: flex;
}

.online-steps-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  padding: var(--spacing-40) var(--spacing-32);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  background-color: var(--color-background);
}

.online-steps-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background-color: var(--color-text-heading);
  -webkit-mask: var(--online-steps-icon) no-repeat center / contain;
  mask: var(--online-steps-icon) no-repeat center / contain;
}

.online-steps-txt {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  text-align: center;
}

.online-steps-name {
  color: var(--color-text-heading);
}

.online-steps-desc {
  color: var(--color-text-body);
}

.online-steps-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-pink-60);
}

.online-steps-arrow::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--color-gray-10);
  -webkit-mask: url("../../images/icon/func-paginationNext.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-paginationNext.svg") no-repeat center / contain;
}

/* ── 상영작 캐러셀 — 가로형 카드 (NC-3100, Figma 627:62166 · community-films 동일 계열) ── */
.online-films {
  position: relative;
}

.online-films-carousel {
  overflow: hidden;
}

.online-films-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.online-films-card {
  display: flex;
  gap: var(--spacing-24);
  width: 910px;
  flex-shrink: 0;
  /* 카드 높이 고정 660 (시안 627:54735) — desc 길이·태그 수와 무관하게 전 카드 동일 높이 (짧은 카드도 head flex:1 이 하단 정렬로 흡수) */
  height: 660px;
  padding: var(--spacing-16); /* 16 — 카드 660(포스터624+패딩16×2+보더2×2) 정합 위해 종전 18→16 (community 와 동일) */
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  background-color: var(--color-background);
  box-sizing: border-box;
}
/* 정적(≥1280·2장 이하 — Swiper 미활성): 2카드 가로 꽉 채움. 3장↑/≤1279 는 Swiper 라 고정폭 유지 (야외상영 동일) */
.online-films-carousel:not(.swiper-initialized) .online-films-list {
  gap: var(--spacing-24);
}
.online-films-carousel:not(.swiper-initialized) .online-films-card {
  width: auto;
  flex: 1;
  min-width: 0;
}
/* 2카드 가로 꽉 채움 구간(≥1280·≤2장)은 카드가 910 미만으로 줄어드는데 포스터가 고정 442 라
 * 정보 칸이 찌부돼 뱃지·태그·제목·시놉시스가 카드 밖으로 넘쳤다(CRFF-421, 1280~1620).
 * 포스터·정보를 시안 비율(442:412≈51:49)로 함께 축소 — 카드 폭과 무관히 비율 유지, 910 복귀 시 원래 값 수렴.
 * Swiper(≤1279·3장↑)·모바일은 고정폭이라 영향 없음(:not(.swiper-initialized) 스코프). */
.online-films-carousel:not(.swiper-initialized) .online-films-poster {
  flex: 51 1 0;
  width: auto;
  min-width: 0;
}
.online-films-carousel:not(.swiper-initialized) .online-films-info {
  flex: 49 1 0;
}
/* 1개만 있으면 전체폭으로 늘리지 않고 최대(디자인) 카드 폭 910 고정 (시안 1501:36776 카드 910×660) */
.online-films-carousel:not(.swiper-initialized) .online-films-card:only-child {
  width: 910px;
  max-width: 100%;
  flex: none;
}
/* 정적일 땐 스와이프 컨트롤(화살표·인디케이터) 숨김 */
.online-films-carousel:not(.swiper-initialized) .online-carousel-nav {
  display: none;
}
.online-films-carousel:not(.swiper-initialized) ~ .online-films-pagination {
  display: none;
}

.online-films-poster {
  flex-shrink: 0;
  width: 442px;
  height: 624px;
  border-radius: var(--radius-large);
  overflow: hidden;
}

.online-films-poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.online-films-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48);
  padding: var(--spacing-16) var(--spacing-24) var(--spacing-80);
}

.online-films-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-24);
}

.online-films-ratings,
.online-films-properties {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.online-films-txtgroup {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}

/* 제목+태그 그룹 — 제목 영역이 남는 높이를 차지해 감독·소개(txt)를 하단에 고정(기존 name flex:1 승계) */
.online-films-head {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8); /* 시안 캡처 추정(제목↔태그) — Figma MCP 미연결, 확인 시 보정 */
}

.online-films-name {
  color: var(--color-text-heading);
}

/* 제목 링크 — h3 의 heading 색을 <a> 가 상속하지 않아 UA 기본 링크색(파랑/방문 보라)이 노출되므로 고정 */
.online-films-name a,
.online-films-name a:visited {
  color: inherit;
}

.online-films-txt {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.online-films-director {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.online-films-director .type-body-2-bold {
  color: var(--color-text-heading);
}

.online-films-director .type-body-4-regular {
  color: var(--color-text-secondary);
}

.online-films-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;   /* 줄거리 7줄 초과 시 말줄임(…) — 하단 패딩 80 복원·카드 660 양립(community 동일), 표준 line-clamp 병기 금지(CRFF-211) */
  overflow: hidden;
  color: var(--color-text-body);
}

/* ── 수상작 카드 캐러셀 — 세로형 카드 + 투표 버튼 (NC-3200/3300, Figma 627:62978) ── */
.online-awards {
  position: relative;
}

.online-awards-carousel {
  overflow: hidden;
}

.online-awards-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.online-awards-slide {
  display: flex;
  flex-direction: column;
  width: 442px;
  flex-shrink: 0;
}

.online-award-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-28); /* 시안 28 — top↔poster 간격 */
  border: 2px solid var(--color-gray-10);
  /* 시안 원값 36 — radius 스케일 외 예외 (2026-08-19 합의, 디자이너 확인 후 토큰화 여부 결정) */
  border-radius: 36px 36px 0 0;
  background-color: var(--color-background);
  overflow: hidden;
}

/* 투표 버튼이 없는 카드(비투표 특별전 등) — 상단 라운드(36)를 하단에도 적용해 각진 하단 방지 (시안 627:67347).
 * 투표버튼은 카드의 형제(자식 아님)라 인접형제 결합자(+)로 판정해야 한다 — `:has(.online-award-vote)`(자식)만 쓰면
 * 항상 거짓이라 투표 카드까지 full radius 가 돼 하단이 둥글어져 버튼과의 접합부에 노치가 생겼다 (CRFF-168) */
.online-award-card:not(:has(+ .online-award-vote)) {
  border-radius: 36px;
}

.online-award-top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-20);
  padding: var(--spacing-24);
}

.online-award-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 수상 배지 래퍼 — 복수 수상(GRAND+BEST 등) 시 줄바꿈 허용 (CRFF-60 실데이터: awardTypeList 복수 가능) */
.online-award-flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
}

/* 상영작 0건 안내 — 목록·수상작·특별전 공통 (CRFF-60) */
.online-section-empty {
  padding: var(--spacing-40) 0;
  text-align: center;
  color: var(--color-text-secondary);
}

.online-award-ratings {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

/* 제목+태그 그룹 — 태그 없으면 fragment 가 행을 렌더하지 않아 제목만 남는다 */
.online-award-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8); /* 시안 캡처 추정(제목↔태그) — Figma MCP 미연결, 확인 시 보정 */
}

.online-award-name {
  color: var(--color-text-heading);
}

/* MO 전용 플래그 로고 (시안 badge_property_Mo 399:1233 — PC 플래그엔 없음) */
.online-award-flag-logo {
  display: none;
}

/* 수상 플래그 아이콘 — badge-property 텍스트색 추종 (채운 트로피 — 시안 정밀대조 보정: 라인형 아님) */
.online-award-flag-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("../../images/icon/func-trophy-filled.svg") no-repeat center / contain;
  mask: url("../../images/icon/func-trophy-filled.svg") no-repeat center / contain;
}

.online-award-poster {
  position: relative;
  box-sizing: border-box;
  height: 624px;
  margin: 0 -2px; /* 포스터 보더를 카드 보더와 겹침 (시안 x-2 블리드) */
  border: 2px solid var(--color-gray-10);
  border-bottom: none;
  border-radius: 36px 36px 0 0; /* 시안 원값 36 — 카드와 동일 예외 */
  overflow: hidden;
}

.online-award-poster-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.online-award-poster-dim {
  position: absolute;
  inset: auto 0 0;
  height: 224px;
  pointer-events: none; /* 포스터 상세 링크 클릭 통과 — 오버레이가 클릭을 가로채지 않게 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 1.458%, rgba(0, 0, 0, 0.6)); /* 시안 원값 */
}

.online-award-director {
  position: absolute;
  inset: auto 0 0;
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-28);
  color: var(--color-text-inverse);
  pointer-events: none; /* 포스터 상세 링크 클릭 통과 */
}

/* ── 상영 종료 상태 — 포스터 풀딤 + "상영 종료" 중앙 배지 (시안 627:67347 / 1786:34223)
   노출 정책: PC(>=1280) = 카드 호버/포커스 시에만 딤+배지 함께 노출(기본 숨김) /
   태블릿·모바일(<=1279px, 터치 기기 — 호버 전제 불가) = 딤+배지 상시 노출(아래 미디어쿼리). ── */
.online-award-poster.is-ended:hover::after,
.online-award-poster.is-ended:focus-within::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(34, 34, 34, 0.6);   /* #222 0.6 — 포스터 위 종료 딤 (시안 원값) */
  pointer-events: none; /* 종료 카드도 상세 진입 가능 — 풀딤이 링크 클릭을 막지 않게 */
}
.online-award-poster-status {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  pointer-events: none; /* 종료 배지 위 클릭도 상세 링크로 통과 */
  transform: translate(-50%, -50%);
  display: none;   /* PC 기본 숨김 — hover/focus 시 노출(딤과 동일 조건). ≤1023 은 미디어쿼리서 상시 노출 */
  align-items: center;
  height: 30px;
  padding: 0 var(--spacing-8);
  border: 1px solid var(--color-background);
  border-radius: var(--radius-full);
  background-color: rgba(34, 34, 34, 0.6);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.5px;
  color: var(--color-text-inverse);
  white-space: nowrap;
}
/* PC: 딤과 함께 hover/focus 시에만 "상영 종료" 배지 노출 */
.online-award-poster.is-ended:hover .online-award-poster-status,
.online-award-poster.is-ended:focus-within .online-award-poster-status {
  display: inline-flex;
}
/* 종료 카드 감독명은 풀딤 위로 */
.online-award-poster.is-ended .online-award-director {
  z-index: 2;
}

/* 태블릿(1024~1279, 터치 — 호버 전제 불가): 모바일과 동일하게 딤+태그 상시 노출 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .online-award-poster.is-ended::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(34, 34, 34, 0.6);
    pointer-events: none;
  }
  .online-award-poster-status {
    display: inline-flex;
  }
}

/* 투표 버튼 — .button--secondary 기반, 카드 하단 밀착 사각(하단 36 라운드) */
.online-award-vote {
  width: 100%;
  height: 80px;
  padding: 0 var(--spacing-32);
  border-radius: 0 0 36px 36px; /* 시안 원값 36 — 카드 상단 라운드와 동일 예외 */
  font-size: 18px;
  line-height: 1.5;
}

.online-award-vote .button-icon {
  --button-icon-mask: url("../../images/icon/func-favorit-selected.svg");
  width: 24px;
  height: 24px;
  background-color: var(--color-cta); /* 시안: 빨간 채운 하트 (color/primary/10) — currentColor(흰색) 아님 */
}

/* ── 캐러셀 좌우 화살표 — 80 원형 딤+블러 (Figma IconButton_80, community-carousel-nav 동일 계열) ── */
.online-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;
}

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

.online-carousel-nav--prev {
  left: var(--spacing-24);
}

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

.online-carousel-nav--next {
  right: var(--spacing-24);
}

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

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

/* ── 캐러셀 인디케이터 — active 32×8 바 + 8 도트 (community-carousel-pagination 동일 계열) ── */
.online-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);
}

.online-carousel-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-dim-20);
  opacity: 1;
}

.online-carousel-pagination .swiper-pagination-bullet-active {
  width: 32px;
  background-color: var(--color-gray-10);
}

/* ── 투표 안내 — 핑크 타이틀 바 + 회색 불릿 박스 (Figma 인스턴스 596:2886) ── */
.online-vote {
  padding: var(--spacing-80) var(--spacing-40);
}

.online-vote-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: -2px; /* 아래 박스와 보더 겹침 (시안) */
  padding: var(--spacing-40);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  background-color: var(--color-pink-60);
}

.online-vote-tit {
  flex: 1;
  min-width: 0;
  color: var(--color-text-heading);
}

.online-vote-period {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--spacing-20);
  border-radius: var(--radius-full);
  background-color: var(--color-pink-80);
  color: var(--color-text-body);
  white-space: nowrap;
}

.online-vote-period-label {
  font-weight: 600; /* 시안 PC: 라벨·날짜 동일 SemiBold — strong 기본 bolder(900) 무력화 (정밀대조 보정) */
}

.online-vote-period-label::after {
  content: " : "; /* PC 는 라벨·날짜 한 줄 병기 (MO 는 2줄 전환) */
  white-space: pre;
}

.online-vote-bullets {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-8);
  list-style: none;
  margin: 0;
  padding: var(--spacing-40);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  background-color: var(--color-background-section);
}

.online-vote-bullet {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  color: var(--color-text-body);
}

.online-vote-bullet--strong {
  color: var(--color-text-subtitle);
}

.online-vote-bullet-dot {
  flex-shrink: 0;
  margin-top: -1px; /* 도트 캔버스(29) 광학 보정 — community bullet-dot 관례 */
}

/* ── FAB 간격 — 콘텐츠 끝 ↔ FAB (시안: NC-3100 80 / NC-3200·3300 40) ── */
.online--original .fab-area {
  margin-top: var(--spacing-80);
}

.online--awards .fab-area,
.online--special .fab-area {
  margin-top: var(--spacing-40);
}

/* ── Mobile (≤1023px) — MO 시안 627:67239·67317·67516 실측 ── */
@media (max-width: 1023px) {
  .br-pc {
    display: none;
  }

  .br-mo {
    display: inline;
  }

  /* 탭 래퍼 — MO py12 (px 는 .tab--segment 가 px16 공급) */
  .online-tab {
    padding: var(--spacing-12) 0;
  }

  /* 소개 — 세로 스택 센터 (탭 아래 56 별도) */
  .online-intro {
    margin-top: var(--spacing-56);
  }

  .online-intro-box {
    padding: var(--spacing-80) var(--spacing-16) var(--spacing-40);
    gap: var(--spacing-40);
  }
  /* 온라인 상영 계열 비주얼 제거 → 상하 대칭 56 (CRFF-211) */
  .online--original .online-intro-box,
  .online--awards .online-intro-box,
  .online--special .online-intro-box {
    padding: var(--spacing-56) var(--spacing-16);
  }

  .online-intro-head {
    flex-direction: column;
    gap: var(--spacing-24);
    padding: 0;
    text-align: center;
  }

  .online-intro-tit {
    font-size: 44px; /* 시안 MO 44/1.2 (display-2 MO 미대응 — 개별 지정, raw 유지 합의 2026-08-19) */
    line-height: 1.2;
    min-height: 0; /* MO 세로 스택 — PC 2줄 예약(152) 해제 */
  }

  .online-intro-txt {
    font-size: 18px; /* 시안 MO 18 (body-2-semibold MO 16과 상이 — 개별 지정) */
  }

  .online-intro-visual {
    flex-direction: column;
    gap: var(--spacing-24);
    height: auto;
    padding: var(--spacing-24) 0;
    border-radius: var(--radius-xlarge);
  }

  /* MO 비주얼은 일러스트 없이 다크 박스 (시안 627:67265) */
  .online-intro-visual--original,
  .online-intro-visual--special {
    background-image: none;
    background-color: var(--color-gray-10);
  }

  .online-intro-visual--placeholder {
    height: 480px;
    padding: 0;
  }

  /* 3300 MO 비주얼 — 포스터 1장 센터, 박스 480 고정 (시안 627:67543) */
  .online--special .online-intro-visual {
    height: 480px;
    padding: 0;
  }

  .online-intro-visual-poster {
    width: 274px;
    height: 388px;
    border-radius: var(--radius-small);
  }

  /* 섹션 리듬 — MO pt80 px16 */
  .online-section {
    padding: var(--spacing-80) var(--spacing-16) 0;
  }

  /* 제작 과정 — 세로 스택 + 화살표 회전·오버랩 (community-steps MO 관례) */
  .online-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .online-steps-item {
    min-width: 0;
  }

  .online-steps-card {
    padding: var(--spacing-40) var(--spacing-24);
    gap: var(--spacing-16);
  }

  .online-steps-name {
    font-size: 20px; /* 시안 MO 20 (body-1-bold MO 18과 상이 — 개별 지정) */
  }

  .online-steps-desc {
    font-size: 16px; /* 시안 MO 16 (body-3-regular MO 15와 상이 — 개별 지정) */
  }

  .online-steps-arrow {
    align-self: center;
    margin: -12px 0; /* 카드 간 16 간격 중앙에 40 원이 12씩 겹침 (시안 오버랩 배치) */
    z-index: 1;
  }

  .online-steps-arrow::before {
    transform: rotate(90deg);
  }

  /* 상영작 캐러셀 (NC-3100 MO) — 세로형 카드, 풀블리드 peek, 화살표 미노출 */
  .online-films-carousel,
  .online-awards-carousel {
    margin: 0 calc(-1 * var(--spacing-16));
    padding: 0 var(--spacing-16);
  }

  .online-films-card {
    flex-direction: column;
    width: 310px;
    height: auto; /* 모바일 세로 카드는 내용 높이 (PC 고정높이 해제) */
    padding: var(--spacing-16) var(--spacing-16) var(--spacing-24);
  }

  .online-films-poster {
    width: 100%;
    height: 388px;
    border-radius: var(--radius-small);
  }

  .online-films-info {
    padding: 0;
    gap: var(--spacing-16);
  }

  .online-films-badges {
    flex-direction: row-reverse; /* MO 는 [속성배지 | 등급배지] 한 줄 양끝 (시안 badge행) */
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .online-films-ratings .badge-rating {
    width: 24px; /* 시안 MO 24 — 카드 내 축소 관례 (outdoor·community 동일) */
    height: 24px;
  }

  .online-films-txtgroup {
    flex: none;
    gap: var(--spacing-16);
  }

  .online-films-head {
    flex: none;
    gap: var(--spacing-4);
  }

  .online-films-name {
    font-size: 24px; /* 시안 MO 24 (heading-1 MO 30과 상이 — 개별 지정) */
  }

  .online-films-txt {
    gap: var(--spacing-8);
  }

  .online-films-director .type-body-2-bold {
    font-size: 14px; /* 시안 MO 14 */
  }

  .online-films-director .type-body-4-regular {
    font-size: 13px; /* 시안 MO 13 */
  }

  .online-films-desc {
    font-size: 14px; /* 시안 MO 14 */
    color: var(--color-text-secondary); /* 시안 MO desc #6e6e6e (PC #555과 상이) */
  }

  /* 수상작 카드 (NC-3200/3300 MO 776:56448) — 274 카드, 상단 회색, 라운드 16 */
  .online-awards-slide {
    width: 274px;
  }

  .online-award-card {
    gap: 0;
    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
    background-color: var(--color-background-section); /* MO 카드 상단부 회색 (PC 흰색과 상이 — 시안) */
  }

  /* 투표 버튼 없는 카드 — 하단도 라운드 16 (시안 627:67347). 투표버튼은 형제라 인접형제(+) 판정 (CRFF-168) */
  .online-award-card:not(:has(+ .online-award-vote)) {
    border-radius: var(--radius-medium);
  }

  .online-award-top {
    gap: var(--spacing-16);
    padding: var(--spacing-16) var(--spacing-16) var(--spacing-24);
  }

  .online-award-ratings {
    gap: var(--spacing-4);
  }

  .online-award-head {
    gap: var(--spacing-4);
  }

  .online-award-ratings .badge-rating {
    width: 30px; /* 시안 MO 30 (badge-rating--sm 규격) */
    height: 30px;
  }

  /* MO 플래그 로고 — CRFF 워드마크, 플래그 텍스트색 추종 (시안 badge_property_Mo) */
  .online-award-flag-logo {
    display: block;
    width: 25px;
    height: 11px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("../../images/online/flag-logo-crff.svg") no-repeat center / contain;
    mask: url("../../images/online/flag-logo-crff.svg") no-repeat center / contain;
  }

  .online-award-poster {
    height: 388px;
    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
  }

  /* 종료 카드 딤·배지 — 태블릿·MO(터치 기기)는 호버 전제가 불가하므로 상시 노출 (2026-09-08 확정) */
  .online-award-poster.is-ended::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(34, 34, 34, 0.6);
    pointer-events: none; /* 종료 카드도 상세 진입 가능 (터치 기기 상시 딤) */
  }
  .online-award-poster-status {
    display: inline-flex;   /* ≤1023 상시 노출(PC 기본 숨김 오버라이드) */
  }

  .online-award-flag-icon {
    width: 14px; /* 시안 MO 14 (badge-property-icon MO 규격) */
    height: 14px;
  }

  /* 감독명 포스터 오버레이 — 하단 딤 위 (신규 시안 627:67347: 18px #ddd) */
  .online-award-director {
    padding: 0 var(--spacing-16) var(--spacing-24);
    font-size: 18px;
    color: var(--color-gray-85); /* #ddd — 딤 위 보조 텍스트 */
  }

  .online-award-poster-dim {
    height: 95px; /* 시안 MO 하단 딤 95 (PC 224와 상이) */
  }

  .online-award-vote {
    height: 52px;
    padding: 0 var(--spacing-24);
    border-radius: 0 0 var(--radius-medium) var(--radius-medium);
    font-size: 15px; /* 시안 MO 15 (MO/Body 3/Bold) */
  }

  .online-carousel-nav {
    display: none; /* MO 시안은 인디케이터만 */
  }

  /* 투표 안내 — 헤드라인 밖 + 핑크 박스 2줄 전환 */
  .online-vote {
    padding: var(--spacing-80) var(--spacing-16) 0;
  }

  .online-vote-head {
    display: block;
    margin-bottom: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
  }

  .online-vote-tit {
    margin-bottom: var(--spacing-32);
  }

  .online-vote-period {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
    height: auto;
    margin-bottom: -2px; /* 아래 박스와 보더 겹침 (시안) */
    padding: var(--spacing-32) var(--spacing-24);
    border: 2px solid var(--color-gray-10);
    border-radius: var(--radius-large);
    background-color: var(--color-pink-60);
    font-size: 18px; /* 시안 MO 날짜 18 (body-3 MO 15와 상이 — 개별 지정) */
    color: var(--color-text-heading);
    white-space: normal;
  }

  .online-vote-period-label {
    font-size: 24px; /* 시안 MO/Title 1 (24 Bold) */
    font-weight: 700;
    line-height: 1.35;
  }

  .online-vote-period-label::after {
    content: none;
  }

  .online-vote-bullets {
    padding: var(--spacing-32) var(--spacing-24);
  }

  /* 시안 MO 불릿도 18px 유지 (body-3 MO 15와 상이 — 개별 지정, 627:67504~) — 도트 보정은 PC와 동일 -1 */
  .online-vote-bullet {
    font-size: 18px;
  }

  .online--original .fab-area,
  .online--awards .fab-area,
  .online--special .fab-area {
    margin-top: 0; /* MO 는 컴포넌트 pt48 로 흡수 */
  }
}

/* 온라인 탭 — 태블릿(768~1023)은 균등 세그먼트가 콘텐츠(px16)와 좌우 정렬되도록 인셋 부여
 * (MO(≤767)는 칩 tab-list가 px16을 공급하므로 위 ≤1023 규칙 padding:12 0 유지) */
@media (min-width: 768px) and (max-width: 1023px) {
  .online-tab {
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }
}

/* 온라인 2탭은 MO 에서 활성 여부와 무관하게 50/50 등분 (검수 2026-09-04)
 * — 컴포넌트 기본은 활성 칩 hug(about 4탭용)라 online 만 스코프 오버라이드 */
@media (max-width: 767px) {
  .online-tab .tab-list li,
  .online-tab .tab-list li:has(> .tab-link[aria-current]),
  .online-tab .tab-list li:has(> .tab-link.is-active) {
    flex: 1 1 0;
  }

  /* 등분 폭에서 활성 칩도 줄바꿈 허용해 두 칩 높이·표기 일관 */
  .online-tab .tab-link[aria-current],
  .online-tab .tab-link.is-active {
    white-space: normal;
  }
}

/* 오리지널 필름 — 탭 삭제(1depth 분리)로 히어로와 직접 만남: 상단 여백 보상 (협의값 PC 80 / MO 56 — 신규 시안 미제공) */
.online-intro--no-tab {
  padding-top: var(--spacing-80);
}

@media (max-width: 1023px) {
  .online-intro--no-tab {
    padding-top: 0;   /* MO 는 기존 margin-top 56 이 이미 간격 제공 */
  }
}