/* ═══════════════════════════════════════════════════════════════════════════
   骨架屏（2026-10-10 先生点的名）：四个页面切换时先摆骨架，数据到了平滑替换。
   三条要求，逐条对上：
     ① **与真实卡片同尺寸同布局** —— 下面每个数字都是量出来的，不是估的。
        量法：无头 Edge 390×844（dsf 2，mobile），四页各 load 完再读 getBoundingClientRect：
          · 广场 `.post`           390 × **605**（.post .avatar 42×42；.p-grid 两列各 177、gap 4 → 方图 358×358）
          · 相册 `.month .grid .cell` 177 × **133**（= 4:3 ✓）、两列 gap **12**、`.month h3` 高 42
          · 我的 `.pd-cover` **240**、`.pd-avatar` **84** 圆、`.pd-stats` **57**（5 列 gap 4）、
                 `.pd-tabs` **51**、`.pd-grid` 三列 gap **2**、`.pd-tile` 129 × **172**（= 3:4）
          · 地图 `#wl-sub` 117 × 18；`.wl-notes` 默认 hidden（所以地图那页的骨架照 **#wl-polaroid** 的盒子来）
     ② **轻微明暗呼吸** —— 复用站里已有的 `.skel::after`（ui.css:670 起 `skelBreath`，
        wall.css:1135 再按格子次序错开），只走 opacity，不烧显卡；`prefers-reduced-motion` 下停。
        这里**不另写一套呼吸**，免得两条动画打架。
     ③ **数据到达后平滑替换** —— `.skel-out` 淡出 200ms ＋ `.skel-in > *` 淡入上浮 260ms，见 skeleton.js。
   放哪：本文件只负责"骨架自己长什么样"；挂载与替换在 skeleton.js；页面只加 data-skeleton 属性。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 骨架层与替换（三页共用） ───────────────────────────────────────────── */
.skel-wrap { display: block; }
.skel-wrap.skel-out {
  opacity: 0; transition: opacity 200ms linear; pointer-events: none;
}
/* 真内容淡入：只在替换的那一下挂 .skel-in，500ms 后摘掉（见 skeleton.js） */
.skel-in > :not(.skel-wrap) { animation: skelIn 260ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes skelIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .skel-wrap.skel-out { transition: none; }
  .skel-in > :not(.skel-wrap) { animation: none; }
}

/* 骨架块里的通用零件（尺寸照实测） */
.skel-av { width: 42px; height: 42px; border-radius: 999px !important; display: inline-block; flex: 0 0 auto; }
.skel-av-lg { width: 84px; height: 84px; border-radius: 50% !important; display: inline-block; flex: 0 0 auto; }
.skel-l { height: 13px; display: inline-block; }
.skel-l.thin { height: 9px; }
.skel-sq { display: block; width: 100%; aspect-ratio: 1 / 1; }
.sk-row { display: flex; align-items: center; gap: 12px; }
.sk-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

/* ── ① 广场：帖子卡 ───────────────────────────────────────────────────────
   真卡片（390 宽、带 2×2 图）实测 605 高：22 顶距 ＋ 42 头像行 ＋ 正文行 ＋ 358 方图 ＋ 动作行。
   外框去边（真卡片 `border: 0`），里面的块保留纸线 —— 一眼是"卡片正在成形"。 */
.skel-post {
  margin: 0 0 10px; padding: 22px 24px 0; height: 605px;
  border: 0 !important; background: var(--wl-paper) !important;
}
.skel-post .skel-sq { margin: 18px 0 0; }
.skel-post .sk-foot { display: flex; gap: 18px; margin-top: 18px; }
@media (max-width: 520px) {
  /* 窄屏真卡片是 18/16 的内距（square-feed.css:117），骨架跟着收 */
  .skel-post { padding: 18px 16px 0; }
}

/* ── ② 相册：月份标题 ＋ 九宫格 ───────────────────────────────────────────
   骨架直接套用真的 `.month` / `.grid` 类，于是列数、gap、格子比例**自动**与真相一致
   （实测两列各 177、gap 12、格子 4:3）。标题块照 `.month h3` 的 42 高。 */
.sk-month { margin: 0 0 18px; }
.sk-month .sk-h3 { height: 42px; display: flex; align-items: center; margin: 0; }
.sk-month .grid { display: grid; }

/* ── ③ 我的：封面 ＋ 头像 ＋ 数据行 ＋ 标签条 ＋ 方格 ───────────────────── */
.sk-pd { position: relative; }
.sk-cover { display: block; height: 240px; }
.sk-hero { display: flex; align-items: flex-end; gap: 14px; margin: -96px 16px 0; position: relative; }
.sk-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 4px; margin: 14px 16px 0;
}
.sk-stats > i { height: 57px; }
.sk-tabs { display: flex; align-items: center; gap: 10px; height: 51px; margin: 22px 0 0; padding: 0 16px; border-top: 1px solid var(--wl-line); border-bottom: 1px solid var(--wl-line); }
.sk-tabs > i { height: 15px; width: 88px; }
.sk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 2px; }
.sk-grid > i { aspect-ratio: 3 / 4; }          /* 实测 129 × 172 */
@media (min-width: 720px) { .sk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sk-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sk-cover { height: 240px; } }

/* ── ④ 地图页：**不做**（先生 2026-10-10 一句话："地图页不用做"）────────────
   那页自己就有开场动画打头（intro.js：正在准备画面… → 揭开），再叠一层骨架是两套加载态打架；
   所以 `map.html` 既不引 skeleton.css/js，也没有 data-skeleton。此处留个指路条，
   免得以后有人看见"三页有、这页没有"又来补上。 */