.mobile-bottom-nav,
.sidebar-close {
  display: none;
}

/*
 * App-like page movement
 * - Chromium 계열은 동일 출처 문서 사이의 View Transition을 사용합니다.
 * - 미지원 브라우저는 system-ui.js의 짧은 페이드 전환을 사용합니다.
 */
@view-transition {
  navigation: auto;
}

#util {
  view-transition-name: family-app-topbar;
}

#header {
  view-transition-name: family-app-sidebar;
}

#container {
  view-transition-name: family-app-content;
}

#footer {
  view-transition-name: family-app-footer;
}

::view-transition-old(family-app-content) {
  animation: family-route-out 150ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(family-app-content) {
  animation: family-route-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

::view-transition-old(family-app-topbar),
::view-transition-new(family-app-topbar),
::view-transition-old(family-app-sidebar),
::view-transition-new(family-app-sidebar),
::view-transition-old(family-app-bottom-nav),
::view-transition-new(family-app-bottom-nav),
::view-transition-old(family-app-footer),
::view-transition-new(family-app-footer) {
  animation-duration: 180ms;
  mix-blend-mode: normal;
}

@keyframes family-route-out {
  to {
    opacity: 0;
    transform: translateY(-3px) scale(0.997);
  }
}

@keyframes family-route-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.995);
  }
}

@keyframes family-page-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes family-dialog-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

