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

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

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

/* ② 본문 입력 — 원본은 CKEditor 가 textarea 를 감추고 리치 에디터를 얹었다.
 *    CKEditor 는 저장 백엔드가 없어 미반입(R18 죽은 코드)이므로 소재 textarea 를 그대로 노출한다. */
textarea.ckeditor {
  display: block;
  width: 100%;
  min-height: 320px;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #d9d9d9;
  background-color: #ffffff;
  font-family: "Apple SD Gothic Neo",'nanumR',"Nanum Gothic",Malgun Gothic,"맑은 고딕",Dotum,"돋움", sans-serif;
  font-size: 9pt;
  line-height: 1.6;
  color: #515151;
  resize: vertical;
}

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

  td[width="228"],
  td[width="200"] {
    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;
  }

  /* 폼 표가 98% 고정이라 좁은 화면에서 잘린다 */
  table[width="98%"] {
    width: 100%;
  }

  /* 항목 라벨/구분선 열 — table-layout:fixed 아래서 균등분배되지 않도록
   * 라벨은 좁게 묶고 남는 폭을 입력 열이 가져가게 한다 */
  td[width="14"] {
    width: 14px;
  }

  td[width="73"] {
    width: 62px;
    padding-left: 2px;
  }

  td[width="20"] {
    width: 8px;
  }

  /* 폼 표는 고정 레이아웃으로 — 원본 size 속성(size="80" 등)이 만드는
   * 최소 콘텐츠 폭 때문에 width:100% 만으로는 표가 줄지 않는다 */
  table[width="98%"],
  table[width="98%"] table {
    table-layout: fixed;
  }

  /* 입력 요소가 셀 밖으로 넘치지 않게 — size 속성 폭을 무력화한다 */
  input[type="text"],
  input[type="password"],
  textarea.ckeditor {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  select.phone_k,
  select.phone_s {
    max-width: 100%;
    margin-bottom: 4px;
  }

  /* 닉네임/제목 행의 색상·크기·체크박스가 한 줄에 다 못 들어온다 */
  span.check {
    display: inline-block;
    margin-right: 6px;
  }

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

  table.td01 td,
  table[width="98%"] td {
    font-size: 8pt;
  }
}

@media screen and (max-width: 460px) {
  /* 자동등록방지 이미지 + 입력 + 안내문구가 390px 를 넘긴다 */
  td.td01 img[align="absmiddle"] {
    max-width: 100%;
  }

  input[name="PROTECT_PASSWD"],
  input[name="PASSWD"] {
    width: 60%;
  }
}

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

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

/* ④ 제출 오류 안내 — 배선(js/board-qna.js)이 서버 검증 실패를 여기 적는다.
 *    값이 없으면 hidden 이라 원본 화면과 동일하다. */
.board-write-error {
  margin: 0 0 8px;
  color: #cc0000;
  font-size: 9pt;
  text-align: center;
}