.board-list {
  width: 100%;
  /*max-width: 800px;*/
  /*margin: 0, auto;*/

  border-radius: 8px;
/*
  border: 1px solid #333;
  padding: 20px;
  */
}

.post-item {
  display: flex; /* Flexbox 활성화 */
  align-items: center; /* 세로축 중앙 정렬 (수직 중앙) */
  padding: 15px 0; /* 위아래 패딩 */
  border-bottom: 1px solid #eee; /* 각 게시물 하단 구분선 */

  margin:10px;
}

.post-item:last-child {
  border-bottom: none; /* 마지막 게시물은 하단선 제거 */
}


.post-item .right-aligned-span { /* 우측에 보낼 특정 span에 이 클래스를 적용 */
    margin-left: auto; /* 왼쪽 마진을 자동으로 채워 우측으로 밀어냅니다. */
}



/* --- 2. 가운데 게시물 제목 스타일링 --- */
.post-content {
  flex-grow: 1; /* 남은 공간을 모두 차지하도록 설정 */
  margin-right: 15px; /* 좋아요/댓글과의 간격 */
  min-width: 0; /* 제목이 길 경우 넘치지 않도록 */
}

.post-content .post-title {
  margin: 10px; /* 기본 마진 제거 */
  font-size: 1.0em;
  /*font-weight: bold;*/
  color: #ddd;
  /*white-space: nowrap; *//* 제목이 한 줄로 표시되도록 */
  /*overflow: hidden; */ /* 넘치는 부분 숨김 */
  text-overflow: ellipsis; /* 넘치는 부분 ...으로 표시 */
}





.likes {
    /* 텍스트와 아이콘을 감싸는 span 자체를 수직 중앙으로 정렬 (선택 사항) */
    display: inline-flex; /* 또는 flex로 해도 좋음 */
    align-items: center; /* 자식 요소들을 세로 중앙 정렬 */
    font-size:0.8em;
}



.post-thumbnail {
  width: 60px;       /* 원하는 너비 */
  height: 60px;      /* 원하는 높이 (width와 같게 해서 정사각형) */
  border-radius: 50%; /* 정사각형을 완전히 둥글게 만들어 원형으로 */
  object-fit: cover;  /* 이미지가 잘릴 수 있지만 원형 안에 꽉 차게 표시 */
}

.post-id {
  position: relative;
  color: #fafafa;
  top: -26px;
  margin-left: 20px;
}

.post-id2 {
  position: relative;
  color: #b0c4de;;
  top: -26px;
  margin-left: 0px;
  font-size:0.8em;
}