/* support/faq-read.html — FAQ 상세(?no=<게시글id>) 전용 보정
 *
 * 원본(U_ET_faqview_0001.php?SID=4)은 width="1080"/"1078"/"98%" 고정 테이블 레이아웃이며
 * 목록(U_ET_faqlist_0001.php)과 좌측 카테고리·고객센터 안내까지 동일한 셸을 쓴다.
 * 원본 CSS(front.css)는 그대로 두고 폭 제약을 푸는 보정만 얹는다(R5 — 재저작 금지).
 */

/* ------------------------------------------------------------------
 * 구분선 두께 — 원본 td height="2" 그대로
 *
 * 원본은 height="2" 셀 안에 1x1 spacer.gif 를 inline 으로 넣어 두께를 만든다.
 * 이 셀의 img 가 inline/baseline 이라 줄상자 descender 만큼 셀이 커진다(2px→15px).
 * 원본 수치(2px)를 유지하도록 이 셀 안 spacer 만 block 으로 떨군다(마크업은 그대로).
 * ------------------------------------------------------------------ */
#content td[height="2"][bgcolor="636870"] {
  height: 2px;
  line-height: 0;
  font-size: 0;
}

#content td[height="2"][bgcolor="636870"] img {
  display: block;
}

/* ------------------------------------------------------------------
 * 좌/우 2단 폭 고정 — 원본 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;
  }

  #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%;
  }

  #content table[width="1078"] > tbody > tr > td[width="228"] {
    max-width: 228px;
    margin: 0 auto;
  }

  #content table[width="1078"] > tbody > tr > td[width="1"] {
    display: none;
  }

  /* 카테고리 hover 레이어는 visibility:hidden 이어도 absolute 폭이
   * 문서 스크롤폭을 늘린다 — 좁은 폭에선 레이아웃에서 뺀다 */
  #content [id="CA_SUB_MENU"] {
    display: none;
  }

  /* 안내문 표(634px 고정) */
  #content table[width="634"] {
    width: 100%;
    max-width: 100%;
  }

  /* 고객센터 안내 박스(510px 고정) */
  #content table[width="510"] {
    width: 100%;
    max-width: 510px;
  }
}

@media screen and (max-width: 640px) {
  /* 질문 표(제목/질문구분 4열)의 고정 컬럼폭을 유동으로
   * (원본 값: 제목 라벨 80 · 질문구분 라벨 70 · 분류값 100) */
  #content table td[width="80"],
  #content table td[width="70"],
  #content table td[width="100"] {
    width: auto;
  }

  /* 고객센터 안내 박스(콜센터 로고 + 상담시간 + 전화번호) 3열은
   * 좁은 폭에서 상담시간 열이 한 글자 폭으로 짜부라진다 — 세로로 쌓는다.
   * (원본은 1080 고정폭 전제라 모바일 대응이 없다 · R3 리플로우 보강) */
  #content table[width="510"] table[width="100%"] td.td01 > table > tbody > tr {
    display: block;
  }

  #content table[width="510"] table[width="100%"] td.td01 > table > tbody > tr > td {
    display: block;
    width: auto !important;
    text-align: center;
    padding: 3px 0;
  }

  #content table[width="510"] table[width="100%"] td.td01 > table img {
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------
 * 첨부/추가정보/태그 목록 — 목록(support-faq.css)과 같은 최소 서식.
 * 상세 페이지는 이 CSS 만 얹히므로 여기에도 둔다.
 * ------------------------------------------------------------------ */
#content .faq-extra {
  margin: 6px 0 0;
}

#content .faq-extra > tbody > tr > td {
  padding: 4px 0;
  vertical-align: top;
}

#content .faq-extra-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#content .faq-extra-list > li {
  margin: 0 0 4px;
  line-height: 1.6;
}

#content .faq-extra-list a {
  text-decoration: underline;
}

#content .faq-extra-tags > li {
  display: inline-block;
  margin: 0 6px 4px 0;
}