body {
    padding : 2%;
    padding-left : 10%;
    padding-right : 10%;
    display : flex;
    justify-content: space-between;
    font-family : 'Pretendard';
}

/* --- 왼쪽 컨테이너 -- */
.left-container {
    width : 20%;
    padding : 10px;
    margin-right : 50px;
}

.character {
    width : 100%;
}


.name {
    font-size : 12px;
    font-weight : 500;
    margin : 0px;
    margin-top : 10px;
    margin-bottom : 10px;
    color : rgb(83, 24, 69);
}




.reaction {
    width : calc(100% - 10px);
    height : fit-content;
    margin : 0px;
    padding : 5px;
    border-radius : 5px;
    border : 1px solid rgb(193, 159, 197);
    color : rgb(83, 24, 69);
    font-size : 13px;
    font-weight : 300;

    margin-bottom : 10px;
}

.character img{
    width : 100%;
    height : fit-content;
    object-position: center;
    
    
}

/* -- 캘린더 관련 -- */

.calendar {
    width : 100%;
    
    border-radius : 10px;
    margin-bottom : 20px;
}

.calendar-header {
    width : 100%;
    display : flex;
    justify-content: space-between;
    color : rgb(83, 24, 69);
    font-size : 15px;

    margin-bottom : 5px;
    font-weight : 400;
}

.calendar-header button {
    border : none;
    background : none;
    color : rgb(83, 24, 69);
    
    cursor: pointer;
}

.calendar-days {
    display : grid;
    grid-template-columns: repeat(7,1fr);
    text-align: center;
    color : rgb(83, 24, 69);
    
    
    padding-top : 3px;
    padding-bottom: 3px;
    
    font-size : 14px;
}

.calendar-dates {
    display : grid;
    grid-template-columns: repeat(7,1fr);
    text-align: center;
    
    color : rgb(83, 24, 69);
    font-size : 14px;
    row-gap: 10px;
}


.today {
    background-color:rgba(193, 159, 197, 0.418);
    border-radius : 25px;
}

.calendar-dates span {
    cursor : pointer;
}

/* - 투두리스트 관련 -- */
.todoList-container {
    width : 100%;
    
}

.todo {
    width : 100%;
    display : flex;
    margin-bottom: 10px;
}

.check {
    width : 20px;
    height : 20px;
    align-self: center;
    margin : 0;
    margin-right : 5px;
    accent-color: rgba(193, 159, 197, 0.418);
    border-color : rgb(83, 24, 69);
}

.todo-content {
   width : 100%;
   font-family : 'Pretendard' !important;
   font-size : 12px;
   padding : 3px;
}

.completed {
    text-decoration: line-through;
}

.plus-todolist {
    width : 100%;
    height : 24px;
    border-radius : 5px;
    border : 1px solid rgba(193, 159, 197, 0.418);
    background-color: rgba(193, 159, 197, 0.418);
    color : rgb(83, 24, 69);
    cursor : pointer;
}

/* --- 우측 컨테이너 --- */

.right-container {
    width : 70%;
    
    margin-top: 10px;
    
}

.current-date {
    text-align: right;
    font-size : 20px;
    font-weight : 600;
    padding : 10px;
}

/* -- 다이어리 항목 -- */
.diary {
    padding : 20px;
    padding-top : 30px;
    background-color: rgba(193, 159, 197, 0.418);
    border-radius: 10px;
    margin-bottom : 20px;
}

.title {
    font-size : 24px;
    font-weight : 600;
    
}

.time{
    font-size : 13px;
    margin : 0px;
    margin-top : 5px;
    color : white;
}

.diary-content {
    font-size : 14px;
    font-weight : 300;
    line-height: 1.5;
    
}

/* --- 추가버튼 --- */
.plus-button {
    position: fixed;
    top : 86%;
    left : 90%;

    width : 50px;
    height : 50px;
    border-radius : 50px;
    border : none;
    font-size : 20px;
    cursor : pointer;
}

/* 모달창 */

.modal-background {
    display : none;
    position: fixed;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
    z-index : 5;
    background-color: rgba(0, 0, 0, 0.263);
}

.diary-enter {
    display : none;
    width : 50%;
    position: fixed;
    left : 25%;

    padding : 20px;
    
    z-index : 10;
    background-color: rgb(235, 218, 236);
    border-radius : 10px;

    /* display : flex; */
    flex-direction: column;
    gap : 10px;
}

.title-enter {
    appearance: none;
    background-color: transparent;
    outline : none;
    border : none;
    border-bottom :1px solid rgb(83, 24, 69);
    border-radius : 5px 5px 0px 0px;
    padding : 10px;
    font-size : 24px;
    font-family : 'Pretendard';
    font-weight : 600;

}

.content-enter {
    appearance: none;
    background-color: transparent;
    outline: none;
    border : none;
    padding : 10px;
    resize : none;
    overflow-y:hidden;
    font-size : 14px;
    font-family: 'Pretendard';
    font-weight : 400;
    line-height: 1.5;
}



.diary-button {
    width : 100%;
    display : flex;
    justify-content: end;
    gap : 10px;
}

.diary-button button {
    border : 1px solid black;
    padding : 7px;
    padding-top : 6px;
    padding-bottom : 6px;
    border-radius : 10px;
    font-size : 13px;
    cursor : pointer;
    text-align: center;

    background-color: transparent;
    transition: all 0.3s ease-in-out;
}

.diary-save:hover {
    background-color: rgb(83, 24, 69);
    color : white;
}

.diary-close:hover {
    background-color: rgb(146, 34, 34);
    color : white;
}