/* =========================
   0. 공통 스타일
   ========================= */

/* 기본 버튼은 최대한 손 안 대고,
   각각 필요한 곳에서만 스타일 지정 */
button {
  font-family: inherit;
}

/* =========================
   1. 게시판 목록 (board.html)
   ========================= */

/* 게시판 전체 박스 */
.board-box {
  width: 85%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 24px 32px 32px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-sizing: border-box;
}

/* 🔹 상단: "게시판" 제목 + 정렬 드롭다운 */
.board-header {
  display: flex;
  justify-content: space-between;  /* 왼쪽 제목, 오른쪽 셀렉트 */
  align-items: center;
  margin-bottom: 8px;
}

.board-header .board-title {
  margin: 0;
}

/* 상단 정렬 셀렉트 (모양) */
.board-header select {
  padding: 4px 8px;
  font-size: 14px;
}

/* 박스 안에서는 테이블이 꽉 차도록 */
.board-box .table {
  width: 100%;
  max-width: none;
  margin: 0 0 16px;
}

/* 실제 목록 테이블 */
.table {
  margin: 0 auto;
  border-radius: 5px;
  border-collapse: collapse;
}

/* 헤더 행 */
.header {
  background-color: rgb(218, 231, 255);
  text-align: center;
}

/* 셀 공통 스타일 */
.table td,
.table th {
  border-bottom: 1px lightgray solid;
  height: 30px;
  font-size: 14px;
}

/* 열 너비 */
.num {
  width: 50px;
}
.title {
  width: 500px;
}

/* 데이터 행 정렬 */
.body {
  text-align: center;
}
.body .title {
  text-align: left;
}

/* 조회/댓글/좋아요 가운데 정렬 */
.post-stats-center {
  text-align: center;
  font-size: 13px;
  color: #555;
}

/* 게시판 목록 제목 링크 스타일 초기화 */
.table .title a {
  color: #000;
  text-decoration: none;
}

/* 방문한 링크도 동일하게 */
.table .title a:visited {
  color: #000000;
}

/* 마우스 올리면 약간 강조 */
.table .title a:hover {
  color: #0056b3;
  text-decoration: none;
}

/* 목록 하단 버튼 (글쓰기) 오른쪽 정렬 */
.board-buttons {
  text-align: right;
}

/* 글쓰기 버튼 스타일 */
.board-buttons > button {
  display: inline-block;
  margin: 10px 0 0;
  width: 100px;
  height: 40px;
  font-size: 15px;
  border: 1.5px solid rgb(68, 136, 244);
  border-radius: 5px;
  background-color: rgb(164, 199, 255);
  cursor: pointer;
}

.board-buttons > button:active {
  background-color: rgb(68, 136, 244);
  border-color: rgb(27, 76, 155);
}

/* 1-1. 게시판 검색 영역 */
.board-search {
  width: 100%;               /* board-box 안에서 꽉 차게 */
  max-width: none;
  margin: 24px 0 20px;       /* 글쓰기 버튼과 간격 */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* 셀렉트(제목+내용 / 제목 / 내용) */
.board-search select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
}

