/* ============================================================
   ONE 플랫폼 디자인 토큰 (NEW_SYSTEM_INTEGRATION_PROMPT.md 6번)
   ============================================================ */
:root {
  --one-bg: oklch(98% 0.004 260);
  --one-text: oklch(22% 0.01 260);
  --one-text-muted: oklch(52% 0.01 260);
  --one-primary: oklch(55% 0.14 260);
  --one-border: oklch(92% 0.005 260);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Noto Sans KR', sans-serif;
  background: var(--one-bg);
  color: var(--one-text);
  margin: 0;
}
.hidden { display: none !important; }

/* ============================================================
   전체 폭 상단 표시줄 + 레이아웃 (6번 예시 그대로)
   ============================================================ */
.app-navbar {
  background: #1e1e2e;
  display: flex; justify-content: space-between; align-items: center;
  height: 54px; min-height: 54px; padding: 0 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.navbar-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.navbar-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--one-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.navbar-user { display: flex; align-items: center; gap: 10px; }
.navbar-user .user-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.navbar-logout-btn { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 12px; padding: 5px 12px; border-radius: 8px; cursor: pointer; transition: .15s; }
.navbar-logout-btn:hover { background: rgba(255,255,255,.12); }

.layout { display: flex; height: calc(100vh - 54px); overflow: hidden; }

.sidebar { width: 176px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--one-border); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.sidebar-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--one-text-muted); background: transparent; border: none; cursor: pointer; text-align: left; transition: .15s; width: 100%; }
.sidebar-item:hover { background: oklch(96% 0.005 260); }
.sidebar-item.active { background: oklch(55% 0.14 260 / 0.12); color: var(--one-primary); }
html.is-embedded .sidebar { display: none !important; }

.main { flex: 1; overflow-y: auto; }
.page.hidden { display: none; }

#loginGate { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--one-bg); z-index: 100; }

/* ============================================================
   원본 3화면(Index/Dashboard/Admin) 공용 컴포넌트 스타일
   ============================================================ */
.drop-zone { transition: all .2s; }
.drop-zone.drag-over { border-color: #3b82f6; background: #eff6ff; }
.fade-in { animation: fadeIn .4s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:9999px; font-size:.72rem; font-weight:600; }
.spinner { border:3px solid #e5e7eb; border-top-color:#3b82f6; border-radius:50%; width:20px; height:20px; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }
.step-line { height:2px; flex:1; background:#e5e7eb; }
.step-line.done { background:#22c55e; }
.step-dot { width:26px; height:26px; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; flex-shrink:0; }
.row-overdue { background:#fef2f2 !important; }
.mini-stepper { display:flex; align-items:center; width:120px; }
.toast { animation: slideIn .3s ease; }
@keyframes slideIn { from { opacity:0; transform:translateY(-12px);} to {opacity:1;transform:none;} }