/* ==========================================================
   소망잇는교회 — The Hub for Hopes Church
   STUDIO FOI 브랜드 디자인(2022) 기반
   Blue #2CA3FF · Noto Serif KR · Montserrat · Pretendard

   히어로 = 풀페이지 슬라이드(scroll-snap). 한 번 슬라이드하면
   관성으로 다음 씬에 스냅되고, 진입 시 애니메이션(.active)이 재생.
   (스크롤 스크럽 버전은 _backup_old/v9-scrub/ 참고)
   ========================================================== */

:root {
  --blue: #2CA3FF;
  --blue-soft: rgba(255, 255, 255, 0.72);   /* 파란 바 위 세리프 텍스트 */
  --ink: #0b0b0e;
  --paper: #ffffff;
  /* ②③의 바탕 — 흰 종이(카드)가 한 장으로 떠 보이려면 바탕이
     종이보다 아주 살짝 어두워야 한다. 흰 위의 흰은 그림자밖에 안 남는다 */
  --sheet-bg: #f1f5f9;
  /* 카드 종이의 위·아래 여백 — 종이 높이는 '내용 높이 + 이 여백 ×2'다.
     화면 높이로 채우면 종이가 아니라 그냥 흰 배경으로 읽힌다.
     실제 내용 높이는 script.js 가 재서 --sheet-h 로 넣는다 */
  --sheet-pad: clamp(26px, 4.6vh, 56px);
  --sheet-bot: clamp(48px, 7vh, 74px);
  --gray: #8a8f98;
  --serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
  --eng: "Montserrat", var(--sans);
  --header-h: 72px;
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ② 세로 성구 띠의 좌표 — 히어로 실선(.hero-thread)이 정확히 이 자리에
     착지해야 하므로 한 곳에서만 정의하고 양쪽이 함께 참조한다. */
  --bar-x: clamp(24px, 8vw, 140px);   /* 첫 선의 왼쪽 여백 */
  --bar-w: clamp(30px, 3.4vw, 50px);  /* 선 두께 */
  --bar-gap: clamp(26px, 3.2vw, 46px); /* 선 사이 간격 */

  /* ③ 가로 밴드 두께. 밴드는 clip-path로 그어지는데 clip-path는 그림자까지
     같이 잘라내므로, 그림자는 같은 크기의 ::after 판에 따로 그린다.
     두 곳이 어긋나면 그림자가 밴드를 벗어나니 한 곳에서만 정의한다. */
  --band-h: clamp(34px, 4.4vw, 54px);

  /* 카드가 떠오를 때의 그림자 — 선 한 장 한 장이 종이처럼 배경에서 떠오른다.
     ②의 카드는 화면 높이를 꽉 채워 위아래 그림자가 화면 밖으로 잘리므로,
     실제로 보이는 건 좌우뿐이다. 그래서 blur 를 좁게 모으고(넓게 흩으면
     흰 바탕에서 사라진다) 음수 spread 로 번짐을 선 가까이 붙들어 둔다.
     시작값도 같은 2겹이어야 box-shadow 가 층끼리 부드럽게 보간된다. */
  --lift-off: 0 0 0 -3px rgba(20, 74, 124, 0), 0 0 0 -2px rgba(20, 74, 124, 0);
  --lift-on: 0 12px 22px -2px rgba(20, 74, 124, 0.30), 0 3px 9px -1px rgba(20, 74, 124, 0.20);
  /* 떠오르는 도중 한 번 더 높이 뜨는 지점 — 이 값을 지나 --lift-on 에 정착하면
     그냥 켜지는 게 아니라 종이 한 장이 둥실 떴다가 내려앉는 결이 된다. */
  --lift-over: 0 20px 30px -2px rgba(20, 74, 124, 0.36), 0 6px 14px -1px rgba(20, 74, 124, 0.24);

  /* 히어로 HOPE 마크 폭. script.js 가 이 크기를 재서 실선 좌표(--h1-*)를
     계산하므로, 마크 크기를 바꾸면 실선도 자동으로 따라온다. */
  --hope-w: min(56vw, 760px);

  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* 히어로 4씬(①~④)은 script.js가 손가락 제스처 한 번당 한 씬씩
     풀스크린으로 넘김(rAF 커스텀 스크롤). ⑤ 공동체·푸터는 네이티브 자유 스크롤.
     CSS scroll-behavior는 커스텀 스크롤과 이중 적용되지 않도록 두지 않음. */
}

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ==========================================================
   오버레이 헤더 — 히어로 위 고정. 검정 오버레이 + 흰 로고
   상단은 그라데이션, 공동체(밝은 배경) 진입 시 .solid로 전환
   ========================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* 배경 그라데이션은 전체 폭, 로고·네비는 1280px 중앙 컨테이너에 정렬 */
  padding: 0 max(clamp(18px, 4vw, 40px), calc((100% - 1280px) / 2));
  background: transparent;           /* 그라데이션은 ::before로 (헤더보다 아래로 확장) */
  transition: background 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft);
  pointer-events: none;              /* 그라데이션 여백은 클릭 통과 */
}
.site-header > * { pointer-events: auto; }

/* 오버레이 그라데이션 — 헤더 박스보다 아래로 더 길게 퍼지고, 연하게 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--header-h) + 82px);
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.44) 0%,
    rgba(0, 0, 0, 0.26) 38%,
    rgba(0, 0, 0, 0.10) 70%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.5s var(--ease-soft);
}

.site-header.solid {
  background: rgba(11, 11, 14, 0.88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-header.solid::before { opacity: 0; }  /* 공동체 진입 시 그라데이션 숨김 */

.site-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-brand img {
  height: 34px; width: auto;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
}

