/* product/antistatic-mat.html — 정전기매트 전용
 *
 * 원본(PASS_CODE=74)은 형제 제품페이지와 같은 1078px 고정폭 2열 테이블이다.
 *   좌 220px = 제품 서브내비(이미지 버튼 11개) · 우 847px = 본문
 * 다만 이 페이지의 본문 구성은 형제와 다르다(라이브 1회 실측 원문 기준):
 *   · 형제에 있는 제목 배너(sub2_1_N.jpg)가 없다 — 제품 이미지가 곧 제목을 포함한다
 *   · 앵커 목차 박스가 원본에서 통째로 HTML 주석 처리돼 있다(비활성) → 렌더 대상 아님
 *   · 본문 td 직계로 제품 이미지 1장(antistatic-mat-product.jpg 849x1710)이 놓이고,
 *     그 뒤 내부 테이블에는 스페이서 행과 빈 앵커(#p_1)만 남는다
 * 원본 마크업/인라인 style 은 그대로 보존하고(R5), 여기서는 좁은 화면 리플로우만 만든다(R3).
 * h8-overlay.css 가 이미 table{max-width:100%} / img{max-width:100%;height:auto} 를 깔았으므로
 * 이 파일은 "2열 → 1열" 전환만 담당한다.
 *
 * ⚠ 셀렉터: header 조각이 본문을 div#content 로 감싸므로 body > center 는 매치되지 않는다.
 *   #content center > table[width="1078"] 로 잡는다(silicone-sheet 실사고 기록 반영).
 */

/* ------------------------------------------------------------------
 * 1080 이하 — 최상위 고정폭 컨테이너 유동화
 * ------------------------------------------------------------------ */
@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;
  }
}

/* ------------------------------------------------------------------
 * 900 이하 — 2열(좌내비 220 / 스페이서 14 / 본문 847)을 1열로 리플로우
 * ------------------------------------------------------------------ */
@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;
  }

  /* 본문 열 — 원본 인라인 style 의 text-align:left 는 유지하고 폭만 유동화 */
  #content center > table[width="1078"] > tbody > tr > td[width="847"] {
    box-sizing: border-box;
  }

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

/* ------------------------------------------------------------------
 * 640 이하 — 섹션 여백 축소
 * 원본 본문의 유효 콘텐츠는 제품 이미지 1장 + 스페이서 행이라
 * 모바일에서 조정할 것은 50px 여백뿐이다.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 640px) {
  #content center > table[width="1078"] 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-rule { width: 90px; height: 6px; background: #d8d8d8; margin: 0 0 20px; }
.pspec-lead { margin: 0 0 6px; }
.pspec h3 { margin: 34px 0 12px; padding-left: 10px; font-size: 15px; color: #2b2f4a;
            border-left: 3px solid #59aeef; }
.pspec-apply { margin: 0; padding: 18px 26px; border: 1px solid #ccc; list-style: none;
               column-count: 2; column-gap: 26px; }
.pspec-apply li { line-height: 2.1; padding-left: 9px; text-indent: -9px; }
.pspec-apply li::before { content: "\B7 "; }
.pspec table { border-collapse: collapse; width: 100%; max-width: 800px; font-size: 13px; }
.pspec th, .pspec td { border: 1px solid #b5b5b5; padding: 7px 6px; text-align: center; }
.pspec thead th { background: #bfe0fa; font-weight: normal; }
.pspec tbody th { background: #cfcfcf; font-weight: normal; }
.pspec-note { margin: 8px 0 0; max-width: 800px; text-align: right; font-size: 12px; }
.pspec-pack { margin: 0; padding: 0; list-style: none; }
.pspec-pack li { padding-left: 10px; text-indent: -10px; }
.pspec-pack li::before { content: "\B7 "; }
.pspec-caution { display: block; padding-left: 28px; text-indent: 0; }
/* 통짜 상세 이미지에서 잘라낸 제품 사진(텍스트/표는 위 마크업으로 대체됨). */
.pspec-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.pspec-photos img { max-width: 100%; height: auto; border: 1px solid #ddd; }
.pspec-figure { margin: 0 0 6px; }
.pspec-figure img { max-width: 100%; height: auto; border: 1px solid #ddd; }
/* 열이 많은 규격표는 좁은 화면에서 가로 스크롤.
   본문이 고정폭 레이아웃(body overflow-x:hidden)이라 래퍼 폭을 뷰포트로 묶어야
   실제로 스크롤되며, 그렇지 않으면 오른쪽 열이 잘려 보이지 않는다. */
.pspec-scroll > table { min-width: 620px; }
@media (max-width: 760px) {
	.pspec-scroll { max-width: calc(100vw - 24px); }
}