:root { --ink:#232033; --muted:#706d80; --pink:#ff5b92; --pink-light:#fff0f5; --line:#eeeaf0; --paper:#ffffff; --bg:#fffafd; --violet:#6655a8; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--ink); font-family:"Microsoft YaHei", Arial, sans-serif; line-height:1.75; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; object-fit:cover; } .shell { width:min(1200px, calc(100% - 40px)); margin-left:auto; margin-right:auto; } .site-header { background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); } .header-inner { min-height:76px; display:flex; align-items:center; gap:24px; } .brand { display:flex; gap:9px; align-items:center; flex-shrink:0; font-weight:800; font-size:21px; } .brand-mark { width:38px; height:38px; display:grid; place-items:center; background:var(--pink); color:#fff; border-radius:14px 14px 14px 4px; } .primary-nav { margin-left:auto; } .primary-nav ul { display:flex; gap:4px; padding:0; margin:0; list-style:none; } .nav-link { display:flex; gap:5px; padding:10px 8px; font-size:13px; border-radius:10px; white-space:nowrap; } .nav-link:hover, .nav-link.is-active { color:var(--pink); background:var(--pink-light); } .nav-icon { font-size:15px; } .menu-button { display:none; margin-left:auto; border:0; background:transparent; font-size:24px; } .hero { margin-top:54px; min-height:410px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; padding:54px 64px; background:linear-gradient(115deg,#fff0f6,#f4f0ff); border-radius:30px; overflow:hidden; gap:48px; } .section-kicker,.eyebrow { color:var(--pink); font-size:12px; font-weight:800; letter-spacing:.12em; margin:0 0 8px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(34px,5vw,58px); line-height:1.18; margin-bottom:18px; } h2 { font-size:28px; line-height:1.35; margin-bottom:0; } h3 { font-size:18px; line-height:1.45; margin-bottom:9px; } .hero-copy>p:not(.section-kicker) { max-width:590px; color:var(--muted); font-size:17px; } .hero-art { position:relative; } .hero-art img { width:100%; height:280px; border-radius:25px; box-shadow:16px 18px 0 rgba(255,91,146,.18); } .floating-note { position:absolute; right:14px; bottom:-10px; margin:0; background:#fff; padding:8px 14px; border-radius:999px; color:var(--violet); font-size:13px; font-weight:700; box-shadow:0 7px 20px rgba(60,44,84,.12); } .hero-actions { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; } .button { display:inline-flex; justify-content:center; align-items:center; min-height:42px; padding:9px 18px; border-radius:999px; font-size:14px; font-weight:700; } .button-primary { color:#fff; background:var(--pink); box-shadow:0 9px 20px rgba(255,91,146,.22); } .button-ghost { background:#fff; border:1px solid var(--line); } section { margin-top:86px; } .section-heading { display:flex; justify-content:space-between; gap:18px; align-items:end; margin-bottom:26px; } .centered-heading { justify-content:center; text-align:center; } .text-link { color:var(--pink); font-weight:700; font-size:14px; } .spotlight-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:22px; } .comic-card { min-width:0; overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:18px; transition:transform .2s; } .comic-card:hover { transform:translateY(-4px); } .cover-link img { width:100%; aspect-ratio:4/5; } .comic-copy { padding:17px; } .comic-copy p:last-child { color:var(--muted); font-size:13px; margin-bottom:0; } .feature-card .cover-link img { aspect-ratio:1/1; } .category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .category-card { min-height:174px; padding:25px; display:flex; flex-direction:column; border-radius:20px; } .category-card span { font-size:30px; margin-bottom:13px; } .category-card strong { font-size:19px; } .category-card small { color:var(--muted); } .rose { background:#ffeaf1; } .blue { background:#eaf3ff; } .yellow { background:#fff4d6; } .green { background:#e8f9ef; } .update-section { background:#29253b; color:#fff; border-radius:26px; padding:38px; } .update-section .section-kicker { color:#ffc1d4; } .update-list { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .horizontal-card { background:#3a3550; border-color:#4d4766; } .horizontal-card .comic-copy p:last-child { color:#d4cfe1; } .ranking-section { display:grid; grid-template-columns:1fr .8fr; gap:22px; } .ranking-panel { padding:36px; background:#fff; border-radius:24px; border:1px solid var(--line); } .rank-row { display:grid; grid-template-columns:54px 1fr auto; align-items:center; border-top:1px solid var(--line); padding:14px 0; gap:10px; } .rank-row b { color:var(--pink); font-size:20px; } .rank-row small { color:var(--muted); } .ranking-poster { margin:0; background:#69559e; padding:26px; border-radius:24px; color:#fff; display:flex; flex-direction:column; justify-content:space-between; } .ranking-poster img { width:100%; aspect-ratio:1/1; border-radius:18px; } .ranking-poster p { margin:16px 0 0; font-weight:700; } .korean-section { padding:42px; background:#fff2d1; border-radius:26px; } .korean-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:15px; } .korean-grid .comic-copy { padding:13px; } .korean-grid h3 { font-size:16px; } .strip-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; align-items:center; } .strip-copy { padding:36px; background:#eaf8f1; border-radius:22px; } .strip-frames { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .strip-frames img { aspect-ratio:2/3; border-radius:14px; } .guide-section { padding:48px; border:1px dashed #d7cadf; border-radius:25px; } .guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } .guide-grid span { color:var(--pink); font-size:30px; font-weight:800; } .guide-grid p { color:var(--muted); } .editorial-section { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; padding:0 54px; } .editorial-section img { width:100%; aspect-ratio:1/1; border-radius:50%; } .editorial-section p:not(.section-kicker) { color:var(--muted); } .about-section { padding:46px; color:#fff; background:linear-gradient(130deg,#2d2943,#6d5597); border-radius:27px; } .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:26px; } .about-grid p { margin:0; color:#eeeaf8; } .faq-section details { background:#fff; border:1px solid var(--line); border-radius:13px; padding:17px 20px; margin-bottom:12px; } summary { cursor:pointer; font-weight:700; } details p { color:var(--muted); margin:12px 0 0; } .app-section { display:flex; justify-content:space-between; align-items:center; gap:32px; padding:48px 65px; background:linear-gradient(120deg,#fff0f5,#f0eeff); border-radius:27px; } .app-section>div:first-child { max-width:670px; } .app-section p:not(.section-kicker) { color:var(--muted); } .qr-card { width:170px; aspect-ratio:1; flex-shrink:0; padding:18px; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#fff; border-radius:22px; text-align:center; box-shadow:0 10px 28px rgba(72,47,95,.12); } .qr-card span { width:68px; height:68px; display:grid; place-items:center; color:#fff; background:var(--pink); border-radius:13px; font-size:28px; font-weight:800; } .qr-card strong { margin-top:8px; } .qr-card small { color:var(--muted); font-size:11px; } .site-footer { margin-top:86px; background:#262334; color:#ded9e8; padding-top:48px; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; } .footer-brand,.footer-title { color:#fff; font-weight:800; font-size:17px; } .footer-grid a { display:block; margin-bottom:6px; font-size:14px; } .copyright { margin-top:34px; padding:18px 0; border-top:1px solid #403b55; font-size:13px; } .copyright p { margin:0; } .inner-page,.reader-page { padding-top:1px; } .breadcrumb { display:flex; gap:10px; color:var(--muted); font-size:14px; margin-top:36px; } .breadcrumb a:hover { color:var(--pink); } .channel-hero { display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; padding:46px 58px; background:#fff; border-radius:25px; border:1px solid var(--line); } .channel-hero h1 { font-size:45px; } .channel-hero p:not(.section-kicker) { color:var(--muted); } .channel-hero img { width:100%; aspect-ratio:16/10; border-radius:18px; } .channel-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:17px; } .seo-copy,.reader-related { padding:32px 38px; background:#f3f0ff; border-radius:20px; } .seo-copy p,.reader-related p { color:var(--muted); margin:13px 0 0; } .reader-head { max-width:880px; text-align:center; } .reader-head h1 { font-size:40px; } .meta { color:var(--muted); font-size:14px; } .reader-note { display:flex; gap:8px; text-align:left; padding:16px 18px; color:#5c5167; background:#fff4d9; border-radius:13px; font-size:14px; } .comic-reader { max-width:800px; } .reader-image { margin:0 auto 30px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:16px; } .reader-image img { width:100%; aspect-ratio:3/4; border-radius:8px; } figcaption { text-align:center; color:var(--muted); font-size:12px; padding-top:8px; } .chapter-end { text-align:center; color:var(--violet); margin:40px 0 24px; } .chapter-nav { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; } @media (max-width:900px) { .primary-nav { display:none; position:absolute; left:20px; right:20px; top:68px; padding:12px; background:#fff; border:1px solid var(--line); border-radius:15px; } .primary-nav.is-open { display:block; } .primary-nav ul { display:grid; grid-template-columns:repeat(2,1fr); } .menu-button { display:block; } .hero,.channel-hero,.editorial-section { grid-template-columns:1fr; } .hero { padding:38px; } .category-grid,.update-list { grid-template-columns:repeat(2,1fr); } .korean-grid,.channel-grid { grid-template-columns:repeat(3,1fr); } .ranking-section,.strip-section { grid-template-columns:1fr; } } @media (max-width:600px) { .shell { width:min(100% - 28px,1200px); } .header-inner { min-height:64px; } .brand-text { font-size:18px; } section { margin-top:58px; } .hero { margin-top:32px; padding:28px; gap:30px; border-radius:22px; } .hero-art img { height:230px; } .section-heading { align-items:start; flex-direction:column; } .spotlight-grid,.category-grid,.update-list,.korean-grid,.channel-grid,.guide-grid,.about-grid,.footer-grid { grid-template-columns:1fr 1fr; } .spotlight-grid .feature-card { grid-column:span 2; } .comic-copy { padding:13px; } .comic-copy p:last-child { display:none; } .update-section,.korean-section,.guide-section,.about-section { padding:25px; } .ranking-panel { padding:25px; } .rank-row { grid-template-columns:40px 1fr; } .rank-row small { display:none; } .editorial-section { padding:0; gap:22px; } .editorial-section img { width:72%; } .app-section { padding:30px; align-items:flex-start; flex-direction:column; } .qr-card { width:140px; } .channel-hero { padding:30px; gap:22px; } .channel-hero h1,.reader-head h1 { font-size:33px; } .reader-note { flex-direction:column; } .footer-grid { gap:22px; } .footer-grid>div:first-child { grid-column:span 2; } .chapter-nav { flex-direction:column; } .chapter-nav .button { width:100%; } }