/* ============================================================
   FONTS — Paperozi (CDN woff2), display + body 공용
   ============================================================ */

   @font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
  font-weight: 100; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
  font-weight: 200; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight: 800; font-display: swap;
}
@font-face {
  font-family: 'Paperozi';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
  font-weight: 900; font-display: swap;
}


/* ============================================================
   디자인 토큰
   ============================================================ */
:root {
  /* 색상 — LIGHT MODE */
  --bg:     #f6f6f6;
  --fg:     #000000;
  --gray:   rgb(35, 35, 35);     /* 포인트 — 보조 텍스트·레이블 */
  --border: rgb(13, 193, 19);     /* 포인트 — 구분선·카드 배경   */

  /* 스테인/스트로크 색상 — 여기를 수정하면 brush 색상이 바뀜 */
  --stroke-color:      #000000;          /* brush stroke (드래그하면서 찍히는 글자) */
  --grid-color:        rgba(0, 0, 0, 0.8); /* 배경 그리드 라인 */
  --label-hover-color: rgb(13, 193, 19);   /* stain-label hover 시 line-through 색상 */

  /* 폰트 */
  --font-display: 'Paperozi', sans-serif;
  --font-body:    'Paperozi', sans-serif;

  /* 애니메이션 */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* 간격 */
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;

  /* 레이아웃 */
  --site-pad: clamp(1.5rem, 4vw, 2rem);
  --content-max: 1080px;          /* 프로젝트 페이지 본문/미디어 중앙 컬럼 최대폭 */
  --text-indent: 4rem;          /* back 링크의 "← " 폭(≈14px)에 맞춘 텍스트 들여쓰기 */
}

/* ============================================================
   DARK MODE — 다크모드용 색상 override
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #1b1b1b;
    --fg:     #ffffff;
    --gray:   rgb(190, 190, 190);
    --border: rgb(76, 245, 3);

    /* 다크모드 stain/stroke 색상 — 여기를 수정하면 바뀜 */
    --stroke-color:      #ffffff;             /* brush stroke을 밝게 */
    --grid-color:        rgba(255, 255, 255, 0.6);
    --label-hover-color: rgb(12, 236, 0);    /* hover 시 강조 컬러 */
  }
}


/* ============================================================
   CSS RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* Safari가 텍스트 크기를 자동 조정하지 않도록 강제 (가장 큰 원인) */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* font smoothing 통일 — Safari/Chrome 글자 두께 차이 최소화 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* font fallback metrics 통일 — 폰트 로딩 중 layout shift 방지 */
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  min-height: 100vh;
  overflow-x: hidden;
  cursor: none;
}

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

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

ul, ol { list-style: none; }

button {
  background: none;
  border: none;
  cursor: none;
  font: inherit;
}


/* ============================================================
   타이포그래피 유틸
   ============================================================ */
/* .t-label — 카테고리 페이지 레이블 등에서 직접 사용 */
.t-label {
  font-family: var(--font-body);
  font-size: 1.6em;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--fg);
}


/* ============================================================
   사이트 헤더 (내부 페이지 공통)
   ============================================================ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--site-pad);
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}

/* JS 가 스크롤 감지 후 추가하는 클래스 */
.site-header.scrolled { border-color: var(--border); }

.site-header__logo {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: -0.02em;
}

.site-header__logo a { transition: opacity 0.25s; }
.site-header__logo a:hover { opacity: 0.5; }

/* ============================================================
   사이트 푸터 (공통)
   ============================================================ */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--site-pad);
  border-top: 0.5px solid var(--border);
  margin-top: auto;
}

.site-footer__copy {
  font-size: 0.7rem;
  color: var(--gray);
  letter-spacing: 0.05em;
}


/* ============================================================
   About 페이지
   ============================================================ */
/* about — 프로젝트 페이지와 동일한 중앙 컬럼(content-max) + 좌우 패딩으로 정렬 */
.about-hero,
.about-body {
  width: 100%;
  max-width: var(--content-max, 1080px);
  margin-inline: auto;
  padding-inline: var(--site-pad);
}

.about-hero {
  padding-block: var(--space-lg);
  border-bottom: 0.5px solid var(--border);
}

.about-hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.about-body {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  padding-block: var(--space-lg);
  align-items: start;
}

.about-body__sidebar {
  padding-right: var(--space-lg);
  border-right: 0.5px solid var(--border);
  position: sticky;
  top: calc(var(--space-md) * 3 + 1px);
}

.about-body__photo {
  aspect-ratio: 3 / 4;
  background: color-mix(in srgb, var(--fg) 8%, var(--bg));
  overflow: hidden;
  margin-bottom: var(--space-md);
  max-width: 300px;
}

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

.about-body__photo-placeholder {
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--fg) 8%, var(--bg));
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-body__photo-placeholder span {
  font-size: 0.6rem;
  color: var(--gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.about-body__contact { margin-top: var(--space-sm); }

.about-body__contact a {
  display: block;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--gray);
  letter-spacing: 0.04em;
  line-height: 2.2;
  transition: color 0.25s;
}

.about-body__contact a:hover { color: var(--fg); }

.about-body__main { padding-left: var(--space-lg); }

.about-bio { margin-bottom: var(--space-lg); }

.about-bio p {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.8;
 word-spacing: 5%;
  letter-spacing: 0.04em;
  max-width: 58ch;
}

.about-bio p + p { margin-top: var(--space-sm); }

.about-section {
  padding-top: var(--space-lg);
  border-top: 0.1px solid var(--border);
  margin-bottom: var(--space-lg);
}

.about-section__heading {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: var(--space-sm);
}

.about-list__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 0.1px solid var(--border);
  gap: var(--space-md);
}

