@font-face {
  font-family: "J직지고딕";
  src: url("../fonts/JikjiGothic-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "J직지고딕";
  src: url("../fonts/JikjiGothic-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: "J직지고딕", sans-serif;
  font-size: calc(14 * var(--px));
  line-height: calc(20 * var(--px));
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

/* 사이드바 + 2단 그리드: 콘텐츠 시작선, 사이드바 폭·왼쪽 여백, 오른쪽 여백 */
:root {
  /* 맥북 기준(폭 1512px까지) 1px, 더 큰 화면은 아래 브레이크포인트마다 한 단계씩 커지는 단위 — 글자·행간·사이드바·여백에 쓴다 */
  --px: 1px;
  --content-top: calc(42 * var(--px));
  /* 10칸 그리드(칸 127.2, 간격 20, 좌우 여백 30): 왼쪽 2칸 + 콘텐츠 8칸. --sidebar-w는 여백 + 2칸 + 간격 */
  --sidebar-w: calc(324.4 * var(--px));
  --side: calc(30 * var(--px));
  --gutter: calc(30 * var(--px));
  --col-gap: calc(20 * var(--px));
  --detail-top: calc(42 * var(--px));
  --list-leading: calc(25 * var(--px)); /* 왼쪽 메뉴와 디자이너 리스트가 같이 쓰는 행간 */
}

/* 화면 폭 브레이크포인트: 값 = 폭 / 1512 */
@media (min-width: 1728px) {
  :root {
    --px: 1.143px;
  }
}

@media (min-width: 1920px) {
  :root {
    --px: 1.27px;
  }
}

@media (min-width: 2240px) {
  :root {
    --px: 1.481px;
  }
}

@media (min-width: 2560px) {
  :root {
    --px: 1.693px;
  }
}

@media (min-width: 3008px) {
  :root {
    --px: 1.989px;
  }
}

@media (min-width: 3840px) {
  :root {
    --px: 2.54px;
  }
}

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

img {
  display: block;
  max-width: 100%;
}

.sidebar {
  position: fixed;
  top: var(--content-top);
  left: 0;
  bottom: 0;
  z-index: 15;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 var(--col-gap) calc(22 * var(--px)) var(--side);
}

.brand {
  display: block;
  font-weight: 700;
}

.nav > a,
.nav__group > a {
  display: block;
  font-weight: 700;
}

.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: calc(47 * var(--px));
  line-height: var(--list-leading);
}

.nav a.is-current {
  cursor: default;
  text-decoration: underline;
  text-underline-offset: calc(3 * var(--px));
}

/* 디자이너와 프로젝트 사이는 3px 좁게 */
.nav__group {
  margin-top: calc(-3 * var(--px));
}

/* 프로젝트 호버 시 하위 분류 노출 (분류 선택 중에는 계속 열림) */
.nav__sub {
  display: none;
  list-style: none;
  margin-top: calc(-2 * var(--px)); /* 프로젝트와 하위 분류 사이만 2px 좁게 */
  padding-left: calc(14 * var(--px));
}

.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub,
.nav__group.is-open .nav__sub {
  display: block;
}

.nav__sub a {
  display: block;
}

.nav__sub a:hover,
.nav__sub a.is-current {
  text-decoration: underline;
  text-underline-offset: calc(3 * var(--px));
}

.credits {
  display: block;
}

.stage {
  height: 100vh;
  padding: 0 var(--gutter) 0 var(--sidebar-w);
}

.main {
  height: 100%;
  min-height: 0;
}

.scroll {
  height: 100%;
  min-width: 0;
}

.works {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(15 * var(--px));
  height: 100%;
}

.works__col {
  display: flex;
  flex-direction: column;
  gap: calc(42 * var(--px));
  min-width: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-top: var(--content-top);
  padding-bottom: calc(90 * var(--px));
}

.works__col::-webkit-scrollbar {
  display: none;
}

.work {
  min-width: 0;
}

.work__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #111;
}

.work__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work__caption {
  margin-top: calc(8 * var(--px));
  font-size: calc(14 * var(--px));
  line-height: calc(20 * var(--px));
  white-space: pre-line;
}

.work__caption strong {
  font-weight: 700;
}

.work.has-detail {
  cursor: pointer;
}

/* 상세 팝업 — 화면 전체를 덮는다 */
.detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  background: #000;
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
    visibility 0s linear 0.6s;
}

