/* css/pages/support-board-order-list.css — 주문제작 문의(BOARD=board2) 목록 전용 보정
 *
 * R5: 반입한 원본 CSS(front.css)는 수정하지 않는다. 이 페이지에서 모자란 것만 여기 보탠다.
 *
 * 담기는 것:
 *   ① 좌측 카테고리 서브 레이어 — 원본 인라인 onmouseover="layer_menu('CA_SUB_MENU','N')"
 *      을 R6 대로 걷어냈으므로(마크업은 data-catlayer 로 보존) 같은 노출을 CSS :hover 로 만든다.
 *   ② 빈 목록(등록된 글 0건) 행 정렬
 *   ③ 반응형 보강(R3) — 원본은 1078px 2단 고정 테이블이라 좁은 화면에서 단일열로 리플로우
 */

/* ------------------------------------------------------------------
 * ① 좌측 카테고리 서브 레이어
 *    원본 요소 인라인 style 의 visibility:hidden 을 캐스케이드로 이긴다.
 *    (원본 동작 = 행에 마우스가 올라가면 그 행의 레이어가 뜬다)
 * ------------------------------------------------------------------ */
/* 원본 요소 인라인 style="visibility:hidden" 은 R5 대로 보존한다.
 * 인라인은 클래스보다 세므로 hover 노출은 !important 로만 이길 수 있다. */
tr[data-catlayer]:hover .ca-sub-menu,
tr[data-catlayer]:focus-within .ca-sub-menu {
  visibility: visible !important;
}

/* ------------------------------------------------------------------
 * ② 빈 목록 행 — 게시글 0건(R13: 원본 실재 화면만, 상세/글쓰기 생성 금지)
 * ------------------------------------------------------------------ */
.board-empty {
  color: #666666;
  text-align: center;
}

/* ------------------------------------------------------------------
 * ③ 반응형 보강 (R3)
 *    원본 본문은 좌 228px 카테고리 + 우 본문의 고정 2단이다.
 *    h8-overlay.css 가 공통 폭 제약을 이미 풀어두었고, 여기서는
 *    이 페이지의 2단 구조만 좁은 화면에서 단일열로 접는다.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 860px) {
  /* 카테고리 레이어는 절대배치라 좁은 화면에서 문서 밖으로 나간다 */
  .ca-sub-menu {
    display: none;
  }

  /* 본문 골격 테이블들의 고정폭(width 속성)을 푼다 —
   * 바깥 래퍼(width=1080)부터 풀어야 한다. 그것이 남아 있으면
   * 안쪽에서 width:100% 를 줘도 1080px 기준으로 되풀려 화면 밖으로 나간다.
   * 훅은 원본 속성(width)으로 잡는다 — 형제 게시판 페이지와 동일 방식(R5v1). */
  #content table[width="1080"],
  #content table[width="1078"],
  #board-list-head,
  #board-search {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }

  /* 좌측 카테고리 컬럼과 분리선을 접고 본문만 단일열로 */
  #content table[width="1078"] > tbody > tr > td[width="228"],
  #content table[width="1078"] > tbody > tr > td[width="1"] {
    display: none;
  }

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

  /* 본문 컬럼 안의 고정폭 테이블(98% 지정 + 자식 td width) 도 함께 유동화 */
  #content table[width="1078"] table {
    max-width: 100%;
  }

  /* 목록 헤더·검색줄의 td 폭 강제를 푼다 */
  #board-list-head td,
  #board-search td {
    width: auto;
  }
}

@media screen and (max-width: 640px) {
  /* 검색 입력 size=80 이 뷰포트를 넘지 않게 */
  #board-search input.sinput {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 목록 헤더 5칸(번호/제 목/작성자/작성일자/조회수)은 모바일에서도 전부 유지한다.
   * 폭 강제만 풀어 좁은 화면에 맞게 눌러 담는다(칸 숨김 금지 — 지시 명세). */
  #board-list-head td {
    font-size: 11px;
    white-space: nowrap;
  }
}

@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; }
}

@media (max-width: 1080px) {
  /* 문의/글쓰기 폼: 폼 테이블을 뷰포트에 맞추고 입력창 전체폭 (2026-08-21) */
  form table, table:has(input.sinput), table:has(textarea) { table-layout: fixed !important; width: 100% !important; }
  input, select, textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
}

/* ------------------------------------------------------------------
 * ④ API 배선(zone board-order) 보강 — 목록/상세 공용
 *    원본 스킨엔 없던 것만 보탠다. 원본 table/td01 규칙은 건드리지 않는다.
 * ------------------------------------------------------------------ */

/* 3상태 안내 문구 — 원본 board-empty 와 같은 톤으로 맞춘다(색만 구분). */
.board-loading {
  color: #666666;
  text-align: center;
}

.board-error {
  color: #cc3333;
  text-align: center;
}

.board-secret {
  color: #666666;
  text-align: center;
  line-height: 2;
}

/* 목록 제목 링크 — 원본 게시판 본문 링크 톤(검정 · 밑줄 없음, hover 시 밑줄) */
[data-board-list] [data-title-link] {
  color: #333333;
  text-decoration: none;
}

[data-board-list] [data-title-link]:hover,
[data-board-list] [data-title-link]:focus {
  text-decoration: underline;
}

/* 댓글 수 — 원본 게시판 관례대로 강조색 소자 */
[data-comment-count] {
  color: #cc3333;
  font-weight: bold;
}

/* 페이저 표시 규칙은 css/front.css 공용 블록으로 승격했다 (2026-08-27 Integrate).
 * 존 3곳(notice/order/catalogue)이 같은 .ec-base-paginate 스타일을 각자 복제하고 있었고,
 * front.css 의 prev.gif 표 숨김 규칙도 :not(:has(.ec-base-paginate)) 로 좁혀 배선 페이저를 살렸다. */
/* 첨부 목록 — 한 줄에 이어 붙되 항목 사이가 붙지 않게 */
.board-file-item {
  margin-right: 10px;
  white-space: nowrap;
}

.board-file-item a {
  color: #333333;
}

/* 댓글 안내문구(.board-comment-notice)는 css/pages/board-read-common.css 로 승격했다
 * (MIG-36600, qna 존과 값이 완전히 동일해 중복이었다) — 여기서 재정의하지 않는다. */

.board-comment-form p {
  margin: 0 0 6px;
}

.board-comment-btn {
  height: 30px;
  padding: 0 14px;
  border: 1px solid #aaaaaa;
  background-color: #ffffff;
  color: #515151;
  font-size: 9pt;
  cursor: pointer;
}

.board-comment-btn:hover {
  background-color: #eeeeee;
}

/* 상세 본문 — 원본 게시판 본문 폭/줄간격. 서식 자체는 editor-content.css 가 입힌다. */
[data-editor-view] {
  min-height: 120px;
  line-height: 1.7;
  word-break: break-word;
}

/* 상세 본문 이미지가 표 폭을 넘지 않게(원본 게시판도 본문폭 제한) */
[data-editor-view] img {
  max-width: 100%;
  height: auto;
}