/* 기본 HTML 요소 스타일 - 전체 페이지 레이아웃 설정 */
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* 가로/세로 스크롤바 숨기기 */
}

/* body 스타일 - 페이지 전체 배경 및 스크롤바 설정 */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #000000; /* 블랙 배경 */
    width: 100%;
    height: 100vh;
    overflow: hidden; /* 가로/세로 스크롤바 숨기기 */
    /* 스크롤바 숨기기 (크롬, 엣지, 사파리) */
    scrollbar-width: none; /* 파이어폭스 */
    -ms-overflow-style: none; /* IE, 엣지 */
}

/* 초기 진입 시 전체 화면 안내 오버레이 */
#intro-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7); /* 투명도 70%의 검은 면 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000; /* 지도와 패널보다 항상 위에 */
    cursor: pointer;
}

#intro-overlay-content {
    color: #ffffff;
    text-align: center;
    padding: 24px 32px;
    max-width: 80%;
    line-height: 1.5;
}

/* 초기 안내 문구용 Noto Serif KR 폰트 스타일 */
.noto-serif-kr-guide {
    font-family: "Noto Serif KR", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

#intro-overlay-content h1 {
    margin: 0 0 16px;
    /* 제목을 크게 표시하되 화면을 너무 가리지 않도록 약간 축소 */
    font-size: 110px;
    color: #A8F368;
}

/* 제목 아래 설명 문구 (1~4번보다 조금 작은 크기, 흰색) */
.intro-subtitle {
    margin: 0 0 20px;
    font-size: 18px;
    color: #ffffff;
}

#intro-overlay-content ol {
    margin: 0;
    padding-left: 0;
    /* 번호와 문장을 중앙 정렬 */
    text-align: center;
    list-style-position: inside;
    /* 안내 문구(1~4번) 글자를 조금 더 크게 */
    font-size: 20px;
    /* 1~4번 문장의 행간을 더 넓게 */
    line-height: 2.2;
}

/* 안내 문구 강조용 색상 (출발/도착과 동일 계열) */
.intro-green {
    color: #A8F368;
}

.intro-pink {
    color: #F9035E;
}

/* 웹킷 브라우저 스크롤바 숨기기 */
body::-webkit-scrollbar {
    display: none; /* 크롬, 사파리, 엣지 */
}

/* 지도 컨테이너 스타일 */
#map {
    width: 100%;
    height: 100vh;
    /* 지도 영역은 타일 색과 비슷한 밝은 색으로 설정하여
       확대/축소 시 타일 사이에 보이는 수직/수평선(틈)을 최소화 */
    background: #f2efe9;
    margin-left: 0;
    transition: margin-left 0.3s ease; /* 패널 표시 시 부드러운 이동 효과 */
}

/* Leaflet 기본 컨테이너 배경도 타일 색과 맞춰서
   확대/축소 시 생기는 검은 틈이 보이지 않도록 설정 */
.leaflet-container {
    background: #f2efe9 !important;
}

/* 타일 사이 미세한 틈이 생길 때 노출되는 배경색 통일 */
.leaflet-tile {
    background-color: #f2efe9;
}

/* 통합 패널이 있을 때 지도에 여백 추가 - 패널 너비만큼 왼쪽 여백 */
body:has(#info-panel) #map {
    margin-left: 350px;
}

/* 팝업 정보 박스 기본 스타일 */
.info {
    padding: 10px;
    background: rgba(255, 255, 255, 0.95); /* 반투명 흰색 배경 (텍스트 가독성을 위해 유지) */
    border-radius: 5px;
    font-size: 14px;
}

/* Tooltip 스타일 - 마커에 마우스를 올렸을 때 표시되는 툴팁 */
.custom-tooltip {
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    white-space: nowrap !important;
}

/* 툴팁 화살표 색상 */
.custom-tooltip::before {
    border-top-color: rgba(0, 0, 0, 0.8) !important;
}

/* 자전거 마커 스타일 - 지도에 표시되는 자전거 대여소 마커 */
.bike-marker {
    position: relative;
    width: 34px;
    height: 44px;
    margin-left: -17px; /* 마커 중앙 정렬 */
    margin-top: -38px;
    transition: transform 0.3s ease;
}