.detail.is-open {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
    visibility 0s;
}

/* 왼쪽 제목·설명 열 */
.detail__info {
  flex: 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--detail-top) var(--col-gap) calc(22 * var(--px)) var(--side);
  overflow-y: auto;
  scrollbar-width: none;
}

.detail__heading strong {
  font-weight: 700;
}

.detail__desc {
  margin-top: calc(25 * var(--px));
  font-size: calc(14 * var(--px));
  line-height: calc(22 * var(--px));
  word-break: keep-all;
  white-space: pre-line; /* 설명 안의 \n을 줄바꿈으로 */
}

.detail__link {
  display: inline-block;
  margin-top: calc(18 * var(--px));
  font-size: calc(12 * var(--px));
  line-height: calc(18 * var(--px));
  text-decoration: underline;
  text-underline-offset: calc(3 * var(--px));
}

.detail__link[hidden],
.detail__email[hidden] {
  display: none;
}

/* 메일 주소: 메인 사이드바의 '전시를 만든 사람들'과 같은 자리(맨 아래) */
.detail__email {
  margin-top: auto;
  padding-top: calc(30 * var(--px));
}

.detail__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
}

.detail__video.is-vertical {
  align-self: flex-start;
  width: auto;
  height: min(80vh, calc(900 * var(--px)));
  aspect-ratio: 9 / 16;
}

.detail__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.detail__video.is-fallback {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

/* 파일로 열었을 때 재생 버튼을 누르면 뜨는 안내 */
.detail__video-note {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 calc(30 * var(--px));
  background: rgba(0, 0, 0, 0.75);
  text-align: center;
  word-break: keep-all;
}

.detail__video.is-noted .detail__video-note {
  display: flex;
}

.detail__video.is-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail__video.is-fallback::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
}

.detail__mp4 {
  display: block;
  width: 100%;
  background: #111;
}

.detail__images {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--px));
  padding: var(--detail-top) calc(70 * var(--px)) calc(90 * var(--px)) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.detail__images img {
  width: 100%;
  height: auto;
}

.detail__info::-webkit-scrollbar,
.detail__images::-webkit-scrollbar {
  display: none;
}

.detail__close {
  position: absolute;
  top: var(--detail-top);
  right: var(--gutter);
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.detail__close::before,
.detail__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(1.5 * var(--px));
  background: currentColor;
}

.detail__close::before {
  transform: rotate(45deg);
}

.detail__close::after {
  transform: rotate(-45deg);
}

/* 디자이너 페이지 — 프로젝트 그리드와 같은 자리에 이름·작품 표 */
.designers {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  padding: var(--content-top) 0 calc(90 * var(--px));
}

.designers::-webkit-scrollbar {
  display: none;
}

/* 한 사람씩 묶음: 이름 아래에 작품을 쌓는다. 열 폭은 그 열에서 가장 긴 제목 기준 (자리가 모자라면 줄어들며 줄바꿈) */
.designers__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, max-content));
  column-gap: calc(80 * var(--px));
  row-gap: calc(32 * var(--px));
  line-height: var(--list-leading);
  word-break: keep-all;
}

.designers__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.designers__name,
.designers__work {
  position: relative;
  z-index: 1; /* 호버 사진보다 위 */
  cursor: default;
  text-underline-offset: calc(3 * var(--px));
}

.designers__work {
  cursor: pointer;
}

