/* community-page-v2.css
 * Generated by Phase 4 (safe-merge) for (소통참여_MNU-U-100000, v2)
 * Source CSS (in cascade order): community-page.css, community-page-v2.css, pfmc-page-v2.css, webzine-list-v2.css
 */

/* === source: community-page.css === */
/* ================================================================
   소통·참여 (MNU-U-100000) 페이지 고유 스타일
   ================================================================
   - DS 토큰 변수(--ds-*) 필수 사용
   - DS 컴포넌트(.ds-*)로 대체 가능한 스타일은 작성 금지
   ================================================================ */

/* [버그수정] 모달 hidden 속성 활성화 — DS .ds-modal-backdrop{display:flex}(author)가 브라우저 기본
   [hidden]{display:none}(UA)을 덮어써, hidden 속성이 있어도 모달이 항상 표시되던 문제.
   Q&A 상세 삭제확인 모달(#bbsDeleteModal)이 진입 시 바로 뜨고 취소·X로 안 닫히던 원인.
   author 규칙으로 [hidden] display:none을 명시해 hidden 토글이 정상 동작하게 함
   (login/mypage/artist 페이지 CSS와 동일 패턴). */
.ds-modal-backdrop[hidden] {
  display: none;
}


/* ==================== TAB-NAV 간격 (공통가이드 v1.5.1) ==================== */
.sub-page-wrap > .ds-tab:first-child {
  margin-top: 5rem;                                        /* 50px */
}
.sub-page-wrap > .ds-tab + *,
.sub-page-wrap > .page-header__select + * {
  margin-top: 5rem;                                        /* 50px */
}
@media (max-width: 1199px) {
  .sub-page-wrap > .ds-tab:first-child { margin-top: var(--ds-number-14); }
  .sub-page-wrap > .ds-tab + *,
  .sub-page-wrap > .page-header__select + * { margin-top: var(--ds-number-14); }
}
@media (max-width: 767px) {
  .sub-page-wrap > .ds-tab:first-child { margin-top: var(--ds-number-8); }
  .sub-page-wrap > .ds-tab + *,
  .sub-page-wrap > .page-header__select + * { margin-top: var(--ds-number-8); }
}


/* ==================== 탭형 목록 페이지 간격 (채용·입찰 등 — tabpanel 중첩 구조) ====================
   구조: .sub-page-wrap > .ds-filter-search → [role="tabpanel"] > .ds-board-list__top → .ds-board-list
   LIST-META·CONTENT이 tabpanel 내부라 인접 형제 선택자로 매칭되지 않음. tabpanel 자체에 margin-top을 걸어
   FILTER↔LIST-META 간격을 구현한다.
   `~`(일반 형제) 사용 — `+`로 첫 패널만 매칭되면 두 번째 탭 활성화 시 마진 사라짐. 한 번에 하나만 표시되므로 중복 마진 이슈 없음. */

/* FILTER ↔ LIST-META — PC 50 / 태블릿 28 / 모바일 20 (v1.7.1 §5-1) */
.sub-page-wrap > .ds-filter-search ~ [role="tabpanel"] {
  margin-top: 5rem;                                        /* 50px */
}
@media (max-width: 1199px) {
  .sub-page-wrap > .ds-filter-search ~ [role="tabpanel"] {
    margin-top: var(--ds-number-14);                       /* 28px */
  }
}
@media (max-width: 767px) {
  .sub-page-wrap > .ds-filter-search ~ [role="tabpanel"] {
    margin-top: var(--ds-number-10);                       /* 20px */
  }
}

/* CONTENT ↔ PAGINATION — 100px 전 뷰포트 동일 (v1.7.1 §5-1)
   tabpanel 이 pagination과 형제이므로 `~`(일반 형제)로 매칭 */
.sub-page-wrap > [role="tabpanel"] ~ .ds-pagination {
  margin-top: 10rem;                                       /* 100px */
}


/* ==================== 공지 뱃지: PC 아이콘 원형 / 모바일 텍스트 ==================== */

/* PC: 공지 텍스트 숨기고 아이콘 원형 표시 */
.notice-badge {
  width: var(--ds-number-14);
  height: var(--ds-number-14);
  min-width: var(--ds-number-14);
  padding: 0;
  border-radius: 50%;
  background-color: var(--ds-color-brand-dark);
}
.notice-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-number-8);
  height: var(--ds-number-8);
}
.notice-badge__icon img {
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
}
.notice-badge__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* N 뱃지: 정원형 */
.new-badge {
  width: var(--ds-number-10);
  height: var(--ds-number-10);
  min-width: var(--ds-number-10);
  padding: 0;
  border-radius: 50%;
}

/* ==================== 상세: 공지 태그 상단 라인 ==================== */
.ds-detail-header__tags {
  border-top: 2px solid var(--ds-color-brand-dark);
  padding-top: var(--ds-number-12);
}

/* 공지 분류 태그 — 경영공시 상세(.management-v2)와 동일 렌더: 흰 배경 + pill radius + ds-comp-color outline.
   foundation-page-V1.css의 .management-v2 .ds-detail-header__tags .ds-tag 규칙 복제 (community에는 공지사항 상세만 .management-v2 사용) */
.management-v2 .ds-detail-header__tags .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);
}

/* ==================== 상세: 타이틀 폰트 크기 (PC 34px → 모바일 22px 축소) ==================== */
.ds-detail-header__title {
  font-size: clamp(2.2rem, 2vw + 1.4rem, 3.4rem);
}

/* ==================== 상세: 메타 폰트 크기 (PC만 15px) ==================== */
@media (min-width: 768px) {
  .ds-detail-header__meta {
    font-size: 1.5rem;
  }
}

/* ==================== 상세: 메타 구분선 색상 ==================== */
.ds-detail-header__sep {
  background: var(--ds-color-gray-30);
}

/* ==================== 모바일: 공지 뱃지를 텍스트형으로 복원 ==================== */
/* ==================== Q&A 목록 (MNU-U-100302) — ds-board-list 5컬럼 ==================== */

/* V03: Q&A 5컬럼 그리드 (No, 카테고리+제목, 아이디, 답변상태, 등록일) */
.qa-board-list .ds-board-list__head,
.qa-board-list .ds-board-list__item {
  grid-template-columns: 8rem 1fr 10rem 10rem 12rem;
}

/* 카테고리 태그: 제목 좌측 인라인 */
.qa-board-list .ds-board-list__title .ds-tag {
  vertical-align: middle;
  margin-right: var(--ds-number-5);
}

/* 아이디·답변상태: 중앙 정렬 */
.qa-board-list .ds-board-list__author,
.qa-board-list .ds-board-list__status {
  text-align: center;
  font-size: var(--ds-pc-font-size-body-xsmall);
  color: var(--ds-light-color-text-subtle);
  flex-shrink: 0;
}

/* 답변상태: ds-tag--primary + color-* 유틸리티 조합 사용
   답변대기: ds-tag--primary color-gray-50
   답변완료: ds-tag--primary color-success-50
   기간만료: ds-tag--primary color-danger-40 */

/* 태블릿: 아이디 숨김 → 4컬럼 (No, 제목, 답변상태, 등록일) */
@media (min-width: 768px) and (max-width: 1199px) {
  .qa-board-list .ds-board-list__head,
  .qa-board-list .ds-board-list__item {
    grid-template-columns: 8rem 1fr 10rem 12rem;
  }
  .qa-board-list .ds-board-list__author {
    display: none;
  }
}

/* 모바일: 번호·아이디 숨김, 세로 스택 */
@media (max-width: 767px) {
  .qa-board-list .ds-board-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }
  .qa-board-list .ds-board-list__num,
  .qa-board-list .ds-board-list__author {
    display: none;
  }
  .qa-board-list .ds-board-list__title {
    width: 100%;
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .qa-board-list .ds-board-list__date {
    font-size: var(--ds-mobile-font-size-body-xsmall);
  }
  .qa-board-list .ds-board-list__status {
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  /* 공지 행: __num 숨김 해제 → 뱃지를 제목 위에 표시 */
  .ds-board-list__num:has(.notice-badge) {
    display: flex;
    grid-column: 1;
    grid-row: 1;
  }
  .ds-board-list__num:has(.notice-badge) + .ds-board-list__title {
    grid-row: 2;
  }
  .ds-badge.notice-badge {
    width: auto;
    height: var(--ds-number-10);
    min-width: var(--ds-number-10);
    padding-inline: var(--ds-number-3);
    border-radius: var(--ds-radius-max);
    background-color: var(--ds-color-brand-dark);
    font-size: 1.3rem;
  }
  .notice-badge__icon {
    display: none;
  }
  .notice-badge__text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
  }

  /* 상세 메타: 모바일 12px */
  .ds-detail-header__meta {
    font-size: 1.2rem;
  }

  /* 상세 본문: 모바일 폰트 축소 강제 */
  .ds-detail-body {
    font-size: var(--ds-mobile-font-size-body-small);
  }
  .ds-detail-body p {
    font-size: inherit;
  }

}


/* ==================== Q&A 상세 (MNU-U-100303) ==================== */

/* V03: 관리자 답변 영역 */
.qa-answer {
  margin-top: var(--ds-number-16);
  border-top: 1px solid var(--ds-color-gray-20);
  padding-top: var(--ds-number-16);
}

/* 답변 라벨 (A 아이콘 + "답변") */
.qa-answer__label {
  display: flex;
  align-items: center;
  gap: var(--ds-number-3);
  margin-bottom: var(--ds-number-8);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ds-color-gray-90);
}

.qa-answer__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-number-14);
  height: var(--ds-number-14);
  border-radius: 50%;
  background-color: var(--ds-color-brand);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* 답변 콘텐츠 박스 */
.qa-answer__content {
  background-color: var(--ds-color-gray-5);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-number-12) var(--ds-number-14);
}

/* 답변 메타 (관리자명 + 답변일) */
.qa-answer__meta {
  display: flex;
  align-items: center;
  gap: var(--ds-number-4);
  margin-bottom: var(--ds-number-8);
  font-size: 1.4rem;
  color: var(--ds-color-gray-50);
}

.qa-answer__meta-sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--ds-color-gray-30);
}

/* 답변 본문 */
.qa-answer__body {
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--ds-color-gray-80);
  white-space: pre-wrap;
  word-break: break-word;
}
.qa-answer__body p {
  margin-bottom: var(--ds-number-4);
}
.qa-answer__body p:last-child {
  margin-bottom: 0;
}

/* 답변 대기/기간만료 안내 */
.qa-answer__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background-color: var(--ds-color-gray-5);
  border-radius: var(--ds-radius-md);
  font-size: 1.5rem;
  color: var(--ds-color-gray-50);
}

/* 모바일 대응 */
@media (max-width: 767px) {
  .qa-answer {
    margin-top: var(--ds-number-12);
    padding-top: var(--ds-number-12);
  }
  .qa-answer__label {
    font-size: 1.6rem;
  }
  .qa-answer__icon {
    width: var(--ds-number-12);
    height: var(--ds-number-12);
    font-size: 1.3rem;
  }
  .qa-answer__content {
    padding: var(--ds-number-8) var(--ds-number-10);
  }
  .qa-answer__meta {
    font-size: 1.2rem;
  }
  .qa-answer__body {
    font-size: 1.4rem;
  }
  .qa-answer__empty {
    min-height: 80px;
    font-size: 1.3rem;
  }
}


/* ==================== Q&A 글쓰기 (MNU-U-100304) ==================== */

/* 폼 전체 래퍼 */
.qa-write-form {
  width: 100%;
}

/* 테이블형 행: 라벨(왼쪽) + 입력(오른쪽), 행 사이 구분선 */
.qa-write-row {
  display: flex;
  align-items: flex-start;
  border-bottom: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  padding: var(--ds-number-18) 0;               /* 36px 상하 */
}
/* 조건부 노출 행(첨부파일 등) — hidden 속성이 display:flex를 이기도록 명시 */
.qa-write-row[hidden] {
  display: none;
}
.qa-write-row__label {
  flex-shrink: 0;
  width: 15rem;                                  /* 150px — 라벨 영역 너비 */
  padding-top: var(--ds-number-4);               /* 8px — 입력 필드와 수직 정렬 */
  font-size: var(--ds-pc-font-size-body-medium);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-light-color-text-bolder);
}
.qa-write-row__field {
  flex: 1;
  min-width: 0;
}
/* 짧은 입력 (작성자, 카테고리 등) */
.qa-write-row__input--short {
  max-width: 30rem;                              /* 300px */
}
/* 에디터 행: 라벨 상단 정렬 */
.qa-write-row--editor .qa-write-row__label {
  padding-top: var(--ds-number-6);               /* 에디터 툴바 높이에 맞춤 */
}

/* 에디터: 툴바 + textarea 결합 */
.qa-write-editor {
  border: 1px solid var(--ds-color-gray-20);
  border-radius: var(--ds-radius-small);
  overflow: hidden;
}

.qa-write-editor__toolbar {
  display: flex;
  align-items: center;
  gap: var(--ds-number-1);
  padding: var(--ds-number-3) var(--ds-number-4);
  background-color: var(--ds-color-gray-5);
  border-bottom: 1px solid var(--ds-color-gray-20);
}

.qa-write-editor__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-number-14);
  height: var(--ds-number-14);
  border-radius: var(--ds-radius-small);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ds-color-gray-60);
  cursor: pointer;
  user-select: none;
}

.qa-write-editor__tool:hover {
  background-color: var(--ds-color-gray-10);
  color: var(--ds-color-gray-90);
}

.qa-write-editor__divider {
  width: 1px;
  height: 16px;
  background-color: var(--ds-color-gray-20);
  margin: 0 var(--ds-number-2);
}

.qa-write-editor__area {
  border: none;
  border-radius: 0;
  min-height: 280px;
  resize: vertical;
}

.qa-write-editor__area:focus {
  box-shadow: none;
}

/* 에디터 전체에 포커스 시 외곽선 */
.qa-write-editor:focus-within {
  border-color: var(--ds-color-brand);
  box-shadow: 0 0 0 2px rgba(var(--ds-color-brand-rgb, 0, 82, 204), 0.15);
}

/* 개인정보 동의 섹션 헤더 */
.qa-privacy-header {
  margin-top: var(--ds-number-20);
  border-top: 1px solid var(--ds-color-gray-20);
  padding-top: var(--ds-number-12);
}

/* 개인정보 안내 정보 */
.qa-privacy-info {
  background-color: var(--ds-color-gray-5);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-number-10) var(--ds-number-12);
  margin-bottom: var(--ds-number-8);
}

.qa-privacy-info__list {
  margin: 0;
}

.qa-privacy-info__row {
  display: flex;
  gap: var(--ds-number-4);
  padding: var(--ds-number-3) 0;
  font-size: 1.4rem;
  line-height: 1.6;
}

.qa-privacy-info__row + .qa-privacy-info__row {
  border-top: 1px solid var(--ds-color-gray-15);
}

.qa-privacy-info__row dt {
  flex-shrink: 0;
  width: 80px;
  font-weight: 600;
  color: var(--ds-color-gray-70);
}

.qa-privacy-info__row dd {
  margin: 0;
  color: var(--ds-color-gray-60);
}

