body {
  margin: 0;
  padding: 0;
  font-family: 'Nanum Gothic', 'Malgun Gothic', 'Dotum', 'AppleGothic', 'gulim', sans-serif;
  font-size: 13px;
  color: #6d6e71;
  background-color: #fff;
  line-height: 1.48;
  -webkit-text-size-adjust: none;
}

.container {
  width: 100%;
  max-width: 898px;
  margin: 0 auto;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInAll 1s ease-out forwards;
  box-sizing: border-box;
}

.container2 {
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
}

@keyframes fadeInAll {
  to { opacity: 1; transform: translateY(0); }
}

h1 {
  text-align: center;
  font-size: clamp(8px, 6vw, 28px);
  letter-spacing: 0.1em;
  color: #222;
  margin: 46px 0 15px 0;
  white-space: nowrap;
}

@font-face {
  font-family: 'Nanum Gothic ExtraBold';
  src: url('/assets/fonts/NanumGothic-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

.earth-bold {
  font-size: 1em;
  font-family: 'Nanum Gothic ExtraBold';
  font-weight: 800;
}

nav {
  text-align: center;
  margin: 0 0 30px;
  white-space: nowrap;
}
nav a {
  margin: 0 2.5%;
  font-size: clamp(3px, 3vw, 14px);
  text-decoration: none;
  color: #666;
}
nav a.on, nav a:hover { font-weight: bold; color: #111; }

/* ====== 갤러리 뷰포트: 높이 고정(비율) ====== */
.gallery-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;           /* PC/태블릿 기본 비 */
  background: #fff;              /* 레터박스 색 */
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;           /* 세로 스크롤 허용 */
}
@media (max-width: 640px){
  .gallery-wrapper { aspect-ratio: 4 / 3; } /* 필요 시 3/2, 1/1로 조절 가능 */
}

/* 슬라이드 트랙 */
.gallery-track {
  display: flex;
  height: 100%;
  transition: transform 0.3s ease;
  will-change: transform;
}

/* 각 슬라이드(이미지) */
.gallery-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;           /* ✅ 크롭 없이 전체 표시 */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;          /* 터치 제스처는 wrapper가 받도록 */
}

/* 페이지네이션 */
.gallery-pagination { text-align: center; margin: 12px 0 0; }
.page-dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: #c2c8ce;
  margin: 0 3px;
  border: 0; padding: 0;
  cursor: pointer;
  transition: background .2s ease;
}
.page-dot.active { background: #666; }

/* 하단 정보 */
.work-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #56606a;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 30px;
  margin-bottom: 40px;
  text-align: center;
}
#work-title    { font-size: 12px; color: #6c7a89; margin-bottom: 1px; }
#work-subtitle { font-size: 12px; color: #6c7a89; margin-bottom: 1px; }
#work-since    { font-size: 12px; color: #6c7a89; margin-bottom: 1px; }

/* 모바일 터치 잉크/포커스 제거(선호 시) */
* { -webkit-tap-highlight-color: transparent !important; }
*:focus { outline: none !important; box-shadow: none !important; }