/* ============================================================
   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; }

/* ── 연동 블록 자리표시자 (게시판 · 슬라이더 · 섬기는 분들 · 행사 · 교육과정 …) ──
   ★★ 편집기 **안에서만** 그려집니다. 지면에서는 서버가 이 안쪽을 통째로 갈아 끼우므로
      (CmsRenderService) 자리표시자 자체가 남지 않지만, 아직 서버가 못 채우는 종류가
      남아 있을 때 지면에 점선 틀이 새면 안 됩니다. 그래서 편집기에서만 붙는 표로 묶습니다 —
      캔버스는 그릴 때 모든 요소에 `data-gjs-type` 이 붙고(제작 지침 §4.32), 블록 고르는
      창의 미리보기는 `.bp-stage` 안에 그립니다(block-picker.js). 둘 다 지면에는 없습니다.
   ★ 예전에는 이 규칙이 cms-editor.css 에 있었는데 그 파일은 캔버스·미리보기 iframe 에
      실리지 않아 **한 번도 그려진 적이 없었습니다.**
   ★ 자리표시자 안쪽 클래스(`.dynamic-board-placeholder`)로 겨냥합니다 — 바깥 클래스
      (`.cms-dynamic-board`)는 행사·교육과정 등이 제 이름을 쓰면서 안쪽 자리표시자만
      게시판 것을 빌려 쓰기 때문입니다. */
.bp-stage .dynamic-board-placeholder,
.dynamic-board-placeholder[data-gjs-type],
.bp-stage .dynamic-slider-placeholder,
.dynamic-slider-placeholder[data-gjs-type],
.bp-stage .dynamic-staff-placeholder,
.dynamic-staff-placeholder[data-gjs-type] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    text-align: center;
}
.bp-stage .dynamic-board-placeholder,
.dynamic-board-placeholder[data-gjs-type] {
    background-color: #f8f9fa;
    border: 2px dashed #6c5ce7;
    color: #6c5ce7;
    padding: 30px;
    min-height: 150px;
}
.bp-stage .dynamic-slider-placeholder,
.dynamic-slider-placeholder[data-gjs-type] {
    background-color: #e9ecef;
    border: 2px dashed #17a2b8;
    color: #17a2b8;
    padding: 40px 20px;
    min-height: 250px;
}
.bp-stage .dynamic-staff-placeholder,
.dynamic-staff-placeholder[data-gjs-type] {
    background-color: #f1fdf6;
    border: 2px dashed #20c997;
    color: #20c997;
    padding: 40px 20px;
    min-height: 200px;
}
.bp-stage .dynamic-board-placeholder h4,   .dynamic-board-placeholder[data-gjs-type] h4,
.bp-stage .dynamic-slider-placeholder h4,  .dynamic-slider-placeholder[data-gjs-type] h4,
.bp-stage .dynamic-staff-placeholder h4,   .dynamic-staff-placeholder[data-gjs-type] h4 {
    margin: 12px 0 5px;
    font-weight: bold;
}
.bp-stage .dynamic-board-placeholder p,    .dynamic-board-placeholder[data-gjs-type] p,
.bp-stage .dynamic-slider-placeholder p,   .dynamic-slider-placeholder[data-gjs-type] p,
.bp-stage .dynamic-staff-placeholder p,    .dynamic-staff-placeholder[data-gjs-type] p {
    font-size: 13px;
    color: #6c757d;
    margin: 0;
}

@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;
}

/* ────────────────────────────────────────────
   히어로 변형: 풀스크린
───────────────────────────────────────────── */
/* ★ '한 화면' 을 var() 로 열어 둔다 — 지면에서는 변수가 없어 100vh 그대로지만,
   블록 미리보기처럼 **뷰포트가 우리 손에 달린 문서**는 이 값을 고정 px 로 바꿔
   끼운다(§4.46). 직접 100vh 라고 적으면 그쪽에서 덮을 길이 없다. */
.cms-hero-section.hero-fullscreen {
    min-height: var(--cms-screen-h, 100vh);
}

.cms-hero-section.hero-fullscreen .cms-hero-inner {
    min-height: var(--cms-screen-h, 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;
}

/* ── 변형: 배너형 ── (구 블록 · 지우지 말 것)
 *
 * ★ 이 아래 .cta-banner 네 규칙은 **이미 저장된 고객 페이지를 위해 남겨 둔 것**이다.
 *   'CTA (배너형)' 블록은 배너 플러그인의 '배너 (중앙 텍스트)' 로 통합돼 지금은
 *   이 마크업을 만들어 내지 않는다(cta-section.plugin.js 의 주석 참고).
 *   그래서 플러그인만 훑으면 '아무도 안 쓰는 죽은 CSS' 로 보이는데, 통합 전에 만든
 *   페이지에는 `<div class="cms-cta-overlay">` 가 그대로 들어 있다.
 *   지우면 그 페이지들의 어두운 덮개가 사라져 **사진 위에 흰 글씨만 남는다.**
 *   (실제로 한 번 '죽은 CSS' 로 오인했다 — 그래서 여기 적어 둔다)
 */
.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;
}

/* ★★ 사이트 스크립트가 이 칸에 `tabindex` 와 `role="button"` 을 붙여 키보드로도
   열리게 합니다(`cms-integrations-init.js`). 그러면 **초점 테두리가 보여야** 합니다 —
   안 보이면 키보드 사용자는 지금 어디에 서 있는지 알 수 없습니다.
   ★ 테두리를 **안쪽**으로 그립니다(`offset: -3px`). 바깥으로 그리면 위쪽 격자의
   `overflow: hidden` 에 잘려 사라집니다. 사진은 무슨 색일지 모르므로 흰 테두리에
   어두운 띠를 겹쳐 어느 사진 위에서도 읽히게 합니다. */
.cms-gallery-item:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px rgba(15, 23, 42, 0.85);
}

.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 {}

/* 비율 상자. 높이는 블록/설정 칸이 적는 `aspect-ratio`(2026-09-11 부터)가 정한다.
   ★ 그 전에 저장된 판은 `padding-bottom:75%` 셈이 #id 규칙에 남아 있다 — 사진을
     `position:absolute; inset:0` 으로 두면 **두 셈 모두**에서 칸을 채우므로 그대로 둔다.
     사진을 흐름 안으로 되돌리면 옛 판의 칸이 두 배로 길어진다. */
.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-btn)이라
   여기서는 자리만 잡는다. 사진 칸 안에 두면 라이트박스가 클릭을 삼킨다(제작 지침 §4.41). */
.cms-gallery-more-row {
    margin-top: 1.25rem;
    text-align: right;
}

/* ── 아래 둘은 2026-09-11 이전에 저장된 판을 위해 남긴다 ──
   블록은 더 이상 '+ 더보기' 덮개를 만들지 않는다. 지우면 옛 판의 그 칸이 맨 사진으로 보인다. */
