/* ==========================================================
   style.css — 대한성공회 광명교회
   SOLID: Open/Closed — 컴포넌트 단위로 확장 가능한 구조
   ========================================================== */

/* ── Variables ───────────────────────────────────────────── */
:root {
    /* Primary palette — refined forest green */
    --green-deep:   #0a1f12;
    --green-mid:    #3a7252;
    --green-light:  #eef2ec;
    --green-soft:   #c4d6c8;
    /* 전례 테마 — JS가 현재 절기 색으로 덮어씀. 기본값은 평시 녹색. */
    --theme:        #3a7252;
    --theme-light:  #eef2ec;
    --theme-on:     #fff;     /* --theme 배경 위 텍스트 색 (금색 절기엔 어두운 값) */
    /* Accent — luminous amber gold */
    --gold:         #c09a60;
    --gold-bg:      #faf3e6;
    /* Neutrals */
    --cream:        #f7f4ed;
    --white:        #ffffff;
    --text:         #1a1a1a;
    --text-muted:   #4d4c46;  /* WCAG AA(4.5:1) 충족 — cream/white 배경 위 본문용 */
    --border:       #e8e5dc;
    /* 표면 위 제목 텍스트 — 모드별로 분기 (green-deep은 배경 전용으로 유지) */
    --heading:      #0a1f12;
    /* Skeleton 로더 — 모드 대응 */
    --skeleton-base: #dbd8d0;
    --skeleton-mid:  #c8c5bc;
    --red:          #b53737;
    /* Nav glass */
    --nav-glass:    rgba(10, 31, 18, 0.9);
    /* 섹션 내 sticky 서브 네비 표면 — 모드별 분기 (다크에서 흰 배경 방지) */
    --surface-nav:  rgba(255, 255, 255, 0.96);
    /* Layout */
    --nav-h:        68px;
    --section-pad:  6rem;
    --content-max:  1200px;
    --radius-sm:    8px;
    --radius-md:    14px;
    --radius-lg:    20px;
    /* Shadows — lighter, less decorative */
    --shadow-sm:    0 1px 3px rgba(10, 31, 18, 0.05);
    --shadow-md:    0 3px 14px rgba(10, 31, 18, 0.07);
    --shadow-lg:    0 12px 40px rgba(10, 31, 18, 0.10);
    /* Motion — shared language for hover/reveal across all pages */
    --ease-out:        cubic-bezier(0.2, 0.7, 0.3, 1);
    --hover-shadow:    0 12px 36px rgba(22, 61, 36, 0.13);
    --hover-shadow-sm: 0 8px 26px rgba(22, 61, 36, 0.10);
    /* Type scale — 본문·컴포넌트 공통 (크기 난립 방지) */
    --fs-label:  0.78rem;   /* 소형 라벨·캡션 */
    --fs-sm:     0.9rem;    /* 보조 본문 */
    --fs-body:   1rem;      /* 기본 본문 */
    --fs-lead:   1.125rem;  /* 카드 제목 등 */
    /* Line-height — 역할별 행간 */
    --lh-tight:   1.2;      /* 큰 제목 */
    --lh-heading: 1.45;     /* 중간 제목·리드 */
    --lh-body:    1.75;     /* 기본 본문 */
    --lh-relaxed: 1.9;      /* 장문 본문 */
    /* Letter-spacing — uppercase 라벨 */
    --ls-eyebrow: 0.2em;
    --ls-label:   0.08em;
    /* Spacing scale — 4px 기반 */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3.5rem;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
/* 부드러운 스크롤은 모션 민감 사용자에게는 비활성화 (전정기관 자극 방지) */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
body {
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Noto Sans KR",
                 "Segoe UI", "Apple SD Gothic Neo", sans-serif;
    color: var(--text);
    background: var(--cream);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    word-break: keep-all;
    overflow-wrap: break-word;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ── Layout ──────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5vw, 2.5rem);
}

/* ── Accessibility ───────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 0.6rem 1.2rem;
    background: var(--green-deep);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    z-index: 10000;
    transition: top 0.1s;
}
.skip-link:focus { top: 0; }

/* 화면에는 숨기고 스크린리더에만 노출 (구조용 헤딩 등) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 3px solid var(--theme);
    outline-offset: 3px;
    border-radius: 3px;
}
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* ── Scroll Progress Bar ─────────────────────────────────── */
#scroll-progress-bar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 75%, white));
    box-shadow: 0 0 10px rgba(192, 154, 96, 0.55);
    border-radius: 0 2px 2px 0;
    z-index: 1100;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    pointer-events: none;
}

/* ── Navigation ──────────────────────────────────────────── */
@keyframes mobile-menu-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nav-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    background: rgba(10, 31, 18, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 1000;
    transition: box-shadow 0.3s, background 0.3s;
}
.nav-header.scrolled {
    background: rgba(10, 31, 18, 0.97);
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 1rem;
}

.nav-logo {
    display: flex; align-items: center; gap: 0.7rem;
    flex-shrink: 0;
}
.nav-logo-mark {
    width: 34px; height: 34px;
    flex-shrink: 0; display: block;
}
.nav-logo-mark svg {
    width: 100%; height: 100%; display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.28));
}
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nav-logo-name { font-size: 0.95rem; font-weight: 700; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.nav-logo-sub  { font-size: 0.7rem; color: rgba(255,255,255,0.9); letter-spacing: 0.04em; }

.nav-menu { display: flex; list-style: none; height: 100%; align-items: center; margin-left: auto; }

/* 우측 액션 (전체 메뉴·검색 트리거 + 햄버거) */
.nav-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.nav-menu-trigger {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: none; background: none; cursor: pointer;
    color: rgba(255,255,255,0.85);
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
}
.nav-menu-trigger:hover,
.nav-menu-trigger:focus-visible { color: #fff; background: rgba(255,255,255,0.12); outline: none; }
.nav-menu-trigger svg { display: block; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }

.nav-link {
    padding: 0 1.1rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    height: 100%;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    white-space: nowrap;
}
.nav-link:hover,
.nav-item:hover > .nav-link { color: #fff; }
.nav-link.active {
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--gold);
}

/* Dropdown */
.dropdown {
    position: absolute;
    top: 100%; left: 0;
    background: var(--white);
    border-top: 2px solid var(--theme);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    min-width: 180px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}
/* 키보드 사용자도 상위 링크 포커스 시 하위 메뉴 접근 가능 (focus-within) */
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown li a {
    display: block;
    padding: 0.8rem 1.25rem;  /* 터치 타깃 ≥44px 확보 */
    font-size: 0.9rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    transition: color 0.15s, background 0.15s, padding-left 0.15s;
}
.dropdown li:last-child a { border-bottom: none; }
.dropdown li a:hover {
    color: var(--theme);
    background: var(--green-light);
    padding-left: 1.6rem;
}

/* 메뉴 배지 (임시/준비중 등 상태 표시) */
.nav-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--gold);
    background: var(--gold-bg);
    border: 1px solid var(--gold);
    border-radius: 50px;
    vertical-align: middle;
}

/* Live button */
.btn-nav-live {
    flex-shrink: 0;
    background: var(--red);
    color: #fff;
    padding: 0.55rem 1.15rem;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s;
}
.btn-nav-live:hover { background: #9b1c1c; }

/* Dropdown chevron (mobile-only toggle) */
.nav-chevron {
    display: none;
}

/* Hamburger */
.nav-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    border: none;
    background: none;
    flex-shrink: 0;
}
.nav-toggle span {
    display: block; width: 22px; height: 2px;
    background: #fff; border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    color: #fff;
}

/* Ken Burns — 배경 이미지를 천천히 줌·이동하여 생동감 부여 */
@keyframes hero-kenburns {
    0%   { transform: scale(1.06) translate(0,      0);     }
    50%  { transform: scale(1.13) translate(-1.2%,  0.7%);  }
    100% { transform: scale(1.06) translate(0,      0);     }
}

.hero-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        var(--green-deep) url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1800&q=80')
        center/cover no-repeat;
    animation: hero-kenburns 24s ease-in-out infinite;
    will-change: transform;
}

/* 오버레이 — 상단/하단 강화로 텍스트 가독성 확보 */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.15) 45%,
        rgba(0, 0, 0, 0.65) 100%
    );
}

/* 텍스트 컨텐츠 */
.hero-content {
    position: relative;
    z-index: 2;
    padding-top: var(--nav-h);
}

/* 콘텐츠 스태거 등장 — 위로 살짝 떠오르며 페이드 인 */
@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-content > * {
    opacity: 0;
    animation: hero-fade-up 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.hero-label   { animation-delay: 0.10s; }
.hero h1      { animation-delay: 0.24s; }
.hero-sub     { animation-delay: 0.40s; }
.hero-actions { animation-delay: 0.56s; }
.hero-stats {
    animation: hero-fade-up 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) 0.72s both;
}

/* 모션 감소 선호 → 모든 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
    .hero-fallback,
    .hero-content > *,
    .hero-stats,
    .hero-scroll,
    .page-hero > * { animation: none; opacity: 1; transform: none; }

    .reveal, .reveal.visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.hero-label {
    display: block;
    font-size: 0.70rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.hero h1 {
    font-size: clamp(2rem, 5.2vw, 3.8rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.18;
    margin-bottom: 1.2rem;
    text-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4);
    word-break: keep-all;
}
.hero-sub {
    font-size: clamp(0.95rem, 2.5vw, 1.15rem);
    opacity: 0.90;
    max-width: 520px;
    margin: 0 auto 2.5rem;
    text-shadow: 0 1px 10px rgba(0,0,0,0.20);
}
.hero-actions {
    display: flex; gap: 0.8rem;
    justify-content: center; flex-wrap: wrap;
}
.btn-outline {
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.50);
    background: rgba(255,255,255,0.10);
    color: #fff;
    padding: 0.68rem 1.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 0.2s ease, border-color 0.2s ease,
                transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-outline:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.85);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(192, 154, 96, 0.22);
}

/* Hero — 실시간 예배 버튼 (히어로 외부 영역용) */
.btn-live {
    display: inline-block;
    background: var(--red);
    color: #fff;
    padding: 0.8rem 1.8rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: background 0.2s, transform 0.2s;
}
.btn-live:hover { background: #9b1c1c; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(155, 28, 28, 0.30); }

/* Hero — solid primary CTA */
.btn-hero-primary {
    display: inline-block;
    background: #fff;
    color: var(--heading);
    padding: 0.68rem 1.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}
.btn-hero-primary:hover {
    background: var(--green-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(192, 154, 96, 0.26);
}

/* Hero — 하단 스탯 스트립 */
.hero-stats {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.1rem 1.5rem;
    background: rgba(0,0,0,0.38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.10);
    flex-wrap: wrap;
}
.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.25rem 2rem;
}
.hero-stat-val {
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.hero-stat-lbl {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255,255,255,0.78);  /* 어두운 오버레이 위 대비 상향 */
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.hero-stat-divider {
    width: 1px;
    height: 2.2rem;
    background: linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.35) 50%,
        rgba(255,255,255,0) 100%);
    flex-shrink: 0;
}
.hero-stat--link {
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.18s;
    cursor: pointer;
}
.hero-stat--link:hover,
.hero-stat--link:focus-visible {
    background: rgba(255,255,255,0.12);
    outline: none;
}
.hero-stat--link:hover .hero-stat-val,
.hero-stat--link:focus-visible .hero-stat-val {
    color: #fff;
}
.hero-stat--link:hover .hero-stat-lbl,
.hero-stat--link:focus-visible .hero-stat-lbl {
    color: rgba(255,255,255,1);
}

/* Hero — 스크롤 인디케이터 */
@keyframes hero-scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50%       { transform: translateY(5px); opacity: 1; }
}
.hero-scroll {
    position: absolute;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255,255,255,0.65);
    animation: hero-scroll-bounce 2s ease-in-out infinite;
    pointer-events: none;
}

