/* 首页公告弹窗
   替代原来的 xcConfirm 插件（js 5183 + css 5093 字节，且弹窗内容要靠 JS 拼字符串）。
   这里改成服务端直接渲染 HTML + 一小段原生 JS 只管关闭：
   - JS 挂了也能看到公告（原来 JS 一挂就整个不显示）
   - 公告文案在 public/notice.inc.php 里，是 HTML 不是 JS 字符串，改起来不会踩转义
   视觉语言和绑定手机弹窗保持一致（Bootstrap 5 的尺寸/圆角/焦点环）。

   **所有类名都带 hyl- 前缀，别去掉。** 站里 plugin/hob/css/hob.css 定义了
   `.notice-item{ position:fixed; z-index:2147483647 }`，而它在本文件之后加载。
   第一版用了不带前缀的 .notice-item，结果两条公告都被定成 fixed、top 相同，
   直接叠在一起只看得见一条。这个坑踩过两次了（上一次是公告弹窗的 .notice-item
   撞 hob.css，当时改成了 .xc-notice）。老站的全局命名空间很脏，新组件一律加前缀。 */

.hyl-notice-mask{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    padding:16px; box-sizing:border-box;
    background:rgba(0,0,0,.5);
    animation:hyl-notice-fade .18s ease-out;
}
.hyl-notice-mask[hidden]{ display:none; }

.hyl-notice-dialog{
    width:100%; max-width:520px; max-height:calc(100vh - 32px);
    display:flex; flex-direction:column;
    background:#fff; border-radius:.5rem;
    box-shadow:0 16px 48px rgba(0,0,0,.3);
    overflow:hidden;
    animation:hyl-notice-pop .18s ease-out;
}

.hyl-notice-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid #dee2e6;
}
.hyl-notice-header h2{
    margin:0; font-size:17px; font-weight:500; line-height:1.4; color:#212529;
}
/* 关闭按钮：用 button 而不是 <a href="javascript:;">，键盘和读屏都能正常用 */
.hyl-notice-close{
    flex:0 0 auto; width:30px; height:30px; padding:0;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; line-height:1; color:#6c757d;
    background:none; border:none; border-radius:.25rem; cursor:pointer;
    transition:color .15s ease-in-out, background-color .15s ease-in-out;
}
.hyl-notice-close:hover{ color:#212529; background:#f1f3f5; }
.hyl-notice-close:focus-visible{ outline:0; box-shadow:0 0 0 .2rem rgba(248,135,7,.35); }

.hyl-notice-body{ padding:18px; overflow-y:auto; }

/* 每条公告：左侧一道竖线，比原来靠空 <br/> 撑版面清楚得多 */
.hyl-notice-item{
    position:relative;
    margin:0 0 12px; padding:10px 12px 10px 14px;
    font-size:14px; line-height:1.7; color:#495057;
    background:#fff8f0; border-left:3px solid #f88707; border-radius:.25rem;
}
.hyl-notice-item:last-child{ margin-bottom:0; }
.hyl-notice-item a{ color:#d9480f; text-decoration:underline; }
.hyl-notice-item a:hover{ color:#b93c05; }
/* 需要强调的那条 */
.hyl-notice-item.hyl-is-warn{ background:#fff5f5; border-left-color:#e03131; color:#c92a2a; }
.hyl-notice-item.hyl-is-warn a{ color:#c92a2a; }

.hyl-notice-footer{
    padding:14px 18px; border-top:1px solid #dee2e6; text-align:right;
}
.hyl-notice-btn{
    min-width:96px; height:38px; padding:6px 18px; box-sizing:border-box;
    font-size:14px; line-height:1.5; color:#fff;
    background:#f88707; border:1px solid #f88707; border-radius:.375rem;
    cursor:pointer; transition:background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.hyl-notice-btn:hover{ background:#d97706; border-color:#cc7005; }
.hyl-notice-btn:focus-visible{ outline:0; box-shadow:0 0 0 .25rem rgba(248,135,7,.4); }

@keyframes hyl-notice-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes hyl-notice-pop{ from{ opacity:0; transform:translateY(-12px) scale(.98); } to{ opacity:1; transform:none; } }

/* 窄屏：贴边留白收窄，按钮占满一行更好点 */
@media (max-width:480px){
    .hyl-notice-mask{ padding:12px; }
    .hyl-notice-header, .hyl-notice-body, .hyl-notice-footer{ padding-left:14px; padding-right:14px; }
    .hyl-notice-btn{ width:100%; }
}

/* 用户设了「减少动态效果」就别放动画 */
@media (prefers-reduced-motion:reduce){
    .hyl-notice-mask, .hyl-notice-dialog{ animation:none; }
}