/* ===== 기본 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  /* 영문·숫자는 Jost, 한글은 프리텐다드로 자동 표시 */
  font-family: "Jost", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: #111;
  background: #fff;
  line-height: 1.7;
}

/* 페이지 로드 시 은은한 페이드인 */
main { animation: fadeUp 0.7s ease both; }

/* 뒤로가기 캐시 복원 시: 애니메이션·등장 효과 무시하고 전부 표시 */
.bf-restored main { animation: none; opacity: 1; }
.bf-restored .reveal { opacity: 1 !important; transform: none !important; }
.bf-restored .exh-scroll .section-head,
.bf-restored .exh-scroll .view-all { opacity: 1 !important; transform: none !important; }
/* 트랙은 가로 이동(transform)을 살려야 하므로 투명도만 해제 */
.bf-restored .exh-scroll .exh-track { opacity: 1 !important; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

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

/* 제목 계열: Jost (Futura 스타일) — 한글은 프리텐다드로 자동 대체 */
.logo, .hero-name, .section h2, .sidebar h1, .series-head h2,
.work-side h1, .other-works h2, .card figcaption {
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif;
}
img { max-width: 100%; display: block; }

/* ===== 헤더 ===== */
/* 처음엔 투명 배경 + 흰 텍스트, 스크롤하면 .scrolled 클래스로 흰 바 + 검은 텍스트 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  color: #fff;
  z-index: 10;
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

.site-header.scrolled {
  background: rgba(255,255,255,0.97);
  color: #111;
  box-shadow: 0 1px 0 #eee;
}

.site-header .lang-toggle,
.site-header .lang-toggle button { color: rgba(255,255,255,0.7); }
.site-header .lang-toggle button.active { color: #fff; }
.site-header .menu-btn { color: #fff; }

.site-header.scrolled .lang-toggle,
.site-header.scrolled .lang-toggle button { color: #999; }
.site-header.scrolled .lang-toggle button.active { color: #111; }
.site-header.scrolled .menu-btn { color: #111; }

/* 화면 크기와 무관하게 외곽 여백 고정 (중앙 정렬 안 함) */
.header-inner {
  padding: 22px var(--hpad, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

/* 메뉴를 우측으로 (Kr/En 왼쪽에 붙게) */
.nav { display: flex; gap: 26px; font-size: 1.05rem; margin-left: auto; margin-right: 28px; }
.nav a:hover { opacity: 0.5; }

/* ===== Works 드롭다운 (By Years / By Series) ===== */
.nav-item { position: relative; }
.nav .sub-nav {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(255,255,255,0.98);
  color: #111;
  min-width: 130px;
  padding: 10px 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
  text-align: center;
}
.nav-item.has-sub:hover .sub-nav,
.nav-item.has-sub.open .sub-nav,
.nav-item.has-sub:focus-within .sub-nav {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* 메뉴와 드롭다운 사이 마우스 이동용 투명 다리 */
.nav-item.has-sub::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 14px;
}
.sub-nav a {
  display: block;
  padding: 7px 18px;
  font-size: 0.85rem;
  color: #555;
}
.sub-nav a:hover { color: #111; opacity: 1; background: #f6f6f6; }
.nav-caret { display: none; }

.header-right { display: flex; align-items: center; gap: 12px; }

.lang-toggle { font-size: 1rem; }
.lang-toggle button {
  background: none; border: none; cursor: pointer;
  font: inherit; padding: 2px 4px;
  transition: color 0.4s ease;
}
.lang-toggle button.active { font-weight: 700; }

/* 햄버거 버튼: 3줄 ↔ X 전환 */
.menu-btn {
  display: none;
  position: relative;
  width: 26px;
  height: 20px;
  background: none; border: none; cursor: pointer;
  z-index: 30;
}
.menu-btn span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease;
}
.menu-btn span:nth-child(1) { top: 0; }
.menu-btn span:nth-child(2) { top: 9px; }
.menu-btn span:nth-child(3) { top: 18px; }
.menu-btn.open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }
.menu-btn.open { color: #111; }

/* ===== 풀스크린 히어로 ===== */
/* 배경 사진을 넣으려면 아래 background 줄을 다음처럼 교체:
   background: url("images/hero.jpg") center / cover no-repeat; */
.hero {
  height: 100vh;
  background: linear-gradient(160deg, #3a3f4b 0%, #6b7280 55%, #9aa2ad 100%);
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}

/* 대표작 배경 레이어: 스크롤 시 살짝 확대 */
.hero-bg {
  position: absolute;
  inset: 0;
  transform-origin: center;
  will-change: transform;
}

/* 하단 텍스트 가독성용 어두운 그라데이션 */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,0.45), transparent);
}

.hero-text {
  position: relative;
  z-index: 1;
  color: #fff;
  width: 100%;
  padding: 0 var(--hpad, 44px) 56px; /* 헤더·본문과 같은 외곽 여백 */
}

.hero-name {
  font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.hero-text p { color: rgba(255,255,255,0.85); max-width: 600px; }

/* 홈 대표작 캡션 (좌하단) */
.hero-caption {
  position: absolute;
  left: var(--hpad, 44px);
  bottom: 48px;
  z-index: 1;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-caption:hover { opacity: 0.8; }
.hero-work-title {
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
}
.hero-work-year {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.08em;
}

/* ===== 섹션 공통 ===== */
/* 메인 이미지(히어로) 다음 첫 섹션은 여유 있게 시작 */
.hero + .section { padding-top: 96px; }

/* 섹션 사이 간격 = 48+48 = 96px (히어로→Works 간격과 동일) */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 20px;
  position: relative;
  z-index: 1; /* 전시 고정 레이어(흰 배경)에 가려지지 않게 */
}

/* 섹션 사이 아주 연한 헤어라인 (리움 스타일) — 콘텐츠 좌우 폭과 동일, 첫 섹션 제외 */
main > .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--hpad, 20px);
  right: var(--hpad, 20px);
  border-top: 1px solid #ececec;
}
.hero + .section::before { display: none; }
.exh-sticky::before {
  content: "";
  position: absolute;
  top: var(--exh-line-top, 0px); /* 제목 48px 위 = 시각적 섹션 경계 (JS에서 계산) */
  left: var(--hpad, 20px);
  right: var(--hpad, 20px);
  border-top: 1px solid #ececec;
}

