/* =========================================================
   📑 trips.css — Trips/Browse.cshtml 與 Trips/Details.cshtml 專屬樣式
   依賴 base.css 的設計變數，並使用 custom.css 的
   cf-card / cf-chip / cf-pill / cf-input / cf-btn / cf-table /
   cf-compare-bar / cf-placeholder 等共用元件。
   ---------------------------------------------------------
   目錄：
    1. icon 字級 utility
    2. Browse — 頁首 intro
    3. Browse — 篩選側欄
    4. Browse — 工具列 / 排序 / 篩選 chip
    5. Browse — 遊程卡片 Grid
    6. Browse — 比較列 (sticky bottom)
    7. Details — Hero
    8. Details — Action strip
    9. Details — 關於這條遊程 / 統計格
   10. Details — 碳足跡報告
   11. Details — 模組明細表
   12. Details — 右側欄
   13. Details — Footer
   ========================================================= */

/* =========================================================
   1. 共用小型 icon 字級 utility
   ========================================================= */
.cf-icon-10 { font-size: 14px; }
.cf-icon-11 { font-size: 11px; }
.cf-icon-12 { font-size: 12px; }
.cf-icon-13 { font-size: 13px; }
.cf-icon-14 { font-size: 14px; }
.cf-icon-15 { font-size: 15px; }
.cf-icon-16 { font-size: 16px; }
.cf-icon-18 { font-size: 18px; }
.cf-icon-20 { font-size: 20px; }

/* =========================================================
   2. Browse.cshtml — 頁首 intro
   ========================================================= */
.cf-browse-app {
  background: var(--cream-50);
  min-height: calc(100vh - 72px);
}

.cf-browse-intro {
  background: linear-gradient(180deg,#fff 0%,var(--cream-50) 100%);
  border-bottom: 1px solid var(--cream-200);
  padding: 36px 48px 32px;
}
.cf-browse-intro__row {
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cf-browse-intro__title {
  /* 字重/顏色沿用 cf-page-title，這裡只覆蓋字級 */
  font-size:32px; letter-spacing:0.01em;
}
.cf-browse-intro__stat {
  padding:10px 16px; background:#fff; border:1px solid var(--cream-200); border-radius:8px;
  display:flex; align-items:center; gap:14px; flex-shrink:0;
}
.cf-browse-intro__stat-icon { color:var(--forest-500); font-size:18px; }
.cf-browse-intro__stat-block { font-size: 14px; color:var(--ink-500); line-height:1.3; }
.cf-browse-intro__stat-value { font-size:18px; font-weight:700; color:var(--forest-700); }
.cf-browse-intro__stat-unit  { font-size: 14px; color:var(--ink-400); font-weight:400; }
.cf-browse-intro__stat-divider { width:1px; height:32px; background:var(--cream-200); }

/* ── Browse 版面 ── */
.cf-browse-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding: 28px 48px 64px;
  align-items: start;
}
.cf-browse-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1279px) {
  .cf-browse-intro,
  .cf-browse-body { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 991px) {
  .cf-browse-body    { grid-template-columns: 1fr; }
  .cf-browse-sidebar { display: none; }
  .cf-browse-cards   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .cf-browse-intro { padding: 24px 16px 20px; }
  .cf-browse-body  { padding: 16px 16px 48px; }
  .cf-browse-cards { grid-template-columns: 1fr; }
}

/* =========================================================
   3. Browse.cshtml — 篩選側欄
   ========================================================= */
.cf-browse-sidebar__card {
  padding:22px 22px 18px; position:sticky; top:24px; z-index:10;
}
.cf-browse-sidebar__head {
  display:flex; align-items:center; gap:8px; margin-bottom:20px;
}
.cf-browse-sidebar__head-icon { color:var(--forest-700); font-size:15px; }
.cf-browse-sidebar__head-label { font-weight:600; color:var(--forest-900); font-size:14px; }
.cf-browse-sidebar__clear {
  margin-left:auto; font-size: 14px; color:var(--ink-500); cursor:pointer; background:transparent; border:0;
}

.cf-browse-filter-group {
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px dashed var(--cream-200);
}
.cf-browse-filter-label {
  font-size: 14px; font-weight:600; color:var(--ink-700); letter-spacing:0.05em; margin-bottom:10px;
}
.cf-browse-filter-input { height:38px; font-size: 14px; }

.cf-browse-pill-row { display:flex; gap:6px; }
.cf-browse-pill-row--wrap { flex-wrap:wrap; }
.cf-browse-tag-pill { padding:4px 10px; font-size: 14px; }

.cf-browse-carbon-label {
  font-size: 14px; font-weight:600; color:var(--ink-700); letter-spacing:0.05em; margin-bottom:6px;
}
.cf-browse-carbon-unit { color:var(--ink-400); font-weight:400; }

/* 自訂 radio 樣式 */
.cf-radio-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 4px; cursor: pointer; font-size: 14px;
  margin: 0; user-select: none;
  color: var(--ink-700);
}
.cf-radio-row.is-active { color: var(--forest-700); font-weight: 500; }
.cf-radio-ring {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--cream-300);
  display: grid; place-items: center;
  background: #fff; flex-shrink: 0;
  transition: border-color .12s;
}
.cf-radio-ring.is-active { border-color: var(--forest-700); }
.cf-radio-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--forest-700);
}

