/* ============================================
 * FO 소개 — CRFF 소개 (IN-2100, CRFF-54)
 * 시안: 공유_아동권리영화제 PC 969:71767 / 태블릿 627:76265 / 모바일 627:80054
 * 반응형: 기본 PC → 1023px 모바일. 숫자 알약 수치만 1279px 이하 축소(1024 태블릿 시안 근거)
 * ============================================ */

/* 반응형 개행 유틸 (페이지 스코프 관례 — community.css 동일 패턴) */
.br-mo {
  display: none;
}

/* 본문 끝 ↔ 푸터 120 (community·notice 채널 공통 관례 — 시안은 flush 였으나 채널 표준 적용) */
.about-page {
  padding-bottom: var(--spacing-120);
}

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

/* ── 채널 탭 (Figma 969:71783 — notice-tabs 동일 값) ── */
.about-tabs {
  padding: var(--spacing-24) var(--spacing-40) var(--spacing-56);
}

/* ── 핑크 인트로 (Figma 969:71788) ── */
.about-intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-56);
  padding: var(--spacing-120) var(--spacing-40) var(--spacing-80);
  background-color: var(--color-pink-60);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xxlarge);
}

.about-intro-head {
  display: flex;
  align-items: flex-start;   /* 타이틀 상단정렬 (설명 텍스트 첫 줄과 맞춤) */
  gap: var(--spacing-24);
  padding: 0 var(--spacing-40);
}

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

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

.about-intro-txt p {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-heading);
}

.about-intro-img {
  height: 640px;
  border-radius: var(--radius-xxlarge);
  overflow: hidden;
  background-color: var(--color-gray-10);
}

.about-intro-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 슬로건 포스터 — 빨강 배경(#ff0d01, 시안 969:71455 브랜드 레드·팔레트 외)에 포스터 전체(contain) 중앙 노출.
   PC 가로 / MO 세로 이미지 <picture> 분기 */
.about-intro--slogan .about-intro-img {
  background-color: #ff0d01;
}
.about-intro--slogan .about-intro-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.about-intro--slogan .about-intro-img img {
  object-fit: contain;
}

/* ── 섹션 공통 (Figma 969:71800/71824/71841 — pt120·좌우40·타이틀 그룹 gap32) ── */
.about-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  padding: var(--spacing-120) var(--spacing-40) 0;
}

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

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

.about-section-desc {
  font-size: 18px;
  line-height: 1.33;
  color: var(--color-gray-20);
}

/* ── 아동권리영화제 소개 — 로고 카드 + 텍스트 카드 (Figma 969:71808, 보더 2px 겹침) ── */
.about-summary-group {
  display: flex;
}

.about-summary-logo {
  flex: 0 1 587px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  padding: var(--spacing-32) var(--spacing-80);
  background-color: var(--color-background);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
}

.about-summary-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: -2px;
  padding: var(--spacing-32) var(--spacing-56);
  background-color: var(--color-background-section);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.1px; /* 시안 969:72000 tracking -0.1px — 문장당 1줄(총 4줄) 유지 (자간 누락 시 문장2가 박스폭 넘쳐 8줄) */
  color: var(--color-text-heading);
}

/* ── 숫자로 보는 아동권리영화제 — 알약 4개 (Figma 969:71828, 인접 배치) ── */
.about-stats-list {
  display: flex;
  list-style: none;
}

.about-stats-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
  padding: var(--spacing-64) var(--spacing-32);
  background-color: var(--color-background);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-full);
  text-align: center;
}

.about-stats-num {
  color: var(--color-text-heading);
}

.about-stats-label {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-heading);
}

/* 1024~1279 — 태블릿 1024 시안 반영: 알약 숫자 축소(30/40) + 소개 로고·텍스트 세로 스택 */
@media (max-width: 1279px) {
  .about-stats-num {
    font-size: 30px;
  }

  .about-summary-group {
    flex-direction: column;
    gap: var(--spacing-24);
  }

  .about-summary-logo {
    flex: none;
  }

  .about-summary-logo img {
    width: 320px;
    height: 60px;
  }

  .about-summary-txt {
    margin-left: 0;
    padding: 0 var(--spacing-16);
    background: none;
    border: none;
    border-radius: 0;
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-body);
  }
}

/* ── 주요 프로그램 — 2×2 카드 + 타원 장식 (Figma 969:71845) ── */
.about-programs-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-24);
  list-style: none;
}

.about-programs-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 606px;
  padding: var(--spacing-40);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  overflow: hidden;
}

/* 카드 타원 장식 — 시안은 908×606 고정 타원을 박스가 잘라 보여주는 구조 (PC 1920 박스=908이라 내접처럼 보일 뿐).
 * 핑크: 좌측 기준 타원 1개(969:71845·627:76371) / 그린: 좌 -454 · 우 +454 타원 2개(627:76376) */
.about-programs-box--pink {
  background-color: var(--color-pink-60);
}

.about-programs-box--pink::before {
  content: "";
  position: absolute;
  inset: 0;   /* 박스에 내접(폭에 맞춰 스케일) — 고정 908 제거로 1920 외 폭 깨짐 방지 (CRFF-109) */
  border-radius: 50%;
  background-color: var(--color-yellow-20);
}

.about-programs-box--green {
  background-color: var(--color-green-60);
}

.about-programs-box--green::before,
.about-programs-box--green::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;   /* 박스 폭 기준(고정 908 제거) — 좌우 반타원이 중앙에서 만나는 보타이, 모든 폭에서 정합 (CRFF-109) */
  border-radius: 50%;
  background-color: var(--color-purple-60);
}

.about-programs-box--green::before {
  left: -50%;
}

.about-programs-box--green::after {
  left: 50%;
}

.about-programs-txt {
  position: relative;
  z-index: 1; /* 그린 카드 우측 타원(::after)이 DOM 후순서로 텍스트를 덮는 것 방지 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  text-align: center;
}

.about-programs-name {
  color: var(--color-text-heading);
  white-space: nowrap; /* 시안: 제목은 한 줄 고정(카드 패딩 영역까지 허용) */
}

.about-programs-desc {
  color: var(--color-text-heading);
  word-break: keep-all; /* 좁은 카드에서 단어 중간 분리 방지 */
}

/* 태블릿(768~1023) — 카드·타원 모두 태블릿 시안(627:76365) 값 그대로(h606·타원 908 고정 = 기본 규칙 승계).
 * 제목만 좁은 폭 클리핑 가드: '씨네아동권리학교'(56px≈393px)가 카드 폭을 넘는 ~965px 이하에서 유동 축소 */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-programs-name {
    font-size: min(56px, 5.8vw);
  }
}

/* ============================================
 * 모바일 (~1023px) — 시안 627:80054
 * ============================================ */
@media (max-width: 1023px) {
  .br-mo {
    display: inline;
  }

  .br-pc {
    display: none;
  }

  /* 핑크 인트로 — 상단 40 이격 + 내부 축소, 세로 스택 (Figma 627:80063) */
  .about-intro {
    gap: var(--spacing-40);
    margin-top: var(--spacing-40);
    padding: var(--spacing-80) var(--spacing-16) var(--spacing-40);
  }

  .about-intro-head {
    flex-direction: column;
    align-items: center;   /* MO 는 세로 스택·중앙 유지 (PC 상단정렬 오버라이드) */
    gap: var(--spacing-24);
    padding: 0;
    text-align: center;
  }

  .about-intro-tit {
    font-size: 44px;
    line-height: 1.2;
  }

  .about-intro-txt {
    text-align: center;
  }

  .about-intro-txt p {
    font-size: 18px;
  }

  .about-intro-img {
    height: 480px;
    border-radius: var(--radius-xlarge);
  }

  .about-section {
    gap: var(--spacing-32);
    padding: var(--spacing-80) var(--spacing-16) 0;
  }

  .about-section-head {
    gap: var(--spacing-12);
  }

  .about-section-desc {
    line-height: 1.5;
  }

  /* 소개 — 스택·플레인 텍스트는 1279 블록에서 처리, 모바일은 로고 축소만 (Figma 627:80162) */
  .about-summary-logo {
    padding: var(--spacing-32);
  }

  .about-summary-logo img {
    width: 256px;
    height: auto;   /* 전역 img max-width:100% 로 좁은 폭(320~350)에서 width 가 캡될 때 height 도 비례 축소 — 가로 눌림 방지 (CRFF-427) */
    max-width: 100%;
  }

  .about-summary-txt {
    padding: 0;
  }

  /* 숫자 — 세로 스택, 보더 2px 겹침 (Figma 627:80081 gap -2) */
  .about-stats-list {
    flex-direction: column;
  }

  .about-stats-box {
    padding: var(--spacing-64) var(--spacing-32);
  }

  .about-stats-box + .about-stats-box {
    margin-top: -2px;
  }

  .about-stats-label {
    font-size: 18px;
  }

}

