/* ==========================================================================
   components.css — 여러 페이지에서 반복되는 조각들
   버튼 / 상태 뱃지 / 섹션 제목 / 등장 효과
   ========================================================================== */

/* --------------------------------------------------------------------------
   버튼 — 양끝은 둥글게 (스토리보드 02번)
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: .875rem 1.75rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

/* 주요 버튼 — 남색 바탕에 흰 글씨.
   버튼은 화면에서 면적이 큰 편이라, 여기에 청록을 쓰면 청록이 주인공이 됩니다.
   청록은 현재 위치·링크·작은 표시처럼 좁은 자리에만 씁니다. */
.btn--primary {
    background: var(--c-navy);
    color: var(--c-white);
}

.btn--primary:hover {
    background: var(--c-navy-dark);
}

/* 흰색 버튼 — 따뜻한 흰색 바탕 위에서 하나만 도드라지지 않게 짝으로 쓸 때 */
.btn--white {
    background: var(--c-white);
    border: 1px solid var(--line);
    color: var(--text-strong);
}

.btn--white:hover {
    border-color: var(--c-navy);
}

/* 보조 버튼 — 테두리만 */
.btn--outline {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text-strong);
}

.btn--outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* 어두운 배경 위에서 쓰는 보조 버튼 */
.btn--ghost-light {
    border: 1px solid rgba(255, 255, 255, .5);
    color: var(--c-white);
}

.btn--ghost-light:hover {
    background: rgba(255, 255, 255, .14);
}

.btn--sm {
    padding: .5rem 1.125rem;
    font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   상태 뱃지 (스토리보드 09, 23번)
   ★ 색을 구분 못 해도 알 수 있도록 상태를 반드시 글자로 함께 적습니다.
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .25rem .625rem;
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.5;
}

.badge--ongoing  { background: var(--c-teal-light); color: var(--accent); }      /* 진행 중 — 청록 */
.badge--open     { background: var(--c-navy-light); color: var(--c-navy); }      /* 모집 중 — 남색 */
.badge--planned  { background: rgba(217, 185, 140, .28); color: var(--c-beige-deep); }       /* 예정 — 베이지 */
.badge--closed   { background: var(--c-gray-100); color: var(--text-muted); }    /* 마감 — 회색 */
.badge--new      { background: var(--c-navy); color: var(--c-white); }           /* 새 글 — 청록이 주인공이 되지 않게 남색 */

/* 제목 옆에 붙이는 작은 크기 (공지 목록) */
.badge--sm {
    padding: .0625rem .375rem;
    font-size: .6875rem;
}
.badge--accent   { background: var(--accent); color: var(--c-white); }           /* 어두운 배경 위 분류 표시 */

/* --------------------------------------------------------------------------
   섹션 제목
   -------------------------------------------------------------------------- */
.section {
    padding-top: var(--section-pt);
    padding-bottom: var(--section-py);
}

.section--dark {
    background: var(--bg-dark);
    color: var(--text-on-dark);
}

.section--dark h2,
.section--dark h3 {
    color: var(--c-white);
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
}

.section-head__title {
    font-size: var(--fs-h2);
}

.section-head__desc {
    margin-top: var(--sp-3);
    color: var(--text-muted);
    font-size: var(--fs-lg);
}

/* --------------------------------------------------------------------------
   "전체 보기" 더보기 링크 — 섹션 제목 옆이나 본문 끝에 씁니다.
   화살표는 CSS가 붙이므로 HTML 에는 글씨만 적습니다.
   -------------------------------------------------------------------------- */
.more-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: .375rem;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: color var(--t-fast), opacity var(--t-fast);
}

.more-link::after {
    content: "→";
}

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

/* 어두운 남색 배경 위에서는 밝은 글씨로 */
.section--dark .more-link {
    color: var(--text-on-dark);
    opacity: .8;
}

.section--dark .more-link:hover {
    color: var(--c-white);
    opacity: 1;
}

@media (max-width: 640px) {
    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-3);
    }

    /* 제목 아래로 내려가도 "전체 보기"는 오른쪽에 둡니다 */
    .section-head .more-link {
        align-self: flex-end;
    }
}

/* --------------------------------------------------------------------------
   사진 — 모서리는 살짝 둥글게 (스토리보드 02번)
   -------------------------------------------------------------------------- */
.media {
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--c-gray-100);
}

.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

/* 네이버 지도 — 자리표시 그림 대신 칸을 채웁니다 (js/ui/naver-map.js) */
.naver-map {
    width: 100%;
    height: 100%;
}

