:root {
  --resort-text: #655f53;
  --resort-orange: #f29a4a;
}

body.nupassPage {
  margin: 0;
  color: var(--resort-text);
  font-family: "Noto Serif TC", serif;
}

.resortMain {
  overflow: hidden;
  padding-top: 88px;
  background: #faf9f5;
}

.resortHero {
  position: relative;
  min-height: 1260px;
  overflow: hidden;
  padding-bottom: 140px;
  background: linear-gradient(180deg, #fbfaf7 0%, #f8f6ed 45%, #f2f1d8 73%, #e9edbd 100%);
}

.resortHeroInner {
  position: relative;
  width: min(1640px, calc(100% - 120px));
  min-height: 1260px;
  margin: 0 auto;
}

.resortBreadcrumbs {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 48px 0 38px;
  border-bottom: 1px solid rgba(105, 95, 73, 0.25);
  color: #332f2a;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.resortBreadcrumbs i { font-style: normal; }
.resortBreadcrumbs b { font-weight: 500; }

.resortIntro {
  position: relative;
  z-index: 4;
  width: min(1040px, 86%);
  margin: 88px auto 0;
  text-align: center;
}

.resortTitle {
  position: relative;
  width: min(920px, 100%);
  height: 180px;
  margin: 0 auto;
}

.resortTitleHouses {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 88%;
  height: auto;
  transform: translate(-50%, -50%);
}

.resortTitleText {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 52%;
  height: auto;
  transform: translate(-50%, -52%);
}

.resortTitleMobile {
  display: none;
}

.resortIntro p {
  margin: 0;
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.9;
}

.resortExplorePrompt {
  width: max-content;
  max-width: 100%;
  margin: 32px auto 0;
  padding: 12px 30px;
  border-radius: 999px;
  background: var(--resort-orange);
  color: #fff;
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: center;
}

.resortMapStage {
  position: relative;
  z-index: 3;
  width: min(970px, 74%);
  aspect-ratio: 1836 / 1469;
  margin: 25px auto 0;
}

.resortMap {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.resortVillage {
  position: absolute;
  z-index: 6;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(8px 11px 0 rgba(105, 91, 66, 0.17));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.resortVillage:hover,
.resortVillage:focus-visible,
.resortVillage.is-active {
  z-index: 9;
  filter: drop-shadow(10px 14px 0 rgba(105, 91, 66, 0.2));
  transform: translateY(-7px) scale(1.06);
}

.resortVillage:focus-visible {
  outline: 2px solid var(--resort-orange);
  outline-offset: 7px;
}

.resortVillage img {
  display: block;
  width: 100%;
  height: auto;
  animation: resortIconFloat 3.4s ease-in-out infinite;
}
.resortVillage02 img { animation-delay: -0.7s; }
.resortVillage03 img { animation-delay: -1.4s; }
.resortVillage04 img { animation-delay: -2.1s; }
.resortVillage05 img { animation-delay: -2.8s; }

@keyframes resortIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .resortVillage img { animation: none; }
}
.resortVillage01 { top: 25%; left: 32%; width: 9.5%; }
.resortVillage02 { top: 49%; left: 18%; width: 14%; }
.resortVillage03 { right: 31%; bottom: 19%; width: 12.7%; }
.resortVillage04 { top: 46%; right: 20%; width: 10.3%; }
.resortVillage05 { top: 23%; right: 10%; width: 11.2%; }

.resortCards {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
}

.resortCard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(620px, 68%);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -46%) scale(0.94);
  transition: opacity 0.34s ease, transform 0.34s ease, visibility 0s linear 0.34s;
}

.resortCard.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0s;
}

.resortCard img {
  display: block;
  width: 100%;
  height: auto;
}

.resortCard > a {
  display: block;
  cursor: pointer;
  touch-action: manipulation;
}

@media (min-width: 901px) {
  .resortCard {
    width: min(525px, 54%);
  }

  .resortCard[data-card="01"] {
    top: 42%;
    left: 61%;
  }

  .resortCard[data-card="02"] {
    top: 66%;
    left: 28%;
  }

  .resortCard[data-card="03"] {
    top: 42%;
    left: 70%;
  }

  .resortCard[data-card="04"] {
    top: 56%;
    left: 45%;
  }

  .resortCard[data-card="05"] {
    top: 43%;
    left: 55%;
  }
}