/* ── 채널 탭 모바일 (~767px) — 태블릿(768~1023)은 시안 tab_group(627:76331) 균등 세그먼트 유지 ──
 * 시안 tab_MO(627:80061)는 등분이 아니라 내용 폭(hug) + 가로 스크롤.
 * 공통 컴포넌트의 등분(flex:1) 기본을 무효화 (notice 채널과 반대 방향 오버라이드) */
@media (max-width: 767px) {
  .about-tabs {
    padding: var(--spacing-12) 0;
  }

  .about-tabs .tab--segment .tab-list li {
    flex: 0 0 auto;
  }

  /* 중앙정렬 — 칩이 폭에 다 들어오면 가운데, 넘치면 auto 마진이 0으로 접혀 스크롤 시작점 유지 */
  .about-tabs .tab--segment .tab-list li:first-child {
    margin-left: auto;
  }

  .about-tabs .tab--segment .tab-list li:last-child {
    margin-right: auto;
  }

  .about-tabs .tab--segment .tab-link {
    white-space: nowrap;
  }

  /* 프로그램 — 1열 스택 + 축소 카드 (Figma 627:80129) */
  .about-programs-list {
    grid-template-columns: 1fr;
  }

  .about-programs-box {
    height: 320px;
  }

  .about-programs-txt {
    gap: var(--spacing-8);
  }

  .about-programs-name {
    font-size: 30px;
    line-height: 1.35;
  }

  .about-programs-desc {
    color: var(--color-gray-20);
  }
}

/* ============================================
 * CRFF 2026 (IN-2200) — 시안 PC 969:71393 / MO 627:80179
 * ============================================ */

/* ── 슬로건 섹션 — 핑크(.about-intro 재사용) 뒤 검정 래퍼: 하단 라운드 코너 밖을 다음 검정 밴드와 잇는다 ── */
.about-slogan-wrap {
  background-color: var(--color-gray-10);
  border-radius: var(--radius-xxlarge) var(--radius-xxlarge) 0 0;
}

.about-intro-media {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

/* 슬로건 이미지 — 시안 placeholder(검정 박스 + '이미지' 라벨) 상태 */
.about-intro-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-intro-img-label {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.33;
  color: var(--color-text-inverse);
}

.about-intro-caption {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--color-text-heading);
}

/* ── 캠페인 영상 — 검정 풀블리드 밴드 (Figma 969:71459 — 상하 55 = (800-690)/2) ── */
.about-movie {
  display: flex;
  justify-content: center;
  padding: 55px var(--spacing-40);
  background-color: var(--color-gray-10);
}

.about-movie-frame {
  width: 100%;
  max-width: 1220px;
  aspect-ratio: 16 / 9;   /* IN-2200 §2 영상 플레이어 16:9 비율 */
  border-radius: var(--radius-large);
  overflow: hidden;
}

.about-movie-frame img,
.about-movie-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── 주요 프로그램 — 야외/온라인 2그룹 (Figma 969:71563, 타이틀바-박스 보더 2px 겹침) ── */
.about-shows-list {
  display: flex;
  gap: var(--spacing-24);
  list-style: none;
}

.about-shows-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.about-shows-name {
  padding: var(--spacing-40);
  background-color: var(--color-yellow-20);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  color: var(--color-text-heading);
}

.about-shows-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  margin-top: -2px;
  padding: var(--spacing-40);
  background-color: var(--color-background);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
}

.about-shows-desc {
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-body);
}

.about-shows-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  /* 기간·장소 정보를 박스 하단 정렬 — desc 길이 달라도 양 박스 info 가 바닥에 맞음 (Figma 969:71559, CRFF-211) */
  margin-top: auto;
}

.about-shows-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  list-style: none;
}

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

.about-shows-subject {
  flex-shrink: 0;   /* 날짜가 길어도 '기간' 칩이 압축돼 세로로 깨지지 않게 (시안 969:72655) */
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-xsmall);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--color-text-heading);
}

.about-shows-value {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;   /* 날짜 한 줄 유지 (시안 969:72657) */
  color: var(--color-text-body);
}

/* 370px 미만 초협폭: 한 줄이 안 들어가므로 날짜만 줄바꿈 허용 (칩은 nowrap 유지) */
@media (max-width: 369px) {
  .about-shows-value {
    white-space: normal;
  }
}

.about-shows-note {
  position: relative;
  padding-left: 7px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-body);
}

.about-shows-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10.5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
}

/* ── 캠페인 대사 — 2카드, 인용 고정높이 스크롤 (Figma 969:71610) ── */
.about-quotes-carousel {
  width: 100%;   /* swiper 기본 margin:auto 가 flex stretch 를 무효화(내용폭 확장) — 컨테이너 폭 고정 */
}

.about-quotes-list {
  display: flex;
  gap: var(--spacing-24);
  list-style: none;
}

.about-quotes-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  min-width: 0;
  padding: var(--spacing-32) var(--spacing-56) var(--spacing-40) var(--spacing-32);
  background-color: var(--color-background-section);
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-large);
}

.about-quotes-photo {
  flex-shrink: 0;
}

.about-quotes-photo img {
  display: block;
  width: 140px;
  height: 208px;
}

.about-quotes-txtgroup {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.about-quotes-person {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.about-quotes-person-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
}

.about-quotes-person-role {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* 인용 본문 — 시안 고정 높이 + 세로 스크롤(커스텀 4px thumb).
 * thumb는 본문 우측이 아니라 카드 우측 패딩 구역(-8px 지점)에 배치(시안 969:71626 x896):
 * 스크롤 영역을 패딩 안으로 48 확장(656→704) + 본문은 padding-right 44로 원위치(끝 852) */
.about-quotes-txt {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  width: calc(100% + 48px);
  max-height: 152px; /* 고정 height → max-height: 짧은 인용문은 내용만큼만 차지해 align-items:center 로 텍스트가 세로 가운데. 긴 글은 152px 스크롤 유지 */
  padding-right: 44px;
  overflow-y: auto;
}

.about-quotes-txt::-webkit-scrollbar {
  width: 4px;
}

.about-quotes-txt::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background-color: var(--color-scrollbar-thumb);
}

.about-quotes-highlight {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-body);
}

