/* 首頁下半部「內容媒體區」（src/home-feed.js，pf- 開頭；2026-10-12）
   沿用 boss.css 的品牌色（深藍、金黃、米白），下半部改成成熟內容網站感：白底、淡陰影、圓角 14px、16:9 圖片 */
.pf-sec{padding:64px 0}
.bx-home.is-zoned>section.pf-sec,.bx-home.is-zoned>.pf-sec{background:#fff!important;padding:64px 0}
.bx-home.is-zoned>section.pf-foryou{background:var(--bx-cream)!important}
.bx-home.is-zoned>section.pf-cases{background:var(--bx-cream)!important}
.bx-home.is-zoned>.pf-main{border-top:1px solid var(--bx-line)}
.pf-sec h2{margin:0;color:var(--bx-navy);font-size:clamp(24px,2.4vw,32px);font-weight:900;line-height:1.3;letter-spacing:.01em}
.pf-head{margin:0 0 22px}
.pf-head p{margin:8px 0 0;color:var(--bx-ink-2);font-size:16px;line-height:1.7}
.pf-head.is-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.pf-empty{margin:0;padding:22px;border:1px dashed var(--bx-line);border-radius:14px;color:var(--bx-muted);font-size:15px;background:#fff}
.pf-empty a{color:var(--bx-navy);font-weight:800}

/* 頁籤（路線、分類、排行）：手機可水平滑動 */
.pf-tabs,.pf-filters,.pf-mini-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 0 20px;padding:2px}
.pf-tabs::-webkit-scrollbar,.pf-filters::-webkit-scrollbar,.pf-mini-tabs::-webkit-scrollbar{display:none}
.pf-tabs button,.pf-filters button,.pf-mini-tabs button{flex:0 0 auto;min-height:42px;padding:8px 18px;border-radius:999px;border:1px solid var(--bx-line);background:#fff;color:var(--bx-ink-2);font:inherit;font-size:15px;font-weight:800;cursor:pointer;white-space:nowrap}
.pf-tabs button[aria-selected="true"],.pf-filters button[aria-selected="true"]{background:var(--bx-navy);border-color:var(--bx-navy);color:#fff}
.pf-tabs button:focus-visible,.pf-filters button:focus-visible,.pf-mini-tabs button:focus-visible,.pf-sec a:focus-visible{outline:3px solid var(--bx-yellow);outline-offset:2px}
.pf-why{margin:-8px 0 16px;font-size:14px;color:var(--bx-gold-ink);font-weight:700}

/* 共用：縮圖、標籤、meta */
.pf-thumb{display:block;position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--bx-cream-2)}
.pf-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-thumb.is-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--bx-navy);background:linear-gradient(0deg,var(--bx-cream-2),var(--bx-cream))}
.pf-thumb.is-blank .bx-ic{width:30px;height:30px;opacity:.75}
.pf-thumb.is-blank b{font-size:13px;font-weight:800;letter-spacing:.06em;opacity:.75}
.pf-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pf-cat{font-size:13px;font-weight:900;color:var(--bx-gold-ink);letter-spacing:.04em}
.pf-route,.pf-access{display:inline-flex;align-items:center;min-height:24px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:800;background:#EEF2F7;color:var(--bx-navy)}
.pf-route.r-shopee{background:#FBEDE6;color:#9A4A2E}
.pf-route.r-solo{background:#EAF1EC;color:#3F6550}
.pf-access{background:transparent;border:1px solid var(--bx-line);color:var(--bx-muted)}
.pf-access.is-free{color:#3F6550;border-color:#CFE0D4}
.pf-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:13px;color:var(--bx-muted)}
.pf-sum{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--bx-ink-2);font-size:15px;line-height:1.7}

/* 為你推薦：1 大 2 小（每個頁籤最多 8 張候選，只露 3 張） */
.pf-focus{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:auto auto;gap:20px}
.pf-focus[hidden]{display:none}
.pf-focus>.pf-focus-card:nth-child(n+4){display:none}
.pf-focus>.pf-empty{grid-column:1/-1}
.pf-focus-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bx-line);border-radius:16px;overflow:hidden;color:inherit;text-decoration:none;box-shadow:0 1px 2px rgba(22,58,99,.04);transition:box-shadow .15s,transform .15s}
.pf-focus-card:hover{box-shadow:0 6px 18px rgba(22,58,99,.08);transform:translateY(-2px)}
.pf-focus-card .pf-thumb{border-radius:0}
.pf-focus-card .pf-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.pf-focus-card strong{color:var(--bx-ink);font-size:18px;font-weight:900;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pf-focus-card .pf-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:4px}
.pf-go{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:900;color:var(--bx-navy);white-space:nowrap}
.pf-go .bx-ic{width:16px;height:16px}
.pf-focus-card:first-child{grid-row:1/3}
.pf-focus-card:first-child strong{font-size:clamp(20px,1.9vw,26px)}
.pf-focus-card:first-child .pf-body{padding:20px 24px 24px;gap:10px}
.pf-focus-card:not(:first-child){flex-direction:row}
.pf-focus-card:not(:first-child) .pf-thumb{flex:0 0 42%;aspect-ratio:auto;min-height:100%}
.pf-focus-card:not(:first-child) .pf-sum{-webkit-line-clamp:2;font-size:14px}