.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-emb-box`)와 **하는 일이 같습니다** — 비율을 지켜 감싸는 칸.
 *   이름을 하나로 합치지 않는 까닭은 **이미 저장된 페이지**가 이 클래스로 들어 있기
 *   때문입니다. 이름은 둘로 두되 **셈하는 방법은 하나**로 맞춥니다.
 * ★ 예전에는 `padding-bottom: 56.25%` 였습니다(16:9 에 못 박힌 옛 수법). 그래서
 *   미디어 상자를 만들 때 그대로 못 쓰고 `aspect-ratio` 로 다시 짰습니다.
 *   여기도 같은 방법으로 옮깁니다 — 값은 같고(16:9), 읽기가 쉬워집니다.
 */
.cms-video-ratio {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

/*
 * 주소를 아직 안 넣은 칸.
 * ★ 빈 iframe 을 그리면 흰 칸만 남아 고장으로 읽힙니다(제작 지침 §4.18).
 *   미디어 상자의 자리 안내와 같은 결이고, 대비도 같은 값을 씁니다.
 */
.cms-video-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem;
    text-align: center;
    background: #e3e9f0;
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.5;
}

.cms-video-empty-icon {
    font-size: 1.6rem;
    color: var(--bs-primary, #4f46e5);
}

.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;
}


/* ────────────────────────────────────────────
   히어로 — 콘텐츠 박스형 (배경이미지 + 컬러 박스 절대 배치)

   ★ 위 .cta-banner 와 같은 처지다 — **이미 저장된 페이지를 위해 남겨 둔 규칙**.
     '히어로 (우측/좌측 박스)' 블록은 배너 플러그인의 '배너 (우측/좌측 박스)' 로
     통합돼 지금은 .hero-content-box 마크업을 만들지 않는다
     (hero-section.plugin.js 의 주석 참고). 플러그인에 없다고 지우지 말 것.
───────────────────────────────────────────── */
.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;
    }
}

/* ============================================================
   인사말 섹션 (greeting.plugin)
   - 5개 블록이 공통 뼈대(.cms-greeting)를 쓰고 형태별 클래스로 갈린다.
   - 강조색은 인스턴스마다 인라인 스타일로 덮어써지므로, 여기 색은 '기본값'.
   ============================================================ */
.cms-greeting {
    padding: 72px 0;
    color: #333;
    line-height: 1.9;
    word-break: keep-all;
}

.cms-greeting-body {
    max-width: 860px;
}

.cms-greeting-center {
    margin-left: auto;
    margin-right: auto;
}

.cms-greeting-para + .cms-greeting-para {
    margin-top: 2.4rem;
}

.cms-greeting-lead {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 600;
    color: #b3202a;
    margin-bottom: 0.9rem;
}

.cms-greeting-headline {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.45;
    color: #222;
    margin-bottom: 1.2rem;
}

.cms-greeting-subhead {
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    color: #555;
    line-height: 1.6;
    margin-bottom: 0;
}

.cms-greeting-text {
    font-size: 0.98rem;
    color: #4b5563;
    margin-bottom: 0;
}

.cms-greeting-quote {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.9;
    margin-bottom: 2.2rem;
}

.cms-greeting-mark {
    display: block;
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    color: #b3202a;
    margin-bottom: 0.6rem;
}

/* 서명 */
.cms-greeting-sign-wrap {
    margin-top: 2.8rem;
}

.cms-greeting-sign-right {
    text-align: right;
}

.cms-greeting-sign {
    font-size: 1.05rem;
    color: #222;
    letter-spacing: 0.02em;
    margin-bottom: 0;
}

.cms-greeting-sign-img {
    max-height: 60px;
    margin-top: 8px;
}

/* 번호가 붙는 강조 항목 */
.cms-greeting-points {
    list-style: none;
    padding: 0;
    margin: 3rem 0 0;
}

.cms-greeting-point + .cms-greeting-point {
    margin-top: 1.8rem;
}

.cms-greeting-point-head {
    font-size: 1.05rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 0.5rem;
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.cms-greeting-point-num {
    color: #b3202a;
    font-weight: 700;
    flex-shrink: 0;
}

.cms-greeting-point-body {
    font-size: 0.95rem;
    color: #4b5563;
    margin-bottom: 0;
    padding-left: 1.4rem;
}

/* 본문이 없는 한 줄 항목(①②③…)은 간격을 좁게 */
.cms-greeting-points-inline {
    display: inline-block;
    text-align: left;
    margin-top: 2rem;
}
.cms-greeting-points-inline .cms-greeting-point + .cms-greeting-point {
    margin-top: 0.35rem;
}
.cms-greeting-points-inline .cms-greeting-point-head {
    font-weight: 500;
    margin-bottom: 0;
}

/* ── 1) 배경 일러스트형 ─────────────────────────────────────── */
.cms-greeting-sketch {
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: min(58%, 720px) auto;
    padding-bottom: 120px;
}

@media (max-width: 991px) {
    .cms-greeting-sketch {
        background-size: 100% auto;
        background-position: center bottom;
        padding-bottom: 46vw;
    }
}

/* ── 2) 프로필 밴드형 ───────────────────────────────────────── */
.cms-greeting-banner {
    padding-top: 0;
}

.cms-greeting-band {
    background-color: #eceaea;
    margin-bottom: 56px;
}

.cms-greeting-band-inner {
    display: flex;
    align-items: flex-end;
    gap: 40px;
}

.cms-greeting-portrait {
    flex: 0 0 auto;
    max-width: 220px;
    margin: 0;
    text-align: center;
}

.cms-greeting-portrait-img {
    max-width: 100%;
    height: auto;
    display: block;
}

.cms-greeting-portrait-cap {
    font-size: 0.85rem;
    color: #444;
    padding: 8px 0 16px;
}

.cms-greeting-band-text {
    flex: 1 1 auto;
    padding: 48px 0;
}

.cms-greeting-rule {
    display: block;
    width: 68px;
    height: 3px;
    background-color: #b3202a;
    margin-bottom: 18px;
}

/* ── 3) 인물 사진형 ─────────────────────────────────────────── */
.cms-greeting-photo-wrap {
    overflow: hidden;
    border-radius: 4px;
    background: #f1f5f9;
}

.cms-greeting-photo-wrap .cms-greeting-portrait-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── 5) 약력 (학력/경력) ────────────────────────────────────── */
.cms-greeting-profile {
    padding: 48px 0;
    border-top: 1px solid #e5e7eb;
}

.cms-greeting-profile-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1f2937;
    border-left: 3px solid #b3202a;
    padding-left: 10px;
    margin-bottom: 1rem;
}

.cms-greeting-profile-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cms-greeting-profile-list li {
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.9;
}

@media (max-width: 767px) {
    .cms-greeting {
        padding: 48px 0;
    }
    .cms-greeting-band-inner {
        flex-direction: column;
        align-items: center;
        gap: 0;
        text-align: center;
    }
    .cms-greeting-band-text {
        padding: 0 0 40px;
    }
    .cms-greeting-rule {
        margin-left: auto;
        margin-right: auto;
    }
    .cms-greeting-sign-right {
        text-align: center;
    }
    /* 사진 위치 trait(row-reverse)는 모바일에서 무의미하므로 항상 사진이 위로 */
    .cms-greeting-hero {
        flex-direction: row !important;
    }
}

/* ============================================================
   교회 연혁 기록표 (church-history.plugin)
   - 5개 블록이 .cms-chhistory 를 공유하고 형태별 클래스로 갈린다.
   - 강조색은 루트의 --cms-chh-accent 로 들어온다(활성 탭처럼 상태가
     바뀌는 요소는 인라인으로 칠할 수 없어서). 변수가 없으면 기본값.
   - 연대 탭의 '접기'는 cms-integrations-init.js 가 하고, 여기는 모양만 잡는다.
   ============================================================ */
.cms-chhistory {
    padding: 64px 0;
    color: #333;
    word-break: keep-all;
}

.cms-chhistory-header {
    margin-bottom: 28px;
}

.cms-chhistory-title {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.cms-chhistory-desc {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 0;
}

/* ── 상단 연대 탭 ───────────────────────────────────────────── */
.cms-chhistory-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 18px;
    margin-bottom: 32px;
    border-bottom: 1px solid #e5e7eb;
}

.cms-chhistory-tab {
    appearance: none;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.cms-chhistory-tab:hover {
    border-color: var(--cms-chh-accent, #1f3a8a);
    color: var(--cms-chh-accent, #1f3a8a);
}

.cms-chhistory-tab.is-active {
    background: var(--cms-chh-accent, #1f3a8a);
    border-color: var(--cms-chh-accent, #1f3a8a);
    color: #fff;
}

.cms-chhistory-group + .cms-chhistory-group {
    margin-top: 48px;
}

.cms-chhistory-group-head {
    font-size: 1.05rem;
    font-weight: 700;
    color: #374151;
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 2px solid #374151;
}

/* ── 사진 ───────────────────────────────────────────────────── */
.cms-chhistory-figure {
    margin: 0 0 18px;
}

.cms-chhistory-img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
}

.cms-chhistory-cap {
    font-size: 0.82rem;
    color: #6b7280;
    text-align: center;
    padding-top: 8px;
}

/* ── 공통: 날짜 | 내용 목록 ─────────────────────────────────── */
.cms-chhistory-rows {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cms-chhistory-row {
    display: flex;
    gap: 20px;
    align-items: baseline;
    padding: 12px 8px;
    border-bottom: 1px solid #eef0f3;
    font-size: 0.92rem;
    line-height: 1.7;
}

.cms-chhistory-row-date {
    flex: 0 0 130px;
    color: #111827;
    font-weight: 600;
}

.cms-chhistory-row-text {
    flex: 1 1 auto;
    color: #4b5563;
}

/* 줄무늬 변형 */
.cms-chhistory-zebra .cms-chhistory-row:nth-child(odd) {
    background: #f8f9fa;
}

/* ── 1) 사진 + 연/월/일 기록표 ──────────────────────────────── */
.cms-chhistory-record-row {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    padding: 24px 0;
    border-top: 1px solid #e5e7eb;
}

.cms-chhistory-record-photo {
    flex: 0 0 190px;
    position: sticky;
    top: 90px;
}

.cms-chhistory-record-list {
    flex: 1 1 auto;
    min-width: 0;
}

.cms-chhistory-rec {
    display: grid;
    grid-template-columns: 70px 44px 44px 1fr;
    gap: 0 10px;
    align-items: baseline;
    padding: 11px 4px;
    border-bottom: 1px solid #eef0f3;
    font-size: 0.92rem;
    line-height: 1.7;
}

.cms-chhistory-rec-y {
    font-weight: 600;
    color: #111827;
}

.cms-chhistory-rec-m,
.cms-chhistory-rec-d {
    color: #6b7280;
    text-align: right;
}

.cms-chhistory-rec-t {
    color: #3f5b9b;
    padding-left: 12px;
}

/* ── 2) 연도 제목 + 좌 목록 / 우 사진 ───────────────────────── */
.cms-chhistory-year-head {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f3a8a;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 2px solid #374151;
}

/* ── 4) 큰 연도 ─────────────────────────────────────────────── */
.cms-chhistory-bigyear-row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    padding: 28px 0;
    border-top: 1px solid #e5e7eb;
}

.cms-chhistory-bigyear-col {
    flex: 0 0 170px;
    position: sticky;
    top: 90px;
}

.cms-chhistory-bigyear-num {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    color: #1f3a8a;
    letter-spacing: -0.02em;
}

.cms-chhistory-bigyear-row .cms-chhistory-rows {
    flex: 1 1 auto;
    min-width: 0;
}

.cms-chhistory-bigyear-row .cms-chhistory-row-date {
    flex-basis: 70px;
}

/* ── 5) 연대별 접기 (<details>) ─────────────────────────────── */
.cms-chhistory-acc {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
}

.cms-chhistory-accordion .cms-chhistory-group + .cms-chhistory-group {
    margin-top: 12px;
}

.cms-chhistory-acc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: #1f2937;
}

.cms-chhistory-acc-head::-webkit-details-marker {
    display: none;
}

/* 펼침 표시는 CSS 로만 그린다(아이콘 폰트에 의존하지 않도록) */
.cms-chhistory-acc-head::before {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--cms-chh-accent, #1f3a8a);
    border-bottom: 2px solid var(--cms-chh-accent, #1f3a8a);
    transform: rotate(-45deg);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.cms-chhistory-acc[open] .cms-chhistory-acc-head::before {
    transform: rotate(45deg);
}

.cms-chhistory-acc-count {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
}

.cms-chhistory-acc .cms-chhistory-rows {
    padding: 0 20px 12px;
}

@media (max-width: 991px) {
    .cms-chhistory-record-row,
    .cms-chhistory-bigyear-row {
        flex-direction: column;
        gap: 18px;
    }
    /* 세로로 쌓이면 붙박이(sticky)가 오히려 방해가 된다 */
    .cms-chhistory-record-photo,
    .cms-chhistory-bigyear-col {
        position: static;
        flex-basis: auto;
        width: 100%;
        max-width: 420px;
    }
}

@media (max-width: 767px) {
    .cms-chhistory {
        padding: 40px 0;
    }
    .cms-chhistory-row {
        flex-direction: column;
        gap: 2px;
    }
    .cms-chhistory-row-date {
        flex-basis: auto;
        font-size: 0.85rem;
        color: #6b7280;
    }
    .cms-chhistory-rec {
        grid-template-columns: 54px 34px 34px;
    }
    /* 좁은 화면에서는 내용이 날짜 아래 줄로 내려간다 */
    .cms-chhistory-rec-t {
        grid-column: 1 / -1;
        padding-left: 0;
        padding-top: 4px;
    }
    .cms-chhistory-tab {
        padding: 6px 14px;
        font-size: 0.85rem;
    }
}

/* ============================================================
   오시는 길 (directions.plugin)
   - 6개 블록이 .cms-directions 를 공유하고 형태별 클래스로 갈린다.
   - 지도는 .cms-kakao-map (kakao-map.plugin) 을 그대로 쓴다.
   - 노선 배지 색은 서울교통공사/서울버스 표준색. 지역이 다르면
     .line-* / .bus-* 를 페이지 CSS 에서 덮어쓰면 된다.
   ============================================================ */
.cms-directions {
    padding: 64px 0;
    color: #333;
    word-break: keep-all;
}

.cms-directions-header {
    margin-bottom: 32px;
}

.cms-directions-head-line {
    display: block;
    width: 48px;
    height: 3px;
    background-color: #1f3a8a;
    margin-bottom: 16px;
}

.cms-directions-title {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.cms-directions-desc {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 0;
}

.cms-directions-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    margin: 36px 0 14px;
}

.cms-directions-sub i {
    color: var(--cms-dir-accent, #1f3a8a);
}

.cms-directions-note {
    font-size: 0.86rem;
    color: #6b7280;
    line-height: 1.7;
    margin: 18px 0 0;
}

.cms-directions-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cms-directions-ul li {
    position: relative;
    padding-left: 14px;
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.85;
}

.cms-directions-ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #9ca3af;
}

/* ── 지도 ───────────────────────────────────────────────────── */
.cms-directions-map-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    background: #f3f4f6;
}

/* 카카오맵 키가 없어 지도가 안 그려질 때만 보이는 자리 문구.
   지도가 뜨면 SDK 가 컨테이너 내용을 덮어쓰므로 저절로 사라진다. */
.cms-directions-map-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    font-size: 0.92rem;
    text-align: center;
    padding: 20px;
}

.cms-directions-under-map {
    margin-top: 28px;
}

/* ── 주소/연락처 ────────────────────────────────────────────── */
.cms-directions-info {
    border-top: 2px solid #374151;
}

.cms-directions-info-row {
    display: flex;
    gap: 16px;
    align-items: baseline;
    padding: 13px 6px;
    border-bottom: 1px solid #eef0f3;
    font-size: 0.93rem;
}

.cms-directions-info-label {
    flex: 0 0 96px;
    font-weight: 600;
    color: #111827;
}

.cms-directions-info-value {
    flex: 1 1 auto;
    color: #4b5563;
    line-height: 1.7;
}

/* ── 지도앱 바로가기 ────────────────────────────────────────── */
.cms-directions-apps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cms-directions-app {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}

.cms-directions-app:hover {
    border-color: var(--cms-dir-accent, #1f3a8a);
    color: var(--cms-dir-accent, #1f3a8a);
    background: #f8fafc;
}

/* ── 아이콘 카드 ────────────────────────────────────────────── */
.cms-directions-card {
    height: 100%;
    padding: 28px 24px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
}

.cms-directions-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #1f3a8a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.cms-directions-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.cms-directions-card-body {
    font-size: 0.9rem;
    color: #4b5563;
}

.cms-directions-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.8;
    margin-bottom: 8px;
}

.cms-directions-line:last-child {
    margin-bottom: 0;
}

/* ── 노선 배지 ──────────────────────────────────────────────── */
.cms-directions-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.cms-directions-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 10px;
    border-radius: 4px;
    background: #6b7280;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

/* 지하철 (서울교통공사 노선색) */
.cms-directions-badge.line-1 { background: #0052a4; }
.cms-directions-badge.line-2 { background: #00a84d; }
.cms-directions-badge.line-3 { background: #ef7c1c; }
.cms-directions-badge.line-4 { background: #00a5de; }
.cms-directions-badge.line-5 { background: #996cac; }
.cms-directions-badge.line-6 { background: #cd7c2f; }
.cms-directions-badge.line-7 { background: #747f00; }
.cms-directions-badge.line-8 { background: #e6186c; }
.cms-directions-badge.line-9 { background: #bb8336; }

/* 버스 (간선/지선/광역/마을/순환) */
.cms-directions-badge.bus-trunk  { background: #3d5bab; }
.cms-directions-badge.bus-branch { background: #53b332; }
.cms-directions-badge.bus-wide   { background: #e60012; }
.cms-directions-badge.bus-town   { background: #53b332; }
.cms-directions-badge.bus-circle { background: #f99d1c; }

.cms-directions-exit {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f8fafc;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 600;
}

/* ── 노선 상세 목록 ─────────────────────────────────────────── */
.cms-directions-route-list {
    border-top: 1px solid #e5e7eb;
}

.cms-directions-route {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 16px 6px;
    border-bottom: 1px solid #eef0f3;
}

.cms-directions-route-label {
    flex: 0 0 150px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #111827;
    padding-top: 3px;
}

.cms-directions-route-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cms-directions-route-memo {
    font-size: 0.87rem;
    color: #6b7280;
    margin: 8px 0 0;
    line-height: 1.6;
}

/* ── 주차 표 ────────────────────────────────────────────────── */
.cms-directions-park-table {
    border-top: 2px solid #374151;
}

.cms-directions-park-row {
    display: flex;
    gap: 16px;
    align-items: baseline;
    padding: 14px 8px;
    border-bottom: 1px solid #eef0f3;
    font-size: 0.92rem;
}

.cms-directions-park-row.is-head {
    background: #f8f9fa;
    font-weight: 700;
    color: #111827;
}

.cms-directions-park-name { flex: 0 0 170px; font-weight: 600; color: #111827; }
.cms-directions-park-cap  { flex: 0 0 90px;  color: #4b5563; }
.cms-directions-park-memo { flex: 1 1 auto;  color: #4b5563; line-height: 1.7; }

.cms-directions-park-row.is-head .cms-directions-park-name,
.cms-directions-park-row.is-head .cms-directions-park-cap,
.cms-directions-park-row.is-head .cms-directions-park-memo {
    color: #111827;
}

.cms-directions-park-notes {
    margin-top: 32px;
}

/* ── 셔틀버스 ───────────────────────────────────────────────── */
.cms-directions-shuttle {
    height: 100%;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-top: 3px solid var(--cms-dir-accent, #1f3a8a);
    border-radius: 4px;
    background: #fff;
}

.cms-directions-shuttle-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 6px;
}

.cms-directions-shuttle-times {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cms-dir-accent, #1f3a8a);
    margin-bottom: 14px;
}

.cms-directions-stops {
    list-style: none;
    counter-reset: stop;
    padding: 0;
    margin: 0;
}

.cms-directions-stops li {
    counter-increment: stop;
    position: relative;
    padding-left: 26px;
    font-size: 0.89rem;
    color: #4b5563;
    line-height: 1.6;
    padding-bottom: 12px;
}

.cms-directions-stops li::before {
    content: counter(stop);
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 정류장을 잇는 세로선 — 마지막 항목에는 그리지 않는다 */
.cms-directions-stops li::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 20px;
    bottom: 2px;
    width: 2px;
    background: #e5e7eb;
}

.cms-directions-stops li:last-child {
    padding-bottom: 0;
}

.cms-directions-stops li:last-child::after {
    display: none;
}

/* ── 약도 이미지 ────────────────────────────────────────────── */
.cms-directions-sketch-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.cms-directions-sketch-img {
    width: 100%;
    height: auto;
    display: block;
}

.cms-directions-sketch .cms-directions-apps {
    margin-top: 20px;
}

@media (max-width: 767px) {
    .cms-directions {
        padding: 40px 0;
    }
    .cms-directions-route,
    .cms-directions-park-row {
        flex-direction: column;
        gap: 8px;
    }
    .cms-directions-route-label,
    .cms-directions-park-name,
    .cms-directions-park-cap {
        flex-basis: auto;
    }
    .cms-directions-info-row {
        flex-direction: column;
        gap: 2px;
    }
    .cms-directions-info-label {
        flex-basis: auto;
        font-size: 0.85rem;
        color: #6b7280;
    }
    .cms-directions-app {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ============================================================
   좌우 교차 2단 섹션 (alt-sections.plugin)
   - 좌우 뒤집기는 .cms-altsec-row 의 flex-direction 으로만 한다.
     마크업은 항상 '이미지 먼저'라, 모바일에서 세로로 쌓이면 좌/우
     어느 설정이든 이미지가 위로 온다.
   - 간결한 2단이 필요하면 .cms-showcase-section (content-showcase) 쪽.
   ============================================================ */
.cms-altsec {
    padding: 72px 0;
    color: #333;
    word-break: keep-all;
}

.cms-altsec-body {
    max-width: 560px;
}

.cms-altsec-eyebrow {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1f3a8a;
    margin-bottom: 10px;
}

.cms-altsec-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    font-weight: 700;
    line-height: 1.45;
    color: #1f2937;
    margin-bottom: 18px;
}

.cms-altsec-num {
    color: #1f3a8a;
    font-weight: 800;
    flex-shrink: 0;
}

.cms-altsec-text {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.9;
    margin-bottom: 1rem;
}

.cms-altsec-text:last-child {
    margin-bottom: 0;
}

/* 성경구절 인용 */
.cms-altsec-verse {
    border-left: 3px solid #1f3a8a;
    padding: 4px 0 4px 16px;
    margin: 0 0 20px;
}

.cms-altsec-verse-text {
    font-size: 0.92rem;
    color: #374151;
    line-height: 1.8;
    margin-bottom: 6px;
}

.cms-altsec-verse-ref {
    font-size: 0.82rem;
    color: #6b7280;
    font-style: normal;
}

/* 이미지 상자 — 비율을 padding-bottom 으로 잡아 로딩 중에도 자리가 밀리지 않는다 */
.cms-altsec-img-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    overflow: hidden;
    border-radius: 4px;
    background: #f1f5f9;
}

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

/* 링크 / 버튼 */
.cms-altsec-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--cms-altsec-accent, #1f3a8a);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.cms-altsec-link:hover {
    text-decoration: underline;
}

.cms-altsec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    padding: 12px 28px;
    border-radius: 6px;
    background: var(--cms-altsec-accent, #1f3a8a);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.18s;
}

.cms-altsec-btn:hover {
    opacity: 0.88;
    color: #fff;
}

/* ── 겹친 카드 ──────────────────────────────────────────────── */
.cms-altsec-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
    padding: 40px 36px;
    /* 이미지 쪽으로 파고들게 한다. 좌우가 뒤집혀도 같은 방향으로
       겹치도록 margin 이 아니라 음수 margin-inline-start 를 쓴다. */
    margin-inline-start: -60px;
    position: relative;
    z-index: 2;
}

.cms-altsec-card .cms-altsec-body {
    max-width: none;
}

/* ── 꽉 찬 이미지 ───────────────────────────────────────────── */
.cms-altsec-fullbleed {
    padding: 0;
}

.cms-altsec-bleed-row {
    display: flex;
    align-items: stretch;
    min-height: 460px;
}

.cms-altsec-bleed-img {
    flex: 0 0 50%;
    position: relative;
    min-height: 300px;
}

.cms-altsec-bleed-text {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 60px 56px;
}

/* ── 숫자 지표 ──────────────────────────────────────────────── */
.cms-altsec-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

.cms-altsec-stat {
    display: flex;
    flex-direction: column;
}

.cms-altsec-stat-num {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
    color: var(--cms-altsec-accent, #1f3a8a);
    letter-spacing: -0.02em;
}

.cms-altsec-stat-unit {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cms-altsec-accent, #1f3a8a);
    margin-left: 2px;
}

.cms-altsec-stat-label {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 8px;
}

/* ── 체크 목록 ──────────────────────────────────────────────── */
.cms-altsec-checks {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
}

.cms-altsec-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f5;
}

.cms-altsec-check i {
    flex-shrink: 0;
    margin-top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cms-altsec-accent, #1f3a8a);
    color: #fff;
    font-size: 0.62rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cms-altsec-check-text {
    font-size: 0.92rem;
    color: #4b5563;
    line-height: 1.75;
}

@media (max-width: 991px) {
    .cms-altsec {
        padding: 48px 0;
    }
    /* 세로로 쌓이는 구간에서는 뒤집기를 무시한다.
       (row-reverse 로 감싸면 wrap 된 항목의 위아래가 뒤바뀐다) */
    .cms-altsec-row {
        flex-direction: row !important;
    }
    .cms-altsec-card {
        margin-inline-start: 0;
        margin-top: -40px;
        padding: 32px 24px;
    }
    .cms-altsec-bleed-row {
        flex-direction: column;
        min-height: 0;
    }
    .cms-altsec-bleed-img {
        flex: none;
        height: 260px;
    }
    .cms-altsec-bleed-text {
        padding: 40px 24px;
    }
    .cms-altsec-body {
        max-width: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   표 (table.plugin.js)
   ══════════════════════════════════════════════════════════════
   범용 표 블록의 스타일입니다.

   ★ 예배 시간표의 .cms-dept-table 을 재사용하지 않고 따로 둡니다.
     한 벌을 같이 쓰면 나중에 예배 시간표의 생김새를 손볼 때 범용 표가 같이
     흔들립니다. 대신 '오시는 길 > 주차 안내'(.cms-directions-park-table)와
     같은 결로 맞춰서, 한 사이트 안에서 표가 두 종류로 보이지 않게 했습니다. */

.cms-table-section {
    padding: 64px 0;
}

.cms-table-header {
    margin-bottom: 28px;
}

.cms-table-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}

.cms-table-desc {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* 좁은 화면에서는 가로로 밀어서 본다.
   (2단계에서 '카드로 접기' 선택지가 여기에 더해집니다) */
.cms-table-wrap {
    overflow-x: auto;
}

.cms-table {
    width: 100%;
    min-width: 480px;     /* 이보다 좁아지면 칸이 뭉개지므로 가로 스크롤로 넘긴다 */
    border-collapse: collapse;
    border-top: 2px solid #374151;
    background: #fff;
    font-size: 0.92rem;
}

.cms-table th,
.cms-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef0f3;
    text-align: left;
    vertical-align: middle;
    line-height: 1.7;
}

.cms-table thead th {
    background: #f8f9fa;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

.cms-table tbody td {
    color: #4b5563;
}

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

/* 빈 칸이 납작해져서 편집기에서 클릭할 자리가 없어지는 것을 막는다.
   ::before 라 저장되는 HTML 에는 흔적이 남지 않는다. */
.cms-table td:empty::before,
.cms-table th:empty::before {
    content: "\00a0";
}

@media (max-width: 767px) {
    .cms-table-section {
        padding: 44px 0;
    }
    .cms-table-title {
        font-size: 1.35rem;
    }
}

/* ── 좁은 화면에서 '카드'로 접기 ────────────────────────────────
   표의 유일한 약점이 좁은 화면입니다. 각 칸에 머리행 글자를 data-label 로 달아
   두면(table.plugin.js 가 자동으로 채웁니다) 아래 규칙만으로 '항목: 값' 카드가
   됩니다.

   ★ 클래스가 아니라 [data-mobile="stack"] 속성으로 겁니다. 고객이 붙여넣은
     (우리 클래스가 없는) 표에도 이 기능을 켤 수 있어야 하기 때문입니다.
   ★ 속성이 없으면 아무 일도 일어나지 않습니다 — 기존 표는 지금까지와 똑같이
     가로 스크롤로 남습니다. */

@media (max-width: 640px) {
    table[data-mobile="stack"] {
        min-width: 0;
        border-top: 0;
    }
    /* 머리행은 각 칸의 라벨로 옮겨갔으므로 숨긴다 */
    table[data-mobile="stack"] thead {
        display: none;
    }
    table[data-mobile="stack"] tr {
        display: block;
    }
    table[data-mobile="stack"] td {
        display: flex;
        gap: 12px;
        align-items: baseline;
        border-bottom: 0;
        padding: 5px 2px;
    }

    /* 라벨. 첫 선택자는 '빈 칸' 규칙(위쪽 .cms-table td:empty::before)보다
       구체적이어야 해서 함께 적어 둡니다 — 안 그러면 빈 칸에서 라벨 대신
       공백이 나옵니다. */
    .cms-table[data-mobile="stack"] td:empty::before,
    table[data-mobile="stack"] td::before {
        content: attr(data-label);
        flex: 0 0 84px;
        font-weight: 700;
        color: #111827;
    }

    /* 한 행 = 한 장의 카드 */
    .cms-table[data-mobile="stack"] tbody tr {
        padding: 12px 0;
        border-bottom: 1px solid #eef0f3;
    }
    .cms-table[data-mobile="stack"] tbody tr:first-child {
        border-top: 2px solid #374151;
    }
    .cms-table[data-mobile="stack"] tbody tr:hover td {
        background: none;
    }
}

/* ── 줄무늬 · 테두리 (표 트레이트) ──────────────────────────────
   모바일 접기와 같은 이유로 클래스가 아니라 속성으로 겁니다 — 고객이 붙여넣은
   (우리 클래스가 없는) 표에도 켤 수 있어야 하기 때문입니다.

   ★ 값까지 봅니다(`="1"`). 체크박스를 끄면 GrapesJS 가 속성을 지우지 않고
     data-striped="false" 를 남기는데, `[data-striped]` 로만 걸면 꺼도 켜진 채입니다. */

table[data-striped="1"] tbody tr:nth-child(2n) td {
    background: #fafbfc;
}

/* 줄무늬가 마우스 올림 표시를 덮지 않게 한 번 더 짚어 준다 */
.cms-table[data-striped="1"] tbody tr:nth-child(2n):hover td {
    background: #f1f5f9;
}

table[data-bordered="1"] th,
table[data-bordered="1"] td {
    border: 1px solid #e5e7eb;
}

/* ─────────────────────────────────────────────
   아이콘 정렬 (icon.plugin.js · '아이콘' 블록)
   ─────────────────────────────────────────────
   아이콘은 글자와 같은 인라인 요소라 자기 자신은 정렬되지 않습니다. 감싸는 <div>
   를 두면 캔버스에서 껍데기가 먼저 잡혀 아이콘 설정이 한 단계 멀어지므로, 껍데기
   없이 아이콘에 직접 겁니다 — 한 줄을 통째로 차지하게 만든 뒤 글자 정렬로 밉니다.

   ★ Font Awesome 은 글리프를 ::before 로 그립니다. 그 ::before 가 이 요소의
     인라인 내용이라, display:block 으로 바꾸면 text-align 이 실제로 먹습니다.
   ★ 요소 선택자를 함께 적는 이유 — .fas 가 display:inline-block 을 걸어 두는데
     클래스 하나짜리 선택자끼리는 우선순위가 같아 파일 순서에 기대게 됩니다.
     타입 선택자를 붙여 순서와 무관하게 이깁니다.
   ★ 정렬을 '기본(글줄 안)' 으로 두면 이 클래스가 아예 안 붙으므로, 문단 사이에
     끼워 쓰는 기존 아이콘들은 영향을 받지 않습니다. */

i[class*="cms-icon-align-"],
span[class*="cms-icon-align-"] {
    display: block;
}

.cms-icon-align-left   { text-align: left; }
.cms-icon-align-center { text-align: center; }
.cms-icon-align-right  { text-align: right; }

/* ─────────────────────────────────────────────
   글줄 안 이미지 (rte-insert.js · RTE '넣기 → 이미지')
   ─────────────────────────────────────────────
   글자 사이에 끼워 넣는 사진입니다. 크기를 인라인 style 로 주지 않고 클래스로 두는
   이유 — 글 상자는 편집을 끝낼 때마다 내용이 재파싱되는 자리라, 인라인 style 을 주면
   GrapesJS 가 그것을 자동 생성 id 규칙으로 옮기면서 규칙이 한 장씩 늘어납니다.

   ★ width 는 정하지 않습니다. 담당자가 스타일 탭에서 지정하면 그 값이 쓰이고,
     지정하지 않으면 원본 크기로 두되 글 폭을 넘지 않게만 잡아 둡니다. */

img.cms-inline-img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* ─────────────────────────────────────────────
   버튼 (button.plugin.js · '버튼' · '버튼 두 개' 블록)
   ─────────────────────────────────────────────
   모양(채우기·테두리·연한 채우기·배경 없음·그라데이션·글자 링크) × 색 × 크기 ×
   모서리의 조합입니다. 조합마다 CSS 를 쓰지 않기 위해, **색은 클래스가 아니라
   변수 한 칸**(--cms-btn-color)에 둡니다.

   ★ 그래서 색을 하나 바꾸면 마우스 올림 색(--cms-btn-hover)과 연한 배경
     (--cms-btn-tint)까지 color-mix 로 따라옵니다. 편집기는 이 변수만 씁니다
     (버튼 하나의 #id 규칙에 씁니다 — 그 버튼만 바뀝니다).
   ★ 기본색은 테넌트 부트스트랩 테마의 --bs-primary 입니다. 위의 게시판 위젯
     (--cms-accent)과 같은 결이라, 색을 따로 안 고르면 사이트 색을 따라갑니다.
   ★ 글자색(--cms-btn-fg)은 편집기가 배경 밝기를 재서 함께 써 넣습니다.
     여기 기본값(흰색)은 색을 고르지 않았을 때(=테마색 위)만 쓰입니다. */

.cms-btn {
    --cms-btn-color: var(--bs-primary, #4f46e5);
    --cms-btn-fg: #fff;
    --cms-btn-hover: color-mix(in srgb, var(--cms-btn-color) 82%, black);
    --cms-btn-tint: color-mix(in srgb, var(--cms-btn-color) 12%, white);
    --cms-btn-radius: 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    max-width: 100%;
    padding: 0.75rem 1.6rem;
    border: 2px solid transparent;
    border-radius: var(--cms-btn-radius);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s, border-color 0.18s, color 0.18s,
                box-shadow 0.18s, transform 0.18s, filter 0.18s;
}

.cms-btn:hover,
.cms-btn:focus {
    text-decoration: none;
}

/* 키보드로 이동할 때만 보이는 테두리(마우스 클릭에는 안 나옵니다) */
.cms-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cms-btn-color) 45%, white);
    outline-offset: 2px;
}

/* 버튼 안 아이콘. 글자 크기를 따라가서 크기를 따로 안 만져도 됩니다. */
.cms-btn > i {
    flex: 0 0 auto;
    font-size: 1em;
    line-height: 1;
}

/* ── 모양 ───────────────────────────────────────────────────── */

.cms-btn-solid {
    background-color: var(--cms-btn-color);
    border-color: var(--cms-btn-color);
    color: var(--cms-btn-fg);
}
.cms-btn-solid:hover {
    background-color: var(--cms-btn-hover);
    border-color: var(--cms-btn-hover);
    color: var(--cms-btn-fg);
}

.cms-btn-outline {
    background-color: transparent;
    border-color: var(--cms-btn-color);
    color: var(--cms-btn-color);
}
.cms-btn-outline:hover {
    background-color: var(--cms-btn-color);
    border-color: var(--cms-btn-color);
    color: var(--cms-btn-fg);
}

.cms-btn-soft {
    background-color: var(--cms-btn-tint);
    border-color: transparent;
    color: var(--cms-btn-color);
}
.cms-btn-soft:hover {
    background-color: color-mix(in srgb, var(--cms-btn-color) 22%, white);
    color: var(--cms-btn-hover);
}

.cms-btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--cms-btn-color);
}
.cms-btn-ghost:hover {
    background-color: var(--cms-btn-tint);
    color: var(--cms-btn-hover);
}

/* 그라데이션은 고른 색 하나에서 만듭니다(밝은 쪽 → 고른 색 → 어두운 쪽).
   색을 두 칸 묻지 않기 위해서입니다. */
.cms-btn-gradient {
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--cms-btn-color) 72%, white),
        var(--cms-btn-color) 55%,
        var(--cms-btn-hover));
    border-color: transparent;
    color: var(--cms-btn-fg);
}
.cms-btn-gradient:hover {
    filter: brightness(1.07);
    color: var(--cms-btn-fg);
}

/* 배경도 테두리도 없는 '글자 링크'. 좌우 여백을 없애 본문 글줄에 붙습니다. */
.cms-btn-plain {
    background-color: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    color: var(--cms-btn-color);
}
.cms-btn-plain:hover {
    color: var(--cms-btn-hover);
    text-decoration: underline;
}

/* ── 크기 ───────────────────────────────────────────────────── */

.cms-btn-sm {
    padding: 0.45rem 1.05rem;
    font-size: 0.875rem;
    border-width: 1px;
}
.cms-btn-lg {
    padding: 0.95rem 2.1rem;
    font-size: 1.125rem;
}
.cms-btn-xl {
    padding: 1.15rem 2.8rem;
    font-size: 1.25rem;
}

/* ── 아이콘만 있는 버튼 ─────────────────────────────────────────
   글자 없이 아이콘 하나뿐인 버튼입니다(전화·카톡·위로 가기 같은 자리).
   정사각으로 잡아 두고 둥글기는 아래 '모서리' 가 정합니다 — 알약이면 동그라미,
   각지게면 네모입니다. 블록은 알약(동그라미)으로 들어갑니다.

   ★ 글자를 감춰서 만들지 않았습니다. 감추면 그 글자를 고칠 방법이 없으면서
     화면에서는 사라져 '고장난 것' 처럼 보입니다(button.plugin.js 블록 주석). */

.cms-btn.cms-btn-icon-only {
    width: 3.2rem;
    height: 3.2rem;
    padding: 0;
}
.cms-btn-icon-only > i { font-size: 1.15em; }

.cms-btn-sm.cms-btn-icon-only { width: 2.4rem; height: 2.4rem; }
.cms-btn-lg.cms-btn-icon-only { width: 3.8rem; height: 3.8rem; }
.cms-btn-xl.cms-btn-icon-only { width: 4.5rem; height: 4.5rem; }

/* ── 모서리 ─────────────────────────────────────────────────── */

.cms-btn-sharp { --cms-btn-radius: 0; }
.cms-btn-pill  { --cms-btn-radius: 999px; }

/* ── 효과 ───────────────────────────────────────────────────── */

.cms-btn-shadow {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}
.cms-btn-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.2);
}

/* ── 폭 · 정렬 ──────────────────────────────────────────────────
   버튼은 글자와 같은 인라인 요소라 자기 자신은 정렬되지 않습니다. 아이콘 정렬과
   같은 방식으로, 한 줄을 차지하게 만든 뒤 바깥 여백(margin:auto)으로 밉니다.

   ★ 클래스 두 개짜리 선택자를 쓰는 이유 — .cms-btn 의 display 를 이겨야 하는데,
     클래스 하나끼리는 우선순위가 같아 파일 순서에 기대게 됩니다.
   ★ '가로 꽉 채우기'를 정렬보다 **뒤에** 둡니다. 둘 다 골랐을 때는 꽉 채우기가
     이겨야 합니다(폭을 정하는 쪽이 정렬보다 나중에 정해집니다). */

.cms-btn.cms-btn-align-left {
    display: flex;
    width: fit-content;
    margin-right: auto;
}
.cms-btn.cms-btn-align-center {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.cms-btn.cms-btn-align-right {
    display: flex;
    width: fit-content;
    margin-left: auto;
}

.cms-btn.cms-btn-block {
    display: flex;
    width: 100%;
}

/* ── 버튼 줄 (버튼 여러 개를 나란히) ────────────────────────── */

.cms-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.cms-btn-row-center  { justify-content: center; }
.cms-btn-row-right   { justify-content: flex-end; }
.cms-btn-row-between { justify-content: space-between; }

/* 줄 안에서는 버튼이 저 혼자 늘어나지 않게 합니다(줄이 배치를 맡습니다) */
.cms-btn-row > .cms-btn {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 575.98px) {
    /* 좁은 화면에서 버튼 두 개가 반 칸씩 찌그러지지 않게 위아래로 세웁니다 */
    .cms-btn-row {
        flex-direction: column;
        align-items: stretch;
    }
    .cms-btn-row > .cms-btn {
        width: 100%;
    }
    /* 아이콘만 있는 버튼은 늘리지 않습니다(정사각이라야 동그라미로 보입니다) */
    .cms-btn-row > .cms-btn-icon-only {
        width: 3.2rem;
        align-self: center;
    }
}

/* ─────────────────────────────────────────────
   카드 (card.plugin.js · '카드' 블록 · 카드 종류·모양 고르기)
   ─────────────────────────────────────────────
   버튼(.cms-btn)과 같은 얼개입니다 — 종류(안에 무엇이 들었는가) × 모양(겉모습)의
   조합이고, 조합마다 CSS 를 쓰지 않기 위해 **색은 클래스가 아니라 변수 한 칸**
   (--cms-crd-color)에 둡니다. 색 하나를 바꾸면 연한 배경(--cms-crd-tint)과
   테두리(--cms-crd-line)까지 color-mix 로 따라옵니다.

   ★ 이름이 왜 .cms-card 가 아닌가 —
     .cms-card 는 이미 '카드 그리드 섹션'(card-grid.plugin.js)의 카드가 쓰고 있습니다.
     같은 이름을 나눠 쓰면 두 CSS 가 서로 배경·여백을 덮어써서 '설정은 바꿨는데
     화면은 그대로' 가 됩니다(버튼이 부트스트랩 .btn 을 피한 것과 같은 이유).
     그래서 이 카드는 .cms-crd 로, 저쪽 섹션 카드와 완전히 갈라 둡니다.

   ★ 글자색은 편집기가 배경 밝기를 재서 --cms-crd-fg 로 함께 써 넣습니다
     (색 채우기·그라데이션에서만 쓰입니다 — 옅은 모양은 본문 색을 그대로 씁니다). */

.cms-crd {
    --cms-crd-color: var(--bs-primary, #4f46e5);
    --cms-crd-fg: #fff;
    --cms-crd-tint: color-mix(in srgb, var(--cms-crd-color) 10%, white);
    --cms-crd-line: color-mix(in srgb, var(--cms-crd-color) 28%, white);
    --cms-crd-radius: 14px;
    --cms-crd-pad: 1.75rem;

    position: relative;
    display: flex;
    flex-direction: column;
    /* 줄 안에 나란히 놓였을 때 글 길이가 달라도 카드 높이는 같게 맞춥니다 */
    height: 100%;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: var(--cms-crd-radius);
    /* 사진이 카드 모서리를 넘지 않게 합니다(모서리 둥글기를 바꿔도 따라옵니다) */
    overflow: hidden;
    color: #1f2937;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s, background-color 0.2s;
}

.cms-crd-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /* 글은 위에서부터 채우고 버튼은 아래로 밀어 둡니다(줄 안에서 버튼 높이 맞춤) */
    flex: 1 1 auto;
    padding: var(--cms-crd-pad);
}

/* ── 모양 ───────────────────────────────────────────────────── */

/* 배경만 — 테두리도 그림자도 없는 가장 얌전한 카드 */
.cms-crd-plain {
    background-color: #fff;
}

.cms-crd-outline {
    border-color: #e5e7eb;
}

.cms-crd-shadow {
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

.cms-crd-soft {
    background-color: var(--cms-crd-tint);
    border-color: transparent;
}

.cms-crd-solid {
    background-color: var(--cms-crd-color);
    border-color: var(--cms-crd-color);
    color: var(--cms-crd-fg);
}

.cms-crd-gradient {
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--cms-crd-color) 72%, white),
        var(--cms-crd-color) 55%,
        color-mix(in srgb, var(--cms-crd-color) 80%, black));
    border-color: transparent;
    color: var(--cms-crd-fg);
}

/* 색을 깐 모양에서는 안쪽 글자도 함께 뒤집습니다.
   ★ 옅은 모양(배경만·테두리·그림자·연한 채우기)에는 손대지 않습니다 —
     그쪽은 사이트 본문 색을 그대로 쓰는 편이 어느 테마에서나 안전합니다. */
.cms-crd-solid .cms-crd-title,
.cms-crd-gradient .cms-crd-title,
.cms-crd-solid .cms-crd-text,
.cms-crd-gradient .cms-crd-text,
.cms-crd-solid .cms-crd-eyebrow,
.cms-crd-gradient .cms-crd-eyebrow,
.cms-crd-solid .cms-crd-role,
.cms-crd-gradient .cms-crd-role,
.cms-crd-solid .cms-crd-num,
.cms-crd-gradient .cms-crd-num,
.cms-crd-solid .cms-crd-stat,
.cms-crd-gradient .cms-crd-stat,
.cms-crd-solid .cms-crd-statlabel,
.cms-crd-gradient .cms-crd-statlabel,
.cms-crd-solid .cms-crd-meta,
.cms-crd-gradient .cms-crd-meta {
    color: var(--cms-crd-fg);
}

.cms-crd-solid .cms-crd-text,
.cms-crd-gradient .cms-crd-text,
.cms-crd-solid .cms-crd-statlabel,
.cms-crd-gradient .cms-crd-statlabel,
.cms-crd-solid .cms-crd-role,
.cms-crd-gradient .cms-crd-role,
.cms-crd-solid .cms-crd-meta,
.cms-crd-gradient .cms-crd-meta {
    opacity: 0.88;
}

/* 색 위에 얹힌 아이콘 칸은 배경을 반투명 흰색으로 둡니다(연한 색 칠은 안 보입니다) */
.cms-crd-solid .cms-crd-icon,
.cms-crd-gradient .cms-crd-icon {
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--cms-crd-fg);
}

/* ── 버튼도 함께 뒤집습니다 ──────────────────────────────────
   ★★ 버튼은 자기 색을 **변수 한 칸**으로 들고 있습니다(--cms-btn-color). 그래서
     위 글자색 목록에 `.cms-btn` 을 더해도 안 따라옵니다 — `.cms-btn-plain` 이
     `color: var(--cms-btn-color)` 로 다시 못 박기 때문입니다. 변수를 카드의
     글자색으로 돌려 놓아야 합니다.
   ★★ 파일 카드가 **버튼을 든 유일한 종류**라, 위 목록을 쓸 때는 없던 조각입니다.
     그래서 색 깐 모양에서 indigo 배경에 indigo 글자가 되어 **버튼이 통째로
     안 보였습니다**(브라우저로 확인 — 대비 1:1). 새 종류가 조각을 하나 더하면
     **색 깐 모양의 목록도 함께 봐야 한다**는 것이 여기서 남는 교훈입니다.
   ★ --cms-btn-fg 도 함께 돌립니다. 버튼 모양을 '채우기' 로 바꾸면 흰 버튼이 되는데
     그 글자색이 이 변수입니다 — 안 돌리면 흰 버튼에 흰 글자가 됩니다.
   ★ 사진 위 겹침(overlay)도 넣습니다. 그쪽은 글자색을 #fff 로 직접 두지만, 버튼이
     들어올 수 있는 자리라 같은 처지입니다. */
.cms-crd-solid .cms-btn,
.cms-crd-gradient .cms-btn,
.cms-crd-overlay .cms-btn {
    --cms-btn-color: var(--cms-crd-fg);
    --cms-btn-fg: var(--cms-crd-color);
}

/* ── 모서리 · 안쪽 여백 ─────────────────────────────────────── */

.cms-crd-sharp { --cms-crd-radius: 0; }
.cms-crd-round { --cms-crd-radius: 26px; }

.cms-crd-tight { --cms-crd-pad: 1.1rem; }
.cms-crd-roomy { --cms-crd-pad: 2.5rem; }

/* ── 강조 띠 ────────────────────────────────────────────────── */

.cms-crd-topline  { border-top: 4px solid var(--cms-crd-color); }
.cms-crd-sideline { border-left: 4px solid var(--cms-crd-color); }

/* ── 효과 ───────────────────────────────────────────────────── */

.cms-crd-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
}

.cms-crd-zoom .cms-crd-img {
    transition: transform 0.4s;
}

.cms-crd-zoom:hover .cms-crd-img {
    transform: scale(1.06);
}

/* ── 글 정렬 ────────────────────────────────────────────────── */

.cms-crd-center { text-align: center; }
.cms-crd-center .cms-crd-body { align-items: center; }

/* ── 안쪽 조각 ──────────────────────────────────────────────── */

/* 사진 — 카드마다 사진 크기가 제각각이면 줄이 들쭉날쭉해지므로 비율을 못 박습니다.
   (담당자가 스타일 탭에서 높이를 지정하면 그 값이 이깁니다) */
.cms-crd-media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: #f1f5f9;
}

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

.cms-crd-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background-color: var(--cms-crd-color);
    color: var(--cms-crd-fg);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.6;
}

.cms-crd-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-bottom: 0.3rem;
    border-radius: 14px;
    background-color: var(--cms-crd-tint);
    color: var(--cms-crd-color);
    font-size: 1.4rem;
}

.cms-crd-avatar {
    width: 7.5rem;
    height: 7.5rem;
    margin: var(--cms-crd-pad) auto 0;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f1f5f9;
}

/* 사람 카드는 사진이 이미 위쪽 여백을 만들었으므로 본문 위 여백을 줄입니다 */
.cms-crd-avatar + .cms-crd-body {
    padding-top: 1rem;
}

.cms-crd-eyebrow {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cms-crd-color);
}

.cms-crd-title {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.4;
}

.cms-crd-text {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.75;
    color: #64748b;
}

.cms-crd-role {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cms-crd-color);
}

.cms-crd-num {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--cms-crd-color);
    opacity: 0.55;
}

.cms-crd-stat {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--cms-crd-color);
}

.cms-crd-statlabel {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
}

/* 파일 카드의 부가 정보 줄(형식 · 용량 · 날짜).
   ★ 숫자 폭을 고정합니다 — 카드를 여러 장 나란히 놓으면 '2.4 MB' 와 '12.8 MB' 의
     자릿수가 어긋나 줄이 들쭉날쭉해 보입니다. */
.cms-crd-meta {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

/* 카드 안의 버튼은 글이 길든 짧든 카드 아래에 붙어 줄이 가지런해집니다 */
.cms-crd-body > .cms-btn {
    margin-top: auto;
    align-self: flex-start;
}

.cms-crd-center .cms-crd-body > .cms-btn {
    align-self: center;
}

/* ── 사진 위 글자 카드 ──────────────────────────────────────── */
/*
   사진을 배경으로 깔고 글을 그 위에 얹습니다.
   ★ 글 뒤에 어두운 그라데이션(스크림)을 깝니다 — 밝은 사진 위 흰 글씨는 스크림이
     없으면 읽을 수 없는데, 사진은 담당자가 바꾸므로 밝기를 미리 알 수 없습니다.
*/
.cms-crd-overlay {
    min-height: 20rem;
    justify-content: flex-end;
    color: #fff;
}

.cms-crd-overlay .cms-crd-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.cms-crd-overlay .cms-crd-body {
    position: relative;
    flex: 0 0 auto;
    padding-top: 3.5rem;
    background-image: linear-gradient(to top, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0));
}

.cms-crd-overlay .cms-crd-title,
.cms-crd-overlay .cms-crd-text,
.cms-crd-overlay .cms-crd-eyebrow {
    color: #fff;
}

.cms-crd-overlay .cms-crd-text {
    opacity: 0.9;
}

/* ── 카드 줄 ────────────────────────────────────────────────── */
/*
   카드를 나란히 놓는 칸입니다. 열 개수는 클래스로 정하고, 아무것도 안 주면
   칸 너비에 맞춰 저절로 접힙니다(auto-fit).
   ★ 카드마다 폭을 주지 않습니다 — 줄이 배치를 맡습니다(버튼 줄과 같은 규약).
*/
.cms-crd-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
    align-items: stretch;
    margin: 1.5rem 0;
}

.cms-crd-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-crd-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-crd-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cms-crd-row-tight { gap: 0.85rem; }
.cms-crd-row-wide  { gap: 2.5rem; }

@media (max-width: 991.98px) {
    .cms-crd-row-3,
    .cms-crd-row-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    /* 좁은 화면에서 열을 못 박아 두면 카드가 반 칸씩 찌그러집니다 */
    .cms-crd-row,
    .cms-crd-row-2,
    .cms-crd-row-3,
    .cms-crd-row-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─────────────────────────────────────────────
   배지 · 라벨 · 태그 (badge.plugin.js)
   ─────────────────────────────────────────────
   버튼(.cms-btn)·카드(.cms-crd)와 같은 얼개입니다 — 종류(안에 무엇이 들었는가) ×
   모양(겉모습)의 조합이고, 조합마다 CSS 를 쓰지 않기 위해 **색은 클래스가 아니라
   변수 한 칸**(--cms-bdg-color)에 둡니다.

   ★★ 클래스 이름이 .cms-badge 가 아니라 .cms-bdg 인 이유 — '배지' 라는 이름은
     이미 넷이 나눠 쓰고 있습니다(.cms-card-badge · .cms-dept-badge ·
     .cms-directions-badge · .cms-crd-badge). 비슷한 이름을 하나 더 만들면 어느
     CSS 가 이겼는지 눈으로 가릴 수 없습니다(.cms-card → .cms-crd 와 같은 사정).

   ★ --cms-bdg-deep 은 '연한 바탕 위의 글자색' 입니다. 연한 채우기·테두리·점선에서
     원색 그대로 쓰면 노랑·연두 계열이 읽히지 않아, 같은 색을 어둡게 낮춰 씁니다.
   ★ --cms-bdg-fg 는 편집기가 배경 밝기를 재서 함께 써 넣습니다(채우기 계열의
     글자색). 여기 기본값(흰색)은 색을 고르지 않았을 때(=테마색 위)만 쓰입니다. */

.cms-bdg {
    --cms-bdg-color: var(--bs-primary, #4f46e5);
    --cms-bdg-fg: #fff;
    --cms-bdg-deep: color-mix(in srgb, var(--cms-bdg-color) 78%, black);
    --cms-bdg-tint: color-mix(in srgb, var(--cms-bdg-color) 14%, white);
    --cms-bdg-radius: 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    max-width: 100%;
    padding: 0.28em 0.68em;
    border: 1px solid transparent;
    border-radius: var(--cms-bdg-radius);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.5;
    /* 배지는 짧은 딱지입니다. 줄바꿈을 허용하면 '모집 / 중' 처럼 갈라집니다. */
    white-space: nowrap;
    /* 글줄 안에서 글자와 밑선을 맞춥니다(배지만 아래로 처지지 않게) */
    vertical-align: middle;
}

/* 배지 안 아이콘. 글자 크기를 따라가서 크기를 따로 안 만져도 됩니다. */
.cms-bdg > i {
    flex: 0 0 auto;
    font-size: 0.95em;
    line-height: 1;
}

/* ── 모양 ───────────────────────────────────────────────────── */

.cms-bdg-solid {
    background-color: var(--cms-bdg-color);
    border-color: var(--cms-bdg-color);
    color: var(--cms-bdg-fg);
}

.cms-bdg-soft {
    background-color: var(--cms-bdg-tint);
    border-color: transparent;
    color: var(--cms-bdg-deep);
}

.cms-bdg-outline {
    background-color: transparent;
    border-color: var(--cms-bdg-color);
    color: var(--cms-bdg-deep);
}

.cms-bdg-dash {
    background-color: transparent;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--cms-bdg-color) 60%, white);
    color: var(--cms-bdg-deep);
}

/* 그라데이션은 고른 색 하나에서 만듭니다(밝은 쪽 → 고른 색 → 어두운 쪽).
   색을 두 칸 묻지 않기 위해서입니다. */
.cms-bdg-gradient {
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--cms-bdg-color) 72%, white),
        var(--cms-bdg-color) 55%,
        var(--cms-bdg-deep));
    border-color: transparent;
    color: var(--cms-bdg-fg);
}

/* 배경도 테두리도 없는 '글자만'. 여백은 남겨 둡니다 — 다른 배지와 나란히 놓였을 때
   글자 높이가 어긋나지 않게 하려는 것입니다. */
.cms-bdg-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--cms-bdg-deep);
}

/* ── 크기 ───────────────────────────────────────────────────── */

.cms-bdg-sm {
    padding: 0.2em 0.55em;
    font-size: 0.72rem;
}
.cms-bdg-lg {
    padding: 0.36em 0.9em;
    font-size: 0.95rem;
}

/* ── 상태 점 ────────────────────────────────────────────────────
   '모집중 · 마감' 처럼 지금 상태를 가리키는 점입니다. 색을 따로 두지 않고
   글자색(currentColor)을 그대로 씁니다 — 모양이 채우기면 흰 점, 연한 채우기면
   진한 점이 되어, 배지 색 하나만 바꿔도 점이 함께 따라옵니다. */

.cms-bdg-dot {
    flex: 0 0 auto;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: currentColor;
}

/* ── 두 칸 배지 (이름 + 값) ─────────────────────────────────────
   '접수 | D-7' 처럼 왼쪽은 이름, 오른쪽은 값입니다. 왼쪽 칸에 배경을 따로 깔지
   않고 **가는 세로선**으로 가릅니다 — 배경을 깔면 여섯 가지 모양마다 어울리는
   색이 달라져, 모양을 바꿀 때마다 어긋납니다. */

.cms-bdg-key {
    flex: 0 0 auto;
    margin-right: 0.1em;
    padding-right: 0.5em;
    border-right: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    font-weight: 600;
    opacity: 0.85;
}

/* ── 숫자 배지 ──────────────────────────────────────────────────
   개수를 담는 동그란 배지입니다.

   ★ 여기서 모서리를 **변수로** 바꾸고, 아래 '모서리' 절보다 먼저 둡니다. 그래야
     '각지게' 를 고른 사람이 이깁니다(같은 굵기의 선택자는 나중에 쓴 쪽이 이깁니다).
   ★ 폭은 min-width 로만 잡습니다. padding 을 못 박으면 '작게 · 크게' 가 안 먹습니다. */

.cms-bdg-count {
    --cms-bdg-radius: 999px;
    min-width: 1.9em;
    font-variant-numeric: tabular-nums;
}

/* ── 모서리 ─────────────────────────────────────────────────── */

.cms-bdg-sharp { --cms-bdg-radius: 0; }
.cms-bdg-pill  { --cms-bdg-radius: 999px; }

/* ── 효과 ───────────────────────────────────────────────────── */

.cms-bdg-shadow {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

/* ── 정렬 ───────────────────────────────────────────────────────
   배지는 글자와 같은 인라인 요소라 자기 자신은 정렬되지 않습니다. 버튼·아이콘과
   같은 방식으로, 한 줄을 차지하게 만든 뒤 바깥 여백(margin:auto)으로 밉니다.

   ★ 클래스 두 개짜리 선택자를 쓰는 이유 — .cms-bdg 의 display 를 이겨야 하는데,
     클래스 하나끼리는 우선순위가 같아 파일 순서에 기대게 됩니다. */

.cms-bdg.cms-bdg-align-left {
    display: flex;
    width: fit-content;
    margin-right: auto;
}
.cms-bdg.cms-bdg-align-center {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.cms-bdg.cms-bdg-align-right {
    display: flex;
    width: fit-content;
    margin-left: auto;
}

/* ── 배지 줄 (태그 여러 개를 나란히) ────────────────────────────
   ★ 좁은 화면에서 세로로 세우지 않습니다(버튼 줄과 다른 점). 배지는 원래 작아서
     반 칸으로 찌그러질 일이 없고, 태그 여섯 개가 세로로 서면 목록처럼 보입니다.
     넘치면 그냥 다음 줄로 넘어가게 둡니다(flex-wrap). */

.cms-bdg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0;
}
.cms-bdg-row-center { justify-content: center; }
.cms-bdg-row-right  { justify-content: flex-end; }

/* ─────────────────────────────────────────────
   알림 상자 (alert.plugin.js)
   ─────────────────────────────────────────────
   버튼(.cms-btn)·카드(.cms-crd)·배지(.cms-bdg)와 같은 얼개입니다 — 종류(안에 무엇이
   들었는가) × 겉모습의 조합이고, 조합마다 CSS 를 쓰지 않기 위해 **색은 클래스가
   아니라 변수 한 칸**(--cms-alert-color)에 둡니다.

   ★ 클래스 이름은 `.cms-alert` 그대로입니다. 카드(.cms-card → .cms-crd)·배지
     (.cms-badge → .cms-bdg)는 그 이름을 이미 다른 섹션이 쓰고 있어 물러나야 했지만,
     '알림' 계열은 저장소 어디에서도 쓰이지 않아 자리가 비어 있습니다.

   ★ **본문 글자색은 색을 따라가지 않습니다.** 배지는 글자가 두어 자라 통째로 색을
     입혀도 읽히지만, 알림 상자는 여러 줄짜리 문단입니다. 주황색 본문 다섯 줄은
     읽히지 않으므로, 색은 상자(바탕·띠·테두리)와 **아이콘·제목**만 씁니다.
     예외는 '채우기'(.cms-alert-solid) 하나 — 바탕이 색이라 글자가 뒤집힙니다.

   ★ --cms-alert-deep 은 '연한 바탕 위의 색' 입니다. 노랑·연두 계열을 원색 그대로
     쓰면 아이콘·제목이 읽히지 않아, 같은 색을 어둡게 낮춰 씁니다.
   ★ --cms-alert-fg 는 편집기가 배경 밝기를 재서 함께 써 넣습니다(채우기의 글자색). */

.cms-alert {
    --cms-alert-color: var(--bs-primary, #4f46e5);
    --cms-alert-fg: #fff;
    --cms-alert-deep: color-mix(in srgb, var(--cms-alert-color) 76%, black);
    --cms-alert-tint: color-mix(in srgb, var(--cms-alert-color) 11%, white);
    --cms-alert-radius: 10px;
    --cms-alert-pad-y: 1rem;
    --cms-alert-pad-x: 1.15rem;

    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 1.25rem 0;
    padding: var(--cms-alert-pad-y) var(--cms-alert-pad-x);
    border: 1px solid transparent;
    border-radius: var(--cms-alert-radius);
    color: #1f2937;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ── 모양 ───────────────────────────────────────────────────── */

.cms-alert-soft {
    background-color: var(--cms-alert-tint);
    border-color: transparent;
}

/* 가장 많이 쓰는 형태입니다. 왼쪽 선만 굵게 바꾸고 나머지 테두리는 그대로 둡니다
   (테두리 자체를 없애면 굵기 차이 때문에 위아래가 반 칸씩 어긋나 보입니다). */
.cms-alert-left {
    background-color: var(--cms-alert-tint);
    border-color: transparent;
    border-left-width: 4px;
    border-left-color: var(--cms-alert-color);
}

/* ★ 테두리 색을 회색으로 못 박지 않습니다 — 어두운 배경 섹션 위에 얹으면 회색 선만
     둥둥 뜹니다. 고른 색을 옅게 섞어 두면 어느 바탕에서나 상자로 보입니다. */
.cms-alert-top {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--cms-alert-color) 25%, transparent);
    border-top-width: 4px;
    border-top-color: var(--cms-alert-color);
}

.cms-alert-outline {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--cms-alert-color) 50%, transparent);
}

.cms-alert-solid {
    background-color: var(--cms-alert-color);
    border-color: var(--cms-alert-color);
    color: var(--cms-alert-fg);
}

/* 바탕도 테두리도 없는 '글자만'. 좌우 여백까지 없애 본문과 같은 줄에서 시작하게
   합니다 — 아이콘 하나로 구분되는 각주 같은 안내에 씁니다. */
.cms-alert-plain {
    background-color: transparent;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

/* ── 크기 ───────────────────────────────────────────────────── */

.cms-alert-sm {
    --cms-alert-pad-y: 0.7rem;
    --cms-alert-pad-x: 0.85rem;
    gap: 0.6rem;
    font-size: 0.875rem;
}
.cms-alert-lg {
    --cms-alert-pad-y: 1.5rem;
    --cms-alert-pad-x: 1.7rem;
    gap: 1.1rem;
    font-size: 1.0625rem;
}

/* ── 모서리 · 효과 ──────────────────────────────────────────────
   ★ 배지처럼 999px 로 두지 않습니다. 여러 줄짜리 상자를 완전히 둥글리면 첫 줄과
     마지막 줄만 안쪽으로 밀려 글이 계단처럼 보입니다. */

.cms-alert-sharp { --cms-alert-radius: 0; }
.cms-alert-round { --cms-alert-radius: 20px; }

.cms-alert-shadow { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10); }

/* ── 배치 ───────────────────────────────────────────────────────
   가운데 모음 — 아이콘이 위로 올라가고 글이 가운데로 섭니다. 짧은 한마디
   (휴무 안내 · 표어)에 쓰고, 긴 글에는 왼쪽 아이콘이 읽기 편합니다. */

.cms-alert-center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cms-alert-center .cms-alert-body { width: 100%; }
.cms-alert-center .cms-alert-icon { margin-top: 0; font-size: 1.6em; }

/* ── 아이콘 ─────────────────────────────────────────────────────
   ★ margin-top 은 글자 첫 줄과 눈높이를 맞추기 위한 것입니다(아이콘은 글자보다
     크기 때문에 그냥 두면 살짝 위로 뜹니다). */

.cms-alert-icon {
    flex: 0 0 auto;
    margin-top: 0.2em;
    font-size: 1.15em;
    line-height: 1.45;
    color: var(--cms-alert-deep);
}

/* ── 내용 ───────────────────────────────────────────────────────
   ★ min-width:0 이 없으면 긴 URL 한 줄이 상자를 밖으로 밀어냅니다
     (flex 자식의 기본 최소 폭은 '내용 폭' 입니다). */

.cms-alert-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cms-alert-title {
    margin: 0 0 0.25rem;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.5;
    color: var(--cms-alert-deep);
}

.cms-alert-text { margin: 0; }

.cms-alert-list {
    margin: 0.55rem 0 0;
    padding-left: 1.15rem;
}
.cms-alert-list li + li { margin-top: 0.25rem; }

.cms-alert-cite {
    margin-top: 0.55rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: color-mix(in srgb, currentColor 62%, transparent);
}

/* 채우기에서는 바탕이 색이라 아이콘·제목까지 글자색을 따릅니다
   (여기서 색을 그대로 두면 색 위에 같은 색 글자가 되어 사라집니다). */
.cms-alert-solid .cms-alert-icon,
.cms-alert-solid .cms-alert-title { color: inherit; }

/* ── 성구 인용 ──────────────────────────────────────────────────
   겉모습이 아니라 **종류**의 일부입니다(alert.plugin.js 의 QUOTE_CLASS). */

.cms-alert-quote .cms-alert-text {
    font-size: 1.0625em;
    line-height: 1.95;
}
.cms-alert-quote .cms-alert-icon {
    font-size: 1.4em;
    opacity: 0.55;
}

/* ── 상자 안의 버튼 ─────────────────────────────────────────────
   ★★ 안쪽 버튼은 버튼 플러그인의 것을 그대로 씁니다(.cms-btn). 다만 색만은 상자를
     따라오게 합니다 — 빨강 주의 상자에 보라색 버튼이 앉으면 '이건 다른 이야기' 처럼
     읽힙니다. 클래스 두 개짜리 선택자라 .cms-btn 의 기본값을 이기고, 담당자가 버튼
     자체에 색을 주면(#id 규칙) 그쪽이 다시 이깁니다.
   ★ 채우기에서는 바탕과 버튼이 같은 색이 되어 버튼이 사라지므로 뒤집습니다. */

.cms-alert .cms-btn {
    --cms-btn-color: var(--cms-alert-color);
    --cms-btn-fg: var(--cms-alert-fg);
}
.cms-alert-solid .cms-btn {
    --cms-btn-color: var(--cms-alert-fg);
    --cms-btn-fg: var(--cms-alert-color);
}
.cms-alert .cms-btn-row { margin-top: 0.9rem; }

@media (max-width: 575.98px) {
    /* 좁은 화면에서는 여백을 줄입니다. 상자가 화면 폭을 거의 다 쓰므로 좌우 여백이
       그대로면 글이 들어갈 자리가 남지 않습니다. */
    .cms-alert {
        --cms-alert-pad-x: 0.9rem;
        gap: 0.6rem;
    }
}

/* ─────────────────────────────────────────────
   목록 (list.plugin.js)
   ─────────────────────────────────────────────
   버튼·카드·배지·알림 상자와 같은 얼개입니다 — 종류(무엇으로 항목을 가리키는가) ×
   겉모습의 조합이고, 조합마다 CSS 를 쓰지 않기 위해 **표식 색은 클래스가 아니라
   변수 한 칸**(--cms-lst-color)에 둡니다.

   ★★ 클래스 이름이 .cms-list 가 아니라 .cms-lst 인 이유 — '…-list' 로 끝나는 이름을
     이미 여럿이 나눠 쓰고 있습니다(.cms-dynamic-list · .cms-dept-info-list ·
     .cms-greeting-profile-list · .cms-wnum-list · .cms-wtl-list · .cms-alert-list …).
     비슷한 이름을 하나 더 만들면 어느 CSS 가 이겼는지 눈으로 가릴 수 없습니다
     (.cms-card → .cms-crd, .cms-badge → .cms-bdg 와 같은 사정).

   ★ **글자색을 못 박지 않습니다.** 알림 상자는 자기 바탕을 가진 상자라 글자색을
     정해도 되지만, 목록은 지면 위에 그대로 얹힙니다 — 색을 박으면 어두운 배경
     섹션에서 글이 사라집니다. 선·줄무늬도 `currentColor` 를 옅게 섞어 씁니다.

   ★ 줄 간격(--cms-lst-line)은 **변수 한 칸**입니다. 표식 칸의 높이를 이 값으로
     잡아야(min-height) 체크·번호·점이 첫 줄 글자와 눈높이가 맞습니다. 둘을 따로
     적으면 크기를 바꿀 때마다 표식만 위로 뜹니다. */

.cms-lst {
    --cms-lst-color: var(--bs-primary, #4f46e5);
    --cms-lst-fg: #fff;
    --cms-lst-deep: color-mix(in srgb, var(--cms-lst-color) 78%, black);
    --cms-lst-tint: color-mix(in srgb, var(--cms-lst-color) 11%, white);
    --cms-lst-line: 1.75;
    --cms-lst-gap: 0.6rem;
    --cms-lst-pad: 0;

    /* 둥글기 — 항목·상자와 번호 동그라미를 따로 둡니다. '각지게' 가 둘을 함께
       낮춥니다(상자만 각지고 번호만 동그란 그림은 어느 쪽도 의도한 것으로 안 보입니다) */
    --cms-lst-radius: 10px;
    --cms-lst-mark-radius: 999px;

    /* 격자로 두는 까닭 — '두 칸 · 세 칸' 을 클래스 한 줄로 만들 수 있습니다.
       flex 로 두면 칸마다 폭을 계산해 넣어야 합니다. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cms-lst-gap);
    margin: 1.15rem 0;
    padding: 0;
    list-style: none;
    line-height: var(--cms-lst-line);
    counter-reset: cms-lst;
}

.cms-lst-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: var(--cms-lst-pad);
    counter-increment: cms-lst;
}

/* ── 표식 ───────────────────────────────────────────────────────
   ★ min-height 를 줄 높이와 같게 두고 가운데 정렬합니다. 그러면 점·번호처럼
     글자보다 작은 표식이 **첫 줄 글자의 눈높이**에 놓입니다(위로 뜨지 않습니다). */

.cms-lst-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(1em * var(--cms-lst-line));
    color: var(--cms-lst-deep);
}
.cms-lst-mark > i { font-size: 0.95em; line-height: 1; }

/* 점 — 점 목록과 설명 목록이 함께 씁니다(표식 칸은 비어 있고 여기서 그립니다) */
.cms-lst-bullet .cms-lst-mark::before,
.cms-lst-desc .cms-lst-mark::before {
    content: "";
    width: 0.42em;
    height: 0.42em;
    border-radius: var(--cms-lst-mark-radius);
    background-color: var(--cms-lst-color);
}

/* 번호 — **CSS 카운터**로 그립니다. 숫자를 글자로 써 넣으면 항목을 지우거나 순서를
   바꿀 때마다 사람이 다시 매겨야 합니다. */
.cms-lst-number .cms-lst-mark::before {
    content: counter(cms-lst);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    height: 1.6em;
    border-radius: var(--cms-lst-mark-radius);
    background-color: var(--cms-lst-color);
    color: var(--cms-lst-fg);
    font-size: 0.78em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 표식을 감춥니다. 조각을 지우는 대신 감추는 까닭은 되돌릴 때 다시 만들지 않아도
   되고, 아이콘에 준 색이 살아 있기 때문입니다(list.plugin.js MARK_OPTIONS). */
.cms-lst-nomark .cms-lst-mark { display: none; }

/* ── 내용 ───────────────────────────────────────────────────────
   ★ min-width:0 이 없으면 긴 URL 한 줄이 항목을 밖으로 밀어냅니다
     (flex 자식의 기본 최소 폭은 '내용 폭' 입니다). */

.cms-lst-body {
    flex: 1 1 auto;
    min-width: 0;
}
.cms-lst-label,
.cms-lst-text { margin: 0; }

/* 설명 목록 — 제목이 위, 설명이 아래입니다.
   ★ 설명 글자색을 회색으로 못 박지 않습니다(currentColor 를 옅게) — 어두운 배경
     섹션에서 회색 글이 바탕에 묻힙니다. */
.cms-lst-desc .cms-lst-label {
    font-weight: 700;
    color: var(--cms-lst-deep);
}
.cms-lst-desc .cms-lst-text {
    font-size: 0.92em;
    color: color-mix(in srgb, currentColor 68%, transparent);
}

/* 두 칸 목록 — 이름은 왼쪽, 값은 오른쪽입니다(예배 시간·담당자 연락처).
   ★ baseline 으로 맞춥니다. center 로 두면 이름이 두 줄로 접힐 때 값만 가운데로
     내려가 어긋나 보입니다. */
.cms-lst-pair .cms-lst-body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.cms-lst-pair .cms-lst-label {
    flex: 0 1 auto;
    font-weight: 600;
}
.cms-lst-pair .cms-lst-text {
    flex: 0 0 auto;
    color: var(--cms-lst-deep);
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── 모양 ───────────────────────────────────────────────────────
   ★ 간격을 `gap: 0` 으로 못 박지 않고 **변수**로 낮춥니다. 못 박으면 아래 '간격'
     클래스(촘촘히 · 여유롭게)가 이 두 모양에서만 조용히 안 먹습니다. */

.cms-lst-divider { --cms-lst-gap: 0; }
.cms-lst-divider .cms-lst-item {
    padding: 0.7rem 0;
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
/* 첫 항목의 윗선만 지웁니다. 두세 칸일 때는 각 칸의 첫 항목에만 걸립니다 */
.cms-lst-divider .cms-lst-item:first-child { border-top: 0; }

.cms-lst-soft .cms-lst-item {
    padding: 0.7rem 0.9rem;
    border-radius: var(--cms-lst-radius);
    background-color: var(--cms-lst-tint);
}

.cms-lst-card .cms-lst-item {
    padding: 0.8rem 1rem;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: var(--cms-lst-radius);
}

.cms-lst-boxed {
    padding: 1rem 1.15rem;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: var(--cms-lst-radius);
}

.cms-lst-zebra { --cms-lst-gap: 0; }
.cms-lst-zebra .cms-lst-item { padding: 0.6rem 0.9rem; }
.cms-lst-zebra .cms-lst-item:nth-child(odd) {
    background-color: color-mix(in srgb, currentColor 6%, transparent);
}

/* ── 칸 수 ──────────────────────────────────────────────────────
   항목이 짧을 때 두세 칸으로 늘어놓습니다(자격 여섯 가지를 세로로 쌓으면 화면만
   길어집니다). 세로 간격은 그대로 두고 가로만 넓게 벌립니다. */

.cms-lst-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; }
.cms-lst-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.6rem; }

/* ── 크기 · 간격 ────────────────────────────────────────────────
   ★ 크기는 rem 이 아니라 **em** 입니다. 목록은 섹션 본문 속에 얹히는 부품이라,
     그 자리의 글자 크기를 기준으로 커지고 작아지는 편이 맞습니다. */

.cms-lst-sm { font-size: 0.9em; }
.cms-lst-lg { font-size: 1.1em; }

.cms-lst-tight { --cms-lst-gap: 0.25rem; }
.cms-lst-roomy { --cms-lst-gap: 1.1rem; }

/* ── 모서리 ─────────────────────────────────────────────────────
   알림 상자의 '모서리' 와 같은 세 단계입니다(.cms-alert-sharp/round 참고).
   ★ '각지게' 는 번호 동그라미까지 각지게 만듭니다.
   ★ '많이 둥글게' 는 999px 가 아니라 22px 입니다 — 여러 줄짜리 항목을 완전히
     둥글리면 첫 줄과 끝 줄만 안쪽으로 밀려 글이 계단처럼 보입니다. */

.cms-lst-sharp {
    --cms-lst-radius: 0;
    --cms-lst-mark-radius: 3px;
}
.cms-lst-round { --cms-lst-radius: 22px; }

/* ── 효과 ───────────────────────────────────────────────────────
   ★ **상자가 있는 모양에서만** 보입니다. '줄만' · '줄 사이 선' · '줄무늬' 에는
     드리울 상자가 없어서, 선택자를 그 세 모양에 못 박아 둡니다 — 아무 데나 걸면
     항목 글자에 그림자가 지는 것처럼 보입니다.
   ★ 선택자에 공백이 없는 자리가 있습니다(.cms-lst-shadow.cms-lst-boxed). 효과
     클래스와 모양 클래스가 **같은 <ul> 에** 함께 붙기 때문입니다. */

.cms-lst-shadow.cms-lst-soft .cms-lst-item,
.cms-lst-shadow.cms-lst-card .cms-lst-item,
.cms-lst-shadow.cms-lst-boxed {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
}

@media (max-width: 767.98px) {
    /* 좁은 화면에서는 한 칸으로 되돌립니다. 두세 칸을 그대로 두면 글이 한 자씩
       끊겨 내려갑니다 — 이건 담당자가 고를 것이 아니라 CSS 가 정합니다. */
    .cms-lst-2,
    .cms-lst-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ─────────────────────────────────────────────
   인용 · 성구 (quote.plugin.js)
   ─────────────────────────────────────────────
   버튼·카드·배지·알림 상자·목록과 같은 얼개입니다 — 종류(안에 무엇이 들었는가) ×
   겉모습의 조합이고, 조합마다 CSS 를 쓰지 않기 위해 **색은 클래스가 아니라 변수
   한 칸**(--cms-qt-color)에 둡니다.

   ★★ 클래스 이름이 .cms-quote 가 아니라 .cms-qt 인 이유 — '…-quote' 를 이미 둘이
     쓰고 있고(.cms-greeting-quote · .cms-alert-quote), 그중 .cms-alert-quote 는
     '이 알림 상자는 성구다' 라는 뜻입니다. 거기에 .cms-quote 를 더하면 둘이 한 화면에
     같이 나올 때 어느 쪽 규칙인지 눈으로 못 가립니다. '…-verse' 도 교차 2단이 셋을
     쓰고 있어 못 씁니다(.cms-crd · .cms-bdg · .cms-lst 와 같은 판단).

   ★ **글자색을 못 박지 않습니다**(목록과 같은 이유). 인용은 지면 위에 그대로
     얹히므로, 색을 박으면 어두운 배경 섹션에서 글이 사라집니다. 선·연한 배경도
     고른 색이나 currentColor 에서 만들어 씁니다.

   ★ 색상 한 칸(--cms-qt-color)이 정하는 것 — 앞의 따옴표, 왼쪽 색 띠, '연한 배경' 의
     바탕(--cms-qt-tint), '배경 따옴표' 의 옅은 따옴표, 성구 장절 배지. */

.cms-qt {
    --cms-qt-color: var(--bs-primary, #4f46e5);
    --cms-qt-fg: #fff;
    --cms-qt-deep: color-mix(in srgb, var(--cms-qt-color) 76%, black);
    --cms-qt-tint: color-mix(in srgb, var(--cms-qt-color) 10%, white);
    --cms-qt-radius: 12px;
    --cms-qt-pad-y: 0;
    --cms-qt-pad-x: 0;

    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    /* 브라우저 기본 blockquote 여백을 지웁니다(좌우 40px 이 들어 있습니다) */
    margin: 1.5rem 0;
    padding: var(--cms-qt-pad-y) var(--cms-qt-pad-x);
    border: 0 solid transparent;
    border-radius: var(--cms-qt-radius);
    font-size: 1.0625rem;
    line-height: 1.9;
    /* 인용은 읽는 호흡이 본문과 달라야 눈에 띕니다 */
    letter-spacing: -0.01em;
}

/* ── 앞의 따옴표 ────────────────────────────────────────────────
   ★ margin-top 은 글 첫 줄과 눈높이를 맞추기 위한 것입니다(따옴표가 글자보다
     크기 때문에 그냥 두면 위로 뜹니다). */

.cms-qt-quote {
    flex: 0 0 auto;
    margin-top: 0.15em;
    color: var(--cms-qt-color);
    font-size: 1.5em;
    line-height: 1.2;
    opacity: 0.75;
}

/* ── 내용 ───────────────────────────────────────────────────────
   ★ min-width:0 이 없으면 긴 URL 한 줄이 인용을 밖으로 밀어냅니다
     (flex 자식의 기본 최소 폭은 '내용 폭' 입니다). */

.cms-qt-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cms-qt-text { margin: 0; }

/* 출처 · 성구 장절 — 클래스는 하나이고 놓는 방법은 **종류**가 정합니다
   (quote.plugin.js 머리말). 여기 기본형은 '— 출처' 꼴입니다. */
.cms-qt-cite {
    margin-top: 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: color-mix(in srgb, currentColor 62%, transparent);
}
.cms-qt-cite::before { content: "— "; }

/* ── 종류: 성구 ─────────────────────────────────────────────────
   겉모습이 아니라 **종류의 일부**입니다. 장절은 '— 요한복음' 이 아니라 색 배지로
   놓습니다 — 성구에서 장절은 출처가 아니라 '어디를 펴야 하는가' 라서, 눈에 바로
   들어와야 합니다. */

.cms-qt-verse .cms-qt-text { font-weight: 500; }
.cms-qt-verse .cms-qt-cite {
    display: inline-block;
    margin-top: 0.7rem;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    background-color: var(--cms-qt-color);
    color: var(--cms-qt-fg);
    font-size: 0.8125rem;
    font-weight: 700;
}
.cms-qt-verse .cms-qt-cite::before { content: none; }

/* ── 종류: 뽑은 문장 ────────────────────────────────────────────
   본문 중간에서 한 문장을 크게 뽑아 보이는 것입니다(pull quote).
   ★ 줄 간격을 함께 줄입니다 — 글씨만 키우면 줄 사이가 벌어져 문단처럼 보입니다. */

.cms-qt-pull .cms-qt-text {
    font-size: 1.45em;
    font-weight: 700;
    line-height: 1.55;
}

/* ── 종류: 인물 ─────────────────────────────────────────────────
   사진 + 이름 + 직함을 한 줄로. */

.cms-qt-by {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.9rem;
    font-size: 0.9375rem;
    line-height: 1.4;
}
.cms-qt-avatar {
    flex: 0 0 auto;
    display: block;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    overflow: hidden;
}
.cms-qt-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cms-qt-name { font-weight: 700; }
.cms-qt-role {
    font-size: 0.875em;
    color: color-mix(in srgb, currentColor 60%, transparent);
}

/* ── 모양 ───────────────────────────────────────────────────────
   ★ 여백을 변수로 둡니다(--cms-qt-pad-*). 상자가 있는 모양만 여백이 필요한데,
     모양마다 padding 을 직접 쓰면 '크게·작게' 가 그중 하나에서만 어긋납니다. */

/* 큰 따옴표(기본) — 앞의 따옴표를 크게 키워 표식으로 씁니다 */
.cms-qt-mark .cms-qt-quote { font-size: 2.1em; }

/* 왼쪽 색 띠 — 가장 무난한 인용 모양입니다 */
.cms-qt-left {
    --cms-qt-pad-x: 1.15rem;
    border-left-width: 3px;
    border-left-color: var(--cms-qt-color);
    border-radius: 0;
}

.cms-qt-soft {
    --cms-qt-pad-y: 1.25rem;
    --cms-qt-pad-x: 1.4rem;
    background-color: var(--cms-qt-tint);
}

/* ★ 테두리 색을 회색으로 못 박지 않습니다 — 어두운 배경 섹션 위에 얹으면 회색 선만
     둥둥 뜹니다(알림 상자에서 정한 것과 같습니다). */
.cms-qt-card {
    --cms-qt-pad-y: 1.25rem;
    --cms-qt-pad-x: 1.4rem;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--cms-qt-color) 28%, transparent);
}

/* 배경 따옴표 — 거대한 따옴표를 옅게 뒤에 깔고 글이 그 위로 흐릅니다.
   ★ 앞의 따옴표 칸과는 무관합니다(설정 칸에서 그것을 끄고 이것만 남길 수 있습니다).
   ★ 가상 요소라 마우스를 받지 않아야 합니다 — 글자 선택을 방해합니다. */
.cms-qt-stamp {
    position: relative;
    --cms-qt-pad-y: 0.6rem;
    --cms-qt-pad-x: 1.6rem;
}
.cms-qt-stamp::before {
    content: "“";   /* 여는 큰따옴표 U+201C */
    position: absolute;
    top: -0.35em;
    left: 0;
    z-index: 0;
    color: var(--cms-qt-color);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 5.5em;
    line-height: 1;
    opacity: 0.12;
    pointer-events: none;
}
.cms-qt-stamp > * { position: relative; z-index: 1; }

/* 장식 없음 — 글만. 앞의 따옴표는 설정 칸에서 따로 끕니다 */
.cms-qt-plain { --cms-qt-pad-x: 0; }

/* ── 크기 ───────────────────────────────────────────────────── */

.cms-qt-sm { font-size: 0.9375rem; line-height: 1.8; }
.cms-qt-lg { font-size: 1.25rem;   line-height: 1.85; }

/* ── 모서리 ─────────────────────────────────────────────────────
   ★ 알림 상자·목록과 같은 세 단계입니다. '왼쪽 색 띠' 는 제 모양에서 이미 0 이라
     여기 값이 겉으로 드러나지 않습니다(띠가 각져야 띠로 보입니다). */

.cms-qt-sharp { --cms-qt-radius: 0; }
.cms-qt-round { --cms-qt-radius: 22px; }

/* ── 정렬 ───────────────────────────────────────────────────────
   가운데 — 따옴표가 위로 올라가고 글이 가운데로 섭니다. 짧은 한 문장(표어·성구)에
   쓰고, 긴 인용에는 왼쪽이 읽기 편합니다(알림 상자의 '가운데 모음' 과 같은 결). */

.cms-qt-center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cms-qt-center .cms-qt-body { width: 100%; }
.cms-qt-center .cms-qt-quote { margin-top: 0; }
.cms-qt-center .cms-qt-by { justify-content: center; }
/* 가운데 정렬에서 배경 따옴표는 글 뒤 가운데에 놓입니다 */
.cms-qt-center.cms-qt-stamp::before { left: 50%; transform: translateX(-50%); }

/* ── 효과 ───────────────────────────────────────────────────────
   ★ **상자가 있는 모양에서만** 보입니다('연한 배경' · '테두리'). 나머지 모양에는
     드리울 상자가 없어서, 선택자를 그 둘에 못 박아 둡니다 — 아무 데나 걸면 글자에
     그림자가 지는 것처럼 보입니다.
   ★ 선택자에 공백이 없습니다. 효과 클래스와 모양 클래스가 **같은 요소에** 함께
     붙기 때문입니다(.cms-qt-shadow.cms-qt-soft). */

.cms-qt-shadow.cms-qt-soft,
.cms-qt-shadow.cms-qt-card {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
}

@media (max-width: 575.98px) {
    /* 좁은 화면에서는 큰 글씨와 여백을 줄입니다 — 뽑은 문장이 화면 폭을 넘어
       한 자씩 끊겨 내려가는 것을 막습니다. */
    .cms-qt { gap: 0.6rem; }
    .cms-qt-pull .cms-qt-text { font-size: 1.2em; }
    .cms-qt-stamp::before { font-size: 4em; }
}

/* ─────────────────────────────────────────────
   구분선 · 여백 (divider.plugin.js)
   ─────────────────────────────────────────────
   앞선 다섯 부품과 같은 얼개입니다 — 종류(가운데에 무엇이 드는가) × 겉모습의
   조합이고, 색은 클래스가 아니라 **변수 한 칸**(--cms-rl-color)에 둡니다.

   ★★ 클래스 이름 — '…-divider' 는 목록의 모양 클래스가(.cms-lst-divider),
     '…-rule' 은 인사말이(.cms-greeting-rule), '…-spacer' 는 온라인헌금이
     (.cms-hcb-spacer) 쓰고 있어 `.cms-rl`(rule) · `.cms-sp`(spacer) 로 갑니다.

   ★★ 선은 **테두리가 아니라 자식 두 개**입니다(.cms-rl-line). 테두리 하나로 그리면
     가운데에 아이콘이나 글자를 놓을 수 없습니다 — 선이 글자 뒤로 지나갑니다.
     두 도막으로 나누면 가운데가 비고, '선만' 종류는 두 도막이 붙어 한 줄로 보입니다
     (간격은 종류 클래스 .cms-rl-mid-on 이 정합니다).

   ★ 기본 색을 회색으로 못 박지 않습니다 — 구분선은 지면 위에 그대로 얹히므로,
     어두운 배경 섹션에서 회색 선만 둥둥 뜹니다. 글자색을 옅게 섞어 씁니다. */

.cms-rl {
    --cms-rl-color: color-mix(in srgb, currentColor 22%, transparent);
    --cms-rl-weight: 2px;
    --cms-rl-room: 2rem;
    --cms-rl-gap: 0;
    --cms-rl-width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cms-rl-gap);
    width: var(--cms-rl-width);
    margin: var(--cms-rl-room) auto;
}

/* 선 두 도막. 가운데가 없으면 붙어서 한 줄로 보입니다(gap 이 0). */
.cms-rl-line {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    border-top: var(--cms-rl-weight) solid var(--cms-rl-color);
}

/* ── 가운데 (아이콘 · 글자 · 점) ────────────────────────────────
   ★ 종류가 가운데를 쓰면 선 사이를 벌립니다. 이 한 클래스가 간격을 정하므로,
     아이콘이든 글자든 점이든 같은 여백으로 놓입니다. */

.cms-rl-mid-on { --cms-rl-gap: 0.9rem; }

.cms-rl-mid {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cms-rl-color);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    /* 가운데 글자는 줄바꿈하지 않습니다 — 소제목 한마디 자리입니다 */
    white-space: nowrap;
}

/* ★ 가운데 아이콘·글자는 **선보다 진하게** 씁니다. 선은 옅어야 배경으로 물러나고,
     가운데는 읽는 것이라 또렷해야 합니다. 색은 한 칸을 함께 보되 진하기만 다릅니다. */
.cms-rl-mid > i { font-size: 1.05em; }
.cms-rl-mid-on .cms-rl-mid {
    color: color-mix(in srgb, var(--cms-rl-color) 100%, black 25%);
}

/* 점 세 개 — CSS 가 그립니다(고칠 글자가 없습니다). */
.cms-rl-dots .cms-rl-mid::before {
    content: "\2022 \2022 \2022";
    letter-spacing: 0.45em;
    /* letter-spacing 이 마지막 글자 뒤에도 붙어 가운데가 왼쪽으로 밀립니다 */
    margin-right: -0.45em;
}

/* ── 모양 ───────────────────────────────────────────────────── */

.cms-rl-solid  .cms-rl-line { border-top-style: solid; }
.cms-rl-dashed .cms-rl-line { border-top-style: dashed; }
.cms-rl-dotted .cms-rl-line { border-top-style: dotted; }

/* 두 줄 — 테두리 하나로는 두 줄을 그릴 수 없어 double 을 씁니다.
   ★ double 은 굵기가 3px 미만이면 한 줄로 뭉개집니다 — 그래서 굵기의 최소값을
     여기서 올립니다(얇게를 골라도 두 줄로 보이게). */
.cms-rl-double .cms-rl-line {
    border-top-style: double;
    border-top-width: max(var(--cms-rl-weight), 3px);
}

/* 양끝 흐림 — 테두리로는 그러데이션을 만들 수 없어 배경으로 그립니다.
   ★ 그래서 border-top 을 지워야 합니다(안 지우면 선이 두 겹으로 보입니다). */
.cms-rl-fade .cms-rl-line {
    border-top: 0;
    height: var(--cms-rl-weight);
    background-image: linear-gradient(to right,
        transparent, var(--cms-rl-color) 45%, var(--cms-rl-color) 55%, transparent);
}
/* 가운데가 있으면 양끝만 흐리는 것이 맞습니다(안쪽 끝은 진하게) */
.cms-rl-mid-on.cms-rl-fade .cms-rl-line:first-child {
    background-image: linear-gradient(to right, transparent, var(--cms-rl-color));
}
.cms-rl-mid-on.cms-rl-fade .cms-rl-line:last-child {
    background-image: linear-gradient(to left, transparent, var(--cms-rl-color));
}

/* 선 없음 — 가운데만 남깁니다(소제목처럼 씁니다) */
.cms-rl-none .cms-rl-line { display: none; }
.cms-rl-none { --cms-rl-gap: 0; }

/* ── 굵기 ───────────────────────────────────────────────────── */

.cms-rl-thin { --cms-rl-weight: 1px; }
.cms-rl-bold { --cms-rl-weight: 4px; }

/* ── 길이 · 정렬 ────────────────────────────────────────────────
   ★ 정렬은 길이가 '꽉' 이 아닐 때만 겉으로 드러납니다(꽉이면 밀 자리가 없습니다).
     칸을 감추지는 않습니다 — 길이를 먼저 줄일 생각이었을 수도 있습니다. */

.cms-rl-half  { --cms-rl-width: 50%; }
.cms-rl-short { --cms-rl-width: 120px; }

.cms-rl-left  { margin-left: 0;  margin-right: auto; }
.cms-rl-right { margin-left: auto; margin-right: 0; }

/* ── 위아래 여백 ───────────────────────────────────────────────── */

.cms-rl-tight { --cms-rl-room: 0.9rem; }
.cms-rl-roomy { --cms-rl-room: 3.5rem; }

/* ─────────────────────────────────────────────
   여백 (빈 자리)
   ─────────────────────────────────────────────
   ★ 안이 비어 있어 화면에 아무것도 안 보이는 것이 이 부품의 정체입니다. 편집기에서는
     page-edit.js 가 켜 두는 core:component-outline 의 점선으로 잡습니다 — 여기에
     자리표를 그리면 실제 페이지에도 그려집니다(캔버스가 사이트 CSS 를 그대로 씁니다).

   ★ 높이를 변수 한 칸(--cms-sp-h)에 모읍니다. 아래 '모바일에서 줄이기' 가 그 한 칸만
     낮추면 되기 때문입니다 — 단계마다 미디어쿼리를 쓰면 다섯 벌이 됩니다. */

.cms-sp {
    --cms-sp-h: 2rem;
    height: var(--cms-sp-h);
    /* flex·grid 안에 놓였을 때 눌리지 않게 합니다(여백은 눌리면 뜻이 없습니다) */
    flex: 0 0 auto;
}

.cms-sp-xs { --cms-sp-h: 0.5rem; }
.cms-sp-sm { --cms-sp-h: 1rem; }
.cms-sp-lg { --cms-sp-h: 4rem; }
.cms-sp-xl { --cms-sp-h: 6rem; }

@media (max-width: 767.98px) {
    /* 절반으로 줄이기 — 데스크톱에서 시원한 6rem 은 좁은 화면에서 '빈 화면 한 판' 이
       되어, 담당자가 아니라 방문자가 스크롤로 값을 치릅니다. */
    .cms-sp-shrink { height: calc(var(--cms-sp-h) / 2); }

    /* 구분선의 넓은 여백도 함께 줄입니다(같은 이유) */
    .cms-rl-roomy { --cms-rl-room: 2rem; }
}

/* ─────────────────────────────────────────────
   아코디언 · 접는 상자 (fold.plugin.js)
   ─────────────────────────────────────────────
   앞선 여섯 부품과 같은 얼개입니다 — 종류(제목 줄에 무엇이 함께 드는가) × 겉모습의
   조합이고, 색은 클래스가 아니라 **변수 한 칸**(--cms-fold-color)에 둡니다.

   ★★ `<details>/<summary>` 로 만듭니다. 기존 FAQ 아코디언은 부트스트랩 collapse 라
     `id` 와 `data-bs-target` 이 짝을 이뤄야 열리는데, **항목을 복제하면 id 가 겹쳐
     엉뚱한 것이 열립니다.** details 는 id 가 없어 복제해도 서로 간섭하지 않고, JS 도
     필요 없으며, 키보드·화면낭독기가 기본으로 알아봅니다.

   ★★ 클래스 이름이 `.cms-acc` 가 아닌 이유 — 연혁이 `.cms-chhistory-acc` ·
     `.cms-chhistory-acc-head` 를 쓰고 있어, 여기에 `.cms-acc-head` 를 더하면
     스타일시트에서 한 글자 차이로 남의 규칙을 고치게 됩니다. `.cms-accordion` 도
     FAQ·연혁이 이미 씁니다.

   ★ 글자색을 못 박지 않습니다(목록·인용·구분선과 같은 이유) — 아코디언은 지면 위에
     그대로 얹히므로, 색을 박으면 어두운 배경 섹션에서 글이 사라집니다. */

.cms-fold {
    --cms-fold-color: var(--bs-primary, #4f46e5);
    --cms-fold-deep: color-mix(in srgb, var(--cms-fold-color) 76%, black);
    --cms-fold-tint: color-mix(in srgb, var(--cms-fold-color) 9%, white);
    --cms-fold-line: color-mix(in srgb, currentColor 14%, transparent);
    --cms-fold-radius: 10px;
    --cms-fold-pad-y: 0.9rem;
    --cms-fold-pad-x: 0;
    --cms-fold-gap: 0;

    display: grid;
    gap: var(--cms-fold-gap);
    margin: 1.4rem 0;
    counter-reset: cms-fold;
}

.cms-fold-item {
    counter-increment: cms-fold;
    border-radius: var(--cms-fold-radius);
}

/* ★ overflow:hidden 은 **둥근 바탕·테두리가 있는 모양에만** 겁니다. 모든 항목에 걸면,
     접힌 내용에 넣은 넓은 것(표·슬라이더처럼 밖으로 삐져나오게 만든 것)이 조용히
     잘립니다. 자를 이유가 있는 곳은 모서리를 둥글린 바탕이 있는 세 모양뿐입니다. */
.cms-fold-soft .cms-fold-item,
.cms-fold-card .cms-fold-item,
.cms-fold-boxed { overflow: hidden; }

/* ── 제목 줄 (summary) ──────────────────────────────────────────
   ★ 브라우저 기본 삼각형 표식을 지웁니다. 웹킷은 별도 의사요소를 씁니다.
   ★ list-style 만으로는 사파리에서 안 지워져 둘 다 필요합니다. */

.cms-fold-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--cms-fold-pad-y) var(--cms-fold-pad-x);
    cursor: pointer;
    list-style: none;
    /* 제목 줄을 두 번 눌렀을 때 글자가 파랗게 잡히는 것을 막습니다 */
    user-select: none;
}
.cms-fold-head::-webkit-details-marker { display: none; }
.cms-fold-head::marker { content: ""; }

/* 키보드로 옮겨 다닐 때 어디에 있는지 보이게 합니다(details 는 기본으로 초점을 받습니다) */
.cms-fold-head:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--cms-fold-color) 45%, white);
    outline-offset: -3px;
}

/* ── 앞칸 (아이콘 · 번호) ───────────────────────────────────────
   ★ 번호는 **CSS 카운터**로 그립니다(앞칸은 비어 있습니다). 숫자를 글자로 써 넣으면
     항목을 지우거나 순서를 바꿀 때마다 사람이 다시 매겨야 합니다(목록과 같은 규약). */

.cms-fold-lead {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cms-fold-deep);
}
.cms-fold-lead > i { font-size: 1.05em; }

/* ★ 아이콘 종류는 앞칸 폭을 번호와 같게 못 박습니다. 안 그러면 아이콘마다 폭이
   달라 항목끼리 제목 시작점이 들쭉날쭉해지고, 번호 종류로 바꿀 때 제목이 옆으로
   튑니다(같은 자리에서 종류만 바뀌어야 합니다). */
.cms-fold-hasicon .cms-fold-lead {
    min-width: 1.7em;
}

.cms-fold-hasnum .cms-fold-lead::before {
    content: counter(cms-fold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7em;
    height: 1.7em;
    border-radius: 999px;
    background-color: var(--cms-fold-tint);
    color: var(--cms-fold-deep);
    font-size: 0.8125em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── 제목 · 부제 ───────────────────────────────────────────────── */

.cms-fold-heading {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cms-fold-title {
    font-weight: 700;
    line-height: 1.5;
}
/* 열린 항목의 제목만 색을 입힙니다 — 어디가 열려 있는지 한눈에 보이게 */
.cms-fold-item[open] > .cms-fold-head > .cms-fold-heading > .cms-fold-title {
    color: var(--cms-fold-deep);
}

.cms-fold-sub {
    font-size: 0.875em;
    font-weight: 400;
    color: color-mix(in srgb, currentColor 62%, transparent);
}

/* ── 여닫는 표식 ────────────────────────────────────────────────
   ★ CSS 가 그립니다. 아이콘 글꼴에 기대면 글꼴이 늦게 뜨는 순간 표식 없는 제목 줄이
     되고, 무엇보다 열렸을 때 돌아가는 그림을 만들 수 없습니다.
   ★ 기본은 화살표 — 정사각형의 두 변만 남겨 45도 돌린 것입니다(V 자). */

.cms-fold-mark {
    flex: 0 0 auto;
    position: relative;
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.25rem;
    color: var(--cms-fold-deep);
    transition: transform 0.18s ease;
}
.cms-fold-mark::before {
    content: "";
    position: absolute;
    top: 15%;
    left: 20%;
    width: 60%;
    height: 60%;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}
.cms-fold-item[open] > .cms-fold-head > .cms-fold-mark { transform: rotate(180deg); }

/* 더하기 · 빼기 — 가로 막대는 늘 있고, 세로 막대가 열리면 사라집니다 */
.cms-fold-plusmark .cms-fold-mark::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    border-right: 0;
    border-bottom: 2px solid currentColor;
    transform: translateY(-50%);
}
.cms-fold-plusmark .cms-fold-mark::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    border-left: 2px solid currentColor;
    transform: translateX(-50%);
    transition: opacity 0.18s ease;
}
.cms-fold-plusmark .cms-fold-item[open] > .cms-fold-head > .cms-fold-mark { transform: none; }
.cms-fold-plusmark .cms-fold-item[open] > .cms-fold-head > .cms-fold-mark::after { opacity: 0; }

.cms-fold-nomark .cms-fold-mark { display: none; }

/* ── 접힌 내용 ──────────────────────────────────────────────────
   ★ 위쪽 여백을 0 으로 둡니다 — 제목 줄의 아래 여백과 겹쳐 두 배로 벌어집니다. */

.cms-fold-body {
    padding: 0 var(--cms-fold-pad-x) var(--cms-fold-pad-y);
    line-height: 1.75;
}
.cms-fold-text { margin: 0; }

/* ── 모양 ───────────────────────────────────────────────────────
   ★ 여백을 변수로 둡니다(--cms-fold-pad-*). 상자가 있는 모양만 좌우 여백이 필요한데,
     모양마다 padding 을 직접 쓰면 '크게·작게' 가 그중 하나에서만 어긋납니다. */

/* 줄 사이 선(기본) — 항목 사이에만 선을 긋습니다 */
.cms-fold-line .cms-fold-item + .cms-fold-item {
    border-top: 1px solid var(--cms-fold-line);
}
.cms-fold-line .cms-fold-item { border-radius: 0; }

.cms-fold-card {
    --cms-fold-gap: 0.5rem;
    --cms-fold-pad-x: 1.1rem;
}
.cms-fold-card .cms-fold-item { border: 1px solid var(--cms-fold-line); }

.cms-fold-soft {
    --cms-fold-gap: 0.5rem;
    --cms-fold-pad-x: 1.1rem;
}
.cms-fold-soft .cms-fold-item { background-color: var(--cms-fold-tint); }

.cms-fold-boxed {
    --cms-fold-pad-x: 1.1rem;
    border: 1px solid var(--cms-fold-line);
    border-radius: var(--cms-fold-radius);
    overflow: hidden;
}
.cms-fold-boxed .cms-fold-item { border-radius: 0; }
.cms-fold-boxed .cms-fold-item + .cms-fold-item {
    border-top: 1px solid var(--cms-fold-line);
}

/* 열린 항목에 왼쪽 색 띠 — 어디를 펴 두었는지 멀리서도 보입니다.
   ★★ 이름이 `-strip` 이지 `-lead` 가 아닙니다. 앞칸이 `.cms-fold-lead` 라서, 모양
     클래스를 같은 이름으로 두면 `.cms-fold-lead { flex: 0 0 auto }` 가 **뿌리에도
     걸려** 아코디언 전체가 한 줄로 찌그러집니다(제 플러그인 안에서의 충돌이라
     남의 CSS 를 grep 해서는 안 잡힙니다 — 새 클래스는 제 것끼리도 견줘 볼 것).
   ★ 닫힌 항목에도 투명한 띠를 두어야 열고 닫을 때 글이 좌우로 밀리지 않습니다. */
.cms-fold-strip .cms-fold-item {
    border-left: 3px solid transparent;
    border-radius: 0;
    --cms-fold-pad-x: 0.9rem;
}
.cms-fold-strip .cms-fold-item[open] { border-left-color: var(--cms-fold-color); }
.cms-fold-strip .cms-fold-item + .cms-fold-item {
    border-top: 1px solid var(--cms-fold-line);
}

.cms-fold-plain .cms-fold-item { border-radius: 0; }

/* ── 크기 ───────────────────────────────────────────────────────
   ★ em 입니다 — 아코디언은 섹션 본문 속에 얹히는 부품이라, 그 자리의 글자 크기를
     기준으로 커지고 작아지는 편이 맞습니다(목록에서 정한 것과 같습니다). */

.cms-fold-sm { font-size: 0.9em;  --cms-fold-pad-y: 0.7rem; }
.cms-fold-lg { font-size: 1.12em; --cms-fold-pad-y: 1.15rem; }

/* ── 모서리 · 효과 ──────────────────────────────────────────────
   ★ 상자가 있는 모양에서만 보입니다(테두리 · 연한 배경 · 한 상자). 선택자를 그 셋에
     못 박아 둡니다 — 아무 데나 걸면 제목 글자에 그림자가 지는 것처럼 보입니다. */

.cms-fold-sharp { --cms-fold-radius: 0; }
.cms-fold-round { --cms-fold-radius: 22px; }

.cms-fold-shadow.cms-fold-card .cms-fold-item,
.cms-fold-shadow.cms-fold-soft .cms-fold-item,
.cms-fold-shadow.cms-fold-boxed {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
}

@media (max-width: 575.98px) {
    /* 좁은 화면에서는 좌우 여백을 줄입니다 — 제목이 두 줄로 접히는 것을 늦춥니다 */
    .cms-fold-card,
    .cms-fold-soft,
    .cms-fold-boxed { --cms-fold-pad-x: 0.85rem; }
    .cms-fold-head { gap: 0.55rem; }
}

/* ─────────────────────────────────────────────
   탭 · 여러 판 (pane.plugin.js)
   ─────────────────────────────────────────────
   앞선 여덟 부품과 같은 얼개입니다 — 종류 × 겉모습의 조합이고, 색은 클래스가 아니라
   **변수 한 칸**(--cms-pane-color)에 둡니다.

   ★★ **자바스크립트 없이** 동작합니다. 라디오 하나가 '어느 판을 보일지' 를 들고,
     `:has()` 가 그 갈래의 판을 켭니다. 라벨이 입력을 **감싸므로 id 가 필요 없고**,
     그래서 갈래를 복제해도 서로 간섭하지 않습니다(부트스트랩 탭은 id 가 겹쳐 고장납니다).

   ★★ **탭 줄과 판은 한 갈래 안에 함께** 들어 있습니다(복제·순서 바꾸기가 둘을 같이
     옮기게 하려고). 화면에서 탭은 윗줄로, 판은 아랫줄로 보내는 것은 여기서 합니다 —
     갈래에 `display: contents` 를 주어 **껍데기를 지우고**, 그 안의 탭과 판이 바로
     탭 무리의 flex 자식이 되게 한 뒤, `order` 로 탭(0)을 판(1)보다 앞에 세웁니다.
     판은 `flex-basis:100%` 라 언제나 제 줄을 차지합니다.

   ★ `:has()` 를 모르는 브라우저에서는 `@supports` 안이 통째로 무시되어 **판이 모두
     보입니다** — 제목과 내용이 차례로 놓인 목록이 됩니다. 고장이 아니라 '탭이 아닌
     형태' 로 물러나는 것입니다.

   ★ 글자색을 못 박지 않습니다(목록·인용·구분선·아코디언과 같은 이유). */

.cms-pane {
    --cms-pane-color: var(--bs-primary, #4f46e5);
    --cms-pane-deep: color-mix(in srgb, var(--cms-pane-color) 76%, black);
    --cms-pane-tint: color-mix(in srgb, var(--cms-pane-color) 9%, white);
    --cms-pane-line: color-mix(in srgb, currentColor 14%, transparent);
    --cms-pane-radius: 10px;
    --cms-pane-pad-y: 0.7rem;
    --cms-pane-pad-x: 1rem;
    --cms-pane-body-pad: 1.15rem 0 0;

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin: 1.4rem 0;
    counter-reset: cms-pane;
}

/* 껍데기를 지웁니다 — 탭 줄과 판이 탭 무리의 직계 자식처럼 놓입니다 */
.cms-pane-item {
    display: contents;
}

/* ── 번호는 **탭 줄**에서 올립니다 ─────────────────────────────
   ★★ 여기 있는 까닭이 있습니다. 원래는 위 .cms-pane-item 에 counter-increment 를
     두었는데, 그 요소는 `display: contents` 라 **박스를 만들지 않습니다.** 박스가
     없는 요소는 카운터를 올리지 않습니다(display:none 과 같습니다). 그래서 카운터가
     한 번도 안 올라가 **모든 탭에 0 이 찍혔습니다**(담당자가 보낸 화면: 0 신청 ·
     0 면담 · 0 배정).
   ★ 아코디언(.cms-fold-item)은 <details> 라 박스가 있어 같은 자리에서 잘 돕니다 —
     같은 코드가 한쪽에서만 죽으니 눈으로는 원인이 안 보입니다.
   ★ 탭 줄(<label>)은 박스가 있고, 번호의 ::before 가 그 안(.cms-pane-lead)에 있어
     올린 값을 그대로 봅니다. 카운터는 flex order 가 아니라 **문서 순서**를 따르므로
     탭이 아래 줄로 내려가도(order) 1 · 2 · 3 그대로입니다. */
.cms-pane-tab {
    counter-increment: cms-pane;
}

/* ── 탭 줄 ──────────────────────────────────────────────────────
   <label> 입니다. 라디오를 감싸고 있어 눌리면 그 라디오가 켜집니다(id 불필요). */

.cms-pane-tab {
    order: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--cms-pane-pad-y) var(--cms-pane-pad-x);
    cursor: pointer;
    /* 탭 줄을 두 번 눌렀을 때 글자가 파랗게 잡히는 것을 막습니다 */
    user-select: none;
    position: relative;
    white-space: nowrap;
}

/* 라디오는 화면에서 숨기되 **초점은 받을 수 있게** 둡니다(display:none 이면 키보드로
   고를 수 없습니다). 그래서 크기를 1px 로 줄이고 투명하게 합니다. */
.cms-pane-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* 키보드로 옮겨 다닐 때 어디에 있는지 보이게 합니다 */
.cms-pane-item:has(.cms-pane-radio:focus-visible) .cms-pane-tab {
    outline: 3px solid color-mix(in srgb, var(--cms-pane-color) 45%, white);
    outline-offset: -3px;
}

/* ── 앞칸 (아이콘 · 번호) ───────────────────────────────────────
   ★ 번호는 **CSS 카운터**로 그립니다(앞칸은 비어 있습니다) — 갈래를 지우거나 순서를
     바꿀 때마다 사람이 다시 매기지 않아도 됩니다(목록·아코디언과 같은 규약).
   ★ 아이콘 종류는 앞칸 폭을 번호와 같게 못 박습니다. 안 그러면 아이콘마다 폭이 달라
     탭끼리 제목 시작점이 들쭉날쭉해집니다. */

.cms-pane-lead {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.cms-pane-lead > i { font-size: 1em; }
.cms-pane-hasicon .cms-pane-lead { min-width: 1.5em; }

.cms-pane-hasnum .cms-pane-lead::before {
    content: counter(cms-pane);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    height: 1.6em;
    border-radius: 999px;
    background-color: var(--cms-pane-tint);
    color: var(--cms-pane-deep);
    font-size: 0.8125em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── 제목 · 부제 ──────────────────────────────────────────────── */

.cms-pane-heading {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.cms-pane-title { font-weight: 700; line-height: 1.4; }
.cms-pane-sub {
    font-size: 0.8125em;
    font-weight: 400;
    color: color-mix(in srgb, currentColor 60%, transparent);
}

/* ── 판 ─────────────────────────────────────────────────────────
   ★ flex-basis:100% 라 언제나 제 줄을 차지하고, order:1 이라 모든 탭 뒤에 놓입니다. */

.cms-pane-body {
    order: 1;
    flex: 0 0 100%;
    min-width: 0;
    padding: var(--cms-pane-body-pad);
    line-height: 1.75;
}
.cms-pane-text { margin: 0; }

/* ── 고른 갈래만 보이기 ─────────────────────────────────────────
   ★★ `@supports` 로 감쌉니다. `:has()` 를 모르는 브라우저에서는 이 블록이 통째로
     무시되어 **판이 모두 보이는 목록**이 됩니다 — 고장이 아니라 물러남입니다.
     (감싸지 않으면 판이 전부 숨어 아무것도 안 보이게 됩니다) */

@supports selector(:has(*)) {
    .cms-pane-body { display: none; }
    .cms-pane-item:has(.cms-pane-radio:checked) .cms-pane-body { display: block; }
}

/* ── 모양 ───────────────────────────────────────────────────────
   ★ 고른 탭 표시는 모양마다 다릅니다. 공통은 '고른 것만 진한 색' 하나입니다. */

.cms-pane-item:has(.cms-pane-radio:checked) .cms-pane-tab { color: var(--cms-pane-deep); }
.cms-pane-tab { color: color-mix(in srgb, currentColor 66%, transparent); }

/* 밑줄(기본) — 탭 줄 아래 가는 선을 깔고, 고른 것만 굵게 */
.cms-pane-line { border-bottom: 1px solid var(--cms-pane-line); }
.cms-pane-line .cms-pane-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background-color: transparent;
}
.cms-pane-line .cms-pane-item:has(.cms-pane-radio:checked) .cms-pane-tab::after {
    background-color: var(--cms-pane-color);
}
.cms-pane-line .cms-pane-body { --cms-pane-body-pad: 1.15rem 0 0; }

/* 알약 — 고른 탭이 색으로 채워집니다 */
.cms-pane-pill .cms-pane-tab {
    border-radius: 999px;
    margin-right: 0.35rem;
}
.cms-pane-pill .cms-pane-item:has(.cms-pane-radio:checked) .cms-pane-tab {
    background-color: var(--cms-pane-tint);
}

/* 카드 탭 — 고른 탭이 판과 이어져 보입니다(아래 선을 지웁니다) */
.cms-pane-card { border-bottom: 1px solid var(--cms-pane-line); }
.cms-pane-card .cms-pane-tab {
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--cms-pane-radius) var(--cms-pane-radius) 0 0;
    margin-bottom: -1px;
}
.cms-pane-card .cms-pane-item:has(.cms-pane-radio:checked) .cms-pane-tab {
    border-color: var(--cms-pane-line);
    background-color: var(--cms-pane-bg, transparent);
}
/* 고른 탭 아래 선만 지워 판과 이어 붙입니다 */
.cms-pane-card .cms-pane-item:has(.cms-pane-radio:checked) .cms-pane-tab::after {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 0;
    height: 1px;
    background-color: currentColor;
    opacity: 0;
}

/* 연한 배경 — 탭 줄 전체가 연한 띠, 고른 것만 하얗게 떠오릅니다 */
.cms-pane-soft .cms-pane-tab {
    border-radius: var(--cms-pane-radius) var(--cms-pane-radius) 0 0;
}
.cms-pane-soft .cms-pane-item:has(.cms-pane-radio:checked) .cms-pane-tab {
    background-color: var(--cms-pane-tint);
}
.cms-pane-soft .cms-pane-body {
    --cms-pane-body-pad: 1.15rem;
    background-color: var(--cms-pane-tint);
    border-radius: 0 var(--cms-pane-radius) var(--cms-pane-radius) var(--cms-pane-radius);
}

/* 전체를 한 상자로 */
.cms-pane-boxed {
    border: 1px solid var(--cms-pane-line);
    border-radius: var(--cms-pane-radius);
    padding: 0.35rem;
}
.cms-pane-boxed .cms-pane-tab { border-radius: calc(var(--cms-pane-radius) - 3px); }
.cms-pane-boxed .cms-pane-item:has(.cms-pane-radio:checked) .cms-pane-tab {
    background-color: var(--cms-pane-tint);
}
.cms-pane-boxed .cms-pane-body { --cms-pane-body-pad: 1rem 0.65rem 0.65rem; }

/* 장식 없음 — 탭 줄만, 선도 배경도 없습니다 */
.cms-pane-plain { border: 0; }

/* ── 크기 ───────────────────────────────────────────────────────
   ★ em 입니다 — 탭은 섹션 본문 속에 얹히는 부품이라, 그 자리의 글자 크기를 기준으로
     커지고 작아지는 편이 맞습니다(목록·아코디언에서 정한 것과 같습니다). */

.cms-pane-sm { font-size: 0.9em;  --cms-pane-pad-y: 0.55rem; --cms-pane-pad-x: 0.8rem; }
.cms-pane-lg { font-size: 1.12em; --cms-pane-pad-y: 0.9rem;  --cms-pane-pad-x: 1.25rem; }

/* ── 모서리 ───────────────────────────────────────────────────── */

.cms-pane-sharp { --cms-pane-radius: 0; }
.cms-pane-round { --cms-pane-radius: 22px; }

/* ── 탭 정렬 ────────────────────────────────────────────────────
   ★ 판은 언제나 100% 라 정렬에 영향받지 않습니다 — 움직이는 것은 탭 줄뿐입니다. */

.cms-pane-center { justify-content: center; }
.cms-pane-right  { justify-content: flex-end; }

/* ── 탭 채움 ────────────────────────────────────────────────────
   ★ 균등 분할은 탭이 서넛일 때 좋고, 여섯을 넘으면 글자가 접힙니다. */

.cms-pane-fill .cms-pane-tab {
    flex: 1 1 0;
    justify-content: center;
    white-space: normal;
}

/* ── 효과 ───────────────────────────────────────────────────────
   ★ 상자가 있는 모양에서만 보입니다(연한 배경 · 한 상자). 나머지에는 드리울 상자가
     없어서, 선택자를 그 둘에 못 박아 둡니다. */

.cms-pane-shadow.cms-pane-boxed,
.cms-pane-shadow.cms-pane-soft .cms-pane-body {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
}

@media (max-width: 575.98px) {
    /* 좁은 화면에서는 탭 줄이 옆으로 넘칠 수 있습니다. 줄바꿈을 허용하고 여백을
       줄여, 탭이 두 줄로 접히더라도 글자가 잘리지 않게 합니다. */
    .cms-pane { --cms-pane-pad-x: 0.7rem; }
    .cms-pane-tab { white-space: normal; }
}

/* ─────────────────────────────────────────────
   진행 막대 · 목표 달성률 (progress.plugin.js)
   ─────────────────────────────────────────────
   앞선 여덟 부품과 같은 얼개입니다 — 종류(막대 둘레에 무엇이 붙는가) × 겉모습의
   조합이고, 색은 클래스가 아니라 **변수 한 칸**(--cms-pg-color)에 둡니다.

   ★★ 다만 이 부품에는 앞선 것들에 없던 **값**이 있습니다(--cms-pg-value, 0~100).
     막대 길이를 자바스크립트가 재지 않습니다 — `calc(var(--cms-pg-value) * 1%)` 로
     CSS 가 계산합니다. 사이트에 스크립트를 심지 않는다는 규약 그대로입니다.

   ★ 화면의 숫자(.cms-pg-num)는 편집기에서 손으로 못 고칩니다. 고칠 수 있으면
     막대는 64% 인데 글자만 80% 인 페이지가 만들어집니다(progress.plugin.js 참고).

   ★ 클래스 이름 — '…-progress' 는 부트스트랩의 .progress 와 한 끗 차이라 헷갈리고
     '…-bar' 는 너무 흔해 `.cms-pg` 로 갑니다. */

.cms-pg {
    /* 0~100. 단위 없는 숫자여야 아래 calc 가 성립합니다 */
    --cms-pg-value: 0;
    --cms-pg-color: var(--bs-primary, #4f46e5);
    /* ★ 바탕은 회색을 못 박지 않고 글자색을 옅게 섞습니다 — 어두운 배경 섹션에
       얹혔을 때 회색 띠만 둥둥 뜨지 않게 합니다(구분선과 같은 판단). */
    --cms-pg-bg: color-mix(in srgb, currentColor 12%, transparent);
    --cms-pg-h: 12px;
    --cms-pg-r: 4px;
    --cms-pg-ring-size: 152px;
    --cms-pg-ring-w: 14px;

    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    margin: 1.25rem 0;
}

/* ── 제목 줄 ────────────────────────────────────────────────────
   제목은 왼쪽, 숫자는 오른쪽입니다. 제목이 없는 종류('막대 + 숫자')에서는
   숫자가 오른쪽에 홀로 섭니다. */

.cms-pg-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* '막대 + 숫자' 처럼 제목이 없는 종류에서는 숫자가 오른쪽에 홀로 섭니다 */
.cms-pg-num-on:not(.cms-pg-title-on) .cms-pg-head { justify-content: flex-end; }

.cms-pg-title {
    min-width: 0;
    font-weight: 600;
}

.cms-pg-num {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--cms-pg-color);
    /* 숫자 폭이 고정되어야 값이 바뀔 때 제목이 흔들리지 않습니다 */
    font-variant-numeric: tabular-nums;
}

/* ── 막대 ───────────────────────────────────────────────────────
   ★ 채움은 테두리나 그림자가 아니라 **자식 하나**(.cms-pg-fill)입니다. 배경
     그러데이션 하나로 그리면 줄무늬·광택 같은 겉모습을 겹칠 자리가 없습니다. */

.cms-pg-track {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: var(--cms-pg-h);
    border-radius: var(--cms-pg-r);
    background: var(--cms-pg-bg);
}

.cms-pg-fill {
    display: block;
    position: relative;
    height: 100%;
    /* ★ 여기가 이 부품의 전부입니다 — 값 한 칸이 곧 길이입니다 */
    width: calc(var(--cms-pg-value) * 1%);
    border-radius: inherit;
    background: var(--cms-pg-color);
}

/* ── 현재 · 목표 줄 ─────────────────────────────────────────────
   ★ 둘 다 **글자**입니다(42권 · 128명 · 3,200만원 · $5,000 …). 숫자로 두고 나누어
     달성률을 얻고 싶었지만 교회가 쓰는 단위가 제각각이라 계산이 서지 않습니다. */

.cms-pg-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: color-mix(in srgb, currentColor 65%, transparent);
}

.cms-pg-now {
    font-weight: 600;
    color: var(--cms-pg-color);
}

/* '전 66권' · '목표 5,000만원' 처럼 단위가 붙은 말은 한 덩어리로 읽힙니다 —
   중간에서 접히면 숫자와 단위가 따로 노는 두 줄로 보입니다 */
.cms-pg-target { white-space: nowrap; }

/* ── 모양 ───────────────────────────────────────────────────── */

/* 기본(단색). 아무것도 안 해도 되지만 **말로 적어** 둡니다 — 규칙이 없는 클래스는
   나중에 이름을 바꿔도 아무 일이 안 일어나서, 고친 줄 알고 넘어가게 됩니다. */
.cms-pg-plain .cms-pg-fill { background: var(--cms-pg-color); }

.cms-pg-grad .cms-pg-fill {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--cms-pg-color) 45%, white),
        var(--cms-pg-color));
}

/* 줄무늬 — 움직이지 않습니다(애니메이션은 좁은 화면·저사양에서 값만 치릅니다) */
.cms-pg-stripe .cms-pg-fill {
    background-color: var(--cms-pg-color);
    background-image: repeating-linear-gradient(45deg,
        rgba(255, 255, 255, 0.24) 0 7px,
        rgba(255, 255, 255, 0)    7px 14px);
}

/* 눈금 — 25%마다 한 줄. 100% 자리는 막대 끝이라 따로 긋지 않습니다.
   ★ 채움 **위**에 그립니다(::after). 채움 아래에 두면 막대가 차오를수록
     눈금이 가려져, 정작 봐야 할 '어디까지 왔나' 를 못 봅니다. */
.cms-pg-ticks .cms-pg-track::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(to right,
        transparent 0 calc(25% - 1px),
        color-mix(in srgb, currentColor 32%, transparent) calc(25% - 1px) 25%);
}

/* 홈 파인 — 막대가 지면 안으로 눌려 들어간 것처럼 보입니다 */
.cms-pg-inset .cms-pg-track {
    background: color-mix(in srgb, currentColor 8%, transparent);
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.2);
}

/* 테두리형 — 바탕을 비우고 테두리만 남깁니다.
   ★ 테두리와 안쪽 여백만큼 높이를 키웁니다. 안 키우면 같은 '보통' 굵기인데
     테두리형만 눈에 띄게 얇아 보입니다. */
.cms-pg-outline .cms-pg-track {
    box-sizing: border-box;
    height: calc(var(--cms-pg-h) + 6px);
    padding: 2px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--cms-pg-color) 45%, transparent);
}

/* ── 크기 (막대 굵기 · 고리 두께) ───────────────────────────── */

.cms-pg-thin   { --cms-pg-h: 6px; }
.cms-pg-thick  { --cms-pg-h: 18px; }
.cms-pg-xthick { --cms-pg-h: 28px; }

/* ── 모서리 ─────────────────────────────────────────────────────
   ★ 기본(둥글게)과 알약을 다르게 둡니다. 기본을 999px 로 두면 알약을 골라도
     아무 일이 없어, '골라도 아무 일 없는 칸' 이 하나 생깁니다. */

.cms-pg-square { --cms-pg-r: 0; }
.cms-pg-pill   { --cms-pg-r: 999px; }

/* ── 효과 ───────────────────────────────────────────────────────
   ★ 광택을 배경으로 그리지 않고 **덧대는 층**(::after)으로 그립니다. 배경으로
     그리면 그러데이션·줄무늬 모양을 소리 없이 덮어써, 모양을 골라도 아무 일이
     없는 것처럼 보입니다. */

.cms-pg-shadow .cms-pg-track { box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14); }

.cms-pg-gloss .cms-pg-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.38),
        rgba(255, 255, 255, 0) 62%);
}

/* ── 원형 달성률 ────────────────────────────────────────────────
   ★★ 마크업은 막대와 **똑같습니다.** 클래스 하나로 그림만 바뀌므로, 종류를
     오갈 때 안을 다시 짜지 않아도 됩니다(써 둔 제목이 그대로 남습니다).

   ★ conic-gradient 로 원판을 그리고 가운데를 mask 로 뚫습니다. mask 를 모르는
     브라우저에서는 구멍 없는 **원판**이 됩니다 — 값은 여전히 읽히므로 내용이
     사라지지 않습니다(탭의 :has() 와 같은 판단). */

.cms-pg-ring {
    display: grid;
    grid-template-columns: auto;
    justify-content: center;
    justify-items: center;
    gap: 0.6rem;
}

.cms-pg-ring .cms-pg-track {
    grid-area: 1 / 1;
    width: var(--cms-pg-ring-size);
    height: var(--cms-pg-ring-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: conic-gradient(
        var(--cms-pg-color) calc(var(--cms-pg-value) * 1%),
        var(--cms-pg-bg) 0);
    -webkit-mask: radial-gradient(farthest-side,
        transparent calc(100% - var(--cms-pg-ring-w)),
        #000 calc(100% - var(--cms-pg-ring-w)));
            mask: radial-gradient(farthest-side,
        transparent calc(100% - var(--cms-pg-ring-w)),
        #000 calc(100% - var(--cms-pg-ring-w)));
}

/* 고리에서는 채움·눈금이 그려지지 않습니다(원판이 곧 채움입니다) */
.cms-pg-ring .cms-pg-fill { display: none; }
.cms-pg-ring .cms-pg-track::after { content: none; }

/* 크기 칸이 고리에서는 **두께**가 됩니다 */
.cms-pg-ring.cms-pg-thin   { --cms-pg-ring-w: 8px;  --cms-pg-ring-size: 132px; }
.cms-pg-ring.cms-pg-thick  { --cms-pg-ring-w: 22px; --cms-pg-ring-size: 168px; }
.cms-pg-ring.cms-pg-xthick { --cms-pg-ring-w: 34px; --cms-pg-ring-size: 184px; }

/* 숫자와 제목은 고리 **가운데**에 겹쳐 놓습니다(같은 격자 칸)
   ★★ z-index 를 반드시 준다. 제목 줄과 막대가 같은 격자 칸에 겹치는데, HTML 에서
     막대가 **뒤**에 오므로 아무것도 안 하면 막대가 제목 위에 깔린다. 화면으로는
     티가 안 난다 — 막대의 가운데는 mask 로 파여 제목이 그대로 비쳐 보이기 때문이다.
     그런데 mask 는 **그림만 지우고 자리는 남긴다.** 그래서 편집기에서 제목을
     더블클릭하면 눌리는 것은 막대(고를 수 없게 해 둔 칸)이고, 글자는 멀쩡히
     보이는데 고쳐지지 않는다. 담당자가 실제로 겪은 고장이다. */
.cms-pg-ring .cms-pg-head {
    grid-area: 1 / 1;
    z-index: 1;
    flex-direction: column-reverse;   /* 숫자가 위, 제목이 아래 */
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 0.1rem;
    max-width: calc(var(--cms-pg-ring-size) - var(--cms-pg-ring-w) * 2 - 18px);
    text-align: center;
}

.cms-pg-ring .cms-pg-num   { font-size: 1.75rem; line-height: 1.1; }
.cms-pg-ring .cms-pg-title { font-size: 0.8125rem; }
.cms-pg-ring .cms-pg-foot  { grid-area: 2 / 1; justify-content: center; gap: 0.6rem; }

/* 고리는 mask 로 잘려 box-shadow 가 보이지 않습니다 — drop-shadow 로 대신합니다 */
.cms-pg-ring.cms-pg-shadow .cms-pg-track {
    box-shadow: none;
    filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.18));
}

@media (max-width: 575.98px) {
    /* 좁은 화면에서 아주 굵은 고리는 화면 폭을 다 먹습니다 */
    .cms-pg-ring { --cms-pg-ring-size: min(132px, 60vw); }
}

/* ══════════════════════════════════════════════════════════════
   단계 안내 (step.plugin.js)

   등록 절차·신청 방법처럼 **순서가 있는 일**을 번호를 붙여 늘어놓습니다.
   앞선 부품들과 같은 규약입니다 — 종류(안에 무엇이 드는가) × 모양(겉모습)의
   조합이고, 색은 클래스가 아니라 **변수 한 칸**(--cms-step-color)에 둡니다.

   ★★ 번호는 **CSS 카운터**로 그립니다(.cms-step-mark::before). 숫자를 글자로 써
     두면 담당자가 단계를 복제하거나 가운데에 끼워 넣을 때마다 1-2-2 가 되고,
     그것을 사람이 다시 매겨야 합니다. 자리가 곧 번호이면 그럴 일이 없습니다.
   ★ 그래도 <ol><li> 입니다 — 번호를 '안 보임' 으로 두어도 읽어 주는 기계에는
     '차례가 있는 목록' 으로 들립니다. 그림으로만 뜻이 있는 부품이 되지 않게.

   ★ 바탕·테두리는 회색을 못 박지 않고 글자색을 옅게 섞습니다(color-mix) —
     어두운 배경 섹션에 얹혔을 때 회색 상자만 둥둥 뜨지 않게. 구분선·진행
     막대와 같은 판단입니다.
   ══════════════════════════════════════════════════════════════ */

.cms-step {
    --cms-step-color: var(--bs-primary, #4f46e5);
    /* 번호 동그라미의 지름. 크기 칸이 이 한 줄만 바꿉니다 */
    --cms-step-mark: 44px;
    --cms-step-face: 1.0625rem;

    counter-reset: cms-step;
    display: grid;
    /* ★ 미디어쿼리 없이 접힙니다 — 단계가 셋이든 다섯이든 폭에 맞춰 줄이 늡니다 */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.5rem;
    margin: 1.75rem 0;
    padding: 0;
    list-style: none;
}

.cms-step-item {
    counter-increment: cms-step;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    /* 긴 낱말이 칸을 밀어내지 않게 */
    min-width: 0;
    /* ★ 배경색이 없을 때는 아무 표시도 안 나지만, 담당자가 스타일 패널에서 칸 하나에
       색을 칠하면 그때 모서리가 둥글게 나옵니다. 안 주면 각진 색 덩어리가 됩니다.
       (여백은 '카드'·'연한 배경' 모양이 줍니다 — 색을 칠할 자리는 그 둘입니다) */
    border-radius: 10px;
}

/* ── 번호 동그라미 ──────────────────────────────────────────────
   ★ 안에 글자가 없습니다. 번호는 ::before 가, 아이콘은 <i> 가 채웁니다. */

.cms-step-mark {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cms-step-mark);
    height: var(--cms-step-mark);
    border-radius: 50%;
    background: var(--cms-step-color);
    color: #fff;
    font-size: var(--cms-step-face);
    font-weight: 700;
    line-height: 1;
    /* 숫자 폭이 고정되어야 01 과 12 가 같은 자리에 섭니다 */
    font-variant-numeric: tabular-nums;
}

.cms-step-mark::before { content: counter(cms-step); }

/* ── 번호 모양 ────────────────────────────────────────────────── */

.cms-step-n2    .cms-step-mark::before { content: counter(cms-step, decimal-leading-zero); }
.cms-step-nstep .cms-step-mark::before { content: counter(cms-step) "단계"; }
.cms-step-nstep .cms-step-mark {
    /* '1단계' 는 동그라미에 안 들어갑니다 — 알약으로 폅니다 */
    width: auto;
    min-width: var(--cms-step-mark);
    padding: 0 0.75rem;
    border-radius: 999px;
    font-size: calc(var(--cms-step-face) * 0.8);
}

.cms-step-noff .cms-step-mark::before { content: none; }

/* 번호를 끄면 동그라미도 함께 사라집니다 — 아이콘이 없으면 빈 원만 남습니다 */
.cms-step-noff:not(.cms-step-icon-on) .cms-step-mark { display: none; }

/* ── 아이콘 ─────────────────────────────────────────────────────
   ★ 아이콘 종류에서는 번호가 동그라미 **오른쪽 위 작은 뱃지**로 갑니다. 아이콘을
     쓰면 번호가 사라지게 두면, 설정 칸의 '번호' 가 골라도 아무 일 없는 칸이 됩니다. */

.cms-step-icon-on .cms-step-mark { font-size: calc(var(--cms-step-face) * 1.1); }

.cms-step-icon-on .cms-step-mark::before {
    position: absolute;
    top: -3px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35em;
    height: 1.35em;
    padding: 0 0.3em;
    border-radius: 999px;
    /* ★ 테를 흰색으로 못 박지 않습니다 — 어두운 배경 섹션에서는 흰 테가 오려낸
       자국처럼 뜹니다. 글자색을 옅게 섞으면 밝은 데서는 어둡게, 어두운 데서는
       밝게 갈라져 어느 쪽에서나 동그라미와 떨어져 보입니다. */
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent);
    background: #0f172a;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* '1단계' 뱃지는 알약으로 넓힐 자리가 없어 아이콘 아래에 둡니다 */
.cms-step-icon-on.cms-step-nstep .cms-step-mark::before {
    top: auto;
    right: auto;
    bottom: -0.5em;
    left: 50%;
    transform: translateX(-50%);
}
.cms-step-icon-on.cms-step-nstep .cms-step-mark {
    width: var(--cms-step-mark);
    min-width: 0;
    padding: 0;
    border-radius: 50%;
}

/* ── 글 ─────────────────────────────────────────────────────── */

.cms-step-body { min-width: 0; }

.cms-step-title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.4;
}

.cms-step-text {
    margin: 0.35rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.7;
    color: color-mix(in srgb, currentColor 72%, transparent);
}

/* ── 모양 ─────────────────────────────────────────────────────── */

/* 기본(나란히). 아무것도 안 해도 되지만 **말로 적어** 둡니다 — 규칙이 없는
   클래스는 나중에 이름을 바꿔도 아무 일이 안 일어나서, 고친 줄 알고 넘어갑니다. */
.cms-step-plain > .cms-step-item { padding: 0; }

.cms-step-card > .cms-step-item {
    padding: 1.35rem;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 12px;
}

.cms-step-soft > .cms-step-item {
    padding: 1.35rem;
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 5%, transparent);
}

/* 화살표 — 칸과 칸 사이를 잇습니다.
   ★ 마지막 단계 뒤에는 안 그립니다(가리키는 곳이 없습니다).
   ★ 좁은 화면에서는 칸이 세로로 접히는데, 그때 오른쪽 화살표는 엉뚱한 곳을
     가리킵니다 — 접히는 폭에서는 아예 지웁니다. */
.cms-step-arrow > .cms-step-item {
    position: relative;
    padding-right: 1.75rem;
}

.cms-step-arrow > .cms-step-item::after {
    content: "";
    position: absolute;
    top: calc(var(--cms-step-mark) / 2 - 6px);
    right: 0.5rem;
    width: 11px;
    height: 11px;
    border-top: 2px solid color-mix(in srgb, var(--cms-step-color) 55%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--cms-step-color) 55%, transparent);
    transform: rotate(45deg);
}

.cms-step-arrow > .cms-step-item:last-child::after { content: none; }

@media (max-width: 767.98px) {
    .cms-step-arrow > .cms-step-item::after { content: none; }
    .cms-step-arrow > .cms-step-item { padding-right: 0; }
}

/* 세로 흐름 — 한 줄에 하나씩, 번호를 선으로 잇습니다.
   설명이 길거나 단계가 다섯을 넘을 때 가로로 세우면 글자가 잘게 부서집니다. */
.cms-step-line {
    grid-template-columns: 1fr;
    gap: 0;
}

.cms-step-line > .cms-step-item {
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.6rem;
}

.cms-step-line > .cms-step-item::before {
    content: "";
    position: absolute;
    top: var(--cms-step-mark);
    bottom: 0;
    left: calc(var(--cms-step-mark) / 2 - 1px);
    width: 2px;
    background: color-mix(in srgb, var(--cms-step-color) 28%, transparent);
}

/* 글이 남은 폭을 다 차지해야 가운데 정렬이 칸 안에서 뜻을 갖습니다 */
.cms-step-line > .cms-step-item > .cms-step-body { flex: 1 1 auto; }

.cms-step-line > .cms-step-item:last-child { padding-bottom: 0; }
.cms-step-line > .cms-step-item:last-child::before { content: none; }

/* 번호를 끄면 이을 것이 없습니다 — 선만 남으면 무엇을 잇는 선인지 모릅니다 */
.cms-step-line.cms-step-noff:not(.cms-step-icon-on) > .cms-step-item::before { content: none; }
.cms-step-line.cms-step-noff:not(.cms-step-icon-on) > .cms-step-item { gap: 0; }

/* 번호를 크게 — 동그라미를 지우고 숫자만 크게 세웁니다.
   ★ 아이콘 종류에서는 아이콘이 커집니다(같은 칸이 뜻이 통하는 자리라 나누지 않습니다). */
.cms-step-big {
    --cms-step-mark: 64px;
    --cms-step-face: 2.75rem;
}

.cms-step-big .cms-step-mark {
    background: none;
    color: var(--cms-step-color);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cms-step-big.cms-step-nstep .cms-step-mark { padding: 0; }

/* ── 크기 ─────────────────────────────────────────────────────── */

.cms-step-sm { --cms-step-mark: 34px; --cms-step-face: 0.9375rem; }
.cms-step-sm .cms-step-title { font-size: 0.9375rem; }
.cms-step-sm .cms-step-text  { font-size: 0.875rem; }

.cms-step-lg { --cms-step-mark: 56px; --cms-step-face: 1.375rem; }
.cms-step-lg .cms-step-title { font-size: 1.1875rem; }

/* 번호를 크게 + 크기 칸이 겹치면 뒤엣것이 이깁니다(둘 다 같은 변수를 씁니다) */
.cms-step-big.cms-step-sm { --cms-step-mark: 48px; --cms-step-face: 2rem; }
.cms-step-big.cms-step-lg { --cms-step-mark: 80px; --cms-step-face: 3.5rem; }

/* ── 정렬 ─────────────────────────────────────────────────────── */

.cms-step-center > .cms-step-item {
    align-items: center;
    text-align: center;
}

/* 세로 흐름에서는 번호와 글이 좌우로 섭니다. 여기에 세로 가운데맞춤까지 걸면
   짧은 단계와 긴 단계에서 번호가 제각각 높이에 떠서 잇는 선이 끊겨 보입니다 —
   번호는 위에 붙여 두고 **글만** 칸 안에서 가운데로 모읍니다(text-align 은
   위 규칙에서 이미 물려받습니다). */
.cms-step-line.cms-step-center > .cms-step-item { align-items: flex-start; }

/* ══════════════════════════════════════════════════════════════
   정보 목록 (dl.plugin.js)

   예배시간표 · 헌금 계좌 · 부서 연락처처럼 **이름 하나에 값 하나**가 이어지는
   자리입니다. 앞선 부품들과 같은 규약입니다 — 종류(안에 무엇이 드는가) × 모양
   (겉모습)의 조합이고, 색은 클래스가 아니라 **변수 한 칸**(--cms-dl-color)에 둡니다.

   ★★ 이름과 값이 갈리는 자리는 **격자 한 줄**(--cms-dl-name)이 정합니다. '이름 칸'
     설정이 이 한 줄만 바꿉니다 — 모양마다 폭을 따로 적으면 모양을 하나 더할 때마다
     네 벌을 함께 고쳐야 합니다.
   ★ 색은 **이름 글자 · 아이콘 · 줄 사이 선**이 함께 봅니다. 이름이 색을 안 들면
     아이콘 없는 종류에서 색 칸이 '골라도 아무 일 없는 칸' 이 됩니다.

   ★ 바탕·테두리는 회색을 못 박지 않고 글자색을 옅게 섞습니다(color-mix) —
     어두운 배경 섹션에 얹혔을 때 회색 상자만 둥둥 뜨지 않게. 구분선·진행 막대·
     단계 안내와 같은 판단입니다.
   ══════════════════════════════════════════════════════════════ */

.cms-dl {
    --cms-dl-color: var(--bs-primary, #4f46e5);
    /* 이름 칸의 폭. '이름 칸' 설정이 이 한 줄만 바꿉니다 */
    --cms-dl-name: 8.5rem;
    --cms-dl-face: 0.9375rem;
    --cms-dl-gap: 0.9rem;

    margin: 1.5rem 0;
    padding: 0;
}

.cms-dl-item {
    display: grid;
    grid-template-columns: var(--cms-dl-name) 1fr;
    align-items: baseline;
    gap: 0.3rem var(--cms-dl-gap);
    padding: 0.7rem 0;
    /* 긴 계좌번호가 칸을 밀어내지 않게 */
    min-width: 0;
    /* ★ 배경색이 없을 때는 아무 표시도 안 나지만, 담당자가 스타일 패널에서 줄 하나에
       색을 칠하면 그때 모서리가 둥글게 나옵니다. 안 주면 각진 색 덩어리가 됩니다. */
    border-radius: 8px;
}

/* 줄과 줄 사이. ★ 여기 한 줄이 기본이고, 모양이 지우거나 덧붙입니다 */
.cms-dl > .cms-dl-item + .cms-dl-item {
    border-top: 1px solid color-mix(in srgb, var(--cms-dl-color) 16%, transparent);
}

/* ── 이름 · 값 ────────────────────────────────────────────────── */

.cms-dl-name {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    color: var(--cms-dl-color);
    font-size: var(--cms-dl-face);
    font-weight: 700;
    line-height: 1.55;
}

.cms-dl-label {
    min-width: 0;
    /* 이름이 길어도 칸을 밀어내지 않고 접힙니다 */
    overflow-wrap: anywhere;
}

.cms-dl-value {
    min-width: 0;
    margin: 0;
    font-size: var(--cms-dl-face);
    line-height: 1.6;
    /* 계좌번호·주소처럼 띄어쓰기가 없는 긴 글자가 칸을 넘지 않게 */
    overflow-wrap: anywhere;
}

.cms-dl-text { display: block; }

.cms-dl-note {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: color-mix(in srgb, currentColor 62%, transparent);
}

/* ── 아이콘 ─────────────────────────────────────────────────────
   ★ 폭을 못 박아 **이름 글자의 시작점을 맞춥니다.** 안 그러면 아이콘 폭이
     제각각이라(시계 · 기도 · 전화) 이름들이 들쭉날쭉 시작합니다. */

.cms-dl-icon-on .cms-dl-name > i {
    flex: 0 0 auto;
    width: 1.15em;
    text-align: center;
    font-size: 0.95em;
}

/* ── 모양 ─────────────────────────────────────────────────────── */

/* 기본(줄 구분선). 위의 선 한 줄이 이미 다 했지만 **말로 적어** 둡니다 —
   규칙이 없는 클래스는 나중에 이름을 바꿔도 아무 일이 안 일어나서, 고친 줄 알고
   넘어갑니다. */
.cms-dl-plain > .cms-dl-item { padding-left: 0; padding-right: 0; }

/* 줄무늬 — 배경이 줄을 가르므로 선은 지웁니다(둘 다 있으면 지저분합니다) */
.cms-dl-stripe > .cms-dl-item {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}

.cms-dl-stripe > .cms-dl-item + .cms-dl-item { border-top: none; }

.cms-dl-stripe > .cms-dl-item:nth-child(odd) {
    background: color-mix(in srgb, currentColor 5%, transparent);
}

/* 카드 — 테두리 상자 하나에 줄들을 담습니다 */
.cms-dl-card {
    padding: 0.35rem 1.25rem;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 12px;
}

/* 연한 배경 */
.cms-dl-soft {
    padding: 0.35rem 1.25rem;
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 5%, transparent);
}

/* 세로 쌓기 — 이름을 값 **위**에 둡니다. 값이 길거나(주소·안내문) 칸이 좁을 때.
   ★ 이 모양에서는 '이름 칸' 설정이 드러나지 않습니다 — 좌우로 갈리는 자리가
     아예 없기 때문입니다. */
.cms-dl-stack > .cms-dl-item {
    grid-template-columns: 1fr;
    gap: 0.15rem;
}

.cms-dl-stack .cms-dl-name {
    font-size: calc(var(--cms-dl-face) * 0.87);
    line-height: 1.4;
}

.cms-dl-stack .cms-dl-value { font-weight: 600; }

/* 값을 크게 — 계좌번호·전화번호처럼 **값이 주인공**일 때 */
.cms-dl-lead > .cms-dl-item { align-items: center; }

.cms-dl-lead .cms-dl-text {
    font-size: calc(var(--cms-dl-face) * 1.35);
    font-weight: 700;
    letter-spacing: -0.01em;
    /* 숫자 폭이 고정되어야 계좌번호가 줄마다 같은 자리에 섭니다 */
    font-variant-numeric: tabular-nums;
}

/* ── 이름 칸 ──────────────────────────────────────────────────── */

.cms-dl-wsm   { --cms-dl-name: 6rem; }
.cms-dl-wlg   { --cms-dl-name: 12rem; }

/* ── 글자에 맞춤 ───────────────────────────────────────────────
   이름 중 **가장 긴 것**에 칸을 맞춥니다(빈 자리가 안 남습니다).

   ★★ `--cms-dl-name: max-content` 만으로는 안 됩니다. 격자가 **줄마다** 있어서
     (.cms-dl-item 이 각자 display:grid), max-content 가 그 줄 자기 글자에 맞춰집니다.
     그러면 이름 길이가 다를 때 값이 줄마다 다른 자리에서 시작합니다 — 실측으로
     은행 65 · 계좌번호 95 · 예금주 80(30px 어긋남)이었습니다. 이름이 모두 같은
     글자 수인 목록에서는 우연히 맞아 보여서 눈으로는 안 걸립니다.
   ★ 그래서 이 모양만 **바깥에 칸을 두고 줄이 그것을 물려받습니다**(subgrid).
     줄은 여전히 자기 박스라 카드·줄무늬·연한 배경이 그대로 걸립니다
     (display:contents 로 풀면 그 배경들이 사라집니다 — 탭 카운터에서 물린 것과
     같은 함정입니다).
   ★ subgrid 를 모르는 브라우저에서는 기본 폭(8.5rem)으로 둡니다. 줄마다 어긋나는
     것보다 낫고, '골라도 아무 일 없는 칸' 이 되는 쪽을 택했습니다.
   ★★ 좁은 화면 접힘을 **이 블록 안에 다시 적습니다.** 아래 미디어쿼리의
     `.cms-dl:not(.cms-dl-stack) > .cms-dl-item` 과 특이도가 같아서, 순서에 기대면
     한쪽이 이깁니다 — 실제로 접힘이 죽는 것을 브라우저에서 확인했습니다. */
@supports (grid-template-columns: subgrid) {
    .cms-dl-wauto:not(.cms-dl-stack) {
        display: grid;
        grid-template-columns: max-content 1fr;
    }

    .cms-dl-wauto:not(.cms-dl-stack) > .cms-dl-item {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
    }

    @media (max-width: 575.98px) {
        .cms-dl-wauto:not(.cms-dl-stack) { display: block; }
        .cms-dl-wauto:not(.cms-dl-stack) > .cms-dl-item { grid-template-columns: 1fr; }
    }
}

/* ── 크기 ─────────────────────────────────────────────────────── */

.cms-dl-sm { --cms-dl-face: 0.875rem; --cms-dl-gap: 0.7rem; }
.cms-dl-sm > .cms-dl-item { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.cms-dl-sm .cms-dl-note { font-size: 0.78125rem; }

.cms-dl-lg { --cms-dl-face: 1.0625rem; --cms-dl-gap: 1.15rem; }
.cms-dl-lg > .cms-dl-item { padding-top: 0.95rem; padding-bottom: 0.95rem; }
.cms-dl-lg .cms-dl-note { font-size: 0.875rem; }

/* ── 값 정렬 ──────────────────────────────────────────────────── */

/* 값을 오른쪽 끝에 붙입니다 — 시간·금액이 자릿수로 나란히 섭니다.
   (덧붙임은 값 칸 안에 있어 함께 따라갑니다) */
.cms-dl-right .cms-dl-value { text-align: right; }

/* ── 좁은 화면 ────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
    /* ★ 이름 칸을 못 박은 채로 두면 값이 서너 글자씩 부서집니다. 폭이 모자라면
       '세로 쌓기' 와 같은 꼴로 폅니다 — 좁은 화면에서는 그것이 정답입니다. */
    .cms-dl:not(.cms-dl-stack) > .cms-dl-item {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    /* 위아래로 접히면 오른쪽 붙임은 이름과 값이 어긋나 보입니다 */
    .cms-dl-right .cms-dl-value { text-align: left; }
}

/* ============================================================
   구획 (section.plugin.js) — 배경 · 상하 여백 · 최대폭을 주는 그릇
   ============================================================ */

/*
 * ★★ 안쪽 상자가 없습니다. 배경을 꽉 채우는 바깥과 내용을 가운데로 모으는 안쪽을
 *   두 겹으로 두면, 담당자가 바깥을 골랐을 때 블록이 안쪽 상자의 **형제**로 들어가
 *   배치가 무너집니다(§4.25 가 고친 것과 똑같은 고장). 그래서 가운데 모으기를
 *   **좌우 여백**이 합니다.
 *
 *   좁은 자리(단 안 등)에 넣으면 `100% - 폭` 이 음수가 되고 max() 가 1rem 을 고릅니다 —
 *   미디어쿼리 없이 저절로 여백만 남습니다.
 */
.cms-sec {
    --cms-sec-color: var(--bs-primary, #4f46e5);
    /* 최대폭. '최대폭' 설정이 이 한 줄만 바꿉니다 */
    --cms-sec-w: 1140px;
    /* 상하 여백. '상하 여백' 설정이 이 한 줄만 바꿉니다 */
    --cms-sec-pad: 3rem;
    /* 색을 깐 모양에서만 뒤집힙니다(아래 solid · grad) */
    --cms-sec-fg: inherit;

    display: block;
    padding-block: var(--cms-sec-pad);
    padding-inline: max(1rem, calc((100% - var(--cms-sec-w)) / 2));
}

/* 구획끼리 붙여 놓았을 때 배경 띠가 이어 보이도록 바깥 여백은 두지 않습니다 */
.cms-sec + .cms-sec { margin-top: 0; }

/*
 * ★★ 여백이 **두 겹**이 되는 것을 막습니다.
 *
 * 구획이 상하 여백을 주는데, 안에 담기는 부품도 저마다 자기 여백을 들고 있습니다
 * (`.cms-dl` 은 위아래 1.5rem, `.cms-step` 은 1.75rem, 부트스트랩 `<p>` 는 아래 1rem).
 * 그대로 두면 그 둘이 더해져서 —
 *
 *     설정 칸은 '보통(3rem = 48px)' 이라는데 화면은 72px · 76px 이 됩니다(실측).
 *     문단 하나를 떨어뜨리면 위 48 · 아래 64 로 **아래만 더 벌어집니다.**
 *
 * 담당자에게는 "구획 아래가 휑하다" 로 보이고, 설정 칸의 숫자를 믿을 수 없게 되므로
 * 되는 척 고장입니다. 첫·마지막 자식의 바깥 여백만 깎습니다 — 부품 **사이**의 여백은
 * 그대로 두므로 여러 개를 담아도 간격은 살아 있습니다.
 */
.cms-sec > :first-child { margin-top: 0; }
.cms-sec > :last-child { margin-bottom: 0; }

.cms-sec-title {
    margin: 0 0 0.6rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.35;
    /* ★ 색을 못 박지 않습니다 — 색 깐 구획에서 물려받아 함께 뒤집히게 */
    color: inherit;
}

.cms-sec-desc {
    margin: 0 0 1.4rem;
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.85;
    color: inherit;
}

.cms-sec-body {
    margin: 0;
    line-height: 1.8;
    color: inherit;
}

/* 제목만 있고 설명이 없으면 제목 아래 사이를 대신 벌립니다 */
.cms-sec-title-on:not(.cms-sec-desc-on) .cms-sec-title { margin-bottom: 1.4rem; }

/* ── 모양 ───────────────────────────────────────────────── */

.cms-sec-plain { background: none; }

.cms-sec-soft {
    background-color: color-mix(in srgb, var(--cms-sec-color) 8%, transparent);
}

/*
 * ★★ 배경만 어둡게 칠하고 글자색을 안 바꾸면 반드시 안 읽힙니다(§4.14 에서 대비
 *   1.7:1 로 물린 것). 색을 까는 두 모양은 글자색을 함께 돌려 놓습니다.
 * ★ 안에 든 부품이 자기 색을 들고 있으면 그것이 이깁니다 — 어두운 구획 위에는
 *   그 부품의 '어두운 배경용' 모양을 고르라는 뜻이고, 그 길은 열려 있습니다.
 */
.cms-sec-solid {
    --cms-sec-fg: #fff;
    background-color: var(--cms-sec-color);
    color: var(--cms-sec-fg);
}

.cms-sec-grad {
    --cms-sec-fg: #fff;
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--cms-sec-color) 72%, white),
        var(--cms-sec-color) 55%,
        color-mix(in srgb, var(--cms-sec-color) 80%, black));
    color: var(--cms-sec-fg);
}

.cms-sec-line {
    border-top: 1px solid color-mix(in srgb, var(--cms-sec-color) 30%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--cms-sec-color) 30%, transparent);
}

.cms-sec-card {
    border: 1px solid color-mix(in srgb, var(--cms-sec-color) 28%, transparent);
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--cms-sec-color) 3%, transparent);
}

/* ── 상하 여백 ──────────────────────────────────────────── */

.cms-sec-tight  { --cms-sec-pad: 1.25rem; }
.cms-sec-roomy  { --cms-sec-pad: 4.5rem; }
.cms-sec-xroomy { --cms-sec-pad: 7rem; }

/* ── 최대폭 ─────────────────────────────────────────────── */

.cms-sec-wlg { --cms-sec-w: 1320px; }
.cms-sec-wsm { --cms-sec-w: 720px; }

/* ★ 100% 로 두면 (100% - 100%) / 2 = 0 이 되고 max() 가 1rem 을 고릅니다.
   0 으로 두면 좁은 화면에서 글자가 화면 끝에 붙습니다. */
.cms-sec-wfull { --cms-sec-w: 100%; }

/* ★★ 사진 띠 · 표 · 지도처럼 **끝까지 닿아야 하는 것**을 위한 값입니다. 글이 든
   구획에는 쓰지 마세요 — 좁은 화면에서 글자가 화면 끝에 붙습니다. 그래서 기본
   '꽉 채우기' 와 갈라 두었습니다. */
.cms-sec-wbleed {
    --cms-sec-w: 100%;
    padding-inline: 0;
}

/* ── 빈 구획 (편집기 안에서만) ──────────────────────────── */

/*
 * ★★ 본문을 지우고 그 자리에 부품을 넣는 것이 정상 흐름인데, 지우고 나면 구획이
 *   상하 여백 96px 짜리 띠만 남아 **끌어다 놓을 자리가 없습니다.** 비어 있을 때만
 *   자리를 만들어 줍니다.
 *
 * ★ `.gjs-dashed` 는 GrapesJS 가 **캔버스 body 에만** 붙이는 클래스입니다(윤곽선
 *   보기). 저장되는 HTML 에는 안 들어가므로 실제 지면의 방문자는 이 점선을 보지
 *   않습니다 — 편집기 안에서만 보이는 자리표시자입니다.
 * ★ 내용이 하나라도 들어오면 `:empty` 가 풀려 저절로 사라집니다.
 */
.gjs-dashed .cms-sec:empty {
    min-height: 96px;
    border: 2px dashed color-mix(in srgb, var(--cms-sec-color) 45%, transparent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gjs-dashed .cms-sec:empty::before {
    content: "여기에 블록을 끌어다 놓으세요";
    font-size: 0.875rem;
    color: color-mix(in srgb, currentColor 55%, transparent);
    /* ★ 글자가 떨어뜨리기를 가로채지 않게 합니다 — 가운데를 겨냥했는데 글자에
       걸려 아무 일도 안 일어나면 그것이 곧 고장으로 읽힙니다. */
    pointer-events: none;
}

/* ── 모서리 ─────────────────────────────────────────────── */
/* ★ '배경 없음'·'위아래 선' 에서는 안 드러납니다. 어느 한 모양에서만 안 드러나는
   것은 그대로 둡니다(원형 진행 막대의 '모서리' 와 같은 판단). */

.cms-sec-sharp { border-radius: 0; }
.cms-sec-round { border-radius: 24px; }

/* ── 글 정렬 ────────────────────────────────────────────── */

.cms-sec-center { text-align: center; }

/* ── 좁은 화면 ──────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .cms-sec { --cms-sec-pad: 2rem; }
    .cms-sec-roomy  { --cms-sec-pad: 2.75rem; }
    .cms-sec-xroomy { --cms-sec-pad: 3.5rem; }
    .cms-sec-title  { font-size: 1.35rem; }
}

/* ============================================================
   표의 모양 · 색 · 크기 (table.plugin.js) — 부품 규약으로 승격하며 더한 축
   ============================================================ */

/*
 * ★★ 선택자가 **클래스가 아니라 속성**입니다(`table[data-look=…]`). 다른 열넷은
 *   `cms-*-soft` 처럼 클래스를 갈아 끼우지만, 표는 담당자가 **붙여넣은 표**에도
 *   걸려야 합니다 — 그것들에는 우리 클래스가 없습니다. 위쪽의 모바일 접기·줄무늬가
 *   처음부터 속성인 까닭과 같습니다.
 *
 * ★ 옛 `[data-striped="1"]` · `[data-bordered="1"]` 규칙은 **위에 그대로 있습니다.**
 *   이미 저장된 페이지가 그 속성을 들고 있어서 지우면 그 표들의 모양이 바뀝니다.
 *   편집기는 되읽을 때 그것을 모양으로 옮기고, 쓸 때만 걷어냅니다.
 */

.cms-table,
table[data-look] {
    /* 머리행 배경 · 테두리 · 줄무늬가 이 한 칸을 봅니다 */
    --cms-table-color: #64748b;
}

/* ── 모양 ───────────────────────────────────────────────── */

/* 줄무늬 — 옛 [data-striped="1"] 과 같은 결이되 색을 따라갑니다 */
table[data-look="stripe"] tbody tr:nth-child(2n) td {
    background: color-mix(in srgb, var(--cms-table-color) 6%, transparent);
}

table[data-look="stripe"] tbody tr:nth-child(2n):hover td {
    background: color-mix(in srgb, var(--cms-table-color) 12%, transparent);
}

/* 격자 */
table[data-look="grid"] th,
table[data-look="grid"] td {
    border: 1px solid color-mix(in srgb, var(--cms-table-color) 22%, transparent);
}

/* 카드 — 바깥만 두르고 모서리를 둥글게. 셀 경계는 가로줄만 남깁니다 */
table[data-look="card"] {
    border: 1px solid color-mix(in srgb, var(--cms-table-color) 22%, transparent);
    border-top-width: 1px;
    border-radius: 10px;
    /* ★ collapse 면 border-radius 가 안 먹습니다. separate 로 바꾸되 칸 사이가
       벌어지지 않게 간격을 0 으로 둡니다. */
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

table[data-look="card"] th,
table[data-look="card"] td {
    border-bottom: 1px solid color-mix(in srgb, var(--cms-table-color) 14%, transparent);
}

table[data-look="card"] tbody tr:last-child td {
    border-bottom: 0;
}

/* 머리행 색 — 여기만 글자를 뒤집으므로 대비를 검사가 잽니다 */
table[data-look="head"] thead th {
    background: var(--cms-table-color);
    color: #fff;
}

table[data-look="head"] {
    border-top-color: var(--cms-table-color);
}

/* 장식 없음 — 줄까지 지웁니다. 표를 '자리 잡기' 로만 쓰는 자리가 있습니다 */
table[data-look="bare"] {
    border-top: 0;
}

table[data-look="bare"] th,
table[data-look="bare"] td {
    border-bottom: 0;
}

table[data-look="bare"] thead th {
    background: none;
}

/* ── 크기 ───────────────────────────────────────────────── */
/* ★ 여백과 글자가 함께 움직입니다. 여백만 줄이면 글자가 그대로라 촘촘해 보이지 않고,
   글자만 줄이면 칸이 헐렁해 보입니다. */

table[data-size="sm"] { font-size: 0.85rem; }
table[data-size="sm"] th,
table[data-size="sm"] td { padding: 8px 10px; }

table[data-size="lg"] { font-size: 1rem; }
table[data-size="lg"] th,
table[data-size="lg"] td { padding: 20px 22px; }

/* ============================================================
   제목 (heading.plugin.js) — 섹션 제목 · 윗라벨 · 부제
   ============================================================ */

/*
 * ★★ 제목 **글자는 색을 안 따라갑니다.** 지면의 글자색을 물려받아야 어두운 구획 안에
 *   놓았을 때도 읽힙니다 — 배경만 어둡게 칠하고 글자색을 안 바꾸면 반드시 안 읽히는
 *   것과 같은 자리입니다(§4.14, 대비 1.7:1 로 물렸습니다).
 *   색을 드는 것은 **장식**뿐입니다: 밑줄 · 왼쪽 띠 · 양옆 선 · 윗라벨.
 */
.cms-hd {
    --cms-hd-color: var(--bs-primary, #4f46e5);
    /* 제목 글자 크기. '크기' 설정이 이 한 줄만 바꿉니다 */
    --cms-hd-face: 1.75rem;
    /* 장식(밑줄·띠)의 두께 */
    --cms-hd-mark: 3px;

    margin: 0 0 1.5rem;
}

.cms-hd-eyebrow {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cms-hd-color);
}

.cms-hd-title {
    margin: 0;
    font-size: var(--cms-hd-face);
    font-weight: 700;
    line-height: 1.3;
    color: inherit;
}

.cms-hd-sub {
    margin: 0.6rem 0 0;
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0.8;
    color: inherit;
}

/* ── 모양 ───────────────────────────────────────────────── */

.cms-hd-plain { /* 장식이 없습니다 — 자리를 지키는 값입니다 */ }

/* 밑줄 짧게 — 제목 아래 짧은 선. 정렬을 따라 좌우로 움직입니다.
   ★ ::after 라 저장되는 HTML 에는 흔적이 없습니다. */
.cms-hd-underline .cms-hd-title::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: var(--cms-hd-mark);
    margin-top: 0.7rem;
    border-radius: 2px;
    background: var(--cms-hd-color);
}

.cms-hd-underline.cms-hd-center .cms-hd-title::after { margin-inline: auto; }
.cms-hd-underline.cms-hd-right  .cms-hd-title::after { margin-inline: auto 0; }

/* 왼쪽 색 띠 */
.cms-hd-bar {
    padding-left: 0.9rem;
    border-left: var(--cms-hd-mark) solid var(--cms-hd-color);
}

/*
 * 양옆 선 — 제목 좌우로 선이 뻗습니다.
 * ★ 가운데 정렬일 때 양쪽에 서고, 왼쪽 정렬이면 오른쪽에만 섭니다. 어느 한 조합에서만
 *   다르게 드러나는 것은 그대로 둡니다(§4.8) — 왼쪽 정렬에서 왼쪽 선을 그리면 글자가
 *   지면 안쪽으로 밀려 다른 부품과 줄이 안 맞습니다.
 */
.cms-hd-rule .cms-hd-title {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.cms-hd-rule .cms-hd-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--cms-hd-color) 40%, transparent);
}

.cms-hd-rule.cms-hd-center .cms-hd-title::before {
    content: "";
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--cms-hd-color) 40%, transparent);
}

/* 연한 배경 — 이 모양만 배경에 색을 옅게 깝니다 */
.cms-hd-soft {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--cms-hd-color) 8%, transparent);
}

/* 위아래 선 */
.cms-hd-double {
    padding: 0.9rem 0;
    border-top: 1px solid color-mix(in srgb, var(--cms-hd-color) 35%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--cms-hd-color) 35%, transparent);
}

/* ── 크기 ───────────────────────────────────────────────── */

.cms-hd-sm { --cms-hd-face: 1.3rem;  --cms-hd-mark: 2px; }
.cms-hd-lg { --cms-hd-face: 2.25rem; --cms-hd-mark: 4px; }
.cms-hd-xl { --cms-hd-face: 3rem;    --cms-hd-mark: 5px; }

/* ── 정렬 ───────────────────────────────────────────────── */

.cms-hd-center { text-align: center; }
.cms-hd-right  { text-align: right; }

/* ★ 왼쪽 띠는 정렬을 따라 자리를 옮깁니다 — 오른쪽 정렬인데 띠가 왼쪽에 남으면
   글자와 띠가 지면의 반대편에서 서로를 바라봅니다. */
.cms-hd-bar.cms-hd-right {
    padding-left: 0;
    padding-right: 0.9rem;
    border-left: 0;
    border-right: var(--cms-hd-mark) solid var(--cms-hd-color);
}

/* ── 좁은 화면 ──────────────────────────────────────────── */

@media (max-width: 575.98px) {
    .cms-hd    { --cms-hd-face: 1.5rem; }
    .cms-hd-lg { --cms-hd-face: 1.75rem; }
    .cms-hd-xl { --cms-hd-face: 2rem; }
}

/* ── 바로가기 목록 (list.plugin.js · kind-link) ───────────── */

/*
 * 자료 · 바로가기 줄입니다. 줄 끝의 화살표가 '누를 수 있다' 를 말하므로 앞의 표식은
 * 없습니다 — 둘 다 있으면 눈길이 두 군데로 갈립니다.
 *
 * ★ 줄 전체를 <a> 로 감싸지 않았습니다. 감싸면 종류를 바꿀 때 글 칸을 링크 안팎으로
 *   옮겨야 하는데, 그 자리에서 사람이 쓴 글이 사라지는 것이 이 저장소가 가장 자주
 *   물린 고장입니다(§2 규약 4). 화살표 하나만 링크로 두고 나머지 구조는 다른 종류와
 *   똑같이 둡니다.
 */
.cms-lst-link .cms-lst-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.7rem;
    border-bottom: 1px solid color-mix(in srgb, var(--cms-lst-color) 18%, transparent);
}

.cms-lst-link .cms-lst-body { flex: 1; min-width: 0; }

.cms-lst-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--cms-lst-color);
    background: color-mix(in srgb, var(--cms-lst-color) 10%, transparent);
    text-decoration: none;
    transition: background-color .15s, transform .15s;
}

.cms-lst-go:hover {
    background: color-mix(in srgb, var(--cms-lst-color) 20%, transparent);
    transform: translateX(2px);
}

/* ★ 마지막 줄의 밑줄은 지웁니다 — 목록 끝에 걸린 선은 다음 부품과 붙어 보입니다. */
.cms-lst-link .cms-lst-item:last-child { border-bottom: 0; }

/* '전체를 한 상자로' · '항목마다 테두리' 는 자기 테두리를 이미 들고 있어 줄이 겹칩니다 */
.cms-lst-link.cms-lst-boxed .cms-lst-item:last-child,
.cms-lst-link.cms-lst-card .cms-lst-item { border-bottom: 0; }

/* ── 연대 · 일정 (step.plugin.js · kind-date) ─────────────── */

/*
 * ★★ 번호 카운터를 **끕니다.** 안 끄면 동그라미 한 자리에 번호(::before)와 날짜가
 *   겹쳐 그려집니다 — 화면에서는 글자가 뭉개진 것으로만 보이고, 코드를 읽어서는
 *   둘이 같은 자리에 있다는 것이 안 보입니다(§4.21 과 같은 결의 함정).
 * ★ 번호는 CSS 가 그리고 날짜는 사람이 적습니다. 성질이 반대라 서로 배타적입니다.
 */
.cms-step-date-on .cms-step-mark::before { content: none; }

/* 연도는 동그라미에 안 들어갑니다 — '1단계' 와 같은 알약으로 폅니다. */
.cms-step-date-on .cms-step-mark {
    width: auto;
    min-width: var(--cms-step-mark);
    padding: 0 0.8rem;
    border-radius: 999px;
    font-size: calc(var(--cms-step-face) * 0.85);
}

.cms-step-date {
    /* 글자 폭이 고정되어야 2015 와 2024 가 같은 자리에 섭니다 */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ★ 아이콘과 날짜를 함께 켜 두면 한 칸에 둘이 듭니다. 종류가 배타적이라 정상적으로는
   생기지 않지만, 손으로 클래스를 붙인 마크업이 들어올 수 있어 아이콘을 숨깁니다 —
   '되읽기는 날짜' 인데 화면에는 아이콘이 보이는 어긋남을 막습니다. */
.cms-step-date-on .cms-step-mark > i { display: none; }

/* ── 바로가기 카드 (card.plugin.js · kind-link) ───────────── */

/*
 * ★ 이 클래스는 되읽기가 종류를 가려내는 표이기도 하고(조각이 아이콘 카드와 똑같다),
 *   동시에 **'여기를 누르면 어디론가 간다' 를 말하는 겉모습**이기도 합니다.
 *   표시만 하고 아무것도 안 그리면 규칙 없는 클래스가 되므로 둘을 겸하게 둡니다.
 *
 * ★ 카드 전체를 <a> 로 감싸지 않았습니다. 감싸면 종류를 바꿀 때 뿌리 태그가 바뀌고,
 *   그 자리에서 id 가 달라져 그 카드에 준 서식이 사라집니다(§2 규약 4).
 *   누르는 것은 안쪽 버튼이고, 카드는 '눌릴 것처럼' 보이기만 합니다.
 */
.cms-crd-link {
    transition: transform .15s, box-shadow .15s;
}

.cms-crd-link:hover {
    transform: translateY(-2px);
}

/* 버튼을 카드 아래쪽에 붙입니다 — 여러 장을 나란히 놓았을 때 본문 길이가 달라도
   '자세히 보기' 가 같은 줄에 섭니다. */
.cms-crd-link {
    display: flex;
    flex-direction: column;
}

.cms-crd-link .cms-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* ============================================================
   미디어 상자 (embed.plugin.js) — 영상 · 지도 · 퍼가기
   ============================================================ */

/*
 * ★★ 이 부품의 정체는 **비율**입니다. 서드파티 기본 블록의 영상·지도는 크기를
 *   `style` 로만 정해서, 폭이 줄어도 높이가 안 줄어 좁은 화면에서 비율이 깨집니다
 *   (§4.17 에서 '높이 0' 으로 물린 자리와 같은 뿌리).
 * ★ 갤러리의 `.cms-video-ratio`(padding-bottom 56.25%)는 16:9 에 못 박혀 있어 그대로
 *   못 씁니다. 여기서는 `aspect-ratio` 를 변수로 두어 비율을 축으로 만듭니다.
 * ★★ 설명 글자는 **색을 안 따라갑니다** — 어두운 구획 안에 놓았을 때도 읽혀야 합니다
 *   (§4.29 에서 제목이 물린 자리와 같습니다). 색을 드는 것은 테두리 · 그림자 · 연한
 *   판 · 위 띠 · 자리 안내 아이콘뿐입니다.
 */
.cms-emb {
    --cms-emb-color: var(--bs-primary, #4f46e5);
    /* 비율. '비율' 설정이 이 한 줄만 바꿉니다 */
    --cms-emb-ratio: 16 / 9;
    /* 최대 폭. '최대 폭' 설정이 이 한 줄만 바꿉니다 */
    --cms-emb-max: 720px;
    /*
     * ★★ 기본은 **각집니다(0)**. 예전에는 10px 이었는데, 그러면 '모서리 둥글게(20px)' 가
     *   견줄 것을 잃습니다 — 담당자가 판에서 여섯 모양을 보고 "그림으로는 구분이 안
     *   된다" 고 신고한 자리입니다. **기본 모양은 장식을 하나도 안 들어야** 나머지가
     *   무엇을 더하는지 읽힙니다(제목의 `.cms-hd-plain` 과 같은 규약).
     */
    --cms-emb-radius: 0;

    /*
     * ★★ `width: 100%` 를 빠뜨리면 **미리보기 판에서만** 상자가 사라집니다.
     *   지면에서는 블록이라 폭이 저절로 100% 지만, 고르는 창의 칸(`.gal-demo`)은
     *   `display:flex` 라 이 상자가 **제 내용만큼만** 넓어집니다. 그런데 안에 든 것이
     *   `position:absolute` (자리 안내)거나 프레임이라 **안쪽 폭이 0** 이고,
     *   `aspect-ratio` 가 그 0 에 비율을 곱해 높이까지 0 이 됩니다.
     *   화면에는 빈 칸만 남고 에러는 없습니다 — 브라우저 검사가 이것을 봅니다.
     */
    width: 100%;
    max-width: var(--cms-emb-max);
    /* 상자는 언제나 가운데에 섭니다 — 정렬 칸을 두지 않는 까닭입니다(§4.8) */
    margin: 0 auto 1.5rem;
}

/* 비율을 만드는 칸. 안에 드는 것(iframe · video · 자리 안내)이 이 칸을 채웁니다. */
.cms-emb-box {
    position: relative;
    aspect-ratio: var(--cms-emb-ratio);
    overflow: hidden;
    border-radius: var(--cms-emb-radius);
    /* 영상이 뜨기 전의 판. 흰 칸이면 로딩 중이 '고장' 으로 보입니다 */
    background: #0f172a;
}

.cms-emb-media {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    /* ★ cover 가 아니라 contain — 영상 파일은 비율이 제각각이라 cover 면 잘립니다 */
    object-fit: contain;
}

/*
 * ★★ 사진만 **채웁니다**(cover). 영상은 잘리면 안 되지만 사진은 채우지 않으면 고른
 *   비율 안에 위아래 검은 띠가 남습니다 — 비율을 고르는 까닭이 사라집니다.
 *   같은 축(비율)이 종류에 따라 다른 뜻을 갖는 유일한 자리라 여기 적어 둡니다.
 */
.cms-emb-photo .cms-emb-media {
    object-fit: cover;
}

/*
 * 자리 안내 — 주소를 아직 안 넣은 상자.
 * ★ 빈 iframe 을 그리면 흰 칸 하나만 남아 고장으로 읽힙니다(§4.18).
 *   무엇을 넣으면 되는지 이 자리가 말합니다.
 */
.cms-emb-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem;
    text-align: center;
    /*
     * ★ 판의 바탕(흰색)과 **눈에 띄게** 달라야 합니다. 처음에 #f1f5f9 였는데 흰색과
     *   너무 가까워 상자의 윤곽이 안 보였고, 그러면 모서리·그림자 같은 가장자리 장식이
     *   전부 같아 보입니다(담당자가 "그림으로는 구분이 안 된다" 고 한 자리).
     *   ★ 영상이 들어가면 상자 바탕이 검은 판이라 이 문제가 없습니다 — 자리 안내일
     *     때만 흐렸습니다.
     */
    background: #e3e9f0;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.5;
}

.cms-emb-empty-icon {
    font-size: 1.8rem;
    color: var(--cms-emb-color);
}

/*
 * ── 편집기 안에서만 ─────────────────────────────────────────
 * ★★ 프레임은 마우스를 통째로 삼킵니다. 안 막으면 편집기에서 영상을 눌러도 아무 일이
 *   없어 '고를 수 없는 부품' 이 됩니다(§4.4 에서 물린 '보이는 것과 눌리는 것이
 *   다르다'). 눌림을 끄면 클릭이 상자로 올라가 부품이 골라집니다.
 * ★★ `data-gjs-type` 은 편집기가 **그릴 때만** 붙이는 표라 저장되는 HTML 에는
 *   없습니다. 그래서 이 규칙은 실제 사이트에서 아무 일도 안 합니다 — 방문자는 영상을
 *   그대로 조작합니다(구획의 빈 자리 안내가 `.gjs-dashed` 를 쓰는 것과 같은 방법).
 * ★★ **사진은 뺍니다.** 사진은 마우스를 안 삼키고, 오히려 **두 번 눌러야** 다른 사진으로
 *   바꿀 수 있습니다. 태그로 갈라 두어야 종류를 더해도 이 규칙이 안 새어 나갑니다.
 */
iframe.cms-emb-media[data-gjs-type],
video.cms-emb-media[data-gjs-type] {
    pointer-events: none;
}

/* 설명 줄. 상자 **밖**이라 비율에 안 끼어듭니다. */
.cms-emb-cap {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
    opacity: 0.8;
    color: inherit;
}

/* ── 모양 ───────────────────────────────────────────────── */

.cms-emb-plain { /* 테두리가 없습니다 — 자리를 지키는 값입니다 */ }

/*
 * ★★ 장식은 **한눈에 갈라져야** 합니다. 처음에는 테두리 1px·45% · 그림자 22% ·
 *   모서리 10→20px 이었는데, 판에 여섯을 늘어놓으니 담당자가 "그림으로는 구분이 안
 *   된다" 고 했습니다. 상자 안을 영상(또는 자리 안내)이 꽉 채우므로 **가장자리에만
 *   장식이 남습니다** — 그 가장자리가 옅으면 여섯이 다 같은 네모로 보입니다.
 */
.cms-emb-line .cms-emb-box {
    border: 2px solid var(--cms-emb-color);
}

.cms-emb-shadow .cms-emb-box {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--cms-emb-color) 45%, transparent);
}

.cms-emb-round { --cms-emb-radius: 24px; }

/* 연한 판 — 이 모양만 배경에 색을 옅게 깝니다(제목의 '연한 배경' 과 같은 결). */
.cms-emb-soft {
    /* ★ 안쪽 상자에도 모서리를 조금 줍니다 — 각진 상자가 둥근 판 안에 앉아 있으면
       판이 상자를 감싼 것으로 안 보이고 두 개가 겹친 것으로 보입니다. */
    --cms-emb-radius: 10px;
    padding: 1rem;
    border-radius: 20px;
    background: color-mix(in srgb, var(--cms-emb-color) 14%, transparent);
}

/* 위 색 띠. 테두리가 상자 안쪽으로 들어가야 비율이 안 흔들립니다
   (부트스트랩이 box-sizing: border-box 를 이미 깔아 둡니다). */
.cms-emb-band .cms-emb-box {
    border-top: 6px solid var(--cms-emb-color);
    border-radius: 0 0 var(--cms-emb-radius) var(--cms-emb-radius);
}

/* ── 비율 ───────────────────────────────────────────────── */

.cms-emb-r43  { --cms-emb-ratio: 4 / 3; }
.cms-emb-r11  { --cms-emb-ratio: 1 / 1; }
.cms-emb-r219 { --cms-emb-ratio: 21 / 9; }

/* ★ 세로 비율은 최대 폭까지 함께 좁힙니다 — 720px 폭에 9:16 이면 높이가 1280px 이
   되어 화면 하나를 통째로 먹습니다. */
.cms-emb-r916 { --cms-emb-ratio: 9 / 16; --cms-emb-max: 380px; }

/* ── 크기 (최대 폭) ─────────────────────────────────────── */

/*
 * ★★ 비율보다 **아래**에 둡니다. 두 클래스가 같은 요소에 붙고 특정도가 같으므로
 *   이기는 쪽은 HTML 의 클래스 차례가 아니라 **이 파일의 줄 차례**입니다.
 *   사람이 크기를 골랐으면 그것이 이겨야 하므로 여기가 뒤여야 합니다.
 */
.cms-emb-sm   { --cms-emb-max: 480px; }
.cms-emb-lg   { --cms-emb-max: 960px; }
.cms-emb-full { --cms-emb-max: 100%; }

/* ============================================================
   QR 코드 (qr.plugin.js) — 주소 한 칸이 곧 그림
   ============================================================

   ★★ 그림은 우리 서버가 그립니다(/qr.png). 여기 CSS 는 **둘레와 배치**만 맡습니다 —
     QR 자체의 색·모양에는 손대지 않습니다. 밝은 바탕에 어두운 점이어야 카메라가
     읽습니다.

   ★★ 그림에 filter·mix-blend-mode·배경색을 얹지 마세요. 보기에는 멀쩡한데 카메라가
     못 읽는 상태가 되고, 그때 아무도 CSS 를 의심하지 않습니다(고친 사람은 '색만'
     골랐다고 기억합니다).

   ★ 여백(quiet zone)은 그림 안에 이미 들어 있습니다. 그림을 감싼 칸에 음수 여백을
     주어 '딱 맞게' 만들면 읽히지 않게 됩니다.
   ============================================================ */

.cms-qr {
    /* 둘레·연한 판·링크가 이 한 칸을 함께 봅니다 */
    --cms-qr-color: var(--bs-primary, #4f46e5);
    /* 그림의 한 변. '크기' 설정이 이 한 줄만 바꿉니다 */
    --cms-qr-size: 160px;
    /*
     * ★ 기본은 각집니다(0). '둥근 모서리' 가 견줄 것을 잃지 않도록, 기본 모양은
     *   장식을 하나도 안 듭니다(미디어 상자·제목과 같은 규약).
     */
    --cms-qr-radius: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    /* 내용만큼만 넓어집니다 — 정렬 칸이 뜻을 가지려면 상자가 꽉 차면 안 됩니다 */
    width: max-content;
    max-width: 100%;
    margin: 0 auto 1.5rem;
}

/* 그림. 크기는 변수 한 칸이 정합니다 */
.cms-qr-img {
    display: block;
    width: var(--cms-qr-size);
    height: var(--cms-qr-size);
    border-radius: var(--cms-qr-radius);
    /* ★ 그림 안에 이미 흰 바탕이 있습니다. 여기서 또 깔지 않습니다 */
    background: #fff;
}

.cms-qr-body {
    /* 글은 그림 너비를 넘지 않게 둡니다 — 넘치면 QR 이 글 옆에 붙은 장식처럼 보입니다 */
    max-width: min(360px, 100%);
    text-align: center;
}

.cms-qr-title {
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: .25rem;
}

/*
 * ★★ 설명 글자는 **색을 안 따라갑니다** — 어두운 구획 안에 놓았을 때도 읽혀야 합니다
 *   (제목·미디어 상자에서 정한 규약 그대로). 색이 드는 것은 둘레와 링크뿐입니다.
 */
.cms-qr-desc {
    font-size: .9rem;
    line-height: 1.5;
    opacity: .8;
}

.cms-qr-link {
    display: inline-block;
    margin-top: .5rem;
    font-weight: 600;
    color: var(--cms-qr-color);
    text-decoration: underline;
}

/* ── 모양 ───────────────────────────────────────────────── */

.cms-qr-plain { /* 장식이 없습니다 — 자리를 지키는 값입니다 */ }

.cms-qr-line {
    padding: 1rem;
    border: 2px solid var(--cms-qr-color);
}

.cms-qr-dashed {
    padding: 1rem;
    border: 2px dashed var(--cms-qr-color);
}

.cms-qr-card {
    padding: 1.25rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--cms-qr-color) 30%, transparent);
}

.cms-qr-soft {
    padding: 1.25rem;
    border-radius: 20px;
    background: color-mix(in srgb, var(--cms-qr-color) 14%, transparent);
}

/* 모서리는 바깥 상자와 그림에 함께 줍니다 — 상자만 둥글면 각진 그림이 안에서 튑니다 */
.cms-qr-round {
    --cms-qr-radius: 12px;
    padding: 1.25rem;
    border: 2px solid var(--cms-qr-color);
    border-radius: 24px;
}

/* ── 크기 ───────────────────────────────────────────────── */

/*
 * ★ 110px 아래로는 내리지 않습니다. 그 아래에서는 모듈 하나가 2px 이 안 되어
 *   화면으로도 인쇄로도 잘 안 읽힙니다 — 고를 수 있게 두면 누군가 고릅니다.
 */
.cms-qr-sm { --cms-qr-size: 110px; }
.cms-qr-lg { --cms-qr-size: 220px; }
.cms-qr-xl { --cms-qr-size: 300px; }

/* ── 배치 ───────────────────────────────────────────────── */

/* 옆으로 — 그림 왼쪽, 글 오른쪽 */
.cms-qr-aside {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
}

.cms-qr-aside .cms-qr-body {
    text-align: left;
}

/* ── 정렬 ───────────────────────────────────────────────── */

/*
 * ★ 상자가 `width: max-content` 라 정렬은 **바깥 여백**으로 합니다.
 *   text-align 으로는 안 됩니다 — 상자 자체가 움직여야 합니다.
 */
.cms-qr-left  { margin-left: 0;    margin-right: auto; }
.cms-qr-right { margin-left: auto; margin-right: 0; }

/* ── 좁은 화면 ──────────────────────────────────────────── */

/*
 * ★ 좁은 화면에서는 '옆으로' 를 풉니다. 300px QR 옆에 글을 세우면 둘 다 못 읽습니다.
 */
@media (max-width: 575.98px) {
    .cms-qr-aside {
        flex-direction: column;
    }

    .cms-qr-aside .cms-qr-body {
        text-align: center;
    }

    /* 아주 크게(300px)는 좁은 화면에서 화면 폭을 넘깁니다 */
    .cms-qr-xl { --cms-qr-size: 240px; }
}

/* ── 인쇄 ───────────────────────────────────────────────── */

/*
 * ★★ QR 이 이 부품의 전부입니다 — 브라우저의 '배경 그림 안 찍기' 설정에 그림이
 *   딸려 나가지 않도록 못 박습니다. 흰 바탕이 안 찍히면 어두운 종이 위의 QR 이 되어
 *   카메라가 못 읽습니다.
 */
@media print {
    .cms-qr-img {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 그림자는 종이에서 회색 얼룩으로만 남습니다 */
    .cms-qr-card { box-shadow: none; }
}