:root {
  --blue: #0053a2;
  --deep-blue: #003d7a;
  --pink: #f70a78;
  --white: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--deep-blue);
  background: #eaf8ff;
  font-family: Arial, Helvetica, sans-serif;
}

.poster-page {
  min-height: 100vh;
  display: block;
  background: linear-gradient(180deg, #dff6ff, #fff 45%, #d8f3ff);
}

.poster-shell {
  position: relative;
  width: min(100%, 1024px);
  aspect-ratio: 2 / 3;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 45px rgba(0, 59, 112, .18);
}

.poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hotspot {
  position: absolute;
  z-index: 10;
  display: block;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, .001);
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(247, 10, 120, .3);
  color: transparent;
  overflow: hidden;
}

.hotspot:focus-visible {
  outline: 4px solid #fff;
  box-shadow: 0 0 0 8px var(--pink);
}

.home-link { left: 7.5%; top: .65%; width: 6.5%; height: 2.6%; }
.tours-link { left: 16%; top: .65%; width: 9%; height: 2.6%; }
.about-link { left: 28.5%; top: .65%; width: 7%; height: 2.6%; }
.gallery-link { left: 38.5%; top: .65%; width: 8%; height: 2.6%; }
.faq-link { left: 49.5%; top: .65%; width: 5%; height: 2.6%; }
.contact-link { left: 56.5%; top: .65%; width: 8%; height: 2.6%; }
.top-book-link { left: 69.5%; top: .55%; width: 21%; height: 3%; }
.explore-link { left: 34%; top: 36.5%; width: 32%; height: 3%; }

.learn-1 { left: 2.4%; top: 62.2%; width: 10.8%; height: 2.2%; }
.book-1 { left: 14%; top: 62.2%; width: 10.8%; height: 2.2%; }
.learn-2 { left: 27.2%; top: 62.2%; width: 10.8%; height: 2.2%; }
.book-2 { left: 38.3%; top: 62.2%; width: 10.8%; height: 2.2%; }
.learn-3 { left: 51%; top: 62.2%; width: 10.8%; height: 2.2%; }
.book-3 { left: 62.3%; top: 62.2%; width: 10.8%; height: 2.2%; }
.learn-4 { left: 75.3%; top: 62.2%; width: 10.8%; height: 2.2%; }
.book-4 { left: 86.5%; top: 62.2%; width: 10.8%; height: 2.2%; }

.learn-5 { left: 2.4%; top: 78.9%; width: 10.8%; height: 2.2%; }
.book-5 { left: 14%; top: 78.9%; width: 10.8%; height: 2.2%; }
.learn-6 { left: 27.2%; top: 78.9%; width: 10.8%; height: 2.2%; }
.book-6 { left: 38.3%; top: 78.9%; width: 10.8%; height: 2.2%; }
.learn-7 { left: 51%; top: 78.9%; width: 10.8%; height: 2.2%; }
.book-7 { left: 62.3%; top: 78.9%; width: 10.8%; height: 2.2%; }
.bottom-book-link { left: 33%; top: 84%; width: 35%; height: 3%; }

.tour-detail-stack {
  width: min(100%, 1024px);
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 45px rgba(0, 59, 112, .18);
}

.detail-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  scroll-margin-top: 0;
}

.detail-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-book {
  position: absolute;
  z-index: 10;
  display: block;
  height: 7%;
  border-radius: 12px;
  background: rgba(255, 255, 255, .001);
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(247, 10, 120, .3);
}

.detail-book-left { left: 5%; top: 52.5%; width: 45%; }
.detail-book-right { left: 52%; top: 51.5%; width: 44%; }
.detail-book-center { left: 43%; top: 51.5%; width: 45%; }
.detail-book-girls { left: 53%; top: 44.5%; width: 43%; }

.back-home {
  position: fixed;
  z-index: 20;
  top: 14px;
  left: 14px;
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(0, 61, 122, .93);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 44, 87, .3);
}

.floating-book {
  position: fixed;
  z-index: 20;
  right: max(16px, calc((100vw - 1024px) / 2 + 18px));
  bottom: 18px;
  padding: 15px 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2d8b, #eb006e);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(215, 0, 91, .42);
}

.floating-book:hover, .floating-book:focus-visible,
.back-home:hover, .back-home:focus-visible { transform: translateY(-2px); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .learn-1, .book-1, .learn-2, .book-2,
  .learn-3, .book-3, .learn-4, .book-4 {
    top: 59%;
    height: 7.5%;
  }

  .learn-5, .book-5, .learn-6, .book-6,
  .learn-7, .book-7 {
    top: 75.7%;
    height: 7.5%;
  }

  .back-home { top: 8px; left: 8px; padding: 9px 12px; font-size: 11px; }
  .floating-book { right: 10px; bottom: 10px; padding: 12px 17px; font-size: 12px; }
}