/* space-page-v3.css
 * Generated by Phase 4 (safe-merge) for (공간대관_MNU-U-070000, v3)
 * Source CSS (in cascade order): space-page-v3.css
 */

/* === source: space-page-v3.css === */
/* ============================================================
   SPACE PAGE v3 — 공간·대관 모듈(MNU-U-070000) v3 페이지 전용 스타일
   2026 Figma 시안 반영 (공간안내)
   적용 파일:
     - MNU-U-070100_공간안내_design_v3.html
   격리: .space-info wrapper 하위에서만 적용 (다른 페이지 영향 없음)
   self-contained: space-page.css 의존성 없음 (필요 base 룰 모두 포함)

   토큰 매핑 주석:
     Figma 48px / 44px / 18px → DS font-size 가까운 값 + 매핑 주석
     기타 모든 px는 DS number/size/color 토큰과 정확 일치
   ============================================================ */


/* ==================== BASE LAYER ====================
   ds-tab/ds-detail-attach 등 DS 컴포넌트는 output.css에서 옴.
   v2의 space-page.css에서 page 전용 base는 가져오지 않음 (시안 디자인이 완전 다름) */



/* ==================== V01. 1차 탭 (시설 선택) ==================== */
.space-info .ds-tab,
.space-info .ds-tab--bold {
  margin-top: var(--ds-number-15);                      /* 30px */
  margin-bottom: var(--ds-number-20);                   /* 40px */
}

/* [작업지침 케이스 B] TAB↔CONTENT 50/28/16, CONTENT↔FOOTER 100/100/100
   — PC는 탭(.facility-tab), 태블릿·모바일은 셀렉트(.facility-tab-mobile)가 보이므로 둘 다 하단 간격 부여. */
.sub-page-wrap.space-info > .ds-tab.facility-tab { margin-bottom: 5rem; }                   /* 50 — PC(탭) */
.sub-page-wrap.space-info > .facility-tab-mobile { margin-bottom: var(--ds-number-14); }    /* 28 — 태블릿(셀렉트) */
@media (max-width: 767px) { .sub-page-wrap.space-info > .facility-tab-mobile { margin-bottom: var(--ds-number-8); } } /* 16 — 모바일 */
@media (max-width: 1199px) { .sub-page-wrap.space-info { margin-bottom: 10rem; } }           /* CONTENT↔FOOTER 100 (케이스 B) */


/* ==================== V02. Hero — 평택아트센터는 ... + 이미지 + CTA ==================== */
/* 풀 블리드 Hero — 전체 뷰포트 폭, 좌 텍스트 + 우 사다리꼴 이미지 */
.space-info .space-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;                       /* 좌·우 50:50 */
  align-items: start;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 72rem;                                    /* 720px 최소 높이 */
  overflow: hidden;                                     /* skew 미디어 우측 블리드 차단 (도트는 inline-block으로 변경되어 무관) */
}
/* 데스크탑 미디어 클립 래퍼 — skew 우측 블리드 차단 (도트와 분리) */
.space-info .space-hero__media-clip {
  position: absolute;
  top: 0;
  bottom: 0;                                            /* height:100% 대신 — hero height:auto여도 안전하게 채움 */
  right: 0;
  width: 55%;                                           /* 미디어 55% 영역 커버 */
  overflow: hidden;                                     /* skew 우측 블리드 차단 */
  z-index: 1;
}

/* 좌측 텍스트 영역 */
.space-info .space-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-12);                             /* 24px */
  padding: var(--ds-number-30) var(--ds-number-20);
  padding-left: max(var(--ds-number-20), calc((100vw - 144rem) / 2)); /* 컨테이너 정렬 */
  z-index: 2;
}

/* 큰 타이틀 — Bold "평택아트센터는" + Regular 두 줄 */
.space-info .space-hero__title {
  font-size: clamp(2.2rem, calc(3.27vw - 0.31rem), 4.4rem); /* fluid: 22px@768 → 44px@1440 */
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.4;
  letter-spacing: -0.022em;                             /* -0.96/48 */
  color: var(--ds-color-gray-90);                       /* #1e2124 */
  margin: 0;
  position: relative;
}
.space-info .space-hero__title strong {
  font-weight: var(--ds-typo-font-weight-bold);
}

/* "다" + 도트 한 단위로 묶어 줄바꿈 시 분리 방지 */
.space-info .space-hero__title-tail {
  white-space: nowrap;
}

/* 타이틀 옆 빨강 원형 데코 이미지 (ic_red_circle.png) — "다" 바로 뒤 인라인 배치 */
.space-info .space-hero__title-deco {
  display: inline-block;
  vertical-align: middle;
  width: clamp(3.4rem, calc(4.61vw - 0.14rem), 6.5rem); /* fluid: 34px@768 → 65px@1440 */
  height: clamp(3.4rem, calc(4.61vw - 0.14rem), 6.5rem);
  object-fit: contain;
  position: relative;
  left: -1rem;                                          /* 왼쪽 10px */
  top: 1rem;                                            /* 아래 10px */
}

