:root { --ink: #292033; --plum: #4d2b57; --aubergine: #301d3c; --green: #9ac25c; --cream: #fffaf2; --paper: #ffffff; --muted: #766e7f; --line: #e9e1ea; --shadow: 0 18px 46px rgba(61, 39, 70, .10); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "Microsoft YaHei", "PingFang SC", sans-serif; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; max-width: 100%; object-fit: cover; }
.shell { width: min(1200px, calc(100% - 48px)); margin-right: auto; margin-left: auto; }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255, 250, 242, .94); border-bottom: 1px solid rgba(77, 43, 87, .08); backdrop-filter: blur(12px); }
.header-inner { min-height: 86px; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px 14px 14px 4px; color: white; background: var(--plum); font-size: 22px; font-weight: 800; }
.brand-copy { display: grid; line-height: 1.1; }.brand-copy strong { font-size: 19px; }.brand-copy small { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: 1.3px; }
.main-nav { margin-left: auto; }.main-nav ul { display: flex; margin: 0; padding: 0; list-style: none; gap: 4px; }.nav-item a { display: inline-flex; align-items: center; gap: 5px; padding: 9px 8px; border-radius: 10px; color: #645b6a; font-size: 13px; white-space: nowrap; }.nav-item a:hover, .nav-item.is-active a { color: var(--plum); background: #f0e6f1; font-weight: 700; }.nav-icon { color: var(--green); font-size: 15px; }.menu-toggle { display: none; }
.hero { min-height: 500px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; margin-top: 54px; padding: 52px 68px; border-radius: 30px; overflow: hidden; background: linear-gradient(125deg, #f0e8ee 0%, #f7f0e4 100%); }.eyebrow { margin: 0 0 8px; color: #72983e; font-size: 11px; font-weight: 800; letter-spacing: 2px; }.hero h1, .hero h1 a { margin: 0; color: var(--plum); font-family: Georgia, serif; font-size: clamp(48px, 7vw, 82px); letter-spacing: 5px; line-height: 1.1; }.hero-copy > p:not(.eyebrow) { max-width: 500px; margin: 22px 0; font-size: 17px; }.hero-actions { display: flex; align-items: center; gap: 24px; }.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 20px; border: 1px solid var(--plum); border-radius: 12px; color: white; background: var(--plum); font-weight: 700; transition: transform .2s; }.button:hover { transform: translateY(-2px); }.button.secondary { color: var(--plum); background: transparent; }.button-light { color: var(--plum); border-color: white; background: white; }.text-link { color: var(--plum); font-size: 14px; font-weight: 700; }.hero-art { position: relative; }.hero-art img { aspect-ratio: 4 / 5; border-radius: 150px 150px 22px 22px; box-shadow: var(--shadow); }.hero-float { position: absolute; right: -32px; bottom: 34px; max-width: 220px; padding: 16px; border-radius: 15px; color: white; background: var(--aubergine); box-shadow: var(--shadow); }.hero-float span, .hero-float small { display: block; font-size: 11px; opacity: .75; }.hero-float strong { display: block; margin: 3px 0; }
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 34px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }.stat-strip div { display: grid; justify-items: center; border-right: 1px solid var(--line); }.stat-strip div:last-child { border: 0; }.stat-strip strong { color: var(--plum); font-family: Georgia, serif; font-size: 25px; }.stat-strip span { color: var(--muted); font-size: 12px; }
.section { margin-top: 105px; }.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 26px; }.section h2, .section-heading h2 { margin: 0; color: var(--aubergine); font-family: Georgia, "Microsoft YaHei", serif; font-size: clamp(28px, 3vw, 38px); line-height: 1.2; }.category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.category-card { min-height: 155px; display: grid; grid-template-columns: 50px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; padding: 22px; border-radius: 18px; background: var(--paper); box-shadow: 0 8px 25px rgba(61,39,70,.05); }.category-card:hover { outline: 2px solid #d7e8ba; }.category-icon { grid-row: span 2; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: var(--plum); background: #edf5df; font-size: 23px; }.category-card strong { align-self: end; }.category-card small { align-self: start; color: var(--muted); line-height: 1.55; }
.comic-grid { display: grid; gap: 20px; }.four-up { grid-template-columns: repeat(4, 1fr); }.five-up { grid-template-columns: repeat(5, 1fr); }.comic-card { overflow: hidden; border-radius: 17px; background: var(--paper); box-shadow: 0 9px 25px rgba(61,39,70,.07); }.comic-cover { position: relative; display: block; overflow: hidden; }.comic-cover img { aspect-ratio: 3 / 4; transition: transform .35s; }.comic-card:hover img { transform: scale(1.04); }.chapter-tag { position: absolute; bottom: 10px; left: 10px; padding: 3px 8px; border-radius: 7px; color: white; background: rgba(48,29,60,.87); font-size: 11px; }.comic-meta { padding: 13px 14px 15px; }.comic-meta h3 { margin: 0; font-size: 15px; line-height: 1.4; }.comic-meta p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.editorial-banner { min-height: 350px; display: grid; grid-template-columns: 1fr 370px; gap: 38px; align-items: center; margin-top: 105px; padding: 44px 64px; overflow: hidden; border-radius: 24px; color: white; background: var(--plum); }.editorial-banner h2 { margin: 0; font-family: Georgia, serif; font-size: 37px; line-height: 1.25; }.editorial-banner p:not(.eyebrow) { max-width: 520px; opacity: .82; }.editorial-banner img { height: 280px; border-radius: 18px; }.editorial-banner .eyebrow { color: #cde5a4; }
.split-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 34px; }.ranking-panel { padding: 35px; border-radius: 20px; background: var(--paper); }.ranking-panel ol { margin: 18px 0; padding: 0; list-style: none; }.ranking-panel li { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }.rank-no { color: var(--green); font-family: Georgia, serif; font-size: 21px; font-weight: 700; }.ranking-panel li a { font-weight: 700; }.ranking-panel li small { color: var(--muted); font-size: 11px; }.spotlight-card { display: grid; grid-template-columns: 45% 1fr; overflow: hidden; border-radius: 20px; background: #ece1e9; }.spotlight-card img { height: 100%; min-height: 360px; }.spotlight-card div { align-self: center; padding: 30px; }.spotlight-card span { color: #7c5985; font-size: 12px; font-weight: 800; }.spotlight-card h3 { margin: 10px 0; font-family: Georgia, serif; font-size: 30px; }.spotlight-card p { color: #655b68; }.spotlight-card a { color: var(--plum); font-weight: 700; }
.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.feature-row article { display: grid; grid-template-columns: 125px 1fr; gap: 15px; padding: 14px; border-top: 2px solid var(--green); background: var(--paper); }.feature-row img { aspect-ratio: 3 / 4; }.feature-row span { color: #759542; font-size: 11px; font-weight: 700; }.feature-row h3 { margin: 6px 0; font-size: 18px; line-height: 1.3; }.feature-row p { color: var(--muted); font-size: 12px; line-height: 1.6; }.feature-row a { color: var(--plum); font-size: 13px; font-weight: 700; }
.reading-guide { display: grid; grid-template-columns: .75fr 1.25fr; gap: 50px; align-items: start; padding: 38px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.guide-steps span { color: var(--green); font-family: Georgia, serif; font-size: 28px; }.guide-steps h3 { margin: 8px 0; }.guide-steps p { color: var(--muted); font-size: 13px; }.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.review-grid article { min-height: 230px; padding: 28px; border-radius: 18px; color: white; background: var(--aubergine); }.review-grid article:nth-child(2) { color: var(--ink); background: #d9e8bd; }.review-grid article:nth-child(3) { color: var(--ink); background: #efdcd4; }.review-grid span { font-size: 12px; font-weight: 800; opacity: .7; }.review-grid h3 { margin: 10px 0; font-family: Georgia, serif; font-size: 24px; line-height: 1.25; }.review-grid p { font-size: 13px; opacity: .82; }.review-grid a { font-size: 13px; font-weight: 700; }.shelf-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; padding: 44px 60px; border-radius: 22px; background: #e9e0e3; }.shelf-preview > div > p:not(.eyebrow) { max-width: 440px; color: #5f5663; }.shelf-books { display: flex; align-items: end; justify-content: center; min-height: 210px; }.shelf-books span { width: 53px; height: 185px; display: grid; place-items: center; margin-left: -2px; border-radius: 7px 7px 2px 2px; color: white; background: var(--plum); writing-mode: vertical-rl; font-weight: 700; }.shelf-books span:nth-child(2) { height: 155px; background: #a5c96c; }.shelf-books span:nth-child(3) { height: 205px; background: #784f82; }.shelf-books span:nth-child(4) { height: 145px; background: #c68275; }.update-rail { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; }.update-rail ol { margin: 0; padding: 0; list-style: none; }.update-rail li { display: grid; grid-template-columns: 70px 1fr auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px dashed #cfc3d0; }.update-rail time { color: var(--plum); font-weight: 800; }.update-rail strong { font-size: 14px; }.update-rail span { color: var(--muted); font-size: 12px; }.about-section { display: grid; grid-template-columns: 160px 1fr; gap: 38px; padding: 42px 0; border-top: 1px solid var(--line); }.about-badge { display: grid; width: 138px; height: 138px; place-items: center; border-radius: 50%; color: white; background: var(--plum); font-family: Georgia, serif; font-size: 75px; }.about-section p:not(.eyebrow) { max-width: 850px; color: #62586a; }.faq-section { margin-bottom: 105px; }.faq-section details { padding: 16px 0; border-bottom: 1px solid var(--line); }.faq-section summary { cursor: pointer; color: var(--plum); font-weight: 700; }.faq-section p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.app-band { padding: 66px 0; color: white; background: var(--aubergine); }.app-band-inner { display: grid; grid-template-columns: 1fr 180px; gap: 70px; align-items: center; }.app-band h2 { margin: 0; font-family: Georgia, serif; font-size: 36px; }.app-band p:not(.eyebrow) { max-width: 680px; opacity: .76; }.app-band .eyebrow { color: #bdd98f; }.qr-card { display: grid; justify-items: center; padding: 16px; border-radius: 15px; color: var(--ink); background: #fff; line-height: 1.35; }.qr-card small { color: var(--muted); font-size: 11px; }.qr-grid { display: grid; grid-template-columns: repeat(3, 26px); gap: 4px; margin-bottom: 7px; }.qr-grid i { width: 26px; height: 26px; background: var(--aubergine); }.qr-grid i:nth-child(2),.qr-grid i:nth-child(4),.qr-grid i:nth-child(6),.qr-grid i:nth-child(8) { background: var(--green); }.site-footer { padding: 28px 0; background: #211626; color: #d5ccd6; }.footer-inner { display: flex; justify-content: space-between; gap: 20px; align-items: center; }.footer-inner strong { color: white; }.footer-inner p { margin: 3px 0; font-size: 12px; }
.inner-main, .reader-main { padding-top: 28px; }.breadcrumb { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 13px; }.breadcrumb a { color: var(--plum); }.category-hero { margin-top: 36px; padding: 48px; border-radius: 22px; color: white; background: linear-gradient(120deg, var(--aubergine), var(--plum)); }.category-hero h1 { margin: 0; font-family: Georgia, serif; font-size: 45px; }.category-hero p:not(.eyebrow) { max-width: 650px; opacity: .8; }.count-label { color: var(--muted); font-size: 13px; }.seo-copy { margin-bottom: 105px; padding: 32px 40px; border-left: 5px solid var(--green); background: #f0f4e8; }.seo-copy h2 { font-size: 25px; }.seo-copy p { margin-bottom: 0; color: #5d6654; }.reader-header { margin-top: 24px; text-align: center; }.reader-header h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(34px, 5vw, 54px); }.reader-info { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 13px; }.reading-note { max-width: 760px; margin: 22px auto 0; padding: 14px 20px; border-radius: 12px; color: #64556c; background: #efe7f0; text-align: left; font-size: 13px; }.reader-content { width: min(800px, calc(100% - 32px)); margin: 45px auto 0; }.reader-page { margin: 0 0 24px; overflow: hidden; border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); }.reader-page img { aspect-ratio: 4 / 5; }.reader-page figcaption { padding: 9px 14px; color: var(--muted); font-size: 12px; }.chapter-end { margin-top: 45px; margin-bottom: 105px; text-align: center; }.end-mark { display: inline-grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: var(--plum); background: #e5f0ce; }.chapter-end h2 { margin: 10px 0 0; font-size: 29px; }.chapter-end p { color: var(--muted); }.chapter-actions { display: flex; justify-content: center; gap: 13px; margin-top: 22px; }
@media (max-width: 900px) { .header-inner { min-height: 72px; flex-wrap: wrap; padding: 12px 0; }.menu-toggle { display: grid; gap: 4px; width: 36px; margin-left: auto; padding: 8px; border: 0; background: transparent; }.menu-toggle span { height: 2px; background: var(--plum); }.main-nav { display: none; width: 100%; margin: 0; }.main-nav.is-open { display: block; }.main-nav ul { flex-wrap: wrap; }.hero { grid-template-columns: 1fr 280px; gap: 28px; padding: 40px; }.four-up { grid-template-columns: repeat(2, 1fr); }.five-up { grid-template-columns: repeat(3, 1fr); }.feature-row { grid-template-columns: 1fr; }.editorial-banner { grid-template-columns: 1fr 280px; padding: 35px; }.app-band-inner { grid-template-columns: 1fr 150px; }.update-rail { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 620px) { .shell { width: min(100% - 28px, 1200px); }.hero { grid-template-columns: 1fr; min-height: auto; margin-top: 27px; padding: 32px 23px; }.hero-art { max-width: 300px; margin: 0 auto; }.hero-float { right: -10px; bottom: 15px; }.stat-strip { grid-template-columns: repeat(2, 1fr); gap: 16px; }.stat-strip div:nth-child(2) { border-right: 0; }.stat-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.section { margin-top: 70px; }.section-heading { align-items: start; gap: 15px; }.category-grid { grid-template-columns: 1fr; }.four-up, .five-up { grid-template-columns: repeat(2, 1fr); gap: 14px; }.comic-meta { padding: 11px; }.comic-meta h3 { font-size: 14px; }.comic-meta p { display: none; }.editorial-banner { grid-template-columns: 1fr; margin-top: 70px; padding: 31px 24px; }.editorial-banner h2 { font-size: 29px; }.editorial-banner img { height: 200px; }.split-layout, .reading-guide, .shelf-preview { grid-template-columns: 1fr; gap: 25px; }.spotlight-card { grid-template-columns: 1fr; }.spotlight-card img { min-height: 250px; }.guide-steps, .review-grid { grid-template-columns: 1fr; }.review-grid article { min-height: 0; }.about-section { grid-template-columns: 1fr; gap: 20px; }.about-badge { width: 88px; height: 88px; font-size: 48px; }.update-rail li { grid-template-columns: 55px 1fr; }.update-rail li span { grid-column: 2; }.app-band { padding: 52px 0; }.app-band-inner { grid-template-columns: 1fr; gap: 28px; }.qr-card { width: 150px; }.footer-inner { display: block; }.footer-inner > div { margin-bottom: 14px; }.category-hero { margin-top: 25px; padding: 32px 24px; }.category-hero h1 { font-size: 34px; }.reader-content { width: min(100% - 20px, 800px); margin-top: 30px; }.reader-page { border-radius: 7px; }.chapter-actions { flex-direction: column; align-items: center; }.chapter-actions .button { width: min(100%, 240px); } }