/* ==========================================================================
   DAMDA 2026 — ABOUT US
   시안: about us_base / scroll down 1~4 / mobile ver
   다크 테마 + 풀스크린 미디어 섹션 4개(영상 2, 사진 2) + 스크롤 스냅
   ========================================================================== */

/* 모바일에서만: 윈도우 스크롤 스냅 (스와이프가 섹션 경계에 정착)
   데스크톱은 js2026/about.js의 transform 덱이 섹션 이동을 전담한다 */
@media (max-width: 900px) {
    html {
        scroll-snap-type: y mandatory;
    }
}

/* 데스크톱: 풀페이지 '스택 커버' 덱 (about.js가 html에 .ab-deck 부여)
   - fullPage.js의 Effects: Stack Cover 실측 재현 —
     현재 섹션은 제자리에 고정되고, 다음 섹션이 아래에서 카드처럼 올라와 덮는다
   - 전환 시간·곡선 조절은 .ab-sec / #footer2026 의 transition 한 줄 */
@media (min-width: 901px) {
    html.ab-deck,
    html.ab-deck body {
        overflow: hidden;
    }

    /* 덱 뷰포트: 화면 전체를 래퍼로 고정 */
    html.ab-deck #body-wrapper {
        height: calc(100vh / var(--wide-zoom));
        position: relative;
        overflow: hidden;
    }

    html.ab-deck #body-section {
        position: relative;
        height: calc(100vh / var(--wide-zoom) - 112px); /* 헤더(112) 아래 영역 */
        overflow: hidden;
    }

    html.ab-deck #about2026 {
        height: 100%;
        padding: 0;
    }

    /* 섹션 = 쌓이는 카드: 기본은 화면 아래 대기, .ab-on이면 제자리(쌓임).
       z-index는 about.js가 문서 순서대로(1..n) 부여 → 뒤 카드가 앞 카드를 덮음 */
    html.ab-deck #about2026 .ab-sec {
        position: absolute;
        top: 0;
        left: 16px;   /* 좌우 거터 유지 */
        right: 16px;
        height: calc(100% - 16px); /* 하단 16px 여백 유지 */
        margin: 0;
        transform: translateY(calc(100% + 32px));
        transition: transform 500ms ease;
        will-change: transform;
    }

    html.ab-deck #about2026 .ab-sec.ab-on {
        transform: translateY(0);
    }

    /* 푸터 = 마지막 카드: 화면 하단에서 올라와 마지막 섹션 하단을 덮음 */
    html.ab-deck #footer2026 {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 16px 16px;
        z-index: 60;
        transform: translateY(calc(100% + 32px));
        transition: transform 500ms ease;
        will-change: transform;
    }

    html.ab-deck.ab-footer #footer2026 {
        transform: translateY(0);
    }

    /* 덱 진입/리사이즈 시 즉시 재배치용 */
    html.ab-deck.ab-instant #about2026 .ab-sec,
    html.ab-deck.ab-instant #footer2026 {
        transition: none;
    }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
    html.ab-deck #about2026 .ab-sec,
    html.ab-deck #footer2026 {
        transition: none;
    }
}

/* ---------- 우측 섹션 내비 닷 (fullPage.js 기본 내비 실측 복제) ----------
   실측값: 컨테이너 fixed right 17px·수직 중앙·z 100 / 칸 14×13, 마진 7px /
   닷 4×4 흰색 원(중앙 정렬), 호버 10×10, 활성 12×12 / 전환 0.1s ease-in-out */
#ab-dots {
    display: none;
}

@media (min-width: 901px) {
    html.ab-deck #ab-dots {
        display: block;
        position: fixed;
        /* 뷰포트가 콘텐츠 최대폭(1920)보다 넓으면 흰 여백 위에 떠서 안 보이므로,
           콘텐츠 우측 가장자리 기준 17px로 보정 */
        right: max(17px, calc((100vw - var(--max-w)) / 2 + 17px));
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
    }

    #ab-dots ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #ab-dots li {
        display: block;
        width: 14px;
        height: 13px;
        margin: 7px;
        position: relative;
    }

    #ab-dots a {
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
        position: relative;
        text-decoration: none;
    }

    #ab-dots a span {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 4px;
        height: 4px;
        margin: -2px 0 0 -2px;
        background: #fff;
        border-radius: 50%;
        transition: all 0.1s ease-in-out;
    }

    #ab-dots li:hover a span {
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;
    }

    #ab-dots a.active span,
    #ab-dots li:hover a.active span {
        width: 12px;
        height: 12px;
        margin: -6px 0 0 -6px;
        border-radius: 100%;
    }
}

/* ---------- 다크 테마 ---------- */
#body-wrapper { background: #262A28; }

/* 헤더: 다크 스킨 + 상단 고정 (시안: 모든 스크롤 상태에서 GNB 유지) */
#header2026 {
    position: sticky;
    top: 0;
    background: #262A28;
}

#header2026 .hd-box { background: #505554; }

#header2026 .hd-menu { color: #262A28; }

#header2026 .hd-menu.is-note {
    background: #505554;
    color: var(--green);
}

#header2026 .hd-menu.is-note strong { color: var(--green); }

/* 활성(ABOUT US)·호버는 공통 규칙(그린 bg + 흰 글자) 그대로 사용 */

/* ---------- 섹션 ---------- */
#about2026 {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 16px;
}

#about2026 .ab-sec {
    position: relative;
    height: calc(100vh / var(--wide-zoom) - 128px); /* 헤더 112 + 하단 여백 16 */
    margin-bottom: 16px;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always; /* 빠른 스와이프도 섹션을 건너뛰지 않게 */
    scroll-margin-top: 112px;
    background: #262A28;
}

/* mandatory 스냅에서 푸터가 닿을 수 없는 영역이 되지 않도록
   문서 끝(푸터 하단)도 스냅 지점으로 등록 */
#footer2026 {
    scroll-snap-align: end;
}

#about2026 .ab-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 미디어 딤 오버레이 (시안: 균일한 다크 스크림) */
#about2026 .ab-sec::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(38, 42, 40, .45);
    pointer-events: none;
}

/* ---------- 캡션 (하단 중앙) ---------- */
#about2026 .ab-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
    text-align: center;
    z-index: 2;
}

#about2026 .ab-title {
    font-family: var(--font-kr);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.64px;
    color: var(--green);
    word-break: keep-all;
}

#about2026 .ab-label {
    margin-top: 12px;
    font-family: var(--font-en);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0;
    color: #848D89;
}

/* ---------- 모바일 ---------- */
@media (max-width: 900px) {
    #about2026 { padding: 0 16px; } /* 좌우 거터 16px */

    #about2026 .ab-sec {
        height: calc(100vh - 96px); /* 모바일 헤더(64+16+16) */
        margin-bottom: 8px;
        scroll-margin-top: 88px;
    }

    #about2026 .ab-caption { bottom: 40px; padding: 0 24px; }

    #about2026 .ab-title { font-size: 22px; letter-spacing: -0.44px; }

    #about2026 .ab-label { margin-top: 8px; font-size: 17px; }
}

/* 와이드 줌(>1920): 래퍼가 화면을 가득 채우므로 페이지 dots는 화면 우측 기준 17px */
@media (min-width: 1921px) {
    html.ab-deck #ab-dots { right: 17px; }
}

/* 와이드(>1920): 본문 여백을 헤더·푸터 인셋(8px)과 정렬 */
@media (min-width: 1921px) {
    #about2026 { padding: 0 8px; }
}