@media (max-width: 768px) {
    /* CTA — 세로 스택 시 동일 너비로 정렬 */
    .hero-actions { flex-direction: column; align-items: center; gap: 0.7rem; }
    .hero-actions a { width: 100%; max-width: 300px; text-align: center; }
    .hero-label { letter-spacing: 0.18em; font-size: 0.66rem; }

    .hero-stats { gap: 0; padding: 0.8rem 0.5rem; }
    .hero-stat { padding: 0.2rem 0.7rem; }
    .hero-stat-val { font-size: 0.82rem; }
    .hero-stat-lbl { font-size: 0.68rem; }
    .hero-stat-divider { height: 1.8rem; }
    .hero-scroll { bottom: 5rem; }
    .btn-hero-primary { font-size: 0.92rem; }

    .hero-fallback { animation: none; transform: none; will-change: auto; }
}

/* ── Page Hero (sub-pages) ───────────────────────────────── */
/* Stagger children so eyebrow → h1 → subtitle animate in sequence */
.page-hero > * {
    opacity: 0;
    animation: hero-fade-up 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    will-change: transform, opacity;
}
.page-hero > :nth-child(1) { animation-delay: 0.10s; }
.page-hero > :nth-child(2) { animation-delay: 0.24s; }
.page-hero > :nth-child(3) { animation-delay: 0.38s; }
.page-hero > :nth-child(4) { animation-delay: 0.50s; }

.page-hero {
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: 4rem;
    padding-left: clamp(1.25rem, 5vw, 2.5rem);
    padding-right: clamp(1.25rem, 5vw, 2.5rem);
    text-align: center;
    background: linear-gradient(165deg, color-mix(in srgb, var(--season, var(--theme)) 18%, var(--cream)) 0%, var(--theme-light) 40%, var(--cream) 100%);
}
.page-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -0.02em;
    line-height: 1.15;
    word-break: keep-all;
}
.page-hero p {
    margin-top: 1rem;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: var(--text-muted);
    max-width: 560px;
    margin-left: auto; margin-right: auto;
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ── Page Hero — 사진 배경 변형 ────────────────────────────── */
.page-hero--photo {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: none; /* 사진 히어로는 보더 제거 — 색 대비로 인한 이질감 방지 */
}
.page-hero--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(0,0,0,0.52) 0%,
        rgba(0,0,0,0.38) 60%,
        rgba(0,0,0,0.55) 100%);
    z-index: 0;
}
.page-hero--photo > * { position: relative; z-index: 1; }
.page-hero--photo h1,
.page-hero--photo p,
.page-hero--photo .section-eyebrow {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}

.page-hero--worship   { background-image: url('images/gallery/worship/야외성찬례.webp'); }
.page-hero--community { background-image: url('images/gallery/community/공동체1.webp'); }
.page-hero--clergy       { background-image: url('images/gallery/scenery/교회소개_교회내부_제단.webp'); background-position: 55% center; }
.page-hero--greenchurch  { background-image: url('images/gallery/scenery/greenchurch-award-2023.webp'); background-position: center 30%; }

@media (prefers-color-scheme: dark) {
    .page-hero--photo::before {
        background: linear-gradient(to bottom,
            rgba(0,0,0,0.65) 0%,
            rgba(0,0,0,0.50) 60%,
            rgba(0,0,0,0.68) 100%);
    }
}

/* ── Scroll Reveal ───────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.3, 1),
                transform 0.75s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Sections ────────────────────────────────────────────── */
.section { padding: var(--section-pad) 0; }
/* 교회력 절기 연동 섹션 배경 — 라이트: --theme-light, 다크: --theme 틴트+dark surface */
.section.gc-section-alt { background: var(--theme-light); }
@media (prefers-color-scheme: dark) {
    .section.gc-section-alt { background: color-mix(in srgb, var(--theme) 20%, var(--white)); }
}

.section-eyebrow {
    font-size: 0.68rem;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--theme);
    margin-bottom: var(--space-4);
    font-weight: 600;
    display: block;
}
.section-title {
    font-size: clamp(2rem, 3.8vw, 2.8rem);
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -0.03em;
    margin-bottom: var(--space-4);
    line-height: var(--lh-tight);
    word-break: keep-all;
}
.section-sub {
    font-size: var(--fs-body);
    color: var(--text-muted);
    max-width: 680px;
    line-height: var(--lh-body);
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: balance;
}
.section-header { margin-bottom: var(--space-8); }
/* 서브 문구가 없는 헤더는 본문과의 간격을 줄여 리듬 정돈 */
.section-header:not(:has(.section-sub)) { margin-bottom: var(--space-6); }

/* ── Grid ────────────────────────────────────────────────── */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.5rem;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    padding: 2.5rem 2.25rem;
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ease-out), opacity 0.6s ease;
    will-change: transform, opacity;
}
.card:hover {
    border-color: var(--theme);
    box-shadow: var(--hover-shadow);
    transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
    .card { transition: border-color 0.25s, box-shadow 0.25s; }
    .card:hover { transform: none; }
}
.card h3 {
    font-size: var(--fs-lead);
    font-weight: 700;
    color: var(--heading);
    margin-bottom: var(--space-3);
    letter-spacing: -0.01em;
}
/* 카드 본문 — 홈 예배 카드 등에서 인라인 스타일 대체 */
.card-time {
    font-weight: 700;
    color: var(--theme);
    margin-bottom: var(--space-2);
}
.card-desc {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}
.card-icon {
    font-size: 2.2rem;
    margin-bottom: 1.1rem;
    display: inline-block;
    transition: transform 0.35s var(--ease-out);
}
.card:hover .card-icon { transform: scale(1.18) translateY(-3px); }

/* Info Card */
.info-card {
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 2.5rem 2.25rem;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ease-out), opacity 0.6s ease;
}
.info-card:hover {
    border-color: var(--theme);
    box-shadow: var(--hover-shadow-sm);
    transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
    .info-card { transition: border-color 0.25s, box-shadow 0.25s; }
    .info-card:hover { transform: none; }
}
.info-card h3 {
    font-size: var(--fs-lead);
    font-weight: 700;
    color: var(--heading);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    letter-spacing: -0.01em;
}
.info-row {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}
.info-row strong {
    color: var(--heading);
    min-width: 64px;
    flex-shrink: 0;
    font-weight: 600;
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    padding-top: 0.1rem;
}

/* Guide Banner */
.guide-banner {
    background: var(--theme-light);
    border-left: 4px solid var(--theme);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1.6rem 2rem;
    margin-top: 2.5rem;
}
.guide-banner p {
    color: var(--heading);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

/* Sundays page — 현재 절기 강조 카드 */
.sundays-season-hero {
    background: var(--season-light);
    border-left: 5px solid var(--season);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1.75rem 2.25rem;
    margin-bottom: 0;
}
@media (prefers-color-scheme: dark) {
    .sundays-season-hero {
        background: color-mix(in srgb, var(--season) 12%, var(--white));
    }
}

/* ── 전례력 색 리본 (절기 페이지 전용 강조) ───────────────
   8개 절기 색을 교회력 순서대로 띠로 펼치고, 현재 절기 칸만
   솟아오르며 광택이 흐른다. 색은 데이터(--seg)로 주입되어 절기마다 바뀐다. */
.season-ribbon-wrap { text-align: center; }
.season-ribbon {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 30px;
    max-width: 620px;
    margin: 0 auto;
}
.season-ribbon-seg {
    position: relative;
    flex: 1 1 0;
    height: 16px;
    border-radius: 3px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--seg) 76%, #fff) 0%,
        var(--seg) 55%,
        color-mix(in srgb, var(--seg) 82%, #000) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.35s cubic-bezier(.4, 0, .2, 1), flex-grow 0.35s;
}
.season-ribbon-seg:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.season-ribbon-seg:last-child  { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.season-ribbon-seg:hover { height: 24px; }
.season-ribbon-seg.is-current {
    flex-grow: 1.8;
    height: 30px;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
                0 5px 14px color-mix(in srgb, var(--seg) 55%, transparent);
    z-index: 1;
}
/* 현재 절기를 가리키는 작은 ▼ 표식 */
.season-ribbon-seg.is-current::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--seg);
}
/* 은은한 광택 스윕 */
.season-ribbon-seg.is-current::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: season-ribbon-sheen 3.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes season-ribbon-sheen {
    0%        { background-position: 130% 0; }
    60%, 100% { background-position: -30% 0; }
}
.season-ribbon-mark {
    position: relative;
    z-index: 2;
    font-size: 0.85rem;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.season-ribbon-cap {
    margin: 0.7rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.season-ribbon-cap strong { color: var(--heading); font-weight: 700; }
button.season-ribbon-seg { border: none; padding: 0; font: inherit; cursor: pointer; }
.season-pop {
    margin: 0.5rem auto 0;
    max-width: 320px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,.1);
    overflow: hidden;
    text-align: left;
    animation: season-pop-in 0.17s ease;
}
.season-pop[hidden] { display: none; }
.season-pop-bar { height: 4px; }
.season-pop-title {
    padding: 0.7rem 1rem 0.15rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--heading);
    display: flex;
    align-items: baseline;
    gap: 0.4em;
}
.season-pop-en { font-size: 0.75rem; font-weight: 400; color: var(--text-muted); }
.season-pop-meta   { padding: 0 1rem; margin: 0 0 0.2rem; font-size: 0.82rem; color: var(--text-muted); }
.season-pop-period { padding: 0 1rem; margin: 0 0 0.2rem; font-size: 0.82rem; color: var(--text); font-weight: 500; }
.season-pop-desc   { padding: 0 1rem 0.75rem; margin: 0; font-size: 0.82rem; color: var(--text-muted); }
@keyframes season-pop-in {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .season-ribbon-seg.is-current::after { animation: none; }
    .season-ribbon-seg { transition: none; }
}
@media (max-width: 480px) {
    .season-ribbon { height: 26px; gap: 2px; }
    .season-ribbon-seg { height: 13px; }
    .season-ribbon-seg.is-current { height: 26px; }
    .season-ribbon-mark { font-size: 0.72rem; }
}

