/* ==========================================
   [NEW SYSTEM] 가이드 표준 마스터 레이아웃
   ========================================== */

/* 1. 섹션 기본 규격 (Bootstrap의 Section 역할) */
.new-guide-section {
  width: 100%;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* 섹션 자체는 항상 중앙 정렬 */
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* 2. 표준 내부 컨테이너 (Bootstrap의 Container 역할) */
.new-guide-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px; /* 가이드 최적 가독성 너비 */
  margin: 0 auto;
  padding: 0 20px;
  gap: 40px; /* ✅ 핵심: 모든 요소 사이의 간격을 40px로 자동 고정 */
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

/* 3. 정렬 시스템 (Align Control) */
/* 기본은 중앙 정렬, .new-is-main 클래스가 붙으면 왼쪽 정렬 */
.new-guide-container {
  align-items: center;
  text-align: center;
}

.new-is-main .new-guide-container {
  align-items: flex-start;
  text-align: left;
}

/* 4. 미디어(이미지/비디오) 정렬 규격 */
/* 텍스트가 왼쪽 정렬인 메인 섹션에서도 미디어는 항상 '중앙'에 위치 */
.new-guide-media,
.new-guide-figure,
.new-guide-video-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center !important; /* 부모 정렬 무시하고 중앙으로 */
  width: 100%;
}

/* 5. 개별 자산 사이즈 (Assets Size) */
.new-guide-media img {
  display: block;
  height: auto;
}
.new-img-single {
  width: 300px;
} /* 기본 스텝 이미지 */
.new-is-main .new-img-single {
  width: 350px;
} /* 메인 비주얼 전용 */

/* 비즈니스 가이드용 이미지 2개 조합 */
.new-guide-figure {
  gap: 10px;
}
.new-guide-figure img {
  width: 200px;
}

/* 6. 비디오 목업 시스템 */
.new-guide-video-wrap {
  gap: 10px;
}
.new-guide-video {
  position: relative;
  display: flex;
  justify-content: center;
}
.new-guide-video video {
  position: absolute;
  border-radius: 16px;
  z-index: 1;
  width: 200px;
  top: 0; /* Step 2 기준 기본 */
}
.new-guide-video img {
  position: relative;
  z-index: 2;
  height: 448px;
  pointer-events: none;
}

/* 4단계/5단계 큰 비디오 대응 */
[id*="Fourth"] .new-guide-video video,
[id*="Fifth"] .new-guide-video video {
  width: 268px;
  top: 15px;
}
[id*="Fourth"] .new-guide-video img,
[id*="Fifth"] .new-guide-video img {
  width: 300px;
  height: auto;
}

/* 7. 타이포그래피 (Typography) */
.new-guide-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.new-guide-top h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin: 0;
}
.new-guide-top h3 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.7px;
  margin: 0;
}
.new-guide-top p {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.35px;
  margin: 0;
}

/* 메인 전용 타이틀 크기 조정 */
.new-is-main .new-guide-top h2,
.new-is-main .new-guide-top h3 {
  font-size: 40px;
  letter-spacing: -0.8px;
}

/* 8. 팁 & 파이널 컴포넌트 */
.new-guide-tip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #e60000;
  align-items: center;
}
.new-guide-tip h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.new-guide-final-actions {
  display: flex;
  flex-direction: column;
  gap: 40px; /* 버튼과 카피라이트 사이 간격 */
  align-items: center;
  width: 100%;
}
.new-guide-final-actions img {
  height: 60px;
}

/* ==========================================
   [UTILITY] 테마 및 컬러 유틸리티
   ========================================== */
.bg-white {
  background: #fdfeff;
}
.bg-gray {
  background: #f7f8fa;
}
.bg-gradient {
  background: linear-gradient(180deg, #fdfeff 0%, #f7f8fa 100%);
}
.bg-gradient-rev {
  background: linear-gradient(180deg, #f7f8fa 0%, #fdfeff 100%);
}

/* 포인트 컬러 */
.text-red-h3 h3 {
  color: #e60000;
}
.text-red-h2 h2 {
  color: #e60000;
}

/* 메인 섹션 배경 이미지 전용 */
.new-guide-main-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: 580px;
  align-self: flex-end;
  background: url(../img/BizGuideMainBg.png) center / cover no-repeat;
}

.new-guide-download-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.new-guide-copyright {
  color: #999 !important;
  font-size: 16px !important;
  letter-spacing: -0.25px !important;
}

.new-is-final .new-guide-top h3 {
  font-size: 20px !important;
  font-weight: 500; /* 본문과 같은 두께 */
  line-height: 1.6; /* 줄바꿈이 많으므로 행간을 조금 더 넓게 */
  letter-spacing: -0.35px;
}

/* 만약 h3 내부의 <br> 간격을 조절하고 싶다면 */
.new-is-final .new-guide-top h3 br {
  content: "";
  display: block;
  margin-bottom: 10px; /* <br><br> 처리된 부분의 미세 조정 */
}

.new-guide-sub-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 왼쪽 정렬일 때는 왼쪽으로, 중앙 정렬일 때는 중앙으로 */
.new-is-main .new-guide-sub-wrap {
  justify-content: flex-start;
}

/* SVG 크기 고정 */
.new-guide-sub-wrap svg {
  width: 34px;
  height: 27px;
  flex-shrink: 0;
}

/* Final 섹션 문구 20px 조정 (위에 언급한 내용 포함) */
.new-is-final .new-guide-top h3 {
  font-size: 20px !important;
  font-weight: 500;
  line-height: 1.6;
}