/* 마커 핀 모양 (테어드롭/역방울 형태) */
.bike-marker::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 24px;
    height: 32px;
    border-radius: 50% 50% 50% 0; /* 테어드롭 모양 */
    background: #000000; /* 검은색 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    transform-origin: 0 100%;
    transform: translateX(-50%) rotate(-45deg); /* 45도 회전하여 핀 모양 생성 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 마커 중앙의 흰색 원 (컷아웃 요소) */
.bike-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFFFFF; /* 흰색 */
    box-shadow: none;
    transition: transform 0.3s ease;
    z-index: 1;
}

/* 마커 하단의 막대 (핀의 손잡이 부분) */
.bike-marker__inner {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 10px;
    border-radius: 4px;
    background: #000000; /* 검은색 */
    box-shadow: 0 -4px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
}

/* 마커 호버 애니메이션 - 마우스를 올렸을 때 */
.leaflet-container .leaflet-marker-icon:hover .bike-marker,
.leaflet-container .bike-marker:hover {
    transform: translateX(-50%) translateY(-5px) scale(1.15);
    z-index: 1000;
}

.leaflet-container .leaflet-marker-icon:hover .bike-marker::before,
.leaflet-container .bike-marker:hover::before {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    transform: translateX(-50%) rotate(-45deg) scale(1.1);
}

.leaflet-container .leaflet-marker-icon:hover .bike-marker::after,
.leaflet-container .bike-marker:hover::after {
    transform: translateX(-50%) scale(1.2);
}

.leaflet-container .leaflet-marker-icon:hover .bike-marker .bike-marker__inner,
.leaflet-container .bike-marker:hover .bike-marker__inner {
    transform: translateX(-50%) scale(1.1);
}

/* 마커 클릭 애니메이션 */
@keyframes markerClick {
    0% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(0.9);
    }
    100% {
        transform: translateX(-50%) scale(1.1);
    }
}

@keyframes markerPulse {
    0% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    }
    50% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    }
    100% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    }
}

.bike-marker.marker-clicked {
    animation: markerClick 0.4s ease;
}

.bike-marker.marker-clicked::before {
    animation: markerPulse 0.6s ease;
}

/* 마커 클러스터 스타일 - 여러 마커를 그룹화하여 표시하는 원형 버튼 */
.bike-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #000000; /* 블랙 */
    color: white;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    transition: transform 0.2s ease;
}

/* 클러스터 내부 숫자 텍스트 위치 조정 */
.bike-cluster span {
    transform: translateY(1px);
}

/* 작은 클러스터 (마커 개수가 적을 때) - 블랙 */
.bike-cluster.cluster-small {
    background: #000000;
}

/* 중간 크기 클러스터 - 블랙 */
.bike-cluster.cluster-medium {
    background: #000000;
}

/* 큰 클러스터 (마커 개수가 많을 때) - 블랙 */
.bike-cluster.cluster-large {
    background: #000000;
    font-size: 16px;
}

/* 클러스터 호버 효과 - 마우스 오버 시 약간 확대 */
.bike-cluster:hover {
    transform: scale(1.05);
}

/* 경로를 따라 이동하는 작은 원 컨테이너 */
.route-circle-marker-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* 경로를 따라 이동하는 작은 원 */
.route-circle-icon {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    /* 경로 안내 점 색상 - 사용자 지정 색상 (#590c28) */
    background: #9f003a !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10000 !important;
    transform: translateZ(0); /* GPU 가속 */
    pointer-events: none !important;
}

/* 자전거 아이콘 애니메이션 효과 */
@keyframes bikeMove {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
    100% {
        transform: translateY(0);
    }
}

