/* 폰트 */
@font-face {
    font-family: 'NanumSquareRound';
    src: url('../fonts/nanum-square-round/NanumSquareRoundOTFB.otf') format('opentype'),
         url('../fonts/nanum-square-round/NanumSquareRoundB.ttf') format('truetype');
    font-weight: 500;    /* Bold */
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareRound';
    src: url('../fonts/nanum-square-round/NanumSquareRoundOTFEB.otf') format('opentype'),
         url('../fonts/nanum-square-round/NanumSquareRoundEB.ttf') format('truetype');
    font-weight: 700;    /* Extra Bold */
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareRound';
    src: url('../fonts/nanum-square-round/NanumSquareRoundOTFL.otf') format('opentype'),
         url('../fonts/nanum-square-round/NanumSquareRoundL.ttf') format('truetype');
    font-weight: 300;    /* Light */
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquareRound';
    src: url('../fonts/nanum-square-round/NanumSquareRoundOTFR.otf') format('opentype'),
         url('../fonts/nanum-square-round/NanumSquareRoundR.ttf') format('truetype');
    font-weight: 400;    /* Regular */
    font-style: normal;
}
@font-face { font-family: 'Noto Sans Kr'; src: url('../fonts/noto_sans_kr/NotoSansKR-Black.otf') format('truetype'); font-weight: 900; }
@font-face { font-family: 'Noto Sans Kr'; src: url('../fonts/noto_sans_kr/NotoSansKR-Bold.otf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'Noto Sans Kr'; src: url('../fonts/noto_sans_kr/NotoSansKR-Medium.otf') format('truetype'); font-weight: 600; }
@font-face { font-family: 'Noto Sans Kr'; src: url('../fonts/noto_sans_kr/NotoSansKR-Regular.otf') format('truetype'); font-weight: 500; }
@font-face { font-family: 'Noto Sans Kr'; src: url('../fonts/noto_sans_kr/NotoSansKR-Light.otf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'Noto Sans Kr'; src: url('../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;
    --nav-width: 200px;
}
/* 테블릿 이하 */
@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로 변경 */
    overflow: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overscroll-behavior: none;
    user-select: none;
    touch-action: manipulation;
    display: flex;
}
#nav {
    width: var(--nav-width);
    height: 100%;
}
main {
    flex-grow: 1;
}


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