/* 폰트 */
@font-face {
    font-family: 'NanumSquareRound';
    src: url('../assets/fonts/nanum-square-round/NanumSquareRoundOTFB.otf') format('opentype'),
         url('../assets/fonts/nanum-square-round/NanumSquareRoundB.ttf') format('truetype');
    font-weight: 500;    /* Bold */
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareRound';
    src: url('../assets/fonts/nanum-square-round/NanumSquareRoundOTFEB.otf') format('opentype'),
         url('../assets/fonts/nanum-square-round/NanumSquareRoundEB.ttf') format('truetype');
    font-weight: 700;    /* Extra Bold */
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareRound';
    src: url('../assets/fonts/nanum-square-round/NanumSquareRoundOTFL.otf') format('opentype'),
         url('../assets/fonts/nanum-square-round/NanumSquareRoundL.ttf') format('truetype');
    font-weight: 300;    /* Light */
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareRound';
    src: url('../assets/fonts/nanum-square-round/NanumSquareRoundOTFR.otf') format('opentype'),
         url('../assets/fonts/nanum-square-round/NanumSquareRoundR.ttf') format('truetype');
    font-weight: 400;    /* Regular */
    font-style: normal;
}
@font-face { font-family: 'Noto Sans Kr'; src: url('../assets/fonts/noto_sans_kr/NotoSansKR-Black.otf') format('truetype'); font-weight: 900; }
@font-face { font-family: 'Noto Sans Kr'; src: url('../assets/fonts/noto_sans_kr/NotoSansKR-Bold.otf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Noto Sans Kr'; src: url('../assets/fonts/noto_sans_kr/NotoSansKR-Medium.otf') format('truetype'); font-weight: 600; }
@font-face { font-family: 'Noto Sans Kr'; src: url('../assets/fonts/noto_sans_kr/NotoSansKR-Regular.otf') format('truetype'); font-weight: 500; }
@font-face { font-family: 'Noto Sans Kr'; src: url('../assets/fonts/noto_sans_kr/NotoSansKR-Light.otf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Noto Sans Kr'; src: url('../assets/fonts/noto_sans_kr/NotoSansKR-Thin.otf') format('truetype'); font-weight: 200; }

/* 변수 */
:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --full-height: 100vh;

    --mobile: 375px;
    --tablet: 768px;
    --desktop: 1024px;
    --laptop: 1366px;
    --fullhd: 1920px;
    --qhd: 2560px;
}

/* 테블릿 이하 */
@media (max-width: 768px) {}
/* 테블릿 초과 */
@media (min-width: 769px) {}

* {
    font-family: 'NanumSquareRound', 'Noto Sans Kr', 'Sans-serif';
}
html {
    font-size:16px; /*1rem*/
    background-color:#ffffff!important;
    width:100vw;
    height:var(--full-height); /* 스크립트에서 동적으로 PWA가 아닌 경우 svh로 변경 */
    overflow: hidden;
    padding: 0;
    overscroll-behavior: none;
    touch-action: manipulation;
}
body {
    font-size:16px; /*1rem*/
    background-color:transparent!important;
    width:100vw;
    height:var(--full-height); /* 스크립트에서 동적으로 PWA가 아닌 경우 svh로 변경 */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    user-select:none;
    touch-action: manipulation;
}
body::-webkit-scrollbar { display: none; }
.mainWrapper { display: flex; height: 100%; }

/*==========================================================================
// Alpine js
===========================================================================*/
[x-cloak] { display: none !important; }


/*==========================================================================
// 헬퍼
===========================================================================*/
.allow-drag { user-select: text; -webkit-user-select: text; }


/*==========================================================================
// 커스텀
===========================================================================*/
.pwa-install-noti {
    position: fixed;
    display: none;
    transform: translateY(30px);
    opacity:0;
    padding:16px 20px;
    width: calc(100% - 24px);
    bottom: calc(var(--sab) + 12px);
    left: 12px;
    justify-content: space-between;
    align-items: center;
    background-color: #c8eef8;
    border-radius: 24px;
    box-shadow: 0 2px 8px #ebebeb;
    transition: 0.5s;
    z-index: 9999;
}