.tour { position: relative; max-width: var(--w-content); margin: 0 auto; }
.tour__frame { margin: 0 auto; }
.tour__stage { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--ground); box-shadow: var(--sh-3); outline: none; }
.tour__stage:focus-visible { box-shadow: var(--sh-3), 0 0 0 4px rgba(169, 203, 232, .7); }
.tour__canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.tour__app { position: relative; }
.tour__app .kui [data-k] { cursor: default; }

.tour__ring { position: absolute; z-index: 8; display: none; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--indigo), 0 10px 30px rgba(20, 47, 73, .35); animation: tour-pulse 1.6s ease-out infinite; }
.tour__ring.is-calm { animation: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--indigo-line); }
.tour__ring--sub { animation: none; box-shadow: none; border: 2px dashed var(--indigo); background: rgba(65, 123, 167, .05); }
@keyframes tour-pulse {
  0% { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--indigo), 0 0 0 7px rgba(65, 123, 167, .45); }
  70% { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--indigo), 0 0 0 22px rgba(65, 123, 167, 0); }
  100% { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--indigo), 0 0 0 22px rgba(65, 123, 167, 0); }
}

.tour__bubble { position: absolute; z-index: 9; display: none; max-width: 330px; padding: 13px 18px; border-radius: var(--r-lg); background: var(--navy); color: #fff; font-family: var(--f-text); font-size: 16px; font-weight: 500; line-height: 1.65; letter-spacing: .02em; box-shadow: 0 16px 40px rgba(8, 20, 34, .35); pointer-events: none; }
.tour__bubble::after { content: ""; position: absolute; width: 14px; height: 14px; background: var(--navy); transform: rotate(45deg); border-radius: 2px; }
.tour__bubble.is-bottom::after { top: -6px; left: calc(var(--ax, 50%) - 7px); }
.tour__bubble.is-top::after { bottom: -6px; left: calc(var(--ax, 50%) - 7px); }
.tour__bubble.is-left::after { right: -6px; top: calc(var(--ay, 50%) - 7px); }
.tour__bubble.is-right::after { left: -6px; top: calc(var(--ay, 50%) - 7px); }
.tour__mark { display: inline-block; width: .62em; height: .62em; margin: 0 .12em; border-radius: 50%; background: var(--ball); box-shadow: 0 0 0 3px rgba(235, 97, 1, .22); vertical-align: .02em; }

.tour__fly { position: absolute; left: 0; top: 0; z-index: 10; width: 18px; height: 18px; border-radius: 50%; background: var(--ball); box-shadow: 0 0 0 6px rgba(235, 97, 1, .18), 0 8px 18px rgba(0, 0, 0, .25); pointer-events: none; }

.tour__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; min-height: 52px; }
.tour__info { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.tour__no { display: inline-block; padding: 3px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); color: var(--on-navy-2); font-family: var(--f-brand); font-size: 13px; letter-spacing: .06em; white-space: nowrap; }
.tour__who { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; }
.tour__who .av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.tour__caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tour__ctrl { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-left: auto; }
.tour__btn { height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r-pill); background: transparent; color: #fff; font: inherit; font-size: 14.5px; cursor: pointer; }
.tour__btn:hover { background: rgba(255, 255, 255, .12); }
.tour__btn:disabled { opacity: .35; cursor: default; background: transparent; }
.tour__btn--next { background: #fff; color: var(--navy); border-color: #fff; font-weight: 500; }
.tour__btn--next:hover { background: #eef4fa; }
.tour__dots { display: flex; gap: 6px; }
.tour__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.tour__dot.is-on { background: #fff; }
.tour__dot:last-child.is-on { background: var(--ball); }
.tour__end { display: none; flex: 1 1 auto; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.tour__end-title { color: #fff; font-family: var(--f-head); font-size: 24px; font-weight: 700; letter-spacing: .03em; }
.tour__end-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.tour.is-end .tour__end { display: flex; }
.tour.is-end .tour__btn--next { display: none; }

.tour.is-narrow .tour__bubble { display: none !important; }
.tour.is-narrow .tour__stage::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: 7; width: 22px; background: linear-gradient(90deg, var(--ground), rgba(234, 240, 246, 0)); pointer-events: none; }
.tour.is-narrow .tour__bar { flex-direction: column; align-items: stretch; gap: 10px; }
.tour.is-narrow .tour__caption { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; color: #fff; font-size: 16px; line-height: 1.7; }
.tour.is-narrow .tour__caption { min-height: 3.4em; }
.tour.is-phone .tour__stage::before { display: none; }
.tour.is-phone .tour__stage { background: #fff; }
.tour.is-narrow.is-end .tour__caption { display: block; }
.tour.is-narrow .tour__ctrl { justify-content: space-between; margin-left: 0; }
.tour.is-narrow .tour__end { justify-content: flex-start; }
.tour.is-narrow .tour__end-title { font-size: 21px; }
.tour.is-narrow .tour__end-btns { width: 100%; }
.tour.is-narrow .tour__end-btns .btn { flex: 1 1 auto; justify-content: center; }
.tour.is-narrow.is-end .tour__ctrl { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tour__ring { animation: none; }
}