:root {
  /* 🎨 Brand Colors (브랜드 정체성) */
  --color-primary: #4f46e5;       /* 메인 컬러 (예: 신뢰감을 주는 보라/블루) */
  --color-primary-hover: #4338ca; /* 메인 컬러에 마우스 올렸을 때 (약간 어둡게) */
  --color-secondary: #06b6d4;     /* 서브 컬러 (포인트 강조용 청록색) */

  /* 🌓 Neutral Colors (배경 및 텍스트) */
  --color-bg-main: #ffffff;       /* 메인 배경색 */
  --color-bg-sub: #f9fafb;        /* 섹션 구분용 연한 회색 배경 */
  --color-text-main: #111827;     /* 기본 본문 글자색 (완전 검은색보다 눈이 편한 진회색) */
  --color-text-muted: #6b7280;    /* 설명글, 날짜 등 흐린 글자색 */
  --color-black: #000000;         /* 완전 검정 (project 목차 헤더 등 강조용) */

  /* ✍️ Typography (폰트 시스템) */
  /* Inter는 한글(Hangul) 글리프가 없어서, 브라우저가 자동으로 다음 순서인 Noto Sans KR로 대체해 한글만 그 폰트로 표시된다.
     영문은 계속 Inter가 매칭되어 그대로 유지됨 */
  --font-main: 'Inter', 'Noto Sans KR', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  --font-size-small: 0.8rem;      /* 작은 텍스트 (예: project 목차) */
  --font-size-base: 1rem;         /* 브라우저 기본 16px 기준 */
  --font-size-lg: 1.25rem;        /* 큰 본문 */
  --font-size-title: 2rem;        /* 제목 크기 */
  --line-height-base: 2;          /* 줄간격 (MS 워드 기준 200% = 2배 줄간격) */

  /* 상세·소개·연락처 페이지가 공유하는 읽기 간격과 본문 길이 */
  --content-body-leading: 1.75;
  --content-meta-leading: 1.5;
  --content-heading-leading: 1.3;
  --content-section-gap: clamp(40px, 5vw, 64px);
  --content-text-measure: 65ch;

  /* 📐 Layout & Misc (여백 및 테두리) */
  --space-unit: 4px; /* 기본 단위 */

  --space-xs: calc(var(--space-unit) * 2); /* 8px */
  --space-sm: calc(var(--space-unit) * 3); /* 12px */
  --space-md: calc(var(--space-unit) * 4); /* 16px */
  --space-lg: calc(var(--space-unit) * 6); /* 24px */
  --space-xl: calc(var(--space-unit) * 8); /* 32px */

  /* 🧭 Navigation
     고정값(px) 대신 화면 세로 높이(viewport height) 대비 비율로 관리한다.
     %(퍼센트) 대신 vh를 쓰는 이유: 1) padding-top 보정 등에 쓰일 때 CSS 규칙상 padding의 %는
     항상 "너비" 기준으로 해석돼서 세로 비율로는 동작하지 않는다. 2) nav-logo-mark 높이 계산처럼
     부모 요소에 명시적 height가 없는 곳에서는 %가 아예 해석되지 않는다. vh는 이런 문맥과 무관하게
     항상 "브라우저 창 세로 높이의 N%"로 일관되게 계산된다. */
  --nav-height: clamp(64px, 7vh, 96px); /* 원하는 값으로 바꿔서 navigation bar 높이를 조절하세요 (뷰포트 세로 높이 대비 %) */

  /* 왼쪽 메인 타이틀(ZINUN)과 오른쪽 메뉴(Biography/Contact)의 폰트 크기·굵기를 각각 조절 */
  --nav-title-font-size: var(--font-size-title); /* 원하는 값으로 조절하세요 */
  --nav-title-font-weight: 700; /* 원하는 값으로 조절하세요 (100~900) */
  --nav-menu-font-size: var(--font-size-base); /* 원하는 값으로 조절하세요 */
  --nav-menu-font-weight: 500; /* 원하는 값으로 조절하세요 (100~900) */

  /* 🧭 Site Content Width
     창 전체 가로 기준 콘텐츠 폭 비율. nav, footer, project 상세, biography, contact가
     이 값에서 계산되는 좌우 여백(--site-gutter)을 공유해서 콘텐츠의 왼쪽/오른쪽 끝을 맞춘다.
     (project 상세의 main image처럼 의도적으로 풀블리드로 두는 요소는 예외) */
  --site-content-width: 78%; /* 원하는 값으로 조절하세요 */
  --site-gutter: calc((100% - var(--site-content-width)) / 2);

  /* 🧭 Projects Grid Hover Poster
     Tate의 A2 / Louisiana의 A1 전시 포스터에서 확인한 A계열 비율 1:√2.
     좌우는 이웃 썸네일 경계까지, 위아래는 A계열 비율에 맞춰 확장한다. */
  --poster-aspect-ratio: 1.41421356237; /* 세로 / 가로 = √2 (A계열) */
  --thumb-caption-rise: 10px; /* 포스터 텍스트가 hover 시 아래에서 위로 떠오르는 거리. 원하는 값으로 조절하세요 */

  /* 제목 → 작가명 → 보조 정보의 위계. 작은 카드의 가독성과 큰 화면의 균형을 함께 유지한다. */
  --poster-meta-font-size: clamp(11px, 4.2cqw, 18px);
  --poster-artist-font-size: clamp(12px, 5.5cqw, 28px);
  --poster-year-font-size: clamp(12px, 4.2cqw, 18px);
  --poster-title-font-size: clamp(14px, 8.4cqw, 42px);
  --poster-text-inset: 0px; /* 텍스트의 좌우 정렬선을 썸네일 이미지 경계와 일치시킨다. */

  /* 🧭 Projects Grid Layout
     데스크탑 기본값: 한 줄에 3개, 정방형(1:1) 썸네일.
     640px 이하(모바일)에서는 한 줄에 1개, 8:13(황금비에 가까운 세로형)으로 자동 전환된다. */
  --thumbnail-grid-columns: 3; /* 가로 한 줄에 보여줄 썸네일 개수. 원하는 값으로 조절하세요 */
  /* 가로·세로에 같은 간격을 사용한다. 포스터의 세로 확장은 이웃 행 위에 겹친다. */
  --thumbnail-grid-gap: clamp(8px, 1vw, 16px);
  --thumbnail-aspect-ratio: 1 / 1; /* 썸네일 가로:세로 비율 (썸네일 자체 크기는 hover에도 바뀌지 않는다) */

  /* 🧭 Footer Layout */
  --footer-top-gap: 20vh; /* Footer 섹션과 위 콘텐츠 사이 여백: 크고 여유롭게. 원하는 값으로 조절하세요 */

  /* 소개와 내비게이션은 작품 그리드의 첫째·둘째 열 정렬선을 공유한다. */
  --biography-rail-inset: clamp(24px, 3vw, 48px);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /*"내가 지정한 가로·세로 크기 안에 패딩(Padding)과 테두리(Border) 두께까지 전부 다 포함시켜라"*/
}

