/* =========================================================
   layout.main.css  — 메인 전용
   - 폰트: rem (기준 html 16px / 모바일 767px 이하 14px → layout.css)
   - 간격 등 나머지 수치는 디자인 HTML(px) 그대로
   - .container 는 건드리지 않고 .m-wrap(1310px)으로 내부 폭 통제
   - 반응형 분기점은 디자인 원본 기준 유지
     1180 / 1100 / 1000 / 900 / 860 / 760
   ========================================================= */

/* ---------- common ---------- */
.m-sec,
.m-sec *,
.m-vision,
.m-vision * {
    box-sizing: border-box;
}

.m-wrap {
    max-width: 1310px;
    margin: 0 auto;
}

.sec-title {
    margin: 0;
    font-family: 'Google Sans', 'Google Sans Text', sans-serif;
    font-size: clamp(2.625rem, 4.4vw, 3.875rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

#main1 ~ section ul,
#main1 ~ section li {
    list-style: none;
}


/* ---------- AOS 디자인 수치 보정 ----------
   AOS 기본 이동거리 100px → 디자인 원본(48px / 80px)
   AOS 기본 이징 → 디자인 원본 cubic-bezier
   (.aos-animate 상태 선택자가 더 강해서 등장 후에는 정상적으로 원위치) */
.m-sec [data-aos="fade-up"]    { transform: translate3d(0, 48px, 0); }
.m-sec [data-aos="fade-right"] { transform: translate3d(-80px, 0, 0); }
.m-sec [data-aos="fade-left"]  { transform: translate3d(80px, 0, 0); }

.m-sec [data-aos][data-aos] {
    transition-timing-function: cubic-bezier(.2, .75, .2, 1);
}


/* =========================================================
   01 메인 슬라이드 (CMS Slider 위젯)
   ========================================================= */
/* 위젯 내부(img, 화살표, 블러 배경 등)는 위젯 자체 스타일을 그대로 사용
   → 여기서 #main1 img 를 건드리면 작은 이미지까지 100%로 늘어나 깨짐 */
#main1 {
    position: relative;
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   02 비전
   ========================================================= */
.m-vision {
    position: relative;
    height: 260vh;
    background: #FFFFFF;
}

.vision-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    text-align: center;
}

/* sticky 가 레이아웃 상위 요소의 overflow:hidden 때문에 안 먹을 때
   layout.main.js 가 .is-pinfix 를 붙여 fixed 방식으로 고정 */
.m-vision.is-pinfix .vision-sticky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.m-vision.is-pinfix .vision-sticky.is-fixed {
    position: fixed;
    top: 0;
}
.m-vision.is-pinfix .vision-sticky.is-after {
    top: auto;
    bottom: 0;
}

/* 모션 최소화 설정: 고정 스크롤 없이 한 화면으로 */
@media (prefers-reduced-motion: reduce) {
    .m-vision { height: auto; }
    .vision-sticky,
    .m-vision.is-pinfix .vision-sticky {
        position: relative;
        height: auto;
        min-height: 100vh;
    }
}

.vimg {
    position: absolute;
    will-change: transform;
    transition: opacity .6s ease, transform .75s cubic-bezier(.2, .75, .2, 1);
}
.m-vision.is-ready .vimg {
    opacity: 0;
    transform: translateY(40px) scale(.94);
}

.vimg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
}

/* 겹칠 때 위로 올라오는 이미지 (위로 움직이는 이미지가 앞) */
.vimg-1,
.vimg-4,
.vimg-3 {
    z-index: 2;
}

/* 비전 문구는 항상 이미지보다 위 */
.vision-text {
    z-index: 3;
}

.vimg-0 { left: 0;    top: 12%;    width: clamp(180px, 22vw, 420px); aspect-ratio: 4 / 3; }
.vimg-1 { left: 8%;   bottom: 10%; width: clamp(110px, 11vw, 220px); aspect-ratio: 9 / 10; }
.vimg-2 { right: 6%;  top: 2%;     width: clamp(160px, 18vw, 350px); aspect-ratio: 3 / 2; }
.vimg-4 { right: 2%;  top: 42%;    width: clamp(110px, 11vw, 200px); aspect-ratio: 1 / 1.05; }
.vimg-3 { right: 20%; bottom: 4%;  width: clamp(110px, 12vw, 230px); aspect-ratio: 9 / 10; }

