/* 사이드 패널 스타일(Category*/
 
/* --- 전체 화면 관리 메뉴 스타일 --- */
.fullscreen-menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #F6F6F8;
  z-index: 400;
  transform: translateX(100%);
  transition: transform 0.35s ease-out;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  display: none;
}

.fullscreen-menu.visible {
  transform: translateX(0);
  display: flex;
}

/* --- 카테고리 메뉴 스타일 --- */
.category-menu {  
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.category-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-menu-title {
  color: black; 
  font-size: 18px; 
  font-weight: 700;
  line-height: 26px;
}

.category-menu-close-button {
  cursor: pointer; 
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.category-menu-close-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.category-menu-innocode-header-bar {
  width: 100%;
  height: 58px;
  padding-top: calc(var(--unit-8, 8) * 1px);
  padding-right: calc(var(--grid-margin, 20) * 1px);
  padding-bottom: calc(var(--unit-8, 8) * 1px);
  padding-left: calc(var(--grid-margin, 20) * 1px);
  justify-content: space-between;
  align-items: center;
  display: inline-flex;
  gap: calc(var(--unit-8, 8) * 1px);
  background-color: var(--background-normal-normal, #f6f6f8);
  color: var(--label-tertiary, #4f4f64);
}


.category-menu-innocode-header-actions { 
  flex: 1;
  align-items: center;
  row-gap: 8px;
  column-gap: 8px;
  display: flex; 
}


.category-menu-innocode-header-action-icon {
  color: var(--color-cool-neutral-15);
  width: 24px;
  height: 24px;
  position: relative;
  cursor: pointer;
}


.category-menu-spaceholder {
  height: calc(var(--unit-40, 40) * 1px);
  width: 100%;
}

.category-menu-move-back-icon{
  width: 24px;
  height: 24px;
  color: var(--label-btn-normal, #4f4f64b8);
}

.category-menu-min-height-area{
  height: calc(100vh - 64px);
}
 

.category-menu-page-title{
  color: var(--label-tertiary, #4f4f64);
}

.category-menu-category-list-title{
  justify-content: center;
}
.category-menu-category-list-close-icon{
  cursor: pointer;
}
.category-menu-category-list-close-icon-box{
  justify-content: flex-end;
}
 
.category-menu-category-list-depth1-item{
  color: var(--primary-filled-normal, #297aff);
  padding-top: calc(var(--unit-16, 16) * 1px);
  padding-right: calc(var(--unit-16, 16) * 1px);
  padding-bottom: calc(var(--unit-16, 16) * 1px);
  padding-left: calc(var(--unit-16, 16) * 1px);
  cursor: pointer;
}

.category-menu-category-list-depth1-item:hover{
background-color: var(--assistive-normal,#8f8fa314 ); 
}

.category-menu-category-list-depth2-item{
  width: 100%;
}

.category-menu-category-list > * + * {
      border-top: 18px solid  var(--background-normal-alternative, #f0f0f4); 
  } 

  .category-menu-divider{
      height: 1px;
      background-color: var(--line-opacity-strong, #b9b9c63d);
  }

  .category-menu-category-list-box{ 
    padding-right: calc(var(--grid-margin, 20) * 1px); 
    padding-left: calc(var(--grid-margin, 20) * 1px);
}

/* 사이드 패널 스타일(Setting)  */
.innocode-sidepanel-header-bar {
  width: 100%;
  height: 64px;
  padding-top: calc(var(--unit-8, 8) * 1px);
  padding-right: calc(var(--grid-margin, 20) * 1px);
  padding-bottom: calc(var(--unit-8, 8) * 1px);
  padding-left: calc(var(--grid-margin, 20) * 1px);
  justify-content: space-between;
  align-items: center;
  display: inline-flex;
  gap: calc(var(--unit-8, 8) * 1px);
  background-color: var(--background-normal-normal, #f6f6f8);
  color: var(--label-tertiary, #4f4f64);
}
 
.innocode-sidepanel-header-actions { 
  display: flex; 
  justify-content: center;
  align-items: center;
  row-gap: 8px;
  column-gap: 8px;
  display: flex; 
  color: var(--label-tertiary, #4f4f64);
}
    

.sidepanel-move-back-icon{
  width: 24px;
  height: 24px;
  color: var(--label-btn-normal, #4f4f64b8);
  cursor: pointer;
} 
    
 
.sidepanel-menu-list-depth1-item{
  color: var(--label-tertiary, #4f4f64);
  padding-top: calc(var(--unit-20, 20) * 1px);
  padding-right: calc(var(--grid-margin, 20) * 1px);
  padding-bottom: calc(var(--unit-20, 20) * 1px);
  padding-left: calc(var(--grid-margin, 20) * 1px);
}

.sidepanel-menu-list-depth2-list{
  padding-right: calc(var(--grid-margin, 20) * 1px);
  padding-left: calc(var(--grid-margin, 20) * 1px);
}
.sidepanel-menu-list-depth2-item{
  width: 100%;
}

.sidepanel-menu-list > * + * {
      border-top: 18px solid  var(--background-normal-alternative, #f0f0f4); 
  } 

  .sidepanel-divider{
      height: 1px;
      background-color: var(--line-opacity-strong, #b9b9c63d);
  }
  
  .sidepanel-nagative-text{
      color:  var(--status-negative, #F83A3A);
  }
  

  .sidepanel-innocode-profile-info-box{
      cursor: pointer;  
  }