/* 기본 배경 설정 */
body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 스크롤을 방지 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Arial', sans-serif;
}

/* 섹션 스타일 */
.section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0; /* 초기 상태는 보이지 않음 */
    visibility: hidden; /* 애니메이션 전까지 숨김 */
    width: 100%;
    max-width: 90vw; /* 모바일에서 섹션이 너무 넓어지지 않도록 */
    padding: 0 2vw;
}

/* 텍스트 래퍼 스타일 */
.text-wrapper {
    position: relative;
    overflow: visible; /* 글자 애니메이션을 위해 overflow 설정 */
}

/* 제목 스타일 */
.title {
    display: inline-block;
    font-weight: bold;
    color: #000;
    font-size: 3vw; /* 뷰포트 너비에 따라 크기 조절 */
    overflow: visible;
}

/* 소제목 스타일 */
.subtitle {
    display: inline-block;
    font-weight: normal;
    color: #333;
    font-size: 1.5vw;
    margin-top: 1rem;
}

/* 모바일, 태블릿, 데스크탑 반응형 폰트 크기 조정 */
@media (max-width: 1024px) { /* 태블릿 */
    .title {
        font-size: 5vw;
    }
    .subtitle {
        font-size: 2.5vw;
    }
}

@media (max-width: 768px) { /* 작은 태블릿 및 큰 스마트폰 */
    .title {
        font-size: 6vw;
    }
    .subtitle {
        font-size: 3vw;
    }
}

@media (max-width: 480px) { /* 모바일 */
    .title {
        font-size: 8vw;
    }
    .subtitle {
        font-size: 4vw;
    }
}

/* 글자 조각 애니메이션 */
.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(100px); /* 글자 조각이 아래에서 올라오도록 */
    font-size: inherit; /* 부모 요소의 폰트 크기에 따라 조정 */
}

/* input 요소 스타일 */
.input-wrapper {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

input[type="text"] {
    background-color: #fcfcfc;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    border: none; /* 모든 테두리 제거 */
    border-bottom: 2px solid #666; /* 아래쪽에만 2px 테두리 */
    border-radius: 0px;
    text-align: center;
    width: 80%;
    max-width: 300px;
    transition: all 0.3s ease;
}

input[type="text"]:focus {
    outline: none;
    /* border-color: #007bff; 포커스 시 파란색 테두리 */
    /* box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); */
    border-bottom-color: #000; /* 포커스 시 아래쪽 테두리를 검은색으로 */
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    input[type="text"] {
        font-size: 1.2rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 480px) {
    input[type="text"] {
        font-size: 1rem;
        padding: 0.3rem 0.6rem;
    }
}

/* input 조각들을 담는 컨테이너 */
.input-fragments {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* 조각들이 클릭을 방해하지 않도록 */
}

/* input 조각 */
.input-fragment {
    background-color: #fcfcfc;
    border: none; /* 모든 테두리 제거 */
    border-radius: 0px;
}