/* pfmc-page-v2.css
 * Generated by Phase 4 (safe-merge) for (공연전시_MNU-U-060000, v2)
 * Source CSS (in cascade order): pfmc-page.css, pfmc-page-v2.css, archive-page-v2.css, pfmc-info-page-v2.css
 */

/* === source: pfmc-page.css === */
/* ============================================================
   PFMC PAGE — 공연·전시 페이지 고유 스타일
   DS 컴포넌트/레이아웃을 기본으로 사용하고,
   여기엔 프로젝트 고유 오버라이드만 둡니다.
   ============================================================

   목차
   ─────────────────────────────────────────────
   1. 공연·전시 목록 — 사이드바 + 카드 레이아웃
   2. 캘린더
   3. 필터 칩
   4. 공연·전시 상세 — venue-layout (포스터 + 정보)
   5. 공연·전시 상세 — 공유/인쇄 · SNS 툴바
   6. 공연·전시 상세 — 배지 · 공연명 · 정보 리스트
   7. 공연·전시 상세 — CTA · 종료안내 · 콘텐츠섹션
   8. 공연·전시 상세 — 아이콘 (data URI)
   9. 목록 — 필터 통합 영역
  10. 목록 — 카드 비율·말줄임·페이지네이션
  11. 아카이브 목록 — 미디어 카드·재생 오버레이
  12. 아카이브 상세 — 공통 (헤더·CMS)
  13. 아카이브 상세 — 사진 갤러리
  14. 아카이브 상세 — 영상 플레이어
  15. 축제·행사 목록 — 필터바
  16. 축제·행사 상세 — 오버뷰·섹션·내비게이션
  17. 축제·행사 신청완료
 17A. 축제·행사 신청 폼
  18. 예매·할인·환불 안내
  19. 실거주지인증 모달
  20. 예매하기 (인터파크 솔루션)
   R. 반응형 — 태블릿 (768~1199px)
   R. 반응형 — 태블릿 (~1023px)
   R. 반응형 — 모바일 (~767px)
   R. 인쇄
   ───────────────────────────────────────────── */


/* ==================== 0. TAB-NAV 간격 (공통가이드 v1.5.1) ==================== */
/* HERO ↔ TAB: PC 50 / 태블릿 28 / 모바일 16 */
/* [FIX] form 래핑(eGov 목록): 본문이 <form>으로 감싸지면 .ds-tab 이 .sub-page-wrap 의 직계가 아니라
   form 의 자식이라 `.sub-page-wrap > .ds-tab` 가 미매칭(HERO↔TAB·TAB↔FILTER 깨짐). form 직계 변형 추가.
   form 의 first-child 는 hidden input(pageIndex 등)이라 :first-child 대신 form 직계 .ds-tab 를 직접 타겟.
   (site-main block 전환과 함께 적용해야 margin-collapse 로 정확히 50px — 둘 중 하나만이면 어긋남) */
.sub-page-wrap > .ds-tab:first-child,
.sub-page-wrap > form > .ds-tab {
  margin-top: 5rem;                                        /* 50px */
}
/* TAB ↔ 다음 요소: PC 50 / 태블릿 28 / 모바일 16 */
.sub-page-wrap > .ds-tab + *,
.sub-page-wrap > .page-header__select + *,
.sub-page-wrap > form > .ds-tab + *,
.sub-page-wrap > form > .page-header__select + * {
  margin-top: 5rem;                                        /* 50px */
}
@media (max-width: 1199px) {
  .sub-page-wrap > .ds-tab:first-child,
  .sub-page-wrap > form > .ds-tab { margin-top: var(--ds-number-14); }
  .sub-page-wrap > .ds-tab + *,
  .sub-page-wrap > .page-header__select + *,
  .sub-page-wrap > form > .ds-tab + *,
  .sub-page-wrap > form > .page-header__select + * { margin-top: var(--ds-number-14); }
}
@media (max-width: 767px) {
  .sub-page-wrap > .ds-tab:first-child,
  .sub-page-wrap > form > .ds-tab { margin-top: var(--ds-number-8); }
  .sub-page-wrap > .ds-tab + *,
  .sub-page-wrap > .page-header__select + *,
  .sub-page-wrap > form > .ds-tab + *,
  .sub-page-wrap > form > .page-header__select + * { margin-top: var(--ds-number-8); }
}

/* [FIX] .pfmc-info 콘텐츠 페이지(예매·할인·환불 등, content.jsp + CMS HTML):
   등록 HTML이 탭을 `.pfmc-info` 래퍼로 감싸 .ds-tab 이 sub-page-wrap 직계가 아님
   → `:has(> .ds-tab:first-child)` 0처리·HERO↔TAB 50px 규칙이 미매칭 → sub-page-wrap margin(케이스C 100/80/60)이 살아남.
   래퍼를 건너뛰어 타 페이지와 동일하게(HERO↔TAB 50/28/16) 처리. (PUB은 .sub-page-wrap.{래퍼} 라 정상이지만 dev는 래퍼 중첩.)
   래퍼 일반(`> div >`)으로 확장 — .pfmc-info(예매·할인·환불)·.about-v3(재단비전) 등 모든 content.do 래퍼 커버.
   직계 탭(.sub-page-wrap > .ds-tab)·form 탭은 첫자식 조건/구조가 달라 미매칭(영향 없음). */
.sub-page-wrap:has(> div > .ds-tab:first-child) { margin-top: 0; }
.sub-page-wrap > div > .ds-tab:first-child { margin-top: 5rem; }                              /* 50px */
@media (max-width: 1199px) { .sub-page-wrap > div > .ds-tab:first-child { margin-top: var(--ds-number-14); } } /* 28px */
@media (max-width: 767px)  { .sub-page-wrap > div > .ds-tab:first-child { margin-top: var(--ds-number-8); } }   /* 16px */

/* [FIX] 래퍼 중첩 탭페이지의 모바일 탭→셀렉트 전환(.page-header__select):
   foundation 등은 `.sub-page-wrap > .page-header__select`(PC숨김/모바일표시·여백)·`.sub-page-wrap.{래퍼}` 푸터를
   래퍼가 sub-page-wrap에 직접 붙은 PUB 구조 전제로 작성. dev(content.do)는 `.sub-page-wrap > div(래퍼) > .page-header__select`
   중첩이라 전부 미매칭 → PC/태블릿 셀렉트 노출(탭↔콘텐츠 과대)·모바일 여백 0·푸터 80/60.
   래퍼 일반(`> div >`)으로 브리지 — .about-v3(재단비전)·.mgmt-philosophy(경영철학)·.direction-v2(오시는길) 공통.
   .page-header__select 는 항상 PC 숨김 컴포넌트라 over-match 안전. */
.sub-page-wrap > div > .page-header__select { display: none; }                                /* PC/태블릿 셀렉트 숨김 */
.sub-page-wrap > div > .page-header__select + * { margin-top: 5rem; }                         /* 셀렉트↔콘텐츠 50 */
@media (max-width: 1199px) { .sub-page-wrap > div > .page-header__select + * { margin-top: var(--ds-number-14); } } /* 28 */
@media (max-width: 767px) {
  /* 본문 탭 유지 정책(page-header.css와 통일): 래퍼 중첩 탭도 모바일에서 탭을 유지(셀렉트 미사용) →
     component.css의 좌측정렬·밑줄 처리가 보이도록. 셀렉트는 위 .sub-page-wrap > div > .page-header__select{display:none} 유지. */
  .sub-page-wrap > div > .page-header__select + * { margin-top: var(--ds-number-14); }        /* 탭↔콘텐츠 28 (셀렉트 숨김 상태·사용자 지정) */
}
/* CONTENT↔FOOTER: foundation이 케이스B 100(`.sub-page-wrap.about-v3, .sub-page-wrap.management-v2 {mb:10rem}`)을
   준 래퍼만 중첩으로 미매칭되니 브리지. mgmt-philosophy·direction-v2는 PUB도 기본값 100/80/60(케이스C)이라 dev가 이미 일치 → 건드리지 않음. */
@media (max-width: 1199px) {
  .sub-page-wrap:has(> .about-v3),
  .sub-page-wrap:has(> .management-v2) { margin-bottom: 10rem; }                               /* 태블릿/모바일 100 */
}

/* [FIX] FILTER ↔ LIST-META: PC 50 / 태블릿 28 / 모바일 20 (v1.7 §5-1)
   dev(eGov)는 .ds-filter-search 와 .ds-board-list__top 사이에 hidden input(sc_tharAreaCd)이 끼어
   layout.css 의 `.ds-filter-search + .ds-board-list__top`(인접형제)가 미매칭 → 간격 0.
   hidden input 을 건너뛰도록 일반형제(~)로 보정(form 직계 한정). */
.sub-page-wrap > form > .ds-filter-search ~ .ds-board-list__top,
.sub-page-wrap .archive-content .ds-filter-search ~ .ds-board-list__top {   /* 아카이브: 필터가 archive-content 안에 중첩 */
  margin-top: 5rem;                                        /* 50px */
}
@media (max-width: 1199px) {
  .sub-page-wrap > form > .ds-filter-search ~ .ds-board-list__top,
  .sub-page-wrap .archive-content .ds-filter-search ~ .ds-board-list__top { margin-top: var(--ds-number-14); } /* 28px */
}
@media (max-width: 767px) {
  .sub-page-wrap > form > .ds-filter-search ~ .ds-board-list__top,
  .sub-page-wrap .archive-content .ds-filter-search ~ .ds-board-list__top { margin-top: var(--ds-number-10); } /* 20px */
}

/* [작업지침 §3-2] 케이스 A: TAB↔FILTER 모바일 28px (케이스 B TAB↔CONTENT 16과 구분).
   탭 다음이 필터(.ds-filter-search)일 때만 모바일 28로 상향 — 일반 .ds-tab + * (16, 케이스B)는 유지. */
@media (max-width: 767px) {
  .sub-page-wrap > .ds-tab + .ds-filter-search,
  .sub-page-wrap > form > .ds-tab + .ds-filter-search,
  .sub-page-wrap > form > .ds-tab + .archive-content,
  .sub-page-wrap > form > .ds-tab + [role=tabpanel],
  .sub-page-wrap > .ds-tab + form:has(> .ds-filter-search),
  .sub-page-wrap > .page-header__select + form:has(> .ds-filter-search) { margin-top: var(--ds-number-14); } /* 28px (아카이브·갤러리 패널·게시판 form 포함) */
}

/* [작업지침 케이스 A] 탭 없는 게시판(form 이 sub-page-wrap 첫 자식 + 필터 포함): HERO↔FILTER 60/30/30
   (layout.css `:has(> form > .ds-filter-search){margin-top:0}` 가 sub-page-wrap 을 0처리 → 필터 간격이 사라지던 것 보정) */
.sub-page-wrap > form:first-of-type:has(> .ds-filter-search):not(:has(> .ds-tab)) { margin-top: 6rem; }                              /* 60 — PC */
@media (max-width: 1199px) { .sub-page-wrap > form:first-of-type:has(> .ds-filter-search):not(:has(> .ds-tab)) { margin-top: 3rem; } } /* 30 — 태블릿·모바일 */
/* (탭이 폼 안에 있으면 탭페이지 → HERO↔TAB 50/28/16 적용, 위 60/30 미적용. 문의내역·신청현황 등)
   first-child 아닌 first-of-type: press/faq/qna/webzine 등은 sub-page-wrap 첫 자식이 인라인 <link>(페이지 CSS 직접 로드)라
   form 이 first-child 가 아님 → first-of-type 로 link 건너뛰고 첫 form 매칭. */

/* ===== [작업지침 §3-2] 케이스 A 잔여 간격 보정 (헤드리스 실측 기반) ===== */
/* ※ FILTER 내부행간(검색바↔칩 40px)은 DS(.ds-filter-search / .ds-board-toolbar) 관리 영역이라
   강제 변경하지 않음 — 작업지침 §3-2의 20/16/12와 다르지만 DS 기본값(40)을 존중. */

/* CONTENT 그리드 row-gap PC 90px (현재 60으로 떨어짐 보정 — 태블릿·모바일 60은 유지). */
@media (min-width: 1200px) {
  .sub-page-wrap > form > .ds-poster-list { row-gap: 9rem; }                                     /* 90px */
}

/* PAGINATION↔FOOTER 100/100/100: 목록(pagination 보유)은 sub-page-wrap 하단여백을
   케이스C값(태80/모60) 대신 100으로 고정 (pagination 없는 케이스C 상세는 미해당). */
@media (max-width: 1199px) {
  .sub-page-wrap:has(.ds-pagination),
  .sub-page-wrap:has(.ds-filter-search) { margin-bottom: 10rem; }                                 /* 100px — 케이스 A(필터 있는 목록·FAQ 아코디언 등, 페이지네이션 유무 무관) */
}

/* [공연/전시 검색바 너비] 키워드만 700px(DS 기본) / 연도+키워드(아카이브) 900px
   — DS `.ds-filter-search > .ds-board-toolbar--plain { max-width:700px }`(layout.css)를 toolbar 단위로 override. */
.ds-filter-search > .ds-board-toolbar--plain.pfmc-search-bar    { max-width: 70rem; } /* 700px — 키워드만 */
.ds-filter-search > .ds-board-toolbar--plain.archive-search-bar { max-width: 90rem; } /* 900px — 연도+키워드(아카이브) */


/* ==================== 1. 공연·전시 목록 — 사이드바 + 카드 레이아웃 (pfmc-*) ==================== */
.pfmc-layout {
  display: grid;
  grid-template-columns: 32rem 1fr;                      /* 320px 사이드바 + 나머지 */
  gap: var(--ds-number-30);                              /* 60px */
  margin-top: var(--ds-number-12);                       /* 24px — 탭 아래 간격 */
}
/* 카드 그리드 반응형: 3 → 2 → 1 */
.pfmc-content .ds-card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 사이드바 — 카드형 패널 */
.pfmc-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-10);                              /* 20px */
  position: sticky;
  top: var(--ds-number-10);
  align-self: start;
  min-width: 0;                                          /* grid 오버플로 방지 */
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
  border-radius: var(--ds-radius-large);
  padding: var(--ds-number-10);                          /* 20px */
  box-shadow: var(--ds-shadow-s);
}
.pfmc-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-4);                               /* 8px */
}
.pfmc-sidebar__title {
  font-size: var(--ds-pc-font-size-body-small);
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-light-color-text-basic);
}

/* 필터 칩 — DS .ds-tag 기반 토글 */
.pfmc-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-number-3);                               /* 6px */
}
.pfmc-filter-chips .ds-tag {
  cursor: pointer;
  transition: all 0.15s;
  background: var(--ds-color-gray-0);                    /* 비선택: 흰색 배경 */
}
.pfmc-filter-chips .ds-tag:hover {
  border-color: var(--ds-light-color-border-gray-default);
  color: var(--ds-light-color-text-basic);
}
.pfmc-filter-chips .ds-tag.is-active {
  background: var(--ds-light-color-text-basic);
  border-color: var(--ds-light-color-text-basic);
  color: var(--ds-color-gray-0);
}

/* 공연 카드 "진행중" 뱃지 — 브랜드 레드 */
.pfmc-content .ds-badge--primary {
  --ds-comp-color: var(--ds-color-brand-red-aa);
}

/* ==================== 2. 캘린더 ==================== */
.pfmc-calendar {
  padding: 0;
}
.pfmc-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-number-6);                     /* 12px */
}
.pfmc-calendar__title {
  font-size: var(--ds-pc-font-size-body-small);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-basic);
}
.pfmc-calendar__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-number-14);                            /* 28px */
  height: var(--ds-number-14);
  border: none;
  background: transparent;
  border-radius: var(--ds-radius-small);
  color: var(--ds-light-color-text-subtle);
  cursor: pointer;
  transition: background 0.15s;
}
.pfmc-calendar__nav:hover {
  background: var(--ds-color-gray-5);
}
.pfmc-calendar__table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: var(--ds-pc-font-size-body-xsmall);
}
.pfmc-calendar__table th {
  padding: var(--ds-number-2);
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-light-color-text-subtle);
  font-size: var(--ds-pc-font-size-body-xsmall);
}
.pfmc-calendar__table td {
  padding: var(--ds-number-4) var(--ds-number-2);        /* 상하 8px, 좌우 4px */
  padding-bottom: var(--ds-number-6);                    /* 하단 12px — 도트 영역 */
  color: var(--ds-light-color-text-basic);
  cursor: pointer;
  border-radius: var(--ds-radius-small);
  position: relative;
}
.pfmc-calendar__table td:hover {
  background: var(--ds-color-gray-5);
}
.pfmc-calendar__table td.is-other {
  color: var(--ds-light-color-text-disabled);
}
.pfmc-calendar__table td.is-today {
  font-weight: var(--ds-typo-font-weight-bold);
  background: var(--ds-color-primary-50);
  color: var(--ds-color-gray-0);
}
/* 이벤트 도트 표시 — 복수 겹침 지원 (.pfmc-dot 마크업 방식) */
.pfmc-dots {
  display: flex;
  justify-content: center;
  gap: var(--ds-number-1);                               /* 2px */
  position: absolute;
  bottom: var(--ds-number-1);
  left: 0;
  right: 0;
}
.pfmc-dot {
  width: var(--ds-number-2);                             /* 4px */
  height: var(--ds-number-2);
  border-radius: 50%;                                    /* 공연: 원형 ● */
  background: var(--ds-color-primary-50);
}
.pfmc-dot--exhibit  {
  background: var(--ds-color-success-50);
  border-radius: var(--ds-number-0-5);                   /* 전시: 사각형 ■ */
}
.pfmc-dot--event {
  background: var(--ds-color-warning-30);
  border-radius: 0;                                      /* 행사: 다이아몬드 ◆ */
  transform: rotate(45deg);
}
.pfmc-dot--festival {
  background: var(--ds-color-danger-50);
  border-radius: 0;                                      /* 축제: 삼각형 ▲ */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* 범례 */
.pfmc-calendar__legend {
  display: flex;
  gap: var(--ds-number-6);                               /* 12px */
  margin-top: var(--ds-number-6);
  padding-top: var(--ds-number-4);
  border-top: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}
.pfmc-calendar__legend-item {
  display: flex;
  align-items: center;
  gap: var(--ds-number-2);
  font-size: var(--ds-pc-font-size-body-xsmall);
  color: var(--ds-light-color-text-subtle);
}
.pfmc-calendar__legend-item::before {
  content: '';
  width: var(--ds-number-3);                             /* 6px */
  height: var(--ds-number-3);
  border-radius: 50%;
}
.pfmc-calendar__legend-item--pfmc::before {
  background: var(--ds-color-primary-50);                /* 공연: 원형 ● */
}
.pfmc-calendar__legend-item--exhibit::before {
  background: var(--ds-color-success-50);
  border-radius: var(--ds-number-0-5);                   /* 전시: 사각형 ■ */
}
.pfmc-calendar__legend-item--event::before {
  background: var(--ds-color-warning-30);
  border-radius: 0;                                      /* 행사: 다이아몬드 ◆ */
  transform: rotate(45deg);
}
.pfmc-calendar__legend-item--festival::before {
  background: var(--ds-color-danger-50);
  border-radius: 0;                                      /* 축제: 삼각형 ▲ */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* 콘텐츠 영역 */
.pfmc-content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-16);                              /* 32px */
  min-width: 0;                                          /* grid 오버플로 방지 */
}

/* 카드 썸네일: 포스터 비율 (3:4) */
.pfmc-content .ds-card__thumb {
  aspect-ratio: 3 / 4;
}

/* ==================== 3. 필터 토글 · 필터 영역 ==================== */
/* 필터 토글 버튼 (모바일 전용 — PC에서 숨김) */
.pfmc-filter-toggle {
  display: none;
}
/* 필터 영역 — PC에서는 항상 표시 */
.pfmc-filters {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-10);                              /* 20px — 사이드바 gap과 동일 */
}


/* ==================== 4. 공연·전시 상세 — venue-layout (포스터 + 정보) ==================== */
/* 3:7 그리드 — 왼쪽 포스터(sticky) + 오른쪽 콘텐츠 */
.venue-layout {
  display: grid;
  grid-template-columns: 42rem 1fr;                      /* PUB V3: 포스터 420 고정 + 우측 가변 */
  gap: var(--ds-number-40, 8rem);                        /* 80px */
  align-items: start;
}

/* ── stacked 변형: 풀폭 배지·타이틀·정보·CTA 위 / 포스터 하단 ── */
.pfmc-detail-hero--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-12);                              /* 24px */
}
/* 하단 포스터 — 콘텐츠 폭 맞춤, 3:4 비율 컨테이너 */
.pfmc-detail-poster {
  width: 100%;
  border-radius: var(--ds-radius-large);
  overflow: hidden;
  background: var(--ds-color-gray-5);
  aspect-ratio: 3 / 4;
  max-width: 60rem;                                      /* 너무 커지지 않도록 600px 한도 */
  margin: 0 auto;                                        /* 중앙 정렬 */
}
.pfmc-detail-poster__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .pfmc-detail-poster { max-width: 100%; }
}
/* 포스터 이미지 컨테이너 — 3:4 비율 고정 */
.venue-layout__media {
  width: 42rem;
  max-width: 100%;
  align-self: start;
  border-radius: var(--ds-radius-large);
  overflow: hidden;
  aspect-ratio: 5 / 7;                                   /* PUB V3 포스터 비율 */
  background: var(--ds-color-gray-5);                    /* 이미지 로딩 전 배경 */
}
.venue-layout__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 오른쪽 콘텐츠 영역 — CTA 없으면 상단 정렬, CTA 있으면 margin-top:auto로 하단 배치 */
.venue-layout__content {
  display: flex;
  flex-direction: column;
  gap: 0;                                                /* 간격은 항목별 margin 으로 (PUB V3) */
}


/* (5. 공유/인쇄 — DS 컴포넌트 .ds-share-actions로 이전됨) */


