/* ==========================================================================
   会员「试看」遮罩样式     member.css
   供 index.html 与 luopan.html 共用（与 js/member.js 配套）。
   沿用全站配色：棕 #8B7355 / 米 #faf8f5 / 文字 #2b2b2b。
   ========================================================================== */

/* ---------------- 通用：内容试看遮罩（推理 / 择吉结果用） ----------------
   结构： .mem-preview > (.mem-preview-body 露出部分) + (.mem-preview-fade 锁定卡)
   .mem-preview-body 用行内 max-height 限制露出高度，超出的内容被裁掉。 */
.mem-preview{position:relative;overflow:hidden;border-radius:10px}
.mem-preview-body{overflow:hidden;min-height:190px;position:relative}
.mem-preview-fade{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:60px 16px 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  text-align:center;
  background:linear-gradient(to bottom,rgba(250,248,245,0) 0%,rgba(250,248,245,.92) 46%,#faf8f5 66%);
}
.mem-preview-fade .mp-ic{font-size:20px;line-height:1;margin-bottom:6px;opacity:.85}
.mem-preview-fade .mp-t{font-size:14px;font-weight:700;color:#8B7355;letter-spacing:.5px}
.mem-preview-fade .mp-s{font-size:12.5px;color:#9a8f7f;margin:5px 0 10px;line-height:1.55;max-width:290px}
.mem-preview-fade .mp-btn{
  border:none;border-radius:20px;background:#8B7355;color:#fff;
  font-size:13px;font-weight:600;letter-spacing:.5px;
  padding:8px 22px;cursor:pointer;font-family:inherit;
  box-shadow:0 2px 8px rgba(139,115,85,.28);
}
.mem-preview-fade .mp-btn:active{opacity:.86;transform:translateY(1px)}

/* 推理弹窗（白底）内的遮罩：渐变改白 */
#itpBody .mem-preview-fade{background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.93) 46%,#fff 66%)}

/* ==========================================================================
   罗盘页：区块锁定（户型图九宫叠加 / 九宫十神盘 / 流年飞星）
   用 ::after 生成覆盖层 —— 绝对定位的伪元素不参与 grid/flex 布局，
   因此不会破坏 #g9（grid）与 #planOv（grid）的排版。
   ========================================================================== */

/* ① 户型图上的「九宫十神叠加」：非会员直接不铺（只看得到自己的户型图） */
body.luo-not-member #planOv{display:none}

/* ② 九宫十神盘 / 流年飞星：盖一层磨砂锁定卡 */
body.luo-not-member #g9,
body.luo-not-member #starBar{position:relative}
body.luo-not-member #g9::after,
body.luo-not-member #starBar::after{
  position:absolute;inset:0;z-index:12;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:700;color:#8B7355;letter-spacing:.5px;
  background:linear-gradient(to bottom,rgba(250,248,245,.55),rgba(250,248,245,.97));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border-radius:10px;
}
body.luo-not-member #g9::after{
  content:'🔒 会员专享 · 试看中\A 开通会员后查看九宫十神';
  white-space:pre-line;font-size:13.5px;line-height:1.9;
}
body.luo-not-member #starBar::after{
  content:'🔒 会员专享 · 开通后查看流年飞星';
  font-size:12.5px;
}

/* ③ 非会员提示条（罗盘页 HTML 中自带 .luo-mem-tip） */
.luo-mem-tip{
  display:none;align-items:center;gap:6px;
  margin:12px 14px 0;padding:8px 12px;border-radius:8px;
  background:#FFF8E7;border:1px solid #e8d8b0;color:#8a5a00;
  font-size:12.5px;line-height:1.5;
}
body.luo-not-member .luo-mem-tip{display:flex}