/* library/board-catalogue-read.html — 카달로그 상세 전용 보정
 *
 * 이 화면은 원본에 없었다(R13 v0.4 예외1 — API 연동으로 몰 게시글이 목록에 노출되는데
 * read 화면이 없어 신설). 레이아웃은 같은 세트의 목록 페이지 CSS 를 그대로 계승한다 —
 * 헤더/좌측 카테고리/1080 고정폭 테이블 골격이 동일하기 때문이다.
 * 아래 "상세 전용" 블록만 이 파일에서 추가된 부분이다.
 */

/* 본문이 비어 있는 동안(로딩·미발견) 테이블 auto 레이아웃이 좌측 카테고리 열(228px)에
 * 남는 폭을 몰아준다. 목록과 같은 비율로 고정한다. (수치는 원본 td 의 width 속성값 그대로) */
@media screen and (min-width: 1081px) {
  #content table[width="1078"] {
    table-layout: fixed;
  }

  #content table[width="1078"] > tbody > tr > td[width="228"] {
    width: 228px;
  }

  #content table[width="1078"] > tbody > tr > td[width="1"] {
    width: 1px;
  }
}

/* ------------------------------------------------------------------
 * 반응형 리플로우 (R3) — 1080 고정폭 2단을 좁은 폭에서 단일열로
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1080px) {
  /* 바깥 고정폭 테이블들을 유동으로 */
  #content table[width="1080"],
  #content table[width="1078"] {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }

  /* 2단 행(좌측 카테고리 + 구분선 + 본문)을 단일열로 스택 */
  #content table[width="1078"] > tbody,
  #content table[width="1078"] > tbody > tr {
    display: block;
    width: 100%;
  }

  #content table[width="1078"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    max-width: 100%;
  }

  /* 좌측 카테고리 열은 원본 폭(228)을 넘지 않게 가운데 정렬 */
  #content table[width="1078"] > tbody > tr > td[width="228"] {
    max-width: 228px;
    margin: 0 auto;
  }

  /* 1px 세로 구분선은 단일열에서 의미가 없다 */
  #content table[width="1078"] > tbody > tr > td[width="1"] {
    display: none;
  }

  /* size="80" 고정폭 검색 입력이 넘친다 */
  .sinput {
    width: 100%;
    box-sizing: border-box;
  }

  /* 게시판 상단 배너(catalogue_top)는 원본 실측 폭이 본문 열보다 넓다 */
  #content img[src$="catalogue_top_20161014174647.jpg"] {
    max-width: 100%;
    height: auto;
  }

  /* 카테고리 hover 레이어(#CA_SUB_MENU)는 visibility:hidden 이어도
   * absolute 폭이 문서 스크롤폭을 늘린다 — 좁은 폭에선 레이아웃에서 뺀다.
   * (원본 hover 레이어는 포인터가 있는 화면 전용 동작) */
  #content [id="CA_SUB_MENU"] {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  /* 목록 헤더의 고정 컬럼폭을 유동으로 (원본 값: 39/540/109/79/59) */
  #content table td[width="39"],
  #content table td[width="540"],
  #content table td[width="109"],
  #content table td[width="79"],
  #content table td[width="59"] {
    width: auto;
  }

  /* '다른 게시판으로 이동' 줄이 좁은 폭에서 넘친다 */
  .grs_admin2 td[width="140"] {
    width: auto;
  }

  .grs_admin2,
  .phone_s {
    max-width: 100%;
  }

  /* 검색 영역 셀렉트/입력 줄바꿈 허용 */
  .tds,
  .phone_k {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  /* 폰: 게시판 리스트 표(5열)가 폭 넘으면 표 안에서 가로 스크롤 → 페이지 넘침 방지 (2026-08-21) */
  table[width="98%"] { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

@media (max-width: 1080px) {
  /* 게시판 입력/미디어 폭 제한 (2026-08-21) */
  input, select, textarea, iframe, embed, object { max-width: 100% !important; box-sizing: border-box; }
  td[width="540"] { width: auto !important; }
}


/* ==================================================================
 * 상세 전용 (board-catalogue-read.html)
 * ================================================================== */

/* 본문 영역 — 서식 자체는 /css/editor-content.css 가 [data-editor-view] 안에서만 살린다.
 * 여기서는 원본 스킨 본문 셀의 글자색/줄간격에만 맞춘다. */
[data-editor-view] {
  color: #515151;
  word-break: break-word;
}

[data-editor-view] img {
  max-width: 100%;
  height: auto;
}

/* 첨부파일 목록 — 원본에 대응 마크업이 없어(상세 화면 자체가 신설) 스킨 톤에 맞춰 최소로 둔다. */
.clg-files {
  margin: 0;
  padding: 0;
  list-style: none;
}

.clg-files li {
  margin: 0 0 8px;
  font-size: 12px;
  color: #515151;
}

.clg-files li:last-child {
  margin-bottom: 0;
}

.clg-files a {
  color: #515151;
  text-decoration: underline;
}

.clg-files a:hover {
  color: #cf180a;
}

/* 이미지 첨부는 인라인 미리보기(티켓: 첨부는 이미지만) */
.clg-files img {
  max-width: 320px;
  height: auto;
  border: 1px solid #ddd;
  margin: 0 0 4px;
}

/* 목록 버튼 — 원본 스킨에 상세용 버튼 이미지가 없어 텍스트 버튼으로 둔다. */
.clg-btn-list {
  display: inline-block;
  min-width: 90px;
  padding: 8px 20px;
  border: 1px solid #666;
  background: #fff;
  color: #333 !important;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.clg-btn-list:hover {
  background: #333;
  color: #fff !important;
}

@media (max-width: 640px) {
  .clg-files img { max-width: 100%; }
}