/* ============================================================
   virtual-tour.css — 병원 시설 둘러보기 (about/facility.html) 전용 레이어

   색은 전부 tokens.css 파생이다. 이 파일에 hex 리터럴을 새로 쓰지 말 것
   (§4 anti-requirement: 하드코딩 hex 금지 / tokens.css 단일 진실).

   색 문맥: 히어로와 같은 라이트 에디토리얼. 사진만 원본을 쓰고, UI는 전부
   페이퍼 면 + 네이비 잉크 + 골드 강조다. 사진 위 라이트 패널은 대비가 까다로워
   패널을 거의 불투명(0.95↑)하게 깔아야 네이비 잉크가 어떤 사진에서도 읽힌다.

   레이아웃: 전체화면 몰입형. 사이트 헤더 없이 100dvh를 쓰고, 그 위에
   상단 바 / 좌측 룸카드 / 하단 칩 / 우하단 미니맵을 오버레이한다.
   ============================================================ */

.tour {
  /* 골드는 두 갈래다 — 페이퍼 위 '텍스트'는 진한 골드(#7A5F28, 5.5:1)를,
     '채움'은 본래 골드(#C79B4D)를 쓴다. 채움 골드를 텍스트로 쓰면 2.3:1로 미달. */
  --tour-gold:       var(--color-accent);
  --tour-gold-fill:  var(--color-accent-fill);
  --tour-ink:        var(--color-paper);
  --tour-text:       var(--color-text);
  --tour-text-muted: var(--color-text-muted);

  /* 패널 — 흰 카드에서 페이퍼로 흐르는 135° (사이트 카드/히어로 면과 같은 계열).
     0.95는 대비 하한에서 나온 값: 어두운 사진 위에서도 보조 잉크가 5.7:1을 유지한다. */
  --tour-panel-fill: linear-gradient(135deg,
                       rgba(var(--color-white-rgb), 0.96),
                       rgba(var(--color-paper-rgb), 0.97));
  --tour-glass:      rgba(var(--color-paper-rgb), 0.92);

  --tour-hairline:      var(--color-border);          /* rgba(navy, .16) */
  --tour-hairline-gold: rgba(var(--color-accent-rgb), 0.55);
  --tour-tint:          rgba(var(--color-primary-rgb), 0.05);
  --tour-tint-strong:   rgba(var(--color-primary-rgb), 0.12);

  --tour-blur:   16px;
  --tour-card-w: 360px;
  --tour-map-w:  340px;
}

/* ============================================================
   전체화면 셸
   ============================================================ */

/* 사이트 헤더를 쓰지 않는 몰입형 페이지 — .container(max-width 1200px) 밖에
   두어야 뷰포트 폭을 쓴다. 100vw는 세로 스크롤바 폭을 포함해 가로 오버플로를
   만들므로 쓰지 않는다. */
.tour-container {
  position: relative;
  width: 100%;
  height: 100vh;    /* dvh 미지원 폴백 */
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  background: var(--tour-ink);
}

.tour {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ============================================================
   배경 사진 뷰포트 — 켄 번스 크로스페이드
   ============================================================ */

.tour-viewport {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--tour-ink);
}

.tour-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease);
  will-change: opacity;
}

.tour-layer.is-active { opacity: 1; }

.tour-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 사진 미납품 구역 — img가 로드 실패하면 JS가 is-missing을 얹는다. */
.tour-layer.is-missing img { display: none; }
.tour-layer.is-missing::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(var(--color-accent-rgb), 0.18), transparent 62%),
    linear-gradient(150deg, var(--color-paper) 0%, var(--color-paper-soft) 100%);
}

.tour-missing-note {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  text-align: center;
  color: var(--tour-text-muted);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.04em;
  pointer-events: none;
}

.tour-viewport.has-missing .tour-missing-note { display: flex; }
.tour-missing-note svg { color: var(--tour-gold); opacity: 0.8; }

/* 비네트 — 라이트 문맥에서는 사진을 어둡게 누르지 않는다. 페이지 페이퍼 색으로
   가장자리를 아주 옅게 감싸 사진이 화면 밖으로 자연스럽게 이어지게만 한다. */
