/* =========================================
   GLOBAL LAYOUT (LOCKED)
========================================= */
:root{
  --sidebar-w: 220px;
  --topbar-h: 72px;
  --right-w: 360px;
  --bg: #f8fafc;
  --line: #e5e7eb;
  --sidebar-bg: #0f172a;
  --sidebar-text: #cbd5e1;
  --active: #2563eb;
}

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

body{
  margin:0;
  background:var(--bg);
}

/* =========================================
   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:8px;
}
.top-right button{
  padding:6px 12px;
  border-radius:6px;
  border:1px solid #d1d5db;
  background:#fff;
  cursor:pointer;
}

/* =========================================
   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: 32px;
}

.sidebar .menu{ padding:0; }

.sidebar a,
.sidebar .menu-item{
  display:block;
  padding:10px 16px;
  margin:6px 12px;
  border-radius:8px;
  text-decoration:none;
  color: var(--sidebar-text);
  font-size:14px;
  white-space:nowrap;
}

.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: 28px 32px;
}

.page-title{
  font-size:26px;
  font-weight:800;
  margin: 12px 0 20px;
}

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

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

.right-drawer{
  flex:1;
  overflow-y:auto;
  padding:12px 14px;
}

/* =========================================
   CARD / GRID
========================================= */
.card{
  background:#fff;
  border-radius:12px;
  padding:18px 20px;
  border:1px solid #eef2f7;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

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

/* =========================================
   MOBILE (단일 컬럼)
========================================= */
@media (max-width: 768px){

  :root{
    --sidebar-w: 0px;
    --right-w: 0px;
    --topbar-h: 56px;
  }

  .topbar{
    height: var(--topbar-h);
  }

  .topbar-row{
    padding: 0 12px;
  }

  .top-right{
    display:none;
  }

  .body-area{
    display:block;
    padding-top: var(--topbar-h);
  }

  .sidebar{
    width:100%;
    padding: 12px 0;
  }

  .main-area{
    padding:16px;
    min-height:auto;
  }

  .right-area{
    display:none;
  }

  .dashboard-grid{
    grid-template-columns: 1fr;
    gap:16px;
  }

  table{
    min-width:720px;
  }
}