/* === hero.css: Hero Section, Main Banner, Visual Area === */

.hero {
  background: url("/img/main_b-01.webp") no-repeat center center;
  background-size: contain;
  min-height: 500px;
  height: auto;
  display: flex;
  align-items: center;
  padding: 50px 0;
  position: relative;
  background-color: #3617ce;
  width: 100vw; /* 전체 너비 */
  margin-left: calc(50% - 50vw); /* 좌우 여백 제거 */
  margin-right: calc(50% - 50vw);
}

.hero-content-container {
  max-width: 700px;
  margin: 0 0 0 3%;
  padding: 40px;
  text-align: left;
}

.hero-content {
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* 히어로 섹션의 content-link는 하얀색으로 */
.hero .content-link {
  color: white !important;
  border-bottom: 1px dotted white !important;
  word-break: keep-all; /* 한글 단어 단위로 줄바꿈 */
  white-space: nowrap; /* 한 줄로 유지 */
}

.hero .content-link:hover {
  color: #f0f0f0 !important;
  border-bottom-style: solid !important;
}

.hero .button {
  border: 2px solid white;
}

.hero .button:hover {
  border: 2px solid white;
}

/* 데스크톱 전용 - Hero 섹션 박스 크기 고정 및 텍스트 정렬 개선 */
@media (min-width: 769px) {
  .hero {
    min-height: 500px !important;
    max-height: 500px !important; /* 박스 높이 고정 */
    height: 500px !important;
  }

  .hero-content-container {
    max-width: 700px !important;
    min-height: 300px !important; /* 컨테이너 최소 높이 설정 */
    display: flex !important;
    align-items: center !important; /* 세로 중앙 정렬 */
    padding: 40px !important;
  }

  .hero-content {
    width: 100% !important;
  }

  .hero h1 {
    font-size: 2.8rem !important; /* 폰트 크기 약간 축소 */
    line-height: 1.2 !important; /* 줄간격 조정 */
    margin-bottom: 1rem !important;
    word-break: keep-all !important; /* 한글 단어 단위 줄바꿈 */
    white-space: normal !important; /* 자연스러운 줄바꿈 허용 */
    overflow-wrap: break-word !important; /* 긴 단어 적절히 줄바꿈 */
    max-width: 600px !important; /* 텍스트 영역 최대 너비 제한 */
  }

  .hero p {
    font-size: 1.1rem !important; /* 폰트 크기 약간 축소 */
    line-height: 1.4 !important;
    margin-bottom: 2rem !important;
    word-break: keep-all !important;
    max-width: 500px !important; /* 텍스트 영역 최대 너비 제한 */
  }

  /* 특정 지역명이 긴 경우 더 작은 폰트 적용 */
  .hero h1:has-text("공식 인증 대리점"),
  .hero h1[data-long-text="true"] {
    font-size: 2.4rem !important;
    line-height: 1.3 !important;
  }
}

/* 대안: CSS 클래스를 추가하여 긴 지역명에 적용하는 방법 */
@media (min-width: 769px) {
  .hero.long-region-name h1 {
    font-size: 2.4rem !important;
    line-height: 1.3 !important;
    max-width: 550px !important;
  }

  .hero.long-region-name p {
    font-size: 1.05rem !important;
    max-width: 450px !important;
  }
}

/* 모바일에서 히어로 섹션 텍스트 줄바꿈 개선 */
@media (max-width: 768px) {
  .hero {
    background: url("/img/main_b_m-001.webp") no-repeat center center;
    background-size: cover;
    min-height: 400px;
    max-height: 500px;
    padding-top: 80px;
    margin-top: 60px;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow-x: hidden;
  }

  .hero .content-link {
    white-space: normal; /* 모바일에서는 줄바꿈 허용 */
    word-break: keep-all;
    line-height: 1.4;
    display: inline-block;
  }

  .hero p {
    word-break: keep-all;
    line-height: 1.4;
  }

  .hero-content {
    padding: 20px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }
}

/* 모바일 강제 적용 */
@media screen and (max-width: 768px) {
  .hero {
    margin-top: 70px !important;
    min-height: 300px !important;
    max-height: 400px !important;
    padding: 20px 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .hero-content-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 15px !important;
    text-align: left !important;
  }

  .hero h1 {
    font-size: 1.3rem !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
  }

  .hero p {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
  }

  .hero .button {
    font-size: 0.9rem !important;
    padding: 10px 20px !important;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.7rem;
  }

  .hero p {
    font-size: 0.9rem;
  }

  .hero-content {
    padding: 15px;
  }
}

@media screen and (max-width: 480px) {
  .hero h1 {
    font-size: 1.1rem !important;
  }

  .hero p {
    font-size: 0.8rem !important;
  }
}

/* 320px 이하 히어로 최적화 */
@media (max-width: 320px) {
  .hero {
    margin-top: 50px !important;
    min-height: 300px !important;
    padding: 20px 0 !important;
  }

  .hero-content-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
  }

  .hero h1 {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
    word-break: keep-all !important;
  }

  .hero p {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    word-break: keep-all !important;
  }

  .hero .button {
    font-size: 0.7rem !important;
    padding: 6px 12px !important;
  }

  .hero,
  .section,
  .region-hub,
  .main-cta,
  footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* 280px 이하 히어로 */
@media (max-width: 280px) {
  .hero h1 {
    font-size: 0.8rem !important;
  }

  .hero p {
    font-size: 0.6rem !important;
  }
}