html {
    height: 100%;
    scrollbar-gutter: stable; /* 페이지 길이가 달라도 콘텐츠의 좌우 정렬선이 움직이지 않게 한다. */
}

/* 콘텐츠가 창 높이보다 짧아도 footer가 항상 창 맨 아래에 붙도록 하는 sticky-footer 구조.
   nav + (본문 1개) + footer(들)를 세로로 쌓고, 본문 쪽에 flex:1을 줘서 남는 세로 공간을 채운다.
   콘텐츠가 창보다 길면 자연스럽게 스크롤되고, footer는 그 아래에 그대로 붙는다. */
body {
    font-family: var(--font-main);
    line-height: var(--line-height-base);
    overflow-x: hidden; /* 그리드의 포스터 효과가 페이지 가로 스크롤을 만들지 않도록 함 */
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* 모든 페이지 공통: 스크롤해도 nav가 항상 화면 맨 위에 고정된다.
   고정(fixed)이라 문서 흐름에서 빠지므로, 그만큼의 높이는 각 페이지 본문의 padding-top으로 보정한다
   (#projects, #project-detail, .content-page 참고). */
#site-nav {
    height: var(--nav-height);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--thumbnail-grid-gap);
    align-items: center;
    padding: 0 var(--site-gutter);
    font-family: var(--font-main);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-bg-main);
}

/* 좁은 화면에서는 비율(--site-gutter) 대신 고정 여백을 써서 좌우가 너무 좁아지지 않게 한다.
   nav/projects/project 상세/biography·contact/footer가 전부 같은 고정값을 공유해 정렬을 유지한다. */
@media (max-width: 640px) {
    #site-nav,
    #projects,
    #project-detail,
    .content-page,
    .footer-inner {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }


}

.nav-logo {
    display: flex;
    align-items: baseline;
    gap: 0.75em;
    padding-block: var(--space-xs);
    font-size: var(--nav-title-font-size);
    font-weight: var(--nav-title-font-weight);
    line-height: 1;
    color: var(--color-text-main);
    text-decoration: none;
    justify-self: start;
}

.nav-logo > picture {
    --nav-logo-mark-size: 0.73em;
    position: relative;
    display: block;
    flex: none;
    width: var(--nav-logo-mark-size);
    height: var(--nav-logo-mark-size);
    line-height: 0;
}

/* 114px 심볼 + 회전 여유 24px씩 = 162px SVG. Z/N 상태의 실제 외곽을
   1cap에 맞추고, 회전할 때는 크기를 바꾸지 않고 여유 영역을 사용한다. */
.nav-logo-mark {
    position: absolute;
    top: calc(var(--nav-logo-mark-size) * -4 / 19);
    left: calc(var(--nav-logo-mark-size) * -4 / 19);
    display: block;
    width: calc(var(--nav-logo-mark-size) * 27 / 19);
    height: calc(var(--nav-logo-mark-size) * 27 / 19);
    object-fit: contain;
}

@supports (width: 1cap) {
    .nav-logo > picture { --nav-logo-mark-size: 1cap; }
}

.nav-logo-text {
    font-size: var(--nav-title-font-size);
    font-weight: var(--nav-title-font-weight);
    line-height: 1;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: var(--space-lg);
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #30343b;
    font-size: var(--nav-menu-font-size);
    font-weight: var(--nav-menu-font-weight);
    line-height: 20px;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.nav-links a:hover {
    color: var(--color-text-main);
    text-decoration-color: #a6abb2;
}
.nav-links a.active,
.nav-links a[aria-current="page"] {
    color: var(--color-text-main);
    text-decoration-color: currentColor;
}

/* Projects section (index.html) */
#projects {
    font-family: var(--font-main);
    /* 위쪽 padding = nav 높이(--nav-height, nav가 position:fixed라 문서 흐름에서 빠지는 만큼
       보정) + --grid-top-gap. 후자는 hover 포스터가 썸네일 위로 튀어나오는 길이(overhang)와
       똑같이 script.js(syncGridGeometry)가 렌더링된 첫 카드 높이로 실측해서 채워 넣는 값이라,
       nav 바로 아래 카드를 hover해도 포스터 윗부분이 nav에 가리지 않고 딱 nav 아래에서 시작한다.
       JS가 아직 못 채웠을 때(최초 렌더 전)를 대비해 --space-xl을 폴백으로 둔다. */
    padding: calc(var(--grid-top-gap, var(--space-xl)) + var(--nav-height)) var(--site-gutter) max(var(--space-xl), var(--grid-top-gap, 0px));
    flex: 1 0 auto; /* sticky-footer: 남는 세로 공간을 채워서 footer를 창 아래로 밀어줌 */
}

