/* =========================================================
   리뷰허브 체험단 — 모바일 공통 개선 (전 사이트 공통)
   main.css 이후에 로드. 신규 !important 추가 금지.
   목적:
    1) iOS 입력 포커스 줌 방지 (font-size ≥ 16px)
    2) 가로 스크롤 방지 (overflow-x hidden)
    3) 터치 타겟 44px 최소치 (WCAG)
    4) iOS safe-area 반영
    5) 가로 스크롤러 관성 스크롤
    6) 모바일 히트영역 피드백 다듬기
   ========================================================= */

/* ── 가로 스크롤 방지 ─────────────────────────────── */
html, body { overflow-x: clip; max-width: 100vw; }

/* ── iOS safe-area: 푸터 영역이 홈 인디케이터에 가리지 않도록 ── */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}

/* ── sticky 헤더가 있을 때 앵커 이동 시 가려지는 문제 방지 ── */
html { scroll-padding-top: 72px; }

/* ── 탭 하이라이트 색상 통일 (모바일 터치 시 파란 박스 깜빡임 제거) ── */
a, button, [role="button"], input[type="submit"], input[type="button"] {
  -webkit-tap-highlight-color: rgba(15, 23, 42, 0.06);
}

/* ── 이미지 기본값: 깨짐/늘어짐 방지 ─────────────────── */
img, svg, video { max-width: 100%; height: auto; }
img[width][height] { height: auto; }

/* ── 모바일 전용 ── 768px 이하 ─────────────────────── */
@media (max-width: 768px) {
  /* iOS Safari 포커스 시 자동 확대 방지: 입력 요소 font-size ≥ 16px */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px;
  }

  /* 터치 타겟 최소 높이 44px 확보 (기존보다 작은 버튼들 보정) */
  .rv-btn,
  .ms-btn,
  .btn-ghost,
  .btn-solid,
  .btn-biz,
  .sidebar-item,
  .ms-drawer-btns a,
  .ms-drawer-nav a {
    min-height: 44px;
  }

  /* 링크 기반 버튼도 동일하게 */
  .rv-tab,
  .menu-item {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* 긴 한글 단어 줄바꿈: 표/카드에서 오버플로우 방지 */
  .cp-title, .section-title, .card-title,
  .biz-name, .campaign-title {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* ── 모바일 전용 ── 480px 이하 ─────────────────────── */
@media (max-width: 480px) {
  /* 섹션 외곽 패딩을 조금 줄여 작은 화면에서도 컨텐츠 폭 확보 */
  .container, .wrap { padding-left: 12px; padding-right: 12px; }

  /* 폼 레이블 간격 */
  .form-row { margin-bottom: 14px; }

  /* 페이지 제목 크기 과도 방지 */
  h1 { font-size: clamp(1.25rem, 5vw, 1.75rem); line-height: 1.25; }
  h2 { font-size: clamp(1.05rem, 4.2vw, 1.4rem); line-height: 1.3; }
}

/* ── 가로 스크롤 컨테이너: 관성 스크롤 활성화 ─────── */
.rv-tabbar-inner,
.rv-mobile-nav,
.rv-mobile-nav-inner,
.now-nav-inner,
.menu-list.menu-textline,
.tab-bar-inner,
.chip-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── 모바일 드로어 내부 스크롤 관성 ────────────────── */
.ms-drawer-panel {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── iOS 입력 필드 그림자/내장 스타일 제거 ──────────── */
@media (max-width: 768px) {
  input, select, textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 10px;
  }
  /* select 는 화살표 아이콘 남겨둠 */
  select {
    -webkit-appearance: menulist;
    appearance: menulist;
  }
}

/* ── 모바일 메인 히어로: 이미지 확대/비율 고정 ─────── */
@media (max-width: 640px) {
  .rv-hero, .hero-banner {
    background-attachment: scroll;
  }
}

/* ── 모바일에서 hover 그림자 비활성 (터치 환경 가독성) ── */
@media (hover: none) {
  .cp-card:hover,
  .ff-card:hover {
    transform: none;
  }
}

/* ── 다운로드 표 등 가로 넓은 콘텐츠: 가로 스크롤 ──── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}