/* 인사말 */

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem;
}


.subtitle {
  font-size: 1.1rem;
  color: #666;
  font-weight: 300;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* 소개 섹션 */
.intro-section {
  text-align: center;
}

.main-description {
  font-size: 1.3rem;
  line-height: 1.8;
  color: #444;
  max-width: 800px;
  margin: 0 auto;
}

/* 약속 섹션 */
.commitment-section {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.commitment-section p {text-align: center;}

.commitment-text {
  font-size: 1.3rem;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.signature {
  font-size: 1.1rem;
  color: #666;
  font-style: italic;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .container {
    padding: 1.5rem 1rem;
  }

  .main-content {
    gap: 2rem;
  }

  .main-description {
    font-size: 1.1rem;
  }

  .commitment-text {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 1rem;
  }

  .main-content {
    gap: 1.5rem;
  }

  .main-description {
    font-size: 1.1rem;
  }

  .commitment-text {
    font-size: 1.2rem;
  }
}


/* 오시는길 */

/* 위치 섹션 */
.location-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.location-title {
  font-size: 22px;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.4;
}

/* 지도 컨테이너 */
.map-container {
  width: 100%;
}

#daumRoughmapContainer1758138464420 {width:100%;}
#daumRoughmapContainer1758136460597 {width:100%;}

.kakao-map-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  max-width: 504px;
}

/* 주소 정보 */
.address-info {
  margin-top: 1rem;
}

.address {
  font-size: 16px;
  color: #444;
  line-height: 1.6;
}

.bullet {
  color: #666;
  margin-right: 0.5rem;
}

/* 교통 정보 */
.transport-info {
  margin-top: 0;
}

.station-title {
  font-size: 16px;
  color: #444;
  margin-bottom: 0.5rem;
}

.landmark {
  font-size: 16px;
  color: #444;
  margin-bottom: 1rem;
  font-weight: 500;
}

/* 버스 노선 */
.bus-routes {
  display: flex;
  gap: 0.8rem;
  margin-top: 1rem;
  justify-content: flex-start;
}

.bus-route {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0.3rem;
  border-radius: 6px;
  min-width: 140px;
  gap: 0.3rem;
}

.route-type-box {
  background-color: #0056b3;
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.route-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.route-number {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0.2rem;
  line-height: 1.2;
  color: #333;
}

.route-direction {
  font-size: 14px;
  line-height: 1.2;
  color: #666;
  width:100%;
}

/* 반응형 디자인 */
@media (max-width: 768px) {


  .location-title {
    font-size: 19px;
  }

  .kakao-map-image {
    max-width: 100%;
  }

  .bus-routes {
    gap: 0.6rem;
  }

  .bus-route {
    min-width: 120px;
    padding: 0.6rem;
    gap: 0.6rem;
  }

  .route-type-box {
    font-size: 10px;
    padding: 0.25rem 0.5rem;
  }

  .route-number {
    font-size: 16px;
  }

  .route-direction {
    font-size: 12px;
  }
}

@media (max-width: 480px) {


  .location-title {
    font-size: 18px;
  }

  .kakao-map-image {
    max-width: 100%;
  }

  .bus-routes {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.4rem;
    flex-wrap: wrap;
  }

  .bus-route {
    min-width: 100px;
    padding: 0.5rem;
    gap: 0.5rem;
  }

  .route-type-box {
    font-size: 9px;
    padding: 0.2rem 0.4rem;
  }

  .route-number {
    font-size: 14px;
  }

  .route-direction {
    font-size: 12px;
    width: 100%;
  }
}

/* 접근성 개선 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 고대비 모드 지원 */
@media (prefers-contrast: high) {
  .map-placeholder {
    border: 2px solid #333;
  }

  .bus-route {
    border: 2px solid #fff;
  }
}