/* ====== 顶部公告（顶栏入口 + 弹窗）· 6 页共用 ======
   2026-10-07：原先内联在 page-liuyao.html / page-xiaoliuren.html 里（两处逐字相同），
   现在排盘(首页)/研习/我的/资料页也要挂同一个入口 → 抽成本文件 + js/notice.js，避免多份实现漂移。

   挂载位置两种，同一套样式：
     ① .header（六爻页 / 小六壬页）—— 顶部三栏网格第 2 列、居中（grid-column:2;grid-row:1）
     ② .topbar（首页排盘 / 研习 / 我的页）—— 顶栏最右侧（flex 行里 margin-left:auto）
     ③ .topbar 且带「← 返回」的资料页 —— 公告居中、返回贴最右（见文件末尾 #page-profile 段）

   🔴 变量名在两套页面里不同：六爻/小六壬自带 --card-border/--card/--ink/--serif/--sans/--ease，
      而 css/common.css 只有 --border/--surface/--text/--muted。所以每个 var() 都带第二兜底参数，
      两套页面里都成立；六爻/小六壬里兜底永不生效 → 视觉与抽文件前逐字一致。
   🔴 轮播宽度档位（≤460 / ≤380）也收在本文件，别在页面里再写一份 → 否则两处会漂移。 */

