/* Base Font Size: 16px

   ※ 변환 메모
     - @font-face (웹폰트 선언)  → layout.css 로 분리됨
     - GNB(hero-nav / 모바일 메가메뉴) 스타일 → layout.css 로 분리됨
     - footer 스타일 → layout.css 로 분리됨

   ※ 반응형 정비 메모 (이번 수정)
     - 브레이크포인트를 layout.css 와 동일하게 통일: 480 / 767 / 991 / 1199 / 1920 / 1921+
       (기존 430 / 768 / 1024 / 1200 / 1921 은 layout.css 의 767 / 991 / 1199 와 어긋나
        992~1024px 구간에서 GNB 와 본문이 서로 다른 레이아웃을 잡고 있었다)
     - .vision-title 고정 6.4rem → clamp. 1280~1600px 구간에서 .vision-text-content(left:46%)
       와 겹치던 문제 해결
     - .mission-sticky 120vh → 100svh. sticky 높이가 뷰포트보다 커서 하단 20vh 가
       화면에 절대 노출되지 않아 .mission-dots 가 보이지 않던 문제 해결
     - 100vh → 100svh 로 통일 (모바일 주소창 접힘 시 점프 방지)
     - 태블릿 세로(768~991)에서 MESSAGE 2단 그리드가 유지되던 문제 보완
*/


	a:hover{text-decoration:none;transition:0.2s;}
:root {
    --color-primary: #1A1A1A;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-text: #727272;
    --color-bg-dark: #1b2947;
    --color-bg-footer: #111827;
    --color-accent-blue: #0f43a3;

    --spacing-section: 5rem;
    --font-size-heading: 2.5rem;
    --font-size-display-1: 13.125rem;
    --font-size-display-2: 7.5rem;
    --font-size-display-3: 5rem;
    --font-size-header-1: 2rem;
    --font-size-header-2: 1.5rem;
    --font-size-nav: 1.5rem;
    --font-size-hero-title: clamp(4rem, 8vw, 8rem);
    --font-size-mission-text: 2rem;
    --font-size-section-title: 4rem;
    --font-size-worship-type: 1.25rem;
    --font-size-sermon-title: 2rem;
    --font-size-card-title: 1.5rem;
    --font-size-base: 1.125rem;
    --font-size-small: 1rem;

    --transition-base: all 0.3s ease;
    --transition-slow: all 0.7s ease;
    --transition-linear: all 0.05s linear;

    /* 비전 문구 글자색 — JS 가 이 변수만 참조한다 */
    --char-on:  #1A1A1A;
    --char-off: #CCCCCC;
}

body.theme-brown { --char-on: #3E2723; --char-off: #D8C9BE; }
body.theme-dark  { --char-on: #F5F5F5; --char-off: #4A4A4A; }

/* ── Reset & Global ── */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }

body {
    font-family: 'WantedSans', 'Noto Sans KR', sans-serif;
    color: var(--color-primary);
    background-color: var(--color-white);
    overflow-x: clip;
}
body.no-scroll { overflow: hidden; }
.hidden-block  { display: none !important; }
a   { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { background: none; border: none; cursor: pointer; font-family: inherit; }

.cms-content-root { width: 100%; max-width: 100%; margin: 0 auto; position: relative; }

/* Utilities */
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}
.inset-0{top:0;right:0;bottom:0;left:0}.w-full{width:100%}.h-full{height:100%}
.object-cover{object-fit:cover}.object-contain{object-fit:contain}
.overflow-hidden{overflow:hidden}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}
.text-center{text-align:center}.text-white{color:var(--color-white)}

/* ── 한글 줄바꿈: 어절 단위로만 끊는다 ──
   한글은 기본값(word-break:normal)에서 어절 중간 아무 데나 끊긴다.
   "한소망교회에 오|신 것을" 처럼 보이는 이유다.
   keep-all 로 어절을 보존하고, 한 줄에 도저히 안 들어가는 경우에만
   break-word 가 끊도록 한다. (anywhere 는 keep-all 을 무력화하므로 쓰지 않는다) */
.hero-title,
.vision-title,
.mission-line,
.section-title-white,
.section-title-dark,
.worship-type,
.sermon-title,
.sermon-info,
.worship-category-title,
.worship-table-label,
.worship-time-value,
.worship-location,
.worship-detail-dept-name,
.worship-detail-text-gray,
.worship-detail-text-light,
.quick-menu-title,
.quick-menu-sub,
.ministry-title,
.ministry-desc,
.mission-card-name,
.mission-card-sub,
.mission-tab,
.tab-btn {
    word-break: keep-all;
    overflow-wrap: break-word;
}


/* ── 스크롤 중 hover 연출 정지 ──
   커서는 가만히 있어도 콘텐츠가 그 밑을 지나가며 hover 가 계속 토글되고,
   그때마다 합성 레이어 전체가 다시 래스터되어 프레임이 떨어진다. */
html.is-scrolling .message-thumb-wrapper img,
html.is-scrolling .ministry-card img,
html.is-scrolling .mission-card { transition: none !important; }
html.is-scrolling .message-thumb-wrapper img:hover,
html.is-scrolling .ministry-card:hover img { transform: none !important; }

/* ── 비전 섹션 글자 애니메이션 차단 ──
   수백 개 span 이 동시에 color 트랜지션을 시작하면 Animations 트랙이
   메인 스레드를 점유한다. */
.vision-text-content *, .mission-char, .mission-line { transition: none !important; outline: none !important; }

/* ── 스크롤 중 트랜지션 전면 정지 ── */
html.is-scrolling .vision-text-content * { transition: none !important; }

/* ── 스크롤 앵커링 차단 ── */
html, body { overflow-anchor: none; }
.card-stack-container, .message-card-wrapper, .worship-info-section, .message-section { overflow-anchor: none; }

/* 로딩화면을 팝업보다 위로 */
#loading-page { z-index: 2147483000; }

/* 로딩 중에는 팝업 전체를 감춘다 */
html.is-loading #directPopup {
    visibility: hidden !important;
    pointer-events: none !important;
}



/* ════════════════════════════════
   카드 스택 (MESSAGE 위로 WORSHIP INFO 가 덮어 올라오는 효과)

   고정은 JS transform 이 아니라 position:sticky 가 담당한다.
   sticky 는 컴포지터가 직접 다루므로 스크롤과 한 프레임도 어긋나지 않는다.

   [주의 1] 이 컨테이너나 그 조상에 overflow:hidden / contain:paint 를 걸면
            새 스크롤 컨테이너가 생겨 sticky 가 죽는다.
   [주의 2] .worship-info-section 의 음수 margin-top 이 실제 겹침을 만든다.
            이 값이 없으면 두 섹션이 나란히 놓이기만 하고 겹치지 않는다.
   [주의 3] 이 세 선택자는 이 파일에서 여기 한 번만 선언한다.
            아래쪽에 같은 선택자를 다시 쓰면 position 이 덮여 효과가 사라진다.
   ════════════════════════════════ */
