@charset "UTF-8";

.sub-header { background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/새비전양의문교회_about_메인.png'); }

/* 섹션 공통 */
section { max-width: 1100px; margin: 0 auto; padding: 100px 20px; border-bottom: 1px solid #eee; }
.section-title { font-size: 30px; font-weight: 700; margin-bottom: 50px; text-align: center; color: #253568; position: relative; padding-bottom: 15px; }
.section-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background: #253568; }

/* 인사말 */
.greeting-container { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
.greeting-image { flex: 1; min-width: 300px; }
.greeting-image img { width: 100%; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.greeting-content { flex: 1.2; min-width: 300px; }
.greeting-highlight { font-size: 20px; font-weight: 700; color: #222; line-height: 1.6; margin-bottom: 25px; word-break: keep-all; }
.greeting-text { line-height: 1.5; font-size: 17px; color: #555; }
.greeting-text b { color: #222; font-size: 19px; }

/* 교회 소개 */
.intro-text {
    max-width: 600px; /* 글상자 크기를 제한해서 시선이 흩어지지 않게 합니다 */
    margin: 0 auto; /* 글상자 자체를 화면 정중앙에 배치합니다 */
    text-align: left; /* 요청하신 좌측 정렬! */
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    word-break: keep-all;
}

/* 교회 소개 박스 스타일 */
.intro-box {
    background-color: #f8f9fa; /* 아주 연한 회색 배경 */
    padding: 40px 50px;
    border-radius: 15px;
    border-bottom: 4px solid #253568;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); /* 은은한 그림자 */
    max-width: 700px;
    margin: 0 auto;
}

/* 섬기는 이 */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 20px; }
.staff-item { text-align: center; }
.staff-image { width: 100%; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; margin-bottom: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.staff-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.staff-item:hover img { transform: scale(1.05); }
.staff-name { font-size: 18px; font-weight: 700; color: #222; margin-bottom: 5px; }
.staff-role { font-size: 14px; color: #253568; font-weight: 500; }

/* 예배 안내 & 지도 */
.timetable { width: 100%; border-collapse: collapse; margin-top: 20px; border-top: 2px solid #333; }
.timetable th, .timetable td { padding: 22px; border-bottom: 1px solid #eee; text-align: center; }
.timetable th { background: #fbfbfb; font-weight: 600; color: #666; width: 30%; }
.timetable td { font-size: 16px; }
.map-container { background: #eee; height: 450px; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border: 1px solid #ddd; }
.map-container iframe { width: 100% !important; height: 100% !important; border: 0; }

@media (max-width: 768px) {
    section { padding: 60px 30px; }
    .section-title { font-size: 24px; }
    .greeting-container { gap: 30px; }
    .greeting-content { text-align: center; }
    .greeting-highlight { text-align: center; font-size: 18px; }
    .greeting-text {
        display: inline-block; /* 글상자 크기를 글 길이에 딱 맞게 쪼여줍니다 */
        text-align: left; /* 본문 내용은 왼쪽 정렬 유지 */
        margin: 0 auto; /* 쪼여진 글상자를 화면 한가운데로 보냅니다 */
        font-size: 15px;
    }
    .intro-box { padding: 30px 20px; }
    .intro-text { font-size: 15px; }
    .timetable { display: block; overflow-x: auto; white-space: nowrap; }
    .timetable th, .timetable td { padding: 15px; font-size: 14px; }
    .map-container { height: 300px; }
}