.about-list__item:first-child { border-top: 0.1px solid var(--border); }
.about-list__item__name   { letter-spacing: 0.04em; font-size: 1rem; font-weight: 300; }
.about-list__item__detail { letter-spacing: 0.04em; font-size: 0.72rem; color: var(--gray); }


/* ============================================================
   프로젝트 상세 페이지
   ============================================================ */
/* 프로젝트 상세 — 모든 블록이 같은 중앙 컬럼 + 좌우 패딩으로 정렬 */
.project-detail,
.project-detail__media,
.project-detail__body {
  width: 100%;
  max-width: var(--content-max, 1080px);
  margin-inline: auto;
  padding-inline: var(--site-pad);
}

/* ── HERO 영역 — 화면 약 30vh, 작은 타이틀 + 3-단어 meta + caption ── */
.project-detail {
  min-height: 30vh;
  padding-top: var(--space-md);
  padding-bottom: var(--space-sm);   /* 하단 padding 축소 — 다음 콘텐츠와 가깝게 */
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-detail__back {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: var(--space-sm);
  transition: color 0.2s;
}
.project-detail__back:hover { color: var(--fg); }

.project-detail__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.project-detail__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 5rem) !important; /* 6rem → 3.6rem 으로 줄임 */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.08em;
  margin: 0;
}

/* 3 단어 feature meta — title 바로 아래 */
.project-detail__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em 1.4em;
  margin-top: 0.6rem;
  list-style: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}
.project-detail__features li {
  position: relative;
  padding-left: 1.4em;
}
.project-detail__features li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--border);
  font-weight: 800;
}
.project-detail__features li:first-child { padding-left: 0; }
.project-detail__features li:first-child::before { content: none; }

/* 작은 caption — meta 아래 한 줄 설명 */
.project-detail__caption {
  margin-top: 0.6rem;
  margin-bottom: 0.2rem;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--gray);
  max-width: 80ch;
  line-height: 1.8;
}

/* 기존 tagline 클래스 — 호환 유지 (caption 과 같은 느낌으로) */
.project-detail__tagline {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--gray);
  font-style: italic;
  max-width: 56ch;
  line-height: 1.55;
  font-weight: 300;
}

@media (max-width: 768px) {
  .project-detail { min-height: 28vh; padding-block: var(--space-sm); }
  .project-detail__title { font-size: clamp(1.7rem, 8vw, 2.6rem); letter-spacing: 0.06em; }
  .project-detail__features { font-size: 0.6rem; gap: 0.5em 1em; margin-top: 0.7rem; }
  .project-detail__caption,
  .project-detail__tagline { font-size: 0.8rem; margin-top: 0.7rem; }

}

.project-detail__media {
  margin-block: var(--space-lg);
  border-radius: 4px;
  overflow: hidden;
}
/* hero 바로 다음 콘텐츠는 상단 간격 축소 — 타이틀과 시각적으로 붙어보이게 */
.project-detail + .project-detail__media,
.project-detail + .project-detail__body,
.project-detail + .project-media,
.project-detail + .media-row,
.project-detail + .slideshow-scrollpin,
.project-detail + .slideshow {
  margin-top: var(--space-sm);
  padding-top: 0;
}

/* media-embed 가 내부에서 aspect-ratio 관리. 직접 img 넣는 경우 대비. */
.project-detail__media > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.project-detail__body {
  /* 4rem → 2rem 으로 줄임 (section 레벨) */
  padding-block: var(--space-md);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
  word-spacing: 0.04em;
  color: var(--fg);
}

/* 본문 내 paragraph — padding 제거. 인접 간격은 margin 으로만 제어 */
.project-detail__body p {
  padding-block: 0;
  margin-block: 0;
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 1.2vw, 1.4rem);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
  word-spacing: 0.08em;
  color: var(--fg);
}

/* ★ p 가 .project-detail__body 클래스를 직접 가진 경우 (HTML 에서 같이 부여)
   section 의 4rem padding 이 paragraph 에도 적용되는 버그 차단 */
p.project-detail__body {
  padding-block: 0;
  margin-block: var(--space-sm);
}

.project-detail__body p + p { margin-top: var(--space-sm); }

/* 이미지·미디어 ↔ 본문 paragraph 인접 시 갭 축소 (image margin 만으로 충분) */
.project-detail__image + p,
.project-detail__media + p,
.media-row + p,
p + .project-detail__image,
p + .project-detail__media { margin-top: var(--space-sm); }


/* ============================================================
   TEXT INDENT — "← back" 의 "back" 단어 시작점에 맞춘 들여쓰기
   미디어/이미지/그리드 는 들여쓰기 제외 (full width 유지)
   ============================================================ */
/* 프로젝트 상세 — title · features · caption · body 단락 */
.project-detail__title,
.project-detail__features,
.project-detail__caption,
.project-detail__tagline,
.project-detail__body > p,
.project-detail__body > h2,
.project-detail__body > h3 {
  padding-left: var(--text-indent);
}

/* About 페이지 텍스트 */
.about-hero__label,
.about-hero__title,
.about-bio,
.about-section,
.about-list,
.about-body__contact {
  padding-left: var(--text-indent);
}

/* meta(back) 자체엔 들여쓰기 X — 정렬 기준 */
.project-detail__meta { padding-left: 0; }

/* 모바일에선 살짝 줄임 */
@media (max-width: 768px) {
  :root { --text-indent: 0.9rem; }

  /* 본문 텍스트 — 모바일에서 더 작게 */
  .project-detail__body { font-size: 0.85rem; }
  .project-detail__body p,
  p.project-detail__body { font-size: 0.85rem; line-height: 1.75; }
}