/* 본문 설명 */
.space-info .space-hero__desc {
  font-size: clamp(1.5rem, calc(0.6vw + 1.04rem), 1.9rem); /* fluid: 15px@768 → 19px@1440 */
  font-weight: var(--ds-typo-font-weight-regular);
  line-height: 1.55;                                    /* 28/18 */
  letter-spacing: -0.019em;
  color: var(--ds-color-gray-70);                       /* #464c53 */
  max-width: 54rem;                                     /* 540px */
  margin: 0;
}

/* 우측 사다리꼴 이미지 영역 — skew 경사면 */
.space-info .space-hero__media {
  position: absolute;
  top: 0;
  bottom: 0;                                            /* height:100% 대신 — clip height:auto여도 안전하게 채움 */
  right: -7%;                                           /* 우측 여백 확보 (clip overflow:hidden이 처리) */
  width: 95%;                                           /* clip 내 이미지 폭: 좌측 여백이 생겨 사다리꼴 대각 가시 */
  border-top-left-radius: 4rem;                         /* 사다리꼴 좌상단 라운드 */
  transform: skewX(-12deg);                             /* 왼쪽 아래로 경사지게 기울임 */
  transform-origin: bottom left;                        /* 좌측 하단 고정 스큐 */
  overflow: hidden;
}
/* 사다리꼴 마스크 대신 skew 사용 — 가상 요소 제거 */
.space-info .space-hero__media::before {
  display: none;
}
.space-info .space-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: skewX(12deg) scale(1.15);                  /* 역방향 복구 + 스케일 여유 */
  transform-origin: bottom left;
}

/* 정보 리스트 (위치/규모/문의/유의사항 — 660px) */
.space-info .space-info-list {
  display: flex;
  flex-direction: column;
  width: 66rem;                                         /* 660px */
  max-width: 100%;
  margin-top: var(--ds-number-15);                      /* 30px */
}
.space-info .space-info-list__row {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-number-2);                              /* 4px */
  padding: var(--ds-number-7) 0;                        /* 14px */
  border-top: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
}
.space-info .space-info-list__row:first-child {
  border-top: none;
}
.space-info .space-info-list__label {
  width: 8rem;                                          /* 80px */
  flex-shrink: 0;
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-70);                       /* #464c53 */
  line-height: 1.6;                                     /* 25.6/16 */
}
.space-info .space-info-list__value {
  font-size: var(--ds-font-size-17);
  font-weight: var(--ds-typo-font-weight-semibold);
  color: var(--ds-color-gray-90);                       /* #1e2124 */
  line-height: 1.882;                                   /* 32/17 */
}

/* CTA — 대관 신청하기 (다크 fill + arrow)
   시안 스펙 280×56이 페이지 컨텍스트에 비해 시각상 컸음.
   ds-btn--l 사이즈(48px/32px/19px)로 한 단계 축소 + min-width 220 */
.space-info .space-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 28rem;                                     /* 280px (시안 원본 스펙) */
  width: 100%;
  min-height: var(--ds-number-24);                      /* 48px (ds-btn--l 사이즈) */
  padding: var(--ds-number-6) var(--ds-number-16);      /* 12px 32px */
  gap: var(--ds-number-4);                              /* 8px (icon ↔ text) */
  background: var(--ds-color-primary-90);               /* #001927 */
  color: var(--ds-color-gray-0);
  border: none;
  border-radius: var(--ds-radius-small);                /* 6px */
  font-size: var(--ds-font-size-19);                    /* 19px (label-large) — 시안 21 → 19 */
  font-weight: var(--ds-typo-font-weight-bold);
  text-decoration: none;
  margin-top: var(--ds-number-15);                      /* 30px */
  cursor: pointer;
}
.space-info .space-cta:hover {
  background: color-mix(in srgb, var(--ds-color-primary-90) 85%, white);
}
.space-info .space-cta__icon {
  width: var(--ds-number-10);                           /* 20px (24 → 20) */
  height: var(--ds-number-10);
  flex-shrink: 0;
}


/* ==================== V03. 배경 블록 (Section — 풀 폭) ==================== */
/* 풀 폭 배경 — 좌우 컨테이너를 벗어나 화면 전체로 */
.space-info .space-section {
  width: 100vw;
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(4rem, calc(8.93vw - 2.86rem), 10rem) max(var(--ds-number-20), calc((100vw - 144rem) / 2)); /* 수직 fluid: 40px@768 → 100px@1440 / 수평: Hero와 동일한 1440px 컨테이너 기준 */
}
/* 옅은 배경 (부대시설 등) */
.space-info .space-section--light {
  background: rgba(238, 242, 247, 0.5);                 /* secondary-5 50% */
}
/* 다크 배경 (보유공연장) */
.space-info .space-section--dark {
  background: var(--ds-color-gray-90);                  /* #1e2124 */
  color: var(--ds-color-gray-0);
}
/* 보유공연장 섹션 특정: 상하 패딩 제거 (이미지 풀블리드) */
.space-info .space-section--stage {
  padding-top: 0;
  padding-bottom: 0;
}
/* 다운로드 (흰 배경 — 기본) */
.space-info .space-section--plain {
  background: transparent;
  padding-bottom: 5rem;                                   /* PC: 100px → 50px */
}

