.main-container{
  display: flex;
  flex-direction:row;
  width: 100%;
  height:100%;
  background-color: rgb(255, 255, 255);
}

.sidebar-container{
  width: 20%;
  height:100%;
  background-color: rgb(255, 255, 255);
}

.main-content-container{
  width: 80%;
  height:100%;
    padding-top:0px;
  padding-left:20px;
  background-color: rgb(255, 255, 255);

}

.nav{
  display: flex;
  flex-direction: column;
}

.nav-item {
  padding: 15px;
  border-bottom: 1px solid #ccc;
  text-decoration: none;
  color: black;
  display: block; /* ✅ 클릭영역 확장 */
  transition: all 0.2s ease; /* ✅ 부드럽게 */
}

.nav-item:hover {
  background-color: #f5f5f5; /* ✅ 배경 밝게 */
  color: #0078ff;            /* ✅ 글자 파란색 */
  border-bottom: 2px solid #0078ff; /* ✅ 강조라인 */
  font-weight: 600;          /* ✅ 살짝 두껍게 */
}




.recent-lecture-container {
  display: grid;
    height:auto;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;             /* ✅ 1420px 고정 대신 부모에 맞춤 */
  box-sizing: border-box;  /* ✅ padding/gap 계산 포함 */
  background-color: rgb(255, 255, 255);
}


.recent-lecture-item {
  width: 260px;            /* 고정 폭 (5등분용) */
  height: auto;           /* 고정 높이 */
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 10px;
  display: flex;
  flex-direction: column;  /* ✅ 세로로 쌓기 */
  justify-content: flex-start; /* 위쪽부터 쌓기 */
  box-sizing: border-box;
}

.recent-lecture-item:hover {
  background-color: #bbb;
  transform: translateY(-5px);
  cursor: pointer;
}

.lecture-section-title{
  font-size: 24px;
  font-weight: bold;
}

.lecture-comment-box{
  width:100%;
  height:100%;
  background-color: rgb(255, 255, 255);
}

.lecture-comment-box-item{
  display:flex;
  flex-direction:row;
  border: 2px solid black;
  padding:3px;
  margin-bottom:3px;
  border-radius:10px;
}

.lecture-comment-username{
  font-size:20px;
  font-weight:bold;
  margin-right:10px;
}

.lecture-comment-comment{
  font-size:20px;
  font-weight:bold;
}

.recomment-lecture-title{
  font-size:30px;
  font-weight:bold;
  text-align: left;
  margin-top:10px;
  margin-bottom:10px;
}

.lecture-comment-username{
  color: rgb(131, 212, 129);
}

.recent-lecture-thumbnail {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}