/* 동의 체크박스 */
.qa-privacy-agree {
  margin-bottom: var(--ds-number-16);
}

/* 첨부파일 안내 텍스트 (.ds-file-upload 외부) — 카테고리 = 내부신고·위험신고 선택 시 노출 */
.qa-write-files__guide {
  list-style: none;
  margin: var(--ds-number-5, 1rem) 0;
  padding: 0;
  font-size: var(--ds-pc-font-size-body-xsmall);
  color: var(--ds-light-color-text-subtle);
  line-height: var(--ds-typo-line-height-body);
}

/* 하단 버튼 그룹 */
.qa-write-actions {
  display: flex;
  justify-content: center;
  gap: var(--ds-number-4);
  padding-top: var(--ds-number-20);              /* 40px — 폼↔버튼 간격 */
  padding-bottom: var(--ds-number-20);
}
.qa-write-actions .ds-btn {
  min-width: 16rem;                              /* 160px — 버튼 최소 너비 */
}

/* 등록 버튼 비활성 상태 */
.qa-write-actions .ds-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 모바일 대응 */
@media (max-width: 767px) {
  /* 테이블형 → 세로 스택 */
  .qa-write-row {
    flex-direction: column;
    gap: var(--ds-number-3);
    padding: var(--ds-number-7) 0;
  }
  .qa-write-row__label {
    width: 100%;
    padding-top: 0;
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .qa-write-row__field {
    width: 100%;
  }
  .qa-write-row__field .ds-input,
  .qa-write-row__field .ds-select,
  .qa-write-row__field .ds-textarea,
  .qa-write-row__field .qa-write-editor {
    width: 100%;
  }
  .qa-write-row__input--short {
    max-width: 100%;
  }

  .qa-write-editor__area {
    min-height: 200px;
  }

  .qa-write-actions .ds-btn {
    flex: 1;
  }
}


/* ==================== 공유/인쇄 아이콘 (CMN-U-007, 소통·참여 공용) ==================== */

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

/* 공유/인쇄 툴바 (CMN-U-007) */
.cmn-share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-number-2);
  margin-bottom: var(--ds-number-8);
}

.cmn-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-2);
  height: 4rem;
  padding: 0 var(--ds-number-6);
  border: var(--ds-border-width-thin) solid var(--ds-light-color-border-gray-light);
  border-radius: var(--ds-radius-small);
  background: var(--ds-color-gray-0);
  color: var(--ds-light-color-text-subtle);
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.cmn-share__btn:hover {
  background: var(--ds-color-gray-5);
  color: var(--ds-light-color-text-basic);
}

/* 공유 popover */
.cmn-share__popover {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--ds-number-2);
  padding: var(--ds-number-3);
  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-small);
  box-shadow: var(--ds-shadow-m);
  gap: var(--ds-number-2);
  z-index: 10;
}

.cmn-share__popover.is-open {
  display: flex;
}

.cmn-share__popover-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-number-16);
  height: var(--ds-number-16);
  border: none;
  border-radius: 50%;
  background: var(--ds-color-gray-5);
  color: var(--ds-light-color-text-basic);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.cmn-share__popover-btn:hover {
  background: var(--ds-light-color-surface-gray-subtle);
}

@media (max-width: 767px) {
  .cmn-share__btn {
    height: 3.6rem;
    padding: 0 var(--ds-number-4);
  }
  .cmn-share__btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}


/* ==================== 웹진 상세 (MNU-U-100502) ==================== */

/* V01: 웹진 헤더 — 매거진 스타일 (제목 + 요약 + 발행일) */
/* 웹진 상세: 타이틀 하단 요약 설명 */
.ds-detail-header__desc {
  margin: 0;
  font-size: var(--ds-pc-font-size-body-medium);
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: var(--ds-typo-line-height-body);
  color: var(--ds-light-color-text-subtle);
}

@media (max-width: 767px) {
  .ds-detail-header__desc {
    font-size: var(--ds-mobile-font-size-body-medium);
  }
}

.webzine-header {
  gap: var(--ds-number-10);
  padding-bottom: var(--ds-number-16);
  margin-bottom: var(--ds-number-16);
  border-bottom: 1px solid var(--ds-color-gray-20);
}

.webzine-header .ds-detail-header__title {
  font-size: 3.6rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.webzine-header__standfirst {
  margin: 0;
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.7;
  color: var(--ds-color-gray-50);
  word-break: keep-all;
}

.webzine-header .ds-detail-header__meta {
  font-size: var(--ds-font-size-14);
  color: var(--ds-color-gray-40);
}

@media (max-width: 767px) {
  .webzine-header .ds-detail-header__title {
    font-size: 2.6rem;
  }
  .webzine-header__standfirst {
    font-size: var(--ds-font-size-16);
  }
}

/* V03: PDF 다운로드 영역 */
.webzine-pdf {
  margin-top: var(--ds-number-16);
  padding: var(--ds-number-10) var(--ds-number-12);
  background-color: var(--ds-color-gray-5);
  border-radius: var(--ds-radius-md);
  display: flex;
  align-items: center;
  gap: var(--ds-number-6);
}

.webzine-pdf__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-number-20);
  height: var(--ds-number-20);
  border-radius: var(--ds-radius-small);
  background-color: #dc2626;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.webzine-pdf__info {
  flex: 1;
  min-width: 0;
}

.webzine-pdf__name {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ds-color-gray-80);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webzine-pdf__size {
  display: block;
  font-size: 1.3rem;
  color: var(--ds-color-gray-50);
  margin-top: var(--ds-number-1);
}

.webzine-pdf__download {
  flex-shrink: 0;
}

/* 모바일 대응 */
@media (max-width: 767px) {
  .webzine-pdf {
    flex-wrap: wrap;
    gap: var(--ds-number-4);
    padding: var(--ds-number-8) var(--ds-number-8);
  }
  .webzine-pdf__icon {
    width: var(--ds-number-16);
    height: var(--ds-number-16);
    font-size: 1.1rem;
  }
  .webzine-pdf__name {
    font-size: 1.4rem;
  }
  .webzine-pdf__download {
    width: 100%;
  }
  .webzine-pdf__download .ds-btn {
    width: 100%;
    justify-content: center;
  }
}


/* ==================== 공지사항 목록 v2 (MNU-U-100101) ==================== */

/* 3컬럼 그리드: 번호(8rem) + 제목(1fr) + 등록일(12rem), 조회수 없음 */
.notice-list .ds-board-list__head,
.notice-list .ds-board-list__item {
  grid-template-columns: 8rem 1fr 12rem;
}

/* 첨부 아이콘 / 공지 뱃지 / 고정 게시글 스타일은 모두 layout.css(DS)에서 관리.
   DS 표준 마크업: .ds-board-list__attach (paperclip mask), .notice-pin (브랜드 블루 뱃지),
   .ds-board-list__item--pinned (고정 행 변형) */


/* ==================== 습득물 안내 (MNU-U-100305) ==================== */

/* 섹션 간격 */
.lostfound-section {
  margin-bottom: var(--ds-number-20);
}
.lostfound-section:last-child {
  margin-bottom: 0;
}
.lostfound-section .ds-section-header__title {
  margin-bottom: 1.5rem;
}

/* ── V01. 처리절차 4단계 스텝 ── */
/* ds-stepper--numbered의 기본 고정 너비(11rem)는 회원가입 flow 라벨 길이에 맞춰 설계됨.
   본 페이지는 최장 라벨("본인 확인 후 인계") 기준으로 모든 pill 동일 폭 통일하여
   좌/우 여백 일관 + 아래 '보관 기간 안내' 박스와의 간격 확보. */
.lostfound-section .ds-stepper--numbered {
  --ds-stepper-item-width: 24rem;           /* 240px — 최장 라벨("본인 확인 후 인계") 여유 수용 통일 폭
                                               (11rem 기본값은 dot 32+gap 8+padding 32+border 2=74px 제하면
                                               텍스트 영역 36px 뿐이라 19px bold 한글 라벨이 전부 overflow) */
  margin-block: 5rem;                       /* 50px — 스테퍼 영역 상/하 여백 (상: 섹션 타이틀과 / 하: info-box와) */
}

.lostfound-steps {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-number-4);
  margin-top: var(--ds-number-10);
  margin-bottom: var(--ds-number-14);
}

.lostfound-steps__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--ds-number-10) var(--ds-number-4);
  background-color: var(--ds-color-gray-5);
  border-radius: var(--ds-radius-large);
  min-height: 180px;
}

.lostfound-steps__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-number-20);
  height: var(--ds-number-20);
  border-radius: 50%;
  background-color: var(--ds-color-primary-50);
  color: #fff;
  font-size: var(--ds-font-size-17);
  font-weight: var(--ds-typo-font-weight-bold);
  margin-bottom: var(--ds-number-6);
  flex-shrink: 0;
}

.lostfound-steps__title {
  display: block;
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-semibold);
  color: var(--ds-color-gray-90);
  margin-bottom: var(--ds-number-3);
}

.lostfound-steps__desc {
  font-size: var(--ds-font-size-14);
  line-height: var(--ds-typo-line-height-body);
  color: var(--ds-color-gray-60);
  margin: 0;
  word-break: keep-all;
}

.lostfound-steps__arrow {
  display: flex;
  align-items: center;
  padding-top: var(--ds-number-15);
  color: var(--ds-color-gray-30);
  flex-shrink: 0;
}

/* ── V01. 보관 기간 안내 박스 ── */
.lostfound-info-box {
  display: flex;
  gap: var(--ds-number-6);
  padding: var(--ds-number-10) var(--ds-number-12);
  background-color: var(--ds-color-information-5);
  border: 1px solid var(--ds-color-information-10);
  border-radius: var(--ds-radius-medium);
  margin-bottom: var(--ds-number-10);
}

.lostfound-info-box__icon {
  flex-shrink: 0;
  color: var(--ds-color-information-50);
  padding-top: var(--ds-number-1);
}

.lostfound-info-box__title {
  display: block;
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-semibold);
  color: var(--ds-color-gray-90);
  margin-bottom: var(--ds-number-4);
}

.lostfound-info-box__list {
  margin: 0;
  padding-left: var(--ds-number-8);
  font-size: var(--ds-font-size-15);
  line-height: var(--ds-typo-line-height-body);
  color: var(--ds-color-gray-70);
}

.lostfound-info-box__list li {
  margin-bottom: var(--ds-number-2);
}
.lostfound-info-box__list li:last-child {
  margin-bottom: 0;
}

/* ── V01. 유의사항 ── */
.lostfound-notice {
  padding: var(--ds-number-8) var(--ds-number-10);
  background-color: var(--ds-color-gray-5);
  border-radius: var(--ds-radius-medium);
}

.lostfound-notice__title {
  display: block;
  font-size: var(--ds-font-size-15);
  font-weight: var(--ds-typo-font-weight-semibold);
  color: var(--ds-color-gray-80);
  margin-bottom: var(--ds-number-4);
}

.lostfound-notice__list {
  margin: 0;
  padding-left: var(--ds-number-8);
  font-size: var(--ds-font-size-14);
  line-height: var(--ds-typo-line-height-body);
  color: var(--ds-color-gray-60);
}

.lostfound-notice__list li {
  margin-bottom: var(--ds-number-2);
}
.lostfound-notice__list li:last-child {
  margin-bottom: 0;
}

/* ── V02. 시설별 문의처 테이블 ── */
.lostfound-table__col--name { width: 180px; }
.lostfound-table__col--dept { width: 120px; }
.lostfound-table__col--tel { width: 140px; }
.lostfound-table__col--place { width: auto; }

.lostfound-table__tel {
  color: var(--ds-color-primary-50);
  text-decoration: none;
}
.lostfound-table__tel:hover {
  text-decoration: underline;
}

.lostfound-table__note {
  margin-top: var(--ds-number-4);
  font-size: var(--ds-font-size-13);
  color: var(--ds-color-gray-50);
}

/* ── V03. 경찰청 유실물 콜아웃 박스 ── */
.lostfound-callout {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-10);
  padding: var(--ds-number-14) var(--ds-number-16);
  background-color: var(--ds-color-primary-5);
  border: 1px solid var(--ds-color-primary-10);
  border-radius: var(--ds-radius-large);
  margin-top: var(--ds-number-6);
}

.lostfound-callout__body {
  display: flex;
  gap: var(--ds-number-6);
  align-items: flex-start;
}

.lostfound-callout__icon {
  flex-shrink: 0;
  color: var(--ds-color-primary-50);
}

.lostfound-callout__text {
  font-size: var(--ds-font-size-16);
  line-height: var(--ds-typo-line-height-body);
  color: var(--ds-color-gray-80);
}

.lostfound-callout__text p {
  margin: 0 0 var(--ds-number-2);
}
.lostfound-callout__text p:last-child {
  margin-bottom: 0;
}

.lostfound-callout__action {
  display: flex;
  justify-content: center;
}

/* ── 반응형: 모바일 ── */
@media (max-width: 767px) {
  /* 스텝: 세로 스택 */
  .lostfound-steps {
    flex-direction: column;
    gap: 0;
  }

  .lostfound-steps__item {
    flex-direction: row;
    align-items: center;
    text-align: left;
    min-height: auto;
    padding: var(--ds-number-6) var(--ds-number-8);
    gap: var(--ds-number-6);
    border-radius: var(--ds-radius-medium);
  }

  .lostfound-steps__number {
    width: var(--ds-number-16);
    height: var(--ds-number-16);
    font-size: var(--ds-font-size-15);
    margin-bottom: 0;
  }

  .lostfound-steps__arrow {
    padding-top: 0;
    justify-content: center;
    transform: rotate(90deg);
    padding: var(--ds-number-1) 0;
  }

  /* 테이블: 카드 형태 전환 */
  .lostfound-table thead {
    display: none;
  }
  .lostfound-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-number-2) var(--ds-number-4);
    padding: var(--ds-number-6) 0;
    border-bottom: 1px solid var(--ds-color-gray-10);
  }
  .lostfound-table tbody td {
    padding: 0;
    border: none;
    text-align: left;
    font-size: var(--ds-font-size-14);
  }
  /* 시설명: 전체 너비, 굵은 글씨 */
  .lostfound-table tbody td:nth-child(1) {
    grid-column: 1 / -1;
    font-size: var(--ds-font-size-15);
    padding-bottom: var(--ds-number-1);
  }
  /* 담당부서 숨김 (안내데스크 동일) */
  .lostfound-table tbody td:nth-child(2) {
    display: none;
  }
  /* 연락처 */
  .lostfound-table tbody td:nth-child(3) {
    color: var(--ds-color-primary-50);
  }
  /* 보관장소 */
  .lostfound-table tbody td:nth-child(4) {
    color: var(--ds-color-gray-50);
    text-align: right;
  }

  /* 보관 안내 박스 */
  .lostfound-info-box {
    flex-direction: column;
    gap: var(--ds-number-4);
    padding: var(--ds-number-8);
  }

  /* 콜아웃 박스 */
  .lostfound-callout {
    padding: var(--ds-number-10) var(--ds-number-8);
  }
  .lostfound-callout__body {
    flex-direction: column;
    gap: var(--ds-number-4);
  }
  .lostfound-callout__text {
    font-size: var(--ds-font-size-15);
  }
  .lostfound-callout__action .ds-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════
   웹진 no-image 플레이스홀더 — 배경색 + 중앙 로고
   ════════════════════════════════════════════ */
