/* css/pages/board-read-common.css — 게시판 상세(read) 5페이지 공통 스킨 (MIG-36600, 고객 지시 9/9)
 *
 * 대상: support/board-notice-read.html · support/board-order-read.html · support/board-qna-read.html ·
 *       library/board-report-read.html · library/board-catalogue-read.html
 *
 * 목적: 5페이지가 각자 인라인 bgcolor/style 로 복제하던 상세 스킨(상단 보더·라벨 셀·행 구분선·
 * 본문 컨테이너·댓글)을 클래스 하나의 정의로 수렴시킨다 — 값을 바꾸면 여기 한 곳만 고치면 된다.
 *
 * 기준(SSOT)은 공지사항 상세(board-notice-read.html)의 현재 실측값이다. board-read-content 의
 * padding:0 은 원본 인라인 style="padding:15"(단위 없음 → 표준모드에서 무효 선언 → 계산값 0px)를
 * 그대로 승격한 값이다 — "여백 축소"가 아니라 공지가 이미 그렇게 보이고 있던 값의 고정이다.
 * 로드 순서: page_css1(이 파일) → page_css2(페이지 전용 CSS) → page_css3/4(editor-content.css 등).
 * 페이지 전용 CSS가 이 파일보다 뒤에 로드되므로, 필요하면 페이지 전용 규칙이 여기 값을 덮을 수 있다.
 */

/* ------------------------------------------------------------------
 * 상단 흑 보더 — <td colspan="2" width="98%" height="2" bgcolor="#000000">
 * ------------------------------------------------------------------ */
.board-read-top {
  background-color: #000000;
}

/* ------------------------------------------------------------------
 * 행 구분선 — <td colspan="2" width="98%" height="1" bgcolor="#dddddd">
 * ------------------------------------------------------------------ */
.board-read-divider {
  background-color: #dddddd;
}

/* 블록 닫는 굵은 구분선 — <td colspan="2" width="98%" height="1" bgcolor="#aaaaaa"> */
.board-read-bottom {
  background-color: #aaaaaa;
}

/* ------------------------------------------------------------------
 * 라벨 셀 — 작성자/제 목/태그/추가정보/첨부파일 (다크 톤, 80px)
 * ------------------------------------------------------------------ */
.board-read-label {
  background-color: #767a82;
  color: #ffffff;
  font-weight: bold;
}

/* ------------------------------------------------------------------
 * 본문 컨테이너 — 공지 기준(padding:0, 원본 인라인 padding:15 의 실측 계산값)
 * ------------------------------------------------------------------ */
.board-read-content {
  padding: 15px 10px;
  line-height: 1.6;
  word-break: break-all;
}

.board-read-content img {
  max-width: 100%;
  height: auto;
}

.board-read-content table {
  border-collapse: collapse;
  max-width: 100%;
}

.board-read-content table td,
.board-read-content table th {
  border: 1px solid #dddddd;
  padding: 6px 8px;
}

/* ------------------------------------------------------------------
 * 댓글 — qna-read.css ⑤ 계열을 흡수(order/qna 공용). notice 는 구조가 달라(예전 방식
 * 라벨 없는 인라인 구분선) 이 클래스들을 쓰지 않는다 — 건드리지 않는다(픽셀 무결성).
 * ------------------------------------------------------------------ */
.board-comment-notice {
  margin: 10px 0 6px;
  font-size: 9pt;
  color: #666666;
}

.board-comment-reply {
  background-color: #fafafa;
}

.board-comment-reply > td {
  padding-left: 26px !important;
}

.board-comment-reply-mark {
  margin-right: 4px;
  color: #999999;
}

.board-comment-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background-color: #f0f0f0;
  border: 1px solid #dddddd;
  font-size: 8pt;
  color: #666666;
}

.board-comment-more {
  display: block;
  margin-top: 4px;
  font-size: 8pt;
  color: #999999;
}

/* ------------------------------------------------------------------
 * 반응형 — 상세 공통분만. 셸(1080/1078 2단→단일열)은 페이지별 목록 CSS 가 이미 처리한다.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 760px) {
  /* 라벨 셀의 80px 고정폭이 좁은 화면에서 값 칸을 과도하게 밀지 않게 */
  .board-read-label[width="80"] {
    width: 56px;
  }
}

/* 댓글 헤더 — 공지 상세의 굵은 헤더 행과 같은 무게감 (고객 QA 9/9) */
.board-comment-head { margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid #dddddd; font-weight: bold; }
.board-comment-head [data-comment-count] { color: #767a82; }