/* ===========================================================================
   mobile.css — 반응형

   데스크톱을 줄이는 게 아니라 배치를 바꾼다. 검증은 폭을 바꿔가며
   가로 넘침이 0인지 보는 것으로 충분하다 — 모바일에서 가장 티나는 결함이다.

   ~1200  다이어그램 세로 쌓기 · 캐러셀 화살표 안쪽으로
   ~1000  서비스 카드 1열 · 슬라이드 이미지 감춤
    ~720  모바일 — GNB 가로 스크롤 · 글자 크기 축소 · 플로팅 하단 고정
   =========================================================================== */

@media (max-width: 1200px) {
  :root {
    --fs-hero: 40px;
    --fs-hero-lg: 44px;
    --fs-h2: 36px;
    --fs-slide: 36px;
    --sec-gap: 140px;
    --h-hero: 620px;
  }

  /* 좌우 2단으로 짠 섹션은 한 단으로 눕힌다 — 고정 픽셀 열이 화면을 넘긴다 */
  .pitch,
  .warranty,
  .report,
  .chartrow,
  .steps,
  .sellreport { grid-template-columns: 1fr; }

  .pitch--rtl .pitch__body { order: 0; text-align: left; }
  .section__title--right,
  .warranty__note { text-align: left; }
  .warranty__tags { align-items: flex-start; }

  .report { gap: 40px; }
  .report__visual { height: auto; padding: 32px; }
  .report__img { max-height: 420px; }

  .sellreport__img { width: 260px; justify-self: center; }

  .waiting__map { position: static; max-width: 100%; margin: 32px auto 0; }

  /* 표는 접지 말고 옆으로 흘린다 — 칸을 줄이면 읽을 수 없다 */
  .ptable { min-width: 560px; }
  .policy { padding: 32px 20px; overflow-x: auto; }
  .policy__cols { grid-template-columns: 1fr; gap: 28px; }

  .carousel__arrow--prev { left: 12px; }
  .carousel__arrow--next { right: 12px; }

  /* 다이어그램은 가로 5칸이 들어가지 않는다. 세로로 쌓고 화살표를 눕힌다. */
  .flow {
    grid-template-columns: 1fr;
    padding: 48px 24px;
    gap: 32px;
  }

  .flow__line { width: 60%; margin: 0 auto; }
}

@media (max-width: 1000px) {
  .services { grid-template-columns: 1fr; padding-top: 72px; }
  .reviews__grid { grid-template-columns: 1fr; }

  .problems,
  .rvcards { grid-template-columns: 1fr; }

  .listings,
  .sold { grid-template-columns: repeat(2, 1fr); }

  /* 솔루션 카드는 좌측 한 장이 2행을 차지하는 배치라 열을 풀면 행 지정도 풀어야 한다 */
  .solutions { grid-template-columns: 1fr; grid-template-rows: none; }
  .sol--tall { grid-row: auto; }
  .sol { min-height: 300px; }
  .sol__icon { width: 150px; }
  .sol--tall .sol__icon { width: 160px; }

  .stages { grid-template-columns: repeat(2, 1fr); }
  .ctacards { grid-template-columns: 1fr; }

  .steps__board { flex-wrap: wrap; }
  .promo__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 0; }

  /* 수익 비교 바는 고정 448px 이라 그대로 두면 화면을 넘는다 */
  .gain__row { grid-template-columns: 120px 1fr; gap: 12px; }
  .gain__wrap { width: 100%; }
  .gain__bar--now,
  .gain__bar--new { width: auto; flex: 1; }
  .gain__extra { width: auto; padding: 0 16px; font-size: var(--fs-base); }
  .gain__note { margin-left: 0; width: 100%; }

  /* 슬라이드는 글이 먼저다 — 목업이 들어갈 자리가 없으면 글을 전폭으로 */
  .slide { grid-template-columns: 1fr; padding: 40px; height: auto; min-height: var(--h-slide); }
  .slide__img { display: none; }

  .pilltabs__tab { min-width: 0; padding: 0 20px; }
}

