@charset "UTF-8";

/* ====================================================
   💡 1. 와누미디 디자인 시스템 - 글로벌 변수 (컬러 & 여백 & 너비)
   ==================================================== */
:root {
  /* 🎨 컬러 시스템 */
  --color-semantic-primary: #0079FF;       
  --color-semantic-static-strong: #252A2F; 
  --color-semantic-static-normal: #3C4651; 
  --color-semantic-static-neutral: #788490;

  /* 📏 8배수 픽셀(Px) 여백 시스템 */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-52: 52px;
  --space-68: 68px;
  --space-96: 96px;
  --space-128: 128px;

  /* 🖥️ 최대 너비 및 특수 계산 규격 */
  --w-max-read: 800px;
  --w-max-lg: 1100px;
  --w-max-xl: 1440px;
  --h-hero-offset: calc(100dvh - 92px);
}

/* ====================================================
   💡 2. 기본 세팅
   ==================================================== */
html { font-size: 10px !important; }

body {
  background-color: #fff;
  color: var(--color-semantic-static-normal);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 0px; background: transparent; }

a.journal-link, a.journal-link:focus, a.journal-link:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ====================================================
   💡 3. 스크롤 페이드인(Fade-in) 애니메이션
   ==================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
}

.fade-in.show,
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

/* ====================================================
   💡 4. 프로젝트 상세페이지 공통 레이아웃 시스템
   ==================================================== */
/* 📱 1. 모바일 기본 설정 (0 ~ 767px) */
.project-desc {
  max-width: 800px;
  margin: 0 auto var(--space-32) auto;
  font-size: 1.7rem; 
  font-weight: 400; 
  line-height: 1.8; 
  letter-spacing: 0em;
  color: var(--color-semantic-static-normal);
}

.project-desc p:not(:last-child) {
  margin-bottom: var(--space-24);
}

.project-media {
  width: 100%;
  margin-bottom: var(--space-32);
  /* 💡 추가: 부모 요소에 숨어있는 미세한 텍스트 렌더링 여백 완전 제거 */
  line-height: 0; 
  font-size: 0;
}

.project-media img,
.project-media video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 🖥️ 2. 데스크탑 설정 (768px 이상) */
@media (min-width: 768px) {
  .project-desc {
    margin: 0 auto var(--space-68) auto; 
  }
  
  .project-desc p:not(:last-child) {
    margin-bottom: var(--space-32); 
  }

  .project-media {
    margin-bottom: var(--space-68); 
  }
}

/* ====================================================
   💡 5. 썸네일 공통 제어 (R값, 비율, 호버 애니메이션 격리)
   ==================================================== */
.thumb-wrap {
  /* 💡 썸네일 최소 곡률 8px 고정 (clamp 제거) */
  border-radius: 8px !important;
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #f3f4f6;
}
.thumb-wrap.ratio-3x4 { aspect-ratio: 3 / 4; }
.thumb-wrap.ratio-16x9 { aspect-ratio: 16 / 9; }

.thumb-wrap img {
  width: 100%;
  display: block;
  border-radius: 0.21vw !important;
  transition: transform 500ms ease-out;
  will-change: transform;
}
.thumb-wrap.cover img { height: 100%; object-fit: cover; }

/* 메인 슬라이더 전용 애니메이션 */
.slider-img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.21vw !important;
  opacity: 0; 
  transition: opacity 800ms ease-in-out, transform 800ms ease-out;
  will-change: transform, opacity;
}

.slider-img.active {
  opacity: 1;
  z-index: 1;
}

/* 🖥️ 오직 마우스가 있는 데스크탑 환경에서만 확대 호버 작동 */
@media (hover: hover) {
  .group:hover .thumb-wrap img { transform: scale(1.08); }
  .group:hover .slider-img.active { transform: scale(1.08); }
}

/* ====================================================
   💡 6. 와누미디 타이포그래피 시스템 (Typography)
   ==================================================== */
.text-d1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; line-height: 1.6; letter-spacing: -0.0194em; }
.text-d2 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.6; letter-spacing: -0.0194em; }
.text-t1 { font-size: 1.7rem; font-weight: 700; line-height: 1.2; letter-spacing: 0em; }
.text-b1 { font-size: 1.7rem; font-weight: 400; line-height: 1.6; letter-spacing: 0em; }
.text-b2 { font-size: 1.7rem; font-weight: 400; line-height: 1.8; letter-spacing: 0em; }
.text-b3 { font-size: 1.4rem; font-weight: 400; line-height: 1.6; letter-spacing: 0em; }
.text-l1 { font-size: 1.7rem; font-weight: 400; line-height: 1.2; letter-spacing: 0em; }
.text-c1 { font-size: 1.3rem; font-weight: 400; line-height: 1.2; letter-spacing: 0.0311em; }

