/* 프로필 영역 스타일 */
.sidebar-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 36px;
}
.sidebar-profile-img {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.sidebar-profile-name {
  font-size: 1.08rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.sidebar-profile-desc {
  font-size: 0.9rem;
  color: #bfc8e2;
  text-align: center;
}
/* 메뉴 아이콘을 원으로 감싸기 */
.menu-icon-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  margin-right: 10px;
  vertical-align: middle;
}
/* sidebar.css: 사이드바 관련 스타일 */
.sidebar {
  width: 200px;
  background: #232946;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 40px 0 0 0;

  /* 스크롤해도 따라오도록 고정한다.
     .container 가 flex 라 자식이 기본으로 stretch 되는데, 그러면 사이드바가
     이미 전체 높이를 차지해 sticky 가 움직일 공간이 없다.
     align-self 로 stretch 를 풀고 높이를 화면만큼만 준다. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  /* content-box 라 padding 40px 이 높이에 더해져 100vh 를 넘긴다.
     그만큼 밀린 뒤에야 멈추므로 border-box 로 잡는다. */
  box-sizing: border-box;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none; /* 내용이 길 때만 내부 스크롤, 막대는 감춘다 */
}
.sidebar::-webkit-scrollbar {
  display: none;
}
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}
.sidebar ul li {
  margin: 24px 0;
  font-size: 0.9rem;
}
.menu-icon {
  width: 13px;
  height: 13px;
  display: block;
  margin: 0 auto;
}
.sidebar-stats {
  margin-bottom: 40px;
  color: #bbb;
}
.stat-item {
  font-size: 0.9rem;
}
.sidebar-links {
  display: flex;
  gap: 18px;
  margin-top: auto;
  margin-bottom: 30px;
}
.sidebar-icon {
  width: 24px;
  height: 24px;
}