body, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.headerer {
    border-bottom: 2px solid black; /* 아래쪽에 2픽셀 두께의 검은색 실선 테두리 추가 */
}



.icon-search {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('/images/search.svg');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.icon-user {
    display: inline-block;
    width: 20px;
    height: 19px;
    background-image: url('/images/user.svg');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.icon-cancel {
    display: inline-block;
    width: 20px;
    height: 19px;
    background-image: url('/images/close.svg');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}


.icon-searcher {
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none; /* Remove outline on focus */
    width: 40px; /* Button size */
    height: 40px;
}

.icon-searcher::before {
    content: "";
    display: block;
    width: 24px; /* Icon size */
    height: 24px;
    background-image: url("/images/search.svg");
    background-size: 24px 24px; /* Control the icon size */
    background-repeat: no-repeat;
}


.icon-searcher {
    border: none;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none; /* Remove outline on focus */
    width: 40px; /* Button size */
    height: 40px;
}






.header_wrap {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 0px 0 3px; /* 위쪽 패딩 5px, 오른쪽과 왼쪽 패딩 0, 아래쪽 패딩 10px */
    justify-content: space-between;
    align-items: center; /* 세로 중앙 정렬 */
    position: relative; /* 자식 요소를 위한 기준 설정 */
}

.canvaer {
    height: 28px; /* 원하는 높이 */
}


.nav-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start; /* 왼쪽 정렬 */
}

.menu-item.left-align {
    margin-right: auto;
    padding-left: 20px;
}



.menu-item.left-align a{
    font-size: 18px;
}

.main-menu {
    display: flex;
    gap: 40px;
    flex: 1;
    justify-content: center;
}


.menu-item {
    position: relative;
}

.main-nav {
    flex: 1;
    width: 100%;
}

.menu-item a {
    text-decoration: none;
    color: #333;
    font-size: 20px;
    font-weight: 700;
    padding: 10px 15px;
    transition: color 0.3s ease;
}

.menu-item a:hover {
    color: #b5651d;
}

.sub-menu {
    display: none;
    position: absolute; /* 절대 위치 지정 */
    top: 120%; /* 부모 요소 바로 아래에 위치 */
    left: 50%; /* 부모 요소의 중심에서 시작 */
    transform: translateX(-50%); /* 수평으로 중앙 정렬 */
    border: solid;
    background-color: #fff;
    padding: 0; /* 서브메뉴의 패딩 제거 */
    min-width: 160px;
    border-radius: 5px;
    z-index: 1;
}

/* Display submenu on hover */
.menu-item:hover .sub-menu {
    display: block; /* Show submenu on hover */
}


.loginer{
    display:none;
}

/* Ensure submenu links have the correct styles */
.sub-menu .menu-item a {
    padding: 5px 20px 5px 20px; /* Add 10px to the bottom padding */
    color: #333; /* Link color */
    text-align:center;
    background-color: transparent; /* Background for links */
    display: block; /* Ensures padding applies to the entire clickable area */
}

.sub-menu .menu-item a:hover {
    color: #b5651d; /* Change color on hover */
}


.sub-menu .menu-item a:hover {
    color: #b5651d; /* Change color on hover */
}

/* Hamburger menu */
.hamburger {
    display: none; /* 기본적으로 숨김 */
    flex-direction: column;
    cursor: pointer;
    margin-left: 20px; /* 왼쪽으로 약간 이동 */
    align-self: center; /* 수직 중앙 정렬 */
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 1.7px 0;
    transition: 0.4s;
}

/* Default (Desktop) settings */
.login-button {
    display: flex; /* Display as a flex container */
    justify-content: flex-end; /* Align items to the right */
    gap: 5px; /* Small gap between "로그인" and "회원가입" */
    font-size: 13px; /* Font size adjustment for better readability */
    font-weight: 700;
    color: #333;
    text-decoration: none;
    padding: 5px 0px; /* Adjust padding */
    white-space: nowrap; /* Prevent wrapping */
    padding-right: 20%;


}



.login-button a {
    color: #333; /* Ensure the text color is consistent */
    text-decoration: none; /* Remove underline */
}

.login-button .login-icon {
    display: none; /* Hide icon on desktop */
}

.toggle-submenu {
    display: none;
}

.menu-item.left-align {
    margin-left: auto; /* 왼쪽에 배치 */
    padding-left: 20px;
}

.searcher {
    display: none;
    position: absolute;
    /* postion:relative; */
    right: 0;
    width: 20%; /* Full screen width */
    /*  width: 100 % postion:relative; */
    background-color: white;
    z-index: 999;
    transition: height 0.5s ease;
    box-sizing: border-box;
    height:3px;
}

.searcher.show {
    display: flex;
    align-items: center;
    padding: 0 0px;
}

.search-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}


#cancel-icon {
    position: absolute;
    cursor: pointer; /* Change cursor to pointer */
    margin-right: 10px; /* Space between icon and input */
    left: 10px; /* 검색창 안에서 오른쪽에 배치 */

}

/* Show cancel icon when the input is focused or has text */
#search-input:focus + #cancel-icon,
#search-input:not(:placeholder-shown) + #cancel-icon {
    display: none; /* Hide by default; control visibility with media query */
}

