.tour-detail {
  margin-top: 9px;
  padding: 8px 9px;
  border: 1px solid #2e5058;
  background: #0d2329;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #d0e8e5;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .07em;
}

.tour-detail span:last-child {
  color: #86dfd4;
  white-space: nowrap;
}

.tour-wrap[data-tour-state=mix] .tour-detail { border-color: #5b796c; }
.tour-wrap[data-tour-state=reset] .tour-detail span:last-child { color: #9ae7c2; }
.tour-caption span:last-child { white-space: nowrap; }

.tour-photo-shape b,
.tour-photo-shape em,
.tour-photo-shape strong,
.tour-photo-shape small {
  position: absolute;
  width: 145px;
  height: 205px;
  border: 7px solid #e7f3e9;
  border-radius: 7px;
  padding: 8px;
  box-shadow: 0 18px 25px #0008;
  font-size: 14px;
  font-style: normal;
  color: #12303c;
  background: linear-gradient(160deg, #a6cebd 0 28%, #d6b18d 29% 55%, #3c6d78 56%);
  transform: rotate(-3deg);
  opacity: 0;
}
.tour-photo-shape em { background: linear-gradient(150deg, #ecbea2 0 32%, #8a9fb0 33% 55%, #315767 56%); }
.tour-photo-shape strong { background: linear-gradient(140deg, #e5dfad 0 30%, #75b3a1 31% 58%, #406775 59%); }
.tour-photo-shape small { background: linear-gradient(150deg, #a9bfd3 0 29%, #d8a88c 30% 57%, #335760 58%); }
.tour-wrap[data-tour-state=photo] .tour-photo-shape b { animation: tour-photo-one 3.8s steps(1, end) infinite; }
.tour-wrap[data-tour-state=photo] .tour-photo-shape em { animation: tour-photo-two 3.8s steps(1, end) infinite; }
.tour-wrap[data-tour-state=photo] .tour-photo-shape strong { animation: tour-photo-three 3.8s steps(1, end) infinite; }
.tour-wrap[data-tour-state=photo] .tour-photo-shape small { animation: tour-photo-four 3.8s steps(1, end) infinite; }
.tour-photo-slots { display: none; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 7px; }
.tour-photo-slots span { padding: 5px 1px; text-align: center; border: 1px solid #4a6a6e; border-radius: 4px; color: #bedbd8; font-size: 7px; font-weight: 800; }
.tour-wrap[data-tour-state=photo] .tour-photo-slots { display: grid; }
.tour-wrap[data-tour-state=photo] .tour-preview-label { bottom: 14px; padding: 4px 6px; border-radius: 4px; background: #0d1c28cc; }
.tour-wrap[data-tour-state=photo] .tour-photo-slots span:nth-child(1) { animation: tour-slot-one 3.8s steps(1, end) infinite; }
.tour-wrap[data-tour-state=photo] .tour-photo-slots span:nth-child(2) { animation: tour-slot-two 3.8s steps(1, end) infinite; }
.tour-wrap[data-tour-state=photo] .tour-photo-slots span:nth-child(3) { animation: tour-slot-three 3.8s steps(1, end) infinite; }
.tour-wrap[data-tour-state=photo] .tour-photo-slots span:nth-child(4) { animation: tour-slot-four 3.8s steps(1, end) infinite; }

@keyframes tour-photo-one { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes tour-photo-two { 0%, 24% { opacity: 0; } 25%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tour-photo-three { 0%, 49% { opacity: 0; } 50%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes tour-photo-four { 0%, 74% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes tour-slot-one { 0%, 24% { background: #316364; color: white; } 25%, 100% { background: transparent; color: #bedbd8; } }
@keyframes tour-slot-two { 0%, 24% { background: transparent; color: #bedbd8; } 25%, 49% { background: #316364; color: white; } 50%, 100% { background: transparent; color: #bedbd8; } }
@keyframes tour-slot-three { 0%, 49% { background: transparent; color: #bedbd8; } 50%, 74% { background: #316364; color: white; } 75%, 100% { background: transparent; color: #bedbd8; } }
@keyframes tour-slot-four { 0%, 74% { background: transparent; color: #bedbd8; } 75%, 100% { background: #316364; color: white; } }

@media (max-width: 610px) {
  .tour-detail { font-size: 7px; }
  .tour-phone { height: 590px; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-photo-shape b { opacity: 1; }
}