.todo-manager{position:relative;display:grid;gap:10px}
.todo-manager-open .top-work-info{display:none}
.todo-manager-open .portal-heading{display:block}
.todo-toolbar{position:relative;z-index:20;display:flex;height:0;justify-content:flex-end}
.todo-month-control{position:absolute;top:-68px;right:130px;display:grid;width:234px;grid-template-columns:42px 150px 42px;align-items:center;overflow:hidden;border:1px solid #d8d0c5;border-radius:13px;background:#fff;box-shadow:0 8px 22px rgba(32,39,49,.05)}
.todo-month-control button{height:44px;border:0;background:#fff;color:#153b68;font-size:23px;cursor:pointer}
.todo-month-control button:hover{background:#f4f0e9}
.todo-month-control input{width:100%;height:44px;border:0;border-right:1px solid #eee7de;border-left:1px solid #eee7de;padding:0 8px;color:#173552;background:#fff;text-align:center;font-weight:850}
.todo-status{min-height:18px;color:#617286;font-size:11px}
.todo-status:empty{display:none}
.todo-status.error{color:#a94444}

.todo-workbench,.todo-project-workbench{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
.todo-workbench.has-detail,.todo-project-workbench.has-detail{grid-template-columns:minmax(280px,.85fr) minmax(420px,1.15fr)}
.todo-list-panel,.todo-detail-panel,.todo-project-panel{overflow:hidden;border:1px solid #ddd5ca;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(32,39,49,.05)}
.todo-list-head,.todo-project-head{display:flex;min-height:46px;align-items:center;justify-content:space-between;gap:12px;padding:9px 13px;border-bottom:1px solid #e8e1d7;background:#fbf7ef}
.todo-head-title{display:flex;align-items:center;gap:12px}
.todo-list-head h3,.todo-project-head h3{margin:0;color:#173552;font-size:17px;letter-spacing:-.035em}
.todo-column-dot{width:8px;height:8px;border-radius:50%;background:#e58a32;box-shadow:0 0 0 4px rgba(229,138,50,.13)}
.todo-task-list{min-height:clamp(330px,48vh,560px);padding:9px;background:#fcfbf8}
.todo-list{display:grid;gap:7px}
.todo-completed-group{margin-top:10px;padding-top:9px;border-top:1px solid #e8e1d7}
.todo-completed-label{margin:0 3px 7px;color:#768596;font-size:9px;font-weight:900;letter-spacing:.02em}

.todo-card,.todo-project-card{display:grid;grid-template-columns:30px minmax(0,1fr) 28px;align-items:center;gap:8px;min-height:48px;padding:7px 9px;border:1px solid #e4ddd3;border-radius:9px;background:#fff;box-shadow:0 3px 10px rgba(32,39,49,.025);cursor:pointer;transition:border-color .15s,box-shadow .15s,opacity .15s,background .15s}
.todo-card:hover,.todo-project-card:hover{border-color:#aebfce;box-shadow:0 6px 15px rgba(32,52,76,.07)}
.todo-card.is-selected,.todo-project-card.is-selected{border-color:#52789d;box-shadow:0 0 0 2px rgba(66,105,145,.14)}
.todo-card.is-dragging,.todo-project-card.is-dragging{opacity:.42;border-color:#6f8eae}
.todo-check{display:grid;width:25px;height:25px;place-items:center;border:1px solid #aebdca;border-radius:50%;color:transparent;background:#fff;cursor:pointer}
.todo-check:hover{border-color:#4b718f;color:#9eb1c1}
.todo-check[aria-pressed="true"]{border-color:#3f8479;color:#fff;background:#4b8c81}
.todo-check span{font-size:12px;font-weight:950}
.todo-copy{min-width:0}
.todo-copy strong{display:block;overflow:hidden;color:#142f4b;font-size:13px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.todo-card.is-completed .todo-copy strong,.todo-project-card.is-completed .todo-copy strong{color:#84909e;text-decoration:line-through;text-decoration-color:#a3adb7}
.todo-more{display:grid;width:26px;height:28px;place-items:center;border:0;border-radius:7px;color:#73869a;background:transparent;font-size:19px;line-height:1;cursor:pointer}
.todo-more:hover{background:rgba(255,255,255,.72);color:#173552}

.todo-tone-red{background:#fde8e7}
.todo-tone-orange{background:#ffeddc}
.todo-tone-yellow{background:#fff5c7}
.todo-tone-green{background:#e6f4e8}
.todo-tone-mint{background:#e1f5ef}
.todo-tone-sky{background:#e3f2fa}
.todo-tone-blue{background:#e5edfa}
.todo-tone-purple{background:#eee7f9}
.todo-tone-pink{background:#f9e6f0}
.todo-tone-gray{background:#edf0f3}

.todo-add-trigger{min-height:30px;padding:0 10px;border:1px solid #cfc4b6;border-radius:8px;color:#173552;background:#fff;font-size:9px;font-weight:900;cursor:pointer}
.todo-add-trigger:hover{border-color:#7990a8;background:#f4f8fb}
.todo-inline-create{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px}
.todo-header-create{padding:8px 10px;border-bottom:1px solid #e8e1d7;background:#f8f5ef}
.todo-inline-create input{width:100%;height:38px;border:1px solid #b9c4cf;border-radius:8px;padding:0 11px;color:#173552;background:#fff;font:750 12px/1 Pretendard,"Noto Sans KR",sans-serif;outline:none}
.todo-inline-create input:focus{border-color:#6b88a7;box-shadow:0 0 0 3px rgba(66,105,145,.1)}
.todo-inline-create button{height:32px;padding:0 10px;border-radius:7px;font-size:9px;font-weight:900;cursor:pointer}
.todo-create-cancel{border:1px solid #d2c8ba;color:#667486;background:#fff}
.todo-create-confirm{border:1px solid #153b68;color:#fff;background:#153b68}
.todo-inline-create button:disabled{opacity:.55;cursor:wait}

.todo-detail-panel{position:sticky;top:12px;display:flex;min-height:clamp(450px,56vh,680px);flex-direction:column;padding:9px}
.todo-detail-panel[hidden]{display:none}
.todo-detail-controls{display:flex;justify-content:flex-end;gap:6px;margin-bottom:7px}
.todo-detail-controls button{height:31px;padding:0 10px;border-radius:7px;font-size:9px;font-weight:900;cursor:pointer}
.todo-detail-controls #todoDetailClose{display:grid;width:31px;padding:0;place-items:center;border:0;color:#607286;background:#f0ece5;font-size:20px}
.todo-detail-delete{border:1px solid #dacbc4;color:#9b4b4b;background:#fff}
.todo-detail-textarea{display:block;width:100%;min-height:clamp(390px,50vh,620px);flex:1;resize:vertical;border:1px solid #d3cabf;border-radius:9px;padding:14px;color:#173552;background:#fff;font:700 13px/1.75 Pretendard,"Noto Sans KR",sans-serif;outline:none;white-space:pre-wrap}
.todo-detail-textarea:focus{border-color:#6b88a7;box-shadow:0 0 0 3px rgba(66,105,145,.1)}
.todo-detail-backdrop{display:none}

.todo-project-body{min-height:clamp(170px,26vh,310px);padding:9px;background:#fcfbf8}
.todo-project-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.todo-project-card{min-height:50px}
.todo-project-card .todo-copy strong{font-size:14px}
.todo-empty{display:flex;min-height:120px;align-items:center;justify-content:center;padding:20px;color:#87919c;text-align:center}
.todo-empty.error{color:#a94444}

.todo-color-menu{position:fixed;z-index:100050;width:218px;padding:12px;border:1px solid #d8d0c5;border-radius:12px;background:#fff;box-shadow:0 18px 44px rgba(17,31,48,.2)}
.todo-color-menu>strong{display:block;margin-bottom:9px;color:#173552;font-size:11px}
.todo-color-options{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.todo-color-swatch{width:32px;height:32px;border:1px solid rgba(23,53,82,.12);border-radius:9px;cursor:pointer}
.todo-color-swatch.is-selected{border-color:#173552;box-shadow:0 0 0 2px #fff,0 0 0 4px #173552}
.todo-color-clear{width:100%;height:30px;margin-top:10px;border:1px solid #d4cabc;border-radius:7px;color:#657487;background:#fff;font-size:9px;font-weight:850}
.todo-color-clear.is-selected{border-color:#173552;color:#173552;background:#eef3f8}

@media(max-width:1200px){
  .todo-workbench.has-detail,.todo-project-workbench.has-detail{grid-template-columns:minmax(240px,1fr) minmax(360px,420px)}
}
@media(max-width:860px){
  .todo-workbench.has-detail,.todo-project-workbench.has-detail{grid-template-columns:1fr}
  .todo-detail-panel{position:fixed;z-index:100020;top:0;right:0;bottom:0;width:min(94vw,520px);min-height:0;border-radius:16px 0 0 16px;overflow:auto;box-shadow:-18px 0 45px rgba(17,31,48,.24)}
  .todo-detail-textarea{min-height:calc(100dvh - 64px);resize:none}
  .todo-detail-backdrop:not([hidden]){display:block;position:fixed;z-index:100010;inset:0;border:0;background:rgba(16,29,44,.38)}
  body.todo-detail-open{overflow:hidden}
}
@media(max-width:760px){
  .todo-month-control{top:-55px;right:0;width:230px;grid-template-columns:40px 150px 40px}
  .todo-task-list{min-height:clamp(300px,46vh,480px)}
  .todo-project-list{grid-template-columns:1fr}
}
@media(max-width:420px){
  .todo-toolbar{height:44px}
  .todo-month-control{position:static;width:100%;grid-template-columns:40px 1fr 40px}
  .todo-inline-create{grid-template-columns:minmax(0,1fr) auto}
  .todo-create-cancel{display:none}
}