/* ====================================================
   교회 테마 - default.css
   그누보드5 교회 테마
   sarang.org 구조 참고 / 우아하고 신뢰감 있는 디자인
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Noto+Serif+KR:wght@400;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

/* ── CSS Variables ── */
:root {
    --primary:      #5B3E8C;   /* 보라/자주 - 영성, 왕권 */
    --primary-dark: #3D2568;
    --primary-light:#7B5CB8;
    --primary-pale: rgba(91,62,140,.08);
    --gold:         #B8973E;   /* 금색 - 신성, 영광 */
    --gold-light:   #D4B56A;
    --gold-pale:    rgba(184,151,62,.1);
    --warm:         #F7F3EE;   /* 따뜻한 크림 배경 */
    --warm2:        #EEE8DE;
    --warm3:        #E4D9C8;
    --white:        #FFFFFF;
    --off-white:    #FDFBF8;
    --gray-100:     #F5F2EE;
    --gray-200:     #E8E3DC;
    --gray-300:     #D4CCC0;
    --gray-400:     #A89D90;
    --gray-500:     #7A7068;
    --gray-600:     #544D45;
    --gray-700:     #3A342C;
    --dark:         #1C1814;
    --dark2:        #2A2318;
    --red:          #C0392B;
    --green:        #27AE60;
    --blue:         #2980B9;
    --font-serif:   'Playfair Display', 'Noto Serif KR', Georgia, serif;
    --font-kr-serif:'Noto Serif KR', serif;
    --font-kr:      'Noto Sans KR', sans-serif;
    --ease:         cubic-bezier(.4,0,.2,1);
    --trans:        all .28s var(--ease);
    --trans-slow:   all .6s var(--ease);
    --shadow-xs:    0 1px 4px rgba(28,24,20,.06);
    --shadow-sm:    0 2px 10px rgba(28,24,20,.08);
    --shadow-md:    0 6px 24px rgba(28,24,20,.1);
    --shadow-lg:    0 14px 44px rgba(28,24,20,.13);
    --shadow-xl:    0 24px 60px rgba(28,24,20,.17);
    --radius-sm:    4px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-full:  999px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-kr);
    background: var(--off-white);
    color: var(--gray-700);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
hr { display: none; }

/* ====================================================
   TOP NOTICE BAR (생방송 등 중요 공지)
   ==================================================== */
#tnb {
    background: var(--primary);
    color: rgba(255,255,255,.9);
    font-size: .78rem;
    padding: 8px 0;
    text-align: center;
    position: relative;
    z-index: 1001;
}
#tnb .tnb-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.tnb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.85);
    transition: var(--trans);
    font-weight: 500;
    letter-spacing: .01em;
}
.tnb-item:hover { color: var(--white); }
.tnb-item i { font-size: .75rem; }
.tnb-live {
    background: #E53E3E;
    color: var(--white);
    font-size: .62rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    letter-spacing: .06em;
    animation: livePulse 2s ease infinite;
}
@keyframes livePulse {
    0%,100% { opacity: 1; } 50% { opacity: .7; }
}
.tnb-sep { width: 1px; height: 14px; background: rgba(255,255,255,.2); }

/* ====================================================
   HEADER
   ==================================================== */
#hd {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xs);
    transition: var(--trans);
}
#hd.scrolled { box-shadow: var(--shadow-sm); }
#hd_h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

#hd_wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    height: 68px;
    display: flex;
    align-items: center;
    gap: 0;
}

/* Logo */
#logo { flex-shrink: 0; margin-right: auto; }
#logo a { display: flex; align-items: center; gap: 12px; transition: var(--trans); }
#logo a:hover { opacity: .82; }
#logo img { height: 40px; width: auto; }
.logo-cross {
    width: 38px; height: 38px;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 1.1rem; color: var(--white);
    flex-shrink: 0;
}
.logo-text-wrap { display: flex; flex-direction: column; gap: 1px; }
.logo-main {
    font-family: var(--font-kr-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1;
    letter-spacing: .01em;
}
.logo-sub {
    font-size: .58rem;
    color: var(--gold);
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1;
}

/* 검색 */
.hd_sch_wr {
    margin-right: 20px;
}
#hd_sch {
    position: relative;
    display: flex;
    align-items: center;
}
#sch_stx {
    width: 180px;
    padding: 7px 36px 7px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    font-family: var(--font-kr);
    font-size: .8rem;
    color: var(--gray-700);
    background: var(--gray-100);
    outline: none;
    transition: var(--trans);
}
#sch_stx:focus { border-color: var(--primary); background: var(--white); box-shadow: 0 0 0 3px var(--primary-pale); }
#sch_stx::placeholder { color: var(--gray-400); }
#sch_submit {
    position: absolute;
    right: 10px;
    background: none; border: none; cursor: pointer;
    color: var(--gray-400); font-size: .85rem;
    transition: var(--trans);
}
#sch_submit:hover { color: var(--primary); }

