/* =====================
   Common Main Classes
   ===================== */
main { overflow: visible; max-width: 100%; }
section { overflow: visible; max-width: 100%; }

a{color:inherit;}
a:hover{text-decoration:none;}
a:focus{outline:none;}
.sec-label { font-size: 1.125rem; font-weight: 700; color: #C19A6B; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.75rem; text-align: left; }
.sec-title { font-size: 2.8125rem; font-weight: 700; color: #3E2723; line-height: 1.2; margin: 0; text-align: left; }
.sec-desc { font-size: 1rem; color: #6D5D4B; line-height: 1.7; margin-top: 1.5rem; }

/* 기존 공용 위젯 강제 숨김 (자바스크립트가 데이터를 빼간 뒤 완전히 교체함) */
#main1 .dimode-slider {
    display: none !important;
}

/* =====================
   Hero Section (B형태 시안 CSS)
   ===================== */
.hero-sec {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 0;
    background-color: #f4f1eb; /* 슬라이드 뒤 배경색 */
}
.hero-swiper { width: 100%; height: 100%; }
.hero-swiper .swiper-wrapper { height: 100%; }
.hero-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-indicator {
    position: absolute;
    bottom: 9rem;
    right: 3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 10;
}
.hero-prev, .hero-next {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.6);
    background: rgb(145 120 88 / 20%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    transition: background 200ms ease;
    cursor: pointer;
}
.hero-prev:hover, .hero-next:hover { background: rgba(0,0,0,0.5); color: #fff; }
.hero-counter { font-size: 1rem; font-weight: 500; color: #000; }

/* =====================
   Welcome Section
   ===================== */
.wel-sec { position: relative; z-index: 2; margin-top: -7.5rem; overflow: visible; background: linear-gradient(to bottom, transparent 0%, transparent 7.5rem, #f1ebe5 7.5rem, #ffffff 80%, #ffffff 100%); }
.wel-wave { position: relative; width: 100%; height: 7.5rem; background: transparent; margin: 0; padding: 0; line-height: 0; }
.wel-wave svg { width: 100%; height: 100%; display: block; }
.wel-grid { display: grid; grid-template-columns: 6fr 4fr; grid-template-rows: auto; gap: 4rem; align-items: start; padding-top: 5rem; padding-bottom: 7rem; background: none; }
.wel-left { grid-column: 1; grid-row: 1; min-width: 0; padding-top: 2rem; }
.wel-right { grid-column: 2; grid-row: 1; position: relative; min-width: 0; padding-top: 0; }
.wel-icons { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 4rem; }
.wel-icon-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.icon-box { width: 5rem; height: 5rem; border: 1px solid #dbc5a8; border-radius: 20px; background: white; display: flex; align-items: center; justify-content: center; transition: transform 200ms ease; }
.wel-icon-item:hover .icon-box { transform: translateY(-2px); }
.wel-icon-item span { font-size: 1.2rem; color: #555; font-weight: 500; }
.wel-img-wrap { width: 100%; aspect-ratio: 4/5; max-height: 680px; border-radius: 50% 50% 1.25rem 1.25rem; overflow: hidden; position: relative; background: linear-gradient(160deg, #e8ddd0 0%, #d4c4b0 40%, #c4b09a 100%); }
.wel-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vision-card { position: absolute; bottom: -20px; left: -1.25rem; background: white; padding: 1.25rem 1.5rem; border: 1px solid #E8E8E8; width: 16.75rem; z-index: 5; }
.vision-label { font-size: 1rem; color: #999; margin-bottom: 0.5rem; }
.vision-title { font-size: 1.125rem; font-weight: 700; color: #222; line-height: 1.4; }
.btn-cta { background: #8B6F47; color: white; border-radius: 6.1875rem; padding: 0.5rem 1.25rem; font-size: 1rem; font-weight: 600; margin-top: 0.875rem; transition: all 200ms ease; }
.btn-cta:hover { background: #A67C52; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,111,71,0.4); }

/* 추가된 타이틀 영역 스타일 */
.sec-title-wrap {
    display: flex;
    align-items: center; 
    gap: 1.25rem; 
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.wel-logo {
    height: 5.5rem; 
    width: auto;
    flex-shrink: 0; 
    object-fit: contain;
}

.sec-title-wrap .sec-title {
    margin: 0; 
}

/* =====================
   Sermon & Choir Section
   ===================== */
.ser-choir-sec { background: #fff; padding: 5rem 0; }
.sec-header { margin-bottom: 2.5rem; }
.sub-sec-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.sub-sec-label { font-size: 1.5rem; font-weight: 600; color: #C19A6B; border-bottom: 2px solid #C19A6B; padding-bottom: 0.25rem; }
.btn-view-all { display: flex; align-items: center; gap: 0.375rem; font-size: 1rem; color: #888; transition: color 200ms ease; }
.btn-view-all:hover { color: #222; }
.sermon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.sermon-item { border: 1px solid #EEEEEE; transition: all 250ms ease; }
.sermon-item:hover { transform: translateY(-4px); }
.sermon-thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.sermon-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sermon-info { padding: 1.25rem 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: flex-start; }
.sermon-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.5rem; line-height: 1.3; }
.sermon-meta { font-size: 1rem; color: #888; display: flex; gap: 0.5rem; }
.sermon-date { font-size: 1rem; color: #AAA; white-space: nowrap; }
.choir-header { margin-top: 3.5rem; }
.choir-scroll-wrap { width: 100%; }

.choir-scroll { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 1.25rem; cursor: grab; user-select: none; }
.choir-scroll.grabbing { cursor: grabbing !important; }
.choir-scroll.grabbing * { pointer-events: none; }
.choir-scroll:active { cursor: grabbing; }
.choir-scroll::-webkit-scrollbar { height: 8px; }
.choir-scroll::-webkit-scrollbar-track { background: #EEEBE7; border-radius: 999px; }
.choir-scroll::-webkit-scrollbar-thumb { background: #C19A6B; border-radius: 999px; }

.choir-item { flex: 0 0 16.25rem; transition: transform 250ms ease; }
.choir-item:hover { transform: translateY(-4px); }
.choir-thumb { width: 100%; height: 10rem; overflow: hidden; }
.choir-thumb img { width: 100%; height: 100%; object-fit: cover; }
.choir-info { padding: 0.75rem 0.25rem 0; display: flex; justify-content: space-between; }
.choir-title { font-size: 1rem; max-width: 12em;  font-weight: 700; margin-bottom: 0.25rem; margin-top:0;}
.choir-name { font-size: 1rem; color: #C19A6B; font-weight: 500; }
.choir-date { font-size: 0.75rem; color: #AAA; }
/* 주일설교 / 소형 예배 / 찬양 카드 - 링크 색상 통일 */
.sermon-item a:hover .sermon-title,
.sub-sermon-card:hover .sub-sermon-title,
.choir-item:hover .choir-title
{
   color: #8B6F47;
    text-decoration: none;
}


/* Sub Sermon Grid */
.sub-sermon-grid-wrap {width: 100%; margin-top: 2rem; margin-bottom: 2.5rem;}
.sub-sermon-row {display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px;}
.sub-sermon-row::after {content: ''; display: table; clear: both;}
.sub-sermon-col {width: 33.3333%; padding-left: 10px; padding-right: 10px; box-sizing: border-box;}
.sub-sermon-item {display: block; overflow: hidden;}
.sub-sermon-header {display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0 1rem;}
.sub-sermon-label {font-size: 0.9375rem; font-weight: 600; color: #C19A6B; border-bottom: 2px solid #C19A6B; padding-bottom: 0.125rem; white-space: nowrap;}
.sub-sermon-card {display: block; text-decoration: none; color: inherit;}
.sub-sermon-card:hover {text-decoration: none; color: inherit;}
.sub-sermon-thumb {position: relative; width: 100%; overflow: hidden; background: #DDD; padding-top: 55.25%; height: 0;}
.sub-sermon-thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 350ms ease;}
.sub-sermon-card:hover .sub-sermon-thumb img {transform: scale(1.04);}
.sub-sermon-play {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.28); opacity: 0; transition: opacity 250ms ease; z-index: 1;}
.sub-sermon-card:hover .sub-sermon-play {opacity: 1;}
.sub-sermon-play svg {filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));}
.sub-sermon-info {padding: 0.75rem 0 0.875rem;}
.sub-sermon-date {display: block; font-size: 0.8125rem; color: #AAA; font-weight: 600; margin-bottom: 0.3rem;}
.sub-sermon-title {font-size: 1rem; font-weight: 700; color: #222; margin: 0 0 0.375rem; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.sub-sermon-meta {font-size: 0.875rem; color: #888; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center;}
.sub-sermon-meta .sep {color: #CCC;}




/* =====================
   Ministry Section
   ===================== */
.min-sec { background: #ede8e2; padding: 5rem 0; }
.min-header { text-align: center; margin-bottom: 3rem; }
.min-header .sec-title { color: #3e2723; }
.min-header .sec-desc { color: rgba(255,255,255,0.5); margin: 0 auto; max-width: 37.5rem; }

/* 기본 데스크탑 패널 세팅 */
.min-panels-desktop { display: flex; gap: 0.5rem; height: 35rem; align-items: stretch; }
/* 모바일 패널 숨김 (기본) */
.min-panels-mobile { display: none !important; }

/* 데스크탑(PC) 사역 패널 스타일 */
.min-panel { flex: 1; position: relative; overflow: hidden; will-change: flex; transition: flex 350ms cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer; height: 100%; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.min-panel.active { flex: 3; }
.min-panel::after { content: ''; position: absolute; inset: 0; background-image: var(--bg-img); background-size: cover; background-position: center; z-index: 0; transform: scale(1); transition: transform 350ms cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; }
.min-panel.active::after { transform: scale(1.04); }
.min-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0.15) 100%); z-index: 1; }
.panel-content { position: absolute; bottom: 2.25rem; left: 2rem; right: 2rem; z-index: 2; color: #fff; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.panel-tag { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.6); margin-bottom: 0; opacity: 1; }
.min-panel.active .panel-tag { margin-bottom: 0.625rem; }
.panel-title { font-size: 1.875rem; font-weight: 800; margin: 0 0 0.375rem; }
.panel-hidden { opacity: 0; transform: translateY(10px); transition: opacity 250ms ease 70ms, transform 250ms ease 50ms; will-change: opacity, transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.min-panel.active .panel-hidden { opacity: 1; transform: translateY(0); }
.panel-desc { font-size: 1.125rem; color: rgba(255,255,255,0.8); margin-bottom: 1.25rem; }
.dept-pills { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.dept-pills a { padding: 0.3125rem 0.875rem; border-radius: 6.1875rem; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35); font-size: 1rem; color: #fff; transition: background 200ms ease, color 200ms ease; display: inline-block; }
.dept-pills a:hover { background: #fff; color: #222; }

/* 모바일 사역 패널 스타일 (HTML로 주입되는 요소) */
.min-panel-mob { position: relative; height: 12.5rem; background-size: cover; background-position: center; border-radius: 1rem; overflow: hidden; transition: height 0.4s ease; cursor: pointer; }
.min-panel-mob.active { height: 24rem; }
.min-panel-mob::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%); z-index: 1; }
.panel-mob-content { position: absolute; top: 2.5rem; left: 2rem; right: 2rem; z-index: 2; color: #fff; }
.panel-mob-content .panel-tag { font-size: 0.9rem; margin-bottom: 0.5rem; color: rgba(255,255,255,0.7); font-weight: bold; }
.panel-mob-content .panel-title { font-size: 1.6rem; margin: 0 0 1rem; font-weight: 800; }
.min-panel-mob .panel-hidden { opacity: 1 !important; transform: none !important; }
.min-panel-mob .panel-desc, .min-panel-mob .dept-pills { opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 300ms ease, transform 300ms ease; display: flex; }
.min-panel-mob .panel-desc { display: block; margin-bottom: 1rem; color: rgba(255,255,255,0.9); }
.min-panel-mob.active .panel-desc, .min-panel-mob.active .dept-pills { opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity 300ms ease 150ms, transform 300ms ease 150ms; }

/* =====================
   News Section
   ===================== */
.news-sec { background: #FAF8F5; padding: 6.25rem 0; }
.news-sec-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.5rem; }
.news-header-left { display: flex; flex-direction: column; gap: 0.5rem; }
.news-title-group { display: flex; align-items: center; gap: 1rem; flex-direction: row; }
.news-sec .sec-title { margin: 0; line-height: 1; }
.news-tabs { display: flex; gap: 0.5rem; align-items: center; }
.news-tab { padding: 0.4375rem 1.125rem; border-radius: 6.1875rem; font-size: 1rem; border: 1.5px solid #DDD; color: #555; transition: all 200ms; cursor: pointer; line-height: 1; }
.news-tab.active { background: #8b6f47; border-color: #8b6f47; color: #fff; font-weight: 600; }
.news-tab:hover:not(.active) { border-color: #8b6f47; color: #8b6f47; }
.news-sec-title { font-size: 1.75rem; font-weight: 700; color: #3E2723; margin: 0; }
.btn-read-more { display: flex; align-items: center; gap: 0.375rem; font-size: 1rem; font-weight: 500; color: #3E2723; transition: color 200ms; }
.btn-read-more:hover { color: #8B6F47; }
.news-divider { height: 2px; background: #3E2723; }
.news-row { display: flex; gap: 2rem; align-items: flex-start; padding: 1.75rem 0; border-top: 1px solid rgba(62,39,35,0.15); cursor: pointer; transition: opacity 200ms; position: relative; }
.news-row:hover { opacity: 0.7; }
.news-date-box { display: flex; flex-direction: column; align-items: center; min-width: 5rem; }
.news-day { font-size: 3rem; font-weight: 700; color: #8B6F47; line-height: 1; }
.news-date { font-size: 0.875rem; color: rgba(62,39,35,0.5); }
.news-title-box { flex: 1; padding-top: 0.25rem; }
.news-title-wrapper { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.5rem; }
.news-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem 0.75rem; border-radius: 3rem; border: 1.5px solid #8B6F47; color: #8B6F47; font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.news-title { font-size: 1.25rem; font-weight: 600; color: #3E2723; margin: 0; }
.news-desc { font-size: 1rem; color: rgba(62,39,35,0.7); margin: 0; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border: 1.5px solid #8B6F47; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 200ms; }
.news-row:hover .news-arrow { opacity: 1; }

/* =====================
   Album Section
   ===================== */
.alb-sec { padding: 5rem 0; }
.alb-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem; }
.alb-title-group { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; }
.alb-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.alb-tab { padding: 0.4375rem 1.125rem; border-radius: 6.1875rem; font-size: 1rem; border: 1.5px solid #DDD; color: #555; transition: all 200ms; }
.alb-tab.active { background: #8b6f47; border-color: #8b6f47; color: #fff; font-weight: 600; }
.alb-nav { display: flex; gap: 0.5rem; }
.alb-prev, .alb-next { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid #DDD; display: flex; align-items: center; justify-content: center; transition: all 200ms; }
.alb-prev:hover, .alb-next:hover { background: #8b6f47; border-color: #8b6f47; color: #fff; }
.alb-item { cursor: pointer; }
.alb-thumb { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #CCC; }
.alb-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms; }
.alb-item:hover .alb-thumb img { transform: scale(1.04); }
.alb-info { padding: 0.875rem 0.125rem 0; }
.alb-cat { font-size: 1.125rem; font-weight: 600; color: #C19A6B; display: block; margin-bottom: 0.375rem; }
.alb-item-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.5rem; transition: color 250ms; }
.alb-item:hover .alb-item-title { color: #C19A6B; }
.alb-date { font-size: 1rem; color: #AAA; }


/* =====================
   Mission Section
   ===================== */
.mission-sec { background: #FAF8F5; padding: 6.25rem 0; }
.mission-list { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }
.mission-card { display: flex; flex-direction: column; gap: 0.75rem; flex: 0 0 calc(50% - 0.75rem); border: 1px solid #EEE; background: #fff; padding: 1.5rem; transition: box-shadow 250ms, transform 250ms; }
.mission-card:hover { transform: translateY(-3px);}
.mission-card-top { display: flex; justify-content: flex-end; }
.mission-date { font-size: 0.875rem; color: #AAA; }
.mission-title { font-size: 1.25rem; font-weight: 700; color: #3E2723; margin: 0; line-height: 1.4; }
.mission-desc { font-size: 1rem; color: rgba(62,39,35,0.7); margin: 0; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mission-author { display: flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; color: #8B6F47; margin-top: auto; }



/* =====================
   Main Page Media Queries
   ===================== */
@media (max-width: 1024px) {
    .wel-sec { margin-top: -5rem; background: linear-gradient(to bottom, transparent 0%, transparent 5rem, #f1ebe5 5rem, #ffffff 80%, #ffffff 100%); }
    .wel-wave { height: 5rem; }
    .wel-grid { grid-template-columns: 1fr; gap: 2rem; min-height: auto; }
    .wel-left { grid-column: 1; grid-row: 1; width: 100%; padding-top: 0; }
    .wel-right { grid-column: 1; grid-row: 2; width: 100%; padding-top: 0; }
    .wel-icons { justify-content: center; }
    .wel-img-wrap { aspect-ratio: 16/9; border-radius: 1.25rem; max-height: none; }
    .vision-card { position: static; width: 100%; margin-top: 1rem; left: auto; bottom: auto; }
    .sub-sermon-col {width: 100%; margin-bottom: 1rem;}
    
    /* PC 패널은 숨기고 모바일 패널을 노출합니다. */
    .min-panels-desktop { display: none !important; }
    .min-panels-mobile { display: flex !important; flex-direction: column; gap: 1rem; }
}

@media (max-width: 768px) {
    .hero-sec { height: 50vh; min-height: 23.25rem; }
    .hero-indicator { bottom: 3.5rem; right: 1.5rem; }
    .hero-title { font-size: 3rem; }
	.hero-prev, .hero-next {width: 3rem;height: 3rem;}
	
	
	.sermon-grid{    grid-template-columns: 1fr;}
    .wel-sec { margin-top: -4rem; background: linear-gradient(to bottom, transparent 0%, transparent 4rem, #f1ebe5 4rem, #ffffff 80%, #ffffff 100%); }
    .wel-wave { height: 4rem; }
    .wel-grid { padding-top: 2rem; padding-bottom: 3rem; }
    .vision-card { position: static; width: 100%; margin-top: 1rem; }
    .sub-sermon-grid-wrap {margin-top: 1.5rem; margin-bottom: 1.5rem;}
    .sub-sermon-col {width: 100%;}
    .sub-sermon-label {font-size: 0.875rem;}
    .sub-sermon-title {font-size: 0.9375rem;}
	
	.wel-icons{gap: 1rem 2.5rem;}
	.sec-title-wrap {
        gap: 0.75rem; 
    }
    
    .wel-logo {
        height: 3.5rem; 
    }
    .news-sec-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .news-title-group { flex-wrap: wrap; gap: 0.75rem; }
    .news-tabs { flex-wrap: wrap; gap: 0.375rem; }
    .news-tab { font-size: 0.875rem; padding: 0.375rem 0.875rem; }
    .btn-read-more { align-self: flex-end; }
    
    .alb-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .alb-title-group { flex-wrap: wrap; gap: 0.75rem; }
    .alb-tabs { flex-wrap: wrap; gap: 0.375rem; }
    .alb-tab { font-size: 0.875rem; padding: 0.375rem 0.875rem; }
    .alb-nav { align-self: flex-end; }
	
	.mission-sec { padding: 3rem 0; }
    .mission-card { flex: 0 0 100%; }
}