.about-quotes-quote {
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.about-quotes-pagination {
  display: none;   /* PC 정적 2카드 — 캐러셀은 MO 전용 */
}

/* ── CRFF 2026 모바일 (~1023px) ── */
@media (max-width: 1023px) {
  .about-slogan-wrap {
    margin-top: var(--spacing-40);
  }

  .about-intro--slogan {
    margin-top: 0;
  }

  .about-intro-caption {
    font-size: 18px;
  }

  .about-movie {
    padding: var(--spacing-80) var(--spacing-16);
  }

  .about-movie-frame {
    border-radius: var(--radius-small);
  }

  /* 프로그램 — MO 시안(627:80202)은 섹션 타이틀 미노출, 영상 밴드↔그룹 56 */
  .about-shows {
    padding: var(--spacing-56) var(--spacing-16) 0;
  }

  .about-shows .about-section-tit {
    display: none;
  }

  .about-shows-list {
    flex-direction: column;
    gap: var(--spacing-48);
  }

  .about-shows-name {
    padding: var(--spacing-32) var(--spacing-24);
  }

  .about-shows-box {
    gap: var(--spacing-32);
    padding: var(--spacing-32) var(--spacing-24);
  }

  .about-shows-desc {
    font-size: 16px;
  }

  .about-shows-rows {
    gap: var(--spacing-8);
  }

  .about-shows-subject,
  .about-shows-value {
    font-size: 15px;
    line-height: 1.47;
  }

  .about-shows-note {
    font-size: 14px;
    color: var(--color-gray-60);
  }

  .about-shows-note::before {
    top: 9px;
  }

  /* 캠페인 대사 — MO 캐러셀 (Figma 627:80256, footer 위 총 200 = 섹션 pb80 + 페이지 pb120) */
  .about-quotes {
    padding: var(--spacing-80) var(--spacing-16);
  }

  .about-quotes-carousel {
    overflow: hidden;
  }

  .about-quotes-list {
    gap: 0;   /* 캐러셀 간격은 Swiper spaceBetween(16) */
  }

  .about-quotes-box {
    flex: none;
    width: 297px;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-24);
    padding: var(--spacing-32) var(--spacing-24) var(--spacing-40);
  }

  .about-quotes-txtgroup {
    width: 100%;
  }

  /* MO 시안(627:80598): thumb 6px, 카드 우측 -8px(x283) — 확장 16(249→265) + 본문 padding-right 10 */
  .about-quotes-txt {
    width: calc(100% + 16px);
    max-height: none; /* MO는 세로 스택이라 고정높이 유지 (base의 max-height 상속 차단) */
    height: 180px;
    padding-right: 10px;
  }

  .about-quotes-txt::-webkit-scrollbar {
    width: 6px;
  }

  .about-quotes-highlight {
    font-weight: 600;
  }

  .about-quotes-highlight,
  .about-quotes-quote {
    font-size: 15px;
    line-height: 1.47;
  }

  .about-quotes-pagination {
    --swiper-pagination-bullet-horizontal-gap: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-8);
    margin-top: var(--spacing-32);
  }

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

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

/* ============================================
 * 출품안내 (IN-2400) — 시안 PC 627:76548 / MO 627:80442 / 혜택 축소 변형 627:80659
 * ============================================ */

/* ── 핑크 인트로 변형 — 하단 120·내부 간격 80 (Figma 627:76558) ── */
.about-intro--entry {
  gap: var(--spacing-80);
  padding-bottom: var(--spacing-120);
}

/* ── 출품 혜택 4카드 (Figma 627:76567) ── */
.entry-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.entry-benefits-list {
  display: flex;
  gap: var(--spacing-24);
  list-style: none;
}

.entry-benefits-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  padding: var(--spacing-40) var(--spacing-32);
  background-color: var(--color-background);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xlarge);
  color: var(--color-gray-10);
}

.entry-benefits-icon {
  width: 48px;
  height: 48px;
}

.entry-benefits-txt {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  text-align: center;
}

.entry-benefits-name {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.35;
  color: var(--color-text-heading);
}

.entry-benefits-desc {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-body);
}

.entry-benefits-note {
  position: relative;
  padding-left: 12px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-body);
}

.entry-benefits-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
}

/* ── 심사 프로세스 — STEP 알약 + 화살표 (Figma 627:76630) ── */
.entry-steps-list {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-24);
  list-style: none;
}

.entry-steps-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: var(--spacing-56) var(--spacing-32);
  background-color: var(--color-background);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-full);
  text-align: center;
}

.entry-steps-step {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-cta);
}

.entry-steps-name {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.35;
  color: var(--color-text-heading);
  word-break: keep-all;
}

.entry-steps-arrow {
  flex: none;
  align-self: center;
}

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

.entry-steps-arrow-icon {
  width: 16px;
  height: 16px;
  --icon: url('/images/icon/func-paginationNext.svg');
}

/* ── 심사기준 — 번호 + 텍스트 5행, 보더 2px 겹침 (Figma 627:76658) ── */
.entry-criteria-table {
  list-style: none;
}

.entry-criteria-row {
  display: flex;
  align-items: stretch;
}

.entry-criteria-row + .entry-criteria-row {
  margin-top: -2px;
}

.entry-criteria-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 102px;
  background-color: var(--color-pink-60);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.35;
  color: var(--color-text-heading);
}

.entry-criteria-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: -2px;
  min-height: 96px;
  padding: var(--spacing-32) var(--spacing-56);
  background-color: var(--color-background-section);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.33;
  color: var(--color-text-heading);
}

/* ── 심사위원 — 예선/본선 아코디언 (Figma 627:76693) ── */
.entry-judges-groups {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-80);
}

.entry-judges-group {
  display: flex;
  gap: var(--spacing-16);
  align-items: flex-start;
}

.entry-judges-label-group {
  flex: none;
  width: 256px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.entry-judges-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.35;
  color: var(--color-text-heading);
}

.entry-judges-label--preliminary {
  background-color: var(--color-yellow-60);
}

.entry-judges-label--final {
  background-color: var(--color-pink-60);
}

.entry-judges-label--child {
  background-color: var(--color-blue-60);
}

.entry-judges-note {
  position: relative;
  padding-left: 12px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-text-body);
}

.entry-judges-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
}

.entry-judges-cards {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
  list-style: none;
}

.entry-judges-card {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-20) var(--spacing-32);
  background-color: var(--color-background-section);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
}

.entry-judges-card.is-open {
  padding: var(--spacing-20) var(--spacing-24) var(--spacing-32);
}

.entry-judges-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
}

.entry-judges-card.is-open .entry-judges-head {
  padding-bottom: var(--spacing-24);
}

.entry-judges-photo {
  flex-shrink: 0;
  display: block;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background-color: var(--color-background);
  overflow: hidden;
}

.entry-judges-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry-judges-photo--shift img {
  transform: translate(0, 0) scale(1.2);
}

.entry-judges-person {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.entry-judges-person-name {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.33;
  color: var(--color-text-heading);
}

.entry-judges-person-role {
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text-body);
}

.entry-judges-toggle {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-10);
  color: var(--color-text-inverse);
  cursor: pointer;
}

.entry-judges-toggle-icon {
  width: 32px;
  height: 32px;
  --icon: url('/images/icon/func-down.svg');
  transition: transform 0.2s ease;
}

.entry-judges-card.is-open .entry-judges-toggle-icon {
  transform: rotate(180deg);
}

.entry-judges-body {
  display: none;
}

.entry-judges-card.is-open .entry-judges-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: 0 var(--spacing-8);
}

.entry-judges-career {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-body);
}

/* 심사총평 라벨 (시안 627:76689 body head) */
.entry-judges-review-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
}

/* 심사총평 본문 — 내용 길 때 내부 스크롤 (설계서 v0.99: "펼친 후 평가 내용 많을 시 내부 스크롤") */
.entry-judges-comment {
  max-height: 240px;
  overflow-y: auto;
  padding-right: var(--spacing-8);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-body);
}

.entry-judges-comment::-webkit-scrollbar {
  width: 6px;
}

.entry-judges-comment::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background-color: var(--color-border);
}

/* ── 예선 심사위원 — 펼침 시 경력을 사진 옆(head)에 배치 (시안 2064:33633) ── */
.entry-judges-group--preliminary .entry-judges-career {
  display: none;
  font-weight: 400;
}
.entry-judges-group--preliminary .entry-judges-card.is-open .entry-judges-career {
  display: block;
}

