/* product/urethane.html — 우레탄 전용
 *
 * 원본은 width="1078" 고정 테이블 2단 레이아웃이다
 * (좌 220px 서브 네비 + 간격 14px + 우 847px 본문).
 * 마크업·인라인 style 은 원본 그대로 두고(R5), 좁은 화면에서만
 * 단일 열로 리플로우되도록 폭 제약을 푼다(R3).
 *
 * 수치 근거 = 원본 마크업의 고정폭 속성과 반입 자산의 실제 픽셀 크기:
 *   서브 네비 이미지 220x39 (제목 220x50)
 *   본문 타이틀 띠 sub2_1_5.jpg 847x30
 *   제품 이미지 product_img5_1 847x1556 / urethane-rod-plate-sheet 845x1636
 *              product_img5_3 847x1557 / product_img5_4 847x1557 / product_img8_4 847x1562
 *   앵커 목차 박스 border:1px solid #59aeef · padding:20px (원본 인라인 style)
 */

/* --- 본문 이미지 유동화 ------------------------------------------- */
/* 고정폭 td(847) 안의 이미지를 컨테이너 폭에 맞춘다 */
#content > center > table[width="1078"] td[width="847"] img,
#p_1 img,
#p_3 img,
#p_4 img,
#p_5 img {
  display: block;
  width: 100%;
  max-width: 847px;
  height: auto;
  margin: 0 auto;
}

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

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

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

/* --- 태블릿 이하: 단일 열 리플로우 -------------------------------- */
@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;
  }

  /* 좌우 컬럼 사이 스페이서 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;
  }
}

/* --- 모바일: 목차 박스 세로 나열 ----------------------------------- */
@media screen and (max-width: 640px) {
  /* 목차 박스 안쪽 3열 테이블을 세로로 */
  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;
  }

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

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

  /* 50px/100px 여백 행은 모바일에서 과하다.
     ⚠ 원본은 td[height="50"] 하나에 제품 이미지를 담고 있다(우레탄 봉/판/시트).
     :has(img) 로 그 셀은 제외해 이미지 셀을 건드리지 않는다. */
  td[height="50"]:not(:has(img)) {
    height: 26px;
  }

  td[height="100"] {
    height: 40px;
  }
}