/* Section 안 inner 컨테이너 (max-width 없음 100% 폭 활용 가능) */
.space-info .space-section__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 25rem 1fr;                     /* 250px 헤더 + 가변 콘텐츠 */
  gap: var(--ds-number-12);                             /* 24px */
  align-items: start;
}

/* 섹션 좌측 헤딩3 (Facilities + 부대시설 / Download + 무대기술 자료 등) */
.space-info .space-heading3 {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-2);                              /* 4px */
  min-width: 25rem;                                     /* 250px */
}
.space-info .space-heading3__label {
  font-size: var(--ds-font-size-14);
  font-weight: var(--ds-typo-font-weight-light, 300);
  letter-spacing: 0.1em;                                /* 1.4/14 */
  text-transform: uppercase;
  color: var(--ds-color-gray-60);                       /* #58616a */
  margin: 0;
}
.space-info .space-heading3__title {
  font-size: 4rem;
  font-weight: var(--ds-typo-font-weight-semibold);
  letter-spacing: -0.0023em;                            /* -0.1/44 */
  color: var(--ds-color-gray-90);                       /* #1e2124 */
  margin: 0;
  line-height: 1.2;
}
/* 다크 섹션 안 헤딩 흰색 */
.space-info .space-section--dark .space-heading3__title {
  color: var(--ds-color-gray-0);
}
.space-info .space-section--dark .space-heading3__label {
  color: var(--ds-color-gray-30);
}


/* ==================== V04. 부대시설 카드 그리드 (3 col) ==================== */
.space-info .space-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-number-20);                             /* 40px */
}
.space-info .space-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-8);                              /* 16px */
}
/* 번호 (01, 02, 03) — 빨강 Light 20px */
.space-info .space-card__number {
  font-size: var(--ds-font-size-20);                    /* 20px */
  font-weight: var(--ds-typo-font-weight-light, 300);
  letter-spacing: 0.02em;                               /* 0.4/20 */
  color: var(--ds-color-brand-red-aa);                  /* #e03010 (시안 #e9401b 가까움) */
  margin: 0;
  line-height: 1;
}
/* 카드 타이틀 (전시실, 세미나실 등) — SemiBold 32px */
.space-info .space-card__title {
  font-size: clamp(2rem, calc(1.79vw + 0.63rem), 3.2rem); /* fluid: 20px@768 → 32px@1440 */
  font-weight: var(--ds-typo-font-weight-semibold);
  color: var(--ds-color-gray-95);                       /* #131416 */
  letter-spacing: -0.007em;                             /* -0.22/32 */
  line-height: 0.894;                                   /* 28.6/32 */
  margin: 0;
}
/* 카드 설명 */
.space-info .space-card__desc {
  font-size: var(--ds-font-size-16);                    /* 16px */
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-70);                       /* #464c53 */
  letter-spacing: -0.012em;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;                                         /* 문단 짧아도 하단 내용(운영시간/이미지) 맞춰 정렬 */
}
/* 운영 정보 박스 (운영시간/운영요일/비용) */
.space-info .space-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-2);                              /* 4px */
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-thin) solid var(--ds-color-secondary-5); /* #eef2f7 */
  border-radius: var(--ds-radius-small);                /* 6px */
  padding: var(--ds-number-5) var(--ds-number-6);       /* 10px 12px */
}
/* 운영시간·운영요일·규모 등 정보 행이 하나도 없으면 빈 박스(흰 배경/보더/패딩) 미표시.
   JSTL c:if 결과 .space-card__info-row 가 0개일 때 박스 통째 숨김(공백 텍스트 노드 영향 없는 :has 사용) */
