/* 知否知否 · 页头图 / 插图画廊样式（配合 js/zhead.js）
   颜色全部用继承色和半透明，所以在各个板块的主题下都能用。 */
.zf { margin: 14px 0; padding: 0; }
.zf-img { display: block; width: 100%; height: auto; border-radius: 6px; background: rgba(128, 128, 128, 0.12); }
.zf-cap { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 6px; font-size: 12px; line-height: 1.6; opacity: 0.78; }
.zf-ai { font-size: 11px; opacity: 0.85; border: 1px solid currentColor; border-radius: 3px; padding: 0 5px; line-height: 1.5; }

.zf-banner { max-width: 900px; margin: 16px auto; }

.zf-sec { margin: 20px 0; }
.zf-sec-title { font-size: 18px; margin: 0 0 6px; }
.zf-sec-note { font-size: 13px; opacity: 0.75; margin: 0 0 10px; line-height: 1.7; }
.zf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zf-grid .zf { margin: 0; }

/* 名著：最上面一张大图（.zf-hero），下面 2×2 四张小图（.zf-scenes）；手机上也是同样排法 */
.zf-book { display: block; margin: 12px 0 18px; }
.zf-hero { margin: 0 0 10px; }
.zf-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.zf-scenes .zf { margin: 0; }

/* 服饰图鉴：图下面先是“朝代 · 名称”，再是看点，最后是“AI 生成插画”标记 */
.zf-era { margin: 22px 0 8px; padding-left: 8px; border-left: 3px solid currentColor; line-height: 1.3; }
.zf-fushi .zf-cap { flex-direction: column; align-items: flex-start; gap: 2px; opacity: 1; }
.zf-fushi .zf-cap strong { font-size: 14px; }
.zf-fushi .zf-cap .zf-txt { opacity: 0.82; }
.zf-fushi .zf-cap .zf-ai { margin-top: 2px; }

@media (max-width: 720px) {
  .zf-grid { grid-template-columns: 1fr; }
  .zf-scenes { gap: 8px; }
  .zf-scenes .zf-cap { font-size: 11px; }
}