.tour-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 62%, rgba(var(--color-paper-rgb), 0.42) 100%);
}

/* Ken Burns — 인접 구역이 같은 궤적을 반복하면 티가 나서 4종을 index % 4로 순환 */
@keyframes tourKenBurnsA {
  from { transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); }
  to   { transform: scale(1.18) translate3d(1.4%, 1.0%, 0); }
}
@keyframes tourKenBurnsB {
  from { transform: scale(1.18) translate3d(1.6%, 0.9%, 0); }
  to   { transform: scale(1.05) translate3d(-1.0%, -0.6%, 0); }
}
@keyframes tourKenBurnsC {
  from { transform: scale(1.04) translate3d(1.4%, -1.1%, 0); }
  to   { transform: scale(1.17) translate3d(-1.5%, 1.2%, 0); }
}
@keyframes tourKenBurnsD {
  from { transform: scale(1.16) translate3d(-1.5%, 1.1%, 0); }
  to   { transform: scale(1.05) translate3d(1.2%, -0.9%, 0); }
}

.tour-layer.kb-0 img { animation: tourKenBurnsA 19s ease-out forwards; }
.tour-layer.kb-1 img { animation: tourKenBurnsB 21s ease-out forwards; }
.tour-layer.kb-2 img { animation: tourKenBurnsC 20s ease-out forwards; }
.tour-layer.kb-3 img { animation: tourKenBurnsD 22s ease-out forwards; }

/* ============================================================
   상단 바 — 브랜드 + 컨트롤
   ============================================================ */

.tour-topbar {
  position: relative;
  z-index: 10;
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: calc(var(--sp-3) + env(safe-area-inset-top))
    calc(var(--sp-4) + env(safe-area-inset-right))
    var(--sp-3)
    calc(var(--sp-4) + env(safe-area-inset-left));
}

/* 브랜드 문구는 사진 바로 위에 놓이므로 자체 페이퍼 면을 깔아야 대비가 선다.
   (네이비 잉크를 밝은 사진 위에 그냥 얹으면 구역마다 읽힘이 달라진다) */
.tour-brand {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--tour-panel-fill);
  -webkit-backdrop-filter: blur(var(--tour-blur));
  backdrop-filter: blur(var(--tour-blur));
  border: 1px solid var(--tour-hairline);
  box-shadow: var(--shadow-md);
}

.tour-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--tour-gold);
  border: 1px solid var(--tour-hairline-gold);
  border-radius: var(--radius-sm);
  padding: 0.2em 0.6em;
  margin-bottom: 0.45em;
  text-decoration: none;
  transition: background 240ms var(--ease), color 240ms var(--ease);
}

.tour-badge:hover {
  background: var(--tour-gold-fill);
  color: var(--color-primary);
  border-color: var(--tour-gold-fill);
}

.tour-brand-title {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--tour-text);
  margin: 0;
}

.tour-brand-title span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78em;
  color: var(--tour-gold);
  margin-left: 0.45em;
}

.tour-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.7rem;
}

.tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.7em 1.25em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 260ms var(--ease), color 260ms var(--ease),
              border-color 260ms var(--ease), transform 260ms var(--ease);
}

/* 사이트 .btn-primary 정본과 동일 — 골드 채움 + 네이비 텍스트 */
.tour-btn-gold {
  background: var(--tour-gold-fill);
  color: var(--color-primary);
  box-shadow: 0 4px 15px rgba(var(--color-accent-rgb), 0.28);
}

.tour-btn-gold:hover { transform: translateY(-2px); }

/* 자동 투어가 꺼져 있을 때만 시선을 끈다 — 켜진 뒤에도 계속 뛰면 성가시다 */
.tour-btn-gold[aria-pressed="false"] { animation: tourPulseGlow 2.4s infinite; }

