/* =====================================================
   sub_common.css — 서브페이지 공통 (about / sub2 / sub3 / sub4)
   - common.css 뒤, 각 페이지 CSS(sub1~4.css) 앞에 로드합니다.
   - 포함: ① 서브 비주얼(히어로) + 브레드크럼 ② 공통 섹션 제목(.sub-section-heading)
   - 페이지마다 다른 값(배경색 / 딤드 / 사진 위치 / 제목 색 / 본문 색)은 아래 CSS 변수 또는 각 페이지 CSS 에서 지정합니다.
   ===================================================== */

/* =====================================================
   ① 서브 비주얼 (히어로)
   - 폭 100% (100vw 를 쓰지 않아 스크롤바 폭만큼 넘치지 않음), 높이 clamp, 우하단 라운드는 배경 래퍼(.sub-hero__bg)에서
     사진 + 딤드를 함께 자름. 헤더는 index 와 같은 absolute 헤더를 그대로 얹음 (overflow 는 배경 래퍼에만).
   - 페이지별 값: --sub-hero-bg(배경색) / --sub-hero-dim(딤드) / --sub-hero-pos(사진 위치) → 각 페이지 CSS 의 .page-* 에서 지정
   ===================================================== */
.sub-hero {
  --sub-pad-x: 24px;

  position: relative;
  height: clamp(420px, 28.7vw, 550px); /* PC 원본 1920×550 */
  color: #fff;
}
.sub-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0 0 clamp(48px, 5.21vw, 100px) 0; /* 사진 + 딤드를 함께 둥글게 자름 (PC 100px) */
  background: var(--sub-hero-bg, #3d4a4f);
}
.sub-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sub-hero-pos, 50% 50%);
}
.sub-hero__dim {
  position: absolute;
  inset: 0;
  background: var(--sub-hero-dim, rgba(16, 20, 22, 0.52)); /* 고정 딤드 (가독성) */
  background: var(--sub-hero-dim, rgba(16, 20, 22, 0));
}
.sub-hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px var(--sub-pad-x) 0;
  text-align: center;
}
.sub-hero__title {
  margin: 0;
  font-size: clamp(32px, 3vw, 55px);
  font-weight: 800;
  letter-spacing: 0em;
  line-height: 1.2;
}

/* 브레드크럼: 첫 항목은 홈 아이콘(텍스트는 숨김, 스크린리더용), 항목 사이는 | 구분선 */
.sub-hero__crumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 55px 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(13px, 0.95vw, 14px);
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.sub-hero__crumb ol li {
  display: inline-flex;
  align-items: center;
}
.sub-hero__crumb ol li:nth-child(1) a {
  display: inline-flex;
  width: 13px;
  height: 12px;
  background: url(../images/inc/ic-home.svg) no-repeat center / 100%;
  overflow: hidden;
  text-indent: -99999px;
}
.sub-hero__crumb li + li::before {
  content: "|";
  margin: 0 0.8em;
  opacity: 0.6;
}

/* =====================================================
   ② 공통 섹션 제목 (.sub-section-heading)
   구조:
     <header class="sub-section-heading [sub-section-heading--intro|--compact]">
       <p class="sub-section-heading__eyebrow" lang="en">English Label</p>
       <h2 class="sub-section-heading__title">제목</h2>
       <div class="sub-section-heading__description"><p>설명</p></div>   ← 설명이 없으면 이 div 를 만들지 않음
     </header>
   - 섹션 바깥 여백(위 · 아래 · 좌우)은 각 페이지 CSS 에서 지정. 고정 높이 없음 (글자가 잘리지 않음).
   - 색: --sub-heading-accent(영문 라벨) / --sub-heading-desc(설명). 제목은 부모 섹션의 글자색(color)을 상속.
   - 크기 차이는 modifier 로: --intro(페이지 첫 소개 제목, 크게) / --compact(작게)
   ===================================================== */
.sub-section-heading {
  text-align: center;
}
.sub-section-heading__eyebrow {
  margin: 0 0 16px;
  font-family: "Manrope", "Pretendard Variable", sans-serif;
  font-size: clamp(13px, 0.95vw, 20px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--sub-heading-accent, #D6B992);
}
.sub-section-heading__title {
  margin: 0;
  font-size: clamp(28px, 2.5vw, 50px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.045em;
  word-break: keep-all;
}
.sub-section-heading__description {
  margin: clamp(16px, 1.8vw, 24px) auto 0;
  max-width: 40em;
}
.sub-section-heading__description p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.85;
  color: var(--sub-heading-desc, #2A2622); 
  word-break: keep-all;
}
.sub-section-heading__description p + p {
  margin-top: 1.5em;
}

/* 페이지 첫 소개 제목 (크게) */
.sub-section-heading--intro .sub-section-heading__eyebrow {
  margin-bottom: 20px;
  font-size: clamp(15px, 1.1vw, 19px);
}
.sub-section-heading--intro .sub-section-heading__title {
  font-size: clamp(28px, 2.8vw, 50px);
}
.sub-section-heading--intro .sub-section-heading__description {
  margin-top: clamp(24px, 2.6vw, 44px);
}

/* 작은 제목 (좁은 영역 / 보조 섹션) */
.sub-section-heading--compact .sub-section-heading__title {
  font-size: clamp(26px, 2.3vw, 40px);
  line-height: 1.3;
}

/* =====================================================
   반응형
   ===================================================== */
@media (max-width: 1599px) {
  /* 헤더가 모바일 메뉴(높이 120px)로 바뀌는 구간 */
  .sub-hero__inner {
    padding-top: 80px;
  }
}
@media (max-width: 1000px) {
  .sub-hero {
    height: clamp(340px, 52vw, 460px);
  }
}
@media (max-width: 580px) {
  .sub-hero {
    --sub-pad-x: 20px;
  }
  .sub-hero__inner {
    padding-top: 64px;
  }
}