/* ============================================================================
   Noah W. Jin — Portfolio
   Desktop 전용 스타일시트 (Figma 데스크탑 시안 기준, 1440px 캔버스)
   - 모바일 시안은 아직 전달되지 않아 별도 스타일은 추가하지 않았습니다.
     추후 mobile.css로 분리해 독립적으로 구현할 예정입니다.
   ============================================================================ */

@font-face {
  /* Google Fonts CDN을 사용합니다 (아래 index.html의 <link> 참고).
     프로젝트를 완전히 오프라인으로 쓰고 싶다면 Inter 폰트 파일(Black 900 포함)을
     내려받아 /fonts 폴더에 넣고 이 부분을 로컬 @font-face로 교체해 주세요. */
}

:root {
  --canvas-width: 1440px;
  --canvas-height: 1024px;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-muted: #8b7c7c; /* INFO / Contact / bio 텍스트 색상 (시안에서 추출) */
  --font-inter: "Inter", "Inter Placeholder", sans-serif;
  --edge-gap: 30px; /* 시안 전반에 반복되는 바깥 여백 단위 */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-inter);
  width: 100%;
  overflow-x: hidden;
}

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

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

img {
  display: block;
  max-width: none;
}

/* ----------------------------------------------------------------------------
   캔버스 래퍼: 데스크탑 시안은 1440px 고정 폭 기준으로 그대로 구현합니다.
   (뷰포트가 더 넓으면 좌우 여백이 생기고, 더 좁으면 가로 스크롤이 생깁니다.
    "일반적인 반응형 관행"으로 임의로 줄이지 않기 위한 의도적인 선택입니다.)
---------------------------------------------------------------------------- */
/* .canvas는 [콘텐츠, 검은 저작권 바(footer)] 두 요소를 세로로 쌓는
   flex 컨테이너입니다. 창(뷰포트)이 콘텐츠보다 더 클 때, 남는 공간이
   저작권 바 "뒤"(아래)가 아니라 콘텐츠와 저작권 바 "사이"에 생기도록 해서,
   저작권 바가 항상 화면 맨 아래에 붙어 있게 만듭니다 (= 뒤에 숨어야 할
   고정 워드마크가 저작권 바 밖으로 삐져나오지 않도록 하는 핵심 장치).
   CONTACT 페이지처럼 콘텐츠 자체 높이가 창 높이보다 짧을 때 이 장치가
   없으면, 저작권 바 아래에 빈 흰 공간이 남아서 그 구간에서 워드마크가
   다시 보이는 버그가 생깁니다. */
.canvas {
  position: relative;
  width: var(--canvas-width);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}

/* 홈 화면 전용: 갤러리 사진들이 position:absolute라 자체적으로 높이를
   만들지 못하므로, 시안 캔버스 높이(1024px)와 창 높이(100vh) 중 더 큰 값을
   최소 높이로 잡아줍니다. */
.canvas--home {
  min-height: max(var(--canvas-height), 100vh);
}

/* ----------------------------------------------------------------------------
   고정 크롬: INFO 탭 / Contact 탭 / 하단 초대형 워드마크
   모든 페이지에서 동일한 화면상 위치에 고정되어(scroll에 영향받지 않음) 표시됩니다.
   1440px 캔버스를 기준으로 뷰포트 중앙 정렬되도록 left:50% + margin-left 트릭 사용.
---------------------------------------------------------------------------- */
.side-tab {
  position: fixed;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  z-index: 60;
  white-space: nowrap;
}

.side-tab--info {
  left: 50%;
  margin-left: -690px; /* 30px - 720px (canvas center) */
}

.side-tab--contact {
  left: 50%;
  margin-left: 661px; /* 1381px - 720px */
}

.side-tab:hover {
  color: var(--color-black);
}

/* 현재 보고 있는 페이지의 탭은 검정색으로 표시 (예: INFO 페이지에서는 INFO 탭이 검정) */
.side-tab--active {
  color: var(--color-black);
}

