@charset "UTF-8";
/*
 Theme Name:   GeneratePress EP Theme
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme made by EP.
 Author:       EVERYDAY PRACTICE
 Author URI:   http://everyday-practice.com
 License:      GNU General Public License v3.0 (or later)
 License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 Template:     generatepress
 Version:      0.1
*/
/* Initialize */
/*
 * Poppins 는 functions.php 에서 wp_enqueue (Google Fonts).
 * CSS @import 제거 → 스타일시트 파싱을 막지 않음.
 *
 * Poppins 600 → Medium(500) 파일로 렌더(Pretendard 600 과 무게 맞춤).
 * Google Fonts 스타일시트보다 뒤에 있어야 적용. 되돌리려면 두 블록 삭제.
 */
@font-face {
  font-family: "Poppins";
  src: url("/wp-content/themes/generatepress_child/fonts/Poppins-Medium.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  src: url("/wp-content/themes/generatepress_child/fonts/Poppins-Medium-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pretendard";
  src: url("/wp-content/themes/generatepress_child/fonts/Pretendard-Regular.woff2") format("woff2"), url("/wp-content/themes/generatepress_child/fonts/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/wp-content/themes/generatepress_child/fonts/Pretendard-Medium.woff2") format("woff2"), url("/wp-content/themes/generatepress_child/fonts/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/wp-content/themes/generatepress_child/fonts/Pretendard-SemiBold.woff2") format("woff2"), url("/wp-content/themes/generatepress_child/fonts/Pretendard-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("/wp-content/themes/generatepress_child/fonts/Pretendard-Bold.woff2") format("woff2"), url("/wp-content/themes/generatepress_child/fonts/Pretendard-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
:root {
  --color-white: #fff;
  --color-black: #000;
}

/*
 * 마우스가 있는 환경에서만 적용합니다.
 * 터치에서는 한 번 탭하면 :hover 가 그대로 눌어붙어(sticky hover) 다른 곳을
 * 누를 때까지 풀리지 않습니다. 확대·숨김처럼 모양이 바뀌는 효과는 특히 어색합니다.
 * 화면 폭이 아니라 입력 장치로 가르는 이유: 터치 노트북처럼 넓지만 마우스가 있는
 * 기기, 반대로 좁지만 마우스를 쓰는 창까지 정확히 구분됩니다.
 */
/* 슬라이더 좌우 버튼 공용. 상자는 CSS, 꺾쇠만 SVG(위쪽 → rotate). 크기: --slider-arrow-size */
/* 슬라이더 인디케이터(막대) 공용: 아카이브(Swiper)·인덱스 팝업·라이트박스 */
/* 홈 배너 진입 페이드인 */
@keyframes home-banner-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.page-home .home-banner-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: 100vh;
  padding: var(--gap);
  overflow: hidden;
}
.page-home .home-banner-item {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: block;
  opacity: 0;
  animation: home-banner-in 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.page-home .home-banner-item:nth-child(1) {
  animation-delay: 0ms;
}
.page-home .home-banner-item:nth-child(2) {
  animation-delay: 120ms;
}
.page-home .home-banner-item:nth-child(3) {
  animation-delay: 240ms;
}
.page-home .home-banner-item:nth-child(4) {
  animation-delay: 360ms;
}
.page-home .home-banner-item:nth-child(5) {
  animation-delay: 480ms;
}
.page-home .home-banner-item:nth-child(6) {
  animation-delay: 600ms;
}
.page-home .home-banner-item > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .page-home .home-banner-item {
    opacity: 1;
    animation: none;
  }
}
.page-home .home-banner-hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--gap);
  background: rgba(255, 255, 255, 0.75);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.page-home .home-banner-hover .home-banner-studios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin: 2.2rem 2.5rem;
}
.page-home .home-banner-hover .home-banner-studio img {
  display: block;
  width: auto;
  height: 5rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.page-home .home-banner-hover .home-banner-hover-title {
  height: -moz-max-content;
  height: max-content;
  color: var(--black);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  background-color: var(--white);
  margin: 0;
  padding: 0.8rem 1rem;
  margin: 2rem;
}
.page-home .home-banner-item:focus-visible .home-banner-hover {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .page-home .home-banner-item:hover .home-banner-hover {
    opacity: 1;
  }
}
.page-home {
  /*
   * 태블릿 이하: 배너 3개가 상단 바~하단 줄 사이를 채움. 호버 레이어를 캡션 바로 재배치.
   * - 이미지 높이 균등: 캡션 높이를 먼저 빼고 남는 높이를 나눔
   * - 100dvh / 제목 말줄임(--home-caption-max-lines) / 공간 부족 시 스크롤(--home-img-min)
   */
}
@media (max-width: 1024px) {
  .page-home {
    --home-caption-bg: var(--lime);
    --home-caption-pad: 0.8rem;
    --home-caption-min-lines: 1; /* 캡션 바 기본 높이(줄 수) */
    --home-caption-max-lines: 2; /* 이 줄 수를 넘으면 말줄임 */
    --home-title-fs: 1.4rem;
    --home-title-lh: 1.4;
    --home-studio-h: 2rem;
    /* 제목 ↔ 공방 로고 간격. 제목이 꽉 찼을 때 로고에 붙어 보이지 않도록 기본 여백의 두 배. */
    --home-caption-gap: calc(var(--gap) * 2);
    /* 이미지 최소 높이. 이보다 작아지면 스크롤(10rem ≈ iPhone SE 까지 채움) */
    --home-img-min: 10rem;
    /* 캡션 바 기본 높이 = 위아래 여백 + 제목 한 줄 높이 × 기본 줄 수 */
    --home-caption-min-h: calc(
        var(--home-caption-pad) * 2 + var(--home-title-fs) * var(--home-title-lh) * var(--home-caption-min-lines)
    );
  }
  .page-home .home-banner-list {
    height: auto;
    min-height: calc(100vh - var(--mobile-bar-h) - var(--mobile-footer-h));
    min-height: calc(100dvh - var(--mobile-bar-h) - var(--mobile-footer-h));
    overflow: visible;
  }
  .page-home .home-banner-item {
    /* auto: 시작 높이 = 이미지 최소 + 캡션 → 남는 높이 균등 분배(0 이면 캡션 긴 배너만 이미지가 짧아짐) */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    /* overflow: hidden 이면 최소 높이가 0 이 되어 스크롤 대신 눌림 → 해제 */
    min-height: auto;
    overflow: visible;
  }
  .page-home .home-banner-item > img {
    flex: 1 1 auto;
    /* 명시하지 않으면 시작 높이에 원본 이미지 높이가 들어가 배너가 거대해짐 */
    height: var(--home-img-min);
    min-height: var(--home-img-min);
  }
  .page-home .home-banner-hover {
    position: static;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--home-caption-gap);
    height: auto;
    min-height: var(--home-caption-min-h);
    padding: var(--home-caption-pad);
    background: var(--home-caption-bg);
    opacity: 1;
    pointer-events: auto;
  }
  .page-home .home-banner-hover .home-banner-hover-title {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    /* .unit 테두리와 흰 배경은 데스크탑 호버용이라 모두 걷어냅니다. */
    background: none;
  }
  .page-home .home-banner-hover .home-banner-hover-title::before {
    display: none;
  }
  .page-home .home-banner-hover .home-banner-hover-title {
    font-size: var(--home-title-fs);
    font-weight: 400;
    line-height: var(--home-title-lh);
    /* 최대 줄 수 초과 시 말줄임 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--home-caption-max-lines);
    line-clamp: var(--home-caption-max-lines);
    overflow: hidden;
  }
  .page-home .home-banner-hover .home-banner-studios {
    order: 2;
    flex: 0 0 auto;
    gap: 0.6rem;
    margin: 0;
  }
  .page-home .home-banner-hover .home-banner-studio img {
    height: var(--home-studio-h);
  }
}

.page-archive {
  padding: var(--gap);
}
.page-archive .archive-results {
  transition: opacity 0.15s ease;
}
.page-archive .archive-results.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.page-archive.page-archive-search .archive-filter {
  padding-top: 0;
}
.page-archive.page-archive-search .archive-filter-inner {
  justify-content: flex-start;
}
.page-archive {
  /* ----- FacetWP ----- */
}
.page-archive .facetwp-template {
  transition: opacity 0.15s ease;
}
.page-archive .facetwp-template.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.page-archive .facet-search {
  /* 검색 버튼 크기 */
  --search-icon-size: 3rem;
  padding: 2.2rem 0;
}
.page-archive .facetwp-type-search {
  position: relative;
}
.page-archive .facetwp-search-wrap {
  display: block;
}
.page-archive .facetwp-input-wrap {
  display: block;
}
.page-archive input.facetwp-search {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  border: none;
  border-bottom: 1px solid var(--black);
  background-color: transparent;
  /* 사파리 기본 입력칸 모양을 끕니다. 켜져 있으면 글자를 세로 가운데로
     맞추지 못하고 큰 글자의 아랫부분이 잘립니다. */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  border-radius: 0;
  padding: 2rem calc(var(--search-icon-size) + 1.5rem) 2rem 0;
  font-size: 3.6rem !important;
  font-weight: 300;
  /* line-height 는 전역 규칙이 1.54 !important 로 고정합니다(여기서 덮이지 않음). */
  text-transform: uppercase;
}
.page-archive input.facetwp-search::-moz-placeholder {
  color: #7f7f7f;
}
.page-archive input.facetwp-search::placeholder {
  color: #7f7f7f;
}
.page-archive input.facetwp-search:focus, .page-archive input.facetwp-search:focus-visible {
  outline: none;
  border-bottom: 1px solid var(--black);
}
.page-archive {
  /* 검색 버튼. functions.php 에서 <i> 대신 <button> 으로 내보냅니다. */
}
.page-archive .facetwp-icon {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  /* 입력칸이 뒤에 오므로 z-index 가 없으면 입력칸이 위를 덮어 클릭이 막힙니다. */
  z-index: 2;
  transform: translateY(-50%);
  width: var(--search-icon-size);
  height: var(--search-icon-size);
  padding: 0;
  border: 0;
  font-size: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: url("assets/images/search.png") center/100% 100% no-repeat;
}
.page-archive .facetwp-icon::before {
  display: none;
}
.page-archive .facetwp-facet {
  margin: 0;
}
.page-archive {
  /* 칩(작은 태그 상자)의 공통 치수. */
  /* --chip-fs 는 목록·썸네일 카드의 태그가 함께 쓰므로 그대로 둡니다.
     필터 바만 키우려고 크기를 따로 뺐습니다. */
  --chip-fs: 1.2rem;
  --filter-chip-fs: 1.5rem;
  --chip-pad: 0.3rem 0.8rem 0.2rem;
  --chip-line: 1.4;
  --chip-on-bg: var(--white);
  --chip-on-fg: var(--black); /* 선택된 칩 글자색 */
  --chip-on-line: var(--black); /* 선택된 칩 테두리 */
  --chip-bg: transparent;
  --chip-radius: 0;
  --chip-off-line: #ccc;
  --chip-disabled-fg: #a0a0a0; /* 고를 수 없는 항목의 글자색 */
  /* 필터 라벨(Year / Studio / Type) 고정 폭 */
  --filter-label-w: 5rem;
}
.page-archive .archive-filter-item-content {
  display: flex;
  flex-wrap: wrap;
  /* 칩이 줄 높이에 맞춰 늘어나지 않게 합니다(기본값 stretch). */
  align-items: flex-start;
  gap: 0.6rem 0.6rem;
}
@media (max-width: 720px) {
  .page-archive .archive-filter-item-content {
    align-items: center;
  }
}
.page-archive .archive-filter-item-content .facetwp-facet {
  display: contents;
}
.page-archive .archive-filter-item-content {
  /*
   * More 로 펼쳐지는 항목들은 FacetWP 가 div 하나로 묶어 내보냅니다.
   * 그대로 두면 그 div 가 flex 항목 하나가 되어 안의 칩이 세로로 쌓입니다.
   * contents 로 풀어 다른 칩들과 같은 줄 흐름에 넣습니다(숨김 상태는 그대로 둬야 함).
   */
}
.page-archive .archive-filter-item-content .facetwp-overflow:not(.facetwp-hidden) {
  display: contents;
}
.page-archive .archive-filter-item-content .facetwp-checkbox,
.page-archive .archive-filter-item-content .facetwp-radio {
  display: block;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0;
  background: none;
  font-size: var(--filter-chip-fs);
  font-weight: 400;
  line-height: var(--chip-line);
  text-transform: capitalize;
  padding: var(--chip-pad);
  border: 1px solid var(--chip-off-line);
  border-radius: var(--chip-radius);
  background-color: var(--chip-bg);
  color: #000;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.page-archive .archive-filter-item-content .facetwp-checkbox::before, .page-archive .archive-filter-item-content .facetwp-checkbox::after,
.page-archive .archive-filter-item-content .facetwp-radio::before,
.page-archive .archive-filter-item-content .facetwp-radio::after {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .page-archive .archive-filter-item-content .facetwp-checkbox:hover,
  .page-archive .archive-filter-item-content .facetwp-radio:hover {
    border-color: var(--chip-hover-line, var(--black));
  }
}
.page-archive .archive-filter-item-content .facetwp-checkbox.checked,
.page-archive .archive-filter-item-content .facetwp-radio.checked {
  border-color: var(--chip-on-line);
  background-color: var(--chip-on-bg);
  color: var(--chip-on-fg);
}
.page-archive .archive-filter-item-content .facetwp-checkbox .facetwp-display-value,
.page-archive .archive-filter-item-content .facetwp-radio .facetwp-display-value {
  padding-right: 0;
}
.page-archive .archive-filter-item-content .facetwp-counter {
  display: none;
}
.page-archive .archive-filter-item-content {
  /* 항목이 많은 필터(연도)의 More/Less. 기본은 다른 칩과 같은 모양입니다. */
}
.page-archive .archive-filter-item-content .facetwp-toggle {
  order: 1;
  /* 글자 옆에 + / - 기호를 나란히 둡니다. */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--filter-chip-fs);
  line-height: var(--chip-line);
  padding: var(--chip-pad);
  border: 1px solid var(--chip-off-line);
  border-radius: var(--chip-radius);
  background-color: var(--chip-bg);
  color: var(--black);
  cursor: pointer;
  /*
   * + / - 기호. 글꼴 문자가 아니라 1px 선 두 개(가로·세로)를 겹쳐 그립니다.
   * 글꼴 문자는 서체마다 굵기·위치가 달라 선이 흐리거나 치우칩니다.
   * currentColor 라 글자색을 그대로 따라갑니다.
   */
}
.page-archive .archive-filter-item-content .facetwp-toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 0.8rem;
  height: 0.8rem;
  background: linear-gradient(currentColor, currentColor) center/100% var(--line-width) no-repeat, linear-gradient(currentColor, currentColor) center/var(--line-width) 100% no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .page-archive .archive-filter-item-content .facetwp-toggle:hover {
    border-color: var(--chip-hover-line, var(--black));
  }
}
.page-archive .archive-filter-item-content .facetwp-toggle.facetwp-hidden {
  display: none;
}
.page-archive .archive-filter-item-content {
  /*
   * FacetWP 는 More 다음에 Less 를 같은 클래스의 형제로 나란히 내보냅니다.
   *   <a class="facetwp-toggle">More</a><a class="facetwp-toggle facetwp-hidden">Less</a>
   * 두 번째가 Less 이므로 세로선만 없애 - 로 만듭니다.
   */
}
.page-archive .archive-filter-item-content .facetwp-toggle + .facetwp-toggle::after {
  background-size: 100% var(--line-width), 0 0;
}
.page-archive .archive-filter-item-content {
  /* 고를 수 없는 항목: 테두리로는 구분이 안 돼 글자색을 낮춤 */
}
.page-archive .archive-filter-item-content .facetwp-checkbox.disabled,
.page-archive .archive-filter-item-content .facetwp-radio.disabled {
  pointer-events: none;
  color: var(--chip-disabled-fg);
}
.page-archive .archive-filter-item-content .archive-filter-reset {
  /* 칩과 같은 치수. shrink 방지·nowrap: 칩이 많으면 눌려 글자가 잘림 */
  flex: 0 0 auto;
  font: inherit;
  font-size: var(--filter-chip-fs);
  line-height: var(--chip-line);
  padding: var(--chip-pad);
  white-space: nowrap;
  /* color 명시: .tag-item(0,1,0) 이 GeneratePress button:focus(0,1,1) 에 밀려 흰 글자가 됐었음 */
  color: var(--black);
  border: 1px solid var(--chip-off-line);
  border-radius: var(--chip-radius);
  background-color: var(--chip-bg);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.page-archive .archive-filter-item-content .archive-filter-reset:focus, .page-archive .archive-filter-item-content .archive-filter-reset:active {
  color: var(--black);
  border-color: var(--black);
}
@media (hover: hover) and (pointer: fine) {
  .page-archive .archive-filter-item-content .archive-filter-reset:hover {
    color: var(--black);
    border-color: var(--black);
  }
}
.page-archive .archive-filter-item-content .archive-filter-reset {
  /* 아무것도 선택되지 않은 상태 = "전체" 가 켜진 상태 */
}
.page-archive .archive-filter-item-content .archive-filter-reset.is-current, .page-archive .archive-filter-item-content .archive-filter-reset.is-current:hover, .page-archive .archive-filter-item-content .archive-filter-reset.is-current:focus {
  color: var(--chip-on-fg);
  border-color: var(--chip-on-line);
  background-color: var(--chip-on-bg);
}
.page-archive .archive-filter-item-content .fs-wrap {
  min-width: 16rem;
}
.page-archive .archive-page-title {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
  color: #7f7f7f;
  text-transform: uppercase;
}
.page-archive .archive-category {
  font-size: 3.8rem;
  font-weight: 300;
  line-height: 1;
  padding-top: 0.1rem;
}
.page-archive .archive-filter {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 4.4rem 0 2.4rem;
}
.page-archive .archive-filter-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  justify-content: space-between;
  align-items: flex-start;
}
.page-archive .archive-filter-item-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 720px) {
  .page-archive .archive-filter-item-list {
    gap: 1.5rem;
  }
}
.page-archive .archive-filter-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8rem 2rem;
}
.page-archive .archive-filter-item[data-filter-item=category] {
  display: none;
  pointer-events: none;
}
.page-archive .archive-filter-item-title {
  flex: 0 0 var(--filter-label-w);
  width: var(--filter-label-w);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.4;
  text-transform: capitalize;
}
.page-archive .archive-filter-item-content {
  flex: 1;
}
.page-archive .archive-filter-view {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}
.page-archive .archive-filter-view-button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-transform: capitalize;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.page-archive .archive-filter-view-button.is-current {
  background-color: transparent;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .page-archive .archive-filter-view-button:hover {
    background-color: transparent;
    opacity: 1;
  }
}
.page-archive .archive-filter-view-button.is-current {
  pointer-events: none;
}
.page-archive .archive-filter-view,
.page-archive .archive-filter-view-button {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--black);
}
.page-archive .archive-empty {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 1rem 0;
}
.page-archive .archive-pagination {
  padding: 3rem 0;
  --number-size: 2.4rem;
}
.page-archive .archive-pagination .facetwp-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.page-archive .archive-pagination .facetwp-page {
  display: block;
  min-width: var(--number-size);
  height: var(--number-size);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: calc(var(--number-size) + 0.2rem);
  text-align: center;
  color: #7f7f7f;
  cursor: pointer;
  background-image: none;
  padding: 0;
  margin-right: 0;
}
@media (hover: hover) and (pointer: fine) {
  .page-archive .archive-pagination .facetwp-page:hover {
    color: var(--black);
  }
}
.page-archive .archive-pagination .facetwp-page.active {
  pointer-events: none;
  color: var(--black);
}
.page-archive .archive-pagination .facetwp-page.next {
  font-size: 0;
  background-image: url("assets/images/pagination_arrow.svg");
}
.page-archive .archive-pagination .facetwp-page.prev {
  font-size: 0;
  background-image: url("assets/images/pagination_arrow.svg");
  transform: rotate(180deg);
}
.page-archive .archive-item-thumb {
  display: none;
}
.page-archive .archive-list-head,
.page-archive .archive-item {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--black);
  padding: 1rem 0;
  gap: 2rem;
}
.page-archive .archive-list-head {
  border-top: 1px solid var(--black);
  padding: 0;
}
.page-archive .archive-list-head .archive-list-head-tag {
  width: 15%;
  max-width: 20rem;
}
.page-archive .archive-list-head .archive-list-head-title {
  flex: 1;
}
.page-archive .archive-list-head a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-size: 1.5rem;
  /* 머리글은 전부 영문이라 Light 로 둡니다. */
  font-weight: 300;
  line-height: 1.4;
  text-transform: capitalize;
  color: var(--black);
  transition: color 0.3s ease;
  padding: 1rem 0;
}
.page-archive .archive-list-head a::after {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
  background: url("assets/images/sort_arrow.svg") no-repeat center/contain;
}
.page-archive .archive-list-head a.is-active {
  color: var(--black);
}
@media (hover: hover) and (pointer: fine) {
  .page-archive .archive-list-head a:hover {
    color: var(--black);
  }
}
.page-archive .archive-list-head a.is-asc::after {
  transform: rotate(180deg);
}
.page-archive .archive-item .archive-item-tag {
  width: 15%;
  max-width: 20rem;
}
.page-archive .archive-item .archive-item-title {
  flex: 1;
}
.page-archive .archive-item .archive-item-title,
.page-archive .archive-item .archive-item-tag {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
  text-transform: capitalize;
}
.page-archive .archive-item {
  /* 연도는 숫자뿐이라 Light */
}
.page-archive .archive-item .archive-item-year {
  font-weight: 300;
}
.page-archive[data-view=list] .archive-item-thumb {
  display: block;
  position: fixed;
  right: calc(var(--gap) + var(--header-width));
  bottom: var(--gap);
  z-index: 30;
  width: 24rem;
  max-width: 40vw;
  aspect-ratio: 3/4;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
}
.page-archive[data-view=list] .archive-item-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.page-archive[data-view=list] .archive-item-type-list {
  display: none;
}
.page-archive[data-view=list] .archive-item:hover .archive-item-thumb:not(.is-placeholder):has(img) {
  opacity: 1;
  visibility: visible;
}
.page-archive[data-view=list] {
  /* 글자만 흐리게. .archive-item 에 opacity 를 주면 fixed 썸네일이 행 안에 갇힘 */
}
.page-archive[data-view=list] .archive-item-title,
.page-archive[data-view=list] .archive-item-tag {
  transition: opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .page-archive[data-view=list] .archive-item:hover .archive-item-title,
  .page-archive[data-view=list] .archive-item:hover .archive-item-tag {
    opacity: 0.45;
  }
}
@media (hover: none) {
  .page-archive[data-view=list] .archive-item-thumb {
    display: none;
  }
}
.page-archive[data-view=list].is-view-switching .archive-item-thumb,
.page-archive[data-view=list].is-view-switching .archive-item:hover .archive-item-thumb:has(img) {
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.page-archive[data-view=thumb] .archive-list-head {
  display: none;
}
.page-archive[data-view=thumb] .archive-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem var(--gap);
}
@media (max-width: 1024px) {
  .page-archive[data-view=thumb] .archive-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.6rem;
  }
}
@media (max-width: 720px) {
  .page-archive[data-view=thumb] .archive-list {
    /* 좌우는 화면 여백과 동일, 위아래는 그 두 배 */
    gap: calc(var(--gap) * 2) var(--gap);
  }
}
@media (max-width: 450px) {
  .page-archive[data-view=thumb] .archive-list {
    /* 시안 기준 폰에서도 2열 유지 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.page-archive[data-view=thumb] .archive-item {
  --thumb-gap-title: 1.5rem;
  --thumb-gap-tags: 0.4rem;
  --thumb-title-fs: 1.6rem;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  transition: opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .page-archive[data-view=thumb] .archive-item:hover {
    opacity: 0.65;
  }
}
.page-archive[data-view=thumb] .archive-item-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #f2f2f2;
  margin-bottom: var(--thumb-gap-title);
}
.page-archive[data-view=thumb] .archive-item-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.page-archive[data-view=thumb] .archive-item-type-list {
  display: flex;
  margin-top: var(--thumb-gap-tags);
  /* 위쪽 필터 칩과 같은 치수로 맞춥니다(--chip-* 토큰). */
}
.page-archive[data-view=thumb] .archive-item-type-list .tag-item {
  font-size: var(--chip-fs);
  line-height: var(--chip-line);
  padding: var(--chip-pad);
  text-transform: capitalize;
}
.page-archive[data-view=thumb] .archive-item-title {
  flex: none;
  width: 100%;
  font-size: var(--thumb-title-fs);
  font-weight: 400;
  line-height: 1.4;
}
.page-archive[data-view=thumb] .archive-item-tag {
  display: none;
}
.page-archive[data-view=thumb] .archive-empty {
  grid-column: 1/-1;
}
.page-archive {
  /* =====================================================================
   * 태블릿 이하(≤1024px) 목록 — 모바일 시안
   * ※ 이 블록은 .page-archive 의 맨 끝에 있어야 합니다.
   *   미디어쿼리는 특이도를 올리지 않아, 위에 두면 아래의 데스크탑 규칙에 밀립니다.
   * ===================================================================== */
}
@media (max-width: 1024px) {
  .page-archive {
    /* 필터 칩: 테두리 대신 회색 면 */
    --chip-pad: 0.2rem 0.6rem;
    --chip-radius: 0.3rem;
    --chip-bg: #ebebeb;
    --chip-on-bg: #727272;
    --chip-on-fg: var(--white);
    --chip-on-line: transparent;
    --chip-hover-line: transparent;
    --chip-off-line: transparent;
    --archive-title-fs: 1.2rem; /* ARCHIVE */
    --archive-category-fs: 2.4rem; /* Publication 등 카테고리명 */
    --filter-title-fs: 1.5rem; /* Year / Studio */
    --view-icon-h: 1.3rem; /* 목록·썸네일 아이콘 높이 */
    --view-icon-gap: 0.6rem;
  }
  .page-archive .archive-page-title {
    font-size: var(--archive-title-fs);
  }
  .page-archive .archive-category {
    font-size: var(--archive-category-fs);
  }
  .page-archive {
    /* 필터: 라벨을 칩 위로 올립니다(데스크탑은 좌우 배치). */
  }
  .page-archive .archive-filter {
    padding: 2.4rem 0 3rem;
  }
  .page-archive .archive-filter-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .page-archive .archive-filter-item-title {
    flex: none;
    width: auto;
    font-size: var(--filter-title-fs);
    font-weight: 300;
  }
  .page-archive {
    /* More/Less 는 칩과 달리 테두리 있는 알약 모양(시안). 개수는 FacetWP 의 soft limit. */
  }
  .page-archive .archive-filter-item-content .facetwp-toggle {
    padding: 0.2rem 0.8rem;
    border: 1px solid #ccc;
    border-radius: 1.2rem;
    background-color: var(--white);
  }
  .page-archive {
    /*
     * 목록/썸네일 전환 버튼은 시안에서 카테고리 제목 오른쪽에 있습니다.
     * DOM 상으로는 필터 영역 안이라 script.js 가 헤더의 .archive-header-tools 로 옮깁니다.
     */
    /* 아이콘 사이 구분자(|)는 시안에 없습니다. */
    /* 목록 머리글: Title / Year 만 (Studio 등은 숨김) */
  }
}
@media (max-width: 1024px) and (max-width: 720px) {
  .page-archive .archive-filter-item-content .facetwp-toggle {
    border: none;
    background-color: transparent;
    padding: 0;
  }
}
@media (max-width: 1024px) {
  .page-archive .archive-header {
    position: relative;
  }
  .page-archive .archive-header-tools {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .page-archive .archive-filter-view {
    gap: var(--view-icon-gap);
  }
  .page-archive .archive-filter-view-button {
    width: auto;
    height: var(--view-icon-h);
    /* 글자는 화면에서 감추고 아이콘만 보입니다(읽어주는 프로그램에는 남습니다). */
    font-size: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
  }
  .page-archive .archive-filter-view-button[data-view=list] {
    width: 2.4rem;
    background-image: url("assets/images/list_view.svg");
  }
  .page-archive .archive-filter-view-button[data-view=thumb] {
    width: 2.5rem;
    background-image: url("assets/images/thumb_view.svg");
  }
  .page-archive .archive-filter-view-button-separator {
    display: none;
  }
  .page-archive .archive-list-head a:not([data-sort-key=title]):not([data-sort-key=year]) {
    display: none;
  }
  .page-archive[data-view=list] .archive-list-head-tag {
    width: 40%;
    max-width: none;
  }
  .page-archive[data-view=list] {
    /* 제목 한 줄, 그 아래 태그 칩들이 나란히. */
  }
  .page-archive[data-view=list] .archive-item {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 1.2rem 0;
  }
  .page-archive[data-view=list] .archive-item-title {
    flex: none;
    width: 100%;
  }
  .page-archive[data-view=list] .archive-item-tag {
    width: auto;
    max-width: none;
    padding: var(--chip-pad);
    border-radius: var(--chip-radius);
    background-color: var(--chip-bg);
    font-size: var(--chip-fs);
    line-height: var(--chip-line);
  }
  .page-archive[data-view=list] {
    /* 마우스가 없는 환경이므로 화면 구석 호버 미리보기는 쓰지 않습니다. */
  }
  .page-archive[data-view=list] .archive-item-thumb {
    display: none;
  }
  .page-archive[data-view=thumb] .archive-item {
    --thumb-title-fs: 1.5rem;
  }
}

/* 아카이브 상세 팝업. 껍데기 functions.php / 동작 script.js / 내용은 .page-archive-single 과 동일 */
.archive-popup {
  /* 오른쪽 헤더(z-index 없음)를 가리지 않게 폭으로 제한 */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: var(--header-width);
  z-index: 150;
  background-color: var(--white);
  opacity: 0;
  transition: opacity 0.2s ease;
  /* display 를 쓰지 않으므로 hidden 을 직접 꺼줍니다. */
}
.archive-popup[hidden] {
  display: none;
}
.archive-popup.is-open {
  opacity: 1;
}
.archive-popup {
  /* 본문을 받아오는 동안의 빈 화면 깜빡임을 줄입니다. */
}
.archive-popup.is-loading .archive-popup-body {
  opacity: 0;
}
.archive-popup {
  /*
   * 태블릿 이하: 상단 바~하단 줄 사이에서 열림.
   * z-index: 팝업 100 < 메뉴 110 < 상단 바·하단 줄 120 < 라이트박스 300
   */
}
@media (max-width: 1024px) {
  .archive-popup {
    top: var(--mobile-bar-h);
    bottom: var(--mobile-footer-h);
    z-index: 100;
  }
}
.archive-popup .archive-popup-scroll {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 스크롤바 감추기는 styles/style.scss 의 전역 규칙이 처리합니다. */
}
.archive-popup .archive-popup-body {
  transition: opacity 0.2s ease;
}

/* 팝업이 열려 있는 동안 뒤쪽 목록이 같이 스크롤되지 않게 합니다. */
body.archive-popup-open {
  overflow: hidden;
}

.page-archive-single {
  /*
   * =====================================================================
   * 크기 표 (반응형) — 글자 크기·줄 높이·뱃지는 여기 값만 수정
   * =====================================================================
   */
  /* 데스크탑 (≥1025px) */
  /* 제목 */
  --as-title-fs: 3.6rem; /* 제목 글자 크기 */
  --as-title-lh: 1.32; /* 제목 줄 높이 */
  /* 키워드 뱃지 (ARCHIVE · Exhibition 등) */
  --as-tag-fs: 1.2rem; /* 뱃지 글자 크기 */
  --as-tag-lh: 1.4; /* 뱃지 줄 높이 */
  --as-tag-pad: 0.3rem 0.9rem 0.2rem; /* 뱃지 안쪽 여백 (위 좌우 아래) */
  --as-tag-gap: 0.4rem 0.6rem; /* 뱃지 사이 간격 (세로 가로) */
  /* 정보 표 (전시명 · 연도 등) */
  --as-field-label-w: 18rem; /* 왼쪽 항목명 칸 폭 */
  --as-field-label-fs: 1.6rem; /* 항목명 글자 크기 */
  --as-field-value-fs: 1.6rem; /* 값 글자 크기 */
  --as-field-lh: 1.4; /* 항목명·값 줄 높이 */
  /* 본문 · 목차 */
  --as-text-fs: 1.6rem; /* 소개글 · 목차 글자 크기 */
  --as-text-lh: 1.54; /* 소개글 · 목차 줄 높이 */
  --as-para-gap: 2.24rem; /* 문단 사이 여백 (빈 줄로 나눈 문단) */
  --as-toggle-fs: 1.6rem; /* 더보기/접기 글자 크기 */
  --as-toggle-lh: 1; /* 더보기/접기 줄 높이 */
  /* 관련 작품/프로젝트/개발 */
  --as-relation-title-fs: 1.8rem; /* 섹션 제목 크기 */
  --as-relation-title-lh: 1.4; /* 섹션 제목 줄 높이 */
  --as-relation-item-fs: 1.6rem; /* 항목 제목·부제 크기 */
  --as-relation-item-lh: 1.4; /* 항목 제목·부제 줄 높이 */
  --as-relation-sub-fs: 1.4rem; /* 작품 아래 전시명 크기 */
  /* 태블릿 (≤1024px) */
}
@media (max-width: 1024px) {
  .page-archive-single {
    /* 제목 */
    --as-title-fs: 2.8rem; /* 제목 글자 크기 */
    --as-title-lh: 1.32; /* 제목 줄 높이 */
    /* 키워드 뱃지 (ARCHIVE · Exhibition 등) */
    --as-tag-fs: 1.2rem; /* 뱃지 글자 크기 */
    --as-tag-lh: 1.4; /* 뱃지 줄 높이 */
    --as-tag-pad: 0.3rem 0.9rem 0.2rem; /* 뱃지 안쪽 여백 (위 좌우 아래) */
    --as-tag-gap: 0.4rem 0.6rem; /* 뱃지 사이 간격 (세로 가로) */
    /* 정보 표 (전시명 · 연도 등) */
    --as-field-label-w: 18rem; /* 왼쪽 항목명 칸 폭 */
    --as-field-label-fs: 1.3rem; /* 항목명 글자 크기 */
    --as-field-value-fs: 1.3rem; /* 값 글자 크기 */
    --as-field-lh: 1.4; /* 항목명·값 줄 높이 */
    /* 본문 · 목차 */
    --as-text-fs: 1.5rem; /* 소개글 · 목차 글자 크기 */
    --as-text-lh: 1.8; /* 소개글 · 목차 줄 높이 */
    --as-para-gap: 2rem; /* 문단 사이 여백 (빈 줄로 나눈 문단) */
    --as-toggle-fs: 1.5rem; /* 더보기/접기 글자 크기 */
    --as-toggle-lh: 1; /* 더보기/접기 줄 높이 */
    /* 관련 작품/프로젝트/개발 */
    --as-relation-title-fs: 2rem; /* 섹션 제목 크기 */
    --as-relation-title-lh: 1.4; /* 섹션 제목 줄 높이 */
    --as-relation-item-fs: 1.5rem; /* 항목 제목·부제 크기 */
    --as-relation-item-lh: 1.4; /* 항목 제목·부제 줄 높이 */
    --as-relation-sub-fs: 1.4rem; /* 작품 아래 전시명 크기 */
  }
}
.page-archive-single {
  /* 모바일 = 폰 라지 + 폰 (≤780px) */
}
@media (max-width: 720px) {
  .page-archive-single {
    /* 제목 */
    --as-title-fs: 2rem; /* 제목 글자 크기 */
    --as-title-lh: 1.32; /* 제목 줄 높이 */
    /* 키워드 뱃지 (ARCHIVE · Exhibition 등) */
    --as-tag-fs: 1.2rem; /* 뱃지 글자 크기 */
    --as-tag-lh: 1.4; /* 뱃지 줄 높이 */
    --as-tag-pad: 0.3rem 0.9rem 0.2rem; /* 뱃지 안쪽 여백 (위 좌우 아래) */
    --as-tag-gap: 0.4rem 0.6rem; /* 뱃지 사이 간격 (세로 가로) */
    /* 정보 표 (전시명 · 연도 등) */
    --as-field-label-w: 18rem; /* 왼쪽 항목명 칸 폭 */
    --as-field-label-fs: 1.3rem; /* 항목명 글자 크기 */
    --as-field-value-fs: 1.3rem; /* 값 글자 크기 */
    --as-field-lh: 1.4; /* 항목명·값 줄 높이 */
    /* 본문 · 목차 */
    --as-text-fs: 1.5rem; /* 소개글 · 목차 글자 크기 */
    --as-text-lh: 1.8; /* 소개글 · 목차 줄 높이 */
    --as-para-gap: 1.8rem; /* 문단 사이 여백 (빈 줄로 나눈 문단) */
    --as-toggle-fs: 1.5rem; /* 더보기/접기 글자 크기 */
    --as-toggle-lh: 1; /* 더보기/접기 줄 높이 */
    /* 관련 작품/프로젝트/개발 */
    --as-relation-title-fs: 2rem; /* 섹션 제목 크기 */
    --as-relation-title-lh: 1.4; /* 섹션 제목 줄 높이 */
    --as-relation-item-fs: 1.5rem; /* 항목 제목·부제 크기 */
    --as-relation-item-lh: 1.4; /* 항목 제목·부제 줄 높이 */
    --as-relation-sub-fs: 1.4rem; /* 작품 아래 전시명 크기 */
  }
}
.page-archive-single {
  /* 목차를 몇 줄에서 접을지(더보기). 구간 공통. */
  --as-index-lines: 13;
  /* 접혀 있을 때 아래쪽이 흰색으로 흐려지는 높이. */
  --as-index-fade: 6rem;
  /* 뒤로가기 버튼. */
  --back-size: 32px;
  --back-gap: 1.5rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-archive-single .archive-single-back {
  flex: 0 0 auto;
  display: block;
  width: var(--back-size);
  height: var(--back-size);
  margin: 0 0 var(--back-gap);
  padding: 0;
  border: 0;
  background: url("assets/images/arrow_back_long.svg") no-repeat center/contain;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.page-archive-single .archive-single-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 4rem;
}
.page-archive-single .archive-single-header-content {
  flex: 1;
}
.page-archive-single .archive-single-title {
  font-size: var(--as-title-fs);
  font-weight: 400;
  line-height: var(--as-title-lh);
  color: var(--black);
}
.page-archive-single .archive-single-tags {
  padding-top: 0.8rem;
  gap: var(--as-tag-gap);
  /* .tag-item 은 사이트 공통이라, 이 페이지 안에서만 크기를 덮어씁니다. */
}
.page-archive-single .archive-single-tags .tag-item {
  font-size: var(--as-tag-fs);
  line-height: var(--as-tag-lh);
  padding: var(--as-tag-pad);
}
.page-archive-single .archive-single-content {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  margin-top: 0rem;
}
.page-archive-single .archive-top-swipe {
  /* 프레임 비율 고정(가로형 4:3). */
  position: relative;
  min-height: 0;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.page-archive-single .archive-top-swipe .swiper-wrapper,
.page-archive-single .archive-top-swipe .swiper-slide {
  height: 100%;
}
.page-archive-single .archive-top-swipe img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: zoom-in;
}
.page-archive-single .archive-top-swipe {
  /* ----- 영상 슬라이드 ----- */
}
.page-archive-single .archive-top-swipe .archive-top-video {
  position: relative;
  background: #000;
  /* 포스터는 iframe 이 뜨기 전까지 자리를 지킵니다. 확대 대상이 아닙니다. */
}
.page-archive-single .archive-top-swipe .archive-top-video img {
  cursor: default;
}
.page-archive-single .archive-top-swipe {
  /* iframe 이 다 뜨면 포스터를 치웁니다. */
}
.page-archive-single .archive-top-swipe .archive-top-video.is-playing img {
  display: none;
}
.page-archive-single .archive-top-swipe .archive-top-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* 컨트롤을 감춘 자동재생이라 iframe 안에서 할 일이 없습니다.
     이벤트를 흘려보내야 영상 위에서도 스와이프로 넘길 수 있습니다. */
  pointer-events: none;
}
.page-archive-single .archive-top-swipe .archive-top-swipe-prev,
.page-archive-single .archive-top-swipe .archive-top-swipe-next {
  --slider-arrow-size: 32px;
  /* 모바일 28px. 믹스인 안에 둬야 쓰는 쪽과 특이도가 같아 덮입니다. */
}
@media (max-width: 720px) {
  .page-archive-single .archive-top-swipe .archive-top-swipe-prev,
  .page-archive-single .archive-top-swipe .archive-top-swipe-next {
    --slider-arrow-size: 28px;
  }
}
.page-archive-single .archive-top-swipe .archive-top-swipe-prev,
.page-archive-single .archive-top-swipe .archive-top-swipe-next {
  position: absolute;
  z-index: 2;
  width: var(--slider-arrow-size);
  height: var(--slider-arrow-size);
  margin: 0;
  padding: 0;
  border: 1px solid var(--black);
  background-color: var(--white);
  background-image: url("assets/images/slider_arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .page-archive-single .archive-top-swipe .archive-top-swipe-prev:hover,
  .page-archive-single .archive-top-swipe .archive-top-swipe-next:hover {
    opacity: 0.6;
  }
}
.page-archive-single .archive-top-swipe .archive-top-swipe-prev,
.page-archive-single .archive-top-swipe .archive-top-swipe-next {
  top: 50%;
}
.page-archive-single .archive-top-swipe .archive-top-swipe-prev::after,
.page-archive-single .archive-top-swipe .archive-top-swipe-next::after {
  display: none;
}
.page-archive-single .archive-top-swipe .archive-top-swipe-prev {
  left: var(--gap);
  transform: translateY(-50%) rotate(-90deg);
}
.page-archive-single .archive-top-swipe .archive-top-swipe-next {
  right: var(--gap);
  transform: translateY(-50%) rotate(90deg);
}
.page-archive-single .archive-top-swipe {
  /* Swiper 기본 pagination 을 점 대신 막대로 바꿉니다. clickable 은 script.js 에서 켭니다. */
}
.page-archive-single .archive-top-swipe .swiper-pagination {
  --bullet-w: 24px;
  --bullet-h: 2px;
  --bullet-gap: 6px;
  --bullet-off: #eee;
  --bullet-on: var(--black);
  --bullet-hover: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--bullet-gap);
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--gap);
  z-index: 2;
  width: auto;
}
.page-archive-single .archive-top-swipe .swiper-pagination .swiper-pagination-bullet {
  flex: 0 0 auto;
  width: var(--bullet-w);
  height: var(--bullet-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--bullet-off);
  opacity: 1;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: background-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .page-archive-single .archive-top-swipe .swiper-pagination .swiper-pagination-bullet:hover {
    background-color: var(--bullet-hover);
  }
}
.page-archive-single .archive-top-swipe .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--bullet-on);
}
.page-archive-single .archive-single-fields-text {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}
.page-archive-single .archive-single-fields {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--black);
}
.page-archive-single .archive-single-field-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 0.8rem 0;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  border-bottom: 1px solid var(--black);
}
.page-archive-single .archive-single-field-item-title {
  width: var(--as-field-label-w);
  font-size: var(--as-field-label-fs);
  font-weight: 600;
  line-height: var(--as-field-lh);
}
.page-archive-single {
  /*
   * 영문 항목명만 웨이트를 한 단계 낮춥니다.
   * 한글은 Pretendard, 영문은 Poppins 로 그려지는데 같은 600 이라도 Poppins 가 더 굵어 보입니다.
   * data-field 는 항목 이름의 슬러그입니다(template-parts/archive-single-content.php).
   * 다른 영문 항목이 생기면 여기 선택자에 추가하면 됩니다.
   */
}
.page-archive-single .archive-single-field-item-value {
  flex: 1;
  font-size: var(--as-field-value-fs);
  font-weight: 400;
  line-height: var(--as-field-lh);
}
.page-archive-single .archive-single-text-list {
  display: flex;
  flex-direction: column;
}
.page-archive-single .archive-single-text-item {
  padding: 2rem 0;
  border-bottom: 1px solid var(--black);
}
.page-archive-single .archive-single-text-item:first-child {
  padding-top: 0;
}
.page-archive-single .archive-single-text-item:last-child {
  border-bottom: 0;
}
.page-archive-single .archive-single-introduction {
  max-width: 90rem;
}
.page-archive-single .archive-single-text-item p,
.page-archive-single .archive-single-introduction,
.page-archive-single .archive-single-index {
  font-size: var(--as-text-fs);
  font-weight: 400;
  line-height: var(--as-text-lh);
}
.page-archive-single {
  /* 문단(.as-para, ep_format_paragraphs). 여백은 --as-para-gap */
}
.page-archive-single .archive-single-introduction .as-para,
.page-archive-single .archive-single-index .as-para {
  display: block;
}
.page-archive-single .archive-single-introduction .as-para + .as-para,
.page-archive-single .archive-single-index .as-para + .as-para {
  margin-top: var(--as-para-gap);
}
.page-archive-single .archive-single-index-wrap {
  position: relative;
}
.page-archive-single .archive-single-index-body {
  position: relative;
}
.page-archive-single .archive-single-index-wrap.is-collapsed .archive-single-index {
  /* 실제 자르는 높이(--as-index-clip)는 script.js 가 줄 경계에 맞춰 계산. 괄호 안은 대체값 */
  max-height: var(--as-index-clip, calc(var(--as-text-fs) * var(--as-text-lh) * var(--as-index-lines)));
  overflow: hidden;
}
.page-archive-single {
  /* 접힘 상태 하단 흰색 페이드: 내용이 더 있다는 힌트 */
}
.page-archive-single .archive-single-index-wrap.is-collapsed .archive-single-index-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--as-index-fade);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, var(--white) 100%);
}
.page-archive-single .archive-single-index-toggle {
  display: none;
  margin-top: 3rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--as-toggle-fs);
  font-weight: 400;
  line-height: var(--as-toggle-lh);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .page-archive-single .archive-single-index-toggle:hover {
    opacity: 0.6;
  }
}
.page-archive-single .archive-single-index-wrap.is-collapsible .archive-single-index-toggle {
  display: block;
}
.page-archive-single .archive-single-index-toggle-more span::after {
  content: "↓";
  margin-left: 0.6rem;
}
.page-archive-single .archive-single-index-toggle-less {
  display: none;
}
.page-archive-single .archive-single-index-toggle-less span::after {
  content: "↑";
  margin-left: 0.6rem;
}
.page-archive-single .archive-single-index-wrap.is-expanded .archive-single-index-toggle-more {
  display: none;
}
.page-archive-single .archive-single-index-wrap.is-expanded .archive-single-index-toggle-less {
  display: inline;
}
.page-archive-single .archive-single-relation-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  border-top: 1px solid var(--black);
}
.page-archive-single .archive-relation-title {
  font-size: var(--as-relation-title-fs);
  font-weight: 400;
  line-height: var(--as-relation-title-lh);
  padding: 3rem 0;
}
.page-archive-single .archive-single-relation-wrap.is-artwork .archive-single-relation-item-title {
  font-weight: 600;
}
.page-archive-single .archive-single-relation-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.page-archive-single .archive-single-relation-item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* 관련 작품: 눌러서 작품 정보 팝업을 엽니다(관련 프로젝트·개발은 그냥 링크). */
}
.page-archive-single .archive-single-relation-item.is-openable {
  cursor: pointer;
}
.page-archive-single .archive-single-relation-item.is-openable:focus-visible {
  outline: 1px solid var(--black);
  outline-offset: 0.4rem;
}
.page-archive-single .archive-single-relation-item img {
  width: 100%;
}
.page-archive-single .archive-single-relation-item p,
.page-archive-single .archive-single-relation-item a {
  font-size: var(--as-relation-item-fs);
  font-weight: 400;
  line-height: var(--as-relation-item-lh);
}
.page-archive-single .archive-single-relation-item .archive-single-relation-item-content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.page-archive-single .archive-single-relation-item {
  /* 관련 작품만 제목 굵게(.is-artwork, 아래 전시명과 위계 구분) */
}
.page-archive-single .archive-single-relation-item .archive-single-relation-item-title {
  font-weight: 400;
}
.page-archive-single .archive-single-relation-item {
  /* 작품 제목 아래 전시명. 제목보다 한 단계 작게 둬서 위계를 나눕니다. */
}
.page-archive-single .archive-single-relation-item .archive-single-relation-item-exhibtion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.page-archive-single .archive-single-relation-item .archive-single-relation-item-exhibtion-list a {
  font-size: var(--as-relation-sub-fs);
}
@media (max-width: 1024px) {
  .page-archive-single {
    --back-size: 24px; /* 뒤로가기 아이콘(데스크탑 32px) */
    --relation-cols: 2; /* 관련 항목 열 수(태블릿~폰 라지). 폰은 아래 phone 에서 1 */
    --relation-row-gap: 3rem; /* 항목 사이 세로 간격 */
    --relation-bg: var(--lime-pale);
    /* 데스크탑의 100vh 는 모바일에서 주소창까지 포함해 쓸데없는 스크롤을 만듭니다.
       바깥 .container 가 이미 화면 높이를 잡고 있으므로 여기선 풉니다. */
    min-height: 0;
  }
  .page-archive-single .archive-single-header {
    padding-bottom: 1.8rem;
  }
  .page-archive-single .archive-single-content {
    row-gap: 1.5rem;
  }
  .page-archive-single .archive-single-relation-wrap {
    /* 배경을 화면 양 끝·맨 아래까지: 부모 여백을 음수 margin 으로 넘기고 padding 으로 보정 */
    margin: 0 calc(var(--gap) * -1) calc(var(--gap) * -1);
    padding: 0 var(--gap) calc(var(--gap) * 2);
    border-top: 0;
    background-color: var(--relation-bg);
  }
  .page-archive-single .archive-single-relation-list {
    grid-template-columns: repeat(var(--relation-cols), minmax(0, 1fr));
    row-gap: var(--relation-row-gap);
  }
}
.page-archive-single {
  /* 폰(≤480px)만 한 줄에 하나씩 */
}
@media (max-width: 450px) {
  .page-archive-single {
    --relation-cols: 1;
  }
}

