/* product/silicone-extrusion.html — 실리콘 압출제품 전용
 *
 * 원본(PASS_CODE=67)은 1078px 고정폭 2열 테이블 레이아웃이다.
 *   좌 220px = 제품 서브내비(이미지 버튼 11개) · 우 847px = 본문(앵커 목차 + 제품 이미지 6장)
 * 원본 마크업/인라인 style 은 그대로 보존하고(R5), 여기서는 좁은 화면 리플로우만 만든다(R3).
 * h8-overlay.css 가 이미 table{max-width:100%} / img{max-width:100%;height:auto} 를 깔았으므로
 * 이 파일은 "2열 → 1열" 전환과 목차 테이블의 셀 정렬만 담당한다.
 *
 * 실측 수치 근거(라이브 1회 실측 원문):
 *   본문 이미지 원본 폭 847~849px · 목차 셀 width 120 + 스페이서 85
 *   구분선 tr = bgcolor #222222 height 2 · 섹션 간격 height 50
 */

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

  /* 본문 열 고정폭 해제 — 안쪽 목차 박스(width 847)도 함께 */
  center > table[width="1078"] td[width="847"] {
    width: auto;
  }
}

@media screen and (max-width: 900px) {
  center > table[width="1078"],
  center > table[width="1078"] > tbody,
  center > table[width="1078"] > tbody > tr {
    display: block;
    width: 100%;
  }

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

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

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

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

  /* 목차 박스 — 인라인 style 의 padding/border 는 살리고 폭만 유동화 */
  center > table[width="1078"] td[width="847"] {
    width: auto;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------------------
 * 모바일 — 3열 앵커 목차(120 + 85스페이서 ×3)를 세로 목록으로
 * 원본은 tr 하나에 목차 td 3개 + 스페이서 td 2개가 들어 있다.
 * 390px 에서 3열은 들어가지 않으므로 셀을 block 으로 풀어 세로로 쌓는다.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 640px) {
  center > table[width="1078"] td[width="847"] {
    padding: 14px !important;
  }

  center > table[width="1078"] td[width="847"] > table,
  center > table[width="1078"] td[width="847"] > table > tbody,
  center > table[width="1078"] td[width="847"] > table > tbody > tr {
    display: block;
    width: 100%;
  }

  center > table[width="1078"] td[width="847"] > table > tbody > tr > td {
    display: block;
    width: auto;
  }

  /* 목차 열 사이 85px 스페이서 td 는 1열에서 불필요 */
  center > table[width="1078"] td[width="847"] > table > tbody > tr > td[width="85"] {
    display: none;
  }

  /* 목차 항목 자체는 좌측 정렬 유지(원본 align="left") */
  center > table[width="1078"] td[width="847"] table table {
    width: 100%;
  }

  /* 섹션 사이 50px 여백은 모바일에서 과하다 — 절반으로 */
  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-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; }
/* 원본 표는 2행 헤더다 — 1행(항목)은 하늘색, 2행(최소/최대/기본)은 회색. */
.pspec thead tr + tr th { background: #cfcfcf; }
.pspec tbody th { background: #cfcfcf; font-weight: normal; }
.pspec caption { caption-side: top; padding: 0 0 8px; font-weight: bold; color: #2b2f4a; }
.pspec-matrix td { text-align: left; padding: 9px 12px; }
.pspec-matrix tbody th { width: 150px; }
.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 img { display: block; max-width: 100%; height: auto; }
.pspec-photos img + img { margin-top: 12px; }
/* 열이 많은 표는 좁은 화면에서 찌그러지는 대신 가로 스크롤.
   상위가 테이블 레이아웃이라 폭이 내용에 끌려가므로, 좁을 때는 뷰포트로 폭을 묶어야
   min-width 가 페이지를 밀어내지 않고 컨테이너 안에서 스크롤된다. */
.pspec-scroll { max-width: 800px; }
.pspec-scroll table { min-width: 470px; }
.pspec-scroll .pspec-matrix { min-width: 660px; }
@media (max-width: 860px) {
	.pspec-scroll { max-width: calc(100vw - 26px); }
}
/* 단면도 그림은 원본 이미지에만 있던 내용이라 셀로 되살렸다. */
.pspec-matrix .pspec-dia { width: 207px; padding: 4px 8px; text-align: center; }
.pspec-matrix .pspec-dia img { display: block; margin: 0 auto; max-width: 100%; height: auto; }