/* ============================================================
   WayMCMS 페이지 빌더 컴포넌트 스타일
   에디터(canvas.styles)와 실제 사이트(_Layout.cshtml) 동일 파일 참조
   ============================================================ */

/* ============================================================
   카카오 채널 플로팅 버튼
   ============================================================ */
.cms-kakao-channel-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9000;
}

@media (max-width: 767px) {
    .cms-kakao-channel-btn {
        bottom: 16px;
        right: 16px;
    }
}

/* ============================================================
   카카오 공유하기 버튼 컴포넌트 (cms-kakao-share)
   ============================================================ */
.cms-kakao-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #FEE500;
    color: #3C1E1E;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s;
}

.cms-kakao-share:hover {
    filter: brightness(0.93);
    color: #3C1E1E;
    text-decoration: none;
}

.cms-kakao-share-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* 공유 섹션 래퍼 */
.cms-share-section {
    padding: 32px 0;
    text-align: center;
}

.cms-share-label {
    font-size: 0.875rem;
    color: #888;
    margin-bottom: 12px;
}

.cms-share-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================
   YouTube 최신 영상 컴포넌트 (cms-youtube-latest)
   ============================================================ */
.cms-youtube-section {
    padding: 60px 0;
}

.cms-youtube-header {
    text-align: center;
    margin-bottom: 40px;
}

.cms-youtube-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.cms-youtube-subtitle {
    font-size: 1rem;
    color: #666;
}

.cms-youtube-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cms-youtube-card {
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}

.cms-youtube-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
    color: inherit;
    text-decoration: none;
}

.cms-youtube-thumb-wrap {
    position: relative;
    padding-top: 56.25%;
    background: #000;
    overflow: hidden;
}

.cms-youtube-thumb-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-youtube-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.2s;
}

.cms-youtube-card:hover .cms-youtube-play-icon {
    opacity: 1;
}

.cms-youtube-play-icon svg {
    width: 52px;
    height: 52px;
    fill: #fff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

.cms-youtube-info {
    padding: 16px;
}

.cms-youtube-video-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cms-youtube-date {
    font-size: 0.8rem;
    color: #999;
}

.cms-youtube-more {
    text-align: center;
    margin-top: 32px;
}

/* 에디터 미리보기용 플레이스홀더 */
.cms-youtube-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    background: #f1f3f5;
    border-radius: 10px;
    color: #888;
    font-size: 0.95rem;
}

.cms-youtube-placeholder i { font-size: 2.5rem; color: #FF0000; }

@media (max-width: 991px) {
    .cms-youtube-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .cms-youtube-grid { grid-template-columns: 1fr; }
    .cms-youtube-title { font-size: 1.5rem; }
}

/* ============================================================
   카카오맵 컴포넌트 (cms-kakao-map, cms-map-section)
   ============================================================ */
.cms-kakao-map {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    background: #e8e8e8;
}

.cms-map-section {
    padding: 60px 0;
}

.cms-map-header {
    margin-bottom: 40px;
}

.cms-map-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
}

.cms-map-subtitle {
    font-size: 1rem;
    color: #666;
}

.cms-map-body {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cms-map-canvas {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.cms-map-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.cms-map-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border-left: 4px solid #4f46e5;
}

.cms-map-info-icon {
    width: 40px;
    height: 40px;
    background: #4f46e5;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.cms-map-info-item strong {
    display: block;
    font-size: 0.875rem;
    color: #999;
    margin-bottom: 4px;
}

.cms-map-info-item p {
    margin: 0;
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
}

@media (max-width: 767px) {
    .cms-map-info-grid {
        grid-template-columns: 1fr;
    }
    .cms-map-title {
        font-size: 1.5rem;
    }
}

/* ────────────────────────────────────────────
   히어로 섹션 공통
───────────────────────────────────────────── */
.cms-hero-section {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cms-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}x

.cms-hero-inner {
    width: 100%;
}

.cms-hero-content {
    position: relative;
    z-index: 1;
}

/* 아이캐처 문구 */
.cms-hero-eyebrow {
    font-size: 0.875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 1rem;
    display: block;
}

/* 메인 타이틀 */
.cms-hero-title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

/* 서브 타이틀 */
.cms-hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 2rem;
}

/* 버튼 그룹 */
.cms-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ────────────────────────────────────────────
   히어로 변형: 풀스크린
───────────────────────────────────────────── */
.cms-hero-section.hero-fullscreen {
    min-height: 100vh;
}

.cms-hero-section.hero-fullscreen .cms-hero-inner {
    min-height: 100vh;
}

.cms-hero-section.hero-fullscreen .cms-hero-content {
    color: #fff;
    text-align: center;
}

.cms-hero-section.hero-fullscreen .cms-hero-buttons {
    justify-content: center;
}

.cms-hero-section.hero-fullscreen .btn-hero-primary {
    border-radius: 50px;
}

.cms-hero-section.hero-fullscreen .btn-hero-outline {
    border-radius: 50px;
    color: #fff;
    border-color: #fff;
    background: transparent;
}

.cms-hero-section.hero-fullscreen .btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ────────────────────────────────────────────
   히어로 변형: 분할형
───────────────────────────────────────────── */
.cms-hero-section.hero-split {
    min-height: 600px;
    background-color: #f8f9fa;
    display: block; /* flex 해제 — 좌우 col이 직접 높이 결정 */
}

.cms-hero-section.hero-split .cms-hero-inner {
    min-height: 600px;
}

.cms-hero-section.hero-split .cms-hero-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    background-color: #f8f9fa;
}

.cms-hero-section.hero-split .cms-hero-image-col {
    min-height: 400px;
    background-size: cover;
    background-position: center;
}

.cms-hero-section.hero-split .cms-hero-content {
    text-align: left;
}

.cms-hero-section.hero-split .cms-hero-eyebrow {
    color: #6366f1;
    opacity: 1;
    font-weight: 600;
}

.cms-hero-section.hero-split .cms-hero-title {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    color: #1e293b;
}

.cms-hero-section.hero-split .cms-hero-subtitle {
    color: #64748b;
    line-height: 1.8;
    opacity: 1;
}

/* ────────────────────────────────────────────
   히어로 변형: 미니멀 (내부 페이지 타이틀)
───────────────────────────────────────────── */
.cms-hero-section.hero-minimal {
    min-height: 400px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.cms-hero-section.hero-minimal .cms-hero-inner {
    min-height: 400px;
}

.cms-hero-section.hero-minimal .cms-hero-content {
    color: #fff;
    text-align: center;
}

.cms-hero-section.hero-minimal .cms-hero-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
}

.cms-hero-section.hero-minimal .cms-hero-subtitle {
    font-size: 1.05rem;
}

.cms-hero-section.hero-minimal .breadcrumb {
    background: transparent;
    opacity: 0.85;
    justify-content: center;
}

.cms-hero-section.hero-minimal .breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.cms-hero-section.hero-minimal .breadcrumb-item.active {
    color: #fff;
}

.cms-hero-section.hero-minimal .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.6);
}


/* ============================================================
   CTA (Call To Action) 섹션
   ============================================================ */

/* ── 공통 ── */
.cms-cta-section {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cms-cta-content {
    position: relative;
    z-index: 1;
}

.cms-cta-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.85rem;
}