/* ============================================================
 * INDEX (색인) 페이지 — A타입(scatter)
 * ============================================================ */
/* 줌 배율. 등록해두면 --zoom 값 자체가 트랜지션으로 보간되어
   이를 참조하는 calc(크기/위치/폰트)도 부드럽게 애니메이션됩니다. */
@property --zoom {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
/* 진입 시 떠오르며 등장. transform 만 써서 재배치(top/left)·줌과 간섭 없음 */
@keyframes index-tile-in {
  from {
    opacity: 0;
    transform: translateY(var(--intro-rise, 1.6rem));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/*
 * 타일을 옅게 만들 때 쓰는 믹스인.
 * 내용(이미지·캡션)은 opacity 로, 테두리는 outline-color 의 알파로 같은 수치를 맞춥니다.
 * 타일 자체에 opacity 를 걸면 쌓임 맥락이 생겨 호버 승격(z-index)이 먹지 않습니다.
 *
 * --tile-fade 는 "얼마나 옅은가"만 담고, 실제 테두리 알파는 기본 규칙에서
 * --tile-outline-on(모드가 테두리를 쓰는지) 과 곱해집니다. 그래서 테두리가 없는
 * 그리드(--tile-outline-on: 0)에서는 흐려져도 테두리가 되살아나지 않습니다.
 * 흐려지는 방향·돌아오는 방향 모두 지연 없이 바로 시작합니다.
 */
/* 필터에 남은 타일에 찍는 점. 색·크기는 .page-index 의 --filter-dot* 를 씁니다.
   점멸은 배경/테두리 색으로, 노출은 opacity 로 나눠 줌 전환 페이드와 겹치지 않게 합니다. */
@keyframes index-filter-dot-blink {
  0%, 100% {
    background-color: var(--filter-dot);
    border-color: var(--filter-dot-line);
  }
  50% {
    background-color: transparent;
    border-color: transparent;
  }
}
.page-index {
  --zoom: 1;
  /* 필터로 골라진 타일·필터 축에 찍는 점.
     box-sizing 이 border-box 라 1px 테두리가 안쪽을 먹어 0.9rem 으로 잡았습니다. */
  --filter-dot: #f4ed84;
  --filter-dot-line: var(--black);
  --filter-dot-size: 0.9rem;
  /* 캡션 폰트는 줌 2·3 단계 기준값을 잇는 직선, 패딩은 --zoom 에 비례.
     줌 도중 높이가 단계 값 사이를 매끄럽게 오가게 합니다(바운스 방지).
     제목 1.4rem(줌 2)→1.6rem(줌 3), 서브 1.2rem→1.4rem. */
  --cap-title-font: calc(0.2rem * var(--zoom) + 1rem);
  --cap-sub-font: calc(0.2rem * var(--zoom) + 0.8rem);
  --cap-pad-y: calc(0.3rem * var(--zoom));
  --cap-pad-x: calc(0.3rem * var(--zoom));
  --rearrange-dur: 1.2s;
  --hover-label-font: 1.6rem;
  --intro-dur: 0.9s;
  --intro-rise: 1.6rem;
  --index-veil-fade: 8rem;
  --veil-top: calc(var(--index-head-h, 16rem) + var(--index-veil-fade));
  --veil-bottom: var(--index-veil-fade);
  --veil-side: var(--index-veil-fade);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.page-index button {
  color: #000;
}
.page-index .index-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  padding: var(--gap);
}
.page-index .index-page-title {
  font-size: 3.8rem;
  font-weight: 300;
  line-height: 1.4;
  text-transform: uppercase;
}
.page-index {
  /* ----- 툴바 ----- */
}
.page-index .index-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 4rem;
}
.page-index .index-filter {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  flex: 1;
}
.page-index {
  /*
   * 모바일 전용 요소. 태블릿 이하에서만 쓰고 데스크탑에서는 숨깁니다.
   * .index-filter-head / -body 는 감싸기만 하는 상자라 contents 로 풀어
   * 데스크탑의 기존 flex 배치를 그대로 유지합니다.
   */
}
.page-index .index-filter-open,
.page-index .index-filter-close,
.page-index .index-filter-actions {
  display: none;
}
.page-index .index-filter-head,
.page-index .index-filter-body {
  display: contents;
}
.page-index .index-filter-label {
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 3.4rem;
  padding-right: 0.6rem;
}
.page-index .index-filter-group {
  min-width: 12rem;
}
.page-index .index-filter-group[data-axis=exhibition] {
  flex: 1;
  min-width: 22rem;
  max-width: 28rem;
}
.page-index .index-filter-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 3.4rem;
  padding: 0.4rem 1rem;
  background: #fff;
  border: 1px solid #000;
  font: inherit;
  font-size: 1.5rem;
  text-align: left;
  cursor: pointer;
}
.page-index .index-filter-toggle-label {
  flex: 1;
}
.page-index {
  /* 축당 하나만 고를 수 있어 항상 (1) 이라 숫자를 쓰지 않습니다(데스크탑·모바일 공통). */
}
.page-index .index-filter-toggle-count {
  display: none;
}
.page-index .index-filter-count-bracket {
  font-size: 1.2rem;
  font-weight: 400;
  position: relative;
  top: -0.06rem;
}
.page-index .index-filter-count-num {
  font-size: 1.6rem;
  font-weight: 300;
}
.page-index .index-filter-toggle-caret {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  background: url("assets/images/sort_arrow.svg") no-repeat center/contain;
}
.page-index .index-filter-group.is-open .index-filter-toggle-caret {
  transform: rotate(180deg);
}
.page-index .index-filter-dropdown {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
}
.page-index .index-filter-dropdown[hidden] {
  display: none;
}
.page-index .index-filter-dropdown {
  background: #fff;
  border: 1px solid #000;
  max-height: 26rem;
  overflow-y: auto;
}
.page-index .index-filter-option {
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  text-transform: capitalize;
}
@media (hover: hover) and (pointer: fine) {
  .page-index .index-filter-option:hover {
    background: #f2f2f2;
  }
}
.page-index .index-filter-option input {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #000;
  margin-top: 0.3rem;
}
.page-index .index-filter-reset {
  padding: 0.6rem 1rem;
  border: 0;
  border-top: 1px solid #ddd;
  background: none;
  font: inherit;
  font-size: 1.5rem;
  color: #666;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .page-index .index-filter-reset:hover {
    color: #000;
  }
}
.page-index .index-filter-chips {
  grid-column: 1/-1;
  grid-row: 3;
  display: flex; /* 데스크탑 숨김 해제 */
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-right: 8rem;
  /* 선택이 없으면 자리를 차지하지 않게 */
}
.page-index .index-filter-chips:empty {
  display: none;
}
@media (min-width: 1025px) {
  .page-index .index-filter-chips {
    position: absolute;
    top: 8.25rem;
    left: 5.8rem;
    padding-right: 10rem;
    gap: 1rem;
  }
}
.page-index .index-filter-chip {
  display: inline-flex;
  gap: 0.8rem;
  padding: 0.55rem 1rem;
  border: 1px solid #ccc;
  background: var(--white);
  font: inherit;
  font-size: 1.5rem;
  line-height: 1.4;
  cursor: pointer;
  text-align: left;
  border-color: var(--black);
}
@media (max-width: 1024px) {
  .page-index .index-filter-chip {
    font-size: 1.2rem;
    padding: 0.3rem 0.8rem;
    gap: 0.5rem;
  }
}
.page-index {
  /* × 는 글자 대신 선 두 개로 그립니다. 글자는 서체마다 크기가 달라
      정확한 치수를 맞출 수 없어서입니다. */
}
.page-index .index-filter-chip-x {
  --chip-x-size: 1rem;
  flex: 0 0 auto;
  width: var(--chip-x-size);
  height: var(--chip-x-size);
  margin-top: 0.5rem;
}
.page-index .index-filter-chip-x::before, .page-index .index-filter-chip-x::after {
  content: "";
  position: absolute;
  top: 50%;
  /* 대각선 길이(=√2 배)로 늘여 회전 후 상자를 가득 채우게 합니다. */
  left: -20.71%;
  width: 141.42%;
  height: var(--line-width);
  margin-top: calc(var(--line-width) / -2);
  background: currentColor;
}
.page-index .index-filter-chip-x::before {
  transform: rotate(45deg);
}
.page-index .index-filter-chip-x::after {
  transform: rotate(-45deg);
}
@media (max-width: 1024px) {
  .page-index .index-filter-chip-x {
    --chip-x-size: 0.7rem;
  }
}
.page-index .index-tools-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.2rem;
}
.page-index .index-tools {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding-top: 0.5rem;
}
.page-index .index-tool {
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 0;
  background: none no-repeat center/contain;
  cursor: pointer;
  transition: opacity 0.25s ease;
  /* 전환 중 disabled 여도 활성 모드는 진하게, 클릭만 막습니다. */
}
.page-index .index-tool:disabled {
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .page-index .index-tool:hover:not(:disabled) {
    opacity: 0.6;
  }
}
.page-index .index-scatter {
  background-image: url("assets/images/scatter_view.svg");
}
.page-index .index-grid {
  background-image: url("assets/images/grid_view.svg");
}
.page-index {
  /*
   * 지금 쓰고 있는 모드의 버튼이 진하고, 넘어갈 수 있는 쪽이 옅습니다.
   * (scatter 면 격자 버튼이, grid 면 흩뿌림 버튼이 옅어집니다.)
   * 호버하면 조금 진해져 누를 수 있다는 것을 알립니다 — 위 .index-tool:hover 는
   * 이 규칙과 특이도가 같아 밀리므로 여기에 따로 둡니다.
   */
}
.page-index[data-list-type=scatter] .index-grid, .page-index[data-list-type=grid] .index-scatter {
  opacity: 0.25;
}
@media (hover: hover) and (pointer: fine) {
  .page-index[data-list-type=scatter] .index-grid:hover:not(:disabled), .page-index[data-list-type=grid] .index-scatter:hover:not(:disabled) {
    opacity: 0.6;
  }
}
.page-index {
  /* ----- 캔버스 ----- */
}
.page-index .index-canvas {
  flex: 1;
  position: relative;
  z-index: 0;
  min-height: calc(100vh - 16rem);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  /*
   * 진입 페이드인. .is-intro 는 서버가 붙임(안 붙이면 배치 전 좌상단에 겹쳐 번쩍임).
   * 배치 후 script.js 가 .is-intro-run 으로 교체해 재생.
   */
}
.page-index .index-canvas.is-intro .index-tile {
  opacity: 0;
}
.page-index .index-canvas.is-intro-run .index-tile {
  animation: index-tile-in var(--intro-dur, 0.9s) cubic-bezier(0.215, 0.61, 0.355, 1) var(--intro-delay, 0ms) backwards;
}
.page-index .index-canvas.is-intro .index-tile, .page-index .index-canvas.is-intro-run .index-tile {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-index .index-canvas.is-intro .index-tile, .page-index .index-canvas.is-intro-run .index-tile {
    opacity: 1;
    animation: none;
  }
}
.page-index .index-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, 0) 100%), linear-gradient(to top, #fff 0, rgba(255, 255, 255, 0) 100%), linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%), linear-gradient(to left, #fff 0, rgba(255, 255, 255, 0) 100%);
  background-position: top, bottom, left, right;
  background-size: 100% var(--veil-top), 100% var(--veil-bottom), var(--veil-side) 100%, var(--veil-side) 100%;
  opacity: 1;
  /*
   * 목록 타입을 바꿀 때 페이드 두께를 0으로 꺾으면 한 프레임에 꺼져
   * display 를 토글한 것처럼 보입니다. 두께는 그대로 두고 opacity 만 옮깁니다.
   * 길이는 재배치·모드 전환 공통(--rearrange-dur)과 맞춥니다.
   */
  transition: opacity var(--rearrange-dur) ease;
}
@media (prefers-reduced-motion: reduce) {
  .page-index .index-canvas::after {
    transition: none;
  }
}
.page-index .index-canvas.is-panning {
  cursor: grabbing;
}
.page-index .index-canvas.is-shuffling .index-tile {
  pointer-events: none;
  transition: z-index 0s 0s, opacity var(--rearrange-dur) cubic-bezier(0.215, 0.61, 0.355, 1), top var(--rearrange-dur) cubic-bezier(0.215, 0.61, 0.355, 1), left var(--rearrange-dur) cubic-bezier(0.215, 0.61, 0.355, 1), width var(--rearrange-dur) cubic-bezier(0.215, 0.61, 0.355, 1), outline-color var(--rearrange-dur) cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}