/* 화면에는 안 보이지만 스크린리더에는 남겨두는 소제목용 유틸리티 클래스 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.project-loading {
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-md) 0;
}

/* 2차원 썸네일 그리드. 좌우 끝은 #projects의 --site-gutter padding을 통해
   nav/footer 등 다른 섹션과 동일한 라인에 맞춰진다. */
.project-grid {
    display: grid;
    grid-template-columns: repeat(var(--thumbnail-grid-columns), minmax(0, 1fr));
    gap: var(--thumbnail-grid-gap);
}

.thumb-card {
    position: relative;
    display: block;
    aspect-ratio: var(--thumbnail-aspect-ratio); /* 썸네일 자체 크기: hover에도 절대 바뀌지 않는다 */
    text-decoration: none;
    color: var(--thumb-text-color, var(--color-bg-main));
    /* 그리드 아이템의 기본값(min-width/min-height: auto)이 이미지의 intrinsic 크기 때문에
       트랙을 밀어내며 grid blowout이 나는 걸 막는다. */
    min-width: 0;
    min-height: 0;
    /* 포스터 안의 텍스트(메타 정보/작가 이름/타이틀)가 카드 자체의 가로폭에 비례해서
       스케일되도록 하는 컨테이너 쿼리 기준점(cqw 단위가 이 요소의 inline-size를 100cqw로 삼는다). */
    container-type: inline-size;
}

/* 좌우는 이웃 썸네일에 정확히 닿고, 세로는 A계열 비율을 유지하며 이웃 행 위로 겹친다. */
.thumb-poster-bg {
    position: absolute;
    left: var(--thumb-poster-left, calc(-1 * var(--thumbnail-grid-gap)));
    top: var(--thumb-poster-top, calc((100% - (100% + var(--thumbnail-grid-gap) * 2) * var(--poster-aspect-ratio)) / 2));
    width: var(--thumb-poster-width, calc(100% + var(--thumbnail-grid-gap) * 2));
    height: var(--thumb-poster-height, calc((100% + var(--thumbnail-grid-gap) * 2) * var(--poster-aspect-ratio)));
    background-color: var(--thumb-accent-color, var(--color-black));
    /* 경계 밖으로 번지는 그림자 대신 안쪽 테두리로 밝은 포스터를 구분한다. */
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08);
    z-index: 0;
    opacity: 0;
    transition: none;
    pointer-events: none;
}

/* .is-color-ready가 붙기 전(script.js: 썸네일 이미지의 decode()+주색상 분석이 아직 안 끝난
   상태)에는 hover해도 포스터가 전혀 뜨지 않는다. 그 전에 hover를 허용하면 --thumb-accent-color가
   없어 CSS 폴백(검정)으로 먼저 나타났다가 실제 계산된 색(예: 거의 흰색)으로 뒤늦게 바뀌어서
   "크기가 잘못됐다가 나중에 맞게 채워지는" 것처럼 보이는 원인이 됐다. 항상 최종 확정된 색으로만
   한 번에 등장하게 해서 그 착시를 근본적으로 없앤다. */
.thumb-card.is-color-ready:hover .thumb-poster-bg,
.thumb-card.is-color-ready:focus-visible .thumb-poster-bg {
    opacity: 1;
}

/* 활성 포스터와 캡션이 같은 열의 위아래 이미지보다 앞에 표시된다. */
.thumb-card:hover,
.thumb-card:focus-visible {
    z-index: 10;
}

.thumb-media {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-bg-sub);
}

.thumb-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%); /* 데스크탑 기본: 흑백. hover 시 원본 색으로 (이미지 자체 크기는 그대로) */
    /* filter를 트랜지션시키면(중간 grayscale % 값일 때) 브라우저가 이 이미지를 별도 오프스크린
       버퍼에 렌더링해서 합성하는데, 그 버퍼의 가장자리가 뒤에 있는 포스터 배경색과 만나는
       경계에서 서브픽셀 번짐(굵기가 변하는 실선처럼 보임)이 생겼다. 트랜지션 없이 hover 즉시
       전환해서 중간값 자체가 존재하지 않게 한다. */
    transition: none;
}

.thumb-card:hover .thumb-media img,
.thumb-card:focus-visible .thumb-media img {
    filter: grayscale(0%);
}

/* 작가명·카테고리는 이미지 왼쪽, 연도는 이미지 오른쪽 경계에 맞춘다. */
.thumb-caption-top {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 100%;
    height: var(--thumb-poster-space-top, calc(((100% + var(--thumbnail-grid-gap) * 2) * var(--poster-aspect-ratio) - 100%) / 2));
    padding: 4cqw var(--poster-text-inset) 3.5cqw;
    z-index: 1;
    pointer-events: none; /* 겹친 캡션이 이웃 썸네일의 마우스 선택을 가로채지 않는다. */
    /* 이 박스 자체(바깥쪽)는 hover 중에도 절대 움직이거나 커지지 않는다 — 이미지 바로 위
       가장자리(bottom:100%)에 고정된 "안전 영역"이다. overflow:hidden으로 안쪽(-inner)이
       아무리 움직여도 이 박스 밖(=이미지 쪽)으로는 절대 삐져나가 그려지지 않는다. */
    overflow: hidden;
    color: var(--thumb-text-color, var(--color-text-main));
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* 실제 라이즈업 애니메이션은 이 안쪽 래퍼에서만 일어난다. 부모(.thumb-caption-top)가
   overflow:hidden인 안전 영역이라, 텍스트가 아래에서 위로 떠오르는 것처럼 보이면서도
   이동 중 어느 프레임에도 이미지 영역을 침범해 그려질 수 없다(예전 버그: 부모까지 같이
   움직이면서 시작 지점이 이미지 쪽으로 파고들어 hover 트랜지션 중에만 실선이 보였다 사라졌다). */
.thumb-caption-top-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: space-between;
    align-items: baseline;
    gap: 1.5cqw var(--space-sm);
    width: 100%;
    height: 100%;
    transform: translateY(var(--thumb-caption-rise));
    transition: transform 0.35s ease;
}

