:root{
    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:9999px;
    --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:19px; --fs-2xl:24px;
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
    --c-bg:#f2f2f7; --c-surface:#ffffff; --c-border:#e2e8f0; --c-border-soft:#eef1f5;
    --c-text:#0f172a; --c-text-2:#64748b; --c-text-3:#94a3b8;
    --c-primary:#2563eb; --c-primary-bg:#eff6ff; --c-focus:#007AFF;
    --c-ok:#059669; --c-warn:#d97706; --c-danger:#dc2626; --c-danger-bg:#fee2e2;
    --row-h:40px; --cell-py:10px;
    --appbar-h:56px; --rail-w:240px; --statusbar-h:28px;
  }
   













   

  .kk-appbar{ height:var(--appbar-h); position:sticky; top:0; z-index:45; background:#fff; border-bottom:1px solid var(--c-border); align-items:center; justify-content:space-between; padding:0 20px; gap:12px; }
  .kk-appbar-title{ font-size:var(--fs-lg); font-weight:700; color:var(--c-text); display:flex; align-items:center; gap:8px; }
   




  .kk-appbar-title{ color:var(--c-primary); }
  .kk-appbar-right{ display:flex; align-items:center; gap:10px; }
  .kk-appbar-user{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--c-text-2); padding:5px 12px; border-radius:var(--r-full); background:var(--c-bg); font-family:inherit; }
  .kk-appbar-user:hover{ background:var(--c-border-soft); color:var(--c-text); }
  .kk-appbar-btn{ width:34px; height:34px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; border:1px solid var(--c-border); background:#fff; color:var(--c-text-2); cursor:pointer; flex-shrink:0; }
  .kk-appbar-btn.active{ background:var(--c-primary-bg); color:var(--c-primary); border-color:transparent; }
   











  @keyframes kkBellShakePc {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-14deg); }
    30% { transform: rotate(11deg); }
    45% { transform: rotate(-8deg); }
    60% { transform: rotate(5deg); }
    75% { transform: rotate(-2deg); }
  }
  .kk-appbar-btn.kk-bell-shake { animation: kkBellShakePc .55s ease-in-out infinite; }
   


  .kk-appbar-left{ display:flex; align-items:center; gap:4px; min-width:0; flex:1; }
  .kk-appbar-title-compact{ padding-right:8px; margin-right:4px; border-right:1px solid var(--c-border); }
  .kk-topnav{ display:flex; align-items:center; gap:2px; height:100%; position:relative; z-index:47; }
  .kk-topnav-group{ position:relative; height:100%; display:flex; align-items:center; }
  .kk-topnav-btn{ display:flex; align-items:center; height:36px; padding:0 12px; border-radius:var(--r-md); border:none; background:transparent; color:var(--c-text-2); font-size:var(--fs-sm); font-weight:600; cursor:pointer; white-space:nowrap; }
  .kk-topnav-btn:hover{ background:var(--c-bg); color:var(--c-text); }
  .kk-topnav-btn.active{ background:var(--c-primary-bg); color:var(--c-primary); }
  .kk-topnav-btn.open{ background:var(--c-bg); color:var(--c-text); }
  .kk-topnav-dropdown{ position:absolute; top:100%; left:0; margin-top:6px; min-width:180px; background:#fff; border:1px solid var(--c-border); border-radius:var(--r-md); box-shadow:0 12px 28px -10px rgba(15,23,42,.22); padding:6px; z-index:46; display:flex; flex-direction:column; gap:1px; }
  .kk-topnav-item{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-sm); border:none; background:transparent; color:var(--c-text); font-size:var(--fs-sm); font-weight:500; text-align:left; cursor:pointer; white-space:nowrap; }
  .kk-topnav-item:hover{ background:var(--c-bg); }
  .kk-topnav-item.active{ background:var(--c-primary-bg); color:var(--c-primary); font-weight:700; }
  .kk-topnav-catcher{ position:fixed; inset:0; z-index:44; }
  body.theme-dark .kk-appbar{ background:#1e293b; border-bottom-color:#334155; }
  body.theme-dark .kk-appbar-btn{ background:#0f172a; border-color:#334155; color:#94a3b8; }
  body.theme-dark .kk-appbar-btn.active{ background:rgba(37,99,235,.2); color:#60a5fa; }
  body.theme-dark .kk-appbar-user{ background:#0f172a; }
  body.theme-dark .kk-appbar-title-compact{ border-right-color:#334155; }
  body.theme-dark .kk-topnav-btn{ color:#94a3b8; }
  body.theme-dark .kk-topnav-btn:hover, body.theme-dark .kk-topnav-btn.open{ background:#334155; color:#f1f5f9; }
  body.theme-dark .kk-topnav-btn.active{ background:rgba(37,99,235,.2); color:#60a5fa; }
  body.theme-dark .kk-topnav-dropdown{ background:#1e293b; border-color:#334155; }
  body.theme-dark .kk-topnav-item{ color:#e2e8f0; }
  body.theme-dark .kk-topnav-item:hover{ background:#334155; }
  body.theme-dark .kk-topnav-item.active{ background:rgba(37,99,235,.2); color:#60a5fa; }
   


  .kk-topnav-flat{ display:flex; align-items:center; flex-wrap:wrap; gap:2px; row-gap:4px; }
  .kk-appbar-topnav{ height:auto; min-height:var(--appbar-h); padding-top:6px; padding-bottom:6px; }
  .kk-topnav-flat-grouplabel{ font-size:10px; font-weight:700; color:var(--c-text-3); text-transform:uppercase; letter-spacing:.04em; padding:0 2px 0 4px; flex-shrink:0; }
  .kk-topnav-flat-btn{ display:flex; align-items:center; height:32px; padding:0 8px; border-radius:var(--r-md); border:none; background:transparent; color:var(--c-text-2); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; }
  .kk-topnav-flat-btn:hover{ background:var(--c-bg); color:var(--c-text); }
  .kk-topnav-flat-btn.active{ background:var(--c-primary-bg); color:var(--c-primary); }
  .kk-topnav-flat-divider{ width:1px; height:20px; background:var(--c-border); margin:0 4px; flex-shrink:0; }
  body.theme-dark .kk-topnav-flat-btn{ color:#94a3b8; }
  body.theme-dark .kk-topnav-flat-btn:hover{ background:#334155; color:#f1f5f9; }
  body.theme-dark .kk-topnav-flat-btn.active{ background:rgba(37,99,235,.2); color:#60a5fa; }
  body.theme-dark .kk-topnav-flat-divider{ background:#334155; }
   








  :root{ --kk-navy1:#0f3460; --kk-navy2:#16537e; --kk-navy-grad:linear-gradient(120deg,#0f3460,#16537e); }
  @media(min-width:1024px){
    .kk-appbar-topnav{ background:var(--kk-navy-grad); border-bottom:none; box-shadow:0 4px 16px -8px rgba(15,52,96,.5); }
    .kk-appbar-topnav .kk-topnav-flat-grouplabel{ display:none; }
    .kk-appbar-topnav .kk-topnav-flat-divider{ display:none; }
    .kk-appbar-topnav .kk-topnav-flat-btn{ color:rgba(255,255,255,.78); }
    .kk-appbar-topnav .kk-topnav-flat-btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
    .kk-appbar-topnav .kk-topnav-flat-btn.active{ background:#fff; color:var(--kk-navy1); font-weight:800; }
    .kk-appbar-topnav .kk-appbar-btn{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); color:#fff; }
    .kk-appbar-topnav .kk-appbar-btn:hover{ background:rgba(255,255,255,.2); }
    body.theme-dark .kk-appbar-topnav{ background:var(--kk-navy-grad); border-bottom:none; }
    body.theme-dark .kk-appbar-topnav .kk-topnav-flat-btn{ color:rgba(255,255,255,.78); }
    body.theme-dark .kk-appbar-topnav .kk-topnav-flat-btn.active{ background:#fff; color:var(--kk-navy1); }
  }
   

  .kk-hero{ background:var(--kk-navy-grad); border-radius:18px; color:#fff; padding:30px 34px 74px; margin-bottom:-48px; }
  .kk-hero h1{ font-size:24px; font-weight:800; margin:0; display:flex; align-items:center; gap:10px; }
  .kk-hero p{ opacity:.75; font-size:13.5px; margin:7px 0 0; }
  .kk-hero-search{ margin-top:18px; width:100%; max-width:620px; background:#fff; border:none; border-radius:13px; padding:14px 20px; font-size:14px; color:#0f172a; box-shadow:0 10px 30px rgba(2,20,43,.28); display:block; }
  .kk-hero-search::placeholder{ color:#94a3b8; }
  .kk-counter-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0 18px; position:relative; }
  .kk-counter{ background:#fff; border-radius:16px; padding:22px; box-shadow:0 6px 24px rgba(15,52,96,.09); }
  .kk-counter h2{ font-size:15px; font-weight:800; color:#0f172a; display:flex; align-items:center; gap:9px; margin:0; }
  .kk-counter h2 i{ font-style:normal; width:36px; height:36px; background:#eef4fb; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
  .kk-counter .desc{ font-size:12px; color:#94a3b8; margin:7px 0 14px; }
  .kk-counter-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13.5px; padding:9px 12px; border-radius:10px; background:#f8fafc; margin-bottom:7px; font-weight:600; color:#1e293b; cursor:pointer; border:1px solid transparent; width:100%; text-align:left; }
  .kk-counter-item:hover{ border-color:var(--kk-navy2); background:#eef4fb; }
  .kk-counter-badge{ background:var(--kk-navy1); color:#fff; font-size:10.5px; padding:2px 10px; border-radius:99px; flex-shrink:0; font-weight:700; }
  .kk-counter-bignum{ font-size:32px; font-weight:900; color:var(--kk-navy1); }
  .kk-counter-bignum small{ font-size:13px; color:#94a3b8; font-weight:600; }
  body.theme-dark .kk-counter{ background:#1e293b; box-shadow:none; }
  body.theme-dark .kk-counter h2{ color:#f1f5f9; }
  body.theme-dark .kk-counter h2 i{ background:#0f172a; }
  body.theme-dark .kk-counter-item{ background:#0f172a; color:#e2e8f0; }
   




  .kk-dash-hero-search{ display:none; }
  @media(min-width:1024px){
    .kk-dash-hero-pc{ background:var(--kk-navy-grad); border-radius:18px; padding:26px 30px; color:#fff; box-shadow:0 10px 30px -12px rgba(15,52,96,.45); }
    .kk-dash-hero-pc .kk-eyebrow{ color:rgba(255,255,255,.6); }
    .kk-dash-hero-pc .text-slate-900{ color:#fff; }
    .kk-dash-hero-pc .text-slate-500{ color:rgba(255,255,255,.72); }
    .kk-dash-hero-search{ display:block; flex-basis:100%; width:100%; max-width:560px; background:#fff; border:none; border-radius:12px; padding:12px 18px; font-size:13.5px; color:#0f172a; margin-top:6px; box-shadow:0 10px 30px rgba(2,20,43,.25); }
    .kk-dash-hero-search::placeholder{ color:#94a3b8; }
    .kk-dash-grid .kk-card{ border-radius:16px; box-shadow:0 6px 24px rgba(15,52,96,.07); }
    body.theme-dark .kk-dash-grid .kk-card{ box-shadow:none; }
     


    .kk-dash-kpi-wrap .kk-card{ border-radius:22px; padding:26px 24px; }
    .kk-dash-kpi-wrap .kk-card .text-3xl{ font-size:54px; line-height:1.02; letter-spacing:-2.5px; }
    .kk-dash-kpi-wrap .kk-card:first-child{ background:var(--kk-navy-grad); border-color:transparent; box-shadow:0 14px 34px -12px rgba(15,52,96,.55); }
    .kk-dash-kpi-wrap .kk-card:first-child .kk-stat-label{ color:rgba(255,255,255,.65); }
    .kk-dash-kpi-wrap .kk-card:first-child .text-blue-700{ color:#fff; }
    .kk-dash-kpi-wrap .kk-card:first-child .text-slate-500, .kk-dash-kpi-wrap .kk-card:first-child .text-slate-400{ color:rgba(255,255,255,.62); }
    .kk-dash-grid .kk-section-head{ border-left:4px solid var(--kk-navy1); padding-left:10px; }
     




    #app .kk-table-wrap{ border-radius:16px; box-shadow:0 6px 24px rgba(15,52,96,.09); border-color:transparent; }
    #app .kk-table thead th{ background:var(--kk-navy1); color:rgba(255,255,255,.85); border-bottom:none; }
    #app .kk-table thead th .arr{ color:#fff; }
    body.theme-dark #app .kk-table thead th{ background:var(--kk-navy1); color:rgba(255,255,255,.85); }
    #app .kk-card{ box-shadow:0 6px 24px rgba(15,52,96,.07); }
    body.theme-dark #app .kk-card{ box-shadow:none; }
     



     







    #app .kk-sidebar-panel{ top:96px; right:0; bottom:0; max-height:none !important; border-radius:16px 0 0 0; border-top:1px solid var(--c-border); border-right:none; border-bottom:none; border-left:1px solid var(--c-border); box-shadow:-2px 0 6px -3px rgba(15,52,96,.10); }
    @media (min-width:1024px){ #monthGridWrap.kk-month-merged{ border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; border-right:none !important; } }
     


    .kk-roofed{ border-top-left-radius:0 !important; border-top-right-radius:0 !important; }
     









    @media (min-width:1024px){
      #app .kk-month-panel-inflow{
        position: static !important;
        top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
         

        max-height: calc(100vh - 144px) !important;
        max-height: calc(100dvh - 144px) !important;
        box-shadow: none !important;
      }
    }
     



    #app .btn-add-gradient, #app .login-btn{ background:var(--kk-navy-grad); box-shadow:0 3px 10px -2px rgba(15,52,96,.5); }
    #app .kk-btn-pc.primary{ background:var(--kk-navy1); border-color:var(--kk-navy1); color:#fff; }
    #app .btn-subadd{ border-color:var(--kk-navy2); color:var(--kk-navy1); }
     


    #app .kk-btn-approve{ background:var(--kk-navy1) !important; color:#fff !important; box-shadow:0 3px 10px -3px rgba(15,52,96,.5); }
    #app .kk-btn-reject{ background:#fff !important; color:#b91c1c !important; border:1px solid #fca5a5 !important; }
     



    #app .kk-btn-approve, #app .kk-btn-reject{ flex:0 0 auto !important; width:auto !important; padding:7px 22px !important; font-size:12.5px !important; }
  }
  .kk-appbar-btn:hover{ background:var(--c-bg); }

   







  .kk-table-wrap{ background:#fff; border:1px solid var(--c-border); border-radius:var(--r-lg); overflow:auto; max-height:72vh; }
  .kk-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
  .kk-table thead th{ position:sticky; top:0; z-index:1; background:var(--c-bg); color:var(--c-text-2); font-weight:700; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.03em; text-align:left; padding:10px 14px; border-bottom:1px solid var(--c-border); white-space:nowrap; }
  .kk-table tbody td{ padding:var(--cell-py) 14px; border-bottom:1px solid var(--c-border-soft); color:var(--c-text); vertical-align:middle; }
  .kk-table tbody tr{ cursor:pointer; transition:background-color .1s ease; }
  .kk-table tbody tr:hover td{ background:var(--c-bg); }
  .kk-table tbody tr:last-child td{ border-bottom:none; }
  .kk-td-strong{ font-weight:600; }
  .kk-td-muted{ color:var(--c-text-2); }
  .kk-td-mono{ font-variant-numeric:tabular-nums; }
   


  .kk-th-sort{ cursor:pointer; -webkit-user-select:none;user-select:none; }
  .kk-th-sort:hover{ color:var(--c-text); }
  .kk-th-sort .arr{ color:var(--c-primary); margin-left:2px; }
  .kk-tr-group td{ background:var(--c-bg) !important; font-weight:800; color:var(--c-text-2); font-size:var(--fs-xs); padding-top:6px; padding-bottom:6px; cursor:default; }
  .kk-table tbody tr.kk-tr-selected td{ background:var(--c-primary-bg); }
  .kk-table td.kk-td-check{ width:30px; }
  .kk-bulkbar{ position:sticky; bottom:0; display:flex; align-items:center; gap:10px; background:#0f172a; color:#fff; padding:8px 14px; font-size:var(--fs-sm); border-top:1px solid var(--c-border); }
  .kk-bulkbar-btn{ background:#1e293b; border:1px solid #334155; color:#e2e8f0; border-radius:var(--r-sm); padding:4px 10px; font-size:var(--fs-xs); font-weight:600; cursor:pointer; }
  .kk-bulkbar-btn:hover{ background:#334155; }
  .kk-bulkbar-clear{ margin-left:auto; color:#94a3b8; cursor:pointer; font-size:var(--fs-xs); }
  .kk-bulkbar-clear:hover{ color:#fff; }
  body.theme-dark .kk-tr-group td{ background:#0f172a !important; color:#94a3b8; }
  body.theme-dark .kk-table tbody tr.kk-tr-selected td{ background:rgba(37,99,235,.18); }
   



  .kk-cx-expand-btn{ width:18px; height:18px; flex-shrink:0; border:none; background:var(--c-bg); color:var(--c-text-2); border-radius:6px; font-size:9px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
  .kk-cx-expand-btn:hover{ background:var(--c-border-soft); }
  .kk-tr-detail td{ background:var(--c-bg); color:var(--c-text-2); border-top:1px dashed var(--c-border); }
  body.theme-dark .kk-cx-expand-btn{ background:#0f172a; color:#94a3b8; }
  body.theme-dark .kk-cx-expand-btn:hover{ background:#334155; }
  body.theme-dark .kk-tr-detail td{ background:#0f172a; color:#94a3b8; border-top-color:#334155; }

   







  .kk-btn-pc{ display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-sm); font-weight:600; height:30px; padding:0 12px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; white-space:nowrap; }
  .kk-btn-pc.primary{ background:var(--c-primary); color:#fff; }
  .kk-btn-pc.primary:hover{ background:#1d4ed8; }
  .kk-btn-pc.secondary{ background:#fff; border-color:var(--c-border); color:var(--c-text); }
  .kk-btn-pc.secondary:hover{ background:var(--c-bg); }
  .kk-btn-pc.ghost{ background:transparent; color:var(--c-text-2); }
  .kk-btn-pc.ghost:hover{ background:var(--c-bg); color:var(--c-text); }
  .kk-btn-pc.danger{ background:var(--c-danger-bg); color:var(--c-danger); }
  .kk-btn-pc.danger:hover{ background:#fecaca; }
  .kk-btn-pc.icon{ width:28px; height:28px; padding:0; justify-content:center; background:#fff; border-color:var(--c-border); color:var(--c-text-2); }
  .kk-btn-pc.icon:hover{ background:var(--c-bg); }
  .kk-btn-pc:disabled{ opacity:.5; cursor:not-allowed; }
  body.theme-dark .kk-btn-pc.secondary{ background:#1e293b; border-color:#334155; color:#e2e8f0; }
  body.theme-dark .kk-btn-pc.secondary:hover{ background:#334155; }
  body.theme-dark .kk-btn-pc.ghost{ color:#94a3b8; }
  body.theme-dark .kk-btn-pc.ghost:hover{ background:#334155; color:#f1f5f9; }
  body.theme-dark .kk-btn-pc.danger{ background:rgba(220,38,38,.16); color:#f87171; }
  body.theme-dark .kk-btn-pc.icon{ background:#1e293b; border-color:#334155; color:#94a3b8; }
  body.theme-dark .kk-btn-pc.icon:hover{ background:#334155; }

   




text-* 등 다양한 출처의 크기 지정을 한 규칙으로 통일해서 이기기 위함) — 가로 폭·정렬·
     flex-1 배치는 그대로 둬서 레이아웃은 안 건드리고 "두께"만 줄인다. 모바일 크기·기존 공통 클래스는
     전혀 수정하지 않았다(Z1 원칙과 동일하게 새 규칙은 1024px 미만에서 아예 발동하지 않음). */
  @media (min-width:1024px){
    .kk-btn-pc-shrink{ padding-top:6px !important; padding-bottom:6px !important; font-size:12.5px !important; font-weight:600 !important; border-radius:8px !important; }
  }
   






  @media (min-width:1024px){
    .kk-btn-pc-fit{ width:auto !important; flex:0 0 auto !important; display:inline-flex !important; align-items:center; justify-content:center; gap:6px; padding:7px 16px !important; font-size:12.5px !important; border-radius:8px !important; font-weight:600 !important; }
     


    #app .kk-dw-actions{ display:flex !important; justify-content:flex-end; gap:8px; }
    #app .kk-dw-actions button{ width:auto !important; flex:0 0 auto !important; padding:7px 18px !important; font-size:12.5px !important; border-radius:8px !important; }
  }

   







  .kk-table tbody tr:nth-child(even) td{ background:#fafbfc; }
  .kk-table tbody tr:nth-child(even):hover td{ background:var(--c-bg); }
  .kk-table td.kk-td-num, .kk-table th.kk-td-num{ text-align:right; font-variant-numeric:tabular-nums; }
  .kk-table tbody tr{ position:relative; }
  .kk-table .kk-row-arrow{ display:inline-block; opacity:0; transition:opacity .12s ease; color:var(--c-primary); margin-left:6px; }
  .kk-table tbody tr:hover .kk-row-arrow{ opacity:1; }
  .kk-table .kk-badge-sm{ font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:var(--r-full); display:inline-block; line-height:1.6; }
  body.theme-dark .kk-table tbody tr:nth-child(even) td{ background:#16233a; }
  body.theme-dark .kk-table tbody tr:nth-child(even):hover td{ background:#1e293b; }