/* ============================================================
 * Qport Design Tokens v1.0
 * 來源：docs/design-system.md（勿在元件中硬編碼任何此處的值）
 * ============================================================ */

:root {
  /* ---------- 品牌色 Primary (Teal) ---------- */
  --qp-primary-50:  #effbfa;
  --qp-primary-100: #d9f2f1;
  --qp-primary-200: #b8e6e4;
  --qp-primary-300: #8ad4d2;
  --qp-primary-400: #5cbfbd;
  --qp-primary-500: #35a3a1;
  --qp-primary-600: #2a8886;
  --qp-primary-700: #256d6c;
  --qp-primary-800: #225756;
  --qp-primary-900: #204a49;
  --qp-primary-950: #0f2b2b;
  /* 深底玻璃元件的漸層亮端（landing hero CTA / 註冊鈕），不在明亮版面使用 */
  --qp-primary-glow: #a0f0ef;
  /* 常見問題頁 hero 底色漸層（Figma FAQ hero，五段品牌青綠） */
  --qp-gradient-faq-hero: linear-gradient(
    100deg,
    #59a7a9 0%,
    #3f9596 25.48%,
    #399091 49.04%,
    #57a5a7 71.63%,
    #8ecbce 100%
  );
  --qp-gradient-primary-action: linear-gradient(
    90deg,
    var(--qp-primary-500) 0%,
    var(--qp-primary-glow) 100%
  );

  /* ---------- 中性色 Neutral（對齊 Figma --p-surface/--p-text 實際值） ---------- */
  --qp-neutral-0:   #ffffff;
  --qp-neutral-50:  #fafafa;
  --qp-neutral-100: #f5f5f5;
  --qp-neutral-200: #e5e5e5;
  --qp-neutral-300: #d4d4d4;
  --qp-neutral-400: #a3a3a3;
  --qp-neutral-500: #737373;
  --qp-neutral-600: #525252;
  --qp-neutral-700: #404040;
  --qp-neutral-800: #262626;
  --qp-neutral-900: #171717;
  --qp-neutral-950: #0a0a0a;

  /* ---------- 語意色 Semantic（對齊 Figma orange/red/sky） ---------- */
  --qp-success:      #16a34a;
  --qp-success-soft: #f0fdf4;
  --qp-success-text: #15803d;
  --qp-warning:      #f59e0b;
  --qp-warning-soft: #fffbeb;
  --qp-warning-text: #f59e0b;
  --qp-danger:       #ef4444;
  --qp-danger-soft:  #fef2f2;
  --qp-danger-text:  #ff5656;
  --qp-info:         #0ea5e9;
  --qp-info-soft:    #f0f9ff;
  --qp-info-text:    #0284c7;

  /* ---------- 語意別名 Alias（深色模式只需覆寫這層） ---------- */
  --qp-surface-page:    var(--qp-neutral-50);   /* 頁面背景 */
  --qp-surface-card:    var(--qp-neutral-0);    /* 卡片/彈窗 */
  --qp-surface-subtle:  var(--qp-neutral-100);  /* 次要背景 */
  --qp-surface-field:   #fcfcfc;                /* 表單卡片底（比 neutral-50 再淺） */
  --qp-text-primary:    var(--qp-neutral-800);  /* 主要文字 */
  --qp-text-secondary:  var(--qp-neutral-500);  /* 次要文字 */
  --qp-text-disabled:   var(--qp-neutral-400);
  --qp-text-inverse:    var(--qp-neutral-0);
  --qp-border-default:  var(--qp-neutral-200);
  --qp-border-input:    var(--qp-neutral-300);
  --qp-brand:           var(--qp-primary-500);
  --qp-brand-hover:     var(--qp-primary-600);

  /* ---------- 字體 Typography ---------- */
  --qp-font-sans: 'Inter', 'Noto Sans TC', 'PingFang TC', system-ui, sans-serif;
  /* 展示字體：landing 字標專用（Figma 指定 Aboreto Regular），勿用於內文 */
  --qp-font-display: 'Aboreto', var(--qp-font-sans);
  --qp-text-display: 600 30px/38px var(--qp-font-sans);
  --qp-text-h1:      600 24px/32px var(--qp-font-sans);
  --qp-text-h2:      600 20px/28px var(--qp-font-sans);
  --qp-text-h3:      600 16px/24px var(--qp-font-sans);
  --qp-text-body:        400 14px/22px var(--qp-font-sans);
  --qp-text-body-strong: 500 14px/22px var(--qp-font-sans);
  --qp-text-caption:     400 12px/18px var(--qp-font-sans);
  --qp-text-overline:    500 11px/16px var(--qp-font-sans);
  --qp-nav-letter-spacing: 2px;

  /* ---------- 間距 Spacing (4px base) ---------- */
  --qp-space-1: 4px;
  --qp-space-2: 8px;
  --qp-space-3: 12px;
  --qp-space-4: 16px;
  --qp-space-5: 20px;
  --qp-space-6: 24px;
  --qp-space-8: 32px;
  --qp-space-10: 40px;
  --qp-space-12: 48px;
  --qp-space-16: 64px;

  /* ---------- 表單欄位寬度 ---------- */
  --qp-field-width: 280px;
  --qp-field-height: 40px;
  --qp-content-width-narrow: 900px;
  --qp-content-width-wide: 1200px;
  --qp-layout-max-width: var(--qp-content-width-wide);
  --qp-layout-sidebar-width: 220px;
  --qp-layout-sidebar-collapsed-width: 56px;
  --qp-layout-sidebar-outer-width: calc(var(--qp-layout-sidebar-width) + var(--qp-space-3) * 2);
  --qp-layout-sidebar-collapsed-outer-width: calc(
    var(--qp-layout-sidebar-collapsed-width) + var(--qp-space-3) * 2
  );
  --qp-layout-sidebar-current-width: var(--qp-layout-sidebar-outer-width);
  --qp-layout-topbar-height: 56px;
  --qp-datetime-tz-width: 148px;
  --qp-datetime-field-width: 360px;
  --qp-datetime-input-width: 204px;

  /* ---------- 行銷資源版面（Figma 2218:1937） ---------- */
  --qp-marketing-content-width: var(--qp-content-width-narrow);
  --qp-marketing-section-padding-block: 60px;
  --qp-marketing-section-gap: 60px;
  --qp-marketing-stream-image-size: 140px;
  --qp-marketing-stream-image-size-mobile: 96px;
  --qp-marketing-stream-image-size-compact: 76px;
  --qp-marketing-project-image-width: 240px;
  --qp-marketing-project-image-height: 180px;
  --qp-marketing-offset: 120px;
  --qp-marketing-copy-padding-inline: 15px;
  --qp-marketing-title-size: 36px;
  --qp-marketing-title-line-height: 46.8px;
  --qp-marketing-title-letter-spacing: 2px;
  --qp-marketing-item-title-size: 26px;
  --qp-marketing-item-title-line-height: 33.8px;
  --qp-marketing-item-title-letter-spacing: -0.26px;
  --qp-marketing-body-size: 15px;
  --qp-marketing-body-line-height: 26px;
  --qp-marketing-title-size-mobile: 26px;
  --qp-marketing-title-line-height-mobile: 33.8px;
  --qp-marketing-item-title-size-mobile: 20px;
  --qp-marketing-item-title-line-height-mobile: 28px;
  --qp-marketing-shadow-offset: 8px;
  --qp-marketing-accent-shadow: #66cccc;

  /* ---------- 圓角 Radius（對齊 Figma --p-border-radius-*） ---------- */
  --qp-radius-sm: 4px;
  --qp-radius-md: 8px;
  --qp-radius-lg: 12px;
  --qp-radius-xl: 16px;
  --qp-radius-2xl: 20px;
  --qp-radius-full: 999px;

  /* ---------- 陰影 Elevation ---------- */
  --qp-shadow-xs: 0 1px 2px rgb(24 24 27 / 0.05);
  --qp-shadow-sm: 0 1px 3px rgb(24 24 27 / 0.06), 0 1px 2px rgb(24 24 27 / 0.04);
  --qp-shadow-md: 0 4px 12px rgb(24 24 27 / 0.08), 0 2px 4px rgb(24 24 27 / 0.04);
  --qp-shadow-lg: 0 12px 32px rgb(24 24 27 / 0.12), 0 4px 8px rgb(24 24 27 / 0.05);
  --qp-ring: 0 0 0 3px rgb(53 163 161 / 0.25);

  /* ---------- 狀態色對映（DB enum → UI；見 docs/design-system.md §1.4） ---------- */
  --qp-status-draft-bg:      var(--qp-neutral-100);
  --qp-status-draft-fg:      var(--qp-neutral-600);
  --qp-status-submitted-bg:  var(--qp-info-soft);
  --qp-status-submitted-fg:  var(--qp-info-text);
  --qp-status-in-review-bg:  var(--qp-warning-soft);
  --qp-status-in-review-fg:  var(--qp-warning-text);
  --qp-status-approved-bg:   var(--qp-success-soft);
  --qp-status-approved-fg:   var(--qp-success-text);
  --qp-status-live-bg:       var(--qp-primary-100);
  --qp-status-live-fg:       var(--qp-primary-800);
  --qp-status-rejected-bg:   var(--qp-danger-soft);
  --qp-status-rejected-fg:   var(--qp-danger-text);
  --qp-status-takedown-bg:   var(--qp-neutral-200);
  --qp-status-takedown-fg:   var(--qp-neutral-700);
}


/* Qport UI — 元件樣式，全部引用 tokens.css 的 --qp-* token */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--qp-neutral-300) transparent;
}

body {
  font: var(--qp-text-body);
  font-family: 'Noto Sans TC', var(--qp-font-sans);
  color: var(--qp-text-primary);
  background: var(--qp-surface-page);
}

/* 全域細捲軸（WebKit） */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--qp-neutral-300);
  border-radius: var(--qp-radius-full);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--qp-neutral-400);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- App shell + Sidebar ---------- */

/* ---------- Mobile topbar ---------- */

/* Legacy nav-item（詳情頁側邊目錄等仍使用） */

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--qp-radius-full);
  color: var(--qp-neutral-900);
}

.icon-btn:hover {
  background: var(--qp-surface-subtle);
}

/* ---------- Dropdown panels ---------- */
.dropdown-panel {
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 320px;
  background: var(--qp-surface-card);
  border: 1px solid var(--qp-border-default);
  border-radius: var(--qp-radius-xl);
  box-shadow: 0 8px 28px -4px rgb(0 0 0 / 0.2);
  overflow: hidden;
  z-index: 40;
}

/* 統一選項下拉（SelectField、TrackPicker、搜尋列篩選等） */
.dropdown-panel--options {
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--qp-space-2) 0;
}

/* 下方空間不足時往上開（DropdownSelect 開啟時動態判斷） */
.dropdown-panel--up {
  top: auto;
  bottom: calc(100% + 6px);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--qp-space-3);
  width: 100%;
  padding: var(--qp-space-3) var(--qp-space-4);
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--qp-neutral-900);
}

.dropdown-item:hover {
  background: var(--qp-surface-subtle);
}

.dropdown-item.is-selected {
  background: var(--qp-primary-50);
  color: var(--qp-primary-700);
}

.dropdown-select {
  position: relative;
  width: 100%;
}

.dropdown-select__trigger {
  width: 100%;
  cursor: pointer;
  text-align: left;
}

/* ---------- Tags ---------- */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qp-space-2);
  height: 40px;
  padding: var(--qp-space-2) var(--qp-space-6);
  border-radius: var(--qp-radius-full);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.btn--primary {
  background: var(--qp-brand);
  color: var(--qp-text-inverse);
}

.btn--primary:hover {
  background: var(--qp-brand-hover);
}

.btn--outline {
  border: 1px solid var(--qp-border-default);
  color: var(--qp-text-secondary);
  background: var(--qp-surface-card);
}

.btn--outline:hover {
  background: var(--qp-surface-subtle);
}

/* iOS glass 膠囊按鈕：品牌色半透明漸層 + 白框（landing hero CTA、hero 上的註冊鈕） */
.btn--glass,
.landing-nav--home:not(.landing-nav--menu-open) .btn--primary {
  color: var(--qp-neutral-0);
  /* 設計稿：不透明品牌漸層底 + 白色漸層外框（80% → 20%）。
     兩層 background 疊：底色 clip 到 padding-box，外框層只從 1px 邊框露出 */
  border: 1px solid transparent;
  background-image:
    linear-gradient(90deg, var(--qp-primary-500) 0%, var(--qp-primary-glow) 100%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--qp-neutral-0) 80%, transparent) 0%,
      color-mix(in srgb, var(--qp-neutral-0) 20%, transparent) 100%
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--qp-neutral-950) 50%, transparent);
  transition:
    filter 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

