/* PanoViewer (vr-viewer.js) 화면 요소
   사이트 분위기에 맞출 때는 아래 변수만 덮어쓴다 (예: .my-site .pano { --pano-accent:#dd684f; --pano-radius:8px; }) */
.pano {
  --pano-bg: #1c1e21;              /* 불러오기 전 바탕 */
  --pano-fg: #ffffff;              /* 버튼·안내 글자 */
  --pano-ui-bg: rgba(0,0,0,.6);    /* 버튼·나침반 바탕 */
  --pano-ui-bg-hover: rgba(0,0,0,.8);
  --pano-ui-on-bg: #ffffff;        /* 켜진 버튼(자이로) 바탕 */
  --pano-ui-on-fg: #1c1e21;
  --pano-accent: #ff5a4b;          /* 나침반 시야 부채꼴 */
  --pano-focus: #4599ff;           /* 키보드 포커스 테두리 */
  --pano-status: #e4e6eb;
  --pano-error: #ffb4a8;
  --pano-radius: 0px;              /* 뷰어 모서리 */
  --pano-button: 36px;             /* 버튼 크기 */
  --pano-font: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
.pano { position:relative; overflow:hidden; background:var(--pano-bg); border-radius:var(--pano-radius); font-family:var(--pano-font); outline:none; user-select:none; -webkit-user-select:none;
        touch-action:pan-y; /* 피드에서는 세로 스크롤은 페이지, 가로로 끌면 회전 */ }
.pano.is-fullscreen { touch-action:none; }
.pano:focus-visible { box-shadow:inset 0 0 0 3px var(--pano-focus); }
.pano-canvas { display:block; width:100%; height:100%; cursor:grab; }
.pano.dragging .pano-canvas { cursor:grabbing; }

.pano-status { position:absolute; inset:0; display:grid; place-items:center; color:var(--pano-status); font-size:13px; pointer-events:none; }
.pano-status.error { color:var(--pano-error); }
.pano-status[hidden] { display:none; }

/* 처음 안내 문구 — 한 번 만지면 사라진다 */
.pano-hint { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:flex; align-items:center; gap:8px;
             padding:7px 14px; border-radius:18px; color:var(--pano-fg); background:var(--pano-ui-bg); font-size:12px; white-space:nowrap;
             pointer-events:none; transition:opacity .4s; }
.pano-hint-icon { font-size:15px; animation:pano-sway 1.6s ease-in-out infinite; }
.pano.touched .pano-hint { opacity:0; }
@keyframes pano-sway { 50% { transform:translateX(4px); } }

/* 나침반 (오른쪽 위) */
.pano-compass { position:absolute; top:12px; right:12px; width:44px; height:44px; padding:0; border:0; border-radius:50%;
                background:var(--pano-ui-bg); cursor:pointer; }
.pano-compass svg { display:block; width:100%; height:100%; }
.pano-compass .ring { fill:none; stroke:var(--pano-fg); stroke-opacity:.55; stroke-width:1.4; }
.pano-compass .fov { fill:var(--pano-accent); fill-opacity:.85; }
.pano-compass .dot { fill:var(--pano-fg); }
.pano-compass .north { fill:var(--pano-fg); font:700 8px var(--pano-font); text-anchor:middle; dominant-baseline:middle; }
.pano-compass:hover { background:var(--pano-ui-bg-hover); }

/* 오른쪽 아래 버튼 */
.pano-controls { position:absolute; right:12px; bottom:12px; display:flex; gap:6px; }
.pano-controls button { width:var(--pano-button); height:var(--pano-button); display:grid; place-items:center; padding:0; border:0; border-radius:50%;
                        color:var(--pano-fg); background:var(--pano-ui-bg); cursor:pointer; }
.pano-controls button:hover { background:var(--pano-ui-bg-hover); }
.pano-controls button.on { color:var(--pano-ui-on-fg); background:var(--pano-ui-on-bg); }
.pano-controls button[hidden] { display:none; }
.pano-controls button[data-act="zoomIn"], .pano-controls button[data-act="zoomOut"] { display:none; }
.pano.is-fullscreen .pano-controls button[data-act="zoomIn"], .pano.is-fullscreen .pano-controls button[data-act="zoomOut"] { display:grid; }

/* Fullscreen API 가 없는 기기(iPhone)용 전체 화면 */
.pano.pano-max { position:fixed; inset:0; z-index:1000; width:auto !important; height:auto !important; aspect-ratio:auto !important; border-radius:0 !important; }
html.pano-lock, html.pano-lock body { overflow:hidden; }
.pano:fullscreen { width:100%; height:100%; }