/* ==================== 6. 공연·전시 상세 v2 — 매거진 에디토리얼 레이아웃 ==================== */
/* 히어로 헤더: 구분텍스트 + 공유 한 줄 + 타이틀 풀폭 */
.pfmc-detail-hero__header {
  margin-bottom: var(--ds-number-28);
}
.pfmc-detail-hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-number-6);
}
.pfmc-detail-hero__meta .pfmc-card__type {
  font-size: var(--ds-pc-font-size-body-medium);
}
.pfmc-tag--line {
  background-color: transparent;
  border-color: var(--ds-comp-color, var(--ds-color-primary-50));
}
.pfmc-tag--no-border {
  border-color: transparent;
}
.pfmc-detail-hero__meta .pfmc-share-row {
  margin-bottom: 0;
}
/* 배지 행 — 좌: 태그, 우: 공유/인쇄 */
.pfmc-detail-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pfmc-detail-badges__tags {
  display: flex;
  gap: var(--ds-number-3);
}

/* 타이틀 — 풀폭, 대형 */
.pfmc-detail-title {
  font-size: var(--ds-font-size-36, 3.6rem);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-95, #131416);
  line-height: 1.2;
  letter-spacing: -0.025em;
  word-break: keep-all;
  margin: 1.5rem 0 0;                                    /* 배지 → 타이틀 15px (PUB V3) */
  padding-bottom: var(--ds-number-11, 2.2rem);          /* 22px */
  border-bottom: var(--ds-border-width-thin, 1px) solid var(--ds-color-primary-95, #000d14);
}
/* 부제목(아카이브 상세 전용) — 정보 리스트 값 타이포와 통일, 구분선을 부제목 아래로 이동.
   .pfmc-detail-subtitle 은 archiveView 만 사용 → 다른 상세(공연/전시/교육 등) 영향 없음 */
.pfmc-detail-title:has(+ .pfmc-detail-subtitle) {
  padding-bottom: var(--ds-number-7, 1.4rem);           /* 14px — 제목 ↔ 부제목 간격 */
  border-bottom: none;                                  /* 구분선은 부제목 아래로 이동 */
}
.pfmc-detail-subtitle {
  margin: 0;
  padding-bottom: var(--ds-number-11, 2.2rem);          /* 22px — 부제목 ↔ 구분선 */
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: var(--ds-typo-font-weight-semibold, 600);
  color: var(--ds-color-gray-90, #1e2124);              /* info-list value 동일 */
  line-height: 1.6;
  letter-spacing: -0.011em;
  word-break: keep-all;
  border-bottom: var(--ds-border-width-thin, 1px) solid var(--ds-color-primary-95, #000d14);
}
/* 히어로 본문: 포스터(35%) + 정보(65%) */
.pfmc-detail-hero__body {
  display: grid;
  grid-template-columns: 35rem 1fr;
  gap: var(--ds-number-30);
  align-items: start;
}
/* 포스터 — 뷰포트 안에 들어오는 크기, sticky */
.pfmc-detail-hero__poster {
  position: sticky;
  top: var(--ds-number-10);
  border-radius: var(--ds-radius-large);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--ds-color-gray-5);
  box-shadow: var(--ds-shadow-m);
}
.pfmc-detail-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 정보 영역 */
.pfmc-detail-hero__info {
  display: flex;
  flex-direction: column;
}
/* 핵심 정보 — 크고 눈에 띄게 */
.pfmc-key-info {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-8);
  padding-bottom: var(--ds-number-12);
  border-bottom: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}
.pfmc-key-info__item {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-1);
}
.pfmc-key-info__label {
  font-size: var(--ds-pc-font-size-body-xsmall);
  color: var(--ds-light-color-text-subtle);
  font-weight: var(--ds-typo-font-weight-medium);
}
.pfmc-key-info__value {
  font-size: var(--ds-pc-font-size-body-large);
  color: var(--ds-light-color-text-bolder);
  font-weight: var(--ds-typo-font-weight-bold);
  line-height: var(--ds-typo-line-height-heading);
}
/* 상세 정보 — 2열 그리드, 컴팩트 */
.pfmc-sub-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-number-6) var(--ds-number-16);
  padding-top: var(--ds-number-12);
  padding-bottom: var(--ds-number-12);
  border-bottom: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}
.pfmc-sub-info__item {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-1);
}
.pfmc-sub-info__label {
  font-size: var(--ds-pc-font-size-body-xsmall);
  color: var(--ds-light-color-text-subtle);
  font-weight: var(--ds-typo-font-weight-medium);
}
.pfmc-sub-info__value {
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-bolder);
  line-height: var(--ds-typo-line-height-body);
}
/* CTA — 풀폭 */
.pfmc-detail-hero__info .pfmc-detail-cta {
  margin-top: var(--ds-number-12);
}
.pfmc-detail-hero__info .pfmc-detail-cta .ds-btn {
  width: 100%;
  max-width: 32rem;
  justify-content: center;
}
/* 관람료 리스트 */
.pfmc-price-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-1);
}
.pfmc-price-item {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-number-2);
}
.pfmc-price-item span:first-child {
  display: inline-block;
  min-width: 3.5em;
  text-align: left;
}


/* ==================== 6-0. 공유/인쇄 버튼 (edu-share-top 공용) ==================== */
.edu-share-top {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-number-4);
  margin-bottom: var(--ds-number-12);
}
.edu-share-top .ds-icon {
  display: inline-block;
  width: var(--ds-number-8);
  height: var(--ds-number-8);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ==================== 6-1. 공연·전시 상세 — 정보 리스트 (venue-layout 내) ==================== */
.pfmc-detail-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;                        /* 좌 태그 / 우 공유 (PUB V3) */
  gap: 0;
  margin-bottom: 0;
}
/* 배지 태그 — DS 기본 radius 8px → PUB V3 필(pill) 형태(radius 30px, 글자 14px) */
.pfmc-detail-badges .ds-tag {
  font-size: 14px;
  border-radius: 30px;
}
@media (max-width: 1199px) and (min-width: 768px) {
  .pfmc-detail-badges .ds-tag { font-size: var(--ds-font-size-15, 1.5rem); }
}
@media (max-width: 767px) {
  .pfmc-detail-badges .ds-tag {
    min-height: var(--ds-number-14, 2.8rem);
    height: auto;
    padding: 0 var(--ds-number-4, 0.8rem);
  }
}
.pfmc-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--ds-number-15, 3rem);                 /* 타이틀 → 정보 30px */
}
.pfmc-info-list__row {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-number-2, 0.4rem);
  padding: 0 0 var(--ds-number-10, 2rem);               /* 행 간격 20px (마지막 행 포함 — PUB V3) */
  border-bottom: none;
}
.pfmc-info-list__label {
  width: 10rem;                                          /* 100px — PUB V3 */
  flex-shrink: 0;
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: var(--ds-typo-font-weight-semibold, 600);
  color: #777b80;
  line-height: 1.6;
  letter-spacing: -0.012em;
}
.pfmc-info-list__value {
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: var(--ds-typo-font-weight-semibold, 600);
  color: var(--ds-color-gray-90, #1e2124);
  line-height: 1.6;
  letter-spacing: -0.011em;
}
/* SNS 아이콘 — PUB(V3) 동일: img 28px, gap 1rem, hover opacity. .pfmc-detail-v3 스코프 한정 */
.pfmc-detail-v3 .pfmc-info-list__sns {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.pfmc-detail-v3 .pfmc-sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}
.pfmc-detail-v3 .pfmc-sns-link:hover { opacity: 0.7; }
.pfmc-detail-v3 .pfmc-sns-link img {
  display: block;
  width: 2.8rem;
  height: 2.8rem;
}

/* ==================== 7. 공연·전시 상세 — CTA · 종료안내 · 콘텐츠섹션 ==================== */
/* CTA + 공유 버튼 영역 — margin-top:auto로 포스터 하단 정렬 */
.pfmc-detail-cta {
  display: flex;
  align-items: stretch;
  gap: var(--ds-number-10, 2rem);
  margin-top: auto;
  padding-top: var(--ds-number-15, 3rem);               /* 정보 → CTA 30px (PUB V3) */
}
.pfmc-detail-cta .ds-btn--xl {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28rem;                                      /* 280px */
  min-height: var(--ds-number-28, 5.6rem);              /* 56px */
  padding: var(--ds-number-10, 2rem) var(--ds-number-18, 3.6rem);
  gap: var(--ds-number-6, 1.2rem);
  font-size: var(--ds-font-size-22, 2.2rem);
  font-weight: var(--ds-typo-font-weight-bold);
}
.pfmc-detail-cta .ds-btn__icon {
  width: var(--ds-number-12, 2.4rem);
  height: var(--ds-number-12, 2.4rem);
  display: inline-block;
  flex-shrink: 0;
}
/* venue-layout CTA 색상 — DS primary 유지 */
.venue-layout .ds-btn--primary {
  --ds-btn--bg: var(--ds-color-primary-50);
  --ds-btn--bg-hover: var(--ds-color-primary-60);
  --ds-btn--bg-active: var(--ds-color-primary-70);
  --ds-btn--border: var(--ds-color-primary-50);
}
/* 공연 종료 안내 */
.pfmc-detail-ended {
  display: flex;
  align-items: center;
  gap: var(--ds-number-4);
  padding: var(--ds-number-6) var(--ds-number-8);
  background: var(--ds-color-gray-5);
  border-radius: var(--ds-radius-medium);
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-subtle);
  margin-top: var(--ds-number-8);
}
.pfmc-detail-ended a {
  color: var(--ds-color-primary-50);
  text-decoration: underline;
  font-weight: var(--ds-typo-font-weight-medium);
}
/* 공연소개 섹션 */
.pfmc-detail-section {
  margin-top: 10rem;
}
.pfmc-detail-section__title {
  font-size: var(--ds-pc-font-size-heading-small);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
  padding-bottom: var(--ds-number-6);
  border-bottom: 2px solid var(--ds-light-color-text-bolder);
  margin-bottom: var(--ds-number-12);
}
/* 공연소개 WYSIWYG — body-content 간격 적용 */
.pfmc-detail-section .ds-wysiwyg > * + * {
  margin-top: var(--ds-pc-gap-layout-text-text);
}
.pfmc-detail-section .ds-wysiwyg > * + img,
.pfmc-detail-section .ds-wysiwyg > img + * {
  margin-top: var(--ds-pc-gap-layout-image-text);
}
.pfmc-detail-section .ds-wysiwyg img {
  width: 100%;
  display: block;
  border-radius: var(--ds-radius-large);
}
/* [Redmine #1607] 상세 본문(웹 상세) CMS 이미지 모바일 비율 깨짐 수정.
   원인: CKEditor 저장 본문 이미지의 인라인 style="height:Npx" 고정값이 살아남아
   모바일에서 width만 컨테이너로 축소되고 height는 고정 → 종횡비 왜곡(가로 압축).
   대응: 인라인 height 를 height:auto 로 무력화(인라인 우선이라 !important 필수)해 종횡비 유지.
   범위: .ds-content-text = .ds-wysiwyg(공연·전시·아카이브) + .editor-text(행사·축제) 공통 본문 래퍼.
   배치: 위 .ds-wysiwyg img(동률 특정성) 뒤에 선언해 우선권 확보. */
.pfmc-detail-section .ds-content-text img {
  max-width: 100%;
  height: auto !important;
}

/* ── 공연·전시·축제·행사·지난공연 상세 서브타이틀 — PUB V3 장식: 풀폭 그라데이션 띠 + 짧은 다크 언더라인.
   pfmcView·archiveView·festival_view·evnt_view 모두 pfmc-subtitle-v3 4단 구조 사용(데이터 무관 장식 wrapper).
   클래스명이 상세 페이지 전용이라 스코프 없이도 타 페이지 영향 없음. ── */
.pfmc-detail-section:has(> .pfmc-subtitle-v3-wrap) {
  margin-top: 0; /* 간격은 wrap 의 margin-top 이 담당 (이중 간격 방지) */
}
.pfmc-subtitle-v3-wrap {
  width: 100vw;
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 10rem;
  padding-top: var(--ds-number-30);
  padding-bottom: var(--ds-number-15);
  background: linear-gradient(180deg, var(--ds-color-gray-5, #f4f5f6) 0%, var(--ds-color-gray-0, #ffffff) 100%);
}
.pfmc-subtitle-v3-inner {
  max-width: var(--ds-contents-size-wide, 1440px);
  margin-inline: auto;
  padding-inline: 0;
}
.pfmc-subtitle-v3 {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-number-6);
}
.pfmc-subtitle-v3__title {
  margin: 0;
  font-size: var(--ds-font-size-28, 2.8rem);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-95, #131416);
  line-height: 1.2;
  letter-spacing: -0.007em;
}
.pfmc-subtitle-v3__line {
  width: 100%;
  height: var(--ds-border-width-medium, 0.2rem);
  background: var(--ds-color-brand-dark, #343a48);
}
@media (max-width: 1440px) {
  .pfmc-subtitle-v3-inner {
    padding-inline: var(--ds-pc-padding-layout-side, 3rem);
  }
}
@media (max-width: 1199px) and (min-width: 768px) {
  .pfmc-subtitle-v3__title { font-size: var(--ds-font-size-22, 2.2rem); }
}
@media (max-width: 767px) {
  .pfmc-subtitle-v3-inner {
    padding-inline: var(--ds-mobile-padding-layout-side, 1.6rem);
  }
  .pfmc-subtitle-v3__title { font-size: var(--ds-mobile-font-size-heading-small, 1.8rem); }
}

/* 모바일 플로팅 CTA — PC 숨김 */
.pfmc-floating-cta {
  display: none;
}


/* ==================== 8. 공연·전시 상세 — 아이콘 (data URI) ==================== */
.ds-icon--share { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4 6.3C14.4 4.48 15.88 3 17.7 3s3.3 1.48 3.3 3.3-1.48 3.3-3.3 3.3c-1.05 0-1.98-.49-2.59-1.25L9.53 11.31c.05.22.07.45.07.69 0 .31-.04.62-.13.91l5.51 2.92c.6-.86 1.59-1.43 2.72-1.43 1.82 0 3.3 1.48 3.3 3.3s-1.48 3.3-3.3 3.3-3.3-1.48-3.3-3.3c0-.12.01-.24.02-.36L8.67 14.29c-.6.62-1.44 1.01-2.37 1.01C4.48 15.3 3 13.82 3 12s1.48-3.3 3.3-3.3c1.01 0 1.92.46 2.52 1.17l5.63-2.99A3.3 3.3 0 0114.4 6.3z' fill='%23333'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4 6.3C14.4 4.48 15.88 3 17.7 3s3.3 1.48 3.3 3.3-1.48 3.3-3.3 3.3c-1.05 0-1.98-.49-2.59-1.25L9.53 11.31c.05.22.07.45.07.69 0 .31-.04.62-.13.91l5.51 2.92c.6-.86 1.59-1.43 2.72-1.43 1.82 0 3.3 1.48 3.3 3.3s-1.48 3.3-3.3 3.3-3.3-1.48-3.3-3.3c0-.12.01-.24.02-.36L8.67 14.29c-.6.62-1.44 1.01-2.37 1.01C4.48 15.3 3 13.82 3 12s1.48-3.3 3.3-3.3c1.01 0 1.92.46 2.52 1.17l5.63-2.99A3.3 3.3 0 0114.4 6.3z' fill='%23333'/%3E%3C/svg%3E"); }
.ds-icon--print { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.8 2a.8.8 0 00-.8.8V7H3.8A1.8 1.8 0 002 8.8v9.4a.8.8 0 00.8.8h3.4v2.2a.8.8 0 00.8.8h10.2a.8.8 0 00.8-.8v-2.2h3.2a.8.8 0 00.8-.8V8.8A1.8 1.8 0 0020.2 7H18V2.8a.8.8 0 00-.8-.8H6.8zM16.4 7V3.6H7.6V7h8.8zm4 10.4H18v-3.4a.8.8 0 00-.8-.8H7a.8.8 0 00-.8.8v3.4H3.6V8.8a.2.2 0 01.2-.2h16.4a.2.2 0 01.2.2v8.6zM7.8 14.8v5.6h8.6v-5.6H7.8z' fill='%23333'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.8 2a.8.8 0 00-.8.8V7H3.8A1.8 1.8 0 002 8.8v9.4a.8.8 0 00.8.8h3.4v2.2a.8.8 0 00.8.8h10.2a.8.8 0 00.8-.8v-2.2h3.2a.8.8 0 00.8-.8V8.8A1.8 1.8 0 0020.2 7H18V2.8a.8.8 0 00-.8-.8H6.8zM16.4 7V3.6H7.6V7h8.8zm4 10.4H18v-3.4a.8.8 0 00-.8-.8H7a.8.8 0 00-.8.8v3.4H3.6V8.8a.2.2 0 01.2-.2h16.4a.2.2 0 01.2.2v8.6zM7.8 14.8v5.6h8.6v-5.6H7.8z' fill='%23333'/%3E%3C/svg%3E"); }
.ds-icon--facebook { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12.04C22 6.49 17.52 2 12 2S2 6.49 2 12.04c0 4.7 3.23 8.65 7.58 9.74v-6.67H7.52v-3.07h2.06v-1.32c0-3.42 1.54-5 4.88-5 .63 0 1.73.12 2.17.25v2.78c-.24-.02-.65-.04-1.16-.04-1.64 0-2.27.63-2.27 2.25v1.08h3.27l-.56 3.07h-2.7V22c4.95-.6 8.79-4.83 8.79-9.96z' fill='%23333'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12.04C22 6.49 17.52 2 12 2S2 6.49 2 12.04c0 4.7 3.23 8.65 7.58 9.74v-6.67H7.52v-3.07h2.06v-1.32c0-3.42 1.54-5 4.88-5 .63 0 1.73.12 2.17.25v2.78c-.24-.02-.65-.04-1.16-.04-1.64 0-2.27.63-2.27 2.25v1.08h3.27l-.56 3.07h-2.7V22c4.95-.6 8.79-4.83 8.79-9.96z' fill='%23333'/%3E%3C/svg%3E"); }
.ds-icon--x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.62 10.62L19.95 3h-1.5l-5.5 6.62L8.56 3H3.5l6.64 10.01L3.5 21h1.5l5.8-7 4.64 7H20.5l-6.88-10.38zm-2.05 2.47l-.67-1-.6.09 5.54-6.93h2.3l-4.32 6.4.67.99 6.28 8.32h-2.3l-5.23-6.87z' fill='%23333'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.62 10.62L19.95 3h-1.5l-5.5 6.62L8.56 3H3.5l6.64 10.01L3.5 21h1.5l5.8-7 4.64 7H20.5l-6.88-10.38zm-2.05 2.47l-.67-1-.6.09 5.54-6.93h2.3l-4.32 6.4.67.99 6.28 8.32h-2.3l-5.23-6.87z' fill='%23333'/%3E%3C/svg%3E"); }
.ds-icon--kakao { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C6.48 3 2 6.36 2 10.44c0 2.66 1.76 4.99 4.4 6.32l-1.12 4.1a.37.37 0 00.57.4l4.74-3.15c.46.05.93.08 1.41.08 5.52 0 10-3.36 10-7.5S17.52 3 12 3z' fill='%23333'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C6.48 3 2 6.36 2 10.44c0 2.66 1.76 4.99 4.4 6.32l-1.12 4.1a.37.37 0 00.57.4l4.74-3.15c.46.05.93.08 1.41.08 5.52 0 10-3.36 10-7.5S17.52 3 12 3z' fill='%23333'/%3E%3C/svg%3E"); }
.ds-icon--link { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 010-7.07l3.54-3.54a5.003 5.003 0 017.07 0 5.003 5.003 0 010 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a3.003 3.003 0 000-4.24 3.003 3.003 0 00-4.24 0l-3.53 3.53a3.003 3.003 0 000 4.24zm2.82-4.82c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 010 7.07l-3.54 3.54a5.003 5.003 0 01-7.07 0 5.003 5.003 0 010-7.07l1.49-1.49c-.01.82.12 1.64.4 2.42l-.47.48a3.003 3.003 0 000 4.24 3.003 3.003 0 004.24 0l3.53-3.53a3.003 3.003 0 000-4.24.973.973 0 010-1.42z' fill='%23333'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 010-7.07l3.54-3.54a5.003 5.003 0 017.07 0 5.003 5.003 0 010 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a3.003 3.003 0 000-4.24 3.003 3.003 0 00-4.24 0l-3.53 3.53a3.003 3.003 0 000 4.24zm2.82-4.82c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 010 7.07l-3.54 3.54a5.003 5.003 0 01-7.07 0 5.003 5.003 0 010-7.07l1.49-1.49c-.01.82.12 1.64.4 2.42l-.47.48a3.003 3.003 0 000 4.24 3.003 3.003 0 004.24 0l3.53-3.53a3.003 3.003 0 000-4.24.973.973 0 010-1.42z' fill='%23333'/%3E%3C/svg%3E"); }


/* ==================== 9. 목록 — 필터 통합 영역 ==================== */
.pfmc-filter-toolbar {
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-number-8);
}
.pfmc-filter-row {
  display: flex;
  align-items: center;
  gap: var(--ds-number-6);
}
.pfmc-filter-label {
  flex-shrink: 0;
  width: 5rem;
  font-size: var(--ds-pc-font-size-body-small);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
}
.pfmc-date-sep {
  color: var(--ds-light-color-text-subtle);
  flex-shrink: 0;
}
.pfmc-venue-chips {
  display: flex;
  gap: var(--ds-number-3);
  flex-wrap: wrap;
}
.pfmc-venue-chips .ds-tag {
  background-color: var(--ds-light-color-background-white);
}
.pfmc-filter-toolbar .ds-board-toolbar__filters .ds-input[type="date"] {
  width: 16rem;
}


/* ==================== 10. 목록 — 카드 비율·말줄임·페이지네이션 ==================== */
/* DS 카드 타이틀 2줄 영역 + 말줄임 */
.ds-card__title {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-height: calc(var(--ds-typo-line-height-body) * 2em);
}
/* [CUSTOM START: pfmc-card-media title 1줄] 현장 사진/영상·사진·영상 갤러리 카드는 제목 1줄 말줄임 (기능명세서 기준) */
.pfmc-card-media .ds-card__title {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  min-height: 0;
}
/* [CUSTOM END: pfmc-card-media title 1줄] */
/* 카드 하단 정보 줄바꿈 방지 */
.ds-card__info span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 카드그리드 → 페이지네이션 간격 (v1.7.1 §5-1: 100px 고정) */
.ds-card-grid + .ds-pagination {
  margin-top: 10rem;                       /* 100px */
}
/* [CUSTOM START: archive panel-media pagination] 아카이브 panel-media는 카드가 panel-photo/panel-video 래퍼 안에 있어 .ds-card-grid + .ds-pagination 셀렉터가 미매칭 → panel-media 직계 pagination에 직접 CONTENT↔PAGINATION 간격 적용 (v1.7.1 §5-1: 100px) */
.archive-content > #panel-media > .ds-pagination {
  margin-top: 10rem;                       /* 100px */
}
/* [CUSTOM END: archive panel-media pagination] */
/* 카드 링크+액션 분리 구조 (예매하기 버튼용) */
.ds-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-7);       /* 14px — ds-card와 동일 */
  text-decoration: none;
  color: inherit;
  flex: 1;
}
.ds-card__actions {
  padding-top: var(--ds-number-4); /* 8px */
}


/* 아카이브 2차 탭 (pill형, 좌측 정렬) */
#archive-tab-secondary {
  display: flex;
  justify-content: flex-start;
}
/* 검색 → pill 탭 간격 */
.ds-board-toolbar + #archive-tab-secondary {
  margin-top: var(--ds-number-30);   /* 60px */
  margin-bottom: var(--ds-number-10); /* 20px — pill→카드 간격 */
}
@media (max-width: 1199px) {
  .ds-board-toolbar + #archive-tab-secondary {
    margin-top: var(--ds-number-14); /* 28px — 태블릿 */
    margin-bottom: var(--ds-number-7); /* 14px */
  }
}
@media (max-width: 767px) {
  .ds-board-toolbar + #archive-tab-secondary {
    margin-top: var(--ds-number-10); /* 20px — 모바일 */
    margin-bottom: var(--ds-number-5); /* 10px */
  }
}