.page-index .index-canvas {
  /*
   * 목록 타입 전환의 첫 프레임.
   * 타일은 .index-canvas-inner 기준으로 절대 배치되는데, inner 자체가 scatter 에선
   * 팬 위치(--pan-x/y)에, grid 에선 캔버스 원점에 있습니다. 기준 상자가 그 순간 통째로
   * 옮겨가므로 left/top 값을 그대로 두면 화면상 위치가 그만큼 튑니다. 그래서 전환 직후
   * 한 프레임만 "지금 보이는 자리"로 좌표를 고쳐 꽂는데, 이때 트랜지션이 걸려 있으면
   * 그 보정 자체가 애니메이션돼(= 튄 만큼 다시 미끄러져) 보이므로 꺼 둡니다.
   * 호버·active 규칙까지 이겨야 해서 !important 가 필요합니다.
   *
   * 단 outline-color 는 남겨 둡니다. 테두리 색을 바꾸는 건 data-list-type 전환 그
   * 자체이고 그게 바로 이 프레임에 일어나므로, 여기서 같이 꺼 버리면 색이 전환되기도
   * 전에 끝까지 튀어 버립니다(= 색 트랜지션이 아예 보이지 않음).
   */
}
.page-index .index-canvas.is-mode-seeding .index-tile {
  transition: outline-color var(--rearrange-dur) ease !important;
}
.page-index .index-canvas-inner {
  position: absolute;
  top: var(--pan-y, 0px);
  left: var(--pan-x, 0px);
  width: calc(var(--field-w, 100%) * var(--zoom));
  height: calc(var(--field-h, 100%) * var(--zoom));
}
.page-index .index-empty {
  position: absolute;
  top: 4rem;
  left: 0;
  font-size: 1.4rem;
  color: #999;
}
.page-index .index-tile {
  --tile-base: 8.2rem;
  position: absolute;
  top: calc(var(--tile-top, 0px) * var(--zoom));
  left: calc(var(--tile-left, 0px) * var(--zoom));
  width: calc(var(--tile-base) * var(--zoom));
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  /*
   * 테두리는 border 가 아니라 outline. border 는 box-sizing: border-box 에서
   * 안쪽 content 를 1px 씩 깎아, script.js 가 계산한 --gt-w/--tile-base 보다
   * 이미지가 2px 작게 그려집니다. outline 은 레이아웃을 건드리지 않습니다.
   * button 의 기본 테두리(투명 1px)도 같은 만큼 폭을 먹으므로 함께 지웁니다.
   */
  border: 0 !important;
  /*
   * 테두리 알파 = 모드가 테두리를 쓰는지(--tile-outline-on) × 흐림 정도(--tile-fade).
   * 곱으로 두면 흐림 규칙은 --tile-fade 만 건드리면 되고, 테두리를 안 쓰는 그리드는
   * --tile-outline-on: 0 하나로 어떤 흐림 상태에서도 테두리가 보이지 않습니다.
   */
  --tile-outline-on: 1;
  --tile-fade: 1;
  outline: 1px solid rgb(0 0 0 / calc(var(--tile-outline-on) * var(--tile-fade)));
  /*
   * 여기(= scatter 기본)에는 left/top/width 전환을 넣지 않습니다.
   * scatter 의 타일 좌표는 줌·팬 루프가 매 프레임 --zoom/--pan-* 로 직접 그리는데,
   * 전환이 걸려 있으면 타일만 0.3s 늦게 따라옵니다. 팬(inner)은 즉시 움직이므로
   * 둘이 어긋나 타일이 곡선을 그리며 돌아가는 것처럼 보입니다.
   * 재배치 애니메이션은 .is-shuffling, 그리드 전환은 grid 쪽 규칙이 따로 담당합니다.
   */
  transition: opacity 0.3s ease, outline-color 0.3s ease;
  background-color: #fff;
}
.page-index .index-tile:not(.is-dimmed).is-active {
  z-index: 9998 !important;
}
@media (hover: hover) and (pointer: fine) {
  .page-index .index-tile:not(.is-dimmed):hover {
    z-index: 9999 !important;
    transition: opacity 0.25s ease, z-index 0s 0.18s;
  }
}
.page-index .index-tile.is-dimmed {
  --tile-fade: 0.18;
}
.page-index .index-tile.is-dimmed .index-tile-image,
.page-index .index-tile.is-dimmed .index-tile-caption {
  opacity: 0.18;
  transition: opacity 0.3s ease 0s;
}
.page-index .index-tile.is-dimmed {
  pointer-events: none;
}
.page-index {
  /*
   * .is-dimmed(필터)·그리드 호버 흐림은 tile-fade 로 내용에만 opacity 를 겁니다.
   * scatter 호버/액티브 흐림도 같은 방식입니다. 타일 자체에 opacity 를 걸면
   * 겹친 뒤쪽 타일이 비쳐 보이므로, 흰 배경은 불투명하게 두고 내용·테두리만 옅게 합니다.
   */
}
.page-index .index-tile-image,
.page-index .index-tile-caption {
  transition: opacity 0.3s ease;
}
.page-index[data-list-type=scatter] .index-canvas:not(.is-shuffling) .index-canvas-inner:has(.index-tile.is-active) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active):not(.is-dimmed) {
  --tile-fade: 0.5;
}
.page-index[data-list-type=scatter] .index-canvas:not(.is-shuffling) .index-canvas-inner:has(.index-tile.is-active) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active):not(.is-dimmed) .index-tile-image,
.page-index[data-list-type=scatter] .index-canvas:not(.is-shuffling) .index-canvas-inner:has(.index-tile.is-active) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active):not(.is-dimmed) .index-tile-caption {
  opacity: 0.5;
  transition: opacity 0.3s ease 0s;
}
.page-index[data-list-type=scatter] .index-canvas:not(.is-shuffling) .index-canvas-inner:has(.index-tile.is-active) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active):not(.is-dimmed) {
  transition: outline-color 0.3s ease;
}
.page-index[data-list-type=scatter] .index-canvas:not(.is-shuffling) .index-canvas-inner:has(.index-tile.is-active) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active):not(.is-dimmed) .index-tile-caption {
  transition: opacity 0.3s ease 0s, height 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media (hover: hover) and (pointer: fine) {
  .page-index[data-list-type=scatter] .index-canvas:not(.is-shuffling) .index-canvas-inner:is(:has(.index-tile:hover), .is-hover-holding) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active):not(.is-dimmed) {
    --tile-fade: 0.5;
  }
  .page-index[data-list-type=scatter] .index-canvas:not(.is-shuffling) .index-canvas-inner:is(:has(.index-tile:hover), .is-hover-holding) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active):not(.is-dimmed) .index-tile-image,
  .page-index[data-list-type=scatter] .index-canvas:not(.is-shuffling) .index-canvas-inner:is(:has(.index-tile:hover), .is-hover-holding) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active):not(.is-dimmed) .index-tile-caption {
    opacity: 0.5;
    transition: opacity 0.3s ease 0s;
  }
  .page-index[data-list-type=scatter] .index-canvas:not(.is-shuffling) .index-canvas-inner:is(:has(.index-tile:hover), .is-hover-holding) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active):not(.is-dimmed) {
    transition: outline-color 0.3s ease;
  }
  .page-index[data-list-type=scatter] .index-canvas:not(.is-shuffling) .index-canvas-inner:is(:has(.index-tile:hover), .is-hover-holding) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active):not(.is-dimmed) .index-tile-caption {
    transition: opacity 0.3s ease 0s, height 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}
