/* ASK ALVIN 360° 線上賞屋 — 沿用 site.css 的色彩與字體 token，不另立視覺系統。
   原則：房子是主角。覆蓋層一律實色藏藍半透明、2px 圓角，不做玻璃、霓虹或動態特效。 */

/* 賞屋頁不疊全站底紋（body::after 的 film grain 會蓋在照片上） */
body.tour-page::after{display:none}

.tour-main{padding:0 0 8px}

/* ---- 外框 ---- */
.tour-stage{
  position:relative;isolation:isolate;
  width:100%;max-width:1440px;margin:0 auto;
  height:clamp(520px,calc(100vh - 66px - 72px),860px);
  background:var(--navy-deep);overflow:hidden;
  -webkit-user-select:none;user-select:none;
}
@media(min-width:761px){
  .tour-stage{margin-top:20px;width:calc(100% - 56px);border-radius:2px}
}
/* 手機：接近滿版，扣掉頂列；dvh 會跟著瀏覽器工具列伸縮 */
@media(max-width:760px){
  .tour-stage{
    height:calc(100vh - 66px);
    height:clamp(70dvh,calc(100dvh - 66px),85dvh);
  }
}
.tour-viewer{position:absolute;inset:0}
.tour-viewer.pnlm-container{background:var(--navy-deep);font-family:var(--sans)}
.tour-viewer .pnlm-load-box{background:rgba(20,32,58,.82);border-radius:2px;font-family:var(--sans)}
.tour-viewer .pnlm-load-box p{font-size:.85rem;letter-spacing:.08em}
.tour-viewer .pnlm-lbar{border-color:var(--gold)}
.tour-viewer .pnlm-lbar-fill{background:var(--gold)}
.tour-viewer .pnlm-about-msg,.tour-viewer .pnlm-panorama-info{display:none!important}

/* 全螢幕：原生 Fullscreen API 或 iPhone 的 CSS 退路 */
.tour-stage:fullscreen{width:100%;height:100%;max-width:none;margin:0;border-radius:0}
.tour-stage:-webkit-full-screen{width:100%;height:100%;max-width:none;margin:0;border-radius:0}
.tour-stage.is-pseudo-fs{
  position:fixed;inset:0;z-index:200;width:100%;height:100%;height:100dvh;
  max-width:none;margin:0;border-radius:0
}
html.tour-lock,html.tour-lock body{overflow:hidden}

/* ---- 覆蓋層共用 ---- */
.tour-ui{position:absolute;z-index:3;pointer-events:none}
.tour-ui > *{pointer-events:auto}
.tour-chip{
  background:rgba(20,32,58,.78);color:var(--cream);
  border:1px solid rgba(214,199,160,.18);border-radius:2px;
}