.cms-cta-title {
    font-size: clamp(1.6rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.cms-cta-desc {
    font-size: 1.05rem;
    line-height: 1.75;
    opacity: 0.88;
    margin-bottom: 2rem;
}

.cms-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* 흰색 채우기 버튼 */
.cms-cta-btn-primary {
    background-color: #fff;
    color: #1e293b;
    border: 2px solid #fff;
    border-radius: 50px;
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}
.cms-cta-btn-primary:hover {
    background-color: transparent;
    color: #fff;
}

/* 테두리(Ghost) 버튼 */
.cms-cta-btn-ghost {
    background-color: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 50px;
    font-weight: 600;
    transition: border-color 0.2s, background 0.2s;
}
.cms-cta-btn-ghost:hover {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ── 변형: 중앙형 ── */
.cms-cta-section.cta-center {
    padding: 6rem 0;
    background-color: #6366f1;
    color: #fff;
}

.cms-cta-section.cta-center .cms-cta-content {
    color: #fff;
}

.cms-cta-section.cta-center .cms-cta-buttons {
    justify-content: center;
}

/* ── 변형: 분할형 ── */
.cms-cta-section.cta-split {
    padding: 4rem 0;
    background-color: #1e293b;
    color: #fff;
}

.cms-cta-section.cta-split .cms-cta-content {
    color: #fff;
}

.cms-cta-section.cta-split .cms-cta-desc {
    opacity: 0.75;
    margin-bottom: 0;
}

.cms-cta-section.cta-split .cms-cta-btn-col {
    text-align: center;
    padding-top: 1.5rem;
}

@media (min-width: 992px) {
    .cms-cta-section.cta-split .cms-cta-btn-col {
        text-align: right;
        padding-top: 0;
    }
}

.cms-cta-section.cta-split .cms-cta-btn-primary {
    background-color: #6366f1;
    border-color: #6366f1;
    color: #fff;
    border-radius: 8px;
}
.cms-cta-section.cta-split .cms-cta-btn-primary:hover {
    background-color: #4f52d9;
    border-color: #4f52d9;
    color: #fff;
}

.cms-cta-link {
    display: inline-block;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}
.cms-cta-link:hover {
    color: #fff;
}

/* ── 변형: 배너형 ── */
.cms-cta-section.cta-banner {
    padding: 7rem 0;
    color: #fff;
    min-height: 400px;
    display: flex;
    align-items: center;
}

.cms-cta-section.cta-banner .cms-cta-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    z-index: 0;
}

.cms-cta-section.cta-banner .cms-cta-content {
    color: #fff;
}

.cms-cta-section.cta-banner .cms-cta-buttons {
    justify-content: center;
}


/* ============================================================
   카드 그리드 섹션
   ============================================================ */

/* ── 공통 섹션 ── */
.cms-card-grid-section {
    padding: 5rem 0;
    background-color: #fff;
}

.cms-card-grid-header {
    margin-bottom: 3rem;
}

.cms-card-grid-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6366f1;
    margin-bottom: 0.6rem;
}

.cms-card-grid-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.cms-card-grid-subtitle {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.7;
}

/* ── 공통 카드 ── */
.cms-card {
    height: 100%;
    border-radius: 12px;
    background: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}

.cms-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* ── 아이콘 카드 ── */
.cms-card-grid-section.card-grid-icon {
    background-color: #f8fafc;
}

.cms-card-icon {
    padding: 2.25rem 1.75rem;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.cms-card-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.cms-card-icon-wrap i {
    font-size: 1.5rem;
    color: #fff;
}

.cms-card-icon .cms-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.6rem;
}

.cms-card-icon .cms-card-desc {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* ── 이미지 카드 ── */
.cms-card-image {
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.cms-card-img-wrap {
    position: relative;
    overflow: hidden;
}

.cms-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.cms-card-image:hover .cms-card-img {
    transform: scale(1.04);
}

.cms-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #6366f1;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 50px;
}

.cms-card-body {
    padding: 1.5rem;
}

.cms-card-meta {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}

.cms-card-image .cms-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.cms-card-image .cms-card-desc {
    font-size: 0.92rem;
    color: #64748b;
    line-height: 1.65;
    margin-bottom: 1rem;
}

.cms-card-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6366f1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}

.cms-card-link:hover {
    gap: 10px;
    color: #4f52d9;
}

/* ── 통계 카드 ── */
.cms-card-grid-section.card-grid-stats {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.cms-card-stat {
    padding: 2.5rem 1.5rem;
    text-align: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.cms-stat-number {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}

.cms-stat-unit {
    font-size: 60%;
    font-weight: 700;
    color: #818cf8;
}

.cms-stat-label {
    font-size: 0.9rem;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* ── 팀 소개 카드 ── */
.cms-card-grid-section.card-grid-team {
    background-color: #f8fafc;
}

.cms-card-team {
    padding: 2rem 1.25rem;
    text-align: center;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.cms-card-avatar {
    margin-bottom: 1.25rem;
}

.cms-card-avatar-img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e2e8f0;
    transition: border-color 0.2s;
}

.cms-card-team:hover .cms-card-avatar-img {
    border-color: #6366f1;
}

.cms-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.cms-card-role {
    font-size: 0.85rem;
    color: #6366f1;
    font-weight: 600;
    margin-bottom: 0.85rem;
}

.cms-card-social {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.cms-social-link {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.cms-social-link:hover {
    background: #6366f1;
    color: #fff;
}


/* ============================================================
   교회학교 부서 소개 섹션
   ============================================================ */

/* ── 공통 ── */
.cms-dept-section {
    padding: 5rem 0;
    background-color: #fff;
}

.cms-dept-header {
    margin-bottom: 3rem;
}

.cms-dept-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6366f1;
    margin-bottom: 0.5rem;
}

.cms-dept-section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.cms-dept-section-desc {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.7;
}

/* ── 부서 그리드 카드 ── */
.cms-dept-section.dept-grid {
    background-color: #f8fafc;
}

.cms-dept-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    height: 100%;
    transition: transform 0.2s, box-shadow 0.2s;
}

.cms-dept-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

/* 사진 영역 */
.cms-dept-card-photo-wrap {
    position: relative;
    overflow: hidden;
    height: 200px;
    background: #e2e8f0;
}

.cms-dept-card-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s;
}

.cms-dept-card:hover .cms-dept-card-photo {
    transform: scale(1.05);
}

/* 사진 없을 때 플레이스홀더 */
.cms-dept-card-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #818cf8);
}

.cms-dept-card-photo-placeholder i {
    font-size: 3rem;
    color: rgba(255,255,255,0.8);
}

/* 사진 위 그라디언트 오버레이 */
.cms-dept-card-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* 배지 위치 */
.cms-dept-card-badge-wrap {
    position: absolute;
    bottom: 12px;
    left: 14px;
}

.cms-dept-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    padding: 4px 16px;
    border-radius: 50px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.3);
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* 1열일 때 사진 높이 확장 */
.cms-dept-grid-section[data-cols="1"] .cms-dept-card-photo-wrap {
    height: 320px;
}

/* 4열일 때 사진 높이 축소 */
.cms-dept-grid-section[data-cols="4"] .cms-dept-card-photo-wrap {
    height: 160px;
}

.cms-dept-card-body {
    padding: 1.5rem;
}

.cms-dept-motto {
    font-size: 0.9rem;
    font-style: italic;
    color: #6366f1;
    font-weight: 600;
    margin-bottom: 1.1rem;
    line-height: 1.5;
}

/* 부서 그리드 정보 목록 */
.cms-dept-info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.cms-dept-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.5;
}