.page-index .index-tile-image {
  display: block;
  overflow: hidden;
  background: #ededed;
}
.page-index .index-tile-image img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.page-index .index-tile-image img.is-loaded {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .page-index .index-tile-image img {
    opacity: 1;
    transition: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .page-index .index-tile:not(.is-dimmed):hover .index-tile-image img {
    transform: scale(1.05);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .page-index .index-tile:not(.is-dimmed):hover .index-tile-image img {
    transform: none;
  }
}
.page-index .index-tile-caption {
  display: none;
  overflow: hidden;
  text-align: left;
  background: var(--white);
  opacity: 1;
  /*
   * 펼침: 바깥 height 만 0→콘텐츠 높이(script.js 가 px 로 지정).
   * body 는 항상 최종 크기라 텍스트 위치가 바뀌지 않고, 클리핑 창만 열립니다.
   */
  height: auto;
  transition: height 0.42s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.3s ease;
}
.page-index .index-tile-caption-body {
  display: block;
  padding: var(--cap-pad-y) var(--cap-pad-x);
}
.page-index .index-tile-title {
  display: block;
  font-size: var(--cap-title-font);
  font-weight: 600;
  line-height: 1.3;
}
.page-index .index-tile-sub {
  display: none;
  margin-top: 0.3em;
  font-size: var(--cap-sub-font);
  line-height: 1.35;
  opacity: 1;
  transition: opacity 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.page-index.is-sub-hidden .index-tile-sub {
  opacity: 0;
}
.page-index.is-sub-measuring .index-tile-sub {
  position: absolute;
  visibility: hidden;
}
.page-index .index-tile-exhibition {
  flex: 1;
}
.page-index .index-tile-year {
  display: block;
}
.page-index[data-stage="2"] .index-tile-caption {
  display: block;
}
.page-index[data-stage="3"] .index-tile-caption {
  display: block;
}
.page-index[data-stage="3"] .index-tile-sub {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1em;
}
.page-index {
  /*
   * 1단계: 제목을 타일에 붙이고 호버 때만 opacity.
   * 타일과 같이 움직이므로 팬·관성에도 테두리 왼쪽 변이 맞습니다.
   * outline 1px 은 박스 밖이라 left / margin-top 으로 바깥 변에 맞춥니다.
   */
}
.page-index[data-list-type=scatter][data-stage="1"] .index-tile-caption {
  display: block;
  position: absolute;
  left: -2px;
  top: 100%;
  margin-top: 1px;
  width: -moz-max-content;
  width: max-content;
  max-width: 22rem;
  background: transparent;
  overflow: visible;
  pointer-events: none;
  opacity: 0 !important;
  height: auto;
  z-index: 1;
  transition: opacity 0.15s ease !important;
}
.page-index[data-list-type=scatter][data-stage="1"] .index-tile-caption-body {
  padding: 0.5rem 0 0;
}
.page-index[data-list-type=scatter][data-stage="1"] .index-tile-title {
  font-size: var(--hover-label-font);
  line-height: 1.35;
}
.page-index[data-list-type=scatter][data-stage="1"] .index-canvas.is-shuffling .index-tile-caption {
  opacity: 0 !important;
}
@media (hover: hover) and (pointer: fine) {
  .page-index[data-list-type=scatter][data-stage="1"] .index-tile:not(.is-dimmed):hover .index-tile-caption {
    opacity: 1 !important;
  }
}
.page-index[data-list-type=scatter][data-stage="1"] .index-tile:not(.is-dimmed).is-active .index-tile-caption {
  opacity: 1 !important;
}
.page-index[data-list-type=scatter][data-stage="1"].is-zooming .index-tile-caption,
.page-index[data-list-type=scatter][data-stage="1"].is-zooming .index-tile:not(.is-dimmed):hover .index-tile-caption,
.page-index[data-list-type=scatter][data-stage="1"].is-zooming .index-tile:not(.is-dimmed).is-active .index-tile-caption {
  opacity: 0 !important;
  transition: none !important;
}
.page-index[data-list-type=scatter][data-stage="1"].is-zooming.is-hover-fading .index-tile-caption,
.page-index[data-list-type=scatter][data-stage="1"].is-zooming.is-hover-fading .index-tile:not(.is-dimmed):hover .index-tile-caption,
.page-index[data-list-type=scatter][data-stage="1"].is-zooming.is-hover-fading .index-tile:not(.is-dimmed).is-active .index-tile-caption {
  transition: opacity 0.15s ease !important;
}
.page-index {
  /*
   * grid → scatter 복귀: 재배치가 끝날 때까지 바깥 높이만 0.
   * 줌 1(접힘)↔2(title)↔3(title+sub) 는 animateCaptionStage() 가 height 보간.
   */
}
.page-index.is-caption-reveal[data-stage="2"] .index-tile-caption, .page-index.is-caption-reveal[data-stage="3"] .index-tile-caption {
  height: 0;
  transition: none;
}
.page-index {
  /*
   * 2·3 → 1 접힘: 텍스트는 이미지 하단(캡션 위쪽)에 붙인 채 바깥 height 만 줄입니다.
   * 그대로 두면 클리핑 경계가 글자를 가르고 잘린 획이 하단 outline 에 붙어 라인이
   * 끊겨 보이므로, 경계가 글자에 닿기 전에 흐려 둡니다(0.18s < 접힘 0.42s).
   * 호버/액티브 흐림 규칙보다 우선해야 해서 !important.
   * 줌아웃 중엔 타일 폭이 폰트보다 빨리 줄어 제목이 두 줄로 넘어가 첫 줄 글자가
   * 바뀌어 튀므로, 접히는 동안만 줄바꿈을 막습니다(넘치는 끝은 잘림).
   */
}
.page-index.is-caption-collapsing .index-tile-caption {
  opacity: 0 !important;
  transition: height 0.42s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.18s ease !important;
}
.page-index.is-caption-collapsing .index-tile-caption-body {
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .page-index .index-tile-caption {
    transition: none;
  }
  .page-index .index-tile-image::after,
  .page-index .index-tile-title::after {
    animation: none;
    background-color: var(--filter-dot);
    border-color: var(--filter-dot-line);
  }
}
.page-index {
  /*
   * 필터에 남은 타일(.is-filtered 이고 .is-dimmed 가 아닌 것)에만 점멸 점.
   * 이미지·제목 점을 둘 다 두고, script.js 의 is-filter-dot-* 가 opacity 만
   * 바꿔 줌 전환 때 교차 페이드합니다(캡션 display 타이밍과 어긋나지 않게).
   * 그리드는 캡션이 없으므로 항상 이미지 점만 켭니다.
   */
}
.page-index.is-filtered {
  --filter-dot-fade: 0.4s;
}
.page-index.is-filtered .index-tile:not(.is-dimmed) .index-tile-image::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: var(--filter-dot-size);
  height: var(--filter-dot-size);
  border: var(--line-width) solid var(--filter-dot-line);
  border-radius: 50%;
  background: var(--filter-dot);
  pointer-events: none;
  opacity: 0;
  animation: index-filter-dot-blink 1.4s ease-in-out infinite;
  transition: opacity var(--filter-dot-fade, 0.4s) ease;
  top: 0.5rem;
  right: 0.5rem;
}
.page-index.is-filtered[data-list-type=scatter] .index-tile:not(.is-dimmed) .index-tile-title {
  padding-right: 0;
  transition: padding-right var(--filter-dot-fade) ease;
}
.page-index.is-filtered[data-list-type=scatter] .index-tile:not(.is-dimmed) .index-tile-title::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: var(--filter-dot-size);
  height: var(--filter-dot-size);
  border: var(--line-width) solid var(--filter-dot-line);
  border-radius: 50%;
  background: var(--filter-dot);
  pointer-events: none;
  opacity: 0;
  animation: index-filter-dot-blink 1.4s ease-in-out infinite;
  transition: opacity var(--filter-dot-fade, 0.4s) ease;
  top: calc(var(--filter-dot-size) / 2);
  right: 0;
}
.page-index.is-filtered.is-filter-dot-image .index-tile:not(.is-dimmed) .index-tile-image::after {
  opacity: 1;
}
.page-index.is-filtered.is-filter-dot-title[data-list-type=scatter] .index-tile:not(.is-dimmed) .index-tile-title {
  padding-right: calc(var(--filter-dot-size) + 0.4rem);
}
.page-index.is-filtered.is-filter-dot-title[data-list-type=scatter] .index-tile:not(.is-dimmed) .index-tile-title::after {
  opacity: 1;
}
.page-index .index-zoom {
  display: flex;
  flex-direction: column;
  background: #fff;
  position: absolute;
  top: 4.9rem;
  right: 0;
  z-index: 5;
}
.page-index .index-zoom-btn {
  width: 3rem;
  height: 3rem;
  border: 1px solid #000;
  background: none no-repeat center/1.6rem 1.6rem;
  background-color: #fff;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
}
.page-index .index-zoom-btn + .page-index .index-zoom-btn {
  border-top: 1px solid #000;
}
.page-index .index-zoom-btn:disabled {
  opacity: 0.25;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .page-index .index-zoom-btn:hover:not(:disabled) {
    border-color: #fff;
    filter: invert(1);
  }
}
.page-index .index-zoom-in {
  background-image: url("assets/images/zoom_in.svg");
}
.page-index .index-zoom-out {
  background-image: url("assets/images/zoom_out.svg");
  margin-top: -1px;
}
.page-index {
  /* ----- B타입(grid) 최소 대응 ----- */
}
.page-index[data-list-type=grid] {
  --grid-tile-w: 4.8rem;
  --grid-gap: 1rem;
}
.page-index[data-list-type=grid] .index-canvas::after {
  opacity: 0;
}
.page-index[data-list-type=grid] .index-canvas {
  cursor: default;
  overflow: visible;
  touch-action: auto;
  /*
   * 헤더를 피하는 상단·좌우 여백은 여기(padding)가 아니라 script.js 의
   * gridLayout() 이 좌표에 직접 더합니다. padding 을 주면 타일의 기준 상자인
   * .index-canvas-inner 가 안쪽으로 밀리는데, 모드 전환 보정이 캔버스 원점을
   * 기준으로 좌표를 잡아두기 때문에 그만큼 위치가 튑니다.
   */
  transition: height 0.3s ease;
}
.page-index[data-list-type=grid] .index-canvas-inner {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
}
.page-index[data-list-type=grid] .index-tile {
  /*
   * 위치·크기는 script.js 의 gridLayout() 이 --gt-* 로 지정합니다.
   * 칸(column)은 왼쪽부터 순서대로 채우다가 확대된(2칸) 타일이 남은 자리에
   * 안 들어가면 다음 줄로 줄바꿈되고(= grid auto-placement 와 같은 sparse 방식),
   * 줄 높이는 그 줄에서 가장 높은 타일을 따라갑니다. top/left/width/height 를
   * 직접 바꾸는 것이라(= grid-column span 과 달리) transition 으로 애니메이션됩니다.
   */
  position: absolute;
  top: var(--gt-top, 0px);
  left: var(--gt-left, 0px);
  width: var(--gt-w, var(--grid-tile-w));
  height: var(--gt-h, var(--grid-tile-w));
  --tile-outline-on: 0;
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease, outline-color 0.3s ease;
}
.page-index[data-list-type=grid] {
  /*
   * scatter → grid 전환 직후 첫 배치만 --rearrange-dur 로 깔아줍니다(script.js 가
   * gridLayout() 호출 전후로 이 클래스를 잠깐 붙임). 호버 확대(0.3s)와는
   * 속도를 분리하기 위해 별도 규칙으로 둡니다.
   */
}
.page-index[data-list-type=grid] .index-canvas.is-mode-switching .index-tile {
  transition: left var(--rearrange-dur) ease, top var(--rearrange-dur) ease, width var(--rearrange-dur) ease, height var(--rearrange-dur) ease, opacity 0.3s ease, outline-color 0.3s ease;
}
.page-index[data-list-type=grid] .index-tile-image {
  height: 100%;
}
.page-index[data-list-type=grid] {
  /*
   * width·height 가 각각 따로 애니메이션되는 동안(특히 scatter→grid 진입 직후)
   * 타일 비율이 이미지의 실제 비율과 잠깐 어긋납니다. object-fit 기본값은 fill
   * (= 틀에 맞춰 늘이고 줄임) 이라 그 순간 이미지가 찌그러져 보였습니다.
   * cover 로 바꾸면 틀과 비율이 달라도 이미지는 늘어나지 않고 잘리기만 합니다
   * (최종 정지 상태에선 둘 다 똑같이 보입니다 — gridLayout() 이 이미 실제 비율대로
   * 높이를 계산해 두기 때문).
   */
}
.page-index[data-list-type=grid] .index-tile-image img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.page-index[data-list-type=grid] .index-tile:not(.is-dimmed).is-active {
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.15s ease 0s, z-index 0s 0s, outline-color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .page-index[data-list-type=grid] .index-tile:not(.is-dimmed):hover {
    transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.15s ease 0s, z-index 0s 0s, outline-color 0.3s ease;
  }
}
.page-index[data-list-type=grid] .index-canvas-inner:has(.index-tile.is-active) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active) {
  --tile-fade: 0.18;
}
.page-index[data-list-type=grid] .index-canvas-inner:has(.index-tile.is-active) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active) .index-tile-image,
.page-index[data-list-type=grid] .index-canvas-inner:has(.index-tile.is-active) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active) .index-tile-caption {
  opacity: 0.18;
  transition: opacity 0.3s ease 0s;
}
@media (hover: hover) and (pointer: fine) {
  .page-index[data-list-type=grid] .index-canvas-inner:is(:has(.index-tile:hover), .is-hover-holding) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active) {
    --tile-fade: 0.18;
  }
  .page-index[data-list-type=grid] .index-canvas-inner:is(:has(.index-tile:hover), .is-hover-holding) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active) .index-tile-image,
  .page-index[data-list-type=grid] .index-canvas-inner:is(:has(.index-tile:hover), .is-hover-holding) .index-tile:not(:hover):not(.is-hover-hold):not(.is-active) .index-tile-caption {
    opacity: 0.18;
    transition: opacity 0.3s ease 0s;
  }
}
.page-index[data-list-type=grid] .index-tile-caption {
  display: none;
}
.page-index[data-list-type=grid] .index-zoom {
  display: none;
}
.page-index {
  /* =====================================================================
   * 태블릿 이하(≤1024px) — 모바일 시안
   * ※ 이 블록은 .page-index 의 맨 끝에 있어야 합니다.
   *   미디어쿼리는 특이도를 올리지 않아, 위에 두면 아래 데스크탑 규칙에 밀립니다.
   * ===================================================================== */
}
@media (max-width: 1024px) {
  .page-index {
    /* 필터 화면이 뜨고 지는 시간. 헤더 z-index 타이밍도 이 값에 맞춥니다. */
    --filter-fade: 0.25s;
    /* 선택된 필터 항목 배경 */
    --filter-on-bg: rgba(244, 237, 132, 0.33);
    /* 필터 화면에서 선택이 있는 축에 찍는 점.
       box-sizing 이 border-box 라 1px 테두리가 안쪽을 먹어 0.9rem 으로 잡았습니다. */
    --filter-dot: #f4ed84;
    --filter-dot-line: var(--black);
    --filter-dot-size: 0.9rem;
    /* 헤더: 제목 + 도구 한 줄, 그 아래 Filter 버튼, 그 아래 칩 */
  }
  .page-index .index-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 0.8rem 1.5rem;
  }
  .page-index .index-toolbar {
    display: contents;
  }
  .page-index .index-page-title {
    grid-column: 1;
    grid-row: 1;
  }
  .page-index .index-tools-group {
    grid-column: 2;
    grid-row: 1/span 2;
  }
  .page-index {
    /*
     * 목록 보기: 화면 폭과 상관없이 한 줄에 정확히 6개.
     * 예전에는 393px 에 맞춰 타일 폭(5.7rem)을 손으로 계산해 뒀는데,
     * 고정값이라 그 폭에서만 맞고 조금만 좁아지면 5개로 줄바꿈됐습니다.
     * flex + calc 로 폭을 나눠도 소수점이 남으면 6번째가 밀려나므로,
     * 남는 소수점까지 트랙이 알아서 나눠 갖는 grid 를 씁니다.
     */
  }
  .page-index[data-list-type=grid] {
    --grid-gap: 0.5rem;
  }
  .page-index {
    /* 호버가 없는 환경이라 1단계 제목 캡션을 쓰지 않습니다. */
  }
  .page-index[data-list-type=scatter][data-stage="1"] .index-tile-caption {
    display: none;
  }
  .page-index .index-filter-open {
    grid-column: 1;
    grid-row: 2;
    /* 데스크탑에서 숨겨둔 것을 여기서 다시 켭니다. */
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 1.8rem;
    font-weight: 300;
    cursor: pointer;
  }
  .page-index {
    /* Filter 글자만 살짝 올립니다. 값 하나로 조절하세요. */
  }
  .page-index .index-filter-open-label {
    --label-nudge: -0.08rem;
    transform: translateY(var(--label-nudge));
  }
  .page-index {
    /* 괄호는 숫자보다 작게, 둘을 세로 가운데로 맞춥니다.
       크기는 아래 두 값만 바꾸면 됩니다. */
  }
  .page-index .index-filter-open-count {
    --count-bracket-fs: 1.4rem;
    --count-num-fs: 1.8rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }
  .page-index .index-filter-open-count .index-filter-count-bracket {
    font-size: var(--count-bracket-fs);
    /* 데스크탑 규칙의 top 보정은 여기서 쓰지 않습니다(정렬은 flex 가 담당). */
    top: 0;
  }
  .page-index .index-filter-open-count .index-filter-count-num {
    font-size: var(--count-num-fs);
  }
  .page-index .index-filter-open-caret {
    /*
     * "Filter" 는 디센더가 없어 글자 잉크가 줄상자 위쪽에 쏠립니다.
     * 상자 기준 정렬(align-items:center)만으로는 캐럿이 아래로 처져 보여
     * 광학 보정을 둡니다. 실측 차이 0.88px.
     */
    --caret-nudge: -0.09rem;
    width: 1.6rem;
    height: 1.6rem;
    transform: translateY(var(--caret-nudge));
    background: url("assets/images/sort_arrow.svg") no-repeat center/contain;
  }
  .page-index {
    /* ----- 필터 화면(상단 바를 뺀 나머지를 전부 덮음) ----- */
  }
  .page-index .index-filter {
    position: fixed;
    top: var(--mobile-bar-h);
    /* 아래 끝까지. 초기화·적용 버튼이 화면 하단에 붙도록 하단 줄도 덮습니다
       (그리드 마지막 행이라 컨테이너가 늘어나면 따라 내려갑니다). */
    bottom: 0;
    left: 0;
    right: 0;
    /*
     * 헤더 안에서의 순서입니다. 바깥(하단 줄 등)과의 비교는 이 값이 아니라
     * 아래 .is-filter-open .index-header 가 정합니다 — 헤더가 쌓임 맥락을
     * 만들기 때문입니다.
     */
    z-index: 6;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 1.6rem;
    padding: var(--gap);
    background: rgba(255, 255, 255, 0.5);
    /* 시안처럼 뒤 캔버스가 흐리게 비치도록 */
    backdrop-filter: blur(20px);
    opacity: 0;
    /*
     * display:none 은 전환이 되지 않아 visibility 로 감춥니다.
     * 닫힌 동안 터치도, 키보드 초점도 들어가지 않습니다.
     * visibility 는 페이드가 끝난 뒤에 바뀌도록 지연을 줍니다.
     */
    visibility: hidden;
    transition: opacity var(--filter-fade) ease, visibility 0s var(--filter-fade);
  }
  .page-index.is-filter-open .index-filter {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--filter-fade) ease, visibility 0s 0s;
  }
  .page-index {
    /*
     * 필터 화면은 .index-header 안에 있는데, 헤더가 z-index:50 으로 쌓임 맥락을
     * 만듭니다. 그 안에서 z-index 를 아무리 올려도 바깥과는 비교되지 않아
     * 하단 줄(.mobile-footer, 120)에 계속 덮였습니다. 그래서 맥락을 만드는
     * 헤더 쪽을 올립니다.
     *  - 상단 바도 120 이지만 .container 가 바 높이만큼 내려와 있어 겹치지 않습니다.
     *  - 작품 팝업(200)·그 뒤 레이어(190)보다는 낮게 둡니다.
     * 필터를 열었을 때만 올려, 평소 헤더의 쌓임 순서는 건드리지 않습니다.
     */
  }
  .page-index .index-header {
    /* 닫힐 때 필터가 사라지는 동안에도 위에 있어야 합니다.
       먼저 내려가면 페이드 도중 하단 줄이 앞으로 튀어나옵니다. */
    transition: z-index 0s var(--filter-fade);
  }
  .page-index.is-filter-open .index-header {
    z-index: 130;
    transition: z-index 0s 0s;
  }
  .page-index .index-filter-head {
    display: flex; /* 데스크탑의 contents 해제 */
    align-items: center;
    justify-content: space-between;
  }
  .page-index .index-filter-label {
    font-size: 1.8rem;
    line-height: 1.4;
    padding-right: 0;
  }
  .page-index .index-filter-close {
    display: block; /* 데스크탑 숨김 해제 */
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    font-size: 0;
    background: none;
    cursor: pointer;
  }
  .page-index .index-filter-close::before, .page-index .index-filter-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 15%;
    width: 70%;
    height: var(--line-width);
    background: var(--black);
  }
  .page-index .index-filter-close::before {
    transform: rotate(45deg);
  }
  .page-index .index-filter-close::after {
    transform: rotate(-45deg);
  }
  .page-index {
    /* 왼쪽=축 목록 / 오른쪽=선택지 */
  }
  .page-index .index-filter-body {
    display: grid;
    grid-template-columns: minmax(7rem, 20%) 1fr;
    /* 축 3줄은 내용만큼, 마지막 1fr 이 남은 높이를 받아 선택지 칸이 끝까지 내려갑니다. */
    grid-template-rows: auto auto auto minmax(0, 1fr);
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
    /* stretch 만으로는 선택지 길이만큼 늘어나 아래 버튼줄을 덮습니다.
       높이를 격자 칸에 고정해야 안쪽에서 스크롤됩니다. */
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .page-index .index-filter-group {
    display: contents;
    min-width: 0;
  }
  .page-index .index-filter-toggle {
    grid-column: 1;
    align-self: start;
    min-height: 0;
    padding: 0.6rem 0;
    border: 0;
    background: none;
    font-size: 1.5rem;
  }
  .page-index {
    /* 선택이 있는 축에 연두 점 */
  }
  .page-index .index-filter-group.has-selection .index-filter-toggle::after {
    content: "";
    flex: 0 0 auto;
    width: var(--filter-dot-size);
    height: var(--filter-dot-size);
    border: var(--line-width) solid var(--filter-dot-line);
    border-radius: 50%;
    background: var(--filter-dot);
  }
  .page-index .index-filter-toggle-caret {
    display: none;
  }
  .page-index .index-filter-dropdown {
    position: static;
    grid-column: 2;
    grid-row: 1/-1;
    min-height: 0;
    /* 데스크탑의 26rem 제한 해제 — 여기서는 칸 높이만큼 씁니다. */
    max-height: none;
    overflow-y: auto;
    border: 0;
    background: none;
  }
  .page-index .index-filter-option {
    padding: 0.7rem 1rem;
    font-size: 1.5rem;
    align-items: center;
    /* 시안에는 라디오 동그라미가 없습니다(선택은 배경+체크로 표시). */
  }
  .page-index .index-filter-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    margin-top: 0;
  }
  .page-index .index-filter-option {
    /* 선택된 항목: 연두 33% 배경 + 체크 */
  }
  .page-index .index-filter-option:has(input:checked) {
    background: var(--filter-on-bg);
  }
  .page-index .index-filter-option {
    /* 체크 표시는 별도 아이콘 없이 테두리 두 변으로 그립니다. */
  }
  .page-index .index-filter-option:has(input:checked)::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 1.1rem;
    height: 0.6rem;
    border-left: var(--line-width) solid var(--black);
    border-bottom: var(--line-width) solid var(--black);
    transform: rotate(-45deg) translate(0.1rem, -0.15rem);
  }
  .page-index {
    /* 축마다 있던 초기화는 아래 공용 버튼으로 대체 */
  }
  .page-index .index-filter-reset {
    display: none;
  }
  .page-index .index-filter-actions {
    display: grid; /* 데스크탑 숨김 해제 */
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }
  .page-index .index-filter-actions button {
    padding: 0.6rem 1.2rem;
    border: 1px solid #000;
    background: var(--white);
    font: inherit;
    font-size: 1.5rem;
    cursor: pointer;
  }
}
@media (max-width: 1024px) and (max-width: 720px) {
  .page-index .index-filter-actions button {
    background-color: rgba(244, 237, 132, 0.5);
    border: none;
    border-radius: 5px;
  }
}

