/* ==========================================
   1. 상단 컨트롤 바 및 최소 여백 스타일
   ========================================== */
.compact-bar {
  margin-bottom: 2px !important;
  padding: 1px 1px !important;
}
.compact-bar > * {
  margin: 0 1px !important;
}
.compact-btn {
  padding: 1px 1px !important;
  font-size: 14px !important;
  min-width: 30px;
}
.compact-input {
  padding: 2px 2px !important;
  font-size: 12px !important;
}
.compact-select {
  padding: 2px !important;
  font-size: 12px !important;
}

/* ==========================================
   2. 테이블 셀 및 기본 줄높이 타이이트 조정
   ========================================== */
#newsTable tbody tr td {
  padding: 1px 1px !important; /* 상하좌우 패딩 최소화로 줄 높이 축소 */
  vertical-align: middle;      /* 수직 중앙 정렬 */
}

/* 박스 모델 크기 계산 오류 방지 */
#newsTable th, 
#newsTable td {
  box-sizing: border-box !important;
}

/* ==========================================
   3. [핵심] 테이블 가로폭 430px 고정 및 열 너비 통제
   ========================================== */
/* 테이블을 감싸는 반응형 부모가 모바일 폭 안에서 찢어지지 않고 가로 스크롤되도록 지원 */
.w3-responsive {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important; /* 화면 폭이 430px보다 작으면 부드럽게 가로스크롤 작동 */
  box-sizing: border-box !important;
}

/* 테이블의 레이아웃 알고리즘을 고정형 430px로 봉인 */
#newsTable {
  table-layout: fixed !important;
  width: 430px !important;       /* ⭐️ 전체 테이블 너비 430px 고정 */
  max-width: 430px !important;
}

/* 각 열(Column) 너비 정밀 배분 (총합 430px) */
/* 체크박스(30px) + ID(40px) + 제목(210px) + 작성일(100px) + 공개(50px) = 430px */
#newsTable th:nth-child(1), #newsTable td:nth-child(1) { width: 30px !important; }  /* 체크박스 */
#newsTable th:nth-child(2), #newsTable td:nth-child(2) { width: 40px !important; }  /* ID */
#newsTable th:nth-child(3), #newsTable td:nth-child(3) { width: 210px !important; } /* 제목 영역 */
#newsTable th:nth-child(4), #newsTable td:nth-child(4) { width: 100px !important; } /* 작성일 */
#newsTable th:nth-child(5), #newsTable td:nth-child(5) { width: 50px !important; }  /* 공개상태 */

/* 제목 셀 고정 및 말줄임표(...) 최종 정의 */
#newsTable .title-cell {
  width: 210px !important;       /* 지정한 제목 열 너비와 일치 */
  max-width: 210px !important;
  white-space: nowrap !important;     /* 자동 줄바꿈 완전 차단 */
  overflow: hidden !important;        /* 박스 밖 글자 감추기 */
  text-overflow: ellipsis !important; /* 넘친 글자는 자동으로 '...' 변환 */
  vertical-align: middle;
}

/* ==========================================
   4. 페이지네이션(Pagination) 스타일 정돈
   ========================================== */
.pagination-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;            /* 아이콘 사이의 간격 */
  font-family: sans-serif;
}

/* 현재/전체 페이지 표시 */
.pagination-info {
  font-size: 18px; /* 오타 교정 완료 (18x -> 18px) */
  font-weight: bold;
  margin-right: 2px;
}

/* 버튼: 박스(테두리)와 배경을 완전히 제거 */
.pagination-btn {
  background: none !important;
  border: none !important;
  outline: none !important;
  padding: 2px 2px !important; /* 오타 교정 완료 (2 2px -> 2px 2px) */
  cursor: pointer;
  font-size: 14px;       /* 요청하신 아이콘 크기 */
  color: #000;           /* 글자색 그대로 유지 */
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

/* 마우스 올렸을 때만 색상 살짝 변경 (박스는 안 나타남) */
.pagination-btn:hover:not(:disabled) {
  color: #2196F3;
}

/* 현재 페이지 숫자 강조 (밑줄 등) */
.pagination-current {
  font-weight: bold;
  color: #2196F3;
  border-bottom: 2px solid #2196F3 !important; /* 숫자 아래만 살짝 표시 */
}

.pagination-btn:disabled {
  color: #ccc !important;
  cursor: default;
}

/* 우측 셀렉트 박스 정렬 맞춤 */
.pagination-select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 5px;
  margin-left: 5px;
}