/* ==========================================================================
   1차 오픈 공통 스타일 — GNB / fixed 타이포 / 레터링 / 페이지 스캐폴드
   (티저 스타일은 common.css, 여기는 신규 멀티페이지 전용)
   ========================================================================== */

/* 더블탭 확대만 끈다 (핀치는 여기서 막지 않는다 —
   조상에서 핀치를 막으면 지도 안의 두 손가락 확대까지 같이 죽는다.
   페이지 핀치 차단은 site.js의 gesture 이벤트 차단이 담당) */
body {
  touch-action: manipulation;
}

:root {
  --green: #EEFF8A;
  --pink: #FC959E;
  --pink-glow: rgba(252, 149, 158, 0.80);
  --gnb-h: 106px;
  --gnb-bar-h: 60px; /* GNB 바가 실제로 차지하는 흐름 높이 (2뎁스는 absolute라 제외) */
}

@media screen and (max-width: 1080px) {
  :root {
    --gnb-bar-h: 84px;
  }
}

/* --------------------------------------------------------------------------
   작가명 레터링 (피그마 확정 스타일)
   -------------------------------------------------------------------------- */
.lettering {
  width: 100%;
  font-family: 'Noto Serif KR', serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 170%;
  color: var(--bk);
  text-align: center;
  filter: url(#fx-lettering);
  text-shadow: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.lettering::selection {
  background: transparent;
}

@media screen and (max-width: 1080px) {
  .lettering {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   티저 전역 규칙 오버라이드 (common.css의 header/main/nav 전역 스타일 무력화)
   -------------------------------------------------------------------------- */
/* sticky 감지용 센티널 (레이아웃에 영향 없도록 1px + 음수 마진) */
.gnb-sentinel {
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
}

header.gnb {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  height: auto;
  transform: none;
  background: transparent; /* 실제 배경은 ::before가 그림 (높이 가변) */
  z-index: 100;
  --gnb-bg-h: 60px; /* 기본 = 바 높이 */
}

/* 배경 레이어: 2뎁스가 열리면 106px까지 내려와 서브메뉴까지 덮음 */
header.gnb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: var(--gnb-bg-h);
  background: linear-gradient(180deg, #261816 16.35%, rgba(38, 24, 22, 0.10) 84.13%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: height 0.25s ease, background 0.25s ease;
  pointer-events: none;
}

/* 2뎁스가 실제로 보이는 동안 배경 106px
   (기본=활성 섹션 / 메뉴 호버 중=JS가 연 .is-open 항목 — 표시 규칙과 동일 조건이라
    서브로 마우스 옮기는 중에 배경이 접히지 않음) */
.gnb:not(.is-navhover):has(.gnb-item.is-active .gnb-sub),
.gnb.is-navhover:has(.gnb-item.is-open .gnb-sub) {
  --gnb-bg-h: 106px;
}

/* 홈: 히어로 아래에 있을 땐 솔리드 --bg, 상단에 붙으면(.is-stuck) 그라데이션+블러 */
.gnb--home:not(.is-stuck)::before {
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.gnb nav.gnb-nav,
.gnb nav.gnb-m-acc {
  min-width: 0;
  padding: 0;
  height: auto;
}

/* 모바일 패널 아코디언도 <nav> — 티저 nav의 min-width/align-items가 새어들어와
   항목이 132px로 쪼그라들던 문제 (하위 2열이 좁게 붙음) */
.gnb nav.gnb-m-acc {
  align-items: stretch;
  justify-content: flex-start;
}

.page main.page-main {
  height: auto;
  min-height: 100svh;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   GNB (피그마: 로고 좌, 메뉴+유틸이 우측 절반에 넓게 분포, 서브메뉴는 해당 메뉴 아래)
   -------------------------------------------------------------------------- */
.gnb-inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  height: 60px;
}

.gnb-logo {
  min-width: 280px;
  font-size: var(--fzHeader);
  font-weight: 700;
  line-height: 160%;
}

.gnb-nav {
  display: flex;
  gap: 120px;
}

.gnb-link {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
  cursor: pointer;
}

/* 서브메뉴: 부모 메뉴 아래에서 시작해 가로로 흐름 (피그마)
   활성 섹션에서 노출 + 호버 시 노출 */
.gnb-sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0 18px;
  flex-direction: row;
  gap: 80px;
  white-space: nowrap;
}

/* 기본: 현재 섹션의 서브 노출 */
.gnb-item.is-active .gnb-sub {
  display: flex;
}

/* 메뉴에 마우스가 올라간 동안엔 호버된 항목(.is-open)만 노출 — 상태는 JS가 관리.
   (CSS :hover만으로는 서브로 마우스를 옮기는 대각선 경로에서 hover가 끊겨 클릭 불가) */
.gnb.is-navhover .gnb-item .gnb-sub {
  display: none;
}

.gnb.is-navhover .gnb-item.is-open .gnb-sub {
  display: flex;
}

.gnb-sub-link {
  color: rgba(255, 246, 233, 0.30);
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

.gnb-sub-link.is-active {
  color: #FFF6E9;
}

.gnb-sub-link.is-disabled {
  color: rgba(255, 246, 233, 0.30);
  cursor: default;
}

.gnb-util {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding-left: 60px;
}

.gnb-util-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
  white-space: nowrap;
}

/* 모바일 (피그마 0723: 로고 + EN + 햄버거) */
.gnb-m-lang {
  display: none;
  font-size: 15px;
  font-weight: 700;
}

.gnb-m-toggle {
  display: none;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='3.6001' y1='0.600012' x2='20.4001' y2='0.600012' stroke='%23FFF6E9' stroke-width='1.2'/%3E%3Cline y1='7.80002' x2='24' y2='7.80002' stroke='%23FFF6E9' stroke-width='1.2'/%3E%3Cline x1='3.6001' y1='15' x2='20.4001' y2='15' stroke='%23FFF6E9' stroke-width='1.2'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.gnb-m-panel {
  display: none;
}

@media screen and (max-width: 1080px) {
  header.gnb::before {
    height: 100%;
  }

  .gnb-inner {
    padding: 20px 30px;
    height: 84px;
    gap: 20px;
  }

  .gnb-logo {
    min-width: 150px;
  }

  .gnb-nav,
  .gnb-util {
    display: none;
  }

  .gnb-m-lang {
    display: inline-block;
    margin-left: auto;
    align-self: center;

    font-size: 14px;
  }

  .gnb-m-toggle {
    display: flex;
    align-self: center;
  }

  /* 풀스크린 패널 (피그마 Nav 프레임)
     display는 트랜지션이 안 먹으므로 항상 깔아두고 opacity로 페이드 인/아웃.
     visibility는 페이드가 끝난 뒤(0.3s 지연) 꺼야 닫힐 때도 서서히 사라진다.
     (열릴 땐 지연 없이 바로 visible → 페이드 인이 보임) */
  .gnb-m-panel {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    padding: 20px 30px 80px;
    background: #1A100F;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .gnb.is-open .gnb-m-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s;
  }

  .gnb-m-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
  }

  .gnb-m-close {
    background-color: transparent;
    border: 0;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.353516 19.3535L19.3442 0.353516M1.36282 0.353538L20.3535 19.3535' stroke='%23FFF6E9'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
  }

  /* 도트 리더: 넓은 간격의 개별 점 (피그마 — 점선 아님) */
  .gnb-m-dots {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .gnb-m-dots > span {
    display: block;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--gr);
  }

  /* 유틸 행: · · 입장권 · · 검색 · · */
  .gnb-m-util {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .gnb-m-util-link {
    font-size: 14px;
    font-weight: 700;
    line-height: 180%;
    padding: 0 34px;
  }

  /* 아코디언 */
  .gnb-m-acc {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .gnb-m-group {
    border: 0;
  }

  .gnb-m-row {
    display: flex;
    align-items: center;
    width: 100%;
    background: none;
    border: 0;
    color: var(--wh);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
  }

  .gnb-m-label {
    font-size: 22px;
    font-weight: 700;
    line-height: 170%;
  }

  .gnb-m-row > .gnb-m-dots {
    padding: 0 22px;
  }

  /* +/− 토글 아이콘 */
  .gnb-m-toggle-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex: none;
    align-self: center;
  }

  .gnb-m-toggle-icon::before,
  .gnb-m-toggle-icon::after {
    content: '';
    position: absolute;
    background: var(--wh);
  }

  .gnb-m-toggle-icon::before {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
  }

  .gnb-m-toggle-icon::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
  }

  .gnb-m-group.is-open .gnb-m-toggle-icon::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
  }

  /* 하위 메뉴: 2열 그리드 (피그마 — 좌열부터 행 우선 채움) */
  .gnb-m-sub {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding: 20px 0;
  }

  .gnb-m-group.is-open .gnb-m-sub {
    display: grid;
  }

  .gnb-m-sub-link {
    font-size: 14px;
    font-weight: 700;
    line-height: 180%;
  }

  .gnb-m-sub-link.is-disabled {
    opacity: 0.3;
  }
}

/* --------------------------------------------------------------------------
   페이지 데코 타이포 (피그마: 크림색 세리프, -6° 회전)
   데스크톱: #wrap 안 sticky — 스크롤 중 좌측 중단에 붙고, 본문(#wrap) 끝에서
   멈춰 푸터 위로 넘어가지 않음 / 모바일: 페이지 상단 정적 배치
   -------------------------------------------------------------------------- */
/* 데스크톱: #wrap 마지막 자식 + sticky bottom —
   스크롤 내내 뷰포트 하단 120px 위에 떠 있다가 본문 끝에서 그 자리에 붙음 */
.fixed-typo--pc {
  position: sticky;
  bottom: 120px;
  /* height:0 + translateY(-100%)로 띄우면 글자가 상자 "밖"에 그려져서
     sticky 경계(=.split-body)가 글자를 못 잡는다 → 상자가 실제 높이를 갖게 하고
     글자도 상자 안에 그린다. 그래야 .prose-1 위로 못 올라온다. */
  z-index: 50;
  pointer-events: none;
  text-align: right;
  width: 50%;
  /* rotate(-10deg)로 오른쪽이 위로 들리는 만큼(폭×sin10° ≈ 100px) 상자 위에 여유를 둔다.
     여유가 없으면 들린 글자가 상자 밖으로 나가 sticky 경계를 빠져나간다.
     패딩은 위쪽에만 붙으므로 bottom:120px 기준 화면상 위치는 그대로다. */
  padding-top: 120px;
}

.fixed-typo--m {
  display: none;
}

.fixed-typo-inner {
  display: inline-block;
  margin-left: 120px;
  transform: translateY(-100%) rotate(-10deg);
  transform-origin: left bottom;
}

.fixed-typo--pc .fixed-typo-inner {
  min-width: 564px;
  text-align: left;
  transform: rotate(-10deg); /* translateY(-100%) 제거 — 상자 안에 그리기 위해 */
}

.fixed-typo-line {
  font-size: 40px;
  font-weight: 700;
  line-height: 160%;
}

.fixed-typo-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 27px;
  padding: 0;
  min-width: auto;
  pointer-events: auto;
}

.fixed-typo-link {
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
  cursor: pointer;

  display: flex;
  gap: 2px;
}

.fixed-typo-label {
  flex: none;
}

.fixed-typo-label::after {
  content: ': ';
}

@media screen and (max-width: 1080px) {
  .fixed-typo--pc {
    display: none;
  }

  .fixed-typo--m {
    display: block;
    position: static;
    height: auto;
    margin: 80px 30px 60px;
  }

  .fixed-typo--m .fixed-typo-inner {
    margin-left: 0;
    transform: rotate(-10deg);
    transform-origin: left top;
  }

  .fixed-typo-line {
    font-size: 32px;
  }
}

/* --------------------------------------------------------------------------
   페이지 공통 스캐폴드
   -------------------------------------------------------------------------- */
.page .page-main {
  margin: 0 auto;
  padding: calc(44px + 74px) 20px 0;
}

.page .page-sec-title {
  font-size: var(--fzSecTitle, 32px);
  font-weight: 900;
  margin-bottom: 32px;
}

.page .prose {
  max-width: 564px;
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

.page .prose.prose-1 {
  font-size: 22px;
  font-weight: 700;
  line-height: 170%;
  letter-spacing: 0;
}

.page .prose p + p {
  margin-top: 1.75rem;
}

.page .prose.prose-2 > p {
  text-indent: 2rem;
}

.page .prose.prose-2 > p:first-child {
  text-indent: 0;
}

.page-main--split .prose-1 {
  margin: 0 auto 80px;
}

/* 전시 아이덴티티 이미지 — 전시장소의 장소 사진과 같은 규격 (우측 50%) */
.page--ei .ei-photo {
  width: 50%;
  margin: 0 0 20px auto;
}

.page--ei .ei-photo img {
  display: block;
  width: 100%;
  max-width: 564px;
}

.page-main--split .prose-2 {
  margin: 0 0 0 auto;
  max-width: 50%;
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

.page-main--split .prose-2 > p {
  max-width: 564px;
}

@media screen and (max-width: 1080px) {
  .page .prose {
    font-size: 14px;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.14px;
  }

  .page .prose.prose-1 {
    font-size: 16px;
    font-weight: 700;
    line-height: 180%;
    letter-spacing: 0;
  }

  .page .prose p + p {
    margin-top: 1.8rem;
  }

  .page-main--split .prose-1 {
    margin: 0 auto 60px;
  }

  .page--ei .ei-photo {
    width: 100%;
    margin: 0 0 24px;
  }

  .page--ei .ei-photo img {
    max-width: none;
  }

  .page-main--split .prose-2 {
    margin: 0;
    max-width: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.14px;
  }

  .page-main--split .prose-2 > p {
    max-width: 100%;
  }
}

/* 감독 페이지: 그리드 우측 배치 유지 */
.page--director .page-main {
  display: flex;
  justify-content: flex-end;
}

.page--director .fixed-typo--pc .fixed-typo-line:nth-child(2):before,
.page--director .fixed-typo--m .fixed-typo-line:nth-child(2):before {
  content: '& ';
}

/* --------------------------------------------------------------------------
   전시개요 (피그마 "소개/전시개요")
   ① 비주얼 = 한 화면: 배경 + 타이틀 레터링 + 작가명단 세로 롤링 + 전시정보
   ② 후원·협찬 상시 모집
   -------------------------------------------------------------------------- */
/* 비주얼이 화면 끝까지 차도록 본문 패딩 해제
   (모바일 공통 보정의 .page .page-main보다 우선하도록 .page.page--overview) */
.page.page--overview .overview-main {
  max-width: none;
  padding: 0;
}

/* ── 비주얼 ── */
.page--overview .ov-visual {
  position: relative;
  /* GNB 바 아래에서 시작하므로 그만큼 빼야 정확히 한 화면 */
  min-height: calc(100svh - var(--gnb-bar-h));
  display: flex;
  /*align-items: center;*/
  /*overflow: hidden;*/
}

/* 배경은 별도 레이어 — 모바일에서 첫 화면 높이로만 깔기 위해
   (타이틀 레터링은 이 배경 이미지 안에 이미 들어 있음) */
.page--overview .ov-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: calc(100svh - var(--gnb-h));
  background-image: var(--ov-bg-pc);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

@media screen and (min-width: 1081px) {
  .page--overview .ov-visual::before {
    display: none;
  }
}

.page--overview .ov-visual::after {
  content: '';
  position: absolute;
  top: calc(var(--gnb-bar-h) * -1);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: calc(100% + var(--gnb-bar-h));
  background-image: url('../img/bg-ov-layer.png');
  background-size: cover;
  background-position: center top;
  /*background-position: center calc(50% + 120px);*/
  background-repeat: no-repeat;
  pointer-events: none;
}

.page--overview .ov-visual-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  /* 높이는 전시정보(.ov-info)가 정한다 — 정보가 한 화면보다 길어도 잘리지 않게.
     배경(::before)과 작가명단(.ov-credits-clip)은 그대로 첫 화면 높이를 유지한다. */
  min-height: calc(100svh - var(--gnb-bar-h));
  margin: 0 auto;
  padding: 0 20px;
}

/* ── 작가명단: 엔딩 크레딧처럼 세로 무한 롤링 ──
   같은 이미지를 두 장 이어 붙이고 트랙을 -50%까지 이동 → 이음매 없이 반복 */
/* 첫 화면 높이로 잘라내는 틀 — 모바일에서 명단이 아래 본문까지 흘러내리지 않게 */
.page--overview .ov-credits-clip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /*height: calc(100svh - var(--gnb-bar-h));*/
  height: 100%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.page--overview .ov-credits {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--credits-w, 220px);
  height: 120%;
  transform: translate(-50%, -50%) rotate(-10deg);
  overflow: hidden;
}

.page--overview .ov-credits-track {
  will-change: transform;
  animation: ov-credits-roll var(--credits-dur, 70s) linear infinite;
}

.page--overview .ov-credits-track img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes ov-credits-roll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-33.3333%);
  }
  /* 이미지 3장 중 1장만큼 */
}

