/* layout.css — 三層定位 + section 版面 + RWD */

/* 背景層：固定全屏，永遠在最底 */
.bg-stage {
  position: fixed; inset: 0; z-index: 0;
  background: var(--c-deep); /* 無 JS 時的靜態底色 */
}

/* 內容層：正常文件流，疊在背景之上 */
.content { position: relative; z-index: 1; }

.panel {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 12vh 8vw;
}
.panel__inner { max-width: var(--maxw); }
.panel__title { font-size: clamp(1.8rem, 4.5vw, 3.2rem); margin-bottom: 1rem; }
.panel__body  { font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--c-mist); }
.panel__question {
  font-family: var(--font-serif); font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: var(--c-river-l); letter-spacing: 0.1em; margin-bottom: 0.6rem;
}
.panel__place { margin-top: 1.4rem; color: var(--c-muted); font-size: 0.9rem; letter-spacing: 0.16em; }
.panel__hint  { margin-top: 2rem; color: var(--c-muted); font-size: 0.9rem; letter-spacing: 0.2em; }
.panel__cta   { margin-top: 1.6rem; color: var(--c-river-l); font-size: 0.95rem; letter-spacing: 0.08em; }

/* UI 層：頂部進度導覽 */
.journey-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 8vw; background: linear-gradient(to bottom, rgba(7,19,31,0.85), transparent);
  backdrop-filter: blur(4px);
}
.journey-nav__steps { list-style: none; display: flex; gap: clamp(16px, 6vw, 64px); padding: 0; }
.journey-nav__steps button {
  font-size: 0.85rem; letter-spacing: 0.16em; color: var(--c-muted);
  transition: color 280ms var(--ease-soft);
}
.journey-nav__steps button.is-active { color: var(--c-mist); }
.journey-nav__bar { height: 2px; background: rgba(238,243,247,0.15); border-radius: 2px; overflow: hidden; }
.journey-nav__fill { display: block; height: 100%; width: 0%; background: var(--c-river-l); transition: width 120ms linear; }

/* 地圖泊位：桌機固定右下角浮層 */
.map-dock { position: fixed; right: 3vw; bottom: 3vh; z-index: 2; width: 300px; opacity: 0; transition: opacity 500ms var(--ease-soft); }
.map-dock.is-visible { opacity: 1; }

/* RWD：手機簡化（spec §5⑤、桌機優先） */
@media (max-width: 768px) {
  .panel { padding: 14vh 7vw; min-height: 100vh; }
  .map-dock { position: fixed; right: 3vw; bottom: 3vh; width: 140px; }
  .map-dock .wsmap__card { border-width: 0.5px; border-radius: 10px; }
  .journey-nav__steps { gap: 0; justify-content: space-between; }
}