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

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


/* ==================== 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 규칙 복제.
   bbs_view.jsp는 공지글(ntcPstYn=Y)에 .management-v2를 부여 → 채용·입찰 상세 '공지' 태그에 적용.
   Q&A(qna)는 .management-v2 미부여 + 태그를 title-row에 유지하므로 영향 없음 */
.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);
}
.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 상하 */
}
.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);
}

/* 하단 버튼 그룹 */
.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;
}


/* ==================== 후원메세나 (MNU-U-100400) ====================
   외부 시안 컨버전. 폰트는 Pretendard 통일(monospace 패밀리 미선언 → body 상속).
   골드 액센트(#FDB812)는 DS warning(#9e6a00 amber)과 시각이 다른 페이지 전용
   → 로컬 변수 `--dn-accent-gold`로 분리. */

/* ── HERO BANNER (WAT 브랜드 소개) ── */
.dn-hero {
  width: 100%;
  padding: 3.2rem 0 7.2rem;
}
.dn-hero__inner {
  max-width: 128rem;
  margin: 0 auto;
  padding: 0 3rem;
  text-align: center;
}
.dn-hero__copy {
  max-width: 76rem;
  margin: 0 auto;
}
.dn-hero__headline {
  font-size: 4.8rem;
  font-weight: 700;
  color: #000;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 3.6rem;
  text-wrap: pretty;
}
.dn-hero__wat {
  font-weight: 800;
  color: #000;
  letter-spacing: -0.04em;
  margin-right: 0.6rem;
}
.dn-hero__equation {
  display: inline-flex;
  align-items: baseline;
  gap: 0.8rem;
  font-size: 1.7rem;
  font-weight: 500;
  color: #000;
  margin: 0 0 3.6rem;
  padding: 1.2rem 2.2rem;
  background: var(--ds-color-gray-5, #f6f7f9);
  border-radius: 999px;
  letter-spacing: -0.005em;
}
.dn-hero__equation strong {
  font-weight: 700;
  color: #000;
}
.dn-hero__equation em {
  font-style: normal;
  font-weight: 600;
  color: #000;
}
.dn-hero__slogan {
  font-size: 2.6rem;
  font-weight: 600;
  color: #000;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin: 0 0 2.4rem;
}
.dn-hero__lede {
  font-size: 1.7rem;
  line-height: 1.7;
  color: #000;
  letter-spacing: -0.005em;
  margin: 0 auto;
  max-width: none;
  white-space: nowrap;
  text-wrap: pretty;
}
.dn-hero__lede strong {
  color: #000;
  font-weight: 700;
}

@media (max-width: 768px) {
  .dn-hero { padding: 1.6rem 0 3.2rem; }
  .dn-hero__inner { padding: 0 1.6rem; }
  .dn-hero__headline { font-size: 3.6rem; }
  .dn-hero__equation { font-size: 1.4rem; padding: 1rem 1.6rem; gap: 0.6rem; }
  .dn-hero__slogan { font-size: 1.9rem; }
  .dn-hero__lede { white-space: normal; font-size: 1.4rem; max-width: 60rem; }
}

@media (max-width: 480px) {
  .dn-hero__headline { font-size: 2.8rem; }
  .dn-hero__slogan { font-size: 1.7rem; }
}

.dn-wrap {
  --dn-accent-gold: #FDB812;
  max-width: 108rem;                                       /* 1080px */
  margin: 0 auto;
  padding: 6rem 3rem 12rem;                                /* 60 / 30 / 120 */
}
.dn-wrap > section + section { margin-top: 9.6rem; }       /* 96px */

/* ── 섹션 헤더 ── */
.dn-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--ds-number-8);
  margin-bottom: var(--ds-number-14);
  padding-bottom: 1.4rem;
  border-bottom: 2px solid var(--ds-color-gray-90);
}
.dn-section__num {
  font-size: 1.3rem;
  color: var(--ds-color-brand-blue);
  font-weight: var(--ds-typo-font-weight-bold);
  letter-spacing: 0.06em;
}
.dn-section__title {
  font-size: 2.8rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.02em;
  margin: 0;
}
.dn-section__sub {
  font-size: 1.4rem;
  color: var(--ds-color-gray-60);
  margin-left: auto;
  letter-spacing: -0.01em;
}

