/* ==========================================================================
   base.css — 리셋 + 디자인 변수 + 기본 타이포
   ★ 사이트 전체 톤을 바꾸려면 아래 :root 변수만 고치면 됩니다.
   ========================================================================== */

/* 마루 부리 — 공동체 고백 같은 핵심 문장에만 쓰는 명조체 (네이버 글꼴).
   원본 423KB 를 KS X 1001 완성형 2,350자로 줄여 직접 보관합니다.
   swap : 받는 동안 Pretendard 로 먼저 보여주고 준비되면 바꿉니다. */
@font-face {
    font-family: 'MaruBuri';
    src: url('/fonts/MaruBuri-Regular.subset.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   1. 디자인 변수
   -------------------------------------------------------------------------- */
:root {
    /* --- 팔레트 (스토리보드 02번 지정색) --- */
    --c-warm-white: #F7F5F0;   /* 페이지 바탕 */
    --c-navy: #13233A;         /* 큰 제목 · 주요 버튼 */
    --c-navy-dark: #0D1829;    /* 설교 영역 · 푸터 */
    --c-teal: #2F7C82;         /* 보조 강조 — 링크 · 현재 위치 · 작은 표시 */
    --c-teal-light: #DDEBEA;   /* 보조 배경 */
    --c-navy-light: #DDE4F0;   /* 남색의 연한 버전 (모집 중 뱃지 등) */
    --c-beige: #D9B98C;        /* 날짜 · 작은 구분 글씨 전용 */
    --c-beige-deep: #8A6A38;   /* 베이지를 글씨로 쓸 때 — 원래 색은 흐려 읽기 어렵습니다 */
    --c-white: #FFFFFF;

    /* 회색 단계 — 위 팔레트로 표현이 안 되는 곳에만 */
    --c-gray-100: #F1EFEA;
    --c-gray-200: #E4E0D8;
    --c-gray-400: #B4B0A8;
    --c-gray-600: #6B7280;
    --c-gray-800: #3C4654;

    /* --- 역할별 색 (마크업에서는 되도록 이쪽을 씁니다) --- */
    --bg-page: var(--c-warm-white);
    --bg-surface: var(--c-white);
    --bg-dark: var(--c-navy-dark);
    --bg-soft: var(--c-teal-light);

    --text-strong: var(--c-navy);      /* 제목 */
    --text-body: var(--c-gray-800);    /* 본문 */
    --text-muted: var(--c-gray-600);   /* 보조 설명 */
    --text-date: var(--c-gray-400);    /* 날짜 */
    --text-on-dark: #E8EDF3;

    --accent: var(--c-teal);
    --accent-hover: #26666B;
    --line: var(--c-gray-200);
    --line-dark: rgba(255, 255, 255, .16);

    /* --- 글꼴 --- */
    --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                 system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    /* 명조체 — 핵심 문장에만 씁니다. 본문까지 번지지 않게 주의. */
    --font-serif: 'MaruBuri', var(--font-sans);

    /* --- 글자 크기 (clamp = 화면 폭에 따라 자동 조절) --- */
    --fs-display: clamp(1.625rem, 3.6vw, 2.75rem);  /* 메인 배너 대타이틀 — 모바일 26 · PC 44 */
    --fs-h1: clamp(1.75rem, 3.2vw, 2.625rem);   /* 페이지 제목 */
    --fs-h2: clamp(1.5rem, 2.4vw, 2.125rem);    /* 섹션 제목 */
    --fs-h3: clamp(1.1875rem, 1.6vw, 1.5rem);   /* 카드 제목 */
    --fs-lg: 1.0625rem;
    --fs-base: 1rem;
    --fs-sm: 0.9375rem;
    --fs-xs: 0.8125rem;

    --lh-tight: 1.3;
    --lh-base: 1.75;   /* 스토리보드 02번: "한 줄 사이를 넉넉히" */

    /* --- 여백 --- */
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    /* 섹션 아래 여백 */
    --section-py: clamp(4rem, 8vw, 7.5rem);

    /* 섹션 위 여백 — 아래보다 작게 잡습니다.
       앞 섹션의 아래 여백과 맞붙어 두 배로 보이기 때문입니다.
       (앞 120px + 이 섹션 120px = 제목 위에 240px 이 비던 문제) */
    --section-pt: clamp(2.5rem, 5.5vw, 5rem);

    /* --- 레이아웃 --- */
    --container: 1280px;        /* 본문 기본 폭 */
    --container-narrow: 960px;  /* 글 위주 페이지 */
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --header-h: 84px;
    --header-h-scrolled: 64px;
    --header-h-mo: 60px;

    /* --- 모서리 --- */
    --r-sm: 6px;
    --r-md: 10px;   /* 사진 모서리: 살짝 둥글게 */
    --r-lg: 16px;
    --r-pill: 999px; /* 버튼 양끝: 둥글게 */

    /* --- 그림자 --- */
    --shadow-sm: 0 1px 3px rgba(19, 35, 58, .06);
    --shadow-md: 0 6px 20px rgba(19, 35, 58, .08);
    --shadow-lg: 0 16px 40px rgba(19, 35, 58, .12);

    /* --- 전환 --- */
    --t-fast: .2s ease;
    --t-base: .3s ease;   /* 스토리보드 05번: 헤더 전환 0.3초 */

    /* --- 쌓임 순서 --- */
    --z-header: 100;
    --z-mobile-menu: 200;
    --z-popup: 300;
}

/* 반응형 기준점 — 이 프로젝트는 PC 기준으로 그리고 max-width로 줄입니다.
   1024px 이하 = 태블릿 / 640px 이하 = 휴대폰                                */
@media (max-width: 1024px) {
    :root {
        --lh-base: 1.7;
    }
}

/* --------------------------------------------------------------------------
   2. 리셋
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: var(--header-h-scrolled);   /* #주소로 이동할 때 고정 헤더에 가리지 않게 */
}

/* display 를 지정한 요소는 hidden 을 붙여도 안 사라져서 여기서 막아둡니다 */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--bg-page);
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    font-weight: 400;
    word-break: keep-all;          /* 한글 단어 중간에서 줄바꿈 방지 */
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img, picture, video, svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

input, textarea, select {
    font: inherit;
    color: inherit;
}

table {
    border-collapse: collapse;
    width: 100%;
}

address {
    font-style: normal;
}

/* 키보드 사용자에게만 초점 테두리 (스토리보드 05번 요구사항) */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. 기본 타이포
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
    color: var(--text-strong);
    line-height: var(--lh-tight);
    font-weight: 700;
    letter-spacing: -.02em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

strong {
    font-weight: 600;
}

time {
    color: var(--text-date);
    font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   4. 유틸리티
   -------------------------------------------------------------------------- */

/* 화면에는 안 보이고 스크린리더만 읽는 텍스트 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 키보드로 Tab 눌렀을 때 맨 처음 나오는 "본문 바로가기" */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--gutter);
    z-index: calc(var(--z-header) + 10);
    padding: var(--sp-3) var(--sp-5);
    background: var(--accent);
    color: #fff;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    transition: top var(--t-fast);
}

.skip-link:focus {
    top: 0;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.pc-only { display: revert; }
.mo-only { display: none; }

@media (max-width: 640px) {
    .pc-only { display: none; }
    .mo-only { display: revert; }
}