/* ==========================================================================
   01. 푸터 레이아웃
   ========================================================================== */
.site-footer {
    padding: clamp(70px, 6.25vw, 120px) 3.125vw 12px;
    overflow: hidden;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* ==========================================================================
   02. 좌측 슬로건
   ========================================================================== */
.footer-statement h2 {
    font-size: clamp(24px, 1.875vw, 36px);
    line-height: 1.5;
}

.footer-statement > p {
    margin-top: 18px;
    font-size: clamp(11px, 0.8333vw, 16px);
    color: #999999;
}

/* ==========================================================================
   03. 우측 사이트맵 & 정보
   ========================================================================== */
.footer-sitemap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.footer-sitemap a {
    display: block;
    font-size: clamp(11px, 0.8333vw, 16px);
    line-height: 1.8;
    color: #666666;
}

.footer-sitemap > div > a:first-child {
    color: #999999;
    font-size: clamp(11px, 0.7292vw, 14px);
    margin-bottom: 24px;
}

.footer-sitemap__counsel {
    margin-top: 45px;
}

.footer-sitemap__counsel > a:first-child {
    color: #999999;
    font-size: clamp(11px, 0.7292vw, 14px);
    margin-bottom: 18px;
}

.footer-info {
    margin-top: 65px;
    font-size: clamp(11px, 0.7292vw, 14px);
    line-height: 1.8;
    color: #888888;
}

.footer-info__policy {
    margin-top: 20px;
}

/* ==========================================================================
   04. 하단 워드마크 & 카피라이트
   ========================================================================== */
.footer-wordmark {
    margin: 10px -0.3vw 0;
    white-space: nowrap;
    font-family: Pretendard, Arial, sans-serif;
    font-size: 15.5vw;
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.075em;
}

.footer-copyright {
    margin-top: 10px;
    color: #888888;
    font-size: 12px;
}

/* ==========================================================================
   05. 반응형 미디어 쿼리
   ========================================================================== */
@media (max-width: 1000px) {
    .site-footer {
        padding-inline: 5vw;
    }

    .footer-sitemap {
        gap: 18px;
    }

    .footer-info {
        margin-top: 60px;
    }
}

@media (max-width: 760px) {
    .site-footer {
        padding: 60px 24px 16px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .footer-statement h2 {
        font-size: 23px;
    }

    .footer-sitemap {
        gap: 14px;
    }

    .footer-sitemap a {
        font-size: 10px;
    }

    .footer-sitemap > div > a:first-child,
    .footer-sitemap__counsel > a:first-child {
        font-size: 10px;
        margin-bottom: 16px;
    }

    .footer-sitemap__counsel {
        margin-top: 30px;
    }

    .footer-info {
        margin-top: 45px;
        font-size: 10px;
    }

    .footer-wordmark {
        font-size: 14.8vw;
        margin-top: 32px;
    }

    .footer-copyright {
        font-size: 9px;
        margin-top: 14px;
    }
}