.webzine-card .ds-card__thumb {
  background-color: #eef2f7;
}
.webzine-card .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: 32%;
  max-height: 22%;
  object-fit: contain;
}


/* ════════════════════════════════════════════════════════════════
   PAGE: 100400 후원&메세나 — wrapper .donation-v1-2 (Figma TO-BE 적용)
   ════════════════════════════════════════════════════════════════
   적용 파일: MNU-U-100401_후원메세나목록_design_V1.2_PUB.html
   Figma:    14478-15324 (탭1) / 14478-18979 (탭2) / 14533-15455 (탭3)
   히스토리: 본 영역은 스킬 v1.6 Case F 정리 결과.
            기존 .dn-* 룰(스토리보드 SB용)은 사용처 0건 검증 후 삭제,
            Figma 시안 기반으로 .donation-v1-2 wrapper에서 새로 작성.
   토큰 원칙: padding/margin/gap/font-size/color/radius/border 모두 DS 토큰.
            dimension(width/height)·정확 px는 매핑 주석 + 직접 값.
   ════════════════════════════════════════════════════════════════ */


/* ───────── 풀폭 격리: sub-page-wrap 안 vs 후원하단(밖) 모두 wrapper 부착 ───────── */
.donation-v1-2 {
  /* 후원하단(.donation-final)이 sub-page-wrap 밖에서도 같은 스타일 격리 유지 */
}
/* 100vw HERO/데코/후원하단이 scrollbar 폭만큼 viewport 넘침 방지 — body 레벨로 가로 스크롤만 차단
   (sub-page-wrap/main에 적용하면 hero의 viewport 풀폭 효과까지 막힘) */
body:has(.donation-v1-2) { overflow-x: hidden; }

/* 상/하 영역 여백 (서브페이지 공통가이드 v1.7.1 §5-3)
   - 상단: layout.css의 `.sub-page-wrap { margin-top: 10rem }` 기본값이 page-header → 본문 사이에 자동 적용 (PC 100 / 태블릿 80 / 모바일 60)
   - 하단: .donation-v1-2.donation-final 자체 margin-bottom (아래 C. FINAL 섹션) */


/* ════════════════════════════════════════════════════════════════
   A. HERO — WAT 브랜드 소개 (모든 탭 공통)
   ════════════════════════════════════════════════════════════════ */
.donation-v1-2 .donation-hero {
  position: relative;
  /* sub-page-wrap 폭 안에 갇히지 않도록 viewport 풀폭 — 데코가 화면 가장자리까지 닿음 */
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--ds-number-15) 0 var(--ds-number-12);   /* 30 / 24 */
  text-align: center;
  /* 데코 자르지 않음 — 데코 자체 사이즈를 줄여서 침범 방지 */
  overflow: visible;
}
.donation-v1-2 .donation-hero__inner {
  position: relative;
  max-width: 100rem;                                    /* 1000px — 리드 문장 한 줄 보장 */
  margin: 0 auto;
  z-index: 1;
}

/* 좌·우 그라데이션 데코 — Figma 1920px 폭 기준 좌 -360 / 우 1320 (페이지 밖에서 살짝 들어옴)
   SVG가 preserveAspectRatio="none"이라 CSS에서 viewBox 비율 그대로 명시 (잘림/깨짐 방지).
   - left:  285×869 (viewBox)
   - right: 297×737 (viewBox) */
.donation-v1-2 .donation-hero__deco {
  position: absolute;
  top: 50%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
/* 사용자 재저장 PNG natural size 그대로 (확대 없음, 화소 깨짐 0) */
.donation-v1-2 .donation-hero__deco--left {
  left: 0;
  width: auto;
  height: auto;
  transform: translate(0, -20%);                        /* 좌측: hero 가운데보다 더 아래로 */
}
.donation-v1-2 .donation-hero__deco--right {
  right: 0;
  width: auto;
  height: auto;
  transform: translate(0, -50%);
}

/* 헤드라인: "평택형 메세나 브랜드 WAT를 소개합니다" */
.donation-v1-2 .donation-hero__headline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ds-number-3);                              /* 6 */
  margin: 0 0 var(--ds-number-20);                      /* 40 */
  font-size: 4.8rem;                                    /* 48px Figma 정확값 (DS 토큰 44/60 사이) */
  font-weight: var(--ds-typo-font-weight-extralight);
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--ds-color-primary-90);
}
.donation-v1-2 .donation-hero__lead {
  font-weight: var(--ds-typo-font-weight-extralight);
  color: var(--ds-color-primary-90);
}
.donation-v1-2 .donation-hero__brand {
  font-weight: var(--ds-typo-font-weight-extrabold);
  color: var(--ds-color-primary-90);
  letter-spacing: -0.04em;
}

/* WAT 묶음 — Figma export PNG (시안 픽셀 정확). 텍스처 라인+알약 3개+그림자 모두 한 이미지 */
.donation-v1-2 .donation-hero__wat-block {
  display: block;
  width: 65.1rem;                                       /* 651px Figma 원본 폭 */
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--ds-number-12);                   /* 24 */
  pointer-events: none;
}

.donation-v1-2 .donation-hero__slogan {
  margin: 0 0 var(--ds-number-6);                       /* 12 */
  font-size: var(--ds-font-size-28);                    /* 28 ✓ */
  font-weight: var(--ds-typo-font-weight-semibold);
  letter-spacing: -0.014em;
  color: var(--ds-color-primary-90);
}
.donation-v1-2 .donation-hero__lede {
  margin: 0;
  font-size: var(--ds-font-size-19);                    /* 19 ✓ */
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.5;
  letter-spacing: -0.0045em;
  color: var(--ds-color-gray-60);
  white-space: nowrap;                                  /* PC: 시안처럼 한 줄 강제 (모바일은 미디어쿼리에서 normal) */
}
.donation-v1-2 .donation-hero__lede strong {
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-60);
}


/* ════════════════════════════════════════════════════════════════
   B. TABS — pill 탭 (DS .ds-tab--pill, 풀폭 균등 분할 적용)
   ════════════════════════════════════════════════════════════════ */
.donation-v1-2 .donation-tabs {
  width: 100%;
  max-width: 120rem;                                    /* 1200 — sub-page-wrap 안 center */
  /* HERO lede ↔ 탭 갭: PC 100 / 태블릿 60 / 모바일 32 */
  margin: 10rem auto var(--ds-number-30);
}
/* select 전환 wrapper — DS 검증 패턴 (page-header.css에서 모바일에서 자동 표시) */
/* DS pill의 ds-tab__list 기본 inline-flex → 풀폭 flex로 override, 3 탭 균등 분할
   ensemble-page-V2.css 검증 패턴: 슬라이딩 인디케이터(::before) 끄고 active button 직접 캡슐화.
   이렇게 해야 텍스트가 각 탭 영역 안에서 정확히 가운데 정렬됨. */
.donation-v1-2 .donation-tabs .ds-tab__list {
  display: flex !important;
  width: 100% !important;
}
.donation-v1-2 .donation-tabs .ds-tab__btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-block: 0 !important;                          /* 세로 가운데 정렬 강제 (DS·시안의 24/12 padding 무시) */
}
/* 슬라이딩 인디케이터 해제 (active button 자체에 배경 적용) */
.donation-v1-2 .donation-tabs .ds-tab--pill .ds-tab__list::before,
.donation-v1-2 .donation-tabs.ds-tab--pill .ds-tab__list::before {
  display: none !important;
  content: none !important;
}
/* active 탭 캡슐화 — DS gray-80 다크 배경 + 흰색 텍스트 (시안 매칭) */
.donation-v1-2 .donation-tabs .ds-tab__btn[aria-selected="true"],
.donation-v1-2 .donation-tabs .ds-tab__btn.is-active {
  background-color: var(--ds-color-gray-80) !important;
  color: var(--ds-color-gray-0) !important;
  border-radius: var(--ds-radius-max) !important;
}


/* ════════════════════════════════════════════════════════════════
   PANELS 공통
   ════════════════════════════════════════════════════════════════ */
.donation-v1-2 .donation-panel {
  width: 100%;
  max-width: 120rem;                                    /* 1200 — sub-page-wrap(1440) 안 center */
  margin: 0 auto;
}
.donation-v1-2 .donation-panel[hidden] { display: none; }


/* ════════════════════════════════════════════════════════════════
   V01 PANEL — 후원이 만드는 변화
   ════════════════════════════════════════════════════════════════ */

/* 섹션 타이틀 (공통) */
.donation-v1-2 .donation-section-title {
  margin: 0 0 var(--ds-number-20);                      /* 40 */
  font-size: var(--ds-font-size-36);                    /* 36 ✓ */
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.1;
  letter-spacing: -0.011em;
  text-align: center;
  color: var(--ds-color-primary-90);
}
.donation-v1-2 .donation-em {
  font-weight: var(--ds-typo-font-weight-bold);
  font-style: normal;                                   /* em → strong로 변경했지만 안전상 명시 */
}
.donation-v1-2 .donation-em--red { color: var(--ds-color-brand-red-aa); }

/* 1-1. Why 카드 — 원형 340×340, 좌우 -20 overlap */
.donation-v1-2 .donation-why-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0 0 var(--ds-number-40);                      /* 80 */
  padding: 0;
  list-style: none;
}
.donation-v1-2 .donation-why-card {
  flex-shrink: 0;
  width: 34rem;                                         /* 340px Figma */
  height: 34rem;
  margin-right: calc(var(--ds-number-10) * -1);         /* -20 overlap — 카드끼리 라인 겹침 노출 */
  padding: var(--ds-number-10);                         /* 20 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-6);                              /* 12 */
  background: transparent;                              /* fill 0 — 시안: 라인만, 겹친 부분 보이게 */
  border-radius: 50%;
  text-align: center;
}
.donation-v1-2 .donation-why-card:last-child { margin-right: 0; }
.donation-v1-2 .donation-why-card--blue  { border: var(--ds-border-width-thin) solid color-mix(in srgb, var(--ds-color-brand-blue-aa) 50%, transparent); }
.donation-v1-2 .donation-why-card--red   { border: var(--ds-border-width-thin) solid color-mix(in srgb, var(--ds-color-brand-red-aa) 50%, transparent); }
.donation-v1-2 .donation-why-card--green { border: var(--ds-border-width-thin) solid color-mix(in srgb, var(--ds-color-brand-green-aa) 50%, transparent); }

.donation-v1-2 .donation-why-card__num {
  font-size: var(--ds-font-size-28);                    /* 28 ✓ */
  font-weight: var(--ds-typo-font-weight-extralight);
  letter-spacing: -0.02em;
  line-height: 1;
}
.donation-v1-2 .donation-why-card--blue  .donation-why-card__num { color: var(--ds-color-brand-blue-aa); }
.donation-v1-2 .donation-why-card--red   .donation-why-card__num { color: var(--ds-color-brand-red-aa); }
.donation-v1-2 .donation-why-card--green .donation-why-card__num { color: var(--ds-color-brand-green-aa); }

.donation-v1-2 .donation-why-card__title {
  margin: 0;
  font-size: var(--ds-font-size-24);                    /* Figma 26 → DS 24 (가까움) */
  font-weight: var(--ds-typo-font-weight-semibold);
  letter-spacing: -0.021em;
  color: var(--ds-color-gray-100);
}
.donation-v1-2 .donation-why-card__desc {
  margin: 0;
  font-size: var(--ds-font-size-17);                    /* 17 ✓ */
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.4;
  letter-spacing: -0.0044em;
  color: var(--ds-color-gray-70);
}

/* 1-2. 후원금 사용처 — 상단 미니 배너
   평택 프로젝트 표준 섹션 배경 그라데이션 (education/artist/ensemble 동일).
   viewport 가장자리에 정확히 풀폭 (margin-left/right calc 패턴 — sub-page-wrap padding 영향 없음) */
.donation-v1-2 .donation-impact-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: var(--ds-number-20);
  margin-bottom: var(--ds-number-15);
  height: 11.2rem;                                      /* 112px Figma */
  background: linear-gradient(180deg, var(--ds-color-gray-5) 0%, var(--ds-color-gray-0) 100%);
  overflow: hidden;
}
.donation-v1-2 .donation-impact-banner img {
  display: none;                                        /* PNG 사용 안 함 — CSS gradient만 */
}

/* A 옵션 단순화: scroll-pinning 제거 — 우측 사진만 sticky, 좌측 자연 스크롤 */
.donation-v1-2 .donation-impact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-number-20);                             /* 40 */
  width: 100%;
}
.donation-v1-2 .donation-impact__col {
  flex: 1 1 0;
  min-width: 0;
  /* max-width 제거 — panel 1200 안에서 사진(440) + gap(40) 빼고 나머지 차지 */
  display: flex;
  flex-direction: column;
  justify-content: center;                              /* 콘텐츠 세로 중앙 정렬 */
  gap: var(--ds-number-10);                             /* 20 */
  min-height: 44rem;                                    /* 사진과 동일 — 항목 활성화 시 컨테이너 높이 변동 방지(이미지 움직임 제거) */
}
.donation-v1-2 .donation-impact__title {
  margin: 0;
  font-size: var(--ds-font-size-36);                    /* 36 ✓ */
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.2;
  letter-spacing: -0.011em;
  color: var(--ds-color-primary-90);
}
.donation-v1-2 .donation-impact__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--ds-border-width-thin) solid var(--ds-color-gray-90);
}
/* 디자인은 시안 그대로(컴팩트 list, 모든 항목 동일 스타일).
   애니메이션은 우측 sticky 이미지 swap + 활성 항목 타이틀 굵기만 미세 변경(시안 1번째 항목 bold 의도 유지). */
.donation-v1-2 .donation-impact__item {
  padding: var(--ds-number-10) 0;                       /* 20 — 시안 디자인 그대로 */
  border-bottom: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-6);                              /* 12 */
}
.donation-v1-2 .donation-impact__item-title {
  margin: 0;
  font-size: var(--ds-font-size-24);                    /* 24 ✓ */
  font-weight: var(--ds-typo-font-weight-regular);
  letter-spacing: -0.023em;
  color: var(--ds-color-gray-90);
  transition: font-weight 0.2s ease, color 0.2s ease;
}
.donation-v1-2 .donation-impact__item.is-active .donation-impact__item-title {
  font-weight: var(--ds-typo-font-weight-bold);         /* 활성 항목 → bold (시안 동일) */
}
/* desc는 활성 항목에만 표시 (시안 원래 디자인 — 활성 1개만 desc, 나머지는 타이틀만) */
.donation-v1-2 .donation-impact__item-desc {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  font-size: var(--ds-font-size-17);                    /* 17 ✓ */
  line-height: 1.4;
  letter-spacing: -0.0044em;
  color: var(--ds-color-gray-60);
  transition: max-height 0.35s ease;
}
.donation-v1-2 .donation-impact__item.is-active .donation-impact__item-desc {
  max-height: 12rem;                                    /* 활성만 펼침 */
}