/* 예선 펼침 카드 — 박스 최대 495px, 초과 시 본문 스크롤 (시안 2064:33633 = 495 / 2568:30032 스크롤 케이스) */
@media (min-width: 1024px) {
  .entry-judges-group--preliminary .entry-judges-career {
    font-size: 20px;
  }
  .entry-judges-group--preliminary .entry-judges-review-label {
    font-size: 18px;
    font-weight: 600;
  }
  .entry-judges-group--preliminary .entry-judges-card.is-open {
    display: flex;
    flex-direction: column;
    max-height: 495px;
  }
  .entry-judges-group--preliminary .entry-judges-card.is-open .entry-judges-head {
    flex-shrink: 0;
    align-items: flex-start;
    padding-bottom: var(--spacing-20);
  }
  .entry-judges-group--preliminary .entry-judges-card.is-open .entry-judges-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  /* 본문(심사총평+총평)이 통째로 스크롤 — 개별 comment 스크롤 해제 */
  .entry-judges-group--preliminary .entry-judges-card.is-open .entry-judges-comment {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .entry-judges-group--preliminary .entry-judges-card.is-open .entry-judges-body::-webkit-scrollbar {
    width: 6px;
  }
  .entry-judges-group--preliminary .entry-judges-card.is-open .entry-judges-body::-webkit-scrollbar-thumb {
    border-radius: var(--radius-full);
    background-color: var(--color-border);
  }
}

/* ── 출품작 촬영 가이드 (Figma 627:76713 — 상단 80, 다른 섹션과 다름) ── */
.entry-guides {
  padding-top: var(--spacing-80);
}

.entry-guides-list {
  display: flex;
  gap: var(--spacing-16);
  list-style: none;
}

.entry-guides-box {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name   button"
    "desc   button";
  align-items: center;
  column-gap: var(--spacing-40);
  row-gap: var(--spacing-8);
  padding: var(--spacing-40);
  background-color: var(--color-background);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
}

.entry-guides-name {
  grid-area: name;
  min-width: 0;
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.35;
  color: var(--color-text-heading);
}

.entry-guides-desc {
  grid-area: desc;
  min-width: 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text-heading);
}

.entry-guides-box > .button {
  grid-area: button;
}

/* ── 출품하기 배너 (Figma 627:76728) ── */
.entry-apply {
  padding: var(--spacing-80) var(--spacing-40) 0;
}

.entry-apply-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-40);
  padding: var(--spacing-40);
  background-color: var(--color-yellow-60);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
}

.entry-apply-txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.entry-apply-name {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.35;
  color: var(--color-text-heading);
}

.entry-apply-desc {
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text-heading);
}

.entry-apply-btns {
  flex-shrink: 0;
  display: flex;
  gap: var(--spacing-8);
}

/* ── 출품안내 — 1440 미만: 혜택 카드 축소 (시안 'full' 627:80659 — 1305 변형) ── */
@media (max-width: 1439px) {
  .entry-benefits-list {
    gap: var(--spacing-16);
  }

  .entry-benefits-box {
    padding: var(--spacing-40) var(--spacing-24);
  }

  .entry-benefits-name {
    font-size: 24px;
  }

  .entry-benefits-desc {
    font-size: 16px;
  }
}

/* ── 출품안내 모바일 (~1023px) — 시안 627:80442 ── */
@media (max-width: 1023px) {
  /* 인트로 — MO 는 채널 기본(pt80·pb40·gap40)으로 복귀 */
  .about-intro--entry {
    gap: var(--spacing-40);
    padding-bottom: var(--spacing-40);
  }

  /* 혜택 — 카드 고정폭 가로 스크롤 (핑크 섹션 좌우 패딩 밖까지) */
  .entry-benefits-list {
    margin: 0 calc(-1 * var(--spacing-16));
    padding: 0 var(--spacing-16);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .entry-benefits-list::-webkit-scrollbar {
    display: none;
  }

  .entry-benefits-box {
    flex: none;
    width: 297px;
  }

  .entry-benefits-note {
    padding-left: 7px;
    font-size: 13px;
    line-height: 1.54;
    color: var(--color-gray-60);
  }

  .entry-benefits-note::before {
    top: 8.5px;
    width: 3px;
    height: 3px;
  }

  /* 심사 프로세스 — 세로 스택 + 화살표(원 40)가 16px 간격 위에 겹침 */
  .entry-steps-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .entry-steps-box {
    padding: var(--spacing-56) var(--spacing-32);
  }

  .entry-steps-box + .entry-steps-arrow + .entry-steps-box,
  .entry-steps-box:not(:first-child) {
    margin-top: var(--spacing-16);
  }

  .entry-steps-step {
    font-size: 18px;
  }

  .entry-steps-name {
    font-size: 30px;
  }

  .entry-steps-arrow {
    position: relative;
    z-index: 1;
    height: 0;
    display: flex;
    justify-content: center;
  }

  .entry-steps-arrow-circle {
    transform: translateY(-12px);
  }

  .entry-steps-arrow-icon {
    transform: rotate(90deg);
  }

  /* 심사기준 */
  .entry-criteria-num {
    width: 65px;
    font-size: 24px;
  }

  .entry-criteria-txt {
    min-height: 118px;
    padding: var(--spacing-32) var(--spacing-24);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
  }

  /* 심사위원 — 세로 스택, 카드 축소 */
  .entry-judges-groups {
    padding: var(--spacing-24) 0;
  }

  .entry-judges-group {
    flex-direction: column;
    align-items: stretch;
  }

  .entry-judges-label-group {
    width: auto;
  }

  .entry-judges-label {
    font-size: 30px;
  }

  .entry-judges-note {
    padding-left: 7px;
    font-size: 13px;
    line-height: 1.54;
    color: var(--color-gray-60);
  }

  .entry-judges-note::before {
    top: 8.5px;
    width: 3px;
    height: 3px;
  }

  .entry-judges-cards {
    flex-direction: column;
    align-items: stretch;
  }

  .entry-judges-card {
    padding: var(--spacing-20) var(--spacing-24);
  }

  .entry-judges-card.is-open {
    padding: var(--spacing-20) var(--spacing-24) var(--spacing-32);
  }

  .entry-judges-photo {
    width: 80px;
    height: 80px;
  }

  .entry-judges-photo img {
    width: 80px;
    height: 80px;
  }

  .entry-judges-person {
    gap: var(--spacing-4);
  }

  .entry-judges-person-name {
    font-size: 20px;
    line-height: 1.5;
  }

  .entry-judges-person-role {
    font-size: 15px;
    line-height: 1.47;
  }

  .entry-judges-toggle {
    width: 32px;
    height: 32px;
  }

  .entry-judges-toggle-icon {
    width: 20px;
    height: 20px;
  }

  .entry-judges-career {
    font-size: 15px;
    line-height: 1.47;
  }

  .entry-judges-comment {
    font-size: 14px;
    line-height: 1.5;
  }

  /* 촬영 가이드 · 출품하기 — 세로 스택, 버튼 풀폭 */
  .entry-guides {
    padding: var(--spacing-80) var(--spacing-16) 0;
  }

  .entry-guides-list {
    flex-direction: column;
  }

  .entry-guides-box {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "desc"
      "button";
    row-gap: var(--spacing-8);
    padding: var(--spacing-32) var(--spacing-24);
  }

  .entry-guides-name {
    font-size: 30px;
  }

  .entry-guides-desc {
    font-size: 16px;
  }

  .entry-guides-box > .button {
    margin-top: var(--spacing-32);
    width: 100%;
  }

  .entry-apply {
    padding: var(--spacing-80) var(--spacing-16) 0;
  }

  .entry-apply-box {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-40);
    padding: var(--spacing-32) var(--spacing-24);
  }

  .entry-apply-name {
    font-size: 30px;
  }

  .entry-apply-desc {
    font-size: 16px;
  }

  .entry-apply-btns {
    flex-direction: column;
    gap: var(--spacing-12);
  }

  .entry-apply-btns .button {
    width: 100%;
  }
}

/* 심사위원 카드 — 설계서 v0.97: 카드 전체 클릭으로 펼침/접힘 (entry.js) */
.entry-judges-card {
  cursor: pointer;
}

.entry-judges-card .entry-judges-body {
  cursor: auto;
}

/* ── 심사 프로세스 연결형 — 태블릿~중형PC(1024~1749): 화살표 제거, 알약 서로 붙임(보더 2px 겹침), radius 80, 이름 30px.
   base(화살표+full-pill)는 ≥1750 에서만 노출 — 그 아래는 박스가 세로로 붕괴(1600 기준 234×240)하므로 연결형 유지 (시안 2064:35082) */