.card-stack-container {
    position: relative;
    isolation: isolate;
    z-index: 10;
	overflow: clip;
}
.message-card-wrapper {
    position: sticky;
    top: var(--stack-top, 0px);   /* JS 가 계산해 넣는다 */
    bottom: auto;
    width: 100%;
    z-index: 2;
}

/* ── 큰 블러 그림자는 실제로 겹칠 때만 ── */
.message-section { box-shadow: none; contain: none; }
.message-card-wrapper.is-stacked .message-section { box-shadow: 0 -20px 50px rgba(0,0,0,0.12); }


/* ── Loading ── */
#loading-page {
    background-color: #fcfaf6; z-index: 100;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.7s ease;
}
.loading-text-group { display: flex; flex-direction: column; align-items: center; transition: opacity 0.8s ease; }
.loading-vision-text {
    color: #2d6cb1; font-size: clamp(1.875rem, 5vw, 3.125rem);
    font-family: 'A2z'; margin-bottom: 2rem;
    opacity: 0; transition: opacity 0.8s ease;
}
.loading-cross-wrapper { margin-bottom: 2rem; opacity: 0; transition: opacity 0.8s ease; }
.loading-cross-img     { height: clamp(7.5rem, 18vw, 13.75rem); }
.loading-desc-text {
    text-align: center; color: #274379;
    font-family: 'A2z'; opacity: 0; transition: opacity 0.8s ease;
}
.loading-desc-text .main-name { font-size: clamp(1.875rem, 5vw, 3.125rem); font-weight: 700; }
.loading-desc-text .sub-text  { font-size: clamp(1.5rem, 4vw, 2.5rem); }
.loading-logo-wrapper {
    position: absolute; display: flex; flex-direction: column; align-items: center;
    opacity: 0; transition: opacity 0.8s ease;
}
.loading-logo-img { height: clamp(8.75rem, 20vw, 16.25rem); }

/* 로딩 단계별 클래스 - JS의 loading-step-1~5와 연동 */
.loading-step-1 .loading-vision-text   { opacity: 1; }
.loading-step-2 .loading-cross-wrapper { opacity: 1; }
.loading-step-3 .loading-desc-text     { opacity: 1; }
.loading-step-4 .loading-text-group    { opacity: 0; }
.loading-step-5 .loading-logo-wrapper  { opacity: 1; }
.loading-finished #loading-page        { opacity: 0; pointer-events: none; }

/* ── Main Site 초기 숨김 ── */
.main-site-hidden  { opacity: 0; }
.main-site-visible { opacity: 1; transition: opacity 0.5s ease; }


/* ── Hero ── */
/* ── Hero ──
   [수정] 고정 100svh → aspect-ratio 기반.
   슬라이드 이미지가 가로형이므로 화면 비율이 아니라 이미지 비율을 따라가게 한다.
     - aspect-ratio 로 폭에서 높이를 계산
     - max-height 로 뷰포트를 넘지 않도록 상한 (넘으면 object-fit:cover 가 잘라준다)
     - min-height 로 극단적으로 납작해지는 것을 방지
   화면이 세로로 길수록 히어로가 화면을 다 먹지 않으므로
   아래 콘텐츠가 있다는 신호가 자연스럽게 보인다. */
.hero-section {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 100svh;
    overflow: hidden;
}
.hero-slide   { position: absolute; inset: 0; transition: opacity 1.5s ease; opacity: 0; z-index: 0; }
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(120.87deg, rgba(0,0,0,0.25) 40%, rgba(80,80,80,0.05) 100%);
}

/* ── 상단 네비게이션(GNB)/모바일 메가메뉴 스타일은 layout.css 로 이동됨 ── */

/* 슬라이드 텍스트 위치 중앙 정렬 적용 */
.hero-text-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 100%;
    text-align: center;
    padding: 0 1rem;
	pointer-events: none;
}
.hero-title-group {
    transition: all 1s ease;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(1.25rem);
}
.hero-title-group.active {
    opacity: 1;
    position: relative;
    transform: translateY(0);
}
.hero-title {
    color: var(--color-white);
    font-family: 'HsBombaram21';
    font-size: clamp(2rem, 5vw, 5rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-shadow: 0 0.125rem 1.25rem rgba(0,0,0,0.3);
    text-align: center;
}

.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    width: 3rem; height: 3rem; border-radius: 50%;
    background-color: rgba(255,255,255,0.1); border: 0.0625rem solid rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-white); transition: all 0.3s;
}
.hero-arrow:hover { background-color: rgba(255,255,255,0.25); }
.hero-arrow.prev  { left: 1rem; }
.hero-arrow.next  { right: 1rem; }
.hero-dots { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 0.75rem; }
.hero-dot  { width: 0.625rem; height: 0.625rem; border-radius: 0.625rem; background-color: rgba(255,255,255,0.4); transition: all 0.3s; }
.hero-dot.active { width: 1.75rem; background-color: var(--color-white); }

