*{box-sizing:border-box;margin:0;padding:0}body{color:#1e293b;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f1f5f9;flex-direction:column;min-height:100vh;font-family:Noto Sans JP,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.7;display:flex}.page-header{color:#fff;text-align:center;background:linear-gradient(135deg,#1e293b 0%,#3730a3 100%);padding:40px 20px 36px}.page-header h1{letter-spacing:-.02em;font-size:clamp(1.4rem,1.1rem + 1.5vw,2rem);font-weight:700}.page-header p{color:#c7d2fe;max-width:720px;margin:10px auto 0}.page-main{flex:1;width:100%;max-width:1160px;margin:0 auto;padding:28px 20px 56px}.app{flex-direction:column;display:flex}.todo-form{background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:16px;display:flex;box-shadow:0 1px 2px #0f172a0a}.todo-form input{color:#1e293b;background:#fff;border:1px solid #cbd5e1;border-radius:8px;flex:1;min-width:0;padding:12px;font-family:inherit;font-size:16px}.todo-form input::placeholder{color:#94a3b8}.todo-form input:focus{outline-offset:1px;border-color:#3730a3;outline:2px solid #a5b4fc}.todo-form button{color:#fff;background:#3730a3;border-color:#3730a3;flex-shrink:0;padding:12px 24px;font-weight:700}.todo-form button:hover{color:#fff;background:#312e81;border-color:#312e81}.container{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.todo-list{background:#fff;border:1px solid #e2e8f0;border-top:3px solid #cbd5e1;border-radius:12px;min-height:320px;padding:14px;transition:background .2s,border-color .2s;box-shadow:0 1px 2px #0f172a0a}.todo-list.is-dragging-over{background:#eef2ff;border-color:#c7d2fe}.todo-list-title{letter-spacing:.02em;border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;font-size:1rem;font-weight:700;display:flex}.todo-list-count{color:#64748b;text-align:center;background:#f1f5f9;border-radius:999px;min-width:24px;padding:0 8px;font-size:1rem;font-weight:500}.todo-list-empty{color:#94a3b8;text-align:center;padding:24px 0}.container>.todo-list:first-child{border-top-color:#94a3b8}.container>.todo-list:first-child .todo-list-title{color:#475569}.container>.todo-list:nth-child(2){border-top-color:#6366f1}.container>.todo-list:nth-child(2) .todo-list-title{color:#3730a3}.container>.todo-list:nth-child(3){border-top-color:#10b981}.container>.todo-list:nth-child(3) .todo-list-title{color:#047857}.todo-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;flex-direction:column;align-items:stretch;gap:10px;margin-bottom:8px;padding:12px 14px;transition:border-color .2s,background .2s;display:flex}.todo-item:hover{background:#fff;border-color:#c7d2fe}.todo-item-header{align-items:flex-start;gap:10px;display:flex}.drag-handle{color:#94a3b8;cursor:grab;-webkit-user-select:none;user-select:none;border-radius:4px;flex-shrink:0;padding:2px 4px;line-height:1.3;transition:background .2s,color .2s}.drag-handle:hover{color:#3730a3;background:#e0e7ff}.drag-handle:active{cursor:grabbing}.todo-item-text{overflow-wrap:anywhere;flex:1;min-width:0;font-size:1rem;line-height:1.6}.todo-item-buttons{flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto;display:flex}.todo-item-buttons input{color:#1e293b;border:1px solid #3730a3;border-radius:6px;flex:1;min-width:0;padding:8px 10px;font-family:inherit;font-size:16px}.todo-item-buttons input:focus{outline-offset:1px;outline:2px solid #a5b4fc}button{color:#475569;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:6px 12px;font-family:inherit;font-size:16px;line-height:1.4;transition:border-color .2s,background .2s,color .2s}button:hover{color:#3730a3;border-color:#3730a3}.save-btn{color:#fff;background:#3730a3;border-color:#3730a3;font-weight:700}.save-btn:hover{color:#fff;background:#312e81;border-color:#312e81}.delete-btn:hover{color:#b91c1c;background:#fef2f2;border-color:#b91c1c}.note{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-top:40px;padding:24px}.note h2{margin-bottom:12px;font-size:1.125rem;font-weight:700}.note ul{color:#475569;padding-left:1.25em}.note li+li{margin-top:8px}.inline-handle{color:#94a3b8}noscript{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;margin-bottom:16px;padding:16px;display:block}.page-footer{color:#64748b;background:#fff;border-top:1px solid #e2e8f0;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:12px 24px;padding:24px 40px;display:flex}.page-footer a{color:#1e293b;text-decoration:none;transition:color .2s}.page-footer a:hover{color:#3730a3}.footer-links{flex-wrap:wrap;gap:16px;display:flex}.footer-links a{border:1px solid #e2e8f0;border-radius:6px;padding:8px 16px;transition:border-color .2s,color .2s}.footer-links a:hover{color:#3730a3;border-color:#3730a3}@media (width<=860px){.container{grid-template-columns:1fr}.todo-list{min-height:0}}@media (width<=600px){.page-footer{padding:24px 20px}}.footer-ad{z-index:90;width:320px;box-shadow:none;background:0 0;border:none;flex-direction:column;align-items:center;gap:2px;padding:0;display:flex;position:fixed;bottom:0;right:0;overflow:hidden}.footer-ad.is-closed{display:none}.ad-widget__head{z-index:1;justify-content:space-between;align-items:center;width:100%;display:flex;position:relative}.ad-widget__label{color:#64748b;letter-spacing:.04em;background:#f1f5f9;border-radius:999px;padding:2px 8px;font-size:12px}.ad-widget__close{appearance:none;color:#64748b;cursor:pointer;background:#f1f5f9;border:none;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;padding:0;font-size:12px;line-height:1;transition:background .2s,color .2s;display:flex}.ad-widget__close:hover{color:#1e293b;background:#e2e8f0}.footer-ad ins.adsbygoogle{width:320px;height:100px;display:block}@media screen and (width<=768px){.footer-ad{box-shadow:none;z-index:auto;background:0 0;border:none;border-radius:0;align-self:center;gap:0;margin:24px auto 0;padding:0;position:static}.footer-ad.is-closed{display:flex}.ad-widget__head{display:none}.footer-ad ins.adsbygoogle{width:320px;height:100px}}