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

/* === source: pfmc-page-v3.css === */
/* ============================================================
   PFMC DETAIL v3 — 공연·전시 상세 v3 페이지 전용 스타일
   2026 Figma 시안 반영
   적용 파일: MNU-U-060102_공연전시상세_design_v3.html, MNU-U-060202_축제행사상세_design_v3.html
   격리: .pfmc-detail-v3 wrapper 하위에서만 적용 (다른 페이지 영향 없음)
   self-contained: pfmc-page.css 의존성 없음 (필요 base 룰 모두 포함)

   토큰 매핑 주석:
     Figma 38px → DS font-size-36 (가까운 값)
     Figma 21px → DS font-size-22 (가까운 값)
     기타 모든 px는 DS number/size/color 토큰과 정확 일치
   ============================================================ */


/* ==================== BASE LAYER — pfmc-page.css에서 추출 ====================
   self-contained 동작 위해 venue-layout/pfmc-detail-*/pfmc-info-list/
   pfmc-floating-cta base 룰을 .pfmc-detail-v3 prefix로 포함.
   (이후 V01~V03 섹션의 룰이 이 base를 오버라이드) */

/* venue-layout (포스터 + 정보 영역) */
.pfmc-detail-v3 .venue-layout {
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: var(--ds-number-20);
  align-items: stretch;
}
.pfmc-detail-v3 .venue-layout__media {
  border-radius: var(--ds-radius-large);
  overflow: hidden;
  aspect-ratio: 5 / 7;
  background: var(--ds-color-gray-5);
}
.pfmc-detail-v3 .venue-layout__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pfmc-detail-v3 .venue-layout__content {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-8);
}

/* 배지 + 타이틀 + 정보 리스트 base */
.pfmc-detail-v3 .pfmc-detail-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pfmc-detail-v3 .pfmc-detail-badges__tags {
  display: flex;
  gap: var(--ds-number-3);
}
.pfmc-detail-v3 .pfmc-detail-title {
  font-size: 3.6rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
  line-height: 1.2;
  letter-spacing: -0.025em;
  word-break: keep-all;
}
.pfmc-detail-v3 .pfmc-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pfmc-detail-v3 .pfmc-info-list__row {
  display: flex;
  align-items: baseline;
  padding: var(--ds-number-3) 0;
  border-bottom: var(--ds-border-width-thin) solid var(--ds-light-color-divider-gray-light);
}
.pfmc-detail-v3 .pfmc-info-list__row:last-child {
  border-bottom: none;
}
.pfmc-detail-v3 .pfmc-info-list__label {
  width: 9rem;
  flex-shrink: 0;
  font-size: var(--ds-pc-font-size-body-small);
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-light-color-text-subtle);
}
.pfmc-detail-v3 .pfmc-info-list__value {
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-basic);
  line-height: 1.5;
}

/* CTA / 섹션 base */
.pfmc-detail-v3 .pfmc-detail-cta {
  display: flex;
  align-items: center;
  gap: var(--ds-number-6);
  margin-top: auto;
}
.pfmc-detail-v3 .pfmc-detail-section {
  margin-top: 10rem;
}

/* ==================== V01. Hero — venue-layout 오버라이드 ==================== */
.pfmc-detail-v3 .venue-layout {
  display: grid;
  grid-template-columns: 42rem 1fr;                     /* 좌 포스터 420px 고정 + 우 가변 */
  gap: var(--ds-number-40);                             /* 80px */
  align-items: start;                                   /* base의 stretch 막기 (포스터 비율 보호) */
}

/* Hero 우측 컨텐츠 — 자식별 margin-top으로 간격 명시 (gap 0) */
.pfmc-detail-v3 .venue-layout__content {
  gap: 0;
  align-self: stretch;                                  /* 그리드 행 높이(포스터 560px)에 맞춰 늘어남 */
}

/* 포스터 — 시안 420 고정 너비, 5:7 비율 (height = 588px 자동 도출) */
.pfmc-detail-v3 .venue-layout__media {
  width: 42rem;                                         /* 420px */
  aspect-ratio: 5 / 7;                                  /* 420 × 588 (5:7) */
  align-self: start;
}


/* ==================== V01-1. 배지 행 (카테고리/상태 + 공유/인쇄) ==================== */
.pfmc-detail-v3 .pfmc-detail-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  gap: 0;                                               /* 좌·우 정렬 (space-between) */
}
.pfmc-detail-v3 .pfmc-detail-badges__tags {
  gap: var(--ds-number-3);                              /* 6px */
}
/* venue-layout__content 자식 간격 — 형제 selector로 명시
   CTA는 .pfmc-detail-cta 자체 룰의 margin-top: auto 로 컬럼 바닥에 정렬 (정보리스트 행 개수 차이에도 위치 유지) */
.pfmc-detail-v3 .pfmc-detail-badges + .pfmc-detail-title {
  margin-top: 15px;
}
.pfmc-detail-v3 .pfmc-detail-title + .pfmc-info-list {
  margin-top: 30px;
}
/* DS 동기화: pfmc-page.css의 .pfmc-tag--line 룰 (배경 투명 + primary-50 보더) — v3는 pfmc-page.css 미로드라 여기에 가져옴 */
.pfmc-detail-v3 .pfmc-tag--line {
  background-color: transparent;
  border-color: var(--ds-comp-color, var(--ds-color-primary-50));
}
/* [CUSTOM START: .ds-tag] DS 기본 radius 8px → 시안 radius 30px (border-radius만 v3 커스텀) */
.pfmc-detail-v3 .pfmc-detail-badges .ds-tag {
  font-size: 14px;
  border-radius: 30px;
}
/* [CUSTOM END: .ds-tag] */


