/* Header Style */

.header-container {
    height: 78px;
    background-color: #ffffff;
    /* border-bottom: 1px solid #e5e8eb; */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
    /* For mobile menu absolute positioning */
    z-index: 1000;

    .header-inner {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .logo-area {
            /* Logo styles */
            z-index: 1002;
            position: relative;
        }

        /* Mobile Menu Button (Hamburger) */
        .mobile-menu-btn {
            display: none;
            /* Hidden on desktop */
            flex-direction: column;
            justify-content: space-between;
            width: 30px;
            height: 21px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 1002;

            span {
                display: block;
                width: 100%;
                height: 3px;
                background-color: #252525;
                border-radius: 3px;
                transition: all 0.3s ease;
            }

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

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

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

        .nav-area {
            display: flex;
            gap: 5px;
            height: 100%;

            &>div {
                display: flex;
                align-items: center;
                cursor: pointer;
                padding: 0 16px;
                gap: 8px;
                font-style: normal;
                font-weight: 700;
                font-size: 21px;
                color: #252525;
                height: 100%;
                position: relative;

                &.active, &:hover {
                    color: #005770;
                }

                &::before {
                    content: "";
                    position: absolute;
                    bottom: -1px;
                    left: 0;
                    width: 100%;
                    height: 4px;
                    background-color: #005770;
                    display: none;
                }

                &.active::before,
                &:hover::before {
                    display: block;
                }

                &::after {
                    content: "";
                    display: block;
                    width: 20px;
                    height: 20px;
                    background-image: url('../../images/arrow_down.png');
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: contain;
                    transform: rotate(0deg);
                    transform-origin: center;
                    transition: transform 0.2s ease-out, border-color 0.2s ease-out;
                }
                &.active::after,
                &:hover::after {
                    background-image: url('../../images/arrow-up.png');
                    transform: rotate(180deg);
                    border-color: #005770;margin-top: -3px;
                }

                /* Desktop Submenu */
                .gov-submenu {
                    display: none;
                    position: absolute;
                    top: calc(100% + 14px);
                    left: 50%;
                    transform: translateX(-50%);
                    min-width: 200px;
                    padding: 10px 0;
                    background-color: #ffffff;
                    border: 1px solid #e5e8eb;
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                    border-radius: 12px;
                    z-index: 1000;
                    text-align: left;

                    /* Bridge to prevent closing when crossing the gap */
                    &::before {
                        content: "";
                        position: absolute;
                        top: -20px;
                        /* Covers the 19px gap */
                        left: 0;
                        width: 100%;
                        height: 20px;
                        background: transparent;
                    }
                }

                /* Show submenu on hover for desktop */
                @media (min-width: 769px) {
                    &:hover .gov-submenu {
                        display: block;
                    }
                }

                &.active .gov-submenu {
                    display: block;
                }

                .gov-submenu .submenu-list {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    width: 100%;

                    li {
                        position: relative;
                        height: 42px;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        padding-left: 46px;
                        transition: background-color 0.2s;
                        box-sizing: border-box;

                        &:hover {
                            background-color: #E8F4F6;
                        }

                        &::before {
                            content: "";
                            position: absolute;
                            right: 168px;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 3px;
                            height: 3px;
                            background-color: #333;
                            border-radius: 50%;
                            transition: all 0.3s ease;
                        }

                        &:hover::before {
                            width: 33px;
                            height: 2px;
                            border-radius: 2px;
                            background-color: #005770;
                        }
						
						/* 2026.01.19 줄바꿈 추가 */
                        a {
                            text-decoration: none;
                            color: #363636;
                            font-size: 18px;
                            font-weight: 600;
                            display: block;
                            width: 100%;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            padding-right: 20px;
						    overflow-wrap: break-word;
						    word-break: keep-all;
						    
                            &:hover {
                                color: #005770;
                            }
                        }
                    }
                }
            }


        }
    }
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .header-container .header-inner {
        padding: 0 20px;

        .mobile-menu-btn {
            display: flex;
            /* Show Hamburger */
        }

        .nav-area {
            display: none;
            /* Hide default nav */
            position: absolute;
            top: 78px;
            left: 0;
            width: 100%;
            height: auto;
            background-color: #fff;
            flex-direction: column;
            padding: 0;
            border-top: 1px solid #e5e8eb;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
            gap: 0;

            &.mobile-open {
                display: flex;
                /* Show when active */
            }

            &>div {
                width: 100%;
                height: auto;
                padding: 0;
                flex-direction: column;
                align-items: flex-start;
                border-bottom: 1px solid #f0f0f0;

                /* Main Menu Item Text */
                span {
                    display: block;
                    padding: 20px;
                    width: 100%;
                    box-sizing: border-box;
                }

                /* Remove Desktop Hovers/Effects */
                &::before {
                    display: none !important;
                }

                &::after {
                    position: absolute;
                    right: 20px;
                    top: 20px;
                }

                /* Mobile Submenu */
                .gov-submenu {
                    position: static;
                    /* Relative flow in mobile */
                    transform: none;
                    width: 100%;
                    border: none;
                    box-shadow: none;
                    border-radius: 0;
                    padding: 0;
                    background-color: #F8FBFB;
                    border-top: 1px solid #eee;

                    .submenu-list {
                        li {
                            padding-left: 0;
                            height: auto;
                            border-bottom: 1px solid #fff;

                            a {
                                padding: 18px 20px 18px 40px;
                                /* Indent submenu items */
                                font-weight: 500;
                                font-size: 18px;
                            }

                            &:hover {
                                background-color: transparent;
                            }

                            &::before {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
}
.header-container .header-inner .nav-area.mobile-open .nav-item {
    gap:0;
}
.submenu-link-btn::after {
    content: '';
    background-image: url(/images/link-icon.png);
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin-left: 5px;
    width: 15px;
    height: 15px; 
    background-size: contain;
}