/* ============================================================================
   L5 · pages.css — 三頁專屬版式
   職責：.p-home / .p-shop / .p-community 的區塊排版
   禁止：重複定義 L4 已有元件（只做組合與定位）
   ========================================================================== */

/* ==========================================================================
   一、首頁  index.html
   依據：a3b74bef…png 「桌面端·首頁（16:9）」稿，1:1 復原
   稿面三項特徵（本節所有規則皆由此導出）：
     A. 整頁收在單一白色圓角卡片內 —— 導覽列也在卡片裡，故取消其 sticky
        與底色，並與下方卡片取相同的 40px 左右內縮。
     B. 主視覺照片左右滿版出血、上下貼齊卡片邊緣；文字壓在照片左側。
     C. 下方三張等寬主題卡（圖在上、標題＋副標在下），卡片區下另有一列
        指示點；主視覺內亦有一列指示點（白色）。
   ========================================================================== */

/* --- A. 首頁白色圓角卡片：版型（flex 直向）由 layout.css .p-home .home-shell 定義，
       本層只負責首頁專屬的視覺差異 --- */

/* 所有頁面的 shell 在資料尚未準備好時，預設不顯示內容；
   只有當頁面 JS 在實際資料載入完成後移除 .is-loading 才會顯示。 */
.shell.is-loading .shell-body,
.shell.is-loading > .shell-body {
  display: none;
}

/* 稿面首頁：導覽列與卡片同為一張白紙，故不畫底部分隔線
   （商場／社區依稿保留分隔線，見 layout.css .shell > .site-header） */
.p-home .shell > .site-header { border-bottom: 0; }

/* --- 首頁載入狀態：資料回來前完全不顯示任何頁面內容（包括骨架） --- */
.p-home .home-shell.is-loading .home-hero,
.p-home .home-shell.is-loading .home-cards,
.p-home .home-shell.is-loading .home-skeleton {
  display: none;
}

.home-skeleton {
  display: none;
  padding: var(--sp-8) var(--sp-10) var(--sp-10);
}

.home-skeleton__hero {
  height: 420px;
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--c-sand-soft) 25%, var(--c-cream-2) 50%, var(--c-sand-soft) 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.4s ease-in-out infinite;
  margin-bottom: var(--sp-8);
}

.home-skeleton__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}

.home-skeleton__card {
  height: 220px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--c-sand-soft) 25%, var(--c-cream-2) 50%, var(--c-sand-soft) 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}

/* --- 商場／商品詳情載入狀態：資料回來前完全不顯示任何內容 --- */
.p-shop .shop-shell.is-loading .shop-cats,
.p-shop .shop-shell.is-loading .shop-main,
.p-shop .shop-shell.is-loading .shop-skeleton,
.p-goods .goods-shell.is-loading .goods-layout,
.p-goods .goods-shell.is-loading .goods-desc,
.p-goods .goods-shell.is-loading .goods-skeleton,
.p-recipes .recipes-shell.is-loading .shell-body,
.p-recipes .recipes-shell.is-loading .recipe-skeleton,
.p-community .community-shell.is-loading .community-body,
.p-community .community-shell.is-loading .community-skeleton,
.p-user .help-shell.is-loading .shell-body {
  display: none;
}

.shop-skeleton,
.goods-skeleton,
.recipe-skeleton,
.community-skeleton {
  display: none;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
}

.shop-skeleton__top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.shop-skeleton__chip,
.shop-skeleton__card,
.goods-skeleton__media,
.goods-skeleton__thumb,
.goods-skeleton__line,
.goods-skeleton__bar,
.goods-skeleton__tab,
.goods-skeleton__body,
.recipe-skeleton__hero,
.recipe-skeleton__card,
.community-skeleton__hero,
.community-skeleton__card {
  background: linear-gradient(90deg, var(--c-sand-soft) 25%, var(--c-cream-2) 50%, var(--c-sand-soft) 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}

.shop-skeleton__chip {
  height: 42px;
  border-radius: var(--r-pill);
}

.shop-skeleton__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}

.shop-skeleton__card {
  height: 280px;
  border-radius: var(--r-md);
}

.recipe-skeleton__hero,
.community-skeleton__hero {
  height: 220px;
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
}

.recipe-skeleton__grid,
.community-skeleton__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.recipe-skeleton__card,
.community-skeleton__card {
  height: 260px;
  border-radius: var(--r-md);
}

.goods-skeleton__layout {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: var(--sp-10);
  margin-bottom: var(--sp-8);
}

.goods-skeleton__gallery {
  display: grid;
  gap: var(--sp-3);
}

.goods-skeleton__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
}

.goods-skeleton__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.goods-skeleton__thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
}

.goods-skeleton__info {
  display: grid;
  gap: var(--sp-4);
}

.goods-skeleton__line,
.goods-skeleton__bar {
  border-radius: var(--r-sm);
}

.goods-skeleton__line { height: 18px; }
.goods-skeleton__bar { height: 80px; }
.goods-skeleton__line--title { height: 42px; width: 58%; }
.goods-skeleton__line--subtitle { height: 18px; width: 70%; }
.goods-skeleton__line--full { width: 100%; }
.goods-skeleton__line--mid { width: 80%; }
.goods-skeleton__line--short { width: 52%; }

.goods-skeleton__tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.goods-skeleton__tab {
  width: 120px;
  height: 36px;
  border-radius: var(--r-pill);
}

.goods-skeleton__body {
  height: 220px;
  border-radius: var(--r-md);
}

@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- B. 主視覺：照片滿版出血，文字壓左 --- */
.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  min-height: 420px;
  overflow: hidden;
}

/* 廣告輪播底圖容器：佔滿 Hero，內含 5 張疊層。
   疊層順序依 DOM 序為 slides → veil → body → dots，
   故 veil / body / dots 的既有 z-index 均不需變動。 */
.home-hero__slides {
  position: absolute;
  inset: 0;
}

/* 單張廣告。非當前張隱藏：
   visibility 不只是讓畫面消失，也把該連結移出 Tab 焦點序
   （opacity:0 的元素仍可被聚焦，會產生看不見的 Tab 停靠點）。 */
.home-hero__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  /* visibility 會延遲到淡出結束才生效（見下方 transition），
     故額外以 pointer-events 收斂，避免交叉淡出的 0.6 秒內
     舊張仍可被點擊而導向過期連結 */
  pointer-events: none;
  transition: opacity var(--t-slow) var(--ease),
              visibility 0s linear var(--t-slow);
}
.home-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--t-slow) var(--ease), visibility 0s;
}

.home-hero__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;   /* 讓人物留在右半，左半留白給文字 */
}

/* 左側米白漸層：重現稿面的晨霧感，同時確保深綠文字對比度。
   實測：文字末端（約 46% 處）疊加後對比 ≥ 4.7:1，符合 WCAG AA。 */
.home-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(245, 241, 237, .92)  0%,
    rgba(245, 241, 237, .76) 32%,
    rgba(245, 241, 237, .38) 56%,
    rgba(245, 241, 237, 0)   76%);
}

/* 稿面量得：主視覺文字塊比導覽列／卡片再多縮 40px（88px vs 48px），
   讓文字落在照片左側留白的重心，而非貼齊卡片邊緣 */
.home-hero__body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--sp-12) var(--sp-12) var(--sp-12) 88px;
}

/* 稿面量得 56px（超出 token 階梯上限 49px，故以實值書寫） */
.home-hero__title {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: .01em;
  color: var(--c-brand);
  margin-bottom: var(--sp-5);
}

.home-hero__desc {
  font-size: 28px;             /* 稿面量得，約為標題之半 */
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  color: var(--c-body);
  margin-bottom: var(--sp-8);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
/* 稿面按鈕寬約 188px：以 min-width 取得寬版視覺，不影響其他頁按鈕 */
.home-hero__actions .c-btn {
  min-width: 184px;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
}

/* 輪播指示點共用 reset：兩處指示點已由 <span> 改為 <button>
   （可點、可鍵盤聚焦），此處把 button 的原生外觀歸零，其餘樣式規則不變。 */
.home-hero__dot,
.home-dots__dot {
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
}

/* 主視覺輪播指示點：啟用者為純白且較大 */
.home-hero__dots {
  position: absolute;
  left: 50%;
  bottom: var(--sp-5);
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.home-hero__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, .6);
  box-shadow: 0 1px 2px rgba(30, 43, 32, .18);
  transition: width var(--t-base) var(--ease), height var(--t-base) var(--ease);
}
.home-hero__dot.is-active {
  width: 11px;
  height: 11px;
  background-color: var(--c-white);
}
.home-hero__dot:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 3px;
}

/* --- C. 主題卡分頁輪播 --- */
/* 外層只負責版心內距；實際柵格在 .home-cards__page（分頁切換 = 顯示/隱藏整頁） */
.home-cards {
  padding: var(--sp-8) var(--sp-12) 0;
}

/* 一頁 3 張。display 由 .is-active 決定，
   故無 JS / jQuery 未載入時，第 1 頁（稿面三卡）仍完整呈現 */
.home-cards__page {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.home-cards__page.is-active { display: grid; }

.home-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  background-color: var(--c-cream-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.home-card:hover {
  border-color: var(--c-sand-deep);
  box-shadow: var(--sh-1);
  transform: translateY(-3px);
}

/* 稿面圖寬高比約 2.8:1（橫長條） */
.home-card__media {
  aspect-ratio: 14 / 5;
  flex: none;
  overflow: hidden;
  border-radius: var(--r-sm);
  background-color: var(--c-sand-soft);
}
.home-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}
.home-card:hover .home-card__media img { transform: scale(1.04); }

.home-card__body { padding: var(--sp-4) var(--sp-1) var(--sp-1); }

.home-card__title {
  font-size: 26px;             /* 稿面量得約 27px */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}

.home-card__desc {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--c-muted);
  letter-spacing: var(--ls-wide);
}

/* 卡片區輪播指示點：啟用者為品牌綠 */
.home-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-5) 0 var(--sp-6);
}
.home-dots__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background-color: var(--c-line-strong);
  transition: width var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.home-dots__dot.is-active {
  width: 9px;
  height: 9px;
  background-color: var(--c-brand);
}
.home-dots__dot:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
}

/* ==========================================================================
   二、共用側欄標題與清單（商場 / 社區）
   ========================================================================== */
.side-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.side-title svg { width: 20px; height: 20px; flex: none; color: var(--c-brand); }
.side-title--gap { margin-top: var(--sp-8); }

.side-list { display: grid; gap: 2px; }

/* ==========================================================================
   三、商場  shop.html
   ========================================================================== */

.shop-head {
  padding-block: var(--sp-8) var(--sp-6);
}

.shop-head__title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  color: var(--c-ink);
  margin-bottom: var(--sp-5);
}

.shop-search { max-width: 640px; }

/* 右側主欄：縱向堆疊（搜尋列 → 排序 → 商品網格） */
.shop-main {
  display: grid;
  gap: var(--sp-6);
  min-width: 0;
}

/* 搜尋列 */
.c-searchbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 46px;
  padding-inline: var(--sp-5);
  background-color: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.c-searchbar:focus-within {
  border-color: var(--c-brand);
  box-shadow: var(--sh-ring);
}
.c-searchbar__icon { width: 18px; height: 18px; flex: none; color: var(--c-muted); }
.c-searchbar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--fs-base);
  color: var(--c-ink);
  outline: none;
}
.c-searchbar__input::placeholder { color: var(--c-faint); }

/* 排序 Tab 與商品網格的縱向間距 */
.shop-tabs { gap: var(--sp-2); }
.shop-grid { margin-top: calc(var(--sp-2) * -1); }

/* 左側分類面板 */
.side-panel { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.side-panel__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  padding: 0 var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--c-line-soft);
  margin-bottom: var(--sp-3);
}
.side-panel__list { display: grid; gap: 2px; }

/* 篩選區 */
.filter-panel {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  background-color: var(--c-cream-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
}
.filter-group {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.filter-group__label {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  white-space: nowrap;
}
.filter-group .c-input { width: 96px; height: 34px; padding-inline: var(--sp-3); font-size: var(--fs-sm); }
.filter-group .c-select { width: auto; min-width: 110px; height: 34px; padding-inline: var(--sp-3); font-size: var(--fs-sm); }
.filter-sep { color: var(--c-faint); }

/* 結果計數 */
.result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.result-bar strong { color: var(--c-brand); font-variant-numeric: tabular-nums; }

/* --- 商鋪篩選列（多商戶 · ADR-14） ---
   靜態示範資料：fa_shop_goods 無賣家欄位，本列為「商品→商鋪」映射的接縫，
   後端補映射表後換成 api 回傳即可。窄螢幕改橫向捲動，避免擠壓 4 欄網格。 */
.shop-sellers {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-1);
  scrollbar-width: thin;
}
.shop-seller {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--c-body);
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.shop-seller:hover { border-color: var(--c-brand); color: var(--c-brand); }
.shop-seller.is-active {
  background-color: var(--c-sand);
  border-color: var(--c-sand-deep);
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}
.shop-seller__av {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: var(--r-pill);
  object-fit: cover;
  background-color: var(--c-sand-soft);
}
.shop-seller__name { max-width: 7em; overflow: hidden; text-overflow: ellipsis; }
.shop-seller__n {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* ==========================================================================
   四、社區  community.html
   ========================================================================== */

/* 分類 chip 列（頁面頂部橫向） */
.community-head { padding-block: var(--sp-8) var(--sp-6); }

.community-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.community-head__title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  color: var(--c-ink);
}

.community-chips {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.chip {
  height: 32px;
  padding-inline: var(--sp-4);
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--c-body);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--c-brand); color: var(--c-brand); }
.chip.is-active {
  background-color: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-white);
}

/* 行動版分類 chips —— 桌面版由左欄承載，僅窄版顯示 */
.m-chips {
  display: none;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* 左欄 */
.community-rail .side-panel__title { padding-inline: 0; }
.community-side .side-panel__title { padding-inline: 0; }
.community-rail .c-side-item { padding-inline: var(--sp-3); }
.community-side .c-side-item { padding-inline: var(--sp-3); }
.community-rail .c-panel { padding: var(--sp-5) var(--sp-4); }
.community-side .c-panel { padding: var(--sp-5) var(--sp-4); }

.rail-userlist { display: grid; gap: 0; }
.rail-userlist .c-user-row + .c-user-row { border-top: 1px solid var(--c-line-soft); }

/* 推薦用戶 */
.rec-users { display: grid; gap: 0; }
.rec-users > li + li { border-top: 1px solid var(--c-line-soft); }
.rec-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}
.rec-user__avatar {
  width: 36px;
  height: 36px;
  flex: none;
  object-fit: cover;
  border-radius: var(--r-pill);
  background-color: var(--c-sand-soft);
}
.rec-user__name { font-size: var(--fs-base); color: var(--c-body); }
.rec-user:hover .rec-user__name { color: var(--c-brand); }

