@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: "Noto Sans KR", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
vertical-align: middle;
box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
button{font-family:inherit}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}

.blind{position:absolute; overflow:hidden; border:0; width:1px; height:1px; clip:rect(1px, 1px, 1px, 1px); clip-path:inset(50%);}

button{cursor:pointer;margin:0;padding:0;background:none;border:0;}
input,
select{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;padding:0;margin:0;width:100%;border:1px solid transparent; font-family: 'Noto Sans KR';box-sizing: border-box;}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}
  
.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}
  
.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}


.wrap{
    position: relative;
    margin: 0 auto;
    max-width: 2560px;
    height: 100vh;
}

.hidden{
    display: none;
}

.contents{
    z-index: 1;
    position: absolute;
    top:35%;
    left:50%;
    transform: translate(-50%,-35%);
}

#clock{
    display: block;
    color:#fff;
    font-size: 60px;
    text-align: center;
}

#greeting{
    margin-top:41px;
    color:#fff;
    font-size: 40px;
    text-align: center;
}

#login-form,
.todo-wrap{
    position: relative;
    width: 400px;
}

#login-form{
    margin:40px auto 0;
}

.login-input{
    padding:10px 80px 10px 15px;
    border-radius:20px;
}

.login-btn{
    z-index: 1;
    position: absolute;
    transform: translateY(-50%);
    top:50%;
    right:10px;
    padding:5px 10px;
    width:auto;
    background:#2222;
    border-radius: 20px;
}

.todo-wrap{
    margin:20px auto 0;
}

.todo-input{
    overflow: hidden;
    padding:10px 15px;
    border-radius:20px;
}

#todo-list{
    overflow-y: auto;
    padding-top:10px;
    max-height: calc(100vh - 65vh);
}
#todo-list::-webkit-scrollbar {
    width: 6px;
}
#todo-list::-webkit-scrollbar-thumb {
    background: #d9d9d9;
    border-radius: 20px;
}
#todo-list::-webkit-scrollbar-track {
    background: #fff;
}


.todo-item{
    position: relative;
    padding:0 15px 10px;
    color:#222;
}
.todo-item:last-child{
    padding-bottom:15px;
}
.todo-item .item-text{
    display: block;
    padding-right:20px;
}
.todo-item .btn-close{
    display: inline-flex;
    position: absolute;
    top:-2px;
    right:15px;
    width: 20px;
    height: 20px;
    
}
.todo-item .btn-close:before{
    content: '';
    display: block;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:url('../img/ico_close.svg')no-repeat center/100% auto;
}

.todo-wrap.is-active{
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background:#fff;
    border-radius: 20px;
}
.todo-wrap.is-active #todo-form{
    position: relative;
}
.todo-wrap.is-active #todo-form:before{
    content: '';
    display: block;
    position: absolute;
    right:10px;
    bottom: 0;
    left:10px;
    height:1px;
    background:#3333;
}
.todo-wrap.is-active .todo-input{
    border-radius: 0;
}

#quotes{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom:14px;
    left:50%;
    transform: translateX(-50%);
}

.quote,
.author{
    color:#fff;
    font-size: 14px;
    font-weight: 300;
    text-shadow:0 2px 3px #000;
}

.author{
    margin-top:10px;
}

#weather-box{
    position: absolute;
    bottom:14px;
    right:15px;
}

.weather,
.city{
    color:#fff;
    font-size: 14px;
}
.weather + .city{
    margin-left:10px;
}

.btn-wrap{
    position: absolute;
    top: 10px;
    right: 15px;
}
.btn-wrap .logout-btn{
    width: 28px;
    height: 28px;
    background:url('../img/ico_logout.svg')no-repeat center/100% auto;
}

.background{
    overflow: hidden;
    z-index: -1;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}


.background > img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}