/* 우측 원형 사진 — col 영역 세로 중앙에 고정 (sticky 제거, 부모 align-items: center로 자동 센터링) */
.donation-v1-2 .donation-impact__photo {
  flex-shrink: 0;
  width: 44rem;                                         /* 440px Figma */
  height: 44rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ds-color-gray-40);
}
.donation-v1-2 .donation-impact__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.35s ease;                       /* scroll-spy 이미지 swap fade */
}
.donation-v1-2 .donation-impact__photo img.is-fading { opacity: 0; }


/* ════════════════════════════════════════════════════════════════
   V02 PANEL — 후원 종류 & 혜택
   ════════════════════════════════════════════════════════════════ */

/* 2-1. 멤버십 카드 6개 (3×2) */
.donation-v1-2 .donation-mem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-number-10);                             /* 20 */
  margin-bottom: var(--ds-number-10);                   /* 20 */
}
.donation-v1-2 .donation-mem-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 48rem;                                    /* 480px Figma (상단 줄) */
  padding: var(--ds-number-16) var(--ds-number-16) var(--ds-number-16);  /* 32 — Figma 33 → DS 32 (가까움) */
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-xlarge);               /* 16 — Figma 20 → DS 16 (가까움) */
}
.donation-v1-2 .donation-mem-grid > .donation-mem-card:nth-child(n+4) {
  min-height: 42rem;                                    /* 420px Figma (하단 줄) */
}

/* 추천 카드 (멤버십 유료) */
.donation-v1-2 .donation-mem-card--featured {
  border-width: var(--ds-border-width-medium);          /* 2 */
  border-color: var(--ds-color-brand-blue-aa);
  box-shadow: 0 var(--ds-number-2) var(--ds-number-3) color-mix(in srgb, var(--ds-color-brand-blue-aa) 20%, transparent);
}
.donation-v1-2 .donation-mem-card__badge {
  position: absolute;
  top: calc(var(--ds-number-9) * -1);                   /* -17 */
  right: var(--ds-number-16);                           /* 32 — 카드 padding-right과 동일 (신청하기 버튼 우측 정렬) */
  padding: var(--ds-number-2) var(--ds-number-9);       /* 4 / 18 — 위아래 컴팩트 */
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-medium) solid var(--ds-color-brand-blue-aa);
  border-radius: var(--ds-radius-max);
  font-size: var(--ds-font-size-15);                    /* 17 → 15 (라벨이라 더 작게) */
  font-weight: var(--ds-typo-font-weight-extrabold);
  color: var(--ds-color-brand-blue-aa);
  letter-spacing: -0.0075em;
}

/* 카드 헤더 — height 고정 + box-sizing border-box로 모든 카드의 라인 위치 정확 통일 */
.donation-v1-2 .donation-mem-card__head {
  height: 17rem !important;                             /* 170px 고정 — 가장 긴 컨텐츠(amount-sub block) 안전 수용 */
  box-sizing: border-box;
  flex-shrink: 0;
  padding-bottom: var(--ds-number-13);                  /* 26 — 라인 위쪽 패딩 */
  margin-bottom: var(--ds-number-10);                   /* 20 — 라인 ↔ list */
  border-bottom: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-6);                              /* 12 — name·amount·catch 사이 */
}
.donation-v1-2 .donation-mem-card__name {
  margin: 0;
  font-size: var(--ds-font-size-24);                    /* 24 ✓ */
  font-weight: var(--ds-typo-font-weight-bold);
  letter-spacing: -0.023em;
  color: var(--ds-color-gray-90);
}
.donation-v1-2 .donation-mem-card__name-sub {
  font-weight: var(--ds-typo-font-weight-regular);
  margin-left: var(--ds-number-1);
}
.donation-v1-2 .donation-mem-card__amount {
  margin: 0;
  font-size: var(--ds-font-size-17);                    /* 17 ✓ */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-dark);
  letter-spacing: -0.0176em;
}
.donation-v1-2 .donation-mem-card__amount > strong {
  font-weight: var(--ds-typo-font-weight-bold);
}
.donation-v1-2 .donation-mem-card__amount-sub {
  display: block;                                       /* 줄바꿈 */
  margin-left: 0;
  margin-top: var(--ds-number-1);                       /* 2 — 약간 위 여백 */
  font-weight: var(--ds-typo-font-weight-regular);
  font-size: var(--ds-font-size-15);                    /* 15 ✓ */
}
.donation-v1-2 .donation-mem-card__sep {
  font-weight: var(--ds-typo-font-weight-light);
  font-size: var(--ds-font-size-15);
  color: var(--ds-color-brand-dark);
  margin: 0 var(--ds-number-1);
}
.donation-v1-2 .donation-mem-card__catch {
  margin: 0;
  font-size: var(--ds-font-size-16);                    /* 16 ✓ */
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.4;
  letter-spacing: -0.0044em;
  color: var(--ds-color-gray-60);
}

/* 카드 혜택 리스트 */
.donation-v1-2 .donation-mem-card__list {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.donation-v1-2 .donation-mem-card__list > li {
  position: relative;
  padding: var(--ds-number-3) 0 var(--ds-number-3) var(--ds-number-10);  /* 6 / 20 */
  font-size: var(--ds-font-size-15);                    /* 15 ✓ */
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.3;
  letter-spacing: -0.0087em;
  color: var(--ds-color-gray-90);
}
.donation-v1-2 .donation-mem-card__list > li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: var(--ds-number-4);                              /* 8 — 정렬 미세 */
  width: var(--ds-number-7);                            /* 14 */
  height: var(--ds-number-7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-brand-dark);
  border-radius: var(--ds-radius-medium);               /* 8 — Figma 7 → DS 8 */
  font-size: 0.9rem;                                    /* 9px Figma */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-0);
  letter-spacing: -0.0087em;
  line-height: 1;
}
.donation-v1-2 .donation-mem-card__list--featured > li::before {
  background: var(--ds-color-brand-blue-aa);
}
.donation-v1-2 .donation-mem-card__sub {
  font-size: inherit;                                   /* list li와 동일 크기 (PC 15 / 모바일 13) */
  color: var(--ds-color-gray-90);
}
.donation-v1-2 .donation-mem-card__note {
  margin: var(--ds-number-1) 0 0;                       /* 2 */
  font-size: var(--ds-font-size-13);                    /* 13 ✓ */
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-50);
  letter-spacing: -0.005em;
}

/* 신청하기 버튼 — 페이지 전용 (시안 정확: line=흰 배경+파랑 outline / filled=파랑+흰 텍스트)
   모든 카드 동일 높이(36px) — featured 버튼 기준 */
.donation-v1-2 .donation-mem-card__cta {
  margin-top: var(--ds-number-10);                      /* 20 */
  width: 100%;
  height: var(--ds-number-18);                          /* 36 — featured 기준 통일 */
  padding: 0 var(--ds-number-12);                       /* 0 / 24 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-3);                              /* 6 */
  border-radius: var(--ds-radius-small);                /* 6 */
  font-size: var(--ds-font-size-14);                    /* 14 */
  font-weight: var(--ds-typo-font-weight-medium);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* line 버전 (일반 5개 카드) — 시안: bg white, border brand-blue, text brand-blue */
.donation-v1-2 .donation-mem-card__cta--line {
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-thin) solid var(--ds-color-brand-blue);
  color: var(--ds-color-brand-blue);
}
.donation-v1-2 .donation-mem-card__cta--line:hover {
  background: color-mix(in srgb, var(--ds-color-brand-blue) 8%, var(--ds-color-gray-0));
}
/* filled 버전 (추천 멤버십 1개) — 시안: bg brand-blue, text white. 높이는 base 상속 */
.donation-v1-2 .donation-mem-card__cta--filled {
  background: var(--ds-color-brand-blue);
  border: var(--ds-border-width-thin) solid var(--ds-color-brand-blue);
  color: var(--ds-color-gray-0);
  font-weight: var(--ds-typo-font-weight-bold);
  font-size: var(--ds-font-size-15);                    /* filled은 약간 큼 */
}
.donation-v1-2 .donation-mem-card__cta--filled:hover {
  background: color-mix(in srgb, var(--ds-color-brand-blue) 90%, black);
}

/* 2-2. 중복 적용 불가 안내 */
.donation-v1-2 .donation-mem-notice {
  display: flex;
  align-items: center;
  gap: var(--ds-number-20);                             /* 40 */
  margin-bottom: var(--ds-number-30);                   /* 60 — 시각 분리 */
  padding: var(--ds-number-12) var(--ds-number-16);     /* 24 / 32 */
  /* Figma exact: rgba(255,243,219,0.3) — 옅은 cream 30% (DS 정확 토큰 없음) */
  background: rgba(255, 243, 219, 0.3);
  border-radius: var(--ds-radius-medium);               /* 8 */
}
.donation-v1-2 .donation-mem-notice__head {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-3);                              /* 6 */
  flex-shrink: 0;
}
.donation-v1-2 .donation-mem-notice__icon {
  width: var(--ds-number-9);                            /* 18 */
  height: var(--ds-number-9);
  display: block;
}
.donation-v1-2 .donation-mem-notice__title {
  font-size: var(--ds-font-size-17);                    /* 17 ✓ */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-red-aa);
  letter-spacing: -0.011em;
}
.donation-v1-2 .donation-mem-notice__text {
  margin: 0;
  font-size: var(--ds-font-size-16);                    /* 16 ✓ */
  font-weight: var(--ds-typo-font-weight-medium);
  letter-spacing: -0.0119em;
  color: var(--ds-color-gray-70);
}

/* 2-3. 세액공제 혜택 */
.donation-v1-2 .donation-tax {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-number-30);                             /* 60 */
  padding: var(--ds-number-20);                         /* 40 — Figma 41 → DS 40 (가까움) */
  background: color-mix(in srgb, var(--ds-color-gray-5) 50%, transparent);
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-large);                /* 12 */
}
.donation-v1-2 .donation-tax__head {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-number-6);                              /* 12 */
}
.donation-v1-2 .donation-tax__icon {
  width: var(--ds-number-40);                           /* 80 */
  height: var(--ds-number-40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-gray-0);                   /* 흰색 (모든 viewport) */
  border-radius: var(--ds-radius-max);
}
.donation-v1-2 .donation-tax__icon img {
  width: 3.2rem;                                        /* 32px Figma 31.2 */
  height: 3.7rem;
  display: block;
}
.donation-v1-2 .donation-tax__title {
  margin: 0;
  font-size: var(--ds-font-size-24);                    /* 24 ✓ */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-100);
  letter-spacing: -0.021em;
}
.donation-v1-2 .donation-tax__grid {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-number-10);                             /* 20 */
}
.donation-v1-2 .donation-tax__box {
  padding: var(--ds-number-12);                         /* 24 — Figma 25 → DS 12(=24) (가까움) */
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-large);                /* 12 — Figma 14 → DS 12 (가까움) */
}
.donation-v1-2 .donation-tax__box-title {
  margin: 0 0 var(--ds-number-8);                       /* 16 */
  font-size: var(--ds-font-size-19);                    /* 19 ✓ */
  font-weight: var(--ds-typo-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;                               /* Figma +0.56px @19px = ~2.9% → 0.03em */
  color: var(--ds-color-gray-70);
}
.donation-v1-2 .donation-tax__deduction {
  margin: 0;
}
.donation-v1-2 .donation-tax__deduction-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-number-6) 0;                        /* 12 */
  border-bottom: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
}
.donation-v1-2 .donation-tax__deduction-row:last-child { border-bottom: 0; }
.donation-v1-2 .donation-tax__deduction-row dt {
  font-size: var(--ds-font-size-17);                    /* 17 ✓ */
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-color-gray-70);
  letter-spacing: -0.0044em;
}
.donation-v1-2 .donation-tax__deduction-row dd {
  margin: 0;
  font-size: var(--ds-font-size-22);                    /* 22 ✓ */
  font-weight: var(--ds-typo-font-weight-extrabold);
  color: var(--ds-color-brand-red-aa);
  letter-spacing: -0.0136em;
}
.donation-v1-2 .donation-tax__list {
  margin: 0;
  padding-left: var(--ds-number-12);                    /* 24 — list bullet 들여쓰기 */
}
.donation-v1-2 .donation-tax__list > li {
  padding: var(--ds-number-3) 0;                        /* 6 */
  font-size: var(--ds-font-size-16);                    /* 16 ✓ */
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.3;
  letter-spacing: -0.0044em;
  color: var(--ds-color-gray-100);
  list-style: disc;
}


/* ════════════════════════════════════════════════════════════════
   V03 PANEL — 후원 절차 (4 STEP 가로 카드 + chevron)
   ════════════════════════════════════════════════════════════════ */
.donation-v1-2 .donation-process {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--ds-number-4);                              /* 8 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.donation-v1-2 .donation-process__step {
  flex: 1 1 0;
  min-height: 25rem;                                    /* 250px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-6);                              /* 12 — STEP label ↔ title ↔ desc 시안 매칭 */
  padding: var(--ds-number-13) var(--ds-number-9);      /* 26 / 18 — 시안 정확값 */
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-large);                /* 12 */
  text-align: center;
}
/* 아이콘 ↔ STEP label 사이 20 (시안 gap-[20px]) — step gap 12 + 추가 8 */
.donation-v1-2 .donation-process__step > .donation-process__icon {
  margin-bottom: var(--ds-number-4);                    /* 8 → total 20 */
}
.donation-v1-2 .donation-process__icon {
  width: var(--ds-number-40);                           /* 80 */
  height: var(--ds-number-40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ds-color-secondary-5) 50%, transparent);
  border-radius: var(--ds-radius-max);
}
.donation-v1-2 .donation-process__icon img {
  /* width/height는 HTML img 속성에서 step별로 정확히 (aspect-ratio 유지)
     svg가 preserveAspectRatio="none"이라 img 속성값이 stretch 기준 */
  max-width: 4rem;                                      /* 40px max */
  max-height: 4.5rem;                                   /* 45px max */
  height: auto;
  display: block;
  object-fit: contain;
}
.donation-v1-2 .donation-process__step-label {
  margin: 0;                                            /* step gap만으로 (12) — 위계: PC 12 / 태블릿 10 / 모바일 8 */
  font-size: var(--ds-font-size-14);                    /* 14 ✓ */
  font-weight: var(--ds-typo-font-weight-semibold);
  letter-spacing: 0.107em;
  color: var(--ds-color-brand-gray);
  text-transform: uppercase;
  line-height: 1;
}
.donation-v1-2 .donation-process__title {
  margin: 0;
  font-size: var(--ds-font-size-24);                    /* 24 ✓ */
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.005em;
}
.donation-v1-2 .donation-process__desc {
  margin: 0;
  font-size: var(--ds-font-size-15);                    /* 15 ✓ */
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ds-color-gray-60);
}
.donation-v1-2 .donation-process__arrow {
  flex-shrink: 0;
  align-self: center;
  width: var(--ds-number-16);                           /* 32 — 시안 정확값 */
  height: var(--ds-number-16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-secondary-5);
  border-radius: var(--ds-radius-xlarge);               /* 16 */
  color: var(--ds-color-gray-50);
  /* 시안 shadow 매우 옅음(rgba(46,107,102,0.08)) → 사용자 요청 제거 */
  box-shadow: none;
}
.donation-v1-2 .donation-process__arrow svg {
  width: var(--ds-number-4);                            /* 8 — 시안 정확값 */
  height: var(--ds-number-6);                           /* 12 */
}


