/* ==========================================================================
   layout.css — 헤더 / 펼친 메뉴 / 모바일 메뉴 / 푸터
   스토리보드 04, 05, 08, 14번
   ========================================================================== */

/* ==========================================================================
   헤더
   --------------------------------------------------------------------------
   상태는 <header>의 data-state 로 관리합니다.
     data-state="top"       → 영상 위 투명 (메인 최상단)
     data-state="scrolled"  → 흰 배경 + 남색 글씨

   <body data-header="overlay"> 메인처럼 영상/사진 위에 얹히는 페이지
   <body data-header="solid">   서브페이지 (처음부터 흰 배경)
   ========================================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-header);
    transition: background-color var(--t-base), box-shadow var(--t-base);

    /* 대메뉴 글자색 — 헤더 상태에 따라 아래에서 바꿉니다 */
    --gnb-text: var(--text-strong);
}

.header__bar {
    /* 아래 .header[data-state="top"]::before 그늘보다 위에 놓습니다.
       이걸 빼면 그늘이 로고·메뉴·버튼 위에 덮여 흰색이 탁해 보입니다. */
    position: relative;
    z-index: 1;

    height: var(--header-h);
    transition: height var(--t-base);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    height: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

/* --- 최상단: 투명 + 흰 글씨 --- */
.header[data-state="top"] {
    background: transparent;
    --gnb-text: var(--c-white);
}

.header[data-state="top"] .header__logo,
.header[data-state="top"] .header__icon-btn {
    color: var(--c-white);
}

/* 밝은 영상 위에서도 글씨가 묻히지 않도록 위쪽에 옅은 그늘 (스토리보드 02번) */
.header[data-state="top"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(13, 24, 41, .45), transparent);
    pointer-events: none;
    transition: opacity var(--t-base);
}

/* --- 스크롤 후: 흰 배경 + 남색 글씨, 높이 축소 --- */
.header[data-state="scrolled"] {
    background: var(--c-white);
    box-shadow: var(--shadow-sm);
}

.header[data-state="scrolled"] .header__bar {
    height: var(--header-h-scrolled);
}

.header__logo,
.header__icon-btn {
    color: var(--text-strong);
    transition: color var(--t-base);
}

.gnb__link {
    color: var(--gnb-text);
    transition: color var(--t-fast);
}

/* --- 로고 --- */
/* 로고 그림 + 교회 이름 두 줄 */
.header__logo {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-shrink: 0;
    line-height: 1.15;
}

.header__logo-mark {
    width: auto;
    height: 2.125rem;
}

.header__logo-text {
    display: flex;
    flex-direction: column;
}

.header__logo-ko {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.header__logo-en {
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .14em;
    opacity: .7;
}

/* --- 대메뉴 --- */
.gnb {
    flex: 1;
}

.gnb__list {
    display: flex;
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 3rem);   /* 스토리보드 04번: 충분히 띄워 한눈에 구분 */
}

.gnb__link {
    display: inline-block;
    padding: var(--sp-2) 0;
    font-size: 1.1875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* 올렸을 때, 그리고 펼친 메뉴에서 그 칸에 올렸을 때도 청록 글씨로
   (is-active 는 js/ui/header.js 가 양쪽에 같이 붙입니다) */
.gnb__link:hover,
.gnb__item.is-active .gnb__link {
    color: var(--accent);
}

/* 현재 보고 있는 대메뉴만 청록색 (스토리보드 04번) */
.gnb__item[aria-current="page"] .gnb__link {
    color: var(--accent);
}

/* 투명 헤더 위에서는 청록색이 잘 안 보이므로 밑줄로 표시합니다 */
.header[data-state="top"] .gnb__item[aria-current="page"] .gnb__link {
    color: var(--gnb-text);
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* 마우스를 올리면 청록색.
   헤더 상태나 현재 페이지 여부와 상관없이 항상 적용되도록 맨 뒤에 둡니다. */
.gnb__item:hover .gnb__link,
.header[data-state="top"] .gnb__item:hover .gnb__link {
    color: var(--accent);
}

/* --- 오른쪽 유틸 --- */
.header__util {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.header__icon-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
}

.header__icon-btn:hover {
    background: rgba(127, 127, 127, .12);
}

.header__icon-btn svg {
    width: 20px;
    height: 20px;
}

/* "처음 오셨나요?" — 밝은 바탕에 짙은 남색 글씨 (스토리보드 04번) */
.header__visit {
    padding: .5rem 1.125rem;
    background: var(--c-white);
    color: var(--text-strong);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast);
}

.header[data-state="scrolled"] .header__visit {
    background: var(--c-navy);
    color: var(--c-white);
}

.header__visit:hover {
    background: var(--c-navy-dark);
    color: var(--c-white);
}

/* 모바일 메뉴 버튼은 PC에서 숨김 */
.header__icon-btn--menu {
    display: none;
}

/* --------------------------------------------------------------------------
   펼친 메뉴가 열렸을 때의 상단 바
   영상 위 투명 상태에서 흰 패널만 내려오면 위아래가 따로 노는 느낌이 납니다.
   메뉴가 열리는 동안에는 상단 바도 흰색으로 바꿔 한 덩어리로 보이게 합니다.
   (스크롤한 뒤에는 이미 흰색이라 달라지는 게 없습니다)
   -------------------------------------------------------------------------- */
.header.is-mega-open {
    background: var(--c-white);
    box-shadow: var(--shadow-sm);
    --gnb-text: var(--text-strong);
}

.header.is-mega-open::before {
    opacity: 0;   /* 영상 위 그늘 제거 */
}

.header.is-mega-open .header__logo,
.header.is-mega-open .header__icon-btn {
    color: var(--text-strong);
}

.header.is-mega-open .header__visit {
    background: var(--c-navy);
    color: var(--c-white);
}

.header.is-mega-open .gnb__item[aria-current="page"] .gnb__link {
    color: var(--accent);
    text-decoration: none;
}

/* ==========================================================================
   펼친 메뉴 (메가메뉴)
   대메뉴에 마우스를 올리면 전체 메뉴가 사이트맵처럼 펼쳐집니다.
   ========================================================================== */
.megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--c-white);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-md);

    /* 닫힘 상태: visibility:hidden 이라 Tab 키로도 안 잡힙니다 */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}

