/* 퀵메뉴 (우측 하단 고정, 전 palja 페이지 공용). 규칙 정본: docs/palja/specs/design-rules.md "3D 무대 HUD / 퀵메뉴".
   가장자리 여백·높이·간격은 3D 마을 HUD 와 같은 토큰(--hud-*)이다. teaser.css 의 :root 값과 같아야 한다(DesignRulesTest 가 확인). */
:root { --hud-gutter: 24px; --hud-ctl-h: 48px; --hud-gap: 12px; }
@media (max-width: 640px) { :root { --hud-gutter: 12px; --hud-ctl-h: 44px; --hud-gap: 8px; } }

.pm-qm {
  position: fixed; z-index: 40; box-sizing: border-box;
  right: calc(var(--hud-gutter) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--hud-gutter) + env(safe-area-inset-bottom, 0px) + var(--pm-qm-lift, 0px)); /* --pm-qm-lift: 푸터가 화면 아래에서 올라오면 푸터 위로 비켜난다(quickmenu.js) */
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--hud-gap);
  font-family: 'Pretendard Variable', system-ui, sans-serif;
}
.pm-qm[hidden], .pm-qm--hide { display: none; }
/* 공유 시트(body.psh-lock)·메뉴 시트(html.pm-sheet-open)가 열리면 비켜난다(390 에서 시트 하단 버튼을 가리던 것) */
body.psh-lock .pm-qm, html.pm-sheet-open .pm-qm { display: none; }
.pm-qm [hidden] { display: none !important; }
.pm-qm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--hud-gap); }
.pm-qm-link, .pm-qm-top, .pm-qm-fab {
  box-sizing: border-box; height: var(--hud-ctl-h); min-width: var(--hud-ctl-h); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 999px; background: var(--pm-card, rgba(255, 251, 245, .94)); color: var(--pm-ink, #43352d);
  box-shadow: var(--pm-shadow-sm, 0 6px 16px rgba(120, 80, 40, .16)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.pm-qm-link { padding: 0 18px; }
.pm-qm-top, .pm-qm-fab { padding: 0; width: var(--hud-ctl-h); }
.pm-qm-link:hover, .pm-qm-top:hover, .pm-qm-fab:hover { background: var(--pm-cream, #fffdf9); }
.pm-qm-fab[aria-expanded="true"] { background: var(--pm-soft, #fbefe2); }
.pm-qm-link:focus-visible, .pm-qm-top:focus-visible, .pm-qm-fab:focus-visible { outline: 3px solid var(--pm-focus, #6f8fd8); outline-offset: 2px; }
.pm-qm svg { display: block; flex: none; }
/* 열기 아이콘은 2x2 격자(바로가기 모음), 열리면 X. 이름은 aria-label 과 title */
.pm-qm-fab .pm-qm-ic-close, .pm-qm-fab[aria-expanded="true"] .pm-qm-ic-open { display: none; }
.pm-qm-fab[aria-expanded="true"] .pm-qm-ic-close { display: block; }
/* 인증·계정 화면(.pm-page--auth)은 한 가지 일에 집중하는 화면이라 퀵메뉴를 숨긴다: 헤더에 로그인·가입이 이미 있고, 입력칸·캡차·가상 키보드를 가리지 않는다 */
body:has(.pm-page--auth) .pm-qm { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .pm-qm-list:not([hidden]) { animation: pm-qm-in .16s ease-out; }
}
@keyframes pm-qm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media print { .pm-qm { display: none; } }