/* ===== (중요) 모바일 가로 튐 방지 ===== */
 html, body { overflow-x: hidden; }

 /* ===== 지도 표시 크기(PC) ===== */
 .map-image-wrap{
   display: flex;
   justify-content: center;
   width: 100%;
   max-width: 100%;
  position: relative; /* ✅ 플로팅 버튼 기준점 */
 }

 /* map-stage는 실제 지도(이걸 모달로 "이동"시킬 거라 ID 중복 없음) */
 .map-stage{
   width: 100%;
   max-width: 920px;
   border-radius: 14px;
   overflow: hidden;
   background: #fff;
   border: 1px solid var(--line, #e5e7eb);
 }

 .map-stage svg{
   width: 100%;
   height: auto;
   display: block;
 }

 /* ===== 모바일: 지도는 '축소 미리보기' + 탭하여 확대 =====
 @media (max-width: 768px){
   .map-preview::after{
     content: "탭하여 확대";
     position: absolute;
     right: 12px;
     bottom: 12px;
     background: rgba(0,0,0,.6);
     color: #fff;
     font-size: 12px;
     padding: 6px 10px;
     border-radius: 20px;
   }
 }
 */

 /* ==============================
    ✅ 지도 확대하기 버튼 스타일
    ============================== */
 .map-zoom-row{
   display:flex;
   justify-content:flex-end;
   margin: 10px 0;
 }

 .map-zoom-btn{
   border: 1px solid var(--line, #e5e7eb);
   background: #fff;
   padding: 10px 14px;
   border-radius: 12px;
   font-weight: 700;
   cursor: pointer;
 }

 @media (max-width: 768px){
   .map-zoom-row{ justify-content:center; }
   .map-zoom-btn{ width: 100%; }
 }

 /* ===== 모달 공통 ===== */
 .map-modal{
   position: fixed;
   inset: 0;
   display: none;
   z-index: 9999;
 }
 .map-modal.is-open{ display: block; }

 /* ✅ 중요: 시설 모달이 줌 모달보다 위로 오게 */
 #mapZoomModal{ z-index: 9999; }
 #mapModal{ z-index: 10000; }

 .map-modal__backdrop{
   position: absolute;
   inset: 0;
   background: rgba(0,0,0,.55);
 }

 /* ✅ 핵심 수정: 패널을 flex로, body를 스크롤 가능하게 */
 .map-modal__panel{
   position: relative;
   width: min(920px, calc(100vw - 24px));
   max-height: calc(100vh - 24px);
   margin: 12px auto;
   background: #fff;
   border-radius: 12px;
   overflow: hidden;                 /* 패널 자체는 숨김 유지 */
   box-shadow: 0 12px 40px rgba(0,0,0,.25);
   display: flex;
   flex-direction: column;
 }

 .map-modal__title{
   padding: 14px 16px;
   font-weight: 800;
   border-bottom: 1px solid #eee;
   flex: 0 0 auto;
 }

 /* ✅ 핵심 수정: 설명이 사진에 밀려도 아래가 잘리지 않게 */
 .map-modal__body{
   padding: 12px;
   overflow: auto;                  /* body 스크롤 */
   -webkit-overflow-scrolling: touch;
   flex: 1 1 auto;
 }

 /* ✅ 핵심 수정: 사진이 너무 커서 설명이 안 보이는 문제 방지 */
 .map-modal__body img{
   width: 100%;
   height: auto;
   display: block;
   border-radius: 10px;
   max-height: 68vh;                /* 설명 영역 확보 */
   object-fit: cover;
 }

 .map-modal__close{
   position: absolute;
   top: 10px;
   right: 10px;
   width: 36px;
   height: 36px;
   border: 0;
   background: rgba(0,0,0,.06);
   border-radius: 10px;
   cursor: pointer;
   font-size: 22px;
   line-height: 1;
   z-index: 3;
 }

 /* 클릭 가능한 요소 살짝 효과 */
 .svg-clickable:hover{ filter: brightness(0.97); }

 /* ===== 지도 확대 모달 전용(전체화면) ===== */
/* ✅ 확대 모달에서는 패널이 자르지 않게 */
.zoom-modal__panel{
  overflow: visible; /* 기존 hidden 때문에 잘리는 케이스 방지 */
}

/* ✅ 확대 컨테이너: 중앙정렬 + 여백 */
.zoom-host{
  height: 100%;
  overflow: auto;
  padding: 16px;                 /* 0 → 16px : 가장자리 잘림 느낌 제거 */
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
/* ✅ 확대 모달에서는 지도(SVG)를 화면 폭에 맞춤 */
.zoom-host #campMapStage{
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto;
}

.zoom-host #campMapStage svg{
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* ✅ 모바일에서 좌우 여백 포함해서 깔끔하게 보이게 */
@media (max-width: 768px){
  .zoom-host{
    padding: 10px;  /* 기존 16px이면 10px로 줄여도 OK */
  }
}


 /* ==============================
    ✅ 시설 모달: 여러장 갤러리
    ============================== */
 .modal-gallery{
   position: relative;
 }

 .gallery-frame{
   border-radius: 10px;
   overflow: hidden;
   touch-action: pan-y; /* 세로 스크롤은 허용, 가로 스와이프는 JS로 처리 */
 }

 /* 좌/우 버튼 */
 .gallery-btn{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 38px;
   height: 38px;
   border: 0;
   border-radius: 999px;
   background: rgba(0,0,0,.45);
   color: #fff;
   font-size: 24px;
   line-height: 1;
   cursor: pointer;
   display: grid;
   place-items: center;
   z-index: 2;
   user-select: none;
 }
 .gallery-btn.prev{ left: 10px; }
 .gallery-btn.next{ right: 10px; }

 .gallery-btn:disabled{
   opacity: .35;
   cursor: default;
 }

 /* 점(인디케이터) */
 .gallery-dots{
   display: flex;
   gap: 6px;
   justify-content: center;
   padding: 10px 0 0;
 }

 .gallery-dot{
   width: 8px;
   height: 8px;
   border-radius: 999px;
   border: 0;
   background: rgba(0,0,0,.18);
   cursor: pointer;
 }

 .gallery-dot.is-active{
   background: rgba(0,0,0,.55);
 }
/* ✅ 지도 오른쪽 아래 플로팅(둥둥) 버튼 */
.map-zoom-fab{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  border: 0;
  background: rgba(0,0,0,.65);
  color: #fff;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* PC에서 지도 폭이 920으로 중앙정렬이라 버튼이 살짝 안쪽으로 보이게 */
@media (min-width: 769px){
  .map-zoom-fab{
    right: calc(50% - 460px + 12px); /* 920/2 = 460 */
  }
}

/* 터치 영역 확대 */
.map-zoom-fab:active{
  transform: translateY(1px);
}
/* 모달 열릴 때 불필요한 페인트/컴포지팅 변동 줄이기 */
.map-modal,
.map-modal__panel,
#campMapStage {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 모달 열려있는 동안 배경쪽 고정/리페인트 최소화 */
html.modal-open, body.modal-open {
  overscroll-behavior: contain;
}

/* (선택) 모달 배경에 blur 같은거 쓰고있으면 모바일에서 깜빡임 유발 → 없애는게 안정적 */
.map-modal__backdrop {
  /* backdrop-filter: none;  // 혹시 추가돼있다면 blur 계열은 끄는게 좋아 */
}
.gallery-frame.is-loading{
  position: relative;
}
.gallery-frame.is-loading::after{
  content: "이미지 불러오는 중…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.25);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
}
.gallery-frame.is-loading img{
  filter: blur(2px);
  transform: scale(1.01);
}