.cms-dept-info-list li i {
    color: #94a3b8;
    width: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.cms-dept-staff-row {
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.cms-dept-staff-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    display: block;
    margin-bottom: 0.5rem;
}

.cms-dept-staff-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cms-dept-staff-chip {
    font-size: 0.78rem;
    background: #f1f5f9;
    color: #475569;
    padding: 3px 10px;
    border-radius: 50px;
    font-weight: 500;
}

/* ── 부서 상세 소개 ── */
.cms-dept-section.dept-detail {
    background-color: #fff;
}

.cms-dept-profile {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}

.cms-dept-profile-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.cms-dept-profile-name-box {
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.cms-dept-name {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.25rem;
}

.cms-dept-target {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    margin: 0;
}

/* 표어 박스 */
.cms-dept-motto-box {
    background: linear-gradient(135deg, #ede9fe, #e0e7ff);
    border-left: 4px solid #6366f1;
    border-radius: 0 12px 12px 0;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
}

.cms-dept-motto-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #6366f1;
    display: block;
    margin-bottom: 0.35rem;
}

.cms-dept-motto-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: #3730a3;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
}

/* 부서 소개 텍스트 */
.cms-dept-sub-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}

.cms-dept-intro {
    margin-bottom: 2rem;
}

.cms-dept-intro-text {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.85;
    margin: 0;
}

/* 예배 정보 아이템 */
.cms-dept-info-block {
    margin-bottom: 2rem;
}

.cms-dept-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: #f8fafc;
    border-radius: 10px;
    padding: 0.9rem 1rem;
}

.cms-dept-info-icon {
    font-size: 1.1rem;
    color: #6366f1;
    margin-top: 2px;
    flex-shrink: 0;
}

.cms-dept-info-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #94a3b8;
    margin: 0 0 0.2rem;
}

.cms-dept-info-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

/* 섬기는 분들 */
.cms-dept-staff-block {
    margin-bottom: 0;
}

.cms-dept-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.cms-dept-staff-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #f8fafc;
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.cms-dept-staff-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.cms-dept-staff-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.1rem;
}

.cms-dept-staff-role {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0;
}

/* ── 예배 시간표 ── */
.cms-dept-section.dept-schedule {
    background-color: #f8fafc;
}

.cms-dept-schedule-wrap {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}

.cms-dept-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.92rem;
}

.cms-dept-table thead tr {
    background: #1e293b;
    color: #fff;
}

.cms-dept-table th {
    padding: 1rem 1.25rem;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    text-align: left;
}

.cms-dept-table td {
    padding: 1rem 1.25rem;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    white-space: nowrap;
}

.cms-dept-table tbody tr:last-child td {
    border-bottom: none;
}

.cms-dept-table tbody tr:hover td {
    background: #f8fafc;
}

.cms-dept-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}


/* ============================================================
   갤러리 / 미디어 섹션
   ============================================================ */

/* ── 공통 ── */
.cms-gallery-section {
    padding: 5rem 0;
}

.cms-gallery-header {
    margin-bottom: 3rem;
}

.cms-gallery-eyebrow {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6366f1;
    margin-bottom: 0.5rem;
}

.cms-gallery-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.cms-gallery-desc {
    font-size: 1.05rem;
    color: #64748b;
    max-width: 560px;
    margin: 0 auto;
}

/* ── 갤러리 아이템 (공통) ── */
.cms-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    background: #e2e8f0;
}

.cms-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    gap: 0.5rem;
}

.cms-gallery-item:hover .cms-gallery-overlay {
    opacity: 1;
}

.cms-gallery-zoom-icon {
    font-size: 1.6rem;
    color: #fff;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.cms-gallery-item:hover .cms-gallery-zoom-icon {
    transform: scale(1);
}

.cms-gallery-caption {
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
    padding: 0 1rem;
    line-height: 1.4;
}

/* ── 균등 그리드 갤러리 ── */
.cms-gallery-grid-section {}

.cms-gallery-img-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.cms-gallery-img-inner .cms-gallery-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.cms-gallery-img-inner .cms-gallery-overlay {
    border-radius: 12px;
}

.cms-gallery-item:hover .cms-gallery-img {
    transform: scale(1.06);
}

/* ── 채움형 이미지 (매거진·마소닌리) ── */
.cms-gallery-img-fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cms-gallery-item:hover .cms-gallery-img-fill {
    transform: scale(1.05);
}

/* ── 매거진형 (Featured) ── */
.gallery-featured {}

.cms-gallery-featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 0.75rem;
}

.cms-gallery-featured-main {
    grid-column: 1;
    grid-row: 1;
}

.cms-gallery-featured-main .cms-gallery-item {
    height: 500px;
}

.cms-gallery-featured-sub {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.cms-gallery-featured-sub .cms-gallery-item {
    height: 240px;
}

.cms-gallery-more-overlay {
    background: rgba(15, 23, 42, 0.72);
    opacity: 1;
    cursor: pointer;
}

.cms-gallery-more-text {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

@media (max-width: 767px) {
    .cms-gallery-featured-grid {
        grid-template-columns: 1fr;
    }
    .cms-gallery-featured-main {
        grid-column: 1;
    }
    .cms-gallery-featured-main .cms-gallery-item {
        height: 260px;
    }
    .cms-gallery-featured-sub {
        grid-column: 1;
    }
    .cms-gallery-featured-sub .cms-gallery-item {
        height: 130px;
    }
}

/* ── 핀터레스트형 (Masonry CSS columns) ── */
.gallery-masonry {}

.cms-masonry-grid {
    columns: 3;
    column-gap: 0.75rem;
}

.cms-masonry-grid .cms-gallery-item {
    break-inside: avoid;
    margin-bottom: 0.75rem;
    border-radius: 12px;
    overflow: hidden;
}

.cms-masonry-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

.cms-gallery-item:hover .cms-masonry-img {
    transform: scale(1.04);
}

@media (max-width: 767px) {
    .cms-masonry-grid {
        columns: 2;
    }
}

@media (max-width: 480px) {
    .cms-masonry-grid {
        columns: 1;
    }
}

/* ── 동영상 그리드 ── */
.gallery-video {}

.cms-video-item {
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
}

.cms-video-ratio {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.cms-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.cms-video-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0.75rem 1rem 0.25rem;
    line-height: 1.4;
}

.cms-video-date {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0 1rem 0.9rem;
}


/* ────────────────────────────────────────────
   히스토리 / 연혁 섹션 공통
───────────────────────────────────────────── */
.cms-history-section {
    padding: 80px 0;
}

.cms-history-header {
    margin-bottom: 60px;
}

.cms-history-eyebrow {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #6366f1;
    margin-bottom: 0.5rem;
}

.cms-history-section-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #1e293b;
}

.cms-history-section-desc {
    color: #64748b;
    max-width: 560px;
    margin: 0 auto;
}

/* ── 세로 타임라인 ── */
.cms-history-vertical-wrap {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}

.cms-history-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #e2e8f0;
    transform: translateX(-50%);
    z-index: 0;
}

.cms-history-item {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-bottom: 48px;
}

.cms-history-dot {
    position: absolute;
    left: 50%;
    top: 14px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translateX(-50%);
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px currentColor;
    z-index: 1;
    background: #6366f1;
}

.cms-history-item.cms-history-right {
    flex-direction: row;
    padding-left: calc(50% + 32px);
}

.cms-history-item.cms-history-left {
    flex-direction: row-reverse;
    padding-right: calc(50% + 32px);
}

.cms-history-item.cms-history-left .cms-history-content {
    text-align: right;
}

.cms-history-content {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    width: 100%;
}

