/*
 * responsive.css
 * 전역 레이아웃 반응형 오버라이드
 *
 * default.css의 고정폭(1440px) 선언을 뷰포트별로 유동화한다.
 * head.sub.php에서 default.css 뒤에 로드되므로 동일 우선순위에서 후순위 적용된다.
 *
 * 브레이크포인트 기준 (Figma 4프레임):
 *   base    : 360 레이아웃
 *   > 360   : 767 레이아웃
 *   > 767   : 1023 레이아웃
 *   > 1023  : 1440 레이아웃 (default.css 원본 유지)
 */

/* ── 전역: 고정폭 해제 (모든 뷰포트) ── */
#hd,
#wrapper,
#ft {
    min-width: 0;
}

#hd_pop,
#hd_wrapper,
#tnb .inner,
#gnb .gnb_wrap,
#container_wr,
#ft_wr {
    width: 100%;
    max-width: 1420px;
    box-sizing: border-box;
}

/* index 메인: default.css와 동일 조건 — 위 max-width 1420보다 우선 (더 높은 특이도) */
body:has(main.main-figma:not(.gsmk-history):not(.gsmk-greeting)) #container_wr {
    width: min(100%, 1920px);
    max-width: 1920px;
}
body:has(main.main-figma:not(.gsmk-history):not(.gsmk-greeting)) .main-section.main-esg .main-section__inner {
    width: min(100%, 1920px);
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#container {
    width: 100%;
    max-width: 100%;
    float: none;
    margin: 0;
    min-height: 0;
    height: auto !important;
    padding: 0;
}

#aside {
    display: none;
}

#container_title {
    display: none;
}

/* ── 디자인 페이지 상단 여백 변수 ── */
:root {
    --design-page-top-padding-desktop: 130px;
    --design-page-top-padding-mobile: 96px;
}

/* ── 디자인 페이지 공통(기술사사무소/기술역량/사업분야): 상단 여백 일괄 관리 ── */
.about-page__inner,
.chief-page__inner,
.location-page__inner,
.performance-page__inner,
.academy-page__inner,
.advisory-page__inner,
.field-support-page__inner,
.survey-support-page__inner,
.forest-ecology-page__inner,
.forest-management-page__inner,
.forest-recreation-page__inner,
.forest-restoration-page__inner,
.landscape-page__inner {
    padding-top: var(--design-page-top-padding-desktop);
    margin-top: 0;
}

/* ── 1023 이하: 푸터 패딩 조정 ── */
@media (max-width: 1023px) {
    #ft_wr {
        padding: 60px 40px;
    }
    /* 기존 레이아웃 호환(현재 footer는 ft_texts 미사용) */
}

/* ── 767 이하: 푸터 축소 ── */
@media (max-width: 767px) {
    .about-page__inner,
    .chief-page__inner,
    .location-page__inner,
    .performance-page__inner,
    .academy-page__inner,
    .advisory-page__inner,
    .field-support-page__inner,
    .survey-support-page__inner,
    .forest-ecology-page__inner,
    .forest-management-page__inner,
    .forest-recreation-page__inner,
    .forest-restoration-page__inner,
    .landscape-page__inner {
        padding-top: var(--design-page-top-padding-mobile);
    }

    #ft_wr {
        padding: 80px 20px;
    }

    #ft .ft_logo-desktop {display:none}
    #ft .ft_logo-mobile {display:block}
    #top_btn {display:none}

    .ft_main {
        flex-direction:column;
        align-items:flex-start;
        justify-content:flex-start;
        gap:60px;
    }

    .ft_logo,
    .ft_info {
        width: 100%;
    }

    .ft_bottom {
        margin-top:20px;
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        justify-content:flex-start;
    }

    #ft_link {
        gap:12px;
        flex-wrap:wrap;
        align-items:flex-start;
    }

    .ft_admin_link {display:none}
    .ft_copyright {
        text-align:left;
        white-space:normal;
    }

    .ft_address_row {
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
    }

    .ft_address_row + .ft_address_row {
        margin-top:4px;
    }

    .ft_mobile-only {display:block}

    /* Design system: buttons/pagination tap target */
    .btn {
        width:auto;
        height:40px;
        line-height:40px;
        padding:0 16px;
        font-size:16px;
        border-radius:1000px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .btn_submit {
        height:40px;
        line-height:40px;
        padding:0 16px;
        border-radius:1000px;
        background:var(--color-point);
        color:var(--color-white);
        font-size:16px;
        font-weight:700;
    }

    .btn_b01 {
        height:40px;
        line-height:40px;
        padding:0 16px;
        border-radius:1000px;
        background:#fff;
        border:1px solid var(--color-border);
        color:var(--color-text);
        font-size:16px;
        font-weight:700;
    }

    .btn_b02 {
        height:40px;
        line-height:40px;
        padding:0 16px;
        border-radius:1000px;
        background:var(--color-point);
        color:var(--color-white);
        border:0;
        font-size:16px;
        font-weight:700;
    }

    .pg {gap:12px}
    .pg_page,
    .pg_current,
    .pg_start,
    .pg_prev,
    .pg_end,
    .pg_next {
        width:40px;
        height:40px;
        min-width:40px;
        line-height:40px;
        font-size:16px;
    }
}

/* ── 360 이하: 최소 뷰포트 ── */
@media (max-width: 360px) {
    .ft_texts {
        max-width: 257px;
    }

    #ft_link {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    #ft .ft_copyright {
        word-break: keep-all;
    }

    /* top_btn은 767px 이하에서 hidden */
}