/* ============================================================
   PROJECT WORK LINK — "작업물로 가기" 전용 통일 스타일
   define wiki / cyber-bomber-work / cyber-mask-changing-work 등
   ============================================================ */
.project-work-link-wrap {
  display: flex;
  justify-content: center;
  margin: var(--space-lg) auto;
  max-width: var(--content-max, 1080px);
  padding-inline: var(--site-pad);
}
.project-work-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.8rem 3rem;
  border: 1.5px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.18s, filter 0.18s;
}
.project-work-link::after {
  content: '↗';
  font-size: 1.2em;
  line-height: 1;
  transition: transform 0.25s ease;
}
/* global hover blur 효과는 끄고, 색 반전 효과 사용 */
.project-work-link:hover {
  filter: blur(2px);
  background: var(--fg);
  color: var(--bg);
  transform: translateY(-1px);
}
.project-work-link:hover::after { transform: translate(3px, -3px); }
.project-work-link:active { transform: translateY(1px); }

@media (max-width: 768px) {
  .project-work-link-wrap { margin: var(--space-md) auto; }
  .project-work-link {
    padding: 0.75rem 1.3rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
  }
}

/* ============================================================
   RELATED PROJECTS — 페이지 하단 같은 그룹 내 이동 / back home
   좌/우 두 섹션: nav 바에서 현재 페이지보다 앞(왼쪽)이면 left,
   뒤(오른쪽)면 right 에 배치. 각각 좌/우 정렬.
   ============================================================ */
.project-related {
  max-width: var(--content-max, 1080px);
  margin: var(--space-lg) auto 0;
  padding: var(--space-lg) var(--site-pad) 0;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
}
.project-related__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}
.project-related__side--left  { align-items: flex-start; text-align: left; }
.project-related__side--right { align-items: flex-end;   text-align: right; }
/* back home (단독 페이지) — 가운데 정렬 */
.project-related--center { justify-content: center; }
.project-related__label {
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
}
.project-related__link {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg);
  text-decoration: none;
  transition: filter 0.18s ease, opacity 0.2s ease;
}
/* 방향 화살표 — 왼쪽(이전) ← , 오른쪽(다음) → */
.project-related__link--prev::before { content: '← '; color: var(--gray); }
.project-related__link--next::after  { content: ' →'; color: var(--gray); }
.project-related__link--home::before { content: '← '; color: var(--gray); }
.project-related__link:hover { filter: blur(2px); }

@media (max-width: 768px) {
  .project-related { padding-top: var(--space-md); margin-top: var(--space-md); gap: var(--space-sm); }
  .project-related__link { font-size: clamp(1.1rem, 5vw, 1.6rem); }
}


/* ============================================================
   BROCHURE — trifold 스크롤 구동 브로셔 (brochure.js)
   scroll-pin 으로 화면에 고정된 채 스크롤 진행도에 따라 옆으로 펼쳐짐.
   상태 전환은 애니메이션 없이 즉시 교체.
   ============================================================ */
/* 스크롤 핀 — 긴 spacer 안에서 pin 이 sticky 로 고정 */
.brochure-scrollpin {
  position: relative;
  width: 100%;
  height: calc(var(--states, 4) * 90vh);   /* 스크롤 거리 = 상태수 × 90vh */
  margin-block: var(--space-md);
}
.brochure-scrollpin__pin {
  position: sticky;
  top: var(--space-lg);                    /* 락(sticky 고정) 됐을 때 상단에서 이만큼 내려와 멈춤 */
  height: calc(100vh - var(--space-lg));   /* 상단 여백 제외한 영역에 브로셔 가운데 배치 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.brochure {
  width: 100%;
  max-width: var(--content-max, 1080px);
  margin: 0 auto;
  padding-inline: var(--site-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  user-select: none;
}
.brochure__stage {
  width: 100%;
  display: flex;
  justify-content: center;       /* 가운데 frame 이 정중앙 */
  align-items: center;
}
.brochure__track {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;                         /* 페이지 사이 틈 없음 */
}
/* 각 패널 — 한 단(三等分). 폭 고정 → 3단 펼쳐도 컨테이너 안에 들어감 */
.brochure__panel {
  position: relative;
  width: clamp(150px, 26vw, 340px);
  aspect-ratio: 288 / 432;        /* JS 가 data-aspect 로 덮어씀 */
  flex: 0 0 auto;
  overflow: hidden;
}
.brochure__img {
  width: 100%;
  height: 100%;
  object-fit: contain;            /* scale to fit — 잘리지 않게 전체 표시 */
  display: block;
}
/* 빈 슬롯 — 같은 폭/비율로 자리만 차지하고 보이지 않음 */
.brochure__panel--empty { visibility: hidden; }

/* ── 하단 진행 도트 (텍스트 없이 점만) ── */
.brochure__hint {
  display: flex;
  align-items: center;
  justify-content: center;
}
.brochure__dots { display: inline-flex; gap: 6px; }
.brochure__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: color-mix(in srgb, var(--gray) 40%, transparent);
  transition: background 0.2s, transform 0.2s;
}
.brochure__dot.is-active { background: var(--fg); transform: scale(1.25); }

@media (max-width: 768px) {
  .brochure-scrollpin { height: calc(var(--states, 4) * 80vh); }
  .brochure__panel { width: clamp(90px, 30vw, 130px); }
}


/* ============================================================
   스크롤 리빌 + 접근성
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.visible { opacity: 1; transform: translateY(0); }

/* 스크린 리더 전용 텍스트 숨김 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   반응형 — 태블릿 이하 (max-width: 768px)

   ★ 모바일 크기 조정: 아래 각 줄의 값을 직접 수정하세요.
     CSS 변수 없이 직접 값으로 작성 — 브라우저 호환성 100% 보장.
     stain 크기·그리드 간격은 main.js 상단의 MOBILE_* 상수에서 조정.
   ============================================================ */
