*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#111;-webkit-font-smoothing:antialiased;background:#f0f2f5;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Yu Gothic UI,Segoe UI,sans-serif}#root{min-height:100vh}.app{min-height:100vh;padding:36px 32px 80px}.header{align-items:baseline;gap:16px;margin-bottom:28px;display:flex}.title{color:#111;letter-spacing:-.4px;font-size:22px;font-weight:700}.total-time{color:#999;font-size:12px;font-weight:500}.board{grid-template-columns:repeat(3,1fr);align-items:start;gap:14px;display:grid}.column{background:#f7f8fa;border:2px solid #0000;border-radius:16px;transition:border-color .15s,background .15s}.column.column-over{border-color:var(--col-color);background:var(--col-bg)}.column-header{align-items:center;gap:8px;padding:14px 16px 10px;display:flex}.column-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.column-label{color:#333;flex:1;font-size:13px;font-weight:700}.column-count{color:#999;text-align:center;background:#00000012;border-radius:10px;min-width:24px;padding:2px 8px;font-size:11px;font-weight:700}.column-body{flex-direction:column;gap:8px;min-height:60px;padding:0 10px 12px;display:flex}.task-card{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;border:1.5px solid #0000;border-radius:12px;padding:11px 12px;transition:box-shadow .15s,border-color .15s,opacity .15s;position:relative;box-shadow:0 1px 3px #00000012}.task-card:hover{box-shadow:0 3px 10px #0000001a}.task-card:active{cursor:grabbing}.task-card.running{background:#f0fdf4;border-color:#22c55e}.task-card.ghost{opacity:.3}.task-card.movable{cursor:pointer}.task-card.movable:hover{background:#fffdf5;border-color:#f59e0b}.task-card.overlay{cursor:grabbing;background:#fff;border-radius:12px;padding:11px 12px;transform:rotate(1.5deg);box-shadow:0 16px 40px #0000002e}.task-color-bar{border-radius:12px 0 0 12px;width:4px;position:absolute;top:0;bottom:0;left:0}.task-card:has(.task-color-bar){padding-left:16px}.color-picker-wrap{flex-shrink:0;position:relative}.color-btn{cursor:pointer;border:1.5px solid #0000001f;border-radius:50%;width:14px;height:14px;margin-top:2px;padding:0;transition:transform .15s,border-color .15s;display:block}.color-btn:hover{border-color:#0000004d;transform:scale(1.25)}.color-palette{z-index:300;white-space:nowrap;background:#fff;border:1px solid #f0f0f0;border-radius:10px;align-items:center;gap:5px;padding:7px 8px;display:flex;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);box-shadow:0 4px 20px #00000026}.palette-color{cursor:pointer;border:2px solid #0000;border-radius:50%;flex-shrink:0;width:18px;height:18px;padding:0;transition:transform .1s}.palette-color:hover{transform:scale(1.25)}.palette-color.selected{border-color:#fff;box-shadow:0 0 0 2px}.palette-clear{color:#aaa;cursor:pointer;background:#f9f9f9;border:1.5px solid #e0e0e0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;padding:0;font-size:9px;line-height:1;transition:all .1s;display:flex}.palette-clear:hover{color:#ef4444;background:#fff5f5;border-color:#ef4444}.task-card-main{align-items:flex-start;gap:8px;display:flex}.task-text{color:#1a1a2e;word-break:break-word;cursor:text;flex:1;font-size:13.5px;font-weight:500;line-height:1.5}.edit-textarea{color:#1a1a2e;resize:none;background:#fafafe;border:1.5px solid #6c63ff;border-radius:6px;outline:none;flex:1;padding:3px 7px;font-family:inherit;font-size:13.5px;font-weight:500;line-height:1.5;box-shadow:0 0 0 3px #6c63ff1f}.delete-btn{color:#d1d5db;cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;padding:0;transition:all .15s;display:flex}.delete-btn:hover{color:#ef4444;background:#fee2e2}.task-card-footer{align-items:center;gap:8px;margin-top:10px;display:flex}.time-info{flex:1;min-width:0;margin:0 4px}.time-bar-wrap{background:#f0f0f0;border-radius:2px;height:3px;margin-bottom:4px;overflow:hidden}.time-bar{background:#a5b4fc;border-radius:2px;min-width:4px;height:100%;transition:width .6s}.time-bar.running{background:#22c55e}.time-label{color:#6c63ff;font-variant-numeric:tabular-nums;letter-spacing:.3px;align-items:center;gap:4px;font-size:11.5px;font-weight:700;display:flex}.time-label.running{color:#16a34a}.dot{background:#22c55e;border-radius:50%;flex-shrink:0;width:6px;height:6px;animation:1.2s ease-in-out infinite blink;display:inline-block}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.timer-btn{cursor:pointer;white-space:nowrap;letter-spacing:.2px;border:none;border-radius:6px;flex-shrink:0;padding:4px 10px;font-size:11px;font-weight:700;transition:all .15s}.timer-btn.start{color:#6c63ff;background:#ede9fe}.timer-btn.start:hover{color:#fff;background:#6c63ff}.timer-btn.stop{color:#16a34a;background:#dcfce7}.timer-btn.stop:hover{color:#fff;background:#22c55e}.timer-btn.reset{color:#9ca3af;background:#f3f4f6;padding:4px 8px;font-size:14px}.timer-btn.reset:hover{color:#ef4444;background:#fee2e2}.add-task-btn{color:#aaa;cursor:pointer;text-align:left;background:0 0;border:1.5px dashed #d1d5db;border-radius:10px;align-items:center;gap:6px;width:100%;padding:8px 10px;font-size:13px;font-weight:500;transition:all .15s;display:flex}.add-task-btn:hover{border-color:var(--col-color,#6c63ff);color:var(--col-color,#6c63ff);background:#fafafa}.add-plus{font-size:15px;font-weight:400;line-height:1}.new-task-input-wrap{flex-direction:column;gap:6px;display:flex}.new-task-textarea{border:1.5px solid var(--col-color,#6c63ff);resize:none;color:#111;width:100%;box-shadow:0 0 0 3px color-mix(in srgb, var(--col-color,#6c63ff) 12%, transparent);background:#fff;border-radius:10px;outline:none;padding:9px 11px;font-family:inherit;font-size:13px;line-height:1.5}.new-task-textarea::placeholder{color:#bbb}.new-task-actions{gap:6px;display:flex}.confirm-btn{background:var(--col-color,#6c63ff);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:5px 14px;font-size:12px;font-weight:700;transition:opacity .15s}.confirm-btn:hover{opacity:.85}.cancel-btn{color:#888;cursor:pointer;background:0 0;border:1.5px solid #e0e0e0;border-radius:8px;padding:5px 12px;font-size:12px;font-weight:500;transition:all .15s}.cancel-btn:hover{color:#444;border-color:#bbb}.weekly{background:#fff;border-radius:16px;margin-top:24px;padding:20px 24px 24px;box-shadow:0 1px 3px #0000000f}.weekly-header{align-items:baseline;gap:12px;margin-bottom:20px;display:flex}.weekly-title{color:#333;font-size:13px;font-weight:700}.weekly-total{color:#888;font-size:12px}.weekly-chart{gap:6px;display:flex}.y-axis{flex-shrink:0;width:34px;height:400px;margin-top:20px;margin-bottom:33px;position:relative}.y-label{color:#bbb;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:9px;line-height:1;position:absolute;right:0}.weekly-bars{flex:1;grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.day-col{cursor:pointer;flex-direction:column;align-items:center;gap:4px;display:flex}.day-col-selected .bar-area{border-radius:6px;outline:2px solid #6c63ff}.day-detail{border-top:1px solid #f0f0f0;margin-top:20px;padding-top:16px}.day-detail-header{align-items:baseline;gap:10px;margin-bottom:12px;display:flex}.day-detail-date{color:#333;font-size:13px;font-weight:700}.day-detail-total{color:#888;font-variant-numeric:tabular-nums;font-size:12px}.day-detail-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.day-detail-item{background:#f7f8fa;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;display:flex}.day-detail-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.day-detail-text{color:#333;flex:1;font-size:13px}.day-detail-time{color:#6c63ff;font-variant-numeric:tabular-nums;font-size:12px;font-weight:700}.day-detail-empty{color:#bbb;margin:0;font-size:13px}.bar-time-label{font-variant-numeric:tabular-nums;letter-spacing:.2px;height:16px;font-size:10.5px;font-weight:700;line-height:16px}.bar-area{background:#f3f4f6;border-radius:6px;width:100%;height:400px;position:relative;overflow:hidden}.grid-line-h{pointer-events:none;background:#e5e7eb;height:1px;position:absolute;left:0;right:0}.bar{width:50%;transition:height .4s;position:absolute;left:50%;transform:translate(-50%)}.day-col.today .bar{background:#6c63ff}.day-col.sat .day-label,.day-col.sat .day-date{color:#3b82f6}.day-col.sun .day-label,.day-col.sun .day-date{color:#ef4444}.day-label{color:#555;font-size:12px;font-weight:700}.day-col.today .day-label{color:#6c63ff}.day-date{color:#bbb;font-size:10px}@media (width<=800px){.app{padding:20px 16px 60px}.board{grid-template-columns:1fr}}