/* ── 01. Why 카드 그리드 ── */
.dn-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-number-10);
}
.dn-why-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-large);
  padding: 4rem 2.4rem 3.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.dn-why-card:hover {
  border-color: var(--ds-color-brand-blue);
  transform: translateY(-2px);
  box-shadow: 0 1.2rem 3rem -1.8rem rgba(2, 123, 193, 0.35);
}
.dn-why-card__num {
  display: block;
  font-size: 1.2rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-40);
  letter-spacing: 0.16em;
  margin-bottom: 1.8rem;
}
.dn-why-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-number-32);                              /* 64px */
  height: var(--ds-number-32);
  border-radius: var(--ds-radius-xlarge);
  background: color-mix(in srgb, var(--ds-color-brand-blue) 10%, transparent);
  color: var(--ds-color-brand-blue);
  margin-bottom: 2.4rem;
}
.dn-why-card:nth-child(2) .dn-why-card__icon {
  background: color-mix(in srgb, var(--ds-color-brand-orange) 12%, transparent);
  color: var(--ds-color-brand-orange);
}
.dn-why-card:nth-child(3) .dn-why-card__icon {
  background: rgba(201, 162, 39, 0.14);
  color: #C9A227;
}
.dn-why-card__title {
  font-size: 1.8rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.015em;
  margin: 0 0 var(--ds-number-5);
}
.dn-why-card__desc {
  font-size: 1.45rem;
  line-height: 1.65;
  color: var(--ds-color-gray-70);
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: pretty;
}

/* ── 02. 후원금 사용처 카드 (B타입) ── */
.dn-usage-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-number-12);
}
.dn-usage-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-xlarge);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.dn-usage-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1.8rem 4rem -2.2rem rgba(0, 0, 0, 0.22);
  border-color: transparent;
}
.dn-usage-card__body {
  padding: 3.2rem;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-4);
}
.dn-usage-card__num {
  font-size: 1.1rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-50);
  letter-spacing: 0.14em;
  margin-bottom: var(--ds-number-2);
}
.dn-usage-card__title {
  font-size: 2.2rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.02em;
  margin: 0 0 var(--ds-number-4);
}
.dn-usage-card__desc {
  font-size: 1.45rem;
  line-height: 1.65;
  color: var(--ds-color-gray-70);
  margin: 0 0 1.4rem;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.dn-usage-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-number-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.dn-usage-card__tags li {
  font-size: 1.2rem;
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-color-gray-70);
  padding: 0.4rem var(--ds-number-5);
  background: var(--ds-color-gray-5);
  border-radius: var(--ds-radius-max);
}

/* ── 01. 후원이 만드는 변화 — 세로 스택(상하 배치) ── */
.dn-impact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4.8rem;
  align-items: start;
}
.dn-impact__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dn-impact__sub {
  position: relative;
  padding-left: 1.6rem;
  margin: 0 0 2.4rem;
  font-size: 2.2rem;
  font-weight: 700;
  color: #000;
  letter-spacing: -0.015em;
}
.dn-impact__sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8rem;
  width: 0.5rem;
  height: 2rem;
  background: #000;
  border-radius: 0.2rem;
}
/* 사용처 카드 그리드 — 2×2 배치 */
.dn-impact .dn-usage-cards {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
  .dn-impact .dn-usage-cards { grid-template-columns: 1fr; }
}

/* 사용처 — 에디토리얼 행 분할형 (카드 X) */
.dn-usage-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ds-color-gray-10);
}
.dn-usage-flow__item {
  display: grid;
  grid-template-columns: minmax(20rem, 26rem) 1fr;
  align-items: center;
  gap: var(--ds-number-12);
  padding: 2.8rem 0;
  border-bottom: 1px solid var(--ds-color-gray-10);
}
.dn-usage-flow__head {
  display: flex;
  align-items: center;
  gap: var(--ds-number-6);
  min-width: 0;
}
.dn-usage-flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  flex-shrink: 0;
  color: var(--ds-color-brand-blue);
}
.dn-usage-flow__icon svg {
  width: 100%;
  height: 100%;
}
.dn-usage-flow__name {
  font-size: 1.9rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.02em;
  margin: 0;
}
.dn-usage-flow__desc {
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--ds-color-gray-70);
  margin: 0;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
