/* ==========================================================================
   파일명 : layout.css
   설명 : 헤더, 푸터, 전체 구조
   ========================================================================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* [Header] */
header {
    height: var(--header-height);
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    position: sticky; /* 스크롤 시 상단 고정 */
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo a {
    font-size: 2rem; /* 로고도 시원하게 */
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -1px;
}

/* [GNB] 메뉴 */
.gnb ul {
    display: flex;
    gap: 40px; /* 메뉴 사이 간격 넓힘 */
}

.gnb a {
    font-size: 1.15rem; /* 메뉴 글자 18px보다 조금 더 크게 */
    font-weight: 700;
    color: var(--text-main);
    padding: 10px 5px;
    position: relative;
}

.gnb a:hover { color: var(--primary); }

/* 메뉴 밑줄 효과 */
.gnb a::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 3px;
    background: var(--primary); transition: width 0.3s;
}
.gnb a:hover::after { width: 100%; }


/* [Footer] */
footer {
    background: var(--bg-footer);
    color: #fff;
    padding: 60px 0; /* 여백 넉넉하게 */
    text-align: center;
    margin-top: 80px;
}

.footer-links {
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 0;
}
.footer-links a,
.footer-links button {
    margin: 0 15px;
    opacity: 0.8;
    font-size: 1.05rem; /* 고령자 가독성: 1rem → 1.05rem */
    font-weight: 600;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 480px) {
    .footer-links a,
    .footer-links button {
        margin: 4px 10px;
        font-size: 0.92rem;
    }
}
.footer-links button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 10px 4px;
    font-family: inherit;
}
.footer-links a:hover,
.footer-links button:hover { opacity: 1; text-decoration: underline; }

/* ==========================================================================
   [반응형] 모바일 (태블릿 포함 768px 이하)
   ========================================================================== */
   
/* 1. 평소(PC)에는 햄버거 버튼 숨김 */
.btn-mobile-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 44px; min-height: 44px; /* WCAG 2.5.5 터치 타겟 최소 44x44px */
    background: none; border: none; cursor: pointer;
    gap: 5px; padding: 0;
    z-index: 1001;
}
.btn-mobile-menu .bar {
    display: block;
    width: 100%; height: 3px;
    background-color: #333;
    border-radius: 3px;
    transition: 0.3s;
}

@media (max-width: 768px) {

    /* 2. 헤더 높이 조정 */
    header { height: 60px; }
    .logo a { font-size: 1.5rem; }

    /* 3. 햄버거 버튼 표시 */
    .btn-mobile-menu { display: flex; }

    /* 4. GNB 메뉴 (평소엔 숨김 -> 열리면 보임) */
    .gnb {
        display: none; /* 기본 숨김 */
        position: absolute;
        top: 60px; left: 0;
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #eee;
        padding: 20px 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        flex-direction: column;
    }
    
    /* [중요] JS가 'show' 클래스를 붙이면 나타남 */
    .gnb.show { display: flex; animation: slideDown 0.3s forwards; }

    .gnb ul {
        flex-direction: column; /* 세로 정렬 */
        width: 100%;
        gap: 0;
    }

    .gnb a {
        display: block;
        padding: 15px 20px;
        font-size: 1.1rem;
        border-bottom: 1px solid #f9f9f9;
        text-align: center; /* 가운데 정렬 */
    }
    
    /* 로그인 버튼 모바일 스타일 */
    .btn-login {
        display: inline-block !important;
        margin-top: 15px;
        width: 80%;
        margin-left: 10%;
    }
}

/* 메뉴가 스르륵 내려오는 애니메이션 */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}