:root {
  --main-color: rgb(3, 45, 104);
  --text-color: #ffffff;
  --h1-size: 128px;
  --h2-size: 48px;
  --h3-size: 19px;
  --h1-msize: 64px;
  --h2-msize: 32px;
  --h3-msize: 16px;
}

.back-button {
  width: 30px;
  margin: 14px 20px 0 10px;
}

.project-header {
  padding: 0 60px 20px 0; /* 상 우 하 좌 */
  display: flex;
  align-items: center;
  width: 100%;

  /* 핵심: 자식 요소들을 양 끝(왼쪽 끝, 오른쪽 끝)으로 배치 */
  justify-content: space-between;

  /* 혹시 박스 크기가 화면을 벗어나면 아래 속성 추가 */
  box-sizing: border-box;
}

.project-header-left {
  display: flex;
}

.project-title {
  margin: 0; /* 기본 마진 제거로 정렬을 더 깔끔하게 */
}

.project-title h2 {
  font-size: var(--h2-size);
  margin-bottom: 5px;
}

.project-title h3 {
  font-size: var(--h3-size);
}

.project-logo {
  height: 150px;
  width: auto;
}

/*  */

.project-script {
  padding: 60px 60px 100px;
  margin-bottom: 200px;
  display: flex; /* 가로로 나열 */
  flex-wrap: wrap; /* 화면이 좁아지면 다음 줄로 넘어가게 설정 */
  gap: 40px;
}

.project-script.detail {
  padding: 50px 60px 100px;
  display: grid;
  gap: 30px;
}

/* 개별 폴더 링크 스타일 */
.folder-link {
  display: flex;
  flex-direction: column; /* 이미지-글자 세로 나열 */
  align-items: center; /* 이미지-글자 중앙 정렬 */
  text-decoration: none;
  color: inherit;
  width: fit-content;
  position: relative; /* 말풍선의 기준점 */
}

.folder-link img {
  width: 100px;
  height: auto;
}

.folder-link p {
  margin-top: 10px;
}

/* 마우스를 올렸을 때만 보이게 설정 */
.folder-link::after {
  content: attr(data-tooltip); /* HTML의 data-tooltip 내용을 가져옴 */
  position: absolute;
  bottom: 110%; /* 폴더 이미지 위로 띄움 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  color: #555;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 100;
}

/* 마우스 올리면 등장 */
.folder-link:hover::after {
  opacity: 1;
  visibility: visible;
  bottom: 120%; /* 살짝 떠오르는 애니메이션 */
}

/*  */
.project-script-detail {
  display: flex;
  justify-content: flex-start;
}

.project-script-detail a {
  display: flex;
  flex-direction: column; /* 폴더와 글자를 세로로 나열 */
  align-items: center; /* 👈 핵심: 폴더와 글자끼리만 중앙 정렬 */
  text-decoration: none;
  color: inherit;
  width: fit-content; /* 내용물 크기에 딱 맞춤 */
}

.project-script-detail img {
  width: 100px; /* 적절한 폴더 크기 */
  height: auto;
}

.project-script-detail p {
  margin-top: 10px; /* 폴더와 글자 사이 간격 */
}

/* 세부 프로젝트-------------- */
.project-header.detail {
  border-bottom: 1px solid #ccc;
}

.project-detail-title {
  font-size: var(--h3-size);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.project-detail-payload ul {
  padding-left: 20px;
  list-style: disc;
  display: grid;
  gap: 10px;
}

.li-detail {
  list-style: circle;
  margin-top: 10px;
}

.li-detail li {
  list-style: circle;
}