/* ════════════════════════════════════════════════════════════════
   C. FINAL — BECOME A MEMBER + HELP CENTER (모든 탭 공통, 풀폭)
   ════════════════════════════════════════════════════════════════ */
.donation-v1-2.donation-final {
  display: flex;
  align-items: stretch;
  width: 100vw;                                         /* 풀폭 — CMS 본문 컨테이너(폭제한) 안에서도 화면 끝까지. PUB(main 직계)은 50%≈50vw라 결과 동일 */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: var(--ds-number-40);                      /* 80 (wrap 100과 margin collapse → 100) */
  margin-bottom: 10rem;                                 /* 100 — v1.7.1 §5-3 본문 ↔ FOOTER */
  overflow: hidden;
}
.donation-v1-2 .donation-final__cta {
  position: relative;
  flex: 0 0 50%;                                        /* 정확히 반반 (카드 폭) */
  min-height: 33rem;                                    /* 330px Figma 331 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;                          /* 상단 정렬 — 두 카드 eyebrow/title 같은 top */
  align-items: flex-start;
  padding-top: var(--ds-number-30);                     /* 60 — 두 카드 동일 */
  padding-bottom: var(--ds-number-22);                  /* 44 */
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
/* 좌측 카드 컨텐츠 = 메인 컨텐츠(max-width 1200) 좌측 끝과 동일 정렬
   = (viewport - 1200) / 2 만큼 padding-left (1920 기준 360px) — padding-top/bottom은 base 60/44 유지 */
.donation-v1-2 .donation-final__cta--primary {
  padding-right: var(--ds-number-30);                   /* 60 */
  padding-left: max(var(--ds-number-30), calc((100vw - 120rem) / 2));
}
/* 우측 카드 컨텐츠 = 메인 컨텐츠 우측 끝과 동일 정렬 */
.donation-v1-2 .donation-final__cta--secondary {
  padding-right: max(var(--ds-number-30), calc((100vw - 120rem) / 2));
  padding-left: var(--ds-number-30);                    /* 60 */
}
/* 좌측 카드 — copy↔btn gap 120px (시안 gap-[120px] 정확값) */
.donation-v1-2 .donation-final__cta--primary > .donation-final__copy {
  margin-bottom: 12rem;                                 /* 120px Figma exact */
}

/* 좌측: BECOME A MEMBER */
.donation-v1-2 .donation-final__cta--primary {
  color: var(--ds-color-gray-0);
}
.donation-v1-2 .donation-final__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.donation-v1-2 .donation-final__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 시안 정확값 rgba(12,79,118,0.8) = primary-mid 80% (DS 정확 토큰 없음 — Figma exact) */
  background: color-mix(in srgb, #0c4f76 80%, transparent);
  z-index: 1;
}
/* 사진 위치 — Figma 정확: top -72.42%, left 0, w 130.8%, h 253.2% (큰 사이즈로 좌상단 정렬) */
.donation-v1-2 .donation-final__bg img {
  position: absolute;
  top: -72.42%;
  left: 0;
  width: 130.8%;
  height: 253.2%;
  max-width: none;
  object-fit: cover;
  display: block;
}
.donation-v1-2 .donation-final__cta--primary .donation-final__bg-text {
  position: absolute;
  right: calc(var(--ds-number-30) * -1);
  bottom: calc(var(--ds-number-20) * -1);
  font-size: 22.5rem;                                   /* 225px Figma */
  font-weight: var(--ds-typo-font-weight-black);
  line-height: 1;
  letter-spacing: -0.0005em;
  color: transparent;
  -webkit-text-stroke: 0.5px color-mix(in srgb, var(--ds-color-gray-0) 15%, transparent);    /* 더 얇고 더 흐리게 */
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
}
.donation-v1-2 .donation-final__cta--primary .donation-final__copy {
  position: relative;
  z-index: 1;
  /* margin-bottom은 line 1934 (.cta--primary > .copy) 12rem (120px) 우선 — 여기 중복 제거 */
}
.donation-v1-2 .donation-final__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-3);                              /* 6 */
  align-self: flex-start;
  padding: 0 var(--ds-number-10);                       /* 20 */
  height: var(--ds-number-16);                          /* 32 */
  background: var(--ds-color-gray-0);
  border-radius: var(--ds-radius-max);
  font-size: var(--ds-font-size-14);                    /* 14 ✓ */
  font-weight: var(--ds-typo-font-weight-semibold);
  color: var(--ds-color-brand-blue-aa);
  letter-spacing: -0.005em;
}

/* 우측: HELP CENTER */
.donation-v1-2 .donation-final__cta--secondary {
  background: var(--ds-color-brand-dark);
  color: var(--ds-color-gray-0);
}
.donation-v1-2 .donation-final__cta--secondary .donation-final__copy {
  /* margin-bottom 제거 — top 묶음의 margin-bottom 12만 적용되도록 (라인↔평일 12 정확) */
}
/* 우측 카드 컨텐츠 영역 (540px 최대 — 태블릿에선 카드 폭에 맞춰 축소) */
.donation-v1-2 .donation-final__cta--secondary .donation-final__inner {
  width: 100%;
  max-width: 54rem;                                     /* 540px Figma 최대 */
  position: relative;
  z-index: 1;
}
.donation-v1-2 .donation-final__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-number-10);                             /* 20 */
  /* margin-bottom 제거 — line-height 영향으로 시각상 너무 떨어져 보임.
     아래 contact-row:first-child에 직접 작은 margin 적용 */
  margin-bottom: 0;
}
.donation-v1-2 .donation-final__contact-row:first-child {
  margin-top: 0.2rem;                                   /* 2px → 시각상 더 붙어 보임 */
}
.donation-v1-2 .donation-final__heart {
  flex-shrink: 0;
  width: 13.1rem;                                       /* 131px Figma 정확 */
  height: 12.1rem;                                      /* 121px Figma 정확 (비율 유지) */
}
.donation-v1-2 .donation-final__heart img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.donation-v1-2 .donation-final__eyebrow {
  margin: 0 0 var(--ds-number-6);                       /* 12 */
  font-size: var(--ds-font-size-12);                    /* 12 ✓ */
  font-weight: var(--ds-typo-font-weight-semibold);
  letter-spacing: 0.16em;                               /* Figma +1.92px @12px = 16% → 0.16em */
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ds-color-gray-0) 70%, transparent);
}
.donation-v1-2 .donation-final__cta--primary .donation-final__eyebrow {
  color: color-mix(in srgb, var(--ds-color-gray-0) 100%, transparent);
}
.donation-v1-2 .donation-final__title {
  margin: 0;
  font-size: var(--ds-font-size-32);                    /* 32 ✓ */
  font-weight: var(--ds-typo-font-weight-bold);
  letter-spacing: -0.023em;
  line-height: 1.2;
}
.donation-v1-2 .donation-final__desc {
  margin: var(--ds-number-10) 0 0;                      /* 20 — 시안 gap-[20px] (후원 문의보다 더 내려가게) */
  font-size: var(--ds-font-size-17);                    /* 17 ✓ */
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.4;
  letter-spacing: -0.0044em;
  color: color-mix(in srgb, var(--ds-color-gray-0) 78%, transparent);
}
.donation-v1-2 .donation-final__contact {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-top: 0;
  width: 100%;                                          /* inner(540) 안에서 100% */
}
.donation-v1-2 .donation-final__contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-number-7) 0;                        /* 14 */
  border-top: var(--ds-border-width-thin) solid color-mix(in srgb, var(--ds-color-gray-0) 20%, transparent);
}
.donation-v1-2 .donation-final__contact-row:first-child {
  border-top: var(--ds-border-width-medium) solid var(--ds-color-gray-0);
}
.donation-v1-2 .donation-final__contact-row dt {
  font-size: var(--ds-font-size-14);                    /* 14 ✓ */
  font-weight: var(--ds-typo-font-weight-medium);
  text-transform: uppercase;
  color: var(--ds-color-gray-0);
}
.donation-v1-2 .donation-final__contact-row dd {
  margin: 0;
  font-size: var(--ds-font-size-22);                    /* 22 ✓ */
  font-weight: var(--ds-typo-font-weight-bold);
  letter-spacing: -0.015em;
}
.donation-v1-2 .donation-final__contact-row:last-child dd {
  font-size: var(--ds-font-size-17);                    /* 17 ✓ — 이메일은 조금 작게 */
  letter-spacing: -0.015em;
}
.donation-v1-2 .donation-final__contact-row a {
  color: var(--ds-color-gray-0);
  text-decoration: none;
}
.donation-v1-2 .donation-final__contact-row a:hover {
  color: var(--ds-color-brand-blue-aa);
}


/* ════════════════════════════════════════════════════════════════
   R. 반응형 (모바일 시안 없음 — 스킬 Case D + 이미지 사이즈 위계 적용)
   ════════════════════════════════════════════════════════════════ */

/* ───────── 태블릿 (768~1199px) — 폰트·간격·이미지 1단계 축소 ───────── */
@media (max-width: 1199px) {
  /* HERO */
  .donation-v1-2 .donation-hero { padding: var(--ds-number-12) 0 var(--ds-number-10); }
  .donation-v1-2 .donation-hero__inner { max-width: calc(100vw - 6rem); }
  .donation-v1-2 .donation-hero__headline { font-size: var(--ds-font-size-36); margin-bottom: var(--ds-number-12); flex-wrap: wrap; }
  .donation-v1-2 .donation-hero__wat-block { width: min(50rem, calc(100vw - 8rem)); margin-bottom: var(--ds-number-10); }
  .donation-v1-2 .donation-hero__slogan { font-size: var(--ds-font-size-22); }
  .donation-v1-2 .donation-hero__lede { font-size: var(--ds-font-size-16); white-space: normal; }
  .donation-v1-2 .donation-hero__deco { width: 18rem; height: auto; }    /* 태블릿: 사이즈 축소 */

  /* TAB */
  .donation-v1-2 .donation-tabs { margin-top: 6rem; margin-bottom: var(--ds-number-20); }

  /* SECTION TITLE 공통 */
  .donation-v1-2 .donation-section-title { font-size: var(--ds-font-size-28); }
  .donation-v1-2 .donation-impact__title { font-size: var(--ds-font-size-28); }

  /* WHY 카드 — 3개 가로 유지, width/height 동일 viewport 기반 (정원 보장) */
  .donation-v1-2 .donation-why-list { gap: 0; flex-wrap: nowrap; justify-content: center; }
  .donation-v1-2 .donation-why-card {
    width: clamp(18rem, 28vw, 28rem);
    height: clamp(18rem, 28vw, 28rem);
    margin-right: calc(var(--ds-number-6) * -1);
  }
  .donation-v1-2 .donation-why-card__title { font-size: var(--ds-font-size-20); }
  .donation-v1-2 .donation-why-card__desc { font-size: var(--ds-font-size-14); }

  /* IMPACT 태블릿: 사진 작게 */
  .donation-v1-2 .donation-impact { gap: var(--ds-number-15); align-items: center; }
  .donation-v1-2 .donation-impact__photo { width: 30.8rem; height: 30.8rem; top: calc(50vh - 15.4rem); }
  .donation-v1-2 .donation-impact__item-title { font-size: var(--ds-font-size-22); }

  /* MEMBERSHIP 카드 — 태블릿 2열 */
  .donation-v1-2 .donation-mem-grid { grid-template-columns: repeat(2, 1fr); }
  .donation-v1-2 .donation-mem-card { padding: var(--ds-number-12); min-height: 42rem; }
  .donation-v1-2 .donation-mem-grid > .donation-mem-card:nth-child(n+4) { min-height: 42rem; }
  .donation-v1-2 .donation-mem-card__head { height: 16rem; padding-bottom: var(--ds-number-10); }
  .donation-v1-2 .donation-mem-card__name { font-size: var(--ds-font-size-22); }
  .donation-v1-2 .donation-mem-card__list > li { font-size: var(--ds-font-size-14); }

  /* 중복 안내 */
  .donation-v1-2 .donation-mem-notice { gap: var(--ds-number-12); padding: var(--ds-number-10) var(--ds-number-12); }

  /* 세액공제 — 태블릿: 두 박스 세로 정렬(1열) */
  .donation-v1-2 .donation-tax { gap: var(--ds-number-15); padding: var(--ds-number-15); }
  .donation-v1-2 .donation-tax__grid { grid-template-columns: 1fr; gap: var(--ds-number-8); }
  .donation-v1-2 .donation-tax__title { font-size: var(--ds-font-size-22); }

  /* PROCESS — 태블릿 2열 grid, chevron 숨김, step gap 10 (label-title 10) */
  .donation-v1-2 .donation-process {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-number-8);
  }
  .donation-v1-2 .donation-process__step { padding: var(--ds-number-12) var(--ds-number-9); min-height: 22rem; gap: var(--ds-number-5); }
  .donation-v1-2 .donation-process__arrow { display: none; }
  .donation-v1-2 .donation-process__title { font-size: var(--ds-font-size-22); }
  .donation-v1-2 .donation-process__desc { font-size: var(--ds-font-size-14); }

  /* FINAL — 태블릿: 세로 stack, 좌측 동참하기 컴팩트, 푸터와 갭 확보 */
  .donation-v1-2.donation-final { flex-direction: column; margin-bottom: var(--ds-number-40); }    /* 80 — 푸터/floating btn 갭 */
  .donation-v1-2 .donation-final__cta { flex: 0 0 auto; padding-top: var(--ds-number-12); padding-bottom: var(--ds-number-12); }
  .donation-v1-2 .donation-final__cta--primary {
    min-height: 18rem;                                  /* 180px — 동참하기 영역 컴팩트 */
    padding-left: var(--ds-number-15);
    padding-right: var(--ds-number-12);
  }
  .donation-v1-2 .donation-final__cta--secondary {
    min-height: auto;
    padding-left: var(--ds-number-12);
    padding-right: var(--ds-number-12);
  }
  /* 태블릿: 후원문의 inner 폭 제한 풀어서 카드 가득 */
  .donation-v1-2 .donation-final__cta--secondary .donation-final__inner { max-width: none; }
  .donation-v1-2 .donation-final__title { font-size: var(--ds-font-size-24); }
  .donation-v1-2 .donation-final__heart { width: 9rem; height: 8rem; }
  .donation-v1-2 .donation-final__cta--primary > .donation-final__copy { margin-bottom: var(--ds-number-10); }    /* 20 — 동참하기 카드 컴팩트 */
  .donation-v1-2 .donation-final__cta--primary .donation-final__bg-text { font-size: 14rem; }
  .donation-v1-2 .donation-final__contact-row dd { font-size: var(--ds-font-size-19); }
}


