/* 기본 스타일 */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 상단부터 쌓이도록 */
  background: #fff;
}

.tab-content {
  display: none;      /* 기본적으로 숨김 */
  flex-direction: column;
  justify-content: flex-start;
  padding: 2rem 5vw;
}

/* 콘텐츠 영역 예시 */
.main-content {
  flex: 1;
  padding: 5vh 5vw 10vh; /* 하단 바 공간 확보 */
}

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
}

.hero p {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  opacity: 0.7;
}

/*roles 콘텐츠*/
/*.roles-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.role-item {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background-color: #f9f9f9;
}*/

/*.role-item p {
  margin: 0;
  font-size: 14px;
  color: #555;
}
*/

.roles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 15px;
}

.role-item h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none; /* 기본 밑줄 제거 */
  transition: all 0.2s ease-in-out;
  font-weight: 400; /* 추가: 폰트 두께를 얇게 */
}

.role-item h3:hover {
  color: lightgreen;
/*  text-decoration: underline; /* hover 시 밑줄 표시 */
}

.role-detail {
  margin: 5px 0 10px 0;
  font-size: 14px;
  color: #555;
  display: none; /* 기본 숨김 */
}

.role-item .role-video {
  display: none;       /* 기본 숨김 */
  margin-top: 1rem;    /* p와 iframe 사이 간격 */
  max-width: 100%;     /* 반응형 */
  height: auto;
}

.key-results {
/*  font-weight: 600;*/
  color: #C44C4C;
}

/*project 콘텐츠*/
.project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 15px;
}

.project-item h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none; /* 기본 밑줄 제거 */
  transition: all 0.2s ease-in-out;
  font-weight: 400; /* 추가: 폰트 두께를 얇게 */
}

.project-item h3:hover {
  color: lightgreen;
/*  text-decoration: underline; /* hover 시 밑줄 표시 */
}

.project-detail {
  margin: 5px 0 10px 0;
  font-size: 14px;
  color: #555;
  display: none; /* 기본 숨김 */
}

.project-item .project-video {
  display: none;       /* 기본 숨김 */
  margin-top: 1rem;    /* p와 iframe 사이 간격 */
  max-width: 100%;     /* 반응형 */
  height: auto;
}

.key-results {
/*  font-weight: 600;*/
  color: #C44C4C;
}

/* Info 섹션 링크 스타일 */
#info-content a {
  color: #333; /* 짙은 회색 */
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

#info-content a:hover {
  color: #90ee90; /* 라이트 그린 */
}

/* 하단바 */
.bottom-bar {
  width: 100%;
  padding: 1rem 8vw 1rem 5vw; /* top, right, bottom, left */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  z-index: 101;
}

/* 이름 영역 - 화면 좁아도 Info가 잘리지 않도록 제한 */
.bottom-bar .name {
  flex-shrink: 1;
  max-width: 55%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer; /* 추가: 클릭 가능 표시 */
}

/* 링크 영역 */
.bottom-bar .links {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-right: 10vw; /* 오른쪽 공간 추가 */
}

.bottom-bar .links a {
  text-decoration: none;
  color: #111;
  font-weight: 500;
  transition: opacity 0.3s;
}

.bottom-bar .links a:hover {
  opacity: 0.6;
}

/* 활성 탭 밑줄 */
.bottom-bar .links a.active {
  position: relative;
  color: #111; /* 원하는 색상 */
}

.bottom-bar .links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px; /* 텍스트 아래로 조정 */
  left: 0;
  width: 100%;
  height: 2px; /* 밑줄 두께 */
  background-color: #111; /* 밑줄 색상 */
  border-radius: 1px;
}

/* 떠다니는 이미지 */
.floating-images {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 100;
}

.floating-images img {
  position: absolute;
  height: auto;
  transition: transform 0.5s ease; /* 움직임만 부드럽게 */
}

.floating {
  max-width: 400px;
  max-height: 400px;
  width: auto;
  height: auto;
}

/* 반응형 조정 */
@media (max-width: 768px) {
  .floating-images img {
    width: 200px;
  }
}

@media (max-width: 500px) {
  .bottom-bar {
    padding: 0.8rem 3vw;
    font-size: 0.85rem;
  }

  .bottom-bar .links {
    gap: 1rem;
    margin-right: 3vw;
  }

  .hero h1 {
    font-size: 1.6rem;
  }

  .hero p {
    font-size: 0.95rem;
  }

  .floating-images img {
    width: 150px;
  }
}