/*!
navigation css
*/
/* 기본: 서브메뉴 숨김 */
#navGrid { display: none; }
#navGrid .submenu {
    display: none;
    flex-direction: column;
    gap: 1rem;
}

/* PC: hover 시 전체 서브메뉴 표시 (overlay 형태) */
@media (min-width: 768px) {
    /* nav 컨테이너: absolute 메뉴를 위한 높이 확보 */
    nav {
        position: relative;
        z-index: 95;
        min-height: 52px; /* navGrid 헤더 높이 확보 */
    }

    /* navGrid: absolute 포지셔닝으로 overlay */
    #navGrid {
        display: grid !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: white;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        z-index: 100;
        padding: 1rem 2rem;
        ppadding: 1rem 2rem 0.3rem 2rem;
    }

    /* 기본 상태: 메뉴 제목 스타일 */
    #navGrid .nav-col > span {
        color: #333 !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        font-weight: 500;
        font-weight: 700;
    }

    /* 구분선: 마지막 항목 제외 */
    #navGrid .nav-col:not(:last-child) {
        border-right: 1px solid #ccc;
    }

    /* 각 컬럼 중앙 정렬 */
    #navGrid .nav-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 0 1rem;
    }

    /* hover 시 서브메뉴 표시 */
    #navGrid:hover .submenu {
        display: flex;
    }

    /* hover 시 메뉴 제목 색상 변경 */
    #navGrid:hover .nav-col > span {
        color: #C22098 !important;
    }
    
    #navGrid .submenu {
    	margin-bottom: 15px;
    	width: 80%;
        text-align: center;
    }




    
#navGrid{
   padding: 1rem 2rem 0.3rem 2rem;
}   
    
#navGrid .submenu {
    display: flex;
    flex-direction: column;
    max-height: 0;        
    opacity: 0;            
    visibility: hidden;      
    gap: 0;                  
    overflow: hidden;         
    transition: all 0.3s ease-in-out;
}

#navGrid:hover .submenu,
#navGrid:focus-within .submenu {
    max-height: 300px;   
    opacity: 1;
    visibility: visible;
    gap: 1rem;              
    margin-top: 1rem;       
}

.nav-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
}




}

@media (max-width: 768px) {
	#navGrid {
		position: fixed;
		top: 88px;
		left: 0;
		right: 0;
		width: 100%;
		max-height: calc(100vh - 88px);
		overflow-y: auto;
		background-color: white;
		z-index: 100;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
		padding: 1rem;
	}
	#navGrid > div {
		margin-bottom: 15px;
	}
}



main {
	top: 140px;
}

@media (max-width: 1023px) and (min-width: 768px) {
    main {
        top: 180px;
    }
}

@media (max-width: 767px) { /* 모바일 */
	main {
		top: 88px;
	}
}

footer {
	margin-top: 140px;
}

/* ========================================
   스크롤 시 GNB 1줄 합치기 스타일
   ======================================== */

/* 스크롤 시 header-top 스타일 */
.gnb-scrolled #header-top {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* inline nav 스타일 */
#inline-nav {
    padding: 0 1rem;
}

.inline-nav-title {
    /*font-size: 0.875rem;*/
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s;
}

.inline-nav-title:hover {
    color: #C22098;
}

/* PC 스타일 */
@media (min-width: 768px) {
    /* 스크롤 시 원래 nav 숨김 */
    .gnb-scrolled #nav-header {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s, visibility 0.3s;
    }

    /* hover 시 원래 nav 표시 + 세부메뉴도 함께 펼침 */
    .gnb-scrolled #nav-header.nav-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* nav-visible 상태면 세부메뉴도 바로 표시 */
    .gnb-scrolled #nav-header.nav-visible #navGrid .submenu {
        max-height: 300px;
        opacity: 1;
        visibility: visible;
        gap: 1rem;
        margin-top: 1rem;
    }

    .gnb-scrolled #nav-header.nav-visible #navGrid .nav-col > span {
        color: #C22098 !important;
    }
}

/* 모바일 스크롤 시 스타일 */
@media (max-width: 767px) {
    /* 모바일에서는 기존 nav 유지 */
    .gnb-scrolled #nav-header {
        top: 88px;
    }

    #inline-nav {
        display: none !important;
    }
}