/* ==========================================================================
   home.css — 메인 화면 섹션 (스토리보드 03번 순서)

   02 hero          공동체 영상과 표어
   03 worship-info  예배시간 / 생중계 / 길찾기
   04 sermon        최신 주일설교
   06 nextgen       다음 세대
   07 vision        공동체와 비전
   09 visit         처음 오시는 분
   ========================================================================== */

:root {
    /* 예배정보 카드가 히어로 사진 안으로 꽂혀 올라가는 높이.
       02 hero 와 03 worship-info 가 함께 씁니다. */
    --worship-info-overlap: 96px;

    /* 카드 아랫부분이 다음 섹션(어두운 남색) 밑으로 들어가는 깊이.
       카드 모서리 반경(--r-lg = 16px)보다 커야 둥근 모서리가 가려집니다.
       03 worship-info 와 04 sermon 이 함께 씁니다. */
    --worship-info-tuck: 26px;
}


/* ==========================================================================
   메인 섹션 공통 — 히어로를 뺀 모든 섹션이 같은 폭과 같은 위아래 여백을 씁니다.
   폭  : 화면의 98% (좌우 1%씩만 남김, 좁은 화면에서는 최소 20px 보장)
   높이: --section-py (base.css) — 섹션마다 따로 두지 않습니다.
   새 섹션을 추가해도 이 규칙이 자동으로 적용됩니다.
   ========================================================================== */
main > section:not(.hero) > .container {
    width: 100%;
    max-width: 100%;
    padding-inline: max(1%, 1.25rem);
}

/* ==========================================================================
   02 메인 배너 (스토리보드 06번)
   - 글씨는 언제나 아래쪽에. 좌·가운데·우 가로 위치만 관리자가 정합니다.
   - 글씨가 놓인 쪽만 배경을 조금 더 어둡게
   - 버튼은 두 개만. 첫 장면을 복잡하게 만들지 않습니다.
   ========================================================================== */
.hero {
    position: relative;
    display: flex;
    align-items: flex-end;

    /* 화면 한 장(100svh) + 카드가 꽂혀 들어가는 깊이.
       이만큼 더 길어야 카드 윗머리가 첫 화면에 걸리지 않고
       스크롤을 내려야 나타납니다. (svh 는 주소창 높이 변화 대응) */
    min-height: calc(100svh + var(--worship-info-overlap));
    overflow: hidden;
    background: var(--c-navy-dark);
}

/* index.html 에 적어둔 기본 문구는 배너가 도착할 때까지의 대비책입니다.
   바로 보여주면 잠시 뒤 진짜 배너로 갈아끼워지는 게 눈에 띕니다.
   그래서 늦게 나타나게 해두고, 배너가 오면 그 전에 통째로 바뀌게 합니다.
   .hero > 로 잡아 진짜 배너 슬라이드 안쪽에는 걸리지 않습니다. */
.hero > .hero__media,
.hero > .hero__inner {
    animation: hero-fallback .3s ease 1.2s both;
}

/* 배너가 없다는 걸 알게 되면 더 기다릴 이유가 없습니다 (js/ui/hero.js).
   자바스크립트가 막힌 경우를 위해 위의 1.2초도 남겨둡니다. */
.hero.is-resolved > .hero__media,
.hero.is-resolved > .hero__inner {
    animation-delay: 0s;
}

@keyframes hero-fallback {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 배경 — 영상이 준비되면 <video>로 교체합니다.
   영상이 없거나 재생되지 않아도 표어와 버튼은 그대로 보여야 합니다. */
.hero__media {
    position: absolute;
    inset: 0;
    background-color: var(--c-navy-dark);
    background-image: url('/images/placeholder/hero.svg');
    background-size: cover;
    background-position: center;
}

/* picture 는 그냥 두면 높이가 없는 인라인 상자라, 안쪽 img 의 height:100% 가
   기댈 곳이 없어집니다. 그러면 사진이 제 비율대로만 그려져 배너 아래가 비어 보입니다.
   화면이 좁아질수록 사진이 납작해져 빈자리가 더 커집니다. */
.hero__media picture,
.hero__media video,
.hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 글씨가 놓인 아래쪽만 어둡게 */
.hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(13, 24, 41, .82) 0%,
                rgba(13, 24, 41, .48) 34%,
                rgba(13, 24, 41, 0) 66%);
}

