/* ---------------------------------------------------------
   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: 10px !important;   /* 기존 40~60px → 210px */
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom:-10px;
}

/* 상단 설명 영역 */
.family-main-title {
    margin-top: -10px !important;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 4px;
}

.family-main-text {
    margin-top: 12px !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: #e5e7eb;
}

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

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

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

/* 위쪽 대표 사진 영역 */
.family-card-img {
    width: 100%;
    height: 100%;                  /* 🔹 사진 박스 높이   */
    aspect-ratio: 14 / 9;    /*  기본 16 : 9 */
    object-fit: cover;
    border-radius: 12px;
    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: 18px;
    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.35 !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: 1440px !important;
    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: 13px;
    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;
    }
}

/* =========================================================
   FINAL – Family Card Header (Stable)
   - 제목: 왼쪽 고정
   - 버튼: 오른쪽
========================================================= */

.family-card-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px 16px;
}

/* 제목 + 버튼 한 줄 */
.family-card-header{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

/* 제목은 항상 왼쪽 */
.family-card-title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  flex: 0 1 auto;
}

/* 상단 가족 소개 카드 (밝은 톤, 프로 느낌) */
.family-intro-main{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
  padding: 10px 16px;

  /* 🔼 위로 당기기 */
  margin-top: -20px;
}

.family-card{
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

/* 사진첩 보기 버튼 (정제된 최종 디자인) */
.family-card-link{
  margin-left: auto;
}

.family-card-link a{
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.25);
  background: #f5f8ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease;
}

.family-card-link a:hover{
  background: #e9efff;
  box-shadow: 0 2px 6px rgba(37,99,235,.18);
}

/* 상단 가족 소개 영역 – 배경과 통합 */
.family-intro-main{
  background: transparent;   /* ✅ 전체 배경과 동일 */
  border: 0;
  box-shadow: none;
  padding: 4px 0 10px;
  margin-top: -4px;
}