/* 워드마크: 화면 하단에 항상 고정, 글자 크기는 원래 그대로(210px) 유지합니다.
   글자 높이(178.5px)가 검은 막대 높이(110px)보다 크기 때문에, 평소엔 그대로
   전체가 다 보이다가 스크롤이 맨 아래 68.5px 구간에 들어서는 순간부터
   js/main.js의 스크롤 스크립트가 워드마크를 아주 살짝씩 아래로 밀어내려,
   막대가 완전히 올라온 시점에 정확히 다 가려지도록 맞춰줍니다.
   (transform의 Y값은 JS가 실시간으로 계산해서 넣습니다 — X축 중앙정렬은
    margin-left로 분리해뒀습니다.) */
.wordmark {
  position: fixed;
  left: 50%;
  bottom: 20px; /* 뷰포트/창 하단 모서리에 너무 붙어 겹쳐 보이는 것을 막기 위한 여유값.
                   js/main.js의 WORDMARK_LIFT 값과 반드시 일치시킬 것 */
  margin-left: -606px; /* (114px - 720px) 캔버스 중앙 정렬, 시안 좌표 그대로 */
  width: 1210.8px; /* 시안에서 측정한 "Noah W. Jin" 전체 폭 */
  display: flex;
  align-items: flex-end;
  font-weight: 900; /* Inter Black */
  font-size: 210px;
  line-height: 0.85;
  color: var(--color-black);
  z-index: 20; /* 갤러리 이미지보다 위, 검은 막대보다는 아래 */
  pointer-events: none;
  user-select: none;
}

.wordmark a {
  pointer-events: auto;
  display: flex;
  width: 100%;
}

.wordmark span {
  display: inline-block;
}

/* 단어 사이 간격은 시안에서 측정한 값 그대로 (가운데 정렬로 임의로 벌리지 않음) */
.wordmark span:nth-child(1) {
  margin-right: 41.8px; /* "Noah" 뒤 여백 */
}

.wordmark span:nth-child(2) {
  margin-right: 29.8px; /* "W." 뒤 여백 */
}

/* ----------------------------------------------------------------------------
   Footer copyright bar — 페이지 맨 끝(문서 흐름)에 있는 검은 막대.
   평소엔 화면 밖(아래)에 있어 보이지 않다가, 스크롤을 끝까지 내리면
   화면에 들어오면서 고정된 워드마크를 덮어 가립니다.
---------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  width: 100%;
  height: 110px; /* 기존 220px에서 절반으로 축소 */
  z-index: 40; /* 워드마크(20)보다 위에 그려져 덮어 가림 */
  background: var(--color-black);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 19px;
}

.site-footer p {
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-white);
}

/* ============================================================================
   HOME — 갤러리 콜라주
   ============================================================================ */
.gallery {
  position: relative;
  width: 100%;
  flex: 1 0 auto; /* 남는 세로 공간을 흡수해서 저작권 바를 항상 맨 아래로 밀어냄 */
}

.gallery-item {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  display: block;
  z-index: 10; /* 고정 워드마크(z-index:20)보다 아래 — 워드마크가 사진 위로 겹쳐 보임 */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease, transform 0.3s ease;
}

.gallery-item .tile-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 15px 0 0 15px;
}

.gallery-item:hover img {
  filter: blur(6px) brightness(0.55);
  transform: scale(1.02);
}

.gallery-item:hover .tile-overlay {
  opacity: 1;
}

.tile-overlay-name {
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  color: var(--color-white);
  margin: 0 0 4px 0;
}

.tile-overlay-year {
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  color: var(--color-white);
  margin: 0;
}

/* ============================================================================
   WORK DETAIL — 작품 상세 페이지 (detail .pdf 기준, 스크롤되는 독립 페이지)
   INFO/CONTACT와 동일하게: 고정 크롬(워드마크/탭) 위에 이 페이지 콘텐츠가
   일반 문서 흐름으로 쌓이고, 맨 끝에 검은 저작권 바가 옵니다.
   이 페이지만 캔버스 배경이 흰색이 아니라 회색(#949494)입니다.
   ============================================================================ */
.work-canvas {
  background: #949494;
  cursor: pointer; /* 빈 배경 클릭 시 홈으로 이동됨을 암시 */
  padding-top: 144px;
}