@media (max-width: 768px) {
  .dn-usage-flow__item {
    grid-template-columns: 1fr;
    gap: var(--ds-number-4);
    padding: 2.2rem 0;
  }
  .dn-usage-flow__icon { width: 3.6rem; height: 3.6rem; }
  .dn-usage-flow__name { font-size: 1.7rem; }
}

/* 좌측 — 왜 후원? 에디토리얼 타이포그래피 (카드 X) */
.dn-why-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.dn-why-item {
  position: relative;
  padding: 0.4rem 3rem;
  display: flex;
  flex-direction: column;
}
.dn-why-item:first-child { padding-left: 0; }
.dn-why-item:last-child { padding-right: 0; }
.dn-why-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1.6rem;
  bottom: 1.6rem;
  width: 1px;
  background: var(--ds-color-gray-10);
}
.dn-why-item--orange { --why-accent: #dc521e; }
.dn-why-item--blue   { --why-accent: #027bc1; }
.dn-why-item--green  { --why-accent: #2c8f5d; }

.dn-why-item__num {
  display: block;
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--why-accent, #000);
  letter-spacing: -0.04em;
  margin-bottom: 1.4rem;
}
.dn-why-item__title {
  position: relative;
  font-size: 2.2rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 1.6rem;
  padding-bottom: 1.4rem;
  letter-spacing: -0.025em;
  line-height: 1.3;
}
.dn-why-item__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.2rem;
  height: 0.3rem;
  background: var(--why-accent, #000);
  border-radius: 0.2rem;
}
.dn-why-item__desc {
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--ds-color-gray-70);
  margin: 0;
  letter-spacing: -0.005em;
}
@media (max-width: 900px) {
  .dn-why-flow { grid-template-columns: 1fr; }
  .dn-why-item { padding: 2.4rem 0; }
  .dn-why-item:first-child { padding-top: 0; }
  .dn-why-item:not(:last-child) { border-bottom: 1px solid var(--ds-color-gray-10); }
  .dn-why-item:not(:last-child)::after { display: none; }
  .dn-why-item__num { font-size: 3.2rem; margin-bottom: 0.8rem; }
}

@media (max-width: 1024px) {
  .dn-impact { gap: 3.2rem; }
}

/* ── 02. 멤버십 종류 & 혜택 (그리드) ── */
.dn-mem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.dn-mem-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3.6rem 2.8rem 3.2rem;
  background: #fff;
  border: 1px solid var(--ds-color-gray-10);
  border-radius: 2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dn-mem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.08);
  border-color: var(--ds-color-gray-30);
}
.dn-mem-card--featured {
  background: #000;
  color: #fff;
  border-color: #000;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.18);
}
.dn-mem-card--featured:hover {
  border-color: #000;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.22);
}
.dn-mem-card--featured::before {
  content: "BEST";
  position: absolute;
  top: 2rem;
  right: 2rem;
  padding: 0.4rem 0.8rem;
  background: #fff;
  color: #000;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 0.4rem;
}
.dn-mem-card__head {
  margin-bottom: 2.4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--ds-color-gray-10);
}
.dn-mem-card--featured .dn-mem-card__head {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
.dn-mem-card__name {
  font-size: 2.2rem;
  font-weight: 800;
  color: inherit;
  margin: 0 0 1.4rem;
  letter-spacing: -0.025em;
  line-height: 1.2;
  min-height: 2.6rem;
}
.dn-mem-card__amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: inherit;
  margin: 0 0 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.1rem;
}
.dn-mem-card__sep {
  display: inline-block;
  margin: 0 0.6rem;
  color: var(--ds-color-gray-30);
  font-weight: 300;
}
.dn-mem-card--featured .dn-mem-card__sep {
  color: rgba(255, 255, 255, 0.3);
}
.dn-mem-card__catch {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--ds-color-gray-70);
  margin: 0;
  letter-spacing: -0.005em;
  min-height: 4.4rem;
}
.dn-mem-card--featured .dn-mem-card__catch {
  color: rgba(255, 255, 255, 0.72);
}
.dn-mem-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}
.dn-mem-card__list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 2.2rem;
  font-size: 1.3rem;
  line-height: 1.5;
  color: inherit;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dn-mem-card__list li.is-multiline {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.dn-mem-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.9rem;
  width: 1.4rem;
  height: 1.4rem;
  background: #000;
  color: #fff;
  border-radius: 50%;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4rem;
  text-align: center;
}
.dn-mem-card--featured .dn-mem-card__list li::before {
  background: #fff;
  color: #000;
}
.dn-mem-card__note {
  margin: 1.6rem 0 0;
  font-size: 1.3rem;
  color: var(--ds-color-gray-50);
  letter-spacing: -0.005em;
}
.dn-mem-card--featured .dn-mem-card__note {
  color: rgba(255, 255, 255, 0.6);
}