/* 導覽列註冊鈕本體是 .btn--primary，需蓋掉實心底色才吃得到漸層 */
.landing-nav--home:not(.landing-nav--menu-open) .btn--primary {
  background-color: transparent;
  padding-inline: var(--qp-space-4);
}

.btn--glass:hover,
.landing-nav--home:not(.landing-nav--menu-open) .btn--primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 14px 30px -8px color-mix(in srgb, var(--qp-neutral-950) 58%, transparent);
  transform: translateY(-1px);
}

.btn--glass:active,
.landing-nav--home:not(.landing-nav--menu-open) .btn--primary:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

/* 標頭列用小尺寸（與 lock-toggle 同高） */

/* 申請下架等破壞性操作 */

/* ---------- Works page ---------- */

/* 滾動吸附頁首（所有分頁共用）：往下捲時固定於頂端，離開頂端才顯示底線 */

/* 吸附群組底部整列（如版稅/合約 tabs）：跟著頁首固定，自帶底線 */

/* 膠囊輸入：form-card 以外的獨立輸入（頁首搜尋、Modal、工具列）共用外觀 */
.search-input,
.pill-input {
  display: flex;
  align-items: center;
  gap: var(--qp-space-2);
  box-sizing: border-box;
  height: var(--qp-field-height);
  min-height: var(--qp-field-height);
  padding: var(--qp-space-2) var(--qp-space-6);
  border: 1px solid var(--qp-border-input);
  border-radius: var(--qp-radius-full);
  color: var(--qp-text-secondary);
  background: var(--qp-surface-card);
}

.search-input {
  width: 280px;
}

.pill-input {
  width: 100%;
}

.search-input:focus-within,
.pill-input:focus-within {
  border-color: var(--qp-brand);
  box-shadow: none;
}

.search-input svg,
.pill-input svg {
  flex-shrink: 0;
}

.search-input input,
.pill-input input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  font: inherit;
  font-size: 14px;
  color: var(--qp-text-primary);
  background: transparent;
}

.search-input input::placeholder,
.pill-input input::placeholder {
  color: var(--qp-text-secondary);
}

/* 期間月份 datepicker：膠囊外框，與搜尋框/下拉觸發鈕同風格 */

/* 期間清除鈕：有選值時顯示於範圍右側 */

/* ---------- List / table ---------- */

/* 清單表頭視同欄位標籤：12px / 300 */

/* 歌曲清單缺檔位：點擊直接上傳 */

/* 已上傳檔名：點擊開啟重新上傳彈窗 */

/* ---------- Detail page ---------- */

/* 封面＋專輯資訊群組：桌機不影響版型，手機版轉為置中群組 */

/* 返回列表鈕：僅手機版顯示 */

/* 歌曲詳情：meta 列曲目切換 */

/* 鎖定切換（純預覽 ↔ 編輯中） */

/* 純預覽模式：fieldset 停用區塊內所有控件 */

/* 預覽模式：欄位唯讀 — 保留底線、藏佔位提示，空值顯示「—」 */

/* 預覽模式：欄位文字統一 14px / 500 */

/* 鎖定的下拉（如製作名單必填角色）：值固定不可改，文字維持可讀 */
button.dropdown-select__trigger:disabled {
  color: var(--qp-text-primary);
  cursor: default;
}

button.dropdown-select__trigger:disabled .input__chevron {
  opacity: 0.35;
}

/* ---------- 製作名單：欄位網格（標籤＋底線輸入），預設一排四個、窄幅自動換行 ---------- */

/* 自選角色欄：標籤列 = 角色下拉 + 右側移除鈕 */

/* 角色下拉觸發鈕偽裝成欄位標籤（雙 class 提高權重，避免被後面的通用 trigger 高度規則蓋掉） */

/* 預覽模式也維持標籤色（覆蓋 trigger:disabled 的內容文字色） */

/* 移除鈕：貼齊底線輸入匡最右側、垂直置中 */

/* 讓輸入文字不會滑到移除鈕底下 */

/* ---------- Detail body: sidebar + sections ---------- */

/* 我的作品清單：狀態 tag 右側的資料不完整提示 */

/* 資料齊全：圈圈打勾 */

/* hover 顯示未填項數 tooltip（data-tip） */

/* 送審檢查缺漏數 badge（側邊選單與區塊標題共用） */

/* 區塊標題 badge 旁的缺漏簡短提示 */

/* ---------- Forms ---------- */

.form-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qp-space-3);
  align-items: flex-start;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(100%, var(--qp-field-width));
  max-width: var(--qp-field-width);
}

.form-field__label {
  display: flex;
  align-items: flex-end;
  min-height: var(--qp-field-height);
  font-size: 12px;
  font-weight: 300;
  line-height: 20px;
  color: var(--qp-text-secondary);
}

.form-field__req {
  color: var(--qp-danger);
  margin-left: 4px;
}

/* 並排唯讀欄位（藝人 + 角色等），整組一起換行 */

.input {
  display: flex;
  align-items: center;
  gap: var(--qp-space-2);
  box-sizing: border-box;
  height: var(--qp-field-height);
  min-height: var(--qp-field-height);
  padding: 0;
  border: none;
  border-bottom: 1.5px solid var(--qp-border-input);
  border-radius: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--qp-text-primary);
  width: 100%;
  max-width: var(--qp-field-width);
}

/* 必填未填：底線轉警示色 */
.input--danger,
.input.input--danger {
  border-bottom-color: var(--qp-danger);
}

button.input,
button.dropdown-select__trigger {
  box-sizing: border-box;
  height: var(--qp-field-height);
  min-height: var(--qp-field-height);
  background: transparent;
}

.input > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input > input,
.input > select {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  height: 100%;
}

.input > input::placeholder {
  color: var(--qp-text-disabled);
  font-weight: 400;
}

.input > input:disabled {
  color: var(--qp-text-disabled);
}

.input:focus-within {
  border-bottom-color: var(--qp-brand);
  box-shadow: none;
}

/* 預覽模式長文欄位：高度自動、完整換行顯示（span 內容） */

.input--readonly {
  background: transparent;
  color: var(--qp-text-secondary);
}

.input--readonly:focus-within {
  border-bottom-color: var(--qp-border-input);
  box-shadow: none;
}

/* 儲存列 */

@keyframes qp-shake {
  0%,
  100% {
    transform: translateX(-50%);
  }
  20%,
  60% {
    transform: translateX(calc(-50% - 8px));
  }
  40%,
  80% {
    transform: translateX(calc(-50% + 8px));
  }
}

.spin {
  animation: qp-spin 0.9s linear infinite;
}

@keyframes qp-spin {
  to {
    transform: rotate(360deg);
  }
}

.input__placeholder {
  color: var(--qp-text-disabled);
}

.input__chevron {
  color: var(--qp-text-secondary);
  flex-shrink: 0;
}

.form-grid > .check-field {
  align-self: flex-end;
}

.check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--qp-field-height);
  padding: 0 4px;
  font-size: 14px;
  color: var(--qp-neutral-700);
  white-space: nowrap;
}

.checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--qp-border-input);
  border-radius: var(--qp-radius-sm);
  background: var(--qp-surface-card);
  color: var(--qp-text-inverse);
  flex-shrink: 0;
}

.checkbox.is-checked {
  background: var(--qp-primary-500);
  border-color: var(--qp-primary-500);
}

/* ---------- 搜尋列 ---------- */

/* ---------- Cover 更新按鈕 ---------- */

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(10 10 10 / 0.45);
  padding: var(--qp-space-6);
}

.modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--qp-surface-card);
  border-radius: var(--qp-radius-xl);
  box-shadow: var(--qp-shadow-lg);
  overflow: hidden;
}

.modal--wide {
  max-width: 720px;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--qp-space-5) var(--qp-space-6);
  border-bottom: 0.5px solid var(--qp-border-default);
}

.modal__head h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: var(--qp-neutral-900);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-4);
  padding: var(--qp-space-6);
  overflow-y: auto;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: pointer;
}

/* 上傳規則卡 */

/* 送審缺漏清單彈窗 */

/* 自訂虛線框：0.5px 粗、加長線段與間距 */

/* 上傳區 */

.upload-error {
  display: flex;
  align-items: center;
  gap: var(--qp-space-2);
  font-size: 13px;
  color: var(--qp-danger);
}

/* ---------- 帳號管理 ---------- */

/* 銀行證明文件卡：與專輯封面上傳卡（upload-zone--square）同樣式 */

/* ---------- Landing（大廠風格：深色 hero + 分段節奏） ---------- */

.landing {
  min-height: 100vh;
  background: var(--qp-surface-card);
  color: var(--qp-neutral-800);
}

html:has(.landing) {
  scrollbar-width: none;
}

html:has(.landing)::-webkit-scrollbar {
  display: none;
}

/* 非首頁共用導覽列：固定白底（Logo 左、操作右），不隨捲動切換狀態。 */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  box-sizing: border-box;
  padding: 0
    max(var(--qp-space-10), calc((100% - var(--qp-content-width-wide)) / 2));
  background: var(--qp-surface-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--qp-border-default);
  box-shadow: none;
}

/* 首頁專屬：只保留 Hero 上的透明樣式，隨首頁內容一起捲走。 */
.landing-nav--home {
  position: absolute;
  background: transparent;
  border-bottom-color: transparent;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    backdrop-filter 0.2s ease,
    box-shadow 0.2s ease;
}

.landing-nav--home-scrolled {
  position: fixed;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--qp-surface-card) 78%, transparent),
    color-mix(in srgb, var(--qp-surface-card) 66%, transparent)
  );
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  border-bottom-color: color-mix(in srgb, var(--qp-neutral-0) 42%, transparent);
  box-shadow:
    0 10px 32px color-mix(in srgb, var(--qp-neutral-950) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--qp-neutral-0) 52%, transparent);
}

/* 手機選單開啟時使用純白底，讓導覽列與下拉面板連成同一實色區塊 */
.landing > .landing-nav.landing-nav--menu-open {
  background: var(--qp-neutral-0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--qp-border-default);
  box-shadow: none;
}

/* 左側品牌區：漢堡（僅手機）＋ logo；logo 連結只包住圖片本身，避免整欄變成可點區域 */
.landing-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--qp-space-4);
}

.landing-nav__brand > a {
  display: inline-flex;
}

/* 桌機不顯示漢堡與下拉面板，頁面連結直接排在導覽列上 */
.landing-nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--qp-neutral-900);
  cursor: pointer;
}

.landing-nav__menu {
  display: none;
}

.landing-nav__logo {
  height: 24px;
  width: auto;
  object-fit: contain;
}

.landing-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--qp-space-2);
}

@media (min-width: 769px) {
  .landing-nav__actions .landing-nav__ghost {
    font-size: 16px;
  }

  .landing-nav--home .landing-nav__actions {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .landing-nav--home .landing-nav__brand > a {
    display: none;
  }
}

/* 註冊按鈕在透明／捲動導覽狀態維持相同的左右內距，避免切換時寬度跳動 */
.landing-nav__actions > .btn--primary {
  padding-inline: var(--qp-space-4);
  letter-spacing: var(--qp-nav-letter-spacing);
}

.landing-nav__page-links {
  display: flex;
  align-items: center;
  gap: var(--qp-space-2);
}

.landing-nav__ghost {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--qp-nav-letter-spacing);
  color: var(--qp-neutral-800);
  padding: var(--qp-space-2) var(--qp-space-4);
  border-radius: var(--qp-radius-full);
  white-space: nowrap;
}

.landing-nav__ghost:hover {
  background: var(--qp-neutral-100);
}

.landing-nav--home:not(.landing-nav--home-scrolled):not(.landing-nav--menu-open)
  .landing-nav__ghost,
.landing-nav--home:not(.landing-nav--home-scrolled):not(.landing-nav--menu-open)
  .landing-nav__burger {
  color: var(--qp-neutral-0);
}

.landing-nav--home:not(.landing-nav--home-scrolled):not(.landing-nav--menu-open)
  .landing-nav__ghost:hover {
  background: color-mix(in srgb, var(--qp-neutral-0) 12%, transparent);
}

/* 大尺寸按鈕（landing 專用） */
.btn--lg {
  height: 48px;
  padding: 0 var(--qp-space-8);
  font-size: 16px;
}

/* Hero：影片底圖 + 置中版面 */
.landing-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 112px var(--qp-space-6) 96px;
  overflow: hidden;
  background-color: var(--qp-neutral-950);
  color: var(--qp-neutral-0);
}

.landing-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.landing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 單層 50% 黑遮罩（Figma hero 規格），讓底圖細節保留、文字仍可讀 */
  background: color-mix(in srgb, var(--qp-neutral-950) 50%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: none;
}