/* ----- 작품 정보 팝업 ----- */
/*
 * 팝업 뒤를 덮는 레이어(모바일 전용).
 * 데스크탑은 오른쪽 서랍이라 화면 전체를 가릴 이유가 없어 쓰지 않습니다.
 * 여닫힘은 body.index-popup-open 으로만 움직입니다 — 팝업의 hidden 토글과
 * 따로 관리하지 않아도 되고, 닫기는 script.js 의 "패널 바깥 클릭" 이 처리합니다.
 */
.index-popup-backdrop {
  display: none;
}

@media (max-width: 1024px) {
  .index-popup-backdrop {
    --popup-veil: rgba(255, 255, 255, 0.55);
    display: block;
    position: fixed;
    inset: 0;
    /* 팝업(200) 바로 아래. */
    z-index: 190;
    background: var(--popup-veil);
    /* -webkit- : 아직 접두사가 필요한 사파리 버전이 있습니다. */
    backdrop-filter: blur(5px);
    opacity: 0;
    /* 닫힌 동안에는 터치를 가로채면 안 됩니다. */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
  }
  body.index-popup-open .index-popup-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s 0s;
  }
}
.index-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: var(--header-width);
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  border-left: 1px solid var(--black);
  overflow-y: auto;
  /*
   * 태블릿 이하: 화면을 덮는 서랍이 아니라 좌우 여백을 둔 상자입니다.
   * 옆에서 밀려오는 대신 제자리에서 살짝 떠오르며 나타납니다.
   * ※ 반드시 위 선언들보다 아래에(미디어쿼리는 특이도를 올리지 않음).
   */
}
@media (max-width: 1024px) {
  .index-popup {
    --popup-inset: 1.8rem;
    /*
     * INDEX 제목이 팝업 위로 은근히 드러나도록 그만큼 내려 잡습니다.
     *   상단 바 + 헤더 위 여백(--gap) + 제목 높이(3.8rem × line-height 1.4 ≈ 5.4rem)
     * 제목 크기를 바꾸면 5.4rem 도 같이 맞춰 주세요.
     */
    --popup-top: calc(var(--mobile-bar-h) + var(--gap) + 5.4rem + var(--popup-inset));
    top: var(--popup-top);
    right: auto;
    bottom: auto;
    left: 50%;
    /* 좌우 inset 을 지키며 최대 42rem, 가운데 정렬. */
    width: min(42rem, 100% - 2 * var(--popup-inset));
    max-width: 42rem;
    /* 내용이 길면 상자 안에서만 스크롤됩니다(상단 바·하단 줄은 그대로 보입니다). */
    max-height: calc(100dvh - var(--popup-top) - var(--mobile-footer-h) - var(--popup-inset));
    border: 1px solid var(--black);
    transform: translate(-50%, 1.6rem);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
}
.index-popup {
  /* phone_large 이하: 최대 너비 제한 없이 좌우 inset 만큼만 비운 전체 폭. */
}
@media (max-width: 720px) {
  .index-popup {
    left: var(--popup-inset);
    right: var(--popup-inset);
    width: auto;
    max-width: none;
    transform: translateY(1.6rem);
  }
}
.index-popup[hidden] {
  display: none;
}
.index-popup.is-open {
  transform: translateX(0);
}
@media (max-width: 1024px) {
  .index-popup.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
@media (max-width: 720px) {
  .index-popup.is-open {
    transform: translateY(0);
  }
}
.index-popup button {
  color: #000;
}
.index-popup .index-popup-panel {
  padding: 1.6rem;
}
.index-popup .index-popup-head {
  --popup-title-size: 1.8rem;
  --popup-title-lh: 1.35;
  --popup-close-size: 1.6rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem;
  padding-bottom: 1.4rem;
}
.index-popup .index-popup-title {
  font-size: var(--popup-title-size);
  font-weight: 500;
  line-height: var(--popup-title-lh);
}
.index-popup .index-popup-close {
  flex: 0 0 auto;
  width: var(--popup-close-size);
  height: var(--popup-close-size);
  margin-top: calc((var(--popup-title-size) * var(--popup-title-lh) - var(--popup-close-size)) / 2);
  padding: 0;
  border: 0;
  background: url("assets/images/search_reset.png") no-repeat center/contain;
  cursor: pointer;
}
.index-popup .index-popup-slider {
  position: relative;
  overflow: hidden;
  /*
   * 가로 제스처는 스크립트가(스와이프), 세로는 브라우저가(팝업 스크롤) 가져갑니다.
   * 지정하지 않으면 브라우저가 가로 움직임도 스크롤로 보고 포인터를 거둬가
   * (pointercancel) 끌기가 중간에 끊깁니다.
   */
  touch-action: pan-y;
}
.index-popup {
  /* 아카이브 상세와 같은 모양. 모양 자체는 styles/_asset.scss 에서 관리합니다. */
}
.index-popup .index-popup-pagination {
  --bullet-w: 24px;
  --bullet-h: 2px;
  --bullet-gap: 6px;
  --bullet-off: #eee;
  --bullet-on: var(--black);
  --bullet-hover: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--bullet-gap);
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--gap);
  z-index: 2;
}
.index-popup .index-popup-pagination[hidden] {
  display: none;
}
.index-popup .index-popup-pagination button {
  flex: 0 0 auto;
  width: var(--bullet-w);
  height: var(--bullet-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--bullet-off);
  opacity: 1;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: background-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .index-popup .index-popup-pagination button:hover {
    background-color: var(--bullet-hover);
  }
}
.index-popup .index-popup-pagination button.is-current {
  background-color: var(--bullet-on);
}
.index-popup {
  /*
   * 아카이브 상세 슬라이더(Swiper effect:"fade", crossFade, 500ms)와 같은 느낌.
   * 옆으로 미는 대신 제자리에서 겹쳐 바뀝니다.
   * 모든 장을 absolute 로 겹치므로 높이는 트랙이 가집니다.
   */
}
.index-popup .index-popup-track {
  position: relative;
  aspect-ratio: 4/3;
}
.index-popup .index-popup-track.is-dragging .index-popup-slide {
  transition: none;
}
.index-popup .index-popup-slide {
  /* 전부 같은 자리에 겹쳐 두고 불투명도로만 바꿉니다. */
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--popup-fade, 0.5s) ease;
}
.index-popup .index-popup-slide.is-current {
  opacity: 1;
}
.index-popup .index-popup-slide img {
  display: block;
  width: 100%;
  height: 100%;
  /* cover 는 프레임에 맞춰 잘라냄. 원본 비율 유지(아카이브 상세와 동일). */
  -o-object-fit: contain;
     object-fit: contain;
  cursor: zoom-in;
}
.index-popup .index-popup-nav {
  --slider-arrow-size: 32px;
  /* 모바일 28px. 믹스인 안에 둬야 쓰는 쪽과 특이도가 같아 덮입니다. */
}
@media (max-width: 720px) {
  .index-popup .index-popup-nav {
    --slider-arrow-size: 28px;
  }
}
.index-popup .index-popup-nav {
  position: absolute;
  z-index: 2;
  width: var(--slider-arrow-size);
  height: var(--slider-arrow-size);
  margin: 0;
  padding: 0;
  border: 1px solid var(--black);
  background-color: var(--white);
  background-image: url("assets/images/slider_arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .index-popup .index-popup-nav:hover {
    opacity: 0.6;
  }
}
.index-popup .index-popup-nav {
  top: 50%;
}
.index-popup .index-popup-nav[hidden] {
  display: none;
}
.index-popup .index-popup-prev {
  left: var(--gap);
  transform: translateY(-50%) rotate(-90deg);
}
.index-popup .index-popup-next {
  right: var(--gap);
  transform: translateY(-50%) rotate(90deg);
}
.index-popup .index-popup-info {
  margin: 1.6rem 0 0;
}
.index-popup .index-popup-row {
  display: flex;
  gap: 1.2rem;
  padding: 0.9rem 0;
  border-top: 1px solid #000;
  font-size: 1.6rem;
}
.index-popup .index-popup-row:last-child {
  border-bottom: 1px solid #000;
}
.index-popup .index-popup-row dt {
  flex: 0 0 6rem;
  font-weight: 600;
}
.index-popup .index-popup-row dd {
  margin: 0;
}
.index-popup .index-popup-desc {
  padding-top: 1.4rem;
  font-size: 1.6rem;
  line-height: 1.6;
}
.index-popup .index-popup-desc p {
  font-size: inherit;
  line-height: inherit;
}
.index-popup .index-popup-desc p + p {
  margin-top: 1em;
}
.index-popup {
  /* =====================================================================
   * 태블릿 이하 글자 크기 · 스크롤 힌트.
   * ※ 위 규칙들보다 아래에 있어야 합니다(미디어쿼리는 특이도를 올리지 않음).
   * ===================================================================== */
}
@media (max-width: 1024px) {
  .index-popup {
    --popup-fade: 6rem;
    /*
     * 아래로 더 볼 내용이 있을 때만 하단에 흰색 그라데이션(아카이브 상세와 같은 방식).
     * .has-more 는 script.js 가 스크롤 위치를 보고 붙입니다.
     * 팝업 자체가 스크롤 상자라, 마지막 요소를 sticky 로 바닥에 붙이고
     * 음수 margin 으로 내용 위에 겹쳐 높이를 차지하지 않게 합니다.
     */
  }
  .index-popup.has-more::after {
    content: "";
    display: block;
    position: sticky;
    bottom: 0;
    height: var(--popup-fade);
    margin-top: calc(var(--popup-fade) * -1);
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, var(--white) 100%);
  }
  .index-popup .index-popup-head {
    --popup-title-size: 1.6rem;
  }
  .index-popup .index-popup-row {
    font-size: 1.28rem;
  }
  .index-popup .index-popup-desc {
    font-size: 1.4rem;
  }
}