.community-guest {
  display: flex;
  justify-content: center;
  padding: var(--sp-10) var(--sp-5);
}
.community-guest__panel {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  max-width: 560px;
  text-align: center;
}

/* 中欄 */
.community-feed {
  display: grid;
  gap: var(--sp-6);
  min-width: 0;
}

/* 帖子網格 */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}

.community-more {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-5);
}

/* 中欄：主推卡 —— 照片滿版，文字壓左 */
.feature-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: var(--sp-10);
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: var(--c-sand-soft);   /* 圖片載入前的底色 */
  border: 1px solid var(--c-line-soft);
  margin-bottom: 0;
}
.feature-hero__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
.feature-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(245, 241, 237, .93)  0%,
    rgba(245, 241, 237, .78) 32%,
    rgba(245, 241, 237, .34) 58%,
    rgba(245, 241, 237, 0)   78%);
}
.feature-hero__body { position: relative; z-index: 1; max-width: 26em; }
.feature-hero--text {
  background: linear-gradient(135deg, var(--c-brand-active), var(--c-brand));
}
.feature-hero--text .feature-hero__img,
.feature-hero--text .feature-hero__veil { display: none; }
/* 無圖時改用深綠底：標題／摘要必須轉為淺色，否則深綠字壓在深綠底上看不見 */
.feature-hero--text .feature-hero__title { color: var(--c-white); }
.feature-hero--text .feature-hero__sub { color: rgba(255, 255, 255, .84); }
.feature-hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--c-brand);
  margin-bottom: var(--sp-3);
}
.feature-hero__sub {
  display: block;
  margin-bottom: var(--sp-6);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--c-body);
}

/* 發佈列 */
.post-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
}
.post-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding-inline: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  background-color: var(--c-cream);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  text-align: left;
  transition: border-color var(--t-fast) var(--ease);
}
.post-bar__input:hover { border-color: var(--c-line-strong); }
.post-bar__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

/* 帖子網格間距 */
.cgrid { margin-bottom: var(--sp-8); }

/* 右欄熱門 */
.hot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}

/* 熱門排行 */
.c-ranks { display: grid; gap: 0; }
.c-ranks > li + li { border-top: 1px solid var(--c-line-soft); }
.c-rank {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
}
.c-rank__thumb {
  width: 54px;
  height: 40px;
  flex: none;
  object-fit: cover;
  border-radius: var(--r-sm);
  background-color: var(--c-sand-soft);
}
.c-rank__thumb--text {
  display: grid;
  place-items: center;
  color: var(--c-brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  background: linear-gradient(145deg, var(--c-sand-soft), var(--c-sage-soft));
}
.c-rank__text { display: grid; gap: 3px; min-width: 0; }
.c-rank__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-rank:hover .c-rank__title { color: var(--c-brand); }
.c-rank__heat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.c-rank__heat svg { width: 13px; height: 13px; flex: none; }

/* ==========================================================================
   響應式（頁面層）
   ========================================================================== */
@media (max-width: 1199px) {
  .home-hero__body { padding: var(--sp-10) var(--sp-8); }   /* 收回多縮的 40px */
  .home-cards { padding-inline: var(--sp-8); }
  .posts-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 959px) {
  .home-hero { min-height: 340px; }
  .home-hero__body { padding: var(--sp-10) var(--sp-6); }
  .home-hero__title { font-size: 34px; }
  .home-hero__desc { font-size: 19px; margin-bottom: var(--sp-6); }
  .home-hero__actions .c-btn { min-width: 150px; }
  .home-cards__page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-cards { padding-inline: var(--sp-6); }

  .side-panel { position: static; }
  .filter-panel { gap: var(--sp-4); }
  .m-chips { display: flex; }
}

@media (max-width: 639px) {
  .home-hero { min-height: 300px; }
  .home-hero__body { padding: var(--sp-8) var(--sp-4); }
  .home-hero__title { font-size: 26px; }
  .home-hero__desc { font-size: 16px; }
  .home-hero__actions { gap: var(--sp-2); }
  .home-hero__actions .c-btn { width: 100%; min-width: 0; }
  .home-cards__page { grid-template-columns: minmax(0, 1fr); }
  .home-cards { padding-inline: var(--sp-4); }
  .home-card__title { font-size: var(--fs-xl); }

  /* 輪播指示點：視覺尺寸維持稿面（7px / 11px），命中區以偽元素放大到 --tap-min
     做法與上傳鈕 .upload-item__del::after 一致，桌面尺寸完全不受影響 */
  .home-hero__dot,
  .home-dots__dot { position: relative; }
  .home-hero__dot::after,
  .home-dots__dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--tap-min);
    height: var(--tap-min);
    transform: translate(-50%, -50%);
  }

  .community-head__inner { flex-direction: column; align-items: flex-start; }
  .feature-hero { padding: var(--sp-6); min-height: 0; }
  .feature-hero__title { font-size: var(--fs-xl); }
  .post-bar { flex-direction: column; align-items: stretch; border-radius: var(--r-md); }
  .post-bar__actions { justify-content: flex-end; }
}

/* ==========================================================================
   五、共用內頁骨架（登錄 / 購物車 / 聯繫 / 幫助 / 食譜 / 詳情 / 發佈）
   本層只做組合與定位：.shell-body 的堆疊與內距由 layout.css 提供
   ========================================================================== */

/* 內頁頂部標題列：左側 h1＋副標，右側輔助資訊或操作 */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.page-title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}

.page-sub {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-muted);
}

.page-count {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  white-space: nowrap;
}
.page-count strong {
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}

/* 表單節奏微調 —— 基礎樣式由 components.css .c-form 提供，此處只調欄距 */
.login-form   { gap: var(--sp-4); }
.compose-form { gap: var(--sp-6); }
.comment-form { gap: var(--sp-3); }

/* ==========================================================================
   六、登錄 login.html
   稿面雖未指定此頁，沿用圓角卡片 + 導覽列的全站骨架，
   左照片右表單，與首頁「照片滿版、文字壓左」的語彙一致
   ========================================================================== */
.login-body {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: stretch;
  padding: var(--sp-10);
}

.login-media {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--c-sand-soft);   /* 圖片載入前的底色 */
}
.login-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
/* 由上而下加深的遮罩：確保白色標題在任何裁切下皆 ≥4.5:1
   （實算：76% 處 alpha≈.71，即使照片該區亮度達 0.75 仍為 4.58:1） */
.login-media__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(30, 43, 32, .10) 0%,
    rgba(30, 43, 32, .34) 38%,
    rgba(30, 43, 32, .66) 68%,
    rgba(30, 43, 32, .88) 100%);
}
.login-media__body {
  position: absolute;
  left: var(--sp-8);
  right: var(--sp-8);
  bottom: var(--sp-8);
  z-index: 1;
}
.login-media__title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--c-white);
  margin-bottom: var(--sp-3);
}
.login-media__sub {
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, .9);
}

.login-panel {
  align-self: center;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}
.login-title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  color: var(--c-ink);
}
.login-sub {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-8);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.login-alt {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block: var(--sp-8) var(--sp-5);
}
.login-alt__line { flex: 1 1 auto; height: 1px; background-color: var(--c-line); }
.login-alt__text {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide);
  color: var(--c-faint);
}
.login-oauth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.login-oauth__btn { font-size: var(--fs-sm); }

/* ==========================================================================
   七、購物車 cart.html
   ========================================================================== */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6);
  align-items: start;
}

.cart-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background-color: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
}

/* 欄寬由 .cart-row 與 .cart-colhead 共用，確保表頭與內容對齊 */
.cart-colhead,
.cart-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 84px 128px 92px 64px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}

.cart-colhead {
  background-color: var(--c-cream-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-muted);
}
.cart-colhead__item { white-space: nowrap; }
.cart-colhead__item:nth-child(1) { grid-column: 1 / 3; }
.cart-colhead__item:nth-child(2) { grid-column: 3; }
.cart-colhead__item:nth-child(3) { grid-column: 4; }
.cart-colhead__item:nth-child(4) { grid-column: 5; }
.cart-colhead__item:nth-child(5) { grid-column: 6; }

.cart-row + .cart-row,
.cart-row + .cart-bulk { border-top: 1px solid var(--c-line-soft); }
.cart-row:hover { background-color: var(--c-cream-3); }

.cart-row__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-sm);
  background-color: var(--c-sand-soft);
}
.cart-row__media img { width: 100%; height: 100%; object-fit: cover; }

.cart-row__info {
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
}
.cart-row__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.cart-row__title a:hover { color: var(--c-brand); }
.cart-row__meta { font-size: var(--fs-xs); color: var(--c-muted); }

.cart-row__cell { display: flex; align-items: center; min-width: 0; }
.cart-row__price { font-size: var(--fs-base); color: var(--c-body); font-variant-numeric: tabular-nums; }
.cart-row__sub {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.cart-row__del { font-size: var(--fs-sm); }
.cart-row__del:hover { color: var(--c-danger); }

.cart-bulk {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--c-cream-3);
  font-size: var(--fs-sm);
}
.cart-bulk__more { margin-left: auto; color: var(--c-brand); }

/* 結算明細 */
.cart-sum {
  display: grid;
  gap: var(--sp-4);
  position: sticky;
  top: var(--sp-6);
}
.cart-sum .c-panel__title { margin-bottom: 0; }

.sum-list { display: grid; gap: var(--sp-3); }
.sum-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}
.sum-list__row dt { color: var(--c-muted); }
.sum-list__row dd { color: var(--c-ink); font-variant-numeric: tabular-nums; }
.sum-list__off { color: var(--c-danger); }

.sum-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-line-strong);
}
.sum-total__label { font-size: var(--fs-sm); color: var(--c-muted); }
.sum-total__num {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-clay-deep);
  font-variant-numeric: tabular-nums;
}
.sum-total__num i { font-style: normal; font-size: var(--fs-md); margin-right: 2px; }

.sum-tip {
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-clay-soft);
  border-radius: var(--r-sm);
  color: var(--c-clay-deep);
}
.sum-tip strong { color: var(--c-clay-deep); font-variant-numeric: tabular-nums; }

.cart-back { margin-top: calc(var(--sp-2) * -1); }

.cart-service {
  display: grid;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.cart-service li::before { content: "✓"; margin-right: var(--sp-2); color: var(--c-success); }

/* ==========================================================================
   八、聯繫我們 contact.html
   ========================================================================== */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background-color: var(--c-cream-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
}
.contact-card__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  color: var(--c-brand);
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card__body { min-width: 0; }
.contact-card__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}
.contact-card__text {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--c-brand);
  overflow-wrap: anywhere;
}
.contact-card__sub { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-muted); }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6);
  align-items: start;
}
.contact-form {
  padding: var(--sp-6);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.contact-actions .c-btn { min-width: 140px; }

.contact-side { display: grid; gap: var(--sp-6); }
.contact-side .c-panel + .c-panel { margin-top: 0; }

.link-list { display: grid; }
.link-list > li + li { border-top: 1px solid var(--c-line-soft); }
.link-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-body);
}
.link-list__item:hover { color: var(--c-brand); }
.link-list__arrow { font-size: var(--fs-md); line-height: 1; color: var(--c-faint); }
.link-list__item:hover .link-list__arrow { color: var(--c-brand); }

.contact-follow { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.contact-follow__item {
  padding: 4px var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-sage-deep);
  background-color: var(--c-sage-soft);
  border-radius: var(--r-pill);
}
.contact-note__text { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--c-muted); }

/* ==========================================================================
   九、幫助中心 help.html
   ========================================================================== */
.help-hero {
  display: grid;
  /* minmax(0,1fr) 而非預設 auto：內部 .help-search 帶 min(560px,100%)，
     auto 軌道會以 max-content(≈300px) 定寬，超出 375px 下僅有的 261px 內容盒，
     搜尋框便會衝出卡片邊界再被 .shell 剪掉 */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  text-align: center;
  background-color: var(--c-cream-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
}
.help-hero__title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  color: var(--c-brand);
}
.help-hero__sub { font-size: var(--fs-base); color: var(--c-muted); }
.help-search { width: min(560px, 100%); margin-top: var(--sp-2); }

.help-cats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-4);
}
.help-cat {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  background-color: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.help-cat:hover {
  border-color: var(--c-sand-deep);
  box-shadow: var(--sh-1);
  transform: translateY(-2px);
}
.help-cat__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-brand-soft);
  border-radius: var(--r-pill);
  color: var(--c-brand);
}
.help-cat__icon svg { width: 22px; height: 22px; }
.help-cat__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.help-cat__sub { font-size: var(--fs-xs); color: var(--c-muted); }

.help-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6);
  align-items: start;
}
.help-main { display: grid; gap: var(--sp-4); }
.help-h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--c-ink);
  margin-top: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line-soft);
  scroll-margin-top: var(--sp-6);
}
.help-main > .help-h2:first-child { margin-top: 0; }

.faq-list { display: grid; gap: var(--sp-3); }
.faq {
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq__q {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q::after {
  content: "+";
  margin-left: auto;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--c-muted);
}
.faq__q:hover { background-color: var(--c-cream-2); }
.faq[open] .faq__q { color: var(--c-brand); background-color: var(--c-cream-3); }
.faq[open] .faq__q::after { content: "−"; }
.faq__a { padding: 0 var(--sp-5) var(--sp-5); }
.faq__a p { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--c-muted); }

.help-side { display: grid; gap: var(--sp-6); }
.help-side .c-panel + .c-panel { margin-top: 0; }
.help-side__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-muted);
  margin-bottom: var(--sp-4);
}
.help-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ==========================================================================
   十、食譜 recipes.html
   ========================================================================== */
.recipe-tabs { flex: none; }
.recipe-hero { min-height: 260px; }
.recipe-section { display: grid; gap: var(--sp-6); }

/* 稿面未指定食譜列表欄數：1072px 內容寬以 3 欄最接近商場的商品密度 */
.recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ==========================================================================
   十一、商品詳情 goods-detail.html
   ========================================================================== */
.goods-layout {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: start;
}

.goods-gallery { display: grid; gap: var(--sp-3); }
.goods-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: linear-gradient(145deg, var(--c-sage-soft), var(--c-sand-soft));
}
.goods-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.goods-gallery__flag { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 1; }

.goods-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.goods-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--c-sand-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease);
}
.goods-thumb img { width: 100%; height: 100%; object-fit: cover; }
.goods-thumb:hover { border-color: var(--c-sand-deep); }
.goods-thumb.is-active {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 1px var(--c-brand);
}

.goods-info { display: grid; gap: var(--sp-4); align-content: start; }
.goods-title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.goods-slogan { font-size: var(--fs-md); letter-spacing: var(--ls-wide); color: var(--c-muted); }