/* 사진이 2장 이상이면 2열 그리드로 (시안 기준 568×852px, 간격 14px)
   그리드 박스 자체의 너비를 사진 영역에 딱 맞게(920px) 고정해서, 그
   양옆 회색 여백은 .work-canvas(빈 배경)가 클릭을 받도록 합니다. */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 453px);
  gap: 14px;
  width: 920px;
  margin: 0 auto;
  flex: 0 0 auto;
}

/* 시안의 568×852 박스는 예시 사진 비율일 뿐이라, 실제 사진은 잘리지 않고
   원본 비율 그대로 나오도록 높이를 고정하지 않습니다. */
.work-grid img {
  width: 100%;
  height: auto;
  display: block;
}

/* 사진이 1장뿐이면 그리드 대신 원본 비율 그대로 큰 이미지 1장 */
.work-grid--single {
  grid-template-columns: 650px;
  width: 650px;
}

.work-labels {
  width: 920px;
  margin: 0 auto;
  padding: 132px 0 150px 0;
  color: var(--color-white);
  flex: 1 0 auto; /* 남는 세로 공간을 흡수해서 저작권 바를 항상 맨 아래로 밀어냄 */
}

.work-labels .label-name {
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  margin: 0 0 7px 0;
}

.work-labels .label-year {
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  margin: 0 0 68px 0;
}

.work-labels .label-material {
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  margin: 0 0 10px 0;
}

.work-labels .label-size {
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  margin: 0;
}

/* ============================================================================
   INFO / CV 페이지
   ============================================================================ */
.info-row {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 89px 0 60px 89px;
  flex: 1 0 auto; /* 남는 세로 공간을 흡수해서 저작권 바를 항상 맨 아래로 밀어냄 */
}

/* 왼쪽 프로필 사진: 개수는 data/cv.js의 photoRepeatCount 값으로 직접 지정합니다
   (자동 계산 아님). 사진 사이 간격은 22px. */
.info-photo-col {
  width: 240px;
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.info-photo-col img {
  width: 240px;
  height: 240px;
  object-fit: cover;
  display: block;
}

.info-content-col {
  width: 700px;
  flex: 0 0 700px;
  padding-bottom: 60px;
}

.info-name {
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 24px 0;
}

.info-bio {
  font-weight: 400;
  font-size: 24px;
  color: var(--color-muted);
  line-height: 1.2;
  margin: 0 0 90px 0;
}

.info-divider {
  border: none;
  border-top: 1px solid var(--color-black);
  margin: 0 0 24px 0;
}

.info-section {
  margin-bottom: 125px;
}

.info-section-title {
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 34px 0;
  text-transform: none;
}

.info-section-body {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-muted); /* bio 텍스트와 동일한 색상 */
  margin: 0;
}

.info-section-body p {
  margin: 0 0 4px 0;
}

/* 연도별 그룹 섹션 (EXHIBITIONS / AWARDS & HONORS) — 구분선 없이 여백으로만 구분 */
.info-group {
  margin: 0 0 34px 0;
}

.info-group-year {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-black);
  margin: 0 0 4px 0;
}

.info-group-name {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-muted);
  margin: 0;
}

.info-group-detail {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-muted);
  margin: 0 0 24px 0;
}

/* ============================================================================
   CONTACT 페이지
   ============================================================================ */
/* 시안(콘텍트.pdf) 기준: 전체 화면 중앙정렬이 아니라, 위에서부터 276px 지점에
   이메일이 오고, 아래쪽엔 고정 워드마크/저작권 바가 자연스럽게 자리하도록
   여백을 맞춘 구조입니다. */
.contact-page {
  position: relative;
  padding: 276px 0 350px 0;
  text-align: center;
  flex: 1 0 auto; /* 남는 세로 공간을 흡수해서 저작권 바를 항상 맨 아래로 밀어냄 */
}

.contact-email {
  font-weight: 900;
  font-size: 32px;
  margin: 0 0 72px 0;
}

.contact-socials {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.contact-social-icon {
  display: inline-flex;
}

.contact-social-icon img {
  width: 40px;
  height: 40px;
  display: block;
}