ul {
  list-style: none;
}

li {
  position: relative;
}

ul > li:before {
  content: '';
  display: block;
  position: absolute;
  top: 12px;
  left: -12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--wh);
}

@media screen and (max-width: 1080px) {
  .page--artist-detail .artist-detail-photo.is-empty {
    min-height: auto;
  }
}

.page--search .search-deco-band--top picture {
  margin: 0 40.5px;
}

.page--search .search-deco-band--bottom picture {
  margin: 0 46.5px;
}

@media screen and (max-width: 1080px) {
  .page--search .search-deco-band--top picture {
    margin: 0 20.5px;
  }

  .page--search .search-deco-band--bottom picture {
    margin: 0 23.5px;
  }

}

.lang-en .page--venue .fixed-typo-line {
  line-height: 120%;
}

@media screen and (max-width: 1080px) {
  .lang-en nav {
    min-width: auto;
  }
}

@media screen and (max-width: 1080px) {
  .page--artists .artists-main {
    padding: 10px 30px 120px !important;
  }
}

.lang-en .page--visit .visit-row {
  grid-template-columns: 138px 1fr;
}

.lang-en .page--visit .visit-notice {
  grid-template-columns: 138px 1fr;
}

@media screen and (max-width: 1080px) {
  .lang-en .page--visit .visit-row {
    grid-template-columns: 1fr;
  }

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

.lang-en .gmap-pin-label {
  line-height: 120%;
}

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

@media screen and (max-width: 1080px) {
  .lang-en .gmap-pin--right .gmap-pin-label {
    transform: rotate(-10deg) translateY(-12px);
  }

  .lang-en .page--directions .visit-place-focus {
    line-height: 120%;
  }
}

@media screen and (min-width: 1919px) {
  .page--overview .ov-visual-inner {
    max-width: 1340px;
  }

  .page.page--director .page-main {
    max-width: 1340px;
  }

  .page--artists .artists-main {
    max-width: 1340px;
  }

  .page.page--artist-detail main.page-main {
    max-width: 1340px;
  }

  .page--search .search-main {
    max-width: 1340px;
  }

  .sec--artists .sec-artists-head,
  .sec--artists .artists-grid {
    max-width: 1340px;
  }

  .fixed-typo--pc .fixed-typo-inner {
    min-width: 670px;
  }

  .page .prose {
    max-width: 670px;
  }

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

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

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

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

  .page--venue .venue-desc > p {
    max-width: 670px;
  }

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

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

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

  .home-lead {
    max-width: 670px;
  }

  .page-main--split .prose-2 {
    max-width: 50%;
  }
}

/* --------------------------------------------------------------------------
   전시개요 비주얼 — 화면이 낮아질수록 배경을 아래쪽으로 끌어내림 (1920 이상)

   background-size: cover 라서 화면이 낮아지면 이미지가 세로로 잘린다.
   position 이 top(0%) 고정이면 잘리는 쪽이 항상 아래라, 보여주고 싶은
   "중앙보다 조금 위" 지점이 화면 밖으로 밀려난다.
   → 높이가 줄어드는 만큼 position 을 0% → 32% 로 내려 그 지점을 붙잡는다.

   ※ 왜 단계로 나눴나
     calc() 는 길이를 길이로 나눌 수 없어(100vh 로 0~1 비율을 못 만듦)
     화면 높이에 따라 % 를 연속으로 보간하는 순수 CSS 방법이 없다.
     100px 간격이면 눈에는 사실상 연속으로 보인다.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1920px) {
  .page--overview .ov-visual::after {
    background-position: center 0;
  }
}

@media screen and (min-width: 1920px) and (max-height: 1100px) {
  .page--overview .ov-visual::after {
    background-position: center 10%;
  }
}

@media screen and (min-width: 1920px) and (max-height: 1000px) {
  .page--overview .ov-visual::after {
    background-position: center 20%;
  }
}

@media screen and (min-width: 1920px) and (max-height: 900px) {
  .page--overview .ov-visual::after {
    background-position: center 30%;
  }
}

@media screen and (min-width: 1920px) and (max-height: 800px) {
  .page--overview .ov-visual::after {
    background-position: center 40%;
  }
}

@media screen and (min-width: 1920px) and (max-height: 700px) {
  .page--overview .ov-visual::after {
    background-position: center 50%;
  }
}

/* --------------------------------------------------------------------------
   팝업 배너 (홈) — 통이미지 한 장을 그대로 띄운다

   표시 크기 · 위치 = 피그마 "Pop Up Banner 0804"
   피그마 목업은 PC 1440 / 모바일 375 기준이라 그 좌표를 그대로 옮겼다.

           표시 크기(PC)   위치(PC)          표시 크기(MO)  위치(MO)
     1번   400 × 400      top 76 / right 174   200 × 200    top 88 / left 30
     2번   452 × 251      top 508 / right 38   226 × 125    top 300 / right 30

   이미지는 고화질 한 장을 올리고 CSS로 줄여 쓴다(레티나 대응).
   -------------------------------------------------------------------------- */
.notice-popup {
  position: fixed;
  z-index: 1000;
  display: none;
}

.notice-popup.is-open {
  display: block;
}

.notice-popup .np-link {
  display: block;
  line-height: 0; /* img 아래 여백 제거 */
}

.notice-popup img {
  display: block;
  width: 100%;
  height: auto;
}

/* 닫기 X — 이미지 위 오른쪽 위. 링크보다 위에 있어야 눌린다 */
.notice-popup .np-close-btn-wrapper {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  padding: 20px 18px;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.notice-popup .np-close-btn {
  display: block;
  width: 15px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.993929 0.6875L15.6562 14.6875M0.65625 14.6875L15.3186 0.6875' stroke='%23261816' stroke-width='1.90099'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.notice-popup--1 {
  top: 76px;
  right: 174px;
  width: 400px;
}

.notice-popup--2 {
  top: 508px;
  right: 38px;
  width: 452px;
}

@media screen and (max-width: 1080px) {
  .notice-popup--1 {
    top: 88px;
    right: auto;
    left: 30px;
    width: 200px;
  }

  .notice-popup--2 {
    top: 300px;
    right: 30px;
    width: 226px;
  }

  .notice-popup .np-close-btn-wrapper {
    padding: 12px 10px;
  }

  .notice-popup .np-close-btn {
    width: 11px;
    height: 10px;
  }
}

/* ==========================================================================
   404 — 프로그램·출품작품의 "준비 중" 화면과 같은 레이아웃을 쓴다
   (open.css의 .page--program / .page--artworks 규칙에 .page--error를 얹는 형태)
   ========================================================================== */
.page.page--error .page-main {
  padding: 0 20px;
  margin: 0 0 0 auto;
  width: 50%;
  min-height: calc(100svh - var(--gnb-h));
  display: flex;
  align-items: center;
}

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

.page--error .error-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

@media (hover: hover) {
  .page--error .error-home:hover {
    opacity: 0.6;
  }
}

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

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

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

  .page--error .error-home {
    margin-top: 20px;
    font-size: 14px;
  }
}

/* ==========================================================================
   관람안내 · 입장권 0817 디자인 업데이트
   기존 .visit-row / .ticket-row 격자(라벨 140px + 내용)를 그대로 쓰고,
   새로 생긴 소제목 · 노선도 · 시간표 · 프로모션만 여기서 정의한다.
   ========================================================================== */

/* ── 관람 서비스 (종합안내소 · 셔틀버스 · 아트버스) ───────────────────── */
.page--visit .visit-services {
  max-width: 564px;
}

.page--visit .visit-service {
  margin-top: 160px;
}

.page--visit .visit-service-title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  line-height: 170%;
}

.page--visit .visit-service-body {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

.page--visit .visit-service-body p + p {
  margin-top: 1em;
}

/* 노선도 — 정류장을 점선으로 잇는다. 개수가 늘어도 균등 분할 */
.page--visit .shuttle-route {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 40px 0 56px;
  padding-top: 4px;
}

.page--visit .shuttle-route::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 6px;
  right: 6px;
  border-top: 1px dashed currentColor;
  opacity: 0.6;
}

.page--visit .shuttle-stop {
  position: relative;
  flex: 1 1 0;
  text-align: center;
}

.page--visit .shuttle-stop:first-child {
  text-align: left;
}

.page--visit .shuttle-stop:last-child {
  text-align: right;
}

.page--visit .shuttle-dot {
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--bk, #221714);
}

.page--visit .shuttle-stop:first-child .shuttle-dot {
  margin-left: 0;
}

.page--visit .shuttle-stop:last-child .shuttle-dot {
  margin-right: 0;
}

.page--visit .shuttle-stop-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 160%;
}

/* 시간표 */
.page--visit .shuttle-timetable {
  margin-bottom: 24px;
}

.page--visit .shuttle-timetable-title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

.page--visit .shuttle-table {
  width: 100%;
  border-collapse: collapse;
}

.page--visit .shuttle-table th,
.page--visit .shuttle-table td {
  padding: 4px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 160%;
  text-align: right;
  white-space: nowrap;
}

.page--visit .shuttle-table th {
  font-weight: 400;
  text-align: left;
  padding-right: 12px;
  white-space: normal;
}