.hero__inner {
    position: relative;
    /* 늘어난 높이(overlap) + 첫 화면 아래 끝에서 버튼까지.
       글은 버튼 위에 쌓이므로, 대타이틀 · 소타이틀이 없어도 버튼 자리는 같습니다.
       (넘김 점은 버튼 아래 .hero__dots) */
    padding-bottom: calc(var(--worship-info-overlap) + var(--sp-8));
    color: var(--c-white);
}

.hero__slogan {
    color: var(--c-white);
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.03em;
    /* TODO: 명조체(마루부리) 도입 시 이 선택자에만 적용 */
}

.hero__sub {
    margin-top: var(--sp-4);
    /* 한 줄이 너무 길면 읽기 나쁩니다. 한글은 한 글자가 대략 1em 이라
       30em 이 서른 자쯤 됩니다. (ch 는 숫자 0 한 글자 폭이라 한글에는 절반으로 잡힙니다) */
    max-width: 30em;
    font-size: clamp(1rem, 1.5vw, 1.25rem);   /* 모바일 16 · PC 20 */
    line-height: 1.6;
    opacity: .92;
}

.hero__actions {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}

/* 배너 버튼 — 색은 대타이틀 글자색을 따릅니다 (js/ui/hero.js 가 --tone · --on 을 넣습니다)
   두 버튼 모두 1px 테두리를 둬야 높이가 같습니다 */
.hero__btn--fill {
    border: 1px solid var(--tone);
    background: var(--tone);
    color: var(--on);
}

.hero__btn--fill:hover {
    opacity: .88;
}

.hero__btn--line {
    border: 1px solid var(--tone);
    color: var(--tone);
}

.hero__btn--line:hover {
    background: color-mix(in srgb, var(--tone) 14%, transparent);
}

/* --------------------------------------------------------------------------
   02-1 관리자 '메인 배너'가 있을 때 — 위 기본 표어를 배너 슬라이드가 대신합니다.
   배너를 겹쳐 놓고 서서히 바꿉니다. 자리를 계산하지 않아 화면 크기와 무관합니다.
   -------------------------------------------------------------------------- */
.hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s ease;
}

.hero__slide.is-on {
    opacity: 1;
    pointer-events: auto;
}

/* 배너에는 진짜 사진이 들어가므로 기본 배경 그림을 끕니다 */
.hero__slide .hero__media {
    background-image: none;
}

/* 어둡기는 관리자가 정합니다 (PC·모바일 따로) */
.hero__slide .hero__scrim {
    background: rgb(13 24 41 / var(--scrim-pc, .4));
}

/* 배경 영상 — 화면을 꽉 채우도록 긴 쪽에 맞춰 늘립니다 */
.hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78svh;      /* 16:9 */
    height: 56.25vw;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

.hero__inner--center {
    text-align: center;
}

.hero__inner--center .hero__sub {
    margin-inline: auto;
}

.hero__inner--center .hero__actions {
    justify-content: center;
}

.hero__inner--right {
    text-align: right;
}

.hero__inner--right .hero__sub {
    margin-left: auto;
}

.hero__inner--right .hero__actions {
    justify-content: flex-end;
}

/* 몇 번째 배너인지 · 눌러서 넘기기 (배너가 둘 이상일 때만 생깁니다) */
.hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--worship-info-overlap) + var(--sp-5));
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
}

.hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / .45);
    transition: width .3s ease, background-color .3s ease;
}

.hero__dot.is-on {
    width: 24px;
    background: var(--c-white);
}

/* 좌우 화살표 — 작은 반투명 원. 평소엔 숨고 배너에 마우스를 올리면 나타납니다.
   휴대폰(마우스 없음)에서는 쓰지 않고 밀어서 넘깁니다 */
.hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    background: rgb(13 24 41 / .25);
    color: var(--c-white);
    opacity: 0;
    transition: opacity var(--t-fast), background-color var(--t-fast);
}

.hero__arrow--prev { left: var(--sp-4); }
.hero__arrow--next { right: var(--sp-4); }

.hero:hover .hero__arrow,
.hero__arrow:focus-visible {
    opacity: 1;
}

.hero__arrow:hover {
    background: rgb(13 24 41 / .45);
}

@media (hover: none) {
    .hero__arrow {
        display: none;
    }
}