/* 밑줄도 글자별로 그어야 검정이 된 글자에서 같이 검정이 된다 */
.is-hover .designers__char {
  text-decoration: underline;
}

.designers__char.is-dark {
  color: #000;
}

/* 호버한 작품 사진 — 호버한 줄 자리에, 글자 뒤로 뜬다 (위치는 designers.js) */
.preview {
  position: fixed;
  z-index: 0;
  display: flex;
  gap: calc(10 * var(--px));
  pointer-events: none;
}

.preview img {
  width: auto;
  height: calc(200 * var(--px));
  max-width: none;
}

/* 커서: 끈적하게 이어지는 빨간 원 — 기본 커서는 모든 요소에서 숨김 */
@media (hover: hover) and (pointer: fine) {
  *,
  *::before,
  *::after {
    cursor: none !important;
  }
}

.cursor-filter {
  position: absolute;
  width: 0;
  height: 0;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  filter: url("#cursor-goo");
}

.cursor span {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f0162e;
}

.cursor.is-visible {
  opacity: 1;
}

/* 랜딩 — 시안 프레임 비율(288:186)의 무대 가운데에 그래픽 한 장씩 */
.landing {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.landing__stage {
  position: relative;
  width: min(100vw, 154.84vh);
  aspect-ratio: 288 / 186;
}

.landing__stage img {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%);
}

.landing__stage img.is-current {
  display: block;
}