.landing-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--qp-space-8);
  width: min(100%, var(--qp-content-width-narrow));
  margin-inline: auto;
}

.landing-hero__logo {
  display: block;
  width: auto;
  height: 28px;
  object-fit: contain;
}

/* 字標：Aboreto Regular / 字距 2px（設計稿），字級比設計稿的 123.591px 放大到 148px；
   30vw 只在視窗窄到裝不下字寬時才接手，避免橫向溢出 */
.landing-hero__wordmark {
  display: block;
  font-family: var(--qp-font-display);
  font-size: min(148px, 30vw);
  line-height: normal;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--qp-neutral-0);
  text-shadow: 0 4px 4px color-mix(in srgb, var(--qp-neutral-950) 30%, transparent);
  margin: 0;
}

.landing-hero__tagline {
  font-size: 20px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: 4px;
  color: var(--qp-neutral-0);
  text-shadow: 0 4px 4px color-mix(in srgb, var(--qp-neutral-950) 30%, transparent);
  margin: 0;
}

.landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--qp-space-5);
}

.landing-hero__cta {
  padding-inline: var(--qp-space-8);
  font-weight: 500;
  letter-spacing: 1px;
}

/* Landing band 區塊（Apple / YouTube）統一高度 */
.landing-apple,
.landing-apple-info,
.landing-youtube {
  min-height: 400px;
  padding-block: 80px;
  padding-inline: var(--qp-space-6);
  box-sizing: border-box;
}

/* 首頁各 section 維持滿版底層，實際資訊內容統一收在 900px 內層 */
.landing-section__inner {
  width: min(100%, var(--qp-content-width-narrow));
  margin-inline: auto;
}

.landing-apple-info {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qp-surface-card);
  color: var(--qp-neutral-900);
}

.landing-apple-info__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--qp-space-8);
}

.landing-apple-info__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qp-space-4);
  text-align: center;
  max-width: var(--qp-content-width-narrow);
}

.landing-apple-info .landing-section__desc {
  margin: 0;
}

/* 通用段落標題 */

/* 區塊標題：放寬中文字距，手機使用稍小一階。 */
.landing-section__title {
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: 1px;
}

.landing-section__desc {
  font-size: 15px;
  line-height: 24px;
  color: var(--qp-text-secondary);
  max-width: var(--qp-content-width-narrow);
}

/* Apple 認證：官方漸層底圖 */
.landing-apple {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--qp-space-4);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--qp-surface-card);
  color: var(--qp-neutral-900);
}

.landing-apple__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-apple__partners {
  width: min(100%, 720px);
  height: auto;
}

.landing-apple__badge {
  height: 80px;
  width: auto;
  flex-shrink: 0;
}

/* YouTube 段 */
.landing-youtube {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qp-surface-page);
  color: var(--qp-neutral-900);
}

.landing-youtube__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--qp-space-10);
  text-align: center;
}

.landing-youtube__logos {
  width: min(100%, 560px);
  height: auto;
  flex-shrink: 0;
}

.landing-youtube__desc {
  margin: 0;
}

/* 服務三卡 + 數字 + 平台 */
.landing-services {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px var(--qp-space-6);
  box-sizing: border-box;
  color: var(--qp-neutral-900);
}

.landing-services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qp-space-10);
  text-align: center;
}

/* 水平排列不換行；放不下時左右滑動（含 snap），與發行案例一致 */
.landing-services__grid {
  display: flex;
  /* safe：放得下時置中，放不下時退回靠左，避免捲動起點被切掉 */
  justify-content: center;
  justify-content: safe center;
  gap: var(--qp-space-5);
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* 四周留白：進場位移、放大與 shadow-lg（0 12px 32px）不被捲動容器裁切 */
  padding: var(--qp-space-6) var(--qp-space-6) var(--qp-space-10);
}

.landing-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* 900px 資訊容器內平均分成三欄；手機斷點再改為單欄 */
  flex: 1 1 0;
  min-width: 0;
  scroll-snap-align: center;
  gap: var(--qp-space-3);
  padding: var(--qp-space-8) var(--qp-space-6);
  border: none;
  border-radius: var(--qp-radius-xl);
  background: var(--qp-surface-card);
}

/* 品牌插圖本身已有玻璃圓角外框，不再套底色容器 */
.landing-service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

.landing-service-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 卡片標題：設計稿為 Medium，不是 h3 token 的 600 */
.landing-service-card h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--qp-neutral-900);
}

.landing-service-card p {
  font-size: 15px;
  line-height: 24px;
  color: var(--qp-text-secondary);
}

/* 合作規模 + 平台（獨立區域，淺灰底區隔） */
.landing-reach {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px var(--qp-space-6);
  background: var(--qp-surface-page);
  color: var(--qp-neutral-900);
}

.landing-reach__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qp-space-10);
  text-align: center;
}

/* 數字呈現：Apple 官網風格 — 巨型漸層數字 + 小標 */
.landing-stats {
  display: flex;
  gap: clamp(48px, 10vw, 128px);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--qp-space-6) 0;
}

.landing-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qp-space-3);
}

/* 數字：Noto Sans TC Medium 60 / 81 / -0.9px（設計稿固定值，手機另有一階） */
.landing-stat__num {
  font-size: 60px;
  line-height: 81px;
  font-weight: 500;
  letter-spacing: -0.9px;
  padding: 4px 4px;
  background: linear-gradient(100deg, var(--qp-primary-400), var(--qp-primary-700));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.landing-stat__label {
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
  color: var(--qp-neutral-600);
}

.landing-platforms {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 150px));
  justify-content: center;
  gap: var(--qp-space-6);
  width: 100%;
  max-width: var(--qp-content-width-narrow);
}

/* 平台 logo：依 Figma 使用 150 × 60 透明底品牌圖，不額外縮放或加框。 */
.landing-platform-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 60px;
  min-width: 0;
}

.landing-platform-chip img {
  display: block;
  width: 150px;
  height: 60px;
  max-width: 100%;
  object-fit: contain;
}

.landing-platforms__cta {
  border: none;
  color: var(--qp-text-inverse);
  background: var(--qp-gradient-primary-action);
  letter-spacing: var(--qp-nav-letter-spacing);
  box-shadow: var(--qp-shadow-md);
  text-decoration: none;
  transition:
    filter 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

@media (hover: hover) {
  .landing-platforms__cta:hover {
    filter: brightness(1.06);
    box-shadow: var(--qp-shadow-lg);
    transform: translateY(-1px);
  }
}

/* 發行案例（白底，與前段淺灰交錯） */
.landing-cases {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qp-space-10);
  padding: 60px var(--qp-space-6);
  background: var(--qp-surface-card);
  color: var(--qp-neutral-900);
}

/* 水平排列不換行；容納不下時左右滑動（含 snap） */
.landing-cases__grid {
  display: flex;
  /* safe：放得下時置中，放不下時退回靠左，避免捲動起點被切掉 */
  justify-content: center;
  justify-content: safe center;
  gap: var(--qp-space-6);
  width: 100%;
  /* 內容 912px（3×288 + 2×24 間距）＋ 左右內距 */
  max-width: 960px;
  overflow-x: auto;
  /* 進場位移會短暫撐高內容，鎖住縱向避免閃出垂直捲軸 */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* 四周留白：放大與 shadow-lg（0 12px 32px）不被捲動容器裁切 */
  padding: var(--qp-space-6) var(--qp-space-6) var(--qp-space-10);
}

.landing-case-card {
  display: flex;
  flex-direction: column;
  /* 固定寬：iframe 內容不隨視窗縮放跑版，捲動只發生在外層容器 */
  flex: 0 0 288px;
  /* 以中心對齊 snap：滑動時逐張切換置中卡片 */
  scroll-snap-align: center;
  border-radius: var(--qp-radius-xl);
  overflow: hidden;
  background: var(--qp-surface-card);
  border: 1px solid var(--qp-border-default);
  box-shadow: var(--qp-shadow-sm);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;
}

/* 手機版：案例卡保留滿版輪播；服務卡改為單欄直式排列 */
@media (max-width: 640px) {
  .landing-cases__grid {
    /* 卡片寬度：留出兩側 peek 空間 */
    --carousel-card-w: 72vw;
    /* 打破 section 左右內距做滿版（margin = (父寬 - 100vw) / 2） */
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    /* 左右內距 = 半個空白，第一／最後一張才能被捲到正中央 */
    padding-inline: calc((100vw - var(--carousel-card-w)) / 2);
    /* 下方多留：置中卡片的 shadow-lg 不被裁切 */
    padding-block: var(--qp-space-4) var(--qp-space-10);
    gap: var(--qp-space-4);
    justify-content: flex-start;
  }

  .landing-case-card {
    flex: 0 0 var(--carousel-card-w);
  }

  .landing-services__grid {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: var(--qp-space-4) 0 var(--qp-space-6);
    flex-direction: column;
    align-items: stretch;
    gap: var(--qp-space-4);
    overflow: visible;
    scroll-snap-type: none;
  }

  .landing-service-card {
    width: 100%;
    flex: 0 0 auto;
    scroll-snap-align: none;
  }

  .landing-service-card p {
    font-size: 14px;
    line-height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-case-card {
    transition: none;
  }
}

/* 平台官方 embed 播放器 */
.landing-case-card__embed {
  display: block;
  width: 100%;
  height: 405px;
  overflow: hidden;
  border: 0;
  background: var(--qp-surface-page);
}

.landing-case-card__meta {
  display: flex;
  align-items: center;
  padding: var(--qp-space-4) var(--qp-space-5);
  border-bottom: 1px solid var(--qp-border-default);
}

.landing-case-card__logo {
  height: 24px;
  width: auto;
}

/* 更多 CTA */
.landing-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px var(--qp-space-6);
  color: var(--qp-neutral-900);
}

.landing-more__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qp-space-6);
  text-align: center;
}

.landing-more .btn--lg {
  text-decoration: none;
}