.cf-browse-apply-btn { width:100%; justify-content:center; }

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

/* =========================================================
   4. Browse.cshtml — 工具列 / 排序 / 篩選 chip
   ========================================================= */
.cf-browse-toolbar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; background:#fff;
  border:1px solid var(--cream-200); border-radius:8px; margin-bottom:20px;
}
.cf-browse-toolbar__count { font-size:14px; color:var(--ink-500); white-space:nowrap; }
.cf-browse-toolbar__count-num { color:var(--forest-900); font-weight:700; }

.cf-browse-chip { padding-right:6px; }
.cf-browse-chip__remove {
  background:transparent; border:0; padding:0; margin-left:2px; cursor:pointer;
  display:inline-flex; align-items:center; color:inherit; line-height:1;
}

.cf-browse-sort { margin-left:auto; display:flex; align-items:center; gap:10px; }
.cf-browse-sort__label { font-size: 14px; color:var(--ink-500); white-space:nowrap; }
.cf-browse-sort__select { height:32px; font-size: 14px; width:auto; min-width:130px; }

.cf-browse-loading { text-align:center; padding:60px 0; }
.cf-browse-spinner {
  width:32px; height:32px; border:2px solid var(--cream-200); border-top-color:var(--forest-500);
  border-radius:50%; animation:cf-spin .8s linear infinite; margin:0 auto 12px;
}
.cf-browse-loading__text { color:var(--ink-500); font-size:14px; margin:0; }

/* =========================================================
   5. Browse.cshtml — 遊程卡片 Grid
   ========================================================= */
.cf-browse-trip-card { display:flex; flex-direction:column; }
.cf-browse-trip-card__image-wrap {
  position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--cream-100);
}
.cf-browse-trip-card__image { width:100%; height:100%; object-fit:cover; display:block; }
.cf-browse-trip-card__placeholder { position:absolute; inset:0; height:auto; }
.cf-browse-trip-card__badges { position:absolute; left:10px; top:10px; display:flex; gap:6px; }
.cf-browse-trip-card__badge {
  padding:4px 8px; font-size: 14px; font-weight:600; border-radius:4px;
}
.cf-browse-trip-card__badge--days { background:rgba(255,255,255,0.95); color:var(--forest-800); letter-spacing:0.04em; }
.cf-browse-trip-card__badge--eco {
  background:var(--forest-700); color:#fff; display:flex; align-items:center; gap:4px;
}
.cf-browse-trip-card__body { padding:16px 16px 14px; flex:1; display:flex; flex-direction:column; }
.cf-browse-trip-card__meta {
  display:flex; align-items:center; gap:5px; color:var(--ink-500); font-size: 14px; margin-bottom:6px;
}
.cf-browse-trip-card__title { font-size:18px; font-weight:600; color:var(--ink-900); margin:0 0 8px; line-height:1.3; }
.cf-browse-trip-card__desc {
  font-size: 14px; color:var(--ink-500); line-height:1.55; margin:0 0 12px; min-height:40px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cf-browse-trip-card__tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:12px; }
