.oe-body.oe-fp-mode { perspective: 1400px; }
.oe-fp-mode .oe-stage { transform-style: preserve-3d; }
.oe-fp-mode .oe-hud { z-index: 8; }
.oe-fp-mode .oe-scene-root {
  transform-origin: 50% 58%;
}
/* 사용자 1인칭 — 시야 가장자리 비네트(눈 주변) */
.oe-fp-mode .oe-vignette-ui {
  background:
    radial-gradient(ellipse 78% 72% at 50% 48%, transparent 42%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, transparent 22%, transparent 58%, rgba(0, 0, 0, 0.55) 100%);
}
body[data-wbpc-viewpoint="first-person"] .oe-hud .oe-hint#oe-ai-led-hint:not(.hidden),
.oe-fp-viewpoint-badge {
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.75;
  color: #b8d4f0;
}
.oe-bgm-toggle { font-size: 12px; min-width: 64px; opacity: 0.85; }
.oe-loading, .oe-offline {
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center; padding:24px; background:#050B1A;
}
.oe-hint { font-size:13px; opacity:0.7; margin-top:8px; }
.hidden { display:none !important; }
.oe-stage { position:fixed; inset:0; background:#000; }
.oe-scene-root { position:absolute; inset:0; z-index:0; }
.oe-video { width:100%; height:100%; object-fit:cover; }
.oe-vignette-ui { z-index:2; }
.oe-vignette {
  pointer-events:none; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.55) 100%);
}
.oe-hud {
  position:absolute; left:0; right:0; bottom:0; padding:20px 20px max(20px, env(safe-area-inset-bottom));
  background:linear-gradient(transparent, rgba(5,11,26,0.92));
  color:#fff;
}
.oe-scene-label { font-size:15px; font-weight:600; margin-bottom:10px; text-shadow:0 1px 4px #000; }
.oe-progress { height:3px; background:rgba(255,255,255,0.15); border-radius:2px; margin-bottom:14px; overflow:hidden; }
#oe-progress-bar { height:100%; width:0; background:linear-gradient(90deg,#5B7FD6,#5fe3e0); transition:width 0.2s linear; }
.oe-controls { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; align-items:center; }
.oe-ask-row { display:flex; gap:8px; flex:1; min-width:200px; margin-right:auto; }
.oe-ask-input {
  flex:1; min-width:140px; padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,0.25);
  background:rgba(0,0,0,0.45); color:#fff; font-size:13px;
}
.oe-btn { font-size:13px; }
.oe-video-suppressed { display:none !important; opacity:0 !important; pointer-events:none !important; }
.oe-scene-root.oe-fp-step {
  animation: oeFpWalk 0.85s ease-out;
}
@keyframes oeFpWalk {
  0% { transform: scale(1.04) translateZ(0); filter: brightness(0.85); }
  55% { transform: scale(1.01) translateZ(24px); filter: brightness(1.05); }
  100% { transform: scale(1) translateZ(0); filter: none; }
}
body.oe-city-space .oe-hud {
  background: linear-gradient(transparent, rgba(3,7,18,0.94));
  border-top: 1px solid rgba(125,211,252,0.12);
}
body.oe-city-space .oe-scene-label {
  font-family: Orbitron, "Pretendard Variable", sans-serif;
  letter-spacing: 0.04em;
  color: #e8eefc;
}
body.oe-city-space #oe-progress-bar {
  background: linear-gradient(90deg, #d4af37, #7dd3fc);
}
body.oe-space-interior .oe-hud {
  background: linear-gradient(transparent, rgba(2, 6, 15, 0.96));
  border-top: 1px solid rgba(95, 227, 224, 0.18);
}
body.oe-space-interior .oe-holo-caption {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 0 24px rgba(95, 227, 224, 0.12);
}
/* 형상화 AI = 1인칭 시야 안 동행 가이드(앞-오른쪽), 3인칭 UI 금지 */
.oe-hologram {
  position:absolute;
  left: auto;
  right: 4%;
  bottom: 22%;
  transform: none;
  width:min(320px, 38vw);
  text-align:center;
  pointer-events:none;
  z-index:6;
}
.oe-hologram.oe-shaped-ai .oe-human-holo-stage {
  display:block;
  width:min(168px, 28vw);
  height:min(196px, 26vh);
  margin:0 auto 8px;
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(60, 120, 255, 0.18), rgba(8, 10, 18, 0.92));
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(68, 153, 255, 0.22);
}
.oe-holo-ai-name {
  margin:0 0 6px;
  font-size:0.68rem;
  letter-spacing:0.12em;
  color:rgba(200, 220, 255, 0.85);
  text-shadow:0 1px 8px rgba(0,0,0,0.6);
}
/* 전시실에서도 동일 — 사용자가 걸어가며 옆에서 안내받는 1인칭 */
body.oe-museum-active .oe-hologram {
  bottom: 24%;
  right: 3%;
  left: auto;
  transform: none;
  width: min(300px, 36vw);
  z-index: 8;
}
body.oe-museum-active .oe-hologram .oe-human-holo-stage {
  width: min(150px, 26vw);
  height: min(178px, 24vh);
}
body.oe-museum-active .oe-holo-caption {
  max-height: 120px;
  font-size: 12px;
  border-color: rgba(196, 163, 90, 0.45);
  background: rgba(12, 10, 8, 0.82);
}
@media (max-width: 720px) {
  .oe-hologram {
    right: 2%;
    bottom: 28%;
    width: min(200px, 46vw);
  }
}
.oe-holo-luxury-ring {
  width:min(240px, 62vw); height:min(240px, 62vw); margin:0 auto -220px;
  border-radius:50%;
  border:1px solid rgba(201,162,39,0.35);
  box-shadow:0 0 48px rgba(68,153,255,0.22), inset 0 0 32px rgba(95,227,224,0.08);
  animation: oeHoloFloat 3.5s ease-in-out infinite;
  pointer-events:none;
}
.oe-human-holo-stage {
  width:min(280px, 72vw); height:min(320px, 42vh); margin:0 auto 10px;
  border-radius:18px; overflow:hidden;
  background:radial-gradient(ellipse 75% 70% at 50% 42%, rgba(40,100,240,0.12), rgba(5,8,16,0.92));
  box-shadow:0 12px 48px rgba(0,0,0,0.45), 0 0 24px rgba(68,153,255,0.18);
}
.oe-cube-stage { display:none; }
.oe-holo-ring { display:none; }
.oe-holo-avatar { display:none; }
.oe-holo-caption {
  background:rgba(5,11,26,0.78); border:1px solid rgba(95,227,224,0.35);
  border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.55;
  max-height:130px; overflow:auto; text-align:left;
  color:#e8f2ff;
}
@keyframes oeHoloFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
.oe-fleet-badge {
  position:absolute; top:16px; right:16px; font-size:11px; padding:8px 12px;
  background:rgba(5,11,26,0.75); border:1px solid rgba(95,227,224,0.3); border-radius:8px; color:#cfefff;
}