/* ══════════════════════════════════════════════════════════════
   主题「墨阁」—— 暖宣纸 · 竹青 · 烫金
   ──────────────────────────────────────────────────────────────
   与原站 janpn.org 的区别（版式结构一致，视觉令牌整体更换）：

     部位        原站                  本站
     ─────────  ────────────────────  ────────────────────────────
     页面底色    #EEEEEB 冷灰米白       #F7F2E7 暖宣纸
     主色        #0b4f9e 宝蓝          #2F5D50 竹青
     点缀色      —                     #B68B36 烫金
     卡片        直角 + 单层硬阴影     14px 圆角 + 柔和多层阴影 + 悬停上浮
     卡片间隙    四列紧贴              14px 呼吸缝
     分类标题    300×40 实心蓝方条     衬线大字 + 两侧渐隐金线
     分隔条      蓝白径向渐变          金线 + 中央菱形
     页脚        #1D1A18 黑棕          #1E2A26 墨绿 + 顶部烫金线
     按钮        4px 直角              全圆角胶囊
     标题字体    黑体                  衬线（书卷气）

   所有断点条件与主容器宽度保持原值 —— 本文件只改视觉，不动布局尺寸。
   ══════════════════════════════════════════════════════════════ */
:root{
  --paper:#F7F2E7;        /* 页面底色 · 暖宣纸 */
  --paper-2:#F1EADB;      /* 次级底色 */
  --card:#FFFFFF;
  --ink:#2B2620;          /* 主文字 · 墨 */
  --ink-2:#6C6455;        /* 次级文字 */
  --ink-3:#9D9484;        /* 弱化文字 */
  --brand:#2F5D50;        /* 主色 · 竹青 */
  --brand-dk:#1D3F35;     /* 主色 · 深 */
  --brand-lt:#E9F1ED;     /* 主色 · 浅底 */
  --gold:#B68B36;         /* 点缀 · 烫金 */
  --gold-lt:#F4E9CF;
  --line:#E3D9C6;         /* 描边 */
  --line-soft:#EFE8DA;
  --foot:#1E2A26;         /* 页脚底 · 墨绿黑 */
  --foot-ink:#E9DFCA;
  --serif:"Source Han Serif SC","Noto Serif SC","Songti SC","STSong",Georgia,"Times New Roman",SimSun,serif;
}

/* ══════════ 基础 ══════════ */
*{box-sizing:border-box}
/* html/body 撑满视口高度，配合 .page-body{flex:1 0 auto} 实现「页脚贴底」：
   · 内容超过一屏时 —— 与原行为完全一致，页脚紧接在内容之后；
   · 内容不足一屏时 —— 由 .page-body 吸收剩余空间，把页脚顶到视口底部，
     不再在页脚下方露出一段背景色（详情页在 1200+ 高的视口上曾露 27px）。
   注意：body 变 flex 容器后，其直接子元素 .fav-mask / .overlay 仍是
   position:fixed，脱离文档流，不受影响。 */
html{-webkit-text-size-adjust:100%;height:100%}
body{
  min-height:100%;display:flex;flex-direction:column;
  margin:0;background-color:var(--paper);color:var(--ink);font-size:14px;line-height:1.42857143;
  font-family:"Helvetica Neue",Helvetica,Arial,STHeiti-Light,STHeiti-Medium,"Microsoft YaHei","Microsoft JhengHei",STHeiti,MingLiu,sans-serif;
  /* 极淡的斜向纤维纹，模拟宣纸手感；透明度压到 3% 以内，正文不受干扰 */
  background-image:repeating-linear-gradient(45deg,
    rgba(150,128,88,.030) 0 1px,transparent 1px 5px);
}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--brand);text-decoration:none}
img{border:0;vertical-align:middle}

/* ══════════ 顶部超大搜索区 ══════════ */
/* 注意：这里刻意不再写 overflow:hidden。
   搜索建议下拉是绝对定位在搜索框下方、要溢出 hero 底边的，
   overflow:hidden 会把它整条裁掉（下拉里一个候选都看不见）。
   hero 内部其余元素都是居中的 1000px 容器，不会真的溢出，
   装饰用的 ::before/::after 也都用 inset/bottom 定位在框内，去掉裁剪是安全的。 */