.thumb-caption-top-inner .thumb-artist {
    grid-column: 1;
    grid-row: 1;
}

.thumb-caption-top-inner .thumb-date {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

.thumb-caption-top-inner .thumb-category {
    grid-column: 1 / -1;
    grid-row: 2;
}

/* 보조 정보는 과한 대문자·자간을 줄여 작은 포스터에서도 읽히게 한다. */
.thumb-category {
    font-size: var(--poster-meta-font-size);
    font-weight: 400;
    letter-spacing: 0.025em;
    line-height: 1.25;
    opacity: 0.82;
}

.thumb-date {
    font-size: var(--poster-year-font-size);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

/* 작품 타이틀: 이미지 아래, 포스터 배경(하단 여백) 위에 얹힌다. 썸네일 자체
   크기는 그대로 두고 카드 바깥으로 절대 위치시키는 방식이라 레이아웃에 영향을 주지 않는다.
   제목도 이미지 왼쪽 경계에 맞추고, 이미지와 제목 사이에는 읽기 위한 세로 간격을 둔다. */
.thumb-caption-bottom {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    /* .thumb-caption-top과 같은 원리: 이 박스는 이미지 바로 아래(top:100%)에 고정된 안전
       영역이고, overflow:hidden이라 안쪽(-inner)의 라이즈업 이동이 이미지 쪽으로는 절대
       삐져나가 그려지지 않는다. */
    overflow: hidden;
    height: var(--thumb-poster-space-bottom, calc(((100% + var(--thumbnail-grid-gap) * 2) * var(--poster-aspect-ratio) - 100%) / 2));
    padding: 3cqw var(--poster-text-inset) 4cqw;
    color: var(--thumb-text-color, var(--color-text-main));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.thumb-caption-bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.7cqw;
    transform: translateY(var(--thumb-caption-rise));
    transition: transform 0.35s ease;
}

.thumb-artist {
    font-size: var(--poster-artist-font-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.05;
}

.thumb-title {
    display: block;
    max-width: 100%;
    font-size: var(--poster-title-font-size);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.04;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.thumb-card.is-color-ready:hover .thumb-caption-top,
.thumb-card.is-color-ready:hover .thumb-caption-bottom,
.thumb-card.is-color-ready:focus-visible .thumb-caption-top,
.thumb-card.is-color-ready:focus-visible .thumb-caption-bottom {
    opacity: 1;
}

.thumb-card.is-color-ready:hover .thumb-caption-top-inner,
.thumb-card.is-color-ready:hover .thumb-caption-bottom-inner,
.thumb-card.is-color-ready:focus-visible .thumb-caption-top-inner,
.thumb-card.is-color-ready:focus-visible .thumb-caption-bottom-inner {
    transform: translateY(0);
}

/* 모바일 전용 정보 바 (아래 미디어쿼리에서 표시). 데스크톱에서는 항상 숨김 */
.thumb-info-mobile {
    display: none;
}

@media (max-width: 640px) {
    :root {
        --thumbnail-grid-columns: 1; /* 원하는 값으로 조절하세요 */
        --thumbnail-aspect-ratio: 8 / 13; /* 원하는 값으로 조절하세요 */
    }

    /* 모바일에서는 카드 전체가 아니라 썸네일 이미지 자체에만 비율을 고정하고,
       그 아래 정보 바는 자기 높이만큼 자연스럽게 추가된다 (hover가 없어 항상 노출되므로
       레이아웃이 흔들릴 걱정이 없다). */
    .thumb-card {
        aspect-ratio: auto; /* "none"은 유효하지 않은 값이라 무시된다 — 리셋 키워드는 auto */
    }

    .thumb-media {
        height: auto; /* 데스크탑의 100%(카드 높이 기준) 대신 아래 aspect-ratio로 높이를 계산 */
        aspect-ratio: var(--thumbnail-aspect-ratio);
    }

    /* 흑백/hover 프레임 효과는 데스크톱 전용: 모바일은 바로 원본 색으로 노출 */
    .thumb-media img {
        filter: none;
    }

    .thumb-caption-top,
    .thumb-caption-bottom {
        display: none;
    }

    /* 데스크톱에서 hover로 보이던 정보를 사진 아래 작은 바 형태로 항상 노출.
       flex: none을 주지 않으면 그리드의 행 높이 계산 과정에서 이 바가 찌그러져
       사라지는 경우가 있어(중첩된 flex-in-grid 자동 크기 계산의 함정) 명시적으로 고정한다. */
    .thumb-info-mobile {
        display: flex;
        flex: none;
        flex-direction: column;
        gap: 2px;
        padding: var(--space-xs) var(--space-sm);
        background-color: var(--thumb-accent-color, var(--color-black));
        color: var(--thumb-text-color, var(--color-bg-main));
    }

    .thumb-meta-mobile {
        font-size: 0.65rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        opacity: 0.85;
    }

    .thumb-title-mobile {
        font-size: var(--font-size-base);
        font-weight: bold;
    }
}

/* Site footer (index.html) */
#site-footer {
    font-family: var(--font-main);
    margin-top: var(--footer-top-gap); /* projects 섹션과의 여백: --footer-top-gap 변수로 조절 */
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--site-gutter);
    border-top: 1px solid var(--color-bg-sub);
}

.footer-copyright {
    color: var(--color-text-main);
    font-size: var(--font-size-small);
}

.footer-social {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.footer-social img {
    display: block;
    width: 24px;
    height: 24px;
    opacity: 0.65;
    transition: opacity 0.2s ease;
}

.footer-social a:hover img {
    opacity: 1;
}

/* Project detail page (project.html) */
#project-footer {
    padding: var(--space-md) var(--site-gutter);
    font-family: var(--font-main);
    line-height: 1.5;
}

.back-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-text-main);
    text-decoration: none;
    font-size: var(--font-size-base);
}