/* ==================== V01-2. 공연명 ==================== */
.pfmc-detail-v3 .pfmc-detail-title {
  font-size: var(--ds-font-size-36);                    /* Figma 38 → DS 36 (가까움) */
  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: 0;
  padding-bottom: var(--ds-number-11);                  /* 22px (Figma gap) */
  border-bottom: var(--ds-border-width-thin) solid var(--ds-color-primary-95);  /* #000d14 1px */
}


/* ==================== V01-2-1. 부제목 — 제목 아래, 하단 구분선 ==================== */
/* 부제목이 있으면 제목의 구분선을 부제목 아래로 이동 (부제목 없으면 제목 룰의 보더 유지) */
.pfmc-detail-v3 .pfmc-detail-title:has(+ .pfmc-detail-subtitle) {
  padding-bottom: var(--ds-number-7);                   /* 14px — 제목 ↔ 부제목 간격 */
  border-bottom: none;
}
.pfmc-detail-v3 .pfmc-detail-subtitle {
  margin: 0;
  padding-top: 0;
  padding-bottom: var(--ds-number-11);                  /* 22px — 부제목 ↔ 구분선 */
  font-size: 16px;
  font-weight: var(--ds-typo-font-weight-semibold);     /* 600 — info-list value 동일 */
  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) solid var(--ds-color-primary-95);  /* 제목에서 이동한 구분선 */
}
/* 구분선(부제목) ↔ 정보 리스트 간격 */
.pfmc-detail-v3 .pfmc-detail-subtitle + .pfmc-info-list {
  margin-top: var(--ds-number-15);                      /* 30px */
}


/* ==================== V01-3. 정보 리스트 ==================== */
.pfmc-detail-v3 .pfmc-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}
.pfmc-detail-v3 .pfmc-info-list__row {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-number-2);
  padding-bottom: 20px;
  padding-top: 0px;
  border-bottom: none;
}
.pfmc-detail-v3 .pfmc-info-list__label {
  width: 10rem;                                         /* 100px (시안 max-width 100) */
  flex-shrink: 0;
  font-size: var(--ds-font-size-16);                    /* 16px Semibold */
  font-weight: var(--ds-typo-font-weight-semibold);
  color: #777b80;
  line-height: 1.6;
  letter-spacing: -0.012em;
}
.pfmc-detail-v3 .pfmc-info-list__value {
  font-size: 16px;
  font-weight: var(--ds-typo-font-weight-semibold);     /* 600 */
  color: var(--ds-color-gray-90);                       /* #1e2124 */
  line-height: 1.6;                                     /* 라벨과 동일 — 행 세로 길이(25.6px)에 맞춤 */
  letter-spacing: -0.011em;
}


/* 요약 설명은 정보 리스트 안 row(라벨 "요약" + 값)로 편입 — info-list__value 타이포 그대로 사용 */


/* ==================== V01-4. CTA 버튼 영역 ====================
   margin-top: auto + padding-top: 30px — 컬럼 stretch 시 항상 바닥 정렬,
   정보 리스트와의 최소 30px 간격은 padding-top 으로 보장 (행 개수가 적어도 보기 자연스럽게) */
.pfmc-detail-v3 .pfmc-detail-cta {
  display: flex;
  align-items: stretch;
  gap: var(--ds-number-10);                             /* 20px */
  margin-top: auto;
  padding-top: 30px;
}
/* 예매하기·신청하기 공통 — ds-btn--xl 위 시안 추가 스펙 (버튼 컴포넌트 상세 스펙) */
.pfmc-detail-v3 .pfmc-detail-cta .ds-btn--xl {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 28rem;                                     /* 280px */
  min-height: var(--ds-number-28);                      /* 56px */
  padding: var(--ds-number-10) var(--ds-number-18);     /* 20px 36px */
  gap: var(--ds-number-6);                              /* 12px (icon ↔ text) */
  font-size: var(--ds-font-size-22);                    /* Figma 21 → DS 22 (가까움) */
  font-weight: var(--ds-typo-font-weight-bold);
}
.pfmc-detail-v3 .pfmc-detail-cta .ds-btn__icon {
  width: var(--ds-number-12);                           /* 24px */
  height: var(--ds-number-12);
  display: inline-block;
  flex-shrink: 0;
}


