/* ======================================== */
         /* ======== 공통 레이아웃 시작 부분==========  */
         /* ======================================== */


/* 1. 여기에 추가: 스크롤바가 생겨도 화면이 밀리지 않게 공간 확보 */
html { 
    scrollbar-gutter: stable; 
}

/* 2. 기본 배경은 흰색으로 설정 (세로 스크롤 허용) */
body { 
    margin: 0; 
    padding: 0;
    min-height: 100vh; 
    background: #fff; 

    /* 우측에 브라우저 기본 스크롤바가 생기도록 설정 */
    overflow-y: auto !important; 
    overflow-x: hidden;
    
    /* 요소들을 위에서 아래로 수직 배치 */
    display: flex;
    flex-direction: column;
}

/* 3. 헤더 프레임: 메뉴 드롭다운과 모바일 사이드바를 위해 높이 확보 */
 .header-frame { 
         width: 100%; 
         height: 100px; /* 기본 높이 */
         border: none; 
         position: fixed; 
         top: 0; 
         left: 0; 
         width: calc(100% - 17px);  /* 스크롤바가 들어갈 자리를 확실히 비워줍니다 */
         z-index: 1000; 
         transition: height 0.3s ease; /* 부드러운 높이 변화 */
         pointer-events: auto; /* 마우스 이벤트 허용 */
         }

/* 4. 마우스를 올리면 드롭다운 메뉴가 보일만큼 높이를 늘림 */
.header-frame:hover { height: 400vh; }

/* 5. 푸터 프레임: 하단 흰 줄 제거 및 밀착 */
.footer-frame { 
    flex-shrink: 0;   /* 푸터가 본문에 밀려 찌그러지지 않게 방지 */
    margin-top: auto; /* 본문이 짧아도 강제로 최하단에 위치시킴 */
    width: 100%; 
    height: 80px; 
    border: none; 
    display: block; 
    vertical-align: top; 
    background: #1a1a1a; }



         /* ======================================== */
         /* ======== 상단 탭 수정부분 작성 위치 시작 부분==========  */
         /* ======================================== */


/* 프로젝트 상단 내비게이션 스타일 */
.about_via-nav {
  display: flex;
  flex-direction: column; /* 세로(위-아래) 방향으로 배치 */
  align-items: center;    /* 전체 요소를 가로 중앙 정렬 */
  justify-content: center;
  padding: 0px 0;
  margin-top: 105px; 
  margin-bottom: 20px;
}

.nav-title {
  font-size: 35px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #0a4a44;
  margin-bottom: 20px;   /* 제목과 아래 탭 사이의 간격 */
  text-align: center;    /* 텍스트 중앙 정렬 */
}

.nav-tabs {
  display: flex;
  gap: 10px; /* 항목 사이 공간을 띄움 (원하는 만큼 조절 가능) */
  flex: 1;
  justify-content: center; /* 중앙 배치 */
}

.tab-item {
  text-decoration: none;
  color: #333;
  font-weight: 700;
  font-size: 14px;
  
  /* 박스 크기를 동일하게 설정 */
  width: 176px;        /* 버튼의 동일한 가로 너비 */
  height: 40px;        /* 버튼의 동일한 세로 높이 */
  display: flex;       /* 중앙 정렬을 위해 flex 사용 */
  align-items: center;
  justify-content: center;
  
  transition: all 0.3s ease;
  border: 1px solid #ddd;
  background-color: #fff;
  letter-spacing: 0.5px;
}

/* ALL 및 활성화된 탭 스타일 */
.tab-item.active {
  background-color: #0a4a44 !important; /* 비아건축 로고 색상 */
  color: #fff !important;
  border-color: #0a4a44 !important;
}

.tab-item:hover:not(.active) {
  border-color: #0a4a44; /* 호버 시 테두리만 로고 색상으로 */
  color: #0a4a44;
}


         /* ======================================== */
         /* ======== 본문 수정부분 작성 위치 시작 부분==========  */
         /* ======================================== */

/* 본문 전체 영역 */
.people-main {
    flex: 1 0 auto; /* ★핵심: 남는 모든 공간을 이 영역이 차지하여 푸터를 바닥으로 밀어냄 */
    width: 100%;  /* 위쪽 여백은 네비게이션 높이에 맞춰 조절하세요 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 0;
    background: #fff;
}

.people-container {
  max-width: 1300px;
  width: 90%;
  margin: 0 auto;
  padding: 0px 0;
}

/* 1. 프로필 카드 배치 및 간격 */
.profile-card {
  display: flex;
  align-items: flex-start;
  gap: 0; /* 섹션 간 간격을 0으로 하고 내부 패딩으로 조절 */
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 20px 0;
}

/* 2. 1:1:1 비율 및 세로 구분선 적용 */
.profile-section {
  flex: 1;
  min-height: 280px; /* 높이를 어느정도 통일시켜 깔끔하게 배치 */
  padding: 0 40px;   /* 내부 여백으로 간격 확보 */
  position: relative;
}

/* 첫 번째 섹션을 제외한 나머지에 왼쪽 세로선 추가 */
.profile-section:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, #eee, #ccc, #eee); /* 은은한 그라데이션 선 */
}

/* 3. 좌측: 사진 및 하단 이름 정렬 */
.profile-image img {
  width: 100%;
  height: auto;
  display: block;

}

.name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 15px;
}

