/* 기본 Body 스타일 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif; /* 한국어 폰트 'Noto Sans KR' 사용 */
    color: #333;
    background-color: #f5f5f5; /* 전체 배경색 설정 */
}

/* 헤더 (메인 인트로) 스타일 - 영상 위에 텍스트 */
.main-intro {
    position: relative;
    width: 100vw;
    height: 100vh; /* 뷰포트 높이 100%로 설정 */
    display: flex; /* Flexbox 활성화 */
    align-items: center; /* 자식 요소 수직 중앙 정렬 */
    justify-content: flex-start; /* 자식 요소 왼쪽 정렬 */
    color: #fff;
    overflow: hidden; /* 내용이 넘칠 경우 숨김 */
}

.background-video {
    position: absolute; /* 부모 .main-intro 기준 절대 위치 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 컨테이너를 채우되 비율 유지 */
    z-index: -1; /* 다른 콘텐츠 뒤에 배치 */
}

.intro-text {
    position: relative; /* z-index를 위해 상대 위치 설정 */
    z-index: 1; /* 비디오 위에 표시 */
    padding: 20px;
    text-align: left; /* 텍스트 정렬은 그대로 left로 유지 */
    margin-left: 5vw; /* 오른쪽으로 조금 이동 (원하는 만큼 조절) */
    margin-top: 320px; /* 기존에 추가한 margin-top 유지 또는 조정 */
    max-width: 500px; /* 헤더 텍스트 영역의 최대 너비 */
}

.main-intro .intro-text p.mission {
    margin-top: -20px; /* 원하는 만큼 음수 값으로 조절 */
}

/* --- 각 섹션에 공통적으로 적용될 전체 화면 섹션 스타일 --- */
.full-screen-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    display: flex; /* 내부 grid-content-wrapper를 중앙에 배치하기 위함 */
    align-items: center;
    justify-content: center;

    /* 배경 이미지 공통 설정 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
}

/* --- 그리드 아이템들을 감싸는 래퍼 스타일 (콘텐츠 영역) --- */
.grid-content-wrapper {
    display: grid;
    gap: 20px;
    padding: 40px;
    max-width: 2000px;
    width: 90%;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0);
}

/* --- 모든 그리드 아이템에 공통적으로 적용될 최소한의 스타일 --- */
.grid-item {
    background-color: rgba(255, 255, 255, 0); /* 완전 투명 배경 */
    border: none; /* 테두리 없음 */
    padding: 20px; /* 기본 내부 패딩 */
    border-radius: 5px;
    min-height: 120px; /* 그리드 아이템의 최소 높이 */
    box-shadow: 0 1px 3px rgba(0,0,0,0); /* 아이템별 그림자 (유지) */

	/* 중요: 내용이 고정된 박스 크기를 넘칠 경우 처리 */
    /*overflow: auto; /* 스크롤바를 추가하여 내용을 모두 볼 수 있게 합니다. */*/

    /* 핵심 변경: 텍스트 정렬, 플렉스 박스 정렬 관련 속성들을 제거 */
    /* display, flex-direction, justify-content, align-items 속성들을 제거합니다.
       각 아이템별로 이 속성들을 필요에 따라 재정의해야 합니다. */
    /* text-align: center; */
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: flex-start; */
}

/* ========================================= */
/* --- 각 섹션별 개별 스타일 (배경 이미지 및 그리드 구성) --- */
/* ========================================= */

/* 섹션 자체에 배경 이미지 적용 (투명도 100%) */
.section-1 { background-image: url('../web_images/img01.jpg'); background-color: rgba(240, 244, 195, 1); }
.section-2 { background-image: url('../web_images/img02.jpg'); background-color: rgba(255, 224, 178, 1); }
.section-3 { background-image: url('../web_images/img03.jpg'); background-color: rgba(187, 222, 251, 1); }
.section-4 { background-image: url('../web_images/img04.jpg'); background-color: rgba(255, 205, 210, 1); }
.section-5 { background-image: url('../web_images/img05.jpg'); background-color: rgba(224, 242, 247, 1); }
.section-6 { background-image: url('../web_images/img06.jpg'); background-color: rgba(248, 187, 208, 1); }
.section-7 { background-image: url('../web_images/img07.jpg'); background-color: rgba(200, 230, 201, 1); }
.section-8 { background-image: url('../web_images/img08.jpg'); background-color: rgba(237, 231, 246, 1); }
.section-9 { background-image: url('../web_images/img09.jpg'); background-color: rgba(255, 249, 196, 1); }
.section-10 { background-image: url('../web_images/img10.jpg'); background-color: rgba(209, 196, 233, 1); }