.goods-pricebox {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--c-cream-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
}
.goods-price {
  font-size: 34px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.goods-price i { font-style: normal; font-size: var(--fs-lg); margin-right: 2px; }
.goods-price__old { font-size: var(--fs-sm); color: var(--c-muted); }
.goods-price__old s { color: var(--c-muted); }
.goods-price__rate { margin-left: auto; }

.goods-spec { display: grid; gap: var(--sp-3); }
.goods-spec__row { display: flex; gap: var(--sp-4); font-size: var(--fs-sm); }
.goods-spec__row dt { flex: none; min-width: 3.5em; color: var(--c-muted); }
.goods-spec__row dd { color: var(--c-body); }

.goods-buyrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); }
.goods-buyrow__label { font-size: var(--fs-sm); color: var(--c-muted); }
.goods-buyrow__hint { font-size: var(--fs-xs); color: var(--c-muted); }

.goods-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.goods-actions__main { min-width: 200px; }

.goods-service {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.goods-service li::before { content: "✓"; margin-right: 5px; color: var(--c-success); }

.goods-desc {
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line-soft);
}
.goods-tabs { margin-bottom: var(--sp-5); }
.goods-body { display: grid; gap: var(--sp-4); max-width: 62em; }
.goods-body__img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--r-md);
}
.goods-body__h {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--c-ink);
}
.goods-body p { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--c-body); }

.goods-related {
  display: grid;
  gap: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line-soft);
}
.goods-related .block-head { margin-bottom: 0; }
.goods-grid { gap: var(--sp-5); }

/* ==========================================================================
   十二、帖子詳情 post-detail.html
   ========================================================================== */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-8);
  align-items: start;
}
.post-main { display: grid; gap: var(--sp-5); }

.post-head { display: flex; align-items: center; gap: var(--sp-3); }
.post-head__avatar {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: cover;
  border-radius: var(--r-pill);
  background-color: var(--c-sand-soft);
}
.post-head__meta { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.post-head__name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.post-head__time { font-size: var(--fs-xs); color: var(--c-muted); }
.post-head__loc { font-size: var(--fs-xs); color: var(--c-brand); }
.p-post .gc-modal__card--wide {
  max-height: calc(100vh - var(--sp-10));
  overflow-y: auto;
}
.pd-share-preview {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background-color: var(--c-cream-3);
}
.pd-share-preview__title { color: var(--c-ink); font-size: var(--fs-md); }
.pd-share-preview__text {
  margin: 0;
  color: var(--c-body);
  font-size: var(--fs-sm);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pd-share-preview__meta {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}
.pd-share-preview__meta a { color: var(--c-brand); text-decoration: underline; }
.pd-share-plugin { min-height: 48px; padding: var(--sp-3) 0; }
.pd-share-note { margin-top: var(--sp-3); }

/* ==========================================================================
   抽奖中心 lottery.html
   ========================================================================== */
.lottery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, .8fr);
  gap: var(--sp-4);
  align-items: start;
}
.lottery-main { padding: var(--sp-5); }
.lottery-desc { margin: var(--sp-2) 0 var(--sp-4); color: var(--c-body); }
.lottery-prizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.lottery-prize {
  display: grid;
  gap: 2px;
  padding: var(--sp-2);
  background-color: var(--c-sand-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  text-align: center;
}
.lottery-prize__img {
  width: 44px;
  height: 44px;
  margin: 0 auto 2px;
  border-radius: var(--r-xs);
  object-fit: cover;
  background-color: var(--c-white);
}
.lottery-prize__img--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}
.lottery-prize__name { font-size: var(--fs-xs); color: var(--c-ink); }
.lottery-prize__meta { font-size: 11px; color: var(--c-muted); }
.lottery-game {
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--c-line, #e7e0d3);
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255, 208, 92, 0.12), rgba(133, 197, 101, 0.08));
}
.lottery-game[hidden] { display: none; }
.lottery-game__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.lottery-game__title { margin: 0; font-size: var(--fs-lg); color: var(--c-ink); }
.lottery-game__board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  min-height: 350px;
}
/* 遮罩：上下模糊/漸層，只露出中間 5 格 */
.lottery-game__mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 30%, rgba(255,255,255,.65) 70%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  z-index: 2;
}
.lottery-game__mask.bottom {
  top: auto;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 30%, rgba(255,255,255,.65) 70%, rgba(255,255,255,0) 100%);
}
/* 膠捲框：固定高度 280px（5×56px），只露出中間 5 格 */
.lottery-game__reel {
  position: relative;
  height: 280px;
  overflow: hidden;
  background: var(--c-white);
  border: 2px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: 0 8px 18px rgba(72, 94, 38, .08);
}
.lottery-game__reel.is-win {
  border-color: #f2b13a;
  box-shadow: 0 0 0 3px rgba(242, 177, 58, .25), 0 8px 22px rgba(242, 177, 58, .3);
}
/* 膠捲 strip：長度 12 格（5 顯示 + 2 過場 + 2 安全邊界），捲動動畫 */
.lottery-game__reel-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: transform;
  transition: transform 1.5s cubic-bezier(.2, .7, .1, 1);
}
.lottery-game__reel-strip.is-animating {
  transition-timing-function: cubic-bezier(.18, .72, .12, 1);
}
/* 格子：固定高度 56px，中獎時彈跳 */
.lottery-game__reel-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  font-size: 36px;
  line-height: 1;
  user-select: none;
}
.lottery-game__reel-cell.is-hit {
  font-size: 42px;
  filter: drop-shadow(0 0 8px rgba(242, 177, 58, .9));
  animation: slot-cell-pop .5s ease;
}
@keyframes slot-cell-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1.1); }
}
/* 震動：中獎時膠捲抖動 */
.lottery-game__reel.is-shake {
  animation: slot-shake .3s ease;
}
@keyframes slot-shake {
  0%, 100% { transform: translate(0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-2px, 0); }
  20%, 40%, 60%, 80% { transform: translate(2px, 0); }
}
/* 3×5 連線橫線：對齊中央行，中獎時亮起 */
.lottery-game__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--c-ink) 8%, var(--c-ink) 92%, transparent 100%);
  opacity: .2;
  transition: opacity .3s, background .3s;
}
.lottery-game__line.is-win {
  opacity: 1;
  background: linear-gradient(90deg, transparent 0%, #f2b13a 10%, #f2b13a 90%, transparent 100%);
  box-shadow: 0 0 14px rgba(242, 177, 58, .55);
}
.lottery-game__confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
/* 大轉盤 lucky_wheel —— SVG 圖像轉盤 */
.lottery-game__board.is-wheel {
  display: flex;
  justify-content: center;
}
.wheel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0 8px;
  min-height: 340px;
}
.wheel-stage {
  position: relative;
  width: 306px;
  height: 306px;
}
.wheel-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 12px 22px rgba(122, 74, 16, .18));
}
/* 頂部指針（紅鈕 + 下垂箭頭，中途「咔哒」彈跳） */
.wheel__pointer {
  position: absolute;
  top: -18px;
  left: 50%;
  width: 34px;
  height: 46px;
  margin-left: -17px;
  z-index: 5;
  transform-origin: 50% 16%;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.wheel__pointer::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 31px solid #d9553f;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .28));
}
.wheel__pointer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #e2574c, #b23c2b);
  border: 3px solid #fffdf7;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .28);
}
.wheel__pointer.is-tick {
  transform: rotate(16deg);
}
.wheel__pointer.is-down {
  transform: rotate(0deg) scale(1.12);
}
.lottery-game__confetti i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  animation: lg-confetti 1.6s ease-in forwards;
}
@keyframes lg-confetti {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(130px) rotate(540deg); opacity: 0; }
}
.lottery-game__result {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  transition: color .25s;
}
.lottery-game__result.is-win { color: var(--c-brand); }
.lottery-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--c-line, #e7e0d3);
}
.lottery-records { margin-top: var(--sp-3); }
.lottery-record__status { margin-left: 8px; color: var(--c-brand); font-size: var(--fs-xs); }
.lottery-record__claimed { margin-left: 8px; color: var(--c-ok); font-size: var(--fs-xs); font-weight: 700; }
.lottery-record__claim-btn { margin-top: 4px; min-width: 80px; }
.sum-list__row__act { text-align: right; }
.lottery-side { display: grid; gap: var(--sp-4); }
.lottery-side__acts { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.lottery-stat { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--c-muted); }
.lottery-stat strong { font-size: var(--fs-2xl); color: var(--c-brand); }
@media (max-width: 960px) {
  .lottery-layout { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .lottery-prizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lottery-main { padding: var(--sp-4); }
}

.post-title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.post-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.post-cover { display: grid; gap: var(--sp-3); }
.post-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
  background-color: var(--c-sand-soft);
}
.post-cover__cap { font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }

.post-content { display: grid; gap: var(--sp-4); }
.post-content p { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--c-body); }
.post-content__h {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--c-ink);
  margin-top: var(--sp-2);
}

.post-list {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--c-body);
}
.post-list li { position: relative; padding-left: var(--sp-6); }
.post-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .74em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c-sage);
}
.post-list--num { counter-reset: post-step; }
.post-list--num li { counter-increment: post-step; }
.post-list--num li::before {
  content: counter(post-step) ".";
  top: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}

.post-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--c-line-soft);
}
.post-foot__spacer { flex: 1 1 auto; }

.post-comments { display: grid; gap: var(--sp-5); }
.post-comments__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--c-ink);
}
.post-comments__count {
  margin-left: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.comment-list { display: grid; gap: var(--sp-5); }
.comment { display: flex; gap: var(--sp-3); }
.comment__avatar {
  width: 38px;
  height: 38px;
  flex: none;
  object-fit: cover;
  border-radius: var(--r-pill);
  background-color: var(--c-sand-soft);
}
.comment__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-line-soft);
}
.comment-list > li:last-child .comment__body { padding-bottom: 0; border-bottom: 0; }
.comment__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.comment__name { font-size: var(--fs-sm); color: var(--c-ink); }
.comment__time { font-size: var(--fs-xs); color: var(--c-muted); }
.comment__text { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--c-body); }

.comment-form__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.post-side { display: grid; gap: var(--sp-6); }
.post-side .c-panel + .c-panel { margin-top: 0; }
.post-side__stat { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); }
.post-side__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ==========================================================================
   十三、發佈內容 post-compose.html
   稿面未指定此頁：收窄版心使表單維持舒適的閱讀寬度
   ========================================================================== */
.compose-body {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}
.compose-text { min-height: 220px; }

.upload-grid {
  display: grid;
  /* auto-fill（不是 auto-fit）：auto-fit 會把沒有內容的軌道收合成 0，
     只剩「上傳」按鈕在流內時，第一軌會吃掉整列寬度，再被 aspect-ratio:1/1
     拉成 811×811 的巨型方塊。auto-fill 保留空軌道，單格固定約 150px，
     上傳 1~4 張時版面都穩定。 */
  grid-template-columns: repeat(auto-fill, minmax(132px, 180px));
  justify-content: start;
  gap: var(--sp-3);
}
.upload-add {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-2);
  aspect-ratio: 1 / 1;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  background-color: var(--c-cream-2);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.upload-add svg { width: 22px; height: 22px; }
.upload-add:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background-color: var(--c-brand-soft);
}

.upload-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--c-sand-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
}
.upload-item img { width: 100%; height: 100%; object-fit: cover; }
.upload-item__del {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: var(--c-white);
  background-color: rgba(30, 43, 32, .62);
  border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease);
}
.upload-item__del:hover { background-color: var(--c-danger); }

.compose-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line-soft);
}
.compose-bar__actions { display: flex; gap: var(--sp-4); margin-left: auto; }
.compose-bar__actions .c-btn { min-width: 140px; }

/* ==========================================================================
   十四、內頁 body class（.p-*）
   頁面主要樣式由各自專屬 class（.login-* / .cart-* / .goods-* …）承載，
   body class 只負責「整頁級」的共同設定，避免逐頁重複宣告
   ========================================================================== */

/* 內頁皆由單一圓角卡片構成，不強制 60vh 最小高度，
   使短頁面（登錄 / 發佈）的頁尾緊接內容，不留空白帶 */
.p-login .site-main,
.p-cart .site-main,
.p-contact .site-main,
.p-help .site-main,
.p-recipes .site-main,
.p-goods .site-main,
.p-post .site-main,
.p-compose .site-main,
.p-user .site-main { min-height: auto; }

/* 頁內錨點捲動時避開圓角卡片頂緣 */
.p-login .shell,
.p-cart .shell,
.p-contact .shell,
.p-help .shell,
.p-recipes .shell,
.p-goods .shell,
.p-post .shell,
.p-compose .shell,
.p-user .shell { scroll-margin-top: var(--sp-6); }

/* ==========================================================================
   十五、個人中心 user.html（GAP §7.2 #4 · ADR-14）
   版式沿用 help.html 的雙欄骨架（.site-header 與頁尾逐字複製自同一來源），
   欄序對調為「選單在左」。左側三組會員選單用既有 .c-panel + .c-side-item，
   右側訂單與收藏用既有 .c-panel + .c-pcard；僅 .user-hero / .user-order
   兩個區塊為本頁新增 class。
   ========================================================================== */

/* --- 會員卡：頭像 | 身分 | 操作 三欄，四格數據橫跨第二列 --- */
.user-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar id    acts"
    "avatar stats stats";
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-6);
  background-color: var(--c-sand);
  border-radius: var(--r-lg);
}
.user-hero__avatar {
  grid-area: avatar;
  width: 76px;
  height: 76px;
  border-radius: var(--r-pill);
  object-fit: cover;
  background-color: var(--c-sand-soft);
  box-shadow: 0 0 0 3px var(--c-white);
}
.user-hero__id { grid-area: id; min-width: 0; }
.user-hero__name {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.user-hero__bio {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  color: var(--c-body);
}
.user-hero__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.user-hero__acts {
  grid-area: acts;
  display: flex;
  gap: var(--sp-3);
  align-self: start;
}
.user-hero__stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-2) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-sand-deep);
}
.user-hero__stat dt {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.user-hero__stat dd {
  margin: var(--sp-1) 0 0;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

/* --- 左右雙欄：選單 232px 在左 --- */
.user-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  margin-top: var(--sp-6);
}
.user-menu { display: grid; gap: var(--sp-5); }
/* 選單列表外擴，讓 .c-side-item 的 hover 底色貼齊面板內緣 */
.user-menu__list { display: grid; gap: 2px; margin: calc(var(--sp-1) * -1); }
.user-menu .c-panel + .c-panel { margin-top: 0; }
.user-main { display: grid; gap: var(--sp-5); min-width: 0; }

/* 標題列：左標題 + 右「查看全部」 */
.c-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-line-soft);
}
.c-panel__head .c-panel__title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* --- 訂單狀態五入口 --- */
.user-orders-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.user-orders-nav__item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-body);
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.user-orders-nav__item svg { width: 24px; height: 24px; }
.user-orders-nav__item:hover { background-color: var(--c-cream-2); color: var(--c-brand); }
/* 未讀數角標釘在右上角，不影響格線對齊 */
.user-orders-nav__item .c-badge {
  position: absolute;
  top: var(--sp-2);
  right: calc(50% - 20px);
}