.space-info .space-card__info:not(:has(.space-card__info-row)) {
  display: none;
}
.space-info .space-card__info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.space-info .space-card__info-label {
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-color-gray-90);
}
.space-info .space-card__info-value {
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-70);
}
/* 카드 이미지 */
.space-info .space-card__image {
  width: 100%;
  height: 19rem;                                        /* 190px */
  border-radius: var(--ds-radius-small);                /* 6px */
  overflow: hidden;
  background: var(--ds-color-gray-10);
}
.space-info .space-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── venue-slider (카드 이미지 슬라이드) ── */
.space-info .venue-slider {
  position: relative;
  overflow: hidden;
}
.space-info .venue-slider__track {
  display: flex;
  height: 100%;
  transition: transform 0.4s ease;
}
.space-info .venue-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
}
.space-info .venue-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 숫자형 탐색 바 — 하단 가운데 고정 */
.space-info .venue-slider__nav {
  position: absolute;
  bottom: var(--ds-number-4);                           /* 8px */
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-1);                              /* 2px */
  background: rgba(0, 0, 0, 0.48);
  border-radius: var(--ds-radius-max);
  padding: var(--ds-number-1) var(--ds-number-3);       /* 2px 6px */
  z-index: 2;
}
.space-info .venue-slider__btn--prev,
.space-info .venue-slider__btn--next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-number-7);                            /* 14px */
  height: var(--ds-number-7);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
}
.space-info .venue-slider__btn--prev svg,
.space-info .venue-slider__btn--next svg {
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

/* ── 공연장(space-stage) 캐러셀 컨트롤 — 대형 히어로 전용: 좌우 대형 화살표 + 하단 dot 인디케이터.
   작은 카드 슬라이더(.space-card__image .venue-slider)에는 미적용(스코프 .space-stage__media). ── */
.space-info .space-stage__media .venue-slider__btn--side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4.4rem;                                        /* 44px 탭 타겟 */
  height: 4.4rem;
  border-radius: var(--ds-radius-max);
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.95);
  z-index: 3;
  transition: background 0.2s ease;
}
.space-info .space-stage__media .venue-slider__btn--side:hover {
  background: rgba(0, 0, 0, 0.66);
}
.space-info .space-stage__media .venue-slider__btn--prev.venue-slider__btn--side { left: var(--ds-number-12, 2.4rem); }  /* 이미지 좌측 padding 안쪽 */
.space-info .space-stage__media .venue-slider__btn--next.venue-slider__btn--side { right: var(--ds-number-12, 2.4rem); } /* 이미지 우측 padding 안쪽 */
.space-info .space-stage__media .venue-slider__btn--side svg {
  width: 2rem;
  height: 2rem;
}
/* 하단 dot 인디케이터 */
.space-info .space-stage__media .venue-slider__dots {
  position: absolute;
  bottom: var(--ds-number-12, 2.4rem);                  /* 이미지 하단 padding 안쪽 */
  left: 50%;                                            /* 이미지 정중앙 */
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--ds-number-4, 0.8rem);
  z-index: 3;
}
.space-info .space-stage__media .venue-slider__dot {
  width: 1rem;                                          /* 10px */
  height: 1rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
.space-info .space-stage__media .venue-slider__dot.is-active {
  background: rgba(255, 255, 255, 0.95);
  width: 2.4rem;                                        /* 활성 dot 알약형 */
  border-radius: var(--ds-radius-max);
}
/* PC(≥1200): 공연장 미디어가 우측 화면 끝까지 풀블리드되어 미디어 우측이 화면 밖으로 넘침.
   컨트롤은 풀블리드 역보정으로 "보이는 영역" 기준 배치 —
   > 화살표는 화면 우측 끝 안쪽 ~24px, dot은 보이는 이미지(미디어좌측~화면우측) 정중앙.
   < 화살표는 미디어 좌측이 오버슈트하지 않으므로 base(left 24px) 그대로 사용. */
@media (min-width: 1200px) {
  .space-info .space-stage__media .venue-slider__btn--next.venue-slider__btn--side {
    /* 풀블리드 역보정 → 화면 우측 끝에서 안쪽 24px (= < 화살표의 이미지 좌측 인셋과 동일).
       안쪽거리 = (더한값) - gap/2. 2.4rem(--ds-number-12)= < 인셋, 2rem(--ds-number-10)= gap/2 보정 */
    right: calc(100% - 50vw + var(--ds-number-12, 2.4rem) + var(--ds-number-10, 2rem));
  }
  .space-info .space-stage__media .venue-slider__dots {
    left: calc(25vw - 10px);                                /* 풀블리드 역보정 → 보이는 이미지 정중앙 */
  }
}
.space-info .venue-slider__counter {
  font-size: 1.2rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  min-width: 3.6rem;
  text-align: center;
}


/* ==================== V05. 보유공연장 (다크 섹션 + 토글 + Descriptions + 큰 이미지) ==================== */
/* stage 모드 섹션의 inner는 1열 (좌 헤더 25rem 그리드 해제 — 헤더는 stage content 안으로 이동) */
.space-info .space-section--stage .space-section__inner {
  grid-template-columns: 1fr;
}
.space-info .space-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* 정본 50:50 유지 + 다수 토글이 좌측 컬럼을 밀어내지 않도록 minmax(0) */
  gap: var(--ds-number-20);
  align-items: stretch;
  min-height: 70rem;                                    /* 700px */
  max-height: 70rem;                                    /* 최대 높이 700px */
  position: relative;
}
.space-info .space-stage__content {
  padding: var(--ds-number-15) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;                              /* 컨텐츠 세로 중앙 정렬 */
  gap: var(--ds-number-20);                             /* 40px (heading↔toggle↔desc↔list 사이) */
}

/* 토글 (대공연장/소공연장) — pill 형태 + 슬라이드 indicator
   align-self:flex-start로 부모 stretch 무력화하여 자연 폭 */
