/* ===== VIEWS STYLES ===== */
/**
 * @file: views/community/post-list.css
 * @description: 게시글 목록 스타일
 * @components: 게시글 목록 컨테이너
 * @usage: 게시글 목록 컨테이너 스타일링
 */
#postList {
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ===== VIEWS STYLES ===== */
/**
 * @file: views/community/post-list.css
 * @description: 센터명 링크 관련 스타일
 * @components: 링크, 호버 효과, 툴팁
 * @usage: 센터명을 클릭 가능한 링크로 표시
 */

/* 센터명 링크 스타일 수정 */
.center-link {
  color: #1a73e8;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 20px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 0.9em, 16px);
}

.center-link:hover {
  background-color: #f0f7ff;
  color: #1557b0;
  text-decoration: underline;
}

/* 센터명 툴팁 위치 조정 */
.center-link-container .tooltip {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;  /* 높은 z-index로 설정하여 다른 요소들 위에 표시 */
  white-space: nowrap;  /* 툴팁 텍스트가 줄바꿈되지 않도록 설정 */
}

.center-link-container .tooltip::before {
  top: -4px;
}

/* 게시글 행 스타일 수정 */
.post-row {
  transition: background-color 0.2s ease;
}

.post-row:hover {
  background-color: #f8f9fa;
}

/* 클릭 가능한 셀 스타일 */
.clickable-cell {
  cursor: pointer;
}

/* 작성자와 센터명 영역은 별도의 hover 효과 유지 */
.author-info.clickable:hover {
  background-color: #f0f7ff;
}

/* 게시글 제목 스타일 수정 */
.post-title-cell {
  text-align: left;
  max-width: 400px;
}

/* 게시글 행 hover 시 제목 색상 변경 */
.post-row:hover .post-link {
  color: #1a73e8;
}

/* ===== VIEWS STYLES ===== */
/**
 * @file: views/community/post-list.css
 * @description: 게시글 카드 스타일
 * @components: 게시글 카드
 * @usage: 게시글 카드 스타일링
 */
.post-card {
  padding: 24px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  position: relative;
}

.post-card:last-child {
  border-bottom: none;
}

.post-card:hover {
  background-color: #f8f9fa;
  transform: translateY(-1px);
}

.post-card h3 {
  font-size: 1.3em;
  color: #1a73e8;
  margin: 0 0 12px 0;
  font-weight: 600;
  line-height: 1.4;
}

.post-card p {
  font-size: 1em;
  color: #444;
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.post-card small {
  font-size: 0.9em;
  color: #666;
  display: block;
}

/* ===== VIEWS STYLES ===== */
/**
 * @file: views/community/post-list.css
 * @description: 센터명 링크 컨테이너 스타일
 * @components: 센터명 링크 컨테이너
 * @usage: 센터명 링크 컨테이너 스타일링
 */
.center-link-container {
  position: relative;
  overflow: visible;
  z-index: 2;  /* 부모 요소보다 높은 z-index */
}

/* ===== VIEWS STYLES ===== */
/**
 * @file: views/post-list.css
 * @description: 게시판 테이블 스타일
 * @components: 게시판 테이블
 * @usage: 게시판 테이블 스타일링
 */
.post-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  table-layout: fixed;
}

.post-table th,
.post-table td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 표 셀의 overflow 속성 수정 */
.post-table td {
  position: relative;
  overflow: visible !important;
}

/* 센터명 셀 스타일 수정 */
.post-table td:nth-child(4) {
  position: relative;
  overflow: visible;
  z-index: 1;
  min-width: 120px;  /* 최소 너비 설정 */
}

.post-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #333;
}

.post-table tbody tr:hover {
  background-color: #f8f9fa;
}

/* 각 열의 기본 너비 설정 */
.post-table th:nth-child(1),
.post-table td:nth-child(1) {
  width: 4%;
}

.post-table th:nth-child(2),
.post-table td:nth-child(2) {
  width: auto;
  text-align: left;
}

.post-table th:nth-child(3),
.post-table td:nth-child(3) {
  width: 12%;
}

.post-table th:nth-child(4),
.post-table td:nth-child(4) {
  width: 15%;
}

.post-table th:nth-child(5),
.post-table td:nth-child(5) {
  width: 12%;
}

.post-table th:nth-child(6),
.post-table td:nth-child(6) {
  width: 12%;
}

.post-table th:nth-child(7),
.post-table td:nth-child(7) {
  width: 6%;
}

.post-table th:nth-child(8),
.post-table td:nth-child(8) {
  width: 4%;
}

.post-title-cell {
  text-align: left;
  max-width: 400px;
}

.post-link {
  color: #333;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-link:hover {
  color: #1a73e8;
}

.post-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: #666;
  font-size: 0.9em;
}

/* ===== VIEWS STYLES ===== */
/**
 * @file: views/post-list.css
 * @description: 게시판 작성자 셀 스타일
 * @components: 게시판 작성자 셀
 * @usage: 게시판 작성자 셀 스타일링
 */
.author-cell {
  min-width: 120px;
  position: relative;
  overflow: visible !important;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

/* ===== VIEWS STYLES ===== */
/**
 * @file: views/post-list.css
 * @description: 게시글 작성자 이미지 스타일
 * @components: 게시글 작성자 이미지
 * @usage: 게시글 작성자 이미지 스타일링
 */
.author-profile-image {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e0e0e0;
}