/*********************
style.css
- 전체에 공통적으로 적용되는 CSS 속성 정의
전체 초기화
page-wrap
nav-wrap 
*********************/
* {
    padding: 0px;
    margin: 0px;
}

/* 전체 페이지 */
.page-wrap {
    width: 100vw;
    height: 100vh;
    background: var(--Black, #191918);
}

/*------------------------------------------------*/
/* navigation bar */
.nav-wrap {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 180px;
    display: flex;
    flex-direction: column;
    background: var(--Black, #191918);
    /* overflow: hidden; */
    /* z-index: 1000; */
}

.nav {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 로고는 위, 메뉴는 아래로 분리 */
    height: 100%; /* 전체 높이 사용 */
    gap: 20px;
    padding-bottom: 20px;
}

/* logo */
.logo {
    padding-top: 20px;
    padding-left: 10px;
}

/* 4 menus */
.menu {
    position: relative;
    display: flex;
    flex-direction: column;
    /* gap: 5vh; */
    gap: 40px;
    margin-top: 20px;
    padding-left: 10px;

    /*z-index: 15;*/ /* .nav-honey 보다 z-index 높게 설정 */
}

/* nav menu select bar shape */
.nav-honey {
    position: absolute;
    width: 190px;
    height: 117px;
    top: 0;
    right: 0px;
    background-color: #ffffff;
    /* 추가된 코드 */
    border-radius: 999px;
    overflow: visible;
    clip-path: path(
        "M160.871 114H161V0H160.871V7.62019C160.871 25.4771 145.394 33.2228 129 36C115.099 38.3548 83.401 40.3562 69.5 38C55.599 35.6438 33.9792 29.4989 21.0927 31.5C9.5068 33.2993 2.33446 41.7968 0.5 53.9019V58.4019C0.5 69.4019 10.7896 80.0361 21.0927 81.5C32.4762 83.1172 55.599 78.3562 69.5 76C83.401 73.6438 115.099 75.6452 129 78C145.394 80.7772 160.871 90.7823 160.871 108.639V114Z"
    );

    transform-origin: right center;
    will-change: transform;

    z-index: 1;
}

.menu-item {
    display: flex;
    align-items: center;
    z-index: 2;
}

.menu-img {
    padding: 0px 10px 0px 15px;
}

.menu-item img.item-img {
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;

    /* 필요 시 선명도 유지 (선택) */
    image-rendering: auto;
}

.menu-text {
    color: var(--Grey3, #8c8985);
}

/* chatbot */
.chatbot-wrap {
    margin-top: auto; /* chatbot은 모니터 화면 크기 관계없이 항상 아래쪽에 배치 */
    padding-bottom: 20px;
}

.chatbot {
    display: flex;
    gap: 20px;
}

.chatbot-item {
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-content: flex-end;
}

.chatbot-item .line {
    padding-left: 20px;
}

.chatbot-item .line hr {
    border-radius: 2px;
    height: 1.5px;
    border: 0;
    background: var(--Grey3, #8c8985);
}

.chatbot-menu {
    display: flex;
    align-items: center;
}

/*------------------------------------------------*/
/* top */
.top-wrap {
    position: fixed;
}

/*------------------------------------------------*/
/* middle */
.middle-wrap {
}

/*------------------------------------------------*/
/* bottom */
.bottom-wrap {
}