/*
 * ========================================
 * locationTracker.css
 * '내 위치' 버튼 및 알림 팝업 스타일
 * ========================================
 */

/* 1. '내 위치' 버튼 기본 스타일 */
#myLocationBtn {
    position: absolute; /* 지도 위에 띄우기 */
    right: 15px;
    width: 36px;
    height: 36px;
    z-index: 1; /* 다른 UI 요소들과 겹치지 않게 */

    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px; /* 카카오맵 컨트롤과 유사한 사각형 */
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.2);*/
    cursor: pointer;

    /* 기본 아이콘 (SVG) */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="%23333" d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V1h-2v2.06A8.994 8.994 0 0 0 3.06 11H1v2h2.06A8.994 8.994 0 0 0 11 20.94V23h2v-2.06A8.994 8.994 0 0 0 20.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

#myLocationBtn:hover {
    background-color: #f9f9f9;
}

/* 2. '로딩 중'일 때 (스피너) */
#myLocationBtn.is-loading {
    pointer-events: none; /* 클릭 방지 */
    background-image: none !important;
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: spin 1s linear infinite;
}

/* 3. '추적 중'일 때 (활성화) */
#myLocationBtn.is-tracking {
    background-color: #007BFF;
    border-color: #007BFF;
    /* 흰색 아이콘 (SVG) */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="%23FFFFFF" d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3A8.994 8.994 0 0 0 13 3.06V1h-2v2.06A8.994 8.994 0 0 0 3.06 11H1v2h2.06A8.994 8.994 0 0 0 11 20.94V23h2v-2.06A8.994 8.994 0 0 0 20.94 13H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/></svg>');
}

/* 4. 스피너 애니메이션 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 5. 위치 정확도 알림 팝업(토스트) */
#location-accuracy-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 12px 20px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 1; /* 최상단에 표시 */
    opacity: 1;
    transition: opacity 0.5s ease-out;
    white-space: nowrap;
}

#my-location-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #1DA1F2;
    border: 2px solid white;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

#my-location-dot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* 부모와 동일한 16px */
    height: 100%; /* 부모와 동일한 16px */
    border-radius: 50%;
    background-color: #1DA1F2;
    animation: pulse-animation 1.5s infinite ease-out;
    z-index: 1;
}

@keyframes pulse-animation {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* 6. 버튼 반응형 위치 */
@media (max-width: 1150px) {
    #myLocationBtn {
        /* 모바일 상단 검색창(약 80px) + 줌컨트롤(약 60px) 아래 */
        top: 60px;
    }
}
@media (min-width: 1151px) {
    #myLocationBtn {
        top: 15px;
        right: 15px;
    }
}

/* 7. 길찾기 버튼 기본 스타일 (myLocationBtn과 유사하게) */
#goToKakaoMapBtn {
    position: absolute;
    right: 15px; /* myLocationBtn과 동일한 오른쪽 정렬 */
    width: 36px;
    height: 36px;
    z-index: 1;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.2);*/ /* myLocationBtn과 통일 */
    cursor: pointer;

    /* 구부러진 화살표 아이콘 (SVG) */
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.031 30.031" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 30.031 30.031"><path d="m25.299,8.779c0.977-0.977 0.977-2.559 0-3.535-0.976-0.977-2.559-0.977-3.535,0-0.977,0.977-0.977,2.559 0,3.535 0.976,0.977 2.559,0.977 3.535,0zm-5.768,6.701h3.502c0.383,0.218 0.872,0.182 1.199-0.142l3.539-3.505c0.042-0.042 0.061-0.095 0.094-0.141 0.084-0.075 0.179-0.13 0.26-0.21 2.541-2.517 2.541-6.598 0-9.114-2.541-2.517-6.661-2.517-9.202,0s-2.541,6.598 0,9.114c0.081,0.08 0.176,0.135 0.26,0.21 0.033,0.046 0.052,0.099 0.094,0.141l1.695,1.679h-1.504v0.037c-2.456,0.035-4.438,2.03-4.438,4.494 0,2.485 2.015,4.438 4.5,4.438h4c1.381,0 2.5,1.15 2.5,2.531s-1.119,2.5-2.5,2.5h-14.537l1.761-1.744c0.042-0.042 0.061-0.094 0.094-0.141 0.084-0.075 0.179-0.13 0.26-0.21 2.541-2.517 2.541-6.598 0-9.114-2.541-2.517-6.661-2.517-9.202,0-2.541,2.517-2.541,6.598 0,9.114 0.081,0.08 0.176,0.135 0.26,0.21 0.033,0.047 0.052,0.099 0.094,0.141l3.539,3.505c0.265,0.263 0.638,0.332 0.975,0.239h16.82v-0.006c2.456-0.035 4.438-2.03 4.438-4.494 0-2.448-1.957-4.43-4.391-4.489v-0.011l-4.234,.019c-1.321-0.067-2.375-1.15-2.375-2.487-0.001-1.382 1.118-2.564 2.499-2.564zm.818-5.39l.001-.001c-0.003-0.004-0.007-0.006-0.011-0.009-1.759-1.742-1.759-4.567 0-6.31 1.759-1.742 4.611-1.742 6.371,0 1.759,1.742 1.759,4.567 0,6.31-0.011,0.011-0.024,0.017-0.036,0.028l.003,.004-3.153,3.122-3.175-3.144zm-13.842,17.08l-3.175-3.146v-0.001c-0.003-0.003-0.007-0.006-0.011-0.009-1.759-1.742-1.759-4.567 0-6.31 1.759-1.742 4.611-1.742 6.371,0 1.759,1.742 1.759,4.567 0,6.31-0.011,0.011-0.024,0.018-0.036,0.029l.003,.003-3.152,3.124zm-1.743-7.926c-0.977,0.977-0.977,2.559 0,3.535 0.976,0.977 2.559,0.977 3.535,0 0.977-0.977 0.977-2.559 0-3.535-0.976-0.976-2.559-0.976-3.535,0z"/></svg>');    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