#search-input {
    flex-grow: 1;
    border: 1px solid #ddd;
    height: 35px;
    padding: 0 40px 0 10px; /* Padding on the left */
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}


.search-icon {
    position: absolute;
    right: 8px; /* 검색창 안에서 오른쪽에 배치 */
    font-size: 20px;
    cursor: pointer;
    visibility: visible;
}

.search-icon.active{
    opacity: 0;
    visibility: hidden;
}


#search-close {
    margin-left: 20px;
    background-color: transparent;
    border: 1px solid black; /* 검은색 테두리 추가 */
    font-size: 15px;
    cursor: pointer;
    padding: 5px 10px; /* 여백 추가 */
    height: auto; /* 높이를 자동으로 맞추어 두 줄이 되지 않도록 */
    white-space: nowrap; /* 텍스트가 두 줄로 넘어가지 않도록 */
}


.search-container{
    display: flex; /* Use flex for alignment */
    align-items: center; /* Center items vertically */
    margin-left: auto; /* Push it to the right */
    padding-right: 15px; /* Adjust padding */
    white-space: nowrap; /* Prevent text wrapping */

}

.fas.fa-search {
    color: black; /* 기본 색상 */
}

.fas.fa-search:hover {
    color: red; /* hover 시 빨간색 */
}

.close-btn{
    display :none;
}

.close-btn {
    position: absolute;
    top: 10px;  /* 상단에서 약간 떨어지도록 */
    right: 10px;  /* 오른쪽에서 약간 떨어지도록 */
    font-size: 24px;  /* X자의 크기를 설정 */
    background: none; /* 버튼 배경 제거 */
    border: none; /* 테두리 제거 */
    color: black; /* X자 색상 */
    cursor: pointer; /* 커서가 손가락 모양으로 변경 */
}

.close-btn:hover {
    color: red; /* hover 시 빨간색으로 변경 */
}




/* Desktop font size adjustments */
@media (max-width: 1200px) {
    .menu-item a {
        font-size: 18px;
        flex-shrink: 0;
    }
}

@media (max-width: 992px) {
    .menu-item a {
        font-size: 16px;
        flex-shrink: 0;
    }
}

@media (max-width: 833px) {
    .menu-item a {
        font-size: 14px;
        flex-shrink: 0;
    }
    .main-menu {
        gap: 30px;
    }
}


@media (min-width: 769px) {
    #cancel-icon {
        display: none; /* Hide cancel icon on larger screens */
    }

    #search-close {
        display: inline-block; /* Show original cancel button on larger screens */
    }
}

