/* -----------------------------------------
   0. 변수 및 초기화 (반응형 텍스트 적용)
----------------------------------------- */
:root {
  --bg-color: #000000;
  --point-color: #ffd000; 
  --point-color2: #fff5bb;
  --point-white: rgba(255, 255, 255, 0.05); 
  --text-main: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.7);
  --text-mute: rgba(255, 255, 255, 0.4);
  
  /* 기본 폰트 사이즈 (PC 기준) */
  --fs-title: 34px; 
  --fs-sub: 18px; 
  --fs-body: 15px; 
  --fs-small: 11px;
  --fs-nav: 10px;
}

/* 1400px 이하 노트북/태블릿 */
@media (max-width: 1400px) {
  :root {
    --fs-title: 28px;
    --fs-sub: 16px;
    --fs-body: 14px;
    --fs-small: 10px;
  }
}

/* 768px 이하 모바일 */
@media (max-width: 768px) {
  :root {
    --fs-title: 22px;
    --fs-sub: 14px;
    --fs-body: 13px;
--fs-nav: 9px;
/* 1. 상하단바 전체 여백 줄임 */
  header, .bottom-nav {
    padding: 0 0px;
  }
  }
}

/* 폰트 설정 */
@font-face { font-family: 'Paperozi'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
.press-start-2p-regular {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
}


* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: 'Pretendard', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  overflow-x: hidden;
  line-height: 1.5;
  scroll-behavior: smooth;
}

/* -----------------------------------------
   1. 페이지 전환 & 네비게이션
----------------------------------------- */
body { opacity: 0; transition: opacity 0.8s ease-in-out; }
body.loaded { opacity: 1; }

header, .bottom-nav {
  position: fixed; left: 0; right: 0; z-index: 9999;
  padding: 0 20px; display: flex; justify-content: space-between; align-items: center;
  mix-blend-mode: exclusion;
  background: rgba(0, 0, 0, 0.1);
}

header { top: 0; height: 70px; }
.bottom-nav { bottom: 0; height: 60px; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }

.로고 { cursor: pointer; display: flex; align-items: center; padding: 0 10px; }
.로고 img { height: 35px; }

.nav-links a, .bottom-nav a {
  display: inline-block; /* 중요: padding이 사방으로 잘 먹히게 합니다 */
  padding: 15px 20px;    /* 위아래 15px, 좌우 20px씩 클릭 영역 확장 */
  margin-left: 0;        /* 기존 margin 대신 padding으로 간격을 조절합니다 */
  
  color: #fff; 
  text-decoration: none; 
  font-size: var(--fs-nav);
  letter-spacing: 1px; 
  font-weight: 300; 
  transition: 0.3s;
  opacity: 0.7;
}

/* 간격 조절: 첫 번째 링크를 제외한 나머지에 왼쪽 여백 주기 */
.nav-links a + a, .bottom-nav a + a {
  margin-left: 10px; 
}

.nav-links a:hover, .bottom-nav a:hover { 
  color: var(--point-color); 
  opacity: 1; 
}
/* -----------------------------------------
   2. Home 섹션 (사진 바닥 고정 & 텍스트 중앙)
----------------------------------------- */
.첫화면 {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #000; /* 영상 로딩 전 검정색 */
}


/* ★ 배경 영상: 유령처럼 뒤로 보내서 화면 꽉 채우기 */
.배경-영상 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 비율 유지하며 꽉 채움 */
  z-index: 1;
}


.배경-영상 {
  /* ... 기존 설정들 (position, width, height 등) ... */
  
  filter: blur(1px); 
  
  /* 블러를 넣으면 외곽선이 지저분해질 수 있어서 살짝 키워주는 게 팁! */
  transform: scale(1.1); 
}

/* 글자 가독성을 위한 검은 막 */
.영상-오버레이 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* 너무 밝으면 0.5로 올리세요 */
  z-index: 2;
}

/* 메인 문구: 무조건 정중앙 */
.메인-문구 {
  position: relative;
  z-index: 10;
  color: #ffffff;
  text-align: center;
  font-family: 'Paperozi';
  font-size: var(--fs-title);
  line-height: 1.6;
  word-break: keep-all;
  max-width: 900px;
  margin: 0 auto;
}
/* 프로필 사진: 왼쪽 아래 고정 */
.프로필-사진 {
  position: absolute;
  bottom: 0;
  left: 5vw;
  width: 21vw;
  height: auto;
  min-width: 220px;
  z-index: 5;
  pointer-events: none;
}

/* 화살표: 하단 중앙 고정 */
.scroll-down-arrow {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 15px;
  height: 15px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  animation: scroll-move 1.5s infinite ease-in-out;
  z-index: 11;
}