/* 각 grid-content-wrapper 별 그리드 구성 */
/* 1, 2, 3, 4,섹션: 2행 그리드 (각 아이템이 한 행 차지) */
.section-1 .grid-content-wrapper,
.section-2 .grid-content-wrapper,
.section-3 .grid-content-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
}
.section-4 .grid-content-wrapper {
 /* 기존: grid-template-columns: 1fr; */
    /* 기존: grid-template-rows: repeat(2, auto); */

    /* 수정: 너비와 높이를 픽셀(px) 단위로 고정합니다. */
    /* 첫 번째 열의 너비를 600px로 고정. 만약 2열이면 300px 300px 처럼 지정. */
    grid-template-columns: 1520px;

    /* 두 행의 높이를 각각 250px로 고정 (총 2행이므로 repeat(2, 250px)) */
    grid-template-rows: repeat(2, 250px);

    /* 만약 아이템이 더 늘어날 경우를 대비하여 자동으로 높이를 설정할 수 있습니다. */
    /* grid-auto-rows: 250px; */ /* 새로운 행이 추가되면 250px 높이 적용 */
}

/* 5, 6, 7, 9번 섹션: 2행 2열 그리드 */
.grid-content-wrapper.grid-2x2 {
    grid-template-columns: 1fr 1fr;
/*    grid-template-rows: repeat(2, auto);*/
/* 두 행의 높이를 각각 250px로 고정 (총 2행이므로 repeat(2, 250px)) */
    grid-template-rows: repeat(2, 250px);

}

/* 8번 섹션: 3열 3행 그리드 */
.grid-content-wrapper.grid-3x3 {
    /* 수정: 8번 섹션 그리드 컨테이너의 너비를 80%로 줄이고 가운데 정렬합니다. */
    width: 80%; /* <--- 8번 섹션 그리드 폭을 20% 줄입니다. */
    margin: 0 auto; /* <--- 8번 섹션 그리드를 가운데 정렬합니다. */

    /* 그리드 아이템의 열 너비는 80%로 줄어든 컨테이너에 맞춰 유연하게 조절되도록 1fr 1fr 1fr로 변경합니다. */
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(3, 150px); /* 높이 설정은 그대로 유지하거나 필요시 조절 */
    gap: 20px; /* 아이템 간 간격은 그대로 유지 */
}
/* 10번 섹션: 3행 그리드 (각 아이템이 한 행 차지) */
.section-10 .grid-content-wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
}


/* ========================================= */
/* --- 각 그리드 아이템별 개별 스타일 설정 영역 --- */
/* 이제 모든 그리드 아이템의 h3와 p, 그리고 아이템 자체의 정렬까지 이곳에서 완전히 제어합니다. */
/* ========================================= */

/* 섹션 1 - item-1-1 */
.section-1 .item-1-1 {
    display: flex; /* 이 아이템을 flex 컨테이너로 만듭니다. */
    flex-direction: column; /* 세로 정렬 */
    justify-content: center; /* 수직 중앙 정렬 (필요시 변경) */
    align-items: center; /* 수평 왼쪽 정렬 (필요시 변경) */
    padding: 25px;
}
.section-1 .item-1-1 h3 {
    color: #fff;
    font-size: 2.5em;
    margin-top: 0;
    margin-bottom: -150px;
    text-align: center; /* h3 자체의 텍스트 정렬 */
}
.section-1 .item-1-1 p {
/* p 자체의 텍스트 정렬 */
}

/* 섹션 1 - item-1-2 */
.section-1 .item-1-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* 이 아이템은 중앙 정렬 */
}
.section-1 .item-1-2 h3 {
    color: #fff;
    font-size: 0.8em;
    margin-top: 0;
    margin-bottom: 5px;
    text-align: center;
}
.section-1 .item-1-2 p {
    color: #fff;
    font-size: 0.8em;
    margin-top: 0;
    margin-bottom: 5px;
    text-align: center;

}

/* 섹션 2 - item-2-1============================================= */
.section-2 .item-2-1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.section-2 .item-2-1 h3 {
    color: #FFf;
    font-size: 2.3em;
    text-align: center;
    margin-bottom: -50px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */
                        /* 0px으로 하면 완전히 붙고, 음수 값으로 하면 겹치게 할 수도 있습니다. */

}
.section-2 .item-2-1 p {  
}

