/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */

/* 헤더 영역 */
.header-wrap {
    background: #f8f9fa; /* Light gray background */
    color: #212529; /* Dark text color */
    border-bottom: 1px solid #dee2e6; /* Light gray border */
}

/* 네비게이션 바(메뉴) */
.navbar {
    background: transparent;
    color: #212529; /* Dark text color */
    min-height: 48px;
    padding: 0 10px !important;
}

/* 메뉴바 flex 균등배치 + 좌우 여백(컨테이너) + 폰트크기 업 */
.nav-wrap .container {
    /* 이미 container가 있다면 이 부분은 생략 가능 */
    max-width: 1200px; /* 원하는 최대 폭 */
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.navbar-nav {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: 48px;
}

.navbar-nav > li {
    flex: 1 1 0;
    text-align: center;
    display: flex;
    align-items: stretch;
}

.navbar-nav > li > .nav-link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    padding: 0 !important;
    color: #212529 !important; /* Dark text color */
    font-weight: 600;
    background: none;
    border: none;
    transition: color 0.2s, background 0.2s;
}
.navbar-nav > li > .nav-link:hover {
    color: #007bff !important; /* Blue accent color */
    background: #e9ecef; /* Light gray background */
    border-radius: 8px;
}

/* 햄버거(줄 3개) 메뉴만 따로 스타일링 */
.navbar-nav > li.dropdown-mega-menu > .nav-link {
    width: 48px;                /* 원하는 너비 */
    height: 40px;               /* 원하는 높이 */
    line-height: 40px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;          /* 아이콘 크기 */
    color: #007bff !important; /* Blue accent color */
    background: #e9ecef;       /* Light gray background */
    border-radius: 8px;
    margin-left: 12px;          /* 왼쪽 간격 */
    transition: background 0.2s, color 0.2s;
}
.navbar-nav > li.dropdown-mega-menu > .nav-link:hover {
    background: #007bff; /* Blue background */
    color: #fff !important; /* White text */
}

/* 반응형: 991px 이하에서는 기존 세로 메뉴로 */
@media (max-width: 991px) {
    .navbar-nav {
        display: block;
        width: 100%;
        gap: 0;
    }
    .navbar-nav > li {
        text-align: left;
    }
    .navbar-nav > li > .nav-link {
        font-size: 1.1rem;
        padding: 14px 16px !important;
        height: auto;
        line-height: normal;
    }
}

/* 드롭다운 메뉴 */
.dropdown-menu {
    background: white !important; /* White background */
    border: 1px solid #dee2e6 !important; /* Light gray border */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Standard gray shadow */
    padding: 8px 0 !important;
}

.dropdown-item {
    color: #212529 !important; /* Dark text color */
    font-weight: 500;
    padding: 10px 20px !important;
    transition: background 0.2s, color 0.2s;
}
.dropdown-item:hover {
    background: #007bff !important; /* Blue background on hover */
    color: white !important;   /* White text on hover */
}

/* 서브메뉴 마커 (있다면) */
.dropdown-submenu .submenu-marker {
    border-left-color: #007bff !important; /* Blue marker */
}
/* 모바일 메뉴 */
@media (max-width: 991px) {
    .navbar-mobile-toggler {
        background: #007bff; /* Blue toggler background */
    }

    .sidebar-left .navbar-nav > li > a {
        background: linear-gradient(to right, #e9ecef, transparent); /* Light gray gradient */
    }

    .sidebar-left .navbar-nav > li > a:hover {
        background: linear-gradient(to right, #007bff, transparent); /* Blue gradient on hover */
    }
}