/* Minial CSS to support Tailwind build and animations */

/* ── 모바일 강제 레이아웃 (PC에서도 모바일 너비로) ── */
html {
    background: #0F0F10;
}
body {
    max-width: 430px !important;
    min-height: calc(var(--app-vh, 1vh) * 100);
    min-height: 100svh;
    min-height: 100dvh;
    margin: 0 auto !important;
    position: relative;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.8);
}

/* fixed 요소를 모바일 컬럼 안에 고정하는 유틸리티 */
/* 사용법: class="fixed-mobile fixed z-50 ..." (left/right 클래스 제거) */
.fixed-mobile {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 430px !important;
    max-width: 100vw !important;
}

/* Animations that are hard to do with standard Tailwind classes alone */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Custom Scrollbar for the options list */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* word-keep-all 유틸 */
.word-keep-all {
    word-break: keep-all;
}

/* Mobile performance mode: reduce expensive blur/backdrop effects on low-power devices */
@media (max-width: 480px), (pointer: coarse) {
    body {
        box-shadow: none !important;
    }

    .ios-blur,
    .blur-overlay {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(15, 15, 16, 0.9) !important;
    }

    .premium-glow {
        box-shadow: 0 0 16px rgba(238, 43, 157, 0.18) !important;
    }

    [class*="blur-"] {
        filter: none !important;
    }
}

/* iOS Safari-specific fallback to reduce jank and viewport glitches */
.ios-safari body {
    min-height: calc(var(--app-vh, 1vh) * 100) !important;
}

.ios-safari .fixed-mobile {
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    width: min(430px, 100vw) !important;
}

.ios-safari .ios-blur,
.ios-safari .blur-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(15, 15, 16, 0.9) !important;
}

.ios-safari .premium-glow {
    box-shadow: 0 0 12px rgba(238, 43, 157, 0.16) !important;
}