:root {
  --site-width: 430px;
  --bg: #ece8e2;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: Arial, "Microsoft JhengHei", sans-serif;
}

/* 外層只負責「頁與頁」切換 */
.site {
  width: min(100%, var(--site-width));
  height: 100svh;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #fff;
  overscroll-behavior: contain;
}

.site::-webkit-scrollbar { display: none; }

.page {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #f1eee9;
}

/* 每一頁內部自己滑完整張圖 */
.page-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.page-scroll::-webkit-scrollbar { display: none; }

.artboard {
  position: relative;
  width: 100%;
  line-height: 0;
  background: #f1eee9;
}

.artboard img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* 第一張 4 格倒數：維持目前校正座標 */
.digit {
  position: absolute;
  top: 72.55%;
  width: 17.1%;
  height: 7.9%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f2f2f2;
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: clamp(34px, 10.1vw, 47px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-shadow: 0 2px 2px rgba(0,0,0,.45);
  transform: scaleX(.90);
  pointer-events: none;
}

.d1 { left: 6.20%; }
.d2 { left: 29.72%; }
.d3 { left: 53.18%; }
.d4 { left: 76.65%; }

.opened {
  position: absolute;
  left: 50%;
  top: 76.1%;
  transform: translate(-50%,-50%);
  padding: 12px 18px;
  border-radius: 8px;
  background: rgba(38,21,17,.92);
  color: #fff;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: .1em;
  z-index: 5;
}

/* 第三張點擊區 */
.hotspot {
  position: absolute;
  display: block;
  z-index: 8;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}

.address { left: 18%; top: 26.1%; width: 64%; height: 6.5%; }
.phone   { left: 27%; top: 35.2%; width: 46%; height: 5.4%; }
.ig      { left: 29.2%; top: 50.8%; width: 9.5%; height: 5.2%; }
.fb      { left: 45.2%; top: 50.8%; width: 9.5%; height: 5.2%; }
.map     { left: 61%; top: 50.8%; width: 9.5%; height: 5.2%; }

/* 右側 3 個頁碼點 */
.page-dots {
  position: fixed;
  top: 50%;
  right: max(10px, calc((100vw - min(100vw, var(--site-width))) / 2 + 8px));
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 7px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(63,46,40,.24);
}

.dot.active {
  background: rgba(141,37,37,.92);
  transform: scale(1.25);
}

@media (min-width:700px) {
  .site { box-shadow: 0 0 28px rgba(0,0,0,.08); }
}

@media (prefers-reduced-motion: reduce) {
  .site { scroll-behavior: auto; }
}


/* Visually replace the date printed in the source artwork (11.07) with 11.11. */