/* 퀘스트 손가락 안내(quest_guide.js — G9-2B): EFZ 손 + 대상 둘레 효과. 판 상자 층(.qg-layer — --k = 판 높이/450 — GUI 450 기준 값 × k)
   손 = guide-hand.png 23×35 도트(Codex, EFZ spr_tutorial_hend 결) · 손가락 끝(8, 0)이 대상 자리 · -8° · 맥박 = EFZ sin(t/120): 크기 1.5 ± .1(= ±6.7%) · 위아래 ±4 px, 한 바퀴 754 ms
   둘레 효과 = 대상 칸 크기 층 .qg-fx(10-25 사용자 "주위 어두워지는 거 빼고 요란하고 안 누르면 손해 느낌으로 · 이펙트가 요란하게 요동치면서 반드시 눌러야 해요"):
   금빛 테 맥박 · 퍼지는 고리 둘 · 튀어 나가는 불꽃 8 · 빨간 ! 딱지 · 1.1 초마다 한 번 요동. 움직임은 transform · opacity 만(Note20 60fps). 누름은 막지 않는다 */
.qg-layer { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 9998; pointer-events: none; }   /* 판 상자(#ui)와 같은 자리 · 크기 · 회전(quest_guide.js GfOrient.follow) — 안쪽 px = 판 안쪽 px */
.qg-fx { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 9998; pointer-events: none; opacity: 0; transition: opacity .18s ease-out; }
.qg-fx.on { opacity: 1; }
.qg-fx .qg-shake { position: absolute; inset: 0; animation: qg-shake 1.1s linear infinite; }
.qg-fx .qg-glow, .qg-fx .qg-ring { position: absolute; inset: calc(-4px * var(--k, 1)); border-radius: var(--r, 8px); }
.qg-fx .qg-glow { border: calc(2px * var(--k, 1)) solid #ffe27a;
  box-shadow: 0 0 calc(10px * var(--k, 1)) calc(3px * var(--k, 1)) rgba(255, 190, 30, .9), inset 0 0 calc(8px * var(--k, 1)) rgba(255, 228, 110, .75);
  animation: qg-glow .275s ease-in-out infinite alternate; }
.qg-fx .qg-ring { border: calc(3px * var(--k, 1)) solid #fff1a8; opacity: 0; animation: qg-ring 1.1s ease-out infinite; }
.qg-fx .qg-ring + .qg-ring { animation-delay: .55s; }
.qg-fx .qg-spark { position: absolute; left: 50%; top: 50%; width: calc(4px * var(--k, 1)); height: calc(11px * var(--k, 1)); margin: calc(-5.5px * var(--k, 1)) 0 0 calc(-2px * var(--k, 1));
  border-radius: 50%; background: linear-gradient(#fff, #ffd23c 60%, rgba(255, 150, 0, 0)); opacity: 0; animation: qg-spark 1.1s cubic-bezier(.15, .7, .3, 1) infinite; }
.qg-fx .qg-bang { position: absolute; right: calc(-10px * var(--k, 1)); top: calc(-12px * var(--k, 1)); width: calc(17px * var(--k, 1)); height: calc(17px * var(--k, 1));
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a7a, #e8202a 55%, #a80d16); border: calc(1.5px * var(--k, 1)) solid #fff;
  box-shadow: 0 0 calc(6px * var(--k, 1)) rgba(255, 40, 40, .9); color: #fff; font: 900 calc(12px * var(--k, 1))/calc(14px * var(--k, 1)) sans-serif; text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5); animation: qg-bang .55s ease-in-out infinite alternate; }
@keyframes qg-glow { from { opacity: .55; transform: scale(1); } to { opacity: 1; transform: scale(1.04); } }
@keyframes qg-ring { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.6); } }
/* 불꽃: 대상 가장자리(--hw · --hh = 반폭 · 반높이, quest_guide.js)에서 바깥으로 22 px 튄다 — 요동과 같은 박자 */
@keyframes qg-spark {
  0%, 52% { opacity: 0; transform: translate(calc(var(--x) * var(--hw) * .8), calc(var(--y) * var(--hh) * .8)) rotate(var(--a)) scale(.4); }
  58% { opacity: 1; transform: translate(calc(var(--x) * var(--hw)), calc(var(--y) * var(--hh))) rotate(var(--a)) scale(1.2); }
  100% { opacity: 0; transform: translate(calc(var(--x) * (var(--hw) + 22px * var(--k, 1))), calc(var(--y) * (var(--hh) + 22px * var(--k, 1)))) rotate(var(--a)) scale(.3); }
}
@keyframes qg-shake {
  0%, 52%, 90%, 100% { transform: none; }
  56% { transform: translate(calc(-3px * var(--k, 1)), 0) rotate(-2.5deg) scale(1.06); }
  62% { transform: translate(calc(3px * var(--k, 1)), calc(-1px * var(--k, 1))) rotate(2.5deg) scale(1.06); }
  68% { transform: translate(calc(-2px * var(--k, 1)), calc(1px * var(--k, 1))) rotate(-2deg) scale(1.04); }
  74% { transform: translate(calc(2px * var(--k, 1)), 0) rotate(1.5deg) scale(1.03); }
  80% { transform: translate(calc(-1px * var(--k, 1)), 0) rotate(-1deg) scale(1.01); }
}
@keyframes qg-bang { from { transform: scale(.9) rotate(-12deg); } to { transform: scale(1.18) rotate(12deg); } }
.qguide { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .18s ease-out; }
.qguide.on { opacity: 1; }
.qg-layer.cut .qguide, .qg-layer.cut .qg-fx { transition: none; }   /* 대화가 열린 프레임 = 판 밖 손가락은 흐림 없이 바로 걷힘(quest_guide.js talkOut) */
.qguide .qg-hand { position: absolute; left: calc(-8px * var(--k, 1)); top: 0; width: calc(23px * var(--k, 1)); height: calc(35px * var(--k, 1));
  background: url("guide-hand.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; transform-origin: calc(8px * var(--k, 1)) 0;
  filter: drop-shadow(0 calc(2px * var(--k, 1)) calc(2px * var(--k, 1)) rgba(0, 0, 0, .55)); animation: qg-pulse .377s ease-in-out infinite alternate; }
@keyframes qg-pulse { from { transform: translateY(calc(-4px * var(--k, 1))) rotate(8deg) scale(.933); } to { transform: translateY(calc(4px * var(--k, 1))) rotate(8deg) scale(1.067); } }