/* layout/sub-header.css — 부모 컴포넌트 오버라이드
   로드 순서: 부모 archf-* → common → animation → layout/* → page/{슬러그} */

/* ── 서브헤더 ── */

.sub-header {
    background-position: 80% center;
}

/* 배경색 — 커스터마이저가 :root 에 --subheader-bg-color 를 항상 찍는다(기본 #1E3A5F).
   변수가 늘 정의돼 있으니 부모 선언의 폴백은 절대 쓰이지 않는다. 요소에서 변수를 다시 정의한다 —
   :root 에서 상속된 값보다 요소 자신의 선언이 이기고, 페이지 메타 인라인은 여전히 이 규칙을 이긴다.

   차일드 템플릿에만 건다. 404·아카이브는 부모가 인라인 마크업으로 그리고 배경 이미지가 없어,
   남색이 남아 있어야 흰색 서브헤더 글자가 읽힌다. */
.sub-header--child {
    --subheader-bg-color: #fff;
}

.sub-header__overlay {
    background: unset;
}

/* overflow — 브레드크럼 드롭다운이 잘리지 않게 (부모는 hidden) */
.sub-header--child {
    overflow: visible;
}

/* 오버레이 헤더(C·D)일 때만 헤더 높이만큼 빼고 남은 영역 기준으로 중앙 정렬.
   솔리드 헤더(A·B)는 본문이 이미 헤더 아래에서 시작해 빼면 위가 그만큼 빈다 */
body.has-header-c .sub-header--child,
body.has-header-d .sub-header--child {
    padding-top: var(--header-height);
}

/* 부모는 inner 상단에 +50px·헤더높이를 더해 비대칭 — 대칭으로 되돌린다 */
.sub-header--child .sub-header__inner,
body.has-header-c .sub-header--child .sub-header__inner,
body.has-header-d .sub-header--child .sub-header__inner {
    padding-top: var(--subheader-padding);
    padding-bottom: var(--subheader-padding);
}

/* 브레드크럼 / 제목 / 설명 좌측 정렬 */
.sub-header--child .sub-header__inner {
    text-align: left;
}

/* 폭 — 부모 .container 기본값(--container-max 1680)은 헤더 기준이라 시안보다 넓다.
   시안 실측: 글자 왼쪽 끝 360 = 1920 안에서 1200 을 가운데 정렬한 위치.

   box-sizing 이 border-box 라 max-width 에 좌우 패딩이 포함된다.
   내용 폭을 1200 으로 맞추려면 패딩만큼 더해 줘야 한다 (.con-inner 는 좌우 패딩이 없어 1200 그대로) */
.sub-header--child .sub-header__inner.container {
    max-width: calc(var(--one-layout) + var(--one-gap-r) * 2);
}

.sub-header__nav {
    position: relative;
    z-index: 3;
    margin-bottom: var(--one-gap-sm);
}

/* 여백은 실측 잉크 간격에서 행간 leading 을 뺀 값이다 (design/s01/s0101/pc_summary.jpg)
     라벨→제목  잉크 30 − (11.2 + 18.4) = 0
     제목→설명  잉크 41 − (18.4 +  7.1) = 16
     설명→하단  잉크 75 − ( 7.1 +  9.5) = 58 */

.sub-header--child .sub-header__title {
    margin-bottom: var(--one-gap-r);
}

/* 시안 실측 22(한글 글자 피치 · 언 360 · 제 382 · 나 405)는 타입 스케일에 없어 가장 가까운 --one-p-tit 를 쓴다.
   PC 24 / 태블릿 20 / 모바일 5.2vw — 고정 22px 이 모바일에서 과했다 (2026-10-06).
   .sub-header__desc 는 타이포 클래스가 없어 부모 clamp(최대 18px)를 받고 있었다 */
.sub-header--child .sub-header__desc {
    margin-bottom: 0;
    font-size: var(--one-p-tit);
}

/* ── 추가 필드 — 영문 라벨 / 하단 설명 (inc/sub-header-meta.php) ──
   색은 부모 변수를 그대로 받아 페이지별 메타 설정이 같이 먹게 한다.
   .txt-wrap(0,1,0) 이 색을 선언하므로 선택자를 (0,2,0) 으로 올린다 */

