/* Intro Animation */
.intro-container {
    position: fixed; inset: 0; background: #ffffff; display: flex; flex-direction: column;
    align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.7s ease, visibility 0.7s;
}
.intro-container.fading { opacity: 0; pointer-events: none; visibility: hidden;}
.logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.logo-wrap svg { will-change: transform; }

@keyframes draw { from { stroke-dashoffset: var(--dash-length); opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes fadeFill { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: translateY(0); } }

.path-roof { --dash-length: 117.1; stroke-dasharray: 117.1; stroke-dashoffset: 117.1; opacity: 0; animation: draw 0.85s ease forwards 0s; }
.path-stair1 { --dash-length: 18.7; stroke-dasharray: 18.7; stroke-dashoffset: 18.7; opacity: 0; animation: draw 0.25s ease forwards 0.85s; }
.path-stair2 { --dash-length: 47.0; stroke-dasharray: 47.0; stroke-dashoffset: 47.0; opacity: 0; animation: draw 0.3s ease forwards 1.1s; }
.path-stair3 { --dash-length: 75.96; stroke-dasharray: 75.96; stroke-dashoffset: 75.96; opacity: 0; animation: draw 0.35s ease forwards 1.4s; }
.path-cross-v { --dash-length: 84.75; stroke-dasharray: 84.75; stroke-dashoffset: 84.75; opacity: 0; animation: draw 0.45s ease forwards 1.75s; }
.path-cross-h { --dash-length: 41.17; stroke-dasharray: 41.17; stroke-dashoffset: 41.17; opacity: 0; animation: draw 0.3s ease forwards 2.2s; }
.path-rect { --dash-length: 172.16; stroke-dasharray: 172.16; stroke-dashoffset: 172.16; opacity: 0; animation: draw 0.7s ease forwards 2.5s; }
.path-yellow { opacity: 0; animation: fadeFill 0.5s ease forwards 3.2s; }
.church-name-img { opacity: 0; animation: fadeUp 0.8s ease forwards 3.8s; width: 12.5rem; height: auto; }

/* Main Site */
.main-wrapper { opacity: 0; transition: opacity 0.8s ease 0.2s; }
.main-wrapper.visible { opacity: 1; }

/* Hero Section */
/* 높이는 JS가 슬라이드 이미지 중 가장 높은(세로가 긴) 비율에 맞춰 --hero-h로 주입.
   폴백: JS 미실행/이미지 로드 전에는 100vh 사용 */
.hero-sec { position: relative; width: 100vw; height: var(--hero-h, 100vh); background: var(--bg-dark); overflow: hidden; }
.hero-swiper { width: 100%; height: 100%; }
.slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* Hero Slide Content Wrapper (이미지, 영상, A태그 대응) */
/* 가로 꽉 채우고, 콘텐츠는 상단 정렬(세로 부족 시 하단 여백) */
.slide-content-wrap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: flex-start; justify-content: center; }

/* 에디터 기본 p 태그 여백 제거 */
.slide-content-wrap p { margin: 0; padding: 0; width: 100%; }

/* 이미지: 가로 100% 꽉 채우고 높이는 원본 비율대로(잘리지 않음).
   컨테이너 높이가 더 크면 아래쪽에 여백이 남음 */
.slide-content-wrap img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: top center;
    display: block;
}

/* iframe(영상 등)은 비율 계산이 어려우므로 컨테이너를 꽉 채움 */
.slide-content-wrap iframe { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A태그 영역: 가로 꽉, 세로는 내부 이미지 높이만큼 */
.slide-content-wrap a { display: block; width: 100%; }
.slide-content-wrap a img { height: auto; }

.arrow-btn {position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);border-radius: 50%; width: 3.25rem; height: 3.25rem;display: flex; align-items: center; justify-content: center;cursor: pointer; color: white; transition: all 0.2s; backdrop-filter: blur(0.25rem);}
.arrow-btn:hover { background: rgba(255,255,255,0.22); transform: translateY(-50%) scale(1.08); }
.arrow-btn.left { left: 1.5rem; }
.arrow-btn.right { right: 1.5rem; }

.hero-dots {
    position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%);
    z-index: 10; display: flex; gap: 0.625rem;
}
.swiper-pagination-bullet { width: 0.5rem; height: 0.5rem; background: rgba(255,255,255,0.4) !important; opacity: 1 !important; }
.swiper-pagination-bullet-active { background: var(--accent-color) !important; transform: scale(1.3); }

