@charset "utf-8";
/* CSS Document */

/* 서브메뉴 전체 박스 (가로 250px 고정) */
        .locationbox {
            background-color: #f8f9fa;
            border-bottom: 1px solid #e0e0e0;
        }

        .location-inner {
            height: 50px;
            width: 300px;
            border: none;
            border-left: 1px solid #e0e0e0 !important;
            border-right: 1px solid #e0e0e0 !important;
        }

        /* 1. 홈 버튼 */
        .home-btn {
            width: 50px;
            height: 100%;
            background-color: #ffffff;
            color: #333333;
            font-size: 1.1rem;
            text-decoration: none;
            border-right: 1px solid #e0e0e0;
            transition: background-color 0.2s;
        }

        .home-btn:hover {
            background-color: #f1f3f5;
            color: #000000;
        }

        /* 2. 로케이션 전용 드롭다운 영역 */
        .location-dropdown {
            height: 100%;
            background-color: #f0fbfb;
            /* 민트/연하늘색 배경 */
        }

        /* 선택 버튼 */
        .location-dropdown .dropdown-toggle {
            height: 100%;
            border: none;
            border-radius: 0;
            background: transparent;
            color: #212529;
            font-weight: 600;
            font-size: 0.95rem;
            box-shadow: none !important;
        }

        /* ★ 화살표 아이콘 커스텀 & 회전 애니메이션 설정 */
        .location-dropdown .dropdown-toggle::after {
            content: "";
            /* 화살표 생성을 위한 필수 속성 */
            display: inline-block;
            width: 0.45em;
            height: 0.45em;
            margin-left: auto;
            vertical-align: middle;

            /* 깔끔한 V자 화살표 형태 제작 (border 방식) */
            border-right: 2px solid #333333;
            border-bottom: 2px solid #333333;
            border-top: 0;
            border-left: 0;

            /* 기본 상태: 아래쪽 방향 V자 */
            transform: rotate(45deg);
            transition: transform 0.2s ease-in-out;
        }

        /* ★ 드롭다운이 열렸을 때 (show) 화살표 위쪽 방향으로 회전 */
        .location-dropdown .dropdown-toggle.show::after {
            /* 45deg에서 180도 회전한 225deg로 위쪽 V자 형성 */
            transform: rotate(225deg);
        }

        /* 드롭다운 리스트 메인 박스 (너비 100% = 250px 맞춤) */
        .location-dropdown .dropdown-menu {
            top: 100% !important;
            left: -1px !important;
            /* 좌측 테두리 맞춤 */
            width: calc(100% + 2px) !important;
            /* 전체 테두리 포함 너비 조정 */
            transform: none !important;
            background-color: #ffffff;
            border: 1px solid #e0e0e0 !important;
            border-top: none !important;
            margin: 0;
            border-radius: 0 0 4px 4px;
        }

        /* 드롭다운 옵션 아이템 (높이 및 패딩 조절) */
        .location-dropdown .dropdown-item {
            padding: 10px 16px;
            /* 상하 패딩으로 높이 조절 */
            font-size: 0.9rem;
            color: #495057;
            transition: all 0.15s ease-in-out;
        }

        /* 마우스 오버 시 */
        .location-dropdown .dropdown-item:hover {
            background-color: #f0fbfb;
            color: #000000;
        }

        /* 선택된 메뉴 활성화 상태 */
        .location-dropdown .dropdown-item.active,
        .location-dropdown .dropdown-item:active {
            background-color: #0d6efd;
            color: #ffffff;
            font-weight: 600;
        }