/* 검색어 입력창 */
.board-search input[type="text"] {
  flex: 1;                  /* 오른쪽으로 길게 늘어나게 */
  height: 32px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* 검색 버튼 */
.board-search button {
  height: 32px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid rgb(68, 136, 244);
  background-color: rgb(164, 199, 255);
  cursor: pointer;
  font-size: 14px;
}

.board-search button:active {
  background-color: rgb(68, 136, 244);
  border-color: rgb(27, 76, 155);
}

/* ===== 페이징 영역 ===== */
.pagination {
  width: 100%;              /* board-box 안에서 100% */
  max-width: none;
  margin: 10px 0 0;
  text-align: center;
}

.pagination button {
  display: inline-block;   /* 전역 button의 block 영향 제거 */
  width: auto;
  height: auto;
  margin: 0 3px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  cursor: pointer;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: default;
}

.pagination button.active {
  font-weight: bold;
  text-decoration: underline;
  background-color: #e6f0ff;
  border-color: #99bbff;
}

/* =========================
   2. 글쓰기 페이지 (write.html)
   ========================= */

/* 글쓰기 페이지 전체 박스 */
.write-box {
  width: 85%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 24px 32px 32px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-sizing: border-box;
}

/* 박스 안에서 꽉 차게 */
.write-box .write-table {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* 글쓰기 테이블 자체 */
.write-table {
  margin: 40px auto;
  width: 700px;
  border-collapse: collapse;
}

/* 구역 헤더 (Title / Comment) */
.write-header {
  background-color: rgb(218, 231, 255);
  height: 30px;
  padding-left: 10px;
  font-weight: bold;
}

/* 인풋/텍스트 영역 공통 */
.write-table input[type="text"],
.write-table textarea {
  border: 1.5px rgb(68, 136, 244) solid;
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 14px;
}

/* 본문 텍스트 영역 */
.write-table textarea {
  height: 200px;
  resize: none;
}

/* 버튼 행 */
.write-btn-row {
  text-align: left;
  padding-top: 10px;
}

/* 등록/목록 버튼 */
.write-btn-row input[type="submit"],
.write-btn-row button {
  width: 100px;
  height: 40px;
  font-size: 15px;
  border: 0;
  outline: 1.5px rgb(68, 136, 244) solid;
  border-radius: 5px;
  background-color: rgb(164, 199, 255);
  margin-right: 8px;
  cursor: pointer;
}

.write-btn-row input[type="submit"]:active,
.write-btn-row button:active {
  outline: 1.5px rgb(27, 76, 155) solid;
  background-color: rgb(68, 136, 244);
}

/* =========================
   3. 게시글 보기 페이지 (post.html)
   ========================= */

/* 전체 게시글 박스 */
.post-box {
  width: 85%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 24px 32px 40px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-sizing: border-box;
}

/* 박스 안 요소들을 100%로 맞추기 */
.post-box .view-table,
.post-box .comment-list,
.post-box .comment-form,
.post-box .view-buttons,
.post-box .post-stats,
.post-box .comment-title {
  width: 80%;
  max-width: 900px;
  margin: 0 auto 16px;
}

/* 게시글 내용 테이블 기본 스타일 */
.view-table {
  border-collapse: collapse;
  border: 1px solid #ddd;
}

/* 셀 스타일 */
.view-table td {
  border: 1px solid #ddd;
  padding: 8px 10px;
  vertical-align: top;
}

/* 왼쪽 헤더 열 */
.view-header {
  width: 120px;
  background-color: #f5f5f5;
  font-weight: bold;
}

/* 게시글 제목 행 */
/* 제목 */
.view-title {
  font-size: 18px;
  font-weight: 600;
}

/* 작성자 */
.view-writer {
  font-weight: 500;
}

/* 날짜 */
.view-date {
  color: #777;
  font-size: 13px;
  margin-left: 6px;
}

/* 조회수 */
.view-views {
  margin-left: 6px;
  color: #777;
  font-size: 13px;
}

/* 내용 */
.view-content pre {
  margin: 0;
  white-space: pre-wrap; /* 줄바꿈 유지 + 자동 줄바꿈 */
}

/* 목록으로 버튼 영역 */
.view-buttons {
  text-align: right;
}

/* 댓글 위쪽: 댓글 수 / 좋아요 버튼 / 좋아요 수 */
.post-box .post-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #555;
  margin-top: 10px;
}

.post-stats .stat-item {
  white-space: nowrap;
}

/* 좋아요 버튼 */
.like-btn {
  margin: 0 4px;
  padding: 4px 12px;
  border-radius: 16px;
  border: 1px solid #ffcccc;
  background-color: #ffe6e6;
  cursor: pointer;
}

/* 댓글 제목 */
.comment-title {
  font-size: 16px;
  font-weight: bold;
}

/* 댓글 리스트 */
.comment-list {
  list-style: none;
  padding-left: 0;
}

.comment-list li {
  border-bottom: 1px solid #eee;
  padding: 6px 2px;
}

/* 댓글 헤더(작성자/날짜) */
.comment-head {
  font-size: 13px;
  color: #555;
}

.comment-writer {
  font-weight: 500;
}

.comment-date {
  margin-left: 8px;
  color: #999;
  font-size: 12px;
}

/* 댓글 본문 */
.comment-body {
  font-size: 14px;
  margin-top: 2px;
}

/* 댓글 작성 폼 */
.comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
}