/* library/board-catalogue-list.html — 카달로그 목록 전용 보정
 *
 * 원본(U_BP_list_0001.php?BOARD=catalogue)은 width="1080"/"1078"/"98%" 고정 테이블 레이아웃이다.
 * 원본 CSS(front.css)는 그대로 두고, 폭 제약만 푸는 보정을 얹는다.
 */

/* 게시글 0건(협의 미이식)으로 본문 열의 콘텐츠 폭이 사라져,
 * 테이블 auto 레이아웃이 좌측 카테고리 열(228px)에 남는 폭을 몰아준다.
 * 원본(글 1건)에서는 좌측 228 / 구분 1 / 본문 나머지 였다 — 그 비율을 고정한다.
 * (수치는 원본 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; }
}

/* ------------------------------------------------------------------
 * 배선 가산분 (2026-08-27 board-catalogue)
 * ------------------------------------------------------------------ */

/* 페이저 표시 규칙은 css/front.css 공용 블록으로 승격했다 (2026-08-27 Integrate).
 * 존 3곳(notice/order/catalogue)이 같은 .ec-base-paginate 스타일을 각자 복제하고 있었고,
 * front.css 의 prev.gif 표 숨김 규칙도 :not(:has(.ec-base-paginate)) 로 좁혀 배선 페이저를 살렸다.
 * → 이 존의 data-clg-paging 우회도 함께 제거(공통 규칙이 정본). */

/* 3상태(로딩/빈목록/에러) 하단 보더 — 기준(board-notice-list) 과 맞춘다.
 * front.css 의 공용 td.board-empty 는 border 를 주지 않으므로 이 페이지에서 보강한다. */