@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    font-family: 'Pretendard', sans-serif;
    background-color: #f8fafc;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: -0.02em;
}

.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.3s ease-out; }


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



.quiz-item { transition: all 0.2s ease; }
.quiz-item:has(input:checked) {
    background-color: #eef2ff !important;
    border-color: #6366f1 !important;
}
.quiz-item input:checked + div span:first-child {
    color: #4f46e5 !important;
}

/* 아이폰 입력창 최적화 */
input, textarea {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    font-size: 16px !important;
}

/* 버튼 클릭 효과 */
.btn-effect { transition: transform 0.1s; }
.btn-effect:active { transform: scale(0.9); }

#scrPlay.active { display: flex !important; flex-direction: column; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 100; background: #ffffff; padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0)); }
#scrLogin.active { display: flex !important; flex-direction: column; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 200; background: #f8fafc; }

/* 하단 네비게이션: 뷰포트에 진정으로 고정 */
#bottomNav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 9999 !important;
}

/* mainContainer 내 모든 스크롤 섹션에 하단 여유 공간 추가 */
#scrHome,
#scrCreate,
#scrDetail,
#scrQuizSetup {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0)) !important;
}