.family-intro-main .family-main-title{
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.family-intro-main .family-main-text{
  font-size: 14px;
  color: rgba(15,23,42,.72);
  line-height: 1.45;
  margin: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.family-intro-wrap{
  border-bottom: 1px solid rgba(15,23,42,.06);
  padding-bottom: 12px;
}

/* 가족 카드 그리드 간격 최종 조정 */
.family-card-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;   /* 좌우는 지금처럼 여유 */
  row-gap: 20px;      /* 🔥 카드 줄 간격 12px */
  margin-top: 10px;
}

@media (max-width: 768px){
  .family-card-grid{
    row-gap: 14px;   /* 모바일은 살짝 여유 */
  }
}

/* =========================================================
   [FIX] Family 카드 텍스트 가독성 개선 (FINAL)
   - 문제: 카드 안 글씨가 작고 흐려 보임
   - 원인: (1) rgba 알파값이 낮음 (연한 회색)
           (2) font-weight가 약함
           (3) line-height/letter-spacing 최적화 부족
   - 목표: 제목/이름/설명/버튼 모두 "선명 + 적당히 큼"
========================================================= */

/* 0) 카드 본문 기본 글자색을 '진한 검정 계열'로 통일 (상속값 덮어쓰기) */
.family-card,
.family-card *{
  /* ✅ 기본 글자색을 선명하게 (너무 검정이면 #0b1220 로 조절 가능) */
  color: #0f172a;
}

/* 1) 카드 제목(가정명) : 더 크고 더 진하게 */
.family-card-title{
  font-size: 17px;        /* ✅ 제목은 16px 정도가 가장 안정적 */
  font-weight: 900;       /* ✅ 굵게(흐림 방지) */
  line-height: 1.25;
  margin: 0;
  letter-spacing: -0.2px; /* ✅ 한글 가독성 살짝 개선 */
}

/* 2) 구성원 라인 : 13px + 진한 회색 (너무 연하면 흐려짐) */
.family-card-people{
  font-size: 13px;        /* ✅ 기존 11~12px이면 작게 느껴짐 */
  font-weight: 700;       /* ✅ 흐림 방지 */
  line-height: 1.15;
  margin: 4px 0 4px 0;

  /* ✅ 연한 rgba(.6) 대신 더 선명한 톤 */
  color: rgba(15,23,42,.78);
}

/* 3) 소개 문장(설명) : 13px 고정 + 충분히 진한 톤 */
.family-card-intro{
  font-size: 13px;        /* ✅ 요청: 설명글 13px */
  font-weight: 600;       /* ✅ 본문은 500이면 흐려 보일 수 있음 */
  line-height: 1.15;      /* ✅ 읽기 편한 줄간격 */
  margin: 0;

  /* ✅ 흐림 방지: 알파값 올리기 */
  color: rgba(15,23,42,.78);
}

/* 4) 버튼(사진첩 보기) : 카드 배경 위에서 선명하게 보이도록 대비 강화 */
.family-card-link{
  /* ✅ 제목 라인에 맞춰 오른쪽으로 보내려면 header 안에서 margin-left:auto 사용 */
  margin-left: auto;
}

.family-card-link{
  font-size: 13px;
  font-weight: 800;         /* ✅ 버튼 글자 선명 */
  color: #1d4ed8 !important;/* ✅ 파란색 대비 강화 */
  text-decoration: none;
  white-space: nowrap;
}

/* 버튼을 'pill' 형태로 보이게(선택) */
.family-card-link{
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(59,130,246,.28);
  background: rgba(59,130,246,.10);
}

.family-card-link:hover{
  background: rgba(59,130,246,.14);
}

/* 5) 혹시 어딘가에서 opacity가 먹고 있으면 강제로 복구 */
.family-card,
.family-card-body,
.family-card-title,
.family-card-people,
.family-card-intro{
  opacity: 1 !important;   /* ✅ 흐림(투명도) 원인 제거 */
  filter: none !important; /* ✅ blur/filter가 혹시 있으면 제거 */
}

/* 6) (선택) 카드 본문 패딩 조금 늘려서 답답함 완화 */
.family-card-body{
  padding: 14px 16px 16px; /* ✅ 글이 숨 쉴 공간 확보 */
}

.family-card-body{
  padding-top: 6px;
}

.family-card-header{
  margin-bottom: 0px;
}

.family-card-header .family-card-link{
  transform: translateY(-4px);
}
/* ========================================================= 2026.01.13 대표 1 + 썸네일 4
/* =========================================================
   FAMILY INTRO (FINAL) - 대표 1 + 썸네일 4 (2x2 overlay)
   - 밝은 배경, 카드 구분은 은은하게
   - 카드 높이: 580px
   - 대표사진: 500px
   - 버튼: 제목라인 우측 정렬 (부모님 가정은 왼쪽 고정)
========================================================= */

/* 페이지 배경(밝은 톤) */
.family-main{
  background: #f6f8fc;
  padding: 12px 0 26px;
}

/* 브레드크럼 아래 간격/위치 (너 요청대로 위로) */
.family-intro-wrap{
  margin-top: 10px !important;
}

/* 상단 소개: 흰 카드 대신 배경과 통합 */
.family-intro-main{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 0 10px;
  margin-top: -6px;          /* ✅ 조금 위로 */
}

/* 제목/설명 가독성(선명하게) */
.family-main-title{
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
  margin: 0px 0 4px 0;
}
.family-main-text{
  font-size: 14px;
  font-weight: 700;
  color: rgba(15,23,42,.78);
  line-height: 1.45;
  margin: 0;

  /* ✅ 한 줄 + ... */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 카드 그리드 간격(줄 간격 12px 요청 반영) */
.family-card-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 24px;            /* ✅ 카드 줄 간격 */
  margin-top: 12px;
}

/* 카드 본체 */
.family-card{
  background: #ffffff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  overflow: hidden;

  height: 580px;            /* ✅ 요청 580 */
  display: flex;
  flex-direction: column;
}

/* 이미지 영역(대표사진) */
.family-card-media{
  display: block;
  text-decoration: none;
  color: inherit;
}
.family-card-img{
  position: relative;
  height: 460px;            /* ✅ 순수 사진 높이 */
  background: #e9eef8;
  overflow: hidden;
}
.family-card-mainimg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 사진이 없을 때 */
.family-card-placeholder{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 14px;
  font-weight: 800;
  color: rgba(15,23,42,.55);
}

/* ✅ 썸네일 4장: 우측 상단 2x2 오버레이 */
.family-card-thumbs{
  position: absolute;
  top: 12px;
  right: 12px;

  display: grid;
  grid-template-columns: repeat(2, 46px);
  grid-template-rows: repeat(2, 46px);
  gap: 6px;

  padding: 6px;
  border-radius: 14px;

  background: rgba(255,255,255,.70);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 18px rgba(15,23,42,.12);
}
.family-card-thumb img{
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* 본문 */
.family-card-body{
  flex: 1;
  padding: 10px 16px 20px;
  display: flex;
  flex-direction: column;
}

/* 제목(왼쪽) + 버튼(오른쪽) */
.family-card-header{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.family-card-title{
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: #0f172a;           /* ✅ 선명 */
}
.family-card-link{
  margin-left: auto;        /* ✅ 버튼만 오른쪽 */
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.22);
  background: rgba(37,99,235,.08);
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.family-card-link:hover{
  background: rgba(37,99,235,.12);
}

/* 구성원/설명 가독성 강화 */
.family-card-people{
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,.78);
}
.family-card-intro{
  margin: 0;
  font-size: 13px;          /* ✅ 요청 */
  font-weight: 700;
  line-height: 1.15;
  color: rgba(15,23,42,.78);
}

/* ---------------------------------------------------------
   반응형
--------------------------------------------------------- */

/* 태블릿(<= 980px): 1열, 카드 높이 자동 + 이미지 살짝 조정 */
@media (max-width: 980px){
  .family-card-grid{
    grid-template-columns: 1fr;
  }
  .family-card{
    height: auto;           /* ✅ 모바일/태블릿에서는 내용에 맞게 */
  }
  .family-card-img{
    height: 360px;
  }
}

/* 모바일(<= 768px) */
@media (max-width: 768px){
  .family-card-img{ height: 320px; }
  .family-card-thumbs{
    top: 10px; right: 10px;
    grid-template-columns: repeat(2, 42px);
    grid-template-rows: repeat(2, 42px);
  }
  .family-card-thumb img{ width: 42px; height: 42px; }
}

/* 소형(<= 650px) */
@media (max-width: 650px){
  .family-main-text{ font-size: 13px; }
  .family-card-body{ padding: 12px 14px 14px; }
}

/* 초소형(<= 420px) */
@media (max-width: 420px){
  .family-card-img{ height: 290px; }
  .family-card-thumbs{
    grid-template-columns: repeat(2, 40px);
    grid-template-rows: repeat(2, 40px);
  }
  .family-card-thumb img{ width: 40px; height: 40px; }
}


/* =========================================================
   FAMILY TREE (family-tree.php) - Light Pro Theme (FINAL)
   - site 전체 밝은 톤과 조화
   - 기존 family.css의 .card(다크) 를 tree 페이지에서만 오버라이드
   - 980 / 768 / 650 반응형 포함
========================================================= */

/* (A) 페이지 전체 배경/여백 */
.tree-main{
  background: #f6f8fc;               /* ✅ 사이트 밝은 배경과 통일 */
  padding: 14px 0 30px;
}

/* (B) tree 컨테이너 폭/간격 */
.tree-container{
  max-width: 1200px;                 /* ✅ 너무 넓지 않게(전문적인 느낌) */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------------------------------------------------------
   (C) tree 페이지에서만 공통 .card(다크)를 "밝은 카드"로 무력화
--------------------------------------------------------- */
.tree-main .card{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08) !important;
  padding: 18px 22px !important;
  margin: 0 !important;
}

/* 소개 카드(상단) - 타이틀/설명 정리 */
.tree-intro-card{
  padding: 18px 22px !important;
}
.tree-intro-title{
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.2px;
}
.tree-intro-text{
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(15,23,42,.72);
}

/* ---------------------------------------------------------
   (D) 세대 섹션 헤더(● + 텍스트) - 더 “프로” 느낌
--------------------------------------------------------- */
.generation-title{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
}
.generation-title .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}

/* ---------------------------------------------------------
   (E) 세대별 그리드 (PC: 2열 / 모바일: 1열)
--------------------------------------------------------- */
.tree-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;                    /* ✅ 세로/가로 간격 안정 */
}

