.wf-page { background: var(--cream); --wf-blue: #5B8AA0; --wf-line: #E8E3DC; }
.wf-page [hidden] { display: none !important; }
.scroll-content.wf-page { padding-bottom: 96px; }
.wf-page .wf-head {
  background: linear-gradient(175deg, #37536B 0%, var(--wf-blue) 100%);
  color: #fff; padding: 14px 20px 28px; position: relative;
}
.wf-page .wf-back {
  display: inline-flex; align-items: center; gap: 4px; color: rgba(255,255,255,.88);
  font-size: 13px; margin-bottom: 18px;
}
.wf-page .wf-back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wf-page .wf-head h1 { font-family: 'Noto Serif SC', serif; font-size: 23px; font-weight: 700; letter-spacing: 2px; }
.wf-page .wf-head p { margin-top: 8px; font-size: 12px; letter-spacing: 1px; opacity: .82; }
.wf-page .wf-sec { padding: 22px 20px 0; }
.wf-page .wf-title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 16px; font-weight: 600; color: var(--text-primary);
}
.wf-page .wf-title::before { content: ''; width: 4px; height: 16px; border-radius: 2px; background: var(--wf-blue); }
.wf-page .wf-title small { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--text-tertiary); }
.wf-page .wf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; }
.wf-page .wf-svc { text-align: center; color: inherit; }
.wf-page .wf-ic {
  width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.wf-page .wf-ic svg { width: 22px; height: 22px; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wf-page .wf-ic.blue { background: #E4EEF3; }
.wf-page .wf-ic.blue svg { stroke: #5B8AA0; }
.wf-page .wf-ic.pine { background: var(--pine-bg); }
.wf-page .wf-ic.pine svg { stroke: var(--pine); }
.wf-page .wf-ic.gold { background: rgba(196,162,101,.16); }
.wf-page .wf-ic.gold svg { stroke: #A68445; }
.wf-page .wf-ic.orange { background: rgba(240,124,60,.12); }
.wf-page .wf-ic.orange svg { stroke: #D46A2E; }
.wf-page .wf-svc b { display: block; font-size: 12px; font-weight: 500; }
.wf-page .wf-svc span { display: block; margin-top: 2px; font-size: 10px; color: var(--text-tertiary); }
.wf-page .wf-card { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow); overflow: hidden; }
.wf-page .wf-card-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  background: linear-gradient(90deg, var(--cream), #fff);
}
.wf-page .wf-badge { font-size: 11px; font-weight: 600; color: #fff; padding: 3px 10px; border-radius: 4px; letter-spacing: 1px; }
.wf-page .wf-badge.blue { background: var(--wf-blue); }
.wf-page .wf-badge.pine { background: var(--pine); }
.wf-page .wf-card-head strong { font-size: 14px; }
.wf-page .wf-more { margin-left: auto; font-size: 11px; color: var(--text-tertiary); }
.wf-page .wf-row { display: flex; gap: 10px; overflow-x: auto; padding: 12px 14px 14px; }
.wf-page .wf-row::-webkit-scrollbar { display: none; }
.wf-page .wf-g { width: 104px; flex-shrink: 0; color: inherit; }
.wf-page .wf-pic {
  width: 104px; height: 104px; border-radius: var(--radius-sm); position: relative; overflow: hidden; display: block;
}
.wf-page .wf-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-page .wf-pic svg { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); stroke: rgba(255,255,255,.85); fill: none; stroke-width: 1.4; }
.wf-page .wf-g em {
  display: block; margin-top: 7px; font-style: normal; font-size: 12px; line-height: 1.4; height: 34px; overflow: hidden; color: var(--text-primary);
}
.wf-page .wf-g .price { margin-top: 3px; font-size: 13px; font-weight: 700; color: var(--pine); }
.wf-page .wf-empty { padding: 8px 16px 16px; font-size: 13px; color: var(--text-tertiary); }
.wf-page.is-list .wf-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wf-page.is-list .wf-g, .wf-page.is-list .wf-pic { width: 100%; }
.wf-page.is-list .wf-pic { height: auto; aspect-ratio: 1; }
.wf-page .wf-info { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow); }
.wf-page .wf-rowline {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; font-size: 13px; color: inherit;
}
.wf-page .wf-rowline + .wf-rowline { border-top: 1px solid rgba(0,0,0,.04); }
.wf-page .wf-rowline span { color: var(--text-tertiary); flex-shrink: 0; }
.wf-page .wf-rowline b { font-weight: 500; text-align: right; color: var(--wf-blue); }
.wf-page .wf-note {
  margin: 20px 20px 8px; text-align: center; font-size: 11px; line-height: 1.8; color: var(--text-tertiary);
  background: var(--cream-dark); border-radius: var(--radius-sm); padding: 10px 14px;
}