body[data-page='main'] {
  background: var(--primary-ink);
}
body[data-page='main'] .site-header { margin-bottom: calc(-1 * var(--header-height)); }
/* 메인 첫 진입 시 순차적 등장 애니메이션 (배경 이미지 → 타이틀 → 날짜 → 헤더) */
html:not([data-hero-ready]) body[data-page='main'] .site-header,
html:not([data-hero-ready]) body[data-page='main'] .home-section-next,
html:not([data-hero-ready]) body[data-page='main'] .home-hero__heading,
html:not([data-hero-ready]) body[data-page='main'] .home-hero__schedule,
html:not([data-hero-ready]) body[data-page='main'] .home-top__graphic {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-hero-ready]) body[data-page='main'] .site-header,
  html:not([data-hero-ready]) body[data-page='main'] .home-section-next,
  html:not([data-hero-ready]) body[data-page='main'] .home-hero__heading,
  html:not([data-hero-ready]) body[data-page='main'] .home-hero__schedule,
  html:not([data-hero-ready]) body[data-page='main'] .home-top__graphic {
    opacity: 1;
  }
}
/* 메인 하단 짙은 바탕이 푸터까지 바로 이어지게 한다 */
body[data-page='main'] .site-footer { margin-top: 0; }
/* 구간 클릭 이동(댓글 #27) — 마우스 환경에서만 누를 수 있다는 신호를 준다 */
@media (hover: hover) and (pointer: fine) { [data-section-next] { cursor: pointer; } }
/* 2차 메인: 히어로 및 전시소개 고정 트랙 (제자리 오버랩 페이드인) */
.home-stage-track {
  position: relative;
  height: 300dvh;
}
.home-stage-viewport {
  position: sticky;
  top: 0;
  height: 100dvh;
  width: 100%;
  overflow: clip;
}
/* 2, 3섹션 공유 배경: 짙은 잉크톤 바탕 및 루프 동영상 */
.home-shared-lower-bg {
  position: absolute;
  inset: -1px 0;
  z-index: 2;
  background: var(--primary-ink);
  opacity: 0;
  pointer-events: none;
  overflow: clip;
}
.home-shared-lower-bg .home-visit__graphic {
  position: absolute;
  z-index: 0;
  top: 0;
  left: -13%;
  width: 93%;
  max-width: 1338px;
  opacity: .06;
  pointer-events: none;
}
.home-shared-lower-bg .home-visit__graphic img,
.home-shared-lower-bg .home-visit__graphic video {
  width: 100%;
  height: auto;
}
.home-hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: clip;
  height: 100%;
  display: flex;
  align-items: center;
  will-change: opacity, filter;
}
.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, var(--primary-deep) 0%, var(--primary) 62%, var(--primary-pale) 137%);
}
.home-top__graphic {
  position: absolute;
  inset: 0 -17.4% 0 auto;
  width: 86.7%;
  z-index: 1;
  pointer-events: none;
}
.home-hero__graphic {
  position: relative;
  width: 100%;
  height: 100%;
}
.home-hero__graphic img, .home-hero__graphic video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
.home-top__graphic:has([data-media-layout='scene']) { inset: 0; width: auto; }
.home-hero__graphic[data-media-layout='scene'] { height: min(100svh, 100%); }
.home-hero__graphic[data-media-layout='scene'] img,
.home-hero__graphic[data-media-layout='scene'] video { object-fit: cover; object-position: center; }

