/* 신규 사이드바 스타일링 */
/* Link 제일 하단에 연결하여 우선순위 높힌상태 */

/* 기본값 초기화 */
.new-main-side a {
  color: #333;
  text-decoration: none;
}

/* 기본값 초기화 */
.new-main-side ul {
  padding: 0;
}

.new-main-side {
  background: #fff;
  border-right: 1px solid #dedede;
  transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.new-main-side.expanded {
  width: 235px;
  padding: 16px;
}

.main-wrap.expanded {
  left: 235px;
  width: calc(100vw - 235px);
}
.header-underline.expanded {
  width: calc(100vw - 235px);
}

.side-menu-log-container {
  display: flex;
  justify-content: flex-start;
  height: 25px;
  position: relative;
  margin-top: 10px;
}

.side-menu-log-container > a {
  position: absolute;
  left: 0;
  transition: all 0.2s ease-in-out; /* 축소 시 빠르게 사라짐 */
}
.side-menu-log-container.expanded > a {
  transform: translateX(-50%);
  left: 50%;
  transition: all 0.3s ease-in-out;
}

.new-main-side .dividing-line {
  width: calc(100% - 24px);
  height: 1px;
  background: #dedede;
  margin: 20px 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out; /* 축소 시 빠르게 사라짐 */
}

.new-main-side .dividing-line.expanded {
  opacity: 1;
  visibility: visible;
  transition: all 0.2s ease-in-out;
  transition: all 0.3s ease-in-out 0.15s; /* 확장 시에만 지연 */
}

.new-main-side .dividing-title {
  font-size: 12px;
  font-weight: 700;
  color: #6e6e6e;
  letter-spacing: -1.5px;
  /* margin-bottom: 5px; */
  margin-left: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in-out; /* 축소 시 빠르게 사라짐 */
}
.new-main-side .dividing-title.expanded {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease-in-out 0.15s; /* 확장 시에만 지연 */
}

.new-nav-wrap {
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  margin-top: 10px;
  transition: all 0.2s ease-in-out; /* 축소 시 빠르게 사라짐 */
}
.new-main-side.expanded .new-nav-wrap {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s ease-in-out 0.15s; /* 확장 시에만 지연 */
}

.new-main-side ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6e6e6e;
  padding: 10px 12px;
  border-radius: 10px;
}

/* 메뉴를 선택했을 때 스타일 */
.new-nav-wrap ul li a.active,
.new-nav-wrap ul li:hover > a,
.new-nav-wrap ul li:hover > a .new-nav-item-svg,
.new-nav-wrap ul li a.active .new-nav-item-svg {
  background: #2f68c5;
  color: #fff;
}

/* 메뉴 사이 gap 적용 */
.new-nav-wrap ul li {
  margin-top: 5px;
}

.new-nav-wrap ul li a .new-nav-item-svg,
.new-nav-wrap ul li.ui .nav-link.new-nav-link .new-nav-item-svg {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6e6e6e;
}

/* 아코디언 메뉴 스타일  */
.new-nav-wrap ul li.ui .nav-link.new-nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #6e6e6e;
  padding: 10px 16px 10px 12px;
  border-radius: 10px;
}

.new-nav-wrap ul li.ui .nav-link.new-nav-link .menu-title {
  color: #6e6e6e;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.new-nav-wrap ul li.ui .nav-link.new-nav-link .menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
}

.new-main-side ul li.ui.new-accordion a .menu-title {
  color: #6e6e6e;
  display: flex;
  gap: 5px;
  align-items: center;
}
.new-main-side ul li.ui.new-accordion a .menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
}

.new-main-side ul li.ui.new-accordion .content .new-nav-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
  gap: 10px;
}
.new-main-side ul li.ui.new-accordion .content .new-nav-dropdown-link .content-menu-circle {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6e6e6e;
}

/* 마우스를 사용할 수 있는 환경에서 제목 자체에만 hover 스타일 적용 */
@media (hover: hover) and (pointer: fine) {
  .new-nav-wrap ul li.ui .nav-link.new-nav-link:hover {
    background: #2f68c5;
    color: #fff;
  }

  .new-main-side .new-nav-wrap ul li.ui.new-accordion .nav-link.new-nav-link:hover .menu-title .new-nav-item-svg,
  .new-main-side .new-nav-wrap ul li.ui.new-accordion .nav-link.new-nav-link:hover .menu-icon,
  .new-nav-wrap ul li.ui .nav-link.new-nav-link:hover .menu-title {
    color: #fff;
  }
}

/* 펼침 상태는 화살표 방향만 변경하고 선택 색상과 분리 */
.new-nav-wrap ul li.ui .nav-link.new-nav-link.is-open .menu-icon {
  transform: rotate(-180deg);
}

/* 아코디언 내부의 콘텐츠 hover 스타일 */
.new-nav-wrap ul li.ui .new-nav-dropdown-link:not(.active):hover {
  color: #2f68c5;
}
.new-main-side ul li.ui.new-accordion .content .new-nav-dropdown-link:not(.active):hover .content-menu-circle {
  background: #2f68c5;
}

/* 아코디언 메뉴 클릭되어있을 때 circle 스타일*/
.new-main-side ul li.ui.new-accordion .content .new-nav-dropdown-link.active .content-menu-circle {
  background: #fff;
}

.new-nav-wrap .version-text {
  color: #333;
}

.main-side.new-main-side .new-btn-default-white {
  color: #1f1f1f !important;
}

@media screen and (max-width: 991px) {
  .new-main-side {
    left: -235px;
    width: 235px;
  }

  .new-main-side.expanded {
    width: 235px;
    padding: 16px;
  }

  .side-menu-log-container,
  .side-menu-log-container.expanded {
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }

  .side-menu-log-container > a,
  .side-menu-log-container.expanded > a {
    position: static;
    left: auto;
    transform: none;
    margin-left: 8px;
  }

  .mobile-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: #333;
    background-size: 14px 14px;
  }

  .mobile-sidebar-close:focus-visible {
    outline: 2px solid #2f68c5;
    outline-offset: 2px;
  }
}