/* nav-common.css — 共享样式
   各页面在 :root 中覆盖CSS自定义属性以定制主题 */

/* ===== 可覆盖的CSS自定义属性（默认值） ===== */
:root {
  --nav-bg: #FFF8F0;
  --nav-accent: #E07A2F;
  --nav-accent-hover: #C06030;
  --nav-text: #2D2D2D;
  --nav-text-secondary: #999;
  --nav-border: #f0e8e0;
  --nav-container-width: 640px;
  --nav-font-size: 16px;
  --nav-line-height: 1.8;
  --nav-card-bg: #fff;
  --nav-card-radius: 14px;
  --nav-card-shadow: 0 2px 12px rgba(0,0,0,0.05);
  --nav-card-hover-shadow: 0 6px 24px rgba(0,0,0,0.10);
  --nav-footer-color: #C0C0C0;
  --nav-highlight-bg: #FFF8E1;
  --nav-highlight-border: #F59E0B;
  --nav-highlight-text: #8B6914;
  --nav-danger-bg: #FDECEC;
  --nav-danger-border: #EB5757;
  --nav-header-desc-color: #8B7355;
}

/* ===== 基础重置 ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--nav-font-size);-webkit-font-smoothing:antialiased;letter-spacing:0.01em}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--nav-text);background:var(--nav-bg);line-height:var(--nav-line-height);min-height:100vh}
p{margin-bottom:16px}

/* ===== 顶部导航栏 ===== */
.top-bar{background:#fff;border-bottom:1px solid var(--nav-border);padding:14px 24px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:100}
.top-bar a{color:var(--nav-accent);text-decoration:none;font-size:14px;display:flex;align-items:center;gap:4px}
.top-bar a:hover{text-decoration:underline}
.top-bar span{font-size:14px;color:var(--nav-text-secondary)}
.top-bar .title{font-size:16px;font-weight:600;color:var(--nav-text)}

/* ===== 主容器 ===== */
.container{max-width:var(--nav-container-width);margin:0 auto;padding:32px 24px 60px}

/* ===== 页头（Type A/B 文章页） ===== */
.nav-header{text-align:center;margin-bottom:32px}
.nav-header .icon{font-size:48px;display:block;margin-bottom:8px}
.nav-header h1{font-size:26px;font-weight:700;color:var(--nav-text);margin-bottom:6px}
.nav-header p{font-size:15px;color:var(--nav-header-desc-color)}

/* ===== 免责声明框 ===== */
.disclaimer-box{background:var(--nav-highlight-bg);border-left:4px solid var(--nav-highlight-border);border-radius:8px;padding:16px 20px;margin-bottom:24px;font-size:14px;color:var(--nav-highlight-text);line-height:1.7}
.disclaimer-box strong{color:#B45309}

/* ===== 文章卡片 (Type A/B) ===== */
.card{background:var(--nav-card-bg);border-radius:var(--nav-card-radius);padding:28px 32px;box-shadow:var(--nav-card-shadow);margin-bottom:16px;border:1px solid var(--nav-border)}
.card:hover{box-shadow:var(--nav-card-hover-shadow)}
.card h2{font-size:18px;font-weight:700;color:var(--nav-text);margin-bottom:12px}
.card h3{font-size:16px;font-weight:700;color:var(--nav-accent-hover);margin:20px 0 10px;padding-left:12px;border-left:3px solid var(--nav-accent)}
.card ul,.card ol{padding-left:20px;margin:8px 0}
.card li{padding:6px 0;font-size:15px;color:#444;line-height:1.7}
.card p{font-size:15px;color:#444;margin-bottom:16px;line-height:1.8}
.card li strong,.card p strong{color:var(--nav-text)}

/* ===== 红色警示框 ===== */
.red-flag{background:var(--nav-danger-bg);border-left:3px solid var(--nav-danger-border);padding:12px 16px;border-radius:0 8px 8px 0;margin:12px 0;font-size:14px}
.red-flag strong{color:#C0392B}
.red-flag ul{padding-left:20px;margin:8px 0 0}
.red-flag li{font-size:14px;color:#5A3A3A;line-height:1.8;padding:3px 0}

/* ===== 子标题分隔线（排版铁律：子标题前虚线打断长文）===== */
.sub-divider{border:none;border-top:1px dashed var(--nav-border);margin:24px 0 8px}
.card .sub-divider:first-child{display:none}

/* ===== 黄色提醒框（排版铁律：不加⚠️前缀，黄底已醒目）===== */
.warn-box{background:var(--nav-highlight-bg);border-left:4px solid var(--nav-highlight-border);border-radius:0 10px 10px 0;padding:12px 16px;font-size:14px;color:var(--nav-highlight-text);margin:12px 0}
.warn-box strong{color:#B45309}

/* ===== 参考来源卡片（排版铁律：独立最后卡片）===== */
.ref-card{border-color:#e8dcd4;background:#FFFDF6}
.ref-card h2{color:var(--nav-accent-hover)}
.ref-card ol{padding-left:20px;margin:8px 0}
.ref-card li{font-size:13px;color:#666;line-height:1.7;padding:5px 0}

/* ===== 更新日期 ===== */
.nav-update-date{text-align:center;font-size:12px;color:#B8A898;margin-top:12px}

/* ===== 页脚 ===== */
.nav-footer{margin-top:32px;text-align:center;font-size:13px;color:var(--nav-footer-color)}

/* ===== 返回按钮 ===== */
.back-link{display:inline-block;padding:10px 24px;border:2px solid #e0e8f0;border-radius:10px;background:#fff;color:var(--nav-text-secondary);font-size:14px;text-decoration:none;transition:all 0.2s}
.back-link:hover{color:var(--nav-accent);border-color:var(--nav-accent)}

/* ===== 响应式 ===== */
@media(max-width:600px){
  .container{padding:20px 16px 40px}
  .card{padding:18px 20px}
  .nav-header h1{font-size:22px}
}