.space-info .space-toggle {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  position: relative;
  padding: var(--ds-number-2);                          /* 4px */
  border: var(--ds-border-width-thin) solid rgba(255, 255, 255, 0.3);
  border-radius: var(--ds-radius-max);
  --toggle-ind-left: 0;                                 /* JS가 활성 버튼 offsetLeft 주입 */
  --toggle-ind-width: 0;                                /* JS가 활성 버튼 offsetWidth 주입 */
  max-width: 100%;                                      /* 공연장 多: 컬럼 폭 초과 방지 */
  overflow-x: auto;                                     /* 넘치면 단일행 가로 스크롤(정본 레이아웃 유지) */
  scrollbar-width: none;                                /* 스크롤바 숨김(Firefox) */
}
.space-info .space-toggle::-webkit-scrollbar { display: none; } /* 스크롤바 숨김(WebKit) */
/* 슬라이드 indicator — 절대 위치, transform으로 부드럽게 이동 */
.space-info .space-toggle::before {
  content: '';
  position: absolute;
  top: var(--ds-number-2);                              /* 4px */
  left: 0;                                              /* 위치는 JS가 --toggle-ind-left로 지정 */
  height: calc(100% - var(--ds-number-4));              /* 100% - 8px */
  width: var(--toggle-ind-width, 0);                    /* JS: 활성 버튼 실제 폭 */
  background: var(--ds-color-brand-red-aa);             /* #e03010 */
  border-radius: var(--ds-radius-max);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transform: translateX(var(--toggle-ind-left, 0));     /* JS: 활성 버튼 실제 offsetLeft */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
.space-info .space-toggle__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 13.2rem;                                   /* 132px */
  height: var(--ds-number-20);                          /* 40px */
  padding: var(--ds-number-6) var(--ds-number-20);      /* 12px 40px */
  background: transparent;
  border: none;
  border-radius: var(--ds-radius-max);
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-color-gray-0);
  cursor: pointer;
  transition: font-weight 0.2s ease;
}
.space-info .space-toggle__btn.is-active,
.space-info .space-toggle__btn[aria-selected="true"] {
  font-weight: var(--ds-typo-font-weight-bold);
}

/* 다크 섹션의 설명 텍스트 (흰) */
.space-info .space-stage__desc {
  font-size: clamp(1.5rem, calc(0.6vw + 1.04rem), 1.9rem); /* fluid: 15px@768 → 19px@1440 */
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-0);
  line-height: 1.6;
  letter-spacing: -0.01em;
  max-width: 55.2rem;                                   /* 552px */
  margin: 0;
}

/* 토글(대공연장/소공연장) 패널 전환 — UA [hidden]이 클래스 셀렉터의 display에 밀려 무시되는 것을 강제 */
.space-info [data-stage-panel][hidden] {
  display: none;
}

/* 다크 Descriptions (흰 글씨) */
.space-info .space-stage .space-info-list {
  width: 47.4rem;                                       /* 474px */
  margin-top: 0;
}
.space-info .space-stage .space-info-list__row {
  border-top-color: var(--ds-color-gray-70);            /* #464c53 (어두운 보더) */
}
.space-info .space-stage .space-info-list__label {
  width: 11rem;                                         /* 110px */
  color: var(--ds-color-gray-0);
}
.space-info .space-stage .space-info-list__value {
  color: var(--ds-color-gray-0);
}

/* 우측 큰 이미지 + 좌측 그라데이션 마스크 */
/* 이미지 전체로 깔기 (우측 0까지 확장, 풀 블리드 효과) */
.space-info .space-stage__media {
  position: relative;
  height: 100%;
  max-height: 70rem;
  overflow: hidden;
  border-radius: var(--ds-radius-large) 0 0 var(--ds-radius-large); /* 우측 각지게 (풀블리드 유지) */
  margin-right: calc(50% - 50vw);                       /* 오른쪽 화면 끝까지 풀 블리드 (유지) */
}
.space-info .space-stage__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.space-info .space-stage__media::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 48rem;                                         /* 481px */
  height: 100%;
  background: linear-gradient(to right, var(--ds-color-gray-90), rgba(30, 33, 36, 0));
  pointer-events: none;
  z-index: 1;
}


/* ==================== V06. 무대기술 자료 다운로드 카드 (3 col) ==================== */
.space-info .space-download-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));     /* minmax(0,1fr) — 컬럼 경계 강제 준수 */
  gap: var(--ds-number-20);                             /* 40px */
}
.space-info .space-download-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-4);                              /* 8px */
  background: rgba(238, 242, 247, 0.5);                 /* secondary-5 50% */
  border-radius: var(--ds-radius-xlarge);               /* 16px (시안 20px 가까움) */
  padding: var(--ds-number-10);                         /* 20px */
  min-width: 0;                                         /* 그리드 컬럼 shrink 시 카드도 함께 shrink → 파일명 ellipsis 트리거 */
}
.space-info .space-download-card__header {
  display: flex;
  align-items: center;
  gap: var(--ds-number-4);                              /* 8px */
  margin-bottom: var(--ds-number-2);                    /* 4px */
}
.space-info .space-download-card__icon {
  width: var(--ds-number-9);                            /* 18px */
  height: var(--ds-number-9);
  flex-shrink: 0;
  color: var(--ds-color-gray-90);
}
.space-info .space-download-card__title {
  font-size: var(--ds-font-size-19);
  font-weight: var(--ds-typo-font-weight-bold);
  color: var(--ds-color-gray-90);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.6;
}