/* ---------------------------------------------------------
   (F) 개별 인물 카드(내부 카드 느낌) - 밝은 카드 안에서 또 카드로 보이게
--------------------------------------------------------- */
.tree-card{
  display: flex;
  gap: 14px;
  align-items: flex-start;

  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 14px;
  padding: 12px 14px;
}

/* 프로필 사진 */
.profile-photo{
  width: 100px !important;
  height: 120px !important;
  border-radius: 14px;
  object-fit: cover;

  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 8px 18px rgba(15,23,42,.10);
}

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

/* 이름(타이틀) */
.tree-info-title{
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.2px;
}

/* 서브 정보 */
.tree-info-sub{
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.74);
  line-height: 1.4;
}

/* 태그(부모세대/첫째 등) */
.tree-tag{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 4px;

  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;

  color: #1d4ed8;
  background: rgba(59,130,246,.10);
  border: 1px solid rgba(59,130,246,.22);
}

/* 설명 문장 */
.tree-note{
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(15,23,42,.72);
}

/* ---------------------------------------------------------
   (G) 텍스트 계보도 카드(보조) - 밝게 정돈
--------------------------------------------------------- */

/* =========================================================
   RESPONSIVE
========================================================= */

/* 980px: 태블릿 - 카드 패딩/사진 약간 축소 */
@media (max-width: 980px){
  .tree-main .card{
    padding: 16px 18px !important;
  }
  .tree-container{
    max-width: 920px;
    gap: 14px;
  }
  .profile-photo{
    width: 84px;
    height: 84px;
  }
}

