/*
 * FO 공동체 상영 (UC-5200 소개 · UC-5100 씨네아동권리학교) — CRFF-50
 * 시안: 내부_아동권리영화제 PC 1926:78413(UC-5200) · 1926:78907(UC-5100) / MO 1926:81494
 * 히어로 배경: 합성 SVG(레드 #ee3124 + 일러스트 + 딤) — outdoor 합성 PNG 방식 계승, CSS raw hex 없음 (2026-08-18 확정)
 */
.community {
  padding-bottom: var(--spacing-120);
}

/* 브레이크포인트별 줄바꿈 — 시안 PC/MO 줄바꿈 위치가 다른 텍스트용 (outdoor .outdoor-prog-title-br 관례 계승) */
.br-mo {
  display: none;
}

/* ── 히어로 (Figma PC_Sub_top 1926:78417) — 합성 배경 + 타이틀 ── */
.community-hero {
  padding: var(--spacing-56) var(--spacing-40);
}

.community-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 580px;
  padding: var(--spacing-56) var(--spacing-80);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xxlarge);
  background: url("../../images/community/hero-bg.svg") center / cover no-repeat;
  overflow: hidden;
}

.community-hero-headline {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-12);
}

.community-hero-title,
.community-hero-sub {
  color: var(--color-text-inverse);
}

/* ── 탭 (Figma tab_group 1926:78418 — WSG tab_large 세그먼트형)
 * ⚠️ components.css .tab(--bar/--chip)에 없는 변형 — 승격 질의 전 화면 스코프 운용 */
.community-tab {
  padding: var(--spacing-24) var(--spacing-48) var(--spacing-56);
}

.community-tab-list {
  display: flex;
  padding: var(--spacing-4);
  border-radius: var(--radius-medium);
  background-color: var(--color-background-section);
  list-style: none;
  margin: 0;
}

.community-tab-list li {
  flex: 1;
  min-width: 144px;
}

.community-tab-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: var(--spacing-6) var(--spacing-16);
  border-radius: var(--radius-medium);
  color: var(--color-text-body);
  text-decoration: none;
}

.community-tab-link[aria-current] {
  background-color: var(--color-gray-10);
  color: var(--color-text-inverse);
}

/* ── 소개 — 핑크 박스 (Figma 1926:78423 / 1926:78943)
 * 박스는 화면 전폭(풀블리드) + 내부 px40 — 이미지가 박스 안쪽 40 인셋, 텍스트는 +40 (시안 스크린샷 재검증 2026-08-18) ── */
.community-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);
}
/* 공동체 상영회 소개(community.html)만 소개 이미지 제거 → 박스 상하 대칭 패딩. 씨네아동권리학교(education)는 이미지 유지 (CRFF-211) */
.community--screening .community-intro-box {
  padding: var(--spacing-80) var(--spacing-40);
}

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

.community-intro-tit {
  flex: 1;
  color: var(--color-text-heading);
}

.community-intro-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-12);
  color: var(--color-text-heading);
}

/* 소개 이미지 (education 씨네아동권리학교에서 사용 — community.html 은 CRFF-211 로 제거) */
.community-intro-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;   /* 고정 640 → auto: 너비 축소 시 좌우 잘림 없이 전체 노출(비율 유지, 높이 가변) */
  border-radius: var(--radius-xxlarge);
  overflow: hidden;   /* 이미지를 라운드 코너로 클립 (CRFF-250) */
}

.community-intro-img picture {
  display: block;
  width: 100%;
  height: auto;
}

.community-intro-img img {
  display: block;   /* inline 이미지 하단 여백 제거 */
  width: 100%;
  height: auto;   /* 비율 유지 — 크롭 없이 전체 노출 */
}

/* ── 공통 섹션 리듬 — pt120 + 타이틀(+서브) + 콘텐츠 32 (Figma 1926:78434 등) ── */
.community-section {
  padding: var(--spacing-120) var(--spacing-40) 0;
}

.community-section--notice {
  padding-bottom: var(--spacing-120);
}

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

.community-section-titgroup {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.community-section-sub {
  color: var(--color-text-subtitle);
}

.community-section-tit + .community-steps,
.community-section-titgroup + .community-edu,
.community-section-tit + .community-films {
  margin-top: var(--spacing-32);
}

/* ── 신청 절차 — 5단계 카드 + 핑크 원형 화살표 (Figma 1926:78439) ── */
.community-steps {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.community-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);
}

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

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

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

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

.community-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);
}

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