@media (prefers-reduced-motion: reduce) {
  .page--overview .ov-credits-track {
    animation: none;
  }
}

/* ── 전시정보 (주제 ~ 협찬) ── */
/* absolute면 높이에 안 잡혀서 정보가 길 때 아래 섹션을 침범한다
   → 흐름 안에 두고 margin-left:auto로 우측 정렬 (위치는 전과 동일) */
.page--overview .ov-info {
  padding: calc(58px + var(--gnb-bar-h)) 0 58px;
  max-width: 364px;
  margin: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lang-en .page--overview .ov-info {
  max-width: 330px;
}

.page--overview .ov-info-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

.page--overview .ov-info-cont {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

.page--overview .ov-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 22px;
  margin-top: 10px;
  max-width: 250px;
}

/* 로고 감싸개 — 줄바꿈 제어는 여기서, 이미지 크기는 건드리지 않는다.
   justify-content: inherit → PC는 좌측, 모바일은 가운데(부모 설정)를 그대로 따라간다 */
.page--overview .ov-logo-item {
  display: flex;
  justify-content: inherit;
}

/* 후원 첫 로고(2-1)는 폭이 작아 옆 로고와 한 줄에 붙을 수 있다 →
   max-width와 무관하게 항상 한 줄을 혼자 쓰도록 못 박는다 (PC·모바일 공통) */
.page--overview .ov-info-row--support .ov-logo-item:first-child {
  flex: 0 0 100%;
}

.page--overview .ov-logo {
  height: 24px;
  width: auto;
  display: block;
}

/* ── 후원·협찬 상시 모집 ── */
.page--overview .ov-sponsor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  padding: 180px 20px 110px;
}

