/* foundation-page-v1.css
 * Generated by Phase 4 (safe-merge) for (재단소개_MNU-U-110000, v1)
 * Source CSS (in cascade order): foundation-page.css, community-page.css, pfmc-page-v2.css, foundation-page-v2.css
 */

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

/* ── TAB-NAV 간격 (공통가이드 v1.5.1) ──
   ※ 과거 `.sub-page-wrap { padding-bottom: 10rem }` 규칙은 v1.7.1 §5-3 위반으로 제거
     (DS `.sub-page-wrap { margin-bottom: 100/80/60 }`와 누적되어 PC 200 / 태블릿 180 / 모바일 160 발생) */
.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); }
}

/* ── 탭 영역 ── */
.about-tab {
  margin-bottom: var(--ds-pc-spacing-8, 4rem);
}

/* ── MNU-U-110201 언론보도 / 사회공헌 탭 (다중 탭 패널 간격 보정) ──
   공통가이드 §5-1 TAB-NAV↔FILTER: PC 50 / 태블릿 28 / 모바일 16
   `.sub-page-wrap > .page-header__select + *` 룰은 첫 패널(#tab-press)만 적용되므로
   사회공헌 패널(#tab-social)로 전환 시 간격이 사라지는 문제를 탭 margin-bottom으로 보정 (마진 콜랩스) */
.press-tab {
  margin-bottom: 5rem;                                     /* 50px */
}
@media (max-width: 1199px) {
  .press-tab { margin-bottom: var(--ds-number-14); }       /* 28px */
}
@media (max-width: 767px) {
  .press-tab { margin-bottom: var(--ds-number-8); }        /* 16px */
}

/* ── V02: 인사말 ── */
.about-greeting {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--ds-number-28, 5.6rem);
  align-items: start;
}

.about-greeting__photo {
  text-align: center;
}

.about-greeting__img-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  border-radius: var(--ds-radius-3, 12px);
  overflow: hidden;
  background-color: #eef2f7;
}

.about-greeting__img-wrap svg,
.about-greeting__img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-greeting__img-wrap img[src$="no-image-logo.png"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 40%;
  max-height: 30%;
  object-fit: contain;
}

