/* sexual-health/andropause.html (원본 /sub5/sub5_1.php) 전용 보정
   원본 css/sub.css 수치는 그대로 두고, 이 페이지에서만 필요한 것을 덮는다.
   원본에는 @media 가 한 줄도 없다(1200px 고정 전제). */

/* 원본은 블록 사이 여백을 <br> 연발로 냈다(R1 BR-RUN).
   br 은 한 개만 남기고 나머지 만큼을 여백으로 돌려준다.
   실측(_styles/sub5-sub5_1.json): br 1개 = 16px.
   원본 클래스(.list_content_img)를 그대로 두고 순서로만 집는다(R5 원본 충실도 —
   br_gap* 같은 창작 클래스는 원본 DOM 키를 바꿔 파리티 매칭을 깨뜨린다).
   1·2번째 = 원본 <br><br><br>(48px) / 3·4번째 = 원본 <br><br>(32px) */
.detail_content > .list_content_img:nth-of-type(1),
.detail_content > .list_content_img:nth-of-type(2) { margin-top: 32px; }
.detail_content > .list_content_img:nth-of-type(3),
.detail_content > .list_content_img:nth-of-type(4) { margin-top: 16px; }

/* 반응형 — 원본에 @media 가 없어 1200px 고정 탭이 좁은 폭에서 잘린다.
   (.content 폭 무르기는 공통 h8-overlay.css 가 이미 한다) */
@media screen and (max-width: 1024px) {
  .top_content { padding-top: 40px; overflow: hidden; }
  .quickroute { position: static; float: right; clear: both; margin-top: 12px; background-position: 0 50%; }

  .content_nav ul li { height: auto; line-height: 1.4; }
  .content_nav ul li a { height: auto; padding: 13px 6px; font-size: 16px; line-height: 1.4; }

  .detail_content { padding: 20px 20px 40px 20px; margin-bottom: 40px; }
  .detail_content > h3 { font-size: 22px; padding: 40px 0 22px 26px; background-size: 16px auto; }
  .detail_content > h3:first-child { padding-top: 14px; background-position-y: 16px; }
}

@media screen and (max-width: 640px) {
  .top_content h2 { font-size: 24px; }
  .quickroute { font-size: 13px; }

  .sub5_nav li { width: 50%; }
  .sub5_nav li:nth-child(2n) { border-right: none; }
  .content_nav ul li a { padding: 12px 4px; font-size: 14px; }

  .detail_content { padding: 15px 15px 30px 15px; }
  .detail_content > h3 { font-size: 20px; padding: 30px 0 18px 22px; }
}