/* GNB */
#gnb { }
#gnb h2 { display: none; }
#gnb_1dul { display: flex; align-items: center; list-style: none; }
.gnb_mnal { display: none; }
.gnb_1dli { position: relative; }
.gnb_1da {
    display: block;
    padding: 8px 14px;
    font-family: var(--font-kr);
    font-size: .84rem;
    font-weight: 600;
    color: var(--gray-700);
    transition: var(--trans);
    letter-spacing: -.01em;
    white-space: nowrap;
    position: relative;
}
.gnb_1da::after {
    content: '';
    position: absolute;
    bottom: 0; left: 14px; right: 14px;
    height: 2px;
    background: var(--primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: var(--trans);
}
.gnb_1da:hover { color: var(--primary); }
.gnb_1da:hover::after { transform: scaleX(1); }

/* Dropdown */
.gnb_2dul {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-top: 2px solid var(--primary);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    opacity: 0; visibility: hidden;
    transition: var(--trans);
    z-index: 999;
}
.gnb_2dul .bg { display: none; }
.gnb_2dul ul { padding: 8px 0; }
.gnb_2dli { }
.gnb_2da {
    display: block;
    padding: 9px 20px;
    font-family: var(--font-kr);
    font-size: .82rem;
    color: var(--gray-600);
    transition: var(--trans);
    white-space: nowrap;
    border-left: 2px solid transparent;
}
.gnb_2da:hover { color: var(--primary); border-left-color: var(--primary); background: var(--primary-pale); padding-left: 24px; }
.gnb_1dli:hover .gnb_2dul,
.gnb_1dli:focus-within .gnb_2dul { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Header Login */
.hd_login { display: flex; align-items: center; gap: 8px; list-style: none; margin-left: 16px; }
.hd_login li a {
    font-size: .8rem; font-weight: 500;
    color: var(--gray-500); padding: 7px 14px;
    border: 1px solid var(--gray-200); border-radius: var(--radius-full);
    transition: var(--trans);
}
.hd_login li a:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-pale); }
.hd_login li:last-child a {
    background: var(--primary); color: var(--white); border-color: var(--primary); font-weight: 700;
}
.hd_login li:last-child a:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* Mobile Menu */
#gnb_all {
    display: none;
    position: fixed; inset: 0;
    background: var(--white); z-index: 9999;
    flex-direction: column; padding: 70px 28px 40px; overflow-y: auto;
}
#gnb_all.open { display: flex; }
.gnb_al_ul { width: 100%; }
.gnb_al_li { border-bottom: 1px solid var(--gray-100); }
.gnb_al_a {
    display: block; padding: 15px 0;
    font-family: var(--font-kr-serif); font-size: 1.2rem; font-weight: 700;
    color: var(--dark); transition: var(--trans);
}
.gnb_al_a:hover { color: var(--primary); padding-left: 8px; }
.gnb_al_ul ul { padding: 0 0 10px 12px; }
.gnb_al_ul ul li a { display: block; font-size: .85rem; color: var(--gray-500); padding: 7px 0; transition: var(--trans); }
.gnb_al_ul ul li a:hover { color: var(--primary); }
.gnb_close_btn {
    position: absolute; top: 18px; right: 22px;
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    font-size: .95rem; color: var(--gray-400); border: 1px solid var(--gray-200); border-radius: 50%; transition: var(--trans);
}
.gnb_close_btn:hover { color: var(--primary); border-color: var(--primary); }
#gnb_all_bg { display: none; }

/* ====================================================
   WRAPPER / CONTAINER (서브 페이지)
   ==================================================== */