/* ==================== 11. 아카이브 목록 — 미디어 카드·재생 오버레이 ==================== */
.pfmc-card-poster .ds-card__thumb {
  aspect-ratio: 3 / 4;
}
.pfmc-card-media .ds-card__thumb {
  aspect-ratio: 16 / 9;
}
.pfmc-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pfmc-play-overlay::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #fff;
}
.pfmc-sub-tab {
  margin-bottom: var(--ds-number-8);
}


/* ==================== 11-1. 아카이브 목록 — 탭·필터 간격 ==================== */
/* 1차 탭 하단 여백 */
#archive-tab-primary {
  margin-bottom: var(--ds-number-10);
}
/* 2차 탭 상단/하단 여백 + 하단 라인 제거 */
#archive-tab-secondary {
  margin-top: var(--ds-number-6);
  margin-bottom: var(--ds-number-8);
  border-bottom: none;
}

/* ==================== 12. 아카이브 상세 — 공통 (헤더·CMS) ==================== */
.archive-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-number-8);
}
.archive-header-row .ds-detail-header {
  flex: 1;
  min-width: 0;
}
.archive-cms-text {
  margin-top: var(--ds-number-14);
}
/* 아카이브 상세 — 본문은 ds-detail-body 사용 (layout.css) */
/* 아카이브 상세에서 공유 툴바는 오른쪽 정렬 */
.archive-header-row .ds-share-actions__popover {
  left: auto;
  right: 0;
}


/* ==================== 12-1. 아카이브 상세 — 영상 플레이어 ==================== */
.video-player__frame {
  position: relative;
  width: 100%;
  max-width: 90%;                       /* PUB .archive-v2 동일 — 영상 90% 중앙 */
  margin-inline: auto;
  margin-bottom: var(--ds-number-28);   /* 56px — 영상 ↔ 본문 텍스트 간격 */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ds-radius-medium);
  background-color: #eef2f7;
}
.video-player__frame iframe,
.video-player__frame video {
  width: 100%;
  height: 100%;
  border: 0;
}
.video-player__frame__thumb[src$="no-image-logo.png"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 22%;
  max-height: 30%;
  object-fit: contain;
}
.video-player__frame__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: inline-flex;
}

/* 사진/영상 갤러리 상세 — 헤더 상단 굵은 라인 (일반게시판 상세 .ds-detail-header__tags 와 동일 2px 다크).
   갤러리 상세는 태그블록이 없어 헤더 자체에 적용. 갤러리/영상 상세 래퍼(.archive-detail)에만 한정 —
   일반게시판처럼 plain 클래스로 처리(:has 미사용, 구형 브라우저·캐시 환경에서도 안정 적용). */
.archive-detail > .ds-detail-header {
  border-top: 2px solid var(--ds-color-brand-dark);
  padding-top: var(--ds-number-12);   /* 24px — 라인 → (아래 추가 gap) */
}
/* 타이틀 상단 gap — 공지사항 일반 상세와 정확히 동일하게 맞춤.
   공지: 빈 .ds-detail-header__tags--bbs(라인+padding 24px) + 부모 flex gap 16px = 라인→타이틀 40px.
   갤러리는 태그블록이 없어 그 16px(부모 gap)이 빠지므로 title-row margin-top 16px로 보충 → 24+16=40px 동일. */
.archive-detail > .ds-detail-header > .ds-detail-header__title-row {
  margin-top: var(--ds-number-8);   /* 16px — 공지사항 상세(태그블록↔타이틀 gap)와 동일, 라인→타이틀 총 40px */
}
/* 타이틀 크기 통일 — 일반게시판 상세(공지사항 community-page __title clamp 2.2~3.4rem, PC 34px)와 동일.
   갤러리는 base(--ds-font-size-28=28px)를 써서 더 작았으므로 동일 clamp로 맞춤. */
.archive-detail .ds-detail-header__title {
  font-size: clamp(2.2rem, 2vw + 1.4rem, 3.4rem);
}

/* ==================== 13. 아카이브 상세 — 사진 갤러리 ==================== */
.archive-gallery {
  position: relative;
  max-width: 90%;                       /* 영상(.video-player__frame)과 동일 좌우 여백 — 사진 갤러리도 90% 중앙 */
  margin-inline: auto;
  margin-bottom: var(--ds-number-28);   /* 56px — 갤러리 ↔ 본문 텍스트 간격 (PUB .archive-v2 동일) */
}
/* 사진/영상 갤러리 상세 본문 하단 구분선 (PUB .archive-v2 .ds-detail-body 동일) */
.archive-detail > .ds-detail-body {
  border-bottom: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}
.archive-slide-wrap {
  position: relative;
}
.archive-gallery .ds-img-slide {
  max-width: 100%;
  position: relative;
}
.archive-gallery .ds-img-slide__item img {
  border-radius: var(--ds-radius-medium);
}
.archive-gallery .ds-img-slide__nav { display: none; }
.archive-slide-prev,
.archive-slide-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  color: var(--ds-light-color-text-basic);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: var(--ds-shadow-s);
}
.archive-slide-prev:hover,
.archive-slide-next:hover {
  background: var(--ds-color-gray-0);
  box-shadow: var(--ds-shadow-m);
}
.archive-slide-prev { left: var(--ds-number-4); }
.archive-slide-next { right: var(--ds-number-4); }
.archive-dots {
  position: absolute;
  bottom: var(--ds-number-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--ds-number-4);
  z-index: 5;
}
.archive-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.archive-dot.is-active {
  background: var(--ds-color-gray-0);
  border-color: var(--ds-color-gray-0);
}
.archive-thumb-strip {
  display: flex;
  justify-content: center;
  gap: var(--ds-number-4);
  margin-top: var(--ds-number-6);
  overflow-x: auto;
  padding-bottom: var(--ds-number-2);
  -webkit-overflow-scrolling: touch;
}
.archive-thumb-strip::-webkit-scrollbar { height: 4px; }
.archive-thumb-strip::-webkit-scrollbar-thumb { background: var(--ds-color-gray-20); border-radius: 2px; }
.archive-thumb-item {
  flex-shrink: 0;
  width: 100px;
  height: 70px;
  border-radius: var(--ds-radius-small);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}
.archive-thumb-item.is-active {
  border-color: var(--ds-color-primary-50);
  opacity: 1;
}
.archive-thumb-item:hover { opacity: 0.9; }
.archive-thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ==================== 14. 아카이브 상세 — 영상 플레이어 ==================== */
.archive-intro {
  margin-top: var(--ds-number-14);
}
.archive-video {
  margin-top: var(--ds-number-14);
}
.archive-video-player {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--ds-color-gray-90);
  border-radius: var(--ds-radius-medium);
  overflow: hidden;
}
.archive-video-player__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.archive-video-player__overlay:hover {
  background: rgba(0, 0, 0, 0.15);
}
.archive-video-player__play {
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, background 0.2s;
}
.archive-video-player__play:hover {
  transform: scale(1.08);
  background: var(--ds-color-gray-0);
}
.archive-video-player__play svg {
  margin-left: 3px;
}


/* ==================== 15. 축제·행사 목록 — 필터바 ==================== */
.venue-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.venue-filter .ds-tag {
  cursor: pointer;
}
.filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 32px;
}
.filter-bar__dates {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-bar__dates .ds-input {
  width: 160px;
}
.filter-bar__search {
  flex: 1;
  max-width: 320px;
}
.filter-bar__actions {
  display: flex;
  gap: 8px;
}


/* ==================== 16. 축제·행사 상세 — 오버뷰·섹션·내비게이션 ==================== */
.festival-overview {
  display: flex;
  gap: 40px;
  margin-bottom: 48px;
}
.festival-overview__poster {
  flex: 0 0 33.333%;
  max-width: 33.333%;
}
.festival-overview__poster img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.festival-overview__info {
  flex: 1;
  min-width: 0;
}
.festival-overview__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}
.festival-overview__tags {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.festival-overview__meta {
  margin-bottom: 24px;
}
.festival-overview__meta .venue-info-table__row {
  padding: 10px 0;
}
.festival-overview__actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.festival-share-top {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 24px;
}
.festival-sticky-tab {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-primary, #fff);
  border-bottom: 1px solid var(--color-border-primary, #e0e0e0);
  margin-bottom: 40px;
}
.festival-section {
  margin-bottom: 60px;
  scroll-margin-top: 60px;
}
.festival-bottom-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 40px 0;
  border-top: 1px solid var(--color-border-primary, #e0e0e0);
}


/* ==================== 17. 축제·행사 신청완료 ==================== */
.apply-complete {
  text-align: center;
  padding: 80px 0 60px;
}
.apply-complete__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--ds-color-success-50, #16a34a);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: complete-bounce 0.5s ease-out;
}
.apply-complete__icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.apply-complete__title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}
.apply-complete__subtitle {
  font-size: 16px;
  color: var(--color-text-secondary, #666);
  margin-bottom: 32px;
}
.apply-summary {
  max-width: 480px;
  margin: 0 auto 40px;
  padding: 24px;
  background: var(--color-bg-secondary, #f9f9f9);
  border-radius: 12px;
  text-align: left;
}
.apply-summary__row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-primary, #e5e5e5);
}
.apply-summary__row:last-child {
  border-bottom: none;
}
.apply-summary__label {
  flex: 0 0 100px;
  font-size: 14px;
  color: var(--color-text-secondary, #666);
}
.apply-summary__value {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}
.apply-complete__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
@keyframes complete-bounce {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}


/* ==================== 17-A. 축제·행사 신청 폼 ==================== */
/* 행사 요약 알림 카드 아래 여백 */
.festival-apply__info-alert {
  margin-bottom: var(--ds-number-16);                     /* 32px */
}
/* 알림 카드 행사명 줄 위 여백 */
.festival-apply__info-title {
  margin-top: var(--ds-number-4);                         /* 8px */
}
/* 섹션 헤더 — 폼 그룹 위 여백 */
.festival-apply__section-header {
  margin-bottom: var(--ds-number-12);                     /* 24px */
}
/* 개인정보 섹션 헤더 — 위 여백 추가 */
.festival-apply__section-header--privacy {
  margin-top: var(--ds-number-20);                        /* 40px */
}
/* 참여 날짜 폼 그룹 — 아코디언 이전 추가 여백 */
.festival-apply__form-group--last {
  margin-bottom: var(--ds-number-16);                     /* 32px */
}
/* 개인정보 아코디언 아래 여백 */
.festival-apply__accordion {
  margin-bottom: var(--ds-number-8);                      /* 16px */
}
/* 개인정보 처리방침 링크 행 위 여백 */
.festival-apply__privacy-link-row {
  margin-top: var(--ds-number-4);                         /* 8px */
}
/* 개인정보 처리방침 링크 밑줄 */
.festival-apply__privacy-link {
  text-decoration: underline;
}
/* 개인정보 동의 체크박스 래퍼 아래 여백 */
.festival-apply__agree {
  margin-bottom: var(--ds-number-20);                     /* 40px */
}
/* 폼 하단 버튼 행 — 가운데 정렬 */
.festival-apply__actions {
  display: flex;
  justify-content: center;
  gap: var(--ds-number-6);                                /* 12px */
}


/* ==================== 18. 예매·할인·환불 안내 ==================== */
/* 탭 내비게이션 아래 여백 */
.guide-tab-nav { margin-bottom: var(--ds-number-20); }

/* 섹션 타이틀 → 첫 하위 콘텐츠 간격 */
.guide-sub { margin-top: var(--ds-number-16); }

/* 스테퍼 커넥터 라인 완전 제거 + gap 처리 */
.guide-sub .ds-stepper--numbered .ds-stepper__item::before { display: none !important; }
.guide-sub .ds-stepper--numbered { gap: var(--ds-number-4); }

/* 예매 방법 카드 */
.guide-method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-number-10);
  margin-top: var(--ds-number-8);
}
.guide-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ds-number-12) var(--ds-number-8);
  border-radius: var(--ds-radius-medium);
  background: var(--ds-light-color-surface-gray-subtler);
  transition: box-shadow 0.2s;
}
.guide-method-card:hover { box-shadow: var(--ds-shadow-m); }
.guide-method-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 6.4rem; height: 6.4rem; border-radius: 50%;
  background: var(--ds-color-primary-50); color: var(--ds-color-gray-0);
  margin-bottom: var(--ds-number-8);
}
.guide-method-card__icon svg { width: 3.2rem; height: 3.2rem; }
.guide-method-card__title {
  font-size: var(--ds-pc-font-size-heading-small);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
  margin-bottom: var(--ds-number-4);
}
.guide-method-card__desc {
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-subtle);
  line-height: var(--ds-typo-line-height-body);
}

/* 환불 수수료 리스트 */
.refund-list { display: flex; flex-direction: column; gap: var(--ds-number-4); margin-top: var(--ds-number-8); }
.refund-list__item {
  display: flex; align-items: center; gap: var(--ds-number-6);
  font-size: var(--ds-pc-font-size-body-small); color: var(--ds-light-color-text-basic);
}
.refund-list__period { flex-shrink: 0; width: 16rem; color: var(--ds-light-color-text-subtle); }
.refund-list__rate { flex-shrink: 0; font-weight: var(--ds-typo-font-weight-bold); }

/* 할인 정보형 테이블 — venue-info-table 스타일 재사용 */
.guide-discount-group { margin-top: var(--ds-number-12); }
.guide-discount-group__title {
  font-size: var(--ds-pc-font-size-body-small);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
  margin-bottom: var(--ds-number-4);
}
.guide-discount-table {
  display: flex; flex-direction: column;
  background: var(--ds-color-gray-5);
  border-radius: var(--ds-radius-medium);
  padding: var(--ds-number-4);
  gap: var(--ds-number-1);
}
.guide-discount-table__row {
  display: flex; align-items: baseline; gap: var(--ds-number-8);
  padding: var(--ds-number-5) var(--ds-number-8);
  background: var(--ds-color-gray-0);
  border-radius: var(--ds-radius-small);
  font-size: var(--ds-pc-font-size-body-small);
}
.guide-discount-table__label {
  flex-shrink: 0; min-width: 22rem;
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-light-color-text-subtle);
}
.guide-discount-table__value {
  flex: 1; color: var(--ds-light-color-text-basic);
}

/* 유의사항 */
.guide-notice {
  margin-top: var(--ds-number-16);
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-subtle);
  line-height: var(--ds-typo-line-height-body);
}


