/* 파일 위치: shuttl_for_web_ftp/css/styles.css */
/* styles.css */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
}
/* 셔틀 리스트 버튼이 지도 위에 항상 보이도록 z-index를 높입니다. */
#shuttleListButton {
  z-index: 1001; /* 모달의 z-index (1050)보다 낮지만, 지도 (1000)보다 높게 설정 */
}

/* 셔틀 마커 컨테이너 - 이미지를 감싸는 요소 */
.shuttle-marker-container {
    position: relative; /* 자식 요소인 라벨의 위치 기준점 역할을 함 */
    display: inline-block; /* 크기를 내용물에 맞춤 */
}

/* 네이버 지도 마커 라벨 스타일 */
.naver-map-marker-label {
    /* 배경 스타일 */
    background-color: #2c3e50; /* 차량번호 배경색- 어두운 남색 계열 */
    color: white; /* 글자색 흰색 */
    border-radius: 10px; /* 라운드 모서리 */
    padding: 2px 6px; /* 위아래, 좌우 패딩 */
    font-size: 12px; /* 글자 크기 */
    
    /* 위치 조정 */
    position: absolute;
    top: 100%; /* 부모 컨테이너 아래쪽으로 이동 */
    left: 50%; /* 부모 컨테이너 가로 중앙으로 이동 */
    transform: translate(-50%, 0%); /* 정확히 중앙에 오도록 조정 */
    margin-top: 5px; /* 마커 이미지와 라벨 사이 간격 조정 */
    z-index: 100; /* 마커 라벨이 지도 위에 보이도록 */
}

/* 셔틀 리스트 모달이 페이지 로드 시 잠시 보이는 것을 방지 */
/* Bootstrap의 .modal 클래스에는 기본적으로 display: none이 포함되어 있으므로, */
/* .show 클래스가 없을 때만 명시적으로 display: none을 적용하여 깜빡임을 방지합니다. */
/* 하지만 Bootstrap JS가 제대로 로드되면 이 규칙은 .show 클래스에 의해 무시됩니다. */
.modal:not(.show) {
    display: none;
}

/* ---------------------------------------------------------------------------------- */
/* NEW: Responsive Marker Icon Sizing and Font Size */
/* ---------------------------------------------------------------------------------- */

/* Extra small screens (e.g., smaller mobile phones) - 575px 이하 */
.shuttle-marker-icon {
    width: 40px;
    height: auto;
}
.naver-map-marker-label {
    font-size: 10px;
}

/* Small screens (e.g., mobile phones) - 576px 이상 */
@media (min-width: 576px) {
    .shuttle-marker-icon {
        width: 50px;
    }
    .naver-map-marker-label {
        font-size: 12px;
    }
}

/* Medium screens (e.g., tablets) - 768px 이상 */
@media (min-width: 768px) {
    .shuttle-marker-icon {
        width: 60px;
    }
    .naver-map-marker-label {
        font-size: 14px;
    }
}

/* Large screens (e.g., small desktops) - 992px 이상 */
@media (min-width: 992px) {
    .shuttle-marker-icon {
        width: 70px;
    }
    .naver-map-marker-label {
        font-size: 16px;
    }
}

/* Extra large screens (e.g., large desktops) - 1200px 이상 */
@media (min-width: 1200px) {
    .shuttle-marker-icon {
        width: 80px;
    }
    .naver-map-marker-label {
        font-size: 18px;
    }
}