/* 기본 PC/가로모드 스타일 */
html {
    overscroll-behavior: none; /* 바운스 효과 방지 */
}
.appContainer {
    width: 100%;
    overscroll-behavior: none; /* 바운스 효과 방지 */
}

/* 모든 엘리먼트에 대해 스크롤바 숨기기 */
* {
-ms-overflow-style: none;  /* IE 및 Edge */
scrollbar-width: none;     /* Firefox */
overscroll-behavior: none; /* 모든 요소에 바운스 효과 방지 */
}

*::-webkit-scrollbar {
display: none;             /* Chrome, Safari, Opera */
}
html,
body {
overscroll-behavior: none; /* 바운스 효과 방지 */
font-size: calc(100vw / 390 * 16);
}

.mainScreen_css {
    height:100%;
    overflow:scroll;
    display: block;
    overscroll-behavior: none; /* 바운스 효과 방지 */
}
.subScreen_css {
    height:100%;
    overflow:scroll;
    display: none;
    overscroll-behavior: none; /* 바운스 효과 방지 */
}

a,
button,
input,
select,
h1,
h2,
h3,
h4,
h5,
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    background: none;

    -webkit-font-smoothing: antialiased;
}

menu, ol, ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Bottom Sheet Styles */
.bottom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.bottom-overlay.visible {
    display: block;
    opacity: 1;
}

.bottom-sheet {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    max-height: 100vh;
    background-color: transparent;
    z-index: 101;
    transition: bottom 0.3s ease-in-out;
    overflow: hidden;
    border-radius: 0.75rem 0.75rem 0 0;
}

.bottom-sheet.visible {
    bottom: 0;
}

#bottomSheetContent {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: none; /* 바운스 효과 방지 */
}

/* Page Loader Styles */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.page-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}