/* 마지막 섹션 아래는 여유 있게 */
main > .section:last-child { padding-bottom: 140px; }

.section h2,
.exh-sticky h2 {
  font-size: 2.6rem;
  letter-spacing: 0.05em;
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif;
}

/* 섹션 제목: 가운데 정렬 */
.section-head {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

/* View all: 콘텐츠 아래 오른쪽 */
.view-all {
  display: block;
  text-align: right;
  margin-top: 28px;
  font-size: 0.9rem;
  color: #888;
  transition: color 0.2s;
}
.view-all:hover { color: #111; }

/* 메인 페이지 섹션: 리움처럼 넉넉한 좌우 여백 (화면의 약 10%) */
/* 공통 좌우 여백 — 헤더·본문·구분선이 같은 폭을 공유 (국제갤러리식 정렬) */
/* 국제갤러리처럼 넓은 화면일수록 좌우 여백을 크게 (콘텐츠 프레임) */
body { --hpad: clamp(44px, 12vw, 300px); }
body:not(.subpage) .section {
  max-width: none;
  padding-left: var(--hpad);
  padding-right: var(--hpad);
}
body:not(.subpage) .exh-sticky {
  max-width: none;
  padding-left: var(--hpad);
  padding-right: var(--hpad);
}

/* 메인 페이지: 작품 이미지·작품명·연도 중앙 정렬 */
#home-works .card { text-align: center; }
#home-works .card figcaption { text-align: center; }

/* 메인 페이지: 연도별 미리보기 */
.home-year { margin-bottom: 56px; }
.home-year:last-child { margin-bottom: 0; }
.home-year-label {
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif;
}
.home-year-label a:hover { opacity: 0.6; }

/* ===== 메인 전시: 스크롤 고정 + 가로 이동 ===== */
.exh-scroll {
  position: relative;
}

.exh-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 20px;
  background: #fff; /* 고정 중 아래 섹션이 비쳐 보이지 않게 */
  display: flex;
  flex-direction: column;
  /* 제목+카드 묶음이 화면 세로 중앙에서 고정된 채 가로 이동 */
  justify-content: center;
}

.exh-track {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  will-change: transform;
}

/* 카드 크기 통일 (전부 크게) */
.exh-track .home-exh-card { flex: 0 0 auto; width: 620px; }
.exh-track .home-exh-card .exh-thumb { aspect-ratio: 16 / 10; }

/* 메인 페이지: 전시 미리보기 (최근 전시 크게 + 이전 3개 아래로) */
.home-exh-feature { margin-bottom: 48px; }

.home-exh-row,
.home-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* 카드 공통: 카테고리 라벨 / 요약문 (참고: 카드형 아카이브 레이아웃) */
.home-cat {
  font-size: 0.65rem;
  font-weight: 300;
  color: #aaa;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.home-excerpt {
  font-size: 0.88rem;
  color: #555;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-exh-card .exh-date { margin-top: 10px; }
.home-writing-card .home-cat { margin-top: 2px; }

.home-exh-card { display: block; }
.home-exh-card .exh-thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f7f7f7;
  margin-bottom: 14px;
}
.home-exh-card .exh-thumb.big { aspect-ratio: 16 / 8; }
.home-exh-card .exh-thumb img,
.home-exh-card .exh-thumb .placeholder {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.home-exh-card:hover .exh-thumb img { transform: scale(1.04); }
.home-exh-card h3 { font-size: 1rem; line-height: 1.35; }
.home-exh-card .exh-venue { font-size: 0.85rem; margin-top: 0; line-height: 1.4; }

/* 현재 페이지 메뉴 표시 */
.nav a.current { font-weight: 700; }

/* ===== 서브페이지 레이아웃 (좌측 사이드바 + 우측 콘텐츠) ===== */
.page-layout {
  max-width: none;
  margin: 0 auto;
  padding: 120px var(--hpad, 20px) 40px;
  display: flex;
  gap: 48px;
  align-items: flex-start;
  min-height: 70vh;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
}

.sidebar h1 {
  line-height: 1;
  font-size: 3.4rem;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
}

.series-nav { list-style: none; }
.series-nav li { margin-bottom: 8px; }
/* 긴 시리즈 이름: 한 열 유지, 자연스럽게 줄바꿈 */
.series-nav a {
  display: block;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.series-nav a {
  font-size: 0.95rem;
  color: #888;
  transition: color 0.2s;
}
.series-nav a:hover { color: #111; }
/* 긴 시리즈 제목: 목록에선 2줄까지만 보여주고 말줄임 (전체 제목은 해당 섹션 제목에서) */
.series-nav a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 220px;
}
.series-nav a.current-year { color: #111; font-weight: 600; }

.page-content { flex: 1; min-width: 0; }

.series { margin-bottom: 96px; }
.series:last-child { margin-bottom: 0; }

.series-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}
.series-head h2 {
  line-height: 1; font-size: 1.1rem; letter-spacing: 0.02em; }
.series-meta { font-size: 0.85rem; color: #999; }

/* 사이드바 앵커 이동 시 헤더에 가리지 않게 */
.series { scroll-margin-top: 90px; }

/* ===== 작품 상세 페이지 ===== */
.back-link { margin-top: 4px; }
.back-link a { font-size: 0.9rem; color: #888; }
.back-link a:hover { color: #111; }

/* 이미지 실제 비율 그대로 표시 (좌우 여백 없음) */
.work-image img {
  display: block;
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
}

.detail-placeholder { aspect-ratio: 4 / 3; }

/* 상세 페이지: 이미지 좌측 + 정보 우측 */
.work-top {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.work-top .work-image { flex: 1; min-width: 0; }

.work-side { width: 240px; flex-shrink: 0; padding-top: 48px; }
.work-side h1 { font-size: 1.25rem; margin-bottom: 6px; }
.side-caption {
  color: #999;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.work-side h3 { font-size: 0.85rem; color: #555; margin: 20px 0 6px; }
.side-related { font-size: 0.9rem; color: #333; }
.work-side .back-link { margin-top: 28px; }

/* 우측 패널의 상세 설명 */
.work-side .work-desc { margin-top: 20px; font-size: 0.9rem; color: #333; }
.detail-back { margin-bottom: 20px; }

.other-works { margin-top: 24px; padding-top: 24px; border-top: 1px solid #eee; }
.other-works h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 22px; }
.work-desc { margin-top: 14px; max-width: 640px; color: #333; font-size: 0.95rem; white-space: pre-line; }

.work-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 56px;
  font-size: 0.9rem;
}
.work-nav a { color: #888; }
.work-nav a:hover { color: #111; }
.work-count { color: #bbb; font-size: 0.85rem; }

/* ===== 작품 상세 슬라이드쇼 ===== */
.slider .slides { position: relative; }
.slider .slide { display: none; }
.slider .slide.active { display: block; animation: slideFade 0.8s ease both; }

/* 이미지가 여러 장일 때: 스테이지 높이 고정 → 전환돼도 레이아웃이 안 흔들림 */
.slider.multi .slides { height: 62vh; }
.slider.multi .slide { position: absolute; inset: 0; }
.slider.multi .slide.active { display: flex; align-items: center; justify-content: center; }
.slider.multi .slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@keyframes slideFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.slider .slide img {
  display: block;
  max-width: 100%;
  max-height: 75vh;
  width: auto;
  height: auto;
}
.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.slider-prev, .slider-next { display: none; }
.slider-prev-off, .slider-next-off {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  color: #999;
  padding: 2px 6px;
  transition: color 0.2s;
}
.slider-prev:hover, .slider-next:hover { color: #111; }
/* 메인 이미지: 확대(펼침 화살표) 커서 — 이미지 위에서만 */
.slider .slide { cursor: default; }
.slider .slide img {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='15' fill='white' fill-opacity='0.95'/%3E%3Cg stroke='black' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Cpath d='M18.5 13.5L25 7M25 7h-5.5M25 7v5.5'/%3E%3Cpath d='M13.5 18.5L7 25M7 25h5.5M7 25v-5.5'/%3E%3C/g%3E%3C/svg%3E") 16 16, zoom-in;
}

/* 꾹 누르면 뜨는 부분 확대 루페 (네모 박스) */
.loupe {
  position: fixed;
  width: 240px;
  height: 240px;
  border: 1px solid #111;
  background: #fff no-repeat;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 90;
  display: none;
}
.loupe.show { display: block; }
/* 루페 사용 중엔 커서 숨김 */
body.loupe-on, body.loupe-on * { cursor: none !important; }

/* 라이트박스 (전체 화면 확대 뷰어) */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  /* 확대 상태: 모음(축소) 화살표 커서 */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='15' fill='white' fill-opacity='0.95'/%3E%3Cg stroke='black' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Cpath d='M25 7l-6.5 6.5M18.5 13.5H24M18.5 13.5V8'/%3E%3Cpath d='M7 25l6.5-6.5M13.5 18.5H8M13.5 18.5V24'/%3E%3C/g%3E%3C/svg%3E") 16 16, zoom-out;
}
.lightbox.show { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  box-shadow: 0 10px 60px rgba(0,0,0,0.5);
}

/* 라이트박스 + / − 확대 버튼 (좌측 상단) */
.lightbox .lb-zoom-btns {
  position: absolute;
  top: 24px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.lightbox .lb-zoom-btns button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.2);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.lightbox .lb-zoom-btns button:hover { background: rgba(255,255,255,0.18); border-color: #fff; }

/* 라이트박스 닫기 버튼 (우측 상단 X) */
.lightbox .lb-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.2);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s, border-color 0.2s;
}
.lightbox .lb-close:hover { background: rgba(255,255,255,0.18); border-color: #fff; }

/* 라이트박스 이미지: 휠 확대 / 드래그 이동 */
.lightbox img { transition: transform 0.15s ease-out; will-change: transform; }

/* 라이트박스 좌우 화살표 (이미지가 여러 장일 때만) */
.lightbox .lb-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.2);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  z-index: 1;
  transition: background 0.2s, border-color 0.2s;
}
.lightbox.has-arrows .lb-arrow { display: block; }
.lightbox .lb-arrow:hover { background: rgba(255,255,255,0.18); border-color: #fff; }
.lightbox .lb-prev { left: 28px; }
.lightbox .lb-next { right: 28px; }

/* 라이트박스 하단 썸네일 */
.lightbox .lb-thumbs {
  position: absolute;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.lightbox .lb-thumb {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid transparent;
  background: #222;
  cursor: pointer;
  opacity: 0.5;
  overflow: hidden;
  transition: opacity 0.25s, border-color 0.25s;
}
.lightbox .lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.lightbox .lb-thumb.active, .lightbox .lb-thumb:hover { opacity: 1; }
.lightbox .lb-thumb.active { border-color: #fff; }

/* 썸네일 공간 확보 */
.lightbox.has-arrows { padding-bottom: 110px; }
.lightbox.has-arrows img { max-height: 78vh; }

/* 썸네일 스트립: 클릭하면 해당 이미지가 메인으로 */
.slider-thumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.slider-thumb {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid transparent;
  background: #f4f4f4;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.25s, border-color 0.25s;
  overflow: hidden;
}
.slider-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slider-thumb.active,
.slider-thumb:hover { opacity: 1; }
.slider-thumb.active { border-color: #111; }

/* Works 사이드바: By Years / By Series 토글 */
.view-toggle {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 0.85rem;
}
.view-toggle a { color: #bbb; letter-spacing: 0.03em; transition: color 0.2s; }
.view-toggle a:hover { color: #111; }
.view-toggle a.on { color: #111; font-weight: 600; border-bottom: 1px solid #111; }

/* Exhibitions 페이지: 가운데 정렬 토글 (전체 / 개인전 / 그룹전) */
.exh-toggle {
  justify-content: center;
  margin: -32px 0 48px;
}

/* 작품 상세: 시리즈 표기 */
.side-series { font-size: 0.85rem; margin: -16px 0 20px; }
.side-series a { color: #777; border-bottom: 1px solid #ddd; transition: color 0.2s, border-color 0.2s; }
.side-series a:hover { color: #111; border-color: #111; }

/* ===== Writings ===== */
.writing-list { list-style: none; }
.writing-list li { border-bottom: 1px solid #f2f2f2; }
.writing-list a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 14px 2px;
  transition: background 0.2s;
}
.writing-list a:hover { background: #fafafa; }
.writing-list .year { color: #999; min-width: 44px; font-size: 0.9rem; }
.writing-title { font-size: 0.98rem; }
.writing-author { color: #999; font-size: 0.85rem; margin-left: auto; }

.writing-detail { max-width: 720px; margin: 0 auto; }
.writing-detail h1 { font-size: 1.4rem; margin: 6px 0 8px; }
.writing-meta { color: #999; font-size: 0.85rem; margin-bottom: 36px; }
.writing-body {
  white-space: pre-line;
  color: #333;
  font-size: 0.98rem;
  line-height: 1.9;
}
.writing-link { margin-top: 32px; }
.writing-link a { color: #888; border-bottom: 1px solid #ddd; }
.writing-link a:hover { color: #111; }

/* ===== 작품 그리드 ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card .thumb { aspect-ratio: 4 / 3; margin-bottom: 14px; overflow: hidden; background: #f7f7f7; }
.card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.card a:hover .thumb img { transform: scale(1.04); }

/* 작품 페이지: 그리드 칸은 유지하고 이미지는 원본 비율대로 (PKM 갤러리 스타일) */
#works-content .grid { row-gap: 40px; } /* 카드 위아래 간격 살짝 여유 */
#works-content .card .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
}
#works-content .card .thumb:not(.placeholder) { background: transparent; }
#works-content .card a:hover .thumb img { transform: none; }
#works-content .card a:hover .thumb::after { background: transparent; }
#works-content .card .thumb img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.card figcaption { font-size: 0.85rem; font-weight: 400; color: #444; }
.card figcaption strong { font-weight: 400; }
.card figcaption span { color: inherit; }

/* 더보기 섹션 카드: 카테고리 라벨 + 제목 + 아래 연회색 날짜 */
.card figcaption.stack-caption strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #111;
}
.card figcaption .card-cat, .card-cat {
  display: block;
  font-size: 0.68rem;
  font-weight: 300;
  color: #b0b0b0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.card figcaption .card-date, .card-date {
  display: block;
  font-size: 0.75rem;
  color: #b8b8b8;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
/* 더보기 카드 요약문: 두 줄 말줄임(...) */
.card figcaption .card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.82rem;
  color: #777;
  line-height: 1.55;
  margin-top: 4px;
  white-space: normal;
}
.writing-list .card-cat { min-width: 90px; margin-bottom: 0; }

/* ===== 카드 호버 모션: 이미지 살짝 어두워지고 제목에 밑줄이 스르륵 ===== */
.card a .thumb,
.home-exh-card .exh-thumb { position: relative; }
.card a .thumb::after,
.home-exh-card .exh-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s ease;
  pointer-events: none;
}
.card a:hover .thumb::after,
.home-exh-card:hover .exh-thumb::after { background: rgba(0,0,0,0.07); }
.card a figcaption strong,
.home-exh-card h3 {
  display: inline;
  background-image: linear-gradient(#111, #111);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.35s ease;
  padding-bottom: 2px;
}
.card figcaption.stack-caption strong { display: inline-block; }
.card a:hover figcaption strong,
.home-exh-card:hover h3 { background-size: 100% 1px; }

/* 터치 기기: 밑줄·오버레이 호버 효과 전부 비활성화 */
@media (hover: none) {
  .card a figcaption strong,
  .home-exh-card h3 { background-image: none; }
  .card a:hover .thumb::after,
  .home-exh-card:hover .exh-thumb::after { background: rgba(0,0,0,0); }
}

/* ===== 페이지 이동 페이드아웃 ===== */
body.page-leave main {
  opacity: 0 !important;
  transition: opacity 0.16s ease !important;
}

/* ===== 홈 섹션 스크롤 리빌 ===== */
.section.reveal {
  opacity: 0;
  transform: translateY(48px); /* 더 뚜렷하게 */
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.section.reveal.reveal-in {
  opacity: 1;
  transform: none;
}

/* 전시(고정 스크롤) 섹션 전용 리빌: sticky 를 깨지 않게 내부 요소만 애니메이션 */
.exh-scroll .section-head,
.exh-scroll .view-all {
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.exh-scroll .exh-track { transition: opacity 0.8s ease; } /* 가로 이동(transform)과 충돌 방지 — 페이드만 */
.exh-scroll.reveal:not(.reveal-in) .section-head,
.exh-scroll.reveal:not(.reveal-in) .view-all {
  opacity: 0;
  transform: translateY(48px);
}
.exh-scroll.reveal:not(.reveal-in) .exh-track { opacity: 0; }

/* ===== 플레이스홀더 (실제 이미지로 교체) ===== */
.placeholder {
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 0.85rem;
}

/* ===== 전시 페이지 (가운데 제목 + 이미지/정보 리스트) ===== */
.exh-layout {
  max-width: none;
  margin: 0 auto;
  padding: 120px var(--hpad, 20px) 40px;
  min-height: 70vh;
}

.page-title {
  text-align: center;
  font-size: 3.8rem;
  letter-spacing: 0.01em;
  margin-bottom: 56px;
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif;
}

/* 이미지+텍스트 덩어리를 화면 중앙에 (우측 빈 공간 방지) */
.exh-item {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  margin: 0 auto 110px;
  max-width: 1100px;
}

.exh-image { width: 46%; flex-shrink: 0; }
.exh-image img { width: 100%; display: block; }
.exh-placeholder { aspect-ratio: 4 / 3; }

.exh-info { flex: 1; min-width: 0; }
.exh-info h2 { font-size: 1.2rem; margin-bottom: 6px; }

/* 호버 시 제목에 왼쪽→오른쪽 밑줄 */
.exh-info h2 {
  display: inline-block;
  position: relative;
}
.exh-info h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: #111;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.exh-item:hover .exh-info h2::after { transform: scaleX(1); }

/* 터치 기기(모바일)에서는 호버 밑줄 효과 없음 */
@media (hover: none) {
  .exh-info h2::after { display: none; }
}

/* 콘텐츠 영역 상단 제목 (Works 페이지) */
.content-title {
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  margin-bottom: 48px;
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif;
}
.exh-date {
  color: #999;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.exh-venue { color: #555; font-size: 0.9rem; margin-top: 4px; }
.exh-desc { margin-top: 20px; font-size: 0.95rem; color: #444; max-width: 480px; white-space: pre-line; }

/* ===== 전시 상세 페이지 ===== */
.exh-detail-image { margin-bottom: 28px; }
/* 프로젝트 상세: 정보 텍스트 아래에 이미지 */
.project-image-below { margin: 32px 0 0; }
.exh-detail-image > img { width: 100%; display: block; }
/* 슬라이더가 들어간 경우: 원본 비율 유지 */
.exh-detail-image .slide img { width: auto; max-width: 100%; }
.exh-detail h1 { font-size: 1.4rem; margin-bottom: 6px; }
.exh-detail-desc {
  margin-top: 24px;
  max-width: 640px;
  color: #444;
  font-size: 0.95rem;
  white-space: pre-line;
}

/* ===== 전시 목록 ===== */
.exhibition-list { list-style: none; }
.exhibition-list li {
  display: flex;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.95rem;
}
.exhibition-list .year { color: #999; min-width: 44px; }

/* ===== 소개 ===== */
.about-wrap { display: flex; gap: 32px; align-items: flex-start; }
.profile { width: 220px; aspect-ratio: 3 / 4; flex-shrink: 0; }
.about-text p { margin-bottom: 12px; max-width: 640px; color: #333; }

/* ===== 연락처 / 푸터 ===== */
.contact-line { margin-bottom: 6px; }
.contact-line a { border-bottom: 1px solid #ccc; }

/* ===== 푸터 (블랙 배경 + 화이트 글씨) ===== */
.site-footer {
  background: #111;
  color: #fff;
  margin-top: 100px;
  padding: 56px 20px;
  text-align: center;
  font-size: 0.8rem;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}
.footer-nav a { color: #999; transition: color 0.2s; }
.footer-nav a:hover { color: #fff; }

.site-footer p { color: #777; }

/* 푸터 상단 이름 */
.footer-name {
  color: #fff;
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}

.footer-icons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.site-footer .icon-circle {
  border-color: #3a3a3a;
  color: #aaa;
}
.site-footer .icon-circle:hover {
  background: #fff;
  color: #111;
  border-color: #fff;
}
.footer-copy { letter-spacing: 0.04em; font-size: 0.78rem; }


/* ===== 페이지네이션 (1 2 3 ›) ===== */
.pager {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 56px;
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif;
}
.pager .pg {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.9rem;
  color: #999;
  transition: color 0.2s, background 0.2s;
}
.pager a.pg:hover { color: #111; }
.pager .pg.on { background: #111; color: #fff; }
.pager .pg-next { font-size: 1.1rem; }

/* Writings 페이지: 정사각 이미지 좌측 + 글 정보 우측 (메인 섹션과 동일 형식) */
.writing-rows {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto; /* 덩어리 중앙 정렬 */
}
.writing-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: center;
}
.writing-row .thumb.sq {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f7f7f7;
}
.writing-row .thumb.sq img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.writing-row:hover .thumb.sq img { transform: scale(1.04); }
.writing-row .thumb.sq .placeholder { width: 100%; height: 100%; }
.writing-row-info h3 { font-size: 1.05rem; margin-bottom: 6px; }
.writing-row-info .home-excerpt { max-width: 520px; }
.writing-row-info .exh-date { margin-top: 8px; }

/* Projects 페이지: 카드 2열 크게 + 콘텐츠 영역이 화면을 채우게 */
#projects-content .grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
/* 다른 페이지와 같은 텍스트 위계: 회색 분류 → 굵은 제목 → 회색 장소·연도 */
.proj-caption { display: flex; flex-direction: column; gap: 2px; }
.card .proj-caption .home-cat { margin-bottom: 2px; color: #aaa; }
.card .proj-caption strong {
  font-weight: 600;
  font-size: 1rem;
  color: #111;
  line-height: 1.4;
}
.card .proj-caption .proj-venue { color: #777; font-size: 0.82rem; }
.card .proj-caption .exh-date { margin-top: 2px; color: #999; font-size: 0.8rem; }

@media (max-width: 768px) {
  .card .proj-caption strong { font-size: 0.9rem; }
}
body.subpage .exh-layout { min-height: 100vh; }

@media (max-width: 768px) {
  .writing-row { grid-template-columns: 38% 1fr; gap: 14px; }
  .writing-row-info h3 { font-size: 0.9rem; }
  .writing-row-info .home-excerpt { -webkit-line-clamp: 2; font-size: 0.78rem; }
  /* 모바일 분류 탭: 항목별 줄바꿈 없이(nowrap) 일정한 간격으로 */
  .view-toggle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    font-size: 0.85rem;
  }
  .view-toggle a { white-space: nowrap; }
  /* Works 페이지(좌측 제목 구조)의 토글은 좌측 정렬 */
  .page-layout .view-toggle, .sidebar .view-toggle { justify-content: flex-start; }

  /* 모바일 프로젝트: writings처럼 정사각 이미지 좌측 + 텍스트 우측 */
  #projects-content .grid { grid-template-columns: 1fr; gap: 28px; }
  /* 상세페이지 이전/다음: 모바일에선 화살표만 (텍스트 숨김) */
  .work-nav a {
    font-size: 0;
    border-bottom: none;
    padding: 8px 12px; /* 터치 영역 확보 */
  }
  .work-nav a::before { font-size: 1.3rem; color: #b5b5b5; }
  .work-nav a:first-child::before { content: "←"; }
  .work-nav a:last-child::before { content: "→"; }
  /* 화살표 글자 끝이 레이아웃 여백선에 정확히 닿게 (터치 패딩만큼 당김) */
  .work-nav a:first-child { margin-left: -12px; }
  .work-nav a:last-child { margin-right: -12px; }

  /* 카드 그룹은 중앙에, 각 카드의 왼쪽 라인은 서로 정렬 */
  #projects-content .grid { width: fit-content; max-width: 100%; margin: 0 auto; }
  #projects-content .card a {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
  }
  #projects-content .card figcaption { max-width: 55vw; }
  #projects-content .card .thumb {
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
    width: 132px;
    flex-shrink: 0;
  }
  #projects-content .card figcaption {
    text-align: left;
    font-size: 0.9rem;
  }
}

/* ===== 호버 줌 패널 (쿠팡식) ===== */
.hover-zoom {
  position: fixed;
  z-index: 40;
  background-color: #fff;
  background-repeat: no-repeat;
  border: 1px solid #e5e5e5;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.hover-zoom.show { opacity: 1; }

/* ===== 전시 상세: 국제갤러리식 (상단 이미지 좌 + 정보 우, 아래 섹션들) ===== */
/* 좌측 끝을 상단 로고(공통 여백선)와 정렬 — 국제갤러리식 */
.exh-detail-top {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  margin: 0 0 72px;
}
.exh-detail-top .exh-detail-image { width: 58%; flex-shrink: 0; margin-bottom: 0; }
.exh-detail-side { flex: 1; min-width: 0; padding-top: 44px; }
.exh-detail-side h1 { font-size: 1.5rem; margin-bottom: 8px; }

.exh-detail-section {
  margin: 0 0 72px; /* 좌측 정렬 — 제목·본문이 로고 세로선에 맞음 */
}
.exh-detail-section h3 {
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif;
}
.exh-detail-section .exh-detail-desc { margin-top: 0; }
.exh-detail-section .exh-detail-image { margin-bottom: 24px; }

@media (max-width: 768px) {
  .exh-detail-top { flex-direction: column; gap: 20px; margin-bottom: 48px; }
  .exh-detail-top .exh-detail-image { width: 100%; }
  .exh-detail-side { padding-top: 0; }
  .exh-detail-section { margin-bottom: 48px; }
}

/* 넓은 화면에서 작품 상세: 이미지+정보 블록을 가운데로 모음 */
.work-page .work-top {
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}

/* 전시 목록: 텍스트 블록을 이미지 상단보다 조금 아래에 */
@media (min-width: 769px) {
  .exh-item .exh-info { padding-top: 44px; }
}
@media (hover: hover) {
  .slider .slide img { cursor: crosshair; }
}

/* 홈 전시 가로 스크롤: 진행 인디케이터 */
.exh-progress {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
}
.exh-progress .ep-cur { color: #111; }
.exh-progress .ep-total { color: #b5b5b5; }
.exh-progress .ep-bar {
  flex: 1;
  height: 2px;
  background: #dcdcdc;
  position: relative;
}
.exh-progress .ep-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #111;
}
@media (max-width: 768px) {
  .exh-progress { display: none; } /* 모바일은 세로 나열이라 불필요 */
}

/* TOP 버튼 (검정 푸터 위 흰 영역, 우측 정렬) */
.to-top-wrap {
  display: flex;
  justify-content: center;
  padding: 0 44px;
  transform: translateY(100%); /* 버튼 높이만큼 아래로 */
  position: relative;
  z-index: 5;
}
.to-top { background: #fff; }
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 999px;
  color: #888;
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  padding: 8px 18px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif;
}
.to-top:hover { background: #111; color: #fff; border-color: #111; }
.to-top-arrow { font-size: 0.9rem; }

/* ===== Artist 페이지 ===== */
.artist-top {
  display: flex;
  gap: 56px;
  align-items: flex-start;
  margin-bottom: 90px;
}

.artist-photo { width: 300px; flex-shrink: 0; }
.artist-photo .profile { width: 100%; }

.artist-main { flex: 1; min-width: 0; }
.artist-main h2 {
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
  font-family: "Jost", "Pretendard Variable", Pretendard, sans-serif;
}
.artist-main .statement {
  max-width: 560px;
  color: #444;
  white-space: pre-line;
}

.artist-cv h2 {
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  margin-bottom: 28px;
}

.artist-icons {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.icon-circle {
  width: 34px;
  height: 34px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.icon-circle svg { width: 16px; height: 16px; }
.icon-circle:hover { background: #111; color: #fff; border-color: #111; }

.artist-section { margin-bottom: 48px; }
.artist-section h2 {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.artist-section h3 {
  font-size: 0.95rem;
  margin: 24px 0 10px;
  color: #555;
}
.artist-section p { max-width: 640px; color: #333; margin-bottom: 12px; }

.cv-list { list-style: none; }
.cv-list li {
  display: flex;
  gap: 20px;
  padding: 6px 0;
  font-size: 0.95rem;
}
.cv-list .year { color: #999; min-width: 44px; }

img.profile { object-fit: cover; }

/* ===== 모바일 (768px 이하) ===== */
@media (max-width: 768px) {
  .menu-btn { display: block; }

  body { --hpad: 20px; }
  .header-inner { padding: 22px 20px; }
  .hero-text { padding: 0 20px 48px; }
  .hero-caption { left: 20px; bottom: 36px; }

  /* 우측에서 슬라이드되는 메뉴 */
  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 74%;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    gap: 0;
    padding: 96px 36px 40px;
    box-shadow: -8px 0 30px rgba(0,0,0,0.08);
    transition: right 0.35s ease;
    z-index: 20;
  }
  .nav.open { right: 0; }
  .nav a {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid #f2f2f2;
    color: #111;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
  }

  /* 모바일: 메뉴가 화면 우측에 딱 붙게 (데스크탑용 여백 제거) */
  .nav { margin: 0; }

  /* 모바일: Works 옆 ▾ 화살표, 탭하면 하위 메뉴 펼침 */
  .nav-caret {
    display: inline-block;
    margin-left: 10px;
    color: #555;
    font-size: 1.05em;
    transition: transform 0.25s ease;
  }
  /* 하위 메뉴가 열려도 Works 는 검정 유지 (탭 시 흐려지는 효과 제거) */
  .nav a:hover { opacity: 1; }
  .nav-item.has-sub.open > a { color: #111; opacity: 1; }
  .nav-item.has-sub.open .nav-caret { transform: rotate(180deg); }

  .nav .sub-nav {
    display: none;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: none;
    padding: 0 0 4px;
    text-align: left;
  }
  .nav-item.has-sub.open .sub-nav { display: block; transform: none; }
  .nav-item.has-sub::after { display: none; }
  .sub-nav a {
    padding: 10px 0 10px 18px;
    font-size: 0.9rem;
    color: #888;
    border-bottom: none;
  }

  /* 메뉴 열렸을 때 뒤 배경 어둡게 */
  .nav-dim {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 9; /* 헤더(10)와 메뉴보다 아래 — 메뉴 클릭을 가로채지 않게 */
  }
  .nav-dim.show { opacity: 1; pointer-events: auto; }

  /* 모바일 그리드: 2개씩 정사각형 */
  .grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .card .thumb { aspect-ratio: 1 / 1; margin-bottom: 10px; }
  .card figcaption { font-size: 0.8rem; line-height: 1.4; }

  .about-wrap { flex-direction: column; }
  .profile { width: 60%; }

  /* 서브페이지: 사이드바를 위로 */
  .page-layout {
    flex-direction: column;
    gap: 24px;
    padding-top: 120px;
  }
  .sidebar h1 { font-size: 2.1rem; }
  .page-title { font-size: 2.1rem; margin-bottom: 40px; }
  .sidebar { position: static; width: auto; }
  .series-nav { display: flex; flex-wrap: wrap; gap: 14px; }
  .series-nav li { margin-bottom: 0; }

  /* 작품 상세: 모바일에선 이미지 아래에 정보, 이미지는 본문 폭에 맞춰 크고 중앙에 */
  .work-top .work-image { width: 100%; }
  .slider .slide img { max-height: none; margin: 0 auto; }
  .slider:not(.multi) .slide img { width: 100%; }
  .slider.multi .slides { height: 44vh; } /* JS 가 대표 이미지 비율로 재계산 */
  /* 이미지 높이 상한에 맞춰 개별 이미지도 넘치지 않게 */
  .slider.multi .slide img { max-height: 100%; }
  /* 화살표 없이 스와이프로 넘김 — 썸네일만 가운데에 작게 */
  .slider-prev, .slider-next { display: none; }
  .slider-controls { margin-top: 12px; gap: 10px; justify-content: center; }
  .slider-thumbs { justify-content: center; }
  .slider-thumb { width: 36px; height: 36px; }
  /* 모바일: 이전/다음 줄 — 1/6 카운터를 정중앙에, 위 구분선은 제거 (아래 섹션 구분선 하나만) */
  .work-nav {
    position: relative;
    border-top: none;
    padding-top: 0;
    margin-top: 24px;
  }
  .work-count {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 모바일: 뒤로가기 링크 없이 헤더 아래 바로 이미지 (헤더 메뉴·하단 다른 작품으로 이동 가능) */
  /* 이미지 위 여백 = 아래 썸네일 스트립 영역과 비슷하게 (헤더 75px + 약 48px) */
  .work-page.page-layout { padding-top: 124px; padding-left: 20px; padding-right: 20px; }
  .work-page .detail-back { display: none; }
  .work-top { flex-direction: column; gap: 20px; }
  .work-side { width: auto; padding-top: 0; }

  /* 전시: 모바일에선 이미지 아래에 정보 */
  .exh-item { flex-direction: column; gap: 16px; }
  .exh-image { width: 100%; }
  .exh-layout { padding-top: 120px; }

  /* Artist: 모바일에선 사진 먼저, 설명 아래 */
  .artist-top { flex-direction: column; gap: 28px; margin-bottom: 56px; }
  .artist-photo { width: 70%; }

  .section { padding: 44px 20px; }
  .section h2, .exh-sticky h2 { font-size: 1.5rem; }

  /* 모바일: Writings 라인 제거, 간격으로 글 구분 */
  .home-writing-card { border-top: none; padding-top: 0; }
  #home-writings .home-card-row { gap: 36px; }

  /* 모바일: 좌우 여백을 전 섹션 20px로 통일 (전시 포함) */
  body:not(.subpage) { --hpad: 20px; }

  /* 헤어라인도 같은 20px 지점에서 시작·끝 */
  main > .section::before, .exh-sticky::before { left: 20px; right: 20px; }

  /* 라인 기준 위아래 여백 동일 (모든 섹션 44px) */
  .hero + .section { padding-top: 44px; }

  /* 모바일: 타이틀 중앙, View all 은 콘텐츠 아래 중앙 */
  .section-head { justify-content: center; margin-bottom: 24px; }
  .section .view-all,
  .exh-sticky .view-all {
    text-align: center;
    margin-top: 28px;
    font-size: 0.85rem;
  }
  .series { margin-bottom: 64px; }
  .exh-item { margin-bottom: 64px; }

  /* 작품 상세 하단 카드: 정사각형 2개씩, 이름 없이 */
  .other-works .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .other-works .card .thumb { aspect-ratio: 1 / 1; margin-bottom: 0; }
  .other-works .card figcaption { display: none; }

  /* 메인 페이지: 정사각형 대표작 6개 (2개씩 3줄) */
  #home-works .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
  }
  #home-works .card:nth-child(n+7) { display: none; }
  #home-works .card .thumb { aspect-ratio: 1 / 1; margin-bottom: 10px; }
  #home-works .card figcaption { font-size: 0.8rem; line-height: 1.4; }

  /* 모바일 확대 뷰어: +/- 버튼과 좌우 화살표 숨김 (스와이프로 넘김) */
  .lightbox .lb-zoom-btns,
  .lightbox .lb-arrow { display: none !important; }

  /* 메인 미리보기 카드: 모바일에선 세로로 한 줄씩 */
  /* 프로젝트: 모든 카드 같은 크기(전체 폭)로 세로 나열 */
  .home-exh-row, .home-card-row { grid-template-columns: 1fr; gap: 40px; }

  /* Writings: 정사각형 이미지 좌측 + 종류·제목·날짜 우측 (이미지 기준 상하 중앙) */
  #home-writings .home-card-row { grid-template-columns: 1fr; gap: 28px; }
  #home-writings .home-writing-card {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 0 14px;
    align-items: center;
  }
  #home-writings .home-writing-card .exh-thumb {
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
    grid-row: 1 / span 3;
  }
  #home-writings .home-writing-card .home-cat { margin: 0 0 4px; font-size: 0.6rem; align-self: end; }
  #home-writings .home-writing-card h3 {
    font-size: 0.9rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #home-writings .home-writing-card .exh-date { margin-top: 4px; font-size: 0.7rem; align-self: start; }
  .home-exh-card h3 { font-size: 0.9rem; }
  .home-exh-card .exh-date, .home-exh-card .exh-venue { font-size: 0.75rem; }

  /* 전시 페이지: 최근 전시 크게, 이전 전시 2개 작게 */
  #exh-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  /* 모든 전시 카드 같은 크기 (전체 폭) — 데스크톱 중앙정렬 margin 해제 */
  #exh-list .exh-item { margin: 0; width: 100%; max-width: none; }
}


/* 메인 전시 가로 인터랙션: 모바일에선 비활성화하고 세로 배치 */
@media (max-width: 768px) {
  body:not(.subpage) .section { padding-left: 20px; padding-right: 20px; }

  /* 푸터 메뉴 5개가 잘리지 않게 간격·크기 축소 */
  .footer-nav { gap: 14px; font-size: 0.78rem; flex-wrap: wrap; padding: 0 10px; }
  .exh-scroll { height: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; }
  .exh-sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: 44px 20px;
  }
  .exh-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 12px;
    transform: none !important;
  }
  .exh-track .home-exh-card { width: auto; }
  /* 최근 전시 크게 + 아래 2개 */
  .exh-track .home-exh-card:first-child { grid-column: 1 / -1; }
  .exh-track .home-exh-card:first-child .exh-thumb { aspect-ratio: 4 / 3; }
  /* 모바일: 최근 1개 + 과거 2개만 */
  .exh-track .home-exh-card:nth-child(n+4) { display: none; }
}