.back-link:hover {
    color: var(--color-black);
}

#project-detail {
    --project-body-leading: var(--content-body-leading);
    --project-meta-leading: var(--content-meta-leading);
    --project-heading-leading: var(--content-heading-leading);
    --project-section-gap: var(--content-section-gap);
    font-family: var(--font-main);
    line-height: var(--project-meta-leading);
    /* 위쪽만 nav 높이(--nav-height)만큼 더 띄운다 — nav가 position:fixed라 문서 흐름에서
       빠지기 때문에, 그 자리를 이 padding으로 보정해줘야 콘텐츠가 nav 밑에 깔리지 않는다. */
    padding: calc(var(--space-lg) + var(--nav-height)) var(--site-gutter) var(--space-lg);
    flex: 1 0 auto; /* sticky-footer: 남는 세로 공간을 채워서 footer를 창 아래로 밀어줌 */
    width: 100%;
}

/* title(왼쪽) + categories/date(오른쪽) 한 줄 배치. #project-detail의 좌우 padding(--site-gutter)을
   그대로 물려받아 title 왼쪽 끝은 nav-logo 시작 지점과, categories/date 오른쪽 끝은
   nav-links의 Contact 끝나는 지점과 자동으로 정렬된다.
   이 행의 높이는 --project-header-row-height로 조절 가능 */
.project-detail-header {
    --project-header-row-height: 4.5rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    min-height: var(--project-header-row-height);
    margin-bottom: var(--space-xl);
}

/* title, categories, date 공통 한 칸: 값 + 그 아래 작은 라벨(TITLE/CATEGORIES/DATE) */
.project-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.project-field-title {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
}

.project-detail-meta {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    flex-shrink: 0;
    gap: var(--space-xl);
}

.project-field-categories,
.project-field-date {
    align-items: flex-end;
    text-align: right;
}

/* title / categories / date 값: 동일한 폰트 & 크기 */
.project-title-value,
.project-categories-value,
.project-date-value {
    display: block;
    max-width: 100%;
    margin: 0;
    font-family: inherit;
    font-size: var(--font-size-lg);
    font-weight: 400;
    line-height: var(--project-heading-leading);
    color: var(--color-text-main);
    white-space: normal;
    overflow-wrap: anywhere;
}

/* 작은 필드명 라벨 (title/categories/date는 값 아래, keywords/dimensions/technical stack는 값 위에 사용) */
.field-label {
    font-size: 0.65rem;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.project-subtitle {
    margin: 2px 0 6px;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.project-media-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.project-media-links a {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.project-description + .project-description {
    margin-top: 1em;
}

.project-description:lang(ko) {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* main_image 바로 아래: 본문과 작품 정보를 2:1의 유연한 열로 나눈다.
   문단은 배정된 열을 채워 별도의 최대 너비가 열 안에 빈 공간을 만들지 않게 한다.
   movies·images(.zone-visual), exhibition history(.zone-history)도 별도 width 지정 없이
   #project-detail의 좌우 padding(--site-gutter)을 그대로 따라가며 같은 폭·같은 좌우 끝을 공유한다. */
.zone-main-info {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 4vw, 64px);
    margin-bottom: var(--space-xl);
}

.main-info-description {
    min-width: 0;
}

.main-info-box {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg); /* keywords / dimensions / technical stack 사이 여백 */
}

.main-info-description:only-child,
.main-info-box:only-child {
    grid-column: 1 / -1;
}

/* 라벨과 값이 같은 왼쪽 시작점에 정렬되도록 keywords/dimensions/technical stack 모두 일반 텍스트로 통일 */
.project-field-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.project-field-value {
    color: var(--color-text-main);
    line-height: var(--project-meta-leading);
}

@media (max-width: 900px) {
    /* title 한 줄 배치가 좁은 화면에서 잘리지 않도록 title/meta를 세로로 풀어줌 */
    .project-detail-header {
        flex-wrap: wrap;
        height: auto;
        padding-top: var(--space-md);
        padding-bottom: var(--space-md);
        gap: var(--space-sm);
    }

    .project-field-title {
        flex: 1 1 100%;
    }

    .project-detail-meta {
        gap: var(--space-lg);
    }

    .zone-main-info {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }
}

/* 내비게이션과 상하 여백을 제외한 첫 화면을 사용한다.
   제목의 실제 높이는 auto 행이 차지하고, 남은 높이를 미디어 행에 배정한다.
   svh는 모바일 주소 표시줄이 보이는 상태에서도 첫 화면에 들어오게 한다. */
.project-intro {
    height: calc(100vh - var(--nav-height) - var(--space-lg) * 2);
    height: calc(100svh - var(--nav-height) - var(--space-lg) * 2);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.project-intro .project-detail-header {
    margin-bottom: 0;
}

.zone-main-media {
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-image-open {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-main);
    font: inherit;
    cursor: zoom-in;
}

.project-image-open > img,
.zone-main-media > video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.project-image-hint {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}

.project-image-open > img {
    /* 확대 안내와 간격을 뺀 남은 높이의 80% 안에 원본 비율로 배치한다.
       나머지 20%는 이미지 위아래 여백이며, 가로로 긴 이미지는 본문 너비에도 맞춘다. */
    max-height: calc((100% - 1.125rem - var(--space-xs)) * 0.8);
}

html.image-viewer-open {
    overflow: hidden;
}

.project-image-viewer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: clamp(16px, 2.5vw, 32px);
    border: 0;
    background: #111;
    color: #fff;
    overflow: auto;
}

.project-image-viewer[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-md);
}

.project-image-viewer::backdrop {
    background: rgb(0 0 0 / 92%);
}

.image-viewer-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-sm) var(--space-lg);
    font-size: 0.875rem;
    line-height: 1.5;
}