.cf-browse-trip-card__tag { font-size: 14px; padding:3px 8px; }
.cf-browse-trip-card__footer {
  margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between;
  padding-top:12px; border-top:1px solid var(--cream-100);
}
.cf-browse-trip-card__carbon-label {
  font-size: 14px; color:var(--ink-400); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:2px;
}
.cf-browse-trip-card__carbon-row { display:flex; align-items:baseline; gap:4px; }
.cf-browse-trip-card__carbon-value { font-size:22px; font-weight:700; color:var(--forest-700); letter-spacing:-0.01em; }
.cf-browse-trip-card__carbon-unit { font-size: 14px; color:var(--ink-500); }
.cf-browse-trip-card__actions { display:flex; gap:6px; }

/* =========================================================
   6. Browse.cshtml — 比較列 (sticky bottom)
   ========================================================= */
.cf-browse-compare-wrap { position:sticky; bottom:20px; margin-top:24px; z-index:100; }
.cf-browse-compare-bar { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.cf-browse-compare-bar__count { font-size:14px; white-space:nowrap; }
.cf-browse-compare-bar__count-num { font-size:16px; }
.cf-browse-compare-bar__items { display:flex; gap:8px; flex-wrap:wrap; }
.cf-browse-compare-item {
  padding:4px 10px 4px 4px; background:rgba(255,255,255,0.1); border-radius:6px;
  display:flex; align-items:center; gap:6px; font-size: 14px;
}
.cf-browse-compare-item__thumb {
  width:22px; height:22px; border-radius:4px; overflow:hidden; background:var(--forest-600); flex-shrink:0;
}
.cf-browse-compare-item__thumb-img { width:100%; height:100%; object-fit:cover; }
.cf-browse-compare-item__title { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cf-browse-compare-item__remove {
  background:transparent; border:0; color:rgba(255,255,255,0.7); display:grid; place-items:center;
  padding:0; cursor:pointer; flex-shrink:0;
}
.cf-browse-compare-bar__expand {
  margin-left:auto; background:#fff; color:var(--forest-800); font-weight:600; flex-shrink:0;
}

/* =========================================================
   7. Details.cshtml — Hero
   ========================================================= */
.cf-detail-hero {
  position:relative; height:380px; overflow:hidden; background:var(--forest-900);
}
.cf-detail-hero__image { width:100%; height:100%; object-fit:cover; display:block; }
.cf-detail-hero__overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,43,34,0.2) 0%,rgba(16,43,34,0.75) 100%);
}
.cf-detail-hero-content {
  position:absolute; left:48px; right:48px; bottom:36px; color:#fff;
}
.cf-detail-hero__crumb {
  font-size: 14px; opacity:.85; letter-spacing:.06em; margin-bottom:14px; display:flex; align-items:center; gap:6px;
}
.cf-detail-hero__crumb-link { color:inherit; text-decoration:none; }
.cf-detail-hero__crumb-current { opacity:.75; }
.cf-detail-hero__badges { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.cf-detail-hero__badge { padding:4px 10px; border-radius:4px; font-size: 14px; }
.cf-detail-hero__badge--approved {
  background:rgba(255,255,255,0.18); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.3); letter-spacing:.06em;
}
.cf-detail-hero__badge--eco {
  background:rgba(255,255,255,0.95); color:var(--forest-800); font-weight:600; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:4px;
}
.cf-detail-hero__title { font-size:44px; font-weight:600; margin:0; letter-spacing:.005em; line-height:1.15; }
.cf-detail-hero__desc {
  font-size:18px; margin:10px 0 0; opacity:.9; font-weight:300; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:700px;
}
.cf-detail-hero__meta { display:flex; gap:28px; margin-top:22px; font-size: 14px; opacity:.85; flex-wrap:wrap; }
.cf-detail-hero__meta-item { display:flex; align-items:center; gap:6px; }

/* =========================================================
   8. Details.cshtml — Action strip
   ========================================================= */
.cf-action-strip {
  background:#fff; border-bottom:1px solid var(--cream-200); padding:14px 48px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.cf-action-strip__back {
  font-size: 14px; color:var(--ink-700); text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.cf-action-strip__actions { margin-left:auto; display:flex; gap:8px; }

/* =========================================================
   9. Details.cshtml — 關於這條遊程 / 統計格
   ========================================================= */
.cf-detail-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  padding: 36px 48px 64px;
  align-items: start;
}
.cf-detail-section-title {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--cream-200); padding-bottom: 10px; margin-bottom: 18px;
}
.cf-detail-section-title h2 {
  font-family: 'Noto Serif TC', serif;
  font-size: 22px; font-weight: 600; color: var(--forest-900);
  margin: 0; letter-spacing: 0.005em;
}
.cf-detail-section-hint { display:flex; align-items:center; gap:5px; color:var(--ink-500); font-size: 14px; }

