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

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

/* ------------------------------------------------------------------
 * ② 반응형 보강 (R3)
 *    좌측 LNB 셸은 공용 .page-2col/.page-side 패턴(front.css)으로 전환됐고,
 *    그 반응형 브레이크포인트가 2단→단일열 리플로우를 이미 처리한다.
 *    여기서는 #custom-body(우측 콘텐츠) 안쪽 고정폭 테이블만 유동화한다.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 860px) {
  /* 카테고리 레이어는 절대배치라 좁은 화면에서 문서 밖으로 나간다 */
  .ca-sub-menu {
    display: none;
  }

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

@media screen and (max-width: 640px) {
  /* 상담안내 박스 — 원본은 전화이미지/시간/번호 3칸 한 줄 고정폭이라
   * 모바일에서 눌리므로 세로로 쌓는다(칸 숨김 없음 — 정보 전부 유지). */
  #custom-body .custom-tel-row,
  #custom-body .custom-tel-row > tbody > tr,
  #custom-body .custom-tel-row > tbody > tr > td {
    display: block;
    width: 100% !important;
    text-align: left;
  }

  #custom-body .custom-tel-row > tbody > tr > td {
    padding-bottom: 6px;
  }

  /* NOTICE / FAQ 2단 — 좁은 화면에서 위아래로 */
  #custom-body .custom-panels,
  #custom-body .custom-panels > tbody > tr,
  #custom-body .custom-panels > tbody > tr > td {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  #custom-body .custom-panels > tbody > tr > td {
    padding-bottom: 14px;
  }
}

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

/* ------------------------------------------------------------------
 * ③ 주문제작 문의 접수 폼 (h10 wire: inquiry-custom-order)
 *    원본에 폼이 없어 신설한 섹션. 마크업은 board-qna-write.html 의 레거시
 *    table 폼을 계승했으므로 front.css 의 .td01 등이 이미 먹는다.
 *    여기서는 그 스킨이 다루지 않는 것만 보탠다 —
 *    필수 표시 / 필수누락 강조 / 약관 본문(서버 sanitize HTML) 박스.
 * ------------------------------------------------------------------ */
[data-inquiry-root] [data-required-mark] {
  color: #d33;
  margin-left: 2px;
}

/* 필수 누락 강조 — 서버 params.missing_fields 및 클라이언트 선검증이 켠다 */
[data-inquiry-root] .inq-field.is-invalid input,
[data-inquiry-root] .inq-field.is-invalid select,
[data-inquiry-root] .inq-field.is-invalid textarea {
  border: 1px solid #d33 !important;
  background-color: #fff7f7 !important;
}

[data-inquiry-root] [data-form-message] {
  color: #d33;
}

/* 약관 본문 — 어드민이 등록한 HTML 이라 길이를 예측할 수 없다.
   원본 폼 폭 안에 가두고 넘치면 스크롤(레이아웃 밀림 방지). */
[data-inquiry-root] .inq-term-body {
  margin-top: 8px;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid #d9d9d9;
  background: #fafafa;
  padding: 10px;
  line-height: 1.6;
}

[data-inquiry-root] .inq-term-body p {
  margin: 0 0 8px;
}

[data-inquiry-root] [data-inquiry-submit][aria-disabled="true"] {
  opacity: .5;
  cursor: default;
}


/* 고객센터 사이드 패널(NOTICE/FAQ) 제목 한 줄 말줄임 */
td.lrlist01 > a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}