@keyframes family-nav-pop {
  0% {
    transform: scale(0.88);
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.app-transition-fallback #container {
  animation: family-page-enter 250ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

body.app-page-leaving #container {
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

dialog[open] {
  animation: family-dialog-enter 190ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

dialog::backdrop {
  animation: family-backdrop-enter 170ms ease both;
}

@keyframes family-backdrop-enter {
  from {
    background: rgba(26, 22, 19, 0);
    backdrop-filter: blur(0);
  }
}

body.family-display-mode .mobile-bottom-nav,
body.sample-fullscreen .mobile-bottom-nav {
  display: none !important;
}

@media (max-width: 820px) {
  :root {
    --mobile-nav-height: 70px;
  }

  #util {
    height: 64px;
  }

  #util .menu-button {
    position: static;
    width: 58px;
    height: 64px;
    border-right: 1px solid #e4ddd3;
    background: #f9f7f3;
    color: #a32637;
    font-size: 27px;
  }

  #header {
    left: 0;
    width: min(84vw, 320px);
    max-width: 100%;
    transform: translateX(-100%);
    transition: transform 0.24s ease-out;
    overscroll-behavior: contain;
  }

  body.menu-collapsed #header {
    left: 0;
    transform: translateX(0);
  }

  body.menu-collapsed #util .menu-button {
    position: static;
    width: 58px;
    height: 64px;
    border: 0;
    border-right: 1px solid #e4ddd3;
    background: #f9f7f3;
    color: #a32637;
  }

  #header .logo {
    min-height: 108px;
    padding-right: 54px;
    padding-left: 24px;
    place-items: center start;
  }

  #header .side-nav {
    height: calc(100dvh - 108px);
    padding-bottom: calc(var(--mobile-nav-height) + 28px);
  }

  .sidebar-close {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 15px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(79, 68, 57, 0.13);
    border-radius: 13px;
    background: rgba(249, 247, 243, 0.72);
    color: #4e4943;
    font-size: 25px;
    cursor: pointer;
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 920;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 10px;
    display: grid;
    min-height: var(--mobile-nav-height);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px;
    border: 1px solid rgba(111, 93, 78, 0.13);
    border-radius: 20px;
    background: rgba(255, 253, 249, 0.94);
    box-shadow: 0 12px 40px rgba(65, 52, 43, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    view-transition-name: family-app-bottom-nav;
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: #8b8178;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      color 160ms ease,
      background 160ms ease,
      transform 120ms ease;
  }

  .mobile-bottom-nav i {
    font-size: 23px;
    line-height: 1;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .mobile-bottom-nav span {
    overflow: hidden;
    max-width: 100%;
    font-size: 11px;
    font-weight: 720;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-bottom-nav a.active {
    background: #f8e9e8;
    color: #ad3042;
  }

  .mobile-bottom-nav a.active i {
    animation: family-nav-pop 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .mobile-bottom-nav a:active,
  .mobile-bottom-nav button:active,
  .sidebar-close:active,
  #util .menu-button:active {
    transform: scale(0.94);
  }

  .mobile-bottom-nav a.active::after {
    position: absolute;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    content: "";
  }

  body.menu-collapsed .mobile-menu-trigger {
    background: #f1e9e0;
    color: #4a443e;
  }

  .mobile-bottom-nav a:focus-visible,
  .mobile-bottom-nav button:focus-visible,
  .sidebar-close:focus-visible,
  #util .menu-button:focus-visible {
    outline: 3px solid rgba(181, 42, 61, 0.24);
    outline-offset: 1px;
  }

  #footer {
    padding-bottom: calc(var(--mobile-nav-height) + 34px + env(safe-area-inset-bottom));
  }

  .gallery-form-actions,
  .member-form-actions {
    bottom: calc(var(--mobile-nav-height) + 18px + env(safe-area-inset-bottom)) !important;
  }

  .gallery-form-actions a,
  .gallery-form-actions button,
  .member-form-actions a,
  .member-form-actions button {
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .mobile-bottom-nav {
    right: 6px;
    left: 6px;
    border-radius: 17px;
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    min-height: 52px;
  }

  .mobile-bottom-nav i {
    font-size: 21px;
  }

  .mobile-bottom-nav span {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  #header {
    transition: none;
  }

  #container,
  dialog[open],
  dialog::backdrop,
  .mobile-bottom-nav a.active i {
    animation: none !important;
  }

  body.app-page-leaving #container,
  .mobile-bottom-nav a,
  .mobile-bottom-nav button,
  .mobile-bottom-nav i {
    transition: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Tablet and mobile drawer: desktop sidebar와 같은 시각 언어를 사용합니다. */
@media (max-width: 1000px) {
  #header {
    overflow: hidden;
    border: 1px solid rgba(91, 77, 62, 0.1);
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.5), transparent 34%),
      linear-gradient(180deg, #e7e0d6 0%, #ddd4c8 100%);
    box-shadow: 12px 0 42px rgba(57, 46, 38, 0.18);
  }

  #header::after {
    display: none;
  }

  #header .logo {
    min-height: 92px;
    padding: 12px 56px 12px 20px;
    border-bottom-color: rgba(91, 77, 62, 0.09);
    background: transparent;
    place-items: center start;
  }

  #header .brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
  }

  #header .brand-logo > span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
  }

  #header .brand-logo strong {
    font-size: 24px;
  }

  #header .brand-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    background: rgba(255, 250, 247, 0.72);
    color: #b52a3d;
    font-size: 21px;
  }

  #header .side-nav {
    height: calc(100dvh - 92px);
    padding: 11px 10px calc(var(--mobile-nav-height, 0px) + 24px);
  }

  #header .single-menu {
    display: grid;
    min-height: 50px;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 3px 0;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: #57524c;
    font-size: 14px;
    font-weight: 620;
    text-shadow: none;
  }

  #header .single-menu::before {
    display: none;
  }

  #header .single-menu i {
    position: static;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.34);
    color: #77716a;
    font-size: 20px;
  }

  #header .single-menu span {
    padding: 0;
  }

  #header .single-menu.active,
  #header .single-menu[aria-current="page"] {
    border-color: rgba(181, 42, 61, 0.1);
    background: rgba(255, 251, 248, 0.8);
    box-shadow:
      0 8px 22px rgba(91, 77, 62, 0.08),
      inset 3px 0 0 #c54858;
    color: #3a3230;
    font-weight: 760;
  }

  #header .single-menu.active i,
  #header .single-menu[aria-current="page"] i {
    background: #f6dfe1;
    color: #b52a3d;
  }
}

@media (min-width: 821px) and (max-width: 1000px) {
  body.menu-collapsed .menu-button {
    position: static;
  }
}

@media (min-width: 1001px) {
  html body.menu-collapsed #util {
    width: calc(100% - 84px) !important;
    margin-left: 84px !important;
    transition: none !important;
  }

  html body.menu-collapsed #container,
  html body.menu-collapsed #footer {
    margin-left: 84px !important;
    transition: none !important;
  }
}