.landing-more__cta {
  overflow: hidden;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.landing-more__cta:hover {
  border-color: transparent;
  color: var(--qp-text-inverse);
  background-color: transparent;
  background-image:
    var(--qp-gradient-primary-action),
    var(--qp-gradient-primary-action);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  filter: brightness(1.08);
  box-shadow: var(--qp-shadow-lg);
  transform: translateY(-2px);
}

.landing-more__cta:active {
  filter: brightness(0.96);
  transform: translateY(0);
}

/* ---------- Landing 出場動畫 ---------- */

/* Hero：載入時階梯式上浮 */
@keyframes qp-hero-rise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 注意：字標用 background-clip: text 上漸層，套 filter: blur() 會讓文字整段消失，故只用位移＋縮放 */
@keyframes qp-hero-wordmark {
  from {
    opacity: 0;
    transform: translateY(48px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 節奏放慢：字標 → 標語 → 按鈕 → 底部說明依序登場，整段約 2.6s */
.landing-hero__inner > * {
  animation: qp-hero-rise 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.landing-hero__wordmark {
  animation: qp-hero-wordmark 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.landing-hero__tagline {
  animation-delay: 0.65s;
}

.landing-hero__actions {
  animation-delay: 1.05s;
}

/* 捲入視窗才播放的區塊動畫（.is-in 由 IntersectionObserver 加上） */
.reveal {
  opacity: 0;
  transform: translateY(44px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--qp-reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* 服務區進場節奏較舒緩，避免標題與卡片一口氣快速出現 */
.landing-services__inner > .landing-section__title.reveal {
  transition-duration: 1.2s;
}

/* 左右捲動列：隱藏捲軸（動畫期間內容尺寸變動會閃出捲軸），滑動照常 */
.landing-services__grid,
.landing-cases__grid {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.landing-services__grid::-webkit-scrollbar,
.landing-cases__grid::-webkit-scrollbar {
  display: none;
}

/* 捲動列內的卡片：位移小一些，避免進場時被捲動容器裁切 */
.landing-services__grid .reveal,
.landing-cases__grid .reveal {
  transform: translateY(24px);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* 徽章／logo：改為放大浮現 */
.reveal--zoom {
  transform: translateY(20px) scale(0.86);
}

/* ---------- 捲動列輪播：中間大、兩邊小（服務卡與案例卡共用） ---------- */

/* 進場沿用 reveal 節奏，另外補 box-shadow 過場給 hover／置中切換用 */
.landing-cases__grid .landing-case-card.reveal {
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--qp-reveal-delay, 0ms),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--qp-reveal-delay, 0ms),
    box-shadow 0.28s ease;
}

.landing-services__grid .landing-service-card.reveal {
  transition:
    opacity 1.35s cubic-bezier(0.16, 1, 0.3, 1) var(--qp-reveal-delay, 0ms),
    transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) var(--qp-reveal-delay, 0ms),
    box-shadow 0.28s ease;
}

/* 案例卡：所有尺寸都中間大兩邊小（.is-in 提高權重蓋掉 .reveal.is-in 的 transform: none） */
.landing-cases__grid .landing-case-card.is-in {
  transform: scale(0.9);
  opacity: 0.7;
}

.landing-cases__grid .landing-case-card.is-in.is-active {
  transform: none;
  opacity: 1;
  box-shadow: var(--qp-shadow-lg);
  z-index: 1;
}

/* 手機版以上維持完全不透明，仍保留原本的卡片縮放層次 */
@media (min-width: 641px) {
  .landing-cases__grid .landing-case-card.is-in {
    opacity: 1;
  }
}

/* hover 放大浮起（僅案例卡、且真的有 hover 的裝置；權重需高於 .is-active） */
@media (hover: hover) and (min-width: 641px) {
  .landing-cases__grid .landing-case-card.is-in:hover {
    transform: scale(1.04);
    opacity: 1;
    box-shadow: var(--qp-shadow-lg);
    z-index: 2;
    transition-duration: 0.28s;
    transition-delay: 0s;
  }
}

@media (max-width: 640px) {
  /* 捲動列可滑動時改用短 transition：切換置中卡片要即時跟手 */
  .landing-cases__grid .landing-case-card.reveal.is-in {
    transition:
      transform 0.35s ease,
      opacity 0.35s ease,
      box-shadow 0.35s ease;
    transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero__inner > *,
.landing-hero__wordmark {
    animation: none;
  }

  .landing-hero__video {
    display: none;
  }

  .reveal,
.reveal--zoom,
.landing-services__grid .reveal,
.landing-cases__grid .reveal,
.landing-case-card.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* 輪播的縮放狀態保留（非動態），但不做過場 */
  .landing-cases__grid .landing-case-card.reveal.is-in,
.landing-services__grid .landing-service-card.reveal.is-in {
    transition: none;
  }
}

/* Footer（淺色） */
.landing-footer {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-10);
  padding: var(--qp-space-16, 64px) var(--qp-space-10) var(--qp-space-8);
  background: var(--qp-surface-card);
  border-top: 1px solid var(--qp-border-default);
  color: var(--qp-neutral-600);
}

/* 全站固定回頂按鈕，獨立於 footer 與各頁內容結構 */
.scroll-to-top {
  position: fixed;
  bottom: 64px;
  right: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--qp-neutral-300);
  border-radius: var(--qp-radius-full);
  background: var(--qp-surface-card);
  color: var(--qp-neutral-700);
  box-shadow: var(--qp-shadow-sm);
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.scroll-to-top:hover {
  color: var(--qp-brand);
  border-color: var(--qp-brand);
  background: var(--qp-primary-50);
  transform: translateY(-2px);
  box-shadow: var(--qp-shadow-md);
}

.scroll-to-top:focus-visible {
  outline: 2px solid var(--qp-brand);
  outline-offset: 3px;
}

.auth-signup-side__to-top {
  position: absolute;
  right: var(--qp-space-5);
  bottom: calc(106px + var(--qp-space-5));
  z-index: 4;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-to-top {
    transition: none;
  }
}

.landing-footer__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--qp-space-10);
  flex-wrap: wrap;
  width: min(100%, var(--qp-content-width-wide));
  margin: 0 auto;
}

.landing-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qp-space-5);
}

.landing-footer__socials {
  display: flex;
  gap: var(--qp-space-3);
}

.landing-footer__socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--qp-radius-full);
  border: 1px solid var(--qp-neutral-300);
  color: var(--qp-neutral-600);
}

.landing-footer__socials a:hover {
  border-color: var(--qp-neutral-500);
  color: var(--qp-neutral-950);
}

.landing-footer__cols {
  display: flex;
  align-items: flex-start;
  gap: var(--qp-space-12, 48px);
  flex-wrap: wrap;
}

.landing-footer__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--qp-space-3);
  font-size: 13px;
  text-align: center;
}

.landing-footer__col p {
  font-size: 14px;
  font-weight: 600;
  color: var(--qp-neutral-900);
  margin-bottom: var(--qp-space-1);
}

.landing-footer__col a {
  color: var(--qp-neutral-500);
  text-decoration: none;
}

.landing-footer__col a:hover {
  color: var(--qp-brand);
}

.landing-footer__copyright {
  width: min(100%, var(--qp-content-width-wide));
  margin: 0 auto;
  padding-top: var(--qp-space-6);
  border-top: 1px solid var(--qp-neutral-200);
  font-size: 12px;
  line-height: 20px;
  color: var(--qp-neutral-400);
}

@media (max-width: 768px) {
  /* 以下為 414 手機設計稿的值 */
  .landing-section__title {
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0.5px;
  }

  .landing-stat__num {
    font-size: 40px;
    line-height: 54px;
    letter-spacing: -0.6px;
  }

  .landing-platforms {
    grid-template-columns: repeat(3, minmax(0, 150px));
    gap: var(--qp-space-4);
  }

  .landing-platform-chip {
    width: 100%;
  }

  .landing-platforms__cta {
    width: min(100%, 320px);
  }

  .landing-hero__wordmark {
    font-size: 70px;
  }

  .landing-hero__logo {
    height: 22px;
  }

  .landing-hero__tagline {
    font-size: 16px;
  }

  .landing-hero__cta {
    font-size: 14px;
  }

  .landing-nav {
    display: flex;
    justify-content: space-between;
    height: 48px;
    padding: 12px var(--qp-space-5);
    gap: var(--qp-space-4);
  }

  /* 手機：頁面連結收進漢堡下拉面板 */
  .landing-nav__page-links {
    display: none;
  }

  .landing-nav__signup {
    display: none;
  }

  .landing-nav__actions > .landing-nav__ghost {
    padding-right: 0;
  }

  .landing-nav__actions > .landing-nav__login:hover,
.landing-nav__actions > .landing-nav__login:active,
.landing-nav--home:not(.landing-nav--home-scrolled):not(.landing-nav--menu-open)
    .landing-nav__login:hover,
.landing-nav--home:not(.landing-nav--home-scrolled):not(.landing-nav--menu-open)
    .landing-nav__login:active {
    background: transparent;
  }

  .landing-nav__burger {
    display: inline-flex;
  }

  .landing-nav__brand > a {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
  }

  .landing-nav--home:not(.landing-nav--home-scrolled) .landing-nav__brand > a {
    display: none;
  }

  .landing-nav__logo {
    height: 24px;
  }

  .landing-nav__menu:not([hidden]) {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--qp-space-2) var(--qp-space-5);
    background: var(--qp-surface-card);
    border-bottom: 1px solid var(--qp-border-default);
    box-shadow: var(--qp-shadow-md);
    animation: qp-nav-menu-drop 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .landing-nav__menu a,
.landing-nav__menu button {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: var(--qp-nav-letter-spacing);
    line-height: 22px;
    color: var(--qp-neutral-800);
    text-align: left;
    cursor: pointer;
  }

  .landing-nav__menu > * + * {
    border-top: 1px solid var(--qp-border-default);
  }

  @keyframes qp-nav-menu-drop {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .landing-hero {
    align-items: center;
    min-height: 100dvh;
    padding: 136px var(--qp-space-5) 96px;
  }

  .landing-hero__inner {
    width: 100%;
    gap: var(--qp-space-5);
  }

  .landing-apple,
.landing-apple-info,
.landing-youtube {
    min-height: 360px;
    padding-block: 72px;
    padding-inline: var(--qp-space-5);
  }

  .landing-apple-info__inner {
    gap: var(--qp-space-8);
  }

  .landing-apple-info__content {
    text-align: center;
  }

  .landing-apple__badge {
    height: 64px;
  }

  .landing-services,
.landing-reach,
.landing-cases,
.landing-more {
    padding-left: var(--qp-space-5);
    padding-right: var(--qp-space-5);
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .landing-footer {
    align-items: center;
    padding: var(--qp-space-10) var(--qp-space-5) var(--qp-space-6);
    text-align: center;
  }

  .landing-footer__main {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .landing-footer__brand {
    align-items: center;
  }

  .landing-footer__socials {
    justify-content: center;
  }

  .landing-footer__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    width: 100%;
    gap: var(--qp-space-8) var(--qp-space-4);
  }

  .landing-footer__col {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .landing-footer__copyright {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .landing-platforms {
    grid-template-columns: repeat(2, minmax(0, 150px));
  }
}

/* ---------- 麵包屑 ---------- */

.breadcrumb {
  background: var(--qp-surface-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid var(--qp-border-default);
}

.breadcrumb__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--qp-space-1);
  width: 100%;
  padding: var(--qp-space-3)
    max(var(--qp-space-10), calc((100% - var(--qp-content-width-wide)) / 2));
  box-sizing: border-box;
  font-size: 14px;
  color: var(--qp-text-secondary);
}

.breadcrumb__end {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.faq-language {
  position: relative;
}

.faq-language__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qp-space-2);
  min-height: 34px;
  padding: var(--qp-space-1) var(--qp-space-3);
  border: 1px solid var(--qp-border-default);
  border-radius: var(--qp-radius-full);
  background: var(--qp-surface-card);
  color: var(--qp-neutral-700);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

.faq-language__trigger:hover,
.faq-language.is-open .faq-language__trigger {
  border-color: var(--qp-primary-300);
  background: var(--qp-primary-50);
  color: var(--qp-primary-700);
}

.faq-language__trigger:focus-visible,
.faq-language__option:focus-visible {
  outline: 2px solid var(--qp-primary-400);
  outline-offset: 2px;
}

.faq-language__chevron {
  transition: transform 0.2s ease;
}

.faq-language.is-open .faq-language__chevron {
  transform: rotate(180deg);
}

.faq-language__menu {
  position: absolute;
  top: calc(100% + var(--qp-space-2));
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: 176px;
  padding: var(--qp-space-2);
  border: 1px solid var(--qp-border-default);
  border-radius: var(--qp-radius-lg);
  background: var(--qp-surface-card);
  box-shadow: var(--qp-shadow-lg);
}

.faq-language__menu[hidden] {
  display: none;
}

.faq-language__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: var(--qp-space-2) var(--qp-space-3);
  border-radius: var(--qp-radius-md);
  color: var(--qp-neutral-700);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.faq-language__option:hover {
  background: var(--qp-surface-subtle);
}

.faq-language__option.is-selected {
  background: var(--qp-primary-50);
  color: var(--qp-primary-700);
}

@media (max-width: 768px) {
  .breadcrumb__inner {
    padding-inline: var(--qp-space-5);
  }

  .faq-page .faq-language__trigger {
    width: 34px;
    height: 34px;
    min-height: 34px;
    gap: 0;
    padding: 0;
  }

  .faq-page .faq-language__trigger [data-language-label],
.faq-page .faq-language__chevron {
    display: none;
  }
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--qp-space-1);
}

.breadcrumb__item a {
  color: var(--qp-text-secondary);
  text-decoration: none;
}

.breadcrumb__item a:hover {
  color: var(--qp-brand);
}

.breadcrumb__item [aria-current='page'] {
  font-weight: 600;
  color: var(--qp-neutral-800);
}

.breadcrumb__sep {
  color: var(--qp-neutral-300);
}

/* ---------- 常見問題 ---------- */

.faq-page {
  display: flex;
  flex-direction: column;
}

/* --qp-site-nav-h：Hero 預留的導覽列高度；--qp-faq-w：FAQ 內容欄寬。 */
.faq-page {
  --qp-site-nav-h: 64px;
  --qp-faq-w: var(--qp-content-width-wide);
}

@media (max-width: 768px) {
  .faq-page {
    --qp-site-nav-h: 48px;
  }
}

.faq-page:not(.marketing-page) > .breadcrumb {
  margin-top: var(--qp-site-nav-h);
}

/* 分類頁以易讀行寬為主 */
/* 分類頁與總覽頁同寬（--qp-faq-w 1200px） */

/* 底色為品牌青綠漸層，總覽頁與分類頁共用 */
.faq-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--qp-space-3);
  padding:  var(--qp-space-6) var(--qp-space-6);
  background: var(--qp-neutral-900);
}

.faq-hero::before {
  content: '';
  position: absolute;
  inset: -8px;
  z-index: -2;
  background: url('../media/faq.JPG') center / cover no-repeat;
  filter: blur(5px);
  transform: scale(1.04);
}

.faq-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--qp-neutral-950) 48%, transparent);
  pointer-events: none;
}

.faq-page--overview .faq-hero {
  justify-content: center;
  min-height: 220px;
  box-sizing: border-box;
  padding: var(--qp-space-6);
}

/* 頁標比一般區塊標題細也小一階（Medium 28 / 字距 2px） */
.faq-hero .landing-section__title {
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--qp-neutral-0);
}