.cf-detail-about { margin-bottom:36px; }
.cf-detail-about__desc {
  font-size:16px; color:var(--ink-700); line-height:1.85; margin:0 0 22px; white-space:pre-line;
}
.cf-detail-stat-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  padding:20px 24px; background:var(--cream-100); border-radius:10px;
}
.cf-detail-stat-item { display:flex; align-items:center; gap:12px; }
.cf-detail-stat-icon {
  width:36px; height:36px; border-radius:8px; background:#fff; display:grid; place-items:center;
  border:1px solid var(--cream-200); color:var(--ink-500); flex-shrink:0;
}
.cf-detail-stat-icon--accent { color: var(--forest-700); }
.cf-detail-stat-label { font-size: 14px; color:var(--ink-500); }
.cf-detail-stat-value { font-size:14px; font-weight:600; color:var(--ink-800); }
.cf-detail-stat-value--accent { color: var(--forest-700); }

/* =========================================================
   10. Details.cshtml — 碳足跡報告
   ========================================================= */
.cf-detail-overview {
  padding:28px; background:#fff; border:1px solid var(--cream-200); border-radius:12px;
  display:grid; grid-template-columns:220px 1fr; gap:32px; align-items:center; margin-bottom:16px;
}
.cf-detail-donut { position:relative; width:200px; height:200px; margin:0 auto; }
.cf-detail-donut__center {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; pointer-events:none;
}
.cf-detail-donut__value { font-size:32px; font-weight:600; color:var(--forest-900); line-height:1; letter-spacing:-0.01em; }
.cf-detail-donut__unit { font-size: 14px; color:var(--ink-500); margin-top:4px; }

