/* 인트로 전체 컨테이너 */
.intro-container {
    position: absolute; /* iOS 스크롤 호환성 확보 */
    top: 0; left: 0;
    width: 100%;
    min-height: 100vh; 
    min-height: 100dvh; 
    background: radial-gradient(circle at center, #FFFFFF 0%, #9DDCE1 70%, #9DDCE1 100%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
}

/* 상단 섹션 (헤더 + 모래시계 오버랩) */
.intro-header-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.top-banner-wrapper {
    position: relative;
    width: 100%;
    height: clamp(0px, 34.93vw, 150.6px); 
    display: flex;
    align-items: flex-start;
}

.banner-left {
    width: clamp(0px, 26.67vw, 115px); 
    height: clamp(0px, 34.93vw, 150.6px);
    background-image: url('../images/intro_header_left.svg');
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}
.banner-center {
    flex: 1;
    height: clamp(0px, 22.67vw, 97.7px);
    background-color: #00A7DF;
    margin-left: -1px;
}
.banner-right {
    width: clamp(0px, 26.67vw, 115px);
    height: clamp(0px, 22.67vw, 97.7px);
    background-image: url('../images/intro_header_right.svg');
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
    margin-left: -1px;
}

/* 텍스트 레이어 */
.intro-title-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: clamp(0px, 22.67vw, 97.7px); 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    pointer-events: none;
}
.intro-title {
    font-family: 'NanumGothic', sans-serif !important;
    font-size: clamp(30px, 9.33vw, 40.25px) !important;
    color: #FFFFFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    margin-top: -0.5vw; 
}

/* 모래시계 이미지 */
.sandglass-img {
    width: clamp(180px, 60.27vw, 240px);
    height: auto;
    margin-top: clamp(-90.5px, -21vw, -78.7px);
    margin-right: clamp(-129.3px, -30vw, -112.5px);
    z-index: 20; 
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
    flex-shrink: 0; 
}

/* 중앙 영역 */
.intro-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-top: clamp(-43.1px, -8vw, -30px);
    flex-shrink: 0;
}

.intro-text {
    text-align: center;
    font-family: 'NanumSquareRound', sans-serif !important;
    font-size: var(--fs-30) !important;
    line-height: 1.45;
    color: #000000;
}

.intro-text .text-reg { font-weight: 400 !important; }
.intro-text .text-eb { font-weight: 800 !important; }
.intro-text .color-red { color: #F00000 !important; }
.intro-text .color-purple { color: #7F05BC !important; }
.intro-text p:first-child { margin-bottom: 2vw; }

/* 하단 영역 (입력창 + 버튼) */
.intro-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 40px; 
    gap: 68px; /*16vw;*/
    flex-shrink: 0;
}

.name-input {
    width: 291px !important;
    height: 79px !important;
    flex-shrink: 0;
    border-radius: 40px; 
    border: none;
    background: white;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    text-align: center;
    font-family: 'NanumSquareRound', sans-serif !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    color: #333;
    outline: none;
    font-size: 16px; 
}

.name-input:focus::placeholder { opacity: 0 !important; }
.name-input:focus::-webkit-input-placeholder { opacity: 0 !important; }
.name-input:focus:-ms-input-placeholder { opacity: 0 !important; }

/* 입력 텍스트 크기 30px */
@media screen and (min-width: 0px) {
    .name-input { font-size: 30px !important; }
}

.name-input::placeholder {
    font-family: 'NanumSquareRound', sans-serif !important;
    font-weight: 400 !important;
    font-size: 30px !important;
    color: #9d9d9d !important;
    opacity: 1;
}

.grade-selection {
    display: flex;
    gap: clamp(15px, 5.87vw, 25.3px) !important;
}

/* 학년군 버튼 */
.btn-grade {
    width: clamp(80px, 25.33vw, 109.25px) !important;
    height: clamp(80px, 25.33vw, 109.25px) !important;
    border-radius: 20px;
    border: 4px solid;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    transition: transform 0.1s ease;
    flex-shrink: 0;
}

.btn-grade .grade-num {
    font-family: 'NanumSquareRound', sans-serif !important;
    font-weight: 800 !important;
    font-size: var(--fs-40) !important;
    margin-bottom: -6px;
}

.btn-grade .grade-text {
    font-family: 'NanumSquareRound', sans-serif !important;
    font-weight: 800 !important;
    font-size: var(--fs-28) !important;
    margin-top: 2px;
}

.btn-grade.g12 { background-color: #EEFBD8; color: #FF6A0E; border-color: #97D4D9;}
.btn-grade.g34 { background-color: #E3F3FB; color: #159FE5; border-color: #97D4D9;}
.btn-grade.g56 { background-color: #FBE4FF; color: #9B57FA; border-color: #97D4D9;}

.btn-grade:active { transform: scale(0.95); }

.intro-title .text-bold { font-weight: 700 !important; }
.intro-title .text-extrabold { font-weight: 800 !important; }
.intro-title .highlight { color: #EDFD5D !important; }
.hidden { display: none !important; }

/* 알럿 영역 */
.alert-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    touch-action: none;
}

.alert-box {
    width: 280px;
    background: white;
    border-radius: 25px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.alert-message {
    font-family: 'NanumSquareRound', sans-serif !important;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    margin-bottom: 20px;
}

.btn-alert-close {
    width: 100%;
    height: 50px;
    background: #6181FC;
    color: white;
    border: none;
    border-radius: 15px;
    font-family: 'NanumSquareRound', sans-serif !important;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
}

@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}