/* ───────── 모바일 (≤ 767px) — 폰트·간격·이미지 2단계 축소, 레이아웃 세로 전환 ───────── */
@media (max-width: 767px) {
  /* HERO — viewport 안에 모든 컨텐츠 들어가게 */
  .donation-v1-2 .donation-hero { padding: 0 var(--ds-number-8) var(--ds-number-8); }    /* top 0 */
  .donation-v1-2 .donation-hero__inner { max-width: calc(100vw - 4rem); }
  .donation-v1-2 .donation-hero__headline {
    font-size: var(--ds-font-size-24);                  /* 적당히 큰 — 가독성 */
    margin-bottom: var(--ds-number-10);
    flex-wrap: wrap;
    white-space: nowrap;
  }
  /* "평택형 메세나 브랜드" 위쪽 한 줄, "WAT 를 소개합니다" 아래쪽 한 줄 */
  .donation-v1-2 .donation-hero__headline > .donation-hero__lead:first-child {
    flex: 1 0 100%;
  }
  .donation-v1-2 .donation-hero__wat-block { width: min(32rem, calc(100vw - 4rem)); margin-bottom: var(--ds-number-10); }
  .donation-v1-2 .donation-hero__slogan { font-size: var(--ds-font-size-19); }
  .donation-v1-2 .donation-hero__lede { font-size: var(--ds-font-size-15); white-space: normal; text-wrap: pretty; }    /* PC nowrap 해제 */
  .donation-v1-2 .donation-hero__deco { display: none; }    /* 모바일 데코 숨김 */

  /* TAB — 모바일: pill 숨김 + select 표시 (DS page-header__select 패턴 — page-header.css가 자동 표시) */
  .donation-v1-2 .donation-tabs { display: none; }
  .donation-v1-2 .donation-tabs__select-wrap {
    width: 100%;
    max-width: calc(100vw - 4rem);
    margin: 6rem auto var(--ds-number-15);
  }

  /* SECTION TITLE */
  .donation-v1-2 .donation-section-title { font-size: var(--ds-font-size-24); margin-bottom: var(--ds-number-15); }
  .donation-v1-2 .donation-impact__title { font-size: var(--ds-font-size-24); }

  /* WHY 카드 — 모바일 1열 위아래 겹침 (PC처럼) */
  .donation-v1-2 .donation-why-list {
    flex-direction: column;
    gap: 0;
    align-items: center;
    margin-bottom: var(--ds-number-15);
  }
  .donation-v1-2 .donation-why-card {
    width: 22rem;
    height: 22rem;
    margin-right: 0;
    margin-top: calc(var(--ds-number-10) * -1);          /* -20 위로 겹침 */
    align-self: center;                                  /* 가운데 정렬 강제 */
    flex-shrink: 0;
  }
  .donation-v1-2 .donation-why-card:first-child { margin-top: 0; }
  .donation-v1-2 .donation-why-card__title { font-size: var(--ds-font-size-19); }
  .donation-v1-2 .donation-why-card__desc { font-size: var(--ds-font-size-13); line-height: 1.4; }    /* 13 — 원 안에 잘 들어가게 */

  /* IMPACT — 세로 stack, 사진 240×240 */
  .donation-v1-2 .donation-impact { flex-direction: column; gap: var(--ds-number-10); }
  .donation-v1-2 .donation-impact__col { max-width: 100%; width: 100%; }
  .donation-v1-2 .donation-impact__photo { width: 24rem; height: 24rem; margin: 0 auto; }
  .donation-v1-2 .donation-impact__item-title { font-size: var(--ds-font-size-20); }
  .donation-v1-2 .donation-impact__item-desc { font-size: var(--ds-font-size-15); }
  .donation-v1-2 .donation-impact-banner { height: 7rem; }

  /* MEMBERSHIP 카드 — 모바일 1열. 위계: name 19 / amount 15 / catch 14 / list 13 */
  .donation-v1-2 .donation-mem-grid { grid-template-columns: 1fr; gap: var(--ds-number-12); padding: 0 var(--ds-number-2); }    /* 24 — 카드 사이 띄움 (추천 뱃지 겹침 방지) */
  .donation-v1-2 .donation-mem-card { min-height: 0; padding: var(--ds-number-10); }
  .donation-v1-2 .donation-mem-grid > .donation-mem-card:nth-child(n+4) { min-height: 0; }
  .donation-v1-2 .donation-mem-card__head {
    height: auto !important;
    padding-bottom: var(--ds-number-10);                /* 20 — 라인 위쪽 여백 */
    margin-bottom: var(--ds-number-6);                  /* 12 — 라인 ↔ list */
    gap: var(--ds-number-4);                            /* 8 — 컴팩트 */
  }
  .donation-v1-2 .donation-mem-card__name { font-size: var(--ds-font-size-19); }
  .donation-v1-2 .donation-mem-card__amount { font-size: var(--ds-font-size-15); }
  .donation-v1-2 .donation-mem-card__amount-sub { font-size: var(--ds-font-size-13); }
  .donation-v1-2 .donation-mem-card__catch { font-size: var(--ds-font-size-14); line-height: 1.4; }
  .donation-v1-2 .donation-mem-card__list > li {
    font-size: var(--ds-font-size-13);
    padding: var(--ds-number-2) 0 var(--ds-number-2) var(--ds-number-8);
  }
  .donation-v1-2 .donation-mem-card__cta { height: var(--ds-number-14); font-size: var(--ds-font-size-13); }
  .donation-v1-2 .donation-mem-card__badge {
    top: calc(var(--ds-number-5) * -1);                 /* -10 (PC -17 → 모바일 안쪽으로) */
    right: var(--ds-number-10);
    font-size: var(--ds-font-size-13);
    padding: var(--ds-number-1) var(--ds-number-6);
  }

  /* 중복 안내 — 모바일 세로 stack, 카드 list와 위계 맞춤 (13/14) */
  .donation-v1-2 .donation-mem-notice { flex-direction: column; align-items: flex-start; gap: var(--ds-number-3); padding: var(--ds-number-6) var(--ds-number-8); }
  .donation-v1-2 .donation-mem-notice__title { font-size: var(--ds-font-size-14); }
  .donation-v1-2 .donation-mem-notice__text { font-size: var(--ds-font-size-13); }

  /* 세액공제 — 모바일 세로 stack, 위계 단계 명확 (메인 17 / 박스 14 / 본문 13-14) */
  .donation-v1-2 .donation-tax { flex-direction: column; align-items: stretch; gap: var(--ds-number-10); padding: var(--ds-number-10); }
  .donation-v1-2 .donation-tax__grid { width: 100%; }    /* 박스 카드 폭 가득 */
  .donation-v1-2 .donation-tax__head { flex-direction: row; align-items: center; gap: var(--ds-number-4); }
  .donation-v1-2 .donation-tax__icon { width: var(--ds-number-16); height: var(--ds-number-16); }    /* 32 — 컴팩트 */
  .donation-v1-2 .donation-tax__icon img { width: 1.6rem; height: 1.85rem; }
  .donation-v1-2 .donation-tax__title { font-size: var(--ds-font-size-17); }    /* 메인 타이틀 17 */
  .donation-v1-2 .donation-tax__grid { grid-template-columns: 1fr; gap: var(--ds-number-6); }    /* 박스 간 12 */
  .donation-v1-2 .donation-tax__box { padding: var(--ds-number-8); }
  .donation-v1-2 .donation-tax__box-title { font-size: var(--ds-font-size-14); }    /* 박스 제목 14 */
  .donation-v1-2 .donation-tax__deduction-row { padding: var(--ds-number-3) 0; }
  .donation-v1-2 .donation-tax__deduction-row dt { font-size: var(--ds-font-size-14); }
  .donation-v1-2 .donation-tax__deduction-row dd { font-size: var(--ds-font-size-17); }    /* 값 17 */
  .donation-v1-2 .donation-tax__list > li { font-size: var(--ds-font-size-13); }    /* 본문 13 */

  /* PROCESS — 모바일 세로 stack, 화살표 회전. 위계: icon 60 / title 19 / desc 14 / step-label 13 */
  .donation-v1-2 .donation-process {
    display: flex !important;                           /* 태블릿 grid override */
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: var(--ds-number-4);
  }
  .donation-v1-2 .donation-process__step {
    padding: var(--ds-number-10);
    gap: var(--ds-number-4);
    min-height: 18rem !important;                       /* PC 25rem override */
    flex: 0 0 auto;
    width: 100%;
  }
  .donation-v1-2 .donation-process__icon { width: var(--ds-number-30); height: var(--ds-number-30); }    /* 60 — PC 80에서 1단계 축소 */
  .donation-v1-2 .donation-process__icon img { max-width: 3rem; max-height: 3.4rem; }
  .donation-v1-2 .donation-process__step-label { font-size: var(--ds-font-size-13); }
  .donation-v1-2 .donation-process__title { font-size: var(--ds-font-size-19); }
  .donation-v1-2 .donation-process__desc { font-size: var(--ds-font-size-14); }
  .donation-v1-2 .donation-process__step > .donation-process__icon { margin-bottom: var(--ds-number-3); }    /* icon ↔ label 16 = gap 4 + 12 */
  .donation-v1-2 .donation-process__arrow { transform: rotate(90deg); }

  /* FINAL — 세로 stack */
  .donation-v1-2.donation-final { flex-direction: column; margin-top: var(--ds-number-20); margin-bottom: 6rem; }    /* 60 — v1.7.1 §5-3 본문 ↔ FOOTER (모바일) */
  .donation-v1-2 .donation-final__cta { min-height: 22rem; padding: var(--ds-number-12) var(--ds-number-10); }
  .donation-v1-2 .donation-final__title { font-size: var(--ds-font-size-22); }
  .donation-v1-2 .donation-final__desc { font-size: var(--ds-font-size-13); white-space: nowrap; }    /* 한 줄 강제 */
  .donation-v1-2 .donation-final__heart { width: 10rem; height: 6.5rem; top: var(--ds-number-6); right: var(--ds-number-6); }
  .donation-v1-2 .donation-final__cta--primary .donation-final__bg-text {
    font-size: 8rem;                                    /* 더 작게 */
    right: var(--ds-number-5);                          /* 안쪽으로 */
    bottom: var(--ds-number-3);
  }
  .donation-v1-2 .donation-final__contact-row dt { font-size: var(--ds-font-size-13); }
  .donation-v1-2 .donation-final__contact-row dd { font-size: var(--ds-font-size-17); }
  .donation-v1-2 .donation-final__contact-row:last-child dd { font-size: var(--ds-font-size-15); }
}
/* === source: community-page-v2.css === */
@charset "utf-8";

/* ================================================================
   Community 모듈 v3 — 통합 페이지 CSS
   ================================================================
   적용 페이지 (페이지별 wrapper로 격리):
   · MNU-U-100302 Q&A 목록     → wrapper `.qa-board-list-v2`
   · MNU-U-100304 Q&A 글쓰기  → wrapper `.qa-write-v3`
   · MNU-U-100305 분실물센터 안내 → wrapper `.lostfound-v3`

   원칙: 한 community 모듈 CSS에 페이지별 룰을 wrapper로 격리해 공존.
   self-contained — 각 v.html은 이 파일 1개만 로드.
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   PAGE: MNU-U-100304 Q&A 글쓰기 (wrapper `.qa-write-v3`)
   적용: shared/publishing/fo/pages/소통참여_MNU-U-100000/고객문의_MNU-U-100300/MNU-U-100304_QA글쓰기_design_v2.html
   참고: 기존 community-page.css base 그대로 활용 + 본 섹션은 가로폭/상단 여백 조정만
   Figma: node-id=13896-12683
   ════════════════════════════════════════════════════════════════ */


/* ===== wrap — 상단 여백 추가 ===== */
.sub-page-wrap.qa-write-v3 {
  padding-top: var(--ds-number-15);                           /* 30px (시안 상단 여백 확보) */
}

/* ===== Q&A 글쓰기 폼 — 시안 13896-12683: 가로폭 1200 + 상단 dark 1px 라인 ===== */
.qa-write-v3 .qa-write-form {
  width: 100%;
  max-width: 120rem;                                          /* 1200px (시안) */
  margin-inline: auto;
  padding-inline: var(--ds-number-10);                        /* 20px (모바일 안전) */
  border-top: var(--ds-border-width-thin) solid var(--ds-color-brand-dark); /* 시안 dark 1px 가로선 */
  box-sizing: border-box;
}
/* 행 여백: base 36px → 28px (기본보다 좁게, 최소보다는 넓게) */
.qa-write-v3 .qa-write-form .qa-write-row {
  padding: var(--ds-number-14) 0;                             /* 28px */
}
/* 첫 row — dark 1px 라인과 시각 32px 간격 (기본 36px → 32px) */
.qa-write-v3 .qa-write-form > .qa-write-row:first-child {
  padding-top: var(--ds-number-16);                           /* 32px (시안) */
}

/* 등록/취소 버튼 (시안: 등록=primary blue, 취소=outline-gray)
   상하 여백: 공연전시상세 ds-detail-actions 패턴(line→button 60px)에 맞춤
   base community-page.css의 padding 40/40을 override하여 시각 60px 통일 */
.qa-write-v3 .qa-write-actions {
  margin-top: var(--ds-number-30);                            /* 60px (= 공연전시상세 line→button) */
  padding-top: 0;                                             /* base 40 override */
  padding-bottom: var(--ds-number-30);                        /* 60px (대칭) */
}
/* 버튼 너비: 등록(첫번째, primary) > 취소(두번째, line-gray)
   HTML이 ds-btn--primary 대신 color-brand-dark를 쓰므로 위치 기반 선택자로 매칭 */
.qa-write-v3 .qa-write-actions .ds-btn:first-child {
  min-width: 18rem;                                           /* 180px — 등록 */
}
.qa-write-v3 .qa-write-actions .ds-btn:last-child {
  min-width: 12rem;                                           /* 120px — 취소 */
}


/* ===== Q&A 글쓰기 — 반응형 (~767px) ===== */
@media (max-width: 767px) {
  .sub-page-wrap.qa-write-v3 {
    padding-top: var(--ds-number-10);                         /* 20px */
  }
  .qa-write-v3 .qa-write-form {
    max-width: 100%;
    padding-inline: var(--ds-mobile-padding-layout-side);
  }
  /* 첫 row — dark 1px 라인과 시각 20px 간격 (PC 32 → 모바일 20) */
  .qa-write-v3 .qa-write-form > .qa-write-row:first-child {
    padding-top: var(--ds-number-10);                         /* 20px */
  }
  /* 등록/취소 버튼 — 모바일 위 여백 축소 (PC 60 → 모바일 30) */
  .qa-write-v3 .qa-write-actions {
    margin-top: var(--ds-number-15);                          /* 30px */
    padding-bottom: var(--ds-number-15);                      /* 30px (대칭) */
  }
}


