/* ══════════════════════════════════════════════════════════════
   common.css — 관리 화면 공통 스타일

   화면마다 <style> 에 같은 값을 복붙해 두고 있던 것 중, **세 화면에서
   글자까지 동일했던 것만** 뽑았다. 조금이라도 다르면 각 화면에 남겼다 —
   여기로 끌어올리면서 값을 통일하면 그 자체가 디자인 변경이 된다.

   적용 화면 (3개)
     modu-admin.html · modu-superadmin.html · modu-builder.html

   my-history.html 은 넣지 않았다. 팔레트가 아예 다르다(teal 계열 --ink ·
   --primary:#0E605B). --line 도 #E2E8E6 로 값이 달라서, 이 파일을 붙이면
   색이 바뀐다. 공유하는 스타일이 없으므로 분리할 것도 없다.

   여기에 없고 각 화면에 남은 것 — 값이 서로 달랐다:
     body · .nav-logo · .nav-right · .spin · .toast(.show 만 공통)
   ══════════════════════════════════════════════════════════════ */

/* 팔레트. modu-admin·modu-superadmin 과 동일하다. modu-builder 에는
   --error 가 없었는데, 없어도 쓰지 않으므로 추가해도 영향이 없다. */
:root {
  --black: #0A0A0A;
  --gray-900: #1A1A1A;
  --gray-700: #444;
  --gray-500: #888;
  --gray-300: #D4D4D4;
  --gray-100: #F5F5F5;
  --gray-50: #FAFAFA;
  --white: #FFFFFF;
  --accent: #FBBF24;
  --accent-dark: #D97706;
  --accent-light: #FEF3C7;
  --line: rgba(0,0,0,0.07);
  --success: #22c55e;
  --error: #ef4444;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

nav {
  position: sticky; top: 0; z-index: 100; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-logo em { color: var(--accent); font-style: normal; }

.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }