@import"https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{font-family:Noto Sans KR,sans-serif;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh;display:flex;justify-content:center;align-items:center}:root{--oxford-blue: #0047ab;--oxford-white: #ffffff;--paper-bg: #fffde7;--line-blue: #a5d8ff;--margin-red: #ff8787;--desk-bg: #e9ecef;--text-color: #2c3e50;--line-height: 40px}*{box-sizing:border-box}body{font-family:Gowun Batang,serif;margin:0;padding:0;background-color:var(--desk-bg);color:var(--text-color);display:flex;justify-content:center;align-items:center;min-height:100vh}.container{width:100%;max-width:600px;margin:2rem;padding:0}.todoBlock{background-color:var(--paper-bg);border-radius:8px;box-shadow:0 5px 15px #0000001a,0 10px 30px #0000000d,0 0 0 1px #0000000d;overflow:hidden;position:relative;min-height:600px;background-image:linear-gradient(90deg,transparent 59px,var(--margin-red) 60px,var(--margin-red) 61px,transparent 62px),repeating-linear-gradient(transparent,transparent calc(var(--line-height) - 1px),var(--line-blue) var(--line-height));background-size:100% 100%,100% var(--line-height);background-attachment:local}.todoBlock:before{content:"";display:block;height:60px;background-color:var(--oxford-blue);border-bottom:4px solid #003380}.title{position:absolute;top:10px;left:0;right:0;z-index:10}.title h1{text-align:center;color:var(--oxford-white);margin:0;font-size:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:4px;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.todoBlock>div:not(.title){padding-top:15px}.todoItem{display:flex;align-items:center;height:var(--line-height);padding:0 20px 0 70px;border:none;background:transparent;transition:background-color .2s}.todoItem:hover{background-color:#0047ab08;padding-left:70px;padding-right:20px}.todoItem input[type=checkbox]{accent-color:var(--oxford-blue);width:18px;height:18px;cursor:pointer}.todoItem span{flex:1;margin-left:15px;font-size:1.1rem;line-height:var(--line-height);color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.todoItem span.completed{text-decoration:line-through;color:#adb5bd;text-decoration-color:var(--margin-red)}.todoItem input[type=text]{flex:1;margin-left:15px;font-family:inherit;font-size:1.1rem;background:transparent;border:none;border-bottom:2px dashed var(--oxford-blue);outline:none;color:var(--oxford-blue)}.btnBlock{display:flex;gap:8px}.deleteBtn,.editBtn{background:transparent;border:none;color:#dee2e6;cursor:pointer;padding:0;font-size:.9rem;transition:color .2s}.todoItem:hover .deleteBtn{color:var(--margin-red)}.todoItem:hover .editBtn{color:var(--oxford-blue)}form{padding:0 40px 0 70px;display:flex;height:var(--line-height);align-items:center;z-index:5}.inputField{flex:1;padding:0;border:none;background:transparent;font-family:inherit;font-size:1.1rem;height:100%;outline:none;color:var(--oxford-blue)}.inputField::placeholder{color:#adb5bd;font-style:italic}.submitBtn{background-color:var(--oxford-blue);color:#fff;border:none;padding:4px 12px;border-radius:4px;margin-left:10px;font-family:inherit;cursor:pointer;font-weight:700;font-size:.8rem;transition:transform .1s}.submitBtn:active{transform:scale(.95)}.todoBlock:after{content:"• • • • • • • • • • • • • • • • • • • • •";position:absolute;top:65px;left:0;right:0;text-align:center;color:#0000000d;font-size:12px;letter-spacing:12px;pointer-events:none}