:root  {
      --brand-dark: #1e2b58;
      --brand-sub-red: #cf8a8a;
      --brand-sub-green: #78b68a;
  --text-main: #1e293b;
            --text-sub: #64748b;    
    }
    body {
          
            background:#f4f7ff;
			   }
    /* 1. 고정될 배경 이미지 영역 */
    .sticky-bg-container {
      position: sticky;
      top: 0;
      height: 80vh;
      width: 100%;
      z-index: 0; /* 제일 뒤 */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
 
    }
.text-756 { 
color:  var(--text-main);
}

.text-7562{ 
color:  var(--text-sub);
}



    /* 변형될 이미지 래퍼 */
    .hero-image-wrapper {
      width: 60%;  /* 초기 너비 */
      height: 70vh; /* 초기 높이 */
      position: relative;
      overflow: hidden;
      border-radius: 40px; /* 초기 둥근 모서리 */
    
      will-change: width, height, border-radius;
    }

    .hero-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.1); /* 패럴랙스용 스케일 */
      transition: transform 0.1s linear;
    }

    /* 이미지 필터 오버레이 (초기부터 은은하게, 나중에 진해짐) */
    .auto-dim-overlay {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      
      opacity: 1; /* 초기부터 보임 */
      transition: background-color 0.3s ease-out;
      z-index: 2;
    }

    /* 이미지 위 텍스트 (초기부터 보임) */
    .hero-text-layer {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      width: 100%;
      z-index: 3;
      color: white;
      opacity: 1; /* 초기부터 보임 */
      transition: opacity 0.5s;
	  padding: 20px;
    background: var(--brand-sub-green);
	    opacity: .5;
    }

    /* 2. 스크롤 공간 확보용 (투명) */
    .scroll-spacer {
      height: 80vh; /* 이미지가 커지는 동안 스크롤할 거리 */
      width: 100%;
      position: relative;
      z-index: 1;
      pointer-events: none;
    }

    /* 3. 위로 올라오는 콘텐츠 섹션 (투명도 0.15 수정) */
    .sliding-content-section {
      position: relative;
      z-index: 10; /* 이미지보다 위 */
      
      /* [수정] 배경 투명도 0.15로 변경 (거의 투명) */
      background: rgba(255, 255, 255, 0.55); 
      
      backdrop-filter: blur(20px) saturate(180%); /* 블러 강화 */
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      
      border-top: 1px solid rgba(255, 255, 255, 0.2); /* 테두리도 투명하게 */
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
	        border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
      padding-top: 120px;
      padding-bottom: 150px;
      box-shadow: 0 -20px 60px rgba(0,0,0,0.3); /* 그림자 진하게 */
      margin-top: -10vh; /* 살짝 미리 겹치게 */
    }

    /* 텍스트 스타일 유틸 */
    .highlight-blue {
    
      font-weight: 700;
      position: relative;
      display: inline-block;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    .highlight-blue::after {
      content: '';
      position: absolute;
      bottom: 2px; left: 0; width: 100%; height: 8px;
      background: var(--brand-sub-green);
      opacity: 0.6; /* [수정] 가독성 위해 불투명도 증가 */
      z-index: -1;
    }