/* email-rejection.html — 이메일 무단수집거부 전용 보정
 *
 * 원본(U_ET_emailrejection_0001.php)은 width="1080"/"1078"/"95%" 고정 테이블 레이아웃이다.
 * 원본 CSS(front.css)는 그대로 두고, 폭 제약만 푸는 보정을 얹는다.
 */

/* 본문 텍스트 한 덩어리라 테이블 auto 레이아웃이 좌측 카테고리 열(228px)에
 * 남는 폭을 몰아준다 — 원본 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 레이어(#CA_SUB_MENU)는 visibility:hidden 이어도
   * absolute 폭이 문서 스크롤폭을 늘린다 — 좁은 폭에선 레이아웃에서 뺀다. */
  #content [id="CA_SUB_MENU"] {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  /* 서브 타이틀 바의 'ȩ > ...' 내비 문구가 좁은 폭에서 넘친다 */
  #content table[background$="sbt_bg_01.gif"] td.navi {
    white-space: normal;
    word-break: keep-all;
  }

  #content table[background$="sbt_bg_01.gif"] td[width="200"] {
    width: auto;
  }

  /* 본문 안내 표: 아이콘 셀(120) + 텍스트 셀 2단 → 단일열 스택 */
  #content table[width="95%"] > tbody > tr > td[width="120"] {
    display: block;
    width: 100%;
    text-align: center;
  }

  #content table[width="95%"] > tbody > tr > td[width="120"] + td {
    display: block;
    width: 100%;
  }

  #content table[width="95%"] img {
    max-width: 100%;
    height: auto;
  }
}