/* 모바일 안전 영역 (아이폰 하단 바 등 대응) */
.pb-safe { 
    padding-bottom: env(safe-area-inset-bottom); 
}

/* 스크롤바 숨김 처리 (Webkit 및 표준) */
.scrollbar-hide::-webkit-scrollbar { 
    display: none; 
}
.scrollbar-hide { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* 페이드 인 애니메이션 정의 */
.fade-in { 
    animation: fadeIn 0.2s ease-in-out; 
}

@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

/* 잠금 모달 자체의 스크롤을 강제로 막고 화면에 고정 */
#pin-modal-backdrop {
    height: 100vh;
    height: 100dvh; /* 최신 브라우저 대응 주소창 제외 높이 */
    overflow: hidden; /* 내부 요소가 넘쳐도 스크롤바 생성 방지 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

@media (min-width: 768px) {
    /* 1. 상단 메시지 영역의 flex-1을 해제하여 수직 중앙 정렬 유도 */
    #pin-modal-backdrop .flex-1 {
        flex: none !important;
        margin-top: auto; /* 위아래 여백을 자동으로 배분 */
    }

    /* 2. 하단 키패드 영역을 위로 끌어올려 중앙으로 밀착 */
    #pin-modal-backdrop .pb-safe {
        margin-bottom: auto; /* 하단 여백 자동 배분 */
        padding-top: 2rem;   /* 메시지와 키패드 사이의 적절한 간격 */
        padding-bottom: 0 !important;
    }

    /* 3. 키패드 버튼 크기 및 간격 미세 조정 (선택 사항) */
    #pin-modal-backdrop .grid {
        gap: 1.5rem !important; /* 버튼 사이 간격 최적화 */
    }
}


/* 잠금 모달이 떴을 때 배경(body) 스크롤바 제거 */
body:has(#pin-modal-backdrop:not(.hidden)) {
    overflow: hidden !important;
    height: 100vh;
}