/* 폰트 설정 (ABCArealVariable 430 + 고딕A1 500 섞어짜기) */
@font-face {
  font-family: 'ABCAreal';
  src: url('fonts/ABCArealVariable.woff2') format('woff2');
  font-weight: 500; 
  font-variation-settings: "wght" 430; 
  font-style: normal;
  size-adjust: 105%;
  unicode-range: U+0000-002F, U+003A-00FF; 
}

/* 웹사이트 전체 글꼴 및 스크롤 설정 */
body {
  margin: 0;
  font-family: 'ABCAreal', 'Gothic A1', sans-serif;
  font-weight: 500;
  overflow-x: auto;  
  overflow-y: hidden; 
  background-color: #dbdcdc;
}

/* 텍스트 및 링크 기본 포맷팅 초기화 */
h1, p, a {
  font-weight: 500;
  margin: 0; 
  text-decoration: none; 
  color: #000000;
}

/* 1. 좌측 상단 고정 영역 (타이틀 + 메뉴 묶음) */
.header {
  position: fixed;
  top: 2rem;
  left: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column; 
  align-items: flex-start; 
  gap: 4rem; /* Joonmo Joo와 Info 사이의 간격 */
}

/* 2. Info, Works 메뉴 정렬 */
.nav {
  display: flex;
  flex-direction: column;
  gap: 0.3rem; 
}

/* 3. 기본 버튼 스타일 벗겨내기 */
.nav-button {
  font-family: inherit; 
  font-weight: 500;
  font-size: 1rem; 
  color: #000000;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

/* 4. 클릭이 유지되는 순간에만 마젠타 100 적용 */
.home-button:active, .nav-button:active {
  color: #EC008C; 
  text-shadow: none;
  transition: none;
}

/* 5. 좌측 하단 연락처 고정 */
.contact {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 9999;
  font-weight: 500;
  margin: 0;
}
.contact-link {
  font-weight: 500;
  color: #000000;
  text-decoration: none;
}
.contact-link:active {
  color: #EC008C; 
}

/* 6. 우측 상단 언어 토글 버튼 */
.lang-button {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 9999;
  font-family: inherit;
  font-weight: 500;
  font-size: 1rem;
  color: #000000;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.lang-button:active {
  color: #EC008C; 
}

/* =========================================
   여기서부터 새롭게 추가된 Works 갤러리 영역 
   ========================================= */

/* 웹사이트 전체 글꼴 및 스크롤 설정 (가로 스크롤 차단) */
body {
  margin: 0;
  font-family: 'ABCAreal', 'Gothic A1', sans-serif;
  font-weight: 500;
  overflow-x: hidden; /* 가로 스크롤 강제 차단 */
  overflow-y: auto;   /* 넘쳐서 아래로 줄바꿈되면 세로 스크롤 허용 */
  background-color: #dbdcdc;
}

/* ... (중간의 header, nav, contact, lang-button 코드는 그대로 둡니다) ... */
/* 7. 메인 뼈대 (시작점을 Info 상단과 일치시킴) */
.horizontal-scroll-wrapper {
  display: block;
  /* Info 버튼의 정확한 Y좌표 계산: 홈버튼 top(2rem) + 글자 높이(약 1.2rem) + gap(4rem) = 7.2rem */
  padding-top: 7.2rem; 
  padding-left: 14rem; 
  padding-right: 2rem; 
  box-sizing: border-box;
  min-height: 100vh;
}

/* 8. Works 갤러리 (하단 정렬) */
.works-gallery {
  display: flex;
  flex-wrap: wrap; 
  align-items: flex-end; /* 상단 정렬(flex-start)에서 하단 정렬로 변경 */
  gap: 1rem; 
}

/* 9. 썸네일 이미지 크기 (A3, A4, A5 폭 비율 유지하며 전체 축소) */
.thumb-img {
  height: auto;
  display: block;
  cursor: pointer;
}
/* S를 10rem으로 잡고 1.414배씩 키운 콤팩트 사이즈 */
.size-l { width: 20rem; }    /* 약 320px */
.size-m { width: 14rem; }  /* 약 225px */
.size-s { width: 10rem; }    /* 약 160px */
.size-xs { width: 7rem; }  /* A6 폭 비율 (추가됨) */
/* 10. 썸네일 호버 시 나타나는 프로젝트 제목 */
.hover-title {
  position: fixed;
  top: 2rem;       /* Joonmo Joo 홈버튼과 완벽하게 같은 높이 */
  left: 14rem;     /* 썸네일 시작점(14rem)과 완벽하게 같은 좌측 선 */
  z-index: 9999;
  font-weight: 500;
  color: #bbbbbb;
  mix-blend-mode: multiply;
  pointer-events: none; /* 텍스트 위에 마우스가 걸리지 않게 투과시킴 */
}
/* 11. 홈 화면 랜덤 부유 이미지 레이아웃 */
.home-container {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* 빈 공간 클릭 시 뒤쪽 Info, Works 버튼이 눌리도록 통과시킴 */
  z-index: 9999; /* 메뉴 위로 덮어씌움 */
}

.random-img {
  position: absolute;
  cursor: pointer;
  border: 0.2rem solid #ffffff; 
  background-color: #ffffff;    
  pointer-events: auto; /* 이미지는 클릭되도록 기능 복구 */
}

.random-img:hover {
  z-index: 10000; 
}
/* --- Detail Page Grid System --- */
.detail-container {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  max-width: 70rem;
  padding-bottom: 5rem;
}

.detail-top {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.detail-thumb {
  flex-shrink: 0;
  display: block;
}

/* 텍스트 폭 38rem 고정 */
.detail-text {
  margin-top: 0;
  max-width: 38rem; 
}

/* 1rem, 블랙, 1.2 행간, 단어 줄바꿈 유지 */
.detail-title {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 0.3rem 0;
  color: #000000;
  line-height: 1.2;
  word-break: keep-all;
  hyphens: none;
  white-space: pre-wrap;
}

/* 1rem, 블랙, 1.5 행간, 단어 줄바꿈 유지 */
.detail-desc {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  color: #000000;
  line-height: 1.5;
  word-break: keep-all;
  hyphens: none;
  white-space: pre-wrap;
}

/* 상세 이미지 폭 41.5rem 고정 (20 + 20 + 여백 1.5) */
.detail-images {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 41.5rem; 
}

.img-full {
  width: 41.5rem;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.img-half {
  width: 20rem;
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* --- Mobile Responsive (768px 이하일 때 1단으로 자동 재조립) --- */
@media screen and (max-width: 768px) {
  .detail-top {
    flex-direction: column;
    gap: 1.5rem;
  }
  .detail-text {
    max-width: 100%;
  }
  .detail-images {
    width: 100%;
  }
  .img-full, 
  .img-half, 
  .size-l.detail-thumb {
    width: 100%;
    height: auto;
  }
}