@charset "utf-8";
/* ===== 서브 공통 (sub01~sub04 공용) ===== */

/* 서브 상단 비주얼 — 배경 1장 공용, ABOUT/타이틀 텍스트만 페이지별 치환 */
/* header 가 position:fixed(91px) 라 flow 를 차지하지 않는다 — 서브 첫 요소가 그만큼 내려온다 */
.sub-visual {
    box-sizing: border-box;
    margin-top: calc(var(--px) * 91);
    width: 100%;
    aspect-ratio: 1920 / 400;
    background: url("/images/sub_visual.webp") no-repeat center / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--px) * 17);
    padding-bottom: calc(var(--px) * 20);
    color: #ffffff;
    text-align: center;
    line-height: 1;
}

/* letter-spacing 은 부모에서 상속하면 섹션 font-size 로 계산돼 굳는다 —
   요소별 -0.05em(20px→-1px · 60px→-3px)이 나오도록 각자 선언한다 */
.sub-visual__eyebrow {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
}

.sub-visual__title {
    font-size: var(--titleXL);
    font-weight: 700;
    letter-spacing: -0.05em;
}

/* 서브 페이지 탭 — sub01(브랜드 소개/사업 분야) · sub02(초급반/직업반) 공용.
   두 페이지 PSD 좌표가 동일하다: 바 486~569 · 텍스트 y519 18px · 활성 밑줄 l828 w133 h5 */
.sub-tabs {
    box-sizing: border-box;
    height: calc(var(--px) * 83);
    border-bottom: 1px solid #dddddd;
    font-family: var(--font-pretendard);
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.95;
}

/* 탭 셀은 카피 길이와 무관하게 133 고정 — 시안의 탭 중심 간격(130)과 활성 밑줄 폭이
   콘텐츠 폭에 흔들리면 안 된다. 텍스트 폭이 다른 페이지(브랜드 소개 77 / 초급반 45)를
   같은 컴포넌트로 쓰는 근거가 이 고정폭이다 */
.sub-tabs__item {
    box-sizing: border-box;
    position: relative;
    width: calc(var(--px) * 133);
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    color: #afafaf;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.sub-tabs__item--active {
    color: #000000;
}

/* 밑줄은 바 하단선(border-bottom) 을 덮고 얹힌다 — 셀 하단 기준 5px, border 두께만큼 내려 겹친다 */
.sub-tabs__item--active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: calc(var(--px) * 5);
    background: currentColor;
}

/* ===== 벌 전환(pane) + sticky 탭바 =====
   sub01 은 3단 탭이라 전용 .sub01-pane/.sub01-sticky 를 그대로 두고, 1단짜리(sub02~)만 이 공용을 쓴다.
   --hdrH 는 페이지 스크립트가 헤더 노출 여부(.header.insert)에 맞춰 91 ↔ 0 으로 갱신한다 */
:root {
    --hdrH: calc(var(--px) * 91);
}

.sub-pane {
    display: none;
}

.sub-pane.sub-pane--active {
    display: block;
}

.sub-sticky {
    position: sticky;
    top: var(--hdrH);
    z-index: 30;
    /* 헤더 top 트랜지션(0.3s)과 맞춰야 헤더 숨김/노출 시 탭바가 튀지 않는다 */
    transition: top 0.3s;
}

@media (max-width: 599px) {
    .sub-visual {
        margin-top: 15vw;
        height: 53.3333vw;
    }

    .sub-tabs {
        height: 16vw;
    }

    .sub-tabs__item {
        width: 50%;
    }

    .sub-tabs__item--active::after {
        height: 0.5333vw;
    }

    .sub-tabs.sub-sticky,
    .sub-tabs.sub01-sticky--l1 {
        top: 15vw;
    }
}