/* ==================== V02. 공연소개 섹션 ==================== */
/* 풀 폭 그라데이션 띠 — 페이지 좌우 컨테이너 폭을 벗어나 화면 전체로 */
.pfmc-detail-v3 .pfmc-subtitle-v3-wrap {
  width: 100vw;
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(180deg, var(--ds-color-gray-5) 0%, var(--ds-color-gray-0) 100%);
  padding-top: var(--ds-number-30);                     /* 60px */
  padding-bottom: var(--ds-number-15);                  /* 30px */
  margin-top: 10rem;                                    /* 100px (Hero ↔ 공연소개) */
}
/* inner — sub-page-wrap과 동일 폭/패딩으로 정확히 좌측 정렬 */
.pfmc-detail-v3 .pfmc-subtitle-v3-inner {
  max-width: var(--ds-contents-size-wide);              /* 1440px */
  margin-inline: auto;
  padding-inline: 0;
}
@media (max-width: 1440px) {
  .pfmc-detail-v3 .pfmc-subtitle-v3-inner {
    padding-inline: var(--ds-pc-padding-layout-side);   /* 30px (PC/태블릿) */
  }
}
@media (max-width: 767px) {
  .pfmc-detail-v3 .pfmc-subtitle-v3-inner {
    padding-inline: var(--ds-mobile-padding-layout-side, 1.6rem); /* 16px (모바일 sub-page-wrap과 정렬) */
  }
}
.pfmc-detail-v3 .pfmc-subtitle-v3 {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-number-6);                              /* 12px */
}
.pfmc-detail-v3 .pfmc-subtitle-v3__title {
  font-size: var(--ds-font-size-28);                    /* 28px */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-95);                       /* #131416 */
  line-height: 1.2;
  letter-spacing: -0.007em;
  margin: 0;
}
.pfmc-detail-v3 .pfmc-subtitle-v3__line {
  width: 100%;
  height: var(--ds-border-width-medium);                /* 2px */
  background: var(--ds-color-brand-dark);               /* #343A48 */
}

/* 본문 (WYSIWYG) — 시안 스펙
   margin 기반 자식 간격 (개별 케이스 오버라이드 용이) */
.pfmc-detail-v3 .pfmc-detail-section {
  margin-top: 0;                                        /* 위 wrap에 margin 있음 */
}
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg {
  padding-top: var(--ds-number-15);                     /* 30px (그라데이션 wrap → 본문) */
}
/* 인접 형제 간 기본 간격 = 24px */
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg > * + * {
  margin-top: var(--ds-number-12);                      /* 24px */
}
/* 이미지 → 다음 텍스트 간격 = 20px (요청 스펙) */
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg img + * {
  margin-top: var(--ds-number-10);                      /* 20px */
}
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg p {
  font-size: 1.8rem;                                    /* 18px (DS에 18 토큰 없어 literal) */
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-90);                       /* #1e2124 */
  letter-spacing: -0.01em;
}
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg img {
  width: 100%;
  max-width: 96rem;                                     /* 960px 상한 */
  height: auto;                                         /* 상세이미지는 자연 비율로 전체 출력 (긴 세로 이미지 대응) */
  margin-inline: auto;                                  /* 가운데 정렬 */
  border-radius: 0;
  display: block;
}
/* 본문 글머리 리스트 (축제·행사 등에서 주요 프로그램 ul 사용)
   - ul: 4×4 dot bullet (기본 disc 너무 커서 커스텀)
   - ol: decimal */
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg ul,
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg ol {
  font-size: var(--ds-font-size-19);
  color: var(--ds-color-gray-90);
  line-height: 1.6;
  padding-left: 0;
  list-style: none;
}
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg ul li,
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg ol li {
  position: relative;
  padding-left: var(--ds-number-6);                     /* 12px (bullet + gap) */
}
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;                                           /* 첫 줄 한글 시각 중심 정렬 (baseline 보정) */
  width: var(--ds-number-2);                            /* 4px */
  height: var(--ds-number-2);                           /* 4px */
  border-radius: var(--ds-radius-max);                  /* 원형 */
  background: currentColor;
}
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg ol {
  counter-reset: ds-ol;
}
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg ol li {
  counter-increment: ds-ol;
  padding-left: var(--ds-number-9);                     /* 18px */
}
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg ol li::before {
  content: counter(ds-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
}
.pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg li + li {
  margin-top: var(--ds-number-3);                       /* 6px */
}


/* ==================== V03. 하단 목록 버튼 영역 ==================== */
.pfmc-detail-v3 .ds-detail-actions {
  border-top: var(--ds-border-width-thin) solid var(--ds-color-gray-10);  /* #e6e8ea */
  padding-top: var(--ds-number-30);                     /* 60px */
  text-align: center;
  margin-top: var(--ds-number-30);                      /* 60px (본문 ↔ 목록버튼) */
}
.pfmc-detail-v3 .ds-detail-actions .ds-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: var(--ds-number-20);                      /* 40px */
  padding: var(--ds-number-5) var(--ds-number-12);      /* 10px 24px */
  font-size: var(--ds-font-size-16);                    /* 16px (이미지 비례) */
  font-weight: var(--ds-typo-font-weight-bold);
  letter-spacing: -0.01em;
}
/* layout.css의 ds-detail-actions .ds-btn:first-child가 자동 gray-60 fill을 강제하므로
   v3에서는 first-child 룰을 명시적으로 transparent + color-utility 컬러로 복구
   (CSS 변수 선언만으론 cascaded value 적용 시점 문제로 적용이 안 되는 케이스가 있어
    background/border/color를 직접 선언) */
.pfmc-detail-v3 .ds-detail-actions .ds-btn:first-child {
  background-color: transparent;
  color: var(--ds-comp-color);
  border: var(--ds-border-width-thin) solid var(--ds-comp-color);
}
.pfmc-detail-v3 .ds-detail-actions .ds-btn:first-child:hover {
  background-color: color-mix(in srgb, var(--ds-comp-color) 8%, white);
}