#goToKakaoMapBtn:hover {
    background-color: #f9f9f9;
}

/* 8. 길찾기 버튼 반응형 위치 (myLocationBtn 아래에 오도록) */
@media (max-width: 1150px) {
    #goToKakaoMapBtn {
        /* myLocationBtn의 top(60px) + 버튼 높이(36px) + 간격(8px) */
        top: 104px;
    }
}
@media (min-width: 1151px) {
    #goToKakaoMapBtn {
        /* myLocationBtn의 top(15px) + 버튼 높이(36px) + 간격(8px) */
        top: 59px;
        right: 15px; /* PC에서도 오른쪽 정렬 유지 */
    }
}

/* 9. 길찾기 버튼 '로딩 중'일 때 (스피너) */
#goToKakaoMapBtn.is-loading {
    pointer-events: none; /* 클릭 방지 */
    background-image: none !important; /* 기존 아이콘 숨기기 */
    /* 스피너 스타일 (myLocationBtn과 동일하게) */
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 36px; /* 크기 유지 */
    height: 36px; /* 크기 유지 */
    animation: spin 1s linear infinite; /* 기존 스핀 애니메이션 재사용 */
}

/* 10.  실시간 버스 범례 (myLocationBtn과 유사하게) */
#showLegend {
    position: absolute;
    right: 15px; /* myLocationBtn과 동일한 오른쪽 정렬 */
    width: 36px;
    height: 36px;
    z-index: 1;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.2);*/ /* myLocationBtn과 통일 */
    cursor: pointer;

    /* 구부러진 화살표 아이콘 (SVG) */
    background-image: url('../../images/icon/info.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

#showLegend:hover {
    background-color: #f9f9f9;
}

/* 11. 범례 버튼 반응형 위치 (goToKakaoMapBtn 아래에 오도록) */
@media (max-width: 1150px) {
    #showLegend {
        /* goToKakaoMapBtn top(104px) + 버튼 높이(36px) + 간격(8px) */
        top: 148px;
    }
}
@media (min-width: 1151px) {
    #showLegend {
        /* myLocationBtn의 top(59px) + 버튼 높이(36px) + 간격(8px) */
        top: 103px;
        right: 15px; /* PC에서도 오른쪽 정렬 유지 */
    }
}

.legend {
    position: absolute;
    top: 104px;
    right: 55px;
    max-width: 200px;
    width: auto;
    height: 230px;
    background-color: white;
    padding: 10px;
    /*border: 1px solid #555;
    border-radius: 8px;*/
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);*/
    z-index: 2;
}
.legend.hide {
    display: none;
}
.legend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.legend-header #closeLegendBtn {
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    background-image: url('../../images/icon/ico_close.svg');
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
    cursor: pointer;
}
.legend-item {
    margin-bottom: 5px;
}
.bus-box {
    display: inline-block;
    width: 200px;
    height: 30px;
    margin-right: 5px;
    vertical-align: middle;
    align-items: center;
}
.bus-box::before {
    margin-right: 10px;
    content: "";
    display: inline-block;

    width: 20px; /* 이미지 크기 설정 */
    height: 20px;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    vertical-align: middle;
}
.legend .legend-item:nth-of-type(2) .bus-box::before {
    background-image: url('../../images/icon/map/bus_icon.svg');
}
.legend .legend-item:nth-of-type(3) .bus-box::before {
    background-image: url('../../images/icon/map/pin_green.svg');
}
.legend .legend-item:nth-of-type(4) .bus-box::before {
    background-image: url('../../images/icon/map/pin_blue.svg');
}
.legend .legend-item:nth-of-type(5) .bus-box::before {
    background-image: url('../../images/icon/map/pin_yellow.svg');
}
.legend .legend-item:nth-of-type(6) .bus-box::before {
    background-image: url('../../images/icon/map/pin_purple.svg');
}