/* ── 월간 교회력 달력 위젯 ─────────────────────────────── */
.lit-cal {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 560px;
    margin: 0 auto;
}
.lit-cal-hd {
    padding: 0.9rem 1.5rem;
    /* 절기 색조는 유지하되 어둡게 섞어 흰 글자 대비(AA) 확보 — 금색 절기 대응 */
    background: var(--season);
    background: color-mix(in srgb, var(--season) 72%, #1a1a1a);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.lit-cal-hd-nav { display: flex; align-items: center; gap: 0.5rem; }
.lit-cal-hd-month { font-size: 1rem; font-weight: 700; color: #fff; }
.lit-cal-hd-season { font-size: 0.8rem; color: rgba(255,255,255,0.92); }
.lit-cal-nav {
    background: none;
    border: none;
    color: #fff;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
    line-height: 1;
    flex-shrink: 0;
}
.lit-cal-nav:hover,
.lit-cal-nav:focus-visible { opacity: 1; background: rgba(255,255,255,0.18); outline: none; }
.lit-cal-wds {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border);
    background: var(--theme-light);
}
.lit-cal-wds span {
    text-align: center;
    padding: 0.4rem 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}
.lit-cal-wds span:first-child { color: var(--heading); }
.lit-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.lit-cal-cell {
    min-height: 58px;
    padding: 0.3rem 0.35rem;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.lit-cal-cell:nth-child(7n) { border-right: none; }
.lit-cal-cell--empty { opacity: 0.35; }
.lit-cal-cell--past { opacity: 0.4; }
/* 날짜 숫자 — 색은 항상 변수 기반(다크모드 자동 대비). 절기 구분은 배경 틴트로 표현 */
.lit-cal-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    color: var(--heading);
}
.lit-cal-cell--sun .lit-cal-num { font-weight: 800; }
/* 오늘 — 절기색 링(테두리)로 표시. 텍스트색은 변수라 양 모드 모두 가독 */
.lit-cal-cell--today .lit-cal-num {
    font-weight: 800;
    box-shadow: 0 0 0 2px var(--season);
}
.lit-cal-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.25;
    margin-top: 0.15rem;
    word-break: keep-all;
}
/* 범례 */
.lit-cal-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.1rem;
    margin: 1.25rem auto 0;
    padding: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.lit-cal-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.lit-cal-legend li[data-cal-today] { cursor: pointer; border-radius: 0.25rem; }
.lit-cal-legend li[data-cal-today]:hover,
.lit-cal-legend li[data-cal-today]:focus-visible { color: var(--green-mid); outline: 2px solid var(--green-mid); outline-offset: 2px; }
.lit-cal-legend-dot {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.lit-cal-legend-dot--today { box-shadow: inset 0 0 0 2px var(--season); }
.lit-cal-legend-dot--sun   { background: color-mix(in srgb, var(--season) 28%, transparent); }
.lit-cal-legend-tag {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--heading);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    line-height: 1.3;
}
@media (max-width: 480px) {
    .lit-cal-cell { min-height: 46px; padding: 0.2rem 0.2rem; }
    .lit-cal-num { width: 1.5rem; height: 1.5rem; font-size: 0.74rem; }
    .lit-cal-label { font-size: 0.55rem; }
    .lit-cal-legend { gap: 0.75rem; font-size: 0.74rem; }
}

/* 절기 카드 순번 배지 + 현재 절기 태그 */
.lit-seq {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    border: 2px solid var(--theme);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--heading);
}
.lit-current-tag {
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 0.55rem;
    color: var(--season);
}
/* 현재 절기 강조 텍스트 — 절기색 사용. 다크모드에선 밝게 보정해 가독 확보 */
.sundays-season-hero .section-eyebrow { color: var(--season); }
@media (prefers-color-scheme: dark) {
    .sundays-season-hero .section-eyebrow,
    .lit-current-tag {
        color: color-mix(in srgb, var(--season) 50%, var(--heading));
    }
}

/* Quote Block */
.quote-block {
    background: var(--gold-bg);
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1.4rem 1.75rem;
    margin: 1.5rem 0;
}
.quote-block p {
    font-size: 0.98rem;
    font-style: italic;
    color: var(--heading);
    line-height: 1.85;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Philosophy values */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1.25rem;
}
.value-card {
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.75rem 1.5rem;
    transition: transform 0.3s cubic-bezier(.2,.7,.3,1),
                box-shadow 0.3s cubic-bezier(.2,.7,.3,1),
                border-color 0.3s;
}
.value-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--green-soft);
}
.value-card .val-icon { font-size: 1.8rem; margin-bottom: 0.85rem; }
.value-card h3 { font-size: 0.98rem; font-weight: 700; color: var(--heading); margin-bottom: 0.5rem; }
.value-card p { font-size: 0.87rem; color: var(--text-muted); line-height: 1.8; }

.value-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.value-card--link:hover { border-color: var(--green-mid); }
.value-card-cta {
    display: inline-block;
    margin-top: 0.85rem;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--green-mid);
}
.value-card--link:hover .value-card-cta { color: var(--heading); }

.philosophy-intro {
    max-width: 740px;
    margin: 0 auto 2.5rem;
    text-align: left;
}
.philosophy-intro p {
    font-size: 1.05rem;
    color: var(--text);
    line-height: 1.85;
    margin-bottom: 0.75rem;
    word-break: keep-all;
}
.philosophy-intro p:last-child { margin-bottom: 0; }

.philosophy-closing {
    margin-top: 2.5rem;
    padding: 1.5rem 2rem;
    background: var(--green-light);
    border-radius: var(--radius-md);
    text-align: left;
}
.philosophy-closing p {
    font-size: 1rem;
    color: var(--heading);
    line-height: 1.85;
    margin: 0;
    word-break: keep-all;
}

/* Minister Category */
.minister-category { margin-bottom: 2.5rem; }
.minister-cat-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 1.25rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--green-soft);
}
.minister-category:first-child .minister-cat-title { margin-top: 0; }
.minister-cat-note {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.65;
    margin: -0.5rem 0 1.25rem;
}
.minister-empty {
    color: var(--text-muted);
    font-size: 0.88rem;
    padding: 0.75rem 0;
}

/* 평신도 임원진 명단 — 성직자 카드보다 가벼운 직분·이름 표시 */
.officer-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 3px solid var(--theme);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.9rem;
    box-shadow: var(--shadow-md);
}
.officer-list { list-style: none; display: flex; flex-direction: column; }
.officer-row {
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
}
.officer-row:first-child { padding-top: 0; }
.officer-row:last-child { padding-bottom: 0; border-bottom: none; }
.officer-role {
    flex-shrink: 0;
    width: 96px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--theme);
    letter-spacing: 0.02em;
}
.officer-names {
    color: var(--heading);
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.7;
    word-break: keep-all;
}

/* Clergy Card */
.clergy-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--theme);
    padding: 2.5rem 2rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
    box-shadow: var(--shadow-md);
}
/* 초상 컨테이너 — overflow:hidden으로 신뢰할 수 있는 원형 크롭 보장 */
.clergy-avatar {
    width: 120px; height: 120px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid rgba(58, 114, 82, 0.3);
    box-shadow: 0 4px 14px rgba(10,31,18,0.10);
}
/* 사진 없을 때 그라디언트+이모지 폴백 */
.clergy-avatar--fallback {
    background: linear-gradient(135deg, var(--green-deep), var(--green-mid));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    color: #fff;
}
.clergy-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    cursor: zoom-in;
    display: block;
}
.clergy-name { font-size: 1.2rem; font-weight: 700; color: var(--heading); letter-spacing: -0.01em; }
.clergy-title { font-size: 0.85rem; color: var(--theme); font-weight: 600; margin-top: 0.25rem; letter-spacing: 0.02em; word-break: keep-all; overflow-wrap: break-word; }
.clergy-desc { font-size: 0.95rem; color: var(--text); line-height: 1.85; margin-top: 1rem; opacity: 0.85; }

/* ── Clergy Bio Section ──────────────────────────────────── */
.bio-section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-align: left; }
.bio-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--theme);
    margin: 0 0 0.75rem;
}
.bio-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.bio-timeline::before {
    content: '';
    position: absolute;
    left: 46px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--border);
}
.bio-milestone {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding: 0.45rem 0;
    position: relative;
}
.bio-year {
    min-width: 38px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--theme);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    padding-right: 0.5rem;
    text-align: right;
    line-height: 1.6;
}
.bio-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--theme);
    flex-shrink: 0;
    margin: 0 0.6rem;
    position: relative;
    top: 1px;
}
.bio-text {
    flex: 1;
    font-size: 0.87rem;
    line-height: 1.7;
    color: var(--text);
}
.bio-first {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--green-deep);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.4rem;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.bio-roles { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.bio-role-tag {
    font-size: 0.78rem;
    color: var(--theme);
    background: var(--green-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.25rem 0.65rem;
    white-space: nowrap;
}
.bio-ministry-note {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    background: var(--cream);
    border-left: 4px solid var(--theme);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 1rem 1.1rem;
    margin-top: 1.25rem;
}
.bio-ministry-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 0.1rem; }
.bio-ministry-note p { font-size: 0.88rem; line-height: 1.8; color: var(--text); margin: 0; }
.bio-source {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    line-height: 1.6;
}

/* ── Index: Brief About ──────────────────────────────────── */
.about-brief {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.about-brief-lead {
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -0.025em;
    margin-bottom: var(--space-5);
    line-height: var(--lh-heading);
    word-break: keep-all;
    overflow-wrap: break-word;
}
.about-brief-desc {
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--text);
    margin-bottom: var(--space-6);
    word-break: keep-all;
    overflow-wrap: break-word;
}
.about-brief-facts {
    list-style: none;
    padding: 1.5rem 1.75rem;
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin: 0 0 2rem;
    text-align: left;
    display: grid;
    gap: 0.85rem;
}
.about-brief-facts li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.92rem;
}
.about-brief-facts strong {
    min-width: 64px;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: var(--ls-label);
    color: var(--theme);
    text-transform: uppercase;
    flex-shrink: 0;
}
.about-brief-facts span { color: var(--text); }
.about-brief-link {
    display: inline-block;
    color: var(--theme);
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.15rem;
    transition: color 0.2s;
}
.about-brief-link:hover { color: var(--heading); }

/* 수상 배지 — facts 아래, 소개 링크 위 */
.about-brief-award {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--green-light);
    border: 1px solid var(--green-soft);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.25rem;
    margin-bottom: var(--space-5);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.about-brief-award:hover { background: #dce8dd; border-color: var(--theme); }
.about-brief-award-icon { font-size: 1.25rem; flex-shrink: 0; }
.about-brief-award-body { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; text-align: left; }
.about-brief-award-body strong { font-size: var(--fs-sm); font-weight: 700; color: var(--heading); }
.about-brief-award-body span   { font-size: var(--fs-label); color: var(--text-muted); }
.about-brief-award-arrow       { color: var(--theme); font-size: var(--fs-sm); flex-shrink: 0; }
.about-brief-news-link { margin-bottom: var(--space-5); }
.link-plain-ext { font-size: var(--fs-label); color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.link-plain-ext:hover { color: var(--theme); }

/* ── Home page — 정렬 통일(센터) & 섹션 변형 ─────────────── */
/* 배경 흰색 섹션 — HTML 인라인 style 대체 */
.section--white { background: var(--white); }
/* 홈은 히어로 센터 정렬에 맞춰 모든 섹션 헤더를 가운데로 통일 */
.home .section-header { text-align: center; }
.home .section-sub { margin-left: auto; margin-right: auto; }

/* ── Logo Intro (clergy page) ────────────────────────────── */
.logo-intro-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3rem;
    align-items: start;
    max-width: 900px;
    margin: 0 auto;
}
.logo-display { text-align: center; }
/* rect 없이 CSS만으로 배경 처리 — 단일 border-radius로 깔끔하게 클리핑 */
.logo-badge {
    width: 140px;
    height: 140px;
    border-radius: 20px;
    background: #163d24;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.logo-badge svg {
    width: 100%;
    height: 100%;
}


.logo-subtitle {
    margin-top: 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--theme);
}
.logo-colors {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.7;
    max-width: 200px;
}
.logo-desc {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--text);
    margin-bottom: 1.25rem;
}
.logo-history {
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--text);
    opacity: 0.85;
    margin-bottom: 1.75rem;
}
.logo-elements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.logo-element-item {
    background: var(--green-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
}
.logo-element-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--theme);
    margin-bottom: 0.3rem;
    letter-spacing: 0.02em;
}
.logo-element-desc {
    font-size: 0.83rem;
    line-height: 1.65;
    color: var(--text);
    opacity: 0.85;
}
.logo-refs {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    list-style: none;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.logo-ref-item {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.7;
}
.logo-ref-num {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--theme);
    background: var(--green-light);
    border-radius: 50%;
    width: 1.4em;
    height: 1.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.15em;
}
/* flex: 1 + min-width: 0 으로 <em> 구간에서 줄 끊김 방지 */
.logo-ref-text {
    flex: 1;
    min-width: 0;
}

/* ── Anglican Intro Sections ─────────────────────────────── */
.anglican-welcome {
    background: var(--green-deep);
    color: rgba(255,255,255,0.9);
    padding: 1.25rem 0;
}
.anglican-welcome .container {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.anglican-welcome p {
    font-size: 0.92rem;
    line-height: 1.75;
    margin: 0;
    opacity: 0.92;
}
.anglican-para {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--text);
    margin-bottom: 1.1rem;
}
.anglican-para:last-child { margin-bottom: 0; }
.anglican-body { margin: 0 auto 2.5rem; max-width: 760px; }
.bcp-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
    margin: 1.75rem 0 0.6rem;
}
.bcp-section-title:first-child { margin-top: 0; }

