/* =========================================================================
   base_mobile.css - 모바일 공통 기본 스타일 및 재사용 요소
   ========================================================================= */

/* --- 기본 설정 및 초기화 --- */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    color: white;
    overflow-x: hidden; /* 가로 스크롤 방지 */
    min-width: 320px;
}

/* 폰트 두께 클래스 (HTML에서 weight 설정 시 사용) */
.weight-300 { font-weight: 300 !important; }
.weight-600 { font-weight: 600 !important; }

/* --- 공통 레이아웃 & 헤더 스타일 --- */
.main-wrapper {
    width: 100%;
    padding: 0;
}

.top-header {
    height: auto;
    padding: 15px 15px;
    position: relative;
    /* 💡 이 부분을 수정하여 '이용방법 안내' 버튼만 우측에 남기도록 함 */
    /* display: flex;
    justify-content: space-between; 
    align-items: center; */
    
    /* 💡 대체 스타일: 버튼을 우측에 띄우고 로고 영역은 비워둠 */
    display: block; /* 블록으로 변경 */
    text-align: right; /* 버튼을 우측으로 정렬 */
    
    background-color: transparent; 
    box-shadow: none;
}
/* 로고 영역은 비워두어 공간을 차지하지 않게 합니다. */
.top-header .logo-area {
    display: none; 
}
/* 이용방법 안내 버튼 (헤더 내 우측) */
.guide-button {
    position: static; 
    transform: none;
    padding: 8px 12px;
    font-size: 13px;
    background-color: #38761D; 
    color: white;
    border-radius: 5px;
    text-decoration: none;
}

/* --- 모바일 메인 콘텐츠 컨테이너 --- */
.content-container.mobile-content {
    display: block; 
    width: 100%;
    padding: 0; 
}

/* base_mobile.css 파일 하단에 추가 */

/* --- 애니메이션 정의 --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}