/* product/viton.html — 바이톤 전용
 *
 * 원본은 width="1078" 고정 테이블 2단 레이아웃이다
 * (좌 220px 서브 네비 + 간격 14px + 우 847px 본문).
 * 마크업·인라인 style 은 원본 그대로 두고(R5), 좁은 화면에서만
 * 단일 열로 리플로우되도록 폭 제약을 푼다(R3).
 *
 * 수치 근거 = 원본 마크업의 고정폭 속성과 반입 자산의 실제 픽셀 크기:
 *   서브 네비 이미지 220x41 (제목 220x50)
 *   본문 제품 이미지 849x1557 / 849x1557
 *   앵커 목차 박스 border:1px solid #59aeef · padding:20px (원본 인라인 style)
 *   목차 항목 2개 — 고정폭 td 120/60/120 (실리콘 시트 페이지와 달리 2열이다)
 */

/* --- 본문 이미지 유동화 ------------------------------------------- */
/* 849px 원본 이미지가 847px td 를 2px 넘긴다 — 컨테이너에 맞춘다 */
#p_1 img,
#p_2 img {
  display: block;
  width: 100%;
  max-width: 849px;
  height: auto;
  margin: 0 auto;
}

/* 앵커 이동 시 고정 헤더가 없으므로 오프셋은 두지 않되,
   목차 링크 클릭 위치가 이미지 상단에 정확히 오도록 여백만 확보 */
#p_1,
#p_2 {
  scroll-margin-top: 12px;
}

/* --- 목차 박스 --------------------------------------------------- */
/* 원본은 2개 항목을 고정폭 td(120/60/120)로 나열한다.
   좁은 화면에서 넘치지 않도록 폭 제약만 푼다 — 인라인 style 은 유지된다 */
@media screen and (max-width: 1080px) {
  /* 2단 컨테이너 자체를 유동으로 */
  body > center > table[width="1078"] {
    width: 100% !important;
    max-width: 1078px;
  }

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

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

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

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

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

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

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

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

/* --- 모바일: 목차 박스 세로 나열 ----------------------------------- */
@media screen and (max-width: 640px) {
  /* 목차 박스 안쪽 2열 테이블을 세로로 */
  td[style*="#59aeef"] > table,
  td[style*="#59aeef"] > table > tbody,
  td[style*="#59aeef"] > table > tbody > tr,
  td[style*="#59aeef"] > table > tbody > tr > td {
    display: block;
    width: auto !important;
  }

  /* 열 사이 60px 스페이서 td 제거 */
  td[style*="#59aeef"] > table > tbody > tr > td[width="60"] {
    display: none;
  }

  td[style*="#59aeef"] {
    padding: 14px !important;
  }

  /* 50px 여백 행은 모바일에서 과하다 */
  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; }
/* 좁은 화면에서 열이 많은 표는 가로 스크롤. min-width 가 있어야 표가 찌그러지지 않고 실제로 스크롤된다. */
.pspec-scroll table { min-width: 520px; }
/* 위 min-width 가 본문을 감싼 레이아웃 표(폭 auto)의 폭까지 밀어 올리면
   스크롤 대신 페이지 전체가 가로로 넘친다 — 뷰포트 기준 상한으로 끊는다. */
@media screen and (max-width: 900px) {
	.pspec { max-width: calc(100vw - 20px); }
}
/* 상세 이미지에서 사진만 잘라낸 제품 사진 갤러리.
   product-viton.css 의 `#p_1 img { width:100% }` 는 통짜 849px 이미지 기준이라
   작은 크롭을 확대해 버린다 — 같은 id 특이도로 되돌린다. */
/* align-items 를 두지 않으면 flex 기본 stretch 가 낮은 사진(275x258)을 행 높이까지 늘려 찌그러뜨린다. */
.pspec-photos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin: 0; }
#p_1 .pspec-photos img,
#p_2 .pspec-photos img { display: block; width: auto; max-width: 100%; height: auto; margin: 0; }