/* ====================================================
   💡 7. UI 컴포넌트: 헤더 & 푸터 & 버튼 (모바일 깜빡임 방지 및 여백 해결)
   ==================================================== */
.header-logo {
  display: flex;
  align-items: center;
  /* 💡 CSS에서 간격을 4px로 중앙 통제합니다 */
  gap: 4px;
  color: var(--color-semantic-static-strong);
  transition: color 0.3s ease;
  white-space: nowrap; 
}

/* 💡 CSS에서 로고 크기를 20px로 중앙 통제합니다 */
.header-logo svg { 
  width: 20px; 
  height: 20px; 
  fill: currentColor; 
}

.header-nav {
  display: flex;
  gap: 20px;
  color: var(--color-semantic-static-strong);
}

.header-link { transition: color 0.3s ease; }

/* 상세페이지 하단 네비게이션 풋터 */
.project-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* 📱 모바일 Safari 하단바 대응 안전패딩 기본 탑재 */
  padding-top: var(--space-24);
  padding-bottom: calc(env(safe-area-inset-bottom) + 24px); 
  border-top: 1px solid color-mix(in srgb, var(--color-semantic-static-neutral) 30%, transparent);
}

.nav-btn {
  display: flex;
  align-items: center;
  /* 💡 버튼 안쪽 간격 10 -> 8 수정 */
  gap: 8px;
  color: var(--color-semantic-static-neutral);
  transition: color 0.3s ease;
  line-height: 1; 
}
.nav-btn svg { width: 16px; height: 16px; fill: currentColor; }

.btn-more {
  display: flex;
  align-items: center;
  /* 💡 버튼 안쪽 간격 10 -> 8 수정 */
  gap: 8px;
  color: var(--color-semantic-static-neutral);
  transition: color 0.3s ease;
}

/* 🖥️ 오직 마우스가 있는 데스크탑에서만 컬러 체인지 호버 작동 (모바일 깜빡임 해결) */
@media (hover: hover) {
  .header-logo:hover { color: var(--color-semantic-primary); }
  .header-link:hover, .header-link.active:hover { color: var(--color-semantic-primary) !important; }
  .nav-btn:hover { color: var(--color-semantic-primary); }
  .btn-more:hover { color: var(--color-semantic-primary); }
}

/* 🖥️ 데스크탑 전용 풋터 여백 리셋 */
@media (min-width: 768px) {
  .project-footer {
    padding-bottom: var(--space-24);
  }
}

/* ====================================================
   💡 8. 플로팅 버튼 애니메이션 상태 제어
   ==================================================== */

/* 기본 최초 진입 (확장) 상태 */
#floating-contact-btn {
  color: #fff !important; 
  /* 💡 16 + 56(텍스트) + 12 + 24 + 16 = 124px 로 축소 완료 */
  width: 124px; 
}
#floating-contact-btn svg {
  stroke: #fff !important;
}

#floating-contact-btn .expanded-text {
  /* 💡 b3(14px) 4글자 너비에 딱 맞게 56px로 축소 완료 */
  width: 56px;
  opacity: 1;
}
#floating-contact-btn .icon-wrapper {
  margin-left: 12px;
}

/* 3초 후 원형(Circle) 상태 */
#floating-contact-btn.is-circle {
  width: 56px; 
}
#floating-contact-btn.is-circle .expanded-text {
  width: 0;
  opacity: 0;
}
#floating-contact-btn.is-circle .icon-wrapper {
  margin-left: 0; 
}

/* 스크롤 방향 무관, 마우스 호버 시에만 다시 확장 */
#floating-contact-btn.is-circle:hover {
  width: 124px; /* 💡 호버 시에도 124px 로드 */
}
#floating-contact-btn.is-circle:hover .expanded-text {
  width: 56px; /* 💡 텍스트 너비 56px 로드 */
  opacity: 1;
}
#floating-contact-btn.is-circle:hover .icon-wrapper {
  margin-left: 12px;
}

/* 화면 표시 상태 */
#floating-contact-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ====================================================
   💡 9. 썸네일 이미지 비율 분리 제어
   ==================================================== */

/* 1. Work (Project) 리스트: 무조건 3:4 비율 강제 유지 */
#dynamic-project-list img {
  width: 100%;
  aspect-ratio: 3 / 4; 
  object-fit: cover;   
}

/* 2. Archive (Journal) 리스트: 원본 이미지 비율 랜덤 유지 */
#dynamic-journal-list img {
  width: 100%;
  height: auto;
  aspect-ratio: auto; /* 3:4 비율이 걸리지 않도록 해제 */
}

/* 3. 상세페이지 이미지는 무조건 원본 비율(auto) 유지 */
.project-media img,
.journal-media img {
  width: 100%;
  height: auto !important; 
  aspect-ratio: auto !important; 
}