/**
 * 주변 교통 정보 섹션 스타일
 * product-detail.html, spot-detail.html 공용
 * 호갱노노/직방 스타일의 프로덕션 급 UI
 */

/* =============================================
   2열 그리드 레이아웃 (데스크톱 위치 섹션)
   ============================================= */
.location-grid-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  min-height: 350px;
}

.location-map-column {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.location-map-column .location-map-fullwidth {
  height: 100%;
  min-height: 350px;
}

.location-info-column {
  display: flex;
  flex-direction: column;
}

/* 사이드바 스타일 교통 정보 */
.nearby-transport-sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.nearby-transport-sidebar .nearby-transport-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
}

.nearby-transport-sidebar .nearby-transport-title {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9ecef;
}

.nearby-transport-sidebar .nearby-transport-content {
  flex: 1;
  overflow-y: auto;
  gap: 16px;
}

.nearby-transport-sidebar .transport-category {
  gap: 8px;
}

.nearby-transport-sidebar .transport-list {
  gap: 6px;
}

.nearby-transport-sidebar .transport-item {
  padding: 10px 12px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.nearby-transport-sidebar .transport-item:hover {
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* 로딩/빈 상태 사이드바 스타일 */
.nearby-transport-sidebar .nearby-transport-loading,
.nearby-transport-sidebar .nearby-transport-empty {
  height: 100%;
  background: #f8f9fa;
  border-radius: 12px;
  min-height: 350px;
}

/* 1200px 이하에서 1열로 변경 */
@media (max-width: 1200px) {
  .location-grid-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .location-map-column .location-map-fullwidth {
    min-height: 300px;
  }

  .nearby-transport-sidebar {
    height: auto;
  }

  .nearby-transport-sidebar .nearby-transport-section {
    height: auto;
  }
}

/* =============================================
   인라인 교통 정보 (위치 섹션 내 통합)
   ============================================= */
.nearby-transport-inline {
  margin-top: 16px;
  padding-top: 0;
  padding-bottom: 16px;
  border-top: none;
}

.nearby-transport-inline:empty {
  display: none;
}

/* =============================================
   메인 컨테이너
   ============================================= */
.nearby-transport-section {
  background: transparent;
  padding: 0;
  margin: 0;
}

.nearby-transport-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.nearby-transport-title svg {
  color: #3182F6;
  flex-shrink: 0;
}

.nearby-transport-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* =============================================
   카테고리 (지하철역, 버스정류장)
   ============================================= */
.transport-category {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.transport-category-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.transport-icon {
  font-size: 14px;
}

.transport-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* =============================================
   개별 교통 아이템 (호갱노노 스타일)
   ============================================= */
.transport-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #f8f9fa;
  border-radius: 10px;
  transition: all 0.15s ease;
  cursor: default;
}

.transport-item:hover {
  background: #f1f3f5;
  transform: translateX(2px);
}

.transport-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.transport-name {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================
   지하철 노선 배지 (서울 지하철 공식 색상)
   ============================================= */

/* 여러 노선 배지를 담는 컨테이너 */
.line-badges {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.line-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}

/* 서울 지하철 노선별 공식 색상 */
.line-badge.line-1 { background-color: #0052A4; }
.line-badge.line-2 { background-color: #00A651; }
.line-badge.line-3 { background-color: #EF7C1C; }
.line-badge.line-4 { background-color: #00A5DE; }
.line-badge.line-5 { background-color: #996CAC; }
.line-badge.line-6 { background-color: #CD7C2F; }
.line-badge.line-7 { background-color: #747F00; }
.line-badge.line-8 { background-color: #E6186C; }
.line-badge.line-9 { background-color: #BDB092; }
.line-badge.line-sinbundang { background-color: #D31F45; }
.line-badge.line-bundang { background-color: #FABE00; color: #333; }
.line-badge.line-gyeongui { background-color: #77C4A3; }
.line-badge.line-airport { background-color: #0090D2; }
.line-badge.line-gyeongchun { background-color: #0C8E72; }
.line-badge.line-suin { background-color: #FABE00; color: #333; }
.line-badge.line-ui { background-color: #B7C450; }
.line-badge.line-uijeongbu { background-color: #FDA600; }
.line-badge.line-gimpo { background-color: #AD8605; }
.line-badge.line-everline { background-color: #77C371; }
.line-badge.line-seohae { background-color: #8FC31F; }
.line-badge.line-gtx-a { background-color: #9A6292; }
.line-badge.line-srt { background-color: #8C2169; }
.line-badge.line-sillim { background-color: #5B7F95; }

/* 환승역 배지 */
.transfer-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

/* 버스 배지 */
.bus-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background-color: #36B37E;
  white-space: nowrap;
  min-width: 40px;
  text-align: center;
  flex-shrink: 0;
}

/* =============================================
   거리 정보 (호갱노노 스타일)
   ============================================= */
.transport-distance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
  margin-left: 12px;
}

.distance-value {
  font-size: 14px;
  font-weight: 700;
  color: #3182F6;
}

.walk-time {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
}

/* =============================================
   로딩 상태
   ============================================= */
.nearby-transport-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: #888;
  font-size: 13px;
}

.loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #e0e0e0;
  border-top-color: #3182F6;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* =============================================
   빈 상태 / 에러 상태
   ============================================= */
.nearby-transport-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  color: #888;
  font-size: 13px;
  text-align: center;
  gap: 8px;
}

.nearby-transport-empty::before {
  content: '🚇';
  font-size: 24px;
  opacity: 0.5;
}

.nearby-transport-error {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #fff5f5;
  border-radius: 10px;
  color: #e53e3e;
  font-size: 13px;
  text-align: center;
}

/* =============================================
   반응형 디자인 - 모바일 심플 UI
   ============================================= */
@media (max-width: 768px) {
  .nearby-transport-inline {
    margin-top: 12px;
    padding-top: 0;
    padding-bottom: 20px;
  }

  /* 모바일: 메인 타이틀("주변 교통") 숨기기 */
  .nearby-transport-inline .nearby-transport-title {
    display: none;
  }

  /* 모바일: 카테고리 타이틀(지하철역, 버스정류장) 표시 */
  .nearby-transport-inline .transport-category-title {
    display: flex;
    font-size: 14px;
    margin-bottom: 0;
  }

  /* 모바일: 도보 시간 숨기기 */
  .nearby-transport-inline .walk-time {
    display: none;
  }

  /* 모바일: 환승 배지 숨기기 */
  .nearby-transport-inline .transfer-badge {
    display: none;
  }

  /* 모바일: 거리 정보 한 줄로 */
  .nearby-transport-inline .transport-distance {
    flex-direction: row;
    align-items: center;
  }

  .nearby-transport-title {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .nearby-transport-content {
    gap: 8px;
  }

  .transport-category {
    gap: 6px;
  }

  .transport-list {
    gap: 4px;
  }

  .transport-item {
    padding: 8px 10px;
    border-radius: 6px;
  }

  .transport-info {
    gap: 6px;
  }

  .transport-name {
    font-size: 13px;
  }

  .line-badges {
    gap: 3px;
  }

  .line-badge {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .bus-badge {
    padding: 2px 6px;
    font-size: 10px;
    min-width: 32px;
  }

  .distance-value {
    font-size: 12px;
    font-weight: 600;
  }
}

@media (max-width: 480px) {
  .nearby-transport-inline {
    margin-top: 10px;
    padding-top: 0;
    padding-bottom: 16px;
  }

  .nearby-transport-title {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .transport-item {
    padding: 6px 8px;
  }

  .transport-distance {
    margin-left: 6px;
  }

  .transport-name {
    font-size: 12px;
  }

  .line-badges {
    gap: 2px;
  }

  .line-badge {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .bus-badge {
    padding: 2px 5px;
    font-size: 9px;
    min-width: 28px;
  }

  .distance-value {
    font-size: 11px;
  }
}

/* 다크모드 미지원 - 프로젝트 전체가 라이트 모드 전용
   Safari에서 시스템 다크모드 시 텍스트 색상 충돌 방지를 위해 제거됨 */