@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url('./font/Pretendard-Black.woff2') format('woff2'), url('./font/Pretendard-Black.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url('./font/Pretendard-ExtraBold.woff2') format('woff2'), url('./font/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url('./font/Pretendard-Bold.woff2') format('woff2'), url('./font/Pretendard-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url('./font/Pretendard-SemiBold.woff2') format('woff2'), url('./font/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url('./font/Pretendard-Medium.woff2') format('woff2'), url('./font/Pretendard-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url('./font/Pretendard-Regular.woff2') format('woff2'), url('./font/Pretendard-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url('./font/Pretendard-Light.woff2') format('woff2'), url('./font/Pretendard-Light.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url('./font/Pretendard-ExtraLight.woff2') format('woff2'), url('./font/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url('./font/Pretendard-Thin.woff2') format('woff2'), url('./font/Pretendard-Thin.woff') format('woff');
}




body{
  font-family: 'Pretendard';
  margin: 0px;
  padding: 0px;
  background: rgba(0,0,0,1);
  animation: gradientChange 10s infinite; 
}

@keyframes gradientChange {
  0%, 100% {
    background: rgba(0,0,0,1);
  }
  33.3% {
    background: rgb(8, 0, 32);
  }
  66.6% {
    background: rgb(24, 0, 6);
  }
}


.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
}


.mainTitle {
  position: relative;     /* 화면 상단에 고정 */
  top: 100px;              /* 상단과의 간격 0으로 설정 */
  left: 0;             /* 왼쪽과의 간격 0으로 설정 */
  width: 100%;         /* 화면 전체 너비 */
  height: 80px;       /* 높이 100px 설정 */
  /* background-color: rgb(69,131,181); 배경색 파란색 */
  background: black; /*linear-gradient(120deg, rgba(167,199,226,1) 0%, rgba(176,210,226,1) 12%, rgba(69,131,181,1) 35%, rgba(69,131,181,1) 64%, rgba(50,94,140,1) 85%, rgba(8,65,107,1) 100%);*/
  color: white;        /* 글자색 흰색 (필요하다면 변경) */
  line-height: 80px;  /* 글자를 상자 중앙에 위치 */
  text-align: center;  /* 글자를 상자 중앙에 위치 */
  font-size: 3em;      /* 글자 크기 조절. 필요에 따라 변경 가능 */
  z-index : 200;
  font-weight: 900;
  padding : 0;
}

.containerForWorkItems {
  padding: 250px 0 0 0;  /* 상단에 100px 패딩 추가, 나머지는 0 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 가운데 정렬 */
  gap: 80px 100px; /* 아이템 간 간격 */
  margin: 0 auto; /* 컨테이너를 화면 중앙에 위치시킴 */
}


.workItem {
  position: relative; 
  width: 300px;
  height: 390px;
  margin: 10px; 
  box-sizing: border-box;

  /* background-color: rgba(100, 100, 100, 0.2); 
  border-radius: 20px;
  border: 1px solid rgba(100,100,100,0.7); */


}


.workItemDecor {

  width: 300px;
  height: 390px;
  top : 0px;
  position: absolute; 
  box-sizing: border-box;

  background-color:  rgba(0, 0, 0, 0.2); 
  border-radius: 20px;
  border: 1px solid rgba(100,100,100,0.7);

  pointer-events: none;
}

/* 애니메이션 효과 정의 */
@keyframes shiningBorder {
  0%,100% {
    box-shadow: 1px 1px 2px 1px rgba(0, 51, 117, 0.9);
  }
  25% {
    box-shadow: -1px 1px 2px 1px rgba(158, 0, 79, 0.9);
  }
  50% {
    box-shadow: -1px -1px 2px 1px rgba(247, 202, 6, 0.9);
  }
  75% {
    box-shadow: 1px -1px 2px 1px rgba(0, 138, 96, 0.9);
  }

}

.workItem:hover .workItemDecor {
  animation: shiningBorder 0.6s infinite linear;
}


.workItem a {
  display: flex;
  align-items: center; /* 툴팁 내용을 중앙에 배치 */
  flex-direction: column; /* 아이템들을 상하 방향으로 배치 */

  text-decoration: none;  /* 하이퍼링크 밑줄 제거 */
  color: inherit;         /* 텍스트 색상 상속 */
}

.imageWrapper {
  position: relative; 
  /* display: inline-block; */
  vertical-align: top;
  height: 300px;

}


.imageWrapper .icons {
  width: 270px;
  height: 270px;  
  margin-top : 15px;

  object-fit: cover;   /* 이미지를 적절하게 축소/확대 */
  object-position: center; /* 이미지의 중심을 기준으로 보여줌 */
  border-radius: 8px;  /* 모서리 둥글게 */  
}



.imageWrapper .tooltip {
  width: 270px;
  height: 270px;  
  top: 15px;  /* 이 부분 추가: icons의 margin-top 값을 동일하게 적용 */

  padding : 10px;
  position: absolute; /* 절대 위치 설정 */
  box-sizing: border-box; /* 이 부분 추가 */

  border-radius: 15px;  /* 모서리 둥글게 */  
  background-color: rgba(255, 255, 255, 0.8); /* 흰색 반투명 배경 */
  color: black;
  display: flex;
  justify-content: center;
  align-items: center; /* 툴팁 내용을 중앙에 배치 */
  
  opacity: 0; /* 기본 상태에서는 숨김 */
  transition: opacity 0.3s; /* 투명도 전환 효과 */
  pointer-events: none; /* 툴팁을 통해 하위 요소에 마우스 이벤트를 전달 */

}


.workItem:hover .tooltip {
  opacity: 1; /* 마우스 오버 시 툴팁 표시 */
}



.itemText {
  text-align: center;  
}

.itemText.title {
  font-size : 1.2em;
  padding: 10px 0px;  /* 상하 간격 추가 */
  color :rgb(255, 255, 255);
  font-weight: 600;
}

.itemText.date {
  font-size : 0.7em;
  padding: 1px 0;  /* 상하 간격 추가 */
  color :rgb(170, 170, 170);
  font-weight: 500;
}