.cf-detail-legend-label { font-size: 14px; color:var(--ink-500); letter-spacing:.06em; margin-bottom:8px; }
.cf-detail-hero-number { display:flex; align-items:baseline; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.cf-detail-hero-number__value { font-size:44px; font-weight:600; color:var(--forest-800); letter-spacing:-0.01em; line-height:1; }
.cf-detail-hero-number__unit { font-size:14px; color:var(--ink-500); }
.cf-detail-lower-badge {
  padding:4px 10px; background:var(--forest-50); border:1px solid var(--forest-100);
  color:var(--forest-700); border-radius:100px; font-size: 14px; font-weight:500;
}

.cf-detail-legend { display:flex; flex-direction:column; gap:9px; font-size: 14px; }
.cf-detail-legend-row { display:flex; align-items:center; gap:12px; }
.cf-detail-legend-dot { width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.cf-detail-legend-dot--transport     { background:#4a7c8d; }
.cf-detail-legend-dot--stay          { background:#3d6b53; }
.cf-detail-legend-dot--dining        { background:#b89968; }
.cf-detail-legend-dot--activity      { background:#b45f3e; }
.cf-detail-legend-dot--office        { background:#6b6555; }
.cf-detail-legend-name { color:var(--ink-700); flex:1; }
.cf-detail-legend-track { flex:1; height:6px; background:var(--cream-100); border-radius:3px; overflow:hidden; max-width:160px; }
.cf-detail-legend-fill { height:100%; }
.cf-detail-legend-fill--transport    { background:#4a7c8d; }
.cf-detail-legend-fill--stay         { background:#3d6b53; }
.cf-detail-legend-fill--dining       { background:#b89968; }
.cf-detail-legend-fill--activity     { background:#b45f3e; }
.cf-detail-legend-fill--office       { background:#6b6555; }
.cf-detail-legend-pct { font-size: 14px; color:var(--ink-500); width:38px; text-align:right; }
.cf-detail-legend-value { font-weight:600; color:var(--ink-900); width:60px; text-align:right; }

.cf-detail-equiv {
  padding:18px 22px; background:var(--forest-50); border:1px solid var(--forest-100);
  border-radius:10px; display:flex; align-items:center; gap:22px; margin-bottom:28px;
}
.cf-detail-equiv__icon {
  width:42px; height:42px; border-radius:50%; background:var(--forest-700);
  display:grid; place-items:center; color:#fff; flex-shrink:0;
}
.cf-detail-equiv__label { font-size: 14px; color:var(--forest-700); letter-spacing:.04em; margin-bottom:4px; }
.cf-detail-equiv__text { font-size:15px; color:var(--ink-800); line-height:1.6; }
.cf-detail-equiv__strong { font-size:17px; color:var(--forest-800); }
.cf-detail-equiv__source { font-size: 14px; color:var(--ink-500); margin-top:6px; line-height:1.5; }

/* =========================================================
   11. Details.cshtml — 模組明細表
   ========================================================= */
.cf-detail-modules { display:flex; flex-direction:column; gap:16px; }
.cf-module-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--cream-200);
}
.cf-module-icon {
  width: 32px; height: 32px; border-radius: 6px;
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
}
.cf-module-icon--transport { background:#4a7c8d; }
.cf-module-icon--stay      { background:#3d6b53; }
.cf-module-icon--dining    { background:#b89968; }
.cf-module-icon--activity  { background:#b45f3e; }

.cf-detail-module-info { flex:1; }
.cf-detail-module-title { font-size:15px; font-weight:600; color:var(--ink-900); }
.cf-detail-module-source { font-size: 14px; color:var(--ink-500); }
.cf-detail-module-subtotal { text-align:right; }
.cf-detail-module-subtotal__label { font-size: 14px; color:var(--ink-500); }
.cf-detail-module-subtotal__value { font-size:18px; font-weight:600; }
.cf-detail-module-subtotal__value--transport { color:#4a7c8d; }
.cf-detail-module-subtotal__value--stay      { color:#3d6b53; }
.cf-detail-module-subtotal__value--dining    { color:#b89968; }
.cf-detail-module-subtotal__value--activity  { color:#b45f3e; }
.cf-detail-module-subtotal__unit { font-size: 14px; color:var(--ink-400); font-weight:400; }

.cf-detail-table-muted { color:var(--ink-500); }
.cf-detail-table-empty { color:var(--ink-400); font-style:italic; text-align:center; }

/* =========================================================
   12. Details.cshtml — 右側欄
   ========================================================= */
.cf-detail-sidebar { position:sticky; top:24px; display:flex; flex-direction:column; gap:16px; }

.cf-detail-total-card { overflow:hidden; }
.cf-detail-total-card__head {
  background:var(--forest-700); color:#fff; padding:14px 18px;
  font-size: 14px; letter-spacing:.06em; display:flex; align-items:center; gap:8px;
}
.cf-detail-total-card__body { padding:22px 22px 18px; }
.cf-detail-total-card__label { font-size: 14px; color:var(--ink-500); letter-spacing:.06em; }
.cf-detail-total-card__value-row { display:flex; align-items:baseline; gap:6px; margin:6px 0 4px; }
.cf-detail-total-card__value { font-size:42px; font-weight:600; color:var(--forest-800); letter-spacing:-0.01em; line-height:1; }
.cf-detail-total-card__unit { font-size: 14px; color:var(--ink-500); }
.cf-detail-total-card__lower { font-size: 14px; color:var(--forest-700); margin-top:6px; }
.cf-detail-total-card__divider { height:1px; background:var(--cream-200); margin:16px 0; }
.cf-detail-total-card__grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cf-detail-total-card__grid-label { font-size: 14px; color:var(--ink-500); }
.cf-detail-total-card__grid-value { font-weight:600; color:var(--ink-800); margin-top:2px; }
.cf-detail-total-card__grid-unit { font-size: 14px; color:var(--ink-400); font-weight:400; }

.cf-detail-people-card { padding:18px 20px; }
.cf-detail-people-card__label { font-size: 14px; color:var(--ink-500); letter-spacing:.06em; margin-bottom:14px; }
.cf-detail-people-card__row { display:flex; align-items:center; justify-content:space-around; }
.cf-detail-people-card__item { text-align:center; }
.cf-detail-people-card__value { font-size:26px; font-weight:600; color:var(--forest-800); }
.cf-detail-people-card__sub { font-size: 14px; color:var(--ink-500); }
.cf-detail-people-card__divider { width:1px; height:28px; background:var(--cream-200); }

.cf-detail-tags-card { padding:18px 20px; }
.cf-detail-tags-card__label { font-size: 14px; color:var(--ink-500); letter-spacing:.06em; margin-bottom:10px; }
.cf-detail-tags-card__list { display:flex; flex-wrap:wrap; gap:6px; }

.cf-detail-meta-card { padding:18px 20px; }
.cf-detail-meta-card__label { font-size: 14px; color:var(--ink-500); letter-spacing:.06em; margin-bottom:12px; }
.cf-detail-meta-list { margin:0; font-size: 14px; }
.cf-detail-meta-list__row {
  display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--cream-200);
}
.cf-detail-meta-list__row--last { border-bottom: none; }
.cf-detail-meta-list__dt { color:var(--ink-500); font-weight:400; }
.cf-detail-meta-list__dd { margin:0; color:var(--ink-800); }
.cf-detail-meta-list__dd--status { color:var(--forest-700); font-weight:500; }

/* =========================================================
   13. Details.cshtml — Footer
   ========================================================= */
.cf-detail-footer {
  background:var(--forest-900); color:rgba(255,255,255,0.7); padding:36px 48px 32px;
  font-size: 14px; line-height:1.7;
}
.cf-detail-footer__row { display:flex; align-items:flex-start; gap:48px; flex-wrap:wrap; }
.cf-detail-footer__logo { height:36px; background:#fff; padding:4px 10px; border-radius:6px; }
.cf-detail-footer__desc { margin-top:14px; max-width:320px; opacity:.7; line-height:1.7; }
.cf-detail-footer__links { display:flex; gap:48px; margin-left:auto; flex-wrap:wrap; }
.cf-detail-footer__col-title { color:#fff; font-weight:600; margin-bottom:8px; }
.cf-detail-footer__link { display:block; padding:3px 0; color:inherit; text-decoration:none; }
.cf-detail-footer__bottom { margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.1); opacity:.5; }

/* =========================================================
   14. Details.cshtml — RWD（統一放在檔案最後，
   確保所有 selector 的桌機版基礎樣式都已宣告在前面，
   才不會被後面章節（8~13）較晚出現的無條件規則蓋掉）
   ========================================================= */
@media (max-width: 1279px) {
  .cf-detail-hero-content { left: 24px !important; right: 24px !important; }
  .cf-detail-body  { padding-left: 24px; padding-right: 24px; }
  .cf-action-strip { padding-left: 24px !important; padding-right: 24px !important; }
  .cf-detail-footer { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 991px) {
  .cf-detail-body      { grid-template-columns: 1fr; }
  .cf-detail-hero      { height: 280px !important; }
  .cf-detail-sidebar   { position: static; }
  .cf-detail-overview  { grid-template-columns: 1fr; }
  .cf-detail-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .cf-detail-body         { padding: 20px 16px 48px; }
  .cf-detail-hero         { height: 220px !important; }
  .cf-detail-hero-content { bottom: 20px !important; }
  .cf-detail-hero__title  { font-size: 28px; }
  .cf-detail-hero__desc   { font-size: 14px; white-space: normal; max-width: none; }
  .cf-detail-hero__meta   { gap: 14px; margin-top: 14px; }

  .cf-action-strip           { padding: 12px 16px !important; }
  .cf-action-strip__actions  { width: 100%; }

  .cf-detail-stat-grid   { grid-template-columns: repeat(2, 1fr); padding: 16px; }
  .cf-detail-overview    { padding: 20px; gap: 20px; }
  .cf-detail-donut       { width: 160px; height: 160px; }

  .cf-module-header           { flex-wrap: wrap; row-gap: 8px; }
  .cf-detail-module-subtotal  { text-align: left; margin-left: 48px; }

  /* 明細表 → 卡片式（每筆資料一張小卡，欄位「上標籤、下內容」直式排列，
     因名稱／說明欄位常有長文字，左右並排易擠壓換行，改直式較好閱讀） */
  .cf-detail-modules .cf-table thead { display: none; }
  .cf-detail-modules .cf-table,
  .cf-detail-modules .cf-table tbody,
  .cf-detail-modules .cf-table tr,
  .cf-detail-modules .cf-table td { display: block; width: 100%; }
  .cf-detail-modules .cf-table { padding: 12px 14px 2px; }
  .cf-detail-modules .cf-table tr {
    padding: 12px 14px; margin-bottom: 10px;
    background: var(--cream-50);
    border: 1px solid var(--cream-200); border-radius: 8px;
  }
  .cf-detail-modules .cf-table tbody tr:last-child { margin-bottom: 0; }
  .cf-detail-modules .cf-table td {
    padding: 5px 0; border-bottom: none; text-align: left;
  }
  .cf-detail-modules .cf-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 14px; font-