/* ------------------------------------------------ */
/* ------------------- 공통 CSS ------------------- */
/* ------------------------------------------------ */



@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



:root {
    --primary-color: #3F92FF;
    --primary-color-light: #DBEBFF;
    --text-color-primary: #222222;
    --text-color-secondary: #777777;
    --text-color-light: #999999;
    --background-color: #F9F9F9;
    --white-color: #FFFFFF;
    --card-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    --border-color: #DDDDDD;
    --inactive-color: #BBBBBB;
    --progress-bg-color: #EEEEEE;
}




html {overflow-y:scroll; overflow-x:hidden; font-size: 62.5%; scroll-behavior: smooth; }

body{
    font-weight: 500;
	color:#222222;
    width:100%;
    /* font-family: 'SUIT Variable', sans-serif !important;*/
    font-family: 'pretendard Variable';
    /* font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; */
    /* letter-spacing:-.02em; */
	line-height: 1.5;
    font-size:1.6rem;
}


body{
    -ms-overflow-style: none;
    }
    
::-webkit-scrollbar {
    display: none;
}




body {
    margin: 0;
    padding: 0;
    background-color: #e9e9e9;
}




/* 공통 디자인 */

.app-container {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


main {
    padding: 90px 0 110px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap:30px;
}

.bd20 {
    padding-left:20px;
    padding-right:20px;
}


.main {
    max-width:768px;
}

.bg-gray {
    background:var(--background-color);
}


.card { background: #fff;}


.box-design,.card  {width:100%;padding: 16px 20px; box-shadow: var(--card-shadow);border-radius: 10px;}



.page-nav {display: flex; align-items: center; gap: 20px; justify-content: center;}
.page-nav ul {display: flex; align-items: center; gap: 10px;}
.page-nav ul li {display:flex;align-items: center;justify-content: center;border: none; color: #bbb; font-size: 16px; cursor: pointer; width:30px;height:30px;}
.page-nav ul li.page-on {color:#222; position: relative; font-weight: 700;}
.page-nav ul li.page-on::before {content: ""; display: block; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color:var(--main-color);}
.page-nav .page-btn {width:30px; height:30px;display:flex;align-items: center;justify-content: center;}
.page-nav .page-btn i {font-size: 16px; display: block; color: #aaa;}
.page-nav .page-btn.btn-on i {cursor: pointer; color: #333;}




@media all and (min-width: 768px) and (max-width: 1023px) {
    /** Tablet  */

    .main {
        max-width:100%;
    }

    



}