.faq-hero .landing-section__desc {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 1px;
  color: var(--qp-neutral-0);
}

/* 分類頁標題：icon + 分類名 */
/* 分類頁 hero 沒有搜尋框，其餘與總覽頁相同 */
.faq-hero--category {
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: 160px;
  padding: var(--qp-space-6)
    max(var(--qp-space-10), calc((100% - var(--qp-content-width-wide)) / 2))
    var(--qp-space-6);
  box-sizing: border-box;
  background: var(--qp-neutral-900);
  text-align: left;
}

.faq-hero--category .landing-section__title {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--qp-neutral-0);
}

.faq-hero--category .landing-section__desc {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--qp-neutral-0);
}

/* FAQ 桌機頁標沿用全站 landing 區塊標題尺寸。 */
@media (min-width: 769px) {
  .faq-hero .landing-section__title,
.faq-hero--category .landing-section__title {
    font-size: 32px;
    line-height: 42px;
  }

  .faq-hero .landing-section__desc {
    font-size: 16px;
  }
}

.faq-search {
  width: min(100%, 440px);
}

/* 分類卡 */
/* 滿版淺灰帶，內容欄靠左右內距置中（1200 - 48 = 1152） */
.faq-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--qp-space-5);
  width: 100%;
  padding: var(--qp-space-10)
    max(var(--qp-space-6), calc((100% - var(--qp-faq-w)) / 2 + var(--qp-space-6))) 60px;
  box-sizing: border-box;
  background: var(--qp-surface-page);
}

.faq-cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-2);
  padding: var(--qp-space-6);
  border: 1px solid var(--qp-border-default);
  border-radius: var(--qp-radius-xl);
  background: var(--qp-surface-card);
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.faq-cat-card:hover {
  border-color: var(--qp-brand);
  box-shadow: var(--qp-shadow-md);
}

.faq-cat-card__title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--qp-neutral-900);
}

.faq-cat-card__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--qp-space-2);
  font-size: 13px;
  font-weight: 400;
  color: var(--qp-brand);
}

/* 搜尋結果 */
.faq-results {
  width: min(100%, var(--qp-faq-w));
  margin: 0 auto;
  padding: var(--qp-space-10) var(--qp-space-6) 96px;
  box-sizing: border-box;
}

.faq-result {
  font-size: 14px;
  color: var(--qp-text-secondary);
  margin-bottom: var(--qp-space-4);
}

.faq-result-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--qp-border-default);
}

.faq-result-item {
  display: flex;
  align-items: center;
  gap: var(--qp-space-4);
  padding: var(--qp-space-4) 0;
  border-bottom: 1px solid var(--qp-border-default);
  text-decoration: none;
  color: var(--qp-neutral-900);
}

.faq-result-item:hover {
  color: var(--qp-brand);
}

.faq-result-item__cat {
  flex-shrink: 0;
  padding: 2px var(--qp-space-3);
  border-radius: var(--qp-radius-full);
  background: var(--qp-primary-50);
  color: var(--qp-brand);
  font-size: 12px;
  font-weight: 600;
}

.faq-result-item__q {
  flex: 1;
}

.faq-result-item__q,
.faq-item__head {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

/* 問答區 */
.faq-sections {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-5);
  width: 100%;
  padding: 20px
    max(var(--qp-space-10), calc((100% - var(--qp-content-width-wide)) / 2)) 60px;
  box-sizing: border-box;
  background: var(--qp-surface-page);
}

/* 上/下一個分類 */
.faq-pager {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--qp-space-4);
  margin-top: 12px;
}

/* 沒有上一個分類時的佔位，維持下一個靠右 */
.faq-pager > span:empty {
  flex: 1 1 0;
}

/* 無外框：圓形 icon 鈕 + 20px 間距的置中文字 */
.faq-pager__link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  color: var(--qp-neutral-900);
  text-decoration: none;
  transition: color 0.2s ease;
}

.faq-pager__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--qp-border-default);
  border-radius: var(--qp-radius-full);
  color: var(--qp-text-secondary);
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}

.faq-pager__text {
  text-align: center;
}

@media (min-width: 769px) {
  .faq-pager__text {
    font-size: 16px;
  }
}

.faq-pager__link:hover {
  color: var(--qp-brand);
}

.faq-pager__link:hover .faq-pager__icon {
  border-color: var(--qp-brand);
  color: var(--qp-brand);
}

.faq-pager__label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--qp-text-secondary);
  margin-bottom: 2px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.faq-item {
  border-bottom: 1px solid var(--qp-border-default);
}

.faq-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qp-space-4);
  width: 100%;
  padding: var(--qp-space-5) 0;
  text-align: left;
  color: var(--qp-neutral-900);
  cursor: pointer;
}

.faq-item__head:hover {
  color: var(--qp-neutral-600);
}

.faq-item__chevron {
  flex-shrink: 0;
  color: var(--qp-text-secondary);
  transition: transform 0.2s ease;
}

.faq-item.is-open .faq-item__chevron {
  transform: rotate(180deg);
  color: var(--qp-brand);
}

.faq-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-3);
  padding: 0 var(--qp-space-8) var(--qp-space-5) 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--qp-neutral-700);
}

.faq-item__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qp-space-4);
  margin-top: var(--qp-space-1);
}

.faq-item__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--qp-brand);
}

/* 聯絡我們 */
.faq-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  scroll-margin-top: var(--qp-site-nav-h);
  gap: var(--qp-space-8);
  flex-wrap: wrap;
  /* 視窗小於容器寬度時仍保留左右留白 */
  width: min(calc(100% - var(--qp-space-12, 48px)), var(--qp-faq-w));
  margin: var(--qp-space-10) auto 60px;
  padding: var(--qp-space-10);
  box-sizing: border-box;
  background: var(--qp-primary-50);
  border-radius: var(--qp-radius-xl);
}

.faq-contact__text {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-2);
}

.faq-contact .btn--lg {
  flex-shrink: 0;
}

/* 聯絡我們彈窗 */
.contact-modal {
  max-width: 720px;
  max-height: calc(100dvh - 64px);
  border: 1px solid color-mix(in srgb, var(--qp-neutral-950) 8%, transparent);
  border-radius: 24px;
  box-shadow: 0 28px 72px color-mix(in srgb, var(--qp-neutral-950) 34%, transparent);
}

.contact-modal .modal__head {
  position: relative;
  justify-content: center;
  padding: var(--qp-space-8) 64px var(--qp-space-5);
  border-bottom: 0;
  text-align: center;
}

.contact-modal .modal__head h2 {
  font-size: 28px;
  line-height: 36px;
  color: var(--qp-neutral-950);
}

.contact-modal .modal__head > .icon-btn {
  position: absolute;
  top: var(--qp-space-6);
  right: var(--qp-space-6);
}

.contact-modal__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qp-space-2);
}

.contact-modal__heading p {
  max-width: 520px;
  font-size: 14px;
  line-height: 24px;
  color: var(--qp-text-secondary);
}

.contact-modal__body {
  gap: var(--qp-space-8);
  padding: 0 var(--qp-space-8) var(--qp-space-8);
  background: var(--qp-surface-card);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.contact-modal__body::-webkit-scrollbar {
  display: none;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qp-space-5) var(--qp-space-4);
}

.contact-form__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.contact-form__row:nth-child(1),
.contact-form__row:nth-child(4),
.contact-form__row:nth-child(7) {
  grid-column: 1 / -1;
}

.contact-form__row--top {
  align-items: stretch;
}

.contact-form__label {
  width: 100%;
  text-align: left;
}

.contact-form__control {
  min-width: 0;
}

.contact-form__input {
  width: 100%;
  max-width: none;
  height: var(--qp-field-height);
  min-height: var(--qp-field-height);
  background: var(--qp-surface-card);
  border: 1px solid var(--qp-border-input);
  border-radius: var(--qp-radius-full);
  padding: var(--qp-space-2) var(--qp-space-6);
  font-size: 14px;
  font-weight: 400;
}

.contact-form__input:focus-within {
  border-color: var(--qp-brand);
}

.contact-form__select {
  width: 100%;
  max-width: none;
}

.contact-form__textarea {
  height: auto;
  min-height: 120px;
  padding: var(--qp-space-4) var(--qp-space-6);
  align-items: stretch;
  border-radius: 24px;
}

.input--area {
  height: auto;
  min-height: auto;
}

.input--area > textarea {
  flex: 1;
  width: 100%;
  min-height: 104px;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  resize: vertical;
  line-height: 22px;
}

.input--area > textarea::placeholder {
  color: var(--qp-text-disabled);
}

.contact-radio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  width: min(100%, 240px);
  padding: 4px;
  gap: 4px;
  background: var(--qp-neutral-100);
  border-radius: var(--qp-radius-full);
}

.contact-radio__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--qp-space-4);
  gap: 0;
  border-radius: var(--qp-radius-full);
  font-size: 14px;
  font-weight: 500;
  color: var(--qp-neutral-800);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.contact-radio__item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.contact-radio__dot {
  display: none;
}

.contact-radio__item:has(input:checked) {
  color: var(--qp-neutral-0);
  background: var(--qp-brand);
  box-shadow: var(--qp-shadow-sm);
}

.contact-radio__item:has(input:focus-visible) {
  outline: 2px solid var(--qp-brand);
  outline-offset: 2px;
}

/* 取消 + 送出 靠右並排 */
.contact-modal__submit {
  display: flex;
  justify-content: stretch;
  gap: var(--qp-space-3);
}

.contact-modal__submit .btn {
  flex: 1;
  font-weight: 700;
}

.contact-modal__submit .btn--outline {
  border-color: var(--qp-border-input);
  color: var(--qp-neutral-700);
}

.contact-modal__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--qp-space-4);
  padding: var(--qp-space-8) var(--qp-space-4);
}

.contact-modal__success-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--qp-neutral-900);
}

.contact-modal__success-desc {
  font-size: 14px;
  line-height: 24px;
  color: var(--qp-text-secondary);
  max-width: 360px;
}

