/* 체력 물약(features/potion, 2026-10-27 사용자 "화면에 물약 퀵슬롯 버튼 · 1개 설정 · 빈 슬롯이면 물약 고르기") — 고품질UI 규칙(GUI 450 · 칸 52 · 아이콘 40).
   HUD 퀵슬롯 = 스킬 칸(.sk-btn)과 같은 결의 둥근 칸 46: 물약 도트 · 오른쪽 아래 개수 알약(스킬 칸 em 과 같은 금 알약) · 빈 칸 = 점선 테 + 흰 '+' · 0 병 = 흐림 + 빨간 0.
   자리 = 스킬 칸 s0(top 170~222) 아래 · 변신 단추(right 87.5) 오른쪽 · 공격 단추(top 295) 위 — 셋과 겹치지 않는다(ui/hud.css).
   체력이 자동 사용 선(rules.potion.autoBelow) 아래 = 빨간 숨쉬는 테(마셔라 신호). 연출 = 누름 눌림 · 마심 튐 · 거절 흔들림 · 등록 금빛. */
#hud .pq-btn { position: absolute; right: 26px; top: 229px; width: 46px; height: 46px; border-radius: 50%; pointer-events: auto; touch-action: none; cursor: pointer;
  background: radial-gradient(circle at 50% 38%, rgba(40, 44, 52, .62), rgba(6, 7, 10, .62)); box-shadow: 0 0 0 2px rgba(232, 201, 121, .85), 0 2px 4px #000a; transition: transform .08s ease; }
#hud .pq-btn.on { transform: scale(.9); }
#hud .pq-btn .pq-ico { position: absolute; left: 50%; top: 50%; width: 20px; height: 32px; transform: translate(-50%, -52%); image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7)); }
#hud .pq-btn .pq-n { position: absolute; right: -4px; bottom: -3px; min-width: 16px; height: 15px; padding: 0 3px; border-radius: 8px; font-size: 10px; font-weight: 900; line-height: 15px; text-align: center;
  color: #26221c; background: #e8c979; box-shadow: 0 1px 2px #0008; pointer-events: none; }
#hud .pq-btn .pq-n:empty { display: none; }
#hud .pq-btn .pq-plus { position: absolute; inset: 0; display: none; pointer-events: none; }
#hud .pq-btn .pq-plus::before, #hud .pq-btn .pq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; border-radius: 2px; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 0 2px #000; }
#hud .pq-btn .pq-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
#hud .pq-btn.empty { box-shadow: 0 0 0 2px rgba(232, 201, 121, .45), 0 2px 4px #000a; background: rgba(6, 7, 10, .45); }
#hud .pq-btn.empty::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .5); pointer-events: none; }
#hud .pq-btn.empty .pq-plus { display: block; }
#hud .pq-btn.zero .pq-ico { filter: grayscale(1) brightness(.6); opacity: .7; }
#hud .pq-btn.zero .pq-plus { display: block; opacity: .85; }
#hud .pq-btn.zero .pq-n { color: #fff; background: #b8433f; }
#hud .pq-btn.low { animation: pq-low .9s ease-in-out infinite alternate; }
@keyframes pq-low { from { box-shadow: 0 0 0 2px #e5484d, 0 0 4px 1px #e5484d88, 0 2px 4px #000a; } to { box-shadow: 0 0 0 2px #ff8a7a, 0 0 12px 4px #e5484dcc, 0 2px 4px #000a; } }
#hud .pq-btn .pq-hold { position: absolute; inset: -5px; border-radius: 50%; pointer-events: none; opacity: 0; background: conic-gradient(#fff calc(var(--hold, 0) * 360deg), rgba(255, 255, 255, .16) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); }
#hud .pq-btn.on .pq-hold { opacity: 1; }
#hud .pq-btn.pq-use .pq-ico, #hud .pq-btn.pq-got .pq-ico { animation: pq-gulp .36s cubic-bezier(.2, .9, .3, 1.4); }
#hud .pq-btn.pq-use::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; animation: pq-ring .45s ease-out forwards; }
#hud .pq-btn.pq-no { animation: pq-no .3s ease-in-out; }
#hud .pq-btn.pq-set { animation: pq-set .5s ease-out; }
@keyframes pq-gulp { 0% { transform: translate(-50%, -52%) scale(1); } 35% { transform: translate(-50%, -60%) scale(1.25) rotate(-12deg); } 100% { transform: translate(-50%, -52%) scale(1); } }
@keyframes pq-ring { from { box-shadow: 0 0 0 0 rgba(120, 255, 150, .9); } to { box-shadow: 0 0 0 12px rgba(120, 255, 150, 0); } }
@keyframes pq-no { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes pq-set { 0% { box-shadow: 0 0 0 2px #ffd770, 0 0 16px 6px #ffcf5acc, 0 2px 4px #000a; transform: scale(1.12); } 100% { transform: scale(1); } }
#hud.ctl-editing .pq-btn { opacity: .35; pointer-events: none; }

/* ---- 퀵슬롯 고르기 창(작은 팝업 = 나인패치 그대로) — 물약 줄: 칸 52 + 이름 · 회복 줄, 고른 것 = 금 테, 0 병 = 흐림 */
#ui .popup.pt-pick { width: 300px; }
#ui .pt-pick .pt-hint { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft, #6f604c); }
#ui .pt-pick .pt-rows { display: grid; gap: 6px; }
#ui .pt-pick .pt-row { position: relative; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; height: 60px; padding: 0 10px 0 4px; border: 0; border-radius: 8px; text-align: left;
  background: rgba(0, 0, 0, .1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); cursor: pointer; }
#ui .dim.fx-intro .pt-pick .pt-row { animation: pt-in .26s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i, 0) * 40ms); }
#ui .pt-pick .pt-row:active { transform: scale(.98); }
#ui .pt-pick .pt-row.on { box-shadow: inset 0 0 0 2px #e8c979, 0 0 8px rgba(232, 201, 121, .55); }
#ui .pt-pick .pt-row.off { opacity: .45; }
#ui .pt-pick .pt-row.pt-no { animation: pq-no .3s ease-in-out; }
#ui .pt-row .pt-txt { display: grid; gap: 2px; min-width: 0; }
#ui .pt-row .pt-txt b { font-size: 13.5px; font-weight: 800; }
#ui .pt-row .pt-txt small { font-size: 11px; font-weight: 700; color: var(--ink-soft, #6f604c); }
#ui .pt-row .pt-tag { padding: 0 8px; height: 22px; border-radius: 11px; font-size: 10.5px; font-style: normal; font-weight: 900; line-height: 22px; color: #26221c; background: #e8c979; }
#ui .pt-cell .icon { image-rendering: pixelated; }
@keyframes pt-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }


/* ---- 인벤토리 [퀵슬롯 등록](상세 단추 줄 맨 앞 — 고른 칸이 물약일 때만) */
#ui .inv-actions .inv-quick.on { opacity: .7; }