/* 배너 위 가로 밀기는 배너 넘기기로만 (브라우저의 '뒤로 가기' 밀기를 막음). 세로 스크롤은 그대로 */
.hero:has(.hero__dots) {
    touch-action: pan-y;
}


/* ==========================================================================
   03 예배시간 · 생중계 · 길찾기 (스토리보드 07번)
   사진 끝과 조금 겹치게 올려 "정보가 이어진다"는 느낌을 줍니다.
   설명은 꼭 필요한 한두 줄만. 칸 전체가 눌립니다.
   ========================================================================== */
.worship-info {
    position: relative;
    z-index: 2;

    /* 겹치는 높이는 맨 위 :root 의 --worship-info-overlap 에서 조절합니다 */
    margin-top: calc(var(--worship-info-overlap) * -1);
}

.worship-info__grid {
    display: grid;
    /* minmax(0, 1fr) 로 써야 세 칸이 정확히 같은 너비가 됩니다.
       그냥 1fr 로 두면 글이 긴 칸(주일예배)이 자기 글 길이만큼 넓어집니다. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    background: var(--c-white);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);

    /* 스크롤해서 들어오면 카드 한 덩어리가 아래에서 위로 올라옵니다.
       칸마다 따로 움직이면 흰 상자만 먼저 떠 보여 어색해서 통째로 올립니다. */
    --reveal-y: 48px;   /* 출발 위치 — 도착점보다 이만큼 아래에서 올라옵니다 */
}

/* 흐려졌다 진해지는(fade) 느낌보다 '올라오는' 움직임이 먼저 읽히도록
   투명도는 짧게 끝내고 이동에 시간을 씁니다.
   화면 밖으로 나가면 다시 숨습니다(reveal--repeat). */
.worship-info__grid.reveal {
    transition: opacity .25s ease,
                transform .65s cubic-bezier(.2, .9, .25, 1);
}

.worship-info__grid > li + li {
    border-left: 1px solid var(--line);
}

.worship-info__item {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    height: 100%;
    padding: var(--sp-5);
    /* 아랫부분이 남색 섹션에 가려지므로 그만큼 안쪽 여백을 더 줍니다.
       이걸 빼면 "시청하기" 같은 글씨가 잘립니다. */
    padding-bottom: calc(var(--sp-5) + var(--worship-info-tuck));
    transition: background var(--t-fast);
}

.worship-info__item:hover {
    background: var(--bg-soft);
}

.worship-info__label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.worship-info__value {
    color: var(--text-strong);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.45;
}

.worship-info__desc {
    margin-top: auto;
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* 휴대폰 전용 짧은 이름 — PC에서는 숨깁니다 */
.worship-info__short {
    display: none;
}

/* --- 생중계 중일 때만 붉은 점 (js/lib/live.js 가 data-live-state 를 붙입니다) ---
   색만으로 알리지 않도록 문구에도 "생중계 중"이 함께 들어갑니다. */
.worship-info__item[data-live-state="live"] .worship-info__label::after,
.worship-info__item[data-live-state="live"] .worship-info__short::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: #D64545;
    animation: live-blink 1.6s ease-in-out infinite;
}

.worship-info__item[data-live-state="live"] .worship-info__value {
    color: var(--accent);
}

@keyframes live-blink {
    50% { opacity: .25; }
}


/* ==========================================================================
   04 최신 주일설교 (스토리보드 08번)
   홈페이지에서 가장 어두운 남색. 말씀 영역이 분명하게 눈에 들어오도록.
   ========================================================================== */
/* 이 섹션을 위로 끌어올려 예배정보 카드의 아랫부분을 덮습니다.
   카드의 둥근 아래 모서리가 가려져서 카드가 꽂혀 있는 모양이 됩니다. */
.sermon {
    position: relative;
    z-index: 3;                                        /* 카드(z-index:2)보다 위 */
    margin-top: calc(var(--worship-info-tuck) * -1);

    /* 여백은 다른 섹션과 같은 값을 씁니다.
       다만 위쪽 26px 은 예배정보 카드에 가려지므로 그만큼 더해서
       눈에 보이는 위 여백이 다른 섹션과 똑같이 맞도록 합니다. */
    padding-top: calc(var(--section-pt) + var(--worship-info-tuck));
    padding-bottom: var(--section-py);
}

/* 설교 다음세대 오시는길은 비전처럼 화면 한 장 높이 (PC) */
.sermon,
.nextgen,
.visit {
    display: flex;
    align-items: center;
    min-height: max(100svh, 560px);
}

