@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  --sidebar-w:244px;
  --top-h:64px;
  --nav:#111315;
  --nav2:#1a1d21;
  --nav3:#22262b;
  --nav-text:#c6cbd1;
  --nav-muted:#757c85;
  --bg:#f0f1f2;
  --surface:#fff;
  --soft:#f6f7f8;
  --line:#e4e6e9;
  --text:#17191c;
  --muted:#767d86;
  --shadow:0 1px 2px rgba(16,18,22,.03),0 10px 30px rgba(16,18,22,.045);
  --good:#2f7350;
  --good-bg:#e8f2ec;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input,select{font:inherit}
button{cursor:pointer}

.nav{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);
  display:flex;flex-direction:column;background:var(--nav);color:var(--nav-text);
  z-index:70;overflow:hidden
}
.brand-row{
  min-height:74px;
  flex:0 0 74px;
  padding:18px 17px 13px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #24282d;
}
.xyz-logo{
  display:block;
  width:84px;
  height:auto;
  flex:0 0 84px;
  object-fit:contain;
}
.logo-on-light{display:none}
.logo-on-dark{display:block}
.brand-system{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:31px;
  padding-left:10px;
  letter-spacing:.08em;
}
.brand-system::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  bottom:2px;
  width:1px;
  background:#444a51;
}
.brand-system strong{
  font-size:10px;
  line-height:1;
  color:#fff;
}
.brand-system span{
  margin-top:5px;
  font-size:7px;
  line-height:1;
  color:#777e87;
}
.nav-scroll{flex:1;overflow:auto;padding:8px 10px 18px}
.nav-cap{padding:12px 11px 7px;color:#737b84;font-size:9px;font-weight:800;letter-spacing:.18em}
.menu-group{margin-bottom:4px}
.menu-head,.menu-item{
  width:100%;border:0;text-align:left;display:flex;align-items:center;color:inherit;
  background:transparent
}
.menu-head{
  min-height:45px;padding:0 13px;border-radius:13px;gap:12px;font-weight:650;font-size:13px
}
.menu-head:hover,.menu-head.current{background:#20242a;color:#fff}
.menu-icon{width:18px;display:grid;place-items:center;color:#8e959e;font-size:15px}
.chev{margin-left:auto;color:#717983;transition:transform .15s}
.menu-group.open .chev{transform:rotate(90deg)}
.menu-items{display:none;padding:3px 0 5px 31px}
.menu-group.open .menu-items{display:block}
.menu-item{
  position:relative;min-height:34px;padding:0 12px;border-radius:10px;color:#9fa5ac;font-size:12px
}
.menu-item:hover{color:#fff;background:#191d21}
.menu-item.current{background:#2a2f35;color:#fff;font-weight:700}
.menu-item.future::after{
  content:"";width:5px;height:5px;border-radius:50%;background:#8a9098;margin-left:auto
}
.user-card{
  margin:10px;padding:12px;border-radius:14px;background:#1a1d21;display:flex;align-items:center;gap:10px
}
.avatar{width:35px;height:35px;border-radius:10px;background:#fff;color:#111;display:grid;place-items:center;font-weight:900;font-size:11px}
.user-copy{display:flex;flex-direction:column;min-width:0}
.user-copy strong{font-size:11px;color:#f3f4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-copy span{font-size:8px;color:#737b84;margin-top:3px;letter-spacing:.06em}

.topbar{
  position:fixed;left:var(--sidebar-w);right:0;top:0;height:var(--top-h);
  display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);z-index:60
}
.hamburger{width:38px;height:38px;border:0;border-radius:12px;background:#f1f2f3;color:#656b73;font-size:15px}
.context{min-width:170px}
.context-path{font-size:9px;color:#899099;margin-bottom:1px}
.context-title{font-size:15px;font-weight:850;letter-spacing:-.02em}
.theme-switch{margin-left:auto;display:flex;border:1px solid #c8c8c8;background:#fff}
.theme-btn{height:26px;min-width:52px;border:0;background:transparent;color:#777;font-size:10px;font-weight:800}
.theme-btn.active{background:#111;color:#fff}
.top-user{font-size:10px;color:#777d84;white-space:nowrap}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2ab96b;margin-right:6px}
.role{border-left:1px solid #d9dce0;padding-left:12px;color:#747a81;font-size:9px}
.logout{height:30px;padding:0 14px;border:1px solid #d2d5d8;background:#fff;font-size:10px;font-weight:700}

.main{
  position:fixed;left:var(--sidebar-w);right:0;top:var(--top-h);bottom:0;
  background:var(--bg);overflow:hidden;display:flex;flex-direction:column
}
.tabs{
  min-height:55px;padding:10px 18px 4px;display:flex;gap:8px;overflow-x:auto;flex:0 0 auto
}
.tab{
  min-width:106px;height:38px;border:0;border-radius:0;background:#e3e5e8;color:#777f88;
  display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:11px
}
.tab.active{background:#fff;color:#16191d;font-weight:750;box-shadow:var(--shadow)}
.tab-close{margin-left:8px;border:0;background:transparent;color:#9299a2;font-size:14px;padding:2px}
.toolbar{
  margin:0 18px;min-height:52px;padding:8px 10px;background:var(--surface);
  border-radius:18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px;flex:0 0 auto
}
.toolbar button{
  height:36px;padding:0 14px;border:1px solid #d9dcdf;border-radius:12px;background:#fff;color:#17191c;
  font-size:11px;font-weight:750
}
.toolbar button:hover{background:#f2f3f4}
.toolbar button.primary{background:#111315;color:#fff;border-color:#111315}
.toolbar button.danger{border-color:#d86a62;color:#b23f37}
.work{flex:1;overflow:auto;padding:36px 18px 70px}
.bottom-status{
  position:absolute;left:18px;right:18px;bottom:0;height:34px;display:flex;justify-content:space-between;align-items:center;
  color:#7d848c;font-size:9px;background:linear-gradient(to top,var(--bg) 70%,transparent)
}
.page{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.note{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:#747b83;font-size:11px;line-height:1.6}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.summary{min-height:104px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.summary .k{font-size:10px;color:#777e86}.summary .v{font-size:25px;font-weight:850;margin-top:10px}.summary .s{font-size:9px;color:#8b929a;margin-top:4px}
.filter{margin-top:12px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);display:grid;grid-template-columns:1fr 170px;gap:10px}
.field label{display:block;font-size:9px;color:#747b83;margin:0 0 6px 2px}
.field input,.field select{width:100%;height:38px;border:1px solid #d8dce0;border-radius:10px;background:var(--soft);padding:0 12px;color:var(--text)}
.table-card{margin-top:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:930px;font-size:10px}
th{height:36px;padding:0 10px;text-align:left;background:#f4f5f6;color:#656c74;border-bottom:1px solid #e3e6e9;font-weight:750}
td{height:42px;padding:0 10px;border-bottom:1px solid #edf0f2;color:#22272c}
tr:last-child td{border-bottom:0}
.badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--good-bg);color:var(--good);font-weight:750;font-size:9px}
.link-btn{border:0;background:transparent;text-decoration:underline;color:#34393f;font-weight:700}
.home-hero{padding:26px}
.home-title{font-size:27px;font-weight:850;letter-spacing:-.04em}.home-sub{margin-top:8px;color:#7e858d;font-size:12px}
.home-panels{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:14px}
.panel{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:18px}
.panel-head{display:flex;justify-content:space-between;font-size:12px;font-weight:800;margin-bottom:14px}
.panel-head span{padding:3px 8px;border-radius:999px;background:#f0f2f4;color:#7b828a;font-size:9px;font-weight:600}
.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.quick{padding:14px;border-radius:13px;background:#f6f7f8}
.quick strong{display:block;font-size:11px}.quick small{display:block;color:#888f97;margin-top:5px;font-size:9px}
.placeholder{padding:54px 20px;text-align:center;color:#8a9198}
.placeholder strong{display:block;color:var(--text);font-size:16px;margin-bottom:8px}
.mock-tag{display:inline-block;margin-bottom:14px;padding:5px 9px;border-radius:999px;background:#eceff2;color:#69717a;font-size:9px;font-weight:800}

html[data-erp-theme="dark"]{
  --bg:#111315;--surface:#1a1d21;--soft:#20242a;--line:#30353b;--text:#e7e9ec;--muted:#9299a2;
  --shadow:0 1px 2px rgba(0,0,0,.2),0 10px 30px rgba(0,0,0,.16);--good-bg:#20342b;--good:#91c7a7
}
html[data-erp-theme="dark"] .topbar{background:rgba(24,27,31,.97);border-bottom-color:#2d3136}
html[data-erp-theme="dark"] .hamburger{background:#24282d;color:#cbd0d6}
html[data-erp-theme="dark"] .context-path,html[data-erp-theme="dark"] .top-user,html[data-erp-theme="dark"] .role{color:#949aa2}
html[data-erp-theme="dark"] .role{border-left-color:#3b4046}
html[data-erp-theme="dark"] .theme-switch{border-color:#41464d;background:#20242a}
html[data-erp-theme="dark"] .theme-btn{color:#949aa2}
html[data-erp-theme="dark"] .theme-btn.active{background:#f3f4f5;color:#111315}
html[data-erp-theme="dark"] .logout{background:#20242a;color:#d9dde1;border-color:#41464d}
html[data-erp-theme="dark"] .tab{background:#20242a;color:#9299a2}
html[data-erp-theme="dark"] .tab.active{background:#1a1d21;color:#f0f1f3}
html[data-erp-theme="dark"] .toolbar button{background:#25292f;color:#d9dde1;border-color:#33383e}
html[data-erp-theme="dark"] .toolbar button:hover{background:#2d3238;color:#fff}
html[data-erp-theme="dark"] .toolbar button.primary{background:#f2f3f4;color:#111315}
html[data-erp-theme="dark"] .field input,
html[data-erp-theme="dark"] .field select{border-color:#41464d;background:#20242a;color:#eef0f2}
html[data-erp-theme="dark"] th{background:#24282d;color:#bfc5cc;border-color:#33383e}
html[data-erp-theme="dark"] td{border-color:#2d3238}
html[data-erp-theme="dark"] .quick{background:#22262b}
html[data-erp-theme="dark"] .mock-tag{background:#282d33;color:#9299a2}


/* Legacy theme behavior:
   LIGHT mode = dark sidebar / white logo
   DARK mode  = light sidebar / black logo */
html[data-erp-theme="dark"] .nav{
  background:#f1f2f3;
  color:#15171a;
  border-right:1px solid #d7dbe0;
}
html[data-erp-theme="dark"] .brand-row{
  border-bottom-color:#d9dde1;
}
html[data-erp-theme="dark"] .logo-on-dark{display:none}
html[data-erp-theme="dark"] .logo-on-light{display:block}
html[data-erp-theme="dark"] .brand-system::before{background:#c5c9ce}
html[data-erp-theme="dark"] .brand-system strong{color:#111315}
html[data-erp-theme="dark"] .brand-system span{color:#7a8189}
html[data-erp-theme="dark"] .nav-cap{color:#8b9198}
html[data-erp-theme="dark"] .menu-head{color:#535a62}
html[data-erp-theme="dark"] .menu-head:hover,
html[data-erp-theme="dark"] .menu-head.current{
  background:#dfe2e6;
  color:#111315;
}
html[data-erp-theme="dark"] .menu-icon{color:#7a8189}
html[data-erp-theme="dark"] .chev{color:#8b9198}
html[data-erp-theme="dark"] .menu-item{color:#6b727a}
html[data-erp-theme="dark"] .menu-item:hover{
  background:#e5e7ea;
  color:#111315;
}
html[data-erp-theme="dark"] .menu-item.current{
  background:#d6d9dd;
  color:#111315;
}
html[data-erp-theme="dark"] .menu-item.future::after{background:#8b9198}
html[data-erp-theme="dark"] .user-card{
  background:#e3e6e9;
}
html[data-erp-theme="dark"] .avatar{
  background:#111315;
  color:#ffffff;
}
html[data-erp-theme="dark"] .user-copy strong{color:#17191c}
html[data-erp-theme="dark"] .user-copy span{color:#777e87}

.mobile-backdrop{display:none}

@media(max-width:980px){
  .nav{transform:translateX(-100%);transition:transform .18s ease}
  body.mobile-nav-open .nav{transform:translateX(0)}
  .topbar,.main{left:0}
  .mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:65}
  body.mobile-nav-open .mobile-backdrop{display:block}
  .top-user,.role{display:none}
}
@media(max-width:720px){
  .context{min-width:0;flex:1}.context-path{display:none}.context-title{font-size:13px}
  .logout{display:none}.theme-btn{min-width:44px}
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter{grid-template-columns:1fr}
  .home-panels{grid-template-columns:1fr}
}