/* ==========================================================================
   EXHIBITION INTRO — exhibition.css
   ========================================================================== */

.exhibition{
  padding: clamp(64px, 10vw, 120px) 0;
  background: var(--clr-bg-soft);
  border-top: 1px solid var(--clr-line);
}

/* ---- 2단 그리드: 포스터 / 텍스트 ----
   align-items를 stretch로 바꿔서 두 컬럼의 높이를 포스터 쪽(더 긴 쪽)에
   맞춰 동일하게 만든다 — 그래야 .exhibition__text 안에서 영상을
   flex:1로 늘렸을 때 그 아랫변이 포스터 아랫변과 정확히 한 줄로
   맞아떨어진다. */
.exhibition__intro{
  display:grid;
  grid-template-columns: 0.8fr 1fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: stretch;
}

.exhibition__poster{ position: relative; }
.exhibition__poster img{
  width:100%;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 48px rgba(36,38,59,0.14);
}
.exhibition__poster-caption{
  position:absolute;
  bottom: -14px; left: 16px;
  background: var(--clr-bg-soft);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--clr-line);
}

/* "About the Exhibition" 라벨만 다른 eyebrow(Official Poster, Floor Plan,
   Visiting Info)보다 크고 굵게 — 전역 .eyebrow는 그대로 두고 이 위치에서만
   덮어쓴다. */
.exhibition__text > .eyebrow{
  font-size: 1.15rem;
  font-weight: 700;
}

/* .exhibition__text를 세로 flex 컨테이너로 만들어, 그 안의 영상 블록이
   남는 세로 공간을 flex:1로 채우며 늘어나게 한다(아래 .exhibition__video 참고) */
.exhibition__text{
  display: flex;
  flex-direction: column;
}

.exhibition__body{ margin-top: 6px; }

/* 왼쪽정렬 + 양끝맞춤: 한글 문단이라 단어 사이 공백만으로는 오른쪽 끝이
   가지런히 안 맞을 수 있어, text-justify:inter-character로 글자 사이
   자간을 미세 조정해서 마지막 줄을 제외한 모든 줄의 오른쪽 끝을
   왼쪽과 동일하게 맞춘다. */
.exhibition__body p{
  margin-bottom: 16px;
  color: var(--clr-ink);
  text-align: justify;
  text-justify: inter-character;
}

/* ---- 소개 영상 (유튜브 임베드) — 설명 문단 아래, 포스터 옆 남는
   세로 여백을 정확히 채워서 포스터 아랫변과 영상 아랫변이 한 줄로
   맞도록 flex:1로 늘어난다(고정 비율 대신 남는 높이만큼 차지). ---- */
.exhibition__video{
  margin-top: 24px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 48px rgba(36,38,59,0.14);
  flex: 1 1 auto;
  min-height: 220px;
}
.exhibition__video iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- 평면도 / 관람안내 ---- */
.exhibition__detail{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  margin-top: clamp(56px, 8vw, 96px);
  padding-top: clamp(40px, 6vw, 64px);
  border-top: 1px solid var(--clr-line);
}

.exhibition__detail h3{
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  margin: 8px 0 24px;
}

/* ---- 평면도 / 오시는 길 슬라이더 (1.jpg ↔ 2.png 를 넘겨서 볼 수 있음) ---- */
.floorplan-slider{
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--clr-bg);
  box-shadow: 0 24px 48px rgba(36,38,59,0.12);
}
.floorplan-slider__viewport{
  overflow: hidden;
  width: 100%;
}
.floorplan-slider__track{
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .5s var(--ease);
}
.floorplan-slider__slide{
  flex: 0 0 100%;
  max-width: 100%;
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-bg);
}
.floorplan-slider__slide img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.floorplan-slider__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--clr-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(36,38,59,0.2);
  transition: background .2s var(--ease), color .2s var(--ease);
  z-index: 3;
}
.floorplan-slider__arrow:hover{ background: var(--clr-cyan); color:#fff; }
.floorplan-slider__arrow--prev{ left: 14px; }
.floorplan-slider__arrow--next{ right: 14px; }

.floorplan-slider__dots{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.floorplan-slider__dot{
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(36,38,59,0.28);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.floorplan-slider__dot.is-active{
  background: var(--clr-cyan);
  transform: scale(1.3);
}

/* ---- 포스터 / 평면도 확대 보기 커서 설정 ---- */
.zoomable{ cursor: pointer; }

.img-lightbox{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(15, 16, 26, 0.86);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  cursor: default;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.img-lightbox.is-open{ opacity: 1; visibility: visible; }
.img-lightbox img{
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  transform: scale(0.92);
  transition: transform .3s var(--ease);
  cursor: default;
}
.img-lightbox.is-open img{ transform: scale(1); }
.img-lightbox__close{
  position: absolute;
  top: 22px;
  right: 26px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.img-lightbox__close:hover{ background: rgba(255,255,255,0.26); }

.exhibition__schedule-list div{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--clr-line);
}
.exhibition__schedule-list dt{
  font-size: 0.8rem;
  color: var(--clr-ink-soft);
}
.exhibition__schedule-list dd{
  margin:0;
  font-weight:600;
  text-align:right;
}

@media (max-width: 860px){
  .exhibition__intro,
  .exhibition__detail{ grid-template-columns: 1fr; }

  /* 1단으로 쌓이면 포스터/영상이 같은 줄에 있지 않으니 stretch로 늘릴
     이유가 없다 — 영상은 다시 고정 16:9 비율로 되돌린다. */
  .exhibition__video{
    flex: none;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/* ---- 스크롤 리빌 애니메이션 (exhibition.js 가 .is-visible 토글) ---- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   RESPONSIVE HARDENING
   ========================================================================== */
.exhibition__poster img{
  height: auto;
  object-fit: contain;
}
.exhibition__video iframe{
  min-height: 0;
}
.exhibition__schedule-list dt{
  flex: 0 0 auto;
}
.exhibition__schedule-list dd{
  min-width: 0;
}

@media (max-width: 900px){
  .exhibition__intro{
    gap: clamp(28px, 5vw, 48px);
  }
  .exhibition__detail{
    gap: clamp(28px, 5vw, 48px);
  }
}

@media (max-width: 640px){
  .exhibition{
    padding-top: clamp(56px, 12vw, 80px);
    padding-bottom: clamp(64px, 14vw, 96px);
  }
  .exhibition__body p{
    text-align: left;
    text-justify: auto;
  }
  .exhibition__poster-caption{
    left: 10px;
    bottom: -12px;
  }
  .exhibition__schedule-list div{
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
  }
  .exhibition__schedule-list dt{
    width: 4.5rem;
  }
  .exhibition__schedule-list dd{
    flex: 1 1 auto;
    text-align: right;
  }
  .floorplan-slider__arrow{
    width: 34px;
    height: 34px;
  }
  .floorplan-slider__arrow--prev{ left: 8px; }
  .floorplan-slider__arrow--next{ right: 8px; }
  .img-lightbox{
    padding: max(16px, env(safe-area-inset-top, 16px))
             max(16px, env(safe-area-inset-right, 16px))
             max(16px, env(safe-area-inset-bottom, 16px))
             max(16px, env(safe-area-inset-left, 16px));
  }
  .img-lightbox img{
    max-width: 94vw;
    max-height: 82dvh;
  }
}