@charset "utf-8";

/*** 공용 시작 ***/
body {
    display: flex;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    flex-direction: column;
    font-size: 16px;
    font-weight: 500;
}
/*** 공용 종료 ***/

/*** 상단 시작 ***/
.navbar-fixed {
    height: 56px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
}
.navbar-fixed nav {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.navbar-fixed,
.navbar-fixed .nav-extended {
    background: transparent !important;
    box-shadow: none !important;
}
.navbar-fixed .nav-wrapper {
    position: relative;
    z-index: 2;
    background-color: #F4F5F7;
}
.navbar-fixed .nav-content {
    background: #F4F5F7;           /* 필요 색상으로 */
    transition: transform .24s ease, opacity .24s ease;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.navbar-fixed .nav-content.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
}
nav {
    width: 100%;
    height: 100%;
    background-color: #F4F5F7 !important;
    color: #2B2D2F !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
}
nav .brand-logo {
    left: 16px !important;
    -webkit-transform: translateX(0%) !important;
    transform: translateX(0%) !important;
}
nav .nav-content ul a {
    padding: 0 !important;
}
nav i,
nav [class^="mdi-"],
nav [class*="mdi-"],
nav i.material-icons {
    height: 100% !important;
    font-size: 22px !important;
}
/*** 상단 종료 ***/

/*** 컨텐츠 시작 ***/
main {
    flex: 1 0 auto;
}
/*** 컨텐츠 종료 ***/

/*** 하단 시작 ***/
.footer-fixed footer {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.footer-fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #ffffff !important;
    z-index: 1;
    padding-bottom: env(safe-area-inset-bottom)
}
footer {
    width: 100%;
    height: 100%;
    background-color: #ffffff !important;
    color: #2B2D2F !important;
    -webkit-box-shadow: 0 0 1px 0 rgba(0,0,0,0.1), 0 1px 1px 1px rgba(0,0,0,0.3), 0 1px 1px 0 rgba(0,0,0,0.1) !important;
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.1), 0 1px 1px 1px rgba(0,0,0,0.3), 0 1px 1px 0 rgba(0,0,0,0.1) !important;
}
footer .container {
    width: 100% !important;
}
footer i,
footer [class^="mdi-"],
footer [class*="mdi-"],
footer i.material-icons {
    height: 100% !important;
    font-size: 22px !important;
}

.material-symbols-outlined.on {
    color: #000000;
    font-variation-settings:
            'FILL' 1,
            'wght' 400,
            'GRAD' 0,
            'opsz' 40
}
.material-symbols-outlined.off {
    color: #000000;
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 40
}
/*** 하단 종료 ***/

/*** Modal 시작 ***/
.material-alert {
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.material-alert-button {
    background: #0046FF !important;
}
/*** Modal 종료 ***/