/* 모바일 화면용 스타일 */
@media (max-width: 768px) {
  html, body {
    height: 100%;
  }

  #main-container {
    flex-direction: column;
  }

  /* 지도 섹션이 위쪽에 전체 폭으로 */
  #map-section {
    flex: none;
    width: 100%;
    height: 60vh; /* 화면 높이의 60% */
    padding: 4px;
  }

  #map {
    height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /* 사이드바를 하단에 고정 */
  #sidebar {
    width: 100%;         /* 화면 가로 꽉 채우기 */
    min-width: auto;
    max-width: none;
    border-left: none;
    border-top: 1px solid #a3b1c2; /* 위쪽 테두리로 변경 */
    padding: 12px;
    max-height: 0;       /* 접힌 상태 */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    position: relative;
  }

  /* 드래그 핸들 숨김 */
  #resizer {
    display: none;
  }

  /* 헤더와 푸터 높이 조절 */
  #header {
    height: 25px;
    padding: 8px 15px;
    font-size: 14px;
  }

  #footer {
    height: 25px;
    font-size: 12px;
    padding: 8px 10px;
  }

  /* 버튼과 입력 필드 크기 약간 키우기 */
  #sidebar button {
    font-size: 15px;
    padding: 6px 12px;
  }

  #circleRadiusInput, #sidebar input[type="number"] {
    width: 55px;
    font-size: 14px;
  }
}