.stats-title { text-align: center; margin-bottom: 40px; } 
.stats-title h2 { font-size: 2.2rem; color: #b88a6f; } 
.stats-title p { color: #555; font-size: 1.1rem; }
:root{
  --ink:#7a5b48;          /* 文字墨色 */
  --brand:#b88a6f;        /* 品牌金棕 */
  --panel:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 14px;
  --curve: cubic-bezier(.2,.7,.2,1);
}
.carousel3d-wrap{
  position:relative;
  max-width: 1200px;
  margin: 20px auto 60px;
  aspect-ratio: 16/9;

  border-radius: 18px;
  
  overflow:hidden;
}
#carousel3d{
  position:absolute; inset:0;
}
.c3d-ctrl{
  position:absolute; inset-inline:0; top:50%; transform: translateY(-50%);
  display:flex; justify-content:space-between; pointer-events:none;
  padding: 0 6px;
}
.c3d-btn{
  pointer-events:auto;
  width:42px;height:42px;border:0;border-radius:999px;cursor:pointer;
  background: rgba(255,255,255,.6);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  display:grid; place-items:center;
  color:#b88a6f; font-size:18px;
  transition: transform .25s ease, background .25s ease;
}
.c3d-btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.85); }
.c3d-pagination{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:8px;
}
.c3d-dot{ width:8px;height:8px;border-radius:999px;background:rgba(184,138,111,.35); }
.c3d-dot.is-active{ background:#b88a6f; }

@media (max-width: 740px){
  .carousel3d-wrap{ aspect-ratio: 4/5; }
  .c3d-ctrl{ display:none; }
  .c3d-pagination{
  position:absolute; left:50%; bottom:10px; transform:translateX(10%);
  display:flex; gap:8px;
}

}

/* 下半部文字重點 */
:root{
  --brand:#b88a6f;          /* 金棕品牌色 */
  --ink:#6f4f3e;            /* 文字墨色 */
  --rose-50:#fff5f2;        /* 柔粉背景 */
  --rose-100:#ffe8e0;
  --panel:#ffffff;
  --radius:18px;
  --shadow-sm: 0 6px 20px rgba(0,0,0,.06);
  --shadow-lg: 0 14px 34px rgba(0,0,0,.12);
  --curve: cubic-bezier(.2,.7,.2,1);
}
/* 背景呼吸感 */
@keyframes breathe {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* 容器：雲霧質地 + 中央置中 + 寬度控制 */
.stats-text-list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  padding: 28px;
  margin: 24px auto;
  max-width: 1550px; /* 視覺上更精品的行寬 */
  border-radius: 22px;
  background: linear-gradient(135deg, #fbe8e0, #fcded7);
  background-size: 200% 200%;
  animation: breathe 8s ease-in-out infinite;
  position: relative;
  isolation: isolate;
}

/* 卡片：玻璃盤、柔光描邊、陰影層次 */
.stat-text{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height: 168px;
  text-align:center;
  color: var(--ink);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow:hidden;
  padding: 18px 16px;
  transition: transform .55s var(--curve), box-shadow .55s var(--curve);
  
}
/* 低對比金棕描邊（不佔空間） */
.stat-text::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background: linear-gradient(140deg, rgba(184,138,111,.45), rgba(255,255,255,.75));

  /* 先標準、後前綴 —— 降低相容性警示 */
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;            /* 標準值 */

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;        /* WebKit 對應值 */

  pointer-events:none;
}

/* icon：更大但更輕，與品牌色一致 */
.stat-text i{
  font-size: 2.2rem;
  line-height: 1;
  color: var(--brand);
  margin-bottom: 10px;
  transform: translateY(0);
  transition: transform .55s var(--curve), opacity .55s var(--curve);
  opacity: .95;
}

/* 數字：精品數字感（tabular、微字距） */
.stat-text strong{
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  display:block;
  margin: 4px 0 6px;
  color: var(--brand);
}

/* 文案：柔和對比 */
.stat-text{
  font-family: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.02rem;
}

/* hover/focus：輕抬升 + 微掃光 */
.stat-text:hover,
.stat-text:focus-within{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.stat-text::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 48%, rgba(255,255,255,.42) 52%, transparent 56%);
  transform: translateX(-120%);
  transition: transform .9s var(--curve);
  pointer-events:none;
}
.stat-text:hover::after{ transform: translateX(120%); }
.stat-text:hover i{ transform: translateY(-2px); opacity: 1; }