/* 24px(.p-tit) — 캡높이 17 ÷ Tenor Sans 0.7em. 자간은 --one-sub-ft-ls(0) 를 그대로 쓴다 */
.sub-header--child .sub-header__label {
    margin-bottom: 0;
    color: var(--subheader-title-color, #fff);
}

/* 행간 2.2 — 두 줄 잉크 간격 33 ÷ 15px. 시안이 이 블록만 유독 성기게 잡았다
   위 여백은 시안 58 이 과해 토큰으로 줄였다 — PC·태블릿 48 / 모바일 9.3vw (2026-10-06) */
.sub-header--child .sub-header__note {
    margin-top: var(--one-space-s);
    margin-bottom: 0;
    color: var(--subheader-desc-color, rgba(255, 255, 255, 0.8));
    line-height: 2.2;
}

/* ⚠️ 한글은 기본값(word-break: normal)이면 **글자 사이 아무 데서나** 끊긴다.
   어절 단위로 끊어야 읽히므로 keep-all 로 바꾼다 — 어절 하나가 폭보다 길 때만 깬다.
   줄바꿈 자체는 CSS 로 못 만든다. 끊는 자리를 지정하려면 관리자 「하단 설명」에
   `||` 를 넣으면 그 자리가 **모바일 전용 줄바꿈**이 된다 (sub-header.php) */
.sub-header--child .sub-header__desc,
.sub-header--child .sub-header__note {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ── 스크롤 인디케이터 — 하단 중앙 고정 ── */

.sub-header__scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateX(-50%);
    color: var(--subheader-title-color, #fff);
}

.sub-header__mouse {
    position: relative;
    display: block;
    width: 20px;
    height: 32px;
    border: 1px solid currentColor;
    border-radius: 12px;
}

/* 안쪽 막대가 위→아래로 흐른다 */
.sub-header__mouse::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    width: 2px;
    height: 6px;
    margin-left: -1px;
    border-radius: 2px;
    background-color: currentColor;
    animation: sub-header-scroll 1.6s ease-in-out infinite;
}

@keyframes sub-header-scroll {
    0%   { transform: translateY(0); opacity: 0; }
    25%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { transform: translateY(11px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sub-header__mouse::before {
        animation: none;
    }
}

.sub-header__scroll-txt {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
}

@media (max-width: 639px) {
    .sub-header__scroll {
        bottom: 24px;
    }
}

/* 서브메뉴 — 서브헤더 맨 아래 고정 */
.sub-header__foot {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}

/* ── 브레드크럼 ── */

.sub-header__nav .breadcrumb__list {
    justify-content: flex-start;
}

/* 첫 항목이 아이콘 → 텍스트 */
.breadcrumb__home {
    line-height: 1.4;
}

/* 형제 메뉴 드롭다운 */
.breadcrumb__item--drop {
    position: relative;
}

.breadcrumb__toggle {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    line-height: 1.4;
    cursor: pointer;
}

.breadcrumb__toggle-icon {
    font-size: 0.75em;
    transition: transform 0.2s ease;
}

.breadcrumb__item--drop.is-open .breadcrumb__toggle-icon {
    transform: rotate(180deg);
}

.breadcrumb__drop {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 5;
    min-width: 160px;
    margin: 0;
    padding: 8px 0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    list-style: none;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.breadcrumb__item--drop.is-open .breadcrumb__drop {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* 부모 .breadcrumb__item a 색(흰색)을 이겨야 함 */
.breadcrumb__item .breadcrumb__drop-link {
    display: block;
    padding: 8px 16px;
    color: #555;
    font-weight: 400;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.breadcrumb__item .breadcrumb__drop-link:hover {
    background-color: var(--sub-color03);
    color: var(--main-color);
}

.breadcrumb__drop-item.is-current .breadcrumb__drop-link {
    color: var(--main-color);
}

@media (max-width: 1023px) {
    body.has-header-c .sub-header--child,
    body.has-header-d .sub-header--child {
        padding-top: var(--header-height-sm);
    }
}

@media (max-width: 639px) {
    /* 모바일만 가운데 정렬 — 같은 특정도(0,2,0)라 뒤에 있는 이쪽이 이긴다.
       브레드크럼은 flex 라 text-align 이 안 먹어 justify-content 로 따로 맞춘다 */
    .sub-header--child .sub-header__inner {
        text-align: center;
    }

    .sub-header__nav .breadcrumb__list {
        justify-content: center;
    }

    /* 하단 설명 한 줄 상한 — 한글 1자 ≈ 1em 이라 --note-max 가 곧 한 줄 최대 글자 수.
       balance 는 줄 길이를 고르게 나눠 마지막 줄에 한두 어절만 남는 것을 막는다
       (미지원 브라우저는 상한만 걸리고 평소대로 흐른다) */
    .sub-header--child .sub-header__note {
        --note-max: 24em;

        max-width: var(--note-max);
        margin-right: auto;
        margin-left: auto;
        text-wrap: balance;
    }

    .breadcrumb__item {
        font-size: 14px;
    }

    .sub-header__nav {
        margin-bottom: 12px;
    }
}