/* ==================== R. 반응형 — 태블릿 (768~1199px) ==================== */
@media (max-width: 1199px) and (min-width: 768px) {
  /* Hero — 포스터 + 우측 텍스트 영역 모두 viewport 비율로 자동 축소 */
  .pfmc-detail-v3 .venue-layout {
    grid-template-columns: 4fr 6fr;                     /* 비율 자동 축소 (포스터 ~40%, 텍스트 ~60%) — 태블릿에서 포스터 더 크게 노출 */
    gap: var(--ds-number-30);                           /* 60px (6rem) */
    align-items: start;
  }
  /* 포스터 — width 100%로 컬럼에 꽉 차게 + 5:7 비율 유지, 시안 PC 사이즈 넘지 않게 max 42rem */
  .pfmc-detail-v3 .venue-layout__media {
    width: 100%;
    max-width: 42rem;                                   /* PC 시안 420 초과 금지 */
    height: auto;
    aspect-ratio: 5 / 7;                                /* 5:7 비율 */
    align-self: start;
  }
  .pfmc-detail-v3 .venue-layout__content {
    gap: 0;
  }
  /* 자식 간격 — 형제 selector */
  .pfmc-detail-v3 .pfmc-detail-badges + .pfmc-detail-title {
    margin-top: 15px;
  }
  .pfmc-detail-v3 .pfmc-detail-title + .pfmc-info-list,
  .pfmc-detail-v3 .pfmc-info-list + .pfmc-detail-cta {
    margin-top: var(--ds-number-9);                     /* 18px */
  }
  /* 배지 폰트 */
  .pfmc-detail-v3 .pfmc-detail-badges .ds-tag {
    font-size: var(--ds-font-size-15);                  /* 15px */
  }
  /* 공연명 — 36 → 28 */
  .pfmc-detail-v3 .pfmc-detail-title {
    font-size: var(--ds-font-size-28);
    padding-bottom: var(--ds-number-9);                 /* 18px */
  }
  /* 정보 리스트 — 라벨 14, 값 15 */
  .pfmc-detail-v3 .pfmc-info-list__row {
    padding: var(--ds-number-5) 0;                      /* 10px */
  }
  .pfmc-detail-v3 .pfmc-info-list__label {
    width: 8rem;                                        /* 80px */
    font-size: var(--ds-font-size-14);
  }
  .pfmc-detail-v3 .pfmc-info-list__value {
    font-size: var(--ds-font-size-15);
    line-height: 1.6;
  }
  /* 부제목 — 정보 리스트 값(15)과 통일 */
  .pfmc-detail-v3 .pfmc-detail-subtitle {
    font-size: var(--ds-font-size-15);
  }
  /* CTA — 가로 유지, 사이즈 축소 */
  .pfmc-detail-v3 .pfmc-detail-cta {
    gap: var(--ds-number-6);                            /* 12px */
    padding-top: var(--ds-number-15);                   /* 30px */
  }
  .pfmc-detail-v3 .pfmc-detail-cta .ds-btn--xl {
    flex: 1 1 0;
    min-width: 0;                                       /* 280 해제, 가변 */
    min-height: var(--ds-number-24);                    /* 48px */
    padding: var(--ds-number-7) var(--ds-number-10);    /* 14px 20px */
    font-size: var(--ds-font-size-17);
    gap: var(--ds-number-4);                            /* 8px (icon ↔ text) */
  }
  .pfmc-detail-v3 .pfmc-detail-cta .ds-btn__icon {
    width: var(--ds-number-10);                         /* 20px */
    height: var(--ds-number-10);
  }
  /* 공연소개 ↔ Hero 간격 */
  .pfmc-detail-v3 .pfmc-subtitle-v3-wrap {
    margin-top: 10rem;                                  /* 100px (PC와 동일) */
    padding-top: var(--ds-number-30);                   /* 60px (PC와 동일) */
    padding-bottom: var(--ds-number-15);                /* 30px (PC와 동일) */
  }
  .pfmc-detail-v3 .pfmc-subtitle-v3__title {
    font-size: var(--ds-font-size-22);                  /* 22px (PC 28 → 22) */
  }
  /* 본문 */
  .pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg {
    gap: var(--ds-number-9);                            /* 18px */
    padding-top: var(--ds-number-10);
  }
  .pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg p {
    font-size: var(--ds-font-size-16);
    line-height: 1.6;
  }
  /* ul/ol — 태블릿 폰트 축소 */
  .pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg ul,
  .pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg ol {
    font-size: var(--ds-font-size-16);
    padding-left: var(--ds-number-9);                   /* 18px */
  }
  /* 목록 버튼 — 태블릿: 사이즈 살짝 축소 */
  .pfmc-detail-v3 .ds-detail-actions {
    padding-top: var(--ds-number-30);                   /* 60px (PC와 동일) */
    margin-top: var(--ds-number-30);                    /* 60px (PC와 동일) */
  }
  /* 목록 버튼 자체 사이즈는 PC 베이스 룰(40px / 16px Bold / 10px 24px) 그대로 사용 — 브레이크포인트별 너비 통일 */
}


