/* product/joint-flange-gasket.html — 죠인트(후렌지가스켓) 전용
 *
 * 원본(PASS_CODE=71)은 width="1078" 고정 테이블 2단 레이아웃이다
 * (좌 220px 서브 네비 + 간격 14px + 우 847px 본문).
 * 마크업·인라인 style·속성은 원본 그대로 두고(R5), 좁은 화면에서만
 * 단일 열로 리플로우되도록 폭 제약을 푼다(R3).
 *
 * 수치 근거 = 라이브 1회 실측 원문의 고정폭 속성과 반입 자산의 실제 픽셀 크기:
 *   서브 네비 제목 220x50 · 항목 220x41 · 고객센터 220x157
 *   본문 타이틀 띠 sub2_1_7.jpg 847x30
 *   본문 제품 이미지 product_img7_1.jpg 847x1557
 *   타이틀 아래 여백 tr height=50
 *
 * ⚠ 이 페이지는 앵커 목차(#p_1 링크 박스)가 원본에서 HTML 주석 처리돼 있어
 *   실화면에 없다 — 되살리지 않는다(원본 실재 화면만). 그래서 viton/extrusion
 *   페이지 CSS 에 있는 목차 박스 규칙이 여기엔 없다.
 */

/* --- 본문 이미지 유동화 ------------------------------------------- */
#p_1 img {
  display: block;
  width: 100%;
  max-width: 847px;
  height: auto;
  margin: 0 auto;
}

/* 타이틀 띠도 본문 폭을 따라간다 */
#content center > table[width="1078"] td[width="847"] > table > tbody > tr > td[valign="top"] > img {
  display: block;
  width: 100%;
  max-width: 847px;
  height: auto;
}

/* --- 1080 이하: 고정폭 컨테이너 유동화 ----------------------------- */
@media screen and (max-width: 1080px) {
  #content center > table[width="1078"] {
    width: 100% !important;
    max-width: 1078px;
  }

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

/* --- 태블릿 이하: 2열 → 단일 열 리플로우 --------------------------- */
@media screen and (max-width: 900px) {
  #content center > table[width="1078"],
  #content center > table[width="1078"] > tbody,
  #content center > table[width="1078"] > tbody > tr,
  #content center > table[width="1078"] > tbody > tr > td {
    display: block;
    width: auto !important;
  }

  /* 좌우 컬럼 사이 14px 스페이서 td 는 세로 배치에서 불필요 */
  #content center > table[width="1078"] > tbody > tr > td[width="14"] {
    display: none;
  }

  /* 서브 네비를 가로 나열로 접어 세로 길이를 줄인다 */
  #content center > table[width="1078"] > tbody > tr > td[width="220"] > table {
    width: 100%;
  }

  #content center > table[width="1078"] > tbody > tr > td[width="220"] > table > tbody {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

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

  /* 높이 15px 스페이서 행은 flex 배치에서 빈 칸만 만든다 */
  #content center > table[width="1078"] > tbody > tr > td[width="220"] > table > tbody > tr > td[height="15"] {
    display: none;
  }

  #content center > table[width="1078"] > tbody > tr > td[width="847"] {
    padding-top: 24px;
  }

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

/* --- 모바일: 여백 축소 -------------------------------------------- */
@media screen and (max-width: 640px) {
  /* 타이틀 아래 50px 여백은 모바일에서 과하다 */
  #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; }
/* 상세 이미지에서 사진 밴드만 잘라낸 제품 사진 갤러리.
   product-joint-flange-gasket.css 의 `#p_1 img { width:100% }` 는 통짜 847px
   이미지 기준이라 작은 크롭을 확대해 버린다 — 같은 id 특이도로 되돌린다.
   align-items 기본값 stretch 도 height:auto 인 아이템의 세로를 줄 높이에 맞춰
   늘려 크롭 비율을 깨므로 flex-start 로 고정한다. */
.pspec-photos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin: 0; }
#p_1 .pspec-photos img { display: block; width: auto; max-width: 100%; height: auto; margin: 0; }
/* 열이 많은 규격표는 좁은 화면에서 가로 스크롤.
   본문이 고정폭 레이아웃이라 래퍼 폭을 뷰포트로 묶어야 실제로 스크롤되며,
   그렇지 않으면 오른쪽 열이 잘려 보이지 않는다. */
.pspec-scroll > table { min-width: 620px; }
@media (max-width: 760px) {
	.pspec-scroll { max-width: calc(100vw - 24px); }
}