* { font-family: 'Pretendard'; font-weight: 400; box-sizing: border-box; }
html { scroll-behavior: smooth;}
body { background-color: #f6f6f6; }
body.model_mode { overflow: hidden; }
html, body { margin: 0; }





#pageContainer { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 420px; background-color: white; padding: 60px 0 80px; }
#pageContainer .pageRoot { width: 100%; height: 100%; position: relative; overflow-y: auto; }



/* 
//  Header, Footer
*/
#header { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; max-width: 420px; height: 60px; padding: 10px 30px; display: flex; flex-direction: row; gap: 5px; background-color: white; z-index: 5;} 
#header .leftNav { width: 60px; }
#header .leftNav .imgLogo { width: 36px; }
#header .middleNav { flex-grow: 1; }
#header .rightNav { width: 60px; }

#footer { position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 420px; height: 80px; padding: 12px 6px; display: flex; flex-direction: row; justify-content: space-between; gap: 5px; background-color: white; z-index: 5;} 
#footer .navItem { width: 19%; }
#footer .navItem .navImg { width: 100%; max-width: 100%; }
#footer .navItem .navImgHome.on { content: url(/static/weportswebapp/imgs/layout/icon_home_on.png); }
#footer .navItem .navImgFairy.on { content: url(/static/weportswebapp/imgs/layout/icon_fairy_on.png); }
#footer .navItem .navImgFeeds.on { content: url(/static/weportswebapp/imgs/layout/icon_feeds_on.png); }
#footer .navItem .navImgSpace.on { content: url(/static/weportswebapp/imgs/layout/icon_space_on.png); }
#footer .navItem .navImgMypage.on { content: url(/static/weportswebapp/imgs/layout/icon_mypage_on.png); }
/* #footer .leftNav .imgLogo { width: 36px; }
#footer .middleNav { flex-grow: 1; }
#footer .rightNav { width: 60px; } */



/* 
//  모달
*/
.modal { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 10; }
.modal.on { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.modal .modalBody { display: flex; flex-direction: column;  background-color: white; height :200px; width: 90%; padding: 15px; border-radius: 15px; max-width: 420px; }