:root {
  --vh: 1vh;
  --rose: #ef4d74;
  --rose-deep: #e02f63;
  --ink: #7a4a2f;
  --pink-bg: #f6a5c0;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f6a5c0;
  font-family: "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a {
  -webkit-tap-highlight-color: transparent;
}

.page-app {
  width: 100%;
  height: 100%;
}

.page-stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(var(--vh) * 100 * 1500 / 2667));
  aspect-ratio: 1500 / 2667;
  height: auto;
  overflow: hidden;
  background: #f6a5c0;
  transform: translate(-50%, -50%);
  transform-origin: center;
  container-type: inline-size;
}

.page-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 返回首頁 */
.back-home {
  position: absolute;
  left: 4%;
  top: 2.6%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.5em 0.95em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--rose-deep);
  font-size: 3.4cqw;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(180, 40, 80, 0.25);
}

.back-home::before {
  content: "‹";
  font-size: 1.4em;
  line-height: 0.7;
}

.back-home:active {
  transform: scale(0.96);
}

/* 內容卡片（含標題頭 + 米色內文區） */
.card {
  position: absolute;
  left: 50%;
  top: 8.5%;
  transform: translateX(-50%);
  width: 86%;
  z-index: 2;
}

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

/* 內文疊在米色卡片區上（可捲動） */
.card-body {
  position: absolute;
  left: 7.5%;
  right: 7.5%;
  top: 12%;
  bottom: 9%;
  padding-bottom: 0.6em;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: var(--ink);
  font-size: 3.7cqw;
  line-height: 1.7;
}

.card-body h3 {
  margin: 0.9em 0 0.35em;
  font-size: 4cqw;
  color: var(--rose-deep);
}

.card-body h3:first-child {
  margin-top: 0.2em;
}

.card-body p {
  margin: 0 0 0.7em;
}

.card-body ol,
.card-body ul {
  margin: 0 0 0.8em;
  padding-left: 1.4em;
}

.card-body li {
  margin-bottom: 0.45em;
}

.card-body .note {
  font-size: 3.2cqw;
  color: #b07a55;
}

.card-body em {
  color: var(--rose-deep);
  font-style: normal;
  font-weight: 700;
}

/* 底部頁籤：活動詳情 | 抽獎辦法 */
.tabbar {
  position: absolute;
  left: 50%;
  bottom: 2.5%;
  transform: translateX(-50%);
  width: 92%;
  z-index: 4;
  line-height: 0;
}

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

.tabbar-btn {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
}

.tabbar-btn--left { left: 0; }
.tabbar-btn--right { right: 0; }

.tabbar-btn:active {
  background: rgba(255, 255, 255, 0.18);
}

/* 目前所在頁籤的標示 */
.tabbar-btn.is-active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 12%;
  height: 5%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
}