/* 모바일 메뉴 시트(아래에서 올라오는 링크 목록) 공용 CSS. 테마(theme/palja/css/layout.css)와 메인 3D(teaser.css) 두 곳이 같은 마크업(theme/palja/js/pm-menu.js)을 쓴다.
   예전에는 두 파일에 같은 규칙이 따로 있었다(layout.css 는 body 배경을 덮어써 메인에서 못 불러온다). 색·모서리는 두 곳의 토큰(--pm-* / 이름 없는 쪽)을 모두 받는다.
   .pm-menu-btn 과 헤더 배치는 두 화면의 헤더 구조가 달라 각자 둔다. 640px 이하에서만 시트가 뜬다. */
.pm-sheet-wrap { display: none; }
@media (max-width: 640px) {
  .pm-sheet-wrap:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 60; pointer-events: auto; }
  .pm-sheet-back { position: absolute; inset: 0; background: rgba(60, 40, 20, .42); }
  .pm-sheet { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; max-height: 85vh; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: var(--pm-r-panel, 30px) var(--pm-r-panel, 30px) 0 0; background: var(--pm-cream, var(--cream, #fffdf9)); box-shadow: 0 -12px 40px rgba(120, 80, 40, .28); outline: 0; animation: pm-sheet-up .22s ease-out; }
  .pm-sheet-grip { width: 44px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: var(--pm-line, #ead8c4); }
  .pm-sheet-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
  .pm-sheet-list li { margin: 0; padding: 0; list-style: none; }
  .pm-sheet-link { display: flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 52px; padding: 0 18px; border-radius: var(--pm-r-card, 22px); background: var(--pm-soft, var(--soft, #fbefe2)); color: var(--pm-ink, var(--ink, #43352d)); font-size: 16px; font-weight: 700; text-decoration: none; }
  .pm-sheet-link:hover, .pm-sheet-link:active { background: var(--pm-line, #ead8c4); }
  .pm-sheet-link.pm-pill--hub, .pm-sheet-link.pill-hub { background: #ffe7a3; }
  .pm-sheet-link.pm-pill--accent { background: var(--pm-fire, var(--fire, #f4846b)); }
  .pm-sheet-link.pm-pill--admin { background: var(--pm-soft2, #f6e4d2); }
  .pm-sheet-link.pill-admin { background: #f6e4d2; }
  .pm-sheet-link:focus-visible, .pm-sheet-close:focus-visible { outline: 3px solid var(--pm-water, var(--water, #6f8fd8)); outline-offset: 2px; }
  .pm-sheet-close { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 48px; margin-top: 10px; border: 0; border-radius: var(--pm-r-pill, 999px); background: transparent; color: var(--pm-ink, var(--ink, #43352d)); font: inherit; font-size: 15px; cursor: pointer; }
  html.pm-sheet-open, html.pm-sheet-open body { overflow: hidden; }
}
@keyframes pm-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pm-sheet { animation: none !important; } }