/* 경로 라인 그라디언트 애니메이션 */
.route-line-gradient {
    /* 경로 라인 단색 색상 (#9f003a) */
    stroke: #9f003a;
    stroke-width: 5;
    stroke-opacity: 0.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* SVG 그라디언트 애니메이션 (사용 안 함 – 경로 라인은 단색으로 표시) */
@keyframes gradientMove {
    0% {
        stop-color: #00E5FF;
        stop-opacity: 1;
    }
    50% {
        stop-color: #B388FF;
        stop-opacity: 1;
    }
    100% {
        stop-color: #00E5FF;
        stop-opacity: 1;
    }
}

.route-gradient-stop-1 {
    /* 애니메이션 비활성화 – 고정 색상 유지 */
    animation: none;
}

.route-gradient-stop-2 {
    /* 애니메이션 비활성화 – 고정 색상 유지 */
    animation: none;
}

/* 통합 정보 패널 스타일 - 화면 왼쪽에 고정된 정보 패널 */
#info-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 350px; /* 패널 너비 */
    background: #000000; /* 블랙 배경 */
    border-radius: 0;
    box-shadow: 2px 0 10px rgba(169, 243, 104, 0.3); /* 오른쪽 그림자 */
    z-index: 9999 !important; /* 다른 요소 위에 표시 */
    height: 100vh; /* 전체 화면 높이 */
    overflow: hidden;
    display: flex !important;
    flex-direction: column; /* 세로 방향 배치 */
    visibility: visible !important;
    opacity: 1 !important;
    user-select: none; /* 텍스트 선택 방지 */
}

/* 패널 내부 콘텐츠 영역 - 스크롤 가능한 영역 */
.info-panel-content {
    padding: 0;
    overflow-y: auto; /* 세로 스크롤 활성화 */
    flex: 1; /* 남은 공간 모두 차지 */
    display: flex;
    flex-direction: column;
    /* 스크롤바 숨기기 (크롬, 엣지, 사파리) */
    scrollbar-width: none; /* 파이어폭스 */
    -ms-overflow-style: none; /* IE, 엣지 */
}

/* 웹킷 브라우저 스크롤바 숨기기 */
.info-panel-content::-webkit-scrollbar {
    display: none; /* 크롬, 사파리, 엣지 */
}

/* 정보 섹션 스타일 - 패널 내부의 각 정보 블록 (마커 옵션, 대여소 정보, 경로 정보) */
.info-section {
    background: #000000; /* 블랙 배경 */
    border-bottom: 1px solid rgba(169, 243, 104, 0.3);
    flex-shrink: 0; /* 축소되지 않도록 설정 */
    min-height: fit-content;
    margin: 8px; /* 섹션 간 간격 */
    border-radius: 8px; /* 둥근 모서리 */
    overflow: hidden;
}

/* 마지막 섹션의 하단 테두리 제거 */
.info-section:last-child {
    border-bottom: none;
}

/* 섹션 헤더 스타일 - 각 섹션의 제목 영역 */
.section-header {
    padding: 12px 18px;
    background: #000000; /* 블랙 배경 */
    border-bottom: 1px solid rgba(169, 243, 104, 0.3);
    position: sticky; /* 스크롤 시 상단에 고정 */
    top: 0;
    z-index: 10;
}

/* 섹션 헤더 제목 스타일 */
.section-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: white;
    text-transform: uppercase; /* 대문자 변환 */
    letter-spacing: 0.5px;
}

/* 섹션 콘텐츠 영역 - 실제 정보가 표시되는 영역 */
.section-content {
    padding: 15px 18px;
    min-height: 50px;
    max-height: none;
    overflow: visible; /* 내용이 넘치면 표시 */
    background: #000000; /* 블랙 배경 */
    color: white; /* 화이트 텍스트 */
}

/* 토글 버튼 스타일 - 섹션 접기/펼치기 버튼 */
.toggle-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: background 0.2s;
}

/* 토글 버튼 호버 효과 */
.toggle-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 옵션 그룹 스타일 - 옵션들을 묶는 컨테이너 */
.option-group {
    margin-bottom: 20px;
}

/* 마지막 옵션 그룹의 하단 여백 제거 */
.option-group:last-child {
    margin-bottom: 0;
}

/* 토글 스위치 컨테이너 - 체크박스를 토글 스위치로 표시 */
.toggle-switch {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

/* 기본 체크박스 숨기기 */
.toggle-switch input[type="checkbox"] {
    display: none;
}

/* 토글 스위치 슬라이더 배경 */
.slider {
    position: relative;
    width: 48px;
    height: 24px;
    background: rgba(169, 243, 104, 0.3); /* 비활성 상태 반투명 초록색 */ /* 비활성 상태 회색 */
    border-radius: 24px; /* 둥근 모서리 */
    transition: background 0.3s;
    margin-right: 12px;
    flex-shrink: 0;
}

/* 토글 스위치 내부 원형 버튼 */
.slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95); /* 반투명 흰색 배경 (텍스트 가독성을 위해 유지) */
    top: 3px;
    left: 3px;
    transition: transform 0.3s; /* 부드러운 이동 애니메이션 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 체크된 상태의 슬라이더 배경색 - 단색 초록색 */