/* Pillars (three-column card grid) */
.anglican-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.anglican-pillar {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.6rem 1.4rem;
    text-align: center;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ease-out), opacity 0.6s ease;
}
.anglican-pillar:hover {
    border-color: var(--theme);
    box-shadow: var(--hover-shadow-sm);
    transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
    .anglican-pillar { transition: border-color 0.25s, box-shadow 0.25s; }
    .anglican-pillar:hover { transform: none; }
}
.anglican-pillar-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: inline-block;
    transition: transform 0.35s var(--ease-out);
}
.anglican-pillar:hover .anglican-pillar-icon { transform: scale(1.15) translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
    .anglican-pillar-icon { transition: none; }
}
.anglican-pillar-title { font-size: 1rem; font-weight: 700; color: var(--heading); margin-bottom: 0.5rem; }
.anglican-pillar-desc { font-size: 0.85rem; line-height: 1.75; color: var(--text-muted); }
.anglican-pillar-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.7;
    padding: 0.9rem 1.1rem;
    background: var(--green-light);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--theme);
}

/* Korea section — two-column layout */
.anglican-korea-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: start;
}
.founded-badge {
    background: var(--green-deep);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 1.5rem 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
}
.founded-year {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.founded-label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    opacity: 0.7;
    margin-top: 0.4rem;
}
.korea-highlights { list-style: none; padding: 0; margin: 0; min-width: 240px; }
.korea-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0;
    font-size: 0.87rem;
    line-height: 1.6;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.korea-highlight-item:last-child { border-bottom: none; }
.korea-hl-icon { flex-shrink: 0; font-size: 1rem; margin-top: 0.05rem; }

/* Iona pilgrim trail link card */
.iona-link-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--theme);
    border-radius: 8px;
    color: var(--theme);
    text-decoration: none;
    transition: background 0.25s var(--ease-out), color 0.25s;
    width: 100%;
    box-sizing: border-box;
}
.iona-link-card--hover,
.iona-link-card:hover { background: var(--theme); color: var(--theme-on); }
.iona-link-card__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.iona-link-card__label { font-size: 0.9rem; font-weight: 700; }
.iona-link-card__desc  { font-size: 0.78rem; margin-top: 0.15rem; opacity: 0.8; }
.iona-link-card__arrow {
    flex-shrink: 0;
    font-size: 1rem;
    transition: transform 0.25s var(--ease-out);
}
.iona-link-card:hover .iona-link-card__arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .iona-link-card__arrow { transition: none; }
    .iona-link-card:hover .iona-link-card__arrow { transform: none; }
}

/* Five Marks of Mission */
.mission-marks { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.mission-mark {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--green-light);
    border-radius: 8px;
    border-left: 3px solid var(--theme);
    transition: box-shadow 0.3s ease, transform 0.3s var(--ease-out), opacity 0.6s ease;
}
.mission-mark:hover {
    box-shadow: var(--hover-shadow-sm);
    transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
    .mission-mark { transition: box-shadow 0.25s; }
    .mission-mark:hover { transform: none; }
}
.mission-mark__num { flex-shrink: 0; width: 1.75rem; height: 1.75rem; background: var(--theme); color: var(--theme-on); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
.mission-mark__body { flex: 1; min-width: 0; }
.mission-mark__title { font-size: 0.95rem; font-weight: 700; color: var(--heading); margin: 0 0 0.25rem; }
.mission-mark__en { font-size: 0.82rem; color: var(--text-muted); font-style: italic; margin: 0; }

/* Bank Card */
.bank-card {
    background: var(--green-light);
    border-radius: var(--radius-md);
    padding: 1.6rem 1.75rem;
    margin-bottom: 1.5rem;
}
.bank-card .account {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.bank-card .sub { font-size: 0.85rem; color: var(--theme); margin-top: 0.35rem; }

/* ── Bus Chips ──────────────────────────────────────────── */
.bus-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
.bus-chip {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
.bus-chip.bus-blue  { background: #2c6aa6; }
.bus-chip.bus-green { background: #3a7252; }

/* ── Press List ─────────────────────────────────────────── */
.press-category { margin-bottom: 1.8rem; }
.press-category:last-child { margin-bottom: 0; }
.press-category-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}
.press-list {
    list-style: none;
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
}
.press-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}
.press-item:last-child { border-bottom: none; }
.press-item:hover { background: var(--green-light); }
.press-year {
    flex-shrink: 0;
    background: var(--green-deep);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.03em;
    margin-top: 0.18rem;
    min-width: 38px;
    text-align: center;
}
.press-main { flex: 1; min-width: 0; }
.press-link {
    display: block;
    color: var(--text);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.55;
    transition: color 0.2s;
    word-break: keep-all;
}
.press-link:hover { color: var(--theme); text-decoration: underline; }
.press-meta {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ── FAQ (faq.html) ─────────────────────────────────────── */
.container--narrow { max-width: 820px; }

.faq-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-relaxed);
    color: var(--text);
    text-align: center;
    word-break: keep-all;
    margin: 0 auto 3rem;
    max-width: 660px;
}

.faq-cat { margin-bottom: 3rem; }
.faq-cat:last-child { margin-bottom: 0; }
.faq-cat-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--green-soft);
}
.faq-cat-icon { font-size: 1.2rem; line-height: 1; }

.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }

.faq-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item[open] {
    border-color: var(--theme);
    box-shadow: var(--shadow-md);
}
.faq-item:hover { border-color: var(--green-soft); }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 1rem;
    line-height: var(--lh-heading);
    color: var(--heading);
    word-break: keep-all;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:focus-visible {
    outline: 2px solid var(--theme);
    outline-offset: -2px;
    border-radius: var(--radius-md);
}
.faq-q-text::before {
    content: "Q";
    display: inline-block;
    color: var(--theme);
    font-weight: 800;
    margin-right: 0.5rem;
}

/* 펼침 표시(+/−) — 회전하는 십자 아이콘 */
.faq-q-mark {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    transition: transform 0.25s var(--ease-out);
}
.faq-q-mark::before,
.faq-q-mark::after {
    content: "";
    position: absolute;
    background: var(--theme);
    border-radius: 2px;
}
.faq-q-mark::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-q-mark::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-item[open] .faq-q-mark { transform: rotate(135deg); }

.faq-a {
    padding: 0 1.4rem 1.3rem;
    border-top: 1px solid var(--border);
}
.faq-a-lead {
    margin: 1rem 0 0;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-relaxed);
    color: var(--heading);
    word-break: keep-all;
}
.faq-a-lead a, .faq-a-lead strong { color: inherit; }
.faq-a-lead em { font-style: normal; background: var(--gold-bg); padding: 0 0.2em; border-radius: 3px; }
.faq-a-text {
    margin: 0.55rem 0 0;
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--text);
    word-break: keep-all;
}
.faq-a-text a {
    color: var(--theme);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.faq-a-text strong { color: var(--heading); }
.faq-a-text em { font-style: normal; background: var(--gold-bg); padding: 0 0.2em; border-radius: 3px; }

.faq-refs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--border);
}
.faq-refs-label {
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: var(--ls-label);
    color: var(--text-muted);
    text-transform: uppercase;
    margin-right: 0.2rem;
}
.faq-ref {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--fs-sm);
    color: var(--theme);
    background: var(--green-light);
    border: 1px solid var(--green-soft);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    line-height: 1.4;
    transition: background 0.2s, color 0.2s;
    word-break: keep-all;
}
.faq-ref:hover { background: var(--theme); color: var(--theme-on); border-color: var(--theme); }

@media (max-width: 600px) {
    .faq-q { padding: 1rem 1.1rem; font-size: 0.95rem; }
    .faq-a { padding: 0 1.1rem 1.1rem; }
}

/* ── Liturgy Guide ──────────────────────────────────────── */
/* ── Liturgical season colour tokens ──────────────────────── */
:root { --season: var(--green-mid); --season-light: var(--green-light); }

.liturgy-season-badge .season-dot      { background: var(--season); }
.liturgy-season-badge .season-name     { color: var(--season); font-weight: 700; }
.liturgy-guide .section-eyebrow        { color: var(--season); }
.liturgy-guide .liturgy-inner-quote    { border-left-color: var(--season); }
.liturgy-guide .liturgy-card           { border-left-color: var(--season); }
.liturgy-guide .step-num               { background: var(--season); }
.liturgy-guide .resource-card          { border-top-color: var(--season); }
.liturgy-guide .resource-link          { color: var(--season); }
.liturgy-guide .space-item             { border-top-color: var(--season); }
.liturgy-guide .communion-season       { border-top-color: var(--season); background: var(--season-light); }
.liturgy-guide .check-icon             { color: var(--season); }

.liturgy-guide {
    max-width: 760px;
    margin: 4rem auto 0;
}
.liturgy-season-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 0.35rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2.25rem;
    box-shadow: var(--shadow-sm);
}
.season-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.season-note {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 0.25rem;
}
/* Newcomer intro block */
.newcomer-intro {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    margin-bottom: 2.75rem;
}
.newcomer-intro-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}
.newcomer-intro-body {
    font-size: 0.97rem;
    color: var(--text);
    line-height: 1.95;
    margin-bottom: 0.85rem;
}
.newcomer-key-facts {
    margin-top: 1.5rem;
    padding: 1.25rem 1.4rem;
    background: var(--green-light);
    border-radius: var(--radius-md);
    display: grid;
    gap: 0.7rem;
}
.newcomer-key-row {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    font-size: 0.92rem;
    line-height: 1.7;
}
.newcomer-key-label {
    flex-shrink: 0;
    min-width: 44px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--heading);
    padding-top: 0.15rem;
}
.newcomer-key-value {
    color: var(--text);
    flex: 1;
    min-width: 0;
}
.newcomer-key-link {
    display: inline-block;
    margin-top: 0.25rem;
    color: var(--theme);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
}
.newcomer-key-link:hover { text-decoration: underline; }

/* Newcomer CTA (page closing) */
/* ── Next Step CTA ────────────────────────────────────────── */
.next-step-cta {
    padding: var(--section-pad) 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, #1e4530 0%, var(--green-deep) 65%);
    border-top: none;
}
.next-step-cta .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.next-step-cta-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.85rem;
}
.next-step-cta-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.9rem;
    letter-spacing: -0.02em;
    line-height: 1.25;
    word-break: keep-all;
}
.next-step-cta-desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.70);
    max-width: 480px;
    margin: 0 0 2.4rem;
    line-height: 1.75;
    word-break: keep-all;
}
.next-step-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}
.btn-next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.7rem;
    border-radius: 50px;
    font-size: 0.92rem;
    font-weight: 600;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--text);
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-next:hover {
    transform: translateY(-2px);
    border-color: var(--theme);
    box-shadow: var(--hover-shadow-sm);
}
@media (prefers-reduced-motion: reduce) {
    .btn-next:hover { transform: none; }
}
.btn-next--primary {
    background: var(--green-deep);
    border-color: var(--heading);
    color: #fff;
}
.btn-next--primary:hover {
    background: var(--theme);
    border-color: var(--theme);
    color: var(--theme-on);
}
/* Dark CTA — 다크 패널 안에서 버튼 재정의 (전역 btn-next 불변) */
.next-step-cta .btn-next {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.88);
}
.next-step-cta .btn-next:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.48);
    color: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}
.next-step-cta .btn-next--primary {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}
.next-step-cta .btn-next--primary:hover {
    background: color-mix(in srgb, var(--gold) 78%, white);
    border-color: color-mix(in srgb, var(--gold) 78%, white);
    color: #fff;
    box-shadow: 0 8px 28px rgba(192,154,96,0.35);
}

@media (max-width: 560px) {
    .next-step-cta { padding: 4rem 0; }
    .next-step-cta-actions { flex-direction: column; width: 100%; align-items: center; }
    .btn-next { width: 100%; max-width: 320px; justify-content: center; }
}

