:root{
    --canvas:#f9fafb;--surface:#fff;--ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;
    --brand:#16a34a;--brand50:#f0fdf4;--brand100:#dcfce7;
    --info:#2563eb;--info50:#eff6ff;--info100:#dbeafe;
    --danger:#dc2626;--danger50:#fef2f2;--danger100:#fee2e2;
    --warn:#d97706;--warn50:#fffbeb;--warn100:#fef3c7;
  }

  /* ===== 사이드바 ===== */
  .sidebar{display:flex;flex-direction:column;width:236px;flex:0 0 236px;background:var(--surface);
    border-right:1px solid var(--line);position:sticky;top:0;height:100vh;}
  .sidebar-brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;border-bottom:1px solid var(--line);}
  .sidebar-logo{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
    background:linear-gradient(135deg,#e31332,#c20a25);color:#fff;font-weight:800;font-size:13px;letter-spacing:.5px;}
  .sidebar-nav{flex:1;overflow-y:auto;padding:10px 10px 16px;}
  .sidebar-section{padding:14px 8px 6px;font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.04em;}
  .sidebar-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:#374151;
    font-size:13.5px;font-weight:500;text-decoration:none;position:relative;}
  .sidebar-item:hover{background:#f3f4f6;}
  .sidebar-item.active{background:var(--brand50);color:var(--brand);font-weight:700;}
  .sidebar-item.active .sidebar-ico{color:var(--brand);}
  .sidebar-ico{width:18px;text-align:center;font-size:14px;color:#9ca3af;}
  .sidebar-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:11px;font-weight:700;
    min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;}
  .sidebar-foot{border-top:1px solid var(--line);padding:12px 16px;}

  /* ===== 상단바 ===== */
  .topbar{display:flex;align-items:center;gap:16px;padding:0 24px;height:60px;background:var(--surface);
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
  .topbar-search{position:relative;flex:1;max-width:460px;margin:0 auto;display:flex;align-items:center;}
  .topbar-search-ico{position:absolute;left:12px;color:#9ca3af;font-size:14px;}
  .topbar-search-input{width:100%;background:var(--canvas);border:1px solid var(--line);border-radius:10px;
    padding:8px 12px 8px 32px;font-size:13px;color:var(--ink);outline:none;}
  .topbar-search-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand100);}
  .topbar-kbd{position:absolute;right:8px;font-size:11px;color:#9ca3af;background:#fff;border:1px solid var(--line);
    border-radius:6px;padding:1px 6px;font-family:"JetBrains Mono",monospace;}
  .topbar-icon-btn{position:relative;width:36px;height:36px;border-radius:9px;border:1px solid transparent;
    display:flex;align-items:center;justify-content:center;font-size:15px;color:#4b5563;background:transparent;cursor:pointer;}
  .topbar-icon-btn:hover{background:#f3f4f6;}
  .topbar-dot,.topbar-divider{}
  .topbar-dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:2px solid #fff;}
  .topbar-divider{width:1px;height:24px;background:var(--line);margin:0 4px;}
  .topbar-user{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:10px;background:transparent;border:none;cursor:pointer;}
  .topbar-user:hover{background:#f3f4f6;}
  .topbar-avatar{width:30px;height:30px;border-radius:50%;background:var(--brand100);color:var(--brand700,#15803d);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;}

  /* ===== 버튼 ===== */
  .btn{display:inline-flex;align-items:center;gap:6px;border-radius:9px;font-size:13px;font-weight:600;
    padding:8px 14px;border:1px solid transparent;cursor:pointer;line-height:1;transition:.12s;white-space:nowrap;}
  .btn-sm{padding:6px 10px;font-size:12.5px;}
  .btn-primary{background:var(--brand);color:#fff;}
  .btn-primary:hover{background:#15803d;}
  .btn-ghost{background:#fff;color:#374151;border-color:var(--line);}
  .btn-ghost:hover{background:#f9fafb;}
  .btn-danger{background:var(--danger);color:#fff;}
  .btn-danger:hover{background:#b91c1c;}
  .btn[disabled]{opacity:.5;cursor:not-allowed;}

  /* ===== KPI ===== */
  .kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 1px 2px rgba(16,24,40,.04);}
  /* KPI 카드 바로가기(대시보드 등 전역) — projects.css .kpi-clickable(#0003)과 동일 어포던스 규칙 */
  a.kpi{display:block;color:inherit;text-decoration:none;}
  .kpi-clickable{cursor:pointer;transition:box-shadow .12s,border-color .12s;}
  .kpi-clickable:hover{border-color:#cbd5e1;box-shadow:0 2px 8px rgba(0,0,0,.06);}
  .kpi-clickable:focus-visible{outline:2px solid var(--info,#2563eb);outline-offset:2px;}
  .kpi.is-active{border-color:var(--info,#2563eb);box-shadow:0 0 0 2px var(--info-100,rgba(37,99,235,.15));}
  .kpi.kpi-danger.is-active{border-color:var(--danger,#dc2626);box-shadow:0 0 0 2px var(--danger-100,rgba(220,38,38,.15));}
  .kpi-danger{border-color:#fecaca;background:#fffafa;}
  .kpi-head{display:flex;align-items:center;gap:8px;}
  .kpi-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;}
  .kpi-ico-info{background:var(--info50);color:var(--info);}
  .kpi-ico-warn{background:var(--warn50);color:var(--warn);}
  .kpi-ico-danger{background:var(--danger50);color:var(--danger);}
  .kpi-ico-brand{background:var(--brand50);color:var(--brand);}
  .kpi-label{font-size:13px;color:var(--muted);font-weight:600;}
  .kpi-value{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-top:10px;color:var(--ink);font-variant-numeric:tabular-nums;}
  .kpi-unit{font-size:14px;font-weight:600;color:var(--muted);margin-left:3px;}
  .kpi-trend{font-size:12px;font-weight:600;margin-top:4px;}
  .kpi-trend-up{color:var(--brand);}
  .kpi-trend-down{color:var(--danger);}
  .kpi-trend-flat{color:var(--muted);}

  /* ===== 카드 ===== */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04);}
  .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);}
  .card-title{font-size:15px;font-weight:700;color:var(--ink);}
  .card-sub{font-size:12px;color:var(--muted);margin-top:2px;}
  .card-body{padding:18px;}
  .card-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--line);background:#fcfcfd;border-radius:0 0 14px 14px;}

  /* ===== pill / badge ===== */
  .pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;line-height:1.4;}
  .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
  .pill-normal{background:#f3f4f6;color:#4b5563;}
  .pill-progress{background:var(--info50);color:var(--info700,#1d4ed8);}
  .pill-delay{background:var(--danger50);color:var(--danger700,#b91c1c);}
  .pill-done{background:var(--brand50);color:var(--brand700,#15803d);}
  .pill-hold{background:var(--warn50);color:var(--warn700,#b45309);}
  .badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;background:#f3f4f6;color:#4b5563;}
  .badge-info{background:var(--info100);color:var(--info700,#1d4ed8);}
  .badge-danger{background:var(--danger100);color:var(--danger700,#b91c1c);}
  .badge-warn{background:var(--warn100);color:var(--warn700,#b45309);}
  /* badge-brand: design-system 초록 정의가 위 일반 .badge(회색)에 덮이던 버그 수정 — brand(초록)로 복구 */
  .badge-brand{background:var(--brand100);color:var(--brand700,#15803d);}

  /* ===== 폼 ===== */
  .label{display:block;font-size:12.5px;font-weight:600;color:#374151;margin-bottom:5px;}
  .input,.select{width:100%;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 11px;
    font-size:13px;color:var(--ink);outline:none;}
  .input:focus,.select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand100);}
  .field-help{font-size:11.5px;color:var(--muted);margin-top:4px;}
  .field-error{font-size:11.5px;color:var(--danger);margin-top:4px;}

  /* ===== 테이블 ===== */
  .table-wrap{overflow:auto;border-radius:0 0 14px 14px;}
  .table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
  .table thead th{position:sticky;top:0;background:#f9fafb;color:#6b7280;font-weight:600;font-size:12px;
    text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1;}
  /* 숫자 열 헤더 우측정렬 — 유틸리티 .text-right가 위 규칙(특이도 0,1,2)에 밀려 무시되던 버그 수정.
     값(td)은 우측인데 헤더만 좌측이라 열 매칭이 헷갈렸음(투자비·회수액 등 전 화면 공통). */
  .table thead th.text-right{text-align:right;}
  /* text-center 헤더도 특이도 보정 — .table th{text-align:left}에 밀려 헤더만 좌측정렬되고 셀은 중앙이라 어긋나던 문제 수정 */
  .table thead th.text-center{text-align:center;}
  .table tbody td{padding:11px 14px;border-bottom:1px solid #f1f3f5;color:var(--ink);vertical-align:middle;}
  .table-striped tbody tr:nth-child(even){background:#fcfcfd;}
  .table tbody tr:hover{background:#f6faf7;}
  .tabular-nums{font-variant-numeric:tabular-nums;}

  /* ===== 탭 ===== */
  .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);}
  .tab{padding:9px 14px;font-size:13px;font-weight:600;color:var(--muted);background:none;border:none;cursor:pointer;
    border-bottom:2px solid transparent;margin-bottom:-1px;}
  .tab:hover{color:var(--ink);}
  .tab.active{color:var(--brand);border-bottom-color:var(--brand);}

  /* ===== alert ===== */
  .alert{display:flex;gap:11px;padding:12px 14px;border-radius:11px;border:1px solid;}
  .alert-warn{background:var(--warn50);border-color:#fde68a;}
  .alert-danger{background:var(--danger50);border-color:#fecaca;}
  .alert-ico{font-size:16px;line-height:1.4;}
  .alert-title{font-size:13px;font-weight:700;color:var(--ink);}
  .alert-desc{font-size:12.5px;color:var(--muted);margin-top:1px;}

  /* ===== 진행률 바 ===== */
  .pbar{height:7px;background:#eef0f2;border-radius:999px;overflow:hidden;}
  .pbar>span{display:block;height:100%;border-radius:999px;}

  /* ===== 게이트 스텝퍼 ===== */
  .gate{display:flex;align-items:center;gap:0;}
  .gate-node{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;width:54px;}
  .gate-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:800;border:2px solid var(--line);background:#fff;color:#9ca3af;}
  .gate-dot.done{background:var(--brand);border-color:var(--brand);color:#fff;}
  .gate-dot.now{background:var(--info);border-color:var(--info);color:#fff;box-shadow:0 0 0 4px var(--info100);}
  .gate-dot.todo{background:#fff;border-color:var(--line);color:#9ca3af;}
  .gate-label{font-size:11px;font-weight:600;color:var(--muted);}
  .gate-line{flex:1;height:3px;border-radius:2px;background:#e5e7eb;margin-top:-22px;}
  .gate-line.done{background:var(--brand);}

  /* mini gate dots in table */
  .gdots{display:inline-flex;gap:4px;}
  .gdots i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line);background:#fff;display:inline-block;}
  .gdots i.done{background:var(--brand);border-color:var(--brand);}
  .gdots i.now{background:var(--info);border-color:var(--info);}

  ::-webkit-scrollbar{width:9px;height:9px;}
  ::-webkit-scrollbar-thumb{background:#d8dade;border-radius:8px;border:2px solid #f9fafb;}