/* ==================== R. 반응형 — 모바일 (≤ 767px) ==================== */
@media (max-width: 767px) {
  /* Hero — 모바일은 1열, 포스터가 가로 꽉 차게 */
  .pfmc-detail-v3 .venue-layout {
    grid-template-columns: 1fr;
    gap: var(--ds-number-15);                           /* 30px — 포스터 ↔ 공연상세정보 */
    align-items: start;
  }
  /* 모바일 포스터 — 폭 100% (max-width 해제) + 5:7 비율 */
  .pfmc-detail-v3 .venue-layout__media {
    width: 100%;
    max-width: none;                                    /* PC 시안 한도(42rem) 해제 */
    height: auto;
    aspect-ratio: 5 / 7;
    align-self: stretch;
  }
  .pfmc-detail-v3 .venue-layout__content {
    gap: 0;
  }
  /* 자식 간격 — 형제 selector */
  .pfmc-detail-v3 .pfmc-detail-badges + .pfmc-detail-title {
    margin-top: 15px;
  }
  .pfmc-detail-v3 .pfmc-detail-title + .pfmc-info-list,
  .pfmc-detail-v3 .pfmc-info-list + .pfmc-detail-cta {
    margin-top: var(--ds-mobile-padding-7, 1.8rem);     /* 18px */
  }
  /* 라벨 — 모바일 자동 축소가 specificity로 막혀서 명시적으로 작게 */
  .pfmc-detail-v3 .pfmc-detail-badges .ds-tag {
    min-height: var(--ds-number-14);                    /* 28px */
    height: auto;
    padding: 0 var(--ds-number-4);                      /* 0 8px */
    font-size: var(--ds-font-size-12);                  /* 12px */
    line-height: var(--ds-number-14);                   /* 28px (vertical center) */
  }
  .pfmc-detail-v3 .pfmc-detail-title {
    font-size: var(--ds-mobile-font-size-heading-medium, 2.2rem);
    padding-bottom: var(--ds-mobile-padding-5, 1.4rem);
  }
  /* 정보 리스트 행 — 모바일 padding/line-height도 축소 */
  .pfmc-detail-v3 .pfmc-info-list__row {
    padding: 5px 0;
    gap: var(--ds-number-5);                            /* 10px (1rem) — 라벨↔값 간격 */
  }
  .pfmc-detail-v3 .pfmc-info-list__label {
    width: 7rem;                                        /* 70px */
    font-size: var(--ds-font-size-13);                  /* 13px (모바일 라벨 축소) */
    line-height: 1.4;
  }
  .pfmc-detail-v3 .pfmc-info-list__value {
    font-size: var(--ds-font-size-14);                  /* 14px (모바일 값 축소) */
    line-height: 1.5;
  }
  /* 부제목 — 정보 리스트 값(14)과 통일 */
  .pfmc-detail-v3 .pfmc-detail-subtitle {
    font-size: var(--ds-font-size-14);                  /* 14px (모바일 값 축소) */
    line-height: 1.5;
  }
  /* CTA — 모바일 1열 풀폭, 사이즈는 ds-btn--l(48px) 수준으로 축소 */
  .pfmc-detail-v3 .pfmc-detail-cta {
    flex-direction: column;
    gap: var(--ds-mobile-padding-4, 1.2rem);
    padding-top: var(--ds-mobile-padding-7, 1.8rem);
  }
  .pfmc-detail-v3 .pfmc-detail-cta .ds-btn--xl {
    width: 100%;
    min-width: 0;
    min-height: var(--ds-btn--height-l);                /* 48px (ds-btn--l 사이즈) */
    padding: var(--ds-number-6) var(--ds-number-8);     /* 12px 16px */
    font-size: var(--ds-mobile-font-size-label-small, 1.5rem);  /* 15px (플로팅과 동일) */
    gap: var(--ds-number-4);                            /* 8px (icon ↔ text) */
  }
  .pfmc-detail-v3 .pfmc-detail-cta .ds-btn__icon {
    width: var(--ds-number-10);                         /* 20px */
    height: var(--ds-number-10);
  }
  /* 서브타이틀 */
  .pfmc-detail-v3 .pfmc-subtitle-v3__title {
    font-size: var(--ds-mobile-font-size-heading-small, 1.8rem);
  }
  .pfmc-detail-v3 .pfmc-subtitle-v3-wrap {
    margin-top: 10rem;                                  /* 100px (PC와 동일) */
    padding-top: var(--ds-number-30);                   /* 60px (PC와 동일) */
    padding-bottom: var(--ds-number-15);                /* 30px (PC와 동일) */
  }
  /* 본문 — 모바일 (margin 기반 자식 간격 일관 적용) */
  .pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg {
    padding-top: var(--ds-mobile-padding-5, 1.4rem);
  }
  .pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg > * + * {
    margin-top: var(--ds-mobile-padding-5, 1.4rem);     /* 14px */
  }
  .pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg img + * {
    margin-top: var(--ds-mobile-padding-4, 1.2rem);     /* 12px */
  }
  .pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg p {
    font-size: var(--ds-mobile-font-size-body-medium, 1.5rem);
  }
  /* ul/ol — 모바일 폰트 축소 */
  .pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg ul,
  .pfmc-detail-v3 .pfmc-detail-section .ds-wysiwyg ol {
    font-size: var(--ds-mobile-font-size-body-medium, 1.5rem);
    padding-left: var(--ds-mobile-padding-5, 1.4rem);
  }
  /* 목록 버튼 — 모바일: 더 작게 */
  .pfmc-detail-v3 .ds-detail-actions {
    padding-top: var(--ds-number-30);                   /* 60px (PC와 동일) */
    margin-top: var(--ds-number-30);                    /* 60px (PC와 동일) */
  }
  /* 목록 버튼 자체 사이즈는 PC 베이스 룰 그대로 사용 — 브레이크포인트별 너비 통일 */
}

