/* product/teflon-gland-packing.html — 테프론/그랜드 패킹 전용
 *
 * 원본(PASS_CODE=70)은 1078px 고정폭 2열 테이블 레이아웃이다.
 *   좌 220px = 제품 서브내비(이미지 버튼 11개) · 우 847px = 본문(앵커 목차 + 제품 이미지 2장)
 * 원본 마크업/인라인 style 은 그대로 보존하고(R5), 여기서는 좁은 화면 리플로우만 만든다(R3).
 * h8-overlay.css 가 이미 table{max-width:100%} / img{max-width:100%;height:auto} 를 깔았으므로
 * 이 파일은 "2열 → 1열" 전환과 목차 테이블의 셀 정렬만 담당한다.
 *
 * 실측 수치 근거(라이브 1회 실측 원문 + 반입 자산 실제 픽셀):
 *   본문 제목 이미지 sub2_1_6.jpg 847x30
 *   본문 제품 이미지 product_img6_1.jpg 847x1557 · product_img6_2.jpg 847x1557
 *   목차 셀 width 120 (항목 2개) + 스페이서 width 90 (3개 — 좌/중/우)
 *   구분선 tr = bgcolor #222222 height 2 · 섹션 간격 height 50
 *   목차 박스 = border:1px solid #59aeef · padding:20px (원본 인라인 style)
 */

/* ------------------------------------------------------------------
 * 태블릿 이하 — 2열 테이블을 1열로 리플로우
 * 원본은 <tr align="center"> 안에 좌내비 td / 스페이서 td(14) / 본문 td(847) 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;
  }
}

/* ------------------------------------------------------------------
 * 모바일 — 목차(120 + 90스페이서)를 세로 목록으로
 * 원본은 tr 하나에 스페이서 td(90) / 목차 td(120) / 스페이서 td(90) /
 * 목차 td(120) / 스페이서 td(90) 5개가 들어 있다.
 * 390px 에서는 들어가지 않으므로 셀을 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;
  }

  /* 목차 열 사이 90px 스페이서 td 는 1열에서 불필요 */
  center > table[width="1078"] td[width="847"] > table > tbody > tr > td[width="90"] {
    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; }
.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; }
/* 상세 이미지에서 사진만 잘라낸 제품 사진 갤러리.
   align-items 기본값 stretch 는 height:auto 인 아이템의 세로를 줄 높이에 맞춰
   늘려 크롭 비율을 깨므로 flex-start 로 고정한다. */
.pspec-photos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin: 0; }
.pspec-photos img { display: block; width: auto; max-width: 100%; height: auto; margin: 0; }
/* 열이 많은 규격표는 좁은 화면에서 가로 스크롤.
   본문이 1078px 고정폭 레이아웃이라 래퍼 폭을 뷰포트로 묶어야 실제로 스크롤되며,
   그렇지 않으면 오른쪽 열이 잘려 보이지 않는다. */
.pspec-scroll > table { min-width: 520px; }
.pspec-scroll > table.pspec-wide { min-width: 700px; }
@media (max-width: 760px) {
	.pspec-scroll { max-width: calc(100vw - 24px); }
}