html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-snap-type: y proximity;
  overflow-y: auto; /* ✅ 내부 스크롤 문제 방지 */
  min-height: 100vh;
  max-width: 100vw;
}
/* 📌 콘텐츠와 겹침 방지 */
body {
  padding-top: 60px; /* 🔥 네비게이션 바 높이만큼 여백 추가 */
}

.home-container {
  display: flex;
  flex-direction: column;
  min-height: auto;
}

.section1 {
  width: 100%;
  height: calc(100vh);
  scroll-snap-align: start;
  scroll-margin-top: 100vh;
  position: relative;
}
.section2 {
  width: 100%;
  height: calc(100vh);
  scroll-snap-align: start;
  scroll-margin-top: 100vh;
  position: relative;
}

/* 📌 네비게이션 바 */
header.home-header {
  background-color: #da1218; /* 상단바 배경 */
  border-bottom: none !important; /* 🔥 보더 완전 제거 */
}

.home-main4-tit-container {
  max-width: 1200px; /* 🔥 부모 요소에서 1200px 제한 */
  margin: 0 auto; /* 🔥 가운데 정렬 */
  padding: 0 20px; /* 🔥 양쪽 여백 추가 (반응형 고려) */
  height: 100px;
}

/* 📌 home-main4 제목 스타일 */
.home-main4-tit {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 🔥 왼쪽 정렬 */
  text-align: left;
  width: 90%;
}

/* 📌 home-main4 제목 크기 */
.home-main4-tit1 {
  font-weight: 700;
  width: 90%;
  max-width: 953px;
  font-size: clamp(1.8rem, 3.5vh, 2.5rem);
  color: #060708;
  margin: 60px 0 30px 0; /* 🔥 위쪽 여백 20px, 아래쪽 여백 40px 추가 */
}

/* 메뉴 링크 */
header.home-header .menu a {
  color: white;
}

header.home-header .menu a:hover {
  color: white;
}

/* 드롭다운 버튼 */
header.home-header .menu-toggle {
  color: white;
}

.home-main1 {
  position: relative;
  height: 430px;
  background: linear-gradient(93.56deg, #060708 0.13%, #22282e 99.65%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  z-index: 2;
  flex-direction: column;
}

.home-main1-ico1,
.home-main1-ico2,
.home-main1-ico3 {
  position: absolute;
  z-index: 1; /* text-overlay보다 낮은 값 */
}

/* 📌 개별 아이콘 위치 조정 */
.home-main1-ico1 {
  top: 15%;
  right: 24%;
}

.home-main1-ico2 {
  top: 5%;
  right: 8%;
}

.home-main1-ico3 {
  bottom: 18%;
  right: 3%;
  transform: translateX(-50%);
}

/* 📌 개별 아이콘 내부 이미지 크기 설정 */
.home-main1-ico1 img {
  width: 9vw;
  max-width: 180px;
  height: auto;
}

.home-main1-ico2 img {
  width: 12vw;
  max-width: 278px;
  height: auto;
  opacity: 0.7;
}

.home-main1-ico3 img {
  width: 7vw;
  max-width: 148px;
  height: auto;
  opacity: 0.7;
}

.align-items {
  position: relative;
  display: flex;
  flex-direction: column; /* 🔥 세로 정렬 유지 */
  align-items: center; /* 🔥 가로 정렬 유지 */
  justify-content: center; /* 🔥 수직 가운데 정렬 추가 */
  width: 100%;
  max-width: 1200px;
  min-height: 430px;
  margin: 0 auto;
}

.text-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  position: relative;
  width: 100%;
  min-height: 430px;
  text-align: center;
}

.home-main1-tit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0;
  gap: 15px;
  width: 90%;

  position: absolute; /* 🔥 부모 기준으로 배치 */
  top: 35%; /* 🔥 부모 요소의 50% 지점 */
  transform: translateY(-50%); /* 🔥 정확한 중앙 배치 */
}

.home-main1-tit1 {
  font-weight: 700;
  font-size: clamp(2rem, 5.2vh, 3rem);
  color: #ffffff;
  margin: 0;
}