/* ==================== 19. 실거주지인증 모달 ==================== */
/* NOTE: body 스타일은 standalone 팝업 페이지 전용 (body.auth-demo로 스코핑) */
body.auth-demo {
  background-color: var(--ds-color-gray-5, #f5f6f7);
  margin: 0;
  padding: var(--ds-number-10, 20px);
}

/* 데모 스테이지 (각 상태별 섹션) */
.demo-stage {
  max-width: 64rem;
  margin: 0 auto var(--ds-number-16, 32px);
  padding: var(--ds-number-12, 24px);
  background-color: var(--ds-color-gray-10, #ecedef);
  border-radius: var(--ds-radius-medium, 8px);
}
.demo-stage:last-child {
  margin-bottom: 0;
}

/* 데모 레이블 */
.demo-label {
  font-size: var(--ds-pc-font-size-body-small, 14px);
  font-weight: var(--ds-typo-font-weight-semibold, 600);
  color: var(--ds-color-gray-50, #73787e);
  margin-bottom: var(--ds-number-8, 16px);
  padding: var(--ds-number-3, 6px) var(--ds-number-6, 12px);
  background-color: var(--ds-color-gray-20, #cdd1d5);
  border-radius: var(--ds-radius-small, 4px);
  display: inline-block;
  letter-spacing: -0.02em;
}
.demo-label__sub {
  display: block;
  font-size: var(--ds-pc-font-size-caption, 12px);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  color: var(--ds-color-gray-40, #898f96);
  margin-top: var(--ds-number-1, 2px);
}

/* 모달 카드 */
.auth-modal {
  max-width: 52rem;
  margin: var(--ds-number-8, 16px) auto 0;
  background-color: var(--ds-light-color-background-white, #fff);
  border-radius: var(--ds-radius-large, 12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* 모달 헤더 */
.auth-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-number-8, 16px) var(--ds-number-10, 20px);
  border-bottom: var(--ds-border-width-thin, 1px) solid var(--ds-light-color-border-gray-light, #ecedef);
}
.auth-modal__title {
  font-size: var(--ds-pc-font-size-heading-small, 18px);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-light-color-text-default, #1a1c1e);
  display: flex;
  align-items: center;
  gap: var(--ds-number-3, 6px);
  margin: 0;
}
.auth-modal__title-icon {
  font-size: 1.2em;
}
.auth-modal__close {
  width: var(--ds-size-height-2, 32px);
  height: var(--ds-size-height-2, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ds-color-gray-40, #898f96);
  font-size: var(--ds-pc-font-size-body-large, 18px);
  border-radius: var(--ds-radius-small, 4px);
  transition: background-color 0.2s;
}
.auth-modal__close:hover {
  background-color: var(--ds-color-gray-5, #f5f6f7);
}
.auth-modal__close:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* 모달 바디 */
.auth-modal__body {
  padding: var(--ds-number-10, 20px);
}

/* 모달 푸터 */
.auth-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-number-4, 8px);
  padding: var(--ds-number-6, 12px) var(--ds-number-10, 20px);
  border-top: var(--ds-border-width-thin, 1px) solid var(--ds-light-color-border-gray-light, #ecedef);
}
.auth-modal__footer--between {
  justify-content: space-between;
}

/* 동의 섹션 */
.auth-consent__title {
  font-size: var(--ds-pc-font-size-body-default, 16px);
  font-weight: var(--ds-typo-font-weight-semibold, 600);
  color: var(--ds-light-color-text-default, #1a1c1e);
  margin: 0 0 var(--ds-number-5, 10px);
  display: flex;
  align-items: center;
  gap: var(--ds-number-3, 6px);
}
.auth-consent__title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--ds-light-color-brand-primary, #2563eb);
  border-radius: 1px;
  flex-shrink: 0;
}
.auth-consent {
  max-height: 18rem;
  overflow-y: auto;
  padding: var(--ds-number-7, 14px);
  border: var(--ds-border-width-thin, 1px) solid var(--ds-light-color-border-gray-light, #ecedef);
  border-radius: var(--ds-radius-small, 4px);
  background-color: var(--ds-color-gray-5, #f5f6f7);
  font-size: var(--ds-pc-font-size-body-small, 14px);
  line-height: var(--ds-typo-line-height-relaxed, 1.8);
  color: var(--ds-light-color-text-subtle, #73787e);
  margin-bottom: var(--ds-number-6, 12px);
}
.auth-consent p {
  margin: 0 0 var(--ds-number-5, 10px);
}
.auth-consent p:last-child {
  margin-bottom: 0;
}
.auth-consent ul {
  margin: 0 0 var(--ds-number-5, 10px);
  padding-left: var(--ds-number-8, 16px);
  list-style: disc;
}
.auth-consent li {
  margin-bottom: var(--ds-number-2, 4px);
}

/* 구분선 */
.auth-separator {
  border: none;
  border-top: var(--ds-border-width-thin, 1px) solid var(--ds-light-color-border-gray-light, #ecedef);
  margin: var(--ds-number-8, 16px) 0;
}

/* 본인정보 입력 폼 */
.auth-form-row {
  display: flex;
  align-items: center;
  gap: var(--ds-number-4, 8px);
  margin-bottom: var(--ds-number-5, 10px);
}
.auth-form-row:last-child {
  margin-bottom: 0;
}
.auth-form-row__label {
  flex-shrink: 0;
  width: 8rem;
  font-size: var(--ds-pc-font-size-body-small, 14px);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  color: var(--ds-light-color-text-default, #1a1c1e);
}
.auth-form-row__fields {
  display: flex;
  align-items: center;
  gap: var(--ds-number-3, 6px);
  flex: 1;
}
.auth-form-row__separator {
  font-size: var(--ds-pc-font-size-body-default, 16px);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-gray-30, #b0b5bb);
}
.auth-form-row__hint {
  font-size: var(--ds-pc-font-size-caption, 12px);
  color: var(--ds-light-color-text-subtle, #73787e);
  margin-top: var(--ds-number-2, 4px);
  padding-left: 8.5rem;
}

/* 로딩 화면 */
.auth-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ds-number-20, 40px) var(--ds-number-10, 20px);
  gap: var(--ds-number-8, 16px);
}
.auth-loading__text {
  font-size: var(--ds-pc-font-size-body-default, 16px);
  color: var(--ds-light-color-text-subtle, #73787e);
  text-align: center;
}
.auth-loading .ds-spinner {
  width: 48px;
  height: 48px;
}

/* 인증 결과 화면 */
.auth-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ds-number-14, 28px) var(--ds-number-10, 20px);
}
.auth-result__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--ds-radius-full, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: var(--ds-number-7, 14px);
}
.auth-result__icon--success {
  background-color: #e8f5e9;
  color: #2e7d32;
}
.auth-result__icon--fail {
  background-color: #fff3e0;
  color: #e65100;
}
.auth-result__title {
  font-size: var(--ds-pc-font-size-body-large, 18px);
  font-weight: var(--ds-typo-font-weight-semibold, 600);
  color: var(--ds-light-color-text-default, #1a1c1e);
  margin: 0 0 var(--ds-number-2, 4px);
}
.auth-result__desc {
  font-size: var(--ds-pc-font-size-body-small, 14px);
  color: var(--ds-light-color-text-subtle, #73787e);
  margin: 0 0 var(--ds-number-8, 16px);
  line-height: var(--ds-typo-line-height-relaxed, 1.8);
}

/* 인증 정보 테이블 */
.auth-result__info {
  width: 100%;
  max-width: 28rem;
  border: var(--ds-border-width-thin, 1px) solid var(--ds-light-color-border-gray-light, #ecedef);
  border-radius: var(--ds-radius-small, 4px);
  overflow: hidden;
  margin-bottom: var(--ds-number-8, 16px);
}
.auth-result__info-row {
  display: flex;
  border-bottom: var(--ds-border-width-thin, 1px) solid var(--ds-light-color-border-gray-light, #ecedef);
}
.auth-result__info-row:last-child {
  border-bottom: none;
}
.auth-result__info-label {
  flex-shrink: 0;
  width: 7rem;
  padding: var(--ds-number-4, 8px) var(--ds-number-5, 10px);
  background-color: var(--ds-color-gray-5, #f5f6f7);
  font-size: var(--ds-pc-font-size-body-small, 14px);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  color: var(--ds-light-color-text-subtle, #73787e);
}
.auth-result__info-value {
  flex: 1;
  padding: var(--ds-number-4, 8px) var(--ds-number-5, 10px);
  font-size: var(--ds-pc-font-size-body-small, 14px);
  color: var(--ds-light-color-text-default, #1a1c1e);
}

/* 결과 버튼 그룹 */
.auth-result__actions {
  display: flex;
  gap: var(--ds-number-4, 8px);
  margin-top: var(--ds-number-4, 8px);
}


/* ==================== 20. 예매하기 (인터파크 솔루션) ==================== */
/* 데모 스테이지 — 예매하기 전용 오버라이드 */
.demo-stage--booking {
  background: var(--ds-light-color-surface-gray-subtler);
  padding: var(--ds-number-16);
  margin-bottom: var(--ds-number-16);
  border-radius: var(--ds-radius-medium);
}

/* 데모 레이블 태그 */
.demo-label__tag {
  font-size: var(--ds-pc-font-size-body-xsmall);
  font-weight: var(--ds-typo-font-weight-semibold);
  color: var(--ds-color-gray-0);
  background: var(--ds-color-primary-50);
  padding: 0.2rem 0.8rem;
  border-radius: var(--ds-radius-xsmall);
}

/* 브라우저 팝업 프레임 시뮬레이션 */
.popup-frame {
  background: var(--ds-light-color-background-white);
  border-radius: var(--ds-radius-large);
  box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.18);
  overflow: hidden;
  max-width: 108rem;
  margin: 0 auto;
}
.popup-frame__titlebar {
  display: flex;
  align-items: center;
  gap: var(--ds-number-5);
  padding: var(--ds-number-5) var(--ds-number-8);
  background: var(--ds-color-gray-10);
  border-bottom: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}
.popup-frame__dots {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.popup-frame__dot {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
}
.popup-frame__dot--red { background: #ff5f57; }
.popup-frame__dot--yellow { background: #febc2e; }
.popup-frame__dot--green { background: #28c840; }
.popup-frame__url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--ds-light-color-background-white);
  border-radius: var(--ds-radius-small);
  padding: 0.4rem 1rem;
  font-size: 1.1rem;
  color: var(--ds-light-color-text-subtle);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.popup-frame__url-lock {
  flex-shrink: 0;
  font-size: 1rem;
}
.popup-frame__body {
  padding: 0;
}

/* 팝업 헤더 */
.booking-header {
  background: var(--ds-color-gray-90);
  color: var(--ds-color-gray-0);
  padding: var(--ds-number-8) var(--ds-number-14);
  font-size: var(--ds-pc-font-size-heading-small);
  font-weight: var(--ds-typo-font-weight-bold);
  letter-spacing: var(--ds-typo-letter-spacing);
}

/* 예매 스텝퍼 (Interpark 스타일) */
.booking-stepper {
  display: flex;
  align-items: stretch;
  background: var(--ds-color-gray-5);
  border-bottom: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}
.booking-stepper__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--ds-number-6) var(--ds-number-4);
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-disabled);
  position: relative;
  white-space: nowrap;
}
.booking-stepper__item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-left: 0.6rem solid var(--ds-light-color-border-gray-light);
}
.booking-stepper__item:last-child::after {
  display: none;
}
.booking-stepper__item.is-active {
  background: var(--ds-color-primary-50);
  color: var(--ds-color-gray-0);
  font-weight: var(--ds-typo-font-weight-bold);
}
.booking-stepper__item.is-active::after {
  border-left-color: var(--ds-color-primary-50);
}
.booking-stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: var(--ds-typo-font-weight-bold);
  border: var(--ds-border-width-thin) solid currentColor;
  flex-shrink: 0;
}
.booking-stepper__item.is-active .booking-stepper__num {
  background: var(--ds-color-gray-0);
  color: var(--ds-color-primary-50);
  border-color: var(--ds-color-gray-0);
}

/* 메인 콘텐츠 3-column 레이아웃 */
.booking-main {
  display: grid;
  grid-template-columns: 30rem 1fr 28rem;
  gap: 0;
  min-height: 48rem;
}
.booking-main__left,
.booking-main__center,
.booking-main__right {
  padding: var(--ds-number-10);
}
.booking-main__left {
  border-right: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}
.booking-main__right {
  background: var(--ds-color-gray-5);
  border-left: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}
.booking-section-title {
  font-size: var(--ds-pc-font-size-body-medium);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
  margin-bottom: var(--ds-number-6);
  padding-bottom: var(--ds-number-3);
  border-bottom: 2px solid var(--ds-light-color-text-bolder);
}

/* 캘린더 (Interpark 스타일) */
.booking-calendar {
  width: 100%;
}
.booking-calendar__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-5);
  margin-bottom: var(--ds-number-6);
}
.booking-calendar__title {
  font-size: var(--ds-pc-font-size-body-large);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
}
.booking-calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray);
  border-radius: var(--ds-radius-xsmall);
  background: var(--ds-light-color-background-white);
  color: var(--ds-light-color-text-subtle);
  cursor: pointer;
  font-size: 1.2rem;
}
.booking-calendar__nav:hover {
  background: var(--ds-light-color-surface-gray-subtler);
}
.booking-calendar__grid {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.booking-calendar__grid th {
  padding: 0.6rem 0;
  font-size: var(--ds-pc-font-size-body-xsmall);
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-light-color-text-subtle);
  border-bottom: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}
.booking-calendar__grid th:first-child { color: var(--ds-color-danger-50); }
.booking-calendar__grid th:last-child { color: var(--ds-color-information-50); }
.booking-calendar__grid td {
  padding: 0.3rem;
  vertical-align: middle;
}
.booking-calendar__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-basic);
  cursor: default;
}
.booking-calendar__day--sun { color: var(--ds-color-danger-50); }
.booking-calendar__day--sat { color: var(--ds-color-information-50); }
.booking-calendar__day--other { color: var(--ds-light-color-text-disabled); }
.booking-calendar__day--available {
  background: var(--ds-color-primary-5);
  color: var(--ds-color-primary-60);
  font-weight: var(--ds-typo-font-weight-bold);
  cursor: pointer;
}
.booking-calendar__day--available:hover {
  background: var(--ds-color-primary-10);
}
.booking-calendar__day--today {
  border: 2px solid var(--ds-color-primary-50);
  font-weight: var(--ds-typo-font-weight-bold);
}
.booking-calendar__day--selected {
  background: var(--ds-color-primary-50) !important;
  color: var(--ds-color-gray-0) !important;
  font-weight: var(--ds-typo-font-weight-bold);
}
.booking-calendar__legend {
  display: flex;
  gap: var(--ds-number-8);
  margin-top: var(--ds-number-6);
  font-size: var(--ds-pc-font-size-body-xsmall);
  color: var(--ds-light-color-text-subtle);
}
.booking-calendar__legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.booking-calendar__legend-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 2px;
}
.booking-calendar__legend-dot--available {
  background: var(--ds-color-primary-5);
  border: 1px solid var(--ds-color-primary-50);
}
.booking-calendar__legend-dot--selected {
  background: var(--ds-color-primary-50);
}

/* 회차/좌석 플레이스홀더 */
.booking-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  background: var(--ds-light-color-surface-gray-subtler);
  border: var(--ds-border-width-thin) dashed var(--ds-light-color-border-gray);
  border-radius: var(--ds-radius-small);
  color: var(--ds-light-color-text-subtle);
  font-size: var(--ds-pc-font-size-body-medium);
  text-align: center;
  padding: var(--ds-number-8);
}

/* My예매정보 사이드바 */
.booking-sidebar {
  font-size: var(--ds-pc-font-size-body-xsmall);
}
.booking-sidebar__poster {
  display: flex;
  gap: var(--ds-number-5);
  margin-bottom: var(--ds-number-8);
  padding-bottom: var(--ds-number-6);
  border-bottom: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}
.booking-sidebar__thumb {
  width: 7rem;
  height: 9.5rem;
  background: var(--ds-color-gray-20);
  border-radius: var(--ds-radius-xsmall);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ds-light-color-text-disabled);
  font-size: 2.4rem;
}
.booking-sidebar__info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.booking-sidebar__show-name {
  font-size: var(--ds-pc-font-size-body-small);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
  line-height: 1.4;
}
.booking-sidebar__meta {
  font-size: 1.1rem;
  color: var(--ds-light-color-text-subtle);
  line-height: 1.5;
}
.booking-sidebar__rows {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-3);
}
.booking-sidebar__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ds-number-3) 0;
  border-bottom: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}
.booking-sidebar__row-label {
  color: var(--ds-light-color-text-subtle);
}
.booking-sidebar__row-value {
  font-weight: var(--ds-typo-font-weight-semibold);
  color: var(--ds-light-color-text-basic);
}
.booking-sidebar__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ds-number-6) 0;
  margin-top: var(--ds-number-4);
  border-top: 2px solid var(--ds-light-color-text-bolder);
}
.booking-sidebar__total-label {
  font-size: var(--ds-pc-font-size-body-small);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
}
.booking-sidebar__total-value {
  font-size: var(--ds-pc-font-size-body-large);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-primary-50);
}

/* 유의사항 */
.booking-notice {
  padding: var(--ds-number-8) var(--ds-number-14);
  background: var(--ds-color-gray-5);
  border-top: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}
.booking-notice__title {
  font-size: var(--ds-pc-font-size-body-small);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
  margin-bottom: var(--ds-number-4);
}
.booking-notice__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.booking-notice__list li {
  position: relative;
  padding-left: var(--ds-number-6);
  font-size: 1.15rem;
  color: var(--ds-light-color-text-subtle);
  line-height: 1.6;
}
.booking-notice__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ds-light-color-text-subtle);
}

/* 하단 네비게이션 버튼바 */
.booking-bottombar {
  display: flex;
  justify-content: space-between;
  padding: var(--ds-number-6) var(--ds-number-14);
  background: var(--ds-light-color-background-white);
  border-top: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}

/* 팝업 차단 안내 모달 (STATE 2) */
.popup-blocked {
  max-width: 52rem;
  margin: 0 auto;
}
.popup-blocked__alert {
  display: flex;
  align-items: center;
  gap: var(--ds-number-4);
  padding: var(--ds-number-6) var(--ds-number-8);
  background: var(--ds-color-danger-5);
  border: var(--ds-border-width-thin) solid var(--ds-color-danger-20);
  border-radius: var(--ds-radius-small);
  margin-bottom: var(--ds-number-10);
  font-size: var(--ds-pc-font-size-body-medium);
  color: var(--ds-color-danger-50);
}
.popup-blocked__steps {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-8);
  padding: var(--ds-number-8) 0;
}
.popup-blocked__step {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-number-5);
}
.popup-blocked__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--ds-color-primary-50);
  color: var(--ds-color-gray-0);
  font-size: var(--ds-pc-font-size-body-xsmall);
  font-weight: var(--ds-typo-font-weight-bold);
  flex-shrink: 0;
}
.popup-blocked__step-text {
  font-size: var(--ds-pc-font-size-body-medium);
  color: var(--ds-light-color-text-basic);
  line-height: var(--ds-typo-line-height-body);
}
.popup-blocked__step-text strong {
  color: var(--ds-light-color-text-bolder);
}

/* 예매 취소 확인 모달 (STATE 3) */
.confirm-modal {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}
.confirm-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--ds-color-warning-5);
  margin: 0 auto var(--ds-number-8);
  font-size: 2.8rem;
}
.confirm-modal__title {
  font-size: var(--ds-pc-font-size-heading-small);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
  margin-bottom: var(--ds-number-4);
}
.confirm-modal__desc {
  font-size: var(--ds-pc-font-size-body-medium);
  color: var(--ds-light-color-text-subtle);
  line-height: var(--ds-typo-line-height-body);
  margin-bottom: var(--ds-number-10);
}


/* ==================== 21. 공연·전시 목록 v2 — 필터 바 + 4열 카드 ==================== */

/* 필터 바 — 가로 한 줄 배치 */
.pfmc-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--ds-number-6);                                 /* 12px */
  padding: var(--ds-number-8) var(--ds-number-10);         /* 16px 20px */
  background: var(--ds-color-gray-5);
  border-radius: var(--ds-radius-medium);
}
.pfmc-filter-bar .ds-select {
  width: 18rem;
  flex-shrink: 0;
}
.pfmc-filter-bar__dates {
  display: flex;
  align-items: center;
  gap: var(--ds-number-3);                                 /* 6px */
  flex-shrink: 0;
}
.pfmc-filter-bar__dates .ds-input {
  width: 16rem;
}
.pfmc-filter-bar__dates .pfmc-filter-bar__sep {
  color: var(--ds-light-color-text-subtle);
  font-size: var(--ds-pc-font-size-body-small);
}
.pfmc-filter-bar__keyword {
  flex: 1;
  min-width: 16rem;
}
.pfmc-filter-bar__actions {
  display: flex;
  gap: var(--ds-number-3);                                 /* 6px */
  flex-shrink: 0;
}

/* 카드 오버레이 배지 — 포스터 위 (넉넉한 여백) */
.pfmc-card__badge-status {
  position: absolute;
  top: var(--ds-number-8);                                 /* 16px */
  left: var(--ds-number-8);
  z-index: 1;
}
/* 카드 본문 — 구분 텍스트 + 메타 */
.pfmc-card .ds-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-3);                                 /* 6px */
}
.pfmc-card .ds-card__body > .ds-tag {
  align-self: flex-start;                                  /* 태그 폭 늘어남 방지 */
}
/* 공연/전시 구분 텍스트 — 목록에서 잘 보이도록 크기 확대 */
.pfmc-card__type {
  font-size: var(--ds-pc-font-size-body-small);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-primary-50);
}
.pfmc-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-1);                                 /* 2px */
  font-size: var(--ds-pc-font-size-body-xsmall);
  color: var(--ds-light-color-text-subtle);
  line-height: var(--ds-typo-line-height-body);
}
.pfmc-card__meta .ds-icon {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}
.pfmc-card__meta-row {
  display: flex;
  align-items: baseline;
  gap: var(--ds-number-2);                                 /* 4px */
}

/* 카드 인터랙션 — DS 기본 hover만 사용 (이미지 줌 + 제목 색상 변경) */
.pfmc-card {
  cursor: pointer;
}

/* 예매하기 버튼 — 카드 하단 */
.pfmc-card .ds-card__actions {
  padding-top: var(--ds-number-3);                         /* 6px */
}

/* 총건수+정렬 바 — 필터 바 아래, 카드 그리드 위 간격 */
.pfmc-filter-bar + .ds-board-list__top {
  margin-top: var(--ds-number-12);                         /* 24px */
  margin-bottom: var(--ds-number-8);                       /* 16px */
}

/* 카드 메타 그룹 (기간 + 장소 묶음) — 공고목록 패턴 통일 */
.pfmc-card-grid .ds-card__meta-group {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-1);                                   /* 2px */
}
.pfmc-card-grid .ds-card__meta {
  font-size: var(--ds-font-size-13);
  color: var(--ds-color-gray-50);
  line-height: var(--ds-typo-line-height-body);
  margin: 0;
}

/* 구분 태그 아웃라인 — 카드 + 상세 공용 */
.pfmc-card-grid .ds-badge--outline,
.pfmc-detail-badges .ds-badge--outline {
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--ds-color-gray-70);
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-30);
}

/* 카드 배지: 좌측(구분 태그) + 우측(상태 배지) 분리 */
.pfmc-card-grid .ds-card__badges--left {
  left: var(--ds-number-6);
  right: auto;
}
.pfmc-card-grid .ds-card__badges:not(.ds-card__badges--left) {
  left: auto;
  right: var(--ds-number-6);
}

/* 4열 카드 그리드 반응형 오버라이드 — 기능명세서 기준 */
.pfmc-card-grid.ds-card-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ==================== 21-1. 축제·행사 목록 v2 — 상세검색 패널 ==================== */
.pfmc-advanced-search {
  padding: var(--ds-number-8) var(--ds-number-10);           /* 16px 20px */
  background: var(--ds-color-gray-5);
  border-radius: 0 0 var(--ds-radius-medium) var(--ds-radius-medium);
  margin-top: calc(-1 * var(--ds-number-2));                 /* 필터바와 붙이기 */
}
.pfmc-advanced-search__row {
  display: flex;
  gap: var(--ds-number-12);                                  /* 24px */
  flex-wrap: wrap;
}
.pfmc-advanced-search__field {
  display: flex;
  align-items: center;
  gap: var(--ds-number-4);                                   /* 8px */
}
.pfmc-advanced-search__label {
  font-size: var(--ds-pc-font-size-body-small);
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-light-color-text-sub);
  white-space: nowrap;
  min-width: 8rem;
}
.pfmc-advanced-search__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-number-3);                                   /* 6px */
  margin-top: var(--ds-number-6);                            /* 12px */
}


/* ==================== 21. 온라인전시관 — 인트로 + 카드 쇼케이스 ==================== */

/* V01. 인트로 텍스트 */
.online-gallery-intro {
  text-align: center;
  padding: var(--ds-number-15) 0 var(--ds-number-10);
}
.online-gallery-intro__text {
  font-size: var(--ds-font-size-16);
  line-height: var(--ds-typo-line-height-body);
  color: var(--ds-light-color-text-sub);
}

/* V02. 카드 그리드 간격 */
.online-gallery-grid {
  padding-bottom: var(--ds-number-20);
}

/* 카드를 <a> 태그로 사용할 때 링크 스타일 초기화 */
a.online-gallery-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--ds-radius-medium);
  overflow: hidden;
  border: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
a.online-gallery-card:hover {
  box-shadow: var(--ds-shadow-l);
  transform: translateY(-4px);
}

/* 썸네일 이미지 줌 효과 */
.online-gallery-card__thumb {
  position: relative;
  overflow: hidden;
}
.online-gallery-card__thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s ease;
}
a.online-gallery-card:hover .online-gallery-card__thumb img {
  transform: scale(1.05);
}

/* 유형 배지 (이미지 좌상단) */
.online-gallery-card__badge {
  position: absolute;
  top: var(--ds-number-4);
  left: var(--ds-number-4);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-2);
  padding: var(--ds-number-2) var(--ds-number-4);
  background: var(--ds-color-alpha-black50);
  color: var(--ds-color-gray-0);
  font-size: var(--ds-font-size-12);
  font-weight: var(--ds-typo-font-weight-medium);
  border-radius: var(--ds-radius-small);
  line-height: 1;
}
.online-gallery-card__badge svg {
  flex-shrink: 0;
}

/* 카드 바디 */
.online-gallery-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-3);
  padding: var(--ds-number-8);
}
.online-gallery-card__title {
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-basic);
}
.online-gallery-card__desc {
  font-size: var(--ds-font-size-14);
  color: var(--ds-light-color-text-sub);
  line-height: var(--ds-typo-line-height-body);
}

/* CTA 버튼 */
.online-gallery-card__cta {
  align-self: flex-start;
  margin-top: var(--ds-number-2);
  pointer-events: none;
}


/* ============================================================
   반응형 — 태블릿 (768px ~ 1199px)
   ============================================================ */
