.map_info_box.pc_only_map {
    width: 380px;
    flex-shrink: 0;
}

#map1 {
    flex: 1; /* flex-grow: 1의 축약형. 남은 공간을 모두 차지하라는 의미입니다. */
    height: 100%;
}

/* ✨ 모바일 화면에서는 PC 정보 패널을 그냥 숨겨버립니다. */
@media (max-width: 1150px) {
    .map_info_box.pc_only_map {
        display: none;
    }
}

.bus-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
    text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px  1px 0 #000,
            1px  1px 0 #000;
}

@keyframes shadow-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(29, 201, 14, 0.8);
    }
    100% {
        box-shadow: 0 0 0 40px rgba(29, 201, 14, 0);
    }
}

/* 트래킹 중인 버스 아이콘을 감싸는 wrapper 스타일 */
.bus-wrapper.is-tracking {
    /* 애니메이션 적용 */
    animation: shadow-pulse 2s infinite;
    /* 애니메이션이 원형으로 퍼져나가도록 설정 */
    border-radius: 50%;
}

/* 트래킹 중인 버스 아이콘 자체를 살짝 크게 만들어 강조 */
.bus-wrapper.is-tracking img {
    transform: scale(1.2);
}

/* ▼▼▼ [추가] 트래킹 중인 정류장 목록 아이템 스타일 ▼▼▼ */
.bus_route_list > li.is-tracked-stop {
    box-shadow: 0 0 0 2px #1DC90E inset; /* 안쪽 그림자로 테두리 효과 (inset) */
    border-radius: 8px; /* box-shadow는 radius 적용됨, 유지 */
    background-color: #F0FFF0; /* 연한 녹색 배경 유지 */
    /* (주의) 만약 box-shadow로 인해 내부 콘텐츠가 너무 붙어 보인다면,
       아주 약간의 padding을 추가하는 것을 고려할 수 있습니다.
       (box-sizing: border-box 라면 보통 불필요) */
    /* padding: 1px; */
}

/* 하이라이트된 아이템 내부의 구분선은 제거하여 더 깔끔하게 보이도록 함 */
.bus_route_list > li.is-tracked-stop > dl > dd {
    border-bottom-color: transparent;
}
.ico_reset {
    margin: 0 4px 0 4px;
}
.stop-marker-wrapper {
    position: relative;
    cursor: pointer;
    border-radius: 50%;
}

.stop-marker-wrapper img {
    width: 100%;
    height: 100%;
    vertical-align: baseline;
}

@keyframes stop-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(11, 114, 211, 0.7); /* 파란색 계열 */
    }
    100% {
        box-shadow: 0 0 0 25px rgba(11, 114, 211, 0);
    }
}

.stop-marker-wrapper.is-highlighted {
    animation: stop-pulse 2s infinite;
}

/* 헤더 초기 숨김 처리 */
header {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: top 0.3s ease;
    z-index: 1000;
}

/* 헤더 보이기 */
header.show {
    top: 0;
}

/* 햄버거 메뉴 버튼 */
.hamburger-menu {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    background: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    cursor: pointer;
}

.hamburger-menu:hover {
    background: #f5f5f5;
}

#map_stop_info .content {
    /* 목록 아이템 사이에 여백이 없도록 padding을 제거합니다. */
    padding: 0;
}

#map_stop_info .bus_arrival_list > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 28px;
    border-bottom: 1px solid #E3E6EA;
    cursor: pointer;
}

#map_stop_info .bus_arrival_list > li:hover {
    background-color: #F6F8FA;
}

#map_stop_info .bus_arrival_list .real_bus_info {
}

#map_stop_info .real_bus_info {
    text-align: right;
    display: flex;          /* Flexbox 컨테이너로 만듭니다. */
    flex-direction: column; /* 자식 요소(span)들을 세로로 쌓습니다. */
    align-items: flex-end;  /* 텍스트를 오른쪽으로 정렬합니다. */
    gap: 5px;               /* ✨ 두 줄 사이의 간격을 0px로 설정합니다. (원하면 2px 등으로 조절 가능) */
}

/* span 자체의 불필요한 line-height를 초기화합니다. */
#map_stop_info .real_bus_info span {
    line-height: 1.2;
    font-size: 0.8rem;
}

.search_section:first-child {
    margin-top: 0;
}

.search_section .subtitle {
    padding: 10px 20px;
    margin-bottom: 8px;
    background-color: #f8f9fa;
    border-top: 1px solid #e3e6ea;
}

.search_section ul {
    padding-top: 0;
}

@media (max-width: 1150px) {
    .search_section .subtitle {
        padding: 8px 14px; /* 모바일에서는 여백 약간 줄이기 */
        margin-bottom: 4px;
    }

    .map_info_box.mo_only_map .tab_all.content {
        padding-top: 0; /* 모바일 전체 패딩 조정 */
    }
}

