:root {
    --WindowFull : 99vw;
    --TopHeight: 160px;
    --FooterHeight: 160px;
    --ContentVerticalMargin: 5px;
    --DEFAULT_LAYER_BACK : #2e2e2eBB
    /*background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='45' height='51.96' patternTransform='scale(2) rotate(20)'><rect x='0' y='0' width='100%' height='100%' fill='%23202025ff'/><path d='M52.48 44.47a15 15 0 01-14.96 0 15 15 0 00-7.48 12.96M7.48 44.42a15 15 0 01-14.96 0M15 57.44c0-5.35-2.9-10.35-7.52-13.02a15 15 0 017.48-12.97M7.48 18.5a14.97 14.97 0 01-14.98-.03m15.02-.03A15 15 0 0115 5.47a15 15 0 00-4.4-10.62m23.8.05A15 15 0 0030 5.53a15 15 0 017.48 12.96 14.9 14.9 0 0015.02-.03m-22.5 13a15.13 15.13 0 017.52 13.01m-7.56-39a15 15 0 01-14.96 0M7.48 18.5a15 15 0 017.48 12.96 15 15 0 0015.04 0 15 15 0 017.48-12.96'  stroke-width='3' stroke='%23ec914b8f' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-38,-21.84)' fill='url(%23a)'/></svg>")*/
}

html {
    /*background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='46.5' height='46.5' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='%23000000ff'/><path d='M27.31-2.917a5 5 0 010 5.834m-8.12 0a5 5 0 010-5.834m-4.827 7.501a10 10 0 010-9.169m17.774.001a10 10 0 010 9.169M10.181 7.36a15 15 0 01-.001-14.722m26.14 0a15 15 0 010 14.724m-9.01 36.22a5 5 0 010 5.835m-8.12 0a5 5 0 010-5.834m-4.827 7.501a10 10 0 010-9.169m17.774.001a10 10 0 010 9.169M10.181 53.86a15 15 0 01-.001-14.723m26.14 0a15 15 0 010 14.724m6.12-27.693a5 5 0 010-5.834m-4.827 7.5a10 10 0 010-9.169M33.431 30.61a15 15 0 01-.001-14.722M4.06 20.332a5 5 0 010 5.835m4.827-7.501a10 10 0 010 9.169m4.183-11.947a15 15 0 010 14.724'  stroke-linecap='square' stroke-width='1.5' stroke='%23c15d1ae3' fill='none'/><path d='M43.582 42.44a5 5 0 015.835 0m-7.501-4.827a10 10 0 019.169 0M39.138 33.43a15 15 0 0114.724 0m-56.781 9.01a5 5 0 015.836 0m-7.501-4.827a10 10 0 019.169 0M-7.362 33.43a15 15 0 0114.724 0M49.417 4.06a5 5 0 01-5.834 0m7.501 4.827a10 10 0 01-9.169 0m11.946 4.182a15 15 0 01-14.723.001M2.917 4.06a5 5 0 01-5.834 0m7.501 4.827a10 10 0 01-9.169 0M7.36 13.069a15 15 0 01-14.722.001m27.694 6.12a5 5 0 015.835 0m0 8.12a5 5 0 01-5.834 0m7.5 4.827a10 10 0 01-9.168 0m.001-17.774a10 10 0 019.169 0m2.776 21.956a15 15 0 01-14.723.001m0-26.14a15 15 0 0114.724 0'  stroke-linecap='square' stroke-width='1.5' stroke='%23ffffff72' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-93,-93)' fill='url(%23a)'/></svg>");*/
    /*margin: 1vh 1vw;*/
    background: black;
}

/*#where{*/
/*    table-layout: fixed;*/
/*}*/

/*.where_item {*/
/*    display: table-cell;*/
/*}*/
body {
    user-select: none;
    -webkit-user-select: none;
    align-content: center;
    /*background: var(--DEFAULT_LAYER_BACK);*/
    /*padding: 1vh 1vw;*/
    /*border-radius: 10px;*/
}

body > *{
    align-content: center;
    color: white;
    padding: 1vh 1vw;
}

/*#main_layer {*/
/*    width: 100%;*/
/*    margin: 0 auto;*/
/*    position: relative;*/
/*    background: #F0F0F524;*/
/*    border-radius: 10px;*/
/*}*/


.center_menu {

    display: inline-flex;
    justify-content: space-evenly;
}

header {
    top: 0;
    /*background: var(--DEFAULT_LAYER_BACK);*/
    background: var(--DEFAULT_LAYER_BACK);
    border-top: #ec914b8f;
    border-radius: 5px 30px;
    border-width: 1px;
    height: 5vh;
    min-height: 5vh;
    grid-auto-flow: column;
    display: flex;;
    position: relative;
    justify-content: space-around;
}
.user_info {

    padding: 2px;
    position: absolute;
    display: inline-flex;
    flex-direction: column;
    right: 0;
}
.login_input {
    border-radius: 10px;
    border-width: 2px;
    border: #F0F0F514;
    padding: 5px;
    background: #F0F0F524;
    color: white;
    text-align: center;
    margin: 2px;
}
.login_input::placeholder {
    color: #ec914b;
}

.login_input::-webkit-input-placeholder{
    color: #ec914b;
}

.login_input:-ms-input-placeholder{
    color: #ec914b;
}

.hello_to_user {
    border-radius: 10px;
    border-width: 2px;
    border: #F0F0F514;
    padding: 10px;
    background: #F0F0F524;
    color: #ec914b;
    text-align: center;
    margin: 2px;
}


.hello_to_user_txt {
    color: #ec914b;
}


#bottom {
    float: right;
    display: inline-block;
    justify-content: space-between;
    margin-left: auto;
    grid-auto-flow: column;
    grid-template-columns: 3fr;
    position: absolute;
    right: 30px;
}

#top {

    display: inline-block;
    justify-content: space-between;
    margin-left: auto;
    grid-auto-flow: column;
    grid-template-columns: 3fr;
    position: absolute;
    left: 30px;
}

h2 {
    margin: 1vw;
}

#main_layer {
    border-radius: 10px 10px 0px 10px;
    padding: 10px;
    margin: 1vw 1vh;
    position: relative;
    overflow-y: auto;
    overflow-x: clip;
    height: 78vh;
    min-height: 8vh;
}

#main_layer > div {
    position: relative;
}


#content > * {

}

footer {
    display: flex;
    bottom: 0;
    border-top: #ec914b8f;
    background: var(--DEFAULT_LAYER_BACK);
    border-radius: 5px 30px ;
    border-width: 1px;
    height: 5vh;
    min-height: 5vh;
    position: relative;
}

#rememberMe {
    width: 20px;
    height: 20px;
    background-color: lightblue; /* 체크박스 배경색 */
    border: 2px solid blue;      /* 테두리 색 */
    appearance: none;             /* 기본 OS 스타일 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    position: relative;
}

#rememberMe:checked {
    background-color: blue;
}

#rememberMe:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 7px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}