/* 기본 스타일 */
.container {
  position: fixed;
  font-family: 'TTLaundryGothicB';
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 0; /* 기본값으로 변경 */

  opacity: 1;
  transform: translateX(0);
  transition: transform 1s ease; /* 부드러운 전환 */

  pointer-events: auto; /* 클릭 가능하게 설정 */
}

.sidebar {
  width: 15%; /* 사이드바 폭 */
  min-width: 180px; /* 사이드바 최소 너비 */
  background-color: #000000;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 2px 0 4px rgba(255, 255, 255, 0.5);
  align-content: center;
  position: relative; /* 상대적 위치로 변경 */
  z-index: 10; /* 사이드바에 적절한 z-index 추가 */
}

.logo {
  top: 30px;
  left: 40px;
  width :250px;
  position: fixed;
}

.category {
  margin-bottom: 20px; /* 각 목록 간의 간격 */
  display: flex;
  flex-direction: column; /* 세로 정렬 */
  align-items: center; /* 가로 가운데 정렬 */
  z-index: 20; /* 카테고리의 z-index가 다른 요소보다 위로 설정 */
  position: relative; /* 드롭다운을 제대로 표시하기 위해 position을 추가 */
}

.category-button {
  font-weight: bold;
  display: block;
  width: 90%;
  height: auto;
  line-height: 46px;
  text-align: center;
  padding: 10px;
  font-size: 20px;
  color: #F1CFFF80;
  text-decoration: none;
  border: 2px solid #ffffff80;
  border-radius: 0px;
  background-color: #ffffff10;
  transition: background-color 0.3s, color 0.3s;
  z-index: 20; /* 버튼에 적절한 z-index 추가 */
}

.category-button:hover {
  border: 2px solid #ffffff;
  color: #F1CFFF;
}

/* 선택된 카테고리 버튼 */
.category-button.selected {
  border: 2px solid #ffffff;
  color: #F1CFFF;
  background-color: #ffffff10;
}

/* 드롭다운 리스트 */
 
  /* 드롭다운 리스트 숨김 상태 */
  .dropdown-list {
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin-top: 10px;
    transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  }
  

/* 드롭다운 항목 스타일 */
.dropdown-item {
  font-size: 17px;
  color: #F1CFFF80;
  text-decoration: none;
  padding: 10px 10px 10px 30px; /* 왼쪽 여백을 추가하여 원과 텍스트가 겹치지 않도록 */
  display: block;
  transition: background-color 0.3s, color 0.3s;
  border-radius: 5px;
  position: relative; /* ::before 요소 위치를 설정하기 위해 필요 */
}

/* ::before를 사용하여 원 추가 */
.dropdown-item::before {
  content: ''; /* 내용을 비워두고 */
  position: absolute;
  left: 10px; /* 원의 위치 */
  top: 50%;
  transform: translateY(-50%); /* 세로로 중앙 정렬 */
  width: 10px; /* 원의 크기 */
  height: 10px; /* 원의 크기 */
  border-radius: 50%; /* 원 모양 만들기 */
  background-color: #F1CFFF80; /* 원의 색상 */
}

/* 드롭다운 항목 호버 시 */
.dropdown-item:hover {
  color: #F1CFFF;
  background-color: #ffffff10;
}

.dropdown-item:hover::before {
  background-color: #F1CFFF; /* 호버 시 원 색상 변경 */
}

/* 드롭다운 활성화 */
.category:hover .dropdown-list {
  visibility: visible;
  opacity: 1;
  height: auto; /* 콘텐츠 높이에 맞게 조정 */
}


/* 선택된 드롭다운 항목 */
.dropdown-item.selected {
color: #F1CFFF;
background-color: #ffffff10;
}


.dropdown-item.selected::before {
background-color: #F1CFFF; /* 선택된 상태에서 원 색상 유지 */
}

/* 화면 크기가 768px 이하일 때 .container를 슬라이드하고 사라지게 */
@media (max-width: 768px) {
.container {
  opacity: 0; /* 투명하게 만들어 사라지게 */
  transform: translateX(-100%); /* 왼쪽으로 슬라이드 */
  
  transition: transform 3s ease, opacity 1s ease; /* 부드러운 전환 */
}
}