@charset "utf-8";

 /* ================= 1. 타이틀 & 3단 이미지 갤러리 ================= */
.family-header {
    text-align: center;
    padding:  00px 0 150px;
}
.family-header .ht-title { font-size: 50px; font-weight: 700; color: #111; margin-bottom: 40px; }
.family-header .ht-subtitle { font-size: 20px; color: #333; margin-bottom:  10px; font-weight: 300; }
.family-header .ht-subtitle2 { font-size:50px; color: #000; margin-bottom: 50px; font-weight: 700; }

.family-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.family-gallery .f-img {
    border-radius: 15px;
    overflow: hidden;
    position: relative; 
}
.family-gallery .f-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 양옆 작은 이미지 */
.family-gallery .side-img { width: 360px; height: 500px; opacity: 0.8; }

/* 중앙 큰 이미지 */
.family-gallery .center-img { width: 440px; height: 600px; z-index: 2; overflow: visible; }
.family-gallery .center-img img { border-radius: 15px; }

/* 중앙 이미지 양옆에 붙는 텍스트 (Absolute) */
.family-gallery .f-txt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #a78864;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 2px;
}
.family-gallery .txt-left { right: 100%; margin-right: 30px; text-align: right; }
.family-gallery .txt-right { left: 100%; margin-left: 30px; text-align: left; }


/* ================= 2. 어두운 배경 비전 섹션 ================= */
.family-vision {
    position: relative;
    width: 100%;
 z-index:2;
    background-color: #111; 
	height:100vh;  position:relative; 
}
.family-vision .inner-wrap{ position:relative; top:50%;transform:translateY(-50%);}
.family-vision .vision-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    background-attachment: fixed; /* 패럴랙스 느낌 */
    z-index: 1;
}
.family-vision .vision-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
    z-index: 2;
}
.family-vision .relative-z { position: relative; z-index: 3; }
.vision-txt { color: #fff; width: 50%; }
.vision-txt h3 { font-size: 50px; font-weight: 700; margin-bottom: 30px; }
.vision-txt p { font-size: 20px; line-height: 1.8; color: #ddd; margin-bottom: 20px; }


/* ================= 3 & 4. 인물 이력 섹션 (Overlap Layout) ================= */
.family-person {

    padding:  0px 0 150px;
}
/* 1챕터용 연한 베이지 배경 */
.bg-beige { background-color: #f7f3ec; }
.bg-beige2 { background-color: #f9f8f4; }

.person-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
/* 2챕터 좌우 반전 */
.person-row.reverse { flex-direction: row-reverse; }

/* 프로필  40%   */
.p-profile {
    width: 40%; 
	padding-top:4%;
 
	position:sticky; top:90px;
 
}
.p-photo {
    width: 90%;
    height:70vh;
    background-size: cover;
    background-position: top center;
   
}
/* [핵심] 인물 사진 위로 올라타는 흰색 정보 박스 */
.p-card {
    background-color: rgba(255,255,255,0.7);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    width: 100%;
    margin: -220px auto 0; /* 사진 아래쪽으로 -80px 끌어올려 겹치게 만듦 */
    position: relative;
    z-index: 2;
    text-align: left;
}
.p-card h4 { font-size: 20px; font-weight: 700; color: #111; margin-bottom: 15px; }
.p-card p { font-size: 16px; color: #111; line-height: 1.6; }

/* 우측/좌측 이력 텍스트 영역 - 50% 차지 */
.p-history {
    width: 50%;
    padding-top: 150px;
}
.p-history .sub-tit { color: #8d6a4d; font-weight: 700; display: block; margin-bottom: 10px; letter-spacing: 1px;font-size:20px; }
.p-history .sub-tit2 { color: #999999; font-weight: 500; display: block; margin-bottom: 10px; letter-spacing: 1px;font-size:20px;}
.p-history .main-tit { font-size: 62px; font-weight: 700; color: #111; margin-bottom: 50px; letter-spacing: -1px;}

.history-list h5 {
    font-size: 20px; font-weight: 700; color: #333;
    border-bottom: 2px solid #111; padding-bottom: 15px; margin-bottom: 25px;
}
.history-list .mt-40 { margin-top: 50px; }
.history-list ul li {
    font-size: 18px; color: #000; line-height: 1.6; margin-bottom:  5px;
    display: flex; flex-wrap: wrap; justify-content: space-between;
}
.history-list ul li span{display:block; width:92%}
.history-list ul li span:first-child{ width:6%; }

.history-list ul li .date {
    width: 80px; font-weight: 700; color: #111; flex-shrink: 0;
}
.history-list ul li b { color: #a78864; font-weight: 700; }