/* =============================================================================
   FTUE (First-Time User Experience) 온보딩 튜토리얼 — 스포트라이트 오버레이
   기획: onboarding-tutorial-spec.html (2026-06-30 확정)
   - 스포트라이트 = 타깃 rect 주변 4-패널 스크림(클릭 차단) + 하이라이트 링 + 손가락 + 코치.
     타깃은 자기 z-index 그대로 클릭 가능(포커스락 자연 구현, 타깃 z 조작 없음).
   - z-index 5000+ (셸 지속요소 최고=lang-switcher 4000 위).
   - 순수 시각연출은 prefers-reduced-motion 에서 정지(메커니즘 불변).
   - 모든 문구는 i18n(t) — 이 파일엔 하드코딩 카피 없음.
   ============================================================================= */

:root {
  --ftue-scrim: rgba(8, 12, 22, 0.74);
  --ftue-accent: #7fe0a0;
  --ftue-accent-glow: rgba(127, 224, 160, 0.55);
  --ftue-z: 5000;
}

/* 루트: 뷰 전환에도 body 직속으로 1벌 유지(엔진이 append). 자식이 각자 pointer-events 지정. */
#ftueRoot {
  position: fixed;
  inset: 0;
  z-index: var(--ftue-z);
  pointer-events: none;
  font-family: "Pretendard", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
}
#ftueRoot[hidden] { display: none !important; }

/* ---- 스포트라이트: 타깃 주변 4-패널 스크림(클릭 차단) ---- */
.ftue-scrim-panel {
  position: fixed;
  background: var(--ftue-scrim);
  pointer-events: auto;               /* 타깃 외 영역 클릭 차단(focus-lock) */
  -webkit-backdrop-filter: saturate(0.9);
  backdrop-filter: saturate(0.9);
  transition: opacity 0.22s ease;
}

/* ---- 타깃 하이라이트 링(글로우) — 클릭 통과 ---- */
.ftue-ring {
  position: fixed;
  border-radius: 14px;
  pointer-events: none;
  box-shadow:
    0 0 0 3px var(--ftue-accent-glow),
    0 0 22px 6px var(--ftue-accent-glow);
  animation: ftuePulse 1.6s ease-in-out infinite;
}
@keyframes ftuePulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--ftue-accent-glow), 0 0 18px 4px var(--ftue-accent-glow); }
  50%      { box-shadow: 0 0 0 4px var(--ftue-accent-glow), 0 0 30px 9px var(--ftue-accent-glow); }
}

/* 탭-캐처: 하이라이트된 구멍 위 투명 레이어. 잠긴/숨은 버튼도 탭을 받아 진행(봇에선 실제 버튼으로 forward). */
.ftue-tap-catch { position: fixed; z-index: 3; background: transparent; pointer-events: auto; cursor: pointer; }

/* 전환/스크롤 구간(스포트라이트 없음) 클릭 잠금 — 투명(스포트라이트 z-5000 아래, 팝업 위엔 팝업이 덮음). */
#ftueLock { position: fixed; inset: 0; z-index: 4998; background: transparent; pointer-events: auto; }
#ftueLock[hidden] { display: none !important; }

/* ---- 손가락 포인터 — 클릭 통과 ---- */
.ftue-finger {
  position: fixed;
  font-size: 30px;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55));
  animation: ftueTap 1.2s ease-in-out infinite;
  z-index: 1;
}
@keyframes ftueTap {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8px) scale(1.08); }
}

