/* =========================================================
   GLOBAL SH - NAVBAR (CLEAN REPLACEMENT)
   - Bootstrap 3
   - Brand color: #00BFFF
   - IMPORTANT: replace entire file, no stacking/overrides
   ========================================================= */

:root {
    --gsh-brand: #00BFFF;
    --gsh-bg-top: #0a1e2a;
    --gsh-bg-bot: #081821;
    --gsh-text: #d1d5db;
    --gsh-text-strong: #e5e7eb;
}

/* ===== NAVBAR SHELL ===== */
.navbar.navbar-inverse {
    min-height: 48px; /* ✅ 높이 약간 줄임 */
    background: linear-gradient(180deg, var(--gsh-bg-top) 0%, var(--gsh-bg-bot) 100%);
    border: none;
    border-bottom: 1px solid rgba(0,191,255,.20);
}

    /* Bootstrap inverse 기본 그림자/여백 제거 */
    .navbar.navbar-inverse .navbar-collapse {
        border-color: transparent;
    }

    /* ===== CONTAINER: 상단바 안쪽 여백(이미지처럼 공기감) ===== */
    .navbar.navbar-inverse .container {
        padding-left: 18px;
        padding-right: 18px;
    }

/* ===== BRAND ===== */
.navbar-inverse .navbar-brand {
    height: 48px;
    line-height: 48px;
    padding: 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gsh-text-strong) !important;
    letter-spacing: .3px;
}

/* ===== TOP MENU LINKS ===== */
.navbar-inverse .navbar-nav > li {
    position: relative;
}

    .navbar-inverse .navbar-nav > li > a {
        height: 48px;
        line-height: 48px;
        padding: 0 14px; /* ✅ 좌우 살짝 타이트 */
        font-size: 15px;
        font-weight: 600;
        color: var(--gsh-text);
        border-radius: 12px;
        transition: background .15s ease, color .15s ease;
    }

        /* hover/open */
        .navbar-inverse .navbar-nav > li > a:hover,
        .navbar-inverse .navbar-nav > li.open > a {
            background: rgba(0,191,255,.10);
            color: var(--gsh-text-strong);
        }

        /* caret */
        .navbar-inverse .navbar-nav > li > a .caret {
            margin-left: 6px;
            margin-top: -2px;
            border-top-color: rgba(255,255,255,.70);
        }

        /* indicator line */
        .navbar-inverse .navbar-nav > li > a::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 7px;
            height: 2px;
            background: transparent;
            border-radius: 2px;
            transition: background .15s ease;
        }

        .navbar-inverse .navbar-nav > li.open > a::after,
        .navbar-inverse .navbar-nav > li > a:hover::after {
            background: var(--gsh-brand);
        }

/* ===== RIGHT MENU (Logout) ===== */
.navbar-inverse .navbar-nav.navbar-right > li > a {
    color: rgba(230,246,255,.75);
}

    .navbar-inverse .navbar-nav.navbar-right > li > a:hover {
        color: #fff;
    }

/* ===== DROPDOWN MENU (BASE) ===== */
.navbar-inverse .dropdown-menu {
    padding: 6px; /* ✅ compact 기본값 확정(중복 제거) */
    border-radius: 14px;
    border: 1px solid rgba(0,191,255,.30);
    box-shadow: 0 12px 26px rgba(0,0,0,.35);
    background: #ffffff;
}

    .navbar-inverse .dropdown-menu > li {
        margin: 1px 0; /* ✅ 촘촘하게 */
    }

        .navbar-inverse .dropdown-menu > li > a {
            padding: 8px 14px; /* ✅ 촘촘하게 */
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            color: #0f172a;
            transition: background .15s ease, box-shadow .15s ease;
        }

            .navbar-inverse .dropdown-menu > li > a:hover {
                background: rgba(0,191,255,.10);
                box-shadow: inset 0 0 0 1px rgba(0,191,255,.25);
            }

/* ===== PC DROPDOWN: show on .open only + small animation ===== */
@media (min-width: 992px) {
    .navbar-inverse .dropdown-menu {
        display: none;
    }

    .navbar-inverse .dropdown.open .dropdown-menu {
        display: block;
        animation: gshDropIn .14s ease both;
    }

    @keyframes gshDropIn {
        from {
            transform: translateY(6px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* ===== MOBILE ===== */
.navbar-inverse .navbar-toggle {
    border: none;
    background: transparent;
    margin-top: 9px;
    margin-bottom: 9px;
}

    .navbar-inverse .navbar-toggle .icon-bar {
        background: rgba(255,255,255,.80);
    }

/* ============================
   MOBILE NAV (<= 991px)
   - 햄버거 펼친 영역은 스크롤
   - 서브메뉴(dropdown-menu)는 고정높이 + 내부 스크롤
   ============================ */
@media (max-width: 991px) {

  /* 햄버거 열렸을 때 전체 메뉴 영역 스크롤 가능 */
  .navbar.navbar-inverse .navbar-collapse {
    max-height: 65vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
    /* 열리기 전 상태도 동일하게 맞춰서 튐 방지 */
    .navbar.navbar-inverse .navbar-collapse {
        max-height: 65vh;
    }
  /* 좌우 삐져나가며 스크롤 꼬임 방지 */
  .navbar.navbar-inverse .navbar-nav {
    margin: 0;
  }

  /* 모바일에서는 메뉴 항목 높이/간격 (원하면 수치만 조절) */
  .navbar-inverse .navbar-nav > li > a{
    height: auto;
    line-height: 1.25;
    padding: 12px 16px;
    border-radius: 12px;
  }

  /* ✅ 핵심: 서브메뉴는 “붙어서” 나오되, 길면 내부 스크롤 */
  .navbar.navbar-inverse .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;

    /* 여기서부터가 “고정 + 스크롤” */
    max-height: 45vh;                 /* 너무 길게 안 펼쳐짐 (원하면 40~60vh로 조절) */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    /* 모바일에서는 드롭다운이 너무 떠 보이지 않게 */
    margin: 6px 0 10px 0 !important;
    padding: 6px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  /* dropdown 항목 촘촘하게 */
  .navbar-inverse .dropdown-menu > li {
    margin: 1px 0;
  }
  .navbar-inverse .dropdown-menu > li > a {
    padding: 8px 12px;
    border-radius: 10px;
  }
}