.intro-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    box-sizing: border-box;
    background: #fff;
  }

  .intro-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    gap: 40px;
    flex-wrap: wrap;
  }

  .intro-text {
    flex: 1;
    max-width: 800px;
    font-family: 'Nunito', sans-serif;
    color: #333;
    line-height: 1.6;
    margin-right: 40px;
    text-align: justify;
  }

  .intro-text p {
    font-size: 16px;
    margin-bottom: 0;
    font-weight: bold;
  }

  .intro-title {
    font-size: 28px;
    font-weight: 700;
    color: #31B1B8;
    margin-bottom: 20px;
    line-height: 1.4;
  }

  .intro-text p {
    font-size: 16px;
    white-space: pre-line;
  }

  .intro-image {
    flex: 0 0 auto;
    max-width: 300px;
    text-align: center;
  }

  .intro-image img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

.vision-section {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  box-sizing: border-box;
  background: #fff;
  text-align: center;
  font-family: 'Nunito', sans-serif;
}

.vision-title {
  font-size: 32px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 40px;
}

.vision-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.vision-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 220px;
}

.vision-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  margin-bottom: 15px;
  padding: 10px;
  box-sizing: border-box;
white-space: nowrap;
}

.circle-1 { background: #EEAAB5; }
.circle-2 { background: #0A6ADA; }
.circle-3 { background: #0231A5; }
.circle-4 { background: #31B1B8; }

.vision-detail {
  list-style:none;
  margin: 0 auto;
  padding: 0;
  line-height: 1.5;
  font-size: 13px;
  color: #999;
  width: 100%;
  text-align: center;
  display:grid;
  justify-content: space-around;
  white-space: normal;
}

.vision-detail li {
  flex: 1;
  margin: 50 10px;
}

.team-photo-section {
    width: 100%;
    min-height: 100vh;
    background: #fff;
    text-align: center;
    padding: 60px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .section-title {
    font-size: 32px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 40px;
    font-family: 'Nunito', sans-serif;
  }
  /*팀 사진 크기 */
  .team-photo-container {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
  }

  .team-photo-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

/* 2번, 4번 원 텍스트만 2줄 클램프, 한글로 바꿀거면 이걸 지워도 됨 */
.vision-circle.circle-2 > span,
.vision-circle.circle-4 > span{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* 최대 2줄 */
    line-clamp: 2;
    overflow: hidden;

    /* 기본에 white-space: nowrap; 이 있으면 덮어쓰기 */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;


}

/* === About: 모바일 텍스트 간격 깨짐 방지 === */
@media (max-width: 600px) {
    /* 헤드라인(큰 초록색 문구) */
    .about-hero h1,
    .intro-title,                    /* 네가 쓰는 타이틀 클래스 */
    .about-hero .hero-title {        /* 다른 이름을 써도 함께 커버 */
        text-align: left !important;   /* justify 금지 */
        letter-spacing: 0;
        word-break: keep-all;
        hyphens: auto;
        line-height: 1.3;
        /* 너무 긴 줄 길이 줄여 가독성 ↑ */
        max-width: 20ch;               /* 대략 2줄~3줄로 균형 */
        margin-left: 0;
        margin-right: auto;
        /* 최신 브라우저 줄바꿈 균형(지원 시 자동 적용) */
        text-wrap: balance;
    }

    /* 본문 문단 */
    .intro-text,
    .about-hero p {
        text-align: left !important;   /* justify 금지 */
        word-break: keep-all;
        hyphens: auto;
        letter-spacing: 0;
        line-height: 1.7;
    }
}

/* === Vision: 원(circle) 안 텍스트가 잘리거나 치우치는 문제 수정 === */
@media (max-width: 768px) {
    /* 그리드 정렬을 중앙으로 맞추기 */
    .vision-container {
        grid-template-columns: repeat(2, 1fr);   /* 2열 */
        gap: 24px;
        justify-items: center;                   /* 각 아이템을 그리드 셀 중앙에 */
    }

    .vision-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;                     /* 아이템 내부도 중앙 정렬 */
    }

    .vision-circle {
        width: 140px;                            /* 살짝 작게 */
        height: 140px;
        padding: 12px;                           /* 내부 여백 확보 */
        display: grid;
        place-items: center;                     /* 수직/수평 정중앙 */
        text-align: center;                      /* 텍스트 중앙 정렬 */
        line-height: 1.3;
        /* 영어/혼용 문장 안정 줄바꿈 */
        word-break: normal;                      /* keep-all → normal */
        overflow-wrap: anywhere;                 /* 긴 단어 강제 줄바꿈 허용 */
        white-space: normal;                     /* nowrap 방지(혹시 상위에서 걸렸을 때) */
    }

    /* 원 내부에 span 등 자식이 있을 때도 폭을 제한해 중앙에 모으기 */
    .vision-circle > * {
        max-width: 90%;
    }

    /* 상세 설명도 중앙 정렬 유지 */
    .vision-detail {
        text-align: center;
    }
}

/* 아주 작은 화면에서는 1열로 */
@media (max-width: 420px) {
    .vision-container { grid-template-columns: 1fr; }
    .vision-circle { width: 132px; height: 132px; }
}