/* font-family: "Archivo Black", sans-serif;
font-family: "Chiron Hei HK", sans-serif; */

/* 폰트 및 기본 변수 설정 */
: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;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Chiron Hei HK', sans-serif;
  overflow-x: hidden;
}

/* index.html에만 적용될 스타일 */
body.index-page {
  background-color: var(--main-color);
  color: var(--text-color);
}

h1:not(.folder-text) {
  letter-spacing: -8px;
}

/* 영문 타이틀용 두꺼운 폰트 */
h1,
.nav-link,
.link,
footer h3,
.info p {
  font-family: 'Archivo Black', sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

ul:not(.project-detail-payload) {
  list-style: none;
}

.pointer {
  cursor: pointer;
}

/* ---------------- HEADER ---------------- */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  background-color: var(--main-color);
  color: var(--text-color);
  display: flex;
  justify-content: space-between; /* 로고와 햄버거를 양끝으로 보냅니다 */
  align-items: center;
  padding: 20px 30px;
  flex-wrap: wrap; /* 추가: 네비게이션이 햄버거 아래로 자연스럽게 떨어지도록 설정 */
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--h3-size);
  letter-spacing: 1px;
}

.logo-img {
  width: 24px;
  height: 24px;
}

nav ul {
  display: flex;
  gap: 30px;
  font-size: var(--h3-size);
  letter-spacing: 1px;
}

nav ul li a:hover {
  opacity: 0.7;
}

.menu-toggle {
  cursor: pointer;
  width: 20px;
  display: none;
  margin-left: auto;
}

/* ---------------- MAIN HERO ---------------- */

main {
  margin-bottom: 100px;
}

.start {
  padding: 200px 0;
  text-align: center;
  margin: 80px 0;
  font-family: 'Archivo Black', sans-serif;
}

.start .title {
  font-size: var(--h1-size);
}

.start .subtitle {
  font-family: 'Archivo Black', sans-serif;
  font-size: var(--h3-size);
  letter-spacing: 2px;
  opacity: 0.9;
}

/* ---------------- CONTENT GRID ---------------- */
.start-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 200px; /* 각 행 사이의 간격 */
  padding: 0 20px 150px;
  max-width: 1000px;
  margin: 150px auto;
}

.start-payload-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 50px;
  opacity: 0;
  transform: translateY(50px); /* 50px 아래에 위치 */
  transition: all 0.8s ease-out; /* 0.8초 동안 부드럽게 변함 */
}

/* 화면에 나타났을 때 추가될 클래스 */
.start-payload-grid.show {
  opacity: 1;
  transform: translateY(0); /* 원래 위치로 이동 */
}

/* 세 번째 줄 위쪽 정렬 */
.start-payload-grid.top-align {
  display: flex;
  flex-direction: column; /* 가로(row) -> 세로(column)로 변경 */
  justify-content: center; /* 세로 방향 가운데 정렬 (컨테이너 높이가 있을 때) */
}

/* 두 번째 그리드에만 약간의 지연 시간 추가 */
.start-payload-grid:nth-child(2) {
  transition-delay: 0.2s;
}

/* 세 번째 그리드에 더 긴 지연 시간 추가 */
.start-payload-grid:nth-child(3) {
  transition-delay: 0.4s;
}

.payload {
  font-size: var(--h2-size);
  font-weight: 800;
  line-height: 1.3;
  flex: 1;
  text-align: center;
  word-break: keep-all;
}

.profile-img {
  width: 350px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.description-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 800px;
}

.container {
  padding: 100px 5% 0; /* 헤더 높이만큼 상단 여백 */
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------------- public page ---------------- */

/* 거대 타이틀 */
.giant-title {
  display: flex;
  justify-content: center; /* 세로 방향 가운데 정렬 (컨테이너 높이가 있을 때) */
  font-family: 'Archivo Black', sans-serif;
  font-size: 8rem;
  line-height: 1;
  padding: 20px;
  padding-bottom: 60px;
  border-bottom: 1px solid #ccc;
}

.intro-text {
  display: flex;
  justify-content: center; /* 세로 방향 가운데 정렬 (컨테이너 높이가 있을 때) */
  align-items: center;
  font-size: var(--h3-size);
  padding: 20px;
  margin: 20px;
}

/* ---------------- FOOTER ---------------- */
footer {
  text-align: center;
  padding: 210px 40px 60px;
  background-color: #021a3e; /* 바디 배경보다 조금 더 어두운 톤 */
  color: var(--text-color);
}

footer h3 {
  font-size: var(--h3-size);
  margin-bottom: 40px;
  letter-spacing: 2px;
}

.links-container {
  display: flex;
  flex-direction: column; /* 가로(row) -> 세로(column)로 변경 */
  align-items: center; /* 수평 방향 가운데 정렬 */
  justify-content: center; /* 세로 방향 가운데 정렬 (컨테이너 높이가 있을 때) */
  margin-bottom: 110px;
  /* flex-wrap: wrap; 세로 방향에서는 줄바꿈이 필요 없는 경우가 많아 생략 가능 */
}

.link {
  font-size: 80px;
  transition: 0.3s;
}

.link:hover {
  opacity: 0.7; /* 70% 투명도 */
}

.info {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 양쪽 끝으로 요소를 밀어냅니다 */
  opacity: 0.6;
  font-size: var(--h3-size);
  letter-spacing: 1px;
  width: 100%;
}

.info p {
  margin-bottom: 0;
}