@media (max-width: 1199px) {
  /* v2: 태블릿 — 필터 바 줄바꿈 + 카드 3열 */
  .pfmc-filter-bar {
    flex-wrap: wrap;
  }
  .pfmc-filter-bar__keyword {
    min-width: 0;
    flex-basis: 100%;
  }
  .pfmc-card-grid.ds-card-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }

  .pfmc-layout {
    grid-template-columns: 26rem 1fr;                    /* 260px */
    gap: var(--ds-number-20);                            /* 40px */
  }
  .pfmc-content .ds-card-grid--3 {
    grid-template-columns: repeat(2, 1fr);               /* 태블릿: 2열 */
  }
  .pfmc-sidebar {
    position: relative;                                  /* sticky 해제 */
  }
  /* 상세 — 태블릿: 그리드 gap 축소 */
  .venue-layout {
    gap: var(--ds-number-16);                            /* 32px */
  }
  .pfmc-detail-hero__body {
    grid-template-columns: 28rem 1fr;
    gap: var(--ds-number-14);
  }
  .pfmc-detail-title {
    font-size: 2.8rem;
  }
}

/* ============================================================
   반응형 — 태블릿 (~1023px)
   ============================================================ */
@media (max-width: 1023px) {
  /* 상세 — 태블릿: 포스터+정보 세로 배치 */
  .venue-layout {
    grid-template-columns: 1fr;
    gap: var(--ds-number-12);
  }
  .venue-layout__media {
    position: relative;
    top: auto;
    max-width: 36rem;                                    /* 포스터 최대 폭 제한 */
  }
  .filter-bar {
    flex-wrap: wrap;
  }
  .filter-bar__dates .ds-input {
    width: 140px;
  }
  .filter-bar__search {
    max-width: none;
    flex-basis: 100%;
  }
  /* 예매 — 태블릿: 1열 */
  .booking-main {
    grid-template-columns: 1fr;
  }
  .booking-main__left {
    border-right: none;
    border-bottom: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
  }
  .booking-main__right {
    border-left: none;
    border-top: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
  }
  .booking-stepper__item {
    font-size: 1.1rem;
    padding: var(--ds-number-4) var(--ds-number-2);
  }
}

/* ============================================================
   반응형 — 모바일 (~767px)
   ============================================================ */
@media (max-width: 767px) {
  /* v2: 모바일 — 필터 세로 스택 + 카드 2열 */
  .pfmc-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .pfmc-filter-bar .ds-select {
    width: 100%;
  }
  .pfmc-filter-bar__dates {
    width: 100%;
  }
  .pfmc-filter-bar__dates .ds-input {
    flex: 1;
    width: auto;
  }
  .pfmc-filter-bar__keyword {
    min-width: 0;
    width: 100%;
  }
  .pfmc-filter-bar__actions {
    width: 100%;
  }
  .pfmc-filter-bar__actions .ds-btn {
    flex: 1;
  }
  .pfmc-card-grid.ds-card-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 공연·전시 목록 — 모바일: 1열 세로 스택 */
  .pfmc-layout {
    grid-template-columns: 1fr;
    gap: var(--ds-number-10);                            /* 20px */
  }
  .pfmc-content .ds-card-grid--3 {
    grid-template-columns: 1fr;                          /* 모바일: 1열 */
  }
  .pfmc-sidebar {
    position: relative;
    padding: var(--ds-number-8);                         /* 모바일 패딩 축소 */
  }
  .pfmc-sidebar__title {
    font-size: var(--ds-mobile-font-size-body-small);
  }
  .pfmc-filter-chips .ds-tag {
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }

  /* 필터 토글 — 모바일에서 표시 */
  .pfmc-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-number-3);
    width: 100%;
    padding: var(--ds-number-4);
    font-size: var(--ds-mobile-font-size-body-small);
    font-weight: var(--ds-typo-font-weight-medium);
    color: var(--ds-light-color-text-basic);
    background: var(--ds-color-gray-5);
    border: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
    border-radius: var(--ds-radius-small);
    cursor: pointer;
    transition: background 0.15s;
  }
  .pfmc-filter-toggle:hover {
    background: var(--ds-light-color-surface-gray-subtle);
  }
  .pfmc-filter-toggle .ds-icon--chevron-down {
    transition: transform 0.2s;
  }
  .pfmc-filter-toggle[aria-expanded="true"] .ds-icon--chevron-down {
    transform: rotate(180deg);
  }
  /* 필터 영역 — 모바일에서 기본 숨김 */
  .pfmc-filters {
    display: none;
    border-top: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
    padding-top: var(--ds-number-8);
  }
  .pfmc-filters.is-open {
    display: flex;
  }
  .pfmc-calendar__table th,
  .pfmc-calendar__table td {
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  .pfmc-calendar__legend-item {
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }

  /* 상세 v2 매거진 — 모바일 */
  .pfmc-detail-hero__header {
    margin-bottom: var(--ds-number-10);
  }
  .pfmc-detail-hero__meta {
    margin-bottom: var(--ds-number-3);
  }
  .pfmc-detail-title {
    font-size: 2.4rem;
  }
  .pfmc-info-list__label {
    width: 7rem;                                         /* 70px — 모바일 라벨 축소 */
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  .pfmc-info-list__value {
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  .pfmc-detail-hero__body {
    grid-template-columns: 1fr;
    gap: var(--ds-number-8);
  }
  .pfmc-detail-hero__poster {
    position: relative;
    max-width: 100%;
    width: 100%;
  }
  .pfmc-key-info__value {
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .pfmc-sub-info {
    grid-template-columns: 1fr;
  }
  /* 모바일: 플로팅 CTA 표시 시 본문 예매하기 버튼 숨김 */
  .pfmc-detail-cta {
    display: none;
  }
  .pfmc-detail-section {
    margin-top: 5rem;
  }
  .pfmc-detail-section__title {
    font-size: var(--ds-mobile-font-size-heading-small);
  }
  /* 모바일 플로팅 CTA */
  .pfmc-floating-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--ds-number-4) var(--ds-mobile-padding-layout-side);
    background: var(--ds-color-gray-0);
    border-top: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
    box-shadow: var(--ds-shadow-m);
  }
  .pfmc-floating-cta .ds-btn {
    width: 100%;
  }
  .site-main {
    padding-bottom: 0;
  }

  /* 카드그리드 → 페이지네이션 간격 (v1.7.1 §5-1: 모바일도 100px 고정) */
  .ds-card-grid + .ds-pagination {
    margin-top: 10rem;                     /* 100px */
  }
  /* 필터 — 모바일 */
  .pfmc-filter-row {
    flex-wrap: wrap;
  }
  .pfmc-filter-label {
    width: 100%;
    margin-bottom: var(--ds-number-2);
  }
  /* 축제행사 목록 필터 */
  .venue-filter {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .venue-filter .ds-tag {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .filter-bar {
    flex-direction: column;
  }
  .filter-bar__dates {
    width: 100%;
  }
  .filter-bar__dates .ds-input {
    flex: 1;
    width: auto;
  }
  .filter-bar__search {
    width: 100%;
  }
  /* 축제행사 상세 */
  .festival-overview {
    flex-direction: column;
    gap: 24px;
  }
  .festival-overview__poster {
    flex: none;
    max-width: 100%;
  }
  .festival-overview__title {
    font-size: 22px;
  }
  .festival-overview__actions {
    flex-direction: column;
  }
  .festival-overview__actions .ds-btn {
    width: 100%;
    justify-content: center;
  }
  /* 축제행사 신청완료 */
  .apply-complete {
    padding: 60px 0 40px;
  }
  .apply-complete__title {
    font-size: 20px;
  }
  .apply-complete__actions {
    flex-direction: column;
    padding: 0 20px;
  }
  .apply-complete__actions .ds-btn {
    width: 100%;
    justify-content: center;
  }
  /* 아카이브 상세 */
  .archive-header-row {
    flex-direction: column;
    gap: var(--ds-number-4);
  }
  .archive-header-row .ds-share-actions {
    align-self: flex-end;
  }
  .archive-thumb-item {
    width: 60px;
    height: 60px;
  }
  .archive-video-player__play {
    width: 56px;
    height: 56px;
  }
  /* 예매안내 */
  .guide-method-grid { grid-template-columns: 1fr; gap: var(--ds-number-6); }
  .guide-method-card {
    flex-direction: row; text-align: left;
    padding: var(--ds-number-8) var(--ds-number-6); gap: var(--ds-number-6);
  }
  .guide-method-card__icon { width: 4.8rem; height: 4.8rem; flex-shrink: 0; margin-bottom: 0; }
  .guide-method-card__icon svg { width: 2.4rem; height: 2.4rem; }
  .guide-method-card__title { font-size: var(--ds-mobile-font-size-heading-small); margin-bottom: var(--ds-number-2); }
  .guide-method-card__desc { font-size: var(--ds-mobile-font-size-body-small); }
  .refund-list__period { width: 12rem; }
  .guide-discount-table__label { min-width: 14rem; }
  .guide-discount-table__row { font-size: var(--ds-mobile-font-size-body-small); }
  /* 실거주지인증 */
  body.auth-demo { padding: var(--ds-number-5, 10px); }
  .demo-stage { padding: var(--ds-number-6, 12px); }
  .auth-modal { max-width: 100%; border-radius: var(--ds-radius-medium, 8px); }
  .auth-modal__body { padding: var(--ds-number-7, 14px); }
  .auth-form-row { flex-direction: column; align-items: flex-start; }
  .auth-form-row__label { width: auto; margin-bottom: var(--ds-number-2, 4px); }
  .auth-form-row__fields { width: 100%; }
  .auth-form-row__hint { padding-left: 0; }
  .auth-modal__footer { flex-direction: column-reverse; gap: var(--ds-number-3, 6px); }
  .auth-modal__footer .ds-btn { width: 100%; }
  .auth-result__actions { flex-direction: column; width: 100%; }
  .auth-result__actions .ds-btn { width: 100%; }
  /* 예매하기 */
  .demo-stage--booking { padding: var(--ds-number-8); }
  .booking-header { font-size: var(--ds-pc-font-size-body-large); padding: var(--ds-number-6) var(--ds-number-8); }
  .booking-stepper__item { font-size: 1rem; gap: 0.3rem; padding: var(--ds-number-3) var(--ds-number-1); }
  .booking-stepper__num { width: 1.6rem; height: 1.6rem; font-size: 0.9rem; }
  .booking-main__left, .booking-main__center, .booking-main__right { padding: var(--ds-number-6); }
  .booking-notice { padding: var(--ds-number-6) var(--ds-number-8); }
  .booking-bottombar { padding: var(--ds-number-4) var(--ds-number-8); }
  .popup-frame__titlebar { padding: var(--ds-number-3) var(--ds-number-5); }
}

  /* 온라인전시관 — 모바일 카드 1열 + 호버 비적용 */
  .online-gallery-grid.ds-card-grid--3 {
    grid-template-columns: 1fr;
  }
  a.online-gallery-card:hover {
    transform: none;
    box-shadow: none;
  }
  .online-gallery-card__body {
    padding: var(--ds-number-6);
  }
  .online-gallery-card__cta {
    align-self: stretch;
    text-align: center;
  }
}

/* ============================================================
   온라인전시관 (MNU-U-060500) — 2단 레이아웃 표지 페이지
   ============================================================ */
/* 전체 래퍼 — 좌/우 2단 */
body:has(.gallery-page) {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.gallery-page {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
  width: 100%;
}

/* ── 좌측: 타이포 + CI 배경 ── */
.gallery-page__left {
  position: relative;
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--ds-number-20) var(--ds-number-20) var(--ds-number-20) var(--ds-number-40);
  background: var(--ds-color-primary-50);
  overflow: hidden;
  border-radius: 0 3.2rem 3.2rem 0;
  min-height: 100vh;
}
/* CI 장식 — 좌측 패널 내부 */
.gallery-page__ci {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.gallery-page__ci svg { position: absolute; }
.gallery-page__ci-bar--1 { width: 320px; top: 6%; right: -100px; opacity: 0.08; transform: rotate(-12deg); }
.gallery-page__ci-bar--2 { width: 240px; bottom: 10%; left: -60px; opacity: 0.07; transform: rotate(6deg); }
.gallery-page__ci-bar--3 { width: 160px; top: 50%; right: 0; opacity: 0.06; transform: rotate(-20deg); }
.gallery-page__ci-petal--red { width: 140px; bottom: 2%; right: -10px; opacity: 0.12; transform: rotate(15deg); }
.gallery-page__ci-petal--red2 { width: 80px; top: 30%; right: 0; opacity: 0.08; transform: rotate(-25deg); }
.gallery-page__ci-petal--yellow { width: 120px; top: 0; left: 5%; opacity: 0.15; transform: rotate(-18deg); }
.gallery-page__ci-petal--yellow2 { width: 60px; bottom: 28%; left: 0; opacity: 0.1; transform: rotate(30deg); }
.gallery-page__ci-circle--1 { width: 80px; top: 15%; left: 0; opacity: 0.08; }
.gallery-page__ci-circle--2 { width: 50px; bottom: 18%; right: 8%; opacity: 0.1; }
.gallery-page__ci-circle--3 { width: 30px; top: 65%; left: 20%; opacity: 0.07; }
.gallery-page__ci-arc--2 { width: 280px; bottom: 5%; left: 10%; opacity: 0.08; transform: rotate(180deg); }
.gallery-page__ci-arc--3 { width: 200px; top: -5px; left: 20%; opacity: 0.06; }

/* 타이포그래피 */
.gallery-page__typo {
  position: relative;
  z-index: 1;
}
.gallery-page__label {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: var(--ds-typo-font-weight-semibold);
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.25em;
  margin-bottom: var(--ds-number-10);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0.4rem 1.4rem;
  border-radius: 2rem;
}
.gallery-page__sub {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.15em;
  line-height: 1.5;
  margin-bottom: var(--ds-number-5);
}
.gallery-page__main {
  margin-bottom: var(--ds-number-6);
}
.gallery-page__main-line1 {
  display: block;
  font-size: 8rem;
  font-weight: 900;
  color: var(--ds-color-gray-0);
  letter-spacing: 0.15em;
  line-height: 1;
}
.gallery-page__main-line2 {
  display: block;
  font-size: 4rem;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.3em;
  line-height: 1.4;
}
.gallery-page__year-wrap {
  display: flex;
  align-items: center;
  gap: var(--ds-number-5);
}
.gallery-page__year-line {
  width: 3rem;
  height: 1px;
  background: rgba(255,255,255,0.25);
}
.gallery-page__year {
  font-size: var(--ds-pc-font-size-heading-medium);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-yellow);
}
/* 좌측 하단 로고 */
.gallery-page__logo {
  position: absolute;
  z-index: 1;
  bottom: var(--ds-number-12);
  left: var(--ds-number-40);
  height: 5rem;
  opacity: 0.6;
}

/* ── 우측: 안내 + 버튼 ── */
.gallery-page__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--ds-number-20) var(--ds-number-20) var(--ds-number-20) var(--ds-number-40);
  background: var(--ds-color-gray-0);
}
.gallery-page__intro {
  margin-bottom: var(--ds-number-14);
}
.gallery-page__intro-title {
  font-size: var(--ds-pc-font-size-heading-large);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
  margin-bottom: var(--ds-number-4);
}
.gallery-page__intro-desc {
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-subtle);
  line-height: 1.7;
}
/* 버튼 영역 */
.gallery-page__nav {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-7);
  max-width: 480px;
}
.gallery-page__btn {
  display: flex;
  align-items: center;
  gap: var(--ds-number-8);
  padding: var(--ds-number-8) var(--ds-number-8);
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-large);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  text-decoration: none;
  color: var(--ds-light-color-text-bolder);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.gallery-page__btn:hover {
  border-color: var(--ds-color-primary-50);
  box-shadow: 0 4px 16px rgba(2, 123, 193, 0.12);
  transform: translateX(4px);
}
.gallery-page__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: var(--ds-radius-medium);
  background: var(--ds-color-primary-5);
  flex-shrink: 0;
  color: var(--ds-color-primary-50);
}
.gallery-page__btn-text {
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.gallery-page__btn-text strong {
  font-size: var(--ds-pc-font-size-body-medium);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
  line-height: 1.2;
}
.gallery-page__btn-text small {
  font-size: var(--ds-pc-font-size-body-xsmall);
  color: var(--ds-light-color-text-subtle);
  line-height: 1.3;
}
.gallery-page__btn-arrow {
  font-size: 1.8rem;
  color: var(--ds-color-gray-30);
  transition: color 0.2s, transform 0.2s;
}
.gallery-page__btn:hover .gallery-page__btn-arrow {
  color: var(--ds-color-primary-50);
  transform: translateX(2px);
}

/* 반응형 — 모바일: 세로 스택 */
@media (max-width: 767px) {
  .gallery-page {
    flex-direction: column;
  }
  .gallery-page__left {
    flex: none;
    padding: var(--ds-number-12) var(--ds-number-8);
    align-items: center;
    text-align: center;
  }
  .gallery-page__typo { text-align: center; }
  .gallery-page__main-line1 { font-size: 4rem; }
  .gallery-page__main-line2 { font-size: 2rem; }
  .gallery-page__sub { font-size: 1rem; }
  .gallery-page__logo {
    margin-top: var(--ds-number-8);
    padding-top: 0;
  }
  .gallery-page__right {
    padding: var(--ds-number-10) var(--ds-number-8);
  }
  .gallery-page__intro-title {
    font-size: var(--ds-mobile-font-size-heading-medium);
  }
  .gallery-page__intro-desc {
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  .gallery-page__btn {
    padding: var(--ds-number-6);
  }
  .gallery-page__btn-icon {
    width: 3.6rem;
    height: 3.6rem;
  }
  .gallery-page__year-wrap { justify-content: center; }
}


/* ============================================================
   인쇄
   ============================================================ */
@media print {
  .pfmc-floating-cta,
  .ds-share-actions,
  .pfmc-filter-toolbar,
  .pfmc-venue-chips,
  .pfmc-date-filter,
  .archive-thumb-strip,
  .ds-img-slide__nav,
  .archive-video-player__overlay,
  .guide-tab-nav { display: none; }
}

/* ════════════════════════════════════════════
   no-image 플레이스홀더 — 배경색 + 중앙 로고
   ════════════════════════════════════════════ */
.pfmc-card-media .ds-card__thumb,
.archive-gallery .ds-img-slide__item,
.archive-thumb-item {
  background-color: #eef2f7;
}
.archive-gallery .ds-img-slide__item {
  position: relative;
  aspect-ratio: 16 / 9;
}
.pfmc-card-media .ds-card__thumb img[src$="no-image-logo.png"],
.archive-gallery .ds-img-slide__item img[src$="no-image-logo.png"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 22%;
  max-height: 30%;
  object-fit: contain;
}
.archive-thumb-item img[src$="no-image-logo.png"] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 15%;
  box-sizing: border-box;
}

/* === source: pfmc-page-v2.css === */
/* ============================================================
   목록 페이지 v1.5.1 간격 오버라이드 (범용)
   공통가이드 v1.5.1 5-1 영역 간 간격 기준 준수.
   커버 대상: .ds-card-grid / .ds-board-list / .ds-accordion / .ds-poster-list
   연결 페이지: 15개 목록 (공연전시, 축제행사, 아카이브, 교육, 공고안내신청,
                          문의내역, 공지사항, 채용입찰, FAQ, QA, 웹진,
                          사진영상갤러리, 평택예술인, 재단소식, 경영공시)
   ============================================================ */



/* HERO↔TAB, TAB↔본문 간격은 각 페이지 전용 CSS에서 관리 (공통가이드 v1.5.1) */

/* [CUSTOM START: ds-board-toolbar--plain + ds-board-list__top] */
/* v1.5 5-1: FILTER ↔ LIST-META — PC 50 / 태블릿 28 / 모바일 20
   두 가지 구조 모두 지원:
   ① `.sub-page-wrap > .ds-board-toolbar--plain + .ds-board-list__top` — 래퍼 없이 toolbar 직계 형제
   ② `.sub-page-wrap > .ds-filter-search + .ds-board-list__top` — .ds-filter-search 래퍼 형태 (재단소식/웹진 등) */
.sub-page-wrap .ds-board-toolbar--plain + .ds-board-list__top,
.sub-page-wrap > .ds-filter-search + .ds-board-list__top {
  margin-top: 5rem;                    /* 50px */
}
@media (max-width: 1199px) {
  .sub-page-wrap .ds-board-toolbar--plain + .ds-board-list__top,
  .sub-page-wrap > .ds-filter-search + .ds-board-list__top {
    margin-top: var(--ds-number-14);   /* 28px */
  }
}
@media (max-width: 767px) {
  .sub-page-wrap .ds-board-toolbar--plain + .ds-board-list__top,
  .sub-page-wrap > .ds-filter-search + .ds-board-list__top {
    margin-top: var(--ds-number-10);   /* 20px */
  }
}
/* [CUSTOM END: ds-board-toolbar--plain + ds-board-list__top] */


/* [CUSTOM START: ds-board-toolbar--open + ds-board-list__top] */
/* v1.5 5-1: FILTER(--open) ↔ LIST-META — PC 50 / 태블릿 28 / 모바일 20
   (평택예술인 등 --open 필터 페이지 대응) */
.sub-page-wrap > .ds-board-toolbar--open + .ds-board-list__top {
  margin-top: 5rem;                    /* 50px */
}
@media (max-width: 1199px) {
  .sub-page-wrap > .ds-board-toolbar--open + .ds-board-list__top {
    margin-top: var(--ds-number-14);
  }
}
@media (max-width: 767px) {
  .sub-page-wrap > .ds-board-toolbar--open + .ds-board-list__top {
    margin-top: var(--ds-number-10);
  }
}
/* [CUSTOM END: ds-board-toolbar--open + ds-board-list__top] */


/* [CUSTOM START: ds-card-grid v1.5 gap] */
/* v1.5 5-1: CONTENT 그리드 gap — PC row 90 col 30 / 태블릿 row 60 col 30 / 모바일 row 60 col 30 */
.sub-page-wrap .ds-card-grid {
  row-gap: 9rem;                       /* 90px */
  column-gap: 3rem;                    /* 30px */
}
@media (max-width: 1199px) {
  .sub-page-wrap .ds-card-grid {
    row-gap: 6rem;                     /* 60px */
    column-gap: 3rem;                  /* 30px */
  }
}
@media (max-width: 767px) {
  .sub-page-wrap .ds-card-grid {
    row-gap: 6rem;                     /* 60px */
    column-gap: 3rem;                  /* 30px */
  }
}
/* [CUSTOM END: ds-card-grid v1.5 gap] */


/* [CUSTOM START: ds-empty-state 빈 상태 표준 v1.0]
   게시물 미등록·검색결과 없음 공통 빈 상태. (기준: shared/.../_공통_빈상태샘플 PUB)
   · 기본 = 이미지(포스터/카드/썸네일/갤러리)형 — 라인 없이 중앙 정렬
   · .ds-empty-state--board = 일반(테이블)게시판형 — 상단 굵은 라인 + 하단 연한 라인 */
.ds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column: 1 / -1;                                /* 포스터/카드/썸네일 그리드 안에서 전체 행 차지(비-grid에선 무시) */
  min-height: 150px;                                  /* 안내영역 최소 세로 높이 */
  padding: 15rem 1.5rem 15rem 1.5rem;                 /* 상하 여백 확대(빈 영역이 너무 좁지 않도록) */
  text-align: center;
  color: var(--ds-light-color-text-subtle, #8a8f99); /* 안내문구 gray */
}
.ds-empty-state__text {
  margin: 0;
  font-size: var(--ds-pc-font-size-body-small, 0.875rem);
}
.ds-empty-state--board {
  border-top: 2px solid var(--ds-light-color-text-strong, #1f2329);  /* 상단 굵은 라인 */
  border-bottom: 1px solid var(--ds-light-color-border, #e5e7eb);    /* 하단 연한 회색 라인 */
}
/* 특이 콘텐츠(좌우 레이아웃·카드 영역 내, 예: 공간안내 무대기술자료·부대시설, 시립예술단 감독·단원) 빈 상태:
   full 레이아웃(전체폭 grid-column:1/-1·padding·min-height)을 무력화하고, 글자 스타일(.ds-empty-state__text)은 유지한 채
   기존 영역 안에서 가로·세로 중앙정렬만 적용(좌우 레이아웃 보존). */
.ds-empty-state--inline {
  grid-column: auto;
  align-self: center;
  min-height: 0;
  padding: 0;
  height: 100%;
}
/* G1: 빈 상태(게시물 0건·검색결과 없음)이면 페이지네이션 숨김 */
.sub-page-wrap:has(.ds-empty-state) .ds-pagination {
  display: none;
}
/* 빈 상태 내 CTA 버튼(예: 이전 공고 보러가기) — 문구 하단 여백 + 검정 fill·radius max (시립예술단 빈상태 CTA와 동일) */
.ds-empty-state__cta {
  margin-top: 1.5rem;
}
.ds-empty-state__cta.ds-btn {
  background: var(--ds-color-gray-90, #1e2124);
  color: var(--ds-color-gray-0, #fff);
  border-color: var(--ds-color-gray-90, #1e2124);
  border-radius: var(--ds-radius-max, 999rem);
}
.ds-empty-state__cta.ds-btn:hover,
.ds-empty-state__cta.ds-btn:focus-visible {
  background: var(--ds-color-gray-95, #131416);
  border-color: var(--ds-color-gray-95, #131416);
  color: var(--ds-color-gray-0, #fff);
}
/* [CUSTOM END: ds-empty-state 빈 상태 표준 v1.0] */


/* [CUSTOM START: CONTENT + pagination v1.5 100px] */
/* v1.5 5-1: CONTENT ↔ PAGINATION — 100px (PC/태블릿/모바일 동일)
   `~` (일반 형제) 사용 — content와 pagination 사이에 .ds-empty-state[hidden] 등이
   있어도 매칭되도록 함. (`+` 인접 형제는 직속만 매칭) */
.sub-page-wrap .ds-card-grid ~ .ds-pagination,
.sub-page-wrap .ds-board-list ~ .ds-pagination,
.sub-page-wrap .ds-poster-list ~ .ds-pagination,
.sub-page-wrap .ds-accordion ~ .ds-pagination,
.sub-page-wrap .ds-news-list ~ .ds-pagination {
  margin-top: 10rem !important;        /* 100px */
}
/* [CUSTOM END: CONTENT + pagination v1.5 100px] */


/* [CUSTOM START: ds-pagination margin-bottom 단일 관리]
   ⚠️ PAGINATION↔FOOTER 간격 누적 방지
   DS `.ds-pagination { margin-bottom: 10rem }` (component.css:994) + v1.7.1
   `.sub-page-wrap { margin-bottom: 100/80/60 }` 이 .site-main(flex container)의
   BFC 차단으로 margin collapse 되지 않고 누적되어 PC 200px·태블릿 180px·모바일 160px
   여백 발생. sub-page-wrap 내부 pagination의 자체 margin-bottom을 0으로 초기화하여
   PAGINATION↔FOOTER 간격을 `.sub-page-wrap { margin-bottom }` 단일 소스로 일원화. */
.sub-page-wrap .ds-pagination {
  margin-bottom: 0;
}
/* [CUSTOM END: ds-pagination margin-bottom 단일 관리] */


/* [CUSTOM START: archive-search-bar]
   아카이브(MNU-U-060401) 전용 — 커스텀 드롭다운 (네이티브 select 대체)
   위치·너비·스타일 완전 제어 — 입력필드 바로 하단에서 전개, 트리거/리스트 너비 일치.

   ⚠️ DS `.ds-input-group { overflow: hidden }`(component.css:633)이 절대 포지션
      드롭다운 리스트를 pill 바깥으로 잘라내므로, archive-search-bar 컨텍스트에서만
      overflow를 visible로 해제한다. */
.ds-filter-search > .ds-board-toolbar--plain.archive-search-bar .ds-input-group {
  overflow: visible;
}
.archive-search-bar__year {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 10rem;
  display: flex;
  align-items: stretch;
  border-right: 1px solid var(--ds-color-gray-20);
  margin-right: 16px;
}
.archive-search-bar__year-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0 16px 0 0;                                       /* 우:16(=구분선 좌 여백, margin-right와 통일) */
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--ds-light-color-text-default);
  cursor: pointer;
  text-align: left;
  line-height: 1.5;
}
.archive-search-bar__year-btn:focus-visible {
  outline: 2px solid var(--ds-color-primary-50);
  outline-offset: -2px;
  border-radius: 2px;
}
.archive-search-bar__year-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.archive-search-bar__year-caret {
  width: 12px;
  height: 12px;
  stroke: #555;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.archive-search-bar__year-btn[aria-expanded="true"] .archive-search-bar__year-caret {
  transform: rotate(180deg);
}
.archive-search-bar__year-list {
  position: absolute;
  top: calc(100% + 8px);                                     /* pill 하단에서 8px 아래 */
  left: -12px;                                               /* 트리거 좌측 + pill 좌측 padding(12px)만큼 확장 → pill 시각적 좌측 엣지에 정렬 */
  right: 0;                                                  /* 트리거 우측 정렬 */
  box-sizing: border-box;                                    /* border 포함한 width 계산 */
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--ds-color-gray-20);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: 20;
}
.archive-search-bar__year-list[hidden] {
  display: none;
}
.archive-search-bar__year-list > li {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--ds-light-color-text-default);
  cursor: pointer;
  line-height: 1.4;
  user-select: none;
}
.archive-search-bar__year-list > li:hover {
  background: var(--ds-color-gray-5);
}
.archive-search-bar__year-list > li[aria-selected="true"] {
  background: var(--ds-color-primary-5);
  color: var(--ds-color-primary-50);
  font-weight: 600;
}
@media (max-width: 767px) {
  .archive-search-bar__year {
    min-width: 7rem;
    margin-right: 10px;
  }
  .archive-search-bar__year-btn {
    padding: 0 10px 0 0;
    font-size: 14px;
  }
  .archive-search-bar__year-list {
    left: -12px;
    right: 0;
    top: calc(100% + 6px);
  }
}
/* [CUSTOM END: archive-search-bar] */

/* === source: archive-page-v2.css === */
/* ================================================================
   아카이브 (MNU-U-060400) v2 — self-contained
   ================================================================
   대상 페이지:
   - 060401 아카이브 목록
   - 060402 현장 사진 상세
   - 060403 현장 영상 상세

   wrapper: .archive-v2 (sub-page-wrap에 추가됨)
   self-contained: pfmc-page.css / pfmc-page-v2.css 의존성 없음
                   필요 base 룰을 .archive-v2 prefix로 흡수.

   2026-04-30 통합: CSS 의존성 감사 Step 1
   3중 link(pfmc-page + pfmc-page-v2 + archive-page-v2) → 단일 link로 단일화

   - DS 토큰(--ds-*) 우선, 알파 결합은 color-mix 패턴 사용
   ================================================================ */


/* ==================== BASE LAYER — pfmc-page.css / pfmc-page-v2.css에서 추출 ==================== */

/* --- (0) TAB-NAV 간격 (공통가이드 v1.5.1) ---
   HERO ↔ TAB: PC 50 / 태블릿 28 / 모바일 16
   TAB ↔ 다음 요소: PC 50 / 태블릿 28 / 모바일 16
   ※ .archive-v2가 sub-page-wrap에 직접 붙어 있어 .archive-v2 > * 로 직계 매치 */
.archive-v2 > .ds-tab:first-child {
  margin-top: 5rem;                                          /* 50px */
}
.archive-v2 > .ds-tab + *,
.archive-v2 > .page-header__select + * {
  margin-top: 5rem;                                          /* 50px */
}
@media (max-width: 1199px) {
  .archive-v2 > .ds-tab:first-child { margin-top: var(--ds-number-14); }
  .archive-v2 > .ds-tab + *,
  .archive-v2 > .page-header__select + * { margin-top: var(--ds-number-14); }
}
@media (max-width: 767px) {
  .archive-v2 > .ds-tab:first-child { margin-top: var(--ds-number-8); }
  .archive-v2 > .ds-tab + *,
  .archive-v2 > .page-header__select + * { margin-top: var(--ds-number-8); }
}

/* --- (1) 카드 미디어 base (pfmc-page.css 657, 719, 2971, 2980) --- */
.archive-v2 .pfmc-card-media .ds-card__title {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  min-height: 0;
}
.archive-v2 .pfmc-card-media .ds-card__thumb {
  aspect-ratio: 16 / 9;
  background-color: #eef2f7;
}
.archive-v2 .pfmc-card-media .ds-card__thumb img[src$="no-image-logo.png"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 22%;
  max-height: 30%;
  object-fit: contain;
}

/* --- (2) play overlay base (pfmc-page.css 722~745) — 영상 탭 OVERRIDE에서 SVG로 교체 --- */
.archive-v2 .pfmc-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.archive-v2 .pfmc-play-overlay::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #fff;
}

/* --- (3) 카드그리드 ↔ 페이지네이션 간격 (pfmc-page.css 670, 674) --- */
.archive-v2 .ds-card-grid + .ds-pagination {
  margin-top: 10rem;                       /* 100px */
}
.archive-v2 .archive-content > #panel-media > .ds-pagination {
  margin-top: 10rem;
}

/* --- (4) video-player__frame (pfmc-page.css 786~819) — 060403 영상 상세 --- */
.archive-v2 .video-player__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--ds-radius-medium);
  background-color: #eef2f7;
}
.archive-v2 .video-player__frame iframe,
.archive-v2 .video-player__frame video {
  width: 100%;
  height: 100%;
  border: 0;
}
.archive-v2 .video-player__frame__thumb[src$="no-image-logo.png"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 22%;
  max-height: 30%;
  object-fit: contain;
}
.archive-v2 .video-player__frame__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: inline-flex;
}

