.wrap {
    background-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.splash-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── 1. 로고 전체 fadeInUp ── */
.splash-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.splash-logo svg {
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.15));
}

/* ── 2. ✦ 스파크 반짝이기 ── */
.splash-logo #spark {
    animation: sparkle 1.2s infinite alternate;
}

@keyframes sparkle {
    from { opacity: 0.4; }
    to   { opacity: 1;   }
}

/* ── 3. 점선 흐르기 ── */
.splash-logo #dash-line {
    stroke-dasharray: 4, 3;
    animation: dash-flow 1.5s infinite linear;
}

@keyframes dash-flow {
    from { stroke-dashoffset: 7; }
    to   { stroke-dashoffset: 0; }
}

/* ── 5. COUZL letter-spacing 펼쳐지기 ── */
.splash-logo #couzl-text {
    animation: expand-letters 0.8s ease-out 0.8s both;
}

@keyframes expand-letters {
    from { letter-spacing: 0px; }
    to   { letter-spacing: 3px; }
}

.logo-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: 2px;
}

.logo-sub {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    letter-spacing: 4px;
}

/* 구분선 */
.logo-divider {
    width: 40px;
    height: 1px;
    background-color: var(--color-primary-dark);
    opacity: 0.3;
    margin: 2px 0;
}

/* ── 4. 로딩 점 바운스 ── */
.loading-dots {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    animation: bounce 0.6s infinite ease-in-out;
}

.loading-dots span:nth-child(1) { animation-delay: 0s;   }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-8px); }
}

/* 하단 고정 영역 */
.splash-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--max-width);
    text-align: center;
    padding: 24px 0;
}

.footer-tagline {
    font-size: 13px;
    letter-spacing: 1px;
    color: #444444;
    margin-bottom: 4px;
}

.footer-version {
    font-size: 12px;
    color: var(--color-text-sub);
}