/* 멤버십 카드 [신청하기] 버튼 — 카드 하단 고정 */
.dn-mem-card__cta {
  margin-top: auto;                              /* 카드 하단으로 정렬 */
  align-self: stretch;
}
.dn-mem-card__list + .dn-mem-card__cta,
.dn-mem-card__note + .dn-mem-card__cta {
  margin-top: 4rem;                              /* 40px — 리스트/주석 ↔ 버튼 간격 */
}
/* featured 카드(검은 배경)에서 흰색 버튼으로 대비 강화 */
.dn-mem-card--featured .dn-mem-card__cta.ds-btn--primary {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.dn-mem-card--featured .dn-mem-card__cta.ds-btn--primary:hover {
  background: var(--ds-color-gray-10);
  border-color: var(--ds-color-gray-10);
}

/* 30% 할인 중복 안내 */
.dn-mem-notice {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  margin-top: 3.2rem;
  padding: 2rem 2.4rem;
  background: var(--ds-color-gray-5);
  border-radius: 1.2rem;
}
.dn-mem-notice__icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  color: #000;
  margin-top: 0.1rem;
}
.dn-mem-notice__text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #000;
  letter-spacing: -0.005em;
}
.dn-mem-notice__text strong { font-weight: 700; }

/* 세액공제 혜택 */
.dn-tax {
  margin-top: 4rem;
  padding: 4rem;
  background: #fafbfc;
  border: 1px solid var(--ds-color-gray-10);
  border-radius: 2rem;
}
.dn-tax__title {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 2rem;
  font-weight: 800;
  color: #000;
  margin: 0 0 2.8rem;
  letter-spacing: -0.025em;
}
.dn-tax__title::before {
  content: "₩";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  background: #000;
  color: #fff;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 800;
}
.dn-tax__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
}
.dn-tax__block {
  padding: 2.4rem;
  background: #fff;
  border-radius: 1.4rem;
  border: 1px solid var(--ds-color-gray-10);
}
.dn-tax__block-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ds-color-gray-70);
  margin: 0 0 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dn-tax__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dn-tax__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #000;
  border-bottom: 1px solid var(--ds-color-gray-10);
}
.dn-tax__list li:last-child { border-bottom: 0; }
.dn-tax__label {
  color: var(--ds-color-gray-70);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.dn-tax__value {
  font-size: 2rem;
  font-weight: 800;
  color: #000;
  letter-spacing: -0.015em;
}
.dn-tax__list--bullet li {
  display: list-item;
  list-style: none;
  position: relative;
  padding: 0.6rem 0 0.6rem 2.4rem;
  border-bottom: 0;
  font-size: 1.4rem;
  letter-spacing: -0.005em;
}
.dn-tax__list--bullet li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 1.6rem;
  height: 1.6rem;
  background: #000;
  color: #fff;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6rem;
  text-align: center;
}

@media (max-width: 1024px) {
  .dn-mem-grid { grid-template-columns: repeat(2, 1fr); }
  .dn-tax { padding: 3rem; }
}

@media (max-width: 640px) {
  .dn-mem-grid { grid-template-columns: 1fr; }
  .dn-mem-card { padding: 2.8rem 2.4rem; }
  .dn-tax { padding: 2.4rem 2rem; }
  .dn-tax__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .dn-tax__block { padding: 2rem; }
}

