/* ==============================================
   모바일 깨짐 방지 글로벌 보강 (전 페이지 공통)
   ============================================== */

/* 1. 가로 스크롤 방지 */
html, body { overflow-x: hidden; max-width: 100%; }

/* 2. 이미지·미디어·iframe 반응형 */
img, video, iframe, picture, svg:not([width]) { max-width: 100%; height: auto; display: block; }

/* 3. 긴 단어·URL 줄바꿈 */
p, h1, h2, h3, h4, li, td, th, a, span, div { word-break: break-word; overflow-wrap: anywhere; }

/* 4. 테이블 모바일 스크롤 */
@media (max-width: 640px) {
  table:not([data-noscroll]) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* 5. 입력 폼 자동 줌 방지 (iOS 16px 미만 input이면 줌됨) */
@media (max-width: 640px) {
  input, textarea, select, button {
    font-size: max(16px, 1rem) !important; /* iOS 줌 방지 */
  }
  input[type=checkbox], input[type=radio] { width: auto !important; font-size: inherit !important; }
}

/* 6. 컨테이너 padding 보강 */
@media (max-width: 480px) {
  .hpx-hero-inner, .pd-wrap, .ct-wrap, .co-wrap, .oc-wrap, .lg-wrap, .sh-wrap, .cm-wrap, .cw-wrap, .cp-wrap, .mp-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* 7. 폰트 사이즈 일관성 (clamp 사용 안 한 곳) */
@media (max-width: 480px) {
  .hpx-h1 { font-size: clamp(28px, 7vw, 38px) !important; }
}

/* 8. 카드 padding 줄임 */
@media (max-width: 480px) {
  .hpx-feat, .hpx-tier, .hpx-faq-item, .mp-card, .adm-card, .sh-prod, .cp-card, .cw-card {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* 9. 버튼 최소 터치 영역 (44px) */
@media (max-width: 480px) {
  button, .btn, a.btn, a.cta, .hpx-btn-mega, .hpx-btn-ghost, .pd-btn-buy, .pd-btn-cart, .co-btn-pay {
    min-height: 44px;
  }
}

/* 10. flex/grid wrap 강화 */
.hpx-cta-row, .hpx-trust, .hpx-final-btns, .mb-filters, .at-mini, .sh-cats, .gl-cats, .pd-actions, .oc-actions { flex-wrap: wrap; }

/* 11. iframe (지도·동영상) 반응형 wrapper */
.responsive-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.responsive-embed iframe, .responsive-embed video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* 12. 텍스트 줄임 (제목·라벨) 보강 */
@media (max-width: 480px) {
  .cm-post-title, .sh-prod h3, .pd-info h1, .mp-head-h1 {
    word-break: keep-all;
  }
}

/* 13. 모달·토스트 모바일 위치 (이미 hj-ui에 적용되어 있지만 추가 보강) */
@media (max-width: 560px) {
  .hj-modal { max-width: calc(100vw - 28px) !important; }
  .hj-modal-head, .hj-modal-body, .hj-modal-foot { padding-left: 20px !important; padding-right: 20px !important; }
}

/* 14. 가로 스크롤 가능 영역 명시 (chip 그룹 등) */
.cm-cats, .sh-cats, .mp-nav, .pd-tabs, .cm-sort {
  -webkit-overflow-scrolling: touch;
}

/* 15. 안전 여백 (iPhone notch) */
@supports(padding: max(0px)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .cm-write-fab, .cw-actions, .cp-comment-form { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* 16. 가로 모드 (landscape) 모달 높이 */
@media (max-height: 480px) and (orientation: landscape) {
  .hj-modal { max-height: 88vh; overflow-y: auto; }
  .hj-modal-body { max-height: 60vh; overflow-y: auto; }
}

/* 17. 다크모드 시 토스트 가시성 */
@media (prefers-color-scheme: dark) {
  .hj-toast { background: rgba(30, 41, 59, .96); color: #F1F5F9; border-color: rgba(255,255,255,.08); }
  .hj-toast .body .msg { color: #94A3B8; }
}

/* 18. 접근성 — focus visible */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #7C3AED;
  outline-offset: 2px;
}

/* 19. 모션 줄이기 환경 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 20. 인쇄 — 사업자 정보 포함 (PG 심사 자료용) */
@media print {
  .cm-write-fab, .hj-toast, .hpx-spotlight { display: none !important; }
  .shop-legal-foot { color: #000; background: #fff; border-top: 1px solid #000; }
}