.site-nav {
  display: flex; align-items: center;
  gap: clamp(13px, 2.4vw, 30px);
}
.site-nav a {
  position: relative;
  font-family: var(--eng);
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.25s var(--ease-soft);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.site-nav a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: #fff;
  transition: right 0.3s var(--ease-soft);
}
.site-nav a:hover,
.site-nav a:focus-visible { color: #fff; }
.site-nav a:hover::after,
.site-nav a:focus-visible::after { right: 0; }

@media (max-width: 560px) {
  :root { --header-h: 62px; }
  .site-brand img { height: 27px; }
  .site-nav { gap: 12px; }
  .site-nav a { font-size: 11.5px; letter-spacing: 0.02em; }
}

/* ==========================================================
   풀페이지 씬 공통
   ========================================================== */
.scene {
  position: relative;
  height: 100vh;    /* fallback */
  height: 100dvh;   /* 모바일 주소창 반영 — 씬이 화면에 딱 맞게 스냅 */
  overflow: hidden;
}

/* ---------- 공통 리빌 (히어로 이후 섹션) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-soft) var(--d, 0s),
              transform 0.9s var(--ease-soft) var(--d, 0s);
}
.in .reveal, .reveal.in { opacity: 1; transform: none; }

/* ==========================================================
   ① 무지개 사진 + 성구
   ========================================================== */
.scene-photo { background: var(--ink); }
.scene-photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.1s var(--ease-soft), transform 1.8s var(--ease-soft);
}
.scene-photo.active .scene-photo-img { opacity: 1; transform: scale(1); }

.photo-verse {
  position: absolute;
  top: clamp(90px, 13vh, 160px);
  right: clamp(24px, 8vw, 150px);
  font-family: var(--serif);
  font-size: clamp(19px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.85;
  text-align: left;
  color: #fff;
  text-shadow: 0 1px 20px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease-soft) 0.35s, transform 1s var(--ease-soft) 0.35s;
}
.scene-photo.active .photo-verse { opacity: 1; transform: none; }
.photo-verse cite {
  display: block; margin-top: 1em;
  font-style: normal; font-size: 0.62em; font-weight: 400; opacity: 0.88;
}

/* ---- HOPE 마크 — 화면 한가운데, 왼쪽에서 오른쪽으로 그어지듯 ---- */
.hero-mark {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: var(--hope-w);
  color: #fff;
  /* 사진 중앙부가 밝아(평균 129/255) 흰 획이 묻히므로 그림자를 두 겹으로 */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 42px rgba(0, 0, 0, 0.38));
  opacity: 0;
  transition: opacity 0.5s ease 0.35s;
}
.hero-mark svg {
  display: block; width: 100%; height: auto;
  clip-path: inset(0 100% 0 0);   /* 왼쪽 → 오른쪽으로 그어짐 */
  transition: clip-path 1.2s var(--ease-soft) 0.35s;
}
.scene-photo.active .hero-mark { opacity: 1; }
.scene-photo.active .hero-mark svg { clip-path: inset(0 0 0 0); }

/* 아래로 스크롤하는 순간(.leaving) — 마크 전체가 조용히 사라지고,
   H의 왼쪽 세로획 3개 자리는 .hero-threads 실선이 그대로 이어받는다 */
.scene-photo.leaving .hero-mark {
  opacity: 0;
  transition: opacity 0.42s ease;
}

/* ---- H 왼쪽 세로획 3개 → ② 파란 세로선 3개로 이어지는 실선 ----
   ①에 머무는 동안은 아무것도 없다(로고 원형 그대로).
   아래로 스크롤하는 순간 획 3개의 실제 자리(--sx/--sy/--sw/--sh)에서
   나타나 화면 높이만큼 커지고, 씬이 넘어가는 동안 ② 세로선의 실측
   자리(--bx/--bw)로 이동해 파란 선이 된다. 좌표는 script.js 가 넣는다. */
.hero-threads i {
  position: fixed;
  left: var(--sx, 50%);
  top: var(--sy, 50%);
  width: var(--sw, 6px);
  height: var(--sh, 100px);
  background: #fff;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: none;
}
/* 1단계 — 제스처 직후, 두 박자로 나뉜다:
   (a) 나머지 철자가 페이드아웃되는 동안 획 3줄이 제자리에서
       ② 선 두께·간격으로 먼저 커지고 (0.34s)
   (b) 두께가 다 되면 그때부터 아래로 내려간다 (0.46s, height 지연).
   위(top)는 획 상단에 고정 — 위로는 안 자란다. */
.hero-threads.drop i {
  opacity: 1;
  left: var(--dx, var(--sx));
  width: var(--bw, var(--bar-w));
  height: calc(100vh - var(--sy));
  height: calc(100dvh - var(--sy));
  transition:
    left 0.34s var(--ease-soft),
    width 0.34s var(--ease-soft),
    height 0.46s var(--ease-soft) 0.34s,
    opacity 0.1s ease;
}
/* 스태거 — 순서: left, width, height(내려옴), opacity */
.hero-threads.drop i:nth-child(2) { transition-delay: 0.07s, 0.07s, 0.41s, 0.07s; }
.hero-threads.drop i:nth-child(3) { transition-delay: 0.14s, 0.14s, 0.48s, 0.14s; }
/* 2단계 — 씬이 넘어가는 동안: 각자 ② 세로선 자리로 이동하며 위까지 채워지고
   파랗게 물든다. 도착하면 실제 .vbar 에 바통을 넘기고 사라진다 */
.hero-threads.to-bar i {
  left: var(--bx, var(--bar-x));
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: var(--bw, var(--bar-w));
  background: var(--blue);
  opacity: 0;
  transition:
    left 0.62s var(--ease-soft),
    top 0.62s var(--ease-soft),
    height 0.62s var(--ease-soft),
    width 0.62s var(--ease-soft),
    background 0.62s var(--ease-soft),
    opacity 0.4s ease 0.75s;
}
.hero-threads.to-bar.landed i { opacity: 0; transition: none; }
/* 스태거 — 마지막 값은 opacity(사라짐)용 지연 */
.hero-threads.to-bar i:nth-child(2) { transition-delay: 0.06s, 0.06s, 0.06s, 0.06s, 0.06s, 0.81s; }
.hero-threads.to-bar i:nth-child(3) { transition-delay: 0.12s, 0.12s, 0.12s, 0.12s, 0.12s, 0.87s; }

.hero-tagline {
  position: absolute;
  left: 50%; translate: -50% 0;
  bottom: clamp(72px, 12vh, 130px);
  font-family: var(--serif);
  font-size: clamp(15px, 1.7vw, 21px);
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 1px 22px rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 1s var(--ease-soft) 0.7s;
}
.scene-photo.active .hero-tagline { opacity: 1; }
.hero-tagline strong { color: #fff; font-weight: 500; }

/* ---- 스크롤 큐 ---- */
.scroll-cue {
  position: absolute; bottom: 26px; left: 50%;
  width: 1px; height: 44px;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.6s ease 1.1s;
}
.scene-photo.active .scroll-cue { opacity: 1; }
.scroll-cue span {
  position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--blue);
  animation: cueDrop 2s ease-in-out infinite;
}
@keyframes cueDrop { 60% { top: 100%; } 100% { top: 100%; } }

