@charset "UTF-8";

/* 히어로 배경 이미지 */
.hero { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1438232992991-995b7058bbb3?auto=format&fit=crop&w=1920&q=80'); }

/* 3단 퀵 메뉴 */
.quick-menu-container { max-width: 1100px; margin: -80px auto 80px; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; z-index: 10; padding: 0 20px; }
.quick-item { position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: white; overflow: hidden; border-right: 1px solid rgba(255,255,255,0.2); }
.quick-item:last-child { border-right: none; }
.quick-item .bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.6s ease; z-index: 1; }
.item-1 .bg-img { background-image: url('../images/새비전양의문교회_1_예배안내.jpg'); }
.item-2 .bg-img { background-image: url('../images/새비전양의문교회_2_교회 위치.png'); }
.item-3 .bg-img { background-image: url('../images/새비전양의문교회_3_주일예배실황.png'); }
.quick-item::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2; transition: 0.3s; }
.quick-item:hover .bg-img { transform: scale(1.1); }
.quick-item:hover::before { background: rgba(0, 102, 255, 0.4); }
.quick-item .content { position: relative; z-index: 3; text-align: center; padding: 20px; }
.quick-item .title { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.quick-item .desc { font-size: 14px; font-weight: 300; opacity: 0.9; line-height: 1.5; word-break: keep-all; }
.live-tag { position: absolute; top: 20px; right: 20px; background: #ff3b30; color: white; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 800; z-index: 4; animation: blink 1.5s infinite; }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* 메인 콘텐츠 (유튜브 & 소식) */
.main-content { max-width: 1200px; margin: 0 auto 100px; padding: 0 20px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; }
.main-content > section {
    min-width: 0;
}
.section-title { font-size: 24px; font-weight: 700; margin-bottom: 25px; color: #222; display: flex; justify-content: space-between; align-items: baseline; }
.section-title a { font-size: 14px; color: #999; text-decoration: none; font-weight: 400; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; }
.notice-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid #333; }
.notice-item { padding: 18px 5px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.notice-item a { text-decoration: none; color: #444; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 75%; transition: 0.2s; }
.notice-item a:hover { color: #253568; }
.notice-item .date { color: #aaa; font-size: 13px; }
.badge { background: #ff3b30; color: white; padding: 2px 6px; border-radius: 3px; font-size: 11px; margin-right: 8px; vertical-align: middle; font-weight: 600; }

@media (max-width: 768px) {
    .quick-menu-container { grid-template-columns: 1fr; margin-top: -40px; gap: 0; }
    .quick-item { aspect-ratio: auto; min-height: 250px; padding: 40px 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .main-content { grid-template-columns: 1fr; gap: 40px; }
}

/* ==========================================================================
   메인 팝업 스타일
   ========================================================================== */
.main-popup {
    position: absolute; /* PC에서는 문서 기준 절대 위치 */
    top: 120px;
    left: 50px;
    z-index: 9999;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    width: 450px;
    max-width: 90vw;
}

.popup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    background: #253568; /* 교회 테마 색상 적용 */
    color: #fff;
    font-size: 13px;
}

.popup-footer label { display: flex; align-items: center; margin: 0; }
.popup-footer button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    padding: 5px;
}

/* 모바일 환경에서는 팝업을 화면 한가운데로! */
@media (max-width: 768px) {
    .main-popup {
        position: fixed; /* 모바일은 스크롤 내려도 따라다니도록 고정 */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 320px;
    }
}