/* ===== OHAYO! 게시판 — 목록 / 글쓰기 / 보기 ===== */

/* ---------- 목록 ---------- */
.bl-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 0 12px; border-bottom: 2px solid var(--text);
}
.bl-name { font-size: 1.05rem; font-weight: 800; }
.bl-total { font-size: 0.8rem; color: var(--text-soft); }
.bl-write {
  margin-left: auto; padding: 8px 18px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 0.85rem; font-weight: 700;
  text-decoration: none;
}
.bl-write:hover { background: var(--accent-deep); }

.bl-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.bl-table thead th {
  padding: 10px 6px; border-bottom: 1px solid var(--line);
  font-size: 0.78rem; font-weight: 700; color: var(--text-soft);
}
.bl-row td { padding: 11px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bl-row:hover { background: var(--panel); }
.bl-c-no   { width: 62px;  text-align: center; color: var(--text-soft); font-size: 0.8rem; }
.bl-c-user { width: 120px; text-align: center; }
.bl-c-date { width: 74px;  text-align: center; color: var(--text-soft); font-size: 0.8rem; }
.bl-c-num  { width: 58px;  text-align: center; color: var(--text-soft); font-size: 0.8rem;
             font-variant-numeric: tabular-nums; }
.bl-c-title { text-align: left; }
.bl-c-title a { color: inherit; text-decoration: none; font-weight: 600; }
.bl-c-title a:hover { text-decoration: underline; }
.bl-cc   { color: var(--accent); font-weight: 700; font-size: 0.8rem; }
.bl-pic  { font-size: 0.66rem; color: #fff; background: var(--text-soft);
           border-radius: 4px; padding: 1px 4px; vertical-align: 1px; }
.bl-rate { font-size: 0.74rem; color: var(--accent-deep); font-weight: 700; }
.bl-row-notice .bl-c-title a { font-weight: 800; }
.bl-empty { padding: 46px 0; text-align: center; color: var(--text-soft); }
.bl-pager { display: flex; justify-content: center; margin-top: 18px; }
.bl-more {
  padding: 10px 26px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); cursor: pointer; font: inherit; font-size: 0.85rem;
}
.bl-more:hover { border-color: var(--accent); color: var(--accent-deep); }

/* 좁은 화면 — 표를 접어서 목록으로 만든다
 *
 *   폭 400px 안에 여섯 칸을 넣으면 제목 칸이 60px 남짓으로 줄어
 *   제목이 한 글자씩 세로로 쌓인다. 표를 유지할 폭이 아니다.
 *   그래서 각 줄을 '제목 한 줄 + 잔글씨 정보 한 줄' 로 접는다.
 *   마크업은 그대로 두고 CSS 로만 접으므로 넓은 화면은 안 건드린다. */
@media (max-width: 700px) {
  .bl-table, .bl-table tbody, .bl-row, .bl-row td { display: block; }
  .bl-table thead { display: none; }
  .bl-table { font-size: 0.9rem; }

  .bl-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0 5px; padding: 11px 2px 10px;
    border-bottom: 1px solid var(--line);
  }
  .bl-row td { padding: 0; border: 0; }

  /* 글 번호는 뺀다. 다만 '고정' 표는 제목 앞에 남긴다.
   * .bl-row td 로 display 를 준 뒤라 같은 무게로 다시 눌러야 먹는다. */
  .bl-row td.bl-c-no { display: none; }
  .bl-row-pinned td.bl-c-no { display: block; order: 0; flex: 0 0 auto; margin-right: 2px; }

  /* 1행 — 제목. 두 줄까지 보이고 넘치면 말줄임.
   * 자르기는 칸에 걸고 링크는 inline 으로 둔다. 링크를 블록으로 만들면
   * 뒤에 붙는 [댓글수]·IMG·점수가 다음 줄로 떨어진다. */
  .bl-row td.bl-c-title {
    order: 1; flex: 1 1 auto; width: 100%; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.45;
  }
  /* '고정' 표와 제목을 같은 줄에 둔다. 제목 폭에서 표 자리만큼 뺀다.
   * basis 를 0 으로 두면 잔글씨 칸까지 같은 줄로 올라와 제목이 뭉갠다. */
  .bl-row-pinned td.bl-c-title { width: calc(100% - 58px); }
  .bl-c-title a { display: inline; }

  /* 2행 — 글쓴이 · 날짜 · 조회 · 추천 */
  .bl-c-user, .bl-c-date, .bl-c-num {
    width: auto; text-align: left; font-size: 0.76rem;
    color: var(--text-soft); margin-top: 5px;
  }
  .bl-c-user { order: 2; display: flex; align-items: center; gap: 3px; }
  .bl-c-date { order: 3; }
  .bl-c-num  { display: block; }
  .bl-c-user::after, .bl-c-date::after, .bl-row td:nth-child(5)::after {
    content: '·'; margin-left: 5px; color: var(--line);
  }
  .bl-row td:nth-child(5) { order: 4; }
  .bl-row td:nth-child(5)::before { content: '조회 '; }
  .bl-row td:nth-child(6) { order: 5; }
  .bl-row td:nth-child(6)::before { content: '추천 '; }
  .bl-row td:nth-child(6) { color: var(--accent-deep); font-weight: 700; }

  .bl-cc { margin-left: 2px; }
  .bl-empty { display: block; padding: 40px 0; }
}

