/* product/silicone-hose.html — 실리콘 호스 전용 보정
 *
 * 원본(U_DS_userpageview_0001.php?PASS_CODE=66)은 width="1078" 고정폭 2단
 * 테이블 레이아웃이다(좌측 카테고리 220 / 여백 14 / 본문 847).
 * 원본 CSS(front.css)와 요소 인라인 style 은 그대로 두고, 폭 제약만 푸는 보정을 얹는다.
 */

/* 본문 열의 콘텐츠(앵커 박스·제품 이미지)가 847px 를 기준으로 짜여 있어
 * 테이블 auto 레이아웃이 열 폭을 흔들지 않게 원본 td width 속성값으로 고정한다. */
@media screen and (min-width: 1081px) {
  #content table[width="1078"] {
    table-layout: fixed;
  }

  #content table[width="1078"] > tbody > tr > td[width="220"] {
    width: 220px;
  }

  #content table[width="1078"] > tbody > tr > td[width="14"] {
    width: 14px;
  }

  #content table[width="1078"] > tbody > tr > td[width="847"] {
    width: 847px;
  }
}

/* 앵커 목차 박스 — 원본 인라인 style(padding 20 / border 1px #59aeef)은 마크업에 있다.
 * 링크 색만 원본 td 의 color:#333 을 그대로 상속시킨다(원본 a 기본색 잔존 방지). */
#content td[style*="#59aeef"] a {
  color: #333;
  text-decoration: none;
}

#content td[style*="#59aeef"] a:hover,
#content td[style*="#59aeef"] a:focus {
  text-decoration: underline;
}

/* 제품 상세 이미지(848x1559 등) — 본문 열 폭에 맞춰 유동 */
#content td[id^="p_"] img {
  display: block;
  width: 848px;
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
 * 반응형 리플로우 (R3) — 1078 고정폭 2단을 좁은 폭에서 단일열로
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1080px) {
  #content table[width="1078"],
  #content table[width="847"] {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }

  /* 2단 행(좌측 카테고리 + 여백 + 본문)을 단일열로 스택 */
  #content table[width="1078"] > tbody,
  #content table[width="1078"] > tbody > tr {
    display: block;
    width: 100%;
  }

  #content table[width="1078"] > tbody > tr > td {
    display: block;
    width: 100% !important;
    max-width: 100%;
  }

  /* 좌측 카테고리 열은 원본 폭(220)을 넘지 않게 가운데 정렬 */
  #content table[width="1078"] > tbody > tr > td[width="220"] {
    max-width: 220px;
    margin: 0 auto;
  }

  /* 좌우 여백용 14px 열은 단일열에서 의미가 없다 */
  #content table[width="1078"] > tbody > tr > td[width="14"] {
    display: none;
  }

  /* 본문 열 상단에 좌측 메뉴와의 간격을 준다(원본 2단에서는 불필요했다) */
  #content table[width="1078"] > tbody > tr > td[width="847"] {
    padding-top: 30px;
  }

  /* 앵커 목차 박스의 고정폭 셀(110/120 + 90 여백)을 유동 3열로 */
  #content td[style*="#59aeef"] > table {
    width: 100%;
  }

  #content td[style*="#59aeef"] td[width="110"],
  #content td[style*="#59aeef"] td[width="120"] {
    width: auto;
  }

  #content td[style*="#59aeef"] td[width="90"] {
    width: 4%;
  }
}

@media screen and (max-width: 640px) {
  /* 목차 3열이 한 줄에 들어가지 않는다 — 세로로 쌓는다 */
  #content td[style*="#59aeef"] > table,
  #content td[style*="#59aeef"] > table > tbody,
  #content td[style*="#59aeef"] > table > tbody > tr {
    display: block;
    width: 100%;
  }

  #content td[style*="#59aeef"] > table > tbody > tr > td {
    display: block;
    width: 100% !important;
  }

  /* 열 사이 90px 여백 셀은 세로 스택에서 빈 줄이 된다 */
  #content td[style*="#59aeef"] td[width="90"] {
    display: none !important;
  }

  /* 구분선/여백 행 높이를 좁은 화면에 맞춰 줄인다(원본 50px) */
  #content table[width="847"] td[height="50"] {
    height: 24px;
  }
}


/* moved from inline <style> (R6 외부화) */
/* 좁은 화면에서 열이 많은 표는 가로 스크롤. min-width 가 있어야 표가 찌그러지지 않고 실제로 스크롤된다. */
.pspec-scroll table { min-width: 520px; }
.pspec-scroll table.pspec-wide { min-width: 700px; }
/* 위 min-width 가 본문을 감싼 레이아웃 표(폭 auto)의 폭까지 밀어 올리면
   스크롤 대신 본문이 잘려 나간다 — 본문 폭을 뷰포트 기준으로 끊는다. */
@media screen and (max-width: 1080px) {
	.pspec { max-width: calc(100vw - 20px); }
}
/* 상세 이미지에서 사진만 잘라낸 제품 사진 갤러리.
   product-silicone-hose.css 의 `#content td[id^="p_"] img { width:848px }` 는 통짜 이미지 기준이라
   작은 크롭을 확대해 버린다 — 더 높은 특이도로 되돌린다. */
/* align-items 기본값 stretch 는 height:auto 인 사진을 행 높이까지 늘려 비율을 깨뜨린다. */
.pspec-photos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin: 0; }
#content td[id^="p_"] .pspec-photos img { display: block; width: auto; max-width: 100%; height: auto; margin: 0; }