/**
 * Fixed Reveal Footer Styles
 * 
 * 화면 하단에 고정된 footer를 구현하고,
 * 콘텐츠가 스크롤되면서 footer를 덮었다가 
 * 페이지 끝에서 자연스럽게 드러나게 하는 스타일
 */

/* =================================================================
   CSS Variables
   ================================================================= */
:root {
    --site-footer-height: 334px; /* JS 로드 전 임시 높이 - 실측값 기반 */
    --frf-safe-gap: 80px; /* 푸터 완전 노출을 위한 여유 - normal footer와 동일 */
}

/* =================================================================
   Fixed Reveal Footer Core Styles
   ================================================================= */

/* ★ 핵심 1: Fixed Reveal Footer를 위해 body에 padding-bottom 적용 ★ */
body.fixed-reveal-footer {
    /* 푸터 전체가 확실히 드러나도록 약간의 안전 여유 추가 */
    /* 중요: var() 함수의 두 번째 인자는 폴백값이므로 기본값을 올바르게 설정 */
    padding-bottom: calc(var(--site-footer-height) + var(--frf-safe-gap));
    /* body 전체를 다크로 칠하면 상단 투명 여백에서 깜빡임이 보임 → 제거 */
}

/* Ensure spacer takes effect at the end of #page */
#page .frf-spacer { width: 100%; pointer-events: none; background: transparent; }

/* 스크롤이 끝에 가까울 때, 콘텐츠 하단을 살짝 잘라 푸터 상단 완전 노출 보장 */
/* Removed clip-path reveal hack to prevent hero showing through the gap. */

/* ★ 핵심 2: 메인 콘텐츠가 푸터를 덮도록 z-index 설정 ★ */
body.fixed-reveal-footer #page {
    position: relative;
    z-index: 4; /* 푸터(z-index: 1)를 덮고 지나가야 함 */
    background-color: #fff;
}

/* ★ 핵심 3: 푸터를 화면 하단에 고정 ★ */
body.fixed-reveal-footer .site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--site-footer-height);
    z-index: 1; /* #page(z-index: 3) 보다 아래에 위치 */
    background-color: #141824;
    overflow: hidden; /* 스크롤바 및 들쑥날쑥 방지 */
    /* 초기에는 viewport 바깥에 위치시켜 숨김 */
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}

/* 스크롤이 시작되면 footer 표시 */
body.fixed-reveal-footer.has-scrolled .site-footer {
    transform: translateY(0);
}

/* 초기 FOUC 방지: 첫 높이 동기 전에는 푸터 숨김, 준비 후 표시 */
body.fixed-reveal-footer:not(.frf-ready) .site-footer { visibility: hidden; }
body.fixed-reveal-footer.frf-ready .site-footer { visibility: visible; }

/* Sticky mode overrides: pure CSS reveal without measurements */
/* Sticky mode removed: relying on fixed + measured height for consistency */

/* Debug outline removed */

/* =================================================================
   Mobile Fallback Styles
   ================================================================= */

/* Fixed reveal 비활성화 시 normal footer처럼 작동 */
body.fixed-reveal-disabled {
    padding-bottom: 0 !important;
}

body.fixed-reveal-disabled .site-footer {
    position: relative !important;
    height: auto !important;
    margin-top: 0 !important; /* 마진 제거하여 sticky 요소 가림 */
    background-color: #141824 !important; /* 기본 검정 배경 */
    /* 모든 sticky 요소보다 위에 표시 */
    z-index: 100 !important;
    /* Normal footer 모드에서는 transform 제거 */
    transform: none !important;
    transition: none !important;
}

body.fixed-reveal-disabled #page {
    padding-bottom: 0;
    /* 기본 z-index 유지 */
    z-index: 1 !important;
}

/* Sticky 동작은 그대로 유지 */
body.fixed-reveal-disabled .page-header-content {
    /* sticky position 그대로 유지 */
    position: sticky !important;
    /* 기존 z-index 유지 */
}

body.fixed-reveal-disabled .page-hero {
    /* sticky 동작 그대로 유지 */
    /* 기존 z-index 유지 */
}

/* =================================================================
   Footer Content Styles
   ================================================================= */

.site-footer.custom-coded-footer {
    padding: 80px 40px 40px 40px;
    font-size: 14px;
    line-height: 1.6;
    color: #737373;
    box-sizing: border-box;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-main {
    display: grid;
    grid-template-columns: 3fr repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 1rem;
}

.footer-col-info .footer-logo {
    width: 220px;
    height: auto;
    margin-bottom: 2rem;
}

.footer-contact p {
    margin: 0 0 1.5rem 0;
}

.footer-contact p strong {
    color: #f1f6ff;
    display: block;
    margin-bottom: 0.5rem;
}

.footer-socials {
    display: flex;
    gap: 0.5rem;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    color: #737373;
    transition: color 0.3s ease;
}

.footer-socials a:hover {
    color: #fff;
}

.footer-socials svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}

.footer-title {
    color: #f1f6ff;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.footer-link {
    display: block;
    color: #737373;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copyright {
    font-size: 13px;
}

.footer-copyright strong {
    color: #f1f6ff;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-legal .footer-link {
    margin-bottom: 0;
}

/* =================================================================
   Responsive Styles
   ================================================================= */

/* 모바일에서 fixed reveal 비활성화 (화면이 작을 때) */
@media (max-width: 767px) and (max-height: 800px) {
    body.fixed-reveal-footer {
        padding-bottom: 0 !important;
    }
    
    body.fixed-reveal-footer .site-footer {
        position: relative !important;
        height: auto !important;
        margin-top: 0 !important; /* 마진 제거 */
        /* 모든 sticky 요소보다 위에 표시 */
        z-index: 100 !important;
    }
    
    body.fixed-reveal-footer #page {
        padding-bottom: 0;
        /* 기본 z-index 유지 */
        z-index: 1 !important;
    }
}

@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .footer-col-info {
        grid-column: 1 / -1;
        margin-bottom: 2rem;
    }
}

@media (max-width: 767px) {
    .site-footer.custom-coded-footer {
        padding: 40px 20px;
    }
    
    .footer-main {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-bottom: 3rem;
    }
    
    .footer-col-info {
        grid-column: 1 / -1;
        margin-bottom: 2rem;
    }
    
    /* 모바일에서 나머지 3개 컬럼의 텍스트 크기 조정 */
    .footer-col .footer-title {
        font-size: 14px;
        margin-bottom: 1rem;
    }
    
    .footer-col .footer-link {
        font-size: 13px;
        margin-bottom: 0.75rem;
    }
    
    .footer-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
}