#wrapper { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
#container_wr { display: flex; gap: 40px; padding: 52px 0 100px; }
#container { flex: 1; min-width: 0; }
#container_title {
    font-family: var(--font-kr-serif); font-size: 1.9rem; font-weight: 700;
    color: var(--dark); margin-bottom: 32px; padding-bottom: 18px;
    border-bottom: 1px solid var(--gray-200); position: relative; letter-spacing: -.02em;
}
#container_title::after {
    content: ''; position: absolute; bottom: -1px; left: 0;
    width: 44px; height: 2px; background: var(--primary);
}
#aside { width: 260px; flex-shrink: 0; }

/* ====================================================
   HERO SECTION
   ==================================================== */
.co-hero {
    position: relative;
    height: 90vh; min-height: 620px;
    display: flex; align-items: flex-end;
    overflow: hidden;
    background: var(--dark);
}
/* 배경 이미지 자리 */
.co-hero-bg {
    position: absolute; inset: 0;
    background:
        linear-gradient(to bottom, rgba(28,24,20,.2) 0%, rgba(28,24,20,.65) 70%, rgba(28,24,20,.9) 100%),
        linear-gradient(135deg, #2A1A4E 0%, #3D2568 30%, #1C1814 100%);
    background-size: cover; background-position: center;
}
/* 십자가 watermark */
.co-hero-cross {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    width: 280px; height: 340px;
    opacity: .06;
    pointer-events: none;
}
.co-hero-cross::before, .co-hero-cross::after {
    content: '';
    position: absolute;
    background: var(--white);
    border-radius: 4px;
}
.co-hero-cross::before { width: 40px; height: 100%; left: 50%; transform: translateX(-50%); }
.co-hero-cross::after  { width: 100%; height: 40px; top: 28%; }

/* Light rays */
.co-hero-rays {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 80% at 20% 60%, rgba(184,151,62,.08) 0%, transparent 65%),
                radial-gradient(ellipse 40% 60% at 80% 30%, rgba(91,62,140,.12) 0%, transparent 55%);
}

.co-hero-inner {
    position: relative; z-index: 3;
    max-width: 1280px; width: 100%; margin: 0 auto;
    padding: 0 32px 80px;
}
.co-hero-pre {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: 18px;
    animation: fadeUp .6s .1s var(--ease) both;
}
.co-hero-pre span {
    font-family: var(--font-kr); font-size: .7rem; font-weight: 600;
    letter-spacing: .2em; color: var(--gold-light); text-transform: uppercase;
}
.co-hero-pre::before { content: ''; width: 32px; height: 1px; background: var(--gold); display: block; }

.co-hero h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 700; font-style: italic;
    color: var(--white); line-height: 1.2;
    letter-spacing: -.01em; max-width: 680px;
    margin-bottom: 20px;
    animation: fadeUp .6s .15s var(--ease) both;
}
.co-hero h1 em { font-style: normal; color: var(--gold-light); }
.co-hero-verse {
    font-family: var(--font-kr-serif); font-size: 1rem; font-weight: 400;
    color: rgba(255,255,255,.65); line-height: 1.85; max-width: 500px;
    margin-bottom: 40px; font-style: italic;
    animation: fadeUp .6s .2s var(--ease) both;
}
.co-hero-btns {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    animation: fadeUp .6s .25s var(--ease) both;
}

/* Worship times bar */
.co-worship-bar {
    background: var(--white);
    border-top: 3px solid var(--primary);
    padding: 0;
}
.co-worship-bar-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 32px;
    display: grid; grid-template-columns: auto 1fr;
    align-items: stretch;
}
.co-worship-bar-label {
    background: var(--primary);
    color: var(--white);
    padding: 16px 28px;
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-kr-serif); font-size: .9rem; font-weight: 700;
    letter-spacing: .02em; white-space: nowrap;
}
.co-worship-bar-label i { font-size: .85rem; }
.co-worship-times {
    display: flex; align-items: center; gap: 0;
    overflow-x: auto; padding: 0;
}
.co-worship-time {
    padding: 16px 24px;
    border-right: 1px solid var(--gray-100);
    white-space: nowrap; text-align: center;
}
.co-worship-time:last-child { border-right: none; }
.co-worship-time h4 {
    font-family: var(--font-kr); font-size: .75rem; font-weight: 700;
    color: var(--primary); margin-bottom: 4px; letter-spacing: .02em;
}
.co-worship-time p {
    font-family: var(--font-kr); font-size: .78rem; color: var(--gray-600);
    line-height: 1.5;
}

