/* =========================================================
   Board (List & View) – flat, minimal, responsive
   ========================================================= */

/* ---- 기본 컨테이너 & sticky footer ---- */
html, body { height: 100%; }
body { display: flex; min-height: 100vh; flex-direction: column; }
.site-content { flex: 1; }

.container { max-width: 1150px; margin: 0 auto; padding: 0 16px; }

/* ---- 헤더(제목/검색/버튼) ---- */
.board-head { display:flex; align-items:center; justify-content:space-between; margin: 8px 0 16px; }
.board-head h2 { margin:0; font-size:28px; font-weight:800; letter-spacing:-0.02em; color:#111; }
.board-head-right { display:flex; align-items:center; gap:12px; }

/* 검색 인풋 (플랫) */
.input-search { position:relative; }
.input-search input{
  width:320px; max-width: 70vw;
  padding:12px 44px 12px 14px;
  border:1px solid #e6e7ea; border-radius:12px;
  background:#fff; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.input-search input::placeholder{ color:#a8acb3; }
.input-search input:focus{
  border-color:#e51e26;
  box-shadow:0 0 0 4px rgba(229,30,38,.08);
}
.input-search button{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:1px solid #e6e7ea;
  background:#fff; border-radius:10px; cursor:pointer;
}
.input-search button::before{
  content:""; display:block; width:18px; height:18px; margin:0 auto;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="%23000" d="m21.53 20.47l-3.66-3.66A8.5 8.5 0 1 0 18 19.5l3.66 3.66zM10.5 17a6.5 6.5 0 1 1 0-13a6.5 6.5 0 0 1 0 13"/></svg>') no-repeat center/contain;
  background:#6b7280;
}

/* 공통 버튼 */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:12px; font-weight:700; cursor:pointer;
  border:1px solid #e6e7ea; background:#fff; color:#111;
  transition:box-shadow .2s, transform .02s, border-color .2s, background .2s;
  text-decoration:none;
}
.btn:hover{ box-shadow:0 6px 18px rgba(0,0,0,.06); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:#e51e26; color:#fff; border-color:#e51e26; }
.btn-primary:hover{ box-shadow:0 8px 20px rgba(229,30,38,.25); }
.btn-danger{ background:#ef4444; color:#fff; border-color:#ef4444; }
.btn-line{ background:#fff; color:#111; border-color:#dcdfe5; }
.btn-line:hover{ background:#f7f7f8; }

/* =========================================================
   목록(List) – Flat table (데스크톱), 간결한 카드형(모바일)
   ========================================================= */

/* 감싸는 박스는 투명 – 라인만 보이게 */
.board-table-wrap { background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; }

/* === Board list – 균일 정렬/폭 고정 === */
.board-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;           /* 중요: 각 col 폭을 고정 */
  font-size:15px;
  color:#111;
}

.board-table th,
.board-table td{
  padding:16px 12px;
  border-bottom:1px solid #f0f1f4;
  text-align:center;            /* 기본 가운데 */
  vertical-align:middle;
  white-space:nowrap;           /* 줄바꿈 방지 */
  overflow:hidden;              /* 말줄임 */
  text-overflow:ellipsis;
}

/* 제목만 좌측 정렬 */
.board-table th.t-title,
.board-table td.title{ text-align:left; }

/* 링크 스타일 */
.board-table td.title a{ color:#111; text-decoration:none; }
.board-table td.title a:hover{ color:#e51e26; }

/* Hover */
.board-table tbody tr:hover{ background:#fafafa; }

/* colgroup 폭 정의 */
.board-table col.col-check{ width:48px; }
.board-table col.col-no{    width:72px; }
.board-table col.col-title{ width:auto; }     /* 가변 */
.board-table col.col-author{width:140px; }
.board-table col.col-date{  width:150px; }
.board-table col.col-views{ width:90px;  }

/* 숫자/날짜칸 폰트 컬러 살짝 톤다운 */
.board-table .num,
.board-table .views,
.board-table .date{ color:#666; }

/* ---------- 모바일(<=768px) : 테이블 → 간단 카드 ---------- */
/* ---------- 모바일(<=768px) : 테이블 → 블록 카드형 완전 전환 ---------- */
@media (max-width: 768px){
  /* 테이블 레이아웃 영향 제거 */
  .board-table { 
    display:block;
    width:100%;
    border-collapse:separate;   /* fixed 영향 제거 */
    table-layout:auto;          /* fixed → auto */
  }
  .board-table colgroup { display:none; }
  .board-table thead { display:none; }
  .board-table tbody { display:block; }

  /* 행/셀을 블록으로, 가로쓰기 강제 */
  .board-table tbody tr{
    display:block;
    padding:12px 0;
    border-bottom:1px solid #f0f1f4;
    writing-mode: horizontal-tb;
  }
  .board-table tbody td{
    display:block;
    width:100% !important;      /* 좁아지는 것 방지(컬럼 폭 상속 차단) */
    padding:4px 0;
    border:0;
    white-space:normal;
    word-break:break-word;
    writing-mode: horizontal-tb;
  }

  /* 제목 */
  .board-table tbody td.title{
    font-size:16px;
    font-weight:700;
    margin-bottom:6px;
  }

  /* 메타(작성자/날짜/조회수) 한 줄 정렬 */
  .board-table tbody td.author,
  .board-table tbody td.date,
  .board-table tbody td.views{
    display:inline;             /* inline 으로 옆으로 붙음 */
    margin-right:12px;
    font-size:13px;
    color:#666;
  }

  /* 체크박스/No 컬럼은 숨김 (있다면) */
  .board-table tbody td:nth-child(1),   /* 체크박스 */
  .board-table tbody td:nth-child(2){   /* No */
    display:none !important;
  }

  /* 상단 헤더 영역 정렬 */
  .board-head{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  .input-search input{ width:100%; max-width:100%; }
}


/* 뷰 모바일 */
@media (max-width:720px){
  .bv-title{ font-size:22px; margin-top:20px; }
  .bv-meta{ font-size:13px; gap:8px; flex-wrap:wrap; }
  .bv-btns{ gap:6px; }
}

/* 게시판 공통 여백 */
.board-wrap,
.board-view,
.site-content {
  padding-top: 40px;    /* 상단 여백 */
  padding-bottom: 60px; /* 하단 여백 */
}

.table th,
.table td {
  text-align: center;     /* 가운데 정렬 */
  vertical-align: middle; /* 세로 중앙 정렬 */
}

.table td:nth-child(3) { /* 제목만 왼쪽 정렬 */
  text-align: left;
}