@charset "UTF-8";
:root { --ink:#20233a; --muted:#6d7188; --paper:#fffdf9; --pink:#ff5470; --purple:#6853c8; --line:#e9e7f0; --soft:#f6f3ff; }
* { 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%; }
.site-header { width:min(1200px, calc(100% - 32px)); margin:22px auto 0; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.94); box-shadow:0 10px 30px rgba(65,50,120,.06); }
.header-inner { min-height:72px; display:flex; align-items:center; gap:24px; padding:10px 18px; }
.brand { display:flex; align-items:center; gap:9px; font-size:1.3rem; font-weight:800; white-space:nowrap; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; color:#fff; background:linear-gradient(135deg,var(--pink),var(--purple)); border-radius:11px; }
.main-nav { display:flex; flex:1; justify-content:space-between; gap:5px; overflow-x:auto; scrollbar-width:none; }
.main-nav a { display:flex; align-items:center; gap:5px; padding:9px 10px; border-radius:10px; color:var(--muted); font-size:.88rem; white-space:nowrap; }
.main-nav a:hover, .main-nav a.active { color:var(--purple); background:var(--soft); font-weight:700; }
main { width:min(1200px, calc(100% - 32px)); margin:0 auto; }
.hero { display:grid; grid-template-columns:1.04fr .96fr; align-items:center; min-height:450px; gap:58px; margin:52px 0 86px; padding:45px 58px; overflow:hidden; border-radius:32px; background:linear-gradient(120deg,#f0ecff,#fff4f3); }
.eyebrow { margin:0 0 8px; color:var(--pink); font-size:.78rem; font-weight:800; letter-spacing:.13em; }
h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(2.5rem,5vw,4.5rem); line-height:1.12; letter-spacing:-.05em; } h2 { font-size:clamp(1.6rem,3vw,2.25rem); line-height:1.25; } h3 { line-height:1.3; }
.hero-copy > p:not(.eyebrow) { max-width:420px; color:var(--muted); font-size:1.08rem; }.hero h1 a { color:var(--purple); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:25px; }.button { display:inline-block; padding:11px 20px; border-radius:999px; font-weight:700; }.primary { color:#fff; background:var(--purple); }.ghost { border:1px solid #c8c0ea; color:var(--purple); }
.hero-art { position:relative; }.hero-image { width:100%; aspect-ratio:4/3; object-fit:cover; border:9px solid #fff; border-radius:22px; box-shadow:18px 18px 0 #dcd3fb; }.floating-note { position:absolute; right:-15px; bottom:20px; padding:9px 14px; color:#fff; background:var(--pink); border-radius:12px; font-weight:700; transform:rotate(-3deg); }
.section { margin:0 0 86px; }.section-title { display:flex; align-items:end; justify-content:space-between; gap:22px; margin-bottom:24px; }.section-title h2 { margin:0; }.section-title > a,.text-link { color:var(--purple); font-weight:700; white-space:nowrap; }.section-title > p { margin:0; color:var(--muted); }
.five-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }.comic-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; transition:transform .2s, box-shadow .2s; }.comic-card:hover { transform:translateY(-5px); box-shadow:0 12px 24px rgba(55,40,100,.11); }.cover { width:100%; aspect-ratio:3/4; object-fit:cover; }.card-copy { padding:13px; }.card-copy h3 { margin:8px 0 5px; font-size:.98rem; }.card-copy p { margin:0; color:var(--muted); font-size:.78rem; }.badge { padding:3px 7px; border-radius:999px; color:var(--pink); background:#fff0f2; font-size:.72rem; }
.trend-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; border-radius:18px; background:#e0dcef; }.trend-strip > div { display:grid; grid-template-columns:auto 1fr; column-gap:10px; padding:22px; background:#fbfaff; }.trend-strip span { grid-row:span 2; font-size:1.4rem; }.trend-strip p { margin:0; color:var(--muted); font-size:.86rem; }
.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.category-card { min-height:152px; padding:22px; border:1px solid var(--line); border-radius:18px; background:#fff; }.category-card span { font-size:1.7rem; }.category-card h3 { margin:7px 0 2px; }.category-card p { margin:0; color:var(--muted); font-size:.86rem; }.cat-1 { background:#fff4f4; }.cat-2 { background:#f4f1ff; }.cat-3 { background:#eefaff; }.cat-4 { background:#fff8ec; }.cat-5 { background:#f7f2ff; }.cat-6 { background:#f0fbf5; }.cat-7 { background:#fff2f8; }
.feature-story { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-radius:26px; background:var(--ink); color:#fff; }.feature-image { min-height:360px; }.wide-image { width:100%; height:100%; object-fit:cover; }.feature-copy { padding:54px; }.feature-copy p:not(.eyebrow) { color:#d9d9e4; }.feature-copy .text-link { color:#f9b8c5; }
.ranking-panel { padding:34px; border-radius:24px; background:var(--soft); }.rank-list { margin:0; padding:0; list-style:none; }.rank-list li { display:grid; grid-template-columns:70px 1fr 1fr auto; align-items:center; gap:15px; padding:17px 0; border-top:1px solid #ddd8ec; }.rank-list b { color:var(--pink); font-size:1.15rem; }.rank-list em { color:var(--muted); font-size:.86rem; font-style:normal; }.rank-list a { color:var(--purple); font-weight:700; }
.reading-guide { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; text-align:center; }.reading-guide > div { padding:22px; }.reading-guide span { display:grid; width:50px; height:50px; place-items:center; margin:0 auto 15px; color:var(--purple); border-radius:50%; background:var(--soft); font-size:1.4rem; }.reading-guide h3 { margin-bottom:7px; }.reading-guide p { margin:0; color:var(--muted); }
.quote-section { padding:55px; text-align:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.quote-section p { max-width:760px; margin:0 auto 12px; font-size:clamp(1.4rem,3vw,2rem); font-weight:700; }.quote-section span { color:var(--muted); }
.about-section { max-width:900px; margin-right:auto; margin-left:auto; text-align:center; }.about-section > p:last-child { color:var(--muted); font-size:1.03rem; }
.app-subscribe { display:flex; width:min(1200px,calc(100% - 32px)); align-items:center; justify-content:space-between; gap:34px; margin:0 auto 30px; padding:38px 52px; border-radius:24px; background:linear-gradient(115deg,#f8dce7,#e3defd); }.app-subscribe h2 { margin-bottom:10px; }.app-subscribe p:not(.eyebrow) { max-width:680px; color:#57516f; }.qr-card { display:grid; flex:0 0 150px; min-height:150px; place-items:center; padding:16px; color:#fff; background:var(--ink); border-radius:18px; text-align:center; }.qr-card span { display:grid; width:48px; height:48px; place-items:center; border:2px solid #fff; border-radius:11px; font-weight:800; }.qr-card b { font-size:.76rem; letter-spacing:.12em; }.qr-card small { color:#cecbd9; }.site-footer { display:flex; width:min(1200px,calc(100% - 32px)); justify-content:space-between; gap:15px; margin:0 auto 25px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; }.site-footer p { margin:0; }
.column-hero { margin:52px 0 48px; padding:48px; border-radius:26px; background:linear-gradient(130deg,#f0edff,#fff6ef); }.column-hero h1 { margin-bottom:12px; font-size:clamp(2.2rem,4vw,3.7rem); }.column-hero > p:last-child { max-width:650px; margin:0; color:var(--muted); }.breadcrumbs { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; color:var(--muted); font-size:.86rem; }.breadcrumbs a { color:var(--purple); }.channel-copy { padding:36px; border-radius:22px; background:#f8f8fd; }.channel-copy h2 { margin-bottom:10px; }.channel-copy p { max-width:760px; margin:0; color:var(--muted); }
.reader-main { width:min(920px,calc(100% - 32px)); }.reader-main .breadcrumbs { margin-top:42px; }.reader-header { margin-bottom:26px; text-align:center; }.reader-header h1 { margin-bottom:15px; font-size:clamp(2.2rem,4vw,3.5rem); }.reader-header div { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; color:var(--muted); font-size:.86rem; }.reading-note { margin-bottom:28px; padding:19px 24px; border-left:4px solid var(--pink); background:#fff5f7; }.reading-note h2 { margin-bottom:5px; font-size:1.15rem; }.reading-note p { margin:0; color:#5d596c; }.comic-reader { display:grid; gap:26px; }.comic-reader figure { margin:0; overflow:hidden; border-radius:16px; border:1px solid var(--line); background:#fff; }.reader-image { width:100%; aspect-ratio:16/10; object-fit:cover; }.comic-reader figcaption { padding:8px 14px; color:var(--muted); font-size:.78rem; }.chapter-end { margin:38px 0 24px; text-align:center; }.chapter-end span { color:var(--pink); font-size:1.7rem; }.chapter-end h2 { margin:2px 0 5px; font-size:1.35rem; }.chapter-end p { margin:0; color:var(--muted); }.chapter-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:78px; }.chapter-nav a { padding:12px; border:1px solid #d8d2ec; border-radius:12px; color:var(--purple); text-align:center; font-weight:700; }.chapter-nav a:nth-child(2) { color:#fff; border-color:var(--purple); background:var(--purple); }
@media (max-width:900px) { .header-inner { align-items:flex-start; flex-direction:column; gap:5px; }.main-nav { width:100%; justify-content:flex-start; }.hero { gap:30px; padding:36px; }.five-grid { grid-template-columns:repeat(3,1fr); }.category-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px) { .site-header,main,.app-subscribe,.site-footer { width:min(100% - 22px,1200px); }.site-header { margin-top:11px; }.header-inner { padding:9px 12px; }.main-nav a { padding:7px 8px; font-size:.8rem; }.hero { grid-template-columns:1fr; min-height:0; margin:30px 0 58px; padding:30px 22px; border-radius:23px; }.hero-art { max-width:390px; }.section { margin-bottom:58px; }.section-title { align-items:start; flex-direction:column; gap:8px; }.five-grid { grid-template-columns:repeat(2,1fr); gap:12px; }.comic-card:last-child { grid-column:span 2; max-width:calc(50% - 6px); justify-self:center; width:100%; }.trend-strip,.feature-story { grid-template-columns:1fr; }.trend-strip > div { padding:17px; }.category-grid { grid-template-columns:repeat(2,1fr); gap:11px; }.category-card { min-height:130px; padding:17px; }.feature-image { min-height:240px; }.feature-copy { padding:32px 25px; }.ranking-panel { padding:22px; }.rank-list li { grid-template-columns:42px 1fr auto; gap:8px; }.rank-list em { display:none; }.reading-guide { grid-template-columns:1fr; gap:5px; }.app-subscribe { align-items:flex-start; flex-direction:column; padding:30px 25px; }.site-footer { align-items:flex-start; flex-direction:column; }.column-hero { margin:30px 0 38px; padding:30px 23px; }.chapter-nav { grid-template-columns:1fr; }.reader-main .breadcrumbs { margin-top:28px; } }