.newcomer-cta {
    margin-top: 3rem;
    padding: 2.25rem 2rem;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
}
.newcomer-cta h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}
.newcomer-cta > p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.85;
    max-width: 520px;
    margin: 0 auto 1.5rem;
}
.newcomer-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
}
.newcomer-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.4rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.newcomer-cta-link:hover {
    border-color: var(--theme);
    color: var(--heading);
    background: var(--green-light);
    box-shadow: var(--hover-shadow-sm);
    transform: translateY(-1px);
}

.liturgy-section { margin-bottom: 3.5rem; }
.liturgy-body {
    font-size: 0.97rem;
    color: var(--text);
    line-height: 1.95;
    margin-bottom: 1.1rem;
}
.liturgy-card {
    background: var(--cream);
    border: 1px solid var(--border);
    border-left: 4px solid;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 1.4rem 1.75rem;
    margin-top: 1.5rem;
}
.liturgy-card-title {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.85rem;
}
.liturgy-list { list-style: none; padding: 0; }
.liturgy-list li {
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.85;
    padding: 0.2rem 0 0.2rem 1.2rem;
    position: relative;
}
.liturgy-list li::before {
    content: "·";
    position: absolute;
    left: 0.25rem;
    color: var(--theme);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.6;
}
.liturgy-inner-quote {
    background: var(--white);
    border-left: 4px solid;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 1.2rem 1.5rem;
    margin: 1.25rem 0;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.9;
}

/* Steps */
.liturgy-steps { display: flex; flex-direction: column; gap: 1rem; }
.liturgy-step {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out), opacity 0.6s ease;
}
.liturgy-step:hover {
    border-color: var(--green-soft);
    box-shadow: var(--hover-shadow-sm);
    transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
    .liturgy-step { transition: border-color 0.25s, box-shadow 0.25s; }
    .liturgy-step:hover { transform: none; }
}
.step-num {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
}
.step-body { flex: 1; min-width: 0; }
.step-title {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.55rem;
}
.step-list { list-style: none; padding: 0; }
.step-list li {
    font-size: 0.87rem;
    color: var(--text-muted);
    line-height: 1.85;
    padding-left: 1rem;
    position: relative;
}
.step-list li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--theme);
}

/* Communion */
.communion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.communion-card {
    border: 1px solid var(--border);
    border-top: 3px solid;
    border-radius: var(--radius-md);
    padding: 1.5rem 1.75rem;
}
.communion-card h3 {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* Worship page components */
.worship-services-grid { margin-bottom: 2rem; }
.worship-time          { color: var(--green-mid); font-weight: 700; }
.worship-card-desc     { margin-top: 1rem; color: var(--text-muted); font-size: 0.9rem; line-height: 1.9; }
.worship-card-quote    { margin-top: 1.25rem; font-size: 0.9rem; }
.worship-card-cite     { font-size: 0.8rem; font-style: normal; color: var(--text-muted); }
.worship-card-detail   { margin-top: 1rem; font-size: 0.87rem; color: var(--text-muted); line-height: 1.9; }
.liturgy-body--lead    { margin-bottom: 1.5rem; }
.resource-en           { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.resource-grid--single { --resource-cols: 1; grid-template-columns: 1fr; }

/* Worship Resources */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1.25rem;
}
.resource-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 3px solid;
    border-radius: var(--radius-md);
    padding: 1.6rem 1.6rem 1.4rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s var(--ease-out), opacity 0.6s ease;
}
.resource-card:hover {
    border-color: var(--theme);
    box-shadow: var(--hover-shadow-sm);
    transform: translateY(-5px);
}
.resource-icon {
    font-size: 1.9rem;
    margin-bottom: 0.8rem;
    display: inline-block;
    transition: transform 0.35s var(--ease-out);
}
.resource-card:hover .resource-icon { transform: scale(1.12) translateY(-2px); }
.resource-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.45rem;
    letter-spacing: -0.01em;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.resource-desc {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 1rem;
    flex-grow: 1;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.resource-link { font-size: 0.84rem; font-weight: 700; letter-spacing: 0.01em; }
@media (prefers-reduced-motion: reduce) {
    .resource-card { transition: border-color 0.25s, box-shadow 0.25s; }
    .resource-card:hover { transform: none; }
    .resource-icon { transition: none; }
    .resource-card:hover .resource-icon { transform: none; }
}

/* Lectionary Calendar */
.lectionary-cal-wrap {
    position: relative;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}
.lectionary-cal {
    display: block;
    width: 100%;
    height: 480px;
    border: none;
}
@media (max-width: 600px) {
    .lectionary-cal { height: 380px; }
}

/* 전례독서 카드 */
.lectionary-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 560px;
}
.lectionary-card + .lectionary-card { margin-top: 1rem; }
.lectionary-card--current {
    border: 2px solid var(--green-mid);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--green-mid) 25%, transparent);
}
.lectionary-card-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--green-mid);
    margin: 0 0 0.35rem;
    text-transform: uppercase;
}
.lectionary-card-head {
    background: color-mix(in srgb, var(--season, var(--green-dark)) 12%, var(--white));
    padding: 1rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--border);
}
.lectionary-card-week {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
    margin: 0 0 0.2rem;
}
.lectionary-card-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}
.lectionary-card-body {
    padding: 0.5rem 0;
}
.lectionary-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.lectionary-row:last-child { border-bottom: none; }
.lectionary-role {
    flex: 0 0 4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.lectionary-ref {
    font-size: 0.97rem;
    color: var(--heading);
    font-weight: 600;
}
/* 본문 참조 → 공동번역 성서 링크 */
.lectionary-ref-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    color: var(--theme);
    text-decoration: none;
    transition: color 0.15s ease;
}
.lectionary-ref-link:hover {
    color: var(--heading);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.lectionary-ref-ico { font-size: 0.72em; opacity: 0.6; }

/* 연속(A)·짝(B) 독서 트랙 토글 */
.lect-track {
    display: inline-flex;
    gap: 0.25rem;
    margin: 0.9rem 1.25rem 0;
    padding: 0.25rem;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 50px;
}
.lect-track-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.lect-track-btn:hover:not(.is-active) { color: var(--heading); }
.lect-track-btn.is-active {
    background: var(--theme);
    color: var(--theme-on);
    box-shadow: var(--hover-shadow-sm);
}
.lect-track-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 700;
    background: color-mix(in srgb, currentColor 16%, transparent);
}
.lect-track-hint {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin: 0.5rem 1.25rem 0;
    line-height: 1.5;
}
/* 전례독서 이전/다음 네비게이션 */
.lect-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
    max-width: 560px;
}
.lect-nav-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--heading);
    text-align: center;
    flex: 1;
    padding: 0 0.5rem;
}
.lect-nav-btn {
    padding: 0.38rem 0.9rem;
    border-radius: 50px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}
.lect-nav-btn:hover:not(:disabled) {
    border-color: var(--theme);
    color: var(--heading);
    box-shadow: var(--hover-shadow-sm);
}
.lect-nav-btn:disabled {
    opacity: 0.32;
    cursor: default;
}
.lectionary-loading {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 1rem 0;
}

.lectionary-card-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0.6rem 1.25rem 0.85rem;
    margin: 0;
    border-top: 1px solid var(--border);
}
@media (prefers-color-scheme: dark) {
    .lectionary-card-head {
        background: color-mix(in srgb, var(--season, var(--green-dark)) 18%, var(--white));
    }
}

/* Worship Space (전례 공간 안내) */
.space-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 1.25rem;
}
.space-item {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 3px solid;
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
}
.space-icon { font-size: 1.7rem; line-height: 1.4; flex-shrink: 0; }
.space-text { min-width: 0; }
.space-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.45rem;
}
.space-en {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--theme);
    letter-spacing: 0.02em;
    margin-left: 0.3rem;
}
.space-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* Checklist */
.liturgy-checklist { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.5rem; }
.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: var(--white);
    border-radius: var(--radius-sm);
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--border);
}
.check-icon {
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 700;
    padding-top: 0.1rem;
}
.checklist-item p {
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.8;
    margin: 0;
}

/* ── Footer ──────────────────────────────────────────────── */
footer {
    background: var(--green-deep);
    color: rgba(255,255,255,0.85);
    padding: 6rem 0 4rem;
}
.footer-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3.5rem;
}
.footer-col h2 {
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(255,255,255,0.62);  /* 섹션 제목 대비 상향 */
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Brand */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
}
.footer-logo-mark {
    width: 38px; height: 38px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.14);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.footer-brand-name {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}
.footer-brand-sub {
    display: block;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.65);
    margin-top: 0.12rem;
}
.footer-col .footer-brand-slogan {
    font-size: 0.84rem;
    font-style: italic;
    color: rgba(255,255,255,0.7);
    line-height: 1.75;
    margin: 0 0 0.85rem;
}
.footer-col .footer-brand-meta {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.68);
    line-height: 1.9;
    margin: 0;
}

/* Worship schedule */
.footer-service-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 0.82rem;
}
.footer-service-label { color: rgba(255,255,255,0.75); }
.footer-service-time {
    color: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}

.footer-info-row--first { margin-top: 1rem; }

/* Contact rows */
.footer-info-row {
    display: flex;
    gap: 0.7rem;
    font-size: 0.85rem;
    padding: 0.28rem 0;
    color: rgba(255,255,255,0.8);  /* 연락처 본문 — AA 충족 */
    line-height: 1.65;
    align-items: flex-start;
}
.footer-info-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    min-width: 26px;
    flex-shrink: 0;
    padding-top: 0.2rem;
}
.footer-info-link { color: inherit; transition: color 0.2s; }
.footer-info-link:hover { color: #fff; }
.footer-addr-link { text-decoration: none; }
.footer-addr-link::after {
    content: '↗';
    font-size: 0.68rem;
    opacity: 0;
    margin-left: 0.3rem;
    transition: opacity 0.2s, transform 0.2s;
}
.footer-addr-link:hover { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; }
.footer-addr-link:hover::after { opacity: 0.55; transform: translate(2px, -2px); }

/* Channel links */
.footer-col .footer-ext-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: color 0.2s;
    line-height: 1.4;
}
.footer-col .footer-ext-link:last-child { border-bottom: none; }
.footer-col .footer-ext-link::after {
    content: '↗';
    font-size: 0.68rem;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
}
.footer-col .footer-ext-link:hover { color: #fff; }
.footer-col .footer-ext-link:hover::after {
    opacity: 0.55;
    transform: translate(2px, -2px);
}
.footer-col .footer-ext-link--dim {
    opacity: 0.78;
    font-size: 0.8rem;
    margin-top: 0.65rem;
    border-bottom: none;
}

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.78rem;
    opacity: 0.78;
}
.footer-bottom-links { display: flex; align-items: center; gap: 1.25rem; }
.footer-privacy-link { color: inherit; transition: opacity 0.2s; }
.footer-privacy-link:hover { opacity: 1; }