/* ==========================================================
   카드 공통 (②·③) — 파란 선 하나 = 카드 한 장
   선(세로선/가로 밴드)이 카드의 등이고, 열린 카드만 흰 내용이
   선에 붙어 펼쳐진다. 열림 정도·드래그 보간은 script.js 가
   인라인 스타일(width/height/opacity)로 넣는다.
   제스처는 씬 전체에서 받는다(손가락 1:1 추적).
   ========================================================== */
.scene-bars, .scene-bands {
  touch-action: pan-y;      /* 가로 드래그는 JS가 처리 */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.scene-bars.dragging, .scene-bands.dragging { cursor: grabbing; }
.scene-bars img, .scene-bands img { -webkit-user-drag: none; }

/* 닷이 아니라 가로 레일 — 점 세 개는 '몇 장인지'만 알려주지만
   같은 길이의 막대 세 칸은 '어디까지 왔는지'를 자로 잰 듯 보여준다 */
.cards-nav {
  position: absolute;
  bottom: 14px; left: 50%;
  translate: -50% 0;
  display: flex; align-items: center;
  gap: clamp(6px, 1vw, 14px);
  z-index: 5;
}
.cards-dots {
  display: flex; gap: 6px;
}
/* 레일 양옆의 ‹ › — 카드가 좌우로 넘어간다는 걸 말없이 알려준다.
   레일과 같은 농도의 잉크색이라 화면을 어지럽히지 않는다. */
.cards-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  padding: 0; border: 0; background: none;
  color: rgba(11, 11, 14, 0.32);
  cursor: pointer;
  transition: color 0.3s var(--ease-soft), opacity 0.3s var(--ease-soft);
}
.cards-arrow svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.cards-arrow:hover, .cards-arrow:focus-visible { color: var(--blue); }
/* 끝 카드에선 눌러도 갈 곳이 없다 — 지우지 않고 흐리게 남겨 자리를 지킨다 */
.cards-arrow[disabled] { opacity: 0.28; cursor: default; color: rgba(11, 11, 14, 0.32); }
/* 막대는 3px지만 그대로 두면 손가락이 못 짚는다 —
   위아래 여백까지 버튼으로 두고, 칠하는 건 가운데 3px 뿐 */
.cards-dots button {
  width: clamp(44px, 5vw, 64px); height: 25px;
  padding: 11px 0;
  background-clip: content-box;
  border-radius: 0; border: 0;
  background-color: rgba(11, 11, 14, 0.13);
  cursor: pointer;
  transition: background-color 0.35s var(--ease-soft);
}
.cards-dots button.on { background-color: var(--blue); }

.card-eyebrow {
  font-family: var(--eng);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--blue);
  margin-bottom: 18px;
}
.card-title {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 18px;
}
.card-copy {
  font-size: clamp(13.5px, 1.15vw, 15.5px);
  line-height: 1.85;
  color: var(--gray);
  margin-bottom: 22px;
  max-width: 52ch;
}
.card-photo {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9;
  max-height: 30vh;
  background: #eef1f4;
  border: 1px dashed #cdd4dc;
  color: #9aa3ae;
  font-size: 13px;
  margin-bottom: 20px;
}
.card-more {
  display: inline-block;
  /* .acc-inner/.itda-card 가 세로 flex 라 그냥 두면 칸 너비만큼 늘어나
     밑줄이 카드 오른쪽 끝까지 그어진다 — 글자 폭만 차지하게 묶어 둔다 */
  align-self: flex-start;
  font-family: var(--eng);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 3px;
}
.card-more span { transition: translate 0.25s var(--ease-soft); display: inline-block; }
.acc-card:hover .card-more span,
.band-card:hover .card-more span { translate: 4px 0; }

/* ==========================================================
   ② 말씀 — 세로선 3개는 왼쪽에 나란히(히어로 H 획이 착지하는 자리),
   오른쪽에 흰 카드 덱
   ========================================================== */
.scene-bars { background: var(--sheet-bg); }
/* 아코디언 — 닫힌 상태에선 선 3개만 왼쪽에 나란히(히어로 착지 자리),
   열린 카드만 선 옆으로 내용(.acc-body)이 펼쳐진다 */
.accord {
  height: 100%;
  display: flex;
  align-items: stretch;
  gap: var(--bar-gap);
  padding: 0 var(--bar-x);
}
/* 종이 위에 놓인 한 장 — 자기 선이 다 그어진 뒤에야 카드마다 순서대로
   아주 옅은 그림자가 번지며 떠오른다. 좌우로 넘길 수 있는 '한 장'이라는
   걸 아래 닷 페이지네이션과 함께 몸으로 알아채게 하는 장치.

   그림자는 카드 상자가 아니라 '파란 선 크기의 판' 하나에만 준다.
   카드 상자에 주면 흰 본문의 오른쪽 끝(화면 한가운데)에도 그림자가
   생겨 있지도 않은 흰 경계선이 그어진 것처럼 보이기 때문이다.
   떠오르는 건 어디까지나 파란 선이고, 흰 본문은 그 선에 딸려 온다.
   (.vbar 자신은 clip-path 로 그어지는데 clip-path 가 그림자까지
    잘라내므로, 같은 자리·같은 크기의 판을 따로 깔아 그 판에 준다) */
/* 떠오름 — 없다가 --lift-over 까지 한 번 높이 떴다가 --lift-on 으로 내려앉는다.
   ②의 카드는 화면 높이를 꽉 채워 위아래 그림자가 잘리므로, 좌우로 보이는
   그림자의 '커졌다 잦아드는' 폭이 곧 떠오르는 높이로 읽힌다. */