/* 전시 소개 섹션: 히어로 위에 정확히 겹쳐진 채 제자리에서 0% -> 100% 불투명하게 등장 */
.home-intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;
  height: 100%;
  padding-block: 6.25rem;
  display: grid;
  place-items: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.home-intro.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.home-intro__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(3, 14, 23, 0.90);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
}
.home-intro.is-visible .home-intro__backdrop {
  opacity: 1;
}
.home-lower {
  position: relative;
  z-index: 6;
}
.home-top__graphic .media-toggle { z-index: 2; pointer-events: auto; }
.home-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2.5rem, 6vh, 5.5rem);
  box-sizing: border-box;
  height: 100%;
  max-height: 100vh;
  padding-top: calc(var(--header-height) + 0.5rem);
  padding-bottom: 2rem;
}
.home-hero__heading {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.2vh, 1.75rem);
}
.home-hero__title {
  width: min(427px, 32vw, 42vh);
  max-width: 100%;
}
.home-hero__title img {
  width: 100%;
  height: auto;
  max-height: 44vh;
  object-fit: contain;
  object-position: left bottom;
}
.home-hero__lead {
  margin: 0;
  color: var(--ink);
  font-size: clamp(0.9375rem, 1.5vw, 1.4rem);
  line-height: 1.45;
}
.home-hero__schedule {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.8vh, 1.35rem);
}
.home-hero__date {
  margin: 0;
  width: min(480px, 38vw, 50vh);
  max-width: 100%;
}
.home-hero__date img {
  width: 100%;
  height: auto;
  max-height: 6.5vh;
  object-fit: contain;
  object-position: left center;
}
.home-hero__place {
  margin: 0;
  color: var(--secondary);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.5;
}
.home-section-next { position: absolute; z-index: 2; right: var(--page-gutter); bottom: 20px; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; color: var(--gray-30); font-size: 14px; line-height: 20px; border: 1px solid var(--rule); border-radius: 24px; background: var(--primary-ink); }
.home-section-next:hover { color: var(--ink); border-color: var(--gray-30); }
.home-intro__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2.5rem; }
.home-intro__title { line-height: 0; }
.home-intro__title img { width: min(307px, 70vw); height: auto; }
.home-intro__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  max-width: 1100px;
}
.intro-pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
}
.intro-pair__ko {
  margin: 0;
  color: var(--gray-10);
  font-size: clamp(.9375rem, 1.25vw, 1.125rem);
  line-height: 1.6;
  letter-spacing: -.015em;
  word-break: keep-all;
}
.intro-pair__en {
  margin: 0;
  color: var(--gray-500);
  font-size: clamp(.8125rem, 1vw, .875rem);
  line-height: 1.5;
  letter-spacing: .0039em;
}
.intro-pair__ko .break-comma,
.intro-pair__ko .break-first-line { display: none; }
@media (max-width: 900px) {
  .intro-pair__ko .break-comma { display: block; height: 0.35rem; }
  .intro-pair__ko .break-first-line { display: block; height: 0.25rem; }
}
.home-intro__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.home-intro__credit-link {
  margin: 0;
  font-size: clamp(0.875rem, 1.1vw, 0.95rem);
  line-height: 1.4;
}
.home-intro strong { color: var(--primary-pale); font-size: clamp(.9375rem, 1.25vw, 1.125rem); font-weight: 400; line-height: 1.8; letter-spacing: -.015em; }
/* 일정·방명록 (MA-1000 하단) — 3섹션과 끊김 없이 같은 배경색과 그래픽 연결 */
.home-lower {
  position: relative;
  isolation: isolate;
  background: var(--primary-ink);
  margin-top: -1px; /* 서브픽셀 렌더링 틈새 방지 */
}
.home-lower .home-visit__graphic {
  display: none;
}
.home-visit {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: transparent;
  height: 100%;
  display: grid;
  place-items: center;
  padding-block: 5rem;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.home-visit.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.home-visit__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(2.5rem, 5vh, 4rem);
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}
.visit-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
.visit-group__label {
  margin: 0;
  color: var(--primary-20);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.visit-group__main {
  margin: 0;
  color: rgb(255 255 255 / 90%);
  font-size: clamp(1.125rem, 1.6vw, 1.35rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.015em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.visit-group__sub-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.15rem;
}
.visit-group__sub {
  margin: 0;
  color: rgb(255 255 255 / 60%);
  font-size: clamp(0.875rem, 1.1vw, 0.95rem);
  line-height: 1.4;
}
.visit-link {
  color: rgb(255 255 255 / 60%);
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.visit-link:hover {
  color: var(--white);
}
.home-guest {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  min-height: 100vh;
  padding-block: 5rem;
  box-sizing: border-box;
}
.home-guest__status { margin: 0; color: var(--gray-500); text-align: center; }
.home-guest__list.guest-grid { column-gap: 20px; row-gap: 32px; width: 100%; }
/* dim 은 화면 전체 폭(시안 Background 기준)이라 .home-lower 에 건다. 글이 없으면 덮지 않는다 */
.home-lower:has(.home-guest.has-entries)::after { content: ''; position: absolute; z-index: 0; inset: auto 0 0; height: 378px; background: linear-gradient(0deg, var(--primary-ink) 27%, rgb(3 7 17 / 0%)); pointer-events: none; }
/* 「모인 마음들 보기」 */
.home-guest__more {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.home-guest__more .visit-link {
  font-size: clamp(0.875rem, 1.1vw, 0.95rem);
  font-weight: 400;
  line-height: 1.4;
}
@media (max-width: 900px) { .visit-card { padding: 2rem 1.5rem; } }
@media (max-width: 600px) {
  .home-intro__content {
    gap: 1.5rem;
  }
  .intro-pair {
    gap: 0.25rem;
  }
  .intro-pair__ko {
    font-size: clamp(0.68rem, 2.45vw, 0.78rem);
    line-height: 1.6;
  }
  .intro-pair__ko.intro-line--first {
    white-space: normal;
  }
  .intro-pair__ko .break-comma {
    display: block !important;
    height: 0.25rem; /* 두/세 번째 문장의 쉼표 줄바꿈 */
  }
  .intro-pair__ko .break-first-line {
    display: block !important;
    height: 0.25rem; /* 첫 번째 문장의 '유지한 채' 줄바꿈 */
  }
  .intro-pair__en {
    font-size: clamp(0.58rem, 2.05vw, 0.68rem);
    line-height: 1.45;
  }
  .home-intro strong {
    font-size: clamp(0.72rem, 2.75vw, 0.85rem);
  }
  .home-top__graphic {
    inset: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .home-hero__graphic {
    opacity: .75;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .home-hero__graphic img, .home-hero__graphic video {
    object-position: center center;
  }
  .home-hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 윗부분에 타이틀, 아랫부분에 날짜 딱 붙이고 중간 간격을 자동 확장 */
    height: 100svh;
    padding-top: calc(var(--header-height) + 50px); /* 헤더 아래 100px 여백 */
    padding-bottom: 50px; /* 화면 하단 100px 여백 */
    box-sizing: border-box;
  }
  .home-hero__heading {
    gap: 0.75rem;
  }
  .home-hero__title {
    width: min(270px, 66vw);
  }
  .home-hero__title img {
    max-height: 32vh;
  }
  .home-hero__lead {
    font-size: 0.95rem;
  }
  .home-hero__schedule {
    gap: 0.5rem;
    width: 100%;
  }
  .home-hero__date {
    width: 100%;
    max-width: 100%;
  }
  .home-hero__date img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
  .home-hero__place {
    font-size: 1rem;
  }
  .home-intro { min-height: 0; padding-block: 5rem 6rem; }
  .home-intro__text { gap: 1.75rem; }
  .home-shared-lower-bg .home-visit__graphic { left: 50%; transform: translateX(-50%); width: 140%; max-width: none; }
  .home-visit { height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; padding-block: 2rem; box-sizing: border-box; }
  .home-visit .wrap { padding-inline: 1.25rem; width: 100%; } /* 좌우 패딩값 추가 */
  .home-visit__info { gap: 2rem; }
  .visit-group { gap: 0.35rem; }
  .visit-group__label { font-size: 0.75rem; }
  .visit-group__main { font-size: 0.95rem; flex-wrap: wrap; white-space: normal; }
  .visit-group__sub { font-size: 0.8rem; }
  .home-guest { height: 760px; padding-block: 3rem; }
  .home-lower:has(.home-guest.has-entries)::after { height: 260px; }
  .home-guest__more { bottom: 64px; }
}
