/* ============================================================
   PAGE HEADER — 서브 히어로 래퍼 프로젝트 고유 스타일
   DS 컴포넌트(.ds-sub-hero, .ds-tab, .ds-breadcrumb)를 기본으로
   사용하고, 여기엔 프로젝트 고유 오버라이드만 둡니다.
   ============================================================ */

/* ==================== 히어로 라운드 래퍼 ==================== */
.sub-hero-wrap {
  padding: 0 var(--ds-pc-padding-layout-side);
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: var(--ds-number-10);          /* 20px — 히어로↔탭(또는 본문) 간격 */
}
.sub-hero-wrap .ds-sub-hero {
  border-radius: var(--ds-radius-xlarge);
  overflow: hidden;
  background-color: var(--ds-color-brand-dark);       /* #343A48 — 배경 이미지 대신 단색 */
  min-height: 0;
  height: clamp(140px, 18vw, 220px);
  align-items: center;
  justify-content: center;
}
.sub-hero-wrap .ds-sub-hero--with-breadcrumb .ds-sub-hero__content {
  align-items: center;
  text-align: center;
  padding-bottom: 0;
  gap: var(--ds-number-2);                          /* 0.4rem: 영문↔제목 간격 */
}
/* 제목: 한 단계 크게 + 굵게 */
.sub-hero-wrap .ds-sub-hero__title {
  font-size: var(--ds-pc-font-size-display-medium);  /* 44px (기존 heading-xlarge 40px) */
  font-weight: var(--ds-typo-font-weight-bold);
}
/* 브레드크럼: 제목과 2배 간격 + 한줄 정렬 */
.sub-hero-wrap .ds-breadcrumb {
  margin-top: var(--ds-number-8);                   /* 1.6rem 추가 → 총 2rem (gap 0.4 + margin 1.6) ≈ 영문↔제목의 5배 */
}
.sub-hero-wrap .ds-breadcrumb ol {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 텍스트 순 흰색 처리 (접근성 — brand-dark 배경 위) */
.sub-hero-wrap .ds-sub-hero__label {
  color: var(--ds-color-gray-0);
}
.sub-hero-wrap .ds-breadcrumb__link,
.sub-hero-wrap .ds-breadcrumb__item:last-child .ds-breadcrumb__link {
  color: var(--ds-color-gray-0);
}
.sub-hero-wrap .ds-breadcrumb__item + .ds-breadcrumb__item::before {
  color: var(--ds-color-gray-30);                        /* 연한 회색 도트 */
  background-color: transparent;
}

/* page-header 인클루드 뒤의 본문 sub-page-wrap — 탭 유무 무관하게 본문이 상단 간격 담당 */

/* ==================== 2뎁스 탭 (라인 탭만 — pill 탭 제외) ==================== */
#ph-tab-wrap {
  padding-block: 0;                                   /* 상/하 여백 제거 — 히어로↔본문 간격은 sub-page-wrap에서 관리 */
}
/* 페이지 헤더 탭: max-width + 여백을 ds-tab 래퍼에 적용 (border-bottom 포함 정렬) */
#ph-tab-wrap .ds-tab {
  max-width: var(--ds-contents-size-wide);            /* 1440px */
  margin-inline: auto;
  padding-inline: 0;                                  /* 1440px 이상: 갭 없음 */
}
#ph-tab-wrap .ds-tab__list {
  justify-content: center;
}
@media (max-width: 1440px) {
  #ph-tab-wrap .ds-tab {
    padding-inline: var(--ds-pc-padding-layout-side); /* 30px — sub-hero-wrap과 정렬 */
  }
}
/* 선택된 탭: brand-dark 색상 */
.sub-page-wrap > .ds-tab .ds-tab__btn.is-active,
.sub-page-wrap > .ds-tab .ds-tab__btn[aria-selected="true"],
#ph-tab-wrap .ds-tab__btn.is-active,
#ph-tab-wrap .ds-tab__btn[aria-selected="true"] {
  --ds-tab--color-active: var(--ds-color-brand-dark);
  --ds-tab--border-active: var(--ds-color-brand-dark);
}

/* ==================== 모바일 셀렉트 전환용 ==================== */
.sub-page-wrap > .page-header__select,
#ph-tab-wrap .page-header__select {
  display: none;
}


/* ==================== 반응형: 태블릿 ==================== */
@media (max-width: 1199px) {
  .sub-hero-wrap {
    padding: 0 var(--ds-pc-padding-layout-side);
    margin-bottom: var(--ds-number-8);           /* 16px — 태블릿 */
  }
  .sub-hero-wrap .ds-sub-hero {
    min-height: 0;
  }
  .sub-hero-wrap .ds-sub-hero__title {
    font-size: var(--ds-pc-font-size-heading-xlarge);    /* 40px */
  }
  .sub-hero-wrap .ds-sub-hero__content {
    gap: var(--ds-number-4);
  }
  .sub-hero-wrap .ds-breadcrumb {
    display: none;
  }
  /* 페이지 헤더 탭: 좁은 화면에서도 가로 스크롤 탭 유지(본문 탭과 통일) — 셀렉트 전환 제거.
     가로 스크롤 동작은 component.css의 .ds-tab:not(.ds-tab--pill) 모바일 규칙이 담당.
     .page-header__select 는 상단 전역 규칙(88~91줄, display:none)으로 계속 숨김. */
}

/* ==================== 반응형: 모바일 ==================== */
@media (max-width: 767px) {
  .sub-hero-wrap {
    padding: 0 var(--ds-mobile-padding-layout-side);
    margin-bottom: var(--ds-number-5);           /* 10px — 모바일 */
  }
  .sub-hero-wrap .ds-sub-hero {
    border-radius: var(--ds-radius-large);
    min-height: clamp(12rem, calc(8rem + 10vw), 20rem);
  }
  .sub-hero-wrap .ds-sub-hero__title {
    font-size: var(--ds-mobile-font-size-heading-xlarge);  /* 32px */
  }
  .sub-hero-wrap .ds-sub-hero__content {
    gap: var(--ds-number-3);
  }
  .sub-hero-wrap .ds-breadcrumb {
    display: none;
  }

  /* 본문 라인 탭의 모바일 동작(좌측정렬·가로 스크롤·.ds-tab--bold 밑줄 인디케이터)은 component.css에서 일원 처리.
     여기서는 본문 탭의 select 전환만 비활성화 — 본문 탭(.sub-page-wrap > .ds-tab)은 모바일에서도 탭을 유지(select 미사용). */
  .sub-page-wrap > .page-header__select {
    display: none;
  }
  /* 페이지 헤더 인클루드 탭(#ph-tab-wrap)도 본문 탭과 통일 — 모바일에서 셀렉트로 전환하지 않고
     가로 스크롤 탭 유지. 가로 스크롤 동작은 component.css의 .ds-tab:not(.ds-tab--pill) 규칙이 담당.
     .page-header__select 는 상단 전역 규칙(88~91줄, display:none)으로 계속 숨김. */
}