/* ── Utilities ───────────────────────────────────────────── */
.text-muted { color: var(--text-muted); }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --section-pad: 3.5rem;
    }
    .page-hero {
        padding-top: calc(var(--nav-h) + 2.5rem);
        padding-bottom: 2.5rem;
    }

    /* Nav */
    .nav-toggle { display: flex; }
    .btn-nav-live { display: none; }
    .nav-menu {
        display: none;
        position: fixed;
        top: var(--nav-h); left: 0; right: 0;
        background: var(--green-deep);
        flex-direction: column;
        align-items: stretch;
        height: auto;
        max-height: calc(100vh - var(--nav-h));
        max-height: calc(100svh - var(--nav-h));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid rgba(255,255,255,0.1);
    }
    .nav-menu.open {
        display: flex;
        animation: mobile-menu-open 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    }
    @media (prefers-reduced-motion: reduce) {
        .nav-menu.open { animation: none; }
    }
    .nav-item {
        height: auto;
        flex-direction: row;
        align-items: stretch;
        flex-wrap: wrap;
    }
    .nav-link {
        flex: 1;
        padding: 0.9rem 1.5rem;
        height: auto;
        color: rgba(255,255,255,0.9);
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav-chevron {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        background: none;
        border: none;
        border-left: 1px solid rgba(255,255,255,0.08);
        border-bottom: 1px solid rgba(255,255,255,0.06);
        color: rgba(255,255,255,0.65);
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.15s, color 0.15s;
        padding: 0;
    }
    .nav-chevron:hover { background: rgba(255,255,255,0.06); color: #fff; }
    .nav-item.mobile-open .nav-chevron { color: #fff; }
    .nav-item.mobile-open .nav-chevron svg { transform: rotate(180deg); }
    .nav-chevron svg { transition: transform 0.25s; }
    .dropdown {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        box-shadow: none;
        border: none;
        border-top: none;
        border-left: 3px solid rgba(255,255,255,0.3);
        margin-left: 1.5rem;
        border-radius: 0;
        min-width: 0;
        width: 100%;
        background: transparent;
        display: none;
        flex-basis: 100%;
    }
    .nav-item.mobile-open .dropdown { display: block; }
    .dropdown li a {
        color: rgba(255,255,255,0.82);  /* 대비 상향 (AA) */
        padding: 0.85rem 1.1rem;        /* 터치 타깃 ≥44px */
        border-bottom: 1px solid rgba(255,255,255,0.05);
        font-size: 0.92rem;
    }
    .dropdown li a:hover {
        color: #fff;
        background: rgba(255,255,255,0.05);
        padding-left: 1.4rem;
    }
    .nav-link.active { box-shadow: none; }

    /* Hero */
    .hero { min-height: 100vh; min-height: 100svh; }

    /* Clergy Card — 초상만 가운데, bio 텍스트는 좌측 정렬 유지 */
    .clergy-card { grid-template-columns: 1fr; gap: 1.25rem; padding: 2rem 1.75rem; }
    .clergy-avatar { margin: 0 auto; }

    /* 임원진 명단 — 좁은 화면에서 직분 라벨을 이름 위로 */
    .officer-card { padding: 1.4rem 1.5rem; }
    .officer-row { flex-direction: column; gap: 0.2rem; }
    .officer-role { width: auto; }

    /* Logo intro */
    .logo-intro-grid { grid-template-columns: 1fr; gap: 2rem; }
    .logo-display { display: flex; flex-direction: column; align-items: center; }
    .logo-colors { max-width: unset; text-align: center; }
    .logo-subtitle { text-align: center; }
    .logo-elements { grid-template-columns: 1fr; }

    /* Anglican intro */
    .anglican-pillars { grid-template-columns: 1fr; }
    .anglican-korea-inner { grid-template-columns: 1fr; gap: 2rem; }
    .anglican-korea-side { display: flex; flex-direction: column; align-items: flex-start; }
    .founded-badge { padding: 1rem 1.5rem; align-self: flex-start; }
    .korea-highlights { min-width: unset; width: 100%; }

    /* Info row */
    .info-row { gap: 0.6rem; }
    .info-row strong { min-width: 44px; }

    /* Newcomer guide */
    .newcomer-intro { padding: 1.75rem 1.4rem; }
    .newcomer-intro-title { font-size: 1.3rem; }
    .newcomer-key-facts { padding: 1.1rem 1.1rem; gap: 0.6rem; }
    .newcomer-key-row { gap: 0.7rem; font-size: 0.88rem; }
    .newcomer-key-label { min-width: 38px; font-size: 0.7rem; }
    .newcomer-cta { padding: 1.75rem 1.4rem; }
    .newcomer-cta h3 { font-size: 1.05rem; }
    .newcomer-cta-link { width: 100%; max-width: 320px; justify-content: center; }

    /* Footer */
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-service-row { font-size: 0.85rem; }
    .footer-col .footer-ext-link--dim { margin-top: 0.5rem; }
}

@media (max-width: 460px) {
    .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 390px) {
    .clergy-card { padding: 1.75rem 1.25rem; }
    .bio-timeline::before { left: 38px; }
    .bio-year { min-width: 30px; font-size: 0.68rem; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.75rem; }
    .hero-actions { flex-direction: column; align-items: center; }
    .btn-live, .btn-outline { width: 100%; max-width: 280px; text-align: center; }
}

/* ── Community card note (footnote) ─────────────────────── */
.community-card-note { font-size: 0.75rem; color: var(--text-muted); opacity: 0.7; margin-top: 0.5rem; }

/* ── Community detail link ───────────────────────────────── */
.community-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 1.25rem;
    color: var(--theme);
    font-size: 0.85rem;
    font-weight: 700;
    transition: color 0.2s, gap 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.community-detail-link:hover {
    color: var(--heading);
    gap: 0.55rem;
}

/* ── Emmaus page ─────────────────────────────────────────── */
.emmaus-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 768px) { .emmaus-intro-grid { grid-template-columns: 1fr; gap: 2rem; } }

.emmaus-lead {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.9;
    margin-bottom: 1.25rem;
}
.emmaus-lead:last-child { margin-bottom: 0; }

.emmaus-scripture-block {
    background: var(--green-light);
    border-radius: var(--radius-md);
    padding: 2rem;
    border-left: 4px solid var(--theme);
}
.emmaus-scripture-ref {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--theme);
    margin-bottom: 0.75rem;
}
.emmaus-scripture {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--heading);
    font-style: italic;
    margin-bottom: 1.25rem;
    border: none;
    padding: 0;
}
.emmaus-scripture-caption {
    font-size: 0.83rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* Stage cards */
.emmaus-stages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}
@media (max-width: 768px) { .emmaus-stages { grid-template-columns: 1fr; } }

.emmaus-stage {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 2rem 1.75rem;
    border: 1px solid var(--border);
}
.emmaus-stage--featured {
    border-color: var(--theme);
    background: var(--white);
    box-shadow: 0 4px 20px rgba(46,125,50,0.08);
}
.emmaus-stage-num {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--green-soft);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.emmaus-stage--featured .emmaus-stage-num { color: var(--theme); }
.emmaus-stage-en {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.emmaus-stage-ko {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.emmaus-badge {
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--theme);
    color: var(--theme-on);
    padding: 0.15rem 0.55rem;
    border-radius: 50px;
    letter-spacing: 0.03em;
}
.emmaus-stage-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 1rem;
}
.emmaus-stage-note {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme);
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* Nurture 15-session grid */
.nurture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}
@media (max-width: 768px) { .nurture-grid { grid-template-columns: 1fr; } }

.nurture-part {
    background: var(--white);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: 1.5rem;
}
.nurture-part-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--theme);
    margin-bottom: 0.4rem;
}
.nurture-part-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.nurture-sessions {
    padding-left: 1.2rem;
    margin: 0;
}
.nurture-sessions li {
    font-size: 0.83rem;
    color: var(--text-muted);
    line-height: 1.85;
}

/* Join section */
.emmaus-join-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 768px) { .emmaus-join-grid { grid-template-columns: 1fr; } }

.emmaus-join-card { text-align: center; }
.emmaus-join-icon { font-size: 2rem; margin-bottom: 1rem; }
.emmaus-contact-link {
    display: block;
    color: var(--theme);
    font-size: 0.88rem;
    font-weight: 600;
    margin-top: 0.35rem;
}
.emmaus-contact-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Reference list */
.reference-list {
    list-style: none;
    padding: 0;
}
.reference-list li {
    font-size: 0.83rem;
    color: var(--text-muted);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    line-height: 1.7;
}
.reference-list li:last-child { border-bottom: none; }

/* ── Placeholder (준비중) ────────────────────────────────── */
.placeholder-wrap {
    max-width: 540px;
    margin: 4rem auto;
    text-align: center;
}
.placeholder-icon { font-size: 3rem; margin-bottom: 1.5rem; }
.placeholder-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.75rem;
}
.placeholder-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.9;
    margin-bottom: 0;
}
.placeholder-contact {
    display: inline-block;
    margin-top: 1.75rem;
    padding: 0.7rem 1.75rem;
    border: 1.5px solid var(--theme);
    border-radius: 50px;
    color: var(--theme);
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.placeholder-contact:hover { background: var(--theme); color: #fff; }

/* ── 교회 이야기 (clergy.html#identity, greenchurch.html) ─── */

.story-lead {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.05rem;
    color: var(--text);
    line-height: 1.8;
    text-align: center;
    word-break: keep-all;
    letter-spacing: -0.01em;
}
.story-lead strong { color: var(--heading); }

.story-values {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 860px;
    margin: 0 auto;
}
.story-value {
    display: flex;
    gap: 1.3rem;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--theme);
    border-radius: var(--radius-md);
    padding: 1.6rem 1.8rem;
    will-change: transform, opacity;
}
.story-value-icon {
    font-size: 1.9rem;
    line-height: 1.3;
    flex-shrink: 0;
}
.story-value-body { min-width: 0; }
.story-value-num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--theme);
    margin-bottom: 0.3rem;
}
.story-value-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.5rem;
    letter-spacing: -0.015em;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.story-value-text {
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.75;
    word-break: keep-all;
    letter-spacing: -0.005em;
}
.story-value-text + .story-value-text { margin-top: 0.65rem; }
.story-value-text a { color: var(--theme); font-weight: 600; }
.story-value-text a:hover { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 768px) {
    .story-value { flex-direction: column; gap: 0.85rem; padding: 1.5rem 1.4rem; }
}

/* ── Map card (iframe-free 위치 카드) ────────────────────── */
.map-card {
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 1rem;
}

.map-preview {
    width: 100%;
    aspect-ratio: 400 / 220;
    background: var(--green-light);
    overflow: hidden;
    position: relative;
}
.map-embed {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.map-card-addr {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.map-addr-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.92rem;
    line-height: 1.5;
}
.map-addr-tag {
    flex-shrink: 0;
    width: 44px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--theme);
    letter-spacing: 0.02em;
    padding-top: 0.05rem;
}
.map-addr-text {
    color: var(--text);
    font-weight: 500;
    word-break: keep-all;
}

.map-actions {
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
@media (min-width: 520px) {
    .map-actions { flex-direction: row; }
    .map-actions .map-btn { flex: 1; }
}

.map-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
    text-decoration: none;
}
.map-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--green-soft);
}
.map-btn-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #03c75a;       /* 네이버 그린 */
    color: #ffffff;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: -0.04em;
    flex-shrink: 0;
}
.map-btn-mark--kakao  { background: #fee500; color: #3c1e1e; }
.map-btn-label { white-space: nowrap; }
.map-btn-arrow { margin-left: auto; color: var(--text-muted); font-size: 0.9rem; }

.map-copy-btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.15rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--theme);
    background: none;
    border: 1px solid var(--theme);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.02em;
    line-height: 1.6;
}
.map-copy-btn:hover { background: var(--theme); color: #fff; }

/* Naver CTA */
.map-btn--naver {
    background: #03c75a;
    color: #fff;
    border-color: transparent;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.95rem 1.1rem;
    box-shadow: 0 2px 8px rgba(3,199,90,0.20);
}
.map-btn--naver:hover {
    background: #00b350;
    box-shadow: 0 4px 14px rgba(3,199,90,0.32);
    border-color: transparent;
}
.map-btn--naver .map-btn-mark { background: rgba(255,255,255,0.20); color: #fff; }
.map-btn--naver .map-btn-arrow { color: rgba(255,255,255,0.80); }

/* Kakao CTA */
.map-btn--kakao {
    background: #fee500;
    color: #3c1e1e;
    border-color: #f5db00;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0.95rem 1.1rem;
}
.map-btn--kakao:hover { background: #fad900; border-color: #e8cc00; }
.map-btn--kakao .map-btn-arrow { color: rgba(60,30,30,0.55); }

/* Compact variant (index card) */
.map-card--compact .map-preview { aspect-ratio: 400 / 180; }
.map-card--compact .map-card-addr { padding: 0.85rem 1rem; }
.map-card--compact .map-addr-row { font-size: 0.85rem; }
.map-card--compact .map-actions { padding: 0.65rem; gap: 0.45rem; }
.map-card--compact .map-btn { padding: 0.75rem 0.9rem; font-size: 0.86rem; }
.map-card--compact .map-btn { padding: 0.7rem 0.9rem; font-size: 0.82rem; }
.map-card--compact .map-btn--naver { padding: 0.85rem 1rem; font-size: 0.88rem; }

@media (max-width: 480px) {
    .map-btn-label { font-size: 0.85rem; }
}

/* ── Visit page utilities ────────────────────────────────── */
.info-card--wide { max-width: 760px; margin-left: auto; margin-right: auto; }
.info-card--wide + .info-card--wide { margin-top: 1.5rem; }

.visit-contact { margin-top: 1.5rem; }

.visit-note {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.visit-detail-wrap { margin-top: 1.25rem; }

.detail-link {
    color: var(--theme);
    font-weight: 700;
    font-size: 0.88rem;
}
.detail-link:hover { text-decoration: underline; }

.link-plain { color: inherit; }
.link-plain:hover { text-decoration: underline; }

.bus-note {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* Safe area (iPhone notch / home indicator) */
@supports (padding: env(safe-area-inset-left)) {
    .container {
        padding-left: max(clamp(1.25rem, 5vw, 2.5rem), env(safe-area-inset-left));
        padding-right: max(clamp(1.25rem, 5vw, 2.5rem), env(safe-area-inset-right));
    }
}

/* ── Links page ──────────────────────────────────────────── */
.links-group { margin-bottom: 3rem; }
.links-group-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--theme);
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border);
}
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 0.75rem;
}
.links-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.4rem;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.links-card:hover {
    border-color: var(--theme);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.links-card-name {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--heading);
}
.links-card-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
}
.links-card-arrow {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: color 0.15s;
}
.links-card:hover .links-card-arrow { color: var(--theme); }