@keyframes lift-in {
  0%   { box-shadow: var(--lift-off); }
  58%  { box-shadow: var(--lift-over); }
  100% { box-shadow: var(--lift-on); }
}
/* 떠오르며 한 번 튕김 — 뜨는 도중 제 자리에서 옆으로 밀렸다 되돌아온다.
   그림자만 짙어지면 '떠 있다'까지는 읽혀도 '넘길 수 있다'가 안 읽힌다.
   미는 건 카드(.acc-card) 통째로다 — 선·종이·본문이 한 몸이라야
   '선이 그어진 종이 한 장'이 움직인 것으로 보인다. 예전처럼 선과
   그림자 판만 밀면 열린 본문 글자가 제자리에 남아 종이만 어긋난다.
   밀리는 폭은 선 사이 간격에 매어 둔다 — 시차 덕에 옆 카드가
   되돌아오는 중이라 0.8 배까지 밀어도 서로 닿지 않는다.
   (데스크톱은 간격이 넓어 그대로 두면 과해서 20px 에서 끊는다) */
@keyframes card-bounce {
  0%   { transform: translateX(0); }
  36%  { transform: translateX(calc(min(var(--bar-gap) * 0.8, 20px) * -1)); }
  74%  { transform: translateX(min(var(--bar-gap) * 0.2, 5px)); }
  100% { transform: translateX(0); }
}
/* ③ 밴드는 줄 전체(띠 + 좌우 라벨 + 그림자 판)가 함께 밀려야 한 장이 된다 */
@keyframes row-bounce {
  0%   { transform: translateX(0); }
  36%  { transform: translateX(calc(clamp(9px, 2.4vw, 18px) * -1)); }
  74%  { transform: translateX(calc(clamp(9px, 2.4vw, 18px) * 0.28)); }
  100% { transform: translateX(0); }
}

.acc-card {
  position: relative;
  display: flex; align-items: stretch;
}
/* 카드의 몸 = 흰 종이 한 장. 왼쪽 끝이 곧 파란 선의 왼쪽 끝이고,
   오른쪽 끝은 본문이 열린 만큼 따라 늘어난다(left/right 0 이라
   .acc-card 폭 = 선 + 열린 본문 을 그대로 받는다).
   위아래는 화면에 닿기 전에 끝나 종이의 윗변·아랫변이 보인다 —
   선은 화면 위아래 끝까지 그대로 뻗어 이 종이를 관통한다.
   닫힌 카드에선 종이가 선 뒤에 정확히 가려져 그림자만 남는다. */
.acc-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%; height: calc(var(--sheet-h, 42vh) + var(--sheet-pad) * 2);
  transform: translateY(-50%);
  background: var(--paper);
  pointer-events: none;
  box-shadow: var(--lift-off);
}
/* 한 장씩 차례로 둥실 뜨며 튕긴다 — 씬을 벗어나면 .active 가 빠지며
   애니메이션도 걷혀, 다시 들어올 때마다 처음부터 떠오른다.
   선(.vbar)에도 같은 걸 걸어 판과 한 몸으로 움직인다. 선은 clip-path 로
   잘려 있어 여기 실린 box-shadow 는 어차피 보이지 않는다. */
.scene-bars.active .acc-card { animation: card-bounce 0.95s var(--ease-soft) both; }
.scene-bars.active .acc-card::before { animation: lift-in 0.95s var(--ease-soft) both; }
/* 히어로에서 내려온 진입에선 선이 이미 다 그어진 채 서 있으므로
   착지 직후 바로 떠오른다 (다른 데서 들어오면 그어지는 중에 겹친다) */
.scene-bars.active .acc-card:nth-child(1),
.scene-bars.active .acc-card:nth-child(1)::before { animation-delay: 0.50s; }
.scene-bars.active .acc-card:nth-child(2),
.scene-bars.active .acc-card:nth-child(2)::before { animation-delay: 0.60s; }
.scene-bars.active .acc-card:nth-child(3),
.scene-bars.active .acc-card:nth-child(3)::before { animation-delay: 0.70s; }
.vbar {
  flex: 0 0 var(--bar-w);
  width: var(--bar-w);
  /* 종이(::before) 위에 그어진 선 — 절대배치된 ::before 가 정적인
     .vbar 보다 나중에 칠해지므로, 세워 두지 않으면 흰 종이가 선을 덮는다 */
  position: relative; z-index: 2;
  background: var(--blue);
  display: flex; justify-content: center;
  align-items: flex-start;         /* 세로 영문을 선 상단에 고정 */
  overflow: hidden;
  clip-path: inset(0 0 100% 0);   /* 위→아래로 그어짐 */
  transition: clip-path 1s var(--ease-soft);
}
/* 왼쪽 선부터 순차로 — 히어로 실선 3개가 이 자리에 그대로 착지한다 */
.acc-card:nth-child(1) .vbar { transition-delay: 0s; }
.acc-card:nth-child(2) .vbar { transition-delay: 0.12s; }
.acc-card:nth-child(3) .vbar { transition-delay: 0.24s; }
.scene-bars.active .vbar { clip-path: inset(0 0 0 0); }
/* 히어로에서 실선이 그대로 내려온 진입에선 선을 새로 긋지 않는다.
   화면엔 이미 다 그어진 실선이 서 있는데 그 자리에서 진짜 선이
   위에서부터 다시 그어지면, 아직 안 그어진 아랫동강만 실선의
   옅은 흰빛으로 비쳐 두 선이 어긋나 겹쳐 보인다.
   바통을 넘겨받듯 처음부터 다 그어진 채로 서 있게 하고,
   실선이 다 사라진 뒤 script.js 가 이 클래스를 뗀다
   (히어로를 거치지 않은 다음 진입부턴 다시 그어진다). */
.scene-bars.from-hero .vbar {
  transition: none;
  clip-path: inset(0 0 0 0);
  opacity: 0;          /* 실선이 아직 이동 중 — 진짜 선은 숨어서 기다린다 */
}
/* 실선이 선 자리에 '정확히' 도착한 프레임에 script.js 가 landed 를 붙인다.
   그 한 프레임에 진짜 선이 켜지고 실선이 꺼져, 둘이 함께 보이는 순간이
   아예 없다. 예전처럼 서로 페이드로 교차하면 아직 도착이 덜 된 실선과
   제자리의 선이 나란히 서서 파란 선이 두 겹으로 보였다. */