/* ════════════════════════════════════════════════════════════════
   PAGE: MNU-U-100305 분실물센터 안내 (wrapper `.lostfound-v3`)
   적용: shared/publishing/fo/pages/소통참여_MNU-U-100000/고객문의_MNU-U-100300/MNU-U-100305_분실물센터안내_design_v2.html
   Figma: node-id=13993-21456 (TOBE 🟢 74분실물센터 안내)

   토큰 매칭 메모
   · Figma var()명이 DS 토큰명과 100% 일치 (primary/5, gray/10·70, brand/blue·blue-aa·red-aa·dark·dark-aa)
   · rgba(244,245,246,0.5) → gray-5 50% (color-mix)
   · rgba(255,243,219,0.3) → warning-5 30% (color-mix) — 정확 일치
   · shadow rgba(46,107,102,0.08), rgba(0,0,0,0.1)는 시안 specific (DS shadow 토큰 미일치 → 직접 작성)
   · Step 카드 desc 색 #737d87 → gray-50(#6d7882) 가까운 토큰
   · Step 카드 title 색 #1a212e → gray-95(#131416) 가까운 토큰
   ════════════════════════════════════════════════════════════════ */


/* ===== 컨테이너 너비 — DS 기본 1440 → 1200 override ===== */
.sub-page-wrap.lostfound-v3 {
  max-width: 120rem; /* 1200px */
}

/* ===== BASE LAYER (community-page.css의 lostfound 영역 base를 wrapper prefix로 추출) ===== */

.lostfound-v3 .lostfound-section {
  margin-bottom: var(--ds-number-30);
}
.lostfound-v3 .lostfound-section:last-child {
  margin-bottom: 0;
}
.lostfound-v3 .lostfound-section .ds-section-header__title {
  margin-bottom: var(--ds-number-15);
  font-weight: var(--ds-typo-font-weight-semibold); /* Figma 시안 — 섹션 타이틀(h3) SemiBold 강제 */
}


/* ===== V01-A. 4단계 처리절차 카드 ===== */

.lostfound-v3 .lostfound-step-cards {
  list-style: none;
  margin: 0 0 var(--ds-number-16) 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-8);
  width: 100%;
}

.lostfound-v3 .lostfound-step-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--ds-number-10); /* 20px — head ↔ desc 시각적 갭 */
  height: 200px;
  padding: var(--ds-number-13) var(--ds-number-9);
  background-color: var(--ds-color-gray-0);
  border: 1px solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-large);
}

/* head 그룹 (STEP NN + 제목) — 시안의 gap-[12px] 그룹화. 카드 자체 gap(20px)과 분리 */
.lostfound-v3 .lostfound-step-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-6); /* 12px — STEP NN ↔ 제목 시각적 갭 */
  line-height: normal;
}

.lostfound-v3 .lostfound-step-card__num {
  font-size: var(--ds-font-size-14);
  font-weight: var(--ds-typo-font-weight-semibold);
  letter-spacing: 0.094em; /* Figma tracking 1.5px @ 14px ≈ 0.107em — 시안 영문 라벨 (STEP 01 등) */
  color: var(--ds-color-brand-blue-aa);
}

.lostfound-v3 .lostfound-step-card__title {
  font-size: var(--ds-font-size-24);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-95); /* Figma #1a212e → gray-95 가까움 */
  line-height: 1;
}

.lostfound-v3 .lostfound-step-card__desc {
  margin: 0;
  font-size: var(--ds-font-size-15);
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.4;
  color: var(--ds-color-gray-50); /* Figma #737d87 → gray-50(#6d7882) 가장 가까움 */
}

.lostfound-v3 .lostfound-step-card__arrow {
  list-style: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ds-radius-xlarge);
  background-color: var(--ds-color-primary-5);
  color: var(--ds-color-brand-blue-aa);
  box-shadow: 0 2px 4px rgba(46, 107, 102, 0.08); /* 시안 specific shadow */
}


/* ===== V01-B. 보관 기간 안내 박스 ===== */

.lostfound-v3 .lostfound-info-box {
  display: flex;
  align-items: center;
  gap: var(--ds-number-16);
  padding: var(--ds-number-12) var(--ds-number-20);
  margin: var(--ds-number-16) 0 0 0;
  background-color: var(--ds-color-gray-0);
  border: 1px solid var(--ds-color-brand-blue);
  border-radius: var(--ds-radius-large);
}

/* ic_notice.svg는 80x80 + primary-5 배경(#E6F3FA) + 라운드 내장 일러스트 — 별도 배경/라운드 처리 불필요 */
.lostfound-v3 .lostfound-info-box__icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: block;
}

.lostfound-v3 .lostfound-info-box__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-6);
  min-width: 0;
}

.lostfound-v3 .lostfound-info-box__title {
  font-size: var(--ds-font-size-22);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-blue-aa);
}

.lostfound-v3 .lostfound-info-box__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-2);
}

.lostfound-v3 .lostfound-info-box__list li {
  position: relative;
  padding-left: var(--ds-number-7);
  font-size: var(--ds-font-size-17);
  font-weight: var(--ds-typo-font-weight-medium);
  line-height: 1.5;
  color: var(--ds-color-gray-70);
}

.lostfound-v3 .lostfound-info-box__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--ds-color-gray-70);
}

.lostfound-v3 .lostfound-info-box__list li strong {
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-red-aa);
}

/* ※ 주석 항목 — 점(•) 불릿 제거, ※ 기호가 마커 역할 */
.lostfound-v3 .lostfound-info-box__list li.is-note {
  padding-left: 0;
}
.lostfound-v3 .lostfound-info-box__list li.is-note::before {
  display: none;
}


/* ===== V01-C. 유의사항 ===== */

.lostfound-v3 .lostfound-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-number-20);
  padding: var(--ds-number-12) var(--ds-number-16);
  margin: var(--ds-number-16) 0 0 0; /* 32px — 보관 기간 안내 박스와의 시각적 갭 */
  background-color: color-mix(in srgb, var(--ds-color-warning-5) 30%, transparent); /* Figma rgba(255,243,219,0.3) = warning-5 30% 정확 일치 */
  border-radius: var(--ds-radius-medium);
}

.lostfound-v3 .lostfound-notice__header {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-3);
  padding-top: 2px; /* baseline 정렬 — 첫 li 텍스트와 라인업 */
}

/* ic_error.svg는 18x18 + brand-red-aa(#E03010) 색상 내장 */
.lostfound-v3 .lostfound-notice__icon {
  display: block;
  width: 18px;
  height: 18px;
}

.lostfound-v3 .lostfound-notice__title {
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-red-aa);
  letter-spacing: -0.01em;
}

.lostfound-v3 .lostfound-notice__list {
  flex: 1;
  margin: 0;
  padding-left: var(--ds-number-12);
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-2);
  min-width: 0;
}

.lostfound-v3 .lostfound-notice__list li {
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-medium);
  line-height: 1.5;
  color: var(--ds-color-gray-70);
  letter-spacing: -0.01em;
  list-style: disc;
}


/* ===== V02. 시설별 문의처 테이블 ===== */

/* 컬럼 너비 — Figma 시안 1200px 기준 260/260/260/420 */
.lostfound-v3 .lostfound-table__col--name { width: 260px; }
.lostfound-v3 .lostfound-table__col--dept { width: 260px; }
.lostfound-v3 .lostfound-table__col--tel { width: 260px; }
.lostfound-v3 .lostfound-table__col--place { width: auto; }

.lostfound-v3 .lostfound-table {
  width: 100%;
  border-collapse: collapse;
}

.lostfound-v3 .lostfound-table thead th {
  background-color: color-mix(in srgb, var(--ds-color-gray-5) 50%, transparent); /* Figma rgba(244,245,246,0.5) */
  padding: var(--ds-number-10) var(--ds-number-12);
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.01em;
  text-align: center;
  border: 0;
}

.lostfound-v3 .lostfound-table tbody td {
  padding: var(--ds-number-10) var(--ds-number-12);
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.01em;
  text-align: center;
  border-bottom: 1px solid var(--ds-color-gray-30);
  vertical-align: middle;
}

.lostfound-v3 .lostfound-table tbody td:first-child,
.lostfound-v3 .lostfound-table tbody td:first-child strong {
  font-weight: var(--ds-typo-font-weight-semibold); /* 시설명 SemiBold (strong 기본 Bold도 함께 override) */
}

.lostfound-v3 .lostfound-table tbody tr:first-child td {
  border-top: 1px solid var(--ds-color-gray-30);
}

.lostfound-v3 .lostfound-table__tel {
  color: var(--ds-color-brand-blue-aa);
  text-decoration: none;
}
.lostfound-v3 .lostfound-table__tel:hover {
  text-decoration: underline;
}

.lostfound-v3 .lostfound-table__note {
  margin: var(--ds-number-4) 0 0 0;
  font-size: var(--ds-font-size-13);
  color: var(--ds-color-gray-50);
}


/* ===== V03. LOST112 콜아웃 ===== */

.lostfound-v3 .lostfound-callout {
  display: flex;
  align-items: center;
  gap: var(--ds-number-16);
  padding: var(--ds-number-12) var(--ds-number-20);
  margin-top: 0;
  background-color: var(--ds-color-gray-0);
  border: 1px solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-large);
}

/* 좌측 LOST112 영역 (160x160 컨테이너 안에 140x140 원 + 우측하단 32x32 외부링크 박스) */
.lostfound-v3 .lostfound-callout__brand {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  height: 160px;
}

.lostfound-v3 .lostfound-callout__brand-circle {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ds-color-gray-0);
  border: 1px solid var(--ds-color-brand-dark-aa);
  border-radius: var(--ds-radius-max);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 시안 specific */
}

/* LOST112 + 경찰민원24 통합 로고 이미지 (img_lost112.png) */
.lostfound-v3 .lostfound-callout__brand-img {
  display: block;
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lostfound-v3 .lostfound-callout__brand-link {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ds-color-brand-dark);
  color: var(--ds-color-gray-0);
  border-radius: var(--ds-radius-xlarge);
  box-shadow: 0 1px 3px rgba(26, 51, 102, 0.08); /* 시안 specific */
}

.lostfound-v3 .lostfound-callout__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-8);
  min-width: 0;
}

.lostfound-v3 .lostfound-callout__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-2);
}

.lostfound-v3 .lostfound-callout__list li {
  position: relative;
  padding-left: var(--ds-number-7);
  font-size: var(--ds-font-size-17);
  font-weight: var(--ds-typo-font-weight-medium);
  line-height: 1.5;
  color: var(--ds-color-gray-70);
}

.lostfound-v3 .lostfound-callout__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--ds-color-gray-70);
}

/* 시안 버튼: h:40, gap:6, px:24, brand-blue-aa, radius:6, 15px Medium */
.lostfound-v3 .lostfound-callout__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-3);
  height: 40px;
  padding: 0 var(--ds-number-12);
  font-size: var(--ds-font-size-15);
  font-weight: var(--ds-typo-font-weight-medium);
  line-height: 1.3;
  color: var(--ds-color-gray-0);
  background-color: var(--ds-color-brand-blue-aa);
  border-radius: var(--ds-radius-small);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.lostfound-v3 .lostfound-callout__btn:hover {
  background-color: var(--ds-color-primary-60);
}


/* ===== 분실물센터 — 반응형 ===== */
/* 모바일 시안 없음 — 텍스트 위계 단계 축소 + 간격 단계 축소 룰 자동 적용 (스킬 Case D) */

/* 태블릿 (768~1199px) */
@media (max-width: 1199px) {
  .lostfound-v3 .lostfound-section {
    margin-bottom: var(--ds-number-24);
  }

  /* 스텝 카드 — 4-col 유지, 내부 간격/폰트 한 단계 축소 */
  .lostfound-v3 .lostfound-step-cards {
    gap: var(--ds-number-4);
  }
  .lostfound-v3 .lostfound-step-card {
    height: auto;
    min-height: 180px;
    padding: var(--ds-number-10) var(--ds-number-6);
    gap: var(--ds-number-8);
  }
  .lostfound-v3 .lostfound-step-card__title {
    font-size: var(--ds-font-size-22);
  }
  .lostfound-v3 .lostfound-step-card__desc {
    font-size: var(--ds-font-size-14);
  }

  /* 보관 기간 안내 */
  .lostfound-v3 .lostfound-info-box {
    gap: var(--ds-number-12);
    padding: var(--ds-number-10) var(--ds-number-16);
  }
  .lostfound-v3 .lostfound-info-box__title {
    font-size: var(--ds-font-size-20);
  }
  .lostfound-v3 .lostfound-info-box__list li {
    font-size: var(--ds-font-size-16);
  }

  /* 유의사항 */
  .lostfound-v3 .lostfound-notice {
    gap: var(--ds-number-12);
    padding: var(--ds-number-10) var(--ds-number-12);
  }
  .lostfound-v3 .lostfound-notice__title {
    font-size: var(--ds-font-size-17);
  }
  .lostfound-v3 .lostfound-notice__list li {
    font-size: var(--ds-font-size-15);
  }

  /* 테이블 — 컬럼 % 화 + 폰트 한 단계 축소 */
  .lostfound-v3 .lostfound-table__col--name { width: 22%; }
  .lostfound-v3 .lostfound-table__col--dept { width: 22%; }
  .lostfound-v3 .lostfound-table__col--tel { width: 22%; }
  .lostfound-v3 .lostfound-table__col--place { width: 34%; }
  .lostfound-v3 .lostfound-table tbody td {
    font-size: var(--ds-font-size-17);
    padding: var(--ds-number-8);
  }

  /* LOST112 카드 */
  .lostfound-v3 .lostfound-callout {
    gap: var(--ds-number-12);
    padding: var(--ds-number-10) var(--ds-number-16);
  }
  .lostfound-v3 .lostfound-callout__list li {
    font-size: var(--ds-font-size-16);
  }
}

