/* ── mobile.css ── */
/* 1024px 이하 화면(태블릿/모바일)에서 작동하는 기존 세로형 모바일 뷰 복원 및 순서 재배치 */

/* 1. 래퍼 장벽 제거하여 직속 자식들을 단일 Flex 계층으로 평면화 */
.left-area, .right-area {
  display: contents !important;
}

/* 2. 메인 컨테이너 세로 플렉스 정렬 */
.main-container {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 650px !important;
  margin: 0 auto !important;
  padding: 10px !important;
  box-sizing: border-box;
}

/* 3. 📱 모바일 세로 배치 순서 강제 재지정 (지도는 위로, 배너/푸터는 아래로) */
#section-header { 
  order: 1 !important; 
}
#ad-section, #stats-section, #statusMessage, .main-container > .container:nth-child(2) { 
  order: 2 !important; 
}
.map-container { 
  order: 3 !important; 
}
#info-section { 
  order: 4 !important; 
}
#campaign-section { 
  order: 5 !important; 
  display: flex !important;
  margin: 4px auto !important; /* 상하 간격 4px로 쫀쫀하게 압축 */
}
.footer-area { 
  order: 6 !important; 
  display: block !important;
  padding: 20px 15px !important;
  text-align: center !important;
  color: #64748b !important;
  font-size: 13px !important;
  border-top: 1px solid #e2e8f0 !important;
  margin: 10px auto 40px auto !important; /* 상단 여백 10px로 압축 */
}

/* 4. 모바일 전용 컨테이너 넓이 및 상하 간격 압축 */
.container {
  max-width: 650px !important;
  margin: 4px auto !important; /* 15px -> 4px 압축 */
}

#info-section {
  max-width: 650px !important;
  margin: 4px auto !important; /* 15px -> 4px 압축 */
}

/* 5. 모바일 지도 규격 고정 */
#map {
  width: 100% !important;
  height: 350px !important;
  margin: 0 0 4px 0 !important; /* 지도 하단 간격 압축 */
}

/* 6. 모바일 카드 크기 및 펼침/축소 관련 순정 규격 복원 */
.detail-wrapper {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  padding: 15px !important;
}

.detail-box {
  flex: 1 !important;
  padding: 15px 15px 40px 15px !important; /* 모바일용 넓은 패딩 복구 */
  font-size: 13px !important;                 /* 모바일용 시인성 높은 폰트 복구 */
  min-height: 150px !important;               /* 모바일용 원래 높이 복구 */
}

/* 모바일용 확장/축소 애니메이션 복원 */
.detail-box.expanded {
  flex: 4 !important;
}

.detail-box.shrunk {
  flex: 1 !important;
  opacity: 0.7 !important;
}

/* 7. 모바일 확대 버튼(▶) 무조건 살림 */
.expand-btn {
  display: flex !important;
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
}