/* 헤더 내부 메뉴 목록만 점 제거 */
.header ul,
.header li {
    list-style: none;
}

/* 헤더 내부 링크만 밑줄 제거 */
.header a {
    text-decoration: none;
}
/* 헤더 전체 레이아웃 (Flexbox 사용) */
.header {
    display: flex;
	position: fixed;
	z-index: 1000;
    justify-content: space-between; /* 양끝으로 배치 */
    align-items: center; /* 세로 중앙 정렬 */
    padding: 0 50px;
	width: 100%;
    height: 80px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

/* 로고 스타일 */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
}
.header-a .logo-text { color: #333;}
.logo-icon { color: #0078d4; }

/* 메인 메뉴 스타일 */
/* nav 메뉴 화면 정중앙 배치 */
.nav-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.nav-menu > ul {
    display: flex;
    gap: 40px; /* 메뉴 사이 간격 */
}

.nav-menu a {
    color: #333;
    font-weight: 500;
    padding: 10px 0;
    display: block;
}

.nav-menu a:hover{
    color: #0078d4; /* 마우스 올렸을 때 파란색 */
}

/* 드롭다운 메뉴 스타일 */
.dropdown {
    position: relative; /* 하위 메뉴의 위치 기준점 */
    width: 130px;
    text-align: center;
}

.dropdown-content {
    /*display: none; /* 기본적으로는 숨김 */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px); /* 중앙 정렬 */
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	
    background-color: white;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
    min-width: 120px;
    text-align: center;
    padding: 10px 0;
	margin-top: 15px;
}
/* 드롭다운 메뉴 상단에 눈에 안 보이는 투명 감지 영역 추가 */
.dropdown-content::before {
    content: '';
    position: absolute;
    top: -20px; /* 드롭다운 위쪽으로 20px 만큼 공간을 채움 */
    left: 0;
    width: 100%;
    height: 20px;
}
.dropdown-content li {
	width: 250px;
	font-size: 14px;
	padding: 0px 10px;
	line-height: 1.6;
}

/* 마우스를 올렸을 때 하위 메뉴 보이기 */
.dropdown:hover .dropdown-content {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
    display: block; 
}

/* 햄버거 버튼 (선 3개 만들기) */
/*
.hamburger {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: #333;
}*/
/* =========================
   HAMBURGER
========================= */

.hamburger {
    display: none;

    border: none;
    background: none;

    flex-direction: column;

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

    gap: 6px;

    cursor: pointer;

    width: 40px;
    height: 40px;

    padding: 5px;
}


.hamburger span {
    display: block;

    width: 26px;
    height: 3px;

    border-radius: 2px;

    background-color: #333;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


/* 햄버거 → X */

.hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* 중간 화면 */
@media (max-width: 1200px) {

    .header {
        padding: 0 30px;
    }

    .nav-menu > ul {
        gap: 15px;
    }

    .dropdown {
        width: 105px;
    }

    .logo {
        font-size: 1rem;
    }
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 950px) {

    /* HEADER */

    .header {
        height: 70px;

        padding: 0 20px;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }


    /* 햄버거 표시 */

    .hamburger {
        display: flex;

        flex-shrink: 0;
    }


    /* 기본적으로 모바일 메뉴 숨김 */

	.nav-menu {
	       display: none;
	       position: absolute;

	       top: 70px;
	       left: 0;

	       transform: none;

	       width: 100%;
	       background-color: #ffffff;
	   }

	   .nav-menu.active {
	       display: block;
	   }

    /* 햄버거 클릭 */

    .nav-menu.active {
        display: block;
    }


    /* 메뉴 세로 배치 */

    .nav-menu > ul {
        display: flex;

        flex-direction: column;

        gap: 0;
    }


    /* 각 대메뉴 */

    .dropdown {
        width: 100%;

        text-align: left;

        border-bottom: 1px solid #eeeeee;
		position: relative;

		        padding: 18px 25px;

		        font-size: 16px;

		        font-weight: 600;

		        color: #222;
    }




    /* 오른쪽 + 아이콘 */

    .dropdown > .menu-toggle::after {
        content: '+';

        position: absolute;

        right: 25px;

        font-size: 22px;

        font-weight: 300;

        transition: transform 0.3s ease;
    }


    /* 열린 상태 */

    .dropdown.open > .menu-toggle {
        color: #0078d4;
    }


    .dropdown.open > .menu-toggle::after {
        content: '−';
    }



    /* =========================
       MOBILE SUB MENU
    ========================= */

    .dropdown-content {
        position: static;

        transform: none;

        opacity: 1;
        visibility: visible;

        display: none;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 0;

        box-shadow: none;

        background-color: #f7f8fa;

        transition: none;
    }


    /* PC hover 효과 무력화 */

    .dropdown:hover .dropdown-content {
        display: none;

        transform: none;
    }


    /* 클릭한 메뉴만 열기 */

    .dropdown.open .dropdown-content {
        display: block;
    }


    .dropdown-content::before {
        display: none;
    }


    .dropdown-content li {
        width: 100%;

        padding: 0;
    }


    .dropdown-content li a {
        padding: 14px 35px;

        font-size: 14px;

        color: #555;
    }


    .dropdown-content li a:hover {
        color: #0078d4;

        background-color: #eef4fb;
    }


    /* 모바일 로고 */

    .logo {
        gap: 6px;

        font-size: 1rem;
    }

}