.home-main1-tit2 {
  width: 90%;
  max-width: 953px;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.5vh, 2.5rem);
  color: #ffffff;
  margin: 0;
}
/* 📌 home-main2를 main-card의 역할로 변경 */
.home-main2 {
  position: relative; /* 🔥 부모 요소를 relative로 설정 */
  width: 100%;
  max-width: 1500px;
  height: auto;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: visible; /* 🔥 부모 요소를 벗어나지 않도록 */
  z-index: 3; /* 🔥 기본적으로 home-main1 아래 배치 */
}

.main-card {
  position: absolute; /* 🔥 첫 번째 섹션을 침범 */
  top: -100px; /* 🔥 얼마나 침범할지 조절 */
  left: 50%;
  transform: translateX(-50%); /* 🔥 가로 중앙 정렬 */
  width: 90%;
  max-width: 1500px;
  height: auto;
  min-height: 488px;
  background: #ffffff;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 4; /* 🔥 home-main1보다 위에 배치 */
}

/* 📌 home-main2-contents 내부 정렬 */
.home-main2-contents {
  position: relative;
  width: 100%;
  max-width: 1200px;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
  gap: 0;
}

/* 📌 home-main2 제목 스타일 */
.home-main2-tit {
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0;
  width: 100%;
  margin-bottom: 50px;
}

/* 📌 home-main2 제목 크기 */
.home-main2-tit1 {
  font-weight: 700;
  width: 90%;
  max-width: 953px;
  font-size: clamp(1.8rem, 3.5vh, 2.5rem);
  color: #060708;
  margin: 0;
}

.home-boxes {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(200px, 1fr)
  ); /* ✅ 최소 200px, 최대 자동 조정 */
  justify-content: center;
  align-items: center;
  width: calc(100% - 40px);
  max-width: 1200px;
  gap: 15px; /* ✅ 박스 간격 추가 */
  margin: 0 auto;
  box-sizing: border-box;
}

.home-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 0px;
  min-width: 200px;
  max-width: 100%;
  width: 100%;
  height: auto;
}

.home-box img {
  width: 100%;
  max-width: 160px;
  height: auto;
}

.section-reference {
  width: 100%;
  padding: 80px 0; /* 🔥 위아래 여백 추가 */
  margin-top: 0; /* 🔥 3번째 섹션과 겹치지 않도록 간격 조정 */
  text-align: center;
}

.home-main4 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  place-items: center;
  margin-top: 60px;
}