.scene-bars.from-hero.landed .vbar { opacity: 1; }
.vbar span {
  font-family: var(--serif);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: max-content;
  font-size: clamp(13px, 1.4vw, 20px);
  color: var(--blue-soft);
  padding-block: 18px;
  white-space: nowrap;
}
.acc-body {
  width: 0;                        /* 열림 정도는 JS가 width 로 보간 */
  overflow: hidden;
  position: relative; z-index: 1;  /* 글자도 종이 위에 (같은 이유) */
}
.acc-inner {
  /* 폭은 JS가 열린 카드 기준(px)으로 고정 — 드래그 중 리플로 방지 */
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  /* 위아래를 같은 값으로 — 내용이 화면 정가운데에 앉아야
     같은 자리에 세로 가운데로 잡은 종이(::before)와 딱 겹친다 */
  padding: calc(var(--header-h) + 20px) clamp(20px, 3vw, 56px);
  opacity: 0;                      /* 열림 정도 따라 JS가 보간 */
}
.bars-verse {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.8;
  color: var(--blue);
  margin-bottom: 20px;
}
.bars-verse cite {
  display: block; margin-top: 1em;
  font-style: normal; font-size: 0.58em; font-weight: 400;
}

/* ==========================================================
   ③ 잇다 — 밴드 3줄은 위쪽에 항상 전부 보이고,
   아래에 흰 카드 3장이 겹친 스택. 맨 앞 장이 좌로 나간다.
   카드별 transform 은 script.js(makeDeck)가 넣는다.
   ========================================================== */
.scene-bands {
  background: var(--sheet-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;     /* 밴드 3줄 + 그 밑의 카드 = 한 덩어리 */
  padding-top: calc(var(--header-h) + 2vh);
  /* 카드 종이가 화면 밑바닥에 닿지 않고 여기서 끝난다 — 아랫변이 보여야
     '한 장'으로 읽히고, 남은 자리에 닷 레일이 앉는다 (②와 같은 값) */
  padding-bottom: var(--sheet-bot);
}
.bands-wrap { flex: none; }
.band-row { position: relative; margin-bottom: clamp(16px, 2.6vh, 30px); }
/* 맨 아래 밴드는 카드 종이의 '윗변'이다 — 사이를 띄우면 띠 따로 카드 따로가 된다 */
.band-row:last-child { margin-bottom: 0; }
/* 밴드와 똑같은 크기의 투명한 판 — 그림자만 그린다.
   밴드 본체는 clip-path 로 잘려서 그림자를 못 다니 대신 세워 둔 판이다.
   배경이 없어 밴드를 가리지 않고, 아래 밴드가 위 밴드의 그림자를
   덮으면서 카드가 겹쳐 쌓인 것처럼 층이 생긴다.
   판은 .band-row 안에 있어서 카드를 넘길 때 밴드와 함께 움직인다. */
.band-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--band-h);
  pointer-events: none;
  box-shadow: var(--lift-off);
}
.scene-bands.active .band-row::after { animation: lift-in 0.95s var(--ease-soft) both; }
.scene-bands.active .band-row { animation: row-bounce 0.95s var(--ease-soft) both; }
/* 띠가 펴지는 결에 바로 이어붙인다 (띠: 0.12/0.3/0.48s 시작) */
.scene-bands.active .band-row:nth-child(1),
.scene-bands.active .band-row:nth-child(1)::after { animation-delay: 0.60s; }
.scene-bands.active .band-row:nth-child(2),
.scene-bands.active .band-row:nth-child(2)::after { animation-delay: 0.74s; }
.scene-bands.active .band-row:nth-child(3),
.scene-bands.active .band-row:nth-child(3)::after { animation-delay: 0.88s; }
.band-labels {
  display: flex; justify-content: space-between;
  font-family: var(--serif);
  font-size: clamp(13px, 1.5vw, 19px);
  color: var(--blue);
  margin-bottom: 6px;
  padding: 0 clamp(20px, 5vw, 80px);
  opacity: 0;
  transition: opacity 0.7s ease;
}
.band {
  height: var(--band-h);
  background: var(--blue);
  display: flex; align-items: center;
  padding: 0 clamp(20px, 5vw, 80px);
  gap: clamp(12px, 1.8vw, 28px);
  clip-path: inset(0 100% 0 0);   /* 왼쪽→오른쪽으로 그어짐 */
  transition: clip-path 1s var(--ease-soft);
}
/* 밴드 3줄 순차 재생 */
.band-row:nth-child(1) .band-labels { transition-delay: 0.1s; }
.band-row:nth-child(1) .band { transition-delay: 0.12s; }
.band-row:nth-child(2) .band-labels { transition-delay: 0.28s; }
.band-row:nth-child(2) .band { transition-delay: 0.3s; }
.band-row:nth-child(3) .band-labels { transition-delay: 0.46s; }
.band-row:nth-child(3) .band { transition-delay: 0.48s; }
.scene-bands.active .band-labels { opacity: 1; }
.scene-bands.active .band { clip-path: inset(0 0 0 0); }
.band em {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(17px, 2.4vw, 32px);
  color: var(--blue-soft);
  white-space: nowrap;
  line-height: 1;
}
.band-line {
  flex: 1;
  height: 2px;
  background: var(--blue-soft);
  opacity: 0.8;
}
/* 밴드 아래 내용 — 흰 박스 없이 원래 디자인 그대로.
   내용 하나 = 자기 밴드와 한 세트(카드)라서, 넘길 때
   밴드와 함께 좌우로 슬라이드된다(transform 은 JS가 넣는다) */
.itda-slider {
  position: relative;
  /* 카드가 전부 absolute 라 제 높이가 0 이다 — script.js 가 가장 높은
     카드만큼 --deck-h 를 넣어 준다. 그래야 밴드+카드가 한 덩어리로
     화면 가운데에 앉는다 */
  flex: none;
  min-height: var(--deck-h, 34vh);
}
/* 카드 한 장 = 맨 아래 밴드 바로 밑에 붙은 흰 종이.
   밴드가 이 종이의 윗변이라, 띠와 내용이 한 덩어리로 읽힌다
   (②에서 파란 선이 종이를 관통하는 것과 같은 문법) */
.itda-card {
  position: absolute;
  top: 0; left: 0; right: 0;   /* 높이는 내용만큼 — 밑변이 보여야 '한 장'이다 */
  background: var(--paper);
  box-shadow: var(--lift-off);
  padding: clamp(22px, 4vh, 46px) clamp(20px, 5vw, 80px) clamp(30px, 5vh, 56px);
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start;
  will-change: transform;
  transform-origin: left center;   /* 뒤 계층 카드가 왼쪽 기준으로 살짝 작아짐 */
}
/* 맨 아래 밴드가 다 펴진 직후, 그 밑의 종이가 이어서 떠오른다 */
.scene-bands.active .itda-card { animation: lift-in 0.95s var(--ease-soft) 0.88s both; }
/* 씬 진입 시 내용이 스르륵 나타난다. 세로로 밀어 올리면 그 0.8초 동안
   밴드와 종이 사이가 벌어져 다시 '띠 따로 카드 따로'가 되므로 농도만 쓴다 */
