/* 오시는 길 페이지 본문 */
.location-section { padding: var(--tf-content-space) 0; }
.location-section__inner { display: flex; flex-direction: column; gap: 5rem; }

/* 지도 API가 삽입될 고정 영역 */
.location-map { display: flex; width: 100%; height: 50rem; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--color-border-normal); border-radius: 1.5rem; background: var(--color-background-alt); }
.location-map p { margin: 0; font-size: 1rem; line-height: 1.5; }

/* 주소와 교통 안내 카드 */
.location-guide { overflow: hidden; border: 1px solid var(--color-border-normal); border-radius: 1.5rem; }
.location-address { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--color-border-normal); padding: var(--tf-panel-space, 2.5rem) var(--tf-panel-space, 5rem); }
.location-address > img, .location-address > .tf-icon, .transit-heading img, .transit-heading .tf-icon { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; }
.location-address > div { min-width: 0; flex: 1; }
.location-address h3 { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.5; letter-spacing: -.01em; }
.location-address p { margin: 0; color: var(--color-text-muted); font-size: 1rem; line-height: 1.5; }
.location-address .tf-button { flex: 0 0 auto; }
.location-transit { display: flex; flex-direction: column; gap: 2.5rem; padding: var(--tf-panel-space, 5rem); }
.transit-section { display: flex; flex-direction: column; gap: 1.25rem; }
.transit-heading { display: flex; align-items: center; gap: .5rem; }
.transit-heading h3 { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.5; }
.transit-subway { display: flex; align-items: center; gap: .5rem; padding-inline: 1.25rem; }
.transit-subway p { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; }

/* 노선 유형 배지 */
.location-badge { display: inline-flex; height: 1.875rem; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: var(--tf-radius-pill); padding: 0 .75rem; font-size: .75rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.location-badge--subway { border-color: var(--color-status-danger); color: var(--tf-white); background: var(--color-status-danger); }
.location-badge--green { color: var(--color-status-success); }
.location-badge--red { color: var(--color-status-danger); }

/* 버스 정류장별 노선 */
.bus-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5rem; padding-inline: 1.25rem; }
.bus-stop { min-width: 0; }
.bus-stop h4 { margin: 0 0 1rem; color: var(--color-text-muted); font-size: 1.125rem; font-weight: 600; line-height: 1.5; }
.bus-stop h4::before { margin-right: .625rem; content: "•"; }
.bus-routes { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.bus-routes > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; align-items: start; min-height: 1.875rem; }
.bus-routes dt, .bus-routes dd { margin: 0; }
.bus-routes dd { display: flex; min-height: 1.875rem; flex-wrap: wrap; align-items: center; gap: var(--number-8); font-size: 1rem; font-weight: 600; line-height: 1.5; }
.bus-routes dd > span { white-space: nowrap; }

/* 1200 시안: 교통 안내는 한 열, 주소 40px·교통 안내 상하 80px */
@media (max-width: 1919.98px) {
  .location-address { padding: var(--number-40); }
  .location-transit { padding: var(--number-80) var(--number-40); }
  .bus-columns { grid-template-columns: minmax(0, 1fr); gap: var(--number-40); }
  .bus-stop:first-child h4 { margin-bottom: var(--number-12); }
}

/* 태블릿: 지도 높이 400px, 본문 구간 간격은 기본 80px 유지 */
@media (max-width: 1199.98px) {
  .location-map { height: 25rem; }
}

/* 모바일: 주소·교통 안내를 세로로 배치하고 노선 단위로 줄바꿈 */
@media (max-width: 767.98px) {
  .location-section__inner { gap: var(--number-40); }
  .location-map { height: 12.5rem; }
  .location-address { flex-direction: column; align-items: flex-start; padding: var(--number-20); }
  .location-address > .tf-icon, .transit-heading .tf-icon { width: var(--number-32); height: var(--number-32); flex-basis: var(--number-32); }
  .location-address > div { width: 100%; }
  .location-address h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; }
  .location-address p { font-size: .875rem; overflow-wrap: break-word; }
  .location-address .tf-button { height: var(--number-32); margin-top: var(--number-8); padding-inline: var(--number-16); font-size: .875rem; }
  .location-transit { padding: var(--number-20); }
  .transit-subway, .bus-columns { padding-inline: 0; }
  .transit-subway { flex-direction: column; align-items: flex-start; }
  .transit-section--bus { gap: var(--number-8); }
  .bus-stop h4 { font-size: 1rem; }
  .bus-stop h4::before { content: none; }
  .bus-routes { gap: var(--number-12); }
  .bus-routes dd { align-content: flex-start; font-size: .875rem; font-weight: 500; }
}