/* ── 지원 내용/준비 사항 2열 (Figma 1926:78494·78512) ── */
.community-info-grid {
  display: flex;
  gap: var(--spacing-24);
  margin-top: var(--spacing-80);
}

.community-info-grid .community-board {
  flex: 1;
}

/* ── 보드 — 다크 타이틀바 + 회색 박스 (지원내용·유의사항 공통, Figma 1926:78596) ── */
.community-board-head {
  padding: var(--spacing-40);
  border-radius: var(--radius-large);
  background-color: var(--color-gray-10);
}

.community-board-head .type-title-1 {
  color: var(--color-text-inverse);
}

.community-board-body {
  padding: var(--spacing-40);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  background-color: var(--color-background-section);
}

.community-board-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  list-style: none;
  margin: 0;
  padding: 0;
}

.community-board-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.community-board-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-xsmall);
  background-color: var(--color-background);
  color: var(--color-text-heading);
}

.community-board-value {
  color: var(--color-text-body);
}

.community-board-bullets {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.community-board-bullet-dot {
  flex-shrink: 0;
  /* 도트 캔버스(29, 중심 14.5)가 body-3 첫 줄 중심(PC 13.5)보다 낮아 광학 보정 */
  margin-top: -1px;
}

/* ── 상영 가능 작품 캐러셀 (Figma 1926:78545) ── */
.community-films {
  position: relative;
}

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

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

.community-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); /* 시안 실측 18px — 바인딩 변수 spacing/16 채택 (Pass 2 보고) */
  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 라 고정폭 유지 (야외상영 동일) */
.community-films-carousel:not(.swiper-initialized) .community-films-list {
  gap: var(--spacing-24);
}
.community-films-carousel:not(.swiper-initialized) .community-films-card {
  width: auto;
  flex: 1;
  min-width: 0;
}
/* 정적일 땐 스와이프 컨트롤(화살표·인디케이터) 숨김 */
.community-films-carousel:not(.swiper-initialized) .community-carousel-nav {
  display: none;
}
.community-films-carousel:not(.swiper-initialized) ~ .community-films-pagination {
  display: none;
}

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

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

.community-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);
}

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

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

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

/* 제목+태그 그룹 — 제목 영역이 남는 높이를 차지해 감독·소개(txt)를 하단에 고정. 태그 없으면 제목만 남는다 */
.community-films-head {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8); /* 오리지널 필름 카드(.online-films-head)와 동일 */
}

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

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

.community-films-director {
  display: flex;
  align-items: center;
  gap: 10px; /* 시안 원값 — 스케일 외(8/12 사이), outdoor 감독행과 동일 관례 */
}

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

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

.community-films-desc {
  color: var(--color-text-body);
  /* 7줄 초과 시 말줄임(…) — 하단 패딩 80 복원과 카드 660 고정 양립 위해 10→7 (2026-09-30). 모바일은 아래 블록에서 3줄 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}

/* ── 캐러셀 좌우 화살표 — 80 원형 딤+블러 (Figma IconButton_80 1926:78591)
 * 시안 위치: 전폭 1920 기준 px64 = 콘텐츠(1840) 기준 24px 안쪽 */
.community-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;
}

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

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

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

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

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

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

/* ── 캐러셀 인디케이터 — active 32×8 바 + 8 도트, 간격 8 (Figma Indigator 1926:6417)
 * Swiper 기본 불릿 마진(4px)은 변수로 무력화 — 특이도 높은 번들 규칙이 margin:0 을 덮어써서 간격이 16 이 되는 문제 ── */
.community-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);
}

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

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

/* ── 교육 참여 안내 카드 3종 (Figma 1926:78959) ── */
.community-edu {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-24);
  list-style: none;
  margin: 0;
  padding: 0;
}

.community-edu-card {
  flex: 1;
  min-width: 128px;
  display: flex;
  flex-direction: column;
  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);
}

.community-edu-card--center {
  justify-content: center;
}

.community-edu-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  list-style: none;
  margin: 0;
  padding: 0;
}

.community-edu-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
}

.community-edu-row:first-child {
  align-items: center;
}

.community-edu-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: var(--radius-xsmall);
  color: var(--color-text-heading);
}

.community-edu-chip--plain {
  border: 1px solid var(--color-border);
  background-color: var(--color-background-section);
}

.community-edu-chip--offline {
  background-color: var(--color-pink-60);
}

.community-edu-chip--online {
  background-color: var(--color-blue-60);
}

.community-edu-value {
  color: var(--color-text-heading);
}