.image-viewer-toolbar p {
    overflow-wrap: anywhere;
}

.image-viewer-toolbar a,
.image-viewer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: inherit;
}

.image-viewer-close {
    padding: 0 var(--space-sm);
    border: 1px solid #666;
    border-radius: 2px;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.image-viewer-stage {
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-viewer-stage img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 640px) {
    .image-viewer-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px var(--space-sm);
    }

    .image-viewer-close {
        grid-column: 2;
        grid-row: 1;
    }

    .image-viewer-toolbar a {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        min-height: 32px;
    }
}

@media (max-height: 520px) and (min-width: 641px) {
    .project-intro {
        gap: var(--space-sm);
    }

    .project-intro .project-detail-header {
        flex-wrap: nowrap;
        padding: 0;
    }

    .project-intro .project-field-title {
        flex: 1 1 auto;
    }
}

.zone {
    margin-bottom: var(--space-xl);
}

.zone h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: var(--project-heading-leading);
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    margin-bottom: var(--space-md);
    margin-top: var(--space-lg);
}

.zone h2:first-child {
    margin-top: 0;
}

/* Visual zone: movies(위) → images(아래), 위→아래로만 스크롤. description과의 간격은 넉넉하게.
   가로 폭/좌우 위치는 #project-detail의 --site-gutter 규칙을 그대로 따르고,
   세로는 각 미디어의 원본 비율에 맞춰 자동으로 늘어나거나 줄어든다 */
.zone-visual {
    margin-top: var(--project-section-gap);
}

.project-movies {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.movie-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
}

.movie-embed iframe {
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.project-images-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.project-images-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

@media (max-width: 640px) {
    .project-images-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md);
    }
}

.project-image-item img {
    width: 100%;
    height: auto;
    display: block;
}

.project-image-item figcaption {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: var(--project-meta-leading);
    margin-top: var(--space-xs);
}

/* Concept zone */
.project-description {
    color: var(--color-text-main);
    line-height: var(--project-body-leading);
    white-space: pre-line;
}

/* 제목과 목록은 가깝게 묶고, 이전 섹션과 항목 사이는 별도의 여백으로 구분한다. */
.zone-history {
    margin-top: var(--project-section-gap);
    margin-bottom: 0;
}

.exhibition-history {
    display: grid;
    gap: var(--space-sm);
    list-style: disc;
    padding-left: 1.1em;
    line-height: var(--project-meta-leading);
}

.exhibition-history li {
    padding: 0;
    color: var(--color-text-main);
}

.exhibition-history li::marker {
    font-size: 0.7em; /* bullet을 작게 */
}

/* Biography / Contact pages: nav/footer/project 상세와 동일하게 --site-gutter를
   좌우 padding으로 써서 콘텐츠 왼쪽/오른쪽 끝을 맞춘다. */
.content-page {
    font-family: var(--font-main);
    line-height: var(--content-meta-leading);
    margin: 0 auto;
    /* 위쪽만 nav 높이(--nav-height)만큼 더 띄운다 — nav가 position:fixed라 문서 흐름에서
       빠지기 때문에, 그 자리를 이 padding으로 보정해줘야 콘텐츠가 nav 밑에 깔리지 않는다. */
    padding: calc(var(--space-lg) + var(--nav-height)) var(--site-gutter) var(--space-lg);
    flex: 1 0 auto; /* sticky-footer: 남는 세로 공간을 채워서 footer를 창 아래로 밀어줌 */
    width: 100%;
}

/* Biography: a portrait rail and a reading column share the site's three-column grid.
   The portrait stays uncropped; its inset provides space without moving the text axis. */
#biography-page {
    padding-top: calc(var(--nav-height) + clamp(40px, 5vw, 72px));
}

.biography-overview,
.biography-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--thumbnail-grid-gap);
}

.biography-profile {
    grid-column: 1;
    min-width: 0;
    padding-right: var(--biography-rail-inset);
}

.biography-photo {
    display: block;
    width: 100%;
    height: auto;
}

.biography-profile-details {
    margin-top: 24px;
}

.biography-identity {
    display: grid;
    gap: 8px;
}

.biography-alias {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.5;
}

#biography-page .biography-identity h1 {
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 500;
    letter-spacing: -0.045em;
    margin: 0;
}

.biography-role {
    color: #565c64;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.biography-cv {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #dfe1e4;
}

#biography-page .biography-cv h2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
}

.biography-cv h2 span {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 400;
}

.biography-cv-links {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    margin-top: 6px;
}

#biography-page .biography-cv-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    color: var(--color-text-main);
    font-size: 0.8125rem;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
}

#biography-page .biography-cv-link:hover {
    text-decoration-color: currentColor;
}

.biography-cv-link span {
    color: #7a8088;
}

