/* ensemble-page-v2.css
 * Generated by Phase 4 (safe-merge) for (시립예술단_MNU-U-130000, v2)
 * Source CSS (in cascade order): ensemble-page-v2.css
 */

/* === source: ensemble-page-v2.css === */
@charset "utf-8";

/* ================================================================
   ensemble-page-v2.css — 시립예술단 모듈 v2 (Figma node 13993-20434)
   적용 파일: MNU-U-130100_예술단소개_design_v2.html
   격리: self-contained.
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   BASE LAYER — no-image 플레이스홀더 (어두운 회색 배경)
   ════════════════════════════════════════════════════════════════ */
.ensemble-intro-v2__photo,
.ensemble-leader__photo,
.ensemble-card__photo {
  position: relative;
  background-color: #454545;
  overflow: hidden;
}
.ensemble-intro-v2__photo img[src$="no-image-logo.png"],
.ensemble-leader__photo img[src$="no-image-logo.png"],
.ensemble-card__photo img[src$="no-image-logo.png"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 30%;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.4);
}


/* ════════════════════════════════════════════════════════════════
   V01 — 예술단 소개
   ════════════════════════════════════════════════════════════════ */
.ensemble-intro-v2 {
  margin-bottom: 12rem; /* 120 — V01 ↔ V01-2 그라데이션 상단 */
}

/* 단체사진 — Figma 높이 420 */
.ensemble-intro-v2__photo {
  width: 100%;
  height: 42rem; /* Figma 420px */
  border-radius: var(--ds-radius-large, 1.2rem);
  margin-bottom: var(--ds-number-20, 4rem); /* 40 */
}
.ensemble-intro-v2__photo img:not([src$="no-image-logo.png"]) {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: inherit;
}

/* 좌(단체명+버튼) ↔ 우(본문) — gap 80, 좌측 자체 stretch + justify-between */
.ensemble-intro-v2__body {
  display: flex;
  align-items: stretch;
  gap: var(--ds-number-40, 8rem); /* 80 */
}

.ensemble-intro-v2__name-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
}

.ensemble-intro-v2__name {
  font-size: var(--ds-font-size-40, 4rem); /* Figma 40 */
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-primary-90, #001927);
  line-height: 1.2;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  margin: 0;
  white-space: nowrap;
}