/* Mobile settings */
@media (max-width: 768px) {
    header {
        display: flex;
        flex-direction: row;
        background-color: #fff;
        padding: 10px 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        justify-content: space-between; /* Space between left and right */
        align-items: center; /* Center align vertically */
        position: relative; /* Reference for child elements */
    }



    .sub-menu .menu-item a {
        text-align:left;

    }


    .header_menu .main-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: inherit;
        flex-grow: 1; /* 추가: 남은 공간을 차지하도록 설정 */
        position: relative; /* 추가: 상대적 위치 설정 */
        z-index: 1; /* 추가: 링크를 버튼 위로 올림 */
    }

    .header_menu .main-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 30px; /* 버튼 너비에 맞게 조정 */
        bottom: 0;
        z-index: 2; /* 가상 요소를 링크 위로 올림 */
    }

    .header_wrap {
        display: flex;
        flex-direction: row;
        padding: 0px 0;
        justify-content: space-between; /* Distribute space between items */
        align-items: center; /* Vertically center-align items */
        width: 100%; /* Ensure full width */
        order: 1;
    }

    .loginer {
        display:none;
        position: fixed;
        top: 50px; /* Position it just below the header */
        right: 0; /* Start off the screen to the right */
        width: 250px;
        height: calc(100% - 60px); /* Take up full height minus header */
        background-color: white;
        border-style: inset;
        border-color: black;
        color: black;
        padding: 20px;
        transition: transform 0.3s ease;
        z-index: 999;
        transform: translateX(100%); /* Initially hide it by moving it off screen */
        display: none; /* Initially hidden */
    }

    .loginer.show {
        display: block; /* Make it visible */
        transform: translateX(0); /* Slide it into view */
    }



    .main-nav {
        position: fixed;
        top: 50px; /* 헤더 바로 아래에 위치하도록 조정 */
        right: 0;
        width: 250px;
        height: calc(100% - 60px); /* 헤더 높이를 제외한 전체 높이 */
        border-style:inset;
        background-color:white;
        border-color:black;
        color: black;
        padding: 20px;
        transition: transform 0.3s ease;
        z-index: 999;
        transform: translateX(100%);
        display: none;
        animation: slideIn 0.3s backwards; /* Slide animation */
    }

    .main-nav.show {
        display: block;
        transform: translateX(0);
        animation: slideIn 0.3s forwards; /* 슬라이드 애니메이션 추가 */

    }

    .header_menu {
        display: flex;
        justify-content: space-between; /* Spread content between left and right */
        align-items: center; /* Vertical alignment */
    }



    .nav-container {
        display: flex;
        flex-grow: 1;
        justify-content: space-between; /* Distribute space between items */
        align-items: center; /* Vertically center-align items */
        flex: 1; /* Allow it to grow */
    }

    .menu-item.left-align {
        flex: 1; /* Allow this item to take available space */
        text-align: center; /* Center the text */
        order: 2; /* Keep it on the left */
        margin: 0;
        padding-left: 0;

    }


    .login-button{
        display: flex; /* Use flex for alignment */
        align-items: center; /* Center items vertically */
        margin-left: auto; /* Push it to the right */
        font-size: 10px; /* Adjust font size */
        padding-right: 10px; /* Adjust padding */
        white-space: nowrap; /* Prevent text wrapping */
        order:2;

    }

    .search-container{
        display: flex; /* Use flex for alignment */
        align-items: center; /* Center items vertically */
        margin-left: auto; /* Push it to the right */
        padding-right: 15px; /* Adjust padding */
        white-space: nowrap; /* Prevent text wrapping */
        order:3;

    }

    .login-button .login-text {
        display: none; /* Hide text on mobile */
    }

    .login-button .login-icon {
        display: flex; /* Show icon on mobile */
        font-size: 20px; /* Adjust icon size */
    }

    .hamburger {
        display: flex; /* Show hamburger menu button */
        order: 1; /* Keep it on the left */
    }



    .main-nav ul {
        display: block;
    }

    .main-nav a {
        color: black;
        font-size: 18px;
        display: block;
        padding: 10px 0;
        text-decoration: none;
    }

    .main-nav a:hover {
        color: #b5651d;
    }




    .main-nav.show .sub-menu {
        display: none;
    }

    .main-nav.show .sub-menu.active {
        display: block; /* active 클래스가 있는 경우 서브 메뉴 보이기 */
        position: relative;
        top: 100%;
        left: 0;
        background-color: #fff;
        padding: 15px 0;
        min-width: 200px;
        border-radius: 5px;
        border-style:inset;
        transform: translateX(0%); /* Center it horizontally */

        background-color:white;
        border-color:black;
    }

    .main-nav.show .sub-menu.active .menu-item:last-child {
        border-bottom: none; /* No border for the last item */
    }

    .toggle-submenu {
        display : block;
        background-color: transparent;
        border: none;
        font-size: 16px;
        cursor: pointer;
        color: black;
        margin-left: auto; /* Push the button to the far right */
        font-weight: bold; /* Make the "V" icon bold */
        padding-right: 10px; /* Add some right padding */
    }

    .searcher {
        display: none; /* Initially hidden */
        position: fixed;
        top: 0; /* Start from the top */
        right: 0; /* Align to the right */
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        background-color: white; /* Background color */
        z-index: 999; /* Ensure it appears above other elements */
        box-sizing: border-box; /* Include padding and border in width and height calculations */
    }

    .searcher.show {
        display: flex; /* Show when active */
        align-items: center; /* Center items vertically */
        justify-content: center; /* Center items horizontally */
        height: 50px; /* 기본적으로 main-nav의 높이 */
        font-size:50px;

    }

    #search-input {
        flex-grow: 1;
        border: 1px solid #ddd;
        height: 51px;
        padding: 0 40px 0 40px; /* 오른쪽 padding 추가 */
        font-size: 16px;
        outline: none;
        box-sizing: border-box;
        width: 100%;
    }

    #cancel-icon {
        display: flex; /* Show cancel icon on mobile */
    }

    #search-input:focus + #cancel-icon,
    #search-input:not(:placeholder-shown) + #cancel-icon {
        display: flex; /* Show when focused or when there's text */
    }

    #search-close {
        display: none; /* Hide original cancel button on mobile */
    }

    /* 버튼을 링크처럼 보이게 하는 스타일 */
    #logout-btn {
        background: none; /* 배경 제거 */
        border: none; /* 테두리 제거 */
        color: blue; /* 텍스트 색상 */
        text-decoration: underline; /* 밑줄 추가 */
        cursor: pointer; /* 마우스 커서를 포인터로 변경 */
        font-size: inherit; /* 부모 요소의 폰트 크기 사용 */
        padding: 0; /* 패딩 제거 */
    }

    #logout-btn:hover {
        color: darkblue; /* 호버 시 색상 변경 */
    }

    .close-btn {
        display : block;
        top: 15px;  /* 모바일에서 위치 조정 */
        right: 15px;
        font-size: 30px; /* 모바일에서 X자 크기를 조금 더 키움 */
    }

    .hoveringmenu {
        cursor: pointer; /* 마우스 포인터를 손가락으로 변경 */
        transition: color 0.3s; /* 색상 변화에 부드러운 전환 효과 추가 */
    }

    .hoveringmenu:hover {
        color: red; /* 호버 시 텍스트 색상을 빨간색으로 변경 */
    }

    /* 슬라이드 애니메이션 */
    @keyframes slideIn {
        from {
            transform: translateX(100%); /* 오른쪽에서 시작 */
        }
        to {
            transform: translateX(0); /* 원래 위치로 */
        }
    }
}