/* --- (5) archive-gallery (pfmc-page.css 821~882) — 060402 사진 상세 --- */
.archive-v2 .archive-gallery {
  position: relative;
}
.archive-v2 .archive-slide-wrap {
  position: relative;
}
.archive-v2 .archive-gallery .ds-img-slide {
  max-width: 100%;
  position: relative;
}
.archive-v2 .archive-gallery .ds-img-slide__item {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #eef2f7;
}
.archive-v2 .archive-gallery .ds-img-slide__item img {
  border-radius: var(--ds-radius-medium);
}
.archive-v2 .archive-gallery .ds-img-slide__item img[src$="no-image-logo.png"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 22%;
  max-height: 30%;
  object-fit: contain;
}
.archive-v2 .archive-gallery .ds-img-slide__nav { display: none; }
.archive-v2 .archive-slide-prev,
.archive-v2 .archive-slide-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  color: var(--ds-light-color-text-basic);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: var(--ds-shadow-s);
}
.archive-v2 .archive-slide-prev:hover,
.archive-v2 .archive-slide-next:hover {
  background: var(--ds-color-gray-0);
  box-shadow: var(--ds-shadow-m);
}
.archive-v2 .archive-slide-prev { left: var(--ds-number-4); }
.archive-v2 .archive-slide-next { right: var(--ds-number-4); }

/* --- (6) archive-thumb-strip / item (pfmc-page.css 884~911, 2647, 2992) --- */
.archive-v2 .archive-thumb-strip {
  display: flex;
  justify-content: center;
  gap: var(--ds-number-4);
  margin-top: var(--ds-number-6);
  overflow-x: auto;
  padding-bottom: var(--ds-number-2);
  -webkit-overflow-scrolling: touch;
}
.archive-v2 .archive-thumb-strip::-webkit-scrollbar { height: 4px; }
.archive-v2 .archive-thumb-strip::-webkit-scrollbar-thumb { background: var(--ds-color-gray-20); border-radius: 2px; }
.archive-v2 .archive-thumb-item {
  flex-shrink: 0;
  width: 100px;
  height: 70px;
  border-radius: var(--ds-radius-small);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
  background-color: #eef2f7;
}
.archive-v2 .archive-thumb-item.is-active {
  border-color: var(--ds-color-primary-50);
  opacity: 1;
}
.archive-v2 .archive-thumb-item:hover { opacity: 0.9; }
.archive-v2 .archive-thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.archive-v2 .archive-thumb-item img[src$="no-image-logo.png"] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 15%;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .archive-v2 .archive-thumb-strip {
    justify-content: flex-start;
  }
  .archive-v2 .archive-thumb-item {
    width: 60px;
    height: 60px;
  }
}

/* --- (7) sub-page-wrap 간격 룰 (pfmc-page-v2.css 19~101) — .archive-v2 prefix로 흡수
   ※ archive HTML은 <div class="sub-page-wrap archive-v2"> 라 .archive-v2가 sub-page-wrap 자신을 매치 --- */

/* FILTER ↔ LIST-META — PC 50 / 태블릿 28 / 모바일 20 */
.archive-v2 .ds-board-toolbar--plain + .ds-board-list__top,
.archive-v2 > .ds-filter-search + .ds-board-list__top {
  margin-top: 5rem;                    /* 50px */
}
@media (max-width: 1199px) {
  .archive-v2 .ds-board-toolbar--plain + .ds-board-list__top,
  .archive-v2 > .ds-filter-search + .ds-board-list__top {
    margin-top: var(--ds-number-14);   /* 28px */
  }
}
@media (max-width: 767px) {
  .archive-v2 .ds-board-toolbar--plain + .ds-board-list__top,
  .archive-v2 > .ds-filter-search + .ds-board-list__top {
    margin-top: var(--ds-number-10);   /* 20px */
  }
}

/* CONTENT 그리드 gap — PC row 90 col 30 / 태블릿·모바일 row 60 col 30 */
.archive-v2 .ds-card-grid {
  row-gap: 9rem;                       /* 90px */
  column-gap: 3rem;                    /* 30px */
}
@media (max-width: 1199px) {
  .archive-v2 .ds-card-grid {
    row-gap: 6rem;
    column-gap: 3rem;
  }
}
@media (max-width: 767px) {
  .archive-v2 .ds-card-grid {
    row-gap: 6rem;
    column-gap: 3rem;
  }
}

/* CONTENT 그리드 컬럼 — DS layout.css의 .ds-card-grid--3 는 1199px 이하에서 바로 1열로 떨어지지만,
   아카이브 미디어 그리드는 태블릿 2열 → 모바일 1열로 단계화한다. */
.archive-v2 .ds-card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1199px) {
  .archive-v2 .ds-card-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .archive-v2 .ds-card-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* CONTENT ↔ PAGINATION — 100px (PC/태블릿/모바일 동일) */
.archive-v2 .ds-card-grid ~ .ds-pagination {
  margin-top: 10rem !important;        /* 100px */
}

/* PAGINATION ↔ FOOTER 간격 누적 방지 — 자체 margin-bottom 0 */
.archive-v2 .ds-pagination {
  margin-bottom: 0;
}

/* --- (8) archive-search-bar (pfmc-page-v2.css 105~217) — 커스텀 연도 드롭다운 --- */
.archive-v2 .ds-filter-search > .ds-board-toolbar--plain.archive-search-bar .ds-input-group {
  overflow: visible;
}
.archive-v2 .archive-search-bar__year {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 10rem;
  display: flex;
  align-items: stretch;
  border-right: 1px solid var(--ds-color-gray-20);
  margin-right: 16px;
}
.archive-v2 .archive-search-bar__year-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0 16px 0 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--ds-light-color-text-default);
  cursor: pointer;
  text-align: left;
  line-height: 1.5;
}
.archive-v2 .archive-search-bar__year-btn:focus-visible {
  outline: 2px solid var(--ds-color-primary-50);
  outline-offset: -2px;
  border-radius: 2px;
}
.archive-v2 .archive-search-bar__year-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.archive-v2 .archive-search-bar__year-caret {
  width: 12px;
  height: 12px;
  stroke: #555;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.archive-v2 .archive-search-bar__year-btn[aria-expanded="true"] .archive-search-bar__year-caret {
  transform: rotate(180deg);
}
.archive-v2 .archive-search-bar__year-list {
  position: absolute;
  top: calc(100% + 8px);
  left: -12px;
  right: 0;
  box-sizing: border-box;
  max-height: 240px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--ds-color-gray-20);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: 20;
}
.archive-v2 .archive-search-bar__year-list[hidden] {
  display: none;
}
.archive-v2 .archive-search-bar__year-list > li {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--ds-light-color-text-default);
  cursor: pointer;
  line-height: 1.4;
  user-select: none;
}
.archive-v2 .archive-search-bar__year-list > li:hover {
  background: var(--ds-color-gray-5);
}
.archive-v2 .archive-search-bar__year-list > li[aria-selected="true"] {
  background: var(--ds-color-primary-5);
  color: var(--ds-color-primary-50);
  font-weight: 600;
}
@media (max-width: 767px) {
  .archive-v2 .archive-search-bar__year {
    min-width: 7rem;
    margin-right: 10px;
  }
  .archive-v2 .archive-search-bar__year-btn {
    padding: 0 10px 0 0;
    font-size: 14px;
  }
  .archive-v2 .archive-search-bar__year-list {
    left: -12px;
    right: 0;
    top: calc(100% + 6px);
  }
}

/* --- (9) print 룰 --- */
@media print {
  .archive-v2 .archive-thumb-strip,
  .archive-v2 .ds-img-slide__nav { display: none; }
}


/* ==================== OVERRIDE LAYER — 시안 변경 (2026-04-29 작업 반영) ==================== */

/* 목록 — 사진/영상 카드 그리드 row 간격 축소 (column gap 유지) */
.archive-v2 .pfmc-card-media {
  row-gap: var(--ds-number-16);                               /* 32px */
}

/* 영상 탭 카드 — hover 시 + 오버레이 비활성 (재생 ▶ overlay만 유지)
   사진 탭은 layout.css의 기본 hover + 오버레이 그대로 유지 */
.archive-v2 #panel-video .ds-card .ds-card__thumb::after {
  display: none;
}

/* 영상 탭 재생 오버레이 — icon_thum_play.svg 적용
   기존 .pfmc-play-overlay의 검정 원형 + ::after 흰 삼각형 → SVG 이미지 1장으로 교체
   hover 시 blue-aa 배경 SVG로 교체 (삼각형은 흰색 그대로) */
.archive-v2 #panel-video .pfmc-play-overlay {
  /* CSS 파일 기준 상대경로: 02_design/resources/css/pages → ../../img */
  background: url('../../img/icon_thum_play.svg') center / 100% no-repeat;
  border-radius: 0;
  width: 6rem;                                                /* 60px (SVG 원본 사이즈) */
  height: 6rem;
}
.archive-v2 #panel-video .pfmc-play-overlay::after {
  display: none;                                              /* 기존 흰 삼각형 ::after 숨김 */
}
/* hover 색 전환 — blue-aa SVG를 위에 겹쳐 opacity로 페이드 (background-image는 transition 불가) */
.archive-v2 #panel-video .pfmc-play-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../../img/icon_thum_play_hover.svg') center / 100% no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.archive-v2 #panel-video .ds-card:hover .pfmc-play-overlay::before {
  opacity: 1;
}


/* 사진 상세 (060402) — 이미지 슬라이스 영역 살짝 축소 (가운데 정렬 유지) */
.archive-v2 .archive-gallery {
  max-width: 90%;
  margin-inline: auto;
}

/* 영상 상세 (060403) — 영상 플레이어 영역 동일하게 축소
   margin-bottom은 영상 ↔ 본문 사이 56px 간격 보상 (DS p 마진 제거에 따른 컨텐츠 블록 책임 원칙) */
.archive-v2 .video-player__frame {
  max-width: 90%;
  margin-inline: auto;
  margin-bottom: var(--ds-number-28);                         /* 56px */
}

/* [CUSTOM — 060402/060403 전용] 본문 하단 구분선
   사진/영상 상세 페이지에만 적용. 다른 상세 페이지(.ds-detail-body)에는 적용되지 않음.
   .archive-v2 prefix로 스코프를 격리. */
.archive-v2 .ds-detail-body {
  border-bottom: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
}


