/* ============================================================
   동쪽구름 ERP — 앱 셸 (pluuug 사이드바 + 상단바)
   ============================================================ */
.app { display:grid; grid-template-columns:var(--nav-w) 1fr; grid-template-rows:var(--topbar-h) 1fr;
  grid-template-areas:"brand topbar" "nav main"; height:100vh; background:var(--c-bg); }

/* 좌상단 사업자 스위처 */
.brand { grid-area:brand; display:flex; align-items:center; gap:8px; padding:0 12px 0 16px;
  background:var(--c-surface); border-bottom:1px solid var(--c-border); }
.biz-switch { position:relative; }
.biz-switch .cur { display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:var(--r-sm); cursor:pointer; }
.biz-switch .cur:hover { background:var(--c-surface-2); }
.biz-switch .dot { width:18px; height:18px; border-radius:50%; background:var(--c-primary); color:#fff;
  font-size:10px; font-weight:800; display:grid; place-items:center; }
.biz-switch .nm { font-weight:800; font-size:14px; letter-spacing:-.02em; }
.biz-switch .cv { color:var(--c-text-mute); font-size:11px; }
.biz-switch .free { margin-left:2px; font-size:10px; font-weight:800; color:var(--c-primary);
  background:var(--c-primary-weak); padding:2px 7px; border-radius:var(--r-pill); }
.biz-menu { position:absolute; top:42px; left:8px; min-width:200px; background:var(--c-surface);
  border:1px solid var(--c-border); border-radius:var(--r); box-shadow:var(--sh-3); padding:6px; z-index:50; display:none; }
.biz-menu.on { display:block; }
.biz-menu button { width:100%; text-align:left; display:flex; align-items:center; gap:8px; padding:9px 10px;
  border-radius:var(--r-sm); font-size:13px; font-weight:600; color:var(--c-text); }
.biz-menu button:hover { background:var(--c-surface-2); }
.biz-menu button.on { color:var(--c-primary); background:var(--c-primary-weak); }

/* 상단바 (가이드/전역검색 중앙) */
.topbar { grid-area:topbar; display:flex; align-items:center; gap:12px; padding:0 16px;
  background:var(--c-surface); border-bottom:1px solid var(--c-border); }
.topbar .lspace { flex:1; }
.topbar .rspace { flex:1; display:flex; justify-content:flex-end; gap:8px; }
.search-wrap { width:min(440px,40vw); position:relative; }
.search-wrap .ico { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--c-text-mute); font-size:13px; }
.search-wrap input { width:100%; height:36px; padding:0 12px 0 34px; border-radius:var(--r-sm);
  border:1px solid var(--c-border); background:var(--c-surface); font-size:13px; }
.search-wrap input:focus { outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-weak); }
.search-wrap .kbd { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--c-text-mute);
  border:1px solid var(--c-border); border-radius:5px; padding:1px 6px; }
.ai-btn { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 13px; border-radius:var(--r-sm);
  background:var(--c-primary); color:#fff; font-weight:700; font-size:13px; }
.ai-btn:hover { background:var(--c-primary-ink); }
.icon-btn { width:36px; height:36px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--c-text-dim); }
.icon-btn:hover { background:var(--c-surface-2); }

/* 좌측 메뉴 */
.nav { grid-area:nav; background:var(--c-surface); border-right:1px solid var(--c-border); padding:10px 10px 16px; overflow-y:auto; }
.nav .group { font-size:11px; font-weight:700; color:var(--c-text-mute); padding:14px 10px 5px; }
.nav .group .gl { display:block; height:1px; background:var(--c-border); margin:0 0 8px; }
.nav a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-sm);
  color:var(--c-text-dim); font-weight:600; font-size:13.5px; margin-bottom:1px; }
.nav a .mi { width:18px; text-align:center; font-size:15px; }
.nav a:hover { background:var(--c-surface-2); color:var(--c-text); }
.nav a.on { background:var(--c-primary-weak); color:var(--c-primary); }
.nav a .soon-tag { margin-left:auto; font-size:9px; background:var(--c-surface-2); color:var(--c-text-mute);
  padding:2px 6px; border-radius:var(--r-pill); font-weight:700; }
.nav .sub { margin:1px 0 4px; }
.nav .sub a { padding:7px 10px 7px 38px; font-size:12.5px; font-weight:600; }
.nav .sub a.on { background:transparent; color:var(--c-primary); }
.nav .botline { margin:14px 0; height:1px; background:var(--c-border); }

/* 본문 */
.main { grid-area:main; overflow-y:auto; }
.page { padding:18px 24px 70px; }

/* 모바일 */
.mobile-nav { display:none; }
@media (max-width:880px){
  .app { grid-template-columns:1fr; grid-template-rows:var(--topbar-h) 1fr auto; grid-template-areas:"topbar" "main" "mobile"; }
  .brand,.nav { display:none; }
  .search-wrap { width:auto; flex:1; }
  .page { padding:12px 12px 80px; }
  .mobile-nav { display:flex; grid-area:mobile; background:var(--c-surface); border-top:1px solid var(--c-border); }
  .mobile-nav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 0; font-size:10px; font-weight:700; color:var(--c-text-mute); }
  .mobile-nav a .mi { font-size:17px; }
  .mobile-nav a.on { color:var(--c-primary); }
}