/* product/non-asbestos-sheet.html — 비석면 시트 전용
 *
 * 원본(PASS_CODE=75)은 형제 제품페이지와 같은 1078px 고정폭 2열 테이블이다.
 *   좌 220px = 제품 서브내비(이미지 버튼 11개) · 우 847px = 본문
 * 원본 마크업/인라인 style 은 그대로 보존하고(R5), 여기서는 좁은 화면 리플로우만 만든다(R3).
 * h8-overlay.css 가 이미 table{max-width:100%} / img{max-width:100%;height:auto} 를 깔았으므로
 * 이 파일은 "2열 → 1열" 전환만 담당한다.
 *
 * ⚠ 이 페이지가 형제와 다른 점(원본 실측 — 창작 아님):
 *   · 본문 제목 배너(sub2_1_N.jpg)가 없다 — 원본 첫 td 가 valign="top" 인 빈 셀( )이다.
 *   · 앵커 목차(비석면가스켓/스프링 호스/진공호스) 블록이 원본에서 HTML 주석으로 막혀 있다.
 *     주석은 원본 그대로 보존했으므로 렌더에는 나오지 않는다(#p_2/#p_3 도 그래서 없다).
 *   · 제품 이미지 1장이 안쪽 table 바깥, td[width="847"] 의 직계 자식으로 붙어 있다.
 *     실측 985x690 으로 컬럼 폭(847)보다 넓다 — 데스크톱에서 넘치지 않게 폭을 묶는다.
 */

/* ------------------------------------------------------------------
 * 본문 제품 이미지 — 원본 985x690 이 847 컬럼보다 넓어 가로 넘침을 만든다.
 * 전 뷰포트에서 컬럼 폭에 맞춰 축소(비율 유지는 overlay 의 height:auto 가 담당).
 * ------------------------------------------------------------------ */
#content center > table[width="1078"] td[width="847"] > img {
  display: block;
  width: 100%;
  max-width: 847px;
  height: auto;
}

/* ------------------------------------------------------------------
 * 태블릿 이하 — 최상위 1078 컨테이너 유동화
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1080px) {
  #content center > table[width="1078"] {
    width: 100%;
    max-width: 1078px;
  }

  #content center > table[width="1078"] td[width="847"] {
    width: auto;
  }
}

/* ------------------------------------------------------------------
 * 900px 이하 — 2열 테이블을 1열로 리플로우
 * 원본 <tr align="center"> 안에 좌내비 td(220) / 스페이서 td(14) / 본문 td(847) 3개.
 * td 를 block 으로 돌려 세로로 쌓고 폭 지정을 무력화한다.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 900px) {
  #content center > table[width="1078"],
  #content center > table[width="1078"] > tbody,
  #content center > table[width="1078"] > tbody > tr {
    display: block;
    width: 100%;
  }

  #content center > table[width="1078"] > tbody > tr > td {
    display: block;
    width: auto;
    margin: 0 auto;
  }

  /* 좌우 열 사이 14px 스페이서 td — 1열에서는 세로 여백으로 */
  #content center > table[width="1078"] > tbody > tr > td[width="14"] {
    height: 24px;
    font-size: 0;
    line-height: 0;
  }

  /* 좌측 서브내비: 1열에서는 가운데 정렬한 이미지 버튼 목록 */
  #content center > table[width="1078"] > tbody > tr > td[width="220"] > table {
    margin: 0 auto;
  }

  /* 본문 내부 테이블도 폭을 따라가게 */
  #content center > table[width="1078"] > tbody > tr > td[width="847"] > table {
    width: 100%;
  }
}

/* ------------------------------------------------------------------
 * 모바일 — 섹션 간격 축소
 * ------------------------------------------------------------------ */
@media screen and (max-width: 640px) {
  #content center > table[width="1078"] tr > td[height="50"] {
    height: 26px;
  }
}


/* moved from inline <style> (R6 외부화) */
/* 이미지에 구워져 있던 제품 본문을 시맨틱 마크업으로 옮기면서 필요한 최소 스타일.
   원본 상세 이미지의 톤(포인트색 #59aeef)을 따른다. */
.pspec { text-align: left; color: #333; font-size: 13px; line-height: 1.7; }
.pspec h2 { margin: 0 0 8px; font-size: 26px; letter-spacing: -0.5px; color: #2b2f4a; }
.pspec-brand { display: block; font-size: 22px; color: #8b8b8b; letter-spacing: 0; }
.pspec-name { display: block; }
.pspec-rule { width: 90px; height: 6px; background: #d8d8d8; margin: 0 0 20px; }
.pspec-lead { margin: 0 0 12px; max-width: 800px; }
.pspec h3 { margin: 34px 0 12px; padding-left: 10px; font-size: 15px; color: #2b2f4a;
            border-left: 3px solid #59aeef; }
.pspec-pack { margin: 0; padding: 0; list-style: none; }
.pspec-pack li { padding-left: 10px; text-indent: -10px; }
.pspec-pack li::before { content: "\B7 "; }