/* ==========================================
   [RESPONSIVE] 가이드 시스템 전용 반응형 
   ========================================== */

/* 768px 미만 (태블릿 및 모바일 가로) */
@media (max-width: 768px) {
  /* 1. 섹션 및 컨테이너 여백 */
  .new-guide-section {
    padding: 40px 0; /* 상하 여백 축소 */
  }

  .new-guide-container {
    gap: 30px; /* 요소 간 간격 40px -> 30px */
    padding: 0 16px;
  }

  /* 2. 타이포그래피 (모바일 최적화 크기) */
  .new-guide-top h2 {
    font-size: 26px; /* 32px -> 26px */
  }

  .new-guide-top h3,
  .new-is-main .new-guide-top h2,
  .new-is-main .new-guide-top h3,
  .new-guide-sub-wrap h3 {
    font-size: 28px; /* 40px -> 28px */
    line-height: 1.3;
  }

  .new-guide-top p {
    font-size: 18px; /* 20px -> 18px */
  }

  .new-guide-tip,
  .new-guide-tip h4 {
    font-size: 18px;
  }

  /* 3. 미디어(이미지) 유동적 너비 */
  .new-img-single {
    width: 90%; /* 화면에 맞춰 유동적으로 */
    max-width: 300px;
  }

  .new-is-main .new-img-single {
    width: 95%;
    max-width: 350px;
  }

  /* 4. 이미지 2개 나열 (가로 유지하며 비율 조정) */
  .new-guide-figure {
    width: 100%;
    gap: 8px;
  }
  .new-guide-figure img {
    width: calc(50% - 4px); /* 화면 폭 절반 차지 */
    height: auto;
  }

  /* 5. 비디오 목업 시스템 (Scale 조정이 가장 안전) */
  .new-guide-video-wrap {
    transform: scale(0.9); /* 전체 90% 축소 */
    margin: -20px 0; /* 축소로 생기는 여백 제거 */
    display: flex;
    justify-content: center;
    width: 100%;
  }

  /* 6. 파이널 섹션 */
  .new-guide-final-actions {
    gap: 30px;
  }

  .new-guide-download-buttons img {
    height: 52px; /* 버튼 살짝 축소 */
  }

  .new-is-final .new-guide-top h3 {
    font-size: 18px !important;
  }
}

/* 480px 이하 (모바일 세로) */
@media (max-width: 480px) {
  .new-guide-top h3,
  .new-is-main .new-guide-top h3 {
    font-size: 24px;
  }

  .new-guide-video-wrap {
    transform: scale(0.75); /* 75%까지 축소 */
    margin: -40px 0;
  }

  .new-guide-download-buttons {
    flex-direction: row; /* 버튼 가로 유지 (세로 전환 원하면 column) */
    gap: 8px;
  }
}