/* 헤더 스타일 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* 헤더 고정 스타일 */
header#headernew {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
    padding: 0; /* 패딩 제거 */
    height: 100px; /* 헤더 높이 100px로 설정 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center; /* 수직 가운데 정렬 */
}



#headernew .header-container {
    width: 1700px; /* 헤더 범위 1700px로 변경 */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#headernew .logo {
    display: flex;
    align-items: center;
}
#headernew .logo a{line-height:1px;}

#headernew .logo img {
    height: auto;
    width: auto;
    max-width:250px;/* 로고 최대 높이 설정 */
    margin-left: 10px;
}

/* 메인 네비게이션 */
#headernew .main-nav{
    --basic_circle_position: 0%;
    position: relative;
}
#headernew .main-nav .sub_menu{
    display:none;
}

#headernew .main-nav:not(.main_page_header)::after{
    content: '';
    position: absolute;
    top: -10px;
    left: calc(var(--basic_circle_position) + 20px);
    width: 10px;
    height: 10px;
    border-radius:999px;
    background-color: rgba(0, 0,255, 0.8); /* 반투명 배경 */
    z-index: 1; /* 헤더 뒤에 위치 */
    transition:all 0.5s ease;

}
/* .main-nav:has(li:nth-child(2):hover){
    --basic_circle_position: 20%;
}
#headernew .main-nav:has(li:nth-child(3):hover){
    --basic_circle_position: 40%;
}
#headernew .main-nav:has(li:nth-child(4):hover){
    --basic_circle_position: 60%;
} */

#headernew .main-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    
}

#headernew .main-nav li {
    padding: 0 20px; /* 더 널리게 */
    position:relative;
}

#headernew .main-nav .sub_menu {
    position: absolute;
    top: 100%;
    left: 0;
    right:0;
    background-color: #fff;
    font-size:14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px;
    display: none; /* 기본적으로 숨김 */
    z-index: 100; /* 헤더 위에 위치 */
}
#headernew .main-nav .sub_menu li{
    padding:0;
}
#headernew .main-nav .sub_menu a{
    font-size:14px;
    white-space: nowrap; /* 줄바꿈 방지 */
    width:100%;
    height:37px;line-height:37px;
    padding:8px;
    display:block;
    text-align:Center;
}
#headernew .main-nav  li:hover .sub_menu{
    display:block;
}
#headernew .main-nav a {
    text-decoration: none;
    color: #333;
    font-family: 'Pretendard', sans-serif;
    font-size: 18px;
    font-weight: 500;
    transition: color 0.3s;
    letter-spacing: -0.5px; /* 글자 간격 조정 */
}

#headernew .main-nav a:hover {
    color: #0066cc;
}

/* 사용자 메뉴 */
#headernew .user-menu {
    display: flex;
    gap: 8px;
    margin-right: 10px;
}
#headernew .user-menu a{text-decoration:none;}
#headernew .user-menu button {
    padding: 10px 20px;
    border-radius: 50px; /* 더 둥근 모서리 */
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: -0.5px;
    display:flex;
    align-items: center;;
    gap:8px;
}
#headernew .user-menu button svg{
    width:28px;
    height:28px;
}
#headernew .login-btn {
    background-color:#dd6c0b;
    color: white;
    border: none;
}

#headernew .login-btn:hover {
    background-color: #0055b3;
}

#headernew .register-btn {
    background-color:#0c62a7;
    color: #333;
    border: 1px solid #ddd;
    color:#fff;
}

#headernew .register-btn:hover {
    background-color: #f8f8f8;
    color:#000;

}
/* .register-btn:hover svg{
    fill:#000;
    stroke:#000;
} */

#headernew .purchase-btn {
    background-color: #fff;
    color: black;
    border: 1px solid #ddd;
}

#headernew .purchase-btn:hover {
    background-color: #0055b3;
}


#headernew .user-menu a {
    text-decoration: none !important;
}



/* 구매대행 신청 버튼 */
#headernew .login-btn {
    background-color: #0e6ca5;
    color: white;
    border: 1px solid #0e6ca5;
}
#headernew .login-btn:hover {
    background-color: #ffffff;
    color: #0e6ca5;
    border: 1px solid #0e6ca5;
}
#headernew .login-btn:hover svg path {
    stroke: #0e6ca5;
}

/* 이우투어 신청 버튼 */
#headernew .register-btn {
    background-color: #fc5230;
    color: #ffffff;
    border: 1px solid #fc5230;
}
#headernew .register-btn:hover {
    background-color: #ffffff;
    color: #fc5230;
    border: 1px solid #fc5230;
}
#headernew .register-btn:hover svg path {
    fill: #fc5230;  /* 파란색 아이콘 */
}

/* 마이페이지 버튼 */
#headernew .purchase-btn {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #333;
}
#headernew .purchase-btn:hover {
    background-color: #333;
    color: #fff;  /* 파란색 텍스트 */
    border: 1px solid #333;
}
#headernew .purchase-btn svg path {
    fill: #333;
}
#headernew .purchase-btn:hover svg path {
    fill: #fff;  /* 파란색 아이콘 */
}

#headernew .user-menu a {
    text-decoration: none !important;
}

#headernew .logout-btn {
    background-color: transparent;
    color: #666;
    border: none;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    height: auto; /* 100% 대신 auto로 변경 */
    margin: auto 0; /* 상하 마진 auto로 중앙 정렬 */
}

/* 로그아웃 버튼을 감싸는 a 태그도 flex로 설정 */
#headernew .user-menu a:has(.logout-btn) {
    display: flex;
    align-items: center;
    height: 50px; /* 명시적으로 50px 설정 */
}

/* :has() 선택자를 지원하지 않는 브라우저를 위한 대안 */
#headernew .user-menu a {
    display: inline-flex; /* 모든 a 태그를 inline-flex로 */
    align-items: center;
    height: 50px;
}

#headernew .logout-btn:hover {
    color: #fc5230;
    background-color: rgba(252, 82, 48, 0.08);
    transform: translateY(-1px);
}

#headernew .logout-btn svg {
    width: 18px !important;
    height: 18px !important;
    transition: all 0.3s ease;
}

#headernew .logout-btn:hover svg path {
    fill: #fc5230;
}