/* 제목은 다른 페이지와 같은 데코 타이포(.fixed-typo).
   #wrap 전체가 아니라 이 섹션 안에서만 sticky 되도록 그리드 칸에 가둔다.
   (히어로 위까지 떠다니면 안 되므로) */
.page--overview .ov-sponsor .fixed-typo--pc {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  width: 100%;
}

.page--overview .ov-sponsor-body {
  grid-column: 2;
  grid-row: 1;
}

.page--overview .ov-sponsor-body {
  max-width: 564px;
}

.page--overview .ov-sponsor-block + .ov-sponsor-block {
  margin-top: 40px;
}

.page--overview .ov-sponsor-subtitle {
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

.page--overview .ov-sponsor-contact {
  margin-top: 40px;
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

.page--overview .ov-sponsor-contact-label {
  font-weight: 700;
}

.page--overview .ov-sponsor-contact-value a {
  text-decoration: underline;
}

.page--overview .star-btn.ov-sponsor-btn {
  width: auto;
  margin: 40px 0 0;
  justify-content: flex-start;
  gap: 15px;
}

@media screen and (max-width: 1080px) {
  .page--overview .ov-visual {
    display: block;
    overflow: hidden;
  }

  .page--overview .ov-visual::before {
    inset: 0 0 auto 0;
    background-image: var(--ov-bg-m);
    height: calc(100svh - var(--gnb-bar-h));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
  }

  .page--overview .ov-visual::after {
    display: none;
  }

  .page--overview .ov-credits-clip {
    height: calc(100svh - var(--gnb-bar-h));
  }

  .page--overview .ov-visual-inner {
    height: auto;
    padding: calc(100svh - var(--gnb-bar-h) + 120px) 30px 0;
  }

  /* 모바일도 롤링 유지 — 피그마 MO 기준 우측에 더 좁게 */
  .page--overview .ov-credits {
    left: 86%;
    width: calc(var(--credits-w, 220px) * 0.6);
  }

  .page--overview .ov-info {
    position: static;
    transform: none;
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 28px;
    padding: 0;
  }

  .page--overview .ov-logos {
    justify-content: center;
    gap: 18px 20px;
    max-width: 250px;
  }

  .page--overview .ov-sponsor {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 180px 30px 120px;
  }

  .page--overview .ov-sponsor .fixed-typo--m {
    margin: 0 0 20px;
  }

  .page--overview .ov-sponsor-body {
    grid-column: auto;
    grid-row: auto;
    max-width: 100%;
    text-align: center;
  }

  .page--overview .ov-sponsor-block + .ov-sponsor-block {
    margin-top: 60px;
  }

  .page--overview .star-btn.ov-sponsor-btn {
    justify-content: center;
    margin: 60px auto 0;
  }

  .page--overview .ov-sponsor-contact {
    margin-top: 60px;
    font-size: 14px;
    font-weight: 700;
    line-height: 180%;
  }
}

/* 전시감독 */
.page.page--director .page-main {
  max-width: 1200px;
}

.page--director .directors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px;
  max-width: 50%;
}

.page--director .director-col .director-thumb img {
  width: 100%;
  display: block;
}

.page--director .director-col .director-credit {
  font-size: 8px;
  font-weight: 400;
  line-height: 160%;
  text-align: right;
}

@media screen and (max-width: 1080px) {
  .page--director .directors {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 60px;
  }
}

/* 전시장소 */
.page--venue .venue-movement {
  margin-top: 40px;
  margin-bottom: 40px;
  scroll-margin-top: calc(var(--gnb-h) + 40px);
}

.page--venue .venue-photo {
  width: 50%;
  margin: 0 0 20px auto;
}

.page--venue .venue-photo img {
  width: 100%;
  max-width: 564px;
  display: block;
}

.page--venue .venue-name {
  max-width: 50%;
  margin: 0 0 0 auto;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
}

.page--venue .venue-desc {
  max-width: 50%;
  margin: 0 0 0 auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
  word-break: break-all;
}

.page--venue .venue-desc > p {
  max-width: 564px;
  text-indent: 2rem;
}

.page--venue .venue-desc > p:first-child {
  text-indent: 0;
}

/* 전시장소: 층별 서브섹션 */
.page--venue .venue-floor {
  margin: 40px 0 0 auto;
  scroll-margin-top: calc(var(--gnb-h) + 40px);
}

.page--venue .venue-floor-name {
  margin: 0 0 0 auto;
  width: 50%;
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

@media screen and (max-width: 1080px) {
  .page--venue .venue-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 180%;
  }

  .page--venue .venue-floor-name {
    font-size: 14px;
    font-weight: 700;
    line-height: 180%;
  }

  .page--venue .venue-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.14px;
  }
}

/* 프로그램 · 출품작품 — 1차 오픈은 "준비 중"만 노출하는 같은 레이아웃 */
.page.page--program .page-main,
.page.page--artworks .page-main {
  padding: 0 20px;
  margin: 0 0 0 auto;
  width: 50%;
  min-height: calc(100svh - var(--gnb-h));

  display: flex;
  /*justify-content: center;*/
  align-items: center;
}

.page--program .program-coming-desc,
.page--artworks .program-coming-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

@media screen and (max-width: 1080px) {
  .page.page--program,
  .page.page--artworks {
    min-height: calc(100svh - var(--gnb-h));
  }

  .page.page--program .page-main,
  .page.page--artworks .page-main {
    padding: 0 30px;
    width: 100%;
    min-height: auto;
    align-items: flex-start;
  }

  .page--program .program-coming-desc,
  .page--artworks .program-coming-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.14px;
  }
}

/* 방문 */
.page--visit .page-main,
.page--ticket .page-main {
  margin: 0 0 0 auto;
  width: 50%;
}

.page--visit .visit-guide {
  max-width: 564px;
}

.page--ticket .sec-cont--ticket {
  max-width: 564px;
}

.page--visit .visit-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  margin-bottom: 20px;
}

.page--visit .visit-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

