/* ============================================================
   p!n fitness — 手繪貼紙風
   ============================================================ */
:root{
  --cream:  #FBF2E2;
  --paper:  #FFFDF6;
  --ink:    #2B2620;
  --green:  #AEDB96;
  --green-d:#5E9B4E;
  --pink:   #F5C3CF;
  --pink-d: #E2648B;
  --yellow: #F5D96E;
  --radius: 18px;
  --bd:     1.5px solid var(--ink);
  --shadow: 0 12px 32px rgba(43,38,32,.14);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:110px; }

body{
  font-family:'PingFang TC','Microsoft YaHei','Microsoft JhengHei','Noto Sans TC',sans-serif;
  background:transparent;
  color:var(--ink);
  line-height:1.7;
}

/* ---------- 背景相輪播 ---------- */
.bg-slides{ position:fixed; inset:0; z-index:-1; }
.bg-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:brightness(1.15) saturate(.8);
  opacity:0;
  transition:opacity 1.6s ease;
}
.bg-slide.on{ opacity:1; }
.bg-veil{
  position:absolute; inset:0;
  background:#fff;
  opacity:.7;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }

/* ---------- 共用元件 ---------- */
.btn{
  display:inline-block;
  font-family:inherit;
  font-size:1rem;
  padding:.65em 1.4em;
  border:var(--bd);
  border-radius:999px;
  background:var(--paper);
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(43,38,32,.18); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ghost{ background:var(--paper); }
.btn-wa{ background:var(--green); }
.btn-sm{ font-size:.9rem; padding:.45em 1.1em; }

.sticker{
  display:inline-block;
  padding:.3em 1em;
  border:var(--bd);
  border-radius:999px;
  font-weight:700;
}
.sticker-green{ background:var(--green); }

.card{
  background:var(--paper);
  border:var(--bd);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 24px;
  position:relative;
}

.chip{
  display:inline-block;
  border:2px solid var(--ink);
  border-radius:999px;
  padding:.15em .8em;
  font-size:.9rem;
  background:var(--paper);
}
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:18px;
  padding:10px 20px;
  background:#fff;
  border-bottom:1px solid #2B262022;
}
.logo{
  font-size:1.5rem; font-weight:700;
  text-decoration:none; letter-spacing:.02em;
  display:flex; align-items:center; gap:16px;
}
.logo-img{ height:44px; width:auto; max-width:100%; }
.nav-links{ display:flex; gap:4px; margin-left:auto; }
.nav-links a{
  text-decoration:none; padding:.35em .8em;
  border-radius:999px; border:2px solid transparent;
}
.nav-links a:hover{ border-color:var(--ink); background:var(--paper); }

/* ---------- HERO ---------- */
.hero{
  max-width:80%;
  margin:48px auto 0;
  padding:28px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(400px,480px);
  gap:36px;
  align-items:stretch;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
}

/* 場地相 mosaic：4 欄 x 2 行，feature 相佔兩格 → 啱啱好 7 張矩形 */
.hero-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.hg{
  overflow:hidden;
  aspect-ratio:3/4;
}
.hg img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .45s ease, filter .45s ease;
}
.hg:hover img{ transform:scale(1.06); filter:brightness(1.05); }
.hg-feature{ grid-column:span 2; aspect-ratio:3/2; }