@media (max-width: 768px) {
  .modal-overlay.contact-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .contact-modal {
    width: 100%;
    max-width: none;
    max-height: 88dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -20px 56px color-mix(in srgb, var(--qp-neutral-950) 28%, transparent);
  }

  .contact-modal .modal__head {
    padding: var(--qp-space-8) 52px var(--qp-space-5);
  }

  .contact-modal .modal__head > .icon-btn {
    top: var(--qp-space-5);
    right: var(--qp-space-5);
  }

  .contact-modal .modal__head h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .contact-modal__body {
    padding: 0 var(--qp-space-5)
      max(var(--qp-space-6), env(safe-area-inset-bottom));
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-form__row {
    grid-column: auto;
    gap: 6px;
  }

  .contact-form__row:nth-child(1),
.contact-form__row:nth-child(4),
.contact-form__row:nth-child(7) {
    grid-column: auto;
  }
}

@media (max-width: 768px) {
  .faq-hero {
    padding: var(--qp-space-5) var(--qp-space-8);
  }

  .faq-page--overview .faq-hero {
    min-height: 200px;
    padding: var(--qp-space-6) var(--qp-space-5);
  }

  .faq-hero--category {
    min-height: 140px;
    padding: var(--qp-space-6) var(--qp-space-5);
  }

  .faq-cats,
.faq-sections {
    padding-left: var(--qp-space-5);
    padding-right: var(--qp-space-5);
  }

  .faq-cat-card__title {
    font-size: 16px;
    line-height: 24px;
  }

  .faq-result-item__q,
.faq-item__head {
    font-size: 16px;
    line-height: 24px;
  }

  .faq-item__body {
    font-size: 14px;
    line-height: 24px;
  }

  .faq-pager {
    align-items: center;
    gap: var(--qp-space-2);
  }

  .faq-pager > span:empty {
    display: block;
  }

  .faq-pager__link {
    flex: 1 1 0;
    width: auto;
    min-height: 64px;
    gap: var(--qp-space-2);
    padding: var(--qp-space-2) 0;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 20px;
  }

  .faq-pager__link--next {
    justify-content: flex-end;
  }

  .faq-pager__icon {
    width: 36px;
    height: 36px;
  }

  .faq-pager__text {
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .faq-pager__link--next .faq-pager__text {
    text-align: right;
  }

  .faq-contact {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    width: calc(100% - var(--qp-space-10));
    margin: var(--qp-space-10) auto 64px;
    padding: var(--qp-space-6);
    gap: var(--qp-space-6);
  }

  .faq-contact__text {
    width: 100%;
  }

  .faq-contact .landing-section__title {
    font-size: 22px;
    line-height: 30px;
  }

  .faq-contact .btn--lg {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- 登入 / 註冊（滿版彈窗） ---------- */

.auth-page {
  min-height: 100dvh;
  background: var(--qp-neutral-950);
}

/* 滿版覆蓋層：蓋住 landing，頂部提供關閉與語言控制。 */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  isolation: isolate;
  overflow: hidden;
  background: var(--qp-neutral-950);
}

.auth-overlay__controls {
  position: fixed;
  top: var(--qp-space-5);
  right: var(--qp-space-5);
  left: var(--qp-space-5);
  z-index: 61;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qp-space-3);
  pointer-events: none;
}

.auth-overlay__controls > * {
  pointer-events: auto;
}

.auth-overlay__close {
  position: static;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--qp-neutral-0);
  background: color-mix(in srgb, var(--qp-neutral-950) 36%, transparent);
  border: 1px solid color-mix(in srgb, var(--qp-neutral-0) 30%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.auth-language {
  z-index: 1;
}

.auth-language .faq-language__trigger {
  height: 40px;
  min-height: 40px;
  padding: 0 var(--qp-space-3);
  color: var(--qp-neutral-0);
  background: color-mix(in srgb, var(--qp-neutral-950) 36%, transparent);
  border-color: color-mix(in srgb, var(--qp-neutral-0) 30%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.auth-overlay__close:hover,
.auth-language .faq-language__trigger:hover,
.auth-language.is-open .faq-language__trigger {
  color: var(--qp-neutral-0);
  background: color-mix(in srgb, var(--qp-neutral-950) 48%, transparent);
  border-color: color-mix(in srgb, var(--qp-neutral-0) 38%, transparent);
}

/* 公開頁導覽列語言選單：沿用語言元件，但配合白底／透明 Hero 導覽狀態。 */
.landing-nav .auth-language .faq-language__trigger {
  height: 36px;
  min-height: 36px;
  padding: 0 var(--qp-space-3);
  color: var(--qp-neutral-800);
  background: transparent;
  border-color: var(--qp-border-default);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.landing-nav .auth-language .faq-language__trigger:hover,
.landing-nav .auth-language.is-open .faq-language__trigger {
  color: var(--qp-primary-700);
  background: var(--qp-primary-50);
  border-color: var(--qp-primary-300);
}

.landing-nav--home:not(.landing-nav--home-scrolled):not(.landing-nav--menu-open)
  .auth-language .faq-language__trigger {
  color: var(--qp-neutral-0);
  background: color-mix(in srgb, var(--qp-neutral-950) 24%, transparent);
  border-color: color-mix(in srgb, var(--qp-neutral-0) 34%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.landing-nav--home:not(.landing-nav--home-scrolled):not(.landing-nav--menu-open)
  .auth-language .faq-language__trigger:hover,
.landing-nav--home:not(.landing-nav--home-scrolled):not(.landing-nav--menu-open)
  .auth-language.is-open .faq-language__trigger {
  color: var(--qp-neutral-0);
  background: color-mix(in srgb, var(--qp-neutral-950) 42%, transparent);
  border-color: color-mix(in srgb, var(--qp-neutral-0) 46%, transparent);
}

@media (max-width: 768px) {
  .landing-nav .auth-language .faq-language__trigger {
    width: 28px;
    height: 28px;
    min-height: 28px;
    gap: 0;
    padding: 0;
  }

  .landing-nav .auth-language .faq-language__trigger [data-language-label],
  .landing-nav .auth-language .faq-language__chevron {
    display: none;
  }
}

.auth-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 480px);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  width: min(100%, 1320px);
  height: 100dvh;
  min-height: 0;
  margin-inline: auto;
  padding: clamp(40px, 5vw, 72px);
  overflow: hidden;
}

/* 無視覺圖版本：表單置中滿版 */

/* 左側視覺圖 */
.auth-visual {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--qp-neutral-900);
}

.auth-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--qp-neutral-950) 26%, transparent) 0%,
      color-mix(in srgb, var(--qp-neutral-950) 68%, transparent) 100%
    ),
    color-mix(in srgb, var(--qp-neutral-950) 24%, transparent);
  pointer-events: none;
}

.auth-visual__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.auth-visual__content {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: stretch;
  justify-content: center;
  gap: var(--qp-space-3);
  width: 100%;
  min-width: 280px;
  margin: 0;
  padding: clamp(var(--qp-space-6), 4vw, var(--qp-space-12));
}

.auth-visual__logo {
  display: block;
  width: auto;
  height: 22px;
}

.auth-visual__content .landing-hero__wordmark {
  font-size: clamp(40px, 4.5vw, 60px);
}

.auth-visual__content .landing-hero__tagline {
  max-width: 360px;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.6;
  letter-spacing: 1.5px;
}

.auth-form-side {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: stretch;
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  padding: clamp(var(--qp-space-8), 4vw, var(--qp-space-12));
  background: var(--qp-surface-card);
  border: 1px solid color-mix(in srgb, var(--qp-neutral-950) 8%, transparent);
  border-radius: 24px;
  box-shadow: 0 28px 72px color-mix(in srgb, var(--qp-neutral-950) 34%, transparent);
}

.auth-form {
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
}

.auth-logo {
  display: none;
  height: 24px;
  width: auto;
  align-self: flex-start;
  margin-bottom: var(--qp-space-6);
}

.auth-title {
  font: var(--qp-text-h1);
  color: var(--qp-neutral-900);
  margin: 0 0 var(--qp-space-8);
}

.auth-fields {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-8);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-3);
}

.auth-field .form-field__label {
  min-height: 0;
}

.auth-pw-toggle {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--qp-text-secondary);
}

.auth-submit {
  margin-top: var(--qp-space-2);
  justify-content: center;
}

.auth-switch {
  margin-top: var(--qp-space-6);
  font-size: 14px;
  text-align: center;
  color: var(--qp-text-secondary);
}

.auth-switch a {
  color: var(--qp-brand);
  font-weight: 500;
}

/* 註冊頁：滿版全白，資料區白底無邊框 */
.auth-page--signup {
  padding: 0;
  background: var(--qp-neutral-950);
}

.auth-split--signup {
  --signup-modal-gutter-top: clamp(72px, 8dvh, 88px);
  --signup-modal-gutter-bottom: 40px;
  grid-template-columns: minmax(280px, 1fr) minmax(440px, 660px);
  align-items: center;
  justify-items: normal;
  gap: clamp(40px, 6vw, 96px);
  width: min(100%, 1320px);
  height: 100dvh;
  min-height: 0;
  padding: var(--signup-modal-gutter-top) clamp(var(--qp-space-5), 4vw, var(--qp-space-12))
    var(--signup-modal-gutter-bottom);
  overflow: hidden;
}

.auth-split--signup > .auth-visual {
  width: 100%;
}

.auth-signup-side {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-self: end;
  justify-self: stretch;
  width: 100%;
  height: min(
    820px,
    calc(100dvh - var(--signup-modal-gutter-top) - var(--signup-modal-gutter-bottom))
  );
  min-height: 0;
  max-height: calc(
    100dvh - var(--signup-modal-gutter-top) - var(--signup-modal-gutter-bottom)
  );
  overflow: hidden;
  padding: 0;
  background: var(--qp-surface-card);
  border: 1px solid color-mix(in srgb, var(--qp-neutral-950) 8%, transparent);
  border-radius: 24px;
  box-shadow: 0 28px 72px color-mix(in srgb, var(--qp-neutral-950) 34%, transparent);
}

.auth-signup-side__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(var(--qp-space-8), 3vw, var(--qp-space-12));
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.auth-signup-side__scroll::-webkit-scrollbar {
  display: none;
}

/* 註冊頁使用表單的第二套膠囊欄位風格；其他資料頁仍維持底線型 input。 */
.auth-signup-side .input {
  width: 100%;
  max-width: none;
  height: var(--qp-field-height);
  min-height: var(--qp-field-height);
  padding: var(--qp-space-2) var(--qp-space-6);
  border: 1px solid var(--qp-border-input);
  border-radius: var(--qp-radius-full);
  background: var(--qp-surface-card);
  font-size: 14px;
  font-weight: 400;
}

.auth-signup-side .input:focus-within,
.auth-signup-side .dropdown-select__trigger[aria-expanded='true'] {
  border-color: var(--qp-brand);
  outline: none;
}

.auth-signup-side .input > input::placeholder,
.auth-signup-side .input__placeholder {
  color: var(--qp-text-secondary);
}

.auth-page--signup.auth-page--submitted .auth-signup-side .input.input--danger {
  border-color: var(--qp-danger);
}

.auth-split--signup .signup-hero__logo {
  display: none;
}

/* 置中窄欄 */
.signup-wrap {
  width: min(100%, 620px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-10);
  padding: var(--qp-space-6) 0 var(--qp-space-8);
}

/* 頁首 */
.signup-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.signup-hero__logo {
  height: 24px;
  width: auto;
  margin-bottom: var(--qp-space-6);
}

.signup-hero h1 {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  color: var(--qp-neutral-950);
  margin-bottom: var(--qp-space-3);
}

.signup-hero p {
  font-size: 14px;
  color: var(--qp-text-secondary);
}

/* 步驟區塊 */
.signup-block {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-6);
}

.signup-block[hidden] {
  display: none;
}

.signup-block__body {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-4);
}

/* 欄位在窄欄內兩欄均分填滿 */
.signup-block .form-grid {
  gap: var(--qp-space-4) var(--qp-space-5);
}

/* 證明文件：桌機兩欄（2×2），手機單欄 */

.signup-block .form-grid .form-field {
  flex: 1 1 260px;
  width: auto;
  max-width: none;
}

.signup-block .form-grid .form-field .input {
  max-width: none;
}

/* 地址與日期依舊版註冊資訊各自占滿一行，避免內容被兩欄壓縮。 */
.signup-block .form-grid--single .form-field {
  flex-basis: 100%;
  width: 100%;
  max-width: none;
}

.signup-address-match {
  display: flex;
  justify-content: flex-start;
  margin-top: calc(var(--qp-space-2) * -1);
}

/* 註冊頁必填符號沿用舊站：紅色全形星號置於欄位名稱前。 */
.auth-signup-side .form-field__req {
  order: -1;
  margin-right: 4px;
  margin-left: 0;
}

.signup-scope-field {
  width: 100%;
  max-width: none;
}

.signup-type-fields {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-4);
}

.signup-type-fields[hidden] {
  display: none;
}

/* 提醒面板 */
.signup-notice {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-2);
  padding: var(--qp-space-4) var(--qp-space-5);
  background: var(--qp-surface-page);
  border-radius: var(--qp-radius-lg);
}

.signup-notice__warn {
  font-size: 14px;
  font-weight: 500;
  color: var(--qp-danger);
}

.signup-notice ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 21px;
  color: var(--qp-text-secondary);
}

/* segmented（授權商類型） */
.seg {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px;
  gap: 2px;
  background: var(--qp-neutral-100);
  border-radius: var(--qp-radius-full);
}

.seg__btn {
  padding: var(--qp-space-2) var(--qp-space-6);
  border-radius: var(--qp-radius-full);
  font-size: 14px;
  font-weight: 500;
  color: var(--qp-neutral-600);
}

.seg__btn.is-active {
  background: var(--qp-surface-card);
  color: var(--qp-neutral-900);
  font-weight: 600;
  box-shadow: var(--qp-shadow-sm);
}

/* 授權範圍選卡 */
.scope-cards {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-3);
}

.scope-card {
  display: flex;
  align-items: flex-start;
  gap: var(--qp-space-3);
  text-align: left;
  padding: var(--qp-space-5);
  border: 1.5px solid var(--qp-border-default);
  border-radius: var(--qp-radius-lg);
  background: var(--qp-surface-card);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.scope-card:hover {
  border-color: var(--qp-neutral-400);
}

.scope-card.is-selected {
  border-color: var(--qp-brand);
  background: var(--qp-primary-50);
}

.scope-card__check {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--qp-border-input);
  border-radius: var(--qp-radius-full);
  color: transparent;
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.scope-card.is-selected .scope-card__check {
  background: var(--qp-brand);
  border-color: var(--qp-brand);
  color: var(--qp-neutral-0);
}

.scope-card__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--qp-neutral-900);
}

.scope-card__desc {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: var(--qp-text-secondary);
  margin-top: 4px;
}

/* 同意聲明面板 */
.signup-agree-panel {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-4);
  padding: var(--qp-space-5);
  background: var(--qp-surface-page);
  border-radius: var(--qp-radius-lg);
}

.signup-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  font-size: 14px;
  line-height: 22px;
  color: var(--qp-neutral-700);
  cursor: pointer;
}

.signup-agree .checkbox {
  margin-top: 3px;
  flex-shrink: 0;
}

/* 固定步驟操作列 */
.signup-step-footer {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: var(--qp-space-4) clamp(var(--qp-space-8), 3vw, var(--qp-space-12))
    max(var(--qp-space-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--qp-border-default);
  background: var(--qp-surface-card);
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--qp-neutral-950) 5%, transparent);
}