.toggle-switch input[type="checkbox"]:checked + .slider {
    background: #A8F368;
}

/* 체크된 상태의 슬라이더 버튼 위치 - 오른쪽으로 이동 */
.toggle-switch input[type="checkbox"]:checked + .slider::before {
    transform: translateX(24px);
}

/* 토글 스위치 레이블 텍스트 */
.toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: white; /* 화이트 텍스트 */
}

/* 구별 필터 헤더 스타일 */
.district-header {
    font-size: 13px;
    font-weight: 600;
    color: white; /* 화이트 텍스트 */
    margin-bottom: 12px;
    text-transform: uppercase; /* 대문자 변환 */
    letter-spacing: 0.5px;
}

/* 구별 필터 접기/펼치기 아이콘 */
.district-toggle-icon {
    font-size: 10px;
    transition: transform 0.2s ease; /* 회전 애니메이션 */
    display: inline-block;
}

/* 구별 필터 목록 컨테이너 - 스크롤 가능 */
.district-filters {
    max-height: 300px;
    overflow-y: auto; /* 세로 스크롤 */
    padding-right: 5px;
}

/* 구별 필터 스크롤바 너비 */
.district-filters::-webkit-scrollbar {
    width: 6px;
}

/* 구별 필터 스크롤바 트랙 (배경) */
.district-filters::-webkit-scrollbar-track {
    background: rgba(169, 243, 104, 0.2);
    border-radius: 3px;
}

/* 구별 필터 스크롤바 썸 (드래그 가능한 부분) */
.district-filters::-webkit-scrollbar-thumb {
    background: #A8F368;
    border-radius: 3px;
}

/* 구별 필터 스크롤바 썸 호버 효과 */
.district-filters::-webkit-scrollbar-thumb:hover {
    background: #F9035E;
}

/* 구별 체크박스 스타일 - 각 구 선택 체크박스 */
.district-checkbox {
    display: flex;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
    color: white; /* 화이트 텍스트 */
    transition: color 0.2s;
}

/* 구별 체크박스 호버 효과 - 초록색으로 변경 */
.district-checkbox:hover {
    color: #A8F368;
}

/* 구별 체크박스 입력 요소 */
.district-checkbox input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #A8F368; /* 체크 표시 색상 */
}