.cms-history-year {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    color: #6366f1;
}

.cms-history-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #1e293b;
}

.cms-history-desc {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* ── 교차형 타임라인 ── */
.cms-history-zz-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cms-history-zz-item {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: center;
    min-height: 220px;
}

.cms-history-zz-item.reverse .cms-history-zz-media { order: 3; }
.cms-history-zz-item.reverse .cms-history-zz-dot-wrap { order: 2; }
.cms-history-zz-item.reverse .cms-history-zz-text { order: 1; text-align: right; }

.cms-history-zz-media {
    padding: 16px;
}

.cms-history-zz-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
}

.cms-history-zz-placeholder {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cms-history-zz-dot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
}

.cms-history-zz-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #e2e8f0;
    left: 50%;
    transform: translateX(-50%);
}

.cms-history-zz-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px currentColor;
    position: relative;
    z-index: 1;
    margin-top: calc(50% - 9px);
    background: #6366f1;
}

.cms-history-zz-text {
    padding: 16px 24px;
}

/* ── 연혁 카드형 ── */
.cms-history-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border-top: 4px solid #6366f1;
    transition: box-shadow 0.2s, transform 0.2s;
}

.cms-history-card:hover {
    box-shadow: 0 8px 24px rgba(99,102,241,0.12);
    transform: translateY(-3px);
}

.cms-history-card-year {
    font-size: 1.5rem;
    font-weight: 900;
    color: #6366f1;
    margin-bottom: 16px;
}

.cms-history-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cms-history-card-list li {
    font-size: 0.88rem;
    color: #475569;
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}

.cms-history-card-list li::before {
    content: '·';
    position: absolute;
    left: 4px;
    color: #6366f1;
    font-weight: 900;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .cms-history-vertical-wrap { max-width: 100%; }
    .cms-history-line { left: 20px; }
    .cms-history-item.cms-history-right,
    .cms-history-item.cms-history-left {
        flex-direction: row;
        padding-left: 52px;
        padding-right: 0;
    }
    .cms-history-item.cms-history-left .cms-history-content { text-align: left; }
    .cms-history-dot { left: 20px; }

    .cms-history-zz-item { grid-template-columns: 1fr; }
    .cms-history-zz-item .cms-history-zz-dot-wrap { display: none; }
    .cms-history-zz-item.reverse .cms-history-zz-media { order: 0; }
    .cms-history-zz-item.reverse .cms-history-zz-text  { order: 1; text-align: left; }
}


/* ────────────────────────────────────────────
   카운트다운 타이머
───────────────────────────────────────────── */
.cms-countdown-wrap {
    text-align: center;
    padding: 40px 20px;
}

.cms-countdown-label {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 20px;
    font-weight: 500;
}

.cms-countdown-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cms-cd-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1e293b;
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 72px;
}

.cms-cd-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cms-cd-unit {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 6px;
    letter-spacing: 0.05em;
}

.cms-cd-sep {
    font-size: 2rem;
    font-weight: 900;
    color: #475569;
    line-height: 1;
    margin-bottom: 18px;
}

/* 히어로형 */
.cms-countdown-hero .cms-cd-box {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
}

.cms-countdown-hero .cms-cd-sep {
    color: rgba(255,255,255,0.4);
}

.cms-countdown-hero .cms-countdown-label {
    color: #c7d2fe;
}

/* ============================================================
   교회 메인 섹션 (firstch-sections.plugin)
   ============================================================ */

/* ── 1. 메인 슬라이더 섹션 ── */
.fc-main-slider-section {
    padding: 0;
    margin: 0;
    line-height: 0;
}

/* ── 2. 교회 연혁 섹션 ── */
.fc-church-history {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fc-history-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ── 3. Church Info 섹션 ── */
.fc-church-info {
    position: relative;
    overflow: hidden;
}

.fc-church-info-wrap {
    display: flex;
    min-height: 480px;
}

.fc-church-info-left {
    flex: 0 0 42%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
}

.fc-church-info-right {
    flex: 1;
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

.fc-info-header {
    margin-bottom: 2.5rem;
}

.fc-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 480px;
}

.fc-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 16px;
    text-decoration: none;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    transition: all 0.25s;
}

.fc-info-item:hover {
    background: #1e40af;
    border-color: #1e40af;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(30,64,175,0.25);
}

.fc-info-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 1.3rem;
    transition: inherit;
}

.fc-info-item:hover .fc-info-icon-box {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.fc-info-label {
    font-size: 0.95rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .fc-church-info-wrap {
        flex-direction: column;
    }
    .fc-church-info-left {
        flex: none;
        height: 220px;
    }
    .fc-church-info-right {
        padding: 40px 24px;
    }
    .fc-info-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }
}

/* ── 4. 문화센터 섹션 ── */
.fc-culture-center {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── 5. 다음세대 섹션 ── */
.fc-next-gen {
    position: relative;
}

.fc-next-gen-header {
    margin-bottom: 3rem;
}

.fc-next-gen-col {
    padding: 24px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    height: 100%;
}

.fc-next-gen-col-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
}

.fc-next-gen-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fc-next-gen-list li {
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.fc-next-gen-list li:last-child {
    border-bottom: none;
}

.fc-next-gen-list a {
    display: block;
    padding: 9px 4px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.fc-next-gen-list a:hover {
    color: #fff;
    padding-left: 10px;
}

/* ── 6. 게스트하우스 섹션 ── */
.fc-guest-house {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fc-gh-btn {
    display: inline-flex;
    align-items: center;
    padding: 11px 24px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s;
    cursor: pointer;
}

.fc-gh-btn-outline {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.6);
    color: #fff;
}

.fc-gh-btn-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    color: #fff;
}

/* ── 7. 예배/찬양 + 교회소식 섹션 (fc-worship-news) ── */
.fc-worship-news {
    background: #fff;
}

/* 상단: 예배 버튼 그리드 */
.fc-worship-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    min-height: 260px;
}

@media (max-width: 991px) {
    .fc-worship-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .fc-worship-youtube {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    .fc-worship-grid {
        grid-template-columns: 1fr;
    }
    .fc-worship-youtube {
        grid-column: auto;
    }
}

.fc-worship-youtube {
    background: #0f172a;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: stretch;
    transition: background 0.25s;
}

.fc-worship-youtube:hover {
    background: #1e293b;
    color: #fff;
}

.fc-worship-youtube-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px 36px;
    width: 100%;
}

.fc-worship-btn {
    position: relative;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    min-height: 180px;
}

.fc-worship-btn-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    transition: background 0.25s;
}

.fc-worship-btn:hover .fc-worship-btn-overlay {
    background: rgba(0,0,0,0.25);
}

.fc-worship-btn-label {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: 16px 20px;
    letter-spacing: 0.02em;
}

/* 하단: 교회소식 */
.fc-church-news-section {
    padding: 48px 0 56px;
    background: #fff;
}

.fc-church-news-header {
    margin-bottom: 2rem;
}

.fc-church-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 767px) {
    .fc-church-news-grid {
        grid-template-columns: 1fr;
    }
}

.fc-news-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.2s;
}

.fc-news-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.fc-news-card-inner {
    flex: 1;
    padding: 24px 24px 16px;
}