.signup-step-progress,
.signup-step-error,
.signup-step-footer__actions {
  width: min(100%, 620px);
  margin-inline: auto;
}

.signup-step-progress {
  display: flex;
  align-items: center;
  gap: var(--qp-space-3);
  margin-bottom: var(--qp-space-4);
}

.signup-step-error:not(:empty) {
  margin-bottom: var(--qp-space-3);
}

.signup-step-progress__track {
  flex: 1 1 auto;
  height: 6px;
  overflow: hidden;
  border-radius: var(--qp-radius-full);
  background: var(--qp-neutral-200);
}

.signup-step-progress__value {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--qp-brand);
  transition: width 0.2s ease;
}

.signup-step-progress__current {
  flex: 0 0 auto;
  min-width: 28px;
  font-size: 12px;
  line-height: 18px;
  text-align: right;
  color: var(--qp-text-secondary);
}

.signup-step-footer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qp-space-3);
}

.signup-step-footer__actions .btn {
  flex: 1 1 0;
  justify-content: center;
  margin: 0;
}

.signup-step-footer [hidden] {
  display: none;
}

.signup-step-error:empty {
  display: none;
}

/* 帳號審核提示 */

@media (max-width: 900px) {
  .auth-form-side,
.auth-signup-side__scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .auth-form-side::-webkit-scrollbar,
.auth-signup-side__scroll::-webkit-scrollbar {
    display: none;
  }

  .auth-overlay__close {
    color: var(--qp-neutral-0);
    background: color-mix(in srgb, var(--qp-neutral-950) 36%, transparent);
    border-color: color-mix(in srgb, var(--qp-neutral-0) 38%, transparent);
  }

  .auth-language .faq-language__trigger {
    border-color: color-mix(in srgb, var(--qp-neutral-0) 38%, transparent);
  }

  .auth-split {
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 0;
    width: 100%;
    height: 100dvh;
    padding: 72px 0 0;
  }

  .auth-visual {
    display: block;
  }

  .auth-visual__content {
    display: none;
  }

  .auth-form-side {
    grid-column: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 72px);
    align-self: end;
    justify-self: stretch;
    padding: var(--qp-space-8) var(--qp-space-6)
      max(var(--qp-space-8), env(safe-area-inset-bottom));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -20px 56px color-mix(in srgb, var(--qp-neutral-950) 28%, transparent);
  }

  .auth-form {
    align-items: center;
    text-align: center;
  }

  .auth-logo {
    display: block;
    align-self: center;
  }

  .auth-fields {
    width: 100%;
    text-align: left;
  }

  .auth-split--signup {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    height: 100dvh;
    min-height: 0;
    padding: 72px 0 0;
    overflow: hidden;
  }

  .auth-signup-side {
    grid-column: 1;
    width: 100%;
    height: calc(100dvh - 88px);
    min-height: 0;
    max-height: calc(100dvh - 88px);
    align-self: end;
    justify-self: stretch;
    overflow: hidden;
    padding: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -20px 56px color-mix(in srgb, var(--qp-neutral-950) 28%, transparent);
  }

  .auth-signup-side__scroll {
    padding: var(--qp-space-8) var(--qp-space-5) var(--qp-space-6);
  }

  .signup-step-footer {
    padding: var(--qp-space-3) var(--qp-space-5)
      max(var(--qp-space-3), env(safe-area-inset-bottom));
  }

  .signup-step-progress {
    margin-bottom: var(--qp-space-3);
  }

  .signup-step-footer__actions {
    gap: var(--qp-space-2);
  }

  .auth-signup-side__to-top {
    right: var(--qp-space-5);
    bottom: calc(82px + var(--qp-space-5) + env(safe-area-inset-bottom));
    margin: 0;
  }

  .auth-split--signup .signup-hero__logo {
    display: block;
  }
}

/* ---------- Responsive ---------- */

/* ---------- 可編輯清單列（join 資料 CRUD） ---------- */

/* 表格列內輸入：沿用 .input 底線樣式，僅放寬寬度限制 */

/* 詞曲版權語系區塊 */

/* ---------- Loader（統一 loading 指示，design-system.md §9） ---------- */

@keyframes qp-loader {
  100% {
    transform: rotate(0.5turn);
  }
}

/* 整頁載入：主內容區中心（扣除側欄寬度，與清單載入視覺位置一致） */

/* 清單/區塊內載入：區塊置中，撐高讓 loader 落在與整頁載入相近的位置 */

/* ---------- 新增歌曲彈窗 / 歌曲清單完整性提示 ---------- */

/* 歌名不加粗：與欄位內容一致 */

/* 純預覽模式：隱藏所有新增/刪除操作（僅編輯模式顯示） */

/* ============================================================
 * 詳情頁改版：AlbumHeader（slim）＋ 水平分頁 ＋ 分頁內容
 * ============================================================ */

/* ---------- Header slim 列（標題/狀態 + 動作） ---------- */

/* 外框 teal 按鈕（添加歌曲 / 匯入等） */

/* ---------- 水平分頁列 ---------- */

/* ---------- 分頁內容容器 ---------- */

/* ---------- 表單卡片（區塊內灰底圓角卡） ---------- */

/* 非表格 form-card：直接子層 form-grid 以等寬 grid 依序排列（蓋過 width prop 的 inline style，避免參差空洞） */

/* ---------- 上傳區（正方形小卡） ---------- */

/* ---------- 歌曲清單 / 詞曲版權：可展開表格 ---------- */

/* 展開列內容：與表格同寬的卡片堆疊 */

/* 歌曲展開內容改彈窗呈現：header 左標題（歌名＋所在分頁）／右關閉 */

/* 標題絕對置中：不受右側關閉鈕寬度影響 */

/* ---------- 授權範圍表格 ---------- */

/* ---------- 翻譯設定 ---------- */
/* 詞曲文案翻譯：唯讀列文字不截斷、完整換行（欄寬沿用表頭，排版維持對齊） */


@media (max-width: 768px) {

  .breadcrumb span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* --- 吸附頁首：固定在 topbar 下方，寬度對齊手機內距 --- */

  /* --- 頁首動作列：換行堆疊，搜尋框吃滿整列 --- */

  /* actions 攤平進 page-header：主要按鈕與標題同行靠右，搜尋/期間各自整列換行 */

  /* --- 表單欄位：手機一律單欄滿版（蓋過 width prop 的 inline style） --- */
  .form-grid .form-field {
    width: 100% !important;
    max-width: none !important;
  }

  /* --- 次要清單欄位：手機隱藏（JSX 標記 hide-sm） --- */

  /* --- 詳情分頁列：橫向捲動 --- */

  /* --- 清單列：縮小內距 --- */

  /* --- 狀態篩選 chips：不換行，水平滑動（同 tabs 行為） --- */

  /* --- 整頁 loader：手機無側欄，置中於 topbar 下方全寬 --- */

  /* --- 表格式編輯清單（詞曲版權/製作名單等）：橫向滑動，內容不擠壓 --- */

  /* --- 彈窗：貼齊小螢幕 --- */
  .modal-overlay {
    padding: var(--qp-space-3);
  }

  .modal__body,
.modal__head {
    padding-left: var(--qp-space-4);
    padding-right: var(--qp-space-4);
  }

  /* --- 浮動儲存列：滿版貼底 --- */

  /* --- 專輯頭部：控制列（返回＋動作鈕）在最上方，封面＋資訊群組置中靠上 --- */

  /* --- 上傳卡（封面/藝人照片）：換行不溢出 --- */

  /* --- 收合區塊標題允許換行 --- */
}

/* ---------- 行銷資源（Figma 2218:1937） ---------- */

.marketing-content {
  display: flex;
  flex-direction: column;
  background: var(--qp-surface-card);
}

.marketing-section {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--qp-marketing-section-padding-block) var(--qp-space-16);
  scroll-margin-top: var(--qp-site-nav-h);
}

.marketing-section__inner {
  display: flex;
  flex-direction: column;
  width: min(100%, var(--qp-marketing-content-width));
  margin: 0 auto;
}

.marketing-section__title {
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  color: var(--qp-neutral-900);
}

.marketing-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}

.marketing-copy h2,
.marketing-copy h3,
.marketing-media__item h3 {
  font-size: var(--qp-marketing-item-title-size);
  line-height: var(--qp-marketing-item-title-line-height);
  font-weight: 400;
  letter-spacing: var(--qp-marketing-item-title-letter-spacing);
}

.marketing-copy p,
.marketing-media__item p {
  font-size: var(--qp-marketing-body-size);
  line-height: var(--qp-marketing-body-line-height);
  font-weight: 400;
}

/* 串流平台首頁露出 */

.marketing-streaming {
  padding-top: calc(
    var(--qp-marketing-section-padding-block) + var(--qp-space-16)
  );
}

.marketing-streaming__inner {
  gap: var(--qp-marketing-section-gap);
}

.marketing-streaming__list {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-10);
}

.marketing-streaming__item {
  display: flex;
  align-items: center;
  gap: var(--qp-space-5);
  width: 100%;
}

.marketing-streaming__item--offset {
  padding-left: var(--qp-marketing-offset);
}

.marketing-streaming__image {
  width: var(--qp-marketing-stream-image-size);
  height: var(--qp-marketing-stream-image-size);
  flex: 0 0 var(--qp-marketing-stream-image-size);
  object-fit: cover;
}

.marketing-streaming__copy {
  flex: 1;
  gap: var(--qp-space-5);
  padding-inline: var(--qp-marketing-copy-padding-inline);
}

.marketing-streaming__copy h2 {
  color: var(--qp-neutral-900);
}

.marketing-streaming__copy p {
  color: var(--qp-text-secondary);
}

/* 媒體露出 */

.marketing-media {
  background-color: var(--qp-primary-400);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--qp-neutral-0);
}

.marketing-media__inner {
  gap: var(--qp-marketing-section-gap);
}

.marketing-media .marketing-section__title {
  color: var(--qp-neutral-0);
}

.marketing-media__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qp-space-10);
}

.marketing-media__item {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--qp-space-10);
}

.marketing-media__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border: 2px solid var(--qp-neutral-0);
  border-radius: var(--qp-radius-full);
  background: color-mix(in srgb, var(--qp-neutral-0) 20%, transparent);
}

.marketing-media__body {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-2);
  min-width: 0;
  padding-left: var(--qp-space-5);
  border-left: 1px solid var(--qp-neutral-0);
  text-align: left;
}

.marketing-media__item h3 {
  font-weight: 500;
  color: var(--qp-neutral-0);
}

.marketing-media__item p {
  color: var(--qp-neutral-0);
}

/* 專案廣宣規劃 */

.marketing-projects__inner {
  gap: var(--qp-space-10);
}

.marketing-projects__list {
  display: flex;
  flex-direction: column;
  gap: var(--qp-marketing-section-gap);
}

.marketing-project {
  display: flex;
  align-items: center;
  gap: var(--qp-space-8);
  width: 100%;
}

.marketing-project--reverse {
  flex-direction: row-reverse;
}

.marketing-project__image-wrap {
  width: var(--qp-marketing-project-image-width);
  height: var(--qp-marketing-project-image-height);
  flex: 0 0 var(--qp-marketing-project-image-width);
  border-radius: var(--qp-radius-2xl);
  background: var(--qp-surface-card);
  box-shadow: var(--qp-marketing-shadow-offset) var(--qp-marketing-shadow-offset) 0
    var(--qp-marketing-accent-shadow);
  overflow: hidden;
}

.marketing-project__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.marketing-project__copy {
  flex: 1;
  gap: var(--qp-space-3);
}

.marketing-project__copy h3 {
  color: var(--qp-neutral-900);
}

.marketing-project__copy p {
  color: var(--qp-text-secondary);
}

.marketing-projects__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--qp-marketing-section-gap);
}