/* ---- 코치 말풍선 ---- */
.ftue-coach {
  position: fixed;
  max-width: 280px;
  background: #fff;
  color: #1d2330;
  border-radius: 13px;
  padding: 13px 15px;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  z-index: 2;
  animation: ftueCoachIn 0.24s ease;
}
.ftue-coach b { color: #2e8b48; }
.ftue-coach .ftue-coach-tail {
  position: absolute;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
.ftue-coach[data-tail="up"] .ftue-coach-tail {
  top: -8px; left: 22px;
  border-bottom: 8px solid #fff;
}
.ftue-coach[data-tail="down"] .ftue-coach-tail {
  bottom: -8px; left: 22px;
  border-top: 8px solid #fff;
}
.ftue-coach-next {
  display: inline-block;
  margin-top: 10px;
  background: linear-gradient(135deg, #39c46a, #2a9d54);
  color: #062313;
  border: none;
  border-radius: 9px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}
.ftue-coach-next:active { transform: translateY(1px); }
@keyframes ftueCoachIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 화면 밖 타깃 → 스크롤 안내(스크림 대신). 스크롤로 타깃이 뷰포트에 들어오면 스포트라이트로 전환 ---- */
.ftue-scroll-hint {
  position: fixed; left: 50%; transform: translateX(-50%);
  z-index: calc(var(--ftue-z) + 5); pointer-events: none; max-width: 300px; text-align: center;
}
.ftue-scroll-hint[data-pos="bottom"] { bottom: 88px; }
.ftue-scroll-hint[data-pos="top"] { top: 78px; }
.ftue-sh-coach {
  background: #fff; color: #1d2330; border-radius: 13px; padding: 11px 15px;
  font-size: 13.5px; font-weight: 600; line-height: 1.5; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.ftue-sh-dir { margin-top: 8px; font-size: 22px; font-weight: 800; color: var(--ftue-accent); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); animation: ftueBounce 1.1s ease-in-out infinite; }
@keyframes ftueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---- 스테이지 팝업(미니게임/친구/길드/지갑/완료) — prelaunch 하우스스타일 준용 ---- */
.ftue-popup {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ftue-z) + 10);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.25s ease;
}
.ftue-popup.open {
  background: rgba(0, 0, 0, 0.62);
  pointer-events: auto;
}
.ftue-popup-box {
  width: min(100%, 300px);
  background: linear-gradient(180deg, #10141f, #0c0f18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 20px 18px;
  color: #eef1f7;
  text-align: center;
  box-shadow: 0 18px 42px rgba(8, 12, 24, 0.5);
  transform: translateY(18px) scale(0.96);
  opacity: 0;
  transition: transform 0.26s ease, opacity 0.26s ease;
}
.ftue-popup.open .ftue-popup-box { transform: translateY(0) scale(1); opacity: 1; }
.ftue-popup .ph-emoji { font-size: 40px; line-height: 1; margin-bottom: 4px; }
.ftue-popup .ph-badge {
  display: inline-block;
  font-size: 10.5px; font-weight: 800;
  border-radius: 6px; padding: 3px 10px; margin-bottom: 6px;
  background: rgba(120, 160, 255, 0.16); color: #9ec0ff;
  letter-spacing: 0.5px;
}
.ftue-popup h5 { margin: 6px 2px 4px; font-size: 16px; font-weight: 800; }
.ftue-popup p { margin: 6px 2px; font-size: 12.8px; line-height: 1.55; color: #b9c0d0; }
.ftue-popup .ph-reward {
  background: rgba(231, 168, 19, 0.12);
  border: 1px solid rgba(231, 168, 19, 0.4);
  color: #ffd97a;
  border-radius: 9px; padding: 8px 10px; font-size: 11.8px; margin: 10px 0;
}
.ftue-popup .ph-lock { font-size: 11.5px; color: #ffb27a; margin-top: 8px; }
.ftue-popup .ph-games { display: flex; gap: 8px; margin: 10px 0; }
.ftue-popup .ph-gcard {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px; padding: 9px 6px;
}
.ftue-popup .ph-gcard .ic { font-size: 22px; }
.ftue-popup .ph-gcard .nm { font-size: 10px; color: #cdd3e0; margin-top: 3px; font-weight: 700; }
.ftue-popup .ftue-btn {
  display: block; width: 100%;
  border: none; border-radius: 12px;
  padding: 12px; margin-top: 12px;
  font-size: 14px; font-weight: 800; cursor: pointer;
  font-family: inherit;
  background: linear-gradient(135deg, #39c46a, #2a9d54); color: #062313;
}
.ftue-popup .ftue-btn.gold { background: linear-gradient(135deg, #ffd454, #f2b30a); color: #3b2a00; }
.ftue-popup .ftue-btn:active { transform: translateY(1px); }

/* 진행 도트(1/5 …) */
.ftue-progress { display: flex; gap: 6px; justify-content: center; margin: 12px 0 2px; }
.ftue-progress i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.ftue-progress i.on { background: var(--ftue-accent); }

/* 축소 모션 대응: 순수 연출만 정지(진행/포커스락은 불변) */
@media (prefers-reduced-motion: reduce) {
  .ftue-ring, .ftue-finger, .ftue-sh-dir { animation: none !important; }
  .ftue-scrim-panel, .ftue-popup, .ftue-popup-box, .ftue-coach { transition: none !important; }
}