.biography-profile-social {
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.biography-intro {
    grid-column: 2 / -1;
    min-width: 0;
}

#biography-page .biography-intro h2 {
    margin: 0 0 24px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.biography-intro p {
    max-width: var(--content-text-measure);
    color: var(--color-text-main);
    line-height: var(--content-body-leading);
}

.biography-intro p + p {
    margin-top: 1.25em;
}

.biography-intro p:first-of-type {
    font-size: clamp(21px, 1.8vw, 28px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.025em;
    margin-bottom: 32px;
    text-wrap: pretty;
}

#biography-page .biography-section {
    margin-top: clamp(48px, 6vw, 88px);
    padding-top: 28px;
    border-top: 1px solid #dfe1e4;
    align-items: start;
}

.biography-section h2 {
    grid-column: 1;
    padding-right: var(--biography-rail-inset);
    text-wrap: balance;
}

.biography-list {
    grid-column: 2 / -1;
    display: grid;
    gap: 24px;
}

.biography-entry {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
}

.biography-year {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.biography-entry-body {
    min-width: 0;
    overflow-wrap: anywhere;
}

.biography-entry-title,
.biography-entry-context,
.biography-entry-note {
    display: block;
}

.biography-entry-title {
    font-weight: 500;
}

.biography-entry-context,
.biography-entry-note {
    margin-top: 4px;
    font-size: 0.875rem;
    color: #565c64;
}

#biography-page .biography-entry-title a {
    color: var(--color-text-main);
    text-decoration-color: #b7bbc2;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

#biography-page .biography-entry-title a:hover {
    text-decoration-color: currentColor;
}

@media (max-width: 900px) {
    .biography-overview,
    .biography-section {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
    }
    .biography-profile,
    .biography-intro,
    .biography-section h2,
    .biography-list { grid-column: 1; }
    .biography-profile {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 32px;
        padding-right: 0;
        align-items: end;
    }
    .biography-profile-details { margin-top: 0; }
    .biography-overview { row-gap: 48px; }
    #biography-page .biography-intro h2 { margin-bottom: 20px; }
    .biography-intro p { max-width: none; }
    .biography-section h2 { padding-right: 0; }
}

@media (max-width: 640px) {
    #biography-page { padding-top: calc(var(--nav-height) + 32px); }
    .biography-profile { display: block; }
    .biography-profile-details { margin-top: 24px; }
    .biography-cv { margin-top: 24px; }
    .biography-cv-links { column-gap: 28px; }
    .biography-entry {
        grid-template-columns: 3.25rem minmax(0, 1fr);
        gap: 12px;
    }
    .biography-overview { row-gap: 40px; }
    #biography-page .biography-section { row-gap: 24px; padding-top: 24px; }
}

.content-page h1 {
    font-size: var(--font-size-title);
    font-weight: 600;
    line-height: var(--content-heading-leading);
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    margin-bottom: var(--space-md);
}

.content-page > p {
    max-width: var(--content-text-measure);
    line-height: var(--content-body-leading);
    color: var(--color-text-main);
    margin-bottom: 1em;
}

.content-page > section {
    margin-top: var(--content-section-gap);
}

.content-page h2 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: var(--content-heading-leading);
    letter-spacing: -0.02em;
    color: var(--color-text-main);
}

.content-page > section > h2 {
    margin-bottom: var(--space-md);
}

.content-page ul {
    list-style: none;
    color: var(--color-text-main);
    line-height: var(--content-meta-leading);
}

.content-page > section > ul {
    display: grid;
    gap: var(--space-sm);
}

.content-page a {
    color: var(--color-primary);
}

.content-page a:hover {
    color: var(--color-primary-hover);
}

/* Contact follows Biography's first-column headings and two-column content area. */
#contact-page {
    padding-top: calc(var(--nav-height) + clamp(40px, 5vw, 72px));
    color: var(--color-text-main);
}

.contact-overview,
.contact-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--thumbnail-grid-gap);
    align-items: start;
}

.contact-overview > h1,
.contact-section > h2 {
    grid-column: 1;
    min-width: 0;
    padding-right: var(--biography-rail-inset);
}

#contact-page .contact-overview { margin-top: 0; }

#contact-page .contact-overview > h1 {
    margin-bottom: 0;
    font-size: var(--font-size-lg);
    text-wrap: balance;
}

.contact-intro,
.contact-topics,
.contact-proposal-body,
.contact-social-links {
    grid-column: 2 / -1;
    min-width: 0;
}

.contact-label {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-lead {
    margin-top: 0;
    max-width: 36ch;
    font-size: clamp(21px, 1.8vw, 28px);
    line-height: 1.5;
    letter-spacing: -0.025em;
    text-wrap: pretty;
}

.contact-email-block {
    margin-top: 32px;
}

#contact-page .contact-email {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    min-height: 44px;
    padding: 8px 0 16px;
    border-bottom: 1px solid #a6abb2;
    color: var(--color-text-main);
    font-size: clamp(18px, 2.15vw, 32px);
    line-height: 1.4;
    letter-spacing: -0.035em;
    text-decoration: none;
}

.contact-email > span:first-child { min-width: 0; }
.contact-arrow { flex: none; }

#contact-page .contact-email:hover {
    border-bottom-color: currentColor;
    color: var(--color-primary-hover);
}

#contact-page .contact-section {
    margin-top: clamp(48px, 6vw, 88px);
    padding-top: 28px;
    border-top: 1px solid #dfe1e4;
}

#contact-page .contact-section > h2 {
    margin-bottom: 0;
    text-wrap: balance;
}

.contact-topics {
    display: grid;
    gap: 28px;
}

.contact-topic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 24px;
    align-items: baseline;
}

.contact-topic dt,
.contact-proposal-details dt {
    font-weight: 500;
}