@media (min-width: 1024px) and (max-width: 1749px) {
  .entry-steps-list {
    gap: 0;
  }

  .entry-steps-arrow {
    display: none;
  }

  .entry-steps-box {
    padding: var(--spacing-56) var(--spacing-24);
    border-radius: 80px; /* 시안 2064:35087 rounded-80 — 붙은 박스라 base full(999) 대신 고정 80 (radius 스케일 외 값) */
  }

  .entry-steps-box:not(:first-child) {
    margin-left: -2px;
  }

  .entry-steps-name {
    font-size: 30px;
  }
}

/* ── 심사위원 — 카드 512px 고정 + 가로 스와이프 (PC·태블릿 공통, 라벨 좌측 유지). ≥1024 전 구간 적용해 1600 등 PC폭에서도 3장이 안 들어가면 스와이프 (CRFF-384) ── */
@media (min-width: 1024px) {
  .entry-judges-cards {
    overflow-x: auto;
    scrollbar-width: none;
    /* 스와이프 시 섹션 우측 패딩(40)만큼 당겨 카드가 화면 우측 끝까지 스크롤 (CRFF-384) */
    margin-right: calc(var(--spacing-40) * -1);
  }

  .entry-judges-cards::-webkit-scrollbar {
    display: none;
  }

  .entry-judges-card {
    flex: none;
    width: 512px;
  }
}

/* ── 태블릿(1024~1279) — 출품안내(IN-2400) 시안 2064:34619 ── */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* 출품작 촬영 가이드 — 타이틀 전폭 상단 1줄 + 아래 설명(좌)·버튼(우) */
  .entry-guides-box {
    grid-template-areas:
      "name   name"
      "desc   button";
  }

  .entry-guides-name {
    font-size: 30px;
    white-space: nowrap;
  }
}

/* ============================================
 * 역대 영화제 (IN-2300) — 시안 PC 886:14524 / MO 627:80274·탭 627:80615
 * ============================================ */

/* ── 캐러셀 좌우 화살표 — 80 원형 딤+블러 (community-carousel-nav 동일 시안 IconButton_80) ── */
.hist-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);
  color: var(--color-text-inverse);
  cursor: pointer;
}

.hist-nav::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 32px;
  height: 32px;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.hist-nav--prev {
  left: 24px;
  --icon: url('/images/icon/func-paginationPrev.svg');
}

.hist-nav--next {
  right: 24px;
  --icon: url('/images/icon/func-paginationNext.svg');
}

.swiper:not(.swiper-initialized) .hist-nav {
  display: none;
}

/* 화살표 세로 위치 — 시안은 포스터(이미지) 세로 중심 기준 (886:14581/14736/15218) */
.hist-years-carousel .hist-nav {
  top: 329px;   /* 연도 포스터 프레임 658 의 중심 */
}

/* 연도 화살표 = 인접 연도 이동. 양끝(최신/최과거)에서 비활성 (JS가 클래스 부여).
   pointer-events 는 유지(none 이면 클릭이 뒤 연도 포스터 링크로 통과돼 상단 튐) — 버튼이 클릭을 잡고 handler 가 no-op */
.hist-years .hist-nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

.hist-films-carousel .hist-nav {
  top: 328px;   /* 카드 pad 16 + 포스터 624 중심 */
}

/* 가로형 스틸 섹션(.hist-films--landscape) — 카드 border 2 + pad 16 + 포스터 304 중심 */
.hist-films--landscape .hist-films-carousel .hist-nav {
  top: 170px;
}

/* 카드가 다 들어와 스와이프 불가한 섹션(다르덴 2편·디즈니 1편 등)은 화살표 숨김 (JS 토글) */
.hist-films-carousel--no-nav .hist-nav {
  display: none;
}

/* ── 연도 포스터 캐러셀 (Figma 886:14534 — 활성 레드 4px 프레임 + 캘린더 화살표) ── */
.hist-years {
  padding: 0 var(--spacing-40) var(--spacing-80);
}

.hist-years-carousel {
  width: 100%;
  overflow: hidden;
}

.hist-years-list {
  display: flex;
  list-style: none;
}

.hist-years-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 476px;
}

/* 연도 선택은 키보드 접근 가능한 실제 버튼 (레이아웃은 버튼이 승계) */
.hist-years-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hist-years-poster {
  display: block;
  width: 100%;
  padding: 13px;
  border: 4px solid transparent;
  border-radius: var(--radius-medium);
}

.hist-years-box.is-active .hist-years-poster {
  border-color: var(--color-cta);
}

.hist-years-poster img,
.hist-years-poster--empty {
  display: block;
  width: 100%;
  aspect-ratio: 442 / 624;
  border-radius: var(--radius-small);
  object-fit: cover;
  background-color: var(--color-gray-10);
}

.hist-years-year {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.35;
  color: var(--color-text-heading);
}

.hist-years-box.is-active .hist-years-year {
  color: var(--color-cta);
}

.hist-years-arrow {
  width: 48px;
  height: 48px;
  /* 활성 연도 위쪽을 가리키는 인디케이터 — 시안 886:14553 은 ▲(up) (구 ▼ down 오정합 수정) */
  --icon: url('/images/icon/func-arrow-calendar-up.svg');
  /* 활성 연도 인디케이터 — 선택된 탭에서만 노출 (레이아웃 유지를 위해 visibility 사용) */
  visibility: hidden;
}

.hist-years-box.is-active .hist-years-arrow {
  visibility: visible;
}

/* ── 개최 정보 — 핑크 섹션 (Figma 886:14584) ── */
.hist-info {
  padding: var(--spacing-80);
  background-color: var(--color-pink-60);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xxlarge);
}

.hist-info-inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-56);
}

.hist-info-poster {
  flex-shrink: 0;
  display: block;
  width: 567px;
  border-radius: var(--radius-large);
  overflow: hidden;
}

.hist-info-poster img {
  display: block;
  width: 100%;
  aspect-ratio: 567 / 801;
  object-fit: cover;
}

.hist-info-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-56);
  padding: 0 var(--spacing-40);
}

.hist-info-tit {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.35;
  color: var(--color-text-heading);
  word-break: keep-all;   /* '아동권리영화제' 중간 분절 방지 — 서수 뒤(공백/br-mo)에서만 줄바꿈 (CRFF-211) */
}

.hist-info-desc {
  display: none;   /* 시안: 소개 문구는 MO 전용 */
}

.hist-info-card {
  padding: var(--spacing-40) var(--spacing-80);
  background-color: var(--color-background);
  border-radius: var(--radius-xxlarge);
}

.hist-info-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  list-style: none;
}

.hist-info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-16);
}

.hist-info-subject {
  flex-shrink: 0;
  width: 88px;   /* 라벨 등폭 — 개최기간~슬로건 값 세로 정렬 (씨네토크 라벨은 hug 유지) */
  padding: var(--spacing-8) 0;
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-xsmall);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--color-text-heading);
}

.hist-info-value {
  padding-top: 7.5px;   /* pill(45) 첫 줄과 수직 중앙 정렬 */
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-body);
}

/* 태블릿(1024~1279): PC 좌우배치가 안 맞아 가로 넘침 → 모바일(≤1023)과 동일한 세로 스택
   형태로 통일 (값 전부 MO와 일치 — 사용자 지정 2026-09-10) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hist-info {
    padding: var(--spacing-80) var(--spacing-16) var(--spacing-40);
  }
  .hist-info-inner {
    flex-direction: column;
    gap: var(--spacing-24);
  }
  .hist-info-poster {
    order: 2;
    width: 100%;
    border-radius: var(--radius-xlarge);
  }
  .hist-info-poster img {
    aspect-ratio: 354 / 480;
  }
  .hist-info-body {
    order: 1;
    width: 100%;
    gap: var(--spacing-24);
    padding: 0;
    align-items: center;
  }
  .hist-info-tit {
    font-size: 44px;
    line-height: 1.2;
    text-align: center;
  }
  .hist-info-card {
    width: 100%;
    padding: var(--spacing-40) var(--spacing-24);
    border-radius: var(--radius-xlarge);
  }
  .hist-info-rows {
    gap: var(--spacing-20);
    align-items: flex-start;
  }
  .hist-info-row {
    gap: var(--spacing-12);
  }
  .hist-info-subject {
    width: 80px;
    font-size: 15px;
    line-height: 1.47;
  }
  .hist-info-value {
    padding-top: 9px;
    font-size: 15px;
    line-height: 1.47;
  }
}

/* ── 수상작·특별전·키즈관 — 카드 캐러셀, 카드 → UT-08 (Figma 886:14635) ── */
.hist-films-carousel {
  width: 100%;
  overflow: hidden;
}

