:root {
    --float-anim: floating 3s ease-in-out infinite;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}

.main-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.app-wrapper {
    position: relative;
    /* 1024 x 1900 비율 유지 */
    width: 100%;
    max-width: 540px; /* 데스크탑 최대 넓이 제한 (조정 가능) */
    height: 100%;
    aspect-ratio: 1024 / 1900;
    background-color: #111;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 화면 크기에 따라 높이나 너비를 유동적으로 조절하여 비율 유지 */
@media (min-aspect-ratio: 1024/1900) {
    .app-wrapper {
        width: auto;
        height: 100vh;
    }
}

@media (max-aspect-ratio: 1024/1900) {
    .app-wrapper {
        width: 100vw;
        height: auto;
    }
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* 넘치면 잘리도록 설정 */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 108%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    box-sizing: border-box;
    padding-bottom: 60%;
}

.floating-link {
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
    z-index: 10;
    display: block;
    width: 24%; /* 비율에 맞춰 너비 설정 */
}

.floating-link img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0px 2px 2px rgba(255, 255, 255, 0.9));
    /* filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); */
}

.left-link {
    animation: var(--float-anim);
}

.right-link {
    animation: var(--float-anim);
}

.floating-link:hover {
    transform: scale(1.1);
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* 모바일 모드 최적화 */
@media (max-width: 540px) {
    .app-wrapper {
        max-width: 100vw;
    }
}

.main-image-link {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 5;
    cursor: pointer;
    background-color: transparent;
    display: block;
}