/* Shortcut Section */
.short-sec { padding: 3.75rem 1.25rem; }
.short-container {
    max-width: var(--container-width); margin: 0 auto;
    display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap;
}
.short-item {
    display: flex; flex-direction: column; align-items: center; gap: 0.4375rem;
    color: #3a3a1e; font-size: 1.5rem; font-weight: 700; transition: translate 0.2s ease; 
}
.short-item:hover { translate: 0 -8px; transition: 0.2s ease; color: #E8E06A; }
.short-item .icon { width: 3rem; height: 3rem; color: #3a3a1e; }

/* Sermon Section */
.ser-sec { padding: 5rem 0; background: var(--bg-white); }
.ser-container { max-width: var(--container-width); margin: 0 auto; padding: 0 2.5rem; }
.ser-layout { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; }
.ser-divider { background: var(--border-color); }
.ser-left { position: sticky; top: 4.5rem; padding-right: 3rem; align-self: start; }
.ser-left .thumb { width: 100%; aspect-ratio: 16/9; border-radius: 0.75rem; overflow: hidden; background: var(--bg-light); margin-bottom: 1.25rem; }
.ser-left .thumb .sermon-bg{aspect-ratio: 16 / 9;background-size: contain;background-repeat: no-repeat;background-position: center;}
.ser-left img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.ser-left a:hover img { transform: scale(1.03); }
.ser-left .category { font-size: 1.0625rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.ser-left .title { font-size: 2rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.625rem; word-break:keep-all; }
.ser-left .title:hover{ color:#e8e06a;}
.ser-left .info { font-size: 1.0625rem; color: var(--text-muted); }

.ser-right { padding-left: 3rem; }
.ser-item { padding: 1.75rem 0; border-bottom: 1px solid var(--border-color); }
.ser-item:first-child { padding-top: 0; }
.ser-item:last-child { border-bottom: none; }
.item-link { display: grid; grid-template-columns: 45% 1fr; gap: 1.5rem; }
.item-thumb { aspect-ratio: 16/9; border-radius: 0.5rem; overflow: hidden; background: var(--bg-light); }
.item-thumb .sermon-bg{aspect-ratio: 16 / 9;background-size: contain;background-repeat: no-repeat;background-position: center;}
.item-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.item-link:hover .item-thumb img { transform: scale(1.03); }
.item-text { display: flex; flex-direction: column; justify-content: center; }
.item-text .category { font-size: 1.0625rem; color: var(--text-muted); margin-bottom: 0.375rem; }
.item-text .title { font-size: 1.5rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.5rem; transition: color 0.3s; word-break:keep-all; }
.item-link:hover .title { color: var(--accent-color); }
.item-text .info { font-size: 1.0625rem; color: var(--text-muted); }

/* Church School Section */
.cs-sec {
    position: relative; min-height: 80vh; padding: 5rem 2.5rem; background: var(--bg-dark);
    display: flex; flex-direction: column; justify-content: center; overflow: hidden;
	background-image:url(/UserData/oysi/Layouts/oysi_Layout/images/cs_bg.jpg);
}
.cs-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cs-bg-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 1; }
.cs-marquee { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); z-index: 2; pointer-events: none; overflow: hidden; }
.cs-marquee-track { display: flex; white-space: nowrap; }
.cs-marquee-track span { font-size: 9rem; font-weight: 700; color: rgba(255,255,255,0.04); padding-right: 3rem; }
.cs-container { position: relative; z-index: 3; max-width: var(--container-width); margin: 0 auto; width: 100%; padding: 0 2.5rem; }
.cs-header { text-align: center; }
.cs-header .sec-title { color: #fff; margin-bottom: 0.75rem; }
.cs-header .sec-desc { color: rgba(255,255,255,0.6);font-size:1.5rem; }
.cs-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3rem 4rem; margin-top: 4rem; }
.cs-link { display: block; padding-bottom: 0.625rem; }
.cs-link .ko { color: #fff; font-size: 1.5rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.cs-link .arrow { color: #fff; opacity: 0; transition: opacity 0.25s; }
.cs-link:hover .arrow { opacity: 1; }
.cs-link .en { color: rgba(255,255,255,0.5); font-size: 0.8125rem; transition: color 0.25s; }
.cs-link:hover .en { color: #fff; }

/* Training Section */
.tr-sec { padding: 5rem 0; background: var(--bg-white); }
.tr-container { max-width: var(--container-width); margin: 0 auto; padding: 0 2.5rem; }
.tr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.tr-card { transition: transform 0.3s; }
.tr-card:hover { transform: translateY(-0.25rem); }
.card-img { aspect-ratio: 1/1; border-radius: 0.5rem; overflow: hidden; margin-bottom: 1rem; position: relative; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(0.5rem); -webkit-backdrop-filter: blur(0.5rem);
    opacity: 0; transition: opacity 0.3s; padding: 1.25rem; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
}
.tr-card:hover .card-overlay { opacity: 1; }
.card-overlay .desc { font-size: 1rem; line-height: 1.5; color: rgba(255,255,255,0.95); }
.card-overlay .arrow-btn {
    align-self: flex-end; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
}
.card-text .title { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }

/* Quick Links Section */
.ql-sec { padding: 5rem 0; }
.ql-container { max-width: var(--container-width); margin: 0 auto; padding: 0 2.5rem; }
.ql-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ql-card {
    display: flex; flex-direction: column; padding: 2.5rem 2rem;
    background-color: var(--bg-light); border-radius: 0.75rem; 
    transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1;
}
.ql-card::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; opacity: 0; transition: opacity 0.3s ease; }
.ql-grid li:nth-child(1) .ql-card::before { background-image: url('/UserData/oysi/Layouts/oysi_Layout/images/quick_bg_1.png'); }
.ql-grid li:nth-child(2) .ql-card::before { background-image: url('/UserData/oysi/Layouts/oysi_Layout/images/quick_bg_2.png'); }
.ql-grid li:nth-child(3) .ql-card::before { background-image: url('/UserData/oysi/Layouts/oysi_Layout/images/quick_bg_3.png'); }
.ql-card::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: -1; opacity: 0; transition: opacity 0.3s ease; }
.ql-card:hover { transform: translateY(-0.25rem); color: #ffffff; }
.ql-card:hover::before, .ql-card:hover::after { opacity: 1; }
.ql-card .icon { width: 3rem; height: 3rem; margin-bottom: 1.25rem; color: var(--primary-color); transition: color 0.3s ease; }
.ql-card:hover .icon { color: #ffffff; }
.ql-card .title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; transition: color 0.3s ease; }
.ql-card:hover .title { color: #ffffff; }
.ql-card .desc { font-size: 1.0625rem; color: #666; margin-bottom: 1.5rem; flex-grow: 1; transition: color 0.3s ease; }
.ql-card:hover .desc { color: rgba(255, 255, 255, 0.85); }
.arrow-circle {
    align-self: flex-end; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center; 
    color: var(--primary-color); transition: all 0.3s ease;
}
.ql-card:hover .arrow-circle { background: #ffffff; color: #000000; }

/* Responsive Main */
@media (max-width:1699px) {
}

@media (max-width:1499px) {
    .cs-list{gap: 3rem;}
}

@media (max-width:1199px) {
    .cs-list { grid-template-columns: repeat(3, 1fr); gap: 2rem 3rem; }
    .tr-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .ql-grid { grid-template-columns: repeat(2, 1fr); }
    .ser-sec{padding: 0 0 5rem;}
}

@media (max-width:992px) {
    .short-container{gap: 2rem;}
    .item-link{grid-template-columns: 1fr;}
    .tr-sec {padding: 5rem 0 0;}
}

@media (max-width:767px) {
    .arrow-btn { width: 2.5rem; height: 2.5rem; }
    .arrow-btn.left { left: 0.75rem; }
    .arrow-btn.right { right: 0.75rem; }
    
    .short-sec { padding: 3.25rem 0 3.75rem; }
	.short-container { gap: 1rem; }
    
    .ser-sec { padding: 3.25rem 0 3.75rem; }
    .ser-container { padding: 0 1.25rem; }
    .ser-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .ser-divider { display: none; }
    .ser-left { position: static; padding-right: 0; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border-color); }
    .ser-right { padding-left: 0; }
    .item-link { grid-template-columns: 40% 1fr; gap: 1rem; }
    .ser-item { padding: 1.25rem 0; }
    .ser-left .title { font-size: 1.625rem; }
    .item-text .title { font-size: 1.25rem; }
    
    .cs-sec { padding: 3.75rem 1.5rem; }
    .cs-list { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
    .cs-marquee-track span { font-size: 2.5rem; }
    
    .tr-sec { padding: 3.75rem 0; }
    .tr-container { padding: 0 1.5rem; }
    .tr-grid { grid-template-columns: 1fr; gap: 2rem; }
    .card-overlay { display: none; }
    
    .ql-sec { padding: 3.75rem 0; }
    .ql-container { padding: 0 1.5rem; }
    .ql-grid { grid-template-columns: 1fr; gap: 1rem; }
    .ql-card { padding: 2rem 1.5rem; }
    .ql-card .title { font-size: 1.25rem; }
    .ql-card .desc { font-size: 0.875rem; }
}

@media (max-width:320px) {
}