/* ======================================== */
         /* ======== 공통 레이아웃 시작 부분==========  */
         /* ======================================== */


/* 1. 여기에 추가: 스크롤바가 생겨도 화면이 밀리지 않게 공간 확보 */
html { scrollbar-gutter: stable; }

/* 2. 기본 배경은 흰색으로 설정 (세로 스크롤 허용) */
body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; background: #fff; overflow-y: auto; }

/* 3. 헤더 프레임: 메뉴 드롭다운과 모바일 사이드바를 위해 높이 확보 */
 .header-frame { width: 100%; 
         height: 100px; /* 기본 높이 */
         border: none; position: fixed; top: 0; left: 0; z-index: 1000; 
         transition: height 0.3s ease; /* 부드러운 높이 변화 */
         pointer-events: auto; /* 마우스 이벤트 허용 */
         }

/* 4. 마우스를 올리면 드롭다운 메뉴가 보일만큼 높이를 늘림 */
.header-frame:hover { height: 400vh; }

/* 5. 푸터 프레임: 하단 흰 줄 제거 및 밀착 */
.footer-frame { 
    width: 100%; height: 80px; border: none; 
    display: block; vertical-align: top; background: #1a1a1a; }



         /* ======================================== */
         /* ======== 본문 수정부분 작성 위치 시작 부분==========  */
         /* ======================================== */

/* 1. 메인 섹션 */
.main-section { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    color: #fff; 
    padding-top: 150px; padding-bottom: 50px; flex: 1; position: relative; z-index: 1;
    background: #0a4a44;
}



.main-section h2 { font-size: clamp(32px, 5vw, 64px); font-weight: 800; margin-bottom: 20px; }
.main-section p { font-size: clamp(14px, 2vw, 20px); opacity: 0.9; }


         /* ======================================== */
         /* ======== 반응형 대응 시작 부분==========  */
         /* ======================================== */

@media (max-width: 1024px) {
    .main-section {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 90px 20px 10px 20px !important; 
        margin: 0 !important;
        box-sizing: border-box !important;
        gap: 5px !important;
    }
}