.community-edu-value-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.community-edu-note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  color: var(--color-text-body);
}

.community-edu-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
}

.community-edu-name {
  color: var(--color-text-heading);
}

.community-edu-desc {
  color: var(--color-text-body);
}

/* ── 교육 참여 후기 — 핑크 밴드 + 카드 캐러셀 (Figma 1926:79008) ── */
.community-reviews {
  padding: var(--spacing-120) var(--spacing-40) 0;
  /* 상단 보더 없음 — design context 의 border-t-2 는 실렌더에 없는 노이즈 (시안 스크린샷 재검증 2026-08-19) */
  border-radius: var(--radius-xxlarge) var(--radius-xxlarge) 0 0;
  background-color: var(--color-pink-60);
}

.community-reviews-titgroup {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.community-reviews-tit {
  color: var(--color-text-heading);
}

.community-reviews-sub {
  color: var(--color-text-subtitle);
}

.community-reviews-body {
  position: relative;
  margin-top: var(--spacing-32);
}

.community-reviews-carousel {
  overflow: hidden;
}

.community-reviews-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.community-reviews-card {
  width: 442px;
  height: 480px;
  flex-shrink: 0;
  padding: var(--spacing-16);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  background-color: var(--color-background);
  box-sizing: border-box;
}
/* 정적(≥1280·4장 이하 — Swiper 미활성): 4카드 가로 꽉 채움(442). 4장 초과/≤1279 는 Swiper 라 고정폭(442) 유지 (시안 627:55177, films 패턴 동일) */
.community-reviews-carousel:not(.swiper-initialized) .community-reviews-list {
  gap: var(--spacing-24);
}
.community-reviews-carousel:not(.swiper-initialized) .community-reviews-card {
  width: auto;
  flex: 1;
  min-width: 0;
}
/* 정적일 땐 스와이프 컨트롤(화살표·인디케이터) 숨김 */
.community-reviews-carousel:not(.swiper-initialized) .community-carousel-nav {
  display: none;
}
.community-reviews-carousel:not(.swiper-initialized) ~ .community-reviews-pagination {
  display: none;
}

.community-reviews-card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  height: 100%;
  padding: var(--spacing-24) var(--spacing-16);
}

.community-reviews-card-txt {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  overflow: hidden;
  color: var(--color-text-body);
}

/* 따옴표 색은 SVG 원본 fill #DDDDDD(gray-85 — 시안 원값, img 렌더라 CSS color 무효) */
.community-reviews-quote {
  flex-shrink: 0;
  width: 25px;
  height: 20px;
}

.community-reviews-name {
  color: var(--color-text-subtitle);
}

/* ── 하단 버튼 (Figma 1926:78605 / 1926:79023) ── */
.community-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-12);
}

.community-actions-button {
  width: 320px;
}

/* 핑크 밴드 내 버튼 (UC-5100) — 후기 캐러셀과 120 간격 */
.community-actions--in-band {
  margin-top: var(--spacing-120);
}

/* 핑크 밴드가 푸터까지 이어지는 페이지 (UC-5100 — 푸터 상단 여백·라운드 코너 뒤가 핑크, Figma 1926:79026 PC·1926:81745 MO)
 * 푸터 다크 박스의 상단 radius(40) 코너 컷 뒤로 흰 body 가 비치지 않도록,
 * 밴드를 radius 만큼 더 내리고 푸터를 같은 값만큼 겹쳐 올린다 (시각 간격 120 유지) */
.community.community--band-bottom {
  padding-bottom: 0; /* MO 블록의 .community pb 120 보다 뒤에 밀리지 않게 특이도 상향 */
}

.community--band-bottom .community-reviews {
  padding-bottom: calc(var(--spacing-120) + var(--radius-xlarge));
}

.community--band-bottom + .site-footer {
  margin-top: calc(-1 * var(--radius-xlarge));
}