/* ── (deprecated) 기존 단일 멤버십 카드 — 통합 그리드로 대체됨, 추후 정리 ── */
.dn-membership {
  background: #fff;
  border: 1px solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-large);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38rem;
}
.dn-membership__visual {
  position: relative;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(2, 123, 193, 0.55) 0%, rgba(2, 123, 193, 0) 55%),
    radial-gradient(100% 120% at 85% 0%, rgba(220, 82, 30, 0.45) 0%, rgba(220, 82, 30, 0) 55%),
    radial-gradient(140% 120% at 50% 100%, rgba(255, 177, 20, 0.35) 0%, rgba(255, 177, 20, 0) 60%),
    linear-gradient(180deg, #ddeaf4 0%, #fff 100%);
  padding: 5.6rem 4.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 38rem;
}
.dn-membership__eyebrow {
  font-size: 1.2rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-brand-blue);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 var(--ds-number-8);
}
.dn-membership__title {
  font-size: 4rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 var(--ds-number-8);
}
.dn-membership__title strong {
  color: var(--ds-color-brand-blue);
  font-weight: var(--ds-typo-font-weight-bold);
}
.dn-membership__lede {
  font-size: 1.7rem;
  line-height: 1.65;
  color: var(--ds-color-gray-80);
  margin: 0;
  max-width: 44ch;
  letter-spacing: -0.01em;
}
.dn-membership__decor {
  position: absolute;
  right: -4rem;
  bottom: -4rem;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  border: 1px solid rgba(2, 123, 193, 0.18);
  opacity: 0.7;
  pointer-events: none;
}
.dn-membership__decor::before {
  content: '';
  position: absolute;
  inset: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(2, 123, 193, 0.18);
}
.dn-membership__decor::after {
  content: '';
  position: absolute;
  inset: 6rem;
  border-radius: 50%;
  border: 1px solid rgba(220, 82, 30, 0.18);
}
.dn-membership__panel {
  background: var(--ds-color-gray-90);
  color: #fff;
  padding: 5.6rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ds-number-14);
}
.dn-membership__type {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-4);
  font-size: 1.2rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--dn-accent-gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--ds-number-4);
}
.dn-membership__type::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  background: var(--dn-accent-gold);
  border-radius: 50%;
}
.dn-membership__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--ds-number-4);
  margin-bottom: 0.6rem;
}
.dn-membership__price {
  font-size: 5.6rem;
  font-weight: var(--ds-typo-font-weight-extrabold);
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
}
.dn-membership__currency {
  font-size: 2.2rem;
  font-weight: var(--ds-typo-font-weight-semibold);
  color: #fff;
}
.dn-membership__period {
  font-size: 1.4rem;
  color: var(--ds-color-gray-30);
  letter-spacing: 0.04em;
  margin-bottom: var(--ds-number-14);
}
.dn-membership__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-5);
  width: 100%;
  padding: 1.8rem var(--ds-number-12);
  background: var(--ds-color-brand-orange);
  color: #fff;
  font-size: 1.6rem;
  font-weight: var(--ds-typo-font-weight-bold);
  letter-spacing: -0.01em;
  text-decoration: none;
  border: none;
  border-radius: var(--ds-radius-small);
  transition: background 0.15s, transform 0.15s;
  cursor: pointer;
}
.dn-membership__cta:hover {
  background: color-mix(in srgb, var(--ds-color-brand-orange) 88%, #000);
  transform: translateY(-1px);
}
.dn-membership__cta-arrow {
  width: 1.8rem;
  height: 1.8rem;
  transition: transform 0.2s;
}
.dn-membership__cta:hover .dn-membership__cta-arrow {
  transform: translateX(0.4rem);
}
.dn-membership__hint {
  font-size: 1.2rem;
  color: var(--ds-color-gray-40);
  text-align: center;
  margin: var(--ds-number-6) 0 0;
  letter-spacing: -0.01em;
}

/* ── 04. 절차 (4 steps) ── */
.dn-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-number-8);
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}
.dn-step {
  background: #fff;
  border: 1px solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-large);
  padding: var(--ds-number-16) 2.8rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-7);
}
.dn-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--ds-color-brand-blue);
  color: #fff;
  font-size: 1.4rem;
  font-weight: var(--ds-typo-font-weight-bold);
}
.dn-step__title {
  font-size: 2rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.02em;
  margin: 0;
}
.dn-step__desc {
  font-size: 1.4rem;
  line-height: 1.65;
  color: var(--ds-color-gray-70);
  margin: 0;
  letter-spacing: -0.01em;
}
.dn-step__arrow {
  position: absolute;
  right: -1.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.8rem;
  height: 2.8rem;
  background: #fff;
  border: 1px solid var(--ds-color-gray-10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-gray-50);
  z-index: 2;
}
.dn-step:last-child .dn-step__arrow { display: none; }

