/* 공통 스타일 */
.jamdubong__section:not(:last-child) { margin-bottom: var(--space-180); }
.jamdubong__container { padding-top: 0; }
.jamdubong__title { color: var(--color-text-default); font-size: var(--font-size-title-page); font-weight: 700; line-height: var(--line-height-title-page); text-align: left; }
.jamdubong__figure { position: relative; }
.jamdubong__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jamdubong__caption { position: absolute; bottom: 0; left: 0; padding: var(--space-4) var(--space-20); background-color: rgba(255, 255, 255, 0.65); color: var(--color-text-muted); font-size: var(--font-size-body); font-weight: 500; line-height: var(--line-height-body); }
.jamdubong__row { display: flex; align-items: stretch; gap: var(--space-80); }
.jamdubong__text, .jamdubong__figure { flex: 1; }
.jamdubong__text { display: flex; flex-direction: column; gap: var(--space-40); }
.jamdubong__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__lead { margin-bottom: var(--space-60); color: var(--color-text-primary); font-size: var(--font-size-title-page); font-weight: 500; line-height: var(--line-height-title-page); text-align: center; }
.intro__figure-wrapper { position: relative; }
.intro__band { position: absolute; top: 50%; left: 0; z-index: 0; width: 100%; height: clamp(600px, calc(600px + (100vw - 1025px) * 130 / 895), 730px); background-color: #8E7B51; transform: translateY(-50%); }
.intro__container { position: relative; z-index: 1; padding-block: 0; }
.intro__figure { width: min(1200px, 100%); margin-inline: auto; aspect-ratio: 283 / 223; }

/* 양화진 잠두봉이 절두산 순교지가 되다 */
.yanghwajin__container { display: flex; flex-direction: column; gap: var(--space-100); }

/* 병인박해 그리고 병인양요 */
.byeongin__row { position: relative; }
.byeongin__row:nth-child(3) { --container-inset: calc((100vw - min(1264px, 90vw)) / 2 + var(--space-32)); padding-block: var(--space-100); }
.byeongin__container { padding-block: var(--space-100); }
.byeongin__band--dark .byeongin__container { padding-block: 0; }
.byeongin__row:nth-child(4) .byeongin__container{ display: flex; align-items: stretch; gap: var(--space-80); padding-bottom: 0; }
.byeongin__band { width: 100%; }
.byeongin__band--light { padding-block: var(--space-120); background-color: #8E7B51; }
.byeongin__band--dark { padding-block: var(--space-100); background-color: var(--color-surface-brand); }
.byeongin__band--light .byeongin__text { width: min(593px, 40%); }
.byeongin__band--dark .byeongin__text { position: relative; z-index: 1; width: min(713px, 50%); margin-left: auto; }
.byeongin__title, .byeongin__desc { color: var(--color-text-inverse); }
.byeongin__figure { position: absolute; top: 0; bottom: 0; }
.byeongin__row:nth-child(1) .byeongin__figure { right: 0; width: 50vw; }
.byeongin__row:nth-child(3) .byeongin__figure { left: var(--container-inset); width: clamp(380px, calc(380px + (100vw - 1025px) * 120 / 895), 500px); }


/* 김대건 신부 순교 100주년, 그리고 절두산순교성지 */
.kimdaegeon__row:nth-child(2) { --container-inset: calc((100vw - min(1264px, 90vw)) / 2 + var(--space-32)); position: relative; padding-block: var(--space-100); }
.kimdaegeon__container { padding-top: var(--space-100); }
.kimdaegeon__row:nth-child(2) .kimdaegeon__container { padding-block: 0; }
.kimdaegeon__title { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-60); }
.kimdaegeon__title span { text-align: center; }
.kimdaegeon__band { padding-block: var(--space-100); background-color: #E6E4E1; }
.kimdaegeon__text { position: relative; z-index: 1; width: min(560px, 42%); }
.kimdaegeon__row:nth-child(2) .kimdaegeon__figure { position: absolute; top: 0; bottom: 0; right: var(--container-inset); width: clamp(450px, calc(450px + (100vw - 1025px) * 150 / 895), 600px); }
.kimdaegeon__row:nth-child(4) .kimdaegeon__container { position: relative; height: clamp(620px, calc(620px + (100vw - 1025px) * 180 / 895), 800px); }
.kimdaegeon__row:nth-child(4) .kimdaegeon__figure { position: absolute;; }
.kimdaegeon__row:nth-child(4) .kimdaegeon__figure:nth-child(1) { top: var(--space-100); right: var(--space-32); z-index: 2; width: 40%; }
.kimdaegeon__row:nth-child(4) .kimdaegeon__figure:nth-child(2) { bottom: 0; left: var(--space-32); z-index: 1; width: 60%; }
.kimdaegeon__row:nth-child(7) .kimdaegeon__container { display: flex; align-items: stretch; gap: var(--space-30); }
.kimdaegeon__row:nth-child(7) .kimdaegeon__figure { flex: 1; }
.kimdaegeon__caption { background-color: rgba(255, 255, 255, 0.8); }
.kimdaegeon__row:last-child .kimdaegeon__figure { width: 65%; margin-inline: auto; }
.title-wrapper { padding-top: 0; }

@media (max-width: 1024px) {
  /* 공통 스타일 */
  .mobile-only { display: block; }
  .desktop-only { display: none; }
  .jamdubong__section:not(:last-child) { margin-bottom: var(--space-60); }
  .jamdubong__caption { padding-inline: var(--space-16); }
  .jamdubong__row { flex-direction: column; gap: var(--space-30); }
  .jamdubong__text { gap: var(--space-30); }

  /* 인트로 */
  .jamdubong__section.intro { margin-bottom: var(--space-50); }
  .intro__lead { margin-bottom: var(--space-50); }
  .intro__band { height: clamp(200px, calc(200px + (100vw - 360px) * 400 / 664), 600px); }
  .intro__figure { aspect-ratio: 179 / 141; }

  /* 양화진 잠두봉이 절두산 순교지가 되다 */
  .yanghwajin__container { gap: var(--space-30); }

  /* 병인박해 그리고 병인양요 */
  .byeongin__row:nth-child(3) { padding-block: 0; }
  .byeongin__container { padding-block: var(--space-60); }
  .byeongin__row:nth-child(3) .byeongin__container { display: flex; flex-direction: column; gap: var(--space-30); padding-block: 0; }
  .byeongin__row:nth-child(4) .byeongin__container { flex-direction: column-reverse; gap: var(--space-30); padding-bottom: 0; }
  .byeongin__band { padding-block: var(--space-40); }
  .byeongin__band--light .byeongin__text { width: 100%; }
  .byeongin__row:nth-child(3) .byeongin__text { width: 100%; margin-left: 0; }
  .byeongin__row:nth-child(1) .byeongin__figure, .byeongin__row:nth-child(3) .byeongin__figure { position: relative; top: auto; bottom: auto; right: auto; left: auto; width: 100%; }

  /* 김대건 신부 순교 100주년, 그리고 절두산순교성지 */
  .kimdaegeon__row:nth-child(2) { padding-block: 0; }
  .kimdaegeon__band { padding-block: var(--space-40); }
  .kimdaegeon__container { display: flex; flex-direction: column; gap: var(--space-30); padding-top: var(--space-40); }
  .kimdaegeon__row:nth-child(2) .kimdaegeon__container { padding-block: 0; }
  .kimdaegeon__row:nth-child(2) .kimdaegeon__figure { position: relative; top: auto; bottom: auto; right: auto; width: 100%; }
  .kimdaegeon__row:nth-child(4) .kimdaegeon__container { height: auto; }
  .kimdaegeon__row:nth-child(4) .kimdaegeon__figure:nth-child(1), .kimdaegeon__row:nth-child(4) .kimdaegeon__figure:nth-child(2) { position: relative; top: auto; bottom: auto; right: auto; left: auto; width: 100%; }
  .kimdaegeon__text { width: 100%; }
  .kimdaegeon__title { flex-direction: column; margin-bottom: var(--space-20); }
  .kimdaegeon__row:last-child .kimdaegeon__figure { width: 100%; }
  .title-wrapper { padding-top: 0; }
}