/* ====== Board Common (공지/자유/질문 등 공통 톤) ====== */

/* 폭 고정 컨테이너 */
.container-narrow { max-width:1000px; margin:0 auto; }

/* ===== 기본 텍스트 정렬 ===== */
/* 기본은 왼쪽, 테이블은 중앙 */
body, .container, .container-narrow { text-align:left; }
table.board-list th, table.board-list td { text-align:center; }

/* 상세 상단 */
.post-head h1 { text-align:left; }
.post-head .meta {
  display:flex; justify-content:flex-end;
  align-items:center; gap:8px; flex-wrap:wrap;
  color:#6b7280; font-size:0.95rem;
  text-align:right;
}
.post-head .meta span { white-space:nowrap; line-height:1.2; }
.post-head .meta .sep { color:#9ca3af; }
.badge {
  display:inline-block; background:#eef2ff; color:#4f46e5;
  padding:2px 8px; border-radius:999px; font-size:12px; margin-left:8px;
}

/* 리스트 테이블 공통 */
table.board-list {
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;
}
table.board-list thead tr { background:#f3f4f6; }
table.board-list th, table.board-list td {
  vertical-align:middle;
  line-height:1.2;
  padding:8px;
  border-bottom:1px solid #f1f5f9;
  white-space:nowrap;
}
table.board-list td:nth-child(2) { white-space:normal; } /* 제목은 줄바꿈 허용 */

/* 상세 본문 */
.board-detail-body, .post-body {
  margin:16px 0;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  text-align:left;
}

/* 버튼/액션 */
.actions { display:flex; gap:8px; margin-top:10px; justify-content:center; }
.btn {
  display:inline-block; padding:8px 12px; border:1px solid #e5e7eb;
  border-radius:10px; text-decoration:none; background:#fff; color:#111827;
}
.btn.primary { background:#2563eb; border-color:#2563eb; color:#fff; }
.btn.danger { background:#fee2e2; border-color:#fecaca; }
.c-badge{ color:#2563eb; font-size:0.85rem; margin-left:4px; }

/* 하단 오른쪽 글쓰기 버튼 */
.write-btn-box { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }

/* 글쓰기 폼 */
.board-form {
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px;
}
.form-row {
  display:grid; grid-template-columns:140px 1fr;
  gap:10px 12px; align-items:center; margin-bottom:12px;
}
.form-row-col { align-items:start; }
.form-row label { color:#374151; font-weight:500; }
.form-row .req { color:#ef4444; font-weight:700; margin-left:4px; }
.board-form input[type="text"], .board-form textarea {
  width:100%; box-sizing:border-box; border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; font-size:1rem; background:#fff;
}
.board-form textarea { resize:vertical; min-height:220px; }

/* 댓글 */
.comment-list {
  list-style:none; margin:0; padding:0;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;
}
.comment-item { padding:12px; border-bottom:1px solid #f1f5f9; }
.comment-item:last-child { border-bottom:none; }
.comment-meta { margin-bottom:6px; text-align:right; }
.comment-body { text-align:left; }

/* 반응형 */
@media (max-width:768px) {
  .form-row { grid-template-columns:1fr; }
}

/* 다크모드 */
@media (prefers-color-scheme: dark) {
  table.board-list { border-color:#334155; }
  table.board-list th, table.board-list td { border-bottom-color:#1f2937; }
  .board-detail-body, .post-body { background:#0f172a; border-color:#1f2937; }
  .btn { border-color:#334155; background:#0f172a; color:#e5e7eb; }
  .btn.danger { background:#3b1d1d; border-color:#7f1d1d; }
  .board-form { background:#0f172a; border-color:#1f2937; }
  .board-form input[type="text"], .board-form textarea {
    background:#0f172a; border-color:#334155; color:#e5e7eb;
  }
}

/* 번호 칼럼 */
table.board-list th:nth-child(1),
table.board-list td:nth-child(1),
table.qna-list th:nth-child(1),
table.qna-list td:nth-child(1) { text-align:center; }
table.board-list td.num,
table.qna-list td.num { font-weight:400; }

/* 글쓰기 버튼 물결 */
.write-btn-box a.write-btn,
a.write-btn,
.btn.write-btn {
  display:inline-block;
  background-image:url("/static/images/banners/nav.png");
  background-size:cover;
  background-position:center;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
  transition:filter .15s ease, transform .15s ease;
}
.write-btn-box a.write-btn:hover,
a.write-btn:hover,
.btn.write-btn:hover {
  filter:brightness(1.15);
  transform:translateY(-1px);
}
.write-btn-box a.write-btn:active,
a.write-btn:active,
.btn.write-btn:active {
  filter:brightness(0.9);
  transform:translateY(0);
}
<!-- ✅ 겹침 방지용 여유 공간 -->
<div class="footer-gap" aria-hidden="true"></div>

<style>
  /* ✅ 이 페이지에서만 풋터 하단 고정 */
  .site-footer{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    /* 스타일은 기존 그대로 사용해도 OK */
  }
  /* ✅ 페이지 안에서만 여유공간 확보(본문이 footer에 가리지 않게) */
  .footer-gap{ height: 64px; }  /* ← 풋터 실제 높이에 맞춰 조정 (예: 56~72px) */
</style>