/* ============================================================
   유스카이 MAP — 오늘 할일 알림 스타일
   경로 : /map/todo.css
   브랜드 : USKY 네이비 + 코발트 + 라임
   ============================================================ */
:root{
  --td-nv:#1e3a8a; --td-nv2:#2563eb; --td-deep:#0A1330; --td-lime:#aee63b;
  --td-line:#e2e6ef; --td-line2:#eef1f7; --td-muted:#6b7280; --td-faint:#9aa3b2;
  --td-ok:#15803d; --td-ok-bg:#dcfce7;
  --td-warn:#a16207; --td-warn-bg:#fef3c7;
  --td-err:#b91c1c; --td-err-bg:#fee2e2;
}

/* 확인 전 메뉴 잠금 — 팝업만 쓸 수 있다 */
body.todo-locked #side,
body.todo-locked .content,
body.todo-locked .top .search,
body.todo-locked .top .me > *:not(#todoBadge){
  pointer-events:none; user-select:none; filter:grayscale(.35) blur(1.2px); opacity:.55;
}
body.todo-locked{overflow:hidden}

/* ---------- 상단 배지 ---------- */
.todo-badge{display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:700;
  padding:6px 12px;border-radius:14px;margin-right:10px;font-family:inherit}
.todo-badge b{background:#fff;color:var(--td-nv);border-radius:9px;padding:1px 7px;font-size:12px}
.todo-badge i{font-style:normal;background:var(--td-err);color:#fff;border-radius:9px;
  padding:1px 7px;font-size:11px}
.todo-badge.on{background:var(--td-warn-bg);color:#7a4a06}
.todo-badge.on b{background:#7a4a06;color:#fff}
.todo-badge.hot{background:var(--td-err);color:#fff;animation:tdPulse 1.6s ease-in-out infinite}
.todo-badge.hot b{background:#fff;color:var(--td-err)}
.todo-badge.done{background:rgba(174,230,59,.22);color:#dff5a8}
@keyframes tdPulse{0%,100%{box-shadow:0 0 0 0 rgba(185,28,28,.55)}50%{box-shadow:0 0 0 7px rgba(185,28,28,0)}}

/* ---------- 팝업 ---------- */
.td-bg{position:fixed;inset:0;background:rgba(10,19,48,.62);z-index:900;
  display:flex;align-items:center;justify-content:center;padding:18px;
  font-family:"Malgun Gothic",AppleSDGothicNeo,"Noto Sans KR",sans-serif}
.td-box{background:#fff;border-radius:13px;width:100%;max-width:720px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35);
  color:#1f2937;font-size:14px}
.td-box.wide{max-width:900px}

.td-head{display:flex;align-items:center;gap:10px;background:var(--td-deep);color:#fff;
  padding:15px 20px}
.td-head b{font-size:17px;font-weight:800;display:block;letter-spacing:-.02em}
.td-head b::before{content:"";display:inline-block;width:4px;height:16px;background:var(--td-lime);
  margin-right:9px;vertical-align:-2px;border-radius:2px}
.td-head span{display:block;font-size:12px;color:#9fb0d8;margin-top:3px;padding-left:13px}
.td-head .sp{flex:1}
.td-x{background:rgba(255,255,255,.16);border:0;color:#fff;border-radius:7px;
  padding:7px 14px;font-size:12.5px;cursor:pointer;font-family:inherit}
.td-x:hover{background:rgba(255,255,255,.26)}

.td-body{padding:16px 20px;overflow:auto;flex:1}

.td-warn{background:var(--td-warn-bg);border-left:4px solid #d9a441;border-radius:7px;
  padding:11px 14px;margin-bottom:13px}
.td-warn.block{background:var(--td-err-bg);border-left-color:var(--td-err)}
.td-warn b{display:block;font-size:14.5px;color:#7a4a06}
.td-warn.block b{color:var(--td-err)}
.td-warn span{display:block;font-size:12.5px;color:var(--td-muted);margin-top:3px}

.td-kpi{display:flex;gap:8px;margin-bottom:13px}
.td-kpi>div{flex:1;background:var(--td-line2);border-radius:8px;padding:9px 12px;
  font-size:11.5px;color:var(--td-muted);font-weight:700}
.td-kpi>div i{display:block;font-style:normal;font-size:21px;color:var(--td-nv);font-weight:800}
.td-kpi>div.bad{background:var(--td-err-bg)}
.td-kpi>div.bad i{color:var(--td-err)}

/* ---------- 할일 한 줄 ---------- */
.td-list{display:flex;flex-direction:column;gap:7px}
.td-item{border:1px solid var(--td-line);border-left:3px solid var(--td-line);
  border-radius:8px;padding:10px 13px;background:#fff}
.td-item.high{border-left-color:#d9a441;background:#fffdf6}
.td-item.critical{border-left-color:var(--td-err);background:#fffafa}
.td-item.over{border-left-style:dashed}
.td-item.s-done{opacity:.6;background:#fafbfd}
.td-item.s-skip{opacity:.6;background:#fafbfd}
.td-item .t{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.td-item .t b{font-size:14px}
.td-item .d{font-size:12.5px;color:var(--td-muted);margin-top:5px;line-height:1.6}
.td-item .d.ok{color:var(--td-ok)}
.td-item .d.skip{color:var(--td-warn)}
.td-item .a{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}

.pri{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:10px;
  background:var(--td-line2);color:var(--td-muted);flex:none}
.pri.high{background:var(--td-warn-bg);color:#7a4a06}
.pri.critical{background:var(--td-err);color:#fff}
.tag{font-size:10.5px;padding:2px 8px;border-radius:10px;background:var(--td-line2);
  color:var(--td-muted);flex:none}
.tag.ok{background:var(--td-ok-bg);color:var(--td-ok);font-weight:700}
.tag.over{background:var(--td-err-bg);color:var(--td-err);font-weight:700}
.tag.warn{background:var(--td-warn-bg);color:#7a4a06;font-weight:700}
.tag.skip{background:var(--td-line2);color:var(--td-muted)}
.tag.prog{background:#dbeafe;color:var(--td-nv)}

.td-empty{text-align:center;padding:26px 14px;color:var(--td-muted);font-size:13px;
  background:var(--td-ok-bg);border-radius:9px}
.td-empty b{display:block;font-size:15px;color:var(--td-ok);margin-bottom:4px}

.td-done{margin-top:11px;border-top:1px solid var(--td-line);padding-top:10px}
.td-done summary{cursor:pointer;font-size:12.5px;color:var(--td-muted);margin-bottom:7px;
  font-weight:700}
.td-done summary span{display:block;font-weight:400;font-size:11.5px;color:var(--td-faint);
  margin-top:2px;margin-left:16px}
.td-done .td-item{margin-bottom:6px}

/* 되돌리기 — 처리한 할일에서 눈에 띄어야 한다 */
.td-b.undo{background:#fff;border-color:#c3a3d8;color:#6b21a8}
.td-b.undo:hover{background:#f6effa}
.undohint{font-size:11.5px;color:var(--td-faint);align-self:center}

/* 사유 입력창 */
.td-bg.ask{z-index:950}
.td-box.ask{max-width:520px}
.td-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.td-presets .td-b{font-weight:400;font-size:12px;padding:5px 11px}

.td-add{display:flex;gap:6px;margin-top:13px;padding-top:12px;border-top:1px dashed var(--td-line)}
.td-add input{flex:1}
.td-add select{width:90px}

/* ---------- 버튼 · 입력 ---------- */
.td-b{border:1px solid var(--td-line);background:#fff;color:#374151;border-radius:7px;
  padding:6px 13px;font-size:12.5px;cursor:pointer;font-family:inherit;font-weight:700;
  white-space:nowrap;flex:none}
.td-b:hover{background:var(--td-line2)}
.td-b.main{background:var(--td-nv);border-color:var(--td-nv);color:#fff}
.td-b.main:hover{background:var(--td-nv2)}
.td-b.ok{background:var(--td-ok);border-color:var(--td-ok);color:#fff}
.td-b.r{background:var(--td-err);border-color:var(--td-err);color:#fff}
.td-b.g{background:#fff}
.td-b:disabled{opacity:.5;cursor:default}

.td-bg input,.td-bg select,.td-bg textarea,.td-mg input,.td-mg select,.td-mg textarea{
  border:1px solid var(--td-line);border-radius:7px;padding:7px 10px;font-size:13px;
  font-family:inherit;color:#1f2937;background:#fff;width:100%;box-sizing:border-box}
.td-bg textarea{resize:vertical}
.td-bg label.f2,.td-mg label.f2{display:block;font-size:11.5px;font-weight:700;
  color:var(--td-muted);margin:10px 0 4px}

.td-foot{display:flex;align-items:center;gap:10px;padding:13px 20px;
  border-top:1px solid var(--td-line);background:#fafbfd;flex-wrap:wrap}
.td-foot .td-b.main{padding:10px 20px;font-size:13.5px}
.td-note{font-size:11.5px;color:var(--td-faint);flex:1;min-width:200px}
.td-note2{font-size:12px;color:var(--td-muted);background:var(--td-line2);
  border-radius:7px;padding:9px 12px;margin-top:12px}

.td-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.td-days{display:flex;gap:10px;flex-wrap:wrap}
.td-days label{display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer}
.td-days input{width:auto}

/* ---------- 관리 화면 ---------- */
.td-mg{font-size:14px;color:#1f2937}
.td-mg h2{font-size:16px;margin:22px 0 10px;display:flex;align-items:center;gap:10px}
.td-mg h2:first-child{margin-top:0}
.td-mg h2 span{font-size:12px;color:var(--td-muted);font-weight:400}
.td-mg h2 .td-b{margin-left:auto}
.td-mg .f{font-size:11.5px;color:var(--td-faint)}

.td-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.td-card{border:1px solid var(--td-line);border-radius:9px;padding:11px 13px;background:#fff}
.td-card.bad{border-color:#e8c08a;background:#fffdf7}
.td-card.ok{border-color:#9fd4b0;background:#fbfffc}
.td-card .n{font-weight:700;font-size:14px;display:flex;align-items:baseline;gap:7px}
.td-card .n span{font-size:11.5px;color:var(--td-faint);font-weight:400}
.td-card .b{height:7px;background:var(--td-line2);border-radius:4px;overflow:hidden;margin:8px 0 6px}
.td-card .b i{display:block;height:100%;background:var(--td-ok);border-radius:4px}
.td-card .s{font-size:11.5px;color:var(--td-muted)}
.td-card .s b{color:var(--td-warn)}
.td-card .s b.r{color:var(--td-err)}

.td-tb{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.td-tb th,.td-tb td{border:1px solid var(--td-line);padding:7px 10px;text-align:left;
  vertical-align:top}
.td-tb th{background:var(--td-deep);color:#fff;font-weight:700;font-size:12px;white-space:nowrap}
.td-tb tr.off{background:#fafbfd;opacity:.6}

.td-set{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;
  background:#fafbfd;border:1px solid var(--td-line);border-radius:9px;padding:13px}
.td-set label{display:block;font-size:11.5px;font-weight:700;color:var(--td-muted)}
.td-set label input,.td-set label select{margin-top:4px}
.td-row{display:flex;gap:9px;align-items:center;margin-top:11px;flex-wrap:wrap}

@media (max-width:720px){
  .td-g3,.td-set{grid-template-columns:1fr}
  .td-kpi{flex-wrap:wrap}
  .td-box{max-height:94vh}
  .td-add{flex-wrap:wrap}
  .td-add select{width:100%}
}