.content-frame {
  overflow: hidden;
}

/* ════════════════════════════════════════
    載入畫面
   ════════════════════════════════════════ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease;
}

.splash.fade-out {
  opacity: 0;
  pointer-events: none;
}

.sp__bar-wrap {
  width: 75cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3cqw;
}

.sp__bar-bg {
  width: 100%;
  height: 0.5cqw;
  background: #ddd;
  overflow: hidden;
}

.sp__bar-fill {
  height: 0.5cqw;
  width: 0%;
  background: #3a3a3a;
  transition: width 0.08s linear;
}

.sp__pct {
  font-size: 3cqw;
  letter-spacing: 1cqw;
  color: rgb(255, 255, 255, 0.7);
}

/*  ════════════════════════════════════════
    APP 容器
    ════════════════════════════════════════ */
.app {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  overflow: clip;
}

.app.show {
  opacity: 1;
}

/* ── 滑動軌道 ── */
.track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.44s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  transform: translateZ(0);
}

.pg {
  min-width: 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  backface-visibility: hidden;
  transform: translateZ(0);
  gap: 0;
}

/* 
  ═══════════════════════════════════════
  內容包裹器
  ═══════════════════════════════════════
  用途：
    1. 包裹所有實際內容（banner、navbar、body-content）
    2. 自動計算實際高度，不受父容器(app、track、pg)限制
    3. 讓 bg-scroll 能根據此容器延展背景圖
  ═══════════════════════════════════════
*/
.pg__wrapper {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: clip;
}

.body-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  align-items: center;
  position: relative;
}

/*  ════════════════════════════════════════
    BANNER - 共用
    ════════════════════════════════════════ */
.banner {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

/*  ════════════════════════════════════════
    NAV BAR - 共用
    ════════════════════════════════════════ */
.navbar {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

/*  ════════════════════════════════════════
    基礎按鈕
    ════════════════════════════════════════ */
.btn {
  transition: all 0.1s ease;
  border: none;
  cursor: pointer;
  /* 去除文字底線 */
  text-decoration: none;
  /* 防止按鈕內文本被反白 */
  user-select: none;
  -webkit-user-select: none;
  /* 去除點擊後藍框 */
  -webkit-tap-highlight-color: transparent;

  &:hover {
    filter: brightness(1.02);
  }

  &:active {
    /* 向下移 */
    transform: translateY(0.2cqw);
    filter: brightness(0.95);
  }
}

/*  ════════════════════════════════════════
    展品頁
    ════════════════════════════════════════ */
/* ── 海報區域 ── */
.poster-area {
  width: 100%;
  flex: 1 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &:has(.poster-img.show) {
    background: transparent;
    align-items: start;
    justify-content: start;
    transform: translateY(-0.1cqw);
  }
}

.poster-area .loader-container {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.poster-area .progress-bar {
  width: 50%;
  height: 1.5cqw;
  background-color: #ddd;
  position: relative;
  overflow: hidden;
  border-radius: 0.8cqw;

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: #3a3a3a;
    animation: loading-action 1.5s infinite linear;
  }
}

@keyframes loading-action {
  from {
    left: -50%;
  }

  to {
    left: 100%;
  }
}

.poster-area .poster-img {
  width: 100%;
  height: 0;
  display: block;
  opacity: 0;
  transform: translateY(2cqw);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
}

.poster-area .poster-img.show {
  opacity: 1;
  height: auto;
  transform: translateY(0);
}

.product__btn-group {
  display: flex;
  gap: 0;
  transition: all 0.4s ease;

  .share-btn {
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.6s ease, padding 0.6s ease, opacity 0.4s ease;
    pointer-events: none;
  }
}

.product__btn-group.show-share {
  gap: 3cqw;

  .share-btn {
    width: auto;
    height: auto;
    opacity: 1;
    pointer-events: auto;
  }
}

/*  ════════════════════════════════════════
    回饋表單
    ════════════════════════════════════════ */
/* ── 進度條 ── */
.fb-progress {
  height: 0.5cqw;
  background: #ddd;
  flex-shrink: 0;

  .fill {
    height: 100%;
    background: #3a3a3a;
    transition: width .4s cubic-bezier(.4, 0, .2, 1);
  }
}

/* ── 步驟指示器 ── */
.fb-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.fb-step-dot {
  display: block;
  width: 1.5cqw;
  height: 1.5cqw;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
  transition: all .3s;

  &.active {
    width: 4.5cqw;
    border-radius: 4px;
    background: #3a3a3a
  }

  &.done {
    background: #727272;
  }
}

/* ── 表單分頁 ── */
.step {
  flex-direction: column;
  padding: 5cqw 0;
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.step.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  position: relative;
  animation: fadeSlide .3s ease;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 表單框架 ── */
form {
  display: flex;
  flex-direction: column;
  gap: 5cqw;
}

/* ── 表單輸入框 ── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 1.5cqw;

  .label {
    font-size: 2.5cqw;
    color: #3a3a3a;
  }

  .input {
    height: 8cqw;
    background-color: #fff;
    padding: 0 2cqw;
    font-size: 3cqw;
  }

  textarea.input {
    height: auto !important;
    min-height: 67.5cqw;
    padding: 4cqw;
    line-height: 1.5;
    resize: none;
  }
}

/* 清除焦點框線 */
input:focus,
textarea:focus {
  outline: none;
}

/* 清除自動填入樣式 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: #595757 !important;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
}