모바일에서 아래로 스크롤이 안되고 밑에 내용이 짤려서 보여요

<?php
if (!defined('_INDEX_')) define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit;
include_once(G5_THEME_PATH . '/head.php');
?>

<link rel="stylesheet" href="<?php echo G5_THEME_URL; ?>/css/layout.css?v=<?php echo time(); ?>">

<div id="intro_site_wrapper">
    <div class="center_content">
        <header class="intro_header">
            <div class="intro_logo">
                <img src="<?php echo G5_THEME_URL; ?>/img/logo.png" alt="이천시장애인자립생활센터">
            </div>
            <div class="msg_box">이천시장애인자립생활센터 홈페이지를 방문해주셔서 감사합니다.</div>
        </header>

        <main class="intro_main_card">
            <div class="card_accordion">
                <div class="card_item active" onclick="expandCard(this)">
                    <div class="card_bg" style="background-image: url('<?php echo G5_THEME_URL; ?>/img/main_top_bg01.jpg');"></div>
                    <div class="card_inner_wrap">
                        <div class="card_title"><span class="num">01</span><h3>참선한이웃</h3></div>
                        <div class="card_menus">
                            <a href="#">법인소개</a><a href="#">사업보고</a><a href="#">나눔보고</a><a href="#">오시는길</a>
                        </div>
                    </div>
                </div>
                <div class="card_item" onclick="expandCard(this)">
                    <div class="card_bg" style="background-image: url('<?php echo G5_THEME_URL; ?>/img/main_top_bg02.jpg');"></div>
                    <div class="card_inner_wrap">
                        <div class="card_title"><span class="num">02</span><h3>이천시장애인<br class="m_br">자립생활센터</h3></div>
                        <div class="card_menus">
                            <a href="#">사업안내</a><a href="#">사업소식</a><a href="#">포토갤러리</a><a href="#">신청하기</a>
                        </div>
                    </div>
                </div>
                <div class="card_item" onclick="expandCard(this)">
                    <div class="card_bg" style="background-image: url('<?php echo G5_THEME_URL; ?>/img/main_top_bg03.jpg');"></div>
                    <div class="card_inner_wrap">
                        <div class="card_title"><span class="num">03</span><h3>활동/근로<br class="m_br">지원서비스</h3></div>
                        <div class="card_menus">
                            <a href="#">활동지원</a><a href="#">근로지원</a><a href="#">교육일정</a><a href="#">교육신청</a>
                        </div>
                    </div>
                </div>
                <div class="card_item" onclick="expandCard(this)">
                    <div class="card_bg" style="background-image: url('<?php echo G5_THEME_URL; ?>/img/main_top_bg04.jpg');"></div>
                    <div class="card_inner_wrap">
                        <div class="card_title"><span class="num">04</span><h3>발달장애인<br class="m_br">지원서비스</h3></div>
                        <div class="card_menus">
                            <a href="#">돌봄/일상</a><a href="#">주간/방과후</a><a href="#">최중증</a><a href="#">다원학교</a>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <?php include_once(G5_THEME_PATH . '/tail.php'); ?>
</div>

<script>
function expandCard(el) {
    const items = document.querySelectorAll('.card_item');
    // 모바일에서 이미 열린 카드를 누르면 닫히지 않고 유지
    if(window.innerWidth <= 900 && el.classList.contains('active')) return;

    items.forEach(c => c.classList.remove('active'));
    el.classList.add('active');

    if(window.innerWidth <= 900) {
        setTimeout(() => {
            const yOffset = -20;
            const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;
            window.scrollTo({top: y, behavior: 'smooth'});
        }, 300); // 애니메이션 완료 후 스크롤 이동
    }
}
</script>

@charset "utf-8";

/* [1] 공통 초기화 - 스크롤 차단 요소 해제 */
html, body { 
    margin: 0; padding: 0; width: 100%; 
    height: auto !important; /* 고정 높이 해제 */
    min-height: 100% !important; 
    background: #fff !important; 
    font-family: 'Pretendard', sans-serif; 
    overflow-x: hidden !important; 
    overflow-y: auto !important; /* 세로 스크롤 강제 허용 */
    -webkit-overflow-scrolling: touch; 
}

/* 그누보드 기본 요소 숨김 */
#hd, #aside, #ft { display: none !important; }

#intro_site_wrapper { 
    display: block; width: 100%; 
    height: auto !important; 
    min-height: 100vh; 
    overflow: visible !important; /* 내용이 넘칠 때 보임 보장 */
}
.center_content { width: 100%; max-width: 1300px; margin: 0 auto; padding: 60px 20px; box-sizing: border-box; }

/* [2] 헤더 디자인 */
.intro_header { text-align: center; margin-bottom: 50px; }
.intro_logo img { height: 70px; margin-bottom: 20px; }
.msg_box { 
    display: inline-block; background: #f8f9fa; padding: 12px 25px; 
    border-radius: 50px; border: 1px solid #eee; color: #666; font-size: 15px; 
}

/* [3] 카드 디자인 (PC) */
.card_accordion { display: flex; gap: 15px; width: 100%; height: 550px; }
.card_item { 
    position: relative; flex: 1; border-radius: 30px; overflow: hidden; 
    cursor: pointer; transition: all 0.6s cubic-bezier(0.2, 1, 0.22, 1); 
}
.card_bg { position: absolute; top:0; left:0; width:100%; height:100%; background-size: cover; background-position: center; z-index: 1; }
.card_item::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:2; }

.card_inner_wrap { position: relative; z-index: 5; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }
.card_title .num { display: block; font-size: 16px; color: rgba(255,255,255,0.6); margin-bottom: 5px; font-weight: 600; }
.card_title h3 { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.4; white-space: normal; word-break: keep-all; }

.card_item.active { flex: 4; }
.card_item.active .card_title h3 { font-size: 32px; white-space: nowrap !important; }

/* 카드 내부 메뉴 */
.card_menus { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; max-width: 420px; margin-top: 30px; max-height: 0; opacity: 0; overflow: hidden; transition: 0.5s; }
.card_menus a { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); padding: 15px; color: #fff; text-decoration: none; border-radius: 12px; font-size: 15px; font-weight: 700; backdrop-filter: blur(4px); transition: 0.3s; }
.card_item.active .card_menus { max-height: 400px; opacity: 1; }

/* [4] 모바일 반응형 (스크롤 최적화) */
@media (max-width: 900px) {
    .center_content { padding: 40px 0; }
    .intro_main_card { padding: 0 15px !important; }
    .card_accordion { flex-direction: column; height: auto !important; gap: 12px; }
    
    .card_item { width: 100% !important; height: 110px !important; flex: none !important; border-radius: 20px; }
    .card_title h3 { font-size: 18px !important; white-space: nowrap !important; }
    .m_br { display: none !important; }

    .card_item.active { height: 500px !important; } /* 메뉴 노출을 위한 높이 확보 */
    .card_item.active .card_inner_wrap { justify-content: flex-start !important; padding-top: 80px !important; }
    .card_item.active .card_title h3 { font-size: 26px !important; margin-top: 10px; white-space: normal !important; }
}