body.index-popup-open {
  overflow: hidden;
}

.page-about {
  --about-muted: #ccc;
  color: var(--black);
  background: var(--white);
}
.page-about .about-divider {
  display: block;
  width: calc(100% - var(--gap) * 2);
  height: 0;
  margin: 0 var(--gap);
  border: 0;
  border-top: 1px solid var(--black);
}
.page-about .about-section-title {
  margin: 0;
  padding: 4.9rem var(--gap) 0;
  font-size: 3.8rem;
  font-weight: 300;
  line-height: 1;
  text-transform: capitalize;
}
.page-about {
  /* ----- Intro ----- */
}
.page-about .about-intro {
  --about-title-top: 1rem; /* 섹션 상단 ↔ 대문 글자 */
  --about-title-fs: 7.9vw;
  --about-title-lh: 0.85;
  --about-title-gap: 7rem; /* 대문 글자 ↔ 타이틀 */
  /* 대문 글자가 커져도 타이틀과 겹치지 않도록 실제 글자 높이에서 계산합니다. */
  --about-intro-top: calc(
    var(--about-title-top) + var(--about-title-fs) * var(--about-title-lh) + var(--about-title-gap)
  );
  --about-intro-gap: 10rem; /* 타이틀 ↔ 설명글. 간격 조절은 이 값만 바꾸면 됩니다 */
  --about-intro-end: calc(var(--gap) + 0.1rem); /* 설명글 아랫변 ↔ 섹션 끝 */
  /* 섹션 높이 = 대문 이미지 높이. auto 는 내용만큼, 100vh 면 첫 화면을 꽉 채웁니다. */
  --about-intro-min-h: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: var(--about-intro-min-h);
  padding: var(--about-intro-top) 0 var(--about-intro-end);
  overflow-x: visible;
  overflow-y: clip;
}
.page-about .about-intro-media {
  position: absolute;
  inset: 0 -1px 0 0;
  overflow: hidden;
}
.page-about .about-intro-media img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}
.page-about .about-page-title {
  /* 크기/위치 값은 .about-intro 의 토큰에서 옵니다. 섹션 여백이 같은 값을 참조합니다. */
  position: absolute;
  top: var(--about-title-top);
  left: var(--gap);
  z-index: 2;
  margin: 0;
  font-size: var(--about-title-fs);
  font-weight: 300;
  line-height: var(--about-title-lh);
  text-transform: uppercase;
  color: var(--black);
  pointer-events: none;
}
.page-about .about-intro-title {
  /* 위치는 .about-intro 의 padding-top(--about-intro-top) 이 잡습니다. */
  position: relative;
  z-index: 2;
  margin: 0 var(--gap);
  max-width: 48rem;
  font-size: 4.9rem;
  font-weight: 400;
  line-height: 1.24;
  text-transform: uppercase;
}
.page-about .about-intro-description {
  /* 여백을 뺀 폭 중 설명 박스가 차지하는 비율. 태블릿 이하에서 넓힙니다. */
  --about-desc-ratio: 0.5;
  /* 타이틀 아래로 항상 --about-intro-gap 만큼. 글 줄 수가 변해도 윗변이 고정됩니다. */
  position: relative;
  z-index: 2;
  width: calc((100% - var(--gap) * 2) * var(--about-desc-ratio));
  margin: var(--about-intro-gap) var(--gap) 0;
  padding: var(--gap);
  font-size: var(--fs-body);
  background-color: var(--white);
}
.page-about .about-intro-description p {
  margin: 0 0 1.6rem;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.54;
}
.page-about .about-intro-description p:last-child {
  margin-bottom: 0;
}
@media (max-width: 1024px) {
  .page-about .about-intro-description {
    --about-desc-ratio: 0.8;
  }
}
.page-about .about-scroll-cue {
  /* 크기: --cue-w / --cue-h. radius = 가로의 절반이라 모양 유지 */
  --cue-w: 1.8rem;
  --cue-h: 3rem;
  /* 음수 margin 으로 아랫변을 설명글 박스에 맞춤(섹션 높이에 영향 없음) */
  position: relative;
  align-self: flex-end;
  z-index: 2;
  width: var(--cue-w);
  height: var(--cue-h);
  margin: calc(var(--cue-h) * -1) var(--gap) 0 0;
  border: 1px solid var(--black);
  border-radius: calc(var(--cue-w) / 2);
}
.page-about .about-scroll-cue::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 50%;
  width: 2px;
  height: 8px;
  margin-left: -1px;
  background: var(--black);
  animation: about-scroll 1.4s ease-in-out infinite;
}
.page-about {
  /* ----- Studios ----- */
}
.page-about .about-studios {
  /* + 뱃지와 모바일 하단 시트가 함께 쓰는 노란색(예전 floor_plus.svg 의 배경색). */
  --studio-yellow: #f4ed84;
  padding-bottom: 4rem;
}
.page-about {
  /* ----- 층 탭 (Studios 제목 아래) ----- */
}
.page-about .about-studios-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.3rem;
  margin: 1.2rem 1.3rem 0;
}
.page-about .about-studios-tab {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
  color: var(--about-muted);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .page-about .about-studios-tab:hover {
    color: var(--black);
  }
}
.page-about .about-studios-tab {
  /* 선택된 층만 진하게(시안). */
}
.page-about .about-studios-tab.is-active {
  color: var(--black);
  font-weight: 600;
  cursor: default;
}
.page-about .about-studios-layout {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  padding: 4rem 0 0;
  overflow: visible;
}
.page-about .about-studios-visual {
  position: relative;
  grid-column: 1/span 5;
  align-self: start;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  z-index: 0;
}
.page-about .about-studios-visual-frame {
  position: relative;
  width: 100%;
}
.page-about .about-studios-base {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1);
}
.page-about .about-studios-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: fill;
     object-fit: fill;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(var(--t, 0%) calc(100% - var(--l, 0%) - var(--w, 100%)) calc(100% - var(--t, 0%) - var(--h, 100%)) var(--l, 0%));
  transition: clip-path 0.45s ease, opacity 0.45s ease;
}
.page-about .about-studios-color.is-hidden {
  clip-path: inset(50% 50% 50% 50%);
  opacity: 0;
}
.page-about .about-studios.is-ready .about-studios-color:not(.is-hidden) {
  opacity: 1;
}
.page-about .about-studios-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-about .about-studios-hotspot {
  --hint-veil: rgba(255, 255, 255, 0.38);
  --hint-dur: 2.4s;
  --hint-stagger: 0.22s;
  --floor-badge-size: 2.4rem;
  /*
   * + 뱃지 색·비율. 예전 floor_plus.svg(15x15) 의 값을 그대로 옮겼습니다.
   *   배경 #F4ED84 / 선 검정 1px / 선 길이 8 = 박스의 8÷15 = 53.33%
   * 선을 background-image 두 겹으로 그립니다. ::after 는 베일이 이미 쓰고 있어
   * 가로·세로 선을 담을 세 번째 의사요소를 쓸 수 없기 때문입니다.
   */
  --floor-badge-bg: var(--studio-yellow);
  --floor-badge-line: var(--black);
  --floor-badge-arm: 53.33%;
  /*
   * 층 영역(=그림)의 정중앙이 기준. 눈으로 보고 이 두 값만 조정하세요.
   * x: 양수면 오른쪽 / y: 양수면 아래. 0 이면 정중앙.
   * 단위는 % 를 쓰세요(그림 폭·높이 기준). 화면이 좁아져 그림이 작아져도
   * 같은 비율로 따라가서 위치가 유지됩니다.
   * rem/px 로 주면 그림만 줄어들고 간격은 그대로라 어긋납니다.
   */
  --floor-badge-x: 12.67%;
  --floor-badge-y: 0%;
  position: absolute;
  top: var(--t, 0%);
  left: var(--l, 0%);
  width: var(--w, 100%);
  height: var(--h, 25%);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.page-about .about-studios-hotspot:focus-visible {
  outline: 0;
}
.page-about .about-studios-hotspot {
  /* 선택된 층은 이미 색이 들어와 있으므로 아무 효과도 주지 않습니다. */
}
.page-about .about-studios-hotspot.is-active {
  cursor: default;
}
.page-about .about-studios-hotspot {
  /* ::after opacity 로만 처리(버튼 자체를 애니메이션하면 전환과 섞여 튐) */
}
.page-about .about-studios-hotspot:not(.is-active)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--hint-veil);
  opacity: 0;
  pointer-events: none;
  animation: about-floor-hint var(--hint-dur) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * var(--hint-stagger));
}
.page-about .about-studios-hotspot {
  /* + 뱃지. 베일(::after)보다 위에 오도록 z-index 를 1 로 둡니다. */
}
.page-about .about-studios-hotspot:not(.is-active)::before {
  content: "";
  position: absolute;
  /* % 가 그림 크기 기준으로 풀리도록 translate 가 아닌 top/left 로 밀어냅니다. */
  top: calc(50% + var(--floor-badge-y));
  left: calc(50% + var(--floor-badge-x));
  transform: translate(-50%, -50%);
  z-index: 1;
  width: var(--floor-badge-size);
  height: var(--floor-badge-size);
  background-color: var(--floor-badge-bg);
  /* 가로선 · 세로선. 각각 1px 두께로 정중앙에 겹칩니다. */
  background-image: linear-gradient(var(--floor-badge-line), var(--floor-badge-line)), linear-gradient(var(--floor-badge-line), var(--floor-badge-line));
  background-size: var(--floor-badge-arm) var(--line-width), var(--line-width) var(--floor-badge-arm);
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  animation: about-floor-hint var(--hint-dur) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * var(--hint-stagger));
}
.page-about .about-studios-hotspot {
  /*
   * 태블릿(1024px 이하)에서는 오른쪽 헤더가 사라져 그림 비율이 달라집니다.
   * % 기준이라 대개 그대로 맞지만, 따로 잡고 싶으면 여기서 덮어쓰세요.
   * ※ 767px 이하는 .about-studios-hotspots 가 display:none 이라 배지가 없습니다.
   */
}
@media (max-width: 1024px) {
  .page-about .about-studios-hotspot {
    --floor-badge-x: 12.67%;
    --floor-badge-y: 0%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-about {
    /* 움직임을 줄인 환경에서는 깜빡이지 않고 옅게 켜둔 상태로 둡니다. */
  }
  .page-about .about-studios-hotspot:not(.is-active)::after,
  .page-about .about-studios-hotspot:not(.is-active)::before {
    animation: none;
    opacity: 0.55;
  }
}
.page-about .about-studios-panels {
  position: relative;
  grid-column: 6/span 3;
  align-self: stretch;
  min-height: 100%;
  overflow: visible;
  padding: 0 var(--gap) 0 0;
  z-index: 1;
}
.page-about .about-studios-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: top 0.45s ease, height 0.45s ease, opacity 0.45s ease;
}
.page-about .about-studios.is-ready .about-studios-track {
  opacity: 1;
}
.page-about .about-studios-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.page-about .about-studios.is-ready .about-studios-item.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.page-about .about-studios:not(.is-ready) .about-studios-color,
.page-about .about-studios:not(.is-ready) .about-studios-track,
.page-about .about-studios:not(.is-ready) .about-studios-item {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-about .about-studios-color,
  .page-about .about-studios-track,
  .page-about .about-studios-item {
    transition: none;
  }
}
.page-about .about-studios-acc-trigger {
  display: none;
}
.page-about .about-studios-acc-caret {
  display: none;
}
.page-about .about-studios-item-body {
  min-height: 0;
  padding-top: 2rem;
}
.page-about .about-studios-panel {
  position: relative;
  display: block;
}
.page-about .about-studios-floor {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.4;
}
.page-about .about-studios-floor--desktop {
  position: absolute;
  top: 0;
  right: calc(100% + 3.8rem);
  z-index: 2;
}
.page-about {
  /* 공방명은 모바일 하단 시트 머리에서만 씁니다. */
}
.page-about .about-studios-panel-name {
  display: none;
}
.page-about .about-studios-floor-label {
  /* 뱃지 테두리 = .unit 배경선. --gap-line: 선 끝 여백(기본 0.8rem 은 작은 뱃지엔 과함) */
  --gap-line: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  background-color: var(--white);
}
.page-about .about-studios-floor-label + .about-studios-floor-label {
  border-top: 0;
}
.page-about {
  /* 한 층에 조직이 둘 이상일 때(예: 3F 기획실 + 디자인실) 사이 간격. */
}
.page-about .about-studios-copy + .about-studios-copy {
  margin-top: 3.2rem;
}
.page-about .about-studios-copy {
  /* 오른쪽이 화면 끝에 붙어 보여서 안쪽 여백을 따로 뒀습니다.
     바깥 .about-studios-panels 의 오른쪽 여백(var(--gap))에 더해집니다. */
  --studios-copy-end: 4rem;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 var(--studios-copy-end) 0 1.5rem;
}
@media (max-width: 720px) {
  .page-about .about-studios-copy {
    padding: 0 0 0 1rem;
  }
}
.page-about .about-studios-body {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.52;
}
.page-about .about-studios-body p {
  margin: 0 0 1.6rem;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.52;
}
.page-about .about-studios-body p:last-child {
  margin-bottom: 0;
}
.page-about .about-studios-body p strong {
  font-weight: 600;
}
.page-about .about-studios-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.page-about .about-studios-tags-arrow {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.4;
}
@media (max-width: 720px) {
  .page-about .about-studios-tags-arrow {
    margin-right: 4px;
  }
}
.page-about .about-studios-tags .tag-item {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
  text-transform: none;
}
@media (max-width: 720px) {
  .page-about .about-studios-tags .tag-item {
    border-color: var(--black);
  }
}
.page-about {
  /* 모바일 하단 시트 전용. 데스크탑에서는 패널이 오른쪽에 그대로 있어 쓰지 않습니다. */
}
.page-about .about-studios-sheet-close {
  display: none;
}
@media (max-width: 767px) {
  .page-about {
    /*
     * 인트로: 데스크탑은 대문 이미지 위에 글자가 겹쳐지지만,
     * 모바일에서는 겹치지 않고 한 줄로 쌓습니다.
     *   ABOUT → 타이틀 → 이미지 → 설명
     * DOM 순서는 이미지가 맨 앞이라 order 로 자리만 바꿉니다(마크업 유지).
     */
  }
  .page-about .about-intro {
    /* 대문 글자가 흐름에 들어오므로, 그만큼 비워두던 윗여백이 필요 없습니다. */
    padding: var(--about-title-top) 0 var(--about-intro-end);
    /* 겹침이 없으니 잘라낼 것도 없습니다. */
    overflow: visible;
    align-items: stretch;
    gap: 2.4rem;
  }
  .page-about .about-page-title {
    order: 1;
    /* 절대배치 해제 — 흐름에 들어와야 아래 요소들을 밀어냅니다. */
    position: static;
    margin: 0 var(--gap);
  }
  .page-about .about-intro-title {
    order: 2;
    max-width: none;
    font-size: 10dvw;
  }
  .page-about .about-intro-media {
    order: 3;
    position: static;
    inset: auto;
    margin: 0 var(--gap);
  }
  .page-about .about-intro-media img {
    /* 데스크탑은 섹션을 꽉 채우려 height:100% + cover 를 쓰지만,
       여기서는 원본 비율 그대로 눕힙니다. */
    height: auto;
  }
  .page-about .about-intro-description {
    order: 4;
    width: auto;
    /* 타이틀과의 간격은 위 gap 이 맡습니다. */
    margin: 0 var(--gap);
    /* 시안에서는 테두리·흰 배경 없이 글자만 놓입니다.
       .unit 의 테두리는 background-image 4겹이라 background 로 한 번에 없앱니다. */
    padding: 0;
    background: none;
  }
  .page-about .about-intro-description::before {
    display: none;
  }
  .page-about {
    /* 한 줄로 쌓이면 음수 margin 으로 올려둔 스크롤 표시가 설명글 위에 겹칩니다. */
  }
  .page-about .about-scroll-cue {
    display: none;
  }
  .page-about .about-studios {
    min-height: 0;
    padding-bottom: 3rem;
  }
  .page-about .about-studios-layout {
    /*
     * minmax(0, …) 필수. 그냥 1fr 은 minmax(auto, 1fr) 이라 트랙이 내용의
     * min-content 보다 작아지지 못합니다. 층 그림(원본 1276px)은 width:100% 를
     * 줘도 내재 크기 계산에서는 퍼센트가 auto 로 취급돼 원본 폭이 최솟값이 되고,
     * 그 결과 트랙이 1276px 로 벌어져 페이지가 좌우로 스크롤됐습니다.
     */
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
    align-items: start;
    min-height: 0;
    padding: 0;
  }
  .page-about .about-studios-visual,
  .page-about .about-studios-panels {
    grid-column: 1/-1;
  }
  .page-about .about-studios-visual {
    /*
     * width 를 풀어야 합니다. 전역 규칙에 width:100% 가 걸려 있어서
     * 좌우 마진을 더하면 100% + 3rem 이 되어 화면보다 넓어집니다.
     * auto 로 두면 그리드 칸에서 마진을 뺀 만큼 알아서 늘어납니다.
     */
    width: auto;
    margin: 0 var(--gap);
  }
  .page-about {
    /*
     * 모바일에서는 배지가 유일한 조작 수단입니다.
     * 깜빡임(힌트)은 데스크탑과 같이 두되, 완전히 사라지지 않도록 --hint-min 을 올립니다.
     * 호버 베일은 마우스가 없으므로 끕니다.
     */
  }
  .page-about .about-studios-hotspots {
    display: block;
  }
  .page-about .about-studios-hotspot:not(.is-active)::after {
    display: none;
  }
  .page-about {
    /* 그림 왼쪽 여백에 세로로 정렬. % 라 화면 폭이 변해도 간격이 유지됩니다. */
  }
  .page-about .about-studios-hotspot {
    --floor-badge-mobile-x: 14%;
    --hint-min: 0.35;
  }
  .page-about {
    /* 위치만 왼쪽으로 옮깁니다. 크기·색·깜빡임은 데스크탑 규칙을 그대로 물려받습니다. */
  }
  .page-about .about-studios-hotspot:not(.is-active)::before {
    top: 50%;
    left: var(--floor-badge-mobile-x);
  }
  .page-about {
    /*
     * 펼쳐진 층은 + 대신 > 입니다(시안).
     * 데스크탑 ::before 규칙은 :not(.is-active) 라 여기엔 적용되지 않으므로,
     * 노란 배경 상자를 + 와 같은 크기로 여기서 다시 잡아 줍니다.
     * 선택된 층이므로 깜빡이지 않고 계속 진하게 둡니다.
     */
  }
  .page-about .about-studios-hotspot.is-active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--floor-badge-mobile-x);
    transform: translate(-50%, -50%);
    z-index: 1;
    width: var(--floor-badge-size);
    height: var(--floor-badge-size);
    background-color: var(--floor-badge-bg);
    opacity: 1;
    pointer-events: none;
  }
  .page-about {
    /* 꺾쇠(>). ::before 가 배경 상자를 맡고 있어 선은 ::after 로 그립니다. */
  }
  .page-about .about-studios-hotspot.is-active::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: var(--floor-badge-mobile-x);
    /* 꺾쇠의 시각 중심이 사각형 중심보다 왼쪽이라 살짝 밀어 맞춥니다. */
    transform: translate(-70%, -50%) rotate(-45deg);
    z-index: 2;
    width: 0.7rem;
    height: 0.7rem;
    border-right: var(--line-width) solid var(--black);
    border-bottom: var(--line-width) solid var(--black);
    background: none;
    opacity: 1;
    animation: none;
    pointer-events: none;
  }
  .page-about {
    /*
     * 하단 시트. 화면 아래에 붙여두고 transform 으로 밀어 올립니다.
     * (height/bottom 애니메이션은 매 프레임 레이아웃을 다시 잡아 끊깁니다.)
     * 닫힌 상태에서도 DOM 에 남으므로 visibility 로 초점 이동을 막습니다.
     */
  }
  .page-about .about-studios-panels {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    height: auto;
    min-height: 0;
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2rem 4rem 2rem var(--gap);
    background: var(--studio-yellow);
    transform: translateY(100%);
    visibility: hidden;
    /* 닫힐 때(기본 상태로 복귀) 쓰이는 전환입니다.
       열 때와 같은 감속 곡선을 쓰면 시작부터 훅 떨어졌다가 느려져 뚝 끊겨 보입니다.
       빠져나갈 때는 천천히 시작해 가속하는 곡선이 자연스럽습니다. */
    transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1), visibility 0s 0.3s;
  }
  .page-about .about-studios.is-sheet-open .about-studios-panels {
    transform: translateY(0);
    visibility: visible;
    /* 들어올 때는 빠르게 올라와 부드럽게 멎는 감속 곡선. */
    transition: transform 0.36s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0s 0s;
  }
  .page-about {
    /* 닫기(X). 두 선을 겹쳐 만듭니다. */
    /* 층 선택은 그림 위 배지가 맡으므로 아코디언 머리는 쓰지 않습니다. */
    /* 시트 머리: 층(4F) + 공방명. 오른쪽 끝의 닫기 버튼과 같은 줄입니다. */
    /*
     * 시트 안에서는 층 표기를 상자가 아닌 글자로만 둡니다.
     * 기본값은 .unit 뱃지(흰 배경 + 검은 테두리)라 노란 시트 위에서 겉돕니다.
     * .unit 의 테두리는 background-image 4겹으로 그려지므로 background 를 한 번에 없앱니다.
     */
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .page-about .about-studios-panels {
    transition: none;
  }
}
@media (max-width: 767px) {
  .page-about .about-studios-sheet-close {
    display: block;
    position: absolute;
    top: 2.4rem;
    right: var(--gap);
    z-index: 1;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  .page-about .about-studios-sheet-close::before, .page-about .about-studios-sheet-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: var(--line-width);
    background: var(--black);
  }
  .page-about .about-studios-sheet-close::before {
    transform: rotate(45deg);
  }
  .page-about .about-studios-sheet-close::after {
    transform: rotate(-45deg);
  }
  .page-about .about-studios-track {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    height: auto;
    min-height: 0;
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 0;
    transition: none;
  }
  .page-about .about-studios-item {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
    border-bottom: 0;
  }
  .page-about .about-studios.is-ready .about-studios-item.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .page-about .about-studios-item.is-active {
    position: static;
  }
  .page-about .about-studios-acc-trigger {
    display: none;
  }
  .page-about .about-studios-panel-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    /* 닫기 버튼(2rem)과 겹치지 않게 오른쪽을 비워 둡니다. */
    padding-right: 3.2rem;
    padding-left: 1rem;
    margin-bottom: 1.6rem;
  }
  .page-about .about-studios-floor--desktop {
    /* 데스크탑에서는 패널 왼쪽 바깥에 절대배치돼 있습니다.
       해제하지 않으면 시트 밖으로 밀려나 보이지 않습니다. */
    position: static;
    /* 층 표기 길이가 달라도(4F / 1F, B1F) 이름 시작점이 일정하도록 폭을 고정합니다. */
    flex: 0 0 auto;
    min-width: 6rem;
    /* 한 칸에 표기가 둘이면(1F, B1F) 세로로 쌓이므로 한 줄로 눕힙니다. */
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    margin-bottom: 0;
    font-size: var(--fs-body);
    font-weight: 600;
  }
  .page-about .about-studios-floor-label {
    padding: 0;
    background: none;
  }
  .page-about .about-studios-floor-label::before {
    display: none;
  }
  .page-about .about-studios-panel-name {
    display: block;
    font-size: var(--fs-body);
    font-weight: 600;
  }
  .page-about .about-studios-item-body {
    display: none;
    padding: 0;
  }
  .page-about .about-studios-item.is-active .about-studios-item-body {
    display: block;
  }
  .page-about .about-studios-panel {
    gap: 0;
  }
  .page-about .about-studios-copy {
    width: 100%;
  }
}
.page-about {
  /* ----- Visit ----- */
}
.page-about .about-visit {
  padding-bottom: 4rem;
}
.page-about .about-visit-map {
  margin: 4rem var(--gap) 0;
  border: 1px solid var(--about-muted);
  overflow: hidden;
  background: #f5f5f5;
  /* 상자가 지도 높이의 기준입니다(page-about.php 가 이 높이를 읽어 지도를 그림).
     고정 높이로 두면 좁은 폭에서 지도 아래에 빈 띠가 남습니다.
     max-width 필수: 없으면 min-height 가 걸릴 때 비율을 맞추려고 폭까지 늘어납니다. */
  aspect-ratio: 983/490;
  min-height: 24rem;
  max-width: calc(100% - var(--gap) * 2);
  line-height: 0;
  filter: grayscale(1);
}
.page-about .about-visit-map .root_daum_roughmap {
  width: 100% !important;
  max-width: 100%;
}
.page-about .about-visit-map .root_daum_roughmap .wrap_map {
  width: 100% !important;
}
.page-about .about-visit-map .wrap_controllers,
.page-about .about-visit-map .wrap_controllers + .cont {
  display: none !important;
}
.page-about .about-visit-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1.5rem var(--gap) 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--black);
}
.page-about .about-visit-phones {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.page-about .about-visit-row {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.4;
  text-transform: capitalize;
}
.page-about .about-visit-contacts {
  flex-direction: column;
  gap: 1.5rem;
  align-items: stretch;
}
.page-about .about-visit-label {
  flex: 0 0 6rem;
  width: 6rem;
}
.page-about .about-visit-value {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 300;
}
.page-about .about-visit-value a {
  color: inherit;
}
.page-about .about-visit-info > .about-visit-row + .about-visit-row {
  padding-top: 1.5rem;
  border-top: 1px solid var(--black);
}
.page-about .about-visit-address .about-visit-value {
  max-width: 15rem;
}
.page-about {
  /* ----- Network ----- */
}
.page-about .about-network {
  padding-bottom: 8rem;
}
.page-about .about-network-intro {
  margin: 4rem var(--gap) 0;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.54;
  width: 80%;
}
.page-about .about-network-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  margin: 5rem var(--gap) 0;
}
@media (max-width: 720px) {
  .page-about .about-network-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.page-about .about-network-col {
  min-width: 0;
}
@supports (grid-template-rows: subgrid) {
  .page-about .about-network-col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;
  }
}
.page-about .about-network-col-title {
  margin: 0;
  padding: 2rem 0;
  border-top: 1px solid var(--black);
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1;
  text-transform: capitalize;
}
.page-about .about-network-col-desc {
  padding: 0;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
  width: 60%;
}
@media (max-width: 720px) {
  .page-about .about-network-col-desc {
    padding-top: 0.5rem;
  }
}
.page-about .about-network-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 2rem 0 0;
  list-style: none;
}
.page-about .about-network-list li {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
}

