.installation-page {
  padding: 100px 2rem 1rem;
  background-color: black;
  color: white;
}

/* 상단 탭 메뉴 */
.sub-menu {
  position: sticky; /* 스크롤 내려도 상단에 붙어있게(원하면 제거 가능) */
  top: 0;
  z-index: 5;
  display: flex;
  gap: 20px;
  padding: 10px 12px 14px;
  align-items: center;
  justify-content: center;
  overflow-x: auto; /* 긴 항목도 한 줄 유지 + 가로 스크롤 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sub-menu::-webkit-scrollbar {
  display: none;
}

.sub-menu a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  line-height: 1; /* 두 줄로 꺾이는 것 방지 */
  white-space: nowrap; /* 반드시 한 줄 */
  position: relative;
  padding: 6px 2px 10px;
  opacity: 0.92;
  letter-spacing: 0.01em;
}
.sub-menu a:hover {
  opacity: 1;
}

.sub-menu a::after {
  content: "";
  position: absolute;
  left: 20%;
  bottom: 0;
  width: 60%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
  opacity: 0.9;
}
.sub-menu a.active::after,
.sub-menu a:focus-visible::after,
.sub-menu a:hover::after {
  transform: scaleX(1);
}

/* 본문 컨테이너 */
.installation-content {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
  text-align: center;
}
/* .section-title {
  font-size: 2rem;
  margin-bottom: 1rem;
} */
.section-title {
  font-size: clamp(20px, 2.6vw, 32px);
  margin: 10px 0 16px;
}
/* 작품 섹션 */
/* 각 작품 섹션: 화면을 꽉 채우는 카드(스크롤 스냅 느낌) */

/* 작품 카드 */
.project {
  display: block;
  position: relative;
  margin: 0 auto 24px;
  max-width: 950px;
  width: min(94vw, 1100px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  background: #0b0b0b;
}
/* 썸네일 이미지 */
.project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: saturate(105%);
}

/* 캡션 바: 아래 얇고 길게 */

.project .caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  color: #fff;
  font-family: "Space Mono", monospace;
}
.project .caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  color: #fff;
  font-family: "Space Mono", monospace;
}
/* 좌측 제목은 조금 더 굵게/크게 */
.caption .title {
  letter-spacing: 0.06em;
  font-size: clamp(14px, 1.8vw, 19px);
}
/* 우측 연도는 살짝 옅게 */
.caption .year {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(12px, 1.6vw, 16px);
}

/* 호버 시 살짝 확대 + 어둡게 */
.project:hover img {
  transform: scale(1.04);
  filter: brightness(0.92) saturate(110%);
}

/* 모바일 튜닝 */
@media (max-width: 768px) {
  .installation-page {
    padding: 72px 12px 12px;
  }
  .sub-menu {
    gap: 16px;
    padding: 8px 10px 12px;
  }
  .sub-menu a {
    font-size: 15.5px;
  }
  .project {
    margin-bottom: 20px;
    border-radius: 10px;
  }
  .project .caption {
    padding: 12px 14px;
  }
}

/* 아주 작은 화면(아이폰 SE 등) */
@media (max-width: 380px) {
  .sub-menu a {
    font-size: 14.5px;
  }
  .caption .title {
    font-size: 14px;
  }
  .caption .year {
    font-size: 12px;
  }
}