/* 768px: 1열로 변경 */
@media (max-width: 768px){
  .tree-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tree-card{
    padding: 12px 12px;
  }
  .profile-photo{
    width: 80px;
    height: 80px;
  }
}

/* 650px: 모바일 - 글자/여백 더 압축 */
@media (max-width: 650px){
  .tree-main{
    padding: 12px 0 24px;
  }
  .tree-intro-title{
    font-size: 18px;
  }
  .tree-intro-text{
    font-size: 12.5px;
  }
  .tree-info-title{
    font-size: 14px;
  }
  .tree-note{
    font-size: 12px;
  }
}

/* =========================================================
   Generation Badge (세대 라벨)
========================================================= */

.tree-section{
  position: relative; /* 배지 기준점 */
}

/* 공통 배지 */
.generation-badge{
  position: absolute;
  top: -10px;
  left: 18px;

  padding: 4px 12px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  background: #ffffff;
  color: #0f172a;

  border: 1px solid rgba(15,23,42,.18);
  box-shadow: 0 6px 14px rgba(15,23,42,.12);
}

/* 세대별 컬러 미묘하게 차별 (전문 느낌 유지) */
.gen1 .generation-badge{
  border-color: rgba(34,197,94,.45);
  color: #15803d;
}

.gen2 .generation-badge{
  border-color: rgba(59,130,246,.45);
  color: #1d4ed8;
}

.gen3 .generation-badge{
  border-color: rgba(168,85,247,.45);
  color: #6d28d9;
}

/* 모바일에서는 살짝 축소 */
@media (max-width: 650px){
  .generation-badge{
    top: -8px;
    left: 14px;
    font-size: 10px;
    padding: 3px 10px;
  }
}

/* ---------------------------------------------------------
   (G) 텍스트 계보도 - 밝고 세련된 아카이브 스타일
--------------------------------------------------------- */
.tree-text-card {
    height: 460px; /* 요청하신 400~460px 사이의 최적값 */
    display: flex;
    flex-direction: column;
    padding: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* 헤더 영역: 제목은 왼쪽, 배지는 오른쪽 */
.tree-text-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* ✅ 제목과 배지를 양 끝으로 */
    margin-bottom: 6px;
}

.tree-text-title {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 800;
    color: #334155;
    margin-bottom: 2px;
}

.tree-text-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
}

.tree-text-block {
    flex: 1 1 auto; /* 카드 높이에 맞춰 자동 조절 */
    margin: 0px;
    padding: 18px 0px 18px;
    border-radius: 12px;
    
    /* ✅ 배경색 개선: 아주 밝고 깨끗한 블루 그레이 톤 */
    background: #f8fafc; 
    color: #475569; /* 짙은 슬레이트 그레이로 가독성 확보 */
    
    /* 부드러운 안쪽 테두리로 고급스러움 추가 */
    border: 1px solid #f1f5f9;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
    
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 13px;
    line-height: 1.5;
    overflow-y: auto; /* 내용이 길어질 경우 내부 스크롤 */
    white-space: pre;
}

/* ✅ 하이라이트: 밝은 테마에 맞는 색상 조합 */
.tree-text-block b {
    color: #2563eb; /* 이름: 신뢰감을 주는 블루 */
    font-weight: 700;
}

.tree-text-block i {
    color: #94a3b8; /* 설명: 연한 그레이 */
    font-style: normal;
}

.tree-text-block .gen-tag {
    display: inline-block;
    color: #0f172a;
    font-weight: 800;
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}
/* --------------------------------------------------------------------- */