/* 左上：品牌與物件 */
.tour-info{top:16px;left:16px;padding:12px 16px 12px;max-width:min(78%,360px);pointer-events:none}
.tour-brand{
  display:block;font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.32em;color:var(--gold-lt);line-height:1.4
}
.tour-brand i{font-style:normal;color:#B9C2D4;letter-spacing:.16em;margin-left:.6em}
.tour-title{
  margin:4px 0 0;font-family:var(--serif);font-weight:600;
  font-size:1.18rem;letter-spacing:.04em;line-height:1.35;color:var(--cream)
}
.tour-room{
  display:flex;align-items:center;gap:8px;margin-top:6px;
  font-size:.8rem;letter-spacing:.1em;color:#D7D0C0;line-height:1.4
}
.tour-room::before{content:"";width:14px;height:1px;background:var(--gold)}
.tour-room b{color:var(--cream);font-weight:600}

/* 右上：縮放、全螢幕 */
.tour-tools{top:16px;right:16px;display:flex;flex-direction:column;gap:6px}
.tour-tool{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;padding:0;
  font:600 1.15rem/1 var(--sans);transition:border-color .2s,color .2s
}
.tour-tool:hover{border-color:var(--gold);color:var(--gold-lt)}
.tour-tool svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.tour-tool .i-exit{display:none}
.tour-stage.is-fullscreen .tour-tool .i-enter{display:none}
.tour-stage.is-fullscreen .tour-tool .i-exit{display:block}

/* 下方：房間切換列 */
.tour-scenes{
  left:50%;transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  /* width:max-content — 用 left:50% 定位時，shrink-to-fit 寬度會被限制在容器的一半，按鈕會被裁切 */
  display:flex;gap:4px;padding:4px;width:max-content;max-width:calc(100% - 24px);overflow-x:auto;
  scrollbar-width:none
}
.tour-scenes::-webkit-scrollbar{display:none}
.tour-scene-btn{
  flex:0 0 auto;min-width:72px;height:44px;padding:0 18px;cursor:pointer;
  background:transparent;color:#D7D0C0;border:1px solid transparent;border-radius:2px;
  font:600 .86rem/1 var(--sans);letter-spacing:.12em;transition:background .2s,color .2s,border-color .2s
}
.tour-scene-btn:hover{color:var(--cream);border-color:rgba(214,199,160,.28)}
.tour-scene-btn.is-active{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* 第一次操作提示 */
.tour-hint{
  left:50%;top:50%;transform:translate(-50%,-50%);
  padding:12px 18px;width:max-content;max-width:min(86%,340px);text-align:center;
  font-size:.86rem;letter-spacing:.06em;line-height:1.7;
  opacity:0;transition:opacity .5s ease;pointer-events:none
}
.tour-hint.is-in{opacity:1}
.tour-hint.is-out{opacity:0}

/* ---- 熱點：像「從這扇門走過去」的方向標，不是資訊標籤 ---- */
/* 注意：這個 div 本身就是 Pannellum 的 .pnlm-hotspot-base（position:absolute），不可覆寫 position */
.tour-hs-wrap{width:0;height:0;overflow:visible;cursor:pointer;outline:none}
.tour-hs-ring{
  position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;
  background:rgba(20,32,58,.72);border:1.5px solid var(--gold-lt);
  box-shadow:0 2px 10px rgba(0,0,0,.28);transition:transform .2s ease,background .2s ease
}
/* 向前走的 chevron */
.tour-hs-ring::before{
  content:"";position:absolute;left:50%;top:54%;width:13px;height:13px;
  border-left:2px solid var(--cream);border-top:2px solid var(--cream);
  transform:translate(-50%,-50%) rotate(45deg)
}
.tour-hs-label{
  position:absolute;left:0;top:30px;transform:translateX(-50%);white-space:nowrap;
  padding:5px 10px;border-radius:2px;background:rgba(20,32,58,.82);color:var(--cream);
  font:600 .8rem/1.2 var(--sans);letter-spacing:.12em;
  border:1px solid rgba(214,199,160,.18);pointer-events:none
}
.tour-hs-wrap:hover .tour-hs-ring,.tour-hs:focus-visible .tour-hs-ring{transform:scale(1.08);background:rgba(20,32,58,.9)}
.tour-hs:focus-visible .tour-hs-ring{outline:2px solid var(--gold);outline-offset:3px}

/* ---- 錯誤與校正 ---- */
.tour-error{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;margin:0;
  padding:14px 18px;max-width:86%;text-align:center;border-radius:2px;
  background:rgba(20,32,58,.9);color:var(--cream);font-size:.9rem
}
/* 校正面板：只在 ?align=1 時由 tour.js 建立。固定左下角、房間切換列上方，不擋中央準心 */
.tour-align{
  position:absolute;left:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:5;
  min-width:150px;padding:8px 10px 10px;border-radius:2px;
  background:rgba(0,0,0,.76);color:#fff;font:12px/1.45 ui-monospace,Consolas,Menlo,monospace;
  -webkit-user-select:text;user-select:text
}
.tour-align-head{color:#D9BE85;letter-spacing:.06em;margin-bottom:4px;white-space:nowrap}
.tour-align-grid{display:grid;grid-template-columns:auto 1fr;gap:1px 12px;margin:0}
.tour-align-grid dt{color:#9AA6BE}
.tour-align-grid dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.tour-align-copy{
  display:block;width:100%;margin-top:8px;min-height:36px;padding:0 10px;cursor:pointer;
  background:#C6A052;color:#1B2A4A;border:0;border-radius:2px;font:600 12px/1 var(--sans);letter-spacing:.08em
}
.tour-align-copy:hover{background:#D9BE85}
.tour-align-click{margin-top:6px;color:#B9C2D4;white-space:nowrap}
.tour-align-click:empty{display:none}
.tour-align-cross{
  position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;z-index:5;pointer-events:none;
  background:linear-gradient(#fff,#fff) center/1px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 1px no-repeat;
  mix-blend-mode:difference
}

/* ---- 下方說明與 CTA ---- */
.tour-below{padding:30px 0 56px}
.tour-note{margin:0;font-size:.82rem;color:var(--text-mute);letter-spacing:.03em}
.tour-cta{
  margin-top:22px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;
  gap:16px 24px;flex-wrap:wrap;border:1px solid var(--line);border-radius:2px;background:var(--panel)
}
.tour-cta h2{margin:0;font-size:1.12rem;font-weight:600;letter-spacing:.04em}
.tour-cta p{margin:4px 0 0;font-size:.86rem;color:var(--text-soft)}
.tour-cta-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---- 手機 ---- */
@media(max-width:760px){
  .tour-info{top:10px;left:10px;padding:9px 12px;max-width:calc(100% - 76px)}
  .tour-brand{font-size:.6rem;letter-spacing:.26em}
  .tour-title{font-size:1.02rem}
  .tour-room{font-size:.76rem;margin-top:4px}
  .tour-tools{top:10px;right:10px}
  .tour-scenes{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .tour-scene-btn{min-width:0;padding:0 16px;font-size:.84rem;letter-spacing:.08em}
  .tour-below{padding:22px 0 44px}
  .tour-below .wrap{padding:0 18px}
  .tour-cta{padding:18px}
  .tour-cta-actions,.tour-cta-actions .btn{width:100%;justify-content:center}
  .tour-cta-actions .btn{height:48px}
}
@media(prefers-reduced-motion:reduce){
  .tour-hint,.tour-hs-ring,.tour-scene-btn{transition:none}
}