.fc-news-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.fc-news-more {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 16px;
    background: #f8fafc;
    color: #64748b;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

.fc-news-more:hover {
    background: #e2e8f0;
    color: #1e40af;
}

/* ── 8. 동적 갤러리 슬라이더 (gallery-slider) ── */
.gallery-slider .cms-gallery-header {
    margin-bottom: 2rem;
}

.cms-gallery-slider-wrap {
    position: relative;
}

.cms-dynamic-gallery-slider {
    min-height: 220px;
}

.cms-gallery-slider-prev,
.cms-gallery-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.cms-gallery-slider-prev:hover,
.cms-gallery-slider-next:hover {
    background: rgba(0,0,0,0.8);
}

.cms-gallery-slider-prev {
    right: 0;
}

.cms-gallery-slider-next {
    left: 0;
}

/* ── 9. 온라인헌금 섹션 (fc-online-office) ── */
.fc-online-office {
    overflow: hidden;
}

.fc-online-office-wrap {
    display: flex;
    min-height: 320px;
}

.fc-online-office-left {
    flex: 0 0 28%;
    background: #0f172a;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fc-online-office-center {
    flex: 0 0 24%;
    background-size: cover;
    background-position: center;
    min-height: 200px;
}

.fc-online-office-right {
    flex: 1;
    background: #f8fafc;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 991px) {
    .fc-online-office-wrap {
        flex-direction: column;
    }
    .fc-online-office-left,
    .fc-online-office-right {
        flex: none;
        padding: 32px 24px;
    }
    .fc-online-office-center {
        flex: none;
        height: 200px;
    }
    .fc-online-office-left {
        flex-basis: auto;
    }
}

/* ============================================================
   설교 하이라이트 섹션 (dynamic-sermon.plugin)
   ============================================================ */
.fc-sermon-highlight {
    display: flex;
    min-height: 480px;
    overflow: hidden;
}

.fc-sermon-left {
    flex: 0 0 48%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
}

.fc-sermon-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.cms-dynamic-sermon {
    width: 100%;
    min-height: 300px;
}

/* 에디터 플레이스홀더 */
.fc-sermon-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 40px;
    height: 100%;
    color: #fff;
}

.fc-sermon-placeholder-eyebrow {
    font-size: 1rem;
    letter-spacing: 0.15em;
    opacity: 0.65;
    margin: 0 0 16px;
    font-style: italic;
}

.fc-sermon-placeholder-title {
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 20px;
}

.fc-sermon-placeholder-meta {
    font-size: 0.9rem;
    opacity: 0.7;
    margin: 0 0 24px;
}

.fc-sermon-placeholder-hint {
    font-size: 0.78rem;
    opacity: 0.45;
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 16px;
}

/* 실제 렌더링 시 (서버사이드) */
.cms-dynamic-sermon .fc-sermon-content {
    padding: 48px 40px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.cms-dynamic-sermon .fc-sermon-eyebrow {
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    opacity: 0.65;
    margin-bottom: 16px;
    font-style: italic;
}

.cms-dynamic-sermon .fc-sermon-title {
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 16px;
}

.cms-dynamic-sermon .fc-sermon-preacher {
    font-size: 1rem;
    opacity: 0.85;
    margin-bottom: 12px;
    font-weight: 500;
}

.cms-dynamic-sermon .fc-sermon-meta {
    font-size: 0.9rem;
    opacity: 0.65;
    margin-bottom: 28px;
}

.cms-dynamic-sermon .fc-sermon-meta span + span::before {
    content: '|';
    margin: 0 10px;
    opacity: 0.4;
}

.cms-dynamic-sermon .fc-sermon-more {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    transition: all 0.25s;
}

.cms-dynamic-sermon .fc-sermon-more:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
}

@media (max-width: 767px) {
    .fc-sermon-highlight {
        flex-direction: column;
    }
    .fc-sermon-left {
        flex: none;
        height: 240px;
    }
    .fc-sermon-placeholder,
    .cms-dynamic-sermon .fc-sermon-content {
        padding: 36px 24px;
    }
}

/* ============================================================
   새가족 환영 프로세스 섹션 (welcome-steps.plugin)
   ============================================================ */
.fc-welcome-steps {
    display: flex;
    min-height: 460px;
    overflow: hidden;
}

.fc-welcome-left {
    flex: 1;
    display: flex;
    align-items: stretch;
}

.fc-welcome-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
}

.fc-welcome-content {
    padding: 60px 52px;
    width: 100%;
}

.fc-welcome-right {
    flex: 0 0 44%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 280px;
}

.fc-welcome-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 6px;
    font-style: italic;
}

.fc-welcome-subtitle {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 2.5rem;
    font-weight: 400;
}

/* 단계 플로우 */
.fc-steps-flow {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    row-gap: 24px;
}

.fc-step-item {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.fc-step-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: background 0.25s, color 0.25s;
}

.fc-welcome-link:hover .fc-step-icon-wrap {
    background: #3730a3;
    color: #fff;
}

.fc-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fc-step-num {
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.05em;
}

.fc-step-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.fc-step-sublabel {
    font-size: 0.78rem;
    color: #64748b;
}

.fc-step-arrow {
    padding: 0 12px;
    color: #cbd5e1;
    font-size: 1rem;
    flex-shrink: 0;
}

/* 4단계: 작은 화면에서 2열 줄바꿈 */
.fc-steps-4 {
    max-width: 560px;
}

@media (max-width: 1199px) {
    .fc-steps-flow {
        flex-direction: column;
        align-items: flex-start;
    }
    .fc-step-arrow {
        padding: 0 0 0 30px;
        transform: rotate(90deg);
    }
}

@media (max-width: 767px) {
    .fc-welcome-steps {
        flex-direction: column;
    }
    .fc-welcome-right {
        flex: none;
        height: 220px;
    }
    .fc-welcome-content {
        padding: 40px 24px;
    }
}

/* ── 게시판 미디어 기능 ─────────────────────────────────────────── */
/* 이미지 라이트박스 */
#cms-lightbox { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; }
#cms-lightbox.active { display:flex; }
#cms-lb-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.85); }
#cms-lb-content { position:relative; z-index:1; max-width:90vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; }
#cms-lb-img { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:4px; box-shadow:0 4px 32px rgba(0,0,0,.5); }
#cms-lb-caption { color:#ddd; font-size:.85rem; margin-top:.5rem; max-width:90vw; text-align:center; }
#cms-lb-close { position:fixed; top:1rem; right:1.5rem; background:none; border:none; color:#fff; font-size:2.5rem; cursor:pointer; line-height:1; z-index:2; }
#cms-lb-prev, #cms-lb-next { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15); border:none; color:#fff; font-size:2rem; cursor:pointer; padding:.25rem .75rem; border-radius:4px; z-index:2; }
#cms-lb-prev { left:1rem; }
#cms-lb-next { right:1rem; }
#cms-lb-prev:hover, #cms-lb-next:hover, #cms-lb-close:hover { background:rgba(255,255,255,.3); }

/* YouTube/Vimeo 임베드 */
.video-embed-wrap { margin: 1rem 0; border-radius: 8px; overflow: hidden; }

