/* Version: v1.4.0 (2026-07-21) — Demo mobile-first: 하단탭 · 넉넉한 스크롤 여백 */

.demo-guide {

  margin: 0 0 1.1rem;

  padding: 0.9rem 1.1rem;

  border-radius: 16px;

  border: 1px solid rgba(15, 92, 97, 0.18);

  background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(242, 250, 249, 0.95));

}

.demo-guide-title {

  margin: 0 0 0.35rem;

  font-size: 0.95rem;

  font-weight: 800;

  color: #061416;

  line-height: 1.35;

}

.demo-guide-body {

  margin: 0;

  font-size: 0.84rem;

  font-weight: 500;

  color: #3D5558;

  line-height: 1.55;

}



/* ── 데모 전용: 기본=모바일 레이아웃 ── */

body.demo-console-body .adm-sidebar,

body.demo-console-body #admSidebar,

body.demo-console-body .adm-overlay,

body.demo-console-body .adm-menu-btn {

  display: none !important;

  visibility: hidden !important;

  position: fixed !important;

  left: -100vw !important;

  width: 0 !important;

  height: 0 !important;

  overflow: hidden !important;

  pointer-events: none !important;

  opacity: 0 !important;

}

body.demo-console-body .adm-main {

  margin-left: 0 !important;

  width: 100% !important;

  max-width: 100vw !important;

}

body.demo-console-body .adm-bottom-nav {

  display: flex !important;

  visibility: visible !important;

  opacity: 1 !important;

  position: fixed !important;

  bottom: 0 !important;

  left: 0 !important;

  right: 0 !important;

  z-index: 99999 !important;

}

body.demo-console-body .adm-content {

  padding-bottom: var(--adm-bottom-nav-offset, calc(160px + env(safe-area-inset-bottom, 0px))) !important;

  scroll-padding-bottom: var(--adm-bottom-nav-offset, calc(160px + env(safe-area-inset-bottom, 0px))) !important;

}



@media (min-width: 1024px) {

  html:not(.demo-phone) body.demo-console-body .adm-sidebar,

  html:not(.demo-phone) body.demo-console-body #admSidebar {

    display: flex !important;

    visibility: visible !important;

    position: fixed !important;

    left: 0 !important;

    top: 0 !important;

    bottom: 0 !important;

    width: var(--adm-sidebar-w, 240px) !important;

    height: auto !important;

    overflow: visible !important;

    pointer-events: auto !important;

    opacity: 1 !important;

  }

  html:not(.demo-phone) body.demo-console-body .adm-main {

    margin-left: var(--adm-sidebar-w, 240px) !important;

  }

  html:not(.demo-phone) body.demo-console-body .adm-bottom-nav {

    display: none !important;

  }

  html:not(.demo-phone) body.demo-console-body .adm-content {

    padding-bottom: 1.25rem !important;

    scroll-padding-bottom: 1.25rem !important;

  }

}



html.demo-phone body.demo-console-body .adm-sidebar,

html.demo-phone body.demo-console-body #admSidebar,

html.demo-phone body.demo-console-body .adm-overlay,

html.demo-phone body.demo-console-body .adm-menu-btn {

  display: none !important;

  visibility: hidden !important;

  left: -100vw !important;

  width: 0 !important;

  height: 0 !important;

  pointer-events: none !important;

  opacity: 0 !important;

}

html.demo-phone body.demo-console-body .adm-main {

  margin-left: 0 !important;

  width: 100% !important;

}

html.demo-phone body.demo-console-body .adm-bottom-nav {

  display: flex !important;

  visibility: visible !important;

}