/* === source: online-exhibition-v3.css === */
/* online-exhibition-v3.css — 온라인전시관 v3 (MNU-U-060500)
   Self-contained. gallery-v3 wrapper 격리.
   Figma TO-BE node-id 13847:5918 스펙 정확 적용
   ────────────────────────────────────────────────
   wrapper : .gallery-v3
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Montserrat:wght@400;500;600&display=swap');

/* ==================== BASE LAYER ==================== */

body:has(.gallery-v3) {
  margin: 0;
  padding: 0;
  overflow-x: hidden;   /* 좌측 패널 풀블리드(컨테이너 밖 확장)가 가로 스크롤바를 만들지 않도록 */
  overflow-y: auto;     /* CMS 콘텐츠형(헤더/푸터 동반) 등록 시 세로 스크롤 허용 */
}

.gallery-v3 {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}


/* ==================== V01. 좌측 패널 ====================
   Figma: 864px / 45% · background img_onlineexhibition.png
   · border-bottom-right-radius: 200px
   ===================================================== */

.gallery-v3 .gallery-left {
  position: relative;
  flex: 0 0 45%;
  height: 100%;
  overflow: hidden;
  border-bottom-right-radius: 20rem;
  background-image: url('../../img/img_onlineexhibition.png');
  background-size: cover;
  background-position: center center;
}

/* V01-A. "ONLINE EXHIBITION" 레이블 + 구분선 (텍스트 너비에만 선이 걸리도록)
   Figma: absolute left 80px top 157px, flex-col gap 12px
   · right 제거 → width: max-content 로 divider가 텍스트 길이에만 맞게 */
.gallery-v3 .gallery-label-group {
  position: absolute;
  left: 9.26%;           /* 80 / 864 */
  top: 14.54vh;          /* 157 / 1080 */
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.gallery-v3 .gallery-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 1.04vw, 2rem);
  color: #fff;
  letter-spacing: 0.125em;   /* 2.5px / 20px */
  white-space: nowrap;
}
.gallery-v3 .gallery-label-divider {
  height: 1px;
  background: #fff;
  width: 100%;               /* 부모가 max-content → 텍스트 너비만큼만 */
}

/* V01-B. 메인 타이포그래피 블록
   Figma: absolute left 80px top 333px width 467px
   · width 제거 → white-space: nowrap 으로 COLLECTION 줄바꿈 방지 */
.gallery-v3 .gallery-typo {
  position: absolute;
  left: 9.26%;
  top: 30.83vh;              /* 333 / 1080 */
  display: flex;
  flex-direction: column;
}

/* PYEONGTAEK CITY / CULTURAL FOUNDATION
   Figma: Montserrat Medium 18px, opacity 40%, letter-spacing 1.5px, line-height 1.6 */
.gallery-v3 .gallery-sub {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 0.94vw, 1.8rem);
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.083em;   /* 1.5px / 18px */
  line-height: 1.6;
  margin: 0 0 0.8rem;
  white-space: nowrap;
}

/* ART — Figma: Playfair Display Regular 200px, tracking -3px */
.gallery-v3 .gallery-art {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(6rem, 10.42vw, 20rem);
  color: #fff;
  letter-spacing: -0.015em;  /* -3px / 200px */
  line-height: 1;
  margin: 0 0 0.4rem;
}

/* COLLECTION — Figma: Playfair Display SemiBold 58px, tracking 10px
   white-space: nowrap 으로 한 줄 강제 */
.gallery-v3 .gallery-collection {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 3.02vw, 5.8rem);
  color: #fff;
  letter-spacing: 0.172em;   /* 10px / 58px */
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

/* V01-C. YEAR — 세로 90도 회전, 우측 배치
   Figma: absolute left 783px top 493px w 34px h 156px */
.gallery-v3 .gallery-year {
  position: absolute;
  left: 90.63%;              /* 783 / 864 */
  top: 45.65vh;              /* 493 / 1080 */
  width: 3.4rem;
  height: 15.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-v3 .gallery-year__text {
  transform: rotate(90deg);
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 1.46vw, 2.8rem);
  color: var(--ds-color-brand-yellow, #fdb812);
  letter-spacing: 0.018em;   /* 0.5px / 28px */
}

/* V01-D. 로고 (opacity 60%)
   Figma: absolute bottom 83px left ~72px h 50px */
.gallery-v3 .gallery-logo {
  position: absolute;
  bottom: 7.69vh;            /* 83 / 1080 */
  left: 8.33%;               /* ~72 / 864 */
  height: 5rem;
  width: auto;
  opacity: 0.6;
}


/* ==================== V02. 우측 패널 ====================
   Figma: 1056px / 55% · white · pl 80px pr 40px py 40px · gap 80px
   ===================================================== */

.gallery-v3 .gallery-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8rem;
  padding: 4rem 4rem 4rem 12rem;
  background: #fff;
  height: 100%;
  overflow-y: auto;
}