.hist-films-list {
  display: flex;
  list-style: none;
}

.hist-films-item {
  width: 782px;
}

.hist-films-card {
  display: flex;
  gap: var(--spacing-24);
  padding: var(--spacing-16);
  background-color: var(--color-background);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  text-decoration: none;
}

/* 이관 연도 카드는 클릭 시 상세 모달(span role=button) — DB 카드(a)는 링크 이동 */
.hist-films-card[data-synopsis] {
  cursor: pointer;
}
.hist-films-card[data-synopsis]:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
}

/* ── 상영작 상세 모달 (CRFF-218, 시안 2153:25212/25963) — 스틸 풀블리드 + 센터 헤드 + 좌측 섹션 ──
   ⚠️ 섹션 간 세로 간격은 스케일 토큰 근사(시각검증 대기): head-8 / detail-32 / section-8 */
/* 시안 PC 모달 높이 1200 — 스틸:컨텐츠 1:1 분할, 작은 뷰포트는 클리핑 방지 캡 */
.hist-film-dialog {
  height: 1200px;
  max-height: 92vh;
}
.hist-film-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;   /* 전체 스크롤 제거 — 스틸/컨텐츠 각 절반, 컨텐츠만 스크롤 */
}
.hist-film-body:last-child {
  padding-bottom: 0;   /* .modal-body:last-child pb32 상쇄 (flush) */
}
/* 스틸 : 컨텐츠 = 1:1 (각 body 높이의 50%) */
.hist-film-still {
  flex: 1 1 50%;
  min-height: 0;
  overflow: hidden;
  background-color: var(--color-surface-black);
}
.hist-film-still[hidden] {
  display: none;
}
.hist-film-still-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hist-film-detail {
  flex: 1 1 50%;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  padding: var(--spacing-32) var(--spacing-40);
  scrollbar-width: thin;   /* Firefox */
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}
/* 우측 커스텀 스크롤바 — 시안 Rectangle(2153:25305): w8·#d9d9d9·pill·우측 8 인셋 */
.hist-film-detail::-webkit-scrollbar {
  width: 16px;   /* thumb 8 + 우측 여백 8 */
}
.hist-film-detail::-webkit-scrollbar-track {
  background: transparent;
}
.hist-film-detail::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  background-clip: padding-box;
  border-right: 8px solid transparent;   /* 우측 8px 인셋 → 보이는 thumb 폭 8 */
  border-radius: var(--radius-full);
}
.hist-film-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  text-align: center;
}
.hist-film-name {
  color: var(--color-text-heading);
}
.hist-film-meta {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-body);
}
.hist-film-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-8);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-cta);
}
.hist-film-tags[hidden] {
  display: none;
}
.hist-film-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}
.hist-film-section[hidden] {
  display: none;
}
.hist-film-section-tit {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-cta);
}
.hist-film-section-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-body);
  white-space: pre-line;
}

.hist-films-poster {
  flex-shrink: 0;
  display: block;
  width: 442px;
  height: 624px;
  border-radius: var(--radius-large);
  background-color: var(--color-gray-10);
}

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

.hist-films-badges {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-48);
}

.hist-films-watch {
  padding: 10px var(--spacing-12);
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
}

.hist-films-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-12);
}

.hist-films-award {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 10px var(--spacing-24) 10px var(--spacing-16);
  background-color: var(--color-gray-10);
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-inverse);
}

.hist-films-award-icon {
  --icon: url('/images/icon/func-trophy-filled.svg');   /* 채움 트로피 (WSG 398:1202) */
}

/* 수상 배지 색상 — 최종본(WSG 398:1202): 대상=검정/흰, 최우수상=cta빨강/흰, 우수상=pink/검정, 관객상=green/검정, 아동감독상=blue/검정.
   특별상(AwardType.SPECIAL, 시안 5종 이후 추가)=yellow/검정 — fragments/components :: awardBadge 와 동일 배정.
   트로피 아이콘은 .icon currentColor 마스크라 color 값을 따라 자동 반전 */
.hist-films-award--grand { background-color: var(--color-gray-10); color: var(--color-text-inverse); }
.hist-films-award--best { background-color: var(--color-cta); color: var(--color-text-inverse); }
.hist-films-award--excellence { background-color: var(--color-pink-60); color: var(--color-text-heading); }
.hist-films-award--special { background-color: var(--color-yellow-60); color: var(--color-text-heading); }
.hist-films-award--audience { background-color: var(--color-green-60); color: var(--color-text-heading); }
.hist-films-award--director { background-color: var(--color-blue-60); color: var(--color-text-heading); }
/* 스폰서상(세이브더칠드런상·CGV상·EBS상 등 — 레거시 연도 데이터, AwardType 외) 그레이 */
.hist-films-award--sponsor { background-color: var(--color-gray-50); color: var(--color-text-inverse); }

/* 복수 수상(예: 우수상+관객상) 가로 나열 래퍼 */
.hist-films-awards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.hist-films-name {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.35;
  color: var(--color-text-heading);
}

.hist-films-meta {
  margin-top: var(--spacing-32);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  word-break: keep-all;
}

/* ── 가로형 스틸 카드 변형 (.hist-films--landscape) ──
   이관 연도(2020 수상작·2021~2025)의 기존 이미지는 세로 포스터가 아닌 가로 스틸(768×528 등)이라
   세로 442×624 프레임에 넣으면 좌우가 절반 가까이 잘린다. 프레임을 원본 비율(16:11)의 442×304 가로형으로
   바꾸고 카드 높이를 660→340 으로 축소. 텍스트 칸(232px)에 맞춰 제목 40→32·여백 축소.
   세로 포스터를 쓰는 섹션(2015~2019·2020 상영작·2024 오리지널 필름·DB 카드)은 기존 프레임 유지. */
.hist-films--landscape .hist-films-poster {
  height: 304px;   /* 442 × 528/768 */
}

.hist-films--landscape .hist-films-info {
  padding-bottom: var(--spacing-16);
}

.hist-films--landscape .hist-films-badges {
  margin-bottom: var(--spacing-24);
}

.hist-films--landscape .hist-films-name {
  font-size: 32px;
}

.hist-films--landscape .hist-films-meta {
  margin-top: var(--spacing-24);
}

/* ── 씨네아동권리토크 (Figma 886:15041) ── */
/* 세션 스와이퍼 — slidesPerView:1 은 슬라이드 폭=컨테이너 폭이라, flex 부모(about-section)에서
   폭이 확정되도록 100% 고정(미지정 시 콘텐츠 기반 무한 증식). */
.hist-talks-carousel {
  width: 100%;
}

/* 씨네토크는 세로 리스트 — 모든 세션 상시 노출(스와이퍼 폐지, CRFF-211). 카드 간격 56 (Figma 2642:55336 box pb-56, 기존 40 → 56) */
.hist-talks-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-56);
}

.hist-talks-box {
  display: flex;
  gap: var(--spacing-24);   /* align-items 기본 stretch → 텍스트 박스가 이미지 높이에 맞춰 늘어남(A안) */
}
/* 리스트 전환으로 화살표·인디케이터 미사용 (CRFF-211) — .hist-talks-img 스코프로 원 정의(display:flex)보다 특이도 우선 */
.hist-talks-img .hist-nav,
.hist-talks-img .hist-talks-indicator {
  display: none;
}

/* 프레임: 고정 높이/비율 없이 사진 자연 높이(잘림 없음). 박스가 텍스트 높이로 늘어난 경우(2025 등)
   이미지를 세로 중앙정렬 → 남는 여백을 위아래 대칭으로 분산. flex:2(이미지:텍스트=2:1)·max-width 1220 */