@media (max-width: 768px) {
  :root { --site-pad: 1.25rem; }

  /* ── 헤더 ───────────────────────── */
  .site-header       { padding: 1rem var(--site-pad); }   /* 헤더 상하 패딩 */

  /* ── 메인 페이지 stain 레이블 ────
     ★ font-size 는 main.js 의 DEFS[i].mobileSize 에서 개별 조절.
        여기서 !important 를 빼야 JS 인라인 스타일이 작동합니다. */
  .stain-label {
    letter-spacing: 1rem;
    line-height:    1.3;
  }

  /* ── 메인 페이지 하단 UI ─────────── */
  .main-ui        { bottom: 1rem; }                           /* 하단 여백 */
  .main-ui__name  { font-size: clamp(1rem, 5vw, 1.4rem); }   /* Ganj 이름 */
  .main-ui__right { font-size: 0.6rem; }                     /* 서브 텍스트 */

  /* ── 프로젝트 상세 ───────────────── */
  .project-detail__title { font-size: clamp(2rem, 10vw, 4rem); }  /* 상세 타이틀 */

  /* ── About 페이지 ────────────────── */
  .about-body { grid-template-columns: 1fr; gap: 4rem; }
  .about-body__sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 4rem;
    position: static;
  }
  .about-body__main { padding-left: 0; }
}


/* ============================================================
   인덱스 페이지 — 캔버스 레이어 시스템
   z-index 순서:
      0  .canvas-wrapper   고정 배경 컨테이너
      1  #strokeCanvas     붓 스트로크 (영구 보존)
      2  #mainCanvas       그리드 (매 프레임 갱신)
     10  .stain-labels     카테고리 텍스트 링크
     50  #textToast        텍스트 피드백
    100  .site-header      상단 헤더
   9999  .brush-ring       커스텀 커서 링
   ============================================================ */
.canvas-wrapper { position: fixed; inset: 0; z-index: 0; }

#strokeCanvas,
#mainCanvas {
  position: absolute;
  top: 0; left: 0;
  display: block;
  pointer-events: none;
}

#strokeCanvas { z-index: 1; }
#mainCanvas   { z-index: 2; }

.brush-ring {
  position: fixed;
  top: 0; left: 0;
  width: 15px;
  height: 15px;
  border: 4px solid var(--fg);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: border-color 0.2s ease, opacity 0.15s ease,
              width 0.2s ease, height 0.2s ease;
}



/* 레이블 컨테이너 — 초기 숨김, JS 가 위치 설정 후 opacity 1 */
.stain-labels {
  position: fixed;
  inset: 0;
  z-index: 10;
  letter-spacing: 1rem;
  pointer-events: none;
  opacity: 0;
}

/* 개별 레이블 — JS 가 left/top 설정 */
.stain-label {
  position: absolute;
  transform: translate(-49%, -50%);
  pointer-events: auto;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(20rem, 2.5vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.8rem !important;
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;   /* "Gen AI" 등 공백 포함 라벨이 줄바꿈되지 않도록 */
}
.stain-label:hover,
.stain-label.is-hovered {
  text-decoration: line-through;
  text-decoration-thickness: 0em;
  text-decoration-color: var(--label-hover-color);
}

/* 하단 고정 UI: 이름(좌) + 설명(우) */
.main-ui {
  position: fixed;
  bottom: var(--site-pad);
  left: var(--site-pad);
  right: var(--site-pad);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 20;
  pointer-events: auto;
}

.main-ui__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-decoration: none;
  transition: opacity 0.2s;
}

.main-ui__name:hover { opacity: 0.5; }

.main-ui__right {
  text-align: right;
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--fg);
  opacity: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: opacity 0.2s;
}

.main-ui__right:hover { opacity: 0.25; }

/* ── SUBTITLE TOAST — 하단 중앙 자막 박스 ───────────────────────
   링크 hover 시 풀에서 순서대로 표시. bg=--fg, text=--bg 로 반전.
─────────────────────────────────────────────────────────────── */
.subtitle-toast {
  position: fixed;
  bottom: 4.2rem;
  left: 50%;
  transform: translate(-50%, 12px);
  max-width: min(86vw, 720px);
  padding: 0.85rem 1.4rem;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 1rem;          /* 0.78 → 1.05 — 가독성 향상 */
  font-weight: 300;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  z-index: 60;
  white-space: normal;
  word-break: keep-all;
  box-shadow: 0 4px 20px rgba(0,0,0,0.16);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  gap: 0.22em;
}
.subtitle-toast.visible {
  opacity: 0.96;
  transform: translate(-50%, 0);
}
/* 영어 — 위쪽, 살짝 크고 두껍게 */
.subtitle-toast__en {
  font-weight: 500;
  font-size: 1em;
}
/* 한국어 — 아래쪽 */
.subtitle-toast__kr {
  font-weight: 300;
  font-size: 0.9em;
  opacity: 0.92;
}

@media (max-width: 768px) {
  .subtitle-toast {
    bottom: 4.6rem;            /* 하단 버튼(컬러피커·nav 등) 안 가리도록 위로 */
    font-size: 0.68rem;        /* 폰트 축소 */
    padding: 0.5rem 0.9rem;
    width: 92vw;               /* 명시 넓이 — flex 가 콘텐츠로 줄지 않게 (넓이 확대 → 줄바꿈↓ 높이↓) */
    max-width: 92vw;
    gap: 0.12em;
    line-height: 1.3;
  }
}