/* —— 顶栏公告按钮（📢 + 最新一条标题轮播）—— */
.header-notice-btn{grid-column:2;grid-row:1;justify-self:center;display:inline-flex;align-items:center;gap:4px;
  border:1.5px solid var(--card-border,var(--border,#DBD2BF));
  background:var(--card,var(--surface,#fff));color:var(--accent,#9A6A2A);
  font-size:12px;padding:5px 14px;border-radius:20px;cursor:pointer;
  font-family:var(--sans,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif);font-weight:500;
  white-space:nowrap;transition:all .2s var(--ease,ease);}
.header-notice-btn:hover{border-color:var(--accent,#9A6A2A);color:var(--accent,#9A6A2A);background:rgba(60,54,44,.04);}
.header-notice-btn .nb-ico{font-size:13px;}
.header-notice-btn .nb-carousel{width:210px;flex:0 0 auto;text-align:left;display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:1;transition:opacity .35s var(--ease,ease);}

/* —— 顶栏（.topbar 是 flex 行）里：推到最右；🔴 按钮与轮播的宽度**钉死**，不随公告文字长短变化 ——
   （用户 2026-10-07：「公告栏的长度固定，长度不要随文字变化而变化，就像六爻的页面一样固定」。
     六爻/小六壬页本来就是固定 210 的，而顶栏页第一版写成 width:auto → 轮播每 3 秒换标题
     按钮宽度就跟着跳一下，看着晃。）
   🔴 实测（_probe_notice_geometry.js）：flex 默认每项 flex-shrink:1 ——
      ① 若让按钮参与收缩 → 文字一变宽度就变（就是上面那个「跳」）；
      ② 若按钮不收缩而其它项收缩 → 收缩被均摊，品牌名与「← 返回」被压成两行
         （资料页顶栏从 62px 涨到 89px，480 宽也一样）。
      故三者都锁死：按钮 flex:0 0 auto（宽度只由本文件的固定档位决定）、轮播 width 固定 +
      省略号（长标题裁掉）、品牌名与返回键 flex:0 0 auto（永远单行）。
      顶栏页可用宽度比六爻页紧（还带品牌文字块，资料页另加返回键），故档位整体比六爻页（210）窄一档。 */
.topbar .header-notice-btn{grid-column:auto;grid-row:auto;justify-self:auto;margin-left:auto;min-width:0;flex:0 0 auto;}
.topbar .header-notice-btn .nb-carousel{width:170px;flex:0 0 auto;max-width:none;}
.topbar .brand-text{flex:0 0 auto;}
.topbar .top-back,.topbar .sub-back{flex:0 0 auto;white-space:nowrap;}

/* —— 资料页：公告「靠中间」、返回「固定在右边」（用户 2026-10-07：「资料页的返回应该固定在
   右边 公告栏应该在靠中间」）——
   DOM 顺序 = [logo + 品牌文字] → [📢 公告] → [← 返回]（js/notice.js 把按钮插到返回键**之前**），
   公告再吃掉两侧剩余空间（左右 auto 边距各一半）→ 它落在剩余空间正中，返回顺理成章被顶到最右。
   左右留白天然相等，故公告的居中程度只由「品牌块宽 − 返回键宽」决定，与视口宽度无关：
     · ≤460 档品牌文字隐藏（见下）→ 两者宽度接近 → 公告几乎正中；
     · ≥461 档品牌文字显示（约 190 vs 56）→ 公告略偏右，仍在顶栏中间带内，且不会与品牌块重叠。
   🔴 别改成 position:absolute;left:50%;transform:translateX(-50%)（严格居中）：
      480 档品牌文字 ≈190px 而居中按钮 ≈198px，两者会**叠在一起**。 */
#page-profile .topbar .header-notice-btn{margin-left:auto;margin-right:auto;}

/* —— 公告弹窗 —— */
.notice-mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:rgba(40,36,30,.45);padding:18px;}
.notice-mask[hidden]{display:none;}
.notice-modal{width:100%;max-width:420px;max-height:80vh;background:var(--card,var(--surface,#fff));border-radius:14px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;}
.notice-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--card-border,var(--border,#E8E0D5));font-weight:700;color:var(--accent,#9A6A2A);
  font-family:var(--serif,"Noto Serif SC","STSong",serif);}
.notice-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:rgba(0,0,0,.06);font-size:24px;font-weight:300;line-height:1;color:var(--ink,#2A2A28);cursor:pointer;padding:0;border-radius:50%;transition:background .15s,transform .1s;}
.notice-close:hover{background:rgba(0,0,0,.14);}
.notice-close:active{transform:scale(.92);}
.notice-list{list-style:none;margin:0;padding:6px 0;overflow:auto;max-height:60vh;}
.notice-item a{display:flex;align-items:center;gap:10px;padding:13px 16px;text-decoration:none;
  border-bottom:1px solid var(--card-border,var(--border,#E8E0D5));transition:background .15s ease;}
.notice-item:last-child a{border-bottom:none;}
.notice-item a:hover{background:rgba(154,106,42,.06);}
.notice-item .notice-static{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--card-border,var(--border,#E8E0D5));transition:background .15s ease;cursor:default;}
.notice-item:last-child .notice-static{border-bottom:none;}
.notice-dot{width:7px;height:7px;border-radius:50%;background:var(--accent,#9A6A2A);flex-shrink:0;}
.notice-body{display:flex;flex-direction:column;flex:1;min-width:0;}
.notice-title{font-size:14px;font-weight:600;color:var(--ink,var(--text,#2A2A28));line-height:1.4;}
.notice-date{font-size:12px;color:var(--muted,#8A8580);margin-top:3px;}
.notice-go{color:var(--muted,#8A8580);font-size:18px;flex-shrink:0;}

/* —— 窄屏固定宽度档位（两个挂载位置各一套；六爻/小六壬沿用原档位 180 / 140，顶栏页见下）—— */
@media (max-width:460px){
  .header-notice-btn .nb-carousel{width:180px;}
  /* 顶栏页收窄到 150（比六爻页窄，因为顶栏还有品牌文字块，资料页另有「← 返回」）。
     实测 390 / 430 / 460 三档都不溢出（_probe_notice_geometry.js）。 */
  .topbar .header-notice-btn .nb-carousel{width:150px;}
  /* 资料页顶栏 = logo + 品牌文字 + 「← 返回」+ 公告，窄屏实在放不下：
     这一档（轮播还带文字）优先保证公告栏宽度固定 → 品牌文字块让位（只留 logo 图标）。
     ⚠️ 只影响 382–460；更窄的一档轮播收成纯图标，位置又够了，品牌文字恢复（见下）。 */
  #page-profile .topbar .brand-text{display:none;}
}
@media (max-width:380px){
  .header-notice-btn .nb-carousel{width:140px;}
  /* 顶栏页在 ≤380 只留 📢 图标：实在没地方，硬塞轮播文字会让品牌名/返回键折行。
     按钮宽度仍是固定的（不随任何文字变化）—— 这档没有文字可取。 */
  .topbar .header-notice-btn{padding:6px 12px;}
  .topbar .header-notice-btn .nb-carousel{display:none;}
  #page-profile .topbar .brand-text{display:flex;}
}

/* —— 新公告弹窗（2026-10-25）：接口里出现「没见过的公告 id」时自动弹出 ——
   视觉沿用公告弹窗（同底色/圆角/阴影），但更窄、带操作按钮；只允许 X / 按钮关闭。 */
.notice-pop-mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1001;display:flex;align-items:center;justify-content:center;
  background:rgba(40,36,30,.45);padding:18px;}
.notice-pop-mask[hidden]{display:none;}
.notice-pop{width:100%;max-width:360px;max-height:80vh;background:var(--card,var(--surface,#fff));border-radius:14px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;}
.notice-pop-head{display:flex;align-items:center;gap:6px;padding:14px 16px;
  border-bottom:1px solid var(--card-border,var(--border,#E8E0D5));font-weight:700;color:var(--accent,#9A6A2A);
  font-family:var(--serif,"Noto Serif SC","STSong",serif);}
.notice-pop-ico{font-size:15px;}
.notice-pop-x{margin-left:auto;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;
  background:rgba(0,0,0,.06);font-size:24px;font-weight:300;line-height:1;color:var(--ink,#2A2A28);cursor:pointer;padding:0;
  border-radius:50%;transition:background .15s,transform .1s;}
.notice-pop-x:hover{background:rgba(0,0,0,.14);}
.notice-pop-x:active{transform:scale(.92);}
.notice-pop-list{padding:6px 0;overflow:auto;max-height:52vh;}
.notice-pop-item{display:flex;flex-direction:column;gap:3px;padding:12px 16px;text-decoration:none;
  border-bottom:1px solid var(--card-border,var(--border,#E8E0D5));transition:background .15s ease;}
.notice-pop-item:last-child{border-bottom:none;}
a.notice-pop-item:hover{background:rgba(154,106,42,.06);}
.notice-pop-title{font-size:14px;font-weight:600;color:var(--ink,var(--text,#2A2A28));line-height:1.4;}
.notice-pop-date{font-size:12px;color:var(--muted,#8A8580);}
.notice-pop-more{padding:10px 16px;font-size:12px;color:var(--muted,#8A8580);text-align:center;}
.notice-pop-foot{display:flex;gap:10px;padding:12px 16px 14px;border-top:1px solid var(--card-border,var(--border,#E8E0D5));}
.notice-pop-foot button{flex:1;padding:9px 10px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:var(--sans,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif);transition:all .15s ease;}
.notice-pop-all{border:1.5px solid var(--card-border,var(--border,#DBD2BF));background:var(--card,var(--surface,#fff));
  color:var(--accent,#9A6A2A);}
.notice-pop-all:hover{border-color:var(--accent,#9A6A2A);background:rgba(60,54,44,.04);}
.notice-pop-ok{border:1.5px solid var(--accent,#9A6A2A);background:var(--accent,#9A6A2A);color:#fff;}
.notice-pop-ok:hover{opacity:.9;}