@font-face {
  font-family: 'GeneralSans-Medium';
  src: url('fonts/GeneralSans-Medium.woff2') format('woff2'),
       url('fonts/GeneralSans-Medium.woff') format('woff'),
       url('fonts/GeneralSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: block;
  font-style: normal;
}

@font-face {
  font-family: 'GeneralSans-Bold';
  src: url('fonts/GeneralSans-Bold.woff2') format('woff2'),
       url('fonts/GeneralSans-Bold.woff') format('woff'),
       url('fonts/GeneralSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: block;
  font-style: normal;
}

@font-face {
  font-family: 'SALT4VF';
  src: url('fonts/SALT4VF.woff2') format('woff2'),
       url('fonts/SALT4VF.woff') format('woff'),
       url('fonts/SALT4VF.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ===== tokens =====
   768px 이상(태블릿~랩탑~데스크탑)은 하나의 공식으로 부드럽게 변함
   - 글자: 1280px ≈ 19px, 1440px ≈ 19.3px, 2048px ≈ 21px, 2560px ≈ 22.7px
   - 간격은 대부분 em 단위라 글자 크기를 따라감
   768px 미만만 모바일 값으로 덮어씀 */
:root {
  --bg: rgb(229, 229, 229);
  --fg: #000;
  --muted: #a9a9a9;          /* 카드 카테고리, 드롭다운 hover 시 흐려지는 색 */
  --placeholder: #d6d6d6;    /* 이미지 없을 때 회색 박스 */

  --fs: clamp(21.5px, calc(18.5px + 0.3vw), 32px); /* 전체 텍스트 크기 */
  --works-x: 23%;            /* 'works' 와 드롭다운이 시작하는 x 위치 */
  --gap: clamp(14px, 1vw, 24px); /* 이미지 사이 간격 */
  --row-gap: 3em;            /* 메인 그리드 행 간격 */
  --main-top: 3em;           /* nav 아래 첫 콘텐츠까지 */
  --indent: 3.2em;           /* 설명 두번째 문단 들여쓰기 */
  --page-bottom: 6em;        /* 스크롤 맨 아래 여백 */
  --pop-h: 13.5vw;           /* 호버 이미지 높이 */
  /* 양옆 여백: 기본 20px. 창이 넓어지면 아래 '양옆 여백 점프' media query 에서 바뀜 */
  --side: 20px;
  --menu-dur: 0.45s;         /* 드롭다운 열고 닫는 시간 */
  --menu-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== basic set ===== */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background-color: rgb(229, 229, 229);
  margin: 20px var(--side) 20px var(--side);
  letter-spacing: 0.3pt;
  font-family: 'GeneralSans-Medium';
  line-height: 1.1;

  color: var(--fg);
  font-size: var(--fs);
}

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

button {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

figure, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; width: 100%; height: auto; }

:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* ===== header / nav ===== */
.nav {
  display: grid;
  grid-template-columns: var(--works-x) 1fr auto;
  align-items: baseline;
}

.nav-works { justify-self: start; }

/* ===== works dropdown ===== */
.works-menu {
  margin: 1.3em 0 0 var(--works-x);
  display: grid;
  /* 카테고리 열: 넓은 화면에서는 7.1vw 로 고정, 좁으면 글자 폭만큼 */
  grid-template-columns: minmax(max-content, 7.1vw) max-content;
  column-gap: 0;
}
.menu-cat { padding-right: 0.6em; }

/* 열고 닫는 모션: 높이가 위에서 아래로 펼쳐지고, 아래 콘텐츠가 함께 밀려남 */
.works-menu-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--menu-dur) var(--menu-ease);
}
.site-header.menu-open .works-menu-wrap { grid-template-rows: 1fr; }
.works-menu-clip { overflow: hidden; min-height: 0; }

.menu-group { display: contents; }
.menu-cat   { grid-column: 1; }
.menu-list  { grid-column: 2; }

.menu-cat,
.menu-list a { transition: color 0.15s ease; }

/* web3: 작품명에 hover → 해당 작품 + 그 카테고리만 검정, 나머지 회색 */
@media (hover: hover) {
  .works-menu:has(a:hover) :is(.menu-cat, a) { color: var(--muted); }
  .works-menu .menu-group:has(a:hover) .menu-cat,
  .works-menu .menu-list a:hover { color: var(--fg); }
}

/* ===== main ===== */
main {
  margin-top: var(--main-top);
  padding-bottom: var(--page-bottom); /* 페이지 맨 아래 여백 */
  transition: margin-top var(--menu-dur) var(--menu-ease);
}

@media (prefers-reduced-motion: reduce) {
  .works-menu-wrap, main { transition: none; }
}
.site-header.menu-open + main { margin-top: 3em; }

/* ===== media (이미지) ===== */
.media { overflow: hidden; }
/* 회색은 로딩 중이거나 파일이 없을 때만 → 투명 GIF/PNG 는 배경이 그대로 비침 */
.media.is-loading,
.media.is-missing { background: var(--placeholder); }
.media.is-missing img { display: none; }
.media.is-missing { aspect-ratio: 16 / 9; }

/* 로딩 중: 회색 사각형 자리 확보, 이미지는 다 뜬 뒤 살짝 나타남 */
.media.is-loading { aspect-ratio: 16 / 9; }
.media :is(img, video) { transition: opacity 0.3s ease; }
.media.is-loading :is(img, video) { opacity: 0; }
.media.is-missing video { display: none; }

/* 영상 */
.media video { display: block; width: 100%; height: auto; }

/* inset: 가로 전체보다 살짝 작게 + 둥근 모서리 + 그림자 */
.media.is-inset {
  background: none;
  overflow: visible;
  padding: 3.5% 2%;            /* 위아래 / 양옆 여백 → 크기 조절 */
}
.media.is-inset :is(img, video) {
  border-radius: clamp(6px, 0.6vw, 14px);           /* 모서리 둥글기 */
  box-shadow: 0 0.6vw 2.4vw rgba(0, 0, 0, 0.18);    /* 그림자 */
}
.media.is-inset.is-loading { background: var(--placeholder); }

/* ===== home grid (web1 / mobile1) ===== */
.grid {
  display: grid;
  /* minmax(0,1fr): 긴 제목이 있어도 세 칸 폭이 항상 같음 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--row-gap);
}

.card { display: block; min-width: 0; }

.card .media,
.card .media.is-missing { aspect-ratio: 8 / 9; }

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

.card-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  margin-top: 0.8em;
}

.card-cat { color: var(--muted); white-space: nowrap; }

/* "Lee Seung Jio / : Silent Horizons" 두번째 줄 들여쓰기 */
.line-indent { display: block; padding-left: 1.3em; }

/* ===== detail (web4 / mobile2) ===== */
.detail {
  display: flex;
  flex-direction: column;
  gap: 2.6em;
}

.detail-info {
  display: grid;
  grid-template-columns: 50% 50%;
}

.detail-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.1em;
}

.detail-desc p + p { text-indent: var(--indent); }

.detail-media {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.media-pair {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));   /* 개수만큼 나란히 */
  gap: var(--gap);
}
/* 위 글자에 맞춰 3개 배치
   1번째: 'works' 시작점 / 2번째: 설명 글 시작점(50%) / 3번째: 설명 글 2번째 단 시작점 */
.media-pair.is-offset {
  align-items: center;
  column-gap: 0;
  grid-template-columns:
    var(--works-x)
    calc(50% - var(--works-x))
    calc(25% + 0.75em)          /* 설명 글 2단 간격(1.5em)의 절반 */
    minmax(0, 1fr);
}
.media-pair.is-offset > :first-child { grid-column: 2; }
.media-pair.is-offset > :not(:last-child) { margin-right: var(--gap); }

/* 호버하면 다른 이미지로 바뀜 */
.media.has-swap { position: relative; cursor: default; }
.media.has-swap .swap-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.media.has-swap > img:first-child { transition: opacity 0.25s ease; }
@media (hover: hover) {
  .media.has-swap:hover .swap-img { opacity: 1; }
  .media.has-swap:hover > img:first-child { opacity: 0; }
}
.media.has-swap.is-swapped .swap-img { opacity: 1; }
.media.has-swap.is-swapped > img:first-child { opacity: 0; }

.media-pair .media.is-missing,
.media-pair .media.is-loading { aspect-ratio: 8 / 9; }

/* 중간 크기 이미지: 가운데, 가로 전체의 약 55% */
.media.is-medium {
  width: 55%;
  margin: 3em auto;
}

/* 좁은 이미지: 중간 크기와 같은 폭, 위아래 간격은 다른 이미지와 동일
   모바일에서는 다른 이미지처럼 꽉 차게 */
.media.is-narrow {
  width: 55%;
  margin-left: auto;
  margin-right: auto;
}

/* 유튜브 영상: 칸 비율(기본 정방형)에 꽉 차게 */
.media-video { background: #000; }
.media-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 포스터: narrow(55%)보다 조금 좁게, 가운데 */
.media.is-poster {
  width: 45%;
  margin-left: auto;
  margin-right: auto;
}

/* narrow 의 절반 폭, narrow 의 왼쪽 끝에 맞춰 배치 (모든 화면 크기) */
.media.is-narrow-half {
  width: 27.5%;               /* 55% 의 절반 */
  margin-left: 22.5%;         /* (100% - 55%) / 2 → narrow 와 같은 왼쪽 끝 */
  margin-right: auto;
}

/* 오른쪽 절반에만 놓는 이미지 (설명 글과 같은 시작점) */
.media.is-right {
  width: 50%;
  margin-left: auto;
}

/* 이미지 사이 설명 글: 오른쪽 절반, 문단마다 들여쓰기 */
.detail-text {
  /* 위 이미지 ↔ 글: 기존(3em + 이미지 간격)의 절반
     글 ↔ 아래 이미지: 어떤 이미지가 오든 항상 '이미지 간격 + 1.5em' */
  margin: calc(1.5em - var(--gap) / 2) 0 1.5em 50%;
}
/* 글 바로 아래 오는 이미지는 자체 위 여백 없이 (medium 포함) */
.detail-media > .detail-text + .media { margin-top: 0; }
/* 대표 이미지 바로 다음에 오는 글: (페이지 간격 2.6em + 3em) 의 절반 */
.detail-media > .detail-text:first-child { margin-top: calc((2.6em + 3em) / 2 - 2.6em); }
.detail-text .detail-desc p { text-indent: var(--indent); }

/* 호버 이미지 */
.hover-ref {
  position: relative;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.14em;
  cursor: default;
  outline: none;
}
.hover-pop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  display: flex;
  gap: 0.5vw;
  max-width: calc(100vw - 16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.hover-pop.is-on {
  opacity: 1;
  visibility: visible;
}
.hover-pop img {
  display: block;
  width: auto;
  height: var(--pop-h);          /* 호버 이미지 높이 */
  max-width: calc(100vw - 16px);
  object-fit: contain;
}

/* ===== 작품별 다크 테마 (theme: 'dark') ===== */
html.theme-dark,
html.theme-dark body {
  background-color: #000;
  color: #fff;
  --fg: #fff;
  --muted: #6e6e6e;
  --placeholder: #1c1c1c;
}

/* ===== about ===== */
.about { margin-left: 50%; }
.about-name { margin-bottom: 1em; }
.about-links { margin-top: 2em; }

.about a {
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.14em;
}
.about a:hover { color: var(--muted); }


/* ===== tablet ===== */
@media (min-width: 768px) and (max-width: 1099px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ===== mobile (mobile1~4) ===== */
@media (max-width: 767px) {
  :root {
    --fs: clamp(17px, 4.6vw, 21px);
    --side: 20px;
    --works-x: 28%;
    --gap: 7px;
    --row-gap: 28px;
    --main-top: 34px;
    --indent: 3.3em;
    --page-bottom: 4em;
  }

  /* mobile3: 드롭다운은 왼쪽 끝에서 시작, 작품명은 'works' 와 정렬 */
  .works-menu {
    margin: 1.8em 0 0 0;
    grid-template-columns: var(--works-x) max-content;
    column-gap: 0;
  }
  .site-header.menu-open + main { margin-top: var(--main-top); }

  .grid { grid-template-columns: minmax(0, 1fr); }
  .card-caption { margin-top: 0.75em; }

  .about-name { display: none; }
  .about-links { margin-top: 5.5em; }

  .detail { gap: 20px; }

  .media.is-medium { width: 80%; margin: 1.5em auto; }
  .media.is-narrow,
  .media.is-poster,
  .media.is-right { width: 100%; }
  .media.is-narrow-half { width: 50%; margin-left: 0; }   /* 모바일 narrow(100%)의 절반 */
  .media-pair.is-offset {                                 /* 모바일: 화면 폭 전체에 나란히 */
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    column-gap: var(--gap);
  }
  .media-pair.is-offset > :first-child { grid-column: auto; }
  .media-pair.is-offset > :not(:last-child) { margin-right: 0; }
  .detail-text,
  .detail-media > .detail-text:first-child { margin: calc(0.75em - var(--gap) / 2) 0 0.75em; }
  .hover-pop img { width: calc(100vw - 40px); height: auto; }  /* 모바일: 화면 폭에 맞춤 */
  .detail-hero { order: -1; }           /* 모바일은 이미지가 제일 위 */

  .detail-info {
    grid-template-columns: 1fr;
    row-gap: 1.1em;
  }
  .detail-meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}


/* ===== 양옆 여백 점프 =====
   창 너비가 1440px 이상이 되면 여백이 20px → 화면의 12% 로 한 번에 커지고,
   그 이후로는 화면 너비에 비례해서 계속 커짐 (1440px ≈ 173px, 2048px ≈ 246px)
   - 바뀌는 시점: min-width 값
   - 커지는 정도: --side 의 vw 값 */
@media (min-width: 1440px) {
  :root { --side: 12vw; }
}

/* ===== desktop (imac1): 작품 설명 2단 ===== */
@media (min-width: 1800px) {
  .detail-desc {
    column-count: 2;
    column-gap: 1.5em;
  }
  /* 4줄 이하: 단 폭은 그대로(첫 번째 단), 두 번째 단으로 넘기지 않음
     줄 수 기준은 script.js 의 SHORT_DESC_LINES */
  .detail-desc.is-short {
    column-count: 1;
    width: calc((100% - 1.5em) / 2);
  }
}