@keyframes about-floor-hint {
  0%, 100% {
    /* --hint-min: 가장 옅어졌을 때의 값. 데스크탑은 0(완전히 사라짐),
       모바일은 배지가 유일한 조작 수단이라 옅어지기만 합니다. */
    opacity: var(--hint-min, 0);
  }
  50% {
    opacity: 1;
  }
}
@keyframes about-scroll {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.35;
    transform: translateY(0.6rem);
  }
}
html[data-lang=en] .about-visit-label {
  flex: 0 0 15rem;
  width: 15rem;
}

:root[data-size=desktop] {
  --ep-margin: 20px;
  --ep-pageTop: 12px;
  --ep-headerH: 64px;
}

:root[data-size=tablet],
:root[data-size=phone_large],
:root[data-size=phone] {
  --ep-margin: 15px;
  --ep-pageTop: 10px;
  --ep-headerH: 50px;
}

*:not(:where(.about-visit-map, .about-visit-map *)) {
  word-break: keep-all;
  box-sizing: border-box;
  position: relative;
}

.about-visit-map,
.about-visit-map * {
  box-sizing: border-box;
}

html {
  font-size: min(0.35vw + 5px, 9.5px);
}
@media (max-width: 1024px) {
  html {
    font-size: 10px;
  }
}

/* 스크롤바 감추기. 스크롤 동작(휠·드래그·키보드)은 그대로입니다. */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* 구형 Edge / IE */
}
*::-webkit-scrollbar {
  /* Chrome / Safari / Edge */
  display: none;
}

body {
  background: #fff;
}

body,
input,
select,
optgroup,
textarea {
  font-size: 1rem !important;
  line-height: 1.54 !important;
  font-family: "Poppins", "Pretendard", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
}

/*
 * GeneratePress 가 button 에 시스템 폰트를 깔아 서체만 상속시킵니다.
 * (위 규칙에 button 을 넣으면 !important 크기까지 덮어씀)
 */
button {
  font-family: inherit;
}

body {
  background-color: var(--icaseoul-bg-1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: black;
  margin: 0;
}

h1 {
  font-size: 3.125rem;
  line-height: 1.1;
  font-weight: 400;
}

h2 {
  font-size: 1.8125rem;
  line-height: 1.1;
  font-weight: 400;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 700;
}

h4 {
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 700;
}

p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  margin: 0;
}

.caption {
  font-size: 0.875rem;
}

a {
  text-decoration: none;
  color: #000;
}

ul, ol, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ----- Initialize End ----- */
/* Global Styles */
:root {
  --fs-body: 1.6rem;
  --gap: 1.5rem;
  --gap-line: 0.8rem;
  --gap-line-sm: 0.4rem;
  --line-width: 1px;
  --header-width: 33.33%;
  --header-unit-height: 33.33vh;
  --white: #fff;
  --black: #000;
  --lime: #f4ed84;
  --lime-pale: #fffbbc;
}

.grid-container {
  max-width: initial !important;
}

.site-content {
  display: block;
}

.px-cntr {
  padding: 0 var(--gap);
}

/* ----- Global Styles End ----- */
/* Custom Styles */
button:hover,
button:focus,
button:active {
  color: inherit;
  background-color: transparent;
}

html:not([data-lang=en]) .en {
  display: none !important;
}

html[data-lang=en] .ko {
  display: none !important;
}

b, strong {
  font-weight: 600;
}

.unit {
  position: relative;
  height: 100%;
  padding: var(--gap);
}

.unit-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}
.unit-grid .unit {
  flex: 1;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}

.tag-item {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 0.3rem 0.9rem 0.2rem;
  border: 1px solid #ccc;
  color: #000;
}
.tag-item.is-current {
  opacity: 1;
  border-color: #000;
}
@media (hover: hover) and (pointer: fine) {
  .tag-item:hover {
    opacity: 1;
    border-color: #000;
  }
}
.tag-item.is-current {
  pointer-events: none;
}

.a11y {
  display: none;
}

.unit {
  /* 선 두께 --line-width 는 :root 에 있습니다(.unit 밖의 선도 같은 값을 쓰기 때문). */
  --unit-border-top: transparent;
  --unit-border-right: transparent;
  --unit-border-bottom: transparent;
  --unit-border-left: transparent;
  /* 선은 박스 바깥쪽 가장자리에 놓이도록 ::before 를 선 두께만큼 밖으로 넓혀 그립니다. */
}
.unit::before {
  content: "";
  position: absolute;
  inset: calc(var(--line-width) * -1);
  pointer-events: none;
  background-image: linear-gradient(var(--unit-border-top), var(--unit-border-top)), linear-gradient(var(--unit-border-right), var(--unit-border-right)), linear-gradient(var(--unit-border-bottom), var(--unit-border-bottom)), linear-gradient(var(--unit-border-left), var(--unit-border-left));
  background-repeat: no-repeat;
  background-position: var(--gap-line) 0, 100% var(--gap-line), var(--gap-line) 100%, 0 var(--gap-line);
  background-size: calc(100% - var(--gap-line) * 2) var(--line-width), var(--line-width) calc(100% - var(--gap-line) * 2), calc(100% - var(--gap-line) * 2) var(--line-width), var(--line-width) calc(100% - var(--gap-line) * 2);
}
.unit.unit-top {
  --unit-border-top: var(--black);
}
.unit.unit-right {
  --unit-border-right: var(--black);
}
.unit.unit-bottom {
  --unit-border-bottom: var(--black);
}
.unit.unit-left {
  --unit-border-left: var(--black);
}
.unit.unit-all {
  --unit-border-top: var(--black);
  --unit-border-right: var(--black);
  --unit-border-bottom: var(--black);
  --unit-border-left: var(--black);
}
.unit.unit-gap-sm {
  --gap-line: var(--gap-line-sm);
}

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* 선이 소수 픽셀에 걸려 흐려지지 않도록 정수 픽셀로 내립니다. */
  width: round(down, var(--header-width), 1px);
  /* .unit 선이 헤더 바깥으로 1px 나가므로, 페이지 본문(.page-index 등) 위에 올려 가려지지 않게 합니다. */
  z-index: 60;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
