@charset "UTF-8";
/* ==========================================================================
微语 · 明信片皮肤（配合 postcard 主题）
⛔ 只在 Plugin::skin() === 'postcard' 时加载；moments.css（经典皮肤）原样保留，
两套互不覆盖、互不影响 —— 不要把经典规则抄进来改，那会造成权重打架。
⛔ 样式一律以 .mm-wrap 前缀限定，避免任何宿主污染。
⛔ 不要给装饰性图片用 ![]()
（宿主会抽首图当封面），本皮肤头像一律 background-image。
========================================================================== */
.mm-skin-postcard{
--paper:#FBFAF6; --ink:#16201C; --ink-2:#545B58; --ink-3:#9AA39D;
--slate:#5E6E68; --black:#10110F; --line:rgba(22,32,28,.14);
--mint:#16B894; --mint-deep:color-mix(in srgb,#16B894 78%,#06231c); --mint-soft:color-mix(in srgb,#16B894 13%,#fff);
--font:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
background-color:var(--paper);
background-image:radial-gradient(var(--line) 1px,transparent 1px);
background-size:22px 22px;
color:var(--ink); font-family:var(--font); line-height:1.75;
-webkit-font-smoothing:antialiased;
}
.mm-skin-postcard *{box-sizing:border-box}
/* ---------- 壳：与首页同宽 880 ---------- */
.mm-skin-postcard .mm-wrap{max-width:880px;margin:0 auto;padding:0 26px 90px;position:relative}
/* ---------- 页头：明信片皮肤专属（kicker + 末字强调 + 小狗） ---------- */
/* ⛔ 与经典皮肤的封面刊头完全分开：标记在 Renderer 按 $pcSkin 分支各自输出，
样式在此独立维护 —— 两套互不共用、互不影响。 */
.mm-skin-postcard .mm-card{background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
/* 刊头：kicker + 末字强调标题 + 说明 + 虚线分隔（与主题首页刊头同一套语言） */
.mm-skin-postcard .mm-cover{position:relative;padding:56px 0 0;margin-bottom:6px;
background-image:none!important;min-height:0} /* 不用头图：点格纸更干净 */
.mm-skin-postcard .mm-cover-inner{padding-bottom:22px;border-bottom:1.5px dashed var(--line)}
.mm-skin-postcard .mm-kicker{font-size:12.5px;letter-spacing:.3em;color:var(--mint-deep);
text-transform:uppercase;margin-bottom:14px}
.mm-skin-postcard .mm-cover-inner h1{font-size:clamp(30px,6vw,52px);font-weight:800;letter-spacing:-.02em;
line-height:1.06;position:relative;z-index:1}
.mm-skin-postcard .mm-cover-inner h1 em{font-style:normal;color:var(--mint);position:relative}
.mm-skin-postcard .mm-cover-inner h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.08em;
height:.18em;background:var(--mint-soft);z-index:-1}
.mm-skin-postcard .mm-cover-inner p{margin-top:12px;font-size:15px;color:var(--ink-2)}
/* 右上角小狗：与主题首页 shell 的 .emblem 同一位置、同一形象（用户定案：和主页保持一致） */
.mm-skin-postcard .mm-pet{position:absolute;right:0;top:22px;z-index:7;cursor:pointer;
transition:transform .2s;display:block}
.mm-skin-postcard .mm-pet:hover{transform:rotate(-5deg) scale(1.06)}
.mm-skin-postcard .mm-pet svg{display:block}
.mm-skin-postcard .mm-cover-name{display:none} /* 旧版「👋 名字」元素不再输出，防御性隐藏 */
/* 小狗巡游 + 爪印（与主题同款视觉，类名加 mm- 前缀避免与宿主主题撞车） */
.mm-skin-postcard .mm-pet-run{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;
will-change:transform;transition:opacity .28s}
.mm-skin-postcard .mm-pet-run.land{opacity:0}
.mm-skin-postcard .mm-pet-run .bob{animation:mmPetBob .3s ease-in-out infinite}
@keyframes mmPetBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.mm-skin-postcard .mm-pet-run .dog .leg,
.mm-skin-postcard .mm-pet-run .dog .tail,
.mm-skin-postcard .mm-pet-run .dog .ear{transform-box:fill-box}
.mm-skin-postcard .mm-pet-run .dog .leg{transform-origin:50% 0;animation:mmPetSwing .3s ease-in-out infinite}
.mm-skin-postcard .mm-pet-run .dog .leg-b,
.mm-skin-postcard .mm-pet-run .dog .leg-c{animation-delay:-.15s}
@keyframes mmPetSwing{0%,100%{transform:rotate(26deg)}50%{transform:rotate(-26deg)}}
.mm-skin-postcard .mm-pet-run .dog .tail{transform-origin:100% 100%;animation:mmPetWag .16s ease-in-out infinite alternate}
@keyframes mmPetWag{from{transform:rotate(-10deg)}to{transform:rotate(14deg)}}
.mm-skin-postcard .mm-pet-paw{position:fixed;z-index:9998;pointer-events:none;opacity:.5;transition:opacity 1.1s ease}
.mm-skin-postcard .mm-pet-paw.fade{opacity:0}
.mm-skin-postcard .mm-wave{display:none} /* 去掉彩色波浪，保持纸感 */
/* ---------- 发布器（薄荷便利贴） ---------- */
.mm-skin-postcard .mm-composer{position:relative;margin:26px 0 34px;max-width:560px;
background:var(--mint-soft);border:1px solid color-mix(in srgb,var(--mint) 30%,transparent);
border-radius:14px;padding:16px 18px;box-shadow:0 10px 24px -16px rgba(22,40,34,.3)}
.mm-skin-postcard .mm-composer::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
width:12px;height:12px;border-radius:50%;background:var(--mint);box-shadow:0 1px 3px rgba(14,140,112,.5)}
.mm-skin-postcard .mm-composer textarea{width:100%;border:0;outline:0;background:transparent;resize:vertical;
font-family:inherit;font-size:15px;line-height:1.7;color:var(--ink);min-height:54px}
.mm-skin-postcard .mm-composer-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.mm-skin-postcard .mm-composer-right{display:flex;gap:8px;align-items:center}
.mm-skin-postcard .mm-btn-img,.mm-skin-postcard .mm-btn-loc{background:none;border:1px solid var(--line);
color:var(--ink-2);font-family:inherit;font-size:12.5px;padding:6px 12px;border-radius:999px;cursor:pointer}
.mm-skin-postcard .mm-btn-send{background:var(--black);color:#fff;border:0;padding:8px 20px;border-radius:999px;
font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.mm-skin-postcard .mm-hint{font-size:12px;color:var(--mint-deep);opacity:.75}
/* 发布器缩略图：⛔ 只命中 .th 本身（原先写 `span` 会连带影响内层元素），
× 是内层 ，必须自己定位成角标 —— 否则它就是一个没样式的斜体字符，糊在图上像「变形」 */
.mm-skin-postcard .mm-thumbs{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.mm-skin-postcard .mm-thumbs .th{position:relative;display:block;width:64px;height:64px;border-radius:8px;
background-size:cover;background-position:center;border:1px solid var(--line)}
.mm-skin-postcard .mm-thumbs .th i{position:absolute;top:-6px;right:-6px;width:18px;height:18px;
border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-size:12px;line-height:18px;
text-align:center;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);user-select:none}
.mm-skin-postcard .mm-thumbs .th i:hover{background:#000}
/* ⛔ 必须显式处理 [hidden]：本行要 display:flex，特异性高于 UA 的 [hidden]{display:none}
→ 不加这一句，「点位置按钮才显示输入框」直接失效、输入框永远露在外面（用户截图里的乱象就是它） */
.mm-skin-postcard [hidden]{display:none!important}
.mm-skin-postcard .mm-loc-row{gap:8px;margin-top:12px;align-items:center}
.mm-skin-postcard .mm-loc-row:not([hidden]){display:flex}
.mm-skin-postcard .mm-loc-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;
padding:9px 16px;font-family:inherit;font-size:13.5px;color:var(--ink);background:rgba(255,255,255,.85);outline:none}
.mm-skin-postcard .mm-loc-row input:focus{border-color:var(--mint);background:#fff}
/* 高德 POI 联想下拉（前端与后台同一套外观；前台补挂见 TODO） */
.mm-skin-postcard .mmx-loc-suggest{position:absolute;z-index:40;background:#fff;border:1px solid var(--line);
border-radius:12px;box-shadow:0 14px 30px -14px rgba(22,40,34,.4);padding:6px;max-height:220px;overflow:auto}
.mm-skin-postcard .mmx-loc-suggest div{padding:8px 12px;font-size:13px;color:var(--ink-2);border-radius:8px;cursor:pointer}
.mm-skin-postcard .mmx-loc-suggest div:hover{background:var(--mint-soft);color:var(--mint-deep)}
/* ---------- 时间线 ---------- */
.mm-skin-postcard .mm-list{position:relative;display:block;margin-top:34px}
.mm-skin-postcard .mm-thread{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.mm-skin-postcard .mm-thread path{fill:none;stroke:color-mix(in srgb,var(--mint) 42%,transparent);
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1.5 5 6 5}
/* 卡片：收窄 + 左右错开 + 随机倾斜（--w/--gap/--tilt 由 PHP 稳定伪随机给出） */
.mm-skin-postcard .mm-item{position:relative;z-index:1;width:var(--w,58%);max-width:100%;
margin:0 0 var(--gap,68px);padding:20px 22px 18px;border-radius:4px;
background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px -16px rgba(22,40,34,.34);
transform:rotate(var(--tilt,0deg));will-change:transform;
transition:transform .28s cubic-bezier(.2,.8,.25,1),box-shadow .28s cubic-bezier(.2,.8,.25,1)}
.mm-skin-postcard .mm-item:nth-of-type(odd){margin-right:auto} /* ⛔ 用 nth-of-type：只数 ，
加载更多追加的卡片不会打乱奇偶节奏 */
.mm-skin-postcard .mm-item:nth-of-type(even){margin-left:auto}
/* ⛔ hover 与主题首页完全同一套（抬起 6px + 回正 + 阴影加深）。
不加入场 animation：它的 fill 状态会占住 transform，hover 就变成「瞬跳」而不是「过渡」
—— 用户反馈的「动效生硬」根因就在这。 */
.mm-skin-postcard .mm-item:hover{transform:translateY(-6px) rotate(0deg);box-shadow:0 18px 34px -16px rgba(22,40,34,.42)}
/* 头像：单作者站点不占版面（要恢复就把下面的 display:flex 打开） */
.mm-skin-postcard .mm-ava{display:none}
.mm-skin-postcard .mm-body{min-width:0}
/* 名称行 */
.mm-skin-postcard .mm-name{font-size:12.5px;color:var(--ink-3);font-weight:600;letter-spacing:.02em;
display:flex;align-items:center;gap:8px}
.mm-skin-postcard .mm-badge-private{background:var(--mint-soft);color:var(--mint-deep);font-size:11px;
padding:1px 8px;border-radius:999px;font-weight:700}
/* 正文 */
.mm-skin-postcard .mm-text{margin-top:8px;font-size:16px;line-height:1.8;color:var(--ink);word-break:break-word}
.mm-skin-postcard .mm-text .mm-tag{color:var(--mint-deep);font-weight:600;text-decoration:none}
/* 图集：⛔ 真实类名只有 g1(1张) / g2(2或4张) / g3(其余：3/5/6/7/8/9)
—— 之前按 w1~w4 写，一个都没命中（w1~w4 是那条装饰波浪