:root { --ink:#272438; --muted:#706d7b; --paper:#fffdf9; --lav:#f0ecff; --purple:#6a45d5; --pink:#ff7f9e; --line:#e9e4ee; --shadow:0 15px 35px rgba(57,39,91,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei", "PingFang SC", sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.shell { width:min(1200px, calc(100% - 40px)); margin:0 auto; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,253,249,.92); backdrop-filter:blur(16px); border-bottom:1px solid rgba(233,228,238,.75); }
.header-inner { min-height:78px; display:flex; align-items:center; gap:30px; }
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; font-size:20px; font-weight:900; }
.brand-mark { display:grid; width:38px; height:38px; place-items:center; color:#fff; border-radius:13px 13px 4px 13px; background:linear-gradient(135deg,var(--purple),var(--pink)); transform:rotate(-4deg); }
.main-nav { display:flex; align-items:center; justify-content:flex-end; gap:5px; width:100%; }
.main-nav a { padding:8px 11px; border-radius:10px; color:#5c5868; font-size:14px; white-space:nowrap; }
.main-nav a span { margin-right:5px; color:var(--purple); }
.main-nav a:hover, .main-nav a.active { background:var(--lav); color:var(--purple); font-weight:700; }
.menu-toggle { display:none; border:0; background:var(--lav); color:var(--purple); border-radius:10px; font-size:21px; padding:4px 10px; }
.hero { margin-top:48px; min-height:455px; display:grid; grid-template-columns:1.05fr .95fr; gap:55px; align-items:center; padding:48px 60px; border-radius:30px; overflow:hidden; background:linear-gradient(120deg,#f2edff 0%,#fff5f8 100%); }
.eyebrow { margin:0 0 8px; color:var(--purple); font-size:13px; font-weight:800; letter-spacing:1.5px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(33px,5vw,58px); line-height:1.16; letter-spacing:-2px; }
h2 { font-size:clamp(25px,3vw,34px); line-height:1.25; letter-spacing:-1px; }
.hero h1 { margin-bottom:18px; }
.hero-copy > p:not(.eyebrow) { color:var(--muted); max-width:540px; font-size:16px; }
.hero-art { position:relative; }
.hero-art > img { width:100%; aspect-ratio:1.2; object-fit:cover; border-radius:24px; box-shadow:var(--shadow); }
.float-note { position:absolute; right:-20px; bottom:24px; display:grid; grid-template-columns:auto 1fr; column-gap:8px; padding:13px 18px; background:#fff; box-shadow:var(--shadow); border-radius:15px; }
.float-note span { grid-row:span 2; color:var(--pink); font-size:22px; }.float-note strong { font-size:13px; }.float-note small { color:var(--muted); font-size:11px; }
.hero-actions { display:flex; gap:12px; margin-top:25px; }.btn { display:inline-block; padding:11px 19px; border-radius:12px; font-weight:800; font-size:14px; }.primary { color:#fff; background:var(--purple); box-shadow:0 7px 16px rgba(106,69,213,.26); }.ghost { border:1px solid #d8cfef; color:var(--purple); }.light { color:var(--purple); background:#fff; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); margin-top:28px; background:#fff; border:1px solid var(--line); border-radius:18px; }.stats div { padding:19px 28px; text-align:center; border-right:1px solid var(--line); }.stats div:last-child { border:0; }.stats strong,.stats span { display:block; }.stats strong { font-size:22px; color:var(--purple); }.stats span { color:var(--muted); font-size:12px; }
.section { margin-top:88px; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:25px; }.section-heading h2 { margin:0; }.section-heading > a,.text-link { color:var(--purple); font-weight:800; font-size:14px; }.section-heading > p { color:var(--muted); margin:0; font-size:14px; }
.comic-grid { display:grid; gap:22px; }.comic-grid.three { grid-template-columns:repeat(3,1fr); }.comic-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 5px 15px rgba(58,40,90,.04); transition:.2s transform; }.comic-card:hover { transform:translateY(-4px); }.cover { position:relative; display:block; background:#eee; overflow:hidden; }.cover img { width:100%; aspect-ratio:1.04; object-fit:cover; }.tag { position:absolute; top:13px; left:13px; padding:3px 9px; background:rgba(255,255,255,.9); border-radius:20px; font-size:12px; font-weight:800; color:var(--purple); }.card-body { padding:16px 17px; }.card-body h3 { margin-bottom:7px; font-size:18px; }.card-body p { min-height:45px; margin-bottom:10px; color:var(--muted); font-size:13px; line-height:1.7; }.meta { color:var(--pink); font-size:12px; font-weight:700; }
.category-section { padding:42px; background:#faf7ff; border-radius:26px; }.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.category-card { display:flex; align-items:center; gap:13px; min-height:98px; padding:18px; border:1px solid #e7ddfb; border-radius:16px; background:#fff; }.category-icon { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:13px; background:var(--lav); color:var(--purple); font-size:22px; }.category-card strong,.category-card small { display:block; }.category-card strong { font-size:15px; }.category-card small { color:var(--muted); font-size:11px; line-height:1.5; margin-top:3px; }.category-card b { margin-left:auto; color:var(--pink); }.category-card.romance .category-icon { color:#d65b80; background:#fff0f4; }.category-card.fantasy .category-icon { color:#4c77c6; background:#edf3ff; }.category-card.thriller .category-icon { color:#6d6477; background:#f1eef2; }
.update-layout { display:grid; grid-template-columns:1.5fr .7fr; gap:28px; }.update-list { border-top:1px solid var(--line); }.update-list > a { display:grid; grid-template-columns:38px 58px 1fr auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }.update-list img { width:58px; height:58px; object-fit:cover; border-radius:12px; }.update-no { color:#b7aebe; font-weight:900; }.update-list strong,.update-list small { display:block; }.update-list small { overflow:hidden; color:var(--muted); font-size:12px; white-space:nowrap; text-overflow:ellipsis; }.update-list em { color:var(--purple); font-size:12px; font-style:normal; }.update-side { padding:35px; border-radius:22px; color:#fff; background:linear-gradient(145deg,#7855d5,#af7ddb); }.update-side h2 { font-size:27px; }.update-side p:not(.eyebrow) { color:#f2ecff; font-size:14px; }.update-side .eyebrow,.update-side .text-link { color:#fff; }
.ranking-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.rank-item { display:grid; grid-template-columns:auto 86px 1fr; gap:13px; align-items:center; padding:14px; background:#fff; border:1px solid var(--line); border-radius:17px; }.rank-item img { width:86px; height:105px; object-fit:cover; border-radius:12px; }.rank-num { color:var(--pink); font-weight:900; font-size:20px; }.rank-item p { margin-bottom:1px; color:var(--purple); font-size:12px; }.rank-item h3 { margin-bottom:7px; font-size:16px; }.rank-item div span { color:var(--muted); font-size:11px; }
.reading-guide { display:grid; grid-template-columns:.7fr 1.3fr; align-items:center; gap:50px; padding:38px 43px; background:#fff3ed; border-radius:25px; }.reading-guide h2 { margin:0; }.reading-guide ol { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0; padding:0; list-style:none; }.reading-guide li span { display:block; margin-bottom:4px; color:var(--pink); font-weight:900; }.reading-guide li strong { font-size:16px; }.reading-guide li p { margin:3px 0 0; color:var(--muted); font-size:12px; }.spotlight { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:25px; }.spotlight-image img { width:100%; height:100%; min-height:310px; object-fit:cover; }.spotlight-copy { padding:45px; align-self:center; }.spotlight-copy p:not(.eyebrow) { color:var(--muted); }.schedule { padding:40px; border-radius:25px; background:#f6f8ff; }.week-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }.day { min-height:130px; padding:15px 10px; border-radius:15px; text-align:center; background:#fff; }.day.today { color:#fff; background:var(--purple); }.day span,.day strong,.day small { display:block; }.day strong { margin:5px 0; font-size:23px; }.day small { font-size:11px; line-height:1.4; }.about { display:grid; grid-template-columns:.85fr 1.15fr; gap:65px; padding:0 40px; }.about h2 { margin:0; }.about p { color:var(--muted); }.faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.faq-grid details { padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:14px; }.faq-grid summary { cursor:pointer; font-weight:800; }.faq-grid p { margin:10px 0 0; color:var(--muted); font-size:13px; }.app-section { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:30px; margin-top:88px; margin-bottom:80px; padding:33px 45px; border-radius:25px; color:#fff; background:linear-gradient(115deg,#272143,#6c49cb); }.app-section h2 { margin-bottom:7px; }.app-section p:not(.eyebrow) { margin:0; color:#e8e2fd; font-size:14px; }.app-section .eyebrow { color:#ffd4dd; }.qr-brand { display:grid; place-items:center; width:86px; height:86px; background:#fff; border-radius:13px; color:var(--purple); }.qr-brand span { display:grid; place-items:center; width:43px; height:43px; border:2px solid var(--purple); font-size:23px; font-weight:900; }.qr-brand small { margin-top:4px; font-size:10px; font-weight:800; }.site-footer { padding:42px 0 0; color:#c9c4d1; background:#242131; }.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding-bottom:35px; }.footer-brand { color:#fff; font-weight:900; font-size:20px; }.footer-title { color:#fff; font-weight:800; }.site-footer a { display:block; margin:5px 0; font-size:13px; }.site-footer p { font-size:13px; }.copyright { padding:16px 0; border-top:1px solid #3b3749; font-size:12px; }
.listing-page { padding-top:24px; padding-bottom:75px; }.breadcrumb { display:flex; gap:9px; margin-bottom:26px; color:var(--muted); font-size:13px; }.breadcrumb a::after { content:'›'; margin-left:9px; color:#aaa; }.listing-hero { padding:47px 55px; margin-bottom:30px; border-radius:25px; background:linear-gradient(120deg,#f2edff,#fff6ef); }.listing-hero h1 { margin-bottom:12px; font-size:42px; }.listing-hero p:not(.eyebrow) { max-width:700px; margin:0; color:var(--muted); }.filter-row { display:flex; gap:11px; align-items:center; margin-bottom:26px; }.filter-row span,.filter-row a { padding:7px 13px; border:1px solid var(--line); border-radius:18px; font-size:13px; }.filter-row span { color:#fff; background:var(--purple); border-color:var(--purple); }.seo-copy { max-width:940px; margin:60px auto 0; padding:32px 38px; border-left:4px solid var(--pink); background:#fff8f4; }.seo-copy h2 { font-size:23px; }.seo-copy p { margin:0; color:var(--muted); }.reader { max-width:920px; padding-top:24px; padding-bottom:70px; }.reader-head { padding:38px 10px 26px; text-align:center; }.reader-head h1 { font-size:42px; }.reader-head > p:not(.eyebrow) { color:var(--muted); }.reader-meta { display:flex; justify-content:center; gap:22px; color:var(--muted); font-size:12px; }.reading-note { display:flex; gap:15px; padding:17px 21px; margin-bottom:26px; background:#f5f1ff; border-radius:12px; }.reading-note strong { flex:0 0 auto; color:var(--purple); }.reading-note p { margin:0; color:#5f586f; font-size:13px; }.comic-pages { display:grid; gap:20px; }.comic-pages figure { margin:0; overflow:hidden; background:#f5f2f4; border-radius:13px; }.comic-pages img { width:100%; aspect-ratio:820/1080; object-fit:cover; }.comic-pages figcaption { padding:7px 12px; color:var(--muted); font-size:11px; text-align:right; }.chapter-end { padding:45px 20px; text-align:center; }.chapter-end span { color:var(--pink); font-size:26px; }.chapter-end h2 { margin:7px 0; font-size:26px; }.chapter-end p { margin:0; color:var(--muted); }.chapter-nav { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }.chapter-nav a { padding:13px 10px; border:1px solid var(--line); border-radius:11px; text-align:center; color:var(--purple); font-weight:800; font-size:14px; }.chapter-nav .back { color:#fff; border-color:var(--purple); background:var(--purple); }
@media (max-width:850px) { .header-inner { min-height:65px; }.menu-toggle { display:block; margin-left:auto; }.main-nav { display:none; position:absolute; top:65px; left:20px; right:20px; width:auto; padding:10px; flex-direction:column; align-items:stretch; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }.main-nav.open { display:flex; }.main-nav a { padding:10px 13px; }.hero { grid-template-columns:1fr; gap:28px; padding:38px 30px; }.hero-art { max-width:530px; }.comic-grid.three,.category-grid { grid-template-columns:repeat(2,1fr); }.update-layout,.reading-guide,.about { grid-template-columns:1fr; gap:28px; }.ranking-grid { grid-template-columns:1fr; }.rank-item { grid-template-columns:auto 100px 1fr; }.week-grid { grid-template-columns:repeat(4,1fr); }.app-section { grid-template-columns:auto 1fr; }.app-section .btn { grid-column:span 2; text-align:center; }.footer-grid { grid-template-columns:1.5fr 1fr 1fr; } }
@media (max-width:560px) { .shell { width:min(100% - 24px,1200px); }.hero { margin-top:25px; padding:31px 22px; border-radius:21px; }.hero h1 { font-size:39px; }.float-note { right:8px; bottom:10px; }.stats { grid-template-columns:repeat(2,1fr); }.stats div:nth-child(2) { border-right:0; }.stats div { padding:13px 8px; }.section { margin-top:58px; }.section-heading { align-items:start; flex-direction:column; gap:8px; }.comic-grid.three,.category-grid,.faq-grid { grid-template-columns:1fr; }.category-section { padding:28px 17px; }.update-list > a { grid-template-columns:29px 52px 1fr; }.update-list em { display:none; }.reading-guide { padding:30px 25px; }.reading-guide ol { grid-template-columns:1fr; gap:12px; }.spotlight { grid-template-columns:1fr; }.spotlight-copy { padding:31px 25px; }.schedule { padding:27px 15px; }.week-grid { grid-template-columns:repeat(2,1fr); }.day { min-height:100px; }.about { padding:0; }.app-section { grid-template-columns:1fr; padding:30px 25px; text-align:center; }.qr-brand { margin:auto; }.app-section .btn { grid-column:auto; }.footer-grid { grid-template-columns:1fr; gap:20px; }.listing-hero { padding:34px 25px; }.listing-hero h1,.reader-head h1 { font-size:34px; }.reader-meta { flex-direction:column; gap:4px; }.reading-note { display:block; }.reading-note p { margin-top:6px; }.chapter-nav { grid-template-columns:1fr; }.chapter-nav a { padding:10px; } }