/* 主內容＋右側欄 */
.pf-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:28px 40px;align-items:start}
.pf-ad.is-banner{grid-column:1/-1}
.pf-grid>*,.pf-list-col,.pf-list{min-width:0;max-width:100%}
.pf-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
.pf-list{display:flex;flex-direction:column}
.pf-row{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--bx-line);color:inherit;text-decoration:none}
.pf-row[hidden]{display:none}
.pf-row:first-child{padding-top:4px}
.pf-row .pf-body{display:flex;flex-direction:column;gap:7px;min-width:0}
.pf-row strong{color:var(--bx-ink);font-size:18px;font-weight:900;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pf-row:hover strong{color:var(--bx-navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* 側欄方塊 */
.pf-box{background:#fff;border:1px solid var(--bx-line);border-radius:16px;padding:20px}
.pf-box-h{font-size:18px!important;margin:0 0 12px!important}
.pf-mini-tabs{margin:0 0 6px;gap:4px}
.pf-mini-tabs button{min-height:36px;padding:6px 12px;font-size:14px;border:0;background:transparent}
.pf-mini-tabs button[aria-selected="true"]{background:var(--bx-cream);color:var(--bx-navy)}
.pf-rank-list{list-style:none;margin:0;padding:0}
.pf-rank-list li+li{border-top:1px solid var(--bx-line)}
.pf-rank-list a{display:flex;gap:14px;align-items:flex-start;padding:12px 0;color:var(--bx-ink);text-decoration:none;font-weight:800;font-size:15px;line-height:1.5}
.pf-rank-list a:hover span{color:var(--bx-navy);text-decoration:underline}
.pf-num{flex:0 0 auto;font-family:var(--bx-latin);font-size:24px;line-height:1;color:var(--bx-yellow);min-width:34px}
.pf-rank-list small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:var(--bx-muted)}
.pf-rank .pf-empty{padding:14px;font-size:14px}
.pf-sub p{margin:0 0 14px;color:var(--bx-ink-2);font-size:15px;line-height:1.7}
.pf-sub .bx-btn{width:100%;box-shadow:none}

/* 廣告：一律有標示，跟文章外觀分開 */
.pf-ad{position:relative;display:flex;align-items:center;gap:20px;border-radius:16px;padding:22px 24px;background:#fff;border:1px solid var(--bx-line)}
.pf-ad-label{position:absolute;top:10px;right:14px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--bx-muted)}
.pf-ad-copy{flex:1;min-width:0}
.pf-ad-k{margin:0 0 4px;font-size:13px;font-weight:900;color:var(--bx-gold-ink);letter-spacing:.06em}
.pf-ad h3{margin:0 0 6px;color:var(--bx-navy);font-size:20px;font-weight:900;line-height:1.4}
.pf-ad p{margin:0;color:var(--bx-ink-2);font-size:15px;line-height:1.7}
.pf-ad .bx-btn{flex:0 0 auto;box-shadow:none}
.pf-ad.is-banner{background:var(--bx-navy);border-color:var(--bx-navy);padding:28px 32px}
.pf-ad.is-banner .pf-ad-label,.pf-ad.is-banner p{color:rgba(255,255,255,.78)}
.pf-ad.is-banner h3{color:#fff;font-size:clamp(20px,2vw,26px)}
.pf-ad.is-banner .pf-ad-k{color:var(--bx-yellow)}
.pf-ad.is-banner .bx-btn-yellow{box-shadow:0 4px 0 #C28A22}
.pf-ad.is-side,.pf-ad.is-native{flex-direction:column;align-items:stretch;background:var(--bx-cream)}
.pf-ad.is-native{margin:16px 0;flex-direction:row;align-items:center}
.pf-ad.is-native[hidden]{display:none}

/* 同學實戰 */
.pf-case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pf-case{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--bx-line);border-radius:16px;padding:20px;color:inherit;text-decoration:none;transition:box-shadow .15s}
.pf-case:hover{box-shadow:0 6px 18px rgba(22,58,99,.08)}
.pf-case strong{color:var(--bx-ink);font-size:18px;font-weight:900;line-height:1.45}
.pf-case dl{margin:0;display:flex;flex-direction:column;gap:8px}
.pf-case dl div{display:grid;grid-template-columns:4.6em 1fr;gap:8px}
.pf-case dt{font-size:13px;font-weight:900;color:var(--bx-gold-ink)}
.pf-case dd{margin:0;font-size:14px;line-height:1.6;color:var(--bx-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pf-case-who{display:flex;gap:8px;align-items:baseline;margin-top:auto;padding-top:10px;border-top:1px solid var(--bx-line)}
.pf-case-who b{color:var(--bx-navy);font-size:15px}
.pf-case-who small{font-size:12px;color:var(--bx-muted);padding:1px 8px;border-radius:999px;background:var(--bx-cream)}

/* 投稿 CTA */
.pf-share-card{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 40px;align-items:center;padding:36px 40px;border-radius:20px;background:var(--bx-cream);border:1px solid var(--bx-line)}
.pf-share-card p{margin:10px 0 0;color:var(--bx-ink-2);font-size:16px;line-height:1.7}
.pf-share-ways{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pf-share-ways a{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 16px;border-radius:12px;background:#fff;border:1px solid var(--bx-line);color:var(--bx-ink);font-weight:800;text-decoration:none}
.pf-share-ways a:hover{border-color:var(--bx-navy);color:var(--bx-navy)}
.pf-share-ways .bx-ic{width:20px;height:20px;color:var(--bx-gold-ink)}
.pf-share-card>.bx-btn{grid-column:1/-1;justify-self:start}

/* 平板 */
@media (max-width:1080px){
  .pf-grid{grid-template-columns:minmax(0,1fr) 300px;gap:24px 28px}
  .pf-row{grid-template-columns:200px minmax(0,1fr)}
}
/* 手機：拿掉右側欄，側欄內容拆成獨立區塊插進文章之間 */
@media (max-width:760px){
  .pf-sec,.bx-home.is-zoned>section.pf-sec,.bx-home.is-zoned>.pf-sec{padding:40px 0}
  .pf-head.is-row{align-items:flex-start;flex-direction:column;gap:6px}
  .pf-focus{grid-template-columns:1fr;gap:14px}
  .pf-focus-card:first-child{grid-row:auto}
  .pf-focus-card:not(:first-child){flex-direction:row}
  .pf-focus-card:not(:first-child) .pf-thumb{flex:0 0 36%}
  .pf-focus-card:not(:first-child) .pf-body{padding:12px 14px}
  .pf-focus-card:not(:first-child) strong{font-size:16px}
  .pf-focus-card:not(:first-child) .pf-sum,.pf-focus-card:not(:first-child) .pf-meta{display:none}
  .pf-grid{display:flex;flex-direction:column;align-items:stretch;gap:24px}
  .pf-side{display:contents}
  .pf-rank{order:1}.pf-list-col{order:2}.pf-ad.is-banner{order:3}.pf-ad.is-side{order:4}.pf-sub{order:5}
  .pf-ad,.pf-ad.is-native{flex-direction:column;align-items:stretch;padding:22px 18px}
  .pf-ad.is-banner{padding:26px 20px}
  .pf-ad .bx-btn{width:100%}
  .pf-row{grid-template-columns:34% minmax(0,1fr);gap:12px;padding:16px 0}
  .pf-row strong{font-size:16px;-webkit-line-clamp:3}
  .pf-row .pf-sum{display:none}
  .pf-row .pf-access{display:none}
  .pf-case-grid{grid-template-columns:1fr;gap:14px}
  .pf-share-card{grid-template-columns:1fr;padding:26px 20px}
  .pf-share-card>.bx-btn{justify-self:stretch;white-space:normal}
}
@media (prefers-reduced-motion:reduce){.pf-focus-card,.pf-case{transition:none}.pf-focus-card:hover{transform:none}}