/* ---------- 글쓰기 ---------- */
.bw-wrap { max-width: 900px; margin: 0 auto; }
.bw-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px; border-bottom: 2px solid var(--text); margin-bottom: 18px;
}
.bw-board { font-size: 1.05rem; font-weight: 800; }
.bw-head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bw-cancel { font-size: 0.85rem; color: var(--text-soft); text-decoration: none; }
.bw-cancel:hover { color: var(--text); }
.bw-submit, .bv-submit {
  padding: 9px 22px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font: inherit; font-size: 0.86rem; font-weight: 700;
  cursor: pointer;
}
.bw-submit:hover, .bv-submit:hover { background: var(--accent-deep); }
.bw-submit:disabled, .bv-submit:disabled { opacity: 0.55; cursor: default; }

.bw-title {
  width: 100%; padding: 14px 4px; margin-bottom: 12px;
  border: 0; border-bottom: 1px solid var(--line); background: transparent;
  font: inherit; font-size: 1.6rem; font-weight: 800;
}
.bw-title:focus { outline: none; border-bottom-color: var(--accent); }
.bw-title::placeholder { color: #c9c9d4; }

.bw-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.bw-input {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); font: inherit; font-size: 0.9rem;
}
.bw-row .bw-input { flex: 1 1 200px; }
.bw-select { flex: 0 0 150px; }
.bw-textarea { width: 100%; min-height: 380px; resize: vertical; line-height: 1.8; }
.bw-hint { margin: 14px 0 0; font-size: 0.78rem; color: var(--text-soft); }
.bw-msg { margin: 12px 0 0; font-size: 0.86rem; font-weight: 600; }
.bw-msg-err { color: #b02020; }

/* ---------- 보기 ---------- */
.bv-wrap { max-width: 900px; margin: 0 auto; }
.bv-top { padding-bottom: 10px; }
.bv-board {
  font-size: 0.82rem; font-weight: 700; color: var(--accent-deep); text-decoration: none;
}
.bv-title {
  margin: 0 0 12px; font-size: 1.7rem; line-height: 1.35; font-weight: 800;
  padding-bottom: 14px; border-bottom: 2px solid var(--text);
}
.bv-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0 14px; border-bottom: 1px solid var(--line);
  font-size: 0.8rem; color: var(--text-soft);
}
.bv-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.bv-author { font-weight: 700; color: var(--text); }
.bv-meta-right { margin-left: auto; display: flex; gap: 8px; }
.bv-mini {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.78rem; color: var(--text-soft); text-decoration: underline;
}
.bv-mini:hover { color: var(--text); }
.bv-mini-del:hover { color: #b02020; }

.bv-anime {
  margin: 14px 0 0; padding: 10px 14px; border-radius: 10px;
  background: var(--panel); font-size: 0.86rem;
}
.bv-rating { color: var(--accent-deep); font-weight: 800; }
.bv-body { padding: 22px 0 30px; min-height: 160px; line-height: 1.85; }
.bv-body img { max-width: 100%; height: auto; border-radius: 10px; }

.bv-like-wrap { display: flex; justify-content: center; padding: 8px 0 26px; }
.bv-like {
  padding: 12px 34px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); cursor: pointer; font: inherit; font-size: 0.92rem; font-weight: 700;
}
.bv-like:hover { border-color: var(--accent); color: var(--accent-deep); }
.bv-like.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.bv-namecard { margin-bottom: 28px; }

