/* Bottom menu with a different pose of Chununrok's own white fox for each page
 * (home: guiding, catalog: handing a book, today: holding a sun charm, library:
 * dozing). The current page's fox is in colour and larger; the others rest in
 * grey. Layout/visibility rules stay in the existing .mobile-nav styles. */
@media (max-width: 700px) {
  .mobile-nav.fox-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; height: auto; min-height: 0;
    padding: 4px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: #fbf4e8; border-top: 1px solid #e4d2bb;
    box-shadow: 0 -6px 18px rgb(107 67 42 / 8%); backdrop-filter: none; }
  .fox-nav a { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; width: 100%; min-width: 0;
    min-height: 62px; padding: 0 2px 2px; border-radius: 10px; color: #9c8270; background: none; font-size: 12px; font-weight: 650;
    line-height: 1.35; text-decoration: none; white-space: nowrap; }
  .fox-nav img { display: block; width: 40px; height: 40px; object-fit: contain; filter: grayscale(1) opacity(.42);
    transition: filter .2s, transform .25s; transform-origin: 50% 100%; }
  .fox-nav a[aria-current=page] { color: #5a2e18; font-weight: 800; background: none; }
  .fox-nav a[aria-current=page] img { filter: none; transform: scale(1.32); }
  .fox-nav a:active img { transform: scale(.94); }
  .fox-nav a[aria-current=page]:active img { transform: scale(1.24); }
  .fox-nav a:focus-visible { outline: 3px solid #f3c08e; outline-offset: -3px; }
}
@media (max-width: 340px) { .fox-nav a { font-size: 11px; } .fox-nav img { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .fox-nav img { transition: none; } }