/* ============================================================
   v4 STRUCTURE — 세포분열, 썸네일, 컬러피커, share, instruction
   ============================================================ */

/* ── 분열된 자식 라벨 ─────────────────────────────────────────── */
.stain-label--child {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.05em !important;             /* parent 보다 좁게 — 라벨 너비 절감 */
  opacity: 0;
  /* 화면 밖으로 안 나가게 + 라벨이 줄바꿈 없이 한 줄에 잘 들어가게 */
  max-width: min(280px, calc(90vw - 32px));
  text-align: center;
  word-break: keep-all;          /* 한글 줄바꿈 안전 */
  overflow-wrap: break-word;     /* 진짜 안 들어갈 때만 break (mid-word break 방지) */
  line-height: 1.15;
  transition: transform 0.6s cubic-bezier(0.34, 2.56, 0.64, 1),
              opacity 0.4s ease,
              filter 0.25s ease;
}
/* 데스크탑: 화면이 충분히 넓으면 한 줄 유지 + 더 큰 max-width */
@media (min-width: 769px) {
  .stain-label--child {
    white-space: nowrap;
    max-width: none;
    letter-spacing: 0.1em;
  }
}
.stain-label--child.is-spawned { opacity: 1; }
.stain-label.is-divided        {
  opacity: 0;
  pointer-events: none;
  filter: blur(3px);
  transition: opacity 0.1s ease, filter 0.4s ease;
}

/* 부모 라벨이 분열되는 순간 — pulse 효과 (확장 후 페이드) */
.stain-label.is-pulsing {
  animation: stain-pulse 1s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes stain-pulse {
  0%   { transform: translate(-49%, -50%) scale(1);     }
  35%  { transform: translate(-49%, -50%) scale(1.35);  filter: blur(0); }
  100% { transform: translate(-49%, -50%) scale(1);     filter: blur(3px); }
}

/* 자식 라벨이 spawn될 때 살짝 떨림(jitter) 더해서 생명체스럽게 */
.stain-label--child.is-spawned {
  animation: child-settle 0.6s 0.3s ease-out;
}
@keyframes child-settle {
  0%   { filter: blur(0); }
  20%  { filter: blur(1.2px); }
  100% { filter: blur(0); }
}

/* ── 썸네일 popup — 흩뿌려진 폴라로이드 컨셉 ───────────────────── */
.thumb-popup {
  position: fixed;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  transition: opacity 0.22s ease;
  transform: translate(-50%, 0%);
}
.thumb-popup.visible { opacity: 1; }


.thumb-popup.visible .thumb-popup__item {
  opacity: 0.92;
}

/* 단일 자식 thumbnail — 라벨 위에 정중앙 */
.thumb-popup__item--single {
  position: relative;
  transform: none !important;
  /* 색상 fallback 도 이미지 썸네일과 동일 사이즈로 통일 (260×195 = 4:3) */
  width: 260px;
  height: 195px;
  font-size: 0.62rem;
  left: -130px;           /* 가로 중앙 정렬 (width / 2) */
  border-radius: 4px;
  opacity: 0;
}
@media (max-width: 768px) {
  .thumb-popup__item--single { width: 180px; height: 135px; left: -90px; }
}
.thumb-popup.visible .thumb-popup__item--single { opacity: 0.95; }

/* ── 이미지 썸네일 — 비율 유지 + 크기 대략 통일 (텍스트 없음) ──── */
.thumb-popup__img {
  display: block;
  /* ★ 고정 사이즈 + cover crop — 모든 썸네일이 동일 크기·비율 (4:3) 로 표시 */
  width: 260px;
  height: 195px;        /* 260×195 = 4:3 landscape */
  object-fit: cover;
  object-position: center;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.10),
    0 6px 22px rgba(0,0,0,0.16);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.thumb-popup.visible .thumb-popup__img { opacity: 1; }

@media (max-width: 768px) {
  .thumb-popup__img { width: 180px; height: 135px; }   /* 동일 4:3 비율 */
}

/* 다크 모드: 폴라로이드 톤 살짝 어둡게 */
@media (prefers-color-scheme: dark) {
  .thumb-popup__item {
    color: rgba(0, 0, 0, 0.7);
    box-shadow:
      0 1px 2px rgba(0,0,0,0.4),
      0 6px 22px rgba(0,0,0,0.4),
      inset 0 0 0 1px rgba(255,255,255,0.25);
  }
}

@media (max-width: 768px) {
  .thumb-popup__item        { font-size: 0.45rem; padding: 4px 5px; }
  .thumb-popup__item--single{ width: 100px; height: 72px; left: -50px; font-size: 0.55rem; }
}

/* ── COLOR PICKER (이미지 슬롯 + 텍스트 박스) — 좌상단 ─────────── */
.picker-stack {
  position: fixed;
  top: 2rem;
  left: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  z-index: 200;
  pointer-events: auto;
}

.stroke-color-picker {
  position: relative;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: none;
  overflow: visible;
  /* ★ color = stroke-color → 안의 SVG path 들의 fill="currentColor" 가 받음 */
  color: var(--stroke-color);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.08s linear;
}
.stroke-color-picker:hover  { transform: scale(1.08) rotate(-2deg); }
.stroke-color-picker:active { transform: scale(0.94); }

/* 인라인 SVG — 부모의 color 를 currentColor 로 받아 전체 path 색상 변경 */
.stroke-color-picker__svg {
  display: block;
  width: 150%;
  height: 150%;
  pointer-events: none;
}

/* native color input — wrapper 위에 투명하게 깔아 클릭 트리거 */
.stroke-color-picker__input {
  position: absolute;
  inset: 0;
  width: 150%;
  height: 150%;
  opacity: 0;
  border: 0;
  background: transparent;
  cursor: none;
}

/* picker-stack 모바일 사이즈 */
@media (max-width: 768px) {
  .picker-stack         { top: 0.7rem; left: 0.7rem; gap: 0.35rem; }
  .stroke-color-picker  { width: 28px; height: 28px; }
}


/* ── SHARE BAR (caption + share button) — 우상단 ───────────────── */
.share-bar {
  position: fixed;
  top:   2rem;
  right: 2rem;
  display: flex;
  gap: 0.4rem;
  z-index: 200;
  pointer-events: auto;
}

.share-bar__button {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--fg);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: none;
  transition: transform 0.18s, background 0.2s;
}
.share-bar__button:hover  { transform: scale(1.05); }
.share-bar__button:active { transform: scale(0.95); }