/* ── 05. 혜택 (Benefit) ── */
.dn-benefit {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  border: 1px solid var(--ds-color-gray-10);
  border-radius: var(--ds-radius-large);
  overflow: hidden;
}
.dn-benefit__hero {
  background: var(--ds-color-gray-90);
  color: #fff;
  padding: 5.6rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.dn-benefit__hero::before {
  content: '30%';
  position: absolute;
  bottom: -5rem;
  right: -2rem;
  font-size: 24rem;
  font-weight: var(--ds-typo-font-weight-extrabold);
  line-height: 1;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.dn-benefit__label {
  font-size: 1.2rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--dn-accent-gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 var(--ds-number-8);
}
.dn-benefit__big {
  font-size: 6.8rem;
  font-weight: var(--ds-typo-font-weight-extrabold);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 var(--ds-number-6);
  position: relative;
  z-index: 1;
}
.dn-benefit__big small {
  font-size: 2.8rem;
  font-weight: var(--ds-typo-font-weight-semibold);
  vertical-align: middle;
  margin-left: 0.6rem;
  color: var(--ds-color-gray-30);
}
.dn-benefit__title {
  font-size: 1.8rem;
  font-weight: var(--ds-typo-font-weight-semibold);
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0;
  position: relative;
  z-index: 1;
}
.dn-benefit__list {
  background: #fff;
  padding: 4.8rem 4.4rem;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-10);
}
.dn-benefit-item {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--ds-number-7);
  align-items: start;
}
.dn-benefit-item__icon {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-brand-blue);
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.dn-benefit-item__title {
  font-size: 1.6rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.01em;
  margin: 0 0 var(--ds-number-2);
}
.dn-benefit-item__desc {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--ds-color-gray-70);
  margin: 0;
  letter-spacing: -0.01em;
}
.dn-benefit__notice {
  margin-top: var(--ds-number-8);
  background: #FFF7E6;
  border: 1px solid rgba(253, 184, 18, 0.2);
  border-left: 3px solid var(--dn-accent-gold);
  padding: 1.4rem 1.8rem;
  border-radius: var(--ds-radius-xsmall);
  display: flex;
  gap: var(--ds-number-5);
  align-items: flex-start;
}
.dn-benefit__notice-icon {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  color: #B07A00;
  margin-top: 0.1rem;
}
.dn-benefit__notice-text {
  font-size: 1.3rem;
  line-height: 1.65;
  color: #4A3A00;
  margin: 0;
  letter-spacing: -0.01em;
}
.dn-benefit__notice-text strong {
  color: var(--ds-color-gray-90);
  font-weight: var(--ds-typo-font-weight-bold);
}

/* ── 06. Final CTA + 문의 ── */
.dn-final { margin-top: 9.6rem; }
.dn-final__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--ds-number-10);
}
.dn-final__cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ds-number-16);
  padding: 4.4rem;
  border-radius: 2rem;
  text-decoration: none;
  min-height: 28rem;
  transition: transform 0.25s, box-shadow 0.25s;
  isolation: isolate;
  overflow: hidden;
}
.dn-final__cta--primary {
  background: var(--ds-color-gray-5);
  border: 1px solid var(--ds-color-gray-10);
  color: var(--ds-color-gray-90);
}
.dn-final__cta--primary::after {
  content: 'WAT';
  position: absolute;
  right: 3rem;
  bottom: -2.8rem;
  font-size: 18rem;
  font-weight: var(--ds-typo-font-weight-extrabold);
  color: rgba(220, 82, 30, 0.08);
  letter-spacing: -0.04em;
  z-index: -1;
  pointer-events: none;
}
.dn-final__cta--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 2.4rem 4.8rem -2.2rem rgba(0, 0, 0, 0.18);
}
.dn-final__cta--secondary {
  background: var(--ds-color-gray-5);
  border: 1px solid var(--ds-color-gray-10);
  color: var(--ds-color-gray-90);
  cursor: default;
}
.dn-final__eyebrow {
  font-size: 1.2rem;
  font-weight: var(--ds-typo-font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.7;
  margin: 0 0 1.4rem;
}
.dn-final__cta--primary .dn-final__eyebrow {
  color: var(--ds-color-brand-orange);
  opacity: 1;
}
.dn-final__title {
  font-size: 3rem;
  font-weight: var(--ds-typo-font-weight-bold);
  letter-spacing: -0.025em;
  margin: 0 0 var(--ds-number-6);
  line-height: 1.25;
}
.dn-final__desc {
  font-size: 1.5rem;
  line-height: 1.65;
  margin: 0;
  opacity: 0.78;
  letter-spacing: -0.005em;
}
.dn-final__arrow {
  position: absolute;
  right: 3.6rem;
  top: 3.6rem;
  width: 5.6rem;
  height: 5.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--ds-color-gray-20);
  border-radius: 50%;
  transition: transform 0.25s, background 0.25s, color 0.25s, border-color 0.25s;
}
.dn-final__cta--primary:hover .dn-final__arrow {
  background: var(--ds-color-brand-orange);
  border-color: transparent;
  color: #fff;
  transform: translate(0.2rem, -0.2rem);
}
.dn-final__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-7);
}
.dn-final__contact li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  align-items: baseline;
  padding: 1.4rem 0;
  border-top: 1px solid var(--ds-color-gray-10);
}
.dn-final__contact li:first-child {
  border-top: 2px solid var(--ds-color-gray-90);
}
.dn-final__contact-label {
  font-size: 1.1rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-50);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dn-final__contact-value {
  font-size: 2.2rem;
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.015em;
  text-decoration: none;
}
.dn-final__contact-value:hover { color: var(--ds-color-brand-blue); }
.dn-final__contact-value--email { font-size: 1.7rem; }