@keyframes tourPulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(var(--color-accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
}

.tour-btn-glass {
  background: var(--tour-panel-fill);
  -webkit-backdrop-filter: blur(var(--tour-blur));
  backdrop-filter: blur(var(--tour-blur));
  color: var(--tour-text);
  border-color: var(--tour-hairline);
  box-shadow: var(--shadow-sm);
}

.tour-btn-glass:hover {
  border-color: var(--tour-gold-fill);
  color: var(--tour-gold);
}

.tour-btn-glass[aria-pressed="true"] {
  background: var(--tour-gold-fill);
  color: var(--color-primary);
  border-color: var(--tour-gold-fill);
}

/* 이탈 링크는 투어 조작이 아니라 사이트 이동이다. 살짝 눌러 두어
   자동투어·배경음과 같은 무게로 읽히지 않게 한다. */
.tour-btn-nav-link {
  color: var(--tour-text-muted);
  box-shadow: none;
}

.tour-btn-nav-link:hover { color: var(--tour-gold); }

.tour-btn[hidden] { display: none; }

/* 음소거 상태에서는 사선, 재생 중에는 웨이브가 맥동 */
.tour-btn .ic-wave-on { display: none; }
.tour-btn[aria-pressed="true"] .ic-wave-on { display: block; animation: tourPulse 2.4s ease-in-out infinite; }
.tour-btn[aria-pressed="true"] .ic-wave-off { display: none; }
.tour-btn .ic-stop { display: none; }
.tour-btn[aria-pressed="true"] .ic-stop { display: block; }
.tour-btn[aria-pressed="true"] .ic-play { display: none; }

@keyframes tourPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ============================================================
   UI 그리드 — 좌 카드 / 중앙 여백 / 우 미니맵, 하단 칩
   ============================================================ */

.tour-ui {
  position: relative;
  z-index: 5;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--tour-card-w) minmax(0, 1fr) var(--tour-map-w);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--sp-3);
  padding: 0
    calc(var(--sp-4) + env(safe-area-inset-right))
    calc(var(--sp-3) + env(safe-area-inset-bottom))
    calc(var(--sp-4) + env(safe-area-inset-left));
  /* 카드 사이 빈 영역으로 사진이 보이고 클릭도 통과해야 한다 */
  pointer-events: none;
}

.tour-ui > * { pointer-events: auto; }

/* ---------- 좌측 룸 카드 ---------- */

.tour-room-card {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: var(--sp-3);
  border-radius: var(--radius-lg);
  background: var(--tour-panel-fill);
  -webkit-backdrop-filter: blur(var(--tour-blur));
  backdrop-filter: blur(var(--tour-blur));
  border: 1px solid var(--tour-hairline);
  box-shadow: var(--shadow-lg);
  color: var(--tour-text);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

.tour-room-card.is-swapping { opacity: 0; transform: translateX(-16px); }

.tour-card-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  color: var(--tour-gold);
  margin: 0 0 0.4em;
}

.tour-card-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--tour-text);
  margin: 0 0 0.55em;
}

.tour-card-desc {
  font-size: var(--fs-body-sm);
  line-height: 1.7;
  color: var(--tour-text-muted);
  margin: 0 0 var(--sp-2);
}

.tour-highlights {
  background: var(--tour-tint);
  border-left: 3px solid var(--tour-gold-fill);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.tour-highlights-title {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--tour-gold);
  margin: 0 0 0.5em;
}

.tour-highlights-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tour-highlights-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--tour-text);
}

.tour-highlights-list li + li { margin-top: 0.3em; }

.tour-highlights-list li::before {
  content: "✦";
  flex: none;
  font-size: 0.72em;
  color: var(--tour-gold);
}

/* ---------- 진행도 ---------- */

.tour-progress { margin-top: auto; padding-top: var(--sp-2); }

.tour-progress-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--tour-tint-strong);
  overflow: hidden;
  margin-bottom: 0.5em;
}

.tour-progress-fill {
  height: 100%;
  width: 10%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.6), var(--color-accent-fill));
  transition: width 620ms var(--ease);
}

.tour-progress-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tour-text-muted);
  margin: 0;
}

/* ---------- 이전 / 다음 ---------- */

.tour-navbtns {
  display: flex;
  gap: 0.7rem;
  margin-top: var(--sp-2);
}