.contact-topic dd,
.contact-proposal-details dd {
    color: #565c64;
    font-size: 0.875rem;
    line-height: var(--content-body-leading);
}

.contact-proposal-body > p {
    max-width: var(--content-text-measure);
    line-height: var(--content-body-leading);
}

.contact-proposal-details {
    display: grid;
    gap: 16px;
    margin-top: 24px;
}

.contact-proposal-details > div {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
}

.contact-proposal-details dt { font-size: 0.875rem; }

.contact-proposal-body .contact-note {
    margin-top: 28px;
    color: #565c64;
    font-size: 0.875rem;
}

#contact-page .contact-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin-top: -8px;
}

#contact-page .contact-social-links a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    color: var(--color-text-main);
    font-size: 0.875rem;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
}

#contact-page .contact-social-links a:hover { text-decoration-color: currentColor; }
.contact-social-links span { color: var(--color-text-muted); }

html:lang(ko) .contact-topic,
html:lang(ko) .contact-proposal-details {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

html:lang(ko) .contact-label { letter-spacing: 0; }

@media (max-width: 900px) {
    .contact-overview,
    .contact-section {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
    }
    .contact-overview > h1,
    .contact-intro,
    .contact-section > h2,
    .contact-topics,
    .contact-proposal-body,
    .contact-social-links { grid-column: 1; }
    .contact-overview > h1,
    .contact-section > h2 { padding-right: 0; }
    .contact-lead { max-width: none; }
    #contact-page .contact-email { font-size: clamp(18px, 3.3vw, 28px); }
}

@media (max-width: 640px) {
    #contact-page { padding-top: calc(var(--nav-height) + 32px); }
    .contact-overview { row-gap: 24px; }
    .contact-email-block { margin-top: 24px; }
    #contact-page .contact-email { gap: 12px; }
    #contact-page .contact-section { padding-top: 24px; row-gap: 24px; }
    .contact-topic { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .contact-proposal-details > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    #contact-page .contact-social-links { column-gap: 24px; }
}

/* Keyboard navigation and loading states. */
html {
    scroll-padding-top: calc(var(--nav-height) + var(--space-md));
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.skip-link {
    position: fixed;
    top: var(--space-xs);
    left: var(--space-md);
    z-index: 200;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-bg-main);
    color: var(--color-text-main);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

.project-loading,
.load-error {
    grid-column: 1 / -1;
}

.load-error {
    padding: var(--space-xl) 0;
}

.retry-button {
    margin-top: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid currentColor;
    background: var(--color-bg-main);
    color: var(--color-text-main);
    font: inherit;
    cursor: pointer;
}

.project-field-value,
.contact-email {
    overflow-wrap: anywhere;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 44px;
}

.footer-social a:focus-visible img {
    opacity: 1;
}

.thumb-card.is-image-error .thumb-info-mobile {
    display: flex;
    flex-direction: column;
    padding: var(--space-xs);
    background: var(--color-bg-main);
    color: var(--color-text-main);
}

/* Touch screens need visible titles even when wider than a phone. */
@media (hover: none) {
    .thumb-card { aspect-ratio: auto; }
    .thumb-media { height: auto; aspect-ratio: var(--thumbnail-aspect-ratio); }
    .thumb-media img { filter: none; }
    .thumb-info-mobile {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: var(--space-xs) var(--space-sm);
        background: var(--thumb-accent-color, var(--color-black));
        color: var(--thumb-text-color, var(--color-bg-main));
    }
    .thumb-meta-mobile { font-size: 0.65rem; }
    .thumb-title-mobile { font-size: var(--font-size-base); font-weight: 700; }
}

@media (max-width: 640px), (hover: none) {
    .project-grid { gap: var(--space-lg); }
    .thumb-poster-bg,
    .thumb-caption-top,
    .thumb-caption-bottom { display: none; }
}

@media (max-width: 640px) {
    :root { --nav-title-font-size: 1.625rem; --nav-menu-font-size: 0.875rem; }
    #project-detail,
    #project-footer,
    #projects,
    .content-page,
    .footer-inner {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
    .nav-links { gap: var(--space-md); }
    .project-field-categories, .project-field-date { align-items: flex-start; text-align: left; }
    .project-detail-meta { flex-wrap: wrap; }
    .footer-social { gap: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Primary navigation and language utilities share a baseline and state treatment.
   The language group stays at the content's right edge; its own gap is smaller
   than the separation between the two groups. */
.nav-tools {
    grid-column: 2 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
}
.language-switch {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-inline-start: 28px;
    white-space: nowrap;
    font-size: 0.875rem;
    line-height: 20px;
}
.language-switch::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    background: #d8dbe0;
    transform: translateY(-50%);
}
.language-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #656b73;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.language-switch a:hover {
    color: var(--color-text-main);
    text-decoration-color: #a6abb2;
}
.language-switch a[aria-current="true"] {
    color: var(--color-text-main);
    text-decoration-color: currentColor;
}
html:lang(ko) .main-info-description,
html:lang(ko) .content-page p,
html:lang(ko) .biography-entry-body,
html:lang(ko) .project-field-value,
html:lang(ko) .exhibition-history li {
    word-break: keep-all;
    overflow-wrap: anywhere;
}
html:lang(ko) .field-label { letter-spacing: 0; }
html:lang(ko) .project-description { line-height: 1.8; }
@media (max-width: 900px) {
    :root { --nav-height: 112px; }
    #site-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 64px 48px;
    }
    .nav-logo { grid-area: 1 / 1; justify-self: start; }
    .nav-tools {
        grid-area: 2 / 1;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        align-self: center;
    }
    .nav-links { gap: 18px; }
    .language-switch { gap: 12px; padding-inline-start: 16px; }
}