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

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

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

/* --- 목차 박스 --------------------------------------------------- */
/* 원본은 3개 항목을 고정폭 td(120/80/120/80/120)로 나열한다.
   좁은 화면에서 넘치지 않도록 폭 제약만 푼다 — 인라인 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;
  }

  /* 현재 페이지 항목(닥트호스)만 원본 인라인 style 에 float:left 가 있어
     flex 배치에서 정렬이 틀어진다 — 배치 컨텍스트에서만 무력화한다 */
  #content center > table[width="1078"] > tbody > tr > td[width="220"] img[style*="float"] {
    float: none !important;
  }

  #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;
  }

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

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

  /* 50px 여백 행은 모바일에서 과하다 */
  td[height="50"] {
    height: 26px;
  }
}


/* moved from inline <style> (R6 외부화) */
/* 본문 3개 제품 섹션 — 베이크 이미지에서 풀어낸 텍스트/표 전용.
   강조색은 원본 톤(#59aeef) 유지. */
.dh-sec { color:#333; font-size:13px; line-height:1.75; text-align:left; }
.dh-sec h2 { margin:0 0 16px; font-size:26px; font-weight:bold; color:#222; letter-spacing:-1px; }
.dh-sec h3 { margin:32px 0 12px; padding-left:10px; font-size:15px; font-weight:bold; color:#1b3f68; border-left:3px solid #59aeef; }
.dh-sec > p { margin:0 0 10px; }
.dh-list { margin:0; padding:16px 20px; border:1px solid #dcdcdc; list-style:none; }
.dh-list li { padding:3px 0 3px 10px; text-indent:-10px; break-inside:avoid; }
.dh-list li::before { content:"\00B7\00A0"; }
.dh-cols { columns:2; column-gap:30px; }
.dh-pack { padding:0; border:0; }
.dh-table { border-collapse:collapse; min-width:260px; }
.dh-table th, .dh-table td { padding:6px 20px; border-bottom:1px solid #ccc; text-align:center; }
.dh-table thead th { background:#c8e2fa; border-bottom:1px solid #9cc8e8; color:#222; }
.dh-table tbody th { background:#f4f4f4; text-align:left; font-weight:bold; }
.dh-note { margin:8px 0 0; color:#777; font-size:12px; }
.dh-caution { display:block; padding-left:14px; color:#777; }
/* 제품사진 — 베이크 통짜 이미지에서 사진 밴드만 잘라낸 조각들.
   product-duct-hose.css 의 `#p_1 img{width:100%}` 는 통짜 1장 기준이라
   조각 사진에는 맞지 않으므로 더 높은 명시도로 되돌린다. */
.dh-photos { display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; margin:0; }
#content td[id^="p_"] .dh-photos img { display:block; width:auto; max-width:100%; height:auto; margin:0; }
@media screen and (max-width:640px) { .dh-cols { columns:1; } }