.hero{
  position:relative;
  background:#1D3F35;
  background-image:linear-gradient(135deg,#16352C 0%,#255045 48%,#3A7361 100%);
  padding:34px 16px 30px;text-align:center;color:#fff;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 16% 0%,rgba(255,244,214,.16),transparent 44%),
    radial-gradient(circle at 88% 112%,rgba(255,255,255,.09),transparent 48%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 5px);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,
    rgba(182,139,54,0),#C9A252 18%,#F0D79A 50%,#C9A252 82%,rgba(182,139,54,0));
}
.hero-inner{position:relative;z-index:2;max-width:1000px;margin:0 auto}
.hero-logo{
  margin:0 0 26px;font-size:31px;font-weight:700;letter-spacing:.09em;color:#fff;
  font-family:var(--serif);text-shadow:0 2px 12px rgba(0,0,0,.26);
}
.hero-logo a{color:#fff}
.hero-logo a:hover{color:#F0D79A}
.hero-slogan{
  margin:0 0 22px;font-size:13.5px;color:rgba(255,255,255,.78);letter-spacing:.16em;
}
.hero-form{
  display:flex;align-items:stretch;max-width:760px;margin:0 auto;
  background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 14px 34px rgba(8,26,21,.36),0 0 0 1px rgba(255,255,255,.16) inset;
  transition:box-shadow .2s;
}
.hero-form:focus-within{
  box-shadow:0 14px 34px rgba(8,26,21,.36),0 0 0 3px rgba(216,177,92,.55);
}
.hero-cat{
  flex:0 0 116px;border:0;outline:0;background:#F7F3E8;color:var(--ink);
  font-size:14px;padding:0 12px;border-right:1px solid var(--line);cursor:pointer;
  font-family:inherit;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#A79C86 50%),linear-gradient(135deg,#A79C86 50%,transparent 50%);
  background-position:calc(100% - 16px) 26px,calc(100% - 11px) 26px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.hero-input{
  flex:1 1 auto;min-width:0;border:0;outline:0;height:58px;padding:0 18px;
  font-size:16.5px;color:#231F19;font-family:inherit;background:transparent;
}
.hero-input::placeholder{color:#ADA491}
.hero-btn{
  flex:0 0 132px;border:0;color:#2A2213;font-size:17px;font-weight:700;
  cursor:pointer;font-family:inherit;letter-spacing:.16em;
  background-image:linear-gradient(180deg,#E7C778 0%,#CDA24A 52%,#B68B36 100%);
  transition:filter .18s;
}
.hero-btn:hover{filter:brightness(1.07)}
.hero-btn:active{filter:brightness(.93)}
.hero-hot{
  margin:18px auto 0;max-width:760px;font-size:13px;color:rgba(255,255,255,.66);
  line-height:2.4;text-align:left;
}
.hero-hot b{color:#F0D79A;font-weight:600;margin-right:6px;letter-spacing:.08em}
.hero-hot a{
  display:inline-block;margin:0 6px 0 0;padding:2px 12px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(240,215,154,.26);
  color:#F6F0E1;font-size:12.5px;
  transition:background .18s,border-color .18s,color .18s;
}
.hero-hot a:hover{background:rgba(240,215,154,.20);border-color:rgba(240,215,154,.62);color:#fff}
/* ══════════ 站内搜索建议下拉 ══════════
   构建时把全部书目内联成索引（约 6KB），输入即本地筛选，零请求、零后端。
   定位挂在 .hero-inner（position:relative）上，而不是 .hero-form ——
   .hero-form 有 overflow:hidden（用来裁圆角），会把下拉一起裁掉。 */
.search-sug{
  position:absolute;left:50%;top:100%;width:760px;max-width:100%;
  transform:translateX(-50%);margin-top:8px;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px -14px rgba(8,26,21,.5);
  max-height:340px;overflow-y:auto;text-align:left;display:none;
}
.search-sug.open{display:block}
.search-sug a{
  display:flex;align-items:baseline;gap:10px;padding:11px 16px;
  border-bottom:1px dashed var(--line-soft);color:var(--ink);
}
.search-sug a:last-child{border-bottom:0}
.search-sug a:hover,.search-sug a.on{background:var(--brand-lt)}
.search-sug .s-t{
  font-family:var(--serif);font-weight:700;font-size:14px;color:var(--brand-dk);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%;
}
.search-sug .s-t em{font-style:normal;color:#A8542F;background:#FBEFD9;border-radius:3px;padding:0 2px}
.search-sug .s-a{
  flex:1 1 auto;min-width:0;color:var(--ink-3);font-size:12.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-sug .s-c{
  flex:none;color:var(--brand);background:var(--brand-lt);border-radius:999px;
  padding:1px 9px;font-size:12px;
}
.search-sug .s-empty{padding:16px;color:var(--ink-3);font-size:13px;text-align:center}
.search-sug .s-head{
  padding:8px 16px 6px;font-size:12px;color:var(--ink-3);background:#FCFAF4;
  border-bottom:1px solid var(--line-soft);letter-spacing:.06em;
}

/* ══════════ 顶栏（版式沿用原站，改为 sticky；材质换成暖纸毛玻璃） ══════════ */
.navbar{
  position:sticky;top:0;z-index:1000;min-height:50px;
  background-color:var(--paper);
  background-image:linear-gradient(to bottom,rgba(247,242,231,.92) 0,rgba(255,255,255,.96) 100%);
  -webkit-backdrop-filter:saturate(1.5) blur(8px);
  backdrop-filter:saturate(1.5) blur(8px);
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}
/* 顶栏内容与下方内容区严格左对齐 —— 这是本站对原站的一处有意外观调整。
   原站顶栏是「满宽 + 左右 15px 内边距」，于是站名死死贴着屏幕左边缘，
   而下面的卡片区、分类标题、hero 搜索区都是居中的 1000px 容器，
   两者左边缘错开一大截，宽屏下尤其明显（1440 视口错开 220px）。

   这里让顶栏容器与 .list / .hero-inner 用同一套宽度规则：
     ≥1001px → 1000px 居中（左边缘 (视口-1000)/2）
     768–1000px → 768px 居中（与 .list 在平板档的宽度一致，见下方媒体查询）
     ≤767px  → 满宽 + 左右 2% 内边距（与 .list 的 margin:0 2% 对齐）
   max-width:100% 是兜底：视口窄于 1000px 时宽度自动收缩，不会撑出横向滚动条。
   顶栏自身的底色仍是通栏（.navbar 承载背景），所以只有内容缩进、底色不断开。 */
.navbar-wrap{width:1000px;max-width:100%;margin:0 auto;display:flex;align-items:center;height:50px;padding:0}
.navbar-brand{
  flex:0 0 auto;display:flex;align-items:center;height:50px;padding:0 12px 0 0;
  font-size:19px;font-weight:700;color:var(--brand-dk);letter-spacing:1px;white-space:nowrap;
  font-family:var(--serif);
}
.navbar-brand span{color:var(--gold);margin-left:2px}
/* 顶栏分类：8 个分类平铺。
   顶栏现在的构成只有「品牌 + 8 分类（+ 手机端的分类按钮）」，
   比放收藏按钮时少约 200px 的固有宽度，所以内边距可以用回 14px 的舒展值。
   悬停时底部升起一条金色短线，替代原站整块变底的反馈。 */
.nav-menu{display:flex;flex:1 1 auto;min-width:0;list-style:none;margin:0;padding:0}
.nav-menu>li{position:relative}
.nav-menu>li>a{
  position:relative;display:block;padding:15px 14px;font-size:14px;color:var(--ink-2);
  line-height:20px;white-space:nowrap;transition:color .16s,background-color .16s;
}
.nav-menu>li>a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px;border-radius:2px 2px 0 0;
  background-image:linear-gradient(90deg,var(--gold),#E2C179,var(--gold));
  transition:left .22s ease,right .22s ease;
}
.nav-menu>li>a:hover,.nav-menu>li:hover>a{
  color:var(--brand-dk);background-color:rgba(47,93,80,.06);
}
.nav-menu>li>a:hover::after{left:14px;right:14px}
.nav-cat-btn{
  display:none;margin-left:auto;height:32px;padding:0 12px;border:1px solid #ccc;border-radius:999px;
  background:#fff;font-size:13px;color:#333;cursor:pointer;font-family:inherit;
}
.navbar-clear{clear:both}

/* ══════════ 一键收藏（首页「最新网址」条按钮 + 引导浮层） ══════════
   现实说明：Chrome / Edge / Safari / 新版 Firefox 出于安全考虑，已禁止网页用
   脚本替用户写入书签（否则任何站点都能往你书签栏塞东西），只有 IE 与老版
   Firefox 还留有接口。所以这里分两条路走：
     · 能调接口的 → 直接写入，真正的「一键」；
     · 调不到的   → 弹浮层，按平台给真人操作步骤（PC 显快捷键、手机显浏览器
                    菜单路径），并附网址复制按钮兜底。
   不假装能一键完成 —— 把实话写给用户，转化率反而更高。 */
.fav-mask{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;padding:18px;
  background:rgba(22,32,28,.62);
  display:none;align-items:center;justify-content:center;
}
.fav-mask.open{display:flex;animation:fav-fade .18s ease-out}
@keyframes fav-fade{from{opacity:0}to{opacity:1}}
.fav-dialog{
  position:relative;width:100%;max-width:440px;background:#fff;border-radius:16px;
  padding:26px 26px 20px;border:1px solid rgba(182,139,54,.30);
  box-shadow:0 24px 60px rgba(14,24,20,.42);
  animation:fav-pop .2s ease-out;overflow:hidden;
}
.fav-dialog::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,rgba(182,139,54,0),#D8B15C 30%,#F0D79A 50%,#D8B15C 70%,rgba(182,139,54,0));
}
@keyframes fav-pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.fav-x{
  position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;background:transparent;
  font-size:24px;line-height:1;color:#C3BCAD;cursor:pointer;font-family:inherit;
  border-radius:50%;transition:background-color .16s,color .16s;
}
.fav-x:hover{color:var(--brand-dk);background-color:var(--brand-lt)}
.fav-dialog h3{
  margin:0 0 8px;font-size:20px;font-weight:700;color:var(--brand-dk);
  font-family:var(--serif);letter-spacing:.04em;
}
.fav-sub{margin:0 0 14px;font-size:13.5px;line-height:1.82;color:var(--ink-2)}
.fav-sub b{color:var(--brand)}
.fav-steps{margin:0 0 14px;padding:0;list-style:none;counter-reset:fav}
.fav-steps li{
  position:relative;padding:9px 0 9px 36px;font-size:14px;line-height:1.75;color:var(--ink);
  counter-increment:fav;border-bottom:1px dashed var(--line-soft);
}
.fav-steps li:last-child{border-bottom:0}
.fav-steps li::before{
  content:counter(fav);position:absolute;left:0;top:10px;width:23px;height:23px;border-radius:50%;
  background-image:linear-gradient(180deg,#3D7464,#2F5D50);
  color:#fff;font-size:12.5px;line-height:23px;text-align:center;
  box-shadow:0 0 0 1px rgba(182,139,54,.32);
}
.fav-steps b{color:#A8542F}
.fav-note{margin:-6px 0 12px;font-size:12.5px;color:var(--ink-3)}
.fav-copy{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:11px 13px;
  background:#FBF7EC;border:1px solid var(--line);border-radius:10px;font-size:12.5px;color:var(--ink-2);
}
.fav-copy code{
  font-family:Consolas,Menlo,Monaco,monospace;font-size:12.5px;color:var(--brand-dk);
  word-break:break-all;user-select:all;
}
.fav-copy button{
  margin-left:auto;height:28px;padding:0 14px;border:1px solid var(--brand);border-radius:999px;
  background:#fff;color:var(--brand);font-size:12.5px;font-family:inherit;cursor:pointer;
  transition:background-color .16s,color .16s;
}
.fav-copy button:hover{background:var(--brand);color:#fff}

/* ══════════ 最新网址提示条 ══════════
   原站是一条顶部红色大字（#center_tip），改为暖金底圆角提示条：
   保留「醒目」的作用，但融入整体色调，并容纳收藏按钮。 */
#center_tip{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
  max-width:1000px;margin:16px auto 0;padding:12px 18px;
  color:var(--ink);font-size:14px;line-height:1.6;text-align:center;
  background-image:linear-gradient(180deg,#FDFAF2,#F7F0DE);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 20px -16px rgba(96,76,44,.5);
}
#center_tip b{font-weight:600;color:var(--brand-dk);letter-spacing:.02em}
.tip-fav{
  display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 15px;
  border:1px solid var(--brand);border-radius:999px;background:#fff;color:var(--brand);
  font-size:13.5px;font-family:inherit;line-height:1;white-space:nowrap;cursor:pointer;
  transition:background-color .16s,color .16s,box-shadow .16s;
}
.tip-fav:hover{background:var(--brand);color:#fff;box-shadow:0 6px 14px -6px rgba(47,93,80,.6)}
.tip-fav .fav-star{margin-right:2px}

/* ══════════ 分类区块（版式沿用原站，装饰层重做） ══════════ */
/* 原站：1160px 蓝白径向渐变条；本站：金色渐隐线 + 中央菱形 */
.copyright_list{
  display:block;position:relative;width:auto;max-width:1000px;height:11px;
  margin:30px auto 0;overflow:visible;
  background-image:linear-gradient(90deg,
    rgba(182,139,54,0),rgba(182,139,54,.34) 22%,rgba(182,139,54,.34) 78%,rgba(182,139,54,0));
  background-size:100% 1px;background-position:center center;background-repeat:no-repeat;
}
.copyright_list::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-4px 0 0 -4px;
  background:var(--gold-lt);border:1px solid var(--gold);transform:rotate(45deg);
}
/* 原站：300×40 实心蓝色方条。本站：衬线大字 + 两侧渐隐金线。
   scroll-margin-top 是顺带补的体验修复 —— 顶栏是 sticky，
   从导航点分类进来时标题会正好被顶栏盖住。
   语义：此元素是分类区标题，实际用的是 h2 标签。原本是个 div，全站一个标题层级都没有；
      换成 h2 后必须显式写 font-weight:400 抹掉浏览器给 h2 的默认加粗，
      否则标题会比原来粗一档。字号/字距/颜色本来就是显式写的，不受影响。
   （注：写 CSS 注释时不要出现尖括号的标签字面量 —— 构建校验按标签开闭配对计数，
     注释里写一个没有闭合的标签会直接把「div 平衡」这项判成失败。） */
.titleh_list{
  display:flex;align-items:center;gap:20px;
  width:auto;max-width:1000px;height:auto;line-height:1.45;
  margin:24px auto 14px;padding:0 14px;
  background:none;border-radius:0;overflow:visible;text-align:center;
  font-size:23px;font-weight:400;letter-spacing:.06em;color:var(--brand-dk);font-family:var(--serif);
  scroll-margin-top:74px;
}
.titleh_list::before,.titleh_list::after{
  content:"";flex:1 1 0;height:1px;min-width:24px;
}
.titleh_list::before{
  background-image:linear-gradient(90deg,rgba(182,139,54,0),rgba(182,139,54,.55));
}
.titleh_list::after{
  background-image:linear-gradient(90deg,rgba(182,139,54,.55),rgba(182,139,54,0));
}
.titleh_list a{color:var(--brand-dk)}
.titleh_list a:hover{color:var(--gold)}
.list::after{content:"";display:block;clear:both}

/* 原站：直角白卡 + 单层硬阴影，四列紧贴。
   本站：圆角白卡 + 柔和多层阴影；间隙用「与页面同色的透明边框」造出来
   （border-box 下 width:25% 的算术完全不变，所以不会把四列挤掉行）。 */
.shop{
  float:left;overflow:hidden;width:25%;margin:0;padding:16px 10px 14px;
  border:7px solid transparent;border-radius:15px;
  background-color:var(--card);background-clip:padding-box;
  box-shadow:0 1px 2px rgba(96,76,44,.10),0 8px 18px -12px rgba(96,76,44,.28);
  transition:background-color .2s,transform .2s,box-shadow .2s;
}
.shop:hover{
  background-color:#FCF7EC;transform:translateY(-2px);
  box-shadow:0 3px 6px rgba(96,76,44,.12),0 16px 28px -14px rgba(47,93,80,.42);
}
.shop-info{
  display:block;overflow:hidden;padding:0 8px;margin-top:5px;height:22px;
  line-height:22px;color:var(--ink-2);font-size:12.5px;
  text-align:center;word-wrap:break-word;
}
/* 书名现为 h3 标签：.shop-info 只有 22px 高且 overflow:hidden，
   h3 默认的上下外边距（1em）会把书名顶出可视区，所以 margin:0 是必需的，不是可选项。 */
.shop-info h3{margin:0;font-weight:700;font-size:15px;color:var(--ink);font-family:var(--serif);letter-spacing:.01em}
.shop:hover .shop-info h3{color:var(--brand-dk)}
.shop-info span{
  display:inline-block;height:20px;padding:0 10px;line-height:20px;font-size:12px;
  color:var(--brand);background:var(--brand-lt);border-radius:999px;vertical-align:middle;
}

/* 主内容容器：撑开 body（flex 容器）剩余的全部高度，实现页脚贴底。
   flex:1 0 auto = 可放大、不压缩、基准高度按内容算 —— 长页面时退化为普通块。 */
.page-body{flex:1 0 auto;width:100%}

/* ══════════ 页脚（原站 #1D1A18 黑棕平底 → 墨绿 + 顶部烫金线） ══════════ */
.footer{
  position:relative;padding:28px 20px;margin-top:48px;
  background-image:linear-gradient(180deg,#22302A,#1A2420);color:var(--foot-ink);
}
.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,
    rgba(182,139,54,0),#C9A252 22%,#F0D79A 50%,#C9A252 78%,rgba(182,139,54,0));
}
.footer .container-fluid{max-width:1000px;margin:0 auto}
.footer p{margin:0 0 6px;font-size:13.5px;line-height:2.1;color:rgba(233,223,202,.86)}
.footer a,.footer a:focus{color:var(--foot-ink)}
.footer a:hover{color:#F0D79A;text-decoration:underline}
.footer-note{font-size:12.5px;color:rgba(233,223,202,.6);line-height:1.95}
.footer .mailto{color:#F0D79A}

/* ══════════ 键盘可访问性 ══════════ */
/* 此前全站没有任何焦点样式，Tab 键走一遍完全看不出焦点落在哪（WCAG 2.4.7）。
   用 :focus-visible 而非 :focus —— 只有键盘操作才出现描边，
   鼠标点击不会留下一圈多余的边框。 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;
}
.navbar a:focus-visible,.footer a:focus-visible,.hero a:focus-visible{outline-color:#F0D79A}

/* 键盘用户的第一个 Tab 位：直接跳到正文，不用逐个穿过 8 个分类。
   非聚焦状态下移出视口，不影响任何视觉。 */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000000;
  padding:10px 18px;background:var(--brand-dk);color:#fff;
  border-radius:0 0 8px 0;font-size:13.5px;
}
.skip-link:focus{left:0}

/* 只有屏幕阅读器能读到的文字。搜索框在视觉设计上没有文字标签，
   但无障碍上必须有，用它的同时不影响任何视觉。 */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 尊重「减弱动态效果」系统偏好（WCAG 2.3.3）：
   卡片悬停上浮、浮层淡入、平滑滚动全部停用，避免前庭不适。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .shop:hover{transform:none}
}

/* ══════════ 文档页（免责声明 / 版权声明 / 隐私政策 / 联系我们 / 404） ══════════ */
/* 这些页面复用首页与详情页的容器宽度规则（.wrap 三档），
   外观上是一张与详情页面板同源的白卡，不引入新的视觉语言。 */
.doc{
  background-color:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(96,76,44,.05),0 10px 22px -18px rgba(96,76,44,.32);
  padding:30px 34px 34px;margin-top:16px;
}
.doc h1{
  font-family:var(--serif);font-size:25px;font-weight:700;color:var(--brand-dk);
  margin:0 0 6px;letter-spacing:.04em;
}
.doc .doc-date{
  font-size:12.5px;color:var(--ink-3);margin:0 0 20px;
  padding-bottom:16px;border-bottom:1px solid var(--line-soft);
}
.doc h2{
  font-family:var(--serif);font-size:16.5px;font-weight:700;color:var(--brand-dk);
  margin:26px 0 10px;padding-left:11px;border-left:3px solid var(--gold);
}
.doc h2:first-of-type{margin-top:4px}
.doc p{margin:0 0 12px;font-size:14px;line-height:1.95;color:var(--ink-2)}
.doc ul{margin:0 0 12px;padding-left:22px}
.doc li{font-size:14px;line-height:1.95;color:var(--ink-2);margin-bottom:6px}
/* 排除按钮：.doc a 的特异性（0,1,1）高于 .btn-primary 的（0,1,0），
   不排除的话「返回首页」按钮会被染成竹青色，压在同样是竹青的按钮底上，
   文字基本看不见（404 页截图上发现的）。 */
.doc a:not(.btn){color:var(--brand)}
.doc a:not(.btn):hover{color:var(--gold)}
.doc .doc-mail{
  font-family:Consolas,Menlo,Monaco,monospace;background:#FBF7EC;border:1px solid var(--line);
  border-radius:6px;padding:2px 9px;font-size:13px;color:#A8542F;
}
.doc .todo,.footer .todo{
  color:#A8542F;background:#FBEFD9;border:1px dashed #E0C79A;
  border-radius:6px;padding:1px 7px;font-size:12.5px;
}
.doc-404{text-align:center;padding:56px 34px}
.doc-404 .n{
  font-family:var(--serif);font-size:72px;font-weight:700;color:var(--brand-dk);
  line-height:1;margin:0 0 12px;
}
.doc-404 p{font-size:14.5px;color:var(--ink-2);margin:0 0 24px}
@media screen and (max-width:767px){
  .doc{padding:22px 18px 26px}
  .doc h1{font-size:21px}
  .doc-404{padding:40px 18px}
  .doc-404 .n{font-size:56px}
}

/* ══════════ 手机端全屏分类菜单 ══════════ */
.overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;
  background-image:linear-gradient(160deg,rgba(24,48,40,.97),rgba(14,26,22,.985));
  visibility:hidden;
  transition:transform .5s,visibility 0s .5s;transform:translateY(100%);
  overflow:auto;
}
.overlay.open{visibility:visible;transition:transform .5s;transform:translateY(0)}
.overlay-close{text-align:right;padding:16px 20px}
.overlay-close button{
  background:transparent;border:0;color:#F0D79A;font-size:30px;line-height:1;cursor:pointer;font-family:inherit;
}
.overlay nav{padding:6px 4% 30px;display:flex;flex-wrap:wrap}
.overlay .col-xs-6{width:50%;margin:10px 0;padding:0 8px;box-sizing:border-box}
.overlay .col-xs-6 a{
  display:block;color:#F2EBD9;font-weight:300;font-size:24px;line-height:2;font-family:var(--serif);
}
.overlay .col-xs-6 a:hover{color:#F0D79A}

/* ══════════════════════════════════════════════════════════════
   详情页（新增页面，共用同一套令牌）
   ══════════════════════════════════════════════════════════════ */
.wrap{width:1000px;margin:0 auto;padding-bottom:10px;overflow:hidden}
.crumb{font-size:13px;color:var(--ink-3);padding:14px 2px;line-height:1.8}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:var(--brand)}
.crumb i{font-style:normal;margin:0 6px;color:#D2C9B6}

.book-head{
  position:relative;overflow:hidden;
  background-image:linear-gradient(180deg,#FFFFFF,#FDFBF6);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(96,76,44,.06),0 12px 26px -18px rgba(96,76,44,.34);
  padding:22px 24px;
}
/* 左侧竹青→烫金的竖向书脊线 */
.book-head::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background-image:linear-gradient(180deg,#3A7361,#B68B36);
}
.book-title{
  margin:0 0 13px;font-size:26px;font-weight:700;color:var(--brand-dk);
  line-height:1.42;font-family:var(--serif);word-wrap:break-word;
}
.book-title span{font-size:13.5px;font-weight:400;color:var(--ink-3);margin-left:10px;font-family:inherit}
.book-meta{font-size:13px;color:var(--ink-2);line-height:2.1}
.book-meta i{font-style:normal;color:#D8CFBD;margin:0 9px}
.book-meta b{font-weight:400;color:var(--ink)}
.book-meta .st-ok{color:#2E7A57}
.book-meta .st-run{color:#B1683A}
.book-tags{margin:14px 0 0;line-height:1}
/* 标签有两种：分类是真链接（跳到首页对应分类），作者 / 热度 / 状态是纯文字 ——
   它们本来就没有对应页面，做成空锚链接是假的可点，点了只会跳到页顶。
   （写 CSS 注释时同样别写标签字面量，会干扰构建校验的空锚检测。） */
.book-tags a,.book-tags .tag-plain{
  display:inline-block;padding:4px 12px;margin:0 7px 7px 0;font-size:12.5px;
  color:var(--brand);background:var(--brand-lt);border:1px solid #D6E6DF;border-radius:999px;
}
.book-tags a{transition:background-color .16s,color .16s,border-color .16s}
.book-tags a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn{
  display:inline-block;padding:11px 28px;font-size:15px;line-height:1.2;border-radius:999px;
  border:1px solid transparent;cursor:pointer;font-family:inherit;text-align:center;
  transition:background-color .16s,color .16s,border-color .16s,box-shadow .16s;
}
.btn-primary{
  background-image:linear-gradient(180deg,#3A7361,#2F5D50);color:#fff;border-color:#2A5449;
  box-shadow:0 4px 12px -4px rgba(47,93,80,.55);
}
.btn-primary:hover{background-image:linear-gradient(180deg,#2F5D50,#254B40);color:#fff}
.btn-ghost{background:#fff;color:var(--brand);border-color:#BCD6CC;margin-left:10px}
.btn-ghost:hover{background:var(--brand-lt);color:var(--brand-dk);border-color:var(--brand)}
.btn-sm{padding:7px 20px;font-size:13.5px}

.book-body{margin-top:14px;overflow:hidden}
.book-col-main{float:left;width:676px}
.book-col-side{float:right;width:312px}
.panel{
  background-color:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(96,76,44,.05),0 10px 22px -18px rgba(96,76,44,.32);
  margin-bottom:14px;overflow:hidden;
}
.panel-hd{
  position:relative;padding:0 16px;height:46px;line-height:46px;font-size:15.5px;
  color:var(--brand-dk);border-bottom:1px solid var(--line-soft);
  background-image:linear-gradient(180deg,#FCFAF4,#F7F2E7);
}
/* 面板标题现为 h2 标签：字号与行高一律 inherit 自 .panel-hd（15.5px / 46px），
   只复位 margin。h2 的默认字重 700 与本主题原设计一致，视觉零变化。 */
.panel-hd h2{margin:0;font-size:inherit;line-height:inherit;font-weight:700;font-family:var(--serif);letter-spacing:.04em}
/* 原站是整条 3px 宝蓝左边线；本站改为居中一小段烫金竖条 */
.panel-hd::before{
  content:"";position:absolute;left:0;top:50%;width:3px;height:18px;margin-top:-9px;
  border-radius:0 3px 3px 0;background-image:linear-gradient(180deg,#C9A252,#B68B36);
}
.panel-bd{padding:14px 16px}

.intro{font-size:14px;line-height:1.95;color:var(--ink-2)}
.intro p{margin:0 0 11px}
.intro p:last-child{margin-bottom:0}

.chapter-list{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:0;padding:0;list-style:none}
.chapter-list li{border-bottom:1px dashed var(--line-soft);min-width:0}
.chapter-list li a{
  display:block;padding:9px 2px;font-size:13.5px;color:var(--ink-2);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  transition:color .16s,padding-left .16s;
}
.chapter-list li a:hover{color:var(--brand);padding-left:8px}
/* 分类目录（分类分页列表）—— 面包屑复用全站统一的 .crumb，
   它自带 14px 顶部内边距，分类页顶部才不会贴着导航栏。 */
.cat-title{font-size:22px;margin:0 0 16px;font-family:var(--serif);color:var(--ink)}
.cat-title em{font-style:normal;font-size:13px;color:#9aa7b4;margin-left:10px;font-weight:400}
.cat-more{margin:10px 0 0;text-align:center}
.cat-more a{font-size:13.5px;color:var(--brand)}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin:24px 0 0}
.pager a,.pager span{
  padding:6px 11px;border:1px solid var(--line);border-radius:7px;
  font-size:13px;color:var(--ink-2);background:#fff;
}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager .pg-on{
  background-image:linear-gradient(180deg,#E7C778,#CDA24A);
  color:#2A2213;border-color:#CDA24A;font-weight:600;
}
.pager .pg-off{color:#c9c2b4}
.pager .pg-gap{border:0;background:none;color:#9aa7b4}
/* 免费试读 —— 详情页入口 + 独立阅读页 */
.trial-enter{margin:12px 0 2px;text-align:center}
.trial-enter a{
  display:inline-block;padding:10px 22px;border-radius:999px;font-size:14px;font-weight:600;
  color:#2A2213;background-image:linear-gradient(180deg,#E7C778 0%,#CDA24A 52%,#B68B36 100%);
}
.trial-enter a:hover{filter:brightness(1.06)}
.trial-page{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:26px 30px 30px;box-shadow:0 2px 14px rgba(0,0,0,.04);
}
.trial-nav{background:#FBF7EC;border:1px dashed #DFD2B6;border-radius:12px;
  padding:12px 16px 6px;margin:0 0 22px}
.trial-nav-hd{font-size:13px;color:#8A7B5C;margin-bottom:6px}
.trial-ch{padding:22px 0 6px;border-top:1px dashed var(--line)}
.trial-ch h2{
  margin:0 0 14px;font-size:19px;font-weight:700;color:var(--ink);
  font-family:var(--serif);padding-left:12px;border-left:3px solid var(--brand);
}
.trial-ch p{margin:0 0 14px;font-size:16px;line-height:2.0;color:var(--ink-2);text-indent:2em}
.trial-back{margin:10px 0 0;text-align:right}
.trial-back a{font-size:13px;color:#9aa7b4}
.trial-back a:hover{color:var(--brand)}
.trial-back-end{text-align:center;margin-top:26px;padding-top:16px;border-top:1px dashed var(--line)}
@media (max-width:760px){
  .trial-page{padding:18px 16px 22px;border-radius:0}
  .trial-ch p{font-size:15.5px;line-height:1.95}
}

.dl-box{background:#FBF7EC;border:1px dashed #DFD2B6;border-radius:12px;padding:6px 14px 4px}
.dl-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:10px 0;border-bottom:1px dashed #E8DEC8}
.dl-row:last-child{border-bottom:0}
.dl-label{flex:0 0 76px;font-size:13.5px;color:var(--ink-2)}
.dl-code{
  font-family:Consolas,Menlo,Monaco,monospace;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:3px 10px;font-size:13px;color:#A8542F;letter-spacing:1.5px;user-select:all;
}
.dl-tip{font-size:12.5px;color:var(--ink-3);line-height:1.95;padding:2px 0 8px}

/* 侧栏列表：链接 + 右侧数字。**必须用 flex 排一行** ——
   原来 .side-cat 的 a 是 display:block（独占整行），后面的 span 又用 float:right，
   浮动元素排在块级之后会被挤到下一行，于是「玄幻奇幻小说」和数字「42」分了家。 */
.rel-list li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:1px dashed var(--line-soft);padding:8px 0}
.rel-list li:last-child{border-bottom:0}
.rel-list li a{
  flex:1 1 auto;min-width:0;
  font-size:13.5px;color:var(--ink-2);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:color .16s;
}
.rel-list li a:hover{color:var(--brand)}
.rel-list li span{flex:0 0 auto;color:var(--ink-3);font-size:12.5px;line-height:1.5}
.side-cat{padding:0;margin:0;list-style:none}
.side-cat li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:1px dashed var(--line-soft)}
.side-cat li:last-child{border-bottom:0}
.side-cat li a{
  flex:1 1 auto;min-width:0;padding:9px 2px;font-size:13.5px;color:var(--ink-2);
  transition:color .16s,padding-left .16s;
}
.side-cat li a:hover{color:var(--brand);padding-left:6px}
.side-cat li span{flex:0 0 auto;color:var(--ink-3);font-size:12.5px}

/* ══════════ 响应式（断点条件与原站逐条一致，仅视觉属性有调整） ══════════ */
/* 原创修复（这一档不是原站行为）：原站 .list 没有基础规则，只在断点里定义，
   于是 1025–1199px 落在所有断点之外，主容器失去宽度约束、卡片墙满宽铺开
   （平板横屏高发：iPad 9th 横 1080 / 10.9 横 1180 / Air 横 1180 / Pro 11 横 1194）。
   同时 ≤1024 档只写了 width 没写 margin，1001–1024px 主容器会贴左不居中。
   把原来 min-width:1200 的那一档提前到 min-width:1001，两个问题一并解决：
   1025–1199 恢复 1000px 居中，1001–1024 补上 margin:auto，768–1000 与 ≥1200 零影响。 */
@media screen and (min-width:1001px){
  .list{width:1000px;margin:0 auto}
}
@media screen and (max-width:1024px){
  .list{width:1000px}
}
/* 详情页右栏 312px + 左栏 676px = 988px，视口 ≤1000px 时放不下会掉行。
   原边界 991 会留下 992–1000 这 9px 的破档，这里提到 1000 与 .list 的
   768px 档边界对齐：视口 ≤1000 一律单列堆叠。 */
@media screen and (max-width:1000px){
  .book-col-main{width:100%;float:none}
  .book-col-side{width:100%;float:none;margin-top:12px}
}
/* 平板竖屏：8 个分类 + 品牌的固有宽度约 760px，768–1000px 这一段偏紧。
   解法是「缩字号 + 缩内边距」把分类条压到能用宽度以内，让 8 个分类
   在任何平板竖屏上都全部可见（实测 768px 也能装下），而不是只显示 7 个。
   两级细分只是为了不让宽一点的平板显得空：窄档用 13px、宽档用 13.5px。
   .nav-menu 保留 overflow-x:auto 作为兜底 —— 万一以后分类变多，
   它会安全降级成「分类条横向滑动」，而不是把整页撑出横向滚动条。
   注意：overflow 只在窄屏开，宽屏必须保持 visible（默认值）。 */
@media screen and (min-width:768px) and (max-width:819px){
  .nav-menu{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
  .nav-menu::-webkit-scrollbar{display:none;height:0}
  .nav-menu>li>a{padding:15px 10px;font-size:13px}
  .nav-menu>li>a:hover::after{left:10px;right:10px}
  .navbar-brand{font-size:16px;padding:0 8px 0 0}
}
@media screen and (min-width:820px) and (max-width:1000px){
  .nav-menu{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
  .nav-menu::-webkit-scrollbar{display:none;height:0}
  .nav-menu>li>a{padding:15px 12px;font-size:13.5px}
  .nav-menu>li>a:hover::after{left:12px;right:12px}
  .navbar-brand{font-size:17px;padding:0 10px 0 0}
}
@media screen and (min-width:768px) and (max-width:1000px){
  .list{width:768px;margin:0 auto}
  /* 顶栏跟随内容区一起收成 768px —— 这一档卡片区就是 768px 居中，
     顶栏若保持 1000px 就会比内容区宽出去，左边缘重新错位。 */
  .navbar-wrap{width:768px}
  /* 详情页容器同步统一：原先用的是「100% + 左右 2% 内边距」（内容 736px），
     改成与首页 .list 完全相同的 768px 居中，三个容器左边缘才真正一条线。 */
  .wrap{width:768px;margin:0 auto}
  .shop{width:50%;padding:14px 10px 12px}
  /* 原站这一档把 .shop-info 定成 48px（给长书名换行留位），
     实际排下来三行信息之间空得厉害、卡片显虚胖。
     这里收到 28px —— 平板卡片宽约 384px，书名一行放得下。
     若日后书名普遍变长，把这一档的 height 调回 48px 即可。 */
  .shop-info{height:28px;line-height:28px;margin-top:3px}
  .hero-logo{font-size:26px}
}
@media screen and (max-width:767px){
  .list{width:auto;margin:0 2%}
  /* 详情页容器同步统一：原为「100% + padding:0 2%」，视觉等价，
     换成 margin 是为了与 .list 共用同一个 2%，日后改比例不会两处脱节。 */
  .wrap{width:auto;margin:0 2%}
  /* 与 .list 的 margin:0 2% 同一个比例，保证手机端顶栏与卡片区左对齐 */
  .navbar-wrap{padding:0 2%}
  .shop{width:50%;padding:14px 8px 12px}
  /* 同上：48px → 26px，手机卡片宽约 165px，演示书名一行放得下 */
  .shop-info{height:26px;line-height:26px;margin-top:2px}
  .navbar{
    background-color:var(--paper);background-image:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-bottom:1px solid var(--line);box-shadow:none;
  }
  .navbar-wrap{background-image:linear-gradient(135deg,#1B3A31,#2F5D50);height:52px}
  .navbar-brand{height:52px;color:#fff;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .navbar-brand span{color:#F0D79A}
  .nav-menu{display:none}
  /* 顶栏只剩「品牌 + 分类按钮」，按钮用 auto 推到最右 */
  .nav-cat-btn{display:block;margin-left:auto;border-color:rgba(255,255,255,.5);background:transparent;color:#fff}
  .fav-dialog{padding:22px 18px 16px;border-radius:14px}
  .fav-dialog h3{font-size:18px}
  .fav-sub{font-size:13px}
  .fav-steps li{font-size:13.5px;padding:8px 0 8px 33px}
  .fav-copy{font-size:12px}
  .hero{padding:24px 14px 22px}
  .hero-logo{font-size:23px;letter-spacing:.05em}
  .hero-slogan{font-size:12.5px;margin-bottom:14px;letter-spacing:.1em}
  .hero-form{flex-wrap:wrap;border-radius:12px}
  .hero-cat{display:none}
  .hero-input{flex:1 1 100%;height:50px;font-size:16px;border-radius:12px 12px 0 0;text-align:center}
  .hero-btn{flex:1 1 100%;height:46px;font-size:17px;border-radius:0 0 12px 12px}
  .hero-hot{text-align:center;font-size:12.5px;margin-top:14px}
  #center_tip{font-size:13.5px;margin:12px 2% 0;padding:11px 12px;gap:8px;border-radius:10px}
  .tip-fav{height:28px;padding:0 12px;font-size:13px}
  .titleh_list{font-size:20px;margin:20px auto 12px;gap:14px}
  .copyright_list{max-width:92%;margin-top:24px}
  /* 详情页移动端 */
  .book-head{padding:16px 14px 16px 18px}
  .book-title{font-size:20px}
  .btn{display:block;width:100%;padding:12px 0}
  .btn-ghost{margin:9px 0 0}
  .chapter-list{grid-template-columns:1fr}
  .panel-bd{padding:12px 13px}
  .panel-hd{padding:0 14px;height:44px;line-height:44px}
  .dl-label{flex:0 0 100%}
}
@media screen and (max-width:480px){
  .list{width:auto;margin:0 2%}
  .shop{width:50%;padding:13px 7px 11px}
  .shop-info{height:26px;line-height:26px;margin-top:2px}
  #center_tip{font-size:13px}
  .tip-fav{height:26px;padding:0 10px;font-size:12.5px}
  .titleh_list{font-size:18px;letter-spacing:.04em;margin:20px auto 12px}
}