/* ═══════════════════════════════════════════════════════
   신농 보이옥션 — 모바일 반응형 스타일시트 v2.0
   대상: max-width 767px (스마트폰·소형 태블릿)
   핵심 원칙:
   1. 가로 overflow 완전 차단
   2. 모든 고정 width → 100%/unset 해제
   3. 음수 마진 제거
   4. 1열 세로 레이아웃 강제
═══════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   0. 기반 — overflow 완전 차단 (최우선)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  /* overflow 완전 차단 */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  /* 모든 요소의 가로 넘침 방지 */
  *, *::before, *::after {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 이미지·미디어 */
  img, video, iframe, svg {
    max-width: 100% !important;
    height: auto;
  }

  /* CSS 변수 오버라이드 */
  :root {
    --hdr: 52px;
    --bot: 60px;
    --radius: 10px;
  }

  html { font-size: 14px; }
  body { -webkit-overflow-scrolling: touch; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. 레이아웃 루트 컨테이너
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .main-wrap {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .content {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0 !important;
  }

  .page {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-bottom: calc(var(--bot) + 12px);
  }

  /* .pg 내부 컨테이너 */
  .pg {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 12px 14px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. TOP HEADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .top-header {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden;
  }

  .header-row1 {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 10px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  .logo-emblem {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
    flex-shrink: 0;
  }

  .logo-main { font-size: 13px !important; }
  .logo-sub  { display: none !important; }

  .hdr-right { gap: 5px; }
  .hdr-right button,
  .noti-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex-shrink: 0;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. 카테고리 바
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .catbar,
  .cat-bar {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 8px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: 46px !important;
    box-sizing: border-box;
  }
  .catbar::-webkit-scrollbar,
  .cat-bar::-webkit-scrollbar { display: none; }

  .cat-btn {
    font-size: 9px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 36px !important;
    min-width: 52px !important;
    max-width: none !important;
    flex: none !important;
  }
  .cat-btn .c-icon { font-size: 15px !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. 히어로 섹션 — 핵심 overflow 원인 수정
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .hero-wrap {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  /* ★ 핵심: hero-inner 음수 마진 제거, 너비 제한 */
  .hero-inner {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 16px 14px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: block !important;         /* PC 2단 그리드 해제 */
    grid-template-columns: none !important;
  }

  /* hero-wrap::before, ::after pseudo — 넘침 방지 */
  .hero-wrap::before,
  .hero-wrap::after {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero-copy-line1 { font-size: clamp(20px, 6.5vw, 28px) !important; }
  .hero-copy-line2 { font-size: clamp(17px, 5.5vw, 22px) !important; }
  .hero-copy-sub   { font-size: 11px !important; line-height: 1.6; }

  .hero-cat-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .hct {
    font-size: 12px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
  }

  /* 히어로 폼 */
  .hero-form {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .hero-selects {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .hs {
    width: 100% !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }
  .hero-search-wrap {
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .hero-search-input-wrap { width: 100% !important; }
  .hero-search-btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
    margin-top: 4px !important;
  }
  .hero-search-input {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 통계 스트립 — 음수 마진 제거 ★ */
  .hero-stats-strip {
    margin: 0 !important;            /* 원래 margin: 0 -20px 제거 */
    width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
  }
  .hss-item {
    min-width: 80px !important;
    flex-shrink: 0;
  }

  /* 빠른 시세 태그 */
  .hero-quick-tags {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .hq-tag { white-space: nowrap; }

  /* 통계 배지 */
  .hero-stats { gap: 8px !important; flex-wrap: wrap !important; }
  .hero-stat-item { font-size: 11px !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. 검색바 (모바일 헤더 아래)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .search-bar {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }
  .search-input-wrap {
    width: 100% !important;
  }
  .search-input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. 섹션 헤더
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .sec-hdr,
  .sec-title-row {
    width: 100% !important;
    padding: 14px 14px 8px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  .sec-title { font-size: 14px !important; }
  .sec-more,
  .sec-hdr-more { font-size: 12px !important; }

  .section-wrap,
  .sec-wrap {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding: 0 0 16px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. 홈 카드 스크롤 — 1열 세로 스택 변환
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  /* ★ 핵심: 가로스크롤 → 세로 1열 */
  .h-scroll {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100vw !important;
    gap: 10px !important;
    padding: 0 14px 16px !important;
    box-sizing: border-box !important;
  }

  /* 카드 고정폭 해제 */
  .prod-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    flex-shrink: 1 !important;
    box-sizing: border-box !important;
  }
  .prod-card .pc-img {
    height: 140px !important;
    width: 100% !important;
  }
  .prod-card .pc-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 체험 카드 */
  .exp-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  /* 구인 미니 */
  .job-mini {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  /* 나눔 미니 */
  .nanum-mini {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  /* PC 그리드 해제 */
  .h-scroll {
    grid-template-columns: none !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. 경매 페이지 카드
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  /* 경매 페이지 가로 스크롤 컨테이너 → 세로 */
  .auction-scroll {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 0 12px 16px !important;
    box-sizing: border-box !important;
  }

  .auction-card,
  .auc-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }
  .auction-card-img,
  .ac-img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
  }
  .auction-card-body { padding: 12px 14px !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. 직거래 페이지 카드
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .direct-scroll {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 0 12px 16px !important;
    box-sizing: border-box !important;
  }

  .direct-card,
  .dir-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. 알림 패널
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .noti-panel {
    position: fixed !important;
    top: var(--hdr) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 0 16px 16px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. 바텀 네비 + safe-area
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .bot-nav {
    width: 100% !important;
    max-width: 100vw !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    height: calc(var(--bot) + max(0px, env(safe-area-inset-bottom))) !important;
  }

  .bot-btn {
    font-size: 9px !important;
    min-height: var(--bot) !important;
  }
  .bot-btn .b-ic { font-size: 18px !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. 팝업 / 모달
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .popup-box,
  .modal-box,
  .modal-content {
    width: min(92vw, 400px) !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* 모달 오버레이 */
  .modal-overlay,
  .popup-overlay {
    width: 100vw !important;
    height: 100vh !important;
    left: 0 !important;
    top: 0 !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. 딜러 지도 페이지
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  #dealer-map { height: 260px !important; }

  .filter-wrap {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .filter-wrap select {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. 폼 — iOS 줌 방지 + 1열 레이아웃
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  /* iOS에서 font-size < 16px이면 자동 줌 발생 — 방지 */
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=tel],
  input[type=number],
  input[type=search],
  textarea,
  select {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 폼 그리드 → 1열 */
  .reg-form-grid,
  .form-grid,
  .eaf-grid {
    grid-template-columns: 1fr !important;
  }

  .guide-two-col { grid-template-columns: 1fr !important; }
  .guide-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. 시세 조회 페이지 UI
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .pc-price-band {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .pc-band-item {
    width: 100% !important;
    min-width: 0 !important;
  }

  .pc-input-flex,
  .pc-input-flex2 {
    min-width: 0 !important;
    width: 100% !important;
  }

  .pc-form-row {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. 사이드바 (모바일 드로어)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .sidebar {
    width: min(280px, 88vw) !important;
    max-width: 88vw !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. 이너 탭 / 탭 바
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .inner-tabs,
  .tab-bar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .inner-tabs::-webkit-scrollbar,
  .tab-bar::-webkit-scrollbar { display: none; }

  .itab,
  .inner-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 40px !important;
    font-size: 12px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. 배너 스트립
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .banner-strip {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .banner-icon { font-size: 32px !important; }
  .banner-text .bt-title { font-size: 14px !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. 그리드 레이아웃 — 모바일 최적화
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  /* 2열 유지 그리드 */
  .exp-grid,
  .trade-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 12px !important;
  }

  /* 1열 강제 그리드 */
  .job-grid {
    grid-template-columns: 1fr !important;
    padding: 0 12px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20. 터치 피드백 & 접근성
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  /* 터치 최소 영역 44px */
  .btn-hdr, .bot-btn, .cat-btn, .hct,
  .inner-tab, .itab, .nav-item {
    min-height: 44px !important;
  }

  /* 터치 피드백 */
  .prod-card:active, .exp-card:active,
  .dealer-card:active, .guide-card:active {
    transform: scale(0.98);
    opacity: .92;
    transition: transform .1s, opacity .1s;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21. 스크롤 탑 버튼
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .scroll-top-btn {
    bottom: calc(var(--bot) + 16px) !important;
    right: 14px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   22. 인증/로그인 페이지
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .auth-tab-wrap { gap: 4px !important; }
  .auth-card { padding: 20px 16px !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   23. 수수료 팝업 배경 고정 (overflow 방지)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  /* 팝업 열릴 때 body 스크롤 방지 */
  body.popup-open,
  body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   24. 체험·교육 카드 스크롤
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .card-scroll {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    width: 100% !important;
    gap: 10px !important;
    padding: 0 12px 16px !important;
    box-sizing: border-box !important;
  }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   25. 기타 — 공통 overflow 방어
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  /* table 가로 스크롤 허용 */
  table {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    -webkit-overflow-scrolling: touch;
  }

  /* pre/code 가로 스크롤 */
  pre, code {
    overflow-x: auto !important;
    max-width: 100% !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
  }

  /* 딜러/가이드 카드 그리드 */
  .dealer-grid,
  .guide-grid {
    grid-template-columns: 1fr !important;
    padding: 0 12px !important;
  }

  /* 구인 게시판 */
  .job-card,
  .nanum-card {
    width: 100% !important;
    min-width: 0 !important;
  }
}