@media (max-width: 720px) {
  :root {
    --fs-hero: 28px;
    --fs-h2: 26px;
    --fs-slide: 26px;
    --fs-lead: 18px;
    --fs-xl: 18px;
    --fs-lg: 16px;
    --pad-page: 20px;
    --h-header: 64px;
    --h-slide: 420px;
    --sec-gap: 90px;
  }

  .header__inner { gap: 16px; }
  .logo__mark { font-size: 20px; }

  /* 항목을 숨기면 이동 수단이 사라진다. 좁아지면 접지 말고 흘린다.
     ⚠️ min-width:0 이 없으면 flex 아이템이 내용 폭만큼 버텨서(기본값 auto)
     스크롤이 걸리는 대신 헤더가 늘어나고, 페이지 전체에 가로 넘침이 생긴다. */
  .gnb {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .gnb::-webkit-scrollbar { display: none; }
  .gnb__link { padding: 10px 12px; font-size: var(--fs-base); }

  /* 드롭다운은 좁은 화면에서 떠 있을 자리가 없다 — 상위 링크로만 간다 */
  .gnb__sub { display: none; }
  .gnb__caret { display: none; }

  .hometitle { padding: 40px 0 24px; }
  .slide { padding: 28px 20px; }
  .slide__body { gap: 20px; }
  .checks li { font-size: var(--fs-base); }
  .slide__actions { flex-direction: column; align-items: flex-start; }
  .btn--lg { height: 48px; font-size: var(--fs-base); }

  .carousel__arrow { display: none; }

  .brandtabs__hint { left: auto; right: 0; top: -32px; }

  .review { padding: 24px 20px; }

  /* 좁은 화면에서는 좌우 2단이 들어가지 않는다. 쌓고, 카피라이트의 nowrap 도 푼다
     (그대로 두면 문서 폭이 늘어 페이지 전체에 가로 넘침이 생긴다). */
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer__copy { white-space: normal; }

  /* 우측 세로 바는 좁은 화면에서 콘텐츠를 가린다 — 하단 가로 바로 바꾼다 */
  .quick {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    transform: none;
    flex-direction: row;
    border-radius: 0;
  }

  .quick__btn {
    width: auto;
    flex: 1;
    flex-direction: row;
    justify-content: center;
    padding: 12px 8px;
    font-size: var(--fs-xs);
  }

  .quick__btn + .quick__btn { border-top: 0; border-left: 1px solid rgb(255 255 255 / 20%); }
  .quick__btn br { display: none; }
  .quick__icon { width: 20px; height: 20px; }

  /* 매물·후기 카드는 한 열로 */
  .listings,
  .sold,
  .stages { grid-template-columns: 1fr; }

  .hero--photo,
  .hero--short { height: auto; min-height: 460px; padding: 60px 0; }
  .hero__cta { height: 60px; padding: 0 24px; font-size: var(--fs-base); }

  .section { padding: 56px 0; }
  .section__title { font-size: var(--fs-h2); }

  /* 검색 줄은 세로로 쌓는다 — 셀렉트 200px 셋이 가로로 들어가지 않는다 */
  .search__q,
  .search__select,
  .search__submit { width: 100%; }
  .search__selects { flex-direction: column; }

  .waiting { padding: 32px 20px; }
  .waiting__count { font-size: 40px; }

  .interview .faq__q { padding: 24px 4px; font-size: var(--fs-base); }
  .story__photo { height: 220px; }

  .sellreport,
  .promo { padding: 32px 20px; }

  .phone { grid-template-columns: 1fr; }
  .inq__submit { width: 100%; }

  /* 하단 고정 CTA 바는 문구를 빼고 버튼만 남긴다 */
  .ctabar { height: auto; padding: 12px 16px; bottom: 64px; }
  .ctabar__text { display: none; }
  .ctabar__actions { width: 100%; }
  .ctabar .btn { flex: 1; }

  /* 하단 바에 가리지 않도록 */
  .footer { margin-top: 80px; padding-bottom: 90px; }
  .toast { bottom: 80px; }
}