/* --- 訂單列 --- */
.user-order-list { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.user-order { border: 1px solid var(--c-line); border-radius: var(--r-sm); }
.user-order__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-cream-2);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: var(--fs-xs);
}
.user-order__no { color: var(--c-muted); }
.user-order__state { color: var(--c-brand); font-weight: var(--fw-semibold); }
.user-order__body {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.user-order__img {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--r-sm);
  object-fit: cover;
  background-color: var(--c-cream-2);
}
.user-order__info { display: grid; gap: var(--sp-1); flex: 1 1 auto; min-width: 0; }
.user-order__title { font-size: var(--fs-base); color: var(--c-ink); }
.user-order__time { font-size: var(--fs-xs); color: var(--c-muted); }
.user-order__sum { flex: none; font-size: var(--fs-xs); color: var(--c-muted); }
.user-order__acts {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-4);
}
.user-collect { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ==========================================================================
   響應式（內頁層）— 必須置於所有頁面規則之後，以相同特異度勝出
   ========================================================================== */
@media (max-width: 1199px) {

  /* 內頁側欄（結算 / 快速連結 / 客服 / 熱門 / 作者）一律收成單欄 */
  .cart-layout,
  .contact-layout,
  .help-layout,
  .user-layout,
  .post-layout { grid-template-columns: minmax(0, 1fr); }

  /* 選單收成單欄後改為橫向捲動條，避免三組選單把訂單推到很下方 */
  .user-menu {
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    overflow-x: auto;
    padding-bottom: var(--sp-2);
  }
  .user-collect { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .cart-sum { position: static; }

  .goods-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .goods-gallery { max-width: 520px; }

  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .help-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .contact-side,
  .help-side,
  .post-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 959px) {

  .login-body {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-5);
    gap: var(--sp-6);
  }
  .login-media { min-height: 220px; }

  /* 購物車：表頭隱藏，改為圖左、資訊與操作右側直向排列 */
  .cart-colhead { display: none; }
  .cart-row {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-3);
  }
  .cart-row__media { grid-column: 1; grid-row: 1 / span 5; }
  .cart-row__info,
  .cart-row__cell { grid-column: 2; }

  .contact-cards { grid-template-columns: minmax(0, 1fr); }

  .help-hero { padding: var(--sp-6) var(--sp-4); }
  .help-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {

  .login-media { min-height: 180px; }
  .login-media__title { font-size: var(--fs-2xl); }
  .login-oauth { grid-template-columns: minmax(0, 1fr); }

  .cart-row { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-row__del { font-size: var(--fs-xs); }

  .contact-actions .c-btn,
  .compose-bar__actions .c-btn { flex: 1 1 auto; min-width: 0; width: 100%; }
  .compose-bar__actions { width: 100%; }

  .help-cats { grid-template-columns: minmax(0, 1fr); }

  /* —— 個人中心（user.html）：會員卡收成兩欄、數據 2×2、收藏單欄 —— */
  .user-hero {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "avatar id"
      "acts   acts"
      "stats  stats";
    padding: var(--sp-5) var(--sp-4);
  }
  .user-hero__acts { width: 100%; }
  .user-hero__acts .c-btn { flex: 1 1 auto; min-width: 0; }
  .user-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
  /* 5 入口在 333px 內改 3 欄；角標以 50% 對齊圖示，與欄數無關故不需另設 */
  .user-orders-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .user-collect { grid-template-columns: minmax(0, 1fr); }
  .user-order__body { flex-wrap: wrap; }
  .user-order__sum { width: 100%; text-align: right; }

  .recipe-grid { grid-template-columns: minmax(0, 1fr); }

  .goods-price { font-size: 28px; }
  .goods-price__rate { margin-left: 0; }
  .goods-actions__main { min-width: 0; }
  .goods-actions .c-btn { width: 100%; }

  .contact-side,
  .help-side,
  .post-side { grid-template-columns: minmax(0, 1fr); }

  /* ------------------------------------------------ 觸控目標（ADR-12）
     WCAG 2.5.5 / Apple HIG 44pt。桌面維持稿面實測尺寸，僅手機斷點放大。 */

  /* 社區分類 chips：32px → 44px */
  .chip { height: 44px; padding-inline: var(--sp-5); }

  /* 商鋪篩選列（多商戶）：實測 39px → 撐至 44px */
  .shop-seller { min-height: var(--tap-min); }

  /* 購物車刪除鈕：.c-btn--text 使 height:auto、padding:0，實測僅 25×13。
     以內距撐出命中區，視覺仍是無框文字鈕 */
  .cart-row__del,
  .c-btn--text.cart-row__del {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding-inline: var(--sp-2);
  }

  /* 「繼續選購」：52×21 */
  .cart-bulk__more {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding-inline: var(--sp-1);
  }

  /* 圖片刪除鈕：22×22。縮圖有 overflow:hidden，故以偽元素向外擴 4px，
     命中區達 44×44 且不超出縮圖邊界（外擴總計 4+36+4 = 44） */
  .upload-item__del {
    width: 36px;
    height: 36px;
    top: var(--sp-1);
    right: var(--sp-1);
  }
  .upload-item__del::after {
    content: "";
    position: absolute;
    inset: -4px;
  }

  /* 食譜分類列：.recipe-tabs 的 flex:none 使其不收縮，5 個 44px 分頁會溢出 333px。
     改為可收縮，.c-tabs 既有的 flex-wrap:wrap 便會自動折行 */
  .recipe-tabs { flex: 1 1 auto; min-width: 0; }
}


/* --- my-comments.html 商家回覆文字（片段漏定義的兩個子元素） --- */
.p-comments .cmt-reply__who {
    font-weight: 600;
    color: var(--c-ink);
}

.p-comments .cmt-reply__text {
    color: var(--c-body);
    line-height: 1.7;
}

/* login.html：登錄方式分頁（密碼 / 驗證碼） */
.login-tabs {
  margin-bottom: var(--sp-5);
}
.login-tabs .c-tab {
  flex: 1 1 0;
  justify-content: center;
}

/* === FRAGMENT CONSOLIDATION START (generated by _consolidate_css.ps1) ===

/* ---------------------------------------------------------------------------
     address.html
     source: _frag_address.css  (90 lines)
     --------------------------------------------------------------------------- */
/* ===== address.html ===== */
/* 收貨地址管理：地址卡片列表（.help-layout 左欄）＋ 新增/編輯表單（右欄）
   只使用 tokens.css 的既有令牌，不新增任何色值。 */

/* —— 地址列表 —— */
.addr-list {
  display: grid;
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.addr-card {
  padding: var(--sp-5);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.addr-card:hover { border-color: var(--c-sand-deep); box-shadow: var(--sh-1); }
/* 預設地址：品牌綠框 + 極淡綠底，與一般地址一眼可辨 */
.addr-card.is-default {
  border-color: var(--c-brand);
  background-color: var(--c-cream-3);
}

.addr-card__hd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}
.addr-card__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.addr-card__phone {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.addr-card__region {
  font-size: var(--fs-sm);
  color: var(--c-body);
}
.addr-card__detail {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-muted);
  overflow-wrap: anywhere;
}

.addr-card__acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line-soft);
}

/* —— 表單：標籤單選列 —— */
.addr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  min-height: 42px;
  align-items: center;
}

.addr-form__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.addr-form__acts .c-btn { flex: 1 1 120px; }

/* —— 響應式 —— */
@media (max-width: 639px) {
  .addr-card { padding: var(--sp-4); }
  .addr-card__acts .c-btn { flex: 1 1 auto; }
  .addr-form__acts { width: 100%; }
}

/* ---------------------------------------------------------------------------
     aftersale.html
     source: _frag_aftersale.css  (248 lines)
     --------------------------------------------------------------------------- */
/* ===== aftersale.html =====
   申請退換貨：沿用 .cart-layout 的「表單 + 側欄」雙欄，本段只補
   售後類型膠囊、商品預覽列、憑證上傳框與申請記錄列四塊版面。
   色值一律取自 css\tokens.css。 */

/* --- 左欄：面板直向堆疊（.c-panel + .c-panel 已有 24px 間距） --- */
.aftersale-main { min-width: 0; }

/* --- 售後類型（單選膠囊） --- */
.aftersale-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.aftersale-types .c-check {
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.aftersale-types .c-check:hover {
  border-color: var(--c-brand);
  color: var(--c-ink);
}

/* --- 已選商品預覽列 --- */
.aftersale-goods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4);
  background-color: var(--c-cream-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
}
.aftersale-goods__img {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--r-sm);
  object-fit: cover;
  background-color: var(--c-white);
}
.aftersale-goods__info {
  display: grid;
  gap: var(--sp-1);
  flex: 1 1 140px;
  min-width: 0;
}
.aftersale-goods__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.aftersale-goods__meta {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.aftersale-goods .c-tag { margin-left: auto; }

/* --- 憑證上傳框（label 內含 file input，聚焦可見） --- */
.aftersale-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  background-color: var(--c-cream-3);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  color: var(--c-muted);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.aftersale-upload:hover {
  border-color: var(--c-brand);
  background-color: var(--c-brand-soft);
}
.aftersale-upload:focus-within {
  border-color: var(--c-brand);
  box-shadow: var(--sh-ring);
}
.aftersale-upload__icon { color: var(--c-sage-deep); flex: none; }
.aftersale-upload__text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.aftersale-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 憑證縮圖 --- */
.aftersale-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.aftersale-thumbs:empty { display: none; }
.aftersale-thumb--loading { background-color: var(--c-sand-soft); }
.aftersale-thumb {
  position: relative;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background-color: var(--c-cream-2);
}
.aftersale-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aftersale-thumb__del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-ink);
  color: var(--c-white);
  border: 0;
  border-radius: 50%;
  font-size: var(--fs-xs);
  line-height: 1;
}
.aftersale-thumb__del:hover { background-color: var(--c-danger); }

/* --- 操作鈕列 --- */
.aftersale-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.aftersale-actions .c-btn { flex: 1 1 160px; }

/* --- 售後申請記錄列 --- */
.aftersale-log {
  display: grid;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.aftersale-log__item {
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.aftersale-log__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-cream-2);
  font-size: var(--fs-xs);
}
.aftersale-log__no { color: var(--c-muted); }
.aftersale-log__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.aftersale-log__img {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--r-sm);
  object-fit: cover;
  background-color: var(--c-cream-2);
}
.aftersale-log__info {
  display: grid;
  gap: var(--sp-1);
  flex: 1 1 auto;
  min-width: 0;
}
.aftersale-log__title { font-size: var(--fs-base); color: var(--c-ink); }
.aftersale-log__meta  { font-size: var(--fs-xs);  color: var(--c-muted); }
.aftersale-log__amt {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: right;
}
.aftersale-log__acts {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: 0 var(--sp-4) var(--sp-4);
}

/* --- 右欄側記 --- */
.aftersale-side { min-width: 0; }
.aftersale-notes {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding-left: 1.15em;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-body);
}
.aftersale-notes li::marker { color: var(--c-sage-deep); }
.aftersale-help__text {
  display: block;
  margin-bottom: var(--sp-4);
  line-height: var(--lh-normal);
}
.aftersale-help__more {
  display: flex;
  margin-top: var(--sp-3);
}

/* --- 響應式：記錄列在小屏把金額移到下一列，避免擠壓商品標題 --- */
@media (max-width: 639px) {
  .aftersale-log__info { flex: 1 1 calc(100% - 68px); }
  .aftersale-log__amt {
    flex: 1 1 100%;
    margin: 0;
    text-align: left;
  }
  .aftersale-log__acts .c-btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
     agreement.html
     source: _frag_agreement.css  (106 lines)
     --------------------------------------------------------------------------- */
@charset "UTF-8";
/**
 * 用戶協議（agreement）頁級版式
 * frag：僅供 agreement.html 引用，父代理整合時併入 pages.css
 * 版式沿用 help.html 的單欄長文（.help-h2 章節標題風格）
 */

.p-agreement .agr-intro {
    display: grid;
    gap: var(--sp-3);
}

.p-agreement .agr-intro__text {
    margin: 0;
    color: var(--c-body);
    line-height: 1.8;
}

/* 目錄：多欄清單，錨點快速導覽 */
.p-agreement .agr-toc {
    margin-top: var(--sp-5);
}

.p-agreement .agr-toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-6);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.p-agreement .agr-toc__list a {
    display: block;
    padding: var(--sp-1) 0;
    color: var(--c-brand);
    text-decoration: none;
}

.p-agreement .agr-toc__list a:hover {
    text-decoration: underline;
}

/* 條文主體 */
.p-agreement .agr-body {
    display: grid;
    gap: var(--sp-6);
    margin-top: var(--sp-5);
    scroll-margin-top: var(--sp-6);
}

.p-agreement .agr-sec {
    display: grid;
    gap: var(--sp-3);
    scroll-margin-top: calc(var(--sp-6) * 2);
}

.p-agreement .agr-sec__title {
    margin: 0;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
}

.p-agreement .agr-sec p {
    margin: 0;
    color: var(--c-body);
    line-height: 1.9;
}

.p-agreement .agr-sec p a {
    color: var(--c-brand);
}

.p-agreement .agr-end {
    margin: 0;
    padding-top: var(--sp-4);
    border-top: 1px dashed var(--c-line);
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

/* — 響應式 — */
@media (max-width: 959px) {
    .p-agreement .agr-toc__list {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-1);
    }
}

@media (max-width: 639px) {
    .p-agreement .agr-body {
        gap: var(--sp-5);
    }

    .p-agreement .agr-sec__title {
        font-size: var(--fs-md);
    }

    .p-agreement .agr-sec p {
        line-height: 1.8;
    }
}

/* ---------------------------------------------------------------------------
     auth.html
     source: _frag_auth.css  (65 lines)
     --------------------------------------------------------------------------- */
/* ===== register.html / resetpwd.html =====
   左圖右表（巢狀版）。

   login.html 把 .login-body 直接掛在 .shell-body 上，由 .shell-body 提供
   display:grid，所以兩欄成立；本兩頁是巢狀在 .shell-body 內，只繼承到
   .login-body 的 grid-template-columns，卻沒有 display:grid，於是：

     • .login-media 變成 1072px 全寬、540px 高的橫幅
     • .login-panel 被推到橫幅下方，頁面總高 1300px
     • 實測 .auth-body 的 display 為 block（不是 grid）

   此區塊補上真正的 grid，欄寬比例與間距對齊 login.html（1fr / 0.96fr、
   gap 48px、align-items:stretch），並讓左圖隨右欄表單高度自動撐滿。 */

.auth-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr);
  gap: var(--sp-12);
  align-items: stretch;
}