.sermon__feature {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);   /* 레퍼런스 비율 60:40 */
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

/* --- 오른쪽 설명 ---
   뱃지 → 제목 → 성경본문 → 설교자·날짜 를 바짝 붙이고,
   성격이 다른 소개 글만 아래로 띄웁니다. */
.sermon__title {
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.3;
}

/* 성경 본문과 설교자 · 날짜를 한 줄에 (좁으면 다음 줄로) */
.sermon__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem var(--sp-4);
    margin-top: var(--sp-2);
}

.sermon__bible {
    color: var(--c-beige);
    font-size: var(--fs-lg);
    font-weight: 600;
}

.sermon__meta {
    color: var(--text-on-dark);
    font-size: var(--fs-sm);
    opacity: .8;
}

.sermon__meta time {
    color: inherit;
    font-size: inherit;
}

.sermon__desc {
    margin-top: var(--sp-6);
    color: var(--text-on-dark);
    font-size: var(--fs-lg);
    line-height: 1.8;
    opacity: .78;
}

/* 설명 오른쪽 끝에 맞춰 '전체 보기'를 붙입니다.
   .more-link 는 inline-flex 라 margin-left:auto 가 먹지 않으므로
   flex + width:fit-content 로 바꿔서 밀어냅니다. */
.sermon__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-7);
}

.sermon__empty {
    padding: var(--sp-7) 0;
    color: var(--text-on-dark);
    opacity: .7;
    text-align: center;
}

/* ==========================================================================
   06 다음 세대 (스토리보드 10번)
   세로로 긴 같은 비율 사진. 부서명은 사진 아래.
   ========================================================================== */
/* 위아래 섹션이 모두 따뜻한 흰색(#F7F5F0)이라 구분이 약합니다.
   이 섹션만 순백(#FFFFFF)으로 깔아 경계를 만듭니다. */
.nextgen {
    background: var(--c-white);
}

.nextgen__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
}

/* 카드 한 장의 모양은 components.css (다음 세대 페이지와 같이 씁니다) */

/* 마우스를 올리면 사진 위로 예배 시간 · 장소가 올라옵니다 (메인만).
   그래서 마우스가 있는 기기에서는 사진 아래 회색 안내(__meta)를 뺍니다.
   휴대폰은 올리기가 없으므로 올라오는 안내 없이 회색 안내가 그대로 보입니다 */
.nextgen-card__media {
    position: relative;
}

.nextgen-card__over {
    display: none;
}

@media (hover: hover) {
    .nextgen .nextgen-card__meta {
        display: none;
    }

    .nextgen-card__over {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: var(--sp-5);
        background: linear-gradient(to top, rgb(13 24 41 / .78), rgb(13 24 41 / .15) 60%);
        color: var(--c-white);
        opacity: 0;
        transform: translateY(12px);
        transition: opacity var(--t-fast), transform .35s ease;
    }

    .nextgen-card:hover .nextgen-card__over,
    .nextgen-card:focus-visible .nextgen-card__over {
        opacity: 1;
        transform: none;
    }

    /* 예배 시간 · 장소 — 본문보다 조금 크게, 두 줄을 붙여서 */
    .nextgen-card__over strong {
        font-size: calc(var(--fs-lg) + 4px);
        line-height: 1.35;
    }

    .nextgen-card__over span {
        font-size: calc(var(--fs-sm) + 4px);
        line-height: 1.35;
        opacity: .85;
    }

    .nextgen-card__over em {
        margin-top: var(--sp-3);
        font-size: var(--fs-sm);
        font-style: normal;
        font-weight: 600;
    }
}



/* ==========================================================================
   07 공동체와 비전 (스토리보드 11번)
   스크롤이 긴 페이지에서 한 번 쉬어가는 자리입니다.
   화면에 붙어 멈추는 순간, 문장이 한 줄씩 차례로 저절로 나타납니다.
   ========================================================================== */
/* 맞춰 서는 동안 화면을 잠그면 스크롤바가 사라져 화면이 옆으로 밀리지 않게 */
html {
    scrollbar-gutter: stable;
}

.vision {
    position: relative;
}