.resortCardClose {
  position: absolute;
  top: 8%;
  right: 2.5%;
  width: 12%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.resortCardClose:focus-visible {
  border-radius: 50%;
  outline: 2px solid var(--resort-orange);
  outline-offset: 2px;
}

.resortCta {
  position: relative;
  min-height: 360px;
  padding: 96px 60px;
  background: url("../images/nupass/nupass_ctabg.png") center / cover no-repeat;
}

.resortCtaBox {
  position: relative;
  display: grid;
  width: min(1440px, 86%);
  min-height: 190px;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 55px;
  align-items: center;
  margin: 0 auto;
  padding: 40px 55px;
  background: url("../images/nupass/nupass_hitbox.png") center / 100% 100% no-repeat;
}

.resortCtaCopy h2 {
  margin: 0 0 20px;
  color: #5c574d;
  font-size: clamp(25px, 1.8vw, 34px);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.resortCtaCopy p {
  margin: 0;
  color: #5f5a50;
  font-size: clamp(14px, 0.98vw, 17px);
  font-weight: 500;
  letter-spacing: 0.035em;
  line-height: 1.9;
}

.resortBooking {
  display: flex;
  height: 86px;
  align-items: center;
  justify-content: center;
  background: var(--resort-orange);
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.14em;
  transition: transform 0.3s ease;
}

.resortBooking:hover { color: #fff; transform: translateY(-3px); }

@media (max-width: 1100px) {
  .resortHeroInner { width: min(100% - 64px, 1000px); }
  .resortCtaBox {
    width: 94%;
    grid-template-columns: minmax(0, 1fr) 260px;
    padding: 35px 42px;
  }
}

@media (max-width: 900px) {
  .resortMain { padding-top: 74px; }
  .resortHero {
    min-height: auto;
    padding-bottom: 80px;
  }
  .resortHeroInner { width: 100%; min-height: auto; }
  .resortBreadcrumbs {
    width: calc(100% - 48px);
    margin: 0 auto;
    padding: 26px 0 22px;
    font-size: 13px;
  }
  .resortIntro { width: 100%; margin-top: 44px; }
  .resortTitle {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 30px;
  }
  .resortTitleHouses { display: none; }
  .resortTitleText {
    position: static;
    width: 78%;
    transform: none;
  }
  .resortTitleMobile {
    display: block;
    width: 62%;
    height: auto;
  }
  .resortIntro p {
    width: min(86%, 620px);
    margin: 0 auto;
    font-size: clamp(14px, 3.75vw, 17px);
    line-height: 1.85;
  }
  .resortIntro p br { display: none; }
  .resortExplorePrompt {
    max-width: calc(100% - 64px);
    margin-top: 24px;
    padding: 10px 20px;
    font-size: clamp(12px, 3.3vw, 15px);
    letter-spacing: 0.035em;
  }
  .resortMapStage { width: 100%; margin-top: 48px; }
  .resortVillage { filter: drop-shadow(5px 7px 0 rgba(105, 91, 66, 0.16)); }
  .resortVillage:hover,
  .resortVillage:focus-visible,
  .resortVillage.is-active {
    filter: drop-shadow(6px 9px 0 rgba(105, 91, 66, 0.19));
    transform: translateY(-4px) scale(1.05);
  }
  .resortVillage01 { top: 22%; left: 28%; }
  .resortVillage02 { top: 48%; left: 5%; }
  .resortVillage03 { right: 34%; bottom: 19%; }
  .resortVillage04 { top: 44%; right: 18%; }
  .resortVillage05 { top: 20%; right: 13%; }
  .resortCard { top: 48%; width: min(92%, 620px); }
  .resortCta {
    padding: 58px 24px 54px;
  }
  .resortCtaBox {
    display: flex;
    width: min(100%, 620px);
    min-height: 245px;
    flex-direction: column;
    gap: 30px;
    padding: 32px 28px 26px;
    background-image: url("../images/nupass/nupass_hitbox_m.png");
    background-position: center;
    background-size: cover;
    text-align: center;
  }
  .resortCtaCopy h2 { margin-bottom: 18px; font-size: clamp(21px, 5.5vw, 28px); }
  .resortCtaCopy p { font-size: clamp(13px, 3.65vw, 16px); line-height: 1.9; }
  .resortCtaCopy p br { display: none; }
  .resortBooking { width: 82%; height: 66px; flex: 0 0 auto; font-size: 18px; }
}

@media (max-width: 480px) {
  .resortMapStage { margin-top: 38px; }
  .resortCard { width: 94%; }
  .resortCta { padding-right: 20px; padding-left: 20px; }
  .resortCtaBox { padding-right: 22px; padding-left: 22px; }
}