/* 다운로드 항목 — DS의 ds-detail-attach 패턴 활용 + 페이지 컨텍스트 미세 조정 */
.space-info .space-download-card .ds-detail-attach__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-4);                              /* 8px */
}
.space-info .space-download-card .ds-detail-attach__item {
  display: flex;
  align-items: center;
  gap: var(--ds-number-4);                              /* 8px */
  padding: var(--ds-number-5) var(--ds-number-6);       /* 10px 12px */
  background: var(--ds-color-gray-0);
  border-radius: var(--ds-radius-small);                /* 6px */
  min-width: 0;                                         /* flex 행도 shrink 허용 → 내부 link text-overflow 발동 */
}
.space-info .space-download-card .ds-detail-attach__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;                                    /* 36px */
  padding: var(--ds-number-1) var(--ds-number-3);       /* 2px 6px */
  background: var(--ds-color-gray-10);                  /* #e6e8ea */
  border-radius: var(--ds-radius-small);
  font-size: var(--ds-font-size-13);                    /* 13px (15px - 2px) */
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-70);                       /* #464c53 */
  text-transform: uppercase;
  flex-shrink: 0;
}
.space-info .space-download-card .ds-detail-attach__link {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--ds-font-size-16);
  font-weight: var(--ds-typo-font-weight-regular);
  color: var(--ds-color-gray-90);                       /* #1e2124 */
  text-decoration: none;
  letter-spacing: -0.012em;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.space-info .space-download-card .ds-detail-attach__download {
  width: var(--ds-number-9);                            /* 18px */
  height: var(--ds-number-9);
  flex-shrink: 0;
  color: var(--ds-color-gray-70);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ==================== R. 반응형 — 태블릿 스케일링 (768~1199px) ==================== */
@media (max-width: 1199px) {
  /* 히어로 섹션 스택 처리 */
  .space-info .space-hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: visible;                                    /* 100vw 미디어가 잘리지 않게 (모바일과 동일) */
  }
  .space-info .space-hero__text {
    width: 100%;
    max-width: 100%;
    padding: 4rem var(--ds-number-20) 6rem;             /* 하단 6rem — 사다리꼴 이미지와의 간격 확보 */
    gap: var(--ds-number-8);                            /* 16px — PC 24px → mobile 14px 사이 */
    order: 1;
  }
  /* CTA — 갭 축소 + 사이즈 한 단계 작게 (ds-btn--m 사이즈 감) */
  .space-info .space-cta {
    margin-top: 0;
    max-width: 22rem;                                   /* 220px (PC 280 → 220) */
    min-height: var(--ds-number-20);                    /* 40px (PC 48 → 40) */
    padding: var(--ds-number-5) var(--ds-number-12);    /* 10px 24px */
    font-size: var(--ds-font-size-17);                  /* 17px (PC 19 → 17) */
  }
  .space-info .space-hero__media-clip {
    position: static;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 48rem;
    overflow: hidden;
    /* 사다리꼴 좌상단을 PC와 동일하게 라운드 (radius ≈ 4rem 호 근사) */
    clip-path: polygon(13.4rem 0%, 100% 0%, 100% 100%, 0% 100%, 9.5rem 3.2rem, 10rem 1.9rem, 10.9rem 0.9rem, 12.1rem 0.2rem);
    order: 2;
  }
  .space-info .space-hero__media {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    transform: none;
    transform-origin: initial;
  }
  .space-info .space-hero__media img {
    transform: none;
    transform-origin: initial;
  }
  
  /* 컨텐츠 1열 스택 (타이틀 상단, 컨텐츠 하단) — 패딩은 PC clamp에 위임 */
  .space-info .space-section__inner {
    grid-template-columns: 1fr;
    gap: var(--ds-number-15);
  }

  /* 폰트 스케일링은 PC base의 clamp()가 fluid로 처리 — 별도 오버라이드 불필요 */
  .space-info .space-hero__desc {
    max-width: none;                                    /* 너비 제한 해제 → 전체폭 활용해서 2줄 */
  }
  .space-info .space-info-list {
    margin-top: var(--ds-number-8);                     /* 16px — PC 30px → mobile 14px 사이 */
  }
  
  /* 보유공연장 태블릿 사이즈 제한 해제 및 스택 — 상단은 부대시설과 동일(베이스 clamp), 하단만 제거 */
  .space-info .space-section--stage {
    padding-bottom: 0;                                    /* 이미지가 섹션 하단 끝까지 채움 */
    max-height: none;
  }
  .space-info .space-stage {
    min-height: 0;
    max-height: none;
    grid-template-columns: 1fr;
  }
  .space-info .space-stage__media {
    height: 48rem;
    max-height: none;
    width: 100vw;                                         /* 좌우 여백 없이 뷰포트 전체 폭 */
    margin-left: calc(50% - 50vw);                        /* 섹션 패딩 돌파 */
    margin-right: 0;
    border-radius: 0;                                     /* 풀블리드 시 라운드 제거 */
  }
  .space-info .space-stage__media::before {
    width: 100%;
    height: 16rem;
    background: linear-gradient(to bottom, var(--ds-color-gray-90), rgba(30, 33, 36, 0));
  }
  /* 이미지 풀블리드 overflow 차단 */
  .space-info .space-section--stage {
    overflow: hidden;
  }

  /* 카드 그리드 간격 축소 (3열 유지, 40px → 20px) */
  .space-info .space-cards,
  .space-info .space-download-cards {
    gap: var(--ds-number-10);                            /* 20px */
  }
  /* 다운로드 카드 내부 여백 축소 */
  .space-info .space-download-card {
    padding: var(--ds-number-6);                        /* 12px */
    gap: var(--ds-number-3);                            /* 6px */
  }
  .space-info .space-download-card .ds-detail-attach__item {
    padding: var(--ds-number-3) var(--ds-number-4);     /* 6px 8px */
  }
  .space-info .space-download-card .ds-detail-attach__list {
    gap: var(--ds-number-3);                            /* 6px */
  }
  .space-info .space-heading3__title br {
    display: none;
  }

  /* stage 설명 + hero 타이틀 <br> 숨겨 자연스러운 줄바꿈 (태블릿 한정) */
  .space-info .space-stage__desc br,
  .space-info .space-hero__title br {
    display: none;
  }
  /* stage 설명: PC max-width(552px) 해제 — 태블릿 컨테이너 폭 활용해서 1줄, 좁아지면 자연 wrap */
  .space-info .space-stage__desc {
    max-width: none;
  }

  /* [본문 탭 유지 정책 통일] 시설 탭(.space-info > .ds-tab)은 태블릿·모바일에서도 유지(셀렉트 전환 제거).
     → 다른 페이지와 동일하게 탭 노출 + component.css 좌측정렬·가로스크롤·밑줄 적용. (.facility-tab-mobile 셀렉트는 항상 display:none) */
  .space-info > .page-header__select .ds-select {
    border: none;
    border-bottom: var(--ds-border-width-thin) solid var(--ds-tab--border, var(--ds-color-gray-20));
    border-radius: 0;
    font-size: var(--ds-pc-font-size-label-medium);
    font-weight: var(--ds-typo-font-weight-medium);
    color: var(--ds-color-brand-dark);
    background-color: transparent;
    padding-inline: 0;
    height: var(--ds-size-height-9);
    box-shadow: none;
  }
}


