/* ==========================================================
   mobile-modal.css
   - 모바일 버전 공용 CSS (모달, 스크롤, 뷰포트 보호)
   - mobile.jsp에서 <link rel="stylesheet" href="/css/mobile-modal.css"> 로 적용
   ========================================================== */

/* 1. 전체 문서 수준 안전망 */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: contain;
  }
  
  html.m-modal-open, body.m-modal-open {
    overflow-x: clip; /* 최신 브라우저 */
    overflow-x: hidden;
  }
  
  /* 2. 모달 래퍼 기본 세팅 */
  .m-modal,
  .modal {
    position: fixed;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  
  /* 3. Bootstrap fullscreen 모달 한정 여백/폭 보정 */
  .modal-dialog.modal-fullscreen {
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* 4. 모달 콘텐츠 영역의 가로 넘침 방지 */
  .modal-content,
  .modal-content.modal-content_m {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 0;
    border: 0;
    box-sizing: border-box;
  }
  
  /* 5. 모달 바디 기본 레이아웃 보정 */
  .modal-body,
  .modal-body.modal-body_m {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  /* 6. 문제의 modal-body 2번째 인스턴스 (goods_list_m 등) 완전 차단 */
  .modal-dialog.modal-dialog-centered.modal-fullscreen > .modal-content.modal-content_m > .modal-body.modal-body_m:nth-of-type(2) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }
  
  /* 7. 내부 자식요소 폭 제한 (100vw, 음수마진, 테이블, 이미지 등) */
  .modal-body.modal-body_m * {
    box-sizing: border-box;
    min-width: 0;
  }
  
  .modal-body.modal-body_m img,
  .modal-body.modal-body_m video,
  .modal-body.modal-body_m canvas,
  .modal-body.modal-body_m iframe {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  .modal-body.modal-body_m table {
    width: 100%;
    table-layout: fixed;
  }
  
  .modal-body.modal-body_m th,
  .modal-body.modal-body_m td {
    word-break: break-word;
  }
  
  .modal-body.modal-body_m .row {
    margin-left: 0;
    margin-right: 0;
  }
  
  .modal-body.modal-body_m [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  /* 8. 긴 텍스트 / pre 코드영역 방어 */
  .modal-body.modal-body_m pre {
    white-space: pre-wrap;
    word-break: break-word;
  }
  
  /* 9. 슬라이더, 캐러셀, 가로스크롤 영역 */
  .modal-body.modal-body_m .slider,
  .modal-body.modal-body_m .carousel,
  .modal-body.modal-body_m .h-scroll-wrap {
    overflow: hidden;
  }
  
  /* 10. fixed 요소가 뷰포트 밖으로 나갈 때 클리핑 */
  .modal-body.modal-body_m [style*="position: fixed"],
  .modal-body.modal-body_m .is-fixed {
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
  }