/* ── Tablet (1024~1279px) — UC-5200 1024 변형(1926:78610) 실측 · 계획: claudedocs/crff50-community-tablet-plan.md
 * ⚠️ 컨벤션 예외: 태블릿 밴드는 outdoor(CRFF-48)에 이은 두 번째 도입 — community 계열 2개 파일 국한 (사용자 승인 2026-08-18)
 * base(≥1280)·MO(≤1023) 무손상 — 델타만 기술 ── */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* 히어로 — 시안 1024 inner 좌우 패딩 40 (base 80과 상이, headline x82 실측) */
  .community-hero-inner {
    padding: var(--spacing-56) var(--spacing-40);
  }

  /* 신청 절차 — 3열×2행 재배치 (시안 list1 274 + 행간 64 + list2 293)
   * 마크업(카드/화살표 교차 9개)이 6컬럼 grid auto-flow 로 시안 배치와 일치:
   * 행1 [카드,→,카드,→,카드,→(행끝)] / 행2 [카드,→,카드] */
  .community-steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto;
    align-items: stretch;
    column-gap: var(--spacing-16);
    row-gap: var(--spacing-64);
  }

  .community-steps-arrow {
    align-self: center;
  }

  /* 카드 설명의 1920 기준 <br> 는 좁은 폭에서 자연 줄바꿈과 겹침 — 시안 1024 는 자연 흐름 재배치 */
  .community-steps-desc br {
    display: none;
  }

  /* 후기 카드는 태블릿(스와이퍼)에서 고정폭 349 유지 (PC 442는 4장 채움 전용) */
  .community-reviews-card {
    width: 349px;
  }
}

/* ── Mobile (≤1023px) — MO 시안 1926:81494 실측
 * 타이포는 .type-* MO 자동 전환이 기본, 시안이 유틸 짝과 다른 곳만 개별 override(주석 표기) ── */