@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

/* Buttons */
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary); color: var(--white);
    font-family: var(--font-kr); font-size: .85rem; font-weight: 700;
    padding: 12px 24px; border-radius: var(--radius-sm);
    border: 2px solid var(--primary); transition: var(--trans);
}
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(91,62,140,.3); }
.btn-gold {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--gold); color: var(--white);
    font-family: var(--font-kr); font-size: .85rem; font-weight: 700;
    padding: 12px 24px; border-radius: var(--radius-sm);
    border: 2px solid var(--gold); transition: var(--trans);
}
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(184,151,62,.3); }
.btn-outline-white {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: var(--white);
    font-family: var(--font-kr); font-size: .85rem; font-weight: 600;
    padding: 11px 22px; border-radius: var(--radius-sm);
    border: 2px solid rgba(255,255,255,.4); transition: var(--trans);
}
.btn-outline-white:hover { border-color: var(--white); background: rgba(255,255,255,.07); }
.btn-outline-primary {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: var(--primary);
    font-family: var(--font-kr); font-size: .8rem; font-weight: 700;
    padding: 7px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--primary); transition: var(--trans);
}
.btn-outline-primary:hover { background: var(--primary); color: var(--white); }

/* ====================================================
   SECTION COMMON
   ==================================================== */
.co-section { padding: 80px 0; }
.co-section-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.co-section-hd {
    display: flex; align-items: flex-end; justify-content: space-between;
    margin-bottom: 36px; padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200); position: relative;
}
.co-section-hd::after {
    content: ''; position: absolute;
    bottom: -1px; left: 0; width: 40px; height: 2px; background: var(--primary);
}
.co-section-hd h2 {
    font-family: var(--font-kr-serif); font-size: 1.5rem; font-weight: 700;
    color: var(--dark); letter-spacing: -.02em;
    display: flex; align-items: center; gap: 10px;
}
.co-section-hd h2 i { color: var(--primary); font-size: 1.1rem; }
.co-section-hd a {
    font-size: .78rem; font-weight: 600; color: var(--primary);
    display: flex; align-items: center; gap: 5px; transition: var(--trans);
    white-space: nowrap;
}
.co-section-hd a:hover { gap: 8px; }
.co-section-hd a::after { content: '→'; }

/* ====================================================
   QUICK LINKS
   ==================================================== */
.co-quick { background: var(--warm); border-bottom: 1px solid var(--gray-200); padding: 0; }
.co-quick-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 32px;
    display: grid; grid-template-columns: repeat(4, 1fr);
}
.co-quick-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 28px 16px;
    border-right: 1px solid var(--gray-200);
    transition: var(--trans); cursor: pointer;
    text-decoration: none;
}
.co-quick-item:last-child { border-right: none; }
.co-quick-item:hover { background: var(--white); }
.co-quick-icon {
    width: 50px; height: 50px;
    background: var(--primary-pale);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: var(--primary);
    transition: var(--trans);
}
.co-quick-item:hover .co-quick-icon { background: var(--primary); color: var(--white); }
.co-quick-item span {
    font-family: var(--font-kr); font-size: .82rem; font-weight: 700;
    color: var(--gray-700); transition: var(--trans);
}
.co-quick-item:hover span { color: var(--primary); }

/* ====================================================
   SERMON SECTION (설교·찬양)
   ==================================================== */