.page--visit .shuttle-footnote {
  margin: 12px 0 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 160%;
  text-align: right;
}

.page--visit .visit-qr {
  display: block;
  width: 180px;
  height: auto;
}

/* ── 입장권 프로모션 ──────────────────────────────────────────────────── */
.page--ticket .ticket-promotions {
  margin-top: 160px;
}

.page--ticket .promotion + .promotion {
  margin-top: 160px;
}

.page--ticket .promotion-title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  line-height: 170%;
}

/* 번호는 원고에서 밑줄 표기라 그대로 살린다 */
.page--ticket .promotion-no {
  display: block;
}

.page--ticket .promotion-body {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

.page--ticket .promotion-body ul {

}

.page--ticket .promotion-link {
  display: inline-block;
  margin-top: 4px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
}

@media (hover: hover) {
  .page--ticket .promotion-link:hover {
    opacity: 0.6;
  }
}

.page--ticket .promotion-footnote {
  margin: 16px 0 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 160%;
  text-align: right;
}

@media screen and (max-width: 1080px) {
  .page--visit .visit-services,
  .page--ticket .ticket-promotions {
    max-width: none;
  }

  .page--visit .visit-service {
    margin-top: 180px;
  }

  /* 소제목은 모바일에서도 22px 그대로 (피그마 방문/관람안내-MO 기준) */
  .page--visit .visit-service-title,
  .page--ticket .promotion-title {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .page--visit .visit-service-body,
  .page--ticket .promotion-body {
    font-size: 14px;
    line-height: 180%;
    letter-spacing: 0.14px;
  }

  .page--ticket .promotion-body {
    margin-bottom: 40px;
  }

  /* 노선도는 모바일에서도 가로 3칸 유지 (피그마 방문/관람안내-MO 기준).
     다만 디자인의 6.67px 는 실기기에서 읽히지 않아 10px 로 올렸다. */
  .page--visit .shuttle-route {
    margin: 28px 0 40px;
  }

  .page--visit .shuttle-stop-name {
    font-size: 10px;
    line-height: 150%;
    word-break: keep-all;
  }

  .page--visit .shuttle-table th,
  .page--visit .shuttle-table td {
    font-size: 12px;
  }

  .page--ticket .ticket-promotions {
    margin-top: 120px;
  }

  .page--ticket .promotion + .promotion {
    margin-top: 120px;
  }
}


/* ==========================================================================
   아트상품 (0817 신규)
   피그마 PC: 3열 × 351px, 열 간격 75px (x120 · x546 · x972 / 프레임 1440)
   상품마다 사진 높이가 달라 열 높이가 어긋나는 배치라 multi-column 으로 깐다.
   ========================================================================== */
.page--merchandise .merch-intro {
  max-width: calc(50% - 120px - 20px);
  margin: 0 120px 120px auto;
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

@media screen and (min-width: 1920px) {
  /* 상자에 걸어야 한다. 안쪽 <p> 에 걸면 글은 좁아지는데 상자는 그대로라
     오른쪽에 빈 자리가 생겨 아래 상품들과 오른쪽 끝이 안 맞는다. */
  .page--merchandise .merch-intro p {
    max-width: 670px;
  }
}

.page--merchandise .merch-grid {
  display: flex;
  gap: 75px;
  max-width: 1203px;
  margin: 0 auto;
  align-items: flex-start;
}

.page--merchandise .merch-col {
  flex: 1 1 0;
  min-width: 0;
}

.page--merchandise .merch-item {
  margin-bottom: 58px;
}

.page--merchandise .merch-photo {
  margin: 0 0 58px;
}

.page--merchandise .merch-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.merch-info {
  margin: 0 0 16px;
}

.page--merchandise .merch-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 170%;
}

.page--merchandise .merch-price {
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
}

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

.page--merchandise .merch-desc p + p {
  margin-top: 1em;
}

@media screen and (max-width: 1080px) {
  .page--merchandise .merch-intro {
    max-width: none;
    margin: 0 0 120px;
    font-size: 14px;
    font-weight: 700;
    line-height: 180%;
  }

  /* 모바일은 열 묶음을 풀고(display:contents) 패널 목록 순서대로 한 줄씩 쌓는다 */
  .page--merchandise .merch-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: none;
  }

  .page--merchandise .merch-col {
    display: contents;
  }

  .page--merchandise .merch-item {
    order: var(--order, 0);
  }

  .page--merchandise .merch-item {
    margin-bottom: 120px;
  }

  .page--merchandise .merch-photo {
    margin-bottom: 30px;
  }

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

  .page--merchandise .merch-price {
    font-size: 14px;
    font-weight: 700;
    line-height: 180%;
  }

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

/* 순환노선도 도판 (디자이너 이미지) — 코드로 그리던 점선 노선도를 대체 */
.page--visit .shuttle-route-img {
  display: block;
  margin: 60px 0 40px;
}

.page--visit .shuttle-route-img img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1080px) {
  .page--visit .shuttle-route-img {
    margin: 40px 0;
  }
}

/* ==========================================================================
   참여작가 필터 — 디자이너 이미지 버튼 (0817)
   off/on 두 장을 겹쳐 두고 상태에 따라 바꾼다.
   on 에는 바깥으로 번지는 글로우가 그려져 있어 상자보다 9px 정도 크다
   → 배치 기준은 off 크기로 잡고, on 은 가운데에서 넘치게 둔다.
   ========================================================================== */
.artists-filter-chip.has-img,
.artists-filter-btn.has-img {
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  line-height: 0;
}

.artists-filter-chip.has-img:hover,
.artists-filter-btn.has-img:hover {
  border-color: transparent;
}

/* 이미지가 아직 없는 항목 — 스타일 없는 맨 텍스트로 둔다 (에셋 받으면 자동 교체) */
.artists-filter-chip.no-img {
  padding: 8px 18px 9px;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 크기는 피그마 값 × 배율(--fs). 모바일은 PC의 75% (피그마 MO 프레임 기준 44→33px) */
.filter-img {
  position: relative;
  display: inline-block;
  width: calc(var(--fw) * var(--fs, 1) * 1px);
  height: calc(var(--fh) * var(--fs, 1) * 1px);
  vertical-align: middle;
}

.filter-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  transition: opacity 0.15s ease;
}

/* .filter-img img 보다 상세도가 높아야 크기가 먹는다 (클래스+타입 = 0,1,1).
   0818 에셋부터 글로우가 프레임 안에 들어오고 활성·비활성 높이가 같아져,
   두 장 모두 상자를 그대로 채우면 된다. */
.filter-img img.filter-img-off,
.filter-img img.filter-img-on {
  width: 100%;
  height: 100%;
  max-width: none;
}

.filter-img img.filter-img-off {
  opacity: 1;
}

.filter-img img.filter-img-on {
  opacity: 0;
}

.artists-filter-chip.has-img.is-on .filter-img-off,
.artists-filter-btn.has-img.is-on .filter-img-off,
.artists-filter.is-open .artists-filter-toggle.has-img .filter-img-off {
  opacity: 0;
}

.artists-filter-chip.has-img.is-on .filter-img-on,
.artists-filter-btn.has-img.is-on .filter-img-on,
.artists-filter.is-open .artists-filter-toggle.has-img .filter-img-on {
  opacity: 1;
}

/* 이미지 버튼에는 기존 텍스트용 활성 스타일(테두리·레터링 필터)을 걸지 않는다 */
.artists-filter-chip.has-img.is-on {
  background: none;
  border-color: transparent;
  filter: none;
}

@media (hover: hover) {
  .artists-filter-chip.has-img:hover .filter-img-off,
  .artists-filter-btn.has-img:hover .filter-img-off {
    /*opacity: 0.75;*/
  }
}

/* 필터를 펼치면 배경이 어두워지지만 작가 항목은 덮이지 않는다.
   피그마 주석 "어두운 레이어 뒤로 변경을 확인할 수 있습니다" = 걸러지는 모습이 보여야 한다는 뜻이라
   막(.artists-filter::before, z-index:-1)보다 작가 항목을 위로 올린다. */
.page--artists .artists-grid {
  position: relative;
  z-index: 3;
}

/* 막이 깔린 동안에도 작가 이름이 또렷해야 한다 */
.page--artists .artists-filter.is-open ~ .artists-grid,
.page--artists .artists-grid .artist-item {
  position: relative;
}

/* 작가 상세 — 이름 아래 필터 태그. 이름은 기울어져 있지만 태그는 똑바로 */
.page--artist-detail .artist-detail-tags {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 20px;
}

.page--artist-detail .artist-detail-tag {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 170%;
  color: var(--wh, #FFF6E9);
  white-space: nowrap;
}

.page--artist-detail .artist-detail-tag--img {
  width: auto;
  /* 원본은 3배 — 글로우 여백까지 포함돼 있어 상자 높이(27px)보다 크게 나온다 */
  height: 27px;
}

/* 태그를 누르면 그 태그가 걸린 참여작가 목록으로 간다.
   모양은 그대로 두고 감싸기만 한다 — 안쪽 img·span 규칙이 그대로 먹어야 한다. */
.page--artist-detail .artist-detail-tag-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

@media screen and (max-width: 1080px) {
  .page--artist-detail .artist-detail-tags {
    padding-left: 20px;
    gap: 6px 12px;
    margin-top: 16px;
  }

  .page--artist-detail .artist-detail-tag {
    font-size: 14px;
  }

  .page--artist-detail .artist-detail-tag--img {
    height: 24px;
  }
}

/* ==========================================================================
   필터 동작 보정 (0818)
   ========================================================================== */

/* 초기화 버튼 — 필터를 펼친 동안 계속 떠 있는다.
   :not([hidden]) 를 붙여야 JS 가 걸어 둔 hidden 을 이 규칙이 덮어쓰지 않는다. */
.artists-filter.is-open .artists-filter-reset:not([hidden]) {
  display: inline-flex;
}

/* 걸러진 작가는 자리를 비운다 — 남은 작가들이 위로 당겨 다시 정렬된다 */
.artists-grid .artist-item.is-filtered-out {
  display: none;
}

/* 어두운 막이 헤더(GNB)까지 덮고, 필터 바와 작가 목록만 그 위에 남는다.
   .page-main 이 z-index:1 로 쌓임 맥락을 만들어 안쪽 z-index 가 아무리 커도
   GNB(z-index:100) 를 못 넘는다 → 필터가 열린 동안에만 이 칸 자체를 위로 올린다. */
.page--artists .page-main:has(.artists-filter.is-open) {
  z-index: 150;
}

.page--artists .artists-filter {
  z-index: 160;
}

.page--artists .artists-grid {
  z-index: 161;
}

/* 막이 깔린 동안 헤더는 클릭도 막는다 (덮여만 있고 눌리면 어색하다) */
.page--artists .artists-filter.is-open::before {
  pointer-events: auto;
}

/* ==========================================================================
   작가 상세 — 이름 + 태그를 한 칸으로 묶어 함께 sticky
   (따로 두면 2열 격자에 3번째 칸이 생겨 레이아웃이 틀어진다)
   ========================================================================== */
.page--artist-detail .artist-detail-namebox {
  position: sticky;
  bottom: 120px;
  align-self: end;
  z-index: 5;
}

.page--artist-detail .artist-detail-namebox .artist-detail-name {
  position: static;
  bottom: auto;
  align-self: auto;
}

@media screen and (max-width: 1080px) {
  .page--artist-detail .artist-detail-namebox {
    position: static;
    align-self: start;
  }
}

/* 필터를 펼치면 일단 작가를 모두 감춘다 — 고른 값의 작가만 나타나는 방식.
   (닫으면 선택이 없을 때 다시 전체가 보인다) */
.page--artists .artists-filter.is-open:not(.has-picked) ~ .artists-grid .artist-item {
  display: none;
}

/* 모바일 필터 — 피그마 "전시/참여작가작품-필터 - MO" 기준 PC의 0.75배 */
@media screen and (max-width: 1080px) {
  .artists-filter {
    --fs: 0.75;
  }

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

/* 한 줄에 이미지 칩과 텍스트 칩이 섞이면(예: 전시장소 줄의 "기타") 줄 높이가 텍스트에 맞춰
   늘어나고 flex 기본값(stretch) 때문에 이미지 칩까지 같이 늘어난다 → 가운데 정렬로 고정 */
.artists-filter-row {
  align-items: center;
}

/* [hidden] 규칙보다 뒤에 오므로 :not([hidden]) 이 없으면 숨김이 풀린다 */
.artists-filter-chip.has-img:not([hidden]),
.artists-filter-btn.has-img:not([hidden]) {
  display: inline-flex;
  align-items: center;
}

.filter-img {
  display: block;
}

/* ==========================================================================
   프로그램 (0818 신규) — 왼쪽 카드 목록 + 오른쪽 달력/상세
   피그마 "Program": 카드 x124~520, 달력 x694~1290 (7열 × 90px, 칸 90×106)
   ========================================================================== */
.page--program-list .program-main,
.page--program-detail .program-main {
  max-width: 1440px;
}

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

.program-heading {
  margin: 0 0 40px;
  font-size: 32px;
  font-weight: 700;
  line-height: 150%;
}

/* ── 카드 ──────────────────────────────────────────────────────────────── */
.program-cards {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding-left: 40px;
}

.program-card {
  display: block;
  text-decoration: none;
  color: inherit;

  max-width: 370px;
}

.program-card-cat {
  display: block;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 160%;
  color: var(--c);
}

.program-card-title {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 700;
  line-height: 140%;
}

.program-card-date,
.program-card-venue {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

@media (hover: hover) {
  .program-card:hover .program-card-title {

  }
}

/* ── 달력 ──────────────────────────────────────────────────────────────── */
.pcal-head,
.pcal-grid {
  display: grid;
  /* minmax(0, 1fr) 이어야 일곱 칸이 진짜로 똑같아진다.
     그냥 1fr 은 minmax(auto, 1fr) 이라, 칸 안의 "추석 연휴"·"특별 프로그램" 같은
     안 쪼개지는 글자가 최소 너비를 밀어올려 그 열만 넓어진다 (실측 70~103px 제각각). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* 요일 머리글 — 가운데 정렬 (피그마: 90px 칸에서 텍스트가 정확히 중앙) */
.pcal-wd {
  padding-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 180%;
  text-align: center;
}

/* 칸 90×106, 줄 간격 5px (피그마 "달력만!" — 줄 pitch 111) */
.pcal-cell {
  position: relative;
  min-height: 106px;
  padding: 0 0 5px;
}

/* 달이 바뀔 때 남는 칸은 장식으로 채워 한 주를 구분선처럼 쓴다 */
.pcal-cell--deco,
.pcal-cell--month {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 월 라벨은 칸 하나를 통째로 차지한다 */
.pcal-month {
  font-size: 22px;
  font-weight: 700;
  line-height: 180%;
}

.pcal-day {
  display: inline-block;
  padding-left: 5px;
  padding-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 180%;
  color: inherit;
  text-decoration: none;
}

a.pcal-day {
  cursor: pointer;
}

@media (hover: hover) {
  a.pcal-day:hover {
    text-decoration: underline;
  }
}

.pcal-cell.is-active .pcal-day {
  /*font-weight: 900;*/
  /*text-decoration: underline;*/
  /*text-underline-offset: 3px;*/
}

.pcal-holiday {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 160%;
  opacity: 0.7;
}

.pcal-cats {
  display: block;
  margin-top: 8px;
}

.pcal-cat {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 160%;
  color: var(--c);
  white-space: nowrap;
}

/* ── 상세 ──────────────────────────────────────────────────────────────── */
.program-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

.program-detail-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

/* 상세 항목 — 피그마 "Frame 291" 실측
   PC : 항목 칸 140px(사이 여백 없음) · 줄 간격 10 · 본문과의 사이 32 · 16/27.2
   MO : 항목 칸 64px + 사이 20 · 줄 간격 5 · 본문과의 사이 20 · 14/25.2 */
.program-detail-meta {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 0;
  margin: 40px 0 0;
}

.program-detail-meta dt,
.program-detail-meta dd {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 170%;
}

@media screen and (max-width: 1080px) {
  /* 모바일은 달력이 먼저, 카드가 아래 (피그마 MO: 제목 → 달력) */
  .program-layout {
    grid-template-columns: 1fr;
  }

  .program-pane--calendar {
    order: -1;
  }

  .program-heading {
    font-size: 24px;
    margin-bottom: 28px;
  }

  .program-cards {
    gap: 44px;
    padding-left: 8px;
  }

  .program-card-title {
    font-size: 22px;
  }

  .program-card-date,
  .program-card-venue {
    font-size: 12px;
    line-height: 180%;
  }

  .pcal-cell {
    min-height: 64px;
  }

  .pcal-cat {
    font-size: 8px;
  }

  .pcal-holiday {
    font-size: 8px;
  }

  .pcal-month {
    font-size: 14px;
    top: -22px;
  }

  /* 모바일도 항목·내용을 나란히 둔다 (피그마 MO "Frame 128" = 가로 배치, 항목 64 + 여백 20) */
  .program-detail-meta {
    grid-template-columns: 64px 1fr;
    gap: 5px 20px;
    margin-top: 40px;
  }

  .program-detail-body {
    font-size: 14px;
    line-height: 180%;
    letter-spacing: 0.14px;
  }

  .program-detail-meta dt,
  .program-detail-meta dd {
    font-size: 14px;
    line-height: 180%;
    letter-spacing: 0.14px;
  }
}

/* 모바일 프로그램 — 달력 화면과 목록 화면이 갈린다 (피그마 MO 프레임)
   · /program            달력만
   · ?date= / ?cat=      목록만 + "프로그램 전체 보기"
   · /program/<슬러그>    그 카드 + 상세 */
.program-back--mo {
  display: none;
}

@media screen and (max-width: 1080px) {
  .program-back--mo {
    display: inline-flex;
  }

  /* 달력 화면 — 아직 아무것도 안 골랐으면 카드 칸 자체를 비운다 */
  .page--program-list:not(.has-selection) .program-pane--cards .program-cards {
    display: none;
  }

  /* 목록 화면 — 달력을 감춘다 */
  .page--program-list.has-selection .program-pane--calendar {
    display: none;
  }

  /* 상세 화면 — 형제 카드는 감추고 지금 보는 것만 남긴다 */
  .page--program-detail .program-card:not(.is-current) {
    display: none;
  }
}

/* ==========================================================================
   프로그램 — 피그마 실측값으로 보정 (0818)
   ========================================================================== */

/* PC 프레임에는 페이지 제목이 없다 — 모바일에만 (피그마 MO 32px) */
.program-heading--mo {
  display: none;
}

/* 분류 칩 = 9px 원 + 글씨 (피그마 p-Cat) */
.pcat-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  vertical-align: middle;
  margin-right: 4px;
}

.program-card-cat .pcat-dot {
  margin-right: 8px;
}

.program-card-cat {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 180%;
  color: var(--c);
  padding-left: 3px;
}

.program-card-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 160%;
}

.program-card-date,
.program-card-venue {
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 0.16px;
}

.pcal-cat {
  display: flex;
  align-items: center;
  width: max-content;
  font-size: 12px;
  font-weight: 700;
  line-height: 180%;
}

.pcal-cat .pcat-dot {
  margin-right: 8px;
}

@media screen and (max-width: 1080px) {
  .program-heading--mo {
    display: block;
  }

  .program-card-cat {
    line-height: 180%;
  }

  .program-card-title {
    font-size: 22px;
    line-height: 170%;
    margin-bottom: 0;
  }

  .program-card-date,
  .program-card-venue {
    font-size: 12px;
    line-height: 160%;
    letter-spacing: 0;
  }
}

/* 화면에는 안 보이고 스크린리더만 읽는 제목 (데코 제목이 시각적 역할을 대신한다) */
.is-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 빈 칸 장식 */
.pcal-deco {
  display: block;
  width: 70px;
  height: auto;
  opacity: 0.85;
  pointer-events: none;
}

/* 범례·점은 PC에선 안 쓴다 */
.pcal-legend,
.pcal-dot-mo {
  display: none;
}

@media screen and (max-width: 1080px) {
  /* 달력 칸에는 점만, 분류는 위 범례로 (피그마 MO) */
  .pcal-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 12px;
    margin-bottom: 24px;
  }

  .pcal-legend-item {
    display: inline-flex;
    align-items: center;
    font-size: 8px;
    font-weight: 700;
    line-height: 180%;
    color: var(--c);
    white-space: nowrap;
  }

  .pcal-legend .pcat-dot {
    width: 5px;
    height: 5px;
    margin-right: 3px;
  }

  .pcal-cats {
    display: none;
  }

  .pcal-dot-mo {
    display: block;
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 50%;
    background: currentColor;
  }

  .pcal-deco {
    width: 32px;
    margin-top: 0;
  }

  .pcal-cell {
    min-height: 44px;
    text-align: center;
  }

  .pcal-wd {
    text-align: center;
  }
}

/* ==========================================================================
   프로그램 — 피그마 기울기 (0818 재적용)
   카드와 달력 분류 칩이 -10° 기울어 있다. (회전된 텍스트라 피그마 상자가 부풀어 있음:
   16px 한 줄이 195×61 → cos/sin 역산하면 정확히 10°)
   제목(fixed-typo)이 아니라 이 둘이다.
   ========================================================================== */
.program-card {
  transform: rotate(-10deg);
  transform-origin: left center;
}

.pcal-cat {
  transform: rotate(-10deg);
  transform-origin: left center;
}

/* 기울면 오른쪽 위가 들려 이웃과 겹친다 — 카드 간격과 칸 여유를 늘린다 */
.program-cards {
  gap: 96px;
}

@media screen and (max-width: 1080px) {
  .program-cards {
    gap: 64px;
  }
}

/* ==========================================================================
   디자이너 메모: "해당 날짜만 활성화되고 나머지 날짜는 투명도 30%를 가지며 비활성화됩니다"
   ========================================================================== */
.program-calendar.has-active-day .pcal-cell:not(.is-active) {
  opacity: 0.3;
}

.program-calendar.has-active-day .pcal-cell.is-active {
  opacity: 1;
}

/* 분류 칩은 날짜보다 조금 더 들여쓴다 (피그마: 날짜 5px / 칩 16px) */
.pcal-cats {
  /*padding-left: 16px;*/
}

.pcal-holiday {
  /*padding-left: 5px;*/
}

@media screen and (max-width: 1080px) {
  /* 모바일 칸 45×44 (피그마 MO) */
  .pcal-cell {
    min-height: 44px;
    padding-bottom: calc(5px + 8px);
  }

  .pcal-day {
    padding-left: 0;
    text-align: center;
    display: block;
    padding-bottom: 0;
  }

  .pcal-holiday {
    text-align: center;
  }

  .pcal-month {
    font-size: 14px;
  }

  .pcal-deco {
    width: 32px;
  }
}

/* ==========================================================================
   휴일 (피그마 댓글 "여기! 휴일 관련 디자인!" — 노드 2017:10401)
   날짜가 22×22 분홍 원 배지 안에 들어가고 글자는 어두운색·900,
   휴일 이름은 분홍으로 날짜 아래 붙는다.
   ========================================================================== */
.pcal-cell.is-holiday .pcal-day {
  display: block;
  text-align: center;
  padding-bottom: 0;
  margin-bottom: 5px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  padding-left: 0;
  border-radius: 999px;
  background: #FC959E;
  color: #261816;
  font-weight: 900;
}

.pcal-cell.is-holiday .pcal-holiday {
  color: #FC959E;
  opacity: 1;
}

/* 휴일이면서 첫날 표기("11월 1일")면 배지가 아니라 글자만 강조 */
.pcal-cell.is-holiday .pcal-day.is-wide {
  width: auto;
  padding: 0 8px;
  border-radius: 999px;
}

@media screen and (max-width: 1080px) {
  .pcal-cell.is-holiday .pcal-day {
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin: 0 auto;
  }
}

/* 모바일 달력 — 칸에는 점만. (앞쪽 .pcal-cats 규칙보다 뒤에 와야 이긴다) */
@media screen and (max-width: 1080px) {
  .pcal-cats {
    display: none;
  }

  .pcal-cell {
    min-height: 52px;
  }

  .pcal-grid {
    grid-auto-rows: 52px;
  }
}

/* ==========================================================================
   달력 셀 스타일 — 디자이너 컴포넌트 (피그마 댓글 "셀 스타일 컴포넌트", 2017:10393~10408)
   ========================================================================== */

/* 일요일은 날짜와 요일 머리글이 분홍 */
.pcal-wd.is-sun,
.pcal-cell.is-sun .pcal-day {
  color: #FC959E;
}

/* 휴일 배지는 일요일이어도 어두운 글씨 유지 */
.pcal-cell.is-sun.is-holiday .pcal-day {
  color: #261816;
}

/* 월 라벨은 흰색 (본문 크림색보다 밝다) */
.pcal-month {
  color: #FFFFFF;
}

/* 분류 칩의 점은 80% */
.pcat-dot {
  opacity: 0.8;
}

/* 장식 — 세 번째 도형만 50% (피그마 Group 187) */
.pcal-deco {
  opacity: 1;
}

.pcal-cell--deco img[src*="deco-3"] {
  opacity: 0.5;
}

/* 모바일 점은 분류마다 하나씩 */
.pcal-dots-mo {
  display: none;
}

.pcal-dot-mo {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
  opacity: 0.8;
}

@media screen and (max-width: 1080px) {
  .pcal-dots-mo {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
  }

  /* 제목은 왼쪽, 범례는 오른쪽에 세로로 (피그마 MO: 제목 x30 / 범례 x281) */
  .program-layout {
    position: relative;
  }

  .pcal-legend {
    position: absolute;
    top: 44px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    z-index: 1;
  }

  .pcal-legend-item {
    font-size: 8px;
    line-height: 180%;
  }

  .pcal-legend .pcat-dot {
    width: 7px;
    height: 7px;
    margin-right: 5px;
  }

  /* 달력은 제목 아래 (피그마 MO: 제목 y121 → 달력 y252) */
  .program-pane--calendar {
    order: 0;
  }

  .program-pane--cards {
    order: -1;
  }

  .program-heading--mo {
    font-size: 32px;
    font-weight: 700;
    line-height: 170%;
    margin: 80px 0 60px;
  }

  /* 휴일 이름은 아주 작고 흐리게 (피그마 MO 8.64px / 30%) */
  .pcal-cell.is-holiday .pcal-holiday {
    font-size: 8px;
    opacity: 0.3;
  }
}

/* ==========================================================================
   달력 조작 개선 (0818)
   · 날짜 글자가 작아 누르기 어려워 칸 전체를 누르게 했다
   · 고른 날을 다시 누르면 선택이 풀려 달력 전체가 돌아온다
   · 날짜를 고르면 요일 머리글도 함께 흐려진다
   ========================================================================== */
a.pcal-cell {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
}

@media (hover: hover) {
  /*a.pcal-cell:hover { background: rgba(255, 246, 233, 0.06); }*/
}

/* 고른 날은 "한 번 더 누르면 해제"라는 걸 알 수 있게 */
/*a.pcal-cell.is-active { background: rgba(255, 246, 233, 0.08); }*/

.pcal-head.is-dimmed .pcal-wd {
  opacity: 0.3;
}

/* 모바일 제목과 범례도 -10° (피그마 상자 부풀음으로 확인:
   32px "프로그램" 128×54 → 131×72 / 8px "퍼포먼스" 32×14 → 33×19) */
.program-heading--mo {
  transform: rotate(-10deg);
  transform-origin: left center;
}

.pcal-legend-item {
  transform: rotate(-10deg);
  transform-origin: left center;
}

/* 짧은 쪽이 긴 쪽을 따라온다 (PC만) — 두 화면에서 붙는 칸이 서로 반대다.
     달력 화면 : 달력이 길다  → 왼쪽 카드가 붙는다
     상세 화면 : 카드가 길다  → 오른쪽 본문이 붙는다 */
@media screen and (min-width: 1081px) {
  .page--program-list .program-pane--cards,
  .page--program-detail .program-pane--detail {
    position: sticky;
    top: calc(var(--gnb-h, 106px) + 72px);
    align-self: start;
  }
}

/* 프로그램 상세 칸 — 피그마 실측: 폭 565, 컨테이너(1200) 오른쪽 끝에 붙는다 */
@media screen and (min-width: 1081px) {
  .program-pane--detail {
    width: 565px;
    /*margin-left: auto;*/
  }

  /* 분류 화면은 달력이 없어 오른쪽이 비어 있다 — 왼쪽 칸이 늘어나지 않게 격자를 지킨다 */
  .page--program-list .program-layout {
    min-height: 1px;
  }
}

/* 상세 — 문단·항목 여백 정리 (kirbytext 가 <p> 로 감싼다) */
.program-detail-body > p {
  margin: 0 0 1em;
}

.program-detail-body > p:last-child {
  margin-bottom: 0;
}

.program-detail-meta dd > p {
  margin: 0;
}

@media screen and (max-width: 1080px) {
  /* 카드 하나 → 상세. 피그마 MO "Frame 486" 사이 여백 60 */
  .page--program-detail .program-layout {
    gap: 60px;
  }
}

/* 상세를 보는 동안 나머지 카드는 10% (피그마 상세 프레임의 카드 opacity 0.1)
   달력의 "선택 안 된 날짜 30%"와 같은 처리인데 카드 쪽이 더 강하다.
   다만 10%는 글씨가 거의 안 보여 무엇을 누르는지 알 수 없으므로,
   마우스를 올린 카드만 되살린다 (모바일은 상세에서 형제 카드를 아예 감춘다). */
.page--program-detail .program-card:not(.is-current) {
  opacity: 0.1;
  transition: opacity 0.2s;
}

@media (hover: hover) {
  .page--program-detail .program-card:not(.is-current):hover {
    opacity: 1;
  }

  .page--program-detail .program-card:not(.is-current):hover .program-card-title {
    opacity: 1;
  }
}

/* ==========================================================================
   스티커 놀이 (피그마 "Open Source")
   별 → 목록·배경색 등장 → 스티커를 본문 위에 붙이면 글이 피해 흐른다
   ========================================================================== */

/* 배경색은 토큰을 갈아끼워 바꾼다 — 본문·GNB·푸터가 모두 --bg / --wh 를 쓰기 때문이다.
   밝은 배경에서는 글자와 스티커가 전부 짙은 색으로 뒤집힌다 (피그마 -BK 세트와 같은 규칙). */
html.sp-on {
  --bg: var(--sp-bg, #261816);
}

html.sp-on.sp-light {
  --wh: #261816;
  --bk: #FFF6E9;
}

/* 배경색은 부드럽게 넘기지 않고 툭 바꾼다.
   글자·아이콘·SVG 는 색이 즉시 바뀌는데 배경만 0.25초 동안 건너가면
   그 사이 배경과 글자의 명암이 어긋나 단차처럼 보인다. 다 같이 한 프레임에 바꾼다. */
html.sp-on body {
  transition: none;
}

html.sp-on header.gnb::before {
  transition: height 0.25s ease; /* 높이(2뎁스 열림)만 남기고 배경은 즉시 */
}

/* GNB 배경막은 어두운 색이 박혀 있다 — 놀이 중에는 배경색을 그대로 따라가게 한다 */
html.sp-on header.gnb::before {
  /*background: var(--sp-bg, #261816);*/
}

/* ── 별 버튼 ─────────────────────────────────────────────────────────────
   피그마: PC 53×58 / 모바일 38×42, 화면 오른쪽 아래 고정 */
.sticker-star {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 95;
  width: 53px;
  height: 58px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  --star-ink: #261816;
  --star-fill: #DAEBFC;
}

.sticker-star:disabled {
  opacity: 0.4;
  cursor: wait;
}

.sticker-star span {
  display: block;
}

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

/* .sticker-star span 이 (0,1,1) 이라 클래스 하나로는 못 이긴다 — 같이 적어 준다 */
.sticker-star .sticker-star-mo {
  display: none;
}

/* 밝은 배경에서는 별도 짙은 색 한 덩어리 (피그마 -BK) */
html.sp-light .sticker-star,
html.sp-light .sp-stuck--star {
  --star-fill: #261816;
}

/* ── 목록 ────────────────────────────────────────────────────────────────
   PC 는 오른쪽 세로줄(칸 폭 130), 모바일은 아래 가로줄(칸 높이 97).
   피그마 프레임이 잡아준 크기 그대로다 — 칸은 고정, 그림만 가운데 놓인다. */
.sp-rail {
  position: fixed;
  z-index: 90;
  display: flex;
  gap: 28px;
  scrollbar-width: none;
}

.sp-rail::-webkit-scrollbar {
  display: none;
}

.sp-rail--pc {
  top: 0;
  right: -16px;
  bottom: 0;
  flex-direction: column;
  justify-content: flex-start;
  padding: 120px 0 110px 16px;
  overflow-y: auto;
}

.sp-rail--pc:after {
  content: '';
  display: block;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9;
  width: 130px;
  height: 100px;
  background: linear-gradient(0deg, #261816 16.35%, rgba(38, 24, 22, 0.10) 84.13%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  pointer-events: none;
}

/* 아래쪽 흐림막에 어두운 색(#261816)이 박혀 있다 —
   배경색을 바꾸면 목록 아래만 원래 색으로 남아 단이 진다.
   놀이 중에는 --bg 를 그대로 따라가게 한다 (헤더 배경막과 같은 방식).
   불투명 → 10% 로 옅어지는 비율은 원래 값 그대로. */
html.sp-on .sp-rail--pc:after {
  background: linear-gradient(0deg,
    var(--bg) 16.35%,
    color-mix(in srgb, var(--bg) 10%, transparent) 84.13%);
}

.sp-rail--mo {
  left: 0;
  right: 0;
  bottom: 75px;
  align-items: center;
  padding: 10px 30px 0;
  overflow-x: auto;
}

.sp-chip {
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.2s, transform 0.2s;
}

.sp-rail--pc .sp-chip {
  width: 130px;
}

.sp-rail--mo .sp-chip {
  height: 80px;
}

.sp-chip svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.sp-rail--pc .sp-chip svg {
  width: 100%;
  height: auto;
}

.sp-rail--mo .sp-chip svg {
  height: 100%;
  width: auto;
}

@media (hover: hover) {
  .sp-chip:not(.is-used):hover {
    transform: translateX(-16px);
  }
}

.sp-chip.is-used {
  opacity: 0.25;
}

/* ── 배경색 버튼 ── */
.sp-bgs {
  position: fixed;
  left: 23px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sp-bg {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #261816;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sp-bg:first-child {
  border: 1px solid #FCE1E3;
}

.sp-bg.is-on {
  /*box-shadow: 0 0 0 2px var(--sp-bg, #261816), 0 0 0 3px currentColor;*/
}

/* ── 붙은 스티커 ─────────────────────────────────────────────────────────
   문서 좌표에 절대 배치한다 — 글이 늘어나 아래가 밀려도 제자리에 남는다 */
.sp-stuck {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 88;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}

.sp-stuck.is-dragging {
  cursor: grabbing;
}

.sp-stuck {
  /* 벗겨지는 상자(--s)는 스티커보다 크다. 그대로 두면 문서 스크롤 폭·높이가 늘어
     모바일에서 화면이 옆으로 끌린다. clip 은 스크롤 상자를 만들지 않고 잘라내기만 한다.
     여백은 종이가 들리는 여유(--pad)와 ±5도 기울기로 삐져나오는 만큼. */
  overflow: clip;
  overflow-clip-margin: 40px;
}

/* ── 벗겨지는 스티커 ──────────────────────────────────────────────────────
   reactbits.dev/animations/sticker-peel 의 방식.
   Peel Direction 60° / Peel Hover 40% / Peel Active 20% / Lighting 0.5
   (반사·뒷면 필터는 snippets/sticker-play.php 에 있다)

   원리는 "잘라낸 만큼 뒤집어 얹기" 다.
     .sp-peel  접는 방향(--pd)만큼 통째로 돌아 있다 → 그 안의 위쪽이 곧 벗겨지는 쪽
     .sp-main  clip-path 로 위에서 --c 만큼 잘라낸다
     .sp-lit   그 안에서 표면 정반사만 맡는다
     .sp-flap  같은 그림을 scaleY(-1) 로 뒤집어 위에 두고, 잘린 만큼만 보이게 하면서
               top 을 2×--c 내린다 → 잘려 나간 [0,c] 구간이 [c,2c] 로 접혀 넘어온다
     .sp-art   --pd 만큼 되돌려 화면에서는 똑바로 선다

   .sp-peel 은 스티커의 대각선 길이(--s)를 한 변으로 하는 정사각형이다.
   그래야 안쪽 그림을 되돌려 세워도 clip-path 상자 밖으로 삐져나가지 않는다.
   그 대신 벗겨내는 양을 --s 기준 비율로 환산해 둔다 (JS 가 넣는 0~1 값):
     --o  다 붙은 자리 (스티커의 벗겨지는 쪽 모서리)
     --e  스티커가 접는 방향으로 차지하는 길이 */
.sp-peel {
  --pad: 10px;
  --c0: calc(var(--o) * 100%); /* 다 붙음 */
  --ch: calc((var(--o) + 0.4 * var(--e)) * 100%); /* 마우스 올림 */
  --ca: calc((var(--o) + 0.2 * var(--e)) * 100%); /* 누름 */
  --cx: calc((var(--o) + 0.55 * var(--e)) * 100%); /* 붙기 직전 · 떼기 끝 */

  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--s);
  height: var(--s);
  margin-left: calc(var(--s) / -2);
  margin-top: calc(var(--s) / -2);
  transform: rotate(var(--tilt, 0deg)) rotate(var(--pd));
}

.sp-peel * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.sp-main {
  position: absolute;
  inset: 0;
  clip-path: polygon(-5% var(--c0), 105% var(--c0), 105% 105%, -5% 105%);
  transition: clip-path 0.55s ease-out;
  animation: sp-main-on 0.55s cubic-bezier(0.25, 0.6, 0.35, 1);
}

/* 젖혀 넘어온 뒷면. 위에 뒤집어 두었다가 잘린 만큼만 내려온다. */
.sp-flap {
  position: absolute;
  left: 0;
  top: calc(-100% - var(--pad) - var(--pad));
  width: var(--s);
  height: var(--s);
  clip-path: polygon(-5% -5%, 105% -5%, 105% -5%, -5% -5%);
  transform: scaleY(-1);
  transition: clip-path 0.55s ease-out, top 0.55s ease-out;
  animation: sp-flap-on 0.55s cubic-bezier(0.25, 0.6, 0.35, 1);
}

.sp-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--h) / -2);
  transform: rotate(calc(var(--pd) * -1));
}

/* 뒷면엔 인쇄가 없다 — 실루엣만 회색으로 채운다 */
.sp-art--back {
  filter: url(#sp-back);
}

.sp-art svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sp-lit,
.sp-flap-lit {
  position: absolute;
  inset: 0;
}

/* 앞면 반사는 마우스가 올라온 스티커에만 건다.
   필터 하나를 전부가 나눠 쓰므로, 계속 물려 두면 붙은 스티커가
   다 같은 자리에서 함께 번쩍인다. */
.sp-stuck.is-lit .sp-lit {
  filter: url(#sp-light);
}

.sp-flap-lit {
  filter: url(#sp-light-flip);
}

/* 마우스를 올리면 40%, 누르면 20% — 누르는 동안 도로 붙는다 */
.sp-stuck:hover .sp-main,
.sp-stuck.is-touch .sp-main {
  clip-path: polygon(-5% var(--ch), 105% var(--ch), 105% 105%, -5% 105%);
}

.sp-stuck:hover .sp-flap,
.sp-stuck.is-touch .sp-flap {
  clip-path: polygon(-5% -5%, 105% -5%, 105% var(--ch), -5% var(--ch));
  top: calc(-100% + 2 * var(--ch) - 1px);
}

.sp-stuck:active .sp-main {
  clip-path: polygon(-5% var(--ca), 105% var(--ca), 105% 105%, -5% 105%);
}

.sp-stuck:active .sp-flap {
  clip-path: polygon(-5% -5%, 105% -5%, 105% var(--ca), -5% var(--ca));
  top: calc(-100% + 2 * var(--ca) - 1px);
}

/* 붙기 — 반쯤 젖혀진 채로 와서 착 눕는다 */
@keyframes sp-main-on {
  0% {
    clip-path: polygon(-5% var(--cx), 105% var(--cx), 105% 105%, -5% 105%);
  }
  100% {
    clip-path: polygon(-5% var(--c0), 105% var(--c0), 105% 105%, -5% 105%);
  }
}

@keyframes sp-flap-on {
  0% {
    clip-path: polygon(-5% -5%, 105% -5%, 105% var(--cx), -5% var(--cx));
    top: calc(-100% + 2 * var(--cx) - 1px);
  }
  100% {
    clip-path: polygon(-5% -5%, 105% -5%, 105% -5%, -5% -5%);
    top: calc(-100% - var(--pad) - var(--pad));
  }
}

/* 떼기 — 같은 자리까지 슥 벗겨지고, 끝에서 속도가 죽은 뒤 사라진다.
   가속하다가 제일 빠를 때 잘라 버리면 사라진 게 아니라 끊긴 것으로 보인다.
   그래서 마지막 12% 에서만 짧게 지운다. */
.sp-stuck-in.is-off {
  animation: sp-off 0.5s cubic-bezier(0.25, 0.6, 0.35, 1) forwards;
  pointer-events: none;
}

.sp-stuck-in.is-off .sp-main {
  animation: sp-main-off 0.5s cubic-bezier(0.25, 0.6, 0.35, 1) forwards;
}

.sp-stuck-in.is-off .sp-flap {
  animation: sp-flap-off 0.5s cubic-bezier(0.25, 0.6, 0.35, 1) forwards;
}

@keyframes sp-off {
  0%, 88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes sp-main-off {
  0% {
    clip-path: polygon(-5% var(--c0), 105% var(--c0), 105% 105%, -5% 105%);
  }
  100% {
    clip-path: polygon(-5% var(--cx), 105% var(--cx), 105% 105%, -5% 105%);
  }
}

@keyframes sp-flap-off {
  0% {
    clip-path: polygon(-5% -5%, 105% -5%, 105% -5%, -5% -5%);
    top: calc(-100% - var(--pad) - var(--pad));
  }
  100% {
    clip-path: polygon(-5% -5%, 105% -5%, 105% var(--cx), -5% var(--cx));
    top: calc(-100% + 2 * var(--cx) - 1px);
  }
}

/* 스크롤이 멎기를 기다리는 동안 — 아직 안 붙은 상태 */
.sp-stuck-in {
  width: 100%;
  height: 100%;
}

.sp-stuck-in.is-waiting {
  opacity: 0;
}

.sp-stuck-in.is-waiting .sp-main,
.sp-stuck-in.is-waiting .sp-flap {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .sp-main,
  .sp-flap,
  .sp-stuck-in.is-off .sp-main,
  .sp-stuck-in.is-off .sp-flap {
    animation: none;
    transition: none;
  }

  .sp-stuck-in.is-waiting {
    opacity: 1;
  }

  .sp-stuck-in.is-off {
    opacity: 0;
    animation: none;
  }
}


.sp-stuck--star {
  --star-ink: #261816;
  --star-fill: #DAEBFC;
}

/* ── 흘려 그린 문단 ──────────────────────────────────────────────────────
   pretext 가 계산한 줄을 하나씩 절대 위치로 놓는다. 브라우저는 줄바꿈에 관여하지 않는다. */
.page-main p.is-flowed {
  position: relative;
  text-indent: 0;
}

.sp-line {
  position: absolute;
  white-space: pre;
  /* text-indent 는 상속된다. 줄 하나하나가 절대 배치된 상자라 그대로 두면
     모든 줄이 제각각 32px 씩 밀려 오른쪽으로 삐져나간다.
     들여쓰기는 아래 reflow 가 첫 줄의 시작 위치로 직접 넣는다. */
  text-indent: 0;
}

@media screen and (max-width: 1080px) {
  .sticker-star {
    width: 38px;
    height: 42px;
  }

  .sticker-star .sticker-star-pc {
    display: none;
  }

  .sticker-star .sticker-star-mo {
    display: block;
  }

  .sp-bgs {
    bottom: 25px;
    left: 30px;
    flex-direction: row;
    gap: 16px;
  }

  .sp-bg {
    width: 26px;
    height: 26px;
  }

  /* 하단 UI 뒤에 깔리는 막 — 피그마 "소개/전시주제-MO" 의 Nav 프레임
     (높이 181, BACKGROUND_BLUR 8 = CSS 4px).
     위는 거의 투명하고 아래로 갈수록 배경색이 차올라, 목록·배경색·별이
     글 위에 떠 있어도 읽힌다. 색은 배경 팔레트를 따라가야 하므로 --sp-bg 를 쓴다.

     쌓임 순서가 중요하다. 목록·배경색이 90, 별이 95 이므로 막은 그보다 아래여야
     UI 가 또렷하게 남는다. 위로 올리면 정작 보여줄 버튼까지 흐려진다. */
  .sticker-play.is-open::before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    /* 화면 아래로 160px 더 내려 깔아 둔다 (디자이너 QA "사파리에서 스크롤 할 때 간격이 벌어집니다").
       iOS 사파리는 주소창·툴바가 접혔다 펴지면서 fixed 요소의 bottom:0 기준선과
       실제로 보이는 바닥이 어긋난다 → 그 틈으로 본문이 비쳐 단이 진 것처럼 보였다.
       아래로 넉넉히 넘겨 두면 툴바가 어떻게 움직여도 틈이 안 생긴다.
       보이는 윗부분 181px 의 그라데이션은 그대로 두려고 정지점을 341 기준으로 환산했다
       (15.87%→8.42% / 83.65%→44.4%). */
    bottom: -160px;
    z-index: 89;
    height: 341px;
    background: linear-gradient(180deg,
    color-mix(in srgb, var(--sp-bg, #261816) 10%, transparent) 8.42%,
    var(--sp-bg, #261816) 44.4%,
    var(--sp-bg, #261816) 100%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    pointer-events: none;
  }
}

/* 별 버튼 — 페이지가 자리를 잡은 뒤 "뿅" 나타나고, 그다음 낮게 웅웅거린다.
   놀이가 켜져 있으면(그때는 리셋 버튼) 멈춘다. */
@keyframes sp-star-pop {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-30deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.22) rotate(8deg);
  }
  75% {
    transform: scale(0.94) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes sp-star-beat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

.sticker-play:not(.is-open) .sticker-star {
  /* 나타나기가 끝나는 시각(0.7+0.55=1.25s)에 맞춰 맥박을 이어 붙인다.
     맥박에는 fill 을 주지 않아 대기 중에는 나타나기 쪽 값이 그대로 적용된다. */
  animation: sp-star-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both,
  sp-star-beat 2.4s ease-in-out 1.25s infinite;
}

@media (hover: hover) {
  .sticker-star:hover {
    animation-play-state: paused;
    transform: scale(1.12);
  }
}

/* 움직임을 줄여 달라고 한 사람에게는 그냥 떠 있게 둔다 */
@media (prefers-reduced-motion: reduce) {
  .sticker-play:not(.is-open) .sticker-star {
    animation: none;
  }
}

/* 모바일 문단 들여쓰기 — 315px 단에서 2rem(32px)은 10% 라 과하다. 절반으로.
   평소 화면과 스티커 놀이 화면 모두에 같이 걸려야 별을 눌러도 글이 안 움찔한다. */
@media screen and (max-width: 1080px) {
  .page .prose.prose-2 > p,
  .page--venue .venue-desc > p {
    text-indent: 1rem;
  }

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

/* ── 목록·배경색 등장 ────────────────────────────────────────────────────
   PC 는 아래에서 위로, 모바일은 왼쪽에서 오른쪽으로 한 칸씩 착착.
   순서(지연)는 JS 가 칸마다 --d 로 넣는다.

   fill 을 backwards 로 두는 게 중요하다. both 로 두면 끝난 뒤에도
   transform: none 이 남아 호버 확대가 먹지 않는다. */
@keyframes sp-in-up {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes sp-in-right {
  from {
    opacity: 0;
    transform: translateX(-20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sp-chip,
.sp-bg {
  animation: sp-in-up 0.34s cubic-bezier(0.22, 0.9, 0.28, 1.3) var(--d, 0s) backwards;
}

@media screen and (max-width: 1080px) {
  .sp-chip,
  .sp-bg {
    animation-name: sp-in-right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-chip,
  .sp-bg {
    animation: none;
  }
}

/* 필터를 펼치면 배경 도판을 끈다.
   이 도판은 세로로 아주 긴 이미지(2160:7224)를 비율 그대로 깔려고
   min-height:100% 로 페이지 높이를 따라간다. 그런데 필터로 작가가 걸러지면
   목록이 짧아지는데 도판은 제 비율을 지키려고 버텨, 쓸데없이 긴 페이지가 남는다.
   어차피 필터가 열린 동안에는 어두운 막이 덮여 보이지도 않는다. */
.page--artists:has(.artists-filter.is-open)::before {
  content: none;
}

/* ==========================================================================
   스티커 놀이 — 배경색을 바꾸면 화면 전체가 따라간다
   글자는 --wh 를 쓰니 저절로 뒤집히는데, 아래 셋은 색이 박혀 있어 따로 손봐야 한다.
   ========================================================================== */

/* ① 인라인 SVG — 푸터 로고·기관 마크·SNS·마우스 별 (192개 path).
      fill 이 속성으로 박혀 있다. CSS 의 fill 속성이 프레젠테이션 속성을 이기므로
      값이 그 색인 것만 골라 바꾼다 (fill="none" 은 건드리면 안 된다). */
html.sp-on [fill="#FFF6E9"] {
  fill: var(--wh);
}

/* ② data URI 아이콘 — 검색 돋보기·모바일 햄버거.
      배경 이미지 안에 색이 들어 있어 골라낼 수가 없다. 밝은 배경일 때만 뒤집는다.
      닫기(.gnb-m-close)는 제외한다 — 메뉴 패널 안에 있고 그 패널은 제 배경(어두움)을
      그대로 쓰므로, 뒤집으면 어두운 판에 어두운 X 가 된다. */
html.sp-on.sp-light .icon-search,
html.sp-on.sp-light .gnb-m-toggle {
  filter: invert(1);
}

/* ③ 2뎁스 메뉴 — 색이 rgba 로 박혀 있어 배경이 바뀌어도 그대로다.
      현재 메뉴는 또렷하게, 나머지는 30% 로 흐리게 — 원래 대비를 그대로 뒤집는다.
      (모바일 .gnb-m-sub-link 는 패널이 늘 어두운 판 위라 손대지 않는다) */
html.sp-on .gnb-sub-link,
html.sp-on .gnb-sub-link.is-disabled {
  color: color-mix(in srgb, var(--wh) 30%, transparent);
}

html.sp-on .gnb-sub-link.is-active {
  color: var(--wh);
}

/* 모바일 메뉴 패널은 제 배경(#1A100F)이 박혀 있어 배경색을 안 따라간다.
   글자만 뒤집히면 어두운 판에 어두운 글자가 되어 안 보인다 →
   패널 안에서는 토큰을 원래 값으로 되돌려 통째로 손대지 않은 것처럼 둔다. */
html.sp-on .gnb-m-panel {
  --wh: #FFF6E9;
  --bk: #1A100F;
}

/* ④ GNB 뒤 막 — 원래 어두운 색이 박혀 있어 밝은 배경에서 검은 띠로 남는다.
      기울기 모양은 그대로 두고 색만 배경 팔레트를 따라가게 한다. */
html.sp-on header.gnb::before {
  background: linear-gradient(180deg,
  var(--bg) 16.35%,
  color-mix(in srgb, var(--bg) 10%, transparent) 84.13%);
}

/* 스티커를 붙이는 동안에는 본문을 붙잡아 두지 않는다.
   스티커는 문서 좌표에 박히고 sticky 인 칸은 화면을 따라다니므로,
   스크롤하면 둘이 어긋나 스티커만 흘러가고 글은 제자리에 남는다.
   놀이 중에만 sticky 를 풀어 글과 스티커가 같이 움직이게 한다. */
html.sp-on .page--program-detail .program-pane--detail,
html.sp-on .page--artist-detail .artist-detail-namebox {
  position: static;
}

/* ==========================================================================
   오디오 가이드 — 업체 임베드 코드가 들어오는 영역 (출품작품 목록 · 작품 상세)

   무엇이 올지 모르므로(대개 <iframe>) 가로로 삐져나가지 않게만 붙든다.
   높이는 업체 코드가 정한 값을 그대로 둔다 — 억지로 비율을 씌우면
   플레이어형 위젯이 잘리거나 빈 공간이 생긴다.
   ========================================================================== */
.audio-guide {
  margin-top: 60px;
}

.audio-guide-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 500;
  line-height: 150%;
  color: var(--wh, #FFF6E9);
}

.audio-guide-embed {
  /* 정해진 크기(width="600" 같은)로 오는 코드가 많다.
     iframe 은 억지로 줄여도 안쪽 화면이 같이 줄지 않고 잘리기만 한다
     → 크기는 업체 값을 그대로 두고, 넘치면 이 상자 안에서만 가로로 흘린다.
     (문서 전체에는 가로 스크롤이 안 생긴다) */
  overflow-x: auto;
  max-width: 100%;
}

.audio-guide-embed iframe,
.audio-guide-embed embed,
.audio-guide-embed object {
  display: block;
  border: 0;
}

/* 그림·영상은 줄여도 멀쩡하다 → 화면에 맞춘다 */
.audio-guide-embed video,
.audio-guide-embed img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* audio 는 기본 폭이 좁다 — 영역을 채우게 */
.audio-guide-embed audio {
  width: 100%;
}

/* 출품작품 목록의 .page-main 은 "준비 중" 한 줄을 가운데 두려고 flex(가로) 다.
   오디오 가이드가 붙으면 두 덩이가 나란히 서서 각각 반쪽 너비가 된다 → 세로로 쌓는다. */
.page--artworks .page-main:has(.audio-guide) {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 80px;
}

@media screen and (max-width: 1080px) {
  .audio-guide {
    margin-top: 40px;
  }

  .page--artworks .page-main:has(.audio-guide) {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .audio-guide-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   프로그램 달력 — PC 는 한 달씩, 모바일은 쭉 이어서

   넉 달치(8~11월)를 한 화면에 세우면 PC 에서 너무 길다 → prev·next 로 한 달씩 넘긴다.
   모바일은 지금처럼 이어서 본다.

   달 묶음(.pcal-month-block)은 display:contents 라 격자에 아무 영향이 없다 —
   안쪽 칸들이 그대로 .pcal-grid 의 칸이 된다. 숨길 때만 none 으로 통째로 빼면 된다.
   묶음 하나는 언제나 딱 떨어지는 줄 수라 빼도 격자가 안 어긋난다.

   .is-paged 는 JS 가 PC 폭에서만 건다 — JS 가 없으면 예전처럼 넉 달이 다 나온다.
   ========================================================================== */
.pcal-month-block {
  display: contents;
}

.pcal-nav {
  display: none;
}

.program-calendar.is-paged .pcal-month-block {
  display: none;
}

.program-calendar.is-paged .pcal-month-block.is-current {
  display: contents;
}

/* 피그마 0820 "달력만!" — 달력 가운데 위, 12px 굵게, 연도까지.
   화살표는 5×10 삼각형이고 글자와 10px 씩 떨어져 있다.
   요일 머리글까지 26px (넘김 줄 아래 22 + 26 = 요일 y) */
.program-calendar.is-paged .pcal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}

.pcal-nav-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 180%;
  color: var(--wh, #FFF6E9);
  white-space: nowrap;
}

.pcal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 그림은 5×10 이지만 손가락으로 누를 자리는 넉넉히 (여백은 음수 마진으로 되돌린다) */
  padding: 8px;
  margin: -8px;
  background: none;
  border: 0;
  color: var(--wh, #FFF6E9);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.15s ease;
}

.pcal-nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

@media (hover: hover) {
  .pcal-nav-btn:not(:disabled):hover {
    opacity: 0.6;
  }
}

/* 한 달만 남으면 달력이 짧아진다 → 카드 목록과 나란히 따라오게 붙인다.
   (원래는 긴 쪽이 달력이라 왼쪽 카드만 붙였다) */
@media screen and (min-width: 1081px) {
  .page--program-list .program-pane--calendar {
    position: sticky;
    top: calc(var(--gnb-h, 106px) + 20px);
    align-self: start;
  }
}

/* ==========================================================================
   달력 스타일 업데이트 (피그마 "달력만!" 0820 + 댓글)
   ========================================================================== */

/* 요일 머리글은 늘 흐리다 — 날짜보다 뒤로 물러나 있어야 한다 (피그마 α0.3) */
.pcal-wd {
  opacity: 0.3;
}

/* 이미 흐린 상태라 "날짜를 고르면 머리글도 흐려진다" 규칙은 더 겹칠 필요가 없다 */
.pcal-head.is-dimmed .pcal-wd {
  opacity: 0.3;
}

/* 디자이너 댓글: "프로그램이 없는 날은 투명도 30% 의 상태입니다!"
   장식·월 라벨 칸은 날짜가 아니므로 빼둔다 — 특히 월 라벨은 흰색으로 또렷해야 한다. */
.pcal-cell--day:not(.has-program) {
  opacity: 0.3;
}

/* 날짜를 고르면 고른 날만 남는다 — 위 규칙과 값이 같아 서로 싸우지 않는다 */
.program-calendar.has-active-day .pcal-cell--day.is-active {
  opacity: 1;
}

/* 프로그램 상세 — 바깥으로 나가는 줄 (참여 방법 → 프로그램 신청하기 ↗)
   오시는 길의 .visit-maplink 와 같은 설정 (디자이너 QA: "위치보기 ↗ 와 동일하게") */
.program-detail-link {
  display: inline-block;
  width: fit-content;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

@media (hover: hover) {
  .program-detail-link:hover {
    color: #FC959E;
  }
}

/* 프로그램 상세 맨 아래 크레딧 (디자이너 QA: 퍼포먼스 공동 커미션·제작 지원 표기)
   상세 항목보다 한 단 작고 흐리게 — 본문이 아니라 주석에 가깝다 */
.program-detail-credit {
  margin: 32px 0 0;
  /* 디자이너 지정 — PC·모바일 동일: regular / 12 / 160% */
  font-size: 12px;
  font-weight: 400;
  line-height: 160%;
  color: var(--wh, #FFF6E9);
  opacity: 0.5;
}

.program-detail-credit p {
  margin: 0;
}

@media screen and (max-width: 1080px) {
  .program-detail-credit {
    margin-top: 24px;
    /* 글자 크기는 PC 와 같게 둔다 (지정 사항) */
  }
}

/* 전시해설 — 장소마다 소제목 + 항목표가 반복된다 (디자이너 QA)
   소제목은 블록 제목(.visit-service-title)보다 한 단 아래, 항목 글자와 같은 크기로 굵게. */
.page--visit .visit-group {
  margin-top: 40px;
}

.page--visit .visit-group:first-of-type {
  margin-top: 32px;
}

.page--visit .visit-group-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 170%;
  color: var(--wh, #FFF6E9);
}

/* 유의사항처럼 항목표 없이 글만 있는 묶음 */
.page--visit .visit-group-note {
  font-size: 16px;
  font-weight: 400;
  line-height: 170%;
  color: var(--wh, #FFF6E9);
}

.page--visit .visit-group-note p {
  margin: 0 0 0.6em;
}

.page--visit .visit-group-note p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 1080px) {
  .page--visit .visit-group {
    margin-top: 32px;
  }

  .page--visit .visit-group-title,
  .page--visit .visit-group-note {
    font-size: 14px;
  }
}

/* 셔틀버스 정류장 — 제목과 본문을 가로가 아닌 세로로 (디자이너 QA).
   다른 항목은 라벨 140px + 내용 두 칸이지만, 여기는 정류장이 여러 줄이라
   제목을 위에 두고 그 아래로 목록이 흐르는 편이 읽힌다.

   ★ 선택자를 길게 쓰는 이유: 영문에는 .lang-en .page--visit .visit-row (138px 1fr) 이
   따로 있어 클래스 하나짜리 규칙으로는 진다. 두 언어 모두 확실히 이기게 맞춰 둔다. */
.page--visit .visit-row.visit-row--stops,
.lang-en .page--visit .visit-row.visit-row--stops {
  grid-template-columns: 1fr;
}

.page--visit .visit-row--stops .visit-label {
  margin-bottom: 8px;
}

/* 셔틀버스 정류장 유의사항 — 별표로 시작하는 한 문장 (시간표 각주와 같은 결) */
.page--visit .visit-stop-note {
  margin: 12px 0 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 160%;
}

.page--visit .visit-stop-note p {
  margin: 0;
}

/* 필터·초기화 버튼의 분홍 글로우.
   원래 피그마 SVG 안의 <filter> 로 들어 있었는데, iOS 사파리는 <img> 로 불러온 SVG의
   필터를 그리지 않는다 → 실기기에서 테두리만 남아 "깨진" 것처럼 보였다.
   SVG 에서 필터를 걷어내고 같은 값을 CSS 로 다시 그린다
   (피그마 값: dilate 1 · blur 4 · #FC959E 80%). */
.artists-filter-toggle.has-img .filter-img-off,
.artists-filter-reset.has-img .filter-img-off {
  filter: drop-shadow(0 0 2px rgba(252, 149, 158, 0.8))
          drop-shadow(0 0 4px rgba(252, 149, 158, 0.8));
}

/* ==========================================================================
   분류 화면에서 첫 프로그램 펼쳐 두기 (디자이너 QA "우측의 여백이 허전하다")
   상세 페이지와 같은 모양이라 카드 흐리기·오른쪽 칸 규칙을 그대로 물려준다.
   ========================================================================== */
.page--program-list.is-auto-open .program-card:not(.is-current) {
  opacity: 0.1;
  transition: opacity 0.2s;
}

@media (hover: hover) {
  .page--program-list.is-auto-open .program-card:not(.is-current):hover,
  .page--program-list.is-auto-open .program-card:not(.is-current):hover .program-card-title {
    opacity: 1;
  }
}

@media screen and (min-width: 1081px) {
  /* 짧은 쪽이 긴 쪽을 따라온다 — 상세 화면과 같은 처리 */
  .page--program-list.is-auto-open .program-pane--detail {
    position: sticky;
    top: calc(var(--gnb-h, 106px) + 20px);
    align-self: start;
  }
}

/* 모바일은 분류에서 목록부터 본다 — 펼쳐 둔 상세는 감추고 카드도 흐리지 않는다.
   (카드를 누르면 그때 상세 페이지로 넘어간다) */
@media screen and (max-width: 1080px) {
  .page--program-list.is-auto-open .program-pane--detail {
    display: none;
  }

  .page--program-list.is-auto-open .program-card:not(.is-current) {
    opacity: 1;
  }
}