/* ── Skeleton Loading ─────────────────────────────────── */
@keyframes skeleton-pulse {
    0%   { background-color: var(--skeleton-base); }
    50%  { background-color: var(--skeleton-mid); }
    100% { background-color: var(--skeleton-base); }
}

.skeleton {
    background-color: var(--skeleton-base);
    border-radius: var(--radius-sm);
    color: transparent;
    user-select: none;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton * { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; background-color: var(--skeleton-mid); }
}

/* ── Video Cards (media.html) ─────────────────────────── */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}
.video-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.2s, box-shadow 0.2s;
}
.video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.video-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--green-deep);
    overflow: hidden;
}
.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}
.video-card:hover .video-thumb img {
    opacity: 0.85;
}
.video-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #fff;
    opacity: 0;
    background: rgba(10, 31, 18, 0.45);
    transition: opacity 0.2s;
}
.video-card:hover .video-play-btn {
    opacity: 1;
}
.video-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.2rem 1.4rem 1.4rem;
    flex: 1;
}
.video-category {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--theme);
    text-transform: uppercase;
}
.video-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--heading);
    line-height: 1.5;
    margin: 0;
}
.video-desc {
    font-size: 0.87rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin: 0;
    flex: 1;
}
.video-channel-cta {
    text-align: center;
    padding: 1rem 0 0.5rem;
}
.video-channel-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.75rem 1.75rem;
    background: var(--green-deep);
    color: #fff;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, opacity 0.2s;
}
.video-channel-link:hover {
    opacity: 0.85;
}
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .video-play-btn { opacity: 0.7; }
}

/* ── Draft Banner ────────────────────────────────────────── */
.draft-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--gold-bg);
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 0.7rem 1.1rem;
    margin-bottom: 2rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.5;
}
.draft-badge {
    flex-shrink: 0;
    background: var(--gold);
    color: #fff;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: var(--ls-label);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}

/* ── Photo Gallery (gallery.html) ───────────────────────── */
.photo-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.photo-filter-btn {
    padding: 0.45rem 1.1rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.photo-filter-btn:hover {
    border-color: var(--green-mid);
    color: var(--green-mid);
}
.photo-filter-btn.is-active {
    background: var(--green-mid);
    border-color: var(--green-mid);
    color: #fff;
}
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 0.75rem;
}
.photo-item {
    position: relative;
    border: none;
    padding: 0;
    background: var(--white);
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.photo-item:hover,
.photo-item:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--hover-shadow-sm);
    outline: none;
}
.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
.photo-item:hover img,
.photo-item:focus-visible img {
    transform: scale(1.04);
    opacity: 0.85;
}
.photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,31,18,0.82) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.25s;
}
.photo-item:hover .photo-overlay,
.photo-item:focus-visible .photo-overlay {
    opacity: 1;
}
.photo-cat-badge {
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--green-soft);
    letter-spacing: var(--ls-label);
    margin-bottom: 0.3rem;
}
.photo-caption {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #fff;
    line-height: var(--lh-heading);
}
.photo-date {
    font-size: var(--fs-label);
    color: rgba(255,255,255,0.6);
    margin-top: 0.2rem;
}
.photo-count {
    text-align: right;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: 0;
}


/* Photo Placeholder (사진 준비 중) */
.photo-item--pending {
    cursor: default;
}
.photo-item--pending:hover,
.photo-item--pending:focus-visible {
    transform: none;
    box-shadow: var(--shadow-sm);
}
.photo-placeholder {
    width: 100%;
    height: 100%;
    background: var(--green-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
}
.photo-placeholder-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--green-mid);
    text-align: center;
    line-height: var(--lh-heading);
}
.photo-placeholder-badge {
    display: inline-block;
    background: var(--green-mid);
    color: #fff;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.3rem 1rem;
    border-radius: 999px;
}

/* Photo Lightbox */
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(10,31,18,0.93);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.gallery-lightbox.is-open {
    display: flex;
}
.gallery-lb-inner {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}
.gallery-lb-img {
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--green-deep);
}
.gallery-lb-meta {
    color: #fff;
}
.gallery-lb-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}
.gallery-lb-desc {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,0.72);
    margin-top: 0.25rem;
    line-height: var(--lh-body);
}
.gallery-lb-date {
    font-size: var(--fs-label);
    color: rgba(255,255,255,0.45);
    margin-top: 0.2rem;
}
.gallery-lb-close {
    position: absolute;
    top: -3rem;
    right: 0;
    background: none;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    color: rgba(255,255,255,0.75);
    font-size: 1.25rem;
    line-height: 1;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gallery-lb-close:hover,
.gallery-lb-close:focus-visible {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.7);
    outline: none;
}
@media (max-width: 768px) {
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .photo-overlay { opacity: 1; }
    .gallery-lightbox { padding: 1rem; align-items: flex-end; }
    .gallery-lb-close { top: auto; bottom: calc(100% + 0.75rem); }
}
@media (max-width: 480px) {
    .photo-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .photo-item, .photo-item img, .photo-overlay { transition: none; }
    .photo-item:hover { transform: none; }
    .photo-item:hover img { transform: none; }
}

/* ── Dark Mode ────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        /* Backgrounds — 짙은 숲 색 기반 다크 서피스 */
        --cream:        #111a13;
        --white:        #192216;
        /* Text — 따뜻한 크림 계열 */
        --text:         #e6e2d6;
        --text-muted:   #a4a89a;
        /* 제목 — 어두운 서피스 위 밝은 녹빛 오프화이트 */
        --heading:      #eaf2e8;
        /* Borders */
        --border:       #2f4434;
        /* Green scale — 다크 배경에서 가독성 확보
           green-mid은 배지 배경(흰 글씨)으로도 쓰여 텍스트·배지 대비를 균형 조정 */
        --green-deep:   #0a1f12;
        --green-mid:    #62a073;
        --green-light:  #1e3325;
        --green-soft:   #355a3e;
        /* Theme — green-mid/green-light 값으로 자동 추종 */
        --theme:        #62a073;
        --theme-light:  #1e3325;
        /* Gold — 다크 배경 대비 밝게 조정 */
        --gold:         #d6ba8e;
        --gold-bg:      #221d14;
        /* Nav */
        --nav-glass:    rgba(10, 31, 18, 0.95);
        --surface-nav:  rgba(17, 26, 19, 0.96);
        /* Skeleton */
        --skeleton-base: #1c2a1f;
        --skeleton-mid:  #243528;
        /* Shadows */
        --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.40);
        --shadow-md:    0 3px 14px rgba(0, 0, 0, 0.50);
        --shadow-lg:    0 12px 40px rgba(0, 0, 0, 0.60);
    }
    /* 페이지 히어로 — 라이트 전용 하드코딩 그라데이션을 다크 톤으로 대체.
       (--theme-light는 항상 밝은 토큰이라 다크에서 밝은 띠가 생기므로, 어두운
        서피스 틴트로 재계산한다.) 사진 히어로(.page-hero--photo)는 제외:
       background 단축속성이 background-image를 초기화하기 때문. */
    .page-hero:not(.page-hero--photo) {
        background: linear-gradient(165deg, color-mix(in srgb, var(--season, var(--theme)) 24%, #0a1f12) 0%, color-mix(in srgb, var(--season, var(--theme)) 16%, var(--white)) 48%, var(--cream) 100%);
    }
    /* 히어로 CTA 버튼 — 배경이 항상 흰색(#fff)이므로 텍스트·호버를 라이트 모드 값으로 고정 */
    .btn-hero-primary {
        color: #0a1f12;
    }
    .btn-hero-primary:hover {
        background: #c8ddc9;
    }
    /* 전례력 절기색 — JS가 주입하는 밝은 절기색(s.colorLight)은 다크모드에 적응하지
       않으므로, 절기 강조색을 어두운 서피스에 섞어 카드 배경을 어둡게 재계산한다.
       (color-mix 미지원 시 기존 background 선언으로 자연 폴백) */
    .liturgy-guide .communion-season {
        background: color-mix(in srgb, var(--season) 14%, var(--white));
    }
    /* 절기색을 텍스트로 쓰는 요소 — 어두운 배경에서 가독성 확보 위해 밝게 보정 */
    .liturgy-guide .section-eyebrow,
    .liturgy-season-badge .season-name,
    .liturgy-guide .resource-link {
        color: color-mix(in srgb, var(--season) 50%, var(--heading));
    }
    /* 수상 배지 hover — 라이트 전용 하드코딩 배경 대신 어두운 톤으로 */
    .about-brief-award:hover {
        background: var(--green-soft);
    }
    /* 버스 노선 칩 — 어두운 배경에서 칩 색이 묻히지 않도록 밝게 조정 */
    .bus-chip.bus-blue  { background: #4585c7; }
    .bus-chip.bus-green { background: #4e9967; }
}

/* ── Back To Top 버튼 (화이트 반투명, 아이콘 녹색) ───────────────── */
#back-to-top {
    position: fixed;
    right: clamp(1rem, 3vw, 1.8rem);
    bottom: clamp(1rem, 3vw, 1.8rem);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--green-deep);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(10,31,18,0.22);
    opacity: 0;
    transform: translateY(10px);
    will-change: transform, opacity;
    transition: opacity 180ms ease, transform 180ms ease, background 160ms ease;
    z-index: 1050;
    pointer-events: none;
}
#back-to-top.visible {
    opacity: 0.45;
    transform: translateY(0);
    pointer-events: auto;
    cursor: pointer;
}
#back-to-top:hover, #back-to-top:focus-visible {
    background: var(--theme);
    box-shadow: 0 6px 24px rgba(10,31,18,0.30);
    outline: none;
}
#back-to-top svg {
    width: 20px;
    height: 20px;
    fill: #fff;
    display: block;
}
@media (max-width: 460px) {
    #back-to-top { width: 40px; height: 40px; }
}