.co-sermon { background: var(--off-white); }
.co-sermon-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 20px;
}
.co-sermon-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    overflow: hidden; transition: var(--trans);
}
.co-sermon-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: transparent; }
.co-sermon-thumb {
    position: relative; overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--dark2);
    display: flex; align-items: center; justify-content: center;
}
.co-sermon-thumb-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--dark2), var(--primary-dark));
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 10px;
}
.co-sermon-thumb-placeholder i { font-size: 2.5rem; color: rgba(255,255,255,.2); }
.co-sermon-thumb-placeholder span {
    font-family: var(--font-kr); font-size: .6rem; letter-spacing: .15em;
    text-transform: uppercase; color: rgba(255,255,255,.2);
}
.co-sermon-thumb img { width: 100%; height: 100%; object-fit: cover; transition: var(--trans-slow); }
.co-sermon-card:hover .co-sermon-thumb img { transform: scale(1.05); }
.co-sermon-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.35); opacity: 0; transition: var(--trans);
}
.co-sermon-play i { font-size: 3rem; color: var(--white); filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.co-sermon-card:hover .co-sermon-play { opacity: 1; }
.co-sermon-tag {
    position: absolute; top: 12px; left: 12px;
    background: var(--primary); color: var(--white);
    font-family: var(--font-kr); font-size: .62rem; font-weight: 700;
    padding: 4px 10px; letter-spacing: .06em;
}
.co-sermon-body { padding: 20px 18px; }
.co-sermon-cat {
    font-family: var(--font-kr); font-size: .7rem; font-weight: 700;
    color: var(--primary); letter-spacing: .06em; margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.co-sermon-body h3 {
    font-family: var(--font-kr-serif); font-size: 1rem; font-weight: 700;
    color: var(--dark); line-height: 1.5; margin-bottom: 6px;
    letter-spacing: -.02em; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.co-sermon-body .co-sermon-card:first-child h3 { font-size: 1.15rem; -webkit-line-clamp: 3; }
.co-sermon-body p {
    font-size: .78rem; color: var(--gray-400); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.co-sermon-meta {
    font-family: var(--font-kr); font-size: .72rem; color: var(--gray-400);
    margin-top: 10px; display: flex; align-items: center; gap: 10px;
    padding-top: 10px; border-top: 1px solid var(--gray-100);
}
.co-sermon-meta i { font-size: .65rem; }

/* ====================================================
   NOTICE + PROGRAM (공지사항 + 교육훈련)
   ==================================================== */
.co-board-section { background: var(--warm); }
.co-board-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* 공지사항 테이블 */
.co-notice-list { }
.co-notice-item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--gray-200);
    transition: var(--trans);
}
.co-notice-item:first-child { border-top: 1px solid var(--gray-200); }
.co-notice-item:hover { padding-left: 6px; }
.co-notice-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary); flex-shrink: 0;
}
.co-notice-item a {
    flex: 1; font-family: var(--font-kr); font-size: .85rem;
    color: var(--gray-700); transition: var(--trans);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-notice-item:hover a { color: var(--primary); }
.co-notice-item .co-date {
    font-size: .72rem; color: var(--gray-400); flex-shrink: 0;
}

/* 교육훈련 카드 */
.co-program-list { display: flex; flex-direction: column; gap: 10px; }
.co-program-item {
    background: var(--white); border: 1px solid var(--gray-200);
    padding: 14px 16px;
    display: flex; align-items: center; gap: 14px;
    transition: var(--trans);
}
.co-program-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.co-program-status {
    padding: 4px 10px; font-size: .62rem; font-weight: 700;
    letter-spacing: .06em; white-space: nowrap; flex-shrink: 0;
}
.co-program-status.open   { background: rgba(39,174,96,.12); color: #27AE60; }
.co-program-status.closed { background: var(--gray-100); color: var(--gray-400); }
.co-program-item h4 {
    font-family: var(--font-kr); font-size: .84rem; font-weight: 700;
    color: var(--dark); flex: 1; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-program-dept {
    font-size: .7rem; color: var(--gray-400); flex-shrink: 0; white-space: nowrap;
}

/* ====================================================
   WORD (말씀) SECTION
   ==================================================== */
.co-word { background: var(--white); }
.co-word-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}
.co-word-card {
    border: 1px solid var(--gray-200);
    overflow: hidden; transition: var(--trans);
    background: var(--off-white);
}
.co-word-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); }
.co-word-card-hd {
    background: var(--primary);
    padding: 14px 20px;
    display: flex; align-items: center; gap: 10px;
}
.co-word-card-hd h3 {
    font-family: var(--font-kr-serif); font-size: .9rem; font-weight: 700;
    color: var(--white); flex: 1; letter-spacing: .01em;
}
.co-word-card-hd .co-date {
    font-family: var(--font-kr); font-size: .7rem; color: rgba(255,255,255,.6);
}
.co-word-body { padding: 20px; }
.co-word-title {
    font-family: var(--font-kr-serif); font-size: 1rem; font-weight: 700;
    color: var(--dark); margin-bottom: 10px; line-height: 1.5; letter-spacing: -.02em;
}
.co-word-text {
    font-family: var(--font-kr); font-size: .82rem; color: var(--gray-500);
    line-height: 1.8; margin-bottom: 14px;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.co-word-ref {
    font-family: var(--font-kr-serif); font-size: .8rem; font-style: italic;
    color: var(--primary); font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.co-word-ref i { font-size: .75rem; }

/* 암송 구절 카드 */
.co-verse-card {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: var(--white);
    padding: 32px 24px;
    position: relative; overflow: hidden;
}
.co-verse-card::before {
    content: '"'; position: absolute;
    top: -20px; left: 10px;
    font-family: var(--font-serif); font-size: 12rem;
    color: rgba(255,255,255,.04); line-height: 1; pointer-events: none;
}
.co-verse-card-tag {
    display: inline-block; font-size: .65rem; font-weight: 700;
    letter-spacing: .12em; padding: 4px 12px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.8); margin-bottom: 18px;
}
.co-verse-card p {
    font-family: var(--font-kr-serif); font-size: 1rem; font-weight: 400;
    line-height: 1.85; color: rgba(255,255,255,.92);
    margin-bottom: 16px; font-style: italic;
}
.co-verse-ref {
    font-family: var(--font-kr); font-size: .78rem; font-weight: 700;
    color: var(--gold-light);
}

/* ====================================================
   PRAYER SECTION
   ==================================================== */
.co-prayer { background: var(--warm); }
.co-prayer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.co-prayer-card {
    position: relative; overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--dark2);
    cursor: pointer; transition: var(--trans);
}
.co-prayer-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.co-prayer-bg {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(28,24,20,.3) 0%, rgba(28,24,20,.85) 100%);
    transition: var(--trans-slow);
}
.co-prayer-card:hover .co-prayer-bg { background: linear-gradient(to bottom, rgba(91,62,140,.5) 0%, rgba(28,24,20,.9) 100%); }
.co-prayer-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--dark2), #2A1A4E);
}
.co-prayer-placeholder i { font-size: 3rem; color: rgba(255,255,255,.08); }
.co-prayer-content {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 20px 18px; z-index: 2;
}
.co-prayer-content h3 {
    font-family: var(--font-kr-serif); font-size: .95rem; font-weight: 700;
    color: var(--white); margin-bottom: 6px; line-height: 1.45;
}
.co-prayer-content p {
    font-size: .72rem; color: rgba(255,255,255,.55); line-height: 1.5;
}
.co-prayer-icon {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7); font-size: .8rem;
}