.hist-talks-img {
  position: relative;
  flex: 2;
  min-width: 0;
  max-width: 1220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-10);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  overflow: hidden;
}

.hist-talks-img > img {
  display: block;
  width: 100%;
  height: auto;
}

/* 2025 씨네토크만 시안(2693:27351) 프레임 높이 적용 — 1220×857 비율(칸 폭에 맞춰 스케일).
   2025 실이미지도 1220×857(1.424)이라 프레임과 비율 동일 → cover 로 꽉 채움(여백·잘림 없음) */
.hist-talks--2025 .hist-talks-img {
  aspect-ratio: 1220 / 857;
}
.hist-talks--2025 .hist-talks-img > img {
  height: 100%;
  object-fit: cover;
}

/* 씨네토크 현장 사진 화살표 — 이미지 세로 중앙·좌우 40 (Figma 886:15049, 슬라이드는 사진 수급 후) */
.hist-talks-img .hist-nav--prev {
  left: var(--spacing-40);
}

.hist-talks-img .hist-nav--next {
  right: var(--spacing-40);
}

.hist-talks-indicator {
  position: absolute;
  right: var(--spacing-16);
  bottom: var(--spacing-16);
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 10px var(--spacing-20);
  background-color: var(--color-dim-20);
  border-radius: var(--radius-full);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-gray-80);
}

.hist-talks-indicator strong {
  font-weight: 700;
  color: var(--color-text-inverse);
}

.hist-talks-txtgroup {
  flex: 1;   /* 이미지:텍스트 = 2:1 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  padding: var(--spacing-80) var(--spacing-40);
  background-color: var(--color-background);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
}

.hist-talks-name {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.35;
  color: var(--color-text-heading);
  word-break: keep-all;
}

/* 장소·회차 두 줄 고정 (단어 단위 줄바꿈 요청) */
.hist-talks-name span {
  display: block;
}

.hist-talks-rows {
  margin-top: auto;   /* 버튼 없는 카드: name 상단, rows 하단 정렬 (버튼 카드는 .hist-talks-bottom 이 담당) */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  list-style: none;
}

.hist-talks-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
}

.hist-talks-subject {
  flex-shrink: 0;
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--color-gray-10);
  border-radius: var(--radius-xsmall);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
}

.hist-talks-value {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-body);
}

/* ── 씨네토크 버튼 영역 (CRFF-219) ── */
/* 버튼 카드: rows(일정·출연자) + 버튼을 한 묶음으로 하단 정렬 (같은 영역) */
.hist-talks-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}
.hist-talks-bottom .hist-talks-rows {
  margin-top: 0;   /* 래퍼가 하단 이동을 담당 → 내부 rows 개별 push 해제 */
}
.hist-talks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

/* ── 함께한 사람들 — 캐러셀 (Figma 886:15142) ── */
.hist-people-carousel {
  width: 100%;
  overflow: hidden;
}

.hist-people-list {
  display: flex;
  list-style: none;
}

.hist-people-card {
  position: relative;
  display: flex;
  width: 442px;
  height: 624px;
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-large);
  background-color: var(--color-background);   /* 인물 사진 수급 전 임시 흰 배경 */
  overflow: hidden;
}

.hist-people-txtgroup {
  position: relative;   /* absolute 인물 사진 위로 */
  z-index: 1;
  align-self: flex-end;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  padding: 0 var(--spacing-16) var(--spacing-24);
  /* 시안 dim 0.7 — 토큰 스케일(dim-modal 0.6) 밖 raw 유지 */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) -1.46%, rgba(0, 0, 0, 0.7) 100%);
}

.hist-people-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hist-people-tag {
  padding: var(--spacing-4) var(--spacing-12);
  background-color: var(--color-pink-60);
  border: 2px solid var(--color-gray-10);
  border-radius: var(--radius-xsmall);
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.35;
  color: var(--color-text-heading);
}

.hist-people-tag + .hist-people-tag {
  margin-top: -2px;
}

.hist-people-note {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-inverse);
}

/* 함께한 사람들 — 마우스오버: 전체 딤 20%(dimmed_full) + 그라디언트 위 네임·인용문 센터 (Figma 876:13192) */
.hist-people-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  overflow: hidden;   /* 하단 페이드(::after) 클립 — 스크롤은 -scroll 담당 */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) -1.46%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(var(--color-dim-20), var(--color-dim-20));
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 인용 스크롤 영역 — 짧으면 중앙, 넘치면 상단 정렬(safe)로 스크롤 (시안 1621:6986) */
.hist-people-hover-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: var(--spacing-40);
  padding: var(--spacing-24) var(--spacing-16);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;   /* 네이티브 숨김 — 고정크기 커스텀 thumb 사용 (시안 1621:6987 8×120) */
}
.hist-people-hover-scroll::-webkit-scrollbar {
  display: none;
}
/* 커스텀 스크롤 thumb — 8px 폭·고정 높이, 우측 8 inset (시안 1621:6987). 높이/위치/표시는 history.js */
.hist-people-scroll-thumb {
  position: absolute;
  right: 8px;
  z-index: 3;
  width: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-caption);   /* #767676 */
  opacity: 0;
  pointer-events: none;
}
.hist-people-hover.is-scrollable .hist-people-scroll-thumb {
  opacity: 1;
}

/* 하단 페이드 — 스크롤 가능 힌트 (시안 1621:7002: →#333 multiply, 136) */
.hist-people-hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 136px;
  background: linear-gradient(180deg, rgba(51, 51, 51, 0), #333333);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hist-people-name--center {
  align-items: center;
}

.hist-people-quote {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--color-text-inverse);
  word-break: keep-all;   /* 어절(단어) 단위 줄바꿈 — 단어 중간 끊김 방지 */
}

.hist-people-card:hover .hist-people-hover {
  opacity: 1;
}

/* 기본 텍스트는 hover 레이어(인용 있는 인물)가 있을 때만 교체 숨김 — 인용 없는 카드는 hover 중에도 딤·태그 유지 */
.hist-people-card:has(.hist-people-hover):hover .hist-people-txtgroup {
  opacity: 0;
}

/* 함께한 사람들 도트 — PC 에서도 노출 (간격은 섹션 gap 32 가 담당 — margin 중복 금지) */
.hist-people-pagination {
  --swiper-pagination-bullet-horizontal-gap: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
}

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

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

/* ── 태블릿(1024~1279) — 씨네토크는 모바일처럼 이미지 위·텍스트 아래 상하 배치 ── */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hist-talks-box {
    flex-direction: column;
    gap: var(--spacing-12);
  }
  .hist-talks-img {
    flex: none;   /* column 스택에서 flex-basis 0 이 높이를 무너뜨림 */
    width: 100%;
    height: auto;   /* 텍스트 위 스택 → 자연 높이(레터박스 없음) */
  }
  .hist-talks-img > img {
    height: auto;
  }
  .hist-talks-txtgroup {
    width: 100%;
  }
}