/* 화면 한 장. 스크롤 한 번에 여기 맞춰 서고 문장이 다 나올 때까지 멈춥니다 (js/ui/vision.js) */
.vision__stage {
    display: flex;
    align-items: center;
    height: 100vh;
    height: 100lvh;   /* 휴대폰 주소창이 접혀도 아래 섹션이 비치지 않게 */
    min-height: 560px;

    /* 사진 띠 안에서 문장을 세로 가운데로 두므로 위아래 여백을 같게 줍니다 */
    padding-block: var(--section-py);
    overflow: hidden;
    background-color: var(--c-navy-dark);
    background-image: url('/images/main/vision.jpg');
    background-size: cover;
    background-position: center;
    color: var(--c-white);
}

/* 멈추면(is-on) 한 줄씩 차례로. --step 은 줄 번호(js/ui/vision.js)
   ★ 줄 사이 시차는 --gap 하나로 조절합니다 */
.vision__step {
    --gap: .3s;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--step, 0) * var(--gap));
}

.vision.is-on .vision__step {
    opacity: 1;
    transform: none;
}

/* 글씨가 묻히지 않을 만큼만. 배경이 이미 어두워 많이 덮으면 청록 결이 사라집니다 */
.vision__scrim {
    position: absolute;
    inset: 0;
    background: rgb(13 24 41 / .28);
}

.vision__inner {
    position: relative;
    text-align: center;
}

/* 문장 위에 그어지는 짧은 선. 시선을 한곳으로 모으는 표시입니다 */
.vision__mark {
    display: block;
    width: 1px;
    height: 56px;
    margin: 0 auto var(--sp-6);
    background: rgb(255 255 255 / .55);
}

/* 공동체 고백이라 명조체(마루부리)를 씁니다. 본문에는 쓰지 않습니다 (스토리보드 02·19번).
   앞의 두 줄은 조금 작게, 마지막 교회 이름이 눈에 남도록 단을 둡니다. */
.vision__text,
.vision__name {
    font-family: var(--font-serif);
    /* 마루부리는 굵기가 400 하나뿐입니다. 굵게 지정하면 브라우저가 억지로
       두껍게 그려 획이 뭉개집니다. 크기로만 단을 나눕니다. */
    font-weight: 400;
    letter-spacing: 0;
}

.vision__text {
    font-size: clamp(1.125rem, 1.9vw, 1.5rem);
    line-height: 2.1;
    opacity: .88;

    /* 줄마다 길이를 고르게. 좁은 화면에서 한 단어만 남는 줄을 막습니다 */
    text-wrap: balance;
}

.vision__text span {
    display: block;
}

.vision__name {
    display: block;
    margin-top: var(--sp-5);
    font-size: clamp(1.875rem, 3.6vw, 3rem);
}


/* ==========================================================================
   09 처음 오시는 분 (스토리보드 13번)
   지도를 먼저 보여주고, 글을 끝까지 읽지 않아도 출발할 수 있게 합니다.
   ========================================================================== */
/* 바로 위 예은소식이 따뜻한 흰색이라 같은 색이 연달아 오지 않도록
   이 섹션은 순백을 씁니다. (다음 세대와 같은 방식) */
.visit {
    background: var(--c-white);
}

.visit__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

/* 4/3 은 세로가 길어 오른쪽 방문 안내보다 지도가 커집니다.
   가로로 넓혀 두 칸 높이를 비슷하게 맞춥니다. */
.visit__map {
    aspect-ratio: 16 / 9;
}

.visit__steps {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    margin-top: var(--sp-6);
}

.visit__steps li {
    display: flex;
    gap: var(--sp-4);
}

.visit__step-no {
    flex-shrink: 0;
    width: 2.25rem;
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .04em;
}

.visit__steps strong {
    display: block;
    margin-bottom: .25rem;
    color: var(--text-strong);
    font-size: var(--fs-lg);
    font-weight: 700;
}