.scene-bands .itda-slider {
  opacity: 0;
  transition: opacity 0.8s var(--ease-soft) 0.55s;
}
.scene-bands.active .itda-slider { opacity: 1; }
.band-sum {
  font-family: var(--serif);
  font-size: clamp(19px, 2.4vw, 31px);
  font-weight: 500;
  line-height: 1.6;
  color: var(--blue);
  margin-bottom: 14px;
}
.band-sum small { font-size: 0.55em; font-weight: 400; }

/* ==========================================================
   ④ HOPE 로고 완성 + 이번 주 주일예배
   위는 브랜드 클라이맥스, 그 아래에 유튜브 최신 주일예배.
   한 화면(100dvh)에 다 담겨야 하므로 영상은 남는 세로 공간만큼
   줄어들고(가로는 16:9로 따라온다), 스크롤은 생기지 않는다.
   파란 화면 위라 설교 쪽은 흰 계열 대비만으로 정리한다.
   ========================================================== */
.scene-logo {
  background: var(--blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* 로고+앨범을 한 덩어리로 세로 가운데에 */
  gap: clamp(14px, 2.4vh, 30px);
  padding: calc(var(--header-h) + clamp(14px, 2.6vh, 38px))
           clamp(20px, 5vw, 80px) clamp(18px, 3.2vh, 44px);
}
/* 로고 한 줄 — HOPE 로고타입과 그 오른쪽의 작은 유튜브 마크 */
.hope-brand {
  flex: none;
  display: flex;
  align-items: center; justify-content: center;
  gap: clamp(12px, 1.8vw, 26px);
}
.hope-logo {
  /* height 를 auto 로 풀지 않으면 마크업의 height="180" 이 그대로 먹어
     로고가 세로로 3배 늘어난다 (원본 비율 590:180) */
  width: min(40vw, 400px);
  height: auto;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
.scene-logo.active .hope-logo { opacity: 1; transform: scale(1); }
/* 유튜브 마크 — 파란 바탕 위 흰색이되 옅게. 로고보다 앞서지 않는다 */
.hope-yt {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(30px, 3.4vw, 44px);
  color: #fff;
  opacity: 0;
  transition: opacity 0.9s var(--ease-soft) 0.35s;
}
.scene-logo.active .hope-yt { opacity: 0.52; }
.scene-logo.active .hope-yt:hover,
.scene-logo.active .hope-yt:focus-visible { opacity: 0.9; }
.hope-yt svg { width: 100%; height: auto; display: block; }

/* ---------- 이번 주 주일예배 (유튜브) — HOPE 브랜드 아래 ---------- */
/* 남은 세로 공간을 이 블록이 다 받고(flex:1), 그 안에서 영상이
   높이 기준으로 줄었다 늘었다 한다. 어떤 화면에서도 ④가 한 장에 담긴다. */
.hope-sermon {
  /* 제 높이만큼만 차지한다 — 남는 세로는 .scene-logo 가 위아래로
     고르게 나눠 갖고, 로고와 앨범이 한 덩어리로 가운데 앉는다 */
  flex: 0 1 auto; min-height: 0;
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;   /* 덱을 접고 남은 세로는 위아래로 고르게 */
  gap: clamp(9px, 1.4vh, 16px);
  opacity: 0; translate: 0 18px;
  transition: opacity 0.9s var(--ease-soft) 0.5s,
              translate 0.9s var(--ease-soft) 0.5s;
}
.scene-logo.active .hope-sermon { opacity: 1; translate: 0 0; }

/* 앨범 — 가운데 한 장이 이번 주, 옆으로 갈수록 비스듬히 뒤로 물러나며
   옅어진다. 카드 위치·기울기·불투명도는 script.js 가 매 프레임 잡는다
   (여기서 값을 정하면 드래그가 1:1로 손을 따라올 수 없다) */
.sermon-deck {
  position: relative;
  flex: 1; min-height: 0;
  width: 100%;
  container-type: size;
  perspective: 1500px;
  touch-action: pan-y;   /* 가로는 앨범이 받고 세로 스크롤은 씬에 넘긴다 */
  cursor: grab;
}
.sermon-deck.dragging { cursor: grabbing; }
.sermon-deck img { -webkit-user-drag: none; user-select: none; }
.sermon-card {
  position: absolute;
  left: 50%; top: 50%;
  width: min(100cqw, 720px, 100cqh * 16 / 9);  /* script.js 가 다시 잡는다 */
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.sermon-card .sermon-stage { width: 100%; }
.sermon-card .sermon-meta { margin-top: clamp(10px, 1.5vh, 18px); }
/* 목록을 못 구해 재생목록 하나만 걸린 경우 — 넘길 게 없으니 눕히지 않는다 */
.sermon-deck.is-single { perspective: none; cursor: default; }

.sermon-nav {
  position: static;
  translate: none;
  flex: none;
  margin-top: clamp(4px, 0.8vh, 10px);
  color: rgba(255,255,255,.6);
}
.sermon-nav .cards-arrow { color: rgba(255,255,255,.55); }
.sermon-nav .cards-arrow:hover,
.sermon-nav .cards-arrow:focus-visible { color: #fff; }
.sermon-nav .cards-arrow[disabled] { color: rgba(255,255,255,.55); }
/* ②③보다 장수가 많아 레일 한 칸을 좁게 잡는다 */
.sermon-nav .cards-dots button {
  width: clamp(30px, 3.4vw, 48px);
  background: rgba(255,255,255,.3);
}
.sermon-nav .cards-dots button.on { background: #fff; }

.sermon-eng {
  font-family: var(--eng);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.sermon-status {
  padding: 26px 0;
  font-size: 14px;
  color: rgba(255,255,255,.82);
}
.sermon-status a { color: #fff; }

/* 썸네일만 먼저 깔고 재생을 누르는 순간 iframe을 끼운다.
   페이지를 열자마자 유튜브가 붙지 않아 가볍고,
   재생 전까지 추적 쿠키도 심기지 않는다. */
.sermon-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(11,11,14,.45);
  overflow: hidden;
  box-shadow: 0 20px 52px rgba(11,11,14,.3);
}
.sermon-stage img {
  width: 100%; height: 100%;
  object-fit: cover;   /* hqdefault(4:3)의 위아래 검은 띠를 잘라낸다 */
}
.sermon-stage iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.sermon-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
}
.sermon-play::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,14,.06), rgba(11,11,14,.48));
  transition: background 0.4s var(--ease-soft);
}
.sermon-play:hover::before { background: linear-gradient(180deg, rgba(11,11,14,0), rgba(11,11,14,.3)); }
.sermon-play i {
  position: relative;
  display: grid; place-items: center;
  width: clamp(48px, 4.4vw, 66px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 32px rgba(11,11,14,.4);
  transition: transform 0.4s var(--ease-soft);
}
.sermon-play:hover i { transform: scale(1.09); }
.sermon-play i::after {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-left: 15px solid var(--blue);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

/* 설교 정보 — 가운데 정렬이라 세로 바 대신 짧은 가로선을 머리에 둔다
   (선으로 잇는다는 브랜드 문법 그대로) */
.sermon-meta {
  flex: none;
  text-align: center;
}
.sermon-meta::before {
  content: "";
  display: block;
  width: 32px; height: 3px;
  margin: 0 auto clamp(8px, 1.2vh, 13px);
  background: rgba(255,255,255,.85);
}
.sermon-date {
  font-family: var(--eng);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,.72);
  margin-bottom: 7px;
}
.sermon-title {
  font-family: var(--serif);
  font-size: clamp(17px, 1.75vw, 25px);
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
}
.sermon-sub {
  margin-top: 8px;
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1.7;
  color: rgba(255,255,255,.7);
}
.sermon-sub b { color: #fff; font-weight: 500; }
.sermon-sub span { margin: 0 8px; color: rgba(255,255,255,.38); }


/* 채널 바로가기 */
.btn-yt {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 21px;
  background: #fff;
  color: var(--ink);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}
.btn-yt:hover { background: var(--ink); color: #fff; }
.btn-yt svg { width: 19px; height: 19px; }

/* 세로가 짧은 화면 — 영상과 설교 정보가 먼저다. 지난 예배는 접는다.
   (폰은 세로가 넉넉해서 남는 자리를 지난 예배가 채운다) */
@media (max-height: 760px) {
}

/* ==========================================================
   모션 최소화 — 애니메이션 없이 즉시 최종 상태
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; opacity: 1; transform: none; }
  .scene-photo-img, .photo-verse, .hero-tagline,
  .hero-mark, .hero-mark svg,
  .vbar, .band-labels, .band,
  .hope-logo {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: inset(0) !important;
  }
  /* 유튜브 마크의 옅은 흰색은 연출이 아니라 디자인이라 그대로 둔다 */
  .hope-yt { transition: none !important; opacity: 0.52 !important; }
  /* 카드 그림자는 '떠 있음'을 알리는 정보라 남기되, 떠오르고 튕기는 과정은 뺀다 */
  .acc-card, .acc-card::before, .band-row::after, .vbar, .band-row, .itda-card {
    animation: none !important;
    transform: none;
  }
  .acc-card::before, .band-row::after, .itda-card { box-shadow: var(--lift-on) !important; }
  /* 카드 열림 정도(width/height/opacity)는 JS 인라인이 관리 */
  .itda-slider { translate: none !important; opacity: 1 !important; transition: none !important; }
  /* 실선은 '이어짐'을 보여주는 연출 자체라 모션이 없으면 의미가 없다 */
  .scroll-cue, .hero-threads { display: none; }
  /* 카드 열림 정도(opacity)는 JS 인라인이 관리하므로 여기선 제외 */
}

/* ---------- 섹션 타이틀 ---------- */
.sec-eng {
  font-family: var(--eng);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.sec-kr {
  font-family: var(--serif);
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

/* ==========================================================
   ⑤ 공동체 & 예배 안내 (리플렛)
   ========================================================== */
.community {
  background: var(--paper);
  padding: clamp(110px, 15vh, 180px) clamp(24px, 6vw, 100px) clamp(130px, 17vh, 200px);
}
.community-head { text-align: center; margin-bottom: clamp(56px, 9vh, 100px); }
.community-intro {
  margin-top: 24px;
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.9;
  color: var(--gray);
}

.pillar-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 44px);
  max-width: 1200px;
  margin: 0 auto;
}
.pcol { border-top: 4px solid var(--blue); padding-top: 22px; }
.pcol h3 {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 6px;
}
.pcol-kr {
  font-family: var(--serif);
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--ink);
  margin-bottom: 18px;
}
.pcol ul { list-style: none; }
.pcol li {
  position: relative;
  padding-left: 14px;
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.6;
  color: #3c4148;
  margin-bottom: 10px;
}
.pcol li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px;
  background: var(--blue);
}
.pcol li small { color: var(--gray); font-size: 0.85em; }

/* ---------- 푸터 ---------- */
footer {
  background: var(--ink);
  text-align: center;
  padding: clamp(80px, 12vh, 130px) 24px clamp(48px, 7vh, 70px);
}
.footer-lockup { height: 56px; width: auto; margin: 0 auto 36px; }
.footer-verse {
  font-family: var(--serif);
  font-size: clamp(14px, 1.6vw, 18px);
  color: rgba(255,255,255,0.65);
  margin-bottom: 30px;
  letter-spacing: 0.02em;
}
.footer-verse strong { color: #fff; font-weight: 600; }
.footer-verse em { font-style: italic; }
.footer-verse span {
  display: block; margin-top: 10px;
  font-size: 0.72em; opacity: 0.6;
}
footer address {
  font-style: normal;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.3); }

/* ==========================================================
   반응형
   ========================================================== */
@media (max-width: 860px) {
  .pillar-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root {
    --header-h: 60px;
    --bar-x: 18px;
    --bar-w: 23px;
    --bar-gap: 11px;
    --hope-w: 84vw;
    --band-h: 30px;
    --sheet-top: calc(var(--header-h) + 6px);
    --sheet-bot: 46px;
  }

  /* ① 사진: 무지개가 보이게 왼쪽 크롭 */
  .scene-photo-img { object-position: 30% center; }
  .photo-verse {
    top: calc(var(--header-h) + 4vh);
    right: 20px;
    font-size: 19px;
  }
  .hero-tagline {
    white-space: normal; text-align: center;
    width: 86vw; bottom: 88px;
    font-size: 15px; line-height: 1.8;
  }

  /* ② 말씀 — 세로선 카드 (아코디언) */
  .vbar span { font-size: 12px; padding-block: 12px; }
  .acc-inner { padding: calc(var(--header-h) + 12px) 16px; }
  .bars-verse { font-size: 15px; line-height: 2; }
  .bars-verse cite { font-size: 0.62em; }
  .card-copy { font-size: 12.5px; }
  .card-photo { max-height: 20vh; }

  /* ③ 잇다 — 밴드 3줄 + 카드 스택 */
  .band-labels { font-size: 11.5px; padding: 0 18px; }
  .band { padding: 0 18px; gap: 10px; }
  .band em { font-size: 15px; }
  .band-line { height: 1.5px; }
  .band-row { margin-bottom: 14px; }
  .itda-card { padding: 18px 18px 26px; }
  .band-sum { font-size: 17px; line-height: 1.7; }
  .cards-nav { bottom: 8px; gap: 2px; }
  .cards-arrow { width: 30px; height: 30px; }
  .cards-arrow svg { width: 15px; height: 15px; }
  /* ②는 화면 왼쪽 109px(18 + 23×3 + 11×2)를 파란 선 3개가 차지한다.
     좁은 폰에서 레일을 화면 한가운데에 두면 ‹ 가 선에 걸려 묻히므로,
     선 오른쪽 남은 폭의 한가운데 = 카드 본문 한가운데로 옮긴다.
     (③은 밴드가 화면을 가로질러서 그대로 화면 한가운데가 맞다) */
  .scene-bars .cards-nav { left: calc(50% + 54.5px); }

  /* ④ HOPE + 이번 주 주일예배 — 한 화면에 담아야 해서 브랜드 쪽을 줄인다 */
  .scene-logo { gap: 26px; padding: calc(var(--header-h) + 12px) 20px 22px; }
  .hope-brand { gap: 11px; }
  .hope-logo { width: 58vw; }
  .hope-yt { width: 26px; }
  /* 폰에서는 레일 한 칸을 더 좁혀 화살표까지 한 줄에 넉넉히 들어오게 */
  .sermon-nav .cards-dots button { width: 26px; }
  .sermon-eng { font-size: 10.5px; letter-spacing: 0.2em; }
  .sermon-title { font-size: 17px; }
  .sermon-sub { font-size: 12px; margin-top: 6px; }
  .sermon-date { font-size: 10.5px; margin-bottom: 5px; }
  .btn-yt { padding: 10px 18px; font-size: 12px; }

  /* 공동체 */
  .pillar-cols { grid-template-columns: 1fr; gap: 32px; }
  .community-intro br { display: none; }

  footer { padding-inline: 20px; }
  .footer-lockup { height: 44px; }
  .footer-verse { line-height: 1.9; }
}

/* ==========================================================
   접근성 — 화면에는 없지만 스크린리더와 문서 구조에는 남는 제목
   ========================================================== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
   ⑥ 예배와 방문 안내
   스크롤 연출을 끝까지 보지 않아도 필요한 정보가 남도록 두는 자리.
   ⑤ 공동체 섹션과 같은 리듬(sec-eng / sec-kr / 파란 윗줄)을 쓴다.
   ========================================================== */
.guide {
  background: #f7f9fb;
  padding: clamp(100px, 14vh, 170px) clamp(24px, 6vw, 100px) clamp(110px, 15vh, 180px);
}
.guide-head { text-align: center; margin-bottom: clamp(48px, 8vh, 88px); }

.guide-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 64px);
  max-width: 1080px;
  margin: 0 auto;
}
.gcol { border-top: 4px solid var(--blue); padding-top: 22px; }
.gcol h3,
.guide-faq h3,
.guide-links h3 {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 16px;
}

