/* 원본 LMEDRP 왼쪽 메뉴 스타일 — new_lmedrp templates/v1/layouts/header.html 의 <style> 그대로(템플릿 주석 {# #}만 뺌). 고치지 않는다 */
    #g_top_menu {
        &.close_navi {
            width: 50px;
            min-width: 50px;
            max-width: 50px;
            padding: 3px;

            .main_menu {

                a {
                    justify-content: center;
                }
            }


            .sub_menu {
                margin-left: 3px;
            }

            .g_logo_img {
                width: 50px;
                margin-top: 2rem;
            }

            .lock_menu_wrap,
            .account_info,
            .account_dday,
            .g_cust_search_article,
            .navi_txt,
            .login_logout,
            .g_history_article {
                display: none;
            }
            .l_close_navi_hidden_item {
                display: none;
            }

            .navi_bottom_layout {
                margin-top: 10px;
            }

            .g_account_article {
                padding: unset;
                background-color: transparent;

                .account {
                    width: 40px;
                }

                .account_img img {
                    width: 90%;
                    margin: 0 auto;
                    display: block;
                }

            }


            .menu_toggle_btn .toggle_btn_icon {
                transform: rotate(0deg);
            }
        }

        .menu_toggle_btn {
            background-color: #006494;
            width: 3rem;
            height: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3rem;
            overflow: hidden;
            cursor: pointer;

            .toggle_btn_icon {
                transform: rotate(180deg);
            }
        }
    }


    .g_v1_side_menu_wrap {
        display: flex;
        padding: 10px;
        flex-direction: column;
        background-color: #303030;

        position: relative;

        width: 260px;
        align-self: stretch;

        align-items: stretch;
        justify-content: stretch;

        .article_wrap {
            display: flex;
            flex-direction: column;
            /* flex: 1; 250214 사이드바 축소시 item 영역 쭈그러 확장되는 문제로 flex 1 속성 제거 */
            gap: 1rem;
            /* overflow: hidden; */

            /* overflow: hidden을 하면 submenu를 가려버리므로, flex item들이 flex기 때문에 flex만큼 늘어남을 방지하기 위해 min-height 설정 */
            min-height: 0;

            align-items: stretch;
            justify-content: stretch;


            /** 로고 article */
            .g_logo_article {
                display: flex;
                justify-content: center;

                .g_logo_img {
                    width: 100px;
                    cursor: pointer;
                }
            }

            /** 계정 정보 */
            .g_account_article {
                display: flex;
                flex-direction: column;
                background-color: rgba(255, 255, 255, 0.216);
                border-radius: var(--g_border_radius);
                gap: .5rem;
                justify-content: space-around;
                align-items: center;
                padding-top: 1rem;
                padding-bottom: 1rem;
                padding-left: .5rem;
                padding-right: .5rem;

                .items_wrap {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-items: center;
                }

                /** 계정정보 표시 */
                .account_info {
                    color: #fff;
                }

                .account_article_items_wrap{
                    display: flex;
                    width: 100%;
                    justify-content: space-around;
                    &.horizontal {
                        flex-direction: row;
                    }
                    &.vertical {
                        flex-direction: column;
                    }
                    &.flex-wrap {
                        flex-wrap: wrap;
                        column-gap: .3rem;
                        row-gap: 0;
                        align-content: center;
                        justify-content: center;
                    }
                    .account_article_item  {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        &.account_img {
                            img {
                                flex-basis: 40px;
                                min-width: 39.59px;
                            }
                        }

                        &.user_infos {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            max-width: 95px;
                            flex-shrink: 0;
                            color: #ffffff;
                            font-weight: 700;
                            row-gap: .2rem;
                            .user_infos_name {
                                display: flex;
                                max-width: 95px;
                                flex-shrink: 0;
                                align-items: flex-end;
                                p {
                                    word-break: break-all;
                                    text-align: center;
                                }
                            }
                        }
                        &.etcs {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            flex-basis: 87px;
                            flex-shrink: 0;
                            .etcs_expiration_date {
                                color: #01C2D1;
                                font-weight: 700;
                            }
                        }
                        &.default_office,
                        &.expiration_date,
                        &.brand_info,
                        &.remaining_points {
                            font-size: .9rem;
                            color: #ffffff;
                            /* height: fit-content; */
                            display: flex;
                            width: calc(50% - .5rem);
                            flex-basis: calc(50% - .5rem);
                            justify-content: flex-start;
                            flex-grow: 0;
                            flex-shrink: 0;
                            column-gap: .3rem;
                            .account_article_item_label {
                                max-width: 5rem;
                                font-weight: 700;
                                &::after {
                                    content: " :";
                                    font-weight: 400;
                                }
                            }
                            .account_article_item_content {
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                            }
                            /* 값 다 넘어오기 전까지 숨기기 */
                            &.l_invisible {
                                visibility: hidden;
                            }
                        }


                    }
                }

            }

            /** 메뉴, 즐겨찾기 */
            .g_menu_article {

                /* hover 하면 나타나는 서브 메뉴 */
                .main_menu {
                    width: 100%;
                    top: 0;
                    margin: 0 auto;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    font-size: 1.1rem;
                    list-style: none;

                    >li {
                        position: relative;
                        text-align: left;

                        &:hover {
                            sub_menu::-webkit-scrollbar{
                                display: none;
                            }
                        }

                        & .none_access {
                            color: #999;
                            padding: .5rem 1rem;
                        }

                        >a {
                            color: white;
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            color: white;
                            padding: 3px 10px;
                            box-sizing: border-box;
                            border-radius: 8px;
                            justify-content: start;
                            padding-left: 2rem;
                            font-weight: bold;

                            &:hover {
                                background-color: #01C2D1;
                            }

                            .main_icon_img {
                                margin-right: 1rem;
                            }
                            .navi_txt {

                            }
                        }

                        .sub_menu {
                            position: absolute;
                            top: 0;
                            left: 100%;
                            width: 20rem;
                            background-color: #504f4f;
                            z-index: 21;
                            border-top-right-radius: var(--g_border_radius);
                            border-bottom-right-radius: var(--g_border_radius);
                            padding: .5rem;
                            margin-left: 10px;

                            
                            /* height: auto; */
                            max-height: 40rem;
                            overflow-y: auto;

                            /* display: block; */
                            /* transition: all 0.5s; */
                            display: none;


                            /* 스크롤바 */

                            &::-webkit-scrollbar {
                                width: 8px;
                                /* 스크롤바의 너비 */
                                height: 8px;
                                scrollbar-width: thin;
                                scrollbar-color: #c4c4c4 transparent;
                            }

                            &::-webkit-scrollbar-thumb {
                                height: 30%;
                                /* 스크롤바의 길이 */
                                background: #DEE1E4;
                                /* 스크롤바의 색상 */
                                border-radius: 10px;
                                /* transition: all 0.5s; */
                            }

                            &::-webkit-scrollbar-thumb {
                                background-color: #1F1F1F;
                            }

                            a {
                                padding: .5rem 1rem;
                                box-sizing: border-box;
                                display: block;
                            }

                            .sub_menu_item {
                                justify-content: space-between;
                                display: flex;
                                align-items: center;

                                > a {
                                    color: #ddd;
                                    flex: 1;

                                    &:hover {
                                        background-color: rgba(255, 255, 255, 0.216);
                                    }
                                }
                            }
                        }

                        /** 메뉴 구분 선 */
                        .menu_split {
                            margin: 1rem;
                            border-color: #888;
                        }

                    }

                    /** 메뉴에 배지 아이콘 */
                    .g_sidebar_push_icon {
                        margin: 0;
                        padding: 0;

                        display: none;
                        border-radius: 100rem;
                        display: inline-flex;
                        width: 1rem;
                        height: 1rem;
                        text-indent: initial;
                        justify-content: center;
                        align-items: center;

                        /** parant 엘리먼트의 padding에 의해 세로로 영역이 길어지지 않도록 확대하는 방법으로 설정 함 (2024-09-26 안예지) */
                        font-size: .6rem;
                        transform: scale(1.5);

                        &.alert {
                            background-color: red;
                            color: #ffffff;
                            margin-left: .5rem;
                        }
                    }
                }

            }

            /** 즐겨찾기, 히스토리 */
            .g_history_article {

                .g_navi_list_wrap {
                    /* width: 90%;
                    margin: 0 auto; */
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;

                    .g_navi_title {
                        color: #b3b3b3;
                        margin-bottom: 0.2rem;
                        font-weight: 600;
                        font-size: 1rem;
                        font-size: .9rem;
                        position: relative;
                    }

                    .g_navi_list {
                        /* font-size: 0.8rem; */
                        background-color: rgba(255, 255, 255, 0.216);
                        /* min-height: 8vh; */
                        /* max-height: 8vh; */
                        height: 5.5rem;
                        color: white;
                        padding: 4px 10px;
                        box-sizing: border-box;
                        overflow-y: scroll;
                        margin-bottom: 10px;
                        border-radius: 4px;

                        &::-webkit-scrollbar {
                        width: 6px;
                        height: 8px;
                        box-sizing: border-box;
                        }

                        &::-webkit-scrollbar-thumb {
                        height: 30%;
                        background: #c4c4c4;
                        border-radius: 10px;
                        }

                        &.flex {
                            ul {
                                display: flex;
                                flex-wrap: wrap;
                            }

                            &.w_50 li {
                                width: 50%;
                                min-width: 50%;
                                max-width: 50%;
                            }

                            &.w_33 li {
                                width: 33%;
                                min-width: 33%;
                                max-width: 33%;
                            }
                        }

                        li {
                            cursor: pointer;
                            transition: all 0.3s;
                            border-radius: 4px;
                            padding: 2px 0;
                            color: white;

                            &:hover {
                                background-color: #01C2D1;
                            }

                            a {
                                color: white;
                            }
                        }
                    }
                }
            }

            /** 회원 검색 */
            .g_cust_search_article {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                border: 1px solid #8f8f8ff3;
                border-radius: 5px;
                gap: .5rem;
                padding: .5rem;

                /* 최근 회원/계약 탭 선택 영역 */
                .cust_search_header {
                    display: flex;

                    .search_tab {
                        flex: 1;
                        display: flex;
                        justify-content: center;

                        /* reset */
                        button {
                            font: inherit;
                            padding: unset;
                            border: none;
                            background: unset;
                            cursor: pointer;
                        }

                        .search_tab_btn {
                            color: #76787b;
                            padding: .4rem;
                            font-size: .9rem;

                            &.current_list {
                                color: #fff;
                                font-weight: bold;
                                text-decoration: underline;
                                text-underline-offset: .5rem;
                                text-decoration-line: 10px;
                                text-decoration-thickness: 0.25rem;
                            }
                        }

                    }
                    .l_button_wrap {
                        .l_size_0 {
                            font-size: .8rem;
                            padding: 3px 4px;
                        }
                    }


                }

                /* 검색 결과 영역 */
                .cust_search_main {
                    display: flex;
                    flex-direction: column;
                    gap: .5rem;
                    align-items: stretch;
                    flex: 1;
                    overflow: hidden;


                    /* 계약 고객 목록일 때 DOM */
                    &.type_contract {

                        .cust_search_form {
                            display: none;
                        }

                        .filter_wrap {
                            display: initial;
                        }

                        .card_main_info {
                            display: flex;
                            justify-content: space-between;
                        }
                    }


                    /* 검색 form 영역 */
                    .cust_search_form {
                        display: flex;
                        flex-direction: column;
                        gap: .5rem;

                        /* 검색 input, select wrapper */
                        .form_control {
                            width: 100%;

                            /* 통합검색 검색 바 */
                            &.search_bar {
                                display: flex;
                                align-items: center;

                                .search_btn_wrap {
                                    position: relative;
                                }
                                .l_info_quick_icon {
                                    display: inline-block;
                                    margin-left: -6px;
                                }

                                .serach_btn_layer {
                                    display: none;
                                }

                                input {
                                    flex: 1;
                                }

                                .search_btn_wrap:hover .serach_btn_layer,
                                .search_btn_wrap .serach_btn_layer:hover{
                                        position: absolute;
                                        display: flex;
                                        bottom: 0;
                                        right: 0;
                                        gap: .3rem;
                                        background-color: white;
                                        white-space: nowrap;
                                        border: 1px solid #fcfcfc;
                                        border-radius: 10px;
                                        max-width: calc(240px - 1rem);
                                        padding: .5rem;
                                        transform: translateY(100%);
                                }


                            }
                        }
                    }


                }

                    /* 계약 검색일 때 버튼 */
                    .filter_wrap {
                        display: none;
                    }

                    /* 통합검색 hover시 출력되는 영역 */
                    .serach_btn_layer {
                        /* position: absolute; */
                        bottom: 0;
                    }

                    /* 검색 결과가 없을 경우 */
                    .list_search_no_data {
                        color: #fff;
                        font-weight: normal;
                        text-align: center;
                        padding: 1rem;
                    }

                    .cust_search_list {
                        overflow-y: auto;
                        display: flex;
                        flex-direction: column;
                        gap: 0.3rem;
                        padding-bottom: 1rem;

                        &::-webkit-scrollbar {
                            width: 6px;
                            height: 8px;
                            box-sizing: border-box;
                            visibility: hidden;
                        }

                        &::-webkit-scrollbar-thumb {
                            height: 30%;
                            background: #c4c4c4;
                            border-radius: 10px;
                            visibility: hidden;
                        }

                        &:hover {

                            &::-webkit-scrollbar-thumb {
                                height: 30%;
                                background: #c4c4c4;
                                border-radius: 10px;
                                visibility: initial;
                            }
                        }

                        /* 검색 결과 카드 */
                        .search_list_item {
                            display: flex;
                            flex-direction: column;
                            padding: 0 .5rem;
                            background-color: #fff;
                            border-radius: .5rem;
                            &.l_selected_customer {
                              background-color: #beffff;
                            }

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

                            .side_nav_no_active_option {
                                display: none;
                            }

                            .item_devide {
                                height: 1px;
                                background-color: #eee;
                                border: 0;
                            }



                            .card_item {
                                display: flex;
                                /* justify-content: flex-end; */
                                align-items: center;
                                padding: .8rem 0rem;
                                font-size: 0.85rem;
                                font-weight: bold;
                                gap: .2rem;

                                /* 고객번호 */
                                .card_cust_no {
                                    color: #ff164b;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;

                                    &.l_has_old_cust_no {
                                      display: flex;
                                      flex-direction: column;
                                      align-items: center;
                                      &::after {
                                        content: attr(data-old-customer-no);
                                        color: green;
                                        text-align: center;
                                        font-weight: 400;
                                        font-size: .8rem;
                                        margin-bottom: .2rem;
                                      }
                                    }
                                }


                                /* 고객 번호, 고객 구분 wrapper */
                                .cust_info {
                                    display: flex;
                                    flex-direction: column;
                                    width: 5rem;
                                    align-items: center;

                                    flex-basis: 60px;
                                    flex-grow: 0;
                                    flex-shrink: 0;


                                    .card_cust_no {
                                        flex: 1;
                                    }
                                }

                                /** 고객정보 상단 정보 */
                                .card_main_info {
                                    display: flex;
                                    /* flex-basis: 152px; */
                                    flex: 1;
                                    justify-content: space-between;

                                    p, span {
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        max-width: 12rem;
                                        white-space: nowrap;
                                    }


                                    /* 카드 상단 wrapper */
                                    &.type_main_info {
                                        flex-direction: column;
                                        flex-shrink: 0;
                                        gap: .1rem;

                                        /* 엄마, 아기 이름 wrapper */
                                        .name_info {
                                            display: flex;
                                            line-height: 1.4;
                                            /*
                                            .customer {
                                                flex-basis: 7rem;
                                                flex: 1;
                                            }

                                            .baby {

                                                flex: 1;

                                            }
                                            */
                                        }

                                        .mom_info,
                                        .dad_info {
                                            display: flex;
                                            gap: .2rem;
                                            flex-wrap: wrap;

                                            .customer_name {
                                                /* flex: 2; */
                                                flex-basis: calc(50% - 0.1rem);
                                            }


                                            .cutomer_phone {
                                                color: #757575;
                                                /* flex: 2.5; */
                                                flex-shrink: 1;
                                                flex-grow: 0;
                                                flex-basis: calc(50% - 0.1rem);

                                                /* align-items: center; */
                                                /* display: none; */

                                                /* 경계선 */
                                                /* display: flex; */
                                                /* gap: .2rem; */
                                                display:inline-block;

                                                &::before {
                                                    /* content: '|'; */
                                                    content: '';
                                                    color: #eee;
                                                    height: .8rem;
                                                    /* flex: 1; */
                                                    flex-grow: 0;
                                                    flex-shrink: 1;
                                                    flex-basis: fit-content;
                                                    border-left: .1rem solid #a4a4a4;
                                                    margin-right: .2rem;
                                                }
                                            }
                                        }
                                        .dad_info {
                                            display: flex;
                                        }
                                        .baby_info {
                                            display: flex;

                                            .customer_name {
                                                color: #757575;
                                            }
                                        }
                                    }

                                    .card_baby_days {
                                        display: flex;
                                        flex-direction: column;
                                        align-items: flex-end;
                                        flex: 1;

                                        &.d-day {
                                            color: #01C2D1;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                        }

                                        .gold {
                                            color: #FF164B;
                                        }

                                        .blue {
                                            color: blue;
                                        }
                                    }
                                }

                                /* 패키지 상품 정보 */
                                .card_product_info {
                                    width: 100%;
                                    display: flex;
                                    justify-content: space-between;

                                    .price_info {
                                        color: #01C2D1;
                                    }
                                }
                            }

                            /* 중첩으로 인해 우선순위 밀려서 선택 클래스도 중첩처리 */
                            &.l_selected_customer {
                              .item_devide {
                                background-color: #2b2b2b;
                              }
                              .card_item {
                                .card_main_info {
                                  &.type_main_info {
                                    .mom_info,
                                    .dad_info {
                                      .cutomer_phone {
                                        color: #1e1e1e;
                                        &::before {
                                          color: #ffffff;
                                          border-left: .1rem solid #1e1e1e;
                                        }
                                      }
                                    }
                                    .baby_info {
                                      .customer_name {
                                        color: #1e1e1e;
                                      }
                                    }
                                  }
                                }
                              }
                            }
                        }
                    }

            }

        }

        .absolute_wrap {
            position: absolute;
            right: -1.5rem;
            display: flex;
            gap: 1rem;
            top: 0;
            align-items: center;

            /* 핀 버튼 */
            .lock_menu_wrap {

                img {
                    width: 20px;
                }
            }

            /* toggle 버튼 */
            .menu_toggle_btn {
                top: 0px;
                right: -1.5rem;
                z-index: 20;
                background-color: #006494;
                width: 3rem;
                height: 3rem;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 3rem;
                overflow: hidden;
                cursor: pointer;
            }


        }
    }