/* 지도 안 단추(+ −)가 높은 층 번호를 써서 펼친 메뉴 위로 뜹니다. 지도 칸 안에 가둡니다 */
[data-naver-map] {
    isolation: isolate;
}

/* 마우스를 올리면 사진이 조금 커지는 정도 (스토리보드 09번) */
.media--zoom:hover img {
    transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   다음 세대 부서 카드 — 메인(06)과 /nextgen/ 이 같이 씁니다
   세로로 긴 사진 아래 부서명 · 대상 · 예배시간
   -------------------------------------------------------------------------- */
.nextgen-card__media {
    aspect-ratio: 3 / 4;   /* 세로로 긴 사진 */
    max-height: 480px;     /* 초광폭 화면에서만 걸리는 상한 */
}

.nextgen-card__name {
    margin-top: var(--sp-4);
    font-size: var(--fs-h3);
}

.nextgen-card__meta {
    margin-top: .25rem;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   등장 효과 — js/ui/reveal.js 와 짝
   -------------------------------------------------------------------------- */
/* --reveal-y     올라오는 거리 (기본 18px, 크게 주면 더 확 올라옵니다)
   --reveal-delay 시작을 늦추는 시간 (여러 개를 차례로 나타낼 때)          */
.reveal {
    opacity: 0;
    transform: translateY(var(--reveal-y, 18px));
    transition: opacity .7s ease var(--reveal-delay, 0s),
                transform .7s cubic-bezier(.16, .84, .44, 1) var(--reveal-delay, 0s);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}


/* ==========================================================================
   쪽 번호 (js/lib/paging.js)
   관리자 목록과 홈페이지 목록이 같은 모양을 씁니다.
   ========================================================================== */
.pager {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: var(--sp-4);
}

.pager__item {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 .5rem;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    transition: color var(--t-fast);
}

.pager__item:hover {
    color: var(--text-strong);
}

/* 지금 쪽 — 상자 없이 남색 굵은 글씨와 밑줄 */
.pager__item.is-current {
    color: var(--text-strong);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* 더 갈 쪽이 없을 때 */
.pager__item.is-off {
    color: var(--c-gray-400);
    cursor: default;
}

/* 화살표는 기호만, 조금 크게 */
.pager__item--arrow {
    font-size: 1.25rem;
    line-height: 1;
}


/* ==========================================================================
   첨부파일 목록
   관리자에서 붙일 때와 홈페이지에서 받을 때 같은 모양을 씁니다.
   (삭제 단추는 관리자에서만 붙습니다)
   ========================================================================== */
.filelist {
    margin-top: var(--sp-3);
}

.filelist__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: .5rem 0;
    border-top: 1px solid var(--line);
}

.filelist__item a {
    color: var(--accent);
    text-decoration: underline;
}

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

.filelist__remove {
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    text-decoration: underline;
}

.filelist__remove:hover {
    color: #B4242B;
}


/* ==========================================================================
   맨 위로 (js/ui/to-top.js)
   홈페이지와 관리자가 같은 단추를 씁니다.
   ========================================================================== */
.to-top {
    position: fixed;
    right: var(--sp-5);
    bottom: var(--sp-5);
    z-index: 90;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-surface);
    color: var(--text-strong);
    box-shadow: 0 6px 20px rgb(13 24 41 / .18);

    /* 나타나기 전에는 자리만 잡고 있습니다. 눌리지도 않습니다 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}

.to-top.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
}

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

.to-top svg {
    width: 20px;
    height: 20px;
}


/* ==========================================================================
   영상 자리 (js/ui/video.js)
   누르기 전에는 썸네일만 둡니다. 유튜브 재생기를 처음부터 부르면
   그 무게 때문에 화면이 늦게 뜹니다.
   ========================================================================== */
.video-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-md);
    background: #000;
}

.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease, opacity var(--t-fast);
}

.video-facade:hover img {
    transform: scale(1.03);
    opacity: .9;
}

.video-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    transform: translate(-50%, -50%);
    transition: transform var(--t-fast);
}

/* 삼각형 재생 표시 */
.video-facade__play::after {
    content: "";
    margin-left: 5px;
    border-left: 20px solid var(--c-navy);
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.video-facade:hover .video-facade__play {
    transform: translate(-50%, -50%) scale(1.07);
}

/* 누른 뒤에 들어오는 유튜브 */
.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--r-md);
    background: #000;
}

.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}