/* 공통 스타일 */
.cathedral__container { padding-block: var(--space-120); }
.section__title { display: flex; flex-direction: column; color: var(--color-text-muted); font-size: var(--font-size-title-page); font-weight: 700; line-height: var(--line-height-title-page); text-align: center; }
.section__title--row { display: flex; flex-wrap: wrap; justify-content: center; }
.section__title--row span { text-align: center; }
.cathedral__desc { color: var(--color-text-muted); font-size: var(--font-size-h3); font-weight: 500; line-height: var(--line-height-h3); text-align: justify; }

/* Intro Scene */
.intro-scene__pin { position: sticky; top: var(--header-height, 0px); z-index: 1; display: flex; flex-direction: column; max-height: calc(100svh - var(--header-height, 0px)); backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* Intro */
.intro { display: flex; flex: 1; flex-direction: column; position: relative; min-height: 0; background-color: #8e7b51; }
.intro__container { display: flex; flex: 1; min-width: 0; min-height: 0; }
.intro__text { display: flex; flex: 1; flex-direction: column; gap: var(--space-40); max-width: clamp(480px, calc(480px + (100vw - 1025px) * 200 / 895), 680px); min-width: 0; min-height: 0; }
.intro__title, .intro__desc { color: var(--color-text-inverse); }
.intro__title { display: flex; flex-wrap: wrap; flex-shrink: 0; text-align: left; }
.intro__body { flex: 1 1 auto; min-height: 0; max-height: 480px; overflow: hidden; transform: translateZ(0); }
.intro__track { will-change: transform; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.intro__desc + .intro__desc { margin-top: var(--space-40); }
.intro-scene.is-ready .intro__desc { opacity: 0; transform: translate3d(0, 24px, 0); }
.intro__figure { position: absolute; top: 0; right: 0; height: 100%; width: 42%; max-width: 900px; max-height: none; aspect-ratio: 2 / 3; overflow: hidden; }
.intro__figure img { width: 100%; height: 100%; object-fit: cover; }

/* Artworks 공통 스타일 */
.artworks__title { margin-bottom: var(--space-24); color: var(--color-text-accent); font-size: var(--font-size-h2); font-weight: 700; line-height: var(--line-height-h2); text-align: left; }
.band { position: relative; }
.band__container { padding-block: 430px 0; }
.band__visual { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.band__text { width: min(712px, 60%); padding: var(--space-80); margin-left: auto; background-color: rgba(255, 255, 255, 0.85); }

/* 순교자, 종탑, 십자가 (Artworks Row 01)  */
.card__list { display: flex; justify-content: center; gap: var(--space-32); margin-block: var(--space-100) 0; }
.card__item { display: flex; flex-direction: column; gap: var(--space-24); }
.card__item:nth-child(2) { padding-top: var(--space-100); }
.card__figure { aspect-ratio: 464 / 652; overflow: hidden; }
.card__title { margin-bottom: 0; }

/* Artworks fade-in-up / fade-in-left / fade-in-right */
.js-fade-in-up { opacity: 0; transform: translateY(16px); transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--reveal-index, 0) * 0.2s); will-change: opacity, transform; }
.js-fade-in-up.is-visible { opacity: 1; transform: translateY(0); will-change: auto; }
.js-fade-in-left { opacity: 0; transform: translateX(-32px); transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--reveal-index, 0) * 0.2s); will-change: opacity, transform; }
.js-fade-in-left.is-visible { opacity: 1; transform: translateX(0); will-change: auto; }
.js-fade-in-right { opacity: 0; transform: translateX(32px); transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1), transform 1.4s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--reveal-index, 0) * 0.2s); will-change: opacity, transform; }
.js-fade-in-right.is-visible { opacity: 1; transform: translateX(0); will-change: auto; }

