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


/* 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; }



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



/* 본문 전체 영역 */
.about-main {
    display: flex;
    justify-content: center;
    padding-top: 150px; padding-bottom: 50px; flex: 1; position: relative; z-index: 1;
    background: #fff;
}    


/* 컨테이너 레이아웃 */
.philosophy-wrapper {
    max-width: 1300px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.philosophy-image { flex: 1; }
.philosophy-image img {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    filter: grayscale(100%); /* 흑백 필터 */
}

.philosophy-content { flex: 1.2; text-align: left; }
.philosophy-content .category {
    font-size: 13px; font-weight: 800; color: #bbb;
    letter-spacing: 0.2em; margin-bottom: 15px; display: block;
}

/* 타이틀 스타일: 강조되지 않은 글자는 연하게 처리 */
.philosophy-content .title {
    font-size: 52px; line-height: 1.2; font-weight: 800;
    color: rgba(0, 0, 0, 0.15); 
    margin-bottom: 30px;
}

/* V, I, A 강조색 (진한 녹색) */
.philosophy-content .highlight { color: #0a4a44; }

.philosophy-content .description { max-width: 700px; }
.philosophy-content .description p {
    font-size: 15px; line-height: 1.8; color: #666;
    margin-bottom: 20px; word-break: keep-all;
}


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


@media (max-width: 1024px) {
    .about-main {
        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;
    }


    .philosophy-wrapper { 
        flex-direction: column; 
        gap: 20px; 
    }
    .philosophy-image, .philosophy-content {
        flex: none;
        width: 100%;
    }
    .philosophy-content {
        text-align: center;
        display: flex;

        flex-direction: column;
        align-items: center;
    }
    .philosophy-content .title { 
        font-size: 32px; 
        margin-bottom: 20px;
    }
    .philosophy-content .description {
        max-width: 100%;
    }
    .philosophy-content .description p { 
        font-size: 14px; 
        line-height: 1.6;
    }
}