/* 헤더 css */


.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;

    background-color: rgb(175, 226, 255); /* 배경색 설정*/
    box-shadow: 0 0 3px #000;
    
}


.header__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 1rem;
    height: 100px;
}


.header__start{
    display: flex;
    align-items: center; /*  세로 중앙 정렬 */
    height: 100%; /* 부모 높이 채움 */
}



/* 이미지 로고 */
.header_로고 {
    margin-left: 2rem; /*왼쪽 살짝 띄우기*/
}


.header_로고_small{
    display: none;

    margin-left: 2rem; /*왼쪽 살짝 띄우기*/
}




.header__center{
    display: flex;
    align-items: center; /*  세로 중앙 정렬 */
    height: 100%; /* 부모 높이 채움 */

    width: 50%;
}








.header__end{
    display: flex;
    align-items: center; /*  세로 중앙 정렬 */
    height: 100%; /* 부모 높이 채움 */


}








/* PC 네비바 목록 */
.header-pc-nav ul {
    display: block;

    list-style-type: none; /* 목록 항목의 기본 마커(불릿) 제거 */
    font-size : 1.7rem; /* 네비게이션 바 텍스트 크기 설정 */

    align-items: center;   /* 수직 정렬 */
    justify-content: center; /* 수평 정렬 (선택사항) */
    display: flex; /* 플렉스 박스로 요소 배치 설정 */
}


/* PC & 모바일 네비바 목록-텍스트 */
header nav a {
    text-align: center;
    text-decoration: none; /* 링크 텍스트 밑줄 제거 */
    color: black;

    width: 5rem; /*텍스트박스 크기(텍스트 세로방지) */
    display: inline-block; /* a 요소를 인라인 블록 요소로 설정 */
    
    padding: 0.5rem; /* 링크의 내부 여백 설정 */
    transition: transform 0.3s, font-size 0.3s; /* 호버링 천천히 연출 추가 */

    
}



/* PC 네비바 목록-텍스트-마지막항목 */
.header-pc-nav ul li:last-child {
    margin-right: 3rem; /* 네비바 마지막 항목에 마진을두어 왼쪽으로 이동*/
}


/* PC & 모바일 - 네비바 마우스 호버링 연출 */
header ul li a:hover {
    color: #008000;
    transform: translateY(-5px); /* 마우스를 올렸을 때 항목을 살짝 위로 이동 */
}



/* 햄버거 */
.header__hamburger{
    display: none; /* 처음엔 안보임 */
    
    width: 50px;

    border-radius: 0.5rem;
    border: 2px solid #949494;
    
    background-color: transparent;
    font-size: 3rem;

    margin-right: 2rem; /*왼쪽 살짝 띄우기*/
}



/* 모바일 메뉴 (오른쪽 슬라이드) */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100%;
    background-color: rgb(175, 226, 255);
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 9999;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5rem;

    transition: right 0.3s ease-in-out;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu__close {
    position: absolute;
    top: 20px;
    right: 40px;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 4rem;         
    background: none;
    border: 2px solid #949494;
    border-radius: 2px;
    cursor: pointer;
}

/* 모바일 nav ul */
.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0 0;
    width: 100%;
}

.mobile-menu ul li {
    list-style: none;
    margin: 2rem 0 0 0;

    display: flex;
    flex-direction: column; /* 🔥 세로 정렬 핵심 */
    align-items: center;
    width: 100%;
}


.mobile-menu ul li a {
    text-decoration: none;
    color: black;
    font-size: 1.7rem;
}

/* 모바일 메뉴 하단 오브젝트  */
.mobile-menu__slogan {
    position: absolute;

    margin-top: auto;
    font-size: 1.8rem;
    color: #333;

    bottom: 60px;
    margin-left: 20px;
}



/* 모바일 오버레이 */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 어두운 반투명 */
    z-index: 20;
    display: none;
}

/* 슬라이드가 열릴 때 보여줌 */
.mobile-overlay.active {
    display: block;
}




@media screen and (max-width: 800px){
    .header_로고{
        display: none;
    }

    .header_로고_small{
        display: block;
    }

    .header__wrapper{
    height: 80px;
    }

    .header-pc-nav {
    display: none;
    }

    .header__hamburger {
    display: block;
    }

    .mobile-menu {
    display: block;
    }
}




@media screen and (max-width: 400px){
    .header__center{
        display: none;
    }

}