/* Pano360 Viewer 1.0.0 — 前台樣式 */
.pano360{position:relative;width:100%;max-width:100%;background:#000;color:#fff;line-height:1.4;box-sizing:border-box;
  --pano360-accent:#d9a441;--pano360-ui-bg:rgba(15,15,15,.55);--pano360-ui-fg:#fff}
.pano360 *,.pano360 *::before,.pano360 *::after{box-sizing:border-box}
.pano360__stage{position:relative;width:100%;overflow:hidden;background:#000;aspect-ratio:16/9;min-height:240px;max-height:100vh;outline:none;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.pano360__stage:focus-visible{box-shadow:inset 0 0 0 2px var(--pano360-accent)}
.pano360__canvas{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;transition:opacity .35s ease}
.pano360.is-dragging .pano360__canvas{cursor:grabbing}
.pano360:not(.has-image) .pano360__canvas{opacity:0}
.pano360.is-fading .pano360__canvas{opacity:0}
.pano360.is-placing .pano360__canvas{cursor:crosshair}
.pano360__fallback{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}

/* 熱點 */
.pano360__hotspots{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden}
.pano360-hs{position:absolute;left:0;top:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;margin:0;
  cursor:pointer;transform:translate(-50%,-50%);color:#fff;font:inherit;font-size:13px;line-height:1.3;text-shadow:0 1px 2px rgba(0,0,0,.6);outline:none;will-change:transform}
.pano360-hs.is-hidden{display:none}
.pano360-hs__icon{position:relative;width:46px;height:46px;border-radius:50%;background:var(--pano360-accent);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.45);transition:transform .2s ease}
.pano360-hs__icon::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;border:2px solid var(--pano360-accent);animation:pano360-pulse 2s ease-out infinite}
.pano360-hs__icon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;position:relative}
.pano360-hs:hover .pano360-hs__icon,.pano360-hs:focus-visible .pano360-hs__icon{transform:scale(1.12)}
.pano360-hs__label{display:none;background:rgba(0,0,0,.65);padding:4px 11px;border-radius:999px;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pano360--hs-labels .pano360-hs__label,.pano360-hs:hover .pano360-hs__label,.pano360-hs:focus-visible .pano360-hs__label,.pano360-hs.is-selected .pano360-hs__label{display:block}
.pano360-hs--info .pano360-hs__icon{background:rgba(255,255,255,.92)}
.pano360-hs--info .pano360-hs__icon::before{border-color:rgba(255,255,255,.9)}
.pano360-hs--info .pano360-hs__icon svg{stroke:#222}
.pano360-hs__text{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:240px;max-width:80vw;background:rgba(0,0,0,.82);
  padding:10px 12px;border-radius:8px;text-align:left;white-space:normal;text-shadow:none;cursor:auto}
.pano360-hs.is-open .pano360-hs__text{display:block}
.pano360-hs.is-selected .pano360-hs__icon{box-shadow:0 0 0 3px #fff,0 4px 14px rgba(0,0,0,.45)}
.pano360--editor .pano360-hs{cursor:move}

/* UI */
.pano360__ui{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}
.pano360__bar{position:absolute;right:12px;bottom:12px;display:flex;gap:6px;pointer-events:auto;z-index:2}
.pano360__btn{width:38px;height:38px;border-radius:8px;border:0;margin:0;padding:0;background:var(--pano360-ui-bg);color:var(--pano360-ui-fg);display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s ease;box-shadow:none;line-height:0;font-size:0}
.pano360__btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pano360__btn:hover,.pano360__btn:focus-visible{background:rgba(0,0,0,.85);color:#fff;outline:none}
.pano360__btn.is-on{background:var(--pano360-accent);color:#fff}
.pano360__close{position:absolute;top:12px;right:12px;pointer-events:auto;z-index:3;width:42px;height:42px}
.pano360__title{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:15px;font-weight:600;pointer-events:none;background:var(--pano360-ui-bg);padding:7px 14px;border-radius:8px;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pano360__caption{position:absolute;left:12px;top:12px;background:var(--pano360-ui-bg);padding:6px 12px;border-radius:8px;font-size:14px;max-width:60%;pointer-events:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pano360--overlay .pano360__caption{top:auto;bottom:74px;left:12px}
.pano360__hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.6);padding:10px 18px;border-radius:999px;
  font-size:14px;opacity:0;transition:opacity .5s ease;pointer-events:none;white-space:nowrap}
.pano360__hint svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pano360__hint.is-visible{opacity:1}
.pano360__scenes{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;pointer-events:auto;max-width:calc(100% - 250px);overflow-x:auto;scrollbar-width:none;z-index:2;padding:2px}
.pano360__scenes::-webkit-scrollbar{display:none}
.pano360__scene{border:2px solid rgba(255,255,255,.35);border-radius:6px;padding:0;margin:0;background:#111;cursor:pointer;width:88px;flex:0 0 auto;overflow:hidden;position:relative;color:#fff;font:inherit;line-height:1.2}
.pano360__scene img{display:block;width:100%;height:44px;object-fit:cover;opacity:.85}
.pano360__scene span{display:block;font-size:11px;padding:3px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(0,0,0,.75);text-align:center}
.pano360__scene:hover img{opacity:1}
.pano360__scene.is-current{border-color:var(--pano360-accent)}
.pano360__scene.is-current span{background:var(--pano360-accent)}
.pano360__loader{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;
  animation:pano360-spin .8s linear infinite;display:none}
.pano360.is-loading .pano360__loader{display:block}
.pano360.is-loading.is-soft .pano360__loader{width:22px;height:22px;left:auto;right:16px;top:16px;margin:0;border-width:2px;opacity:.8}
.pano360__msg{position:absolute;top:0;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;text-align:center;padding:20px;background:rgba(0,0,0,.55);font-size:14px;pointer-events:none}
.pano360.has-msg .pano360__msg{display:flex}

/* 全螢幕 */
.pano360:fullscreen,.pano360:-webkit-full-screen,.pano360:-moz-full-screen{width:100vw;height:100vh;background:#000}
.pano360:fullscreen .pano360__stage,.pano360:-webkit-full-screen .pano360__stage,.pano360:-moz-full-screen .pano360__stage{height:100% !important;aspect-ratio:auto;max-height:none;min-height:0}
.pano360--pseudofs{position:fixed !important;top:0;left:0;right:0;bottom:0;z-index:999999;width:100vw !important;height:100vh !important;margin:0 !important;border-radius:0 !important}
.pano360--pseudofs .pano360__stage{height:100% !important;aspect-ratio:auto;max-height:none;min-height:0}
body.pano360-noscroll{overflow:hidden !important}

/* 覆蓋層（按鈕模式） */
.pano360-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999999;background:#000;display:flex;animation:pano360-fadein .25s ease}
.pano360-overlay .pano360{flex:1 1 auto;width:100%;height:100%}
.pano360-overlay .pano360__stage{height:100%;aspect-ratio:auto;max-height:none;min-height:0}

/* 開啟按鈕 */
.pano360-btnwrap{margin:14px 0}
.pano360-btnwrap.is-center{text-align:center}
.pano360-btnwrap.is-right{text-align:right}
.pano360-btnwrap.is-block .pano360-btn{display:flex;width:100%;justify-content:center}
.pano360-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 24px;border-radius:999px;background:var(--pano360-accent,#d9a441);color:#fff !important;
  text-decoration:none !important;font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;border:0;box-shadow:0 3px 12px rgba(0,0,0,.18);transition:filter .15s ease,transform .15s ease}
.pano360-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.pano360-btn:hover,.pano360-btn:focus{filter:brightness(1.08);transform:translateY(-1px);color:#fff}
.pano360-btn--outline{background:transparent;color:var(--pano360-accent,#d9a441) !important;box-shadow:inset 0 0 0 2px var(--pano360-accent,#d9a441)}
.pano360-btn--outline:hover{background:var(--pano360-accent,#d9a441);color:#fff !important}
.pano360-btn--square{border-radius:6px}

@keyframes pano360-spin{to{transform:rotate(360deg)}}
@keyframes pano360-pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
@keyframes pano360-fadein{from{opacity:0}to{opacity:1}}

@media (max-width:640px){
  .pano360__scenes{max-width:calc(100% - 24px);bottom:62px}
  .pano360__scene{width:74px}
  .pano360__scene img{height:38px}
  .pano360-hs__icon{width:40px;height:40px}
  .pano360-hs__icon svg{width:20px;height:20px}
  .pano360__bar{gap:4px}
  .pano360__btn{width:36px;height:36px}
  .pano360__caption{max-width:70%;font-size:13px}
  .pano360--overlay .pano360__caption{bottom:118px}
  .pano360__hint{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .pano360-hs__icon::before{animation:none}
}