/* ====================================================
   FOOTER
   ==================================================== */
#ft {
    background: var(--dark);
    color: rgba(255,255,255,.45);
    padding-top: 60px;
}
#ft_wr {
    max-width: 1280px; margin: 0 auto;
    padding: 0 32px 52px;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 52px;
}
#ft_link { display: none; }
#ft_company h2 { display: none; }
.ft_info { font-size: .76rem; line-height: 2; color: rgba(255,255,255,.25); }
.ft-logo {
    display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.ft-logo-cross {
    width: 34px; height: 34px;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; color: var(--white);
}
.ft-logo-name {
    font-family: var(--font-kr-serif); font-size: 1.1rem; font-weight: 700;
    color: var(--white); letter-spacing: .01em;
}
.ft-desc { font-size: .8rem; color: rgba(255,255,255,.3); line-height: 1.9; margin-bottom: 18px; }
.ft-contact { font-size: .78rem; color: rgba(255,255,255,.3); line-height: 2.1; }
.ft-contact strong { color: rgba(255,255,255,.5); }
.ft-contact a { transition: var(--trans); }
.ft-contact a:hover { color: var(--gold-light); }
.ft-col h3 {
    font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.3); margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.ft-col ul { list-style: none; padding: 0; }
.ft-col ul li { margin-bottom: 10px; }
.ft-col ul li a { font-size: .8rem; color: rgba(255,255,255,.35); transition: var(--trans); }
.ft-col ul li a:hover { color: var(--gold-light); padding-left: 4px; }
#ft_copy {
    max-width: 1280px; margin: 0 auto;
    padding: 20px 32px;
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    font-size: .72rem; color: rgba(255,255,255,.22);
}
.ft-policy { display: flex; gap: 16px; }
.ft-policy a { color: rgba(255,255,255,.28); transition: var(--trans); }
.ft-policy a:hover { color: var(--gold-light); }