.search_section ul > li {
    cursor: pointer;
    padding: 12px 20px; /* 내부 여백 조정 (상하 약간 줄임) */
    border-bottom: 1px solid var(--gray-10-line, #E3E6E9);
    transition: background-color 0.15s ease-in-out; /* 부드러운 호버 효과 */
}

/* 마지막 아이템은 하단 테두리 제거 */
.search_section ul > li:last-child {
    border-bottom: none;
}

/* li 안의 제목 (노선번호/정류장이름) 스타일 */
.search_section ul > li h6 {
    /* 기존 스타일 유지 (inline_text 클래스가 적용됨) */
    margin-bottom: 2px; /* 제목과 부가 정보 사이 간격 살짝 추가 */
}

/* li 안의 부가 정보 (기점->종점 / 정류장 ID) 스타일 */
.search_section ul > li p {
    /* 기존 스타일 유지 (text_14 gray_70 클래스가 적용됨) */
    line-height: 1.4; /* 줄 간격 살짝 조정 */
}

/* 호버 또는 'on' 상태일 때 배경색 (기존 스타일 유지) */
.search_section ul > li.on,
.search_section ul > li:hover {
    background-color: var(--Blue-5, #EEF5FB);
}

@media (max-width: 1150px) {
    .search_section ul > li {
        padding: 10px 14px; /* 모바일에서는 여백 더 줄이기 */
    }
}

.map_info_box.mo_only_map {
    /* [수정] fixed -> absolute 로 변경 */
    position: absolute;
    display: none;   /* 기본 숨김 */
    flex-direction: column;
    z-index: 4;      /* 지도 위, 검색창 아래 */
    left: 0;
    width: 100%;
    /* 검색창 바로 아래 위치 */
    top: 60px; /* .map_top_search_mo 높이에 맞게 조정 */
    /* [수정] max-height 대신 bottom: 0 으로 설정하여 남은 공간 채우기 */
    bottom: 0;
    background-color: #fff;
    border-top: 1px solid var(--gray-10-line, #E3E6E9);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    /* 하단 정렬 관련 스타일 제거 */
    /* align-items: flex-start; */
    /* bottom: unset; */
}


/* 패널을 보이게 하는 클래스 */
.map_info_box.mo_only_map.is-visible {
    display: flex;
}

/* 스크롤을 위한 콘텐츠 그룹 조정 */
.map_info_box.mo_only_map .content_group {
    flex: 1; /* 사용 가능한 공간 차지 */
    overflow-y: auto; /* 세로 스크롤 활성화 */
    height: auto; /* 고정 높이 제거 */
}

/* 드래그 핸들 숨기기 (더 이상 필요 없음) */
.map_info_box.mo_only_map .handle_toggle {
    display: none;
}
.map_info_box.mo_only_map .sticky_group {
    /* 핸들 제거 시 패딩 조정 */
    padding-top: 0;
    padding-bottom: 0;
    position: static; /* 더 이상 sticky일 필요 없음 */
}
/* 스크롤 영역 내 검색 섹션 보이도록 보장 */
.map_info_box.mo_only_map .search_section {
    /* 기존 스타일 유지 */
}
.map_info_box.mo_only_map .search_section .subtitle {
    position: sticky; /* 섹션 제목을 스크롤 시 상단에 고정 */
    top: 0;
    background-color: #f8f9fa; /* 배경색 보장 */
    z-index: 1; /* 목록 아이템보다 위에 오도록 */
}

.map_info_box.mo_only_map .close_panel_button {
    position: absolute; /* 패널(.map_info_box) 기준 절대 위치 */
    top: 8px;          /* 위쪽 여백 */
    right: 14px;         /* 오른쪽 여백 */
    z-index: 502;       /* 다른 내부 요소(sticky subtitle)보다 위에 오도록 */
    padding: 5px;       /* 클릭 영역 확보 */
    /* 아이콘 스타일은 ico lg ico_close_black 클래스가 적용 */
    border: none;       /* 테두리 없음 */
}

/* sticky subtitle이 버튼을 가리지 않도록 z-index 조정 */
.map_info_box.mo_only_map .search_section .subtitle {
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 501; /* 버튼(502)보다 낮게 설정 */
}

/* --- [신규] 검색 탭 스타일 --- */
.search-tab-nav {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #E3E6E9;
    /* 모바일에서 스크롤 시 상단에 고정 */
    position: sticky;
    top: 0;
    z-index: 3;
}

.search-tab-nav > li {
    flex: 1;
    padding: 12px 10px;
    text-align: center;
    font-weight: 500;
    color: var(--Gray-50, #767E88);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    line-height: 1.4; /* 줄 높이 추가 */
}

.search-tab-nav > li.on {
    color: var(--Blue-60, #065BBD);
    font-weight: 600;
    border-bottom-color: var(--Blue-60, #065BBD);
}

/* 탭 콘텐츠 패널 가시성 제어 */
.search-tab-content .tab_pane {
    display: none; /* 기본적으로 모든 패널 숨김 */
}

.search-tab-content .tab_pane.on {
    display: block; /* 활성화된 패널만 보임 */
}

/* 탭 콘텐츠 내부의 기존 subtitle은 숨김 (탭에 정보가 표시되므로) */
.search-tab-content .search_section .subtitle {
    display: none !important;
}

/* 탭 내부 리스트 상단에 약간의 여백 추가 */
.search-tab-content .search_section ul {
    padding-top: 8px;
}