.vision-text {
    position: relative;
    max-width: 1310px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

.vision-title {
    margin: 0;
    font-size: clamp(2.5rem, 5.6vw, 5.5rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.3;
    color: #1A1A1A;
    transition: opacity .8s ease, transform .9s cubic-bezier(.2, .75, .2, 1);
}
.m-vision.is-ready .vision-title { opacity: 0.5; }

.vision-line {
    display: block;
    white-space: pre;
}

.vision-line [data-vc] {
    color: #1A1A1A;
    transition: opacity .15s linear;
}
.vision-line .is-accent { color: #205281; }
.m-vision.is-ready .vision-line [data-vc] { opacity: 0.15; }

.vision-values {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px clamp(24px, 4vw, 64px);
    margin: 0;
    padding: 0;
}

.vision-values li {
    font-size: clamp(1.25rem, 1.9vw, 1.625rem);
    font-weight: 600;
    color: #444;
    transition: opacity .7s ease, transform .8s cubic-bezier(.2, .75, .2, 1);
}
.m-vision.is-ready .vision-values li {
    opacity: 0;
    transform: translateY(24px);
}


/* =========================================================
   03 Welcome
   ========================================================= */
.m-welcome {
    background: #F1F4F7;
    padding: clamp(88px, 8vw, 130px) 24px;
}

.m-welcome .sec-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 48px;
}

.welcome-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: stretch;
}

.welcome-img {
    position: relative;
    min-height: clamp(360px, 36vw, 500px);
    overflow: hidden;
    background: #EFE9E0;
}

.welcome-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.welcome-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.welcome-link {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 32px 0;
    border-bottom: 1px solid #D3DAE2;
    color: #1A1A1A;
    text-decoration: none;
    transition: padding .25s, color .2s;
}

.welcome-link:hover,
.welcome-link:focus-visible {
    padding-left: 12px;
    color: #205281;
    text-decoration: none;
}

.welcome-icon {
    font-size: 2.125rem;
    line-height: 1;
    color: #205281;
}

.welcome-txt {
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 16px;
    width: max-content;
    max-width: 100%;
}

.welcome-txt strong {
    font-size: 1.4375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.welcome-desc {
    position: absolute;
    left: 100%;
    top: 50%;                              /* 제목 기준 세로 가운데 */
    margin-left: 16px;
    white-space: nowrap;
    font-size: 1.125rem;
    line-height: 1;
    color: #777;
    opacity: 0;
    transform: translate(-8px, -50%);
    transition: opacity .25s ease, transform .25s ease;
}

.welcome-link:hover .welcome-desc,
.welcome-link:focus-visible .welcome-desc {
    opacity: 1;
    transform: translate(0, -50%);
}

.welcome-arrow {
    font-size: 1.25rem;
}


/* =========================================================
   04 Sunday Sermon
   ========================================================= */
.m-sermon {
    background: #FFFFFF;
    padding: clamp(100px, 10vw, 160px) 24px;
}

.sermon-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 56px;
}

.sermon-more {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 26px 10px 10px;
    background: #F1F4F7;
    border-radius: 999px;
    color: #1A1A1A;
    text-decoration: none;
    transition: background .25s;
}

.sermon-more:hover {
    background: #E2E8EF;
    color: #1A1A1A;
    text-decoration: none;
}

.sermon-avatars {
    display: flex;
}

.sermon-avatar {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #F1F4F7;
    overflow: hidden;
    background: #E3E3DD;
}

.sermon-avatar + .sermon-avatar {
    margin-left: -16px;
}

.sermon-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sermon-more strong {
    font-size: 1.1875rem;
    font-weight: 700;
}

.sermon-more-arrow {
    font-size: 1.1875rem;
    color: #205281;
}

.sermon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 40px 28px;
}

.sermon-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #1A1A1A;
    text-decoration: none;
}

.sermon-card:hover {
    color: #205281;
    text-decoration: none;
}

.sermon-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #E3E3DD;
}

.sermon-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .75, .2, 1);
}

.sermon-card:hover .sermon-thumb img {
    transform: scale(1.07);
}

