.App{margin:80px auto auto;border:3px solid #000;width:70%;height:900px;border-radius:15px;background-color:#ffe0e0;position:relative}.title{text-align:center;margin-top:30px}.title-content{text-align:center}.list{border:1px solid #f3d1d1;border-radius:15px;width:80%;margin:auto auto 10px;background-color:#fff3f3;padding:15px;position:relative}.list-header{display:flex;align-items:center;gap:10px}.done{text-decoration:line-through;color:gray}.modify-button{position:absolute;right:10px;bottom:60px;padding:10px;border:none;border-radius:10px;width:60px;background-color:#9aa2ff;color:#fff;font-weight:700;cursor:pointer;transition:background-color .2s}.modify-button:hover{background-color:#747bc5}.modify-button:focus{background-color:#595e94}.delete-button{position:absolute;right:10px;bottom:15px;padding:10px;border:none;border-radius:10px;width:60px;background-color:#ff9aa2;color:#fff;font-weight:700;cursor:pointer;transition:background-color .2s}.delete-button:hover{background-color:#e07a86}.delete-button:focus{background-color:#c25a67}.input-box{border:1px solid #ccc;border-radius:15px;background-color:#fffafc;padding:20px;width:80%;position:absolute;bottom:15px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}.todo-box{width:80%;padding:15px 20px;border-radius:15px;border:2px solid #d3cfcf;background-color:#fff;transition:background-color .2s,border-color .2s}.todo-box:focus,.todo-box2:focus{background-color:#f6f0f0;border-color:#a9a4a4;outline:none}.upload-button{width:80%;padding:15px;border-radius:15px;background-color:#b5ead7;color:#333;border:none;font-weight:700;transition:background-color .2s;cursor:pointer}.upload-button:hover{background-color:#88d9c0}.upload-button:focus{background-color:#5fae97}.modal{border:1px solid #ccc;border-radius:15px;background-color:#fffafc;padding:20px;width:80%;position:absolute;bottom:300px;left:50%;transform:translate(-50%) translateY(20px);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:all .3s ease;z-index:1000}.modal.show{opacity:1;pointer-events:auto;transform:translate(-50%) translateY(0)}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:999;opacity:0;transition:opacity .3s ease;pointer-events:none}.overlay.show{opacity:1;pointer-events:auto}.modify-box{width:80%;padding:15px 20px;border-radius:15px;border:2px solid #d3cfcf;background-color:#fff;transition:background-color .2s,border-color .2s}.modify-box:focus{background-color:#f6f0f0;border-color:#a9a4a4;outline:none}.modify-upload{width:80%;padding:15px;border-radius:15px;background-color:#b5ead7;color:#333;border:none;font-weight:700;transition:background-color .2s;cursor:pointer}.modify-upload:hover{background-color:#88d9c0}.modify-upload:focus{background-color:#5fae97}.modal-close{background-color:#ff9aa2;border:none;padding:10px;border-radius:10px;width:60px;color:#fff;cursor:pointer}.modal-close:hover{background-color:#e07a86}.modal-close:focus{background-color:#c25a67}.list-container{max-height:400px;overflow-y:auto;margin-bottom:20px}.list-container::-webkit-scrollbar{width:8px}.list-container::-webkit-scrollbar-thumb{background-color:#ccc;border-radius:3px}