/* [CUSTOM — 060402 현장 사진 상세 전용] 갤러리 하단 마진 (p 마진 제거 보상)
   DS .ds-detail-body > p 가 더 이상 자체 마진을 갖지 않으므로, 갤러리 ↔ 본문 텍스트 사이 56px 간격은
   갤러리가 자기 margin-bottom으로 직접 책임짐. 이 보상값은 페이지마다 다를 수 있어 페이지 CSS에 둔다. */
.archive-v2 .archive-gallery {
  margin-bottom: var(--ds-number-28);   /* 56px */
}

/* === source: pfmc-info-page-v2.css === */
/* ============================================================
   PFMC INFO PAGE v2 — 공연·전시 안내성 페이지 v2 전용 스타일
   2026 Figma 시안 반영 (예매·할인·환불 안내 등 정보 안내 패턴)
   적용 파일:
     - MNU-U-060300_예매할인환불안내_design_v2.html
   격리: .pfmc-info wrapper 하위에서만 적용 (다른 페이지 영향 없음)
   self-contained: pfmc-page.css 의존성 없음 (필요 base 룰 모두 포함)

   토큰 매핑 주석:
     Figma 40px / 22px / 21px 등은 가장 가까운 DS 토큰 사용 + 매핑 주석
     기타 모든 px는 DS number/size/color 토큰과 정확 일치
   ============================================================ */


/* ==================== BASE LAYER ====================
   v1의 인라인 style 중 v2에서도 재사용 가능한 base만 prefix 박아 포함.
   ds-tab/ds-select/ds-table 등 DS 컴포넌트는 output.css에서 옴. */

/* 콘텐츠 컨테이너 (v1의 guide-content 자리) */
.pfmc-info .guide-content {
  max-width: 120rem;                                    /* 1200px */
  margin: 0 auto;
  padding: 0 var(--ds-number-12) var(--ds-number-20);
}


/* ==================== V01. 1차 탭 (예매/할인/환불) ====================
   시안: 텍스트만 + 세로 디바이더 (활성 검정 Bold, 비활성 회색 Medium) */
.pfmc-info .ds-tab,
.pfmc-info .ds-tab--bold {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  border-bottom: none;
  background: transparent;
  margin-top: var(--ds-number-15);                      /* 30px */
  margin-bottom: var(--ds-number-15);
}
.pfmc-info .ds-tab__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
.pfmc-info .ds-tab__item {
  position: relative;
  display: flex;
  align-items: center;
}
.pfmc-info .ds-tab__item + .ds-tab__item::before {
  content: '';
  display: block;
  width: var(--ds-border-width-thin);                   /* 1px */
  height: var(--ds-number-7);                           /* 14px */
  background: var(--ds-color-gray-20);                  /* #cdd1d5 */
}
.pfmc-info .ds-tab__btn {
  min-width: 11.4rem;                                   /* 114px (시안) */
  padding: var(--ds-number-5) var(--ds-number-12);      /* 10px 24px */
  background: transparent;
  border: none;
  font-size: var(--ds-font-size-19);                    /* 19px */
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-color-gray-50);                       /* #6d7882 비활성 */
  cursor: pointer;
}
/* 활성 탭 색/weight — DS .ds-tab--bold 룰 사용 (color: brand-red-aa, weight: extrabold) */
.pfmc-info .ds-tab__btn:focus-visible {
  outline: var(--ds-border-width-focus) solid var(--ds-color-primary-50);
  outline-offset: 2px;
}
/* 모바일 select 숨김 처리는 page-header.css가 담당 */


/* ==================== V02. 페이지 타이틀 ====================
   시안: 40px Medium center */
.pfmc-info .guide-page-title {
  max-width: 120rem;
  margin: 0 auto;
  padding: var(--ds-number-10) var(--ds-number-12) var(--ds-number-30); /* 20 / 60 */
  text-align: center;
}
.pfmc-info .guide-page-title h2 {
  font-size: var(--ds-font-size-40);                    /* 40px */
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-color-gray-95);                       /* #1a1a1a 가까움 */
  letter-spacing: -0.02em;
  margin: 0;
}


/* ==================== V03. 섹션 헤더 (Heading 3) ====================
   시안: 영문 라벨 없음, 32px SemiBold 단순 타이틀 */
.pfmc-info .guide-section {
  margin-bottom: var(--ds-number-30);                   /* 60px */
}
.pfmc-info .guide-section__title {
  display: flex;
  align-items: end;
  gap: var(--ds-number-6);                              /* 12px */
  font-size: var(--ds-font-size-32);                    /* 32px */
  font-weight: var(--ds-typo-font-weight-semibold);
  color: var(--ds-color-gray-90);                       /* #1e2124 */
  letter-spacing: -0.003em;                             /* -0.1/32 */
  margin: 0 0 var(--ds-number-12);                      /* 24px */
  padding: 0;
  border-bottom: none;
}
/* 시안의 H3엔 SVG 아이콘이 없으므로 v1의 svg는 시각상 숨김 처리
   (마크업 호환을 위해 display:none) */
.pfmc-info .guide-section__title svg {
  display: none;
}


/* ==================== V04. info-card (박스 — 좌 100x100 아이콘 + 우 텍스트) ====================
   시안: 옅은 파랑 배경 (rgba(230,243,250,0.5)) + 흰 원형 아이콘 슬롯 + bullet */
.pfmc-info .guide-info-cards {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-10);                             /* 20px */
}
/* 시안 정확 스펙: padding 44px 40px / gap 20px / align-items flex-start / align-self stretch */
.pfmc-info .guide-info-card {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  gap: var(--ds-number-10);                             /* 20px */
  padding: var(--ds-number-22) var(--ds-number-20);     /* 44px 40px (시안 정확치) */
  background: rgba(230, 243, 250, 0.5);                 /* primary-5 톤 + 50% alpha */
  border-radius: var(--ds-radius-large);                /* 12px */
}
/* 카드 헤더(아이콘 + 라벨) — 시안에선 좌측 아이콘과 우측 콘텐츠 분리 */
.pfmc-info .guide-info-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-4);                              /* 8px */
  flex-shrink: 0;
}
/* 100x100 흰 원형 아이콘 슬롯 — 사용자가 export한 아이콘 들어갈 자리 */
.pfmc-info .guide-info-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10rem;                                         /* 100px */
  height: 10rem;                                        /* 100px */
  border-radius: var(--ds-radius-max);                  /* 원형 */
  background: var(--ds-color-gray-0);                   /* 흰 배경 */
  color: var(--ds-color-primary-50);                    /* 아이콘 기본 색 (placeholder svg currentColor) */
  flex-shrink: 0;
}
.pfmc-info .guide-info-card__icon svg {
  width: 4.8rem;                                        /* 48px (placeholder) */
  height: 4.8rem;
  flex-shrink: 0;
}
/* 라벨 (카드 안쪽) */
.pfmc-info .guide-info-card__label {
  display: block;                                       /* span 인라인 요소 → margin 적용 위해 block 전환 */
  font-size: var(--ds-font-size-22);                    /* 22px Bold */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-95);                       /* #1a1a1a */
  margin-bottom: var(--ds-number-12);                   /* 20px */
}
/* bullet 리스트 */
.pfmc-info .guide-info-card__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-2);                              /* 4px — 항목간 컴팩트화 (line-height와 합쳐 시각상 적정 간격) */
}
.pfmc-info .guide-info-card__list li {
  position: relative;
  padding-left: var(--ds-number-6);                     /* 12px */
  font-size: var(--ds-font-size-19);                    /* 19px */
  color: var(--ds-color-gray-70);                       /* #4b5563 가까움 */
  line-height: 1.4;
}
.pfmc-info .guide-info-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: var(--ds-number-2);                            /* 4px */
  height: var(--ds-number-2);
  border-radius: var(--ds-radius-max);
  background: currentColor;
}
.pfmc-info .guide-info-card__list strong {
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-red-aa);                  /* #e03010 강조 */
}

/* info-card 마크업 변형 — 시안의 좌측 아이콘 + 우측 콘텐츠 (라벨+리스트) 가로 배치
   v1 마크업이 header(아이콘+라벨) + list 세로 배치라 v2에서는 가로로 재구성 필요.
   v1을 v2에서 활용하려면 추가 wrapper 필요. v2 마크업은 별도 정의 */


/* ==================== V05. step-card (80px 원형 아이콘 + STEP/title/desc) ====================
   시안: 보더 + 12px radius + 좌측 80px 원형 아이콘 + 우측 STEP/타이틀/설명 */
.pfmc-info .guide-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);                /* 3 columns */
  gap: var(--ds-number-10);                             /* 20px */
}
.pfmc-info .guide-step-card {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-number-10);                             /* 20px */
  padding: var(--ds-number-10);                         /* 20px */
  background: var(--ds-color-gray-0);                   /* 흰 배경 */
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-5); /* #f4f5f6 */
  border-radius: var(--ds-radius-large);                /* 12px */
  position: relative;
  min-height: 18.1rem;                                  /* 181px (시안) */
}
/* 80px 원형 아이콘 슬롯 (placeholder) */
.pfmc-info .guide-step-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-number-40);                           /* 80px */
  height: var(--ds-number-40);                          /* 80px */
  background: var(--ds-color-secondary-5);              /* #eef2f7 */
  border-radius: var(--ds-radius-max);                  /* 원형 */
  flex-shrink: 0;
  color: var(--ds-color-primary-60);
}
.pfmc-info .guide-step-card__icon svg {
  width: var(--ds-number-15);                           /* 30px (시안 28~36 평균) */
  height: var(--ds-number-15);
}
/* 우측 콘텐츠 영역 — STEP 01 ↔ 타이틀 사이 0px (붙임) */
.pfmc-info .guide-step-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;                                               /* number → title 붙임 */
}
/* 타이틀 ↔ 설명 사이는 살짝 띄움 */
.pfmc-info .guide-step-card__title + .guide-step-card__desc {
  margin-top: var(--ds-number-3);                       /* 6px */
}
/* STEP 01 (작은 라벨) — v1엔 .guide-step-card__number이라 prefix 변경 권장.
   v1 마크업 그대로 살리려면 number를 STEP 라벨로 변환 */
.pfmc-info .guide-step-card__number {
  font-size: var(--ds-font-size-14);                    /* 14px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-blue-aa);                 /* #027bc1 */
  background: transparent;
  padding: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  display: block;
}
/* STEP 라벨이 v2에서는 텍스트만, 원형 배경 제거 */
.pfmc-info .guide-step-card__title {
  font-size: var(--ds-font-size-22);                    /* 22px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-95);                       /* #1a1a1a */
  margin: 0;
}
.pfmc-info .guide-step-card__desc {
  font-size: var(--ds-font-size-16);                    /* 16px */
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-50);                       /* #6b7280 */
  line-height: 1.4;
  letter-spacing: -0.012em;
}


/* ==================== V06. notice (옅은 노란 박스 + bullet) ====================
   시안: rgba(255,243,219,0.3) 배경 + bullet 리스트 17px */
.pfmc-info .guide-notice {
  background: rgba(255, 243, 219, 0.3);                 /* 노란 페이드 */
  border-radius: var(--ds-radius-large);                /* 12px */
  padding: var(--ds-number-16) var(--ds-number-20);     /* 32px / 40px */
  margin-bottom: var(--ds-number-15);
}
.pfmc-info .guide-notice__title {
  display: flex;
  align-items: center;
  gap: var(--ds-number-3);                              /* 6px */
  font-size: var(--ds-font-size-22);                    /* 22px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);                       /* #1e2124 */
  margin-bottom: var(--ds-number-6);                    /* 12px */
}
.pfmc-info .guide-notice__title svg {
  width: var(--ds-number-12);                           /* 24px */
  height: var(--ds-number-12);
  flex-shrink: 0;
  color: var(--ds-color-brand-yellow-aa);
  display: none;                                        /* 시안엔 아이콘 없음 */
}
.pfmc-info .guide-notice__list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-6);                              /* 12px */
}
.pfmc-info .guide-notice__list li {
  position: relative;
  padding-left: var(--ds-number-6);                     /* 12px */
  font-size: var(--ds-font-size-16);                    /* 16px — step-desc 16px와 동일한 보조 본문 위계 */
  color: var(--ds-color-gray-70);                       /* #464c53 */
  line-height: 1.5;
}
.pfmc-info .guide-notice__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: var(--ds-number-2);                            /* 4px */
  height: var(--ds-number-2);
  border-radius: var(--ds-radius-max);
  background: currentColor;
}
.pfmc-info .guide-notice__list strong {
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);                       /* #1e2124 강조 */
}


/* ==================== V07. 할인 그룹 (자체할인/카드혜택/복지할인) ==================== */
.pfmc-info .guide-discount-group {
  margin-bottom: var(--ds-number-15);                   /* 30px */
}
.pfmc-info .guide-discount-group__label {
  display: flex;
  align-items: center;
  gap: var(--ds-number-3);                              /* 6px */
  font-size: var(--ds-font-size-19);                    /* 19px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  margin-bottom: var(--ds-number-6);                    /* 12px */
}
.pfmc-info .guide-discount-group__label svg {
  width: var(--ds-number-8);                            /* 16px */
  height: var(--ds-number-8);
  flex-shrink: 0;
  color: var(--ds-color-brand-blue-aa);
}


/* ==================== V08. ds-table 페이지 컨텍스트 미세 조정 ==================== */
.pfmc-info .ds-table-wrap {
  margin-bottom: var(--ds-number-12);
  overflow-x: auto;
}
.pfmc-info .ds-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ds-color-gray-0);
}
.pfmc-info .ds-table thead {
  background: var(--ds-color-secondary-5);              /* #eef2f7 */
}
.pfmc-info .ds-table th,
.pfmc-info .ds-table td {
  padding: var(--ds-number-7) var(--ds-number-8);       /* 14px / 16px */
  font-size: var(--ds-font-size-16);
  border-bottom: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  text-align: left;
  color: var(--ds-color-gray-90);
}
.pfmc-info .ds-table th {
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
}
.pfmc-info .ds-table td.text-center,
.pfmc-info .ds-table th.text-center {
  text-align: center;
}
.pfmc-info .ds-table tbody tr:last-child td {
  border-bottom: none;
}
.pfmc-info .ds-table strong {
  color: var(--ds-color-brand-red-aa);
  font-weight: var(--ds-typo-font-weight-bold);
}
/* 환불 강조 셀 */
.pfmc-info .guide-refund-highlight {
  font-weight: var(--ds-typo-font-weight-bold);
}
.pfmc-info .guide-refund-highlight--full {
  color: var(--ds-color-brand-green-aa);                /* 전액 환불 */
}
.pfmc-info .guide-refund-highlight--partial {
  color: var(--ds-color-brand-blue-aa);                 /* 부분 환불 */
}
.pfmc-info .guide-refund-highlight--none {
  color: var(--ds-color-brand-red-aa);                  /* 환불 불가 */
}


/* lined variant — 첫 번째 열 텍스트 크기 + bold */
.pfmc-info .ds-table--lined tbody tr td:first-child {
  font-size: var(--ds-font-size-17);                      /* 16 → 17px */
  font-weight: var(--ds-typo-font-weight-bold);
}
/* 환불 강조 셀 — bold 제거, 원래 16px 유지 */
.pfmc-info .guide-refund-highlight {
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-regular);
}
/* lined variant — 전체 셀 가운데 정렬 */
.pfmc-info .ds-table--lined th,
.pfmc-info .ds-table--lined td {
  text-align: center;
}
/* lined variant — th 회색 배경 50% opacity 오버라이드 */
.pfmc-info .ds-table--lined thead,
.pfmc-info .ds-table--lined th {
  background: color-mix(in srgb, var(--ds-color-secondary-5) 50%, transparent);
}
/* lined variant — tbody hover: brand-blue-5 50% */
.pfmc-info .ds-table--lined tbody tr:hover td {
  background-color: color-mix(in srgb, var(--ds-color-brand-blue-5) 50%, transparent);
}


/* ==================== V09. 문의 카드 (환불 탭) ==================== */
.pfmc-info .guide-contact {
  display: flex;
  align-items: center;
  gap: var(--ds-number-10);                             /* 20px */
  padding: var(--ds-number-12) var(--ds-number-15);     /* 24px 30px */
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-thin) solid var(--ds-color-brand-blue-aa);
  border-radius: var(--ds-radius-large);                /* 12px */
  margin-top: var(--ds-number-15);
}
.pfmc-info .guide-contact__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-number-20);                           /* 40px */
  height: var(--ds-number-20);
  background: var(--ds-color-primary-50);
  color: var(--ds-color-gray-0);
  border-radius: var(--ds-radius-max);
  flex-shrink: 0;
}
.pfmc-info .guide-contact__icon svg {
  width: var(--ds-number-12);                           /* 24px */
  height: var(--ds-number-12);
}
.pfmc-info .guide-contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-1);                              /* 2px */
}
.pfmc-info .guide-contact__phone {
  font-size: var(--ds-font-size-22);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
}
.pfmc-info .guide-contact__time {
  font-size: var(--ds-font-size-15);
  color: var(--ds-color-gray-50);
}


/* ==================== R. 반응형 — 태블릿 (768~1199px) ==================== */
@media (max-width: 1199px) and (min-width: 768px) {
  .pfmc-info .guide-page-title h2 {
    font-size: var(--ds-font-size-32);                  /* 40 → 32 */
  }
  .pfmc-info .guide-section__title {
    font-size: var(--ds-font-size-24);                  /* 32 → 24 */
  }
  .pfmc-info .guide-info-card__icon {
    width: var(--ds-number-40);                         /* 80px (100 → 80) */
    height: var(--ds-number-40);
  }
  .pfmc-info .guide-info-card__label {
    font-size: var(--ds-font-size-19);                  /* 22 → 19 */
  }
  .pfmc-info .guide-info-card__list li {
    font-size: var(--ds-font-size-16);                  /* 19 → 16 */
  }
  .pfmc-info .guide-steps {
    grid-template-columns: repeat(2, 1fr);              /* 3 → 2 cols */
  }
  .pfmc-info .guide-notice__list li {
    font-size: var(--ds-font-size-15);                  /* 17 → 15 */
  }
}


/* ==================== R. 반응형 — 모바일 (≤ 767px) ==================== */
@media (max-width: 767px) {
  .pfmc-info .guide-content {
    padding: var(--ds-number-12) 0 var(--ds-number-15);           /* top 24px — 셀렉트박스↔예매방법 간격 */
  }
  /* 본문 탭 모바일: 공연/전시 목록과 동일하게 좌측정렬 + 가로 스크롤 + 파이프 제거 → 활성 하단 밑줄.
     (select 는 .sub-page-wrap > div > .page-header__select{display:none} 으로 항상 숨김)
     .pfmc-info 전용 PC 규칙(중앙정렬·파이프 ::before)이 component.css 모바일 .ds-tab--bold 룰을 덮어써서
     같은 스코프로 모바일 동작을 다시 명시. */
  .pfmc-info .ds-tab,
  .pfmc-info .ds-tab--bold {
    justify-content: flex-start;                                    /* 중앙 → 좌측정렬 */
    margin-top: var(--ds-mobile-padding-7, 1.8rem);
    margin-bottom: var(--ds-mobile-padding-7, 1.8rem);
  }
  .pfmc-info .ds-tab__list {
    justify-content: flex-start;
    overflow-x: auto;                                               /* 탭 넘침 시 가로 스크롤 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                                          /* Firefox 스크롤바 숨김 */
  }
  .pfmc-info .ds-tab__list::-webkit-scrollbar {
    display: none;                                                  /* Chrome/Safari 스크롤바 숨김 */
  }
  .pfmc-info .ds-tab__btn {
    min-width: 0;
    padding: var(--ds-mobile-padding-3, 0.8rem) var(--ds-mobile-padding-5, 1.4rem);
    font-size: var(--ds-mobile-font-size-label-medium, 1.4rem);
  }
  /* 파이프(|) 구분선 제거 → 밑줄 인디케이터로 전환 */
  .pfmc-info .ds-tab__item + .ds-tab__item::before {
    content: none;
  }
  /* 첫 탭은 콘텐츠 좌측에 flush */
  .pfmc-info .ds-tab__list > .ds-tab__item:first-child > .ds-tab__btn {
    padding-left: 0;
  }
  /* 활성 탭 하단 밑줄 (글자 좌우 패딩에 맞춤, 활성 텍스트와 동일 주황 #e03010) */
  .pfmc-info .ds-tab__btn[aria-selected="true"]::after,
  .pfmc-info .ds-tab__btn.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--ds-mobile-padding-5, 1.4rem);
    right: var(--ds-mobile-padding-5, 1.4rem);
    height: 0.2rem;
    background-color: var(--ds-tab-bold--color-active, #e03010);
  }
  /* 활성 탭이 첫 탭이면 밑줄도 좌측 flush */
  .pfmc-info .ds-tab__list > .ds-tab__item:first-child > .ds-tab__btn[aria-selected="true"]::after,
  .pfmc-info .ds-tab__list > .ds-tab__item:first-child > .ds-tab__btn.is-active::after {
    left: 0;
  }

  .pfmc-info .guide-page-title {
    display: none;
  }

  .pfmc-info .guide-section {
    margin-bottom: var(--ds-mobile-padding-7, 1.8rem);
  }
  .pfmc-info .guide-section__title {
    font-size: var(--ds-font-size-19);                             /* 19px */
    margin-bottom: var(--ds-mobile-padding-6, 1.6rem);
  }

  /* info-card — 모바일은 1열 (아이콘 위, 콘텐츠 아래) */
  .pfmc-info .guide-info-card {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--ds-mobile-padding-7, 1.8rem);
    gap: var(--ds-mobile-padding-5, 1.4rem);
  }
  .pfmc-info .guide-info-card__icon {
    width: var(--ds-number-30);                         /* 60px (100 → 60) */
    height: var(--ds-number-30);
  }
  .pfmc-info .guide-info-card__icon svg {
    width: var(--ds-number-15);                         /* 30px (48 → 30) */
    height: var(--ds-number-15);
  }
  .pfmc-info .guide-info-card__label {
    font-size: var(--ds-mobile-font-size-body-medium, 1.5rem);     /* 15px */
    margin-bottom: var(--ds-number-6);                             /* 12px */
  }
  .pfmc-info .guide-info-card__list {
    gap: var(--ds-number-1, 0.2rem);                               /* 2px — 모바일에서 항목간 더 타이트 (line-height 보정) */
  }
  .pfmc-info .guide-info-card__list li {
    font-size: var(--ds-mobile-font-size-body-small, 1.4rem);      /* 14px */
  }

  /* step-card — 모바일은 1열 */
  .pfmc-info .guide-steps {
    grid-template-columns: 1fr;
    gap: var(--ds-mobile-padding-4, 1.2rem);
  }
  .pfmc-info .guide-step-card {
    min-height: 0;
    padding: var(--ds-mobile-padding-5, 1.4rem);
    gap: var(--ds-mobile-padding-5, 1.4rem);
  }
  .pfmc-info .guide-step-card__icon {
    width: 5rem;                                        /* 80 → 50 */
    height: 5rem;
  }
  .pfmc-info .guide-step-card__icon svg {
    width: var(--ds-mobile-padding-6, 1.6rem);          /* 30 → 16 */
    height: var(--ds-mobile-padding-6, 1.6rem);
  }
  /* STEP 01 라벨 — 더 작게 */
  .pfmc-info .guide-step-card__number {
    font-size: var(--ds-font-size-12);                              /* 12px */
  }
  /* "공연 선택" 등 step 타이틀 — 모바일에선 더 작게 */
  .pfmc-info .guide-step-card__title {
    font-size: var(--ds-font-size-14);                              /* 14px */
  }
  /* step 설명 — 더 작게 */
  .pfmc-info .guide-step-card__desc {
    font-size: var(--ds-font-size-13);                              /* 13px */
    line-height: 1.45;
  }

  /* notice */
  .pfmc-info .guide-notice {
    padding: var(--ds-mobile-padding-7, 1.8rem);
  }
  .pfmc-info .guide-notice__title {
    font-size: var(--ds-mobile-font-size-label-large, 1.6rem);
  }
  .pfmc-info .guide-notice__list li {
    /* step-desc 13px과 info-card list 14px 사이 — 14px로 step desc보다 같거나 작게 (보조 본문) */
    font-size: var(--ds-mobile-font-size-body-small, 1.4rem);
  }

  /* table */
  .pfmc-info .ds-table th,
  .pfmc-info .ds-table td {
    padding: var(--ds-mobile-padding-3, 0.8rem) var(--ds-mobile-padding-4, 1.2rem);
    font-size: var(--ds-mobile-font-size-body-small, 1.4rem);
  }

  /* contact */
  .pfmc-info .guide-contact {
    padding: var(--ds-mobile-padding-5, 1.4rem);
  }
  .pfmc-info .guide-contact__phone {
    font-size: var(--ds-mobile-font-size-label-large, 1.6rem);
  }
  .pfmc-info .guide-contact__time {
    font-size: var(--ds-mobile-font-size-body-small, 1.4rem);
  }
}