.sermon-badge {
    position: absolute;
    left: 16px;
    top: 16px;
    padding: 6px 12px;
    background: #205281;
    color: #FFFFFF;
    font-size: 1.125rem;
    font-weight: 700;
}

.sermon-play {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #1A1A1A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    padding-left: 3px;
}

.sermon-meta {
    font-size: 1.125rem;
    color: #888;
    transition: color .4s ease;
}

.sermon-title {
    margin: -6px 0 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: normal;
    color: inherit;
    transition: color .4s ease;
}

.sermon-verse {
    font-size: 1.25rem;
    color: #666;
}

.sermon-empty {
    margin: 0;
    padding: 60px 0;
    text-align: center;
    font-size: 1.25rem;
    color: #888;
}


/* =========================================================
   05 Worship Info
   ========================================================= */
.m-worship {
    background: #26394D;
    color: #FFFFFF;
    padding: clamp(100px, 10vw, 160px) 24px;
    overflow-x: clip;
}

.worship-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.worship-info {
    display: flex;
    flex-direction: column;
    gap: 44px;
}

.worship-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.worship-head .sec-title {
    color: #FFFFFF;
}

.worship-group {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: clamp(16px, 2.5vw, 36px);
    align-items: center;
}

.worship-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.worship-label h3 {
    margin: 0;
    font-size: 1.4375rem;
    font-weight: 800;
    line-height: 1.4;
    white-space: pre-line;
    color: #FFFFFF;
}

.worship-label span {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.65);
}

.worship-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: clamp(16px, 2.5vw, 36px);
    border-left: 1.5px solid rgba(255, 255, 255, 0.45);
}

.worship-row {
    display: grid;
    grid-template-columns: minmax(190px, auto) 1fr;
    gap: 24px;
    align-items: baseline;
}

.worship-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.worship-name span:first-child {
    font-size: 1.375rem;
    font-weight: 600;
    white-space: nowrap;
}

.worship-name .worship-place {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.65);
}

