/* ===== 디자인 토큰 ===== */
:root {
  --brand-50:#f0f7f4; --brand-100:#dcebe4; --brand-200:#bcd8cb;
  --brand-300:#92bfac; --brand-400:#65a18a; --brand-600:#27664f;
  --brand-700:#1a5343; --brand-800:#154237;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151;
  --gray-900:#111827;
  --red-50:#fef2f2; --red-200:#fecaca; --red-500:#ef4444; --red-600:#dc2626; --red-700:#b91c1c;
  --amber-50:#fffbeb; --amber-600:#d97706; --amber-700:#b45309;
  --shadow-card:0 1px 2px rgba(16,24,40,.05);
  --shadow-hover:0 4px 12px rgba(16,24,40,.10);
  --radius:12px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body {
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Noto Sans KR",sans-serif;
  background:var(--gray-50); color:var(--gray-900);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
button { font:inherit; cursor:pointer; background:none; border:0; color:inherit; }
input,select,textarea { font:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
svg { display:block; }

/* ===== 레이아웃 ===== */
.app { min-height:100vh; }
.content { display:flex; flex-direction:column; min-height:100vh; }
.main { width:100%; max-width:1280px; margin:0 auto; padding:24px 16px; flex:1; }

/* 사이드바 */
.sidebar {
  position:fixed; inset:0 auto 0 0; width:240px; z-index:40;
  background:#fff; border-right:1px solid var(--gray-200);
  display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .2s ease;
}
.sidebar.open { transform:translateX(0); }
.drawer-dim { position:fixed; inset:0; background:rgba(17,24,39,.4); z-index:39; display:none; }
.drawer-dim.show { display:block; }
.sidebar-brand { display:flex; align-items:center; gap:10px; height:64px; padding:0 18px; border-bottom:1px solid var(--gray-100); position:relative; }
.brand-logo { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:var(--brand-700); color:#fff; flex-shrink:0; }
.brand-title { font-size:14px; font-weight:700; }
.brand-sub { font-size:11px; color:var(--gray-400); }
.drawer-close { position:absolute; right:10px; color:var(--gray-400); }
.sidebar-nav { flex:1; padding:16px 12px; display:flex; flex-direction:column; gap:4px; }
.nav-link {
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:10px; font-size:14px; font-weight:500; color:var(--gray-500);
}
.nav-link:hover { background:var(--gray-50); color:var(--gray-900); }
.nav-link.active { background:var(--brand-50); color:var(--brand-700); }
.sidebar-foot { border-top:1px solid var(--gray-100); padding:16px 18px; font-size:11px; color:var(--gray-400); line-height:1.6; }

/* 헤더 */
.header {
  position:sticky; top:0; z-index:20; height:64px;
  display:flex; align-items:center; gap:12px; padding:0 16px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--gray-200);
}
.header-search { position:relative; width:100%; max-width:380px; }
.search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--gray-400); pointer-events:none; display:flex; }
.header-search input {
  width:100%; height:36px; padding:0 12px 0 34px;
  border:1px solid var(--gray-200); border-radius:10px; background:var(--gray-50); outline:none;
}
.header-search input:focus { background:#fff; border-color:var(--brand-400); box-shadow:0 0 0 3px var(--brand-100); }
.header-right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.header-date { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--gray-500); }

/* ===== 공통 컴포넌트 ===== */
.btn {
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px;
  border-radius:10px; font-size:14px; font-weight:500; transition:background .15s, color .15s;
  border:1px solid transparent; white-space:nowrap;
}
.btn-primary { background:var(--brand-700); color:#fff; font-weight:600; box-shadow:var(--shadow-card); }
.btn-primary:hover { background:var(--brand-800); }
.btn-outline { border-color:var(--gray-200); color:var(--gray-600); background:#fff; }
.btn-outline:hover { background:var(--gray-50); }
.btn-danger-outline { border-color:var(--red-200); color:var(--red-600); background:#fff; }
.btn-danger-outline:hover { background:var(--red-50); }
.btn-danger { background:var(--red-600); color:#fff; font-weight:600; }
.btn-danger:hover { background:var(--red-700); }
.btn-sm { height:30px; padding:0 10px; font-size:12px; }
.icon-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; color:var(--gray-500); }
.icon-btn:hover { background:var(--gray-50); }

.card { background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius); box-shadow:var(--shadow-card); }
.section-card { padding:20px; }

.badge {
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:6px;
  font-size:12px; font-weight:500; white-space:nowrap;
}
.b-cat-bid{background:#eef2ff;color:#4f46e5} .b-cat-contract{background:#f0f9ff;color:#0284c7}
.b-cat-guarantee{background:#f5f3ff;color:#7c3aed} .b-cat-accounting{background:#ecfdf5;color:#059669}
.b-cat-certificate{background:#ecfeff;color:#0891b2} .b-cat-document{background:#f8fafc;color:#475569}
.b-cat-communication{background:#fff7ed;color:#ea580c} .b-cat-etc{background:var(--gray-100);color:var(--gray-500)}
.b-st-todo{background:var(--gray-100);color:var(--gray-600)} .b-st-inProgress{background:#eff6ff;color:#2563eb}
.b-st-hold{background:var(--amber-50);color:var(--amber-700)} .b-st-done{background:var(--brand-50);color:var(--brand-700)}
.b-st-cancelled{background:var(--gray-100);color:var(--gray-400)}
.b-pr-urgent{background:var(--red-50);color:var(--red-600)} .b-pr-high{background:#fff7ed;color:#ea580c}
.b-pr-normal{background:var(--gray-100);color:var(--gray-500)} .b-pr-low{background:#f8fafc;color:#94a3b8}
.b-plain-red{background:var(--red-50);color:var(--red-600)} .b-plain-amber{background:var(--amber-50);color:var(--amber-600)}

.field-label { display:block; margin-bottom:4px; font-size:12px; font-weight:500; color:var(--gray-500); }
.input, .select, .textarea {
  width:100%; height:36px; padding:0 10px; border:1px solid var(--gray-200);
  border-radius:10px; background:#fff; outline:none; font-size:14px;
}
.textarea { height:auto; padding:8px 10px; resize:vertical; }
.input:focus,.select:focus,.textarea:focus { border-color:var(--brand-400); box-shadow:0 0 0 3px var(--brand-100); }
.field-error { margin-top:4px; font-size:12px; color:var(--red-500); }

.empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px dashed var(--gray-200); border-radius:var(--radius); background:#fff;
  padding:40px 20px; text-align:center; color:var(--gray-400);
}
.empty .empty-text { margin-top:8px; font-size:14px; }
.empty .empty-hint { margin-top:4px; font-size:12px; color:var(--gray-300); }

.progress { height:6px; border-radius:99px; background:var(--gray-100); overflow:hidden; }
.progress > i { display:block; height:100%; border-radius:99px; background:var(--brand-600); transition:width .2s; }

/* 페이지 타이틀 */
.page-head h1 { font-size:20px; font-weight:700; }
.page-head p { margin-top:2px; font-size:14px; color:var(--gray-500); }
.page-head { margin-bottom:16px; }
.page-head-row { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px; }

/* ===== 대시보드 ===== */
.summary-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.summary-card { padding:18px; display:flex; flex-direction:column; gap:4px; }
.summary-card .s-label { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--gray-500); }
.summary-card .s-count { font-size:28px; font-weight:700; }
.summary-card .s-desc { font-size:11px; color:var(--gray-400); }
.summary-card.accent { background:var(--brand-700); border-color:var(--brand-700); color:#fff; }
.summary-card.accent .s-label,.summary-card.accent .s-desc { color:rgba(255,255,255,.75); }
.dash-grid { display:grid; grid-template-columns:1fr; gap:24px; margin-top:24px; }
.dash-col { display:flex; flex-direction:column; gap:24px; }
.sec-title { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; margin-bottom:12px; }
.sec-title .count { background:var(--gray-100); color:var(--gray-500); border-radius:5px; padding:1px 6px; font-size:11px; font-weight:600; }
.sec-title .note { font-size:12px; font-weight:400; color:var(--gray-400); }
.sec-title .ic { display:flex; color:var(--brand-600); }
.sec-title .ic.red { color:var(--red-500); }
.sec-title .ic.amber { color:#f59e0b; }
.task-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.rate-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.rate-num { font-size:24px; font-weight:700; color:var(--brand-700); }
.rate-num small { font-size:13px; font-weight:500; color:var(--gray-400); }
.rate-num.alt { color:var(--gray-700); }
.rate-label { font-size:11px; color:var(--gray-400); margin-bottom:6px; }
.stat-list { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.stat-list li { display:flex; align-items:center; justify-content:space-between; }
.stat-list .v { font-size:12px; font-weight:600; color:var(--gray-600); }
.stack-bar { display:flex; height:10px; border-radius:99px; overflow:hidden; margin-top:12px; background:var(--gray-100); }
.legend { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; font-size:11px; color:var(--gray-500); }
.legend i { display:inline-block; width:8px; height:8px; border-radius:99px; margin-right:4px; }
.done-list { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.done-list p.t { font-size:14px; font-weight:500; color:var(--gray-700); }
.done-list p.d { font-size:12px; color:var(--gray-400); }

/* ===== 업무 카드 ===== */
.task-card { padding:16px; cursor:pointer; transition:box-shadow .15s; position:relative; }
.task-card:hover { box-shadow:var(--shadow-hover); }
.task-card.urgent { border-color:var(--red-200); border-left:4px solid var(--red-500); }
.tc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.tc-badges { display:flex; flex-wrap:wrap; gap:6px; }
.tc-del { color:var(--gray-300); opacity:0; transition:opacity .15s; }
.task-card:hover .tc-del { opacity:1; }
.tc-del:hover { color:var(--red-500); }
.tc-title { margin-top:10px; font-size:15px; font-weight:600; line-height:1.4; }
.tc-confirm { margin-top:6px; display:flex; align-items:center; gap:4px; font-size:12px; color:var(--amber-600); }
.tc-meta { margin-top:10px; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--gray-500); }
.tc-meta span { display:inline-flex; align-items:center; gap:4px; }
.tc-meta .overdue { color:var(--red-600); font-weight:600; }
.tc-meta .due-today { color:var(--amber-600); font-weight:600; }
.tc-bottom { margin-top:12px; display:flex; align-items:flex-end; gap:12px; }
.tc-progress { flex:1; min-width:0; }
.tc-progress .row { display:flex; justify-content:space-between; font-size:11px; color:var(--gray-400); margin-bottom:4px; }
.tc-progress .pct { font-weight:600; color:var(--gray-600); }
.tc-none { font-size:11px; color:var(--gray-300); }
.quick-status { height:28px; font-size:12px; border:1px solid var(--gray-200); border-radius:8px; background:var(--gray-50); color:var(--gray-600); padding:0 6px; outline:none; flex-shrink:0; }

/* ===== 업무 목록 ===== */
.filters { padding:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; }
.filter-q { position:relative; flex:1; min-width:200px; }
.filter-q .search-icon { left:10px; }
.filter-q input { width:100%; height:36px; padding:0 10px 0 32px; border:1px solid var(--gray-200); border-radius:10px; background:var(--gray-50); outline:none; }
.filter-q input:focus { background:#fff; border-color:var(--brand-400); box-shadow:0 0 0 3px var(--brand-100); }
.filters select { width:auto; height:36px; padding:0 8px; border:1px solid var(--gray-200); border-radius:10px; background:#fff; font-size:14px; color:var(--gray-700); outline:none; }
.view-toggle { margin-left:auto; display:none; border:1px solid var(--gray-200); border-radius:10px; padding:2px; }
.view-toggle button { display:flex; align-items:center; justify-content:center; width:32px; height:30px; border-radius:8px; color:var(--gray-400); }
.view-toggle button.active { background:var(--brand-50); color:var(--brand-700); }

.table-wrap { overflow-x:auto; }
.task-table { width:100%; min-width:860px; border-collapse:collapse; font-size:14px; }
.task-table th { text-align:left; padding:12px; font-size:12px; font-weight:500; color:var(--gray-400); border-bottom:1px solid var(--gray-100); }
.task-table td { padding:12px; border-bottom:1px solid var(--gray-50); vertical-align:middle; }
.task-table tbody tr { cursor:pointer; }
.task-table tbody tr:hover { background:rgba(249,250,251,.7); }
.task-table tbody tr:last-child td { border-bottom:0; }
.task-table .t-title { font-weight:500; }
.task-table .t-title.urgent { color:var(--red-700); }
.task-table .t-sub { font-size:12px; color:var(--gray-400); margin-top:2px; }
.task-table .right { text-align:right; }
.task-table .small { font-size:12px; color:var(--gray-500); }
.task-table .overdue { color:var(--red-600); font-weight:600; }
.task-table .due-today { color:var(--amber-600); font-weight:600; }
.st-select { height:28px; border:0; border-radius:8px; font-size:12px; font-weight:500; padding:0 6px; outline:none; }
.mini-progress { display:flex; align-items:center; gap:6px; }
.mini-progress .progress { width:56px; }
.mini-progress span { font-size:11px; color:var(--gray-500); }
.row-del { color:var(--gray-300); }
.row-del:hover { color:var(--red-500); }

/* ===== 상세 ===== */
.detail-wrap { max-width:960px; margin:0 auto; }
.detail-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:16px; }
.detail-actions { display:flex; gap:8px; }
.detail-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.detail-main { display:flex; flex-direction:column; gap:16px; }
.detail-side { display:flex; flex-direction:column; gap:16px; }
.detail-card-urgent { border-color:var(--red-200); border-left:4px solid var(--red-500); }
.detail-title { margin-top:12px; font-size:20px; font-weight:700; }
.detail-confirm { margin-top:8px; display:flex; align-items:center; gap:6px; background:var(--amber-50); color:var(--amber-700); border-radius:10px; padding:8px 12px; font-size:14px; }
.detail-status { margin-top:16px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--gray-400); }
.detail-status select { width:auto; height:32px; }
.info-rows .row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--gray-50); }
.info-rows .row:last-child { border-bottom:0; }
.info-rows dt { font-size:12px; color:var(--gray-400); flex-shrink:0; }
.info-rows dd { font-size:14px; color:var(--gray-700); text-align:right; }
.memo-text { font-size:14px; color:var(--gray-600); white-space:pre-line; line-height:1.65; }
.none-text { font-size:12px; color:var(--gray-300); }
.cl-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cl-pct { font-size:12px; font-weight:600; color:var(--brand-700); }
.cl-bar { margin-bottom:12px; }

/* 체크리스트 */
.checklist li { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; }
.checklist li:hover { background:var(--gray-50); }
.cl-check {
  width:18px; height:18px; flex-shrink:0; border:1px solid var(--gray-300); border-radius:5px;
  display:flex; align-items:center; justify-content:center; background:#fff; color:transparent; padding:0;
}
.cl-check:hover { border-color:var(--brand-400); }
.cl-check.on { background:var(--brand-700); border-color:var(--brand-700); color:#fff; }
.cl-label { flex:1; font-size:14px; color:var(--gray-700); }
.cl-label.on { color:var(--gray-400); text-decoration:line-through; }
.cl-tools { display:none; gap:6px; }
.checklist li:hover .cl-tools { display:flex; }
.cl-tools button { color:var(--gray-300); display:flex; }
.cl-tools button:hover { color:var(--gray-500); }
.cl-tools button.del:hover { color:var(--red-500); }
.cl-edit-input { flex:1; height:28px; border:1px solid var(--brand-300); border-radius:8px; padding:0 8px; outline:none; font-size:14px; }
.cl-edit-tools { display:flex; gap:6px; }
.cl-edit-tools button { display:flex; color:var(--gray-400); }
.cl-edit-tools .save { color:var(--brand-700); }
.cl-add-row { display:flex; gap:8px; margin-top:8px; }
.cl-add-row input { flex:1; height:32px; border:1px solid var(--gray-200); border-radius:10px; background:var(--gray-50); padding:0 10px; outline:none; font-size:14px; }
.cl-add-row input:focus { background:#fff; border-color:var(--brand-400); box-shadow:0 0 0 3px var(--brand-100); }
.cl-empty { font-size:12px; color:var(--gray-400); }

/* ===== 템플릿 ===== */
.tpl-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.tpl-card { padding:20px; display:flex; flex-direction:column; transition:box-shadow .15s; }
.tpl-card:hover { box-shadow:var(--shadow-hover); }
.tpl-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.tpl-name { margin-top:8px; font-size:15px; font-weight:600; }
.tpl-desc { margin-top:2px; font-size:12px; color:var(--gray-400); }
.tpl-count { margin-top:12px; display:flex; align-items:center; gap:4px; font-size:11px; color:var(--gray-400); }
.tpl-items { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.tpl-items li { display:flex; align-items:flex-start; gap:8px; font-size:14px; color:var(--gray-600); }
.tpl-items .num { width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--gray-100); color:var(--gray-400); border-radius:5px; font-size:10px; font-weight:600; margin-top:2px; }

/* ===== 달력 ===== */
.cal-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.cal-title { font-size:18px; font-weight:700; }
.cal-nav { display:flex; align-items:center; gap:4px; }
.cal-nav .icon-btn { border:1px solid var(--gray-200); background:#fff; width:32px; height:32px; }
.calendar { overflow:hidden; }
.cal-dow { display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--gray-100); }
.cal-dow span { padding:8px 0; text-align:center; font-size:12px; font-weight:600; color:var(--gray-500); }
.cal-dow .sun { color:var(--red-500); }
.cal-dow .sat { color:#2563eb; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-cell { min-height:92px; padding:6px; border-bottom:1px solid var(--gray-100); border-right:1px solid var(--gray-100); overflow:hidden; }
.cal-cell:nth-child(7n) { border-right:0; }
.cal-grid .cal-cell:nth-last-child(-n+7) { border-bottom:0; }
.cal-cell.other { background:var(--gray-50); }
.cal-cell.other .cal-day { color:var(--gray-300); }
.cal-day { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:99px; font-size:12px; font-weight:600; color:var(--gray-600); }
.cal-day.sun { color:var(--red-500); }
.cal-day.sat { color:#2563eb; }
.cal-day.today { background:var(--brand-700); color:#fff; }
.cal-chip {
  display:block; width:100%; text-align:left; margin-top:3px; padding:2px 6px;
  border-radius:6px; font-size:11px; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
}
.cal-chip:hover { filter:brightness(.96); }
.cal-chip.muted { opacity:.55; text-decoration:line-through; }
.cal-more { margin-top:3px; font-size:11px; color:var(--gray-400); padding-left:6px; }

/* ===== 메모(댓글) ===== */
.cmt-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--brand-50); color:var(--brand-700); font-size:11px; font-weight:600; vertical-align:1px; }
.cmt-list { display:flex; flex-direction:column; gap:10px; }
.cmt { background:var(--gray-50); border:1px solid var(--gray-100); border-radius:10px; padding:10px 12px; }
.cmt-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cmt-time { font-size:11px; color:var(--gray-400); }
.cmt-del { display:flex; color:var(--gray-300); }
.cmt-del:hover { color:var(--red-500); }
.cmt-text { margin-top:4px; font-size:14px; color:var(--gray-700); white-space:pre-line; line-height:1.6; }
.cmt-add { display:flex; gap:8px; align-items:flex-end; margin-top:12px; }
.cmt-add textarea { flex:1; }

/* ===== 템플릿 편집 ===== */
.tpl-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.tpl-meta-btn { width:30px; height:30px; color:var(--gray-400); border:1px solid var(--gray-200); background:#fff; }
.tpl-meta-btn:hover { color:var(--gray-600); }
.tpl-meta-edit { display:flex; flex-direction:column; gap:8px; width:100%; }
.tpl-meta-edit .tpl-actions { justify-content:flex-end; }
.tpl-items li { border-radius:8px; padding:2px 4px; }
.tpl-items li:hover { background:var(--gray-50); }
.tpl-items .lbl { flex:1; }
.tpl-tools { display:none; gap:6px; margin-left:auto; flex-shrink:0; }
.tpl-items li:hover .tpl-tools { display:flex; }
.tpl-tools button { display:flex; color:var(--gray-300); }
.tpl-tools button:hover { color:var(--gray-500); }
.tpl-tools button.del:hover { color:var(--red-500); }
.tpl-restore { display:inline-flex; align-items:center; gap:4px; margin-top:12px; font-size:11px; color:var(--gray-400); align-self:flex-start; }
.tpl-restore:hover { color:var(--gray-600); }

/* ===== 설정 ===== */
.settings-wrap { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.set-row { display:flex; flex-wrap:wrap; gap:8px; }
.set-note { margin-top:8px; font-size:12px; color:var(--gray-400); }
.set-info dl { display:flex; flex-direction:column; gap:8px; font-size:14px; }
.set-info .r { display:flex; align-items:center; justify-content:space-between; }
.set-info dt { color:var(--gray-400); }
.set-info dd { color:var(--gray-700); }
.set-info .mono { font-family:ui-monospace,SFMono-Regular,monospace; font-size:12px; color:var(--gray-600); }
.set-tip { margin-top:12px; display:flex; gap:6px; background:var(--gray-50); border-radius:10px; padding:8px 12px; font-size:12px; color:var(--gray-400); }
.storage-line { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--gray-600); }
.storage-line .ic { display:flex; color:var(--brand-600); }
.sec-h { font-size:14px; font-weight:600; margin-bottom:12px; }

/* ===== 모달 ===== */
.modal-dim {
  position:fixed; inset:0; z-index:50; background:rgba(17,24,39,.4);
  display:flex; align-items:flex-start; justify-content:center; padding:16px; overflow-y:auto;
}
.modal { width:100%; max-width:640px; background:#fff; border-radius:14px; box-shadow:var(--shadow-hover); margin:16px 0; }
.modal-sm { max-width:400px; margin-top:15vh; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--gray-100); }
.modal-head h2 { font-size:16px; font-weight:700; }
.modal-head .icon-btn { width:30px; height:30px; color:var(--gray-400); }
.modal-body { padding:16px 20px; max-height:70vh; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--gray-100); }
.form-grid-3 { display:grid; grid-template-columns:1fr; gap:12px; }
.confirm-body { padding:20px; }
.confirm-row { display:flex; gap:12px; }
.confirm-icon { width:36px; height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:99px; background:var(--red-50); color:var(--red-500); }
.confirm-title { font-size:14px; font-weight:600; }
.confirm-desc { margin-top:4px; font-size:14px; color:var(--gray-500); white-space:pre-line; }
.confirm-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.tpl-apply-btn {
  display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:8px;
  border:1px solid var(--brand-200); background:var(--brand-50); color:var(--brand-700);
  font-size:12px; font-weight:500;
}
.tpl-apply-btn:hover { background:var(--brand-100); }
.cl-form-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }

/* ===== 토스트 ===== */
.toast-root {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:60; display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; width:100%; max-width:380px; padding:0 16px;
}
.toast {
  display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px;
  color:#fff; font-size:14px; font-weight:500; box-shadow:var(--shadow-hover);
  background:var(--gray-900); animation:toast-in .2s ease;
}
.toast.error { background:var(--red-600); }
.toast .tick { color:var(--brand-300); display:flex; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* 404 */
.nf { text-align:center; padding:80px 0; }
.nf .code { font-size:14px; font-weight:600; color:var(--brand-700); }
.nf h1 { margin-top:4px; font-size:20px; font-weight:700; }
.nf p { margin-top:8px; font-size:14px; color:var(--gray-500); }
.nf .btn { margin-top:20px; }

/* ===== 인터랙션 (빠르고 절제된 모션) ===== */

/* 페이지 전환: 라우트 변경 시에만 발동 (.view-anim은 JS가 부여) */
@keyframes view-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes card-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.view-anim { animation:view-in .18s ease-out; }
.view-anim .summary-grid .summary-card,
.view-anim .task-grid > .task-card,
.view-anim .tpl-grid > .tpl-card { animation:card-in .2s ease-out backwards; }
.view-anim .summary-grid .summary-card:nth-child(2),
.view-anim .task-grid > .task-card:nth-child(2),
.view-anim .tpl-grid > .tpl-card:nth-child(2) { animation-delay:.04s; }
.view-anim .summary-grid .summary-card:nth-child(3),
.view-anim .task-grid > .task-card:nth-child(3),
.view-anim .tpl-grid > .tpl-card:nth-child(3) { animation-delay:.08s; }
.view-anim .summary-grid .summary-card:nth-child(4),
.view-anim .task-grid > .task-card:nth-child(4),
.view-anim .tpl-grid > .tpl-card:nth-child(4) { animation-delay:.12s; }
.view-anim .task-grid > .task-card:nth-child(n+5),
.view-anim .tpl-grid > .tpl-card:nth-child(n+5) { animation-delay:.15s; }

/* 모달: 페이드 + 살짝 떠오르기 */
@keyframes dim-in { from { opacity:0; } to { opacity:1; } }
@keyframes modal-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.modal-dim { animation:dim-in .15s ease-out; }
.modal { animation:modal-in .18s cubic-bezier(.16,1,.3,1); }
.drawer-dim.show { animation:dim-in .2s ease-out; }

/* 토스트: 사라질 때 페이드아웃 */
@keyframes toast-out { to { opacity:0; transform:translateY(8px); } }
.toast.out { animation:toast-out .25s ease forwards; }

/* 입력 오류: 쉐이크 */
@keyframes shake {
  20%, 60% { transform:translateX(-4px); }
  40%, 80% { transform:translateX(4px); }
}
.shake { animation:shake .3s ease; }

/* 호버 리프트 */
.task-card { transition:box-shadow .15s, transform .15s, border-color .15s; }
.task-card:hover { transform:translateY(-2px); }
.summary-card { transition:box-shadow .15s, transform .15s; }
.summary-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-1px); }
.tpl-card { transition:box-shadow .15s, transform .15s; }
.tpl-card:hover { transform:translateY(-1px); }

/* 버튼: 누르는 느낌 */
.btn { transition:background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s; }
.btn:active { transform:scale(.97); }
.icon-btn { transition:background .12s, color .12s, transform .1s; }
.icon-btn:active { transform:scale(.92); }
.view-toggle button { transition:background .12s, color .12s; }
.tpl-apply-btn { transition:background .12s, transform .1s; }
.tpl-apply-btn:active { transform:scale(.97); }

/* 체크박스: 체크 시 부드러운 전환 + 프레스 */
.cl-check { transition:background .12s, border-color .12s, transform .1s; }
.cl-check:active { transform:scale(.88); }
.checklist li { transition:background .12s; }
.cl-label { transition:color .15s; }

/* 사이드바 내비: 살짝 밀리는 호버 */
.nav-link { transition:background .15s, color .15s, transform .15s; }
.nav-link:hover { transform:translateX(2px); }
.nav-link.active { transform:none; }

/* 입력 요소: 포커스 전환 */
.input, .select, .textarea, .header-search input, .filter-q input, .cl-add-row input, .cl-edit-input {
  transition:border-color .12s, box-shadow .12s, background .12s;
}
.filters select, .quick-status, .st-select { transition:border-color .12s, background .12s; }

/* 테이블/리스트 호버 */
.task-table tbody tr { transition:background .12s; }
.tpl-items li { transition:background .12s; }

/* 아이콘 툴버튼: 색 전환 */
.tc-del, .row-del, .cl-tools button, .cl-edit-tools button, .tpl-tools button, .cmt-del, .tpl-restore {
  transition:color .12s, opacity .15s;
}

/* 달력: 셀/칩 호버 */
.cal-cell { transition:background .15s; }
.cal-cell:not(.other):hover { background:var(--brand-50); }
.cal-chip { transition:filter .12s, transform .12s; }
.cal-chip:hover { transform:translateX(2px); }
.cal-nav .icon-btn { transition:background .12s, border-color .12s, transform .1s; }

/* 메모(댓글) 카드 */
.cmt { transition:border-color .15s, background .15s; }
.cmt:hover { border-color:var(--gray-200); }

/* 모션 최소화 환경 존중 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ===== 반응형 ===== */
.mobile-only { display:flex; }
.desktop-only { display:none; }
.hide-sm { display:none; }
@media (min-width:640px) {
  .main { padding:24px; }
  .hide-sm { display:inline; }
  .task-grid { grid-template-columns:1fr 1fr; }
  .view-toggle { display:flex; }
  .form-grid-3 { grid-template-columns:1fr 1fr 1fr; }
  .tpl-grid { grid-template-columns:1fr 1fr; }
}
@media (min-width:768px) { .desktop-only { display:flex; } }
@media (min-width:1024px) {
  .sidebar { transform:none; }
  .sidebar .drawer-close { display:none; }
  .content { padding-left:240px; }
  .mobile-only { display:none; }
  .main { padding:24px 32px; }
  .detail-grid { grid-template-columns:2fr 1fr; }
}
@media (min-width:1280px) {
  .summary-grid { grid-template-columns:repeat(4,1fr); }
  .dash-grid { grid-template-columns:2fr 1fr; }
  .tasks-grid-3 { grid-template-columns:1fr 1fr 1fr; }
  .tpl-grid { grid-template-columns:1fr 1fr 1fr; }
}