/* ================= 信息警示标语 =================
   前台详情页 / 列表页 / 发布页 + 后台预览共用这一份
   配色用 CSS 变量，四种风格在文件末尾统一定义 */

.warn{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 15px;
  margin:14px 0;
  border-radius:12px;
  border:1px solid var(--wbd, #fed7aa);
  border-left:4px solid var(--wc, #e8542f);
  background:var(--wbg, #fff7ed);
  font-size:14px;
  line-height:1.75;
  box-sizing:border-box;
}

.warn-ic{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--wc, #e8542f);
  margin-top:2px;
}
.warn-ic svg{ display:block }

.warn-bd{ flex:1 1 auto; min-width:0 }

.warn-t{
  font-weight:800;
  font-size:14px;
  color:var(--wc, #e8542f);
  margin-bottom:2px;
  letter-spacing:.2px;
}

.warn-c{
  color:#4a4f5c;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.warn-x{
  flex:0 0 auto;
  width:26px;
  height:26px;
  margin:-2px -4px 0 2px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--wc, #e8542f);
  opacity:.55;
  cursor:pointer;
  transition:.15s;
}
.warn-x:hover{ opacity:1; background:rgba(0,0,0,.05) }
.warn-x:active{ background:rgba(0,0,0,.09) }

/* 四种风格 */
.warn-red   { --wc:#dc2626; --wbg:#fef2f2; --wbd:#fecaca }
.warn-orange{ --wc:#e8542f; --wbg:#fff7ed; --wbd:#fed7aa }
.warn-blue  { --wc:#2563eb; --wbg:#eff6ff; --wbd:#bfdbfe }
.warn-gray  { --wc:#475569; --wbg:#f8fafc; --wbd:#e2e8f0 }

/* 列表页顶部那条：紧贴分类栏，别多留白 */
.warn-list{margin:0 0 14px}

@media (max-width:768px){
  .warn{
    padding:12px 13px;
    gap:9px;
    font-size:13.5px;
    line-height:1.7;
    border-radius:11px;
    margin:12px 0;
  }
  .warn-ic svg{ width:18px; height:18px }
  .warn-t{ font-size:13.5px }
  .warn-x{ width:24px; height:24px; margin-top:-1px }
}