/* Bus Search Page Specific Styles */
    html, body {
      overflow-x: auto;
      min-width: 320px;
    }

    .bus-search-main {
      display: flex;
      flex-direction: column;
	  height: calc(100vh - 50px);
      overflow: auto;
      overflow-x: hidden;
    }
                                                                                             
  	.map-container {
	    position: relative;                                                                                         
	    height: 65vh;                                           
	    height: 65dvh;              /* ← 추가: iOS Safari 동적 뷰포트 대응 */
	    background-color: #e5e7eb;                                                                                  
	    display: flex;
	    align-items: center;                                                                                        
	    justify-content: center;        
	    
	    flex-shrink: 0;                      
  	}

    .live-bus-toggle {
      position: absolute;
  	  top: 240px;
      right: 10px;
      z-index: 10;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 2px solid #2E6EE8;
      background: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	  pointer-events: auto;
    }

    .live-bus-toggle.active {
      background: #2E6EE8;
      border-color: #2E6EE8;
    }
    
    .live-bus-toggle svg {
	  pointer-events: none; /* 내부 아이콘이 클릭을 방해하지 않게 설정  */
      width: 18px;
      height: 18px;
      fill: #2E6EE8;
      transition: fill 0.3s ease;
    }

    .live-bus-toggle.active svg {
      fill: #fff;
    }
    
	/* 현위치 버튼 컨테이너 설정 */
	.current-control {
	    position: absolute;
	    top: 195px; /* 줌 컨트롤 위나 아래 적절한 위치로 조정 */
	    right: 10px;
	    z-index: 10;
	}
	
	.current-control button {
	    width: 36px;
	    height: 36px;
	    background-color: #ffffff;
	    border: 1px solid #919191;
	    border-radius: 5px; /* 카카오맵 스타일: 약간의 라운드 */
	    cursor: pointer;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	    transition: background-color 0.2s;
	}
	
	.current-control button:hover {
	    background-color: #f8f8f8;
	}
	
	.current-control button img {
	    width: 20px;
	    height: 20px;
	    display: block;
	}

    .map-placeholder-buses {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    .map-placeholder-bus {
      position: absolute;
      cursor: pointer;
    }

    .map-placeholder-bus svg,
    .map-placeholder-bus img {
      width: 36px;
      height: 60px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
      position: relative;
      z-index: 2;
      object-fit: contain;
    }

	 .bus-marker {
	   position: absolute;
	   background: white;
	   border-radius: 8px;
	   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	   padding: 10px 14px;
	   display: flex;
	   align-items: center; /* 아이콘과 텍스트 중앙 정렬 */
	   gap: 10px;
	   z-index: 9999;
	   min-width: 200px;
	   pointer-events: none; /* 툴팁이 마우스 클릭을 방해하지 않도록 설정 */
	}

	/* 정류소 툴팁 스타일 추가 */
	.station-tooltip {
		background-color: #ffffff !important; 
	    color: #111827 !important; 
	    padding: 6px 12px;
	    border-radius: 4px;
	    border: 1px solid #d1d5db;
	    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	    font-size: 13px;
	    font-weight: bold;
	    color: #1f2937;
	    white-space: nowrap;
	    transform: translate(10px, 10px) !important;
	    pointer-events: none !important;
	}

    .bus-marker-icon {
      width: 24px;
      height: 24px;
      color: #00205d;
  	  flex-shrink: 0; /* 아이콘 크기 고정 */
    }

	.bus-marker-info {
	  display: flex;
	  flex-direction: column; /* 정보를 위아래로 나열 */
	  gap: 2px;
	}
	
	.bus-marker-info p {
	  margin: 0;
	  line-height: 1.4;
	}
	
	.bus-marker-info .number {
	  font-size: 12px;
	  color: #111827;
	}
	
	.bus-marker-info .route {
	  font-weight: bold;
	  font-size: 12px;
	  color: #4b5563;
	}

    /* Bottom Menu Tabs */
    .bottom-menu-tabs {
      height: 40px;
  	  flex-shrink: 0;
      display: flex;
      background-color: #00205d;
      overflow-x: auto;
    }

    .bottom-menu-tab {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px 12px;
      color: white;
      background: none;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .bottom-menu-tab.active {
      background-color: #1e88e5;
    }

    .bottom-menu-tab svg {
      width: 16px;
      height: 16px;
    }

    .bottom-menu-tab span {
      font-size: 10px;
      font-weight: 500;
      white-space: nowrap;
    }

	/* 지도 및 하단 탭 (패널 상태에 따라 연동) */
	.map-container,
	.bottom-menu-tabs {
	  position: absolute;
	  transition: left 0.3s ease, width 0.3s ease;
	}

    /* Search Panel 
    .search-panel {
      flex: 1;
      background-color: #00205d;
      overflow: visible;
      display: flex;
      flex-direction: column;
      transition: transform 0.3s ease, flex 0.3s ease;
      position: relative;
    }*/

    .search-panel-header {
      background-color: #003580;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .search-panel-icon {
      width: 28px;
      height: 28px;
      background-color: white;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .search-panel-icon svg {
      width: 16px;
      height: 16px;
      color: #00205d;
    }

    .search-panel-title {
      color: white;
      font-size: 14px;
      font-weight: bold;
      margin: 0;
    }
    
	/* 패널 접힌 상태 */
	.map-container.panel-collapsed,
	.bottom-menu-tabs.panel-collapsed {
	  left: 0;
	}

	.search-panel-icon {
	  width: 40px;
	  height: 40px;
	}
	
	.search-panel-icon svg {
	  width: 30px;
	  height: 30px;
	}
	
	.search-panel-title {
	  font-size: 18px;
	}

    /* Main Tabs */
    .main-tabs {
      display: flex;
    }

    .main-tab {
      flex: 1;
      padding: 12px;
      font-size: 14px;
      font-weight: 500;
      color: white;
      background-color: #0a3d6e;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .main-tab:hover {
      background-color: #0d4a82;
    }

    .main-tab.active {
      background-color: #e8913a;
    }

    /* Sub Tabs */
    .sub-tabs-container {
      padding: 12px;
      padding-bottom: 3px;
      background-color: #d6e9f8;
    }

    .sub-tabs {
      display: flex;
      gap: 8px;
    }

    .sub-tab {
      flex: 1;
      padding: 8px;
      font-size: 12px;
      font-weight: 500;
      border-radius: 4px;
      border: 1px solid #00205d;
      cursor: pointer;
      transition: all 0.3s;
    }

    .sub-tab.active {
      background-color: #00205d;
      color: white;
    }

    .sub-tab:not(.active) {
      background-color: white;
      color: #00205d;
    }

    /* Search Filter */
    .search-filter {
      position: relative; 
      padding: 12px;
  	  padding-bottom: 0px;
      background-color: #d6e9f8;
    }
    
    .search-filter-close {
	    position: absolute; 
	    top: 9px;          
	    right: 9px;
	    width: 28px;
	    height: 28px;
	    border: none;
	    background: rgba(0,0,0,0.15);
	    border-radius: 50%;          
	    font-size: 18px;   
	    line-height: 1; 
	    color: #374151;
	    cursor: pointer;
	    display: flex;  
	    align-items: center;
	    justify-content: center;                                                                                                               
	}       

    .filter-buttons {
      display: flex;
      gap: 4px;
    }

    .filter-btn {
      padding: 4px 16px;
      font-size: 12px;
      border-radius: 4px;
      border: 1px solid #d1d5db;
      cursor: pointer;
      transition: all 0.3s;
    }

    .filter-btn.active {
      background-color: #00205d;
      color: white;
      border-color: #00205d;
    }

    .filter-btn:not(.active) {
      background-color: white;
      color: #374151;
    }

    .filter-btn:not(.active):hover {
      border-color: #00205d;
    }

    .search-select-row {
      display: flex;
      flex: 1;
      gap: 4px;
      align-items: center;
    }

    .search-select-sm {
      flex: 1;
      padding: 8px 8px;
      font-size: 14px;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      background-color: white;
      cursor: pointer;
      height: 36px;
    }

    .search-select-sm:focus {
      border-color: #00205d;
      outline: none;
    }

    .search-select-btn {
      padding: 8px 10px;
      background-color: white;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      color: #00205d;
      cursor: pointer;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .search-input-wrapper input {
      height: 36px;
      box-sizing: border-box;
    }

    .search-select-btn:hover {
      background-color: #00205d;
      color: white;
    }

    /* Search Help */
    .search-help {
      margin-top: 8px;
      font-size: 11px;
      color: #6b7280;
  	  margin-bottom: 8px;
    }

    .search-help-badge {
      display: inline-block;
      background-color: #00205d;
      color: white;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 10px;
      margin-right: 4px;
      border: none;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .search-help-badge:hover {
      background-color: #003080;
    }

    .search-help-text {
      color: #6b7280;
    }

    .search-help-desc {
      margin-top: 4px;
      line-height: 1.4;
      color: #4b5563;
    }

    .search-input-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .search-label {
      color: #00205d;
      font-weight: 500;
      font-size: 14px;
      white-space: nowrap;
    }

    .search-input-wrapper {
      flex: 1;
      position: relative;
    }

    .search-input-wrapper input {
      width: 100%;
      padding: 8px 40px 8px 12px;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      font-size: 14px;
    }

    .search-input-wrapper button {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #00205d;
      cursor: pointer;
    }

    /* Route List Section */
    .route-sticky-header {
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .operation-sticky-header {
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .section-header {
      background-color: rgba(0, 32, 93, 1);
      padding: 10px 16px;
      display: flex;
      align-items: center;
      margin-bottom: 0;
    }

    .section-header span {
      color: white;
      font-weight: 500;
      font-size: 14px;
    }

	.section-sub-header {
	  background-color: #E8913A;
	  padding: 10px 16px;
	  padding-bottom: 10;
	}
	
	.section-sub-header span {
	  color: white;
	  font-weight: 500;
	  font-size: 14px;
	}

    .route-table {
      background-color: white;
    }

    .route-table-header {
      display: grid;
      grid-template-columns: 1fr 1fr 50px;
      font-size: 12px;
      border-bottom: 1px solid #e5e7eb;
      background-color: white;
    }

    .route-table-header div {
      padding: 8px;
      text-align: center;
      font-weight: 500;
      color: #6b7280;
    }

    .route-table-row {
      display: grid;
      grid-template-columns: 1fr 1fr 50px;
      font-size: 12px;
      border-bottom: 1px solid #f3f4f6;
    }

    .route-table-row.selected {
      background-color: #eff6ff;
    }

    .route-table-row > div {
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .route-table-row > div:first-child {
      justify-content: flex-start;
      gap: 4px;
      white-space: nowrap;
    }

    .route-table-group {
      display: flex;
      align-items: center;
      font-size: 12px;
      border-bottom: 1px solid #e5e7eb;
      background-color: #f8f9fa;
      padding: 8px;
    }

    .route-table-group > div:first-child {
      color: #00205d;
      white-space: nowrap;
      margin-right: 8px;
    }

    .route-table-group > div:nth-child(2) {
      flex: 1;
      color: #6b7280;
      font-size: 11px;
      text-align: center;
    }

    .route-table-group > div:last-child {
      flex-shrink: 0;
    }

	.route-badge {
	  background-color: #e8913a;
	  color: white;
	  font-size: 12px;
	  padding: 1px 4px;
	  border-radius: 2px;
	  margin-right: 4px;
	  white-space: nowrap;
	  display: inline-block;
	  vertical-align: middle;
	}

    .route-badge.type-normal {
      background-color: #2563eb;
    }

    .route-direction {
      color: #00205d;
      font-size: 11px;
      text-align: center;
    }

    .view-btn {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f3f4f6;
      color: #6b7280;
      border: none;
      cursor: pointer;
      transition: all 0.3s;
    }

    .view-btn.active {
      background-color: #00205d;
      color: white;
    }

    .view-btn:hover {
      background-color: #00205d;
      color: white;
    }

    .view-btn svg {
      width: 12px;
      height: 12px;
    }

    /* Operation Info Section */
    .route-title-header {
      background-color: #d4870e;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .route-title-header span {
      color: white;
      font-weight: 600;
      font-size: 12px;
    }

    .route-title-close {
      background: none;
      border: none;
      color: white;
      font-size: 11px;
      cursor: pointer;
      padding: 2px 4px;
    }

    .operation-header {
      background-color: #00205d;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .bottom-tab-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .main-tab-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .operation-header span {
      color: white;
      font-weight: 500;
      font-size: 14px;
    }

    .operation-header .operation-header-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .operation-header .operation-count {
      color: white;
      font-size: 13px;
    }

    .operation-header .refresh-btn {
      background: none;
      border: 1px solid rgba(255,255,255,0.5);
      border-radius: 4px;
      color: white;
      cursor: pointer;
      padding: 2px 6px;
      display: flex;
      align-items: center;
    }

    .operation-header svg {
      width: 16px;
      height: 16px;
      color: white;
    }

    .operation-content {
      background-color: white;
  	  padding: 12px 16px;
    }

	.operation-title {
	  display: flex;
	  align-items: center;
	  gap: 8px;
	  margin-bottom: 12px;
	}
	
	.operation-title .badge {
	  background-color: #e8913a;
	  color: white;
	  font-size: 12px;
	  padding: 2px 6px;
	  border-radius: 4px;
	}
	
	.operation-title .number {
	  font-size: 18px;
	  font-weight: bold;
	}
	
	.operation-info {
	  font-size: 12px;
	}
	
	.operation-info .row {
	  display: flex;
	  margin-bottom: 4px;
	}
	
	.operation-info .label {
	  width: 64px;
	  color: #6b7280;
	}
	
	.operation-info .value {
	  flex: 1;
	}

    .operation-info-table {
      width: 100%;
      font-size: 13px;
      border-collapse: collapse;
    }

    .operation-info-table tr {
      border-bottom: 1px solid #e5e7eb;
    }

    .operation-info-table td {
      padding: 8px 12px;
      vertical-align: top;
    }

    .operation-info-table td:first-child {
      width: 80px;
      color: #6b7280;
      font-weight: 500;
      white-space: nowrap;
    }

    .operation-info-table td:last-child {
      color: #111;
    }

    .route-path-header {
      background-color: #00205d;
      padding: 8px 16px;
      display: flex;
      align-items: center;
    }

    .route-path-header span {
      color: white;
      font-weight: 500;
      font-size: 14px;
    }

    .time-badge {
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-right: 4px;
    }

    .time-badge.first {
      background-color: #dbeafe;
      color: #2563eb;
    }

    .time-badge.last {
      background-color: #fee2e2;
      color: #dc2626;
    }

    /* Direction Toggle */
    .direction-toggle-container {
      background-color: white;
      padding: 12px 16px;
      display: flex;
      justify-content: center;
    }

    .direction-toggle {
      display: flex;
      border-radius: 999px;
      overflow: hidden;
      border: 1px solid #d1d5db;
    }

    .direction-btn {
      padding: 6px 24px;
      font-size: 12px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 4px;
      border: none;
      cursor: pointer;
      transition: all 0.3s;
    }

    .direction-btn.active {
      background-color: #4CAF50;
      color: white;
    }

    .direction-btn:not(.active) {
      background-color: white;
      color: #4b5563;
    }
    
	.bus-indicator {
	  position: absolute;
	  left: 8px;
	  top: 50%;
	  transform: translateY(-50%);
	  display: flex;
	  align-items: center;
	  gap: 4px;
	}
	
	.bus-indicator .bus-number {
	  font-size: 10px;
	  color: #9ca3af;
	}
	
	.bus-indicator .bus-icon {
	  width: 24px;
	  height: 16px;
	  background-color: #4CAF50;
	  border-radius: 2px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	
	.bus-indicator .bus-icon svg {
	  width: 12px;
	  height: 12px;
	  color: white;
	}

    /* Arrival Stop Table */
    .arrival-stop-table-header {
      display: grid;
      grid-template-columns: 1fr 40px 40px;
      font-size: 12px;
      border-bottom: 1px solid #e5e7eb;
    }

    .arrival-stop-table-header > div {
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .arrival-stop-table-row {
      display: grid;
      grid-template-columns: 1fr 40px 40px;
      font-size: 12px;
      border-bottom: 1px solid #f3f4f6;
    }

    .arrival-stop-table-row.selected {
      background-color: #eff6ff;
    }

    .arrival-stop-table-row > div {
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .select-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #d1d5db;
      background-color: white;
      cursor: pointer;
      transition: all 0.3s;
    }

    .select-btn.active {
      background-color: #4CAF50;
      border-color: #4CAF50;
      color: white;
    }

    /* Arrival Info Section */
    .arrival-info-content {
      background-color: white;
      padding: 12px 16px;
    }

    .arrival-stop-info {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .arrival-refresh-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #d1d5db;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.2s;
    }

    .arrival-refresh-btn:hover {
      background-color: #f3f4f6;
      border-color: #9ca3af;
    }

    .arrival-refresh-btn svg {
      width: 16px;
      height: 16px;
      color: #6b7280;
    }

    .arrival-stop-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: #00205d;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .arrival-stop-icon svg {
      width: 20px;
      height: 20px;
      color: white;
    }

    .arrival-stop-name {
      font-weight: bold;
      font-size: 14px;
    }

    .arrival-stop-detail {
      font-size: 12px;
      color: #6b7280;
    }

    .arrival-bus-table {
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      overflow: hidden;
      margin-top: 12px;
    }

    .arrival-bus-table-header {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      font-size: 12px;
      background-color: #f9fafb;
      border-bottom: 1px solid #e5e7eb;
    }

    .arrival-bus-table-header div {
      padding: 8px;
      text-align: center;
      font-weight: 500;
      color: #6b7280;
    }

    .arrival-bus-table-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      font-size: 12px;
      border-bottom: 1px solid #f3f4f6;
    }

    .arrival-bus-table-row > div {
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .arrival-time {
      font-weight: 500;
      color: #00205d;
    }

    .arrival-time.imminent {
      color: #dc2626;
    }

    .type-badge {
      font-size: 10px;
      padding: 1px 4px;
      border-radius: 2px;
      color: white;
      margin-right: 4px;
    }

    .type-badge.daegu {
      background-color: #f44336;
    }

    .type-badge.gyeongsan {
      background-color: #e8913a;
    }

    /* Stop Search Table (정류소 검색 결과) */
    .stop-search-table {
      background-color: white;
    }

    .stop-search-table-header {
      display: grid;
      grid-template-columns: 1fr 50px;
      font-size: 12px;
      border-bottom: 1px solid #e5e7eb;
      position: sticky;
      top: 0;
      z-index: 10;
      background-color: white;
    }

    .stop-search-table-header div {
      padding: 8px;
      text-align: center;
      font-weight: 500;
      color: #6b7280;
    }

    .stop-search-row {
      display: grid;
      grid-template-columns: 1fr 50px;
      font-size: 13px;
      border-bottom: 1px solid #f3f4f6;
      cursor: pointer;
    }

    .stop-search-row > div {
      padding: 10px 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stop-search-row > div:first-child {
      justify-content: flex-start;
      padding-left: 16px;
    }

    .stop-search-row.selected {
      background-color: #eff6ff;
    }

    .stop-search-row:hover {
      background-color: #f9fafb;
    }

    /* Other Bottom Tabs Content */
    .other-content {
      padding: 16px;
    }

    .other-content h2 {
      color: white;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .other-content h2 svg {
      width: 20px;
      height: 20px;
    }

    .traffic-table {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
    }

    .traffic-table-header {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      font-size: 12px;
      background-color: #00205d;
      color: white;
    }

    .traffic-table-header div {
      padding: 8px;
      text-align: center;
      font-weight: 500;
    }

    .traffic-table-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      font-size: 12px;
      border-bottom: 1px solid #f3f4f6;
    }

    .traffic-table-row > div {
      padding: 8px;
      text-align: center;
    }

    .traffic-status {
      font-weight: 500;
    }

    .traffic-status.smooth {
      color: #22c55e;
    }

    .traffic-status.slow {
      color: #eab308;
    }

    .traffic-status.congested {
      color: #ef4444;
    }

    .cctv-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .cctv-item {
      width: 100%;
      background-color: white;
      padding: 12px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .cctv-item:hover {
      background-color: #f9fafb;
    }

    .cctv-item-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cctv-item-left svg {
      width: 16px;
      height: 16px;
      color: #00205d;
    }

    .cctv-item-left span {
      font-size: 14px;
    }

    .cctv-item-right svg {
      width: 16px;
      height: 16px;
      color: #9ca3af;
    }

    .vms-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .vms-item {
      background-color: white;
      border-radius: 8px;
      padding: 12px;
    }

    .vms-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .vms-item-header span:first-child {
      font-weight: 500;
      font-size: 14px;
    }

    .vms-status {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .vms-status.normal {
      background-color: #dcfce7;
      color: #16a34a;
    }

    .vms-status.checking {
      background-color: #fef9c3;
      color: #ca8a04;
    }

    .vms-location {
      font-size: 12px;
      color: #6b7280;
      margin-bottom: 4px;
    }

    .vms-message {
      background-color: #00205d;
      color: white;
      font-size: 14px;
      padding: 8px;
      border-radius: 4px;
    }

    .parking-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .parking-item {
      background-color: white;
      border-radius: 8px;
      padding: 12px;
    }

    .parking-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .parking-item-header span:first-child {
      font-weight: 500;
      font-size: 14px;
    }

    .parking-item-header span:last-child {
      font-size: 12px;
      color: #6b7280;
    }

    .parking-bar-container {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .parking-bar {
      flex: 1;
      height: 8px;
      background-color: #e5e7eb;
      border-radius: 999px;
      overflow: hidden;
    }

    .parking-bar-fill {
      height: 100%;
      border-radius: 999px;
    }

    .parking-bar-fill.high {
      background-color: #22c55e;
    }

    .parking-bar-fill.medium {
      background-color: #eab308;
    }

    .parking-bar-fill.low {
      background-color: #ef4444;
    }

    .parking-count {
      font-size: 14px;
      font-weight: 500;
    }

    .parking-count.high {
      color: #22c55e;
    }

    .parking-count.medium {
      color: #eab308;
    }

    .parking-count.low {
      color: #ef4444;
    }

    .incident-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .incident-item {
      background-color: white;
      border-radius: 8px;
      padding: 12px;
    }

    .incident-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .incident-type {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
      color: white;
    }

    .incident-type.accident {
      background-color: #ef4444;
    }

    .incident-type.construction {
      background-color: #eab308;
    }

    .incident-type.event {
      background-color: #3b82f6;
    }

    .incident-status {
      font-size: 12px;
      font-weight: 500;
    }

    .incident-status.processing {
      color: #ef4444;
    }

    .incident-status.ongoing {
      color: #ca8a04;
    }

    .incident-location {
      font-weight: 500;
      font-size: 14px;
      margin-bottom: 4px;
    }

    .incident-description {
      font-size: 12px;
      color: #4b5563;
      margin-bottom: 4px;
    }

    .incident-period {
      font-size: 12px;
      color: #9ca3af;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .incident-period svg {
      width: 12px;
      height: 12px;
    }

    /* Responsive Styles for map-container */
    @media (min-width: 768px) {
      .map-container {
        height: 60vh;
        min-height: 400px;
      }
    }

    /* Responsive Styles for bottom-menu-tabs */
    @media (min-width: 768px) {
      .bottom-menu-tabs {
        justify-content: center;
      }

      .bottom-menu-tab {
        flex-direction: row;
        padding: 8px 16px;
        gap: 6px;
      }

      .bottom-menu-tab span {
        font-size: 13px;
      }
    }

    /* Desktop Styles */
    @media (min-width: 1024px) {
      .bus-search-main {
        position: relative;
        flex-direction: row;
      }
      
	  /* 지도 내부 요소 강제 확장 */
	  #kakao-map, #ol-map, .map-wrapper {
	  	position: absolute; 
	  	top: 0; 
	  	left: 0;
	    width: 100% !important;
	    height: 100% !important;
	  }

      .bottom-menu-tabs {
        position: absolute;
        bottom: 0;
        left: 380px;
        right: 0;
        height: 42px;
        justify-content: flex-start;
      }

      .bottom-menu-tab {
        flex: 1;
        flex-direction: row;
        padding: 8px 20px;
        gap: 8px;
      }

      .bottom-menu-tab:hover {
        background-color: #0a3d6e;
      }

      .bottom-menu-tab svg {
        width: 20px;
        height: 20px;
      }

      .bottom-menu-tab span {
        font-size: 14px;
        font-weight: 500;
      }

      .search-panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 380px;
        height: 100%;
        z-index: 20;
        transition: transform 0.3s ease;
      }

      .search-panel.collapsed {
        display: flex;
        transform: translateX(-100%);
      }

      .search-panel-header {
        padding: 6px 16px;
      }

      .search-panel-icon {
        width: 40px;
        height: 40px;
      }

      .search-panel-icon svg {
        width: 30px;
        height: 30px;
      }

      .search-panel-title {
        font-size: 18px;
      }

      .main-tab {
        padding: 12px;
        font-size: 16px;
      }

      .route-table-header {
        grid-template-columns: 80px 1fr 60px;
      }

      .route-table-row {
        grid-template-columns: 80px 1fr 60px;
      }

      .route-table-group {
        grid-template-columns: 80px 1fr 60px;
      }

      .filter-btn {
        padding: 6px 16px;
        font-size: 14px;
      }

      .search-label {
        font-size: 16px;
      }

      .search-input-wrapper input {
        font-size: 16px;
      }

      .operation-info-table {
        font-size: 14px;
      }

      .operation-info-table td:first-child {
        width: 90px;
      }
    }

    /* 패널 닫기 버튼 (헤더 안) */
    /* 패널 가장자리 토글 버튼 */
    .panel-edge-toggle {
      position: absolute;
      top: 50%;
      right: -16px;
      transform: translateY(-50%);
      z-index: 30;
      width: 16px;
      height: 48px;
      background-color: #00205d;
      border: none;
      border-radius: 0 6px 6px 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 2px 0 6px rgba(0,0,0,0.15);
      /*transition: background-color 0.2s;*/
  	  outline: none !important; 
  	  -webkit-tap-highlight-color: transparent;
    }

	.panel-edge-toggle:focus-visible {
	  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 2px 0 6px rgba(0,0,0,0.15);
	}

    .panel-edge-toggle svg {
      width: 12px;
      height: 12px;
      color: rgba(255,255,255,0.8);
      transition: color 0.2s, transform 0.3s;
    }

    .panel-edge-toggle:hover {
      background-color: #003580;
    }

    .panel-edge-toggle:hover svg {
      color: white;
    }

    /* 패널 접혔을 때 화살표 반전 */
    .search-panel.collapsed .panel-edge-toggle svg {
      transform: rotate(180deg);
    }

    /* Hidden class for tab content */
    .hidden {
      display: none !important;
    }

    /* Map Legend 
    .map-legend {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      padding: 10px 12px;
      font-size: 11px;
      z-index: 10;
    }*/

    .map-legend-section {
      margin-bottom: 8px;
    }

    .map-legend-section:last-child {
      margin-bottom: 0;
    }

    .map-legend-title {
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 6px;
      font-size: 11px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .map-legend-items {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .map-legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      color: #374151;
    }

    .legend-line {
      width: 20px;
      height: 4px;
      border-radius: 2px;
    }

    .legend-line.forward {
      background-color: #2563eb;
    }

    .legend-line.reverse {
      background-color: #dc2626;
    }

    .legend-circle {
      width: 12px;
      height: 12px;
      border-radius: 50%;
    }

    .legend-circle.smooth {
      background-color: #22c55e;
    }

    .legend-circle.slow {
      background-color: #eab308;
    }

    .legend-circle.congested {
      background-color: #ef4444;
    }

    .legend-circle.nodata {
      background-color: #9ca3af;
    }

    .legend-stop-icon {
      width: 14px;
      height: 14px;
      background-color: #00205d;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .legend-stop-icon svg {
      width: 8px;
      height: 8px;
      color: white;
    }

    .legend-refresh-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      background-color: #f3f4f6;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      font-size: 10px;
      color: #374151;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .legend-refresh-btn:hover {
      background-color: #e5e7eb;
    }

    .legend-refresh-btn svg {
      width: 12px;
      height: 12px;
    }

    .legend-speed {
      font-size: 9px;
      color: #6b7280;
    }

	/* 지도 래퍼: 카카오맵과 OpenLayers를 겹치게 설정 */
	.map-wrapper {
	  width: 100%;
	  height: 100%;
	  position: relative;
	}
	
	#kakao-map {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 0;
	}
	
	#ol-map {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 1;
	  background: transparent; /* 배경 투명으로 설정하여 카카오맵이 보이게 함 */
	  pointer-events: auto;
	  transform: translate3d(0, 0, 0);	/* GPU 가속을 강제하면 떨림이 줄어듬 */
	}
	
	/* 지도가 그려지는 컨테이너의 브라우저 기본 터치 동작을 제한 */
	#ol-map, #kakao-map {
	    touch-action: none;
	    -webkit-user-drag: none;
	    -webkit-tap-highlight-color: transparent;
	}
	
	/* 지도/스카이뷰 버튼 스타일 */
	.map-controls {
	    position: absolute;
	    top: 10px;
	    right: 10px; /* 줌 컨트롤 왼쪽 배치  */
	    z-index: 10;
	    display: flex;
	    background-color: #ffffff;
	    border: 1px solid #919191;
	    border-radius: 5px;
	    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	    overflow: hidden;
	}
	
	.map-controls button {
	    padding: 0 12px;
	    height: 36px;
	    background: #ffffff;
	    border: none;
	    cursor: pointer;
	    font-size: 13px;
	    font-weight: 600;
	    color: #333;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    transition: all 0.2s;
	}
	
	/* 버튼 사이 세로 구분선 */
	.map-controls button:first-child {
	    border-right: 1px solid #e5e5e5;
	}
	
	/* 호버 효과 */
	.map-controls button:hover {
	    background-color: #f8f8f8;
	}
	
	/* 활성화(선택됨) 상태 스타일 */
	.map-controls button.active {
	    background: #2E6EE8;
	    color: #ffffff;
	    cursor: default;
	}
	
	/* 툴팁 및 컨텍스트 메뉴 (OpenLayers용) */
	.ol-tooltip {
	  position: absolute;
	  display: none;
	  /*background: rgba(0, 0, 0, 0.8);*/
	  color: #fff;
	  /*padding: 4px 10px;*/
	  border-radius: 4px;
	  font-size: 12px;
	  pointer-events: none;
	  white-space: nowrap;
	  z-index: 9999;
	  
	  background: none !important;
	  border: none !important;
	  box-shadow: none !important;
	  padding: 0 !important;
	}
	
	#context-menu {
	  position: absolute;
	  background: #fff;
	  border: 1px solid #ddd;
	  border-radius: 4px;
	  padding: 4px 0;
	  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
	  font-size: 13px;
	  pointer-events: auto;
	  margin-left: 110px;	/* 버스도착정보팝업위치 */
	  margin-top: -80px;	/* 버스도착정보팝업위치 */
	  z-index: 9000;
	  min-width: 100px;
	}
	
	/* 데스크탑 환경 최적화 (@media min-width: 1024px) */
	@media (min-width: 1024px) {
	  .map-container {
	    position: absolute;
	    top: 0;
	    left: 380px;
	    right: 0;
	    bottom: 42px; /* 기본값을 0으로 설정 */
	    height: auto; /* 데스크탑에서는 전체 높이 사용 */
	    transition: left 0.3s ease;
	  }
	}
	
	/* 범례 토글 버튼: 기본 숨김 */
	.map-legend-toggle {
	  display: none;
	}
	
	/* 범례 닫기 버튼: 기본 숨김 */
	.map-legend-close {
	  display: none;
	}
	
	/* 범례 토글 버튼 표시 */
	.map-legend-toggle {
	  display: block;
	  position: absolute;
	  bottom: 10px;
	  left: 10px !important; 
  	  right: auto !important;
	  padding: 8px 12px;
	  background: white;
	  border: 1px solid #d1d5db;
	  border-radius: 6px;
	  font-size: 12px;
	  font-weight: 600;
	  color: #374151;
	  cursor: pointer;
	  z-index: 100; /* 지도 컨트롤보다 높게 설정 */
	  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	  transition: left 0.3s ease; /* 패널 이동과 동기화 */
	}
	  
	/* 범례 박스 스타일 */
	.map-legend {
	    display: none; /* 기본 숨김 */
	    position: absolute;
	    bottom: 10px;    /* 아래쪽 고정 */
	    left: 10px !important; 
  		right: auto !important;
	    width: auto;
	    min-width: 220px;
	    max-width: 400px;
	    padding: 15px 12px 12px 12px;
	    background: rgba(255, 255, 255, 0.95);
	    z-index: 11;     /* 토글 버튼보다 높게  */
	    border: 1px solid #d1d5db;
	    border-radius: 8px;
	    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	    transition: left 0.3s ease; /* 패널 이동과 동기화 */
	}
	
	/* 패널이 접혔을 때 (지도에 .panel-collapsed 클래스가 붙음) */
	.map-container.panel-collapsed .map-legend-toggle,
	.map-container.panel-collapsed .map-legend {
	    left: 10px !important;
	}
	
	/* 모바일 환경 (1023px 이하)에서는 패널이 아래로 가므로 좌측 여백만 유지 */
	@media (max-width: 1023px) {
	    .map-legend-toggle,
	    .map-legend {
	        left: 10px !important;
	    }
	}
	
	/* 활성화 상태 */
	.map-legend.active {
	  display: block !important;
	}
	
	/* 범례 닫기 버튼 */
	.map-legend-close {
	  display: block;
	  position: absolute;
	  top: 5px;
	  right: 5px;
	  width: 30px;
	  height: 30px;
	  background: none;
	  border: none;
	  font-size: 24px;
	  color: #374151;
	  cursor: pointer;
	  line-height: 1;
	  z-index: 31;
	}
	
	/* 내부 아이템 간격 조정 */
	.map-legend-items {
	  gap: 8px;
	  justify-content: flex-start;
	}
	
	.map-legend-item {
	  font-size: 11px;
	  flex-shrink: 0;
	}
	#flowRefresh {
	    background: transparent;   /* 배경 제거 */
	    border: none;               /* 테두리 제거 */
	    padding: 0;                 /* 여백 제거 */
	    cursor: pointer;            /* 마우스 포인터 */
	}
	
	#flowRefresh img {
	    display: block;   /* 버튼 여백 방지 */
	}
	
	/* 전체보기 행 스타일 */
	.group-total-row {
	    background-color: #f9fafb !important;
	    border-bottom: 1px solid #e5e7eb;
	}
	
	.group-total-row .group-title {
	    font-size: 14px;
	    font-weight: bold;
	    color: #2563eb;
	}
	
	.group-total-row .group-desc {
	    color: #9ca3af;
	    font-size: 12px;
	}
	
	/* 전체보기 전용 돋보기 버튼 스타일 */
	.all-view-btn {
	    background-color: #eff6ff; /* 기본 배경 */
	    color: #2563eb;           /* 기본 아이콘 색상 */
	    transition: all 0.2s ease; /* 부드러운 전환 효과 */
	}
	
	/* 호버(Hover) 효과 */
	.all-view-btn:hover {
	    background-color: #2563eb !important; /* 호버 시 파란 배경 */
	    color: #ffffff !important;           /* 호버 시 흰색 아이콘 */
	    transform: scale(1.05);              /* 살짝 커지는 효과 */
	}
	
	/* SVG 아이콘 색상 상속 */
	.all-view-btn .svg-icon {
	    width: 16px;
	    height: 16px;
	    stroke: currentColor; /* 부모의 color 값을 따라감 */
	}
	
	.stop-table-row.highlight-row {
	    background-color: #fff3e0 !important;
	    transition: background-color 0.2s ease;
	    box-shadow: inset 5px 0 0 0 #e8913a;
	}
	
	.stop-table-row .stop-action .view-btn:hover {
	    background-color: #f3f4f6;
	    border-color: #9ca3af;
	}
	
	.stop-table-row:hover {
	  	background-color: #f0f7ff;
	}
	
	.stop-table-row.selected {
	  	background-color: #e8f4fd;
	}
	
	/* 타임라인 라인 위치 고정 */
	.stop-timeline-row .timeline-area {
	    flex-shrink: 0;
	    z-index: 10;
	}
	
	/* 커스텀 줌 버튼 */
	.custom-zoom-control {
	    position: absolute;
	    top: 110px;
	    right: 10px;
	    width: 36px;
	    height: 80px;
	    overflow: hidden;
	    z-index: 100;
	    background-color: #f5f5f5;
	    border: 1px solid #919191;
	    border-radius: 5px;
	    display: flex;
	    flex-direction: column;
	}
	
	.custom-zoom-control button {
	    width: 36px;
	    height: 40px;
	    text-align: center;
	    cursor: pointer;
	    border: none;
	    background-color: white;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	
	.custom-zoom-control button:first-child {
	    border-bottom: 1px solid #bfbfbf;
	}
	
	.custom-zoom-control button img {
	    width: 15px;
	    height: 15px;
	}
	
	.custom-zoom-control button:hover {
	    background-color: #f8f8f8;
	}
	
	/* 기존 OL 기본 줌 컨트롤은 숨김 처리 */
	.ol-zoom, .ol-zoomslider {
	    display: none !important;
	}
   
	/* ===========================================
	   레이아웃 통합 설정
	   =========================================== */
	
	/* [모바일/공통 - 1023px 이하] */
	.map-container {
	  position: relative;
	  height: 85vh; /* 모바일 지도 높이 */
	  width: 100%;
	  transition: left 0.3s ease;
	}
	
	.search-panel {
	  position: relative; /* 지도 아래로 흐르게 설정 */
	  width: 100%;
	  height: 100%;
	  min-height: 50vh;
	  z-index: 20;
	  background-color: #00205d;
	  display: flex;
	  flex-direction: column;
	  transform: none !important; /* 모바일 슬라이드 방지 */
	  transition: transform 0.3s ease;
	}
	
	/* 모바일 전용 UI 제어 */
	@media (max-width: 1023px) {
	  .panel-edge-toggle {
	    display: none !important; /* 모바일에서 화살표 숨김 */
	  }
	  
	  /* 하단 탭 컨테이너 설정 */
      .bottom-menu-tabs {
        display: flex !important;
        justify-content: center;
        align-items: center;
        overflow-x: hidden;
      }

      /* 개별 탭 버튼 설정 */
      .bottom-menu-tab {
        flex: none;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 8px 12px;
      }
	  
      .bottom-menu-tab {
        flex-direction: row;
        padding: 0 10px;
        height: 100%;       /* 탭 높이 꽉 채우기 */
      }
	}
	
	/* [데스크탑 전용 - 1024px 이상] */
	@media (min-width: 1024px) {
	  .bus-search-main {
	    position: relative;
	    display: block;
	  }
	
	  /* 패널을 왼쪽 사이드로 고정 */
	  .search-panel {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 380px;
	    height: 100%;
	  }
	
	  /* 패널 닫혔을 때 왼쪽으로 밀기 */
	  .search-panel.collapsed {
	    transform: translateX(-100%) !important;
	  }
	
	  /* 데스크탑 지도: 패널 옆에 배치 및 우측 끝까지 확장 */
	  .map-container {
	    position: absolute;
	    top: 0;
	    left: 380px;
	    right: 0;
	    bottom: 42px;
	    height: auto;
	    width: auto; /* left와 right 사이를 꽉 채움 */
	  }
	
	  /* 패널 닫혔을 때 지도를 왼쪽 끝까지 확장 */
	  .map-container.panel-collapsed {
	    left: 0;
	  }
	
	  /* 하단 탭도 지도와 동일하게 이동 */
	  .bottom-menu-tabs {
	    position: absolute;
	    bottom: 0;
	    left: 380px;
	    right: 0;
	    height: 42px;
	    transition: left 0.3s ease;
	  }
	
	  .bottom-menu-tabs.panel-collapsed {
	    left: 0;
	  }
	
	  /* 토글 버튼(화살표) 표시 및 테두리 제거 */
	  .panel-edge-toggle {
	    display: flex !important;
	    outline: none !important;
	    border: none !important;
	    -webkit-tap-highlight-color: transparent;
	  }
	}
	
	@media (min-width: 1024px) {
	.map-container {
	    position: absolute;
	    top: 0;
	    left: 380px;
	    right: 0;
	    bottom: 0; /* 기본값을 0으로 설정 */
	    height: auto;
	    transition: left 0.3s ease;
	  }	
		
	  /* [ITS 타입일 때만] 버튼을 보여주고 지도를 올림 */
	  .type-its .bottom-menu-tabs {
	    display: flex !important; /* ITS일 때만 나타남 */
	    z-index: 9999;
	  }
	
	  .type-its .map-container {
	    bottom: 42px;
	  }
	
	  /* 패널 접혔을 때 공통 적용 */
	  .map-container.panel-collapsed {
	    left: 0;
	  }
	}
	
	.bottom-menu-tabs {
	    display: none !important;
	}
	
	/* BIS 타입일 때는 하단 탭 메뉴 숨김 */
	.type-bis .bottom-menu-tabs {
	    display: none !important;
	}
	
	/* 모바일 ITS 처리 */
	@media (max-width: 1023px) {
	  .type-its .bottom-menu-tabs {
	    display: flex !important;
	    position: relative;
	    width: 100%;
	  }
	}
	
	#realtime-bus-content, 
	#realtime-bus-content-info {
	  display: flex;
	  flex-direction: column;
	  height: 100%;
	  overflow: hidden;
	}
	
	#routeArea, 
	#lineArea, 
	#stationArea {
	  display: none;
	  flex-direction: column;
	  height: 100%;
	  overflow: hidden;
	}
	
	.hidden {
	  display: none !important;
	}
	
	#routeArea:not(.hidden),
	#lineArea:not(.hidden),
	#stationArea:not(.hidden) {
	  display: flex !important;
	}
	
	/* 모든 스크롤 영역에 공통 적용 */
	.operation-scroll-area {
	  flex: 1;          
	  min-height: 0;
	  overflow-y: auto;
	  background-color: #ffffff;
	  padding-bottom: 0;
	  padding-bottom: env(safe-area-inset-bottom, 16px); /* 안드로이드 하단 네비게이션 바 마지막 줄 가림 방지 */
	}
	
	#stationArea .operation-scroll-area {
	  display: flex;
	  flex-direction: column;
	}
	
	#commonDetailArea, 
	.route-list-section, 
	.stop-table {
	  display: flex;
	  flex-direction: column;
	  flex: 1;
	  min-height: 0;
	  overflow: hidden;
	}
	
	#ulRouteList, 
	#ulLineRouteList, 
	#ulStaStationList, 
	#ulStaArriveList, 
	#ulCommonStationList {
	  flex: 1;
	  overflow-y: auto;
	  min-height: 0;
	}
	
	.operation-header .operation-header-right {
	  display: flex;
	  align-items: center;
	  gap: 8px;
	}
	
	.operation-header .operation-count {
	  color: white;
	  font-size: 13px;
	}
	
	.operation-header .refresh-btn {
	  background: none;
	  border: 1px solid rgba(255,255,255,0.5);
	  border-radius: 4px;
	  color: white;
	  cursor: pointer;
	  padding: 2px 6px;
	  display: flex;
	  align-items: center;
	}
	
	/* Stop List - KakaoMap Style */
	.stop-table {
	  background-color: white;
	  padding: 0 0 0 0;
	}
	
	.stop-table-header {
	  display: flex;
	  align-items: center;
	  padding: 8px 0 8px 0;
	  background-color: #f9fafb;
	  border-bottom: 1px solid #e5e7eb;
	  font-size: 13px;
	  color: #6b7280;
	}
	
	.stop-table-header div:first-child {
	  width: 60px;
	  text-align: center;
	  flex-shrink: 0;
	}
	
	.stop-table-header div:nth-child(2) {
	  width: 24px;
	  flex-shrink: 0;
	}
	
	.stop-table-header div:nth-child(3) {
	  flex: 1;
	  text-align: center;
	}
	
	.stop-table-header div:last-child {
	  width: 40px;
	  text-align: center;
	  padding-right: 12px;
	}
	
	.stop-table-row {
	  display: flex;
	  align-items: center;
	  padding: 0 12px 0 0;
	  position: relative;
	  min-height: 44px;
	  cursor: pointer;
	}
	
	/* 버스 아이콘 - 타임라인 좌측 */
	.stop-bus-area {
	  width: 60px;
	  display: flex;
	  flex-direction: column;
	  align-items: flex-end;
	  justify-content: center;
	  padding-right: 4px;
	  flex-shrink: 0;
	  align-self: stretch;
	  gap: 2px;
	}
	
	.stop-bus-tag {
	  display: inline-flex;
	  align-items: center;
	  gap: 2px;
	  background-color: #2196F3;
	  color: white;
	  font-size: 10px;
	  font-weight: 600;
	  padding: 2px 5px;
	  border-radius: 3px;
	  white-space: nowrap;
	}
	
	.stop-bus-tag svg {
	  width: 12px;
	  height: 12px;
	  fill: white;
	  flex-shrink: 0;
	}
	
	/* 노선 라인 영역 */
	.stop-route-line {
	  width: 24px;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  position: relative;
	  flex-shrink: 0;
	  align-self: stretch;
	}
	
	.stop-route-line::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  width: 3px;
	  background-color: var(--line-color, #1976D2); 
	}
	
	.stop-marker {
	  width: 20px;
	  height: 20px;
	  border-radius: 50%;
	  background-color: white;
	  border: 2px solid var(--line-color, #1976D2);
	  position: relative;
	  z-index: 2;
	  flex-shrink: 0;
	  margin: auto 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	
	/* 체크마크 색상 */
	.stop-marker::after {
	  content: '';
	  width: 6px;
	  height: 6px;
	  border-bottom: 2px solid var(--line-color, #1976D2);
	  border-right: 2px solid var(--line-color, #1976D2);
	  transform: rotate(45deg);
	  margin-top: -2px;
	}
	
	/* 첫 번째 정류소: 라인 상단 숨김 */
	.stop-table-row:first-of-type .stop-route-line::before {
	  top: 50%;
	}
	
	/* 마지막 정류소: 라인 하단 숨김 */
	.stop-table-row:last-child .stop-route-line::before {
	  bottom: 50%;
	}
	
	/* 기점 마커 */
	.stop-table-row.stop-start .stop-marker {
	  width: 20px;
	  height: 20px;
	  background-color: #1976D2;
	  border: 2px solid #0D47A1;
	}
	
	.stop-table-row.stop-start .stop-marker::after {
	  border-bottom-color: white;
	  border-right-color: white;
	}
	
	/* 회차지 마커 
	.stop-table-row.stop-turn .stop-marker {
	  width: 20px;
	  height: 20px;
	  background-color: #e8913a;
	  border: 2px solid #c77a2e;
	}*/
	
	.stop-table-row.stop-turn .stop-marker::after {
	  border-bottom-color: white;
	  border-right-color: white;
	}
	
	/* 종점 마커 */
	.stop-table-row.stop-end .stop-marker {
	  width: 20px;
	  height: 20px;
	  background-color: #d32f2f;
	  border: 2px solid #b71c1c;
	}
	
	.stop-table-row.stop-end .stop-marker::after {
	  border-bottom-color: white;
	  border-right-color: white;
	}
	
	.stop-table-row.stop-start .stop-name,
	.stop-table-row.stop-turn .stop-name,
	.stop-table-row.stop-end .stop-name {
	  font-weight: 600;
	}
	
	.stop-label {
	  font-size: 9px;
	  font-weight: 700;
	  padding: 1px 4px;
	  border-radius: 3px;
	  position: absolute;
	  top: 3px;
	  left: 50%;
	  transform: translateX(-50%);
	  z-index: 3;
	  white-space: nowrap;
	}
	
	.stop-label.label-start {
	  background-color: #1976D2;
	  color: white;
	}
	
	/*
	.stop-label.label-turn {
	  background-color: #e8913a;
	  color: white;
	}*/
	
	.stop-label.label-end {
	  background-color: #d32f2f;
	  color: white;
	}
	
	/* 회차지 마커 */
	.stop-table-row.stop-turn .stop-marker {
	  width: 20px;
	  height: 20px;
	  background-color: #6b7280;
	  border: 2px solid #4b5563;
	}
	
	.stop-label.label-turn {
	  background-color: #6b7280;
	  color: white;
	}
	
	.stop-table-row .stop-name {
	  flex: 1;
	  padding: 12px 8px;
	  font-size: 13px;
	  color: #333;
	  text-align: center;
	}
	
	.stop-table-row .stop-action {
	  flex-shrink: 0;
	}
	
	.stop-table-row .stop-action .view-btn {
	  width: 28px;
	  height: 28px;
	  border-radius: 50%;
	  border: 1px solid #d1d5db;
	  background: white;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  cursor: pointer;
	  transition: all 0.2s;
	}
	
	.stop-table-row .stop-action .view-btn:hover {
	  background-color: #f3f4f6;
	  border-color: #9ca3af;
	}
	
	.stop-table-row .stop-action .view-btn svg {
	  width: 14px;
	  height: 14px;
	  color: #6b7280;
	}
	
  	/* 소형 모바일 (높이 700px 이하) */
  	@media (max-width: 767px) and (max-height: 700px) {                                                           
	  .map-container {                                        
	    height: 78vh; /* 패널을 위해 약간 양보하되 고정 */
	    height: 78dvh;                                        
	  }                                                                                                           
	  .search-panel {
	    min-height: 105vh;
	    min-height: 105dvh;                                    
	  }
  	}

  	/* 중형/대형 모바일 (높이 740px 이상) */                                               
  	@media (max-width: 767px) and (min-height: 740px) {
	  .map-container {                                                                                            
	    height: 80vh; 
	    height: 80dvh;
	  }                                                                                                           
	  .search-panel {
	    min-height: 106vh; 
	    min-height: 106dvh;                                    
	  }
  	}

  	/* 대형 모바일 (높이 851px 이상) */                                          
  	@media (max-width: 767px) and (min-height: 851px) {
	    .map-container {                                                                                            
	      height: 102vh;
	      height: 102dvh;
	    }
	    .search-panel {
	      min-height: 107vh;
	      min-height: 107dvh;                                                                                        
	    }
  	}
  
	@media (max-width: 1023px) {
	  .operation-scroll-area {
	    flex: 1;
	    overflow-y: auto;
	    min-height: 600px;
	    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
	  }
	  .bus-search-main {
	    display: block;
	    flex-direction: column;
	    overflow-y: auto;
	  }
	}
  
  	@media (max-width: 767px) {
	  	.search-panel {
		    min-height: 65vh; 
		    min-height: 65dvh; 
		}
  
	  	/* 모바일 최소 폰트 사이즈 보정 */
		.bottom-menu-tab span {                                                                                       
		    font-size: 11px;             /* 기존 10px → 11px, 하단 메뉴 탭 텍스트 */
		}                                                                                                             
		.route-badge,                                             
		.type-badge,                                                                                                  
		.search-help-badge {                                                                                          
		    font-size: 11px;             /* 기존 10px → 11px, 노선/유형/도움말 배지 */
		}                                                                                                             
		.stop-label {                                             
		    font-size: 10px;             /* 기존 9px → 10px, 정류소 라벨 */                                             
		}                                                         
		.legend-speed {
		    font-size: 10px;             /* 기존 9px → 10px, 범례 속도 텍스트 */                                        
		}
		.time-badge {                                                                                                 
		    font-size: 12px;             /* 기존 11px → 12px, 시간 배지 */
		}                                                                                                             
		.route-direction {
		    font-size: 12px;             /* 기존 11px → 12px, 노선 방향 텍스트 */                                       
		}                                                                                                             
		.route-title-close {
		    font-size: 12px;             /* 기존 11px → 12px, 노선 제목 닫기 버튼 */                                    
		}                                                         
		.route-table-header div,
		.route-table-row {                                                                                            
		    font-size: 13px;             /* 기존 12px → 13px, 노선 테이블 헤더/행 */
		}   
  	}
	
	/* 캔버스 요소의 기본 아웃라인 및 테두리 제거 */
	.ol-unselectable, 
	#ol-map canvas, 
	#ol-map {
	    border: none !important;
	    outline: none !important;
	    box-shadow: none !important;
	}
	
	/* 지도를 클릭했을 때 생기는 파란색/검은색 테두리(포커스) 방지 */
	#ol-map:focus,
	.ol-viewport:focus {
	    outline: none !important;
	}
	
	/* 파동 애니메이션 정의 */
	@keyframes busRipple {
	    0% { transform: scale(0.8); opacity: 0.8; }
	    100% { transform: scale(2.5); opacity: 0; }
	}
	
	.bus-ripple {
	    position: absolute;
	    width: 30px;
	    height: 30px;
	    border-radius: 50%;
	    z-index: -1; /* 아이콘 뒤에 배치 */
	    animation: busRipple 1.2s infinite ease-out;
	}
	
	/* 색상별 클래스 */
	.ripple-red { background: rgba(239, 68, 68, 0.6); }   /* 급행 */
	.ripple-blue { background: rgba(59, 130, 246, 0.6); }  /* 대구 */
	.ripple-green { background: rgba(132, 204, 22, 0.6); } /* 경산 */
	
	/* 정류소 파동 */
	.station-ripple {
	    position: absolute;
	    width: 30px;
	    height: 30px;
	    border-radius: 50%;
	    z-index: 1;
	    pointer-events: none;
	    animation: busRipple 1.8s infinite ease-out;
	}
	.ripple-navy   { background: rgba(10, 25, 80, 0.65); }  /* 정류소 - 진한 남색 */
	
	/* 상세정보 패널 내 도착정보 영역을 위한 스크롤 설정 */
	#realtime-bus-content-info {
	    display: flex;
	    flex-direction: column;
	    height: 100%; /* 부모 높이 꽉 채우기 */
	    overflow: hidden; /* 패널 자체 스크롤 방지 */
	}
	
	#commonDetailArea {
	    display: flex;
	    flex-direction: column;
	    height: 100%;
	}
	
	/* 도착 정보 리스트 영역에 스크롤 부여 */
	#ulRtArriveList {
	    flex: 1; /* 남은 공간 모두 차지 */
	    overflow-y: auto; /* 내용이 많아지면 세로 스크롤 생성 */
	    max-height: 100%; /* 부모를 넘지 않도록 제한 */
	}
	
	/* 도착 정보가 보일 때 아래의 정류소 목록이 가려지지 않게 하려면 */
	#divRtArriveList {
	    max-height: 90%;
	    overflow-y: auto;
	}
	
	/* 모바일 및 태블릿 환경(1023px 이하)에서 아이폰 자동 확대 방지 */
	@media (max-width: 1023px) {
	  .search-input-wrapper input,
	  #searchKeyword {
	    font-size: 16px !important;
	  }
	}