/* The expanded panel and the compact icon rail share the same navigation rows. */
:root {
  --ah-sidebar-collapsed-width: 64px;
  --ah-heading-top: calc(clamp(16px, 2.2vh, 30px) + clamp(28px, 5vh, 56px));
}
.ah-sidebar-collapse {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #778399;
  box-shadow: none;
}
.ah-sidebar-collapse:hover { background: #ffffff08; color: #e4efff; }
.ah-sidebar-toggle-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ah-sidebar-toggle-icon-open { display: none; }
/* 스크롤바가 있는 페이지와 없는 페이지를 오갈 때 본문이 옆으로 밀리지 않게 자리를 늘 비워 둔다 */
html { scrollbar-gutter: stable; }
.ah-preauth main { margin-left: 0 !important; }
.ah-preauth .footer { width: 100% !important; margin-left: 0 !important; }

@media (min-width: 768px) {
  :is(body.ah-app, body.ah-admin-app) .ah-sidebar {
    height: 100dvh;
    padding: 0 12px 64px !important;
    overflow: visible;
  }
  :is(body.ah-app, body.ah-admin-app) .ah-sidebar > .container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }
  :is(body.ah-app, body.ah-admin-app) .ah-sidebar .navbar-brand {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    padding: calc(var(--ah-heading-top) - 8px) 12px 22px;
    margin: 0;
  }
  :is(body.ah-app, body.ah-admin-app) .ah-sidebar .ah-logo { width: 116px; height: 54px; object-fit: contain; }
  :is(body.ah-app, body.ah-admin-app) .ah-sidebar .navbar-collapse {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  :is(body.ah-app, body.ah-admin-app) .ah-sidebar .nav-link {
    position: relative;
    flex-shrink: 0;
    justify-content: flex-start;
    height: 40px;
    min-height: 40px;
    white-space: nowrap;
    overflow: hidden;
  }
  .ah-sidebar .ah-nav-icon { flex: 0 0 20px; width: 20px; text-align: center; }
  .ah-sidebar .ah-nav-label { min-width: 0; max-width: 180px; overflow: hidden; opacity: 1; }
  html.ah-sidebar-ready .ah-sidebar { transition: width 280ms cubic-bezier(.22, 1, .36, 1), padding 280ms cubic-bezier(.22, 1, .36, 1); }
  html.ah-sidebar-ready :is(.ah-app, .ah-admin-app) :is(main, .footer),
  html.ah-sidebar-ready .ah-event-gate { transition: margin-left 280ms cubic-bezier(.22, 1, .36, 1), width 280ms cubic-bezier(.22, 1, .36, 1); }
  html.ah-sidebar-ready .ah-sidebar .nav-link { transition: padding 280ms cubic-bezier(.22, 1, .36, 1), gap 280ms cubic-bezier(.22, 1, .36, 1), background-color 140ms, color 140ms; }
  html.ah-sidebar-ready .ah-sidebar .ah-nav-label { transition: max-width 280ms cubic-bezier(.22, 1, .36, 1), opacity 140ms ease; }
  html.ah-sidebar-ready:not(.ah-sidebar-collapsed) .ah-sidebar .ah-nav-label { transition-delay: 0ms, 100ms; }
  html.ah-sidebar-ready .ah-sidebar .navbar-brand { transition: opacity 140ms ease; }
  html.ah-sidebar-ready:not(.ah-sidebar-collapsed) .ah-sidebar .navbar-brand { transition-delay: 100ms; }
  body.ah-app .ah-sidebar .dropdown-menu {
    position: fixed !important;
    inset: auto auto 62px calc(var(--ah-sidebar-width) + 8px) !important;
    transform: none !important;
    max-height: min(420px, 60dvh);
    overflow-y: auto;
  }
  html.ah-sidebar-collapsed :is(body.ah-app, body.ah-admin-app) .ah-sidebar {
    width: var(--ah-sidebar-collapsed-width);
    padding-inline: 10px !important;
  }
  html.ah-sidebar-collapsed :is(body.ah-app, body.ah-admin-app) .ah-sidebar .navbar-brand {
    display: flex !important;
    align-items: center;
    padding-inline: 0;
    opacity: 0;
    pointer-events: none;
  }

  html.ah-sidebar-collapsed :is(body.ah-app, body.ah-admin-app) .ah-sidebar .navbar-toggler { display: none !important; }
  html.ah-sidebar-collapsed :is(body.ah-app, body.ah-admin-app) .ah-sidebar .navbar-collapse { display: flex !important; }
  html.ah-sidebar-collapsed :is(body.ah-app, body.ah-admin-app) .ah-sidebar .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 40px;
    padding: 0 11px !important;
    gap: 0;
  }
  html.ah-sidebar-collapsed :is(body.ah-app, body.ah-admin-app) .ah-sidebar .nav-link .ah-nav-icon { display: inline-block !important; margin: 0; }
  html.ah-sidebar-collapsed :is(body.ah-app, body.ah-admin-app) .ah-sidebar .ah-nav-label { max-width: 0; opacity: 0; }
  html.ah-sidebar-collapsed :is(body.ah-app, body.ah-admin-app) .ah-sidebar .dropdown-toggle::after { display: none !important; }
  html.ah-sidebar-collapsed body.ah-admin-app .ah-sidebar .dropdown-menu {
    position: fixed !important;
    inset: var(--ah-menu-top, 160px) auto auto calc(var(--ah-sidebar-collapsed-width) + 8px) !important;
    transform: none !important;
    max-height: calc(100dvh - var(--ah-menu-top, 160px) - 16px);
    overflow-y: auto;
  }
  html.ah-sidebar-collapsed :is(body.ah-app, body.ah-admin-app) .ah-sidebar .ah-nav-badge {
    position: absolute;
    inset: 2px 2px auto auto;
    min-width: 12px;
    padding: 2px 3px;
    font-size: 8px;
  }
  html.ah-sidebar-collapsed :is(body.ah-app, body.ah-admin-app) .ah-sidebar .dropdown-menu { left: calc(var(--ah-sidebar-collapsed-width) + 8px) !important; }
  html.ah-sidebar-collapsed .ah-sidebar-toggle-icon-close { display: none; }
  html.ah-sidebar-collapsed .ah-sidebar-toggle-icon-open { display: block; }
  html.ah-sidebar-collapsed :is(body.ah-app, body.ah-admin-app):not(.ah-preauth) :is(main,.footer),
  html.ah-sidebar-collapsed .ah-event-gate { margin-left: var(--ah-sidebar-collapsed-width); }
  html.ah-sidebar-collapsed :is(body.ah-app, body.ah-admin-app):not(.ah-preauth) .footer { width: calc(100% - var(--ah-sidebar-collapsed-width)); }
}
@media (max-width: 767px) { .ah-sidebar-collapse { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html.ah-sidebar-ready :is(.ah-sidebar, .ah-sidebar *, .ah-app main, .ah-app .footer, .ah-admin-app main, .ah-admin-app .footer, .ah-event-gate) { transition: none !important; }
}