/* ── 역대 영화제 모바일 (~1023px) — 시안 627:80274 ── */
@media (max-width: 1023px) {
  /* 연도 캐러셀 — 카드 298·화살표 숨김 (Figma 627:80615) */
  .hist-years {
    margin-top: var(--spacing-40);
    padding: 0 var(--spacing-16) var(--spacing-56);
  }

  /* MO 섹션 타이틀 30 (씨네토크만 시안이 28 — type-title-1 기본값 유지) */
  .hist-films .about-section-tit,
  .hist-people .about-section-tit {
    font-size: 30px;
  }

  .hist-years-box {
    width: 298px;
  }

  .hist-years-poster {
    padding: var(--spacing-8);
  }

  .hist-years-year {
    font-size: 30px;
  }

  .hist-years-arrow {
    width: 32px;
    height: 32px;
  }

  .hist-nav {
    display: none;
  }

  /* 개최 정보 — 세로 스택: 타이틀·소개·정보·포스터 (Figma 627:80292) */
  .hist-info {
    padding: var(--spacing-80) var(--spacing-16) var(--spacing-40);
  }

  .hist-info-inner {
    flex-direction: column;
    gap: var(--spacing-24);
  }

  .hist-info-poster {
    order: 2;
    width: 100%;
    border-radius: var(--radius-xlarge);
  }

  .hist-info-poster img {
    aspect-ratio: 354 / 480;
  }

  .hist-info-body {
    order: 1;
    width: 100%;
    gap: var(--spacing-24);
    padding: 0;
    align-items: center;
  }

  .hist-info-tit {
    font-size: 44px;
    line-height: 1.2;
    text-align: center;
  }

  /* 소개 문구(hist-info-desc)는 MO 시안(627:80317)도 HIDDEN — 기본 display:none 유지 */

  /* 정보 카드 — MO 도 흰 카드 유지 (Figma 627:80297 — pad 40/24 · r40 · 행간 20) */
  .hist-info-card {
    width: 100%;
    padding: var(--spacing-40) var(--spacing-24);
    border-radius: var(--radius-xlarge);
  }

  .hist-info-rows {
    gap: var(--spacing-20);
    align-items: flex-start;
  }

  .hist-info-row {
    gap: var(--spacing-12);
  }

  .hist-info-subject {
    width: 80px;
    font-size: 15px;
    line-height: 1.47;
  }

  .hist-info-value {
    padding-top: 9px;
    font-size: 15px;
    line-height: 1.47;
  }

  /* 수상작·특별전·키즈관 — 세로 카드 274 (Figma 726:45916) */
  .hist-films-item {
    width: 274px;
  }

  .hist-films-card {
    flex-direction: column;
    gap: 0;
    padding: 0;
    background-color: var(--color-background-section);
    border-radius: var(--radius-medium);
    overflow: hidden;
  }

  .hist-films-info {
    order: 1;
    padding: var(--spacing-16) var(--spacing-16) var(--spacing-24);
  }

  .hist-films-badges {
    order: 2;
    position: absolute;
    z-index: 1;
    margin: var(--spacing-8);
  }

  .hist-films-poster {
    order: 2;
    position: relative;
    width: 100%;
    height: 388px;
    border-top: 2px solid var(--color-gray-10);
    border-radius: var(--radius-medium) var(--radius-medium) 0 0;
  }

  .hist-films-card {
    position: relative;
  }

  /* MO: 뱃지·메타는 포스터 위 오버레이 */
  .hist-films-badges {
    top: 104px;   /* top(제목 영역) 높이만큼 내려 포스터 상단에 */
    left: 0;
    margin: var(--spacing-8);
    margin-bottom: 0;
  }

  .hist-films-watch {
    padding: 6px var(--spacing-8);
    background-color: var(--color-background);
    font-size: 12px;
    line-height: 1.5;
  }

  .hist-films-rating {
    width: 30px;
    height: 30px;
  }

  .hist-films-txt {
    gap: var(--spacing-16);
  }

  .hist-films-award {
    order: 2;
    position: absolute;
    top: 112px;
    right: var(--spacing-8);
    z-index: 1;
    padding: 6px var(--spacing-12);
    font-size: 13px;
    line-height: 1.54;
  }

  .hist-films-award-icon {
    width: 14px;
    height: 14px;
  }

  /* 복수 수상 래퍼도 포스터 위 우상단 오버레이 — 내부 배지는 static 로 가로 나열 */
  .hist-films-awards {
    order: 2;
    position: absolute;
    top: 112px;
    right: var(--spacing-8);
    z-index: 1;
  }

  .hist-films-awards .hist-films-award {
    position: static;
    top: auto;
    right: auto;
  }

  .hist-films-name {
    font-size: 24px;
    line-height: 1.35;
    min-height: 64px;
    display: flex;
    align-items: flex-start;
  }

  .hist-films-meta {
    position: absolute;
    left: var(--spacing-16);
    bottom: var(--spacing-16);
    z-index: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-inverse);
  }

  .hist-films-poster::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(to bottom, transparent, var(--color-dim-modal));
  }

  /* 가로형 스틸 변형 — MO 도 원본 비율(16:11)로 높이 388→약 186, 하단 딤 그라데이션은 짧게 */
  .hist-films--landscape .hist-films-poster {
    height: auto;
    aspect-ratio: 768 / 528;
  }

  .hist-films--landscape .hist-films-poster::after {
    height: 100px;
  }

  /* 씨네아동권리토크 (Figma 627:80371) */
  .hist-talks-list {
    gap: var(--spacing-40);   /* 카드 간격은 모바일 기존값 유지(새 시안은 PC만 56) */
  }
  .hist-talks-box {
    flex-direction: column;
    gap: var(--spacing-12);
  }

  .hist-talks-img {
    flex: none;   /* column 스택에서 flex-basis 0 이 높이를 무너뜨림 */
    width: 100%;
    height: auto;   /* 모바일은 이미지가 텍스트 위 스택 → 자연 높이로 레터박스 제거 */
  }
  .hist-talks-img > img {
    height: auto;   /* 자연 비율 렌더 (contain 불필요) */
  }

  .hist-talks-txtgroup {
    width: 100%;
    gap: var(--spacing-40);
    padding: var(--spacing-24);
  }

  .hist-talks-bottom {
    gap: var(--spacing-16);   /* 모바일: rows ↔ 버튼 간격 24 → 16 */
  }

  .hist-talks-name {
    font-size: 24px;
    line-height: 1.35;
  }

  .hist-talks-subject {
    font-size: 15px;
    line-height: 1.47;
  }

  .hist-talks-value {
    font-size: 15px;
    line-height: 1.47;
  }

  /* 함께한 사람들 (Figma 627:80434) */
  .hist-people-card {
    width: 274px;
    height: 387px;
    border-radius: var(--radius-medium);
  }

  .hist-people-txtgroup {
    gap: var(--spacing-24);
    padding: 0 var(--spacing-8) var(--spacing-16);
  }

  .hist-people-tag {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: 24px;
    line-height: 1.35;
  }

  /* MO 시안(627:80434)은 인디케이터 미노출 — 스와이프만 */
  .hist-people-pagination {
    display: none;
  }

  .hist-people-note {
    font-size: 14px;
    line-height: 1.5;
  }

  .hist-people-hover-scroll {
    gap: var(--spacing-24);
    padding: var(--spacing-16) var(--spacing-8);
  }
  .hist-people-hover::after {
    height: 80px;   /* MO 카드 387 — 페이드 축소 */
  }

  .hist-people-quote {
    font-size: 15px;
    line-height: 1.47;
  }

  /* MO — hover 대신 탭 토글(is-open, history.js): 딤+인용 노출 / 기본 텍스트 숨김 */
  .hist-people-card.is-open .hist-people-hover {
    opacity: 1;
  }

  .hist-people-card.is-open .hist-people-txtgroup {
    opacity: 0;
  }
}

/* 수상작·특별전·키즈관 포스터 실이미지 (899:8962/8951, 886:15503 확정분) */
.hist-films-poster img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* 함께한 사람들 인물 사진 — 카드 전체 채움 (수급분만, 미수급은 흰 배경 유지) */
.hist-people-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 연도 선택 동작 (설계서 v0.97) — 카드 클릭 커서 + 빈 회차 상태 */
.hist-years-box {
  cursor: pointer;
}

/* CRFF-63 — 연도 탭은 ?year= 링크(SSR 재렌더): 앵커가 기존 li 세로 스택 레이아웃을 계승 */
.hist-years-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  width: 100%;
  color: inherit;
}

/* CRFF-63 — 주요 프로그램(BO 자유 텍스트)의 개행 유지 (시안: 프로그램 3행) */
.hist-info-value--multiline {
  white-space: pre-line;
}

.hist-info-empty {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-body);
}

.hist-info-poster--empty {
  aspect-ratio: 567 / 801;
  background-color: var(--color-background);
}

@media (max-width: 1023px) {
  .hist-info-empty {
    font-size: 16px;
    text-align: center;
  }

  .hist-info-poster--empty {
    aspect-ratio: 354 / 480;
  }
}