/* ── 반응형: 태블릿 (≤1199px) ── */
@media (max-width: 1199px) {
  .dn-membership { grid-template-columns: 1fr; }
  .dn-membership__visual { padding: 4rem 3.2rem; min-height: 24rem; }
  .dn-membership__panel { padding: 4rem 3.2rem; }
  .dn-membership__title { font-size: 3.2rem; }
  .dn-usage-cards { grid-template-columns: 1fr; }
  .dn-final__grid { grid-template-columns: 1fr; }
  .dn-final__cta { padding: 3.6rem 3.2rem; min-height: 22rem; }
  .dn-final__title { font-size: 2.6rem; }
}

/* ── 반응형: 모바일 (≤767px) ── */
@media (max-width: 767px) {
  .dn-wrap { padding: 3.2rem 1.6rem 8rem; }
  .dn-wrap > section + section { margin-top: 5.6rem; }

  .dn-section__head { flex-wrap: wrap; gap: var(--ds-number-3); }
  .dn-section__title { font-size: 2.2rem; }
  .dn-section__sub { margin-left: 0; flex-basis: 100%; font-size: 1.3rem; }

  .dn-why-grid { grid-template-columns: 1fr; gap: var(--ds-number-6); }
  .dn-why-card { padding: 2.2rem 1.6rem; }
  .dn-why-card__title { font-size: 1.7rem; }
  .dn-why-card__desc { font-size: 1.35rem; }
  .dn-why-card__icon { width: 4.8rem; height: 4.8rem; margin-bottom: 1.8rem; }

  .dn-usage-card__body { padding: 2.4rem 2rem; }

  .dn-steps { grid-template-columns: 1fr; gap: var(--ds-number-6); }
  .dn-step__arrow {
    right: 50%;
    top: auto;
    bottom: -2rem;
    transform: translateX(50%) rotate(90deg);
  }

  .dn-benefit { grid-template-columns: 1fr; }
  .dn-benefit__hero { padding: 4rem 3.2rem; }
  .dn-benefit__list { padding: 3.2rem 2.8rem; gap: var(--ds-number-8); }
  .dn-benefit__big { font-size: 5.6rem; }

  .dn-final__cta { padding: 2.8rem 2.2rem; min-height: 0; }
  .dn-final__title { font-size: 2.2rem; }
  .dn-final__arrow { display: none; }
  .dn-final__contact-value { font-size: 1.8rem; }
}

/* === 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 */
}

/* 카드 메타 그룹 (기간 + 장소 묶음) — 공고목록 패턴 통일 */
.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;
}

/* === source: webzine-list-v1.css === */
/* ==================== 웹진 목록 v1 (MNU-U-100501)
   V1 전용 오버라이드 — webzine-list-v2.css 다음에 마지막 로드
   ==================== */

/* 웹진 카드: 제목·한줄소개 1줄 말줄임 (V1 화면설계서 §10 명세) */
.webzine-card .ds-card__title,
.webzine-card .ds-card__desc {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}