/* ==========================================================================
   家常读书 · 全站设计基线 jc-base.css  v1.0 (2026-08-20)
   所有新版页面统一引用本文件；页面级样式只允许在其后追加、不允许覆盖令牌。
   设计基调：暖白纸感 · 豆瓣式信息密度 · 家常传统蓝
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root{
  --link:#3377aa;            /* 文字链蓝 */
  --blue:#095dcc;            /* 品牌蓝 */
  --blue-deep:#0055a4;       /* 品牌蓝·深 */
  --blue-soft:#e8f1fc;       /* 品牌蓝·浅底 */
  --rating:#ffac2d;          /* 评分橙 */
  --red:#d43d2a;             /* 官方/提醒红 */
  --ink:#333333;             /* 主文字 */
  --ink-2:#666666;           /* 次文字 */
  --ink-3:#999999;           /* 辅助文字 */
  --paper:#fbfaf7;           /* 页面底色：暖白 */
  --panel:#f5f3ee;           /* 板块底 */
  --card:#ffffff;            /* 卡片底 */
  --line:#e7e4dc;            /* 细分割线 */
  --line-2:#efede7;          /* 更浅分割线 */
  --green:#3d8f57;           /* 公版/免费绿 */
  --radius:8px;
  --radius-s:4px;
}

/* ---------- 基础重置 ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font:13px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-decoration:none}
a:hover{color:#fff;background:var(--link)}
a.noline:hover{background:transparent;color:var(--link);text-decoration:underline}
ul,ol{list-style:none}
img{display:block;max-width:100%}
.wrap{width:1060px;margin:0 auto}
.clearfix::after{content:"";display:block;clear:both}
@media(max-width:1100px){.wrap{width:auto;padding:0 12px}}

/* ---------- 顶部深色导航（slim bar） ---------- */
.topbar{background:#25282a;color:#c9cdd1;font-size:12px}
.topbar .wrap{display:flex;align-items:center;height:36px}
.topbar .brand{color:#fff;font-weight:600;font-size:14px;letter-spacing:.5px;margin-right:22px;display:flex;align-items:center;gap:7px}
.topbar .brand:hover{background:none;color:#fff}
.topbar .brand .plane{width:16px;height:16px;flex:none}
.topbar nav{display:flex;gap:2px}
.topbar nav a{color:#c9cdd1;padding:0 13px;height:36px;line-height:36px;display:inline-block;position:relative}
.topbar nav a:hover{background:#3a3e41;color:#fff}
.topbar nav a.on{color:#fff;background:#17191b}
.topbar nav a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;background:var(--blue)}
.topbar .account{margin-left:auto;display:flex;gap:14px;align-items:center}
.topbar .account a{color:#c9cdd1}
.topbar .account a:hover{color:#fff;background:none;text-decoration:underline}
.topbar .acct-user{display:flex;align-items:center;gap:6px}
.topbar .acct-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover}

/* ---------- 频道头 ---------- */
.channel{background:#fff;border-bottom:1px solid var(--line)}
.channel .wrap{display:flex;align-items:flex-end;padding:22px 0 18px;gap:26px}
.channel h1{font-size:22px;color:var(--ink)}
.channel .sub{font-size:12px;color:var(--ink-3);margin-top:4px}

/* ---------- 面包屑 ---------- */
.crumb{font-size:12px;color:var(--ink-3);padding:14px 0}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--link);background:none;text-decoration:underline}

/* ---------- 板块面板 ---------- */
.sec-panel{background:var(--panel);border:1px solid var(--line-2);padding:18px 22px;margin-bottom:14px}
.sec-panel > h2{font-size:15px;color:var(--ink);margin-bottom:12px}
.sec-panel > h2 .dot{color:var(--blue);margin-right:6px}
.sec-panel > h2 .cnt{font-size:12px;color:var(--ink-3);font-weight:400;margin-left:6px}
.sec-panel > h2 .more{float:right;font-size:12px;font-weight:400}
.sec-panel > h2 .more:hover{background:none;color:var(--link);text-decoration:underline}

/* ---------- 书籍卡片 ---------- */
.bk-list{display:flex;flex-wrap:wrap;gap:18px}
.bk{width:96px}
.bk .cov{width:96px;height:128px;background:#e8e5de;border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:12px;text-align:center;padding:6px}
.bk .cov img{width:100%;height:100%;object-fit:cover}
.bk .bn{font-size:12px;color:var(--ink);margin-top:6px;line-height:1.4;height:34px;overflow:hidden}
.bk .bs{font-size:11px;color:var(--ink-3);margin-top:2px}

/* ---------- 徽章 ---------- */
.badge{display:inline-block;font-size:11px;line-height:1;padding:3px 8px;border-radius:9px;margin-right:4px}
.badge-free{background:var(--green);color:#fff}
.badge-red{background:var(--red);color:#fff}
.badge-blue{background:var(--blue-soft);color:var(--blue)}
.badge-line{color:var(--ink-3);border:1px solid var(--line)}

/* ---------- 按钮 ---------- */
.btn{display:inline-block;font-size:13px;padding:6px 18px;border-radius:var(--radius-s);background:var(--blue);color:#fff;border:1px solid var(--blue);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--blue-deep);color:#fff}
.btn-ghost{display:inline-block;font-size:13px;padding:6px 18px;border-radius:var(--radius-s);background:transparent;color:var(--blue);border:1px solid #bcd7f5;cursor:pointer;text-decoration:none}
.btn-ghost:hover{background:var(--blue-soft);color:var(--blue)}
.btn-text{color:var(--link);cursor:pointer;background:none;border:none;font-size:13px}
.btn-text:hover{text-decoration:underline;background:none}

/* ---------- 空状态 ---------- */
.empty{padding:44px 0;text-align:center;color:var(--ink-3);font-size:13px}
.empty a{color:var(--link)}
.empty a:hover{background:none;text-decoration:underline}

/* ---------- 页脚 ---------- */
.footer{border-top:1px solid var(--line);background:var(--panel);margin-top:0}
.footer .wrap{padding:26px 0 34px;font-size:12px;color:var(--ink-3);text-align:center;line-height:2}
.footer a{color:var(--ink-2)}
.footer a:hover{color:var(--link);background:none;text-decoration:underline}
.footer .beian{font-size:11px;color:#b3aea2}

/* ---------- 返回顶部 ---------- */
.totop{position:fixed;right:18px;bottom:60px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-3);font-size:11px;line-height:1.3;cursor:pointer;display:none;z-index:99}
.totop.show{display:block}

/* ---------- 认证弹窗（结构类，内容样式沿用页面） ---------- */
.login_body{position:fixed;inset:0;z-index:200}
.login_body.hide{display:none}
.login_body .shade{position:absolute;inset:0;background:rgba(0,0,0,.45)}

@media(max-width:640px){
  .topbar .wrap{overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .topbar .wrap::-webkit-scrollbar{display:none}
  .topbar .brand{margin-right:10px;flex:none}
  .topbar nav{flex:none}
  .topbar nav a{padding:0 8px}
  .topbar .account{gap:10px;padding-left:10px;flex:none}

  .channel .wrap{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 12px}
  .sec-panel{padding:14px}
  .bk .cov{width:84px;height:112px}
  .bk{width:84px}
}