/* 모바일 (≤767px) */
@media (max-width: 767px) {
  .lostfound-v3 .lostfound-section {
    margin-bottom: var(--ds-number-20);
  }

  .lostfound-v3 .lostfound-section .ds-section-header__title {
    margin-bottom: var(--ds-number-10);
    font-size: var(--ds-font-size-20); /* PC 24 → 모바일 20 */
  }

  /* 스텝 카드: 4-col → 1-col 세로 stacking, arrow는 90도 회전 */
  .lostfound-v3 .lostfound-step-cards {
    flex-direction: column;
    gap: var(--ds-number-2);
  }
  .lostfound-v3 .lostfound-step-card {
    width: 100%;
    height: auto;
    min-height: auto;
    padding: var(--ds-number-8) var(--ds-number-10);
    gap: var(--ds-number-4);
  }
  .lostfound-v3 .lostfound-step-card__num {
    font-size: var(--ds-font-size-12); /* 스텝 번호 캡션 */
  }
  .lostfound-v3 .lostfound-step-card__title {
    font-size: var(--ds-font-size-18); /* 스텝 카드 제목 */
  }
  .lostfound-v3 .lostfound-step-card__desc {
    font-size: var(--ds-font-size-13); /* 스텝 설명 */
  }
  .lostfound-v3 .lostfound-step-card__desc br {
    display: none;
  }
  .lostfound-v3 .lostfound-step-card__arrow {
    align-self: center;
    transform: rotate(90deg);
    width: 28px;
    height: 28px;
  }

  /* 보관 기간 안내: 가로 → 세로 */
  .lostfound-v3 .lostfound-info-box {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-number-8);
    padding: var(--ds-number-10) var(--ds-number-12);
  }
  .lostfound-v3 .lostfound-info-box__icon {
    width: 64px;
    height: 64px;
  }
  .lostfound-v3 .lostfound-info-box__title {
    font-size: var(--ds-font-size-17); /* 보관기간 박스 제목 */
  }
  .lostfound-v3 .lostfound-info-box__list li {
    font-size: var(--ds-font-size-14); /* 보관기간 리스트 항목 */
  }

  /* 유의사항: 가로 → 세로 */
  .lostfound-v3 .lostfound-notice {
    flex-direction: column;
    gap: var(--ds-number-6);
    padding: var(--ds-number-8) var(--ds-number-10);
  }
  .lostfound-v3 .lostfound-notice__title {
    font-size: var(--ds-font-size-16); /* 유의사항 제목 */
  }
  .lostfound-v3 .lostfound-notice__list {
    padding-left: var(--ds-number-10);
  }
  .lostfound-v3 .lostfound-notice__list li {
    font-size: var(--ds-font-size-13); /* 유의사항 항목 */
  }

  /* 테이블: PC 표 형태 유지 + 모바일 좌/우 가로 스크롤.
     ※ 비스코프 레거시 .lostfound-table 카드 규칙(thead:none·tr:grid·td:block·col2:none, ≈1089~1124행)이
        끼어들어 표가 깨지므로, v3 스코프에서 정상 테이블 디스플레이로 복원. */
  .lostfound-v3 .ds-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox: 스크롤바 숨김(스와이프 스크롤은 유지) */
    -ms-overflow-style: none;       /* IE/Edge */
  }
  .lostfound-v3 .ds-table-wrap::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .lostfound-v3 .lostfound-table {
    display: table;
    width: auto;
    min-width: 600px;               /* PC 표 폭 유지 → 좁은 화면은 가로 스크롤 */
  }
  .lostfound-v3 .lostfound-table colgroup { display: table-column-group; }
  .lostfound-v3 .lostfound-table thead { display: table-header-group; }
  .lostfound-v3 .lostfound-table tbody { display: table-row-group; }
  .lostfound-v3 .lostfound-table tbody tr { display: table-row; }
  .lostfound-v3 .lostfound-table tbody td:nth-child(2) { display: table-cell; } /* 담당부서 다시 표시 */
  .lostfound-v3 .lostfound-table thead th {
    font-size: var(--ds-font-size-14); /* 테이블 헤더 */
    padding: var(--ds-number-8);
  }
  .lostfound-v3 .lostfound-table tbody td {
    display: table-cell;
    text-align: center;
    border: 0;
    border-bottom: 1px solid var(--ds-color-gray-30);
    font-size: var(--ds-font-size-14); /* 테이블 본문 */
    padding: var(--ds-number-7) var(--ds-number-8);
  }

  /* LOST112 카드: 가로 → 세로 */
  .lostfound-v3 .lostfound-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-number-10);
    padding: var(--ds-number-10) var(--ds-number-12);
  }
  .lostfound-v3 .lostfound-callout__brand {
    align-self: center;
    width: 120px;
    height: 120px;
  }
  .lostfound-v3 .lostfound-callout__brand-circle {
    left: 5px;
    top: 5px;
    width: 110px;
    height: 110px;
  }
  /* LOST112 이미지는 컨테이너 비율로 자동 축소 (max-width 80%) */
  .lostfound-v3 .lostfound-callout__brand-link {
    right: 0;
    bottom: 0;
    width: 28px;
    height: 28px;
  }
  .lostfound-v3 .lostfound-callout__list li {
    font-size: var(--ds-font-size-14); /* callout 리스트 항목 */
  }
  .lostfound-v3 .lostfound-callout__btn {
    width: 100%;
    height: 44px;
    justify-content: center;
    font-size: var(--ds-font-size-13); /* 버튼 */
  }
}


/* ════════════════════════════════════════════════════════════════
   PAGE: MNU-U-100302 Q&A 목록 (wrapper `.qa-board-list-v2`)
   적용: shared/publishing/fo/pages/소통참여_MNU-U-100000/고객문의_MNU-U-100300/MNU-U-100302_QA목록_design_v2.html
   참고: ggac.or.kr 게시판 패턴 (PC) + seoulfilmcenter.com 카드 패턴 (Mobile)

   v1 대비 변경점:
   · 카테고리·답변상태를 .ds-tag 컴포넌트가 아닌 plain text로 노출
   · PC 6컬럼: 번호 | 카테고리 | 제목 | 아이디 | 등록일 | 답변상태
   · 태블릿(768~1199): 아이디 숨김 → 5컬럼
   · 모바일(~767): 표 폐기, 카드형 — 1행 카테고리·답변상태 / 2행 제목(2줄 말줄임) / 3행 등록일
   ════════════════════════════════════════════════════════════════ */


/* ===== PC: 6컬럼 그리드 ===== */
.qa-board-list-v2 .ds-board-list__head,
.qa-board-list-v2 .ds-board-list__item {
  grid-template-columns: 7rem 12rem 1fr 10rem 11rem 9rem;
}

/* 카테고리·답변상태: 가운데 정렬만. 폰트 크기·색상은 제목과 동일(.ds-board-list__item 디폴트 상속) */
.qa-board-list-v2 .ds-board-list__category,
.qa-board-list-v2 .ds-board-list__status {
  text-align: center;
}

/* 아이디 셀: 가운데 정렬 + 서브 톤 (기존 게시판 관행 유지) */
.qa-board-list-v2 .ds-board-list__author {
  text-align: center;
  font-size: var(--ds-pc-font-size-body-xsmall);
  color: var(--ds-light-color-text-subtle);
}

/* 제목 셀: grid 셀 안 한 줄 말줄임 (min-width:0 필수) */
.qa-board-list-v2 .ds-board-list__title {
  min-width: 0;
}
.qa-board-list-v2 .ds-board-list__title-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ===== 태블릿 (768~1199px): 아이디 숨김 → 5컬럼 ===== */
@media (min-width: 768px) and (max-width: 1199px) {
  .qa-board-list-v2 .ds-board-list__head,
  .qa-board-list-v2 .ds-board-list__item {
    grid-template-columns: 7rem 12rem 1fr 11rem 9rem;
  }
  .qa-board-list-v2 .ds-board-list__author {
    display: none;
  }
}


/* ===== 모바일 (~767px): 표 폐기, 3행 카드 레이아웃 (seoulfilmcenter 패턴)
   1행: 카테고리 태그(좌)
   2행: 제목 (2줄 말줄임)
   3행: 아이디  등록일  답변상태  — 좌측부터 한 줄로 인접 노출 (구분자 없음)  ===== */
@media (max-width: 767px) {
  .qa-board-list-v2 .ds-board-list__head {
    display: none;
  }
  .qa-board-list-v2 .ds-board-list__item {
    display: grid;
    grid-template-columns: auto auto auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--ds-number-5);
    row-gap: var(--ds-number-4);
    padding-block: var(--ds-number-9);
  }
  /* 번호만 모바일 미노출 (아이디는 3행에서 노출) */
  .qa-board-list-v2 .ds-board-list__num {
    display: none;
  }
  /* 1행: 카테고리 — 좌측 정렬된 태그 */
  .qa-board-list-v2 .ds-board-list__category {
    grid-row: 1;
    grid-column: 1 / -1;
    text-align: left;
  }
  /* 2행: 제목 — 2줄 말줄임, 전체 너비 */
  .qa-board-list-v2 .ds-board-list__title {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    font-size: var(--ds-mobile-font-size-body-medium);
  }
  .qa-board-list-v2 .ds-board-list__title-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: var(--ds-typo-line-height-body);
  }
  /* 3행: 아이디 · 등록일 · 답변상태 — 모두 좌측부터 인접 (구분자 없음, column-gap만) */
  .qa-board-list-v2 .ds-board-list__author,
  .qa-board-list-v2 .ds-board-list__date,
  .qa-board-list-v2 .ds-board-list__status {
    grid-row: 3;
    text-align: left;
    font-size: var(--ds-mobile-font-size-body-xsmall);
    color: var(--ds-light-color-text-subtle);
  }
  .qa-board-list-v2 .ds-board-list__author { grid-column: 1; }
  .qa-board-list-v2 .ds-board-list__date   { grid-column: 2; }
  .qa-board-list-v2 .ds-board-list__status { grid-column: 3; }

  /* 글쓰기 버튼: DS mobile small 버튼 padding-inline 6px 기본값이 너무 좁음 → 16px로 확장 */
  .qa-list-v2 .ds-board-list__top .ds-btn--s {
    padding-inline: var(--ds-number-8);
  }
}

/* ===== 대관문의 태그 — brand-orange가 brand-red와 hue 충돌 → brand-yellow와 color-mix하여 더 노란-주황 톤으로 차별화 ===== */
.qa-list-v2 .ds-tag.qa-tag-rental {
  --ds-comp-color: color-mix(in srgb, var(--ds-color-brand-orange) 55%, var(--ds-color-brand-yellow) 45%);
}

/* ===== 결제문의 태그 — brand-yellow 배경(12% tint) 유지 + 텍스트만 yellow 계열의 진한 톤(yellow-aa)으로 override (yellow 본질적 contrast 한계 보완) ===== */
.qa-list-v2 .ds-tag.qa-tag-payment {
  color: var(--ds-color-brand-yellow-aa);
}

/* === source: pfmc-page-v2.css === */
/* 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 */
.sub-page-wrap > .ds-tab:first-child {
  margin-top: 5rem;                                        /* 50px */
}
/* TAB ↔ 다음 요소: PC 50 / 태블릿 28 / 모바일 16 */
.sub-page-wrap > .ds-tab + *,
.sub-page-wrap > .page-header__select + * {
  margin-top: 5rem;                                        /* 50px */
}
@media (max-width: 1199px) {
  .sub-page-wrap > .ds-tab:first-child { margin-top: var(--ds-number-14); }
  .sub-page-wrap > .ds-tab + *,
  .sub-page-wrap > .page-header__select + * { margin-top: var(--ds-number-14); }
}
@media (max-width: 767px) {
  .sub-page-wrap > .ds-tab:first-child { margin-top: var(--ds-number-8); }
  .sub-page-wrap > .ds-tab + *,
  .sub-page-wrap > .page-header__select + * { margin-top: var(--ds-number-8); }
}


/* ==================== 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: 3fr 7fr;
  gap: var(--ds-number-20);                              /* 40px */
  align-items: stretch;                                  /* 콘텐츠 영역을 포스터 높이만큼 확장 → CTA 하단 정렬 */
}

/* ── 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 {
  position: sticky;
  top: var(--ds-number-10);                              /* 20px — 스크롤 시 따라감 */
  border-radius: var(--ds-radius-large);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  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: var(--ds-number-8);                               /* 16px */
}


/* (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: 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;
}
/* 히어로 본문: 포스터(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;
  gap: var(--ds-number-3);
  margin-bottom: var(--ds-number-4);
}
.pfmc-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--ds-number-8);
}
.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-info-list__row:last-child {
  border-bottom: none;
}
.pfmc-info-list__label {
  width: 9rem;                                           /* 90px — 라벨 고정 너비 */
  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-info-list__value {
  font-size: var(--ds-pc-font-size-body-small);
  color: var(--ds-light-color-text-basic);
  line-height: 1.5;
}

/* ==================== 7. 공연·전시 상세 — CTA · 종료안내 · 콘텐츠섹션 ==================== */
/* CTA + 공유 버튼 영역 — margin-top:auto로 포스터 하단 정렬 */
.pfmc-detail-cta {
  display: flex;
  align-items: center;
  gap: var(--ds-number-6);
  margin-top: auto;
}
/* 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);
}
/* 모바일 플로팅 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%;
  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;
}

/* ==================== 13. 아카이브 상세 — 사진 갤러리 ==================== */
.archive-gallery {
  position: relative;
}
.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 */
}

/* 웹진 보러가기 — .ds-btn에 line-height가 없어 페이지 상속 줄간격으로 높이가 변동.
   line-height 고정으로 예술인 신청 버튼과 높이 통일 */
.webzine-cta {
  line-height: 1;
}

/* 카드 메타 그룹 (기간 + 장소 묶음) — 공고목록 패턴 통일 */
.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: 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 사용. 탭 자체는 page-header 가이드 따라 hidden */
  .pfmc-info .ds-tab {
    margin-top: var(--ds-mobile-padding-7, 1.8rem);
    margin-bottom: var(--ds-mobile-padding-7, 1.8rem);
  }
  .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 .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);
  }
}

/* === source: webzine-list-v2.css === */
/* ==================== 웹진 목록 v2 (MNU-U-100501)
   Layout — Card List 패턴 적용 (preview/layout.js renderLayoutCardList 참고)
   ==================== */

/* 웹진 그리드: row-gap 7rem(70px) / column-gap 4.5rem(45px) 고정 */
.webzine-grid.ds-card-grid--3 {
  row-gap: 7rem;
  column-gap: 4.5rem;
}

/* 웹진 카드: 썸네일 7:5 가로 포스터 비율 (실제 표지 이미지 831×597 ≈ 1.392 = 7/5 와 일치 — 잘림 없음) */
.webzine-card .ds-card__thumb {
  aspect-ratio: 7 / 5;
  background-color: #eef2f7;
}

/* 웹진 카드: 포스터 ↔ 타이틀 간격 넓힘 (ds-card 기본 14px → 24px) */
.webzine-card.ds-card {
  gap: 2.4rem;
}

/* 웹진 카드: h3 제목 margin 리셋 (브라우저 기본값 제거) */
.webzine-card .ds-card__title {
  margin: 0;
}

/* 웹진 그리드: 태블릿 2열 (DS 기본 1열 → 2열 강제) */
@media (max-width: 1199px) {
  .webzine-grid.ds-card-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 웹진 그리드: 모바일 1열 (태블릿 룰의 cascade 차단 — .webzine-grid 셀렉터가 .ds-card-grid--3 보다 specificity 높아 DS 모바일 룰을 못 이김) */
@media (max-width: 767px) {
  .webzine-grid.ds-card-grid--3 {
    grid-template-columns: 1fr;
  }
}

/* 웹진 no-image 플레이스홀더 — 중앙 로고 (실제 이미지 사용 시 미적용) */
.webzine-card .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: 32%;
  max-height: 22%;
  object-fit: contain;
}

/* -- [간격 통일] 분실물센터(.lostfound-v3) -- 탭 ↔ 콘텐츠 50/28/28 --
   CMS 등록본 맨 위 <link>가 .sub-page-wrap 직계 형제로 끼어 글로벌 인접 규칙 미적용 → 직접 보정.
   모바일은 사용자 지정값 28(케이스 B 기본 16 대신). 다른 페이지 영향 없음. */
.sub-page-wrap > .lostfound-v3 { margin-top: 5rem; }                                            /* 50 -- PC */
@media (max-width: 1199px) { .sub-page-wrap > .lostfound-v3 { margin-top: var(--ds-number-14); } } /* 28 -- 태블릿 */
@media (max-width: 767px)  { .sub-page-wrap > .lostfound-v3 { margin-top: var(--ds-number-14); } } /* 28 -- 모바일(사용자 지정) */