/* ---------------------------------------------------------
   family.css
   - 가족 소개 (family-intro.php)
   - 가족 계보도 (family-tree.php)
   전용 스타일
   - 공통 카드(.card) 스타일은 site.css와 어울리게 보조용으로 정의
--------------------------------------------------------- */

/* ▣ 공통 카드 기본 (site.css에 유사 카드가 있다면 이 부분은 조정 가능) */
.card {
    background: rgba(15, 23, 42, 0.8);  /* 어두운 남색 계열 */
    border-radius: 12px;
    padding: 10px 10px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.6);
    margin-bottom: 6px;
}

/* ---------------------------------------------------------
   1) 가족 소개 페이지 (family-intro.php)
--------------------------------------------------------- */
/* 가족 소개 페이지 메인 여백 */
.family-main {
    padding: 10px 0 10px 0;
}

/* 가족소개 상단 설명 박스 */
.family-intro-main h1 {
    color: #f9fafb;
}

.family-intro-main p {
    color: #e5e7eb;
}

/* 가족소개 페이지 전체 상단 여백 조절 */
.family-intro-wrap {
    margin-top: 4px !important;   /* 기존 40~60px → 210px */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 상단 설명 영역 */
.family-main-title {
    margin-top: 5px !important;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 2px;
}

.family-main-text {
    font-size: 12px;
    line-height: 1.6;
    color: #e5e7eb;
}

/* ----------------------------------------------
   가족 카드 만들기
---------------------------------------------- */

/* 가족 카드 그리드 */
.family-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));    /* 2열 그리드 */
    gap: 10px;
}

/* 개별 가족 카드 : 고정높이 없애고 패딩 줄이기 */
.family-card {
    display: flex;
    flex-direction: column;
    padding: 8px 10px 6px 10px !important;  /* 위·아래 패딩 줄임 */
    overflow: hidden;
    min-height: auto !important;      /* 카드 전체 높이 자동 */
    gap: 2px;
}

/* 위쪽 대표 사진 영역 */
.family-card-img {
    width: 100%;
    height: 100p%;                  /* 🔹 사진 박스 높이   */
    aspect-ratio: 14 / 9;    /*  기본 16 : 9 */
    object-fit: cover;
    border-radius: 10px;
    overflow: hidden;
    background: #020617;
    margin-bottom: 5px;             /* 사진과 텍스트 사이 간격 살짝 줄임 */
}

.family-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;              /* 🔹 가운데 기준으로 꽉 채우기 */
    object-position: center center; /* 🔹 얼굴이 가운데 오도록 */
}

/* 대표 사진이 없을 때 플레이스홀더 */
.family-card-placeholder {
    width: 100%;
    height: 100%;
    font-size: 13px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 카드 본문 텍스트 : 텍스트 전체 블록 높이 최소화 */
.family-card-body {
    display: flex;
    flex-direction: column;
    gap: 1px;                   /* 요소 사이 간격 작게 */
    margin-top: 2px;
}

/* 제목 줄 */
.family-card-title {
    color: #f9fafb;
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 2px 0;          /* 위 여백 제거, 아래 2px만 */
}

/* 구성원 이름 줄 */
.family-card-people {
    color: #e5e7eb;
    font-size: 11px;
    margin: 0 0 2px 0;
    line-height: 1.25 !important;
}

/* 소개 문장 */
.family-card-intro {
    font-size: 12px;
    color: #d1d5db;             /* #cbd5f5;  */
    line-height: 1.35;          /* 줄 간격 조금 줄임 (기존 1.6~1.7 보다 촘촘) */
    margin: 0 0 3px 0;
}

/* 사진첩 보기 링크 위치/스타일 */
.family-card-link {
    margin-top: 2px;
    text-align: right;          /* 🔹 오른쪽 정렬 */
}

.family-card-link a {
    font-size: 12px;
    color: #93c5fd;             /* 🔹 더 밝은 파란색 */
    font-weight: 500;
    text-decoration: none;
}

.family-card-link a:hover {
    color: #bfdbfe;             /* 호버 시 더 밝게 */
    text-decoration: underline;
}

@media (max-width: 768px) {
    .family-card-grid {
        grid-template-columns: 1fr;
    }

    .family-card-img {
        height: 190px;
    }
}

/* =========================================================
   가족 계보도 (family-tree.php)
   PC 기준 1페이지 안에 들어가도록 간격, 크기 압축
   ========================================================= */

.tree-main {
    padding-top: 16px;
}

/* 전체 컨테이너: 폭 제한 + 섹션 간 간격 압축 */
.tree-container {
    max-width: 1100px;
    margin: 0 auto 40px auto;
    display: flex;
    flex-direction: column;
    gap: 16px; /* 카드들 사이 간격 */
}

/* 공통 카드 스타일 (family-intro 와 동일 톤 가정) */
.tree-container .card {
    padding: 16px 22px;
}

/* 소개 카드 상단 텍스트 */
.tree-intro-card {
    padding: 16px 24px;
}

/* 소개 타이틀/텍스트 */
.tree-intro-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.tree-intro-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #cbd5f5;
}

/* 세대 헤더 */
.generation-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.generation-title .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
}

/* 세대별 카드 그리드
   - PC: 2열 고정
   - 내용 많아도 높이 자동 맞춤 */
.tree-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;  /* 세로 12, 가로 16 */
}

/* 개별 인물 카드 */
.tree-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* 프로필 사진 크기 ↓ (PC 1페이지에 맞추기 위해) */
/* 프로필 사진 크기 (PC 기준 확대) */
.profile-photo {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    object-fit: cover;
}

/* 텍스트 영역 */
.tree-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tree-info-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 2px 0;
}

.tree-info-sub {
    font-size: 12px;
    color: #e5e7eb;
    margin: 0;
}

.tree-tag {
    display: inline-block;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(37, 99, 235, 0.22);
    color: #bfdbfe;
}

.tree-note {
    font-size: 12px;
    color: #cbd5f5;
    line-height: 1.4;
    margin: 0;
}

/* 텍스트 계보도 박스 */
.tree-text-card {
    padding: 14px 20px 16px 20px;
}

.tree-text-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.tree-text-block {
    margin: 0;
    padding: 10px 14px;
    font-family: "Consolas", "Menlo", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.5;
    background: #020617;
    border-radius: 8px;
    color: #e5e7eb;
    overflow-x: auto;
}

/* -----------------------------------------
   반응형 (태블릿/모바일)
   ----------------------------------------- */
@media (max-width: 900px) {
    .tree-grid {
        grid-template-columns: 1fr;
    }

    .profile-photo {
        width: 80px;
        height: 80px;
    }

    .tree-container .card {
        padding: 14px 16px;
    }
}

/* ---------------------------------------------------------
   3) 반응형 (모바일)
--------------------------------------------------------- */

@media (max-width: 768px) {
    .family-card-grid {
        grid-template-columns: 1fr;
    }

    .family-card-img {
        height: 260px;
    }

    .tree-grid {
        grid-template-columns: 1fr;
    }

    .tree-card {
        align-items: flex-start;
    }
}