@media (max-width: 768px) {
  .share-bar         { top: 0.75rem; right: 0.75rem; gap: 0.3rem; }
  .share-bar__caption{ width: 110px; font-size: 0.6rem; padding: 0.3rem 0.55rem; }
  .share-bar__button { font-size: 0.55rem; padding: 0.3rem 0.6rem; }
}

/* ── INSTRUCTION OVERLAY (첫 진입 1.5초) ───────────────────────── */
.instruction-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  letter-spacing: 0.1em;
  word-spacing: 0.1em;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  /* visible 일 때만 클릭 받음 — 사용자가 dismiss 하기 전까지 페이지와 상호작용 차단 */
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.5s ease;
}
.instruction-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.instruction-overlay.fading  { opacity: 0; pointer-events: none; }
.instruction-overlay__inner {
  text-align: center;
  font-family: var(--font-body);
  color: var(--fg);
  max-width: 80%;
  line-height: 1.6;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 500;
}
.instruction-overlay__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 0.8em;
}
.instruction-overlay__dismiss {
  margin-top: 1.8em;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 1;
  animation: dismiss-pulse 2s ease-in-out infinite;
}
@keyframes dismiss-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.8; }
}
/* 모바일: instruction overlay 폰트 축소 */
@media (max-width: 768px) {
  .instruction-overlay__inner   { font-size: 0.85rem; line-height: 1.5; max-width: 86%; }
  .instruction-overlay__title   { font-size: 1.3rem; letter-spacing: 0.08em; margin-bottom: 0.6em; }
  .instruction-overlay__dismiss { font-size: 0.68rem; margin-top: 1.4em; }
}

/* ── GAUSSIAN BLUR HOVER — 글로벌 hover 효과 교체 ──────────────── */
/* line-through 가 적용된 곳 모두 blur 로 교체 (cascade override) */
.stain-label:hover,
.stain-label.is-hovered,
.stain-label--child:hover,
.site-nav-pill:hover,
.main-ui__name:hover,
.main-ui__right:hover {
  text-decoration: none !important;       /* line-through 제거 */
  filter: blur(2px);
  transition: filter 0.18s ease;
}
.stain-label,
.stain-label--child,
.site-nav-pill,
.main-ui__name,
.main-ui__right {
  transition: filter 0.18s ease;
}

/* ============================================================
   HORIZONTAL PILL NAV — inner page 상단 가로 스크롤 nav
   ============================================================ */
.site-nav-pills {
  /* 가로 스크롤 컨테이너 */
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  margin-right: var(--space-sm);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  mask-image: linear-gradient(to left, transparent 0, black 8px, black calc(100% - 24px), transparent 100%);
}
.site-nav-pills::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

.site-nav-pills__track {
  display: flex;              /* 핵심 */
  justify-content: flex-end;  /* 오른쪽 정렬 */
  gap: 0.4rem;
  padding: 0.25rem 0.25rem;
  white-space: nowrap;
  width: 100%;                /* 중요 */
}
.site-nav-pill {
   display: flex;          /* flex-end ❌ */
  align-items: center;  
  padding: 0.4rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--gray) 40%, transparent);
  border-radius: 0px;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}
.site-nav-pill:hover {
  filter: blur(1px);              /* 다른 hover와 통일 (gaussian blur) */
  color: var(--fg);
  border-color: var(--fg);
}
.site-nav-pill.active {
  color: var(--bg);
  background: var(--fg);
  border-color: var(--fg);
  font-weight: 400;
}

