@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
:root {
  font-family:'DM Sans','Noto Sans KR',sans-serif;
  color:#292929;background:#ffffff;font-synthesis:none;
  --strong:#111111;--accent:#242424;--muted:#6b6b6b;--line:#eeeeee;
}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit;transition:background .15s,color .15s}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
header{height:64px;padding:0 max(24px,calc((100vw - 1000px)/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line);gap:16px}
.brand{display:flex;align-items:center;gap:9px;color:#242424;text-decoration:none;font-size:19px;font-weight:700;letter-spacing:-.6px}.logo{display:grid;place-items:center;width:28px;height:28px;color:white;background:var(--accent);border-radius:8px;font-size:20px}.brand-sub{font-size:10px;font-weight:500;letter-spacing:1.1px;color:#808080;margin-left:12px;padding-left:20px;border-left:1px solid #e6e6e6}
.outline{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e6e6e6;border-radius:8px;padding:8px 12px;min-height:36px;background:#fff;font-size:12px;font-weight:500}.outline:hover{background:#f5f5f5}
main{max-width:1048px;margin:28px auto 0;padding:0 24px}.heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}h1{margin:0;color:#242424;font-size:23px;font-weight:700;line-height:1.4;letter-spacing:-.8px}
.composer{background:white;border:1px solid #dedede;border-radius:12px;overflow:hidden;transition:border-color .15s,box-shadow .15s}.composer:focus-within{border-color:#777777;box-shadow:0 0 0 3px #24242408}.input-row{display:flex;align-items:center;gap:12px;padding:10px 14px}.plus{color:var(--accent);font-size:24px;line-height:1}input,textarea,select{min-width:0;border:1px solid #dedede;background:#fff;border-radius:8px;padding:10px 12px;color:#292929}input::placeholder,textarea::placeholder{color:#808080}#new-title{flex:1;width:100%;border:0;background:none;padding:7px 0;font-size:14px;outline:none;line-height:1.6}.primary{min-height:36px;padding:9px 16px;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;white-space:nowrap}.primary:hover{background:var(--strong)}.primary span{margin-left:10px;opacity:.7}.composer-meta{display:flex;align-items:center;gap:18px;min-height:37px;padding:4px 15px 6px;border-top:1px solid #f5f5f5;font-size:12px;color:var(--muted)}#new-project{width:170px;padding:3px 0;border:0;font-size:12px}.priority-toggle{display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer}.priority-toggle input{accent-color:var(--accent);width:14px;height:14px;margin:0 3px 0 0}.hint{margin-left:auto;font-size:11px;color:#808080}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;border-bottom:1px solid #e6e6e6}nav{display:flex;gap:20px}nav button{position:relative;display:flex;align-items:center;gap:6px;padding:13px 2px;font-size:13px;color:var(--muted);white-space:nowrap}nav button:hover{color:var(--strong)}nav button.active{font-weight:600;color:var(--strong)}nav button.active:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}nav span{min-width:19px;border-radius:5px;padding:1px 4px;background:#eeeeee;text-align:center;font-size:10px;font-weight:500;font-variant-numeric:tabular-nums}nav .active span{background:#eeeeee;color:var(--strong)}#search{width:190px;padding:7px 10px;border:1px solid #e6e6e6;background:#fff;font-size:12px;border-radius:7px;margin-bottom:7px}
.list-caption{display:flex;align-items:center;justify-content:space-between;margin:12px 0 8px;color:var(--muted);font-size:11px}.text-button{padding:6px;font-size:11px;color:var(--muted);border-radius:5px}.text-button:hover{background:#f5f5f5;color:var(--strong)}.column-head{display:grid;grid-template-columns:minmax(0,1fr) 100px 64px 88px 76px;gap:16px;padding:10px 16px 10px 52px;background:#fafafa;border:1px solid var(--line);border-bottom:0;border-radius:9px 9px 0 0;color:#6b6b6b;font-size:11px}.column-head span:last-child{text-align:center}#tasks{background:#fff;border:1px solid var(--line);border-radius:0 0 9px 9px;overflow:hidden}.task{display:grid;grid-template-columns:20px minmax(0,1fr) 100px 64px 88px 76px;gap:16px;align-items:center;min-height:52px;padding:11px 16px;border-bottom:1px solid #eeeeee;transition:background .15s}.task:last-child{border-bottom-color:transparent}.task:hover{background:#fafafa}.check{width:20px;height:20px;position:relative;border:1.5px solid #cccccc;border-radius:6px;padding:0;color:transparent;font-size:12px}.check:before{content:'';position:absolute;inset:-6px}.check:hover{border-color:var(--accent);color:#777777;background:#f5f5f5}.done .check{background:var(--accent);border-color:var(--accent);color:#fff}.task-main{min-width:0;width:100%;text-align:left;padding:2px 0}.task-heading{display:flex;align-items:center;gap:8px;min-width:0}.task-heading .task-title{flex:1;min-width:0}.task-heading .agent-tag{font-size:10px;font-weight:400;white-space:nowrap}.task-title{display:block;color:#292929;font-size:14px;font-weight:500;line-height:1.6;overflow-wrap:anywhere}.task-main:hover .task-title{color:var(--strong)}.done .task-title{color:#808080;text-decoration:line-through}.task-meta{display:flex;align-items:center;gap:8px;min-width:0;color:#808080;font-size:10px;margin-top:4px}.task-notes{display:block;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;line-height:1.6;color:var(--muted)}.agent-tag{color:#6b6b6b;flex-shrink:0}.task-details{display:contents}.project-cell{font-size:12px;color:#6b6b6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.created-cell{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.priority-cell{font-size:11px;color:#808080}.priority-cell.high{color:#444444;font-weight:500}.state{display:inline-flex;justify-content:center;align-items:center;justify-self:center;min-width:60px;min-height:28px;padding:4px 9px;background:#f5f5f5;color:#6b6b6b;font-size:11px;font-weight:500;border-radius:5px;white-space:nowrap}.state.todo:hover{background:#e9e9e9;color:var(--strong)}.state.doing{background:#e9e9e9;color:#111111}.state.doing:hover{background:#dedede}.state.completed{background:#f5f5f5;color:#6b6b6b}
.empty{padding:32px 20px;text-align:center}.empty h3{font-size:14px;font-weight:500;margin:0 0 7px;color:#555555}.empty p{font-size:12px;margin:0;color:#808080;line-height:1.8}#message{font-size:12px;color:#b45b28;line-height:1.7;margin-top:12px}#message:empty{display:none}footer{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin:16px 0 28px;font-size:11px;color:#808080}footer>span{display:flex;align-items:center;gap:6px}kbd{font:10px 'DM Sans',sans-serif;padding:1px 4px;background:#fff;border:1px solid #e6e6e6;border-radius:4px}.keyboard-hint>span{margin:0 3px}
dialog{width:min(480px,calc(100% - 32px));max-height:90dvh;border:1px solid #e6e6e6;border-radius:16px;padding:26px;background:#fff;color:#292929;box-shadow:0 18px 80px #00000020}dialog::backdrop{background:#00000055;backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}h2{margin:0;font-size:20px;color:#242424;letter-spacing:-.5px}.close{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:#808080;font-size:25px}.close:hover{background:#f5f5f5}dialog p{color:#6b6b6b;font-size:13px;line-height:1.8}dialog label{display:flex;flex-direction:column;gap:8px;margin:16px 0;color:#6b6b6b;font-size:12px;font-weight:500}dialog input,dialog textarea,dialog select{width:100%;font-size:14px;line-height:1.6}textarea{resize:vertical}.fields{display:flex;gap:12px}.fields label{flex:1;min-width:0}.dialog-actions{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.danger{padding:9px 12px;border-radius:7px;color:#d14343;font-size:13px}.danger:hover{background:#fff0f0}.wide{width:100%;margin:12px 0}details{padding:16px 0;border-bottom:1px solid var(--line);font-size:12px}summary{cursor:pointer;color:#555555}code{font-size:12px;overflow-wrap:anywhere}.key-notice{margin-top:18px;padding:14px;background:#f7f7f7;border-radius:9px;font-size:12px;color:#6b6b6b;line-height:1.8}#export{margin-top:18px;color:var(--strong)}
@media(max-width:700px){
 header{height:60px;padding:0 16px}.brand-sub{display:none}#connect{min-height:40px}
 main{padding:0 16px;margin-top:18px}h1{font-size:21px}.heading{margin-bottom:14px}
 .hint,.keyboard-hint{display:none}.composer{border-radius:10px}.input-row{gap:8px;padding:8px 10px}
 .plus{font-size:22px}#new-title{font-size:16px;min-height:44px}.primary{min-height:44px;padding:10px 14px}.primary span{display:none}
 .composer-meta{gap:12px;padding:2px 12px;min-height:44px}#new-project{flex:1;width:0;min-height:40px;font-size:16px}#new-project::placeholder{font-size:13px}
 .priority-toggle{min-height:40px;font-size:12px}.priority-toggle input{width:16px;height:16px}
 .toolbar{margin-top:16px;flex-wrap:wrap;gap:6px}nav{gap:16px;order:2;width:100%;justify-content:flex-start}nav button{min-height:44px;padding:10px 4px;font-size:13px}
 #search{width:100%;margin:0;min-height:42px;font-size:16px;background-color:#fff}#search::placeholder{font-size:13px}
 .list-caption{margin:8px 0 4px;font-size:12px}#refresh{min-height:40px;padding:8px 4px;font-size:12px}
 .column-head{display:none}#tasks{border-radius:10px}
 .task{grid-template-columns:24px minmax(0,1fr) 62px;gap:4px 10px;padding:12px;min-height:62px}
 .check{grid-column:1;grid-row:1;align-self:center;width:24px;height:24px;margin:0}.check:before{inset:-8px}
 .task-main{grid-column:2;grid-row:1}
 .task-title{font-size:15px;line-height:1.6}.task-meta{margin-top:3px;gap:6px}.task-notes{font-size:13px;line-height:1.6}
 .state{grid-column:3;grid-row:1;align-self:center;position:relative;min-height:28px;min-width:54px;font-size:11px;padding:4px 7px}
 button.state::before{content:"";position:absolute;inset:-8px 0}
 .task-details{grid-column:2 / -1;grid-row:2;display:grid;grid-template-columns:32px 108px minmax(0,1fr);align-items:center;gap:8px;min-width:0}.task-details .priority-cell{grid-column:1;grid-row:1}.task-details .created-cell{grid-column:2;grid-row:1}.task-details .project-cell{grid-column:3;grid-row:1}
 .created-cell{font-size:11px}.created-cell:before{content:"작성 ";color:#808080}.project-cell{font-size:12px;max-width:100%}.project-cell.is-empty{display:none}.priority-cell{font-size:11px}
 footer{display:none}
 dialog{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:calc(100dvh - 16px);padding:20px 20px max(20px,env(safe-area-inset-bottom));border-radius:18px 18px 0 0;overflow-y:auto;overscroll-behavior:contain}
 .dialog-head{margin-bottom:12px;min-height:44px}.close{width:44px;height:44px}.dialog-head h2{font-size:19px}
 dialog label{font-size:13px;margin:14px 0}dialog input,dialog textarea,dialog select{font-size:16px;font-weight:400;min-height:44px}dialog textarea{min-height:120px}
 .fields{gap:10px}.dialog-actions{position:sticky;bottom:0;background:#fff;margin-top:12px;padding-top:12px;gap:12px}.dialog-actions .primary{flex:1}.danger{min-height:44px;padding:10px 18px}
 dialog .outline{min-height:44px}summary{min-height:32px;padding:6px 0}#export{min-height:44px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media(min-width:701px){.column-head span:nth-child(3),.column-head span:nth-child(4),.priority-cell,.created-cell{text-align:left}}

#edit-notes::placeholder{font-weight:400}

.close{font-family:Arial,sans-serif;font-weight:400;font-size:24px;line-height:1}

#search{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:11px center;background-size:18px 18px;padding-left:36px}

#new-project:focus,#new-project:focus-visible{outline:none}

.task:not(:has(.task-notes)){min-height:60px;padding-top:15px;padding-bottom:15px}


#connect{gap:6px;line-height:18px}#connect .connect-icon{display:block;width:16px;height:16px;flex:none}#connect>span{display:block;line-height:18px}

.task{position:relative;padding-left:50px}
.column-head{padding-left:86px}
.drag-handle{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:grid;place-items:center;color:#b5b5b5;cursor:grab;touch-action:none;font-size:18px;user-select:none;border-radius:4px}
.drag-handle:focus-visible{color:#555;background:#f5f5f5;outline:1px solid #777;outline-offset:-3px}
.drag-handle::before{content:"";position:absolute;inset:-8px 0}
@media(hover:hover){.drag-handle:hover{color:#555;background:#f5f5f5}}
.task.is-dragging{background:#f5f5f5;opacity:.65}
.task.drop-before{box-shadow:inset 0 2px #292929}
.task.drop-after{box-shadow:inset 0 -2px #292929}
.list-tools{display:flex;align-items:center;gap:10px}
@media(max-width:700px){.task{padding-left:50px}.list-tools .text-button{min-height:40px}.drag-handle{left:12px}}

/* Mobile rows share explicit columns, including the drag handle. */
@media(max-width:700px){
 .task{grid-template-columns:28px 24px minmax(0,1fr) 54px;column-gap:8px;padding-left:6px;padding-right:12px}
 .drag-handle{position:relative;left:auto;top:auto;transform:none;grid-column:1;grid-row:1;align-self:center}
 .check{grid-column:2;grid-row:1}
 .task-main{grid-column:3;grid-row:1}
 .state{grid-column:4;grid-row:1}
 .task-details{grid-column:3 / -1;grid-template-columns:32px 100px minmax(0,1fr)}
 .task-heading{flex-wrap:wrap;gap:2px}
 .task-heading .task-title{flex-basis:100%}
}