/* ============================================================
   board.css — 게시판 (notice / qna / data 공용)
   - 목록 + 페이징 (상세·댓글·폼 스타일은 해당 뷰 작업 때 추가)
   - 색상은 _base.css 의 --accent / --accent2 / --soft / --line / --ink
   ============================================================ */

.board-page{ padding:20px 0 48px; }

/* ── 제목 ── */
.board-head h1{
  margin:0;
  font-size:26px;
  letter-spacing:-0.6px;
}
.board-desc{
  margin:4px 0 0;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
}

/* ── 탭 + 글쓰기 (한 줄) ── */
.board-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 0;
  border-bottom:2px solid var(--ink);
  padding-bottom:0;
}
.board-tabs{
  display:flex;
  gap:2px;
}
.board-tabs a{
  padding:9px 16px;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:8px 8px 0 0;
  background:#fafafa;
  color:var(--muted);
  font-size:14px;
  font-weight:800;
}
.board-tabs a:hover{
  background:var(--soft);
  color:var(--accent2);
}
.board-tabs a.is-active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.board-write-btn{ margin-bottom:6px; }   /* 탭 하단선과 간격 */

/* ── 목록 테이블 ── */
.board-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.board-table col.col-num{ width:70px; }
.board-table col.col-writer{ width:120px; }
.board-table col.col-date{ width:110px; }
.board-table col.col-view{ width:70px; }

.board-table th{
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  background:#fafafa;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  text-align:center;
}
.board-table th.th-title{ text-align:left; padding-left:14px; }

.board-table td{
  padding:9px 8px;
  border-bottom:1px solid var(--line);
  text-align:center;
  color:var(--muted);
}
.board-table .td-title{
  text-align:left;
  padding-left:14px;
}

/* 필독 행 배경 */
.board-table tr.is-notice{ background:color-mix(in srgb, var(--soft) 40%, white); }

/* 제목 링크 */
.board-title{
  color:var(--ink);
  font-weight:700;
}
.board-title:hover{ color:var(--accent2); text-decoration:underline; }
.board-title.is-locked{ color:var(--muted); cursor:default; }
.board-table tr.is-notice .board-title{ font-weight:900; }

/* 제목 옆 표식들 */
.board-badge-notice{
  display:inline-block;
  padding:2px 7px;
  border-radius:4px;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.board-badge-new{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  margin-left:4px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:9px;
  font-weight:900;
  vertical-align:2px;
}
.board-clip{ margin-left:4px; font-size:12px; }
.board-mine{ margin-right:2px; font-size:12px; }
.board-reply-count{
  margin-left:4px;
  color:var(--accent2);
  font-size:13px;
  font-weight:800;
}

/* 빈 목록 */
.board-empty{
  padding:56px 0 !important;
  color:var(--muted);
  font-weight:700;
}

/* ── 페이징 ── */
.board-paging{
  display:flex;
  justify-content:center;
  gap:4px;
  margin-top:24px;
}
.pg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:32px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}
a.pg-btn:hover{
  border-color:var(--accent);
  color:var(--accent2);
  background:var(--soft);
}
.pg-btn.is-current{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
  font-weight:900;
}
.pg-btn.is-off{
  background:#fafafa;
  color:#ccc;
  cursor:default;
}

/* ── 모바일 ── */
@media (max-width: 700px){
  /* 작성자·조회 칸 숨김, 날짜만 유지 */
  .board-table col.col-writer,
  .board-table col.col-view{ width:0; }
  .board-table .td-writer,
  .board-table .td-view,
  .board-table th:nth-last-child(1),
  .board-table .td-title + .td-writer{ display:none; }
  .board-table thead{ display:none; }          /* 모바일은 헤더 생략 */
  .board-table col.col-num{ width:52px; }
  .board-table td{ padding:10px 6px; }
  .board-toolbar{ flex-wrap:wrap; }
}

/* ============================================================
   상세 + 댓글
   ============================================================ */

/* ── 글 헤더 ── */
.post-head{
  margin-top:6px;
  padding-bottom:12px;
  border-bottom:2px solid var(--ink);
}
.post-title{
  margin:0 0 8px;
  font-size:22px;
  letter-spacing:-0.5px;
  line-height:1.3;
}
.post-meta{
  display:flex;
  gap:14px;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}