/* ── 인쇄 최적화 (@media print) ──────────────────────────────────── */
@media print {
    /* 숨길 요소 */
    .navbar, .sidebar, header, footer,
    .btn, .btn-group,
    .board-search-form, .post-nav, .share-bar,
    #board-comments, .comment-section,
    .pagination, nav[aria-label="pagination"],
    .pdf-viewer-wrap { display: none !important; }

    /* 본문 전체 너비 */
    body { font-size: 12pt; color: #000; background: #fff; }
    .container, .container-fluid { max-width: 100% !important; padding: 0 !important; }
    .card { border: none !important; box-shadow: none !important; }
    .card-header { background: none !important; border-bottom: 1px solid #000 !important; }

    /* 이미지 페이지 넘침 방지 */
    img { max-width: 100% !important; page-break-inside: avoid; }

    /* 링크 URL 표시 */
    a[href]:after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
    a.btn:after, .share-btn:after { content: none; }
}


/* ────────────────────────────────────────────
   이미지 오버레이 컴포넌트
───────────────────────────────────────────── */
.cms-img-overlay {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    height: 260px;
    display: block;
    width: 100%;
}

/* 단색 딤 레이어 */
.cms-img-overlay-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* 그라디언트 레이어 */
.cms-img-overlay-gradient {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* 텍스트 레이어 */
.cms-img-overlay-text {
    position: absolute;
    z-index: 2;
    color: #ffffff;
    padding: 18px 20px;
}

.cms-iov-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.cms-iov-subtitle {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.88;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* 호버 줌 효과 */
.cms-img-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
    z-index: -1;
}

.cms-img-overlay:hover {
    background-size: 108%;
    transition: background-size 0.4s ease;
}


/* ────────────────────────────────────────────
   히어로 — 콘텐츠 박스형 (배경이미지 + 컬러 박스 절대 배치)
───────────────────────────────────────────── */
.cms-hero-section.hero-content-box {
    min-height: 520px;
}

/* spacer 불필요 */
.hero-content-box .cms-hcb-spacer {
    display: none;
}

/* 컬러 콘텐츠 박스 — 배경 위에 절대 배치 (background는 인라인 스타일로 관리) */
.cms-hcb-box {
    position: absolute;
    top: 40px;
    bottom: 40px;
    width: 440px;
    max-width: 45%;
    color: #fff;
    padding: 48px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    z-index: 1;
}

/* 우측 박스 */
.hero-content-box:not(.hero-content-box--left) .cms-hcb-box {
    right: 40px;
}

/* 좌측 박스 */
.hero-content-box--left .cms-hcb-box {
    left: 40px;
}

/* 박스 내부 텍스트 */
.cms-hcb-box .cms-hero-eyebrow {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0;
    margin: 0;
    font-style: italic;
}

.cms-hcb-intro {
    font-size: 0.95rem;
    margin: 0;
    color: rgba(255,255,255,0.92);
    line-height: 1.6;
}

.cms-hcb-body {
    font-size: 0.88rem;
    margin: 0;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
}

/* 버튼 그룹 */
.cms-hcb-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.cms-hcb-btn {
    display: inline-block;
    padding: 10px 22px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 2px;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

.cms-hcb-btn-outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.7);
}

.cms-hcb-btn-outline:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    color: #fff;
}

.cms-hcb-btn-solid {
    background: #fff;
    color: #c0533a;
    border: 1.5px solid #fff;
}

.cms-hcb-btn-solid:hover {
    background: rgba(255,255,255,0.85);
}

/* 반응형 */
@media (max-width: 991px) {
    .cms-hcb-box {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 48px 28px;
    }
    .cms-hcb-spacer { display: none; }
    .hero-content-box .cms-hero-inner { flex-direction: column; justify-content: flex-end; }
}


/* ────────────────────────────────────────────
   콘텐츠 쇼케이스
───────────────────────────────────────────── */
.cms-showcase-section {
    padding: 80px 0;
    background: #fff;
}

/* ── 이미지 래퍼 (비율 유지) ── */
.cms-showcase-img-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.cms-showcase-img-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── 좌측 장식 타이틀 (3단 전용) ── */
.cms-showcase-deco-col {
    border-right: 1px solid #e2e8f0;
    padding-right: 40px;
}

.cms-showcase-deco {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: #1e293b;
    line-height: 1.3;
    margin-bottom: 24px;
    font-style: italic;
}

.cms-showcase-deco-sub {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0;
}

/* ── 콘텐츠 영역 ── */
.cms-showcase-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 12px;
}

.cms-showcase-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
    line-height: 1.4;
}

.cms-showcase-desc {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* ── 항목 정보 dl ── */
.cms-showcase-dl {
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
}

.cms-showcase-dl dt {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}

.cms-showcase-dl dd {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0;
}

/* ── 더보기 링크 ── */
.cms-showcase-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}

.cms-showcase-link:hover {
    color: #6366f1;
    border-color: #6366f1;
}

.cms-showcase-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s;
}

.cms-showcase-link:hover .cms-showcase-arrow {
    transform: translateX(4px);
}

/* ── 반응형 ── */
@media (max-width: 991px) {
    .cms-showcase-deco-col {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-right: 0;
        padding-bottom: 32px;
        margin-bottom: 8px;
    }
    .cms-showcase-deco {
        font-size: 1.6rem;
    }
}


/* ────────────────────────────────────────────
   쇼케이스 — 5:5 타이틀+이미지 블록
───────────────────────────────────────────── */

/* 배경 래퍼: Style Manager에서 background-color / background-image 지정 */
.cms-sc-bg-wrap {
    width: 100%;
}

/* 텍스트 컬럼 */
.cms-sc-text-col {
    min-height: 360px;
}

.cms-sc-main-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    margin-bottom: 16px;
}

.cms-sc-sub-title {
    font-size: 1rem;
    color: #475569;
    line-height: 1.8;
    margin: 0;
}

/* 이미지 컬럼 */
.cms-sc-img-col {
    min-height: 360px;
    overflow: hidden;
}

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

/* 반응형 */
@media (max-width: 767px) {
    .cms-sc-text-col,
    .cms-sc-img-col {
        min-height: 240px;
    }
    .cms-sc-main-title {
        font-size: 1.5rem;
    }
}