.megamenu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* 대메뉴가 몇 개든 한 줄에 놓습니다.
   숫자를 박아두면 메뉴가 늘 때마다 마지막 칸이 아래로 내려갑니다. */
.megamenu__inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--sp-6) var(--gutter) var(--sp-7);
}

.megamenu__title {
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line);
    color: var(--text-strong);
    font-size: var(--fs-base);
    font-weight: 700;
    transition: color var(--t-fast), border-color var(--t-fast);
}

/* 지금 어느 칸을 보고 있는지 — 제목만 청록으로.
   상단 대메뉴의 청록 밑줄과 같은 표시입니다 (js/ui/header.js 가 is-active 를 붙입니다). */
.megamenu__col:hover .megamenu__title,
.megamenu__col.is-active .megamenu__title {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.megamenu__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);   /* 스토리보드 04번: 읽기 좋은 간격 */
}

.megamenu__link {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    transition: color var(--t-fast);
}

.megamenu__link:hover,
.megamenu__link[aria-current="page"] {
    color: var(--accent);
}

/* ==========================================================================
   모바일 전체 메뉴 (스토리보드 08번)
   ========================================================================== */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-mobile-menu);
    display: flex;
    flex-direction: column;
    background: var(--bg-page);   /* 따뜻한 흰색 전체 배경 */

    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t-base), visibility var(--t-base);
}

.mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
}

/* 맨 위 로고 영역 — 아래 메뉴 목록과 구분되도록 짙은 남색 띠로 처리합니다.
   흰색으로 바꾸고 싶으면 background 를 var(--c-white) 로,
   아래 글자색 규칙을 var(--text-strong) 으로 바꾸면 됩니다. */
.mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: var(--header-h-mo);
    padding-left: var(--gutter);
    background: var(--c-navy);

    /* 닫기(×)는 40px 정사각형 버튼 안에 20px 아이콘이 들어 있어서,
       패딩을 그대로 주면 아래 +/− 기호(16px)보다 12px 안쪽에 놓입니다.
       그만큼 빼서 ×와 +의 중심선을 맞춥니다.
         × 중심 = 패딩 + 20    /    + 중심 = --gutter + 8                  */
    padding-right: calc(var(--gutter) - 12px);
}

.mobile-menu__head .header__logo,
.mobile-menu__head .header__icon-btn {
    color: var(--c-white);
}

.mobile-menu__head .header__icon-btn:hover {
    background: rgba(255, 255, 255, .16);
}

.mobile-menu__body {
    flex: 1;
    /* flex 항목의 기본 min-height 는 auto 라서, 이게 없으면 내용이 길어질 때
       목록이 줄어들지 않고 아래 버튼 영역을 화면 밖으로 밀어냅니다. */
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-4) var(--gutter);
    -webkit-overflow-scrolling: touch;
}

.mobile-menu__group {
    border-bottom: 1px solid var(--line);
}

/* 대메뉴 — 본문보다 크고 굵게 */
.mobile-menu__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-4) 0;
    color: var(--text-strong);
    font-size: 1.1875rem;
    font-weight: 700;
    text-align: left;
}

.mobile-menu__toggle[aria-expanded="true"] {
    color: var(--accent);
}

/* +/− 기호 */
.mobile-menu__sign {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.mobile-menu__sign::before,
.mobile-menu__sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background: currentColor;
    transition: transform var(--t-base);
}

.mobile-menu__sign::after {
    transform: rotate(90deg);
}

