/* styles.css */  
/* 타이핑 컨테이너 스타일 */  
.typing-container {  
    display: flex;  
    flex-direction: column;  
    gap: 10px;  
}  

/* 기존 스타일 수정 */  
.home-container {  
    width: 100%;  
    height: 100vh;  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    align-items: center;  
    position: relative;  
    margin-top: -50px;  
}  

.content-wrapper {  
    display: flex;  
    align-items: center;  
    justify-content: flex-start;  
    gap: 50px;  
    width: 1200px; /* 수정: 900px에서 1200px로 증가 */  
    margin: 0 auto;  
    position: relative;  
    left: -100px;  
}  

.profile-image {  
    width: 300px; /* 수정: 200px에서 300px로 증가 */  
    height: 300px; /* 수정: 200px에서 300px로 증가 */  
    border-radius: 50%;  
    overflow: hidden;  
    flex-shrink: 0;  
    margin-left: 200px;  
}  

.profile-image img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  

.text-content {  
    flex-grow: 0;  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    width: 1000px; /* 텍스트 영역 너비 증가 */ 
    margin-top: 100px; 
}  

.typing-text {  
    font-size: 4rem;  
    color: #000000;  
    min-height: 2.5em;  
    white-space: nowrap; /* pre-line에서 nowrap으로 변경 - 강제 줄바꿈 방지 */  
    position: relative;  
    margin-bottom: 0.5em;  
    line-height: 1.2; /* 1.5에서 1.2로 줄간격 축소 */  
    overflow: visible; /* 추가: 텍스트 오버플로우 허용 */  
    font-family: 'Jua', sans-serif;
}  

.typing-text:empty::before {  
    content: "\200b";  
}  

.typing-text .txt {  
    border-right: 0.2rem solid #000000;  
    animation: blink 0.7s infinite;  
}  

@keyframes blink {  
    0% { border-right-color: rgba(0,0,0,0.75); }  
    100% { border-right-color: transparent; }  
}  

/* More 버튼 스타일 수정 */  
.more-btn-container {  
    position: absolute;  
    bottom: 20%;  
    left: 0;  
    right: 0;  
    display: flex;  
    justify-content: center;  
}  

.more-btn {  
    padding: 12px 30px;  
    background-color: #8388c7;  
    color: white;  
    border: none;  
    border-radius: 25px;  
    font-size: 1.2rem;  
    cursor: pointer;  
    transition: all 0.3s ease;  
}  

.more-btn:hover {  
    background-color: #6c70a9;  
    transform: translateY(-2px);  
}  

/* 반응형 디자인 */  
@media (max-width: 768px) {  
    .home-container {  
        margin-top: 0;  
    }  

    .content-wrapper {  
        flex-direction: column;  
        text-align: center;  
        gap: 30px;  
        padding: 0 20px;  
        width: 90%;  
        left: 0;  
    }  

    .text-content {  
        align-items: center;  
        width: 100%;  
    }  

    .typing-text {  
        font-size: 1.5rem;  
        text-align: center;  
    }  

    .profile-image {  
        width: 150px;  
        height: 150px;  
        margin-left: 0;  
    }  

    .more-btn-container {  
        bottom: 15%;  
    }  
}