@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&display=swap');
:root { --ink:#242332; --muted:#727181; --pink:#f45e92; --pink-dark:#d9467b; --peach:#fff0f5; --cream:#fffaf6; --line:#eee8ea; --violet:#6f5ae7; --shadow:0 18px 45px rgba(74,50,70,.1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:'Noto Sans SC',sans-serif; line-height:1.7; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.shell { width:min(1200px,calc(100% - 40px)); margin:0 auto; }
.site-header { background:rgba(255,250,246,.92); border-bottom:1px solid rgba(238,232,234,.8); position:sticky; top:0; z-index:20; backdrop-filter:blur(16px); }
.header-inner { min-height:82px; display:flex; align-items:center; gap:30px; }
.brand,.footer-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark { width:42px; height:42px; display:grid; place-items:center; background:linear-gradient(135deg,var(--pink),#fd956e); color:#fff; border-radius:14px 14px 14px 4px; font:800 22px 'Outfit',sans-serif; box-shadow:0 7px 18px rgba(244,94,146,.25); }
.brand-copy { display:grid; line-height:1.15; }
.brand-copy strong { font-size:17px; letter-spacing:.08em; }.brand-copy small { color:var(--muted); font-size:10px; margin-top:4px; }
.main-nav { margin-left:auto; }.main-nav ul { margin:0; padding:0; display:flex; align-items:center; gap:3px; list-style:none; }.main-nav a { display:flex; gap:5px; align-items:center; padding:9px 8px; border-radius:10px; font-size:13px; white-space:nowrap; color:#545261; }.main-nav a i { font-size:16px; }.main-nav a:hover,.main-nav a.is-active { color:var(--pink-dark); background:var(--peach); font-weight:700; }.nav-toggle { display:none; border:0; background:var(--peach); border-radius:10px; color:var(--pink-dark); font-size:23px; padding:5px 9px; }
.hero { min-height:495px; margin-top:50px; padding:54px 68px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:60px; background:linear-gradient(110deg,#fff3f5 0%,#fffaf6 57%,#fff0e3 100%); border-radius:32px; overflow:hidden; position:relative; }.hero:before { content:''; width:310px; height:310px; position:absolute; border-radius:50%; background:#ffd8e6; right:-90px; top:-130px; }.kicker { color:var(--pink-dark); font:700 12px 'Outfit',sans-serif; letter-spacing:.16em; }.hero h1,.listing-hero h1,.reader-header h1 { margin:10px 0 14px; font-size:clamp(36px,5vw,60px); letter-spacing:-.065em; line-height:1.16; }.hero h1 a { text-decoration:underline; text-decoration-color:#f8b0c9; text-underline-offset:8px; }.hero p { max-width:520px; margin:0; color:#565464; font-size:16px; }.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:27px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:11px; font-weight:700; font-size:14px; transition:.2s; }.button:hover { transform:translateY(-2px); }.primary { background:var(--pink); color:#fff; box-shadow:0 9px 20px rgba(244,94,146,.23); }.ghost { border:1px solid #e9dbe0; background:#fff; color:#4e4b59; }.hero-stats { display:flex; gap:28px; margin:33px 0 0; }.hero-stats div { border-left:2px solid #f4b0c7; padding-left:10px; }.hero-stats dt { font:800 19px 'Outfit',sans-serif; }.hero-stats dd { margin:0; color:var(--muted); font-size:12px; }.hero-art { position:relative; z-index:1; }.hero-art>img { height:350px; width:100%; object-fit:cover; border-radius:150px 150px 26px 26px; box-shadow:var(--shadow); }.floating-note { position:absolute; bottom:20px; left:-34px; display:flex; gap:8px; align-items:center; background:#fff; border-radius:14px; padding:12px 15px; box-shadow:var(--shadow); font-size:12px; line-height:1.35; }.floating-note i { color:var(--pink); font-size:23px; }.floating-note strong { font:800 17px 'Outfit',sans-serif; }
.section-space { margin-top:92px; }.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:28px; }.section-heading h2,.about-section h2,.app-section h2,.spotlight-panel h2 { margin:6px 0; font-size:28px; line-height:1.25; letter-spacing:-.04em; }.section-heading p { margin:0; color:var(--muted); font-size:14px; }.text-link { color:var(--pink-dark); font-weight:700; font-size:14px; white-space:nowrap; }.featured-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:19px; }.comic-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:18px; transition:.25s; }.comic-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }.poster { position:relative; display:block; overflow:hidden; }.poster img { width:100%; aspect-ratio:3/4; object-fit:cover; transition:.4s; }.comic-card:hover .poster img { transform:scale(1.04); }.badge { position:absolute; left:10px; bottom:10px; padding:4px 9px; color:#fff; background:rgba(39,32,46,.72); border-radius:7px; font-size:11px; }.comic-info { padding:14px 15px 16px; }.eyebrow { color:var(--pink-dark); font-size:11px; font-weight:700; }.comic-info h3 { margin:3px 0 5px; font-size:16px; line-height:1.4; }.comic-info p { color:var(--muted); margin:0; font-size:12px; line-height:1.65; }.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.category-card { min-height:163px; padding:22px; border:1px solid var(--line); border-radius:16px; background:#fff; transition:.2s; }.category-card:hover { border-color:#f5adc6; background:var(--peach); }.category-card i { color:var(--violet); font-size:26px; }.category-card:nth-child(2n) i { color:var(--pink); }.category-card h3 { margin:9px 0 4px; font-size:17px; }.category-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }.update-strip { background:#fff; padding:35px 40px; border-radius:24px; border:1px solid var(--line); }.timeline-list { border-top:1px solid var(--line); }.timeline-list a { display:grid; grid-template-columns:72px 1fr 1fr; gap:20px; padding:13px 0; border-bottom:1px solid var(--line); align-items:center; font-size:14px; }.timeline-list time { color:var(--pink-dark); font:700 14px 'Outfit',sans-serif; }.timeline-list em { color:var(--muted); font-style:normal; text-align:right; font-size:13px; }.split-section { display:grid; grid-template-columns:1.4fr .8fr; gap:24px; }.rank-panel { background:#fff; padding:35px 38px; border:1px solid var(--line); border-radius:23px; }.rank-list { border-top:1px solid var(--line); }.rank-row { padding:10px 0; display:grid; grid-template-columns:40px 50px 1fr 26px; gap:13px; align-items:center; border-bottom:1px solid var(--line); }.rank-row b { color:var(--pink); font:800 18px 'Outfit',sans-serif; }.rank-row img { width:50px; height:52px; border-radius:8px; object-fit:cover; }.rank-row span { display:grid; line-height:1.3; }.rank-row strong { font-size:14px; }.rank-row small { margin-top:5px; color:var(--muted); font-size:11px; }.rank-row>i { color:var(--pink); }.spotlight-panel { padding:37px 34px 0; background:linear-gradient(150deg,#7562e9,#aa77ef); color:#fff; border-radius:23px; overflow:hidden; position:relative; }.spotlight-panel .kicker { color:#f7d3ff; }.spotlight-panel p { font-size:14px; opacity:.9; }.spotlight-panel>a { display:inline-flex; margin:9px 0 20px; font-weight:700; font-size:14px; }.spotlight-panel img { width:100%; height:180px; object-fit:cover; border-radius:15px 15px 0 0; }.mood-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.mood-grid a { min-height:200px; padding:27px; border-radius:20px; background:#ffe9d6; }.mood-grid a:nth-child(2) { background:#e9e5ff; }.mood-grid a:nth-child(3) { background:#e3f4e8; }.mood-grid i { font-size:30px; color:#ee7054; }.mood-grid h3 { margin:28px 0 3px; font-size:21px; }.mood-grid p { margin:0; color:#665e61; font-size:13px; }.step-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }.step-grid>div { position:relative; padding:26px; border-top:3px solid #f6a5bf; background:#fff; border-radius:0 0 16px 16px; }.step-grid span { position:absolute; right:18px; top:12px; color:#f5d9e2; font:800 32px 'Outfit',sans-serif; }.step-grid i { color:var(--pink); font-size:28px; }.step-grid h3 { margin:13px 0 4px; font-size:18px; }.step-grid p { margin:0; color:var(--muted); font-size:13px; }.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.review-grid blockquote { margin:0; padding:23px; background:#fff; border:1px solid var(--line); border-radius:17px; }.review-grid i { color:var(--pink); font-size:25px; }.review-grid p { margin:8px 0 17px; font-size:14px; }.review-grid footer { color:var(--muted); font-size:12px; }.about-section { display:grid; grid-template-columns:150px 1fr; gap:32px; padding:48px; background:#25243a; color:#fff; border-radius:26px; }.about-icon { display:grid; place-items:center; width:110px; height:110px; border-radius:38px 38px 10px 38px; background:linear-gradient(135deg,var(--pink),#ffad72); }.about-icon i { font-size:45px; }.about-section p { color:#d2d1dd; font-size:14px; }.app-section { padding:45px 62px; display:flex; justify-content:space-between; align-items:center; gap:30px; background:linear-gradient(110deg,#fff 0%,#fff0f5 100%); border:1px solid #f2dce5; border-radius:25px; }.app-copy { max-width:620px; }.app-copy p { color:var(--muted); font-size:14px; }.qr-art { width:145px; height:145px; flex:0 0 145px; padding:15px; border-radius:22px; display:grid; place-items:center; text-align:center; background:repeating-linear-gradient(45deg,#292638 0 6px,#fff 6px 12px); color:#fff; box-shadow:var(--shadow); }.qr-art span { display:grid; place-items:center; height:54px; width:54px; border-radius:12px; background:var(--pink); font-size:28px; font-weight:800; }.qr-art b { display:none; }.site-footer { margin-top:92px; padding:52px 0 0; background:#201f2d; color:#e9e8ef; }.footer-grid { display:grid; grid-template-columns:1.6fr .8fr 1fr; gap:46px; }.footer-brand { font-weight:800; font-size:18px; }.footer-grid h2 { margin:0 0 12px; font-size:14px; }.footer-grid p,.footer-grid a { display:block; color:#b8b6c4; margin:5px 0; font-size:13px; }.copyright { display:flex; justify-content:space-between; margin-top:34px; padding:16px 0; border-top:1px solid #393745; color:#9693a5; font-size:12px; }
.listing-main { padding-top:38px; }.breadcrumb { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; }.breadcrumb a { color:var(--pink-dark); }.listing-hero { margin-top:24px; padding:42px 50px; border-radius:25px; display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--line); }.listing-hero p { max-width:720px; color:var(--muted); margin:0; font-size:15px; }.listing-hero>i { margin-left:30px; color:#f2b5c9; font-size:90px; }.listing-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }.channel-note { padding:30px 38px; display:grid; grid-template-columns:1fr 1fr; gap:30px; background:#fff2f5; border-radius:20px; }.channel-note h2 { margin:0 0 6px; font-size:20px; }.channel-note p { margin:0; font-size:14px; color:var(--muted); }.channel-note ul { margin:0; padding:0; list-style:none; }.channel-note li { margin:8px 0; font-size:13px; }.channel-note i { color:var(--pink); margin-right:8px; }
.reader-main { padding-top:35px; }.reader-header { text-align:center; padding:34px 10px 20px; }.reader-header h1 { font-size:36px; }.reader-meta { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; color:var(--muted); font-size:13px; }.reader-meta i { color:var(--pink); }.reading-tip { display:flex; gap:12px; max-width:850px; margin:0 auto 30px; padding:14px 17px; background:#fff0f5; border-radius:12px; color:#615c68; font-size:13px; }.reading-tip i { color:var(--pink); font-size:21px; }.reading-tip p { margin:0; }.comic-reader { max-width:770px; margin:0 auto; }.chapter-intro { padding:28px 30px; margin-bottom:22px; text-align:center; background:#fff; border:1px solid var(--line); border-radius:16px; }.chapter-intro span { color:var(--pink-dark); letter-spacing:.15em; font:700 12px 'Outfit',sans-serif; }.chapter-intro p { color:var(--muted); margin:10px 0 0; font-size:14px; }.reading-frame { margin:0 0 23px; padding:10px; background:#fff; border:1px solid var(--line); border-radius:14px; }.reading-frame img { width:100%; aspect-ratio:3/4.1; object-fit:cover; border-radius:9px; }.reading-frame figcaption { padding:8px 5px 1px; color:var(--muted); text-align:center; font-size:12px; }.chapter-end { padding:42px 20px; margin-top:8px; text-align:center; background:#fff0f5; border-radius:18px; }.chapter-end i { color:var(--pink); font-size:34px; }.chapter-end h2 { margin:7px 0 0; font-size:21px; }.chapter-end p { color:var(--muted); margin:4px 0 0; font-size:13px; }.chapter-nav { display:flex; justify-content:space-between; gap:16px; margin-top:22px; }.chapter-nav a,.chapter-nav .disabled { padding:10px 15px; border:1px solid var(--line); background:#fff; border-radius:10px; font-size:13px; }.chapter-nav .disabled { color:#aaa7b0; }.return-button { display:flex; width:max-content; margin:20px auto 0; }
@media (max-width:1000px) { .header-inner { gap:14px; }.main-nav a { padding:8px 5px; font-size:12px; }.main-nav a i { display:none; }.hero { padding:45px; gap:35px; }.listing-grid { grid-template-columns:repeat(3,1fr); }.featured-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) { .shell { width:min(100% - 28px,1200px); }.header-inner { min-height:66px; position:relative; }.brand-mark { width:36px;height:36px;font-size:18px; }.brand-copy strong { font-size:15px; }.nav-toggle { display:block; margin-left:auto; }.main-nav { display:none; position:absolute; left:0; right:0; top:66px; padding:12px 14px; background:#fffaf6; border-bottom:1px solid var(--line); box-shadow:0 8px 20px rgba(0,0,0,.06); }.main-nav.is-open { display:block; }.main-nav ul { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }.main-nav a { justify-content:center; padding:8px 4px; }.main-nav a i { display:inline; }.hero { min-height:auto; margin-top:27px; padding:35px 23px 24px; grid-template-columns:1fr; border-radius:23px; }.hero h1 { font-size:39px; }.hero-art>img { height:260px; }.floating-note { left:10px; bottom:12px; }.section-space { margin-top:61px; }.section-heading { display:block; }.section-heading h2 { font-size:24px; }.text-link { display:inline-block; margin-top:9px; }.featured-grid,.category-grid { grid-template-columns:repeat(2,1fr); gap:11px; }.comic-info { padding:11px; }.comic-info h3 { font-size:14px; }.comic-info p { font-size:11px; }.category-card { min-height:145px; padding:16px; }.timeline-list a { grid-template-columns:48px 1fr; gap:8px; }.timeline-list em { display:none; }.update-strip,.rank-panel { padding:25px 19px; }.split-section,.channel-note { grid-template-columns:1fr; }.spotlight-panel { min-height:350px; }.mood-grid,.step-grid,.review-grid { grid-template-columns:1fr; }.mood-grid a { min-height:150px; }.about-section { grid-template-columns:1fr; padding:32px 25px; gap:12px; }.app-section { padding:32px 24px; }.qr-art { width:105px; height:105px; flex-basis:105px; }.footer-grid { grid-template-columns:1fr; gap:24px; }.copyright { display:block; }.copyright span { display:block; margin:3px 0; }.listing-main { padding-top:25px; }.listing-hero { padding:28px 23px; }.listing-hero>i { font-size:55px; }.listing-hero h1 { font-size:32px; }.listing-grid { grid-template-columns:repeat(2,1fr); }.reader-header h1 { font-size:28px; }.reader-meta { gap:7px 12px; }.reading-tip { margin-bottom:20px; }.reading-frame { padding:6px; }.chapter-nav { flex-direction:column; }.chapter-nav a,.chapter-nav .disabled { text-align:center; }.hero-stats { gap:16px; } }