/* 경로 계산 및 초기화 버튼 공통 스타일 */
.route-calculate-btn,
.route-clear-btn {
    width: 100%;
    padding: 10px;
    margin: 4px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

/* 경로 계산 버튼 - 단색 초록색 */
.route-calculate-btn {
    background: #A8F368;
    color: white;
}

/* 경로 계산 버튼 호버 효과 (비활성화 상태 제외) */
.route-calculate-btn:hover:not(:disabled) {
    background: #F9035E;
}

/* 경로 계산 버튼 비활성화 상태 */
.route-calculate-btn:disabled {
    background: rgba(169, 243, 104, 0.3); /* 비활성 상태 반투명 초록색 */
    cursor: not-allowed;
}

/* 경로 계산 버튼 활성화 상태 */
.route-calculate-btn.active {
    background: #F9035E;
}

/* 활성화된 경로 계산 버튼 호버 효과 */
.route-calculate-btn.active:hover {
    background: #A8F368;
}

/* 경로 초기화 버튼 - 단색 분홍색 */
.route-clear-btn {
    background: #F9035E;
    color: white;
}

/* 경로 초기화 버튼 호버 효과 */
.route-clear-btn:hover {
    background: #A8F368;
}

/* 경로 결과 표시 영역 */
.route-result {
    margin-top: 8px;
    font-size: 12px;
}

/* 경로 마커 스타일 - 출발지/도착지 마커 */
.route-marker {
    background: transparent !important;
    border: none !important;
}

/* 출발지 마커 내부 스타일 - 단색 초록색 배경 */
.route-start-marker .route-marker-inner {
    background: #A8F368;
    /* 출발 텍스트를 검정색으로 표시 */
    color: #000000;
    /* 아이콘 크기(50x26)에 맞춰 텍스트를 정확히 중앙 정렬 */
    display: flex;
    align-items: center;   /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    min-width: 50px;
    height: 26px;
    padding: 0 12px;
    border-radius: 15px; /* 둥근 모서리 */
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(169, 243, 104, 0.3);
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

/* 도착지 마커 내부 스타일 - 단색 분홍색 배경 */
.route-end-marker .route-marker-inner {
    background: #F9035E;
    color: white;
    /* 아이콘 크기(50x26)에 맞춰 텍스트를 정확히 중앙 정렬 */
    display: flex;
    align-items: center;   /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    min-width: 50px;
    height: 26px;
    padding: 0 12px;
    border-radius: 15px; /* 둥근 모서리 */
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(249, 3, 94, 0.3);
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

.route-info-placeholder {
    text-align: center;
    color: white; /* 화이트 텍스트 */
    font-size: 14px;
    padding: 20px 0;
}

.station-info-placeholder {
    text-align: center;
    color: white; /* 화이트 텍스트 */
    font-size: 14px;
    padding: 20px 0;
}

/* 모던한 대여소 정보 디자인 */
.station-info-modern {
    padding: 0;
}

.station-header-minimal {
    margin-bottom: 20px;
    position: relative;
}

/* 대여소 이름 위의 큰 원은 숨김 처리 */
.header-circle {
    display: none;
}

.header-circle-main {
    display: none;
}

.station-name-title-minimal {
    font-size: 24px;
    font-weight: 800;
    color: white; /* 화이트 텍스트 */
    margin: 0 0 8px 0;
    line-height: 1.2;
    /* 대여소 이름 아래 초록색 밑줄 추가 (출발 마커 색상과 동일) */
    border-bottom: 2px solid #A8F368;
    padding-bottom: 4px;
}

.station-location-minimal {
    font-size: 13px;
    color: white; /* 화이트 텍스트 */
    margin-top: 4px;
}

.address-section-minimal {
    background: #000000; /* 블랙 배경 */
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    border-left: 4px solid #A8F368;
}

.address-label-minimal {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white; /* 화이트 텍스트 */
    margin-bottom: 8px;
    font-weight: 600;
}

.address-value-minimal {
    font-size: 14px;
    color: white; /* 화이트 텍스트 */
    line-height: 1.5;
}

/* 거치율 원형 그리드 디자인 - 거치율을 원형 점들로 시각화 */
.usage-grid-section {
    background: #000000; /* 블랙 배경 */
    padding: 24px 20px;
    margin-bottom: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(169, 243, 104, 0.3);
}

/* 거치율 그리드 헤더 영역 */
.usage-grid-header {
    margin-bottom: 20px;
}

/* 거치율 퍼센테이지 표시 - 큰 숫자 */
.usage-grid-percentage {
    font-size: 48px;
    font-weight: 800;
    color: white;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px; /* 글자 간격 좁히기 */
}

/* 거치율 설명 텍스트 */
.usage-grid-description {
    font-size: 14px;
    color: white; /* 화이트 텍스트 */
    font-weight: 500;
}

/* 거치율 원형 그리드 컨테이너 - 10열 그리드 */
.usage-grid-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 10개 열 */
    gap: 8px; /* 원 사이 간격 */
    max-width: 100%;
    grid-auto-rows: auto;
}

/* 거치율 원형 점 기본 스타일 */
.usage-dot {
    width: 100%;
    aspect-ratio: 1; /* 정사각형 비율 유지 */
    border-radius: 50%; /* 원형 */
    transition: transform 0.2s ease;
    min-width: 12px; /* 최소 너비 설정 */
    min-height: 12px; /* 최소 높이 설정 */
}

/* 거치율 원형 점 호버 효과 - 확대 */
.usage-dot:hover {
    transform: scale(1.2);
}

/* 사용량 원형 점 색상 규칙
   - usage-dot-empty  : 기본 영역 (회색)
   - usage-dot-filled : 100% 이하 사용 영역 (출발 마커와 동일 초록색 #A8F368)
   - usage-dot-over   : 100% 초과 영역 (도착 마커와 동일 핑크색 #F9035E)
*/
.usage-dot-filled {
    /* 출발지 마커(.route-start-marker)와 동일한 초록색 */
    background: #A8F368; /* 100 이하: 초록색 */
    box-shadow: 0 2px 4px rgba(169, 243, 104, 0.4);
}

.usage-dot-empty {
    background: #b0b0b0; /* 기본: 회색 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.usage-dot-over {
    /* 도착지 마커(.route-end-marker)와 동일한 핑크색 */
    background: #F9035E; /* 100 초과: 핑크색 */
    box-shadow: 0 2px 4px rgba(249, 3, 94, 0.5);
}

/* 현재 자전거 수와 거치대 수를 나란히 배치하는 컨테이너 */
.count-info-container {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.count-info-container > div {
    flex: 1;
}

/* 현재 자전거 수 섹션 (거치율과 동일한 타이포 스타일) */
.bike-count-section {
    background: #000000; /* 블랙 배경 */
    padding: 24px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(169, 243, 104, 0.3);
}

.bike-count-value {
    font-size: 48px;
    font-weight: 800;
    color: white; /* 화이트 텍스트 */
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

.bike-count-value .unit-text {
    font-size: 24px;
    font-weight: 600;
    margin-left: 4px;
    vertical-align: baseline;
    color: white; /* 화이트 텍스트 */
}

.bike-count-label {
    font-size: 14px;
    color: white; /* 화이트 텍스트 */
    font-weight: 500;
}

/* 거치대 수 섹션 (현재 자전거, 거치율과 색 통일) */
.rack-count-section {
    background: #000000; /* 블랙 배경 */
    padding: 24px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(169, 243, 104, 0.3);
}

.rack-count-value {
    font-size: 48px;
    font-weight: 800;
    color: white; /* 화이트 텍스트 */
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -1px;
}

.rack-count-value .unit-text {
    font-size: 24px;
    font-weight: 600;
    margin-left: 4px;
    vertical-align: baseline;
    color: white; /* 화이트 텍스트 */
}

.rack-count-label {
    font-size: 14px;
    color: white; /* 화이트 텍스트 */
    font-weight: 500;
}

.additional-info-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(169, 243, 104, 0.3);
}

.additional-info-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white; /* 화이트 텍스트 */
    margin-bottom: 12px;
    font-weight: 600;
}

.additional-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(169, 243, 104, 0.3);
}

.additional-info-item:last-child {
    border-bottom: none;
}

.additional-info-label {
    font-size: 12px;
    color: white; /* 화이트 텍스트 */
    font-weight: 500;
}

.additional-info-value {
    font-size: 13px;
    color: white; /* 화이트 텍스트 */
    font-weight: 600;
    text-align: right;
}

.route-info-loading {
    text-align: center;
    color: white; /* 화이트 텍스트 */
    font-size: 14px;
    padding: 20px 0;
}

.route-info-error {
    text-align: center;
    color: #F9035E; /* 분홍색 에러 텍스트 */
    font-size: 14px;
    padding: 20px 0;
}

.route-info-item {
    margin-bottom: 16px;
}

.route-info-item:last-child {
    margin-bottom: 0;
}

.route-info-label {
    font-size: 12px;
    color: white; /* 화이트 텍스트 */
    margin-bottom: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.route-info-value {
    font-size: 16px;
    color: white; /* 화이트 텍스트 */
    font-weight: 600;
}

.route-info-value.highlight {
    color: #A8F368; /* 강조 텍스트 색상 - 초록색 */
    font-size: 18px;
}

.route-info-divider {
    height: 1px;
    background: rgba(169, 243, 104, 0.3);
    margin: 16px 0;
}

.route-info-note {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7); /* 반투명 화이트 텍스트 */
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(169, 243, 104, 0.2);
    font-style: italic;
}

/* 자전거 아이콘 스타일 */
.bike-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0 2px;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.bike-icon:hover {
    transform: scale(1.2);
}

.bike-icon-gray {
    /* 사용량 보기 시 색상을 모두 통일하기 위해 핑크색으로 변경 */
    color: #F9035E;
    filter: none;
}

.bike-icon-green {
    color: #F9035E;
    filter: none;
}

.bike-icon-pink {
    color: #F9035E;
    filter: none;
}

.bike-icons-container {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-left: 8px;
    flex: 1;
}