.visit__steps p {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.visit__actions {
    display: flex;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}


/* ==========================================================================
   반응형
   PC를 그냥 줄이지 않고, 칸 수와 배치를 바꿉니다.
   ========================================================================== */

/* --- 태블릿 --- */
@media (max-width: 1024px) {
    .sermon,
    .nextgen,
    .visit {
        display: block;
        min-height: 0;
    }

    .sermon__feature,
    .visit__grid {
        grid-template-columns: 1fr;
    }

    .sermon__actions {
        margin-top: var(--sp-5);
    }

    .visit__actions {
        margin-top: var(--sp-5);
    }

}

/* --- 휴대폰 --- */
@media (max-width: 640px) {
    /* 02 — 세로로 긴 사진, 표어 두세 줄 (스토리보드 07번)
       배너가 화면 한 장에 딱 들어오도록 100svh 를 씁니다.
       svh(small viewport height)는 주소창이 보이는 상태의 화면 높이라
       기기·브라우저마다 알아서 맞춰집니다. 따로 기기별 분기가 필요 없습니다.
       (vh 를 쓰면 iOS 에서 주소창 높이만큼 잘리고,
        dvh 를 쓰면 스크롤 중 주소창이 접힐 때 배너 높이가 출렁입니다) */
    .hero {
        min-height: 100svh;
    }

    /* 휴대폰에서는 글씨를 화면 한가운데 높이에 둡니다.
       세로로 긴 화면에서 아래쪽에 붙이면 손가락에 가리고 눈에 잘 안 들어옵니다.
       (아래를 덮던 예배안내 카드도 여기서는 겹치지 않습니다) */
    .hero,
    .hero__slide {
        align-items: center;
    }

    /* 버튼은 화면 아래 고정 자리에, 글은 그 위 남은 자리의 가운데에.
       대타이틀 · 소타이틀이 없어도 버튼이 올라오지 않습니다 */
    .hero__inner {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        padding-top: var(--header-h-mo);
        padding-bottom: calc(var(--worship-info-overlap) + var(--sp-7) + var(--sp-8));
    }

    /* 휴대폰 이미지(9:16)보다 화면이 길어 양옆이 잘리던 문제 — 그림은 폭에 맞춰 통째로 보이고,
       남는 자리는 같은 그림을 늘려 흐리게 깔아 이어 보이게 합니다 */
    .hero__fit {
        position: relative;
        overflow: hidden;
    }

    .hero__fit::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--mo) center / 100% 100%;
        filter: blur(24px);
        transform: scale(1.15);
    }

    /* 그림은 아래에 붙이고, 윗가장자리만 흐린 바탕으로 녹입니다 (남는 자리는 위쪽에만) */
    .hero__media .hero__fit img {
        position: absolute;
        bottom: 0;
        height: auto;
        mask-image: linear-gradient(transparent, #000 12%);
    }

    /* 넘김 점도 버튼을 따라 같은 만큼 위로 */
    .hero__dots {
        bottom: calc(var(--worship-info-overlap) + var(--sp-5) + var(--sp-8));
    }

    .hero__inner > :first-child,
    .hero__actions {
        margin-top: auto;
    }

    /* 휴대폰에서는 화면 자체가 좁아 줄 길이를 따로 묶을 필요가 없습니다.
       ch 는 숫자 0 하나의 폭이라 한글에는 절반쯤으로 잡힙니다.
       22ch 로 묶어두니 자리가 남는데도 한 줄이 열몇 자에서 끊겼습니다. */
    .hero__sub {
        max-width: none;
    }

    .hero__slide .hero__scrim {
        background: rgb(13 24 41 / var(--scrim-mo, .4));
    }

    .hero__actions {
        gap: var(--sp-2);
    }

    .hero__actions .btn {
        flex: 1;
        padding-inline: var(--sp-3);
    }

    /* ----------------------------------------------------------------------
       03 — 휴대폰에서는 한 덩어리 카드가 아니라 버튼 4개 (스토리보드 07번)
       사진 위에 겹치지 않고, 짧은 이름만 가운데 정렬로 보여줍니다.
       ---------------------------------------------------------------------- */
    :root {
        --worship-info-overlap: 0px;   /* 사진 위에 겹치지 않습니다 */
        --worship-info-tuck: 0px;      /* 버튼형이라 남색 섹션에 꽂지도 않습니다 */
    }

    /* 위아래 여백을 같은 값으로 둡니다 */
    .worship-info {
        margin-top: var(--sp-6);
        padding-bottom: var(--sp-6);
    }

    /* 한 덩어리 카드의 흰 배경·그림자·구분선을 걷어내고 버튼마다 따로 입힙니다 */
    .worship-info__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-2);
        overflow: visible;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }

    .worship-info__grid > li + li {
        border-left: 0;
    }

    .worship-info__item {
        justify-content: center;
        align-items: center;
        min-height: 3.5rem;
        padding: var(--sp-4);
        background: var(--c-white);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-sm);
        text-align: center;
    }

    /* 휴대폰에는 hover 가 없습니다. PC용 hover 색이 탭한 뒤 남지 않도록 되돌립니다. */
    .worship-info__item:hover {
        background: var(--c-white);
        border-color: var(--line);
    }

    /* 버튼에는 짧은 이름만 */
    .worship-info__label,
    .worship-info__value,
    .worship-info__desc {
        display: none;
    }

    .worship-info__short {
        display: block;
        color: var(--text-strong);
        font-size: var(--fs-base);
        font-weight: 700;
    }

    /* 06 — 다음 세대는 슬라이드가 아니라 두 칸 배치 그대로 */
    .nextgen__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-4);
    }

    /* 06 — 부서 사진을 정사각으로 줄여 섹션이 길어지지 않게 합니다.
       "다음 세대는 부서명과 사진을 짧게 보여줌" (스토리보드 17번) */
    .nextgen-card__media {
        aspect-ratio: 1 / 1;
    }

    .nextgen-card__name {
        margin-top: var(--sp-3);
    }

    /* 07 — 세로 화면용으로 가운데를 잘라낸 배경을 씁니다 */
    .vision__stage {
        background-image: url('/images/main/vision-mo.jpg');
        background-position: center 32%;
    }

    /* 맨 위 세로선이 자리는 차지하는데 눈에는 거의 안 띕니다.
       가운데를 정확히 맞추면 글자 덩어리가 아래로 쏠려 보여, 그만큼 올려줍니다. */
    .vision__stage {
        padding-bottom: calc(var(--section-py) + 120px);
    }

    .nextgen-card__name {
        font-size: var(--fs-lg);
    }

    /* 09 */
    .visit__actions {
        flex-direction: column;
    }
}

