:root{
  --leather-dark:#2e1b12;
  --leather:#4a2c1d;
  --leather-light:#6b422c;
  --paper:#f4e8cf;
  --paper-soft:#efdfc0;
  --paper-line:#d8c39c;
  --ink:#3a2a1c;
  --ink-soft:#6b543c;
  --accent:#b5462f;
  --accent-soft:#c96a48;
  --gold:#b98c46;
  --shadow:rgba(30,16,8,.35);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"PingFang SC","Microsoft YaHei","STKaiti","KaiTi",serif;
  background:
    radial-gradient(circle at 10% 10%, #5a3524 0%, transparent 45%),
    radial-gradient(circle at 90% 30%, #3f2418 0%, transparent 50%),
    linear-gradient(160deg,#2b1a10 0%,#3d2417 40%,#2a1910 100%);
  color:var(--ink);
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* 顶部导航 */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,#3a2315 0%,#2c1a10 100%);
  border-bottom:3px solid #1d0f08;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  padding:8px 14px;
}
.header-inner{
  max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.brand img{height:34px;width:34px;border-radius:8px;background:var(--paper);padding:3px;}
.brand span{color:var(--paper);font-size:20px;font-weight:700;letter-spacing:2px;text-shadow:0 2px 3px #000;}
.nav-links{
  display:flex;gap:6px;flex-wrap:wrap;list-style:none;flex:1;
}
.nav-links a{
  color:#e6d2ad;font-size:13px;padding:5px 10px;border-radius:14px;
  border:1px dashed transparent;transition:.25s;white-space:nowrap;
}
.nav-links a:hover{background:#57341f;border-color:var(--gold);color:#fff3dc;}
.header-dl{
  display:flex;gap:8px;flex-shrink:0;
}
.btn{
  display:inline-block;padding:8px 16px;border-radius:22px;font-size:14px;
  font-weight:600;transition:.25s;border:1px solid transparent;cursor:pointer;
}
.btn-android{background:linear-gradient(180deg,#5c9b63,#3d7a46);color:#fff;box-shadow:0 3px 0 #2a5530;}
.btn-ios{background:linear-gradient(180deg,#e3e0da,#c4beb2);color:#2e2118;box-shadow:0 3px 0 #978e7d;}
.btn:hover{transform:translateY(-2px);}
.btn-android:hover{box-shadow:0 5px 0 #2a5530;}
.btn-ios:hover{box-shadow:0 5px 0 #978e7d;}

/* 笔记本主容器 */
.notebook{
  max-width:1180px;margin:26px auto 40px;position:relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(150,120,80,.18) 34px 35px),
    linear-gradient(180deg,#f7ecd6 0%,#f1e2c2 100%);
  border-radius:10px;
  box-shadow:0 22px 50px rgba(0,0,0,.55), inset 0 0 40px rgba(160,120,70,.18);
  padding:46px 34px 40px 62px;
  border:2px solid #d9c6a0;
}
/* 装订环 */
.binding{
  position:absolute;left:-16px;top:22px;bottom:22px;width:34px;
  display:flex;flex-direction:column;justify-content:space-around;align-items:center;
}
.binding i{
  display:block;width:30px;height:13px;border-radius:50%;
  background:linear-gradient(180deg,#d8d2c4,#8d8574 60%,#5c5548);
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.notebook::before{
  content:"";position:absolute;left:44px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,#c85a4a 0 12px,transparent 12px 24px);
  opacity:.5;
}
/* 首屏 */
.hero{position:relative;padding-bottom:8px;}
.hero-title{
  font-size:clamp(26px,4.4vw,46px);line-height:1.3;color:var(--leather);
  font-weight:800;letter-spacing:1px;text-shadow:1px 2px 0 rgba(185,140,70,.35);
}
.hero-title em{
  font-style:normal;color:var(--accent);border-bottom:4px double var(--accent-soft);
}
.hero-sub{
  display:inline-block;margin-top:14px;font-size:15px;color:var(--ink-soft);
  transform:rotate(-1.5deg);font-family:"STKaiti","KaiTi",serif;
  background:rgba(185,140,70,.12);padding:4px 12px;border-left:3px solid var(--gold);
}
.hero-desc{margin-top:16px;max-width:640px;font-size:16px;color:#4a3826;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
.hero-actions .btn{padding:11px 24px;font-size:15px;}
.hero-note{margin-top:12px;font-size:13px;color:#8a7050;}
.hero-photo{
  position:absolute;right:0;top:0;width:250px;transform:rotate(3deg);
  background:#fffdf6;padding:9px 9px 30px;box-shadow:0 10px 22px var(--shadow);
  border:1px solid #e0d0b0;display:none;
}
.hero-photo img{width:100%;height:320px;object-fit:cover;}
.hero-photo figcaption{
  position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-family:"STKaiti","KaiTi",serif;color:#7a6040;font-size:13px;
}

/* 通用区块 */
.section{margin-top:54px;position:relative;}
.section-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.section-head h2{
  font-size:clamp(21px,2.6vw,28px);color:var(--leather);letter-spacing:1px;position:relative;padding-left:16px;
}
.section-head h2::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:6px;border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--gold));
}
.section-tip{
  font-family:"STKaiti","KaiTi",serif;color:var(--accent);font-size:14px;
  transform:rotate(-2deg);border-bottom:1px dashed var(--accent-soft);
}
.section p.lead{color:#52402c;font-size:15.5px;max-width:760px;}

/* 剧集卡片网格 */
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:18px;
}
.drama-card{
  background:#fffdf5;border:1px solid #e2d3b2;border-radius:6px;
  padding:7px 7px 10px;box-shadow:0 6px 14px rgba(80,50,20,.18);
  transition:transform .25s, box-shadow .25s;position:relative;
}
.drama-card:nth-child(odd){transform:rotate(-.9deg);}
.drama-card:nth-child(even){transform:rotate(.9deg);}
.drama-card:hover{transform:rotate(0) translateY(-6px);box-shadow:0 14px 24px rgba(80,50,20,.3);}
.drama-card .poster{
  width:100%;aspect-ratio:3/4.1;object-fit:cover;border-radius:3px;background:#e6dabd;
}
.drama-card h3{
  font-size:14.5px;color:var(--leather);margin-top:8px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.drama-card .tag{
  display:inline-block;font-size:11.5px;color:#8a6440;background:#f3e5c9;
  padding:1px 8px;border-radius:9px;margin-top:5px;
}
.drama-card .tape{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:58px;height:17px;background:rgba(200,180,120,.7);border:1px solid rgba(160,130,80,.5);
}

/* 双栏图文 */
.split{display:grid;grid-template-columns:1fr;gap:22px;align-items:center;margin-top:8px;}
.split .text-block h3{font-size:18px;color:var(--accent);margin-bottom:8px;}
.split .text-block p{color:#52402c;font-size:15px;margin-bottom:10px;}
.photo-frame{
  background:#fffdf6;padding:10px 10px 34px;border:1px solid #e2d3b2;
  box-shadow:0 10px 20px rgba(80,50,20,.25);position:relative;
}
.photo-frame img{width:100%;height:auto;object-fit:cover;border-radius:2px;}
.photo-frame figcaption{
  position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font-family:"STKaiti","KaiTi",serif;color:#8a7050;font-size:13px;
}

/* 手写旁注 */
.hand-note{
  font-family:"STKaiti","KaiTi",serif;color:#a04a30;font-size:15px;
  transform:rotate(-1.6deg);margin:14px 0;padding-left:16px;border-left:2px dashed #d3a37c;
}

/* 安装步骤 */
.steps{display:grid;grid-template-columns:1fr;gap:16px;counter-reset:step;}
.step{
  background:linear-gradient(180deg,#fbf3e0,#f2e4c6);
  border:1px solid #ddcaa5;border-radius:8px;padding:18px 20px 18px 62px;position:relative;
  box-shadow:0 4px 10px rgba(80,50,20,.12);
}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:16px;top:16px;width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-size:16px;box-shadow:0 3px 6px rgba(0,0,0,.25);
}
.step h3{font-size:16.5px;color:var(--leather);margin-bottom:5px;}
.step p{font-size:14.5px;color:#5a4834;}

/* 滚动评论 */
.marquee-wrap{
  overflow:hidden;border-top:2px solid #d9c6a0;border-bottom:2px solid #d9c6a0;
  padding:16px 0;background:rgba(255,250,235,.5);
}
.marquee{
  display:flex;gap:16px;width:max-content;animation:scrollX 38s linear infinite;
}
.marquee:hover{animation-play-state:paused;}
.comment{
  flex:0 0 auto;width:280px;background:#fffdf3;border:1px solid #e0d0ae;
  border-radius:10px;padding:13px 15px;box-shadow:0 4px 10px rgba(80,50,20,.12);
  transform:rotate(-.4deg);
}
.comment:nth-child(even){transform:rotate(.5deg);}
.comment .who{font-size:13px;color:var(--accent);font-weight:700;}
.comment p{font-size:14px;color:#54422f;margin-top:5px;}
@keyframes scrollX{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* 排行榜 */
.rank-list{list-style:none;display:grid;grid-template-columns:1fr;gap:10px;counter-reset:rank;}
.rank-list li{
  counter-increment:rank;display:flex;align-items:center;gap:14px;
  background:#fbf4e2;border:1px solid #e0d0ae;border-radius:8px;padding:10px 14px;
}
.rank-list li::before{
  content:counter(rank);font-weight:800;font-size:17px;color:var(--gold);
  width:26px;text-align:center;flex-shrink:0;
}
.rank-list li .rname{font-size:15px;color:var(--leather);font-weight:600;}
.rank-list li .rdesc{font-size:13px;color:#7a6244;margin-left:auto;text-align:right;}

/* 问答 */
.faq{display:grid;grid-template-columns:1fr;gap:12px;}
.faq details{
  background:#fbf4e2;border:1px solid #e0d0ae;border-radius:8px;padding:12px 16px;
}
.faq summary{
  cursor:pointer;font-size:15.5px;color:var(--leather);font-weight:700;list-style:none;position:relative;padding-left:20px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"？";position:absolute;left:0;color:var(--accent);}
.faq details p{font-size:14.5px;color:#5a4834;margin-top:8px;padding-left:20px;}

/* 特色标签栏 */
.feature-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
}
.feature-chip{
  background:#fbf4e2;border:1px dashed #cbb489;border-radius:10px;padding:14px;
  text-align:center;
}
.feature-chip strong{display:block;color:var(--accent);font-size:15px;margin-bottom:4px;}
.feature-chip span{font-size:13.5px;color:#6b543c;}

/* 搜索词 */
.keywords{margin-top:20px;font-size:13.5px;color:#7d6547;line-height:2;}
.keywords a{border-bottom:1px dotted #b99a6d;margin-right:4px;}

/* 页脚 */
.site-footer{
  max-width:1180px;margin:0 auto 30px;padding:20px 30px;color:#c2ab8b;
  font-size:12.5px;text-align:center;border-top:1px solid rgba(200,170,120,.25);
}
.site-footer a{color:#d9c2a0;}
.site-footer p{margin:4px 0;}
.site-footer time{color:#a58d6c;}

/* 弹窗 */
.modal-mask{
  position:fixed;inset:0;background:rgba(20,10,4,.65);z-index:99;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-mask.show{display:flex;}
.modal-box{
  background:#f7ecd6;border:2px solid #b99a6d;border-radius:10px;max-width:420px;width:100%;
  padding:24px 22px;box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.modal-box p{color:#5a3320;font-size:15px;margin-bottom:14px;}
.modal-box .copy-line{
  display:flex;gap:8px;align-items:center;background:#fffdf5;border:1px solid #ddcaa5;
  border-radius:8px;padding:9px 12px;font-size:13px;color:#4a3826;word-break:break-all;
}
.modal-box .copy-line span{flex:1;}
.modal-box .copy-line button{
  background:var(--accent);color:#fff;border:none;border-radius:6px;padding:6px 12px;
  font-size:13px;cursor:pointer;flex-shrink:0;
}
.modal-box .close-btn{
  margin-top:16px;width:100%;background:#4a2c1d;color:#f4e8cf;border:none;
  border-radius:22px;padding:10px;font-size:14px;cursor:pointer;
}

/* 响应式 768 */
@media (min-width:768px){
  .hero-photo{display:block;}
  .hero{min-height:340px;padding-right:290px;}
  .split{grid-template-columns:1.1fr .9fr;}
  .split.reverse{grid-template-columns:.9fr 1.1fr;}
  .split.reverse .photo-frame{order:-1;}
  .steps{grid-template-columns:1fr 1fr;}
  .rank-list{grid-template-columns:1fr 1fr;}
  .faq{grid-template-columns:1fr 1fr;}
  .notebook{padding:54px 48px 46px 76px;}
}
/* 响应式 1024 */
@media (min-width:1024px){
  .card-grid{grid-template-columns:repeat(5,1fr);}
  .hero-title{font-size:46px;}
  .notebook{margin-top:34px;}
  .hero-photo{width:280px;}
  .hero-photo img{height:360px;}
  .hero{padding-right:320px;min-height:380px;}
}