/* ==================== R. 반응형 — 모바일 (≤ 767px) ==================== */
@media (max-width: 767px) {
  .space-info .space-hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow: visible;
  }
  /* 이미지가 아래로 떨어지면 텍스트 가로 100% 차지 */
  .space-info .space-hero__text {
    width: 100%;
    max-width: 100%;
    padding: var(--ds-mobile-padding-7, 1.8rem) var(--ds-mobile-padding-layout-side, 1.6rem) 3.2rem; /* 하단 32px — 사다리꼴 이미지와의 간격 확보 */
    order: 1;
  }
  .space-info .space-hero__media-clip {
    position: static;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 25rem;
    overflow: hidden;
    /* 사다리꼴 좌상단 라운드 (radius ≈ 2rem 호 근사) — PC 디자인 유지 */
    clip-path: polygon(6.9rem 0%, 100% 0%, 100% 100%, 0% 100%, 5rem 1.6rem, 5.2rem 1rem, 5.7rem 0.4rem, 6.2rem 0.1rem);
    order: 2;
  }
  .space-info .space-hero__media {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    transform: none;
    transform-origin: initial;
  }
  .space-info .space-hero__media img {
    transform: none;
    transform-origin: initial;
  }
  /* 폰트는 PC base의 clamp()가 fluid 처리 — 모바일 오버라이드 제거 */
  .space-info .space-info-list {
    width: 100%;
    margin-top: var(--ds-mobile-padding-5, 1.4rem);
  }
  .space-info .space-info-list__label {
    width: 7rem;
    font-size: 1.2rem;
    opacity: 0.65;
  }
  .space-info .space-info-list__value {
    font-size: var(--ds-mobile-font-size-body-medium, 1.5rem);
  }
  .space-info .space-cta {
    width: 100%;
    min-width: 0;
    min-height: var(--ds-btn--height-l);                /* 48px */
    font-size: var(--ds-mobile-font-size-label-small, 1.5rem);
    margin-top: 0;                                       /* 유의사항 row와의 갭 축소 (컨테이너 gap 16px만 유지) */
  }

  /* 풀 폭 섹션 여백 넓히기 */
  .space-info .space-section {
    padding: 4rem 2.4rem; /* 모바일 좌우 갭 24px로 기본값보다 여유있게 확보 */
  }
  .space-info .space-section__inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .space-info .space-heading3__title {
    white-space: nowrap !important;
  }
  /* 무대기술자료 하단 여백 축소 (태블릿) */
  .space-info .space-section--plain {
    padding-bottom: 4rem;
  }

  /* 무대기술 자료 타이틀 한줄 처리 (br 숨김) */
  .space-info .space-section--plain .space-heading3__title br,
  .space-info .space-heading3__title br {
    display: none !important;
  }

  .space-info .space-cards {
    grid-template-columns: 1fr;
    gap: var(--ds-number-18);                             /* 36px (24 × 1.5) */
  }
  .space-info .space-card__number {
    display: none;
  }
  .space-info .space-card__desc {
    font-size: var(--ds-mobile-font-size-body-medium, 1.5rem);
  }
  /* 운영시간/운영요일/비용 — 위계: 카드 desc(15px)보다 작게 */
  .space-info .space-card__info-label,
  .space-info .space-card__info-value {
    font-size: var(--ds-font-size-13);                  /* 13px */
  }
  .space-info .space-card__image {
    height: 20rem;
  }

  /* 보유공연장 stage 모바일 — 상단은 부대시설과 동일(베이스 4rem), 하단만 제거 */
  .space-info .space-section--stage {
    padding-bottom: 0;                                    /* 이미지 하단 블랙 여백 제거 */
    max-height: none;
    overflow: hidden;
  }
  .space-info .space-stage {
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: none;
    gap: var(--ds-mobile-padding-5, 1.4rem);
  }
  .space-info .space-stage__content {
    padding: var(--ds-mobile-padding-5, 1.4rem) 0;
    gap: var(--ds-mobile-padding-5, 1.4rem);
  }
  /* stage 설명 — line-height만 모바일 미세 조정 (font-size는 PC clamp) */
  .space-info .space-stage__desc {
    line-height: 1.55;
  }
  .space-info .space-stage__media {
    height: 25rem;
    max-height: none;
    border-radius: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);                       /* 좌측도 뷰포트 끝까지 */
    margin-right: 0;
  }
  /* 다크 Descriptions — 모바일 라벨/값 위계 명확화 */
  .space-info .space-stage .space-info-list {
    width: 100%;
  }
  .space-info .space-stage .space-info-list__label {
    width: 7rem;
    font-size: 1.2rem;                                    /* 12px — 값보다 확실히 작게 */
    opacity: 0.65;                                        /* 흐리게 → 계층 강조 */
  }
  .space-info .space-stage .space-info-list__value {
    font-size: var(--ds-mobile-font-size-body-medium, 1.5rem);
    line-height: 1.5;
  }

  /* 토글 — 자연 폭 (PC 100% 풀폭 해제) + 폰트 위계 (15px, 설명과 동일) */
  .space-info .space-toggle {
    align-self: flex-start;
    width: auto;
    max-width: 100%;
  }
  .space-info .space-toggle__btn {
    min-width: 0;
    flex: 0 0 auto;
    height: var(--ds-number-18);                        /* 36px (PC 40 → 36) */
    padding: var(--ds-number-3) var(--ds-number-12);    /* 6px 24px */
    font-size: var(--ds-mobile-font-size-body-medium, 1.5rem);  /* 15px */
  }

  .space-info .space-download-cards {
    grid-template-columns: 1fr;
    gap: var(--ds-mobile-padding-4, 1.2rem);
  }
  .space-info .space-download-card {
    padding: var(--ds-mobile-padding-5, 1.4rem);
  }
  /* 무대기술자료 하단 여백 축소 (모바일) */
  .space-info .space-section--plain {
    padding-bottom: 2rem;
  }
}


/* ──────────────────────────────────────────────────────────
   V01. 시설 탭 / 모바일 셀렉트 반응형 전환 (#372)
   space.jsp는 facility-tab-desktop(탭) + facility-tab-mobile(셀렉트) V2 마크업이나,
   space-page-V3.css에 facility-tab 룰이 없어 PC에서 셀렉트가 숨겨지지 않았음
   (V2→V3 CSS 마이그레이션 누락). V3 브레이크포인트(1199/1200) 기준으로 복구.
   ────────────────────────────────────────────────────────── */
/* [본문 탭 유지 정책 통일] 모든 뷰포트에서 탭(.facility-tab-desktop) 유지, 셀렉트(.facility-tab-mobile) 미사용.
   → 모바일에서도 다른 페이지와 동일하게 탭이 노출되며 component.css의 좌측정렬·가로스크롤·밑줄 인디케이터가 적용된다.
   (구: ≤1199 에서 탭 숨기고 셀렉트 노출하던 전환을 제거) */
.facility-tab-mobile {
  display: none;
}