/* 순교자의 모후, 빨마(절두산 길) (Artworks Row 03) */
.door-exhibit__item { display: flex; align-items: start; gap: var(--space-32); width: max(700px, 60%); }
.door-exhibit__item:nth-child(2) { align-items: end; flex-direction: row-reverse; margin-top: var(--space-30); margin-left: auto; }
.door-exhibit__item:nth-child(2) .artworks__title{ text-align: right; }

/* 자비의 문 (Artworks Row 04) */
.holy-door { padding-block: var(--space-100); }
.holy-door__figure { margin: 0 0 var(--space-24); overflow: hidden; }

/* 십자가 (Artworks Row 05) */
.cross { display: flex; align-items: flex-start; gap: var(--space-32); width: 100%; margin-inline: auto; }

/* 제대 (Artworks Row 06) */
.altar__visual { object-position: center bottom; }
.altar__text { margin-left: 0; }

/* 십자가의 길 (Artworks Row 07) */
.hand__container { display: grid; width: 80%; max-width: 1000px; padding-block: var(--space-120); grid-template-columns: 56px minmax(0, 1fr) 56px; column-gap: var(--space-32); row-gap: var(--space-24); }
.slide { display: grid; grid-column: 1 / -1; grid-template-columns: 56px minmax(0, 1fr) 56px; column-gap: var(--space-32); align-items: center; }
.slide__viewport { grid-column: 2; overflow: hidden; }
.slide__list { display: flex; width: 100%; transition: transform 0.35s ease; }
.slide__item { flex: 0 0 100%; min-width: 100%; }
.slide__figure { aspect-ratio: 4 / 3; overflow: hidden; }
.slide__figure img { width: 100%; height: 100%; object-fit: cover; }
.slider__nav { display: flex; position: relative; z-index: 1; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid #343537; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); color: var(--color-text-default); transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out; }
.slider__nav--prev { grid-column: 1; }
.slider__nav--next { grid-column: 3; }
.slider__nav .icon-arrow { width: 1.5rem; height: 1.5rem; }
.slider__nav:hover:not(:disabled) { border-color: var(--color-brand-accent); color: var(--color-text-accent); }
.slider__nav:disabled { opacity: 0.2; pointer-events: none; }
.hand__text { grid-row: 2; grid-column: 2; max-width: 580px; }

/* 김효임 골롬바와 김효주 아녜스 (Artworks Row 08) */
.glass-roof__container { padding-block: var(--space-24) var(--space-100); }
.glass-roof__figure { margin-inline: auto; }
.glass-roof__figure img { width: 100%; }

/* 순교자 (Artworks Row 09) — layout .container padding-top 상쇄 */
.martyr-glass__container { padding-block: 0; }
.martyr-glass__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-32); margin-bottom: var(--space-24); }
.martyr-glass__title { text-align: center; }

/* 순교, 안수 성모상 (Artworks Row 10) */
.leenamgyu-pair__container { padding-block: var(--space-120) 0; }
.leenamgyu-pair__list { display: flex; align-items: flex-start; gap: var(--space-32); }
.leenamgyu-pair__title { margin-top: var(--space-24); }

@media (max-width: 1200px) {
  .intro__figure { width: 40%; }
}

