.todo{border-bottom:1px solid #5FC9F3;position:relative;display:flex;justify-content:space-between;align-items:center;height:auto;padding:10px 20px 10px 50px}.todo:first-of-type{border-top:1px solid #5FC9F3}.todo:hover{background-color:#f0f0f080;-webkit-transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s}.title{font-size:1.5em;font-weight:500}.delete-btn{color:#fff;font-weight:700;text-transform:uppercase;font-size:.8em;background-color:#d9534f;border:1px solid #d43f3a;border-radius:4px;cursor:pointer;padding:6px 12px}body{font-family:Nanum Pen Script,cursive;margin:0;background:#f6f7fb}.app{min-height:100vh;display:flex;justify-content:center;padding:24px 16px}.notepad{position:relative;background-color:#fefefe;width:min(600px,calc(100vw - 32px));margin:0 auto;padding:0;min-height:495px;border:1px solid #dcdcdc;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;overflow:hidden}.lines{border-left:1px solid #ffaa9f;border-right:1px solid #ffaa9f;width:2px;height:100%;min-height:495px;margin-left:40px;position:absolute;top:0;left:0}.header{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px 0 6px}.header h1{margin:0;padding-bottom:10px}.todo-input{width:100%;display:flex;justify-content:center;align-items:center;gap:12px;padding:0 16px;box-sizing:border-box}.input-box{flex:1;max-width:400px;padding:6px 12px;color:#495057;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem}.submit-btn{color:#58ccfa;background-color:#fff;font-weight:700;font-size:.8em;text-transform:uppercase;border:1px solid #5fc9f3;border-radius:4px;cursor:pointer;padding:6px 12px}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.submit-btn:hover:not(:disabled){color:#fefefe;background-color:#58ccfa;border-color:#5fc9f3;transition:all .2s ease}.empty-state{padding:18px 20px 18px 50px;color:#6c757d;font-size:1.2em}