.tour-btn-nav {
  flex: 1;
  padding: 0.65em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tour-hairline);
  background: var(--tour-tint);
  color: var(--tour-text);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
}

.tour-btn-nav:hover {
  background: rgba(var(--color-accent-rgb), 0.16);
  border-color: var(--tour-gold-fill);
  color: var(--tour-gold);
}

/* ---------- 하단 칩 ---------- */

.tour-selector {
  grid-column: 1 / span 2;
  grid-row: 2;
  align-self: end;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--tour-panel-fill);
  -webkit-backdrop-filter: blur(var(--tour-blur));
  backdrop-filter: blur(var(--tour-blur));
  border: 1px solid var(--tour-hairline);
  box-shadow: var(--shadow-md);
}

.tour-selector-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--tour-gold);
  margin: 0 0 0.5em;
}

.tour-chips {
  display: flex;
  gap: 0.55em;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding-bottom: 0.3em;
  margin: 0;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-accent-rgb), 0.6) transparent;
}

.tour-chips::-webkit-scrollbar { height: 5px; }
.tour-chips::-webkit-scrollbar-track { background: var(--tour-tint); border-radius: var(--radius-pill); }
.tour-chips::-webkit-scrollbar-thumb { background: rgba(var(--color-accent-rgb), 0.6); border-radius: var(--radius-pill); }

.tour-chips li { flex: none; scroll-snap-align: center; }

.tour-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  white-space: nowrap;
  padding: 0.5em 1em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--tour-hairline);
  background: var(--color-white);
  color: var(--tour-text);
  font-family: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease);
}

.tour-chip:hover {
  background: var(--color-paper-soft);
  border-color: var(--tour-gold-fill);
}

.tour-chip[aria-current="true"] {
  background: var(--tour-gold-fill);
  border-color: var(--tour-gold-fill);
  color: var(--color-primary);
  font-weight: 700;
}

.tour-chip-en {
  font-size: 0.86em;
  color: var(--tour-text-muted);
}

.tour-chip[aria-current="true"] .tour-chip-en { color: var(--color-primary); opacity: 0.75; }

/* ---------- 우하단 미니맵 ---------- */

.tour-minimap {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: end;
  padding: var(--sp-2);
  border-radius: var(--radius-lg);
  background: var(--tour-panel-fill);
  -webkit-backdrop-filter: blur(var(--tour-blur));
  backdrop-filter: blur(var(--tour-blur));
  border: 1px solid var(--tour-hairline);
  box-shadow: var(--shadow-lg);
  color: var(--tour-text);
}

.tour-minimap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  margin-bottom: 0.6em;
}

.tour-minimap-title {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--tour-text);
  margin: 0;
}

/* 정지 사진 투어라 「LIVE」류 표기는 쓰지 않는다 — 현재 위치만 표시 */
.tour-minimap-pos {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tour-gold);
  background: rgba(var(--color-accent-rgb), 0.16);
  border: 1px solid var(--tour-hairline-gold);
  border-radius: var(--radius-sm);
  padding: 0.2em 0.55em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

.tour-minimap-body {
  border-radius: var(--radius-sm);
  border: 1px solid var(--tour-hairline);
  background: var(--color-paper-soft);
  overflow: hidden;
}

.tour-map { display: block; width: 100%; height: auto; }

.tour-map-shell {
  fill: rgba(var(--color-white-rgb), 0.6);
  stroke: var(--tour-gold-fill);
  stroke-width: 3;
}

.tour-zone { cursor: pointer; }

.tour-zone-hit {
  fill: var(--tour-tint);
  stroke: rgba(var(--color-primary-rgb), 0.22);
  stroke-width: 1.5;
  transition: fill 300ms var(--ease), stroke 300ms var(--ease);
}

.tour-zone:hover .tour-zone-hit {
  fill: rgba(var(--color-accent-rgb), 0.18);
  stroke: var(--tour-gold-fill);
}

.tour-zone[aria-current="true"] .tour-zone-hit {
  fill: rgba(var(--color-accent-rgb), 0.34);
  stroke: var(--tour-gold);
  stroke-width: 3;
}