.worship-time {
    font-size: 1.375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.worship-img {
    position: sticky;
    top: 112px;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #E9E9E4;
}

.worship-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   06 Location
   ========================================================= */
.m-location {
    background: #FFFFFF;
    padding: clamp(100px, 10vw, 160px) 24px;
}

.location-wrap {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.location-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 12px;
}

.location-head-txt {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.location-addr {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    font-style: normal;
}

.location-addr strong {
    font-size: clamp(1.6875rem, 2.88vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.3;
    color: #1A1A1A;
}

.location-addr span {
    font-size: 1.25rem;
    color: #777;
}

.location-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-solid,
.btn-line {
    display: inline-block;
    padding: 16px 26px;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: normal;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.btn-solid {
    background: #1A1A1A;
    color: #FFFFFF;
    border: 0;
}

.btn-solid:hover {
    background: #205281;
    color: #FFFFFF;
    text-decoration: none;
}

.btn-line {
    background: transparent;
    color: #1A1A1A;
    border: 1px solid #1A1A1A;
}

.btn-line:hover {
    background: #1A1A1A;
    color: #FFFFFF;
}

.location-map {
    position: relative;
    width: 100%;
    background: #E9E9E4;
    overflow: hidden;
}

/* 카카오맵 지도퍼가기 : 고정 px 폭을 100% 로 덮어쓰기 */
.location-map .root_daum_roughmap {
    width: 100% !important;
    max-width: 100%;
}

.location-map .root_daum_roughmap .wrap_map {
    width: 100% !important;
    height: 400px !important;
}

.location-contacts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 32px 0;
    border-left: 1px solid #E0E0DA;
}

.contact-item:first-child {
    padding: 8px 32px 0 0;
    border-left: 0;
}

.contact-item:last-child {
    padding: 8px 0 0 32px;
}

.contact-item h3 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: normal;
    color: #1A1A1A;
}

.contact-tels {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.contact-tel {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    color: #444;
    text-decoration: none;
}

a.contact-tel:hover {
    color: #205281;
    text-decoration: none;
}

.contact-tel svg {
    flex: none;
}

#daumRoughmapContainer1792463152401 .cont{display:none;}


/* =========================================================
   Responsive (Desktop-First)
   ========================================================= */
@media (max-width: 1180px) {
    .welcome-desc { display: none; }
}

/* 터치 기기: 설명 항상 노출 */
@media (hover: none) {
    .welcome-desc {
        position: static;
        margin-left: 0;
        white-space: normal;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1100px) and (min-width: 761px) {
    .vimg-4 { display: none; }
    .vimg-0 { top: 14%; width: 20vw; }
    .vimg-2 { top: 10%; width: 18vw; }
}

@media (max-width: 1000px) {
    .worship-grid {
        grid-template-columns: 1fr;
    }

    .worship-img {
        position: relative;
        top: auto;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 900px) {
    .welcome-grid {
        grid-template-columns: 1fr;
    }

    /* 1단으로 쌓일 때 이미지 높이 고정값 대신 가로 비율로 */
    .welcome-img {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 860px) {
    .location-contacts {
        grid-template-columns: 1fr;
    }

    .contact-item,
    .contact-item:first-child,
    .contact-item:last-child {
        border-left: 0;
        padding: 28px 0;
        gap: 12px;
        border-bottom: 1px solid #E0E0DA;
    }

    .contact-item:first-child {
        padding-top: 8px;
    }

    .contact-item:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 760px) {
    /* vision */
    .vimg-4 { display: none; }
    .vimg-0 { left: 0;   top: 12%;   width: 40vw; }
    .vimg-2 { right: 0;  top: 10%;   width: 36vw; }
    .vimg-1 { left: 6%;  bottom: 7%; width: 26vw; }
    .vimg-3 { right: 6%; bottom: 5%; width: 30vw; }

    .vision-text { gap: 28px; }
    .vision-title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
    .vision-values { gap: 10px 20px; }
    .vision-values li { font-size: 1.0625rem; }

    /* sermon */
    .sermon-head { margin-bottom: 36px; }

    /* worship */
    .worship-group {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .worship-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .worship-name span {
        white-space: normal;
    }

    .worship-name span:first-child,
    .worship-time {
        font-size: 1.125rem;
    }

    /* location */
    .location-map .root_daum_roughmap .wrap_map { height: 280px !important; }
}


/* =========================================================
   Mobile 폰트 크기 (767px 이하, 기준 1rem = 14px)
   ========================================================= */
@media (max-width: 767px) {
    .sec-title { font-size: 2rem; }

    /* vision */
    .vision-title { font-size: clamp(1.75rem, 7vw, 2.25rem); }
    .vision-values li { font-size: 1.0625rem; }

    /* welcome */
    .welcome-img { aspect-ratio: 16 / 10; }
    .welcome-link { padding: 22px 0; gap: 14px; grid-template-columns: 36px minmax(0, 1fr) auto; }
    .welcome-link:hover,
    .welcome-link:focus-visible { padding-left: 0; }
    .welcome-icon { font-size: 1.75rem; }
    .welcome-txt strong { font-size: 1.25rem; }
    .welcome-desc { font-size: 0.9375rem; }
    .welcome-arrow { font-size: 1.125rem; }

    /* sermon */
    .sermon-more { gap: 12px; padding: 8px 20px 8px 8px; }
    .sermon-avatar { width: 40px; height: 40px; }
    .sermon-avatar + .sermon-avatar { margin-left: -14px; }
    .sermon-more strong,
    .sermon-more-arrow { font-size: 1rem; }
    .sermon-badge { font-size: 0.875rem; padding: 5px 10px; }
    .sermon-play { width: 44px; height: 44px; font-size: 1rem; }
    .sermon-card { gap: 12px; }
    .sermon-meta { font-size: 0.9375rem; }
    .sermon-title { font-size: 1.25rem; margin-top: -4px; }
    .sermon-verse { font-size: 1rem; }
    .sermon-empty { font-size: 1rem; }

    /* worship */
    .worship-info { gap: 32px; }
    .worship-label h3 { font-size: 1.25rem; }
    .worship-label span { font-size: 0.9375rem; }
    .worship-name span:first-child,
    .worship-time { font-size: 1.0625rem; }
    .worship-name .worship-place { font-size: 0.875rem; }

    /* location */
    .location-addr strong { font-size: 1.5rem; }
    .location-addr span { font-size: 1rem; }
    .btn-solid,
    .btn-line { font-size: 0.9375rem; padding: 13px 20px; }
    .contact-item h3 { font-size: 1.125rem; }
    .contact-tel { font-size: 1rem; }
}