/* =========================================================
   수정본 파일명 : footer.css
   다운로드용 TXT : footer.css.txt
   ---------------------------------------------------------
   적용 프로젝트 : 하우징개봉 청년안심주택 웹사이트
   원본 기준     : 사용자가 업로드한 footer.css
   수정일        : 2026-05-03
   ---------------------------------------------------------
   [기존 대화 반영 사항]
   1. 사이트 대표 컬러는 #006655 기준으로 유지합니다.
   2. 정적 리소스 경로는 /assets/... 기준을 유지합니다.
   3. PC / 태블릿 / 모바일 반응형 구조를 유지합니다.
   4. header.css, index.css, footer.css가 함께 로딩되어도 충돌이 적도록 구성합니다.
   5. 서브페이지 상단 비주얼 영역은 과도하게 높아지지 않도록 compact 기준을 유지합니다.
   6. 유지보수자가 CSS 역할을 쉽게 파악할 수 있도록 한글 주석을 보강했습니다.
   7. 사용자의 브라우저 모션 최소화 설정을 고려했습니다.
   ========================================================= */

/* =========================================================
   파일명 : /assets/css/footer.css
   설명   : 하나하우징개봉 청년안심주택 공통 푸터 스타일

   [이 파일에 포함된 범위]
   1. 푸터 전체 영역
   2. 푸터 내부 정렬
   3. 푸터 로고 / 텍스트 / 메뉴
   4. 운영 주체 안내 문구
   5. 푸터 관련 반응형 처리

   [유지보수 참고]
   - footer.php와 직접 연결되는 스타일만 이 파일에 둠
   - header.css, index.css 뒤에 불러와도 충돌이 적도록 구성
   - 이번 수정에서는 운영 주체 문구가 추가되었으므로
     footer-company-info 관련 스타일이 함께 포함됨
   ========================================================= */


/* =========================================================
   1. 푸터
   ========================================================= */

/* ---------------------------------------------------------
   푸터 전체
   - 사이트 하단의 기본 배경 영역
   - 사이트 대표 컬러(#006655)를 유지
   --------------------------------------------------------- */
.site-footer {
    margin-top: 90px;
    border-top: none;
    background-color: #006655;
}


/* ---------------------------------------------------------
   푸터 내부 정렬
   - 좌측 정보 / 우측 저작권을 가로 배치
   - 운영 주체 문구가 추가되므로 기존보다 하단 여백을
     아주 약간 다듬어 전체 높이가 과하게 커지지 않게 조정
   --------------------------------------------------------- */
.footer-inner {
    width: 100%;
    max-width: 1720px;
    margin: 0 auto;
    padding: 22px 24px 28px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}


/* ---------------------------------------------------------
   좌측 영역
   - 로고, 메뉴, 운영 주체 문구를 세로 흐름으로 묶음
   --------------------------------------------------------- */
.footer-left {
    flex: 1;
    min-width: 0;
}


/* ---------------------------------------------------------
   우측 영역
   - 저작권 문구 출력 영역
   - 필요 시 오른쪽 정렬 유지
   --------------------------------------------------------- */
.footer-right {
    flex-shrink: 0;
    text-align: right;
}


/* ---------------------------------------------------------
   좌측 제목 (단지명)
   - 이미지 + 텍스트 함께 정렬
   --------------------------------------------------------- */
.footer-left h3 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
}


/* ---------------------------------------------------------
   푸터 로고 이미지
   --------------------------------------------------------- */
.footer-logo-image {
    height: 18px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}


/* ---------------------------------------------------------
   푸터 로고 텍스트
   --------------------------------------------------------- */
.footer-logo-text {
    display: inline-block;
    line-height: 1;
}


/* ---------------------------------------------------------
   푸터 기본 텍스트
   - 메뉴와 저작권의 기본 글자 스타일
   --------------------------------------------------------- */
.footer-left p,
.footer-right p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}


/* ---------------------------------------------------------
   푸터 메뉴 링크
   - 메뉴 문구와 운영 주체 문구가 너무 붙어 보이지 않도록
     아래쪽 여백을 소폭 부여
   --------------------------------------------------------- */
.footer-menu {
    margin: 0 0 8px 0;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   푸터 메뉴 링크
   --------------------------------------------------------- */
.footer-menu a {
    color: #ffffff;
    text-decoration: none;
}


/* ---------------------------------------------------------
   푸터 메뉴 링크 hover
   --------------------------------------------------------- */
.footer-menu a:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------
   구분자 ( · )
   --------------------------------------------------------- */
.footer-menu span {
    color: rgba(255, 255, 255, 0.6);
}


/* ---------------------------------------------------------
   운영 주체 안내 문구
   - 푸터에서 많은 면적을 차지하지 않도록
     작은 크기의 보조 정보로 표현
   - 회사명이 길기 때문에 줄간격을 확보
   - 모바일에서도 자연스럽게 줄바꿈 가능하도록 설정
   --------------------------------------------------------- */
.footer-company-info {
    margin: 0;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    word-break: keep-all;
}


/* =========================================================
   2. 푸터 관련 반응형 처리
   ========================================================= */

/* ---------------------------------------------------------
   1024px 이하
   - 중간 크기 화면에서 우측 저작권과 좌측 정보 간격 조정
   --------------------------------------------------------- */
@media (max-width: 1024px) {
    .footer-inner {
        gap: 16px;
    }

    .footer-right p {
        font-size: 13px;
    }
}


/* ---------------------------------------------------------
   768px 이하
   - 태블릿 세로 / 큰 모바일
   - 세로 배치로 변경
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 14px;
        padding-right: 14px;
    }

    .footer-right {
        text-align: left;
    }

    .footer-left h3 {
        font-size: 17px;
    }

    .footer-menu {
        line-height: 1.8;
    }

    .footer-company-info {
        font-size: 11.5px;
        line-height: 1.7;
    }
}


/* ---------------------------------------------------------
   480px 이하
   - 작은 모바일 환경
   - 로고 텍스트와 안내 문구의 가독성 확보
   --------------------------------------------------------- */
@media (max-width: 480px) {
    .footer-inner {
        padding-top: 20px;
        padding-bottom: 24px;
    }

    .footer-left h3 {
        gap: 8px;
        font-size: 16px;
        line-height: 1.4;
    }

    .footer-logo-image {
        height: 16px;
    }

    .footer-left p,
    .footer-right p {
        font-size: 13px;
    }

    .footer-company-info {
        font-size: 11px;
        line-height: 1.75;
    }
}


/* =========================================================
   공통 이미지 안전 처리
   ---------------------------------------------------------
   이미지가 부모 영역보다 커져 가로 스크롤이 생기는 문제를 방지합니다.
   ========================================================= */
img {
    display: block;
    max-width: 100%;
    height: auto;
}