/* ─────────────────────────────────────────────────────────────
   VR 360° 보기 (pano.js) — 3D 걷기 화면과 같은 화면 체계(ui.css) 위에 더하는 것만
   · 걷기 전용 조작(조이스틱 · 점프 · 아바타 · 놀이)은 숨긴다
   · 동그라미를 못 맞혔을 때 안내 · 처음 안내(세 장면) · 그림을 받는 동안 표시 · 3D 가 버거울 때 360° 보기 권하기
   ───────────────────────────────────────────────────────────── */
html.vrmode #joy, html.vrmode #jumpBtn, html.vrmode #avpick, html.vrmode #avstart { display: none !important; }
html.vrmode .stage canvas { cursor: grab; touch-action: none; }
html.vrmode .stage canvas:active { cursor: grabbing; }

/* 동그라미를 못 맞혔을 때 */
.pvhint { position: absolute; left: 50%; bottom: calc(var(--strip-h, 88px) + 26px + env(safe-area-inset-bottom, 0px)); z-index: 6; transform: translate(-50%, 8px);
  padding: 8px 16px; border-radius: 999px; background: var(--glass, rgba(13,18,16,.62)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--glass-line, rgba(255,255,255,.13)); color: var(--fg, #ecf1ed); font: 500 13px/1.4 var(--sans, sans-serif); letter-spacing: -0.02em;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.pvhint.on { opacity: 1; transform: translate(-50%, 0); }
:root[data-ui="d"] .pvhint { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

/* 전경 그림을 받는 동안 — 화면 위쪽 가운데의 가는 선 (멈춘 화면처럼 보이지 않게) */
.stage .pvbar { position: absolute; left: 50%; top: 0; z-index: 6; width: 120px; height: 2px; margin-left: -60px; overflow: hidden; opacity: 0; transition: opacity .25s; pointer-events: none; }
.stage .pvbar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--accent2, #2a9d8f); animation: pvbar 1.1s ease-in-out infinite; }
.stage.pvbusy .pvbar { opacity: 1; transition-delay: .35s; }
@keyframes pvbar { 0% { left: -40%; } 100% { left: 100%; } }

/* 처음 안내 (세 장면) */
.pvcoach { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(6, 9, 8, .52); animation: pvin .35s ease-out; }
.pvcoach .in { width: min(360px, 100%); padding: 26px 24px 18px; border-radius: 16px; background: rgba(13, 18, 16, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 18px 48px rgba(0,0,0,.45); color: #ecf1ed; font-family: var(--sans, sans-serif); letter-spacing: -0.02em; }
.pvcoach .pvic { width: 64px; height: 64px; margin: 0 0 14px; color: var(--accent2, #2a9d8f); }
.pvcoach .pvic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pvcoach .k { margin: 0; font-size: 11.5px; font-weight: 500; color: rgba(236,241,237,.62); letter-spacing: .02em; }
.pvcoach .ln { display: block; width: 28px; height: 2px; margin: 10px 0 12px; background: var(--accent2, #2a9d8f); }
.pvcoach h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.pvcoach .d { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(236,241,237,.84); word-break: keep-all; }
.pvcoach .dots { display: flex; gap: 6px; margin: 18px 0 14px; }
.pvcoach .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.22); }
.pvcoach .dots i.on { width: 18px; border-radius: 3px; background: var(--accent2, #2a9d8f); }
.pvcoach .bt { display: flex; justify-content: space-between; gap: 10px; }
.pvcoach button { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; font: 600 14px var(--sans, sans-serif); letter-spacing: -0.02em; cursor: pointer; }
.pvcoach .skip { background: transparent; color: rgba(236,241,237,.7); }
.pvcoach .skip:hover { color: #fff; }
.pvcoach .next { background: var(--accent2, #2a9d8f); color: #fff; min-width: 96px; }
.pvcoach button:focus-visible { outline: 2px solid #f2c230; outline-offset: 2px; }
@keyframes pvin { from { opacity: 0; } to { opacity: 1; } }

/* 3D 가 버거울 때 — 360° 보기 권하기 (한 번만) */
.pvsug { position: absolute; left: 50%; top: calc(76px + env(safe-area-inset-top, 0px)); z-index: 12; transform: translateX(-50%); width: min(460px, calc(100% - 32px));
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 14px; background: rgba(13, 18, 16, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 10px 30px rgba(0,0,0,.35); color: #ecf1ed; font: 500 13px/1.5 var(--sans, sans-serif); letter-spacing: -0.02em; animation: pvin .35s ease-out; }
.pvsug p { margin: 0; flex: 1; word-break: keep-all; }
.pvsug button { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; font: 600 13px var(--sans, sans-serif); cursor: pointer; }
.pvsug .go { background: var(--accent2, #2a9d8f); color: #fff; }
.pvsug .x { background: transparent; color: rgba(236,241,237,.7); padding: 0 8px; }
:root[data-ui="d"] .pvsug { top: calc(64px + env(safe-area-inset-top, 0px)); }

@media (prefers-reduced-motion: reduce) { .stage .pvbar::after { animation: none; left: 30%; } .pvcoach, .pvsug { animation: none; } }

/* 늘봄목포 위쪽 띠의 「보기 방식」 단추 (neulbom.css 의 .ib 둥근 단추 · 넓은 화면에서는 글자까지) */
.nb-top .nbview { width: auto; min-width: 38px; padding: 0 10px; gap: 6px; border-radius: 999px; font: 700 13px/1 var(--sans, 'Pretendard', sans-serif); letter-spacing: -0.02em; white-space: nowrap; }
.nb-top .nbview svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nb-top .nbview span { display: none; }
@media (min-width: 900px) { .nb-top .nbview { padding: 0 14px 0 12px; } .nb-top .nbview span { display: inline; } }
@media (max-width: 899px) { .nb-top .nbview { position: absolute; right: 12px; top: calc(var(--safe-t, 0px) + 64px); } }   /* 휴대폰: 제목이 잘리지 않게 위쪽 띠 아래 오른쪽에 둥근 단추로 */