/* V02-A. 소개 블록 */
.gallery-v3 .gallery-intro {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}
.gallery-v3 .gallery-intro__title {
  font-size: 6.8rem;         /* Figma 68px — DS 60 초과, 직접 사용 */
  font-weight: 600;
  color: var(--ds-color-gray-95, #131416);
  letter-spacing: -0.19px;
  line-height: 0.847;        /* Figma 57.6px / 68px */
  white-space: nowrap;
  margin: 0;
}
.gallery-v3 .gallery-intro__desc {
  font-size: var(--ds-font-size-17, 1.7rem);
  font-weight: 400;
  color: var(--ds-color-gray-70, #464c53);
  letter-spacing: -0.19px;
  line-height: 1.6;
  margin: 0;
}

/* V02-B. 내비게이션 — border-bottom divider 방식 */
.gallery-v3 .gallery-nav {
  display: flex;
  flex-direction: column;
  max-width: 57.2rem;
}

/* CSS 변수 상속 방식: 부모 hover에서 변수만 바꾸면 자식 icon이 읽음 */
.gallery-v3 .gallery-nav__item {
  --_icon-bg:    rgba(230, 243, 250, 0.9);  /* 기본: primary-5 */
  --_icon-color: #027bc1;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 3.2rem 0;
  border-bottom: 1px solid var(--ds-color-gray-10, #e6e8ea);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.gallery-v3 .gallery-nav__item:last-child {
  border-bottom: none;
}
.gallery-v3 .gallery-nav__item:hover {
  --_icon-bg:    var(--ds-color-brand-blue-aa, #027bc1);  /* hover: brand-blue-aa solid */
  --_icon-color: #fff;
}
.gallery-v3 .gallery-nav__item:hover .gallery-nav__arrow {
  transform: translateX(4px);
  color: #027bc1;
}

/* 아이콘 박스: 변수 읽기만 함 */
.gallery-v3 .gallery-nav__icon {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: var(--ds-radius-medium, 0.8rem);
  background-color: var(--_icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--_icon-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.gallery-v3 .gallery-nav__icon svg {
  width: 2.4rem;
  height: 2.4rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gallery-v3 .gallery-nav__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.gallery-v3 .gallery-nav__text strong {
  display: block;
  font-size: var(--ds-font-size-22, 2.2rem);
  font-weight: 700;
  color: var(--ds-color-gray-95, #131416);
  letter-spacing: -0.19px;
  line-height: 1.04;
}
.gallery-v3 .gallery-nav__text small {
  display: block;
  font-size: var(--ds-font-size-16, 1.6rem);
  color: var(--ds-color-gray-60, #58616a);
  letter-spacing: -0.19px;
  line-height: 1.5;
}

.gallery-v3 .gallery-nav__arrow {
  font-size: 1.8rem;
  color: var(--ds-color-gray-30, #b1b8be);
  flex-shrink: 0;
  transition: transform 0.2s, color 0.2s;
}


/* ==================== 데스크톱(≥1200px) 좌측 패널 풀블리드 ====================
   CMS 콘텐츠형 등록 시 .gallery-v3 가 가운데 정렬 .sub-page-wrap(max 1440) 안에 들어가
   좌측 이미지 패널 왼쪽에 여백이 생긴다. 좌측 패널만 화면 왼쪽 끝까지 확장(우측 패널은 유지).
   - margin-left: 컨테이너 좌측 여백만큼 음수 → 뷰포트 왼쪽 끝까지
   - flex-basis: 그만큼 넓혀 우측 가장자리는 원래 위치 유지(우측 패널 자리 불변)
   - .gallery-v3 overflow:visible: 컨테이너 밖으로 나간 좌측 패널이 잘리지 않도록
   standalone(풀스크린, .sub-page-wrap 없음)에선 50vw=50% 라 calc 결과 0 → 변화 없음. */
@media (min-width: 1200px) {
  .gallery-v3 {
    overflow: visible;
  }
  .gallery-v3 .gallery-left {
    margin-left: calc(50% - 50vw);
    flex-basis: calc(45% + (50vw - 50%));
  }
}

/* ==================== R. 반응형 ====================
   모바일 시안 없음 — 텍스트 위계 단계 축소 + 간격 단계 축소 룰 자동 적용 (스킬 Case D)
   태블릿도 세로 스택 (모바일과 동일 구조, 크기만 단계 위)
   ===================================================== */

/* 공통 세로 스택 (태블릿 768~1199px + 모바일 ≤767px) */
@media (max-width: 1199px) {
  body:has(.gallery-v3) {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .gallery-v3 {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  /* ── 좌측 패널 공통 ── */
  .gallery-v3 .gallery-left {
    flex: none;
    width: 100%;
    border-bottom-right-radius: 8rem;   /* 우측 하단 라디우스 */
    border-bottom-left-radius: 0;
  }

  /* ── 우측 패널 공통 ── */
  .gallery-v3 .gallery-right {
    flex: none;
    height: auto;
    justify-content: flex-start;
  }
}

/* 태블릿 (768~1199px) — 모바일보다 여유 있는 크기 */
@media (min-width: 768px) and (max-width: 1199px) {
  .gallery-v3 .gallery-left {
    height: 58vh;
    min-height: 38rem;
  }

  /* 레이블 */
  .gallery-v3 .gallery-label-group {
    top: 3.6rem;
    left: 3.2rem;
  }
  .gallery-v3 .gallery-label {
    font-size: 1.4rem;
  }

  /* 타이포그래피 */
  .gallery-v3 .gallery-typo {
    top: 12rem;
    left: 3.2rem;
    right: 6rem;
  }
  .gallery-v3 .gallery-sub {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
  }
  .gallery-v3 .gallery-art {
    font-size: clamp(7rem, 14vw, 12rem);
    margin-bottom: 0.6rem;
  }
  .gallery-v3 .gallery-collection {
    font-size: clamp(2.4rem, 4.2vw, 4.8rem);
    letter-spacing: 0.1em;
    white-space: normal;
  }

  /* YEAR */
  .gallery-v3 .gallery-year {
    left: auto;
    right: 2.4rem;
    top: 45%;
    transform: translateY(-50%);
    height: 14rem;
  }
  .gallery-v3 .gallery-year__text {
    font-size: 2.2rem;
  }

  /* 로고 */
  .gallery-v3 .gallery-logo {
    bottom: 2.4rem;
    left: 3.2rem;
    height: 4.4rem;
  }

  /* 우측 */
  .gallery-v3 .gallery-right {
    gap: 4rem;
    padding: 4rem 3.2rem;
  }
  .gallery-v3 .gallery-intro {
    gap: 2rem;
  }
  .gallery-v3 .gallery-intro__title {
    font-size: 4rem;
    line-height: 1.1;
    white-space: normal;
  }
  .gallery-v3 .gallery-intro__desc {
    font-size: var(--ds-font-size-15, 1.5rem);
    line-height: 1.6;
  }
  .gallery-v3 .gallery-nav {
    max-width: 100%;
  }
  .gallery-v3 .gallery-nav__item {
    padding: 2.4rem 0;
    gap: 1.4rem;
  }
  .gallery-v3 .gallery-nav__icon {
    width: 4.8rem;
    height: 4.8rem;
  }
  .gallery-v3 .gallery-nav__text strong {
    font-size: var(--ds-font-size-19, 1.9rem);
  }
  .gallery-v3 .gallery-nav__text small {
    font-size: var(--ds-font-size-15, 1.5rem);
  }
}

/* 모바일 (≤767px) */
@media (max-width: 767px) {
  .gallery-v3 .gallery-left {
    height: 52vh;
    min-height: 30rem;
  }

  /* 레이블 */
  .gallery-v3 .gallery-label-group {
    top: 2.8rem;
    left: 2.4rem;
  }
  .gallery-v3 .gallery-label {
    font-size: 1.1rem;
    letter-spacing: 0.1em;
  }

  /* 타이포그래피 */
  .gallery-v3 .gallery-typo {
    top: 11rem;
    left: 2.4rem;
    right: 4rem;
  }
  .gallery-v3 .gallery-sub {
    font-size: 1rem;
    margin-bottom: 0.6rem;
  }
  .gallery-v3 .gallery-art {
    font-size: clamp(5rem, 19vw, 9rem);
    margin-bottom: 0.4rem;
  }
  .gallery-v3 .gallery-collection {
    font-size: clamp(1.6rem, 5.2vw, 3rem);
    letter-spacing: 0.06em;
    white-space: normal;
  }

  /* YEAR */
  .gallery-v3 .gallery-year {
    left: auto;
    right: 2rem;
    top: 45%;
    transform: translateY(-50%);
    height: 10rem;
  }
  .gallery-v3 .gallery-year__text {
    font-size: 1.6rem;
  }

  /* 로고 */
  .gallery-v3 .gallery-logo {
    bottom: 1.6rem;
    left: 2.4rem;
    height: 3.2rem;
  }

  /* 우측 패널 */
  .gallery-v3 .gallery-right {
    gap: 3.2rem;
    padding: 3.2rem 2rem;
  }
  .gallery-v3 .gallery-intro {
    gap: 1.6rem;
  }
  .gallery-v3 .gallery-intro__title {
    font-size: 3.2rem;
    line-height: 1.1;
    white-space: normal;
  }
  .gallery-v3 .gallery-intro__desc {
    font-size: var(--ds-font-size-14, 1.4rem);
    line-height: 1.6;
  }
  .gallery-v3 .gallery-nav {
    max-width: 100%;
  }
  .gallery-v3 .gallery-nav__item {
    padding: 2rem 0;
    gap: 1.2rem;
  }
  .gallery-v3 .gallery-nav__icon {
    width: 4rem;
    height: 4rem;
  }
  .gallery-v3 .gallery-nav__icon svg {
    width: 2rem;
    height: 2rem;
  }
  .gallery-v3 .gallery-nav__text strong {
    font-size: var(--ds-font-size-16, 1.6rem);
  }
  .gallery-v3 .gallery-nav__text small {
    font-size: var(--ds-font-size-13, 1.3rem);
  }
  .gallery-v3 .gallery-nav__arrow {
    font-size: 1.6rem;
  }
}