@media (max-width: 1023px) {
  .community {
    padding-bottom: var(--spacing-120);
  }

  .br-pc {
    display: none;
  }

  .br-mo {
    display: inline;
  }

  /* MO body-3 는 15px(lh 22.5) — 도트(중심 14.5) 어긋남이 커져 보정 확대 */
  .community-board-bullet-dot {
    margin-top: -3px;
  }

  /* 히어로 (MO_Sub_top 1926:81500) — 중앙 정렬 + 그라디언트 딤 + MO 일러스트 */
  .community-hero {
    padding: var(--spacing-16);
  }

  .community-hero-inner {
    justify-content: center;
    height: auto;
    min-height: 280px;
    padding: 0 var(--spacing-16);
    border-radius: var(--radius-large);
    background-image: url("../../images/community/hero-bg-mo.svg"); /* MO 합성(그라디언트 딤 포함) */
    background-position: top center;
  }

  .community-hero-headline {
    align-items: center;
    width: 100%;
    padding: var(--spacing-80) 0;
    gap: var(--spacing-8);
    text-align: center;
    filter: drop-shadow(0 4px 50px rgba(0, 0, 0, 0.25)); /* 시안 원값 */
  }

  .community-hero-title {
    font-size: 32px; /* 시안 MO 32 — display-2 는 MO 미대응 스케일이라 개별 지정 */
  }

  .community-hero-sub {
    font-size: 16px; /* 시안 MO 16 (body-1 MO 18과 상이 — 개별 지정) */
  }

  /* 탭 — 칩형 전환 (tab_MO 1926:81502) */
  .community-tab {
    padding: var(--spacing-12) var(--spacing-16);
  }

  .community-tab-list {
    gap: var(--spacing-8);
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .community-tab-list li {
    min-width: 72px;
  }

  .community-tab-link {
    height: 52px;
    padding: var(--spacing-8) var(--spacing-20);
    border: 1px solid var(--color-border-button);
    border-radius: var(--radius-full);
    background-color: var(--color-background-section);
    font-size: 14px; /* 시안 MO 14 (body-2-bold MO 16과 상이 — 개별 지정) */
  }

  .community-tab-link[aria-current] {
    border-color: var(--color-gray-10);
  }

  /* 소개 (1926:81513) — full-bleed 박스(px16) + 센터 정렬 세로 적층 (MO 는 head 추가 패딩 없음)
   * 탭 아래 간격: MO 시안은 content 상단 56 별도 (PC 는 탭 pb56 에 포함) */
  .community-intro {
    margin-top: var(--spacing-56);
  }

  .community-intro-box {
    padding: var(--spacing-80) var(--spacing-16) var(--spacing-40);
    gap: var(--spacing-40);
  }
  /* community.html 만 이미지 제거 → 상하 대칭 56 (시안 627:56937 py-56) */
  .community--screening .community-intro-box {
    padding: var(--spacing-56) var(--spacing-16);
  }

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

  .community-intro-tit {
    font-size: 44px; /* 시안 MO 44/1.2 (display-2 MO 미대응 — 개별 지정) */
    line-height: 1.2;
  }

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

  .community-intro-img {
    height: auto;   /* 모바일·태블릿: 세로 이미지 전체 노출 (고정높이 제거, CRFF-250) */
    border-radius: var(--radius-xlarge);
  }
  /* picture 도 height:100%(PC용) 해제 → 컨테이너가 이미지보다 커져 상하 어긋남/하단 잘림 방지 */
  .community-intro-img picture {
    height: auto;
  }
  .community-intro-img img {
    height: auto;
    display: block;   /* inline 이미지 하단 여백 제거 */
  }

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

  .community-section--notice {
    padding-bottom: var(--spacing-80);
  }

  /* 신청 절차 (1926:81524) — 세로 스택 + 화살표 회전·오버랩 */
  .community-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

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

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

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

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

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

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

  /* 지원/준비 (1926:81582) — 세로 스택, 칩 위·값 아래 */
  .community-info-grid {
    flex-direction: column;
    margin-top: var(--spacing-80);
  }

  .community-board-head {
    padding: var(--spacing-32) var(--spacing-24);
  }

  .community-board-body {
    padding: var(--spacing-32) var(--spacing-24);
  }

  .community-board-rows {
    gap: var(--spacing-24);
  }

  .community-board-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* 상영작 (1926:81633) — 세로형 카드 캐러셀(peek), 화살표 미노출
   * peek 는 풀블리드(마이너스 마진+내부 패딩)로 구현 — overflow visible 은 문서 가로 스크롤을 유발 (정밀대조 수정) */
  .community-films-carousel {
    margin: 0 calc(-1 * var(--spacing-16));
    padding: 0 var(--spacing-16);
  }

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

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

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

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

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

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

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

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

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

  .community-films-director {
    gap: var(--spacing-4);
  }

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

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

  .community-films-desc {
    font-size: 14px; /* 시안 MO 14 */
    line-height: 1.5; /* 시안 desc lh1.5 — 3줄 고정높이 계산 기준 */
    color: var(--color-text-secondary); /* 시안 MO desc #6e6e6e (PC #555과 상이) */
    /* 최대 3줄 표시 후 말줄임 + 3줄 고정높이로 카드 높이 균일 (CRFF-250, 시안 627:57060) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: calc(3 * 1.5em); /* 14px × lh1.5 × 3줄 = 63px */
    overflow: hidden;
  }

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

  /* 교육 참여 안내 — 세로 스택 (1926:81682) */
  .community-edu {
    flex-direction: column;
    gap: var(--spacing-16);
  }

  /* MO 정보 카드 행: 칩 위 · 텍스트 아래 좌측정렬 (627:57111/57115) */
  .community-edu-row,
  .community-edu-row:first-child {
    flex-direction: column;
    align-items: flex-start;
  }

  .community-edu-chip--plain {
    border: none; /* MO 칩은 배경만 (시안) */
  }

  .community-edu-value {
    font-weight: 700; /* MO 값 Bold 승격 (시안) */
  }

  /* 교육 참여 후기 (1926:81726) */
  .community-reviews {
    padding: var(--spacing-80) 0 0;
    border-radius: var(--radius-xlarge) var(--radius-xlarge) 0 0;
  }

  .community-reviews-titgroup {
    padding: 0 var(--spacing-16);
    gap: var(--spacing-12);
  }

  .community-reviews-body {
    padding: 0 var(--spacing-16);
  }

  .community-reviews-carousel {
    margin: 0 calc(-1 * var(--spacing-16));
    padding: 0 var(--spacing-16);
  }

  .community-reviews-card {
    width: 349px; /* MO 스와이퍼 고정폭 (PC 442는 4장 채움 전용) */
    height: 510px;
  }

  .community-reviews-card-inner {
    padding: var(--spacing-16);
  }

  .community-reviews-card-txt {
    gap: var(--spacing-8);
    font-size: 15px; /* 시안 MO 15 (body-4-regular MO 14와 상이 — 개별 지정) */
  }

  .community-reviews-card-txt .type-body-4-regular {
    font-size: 15px;
  }

  .community-reviews-quote {
    width: 20px;
    height: 16px;
  }

  .community-reviews-name {
    font-size: 15px; /* 시안 MO 15 */
  }

  /* 하단 버튼 — MO 는 WSG Large 규격(h52·15·px24, 시안 GeneralButton MO) */
  .community-actions {
    padding: 0 var(--spacing-16);
  }

  .community-actions-button {
    flex: 1;
    width: auto;
    height: 52px;
    min-width: 124px;
    padding: 0 var(--spacing-24);
    font-size: 15px;
  }

  .community-actions--in-band {
    margin-top: var(--spacing-56);
  }
}