/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Pretendard',sans-serif;

    background:#FFF8FB;

    color:#444;

}

a{

    text-decoration:none;

}

button{

    cursor:pointer;

    border:none;

    transition:.3s;

}

input{

    width:100%;

    padding:15px;

    margin:15px 0;

    border-radius:15px;

    border:1px solid #e5e5e5;

    font-size:16px;

    outline:none;

}

input:focus{

    border:1px solid #EC7FA9;

    box-shadow:0 0 12px rgba(236,127,169,.2);

}

/* =========================
   Landing
========================= */

.landing{

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #FFEAF2,
        #FFD6E7
    );

}
body.dark.landing,
body.dark{

    background:#121212;

}

body.dark.landing{

    background:#121212;

}

body.dark .landing{

    background:#121212 !important;

}

.landing-card{

    width:700px;

    background:white;

    border-radius:35px;

    padding:80px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.landing-card h1{

    font-size:88px;

    color:#EC7FA9;

    margin-bottom:15px;

}

.landing-card p{

    font-size:24px;

    color:#777;

    margin-bottom:35px;

}

#clock{

    font-size:50px;

    margin-bottom:40px;

    font-weight:bold;

}

#startBtn{

    width:230px;

    height:65px;

    border-radius:40px;

    background:#EC7FA9;

    color:white;

    font-size:22px;

}

#startBtn:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(236,127,169,.3);

}

/* =========================
   다크모드 버튼
========================= */

.floating-dark{

    position:fixed;

    top:25px;

    right:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:white;

    font-size:22px;

    box-shadow:0 10px 20px rgba(0,0,0,.15);

    z-index:999;

}

/* =========================
   Dashboard
========================= */

#dashboard{

    width:90%;

    max-width:1300px;

    margin:70px auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.welcome{

    grid-column:1/-1;

    background:white;

    border-radius:30px;

    padding:40px;

    text-align:center;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.welcome h2{

    font-size:40px;

    color:#EC7FA9;

    margin-bottom:12px;

}

.welcome p{

    color:#777;

    font-size:20px;

}

.card{

    background:white;

    border-radius:28px;

    padding:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(236,127,169,.18);

}

.card h2{

    color:#EC7FA9;

    margin-bottom:20px;

    font-size:28px;

}

.card button{

    background:#EC7FA9;

    color:white;

    padding:12px 22px;

    border-radius:12px;

}

.card button:hover{

    background:#E56C9B;

}

#goalText{

    margin-top:15px;

    font-weight:bold;

    color:#EC7FA9;

}

/* =========================
   Todo
========================= */

#todoList{

    list-style:none;

    margin-top:15px;

}

#todoList li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #eee;

}

#todoList li div{

    display:flex;

    align-items:center;

    gap:10px;

}

#todoList input[type="checkbox"]{

    width:18px;

    height:18px;

    margin:0;

}

#todoList button{

    padding:6px 12px;

}

#todoList span.done{

    text-decoration:line-through;

    color:#999;

}

/* =========================
   Timer
========================= */

.timer-select{

    display:flex;

    gap:10px;

    margin-bottom:20px;

}

.timer-select button{

    flex:1;

    background:#FFD9E8;

    color:#EC7FA9;

    font-weight:bold;

}

.timer-select button:hover{

    background:#EC7FA9;

    color:white;

}

#timerText{

    text-align:center;

    font-size:60px;

    color:#EC7FA9;

    margin:25px 0;

    font-weight:bold;

}

.timer-buttons{

    display:flex;

    gap:10px;

}

.timer-buttons button{

    flex:1;

}

/* =========================
   Calendar
========================= */

.calendar-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.calendar-header h3{

    color:#EC7FA9;

    font-size:24px;

}

.weekdays{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    text-align:center;

    margin-bottom:10px;

    font-weight:bold;

    color:#999;

}

#calendarBox{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:8px;

}

.day{

    aspect-ratio:1/1;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    cursor:pointer;

    transition:.2s;

}

.day:hover{

    background:#FFD9E8;

}

.today{

    background:#EC7FA9;

    color:white;

    font-weight:bold;

}

.empty{

    aspect-ratio:1/1;

}

/* =========================
   Favorites
========================= */

.favorites a{

    display:block;

    margin:14px 0;

    color:#EC7FA9;

    font-size:18px;

    font-weight:600;

    transition:.25s;

}

.favorites a:hover{

    transform:translateX(8px);

}

/* =========================
   Dark Mode
========================= */

body.dark{

    background:#121212;

    color:white;

}

body.dark .landing{

    background:linear-gradient(
        135deg,
        #1D1D1D,
        #111111
    );

}

body.dark .landing-card{

    background:#2A2A2A;

}

body.dark .landing-card p,

body.dark #clock{

    color:white;

}

body.dark .card,

body.dark .welcome{

    background:#252525;

    color:white;

}

body.dark input{

    background:#3A3A3A;

    color:white;

    border:1px solid #555;

}

body.dark .floating-dark{

    background:#333;

    color:white;

}

body.dark .weekdays{

    color:#ddd;

}

body.dark a{

    color:#FFC3D8;

}

/* =========================
   Responsive
========================= */

@media(max-width:900px){

    #dashboard{

        grid-template-columns:1fr;

    }

    .landing-card{

        width:90%;

        padding:50px;

    }

    .landing-card h1{

        font-size:60px;

    }

}

#goalDone{

    background:#6BCB77;

    margin-left:10px;

}

#goalDone:hover{

    background:#55b764;

}

.goal-complete{

    color:#6BCB77;

    font-weight:bold;

    text-decoration:line-through;

}
#studyTime{

    text-align:center;

    margin-top:15px;

    font-size:18px;

    font-weight:bold;

    color:#666;

}

body.dark #studyTime{

    color:white;

}