.about-greeting__name {
  margin-top: var(--ds-pc-spacing-4, 1.6rem);
  font-size: var(--ds-pc-font-size-body-small, 1.4rem);
  color: var(--ds-light-color-text-subtler, #64748b);
  line-height: 1.6;
}

.about-greeting__name strong {
  display: block;
  font-size: var(--ds-pc-font-size-body-medium, 1.6rem);
  color: var(--ds-light-color-text-default, #1e293b);
  font-weight: 700;
}

.about-greeting__text {
  font-size: var(--ds-font-size-15, 1.5rem);
  line-height: 1.65;
  color: var(--ds-light-color-text-subtle, #475569);
}

.about-greeting__text p {
  margin-bottom: 0;
}

.about-greeting__text p + p {
  margin-top: 0.4rem;
}

.about-greeting__text p.about-greeting__opening {
  font-size: var(--ds-font-size-24, 2.4rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ds-light-color-text-default, #1e293b);
  margin-bottom: 5.6rem !important;
}

.about-greeting__opening + p {
  margin-top: 0 !important;
}

.about-greeting__highlight-name {
  font-size: var(--ds-font-size-28, 2.8rem);
  font-weight: 800;
}

.about-greeting__closing {
  margin-top: var(--ds-number-12, 2.4rem);
  color: var(--ds-light-color-text-subtle, #475569);
}

.about-greeting__sign {
  margin-top: var(--ds-number-8, 1.6rem);
  text-align: right;
  font-weight: 600;
  color: var(--ds-light-color-text-default, #1e293b);
  line-height: 1.6;
}

.about-divider {
  border: none;
  border-top: 1px solid var(--ds-light-color-border-default, #e2e8f0);
  margin: var(--ds-pc-spacing-12, 6rem) 0;
}

/* ── V03: 연혁 (오뚜기 스타일: 좌측 이미지 + 우측 연도/항목) ── */

.about-history__year {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 0 var(--ds-number-24, 4.8rem);
  align-items: start;
  padding: var(--ds-number-20, 4rem) 0;
  border-bottom: 1px solid var(--ds-color-gray-15, #e6e8ea);
}

.about-history__year:first-child {
  padding-top: 0;
}

.about-history__year:last-child {
  border-bottom: none;
}

/* 좌측 이미지 */
.about-history__img {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--ds-radius-2, 8px);
  overflow: hidden;
  background-color: #eef2f7;
}

.about-history__img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.about-history__img 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;
}

/* 우측 콘텐츠 */
.about-history__content {
  /* container */
}

/* 연도 라벨 */
.about-history__year-label {
  display: block;
  font-size: 4.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ds-color-primary-50, #027BC1);
  line-height: 1;
  margin-bottom: var(--ds-number-10, 2rem);
}

.about-history__list {
  padding: 0;
}

.about-history__item {
  display: flex;
  align-items: baseline;
  gap: var(--ds-number-6, 1.2rem);
  padding: var(--ds-number-4, 0.8rem) 0;
}

.about-history__date {
  flex-shrink: 0;
  min-width: 3rem;
  font-size: var(--ds-font-size-15, 1.5rem);
  font-weight: 700;
  color: var(--ds-light-color-text-basic, #1e2124);
}

.about-history__desc {
  font-size: var(--ds-font-size-15, 1.5rem);
  color: var(--ds-light-color-text-basic, #1e2124);
  line-height: 1.6;
}

/* ── V04: 조직도 ── */
.about-org__chart {
  max-width: 960px;
  margin: 0 auto var(--ds-pc-spacing-10, 4.8rem);
  overflow-x: auto;
}

.about-org__chart svg {
  width: 100%;
  height: auto;
  min-width: 700px;
}

.about-directory {
  margin-top: var(--ds-pc-spacing-8, 4rem);
}

.about-directory__contact {
  background: var(--ds-light-color-surface-gray-subtler, #f8fafc);
  border-radius: var(--ds-radius-3, 12px);
  padding: var(--ds-pc-spacing-5, 2rem) var(--ds-pc-spacing-6, 2.4rem);
  margin-bottom: var(--ds-pc-spacing-6, 2.4rem);
}

.about-directory__contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-pc-spacing-6, 2.4rem) var(--ds-pc-spacing-10, 4.8rem);
}

.about-directory__contact-item {
  display: flex;
  gap: var(--ds-pc-spacing-3, 1.2rem);
}

.about-directory__contact-item dt {
  font-weight: 600;
  color: var(--ds-light-color-text-default, #1e293b);
  font-size: var(--ds-pc-font-size-body-small, 1.4rem);
}

.about-directory__contact-item dd {
  font-size: var(--ds-pc-font-size-body-small, 1.4rem);
  color: var(--ds-light-color-text-subtle, #475569);
}

.about-directory__contact-item dd a {
  color: var(--ds-color-primary-50, #1a56db);
  text-decoration: none;
}

.about-directory__contact-item dd a:hover {
  text-decoration: underline;
}

.about-directory__accordion {
  margin-top: var(--ds-pc-spacing-4, 1.6rem);
}

.about-directory__accordion .ds-table {
  font-size: var(--ds-pc-font-size-body-small, 1.4rem);
}

.about-directory__accordion .ds-table a {
  color: var(--ds-color-primary-50, #1a56db);
  text-decoration: none;
}

.about-directory__accordion .ds-table a:hover {
  text-decoration: underline;
}

/* ── V05: CI (오뚜기 스타일) ── */
.about-ci-section {
  margin-bottom: var(--ds-number-24, 4.8rem);
}

.about-ci-section:last-child {
  margin-bottom: 0;
}

.about-ci-section__title {
  font-size: var(--ds-font-size-32, 3.2rem);
  font-weight: 800;
  color: var(--ds-light-color-text-basic, #1e2124);
  margin-bottom: var(--ds-number-14, 2.8rem);
}

/* CI 헤더 (타이틀 + 다운로드 버튼 한 줄) */
.about-ci-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-number-14, 2.8rem);
}

.about-ci-header .about-ci-section__title {
  margin-bottom: 0;
}

.about-ci-header__actions {
  display: flex;
  gap: var(--ds-number-4, 0.8rem);
}

/* 심볼 히어로 이미지 (격자 배경 + 가운데 정렬) */
.about-ci-symbol-hero {
  text-align: center;
  margin-bottom: var(--ds-number-20, 4rem);
  padding: var(--ds-number-16, 3.2rem);
  border-radius: var(--ds-radius-3, 12px);
  background:
    linear-gradient(var(--ds-color-gray-10, #ebedef) 1px, transparent 1px),
    linear-gradient(90deg, var(--ds-color-gray-10, #ebedef) 1px, transparent 1px);
  background-size: 2rem 2rem;
  background-color: #fff;
  border: 1px solid var(--ds-color-gray-10, #ebedef);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-ci-symbol-hero img {
  max-width: 60%;
  height: auto;
}

/* 로고 의미 (4열 그리드) */
.about-ci-meaning {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-number-20, 4rem);
  margin-top: var(--ds-number-8, 1.6rem);
}

.about-ci-meaning__item {
  text-align: center;
}

.about-ci-meaning__img {
  border-radius: var(--ds-radius-2, 8px);
  overflow: hidden;
  margin-bottom: var(--ds-number-5, 1rem);
  max-width: 160px;
  margin-left: auto;
  margin-right: auto;
}

.about-ci-meaning__img img {
  width: 100%;
  height: auto;
  display: block;
}

.about-ci-meaning__text {
  font-size: var(--ds-font-size-15, 1.5rem);
  line-height: 1.6;
  color: var(--ds-light-color-text-subtle, #475569);
}

.about-ci-meaning__text strong {
  display: block;
  font-size: var(--ds-font-size-17, 1.7rem);
  font-weight: 700;
  color: var(--ds-light-color-text-basic, #1e2124);
  margin-top: 0.2rem;
}

/* 시그니처 서브타이틀 */
.about-ci-subtitle {
  font-size: var(--ds-font-size-17, 1.7rem);
  font-weight: 700;
  color: var(--ds-light-color-text-basic, #1e2124);
  margin-top: var(--ds-number-12, 2.4rem);
  margin-bottom: var(--ds-number-6, 1.2rem);
}

.about-ci-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-number-10, 2rem);
}

.about-ci-logos--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* 그리드 배경 (오뚜기처럼 격자 패턴) */
.about-ci-logo-item__img--grid {
  background:
    linear-gradient(var(--ds-color-gray-10, #ebedef) 1px, transparent 1px),
    linear-gradient(90deg, var(--ds-color-gray-10, #ebedef) 1px, transparent 1px);
  background-size: 2rem 2rem;
  background-color: #fff;
  border: 1px solid var(--ds-color-gray-10, #ebedef);
}

.about-ci-logo-item__img {
  background: var(--ds-color-gray-5, #f4f5f6);
  border-radius: var(--ds-radius-2, 8px);
  padding: var(--ds-number-10, 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 5 / 4;
}

.about-ci-logo-item__img svg,
.about-ci-logo-item__img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.about-ci-logo-item__label {
  text-align: center;
  margin-top: var(--ds-number-4, 0.8rem);
  font-size: var(--ds-font-size-14, 1.4rem);
  font-weight: 500;
  color: var(--ds-color-gray-60, #5a6068);
}

/* 컬러 시스템 (좌측 블록 + 우측 설명) */
.about-ci-color-cards {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-6, 1.2rem);
}

.about-ci-color-card {
  display: grid;
  grid-template-columns: 42% 1fr;
}

.about-ci-color-card__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ds-number-14, 2.8rem) var(--ds-number-10, 2rem);
  color: #fff;
  text-align: center;
}

.about-ci-color-card__label {
  font-size: var(--ds-font-size-20, 2rem);
  font-weight: 800;
  letter-spacing: 0.05em;
}

.about-ci-color-card__spec {
  display: block;
  font-size: var(--ds-font-size-14, 1.4rem);
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.5;
}

.about-ci-color-card__desc {
  display: flex;
  align-items: center;
  padding: var(--ds-number-14, 2.8rem) var(--ds-number-16, 3.2rem);
  font-size: var(--ds-font-size-16, 1.6rem);
  line-height: 1.7;
  color: var(--ds-light-color-text-subtle, #475569);
}

/* ── V04: 직원 디렉토리 (탭 방식) ── */

/* 1차 탭: 라인 탭 좌측 정렬 */
.about-directory__tabs {
  margin-bottom: var(--ds-number-12, 2.4rem);
}

.about-directory__tabs .ds-tab__list {
  justify-content: flex-start;
}

/* 2차 탭: pill 탭 */
.about-directory__sub-tabs {
  margin-bottom: var(--ds-number-10, 2rem);
}

/* 테이블 너비 통일 */
.about-directory__table-wrap {
  margin-bottom: var(--ds-number-16, 3.2rem);
}

.about-directory__table-wrap:last-child {
  margin-bottom: 0;
}

.about-directory__table-wrap .ds-table {
  font-size: var(--ds-font-size-14, 1.4rem);
  table-layout: fixed;
  width: 100%;
}

.about-directory__table-wrap .ds-table th:nth-child(1),
.about-directory__table-wrap .ds-table td:nth-child(1) {
  width: 15%;
}

.about-directory__table-wrap .ds-table th:nth-child(2),
.about-directory__table-wrap .ds-table td:nth-child(2) {
  width: 25%;
}

.about-directory__table-wrap .ds-table th:nth-child(3),
.about-directory__table-wrap .ds-table td:nth-child(3) {
  width: 45%;
}

.about-directory__table-wrap .ds-table th:nth-child(4),
.about-directory__table-wrap .ds-table td:nth-child(4) {
  width: 15%;
}

.about-directory__table-wrap .ds-table a {
  color: var(--ds-color-primary-50, #027BC1);
  text-decoration: none;
}

.about-directory__table-wrap .ds-table a:hover {
  text-decoration: underline;
}

/* ── V05: CI 금지 규정 ── */
.about-ci-prohibit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-number-10, 2rem);
  margin-top: var(--ds-number-12, 2.4rem);
}

.about-ci-prohibit__item {
  display: flex;
  align-items: center;
  gap: var(--ds-number-6, 1.2rem);
  padding: var(--ds-number-8, 1.6rem);
  background: var(--ds-light-color-surface-gray-subtler, #f4f5f6);
  border-radius: var(--ds-radius-2, 8px);
  font-size: var(--ds-font-size-14, 1.4rem);
  color: var(--ds-light-color-text-subtle, #464c53);
}

.about-ci-prohibit__icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-danger-10, #fcdfd9);
  color: var(--ds-color-danger-50, #de3412);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
}

/* ================================================================
   MNU-U-110301 경영공시 목록 페이지 고유 스타일
   ================================================================ */

/* ── 탭 (가운데 정렬) ── */
.disclosure-tab {
  margin-bottom: var(--ds-number-12, 2.4rem);
}

.disclosure-tab .ds-tab__list {
  justify-content: center;
}

/* ── 2컬럼 레이아웃 (사이드 카테고리 + 게시판) ── */
.disclosure-layout {
  display: flex;
  gap: var(--ds-number-16, 3.2rem);
  align-items: flex-start;
}

/* ── 정보공개 CMS 콘텐츠 ── */
/* ── 정보공개 하이라키 콘텐츠 ── */
.disclosure-info-content {
  line-height: 1.8;
  color: var(--ds-light-color-text-subtle, #464c53);
}

.disclosure-info__title {
  font-size: var(--ds-pc-font-size-heading-4, 2rem);
  font-weight: 700;
  color: var(--ds-light-color-text-basic, #1e2124);
  margin-bottom: var(--ds-number-16, 3.2rem);
  padding-bottom: var(--ds-number-6, 1.2rem);
  border-bottom: 2px solid var(--ds-light-color-text-basic, #1e2124);
}

.disclosure-info__section {
  margin-bottom: var(--ds-number-16, 3.2rem);
}

.disclosure-info__section:last-child {
  margin-bottom: 0;
}

.disclosure-info__heading {
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: 700;
  color: var(--ds-light-color-text-basic, #1e2124);
  margin-bottom: var(--ds-number-5, 1rem);
  padding-left: var(--ds-number-5, 1rem);
  border-left: 3px solid var(--ds-color-primary-50, #027BC1);
}

.disclosure-info__desc {
  font-size: var(--ds-font-size-15, 1.5rem);
  line-height: 1.8;
}

/* dl 하이라키 목록 */
.disclosure-info__dl {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-5, 1rem);
}

.disclosure-info__dl-item {
  padding: var(--ds-number-6, 1.2rem) var(--ds-number-8, 1.6rem);
  background: var(--ds-light-color-surface-gray-subtler, #f4f5f6);
  border-radius: var(--ds-radius-medium, 0.8rem);
}

.disclosure-info__dl-item dt {
  font-size: var(--ds-font-size-15, 1.5rem);
  font-weight: 600;
  color: var(--ds-light-color-text-basic, #1e2124);
  margin-bottom: var(--ds-number-2, 0.4rem);
}

.disclosure-info__dl-item dd {
  font-size: var(--ds-font-size-14, 1.4rem);
  color: var(--ds-light-color-text-subtle, #464c53);
  line-height: 1.7;
}

/* ── 사이드 카테고리 (일반적 LNB 스타일) ── */
.disclosure-sidebar {
  flex-shrink: 0;
  width: 24rem;
  position: sticky;
  top: 10rem;
  background: var(--ds-light-color-surface-gray-subtler, #f4f5f6);
  border-radius: var(--ds-radius-large, 1.2rem);
  padding: var(--ds-number-6, 1.2rem);
}

/* 그룹 */
.disclosure-sidebar__group + .disclosure-sidebar__group {
  margin-top: var(--ds-number-2, 0.4rem);
}

.disclosure-sidebar__group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--ds-number-5, 1rem) var(--ds-number-5, 1rem);
  font-size: var(--ds-font-size-14, 1.4rem);
  font-weight: 600;
  color: var(--ds-light-color-text-basic, #1e2124);
  background: transparent;
  border: none;
  border-radius: var(--ds-radius-medium, 0.8rem);
  cursor: pointer;
  transition: background 0.15s;
}

.disclosure-sidebar__group-header:hover {
  background: var(--ds-light-color-surface-gray-subtle, #e6e8ea);
}

.disclosure-sidebar__group.is-open .disclosure-sidebar__group-header {
  color: var(--ds-color-primary-50, #027BC1);
}

.disclosure-sidebar__group-label {
  flex: 1;
  text-align: left;
}

.disclosure-sidebar__arrow {
  flex-shrink: 0;
  transition: transform 0.25s;
  color: var(--ds-light-color-text-subtler, #868c94);
}

.disclosure-sidebar__group.is-open .disclosure-sidebar__arrow {
  transform: rotate(180deg);
  color: var(--ds-color-primary-50, #027BC1);
}

/* 하위 카테고리 목록 */
.disclosure-sidebar__sub-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.disclosure-sidebar__group.is-open .disclosure-sidebar__sub-list {
  max-height: 50rem;
  padding-top: var(--ds-number-2, 0.4rem);
}

.disclosure-sidebar__sub-list li a {
  display: block;
  padding: var(--ds-number-3, 0.6rem) var(--ds-number-5, 1rem) var(--ds-number-3, 0.6rem) var(--ds-number-10, 2rem);
  font-size: var(--ds-font-size-14, 1.4rem);
  color: var(--ds-light-color-text-subtle, #464c53);
  text-decoration: none;
  border-radius: var(--ds-radius-small, 0.6rem);
  transition: all 0.15s;
  line-height: 1.5;
}

.disclosure-sidebar__sub-list li a:hover {
  background: var(--ds-light-color-surface-gray-subtle, #e6e8ea);
  color: var(--ds-light-color-text-basic, #1e2124);
}

.disclosure-sidebar__sub-list li.is-active a {
  background: var(--ds-light-color-surface-white, #fff);
  color: var(--ds-color-primary-50, #027BC1);
  font-weight: 600;
}

/* ── 우측 게시판 영역 ── */
.disclosure-board {
  flex: 1;
  min-width: 0;
}

/* 모바일 카테고리 드롭다운 (PC에서 숨김) */
.disclosure-mobile-cat {
  display: none;
}

.disclosure-mobile-cat__label {
  display: block;
  font-size: var(--ds-font-size-13, 1.3rem);
  font-weight: 600;
  color: var(--ds-light-color-text-subtle, #464c53);
  margin-bottom: var(--ds-number-3, 0.6rem);
}

.disclosure-mobile-cat .ds-select {
  width: 100%;
}


/* ── 반응형: 태블릿 ── */
@media (max-width: 1199px) {
  .disclosure-sidebar {
    width: 20rem;
  }

  .disclosure-layout {
    gap: var(--ds-number-10, 2rem);
  }
}

/* ── 반응형: 모바일 ── */
@media (max-width: 767px) {
  .disclosure-layout {
    flex-direction: column;
  }

  .disclosure-sidebar {
    display: none;
  }

  .disclosure-mobile-cat {
    display: block;
    margin-bottom: var(--ds-number-8, 1.6rem);
  }
}


/* ── 반응형: 태블릿 ── */
@media (max-width: 1199px) {
  .about-greeting {
    grid-template-columns: 200px 1fr;
    gap: var(--ds-pc-spacing-6, 2.4rem);
  }
}

/* ── 반응형: 모바일 ── */
@media (max-width: 767px) {
  .about-greeting {
    grid-template-columns: 1fr;
    gap: var(--ds-pc-spacing-5, 2rem);
  }

  .about-greeting__img-wrap {
    max-width: 280px;
    margin: 0 auto;
  }

  .about-greeting__opening {
    font-size: var(--ds-font-size-20, 2rem);
  }

  .about-greeting__highlight-name {
    font-size: var(--ds-font-size-24, 2.4rem);
  }

  .about-divider {
    margin: var(--ds-pc-spacing-8, 4rem) 0;
  }

  /* 연혁 모바일 */
  .about-history__year {
    grid-template-columns: 1fr;
    gap: var(--ds-number-8, 1.6rem);
    padding: var(--ds-number-10, 2rem) 0;
  }

  .about-history__year-label {
    font-size: 3rem;
  }

  .about-history__nav {
    display: none;
  }

  /* 조직도 모바일 */
  .about-org__chart {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* CI 모바일 */
  .about-ci-logos {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-ci-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-number-6, 1.2rem);
  }

  .about-ci-meaning {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-ci-color-card {
    grid-template-columns: 1fr;
  }

  .about-ci-color-card__desc {
    padding: var(--ds-number-8, 1.6rem);
  }

  .about-ci-section__title {
    font-size: var(--ds-font-size-24, 2.4rem);
  }

  /* 금지 규정 모바일 */
  .about-ci-prohibit {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   MNU-U-110400 오시는 길 — Editorial Civic 스타일
   시그니처: 헤어라인 + eyebrow 라벨 + 5개 통일 서브섹션
   ================================================================ */

/* ── V01: 시설 선택 탭 (중앙 정렬, bold 텍스트형) ── */
.direction-tab {
  margin-bottom: var(--ds-number-16, 3.2rem);
}

/* 탭 → 본문 간격 50px (공통가이드) */
.direction-tab .ds-tab__panel {
  padding-top: 5rem;
}

/* ds-tab--bold가 중앙정렬을 제공하지만 명시적 보강 */
.direction-tab .ds-tab__list {
  justify-content: center;
}

/* ── 공통 섹션 스페이싱 (5개 서브섹션 통일) ── */
.direction-section + .direction-section {
  margin-top: var(--ds-number-24, 4.8rem);
}

/* ── V02: 지도 (위치 섹션 본문) ── */
.direction-info__map {
  position: relative;
  border-radius: var(--ds-radius-medium, 0.8rem);
  overflow: hidden;
  background: var(--ds-color-gray-5, #f4f5f6);
  border: 1px solid var(--ds-color-gray-10, #ebedef);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.direction-info__map-chip {
  position: absolute;
  top: var(--ds-number-6, 1.2rem);
  left: var(--ds-number-6, 1.2rem);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-2, 0.4rem);
  padding: var(--ds-number-3, 0.6rem) var(--ds-number-5, 1rem);
  font-size: var(--ds-font-size-13, 1.3rem);
  font-weight: 600;
  color: var(--ds-light-color-text-basic, #1e2124);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.direction-info__map-chip svg {
  color: var(--ds-color-primary-50, #027BC1);
}

.direction-info__map-caption {
  position: absolute;
  bottom: var(--ds-number-4, 0.8rem);
  right: var(--ds-number-5, 1rem);
  font-size: var(--ds-font-size-12, 1.2rem);
  color: var(--ds-color-gray-50, #6b7178);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.direction-info__map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-3, 0.6rem);
  color: var(--ds-color-gray-50, #6b7178);
  font-size: var(--ds-font-size-13, 1.3rem);
  letter-spacing: 0.02em;
}

.direction-info__map-placeholder svg {
  opacity: 0.32;
}

/* 정보 바 (3열 동일 너비 + 헤어라인 divider) */
.direction-info__detail {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: var(--ds-number-4, 0.8rem) 0;
}

.direction-info__col {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-3, 0.6rem);
  padding: var(--ds-number-2, 0.4rem) var(--ds-number-10, 2rem);
  min-width: 0;
}

.direction-info__col:first-child {
  padding-left: 0;
}

.direction-info__col:last-child {
  padding-right: 0;
}

.direction-info__col + .direction-info__col {
  border-left: 1px solid var(--ds-color-gray-10, #ebedef);
}

.direction-info__col--actions {
  align-items: flex-start;
}

/* eyebrow 라벨 */
.direction-info__label {
  font-size: var(--ds-font-size-13, 1.3rem);
  font-weight: 600;
  color: var(--ds-color-gray-60, #5a6068);
  letter-spacing: 0.02em;
}

.direction-info__value {
  font-size: var(--ds-font-size-15, 1.5rem);
  color: var(--ds-light-color-text-basic, #1e2124);
  line-height: 1.55;
  word-break: keep-all;
}

.direction-info__value a {
  color: var(--ds-light-color-text-basic, #1e2124);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.direction-info__value a:hover {
  border-bottom-color: var(--ds-color-primary-50, #027BC1);
}

.direction-info__addr-row {
  display: flex;
  align-items: baseline;
  gap: var(--ds-number-4, 0.8rem);
  flex-wrap: wrap;
}

.direction-info__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-1, 0.2rem);
  padding: 0;
  font-size: var(--ds-font-size-12, 1.2rem);
  font-weight: 500;
  color: var(--ds-color-primary-50, #027BC1);
  background: transparent;
  border: 0;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}

.direction-info__copy-btn:hover {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.direction-info__actions {
  display: flex;
  gap: var(--ds-number-3, 0.6rem);
  flex-wrap: wrap;
}

/* ── 통일 서브섹션 헤더 (위치/주소와 연락처/버스/자가용/주차) ── */
.direction-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-number-3, 0.6rem) var(--ds-number-8, 1.6rem);
  padding-bottom: var(--ds-number-5, 1rem);
  margin-bottom: var(--ds-number-6, 1.2rem);
}

.direction-section__title {
  font-size: var(--ds-font-size-20, 2rem);
  font-weight: 700;
  color: var(--ds-light-color-text-basic, #1e2124);
}

/* 위치 타이틀 (시설명) — 강조 크기 */
.direction-section__title--location {
  font-size: var(--ds-font-size-28, 2.8rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.direction-section__meta {
  font-size: var(--ds-font-size-14, 1.4rem);
  color: var(--ds-color-gray-60, #5a6068);
  line-height: 1.55;
  word-break: keep-all;
}

.direction-section__meta strong {
  color: var(--ds-color-primary-50, #027BC1);
  font-weight: 600;
}

.direction-section__body {
  /* no padding — 본문 직접 흐름 */
}

.direction-section__body .ds-table-wrap + .ds-table-wrap {
  margin-top: var(--ds-number-6, 1.2rem);
}

/* ── 표 디자인 (레퍼런스 톤: 가로선만, 세로선 없음, 차분한 헤더) ── */
.direction-section .ds-table {
  font-size: var(--ds-font-size-15, 1.5rem);
}

.direction-section .ds-table th,
.direction-section .ds-table td {
  padding: var(--ds-number-9, 1.8rem) var(--ds-number-5, 1rem);
  border-left: 0;
  border-right: 0;
  border-color: var(--ds-color-gray-10, #ebedef);
  vertical-align: top;
  line-height: 1.6;
  word-break: keep-all;
}

/* 헤더: 배경 제거, 라벨 톤 + 상단 강조 라인 + 중앙 정렬 */
.direction-section .ds-table thead th {
  background: transparent;
  font-size: var(--ds-font-size-14, 1.4rem);
  font-weight: 500;
  color: var(--ds-color-gray-60, #5a6068);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: center;
  border-top: 1px solid var(--ds-color-gray-40, #8c9298);
  border-bottom: 1px solid var(--ds-color-gray-15, #e6e8ea);
}

/* 본문 행: 얇은 가로 디바이더 */
.direction-section .ds-table tbody td {
  border-top: 0;
  border-bottom: 1px solid var(--ds-color-gray-10, #ebedef);
  text-align: left;
}

/* 첫 번째 컬럼은 라벨처럼 강조 */
.direction-section .ds-table tbody td:first-child {
  font-weight: 600;
  color: var(--ds-light-color-text-basic, #1e2124);
  white-space: nowrap;
}

/* 호버 효과 제거 (정적 안내 정보) */
.direction-section .ds-table tbody tr:hover td {
  background-color: transparent;
}

/* 마지막 행 하단을 강조 라인으로 (표 끝맺음) */
.direction-section .ds-table tbody tr:last-child td {
  border-bottom: 1px solid var(--ds-color-gray-40, #8c9298);
}

.direction-parking-note {
  font-size: var(--ds-font-size-13, 1.3rem);
  color: var(--ds-color-gray-60, #5a6068);
  line-height: 1.55;
  margin-top: var(--ds-number-4, 0.8rem);
  letter-spacing: 0.01em;
}

.direction-parking-note::before {
  content: '※ ';
  color: var(--ds-color-gray-50, #6b7178);
}

/* ── 토스트 알림 ── */
.direction-toast {
  position: fixed;
  bottom: 3.2rem;
  left: 50%;
  transform: translateX(-50%) translateY(2rem);
  padding: var(--ds-number-5, 1rem) var(--ds-number-10, 2rem);
  background: var(--ds-light-color-surface-inverse, #1e2124);
  color: var(--ds-light-color-text-bolder-inverse, #fff);
  border-radius: var(--ds-radius-medium, 0.8rem);
  font-size: var(--ds-font-size-14, 1.4rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  z-index: 9999;
}

.direction-toast.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ── 반응형: 태블릿 ── */
@media (max-width: 1199px) {
  .direction-info__map {
    min-height: 380px;
  }

  .direction-info__col {
    padding: var(--ds-number-2, 0.4rem) var(--ds-number-7, 1.4rem);
  }

  .direction-section__title {
    font-size: var(--ds-font-size-20, 2rem);
  }

  .direction-section__title--location {
    font-size: var(--ds-font-size-24, 2.4rem);
  }
}

/* ── 반응형: 모바일 ── */
@media (max-width: 767px) {
  .direction-section + .direction-section {
    margin-top: var(--ds-number-16, 3.2rem);
  }

  .direction-info__map {
    min-height: 260px;
  }

  .direction-info__map-chip {
    font-size: var(--ds-font-size-12, 1.2rem);
    padding: var(--ds-number-2, 0.4rem) var(--ds-number-4, 0.8rem);
  }

  .direction-info__map-caption {
    display: none;
  }

  /* 정보 바: 세로 스택, 헤어라인 가로로 */
  .direction-info__detail {
    grid-template-columns: 1fr;
    padding: var(--ds-number-5, 1rem) 0;
  }

  .direction-info__col {
    padding: var(--ds-number-5, 1rem) 0;
  }

  .direction-info__col + .direction-info__col {
    border-left: 0;
    border-top: 1px solid var(--ds-color-gray-10, #ebedef);
  }

  .direction-info__actions {
    width: 100%;
  }

  .direction-info__actions .ds-btn {
    flex: 1;
    min-width: 0;
  }

  /* 정보 섹션 */
  .direction-section__title {
    font-size: var(--ds-font-size-19, 1.9rem);
  }

  .direction-section__title--location {
    font-size: var(--ds-font-size-24, 2.4rem);
  }

  .direction-section__body {
    overflow-x: auto;
  }

  .direction-section__body .ds-table-wrap {
    min-width: 500px;
  }

  /* 모바일 표: 패딩 축소 */
  .direction-section .ds-table th,
  .direction-section .ds-table td {
    padding: var(--ds-number-5, 1rem) var(--ds-number-3, 0.6rem);
    font-size: var(--ds-font-size-14, 1.4rem);
  }

  /* 모바일 탭: 가로 스크롤 */
  .direction-tab .ds-tab__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .direction-tab .ds-tab__list::-webkit-scrollbar {
    display: none;
  }

  .direction-tab .ds-tab__btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: max-content;
    padding-left: var(--ds-number-6, 1.2rem);
    padding-right: var(--ds-number-6, 1.2rem);
  }
}

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

/* ==================== 상세: 타이틀 폰트 크기 (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: foundation-page-v2.css === */
/* ================================================================
   foundation-page-v2.css — 재단소개 모듈 v2 (MNU-U-110000)

   재단소개 모듈의 v2 페이지 룰을 누적 보관하는 단일 CSS.
   각 v2 페이지는 자기 wrapper로 격리. v.html은 본 파일 1개만 link → self-contained.
   v1 foundation-page.css 의존 없음 — BASE LAYER에 v1 룰 추출 포함.

   페이지 wrapper (추가/누적 시 이 표 갱신):
   ┌─────────┬─────────────────────────────┬──────────────────────┐
   │  MNU    │ 페이지                       │ wrapper              │
   ├─────────┼─────────────────────────────┼──────────────────────┤
   │ 110600  │ 오시는 길                    │ .direction-v2        │
   │ 110100  │ 재단비전 및 소개 (CI 탭)     │ .about-ci-v3         │
   │ 110100  │ 재단비전 및 소개 (조직도 탭) │ .about-org-v3        │
   │ 110100  │ 재단비전 및 소개 (연혁 탭)   │ .about-history-v3    │
   │ 110401  │ 경영공시 목록                │ .management-v2       │
   └─────────┴─────────────────────────────┴──────────────────────┘

   누적 수정 룰:
   - 신규 페이지 v2: 본 파일 끝에 새 PAGE 섹션 추가
   - 같은 페이지 내 추가 수정: 해당 PAGE 섹션의 OVERRIDE LAYER 끝에 누적
   - 모듈 공통 룰 변경 발생 시: BASE LAYER 갱신 (모든 페이지 영향 검토 필수)
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   PAGE: 110400 오시는 길 — wrapper .direction-v2
   적용: shared/publishing/fo/pages/재단소개_MNU-U-110000/오시는길_MNU-U-110400/MNU-U-110400_오시는길_design_v2.html
   ════════════════════════════════════════════════════════════════ */

/* ==================== BASE LAYER ====================
   v1 foundation-page.css의 direction-* 룰을 .direction-v2 prefix로 포함 */

/* ── 페이지 컨테이너 (PC 본문 1200px) ── */
.sub-page-wrap.direction-v2 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  isolation: isolate; /* ::before 그라데이션 z-index 격리 */
}

/* ── 시설 선택 탭 ── */
.direction-v2 .direction-tab {
  margin-bottom: var(--ds-number-16, 3.2rem);
}
.direction-v2 .direction-tab .ds-tab__panel {
  padding-top: 5rem;
}
.direction-v2 .direction-tab .ds-tab__list {
  justify-content: center;
}

/* ── 공통 섹션 스페이싱 ── */
.direction-v2 .direction-section + .direction-section,
.direction-v2 .direction-section + .direction-row,
.direction-v2 .direction-row + .direction-row,
.direction-v2 .direction-row + .direction-section {
  margin-top: var(--ds-number-24, 4.8rem);
}

/* ── 지도 ── */
.direction-v2 .direction-info__map {
  position: relative;
  border-radius: var(--ds-radius-medium, 0.8rem);
  overflow: hidden;
  background: var(--ds-color-gray-5, #f4f5f6);
  border: 1px solid var(--ds-color-gray-10, #ebedef);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.direction-v2 .direction-info__map-chip {
  position: absolute;
  top: var(--ds-number-6, 1.2rem);
  left: var(--ds-number-6, 1.2rem);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-2, 0.4rem);
  padding: var(--ds-number-3, 0.6rem) var(--ds-number-5, 1rem);
  font-size: var(--ds-font-size-13, 1.3rem);
  font-weight: 600;
  color: var(--ds-light-color-text-basic, #1e2124);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.direction-v2 .direction-info__map-chip svg {
  color: var(--ds-color-primary-50, #027BC1);
}

.direction-v2 .direction-info__map-caption {
  position: absolute;
  bottom: var(--ds-number-4, 0.8rem);
  right: var(--ds-number-5, 1rem);
  font-size: var(--ds-font-size-12, 1.2rem);
  color: var(--ds-color-gray-50, #6b7178);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.direction-v2 .direction-info__map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-3, 0.6rem);
  color: var(--ds-color-gray-50, #6b7178);
  font-size: var(--ds-font-size-13, 1.3rem);
  letter-spacing: 0.02em;
}

.direction-v2 .direction-info__map-placeholder svg {
  opacity: 0.32;
}

/* ── 정보 3-col 바 ── */
.direction-v2 .direction-info__detail {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: var(--ds-number-4, 0.8rem) 0;
}

.direction-v2 .direction-info__col {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-3, 0.6rem);
  padding: var(--ds-number-2, 0.4rem) var(--ds-number-10, 2rem);
  min-width: 0;
}

.direction-v2 .direction-info__col:first-child {
  padding-left: 0;
}

.direction-v2 .direction-info__col:last-child {
  padding-right: 0;
}

.direction-v2 .direction-info__col + .direction-info__col {
  border-left: 1px solid var(--ds-color-gray-10, #ebedef);
}

.direction-v2 .direction-info__col--actions {
  align-items: flex-start;
}

.direction-v2 .direction-info__label {
  font-size: var(--ds-font-size-13, 1.3rem);
  font-weight: 600;
  color: var(--ds-color-gray-60, #5a6068);
  letter-spacing: 0.02em;
}

.direction-v2 .direction-info__value {
  font-size: var(--ds-font-size-15, 1.5rem);
  color: var(--ds-light-color-text-basic, #1e2124);
  line-height: 1.55;
  word-break: keep-all;
}

.direction-v2 .direction-info__value a {
  color: var(--ds-light-color-text-basic, #1e2124);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.direction-v2 .direction-info__value a:hover {
  border-bottom-color: var(--ds-color-primary-50, #027BC1);
}

.direction-v2 .direction-info__addr-row {
  display: flex;
  align-items: baseline;
  gap: var(--ds-number-4, 0.8rem);
  flex-wrap: wrap;
}

.direction-v2 .direction-info__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-1, 0.2rem);
  padding: 0;
  font-size: var(--ds-font-size-12, 1.2rem);
  font-weight: 500;
  color: var(--ds-color-primary-50, #027BC1);
  background: transparent;
  border: 0;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}

.direction-v2 .direction-info__copy-btn:hover {
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.direction-v2 .direction-info__actions {
  display: flex;
  gap: var(--ds-number-3, 0.6rem);
  flex-wrap: wrap;
}

/* ── 섹션 헤더 ── */
.direction-v2 .direction-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-number-3, 0.6rem) var(--ds-number-8, 1.6rem);
  padding-bottom: var(--ds-number-5, 1rem);
  margin-bottom: var(--ds-number-6, 1.2rem);
}

.direction-v2 .direction-section__title {
  font-size: var(--ds-font-size-20, 2rem);
  font-weight: 700;
  color: var(--ds-light-color-text-basic, #1e2124);
}

.direction-v2 .direction-section__title--location {
  font-size: var(--ds-font-size-28, 2.8rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* ── 주차 별주 ── */
.direction-v2 .direction-parking-note {
  font-size: var(--ds-font-size-13, 1.3rem);
  color: var(--ds-color-gray-60, #5a6068);
  line-height: 1.55;
  margin-top: var(--ds-number-4, 0.8rem);
  letter-spacing: 0.01em;
}

.direction-v2 .direction-parking-note::before {
  content: '※ ';
  color: var(--ds-color-gray-50, #6b7178);
}

/* 강조형 — 행사 무료주차 등 사용자 안내 비중이 높은 노트 */
.direction-v2 .direction-parking-note--lg {
  font-size: var(--ds-font-size-16, 1.6rem);
  color: var(--ds-color-gray-80, #2e3338);
  margin-top: var(--ds-number-2, 0.4rem);
}

/* 안내 노트 묶음 — 부모 row__body의 gap이 적용되지 않도록 별도 컨테이너로 분리 */
.direction-v2 .direction-row__notes {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-1, 0.2rem);
}

.direction-v2 .direction-row__notes .direction-parking-note {
  margin-top: 0;
}

/* ── 토스트 알림 ── */
.direction-v2-toast {
  position: fixed;
  bottom: 3.2rem;
  left: 50%;
  transform: translateX(-50%) translateY(2rem);
  padding: var(--ds-number-5, 1rem) var(--ds-number-10, 2rem);
  background: var(--ds-light-color-surface-inverse, #1e2124);
  color: var(--ds-light-color-text-bolder-inverse, #fff);
  border-radius: var(--ds-radius-medium, 0.8rem);
  font-size: var(--ds-font-size-14, 1.4rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  z-index: 9999;
}

.direction-v2-toast.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}


/* ==================== V01~Vn — 시안 스펙 OVERRIDE ==================== */

/* ── V01: 시설 탭 — 시안 스펙 (가운데 정렬, 동일 너비, 1px divider) ── */
.direction-v2 .direction-tab .ds-tab__list {
  justify-content: center;
  gap: 0;
}

.direction-v2 .direction-tab .ds-tab__item {
  position: relative;
}

.direction-v2 .direction-tab .ds-tab__item + .ds-tab__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.4rem;
  background: var(--ds-color-gray-20, #cdd1d5);
}

/* 모든 탭 동일 min-width (시안 179.375px ≈ 18rem) — 텍스트 가운데 */
.direction-v2 .direction-tab .ds-tab__btn {
  min-width: 18rem;
  padding: var(--ds-number-5, 1rem) var(--ds-number-12, 2.4rem);
  font-size: var(--ds-font-size-19, 1.9rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  color: var(--ds-color-gray-50, #6d7882);
  justify-content: center;
  text-align: center;
}

.direction-v2 .direction-tab .ds-tab__btn.is-active,
.direction-v2 .direction-tab .ds-tab__btn[aria-selected="true"] {
  font-weight: 700;
  color: var(--ds-color-brand-red-aa, #e03010); /* DS 기본 활성색 (주황) */
}

/* 탭 → 본문 간격 (시안 36px) */
.direction-v2 .direction-tab .ds-tab__panel {
  padding-top: var(--ds-number-18, 3.6rem);
}

/* ── V02: 시설명 헤더 (보더 제거, 단순화) ── */
.direction-v2 .direction-section__header {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: var(--ds-number-6, 1.2rem);
}

/* ── V03: 지도 (시안 1200×440 그대로) ── */
.direction-v2 .direction-info__map {
  height: 440px;
  min-height: 440px;
}

/* ── V04: §3 정보 카드 3개 (시안: 흰 배경 + 1px border + rounded-12) ── */
.direction-v2 .direction-info__detail {
  display: flex;
  gap: var(--ds-number-6, 1.2rem);
  padding: 0;
  grid-template-columns: none;
}

.direction-v2 .direction-info__col,
.direction-v2 .direction-info__col:first-child,
.direction-v2 .direction-info__col:last-child {
  flex: 1 1 0;
  align-items: flex-start;
  gap: var(--ds-number-3, 0.6rem);
  background: var(--ds-color-gray-0, #fff);
  border: 1px solid var(--ds-color-gray-10, #e6e8ea);
  border-radius: var(--ds-radius-large, 1.2rem);
  padding: var(--ds-number-12, 2.4rem) var(--ds-number-10, 2rem);
}

.direction-v2 .direction-info__col + .direction-info__col {
  border-left: 1px solid var(--ds-color-gray-10, #e6e8ea); /* 카드 사이 divider 대신 border 유지 */
}

.direction-v2 .direction-info__label {
  font-size: var(--ds-font-size-17, 1.7rem);
  font-weight: 400;
  color: var(--ds-color-gray-60, #58616a);
  letter-spacing: 0;
}

.direction-v2 .direction-info__value {
  font-size: var(--ds-font-size-19, 1.9rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ds-light-color-text-basic, #1e2124);
}

.direction-v2 .direction-info__addr-row {
  display: flex;
  align-items: center;
  gap: var(--ds-number-4, 0.8rem);
  flex-wrap: wrap;
}

/* [복사] 박스 버튼 (시안: gray-20 border + rounded-4 + padding 8·6) */
.direction-v2 .direction-info__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-1, 0.2rem);
  padding: var(--ds-number-3, 0.6rem) var(--ds-number-4, 0.8rem);
  font-size: var(--ds-font-size-12, 1.2rem);
  font-weight: 500;
  color: var(--ds-color-gray-60, #58616a);
  background: var(--ds-color-gray-0, #fff);
  border: 1px solid var(--ds-color-gray-20, #cdd1d5);
  border-radius: var(--ds-radius-xsmall, 0.4rem);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.direction-v2 .direction-info__copy-btn:hover {
  border-color: var(--ds-color-primary-50, #027BC1);
  color: var(--ds-color-primary-50, #027BC1);
  opacity: 1;
  text-decoration: none;
}

/* 길찾기 칩 (시안: 노란/파란 배경 + 둥근 아이콘) */
.direction-v2 .direction-info__actions {
  gap: var(--ds-number-3, 0.6rem);
}

.direction-v2 .direction-info__map-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-3, 0.6rem);
  height: auto;
  padding: var(--ds-number-4, 0.8rem) var(--ds-number-8, 1.6rem);
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: 500;
  color: var(--ds-light-color-text-basic, #1e2124);
  background: rgba(0, 0, 0, 0.04);
  border: 0;
  border-radius: var(--ds-radius-small, 0.6rem);
  text-decoration: none;
  transition: opacity 0.15s, background 0.15s;
}

.direction-v2 .direction-info__map-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  opacity: 0.92;
}

.direction-v2 .direction-info__map-btn img {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
}

.direction-v2 .direction-info__map-btn--kakao {
  background: rgba(250, 224, 0, 0.1);
}

.direction-v2 .direction-info__map-btn--kakao img {
  background: #fae000;
}

.direction-v2 .direction-info__map-btn--naver {
  background: rgba(1, 108, 254, 0.1);
}

.direction-v2 .direction-info__map-btn--naver img {
  background: #fff;
}

/* ── V05: direction-row 패턴 (아이콘 80px + 행 목록) ── */
.direction-v2 .direction-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-number-10, 2rem);
  padding: var(--ds-number-24, 4.8rem) 0; /* 디바이더 위/아래 48px씩 */
  border-top: 1px solid var(--ds-color-gray-10, #e6e8ea);
}

.direction-v2 .direction-row:last-child {
  border-bottom: 0;
}

.direction-v2 .direction-row + .direction-row {
  margin-top: 0;
  border-top: 1px solid var(--ds-color-gray-10, #e6e8ea);
}

/* §2 지도 → §3 정보 카드 사이 — 12px 갭 */
.direction-v2 .direction-section--map + .direction-section {
  margin-top: var(--ds-number-6, 1.2rem);
}

/* §3 카드 → §4 첫 row 사이 — 풀폭 그라데이션 띠 (공연전시 상세 v3 패턴) */
.direction-v2 .direction-section + .direction-row {
  position: relative;
  margin-top: 10rem; /* 100px (카드 끝 ↔ 그라데이션 시작 60 + 그라데이션 ↔ 버스안내 88) */
  padding-top: var(--ds-number-15, 3rem); /* 30px */
  border-top: 0;
}

.direction-v2 .direction-section + .direction-row::before {
  content: '';
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  top: -4rem; /* 그라데이션 시작점 ↔ "버스 안내" 텍스트 = 88px (row padding 48 + 40) */
  height: 9rem;
  background: linear-gradient(180deg, var(--ds-color-gray-5, #f4f5f6) 0%, var(--ds-color-gray-0, #fff) 100%);
  z-index: -1;
  pointer-events: none;
}

.direction-v2 .direction-row__icon {
  flex: 0 0 auto;
  width: var(--ds-number-40, 8rem); /* 80px (시안 그대로) */
  height: var(--ds-number-40, 8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-color-primary-5, #e6f3fa);
  border-radius: 999px;
  overflow: visible;
}

.direction-v2 .direction-row__icon img {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}

/* 80×80 박스 내부 — 아이콘 풀로 키움 (overflow visible로 박스 약간 넘침) */
.direction-v2 .direction-row__icon img[src*="ic_bus"] {
  width: 100px;
  height: 67px;
}
.direction-v2 .direction-row__icon img[src*="ic_car"] {
  width: 100px;
  height: 62px;
}
.direction-v2 .direction-row__icon img[src*="ic_pak"] {
  width: 70px;
  height: 92px;
}

.direction-v2 .direction-row__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-10, 2rem); /* 20px — 제목 ↔ 행 목록 간격 (시안) */
}

.direction-v2 .direction-row__header {
  display: flex;
  align-items: baseline;
  gap: var(--ds-number-6, 1.2rem);
  flex-wrap: wrap;
}

.direction-v2 .direction-row__title {
  font-size: var(--ds-font-size-22, 2.2rem); /* 시안 22px */
  font-weight: 600; /* SemiBold */
  color: var(--ds-light-color-text-basic, #1e2124);
  line-height: 1;
  letter-spacing: -0.1px;
}

.direction-v2 .direction-row__meta {
  font-size: var(--ds-font-size-15, 1.5rem); /* 시안 15px */
  color: var(--ds-color-gray-60, #58616a);
  line-height: 1.55;
  word-break: keep-all;
}

.direction-v2 .direction-row__meta strong {
  color: var(--ds-color-primary-50, #027BC1);
  font-weight: 600;
}

/* ── V06: 행 목록 — CSS Grid (라벨 자동 max-content + 값 1fr) ── */
.direction-v2 .direction-row__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--ds-number-12, 2.4rem); /* 라벨 ↔ 값 24px */
  row-gap: var(--ds-number-4, 0.8rem); /* 행 ↔ 행 8px (묶음) */
  align-items: baseline;
}

.direction-v2 .direction-row__item {
  display: contents; /* 자식이 직접 grid 셀로 — 라벨/값이 자동 균등 정렬 */
}

.direction-v2 .direction-row__label {
  font-size: var(--ds-font-size-18, 1.8rem); /* 시안 18 SemiBold */
  font-weight: 600;
  color: var(--ds-light-color-text-basic, #1e2124);
  white-space: nowrap;
  line-height: 1.55;
}

.direction-v2 .direction-row__value {
  font-size: var(--ds-font-size-17, 1.7rem); /* 시안 버스 17 */
  color: var(--ds-color-gray-70, #464c53);
  line-height: 1.55;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-number-3, 0.6rem);
  word-break: keep-all;
}

.direction-v2 .direction-row__list--car .direction-row__value,
.direction-v2 .direction-row__list--park .direction-row__value {
  font-size: var(--ds-font-size-16, 1.6rem); /* 시안 자가용·주차 16 */
}

.direction-v2 .direction-row__list--car .direction-row__value,
.direction-v2 .direction-row__list--park .direction-row__value {
  font-size: var(--ds-font-size-16, 1.6rem); /* 시안 자가용·주차 16 */
}

/* ── V07: 태그 chip (시안: 마을=초록 / 일반=파랑 / 흰 텍스트) ── */
.direction-v2 .direction-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: var(--ds-number-1, 0.2rem) var(--ds-number-3, 0.6rem);
  font-size: var(--ds-font-size-13, 1.3rem);
  font-weight: var(--ds-typo-font-weight-regular, 400);
  color: #fff;
  background: var(--ds-color-gray-50, #6d7882);
  border-radius: var(--ds-radius-xsmall, 0.4rem);
  letter-spacing: 0;
  line-height: 1.45;
  text-align: center;
}

.direction-v2 .direction-tag--town {
  background: #3a8434; /* brand/green-aa */
}

.direction-v2 .direction-tag--general {
  background: var(--ds-color-primary-60, #02639a);
}

.direction-v2 .direction-tag--intercity {
  background: var(--ds-color-brand-red-aa, #e03010); /* 시외 */
}

.direction-v2 .direction-tag--express {
  background: var(--ds-color-gray-90, #1e2124); /* 직행 */
}

.direction-v2 .direction-tag--trunk {
  background: var(--ds-color-brand-orange-aa, #ca4b1c); /* 간선 */
}


/* ==================== R. 반응형 (태블릿 / 모바일) ====================
   모바일 시안 없음 — 텍스트 위계 단계 축소 + 간격 단계 축소 룰 자동 적용 (스킬 Case D) */

/* ── 태블릿 (768~1199px) ── */
@media (max-width: 1199px) {
  .direction-v2 .direction-info__map {
    height: 380px;
    min-height: 380px;
  }

  /* 태블릿 카드 — PC와 동일 padding 유지 + 콘텐츠 세로 가운데 정렬 */
  .direction-v2 .direction-info__col,
  .direction-v2 .direction-info__col:first-child,
  .direction-v2 .direction-info__col:last-child {
    padding: var(--ds-number-10, 2rem) var(--ds-number-8, 1.6rem);
    justify-content: center;
  }

  .direction-v2 .direction-section__title {
    font-size: var(--ds-font-size-19, 1.9rem);
  }

  .direction-v2 .direction-section__title--location {
    font-size: var(--ds-font-size-24, 2.4rem);
  }

  .direction-v2 .direction-tab .ds-tab__panel {
    padding-top: var(--ds-number-15, 3rem);
  }

  .direction-v2 .direction-row {
    gap: var(--ds-number-8, 1.6rem);
    padding: var(--ds-number-10, 2rem) 0;
  }

  .direction-v2 .direction-row__icon {
    width: var(--ds-number-30, 6rem); /* 60px */
    height: var(--ds-number-30, 6rem);
  }

  /* 태블릿 아이콘 사이즈 (박스 60px에 맞게) */
  .direction-v2 .direction-row__icon img[src*="ic_bus"] {
    width: 42px;
    height: 28px;
  }
  .direction-v2 .direction-row__icon img[src*="ic_car"] {
    width: 48px;
    height: 30px;
  }
  .direction-v2 .direction-row__icon img[src*="ic_pak"] {
    width: 32px;
    height: 42px;
  }

  /* 라벨 width 룰 제거 — Grid가 max-content로 자동 처리 */
}

/* ── 모바일 (≤767px) ── */
@media (max-width: 767px) {
  .direction-v2 .direction-section + .direction-section,
  .direction-v2 .direction-row + .direction-section {
    margin-top: var(--ds-number-16, 3.2rem);
  }

  /* row + row 사이는 padding이 divider 간격을 처리 — margin 추가 금지 (비대칭 원인) */
  .direction-v2 .direction-row + .direction-row {
    margin-top: 0;
  }

  /* 모바일 §3 카드 → §4 — 그라데이션이 카드 영역 침범 안 하게 충분한 margin */
  .direction-v2 .direction-section + .direction-row {
    margin-top: var(--ds-number-40, 8rem); /* 80px: 카드 끝 ↔ 그라데이션 시작 40 + 그라데이션 ↔ row 40 */
  }

  .direction-v2 .direction-info__map {
    height: 260px;
    min-height: 260px;
  }

  .direction-v2 .direction-info__map-chip {
    font-size: var(--ds-font-size-12, 1.2rem);
    padding: var(--ds-number-2, 0.4rem) var(--ds-number-4, 0.8rem);
  }

  .direction-v2 .direction-info__map-caption {
    display: none;
  }

  /* 정보 카드: 세로 1열 stack — PC 카드 스타일(흰 배경 + border + rounded) 유지 */
  .direction-v2 .direction-info__detail {
    flex-direction: column;
    grid-template-columns: 1fr;
    padding: 0;
  }

  .direction-v2 .direction-info__col,
  .direction-v2 .direction-info__col:first-child,
  .direction-v2 .direction-info__col:last-child {
    padding: var(--ds-number-10, 2rem) var(--ds-number-8, 1.6rem);
  }

  /* 모바일 카드 — 4면 border 모두 유지 (왼쪽 사라짐 방지). 카드 사이는 flex gap이 처리 */
  .direction-v2 .direction-info__col + .direction-info__col {
    border-left: 1px solid var(--ds-color-gray-10, #e6e8ea);
    border-top: 1px solid var(--ds-color-gray-10, #e6e8ea);
  }

  /* 주소·연락처 텍스트 — 모바일 축소 (PC 19/17px → 모바일 15/13px) */
  .direction-v2 .direction-info__value {
    font-size: var(--ds-font-size-15, 1.5rem);
  }

  .direction-v2 .direction-info__label {
    font-size: var(--ds-font-size-13, 1.3rem);
  }

  .direction-v2 .direction-info__actions {
    width: 100%;
  }

  .direction-v2 .direction-info__map-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    height: var(--ds-number-18, 3.6rem);
    font-size: var(--ds-font-size-13, 1.3rem);
  }

  .direction-v2 .direction-section__title {
    font-size: var(--ds-font-size-17, 1.7rem); /* 섹션 소제목 */
  }

  .direction-v2 .direction-section__title--location {
    font-size: var(--ds-font-size-20, 2rem); /* 위치명 */
  }

  /* direction-row 모바일: 아이콘 왼쪽 / 콘텐츠 오른쪽 (가로 유지) */
  .direction-v2 .direction-row {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ds-number-6, 1.2rem);
    padding: var(--ds-number-14, 2.8rem) 0; /* divider 위아래 28px */
  }

  .direction-v2 .direction-row__icon {
    width: var(--ds-number-24, 4.8rem); /* 48px */
    height: var(--ds-number-24, 4.8rem);
  }

  /* 모바일 아이콘 사이즈 — 박스(48px) 풀로 키움 (PC와 동일 125% 비율, overflow visible로 약간 넘침) */
  .direction-v2 .direction-row__icon img[src*="ic_bus"] {
    width: 60px;
    height: 40px;
  }
  .direction-v2 .direction-row__icon img[src*="ic_car"] {
    width: 60px;
    height: 38px;
  }
  .direction-v2 .direction-row__icon img[src*="ic_pak"] {
    width: 42px;
    height: 54px;
  }

  .direction-v2 .direction-row__title {
    font-size: var(--ds-font-size-16, 1.6rem); /* 교통수단 소제목 */
  }

  .direction-v2 .direction-row__meta {
    font-size: var(--ds-font-size-12, 1.2rem); /* 보조 설명 */
  }

  /* 모바일 행: 라벨 위 / 값 아래 (Grid 1열) */
  .direction-v2 .direction-row__list {
    grid-template-columns: 1fr;
    row-gap: var(--ds-number-2, 0.4rem);
  }

  .direction-v2 .direction-row__label {
    font-size: var(--ds-font-size-14, 1.4rem); /* 교통 종류 라벨 (Bold) */
  }
  .direction-v2 .direction-row__value {
    font-size: var(--ds-font-size-13, 1.3rem); /* 노선번호·설명 (Regular) */
  }

  /* 모바일 탭: 가로 스크롤 */
  .direction-v2 .direction-tab .ds-tab__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .direction-v2 .direction-tab .ds-tab__list::-webkit-scrollbar {
    display: none;
  }

  .direction-v2 .direction-tab .ds-tab__btn {
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: max-content;
    padding-left: var(--ds-number-6, 1.2rem);
    padding-right: var(--ds-number-6, 1.2rem);
  }

  .direction-v2 .direction-tag {
    height: var(--ds-number-9, 1.8rem);
    font-size: var(--ds-font-size-11, 1.1rem); /* 태그 캡션 */
  }
}


/* ════════════════════════════════════════════════════════════════
   PAGE: 100601 경영공시 목록 — wrapper .management-v2
   적용: shared/publishing/fo/pages/소통참여_MNU-U-100000/경영공시_MNU-U-100600/MNU-U-110301_경영공시목록_design_v2.html
   ════════════════════════════════════════════════════════════════ */

/* ==================== BASE LAYER ====================
   v1 foundation-page.css / community-page.css 에서 추출
   (disclosure-tab · disclosure-info-* · disclosure-mobile-cat · notice-list · notice-attach)
   .management-v2 prefix로 격리 — v2.html은 foundation-page-v2.css 단독 link (self-contained) */

/* CONTENT ↔ FOOTER — 가이드 §5-1/5-2 100px 전 뷰포트
   (DS .sub-page-wrap 기본은 case C 100/80/60 → 탭형 페이지 한정 100 통일) */
.sub-page-wrap.management-v2,
.sub-page-wrap.about-v3 {
  margin-bottom: 10rem;
}
@media (max-width: 1199px) {
  .sub-page-wrap.management-v2,
  .sub-page-wrap.about-v3 {
    margin-bottom: 10rem;
  }
}
@media (max-width: 767px) {
  .sub-page-wrap.management-v2,
  .sub-page-wrap.about-v3 {
    margin-bottom: 10rem;
  }
}

/* CONTENT(목록) ↔ PAGINATION — 가이드 §5-1 Case A 100px 전 뷰포트
   (DS .ds-pagination 기본 margin-top 32px 오버라이드) */
.management-v2 .ds-pagination {
  margin-top: 10rem;
}

/* 메인 탭 간격 — 공통가이드 v1.7.1 §5-2 Case B (HERO↔TAB / TAB↔CONTENT 동일값)
   PC 50 · 태블릿 28 · 모바일 16 */
.management-v2 .disclosure-tab {
  margin-top: var(--ds-number-25, 5rem);
  margin-bottom: var(--ds-number-25, 5rem);
}
.management-v2 .disclosure-tab .ds-tab__list {
  justify-content: center;
}
@media (max-width: 1199px) {
  .management-v2 .disclosure-tab {
    margin-top: var(--ds-number-14, 2.8rem);
    margin-bottom: var(--ds-number-14, 2.8rem);
  }
}
@media (max-width: 767px) {
  .management-v2 .disclosure-tab {
    margin-top: var(--ds-number-8, 1.6rem);
    margin-bottom: var(--ds-number-8, 1.6rem);
  }
}

/* 정보공개 하이라키 콘텐츠 — pfmc-info(예매·할인·환불) 디자인 톤 적용
   상단 패딩 제거: HERO↔TAB↔CONTENT 간격은 .disclosure-tab margin이 단일 책임 */
.management-v2 .disclosure-info-content {
  line-height: 1.6;
  color: var(--ds-color-gray-70, #464c53);
  width: 100%;
  padding: 0 0 var(--ds-number-20, 4rem);
}

/* 페이지 타이틀 — 40 Medium, 좌측 정렬 */
.management-v2 .disclosure-info__title {
  font-size: var(--ds-font-size-40, 4rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  color: var(--ds-color-gray-95, #1a1a1a);
  letter-spacing: -0.02em;
  margin: 0 0 var(--ds-number-30, 6rem);
  padding: 0;
  text-align: left;
  line-height: 1.3;
}

/* 섹션 — guide-section margin-bottom 60px */
.management-v2 .disclosure-info__section {
  margin-bottom: var(--ds-number-30, 6rem);
}
.management-v2 .disclosure-info__section:last-child {
  margin-bottom: 0;
}

/* 섹션 헤딩 — 22 SemiBold, 좌측 라인/도트 없음 */
.management-v2 .disclosure-info__heading {
  font-size: var(--ds-font-size-22, 2.2rem);
  font-weight: var(--ds-typo-font-weight-semibold, 600);
  color: var(--ds-color-gray-90, #1e2124);
  letter-spacing: -0.003em;
  margin: 0 0 var(--ds-number-8, 1.6rem);
  line-height: 1.3;
  display: block;
}
.management-v2 .disclosure-info__heading::before {
  content: none;
}

/* 본문 desc */
.management-v2 .disclosure-info__desc {
  font-size: var(--ds-font-size-17, 1.7rem);
  line-height: 1.55;
  color: var(--ds-color-gray-70, #464c53);
  margin: 0;
  word-break: keep-all;
}

/* 청구인·대상기관 dl — 표 형식 (라벨 좌측 / 본문 우측, 상하 라인 구분) */
.management-v2 .disclosure-info__dl {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--ds-color-gray-20, #d8dde2);
  border-radius: 0;
}

.management-v2 .disclosure-info__dl-item {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: var(--ds-number-8, 1.6rem);
  padding: var(--ds-number-7, 1.4rem) var(--ds-number-6, 1.2rem);
  border-bottom: 1px solid var(--ds-color-gray-20, #d8dde2);
  background: transparent;
  border-radius: 0;
}

.management-v2 .disclosure-info__dl-item dt {
  font-size: var(--ds-font-size-17, 1.7rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-primary-60, #02639a);
  margin: 0;
  align-self: start;
}

.management-v2 .disclosure-info__dl-item dd {
  font-size: var(--ds-font-size-16, 1.6rem);
  color: var(--ds-color-gray-70, #464c53);
  line-height: 1.65;
  margin: 0;
  word-break: keep-all;
}

/* 태블릿 (768~1199) — pfmc-info 동일 스케일 (40→32) */
@media (max-width: 1199px) and (min-width: 768px) {
  .management-v2 .disclosure-info__title {
    font-size: var(--ds-font-size-32, 3.2rem);
  }
  .management-v2 .disclosure-info__heading {
    font-size: var(--ds-font-size-20, 2rem);
  }
  .management-v2 .disclosure-info__section {
    margin-bottom: var(--ds-number-24, 4.8rem);
  }
}

/* 모바일 (≤767) — pfmc-info 동일: 페이지 타이틀 숨김 (page-header 인클루드가 대체) */
@media (max-width: 767px) {
  .management-v2 .disclosure-info__title {
    display: none;
  }
  .management-v2 .disclosure-info__heading {
    font-size: var(--ds-font-size-19, 1.9rem);
    margin-bottom: var(--ds-number-6, 1.2rem);
  }
  .management-v2 .disclosure-info__section {
    margin-bottom: var(--ds-number-18, 3.6rem);
  }
  .management-v2 .disclosure-info__desc {
    font-size: var(--ds-font-size-15, 1.5rem);
  }
  .management-v2 .disclosure-info__dl-item {
    grid-template-columns: 1fr;
    gap: var(--ds-number-2, 0.4rem);
    padding: var(--ds-number-6, 1.2rem) 0;
  }
  .management-v2 .disclosure-info__dl-item dt {
    font-size: var(--ds-font-size-16, 1.6rem);
  }
  .management-v2 .disclosure-info__dl-item dd {
    font-size: var(--ds-font-size-15, 1.5rem);
  }
}

/* notice-list: 3컬럼 그리드 베이스 (번호 8rem / 제목 1fr / 등록일 12rem) */
.management-v2 .notice-list .ds-board-list__head,
.management-v2 .notice-list .ds-board-list__item {
  grid-template-columns: 8rem 1fr 12rem;
}

/* 첨부파일 아이콘 */
.management-v2 .notice-attach {
  display: inline-flex;
  align-items: center;
  margin-left: var(--ds-number-2, 0.4rem);
  color: var(--ds-color-gray-40, #8a949e);
  vertical-align: middle;
  flex-shrink: 0;
}


/* ==================== OVERRIDE LAYER — 시안 스펙 ==================== */

/* V01 — 메인 탭 (정보공개/경영공시): v1과 동일하게 ds-tab--bold + .disclosure-tab BASE만 사용
   (커스텀 오버라이드 없음 — DS 기본 폰트/컬러/구분자 그대로) */

/* V02 — 경영공시 탭 패널 (상단 패딩 제거: TAB↔콘텐츠 간격은 .disclosure-tab margin-bottom으로 단일화) */
.management-v2 #tab-mgmt {
  padding-top: 0;
}

/* V03 — 가로 카테고리 탭 (| 구분자 + 활성=brand-red-aa + 텍스트폭만 2px 밑줄)
   카테고리 탭 ↔ 검색영역 갭: 시각적으로 40px (시안 기준) */
.management-v2 .management-category {
  display: flex;
  align-items: center;
  margin-bottom: var(--ds-number-20, 4rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.management-v2 .management-category::-webkit-scrollbar {
  display: none;
}
.management-v2 .management-category__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}
.management-v2 .management-category__item {
  display: flex;
  align-items: center;
  position: relative;
}
.management-v2 .management-category__item + .management-category__item::before {
  content: '|';
  display: inline-flex;
  align-items: center;
  color: var(--ds-color-gray-20, #cdd1d5);
  font-size: var(--ds-font-size-16, 1.6rem);
  padding: 0 1.8rem;
  flex-shrink: 0;
  font-weight: 400;
}
.management-v2 .management-category__btn {
  position: relative;
  background: none;
  border: none;
  padding: var(--ds-number-5, 1rem) 0; /* 좌우 padding 제거 — 밑줄이 텍스트 폭과 맞도록 */
  font-size: var(--ds-font-size-17, 1.7rem); /* Figma 18px → DS 17px (±1px) */
  font-weight: 400;
  color: var(--ds-color-gray-70, #464c53); /* Figma #464c53 = gray-70 exact */
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s;
}
.management-v2 .management-category__btn:hover {
  color: var(--ds-color-brand-red-aa, #e03010);
}
.management-v2 .management-category__btn.is-active {
  font-weight: 700;
  color: var(--ds-color-brand-red-aa, #e03010); /* Figma #e03010 = brand-red-aa exact */
}
.management-v2 .management-category__btn.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.4rem;
  height: 2px;
  background: var(--ds-color-brand-red-aa, #e03010);
}

/* V04 — 검색 영역
   ※ DS layout.css의 .ds-filter-search 표준(700px 가운데 + chips PC 가운데 + 모바일 한줄 가로스크롤 + 주황 pill 활성칩) 그대로 사용.
   페이지 고유 요소(연도 select + divider)만 추가 정의 */
.management-v2 .ds-filter-search__year {
  flex: 0 0 auto;
  width: 9rem;
  height: 4.4rem;
  padding: 0 var(--ds-number-12, 2.4rem) 0 0;
  border: 0;
  background: transparent;
  background-image: url('../../icons/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right var(--ds-number-2, 0.4rem) center;
  background-size: 1.6rem 1.6rem;
  font-size: var(--ds-font-size-15, 1.5rem);
  color: var(--ds-color-gray-90, #1e2124);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.management-v2 .ds-filter-search__year:focus {
  outline: 0;
}
.management-v2 .ds-filter-search__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 2rem;
  background: var(--ds-color-gray-20, #cdd1d5);
  margin: 0 var(--ds-number-8, 1.6rem);
}

/* V05 — 4컬럼 테이블 (번호 8rem / 분류 12rem / 제목 1fr / 등록일 12rem)
   ※ grid-template-columns는 PC/태블릿 전용 — 모바일은 DS layout.css의 flex-wrap 패턴 사용
   ※ 셀 세로 중앙 정렬은 모든 뷰포트 공통 (분류 태그가 위로 붙는 현상 방지) */
.management-v2 .management-list.ds-board-list .ds-board-list__item > .ds-board-list__num,
.management-v2 .management-list.ds-board-list .ds-board-list__item > .ds-board-list__col,
.management-v2 .management-list.ds-board-list .ds-board-list__item > .ds-board-list__date {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (min-width: 768px) {
  .management-v2 .management-list.ds-board-list .ds-board-list__head,
  .management-v2 .management-list.ds-board-list .ds-board-list__item {
    grid-template-columns: 8rem 12rem 1fr 12rem;
  }

  /* 헤더 셀 정렬: 번호·분류·등록일 가운데 / 제목 좌측 */
  .management-v2 .management-list.ds-board-list .ds-board-list__head > :nth-child(1),
  .management-v2 .management-list.ds-board-list .ds-board-list__head > :nth-child(2),
  .management-v2 .management-list.ds-board-list .ds-board-list__head > :nth-child(4) {
    text-align: center;
    justify-content: center;
  }
}

/* V06 — 분류 태그: DS .ds-tag .ds-tag--s + color 유틸리티 토큰 사용
   페이지 오버라이드: 흰 배경 + pill radius + ds-comp-color 토큰으로 outline 구성
   line-height: 1 — 부모 행의 line-height 상속으로 인한 한글 글리프 수직 위치 편차 보정 */
.management-v2 .management-list .ds-tag,
.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;
}

/* 상세 페이지 태그 — 목록 대비 한 단계 크게 */
.management-v2 .ds-detail-header__tags .ds-tag {
  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);
}


/* ==================== R. 반응형 (태블릿 / 모바일) ====================
   모바일 시안 없음 — 텍스트 위계 단계 축소 + 간격 단계 축소 룰 자동 적용 (스킬 Case D) */

@media (max-width: 1199px) {
  .management-v2 .management-main-tab .ds-tab__btn {
    min-width: 14rem;
    font-size: var(--ds-font-size-17, 1.7rem);
  }
  .management-v2 .management-category__btn {
    font-size: var(--ds-font-size-17, 1.7rem);
  }
}

@media (max-width: 767px) {
  /* 메인 탭(정보공개/경영공시) ↔ 카테고리 탭(일반현황…) 갭 확장 (PC 16px → 모바일 40px) */
  .management-v2 #tab-mgmt {
    padding-top: var(--ds-number-20, 4rem);
  }

  /* 카테고리 탭: 가로 스크롤(슬라이드) — 좌측 정렬 + 얇은 스크롤바 노출(스와이프 가능 인지)
     + 검색영역과 갭 확장 (40px → 48px) + 스크롤바 자체 공간(padding-bottom) 확보 */
  .management-v2 .management-category {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--ds-color-gray-30, #b1b8be) transparent;
    padding-bottom: var(--ds-number-3, 0.6rem); /* 스크롤바 위 여유 12px */
    margin-bottom: var(--ds-number-24, 4.8rem); /* 48px — 검색영역 시각적 분리 강화 */
  }
  .management-v2 .management-category::-webkit-scrollbar {
    display: block;
    height: 4px;
  }
  .management-v2 .management-category::-webkit-scrollbar-thumb {
    background: var(--ds-color-gray-30, #b1b8be);
    border-radius: 2px;
  }
  .management-v2 .management-category::-webkit-scrollbar-track {
    background: transparent;
  }
  .management-v2 .management-category__list {
    justify-content: flex-start;
    margin: 0;
  }
  .management-v2 .management-category__btn {
    font-size: var(--ds-font-size-15, 1.5rem);
    padding: var(--ds-number-4, 0.8rem) 0;
  }

  /* 하위 카테고리 chips: 모바일 한줄 + 좌측 정렬 + 얇은 스크롤바 노출 — 공연전시 v2 통일 표준 */
  .management-v2 .ds-filter-search > .ds-board-toolbar--chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ds-color-gray-30, #b1b8be) transparent;
    padding-bottom: var(--ds-number-2, 0.4rem); /* 스크롤바 공간 */
  }
  .management-v2 .ds-filter-search > .ds-board-toolbar--chips::-webkit-scrollbar {
    display: block;
    height: 4px;
  }
  .management-v2 .ds-filter-search > .ds-board-toolbar--chips::-webkit-scrollbar-thumb {
    background: var(--ds-color-gray-30, #b1b8be);
    border-radius: 2px;
  }
  .management-v2 .ds-filter-search > .ds-board-toolbar--chips .ds-filter-chip {
    flex: 0 0 auto;
  }

  /* 4컬럼 → 모바일: DS layout.css(line 1611~1643)의 flex-wrap 모바일 패턴 그대로 적용
     (번호 좌측 작게 / 제목 풀폭 / 등록일 좌측). 페이지에서는 두 가지만 추가 처리: */
  /* (1) 공지 제외 모든 행의 번호 숨김 (사용자 요청) */
  .management-v2 .management-list .ds-board-list__item:not(.ds-board-list__item--pinned) > .ds-board-list__num {
    display: none;
  }
  /* (2) 분류 라벨 셀(__col): DS에 없는 커스텀 컬럼 — HTML 자연 순서대로 배치
        → 공지 행: [공지]→[분류]→[제목]→[날짜] / 일반 행: [분류]→[제목]→[날짜] */
  .management-v2 .management-list .ds-board-list__item > .ds-board-list__col {
    width: 100%;
  }
}


/* ════════════════════════════════════════════════════════════════
   PAGE: 110100 재단 비전 및 소개 (CI 탭) — wrapper .about-ci-v3
   적용: shared/publishing/fo/pages/재단소개_MNU-U-110000/재단비전및소개_MNU-U-110100/MNU-U-110100_재단비전및소개_design_v3.html
   ※ v3는 CI 탭만 시안 적용. 다른 탭(인사말/연혁/조직도)은 v2와 동일 — foundation-page.css 룰 그대로 사용.
   본 PAGE 섹션은 .about-ci-v3 wrapper로 격리 — CI 탭 패널 내부에만 적용.
   .sub-page-wrap에는 .about-v3 wrapper로 모바일 메인 탭 → select 전환 처리 (artist v2 패턴).
   ════════════════════════════════════════════════════════════════ */

/* 모바일 메인 탭(인사말/연혁/조직도/CI) → select 전환 — artist v2 동일 패턴
   PC/태블릿: ds-tab 표시 + page-header__select 숨김 (DS 기본)
   모바일: ds-tab 숨김 + page-header__select 표시 (DS 모바일 룰 자동) */
@media (max-width: 767px) {
  .about-v3 > .ds-tab {
    display: none;
  }
}

/* ── 컨테이너 (탭 패널 내부 1200px) ── */
.about-ci-v3 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* 섹션 wrapper (간격만) */
.about-ci-v3 .ci-section {
  margin-bottom: var(--ds-number-30, 6rem); /* 60px 섹션 간 */
}
.about-ci-v3 .ci-section:last-child {
  margin-bottom: 0;
}
/* DS 섹션 헤더 — 시안 굵기·사이즈 명시 */
.about-ci-v3 .ds-section-header--center .ds-section-header__title {
  font-size: var(--ds-font-size-32, 3.2rem); /* Figma 32 — CI 소개 가운데 큰 헤딩 */
  font-weight: var(--ds-typo-font-weight-bold, 700);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.about-ci-v3 .ds-section-header:not(.ds-section-header--center) .ds-section-header__title {
  font-size: var(--ds-font-size-24, 2.4rem); /* Figma 24 — 시그니처/컬러 좌측 헤딩 */
  font-weight: var(--ds-typo-font-weight-bold, 700);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* ════════ V01: CI 소개 — 풀로고 박스(격자 배경) + 다운로드 버튼 + 4개 컨셉 카드 ════════ */

/* 풀로고 박스 — 흰 배경 + 얇은 격자 라인 + 가운데 풀로고 (시안 1200×253) */
.about-ci-v3 .ci-symbol-board {
  width: 100%;
  height: 25.3rem; /* Figma 253px */
  background-color: var(--ds-color-gray-0, #fff);
  background-image:
    linear-gradient(to right, var(--ds-color-gray-10, #e6e8ea) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ds-color-gray-10, #e6e8ea) 1px, transparent 1px);
  background-size: 4rem 4rem; /* 40×40 격자 */
  border: 1px solid var(--ds-color-gray-10, #e6e8ea);
  border-radius: var(--ds-radius-medium, 0.8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about-ci-v3 .ci-symbol-board img {
  max-width: 30rem; /* 풀로고 시안 폭 추정 */
  max-height: 70%;
  object-fit: contain;
}

/* 다운로드 버튼 영역 — 풀로고 ↔ 컨셉카드 사이 가운데 (시안 갭 40+40) */
.about-ci-v3 .ci-download {
  margin-top: var(--ds-number-20, 4rem); /* 40px 풀로고 박스 ↔ 버튼 */
  display: flex;
  justify-content: center;
}
.about-ci-v3 .ci-download__btn {
  /* 시안: 다크그레이 배경 + 흰 글씨 + pill + 다운로드 아이콘 우측 */
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-3, 0.6rem); /* 6px */
  padding: var(--ds-number-5, 1rem) var(--ds-number-12, 2.4rem); /* 10 24 */
  background: var(--ds-color-gray-80, #33363d); /* 시안 다크그레이 */
  color: var(--ds-color-gray-0, #fff);
  border: 0;
  border-radius: var(--ds-radius-max, 999px); /* pill */
  font-size: var(--ds-font-size-15, 1.5rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.about-ci-v3 .ci-download__btn:hover {
  background: var(--ds-color-gray-90, #1e2124);
  opacity: 0.95;
}
.about-ci-v3 .ci-download__btn .ds-icon {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}

/* 4개 컨셉 카드 (1×4 그리드) */
.about-ci-v3 .ci-concept-grid {
  margin-top: var(--ds-number-20, 4rem); /* 40px 메인 카드 ↔ 컨셉 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-number-10, 2rem); /* 20px Figma */
}
.about-ci-v3 .ci-concept-card {
  background: var(--ds-color-gray-0, #fff);
  border: 1px solid var(--ds-color-gray-10, #e6e8ea);
  border-radius: var(--ds-radius-large, 1.2rem); /* 12px */
  padding: var(--ds-number-10, 2rem); /* 20px */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ds-number-10, 2rem); /* 20px 이미지 ↔ 텍스트 */
}
.about-ci-v3 .ci-concept-card__img {
  width: 14rem; /* 140px Figma */
  height: 11.1rem; /* 111px Figma */
  border-radius: var(--ds-radius-medium, 0.8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-gray-40, #8a949e);
  font-size: var(--ds-font-size-12, 1.2rem);
}
/* placeholder만 회색 배경 (이미지 들어가면 transparent — 가장자리 회색 노출 방지) */
.about-ci-v3 .ci-concept-card__img:not(:has(img)) {
  background: var(--ds-color-gray-5, #f4f5f6);
}
.about-ci-v3 .ci-concept-card__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.about-ci-v3 .ci-concept-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-3, 0.6rem); /* 6px */
}
.about-ci-v3 .ci-concept-card__title {
  font-size: var(--ds-font-size-17, 1.7rem); /* Figma ~18 → DS 17 (-1px), Bold */
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-light-color-text-basic, #1e2124);
  margin: 0;
  line-height: 1.4;
}
.about-ci-v3 .ci-concept-card__desc {
  font-size: var(--ds-font-size-14, 1.4rem); /* Figma 14 — 부제 Regular */
  font-weight: var(--ds-typo-font-weight-regular, 400);
  color: var(--ds-color-gray-60, #58616a);
  line-height: 1.5;
  margin: 0;
}

/* ════════ V02: 시그니처 — 3×2 그리드 (6개 로고) ════════ */
.about-ci-v3 .ci-signature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-number-10, 2rem); /* 20px */
}
.about-ci-v3 .ci-signature-item {
  display: flex;
  flex-direction: column;
}
.about-ci-v3 .ci-signature-item__img {
  width: 100%;
  aspect-ratio: 386 / 240; /* Figma 386.66 × 240 */
  background: var(--ds-color-gray-5, #f4f5f6);
  border-radius: var(--ds-radius-medium, 0.8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-color-gray-40, #8a949e);
  font-size: var(--ds-font-size-13, 1.3rem);
  margin-bottom: var(--ds-number-6, 1.2rem); /* 12px Figma */
  overflow: hidden;
}
.about-ci-v3 .ci-signature-item__img img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}
.about-ci-v3 .ci-signature-item__label {
  font-size: var(--ds-font-size-14, 1.4rem); /* Figma 14 — 라벨 Regular */
  font-weight: var(--ds-typo-font-weight-regular, 400);
  color: var(--ds-color-gray-70, #464c53);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* ════════ V03: 컬러 시스템 — 1×5 그리드 (큰 컬러 블록 + 정보) ════════ */
.about-ci-v3 .ci-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--ds-number-10, 2rem); /* 20px Figma */
}
.about-ci-v3 .ci-color-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ds-color-gray-10, #e6e8ea); /* 시안 회색 라인 */
  border-radius: var(--ds-radius-large, 1.2rem); /* 12px */
  overflow: hidden;
  background: var(--ds-color-gray-0, #fff);
}
.about-ci-v3 .ci-color-card__block {
  height: 22rem; /* 220px Figma 큰 컬러 블록 */
  flex: 0 0 auto;
}
.about-ci-v3 .ci-color-card__info {
  padding: var(--ds-number-8, 1.6rem); /* 16px */
  display: flex;
  flex-direction: column;
  gap: 0; /* 요소별 margin으로 직접 제어 */
}
.about-ci-v3 .ci-color-card__label {
  font-size: var(--ds-font-size-16, 1.6rem); /* Figma 16 — 영문 라벨 Bold 대문자 */
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-light-color-text-basic, #1e2124);
  margin: 0; /* 닉과 바로 붙임 */
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.about-ci-v3 .ci-color-card__nick {
  font-size: var(--ds-font-size-14, 1.4rem); /* Figma 14 — 한글 닉 Regular */
  font-weight: var(--ds-typo-font-weight-regular, 400);
  color: var(--ds-color-gray-60, #58616a);
  margin: 0 0 var(--ds-number-5, 1rem); /* 닉 ↔ spec 10px 갭 */
  line-height: 1.5;
}
.about-ci-v3 .ci-color-card__spec {
  font-size: var(--ds-font-size-13, 1.3rem); /* Figma 13 — CMYK/RGB/HEX Regular */
  font-weight: var(--ds-typo-font-weight-regular, 400);
  color: var(--ds-color-gray-60, #58616a);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.55;
  margin: 0;
}

/* CI 브랜드 컬러 — DS 토큰에 정확 매칭 없음, hex 직접 + 매핑 주석
   (브랜드 가이드 색상이라 토큰화 X — CI 페이지 한정 사용) */
.about-ci-v3 .ci-color-card--orange .ci-color-card__block { background: #da521f; } /* SUNSET ORANGE */
.about-ci-v3 .ci-color-card--green  .ci-color-card__block { background: #50b848; } /* FIELD GREEN */
.about-ci-v3 .ci-color-card--yellow .ci-color-card__block { background: #fdb913; } /* CULTURE YELLOW */
.about-ci-v3 .ci-color-card--blue   .ci-color-card__block { background: #047bc1; } /* SPACE BLUE */
.about-ci-v3 .ci-color-card--red    .ci-color-card__block { background: #ef4123; } /* PYEONG RED */


/* ==================== R. 반응형 (태블릿 / 모바일) ====================
   모바일 시안 없음 — 텍스트 위계 단계 축소 + 간격 단계 축소 룰 자동 적용 (스킬 Case D) */

/* 태블릿 768~1199px */
@media (max-width: 1199px) {
  .about-ci-v3 .ci-section {
    margin-bottom: var(--ds-number-24, 4.8rem); /* 60 → 48 */
  }
  .about-ci-v3 .ds-section-header--center .ds-section-header__title {
    font-size: var(--ds-font-size-28, 2.8rem); /* CI 소개 32 → 28 */
  }
  .about-ci-v3 .ds-section-header:not(.ds-section-header--center) .ds-section-header__title {
    font-size: var(--ds-font-size-22, 2.2rem); /* 시그니처/컬러 24 → 22 */
  }
  .about-ci-v3 .ci-symbol-board {
    height: 22rem; /* 253 → 220 */
    background-size: 3.2rem 3.2rem; /* 40 → 32 격자 */
  }
  .about-ci-v3 .ci-symbol-board img {
    max-width: 24rem;
  }
  .about-ci-v3 .ci-concept-grid {
    grid-template-columns: repeat(2, 1fr); /* 4 → 2 */
    gap: var(--ds-number-8, 1.6rem);
  }
  .about-ci-v3 .ci-color-grid {
    grid-template-columns: repeat(3, 1fr); /* 5 → 3 */
    gap: var(--ds-number-8, 1.6rem);
  }
  .about-ci-v3 .ci-color-card__block {
    height: 18rem; /* 220 → 180 */
  }
}

/* 모바일 ≤767px */
@media (max-width: 767px) {
  .about-ci-v3 .ci-section {
    margin-bottom: var(--ds-number-20, 4rem); /* 48 → 40 */
  }
  .about-ci-v3 .ds-section-header--center .ds-section-header__title {
    font-size: var(--ds-font-size-22, 2.2rem); /* CI 소개 28 → 22 */
  }
  .about-ci-v3 .ds-section-header:not(.ds-section-header--center) .ds-section-header__title {
    font-size: var(--ds-font-size-19, 1.9rem); /* 시그니처/컬러 22 → 19 */
  }

  .about-ci-v3 .ci-symbol-board {
    height: 16rem; /* 220 → 160 */
    background-size: 2.4rem 2.4rem; /* 32 → 24 격자 */
  }
  .about-ci-v3 .ci-symbol-board img {
    max-width: 18rem;
  }

  .about-ci-v3 .ci-download {
    margin-top: var(--ds-number-12, 2.4rem); /* 40 → 24 */
  }
  .about-ci-v3 .ci-download__btn {
    font-size: var(--ds-font-size-13, 1.3rem);
    padding: var(--ds-number-4, 0.8rem) var(--ds-number-8, 1.6rem);
  }

  /* 컨셉 카드: 가로(2-col 풀폭) 유지, 세로만 축소 (이미지 비율 가로로 길게 + 상하 padding 축소) */
  .about-ci-v3 .ci-concept-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-number-6, 1.2rem); /* 12px */
    margin-top: var(--ds-number-12, 2.4rem);
  }
  .about-ci-v3 .ci-concept-card {
    /* 상하 10 / 좌우 16 — 가로는 원래대로, 세로만 컴팩트 */
    padding: var(--ds-number-5, 1rem) var(--ds-number-8, 1.6rem);
    gap: var(--ds-number-5, 1rem); /* 12 → 10 */
  }
  .about-ci-v3 .ci-concept-card__img {
    width: 100%;
    height: auto;
    aspect-ratio: 140 / 74; /* 111 → 74 (세로 2/3) — 박스 세로 짧아짐 */
  }
  /* 카드 박스는 그대로, 안쪽 사진만 작게 (PC img 100% → 모바일 70%) */
  .about-ci-v3 .ci-concept-card__img img {
    max-width: 70%;
    max-height: 70%;
  }
  .about-ci-v3 .ci-concept-card__title {
    font-size: var(--ds-font-size-16, 1.6rem); /* 19 → 16 */
  }
  .about-ci-v3 .ci-concept-card__desc {
    font-size: var(--ds-font-size-13, 1.3rem); /* 15 → 13 */
  }

  /* 시그니처 헤딩 ↔ 그리드 갭 모바일 반으로 (DS 기본 40px → 20px) — 컬러시스템도 동일 적용 */
  .about-ci-v3 .ci-section .ds-section-header:not(.ds-section-header--center) {
    margin-bottom: var(--ds-number-10, 2rem);
  }

  /* 시그니처 3 → 2 */
  .about-ci-v3 .ci-signature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ds-number-6, 1.2rem);
  }
  /* 박스 크기는 그대로(aspect-ratio 유지), 내부 로고 이미지만 작게 (PC 70% → 모바일 50%) */
  .about-ci-v3 .ci-signature-item__img img {
    max-width: 50%;
    max-height: 50%;
  }
  .about-ci-v3 .ci-signature-item__label {
    font-size: var(--ds-font-size-13, 1.3rem);
  }

  /* 컬러 시스템: 카드 5개를 세로 1-col 스택 + 카드 내부는 컬러 블록(좌) + 내용(우) 가로 배치 */
  .about-ci-v3 .ci-color-grid {
    grid-template-columns: 1fr;
    gap: var(--ds-number-4, 0.8rem); /* 8px */
  }
  .about-ci-v3 .ci-color-card {
    flex-direction: row;
    align-items: stretch;
  }
  .about-ci-v3 .ci-color-card__block {
    flex: 0 0 50%; /* 좌측 컬러 블록 카드의 50% */
    width: 50%;
    height: auto; /* 카드 높이 stretch */
  }
  .about-ci-v3 .ci-color-card__info {
    flex: 1 1 auto;
    padding: var(--ds-number-5, 1rem) var(--ds-number-7, 1.4rem); /* 10 / 14 */
    justify-content: center;
  }
  .about-ci-v3 .ci-color-card__label {
    font-size: var(--ds-font-size-15, 1.5rem);
  }
  .about-ci-v3 .ci-color-card__nick {
    font-size: var(--ds-font-size-13, 1.3rem);
    margin-bottom: var(--ds-number-3, 0.6rem);
  }
  .about-ci-v3 .ci-color-card__spec {
    font-size: var(--ds-font-size-12, 1.2rem);
    line-height: 1.5;
  }
}


/* ════════════════════════════════════════════════════════════════
   PAGE: 110100 재단 비전 및 소개 (조직도 탭) — wrapper .about-org-v3
   적용: shared/publishing/fo/pages/재단소개_MNU-U-110000/재단비전및소개_MNU-U-110100/MNU-U-110100_재단비전및소개_design_v3.html
   ※ 조직도 탭만 시안 적용 — 다른 탭(인사말/연혁/CI)은 영향 없음
   ※ 차트는 절대 위치 X, flex/grid 기반 — 모바일에서 본부 stack 변형 안전
   ════════════════════════════════════════════════════════════════ */

/* ── 컨테이너 ── */
.about-org-v3 {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ════════ V02: NABO 패턴 조직도 차트 ════════ */
.about-org-v3 .about-org-chart {
  margin: 0 auto var(--ds-number-30, 6rem); /* 가운데 정렬 + 차트 ↔ 디렉토리 60 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Figma 시안 차트 영역 width 960px — 박스 사이즈/라인 좌표를 시안 그대로 매칭하기 위해 픽스 */
  width: 96rem;
  max-width: 100%;
}

/* L1: 평택시장/이사장 — 가운데 단독 */
.about-org-v3 .org-chart__top {
  display: flex;
  justify-content: center;
  position: relative;
  padding-bottom: var(--ds-number-15, 3rem); /* 30px — 라인 공간 */
}
/* L1 → L2 세로 라인 (시안 spine-1: height 30) */
.about-org-v3 .org-chart__top::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: var(--ds-number-15, 3rem);
  /* 시안 라인 #0c2b80 + #8a949e 보더 → 1px 라인이라 보더색이 우세, gray-40 매칭 */
  background: var(--ds-color-gray-40, #8a949e);
}

/* L2: 윤리감사팀 / 대표이사 / 이사회 — 가로 3 */
.about-org-v3 .org-chart__row--exec {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ds-number-20, 4rem); /* 40px */
  position: relative;
  padding-bottom: var(--ds-number-20, 4rem); /* 40px — spine-2 시안 매칭 */
}
/* L2 가로 라인 — 윤리감사 박스 가운데 ↔ 이사회 박스 가운데
   width 52rem = 대표이사(28rem) + gap(4rem×2) + 양쪽 박스 절반(8rem×2) */
.about-org-v3 .org-chart__row--exec::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(50% - var(--ds-number-10, 2rem)); /* padding-bottom 4rem 절반 위로 보정 */
  width: 52rem;
  height: 1px;
  background: var(--ds-color-gray-40, #8a949e);
  transform: translateX(-50%);
}
/* L2 → L3 세로 라인 (대표이사 아래, 시안 spine-2 height 40) */
.about-org-v3 .org-chart__row--exec::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: var(--ds-number-20, 4rem);
  background: var(--ds-color-gray-40, #8a949e);
}

/* L3: 본부 3개 + 산하 팀 — flex row PC, gap 0으로 cell 균등 (가로 분기선이 본부 가운데에 정확히 매칭) */
.about-org-v3 .org-chart__divisions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  position: relative;
  padding-top: var(--ds-number-10, 2rem); /* 20px — tv1/2/3 라인 공간 */
}
/* L3 본부 가로 분기 라인 (첫 본부 가운데 ↔ 마지막 본부 가운데) */
.about-org-v3 .org-chart__divisions::before {
  content: '';
  position: absolute;
  left: calc(100% / 6);
  right: calc(100% / 6);
  top: 0;
  height: 1px;
  background: var(--ds-color-gray-40, #8a949e);
}

.about-org-v3 .org-division {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* 본부 박스/팀리스트 가운데 정렬 → cv1/2/3 라인이 박스 가운데 통과 */
  position: relative;
  min-width: 0;
}
/* 본부 박스 위로 향하는 세로 라인 (가로 분기 ↔ 본부 박스, 시안 tv1/2/3 height 20)
   .divisions에 padding-top:20이 있어 .org-division top:0이 가로선보다 20 아래.
   라인은 가로선↔본부 박스 위까지 그려야 하므로 top:-20으로 끌어올림. */
.about-org-v3 .org-division::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--ds-number-10, 2rem));
  width: 1px;
  height: var(--ds-number-10, 2rem);
  background: var(--ds-color-gray-40, #8a949e);
}

/* 본부 산하 팀 stack — 본부 박스 ↔ 첫 팀 30px 세로선 + 가로 border. 본부 박스와 동일 너비 26rem */
.about-org-v3 .org-team-list {
  list-style: none;
  margin: var(--ds-number-15, 3rem) 0 0; /* 30px — 시안 cv1/2/3 height */
  padding: 0;
  width: 26rem;
  border-top: 2px solid var(--ds-color-brand-dark, #343a48);
  position: relative;
}
/* 본부 박스 ↔ 팀 리스트 세로 라인 (시안 cv1/2/3 height 30) */
.about-org-v3 .org-team-list::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--ds-number-15, 3rem));
  width: 1px;
  height: var(--ds-number-15, 3rem);
  background: var(--ds-color-gray-40, #8a949e);
  transform: translateX(-50%);
}
.about-org-v3 .org-team {
  padding: var(--ds-number-8, 1.6rem) var(--ds-number-4, 0.8rem);
  text-align: center;
  font-size: var(--ds-font-size-17, 1.7rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  color: var(--ds-light-color-text-basic, #1e2124);
  border-bottom: 1px solid var(--ds-color-gray-10, #e6e8ea);
  transition: background-color 0.15s;
}
/* 팀 hover — 배경색만 변경 (도형 lift 효과는 적용 안 함) */
.about-org-v3 .org-team[role="button"]:hover {
  background-color: var(--ds-color-gray-5, #f4f5f6);
}
/* 클릭 가능 요소 — 키보드 포커스 outline */
.about-org-v3 .org-team[role="button"]:focus-visible,
.about-org-v3 .org-card[role="button"]:focus-visible {
  outline: 2px solid var(--ds-color-brand-blue-aa, #027bc1);
  outline-offset: 2px;
}

/* ── 카드 박스 스타일 (공통 + 변형) ── */
.about-org-v3 .org-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--ds-radius-max, 999px); /* pill — 시안 34px → max 토큰 */
  white-space: nowrap;
  position: relative; /* z-index above lines */
  z-index: 1;
}
.about-org-v3 .org-card__label {
  display: block;
  font-size: var(--ds-font-size-16, 1.6rem);
  font-weight: var(--ds-typo-font-weight-medium, 500);
  line-height: 1.3;
}
.about-org-v3 .org-card__name {
  display: block;
  font-weight: var(--ds-typo-font-weight-bold, 700);
  line-height: 1.3;
}

/* 평택시장/이사장 — 다크 pill */
.about-org-v3 .org-card--ceo {
  flex-direction: column;
  width: 28rem; /* 280px */
  padding: var(--ds-number-6, 1.2rem) var(--ds-number-10, 2rem);
  background: var(--ds-color-brand-dark, #343a48);
  color: var(--ds-color-gray-0, #fff);
  box-shadow: 0 5px 10px rgba(52, 58, 72, 0.2);
}
.about-org-v3 .org-card--ceo .org-card__name {
  font-size: var(--ds-font-size-24, 2.4rem);
}

/* 대표이사 — 파랑 채움 pill */
.about-org-v3 .org-card--lead {
  flex-direction: column;
  width: 28rem;
  padding: var(--ds-number-6, 1.2rem) var(--ds-number-10, 2rem);
  background: var(--ds-color-brand-blue-aa, #027bc1);
  color: var(--ds-color-gray-0, #fff);
  box-shadow: 0 5px 10px rgba(2, 123, 193, 0.2);
}
.about-org-v3 .org-card--lead .org-card__name {
  font-size: var(--ds-font-size-24, 2.4rem);
}

/* 윤리감사팀 / 이사회 — 흰 배경 + 파랑 outline pill, 두 박스 동일 너비 16rem */
.about-org-v3 .org-card--outline-blue {
  width: 16rem;
  padding: var(--ds-number-8, 1.6rem) 0;
  background: var(--ds-color-gray-0, #fff);
  color: var(--ds-color-brand-blue-aa, #027bc1);
  border: 1px solid var(--ds-color-brand-blue-aa, #027bc1);
  box-shadow: 0 5px 10px rgba(2, 11, 61, 0.2);
}
.about-org-v3 .org-card--outline-blue .org-card__name {
  font-size: var(--ds-font-size-19, 1.9rem); /* Figma 18 → DS 19 (가까움) */
}

/* 본부 박스 — 흰 배경 + 다크 outline pill. 3개 본부 모두 동일 너비 26rem (시안 ~260px 매칭) */
.about-org-v3 .org-card--division {
  width: 26rem;
  padding: var(--ds-number-10, 2rem) 0;
  background: var(--ds-color-gray-0, #fff);
  color: var(--ds-color-brand-dark, #343a48);
  border: 1px solid var(--ds-color-brand-dark, #343a48);
  box-shadow: 0 5px 10px rgba(2, 11, 61, 0.2);
}
.about-org-v3 .org-card--division .org-card__name {
  font-size: var(--ds-font-size-20, 2rem);
  font-weight: var(--ds-typo-font-weight-semibold, 600);
}


/* ════════ V03+V04: 직원 디렉토리 (chip 필터 + 테이블) ════════ */
.about-org-v3 .about-directory-v3 {
  /* 차트 ↔ 그라데이션 사이 흰 갭 두 배(60→120) — 그라데이션이 -6rem에서 시작하므로 차트 끝 ↔ 그라데이션 시작 60px */
  margin-top: 12rem;
  isolation: isolate;
}

/* chip 영역 — DS .ds-filter-search 표준 (110401과 동일) */
.about-org-v3 .about-directory-v3 > .ds-filter-search {
  margin-bottom: var(--ds-number-15, 3rem); /* 30px */
  position: relative; /* ::before 그라데이션 anchor */
}
/* 필터탭 영역 회색 그라데이션 (오시는 길 v2 동일 패턴 — full-bleed)
   필터탭 행 위쪽 여백을 넉넉히(60px) 두고 시작 → 필터탭 행 끝까지만. 테이블엔 안 닿음. */
.about-org-v3 .about-directory-v3 > .ds-filter-search::before {
  content: '';
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  top: -6rem; /* 그라데이션 시작점 위로 60px 여백 (이전 30px → 60px) */
  bottom: 0;
  background: linear-gradient(180deg, var(--ds-color-gray-5, #f4f5f6) 0%, var(--ds-color-gray-0, #fff) 100%);
  z-index: -1;
  pointer-events: none;
}

/* 테이블 wrap */
.about-org-v3 .about-directory-v3__table-wrap {
  width: 100%;
}

/* 테이블 — 시안: gray-30 top border + light gray-10 row separator */
.about-org-v3 .about-directory-v3__table {
  width: 100%;
  table-layout: fixed; /* 본부 칩 필터 변경 시 컬럼 폭 재계산 방지 */
  border-collapse: collapse;
  border-top: 1px solid var(--ds-color-gray-30, #b1b8be);
  border-bottom: 1px solid var(--ds-color-gray-30, #b1b8be);
}
/* 컬럼 폭 고정: 직위 30% / 전화번호 22% / 담당업무 48% */
.about-org-v3 .about-directory-v3__table th:nth-child(1),
.about-org-v3 .about-directory-v3__table td:nth-child(1) { width: 30%; }
.about-org-v3 .about-directory-v3__table th:nth-child(2),
.about-org-v3 .about-directory-v3__table td:nth-child(2) { width: 22%; }
.about-org-v3 .about-directory-v3__table th:nth-child(3),
.about-org-v3 .about-directory-v3__table td:nth-child(3) { width: 48%; }
/* 담당업무 본문은 좌측 정렬 (헤더는 center 유지) */
.about-org-v3 .about-directory-v3__table tbody td:nth-child(3) {
  text-align: left;
}
.about-org-v3 .about-directory-v3__table th,
.about-org-v3 .about-directory-v3__table td {
  padding: var(--ds-number-10, 2rem) var(--ds-number-12, 2.4rem);
  text-align: center;
  vertical-align: middle;
  font-size: var(--ds-font-size-14, 1.4rem); /* Figma 14 — 본문 */
  color: var(--ds-light-color-text-basic, #1e2124);
  word-break: keep-all; /* 한글 단어 단위 줄바꿈 (fixed 레이아웃에서 오버플로 방지) */
}
.about-org-v3 .about-directory-v3__table thead th {
  background: color-mix(in srgb, var(--ds-color-gray-5, #f4f5f6) 50%, transparent); /* Figma rgba(244,245,246,0.5) */
  font-size: var(--ds-font-size-16, 1.6rem); /* Figma 16 — 헤더 */
  font-weight: var(--ds-typo-font-weight-bold, 700);
}
.about-org-v3 .about-directory-v3__table tbody tr {
  border-bottom: 1px solid var(--ds-color-gray-10, #e6e8ea);
}
.about-org-v3 .about-directory-v3__table tbody tr:last-child {
  border-bottom: 0;
}
/* 직위 컬럼 — Bold 18 (시안) */
.about-org-v3 .about-directory-v3__table tbody td:first-child {
  font-size: var(--ds-font-size-18, 1.8rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
}
/* 전화번호 링크 */
.about-org-v3 .about-directory-v3__table a {
  color: inherit;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.about-org-v3 .about-directory-v3__table a:hover {
  text-decoration: underline;
  color: var(--ds-color-primary-50, #027bc1);
}


/* ════════ R. 반응형 (태블릿 / 모바일) — 가로스크롤 X, 본부 stack 변형
   ════════ 모바일 시안 없음 — 텍스트 위계 단계 축소 + 간격 단계 축소 (스킬 Case D) ════════ */

/* 태블릿 (768~1199px) — PC 룩 유지하되 카드/팀 텍스트만 단계 축소 */
@media (max-width: 1199px) {
  .about-org-v3 .org-card--ceo,
  .about-org-v3 .org-card--lead {
    width: 24rem; /* 280 → 240 */
  }
  .about-org-v3 .org-card--ceo .org-card__name,
  .about-org-v3 .org-card--lead .org-card__name {
    font-size: var(--ds-font-size-22, 2.2rem); /* 24 → 22 */
  }
  .about-org-v3 .org-card--outline-blue {
    padding: var(--ds-number-6, 1.2rem) var(--ds-number-15, 3rem);
  }
  .about-org-v3 .org-card--outline-blue .org-card__name {
    font-size: var(--ds-font-size-17, 1.7rem); /* 19 → 17 */
  }
  .about-org-v3 .org-card--division {
    padding: var(--ds-number-8, 1.6rem) var(--ds-number-15, 3rem);
  }
  .about-org-v3 .org-card--division .org-card__name {
    font-size: var(--ds-font-size-19, 1.9rem); /* 20 → 19 */
  }
  .about-org-v3 .org-team {
    font-size: var(--ds-font-size-16, 1.6rem); /* 17 → 16 */
    padding: var(--ds-number-7, 1.4rem) var(--ds-number-3, 0.6rem);
  }
}

/* 모바일 (≤767px) — 가로스크롤 금지, 본부 3개 세로 stack + L2도 stack
   포인트: 모든 트리 라인은 세로 라인만 유지 (가로 분기 라인 숨김) — stack에서 의미 흐려짐 */
@media (max-width: 767px) {
  .about-org-v3 .about-org-chart {
    margin-bottom: var(--ds-number-20, 4rem); /* 60 → 40 */
  }

  /* L1 → L2 세로 라인 그대로 유지 (단일 트리 흐름) */

  /* L2 — 모바일: 대표이사가 윗 행 가운데 / 윤리감사 | 이사회가 아랫 행 가로 (HTML 순서: 윤리, 대표, 이사회) */
  .about-org-v3 .org-chart__row--exec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "lead   lead"
      "ethics board";
    column-gap: 0;
    row-gap: var(--ds-number-15, 3rem); /* 30px — 대표이사 ↔ 윤리/이사회 거리 (가지선 길이) */
    padding-bottom: var(--ds-number-15, 3rem); /* 30px — 본부로 향하는 세로선 공간 */
  }
  .about-org-v3 .org-chart__row--exec > :nth-child(1) { grid-area: ethics; justify-self: center; }
  .about-org-v3 .org-chart__row--exec > :nth-child(2) { grid-area: lead;   justify-self: center; }
  .about-org-v3 .org-chart__row--exec > :nth-child(3) { grid-area: board;  justify-self: center; }

  /* L2 가로 라인 — 모바일에서는 사용 X (대신 윤리/이사회 카드의 ::before로 좌·우 가지선) */
  .about-org-v3 .org-chart__row--exec::before {
    display: none;
  }
  /* L2 → L3 가운데 세로선 — .row--exec 박스 전체 가운데에 그려짐 (대표이사 박스가 z-index 1로 위쪽 가림 → 박스 아래만 보이고 박스에 닿음) */
  .about-org-v3 .org-chart__row--exec::after {
    top: 0;
    bottom: 0;
    height: auto;
  }

  /* 윤리감사팀 / 이사회 카드 위 짧은 세로선 — 대표이사 박스 아래에서 두 카드로 가는 좌·우 가지선 */
  .about-org-v3 .org-card--outline-blue {
    position: relative;
  }
  .about-org-v3 .org-card--outline-blue::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 1px;
    height: var(--ds-number-15, 3rem); /* 30px — row-gap 길이만큼 */
    background: var(--ds-color-gray-40, #8a949e);
    transform: translateX(-50%);
  }

  /* L3: 본부 3개 — 세로 stack, 자식 width 100%(stretch)로 가운데 column에 정렬 */
  .about-org-v3 .org-chart__divisions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-number-15, 3rem); /* 본부 사이 30px */
    padding-top: 0;
  }
  /* L3 가로 분기 라인 숨김 */
  .about-org-v3 .org-chart__divisions::before {
    display: none;
  }
  /* L3 각 본부 위 세로 라인 — 첫 본부만 유지 (L2 → L3 흐름 시각화), 나머지 숨김 */
  .about-org-v3 .org-division::before {
    display: none;
  }
  .about-org-v3 .org-division:first-child::before {
    display: block;
    top: calc(-1 * var(--ds-number-15, 3rem)); /* L3 padding-top 0 보정 — 위로 30px */
    height: var(--ds-number-15, 3rem);
  }

  /* 카드 사이즈 — 가로 100% (모바일 라인 정렬 위해 max-width 제거) */
  .about-org-v3 .org-card--ceo,
  .about-org-v3 .org-card--lead {
    width: 100%;
  }
  .about-org-v3 .org-card--ceo .org-card__label,
  .about-org-v3 .org-card--lead .org-card__label {
    font-size: var(--ds-font-size-14, 1.4rem); /* 16 → 14 */
  }
  .about-org-v3 .org-card--ceo .org-card__name,
  .about-org-v3 .org-card--lead .org-card__name {
    font-size: var(--ds-font-size-19, 1.9rem); /* 24 → 19 */
  }
  /* 윤리감사 / 이사회 — cell width의 80%로 줄여서 박스 좌우에 여백 (가운데 라인이 박스에 닿지 않게) */
  .about-org-v3 .org-card--outline-blue {
    width: 80%;
    padding: var(--ds-number-5, 1rem) var(--ds-number-10, 2rem);
  }
  /* 본부 박스 — 가로 100% */
  .about-org-v3 .org-card--division {
    width: 100%;
    padding: var(--ds-number-5, 1rem) var(--ds-number-10, 2rem);
  }
  /* 팀 리스트 — 가로 100% (PC width 26rem override) + 본부 박스와 사이 여백 늘리기 (가운데 라인 길게) */
  .about-org-v3 .org-team-list {
    width: 100%;
    margin-top: var(--ds-number-25, 5rem); /* 본부 박스 ↔ 첫 팀 거리 50px (PC 30 → 50) */
  }
  .about-org-v3 .org-team-list::before {
    /* 본부 ↔ 팀 리스트 세로선 길이도 50px */
    top: calc(-1 * var(--ds-number-25, 5rem));
    height: var(--ds-number-25, 5rem);
  }
  .about-org-v3 .org-card--outline-blue .org-card__name {
    font-size: var(--ds-font-size-15, 1.5rem); /* 19 → 15 */
  }
  .about-org-v3 .org-card--division .org-card__name {
    font-size: var(--ds-font-size-16, 1.6rem); /* 20 → 16 */
  }

  /* 팀 리스트 — 텍스트 축소 + padding 축소 */
  .about-org-v3 .org-team-list {
    margin-top: var(--ds-number-6, 1.2rem); /* 20 → 12 */
  }
  .about-org-v3 .org-team {
    font-size: var(--ds-font-size-15, 1.5rem); /* 17 → 15 */
    padding: var(--ds-number-6, 1.2rem) var(--ds-number-3, 0.6rem);
  }

  /* 직원 디렉토리 — 모바일 텍스트 위계 축소 */
  .about-org-v3 .about-directory-v3 {
    /* 모바일 차트 ↔ 그라데이션 시작 갭 — margin-top 12rem - ::before top -6rem = 갭 약 60px */
    margin-top: 12rem;
  }
  .about-org-v3 .about-directory-v3 > .ds-filter-search {
    margin-bottom: var(--ds-number-10, 2rem); /* 30 → 20 */
  }
  .about-org-v3 .about-directory-v3__table th,
  .about-org-v3 .about-directory-v3__table td {
    padding: var(--ds-number-6, 1.2rem) var(--ds-number-4, 0.8rem); /* 좁은 폭에 맞춤 */
    font-size: var(--ds-font-size-13, 1.3rem);
  }
  .about-org-v3 .about-directory-v3__table thead th {
    font-size: var(--ds-font-size-14, 1.4rem); /* 16 → 14 */
  }
  .about-org-v3 .about-directory-v3__table tbody td:first-child {
    font-size: var(--ds-font-size-14, 1.4rem); /* 18 → 14 */
    text-align: left;
  }
}


/* ════════════════════════════════════════════════════════════════
   PAGE: 110100 재단비전 및 소개 (연혁 탭) — wrapper .about-history-v3
   적용: shared/publishing/fo/pages/재단소개_MNU-U-110000/재단비전및소개_MNU-U-110100/MNU-U-110100_재단비전및소개_design_v3.html (panel-history)
   Figma: node-id=14227-18936
   인터랙션:
   - 좌측 카드 영역(750px) sticky 워터마크 + parallax 이미지 3장
   - 워터마크 숫자가 우측 active 연도에 맞춰 cross-fade (JS)
   - 이미지 3장은 data-parallax 속도값에 따라 translateY (JS)
   ════════════════════════════════════════════════════════════════ */

/* ── 컨테이너 (PC 본문 1440 → 750+690 2-col) ── */
.about-history-v3 {
  display: grid;
  grid-template-columns: 75rem 69rem; /* 750 / 690 */
  align-items: stretch; /* 좌측 cell이 우측 길이만큼 stretch → sticky가 우측 스크롤 따라 길게 작동 */
  max-width: 144rem;
  margin: 0 auto;
}

/* ── 좌측: 미디어 영역 (sticky + 위 여백) ──
   panel-history 진입 후 viewport 위쪽에 적당히 여백 두고 sticky로 머무름.
   안의 이미지 3장은 한 자리(viewport 가운데)에 stack되어 새 이미지가 아래에서 올라와 멈추고 이전 이미지는 위로 빠져나감. */
.about-history-v3__media {
  position: sticky;
  top: 6rem; /* 위 여백 60px (헤더 아래 적당히) */
  align-self: start;
  height: calc(100vh - 6rem); /* viewport - 위 여백 */
  overflow: hidden;
  isolation: isolate;
}

/* ── 워터마크 (sticky 박스 안 가운데쯤 absolute) ── */
.about-history-v3__watermark {
  position: absolute;
  top: 30vh;
  left: var(--ds-number-20, 4rem);
  width: max-content;
  pointer-events: none;
  z-index: 1;
}
.about-history-v3__watermark-layer {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-family-sans, 'Pretendard', sans-serif);
  font-weight: 900;
  font-size: 24rem;
  line-height: 1;
  letter-spacing: -0.8rem;
  color: color-mix(in srgb, var(--ds-color-gray-20, #cdd1d5) 20%, transparent);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 280ms ease-out;
  user-select: none;
}
.about-history-v3__watermark-layer.is-active { opacity: 1; }

/* ── 이미지 3장 stack — 모두 같은 자리(시안 첫 이미지 위치)에 absolute ──
   초기 photo--1만 is-active(translateY 0), 나머지는 translateY 120%로 박스 아래 숨김.
   active 연도 진행 시 누적적으로 translateY(0) 슬라이드 업 + z-index 인덱스 큰 게 이전 덮음. */
/* 이미지 3장 — 각자 시안 사선 위치 (우상단 / 좌중간 / 우하단) ──
   - waiting (기본): 자기 위치 아래서 대기 + 투명
   - is-active: 자기 위치(시안 좌표)에 등장 + 보임
   - is-passed: 자기 위치 그대로 페이드아웃 (위로 잘림 없음) */
.about-history-v3__photo {
  position: absolute;
  margin: 0;
  border-radius: var(--ds-radius-large, 1.2rem);
  overflow: hidden;
  opacity: 0;
  transform: translateY(15vh);
  transition: transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 560ms ease;
  will-change: transform, opacity;
  z-index: 2;
}
.about-history-v3__photo.is-active {
  opacity: 1;
  transform: translateY(0);
}
.about-history-v3__photo.is-passed {
  opacity: 0;
  transform: translateY(0);
}
/* ptart 스타일 fade-up — viewport 진입 시 1회만 페이드-업 (PC에서만 사용) */
.about-history-v3__photo.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* photo--1: 우상단 (시안 첫 위치 — top 0, 우측 2024 라벨과 시작점 align) */
.about-history-v3__photo--1 {
  top: 0;
  right: var(--ds-number-40, 8rem);
  left: auto;
  width: 48.5rem;
  height: 34.6rem;
  background: var(--ds-color-secondary-5, #eef2f7); /* no-image.png 표준 placeholder 배경 */
}
/* photo--2: 좌상단 */
.about-history-v3__photo--2 {
  top: 0;
  left: 0;
  right: auto;
  width: 44.7rem;
  height: 31.8rem;
  background: var(--ds-color-secondary-5, #eef2f7);
}
/* photo--3: 우상단 */
.about-history-v3__photo--3 {
  top: 0;
  right: var(--ds-number-40, 8rem);
  left: auto;
  width: 48.5rem;
  height: 34.6rem;
  background: var(--ds-color-secondary-5, #eef2f7);
}
/* photo--4: 좌측 */
.about-history-v3__photo--4 {
  top: 0;
  left: 0;
  right: auto;
  width: 44.7rem;
  height: 31.8rem;
  background: var(--ds-color-secondary-5, #eef2f7);
}
/* photo--5: 우측 */
.about-history-v3__photo--5 {
  top: 0;
  right: var(--ds-number-40, 8rem);
  left: auto;
  width: 48.5rem;
  height: 34.6rem;
  background: var(--ds-color-secondary-5, #eef2f7);
}

.about-history-v3__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center;
}
/* no-image-logo placeholder — 사진 비율에 맞춰 가운데 정렬 (max-width/height로 비례 조정) */
.about-history-v3__photo img[src$="no-image-logo.png"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 40%; /* 사진 폭의 40%까지 */
  max-height: 50%; /* 사진 높이의 50%까지 */
  object-fit: contain;
  opacity: 0.6;
}

/* ── 우측: 연도 리스트 ── */
.about-history-v3__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-40, 8rem); /* 80 */
}
.about-history-v3__year {
  position: relative;
}
.about-history-v3__year-label {
  margin: 0 0 var(--ds-number-12, 2.4rem); /* 24px 간격 (Figma 100 - 라벨 76 = 24) */
  font-family: var(--font-family-sans, 'Pretendard', sans-serif);
  font-weight: 100; /* Thin */
  font-size: 6.4rem; /* Figma 64 — DS 60 와 가까움, 정확치 위해 직접값 */
  line-height: 1.1875; /* 76/64 */
  letter-spacing: -0.2rem;
  color: var(--ds-color-brand-blue-aa, #027bc1);
}
.about-history-v3__events {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-6, 1.2rem); /* 12px (Figma 36-24=12) */
}
.about-history-v3__item {
  display: grid;
  grid-template-columns: 8rem 1fr; /* 날짜 80px + 설명 */
  align-items: baseline;
  gap: 0;
}
.about-history-v3__date {
  margin: 0;
  font-weight: 700;
  font-size: var(--ds-font-size-16, 1.6rem);
  line-height: 1.5;
  color: var(--ds-color-brand-dark, #343a48);
  white-space: nowrap;
}
.about-history-v3__desc {
  margin: 0;
  font-weight: 400;
  font-size: var(--ds-font-size-16, 1.6rem);
  line-height: 1.5;
  /* Figma #374151 → DS gray-70 (#464c53) 근사 매칭 (RGB 거리 ~22, 통상 흡수 범위) */
  color: var(--ds-color-gray-70, #464c53);
}

/* ── 접근성: reduced-motion 시 트랜지션 차단 ── */
@media (prefers-reduced-motion: reduce) {
  .about-history-v3__watermark-layer,
  .about-history-v3__photo { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   PC 전용 (≥1200px) — ptart 스타일 fade-up 인터랙션
   - 좌측 미디어: sticky 해제 → 사진을 컬럼 상/중/하 분산 배치 (justify-content: space-between)
   - 사진: 스크롤 진입 시 1회 페이드-업
   - 워터마크 큰 연도 타이포: sticky로 스크롤 따라다님 + 연도 변경 시 cross-fade (기존 동작 유지)
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  /* 미디어 영역: flex column. gap은 0으로 두고 photo의 margin-top으로 간격 부여
     (이유: 워터마크 wrapper가 flex 첫 자식이라 flex gap이 photo--1 앞에 잘못 들어감) */
  .about-history-v3__media {
    position: relative;
    top: auto;
    align-self: stretch;
    height: auto;
    overflow: visible;
    isolation: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* 두 번째 이후 사진 margin-top = year list gap과 동일 */
  .about-history-v3__photo + .about-history-v3__photo {
    margin-top: 12rem;
  }

  /* 연도 리스트 gap — 섹션 간 breathing 확대 (기본 8rem → 12rem) */
  .about-history-v3__list {
    gap: 12rem;
  }

  /* 각 연도 섹션 min-height = 사진 높이 (모두 38rem로 통일) */
  .about-history-v3__year {
    min-height: 38rem;
  }

  /* 워터마크 — PC에선 숨김 (각 사진 아래 ::after로 연도 타이포그래피 표시) */
  .about-history-v3__watermark { display: none; }

  /* 사진: 일반 흐름 (relative) + 페이드-업. overflow 기본(hidden) 유지 */
  .about-history-v3__photo {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: translateY(40px);
    transition: transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 600ms ease;
    flex-shrink: 0;
  }

  /* 사진 크기 통일 — 모든 사진 50rem × 38rem (좌·우 alternation 대비 강화) */
  .about-history-v3__photo--1,
  .about-history-v3__photo--3,
  .about-history-v3__photo--5 {
    width: 50rem;
    height: 38rem;
    align-self: flex-end;
    margin-right: var(--ds-number-40, 8rem);
  }
  .about-history-v3__photo--2,
  .about-history-v3__photo--4 {
    width: 50rem;
    height: 38rem;
    align-self: flex-start;
    margin-left: 0;
  }
}

/* 태블릿 (768~1199px) — 좌측 컬럼 비율 축소, 패럴랙스 유지 */
@media (max-width: 1199px) {
  .about-history-v3 {
    grid-template-columns: 1fr 1fr;
    gap: var(--ds-number-15, 3rem);
    max-width: 100%;
    padding-inline: var(--ds-number-15, 3rem);
  }
  .about-history-v3__watermark-layer { font-size: 16rem; letter-spacing: -0.4rem; }
  .about-history-v3__year-label { font-size: 4.8rem; } /* 64 → 48 */
  .about-history-v3__photo--1,
  .about-history-v3__photo--3 { right: 0; width: 100%; max-width: 38rem; height: 26rem; }
  .about-history-v3__photo--2 { width: 100%; max-width: 32rem; height: 22rem; top: 56rem; }
  .about-history-v3__photo--3 { top: 88rem; }
  /* 태블릿·모바일에선 신규 사진 2장은 숨김 (기존 3장 cross-fade 동작 그대로 유지) */
  .about-history-v3__photo--4,
  .about-history-v3__photo--5 { display: none; }
  .about-history-v3__list { gap: var(--ds-number-30, 6rem); } /* 80 → 60 */
}

/* 모바일 (≤767px) — 사진+연혁 교차 stack: photo→year→photo→year… */
@media (max-width: 767px) {
  /* 컨테이너: flex column으로 변경 (grid → flex) */
  .about-history-v3 {
    display: flex;
    flex-direction: column;
    gap: var(--ds-number-20, 4rem);
    grid-template-columns: none;
    padding-inline: var(--ds-number-10, 2rem);
  }
  /* media와 list 래퍼는 display: contents로 투명하게 → 사진과 연도가 .about-history-v3의 직접 자식이 됨 */
  .about-history-v3__media,
  .about-history-v3__list {
    display: contents;
  }
  /* 워터마크 숨김 (모바일에서는 사용 안 함) */
  .about-history-v3__watermark { display: none; }

  /* 사진: 모바일 풀 폭, 일반 흐름. 페이드-업/cross-fade 트랜스폼 강제 비활성 */
  .about-history-v3__photo {
    position: relative !important;
    top: auto;
    left: auto;
    right: auto;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 60 / 38;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important; /* photo--4, --5도 강제로 노출 (태블릿 display:none override) */
    background: var(--ds-color-secondary-5, #eef2f7);
    overflow: hidden;
  }
  /* 사진 4·5도 모바일에선 노출 (태블릿 룰 override 한 번 더 강조) */
  .about-history-v3__photo--4,
  .about-history-v3__photo--5 { display: block !important; }

  /* 사진과 연도 교차 순서 — photo-1 → 2024 → photo-2 → 2023 → … */
  .about-history-v3__photo--1 { order: 1; }
  .about-history-v3__year[data-year="2024"] { order: 2; }
  .about-history-v3__photo--2 { order: 3; }
  .about-history-v3__year[data-year="2023"] { order: 4; }
  .about-history-v3__photo--3 { order: 5; }
  .about-history-v3__year[data-year="2022"] { order: 6; }
  .about-history-v3__photo--4 { order: 7; }
  .about-history-v3__year[data-year="2021"] { order: 8; }
  .about-history-v3__photo--5 { order: 9; }
  .about-history-v3__year[data-year="2020"] { order: 10; }

  /* 연도 섹션 min-height 해제 (PC 룰 override) */
  .about-history-v3__year { min-height: 0; }

  /* 연도 라벨: 64 → 32 (위계 단계 축소) */
  .about-history-v3__year-label {
    font-size: var(--ds-font-size-32, 3.2rem);
    letter-spacing: -0.1rem;
    margin-bottom: var(--ds-number-8, 1.6rem);
  }

  /* 항목: 날짜 width 축소 */
  .about-history-v3__item {
    grid-template-columns: 6.4rem 1fr; /* 80 → 64 */
  }
  .about-history-v3__date,
  .about-history-v3__desc {
    font-size: var(--ds-font-size-15, 1.5rem); /* 16 → 15 */
  }
  .about-history-v3__events { gap: var(--ds-number-5, 1rem); } /* 12 → 10 */
}


/* ════════════════════════════════════════════════════════════════
   PAGE: 110100 재단 비전 및 소개 (인사말 탭) — wrapper .about-greeting-v3
   적용: shared/publishing/fo/pages/재단소개_MNU-U-110000/재단비전및소개_MNU-U-110100/MNU-U-110100_재단비전및소개_design_v3.html (panel-greeting)
   Figma: node-id=13993-18445
   포인트:
   - full-bleed 카드 (본문 영역에서 한쪽으로 240px 빠져나감, 좌·우 alternating)
   - 사진이 카드 박스 위로 26~34px 빠져나옴 + 50px 그림자
   - 카드 안 인용구 (img_Quotes.svg 위/아래 + 강조 메시지)
   - 카드 외부 본문 + 우측 하단 사인(이미지)
   ════════════════════════════════════════════════════════════════ */

.about-greeting-v3 {
  display: flex;
  flex-direction: column;
  gap: 12rem; /* 이사장 ↔ 대표이사 섹션 간 120px */
}

.about-greeting-v3 .greeting-section {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-24, 4.8rem); /* 카드 ↔ 본문 48px */
}

/* ── 카드 (full-bleed) ─────────────────────────────────────
   .ds-tab__panel(컨테이너 1440) 안에서 카드만 240px 한쪽으로 빠져나감 */
.about-greeting-v3 .greeting-card {
  position: relative;
  height: 38.4rem; /* Figma 384 */
  display: flex;
  align-items: center;
  /* 시안 카드 width 1680 = 1440 + 240 */
  width: calc(100% + 24rem);
  isolation: isolate;
}
/* 이사장 카드 — 우측으로 풀, 좌측만 둥글게 (secondary-5) */
.about-greeting-v3 .greeting-card--chairman {
  margin-right: -24rem;
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;
  background: var(--ds-color-secondary-5, #eef2f7); /* 시안 정확 매칭 */
  padding-left: 12rem; /* 본문 padding 120 일치 — 인용구 시작점이 본문 텍스트 시작점과 align */
  padding-right: var(--ds-number-40, 8rem);
}
/* 대표이사 카드 — 좌측으로 풀, 우측만 둥글게 (gray-5) */
.about-greeting-v3 .greeting-card--ceo {
  margin-left: -24rem;
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
  background: var(--ds-color-gray-5, #f4f5f6); /* 시안 정확 매칭 */
  padding-left: var(--ds-number-40, 8rem);
  padding-right: 8rem; /* 본문 padding 80 일치 */
  justify-content: flex-end;
}

/* ── 인용구 (img_Quotes 위/아래 + 텍스트) ────────────────────── */
.about-greeting-v3 .greeting-card__quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-number-8, 1.6rem); /* 17px → 16 (가까움) */
  max-width: 38rem; /* 380 */
  z-index: 1;
}
.about-greeting-v3 .greeting-card__quote--right {
  align-items: flex-end;
  text-align: right;
  max-width: 45rem; /* 시안 444 — 가까움 */
}
.about-greeting-v3 .greeting-quote__mark {
  width: 4.2rem; /* 42 */
  height: 3.2rem; /* 32 */
  flex-shrink: 0;
}
.about-greeting-v3 .greeting-quote__mark--bottom {
  transform: rotate(180deg);
}
/* 대표이사 카드 — 따옴표 회색 톤 (이사장은 secondary 톤 유지) */
.about-greeting-v3 .greeting-section--ceo .greeting-quote__mark {
  filter: grayscale(100%);
}
.about-greeting-v3 .greeting-quote__text {
  margin: 0;
  font-family: var(--font-family-sans, 'Pretendard', sans-serif);
  font-weight: 300; /* Light */
  font-size: var(--ds-font-size-32, 3.2rem);
  line-height: 1.4;
  letter-spacing: -0.019rem;
  /* 시안 #1e293b — DS 토큰 없음, 직접값(brand-dark #343a48과 비슷) */
  color: #1e293b;
}
.about-greeting-v3 .greeting-quote__text strong {
  font-weight: 700;
}

/* ── 사진 (카드 위로 살짝 빠져나옴 + 그림자) ─────────────────── */
.about-greeting-v3 .greeting-card__photo {
  position: absolute;
  margin: 0;
  z-index: 2;
}
/* 사진 그림자 — 사방으로 부드럽게(X 0)으로 단순화. PC/태블릿 모두 viewport 끝 잘림 X */
.about-greeting-v3 .greeting-card__photo--chairman,
.about-greeting-v3 .greeting-card__photo--ceo {
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.1));
}
.about-greeting-v3 .greeting-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 이사장 사진 — top + bottom 명시로 카드 바닥과 사진 바닥 정확히 일치 */
.about-greeting-v3 .greeting-card__photo--chairman {
  width: 54.5rem;
  top: -3rem; /* 위로 살짝만 빠짐 */
  bottom: 0;  /* 카드 바닥과 정확 일치 */
  right: 24rem;
  height: auto;
}
.about-greeting-v3 .greeting-card__photo--chairman img {
  object-position: top center;
}
/* 대표이사 사진 — 동일 룰 */
.about-greeting-v3 .greeting-card__photo--ceo {
  width: 48.3rem;
  top: -3rem;
  bottom: 0;
  left: 24rem;
  height: auto;
}
.about-greeting-v3 .greeting-card__photo--ceo img {
  object-position: top center;
}

/* ── 본문 + 사인 ──────────────────────────────────────────── */
.about-greeting-v3 .greeting-body {
  padding-inline: 12rem; /* 시안 px-120 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--ds-number-12, 2.4rem);
}
.about-greeting-v3 .greeting-body--ceo {
  padding-inline: 8rem; /* 시안 px-80 */
}
.about-greeting-v3 .greeting-body__text {
  width: 100%;
}
.about-greeting-v3 .greeting-body__text p {
  margin: 0 0 var(--ds-number-8, 1.6rem);
  font-family: var(--font-family-sans, 'Pretendard', sans-serif);
  font-weight: 400;
  font-size: var(--ds-font-size-19, 1.9rem);
  line-height: 1.5;
  letter-spacing: -0.019rem;
  color: var(--ds-color-gray-70, #464c53); /* 시안 #464c53 정확 */
}
.about-greeting-v3 .greeting-body__text p:last-child {
  margin-bottom: 0;
}
/* 사인 — 우측 하단, 텍스트 + 사인 이미지 */
.about-greeting-v3 .greeting-body__sign {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-5, 1rem);
  margin: 0;
  font-weight: 600; /* SemiBold */
  font-size: var(--ds-font-size-16, 1.6rem);
  line-height: 1.5;
  color: #1e293b; /* 시안 매칭 */
}
.about-greeting-v3 .greeting-body__sign-img {
  height: 6.2rem; /* 62 */
  width: auto;
}

/* ════════════════════════════════════════════════════════════════
   R. 반응형 — 인사말 v3
   모바일 시안 없음 — 텍스트 위계 + 간격 단계 축소 룰 자동 적용 (스킬 Case D)
   ════════════════════════════════════════════════════════════════ */

/* 태블릿 (768~1199px) — 사진 크게 + 카드 height 사진과 align (회색 안 보이게) */
@media (max-width: 1199px) {
  .about-greeting-v3 { gap: 8rem; }
  .about-greeting-v3 .greeting-card {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 1.6rem;
    height: 32rem; /* 사진 height와 맞춤 */
    padding-block: 0;
  }
  /* 태블릿 사진 — PNG 비율(545/410)과 일치 → cover로 우측 그라데이션 잘림 X. 그림자 제거. */
  .about-greeting-v3 .greeting-card__photo--chairman,
  .about-greeting-v3 .greeting-card__photo--ceo {
    width: 48rem;
    aspect-ratio: 545 / 410; /* = 약 36rem height */
    height: auto;
    top: -4rem;
    bottom: auto;
    filter: none;
  }
  .about-greeting-v3 .greeting-card__photo--chairman { right: 4rem; }
  .about-greeting-v3 .greeting-card__photo--ceo { left: 4rem; }
  .about-greeting-v3 .greeting-card__quote { padding-block: var(--ds-number-15, 3rem); }
  .about-greeting-v3 .greeting-quote__text { font-size: 2.4rem; }
  .about-greeting-v3 .greeting-body { padding-inline: var(--ds-number-20, 4rem); }
  .about-greeting-v3 .greeting-body--ceo { padding-inline: var(--ds-number-20, 4rem); }
  .about-greeting-v3 .greeting-body__text p {
    font-size: var(--ds-font-size-17, 1.7rem); /* 19 → 17 */
  }
}

/* 모바일 (≤767px) — 카드 안 인용구 위 / 사진 아래 (normal flow), 갭 작게 */
@media (max-width: 767px) {
  .about-greeting-v3 { gap: 6rem; }
  .about-greeting-v3 .greeting-section { gap: var(--ds-number-15, 3rem); }
  .about-greeting-v3 .greeting-card {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 1.2rem 1.6rem 0; /* 카드 padding-top 더 축소 (16 → 12) */
    height: auto;
    min-height: auto;
    border-radius: 1.2rem;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }
  .about-greeting-v3 .greeting-card__quote,
  .about-greeting-v3 .greeting-card__quote--right {
    order: 1;
    max-width: 100%;
    align-items: center;
    text-align: center;
    gap: 0.2rem; /* 따옴표 ↔ 텍스트 갭 더 축소 (4 → 2) */
  }
  /* 사진 — fixed width 더 작게 (220 → 180), 인용구 ↔ 사진 갭 추가 축소 */
  .about-greeting-v3 .greeting-card__photo--chairman,
  .about-greeting-v3 .greeting-card__photo--ceo {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: 18rem; /* 220 → 180 — 박스 높이 축소 */
    max-width: 100%;
    aspect-ratio: 545 / 410;
    height: auto;
    margin: 0.4rem auto 0; /* 인용구 ↔ 사진 갭 더 축소 (10 → 4) */
    filter: none;
  }
  /* 모바일 따옴표 SVG — 작게 (PC 42×32 → 28×22) */
  .about-greeting-v3 .greeting-quote__mark {
    width: 2.8rem;
    height: 2.2rem;
  }
  /* 모바일 인용구 텍스트 — 16px */
  .about-greeting-v3 .greeting-quote__text { font-size: var(--ds-font-size-16, 1.6rem); }
  .about-greeting-v3 .greeting-body,
  .about-greeting-v3 .greeting-body--ceo {
    padding-inline: var(--ds-number-10, 2rem);
  }
  .about-greeting-v3 .greeting-body__text p {
    font-size: var(--ds-font-size-15, 1.5rem);
  }
  /* 모바일 사인 — 2/3 크기로 축소 */
  .about-greeting-v3 .greeting-body__sign {
    font-size: var(--ds-font-size-12, 1.2rem); /* 14 → 12 */
  }
  .about-greeting-v3 .greeting-body__sign-img { height: 3.2rem; /* 4.8 → 3.2 */ }
}