/* "단원소개 보기" / "다른 공연 둘러보기" 버튼 — 검정 fill + radius max (Figma 시안) */
.ensemble-intro-v2__shortcut.ds-btn,
.ensemble-carousel__empty-cta.ds-btn {
  background: var(--ds-color-gray-90, #1e2124);
  color: var(--ds-color-gray-0, #fff);
  border-color: var(--ds-color-gray-90, #1e2124);
  border-radius: var(--ds-radius-max, 999rem);
}
.ensemble-intro-v2__shortcut.ds-btn {
  align-self: flex-start;
}
.ensemble-intro-v2__shortcut.ds-btn:hover,
.ensemble-intro-v2__shortcut.ds-btn:focus-visible,
.ensemble-carousel__empty-cta.ds-btn:hover,
.ensemble-carousel__empty-cta.ds-btn:focus-visible {
  background: var(--ds-color-gray-95, #131416);
  border-color: var(--ds-color-gray-95, #131416);
  color: var(--ds-color-gray-0, #fff);
}

/* 본문 — 19px gray-70 (Figma) */
.ensemble-intro-v2__text-col {
  flex: 1 0 0;
  min-width: 0;
}
.ensemble-intro-v2__text-col p {
  font-size: var(--ds-font-size-19, 1.9rem); /* Figma 19 */
  color: var(--ds-color-gray-70, #464c53);
  line-height: 1.6;
  letter-spacing: -0.01em; /* Figma -0.19px / 19px */
  word-break: keep-all;
  margin: 0 0 var(--ds-number-10, 2rem); /* paragraph 빈 줄 */
}
.ensemble-intro-v2__text-col p:last-child {
  margin-bottom: 0;
}


/* ════════════════════════════════════════════════════════════════
   V01-2 — 평택시립국악관현악단 공연 캐러셀 (기획 v1.2 반영, 2026-05-11)
   상단 라인/패딩/타이틀 = ensemble-members-v2 와 동일 토큰으로 통일
   ════════════════════════════════════════════════════════════════ */
.ensemble-related {
  margin-bottom: 12rem; /* 120 — 공연 카드 ↔ 단원소개 라인 */
  padding-top: 12rem; /* 120 — 그라데이션 상단 ↔ 공연 타이틀 */
  position: relative; /* ::before 그라데이션 anchor */
}
/* 상단 그라데이션 영역 — 오시는길 v2 동일 패턴 (full-bleed, gray-5 → gray-0 페이드) */
.ensemble-related::before {
  content: '';
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  top: 0;
  height: 9rem; /* 90 */
  background: linear-gradient(180deg, var(--ds-color-gray-5, #f4f5f6) 0%, var(--ds-color-gray-0, #fff) 100%);
  z-index: -1;
  pointer-events: none;
}

.ensemble-related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-number-8, 1.6rem);
  margin-bottom: var(--ds-number-15, 3rem); /* 30 */
}

/* 타이틀 — 32 / 기본 light / 34 / gray-90 (강조어 <strong> 만 bold) */
.ensemble-related__title {
  font-family: var(--ds-typo-font-type-title, 'Pretendard', sans-serif);
  font-weight: var(--ds-typo-font-weight-light, 300);
  font-size: var(--ds-font-size-32, 3.2rem);
  color: var(--ds-color-gray-90, #1e2124);
  line-height: 3.4rem;
  letter-spacing: 0;
  margin: 0;
}
.ensemble-related__title strong {
  font-weight: var(--ds-typo-font-weight-bold, 700);
}

/* prev/next 버튼 그룹 */
.ensemble-carousel__nav {
  display: flex;
  gap: var(--ds-number-4, 0.8rem);
  flex-shrink: 0;
}

.ensemble-carousel__btn {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: var(--ds-radius-max, 999rem);
  border: var(--ds-border-width-thin, 1px) solid var(--ds-color-gray-20, #c5cad0);
  background: var(--ds-color-gray-0, #fff);
  color: var(--ds-color-gray-90, #1e2124);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ensemble-carousel__btn:hover {
  background: var(--ds-color-primary-90, #001927);
  border-color: var(--ds-color-primary-90, #001927);
  color: var(--ds-color-gray-0, #fff);
}
.ensemble-carousel__btn:focus-visible {
  outline: 2px solid var(--ds-color-primary-90, #001927);
  outline-offset: 2px;
}

/* 캐러셀 viewport — 가로 스크롤 + scroll-snap (스크롤바 숨김) */
.ensemble-carousel { position: relative; }

.ensemble-carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ensemble-carousel__viewport::-webkit-scrollbar { display: none; }

/* track — 가로 flex (ds-poster-card 그대로 수용) */
.ensemble-carousel__track {
  display: flex;
  column-gap: var(--ds-number-15, 3rem); /* 30 */
  padding-bottom: 0.4rem;
}

/* 카드 폭 — PC 5열 노출 */
.ensemble-carousel__item {
  flex: 0 0 calc((100% - 4 * var(--ds-number-15, 3rem)) / 5);
  scroll-snap-align: start;
}

/* ds-poster-card 오버라이드 — 캐러셀 스코프 한정 (5열에 맞춰 축소) */
.ensemble-carousel .ds-poster-card__title {
  font-size: 1.8rem;
}
.ensemble-carousel .ds-poster-card__badge {
  width: 4rem;
  height: 4rem;
  font-size: 1.2rem;
}

/* no-image 플레이스홀더 — 단체사진(#454545)과 동일 룩 */
.ensemble-carousel__item .ds-poster-card__thumb {
  background-color: #454545;
}
.ensemble-carousel__item .ds-poster-card__thumb img[src$="no-image-logo.png"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 55%;
  max-height: 18%;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.4);
}

/* 공연 없을 때 — 포스터 카드 1개 분 높이(썸네일+정보)를 phantom으로 확보하고 안내 문구·CTA는 중앙 정렬 */
.ensemble-carousel__empty {
  position: relative;
}
.ensemble-carousel__empty-spacer {
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
.ensemble-carousel__empty-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-number-10, 2rem);
  text-align: center;
}
.ensemble-carousel__empty .ds-empty-state__text {
  margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   V02+V03 — 단원소개 통합 섹션
   Figma: Section - 단원소개 (border-top primary-90 + pt-60 + gap-60)
   ════════════════════════════════════════════════════════════════ */
.ensemble-members-v2 {
  margin-bottom: var(--ds-number-30, 6rem);
}

.ensemble-members-v2__layout {
  display: grid;
  grid-template-columns: 28rem 1fr; /* 280px 고정 (DS 토큰 없음) */
  gap: var(--ds-number-30, 6rem); /* 60 */
  align-items: start;
  border-top: var(--ds-border-width-thin, 1px) solid var(--ds-color-primary-90, #001927);
  padding-top: 10rem; /* 100 — 단원소개 라인 ↔ 콘텐츠 */
}


/* ── 좌측 사이드: 큰 타이틀 + cat list (Figma gap 172) ─ */
.ensemble-side {
  width: 28rem; /* 280 */
  display: flex;
  flex-direction: column;
  gap: 17.2rem; /* 172 — Figma V03 bLeft gap-[172px] (DS 토큰 없음) */
}

.ensemble-side__title {
  font-family: var(--ds-typo-font-type-title, 'Pretendard', sans-serif);
  font-weight: var(--ds-typo-font-weight-light, 300);
  font-size: var(--ds-font-size-32, 3.2rem); /* Figma 32 */
  color: var(--ds-color-gray-90, #1e2124); /* Figma #1a212e */
  line-height: 3.4rem; /* Figma 34px */
  letter-spacing: 0;
}
.ensemble-side__sub,
.ensemble-side__main {
  margin: 0;
}
.ensemble-side__main strong {
  font-weight: var(--ds-typo-font-weight-bold, 700);
}

/* cat list */
.ensemble-cat-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: var(--ds-border-width-thin, 1px) solid var(--ds-color-secondary-10, #d6e0eb);
}

.ensemble-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 텍스트 ↔ 화살표 */
  width: 100%;
  padding: var(--ds-number-7, 1.4rem) 0; /* py-14 */
  background: transparent;
  border: none;
  border-bottom: var(--ds-border-width-thin, 1px) solid var(--ds-color-secondary-10, #d6e0eb);
  font-size: var(--ds-font-size-15, 1.5rem); /* Figma 15 */
  font-weight: var(--ds-typo-font-weight-regular, 400);
  color: var(--ds-color-gray-60, #58616a); /* Figma gray-60 */
  text-align: left;
  cursor: pointer;
  transition: color 0.15s, font-weight 0.15s;
}
.ensemble-cat-row:hover {
  color: var(--ds-color-brand-red-aa, #e03010);
}
.ensemble-cat-row.is-active {
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-brand-red-aa, #e03010); /* Figma brand-red-aa #e03010 */
}
.ensemble-cat-row__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: currentColor;
  transition: transform 0.15s;
}
.ensemble-cat-row:hover .ensemble-cat-row__arrow,
.ensemble-cat-row.is-active .ensemble-cat-row__arrow {
  transform: translateX(2px);
}


/* ── 우측 콘텐츠 ──────────────────────────────────────────────── */
.ensemble-content {
  min-width: 0;
}

/* 데이터 미등록(준비 중) — 좌우 카드(.ensemble-leader) 자리에서 같은 영역감(사진 높이) 유지 + 글자 스타일·가로세로 중앙 */
.ensemble-empty {
  margin: 0;
  min-height: var(--leader-photo-h, 38rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--ds-pc-font-size-body-small, 0.875rem);
  color: var(--ds-light-color-text-subtle, #8a8f99);
}


/* ════════════════════════════════════════════════════════════════
   예술감독 / 상임지휘자 단장 카드 (.ensemble-leader)
   Figma: 280×380 사진 + bRight (gap-40)
   ════════════════════════════════════════════════════════════════ */
.ensemble-leader {
  display: grid;
  grid-template-columns: 28rem 1fr; /* 280 */
  gap: var(--ds-number-30, 6rem); /* 60 */
  align-items: start;
  --leader-photo-h: 38rem; /* 사진 높이 = 정보 칼럼 max-height 기준값 */
}

.ensemble-leader__photo {
  width: 28rem;
  height: var(--leader-photo-h, 38rem); /* 380 */
  border-radius: var(--ds-radius-large, 1.2rem);
}
.ensemble-leader__photo img:not([src$="no-image-logo.png"]) {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}

.ensemble-leader__info {
  display: flex;
  flex-direction: column;
  /* 카드 높이를 사진 높이에 고정 — 초과분은 주요 경력 내부 스크롤로 처리 */
  max-height: var(--leader-photo-h, 38rem);
  min-height: 0;
}

/* 박범훈 이름 — name ↔ career-block 사이 60px */
.ensemble-leader__name {
  font-size: var(--ds-font-size-32, 3.2rem); /* Figma 32 */
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-gray-90, #1e2124);
  line-height: 1.2;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  margin: 0 0 var(--ds-number-30, 6rem); /* 60 */
  white-space: nowrap;
}

/* role 라벨 — 작은 파란 텍스트 (image), name과 4px 갭 */
.ensemble-leader__role {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--ds-font-size-14, 1.4rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-brand-blue-aa, #027bc1);
  line-height: 1.3;
  margin: 0 0 var(--ds-number-2, 0.4rem); /* 4 */
}

/* 경력 블록 */
.ensemble-leader__career-block {
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-6, 1.2rem); /* 12 */
  width: 100%;
  /* 라벨은 상단 고정, 남는 높이를 경력 리스트가 차지 */
  flex: 1 1 auto;
  min-height: 0;
}

.ensemble-leader__career-label {
  font-size: var(--ds-font-size-22, 2.2rem); /* Figma 21 → DS 22 (+1) */
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-gray-90, #1e2124);
  margin: 0;
  line-height: 1.3;
}

.ensemble-leader__career {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-4, 0.8rem); /* 8 */
  /* 사진 하단 영역을 초과하면 주요 경력만 내부 스크롤 */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.6rem; /* 스크롤바와 텍스트 간격 */
  /* ⚠ scrollbar-width(표준)는 쓰지 않는다 — Chrome 121+에서 이 속성이 선언되면
     아래 ::-webkit-scrollbar/scrollbar-button(화살표 제거)이 통째로 무시됨.
     화살표 제거는 webkit 의사요소로만 처리 (Firefox는 기본 스크롤바=화살표 없음). */
}
/* Chromium/Webkit — 트랙/썸 커스텀 + 화살표 제거 */
.ensemble-leader__career::-webkit-scrollbar {
  width: 4px;
}
.ensemble-leader__career::-webkit-scrollbar-track {
  background: transparent;
}
.ensemble-leader__career::-webkit-scrollbar-thumb {
  background: var(--ds-color-gray-20, #c5cad0);
  border-radius: var(--ds-radius-max, 999rem);
}
.ensemble-leader__career::-webkit-scrollbar-thumb:hover {
  background: var(--ds-color-gray-30, #adb2b9);
}
/* ▲▼ 스크롤바 화살표(stepper) 완전 차단 — 모든 button 변형 명시 */
.ensemble-leader__career::-webkit-scrollbar-button,
.ensemble-leader__career::-webkit-scrollbar-button:single-button,
.ensemble-leader__career::-webkit-scrollbar-button:start,
.ensemble-leader__career::-webkit-scrollbar-button:end,
.ensemble-leader__career::-webkit-scrollbar-button:vertical:decrement,
.ensemble-leader__career::-webkit-scrollbar-button:vertical:increment,
.ensemble-leader__career::-webkit-scrollbar-button:vertical:start:decrement,
.ensemble-leader__career::-webkit-scrollbar-button:vertical:start:increment,
.ensemble-leader__career::-webkit-scrollbar-button:vertical:end:increment,
.ensemble-leader__career::-webkit-scrollbar-button:vertical:end:decrement,
.ensemble-leader__career::-webkit-scrollbar-button:horizontal:start:decrement,
.ensemble-leader__career::-webkit-scrollbar-button:horizontal:end:increment,
.ensemble-leader__career::-webkit-scrollbar-corner {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  visibility: hidden !important;
}
.ensemble-leader__career li {
  position: relative;
  padding-left: var(--ds-number-6, 1.2rem); /* 12 */
  font-size: var(--ds-font-size-15, 1.5rem); /* Figma 15 */
  color: var(--ds-color-gray-70, #464c53);
  line-height: 1.6;
}
.ensemble-leader__career li::before {
  content: '';
  position: absolute; /* layout 영향 X (첫 줄 위 공간 안 생김) */
  left: 0;
  top: calc((1.6em - 4px) / 2); /* 두 줄 wrap 시에도 첫 줄 가운데 */
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--ds-color-gray-70, #464c53);
}


/* ════════════════════════════════════════════════════════════════
   역대 예술감독 / 상임지휘자 — 작은 카드 그리드 (사진 위 + 정보 아래)
   panel-director / panel-conductor 안 .ensemble-leader 다음에 위치
   ════════════════════════════════════════════════════════════════ */
.ensemble-history {
  margin-top: var(--ds-number-30, 6rem); /* 60 — 현 단장 카드와 간격 */
  padding-top: var(--ds-number-30, 6rem); /* 60 — 라인 ↔ 타이틀 */
  border-top: var(--ds-border-width-thin, 1px) solid var(--ds-color-gray-10, #e6e8ea);
}

.ensemble-history__title {
  font-size: var(--ds-font-size-22, 2.2rem); /* career-label 과 동일 위계 */
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-gray-90, #1e2124);
  line-height: 1.3;
  margin: 0 0 var(--ds-number-15, 3rem); /* 30 */
}

.ensemble-history__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-number-20, 4rem); /* 40 — 행/열 동일 */
}

.ensemble-history__item {
  flex: 0 0 calc((100% - 4 * var(--ds-number-20, 4rem)) / 5); /* 5명 기준 균등 분배 */
  display: flex;
  flex-direction: column;
}

.ensemble-history__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: #454545; /* v2 no-image 패턴 */
  border: var(--ds-border-width-thin, 1px) solid var(--ds-color-gray-10, #e6e8ea);
  border-radius: var(--ds-radius-medium, 0.8rem);
  overflow: hidden;
  margin-bottom: var(--ds-number-8, 1.6rem); /* 16 — 단원 카드 .ensemble-card__photo 와 통일 */
}

.ensemble-history__img-wrap img:not([src$="no-image-logo.png"]) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ensemble-history__img-wrap img[src$="no-image-logo.png"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 30%;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.4);
}

.ensemble-history__name {
  font-size: var(--ds-font-size-19, 1.9rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-gray-90, #1e2124);
  line-height: 1.3;
  margin: 0 0 var(--ds-number-2, 0.4rem); /* 4 */
  text-align: center;
}

.ensemble-history__term {
  font-size: var(--ds-font-size-14, 1.4rem);
  color: var(--ds-color-gray-60, #58616a);
  line-height: 1.4;
  margin: 0;
  white-space: nowrap;
  text-align: center;
}


/* ════════════════════════════════════════════════════════════════
   단원 패널 — 파트 필터 + 카드 그리드 (가로형 카드, 2-col)
   Figma: 카드 200×250 사진 + 정보 (gap-60), 카드 사이 gap-40
   ════════════════════════════════════════════════════════════════ */

/* 파트 필터 — PC: pill 탭 / 모바일: select */
.ensemble-part-filter {
  margin-bottom: var(--ds-number-20, 4rem); /* 40 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ensemble-part-filter::-webkit-scrollbar { display: none; }

/* PC 기본: pill 보임, select 숨김 */
.ensemble-part-filter__select { display: none; }

/* 100% 폭 + 11개 균등 분배 + button 자체 flex 컨테이너로 텍스트 가운데 강제 */
.ensemble-part-filter .ds-tab--pill .ds-tab__list {
  display: flex !important;
  width: 100% !important;
}
.ensemble-part-filter .ds-tab--pill .ds-tab__btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important; /* 상하/좌우 모두 0 */
  height: var(--ds-size-height-4, 4rem) !important; /* 40 */
  line-height: 1 !important; /* vertical 가운데 보장 */
  font-size: var(--ds-font-size-14, 1.4rem) !important;
  white-space: nowrap !important;
}

/* DS 기본 ::before 슬라이딩 인디케이터 비활성화 — 정렬 어긋남 방지 */
.ensemble-part-filter .ds-tab--pill .ds-tab__list::before {
  display: none !important;
  content: none !important;
}
/* active button 자체에 캡슐 직접 적용 — 폭/위치 정확 */
.ensemble-part-filter .ds-tab--pill .ds-tab__btn[aria-selected="true"],
.ensemble-part-filter .ds-tab--pill .ds-tab__btn.is-active {
  background-color: var(--ds-color-gray-80, #33363d) !important;
  color: var(--ds-color-gray-0, #fff) !important;
  border-radius: var(--ds-radius-max, 9999px) !important;
}

.ensemble-part-section {
  margin: 0;
  display: flex;
  /* justify-content: flex-start; */
  justify-content: space-between;
}
/* hidden 속성 우선 적용 — display:flex가 hidden(display:none)을 덮어쓰지 않도록 */
.ensemble-part-section[hidden] {
  display: none !important;
}
/* 파트 섹션 내부 빈 상태 — 전체 미등록 시(.ensemble-empty)와 동일한 가운데 정렬.
   부모(.ensemble-part-section)가 flex라 폭을 채워야 내부 center 정렬이 동작 */
.ensemble-part-section > .ensemble-empty {
  width: 100%;
}

/* 카드 그리드 — 5-col (한 줄 최대 5명) */
.ensemble-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--ds-number-15, 3rem); /* 30 */
  row-gap: var(--ds-number-20, 4rem); /* 40 */
  width: 100%;
}

/* 단원 카드 (세로형: 사진 위 + 이름/담당 아래) */
.ensemble-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ensemble-card__photo {
  width: 19rem;  /* 190 */
  height: 22rem; /* 220 */
  border: var(--ds-border-width-thin, 1px) solid var(--ds-color-gray-10, #e6e8ea);
  border-radius: var(--ds-radius-large, 1.2rem);
  margin-bottom: var(--ds-number-8, 1.6rem); /* 16 — 사진 ↔ 이름 */
  padding: 0;
  background-color: #454545;
  overflow: hidden;
  cursor: pointer;
}
/* hover 오버레이 — ds-poster-card__thumb::after 와 동일 (이미지 scale 제외) */
.ensemble-card__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cline x1='30' y1='5' x2='30' y2='55' stroke='%23fff' stroke-width='1'/%3E%3Cline x1='5' y1='30' x2='55' y2='30' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") center / 6rem no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  border-radius: inherit;
}
.ensemble-card__photo:hover::after,
.ensemble-card__photo:focus-visible::after {
  opacity: 1;
}
.ensemble-card__photo:focus-visible {
  outline: 2px solid var(--ds-color-primary-90, #001927);
  outline-offset: 2px;
}
.ensemble-card__photo img:not([src$="no-image-logo.png"]) {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}

/* 이름 — 사진 아래 가운데 정렬 */
.ensemble-card__name {
  display: block;
  font-size: var(--ds-font-size-19, 1.9rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-gray-90, #1e2124);
  line-height: 1.3;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  margin: 0 0 var(--ds-number-2, 0.4rem); /* 4 — 이름 ↔ 담당 */
}

/* 담당 — 파트(직책) 형식, 예: 해금(수석) */
.ensemble-card__role {
  display: block;
  font-size: var(--ds-font-size-14, 1.4rem);
  color: var(--ds-color-gray-60, #58616a);
  line-height: 1.4;
  margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   단원 상세 모달 — 카드 클릭 시 프로필 + 경력 노출
   ════════════════════════════════════════════════════════════════ */
.ensemble-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  padding: var(--ds-number-10, 2rem);
}
.ensemble-modal.is-open {
  display: flex;
}

.ensemble-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 72rem; /* 720 */
  max-height: 90vh;
  background: var(--ds-color-gray-0, #fff);
  border-radius: var(--ds-radius-large, 1.2rem);
  padding: var(--ds-number-20, 4rem); /* 40 */
  overflow: hidden; /* dialog 자체 스크롤바 차단 — 내부 스크롤은 .ensemble-modal__career가 담당 */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.ensemble-modal__close {
  position: absolute;
  top: var(--ds-number-10, 2rem);
  right: var(--ds-number-10, 2rem);
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--ds-radius-max, 999rem);
  color: var(--ds-color-gray-70, #464c53);
  cursor: pointer;
  transition: background 0.15s;
}
.ensemble-modal__close:hover {
  background: var(--ds-color-gray-5, #f4f5f6);
}
.ensemble-modal__close:focus-visible {
  outline: 2px solid var(--ds-color-primary-90, #001927);
  outline-offset: 2px;
}

.ensemble-modal__body {
  display: grid;
  grid-template-columns: 22rem 1fr; /* 220 사진 + 정보 */
  gap: var(--ds-number-20, 4rem); /* 40 */
  align-items: stretch; /* photo 높이(26rem)에 info 맞춤 → career만 내부 스크롤 */
}

.ensemble-modal__photo {
  width: 22rem;
  height: 26rem;
  border: var(--ds-border-width-thin, 1px) solid var(--ds-color-gray-10, #e6e8ea);
  border-radius: var(--ds-radius-large, 1.2rem);
  background-color: #454545;
  overflow: hidden;
}
.ensemble-modal__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ensemble-modal__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0; /* career flex 자식이 overflow되도록 */
}
.ensemble-modal__role {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--ds-font-size-14, 1.4rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-brand-blue-aa, #027bc1);
  line-height: 1.3;
  margin: 0 0 var(--ds-number-2, 0.4rem); /* 4 */
}
.ensemble-modal__name {
  font-size: var(--ds-font-size-28, 2.8rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-gray-90, #1e2124);
  line-height: 1.2;
  letter-spacing: var(--ds-typo-letter-spacing, -0.01em);
  margin: 0 0 var(--ds-number-15, 3rem); /* 30 */
}
.ensemble-modal__career-label {
  font-size: var(--ds-font-size-19, 1.9rem);
  font-weight: var(--ds-typo-font-weight-bold, 700);
  color: var(--ds-color-gray-90, #1e2124);
  margin: 0 0 var(--ds-number-6, 1.2rem); /* 12 */
  line-height: 1.3;
}
.ensemble-modal__career {
  list-style: none;
  padding: 0 var(--ds-number-4, 0.8rem) 0 0; /* 스크롤바 공간 8 */
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-2, 0.4rem); /* 4 */
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

/* ────────────────────────────────────────────────
   모달 내 스크롤바 통일 — dialog(잠재 overflow) + career(실 스크롤)
   Windows Chromium 기본 화살표(위/아래) 노출 방지를 위해 양쪽에 동일 적용
   ──────────────────────────────────────────────── */
/* ⚠ scrollbar-width 미사용 (Chrome 121+ 충돌 회피) — 화살표 제거는 webkit으로만 */
.ensemble-modal__dialog::-webkit-scrollbar,
.ensemble-modal__career::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.ensemble-modal__dialog::-webkit-scrollbar-track,
.ensemble-modal__career::-webkit-scrollbar-track {
  background: transparent;
}
.ensemble-modal__dialog::-webkit-scrollbar-thumb,
.ensemble-modal__career::-webkit-scrollbar-thumb {
  background: var(--ds-color-gray-20, #c5cad0);
  border-radius: var(--ds-radius-max, 999rem);
}
.ensemble-modal__dialog::-webkit-scrollbar-thumb:hover,
.ensemble-modal__career::-webkit-scrollbar-thumb:hover {
  background: var(--ds-color-gray-30, #adb2b9);
}
/* 화살표 버튼 — 모달 내 모든 element에 적용 (universal selector)
   .ensemble-modal 자식 어디서 스크롤바가 생기든 화살표 차단 보장 */
#memberModal::-webkit-scrollbar-button,
#memberModal *::-webkit-scrollbar-button,
.ensemble-modal::-webkit-scrollbar-button,
.ensemble-modal *::-webkit-scrollbar-button,
#memberModal::-webkit-scrollbar-button:single-button,
#memberModal *::-webkit-scrollbar-button:single-button,
.ensemble-modal::-webkit-scrollbar-button:single-button,
.ensemble-modal *::-webkit-scrollbar-button:single-button,
#memberModal::-webkit-scrollbar-button:start,
#memberModal *::-webkit-scrollbar-button:start,
.ensemble-modal::-webkit-scrollbar-button:start,
.ensemble-modal *::-webkit-scrollbar-button:start,
#memberModal::-webkit-scrollbar-button:end,
#memberModal *::-webkit-scrollbar-button:end,
.ensemble-modal::-webkit-scrollbar-button:end,
.ensemble-modal *::-webkit-scrollbar-button:end,
#memberModal::-webkit-scrollbar-button:vertical:decrement,
#memberModal *::-webkit-scrollbar-button:vertical:decrement,
.ensemble-modal::-webkit-scrollbar-button:vertical:decrement,
.ensemble-modal *::-webkit-scrollbar-button:vertical:decrement,
#memberModal::-webkit-scrollbar-button:vertical:increment,
#memberModal *::-webkit-scrollbar-button:vertical:increment,
.ensemble-modal::-webkit-scrollbar-button:vertical:increment,
.ensemble-modal *::-webkit-scrollbar-button:vertical:increment,
#memberModal::-webkit-scrollbar-button:vertical:start:decrement,
#memberModal *::-webkit-scrollbar-button:vertical:start:decrement,
.ensemble-modal::-webkit-scrollbar-button:vertical:start:decrement,
.ensemble-modal *::-webkit-scrollbar-button:vertical:start:decrement,
#memberModal::-webkit-scrollbar-button:vertical:end:increment,
#memberModal *::-webkit-scrollbar-button:vertical:end:increment,
.ensemble-modal::-webkit-scrollbar-button:vertical:end:increment,
.ensemble-modal *::-webkit-scrollbar-button:vertical:end:increment,
#memberModal::-webkit-scrollbar-button:vertical:start:increment,
#memberModal *::-webkit-scrollbar-button:vertical:start:increment,
.ensemble-modal::-webkit-scrollbar-button:vertical:start:increment,
.ensemble-modal *::-webkit-scrollbar-button:vertical:start:increment,
#memberModal::-webkit-scrollbar-button:vertical:end:decrement,
#memberModal *::-webkit-scrollbar-button:vertical:end:decrement,
.ensemble-modal::-webkit-scrollbar-button:vertical:end:decrement,
.ensemble-modal *::-webkit-scrollbar-button:vertical:end:decrement,
#memberModal::-webkit-scrollbar-button:horizontal:start:decrement,
#memberModal *::-webkit-scrollbar-button:horizontal:start:decrement,
.ensemble-modal::-webkit-scrollbar-button:horizontal:start:decrement,
.ensemble-modal *::-webkit-scrollbar-button:horizontal:start:decrement,
#memberModal::-webkit-scrollbar-button:horizontal:end:increment,
#memberModal *::-webkit-scrollbar-button:horizontal:end:increment,
.ensemble-modal::-webkit-scrollbar-button:horizontal:end:increment,
.ensemble-modal *::-webkit-scrollbar-button:horizontal:end:increment,
#memberModal::-webkit-scrollbar-corner,
#memberModal *::-webkit-scrollbar-corner,
.ensemble-modal::-webkit-scrollbar-corner,
.ensemble-modal *::-webkit-scrollbar-corner {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  visibility: hidden !important;
}

/* 모달 내 모든 스크롤바 너비도 통일 적용 (button이 width로 그려지는 경우 방지) */
.ensemble-modal *::-webkit-scrollbar,
.ensemble-modal::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.ensemble-modal *::-webkit-scrollbar-track,
.ensemble-modal::-webkit-scrollbar-track {
  background: transparent;
}
.ensemble-modal *::-webkit-scrollbar-thumb,
.ensemble-modal::-webkit-scrollbar-thumb {
  background: var(--ds-color-gray-20, #c5cad0);
  border-radius: var(--ds-radius-max, 999rem);
}
.ensemble-modal *::-webkit-scrollbar-thumb:hover,
.ensemble-modal::-webkit-scrollbar-thumb:hover {
  background: var(--ds-color-gray-30, #adb2b9);
}
.ensemble-modal__career li {
  position: relative;
  padding-left: var(--ds-number-6, 1.2rem); /* 12 */
  font-size: var(--ds-font-size-15, 1.5rem);
  color: var(--ds-color-gray-70, #464c53);
  line-height: 1.6;
}
.ensemble-modal__career li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc((1.6em - 4px) / 2);
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--ds-color-gray-70, #464c53);
}

/* body scroll lock */
body.has-modal-open {
  overflow: hidden;
}


/* ════════════════════════════════════════════════════════════════
   R. 반응형 — 모바일 시안 없음 (스킬 Case D 룰)
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
  /* V01 */
  .ensemble-intro-v2__body {
    flex-direction: column;
    gap: var(--ds-number-15, 3rem); /* 80 → 30 */
  }
  .ensemble-intro-v2__name-col {
    align-self: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .ensemble-intro-v2__name {
    font-size: var(--ds-font-size-32, 3.2rem); /* 40 → 32 */
  }
  .ensemble-intro-v2__text-col p {
    font-size: var(--ds-font-size-17, 1.7rem); /* 19 → 17 */
  }

  /* V01-2 캐러셀 — pt 60→30, 타이틀 32→28, PC4→3열 */
  /* V01 ↔ V01-2 그라데이션 간격 비율 축소 (PC 120 → 80) */
  .ensemble-intro-v2 {
    margin-bottom: 8rem; /* 120 → 80 */
  }
  .ensemble-related {
    margin-bottom: 8rem; /* 120 → 80 — 카드 ↔ 단원라인 */
    padding-top: 8rem; /* 120 → 80 — 그라데이션 상단 ↔ 타이틀 */
  }
  .ensemble-related::before {
    height: 6rem; /* 90 → 60 — pt 축소에 맞춰 비례 */
  }
  .ensemble-related__title {
    font-size: var(--ds-font-size-28, 2.8rem);
    line-height: 1.3;
  }
  .ensemble-carousel__item {
    flex: 0 0 calc((100% - 2 * var(--ds-number-12, 2.4rem)) / 3);
  }
  .ensemble-carousel__track {
    column-gap: var(--ds-number-12, 2.4rem);
  }

  /* V02 사이드 — 가로 row 전환 */
  .ensemble-members-v2__layout {
    grid-template-columns: 1fr;
    gap: var(--ds-number-15, 3rem); /* 60 → 30 */
    padding-top: 7rem; /* 100 → 70 — 단원 라인 ↔ 콘텐츠 */
  }
  .ensemble-side {
    width: 100%;
    align-self: auto;
    flex-direction: column;
    gap: var(--ds-number-12, 2.4rem);
    justify-content: flex-start;
  }
  .ensemble-side__title {
    font-size: var(--ds-font-size-28, 2.8rem); /* 32 → 28 */
    line-height: 1.3;
  }
  .ensemble-cat-list {
    flex-direction: row;
    border-top: none;
    border-bottom: none; /* 검정 라인 제거 */
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ensemble-cat-list::-webkit-scrollbar { display: none; }
  .ensemble-cat-row {
    flex: 1; min-width: 33.33%;
    justify-content: center;
    padding: var(--ds-number-6, 1.2rem) var(--ds-number-5, 1rem);
    border-bottom: 3px solid transparent;
  }
  .ensemble-cat-row.is-active {
    border-bottom-color: var(--ds-color-brand-red-aa, #e03010);
  }
  /* 화살표 모바일 숨김 */
  .ensemble-cat-row__arrow { display: none; }

  /* 단장 카드 */
  .ensemble-leader {
    grid-template-columns: 20rem 1fr;
    gap: var(--ds-number-12, 2.4rem); /* 60 → 24 */
    --leader-photo-h: 28rem; /* 태블릿 사진 높이에 맞춰 정보 칼럼 캡 */
  }
  .ensemble-leader__photo { width: 20rem; height: var(--leader-photo-h, 28rem); }
  .ensemble-leader__name { font-size: var(--ds-font-size-28, 2.8rem); }
  .ensemble-leader__career-label { font-size: var(--ds-font-size-19, 1.9rem); }

  /* 역대 인물 — gap 축소, 분배 기준은 5명 유지 */
  .ensemble-history__list { gap: var(--ds-number-15, 3rem); }
  .ensemble-history__item { flex: 0 0 calc((100% - 4 * var(--ds-number-15, 3rem)) / 5); }

  /* 모바일/태블릿: pill 숨김, select 표시 (가로 100%) */
  .ensemble-part-filter__pill { display: none; }
  .ensemble-part-filter__select { display: block; width: 100%; }

  /* 단원 카드 — 태블릿: 4-col, photo 폭 자동 */
  .ensemble-card-grid {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--ds-number-12, 2.4rem); /* 24 */
    row-gap: var(--ds-number-15, 3rem); /* 30 */
  }
  .ensemble-card__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 19 / 22;
  }
  .ensemble-card__name { font-size: var(--ds-font-size-17, 1.7rem); }
  .ensemble-card__role { font-size: var(--ds-font-size-13, 1.3rem); }
}

@media (max-width: 767px) {
  /* V01-2 캐러셀 — 모바일: 타이틀 22, 버튼 36, 3→2열 */
  .ensemble-related {
    margin-bottom: 6rem; /* 120 → 60 — 카드 ↔ 단원라인 */
    padding-top: 6rem; /* 120 → 60 — 그라데이션 상단 ↔ 타이틀 */
  }
  .ensemble-related::before {
    height: 4.5rem; /* 60 → 45 — pt 축소에 맞춰 비례 */
  }
  .ensemble-related__title {
    font-size: var(--ds-font-size-22, 2.2rem);
  }
  .ensemble-carousel__btn {
    width: 3.6rem;
    height: 3.6rem;
  }
  .ensemble-carousel__item {
    flex: 0 0 calc((100% - var(--ds-number-8, 1.6rem)) / 2);
  }
  .ensemble-carousel__track {
    column-gap: var(--ds-number-8, 1.6rem);
  }

  /* V01 — 본문 br 무효화 (풍요롭고 / 아름다운 강제 줄바꿈 제거) */
  .ensemble-intro-v2__text-col br { display: none; }

  /* V01 메인 비주얼 — 모바일 세로 축소 (PC 420 → 16:9 비율) */
  .ensemble-intro-v2__photo {
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--ds-number-10, 2rem); /* 40 → 20 */
  }
  /* 사진 ↔ 단체명/버튼 ↔ 본문 갭 축소 */
  .ensemble-intro-v2__body {
    gap: var(--ds-number-10, 2rem); /* 24 → 20 */
  }
  .ensemble-intro-v2 {
    margin-bottom: 6rem; /* 120 → 60 — V01 ↔ 그라데이션 */
  }

  /* V02 단원 라인 ↔ 콘텐츠 (PC 100 → 50) */
  .ensemble-members-v2__layout {
    padding-top: 5rem;
  }

  /* V01 단체명 */
  .ensemble-intro-v2__name { font-size: var(--ds-font-size-24, 2.4rem); }
  .ensemble-intro-v2__text-col p { font-size: var(--ds-font-size-15, 1.5rem); }

  /* V01 단원소개 보기 / V01-2 다른 공연 둘러보기 버튼 — 모바일에서 축소 (DS ds-btn--m min-height/padding 덮어쓰기) */
  .ensemble-intro-v2__shortcut.ds-btn,
  .ensemble-carousel__empty-cta.ds-btn {
    min-height: var(--ds-size-height-3, 3.6rem) !important; /* 36 — DS min-height 40 덮음 */
    height: var(--ds-size-height-3, 3.6rem) !important; /* 36 */
    padding-inline: var(--ds-number-8, 1.6rem) !important; /* 좌우 16 */
    padding-block: 0 !important;
    font-size: var(--ds-font-size-14, 1.4rem) !important;
    gap: var(--ds-number-2, 0.4rem) !important; /* 텍스트 ↔ 화살표 4 */
  }

  /* 단원 카드 — 모바일 폰트 축소 */
  .ensemble-card__name { font-size: var(--ds-font-size-15, 1.5rem); }
  .ensemble-card__role { font-size: var(--ds-font-size-12, 1.2rem); }

  /* V02 좌측 */
  .ensemble-side__title { font-size: var(--ds-font-size-22, 2.2rem); }

  /* 단장 — 세로 stacking, 텍스트 좌측 정렬 통일, 갭 축소 */
  .ensemble-leader {
    grid-template-columns: 1fr;
    gap: var(--ds-number-10, 2rem); /* 20 사진 ↔ 정보 */
    /* 모바일은 사진이 위로 stacking → 정보 칼럼은 별도 캡으로 경력 스크롤 */
    --leader-photo-h: 36rem;
  }
  .ensemble-leader__photo {
    width: 100%; /* 가로 100% */
    height: auto;
    aspect-ratio: 280 / 380; /* PC 비율 유지 */
    margin: 0;
  }
  .ensemble-leader__info {
    align-items: flex-start; /* 좌측 정렬 통일 */
    text-align: left;
    gap: 0; /* margin으로만 처리 */
  }
  .ensemble-leader__career-block { align-self: stretch; }
  .ensemble-leader__role { margin-bottom: var(--ds-number-2, 0.4rem) !important; /* 4 */ }
  .ensemble-leader__name {
    font-size: var(--ds-font-size-22, 2.2rem);
    margin-bottom: var(--ds-number-10, 2rem) !important; /* 60 → 20 */
  }
  .ensemble-leader__career-label { font-size: var(--ds-font-size-17, 1.7rem); }

  /* 역대 인물 — 모바일: 카드 더 작게, top margin/padding 축소 */
  .ensemble-history {
    margin-top: var(--ds-number-15, 3rem); /* 60 → 30 */
    padding-top: var(--ds-number-15, 3rem); /* 60 → 30 */
  }
  .ensemble-history__list { gap: var(--ds-number-12, 2.4rem); }
  .ensemble-history__item { flex: 0 0 14rem; /* 140 고정 — 모바일은 2~3개 자연 wrap */ }
  .ensemble-history__title { font-size: var(--ds-font-size-19, 1.9rem); }
  .ensemble-history__name { font-size: var(--ds-font-size-17, 1.7rem); }

  /* 단원 — 모바일: 3-col 세로 카드 유지 */
  .ensemble-card-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--ds-number-8, 1.6rem); /* 16 */
    row-gap: var(--ds-number-12, 2.4rem); /* 24 */
  }

  /* 모달 — 모바일: 세로 stacking (사진 위 + 정보 아래), career만 내부 스크롤 */
  .ensemble-modal__dialog {
    padding: var(--ds-number-15, 3rem); /* 30 */
  }
  .ensemble-modal__body {
    grid-template-columns: 1fr;
    gap: var(--ds-number-10, 2rem); /* 20 */
    align-items: start; /* PC stretch 무효화 */
  }
  /* 모바일 사진 — 더 작게 (22rem → 14rem) */
  .ensemble-modal__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 22 / 26;
    max-width: 14rem;
    margin: 0 auto;
  }
  .ensemble-modal__info {
    min-height: auto; /* PC overflow 제약 해제 */
  }
  .ensemble-modal__name { font-size: var(--ds-font-size-22, 2.2rem); }
  .ensemble-modal__career-label { font-size: var(--ds-font-size-17, 1.7rem); }
  /* 경력 리스트 — 모바일도 일정 크기 후 내부 스크롤 (PC와 동일 UX) */
  .ensemble-modal__career {
    flex: none;
    min-height: auto;
    max-height: 20rem; /* 200 — 일정 크기 초과 시 스크롤 */
    overflow-y: auto;
    padding-right: var(--ds-number-4, 0.8rem); /* 스크롤바 공간 8 */
  }
}

/* V01-2 캐러셀 — 초소형(449↓): 1.x장 노출 (다음 카드 살짝 보임) */
@media (max-width: 449px) {
  .ensemble-carousel__item {
    flex: 0 0 80%;
  }
  /* 단원 카드 — 초소형: 2-col */
  .ensemble-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 스크롤바 화살표 제거는 페이지 전역이 아니라 특정 영역에만 스코프 적용한다:
   - 주요 경력: .ensemble-leader__career (위쪽 정의)
   - 단원 모달: .ensemble-modal__dialog / .ensemble-modal__career (위쪽 정의)
   페이지(html/body)·기타 스크롤바는 브라우저 기본(오버레이) 사용 → 손대지 않음. */