.mobile-menu__toggle[aria-expanded="true"] .mobile-menu__sign::after {
    transform: rotate(0deg);   /* 열리면 − 모양 */
}

/* 세부 메뉴 — 부드럽게 펼침 */
.mobile-menu__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-base);
}

.mobile-menu__panel[data-open="true"] {
    grid-template-rows: 1fr;
}

.mobile-menu__panel > ul {
    overflow: hidden;
}

.mobile-menu__link {
    display: block;
    padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
    color: var(--text-muted);
    font-size: var(--fs-base);
}

.mobile-menu__link[aria-current="page"] {
    color: var(--accent);
    font-weight: 600;
}

.mobile-menu__panel > ul > li:last-child .mobile-menu__link {
    padding-bottom: var(--sp-5);
}

/* 아래 고정 안내 — 메뉴를 내려도 계속 찾기 쉽게 */
.mobile-menu__foot {
    display: flex;
    flex-shrink: 0;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--gutter);
    border-top: 1px solid var(--line);
    background: var(--c-white);
}

/* 메인의 예배정보 버튼과 같은 둥근 네모(--r-md)로 통일합니다 */
.mobile-menu__foot a {
    flex: 1;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--text-strong);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
}

/* hover 효과는 두지 않습니다 — 휴대폰에는 마우스 올림 상태가 없고,
   터치 기기에서는 탭한 뒤 색이 그대로 남아버리는 경우가 있습니다. */

/* 메뉴가 열린 동안 뒤쪽 페이지 스크롤 잠금 */
body.is-menu-open {
    overflow: hidden;
}

/* ==========================================================================
   푸터 (스토리보드 14번)
   ========================================================================== */
.footer {
    background: var(--bg-dark);
    color: var(--text-on-dark);
    padding-block: var(--sp-5) var(--sp-4);
}

/* 좌우 여백 — 본문 섹션(1%)보다 조금 더 안쪽에서 시작합니다.
   어두운 바탕 위의 글씨는 같은 여백이라도 화면 끝에 붙어 보입니다. */
.footer__inner,
.footer__bottom {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: max(2.5%, 1.5rem);
}

.footer__inner {
    display: flex;
    align-items: flex-end;   /* SNS 아이콘이 마지막 줄(예배시간)에 맞춰지도록 */
    justify-content: space-between;
    gap: var(--sp-5);
}

/* 교회 정보는 세 줄. 글자를 작게 쓰고 줄 간격은 좁게 붙입니다. */
.footer__info {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    font-size: var(--fs-xs);
    line-height: 1.55;
    opacity: .78;
}

/* 한 줄 안의 항목 간격 — 16px. 화면이 좁아지면 다음 줄로 넘어갑니다. */
.footer__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
}

.footer__name {
    color: var(--c-white);
    font-weight: 600;
    opacity: 1;
}

.footer__info a:hover {
    color: var(--c-white);
    text-decoration: underline;
}

/* --- SNS 아이콘 (menu.js 의 SNS 주소를 채우면 나타납니다) ---
   원형 테두리 안에 아이콘. 평소에는 회색, 마우스를 올리면 청록색.
   아이콘 SVG 가 fill="currentColor" 라서 color 한 줄만 바꾸면
   테두리와 아이콘이 함께 물듭니다. */
.footer__sns {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.footer__sns a {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid currentColor;
    border-radius: var(--r-pill);
    color: var(--c-gray-400);
    transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}

.footer__sns a:hover {
    color: var(--accent);
    background: rgba(47, 124, 130, .14);
    transform: translateY(-2px);
}

.footer__sns svg {
    width: 14px;
    height: 14px;
}

/* --- 맨 아래: 저작권 + 개인정보처리방침 --- */
.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line-dark);
    font-size: var(--fs-xs);
    letter-spacing: .02em;
    opacity: .5;
}

.footer__bottom a:hover {
    color: var(--c-white);
    text-decoration: underline;
}

/* ==========================================================================
   반응형
   ========================================================================== */

/* 태블릿 이하 — 메가메뉴 대신 모바일 전체 메뉴를 씁니다 */
@media (max-width: 1024px) {
    .header__bar,
    .header[data-state="scrolled"] .header__bar {
        height: var(--header-h-mo);
    }

    .gnb,
    .header__visit {
        display: none;
    }

    .megamenu {
        display: none;
    }

    .header__icon-btn--menu {
        display: grid;
    }

    .header__inner {
        justify-content: space-between;
        gap: var(--sp-4);
    }


}

/* 휴대폰 — 주소·전화번호가 중간에서 끊기지 않게 여백 확보 (스토리보드 14번) */
@media (max-width: 640px) {
    /* 좁은 화면에서는 줄이 더 나뉘므로 간격을 조금 벌립니다 */
    .footer__info {
        gap: .375rem;
    }

    .footer__line {
        gap: .25rem .875rem;
    }

    .footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
    }

    .footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
    }
}