@media (max-width: 1024px) {
  /* 공통 스타일 */
  .desktop-only { display: none; }
  .cathedral__container { padding-block: var(--space-100); }

  /* Intro — text 창만 뷰포트 채움, figure는 같은 문서 흐름에 비율 유지로 존재 */
  .intro-scene__pin { height: auto; max-height: none; overflow: visible; }
  .intro__container { flex-direction: column; align-items: stretch; gap: var(--space-24); padding-block: var(--space-50); }
  .intro__text { flex: 0 0 auto; max-width: none; gap: var(--space-24); color: var(--color-text-inverse); }
  .intro__title { justify-content: center; text-align: center; }
  .intro__body { flex: 1 1 auto; min-height: 0; max-height: clamp(320px, 48vh, 460px); }
  .intro__figure { position: static; flex: 0 0 auto; width: 90%; max-width: 1264px; height: auto; max-height: none; margin-inline: auto; padding-inline: var(--space-32); padding-bottom: var(--space-50); box-sizing: border-box; aspect-ratio: 41 / 52; }
  .intro-scene.is-ready .intro__figure { opacity: 0; transform: translateY(16px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
  .intro-scene.is-ready .intro__figure.is-visible { opacity: 1; transform: translateY(0); }

  /* Artworks 공통 스타일 */
  .band__container { padding-block: 300px 0; }
  .band__text { width: min(712px, 55%); padding: var(--space-50); }

  /* 순교자, 종탑, 십자가 (Artworks Row 01)  */
  .card__list {flex-wrap: wrap; margin-top: var(--space-50); }
  .card__item { width: calc((100% - var(--space-32)) / 2); }
  .card__item:nth-child(2) { padding-top: 0; }

  /* 순교자의 모후, 빨마(절두산 길) (Artworks Row 03) */
  .door-exhibit__item { width: 100%; }

  /* 십자가 (Artworks Row 05) */
  .cross { width: 100%; }
  .cross__figure, .cross__text { flex: 1; min-width: 0; }

  /* 십자가의 길 (Artworks Row 07) */
  .hand__container { width: 90%; padding-block: var(--space-100); }

  /* 순교, 안수 성모상 (Artworks Row 10) */
  .leenamgyu-pair__container { padding-block: var(--space-100) 0; }
}

@media (max-width: 768px) {
  /* 공통 스타일 */
  .cathedral__container { padding-block: var(--space-50); }

  /* Intro */
  .intro__container { padding-block: 3rem; gap: var(--space-20); }
  .intro__text { flex: 0 0 auto; gap: var(--space-20); }
  .intro__title span { text-align: center; }
  .intro__body { max-height: clamp(280px, 42vh, 420px); }
  .intro__desc + .intro__desc { margin-top: var(--space-30); }
  .intro__figure { padding-inline: 0; }

  /* Artworks 공통 스타일 */
  .band__visual { position: relative; }
  .band__container { padding-top: var(--space-24); }
  .band__text { width: 100%; padding: 0; }

  /* 순교자, 종탑, 십자가 (Artworks Row 01)  */
  .card__item { width: 100%; }

  /* 순교자의 모후, 빨마(절두산 길) (Artworks Row 03) */
  .door-exhibit__item { flex-direction: column; gap: var(--space-24); width: 100%; }
  .door-exhibit__item:nth-child(2) { flex-direction: column; margin-top: var(--space-32); }
  .door-exhibit__item:nth-child(2) .artworks__title{ text-align: left; }

  /* 자비의 문 (Artworks Row 04) */
  .holy-door { padding-block: var(--space-50); }

  /* 십자가 (Artworks Row 05) */
  .cross { flex-direction: column; gap: var(--space-24); }

  /* 십자가의 길 (Artworks Row 07) */
  .hand__container { grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: var(--space-20); padding-block: var(--space-50); }
  .slide { grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: var(--space-20); }
  .slider__nav { width: 44px; height: 44px; }

  /* 김효임 골롬바와 김효주 아녜스 (Artworks Row 08) */
  .glass-roof__container { padding-block: var(--space-24) var(--space-50); }

  /* 순교자 (Artworks Row 09) */
  .martyr-glass__list { grid-template-columns: 1fr; }
  .martyr-glass__title { text-align: left; }

  /* 순교, 안수 성모상 (Artworks Row 10) */
  .leenamgyu-pair__container { padding-block: var(--space-50) 0; }
  .leenamgyu-pair__list { flex-direction: column; gap: var(--space-24); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-scene { height: auto !important; }
  .intro-scene__pin { position: static; }
  .intro__body { height: auto; max-height: none; overflow: visible; }
  .intro-scene.is-ready .intro__desc { opacity: 1; transform: none; }
  .intro-scene.is-ready .intro__figure { opacity: 1; transform: none; transition: none; }
  .js-fade-in-up,
  .js-fade-in-left,
  .js-fade-in-right { opacity: 1; transform: none; transition: none; }
}