/* 페이지 타이틀 섹션 */
.page-title { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 120px 0; color: #fff; text-align: center; position: relative; }
.page-title::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(26, 58, 109, 0.8), rgba(42, 82, 152, 0.8)); }
.page-title .container { position: relative; z-index: 1; }
.page-title h1 { font-size: 3rem; margin-bottom: 1rem; font-weight: 700; }
.page-title p { font-size: 1.4rem; opacity: 0.9; }

/* 공통 컨테이너 */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 네트워크 맵 섹션 */
.network-map { padding: 80px 0; background: #fff; }
.network-map .section-title { text-align: center; margin-bottom: 50px; }
.network-map .section-title strong { display: block; color: #2a5298; font-size: 2.4rem; margin-top: 10px; }

/* 대한민국 지도 컨테이너 스타일 */
.map-container { position: relative; max-width: 800px; height: 600px; margin: 0 auto; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); background: #f8f9fa; }
#korea-map { width: 100%; height: 100%; }
#korea-map path { fill: #e9ecef; stroke: #fff; stroke-width: 1px; transition: fill 0.3s ease; }
#korea-map path:hover { fill: #dee2e6; }
#korea-map .branch-marker { fill: #2a5298; stroke: #fff; stroke-width: 1; cursor: pointer; transition: none; }
#korea-map .branch-marker:hover { fill: #1a3a6d; }

/* 울릉도, 연평도 등 작은 섬 지역 스타일 */
#korea-map .small-island { fill: #e9ecef; stroke: #fff; stroke-width: 1px; }

/* 마커 툴팁 스타일 */
#korea-map text.marker-tooltip { fill: #1a3a6d; font-weight: bold; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), -1px -1px 2px rgba(255, 255, 255, 0.8); pointer-events: none; dominant-baseline: middle; }

/* 지점 정보 팝업 스타일 */
.branch-info-popup { position: absolute; top: 0; left: 0; background: #fff; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); padding: 15px; width: 250px; display: none; z-index: 10; border: 2px solid #2a5298; }
.branch-info-popup.active { display: block; animation: fadeIn 0.3s ease forwards; }
.popup-content { position: relative; }
.popup-title { color: #1a3a6d; margin-bottom: 10px; font-size: 1.2rem; }
.popup-address { font-size: 0.9rem; margin-bottom: 8px; color: #555; }
.popup-tel { font-size: 1rem; color: #2a5298; font-weight: 500; margin-bottom: 12px; }
.popup-map-button { display: inline-flex; align-items: center; padding: 8px 15px; background: #2a5298; color: #fff; border: none; border-radius: 5px; font-size: 0.9rem; cursor: pointer; transition: background 0.3s ease; }
.popup-map-button:hover { background: #1a3a6d; }
.close-popup { position: absolute; top: 0; right: 0; background: none; border: none; font-size: 1rem; color: #777; cursor: pointer; padding: 5px; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 기존 맵 래퍼 스타일은 유지 (하위 호환성) */
.map-wrapper { max-width: 800px; margin: 0 auto; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); }
.map-wrapper img { width: 100%; height: auto; display: block; }

/* 지점 목록 섹션 */
.branch-list { padding: 80px 0; background: #f8f9fa; }
.region-group { margin-bottom: 60px; }
.region-group:last-child { margin-bottom: 0; }
.region-title { font-size: 2rem; color: #1a3a6d; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 2px solid #2a5298; }
.branches-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.branch-card { background: #fff; border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; }
.branch-card:hover { transform: translateY(-5px); }
.branch-card h4 { font-size: 1.4rem; color: #1a3a6d; margin-bottom: 10px; }
.branch-card .representative {
  font-size: 1.1rem;
  color: #2a5298;
  margin-bottom: 20px;
  display: block;
  font-weight: 500;
}
.branch-info { color: #555; }
.address { font-size: 1.1rem; line-height: 1.6; margin-bottom: 15px; word-break: keep-all; }
.tel { font-size: 1.2rem; color: #2a5298; font-weight: 500; margin-bottom: 20px; }
.map-button { display: inline-flex; align-items: center; padding: 10px 20px; background: #2a5298; color: #fff; border: none; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: background 0.3s ease; }
.map-button:hover { background: #1a3a6d; }
.map-button i { margin-right: 8px; }

/* 지도 모달 */
.map-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 1000; align-items: center; justify-content: center; }
.map-modal.active { display: flex; }
.modal-content { background: #fff; width: 90%; max-width: 800px; height: 80vh; border-radius: 20px; position: relative; padding: 20px; }
.close-modal { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 1.5rem; color: #333; cursor: pointer; z-index: 1; }
#map-container { width: 100%; height: 100%; border-radius: 15px; overflow: hidden; }

/* 지역 필터 탭 스타일 */
.region-filter { margin-bottom: 50px; text-align: center; }
.filter-tabs { display: inline-flex; background: #fff; border-radius: 50px; padding: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); }
.filter-tab { padding: 12px 25px; font-size: 1.1rem; color: #555; cursor: pointer; border-radius: 30px; transition: all 0.3s ease; position: relative; overflow: hidden; }
.filter-tab.active { background: #2a5298; color: #fff; }
.filter-tab:hover:not(.active) { color: #2a5298; }

/* 반응형 디자인 */
@media (max-width:1024px) {
  .branches-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width:768px) {
  .page-title { padding: 60px 0; }
  .page-title h1 { font-size: 2.2rem; }
  .page-title p { font-size: 1.2rem; }

  /* 네트워크 맵 섹션 모바일 최적화 */
  .network-map { padding: 40px 0; }
  .network-map .section-title { margin-bottom: 30px; }
  .network-map .section-title strong { font-size: 2rem; }

  /* 지도 컨테이너 모바일 최적화 */
  .map-container {
    height: 500px;
    max-width: 100%;
  }

  /* 모바일에서 울릉도, 연평도 등 작은 섬 숨기기 */
  #korea-map .small-island {
    display: none;
  }

  /* 모바일에서 한반도 본토에 집중하기 위한 스타일 */
  #korea-map {
    transform: scale(1.2);
    transform-origin: center;
  }

  /* 모바일용 안내 메시지 표시 */
  .mobile-map-guide {
    display: block;
  }

  /* 모바일에서 확대 버튼 스타일 조정 */
  .zoom-seoul-button {
    padding: 14px 28px;
    font-size: 1.2rem;
    width: 100%;
    max-width: 400px;
    justify-content: center;
  }

  /* 지점 목록 섹션 모바일 최적화 */
  .branch-list { padding: 40px 0; }
  .branches-grid { grid-template-columns: 1fr; gap: 20px; }
  .region-title { font-size: 1.8rem; margin-bottom: 20px; }
  .branch-card { padding: 25px; }

  /* 필터 탭 모바일 최적화 */
  .filter-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
    width: 100%;
    max-width: 500px;
  }
  .filter-tab {
    padding: 10px 12px;
    font-size: 1rem;
    text-align: center;
    min-height: 40px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 지역 그룹 최소 높이 제거 */
  .region-groups { min-height: auto; }
  .empty-region .branches-grid { min-height: auto; }

  /* 토글 버튼 최적화 */
  .toggle-detail-button { transform: scale(1.1) translate(0, 0); }
  .seoul-detail-view text.detail-label { font-size: 12px; }

  /* 터치 영역 최적화 */
  .map-button, .filter-tab, .popup-map-button {
    -webkit-tap-highlight-color: transparent;
  }
  .map-button {
    min-height: 44px;
  }
  #korea-map .branch-marker {
    r: 8; /* 터치 영역 확대 */
  }
}

@media (max-width:576px) {
  /* 작은 디바이스용 최적화 */
  .network-map .section-title strong { font-size: 1.8rem; }
  .map-container {
    height: 450px;
  }

  /* 작은 화면에서 지도 더 크게 확대 */
  #korea-map {
    transform: scale(1.3);
  }

  /* 작은 화면에서 확대 버튼 스타일 조정 */
  .zoom-seoul-button {
    padding: 12px 25px;
    font-size: 1.1rem;
  }

  .branch-card { padding: 20px; }
  .branch-card h4 { font-size: 1.3rem; }
  .branch-card .representative { font-size: 1rem; margin-bottom: 15px; }
  .address { font-size: 1rem; line-height: 1.5; margin-bottom: 10px; }
  .tel { font-size: 1.1rem; margin-bottom: 15px; }

  /* 필터 탭 추가 최적화 */
  .filter-tabs {
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
    width: 100%;
  }
  .filter-tab {
    padding: 8px 5px;
    font-size: 0.95rem;
  }
}

@media (max-width:480px) {
  .page-title { padding: 50px 0; }
  .page-title h1 { font-size: 1.8rem; }
  .page-title p { font-size: 1rem; }

  .network-map { padding: 30px 0; }
  .network-map .section-title strong { font-size: 1.6rem; }

  /* 지도 컨테이너 더 작은 화면 최적화 */
  .map-container {
    height: 400px;
  }

  /* 가장 작은 화면에서는 지도 더 크게 확대 */
  #korea-map {
    transform: scale(1.8);
  }

  /* 가장 작은 화면에서 마커 크기 키우기 */
  #korea-map .branch-marker {
    r: 9;
    stroke-width: 1.5;
  }

  /* 가장 작은 화면에서 확대 버튼 스타일 조정 */
  .zoom-seoul-button {
    padding: 10px 20px;
    font-size: 1rem;
  }

  .branch-card h4 { font-size: 1.2rem; }
  .address { font-size: 0.95rem; }
  .tel { font-size: 1rem; }
  .map-button {
    width: 100%;
    justify-content: center;
    padding: 8px 15px;
    font-size: 0.95rem;
  }

  /* 필터 탭 최적화 */
  .filter-tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 90%;
  }
  .filter-tab {
    padding: 8px 10px;
    font-size: 0.9rem;
  }

  /* 모달 최적화 */
  .modal-content {
    width: 95%;
    height: 70vh;
    padding: 15px;
  }
  .close-modal {
    top: 10px;
    right: 10px;
  }

  /* 지역 제목 크기 조정 */
  .region-title { font-size: 1.5rem; }

  /* 팝업 사이즈 조정 */
  .branch-info-popup {
    width: 200px;
    padding: 12px;
  }
  .popup-title { font-size: 1.1rem; }
  .popup-address { font-size: 0.85rem; }
  .popup-tel { font-size: 0.9rem; }
  .popup-map-button {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  /* 상세 버튼 최적화 */
  .toggle-detail-button { transform: scale(0.9) translate(0, 10px); }
  .toggle-detail-button text { font-size: 12px !important; }
  .seoul-detail-view text.detail-label { font-size: 10px; }
}

/* 지사 모집 카드 스타일 */
.branch-card.recruitment { background: linear-gradient(135deg, #f8f9fa 0%, #e9e9e9 100%); text-align: center; padding: 40px; transition: transform 0.3s ease; }
.branch-card.recruitment:hover { transform: translateY(-5px); }
.recruitment-content { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.recruitment-content i { font-size: 2.5rem; color: #2a5298; margin-bottom: 10px; }
.recruitment-content h4 { font-size: 1.4rem; color: #1a3a6d; margin: 0; }
.recruitment-content p { color: #666; margin: 0; }
.recruitment-button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #2a5298; color: #fff; border-radius: 5px; text-decoration: none; margin-top: 15px; transition: background 0.3s ease; }
.recruitment-button:hover { background: #1a3a6d; }

/* 빈 지역 그룹 애니메이션 */
.empty-region { opacity: 0; transform: translateY(20px); }
@media (max-width:768px) {
  .branch-card.recruitment { padding: 25px; }
  .recruitment-content h4 { font-size: 1.2rem; }
  .recruitment-content i { font-size: 2rem; }
  .recruitment-button {
    padding: 10px 20px;
    font-size: 0.95rem;
  }
}

/* 모바일에서는 최소 높이 제거 - 콘텐츠에 맞게 자동 조정 */
@media (min-width: 769px) {
  /* 지점 목록 섹션에 최소 높이 추가 */
  .region-groups { min-height: 800px; /* 서울 지역 2줄 표시 높이에 맞춤 */ }

  /* 빈 지역 그룹도 동일한 높이 유지 */
  .empty-region .branches-grid { min-height: 700px; /* 카드 높이 + 여백 고려 */ }
}

/* 서울/경기 확대 뷰 스타일 */
.seoul-detail-view { pointer-events: all; z-index: 100; /* 높은 z-index로 다른 요소 위에 표시 */ }
.seoul-detail-view path.detail-province { fill: #e9ecef; stroke: #fff; stroke-width: 0.5px; }

/* 상세 뷰 마커 스타일 */
.detail-marker { fill: #2a5298; stroke: #fff; stroke-width: 2; cursor: pointer; transition: all 0.2s ease; }
.detail-marker:hover { fill: #1a3a6d; r: 10; }
.detail-marker.highlight { fill: #1a3a6d !important; r: 10 !important; stroke-width: 3 !important; filter: drop-shadow(0 0 5px rgba(26, 58, 109, 0.6)); }

/* 상세 뷰 툴팁 스타일 */
.detail-tooltip { fill: #1a3a6d; font-weight: bold; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); pointer-events: none; }

/* 상세 뷰 라벨 스타일 */
.detail-label { pointer-events: none; text-shadow: 0px 0px 3px #fff, 0px 0px 3px #fff; font-size: 14px; }

/* 토글 버튼 스타일 */
.toggle-detail-button { cursor: pointer; transition: opacity 0.3s; }
.toggle-detail-button:hover rect { opacity: 1; }
.close-detail-view { cursor: pointer; }
.close-detail-view:hover text { fill: #333; }

/* 목록 관련 스타일 제거 */
.branch-list-panel { display: none; /* 숨김 처리 */ }

/* 모바일용 안내 메시지 */
.mobile-map-guide {
  display: none;
  text-align: center;
  margin-top: 20px;
  padding: 15px;
  background: #f0f4ff;
  border-radius: 10px;
  color: #2a5298;
  font-weight: 500;
}

.mobile-map-guide p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mobile-map-guide .mobile-map-note {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #666;
}

.mobile-map-guide i {
  font-size: 1.2rem;
}

/* 서울/경기 확대 버튼 스타일 */
.zoom-controls {
  text-align: center;
  margin-top: 20px;
}

.zoom-seoul-button {
  background: #2a5298;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 25px;
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(42, 82, 152, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  -webkit-tap-highlight-color: transparent; /* 탭 하이라이트 제거 */
}

.zoom-seoul-button:hover {
  background: #1a3a6d;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(42, 82, 152, 0.3);
}

.zoom-seoul-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(42, 82, 152, 0.2);
}

.zoom-seoul-button i {
  font-size: 1.2rem;
}

/* 반응형 디자인에 추가 */
@media (max-width:768px) {
  /* 모바일용 안내 메시지 표시 */
  .mobile-map-guide {
    display: block;
  }

  /* 모바일에서 확대 버튼 스타일 조정 */
  .zoom-seoul-button {
    padding: 14px 28px;
    font-size: 1.2rem;
    width: 100%;
    max-width: 400px;
    justify-content: center;
  }
}

@media (max-width:576px) {
  /* 작은 화면에서 확대 버튼 스타일 조정 */
  .zoom-seoul-button {
    padding: 12px 25px;
    font-size: 1.1rem;
  }
}

@media (max-width:480px) {
  /* 가장 작은 화면에서 확대 버튼 스타일 조정 */
  .zoom-seoul-button {
    padding: 10px 20px;
    font-size: 1rem;
  }
}

/*지도*/
.branch-card.highlight { animation: highlightCard 1.5s ease; border-color: #1a3a6d; box-shadow: 0 10px 30px rgba(26, 58, 109, 0.15); }
@keyframes highlightCard {
  0%, 100% { transform: translateY(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateY(-5px); }
  20%, 40%, 60%, 80% { transform: translateY(0); }
}
.branch-marker.highlight, .detail-marker.highlight { fill: #1a3a6d !important; r: 8 !important; stroke-width: 2 !important; filter: drop-shadow(0 0 4px rgba(26, 58, 109, 0.5)); }

/* 팝업 애니메이션 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.branch-info-popup.active, .branch-list-panel.active { animation: fadeIn 0.3s ease forwards; }

/* 모바일용 안내 메시지 */
.mobile-map-guide {
  display: none;
  text-align: center;
  margin-top: 20px;
  padding: 15px;
  background: #f0f4ff;
  border-radius: 10px;
  color: #2a5298;
  font-weight: 500;
}