.tour-zone-label {
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 500;
  fill: var(--color-text-muted);
  text-anchor: middle;
  pointer-events: none;
  transition: fill 300ms var(--ease);
}

.tour-zone[aria-current="true"] .tour-zone-label {
  fill: var(--color-text);
  font-weight: 700;
}

.tour-zone:focus { outline: none; }
.tour-zone:focus-visible .tour-zone-hit { stroke: var(--tour-gold); stroke-width: 4; }

/* 카메라 마커 — transform-box를 view-box로 고정해야 JS가 넘기는 translate가
   viewBox 좌표(구역 중심)와 같은 계를 쓴다. fill-box면 마커 bbox 기준이라 어긋난다.
   페이퍼 위에서는 채움 골드가 2.3:1이라 마커도 진한 골드를 쓴다. */
.tour-camera {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform 760ms var(--ease);
  pointer-events: none;
}

.tour-camera-ring {
  fill: none;
  stroke: var(--tour-gold);
  stroke-width: 3;
  animation: tourCamRing 1.9s ease-out infinite;
}

@keyframes tourCamRing {
  0%   { r: 12; opacity: 0.9; }
  100% { r: 42; opacity: 0; }
}

.tour-camera-dot { fill: var(--tour-gold); }

/* ============================================================
   반응형
   ============================================================ */

@media (max-width: 1200px) {
  .tour { --tour-card-w: 320px; --tour-map-w: 290px; }
  .tour-ui { padding: 0 var(--sp-3) var(--sp-2); }
  .tour-topbar { padding: var(--sp-2) var(--sp-3); }
}

/* 미니맵을 접는다 — 세 패널이 한 줄에 들어갈 폭이 없다.
   룸카드와 칩이 정보의 핵심이라 미니맵을 먼저 희생한다. */
@media (max-width: 980px) {
  .tour-ui {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .tour-room-card {
    grid-column: 1;
    max-width: 420px;
  }
  .tour-selector { grid-column: 1; }
  .tour-minimap { display: none; }
}

@media (max-width: 640px) {
  .tour-container { height: 100vh; height: 100dvh; min-height: 480px; }
  .tour-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    padding: calc(var(--sp-2) + env(safe-area-inset-top))
      calc(var(--sp-2) + env(safe-area-inset-right))
      var(--sp-2)
      calc(var(--sp-2) + env(safe-area-inset-left));
  }
  .tour-brand { padding: var(--sp-1) var(--sp-2); }
  .tour-controls { justify-content: flex-start; }
  .tour-btn { padding: 0.55em 0.9em; font-size: var(--fs-small); }
  .tour-ui {
    padding: 0
      calc(var(--sp-2) + env(safe-area-inset-right))
      calc(var(--sp-2) + env(safe-area-inset-bottom))
      calc(var(--sp-2) + env(safe-area-inset-left));
    gap: var(--sp-2);
  }
  .tour-room-card { max-width: none; padding: var(--sp-2); }
  .tour-card-title { font-size: var(--fs-h4); }
  /* 좁은 화면에서 특화시설 박스까지 얹으면 사진이 거의 안 보인다 */
  .tour-highlights { display: none; }
  .tour-selector { padding: 0.6rem 0.8rem; }
  /* 세로로 긴 화면에서는 같은 radial이 훨씬 넓은 면적을 덮는다 */
  .tour-vignette {
    background: radial-gradient(circle at center, transparent 76%, rgba(var(--color-paper-rgb), 0.3) 100%);
  }
}

/* ============================================================
   접근성
   ============================================================ */

.tour-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tour-noscript {
  padding: var(--sp-4) var(--sp-3);
  color: var(--tour-text);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .tour-layer,
  .tour-layer img,
  .tour-room-card,
  .tour-camera,
  .tour-camera-ring,
  .tour-progress-fill,
  .tour-btn-gold {
    animation: none !important;
    transition: none !important;
  }
  .tour-layer img { transform: none !important; }
  .tour-chips { scroll-behavior: auto; }
}