.guide-facts {
  display: grid;
  grid-template-columns: minmax(88px, max-content) 1fr;
  gap: 8px 20px;
  margin-bottom: 20px;
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.7;
}
.guide-facts dt { color: var(--gray); }
.guide-facts dd { margin: 0; color: #3c4148; }
.guide-facts a { color: var(--blue); text-decoration: none; }
.guide-facts a:hover { text-decoration: underline; }

.guide-body {
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.95;
  color: #3c4148;
  max-width: 62ch;
}
.guide-body a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(44,163,255,0.35); }
.guide-body a:hover { border-bottom-color: var(--blue); }

.guide-faq {
  max-width: 1080px;
  margin: clamp(48px, 7vh, 84px) auto 0;
  border-top: 4px solid var(--blue);
  padding-top: 22px;
}
.qa-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px clamp(28px, 4vw, 64px);
  margin-bottom: 26px;
}
.qa-q {
  font-family: var(--serif);
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.qa-q::before { content: "Q. "; font-family: var(--eng); color: var(--blue); }
.qa-a {
  font-size: clamp(13px, 1.3vw, 15px);
  line-height: 1.85;
  color: #5a6068;
}

.guide-links {
  max-width: 1080px;
  margin: clamp(40px, 6vh, 70px) auto 0;
  border-top: 1px solid #dde3ea;
  padding-top: 26px;
}
.guide-links ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.guide-links a {
  font-size: clamp(13px, 1.3vw, 15px);
  color: #3c4148;
  text-decoration: none;
}
.guide-links a:hover { color: var(--blue); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-bottom: 22px;
  font-size: 13px;
}
.footer-nav a { color: rgba(255,255,255,0.6); text-decoration: none; }
.footer-nav a:hover { color: rgba(255,255,255,0.9); }

@media (max-width: 720px) {
  .guide-cols { grid-template-columns: 1fr; }
}

/* --- 공동체의 네 기둥 --- */
.guide-pillars { max-width: 900px; margin: 0 auto 64px; }
.pillar-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.pillar-list li {
  position: relative;
  padding: 0 0 14px 18px;
  border-bottom: 1px solid rgba(11, 11, 14, .08);
  font-size: 15px;
  line-height: 1.85;
  color: #3a3f47;
}
.pillar-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.pillar-list li:last-child { border-bottom: 0; }
.pillar-list strong { color: var(--ink); font-weight: 600; }
.footer-brand { display: inline-block; }