html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
}

.container-fluid {
    height: 100%;
    margin: 0;
    padding: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

.map-container {
    flex: 1;
    padding: 0;
}


#map {
    width: 100%;
    height: 100%;
}


.marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .marker-content {
    display: flex;
    align-items: center;
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 16px;
    white-space: nowrap;
    background-color: #007bff; /* 기본 배경색, JS에서 변경 가능 */
    color: white; /* 기본 텍스트 색상, JS에서 변경 가능 */
    cursor: pointer; /* 버튼 느낌을 주기 위해 커서를 포인터로 변경 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 그림자 추가 */
    transition: background-color 0.3s ease; /* 배경색 전환 효과 */
  }
  
  .marker-content:hover {
    background-color: #0056b3; /* 호버 시 배경색 변경 */
  }
  
  .marker-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: white; /* 아이콘을 감싸는 Circle의 배경색 */
    border-radius: 50%;
    margin-right: 8px; /* 아이콘과 텍스트 사이의 간격 */
  }
  
  .marker-pointer {
    position: absolute;
    top: 100%; /* 포인터가 아이콘의 아래에 위치하도록 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid; /* 포인터 색상은 JS에서 설정 */
  }