/* =========================================
   GLOBAL LAYOUT (LOCKED)
========================================= */
:root{
  --sidebar-w: 210px;
  --topbar-h: 64px;
  --right-w: 320px;
  --bg: #f3f5f7;
  --line: #e5e7eb;
  --sidebar-bg: #0f172a;
  --sidebar-text: #cbd5e1;
  --active: #2563eb;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
}

/* =========================================
   TOP BAR
========================================= */
.topbar{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--topbar-h);
  background:#fff;
  border-bottom:1px solid var(--line);
  z-index: 3000;
  display:flex;
  align-items:center;
}

.topbar-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding: 0 18px 0 calc(var(--sidebar-w) + 18px);
}

.top-left{
  font-weight:800;
  font-size:18px;
  color:#0f172a;
}
.top-center{ flex:1; }

.top-right{
  display:flex;
  gap:6px;
}
.top-right button{
  padding:5px 11px;
  border-radius:6px;
  border:1px solid #d1d5db;
  background:#fff;
  cursor:pointer;
  font-size:13px;
}

/* =========================================
   BODY AREA (3열 고정)
========================================= */
.body-area{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--right-w);
  min-height:100vh;
  padding-top: var(--topbar-h);
}

/* =========================================
   SIDEBAR
========================================= */
.sidebar{
  background: var(--sidebar-bg);
  color:#fff;
  overflow-y:auto;
  padding-top: 18px;
}

.sidebar .menu{ padding:0; }

.sidebar a,
.sidebar .menu-item{
  display:block;
  padding:8px 14px;
  margin:4px 10px;
  border-radius:7px;
  text-decoration:none;
  color: var(--sidebar-text);
  font-size:13px;
  line-height:1.2;
}

.sidebar a:hover,
.sidebar .menu-item:hover{
  background:#1e293b;
  color:#fff;
}

.sidebar a.active,
.sidebar .menu-item.active{
  background: var(--active);
  color:#fff;
  font-weight:700;
}

/* =========================================
   MAIN AREA (중앙 고정)
========================================= */
.main-area{
  min-width:0;
  min-height: calc(100vh - var(--topbar-h));
  overflow-y:auto;
  padding: 20px 24px;
  background:#f3f5f7;
}

.page-title{
  font-size:22px;
  font-weight:800;
  margin: 10px 0 18px;
}

/* =========================================
   RIGHT AREA (보관함)
========================================= */
.right-area{
  background:#fff;
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}

.right-top{
  padding:12px 14px;
  font-weight:700;
  border-bottom:1px solid var(--line);
  font-size:14px;
}

.right-drawer{
  flex:1;
  overflow-y:auto;
  padding:10px 12px;
  font-size:13px;
}

/* =========================================
   CARD / GRID (ERP 밀도 핵심)
========================================= */
.card{
  background:#fff;
  border-radius:10px;
  padding:16px 18px;
  border:1px solid #e6ebf2;
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
}

.card-title{
  font-size:15px;
  font-weight:700;
  margin-bottom:10px;
  color:#0f172a;
}

.dashboard-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap:18px;
}