/* support/faq.html — 자주묻는질문(FAQ) 전용 보정
 *
 * 원본(U_ET_faqlist_0001.php)은 width="1080"/"1078"/"98%" 고정 테이블 레이아웃이다.
 * 원본 CSS(front.css)는 그대로 두고, 폭 제약을 푸는 보정과
 * 원본 FAQ 상세(U_ET_faqview_0001.php)를 목록에 흡수한 아코디언 표시 규칙만 얹는다.
 */

/* ------------------------------------------------------------------
 * 구분선 두께 — 원본 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;
}

/* ------------------------------------------------------------------
 * 아코디언 — 원본의 목록→상세 페이지 이동을 그 자리 펼침으로 흡수
 *
 * 원본 상세 화면의 '답변' 블록 마크업(but_ic_ask_01.gif 아이콘 + padding:15px/1px #aaaaaa
 * 테두리 셀)을 그대로 목록 행 아래에 두고, 평시 접힘 → 질문 클릭 시 펼침으로 토글한다.
 *
 * (구) :target 배선을 걷어냈다 — 목록이 API 렌더로 바뀌면서 행이 런타임에 생기므로
 * 고정 id 앵커를 쓸 수 없다. js/faq.js 가 [hidden] 을 토글한다.
 * ------------------------------------------------------------------ */
#content table.faq-answer[hidden] {
  display: none;
}

#content td.faq-answer-cell {
  padding: 0 0 10px;
}

#content a.faq-q {
  cursor: pointer;
}

/* ------------------------------------------------------------------
 * 질문구분 필터 — 원본 Q_num 서버 재요청을 category_id 재조회로 대체
 *
 * (구) :target + :has() 필터 규칙 제거. 필터는 이제 서버가 한다(GET posts?category_id).
 * 버튼은 어드민 카테고리를 name 으로 해석해 맞는 것만 보이므로, 남는 일은
 * 선택된 버튼을 원본 오버 상태(but_custom_bg_02)처럼 강조하는 것뿐이다.
 * ------------------------------------------------------------------ */
#content [data-faq-cat] {
  cursor: pointer;
}

#content [data-faq-cat][data-faq-cat-on] {
  font-weight: bold;
  text-decoration: underline;
}

/* 해석 안 된 분류 버튼 셀은 숨긴다(빈 필터로 조용히 0건 만들지 않는다) */
#content [data-faq-cats][hidden],
#content [data-faq-cats] td[hidden] {
  display: none;
}

/* ------------------------------------------------------------------
 * 좌/우 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;
  }

  /* 분류 버튼 표(643px 고정)와 검색 입력(size=60)이 넘친다 */
  #content table[width="643"] {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
  }

  /* 버튼 배경 그래픽(121px 폭)이 늘어난 셀에서 가로 반복하지 않게 */
  #content table[width="643"] table[width="121"] {
    width: 100%;
    max-width: 121px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  #content input[name="key_value"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 안내문 표(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) {
  /* 분류 버튼 5개를 한 줄에 넣으면 글자가 깨진다 — 줄바꿈 허용 */
  #content table[width="643"],
  #content table[width="643"] > tbody,
  #content table[width="643"] > tbody > tr {
    display: block;
    width: 100%;
  }

  #content table[width="643"] > tbody > tr > td[width="25%"] {
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
    vertical-align: top;
    padding: 2px 0;
  }

  /* 분류 버튼은 배경 그래픽(but_custom_bg_01.gif)이 121x38 고정 크기라
   * 늘리면 숫자 배지까지 함께 늘어나 뭉개진다 — 원본 크기 그대로 두고
   * 한 줄에 하나씩 가운데 정렬한다. */
  #content table[width="643"] table[width="121"] {
    width: 121px;
    max-width: 121px;
    margin: 0 auto;
    background-repeat: no-repeat;
  }

  /* 목록 헤더의 고정 컬럼폭을 유동으로 (원본 값: 39/690/99) */
  #content table td[width="39"],
  #content table td[width="690"],
  #content table td[width="99"],
  #content table td[width="100"],
  #content table td[width="40"] {
    width: auto;
  }

  /* 검색 영역 셀렉트/입력 줄바꿈 허용 */
  #content .tds {
    max-width: 100%;
  }

  #content .tds select,
  #content .tds input {
    max-width: 100%;
  }

  /* 고객센터 안내 박스(콜센터 로고 + 상담시간 + 전화번호) 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%;
  }
}

/* ------------------------------------------------------------------
 * 첨부/추가정보/태그 목록 — 원본 FAQ 스킨에 대응 요소가 없어 최소 서식만 준다.
 * (값이 있을 때만 노출되므로 평소 화면은 원본 그대로다)
 * ------------------------------------------------------------------ */
#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;
}