/* ── 첨부파일 ── */
.post-files{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  background:#fafafa;
}
.post-file{
  color:var(--ink);
  font-size:13px;
  font-weight:700;
}
.post-file:hover{ color:var(--accent2); text-decoration:underline; }
.post-file-size{ color:var(--muted); font-weight:600; }

/* ── 본문 ── */
.post-content{
  padding:24px 4px 32px;
  border-bottom:1px solid var(--line);
  font-size:15px;
  line-height:1.8;
  word-break:break-word;
}
.post-content img{ max-width:100%; height:auto; }

/* ── 버튼 줄 ── */
.post-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:14px;
}
.post-actions-own{
  display:flex;
  gap:6px;
}
.post-actions-own form{ margin:0; }
.btn-danger{
  border-color:#d9534f;
  color:#d9534f;
}
.btn-danger:hover{
  background:#d9534f;
  color:#fff;
}

/* ── 댓글 ── */
.reply-section{ margin-top:32px; }
.reply-head{
  margin:0 0 10px;
  font-size:16px;
  font-weight:900;
}
.reply-total{ color:var(--accent2); }

.reply-list{
  border-top:1px solid var(--line);
}
.reply-item{
  padding:12px 4px;
  border-bottom:1px solid var(--line);
}
/* 관리자 답변 강조 */
.reply-item.is-admin{
  background:color-mix(in srgb, var(--soft) 45%, white);
  padding-left:12px;
  padding-right:12px;
}
.reply-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:4px;
  font-size:13px;
}
.reply-meta strong{ color:var(--ink); }
.reply-item.is-admin .reply-meta strong{ color:var(--accent2); }
.reply-meta span{ color:var(--muted); font-weight:600; }
.reply-delete-btn{
  margin-left:auto;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#fff;
  color:var(--muted);
  font-size:12px;
  cursor:pointer;
}
.reply-delete-btn:hover{ border-color:#d9534f; color:#d9534f; }
.reply-content{
  margin:0;
  font-size:14px;
  line-height:1.65;
}
.reply-deleted{
  margin:0;
  color:#bbb;
  font-size:13px;
  font-style:italic;
}
.reply-empty{
  padding:20px 0;
  color:var(--muted);
  font-size:14px;
  text-align:center;
}

/* 댓글 폼 */
.reply-form{
  display:flex;
  gap:8px;
  align-items:stretch;
  margin-top:12px;
}
.reply-form textarea{
  flex:1;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  font:inherit;
  font-size:14px;
  resize:vertical;
}
.reply-form textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.reply-form .btn-sub{
  align-self:flex-end;
  height:auto;
  padding:10px 20px;
}

/* ============================================================
   글쓰기 / 수정 폼
   ============================================================ */
.board-narrow{ max-width:760px; }   /* 폼은 좁게 */

.board-form{ margin-top:16px; }
.board-form .field{ margin-bottom:14px; }
.board-form label{
  display:block;
  margin-bottom:5px;
  font-size:14px;
  font-weight:800;
}
.board-form label .req{ color:#d9534f; }
.board-form label .opt{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}
.board-form input[type="text"],
.board-form input[type="email"],
.board-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  font:inherit;
  font-size:14px;
}
.board-form textarea{ resize:vertical; line-height:1.7; }
.board-form input:focus,
.board-form textarea:focus{
  outline:none;
  border-color:var(--accent);
}

/* 이메일 알림 체크 */
.board-email-check{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
}

/* 첨부 input */
.board-file-input{
  display:block;
  width:100%;
  margin-bottom:6px;
  padding:7px 8px;
  border:1px dashed var(--line);
  border-radius:8px;
  font-size:13px;
  background:#fafafa;
}
.field-help{
  margin:2px 0 0;
  color:var(--muted);
  font-size:12px;
}

/* 버튼 줄 */
.board-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid var(--line);
}

/* 수정폼: 기존 첨부 목록 + 비활성 슬롯 (board_file_manage.js) */
.upload-slot.is-disabled{ opacity:.4; cursor:not-allowed; }
.board-file-list{
  margin:0 0 8px;
  padding:0;
  list-style:none;
}
.board-file-list li{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  margin-bottom:4px;
  font-size:13px;
  background:#fafafa;
}
.board-file-list .file-del{
  margin-left:auto;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#fff;
  color:var(--muted);
  font-size:12px;
  cursor:pointer;
}
.board-file-list .file-del:hover{ border-color:#d9534f; color:#d9534f; }