.marketing-projects__cta-button {
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  border: none;
  outline: none;
  color: var(--qp-text-inverse);
  background: var(--qp-gradient-primary-action);
  letter-spacing: var(--qp-nav-letter-spacing);
  box-shadow: var(--qp-shadow-md);
  transition:
    filter 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.marketing-projects__cta-button:focus-visible {
  box-shadow: var(--qp-ring), var(--qp-shadow-lg);
}

.marketing-projects__cta-button:hover {
  filter: brightness(1.08);
  box-shadow: var(--qp-shadow-lg);
  transform: translateY(-2px);
}

.marketing-projects__cta-button:active {
  filter: brightness(0.96);
  transform: translateY(0);
}

@media (max-width: 768px) {
  .marketing-section {
    padding: var(--qp-space-12) var(--qp-space-5);
  }

  .marketing-streaming {
    padding-top: calc(var(--qp-space-16) + var(--qp-space-4));
  }

  .marketing-section__title {
    font-size: var(--qp-marketing-title-size-mobile);
    line-height: var(--qp-marketing-title-line-height-mobile);
    letter-spacing: 1px;
  }

  .marketing-streaming__inner,
.marketing-media__inner,
.marketing-projects__inner {
    gap: var(--qp-space-10);
  }

  .marketing-streaming__item,
.marketing-streaming__item--offset {
    gap: var(--qp-space-4);
    padding-left: 0;
  }

  .marketing-streaming__image {
    width: var(--qp-marketing-stream-image-size-mobile);
    height: var(--qp-marketing-stream-image-size-mobile);
    flex-basis: var(--qp-marketing-stream-image-size-mobile);
  }

  .marketing-streaming__copy {
    gap: var(--qp-space-2);
    padding-inline: 0;
  }

  .marketing-copy h2,
.marketing-copy h3,
.marketing-media__item h3 {
    font-size: var(--qp-marketing-item-title-size-mobile);
    line-height: var(--qp-marketing-item-title-line-height-mobile);
  }

  .marketing-media {
    background-position: center right;
  }

  .marketing-media__list {
    gap: var(--qp-space-8);
  }

  .marketing-media__item {
    gap: var(--qp-space-5);
  }

  .marketing-media__badge {
    width: 72px;
    height: 72px;
  }

  .marketing-media__badge svg {
    width: 28px;
    height: 28px;
  }

  .marketing-projects__list {
    gap: var(--qp-space-12);
  }

  .marketing-project,
.marketing-project--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: var(--qp-space-6);
  }

  .marketing-project__image-wrap {
    width: calc(100% - var(--qp-space-2));
    height: auto;
    flex-basis: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 480px) {
  .marketing-streaming__item,
.marketing-streaming__item--offset {
    align-items: flex-start;
  }

  .marketing-streaming__image {
    width: var(--qp-marketing-stream-image-size-compact);
    height: var(--qp-marketing-stream-image-size-compact);
    flex-basis: var(--qp-marketing-stream-image-size-compact);
  }
}

/* ---------- 資訊頁（個資保護聲明等法務條文） ---------- */
.legal-body {
  width: min(100%, var(--qp-content-width-wide));
  margin-inline: auto;
}

.legal-body {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-6);
  padding: 0;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.03em;
  color: var(--qp-neutral-700);
}

@media (min-width: 769px) {
  .legal-body {
    font-size: 16px;
  }
}

.legal-body ol {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-2);
  margin: 0;
  padding-left: var(--qp-space-6);
  list-style: decimal;
}

.legal-body a {
  color: var(--qp-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* iOS Safari：表單字級低於 16px 時，聚焦欄位會自動縮放頁面。 */
@media (max-width: 900px) {
  input,
textarea,
select {
    font-size: 16px !important;
  }
}

/* ---------- 服務項目（Figma 2285:3333） ---------- */
/* 內容欄與字級沿用 --qp-marketing-* 那組 token，與 /marketing 同尺度 */

.services-content {
  display: flex;
  flex-direction: column;
  background: var(--qp-surface-card);
}

.services-section {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--qp-marketing-section-padding-block) var(--qp-space-16);
  scroll-margin-top: var(--qp-site-nav-h);
  color: var(--qp-neutral-900);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 第一區要讓開固定導覽列，算式與 .marketing-streaming 相同 */
.services-content > .services-section:first-child {
  padding-top: calc(var(--qp-marketing-section-padding-block) + var(--qp-space-16));
}

.services-section--alt {
  background-color: var(--qp-surface-page);
}

.services-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--qp-marketing-section-gap);
  width: min(100%, var(--qp-content-width-narrow));
  margin: 0 auto;
}

.services-section__inner--center {
  align-items: center;
  text-align: center;
}

.services-section__title {
  font-size: 32px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  color: var(--qp-neutral-900);
}

/* 1. 作品輕鬆發行：四張圖底方塊 */
.services-steps {
  display: flex;
  align-items: center;
  gap: 64px;
  margin: 0;
  padding: 24px 0;
  list-style: none;
}

.services-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  gap: var(--qp-space-5);
  aspect-ratio: 1 / 1;
  padding: var(--qp-space-4);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--qp-neutral-0);
  text-align: center;
}

.services-step__arrow {
  position: absolute;
  top: 50%;
  left: calc(100% + 32px);
  color: var(--qp-primary-400);
  transform: translate(-50%, -50%);
}

/* 四個步驟依序由左往右淡入，delay 由元件按順序設定。 */
.services-steps .services-step.reveal {
  transform: translateX(-28px);
}

.services-steps .services-step.reveal.is-in {
  transform: none;
}

.services-step__num {
  font-size: 40px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}

.services-step__label {
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 2. 後台管理：青綠底圖 + 圓形 icon + 左框文字 */
.services-section--console {
  background-color: var(--qp-primary-400);
  color: var(--qp-neutral-0);
}

.services-section--console .services-section__title {
  color: var(--qp-neutral-0);
}

.services-rows {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-10);
}

.services-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--qp-space-10);
}

.services-row__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border: 2px solid var(--qp-neutral-0);
  border-radius: var(--qp-radius-full);
  background: color-mix(in srgb, var(--qp-neutral-0) 20%, transparent);
}

.services-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-2);
  min-width: 0;
  padding-left: var(--qp-space-5);
  border-left: 1px solid var(--qp-neutral-0);
}

.services-row__body h3 {
  font-size: var(--qp-marketing-item-title-size);
  line-height: var(--qp-marketing-item-title-line-height);
  font-weight: 500;
  letter-spacing: var(--qp-marketing-item-title-letter-spacing);
}

.services-row__body p {
  font-size: var(--qp-marketing-body-size);
  line-height: var(--qp-marketing-body-line-height);
}

/* 3. 報表及數據分析：圖左文右 */
.services-split {
  display: grid;
  grid-template-columns: 400fr 420fr;
  gap: 80px;
  align-items: center;
}

.services-split__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--qp-radius-2xl);
}

.services-split__body {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-10);
}

.services-split__item {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-2);
}

.services-split__item h3 {
  font-size: var(--qp-marketing-item-title-size);
  line-height: var(--qp-marketing-item-title-line-height);
  font-weight: 500;
  letter-spacing: var(--qp-marketing-item-title-letter-spacing);
  color: var(--qp-neutral-900);
}

.services-split__item p {
  font-size: var(--qp-marketing-body-size);
  line-height: var(--qp-marketing-body-line-height);
  color: var(--qp-text-secondary);
}

/* 4. 合作平台：底圖 + 70% 黑遮罩 */
.services-section--platforms {
  position: relative;
  isolation: isolate;
  color: var(--qp-neutral-0);
}

.services-section--platforms::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--qp-neutral-950) 70%, transparent);
}

.services-section--platforms .services-section__title {
  color: var(--qp-neutral-0);
}

/* 5. 合作模式 */
.services-model__head {
  display: flex;
  flex-direction: column;
  gap: var(--qp-space-6);
  width: min(100%, 678px);
}

.services-model__sub {
  font-size: var(--qp-marketing-body-size);
  line-height: var(--qp-marketing-body-line-height);
  color: var(--qp-text-secondary);
}

.services-model__chart {
  width: 100%;
  height: auto;
}

/* 合作模式的標題與圖間距是 40，不是區塊預設的 60 */
#model .services-section__inner {
  gap: var(--qp-space-10);
}

/* 6. 除了發行 */
.services-extra {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--qp-space-10);
  width: 100%;
}

.services-extra__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--qp-space-3);
  border-radius: var(--qp-radius-xl);
  text-align: center;
}

.services-extra__image {
  width: 64%;
  max-width: 276px;
  height: auto;
}

.services-extra__item h3 {
  font-size: var(--qp-marketing-item-title-size);
  line-height: var(--qp-marketing-item-title-line-height);
  font-weight: 400;
  letter-spacing: var(--qp-marketing-item-title-letter-spacing);
  color: var(--qp-neutral-900);
}

.services-extra__item p {
  font-size: var(--qp-marketing-body-size);
  line-height: var(--qp-marketing-body-line-height);
  color: var(--qp-text-secondary);
}

/* CTA：與 /marketing 的主要按鈕同一顆 */
.services-cta__button {
  gap: var(--qp-space-2);
  border: none;
  color: var(--qp-text-inverse);
  background: var(--qp-gradient-primary-action);
  letter-spacing: var(--qp-nav-letter-spacing);
  box-shadow: var(--qp-shadow-md);
  text-decoration: none;
  transition:
    filter 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

@media (hover: hover) {
  .services-cta__button:hover {
    filter: brightness(1.06);
    box-shadow: var(--qp-shadow-lg);
    transform: translateY(-1px);
  }
}

/* ---- RWD：設計稿只有桌機版，以下為等比收斂 ---- */

/* 平板：步驟維持水平排列，圖文並排改直式。 */
@media (max-width: 900px) {
  .services-section {
    padding-inline: var(--qp-space-8);
  }

  .services-steps {
    gap: var(--qp-space-10);
  }

  .services-step__arrow {
    left: calc(100% + 20px);
  }

  .services-split {
    grid-template-columns: 1fr;
    gap: var(--qp-space-8);
  }

  .services-split__image {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .services-section {
    padding: var(--qp-marketing-section-padding-block) var(--qp-space-5);
  }

  .services-content > .services-section:first-child {
    padding-top: calc(var(--qp-marketing-section-padding-block) + var(--qp-space-10));
  }

  .services-section__inner {
    gap: var(--qp-space-10);
  }

  #model .services-section__inner {
    gap: var(--qp-space-8);
  }

  .services-section__title {
    font-size: var(--qp-marketing-title-size-mobile);
    line-height: var(--qp-marketing-title-line-height-mobile);
  }

  .services-row__body h3,
.services-split__item h3,
.services-extra__item h3 {
    font-size: var(--qp-marketing-item-title-size-mobile);
    line-height: var(--qp-marketing-item-title-line-height-mobile);
  }

  .services-step__num {
    font-size: 32px;
  }

  .services-step {
    gap: 0;
  }

  .services-step__label {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    width: calc(100% + 16px);
    color: var(--qp-neutral-900);
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 0.25px;
    text-wrap: balance;
    transform: translateX(-50%);
  }

  .services-steps {
    gap: var(--qp-space-6);
    padding: 16px 0 46px;
  }

  .services-step__arrow {
    left: calc(100% + 12px);
    width: 24px;
    height: 24px;
  }

  /* 圓形 icon 縮小、整列改上下排列避免文字被擠爆 */
  .services-rows {
    gap: var(--qp-space-8);
  }

  .services-row {
    gap: var(--qp-space-5);
  }

  .services-row__badge {
    width: 72px;
    height: 72px;
  }

  .services-row__badge svg {
    width: 28px;
    height: 28px;
  }

  .services-extra {
    grid-template-columns: 1fr;
    gap: var(--qp-space-8);
  }
}

/* 窄版手機：四個步驟仍維持單列，縮小字級與間距避免溢出。 */
@media (max-width: 520px) {
  .services-steps {
    gap: 20px;
    padding-bottom: 54px;
  }

  .services-step {
    gap: var(--qp-space-2);
    padding: var(--qp-space-2);
  }

  .services-step__num {
    font-size: 24px;
  }

  .services-step__label {
    top: calc(100% + 8px);
    width: calc(100% + 20px);
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0;
  }

  .services-step__arrow {
    left: calc(100% + 10px);
    width: 20px;
    height: 20px;
  }

}

@media (max-width: 360px) {
  .services-steps {
    gap: 16px;
  }

  .services-step__label {
    width: calc(100% + 22px);
    font-size: 12px;
  }

  .services-step__arrow {
    left: calc(100% + 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-steps .services-step.reveal,
.services-steps .services-step.reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 登入後通知中心與作品頁公告欄 ---------- */

/* hover 不加底色，只讓標題文字轉品牌色 */

/* 單行公告：狀態標籤＋日期＋描述，不做卡片 */

/* 公告欄不淡化已讀列，狀態標籤才會跟下方清單一樣深 */

/* 標籤固定寬度，讓多行公告的日期與描述對齊 */

/* 分頁 toolbar 右側的筆數 */

/* 通知頁：純清單，列與列之間用細線分隔，不做卡片 */


/* 靜態版會預先保留 FAQ 答案內容；hidden 必須優先於元件的 flex 顯示。 */
.faq-item__body[hidden] { display: none !important; }

/* index2.html 的獨立 Hero 標題，不影響專案首頁與其他頁面。 */
body[data-home-variant="dream"] .landing-hero__wordmark {
  font-size: 60px;
}

@media (max-width: 768px) {
  body[data-home-variant="dream"] .landing-hero__wordmark {
    font-size: 36px;
  }
}