@media (max-width: 768px) {
  .site-nav-pill {
    padding: 0.5rem 0.9rem;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
  }

  /* ── 모바일 dropdown 모드 (script.js 가 .site-nav-pills--mobile 부여) ── */
  .site-nav-pills--mobile {
    overflow: visible;            /* dropdown 이 nav 밖으로 나갈 수 있게 */
    mask-image: none;
    margin-left: 0;
    flex: 0 0 auto;
    position: relative;
    justify-content: flex-end;
  }
  /* 트리거 버튼 — 항상 보임 */
  .site-nav-pills__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;          /* tap target 충분히 키움 */
    min-height: 36px;
    background: transparent;
    border: 1px solid var(--fg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;                /* body{cursor:none} override */
    touch-action: manipulation;     /* iOS 300ms 지연 제거 */
    -webkit-tap-highlight-color: rgba(0,0,0,0.08);
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 111;                   /* backdrop(105)/panel(110) 위 */
    transition: background 0.2s, color 0.2s;
  }
  .site-nav-pills__toggle-arrow {
    font-size: 0.9em;
    transition: transform 0.25s ease;
  }
  .site-nav-pills--mobile.is-open .site-nav-pills__toggle {
    background: var(--fg);
    color: var(--bg);
  }
  .site-nav-pills--mobile.is-open .site-nav-pills__toggle-arrow {
    transform: rotate(180deg);
  }

  /* 트랙 = dropdown 패널 (모바일) — 닫힘 기본 */
  .site-nav-pills--mobile .site-nav-pills__track {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: min(260px, 80vw);
    padding: 0.4rem;
    gap: 0.2rem;
    background: var(--bg);
    border: 1px solid var(--fg);
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    z-index: 110;

    /* 닫힘 상태: 보이지 않음 */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
  }
  .site-nav-pills--mobile.is-open .site-nav-pills__track {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  /* 모바일 dropdown 안의 pill: full-width 행 */
  .site-nav-pills--mobile .site-nav-pill {
    display: block;
    padding: 0.55rem 0.85rem;
    border: 0;
    border-radius: 4px;
    font-size: 0.72rem;
    text-align: left;
    background: transparent;
  }
  .site-nav-pills--mobile .site-nav-pill:hover { filter: none; background: color-mix(in srgb, var(--fg) 6%, transparent); }
  .site-nav-pills--mobile .site-nav-pill.active { background: var(--fg); color: var(--bg); }

  /* 패널 뒤 어둡게 처리 — 시각적 dim 만. pointer-events 영구 none
     (panel 이 site-header stacking context 안에 갇혀 backdrop 보다 아래로
      그려지는 문제 회피. "바깥 탭 닫기" 는 JS document 위임으로 처리.) */
  .site-nav-pills__backdrop {
    position: fixed; inset: 0;
    background: transparent;
    z-index: 99;                 /* site-header(100) 아래 — 헤더는 dim 안 함 */
    pointer-events: none;        /* ★ 절대 클릭 가로채지 않음 */
    transition: background 0.2s;
  }
  .site-nav-pills--mobile.is-open ~ .site-nav-pills__backdrop,
  body:has(.site-nav-pills--mobile.is-open) .site-nav-pills__backdrop {
    background: rgba(0,0,0,0.22);
    /* pointer-events 유지: none */
  }
}


/* ============================================================
   MEDIA EMBED — YouTube / 비디오 / 이미지 통합 컨테이너
   ============================================================ */
.media-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;          /* JS 가 data-aspect 로 override */
  background: color-mix(in srgb, var(--gray) 18%, transparent);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: left;
}

/* 로딩 전 placeholder (initEmbed 전) */
.media-embed:not(.media-embed--ready)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--gray) 12%, transparent),
    color-mix(in srgb, var(--gray) 12%, transparent) 8px,
    color-mix(in srgb, var(--gray) 18%, transparent) 8px,
    color-mix(in srgb, var(--gray) 18%, transparent) 16px
  );
  opacity: 0.4;
}

.media-embed__iframe,
.media-embed__video,
.media-embed__img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;             /* 컨테이너 채움 */
  background: #000;              /* video poster 로딩 전 검정 */
}

.media-embed__img {
  object-fit: cover;
}

.media-embed__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.media-embed--error {
  background: color-mix(in srgb, var(--border) 12%, var(--bg));
}

/* 모바일 */
@media (max-width: 768px) {
  .media-embed { border-radius: 3px; }
  .media-embed__placeholder { font-size: 0.65rem; }
}

/* ── 단독 미디어 / 2-up 미디어 — 본문과 같은 중앙 컬럼 정렬 ───────
   .project-media        : 단독 미디어 (YouTube/video/image) — 폭 통일
   .media-row            : 좌/우 2개 미디어 (작게 나란히)
─────────────────────────────────────────────────────────────── */
.project-media,
.media-row {
  width: 100%;
  max-width: var(--content-max, 1080px);
  margin-inline: auto;
  margin-block: var(--space-lg);
  padding-inline: var(--site-pad);
}



/* 2-up: 좌우 나란히, 데스크탑에서 작게.
   .media-row 안에 텍스트(p) 가 혼합되어 있으면 grid 셀에 잘못 배치되므로
   미디어와 텍스트를 둘 다 다룰 수 있도록 child 별 column 처리.
─────────────────────────────────────────────────────────────── */
.media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-md);
  align-items: start;
}
.media-row .media-embed { border-radius: 4px; }
/* 문단(p) 류는 그리드 전체 폭으로 — 미디어 아래로 자동 정리 */
.media-row > p,
.media-row > .project-detail__body,
.media-row > .project-detail__caption {
  grid-column: 1 / -1;
}

/* 모바일: 세로로 쌓기 — 미디어 + 모든 자식이 차례로 표시 */
@media (max-width: 768px) {
  .media-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-block: var(--space-md);
  }
  .media-row > * { grid-column: 1; }    /* 모든 자식 단일 컬럼 */
  /* 모바일에서 media-embed 가 viewport 보다 작아 보이지 않도록 풀 폭 보장 */
  .media-row .media-embed { width: 100%; }
}

/* 본문 내 단독 이미지 (raw <img class="project-detail__image">) */
.project-detail__image {
  width: 100%;
  height: auto;
  display: block;
  margin-block: var(--space-sm);
}
/* 이미지 바로 다음에 오는 텍스트 — 위쪽 갭 추가 축소 */
.project-detail__image + p { margin-top: var(--space-sm); }
.project-detail__image + p:first-child { padding-top: 0; }
.project-detail__body > :first-child { margin-top: 0; }


/* ============================================================
   SLIDESHOW — 여러 이미지 페이지 넘김 (define-work 등)
   ============================================================ */
.slideshow {
  position: relative;
  width: 100%;
  max-width: var(--content-max, 1080px);
  margin-inline: auto;
  margin-block: var(--space-lg);
  padding-inline: var(--site-pad);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  outline: none;
  cursor: none;
}