/* 右欄表單置中。register 有 5 個欄位，放寬到 420px 讓驗證碼列不擁擠。 */
.auth-body .login-panel {
  align-self: center;
  max-width: 420px;
}

/* 註冊誘因：register.html 放在左圖底部，把較高的左欄用滿 */
.auth-points--media {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .28);
}
.auth-points--media .auth-points__item {
  color: rgba(255, 255, 255, .92);
  font-size: var(--fs-sm);
}
.auth-points--media .auth-points__icon {
  color: var(--c-white);
  background-color: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .26);
}

/* 平板以下：收成單欄，圖片降為短橫幅（同 login.html 的降級節奏） */
@media (max-width: 959px) {
  .auth-body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  /* 小屏收起誘因清單，避免圖片區過高把表單推遠 */
  .auth-points--media { display: none; }
}

@media (max-width: 639px) {
  .auth-body .login-panel { max-width: none; }
}

/* login.html：登錄方式分頁（密碼 / 驗證碼） */
.login-tabs {
  margin-bottom: var(--sp-5);
}
.login-tabs .c-tab {
  flex: 1 1 0;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
     certify.html
     source: _frag_certify.css  (31 lines)
     --------------------------------------------------------------------------- */
/* ===== certify.html =====
   版式沿用 contact.html（.contact-layout + .contact-form + .contact-side），
   此處只補「證件上傳雙欄」與「提交後的審核中區塊」兩個新版式。 */

/* 認證進度條：與頁首保持節奏，底部與表單拉開距離 */
.certify-steps { margin-block: var(--sp-2) var(--sp-6); }

/* 證件上傳：人像面 / 國徽面並排（.upload-grid 自帶方格樣式） */
.certify-uploads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.certify-upload {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

/* 提交後顯示的審核中區塊 */
.certify-done {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
.certify-done[hidden] { display: none; }

/* 小屏：證件上傳改單欄，避免方格被壓縮到難以點選 */
@media (max-width: 639px) {
  .certify-uploads { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
     chat.html
     source: _frag_chat.css  (245 lines)
     --------------------------------------------------------------------------- */
/* ===== chat.html =====
   客服對話：左側會話列表 + 右側對話氣泡（沿用 .c-panel / .c-search / .c-tag）。
   氣泡、會話列與輸入列為本頁新增版面；色值一律取自 css\tokens.css。 */

/* --- 主版式：列表 300px / 對話 1fr，小屏收成單欄（375px 不橫向溢出） --- */
.chat-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

/* --- 左側 --- */
.chat-side {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  min-width: 0;
}
.chat-list {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  text-align: left;
  background-color: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.chat-item:hover {
  background-color: var(--c-cream-3);
  border-color: var(--c-line-strong);
}
.chat-item.is-active {
  background-color: var(--c-brand-soft);
  border-color: var(--c-brand);
}
.chat-item__av {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--c-cream-2);
}
.chat-item__main {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.chat-item__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}
.chat-item__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-item__time {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.chat-item__last {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-item__unread { flex: none; }
.chat-quick__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chat-side__more { display: flex; margin-top: var(--sp-4); }

/* --- 對話區 --- */
.chat-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line-soft);
}
.chat-head__av {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--c-cream-2);
}
.chat-head__meta { flex: 1 1 auto; min-width: 0; }
.chat-head__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.chat-head__state {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.chat-head__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background-color: var(--c-success);
}

/* --- 訊息捲動區：固定高度內捲動，不把整頁撐長 --- */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: clamp(320px, 46vh, 520px);
  padding-block: var(--sp-2);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.chat-day {
  align-self: center;
  padding: 2px var(--sp-3);
  background-color: var(--c-cream-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.chat-msg--me { flex-direction: row-reverse; }
.chat-msg__av {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--c-cream-2);
}
.chat-msg__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: min(78%, 560px);
}
.chat-msg--them .chat-msg__col { align-items: flex-start; }
.chat-msg--me .chat-msg__col { align-items: flex-end; }

.chat-bubble {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  white-space: pre-line;
  color: var(--c-body);
  background-color: var(--c-cream-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
}
.chat-msg--them .chat-bubble { border-top-left-radius: var(--r-xs); }
.chat-msg--me .chat-bubble {
  color: var(--c-white);
  background-color: var(--c-brand);
  border-color: transparent;
  border-top-right-radius: var(--r-xs);
}
.chat-msg__time {
  padding-inline: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* --- 商品卡片 / 離線留言：客服對話中的結構化訊息 --- */
.chat-goods {
  display: flex;
  gap: var(--sp-3);
  width: min(300px, 100%);
  padding: var(--sp-3);
  text-decoration: none;
  background-color: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
}
.chat-goods__img {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--r-sm);
  object-fit: cover;
  background-color: var(--c-cream-2);
}
.chat-goods__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-2);
  min-width: 0;
}
.chat-goods__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.chat-goods__price {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-brand);
}
.chat-offline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-body);
  background-color: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
}
.chat-offline__title { color: var(--c-ink); }

/* --- 快捷回覆與輸入列 --- */
.chat-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line-soft);
}
.chat-quick__label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-right: var(--sp-1);
}
.chat-quick__btn {
  appearance: none;
  cursor: pointer;
}
.chat-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.chat-input__field {
  flex: 1 1 200px;
  width: auto;
  min-width: 0;
}
.chat-input__btn { flex: none; }

/* --- 響應式：720px 以下單欄（列表在上、對話在下），375px 亦不橫向溢出 --- */
@media (max-width: 720px) {
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-thread { height: clamp(280px, 50vh, 420px); }
  .chat-msg__col { max-width: 84%; }
}

/* ---------------------------------------------------------------------------
     checkout.html
     source: _frag_checkout.css  (116 lines)
     --------------------------------------------------------------------------- */
/* ===== checkout.html =====
   確認訂單：與 cart.html 完全同構的 .cart-layout（主表 + 結算側欄），
   只新增「收貨地址卡」與主欄堆疊（.ck-*）兩塊版式；商品列、數量、
   結算明細、服務清單全部沿用既有 .cart-* / .sum-* / .c-qty。 */

/* --- body class（與 pages.css 十四節 .p-* 同義，併入時可上提） --- */
.p-checkout .site-main { min-height: auto; }
.p-checkout .shell { scroll-margin-top: var(--sp-6); }

/* --- 主欄：地址 / 商品清單 / 優惠備註 三段直向堆疊 --- */
.ck-main {
  display: grid;
  gap: var(--sp-6);
  align-content: start;
  min-width: 0;
}

/* --- 收貨地址卡（radio + 內文） --- */
.ck-addrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.ck-addr {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-10);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.ck-addr:hover { border-color: var(--c-sand-deep); background-color: var(--c-cream-3); }
.ck-addr.is-active {
  border-color: var(--c-brand);
  background-color: var(--c-brand-soft);
}
.ck-addr input[type="radio"] {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--c-brand);
  cursor: pointer;
}

.ck-addr__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.ck-addr__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.ck-addr__tel {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.ck-addr__detail {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--c-body);
}
.ck-addr__hint {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* 「＋ 新增收貨地址」：虛線卡，橫跨兩欄 */
.ck-addr--new {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--sp-3);
  border-style: dashed;
  color: var(--c-brand);
  font-size: var(--fs-sm);
  text-align: center;
}
.ck-addr--new:hover {
  background-color: var(--c-cream-3);
  border-color: var(--c-brand);
  text-decoration: none;
}

/* --- 結算側欄的按鈕與提示間距（沿用 .cart-sum 的直向 grid） --- */
.ck-sum [data-act="submit"] { margin-top: var(--sp-1); }

/* --- 響應式 --- */
@media (max-width: 1199px) {
  .ck-addrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .ck-addrs { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .ck-addr { padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-8); }
  .ck-addr input[type="radio"] { left: var(--sp-3); }
  .cart-back { margin-top: 0; }
}

/* ---------------------------------------------------------------------------
     collect.html
     source: _frag_collect.css  (17 lines)
     --------------------------------------------------------------------------- */
/* ===== collect.html ===== */
/* 我的商品收藏：.pgrid.pgrid--3 由 layout.css 負責欄數與響應式，
   此處只補「加入購物車 + 取消收藏」雙圓鈕的操作列。 */

.collect-acts {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

/* 已收藏的心型鈕：實底陶土色，與商場的空心描邊區隔 */
.collect-acts .c-cartbtn.is-on {
  color: var(--c-white);
  background-color: var(--c-clay);
}
.collect-acts .c-cartbtn.is-on:hover { background-color: var(--c-clay-deep); }

/* ---------------------------------------------------------------------------
     coupon.html
     source: _frag_coupon.css  (131 lines)
     --------------------------------------------------------------------------- */
/* ===== coupon.html ===== */
/* 優惠券票券卡：recipes.html 3 欄網格的節奏 + 票根造型
   只使用 tokens.css 的既有令牌，不新增任何色值。 */

.coupon-panel { display: grid; gap: var(--sp-4); }
/* 標籤頁切換靠 hidden 屬性；display:grid 會蓋掉 UA 的 [hidden]，故補一條 */
.coupon-panel[hidden] { display: none; }

.coupon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.coupon-grid > .c-empty { grid-column: 1 / -1; }

/* —— 票券本體：左面額 + 中資訊 + 右操作 —— */
.coupon {
  display: flex;
  align-items: stretch;
  min-width: 0;
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.coupon:hover { border-color: var(--c-sand-deep); box-shadow: var(--sh-1); }

/* 面額區：陶土色票根，右緣虛線模擬撕線 */
.coupon__amt {
  flex: none;
  width: 104px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
  background-color: var(--c-clay-soft);
  border-right: 1px dashed var(--c-sand-deep);
}
.coupon__val {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-clay-deep);
  white-space: nowrap;
}
.coupon__val i {
  font-style: normal;
  font-size: .55em;
  margin-right: 1px;
}
.coupon__min {
  font-size: var(--fs-xs);
  color: var(--c-body);
}

/* 資訊區 */
.coupon__body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: var(--sp-1);
  padding: var(--sp-4);
}
.coupon__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.coupon__scope,
.coupon__date {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--c-muted);
  overflow-wrap: anywhere;
}

/* 操作區 */
.coupon__act {
  flex: none;
  display: flex;
  align-items: center;
  padding-inline: var(--sp-4) var(--sp-5);
}

/* —— 已使用 / 已過期：整體降調 —— */
.coupon.is-used,
.coupon.is-expired { background-color: var(--c-cream-2); }
.coupon.is-used:hover,
.coupon.is-expired:hover { border-color: var(--c-line); box-shadow: none; }
.coupon.is-used .coupon__amt,
.coupon.is-expired .coupon__amt {
  background-color: var(--c-sand-soft);
  border-right-color: var(--c-line-strong);
}
.coupon.is-used .coupon__val,
.coupon.is-expired .coupon__val { color: var(--c-muted); }
.coupon.is-used .coupon__min,
.coupon.is-expired .coupon__min,
.coupon.is-used .coupon__scope,
.coupon.is-expired .coupon__scope,
.coupon.is-used .coupon__date,
.coupon.is-expired .coupon__date { color: var(--c-faint); }

.coupon-note {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  text-align: center;
}

/* —— 響應式 —— */
@media (max-width: 1199px) {
  .coupon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .coupon-grid { grid-template-columns: minmax(0, 1fr); }
  .coupon__amt { width: 88px; }
  .coupon__act { padding-inline: var(--sp-3) var(--sp-4); }
}

/* ---------------------------------------------------------------------------
     distribution.html
     source: _frag_distribution.css  (70 lines)
     --------------------------------------------------------------------------- */
/* ===== distribution.html =====
   分銷中心（GAP §7.3 #20）：沙棕佣金數據卡 + 提現表單 + 業績訂單分頁。
   業績列沿用 .user-order 全套既有 class，本檔只補佣金列與表單尾列版式。
   ========================================================================== */

/* 內頁級設定：與 pages.css 中其他 .p-* 內頁一致 */
.p-distribution .site-main { min-height: auto; }
.p-distribution .shell { scroll-margin-top: var(--sp-6); }

/* --- 佣金數據卡：與積分餘額卡同一沙棕卡語彙 --- */
.dist-hero {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background-color: var(--c-sand);
  border-radius: var(--r-lg);
}
.dist-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
}
.dist-hero__id { min-width: 0; }
.dist-hero__label { font-size: var(--fs-sm); color: var(--c-body); }
.dist-hero__num {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-4xl);
}
/* 沙棕底上的輔助文字須用 --c-body（5.82:1），--c-muted 僅 3.64:1 不合格 */
.dist-hero .c-hint,
.dist-hero__hint { color: var(--c-body); }
.dist-hero__hint { margin-top: var(--sp-2); max-width: 54ch; }
.dist-hero__acts { display: flex; flex: none; gap: var(--sp-3); }
.dist-hero__stats { margin-top: 0; }
.dist-hero__stats .user-hero__stat dt { color: var(--c-body); }