@keyframes scroll-move {
  0% { opacity: 0; transform: translate(-50%, -10px) rotate(45deg); }
  50% { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }
  100% { opacity: 0; transform: translate(-50%, 10px) rotate(45deg); }
}
/* -----------------------------------------
   3. Resume 섹션 (이력서 이미지 - 기존 유지)
----------------------------------------- */
.이력서 { background-color: #fff; line-height: 0; width: 100%; }
.이력서 img { width: 100%; height: auto; display: block; }
/* -----------------------------------------
   3. 인덱스 (그리드 최적화)
----------------------------------------- */
/* 1. 부모 섹션이 화면 전체(100vh)를 차지해야 중앙을 잡을 수 있습니다 */
.인덱스 { 
  background-color: var(--bg-color); 
  width: 100%;
  height: 100vh; /* 화면 높이 꽉 채우기 */
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2. 안내 문구: 화면 정중앙 배치 */
.인덱스-안내-문구 {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); /* 정확한 기하학적 중앙 */
  
  width: 90%; /* 모바일 대응을 위해 100% 대신 90% 권장 */
  max-width: 800px; 
  text-align: center; 
  font-size: var(--fs-sub); 
  font-weight: 300;
  line-height: 1.8; /* 줄 간격을 넓혀 가독성 확보 */
  
  opacity: 0; /* JS 애니메이션 전에는 숨김 */
  z-index: 10; 
  pointer-events: none;
  
  /* 글자가 겹칠 때 대비하여 배경색을 살짝 깔아주면 더 안심됩니다 (선택사항) */
  /* background: rgba(0,0,0,0.5); */
}

/* 인덱스 다음 섹션인 #링크가 위로 치고 올라오지 못하게 강제 설정 */
#링크 {
  position: relative;
  z-index: 10;
  background-color: var(--bg-color);
  /* 중요: 위 섹션과 물리적 거리를 둡니다 */
  clear: both; 
}


.작품-그리드 {
  position: absolute;
  top: 50vh; left: 50vw;
  transform: translate(-50%, -50%);
  width: 90vw; 
  max-width: 1600px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2vw;
  padding: 0 2vw;
  box-sizing: border-box;
  opacity: 0;
  z-index: 5;
  /* 끊김 방지 최적화 */
  will-change: transform, opacity;
}

.작품-아이템 { display: flex; flex-direction: column; text-decoration: none; color: inherit; }

.프레임 { 
  width: 100%; 
  aspect-ratio: 3 / 4.2; 
  overflow: hidden; 
  background: #111; 
}

.프레임 img { 
  width: 100%; height: 100%; object-fit: cover; 
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1); 
}

.작품-아이템:hover .프레임 img { transform: scale(1.1); }