/* 섹션 2 - item-2-2 */
.section-2 .item-2-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* 이 아이템은 오른쪽 정렬 */
    font-size: 1.05em;
}
.section-2 .item-2-2 h3 {
    color: #fff;
    font-size: 1.4em;
    margin-bottom: 15px;
    text-align: center;
}
.section-2 .item-2-2 p {
    color: #fff;
    line-height: 1.5;
    text-align: center;
}


/* 섹션 3의 특정 아이템 스타일 (이후 모든 섹션의 아이템들에 대해 아래처럼 개별적으로 정의) */
.section-3 .item-3-1 {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.section-3 .item-3-1 h3 { color: #fff; font-size: 2.0em; text-align: center; 
    margin-bottom: -50px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */
                        /* 0px으로 하면 완전히 붙고, 음수 값으로 하면 겹치게 할 수도 있습니다. */

}
.section-3 .item-3-1 p { color: #42A5F5; font-size: 0.9em; text-align: left; }

.section-3 .item-3-2 {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.section-3 .item-3-2 h3 { color: #3F51B5; font-size: 1.4em; text-align: center; }
.section-3 .item-3-2 p { color: #fff; font-size: 1.2em; text-align: center; }

/* 섹션 4의 특정 아이템 스타일 ========================================*/
.section-4 .item-4-1 {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.section-4 .item-4-1 h3 { color: #fff; font-size: 3.5em; text-align: center; 
    margin-bottom: -50px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */
                        /* 0px으로 하면 완전히 붙고, 음수 값으로 하면 겹치게 할 수도 있습니다. */

}
.section-4 .item-4-1 p { color: #EF5350; font-size: 0.9em; text-align: left; }

.section-4 .item-4-2 {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.section-4 .item-4-2 h3 { color: #C2185B; font-size: 1.2em; text-align: center; 

}
.section-4 .item-4-2 p { color: #fff; font-size: 1.4em; text-align: center; }

/* 섹션 5의 특정 아이템 스타일======================================= */
.section-5 .item-5-1 {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
}
.section-5 .item-5-1 h3 { color: #fff; font-size: 6.5em; text-align: left; 
    margin-bottom: -70px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */
                        /* 0px으로 하면 완전히 붙고, 음수 값으로 하면 겹치게 할 수도 있습니다. */
}
.section-5 .item-5-1 p { color: #4DD0E1; font-size: 0.9em; text-align: left; }

.section-5 .item-5-2 {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
}
.section-5 .item-5-2 h3 { color: #fff; font-size: 1.4em; text-align: left; 
    margin-bottom: -40px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */
                        /* 0px으로 하면 완전히 붙고, 음수 값으로 하면 겹치게 할 수도 있습니다. */
}
.section-5 .item-5-2 p { color: #80DEEA; font-size: 0.95em; text-align: center; }

.section-5 .item-5-3 {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
.section-5 .item-5-3 h3 { color: #fff; font-size: 0.6em; margin-bottom: 20px; text-align: center; }
.section-5 .item-5-3 p { color: #fff; font-size: 0.8em; line-height: 1.8; text-align: left; 
    margin-left: 20%; /* 그리드 아이템 너비의 20%만큼 왼쪽에서 띄웁니다. */

}

.section-5 .item-5-4 {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
.section-5 .item-5-4 h3 { color: #0288D1; font-size: 1.3em; text-align: right; }
.section-5 .item-5-4 p { color: #fff; font-size: 0.8em; text-align: left; 

}


/* 섹션 6의 특정 아이템 스타일 =======================================*/
.section-6 .item-6-1 {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
}
.section-6 .item-6-1 h3 { color: #fff; font-size: 5.5em; text-align: left; 
    margin-bottom: -70px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */
                        /* 0px으로 하면 완전히 붙고, 음수 값으로 하면 겹치게 할 수도 있습니다. */
}
.section-6 .item-6-1 p { color: #F06292; font-size: 0.9em; text-align: left; }

.section-6 .item-6-2 {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
}
.section-6 .item-6-2 h3 { color: #fff; font-size: 2.4em; text-align: left; 
    margin-bottom: -50px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */
                        /* 0px으로 하면 완전히 붙고, 음수 값으로 하면 겹치게 할 수도 있습니다. */

}
.section-6 .item-6-2 p { color: #EC407A; font-size: 0.95em; text-align: center; }

.section-6 .item-6-3 {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
.section-6 .item-6-3 h3 { color: #D81B60; font-size: 1.3em; text-align: left; 
    margin-top: 0; /* <--- p 태그의 기본 margin-top을 0으로 초기화하면 더 확실하게 조절됩니다. */
    margin-bottom: -20px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */

}
.section-6 .item-6-3 p { color: #fff; font-size: 0.9em; text-align: left; }

.section-6 .item-6-4 {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
.section-6 .item-6-4 h3 { color: #E91E63; font-size: 1.25em; text-align: right; }
.section-6 .item-6-4 p { color: #fff; font-size: 0.85em; text-align: left; 
    margin-top: 0; /* <--- p 태그의 기본 margin-top을 0으로 초기화하면 더 확실하게 조절됩니다. */
    margin-bottom: -50px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */

}


/* 섹션 7의 특정 아이템 스타일========================================== */
.section-7 .item-7-1 {
    display: flex; flex-direction: column; justify-content:flex-end; align-items: flex-start;
}
.section-7 .item-7-1 h3 {
    color: #000;
    font-size: 3.3em;
    text-align: left;
    margin-bottom: -15px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */
                        /* 0px으로 하면 완전히 붙고, 음수 값으로 하면 겹치게 할 수도 있습니다. */
}
.section-7 .item-7-1 p {
    color: #000;
    font-size: 2.4em;
    text-align: left;
    margin-top: 0; /* <--- p 태그의 기본 margin-top을 0으로 초기화하면 더 확실하게 조절됩니다. */
    margin-bottom: -20px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */

}

.section-7 .item-7-2 {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
}
.section-7 .item-7-2 h3 { color: #000; font-size: 1.4em; text-align: center; }
.section-7 .item-7-2 p { color: #000; font-size: 0.9em; text-align: left; 
    margin-top: 0; /* <--- p 태그의 기본 margin-top을 0으로 초기화하면 더 확실하게 조절됩니다. */
    margin-bottom: -20px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */

}

.section-7 .item-7-3 {
    display: flex; flex-direction: column; justify-content: flex-start; align-items:flex-start;
}
.section-7 .item-7-3 h3 { 
	color: #000;
	font-size: 0.8em; 
	text-align: left; 
	margin-top: 0; /* <--- h3의 상단 마진을 0으로 초기화 */
	margin-bottom: 0; /* <--- h3의 하단 마진을 0으로 초기화하거나 원하는 만큼 아주 작은 값으로 조절 */
}
.section-7 .item-7-3 p { color: #000; font-size: 0.85em; text-align: right;     margin-top: 0;
 }

.section-7 .item-7-4 {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
.section-7 .item-7-4 h3 { color: #689F38; font-size: 1.25em; text-align: right; 
margin-bottom: 50px;
order: 2;/* <--- h3의 순서를 2로 설정 */
}
.section-7 .item-7-4 p { color: #000; font-size: 0.85em; text-align: left; 
	margin-top: 0; /* <--- h3의 상단 마진을 0으로 초기화 */
	margin-bottom: 0; /* <--- h3의 하단 마진을 0으로 초기화하거나 원하는 만큼 아주 작은 값으로 조절 */
    order: 1; /* <--- p의 순서를 1로 설정 (더 낮은 숫자가 먼저 배치) */
}


/* 섹션 8의 다른 아이템들 (예시 - 필요에 따라 복사하여 사용) */
.section-8 .item-8-1 { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.section-8 .item-8-1 h3 { color: #000; font-size: 2.1em; text-align: left; 
margin-bottom: -100px;
}
.section-8 .item-8-1 p { color: #9575CD; font-size: 0.8em; text-align: left; }

.section-8 .item-8-2 { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.section-8 .item-8-2 h3 { color: #000; font-size: 1.15em; text-align: center; 
    margin-bottom: -10px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */
                        /* 0px으로 하면 완전히 붙고, 음수 값으로 하면 겹치게 할 수도 있습니다. */

}
.section-8 .item-8-2 p { color: #B39DDB; font-size: 0.85em; text-align: center; 
    margin-top: 0; /* <--- p 태그의 기본 margin-top을 0으로 초기화하면 더 확실하게 조절됩니다. */
    margin-bottom: -20px; /* <--- 이 값을 조절하여 p 태그와 간격을 가깝게 합니다. */
}

.section-8 .item-8-3 { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.section-8 .item-8-3 h3 { color: #480080; font-size: 1.2em; text-align: right; }
.section-8 .item-8-3 p { color: #7B1FA2; font-size: 0.9em; text-align: right; }
/* 나머지 item-8-X 에 대해서도 필요에 따라 개별 스타일 추가 가능 */
.section-8 .item-8-4 { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.section-8 .item-8-4 h3 { color: #000; font-size: 1.2em; text-align: left; }
.section-8 .item-8-4 p { color: #7B1FA2; font-size: 0.9em; text-align: right; }

/* 섹션 8의 중앙 아이템 (5번째) 스타일============================================ */
.section-8 .item-8-5 { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.section-8 .item-8-5 h3 { color: #000; font-size: 0.8em; text-align: left; }
.section-8 .item-8-5 p { color: #000; font-size: 0.9em; text-align: right; }

.section-8 .item-8-6 { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.section-8 .item-8-6 h3 { color: #000; font-size: 1.2em; text-align: center; }
.section-8 .item-8-6 p { color: #000; font-size: 0.9em; text-align: center; }

.section-8 .item-8-7 { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; 
    position: relative; /* <--- 중요: h3가 이 요소를 기준으로 절대 위치를 잡게 합니다. */

}
.section-8 .item-8-7 h3 { color: #000; font-size: 0.8em; text-align: left; 
position: absolute; /* <--- 중요: 요소를 문서 흐름에서 제외하고 절대 위치를 잡게 합니다. */
    top: -60px; /* <--- h3를 그리드 아이템 상단에서 -30px 위로 올립니다. 원하는 만큼 조절하세요. */
                /* 예를 들어, -50px, -100px 등으로 더 많이 올릴 수 있습니다. */
    left: 5;    /* h3를 그리드 아이템의 왼쪽 끝에 맞춥니다. */
    /* 기본 margin 값은 position: absolute; 적용 시 대부분 무시되지만, 명확히 0으로 설정할 수 있습니다. */
    margin: 0;
    width: 100%; /* h3가 그리드 아이템 너비를 유지하도록 합니다. */
}
.section-8 .item-8-7 p { color: #7B1FA2; font-size: 0.9em; text-align: right; 
/* h3가 absolute로 빠지면서 p가 위로 올라올 수 있으므로, 필요에 따라 p의 margin-top을 조정하여 위치를 잡습니다. */
    margin-top: 20px; /* <--- h3가 사라진 자리를 채우고 싶다면 p에 margin-top을 주세요. */
}

.section-8 .item-8-8 { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.section-8 .item-8-8 h3 { color: #480080; font-size: 1.2em; text-align: right; }
.section-8 .item-8-8 p { color: #7B1FA2; font-size: 0.9em; text-align: right; }

.section-8 .item-8-9 { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-end; 
    padding-top: 0; /* <--- 이 아이템의 상단 패딩을 0으로 설정하여 내용을 더 위로 올립니다. */
                    /* 필요하다면 5px, 10px 등 더 작은 값으로 조절해 보세요. */

}
.section-8 .item-8-9 h3 { color: #000; font-size: 0.8em; text-align: left; 
    margin-top: 0; /* <--- h3의 상단 마진을 0으로 설정합니다. */

}
.section-8 .item-8-9 p { color: #000; font-size: 0.9em; text-align: right;
    margin-top: 0; /* <--- p의 상단 마진을 0으로 설정합니다. */

 }



/* 섹션 9의 특정 아이템 스타일================================== */
.section-9 .item-9-1 {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.section-9 .item-9-1 h3 { 
color: #000; 
font-size: 3.5em; 
text-align: center; 
margin-bottom: -70px;
}

.section-9 .item-9-2 {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.section-9 .item-9-2 h3 { color: #000; font-size: 1.5em; text-align: left;margin-bottom: -10px;
 }
.section-9 .item-9-2 p { color: #000; font-size: 0.7em; text-align: left; 
}

.section-9 .item-9-4 {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
.section-9 .item-9-4 h3 { color: #000; font-size: 1.5em; text-align: left;margin-bottom: -10px
margin-top: 0;    /* <--- h3의 상단 마진을 0으로 설정합니다. */
    margin-bottom: 5px; /* h3와 p 사이 간격 조절은 유지 */
}
.section-9 .item-9-4 p { color: #000; font-size: 0.7em; text-align: left; 
margin-top: 0;    /* <--- p의 상단 마진을 0으로 설정합니다. */
    margin-bottom: 0; /* 필요하다면 p의 하단 마진도 0으로 설정합니다. */
}


/* 섹션 10의 특정 아이템 스타일=============================== */
.section-10 .item-10-1 {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 30px;
}
.section-10 .item-10-1 h3 {
    color: #fff;
    font-size: 2.5em;
    margin-bottom: 10px;
    text-align: center;
}

.section-10 .item-10-2 {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.section-10 .item-10-2 h3 { 
	color: #fff; 
	font-size: 1.3em; 
	text-align: center; 
}

.section-10 .item-10-3 {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.section-10 .item-10-3 p { 
color: #fff; 
font-size: 1.4em; 
text-align: center;
}

/* ========================================= */
/* --- 링크(a 태그) 기본 스타일 재정의 --- */
/* ========================================= */
a {
    color: inherit; /* <--- 부모 요소의 글씨 색상을 상속받게 합니다. */
                    /* 또는 color: #fff; 처럼 특정 흰색 코드를 직접 지정할 수도 있습니다. */
    text-decoration: none; /* <--- 링크 밑줄을 없앱니다. */
}

a:hover {
    color: #eee; /* <--- 마우스를 올렸을 때 (hover) 색상을 살짝 다르게 하여 링크임을 표시할 수 있습니다. */
                 /* 예: 연한 회색으로 변하게 합니다. 필요없으면 이 블록을 삭제하세요. */
}

a:visited {
    color: inherit; /* <--- 방문했던 링크도 기본 글씨 색상으로 표시합니다. */
                    /* 또는 color: #fff; */
}
/*=================================================*/
/* 푸터 스타일 */
footer {
    padding: 20px;
    background-color: #f8f8f8;
    color: #555;
    font-size: 0.9em;
    border-top: 1px solid #eee; /* 선택 사항: 상단 경계선 추가 */
}

/* 푸터 내용 컨테이너 */
.footer-content {
    display: flex; /* Flexbox 활성화 */
    justify-content: space-between; /* 로고와 연락처 그룹을 양 끝으로 정렬 */
    align-items: center; /* 세로 중앙 정렬 (로고와 텍스트의 높이가 다를 경우) */
    padding: 0 20px; /* 좌우 패딩 추가 */
}

/* 푸터 로고 스타일 */
.footer-logo {
    height: 60px; /* 로고 크기 유지 */
    width: auto; /* 비율 유지 */
    margin-left: -10px; /* 로고를 왼쪽으로 더 이동 (필요시 조절) */
}

/* 연락처 정보 그룹 스타일 */
.contact-info {
    text-align: right; /* 주소와 연락처 텍스트를 오른쪽 정렬 */
}

/* 푸터 주소 스타일 (contact-info 안에 있기 때문에 별도 margin-top 제거) */
.footer-address {
    margin: 0; /* p 태그의 기본 마진 제거 */
    line-height: 1.4; /* 줄 간격 조절 */
}

/* 모바일 반응형 (화면 너비 768px 이하) */
@media (max-width: 768px) {
    .main-intro .intro-text {
        margin-left: 0;
        text-align: center;
        margin-top: 200px;
        padding: 15px;
    }

    .main-intro .intro-text h1 {
        font-size: 2.2em;
    }

    .main-intro .intro-text p {
        font-size: 1em;
    }

    /* 전체 화면 섹션은 모바일에서도 꽉 차게 */
    .full-screen-section {
        min-height: auto;
        padding: 30px 0;
    }

    /* 그리드 콘텐츠 래퍼는 모바일에서 폭 조절 */
    .grid-content-wrapper {
        padding: 20px;
        width: 95%;
        max-width: none;
    }

    /* 모든 그리드 섹션을 1열로 변경 */
    .grid-content-wrapper,
    .grid-content-wrapper.grid-2x2,
    .grid-content-wrapper.grid-3x3 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .grid-item {
        padding: 15px;
        min-height: 100px;
        /* 모바일에서도 텍스트 정렬 관련 속성 제거. 개별 아이템에서 재정의 */
    }

    /* 모바일 환경에서의 개별 아이템 h3, p 스타일은 위에 정의된 개별 스타일을 따릅니다.
       필요하면 이 @media 블록 안에서 다시 특정 아이템의 h3, p를 재정의할 수 있습니다. */

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-logo {
        margin-bottom: 10px;
    }
}