/* --- 狀態篩選工具列 --- */
.dist-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* --- 業績列：佣金數字比 .user-order__sum 的說明字大一階 --- */
.dist-order__rate {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* --- 提現表單尾列：說明在左、按鈕在右 --- */
.dist-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* --- 響應式 --- */
@media (max-width: 639px) {
  .dist-hero { padding: var(--sp-5) var(--sp-4); }
  .dist-hero__acts { width: 100%; }
  .dist-hero__acts .c-btn { flex: 1 1 auto; min-width: 0; }
  .dist-form__foot .c-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
     exchange.html
     source: _frag_exchange.css  (47 lines)
     --------------------------------------------------------------------------- */
/* ===== exchange.html =====
   積分兌換：三欄商品網格沿用 .pgrid--3 與 .c-pcard，本段只補
   「標題列的積分餘額」與「價格改以積分顯示」兩處版面。
   色值一律取自 css\tokens.css，不新增色票。 */

/* --- 標題列右側：我的積分 --- */
.exchange-me {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.exchange-me__label {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.exchange-me__num {
  font-variant-numeric: tabular-nums;
}
.exchange-me__hint {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* --- 卡片價格：數字 + 小字單位（.c-pcard__price 原為 ¥ 金額） --- */
.exchange-price {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  min-width: 0;
}
.exchange-price__unit {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--c-muted);
}

/* --- 小屏：價格改成兩行，避免與「立即兌換」在同一列互相擠出卡片 --- */
@media (max-width: 639px) {
  .exchange-price {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: var(--lh-snug);
  }
}

/* --- 空狀態（該分類無商品）：跨滿整列置中 --- */
.exchange-empty {
  grid-column: 1 / -1;
}

/* 購物車優惠券區塊（#5） */
.cart-coupon {
  padding: var(--sp-4);
  background-color: var(--c-white);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
}
.cart-coupon__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.cart-coupon__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.cart-coupon__list {
  display: grid;
  gap: var(--sp-2);
}
.cart-coupon__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-cream-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.cart-coupon__item:hover { border-color: var(--c-brand); }
.cart-coupon__item.is-on {
  border-color: var(--c-brand);
  background-color: var(--c-brand-soft);
}
.cart-coupon__item input { accent-color: var(--c-brand); }
.cart-coupon__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.cart-coupon__body strong {
  font-size: var(--fs-sm);
  color: var(--c-ink);
}

/* ---------------------------------------------------------------------------
     goods-publish.html
     source: _frag_goods-publish.css  (110 lines)
     --------------------------------------------------------------------------- */
/* ==========================================================================
   商品上架（goods-publish.html）
   ========================================================================== */

.gp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-6);
  align-items: start;
}

/* --- 右側即時預覽 -------------------------------------------------------- */
.gp-preview {
  position: sticky;
  top: var(--sp-6);
  display: grid;
  gap: var(--sp-3);
}
.gp-preview__media {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--c-cream-2);
  border-radius: var(--r-sm);
}
.gp-preview__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gp-preview__empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.gp-preview__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.gp-preview__meta {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.gp-preview__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.gp-preview__orig {
  font-size: var(--fs-xs);
  color: var(--c-faint);
  text-decoration: line-through;
}
.gp-preview__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.gp-preview .sum-list {
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line);
}

/* --- 主圖素材選擇 -------------------------------------------------------- */
.gp-covers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-3);
}
.gp-cover {
  position: relative;
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.gp-cover img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: var(--c-cream-2);
  border-radius: var(--r-sm);
}
.gp-cover__name {
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--c-muted);
}
.gp-cover--upload {
  border-style: dashed;
}
.gp-cover__del {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background-color: var(--c-white);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
}
.gp-cover__del:hover {
  border-color: var(--c-clay);
  color: var(--c-clay);
}
.gp-cover__ph {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background-color: var(--c-cream-2);
  border-radius: var(--r-sm);
  color: var(--c-sage);
  font-size: var(--fs-2xl);
  line-height: 1;
}
.gp-cover:hover { border-color: var(--c-sage); }
.gp-cover.is-active {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 2px var(--c-brand-soft);
}
.gp-cover.is-active .gp-cover__name {
  color: var(--c-brand);
  font-weight: var(--fw-medium);
}
.gp-cover:focus-within {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

@media (max-width: 1199px) {
  .gp-layout { grid-template-columns: minmax(0, 1fr); }
  .gp-preview { position: static; }
}

@media (max-width: 639px) {
  .gp-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
     merchant.html
     source: _frag_merchant.css  (275 lines)
     --------------------------------------------------------------------------- */
/* ==========================================================================
   商家中心（merchant.html）／商戶入駐申請（merchant-apply.html）
   ＋ 個人中心 user.html 的「商家中心」摘要卡片
   ========================================================================== */

.mch-head-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.mch-main {
  display: grid;
  gap: var(--sp-5);
  min-width: 0;
}
.mch-side {
  display: grid;
  gap: var(--sp-5);
}

/* --- 未入駐：招商面板 ---------------------------------------------------- */
.mch-onboard {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
.mch-onboard__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.mch-onboard__text {
  max-width: 62ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--c-body);
}
.mch-onboard__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.mch-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  width: 100%;
}
.mch-benefit {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-4);
  background-color: var(--c-cream-2);
  border-radius: var(--r-md);
}
.mch-benefit__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--c-brand);
  background-color: var(--c-white);
  border-radius: var(--r-pill);
}
.mch-benefit__icon svg { width: 20px; height: 20px; }
.mch-benefit__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.mch-benefit__text {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--c-muted);
}

/* --- 審核中 -------------------------------------------------------------- */
.mch-detail {
  margin-block: var(--sp-5);
}
.mch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* --- 已開通：店鋪卡 + 數據 ---------------------------------------------- */
.mch-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.mch-hero__avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #eaf7ee, #d9f1d1);
  border: 1px solid rgba(31, 122, 72, 0.18);
  color: var(--c-brand);
  font-size: 1.1rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  user-select: none;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.mch-hero__avatar.is-image {
  color: transparent;
  font-size: 0;
}
.mch-hero__info {
  display: grid;
  gap: 4px;
  justify-items: start;
}
.mch-hero__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}
.mch-hero__meta {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.mch-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.mch-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.mch-stat {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.mch-stat__label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.mch-stat__num {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

/* --- 已開通：銷售統計 ---------------------------------------------------- */
.mch-sales {
  display: grid;
  gap: var(--sp-5);
}
.mch-sales__head {
  align-items: flex-start;
  flex-wrap: wrap;
}
.mch-sales__hint {
  margin-top: 4px;
}
.mch-sales__range {
  margin-left: auto;
}
.mch-sales__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.mch-sales__metric {
  display: grid;
  gap: 2px;
  padding: var(--sp-4);
  background-color: var(--c-cream-2);
  border-radius: var(--r-md);
}
.mch-sales__metric-label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.mch-sales__metric-num {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.mch-sales__metric-note {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.mch-sales__block {
  display: grid;
  gap: var(--sp-3);
}
.mch-sales__block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.mch-sales__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.mch-sales__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.mch-sales__table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.mch-sales__table th,
.mch-sales__table td {
  padding: var(--sp-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--c-line-soft);
}
.mch-sales__table th {
  background-color: var(--c-cream-2);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.mch-sales__table td {
  color: var(--c-body);
  white-space: nowrap;
}
.mch-sales__table tbody tr:last-child td {
  border-bottom: 0;
}
.mch-sales__table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mch-sales__goods {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 180px;
}
.mch-sales__goods-img {
  width: 36px;
  height: 36px;
  flex: none;
  object-fit: cover;
  background-color: var(--c-cream-2);
  border-radius: var(--r-sm);
}
.mch-sales__goods-name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mch-sales__empty {
  padding: var(--sp-4);
  text-align: center;
}

/* --- 商品列 -------------------------------------------------------------- */
.mch-list {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.mch-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.mch-item__img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  background-color: var(--c-cream-2);
  border-radius: var(--r-sm);
}
.mch-item__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.mch-item__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.mch-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.mch-item__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* --- 側欄 ---------------------------------------------------------------- */
.mch-steps { margin-top: var(--sp-4); }
.mch-req {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-body);
  list-style: disc;
}
.mch-req li::marker { color: var(--c-brand); }

/* --- 個人中心：商家摘要 -------------------------------------------------- */
.user-merchant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4) var(--sp-6);
  align-items: center;
}
.user-merchant__info {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
}
.user-merchant__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.user-merchant__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-muted);
}
.user-merchant__stats {
  display: flex;
  gap: var(--sp-6);
}
.user-merchant__stat {
  display: grid;
  gap: 2px;
  text-align: center;
}
.user-merchant__stat-label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.user-merchant__stat-num {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.user-merchant__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  grid-column: 1 / -1;
}

@media (max-width: 959px) {
  .mch-benefits { grid-template-columns: minmax(0, 1fr); }
  .mch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mch-stat:last-child { grid-column: span 2; }
  .mch-hero { grid-template-columns: auto minmax(0, 1fr); }
  .mch-hero__acts { grid-column: 1 / -1; }
  .mch-item { grid-template-columns: 72px minmax(0, 1fr); }
  .mch-item__img { width: 72px; height: 72px; }
  .mch-item__acts {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .user-merchant { grid-template-columns: minmax(0, 1fr); }
  .user-merchant__stats { justify-content: flex-start; }
}

@media (max-width: 639px) {
  .mch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mch-sales__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mch-sales__head { align-items: stretch; }
  .mch-sales__range { margin-left: 0; }
  .mch-item { grid-template-columns: 64px minmax(0, 1fr); }
  .mch-item__img { width: 64px; height: 64px; }
  .user-merchant__stats { gap: var(--sp-4); }
}

/* ---------------------------------------------------------------------------
     message.html
     source: _frag_message.css  (106 lines)
     --------------------------------------------------------------------------- */
/* ===== message.html =====
   消息通知（GAP §7.3 #18）：左訊息列表（.help-layout 主欄）+ 右分類列表。
   列表容器沿用 .cart-list（白卡圓角），分類沿用 .c-side-item + .user-menu__list，
   本檔只承載訊息列本身的版式與未讀紅點。
   ========================================================================== */

/* 內頁級設定：與 pages.css 中其他 .p-* 內頁一致 */
.p-message .site-main { min-height: auto; }
.p-message .shell { scroll-margin-top: var(--sp-6); }

/* .c-empty 本身是 display:flex，作者樣式會蓋過 UA 的 [hidden]，故補一條規則 */
.msg-empty[hidden] { display: none; }

/* --- 訊息列 --- */
.msg-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 分類切換時以 hidden 收合非本分類訊息；.msg-item 有 display:flex，
   作者樣式會蓋過 UA 的 [hidden]，故補一條規則 */
.msg-item[hidden] { display: none; }
.msg-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--c-line-soft);
  transition: background-color var(--t-fast) var(--ease);
}
.msg-item:first-child { border-top: 0; }
.msg-item:hover { background-color: var(--c-cream-3); }
.msg-item.is-unread { background-color: var(--c-cream-2); }

/* 未讀紅點：已讀時保留佔位，避免清單左緣跳動 */
.msg-item__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  background-color: transparent;
  border-radius: var(--r-pill);
}
.msg-item.is-unread .msg-item__dot { background-color: var(--c-danger); }

.msg-item__body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: var(--sp-2);
}
.msg-item__hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.msg-item__title {
  flex: 1 1 220px;
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--c-ink);
}
.msg-item__title:hover { color: var(--c-brand); }
.msg-item.is-unread .msg-item__title { font-weight: var(--fw-semibold); }
.msg-item__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-muted);
}

.msg-item__aside {
  flex: none;
  display: grid;
  justify-items: end;
  gap: var(--sp-2);
}
.msg-item__time {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.msg-item__read { font-size: var(--fs-xs); }
/* 已讀訊息不再顯示「標記已讀」鈕（以 class 控制，不用 hidden——
   .c-btn 有 display 宣告，會蓋過 UA 的 [hidden]） */
.msg-item:not(.is-unread) .msg-item__read { display: none; }

/* --- 側欄操作 --- */
.msg-side__acts { display: grid; gap: var(--sp-3); }
.msg-side__hint { margin-top: var(--sp-4); }

/* --- 響應式 --- */
@media (max-width: 639px) {
  .msg-item { flex-wrap: wrap; padding: var(--sp-4); gap: var(--sp-3); }
  /* 紅點與標題同列，時間與操作列改為整列置底 */
  .msg-item__body { flex: 1 1 calc(100% - 20px); }
  .msg-item__aside {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------------------------------------------------------------------------
     my-comments.html
     source: _frag_my-comments.css  (143 lines)
     --------------------------------------------------------------------------- */
@charset "UTF-8";
/**
 * 我的評價（my-comments）頁級版式
 * frag：僅供 my-comments.html 引用，父代理整合時併入 pages.css
 * 版面骨架沿用 cart.html（.cart-layout / .cart-list / .cart-row / .cart-sum）
 * 評價列改為「商品縮圖 + 評價內容」雙欄，故覆寫 .cart-row 的欄位定義
 * （本檔載入晚於 pages.css，同特異度下以本檔為準，屬 CSS 只加不改）
 */

.p-comments .cmt-main {
    display: grid;
    gap: var(--sp-5);
    align-content: start;
}

/* 評價列：縮圖 92px + 內容彈性 */
.p-comments .cart-row.cmt-row {
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-4);
    padding: var(--sp-5);
}

.p-comments .cmt-row__thumb {
    display: block;
    width: 92px;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--c-cream-2);
}

.p-comments .cmt-body {
    display: grid;
    gap: var(--sp-2);
    min-width: 0;
}

.p-comments .cmt-body__hd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
}

.p-comments .cmt-body__name {
    font-weight: 600;
    color: var(--c-ink);
}

.p-comments .cmt-body__spec {
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

.p-comments .cmt-body__text {
    color: var(--c-ink);
    line-height: 1.7;
}

.p-comments .cmt-body__time {
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

.p-comments .cmt-body__acts {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}

/* 曬圖列 */
.p-comments .cmt-photos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.p-comments .cmt-photos img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line);
}

/* 商家回覆 */
.p-comments .cmt-reply {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-sand);
    border-radius: var(--r-sm);
    color: var(--c-body);
    font-size: var(--fs-sm);
}

.p-comments .cmt-reply__label {
    font-weight: 600;
    color: var(--c-ink);
}

/* 篩選後無資料 */
.p-comments .cmt-empty[hidden] {
    display: none;
}

/* 統計側欄標題 */
.p-comments .sum-title--cmt {
    font-size: var(--fs-lg);
}

/* — 響應式 — */
@media (max-width: 959px) {
    .p-comments .cart-row.cmt-row {
        padding: var(--sp-4);
        gap: var(--sp-3);
    }
}

@media (max-width: 639px) {
    .p-comments .cart-row.cmt-row {
        grid-template-columns: 64px minmax(0, 1fr);
        padding: var(--sp-3);
    }

    .p-comments .cmt-row__thumb {
        width: 64px;
    }

    .p-comments .cmt-photos img {
        width: 56px;
        height: 56px;
    }

    .p-comments .cmt-body__acts {
        justify-content: flex-start;
    }
}

/* ---------------------------------------------------------------------------
     my-posts.html
     source: _frag_my-posts.css  (162 lines)
     --------------------------------------------------------------------------- */
/* ==========================================================================
   我的社區內容（my-posts.html）
   ＋ 個人中心 user.html 的「我的社區內容」區塊共用同一套 .mp-* 與 .gc-status
   ========================================================================== */

/* 新頁的 body class：沿用內頁最小高度與錨點偏移，不另開版面分支 */
.p-my-posts .shell,
.p-merchant .shell,
.p-merchant-apply .shell,
.p-goods-publish .shell { scroll-margin-top: var(--sp-6); }

.p-my-posts .site-main,
.p-merchant .site-main,
.p-merchant-apply .site-main,
.p-goods-publish .site-main { min-height: auto; }

/* --- 狀態標籤：已發佈／審核中／草稿／在售／待審核／已下架 ---------------- */
.gc-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.7;
  white-space: nowrap;
  border-radius: var(--r-pill);
}
.gc-status--on {
  color: var(--c-brand);
  background-color: var(--c-brand-soft);
}
.gc-status--wait {
  color: var(--c-clay);
  background-color: var(--c-clay-soft);
}
.gc-status--off {
  color: var(--c-muted);
  background-color: var(--c-cream-2);
}

/* --- 清單 ---------------------------------------------------------------- */
.mp-main {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}
.mp-list {
  display: grid;
  gap: var(--sp-4);
}

