/* ============================================================
   투어 가이드 히어로 띠 — Hub · Must-see · How to visit 공통.
   히어로를 화면 전체 너비 띠(.guide-hero)로 감싸고, 맨 뒤 <canvas>에
   js/guide-hero.js 가 WebGL 그라데이션을 그린다. WebGL 이 없거나 스크립트가
   안 돌면 캔버스는 투명한 채로 남고 --paper-2 단색이 보인다.
   유리 질감 토큰(--glass-*)은 tokens.css 에 있다.
   ============================================================ */

.guide-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper-2);
}
/* Must-see · How to visit: 히어로 아래 구분선. Hub 는 정보 바가 끝을 맡는다. */
.guide-hero--rule { border-bottom: 1px solid var(--border); }

.guide-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.guide-hero-bg.is-ready { opacity: 1; }

.guide-hero > :not(.guide-hero-bg) { position: relative; z-index: 1; }