/* about-tour.css — /about/tour.html(원본 sub1/sub1_3.php) 전용 보정
 *
 * 원본 css/sub.css 의 갤러리 규칙(.scene 1009px · .scene_select 1010px · 탭 25%)은
 * 그대로 살려 두고, 원본에 없는 @media 만 여기서 더한다(R3/R5 v1 — 원본 CSS 무수정).
 * 데스크톱 수치는 손대지 않는다: .scene 은 1009px 안에서 그대로, 좁아질 때만 무른다.
 */

/* 갤러리 큰 사진 — 고정폭 1009px 를 상한으로 바꾼다.
   원본 .scene img{position:absolute} 는 한 장만 있을 때 컨테이너 높이를
   .scene{height:553px} 에 의존하게 만든다. 폭이 줄면 높이가 따라가야 하므로
   흐름 안으로 되돌리고 높이를 이미지에 맡긴다(1009x553 원본 비율 유지).
   ⚠ 이 무름은 **좁은 폭 전용**이다 — 데스크톱까지 걸면 원본 sub.css 의
   `.scene img{position:absolute}`(=display 블록화)를 덮어써 박스 스펙이 어긋난다
   (parity 실측: display block→inline · position absolute→relative). .content 가
   유동으로 바뀌는 1240px 와 같은 분기에서만 적용한다. */
@media screen and (max-width: 1240px) {
  .detail_content .scene {
    max-width: 100%;
    height: auto;
  }
  .detail_content .scene img {
    position: relative;
    width: 100%;
    height: auto;
  }
}

/* 섬네일 줄 — 1010px 상한 */
.detail_content .scene_select {
  max-width: 100%;
}

@media screen and (max-width: 1024px) {
  .content_area .detail_content { padding: 24px 20px 40px 20px; }

  /* float 로는 섬네일 높이가 1px 씩 달라 다음 줄이 어긋난다(11장 중 마지막 장이
     오른쪽으로 밀림 — 390 실측). 좁은 폭에서만 flex 로 줄을 잡는다. */
  .detail_content .scene_select {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .detail_content .scene_select li,
  .detail_content .scene_select li:nth-child(6) {
    width: 20%;
    padding: 0 6px 8px 0;
    box-sizing: border-box;
  }
  .detail_content .scene_select li img { display: block; width: 100%; height: auto; }

  .content_nav ul.sub1_nav li a { font-size: 16px; }
}

@media screen and (max-width: 768px) {
  .detail_content .scene_select li,
  .detail_content .scene_select li:nth-child(6) { width: 33.3333%; }

  .content_nav ul.sub1_nav li a { font-size: 15px; }
}

@media screen and (max-width: 480px) {
  .content > .top_content { padding-top: 40px; }
  .top_content .quickroute {
    position: static;
    margin-top: 12px;
    bottom: auto;
    right: auto;
  }

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

  .content_area .detail_content { padding: 20px 12px 32px 12px; }
  .detail_content .scene_select li,
  .detail_content .scene_select li:nth-child(6) { width: 50%; }
}