/* 20241112 menu_ver2 적용 */


/* LNB 영역 시작 */
.lnb_article {
    width: 280px;
    min-height: 100vh;
    font-size: 16px;
    flex-shrink: 0; /* 너비 고정 */
    background-color: #fff;
}

.lnb_section {
    width: 100%;
    /*height: 100%; 제거하여 콘텐츠에 맞춤 */
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
}

/* lnb logo 시작 */
.lnb_logo {
    font-size: 16px;
    line-height: 24px;
    padding: 0px 20px 20px 20px;
    color: #202739;
}

/* lnb logo 끝 */

/* user_name 로그인 정보 */
.user_name_box {
    background: var(--main-color-5);
    border-radius: 12px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px 10px;
    flex-direction: column;
    margin-bottom: 30px;
}

.user_name_info {
    border-bottom: 1px solid #D8DEF1;
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 16px;
}

.user_name_round {
    background-color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user_name_round p {
    font-size: 17px;
    padding: 7px 12px;
    font-weight: 700;
}

.user_name_txt {
    display: flex;
    align-content: space-between;
    flex-direction: column;
    justify-content: space-between;
    height: 34px;
}

.user_name_full_name p {
    font-size: 14px;
    font-weight: 500;
}

.user_name_position p {
    font-size: 12px;
    color: var(--color-blueGray-3);
    font-weight: 500;
}

/* user_name 로그인 정보 끝 */

/* 로그아웃 */
.logout {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
    margin-top: 10px;
}

.logout button {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-blueGray-3);
    text-align: center;
    display: flex;
    align-items: center;
    margin-right: 6px;
    border: none;
}

.logout:hover {
    filter: invert(24%) sepia(19%) saturate(516%) hue-rotate(178deg) brightness(90%) contrast(86%);
}

/* 로그아웃 끝 */

/* LNB 스타일 */
/* 기본 메뉴 스타일 1depth */
.menu-item {
    padding: 12px 26px;
    color: var(--main-color-1);
    text-decoration: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fff;
    transition: background-color 0.3s;
}

/* hover 상태에서 배경색만 변화, 막대는 없음 */
.menu-item:hover {
    background-color: #e0e7ff;
}

/* focus 상태에서 왼쪽에 막대가 나타나도록 설정 */
.menu-item:focus::before,
.menu-item.active::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    /* 막대의 너비 */
    height: 50px;
    /* 막대의 높이 */
    background-color: var(--main-color-1);
    border-radius: 4px;
    /* 막대 양 끝의 둥근 모서리 */
    transition: background-color 0.3s ease;
}

/* 메뉴 안 아이템 정렬 */
.flex_spacebetween {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

/* 메뉴 1depth 내용 - 왼쪽 */
.menu-left {
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

:is(.menu-image) img {
    width: 26px;
    height: 26px;
    margin-right: 14px;
}

/* 메뉴 1depth 내용 - 오른쪽 */
.menu-right .arrow-icon {
    width: 12px;
    height: 12px;
}

/* 메뉴 2depth */
.submenu {
    display: none;
    position: relative;
}

/*
.submenu::before {
    content: "";
    position: absolute;
    top: 0;
    left: -20px;
    width: calc(100% + 40px);
    height: 100%;
    background: #FBFBFB;
}
*/

.submenu-item {
    padding: 17px 14px;
    color: var(--color-blueGray-4);
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    display: flex;
    font-weight: 700;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: 0.3s;
}

.submenu-item .small_circle {
    margin: 0px 24px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-blueGray-4);
    transition: 0.3s;
}

/* LNB 영역 효과 */
/* active 상태일 때 배경색 고정 */
.menu-item.active {
    background: var(--main-color-1);
    color: #fff;
}

.menu-item.active .menu-image img {
    filter: brightness(0) invert(1);
}

.menu-item.active .menu-right .arrow-icon img {
    filter: brightness(0) invert(1);
    transform: rotate(180deg);
}

/* 메뉴 2depth hover 시 배경색 */
.submenu-item:hover {
    background-color: var(--main-color-5);
    color: var(--main-color-1);
}

/* 하위 메뉴 hover 시 small_circle var(--main-color-1)로 변경 */
.submenu-item:hover .small_circle {
    background: var(--main-color-1);
}

/* LNB 스타일 끝 */

/* right article 시작 */
.right_article {
    width: 100%;
    /*height: 100%;*/
    min-width: 1140px;
    margin: 0 20px 0 20px; /* right article 좌우 마진 */
}

.right_section {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 1380px;
}

/* right article 끝 */