/* 부적 */
.talismans {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.talisman {
  position: absolute;
  height: auto;
  max-width: none;
  pointer-events: auto;
  user-select: none;
}

/* 전시를 만든 사람들 — 소개 / 위원회 / 작품지도 / 포스터(화면 높이에 맞춰 전체가 보이게) */
.detail.credits-page {
  display: grid;
  /* 소개 2칸 / 위원회 2칸 / 작품지도 / 포스터 — 앞의 두 열은 2칸 + 간격 */
  grid-template-columns: calc(294.4 * var(--px)) calc(294.4 * var(--px)) minmax(calc(120 * var(--px)), 1fr) auto;
  align-items: start;
  align-content: start;
  padding: calc(29 * var(--px)) calc(71 * var(--px)) calc(29 * var(--px)) var(--side);
  overflow-y: auto;
  scrollbar-width: none;
  background: linear-gradient(rgba(0, 0, 0, 0.8), #000 46%);
}

.credits-page__title {
  display: none;
  font-size: inherit;
  font-weight: 700;
}

.credits-page__intro {
  width: calc(274.4 * var(--px));
  word-break: keep-all;
}

/* 일시·장소·인스타그램의 아랫선을 위원회 단의 아랫선에 맞춘다 */
.credits-page__lead {
  min-height: calc(323 * var(--px));
  white-space: nowrap; /* 데스크톱은 정해 둔 줄바꿈(br) 그대로 끝흘리기 */
}

.credits-page__intro > p:last-child {
  margin-top: calc(20 * var(--px));
}

.credits-page__people p + p {
  margin-top: calc(20 * var(--px));
}

.credits-page__people .credits-page__heading {
  margin-bottom: calc(23 * var(--px));
}

.credits-page__advisors .credits-page__heading {
  margin-bottom: calc(18 * var(--px));
}

.credits-page__poster {
  width: min(calc((100vh - calc(58 * var(--px))) * 0.5915), calc(100vw - calc(810 * var(--px))));
  max-width: none;
  height: auto;
}

/* 좁은 데스크톱: 작품지도를 위원회 아래로 옮겨 포스터 자리를 확보 */
@media (max-width: 1023px) {
  .designers__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail.credits-page {
    grid-template-columns: 220px 200px 1fr;
  }

  .credits-page__lead {
    min-height: 0;
    margin-bottom: 20px;
  }

  .credits-page__intro {
    width: 190px;
    grid-row: 1 / span 2;
  }

  .credits-page__advisors {
    grid-column: 2;
    grid-row: 2;
    margin-top: 40px;
  }

  .credits-page__poster {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    width: min(calc((100vh - 58px) * 0.5915), calc(100vw - 521px));
  }
}

/* 터치 기기: 호버가 없으므로 프로젝트 페이지에서는 분류를 항상 보여 준다 */
@media (hover: none) {
  .nav__group.on-projects .nav__sub {
    display: block;
  }

  .is-hover .designers__char {
    text-decoration: none;
  }
}

.talisman {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* 모바일 전용 요소는 데스크톱에서 숨긴다 */
.menu-toggle,
.mobile-menu,
.detail__brand,
.detail__thumb {
  display: none;
}

/* 모바일: 상단 바 + 1열 (common.js의 mobileQuery와 같은 조건) */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
  :root {
    --side: 11px;
    --gutter: 11px;
    --bar-h: 71px;
  }

  html,
  body {
    height: auto;
    overflow: visible;
    -webkit-text-size-adjust: 100%;
  }

  /* 팝업·메뉴가 열려 있는 동안 뒤 페이지가 같이 스크롤되지 않게 */
  html:has(.detail.is-open),
  html:has(.detail.is-open) body,
  html:has(.mobile-menu.is-open),
  html:has(.mobile-menu.is-open) body {
    overflow: hidden;
  }

  /* 상단 바: 전시명 + 3선 메뉴 */
  .sidebar {
    top: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: var(--bar-h);
    flex-direction: row;
    align-items: flex-start;
    padding: 13px var(--side) 0;
  }

  /* 상단 바는 투명. 빈 부분은 뒤 콘텐츠를 그대로 누를 수 있다 */
  .sidebar {
    pointer-events: none;
  }

  .sidebar .brand,
  .menu-toggle {
    pointer-events: auto;
  }

  /* 뒤 사진이 밝을 때 (common.js의 watchBarTint) */
  .brand__line.is-dark,
  .menu-toggle.is-dark,
  .detail__close.is-dark {
    color: #000;
  }

  .sidebar > div {
    display: contents;
  }

  .sidebar .nav,
  .sidebar .credits {
    display: none;
  }

  .menu-toggle {
    position: relative;
    display: block;
    flex: none;
    width: 44px;
    height: 44px;
    margin: -8px -12px 0 auto;
    border: 0;
    background: none;
    color: #fff;
  }

  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 1.5px;
    background: currentColor;
  }

  .menu-toggle span {
    top: 50%;
    margin-top: -0.75px;
  }

  .menu-toggle span::before,
  .menu-toggle span::after {
    content: "";
    left: 0;
  }

  .menu-toggle span::before {
    top: -8px;
  }

  .menu-toggle span::after {
    top: 8px;
  }

  /* 메뉴: 프로젝트 / 디자이너 2열 왼쪽 정렬, 전시를 만든 사람들은 맨 아래 */
  .mobile-menu.is-open {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(0, 0, 0, 0.8);
    font-size: 15px;
    line-height: 26px;
  }

  .detail__close.mobile-menu__close {
    position: absolute;
    top: 0;
    right: -4px;
    margin: 0;
  }

  .mobile-menu__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: var(--side);
    min-height: 100%;
    padding: var(--bar-h) var(--side) 24px;
  }

  .mobile-menu__group a,
  .mobile-menu__group span {
    display: block;
    width: fit-content;
  }

  .mobile-menu__heading {
    margin-bottom: 6px !important;
    font-weight: 700;
  }

  .mobile-menu .is-current {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .mobile-menu__credits {
    grid-column: 1 / -1;
    align-self: end;
    justify-self: start;
    margin-top: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
  }

  .stage {
    height: auto;
    padding: var(--bar-h) var(--gutter) 0;
  }

  .main,
  .scroll {
    height: auto;
  }

  /* 프로젝트: 두 열을 합쳐 1열로 */
  .works {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: auto;
    padding-bottom: 48px;
  }

  .works__col {
    display: contents;
  }

  .work__caption {
    margin-top: 6px;
  }

  /* 디자이너: 이름 아래에 작품을 쌓는다 */
  .designers {
    height: auto;
    overflow: visible;
    padding: 0 0 48px;
    font-size: 15px;
    line-height: 24px;
  }

  .designers__list {
    display: block;
    line-height: inherit;
  }

  .preview {
    display: none;
  }

  .designers__name,
  .designers__work {
    display: block;
  }

  .designers__block {
    display: block;
    margin-top: 24px;
  }

  .designers__block:first-child {
    margin-top: 0;
  }

  /* 팝업 공통: 전체가 한 번에 스크롤, 전시명과 닫기 버튼은 위에 고정 */
  .detail,
  .detail.credits-page {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .detail__brand {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    flex: none;
    order: -2;
    align-self: flex-start; /* 글자 폭만 차지해 뒤 영상 조작을 가리지 않게 */
    height: var(--bar-h);
    font-weight: 700;
    padding: 13px var(--side) 0;
  }

  .detail__close {
    position: sticky;
    top: 0;
    right: auto;
    z-index: 2;
    flex: none;
    order: -1;
    align-self: flex-end;
    width: 44px;
    height: 44px;
    margin: calc(var(--bar-h) * -1) -4px calc(var(--bar-h) - 44px) 0;
  }

  .detail__close::before,
  .detail__close::after {
    left: 12px;
    width: 20px;
  }

  /* 상세: 썸네일 → 캡션 → 설명 → 영상과 나머지 이미지 */
  .detail__thumb {
    display: block;
    flex: none;
    align-self: center;
    width: calc(100% - var(--side) * 2);
    max-width: none;
    aspect-ratio: 4 / 3;
    margin-top: 11px;
    object-fit: cover;
    background: #111;
  }

  .detail__info {
    flex: none;
    overflow: visible;
    padding: 8px var(--side) 32px;
  }

  .detail__desc {
    margin-top: 18px;
    font-size: 15px;
    line-height: 24px;
  }

  .detail__link,
  .detail__email {
    font-size: 15px;
    line-height: 24px;
  }

  .detail__images {
    flex: none;
    overflow: visible;
    gap: 12px;
    padding: 0 var(--gutter) 48px;
  }

  .detail__video.is-vertical {
    max-width: 100%;
  }

  /* 전시를 만든 사람들: 제목·소개 → 포스터 → 위원회 → 작품지도 / 제목이 상단과 겹치지 않게 불투명 */
  .detail.credits-page {
    background: #000;
    font-size: 15px;
    line-height: 24px;
  }

  .credits-page .detail__close {
    margin: 0 -4px -44px 0;
  }

  .credits-page__title {
    display: block;
  }

  .credits-page__intro {
    flex: none;
    order: 1;
    width: auto;
    padding: 13px var(--side) 32px;
  }

  .credits-page__intro > * + * {
    margin-top: 20px;
  }

  .credits-page__intro > .credits-page__title + p {
    margin-top: 40px;
  }

  .credits-page__lead {
    min-height: 0;
    white-space: normal;
  }

  /* 모바일은 화면 폭에 맞춰 자연스럽게 줄바꿈 */
  .desktop-br {
    display: none;
  }

  .credits-page__poster {
    flex: none;
    order: 2;
    align-self: center;
    width: calc(100% - var(--side) * 2);
    max-width: 480px;
  }

  .credits-page__people {
    flex: none;
    order: 3;
    padding: 32px var(--side) 0;
  }

  .credits-page__advisors {
    flex: none;
    order: 4;
    padding: 32px var(--side) 48px;
  }

  /* 랜딩: 세로 화면에서도 그래픽이 작아지지 않게 무대를 키운다 */
  .landing {
    overflow: hidden;
  }

  .landing__stage {
    flex: none;
    width: min(240vw, 154.84vh);
  }
}