/* 테마 전환 버튼 */
.theme-switch-container {
    position: absolute;
    bottom: 2rem;
    right: 3rem;
    z-index: 50;
    display: flex;
    gap: 1rem;
}
.theme-btn {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.theme-btn:hover { transform: scale(1.1); }
.theme-btn.active { transform: scale(1.3); border-color: #fff; }
.theme-btn.blue { background-color: #1b2947; }
.theme-btn.brown { background-color: #4e342e; }
.theme-btn.dark { background-color: #121212; border: 1px solid #555; }

/* 색상 트랜지션 대상 (bare section 은 제외 — 스크롤 중에도 계속 살아 있었다) */
body, .vision-sticky, .worship-info-section, .ministry-section, .message-section {
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* ── Vision Mission Section ── */
.vision-section {
    position: relative;
    width: 100%;
    height: 150vh;
    height: 150svh;
    background-color: var(--color-white);
    z-index: 1;
}
.vision-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: visible;
}
.vision-cross-bg {
    position: fixed;
    right: -4%; top: 2%; width: 36vw;
    opacity: 0; z-index: 0;
    pointer-events: none; user-select: none;
    will-change: top, opacity;
    transition: opacity 0.4s ease;
}
.vision-title-wrapper {
    position: absolute;
    left: max(1.25rem, calc((100vw - 88.125rem) / 2 + 1.25rem));
    top: 12vh; z-index: 10;
}
/* [반응형 수정] 고정 6.4rem → clamp.
   1280px 에서 6.4rem(102px) × 6자 ≈ 620px 이 되어
   left:46%(=589px)인 .vision-text-content 와 겹쳤다. */
.vision-title {
    color: #121212; font-family: 'A2z';
    font-size: clamp(3rem, 5vw, 6.4rem);
    font-weight: 800; letter-spacing: -0.01em; line-height: 1.2;
}
.vision-text-content {
    font-family: 'WantedSans';
    position: absolute;
    left: 48%;
    right: max(1.25rem, calc((100vw - 88.125rem) / 2 + 1.25rem));
    top: 30vh; z-index: 10;
    visibility: visible; opacity: 1;
}

/* ── Mission Text Characters ──
   색상은 JS 가 inline style 로 --char-on / --char-off 변수를 넣어 제어한다.
   테마별 실제 색은 파일 상단 :root / body.theme-* 에 정의되어 있다. */
.mission-char { display: inline; }
.mission-line {
    font-family: 'WantedSans', 'Noto Sans KR', sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
    line-height: 1.9;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.vision-img-wrapper {
    position: absolute;
    left: max(1.25rem, calc((100vw - 88.125rem) / 2 + 1.25rem));
    bottom: 6vh; width: 24vw; z-index: 10;
    opacity: 0; transform: translateY(3.75rem);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.vision-img-container { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 0.5rem; }
.vision-img-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(134,190,255,0.30) 0%, transparent 60%);
    mix-blend-mode: hard-light;
}
.vision-quick-menu {
    position: absolute;
    left: 48%;
    right: max(1.25rem, calc((100vw - 88.125rem) / 2 + 1.25rem));
    top: 58vh; z-index: 10;
}
.quick-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem 1rem; }
.quick-menu-item {
    display: flex; flex-direction: column; gap: 0.25rem;
    opacity: 0; transform: translateY(1.875rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.quick-menu-item[data-index="0"] { transition-delay: 0s; }
.quick-menu-item[data-index="1"] { transition-delay: 0.1s; }
.quick-menu-item[data-index="2"] { transition-delay: 0.2s; }
.quick-menu-item[data-index="3"] { transition-delay: 0.3s; }
.quick-menu-item[data-index="4"] { transition-delay: 0.4s; }
.quick-menu-item[data-index="5"] { transition-delay: 0.5s; }
.quick-menu-item[data-index="6"] { transition-delay: 0.6s; }
.quick-menu-item.visible { opacity: 1; transform: translateY(0); }
.quick-menu-icon { margin-bottom: 0.125rem; transition: transform 0.3s; transform-origin: left; }
.quick-menu-item:hover .quick-menu-icon { transform: scale(1.1); }
.quick-menu-title { color: #121212; font-weight: 700; font-size: clamp(0.95rem, 1.1vw, 1.25rem); letter-spacing: -0.02em; line-height: 1.2; }
.quick-menu-sub   { color: #727272; font-weight: 400; font-size: clamp(0.8rem, 0.85vw, 0.95rem); line-height: 1.4; }


/* ── Worship Info Section ──
   position / z-index 는 위 「카드 스택」 블록과 여기 한 곳에서만 정한다.
   margin-top 음수값이 MESSAGE 위로 겹쳐 올라오는 양이다. */
.worship-info-section {
    background-color: var(--color-white);
    border-radius: 4rem 4rem 0 0;
    padding-top: 5rem;
    padding-bottom: 6.25rem;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 3;
    margin-top: -10vh;
}

/* ── Message Section ── */
.message-section {
    background-color: var(--color-bg-dark);
    border-radius: 4rem 4rem 0 0;
    padding-top: 4.5rem;
    padding-bottom: 8.75rem;   /* 겹침(-10vh)에 가려지는 여유분 */
    overflow: hidden;
    position: relative;
}
.message-dim-overlay {
    position: absolute; inset: 0;
    background-color: var(--color-black); opacity: 0;
    pointer-events: none; border-radius: 4rem 4rem 0 0;
    transition: opacity 0.4s ease; z-index: 10;
}
.message-card-wrapper.is-stacked .message-dim-overlay { opacity: 0.35; }

/* ── Section Container ──
   ※ layout.css 의 .section-container 는 1500px 이다.
     메인 본문(1410)과 푸터(1500)의 좌우 정렬선이 어긋나 있으니
     한쪽으로 통일하려면 아래 값을 1500px 로 바꾸면 된다. */
/* [수정] 패딩 1.25rem 고정 → clamp. 1440px 노트북에서 좌우 여백이 15px 밖에
   남지 않아 콘텐츠가 화면에 꽉 차 보이던 문제. */
.section-container { max-width: 1410px; margin: 0 auto; padding: 0 clamp(1.25rem, 3.5vw, 3.5rem); }

.section-title-white {
    text-align: center;
    font-family: 'Noto Serif KR', serif;
    font-size: clamp(2.25rem, 4vw, 4rem);
    font-weight: 700; letter-spacing: 0.04em;
    color: var(--color-white); margin-bottom: 3.5rem;
}
.section-title-dark {
    text-align: center;
    font-family: 'Noto Serif KR', serif;
    font-size: clamp(2.25rem, 4vw, 4rem);
    font-weight: 700; letter-spacing: 0.04em;
    color: #121212; margin-bottom: 4rem;
}

/* ── Message Content ── */
.message-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding-bottom: 3rem;
}
.message-thumb-wrapper {
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 0.5rem;
}
.message-thumb-wrapper img { transition: transform 0.7s ease; }
.message-thumb-wrapper img:hover { transform: scale(1.05); }
.message-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    justify-self: center;
    width: fit-content;
}
.worship-type  { font-family: 'Noto Serif KR', serif; font-weight: 700; font-size: var(--font-size-worship-type); letter-spacing: 0.06em; color: rgba(250,250,250,0.65); }
.sermon-title  { font-weight: 700; font-size: clamp(1.5rem, 2vw, 2rem); letter-spacing: -0.02em; line-height: 1.35; color: var(--color-white); word-break: keep-all; }
.message-divider { width: 100%; height: 0.0625rem; background-color: rgba(255,255,255,0.15); }
.sermon-info   { font-size: var(--font-size-base); color: rgba(250,250,250,0.55); line-height: 1.8; }
.message-bottom-divider { width: 100%; height: 0.0625rem; background-color: rgba(255,255,255,0.18); margin-bottom: 2.5rem; }
.message-sub-grid { display: flex; }
.message-sub-card { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding-bottom: 0.5rem; }
.message-sub-card:nth-child(2) { border-left: 0.0625rem solid rgba(255,255,255,0.18); padding-left: 3.5rem; }
.message-sub-card:nth-child(1) { padding-right: 3.5rem; }

/* ── Worship Info Content (PC) ── */
.worship-row { display: flex; gap: 3.5rem; padding-bottom: 3.5rem; margin-bottom: 3.5rem; border-bottom: 0.0625rem solid rgba(18,18,18,0.1); }
.worship-row.no-border { border-bottom: none; margin-bottom: 0; }
.worship-img-wrapper  { flex: 0 0 42%; aspect-ratio: 5/3; border-radius: 0.75rem; overflow: hidden; }
.worship-content      { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.worship-category-title { font-weight: 700; font-size: 1.5rem; color: #121212; margin-bottom: 1.25rem; }
.worship-table        { width: 100%; }

.worship-table-row    { display: flex; align-items: stretch; min-height: 3rem; gap: 1.1rem; }
.worship-table-label  { width: 8rem; flex-shrink: 0; display: flex; align-items: center; padding: 0.625rem 0.875rem 0.625rem 0; font-weight: 700; font-size: 1.1rem; color: #121212;word-break:keep-all; }
.worship-table-divider{ width: 0.0625rem; background-color: rgba(18,18,18,0.15); flex-shrink: 0; }
.worship-table-data   { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-left: 1rem; padding-top: 0.625rem; padding-bottom: 0.625rem; gap: 0.25rem; }
.worship-time-item    { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.worship-time-part    { font-size: 1rem; color: rgba(18,18,18,0.8); min-width: 3.5rem; }
.worship-time-value   { font-size: 1rem; color: rgba(18,18,18,0.8); min-width: 5rem; }
.worship-location     { font-size: 1rem; color: rgba(18,18,18,0.6); }

.tabs-container { display: flex; align-items: flex-start; }
.tabs-list { display: flex; flex-direction: column; gap: 0.375rem; padding-right: 1.25rem; margin-right: 1.25rem; flex-shrink: 0; min-width: 6.875rem; }
.tab-btn   { text-align: left; font-size: 1.1rem; line-height: 1.75; color: rgba(18,18,18,0.45); display: flex; align-items: center; gap: 0.3125rem; transition: color 0.2s; }
.tab-btn.active { font-weight: 700; color: var(--color-accent-blue); }
.tab-dot   { display: inline-block; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background-color: rgba(18,18,18,0.25); flex-shrink: 0; transition: background-color 0.2s; }
.tab-btn.active .tab-dot { background-color: var(--color-accent-blue); }

/* ── Next Gen Worship Detail Table (PC 기본) ── */
.worship-detail-container {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    width: 100%;
}

.worship-detail-inner {
    display: flex;
    align-items: stretch;
    min-height: 3rem;
    gap: 1rem;
}

.worship-detail-dept-box { display: flex; flex-wrap: wrap; align-content: center; column-gap: 0.4rem; width: 8rem; flex-shrink: 0; margin: 0.5rem 0; }
.worship-detail-dept-age {
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(18,18,18,0.6);
    align-self: center;
}
.worship-detail-dept-age::before { content: '/ '; }

.worship-detail-dept-name {
    font-weight: 700;
    font-size: 1rem;
    color: #121212;
    white-space: pre-wrap;
    line-height: 1.4;
}

.worship-detail-v-line {
    width: 0.0625rem;
    background-color: rgba(18, 18, 18, 0.15);
    flex-shrink: 0;
}

.worship-detail-rows {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1rem;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    gap: 0.25rem;
}

.worship-detail-row-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.worship-detail-text-gray  { font-size: 1rem; color: rgba(18, 18, 18, 0.65); }
.worship-detail-text-light { font-size: 1rem; color: rgba(18, 18, 18, 0.45); }
.worship-detail-min-20 { min-width: 2rem; }
.worship-detail-min-44 { min-width: 4rem; }

/* ── Ministry ── */
.ministry-section { background-color: var(--color-white); padding-top: 5rem; padding-bottom: 6.25rem; }
.ministry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ministry-card { position: relative; aspect-ratio: 4/5; border-radius: 1rem; overflow: hidden; cursor: pointer; }
.ministry-card.m-1 { background-color: #2d6cb1; }
.ministry-card.m-2 { background-color: #1b2947; }
.ministry-card.m-3 { background-color: #0f43a3; }
.ministry-overlay.m-1 { background: linear-gradient(to top, #2d6cb1ee 0%, #2d6cb144 50%, transparent 100%); }
.ministry-overlay.m-2 { background: linear-gradient(to top, #1b2947ee 0%, #1b294744 50%, transparent 100%); }
.ministry-overlay.m-3 { background: linear-gradient(to top, #0f43a3ee 0%, #0f43a344 50%, transparent 100%); }
.ministry-card img { transition: transform 0.7s ease; }
.ministry-card:hover img { transform: scale(1.05); }
.ministry-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; }
.ministry-en    { font-family: 'Noto Serif KR', serif; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.2em; font-size: 1.125rem; margin-bottom: 0.25rem; }
.ministry-title { color: var(--color-white); font-weight: 700; font-size: 1.5rem; margin-bottom: 0.5rem; }
.ministry-desc  { color: rgba(255,255,255,0.8); line-height: 1.6; font-weight: 300; font-size: 1rem; word-break: keep-all; }

/* ── Mission (PC 중앙 정렬) ──
   [반응형 수정] .mission-sticky 높이 120vh → 100svh.
   sticky 요소가 뷰포트보다 크면 하단 20vh 는 고정 중에 화면에 절대 나오지 않는다.
   그래서 bottom:2rem 인 .mission-dots 가 PC 에서 보이지 않았다. */
.mission-container { height: 350vh; height: 350svh; position: relative; }
.mission-sticky    { position: sticky; top: 0; height: 100vh; height: 100svh; width: 100%; overflow: hidden; background-color: var(--color-white); }
.mission-globe {
    position: absolute; left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    transform-origin: center center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 38vw; aspect-ratio: 1/1;
    top: 50%;
    z-index: 1;
    will-change: transform, top;
}
.mission-sticky.is-active .mission-globe {
    transform: translate(-50%, -50%) scale(2);
    top: 88%;
}
.mission-content-layer { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.mission-sticky.is-active .mission-content-layer { opacity: 1; pointer-events: auto; }
.mission-header { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding-top: clamp(8rem, 12vh, 10rem); max-width: 88.125rem; margin: 0 auto; width: 100%; position: relative; z-index: 20; }
/* 미션 섹션 안에서는 제목 아래 여백을 줄여 탭과 카드 사이 공간을 확보한다 */
.mission-header .section-title-dark { margin-bottom: 1.25rem; }
.mission-tabs   { display: flex; flex-wrap: wrap; gap: 0.4375rem; justify-content: center; }
.mission-tab    { padding: 0.3125rem 0.8125rem; border-radius: 62.4375rem; border: 0.0625rem solid rgba(0,0,0,0.17); color: rgba(0,0,0,0.48); font-size: 1.125rem; transition: all 0.2s;background-color: rgba(255,255,255,0.8); }
.mission-tab.active { background-color: #111; color: var(--color-white); font-weight: 700; }
/* [수정] --card-w 를 슬라이더에 두어 카드와 좌우 화살표가 같은 값을 참조하게 한다.
   화살표를 화면 가장자리가 아니라 카드 옆에 붙일 수 있다. */
/* [수정] 슬라이더 영역을 뷰포트 전체(inset:0)가 아니라 헤더 아래로 한정한다.
   기존에는 카드가 top:57% 즉 화면 세로 중앙 부근에 놓여, 세로가 긴 태블릿
   (아이패드 프로 1024x1366)에서 탭과 카드 사이가 400px 넘게 벌어졌다.
   이제 슬라이더 높이가 "카드 높이 + 여백"으로 고정되므로 세로가 길어져도
   카드는 항상 헤더 바로 아래에 붙는다. */
.mission-slider {
    position: absolute; left: 0; right: 0; overflow: visible; z-index: 5;
    --card-w: min(30vw, 52vh); --half-w: calc(var(--card-w) / 2);
    top: clamp(17rem, 26vh, 19rem);
    height: calc(var(--card-w) * 6 / 8 + 4rem);
}
.mission-card {
    position: absolute; left: 0;
    top: 50%;
    width: var(--card-w); height: calc(var(--card-w) * 6 / 8);
    z-index: 5;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, box-shadow 0.5s ease;
}
.mission-card-inner   { position: relative; width: 100%; height: 100%; border-radius: 0.875rem; overflow: hidden; transform: translateZ(0); }
.mission-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.08) 55%, transparent 100%); }
.mission-card-text    { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 2rem; display: flex; flex-direction: column; gap: 0.1875rem; }
.mission-card-name    { font-weight: 700; font-size: 1.5rem; color: var(--color-white); }
.mission-card-sub     { font-size: 1.125rem; color: rgba(255,255,255,0.72); margin-bottom: 0.5rem; }
.mission-card-arrow   { display: flex; justify-content: flex-end; }
.arrow-circle { width: 3rem; height: 3rem; border-radius: 50%; border: 0.09375rem solid rgba(255,255,255,0.65); display: flex; align-items: center; justify-content: center; color: var(--color-white); }
.mission-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 2.375rem; height: 2.375rem; border-radius: 50%; background-color: rgba(255,255,255,0.9); border: 0.0625rem solid rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center; color: #111; box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.12); transition: all 0.3s; }
.mission-nav-btn.prev { left: 1.5rem; }
.mission-nav-btn.next { right: 1.5rem; }
.mission-dots  { position: absolute; bottom: 2rem; left: 0; right: 0; display: flex; justify-content: center; gap: 0.5rem; z-index: 30; }
.mission-dot   { width: 0.5rem; height: 0.5rem; border-radius: 62.4375rem; background-color: rgba(0,0,0,0.18); transition: all 0.3s; }
.mission-dot.active { width: 1.5rem; background-color: #111; }

/* [브레이크포인트 통일] min-width 769 → 768 (모바일 상한을 767 로 내렸으므로) */
@media (min-width: 768px) {
    .mission-card[data-offset="0"]  { transform: translateX(calc(50vw - var(--half-w))) translateY(-50%) perspective(1200px) rotateY(0deg) scale(1); opacity: 1; z-index: 10; }
    .mission-card[data-offset="-1"] { transform: translateX(-8vw) translateY(-50%) perspective(1200px) rotateY(25deg) scale(0.88); opacity: 1; }
    .mission-card[data-offset="1"]  { transform: translateX(calc(100vw - 22vw)) translateY(-50%) perspective(1200px) rotateY(-25deg) scale(0.88); opacity: 1; }
    .mission-card[data-offset="-2"],.mission-card[data-offset-out="left"]  { transform: translateX(-120vw) translateY(-50%) perspective(1200px) rotateY(25deg) scale(0.88); opacity: 0; }
    .mission-card[data-offset="2"], .mission-card[data-offset-out="right"] { transform: translateX(220vw)  translateY(-50%) perspective(1200px) rotateY(-25deg) scale(0.88); opacity: 0; }
}

/* ── Gallery ── */
.gallery-section { background-color: #0e0e0e; padding-top: 6.25rem; padding-bottom: 6.25rem; overflow: hidden; }
.gallery-track-container { overflow: hidden; margin-bottom: 1rem; }
.gallery-track { display: flex; width: max-content; }
.gallery-track-left  { animation: scroll-left  30s linear infinite; }
.gallery-track-right { animation: scroll-right 30s linear infinite; }
.gallery-track:hover { animation-play-state: paused; }
@keyframes scroll-left  { 0%{transform:translateX(0)}     100%{transform:translateX(-50%)} }
@keyframes scroll-right { 0%{transform:translateX(-50%)}  100%{transform:translateX(0)}    }
.gallery-img { flex: none; width: 20vw; height: 14vw; object-fit: cover; border-radius: 0.75rem; margin-right: 1rem; }

/* ── footer 스타일은 layout.css 로 이동됨 ── */


/* ════════════════════════════════
   테마 스타일 (갈색 / 다크)
   ════════════════════════════════ */
body.theme-brown { background-color: #fdf8f5; color: #3e2723; }
body.theme-brown .vision-section, body.theme-brown .worship-info-section, body.theme-brown .ministry-section, body.theme-brown .mission-sticky { background-color: #fdf8f5; }
body.theme-brown .message-section { background-color: #4e342e; }
body.theme-brown .vision-title, body.theme-brown .section-title-dark, body.theme-brown .worship-category-title, body.theme-brown .worship-table-label, body.theme-brown .ministry-title { color: #3e2723; }
body.theme-brown .worship-time-part, body.theme-brown .worship-time-value, body.theme-brown .worship-location, body.theme-brown .worship-detail-text-gray, body.theme-brown .worship-detail-text-light, body.theme-brown .quick-menu-title, body.theme-brown .mission-line { color: #5d4037; }
body.theme-brown .worship-detail-dept-name { color: #3e2723; }
body.theme-brown .worship-detail-dept-age  { color: rgba(93,64,55,0.6); }
body.theme-brown .tab-btn.active { color: #8b5a2b; }
body.theme-brown .tab-btn.active .tab-dot { background-color: #8b5a2b; }
body.theme-brown .ministry-overlay.m-1 { background: linear-gradient(to top, #5d4037ee 0%, #5d403744 50%, transparent 100%); }
body.theme-brown .ministry-overlay.m-2 { background: linear-gradient(to top, #4e342eee 0%, #4e342e44 50%, transparent 100%); }
body.theme-brown .ministry-overlay.m-3 { background: linear-gradient(to top, #3e2723ee 0%, #3e272344 50%, transparent 100%); }

/* 브라운 테마 - ministry 카드 타이틀은 흰색 유지 */
body.theme-brown .ministry-card .ministry-title { color: #ffffff !important; }

body.theme-dark { background-color: #121212; color: #e0e0e0; }
body.theme-dark .vision-section, body.theme-dark .worship-info-section, body.theme-dark .ministry-section, body.theme-dark .mission-sticky { background-color: #121212; }
body.theme-dark .message-section { background-color: #1e1e1e; }
body.theme-dark .vision-title, body.theme-dark .section-title-dark, body.theme-dark .worship-category-title, body.theme-dark .worship-table-label, body.theme-dark .worship-time-part, body.theme-dark .worship-time-value, body.theme-dark .worship-location, body.theme-dark .worship-detail-text-gray, body.theme-dark .worship-detail-text-light, body.theme-dark .quick-menu-title, body.theme-dark .mission-line { color: #f5f5f5; }
body.theme-dark .worship-detail-dept-name { color: #f5f5f5; }
body.theme-dark .worship-detail-dept-age  { color: rgba(255,255,255,0.45); }
body.theme-dark .worship-row { border-bottom-color: rgba(255,255,255,0.1); }
body.theme-dark .worship-table-divider, body.theme-dark .worship-detail-v-line { background-color: rgba(255,255,255,0.15); }
body.theme-dark .quick-menu-icon { filter: brightness(0) invert(1); }
body.theme-dark .quick-menu-sub { color: #aaaaaa; }
body.theme-dark .tab-btn { color: #888; }
body.theme-dark .tab-btn.active { color: #fff; }
body.theme-dark .tab-btn.active .tab-dot { background-color: #fff; }
body.theme-dark .mission-tab { border-color: rgba(255,255,255,0.3); color: #aaa; }
body.theme-dark .mission-tab.active { background-color: #fff; color: #111; }
body.theme-dark .ministry-overlay.m-1 { background: linear-gradient(to top, #222222ee 0%, #22222244 50%, transparent 100%); }
body.theme-dark .ministry-overlay.m-2 { background: linear-gradient(to top, #1a1a1aee 0%, #1a1a1a44 50%, transparent 100%); }
body.theme-dark .ministry-overlay.m-3 { background: linear-gradient(to top, #111111ee 0%, #11111144 50%, transparent 100%); }


/* ════════════════════════════════
   Ultra Wide Desktop (1921px 이상)
   ════════════════════════════════ */
@media (min-width: 1921px) {
    /* Vision Section 겹침 방지 */
    .vision-text-content,
    .vision-quick-menu {
        left: calc(50vw - 705px + 750px) !important;
    }

    .vision-img-wrapper {
        width: 461px !important;
        bottom: -7vh;
    }

    .vision-cross-bg {
        width: 691px !important;
        right: calc(50vw - 960px - 77px) !important;
    }

    /* Mission Section 벌어짐 방지 */
    .mission-globe { width: 730px !important; }

    .mission-slider {
        --card-w: min(576px, 52vh) !important;
        --half-w: calc(var(--card-w) / 2) !important;
    }

    .mission-card[data-offset="-1"] {
        transform: translateX(calc(50vw - 1114px)) translateY(-50%) perspective(1200px) rotateY(25deg) scale(0.88) !important;
    }
    .mission-card[data-offset="1"] {
        transform: translateX(calc(50vw + 538px)) translateY(-50%) perspective(1200px) rotateY(-25deg) scale(0.88) !important;
    }
    .mission-card[data-offset="-2"], .mission-card[data-offset-out="left"] {
        transform: translateX(calc(50vw - 3264px)) translateY(-50%) perspective(1200px) rotateY(25deg) scale(0.88) !important;
    }
    .mission-card[data-offset="2"], .mission-card[data-offset-out="right"] {
        transform: translateX(calc(50vw + 3264px)) translateY(-50%) perspective(1200px) rotateY(-25deg) scale(0.88) !important;
    }

    /* 갤러리 이미지 과대화 방지 */
    .gallery-img {
        width: 384px !important;
        height: 269px !important;
    }
}

/* ════════════════════════════════
   Desktop ≤1920px
   [브레이크포인트 수정] max-width:1921 → 1920.
   기존에는 정확히 1921px 에서 위 min-width:1921 블록과 동시에 적용되어
   두 규칙이 서로 덮어쓰고 있었다.
   ════════════════════════════════ */
@media (max-width: 1920px) {
    /* .vision-title 은 이제 clamp 로 처리하므로 고정값 override 제거 */
    .vision-img-wrapper {
        position: absolute;
        left: max(1.25rem, calc((100vw - 88.125rem) / 2 + 1.25rem));
        bottom: -1vh;
    }
    .mission-sticky.is-active .mission-globe { top: 92%; }
}

/* ════════════════════════════════
   Laptop ≤1440px
   [신규] 13~14인치 노트북 구간. 비전 섹션 2단(좌 제목 / 우 본문)이
   가장 좁아지는 구간이라 여백과 이미지 폭만 조정한다.
   ════════════════════════════════ */
@media (max-width: 1440px) {
    .vision-text-content,
    .vision-quick-menu { left: 44%; }
    .vision-img-wrapper { width: 28vw; }
    .quick-menu-grid { gap: 1.25rem 0.75rem;}
    .mission-slider { --card-w: min(34vw, 52vh); }
}

/* ════════════════════════════════
   Tablet Landscape ≤1199px
   [브레이크포인트 통일] 1200 → 1199 (layout.css 와 동일)
   ════════════════════════════════ */
@media (max-width: 1199px) {
    .worship-row { flex-direction: column; gap: 2rem; }
    .worship-img-wrapper { flex: none; width: 100%; aspect-ratio: 16/9; }
    .tabs-list { min-width: 8rem; }
    .worship-content { width: 100%; }
    .worship-row.no-border .worship-img-wrapper { order: -1; }

    /* 미션 카드가 화면 폭 대비 작아지지 않도록 */
    .mission-slider { --card-w: min(42vw, 50vh); }
}



/* 넓지만 세로도 긴 화면: 데스크톱 배치 유지하되 세로 간격만 압축 */
@media (min-width: 1441px) and (max-aspect-ratio: 3 / 2) {
    .vision-title-wrapper { top: 8vh; }
    .vision-text-content  { top: 22vh; }
    .vision-quick-menu    { top: 46vh; }
    .vision-img-wrapper   { top: 32vh; bottom: auto; width: min(22vw, 20rem); }
}





/* ════════════════════════════════
   Tablet Portrait ≤991px  (아이패드 세로 / 갤탭 세로)
   [브레이크포인트 통일] 1024 → 991 (layout.css 와 동일)

   [추가 조건] 폭 1440px 이하이면서 세로가 1100px 이상인 화면도 포함한다.
   데스크톱 배치는 top:12vh / 30vh / 60vh 라 세로가 길어질수록 요소가
   화면 전체에 흩어진다. 아이패드 프로 세로(1024x1366)뿐 아니라
   1421x1200 처럼 "가로가 더 길지만 세로도 긴" 창에서도 같은 문제가 생기므로,
   orientation 이 아니라 실제 높이로 판정한다.
     - 1857x927 / 1440x900 (일반 노트북·데스크톱) → 데스크톱 배치 유지
     - 1366x1024 / 1421x1200 / 1024x1366          → 그리드로 전환
   ════════════════════════════════ */
@media (max-width: 991px),
       (max-width: 1440px) and (min-height: 1000px) {
    .worship-row { gap: 2.5rem; }

    /* Vision: 절대배치 해제 → 2단 그리드 */
    .vision-section { height: auto; }
    .vision-sticky { position: relative; height: auto; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vh, 2.5rem) clamp(2rem, 4vw, 3.5rem); align-items: start; padding: clamp(6rem, 12vh, 10rem) clamp(1.5rem, 3.5vw, 3rem) 0; }
    .vision-cross-bg { display: none; }

    .vision-title-wrapper { position: relative; left: 0; top: 0; grid-column: 1; grid-row: 1; max-width: 100%; padding: 0; margin: 0; }
    .vision-title { font-size: clamp(2.75rem, 5.2vw, 4.5rem); text-align: left; margin: 0; line-height: 1.2; }

    .vision-text-content { position: relative; left: 0; right: 0; top: 0; grid-column: 2; grid-row: 1; padding: 0; max-width: 100%; }
    .mission-line { font-size: 1.375rem; line-height: 1.7; margin-bottom: 0.5rem; word-break: keep-all; }
    .mission-line:first-child { margin-top: 0; }
    .vision-text-content .mission-char { color: var(--char-on) !important; }

    /* [수정] 그리드 한 칸(폭 절반)을 그대로 차지해 1024px 화면에서
   470px 정사각이 되던 문제. 상한을 두고 좌측 정렬한다. */
    .vision-img-wrapper { position: relative; left: 0; bottom: 0; grid-column: 1; grid-row: 2; width: 100%; max-width: clamp(11rem, 26vw, 19rem); margin-right: auto; opacity: 1 !important; transform: none !important; }

    .vision-quick-menu { position: relative; left: 0; right: 0; top: 0; grid-column: 2; grid-row: 2; padding: 0; margin-top: 0.5rem; }
    .quick-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
    .quick-menu-item { opacity: 1 !important; transform: none !important; }

}

/* ════════════════════════════════
   Tablet ≤991px  (폭 기준 전용)

   위 블록은 "세로가 긴 넓은 화면"까지 포함하지만, 아래 규칙들은
   화면이 실제로 좁을 때만 맞는 값이다. 1366x1024 처럼 폭이 넓은데
   세로도 긴 화면에 미션 카드 52vw(=710px)나 갤러리 34vw 를 적용하면
   카드가 과대해지고 탭을 덮어버린다. 그래서 폭 조건만 쓴다.
   ════════════════════════════════ */
@media (max-width: 991px) {
    /* 태블릿: 화면이 정사각에 가까우므로 16:9 */
    .hero-section { aspect-ratio: 16/9;  }

    /* MESSAGE 2단 그리드 해제 (아이패드 세로 768~991) */
    .message-main-grid  { grid-template-columns: 1fr; gap: 2rem; }
    .message-text-group { justify-self: start; width: 100%; }
    .message-sub-card:nth-child(1) { padding-right: 1.75rem; }
    .message-sub-card:nth-child(2) { padding-left: 1.75rem; }

    /* 미션: 카드를 키우고 화살표를 카드 옆으로 붙인다 */
    .mission-slider { --card-w: min(52vw, 46vh); top: clamp(12rem, 24vh, 18rem); }
    .mission-nav-btn.prev { left:  calc(50% - var(--half-w) - 3.25rem); }
    .mission-nav-btn.next { right: calc(50% - var(--half-w) - 3.25rem); }
    .mission-dots { bottom: 12vh; }
    .mission-card[data-offset="-1"] { transform: translateX(-30vw) translateY(-50%) perspective(1200px) rotateY(25deg) scale(0.85); }
    .mission-card[data-offset="1"]  { transform: translateX(calc(100vw - 22vw)) translateY(-50%) perspective(1200px) rotateY(-25deg) scale(0.85); }

    /* 갤러리 */
    .gallery-img { width: 34vw; height: 24vw; }
}

/* ════════════════════════════════
   Mobile ≤767px
   [브레이크포인트 통일] 768 → 767 (layout.css 와 동일)

   ※ layout.main.js 의 adjustMobileText() 도 함께 맞춰야 한다.
     window.innerWidth <= 768  →  window.innerWidth <= 767
   ════════════════════════════════ */
@media (max-width: 767px) {

    .vision-title-wrapper,
    .vision-text-content,
    .vision-img-wrapper,
    .vision-quick-menu { grid-column: auto; grid-row: auto; }

    /* 모바일: 16:9 를 유지하면 375px 폭에서 높이가 211px 밖에 안 된다.
       세로형 배너 비율(4:5)로 전환한다. */
    .hero-section { aspect-ratio: 16 / 9; }
    .hero-title { font-size: clamp(1.5rem, 6vw, 2.4rem); line-height: 1.3; }

    .vision-section { height: auto; margin-bottom: 0; }
    .vision-sticky { display: block; grid-template-columns: none; height: auto; padding: 2vh 1.25rem 3rem; }

    .vision-cross-bg  { right: -6%; width: 42vw; }

    .vision-title-wrapper { position: relative; left: 0; top: 0; max-width: 100%; padding: 5vh 1.25rem 2vh; }
    .vision-title { font-size: clamp(2.5rem, 9vw, 4rem); text-align: left; }
    .vision-text-content { position: relative; left: 0; right: 0; top: 0; width: 100%; max-width: 100%; padding: 0 1.25rem; box-sizing: border-box; overflow-wrap: break-word; }
    /* [수정] 고정 1.7rem → clamp. 431~767 구간에서 줄바꿈이 깨지던 문제 */
    .mission-line { font-size: clamp(1.2rem, 4.6vw, 1.7rem); line-height: 1.6; margin-bottom: 0.5rem; }
    .mission-char { display: inline !important; white-space: normal; }

    .quick-menu-item { flex-direction: row; gap: 1.25rem; }
    .vision-img-wrapper { display: none; }
    .vision-quick-menu { position: relative; left: 0; right: 0; top: 0; padding: 3rem 1.25rem 0; margin-top: 1rem; }
    .quick-menu-grid  { gap: 1.5rem 1rem; }
    .quick-menu-title { font-size: 0.9rem; }
    .quick-menu-sub   { display: none; }

    .worship-type { font-size: 1rem; }
    .sermon-info  { font-size: 0.9rem; }

    /* 모바일은 겹침을 줄여 카드가 잘리지 않게 한다 */
    .worship-info-section { margin-top: -5vh; }

    .message-section      { border-radius: 2.5rem 2.5rem 0 0; padding-top: 3rem; padding-bottom: 5rem; }
    .message-dim-overlay  { border-radius: 2.5rem 2.5rem 0 0; }
    .message-main-grid    { grid-template-columns: 1fr; gap: 2rem; }
    .message-text-group   { justify-self: start; width: 100%; gap: 0rem; }
    .message-thumb-wrapper{ width: 100%; }
    .message-sub-grid     { display: grid; grid-template-columns: 1fr; gap: 2rem; }
    .message-sub-card:nth-child(2) { border-left: none; border-top: 0.0625rem solid rgba(255,255,255,0.18); padding-left: 0; padding-top: 1.75rem; }
    .message-sub-card:nth-child(1) { padding-right: 0; }

    .worship-info-section { border-radius: 2.5rem 2.5rem 0 0; padding-top: 3.5rem; padding-bottom: 4rem; }
    .worship-row          { flex-direction: column; gap: 2.5rem; padding-bottom: 2.5rem; margin-bottom: 2.5rem; }
    .worship-img-wrapper  { width: 100%; aspect-ratio: 16/9; }

    /* [장년예배] 모바일 레이아웃
       [수정] 행마다 상하 여백과 얇은 구분선을 넣어 붙어 보이던 문제를 해소 */
    .worship-table-row { display: flex; flex-direction: row !important; align-items: stretch; gap: 0.5rem; padding: 0.75rem 0; }
    .worship-table-row + .worship-table-row { border-top: 1px solid rgba(18,18,18,0.08); }
    body.theme-dark  .worship-table-row + .worship-table-row { border-top-color: rgba(255,255,255,0.10); }
    body.theme-brown .worship-table-row + .worship-table-row { border-top-color: rgba(93,64,55,0.14); }
    .worship-table-label { width: 5.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1rem; padding: 0; white-space: pre-wrap; line-height: 1.4; }
    .worship-table-data { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; padding: 0 0 0 0.75rem; }
    .worship-time-item { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
    .worship-time-part { font-size: 1rem; min-width: 2.5rem; flex-shrink: 0; }
    /* [수정] flex-shrink:0 때문에 좁은 폭에서 줄바꿈도 축소도 안 되어 잘렸다 */
    .worship-time-value { font-size: 1rem; min-width: 0; flex-shrink: 1; word-break: keep-all; }
    .worship-location { font-size: 0.95rem; }

    /* [다음세대 예배] 모바일 레이아웃 */
    .worship-detail-inner { display: flex; flex-direction: row !important; align-items: stretch; gap: 0.5rem; padding: 0.75rem 0; }
    .worship-detail-inner + .worship-detail-inner { border-top: 1px solid rgba(18,18,18,0.08); }
    body.theme-dark  .worship-detail-inner + .worship-detail-inner { border-top-color: rgba(255,255,255,0.10); }
    body.theme-brown .worship-detail-inner + .worship-detail-inner { border-top-color: rgba(93,64,55,0.14); }
    .worship-detail-dept-box { width: 5.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; text-align: center; }
    .worship-detail-dept-name { font-size: 1rem; line-height: 1.4; word-break: keep-all; white-space: pre-wrap; }
    .worship-detail-v-line { width: 1px; background: rgba(18,18,18,0.15); flex-shrink: 0; margin: 0.5rem 0; }
    .worship-detail-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; padding: 0 0 0 0.75rem; }
    .worship-detail-row-item { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
    .worship-detail-text-gray { font-size: 1rem; min-width: 0; flex-shrink: 1; word-break: keep-all; }
    .worship-detail-text-light { font-size: 1rem; line-height: 1.3; }
    .worship-detail-min-20 { min-width: 2.5rem; }
    .worship-detail-min-44 { min-width: 4rem; }

    .tabs-container { flex-direction: column; gap: 1rem; }
    .tabs-list { flex-direction: row; flex-wrap: nowrap; gap: 0.5rem; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; padding-bottom: 0.25rem; margin-right: 0; padding-right: 0; }
    .tabs-list::-webkit-scrollbar { display: none; }
    .tab-btn { flex-shrink: 0; padding: 0.5rem 1rem; border-radius: 20px; background-color: #f1f1f1; font-size: 1rem; }
    .worship-table { min-height: 0; height: auto; }
    .worship-detail-container { height: auto; }
    body.theme-brown .tab-btn { background-color: #f0e6d2; }
    body.theme-dark .tab-btn { background-color: #333; }
    .tab-btn.active { background-color: var(--color-accent-blue); color: var(--color-white); }
    body.theme-brown .tab-btn.active { background-color: #8b5a2b; color: var(--color-white); }
    .tab-dot { display: none; }

    .ministry-section { padding-top: 3.5rem; padding-bottom: 4rem; }
    .ministry-grid    { grid-template-columns: 1fr; }
    .ministry-card    { aspect-ratio: 16 / 9; }
    .ministry-en      { font-size: 0.8rem; }
    .ministry-overlay { padding: 1rem; }
    .ministry-title   { font-size: 1rem; margin-bottom: 0.25rem; }
    .ministry-desc    { font-size: 1rem; line-height: 1.4; }

    /* 모바일은 헤더가 더 크므로 슬라이더를 아래로 내리고 높이 제한을 푼다 */
    .mission-slider { top: 9rem; height: auto; bottom: 0; }
    .mission-container { height: 200vh; height: 200svh; }
    .mission-sticky { height: 100vh; height: 100svh; }
    .mission-header { padding-top: 7rem; gap: 0.5rem; }
    .mission-tab    { padding: 0.25rem 0.625rem; font-size: 1rem; }

    .mission-slider { --card-w: 72vw; --half-w: 40vw; }
    .mission-card { opacity: 0; height: calc(72vw * 3 / 4); top: 42%; }
    .mission-nav-btn { width: 2rem; height: 2rem; top: 42%; }

    .mission-card[data-offset="0"]  { opacity: 1; transform: translateX(14vw) translateY(-50%) scale(1); }
    .mission-card[data-offset="-1"] { transform: translateX(-150vw) translateY(-50%); }
    .mission-card[data-offset="1"]  { transform: translateX(150vw) translateY(-50%); }
    .mission-nav-btn.prev { left: 0.25rem; }
    .mission-nav-btn.next { right: 0.25rem; }
    .mission-dots { bottom: 6rem; }
    .mission-globe { top: 60%; width: 57vw; }
    .mission-sticky.is-active .mission-globe { top: 83%; transform: translate(-50%, -50%) scale(2); }

    .gallery-section { padding-top: 4rem; padding-bottom: 4rem; }
    .gallery-track-container { margin-bottom: 1rem; }
    .gallery-img { width: 60vw; height: 42vw; object-fit: cover; border-radius: 0.75rem; margin-right: 1rem; }

    .theme-switch-container { bottom: 2rem; right: 1.5rem; }
}

/* ════════════════════════════════
   Mobile ≤480px
   [브레이크포인트 통일] 430 → 480 (layout.css 와 동일)
   ════════════════════════════════ */
@media (max-width: 480px) {
    .vision-title-wrapper { padding: 4vh 1.25rem 2vh; }

    /* 폴더블 커버화면(344px) 등 초협폭 대응.
       라벨 폭과 글자를 줄이고 값 영역이 줄바꿈되도록 한다. */
    .worship-table-label      { width: 4.5rem; font-size: 0.9rem; }
    .worship-table-data       { padding-left: 0.6rem; }
    .worship-time-part        { min-width: 2rem; font-size: 0.9rem; }
    .worship-time-value       { font-size: 0.9rem; }
    .worship-location         { font-size: 0.85rem; word-break: keep-all; }

    .worship-detail-dept-box  { width: 4.5rem; }
    .worship-detail-dept-name { font-size: 0.9rem; }
    .worship-detail-dept-age  { font-size: 0.8rem; }
    .worship-detail-rows      { padding-left: 0.6rem; }
    .worship-detail-text-gray,
    .worship-detail-text-light { font-size: 0.9rem; }
    .worship-detail-min-20    { min-width: 2rem; }
    .worship-detail-min-44    { min-width: 0; }

    .quick-menu-grid { grid-template-columns: 1fr; }
    .mission-card-text { padding: 1.25rem; }
    .mission-card-name { font-size: 1.25rem; }
    .mission-card-sub  { font-size: 1rem; }
    .theme-switch-container { bottom: 2rem; right: 1rem; gap: 0.75rem; }
}

/* ════════════════════════════════
   모션 최소화 설정 존중
   ════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll { transition: none; }
    .mission-globe, .mission-card, .mission-content-layer { transition: none; }
    .gallery-track-left, .gallery-track-right { animation: none; }
}