/* ── Bishop Card — 주교 강조, 사제 카드와 시각 통일 ───────── */
.bishop-card {
    margin-bottom: 2.5rem;
    padding: 2.5rem 2rem;
    background: var(--white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);   /* 골드 상단 라인으로 주교 강조 */
    box-shadow: var(--shadow-md);
}
.bishop-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
}
.bishop-card-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
}
.bishop-portrait-wrap {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid rgba(192, 154, 96, 0.6);   /* 골드 링으로 주교 초상 강조 */
    box-shadow: 0 6px 22px rgba(10,31,18,0.14);
}
.bishop-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    cursor: zoom-in;
    display: block;
}
.bishop-portrait-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--green-deep), var(--theme));
    font-size: 2.5rem;
}
.bishop-card-body { min-width: 0; }
.bishop-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 0.2rem;
    letter-spacing: -0.01em;
}
.bishop-title {
    font-size: 0.85rem;
    color: var(--theme);
    font-weight: 600;
    margin-bottom: 0.1rem;
}
.bishop-ordained {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}
.bishop-desc {
    font-size: 0.9rem;
    line-height: 1.85;
    color: var(--text);
    opacity: 0.85;
}
.bishop-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
    font-style: italic;
}
@media (max-width: 540px) {
    .bishop-card-inner { grid-template-columns: 1fr; gap: 1.25rem; }
    .bishop-portrait-wrap { width: 120px; height: 120px; margin: 0 auto; }
    .clergy-avatar { width: 100px; height: 100px; }
}

/* ── Portrait Lightbox ───────────────────────────────────── */
#portrait-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 31, 18, 0.88);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
#portrait-lightbox.is-open {
    display: flex;
    animation: lightbox-in 0.2s var(--ease-out) both;
}
#portrait-lightbox-img {
    max-width: min(420px, 90vw);
    max-height: 90vh;
    border-radius: 50%;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    border: 4px solid rgba(255,255,255,0.85);
    object-fit: cover;
    pointer-events: none;
}
@keyframes lightbox-in {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Green Church in-page section nav ───────────────────── */
.gc-page-nav {
    position: sticky;
    top: var(--nav-h);
    z-index: 900;
    background: var(--surface-nav);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 0;
}
.gc-page-nav .container {
    display: flex;
    justify-content: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gc-page-nav .container::-webkit-scrollbar { display: none; }
.gc-nav-link {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 1.2rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.gc-nav-link.is-active {
    color: var(--theme);
    border-bottom-color: var(--theme);
}
/* 터치 기기에서 sticky-hover 오작동 방지 — 마우스 환경에서만 hover 적용 */
@media (hover: hover) {
    .gc-nav-link:hover {
        color: var(--theme);
        border-bottom-color: var(--theme);
    }
}
@media (max-width: 640px) {
    .gc-nav-link {
        flex: 1;
        justify-content: center;
        padding: 0.75rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* 외부 상세 페이지로 이어지는 섹션 내비 링크 (예: 녹색교회) */
.gc-nav-link--ext { color: var(--theme); }
@media (hover: hover) {
    .gc-nav-link--ext:hover { color: var(--theme); border-bottom-color: var(--theme); }
}

/* ── 교회 소개 — 섹션 순차 연결('다음') 흐름 ──────────────── */
.about-next {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    margin: 2.5rem auto 0;
    padding: 0.7rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    text-decoration: none;
    font-size: 0.88rem;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.about-next:hover {
    border-color: var(--green-mid);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.about-next-label { color: var(--text-muted); font-weight: 500; }
.about-next-target { color: var(--heading); font-weight: 700; }
.about-next-arrow { color: var(--green-mid); font-weight: 700; transition: transform 0.25s; }
.about-next:hover .about-next-arrow { transform: translateX(3px); }

/* ── MenuOverlay (전체 메뉴 + 검색) ──────────────────────── */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s var(--ease-out), visibility 0.22s var(--ease-out);
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }

.menu-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 31, 18, 0.55);
    backdrop-filter: blur(2px);
}

.menu-overlay-panel {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - var(--nav-h) - 1rem);
    max-height: calc(100svh - var(--nav-h) - 1rem);
    margin-top: calc(var(--nav-h) + 0.5rem);
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: translateY(-12px);
    transition: transform 0.22s var(--ease-out);
}
.menu-overlay.is-open .menu-overlay-panel { transform: translateY(0); }

.menu-overlay-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.menu-search-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 50px;
    transition: border-color 0.18s;
}
.menu-search-box:focus-within { border-color: var(--theme); }
.menu-search-icon { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.menu-search-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 0.95rem;
    color: var(--text);
    font-family: inherit;
}
.menu-search-input:focus { outline: none; }
.menu-search-input::placeholder { color: var(--text-muted); opacity: 0.7; }

.menu-overlay-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.18s, background 0.18s;
}
.menu-overlay-close:hover,
.menu-overlay-close:focus-visible { color: var(--green-deep); background: var(--green-light); outline: none; }

.menu-overlay-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem;
}

/* 사이트맵 (전체 메뉴) */
/* display 지정이 [hidden]의 display:none을 덮어쓰므로 명시적 토글 */
.menu-sitemap[hidden],
.menu-results[hidden] { display: none; }
.menu-sitemap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem 1.25rem;
}
.menu-sitemap-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--green-deep);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--theme);
    transition: color 0.15s;
}
.menu-sitemap-title:hover { color: var(--theme); }
.menu-sitemap-list { list-style: none; }
.menu-sitemap-list li a {
    display: block;
    padding: 0.45rem 0.5rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s, padding-left 0.15s;
}
.menu-sitemap-list li a:hover {
    color: var(--theme);
    background: var(--green-light);
    padding-left: 0.9rem;
}

/* 검색 결과 */
.menu-results-list { list-style: none; }
.menu-results-list li a {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.8rem 0.75rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.menu-results-list li a:hover { background: var(--green-light); }
.menu-result-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.menu-result-label { font-size: 0.95rem; color: var(--text); }
mark { background: var(--gold-bg); color: var(--green-deep); padding: 0 0.1em; border-radius: 3px; }
.menu-result-group { font-size: 0.78rem; color: var(--text-muted); flex-shrink: 0; }
.menu-result-excerpt {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.menu-results-empty { padding: 1.5rem 0.75rem; color: var(--text-muted); font-size: 0.9rem; text-align: center; }

@media (max-width: 768px) {
    .menu-overlay-panel {
        width: 100%;
        height: calc(100vh - var(--nav-h));
        height: calc(100svh - var(--nav-h));
        max-height: none;
        margin-top: var(--nav-h);
        border-radius: 0;
    }
    .menu-sitemap { grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
}
@media (max-width: 460px) {
    .menu-sitemap { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .menu-overlay,
    .menu-overlay-panel { transition: none; }
    .menu-overlay-panel { transform: none; }
}
/* ── Bulletin (accordion list) ───────────────────────────── */
.bulletin-list {
    max-width: 760px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.bulletin-item { border-bottom: 1px solid var(--border); }
.bulletin-item:last-child { border-bottom: none; }

.bulletin-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s;
}
.bulletin-row:hover { background: var(--green-light); }
.bulletin-row[aria-expanded="true"] { background: var(--green-light); }

.bulletin-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.bulletin-row-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.bulletin-row-date {
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--heading);
    line-height: 1.3;
}
.bulletin-badge-new {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--theme-on);
    background: var(--theme);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    vertical-align: middle;
}
.bulletin-row-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.bulletin-row-season {
    font-size: var(--fs-label);
    color: var(--text-muted);
}
.bulletin-row-count {
    font-size: var(--fs-label);
    color: var(--text-muted);
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    font-variant-numeric: tabular-nums;
}
.bulletin-row-chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.22s var(--ease-out);
}
.bulletin-row[aria-expanded="true"] .bulletin-row-chevron {
    transform: rotate(180deg);
}

.bulletin-drawer {
    padding: 1.5rem 1.5rem 1.75rem;
    background: var(--cream);
    border-top: 1px solid var(--border);
}
.bulletin-drawer[hidden] { display: none; }
.bulletin-empty-inner {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: 0.5rem 0;
}

.bulletin-pages {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 680px;
    margin: 0 auto;
}
.bulletin-page {
    width: 100%;
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    cursor: zoom-in;
    transition: box-shadow 0.18s, transform 0.18s var(--ease-out);
}
.bulletin-page:hover {
    box-shadow: var(--hover-shadow-sm);
    transform: scale(1.005);
}
@media (prefers-reduced-motion: reduce) {
    .bulletin-page { transition: none; transform: none; }
    .bulletin-page:hover { transform: none; }
}

/* ── Bulletin Lightbox ───────────────────────────────────── */
#bulletin-lb {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border: none;
    background: transparent;
    overflow: hidden;
}
#bulletin-lb[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}
#bulletin-lb::backdrop {
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.bulletin-lb-wrap {
    position: relative;
    display: inline-flex;
}
.bulletin-lb-img {
    display: block;
    max-width: 96vw;
    max-height: 96vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.65);
}
.bulletin-lb-close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    color: #1a1a1a;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: background 0.15s, transform 0.15s;
    z-index: 1;
}
.bulletin-lb-close:hover { background: #fff; transform: scale(1.1); }

.bulletin-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.25rem;
    padding: 0.5rem 1.1rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--heading);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bulletin-pdf-btn:hover {
    background: var(--theme);
    border-color: var(--theme);
    color: var(--theme-on);
}

.bulletin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}
.bulletin-pag-btn {
    padding: 0.45rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bulletin-pag-btn:hover:not(:disabled) {
    background: var(--theme);
    color: var(--theme-on);
    border-color: var(--theme);
}
.bulletin-pag-btn:disabled { opacity: 0.35; cursor: default; }
.bulletin-pag-info {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    min-width: 3.5rem;
    text-align: center;
}

.bulletin-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    padding: 3rem 0;
}

@media (prefers-color-scheme: dark) {
    .bulletin-list { background: var(--white); }
    .bulletin-row:hover,
    .bulletin-row[aria-expanded="true"] { background: var(--green-light); }
    .bulletin-drawer { background: var(--cream); }
    .bulletin-page { border-color: var(--border); }
    .bulletin-row-count { background: var(--green-light); }
    .bulletin-pdf-btn { background: var(--white); color: var(--text); }
    .bulletin-pag-btn { background: var(--white); color: var(--text); }
}
@media (prefers-reduced-motion: reduce) {
    .bulletin-row,
    .bulletin-row-chevron,
    .bulletin-pdf-btn,
    .bulletin-pag-btn { transition: none; }
}
@media (max-width: 480px) {
    .bulletin-row { padding: 1rem 1.1rem; }
    .bulletin-drawer { padding: 1.1rem 1.1rem 1.5rem; }
}

/* ── Print ────────────────────────────────────────────────
   감사성찬례 순서(worship.html) 등 본문 인쇄 대응.
   내비·푸터·오버레이·지도 등 화면 전용 요소를 제거하고
   잉크 절약을 위해 흰 배경·검정 텍스트로 단순화한다. */
@media print {
    :root {
        --cream: #fff;
        --white: #fff;
        --text: #000;
        --text-muted: #333;
        --heading: #000;
        --border: #bbb;
        --section-pad: 1.5rem;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
    }
    .skip-link,
    #main-nav,
    #main-footer,
    #back-to-top,
    #scroll-progress-bar,
    .menu-overlay,
    .map-preview,
    .map-actions,
    .next-step-cta,
    .hero-actions,
    .video-play-btn {
        display: none !important;
    }
    body { background: #fff; color: #000; }
    main { padding-top: 0 !important; }
    .page-hero {
        background: none;
        padding: 1rem 0 0;
        min-height: 0;
    }
    .page-hero > * { animation: none; opacity: 1; }
    /* 스크롤 리빌로 숨겨진 요소가 인쇄에서 빠지지 않도록 강제 표시 */
    .reveal { opacity: 1 !important; transform: none !important; }
    .card, .info-card, .resource-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #bbb;
    }
    details { break-inside: avoid; }
    /* 접힌 FAQ·순서 항목도 인쇄 시 모두 펼침 */
    details > *:not(summary) { display: block; }
    a { color: #000; text-decoration: underline; }
}