/* ────────────────────────────────────────────
   게시판 위젯 공통

   --cms-accent는 테넌트 부트스트랩 테마의 --bs-primary를 그대로
   따라간다 (companyA는 #6B35A5). 테넌트가 --bs-primary를 정의하지
   않으면 기존 인디고(#6366f1)로 폴백.
───────────────────────────────────────────── */
.cms-dynamic-list,
.cms-widget-card,
.cms-widget-numbered,
.cms-widget-timeline {
    --cms-accent: var(--bs-primary, #6366f1);
    --cms-accent-hover: color-mix(in srgb, var(--cms-accent) 85%, black);
    --cms-accent-tint: color-mix(in srgb, var(--cms-accent) 10%, white);
}
.cms-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e2e8f0;
}
.cms-widget-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.cms-widget-more {
    font-size: 0.8rem;
    color: #94a3b8;
    text-decoration: none;
}
.cms-widget-more:hover { color: var(--cms-accent, #6366f1); }

/* ────────────────────────────────────────────
   카드형 스킨 (Card)
───────────────────────────────────────────── */
.cms-widget-card { }

.cms-wcard {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    background: #fff;
    color: inherit;
}
.cms-wcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    color: inherit;
}
.cms-wcard-thumb {
    width: 100%;
    padding-bottom: 60%;
    background-size: cover;
    background-position: center;
    background-color: #e2e8f0;
}
.cms-wcard-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cms-wcard-cat {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cms-accent, #6366f1);
}
.cms-wcard-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cms-wcard-date {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ────────────────────────────────────────────
   타임라인 스킨 (Timeline)
───────────────────────────────────────────── */
.cms-wtl-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.cms-wtl-list::before {
    content: '';
    position: absolute;
    left: 56px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e2e8f0;
}
.cms-wtl-item {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 10px 0;
    position: relative;
}
.cms-wtl-date {
    width: 52px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 12px;
}
.cms-wtl-month {
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    line-height: 1.2;
}
.cms-wtl-year {
    font-size: 0.7rem;
    color: #94a3b8;
}
.cms-wtl-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cms-accent, #6366f1);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--cms-accent, #6366f1);
    flex-shrink: 0;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.cms-wtl-content {
    flex: 1;
    padding-left: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cms-wtl-cat {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cms-accent, #6366f1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cms-wtl-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.5;
}
.cms-wtl-title:hover { color: var(--cms-accent, #6366f1); }

/* ────────────────────────────────────────────
   번호형 스킨 (Numbered)
───────────────────────────────────────────── */
.cms-wnum-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: none;
}
.cms-wnum-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.cms-wnum-item:last-child { border-bottom: none; }
.cms-wnum-no {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: background 0.2s, color 0.2s;
}
.cms-wnum-item:first-child .cms-wnum-no {
    background: var(--cms-accent, #6366f1);
    color: #fff;
}
.cms-wnum-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cms-wnum-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.5;
}
.cms-wnum-title:hover { color: var(--cms-accent, #6366f1); }
.cms-wnum-date {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ────────────────────────────────────────────
   게시판 목록 페이지 모던화 (Shared/_BoardCategory,
   Shared/_Pagination은 모든 스킨 공용 - 전체 스킨에 적용됨)

   --cms-accent는 위 위젯 섹션과 동일하게 테넌트의 --bs-primary를
   따라간다 (companyA는 #6B35A5로 자동 적용됨).
───────────────────────────────────────────── */
.cms-board-page {
    --cms-accent: var(--bs-primary, #6366f1);
    --cms-accent-hover: color-mix(in srgb, var(--cms-accent) 85%, black);
    --cms-accent-tint: color-mix(in srgb, var(--cms-accent) 10%, white);
}
.cms-board-page .page-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1e293b;
}
.cms-board-page .page-header .text-muted {
    font-size: 0.85rem;
    color: #94a3b8;
}
.cms-board-page .btn {
    border-radius: 999px;
    font-weight: 600;
}
.cms-board-page .btn-primary {
    background: var(--cms-accent);
    border-color: var(--cms-accent);
}
.cms-board-page .btn-primary:hover {
    background: var(--cms-accent-hover);
    border-color: var(--cms-accent-hover);
}

/* 공지/분류 배지 (모든 스킨 공용 - 테이블형 + 카드형 모두 적용) */
.cms-board-page .badge.bg-secondary {
    background: var(--cms-accent-tint) !important;
    color: var(--cms-accent) !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.35em 0.7em;
}
.cms-board-page .badge.bg-primary {
    background: var(--cms-accent) !important;
    border-radius: 999px;
}

/* 카테고리 필터 (공용 partial) */
.cms-board-page .nav-pills {
    gap: 6px;
    padding-bottom: 14px;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9;
}
.cms-board-page .nav-pills .nav-link {
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    transition: background 0.15s, color 0.15s;
}
.cms-board-page .nav-pills .nav-link.active {
    background: var(--cms-accent);
    color: #fff;
}
.cms-board-page .nav-pills .nav-link:hover:not(.active) {
    background: var(--cms-accent-tint);
    color: var(--cms-accent);
}

/* 목록 테이블 카드 (Basic 스킨) */
.cms-board-card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.cms-board-card .table {
    margin-bottom: 0;
}
.cms-board-card .table thead th {
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.9rem 0.75rem;
}
.cms-board-card .table tbody td {
    border-bottom: 1px solid #f1f5f9;
    padding: 0.85rem 0.75rem;
    vertical-align: middle;
    color: #334155;
}
.cms-board-card .table tbody tr:last-child td {
    border-bottom: none;
}
.cms-board-card .table tbody tr:hover td {
    background: #f8fafc;
}
.cms-board-card .table tbody tr.is-notice td {
    background: var(--cms-accent-tint, #eef2ff);
}
.cms-board-card .table .cms-board-title-link {
    color: #1e293b;
    font-weight: 500;
}
.cms-board-card .table .cms-board-title-link:hover {
    color: var(--cms-accent, #6366f1);
}
.cms-board-card .notice-divider-row td > div {
    border-top: 1px dashed #e2e8f0 !important;
}
.cms-board-card .card-footer {
    border-top: 1px solid #f1f5f9;
    background: #fff;
}

/* 페이지네이션 (공용 partial) */
.cms-board-page .pagination .page-link {
    border: none;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-weight: 600;
    margin: 0 2px;
}
.cms-board-page .pagination .page-item.active .page-link {
    background: var(--cms-accent);
    color: #fff;
}
.cms-board-page .pagination .page-item.disabled .page-link {
    background: transparent;
    color: #cbd5e1;
}

/* 검색 카드 */
.cms-board-search-card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
.cms-board-search-card .form-select,
.cms-board-search-card .form-control {
    border-radius: 10px;
    border-color: #e2e8f0;
}
.cms-board-search-card .btn {
    border-radius: 10px;
    background: var(--bs-primary, #6366f1);
    border-color: var(--bs-primary, #6366f1);
}
.cms-board-search-card .btn:hover {
    background: color-mix(in srgb, var(--bs-primary, #6366f1) 85%, black);
    border-color: color-mix(in srgb, var(--bs-primary, #6366f1) 85%, black);
}

/* ────────────────────────────────────────────
   게시판 상세/글쓰기 페이지 모던화 (9개 스킨 Detail.cshtml +
   Write.cshtml 공용, Shared/_ShareButtons, _PostNavigation,
   _Comments partial도 이 스코프 안에서 자동 적용됨)
───────────────────────────────────────────── */
.cms-board-detail,
.cms-board-page {
    --cms-accent: var(--bs-primary, #6366f1);
    --cms-accent-hover: color-mix(in srgb, var(--cms-accent) 85%, black);
    --cms-accent-tint: color-mix(in srgb, var(--cms-accent) 10%, white);
}
.cms-board-detail .btn,
.cms-board-page .btn {
    border-radius: 999px;
    font-weight: 600;
}
.cms-board-detail .btn-primary,
.cms-board-page .btn-primary {
    background: var(--cms-accent);
    border-color: var(--cms-accent);
}
.cms-board-detail .btn-primary:hover,
.cms-board-page .btn-primary:hover {
    background: var(--cms-accent-hover);
    border-color: var(--cms-accent-hover);
}
.cms-board-detail .badge.bg-secondary,
.cms-board-page .badge.bg-secondary {
    background: var(--cms-accent-tint) !important;
    color: var(--cms-accent) !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.35em 0.7em;
}
.cms-board-detail .badge.bg-primary,
.cms-board-page .badge.bg-primary {
    background: var(--cms-accent) !important;
    border-radius: 999px;
}

.cms-board-detail-card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.cms-board-detail-card .card-header {
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    padding: 1.1rem 1.25rem;
}
.cms-board-detail-card .card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
}
.cms-board-detail-card .card-body.bg-light,
.cms-board-detail-card .card-footer.bg-light {
    background: #f8fafc !important;
}
.cms-board-detail-card .card-body {
    padding: 1.25rem;
}
.cms-board-detail-card .card-footer {
    border-top: 1px solid #f1f5f9;
}
.cms-board-detail-card .list-group-item {
    border-color: #f1f5f9;
}

/* 공유 버튼 / 이전-다음글 네비 (공용 partial) */
.cms-board-detail .post-nav {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.cms-board-detail .post-nav-item:hover {
    background: #f8fafc;
}
.cms-board-detail .share-btn-copy,
.cms-board-detail .share-btn-print {
    background: #64748b;
}

/* 목록/수정/삭제 버튼 줄 */
.cms-board-detail .btn-secondary {
    background: #f1f5f9;
    border-color: #f1f5f9;
    color: #475569;
}
.cms-board-detail .btn-secondary:hover {
    background: #e2e8f0;
    border-color: #e2e8f0;
    color: #334155;
}

/* ─────────────────────────────────────────────
   FAQ / 아코디언 섹션 (faq-accordion.plugin)
───────────────────────────────────────────── */
.cms-faq-section {
    padding: 70px 0;
}
.cms-faq-header {
    margin-bottom: 40px;
}
.cms-faq-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #6366f1;
    font-weight: 600;
    margin-bottom: 8px;
}
.cms-faq-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
}
.cms-faq-desc {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}
.cms-faq-accordion {
    max-width: 860px;
    margin: 0 auto;
}
.cms-faq-accordion .accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px !important;
    margin-bottom: 12px;
    overflow: hidden;
}
.cms-faq-accordion .accordion-button {
    font-weight: 600;
    color: #1e293b;
    background: #fff;
    box-shadow: none;
}
.cms-faq-accordion .accordion-button:not(.collapsed) {
    color: #6366f1;
    background: #f8faff;
}
.cms-faq-accordion .accordion-body {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.8;
}

/* ─────────────────────────────────────────────
   바로가기 아이콘 그리드 (quick-links.plugin)
───────────────────────────────────────────── */
.cms-quicklinks-section {
    padding: 70px 0;
}
.cms-quicklinks-header {
    margin-bottom: 40px;
}
.cms-quicklinks-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #6366f1;
    font-weight: 600;
    margin-bottom: 8px;
}
.cms-quicklinks-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
}
.cms-quicklinks-desc {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}
.cms-quicklinks-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}
.cms-quicklinks-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cms-quicklinks-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cms-quicklinks-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cms-quicklinks-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.cms-quicklink-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 28px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    text-decoration: none;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, color 0.2s;
}
.cms-quicklink-item:hover {
    border-color: #6366f1;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.12);
    transform: translateY(-3px);
    color: #6366f1;
}
.cms-quicklink-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2ff;
    color: #6366f1;
    font-size: 1.4rem;
}
.cms-quicklink-label {
    font-weight: 600;
    font-size: 0.95rem;
}
@media (max-width: 767px) {
    .cms-quicklinks-grid,
    .cms-quicklinks-grid.cols-3,
    .cms-quicklinks-grid.cols-4,
    .cms-quicklinks-grid.cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ─────────────────────────────────────────────
   배너 섹션 통합 (banner-section.plugin)
   구 CTA 배너형 / 히어로 콘텐츠 박스 / 문화센터 / 게스트하우스 대체
───────────────────────────────────────────── */
.cms-banner-section {
    position: relative;
    display: flex;
    min-height: 450px;
    background-size: cover;
    background-position: center;
}
.cms-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 0;
}
.cms-banner-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 60px 6vw;
}
.cms-banner-section.banner-align-center .cms-banner-inner {
    justify-content: center;
    text-align: center;
}
.cms-banner-section.banner-align-right .cms-banner-inner {
    justify-content: flex-end;
}
.cms-banner-content {
    max-width: 640px;
    color: #fff;
}
.cms-banner-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 12px;
}
.cms-banner-title {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 16px;
    color: #fff;
}
.cms-banner-desc {
    font-size: 0.98rem;
    line-height: 1.8;
    opacity: 0.85;
    margin-bottom: 28px;
}
.cms-banner-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.cms-banner-section.banner-align-center .cms-banner-buttons {
    justify-content: center;
}
.cms-banner-btn-primary {
    background: #fff;
    color: #1e293b;
    border: 1.5px solid #fff;
}
.cms-banner-btn-primary:hover {
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
}
/* 컬러 콘텐츠 박스 재사용: 배너 안에서는 절대 배치 대신 flex 흐름을 따름 */
.cms-banner-section .cms-hcb-box {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    min-height: 380px;
}

/* ─────────────────────────────────────────────
   다가오는 행사 위젯 (EventListWidget)
───────────────────────────────────────────── */
.cms-event-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cms-event-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cms-event-item:hover {
    border-color: #6366f1;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.1);
}
.cms-event-date-badge {
    flex-shrink: 0;
    width: 64px;
    text-align: center;
    background: #eef2ff;
    border-radius: 12px;
    padding: 10px 0;
    color: #4f46e5;
}
.cms-event-date-badge .month {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
}
.cms-event-date-badge .day {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}
.cms-event-info {
    flex: 1;
    min-width: 0;
}
.cms-event-title {
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px;
    font-size: 1rem;
}
.cms-event-meta {
    font-size: 0.83rem;
    color: #64748b;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}
.cms-event-apply-btn {
    flex-shrink: 0;
    display: inline-block;
    padding: 8px 18px;
    border-radius: 8px;
    background: #6366f1;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.cms-event-apply-btn:hover {
    background: #4f46e5;
    color: #fff;
}
.cms-event-apply-btn.disabled {
    background: #e2e8f0;
    color: #94a3b8;
    pointer-events: none;
}
/* 카드형 */
.cms-event-cards {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.cms-event-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cms-event-card:hover {
    border-color: #6366f1;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.1);
}
.cms-event-card-banner {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}
.cms-event-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.cms-event-empty {
    padding: 32px;
    text-align: center;
    color: #94a3b8;
    background: #f8fafc;
    border-radius: 14px;
    font-size: 0.92rem;
}

/* 행사 신청 카드 위젯 (EventApplyWidget) */
.cms-event-apply-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 28px;
    background: linear-gradient(135deg, #eef2ff 0%, #f8faff 100%);
    border: 1px solid #c7d2fe;
    border-radius: 16px;
    flex-wrap: wrap;
}
.cms-event-apply-card .cms-event-info {
    flex: 1 1 280px;
}
.cms-event-apply-card .cms-event-title {
    font-size: 1.15rem;
}
.cms-event-apply-card .cms-event-remaining {
    font-size: 0.8rem;
    color: #4f46e5;
    font-weight: 600;
}

/* ─────────────────────────────────────────────
   교육 과정 위젯 (LmsCourseWidget)
───────────────────────────────────────────── */
.cms-lms-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.cms-lms-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.cms-lms-card:hover {
    border-color: #6366f1;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.12);
    transform: translateY(-3px);
}
.cms-lms-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.cms-lms-category {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}
.cms-lms-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.cms-lms-meta {
    margin-top: auto;
    font-size: 0.82rem;
    color: #64748b;
    display: flex;
    gap: 14px;
}

/* 행사 위젯 - 전체 행사 보기 링크 */
.cms-event-more {
    margin-top: 18px;
    text-align: center;
}
.cms-event-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    border: 1.5px solid #c7d2fe;
    border-radius: 999px;
    color: #4f46e5;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.cms-event-more-link:hover {
    background: #eef2ff;
    border-color: #6366f1;
    color: #4f46e5;
}

/* 배너 패럴랙스: 데스크톱만 배경 고정. 모바일/터치는 iOS 렌더링 버그와
   성능 문제로 일반 스크롤로 폴백, "동작 줄이기" 사용자도 제외 */
.cms-banner-section.banner-parallax {
    background-attachment: fixed;
}
@media (hover: none), (max-width: 991px), (prefers-reduced-motion: reduce) {
    .cms-banner-section.banner-parallax {
        background-attachment: scroll;
    }
}