.site-header > .unit, .site-header > .unit-grid {
  flex: 0 0 round(down, 33.33%, 1px);
}
.site-header {
  /* 헤더 칸의 왼쪽 선은 바깥이 아니라 칸 안쪽(왼쪽 끝)에 놓입니다. 나머지 세 변은 그대로 바깥입니다. */
}
.site-header .unit::before {
  left: 0;
  background-size: calc(100% - var(--gap-line) * 2 - var(--line-width)) var(--line-width), var(--line-width) calc(100% - var(--gap-line) * 2), calc(100% - var(--gap-line) * 2 - var(--line-width)) var(--line-width), var(--line-width) calc(100% - var(--gap-line) * 2);
}
.site-header {
  /* 데스크탑 헤더 선 보정 (모바일 메뉴 화면은 아래 tablet 블록에서 따로 다룹니다). */
}
@media (min-width: 1025px) {
  .site-header {
    /* 위·아래 여백은 헤더가 맡고, 모든 칸의 상·하단 패딩은 비웁니다. */
    padding: var(--gap) 0;
    /*
     * 칸 사이 선이 홈 배너 목록(.home-banner-list)의 간격 한가운데를 지나게 합니다.
     * 배너는 위·아래 패딩 var(--gap), 사이 간격 var(--gap) 이고 개수가 3의 배수라
     * 경계는 100vh/3 + gap/6, 200vh/3 - gap/6 에 놓입니다. 칸 높이는 거기서 거꾸로 구합니다.
     */
  }
  .site-header > .unit:first-child, .site-header > .unit:last-child {
    flex-basis: round(33.3333333333vh - var(--gap) * 5 / 6, 1px);
  }
  .site-header > .unit-grid {
    flex-basis: round(33.3333333333vh - var(--gap) / 3, 1px);
  }
  .site-header > .unit:first-child {
    padding-top: 0;
  }
  .site-header > .unit:last-child {
    padding-bottom: 0;
  }
  .site-header {
    /* 맨 위 칸: 세로선이 칸 윗변(= 헤더 위 여백 끝)에서 시작합니다. ::before 가 선 두께만큼 밖으로 나와 있어 그만큼 더합니다. */
  }
  .site-header > .unit:first-child::before {
    background-position: var(--gap-line) 0, 100% var(--line-width), var(--gap-line) 100%, 0 var(--line-width);
    background-size: calc(100% - var(--gap-line) * 2 - var(--line-width)) var(--line-width), var(--line-width) calc(100% - var(--gap-line) - var(--line-width)), calc(100% - var(--gap-line) * 2 - var(--line-width)) var(--line-width), var(--line-width) calc(100% - var(--gap-line) - var(--line-width));
  }
  .site-header {
    /* 맨 아래 칸: 세로선이 칸 아랫변(= 헤더 아래 여백 시작)에서 끝납니다. */
  }
  .site-header > .unit:last-child::before {
    background-size: calc(100% - var(--gap-line) * 2 - var(--line-width)) var(--line-width), var(--line-width) calc(100% - var(--gap-line) - var(--line-width)), calc(100% - var(--gap-line) * 2 - var(--line-width)) var(--line-width), var(--line-width) calc(100% - var(--gap-line) - var(--line-width));
  }
}
.site-header .logo,
.site-header .logo img {
  width: 100%;
}
.site-header .sub-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 1.5rem;
}
.site-header .sub-info-right {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem;
}
.site-header .sub-info-insta {
  width: 2.6rem;
}
.site-header .menu-item {
  display: block;
  font-size: 3.8rem;
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
}
.site-header .category-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-top: 1.6rem;
}
.site-header .category-list a {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  text-transform: capitalize;
}
.site-header .bottom-info-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.site-header .bottom-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 0.8rem 2rem;
}
.site-header .bottom-info p {
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.4;
  text-wrap: pretty;
}
.site-header .bottom-info p:first-child {
  flex: 1;
}
.site-header .header-search-form {
  /* 아이콘 크기·간격. 입력칸 오른쪽 여백이 이 값에서 계산됩니다. */
  --hsearch-icon: 3rem;
  --hsearch-gap: 0.7rem;
  --hsearch-edge: 0.5rem;
  position: relative;
}
.site-header .header-search-form input.header-search-input {
  width: 100%;
  font-size: 3.8rem !important;
  font-weight: 300;
  height: 4.2rem;
  /* 오른쪽은 지우기·검색 두 버튼 자리를 비웁니다. */
  padding: 0.2rem calc(var(--hsearch-edge) * 2 + var(--hsearch-icon) * 2 + var(--hsearch-gap)) 0.2rem 0.5rem;
  border: 0;
  background-color: #eee;
  text-transform: uppercase;
  /*
   * 사파리 기본 입력칸 모양을 끕니다. 켜져 있으면 CSS 줄상자가 아니라
   * 폰트 권장 박스(36px 글자 기준 51px)를 위 기준으로 배치해,
   * 입력칸 안쪽 높이(36px)를 넘는 아래쪽이 잘립니다.
   * 이걸 끄기 위해 input 을 type=text 로 두고 X 버튼도 직접 만듭니다(header.php).
   */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  border-radius: 0;
  line-height: 1 !important;
}
.site-header .header-search-form input.header-search-input::-moz-placeholder {
  font-weight: 300;
  color: #000;
  text-transform: uppercase;
  -moz-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.site-header .header-search-form input.header-search-input::placeholder {
  font-weight: 300;
  color: #000;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.site-header .header-search-form input.header-search-input:focus::-moz-placeholder {
  color: rgba(0, 0, 0, 0.1);
}
.site-header .header-search-form input.header-search-input:focus::placeholder {
  color: rgba(0, 0, 0, 0.1);
}
.site-header .header-search-form input.header-search-input:focus-visible {
  outline: none;
}
.site-header .header-search-form .header-search-clear,
.site-header .header-search-form .header-search-submit {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--hsearch-icon);
  height: var(--hsearch-icon);
  padding: 0;
  border: 0;
  font-size: 0;
  cursor: pointer;
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.site-header .header-search-form .header-search-submit {
  right: var(--hsearch-edge);
  background-image: url("assets/images/search.png");
}
.site-header .header-search-form {
  /* 검색 버튼 왼쪽에 나란히. 겹치지 않게 아이콘 폭만큼 띄웁니다. */
}
.site-header .header-search-form .header-search-clear {
  right: calc(var(--hsearch-edge) + var(--hsearch-icon) + var(--hsearch-gap));
  background-image: url("assets/images/search_reset.png");
}
.site-header .header-search-form {
  /* 지우기 버튼은 내용이 있을 때만. */
}
.site-header .header-search-form input.header-search-input:not(:-moz-placeholder) ~ .header-search-clear {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.site-header .header-search-form input.header-search-input:not(:placeholder-shown) ~ .header-search-clear {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.site-header .header-search-form {
  /*
   * 내용이 있으면 포커스가 없어도 계속 보입니다.
   * 사파리는 버튼을 눌러도 포커스를 주지 않아, :focus-within 만으로는
   * mousedown 시점에 버튼이 숨겨져 클릭이 성립하지 않습니다.
   */
}
.site-header .header-search-form input.header-search-input:not(:-moz-placeholder) ~ .header-search-submit {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.site-header .header-search-form:focus-within .header-search-submit,
.site-header .header-search-form input.header-search-input:not(:placeholder-shown) ~ .header-search-submit {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.4;
  text-transform: uppercase;
}

.lang-switcher-item {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
  .lang-switcher-item:hover {
    opacity: 1;
  }
}

.lang-switcher-sep {
  pointer-events: none;
}

html:not([data-lang=en]) .lang-switcher-item[data-lang=ko],
html[data-lang=en] .lang-switcher-item[data-lang=en] {
  pointer-events: none;
}

html:not([data-lang=en]) .lang-switcher-item[data-lang=en],
html[data-lang=en] .lang-switcher-item[data-lang=ko] {
  opacity: 0.4;
}

.container {
  width: calc(100% - var(--header-width));
  min-height: 100vh;
  margin-right: var(--header-width);
}

/*
 * =========================================================================
 * 태블릿 이하(≤1024px) 헤더
 *   .mobile-bar 상단 고정 / .site-header 메뉴 화면(토글) / .mobile-footer 하단 고정
 * =========================================================================
 */
/* 데스크탑에서는 두 줄 모두 쓰지 않습니다. */
.mobile-bar,
.mobile-footer {
  display: none;
}

/* 상단 바 아래 / 하단 줄 위 가로선. */
.mobile-rule {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--line-width);
  pointer-events: none;
}
.mobile-rule::before, .mobile-rule::after {
  content: "";
  position: absolute;
  top: 0;
  /* 양 끝은 var(--gap), 두 선 사이는 var(--gap-line) 을 비웁니다. */
  width: calc(50% - var(--gap) - var(--gap-line) * 0.5);
  height: 100%;
  background-color: var(--black);
}
.mobile-rule::before {
  left: var(--gap);
}
.mobile-rule::after {
  right: var(--gap);
}

.mobile-rule--top {
  top: 0;
}

.mobile-rule--bottom {
  bottom: 0;
}

/* 메뉴 버튼 */
.site-menu-toggle {
  --toggle-size: 35px;
  /* 닫힘: 윗줄·아랫줄 위치. 가운데(17px)에서의 거리. 정수로 떨어지게 잡아 선이 번지지 않습니다. */
  --toggle-top-y: -5px; /* → y 12px */
  --toggle-bottom-y: 4px; /* → y 21px, 두 줄 간격 9px */
  --toggle-short: 71.43%; /* 아랫줄 길이 25/35, 오른쪽 정렬 */
  /* 열림: X 한 획 길이 */
  --toggle-x: 82%;
  /* 열림 속도 */
  --toggle-open-dur: 0.2s;
  --toggle-close-dur: 0.14s;
  /* 획 굵기. 전역 --line-width 와 분리해 두어 여기만 굵게 할 수 있습니다. */
  --toggle-line-w: var(--line-width);
  position: relative;
  flex: 0 0 auto;
  width: var(--toggle-size);
  height: var(--toggle-size);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.site-menu-toggle::before, .site-menu-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  height: var(--toggle-line-w);
  margin-top: calc(var(--toggle-line-w) / -2);
  background-color: var(--black);
  transform-origin: 50% 50%;
  transition-property: left, width, transform;
  transition-duration: var(--toggle-close-dur);
  transition-timing-function: ease-in-out;
}
.site-menu-toggle::before {
  left: 0;
  width: 100%;
  transform: translateY(var(--toggle-top-y)) rotate(0deg);
}
.site-menu-toggle::after {
  left: calc(100% - var(--toggle-short));
  width: var(--toggle-short);
  transform: translateY(var(--toggle-bottom-y)) rotate(0deg);
}
.site-menu-toggle[aria-expanded=true] {
  /* X 오른쪽 정렬을 유지 */
}
.site-menu-toggle[aria-expanded=true]::before, .site-menu-toggle[aria-expanded=true]::after {
  left: calc(100% - var(--toggle-x) * 0.85355);
  width: var(--toggle-x);
  transition-duration: var(--toggle-open-dur);
}
.site-menu-toggle[aria-expanded=true]::before {
  transform: translateY(0) rotate(45deg);
}
.site-menu-toggle[aria-expanded=true]::after {
  transform: translateY(0) rotate(135deg);
}
@media (prefers-reduced-motion: reduce) {
  .site-menu-toggle::before, .site-menu-toggle::after {
    transition: none;
  }
}

@media (max-width: 1024px) {
  :root {
    --header-width: 0px;
    /* 본문 기준 크기(데스크탑 1.6rem) */
    --fs-body: 1.5rem;
    --mobile-logo-h: min(4.8rem, 12.31vw);
    --mobile-bar-top: 1rem;
    --mobile-bar-bottom: 1.6rem;
    --mobile-bar-h: calc(var(--mobile-bar-top) + var(--mobile-logo-h) + var(--mobile-bar-bottom));
    --mobile-footer-h: 4rem;
    --menu-about-h: 14rem;
    --menu-grid-h: 28rem;
  }
  .container {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--mobile-bar-h);
    padding-bottom: var(--mobile-footer-h);
  }
  .mobile-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: var(--mobile-bar-h);
    padding: var(--mobile-bar-top) var(--gap) 0;
    background-color: var(--white);
  }
  .mobile-bar-logo {
    display: block;
  }
  .mobile-bar-logo img {
    display: block;
    width: auto;
    height: var(--mobile-logo-h);
  }
  .mobile-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
    height: var(--mobile-footer-h);
    padding: 0 var(--gap);
    background-color: var(--white);
    /* 언어 전환은 메뉴 화면 안으로 옮겼습니다. 여기는 저작권만 남습니다. */
  }
  .mobile-footer .mobile-footer-copy {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
  }
  /* 메뉴 화면: 평소엔 숨기고, 열리면 상단 바와 하단 줄 사이를 채웁니다. */
  .site-header {
    left: 0;
    width: 100%;
    z-index: 110;
    padding: var(--mobile-bar-h) 0 var(--mobile-footer-h);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    /* 데스크탑의 세로 3등분을 풀고 내용 높이로 둡니다. */
  }
  .site-header > .unit, .site-header > .unit-grid {
    flex: 0 0 auto;
  }
  .site-header > .unit {
    height: auto;
    --unit-border-left: transparent;
  }
  .site-header .logo {
    display: none;
  }
  .site-header {
    /* ABOUT + 인스타그램 */
  }
  .site-header > .unit:first-child {
    min-height: var(--menu-about-h);
  }
  .site-header {
    /* ABOUT 과 오른쪽(언어 전환 + 인스타그램)의 윗줄을 맞춥니다. */
  }
  .site-header .sub-info {
    align-items: flex-start;
    padding-top: 0;
  }
  .site-header {
    /* 데스크탑과 같은 배치: ABOUT 오른쪽에 언어 전환, 그 아래 인스타그램. */
  }
  .site-header .sub-info-right {
    gap: 1.2rem;
  }
  .site-header .lang-switcher {
    font-size: 1.6rem;
  }
  .site-header .sub-info-insta {
    width: 2.2rem;
  }
  .site-header .menu-item {
    font-size: 2.8rem;
  }
  .site-header {
    /* ARCHIVE | INDEX. 가운데 세로선은 INDEX 칸의 왼쪽 선이 맡습니다. */
  }
  .site-header .unit-grid {
    min-height: var(--menu-grid-h);
  }
  .site-header .unit-grid > .unit:first-child {
    --unit-border-left: transparent;
    /*
     * 왼쪽 칸: 위·아래 선이 왼쪽 끝에서 var(--gap) 에서 시작하고, 가운데 쪽 끝은 .mobile-rule 의
     * 두 선 사이 틈(--gap-line)과 같도록 중앙에서 --gap-line 의 절반만 띄웁니다.
     * ::before 는 왼쪽은 칸에 맞고 오른쪽만 선 두께만큼 밖으로 나와 있어 그만큼 보정합니다.
     */
  }
  .site-header .unit-grid > .unit:first-child::before {
    background-position: var(--gap) 0, 100% var(--gap-line), var(--gap) 100%, 0 var(--gap-line);
    background-size: calc(100% - var(--gap) - var(--gap-line) * 0.5 - var(--line-width)) var(--line-width), var(--line-width) calc(100% - var(--gap-line) * 2), calc(100% - var(--gap) - var(--gap-line) * 0.5 - var(--line-width)) var(--line-width), var(--line-width) calc(100% - var(--gap-line) * 2);
  }
  .site-header .unit-grid {
    /* 오른쪽 칸: 위·아래 선이 중앙에서 --gap-line 의 절반 지점에서 시작해 오른쪽 끝에서 var(--gap) 에서 끝납니다. */
  }
  .site-header .unit-grid > .unit:last-child::before {
    background-position: calc(var(--gap-line) * 0.5) 0, 100% var(--gap-line), calc(var(--gap-line) * 0.5) 100%, 0 var(--gap-line);
    background-size: calc(100% - var(--gap) - var(--gap-line) * 0.5 - var(--line-width)) var(--line-width), var(--line-width) calc(100% - var(--gap-line) * 2), calc(100% - var(--gap) - var(--gap-line) * 0.5 - var(--line-width)) var(--line-width), var(--line-width) calc(100% - var(--gap-line) * 2);
  }
  .site-header .category-list {
    gap: 0.8rem;
    padding-top: 1.2rem;
  }
  .site-header .category-list a {
    font-size: 1.8rem;
  }
  .site-header {
    /* SEARCH. 주소·이메일·저작권은 하단 줄로 옮겨졌으므로 숨깁니다. */
  }
  .site-header .bottom-info-wrap {
    height: auto;
  }
  .site-header .bottom-info {
    display: none;
  }
  .site-header .header-search-form input.header-search-input {
    font-size: 2.8rem !important;
    height: 3.6rem;
  }
  body.is-menu-open {
    overflow: hidden;
  }
  body.is-menu-open .site-header {
    visibility: visible;
    opacity: 1;
  }
}
@media (max-width: 720px) {
  :root {
    --gap: 1rem;
  }
}
/* 맨 위로 버튼. 등장 시점(한 화면 스크롤)은 script.js 가 정합니다.
   오른쪽 위치는 고정 헤더 폭을 피해서 잡으므로 --header-width 를 바꾸면 따라옵니다. */
.scroll-top {
  --scroll-top-size: 44px;
  position: fixed;
  right: calc(var(--header-width) + var(--gap));
  bottom: var(--gap);
  z-index: 90;
  width: var(--scroll-top-size);
  height: var(--scroll-top-size);
  padding: 0;
  border: 0;
  background: url("assets/images/scroll_top.svg") no-repeat center/100% 100%;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
}
.scroll-top {
  /* 태블릿 이하는 하단 고정 줄(.mobile-footer)이 있어 그 위로 올립니다. */
}
@media (max-width: 1024px) {
  .scroll-top {
    bottom: calc(var(--mobile-footer-h) + var(--gap));
  }
}

.lightbox {
  --lightbox-pad: 6rem;
  --lightbox-fill: 86vh;
  position: fixed;
  inset: 0;
  /* 인덱스 팝업(.index-popup)이 200 이라 그 위로 올립니다. */
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lightbox-pad);
  background-color: rgba(255, 255, 255, 0.96);
  opacity: 0;
  transition: opacity 0.25s ease;
  /* display: flex 가 hidden 속성의 기본 display: none 을 이기므로 직접 꺼줍니다. */
}
.lightbox[hidden] {
  display: none;
}
.lightbox.is-open {
  opacity: 1;
}
.lightbox .lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--lightbox-fill);
  max-height: 100%;
}
.lightbox .lightbox-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.lightbox .lightbox-close {
  position: absolute;
  top: var(--gap);
  right: var(--gap);
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  background: url("assets/images/search_reset.png") no-repeat center/contain;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.lightbox .lightbox-nav {
  --slider-arrow-size: 32px;
  /* 모바일 28px. 믹스인 안에 둬야 쓰는 쪽과 특이도가 같아 덮입니다. */
}
@media (max-width: 720px) {
  .lightbox .lightbox-nav {
    --slider-arrow-size: 28px;
  }
}
.lightbox .lightbox-nav {
  position: absolute;
  z-index: 2;
  width: var(--slider-arrow-size);
  height: var(--slider-arrow-size);
  margin: 0;
  padding: 0;
  border: 1px solid var(--black);
  background-color: var(--white);
  background-image: url("assets/images/slider_arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .lightbox .lightbox-nav:hover {
    opacity: 0.6;
  }
}
.lightbox .lightbox-nav {
  top: 50%;
}
.lightbox .lightbox-nav[hidden] {
  display: none;
}
.lightbox .lightbox-prev {
  left: var(--gap);
  transform: translateY(-50%) rotate(-90deg);
}
.lightbox .lightbox-next {
  right: var(--gap);
  transform: translateY(-50%) rotate(90deg);
}
.lightbox .lightbox-pagination {
  --bullet-w: 24px;
  --bullet-h: 2px;
  --bullet-gap: 6px;
  --bullet-off: #eee;
  --bullet-on: var(--black);
  --bullet-hover: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--bullet-gap);
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--gap);
}
.lightbox .lightbox-pagination[hidden] {
  display: none;
}
.lightbox .lightbox-pagination button {
  flex: 0 0 auto;
  width: var(--bullet-w);
  height: var(--bullet-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--bullet-off);
  opacity: 1;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: background-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .lightbox .lightbox-pagination button:hover {
    background-color: var(--bullet-hover);
  }
}
.lightbox .lightbox-pagination button.is-current {
  background-color: var(--bullet-on);
}

body.lightbox-open {
  overflow: hidden;
}

/* 로딩 진행 막대.
껍데기는 functions.php 의 ep_render_progress_bar(), 진행은 script.js 의 EPProgress. */
.ep-progress {
  --progress-h: 2px;
  --progress-color: var(--black);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  height: var(--progress-h);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ep-progress.is-active {
  opacity: 1;
}
.ep-progress .ep-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--progress-color);
  transition: width 0.2s ease;
}

.page-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--gap);
  color: var(--black);
  background: var(--white);
  text-align: center;
}
.page-404 .page-404-inner {
  position: relative;
  max-width: 48rem;
}
.page-404 .page-404-code {
  margin: 0 0 0.8rem;
  font-size: clamp(4.8rem, 11vw, 9rem);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.page-404 .page-404-code::after {
  /* Index 필터 점과 같은 라임 포인트 */
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 0.9rem;
  height: 0.9rem;
  margin: 0.6rem 0 0 0.8rem;
  border: var(--line-width) solid var(--black);
  border-radius: 50%;
  background: var(--lime);
}
.page-404 .page-404-title {
  margin: 0 0 0.6rem;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.3;
  text-transform: uppercase;
}
.page-404 .page-404-text {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
  color: #7f7f7f;
}
@media (max-width: 1024px) {
  .page-404 {
    min-height: calc(100dvh - var(--mobile-bar-h, 0px) - var(--mobile-footer-h, 0px));
  }
  .page-404 .page-404-code {
    margin-bottom: 0.6rem;
    font-size: clamp(4.4rem, 18vw, 7rem);
  }
  .page-404 .page-404-title {
    font-size: 1.8rem;
  }
}

/* ----- Custom Styles End ----- */