/* css/intro.css - 이미지 1번 스타일 복구 버전 */




/* 2. 전체 배경 (이미지 1번처럼 순백색) */
#intro-css {
    width: 100%;
    height: 100vh;
    background-color: #ffffff; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    gap: 80px;
}


/* 상단 영문: 폰트 없이 크기만 확장 */
.en-luxury-text {
    font-size: 43px; /* 1번보다 확실히 커진 느낌 */
    margin-bottom: 15px;
}
/* 하단 국문: 비율 맞춰서 확장 */
.ko-luxury-text {
    font-size: 20px;
    margin: 0;
}

/* 4. 버튼 스타일 (1번의 정갈한 박스) */
#start-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    
    padding: 18px 90px; /* 가로로 시원하게 뻗은 버튼 */
    background-color: #ffffff;
    color: #000000;
    
    border: 2px solid #ffffff; /* 깔끔하고 굵은 테두리 */
    cursor: pointer;
    transition: all 0.2s ease;
    
}


/* 버튼 내 영어 */
.btn-en {
    font-size: 24px;
    opacity: 0.7;
}

/* 버튼 내 한국어 */
.btn-ko {
    font-size: 15px;
    opacity: 0.7;
}




/* css/intro.css - 제자리에서 스르륵 나타나는 페이드 인 버전 */

/* 1. 페이드 인 애니메이션 정의 (투명도만 조절) */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 2. 전체 배경 설정 */
#intro-css {
    width: 100%;
    height: 100vh;
    background-color: #ffffff; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

/* 3. 문구 구역 (첫 번째로 등장) */
.intro-message-container {
    margin-bottom: 80px;
    opacity: 0; /* 시작은 투명하게 */
    animation: fadeIn 2s ease forwards; /* 2초 동안 천천히 등장 */
}

.en-luxury-text {
    font-size: 43px;
    margin-bottom: 15px;
}

.ko-luxury-text {
    font-size: 20px;
    margin: 0;
}

/* 4. 버튼 스타일 (두 번째로 등장) */
#start-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    
    padding: 18px 90px;
    background-color: #ffffff;
    color: #000000;
    
    /* 1번 이미지의 정갈한 검정 테두리 유지 */

    cursor: pointer;
    transition: all 0.2s ease;

    /* 애니메이션 설정 */
    opacity: 0; /* 시작은 투명하게 */
    animation: fadeIn 1.5s ease forwards;
    animation-delay: 1.3s; /* 🚩 1초 뒤에 등장 시작 */
}

.btn-en {
    font-size: 24px;
    opacity: 0.7;
}

.btn-ko {
    font-size: 15px;
    opacity: 0.7;
}

/* css/intro.css - 하단 로고 추가 버전 */

/* ... 기존 애니메이션 및 #intro-css 설정 유지 ... */

/* 🚩 하단 로고 스타일 */
.bottom-logo {
    position: absolute; /* 부모인 #intro-css를 기준으로 위치 고정 */
    bottom: 40px;       /* 바닥에서 40px 띄움 */
    
    opacity: 0;
    animation: fadeIn 2s ease forwards;
    animation-delay: 4s; /* 문구와 버튼이 다 나온 뒤 마지막에 등장 */
}

.bottom-logo img {
    width: 60px;        /* 로고 크기 (원하는 대로 조절) */
    height: auto;
    
       
}



/* [충전식 버튼 스타일] */
#start-btn {
    position: relative;
    overflow: hidden; /* 배경이 삐져나오지 않게 */
    z-index: 1;
    background-color: white !important;
    transition: color 0.3s;
}

/* 🚩 충전을 담당하는 가상 요소 */
#start-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* 처음엔 0 */
    height: 100%;
    background-color: #000000  ; 
    z-index: -1;
    transition: none; /* 평소엔 애니메이션 없음 */
}

/* 🚩 꾹 누르고 있을 때 (charging 클래스가 붙을 때) */
#start-btn.charging::after {
    width: 100%;
    transition: width 3s linear; /* 초 동안 일정하게 차오름 */
}

/* 🚩 충전 중일 때 글자색 반전 */
#start-btn.charging {
    color: rgb(255, 255, 255) !important;
}