/* ===== Work Detail base ===== */
:root {
  --header-h: 72px; /* 고정 헤더 높이(필요시 조정) */
  --max-w-wide: 1400px;
  --max-w-body: 1000px;
  --pad-x: 4px;
}

.work {
  background: #000;
  color: #fff;
}
.spacer {
  height: var(--header-h);
}
.credits {
  max-width: min(var(--max-w-body), 92vw);
  margin: 0 auto 36px;
  line-height: 1.8;
  margin-top: 16px;
  color: #bfbfbf;
  font-family: "Space Mono", monospace;
  /* font-family: "Barlow Condensed", sans-serif; */
  font-size: clamp(10px, 1.3vw, 12px);
}
/* 헤드 */
.work-head {
  max-width: min(var(--max-w-body), 92vw);
  margin: 32px auto 20px;
  padding: 0 var(--pad-x);
}
.work-head .crumb {
  color: #cfcfcf;
  font-family: "Space Mono", monospace;
  font-size: clamp(11px, 1.2vw, 13px);
  margin-bottom: 6px;
  opacity: 0.85;
}
.work-head .crumb a {
  color: #cfcfcf;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.work-head h1 {
  font-family: "Barlow Condensed", sans-serif;
  /* font-family: "Archivo", system-ui, -apple-system, sans-serif; */
  font-weight: 500;
  font-size: clamp(20px, 5vw, 30px);
  letter-spacing: 0.02em;
}
.work-head .meta {
  margin-top: 6px;
  color: #cfcfcf;
  font-family: "Space Mono", monospace;
  font-size: clamp(12px, 1.4vw, 15px);
}

/* 비디오 — 두 가지 모드 지원 */
/* 1) 클릭-to-Play 썸네일 버튼 */
.video {
  max-width: 950px;
  margin: 16px auto 28px;
}
.video .video-lazy {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  display: inline-block;
  border: 0;
  padding: 0;
  background: #0a0a0a;
  cursor: pointer;
}
.video .video-lazy img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9;
}
.video .video-lazy .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px; /* 아이콘 크기 */
  color: white; /* 색상 */
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.8); /* 배경 대비 */
  pointer-events: none; /* 클릭 방해 안 함 */
}

/* 2) 즉시 iframe 모드 (ratio 래퍼) */
.video .ratio {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #0a0a0a;
  overflow: hidden;
  border-radius: 4px;
}
.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 설명 */
.desc {
  max-width: min(var(--max-w-body), 92vw);
  margin: 0 auto 36px;
  line-height: 1.8;
  color: #ddd;
  font-size: clamp(12px, 1.5vw, 14px);
}
.desc .credits {
  margin-top: 16px;
  color: #bfbfbf;
  font-family: "Space Mono", monospace;
  /* font-family: "Barlow Condensed", sans-serif; */
  font-size: clamp(10px, 1.3vw, 12px);
}
.desc .credits li + li {
  margin-top: 6px;
}

/* 스틸컷 */
.stills {
  max-width: min(var(--max-w-wide), 94vw);
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.stills img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 3px;
  grid-column: span 6; /* 기본 2열 */
  aspect-ratio: 16/9; /* 레이아웃 안정화, CLS 방지 */
}

@media (max-width: 900px) {
  .stills img {
    grid-column: span 12;
  } /* 모바일 1열 */
}

/* 페이지 네비 */
.pager {
  max-width: min(1200px, 92vw);
  margin: 10px auto 0;
  padding: 18px var(--pad-x) 40px;
  display: flex;
  justify-content: space-between;
  /* font-family: "Space Mono", monospace; */
  font-family: "Barlow Condensed", sans-serif;
}
.pager a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.pager a:hover {
  opacity: 0.75;
}

.bottom-space {
  height: 10vh;
}