/* terms.html — 이용약관 전용 보정
 *
 * 원본(U_ET_usestipulation_0001.php)은 width="1080"/"1078" 셸 안에
 * 좌측 카테고리 열(228px) + 본문 열 구조이고, 본문은 width="825" 조항 테이블과
 * width="740" 목차 테이블로 이루어진 고정폭 레이아웃이다.
 * 원본 CSS(front.css)는 그대로 두고, 폭 제약만 푸는 보정을 얹는다(R3/R5).
 */

/* 데스크톱: 좌/우 열 비율을 원본 td width 속성값 그대로 고정한다.
 * (본문 조항 테이블이 825 고정이라 auto 레이아웃이 열 배분을 흔든다) */
@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;
  }

  /* 2단 행(좌측 카테고리 + 구분선 + 본문)을 단일열로 스택 */
  #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;
  }

  /* 1px 세로 구분선은 단일열에서 의미가 없다 */
  #content table[width="1078"] > tbody > tr > td[width="1"] {
    display: none;
  }

  /* 카테고리 hover 레이어(#CA_SUB_MENU)는 visibility:hidden 이어도
   * absolute 폭이 문서 스크롤폭을 늘린다 — 좁은 폭에선 레이아웃에서 뺀다.
   * (원본 hover 레이어는 포인터가 있는 화면 전용 동작) */
  #content [id="CA_SUB_MENU"] {
    display: none;
  }

  /* 본문 조항 테이블(825)과 목차 줄(740)을 유동으로 */
  #content table[width="825"],
  #content table[width="740"] {
    width: 100% !important;
    max-width: 100%;
  }

  /* 목차/조항 헤더 상단의 825 폭 장식 이미지 */
  #content img[width="825"] {
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 640px) {
  /* 목차 2단(제N조 / 제N+1조)을 좁은 폭에선 단일열로 */
  #content table[width="740"],
  #content table[width="740"] > tbody,
  #content table[width="740"] > tbody > tr {
    display: block;
    width: 100%;
  }

  #content table[width="740"] > tbody > tr > td {
    display: block;
    width: auto !important;
    text-align: left;
  }

  /* 목차 항목 앞 아이콘 셀은 인라인으로 붙여 한 줄처럼 보이게 */
  #content table[width="740"] > tbody > tr > td[width="20"] {
    display: inline-block;
    vertical-align: middle;
    width: 20px !important;
  }

  #content table[width="740"] > tbody > tr > td[width="350"] {
    display: inline-block;
    vertical-align: middle;
    width: auto !important;
    max-width: calc(100% - 28px);
  }

  /* 조항 본문 셀 고정 폭 해제 */
  #content table[width="825"] td[width="20"],
  #content table[width="825"] td[width="350"] {
    width: auto;
  }

  /* 안내 문단(F0F0F0 박스)의 고정 padding 셀 */
  #content td[width="20"] {
    width: 20px;
  }
}

/* 이미지가 좁은 폭에서 컨테이너를 넘지 않게 (R3 공통) */
@media screen and (max-width: 1080px) {
  #content img {
    max-width: 100%;
  }

  /* 1px 스페이서/배경 라인 이미지는 max-width 로 찌그러뜨리지 않는다 */
  #content img[width="1"] {
    max-width: none;
  }
}

/* ── 빌더 기본약관 배선 컨테이너 — 인라인 스타일 대체 (2026-08-31) ── */
.ahb-terms { padding: 10px 24px 30px; text-align: left; line-height: 1.7; }
.ahb-terms-state { padding: 24px 0; text-align: center; color: #888; }