.mp-item {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: stretch;
  padding: var(--sp-4);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.mp-item__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--c-cream-2);
  border-radius: var(--r-sm);
}
.mp-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-item__media--text {
  display: grid;
  place-items: center;
  color: var(--c-brand);
  font-size: var(--fs-sm);
  background: linear-gradient(145deg, var(--c-sand-soft), var(--c-sage-soft));
}
.mp-item__body {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  min-width: 0;
}
.mp-item__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.mp-item__title a { color: var(--c-ink); }
.mp-item__title a:hover { color: var(--c-brand); }
.mp-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.mp-item__excerpt {
  font-size: var(--fs-sm);
  color: var(--c-body);
  line-height: var(--lh-normal);
}
.mp-item__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.mp-item__acts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: stretch;
}
.mp-item__acts .c-btn { white-space: nowrap; }

/* 個人中心用的緊湊版：縮圖 96px、不顯示摘要 */
.mp-list--compact .mp-item { grid-template-columns: 96px minmax(0, 1fr) auto; }
.mp-list--compact .mp-item__excerpt { display: none; }

/* --- 個人中心：四格內容統計 --------------------------------------------- */
.user-post-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.user-post-stat {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: var(--sp-3);
  text-align: center;
  background-color: var(--c-cream-2);
  border-radius: var(--r-sm);
}
.user-post-stat__label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.user-post-stat__num {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

@media (max-width: 959px) {
  .mp-item { grid-template-columns: 108px minmax(0, 1fr); }
  .mp-item__acts {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .mp-list--compact .mp-item { grid-template-columns: 88px minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .mp-item { grid-template-columns: 84px minmax(0, 1fr); gap: var(--sp-3); }
  .mp-item__acts { justify-content: flex-start; }
  .mp-list--compact .mp-item { grid-template-columns: 72px minmax(0, 1fr); }
  .user-post-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
     order_detail.html
     source: _frag_order_detail.css  (145 lines)
     --------------------------------------------------------------------------- */
/* ===== order-detail.html =====
   訂單詳情：狀態步驟條（.c-steps 既有元件）+ 商品明細（複用 .cart-row 六欄）
   + 物流追蹤軸 + 收貨資訊 + 金額側欄（.cart-sum 既有 sticky 行為）。
   本片段只新增 .od-* 組合版式，不改動既有規則。 */

/* --- body class（與 pages.css 十四節 .p-* 同義，併入時可上提） --- */
.p-order-detail .site-main { min-height: auto; }
.p-order-detail .shell { scroll-margin-top: var(--sp-6); }

/* --- 標題列的訂單號 --- */
.od-no {
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-wide);
}

/* --- 訂單進度 --- */
.od-flow__meta { margin-top: var(--sp-5); }
.od-alert { margin-top: var(--sp-4); }

/* --- 主欄：商品明細 / 物流 / 收貨資訊 --- */
.od-main {
  display: grid;
  gap: var(--sp-6);
  align-content: start;
  min-width: 0;
}

/* --- 商品明細的數量與行內操作 --- */
.od-qty {
  color: var(--c-body);
  font-variant-numeric: tabular-nums;
}
.od-qty__act { font-size: var(--fs-sm); }

/* --- 側欄小標（.c-panel__title 在 .cart-sum 內 margin-bottom:0，改用本標題） --- */
.od-subtitle {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line-soft);
}

/* --- 標籤式資訊列（收貨資訊 / 訂單資訊） --- */
.od-kv { display: grid; gap: var(--sp-3); }
.od-kv__row {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.od-kv__row dt { color: var(--c-muted); }
.od-kv__row dd { color: var(--c-body); }

/* --- 物流：快遞摘要條 --- */
.od-ship {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background-color: var(--c-cream-3);
  border-radius: var(--r-sm);
}
.od-ship__item { display: grid; gap: 2px; min-width: 0; }
.od-ship__item dt { font-size: var(--fs-xs); color: var(--c-muted); }
.od-ship__item dd {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* --- 物流：垂直時間軸 --- */
.od-track {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}
.od-track__item {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--sp-4);
  margin-left: 5px;
  padding: 0 0 var(--sp-5) var(--sp-5);
  border-left: 2px solid var(--c-line-soft);
}
.od-track__item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}
.od-track__item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  background-color: var(--c-white);
  border: 2px solid var(--c-line-strong);
}
.od-track__item.is-current::before {
  background-color: var(--c-brand);
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-soft);
}
.od-track__item.is-current .od-track__text {
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}
.od-track__time {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.od-track__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--c-body);
}
.od-track-empty { padding-block: var(--sp-10); }

/* --- 側欄操作：直向堆疊 --- */
.od-acts { display: grid; gap: var(--sp-2); }

/* --- 響應式 --- */
@media (max-width: 1023px) {
  .od-track__item { grid-template-columns: 120px minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .od-kv__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .od-track__item { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .od-ship { gap: var(--sp-3) var(--sp-4); padding: var(--sp-4); }
  .od-qty__act { min-height: var(--tap-min); display: inline-flex; align-items: center; }
}

/* ---------------------------------------------------------------------------
     orders.html
     source: _frag_orders.css  (149 lines)
     --------------------------------------------------------------------------- */
/* ===== orders.html =====
   訂單中心：狀態分頁列 + 訂單卡片列。
   容器沿用 .c-panel / .c-tabs / .c-pagination / .c-tag / .c-amount，
   本片段只新增「訂單列」的組合版式（.ord-*），不改動既有規則。 */

/* --- body class（與 pages.css 十四節 .p-* 同義，併入時可上提） --- */
.p-orders .site-main { min-height: auto; }
.p-orders .shell { scroll-margin-top: var(--sp-6); }

/* --- 空狀態：與清單之間留白 --- */
.ord-empty { margin-block: var(--sp-2); }

/* --- 狀態分頁列：chips + 每格筆數 --- */
.ord-tabs { margin-bottom: var(--sp-5); }
.ord-tabs__n {
  margin-left: 3px;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

/* --- 訂單列 --- */
.ord-list { display: grid; min-width: 0; }

.ord-item {
  display: grid;
  min-width: 0;
  border-radius: var(--r-sm);
}
.ord-item + .ord-item { border-top: 1px solid var(--c-line-soft); }
.ord-item:hover { background-color: var(--c-cream-3); }

/* 列頭：訂單號 + 下單時間 + 狀態標籤（沙色底，與表格列頭語彙一致） */
.ord-hd {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-cream-2);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.ord-hd__no {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--c-muted);
}
.ord-hd__no strong {
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-wide);
}
.ord-hd__time {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.ord-hd .c-tag { margin-left: auto; }

/* 列身：商品 | 合計 | 操作 */
.ord-bd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 264px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
}

.ord-goods {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
}
.ord-thumbs { display: flex; gap: var(--sp-2); flex: none; }
.ord-thumb {
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background-color: var(--c-sand-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
}
.ord-thumb img { width: 100%; height: 100%; object-fit: cover; }

.ord-info { display: grid; gap: 3px; min-width: 0; }
.ord-info__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ord-info__meta {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ord-money { display: grid; gap: 2px; justify-items: start; }
.ord-money__label { font-size: var(--fs-xs); color: var(--c-muted); }

.ord-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
}

/* --- 分頁列資訊 --- */
.ord-pager__info {
  margin-left: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* --- 響應式 --- */
@media (max-width: 1023px) {
  .ord-bd { grid-template-columns: minmax(0, 1fr) 150px 236px; }
  .ord-acts .c-btn { padding-inline: var(--sp-3); }
}

@media (max-width: 860px) {
  .ord-bd {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: start;
  }
  .ord-money { justify-items: start; }
  .ord-acts { justify-content: flex-start; }
}

@media (max-width: 639px) {
  .ord-hd { gap: var(--sp-2); padding: var(--sp-3); }
  .ord-hd__time { width: 100%; order: 3; }
  .ord-hd .c-tag { margin-left: 0; }
  .ord-bd { padding: var(--sp-3); }
  .ord-thumb { width: 46px; height: 46px; }
  .ord-acts .c-btn { flex: 1 1 auto; min-width: 0; }
  .ord-acts { width: 100%; }
  .ord-pager { flex-wrap: wrap; }
  .ord-tabs { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
     payment.html
     source: _frag_payment.css  (217 lines)
     --------------------------------------------------------------------------- */
/* ===== payment.html =====
   收銀台：置中單欄卡（語彙對齊 .p-login 的置中面板），
   內含金額卡、訂單摘要、支付方式 radio 列與操作列。
   金額直接用既有 .c-amount，提示用既有 .c-alert，不新增設計語言。 */

/* --- body class（與 pages.css 十四節 .p-* 同義，併入時可上提） --- */
.p-payment .site-main { min-height: auto; }
.p-payment .shell { scroll-margin-top: var(--sp-6); }

/* --- 主卡：比一般 .c-panel 多一點內距，收銀台呼吸感 --- */
.pay-card { padding: var(--sp-6) var(--sp-8); }

.pay-wrap {
  display: grid;
  /* 與 cart / contact / help / checkout 同一組欄寬：主欄 1fr + 側欄 300px */
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--sp-6);
  align-items: start;
  width: 100%;
}

/* 兩欄時由 .pay-wrap 的 gap 控制間距；取消 .c-panel + .c-panel 的 24px 上緣，
   否則側欄會比主卡低 24px（與 contact/help/post 側欄同一處理）。 */
.pay-wrap .c-panel + .c-panel { margin-top: 0; }

/* --- 標題列：收銀台 + 倒數 --- */
.pay-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.pay-title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
.pay-clock {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.pay-clock strong {
  color: var(--c-clay-deep);
  font-weight: var(--fw-semibold);
}

/* --- 應付金額區（點線框：對帳單語彙） --- */
.pay-amount {
  display: grid;
  gap: var(--sp-2);
  justify-items: center;
  margin-bottom: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  background-color: var(--c-cream-3);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  text-align: center;
}
.pay-amount__label {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  color: var(--c-muted);
}
.pay-order {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.pay-order strong {
  font-weight: var(--fw-medium);
  color: var(--c-body);
}

/* --- 訂單摘要 --- */
.pay-goods {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-line-soft);
}
.pay-goods__thumbs { display: flex; gap: var(--sp-2); flex: none; }
.pay-goods__img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  background-color: var(--c-sand-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
}
.pay-goods__info {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.pay-goods__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 支付方式列（radio 保留原生可及性，選中整卡上色） --- */
.pay-methods {
  display: grid;
  gap: var(--sp-3);
}
.pay-method {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-width: 0;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-10);
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease);
}
.pay-method:hover {
  border-color: var(--c-sand-deep);
  background-color: var(--c-cream-3);
}
.pay-method.is-active {
  border-color: var(--c-brand);
  background-color: var(--c-brand-soft);
}
.pay-method:focus-within {
  border-color: var(--c-brand);
  box-shadow: var(--sh-ring);
}
.pay-method input[type="radio"] {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--c-brand);
  cursor: pointer;
}

.pay-method__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--c-sage-deep);
  background-color: var(--c-cream-2);
  border-radius: var(--r-pill);
}
.pay-method.is-active .pay-method__icon {
  color: var(--c-white);
  background-color: var(--c-brand);
}
.pay-method__icon svg { width: 20px; height: 20px; }

.pay-method__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.pay-method__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.pay-method__desc {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.recharge-paymethod { margin-top: var(--sp-2); }
.recharge-paymethod__body { display: grid; gap: 3px; }
.recharge-paymethod__body strong { font-size: var(--fs-md); color: var(--c-ink); }
.recharge-paymethod__body span { font-size: var(--fs-xs); color: var(--c-muted); }

/* --- 額度不足提示與操作列 --- */
.pay-warn { margin-top: var(--sp-4); }

.pay-acts {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.pay-acts__main { flex: 1 1 auto; }

.pay-note { background-color: var(--c-cream-3); }
.pay-note .cart-service { padding-top: 0; }

/* --- 響應式 --- */
@media (max-width: 1199px) {
  /* 與 cart / contact / help 同步：側欄在平板以下收成單欄 */
  .pay-wrap { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .pay-head { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .pay-card { padding: var(--sp-5) var(--sp-4); }
  .pay-amount { padding: var(--sp-5) var(--sp-4); }
  .pay-method { padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-8); }
  .pay-method input[type="radio"] { left: var(--sp-3); }
  .pay-acts { flex-direction: column; }
  .pay-acts .c-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
     profile.html
     source: _frag_profile.css  (84 lines)
     --------------------------------------------------------------------------- */
/* ===== profile.html ===== */
/* 編輯個人資料：contact.html 單欄表單的節奏補充（區塊分隔 / 頭像上傳 / 性別列）
   只使用 tokens.css 的既有令牌，不新增任何色值。 */

.profile-block {
  display: grid;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-line-soft);
}
/* 最後一個區塊（修改密碼）與按鈕列之間不再重複畫線 */
.profile-block:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.profile-h2 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

/* —— 頭像上傳列 —— */
.profile-avatar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-5);
}
.profile-avatar {
  width: 96px;
  height: 96px;
  flex: none;
  object-fit: cover;
  background-color: var(--c-sand-soft);   /* 圖片載入前的底色 */
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
}
.profile-avatar__acts {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
}
/* 檔案選擇鈕用 label 承接（input 本體走 .u-sr-only），點擊即開啟檔案對話框 */
.profile-avatar__acts .c-btn { cursor: pointer; }

/* —— 性別 / 單選列 —— */
.profile-fieldset {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.profile-gender {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  min-height: 42px;
}

/* —— 側欄預覽標籤列 —— */
.profile-preview__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* —— 按鈕列 —— */
.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.profile-actions .c-btn { min-width: 140px; }

/* —— 響應式 —— */
@media (max-width: 639px) {
  .profile-avatar-row { gap: var(--sp-4); }
  .profile-actions { width: 100%; }
  .profile-actions .c-btn { flex: 1 1 auto; min-width: 0; width: 100%; }
}

/* ---------------------------------------------------------------------------
     register.html
     source: _frag_register.css  (50 lines)
     --------------------------------------------------------------------------- */
/* ===== register.html =====
   登錄版式（.login-body / .login-panel / .login-media）直接沿用 pages.css，
   此處只補三件事：嵌套內距歸零、簡訊驗證碼列、註冊誘因清單。 */

/* 模板內容嵌在 .shell-body 之內，.login-body 自帶的 40px 內距會疊成 72px，
   以較高特異度歸零，讓左右內距回到 shell-body 的統一節奏 */
.shell-body .auth-body { padding: 0; }

/* 簡訊驗證碼列：輸入框 + 獲取按鈕同行（uni-app sms code row） */
.code-row {
  display: flex;
  align-items: stretch;
  gap: var(--sp-3);
}
.code-row .c-input { flex: 1 1 auto; min-width: 0; }
.code-row .c-btn { flex: none; white-space: nowrap; }

/* 註冊誘因清單 */
.auth-points {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.auth-points__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-body);
}
.auth-points__icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand);
  background-color: var(--c-brand-soft);
  border-radius: var(--r-pill);
}
.auth-points__icon svg { width: 17px; height: 17px; }