/* 對齊與間距微調（避免字太擠） */
.stat-text br{ display:none; } /* 若有換行標籤可收斂 */
.stat-text strong + *{ margin-top: 2px; }

/* 鍵盤可及性 */
.stat-text a{ color: inherit; text-decoration: none; }
.stat-text a:focus-visible{
  outline: 2px solid rgba(184,138,111,.45);
  outline-offset: 3px;
  border-radius: calc(var(--radius) - 2px);
}

/* 動畫偏好 */
@media (prefers-reduced-motion: reduce){
  .stat-text, .stat-text i, .stat-text::after{ transition: none !important; }
}

/* 響應式：大字、小邊距平衡 */
@media (max-width: 768px){
  .stats-text-list{ max-width: 680px; padding: 22px; }
  .stat-text{ min-height: 150px; padding: 16px 14px; }
  .stat-text strong{ font-size: 1.7rem; }
}
@media (max-width: 480px){
  .stats-text-list{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .stat-text strong{ font-size: 1.55rem; }
}

/* RWD 響應式 */
/* 平板尺寸（<=1024px） */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px; /* 間距稍微縮小 */
  }
  .wedding-stats {
    padding: 40px 20px;
  }
  .stats-text-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px;
  }

  .stat-text {
    min-height: 160px;
    padding: 16px;
  }

  .stat-text strong {
    font-size: 1.6em;
  }

  .stat-text i {
    font-size: 2em;
  }
}

/* 手機尺寸（<=600px） */
@media (max-width: 600px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 14px; /* 手機上縮小間距 */
  }

  .wedding-stats {
    padding: 30px 16px; /* 更小的邊距，留更多空間給內容 */
  }

  .stats-title h2 {
    font-size: 1.5rem; /* 縮小標題字體 */
    line-height: 1.3;
  }

  .stats-title p {
    font-size: 0.9rem; /* 內文也縮小一點 */
  }

  .stat-card img {
    height: 300px; /* 手機上圖片高度縮小，避免過長 */
  }

  .stat-card h3 {
    font-size: 1.2rem; /* 件數字號縮小 */
  }

  .stat-card p {
    font-size: 0.85rem;
  }
  .stats-text-list {
    grid-template-columns: 1fr; /* 一行一個 */
    gap: 14px;
    padding: 16px;
  }

  .stat-text {
    min-height: auto; /* 移除固定高度 */
    padding: 14px;
  }

  .stat-text i {
    font-size: 1.8em;
    margin-bottom: 8px;
  }

  .stat-text strong {
    font-size: 1.4em;
  }
}

.carousel3d-wrap{
  position: relative;
  width: min(1200px, 100%);
  margin: 20px auto 40px;
  aspect-ratio: 16 / 9;           /* 不支援就改 height: 480px; */
  background: transparent;        /* 透明背景 */
  overflow: visible;               /* 讓標籤不被裁掉 */
}
#carousel3d{
  position: absolute;
  inset: 0;
}
#carousel3d canvas{
  display:block;
  background: transparent !important;
}

/* 3D 卡片下方跟著轉的標籤樣式 */
.c3d-label{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(184,138,111,.45);
  color: #6f4f3e;
  font: 500 12px/1.1 "Noto Sans TC", system-ui, sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transform: translateZ(0); /* 抗鋸齒 */
}

.c3d-ctrl{ position:absolute; inset-inline:0; top:50%; translate:0 -50%;
  display:flex; justify-content:space-between; pointer-events:none; padding:0 6px; }
.c3d-btn{ pointer-events:auto; width:42px;height:42px;border:0;border-radius:999px;cursor:pointer;
  background: rgba(255,255,255,.7); color:#b88a6f; display:grid; place-items:center; }

.c3d-pagination{ position:absolute; left:50%; bottom:-18px; translate:-50% 0; display:flex; gap:8px; }
.c3d-dot{ width:8px; height:8px; border-radius:999px; background:rgba(184,138,111,.35); }
.c3d-dot.is-active{ background:#b88a6f; }

@media (max-width: 600px){
  .carousel3d-wrap{ aspect-ratio: 4 / 5; }
  .c3d-ctrl{ display:none; } /* 手機用手勢，不顯示箭頭 */
}