.page--visit .visit-cont {
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

.page--visit .visit-notice {
  display: grid;
  grid-template-columns: 140px 1fr;
}

.page--visit .visit-notice > p {
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

.page--visit .visit-notice > ol,
.page--visit .visit-notice > ol * {
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

.page--visit .visit-map iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  margin-bottom: 48px;
}

@media screen and (max-width: 1080px) {
  .page--visit .page-main,
  .page--ticket .page-main {
    margin: 0;
    width: 100%;
  }

  .page--visit .visit-row {
    grid-template-columns: 1fr;
    margin-bottom: 40px;
  }

  .page--visit .visit-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 180%;
  }

  .page--visit .visit-cont {
    font-size: 14px;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.14px;
  }

  .page--visit .visit-notice {
    grid-template-columns: 1fr;
  }

  .page--visit .visit-notice > p {
    font-size: 14px;
    font-weight: 700;
    line-height: 180%;
  }

  .page--visit .visit-notice > ol,
  .page--visit .visit-notice > ol * {
    font-size: 14px;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.14px;
  }
}

/* 홈: 참여작가 전체보기 버튼 */
.artists-viewall-btn {
  display: inline-block;
  margin-top: 40px;
  padding: 10px 22px;
  border: 1px solid var(--wh);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease;
}

.artists-viewall-btn:hover {
  background: var(--wh);
  color: var(--bk);
}

/* --------------------------------------------------------------------------
   참여작가 리스트 (피그마 격자: 5컬럼 그리드)
   - 셀마다 이미지 영역이 항상 자리 차지: 실제 이미지 = height auto / 없으면 1:1·2:1 가영역
   - 이름은 영역 하단에 배치 → 영역 높이 차이로 흩뿌린 인상
   - 기본: 영역 비노출(투명) / 호버: 이미지(또는 가영역 면) 표시 + 이름 흰색
   -------------------------------------------------------------------------- */
.page--artists .artists-main {
  max-width: 1200px;
  padding: 118px 0;
  background: transparent;
}

.artists-grid {
  display: grid;
  /* 1fr = minmax(auto, 1fr) 이라 칸이 콘텐츠(긴 이름)보다 좁아지지 못해 그리드가 터진다
     → minmax(0, 1fr)로 칸 폭을 고정하고 이름이 줄바꿈되게 한다 */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.artists-grid .artist-item {
  display: block;
  text-decoration: none;
}

/* 이미지 영역 */
.artists-grid .artist-media {
  position: relative;
  display: block;
  width: 100%;
}

.artists-grid .artist-media img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* 이미지 없는 작가: 1:1 / 2:1 가영역 */
.artists-grid .artist-item.ratio-11 .artist-media {
  aspect-ratio: 1 / 1;
}

.artists-grid .artist-item.ratio-21 .artist-media {
  aspect-ratio: 2 / 1;
}

.artists-grid .artist-item.no-photo .artist-media {
  background: transparent;
  transition: background 0.25s ease;
}

/* 호버: 이미지/가영역 표시 */
@media (hover: hover) {
  .artists-grid .artist-item:hover .artist-media img {
    opacity: 1;
  }
}

.artists-grid .artist-item.no-photo:hover .artist-media {
  /*background: rgba(255, 246, 233, 0.06);*/
}

.artists-grid .artist-photo-credit {
  display: block;
  margin-top: 2.5px;
  font-size: 8px;
  font-weight: 400;
  line-height: 160%;
  text-align: right;
  opacity: 0;
  transition: opacity 0.25s ease;
}

@media (hover: hover) {
  .artists-grid .artist-item:hover .artist-photo-credit {
    opacity: 1;
  }
}

.sec--artists .artists-grid .artist-photo-credit {
  display: none;
}

/* 이름: 영역 하단에 붙음 */
.artists-grid .artist-name {
  display: block;
  margin-top: 12.5px;
  transition: color 0.2s ease;
  /* 한글은 어절 단위로 끊고(keep-all), 칸보다 긴 단어만 쪼갠다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ★ 마우스가 있는 기기에서만 건다.
   모바일은 탭하는 순간 :hover가 걸려 SVG 필터(#fx-lettering-hover)를 새로 래스터화하는데,
   그 시점이 페이지 전환과 겹쳐 한 프레임 멎는 것처럼 보인다 (부산 리포트 2번). */
@media (hover: hover) {
	/* ★ .lettering (텍스트로 그린 이름)에만 건다.
	   작가명 이미지에 이 필터가 걸리면 이미 구워진 글로우 위에 필터가 한 번 더
	   덮여 그림이 뭉개진다. */
  .artists-grid .artist-item:hover .artist-name.lettering {
    /* 피그마 hover: 크림 글자 + 다크 라운드 아웃라인/할로 + 핑크 글로우 (SVG 필터) */
    color: var(--wh, #FFF6E9);
    filter: url(#fx-lettering-hover);
    text-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   작가명 이미지 (리스트·홈) — 텍스트+SVG 필터를 대신한다

   가로폭은 스니펫이 "원본의 1/2"로 계산해 넣는다 (피그마 2배 추출이라).
     --nw  : PC 기본,  --nwh : PC 호버,  --nwm : 모바일
   에셋 폭이 통일돼 있으면 1/2 계산만으로 모든 작가의 글자 크기가 같아진다.
   관리자 입력 필드는 두지 않는다.
   -------------------------------------------------------------------------- */
.artists-grid .artist-name--img {
  position: relative; /* PC 호버 이미지를 이 위에 겹쳐 놓는다 */
  display: block;
  margin-top: 12.5px;
}

.artist-name-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none; /* 드래그로 이미지가 뜯겨나가지 않게 */
}

/* 모바일: 모바일용 에셋 한 장만 */
.artist-name-d .artist-name-img {
  width: var(--nwm, auto);
}

.artist-name-h {
  display: none;
}

@media screen and (min-width: 1081px) {
  .artist-name-d .artist-name-img {
    width: var(--nw, auto);
  }

	/* 호버 이미지 — 기본 이미지 위에 가운데로 겹친다.
	   기본/호버는 글로우 두께가 달라 원본 크기가 서로 다르므로
	   각자의 원본 1/2(--nw / --nwh)로 그려야 글자 크기가 어긋나지 않는다.
	   absolute라 상자보다 커도 잘리지 않는다. */
  .artist-name-h {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
  }

  .artist-name-h .artist-name-img {
    width: var(--nwh, auto);
    max-width: none; /* 호버가 기본보다 넓어도 줄어들지 않게 */
  }

  .artist-name-d {
    display: block;
    transition: opacity 0.15s ease;
  }

  .artists-grid .artist-item:hover .artist-name-h {
    opacity: 1;
  }

  .artists-grid .artist-item:hover .artist-name-d {
    opacity: 0;
  }
}

/* 홈 참여작가 섹션은 KV 스크롤 동안 .sec-inner가 통째로 움직인다.
   그때 작가명 12개의 SVG 필터(#fx-lettering, 10단계)가 매 프레임 다시 계산돼
   모바일에서 심하게 끊긴다 (개요 섹션은 필터 걸린 요소가 0개라 멀쩡했다).
   → 모바일 홈에서만 CSS로 근사한다. GPU가 처리해 재계산이 없다.
   참여작가 리스트(/artists)는 스크롤 애니메이션이 없어 원본 필터를 그대로 쓴다.

   ★ 아티스트 리스트(#fx-lettering)와 같은 그림으로 맞춘다. 필터를 바꾸면 여기도 같이 바꿔야 한다.
       외곽선  dilate 3.2  → 16방향 그림자 링 r=3.2 (text-stroke는 모서리가 각져 못 쓴다)
       연노랑  dilate 3 + blur 5,  불투명도 0.9  → 핑크 "위"
       핑크    dilate 6 + blur 8,  불투명도 1    → 맨 아래·가장 넓게
     text-shadow는 먼저 쓴 것이 위에 그려진다 → 외곽선 · 연노랑 · 핑크 순서. */
@media screen and (max-width: 1080px) {
  .sec--artists .artists-grid .artist-name.lettering {
    filter: none;
    color: var(--bk);
    text-shadow:
      3.2px 0.0px 1.0px var(--green),
      2.957px 1.225px 1.0px var(--green),
      2.263px 2.263px 1.0px var(--green),
      1.225px 2.957px 1.0px var(--green),
      0.0px 3.2px 1.0px var(--green),
      -1.225px 2.957px 1.0px var(--green),
      -2.263px 2.263px 1.0px var(--green),
      -2.957px 1.225px 1.0px var(--green),
      -3.2px 0.0px 1.0px var(--green),
      -2.957px -1.225px 1.0px var(--green),
      -2.263px -2.263px 1.0px var(--green),
      -1.225px -2.957px 1.0px var(--green),
      -0.0px -3.2px 1.0px var(--green),
      1.225px -2.957px 1.0px var(--green),
      2.263px -2.263px 1.0px var(--green),
      2.957px -1.225px 1.0px var(--green),
      0 0 6px rgba(243, 245, 176, 0.9),
      0 0 11px rgba(243, 245, 176, 0.8),
      0 0 16px #FC959E,
      0 0 24px #FC959E,
      0 0 32px rgba(252, 149, 158, 0.8);
  }
}

@media screen and (max-width: 1080px) {
  /* 모바일: 3컬럼 격자 — 정렬순(가나다·ABC)이 왼→오른쪽으로 읽히게 행 기준 배치 */
  .artists-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 32px;
    align-items: start;
  }

  /* 모바일에는 썸네일이 없다 — 이름 "위"에 작가별 여백(0/80/160px)만 남겨
     같은 행에서도 이름 시작 높이가 달라지며 흩뿌린 인상을 만든다 (--m-space는 작가별 설정) */
  .artists-grid .artist-item .artist-media {
    aspect-ratio: auto;
    height: var(--m-space, 80px);
  }

  .artists-grid .artist-media img,
  .artists-grid .artist-photo-credit {
    display: none;
  }

  .artists-grid .artist-name {
    margin-top: 0;
  }
}

.page--artists::before {
  content: '';
  position: absolute;
  /* 홈 .sec--artists::before와 같은 방식 —
     박스를 이미지 원본 비율(2160:7224)로 세로로 키워 페이지 중앙에 놓는다.
     박스 비율 = 이미지 비율이므로 cover를 써도 잘리는 곳이 없다.
     (inset:0이면 페이지 높이에 맞춰 폭 기준으로 확대돼 좌우가 잘림)
     페이지가 이 비율보다 길어지면 박스가 가로로 넓어져 비율을 지킨다.
     left/right:0 대신 min-width + 가운데 정렬 → 넓어진 만큼 좌우로 균등하게 나간다 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  aspect-ratio: 2160 / 7224;
  min-width: 100%;
  min-height: 100%;
  z-index: 1;
  background-image: url("../img/bg-list-pc.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.02;
  pointer-events: none;
}

@media screen and (max-width: 1080px) {
  .page--artists::before {
    background-image: url("../img/bg-list-m.png");
    aspect-ratio: 750 / 6308; /* 모바일 배경 원본 비율 */
  }
}

/* --------------------------------------------------------------------------
   참여작가 필터 (피그마 "페이지 :: 필터 기능")
   [초기화 ↻][필터 ▲]  ← 우측 정렬 한 줄
   매체·장르 칩 줄 / 전시장소 칩 줄  ← 우측 정렬, 넘치면 다음 줄 (오른쪽 끝 맞춤)
   -------------------------------------------------------------------------- */
.artists-filter {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  margin-bottom: 46px;
}

/* "필터 버튼을 선택하면 배경이 어두워지며 필터 버튼이 나타납니다" (피그마 주석)
   Filter Open 프레임 배경 = #1A100F 90%.
   z-index:-1이라 필터 바(같은 쌓임 맥락)보다는 뒤, 작가 그리드보다는 앞.
   GNB는 z-index:100이라 이 막에 안 덮인다. */
.artists-filter::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(26, 16, 15, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.artists-filter.is-open::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.artists-filter-head {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 버튼: 기본은 얇은 크림 테두리 / 필터가 걸리면 칩과 같은 활성 스타일 */
.artists-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px 9px;
  border: 1px solid var(--wh, #FFF6E9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.01);
  color: var(--wh, #FFF6E9);
  font-family: 'Noto Serif KR', serif;
  font-size: 16px;
  line-height: 170%;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.artists-filter-reset {
  padding: 9px;
}

/* 선택 전에는 "초기화" 없음 — display:inline-flex가 [hidden]을 덮어쓰지 않게 */
.artists-filter-btn[hidden] {
  display: none;
}

/* "필터 선택 후, 필터 버튼을 닫으면 초기화 버튼이 노출됩니다" (피그마 주석)
   → 펼친 동안에는 필터 버튼만 보인다 (Filter Open 프레임과 동일) */
.artists-filter.is-open .artists-filter-reset {
  display: none;
}

.artists-filter-reset svg,
.artists-filter-caret {
  display: block;
}

/* 접히면 캐럿이 아래(▼)를 가리킨다 */
.artists-filter-caret {
  transition: transform 0.25s ease;
}

.artists-filter:not(.is-open) .artists-filter-caret {
  transform: rotate(180deg);
}

/* 선택된 필터가 있을 때 — 활성 칩과 같은 글로우 */
.artists-filter.has-picked .artists-filter-btn {
  /*font-weight: 900;*/
  /*filter: url(#fx-lettering-hover);*/
}

/* 칩 줄 */
.artists-filter-groups {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  transition: opacity 0.25s ease, visibility 0.25s;
}

@media screen and (max-width: 1080px) {
  .artists-filter-groups {
    gap: 0;
  }
}

.artists-filter:not(.is-open) .artists-filter-groups {
  display: none;
}

.artists-filter-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end; /* 오른쪽 끝 맞춤 → 넘치는 칩은 다음 줄 오른쪽에 */
  gap: 4px 5px; /* 피그마 auto-layout 간격 20 */
}

/* 피그마 "Filter Button Items" 컴포넌트
   패딩 18/8/18/9 · 모서리 999 · 높이 44(hug)
   기본  : 채우기 #000000 20% + 배경 흐림 20 · 외곽선 숨김
   활성화: 채우기 #FFFFFF 1% + 외곽선 1px Text/Yellow(#FFF6E9) + 글로우 */
.artists-filter-chip {
  padding: 8px 18px 9px;
  border: 1px solid transparent; /* 활성 시 테두리가 생겨도 크기가 안 흔들리게 */
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--wh, #FFF6E9);
  font-family: 'Noto Serif KR', serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 170%;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.artists-filter-chip:hover {
  border-color: rgba(255, 246, 233, 0.35);
}

.artists-filter-chip.is-on {
  background: rgba(255, 255, 255, 0.01);
  border-color: var(--wh, #FFF6E9);
  font-weight: 900;
  filter: url(#fx-lettering-hover);
}

/* 걸러진 작가: display:none이 아니라 자리를 남긴 채 사라진다
   → 남은 작가들이 원래 격자 위치에 흩뿌려진 채로 보인다 (피그마 결과 화면) */
.artists-grid .artist-item.is-filtered-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.artists-filter-empty {
  margin-bottom: 40px;
  font-family: 'Noto Serif KR', serif;
  font-size: 14px;
  line-height: 170%;
  text-align: center;
  color: var(--wh, #FFF6E9);
  opacity: 0.7;
}

@media screen and (max-width: 1080px) {
  .artists-filter {
    gap: 10px;
    margin-bottom: 32px;
  }

  /* 모바일 시안은 별도로 없어 PC 규격(16 / 18·8·9 / gap 20)을 비례 축소했다 */
  .artists-filter-btn,
  .artists-filter-chip {
    padding: 6px 14px 7px;
    font-size: 14px;
  }

  .artists-filter-reset {
    padding: 7px;
  }

  .artists-filter-row {
    gap: 0;
  }
}

/* --------------------------------------------------------------------------
   작가 상세
   -------------------------------------------------------------------------- */
.page.page--artist-detail main.page-main {
  max-width: 1200px;
  padding: 44px 20px 0;
}

@media screen and (max-width: 1080px) {
  .page.page--artist-detail main.page-main {
    max-width: 100%;
    padding: 0 30px 120px;
  }
}

.page--artist-detail .artist-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
  margin-bottom: 38px;
}

@media screen and (max-width: 1080px) {
  .page--artist-detail .artist-back {
    font-size: 14px;
    line-height: 180%;
    margin-bottom: 60px;
  }
}

.page--artist-detail .artist-detail-credit {
  margin-top: 1px;
  font-size: 8px;
  font-weight: 400;
  line-height: 160%;
  text-align: right;
}

.page--artist-detail .artist-detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 62px;
  align-items: end;
}

.page--artist-detail .artist-detail-name {
  position: sticky;
  bottom: 120px;
  align-self: end;
  z-index: 5;
  font-size: 40px;
  font-weight: 700;
  line-height: 160%;
  transform: rotate(-10deg);
  transform-origin: left bottom;
  color: #FFF6E9;
  filter: url(#fx-outline-dark);
  text-shadow: none;
  text-align: left;
}

@media screen and (max-width: 1080px) {
  .page--artist-detail .artist-detail-name {
    padding-left: 20px;
    font-size: 32px;
  }
}

.page--artist-detail .artist-detail-meta {
  margin-bottom: 38px;
  font-size: 22px;
  font-weight: 700;
  line-height: 170%;
}

@media screen and (max-width: 1080px) {
  .page--artist-detail .artist-detail-meta {
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 180%;
  }

  .page--artist-detail .artist-detail-meta > div:first-child {
    display: none;
  }
}

.page--artist-detail .artist-detail-bio {
  font-size: 22px;
  font-weight: 700;
  line-height: 170%;
}

.page--artist-detail .artist-detail-bio p + p {
  margin-top: 1.7rem;
}

.page--artist-detail .artist-detail-sns,
.page--artist-detail .artist-detail-website {
  float: right;
  display: inline-block;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

.page--artist-detail .artist-detail-sns > span,
.page--artist-detail .artist-detail-website > span {
  text-decoration: underline;
  text-underline-offset: 1.5px;
  text-decoration-thickness: 0.8px;
}

@media screen and (max-width: 1080px) {
  .artist-detail-info {
    margin-top: 60px;
  }

  .page--artist-detail .artist-detail-body {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .page--artist-detail .artist-detail-name {
    position: static;
    align-self: start;
  }

  .page--artist-detail .artist-detail-bio {
    font-size: 14px;
    line-height: 180%;
  }

  .page--artist-detail .artist-detail-bio p + p {
    margin-top: 1.8rem;
  }

  .page--artist-detail .artist-detail-sns,
  .page--artist-detail .artist-detail-website {
    font-size: 14px;
    line-height: 180%;
  }
}

/* 공통: 이미지 영역 최소 높이 */
.page--artist-detail .artist-detail-photo {
  margin: 0 auto;
}

/* 사진이 없을 때만 빈 영역 높이 확보 */
.page--artist-detail .artist-detail-photo.is-empty {
  min-height: 320px;
}

/* 세로 이미지 */
.page--artist-detail .artist-detail-photo.is-portrait {
  aspect-ratio: 333 / 500;
  height: 500px;
  width: auto;
}

.page--artist-detail .artist-detail-photo.is-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page--artist-detail .artist-detail-photo.is-landscape {
  max-width: 564px;
}

.page--artist-detail .artist-detail-photo.is-landscape img {
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   검색 (피그마 "전시개요/검색" 페이지)
   - 좌: 검색창 (스크롤해도 화면 세로 중앙에 고정) / 우: 결과 목록
   - 검색어 입력 전(.is-blank): 데코 키비주얼 배경 + 검색창만
   -------------------------------------------------------------------------- */
.page--search .search-main {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  min-height: auto !important;
  padding: 0 20px;
  background: transparent;
}

.page--search .search-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/* 좌측 검색창: 화면 높이만큼 sticky → 목록이 흘러도 항상 세로 중앙 */
.page--search .search-side {
  position: sticky;
  top: var(--gnb-bar-h);
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--gnb-h));
}

.page--search .search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 495px;
  border-bottom: 1px solid #FFF6E9;
  padding-bottom: 6px;
}

.page--search .search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: 0;
  color: var(--wh);
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 170%;
}

.page--search .search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.page--search .search-input::placeholder {
  color: var(--wh);
}

/* 검색어가 있으면 PC는 X만 (돋보기 숨김) — 모바일은 아래 미디어쿼리에서 되살림 */
.page--search .search-form.has-query .search-submit {
  display: none;
}

.page--search .search-submit,
.page--search .search-clear {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--wh);
  cursor: pointer;
}

/* 우측 결과 */
.page--search .search-panel {
  padding: calc(58px + var(--gnb-bar-h)) 0 58px;
  min-height: calc(100svh - var(--gnb-h));
}

.page--search .search-results {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.page--search .search-result {
  display: block;
  text-decoration: none;
  color: var(--wh);
}

.page--search .search-result-menu {
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

.page--search .search-result-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 170%;
}

.page--search .search-result-excerpt mark {
  background: none;
  color: inherit;
  font-weight: 900;
}

.page--search .search-result-excerpt {
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 호버: 항목 전체가 핑크로 (피그마) */
.page--search .search-result:hover {
  color: var(--pink-glow);
}

/* 결과 없음 */
.page--search .search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(100svh - var(--gnb-h) - 176px);
}

.page--search .search-empty-msg {
  font-size: 22px;
  font-weight: 700;
  line-height: 170%;
}

.page--search .search-shortcuts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 42px;
  margin-top: 68px;
}

.page--search .search-shortcut {
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

.page--search.is-blank .search-panel {
  display: none;
}

.page--search.is-blank .search-layout {
  grid-template-columns: 1fr 1fr;
}

.page--search:not(.is-blank) .search-side {
  min-height: calc(100svh - var(--gnb-h));
}

/* ── 검색어 입력 전 데코 키비주얼: 위·아래 가로 마퀴 (피그마 "페이지 :: 서치") ──
   위 띠 = 오른쪽→왼쪽 / 아래 띠 = 왼쪽→오른쪽, 둘 다 rotate(-10deg).
   기존 bg-search.png(정지 이미지)를 대신한다.
   속도는 각 띠의 style="--deco-dur"(search.php), 크기는 --deco-h 로 조절. */
.page--search .search-deco {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  pointer-events: none;
}

.page--search .search-deco-band {
  position: absolute;
  left: 50%;
  /* 기울이면 화면 모서리에 빈 곳이 생기므로 뷰포트보다 넉넉히 넓게 */
  width: 160vw;
  overflow: hidden;
  transform: translateX(-50%) rotate(-10deg);
}

.page--search .search-deco-band--top {
  top: 0;
  margin-top: -140px;
  --deco-h: 400px;
}

.page--search .search-deco-band--bottom {
  bottom: 0;
  margin-bottom: -200px;
  --deco-h: 480px;
}

.page--search .search-deco-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: search-deco-left var(--deco-dur, 60s) linear infinite;
}

/* 아래 띠만 반대 방향 (왼쪽→오른쪽) */
.page--search .search-deco-band--bottom .search-deco-track {
  animation-name: search-deco-right;
}

.page--search .search-deco-track img {
  display: block;
  width: auto;
  height: var(--deco-h);
}

@keyframes search-deco-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.3333%);
  }
  /* 세 장 중 한 장 폭만큼 */
}

@keyframes search-deco-right {
  from {
    transform: translateX(-33.3333%);
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page--search .search-deco-track {
    animation: none;
  }
}

@media screen and (max-width: 1080px) {
  body:has(.page--search.is-blank) header.gnb {
    opacity: 0;
    pointer-events: none;
  }

  .page.page--search .search-main {
    padding: 0 30px;
    height: calc(100svh - var(--gnb-h));
  }

  .page--search .search-layout {
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  .page--search .search-clear {
    display: none;
  }

  .page--search .search-form.has-query .search-submit {
    display: inline-flex;
  }

  .page--search .search-side {
    position: static;
    min-height: calc(100svh - var(--gnb-h));
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: flex-end;
  }

  .page--search:not(.is-blank) .search-side {
    min-height: auto;
    padding-top: 40px;
  }

  .page--search .search-input {
    font-size: 16px;
    font-weight: 700;
    line-height: 170%;
  }

  .page--search .search-panel {
    padding: 40px 0 120px;
    min-height: 0;
  }

  .page--search .search-results {
    gap: 40px;
  }

  .page--search .search-result-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 170%;
  }

  .page--search .search-result-menu,
  .page--search .search-result-excerpt {
    font-size: 14px;
    line-height: 180%;
    letter-spacing: 0.14px;
  }

  .page--search .search-empty {
    margin-top: 80px;
    min-height: auto;
  }

  .page--search .search-empty-msg {
    font-size: 16px;
    font-weight: 700;
    line-height: 170%;
  }

  .page--search .search-shortcuts {
    flex-direction: column;
    margin-top: 30px;
    gap: 42px;
  }

  .page--search .search-shortcut {
    font-size: 14px;
    font-weight: 700;
    line-height: 180%;
  }

  .page--search.is-blank .search-side {
    min-height: calc(100svh - var(--gnb-h));
  }

  /* 모바일 띠는 이미지가 더 작아 높이도 같이 줄인다 (srcset은 search.php의 <picture>) */
  .page--search .search-deco-band {
    width: 190vw;
  }

  .page--search .search-deco-band--top {
    margin-top: -50px;
    --deco-h: 230px;
  }

  .page--search .search-deco-band--bottom {
    margin-bottom: -60px;
    --deco-h: 277px;
  }
}

/* --------------------------------------------------------------------------
   모바일 공통 보정 (피그마 0723)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1080px) {
  .page .page-main {
    padding: 0 30px 120px;
  }

  /* fixed 타이포가 상단 정적 배치이므로 본문 우측 밀기 해제 */
  .page--theme .page-main,
  .page--director .page-main,
  .page--ei .page-main {
    display: block;
  }

  .page .prose,
  .page--venue .venue-desc,
  .page--venue .venue-photo,
  .page--venue .venue-name {
    max-width: none;
  }

  .page.page--venue .venue-photo,
  .page.page--venue .venue-floor-name {
    width: 100%;
  }

  .page--venue .venue-photo img {
    max-width: none;
  }

}

main.home-hero {
  height: calc(100svh - 60px);
}

@media screen and (max-width: 1080px) {
  main.home-hero {
    height: calc(100svh - 84px);
  }
}

main.home-hero .main-inner {
  height: 100%;
}

/* --------------------------------------------------------------------------
   서브페이지 푸터: 홈의 fixed 리빌과 달리 문서 흐름 하단에 static 배치
   -------------------------------------------------------------------------- */
footer.footer--static {
  position: static;
  inset: auto;
  min-height: 0;
  z-index: auto;
  margin-top: 160px;
}

@media screen and (max-width: 1080px) {
  footer.footer--static {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   전시장소 데코 목차: 악장별 층(B1/F1/F2) 아코디언 (활성 악장에서 펼침)
   -------------------------------------------------------------------------- */
.fixed-typo-item {
  display: flex;
  flex-direction: column;
  padding-right: 27px;
}

.fixed-typo-subs {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
  margin-right: -27px;
}

.fixed-typo-item.is-open .fixed-typo-subs {
  grid-template-rows: 1fr;
}

.fixed-typo-subs-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fixed-typo-sub {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
  text-align: right;
  cursor: pointer;
}

.icon-search {
  display: block;
  width: 14px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='16' viewBox='0 0 14 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.05745 11.3085L12.7498 15.0008M10.35 7.80002C10.35 10.451 8.20099 12.6 5.55002 12.6C2.89904 12.6 0.75 10.451 0.75 7.80002C0.75 5.14904 2.89904 3 5.55002 3C8.20099 3 10.35 5.14904 10.35 7.80002Z' stroke='%23FFF6E9' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* --------------------------------------------------------------------------
   오시는 길: 좌측 고정 지도 + 우측 장소 섹션 (각 화면 높이)
   -------------------------------------------------------------------------- */
.page--directions .page-main {
  display: block;
  max-width: none;
  padding: 0;
}

.page--directions .fixed-typo {
  display: none !important;
}

.directions-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

/* 좌측 지도: 스크롤 내내 고정 */
.directions-map {
  position: sticky;
  top: var(--gnb-h);
  height: 100svh;
  display: flex;
}

.directions-map-inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding-right: 32px;
  margin-top: calc(var(--gnb-h) * -1);
}

.directions-map-empty {
  aspect-ratio: 3 / 4;
  width: 100%;
}

.page--directions .visit-place {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  margin: calc(44px + 72px) 0 auto;
  padding: 0 40px;
  scroll-margin-top: calc(var(--gnb-h) + 72px);
}

.page--directions .visit-place-name {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
  line-height: 170%;
}

/* 장소명 → 지도 이동 버튼 (gmap.js가 제목 안에 넣는다. 지도가 없으면 생성 안 됨)
   all: unset 이라 글자 스타일은 h3에서 그대로 상속받는다 */
.page--directions .visit-place-focus {
  all: unset;
  cursor: pointer;
  transition: color 0.2s ease;
}

.page--directions .visit-place-focus:hover,
.page--directions .visit-place-focus:focus-visible {
  color: var(--pink);
}

.page--directions .visit-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  border-bottom: 0;
  align-items: start;
  margin-bottom: 20px;
}

.page--directions .visit-row .visit-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

.page--directions .visit-row .visit-cont {
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

.page--directions .visit-row .visit-cont ul {
  margin-top: 28px;
}

.visit-maplink {
  display: block;
  width: fit-content;
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
  text-decoration: none;
}

.visit-maplink:hover {
  color: #FC959E;
}

@media screen and (max-width: 1080px) {
  .page--directions .page-main {
    padding: 0;
  }

  .directions-map-inner {
    padding-right: 0;
    margin-top: calc(var(--gnb-h) * -1);
  }

  /* 모바일: 지도는 GNB 아래에 고정, 장소 목록이 그 아래로 흘러간다.
     그리드 칸에 두면 sticky 이동 범위가 1행 안으로 갇히므로
     block으로 바꿔 .directions-layout 전체를 이동 범위로 쓴다 */
  .directions-layout {
    display: block;
  }

  .directions-map {
    position: sticky;
    top: var(--gnb-h);
    z-index: 5;
    height: auto;
    margin-bottom: 60px;
    background: var(--bg); /* 아래 내용이 비쳐 보이지 않게 */
  }

  .page--directions .visit-place {
    min-height: 0;
    padding: 0 30px calc(120px + 40px);
    margin: 0;
    justify-content: flex-start;
	/* 위에 고정된 지도에 가리지 않을 만큼 내려서 멈춘다.
	   지도는 폭 100vw · aspect-ratio 5/4 → 높이 = 100vw × 4/5 = 80vw.
	   (지도 비율을 바꾸면 이 값도 같이 바꿔야 한다. 1/1 이던 시절엔 100vw)
	   +60px = .directions-map 의 margin-bottom */
    scroll-margin-top: calc(80vw + 40px);
  }

  .page--directions .visit-place-name {
    margin-bottom: 60px;
    font-size: 22px;
    font-weight: 700;
    line-height: 170%;
    transform: rotate(-10deg);
  }

  .page--directions .visit-row {
    grid-template-columns: 1fr;
    margin-bottom: 40px;
  }

  .page--directions .visit-row .visit-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 180%;
  }

  .page--directions .visit-row .visit-cont {
    font-size: 14px;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.14px;
  }

  .page--directions .visit-row .visit-cont ul {
    margin-top: 26px;
  }

  .visit-maplink {
    font-size: 14px;
    font-weight: 700;
    line-height: 180%;
  }
}

.directions-gmap {
  width: 100%;
  height: 100svh;

}

@media screen and (max-width: 1080px) {
  /* 모바일 지도 비율 5:4 (기존 1:1) — 폭은 화면 전체, 높이는 폭의 4/5 */
  .directions-gmap {
    aspect-ratio: 5 / 4;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   구글 지도 커스텀 핀
   -------------------------------------------------------------------------- */
.gmap-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: #261816;
  white-space: nowrap;
}

.gmap-pin--right {
  flex-direction: row;
  transform: translate(calc(var(--pin-w, 31px) / -2), -50%);
}

.gmap-pin--left {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + var(--pin-w, 31px) / 2), -50%);
}

.gmap-pin-mark {
  width: var(--pin-w, 31px);
  height: auto;
  display: block;
  flex: none;
}

.gmap-pin-label {
  font-family: 'Noto Serif KR', serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 170%;
  color: #261816;
}

/* 두 줄짜리 라벨(영문 <br>)은 별 쪽으로 붙여 정렬해야 핀과 글자가 따로 놀지 않는다 */
.gmap-pin--right .gmap-pin-label {
  transform: rotate(-10deg) translateY(-15px);
  text-align: left;
}

.gmap-pin--left .gmap-pin-label {
  transform: rotate(-10deg) translateY(20px);
  text-align: right;
}

.gmap-pin:hover,
.gmap-pin:hover .gmap-pin-label,
.gmap-pin.is-current,
.gmap-pin.is-current .gmap-pin-label {
  color: #fc959e;
}

@media screen and (max-width: 1080px) {
  .gmap-pin {
    gap: 5px;
  }

  .gmap-pin-label {
    font-size: 12px;
    font-weight: 700;
    line-height: 160%;
  }

  .gmap-pin--right .gmap-pin-label {
    transform: rotate(-10deg) translateY(-10px);
  }

  .gmap-pin--left .gmap-pin-label {
    transform: rotate(-10deg) translateY(15px);
  }
}

/* --------------------------------------------------------------------------
   홈 (피그마 0723-0724: Home / Main-MO)
   섹션 2개 — 개요(주제문+전시정보+더 알아보기) / 참여작가(12명 그리드+랜덤) + 커버
   -------------------------------------------------------------------------- */
/* ── 별 롱 버튼 (피그마 Long Button) ── */
.star-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 564px;
  max-width: 100%;
  margin: 0 auto;
  color: var(--wh);
  text-decoration: none;
}

/* 호버: 별 SVG는 fill="currentColor", 라벨은 색 미지정이라
   버튼의 color 하나만 바꾸면 둘 다 핑크로 바뀐다 */
.star-btn:hover {
  color: var(--pink);
}

.star-btn-side {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* 오른쪽 별들은 왼쪽을 통째로 좌우 반전 —
   순서(큰 별이 바깥쪽)와 별 모양이 한 번에 뒤집힌다 */
.star-btn-side--mirror {
  transform: scaleX(-1);
}

.star-btn-star {
  display: block;
  width: var(--star-w, 20px);
}

.star-btn-star svg {
  width: 100%;
  height: auto;
  display: block;
}

.star-btn-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
  white-space: nowrap;
}

@media screen and (max-width: 1080px) {
  .star-btn {
    gap: 14px;
  }

  .star-btn-side {
    gap: 10px;
  }

  .star-btn-star {
    width: calc(var(--star-w, 20px) * 0.62);
  }

  .star-btn-label {
    font-size: 14px;
  }
}

/* ── 개요 섹션 ── */
.sec-cont--overview {
  gap: 120px;
  width: 100%;
}

.home-lead {
  max-width: 564px;
  margin: 0 auto;
  font-size: 22px;
  font-weight: 700;
  line-height: 170%;
  text-align: center;
}

.home-lead p + p {
  margin-top: 1.7rem;
}

.home-facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.home-fact-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
  text-align: center;
}

.home-fact-cont {
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
  text-align: center;
}

@media screen and (max-width: 1080px) {
  .sec-cont--overview {
    gap: 120px;
  }

  .home-lead {
    font-size: 16px;
    font-weight: 700;
    line-height: 180%;
  }

  .home-fact-cont {
    font-size: 16px;
  }
}

/* ── 참여작가 섹션 ── */
.sec--artists {
  position: relative;
}

.sec--artists::before {
  content: '';
  position: absolute;
  /* 박스를 이미지 원본 비율(1440:1798)로 세로로 키워 섹션 중앙에 놓는다.
     박스 비율 = 이미지 비율이므로 cover를 써도 잘리는 곳이 없다.
     (inset:0이면 섹션이 더 넓어 폭 기준으로 확대돼 위아래가 잘림)
     섹션이 이 비율보다 길어지면 박스가 가로로 넓어져 비율을 지킨다.
     left/right:0 대신 min-width + 가운데 정렬 → 넓어진 만큼 좌우로 균등하게 나간다 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1440 / 1798;
  min-width: 100%;
  min-height: 100%;
  z-index: 1;
  background-image: url("../img/bg-pc.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.02;
  pointer-events: none;
}

.sec--artists .home-star-btn {
  margin: 40px auto 0;
}

@media screen and (max-width: 1080px) {
  .sec--artists::before {
    background-image: url("../img/bg-m.png");
    aspect-ratio: 563 / 1500; /* 모바일 배경 원본 비율 */
  }

  .sec--artists .home-star-btn {
    margin: 80px auto 0;
  }
}

.sec--artists .sec-inner {
  gap: 80px;
}

.sec--artists .sec-artists-head,
.sec--artists .artists-grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.sec--artists .sec-artists-head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.artists-shuffle {
  background: none;
  border: 0;
  cursor: pointer;
  margin: 32px 0 0 auto;
}

.artists-shuffle svg {
  display: block;
}

.artists-shuffle.is-spinning svg {
  animation: shuffle-spin 0.45s ease;
}

@keyframes shuffle-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 랜덤으로 고르지 않은 작가는 감춤 (lazy 이미지도 로드되지 않음) */
.artists-grid .artist-item.is-hidden {
  display: none;
}

@media screen and (max-width: 1080px) {
  .sec--artists .sec-inner {
    gap: 40px;
  }

  .artists-shuffle {
    padding: 4px;
  }
}

.page--director .director-thumb {
  height: auto;
}

.page--director .director-thumb img {
  height: 186px;
}

@media screen and (max-width: 1080px) {
  .page--director .director-thumb img {
    height: 100%;
  }
}

.page--director .director-info {
  align-items: flex-start;
  gap: 40px;
}

.page--director .director-info .director-name-wrapper + .director-info-box {
  margin-top: -20px;
}

.page--director .director-info .director-name,
.page--director .director-info .director-name-em {
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

.page--director .director-info-box-label {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  line-height: 160%;
}

.page--director .director-info-box-label {
  color: rgba(255, 246, 233, 0.30);
}

.page--director .director-info-box-label:before,
.page--director .director-info-box-label:after {
  display: none;
}

.director-info-row > div:first-child {
  font-size: 12px;
  font-weight: 700;
  line-height: 160%;
}

@media screen and (max-width: 1080px) {
  .page--director .director-info-box {
    width: 100%;
  }

  .page--director .director-info-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .page--director .director-info-row > div:last-child {
    text-align: right;
  }
}

@media screen and (max-width: 1080px) {
  .page--program .fixed-typo--m {
    margin: 180px 30px 60px;
  }
}

@media screen and (max-width: 1080px) {
  header.gnb.gnb--directions::before {
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .gnb--directions .gnb-logo,
  .gnb--directions .gnb-m-lang {
    color: var(--bg);
  }

  .gnb--directions.is-open .gnb-logo {
    color: var(--wh);
  }

  .gnb--directions .gnb-m-toggle {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='3.59961' y1='0.600195' x2='20.3996' y2='0.600195' stroke='%23261816' stroke-width='1.2'/%3E%3Cline y1='7.80039' x2='24' y2='7.80039' stroke='%23261816' stroke-width='1.2'/%3E%3Cline x1='3.59961' y1='15.0006' x2='20.3996' y2='15.0006' stroke='%23261816' stroke-width='1.2'/%3E%3C/svg%3E%0A");
  }
}

@media screen and (min-width: 1081px) {
  body:has(.page--search.is-blank) .gnb-logo,
  body:has(.page--search.is-blank) .gnb-link,
  body:has(.page--search.is-blank) .gnb-util-link {
    color: rgba(255, 246, 233, 0.30);
  }

  body:has(.page--search.is-blank) .gnb-search {
    color: var(--wh);
  }
}

.search-back-btn {
  display: none;
  margin-top: -3px;
  margin-left: 16px;
}

body:has(.page--search.is-blank) .search-back-btn {
  display: block;
}

@media screen and (max-width: 1080px) {
  .search-back-btn {
    margin-top: 0;
    margin-right: -8px;
    margin-bottom: 22px;
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   페이지 전환 디졸브
   · 지원 브라우저(Chrome·Edge·Safari): 크로스도큐먼트 View Transition이
     이전/다음 화면을 자동으로 겹쳐 페이드 — JS 없이 동작
   · 미지원(파이어폭스 등): site.js가 링크 클릭을 가로채 .is-leaving을 붙여
     페이드아웃 후 이동, 진입은 아래 page-fade-in 애니메이션이 담당
   -------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: ease;
}

html.is-leaving body {
  opacity: 0;
  transition: opacity 260ms ease;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

html:not(.is-restoring):not(.is-leaving) body {
  animation: page-fade-in 320ms ease both;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  html:not(.is-restoring):not(.is-leaving) body {
    animation: none;
  }

  html.is-leaving body {
    transition: none;
  }
}