/* ── 스크롤 핀 모드 — 슬라이드쇼가 sticky 로 화면 중앙에 머물고
   wrapper 의 전체 높이 = window-h × 페이지수 만큼 길어져서
   스크롤 진행도가 곧 페이지 인덱스. */
/* ── 스크롤-핀 슬라이드쇼 ──────────────────────────────────────
   구조:
     .slideshow-scrollpin            (긴 spacer — 스크롤 거리)
       .slideshow-scrollpin__pin     (position: sticky — 슬라이드쇼+컨트롤 묶음)
         .slideshow.slideshow--scrollpin
         .slideshow__controls

   포인트:
   · 슬라이드쇼는 70vh — 화면에 다 보이고 위·아래 텍스트도 함께 보임
   · sticky top: 15vh — 슬라이드쇼가 완전히 viewport 안에 들어왔을 때 핀
   · 스크롤이 양 끝(슬라이드쇼 위·아래)일 땐 핀 미적용 → 일반 스크롤
   · 다시 위로 올라가면 자연 release → 일반 흐름 복귀
   · 컨트롤(화살표·dots·counter) 은 핀 안에 함께 — 항상 노출, 수동 조작 가능
─────────────────────────────────────────────────────────────── */
.slideshow-scrollpin {
  position: relative;
  width: 100%;
  /* 스크롤 거리 = 페이지수 × 70vh — 슬라이드쇼 자체 높이와 동일 단위 */
  height: calc(var(--pages, 12) * 70vh);
  margin-block: var(--space-md);
}
.slideshow-scrollpin__pin {
  position: sticky;
  top: 20vh;                 /* 슬라이드쇼 위 15vh 여백 — fully visible 보장 */
  height: 80vh;              /* 슬라이드쇼(70vh) + 컨트롤 여유 */
  display: flex;
  min-height: 80vh;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
}
.slideshow--scrollpin {
  position: relative;        /* sticky 는 parent 가 잡음 */
  top: auto;
  height: 70vh;              /* 슬라이드쇼 높이 = viewport 70% */
  max-width: 100%;
  min-height: 70vh;     /* 높이 고정, collapse 방지 */
  margin: 0 auto;
  padding-inline: var(--site-pad);
  aspect-ratio: auto;
}
.slideshow--scrollpin .slideshow__track { height: 100%; }

/* 컨트롤은 sticky 그룹 안에서 슬라이드쇼 바로 아래 */
.slideshow-scrollpin__pin > .slideshow__controls {
  margin: 0 auto;
  padding-inline: var(--site-pad);
  z-index: 5;
  position: relative;
}

/* 모바일: 60vh 로 더 작게 + sticky top 8vh */
@media (max-width: 768px) {
  .slideshow-scrollpin { height: calc(var(--pages, 12) * 60vh); }
  .slideshow-scrollpin__pin { top: 8vh; height: 72vh; }
  .slideshow--scrollpin { height: 60vh; }
}

/* 트랙 — 가로 슬라이드. padding-inline 만큼 안쪽에서 동작하도록 box 분리 */
.slideshow__track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);  /* 페이지 넘김 느낌 */
}
.slideshow__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--gray) 12%, transparent);
  border-radius: 4px;
  overflow: hidden;
}
.slideshow__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;

  min-width: 100%;
  min-height: 100%;
}

/* ── UNROLL MODE — roll-bind 누적 펼침 (오른쪽 바인딩, 슬라이드-인) ──
   모든 페이지는 항상 자연 폭 유지. translateX 만 애니메이트 →
   새 페이지가 오른쪽에서 슬라이드-인하며 기존은 왼쪽으로 밀려 사라짐. */
.slideshow--unroll .slideshow__track {
  width: max-content;
  align-items: stretch;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.2, 1);  /* 옆으로 미는 모션 */
}
.slideshow--unroll .slideshow__slide {
  flex: 0 0 auto;

  /* 🔥 핵심 수정: 초기 collapse 방지 */
  width: auto;
  min-width: 1px;

  height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}
/* 이미지: 높이 = 컨테이너 (전체 페이지), 폭은 slide 폭(자연폭)에 꽉 참 */
.slideshow--unroll .slideshow__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 컨트롤 바 — 이미지 영역 밖(아래), 페이지와 안 겹침 ──────────── */
.slideshow__controls {
  width: 100%;
  max-width: var(--content-max, 1080px);
  margin: 0.7rem auto var(--space-lg);
  padding-inline: var(--site-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}
.slideshow__btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--fg);
  border-radius: 50%;
  cursor: none;
  flex: 0 0 auto;
  transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.slideshow__btn:hover    { background: var(--fg); color: var(--bg); transform: scale(1.08); }
.slideshow__btn:disabled { opacity: 0.25; pointer-events: none; }

.slideshow__counter {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--gray);
  min-width: 3.5em;
  text-align: center;
}

.slideshow__dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.slideshow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg);
  opacity: 0.3;
  cursor: none;
  transition: opacity 0.2s, transform 0.2s;
}
.slideshow__dot.is-active { opacity: 1; transform: scale(1.4); }

@media (max-width: 768px) {
  .slideshow__controls { gap: 0.6rem; margin-bottom: var(--space-md); }
  .slideshow__btn { width: 30px; height: 30px; font-size: 1.2rem; }
  .slideshow__counter { font-size: 0.55rem; }
  .slideshow__dot { width: 6px; height: 6px; }
}

/* ============================================================
   FAILSAFE — 초기 렌더링 시 blank 방지
   ============================================================ */
html, body {
  visibility: visible;
  opacity: 1;
}

.slideshow,
.slideshow__track,
.slideshow__slide {
  visibility: visible;
}