.logo-grid img {
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: 20px;
}
.mobile-section {
  display: none !important;
}
.home-main3 {
  position: relative;
  width: 100%;
  min-height: 100vh; /* 🔥 적절한 높이 설정 */
  background: url("../img/home/home-main3-bg.webp") no-repeat center center;
  background: image-set(url("../img/home/home-main3-bg.webp") type("image/webp"))
    no-repeat center center;
  background-size: cover; /* 🔥 반응형에서 잘리지 않도록 설정 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 📌 home-main3 제목 스타일 */
.home-main3-tit {
  position: absolute;
  top: 8%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0;
  width: 100%;
}

.home-main3-tit1 {
  font-weight: 700;
  width: 90%;
  max-width: 953px;
  font-size: clamp(1.8rem, 3.5vh, 2.5rem);
  color: white;
  margin: 0;
}

/* 📌 home-main3-contents를 flexbox 컨테이너로 설정 */
.home-main3-contents {
  position: relative;
  width: 100%;
  min-height: 100vh; /* 🔥 전체 화면 높이 설정 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 40px 0;
}

/* 📌 부모 요소 flow 스타일 */
.flow {
  position: relative; /* ✅ `.dashed-border`와 `.button-container`의 배치 기준 */
  width: 100%;
  height: auto; /* ✅ 내부 요소 크기에 맞게 자동 조정 */
  min-height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 📌 원형 테두리 */
.dashed-border {
  position: absolute;
  top: 50%; /* ✅ 부모 기준 정중앙 */
  left: 50%;
  transform: translate(-50%, -50%); /* ✅ 수평 & 수직 중앙 정렬 */
  width: 988%;
  max-width: 988px;
  aspect-ratio: 3 / 1;
  opacity: 0.9;
  border: 2px dashed #9ba8b1;
  border-radius: 999px;
  box-sizing: border-box;
  z-index: 1; /* ✅ `.button-group`보다 낮게 설정 */
}

/* 📌 버튼 컨테이너 */
.button-container {
  position: absolute; /* ✅ `.dashed-border`와 동일한 기준으로 배치 */
  top: 50%; /* ✅ `.dashed-border`와 동일한 중앙 정렬 */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1500px;
  height: auto;
  min-height: 800px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  z-index: 2; /* ✅ `.dashed-border`보다 위로 배치 */
}

/* 📌 버튼 그룹 (버튼 + 텍스트) */
.button-group {
  position: absolute; /* ✅ 개별 위치 설정 가능하도록 변경 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 📌 버튼 스타일 */
.circle-button {
  width: 250px;
  height: 100px;
  background: #1f262c;
  border: 3px solid #da2128; /* 바깥쪽 빨간색 테두리 */
  outline: 3px solid white;
  outline-offset: -10px;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: clamp(0.8rem, 1vw, 1.5rem);
  position: relative;
  text-align: center;
}

/* 📌 버튼 텍스트 */
.button-text {
  position: absolute;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.2vw, 1.6rem);
  text-align: center;
  color: #ffffff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* 📌 버튼 그룹 개별 위치 지정 (1시, 3시, 5시, 7시, 9시, 11시 방향) */
.group-candidate-evaluation {
  top: 23%; /* ✅ 1시 방향 */
  right: 25%;
}

.group-leadership-evaluation {
  top: 43%; /* ✅ 3시 방향 */
  right: 10%;
}

.group-succession-planning {
  bottom: 23%; /* ✅ 5시 방향 (50% → 45%) */
  right: 25%;
}

.group-team-development {
  bottom: 23%; /* ✅ 7시 방향 (15% → 10%) */
  left: 25%;
}

.group-recruit {
  bottom: 43%; /* ✅ 9시 방향 (45% → 40%) */
  left: 10%;
}

.group-key-talent {
  top: 23%; /* ✅ 11시 방향 (40% → 35%) */
  left: 25%;
}

/* 📌 화살표 컨테이너 */
.arrow-container {
  position: absolute;
  top: 50%; /* ✅ `.button-container`와 동일한 중앙 정렬 */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1500px;
  height: auto; /* ✅ `.button-container`와 동일한 높이 설정 */
  min-height: 800px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  z-index: 4; /* ✅ `.button-container`보다 높은 값으로 설정 */
}

/* 📌 화살표 개별 스타일 */
.arrow {
  position: absolute;
  width: 24px;
  aspect-ratio: 1 / 1;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><path d="M20.4977 0.477086L0 4.021L12.5775 8.39727L16.9706 20.9916L20.4977 0.477086Z" fill="%23DA2128"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 📌 화살표 위치 (12시, 2시, 4시, 6시, 8시, 10시 방향) */
.arrow-12 {
  top: 28%; /* 🔥 12시 방향 (최상단) */
  left: 50%;
  transform: translateX(-50%) rotate(40deg);
}
.arrow-2 {
  top: 34%; /* 🔥 2시 방향 */
  right: 19%;
  transform: translateX(-50%) rotate(70deg);
}
.arrow-4 {
  bottom: 34%; /* 🔥 4시 방향 */
  right: 19%;
  transform: translateX(-50%) rotate(180deg);
}
.arrow-6 {
  bottom: 28%; /* 🔥 6시 방향 (최하단) */
  left: 50%;
  transform: translateX(-50%) rotate(220deg);
}
.arrow-8 {
  bottom: 34%; /* 🔥 8시 방향 */
  left: 20.5%;
  transform: translateX(-50%) rotate(270deg);
}
.arrow-10 {
  top: 34%; /* 🔥 10시 방향 */
  left: 20.5%;
  transform: translateX(-50%) rotate(0deg);
}