/* 화면이 낮을 때(가로로 돌린 휴대폰 등) — 배너를 화면 높이에 억지로 맞추면
   표어와 버튼이 눌려 붙습니다. 이때는 내용 높이만큼만 쓰게 풉니다. */
@media (max-height: 480px) and (max-width: 900px) {
    .hero {
        min-height: auto;
        padding-block: 7rem 2rem;
    }
}

/* 아주 좁은 화면 — 다음 세대 카드는 한 칸으로.
   요즘 휴대폰은 대부분 360~430px 이라 기준을 340px 로 둡니다.
   (사역은 슬라이드라 해당 없음) */
@media (max-width: 340px) {
    .nextgen__grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   팝업 (관리자 '팝업', 스토리보드 30번)
   화면을 덮지만 뒤를 막지는 않습니다. 닫지 않아도 스크롤해서 내용을 볼 수 있게요.
   ========================================================================== */
.popup-layer {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    pointer-events: none;      /* 덮개는 통과, 카드만 눌립니다 */
    background: rgb(13 24 41 / .45);
}

/* 여러 개여도 한 번에 한 장만, 늘 같은 자리에 보여줍니다.
   나란히 놓으면 짧은 팝업이 긴 팝업 높이에 끌려가 허옇게 늘어납니다.
   닫으면 카드를 지우므로 다음 팝업이 first-child 가 되어 그 자리에 나옵니다. */
.popup:not(:first-child) {
    display: none;
}

.popup {
    position: relative;
    width: min(360px, 100%);
    max-height: 100%;
    overflow: auto;
    pointer-events: auto;
    border-radius: var(--r-md);
    background: var(--bg-surface);
    box-shadow: 0 18px 48px rgb(13 24 41 / .28);
}

.popup__close {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: var(--accent);
    /* 동그라미 바탕 없이 청록 ✕ 만. 그림 위에서도 보이게 흰 그늘을 살짝 */
    filter: drop-shadow(0 0 2px rgb(255 255 255 / .9));
    transition: color var(--t-fast);
}

.popup__close:hover {
    color: var(--accent-hover);
}

.popup__image {
    display: block;
    width: 100%;
}

.popup__body {
    padding: var(--sp-5);
}

.popup__title {
    font-size: var(--fs-lg);
    color: var(--text-strong);
}

.popup__content {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.7;
}

.popup__actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}

.popup__actions .btn {
    flex: 1;
}

.popup__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--line);
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.popup__hide {
    display: flex;
    align-items: center;
    gap: .375rem;
    cursor: pointer;
}

.popup__text-close {
    color: var(--text-muted);
    font-size: var(--fs-xs);
}