/* ==================== 관람예절 CTA + 모달 (이슈 #421, pfmc-page_FRZ_SB.css etiquette-*/clap-* 이식) ==================== */

/* 페이지네이션 ↔ etiquette-cta 간격: 공연/전시는 100px (페이지네이션 하단 100px) */
.ds-pagination:has(+ .etiquette-cta) {
  margin-bottom: 10rem; /* 100px */
}
/* [FIX] form 래핑(eGov 목록): pagination 은 <form> 안, .etiquette-cta 는 form 밖 형제라
   위 인접 셀렉터(.ds-pagination:has(+ .etiquette-cta))가 미매칭 → form 직후 etiquette 가 오면
   form 안 pagination 의 하단 간격을 동일하게 100px 로. */
.sub-page-wrap > form:has(+ .etiquette-cta) .ds-pagination {
  margin-bottom: 10rem; /* 100px */
}

/* 하단 안내 배너 — PUB 디자인 적용 (좌측 안내 + 일러스트 + 우측 채움 CTA) */
.etiquette-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: var(--ds-number-16) var(--ds-number-20);
  border-radius: var(--ds-radius-large);
  background: color-mix(in srgb, var(--ds-color-secondary-5, #eef2f7) 50%, transparent);
}
.etiquette-cta__body {
  flex: 1 1 0;
  min-width: 0;
}
.etiquette-cta__title {
  margin: 0 0 0.8rem;
  font-weight: var(--ds-typo-font-weight-bold);
  font-size: var(--ds-font-size-28);
  color: var(--ds-color-gray-90, #1e2124);
  line-height: var(--ds-typo-line-height-heading);
  letter-spacing: -0.025em;
}
.etiquette-cta__title-key {
  color: var(--ds-color-brand-red-aa, #e03010);
}
.etiquette-cta__desc {
  margin: 0;
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-70, #464c53);
  line-height: 1.5;
}
.etiquette-cta__illust {
  position: absolute;
  bottom: 0;
  right: 22rem;
  height: 13rem;
  width: auto;
  pointer-events: none;
}
.etiquette-cta__btn {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 4rem;
  padding: var(--ds-number-5) var(--ds-number-12);
  background: var(--ds-color-brand-dark, #343a48);
  border: none;
  border-radius: var(--ds-radius-medium);
  cursor: pointer;
  white-space: nowrap;
  font-size: var(--ds-font-size-15);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-0, #ffffff);
}
.etiquette-cta__btn:hover {
  background: var(--ds-color-gray-95, #131416);
}
.etiquette-cta__arrow {
  display: inline-flex;
  align-items: center;
  align-self: center;
  font-size: var(--ds-font-size-16);
  line-height: 1;
}

/* component.css의 .ds-modal-backdrop { display: flex }가 HTML [hidden] 기본값(display: none)을
   덮어써 모달이 페이지 진입 즉시 상시 노출되는 문제 방지 (#421 회귀).
   pfmc-page-V2.css는 head.jsp에서 전역 로드되므로, 가드를 #etiquetteModal로
   스코프 한정해 타 페이지·공통 include 모달로 누수되지 않도록 한다. */
#etiquetteModal[hidden] {
  display: none !important;
}
/* 모달 backdrop 기본 z-index(component.css 300)가 sticky .site-header(header.css 1000)보다
   낮아, 모달이 열려도 헤더가 위에 떠 닫기 버튼을 가리는 문제(#421) 수정.
   헤더 위로 올려 모달이 화면 최상위를 덮도록 한다(이 모달만 한정). */
#etiquetteModal {
  z-index: 1100;
}

/* 관람예절 모달 — 4/3열 배치에 맞춘 폭 */
.etiquette-modal {
  max-width: 80rem;
}
.etiquette-modal .ds-modal__body {
  overflow-x: hidden;
}
.etiquette-modal .etiquette-page {
  padding: 0;
  background: transparent;
}
/* ── 관람예절 모달 본문 — PUB(MNU-U-060101 V1.3) 구조 포팅: 탭 2개 + 행 리스트 + 박수 박스 ── */
/* 탭 네비 */
.etiquette-tabs { margin-bottom: var(--ds-number-12); }
.etiquette-tabs .ds-tab__btn { font-size: var(--ds-font-size-19); }

/* ── 패널 1: 공연 관람예절 (7행 리스트) ── */
.etiquette-panel { position: relative; }
/* 공연 관람예절 인트로 — 박수예절(clap-intro)과 동일 패턴: 제목 + 일러스트(우, 첫 박스에 닿음) */
.etiquette-intro { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 0; }
.etiquette-intro__title { margin: 0; font-size: var(--ds-font-size-28); font-weight: var(--ds-typo-font-weight-bold); color: var(--ds-color-gray-95, #131416); letter-spacing: -0.025em; line-height: var(--ds-typo-line-height-heading); }
.etiquette-intro__illust { flex: 0 0 auto; height: 9rem; width: auto; pointer-events: none; }
.etiquette-rows { display: flex; flex-direction: column; gap: var(--ds-number-6); }
.etiquette-row {
  display: flex; align-items: flex-start; gap: var(--ds-number-6);
  padding: var(--ds-number-12);
  background: var(--ds-color-gray-0, #ffffff);
  border: var(--ds-border-width-thin, 1px) solid var(--ds-color-secondary-10, #d6e0eb);
  border-radius: var(--ds-radius-large);
}
.etiquette-row__icon {
  flex: 0 0 auto; width: 5.2rem; height: 5.2rem; border-radius: var(--ds-radius-max);
  background: #e9f4fb; color: var(--ds-color-primary-60); display: grid; place-items: center;
}
.etiquette-row__icon svg { width: 2.9rem; height: 2.9rem; display: block; }
.etiquette-row__text { min-width: 0; }
.etiquette-row__title { margin: 0 0 0.4rem; font-size: var(--ds-font-size-20); font-weight: var(--ds-typo-font-weight-bold); color: var(--ds-color-gray-95, #131416); letter-spacing: -0.02em; line-height: 1.4; }
.etiquette-row__desc { margin: 0; font-size: var(--ds-font-size-16); font-weight: var(--ds-typo-font-weight-regular); color: var(--ds-color-gray-70, #464c53); line-height: 1.6; }

/* ── 패널 2: 박수예절 (인트로 + 5박스) ── */
.clap-intro { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 0; }
.clap-intro__text { flex: 1 1 0; min-width: 0; }
.clap-intro__title { margin: 0 0 1rem; font-size: var(--ds-font-size-28); font-weight: var(--ds-typo-font-weight-bold); color: var(--ds-color-gray-95, #131416); letter-spacing: -0.025em; line-height: var(--ds-typo-line-height-heading); }
.clap-intro__note { margin: 0; max-width: 40rem; padding-left: 1.3rem; text-indent: -1.3rem; font-size: var(--ds-font-size-16); font-weight: var(--ds-typo-font-weight-regular); color: var(--ds-color-gray-70, #464c53); line-height: 1.6; }
.clap-intro__illust { flex: 0 0 auto; height: 14rem; width: auto; pointer-events: none; }
.clap-boxes { display: flex; flex-direction: column; gap: var(--ds-number-6); }
.clap-box {
  display: flex; align-items: flex-start; gap: 1.3rem;
  padding: var(--ds-number-12);
  background: var(--ds-color-gray-0, #ffffff);
  border: var(--ds-border-width-thin, 1px) solid var(--ds-color-gray-10, #e6e8ea);
  border-radius: var(--ds-radius-large);
}
.clap-box__num { flex: 0 0 auto; font-size: var(--ds-font-size-20); font-weight: var(--ds-typo-font-weight-bold); color: var(--ds-color-brand-red-aa, #e03010); letter-spacing: 0.02em; line-height: 1.4; }
.clap-box__text { min-width: 0; }
.clap-box__genre { margin: 0 0 0.4rem; font-size: var(--ds-font-size-20); font-weight: var(--ds-typo-font-weight-bold); color: var(--ds-color-gray-95, #131416); letter-spacing: -0.02em; line-height: 1.4; }
.clap-box__desc { margin: 0; font-size: var(--ds-font-size-16); font-weight: var(--ds-typo-font-weight-regular); color: var(--ds-color-gray-70, #464c53); line-height: 1.6; }

@media (max-width: 1199px) {
  .etiquette-cta__illust { display: none; }
}
@media (max-width: 767px) {
  .etiquette-cta { flex-direction: column; align-items: stretch; gap: 1.6rem; padding: var(--ds-number-12) var(--ds-number-12); }
  .etiquette-cta__title { font-size: var(--ds-font-size-20); }
  .etiquette-cta__desc { font-size: var(--ds-font-size-15); }
  .etiquette-cta__btn { width: 100%; justify-content: center; }
  .etiquette-tabs .ds-tab__btn { font-size: var(--ds-font-size-16); }
  .etiquette-panel__illust, .clap-intro__illust { display: none; }
  .etiquette-row, .clap-box { padding: var(--ds-number-8, 1.6rem); gap: 1.3rem; }
  .etiquette-row__icon { width: 4.4rem; height: 4.4rem; }
  .etiquette-row__icon svg { width: 2.4rem; height: 2.4rem; }
  .etiquette-row__title, .clap-box__genre { font-size: var(--ds-font-size-16); }
  .etiquette-row__desc, .clap-box__desc, .clap-intro__note { font-size: var(--ds-font-size-15); }
  .clap-intro__title { font-size: var(--ds-font-size-20); }
}

/* ── 전시(exhbt) 관람예절 모달 — SB 화면 기준(카드/섹션 + 박수 5단계). 공연(PUB 탭)과 activeTab 분기로 공존(클래스명 비충돌) ── */
.etiquette-section { display: block; }
.etiquette-section + .etiquette-section { margin-top: 5.5rem; }
.etiquette-section__head { display: flex; flex-direction: column; gap: var(--ds-number-5); margin-bottom: var(--ds-number-13); }
.etiquette-section__title { font-family: var(--ds-typo-font-type-title); font-size: var(--ds-font-size-28); font-weight: var(--ds-typo-font-weight-bold); color: var(--ds-light-color-text-bolder); line-height: var(--ds-typo-line-height-heading); letter-spacing: -0.025em; }
.etiquette-section__body { min-width: 0; }
.etiquette-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.etiquette-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.3rem; padding: 2.4rem 1.4rem; background: var(--ds-color-gray-0); border-radius: var(--ds-radius-large); }
.etiquette-card__icon { width: 5.2rem; height: 5.2rem; border-radius: 50%; background: #e9f4fb; color: var(--ds-color-primary-60); display: grid; place-items: center; }
.etiquette-card__icon svg { width: 2.9rem; height: 2.9rem; display: block; }
.etiquette-card__title { font-size: var(--ds-font-size-16); font-weight: var(--ds-typo-font-weight-bold); color: var(--ds-light-color-text-bolder); letter-spacing: -0.02em; line-height: 1.4; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.etiquette-card__desc { font-size: var(--ds-font-size-13); line-height: 1.6; color: var(--ds-light-color-text-subtle); text-wrap: pretty; margin: 0; }
.clap-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.clap-step { flex: 1; min-height: 15rem; padding: 2.4rem 1.8rem; background: var(--ds-color-gray-0); box-shadow: inset 0 0 0 1px var(--ds-light-color-border-gray-light); border-radius: var(--ds-radius-medium); display: flex; flex-direction: column; }
.clap-step:nth-child(even) { background: var(--ds-color-gray-5); }
.clap-step__num { font-size: var(--ds-font-size-20); font-weight: var(--ds-typo-font-weight-bold); color: var(--ds-color-brand-orange); letter-spacing: 0.02em; margin-bottom: 1rem; }
.clap-step__genre { font-size: 1.8rem; font-weight: var(--ds-typo-font-weight-bold); color: var(--ds-light-color-text-bolder); letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 0.8rem; min-height: calc(1.8rem * 1.3 * 2); }
.clap-step__desc { font-size: var(--ds-font-size-13); line-height: 1.55; color: var(--ds-light-color-text-subtle); text-wrap: pretty; margin: 0; }
.clap-note { margin: 2rem 0 0; font-size: var(--ds-font-size-14); line-height: 1.6; color: var(--ds-light-color-text-subtle); }
@media (max-width: 1199px) {
  .clap-flow { flex-wrap: wrap; }
  .clap-step { flex: 1 1 calc(33.333% - 0.8rem); min-width: 18rem; }
}
@media (max-width: 767px) {
  .etiquette-modal .etiquette-card-grid, .etiquette-modal .clap-flow { grid-template-columns: repeat(2, 1fr); }
  .etiquette-section + .etiquette-section { margin-top: var(--ds-number-15); }
  .etiquette-section__title { font-size: var(--ds-mobile-font-size-heading-medium); }
  .etiquette-card-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .etiquette-card { padding: 1.8rem 1.2rem; gap: 1rem; }
  .clap-flow { flex-direction: column; gap: 1rem; }
  .clap-step { flex: 1 0 auto; min-height: 0; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════
   상세 히어로(포스터 + 우측 정보) 반응형 — PUB V3 통일
   대상: pfmcView·archiveView·festival_view·evnt_view (상세 전용 클래스)
   · 태블릿(768~1199): 2열 유지(4fr 6fr), 포스터 5:7
   · 모바일(≤767): 1열 스택 + 본문 CTA 노출(플로팅 CTA 미사용)
   파일 후순위에 두어 기존 1023/767 구버전 규칙을 덮어쓴다.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) and (min-width: 768px) {
  .venue-layout {
    grid-template-columns: 4fr 6fr;
    gap: var(--ds-number-30, 6rem);
    align-items: start;
  }
  .venue-layout__media {
    width: 100%;
    max-width: 42rem;
    height: auto;
    aspect-ratio: 5 / 7;
    align-self: start;
  }
  .venue-layout__content { gap: 0; }
  .pfmc-detail-badges .ds-tag { font-size: var(--ds-font-size-15, 1.5rem); }
  .pfmc-detail-title {
    font-size: var(--ds-font-size-28, 2.8rem);
    padding-bottom: var(--ds-number-9, 1.8rem);
  }
  .pfmc-info-list { margin-top: var(--ds-number-9, 1.8rem); }
  .pfmc-info-list__row { padding: var(--ds-number-5, 1rem) 0; }
  .pfmc-info-list__label { width: 8rem; font-size: var(--ds-font-size-14, 1.4rem); }
  .pfmc-info-list__value { font-size: var(--ds-font-size-15, 1.5rem); line-height: 1.6; }
  .pfmc-detail-subtitle { font-size: var(--ds-font-size-15, 1.5rem); }   /* 정보 리스트 값(15)과 통일 */
  .pfmc-detail-cta {
    display: flex;
    flex-direction: row;
    gap: var(--ds-number-6, 1.2rem);
    padding-top: var(--ds-number-15, 3rem);
  }
  .pfmc-detail-cta .ds-btn--xl {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--ds-number-24, 4.8rem);
    padding: var(--ds-number-7, 1.4rem) var(--ds-number-10, 2rem);
    font-size: var(--ds-font-size-17, 1.7rem);
    gap: var(--ds-number-4, 0.8rem);
  }
  .pfmc-detail-cta .ds-btn__icon { width: var(--ds-number-10, 2rem); height: var(--ds-number-10, 2rem); }
}

@media (max-width: 767px) {
  .venue-layout {
    grid-template-columns: 1fr;
    gap: var(--ds-number-15, 3rem);
    align-items: start;
  }
  .venue-layout__media {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 5 / 7;
    align-self: stretch;
  }
  .venue-layout__content { gap: 0; }
  .pfmc-detail-badges .ds-tag {
    min-height: var(--ds-number-14, 2.8rem);
    height: auto;
    padding: 0 var(--ds-number-4, 0.8rem);
    font-size: var(--ds-font-size-12, 1.2rem);
    line-height: var(--ds-number-14, 2.8rem);
  }
  .pfmc-detail-title {
    font-size: var(--ds-mobile-font-size-heading-medium, 2.2rem);
    padding-bottom: var(--ds-mobile-padding-5, 1.4rem);
  }
  .pfmc-info-list { margin-top: var(--ds-mobile-padding-7, 1.8rem); }
  .pfmc-info-list__row { padding: 5px 0; gap: var(--ds-number-5, 1rem); }
  .pfmc-info-list__label { width: 7rem; font-size: var(--ds-font-size-13, 1.3rem); line-height: 1.4; }
  .pfmc-info-list__value { font-size: var(--ds-font-size-14, 1.4rem); line-height: 1.5; }
  .pfmc-detail-subtitle { font-size: var(--ds-font-size-14, 1.4rem); line-height: 1.5; }   /* 정보 리스트 값(14)과 통일 */
  /* 모바일 본문 CTA 노출 — PUB과 동일(플로팅 CTA 미사용). dev 의 display:none 덮어씀 */
  .pfmc-detail-cta {
    display: flex;
    flex-direction: column;
    gap: var(--ds-mobile-padding-4, 1.2rem);
    padding-top: var(--ds-mobile-padding-7, 1.8rem);
  }
  .pfmc-detail-cta .ds-btn--xl {
    width: 100%;
    min-width: 0;
    min-height: var(--ds-btn--height-l, 4.8rem);
    padding: var(--ds-number-6, 1.2rem) var(--ds-number-8, 1.6rem);
    font-size: var(--ds-mobile-font-size-label-small, 1.5rem);
    gap: var(--ds-number-4, 0.8rem);
  }
  .pfmc-detail-cta .ds-btn__icon { width: var(--ds-number-10, 2rem); height: var(--ds-number-10, 2rem); }
  /* 플로팅 CTA 제거 — 마크업 없음 + PUB 미사용 */
  .pfmc-floating-cta { display: none; }
}


/* ====================================================================
   게시판 상세 공통 — 헤더 상단 진한 라인 + 공지/분류 태그(흰 pill + 파란 외곽)
   ────────────────────────────────────────────────────────────────────
   bbs_view.jsp(공유 상세뷰)의 제목 위 태그블록 `.ds-detail-header__tags--bbs`.
   pfmc-page-V2.css는 head.jsp가 모든 페이지에 전역 로드 → 게시판별 pageCss
   주입(community/foundation/없음)·.management-v2 래퍼 유무와 무관하게 항상 적용.
   qna 상세는 마커(--bbs) 미사용으로 영향 없음.
   PUB 정본: 경영공시 상세(.management-v2 .ds-detail-header__tags .ds-tag)와 동일 렌더.
   ==================================================================== */
.ds-detail-header__tags--bbs {
  border-top: 2px solid var(--ds-color-brand-dark);
  padding-top: var(--ds-number-12);
}
.ds-detail-header__tags--bbs .ds-tag {
  background-color: var(--ds-color-gray-0, #fff);
  color: var(--ds-comp-color, var(--ds-light-color-text-subtle));
  border-color: var(--ds-comp-color, var(--ds-light-color-border-gray));
  border-radius: var(--ds-radius-max, 999px); /* Figma: pill 100px */
  line-height: 1;
  height: var(--ds-number-15, 3rem);
  padding-inline: var(--ds-number-6, 1.2rem);
  font-size: var(--ds-font-size-14, 1.4rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
}