/* support/board-qna-list.html — 기타문의(Q&A) 목록 페이지 보정
 *
 * 원본 CSS(front.css/mainbanner.css/nv.css)와 원본 마크업을 보존한 위에서
 * ① 좌측 카테고리 레이어(원본 layer_menu 스크립트 대체) 표시 규칙
 * ② 빈 목록 셀 타이포
 * ③ 좁은 화면 리플로우
 * 만 얹는다. */

/* ① 좌측 카테고리 서브 레이어 — 원본은 visibility 인라인 + JS 토글이었다 */
.CA_SUB_MENU {
  visibility: hidden;
}

.CA_SUB_MENU.is-open {
  visibility: visible;
}

/* ② 빈 목록 안내 셀 — 원본 목록 셀(td01)의 타이포를 따른다.
 * border-bottom 은 기준(board-notice-list) 과 맞춘 것 — 행이 있을 때와 마찬가지로
 * 목록 표 하단이 #dddddd 1px 로 닫혀야 한다(로딩/빈목록/에러 공통). */
.board-empty {
  color: #666666;
  font-size: 9pt;
  letter-spacing: 0;
}

/* ③ 좁은 화면 리플로우 — 원본은 1078/228 고정폭 2단 테이블 */
@media screen and (max-width: 1080px) {
  /* 본문 컨테이너 고정폭(1080/1078) 유동화 — 안 풀면 내부 표가 잘린다 */
  table[width="1080"],
  table[width="1078"] {
    width: 100%;
  }

  /* 게시판 목록 헤더/행 테이블의 고정 폭 해제 */
  td[width="540"],
  td[width="228"],
  td[width="110"],
  td[width="109"],
  td[width="100"] {
    width: auto;
  }
}

@media screen and (max-width: 860px) {
  /* 좌측 카테고리 레이어는 좁은 화면에서 화면 밖으로 나간다 */
  .CA_SUB_MENU,
  .CA_SUB_MENU.is-open {
    visibility: hidden;
  }
}

@media screen and (max-width: 760px) {
  /* 좌측 카테고리단 + 본문 2단 → 단일열 */
  td[width="228"],
  td[width="1"][background$="pl_01.gif"] {
    display: none;
  }

  /* 게시판 이동 select / 검색 입력이 넘치지 않게 */
  select.phone_s,
  select.phone_k {
    max-width: 100%;
  }

  input.sinput {
    width: 100%;
    box-sizing: border-box;
  }

  table.grs_admin2 td[width="140"] {
    width: auto;
  }

  /* 목록 헤더/행 테이블이 98% 고정이라 좁은 화면에서 잘린다 */
  table[width="98%"] {
    width: 100%;
  }

  /* 열 폭 고정을 풀어 좁은 화면에서도 5개 열이 모두 들어오게 */
  td[width="39"],
  td[width="79"],
  td[width="59"] {
    width: auto;
  }

  /* 제목 열이 540px 를 붙들고 있어 뒤 열이 밀려난다 */
  td[width="540"] {
    width: 40%;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* 현재위치 네비게이션은 좁은 화면에서 줄여 넘침 방지 */
  td.navi {
    white-space: normal;
    word-break: keep-all;
  }
}

@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) {
  /* qna 검색/글쓰기 폼 유동화 (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 !important; }
}