/* src/main/resources/static/css/board/sidebar.css */

/* --- 기본 (데스크톱) 스타일 --- */
.board-sidebar {
	width: 220px;
	background-color: #fff;
	border-radius: 10px;
	padding: 25px 18px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	font-family: 'Pretendard', sans-serif;
	align-self: flex-start; /* flex-container 안에서 늘어나지 않게 */
}

/* 섹션 제목 */
.sidebar-section-title {
	font-weight: 600;
	color: #222;
	font-size: 14px;
	margin: 20px 0 12px 0;
	padding-bottom: 5px;
	border-bottom: 1px solid #eee;
}

/* 메뉴 목록 */
.sidebar-nav ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.sidebar-nav li {
	margin-bottom: 10px;
}
.sidebar-nav a {
	text-decoration: none;
	color: #333;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	transition: all 0.2s ease;
}

/* 활성 메뉴 */
.sidebar-nav li.active a {
	color: #377dff;
	font-weight: 600;
	background-color: rgba(55, 125, 255, 0.08);
}

/* 호버 시 강조 */
.sidebar-nav a:hover {
	color: #377dff;
	background-color: rgba(55, 125, 255, 0.05);
}

.sidebar-nav + .sidebar-section-title {
	margin-top: 25px;
}


/* --- ✅ 모바일 화면용 스타일 (768px보다 작을 때) --- */
@media (max-width: 767.98px) {
  .board-sidebar {
    width: 100%; /* 너비를 꽉 채움 */
    margin-bottom: 20px; /* 아래 내용물과의 간격 */
    padding: 10px;
  }
  
  /* 모바일에서는 섹션 제목을 숨겨서 깔끔하게 */
  .sidebar-section-title {
    display: none;
  }
  
  /* 메뉴들을 가로로 배열 */
  .sidebar-nav {
    display: flex;
    justify-content: space-around; /* 메뉴들을 균등하게 배분 */
    width: 100%;
  }
  
  .sidebar-nav ul {
    display: flex; /* li들을 가로로 배열 */
    flex-wrap: wrap; /* 공간 부족 시 줄바꿈 */
    justify-content: center;
    gap: 10px; /* 메뉴 사이 간격 */
  }
  
  .sidebar-nav li {
    margin-bottom: 0;
  }
}