/* ---------- 댓글 ---------- */
.bv-comments { border-top: 1px solid var(--line); padding-top: 22px; }
.bv-c-title { margin: 0 0 14px; font-size: 1rem; font-weight: 800; }
.bv-c-title span { color: var(--accent); }
.bv-c-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.bv-c-head { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-soft); }
.bv-c-head b { color: var(--text); font-size: 0.86rem; }
.bv-c-grade {
  font-size: 0.7rem; padding: 1px 7px; border-radius: 999px;
  background: var(--panel); font-weight: 700;
}
.bv-c-right { margin-left: auto; display: flex; gap: 8px; }
.bv-c-body { margin: 8px 0 0; font-size: 0.9rem; line-height: 1.7; white-space: pre-wrap; }
.bv-c-form { margin-top: 18px; }
.bv-c-input {
  width: 100%; min-height: 96px; padding: 12px 14px; resize: vertical;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  font: inherit; font-size: 0.9rem; line-height: 1.7;
}
.bv-c-input:focus { outline: none; border-color: var(--accent); }

/* 댓글 입력칸은 textarea 가 아니라 contenteditable 이다 (콘을 그림으로 보여야 해서).
   textarea 가 공짜로 주던 것 — 자리표시 글자, 세로 스크롤, 줄바꿈 — 을 여기서 되살린다. */
.con-input {
  overflow-y: auto; max-height: 260px;
  white-space: pre-wrap; word-break: break-word;
  cursor: text;
}
/* :empty 를 쓰지 않는다 — 한 번 입력했다 지우면 브라우저가 <br> 을 남겨서
   비어 있는데도 :empty 가 안 맞는다. 비었는지는 스크립트가 판정해 표시한다. */
.con-input.is-empty::before {
  content: attr(data-ph);
  color: var(--text-soft);
  pointer-events: none;          /* 자리표시 글자를 눌러도 커서는 칸으로 간다 */
}
/* 입력칸 안의 콘은 조금 작게. 남의 콘처럼 눌러서 바로가기가 뜨면 편집에 방해가 된다 */
.con-input img.ohayo-con { width: 92px; cursor: default; }
.con-input img.ohayo-con:hover { outline: none; }
.bv-c-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.bv-c-count-txt { margin-left: auto; font-size: 0.76rem; color: var(--text-soft); }

.bv-foot { display: flex; justify-content: center; margin: 30px 0 10px; }
.bv-list-btn {
  padding: 10px 30px; border: 1px solid var(--line); border-radius: 999px;
  text-decoration: none; color: inherit; font-size: 0.86rem; font-weight: 600;
}
.bv-list-btn:hover { border-color: var(--accent); color: var(--accent-deep); }

/* 운영자 전용 — 목록 상단 고정 체크 */
.bw-pin {
  display: flex; align-items: center; gap: 9px;
  margin: 12px 0 4px; padding: 10px 13px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  font-size: 0.85rem; color: var(--text-soft); cursor: pointer;
}
.bw-pin input { width: 17px; height: 17px; cursor: pointer; flex: 0 0 auto; }
.bw-pin b { color: var(--text); }

/* 검토 대기 안내 */
.bv-pending {
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: 10px;
  background: #fff6e6;
  color: #8a5a00;
  font-size: 0.85rem;
  line-height: 1.65;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   리뷰 한줄평 (_includes/anime-comments.html)

   게시판 댓글과 생김새를 맞추되, 리뷰 본문 아래에 놓이므로 위쪽에
   구분선을 두어 본문과 떼어 놓는다.
   ───────────────────────────────────────────────────────────── */
.ac {
  max-width: 760px; margin: 40px auto 0; padding-top: 28px;
  border-top: 1px solid var(--line);
}
.ac-title { font-size: 1.02rem; margin: 0 0 6px; }
.ac-title span { color: var(--accent-deep); }
.ac-lead { margin: 0 0 14px; font-size: 0.8rem; color: var(--text-soft); line-height: 1.6; }

.ac-input {
  width: 100%; min-height: 62px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  font: inherit; font-size: 0.9rem; line-height: 1.7;
}
.ac-input:focus { outline: none; border-color: var(--accent); }
.ac-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ac-count-txt { margin-left: auto; font-size: 0.76rem; color: var(--text-soft); }
.ac-count-txt.over { color: var(--accent-deep); font-weight: 700; }

.ac-item { padding: 14px 2px; border-bottom: 1px solid var(--line); }
.ac-item:last-child { border-bottom: 0; }
.ac-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.ac-head b { font-size: 0.86rem; }
.ac-date { font-size: 0.74rem; color: var(--text-soft); }
.ac-head .bv-mini { margin-left: auto; }
.ac-body { margin: 0; font-size: 0.9rem; line-height: 1.75; word-break: break-word; }
.ac-empty { padding: 22px 0; text-align: center; font-size: 0.84rem; color: var(--text-soft); }

@media (max-width: 640px) {
  .ac { margin-top: 30px; padding-top: 22px; }
  .ac-lead { font-size: 0.76rem; }
}