/* 1. 기본 스타일 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'SCoreDream', sans-serif;
    background-color: #f0f0f0;
    color: #333;
    line-height: 1.5;
}

/* 2. 전체 레이아웃 구조 */
#wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #dcdcdc; 
}

/* 3. 상단 배경 및 콘텐츠 영역 */
.content-area {
    width: 100%;
    /* [수정] PC에서 계속 줄어들지 않도록 고정 높이 설정 */
    height: 850px; 
    min-width: 1200px; /* PC 콘텐츠 최소 너비 보장 */
    display: flex;
    flex-direction: column;
    background-image: url('../images/bg.png');
    background-repeat: no-repeat;
    background-position: center top;
    /* [수정] 배경이 찌그러지지 않게 cover 또는 고정 크기 사용 */
    background-size: cover; 
}

/* PC 점프 메뉴 */
#header {
    width: 100%;
    padding: 20px 0;
}
.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
}


.visitor-counter {
    margin-right: 20px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    background-color: #e0e5ff;
    padding: 5px 15px;
    border-radius: 20px;
    mix-blend-mode: multiply;
}

.visitor-counter .today {
    margin-right: 5px;
    color: #3944d8;
    font-weight: 700;
}

.visitor-counter .divider {
    margin-right: 5px;
    margin-left: 5px;
    color: #999;
}

.visitor-counter .total {
    margin-left: 5px;
}



.jump-menu {
    padding: 8px 12px;
    font-family: 'SCoreDream', sans-serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.main-content-empty {
    flex: 1;
}

/* 4. 버튼 영역 */
.footer-buttons-container {
    display: flex;
    justify-content: center;
    gap: 0; 
    margin-bottom: 90px;
    width: 100%;
}

.button-link {
    display: block;
    width: 336px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.2s;
}

.btn-1 { background-image: url('../images/btn_1.png'); }
.btn-2 { background-image: url('../images/btn_2.png'); }
.btn-1:hover { background-image: url('../images/btn_1_ov.png'); }
.btn-2:hover { background-image: url('../images/btn_2_ov.png'); }

/* 5. 푸터 영역 */
#footer {
    background-color: #dcdcdc;
    padding: 40px 20px;
    width: 100%;
    margin-top: -1px; 
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 6. 모바일 반응형 스타일 (768px 이하) */
@media (max-width: 768px) {
    #header {
        display: none;
    }

    .content-area {
        /* [수정] 모바일에서는 다시 가변적인 높이(또는 모바일용 고정높이)로 변경 */
        height: auto; 
        min-width: 100%;
        aspect-ratio: 768 / 1100; 
        background-image: url('../images/bg_m.png');
        background-size: 100% 100%;
    }

    .footer-buttons-container {
        flex-direction: column;
        align-items: center;
        gap: 15px; 
        margin-bottom: 10px; 
    }
    
    .button-link {
        width: 302.4px; 
        height: 108px;
        max-width: 90vw; 
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 25px;
    }

    .footer-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-logo {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .footer-right {
        justify-content: flex-start;
        width: 100%;
    }
}


/* 모바일용 카운터 위치 */
.mobile-visitor-holder {
    display: none;
}

@media (max-width: 768px) {
    .visitor-counter {
         display: inline-flex;      
        width: auto;            
        padding: 4px 10px;        
        border-radius: 20px;        
        background-color: #e0e5ff; 
        font-size: 13px;
        margin-top: 15px;
    }

    .mobile-visitor-holder {
        display: block;
    }
}