/* 側邊文字欄 — 同 mosaic 同一白 panel */
.hero-card{
  color:var(--ink);
  padding:20px 14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.hero-title{
  font-size:clamp(1.75rem,2.6vw,2.5rem);
  font-weight:700;
  line-height:1.3;
}
.hero-addr{
  font-size:.98rem;
  line-height:1.7;
  color:#2B2620CC;
  margin-top:4px;
}
.hero-points{
  list-style:none;
  margin:18px 0 0;
}
.hero-points li{
  font-size:1.15rem;
  font-weight:600;
  line-height:1.9;
  color:#000;
  padding:.2em 0 .2em 1.1em;
  position:relative;
}
.hero-points li::before{
  content:"•";
  position:absolute; left:0;
  color:var(--green-d);
  font-size:1.1em;
  line-height:inherit;
}
.hero-card .cta-row .btn{ font-size:1.1rem; padding:.75em 1.7em; }
.btn-line{
  background:transparent;
  color:var(--ink);
  border-color:#2B262055;
}
.btn-line:hover{ border-color:var(--ink); }

.polaroid{
  background:var(--paper);
  border:var(--bd);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:12px 12px 14px;
}
.polaroid img{ border-radius:8px; border:var(--bd); }
.polaroid figcaption{ padding:8px 4px 0; font-size:.9rem; color:#0009; }

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ---------- 分格線 ---------- */
.divider{
  border:none;
  border-top:1px solid #2B262022;
  margin:56px 0;
}

/* ---------- BOOKING ---------- */
.book{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:36px 40px 44px;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
}
.sec-title{
  font-size:clamp(1.7rem,4vw,2.4rem);
  margin-bottom:26px;
  position:relative;
  display:inline-block;
}

.tab-bar{
  display:inline-flex; gap:6px;
  background:var(--paper);
  border:var(--bd); border-radius:999px;
  padding:6px; box-shadow:var(--shadow);
  margin-bottom:34px;
}
.tab-btn{
  font-family:inherit; font-size:1.05rem; font-weight:700;
  border:2.5px solid transparent; border-radius:999px;
  background:transparent; color:var(--ink);
  padding:.5em 1.5em; cursor:pointer;
  transition:background .15s ease;
}
.tab-btn:hover{ background:var(--cream); }
.tab-btn.active{ background:var(--green); border-color:var(--ink); }

.panel{ display:none; }
.panel.active{ display:block; animation:pop .25s ease; }
@keyframes pop{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

.panel-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:36px;
  align-items:start;
}
.panel-info h3{ font-size:1.5rem; margin-bottom:12px; }
.panel-info .hl{
  background:linear-gradient(transparent 55%, var(--yellow) 55%);
  display:inline;
  padding:0 2px;
}
.ticks{ list-style:none; margin:16px 0 22px; }
.ticks li{ padding-left:1.7em; position:relative; margin-bottom:.5em; }
.ticks li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--green-d); font-weight:700;
}
.ticks small{ color:#0009; font-size:.85em; }

.steps{ margin:16px 0 22px; padding-left:1.4em; }
.flow-label{ font-size:.9rem; color:#2B262099; margin:14px 0 4px; }
.panel-p{ font-size:.95rem; color:#000; line-height:1.9; margin-bottom:14px; }
[data-panel="pt"] .ticks li{ color:#000; }
[data-panel="pt"] .flow-label strong{ color:#000; }
[data-panel="rental"] .steps,
[data-panel="event"] .steps{ margin:0 0 22px; }
[data-panel="rental"] .steps li,
[data-panel="event"] .steps li{ font-size:.9rem; color:#2B2620B3; }
.steps li{ margin-bottom:.4em; }

/* 價錢貼紙 — 微斜疊住 */
.price-stack{ display:grid; gap:14px; }
.price-tag{
  display:flex; justify-content:space-between; align-items:baseline;
  border:var(--bd); border-radius:14px;
  background:var(--paper);
  padding:12px 18px;
  font-size:1.05rem;
}
.price-tag .p{ font-size:1.5rem; font-weight:700; }
.price-tag:nth-child(odd){ background:#EDF6E7; }
.price-note{
  font-size:.85rem; color:#0009;
}

.panel-photo{ width:min(100%,300px); justify-self:center; }

/* ---------- IG 跑馬燈 ---------- */
/* ---------- HERO MAP ---------- */
.hero-map{
  margin:16px 0 0;
  height:170px;
  border-radius:12px;
  overflow:hidden;
  border:var(--bd);
}
.hero-map iframe{ display:block; width:100%; height:226px; border:0; margin-top:-56px; }

/* ---------- PT IG 格仔 ---------- */
.pt-ig{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:14px;
  align-self:stretch;
}
.pt-cell{
  display:block; height:100%;
  position:relative;
  border:var(--bd); border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--paper);
  cursor:pointer;
}
.pt-go{
  position:absolute; right:8px; bottom:8px; z-index:3;
  width:30px; height:30px;
  display:grid; place-items:center;
  background:#fff; border:var(--bd); border-radius:50%;
  font-size:.95rem; font-weight:700; color:var(--ink);
  text-decoration:none; line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.pt-ig video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.pt-ig video.v-on{ opacity:1; }
.pt-ig img{
  width:100%; height:100%; object-fit:contain;
  transition:transform .35s ease;
}
.pt-cell:hover img{ transform:scale(1.06); }

.feed{ padding:20px 0 90px; text-align:center; }
.feed .sec-title{ display:inline-block; }
.feed-sub{ margin:6px 0 26px; }
.feed-sub a{ font-weight:700; text-decoration-color:var(--pink-d); }

.marquee{
  overflow:hidden;
  padding:26px 0 30px;
  /* 兩邊淡出 */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{
  display:flex; gap:22px;
  width:max-content;
  animation:scroll 42s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

.ig-card{
  flex:0 0 auto;
  width:190px;
  background:var(--paper);
  border:var(--bd); border-radius:12px;
  box-shadow:var(--shadow);
  padding:9px 9px 12px;
  text-decoration:none;
  transition:transform .2s ease;
}
.ig-card:hover{ transform:translateY(-4px); }
.ig-card img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:var(--bd); border-radius:8px;
}
.ig-card .cap{
  font-size:.85rem;
  padding-top:8px; color:#0009;
}

/* ---------- FOOTER ---------- */
.footer{
  border-top:1px solid #2B262022;
  padding:44px 24px 40px;
  text-align:center;
}
.footer-links{ display:flex; justify-content:center; gap:22px; margin-bottom:14px; }
.footer-links a{
  font-weight:700; text-decoration:none;
  border-bottom:2px solid var(--green);
}
.footer-links a:hover{ background:var(--green); }
.fine{ font-size:.85rem; color:#0009; }

/* ---------- RWD ---------- */
@media (max-width:820px){
  .hero{ grid-template-columns:1fr; padding:18px; margin:30px auto 60px; max-width:100%; }
  .hero-card{ margin-top:8px; padding:8px 4px; }
  .hero-title{ font-size:1.85rem; }
  .hero-grid{ grid-template-columns:repeat(2,1fr); }
  .hg{ aspect-ratio:4/3; }
  .hg-feature{ aspect-ratio:8/3; }
  .hero-card{
    position:relative; z-index:2;
    margin:-24px auto 0; width:min(92%,470px); padding:24px 22px;
  }
  .book{ width:auto; max-width:100%; padding:24px 18px 30px; }
  .hero-map{ height:150px; }
  .hero-map iframe{ height:206px; }
  .panel-grid{ grid-template-columns:1fr; }
  .panel-photo, .pt-ig{ order:-1; }
  .pt-ig{ grid-template-rows:none; }
  .pt-cell{ height:auto; }
  .pt-ig img{ height:auto; aspect-ratio:auto; }
  .nav{ flex-wrap:wrap; gap:10px; padding:8px 14px; }
  [id]{ scroll-margin-top:130px; }
  .logo-img{ height:34px; }
  .nav-links{ order:3; width:100%; justify-content:space-around; }
  .ig-card{ width:150px; }
  .tab-btn{ padding:.5em 1em; font-size:.95rem; }
}