.name { 
  font-size: 20px; 
  font-weight: 700; 
  color: #0a4a44; /* 비아건축 색상 */
}

.english-name { 
  font-size: 0.8em; /* 80% 축소 */
  color: #b0b0b0; /* 흐린 회색 */
  margin-left: 8px;
}

.position { 
  font-size: 0.8em; /* 80% 축소 */
  color: #0a4a44; /* 비아건축 색상 */
  font-weight: 600;
}

/* 4. 현대적인 타이틀 디자인 (샘플 이미지 스타일) */
.section-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
  position: relative;
  display: block;
  letter-spacing: 1px;
}

/* 타이틀 상단의 짧은 강조선 */
.section-title::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  background-color: #0a4a44;
  margin-bottom: 10px;
}

/* 5. 텍스트 디테일 */
.works-list {
  list-style: none;
  padding: 0;
}

.works-list li {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 8px;
  word-break: keep-all;
}

.intro-text p {
  font-size: 14.5px;
  line-height: 1.9;
  color: #555;
  text-align: justify;
  word-break: keep-all;
}



/* [모바일 대응] 화면이 작아지면 세로로 배치 */
@media (max-width: 1024px) {
    .people-main {
        margin-top: -20px !important; /* [추가] 제목 자체의 상단 마진 제거 */

    }

  /* 1. 세로선 완전 제거 (!important) */
  .profile-section::before,
  .profile-section:not(:first-child)::before {
    display: none !important;
  }

    /* 1. 카드를 수직으로 정렬하고 너비를 100%로 확장 */
    .profile-card {
        display: flex;
        flex-direction: column !important; /* 수직 배치 강제 */
        gap: 10px;
        margin-top: 0px !important; /* [추가] 제목 자체의 상단 마진 제거 */
        margin-bottom: 20px;
        width: 100%;
    }

    /* 2. 데스크탑의 강제 높이 설정 해제 (가장 중요) */
    .profile-section {
        min-height: auto !important; 
        padding: 0;
        margin-bottom: 10px;
    }

    /* 3. 이름 및 직급 줄 간격 조정 */
    .name-row {
        margin-top: 15px;
        padding-bottom: 10px;
    }

    .name { font-size: 18px; }
    .english-name { font-size: 0.75em; }
    .position { font-size: 0.75em; }

    /* 4. 주요작품 & 소개 섹션 줄 간격 축소 */
    .section-title {
        margin-bottom: 10px; /* 타이틀 아래 여백 축소 */
    }
    .section-title::before {
        margin-bottom: 8px; /* 포인트 선 아래 여백 축소 */
    }

    /* 주요작품 리스트 줄 간격 */
    .works-list li {
        font-size: 13.5px;
        line-height: 1.4; /* 기존 1.8 -> 1.4로 축소 */
        margin-bottom: 5px;
    }

    /* 소개 본문 줄 간격 */
    .intro-text p {
        font-size: 14px;
        line-height: 1.5; /* 기존 1.9 -> 1.5로 축소 */
        margin: 0;
    }

    /* 프로젝트 상단 내비게이션 스타일 */ 
    .about_via-nav {
        flex-direction: column;
        gap: 5px;
        margin-top: 70px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .nav-title {
        font-size: 25px;
        margin-top: 5px;
        margin-bottom: 5px;
   }
    .nav-tabs {
        width: 100%;
        display: flex;         /* flexbox 활성화 확인 */
        flex-wrap: nowrap;     /* 한 줄로 가득 채우려면 nowrap, 줄바꿈 허용시 wrap */
        gap: 3px;
        padding: 0;            /* 불필요한 패딩 제거 */
    }

    .tab-item {
        flex: 1;               /* 핵심: 자식 요소가 너비를 균등하게 나눠 가짐 */
        min-width: 0;          /* 텍스트가 길어질 경우 대비 */
        text-align: center;    /* 텍스트 중앙 정렬 */
        font-size: 12px;
        height: 30px;        
    }

}


@media (max-width: 640px) {
    .people-main {
        padding-left: 10px;
        padding-right: 10px;
    }

}