.정보 { width: 100%; text-align: center; padding: 20px 0; background: transparent; }
.정보 .case { display: block; font-size: var(--fs-small); color: var(--point-color2); margin-bottom: 8px; }
.정보 .title { font-size: var(--fs-body); margin-bottom: 8px; color: #fff; word-break: keep-all; }
.정보 .desc { font-size: var(--fs-small); opacity: 0.4; }

/* -----------------------------------------
    4. 하단 및 상세 페이지 - 가로 너비 및 마진 최적화
----------------------------------------- */
.하단 { 
  position: relative; 
  width: 100%;
  height: 100vh; 
  display: flex;
  justify-content: center;
  align-items: center; 
  overflow: hidden;
  background-color: #000;
}

/* 배경 및 오버레이 (기존 유지) */
.하단-배경-영상 {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.하단-오버레이 {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 2;
  background: linear-gradient(
    to top, 
    rgba(159, 252, 255, 0.1) 0%,   /* 맨 위: 완전 투명 */
    rgba(0, 0, 0, 0.4) 50%, /* 중간: 반투명 (영상도 살짝 보임) */
    rgba(0, 0, 0, 1) 100%   /* 맨 아래: 완전 불투명 (캐릭터가 서 있는 바닥) */
  );
  
  z-index: 2; /* 영상(1)보다는 위, 텍스트(10)보다는 아래 */
  pointer-events: none; /* 오버레이 때문에 클릭이 안 되는 현상 방지 */
}s



.하단-텍스트 {   width: 100%;  font-size: var(--fs-body);   font-weight: 300;   line-height: 1.8;   margin-bottom: 50px; /* 마진 줄임 */  color: #fff;   text-align: center;}
.하단-텍스트 p {  margin: 0 auto;  text-align: center;}

.사이트-링크 {   text-decoration: none;   display: inline-block;   margin-bottom: 10px;   color: var(--point-color2); }
/* Thank you 문구 */
.thank-you {  display: block;  font-size: var(--fs-sub);  margin-top: 100px;  margin-bottom: 0px;
  position: relative;  z-index: 10;  opacity: 0;  color: var(--text-main); font-weight: 600;}

/* [중앙] 텍스트 레이어 */
.하단-중앙-컨텐츠 {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1000px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.하단-이미지 {
  position: absolute;
  bottom: 0; 
  left: 50%; /* 화면 가로 50% 지점 */
  /* 좌측으로 본인 너비 절반만큼 이동(-50%) + 바닥 아래 대기(200px) */
  transform: translate(-50%, 100px); 
  width: 15vh;
  opacity: 0;
  z-index: 4;s
  
}


/* 상세 페이지 이미지 가로 너비 최적화 */
.content-section {   width: 100%;   display: flex;   flex-direction: column;   align-items: center;   overflow-x: hidden; /* 가로 스크롤 방지 */}

.project-img { 
  /* 100vw 대신 100%를 사용하여 스크롤바 간섭 제거 */
  width: 100%; max-width: none;   display: block;   border: none;   height: auto; /* 비율 유지 */}


.하단.active .하단-이미지 {
  /* pop-up은 0.5초 동안 한 번, driving은 0.6초마다 무한 반복 */
  animation: 
    pop-up 2s ease-out forwards, 
    driving 0.6s ease-in-out 2s infinite; 
}

.하단.active .thank-you {
  /* 0.8초 동안 나타나는데, 앞의 자동차 애니메이션이 끝날 때쯤인 1.0초 뒤에 시작 */
  animation: fade-in 0.8s ease-out 2.0s forwards !important;
  display: block; /* 혹시 모르니 추가 */
}

/* 아래 키프레임이 코드에 남아있는지 꼭 확인! */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 0.8; transform: translateY(0); }
}

/* 1. 팝업: 바닥에서 솟아오르며 등장 */
@keyframes pop-up {
  0% {
    transform: translate(-50%, -200px) scale(0);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -80px) scale(0.8);
    opacity: 1;
  }
}

/* 2. 주행: 위아래로 살짝살짝 흔들림 (달리는 느낌) */
@keyframes driving {
  0%, 100% {
    transform: translate(-50%, -80px) scale(0.8); /* 기본 위치 */
  }
  50% {
    transform: translate(-50%, -75px) scale(0.8); /* 살짝 위로 (노면 반동) */
  }
}

.포인트-텍스트 { color: var(--point-color); font-family: 'Paperozi'; font-weight: 800; }
/* -----------------------------------------
   5. 플로팅 스크롤 버튼 (가독성 강화 버전)
----------------------------------------- */
.floating-controls {
  position: fixed;
  right: 40px;
  bottom: 90px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9998;


}

.btn-scroll {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  
  
  /* [배경] 블러는 유지하되, 약간의 어두운 톤을 깔아 흰 배경 대비 확보 */
  background: rgba(0, 0, 0, 0.2); 

  -webkit-backdrop-filter: blur(15px);
  
  /* [중요] 선과 글자색을 완전한 화이트가 아닌 약간의 대비가 있는 화이트로 */
  border: 1px solid rgba(255, 255, 255, 0.5);
  
  /* [기본 상태] 투명도 0.5 */
  opacity: 0.5;
  
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  
}

/* [호버 상태] 마우스 올리면 선명하게 */
.btn-scroll:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.6); /* 호버 시에는 확 어둡게 해서 글자를 강조 */
  border: 1px solid rgba(255, 255, 255, 0.8);
  
}

.btn-text {
  font-size: 11px;
  font-weight: 600;
  color: #fff; /* 호버 전엔 버튼 투명도(0.5) 때문에 흐리게 보임 */
  letter-spacing: 0.5px;
  pointer-events: none;
  
}

/* 호버 시 글자색 확실히 강조 */
.btn-scroll:hover .btn-text {
  color: #ffffff;
}

/* -----------------------------------------
   커서
----------------------------------------- */

/* 기본 마우스 커서 숨기기 */
html, body, a, button {
  cursor: none !important;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode:difference;
  opacity: 0;
  transition: background-color 0.3s ease, opacity 0.3s ease;

  /* 1. 배경색: 투명도가 있어야 블러가 보입니다 (하단바처럼 연한 검정 추천) */
  background: rgba(255, 255, 255, 0.9); 

  /* 2. 핵심: 백그라운드 블러 적용 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 색상만 클래스로 제어 */
.cursor.active {
  background-color: var(--point-color); 
  mix-blend-mode:hard-light;
}
.로고, .작품-아이템, .사이트-링크 {
  cursor: pointer; /* 이 설정이 되어 있는 모든 곳에서 커서가 커집니다! */
}