/* 小屏：驗證碼列維持同行（輸入框會自然收窄），按鈕不換行 */
@media (max-width: 639px) {
  .code-row { gap: var(--sp-2); }
  .code-row .c-btn { padding-inline: var(--sp-3); }
}

/* ---------------------------------------------------------------------------
     remark.html
     source: _frag_remark.css  (105 lines)
     --------------------------------------------------------------------------- */
/* ===== remark.html =====
   版式沿用 contact.html 單欄表單（.contact-form）＋ compose-body 收窄版心，
   此處只補「被評商品列」「星等評分」「標籤選擇」三個新版式。 */

/* 被評價的商品列 */
.remark-goods {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background-color: var(--c-cream-3);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
}
.remark-goods__img {
  flex: none;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background-color: var(--c-sand-soft);
}
.remark-goods__info {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: var(--sp-1);
}
.remark-goods__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}
.remark-goods__spec {
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.remark-goods__price { flex: none; }

/* 星等評分：未選為空心灰星、選中與懸停為陶土金（--c-clay 於白底 4.93:1） */
.remark-stars {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.remark-star {
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-line-strong);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.remark-star svg { width: 26px; height: 26px; }
.remark-star.is-on { color: var(--c-clay); }
.remark-star.is-on svg path { fill: currentColor; }
.remark-star:hover { transform: scale(1.08); }
.remark-star:focus-visible { outline: none; box-shadow: var(--sh-ring); }
.remark-stars__text {
  margin-left: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* 標籤選擇：按鈕型 tag，選中態等同 .c-tag--solid（僅用 token 色） */
.remark-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.remark-tags .c-tag {
  cursor: pointer;
  user-select: none;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.remark-tags .c-tag:hover { border-color: var(--c-brand); color: var(--c-brand); }
.remark-tags .c-tag.is-active {
  color: var(--c-white);
  background-color: var(--c-brand);
  border-color: transparent;
}

/* 小屏：商品列改直向堆疊，避免價格被擠出卡片 */
@media (max-width: 639px) {
  .remark-goods { flex-wrap: wrap; }
  .remark-goods__price { width: 100%; text-align: right; }
  .remark-stars__text { width: 100%; margin-left: 0; margin-top: var(--sp-1); }

  /* 觸控目標（ADR-12）：標籤 tag 24px → 44px */
  .remark-tags .c-tag {
    height: var(--tap-min);
    padding-inline: var(--sp-4);
    font-size: var(--fs-sm);
  }
}

/* ---------------------------------------------------------------------------
     resetpwd.html
     source: _frag_resetpwd.css  (25 lines)
     --------------------------------------------------------------------------- */
/* ===== resetpwd.html =====
   與 register.html 共用「左圖右表」骨架（.login-body / .login-panel）。
   注意：.shell-body .auth-body 與 .code-row 與 _frag_register.css 重複，
   整併進 pages.css 時兩份擇一保留即可（此檔保留是為了單頁可獨立驗收）。 */

/* 嵌套在 .shell-body 內時，.login-body 自帶的 40px 內距需歸零 */
.shell-body .auth-body { padding: 0; }

/* 簡訊驗證碼列：輸入框 + 獲取按鈕同行 */
.code-row {
  display: flex;
  align-items: stretch;
  gap: var(--sp-3);
}
.code-row .c-input { flex: 1 1 auto; min-width: 0; }
.code-row .c-btn { flex: none; white-space: nowrap; }

/* 安全提示條與表單的間距 */
.login-panel .c-alert { margin-bottom: var(--sp-5); }

/* 小屏：驗證碼列維持同行，按鈕不換行 */
@media (max-width: 639px) {
  .code-row { gap: var(--sp-2); }
  .code-row .c-btn { padding-inline: var(--sp-3); }
}

/* ---------------------------------------------------------------------------
     score.html
     source: _frag_score.css  (111 lines)
     --------------------------------------------------------------------------- */
/* ===== score.html =====
   積分明細（GAP §7.3 #13）：沙棕積分餘額卡 + 分類分頁明細。
   只組合既有令牌與元件（.user-hero__stats / .c-amount / .c-tabs / .c-pagination），
   新增 class 僅承載本頁版式，不改動任何共用檔。
   ========================================================================== */

/* 內頁級設定：與 pages.css 中其他 .p-* 內頁一致 */
.p-score .site-main { min-height: auto; }
.p-score .shell { scroll-margin-top: var(--sp-6); }

/* --- 積分餘額卡：沿用 .user-hero 的沙棕底圓角卡語彙 --- */
.score-hero {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background-color: var(--c-sand);
  border-radius: var(--r-lg);
}
.score-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
}
.score-hero__id { min-width: 0; }
.score-hero__label { font-size: var(--fs-sm); color: var(--c-body); }
.score-hero__num {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-4xl);
}
/* 沙棕底上的輔助文字須用 --c-body（5.82:1）；
   --c-muted 在沙棕底僅 3.64:1，不可用於正文級文字 */
.score-hero .c-hint,
.score-hero__hint { color: var(--c-body); }
.score-hero__hint { margin-top: var(--sp-2); max-width: 54ch; }
.score-hero__acts { display: flex; flex: none; gap: var(--sp-3); }
.score-hero__stats { margin-top: 0; }
.score-hero__stats .user-hero__stat dt { color: var(--c-body); }

/* --- 分類 + 筆數摘要工具列 --- */
.score-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* --- 明細清單 --- */
.score-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.score-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--c-line-soft);
}
.score-item:first-child { border-top: 0; }
.score-item__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand);
  background-color: var(--c-brand-soft);
  border-radius: var(--r-pill);
}
.score-item__icon svg { width: 20px; height: 20px; }
.score-item__icon--out {
  color: var(--c-clay-deep);
  background-color: var(--c-clay-soft);
}
.score-item__body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: var(--sp-1);
}
.score-item__title { font-size: var(--fs-base); color: var(--c-ink); }
.score-item__meta {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  overflow-wrap: anywhere;
}
.score-item__num {
  flex: none;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.score-item__num--minus { color: var(--c-clay-deep); }

/* --- 響應式 --- */
@media (max-width: 639px) {
  .score-hero { padding: var(--sp-5) var(--sp-4); }
  .score-hero__acts { width: 100%; }
  .score-hero__acts .c-btn { flex: 1 1 auto; min-width: 0; }
  .score-item { gap: var(--sp-3); }
  .score-item__icon { width: 34px; height: 34px; }
  .score-item__num { font-size: var(--fs-base); }
}

/* ---------------------------------------------------------------------------
     search.html
     source: _frag_search.css  (53 lines)
     --------------------------------------------------------------------------- */
/* ===== search.html =====
   新增版式極薄：左側篩選欄的面板節奏與熱門搜尋 tag 的可點態，
   其餘全部沿用 .shop-body / .c-panel / .filter-group / .c-pcard 既有樣式。 */

/* 篩選面板縱向堆疊（桌面 .shop-cats 內、≤959px 摺疊面板內同一套） */
.search-filters {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}
.search-filter .c-panel__title { margin-bottom: var(--sp-3); }
.search-filter .c-btn--text { margin-top: var(--sp-1); padding-inline: 0; }

/* 熱門搜尋 tag：按鈕型 tag，選中態等同 .c-tag--solid（僅用 token 色） */
.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.search-tags .c-tag {
  cursor: pointer;
  user-select: none;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.search-tags .c-tag:hover { border-color: var(--c-brand); color: var(--c-brand); }
.search-tags .c-tag.is-active {
  color: var(--c-white);
  background-color: var(--c-brand);
  border-color: transparent;
}

/* display:flex/grid 的元件會蓋掉 UA 的 [hidden]，需明確還原 */
.c-empty[hidden],
.pgrid[hidden],
.c-pagination[hidden] { display: none; }

/* ≤959px 時 .shop-cats 變成摺疊面板（site.js 切 .is-collapsed），
   既有規則只收合 .side-list，本頁的篩選面板需一併收合 */
.shop-cats.is-collapsed .search-filters { display: none; }

/* 小屏：結果網格與篩選欄恢復單欄節奏（.shop-body 已由 layout.css 收成單欄） */
@media (max-width: 639px) {
  .search-filters { margin-top: var(--sp-3); }

  /* 觸控目標（ADR-12）：熱門搜尋 tag 24px → 44px */
  .search-tags .c-tag {
    height: var(--tap-min);
    padding-inline: var(--sp-4);
    font-size: var(--fs-sm);
  }
}

/* ---------------------------------------------------------------------------
     share.html
     source: _frag_share.css  (270 lines)
     --------------------------------------------------------------------------- */
/* ===================================================================
   _frag_share.css — 分銷推廣頁（share.html）版面
   掛載：模板 <body> 首行 <link>；主控統整進 pages.css 後可移除
   色值一律取自 css/tokens.css；僅新增 class，不改既有規則
   =================================================================== */

.p-share .share-layout {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
    margin-top: var(--sp-5);
}

/* ------------------------------------------------ 左：海報卡 */
.p-share .share-poster {
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    background-color: var(--c-cream-3);
    overflow: hidden;
}

.p-share .share-poster__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

.p-share .share-poster__logo {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--c-brand);
    letter-spacing: var(--ls-wide);
}

.p-share .share-poster__slogan {
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

.p-share .share-poster__img {
    display: block;
    width: calc(100% - var(--sp-6));
    height: 180px;
    margin: 0 var(--sp-4);
    object-fit: cover;
    border-radius: var(--r-md);
}

.p-share .share-poster__copy {
    margin: var(--sp-4);
    text-align: center;
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--c-body);
}

.p-share .share-poster__copy strong {
    color: var(--c-clay-deep);
}

.p-share .share-poster__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4);
    margin-top: auto;
    border-top: 1px dashed var(--c-sand-deep);
    background-color: var(--c-white);
}

.p-share .share-qr {
    display: block;
    width: 120px;
    height: 120px;
    color: var(--c-ink);
}

.p-share .share-poster__code {
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.p-share .share-poster__code strong {
    font-size: var(--fs-md);
    letter-spacing: 0.1em;
    color: var(--c-brand);
}

.p-share .share-acts {
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.p-share .share-acts__btn {
    width: 100%;
    min-height: var(--tap-min);
}

/* ------------------------------------------------ 右：推薦碼與連結 */
.p-share .share-code {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-4);
    margin: var(--sp-4) 0;
    border: 1px dashed var(--c-sand-deep);
    border-radius: var(--r-md);
    background-color: var(--c-sand-soft);
}

.p-share .share-code__label {
    font-size: var(--fs-sm);
    color: var(--c-muted);
}

.p-share .share-code__num {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    color: var(--c-brand);
    font-variant-numeric: tabular-nums;
}

.p-share .share-copy {
    display: flex;
    gap: var(--sp-2);
    align-items: stretch;
    flex-wrap: wrap;
}

.p-share .share-copy__input {
    flex: 1 1 300px;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

.p-share .share-copy__btn {
    flex: 0 0 auto;
    min-height: var(--tap-min);
    padding-inline: var(--sp-5);
}

.p-share .share-stats {
    margin-top: var(--sp-5);
}

.p-share .share-stats .sum-list__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-line-soft);
}

.p-share .share-stats .sum-list__row dd {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
}

.p-share .share-note {
    margin-top: var(--sp-4);
}

.p-share .share-note .c-alert__body strong {
    color: inherit;
}

/* ------------------------------------------------ 我的推薦列表 */
.p-share .share-refs {
    list-style: none;
    padding: 0;
    margin: var(--sp-4) 0 var(--sp-5);
    border-top: 1px solid var(--c-line);
}

.p-share .share-ref {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-line);
}

.p-share .share-ref__av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--c-cream-2);
}

.p-share .share-ref__info {
    min-width: 0;
}

.p-share .share-ref__name {
    margin: 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
}

.p-share .share-ref__meta {
    margin: 2px 0 0;
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

.p-share .share-ref__pts {
    font-size: var(--fs-base);
    color: var(--c-brand);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.p-share .share-ref__pts--none {
    font-weight: var(--fw-regular);
    color: var(--c-faint);
}

/* ------------------------------------------------ 響應式 */
@media (max-width: 1200px) {
    .p-share .share-layout {
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    }
}

@media (max-width: 959px) {
    .p-share .share-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .p-share .share-poster__img {
        height: 220px;
    }
}

@media (max-width: 639px) {
    .p-share .share-code {
        flex-direction: column;
        align-items: flex-start;
    }

    .p-share .share-copy__input {
        flex: 1 1 100%;
    }

    .p-share .share-copy__btn {
        width: 100%;
    }

    .p-share .share-ref {
        grid-template-columns: auto minmax(0, 1fr) auto;
        row-gap: var(--sp-1);
    }

    .p-share .share-ref__pts {
        grid-column: 2 / -1;
        grid-row: 2;
    }
}

/* ---------------------------------------------------------------------------
     signin.html
     source: _frag_signin.css  (122 lines)
     --------------------------------------------------------------------------- */
/* ===== signin.html =====
   每日簽到：置中雙欄版式（左日曆、右獎勵規則），四格數據沿用 .c-card。
   日曆以原生 table 承載（語意 + 等分欄皆由 table 處理），狀態色取 tokens。 */

/* --- 四格數據 --- */
.signin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.signin-stat {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}
.signin-stat__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-muted);
}
.signin-stat__num {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.signin-stat__note {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--c-muted);
}

/* --- 主版式：日曆 1.25fr / 獎勵與規則 1fr --- */
.signin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.signin-side { min-width: 0; }

/* --- 本週簽到日曆（table）--- */
.sign-week {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: var(--sp-1);
}
.sign-week__hd {
  padding-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--c-muted);
  text-align: center;
}
.sign-day {
  padding: var(--sp-2) 0;
  background-color: var(--c-cream-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  text-align: center;
  color: var(--c-muted);
}
.sign-day__date {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.sign-day__mark {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-style: normal;
  color: inherit;
}
.sign-day.is-done {
  background-color: var(--c-brand-soft);
  border-color: transparent;
  color: var(--c-brand);
}
.sign-day.is-done .sign-day__date { color: var(--c-brand); }
.sign-day.is-today {
  background-color: var(--c-white);
  border-color: var(--c-brand);
  color: var(--c-brand);
  box-shadow: var(--sh-ring);
}

/* --- 簽到按鈕與提示 --- */
.sign-cta { margin-top: var(--sp-5); }
.sign-tip {
  margin-top: var(--sp-3);
  line-height: var(--lh-normal);
}

/* --- 獎勵清單的右欄（文字 + 已達成標籤） --- */
.signin-rewards .sum-list__row dd {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

/* --- 規則清單 --- */
.sign-rules {
  display: grid;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding-left: 1.15em;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-body);
}
.sign-rules li::marker { color: var(--c-sage-deep); }

/* --- 響應式 --- */
@media (max-width: 959px) {
  .signin-layout { grid-template-columns: minmax(0, 1fr); }
  .signin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* === FRAGMENT CONSOLIDATION END === */