/* Back to Top */
#top_btn {
    position: fixed; bottom: 36px; right: 36px;
    width: 48px; height: 48px;
    background: var(--primary); color: var(--white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; z-index: 999;
    opacity: 0; transform: translateY(14px); transition: var(--trans);
    box-shadow: 0 4px 16px rgba(91,62,140,.4);
}
#top_btn.visible { opacity: 1; transform: translateY(0); }
#top_btn:hover { background: var(--primary-dark); transform: translateY(-3px); }

#hd_login_msg {
    position: fixed; top: 0; left: 0; right: 0;
    background: var(--primary); color: var(--white);
    text-align: center; font-size: .78rem; padding: 7px 16px; z-index: 9999;
}
#hd_login_msg a { color: rgba(255,255,255,.7); margin-left: 12px; text-decoration: underline; }

.sound_only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#aside > div { background: var(--white); border: 1px solid var(--gray-200); padding: 22px; margin-bottom: 18px; }
.lt_wr { float: left; width: 32%; border: 1px solid var(--gray-200); padding: 18px; margin-bottom: 18px; background: var(--white); transition: var(--trans); }
.lt_wr:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.latest_wr::after { content: ''; display: table; clear: both; }
/* popular */
.popular_wr { margin-top: 6px; }
.popular_wr a { font-size: .72rem; color: var(--gray-500); background: var(--gray-100); padding: 3px 10px; border-radius: var(--radius-full); display: inline-block; margin: 2px 2px 2px 0; transition: var(--trans); }
.popular_wr a:hover { background: var(--primary-pale); color: var(--primary); }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 1100px) {
    #hd_wrapper, .co-section-inner, #ft_wr, #ft_copy { padding-left: 24px; padding-right: 24px; }
    #wrapper { padding: 0 24px; }
    .co-worship-bar-inner { padding: 0 24px; }
    .co-quick-inner { padding: 0 24px; }
    .co-sermon-grid { grid-template-columns: 1fr 1fr; }
    .co-sermon-grid .co-sermon-card:first-child { grid-column: span 2; }
    .co-word-grid { grid-template-columns: 1fr 1fr; }
    .co-prayer-grid { grid-template-columns: repeat(2, 1fr); }
    #ft_wr { grid-template-columns: 1fr 1fr; gap: 32px; }
    #sch_stx { width: 140px; }
}
@media (max-width: 768px) {
    #hd_wrapper { padding: 0 20px; }
    .hd_sch_wr { display: none; }
    #gnb { display: none; }
    .gnb_mnal { display: block; }
    .hd_login { display: none; }
    #wrapper { padding: 0 20px; }
    #container_wr { flex-direction: column; }
    #aside { width: 100%; }
    .co-section { padding: 56px 0; }
    .co-section-inner { padding: 0 20px; }
    .co-quick-inner { grid-template-columns: repeat(2, 1fr); padding: 0 20px; }
    .co-quick-item { border-right: none; border-bottom: 1px solid var(--gray-200); }
    .co-sermon-grid { grid-template-columns: 1fr; }
    .co-sermon-grid .co-sermon-card:first-child { grid-column: span 1; }
    .co-board-two { grid-template-columns: 1fr; }
    .co-word-grid { grid-template-columns: 1fr; }
    .co-prayer-grid { grid-template-columns: repeat(2, 1fr); }
    .co-worship-bar-inner { grid-template-columns: 1fr; }
    .co-worship-bar-label { padding: 12px 20px; justify-content: center; }
    .co-worship-times { padding: 4px 0; overflow-x: auto; }
    .co-worship-time { padding: 10px 16px; }
    #ft_wr { grid-template-columns: 1fr; gap: 28px; padding: 0 20px 36px; }
    #ft_copy { padding: 18px 20px; flex-direction: column; align-items: flex-start; }
    .tnb-inner { gap: 12px; }
    .tnb-sep { display: none; }
    #top_btn { bottom: 20px; right: 20px; }
}
@media (max-width: 480px) {
    .co-hero h1 { font-size: 2.2rem; }
    .co-hero-btns { flex-direction: column; align-items: flex-start; }
    .co-prayer-grid { grid-template-columns: 1fr 1fr; }
    .co-quick-inner { grid-template-columns: repeat(2, 1fr); }
}