:root { --ink:#1e2924; --paper:#fffdf8; --sage:#dce9df; --mint:#88b7a1; --orange:#ffb65c; --line:#dfe6df; --muted:#68766e; --shadow:0 16px 42px rgba(32,54,42,.1); }
* { 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.65; }
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:0 auto; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,253,248,.94); border-bottom:1px solid rgba(223,230,223,.8); backdrop-filter:blur(14px); }
.nav-wrap { min-height:84px; display:flex; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:10px; min-width:max-content; }
.brand-mark { display:grid; width:42px; height:42px; place-items:center; border-radius:14px; color:#fff; background:var(--ink); font-weight:800; font-size:21px; }
.brand-copy { display:grid; line-height:1.05; }
.brand-copy strong { font-size:20px; letter-spacing:.04em; }
.brand-copy small { margin-top:5px; font-size:8px; letter-spacing:.18em; color:var(--muted); }
.main-nav { margin-left:auto; display:flex; align-items:stretch; gap:4px; }
.main-nav a { display:flex; align-items:center; gap:5px; padding:10px 10px; border-radius:10px; color:#526259; white-space:nowrap; font-size:13px; }
.main-nav a:hover, .main-nav a.is-active { color:var(--ink); background:var(--sage); font-weight:700; }
.nav-icon { color:#5a967c; font-size:16px; }
.menu-toggle { display:none; }
.hero { min-height:430px; margin-top:48px; padding:58px 64px; display:grid; grid-template-columns:1.06fr .94fr; gap:55px; align-items:center; overflow:hidden; border-radius:30px; background:#dfece1; }
.eyebrow { margin:0 0 8px; color:#52836f; font-size:12px; font-weight:800; letter-spacing:.14em; }
h1, h2, h3, p { margin-top:0; }
h1 { font-size:clamp(38px, 5vw, 66px); letter-spacing:-.06em; line-height:1.1; }
h2 { font-size:30px; line-height:1.25; letter-spacing:-.04em; }
h3 { font-size:18px; line-height:1.35; }
.hero h1 { margin-bottom:20px; }
.hero-lead { max-width:550px; color:#405047; font-size:17px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:45px; padding:10px 19px; border:1px solid var(--ink); border-radius:999px; font-weight:700; font-size:14px; transition:.2s ease; }
.button:hover { transform:translateY(-2px); }
.button-dark { color:#fff; background:var(--ink); }
.button-light { background:transparent; }
.hero-art { position:relative; }
.hero-art img { aspect-ratio:1.15; border-radius:22px; box-shadow:var(--shadow); }
.floating-note { position:absolute; right:-18px; bottom:24px; display:block; padding:14px 18px; border-radius:15px; background:var(--orange); text-align:center; line-height:1.2; transform:rotate(5deg); }
.floating-note strong { font-size:28px; }
.quick-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:30px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--line); }
.quick-strip div { min-height:105px; padding:20px; background:#fff; }
.quick-strip span { display:block; color:#5a967c; font-size:22px; }
.quick-strip strong, .quick-strip small { display:block; }
.quick-strip small { color:var(--muted); font-size:12px; }
.section { margin-top:94px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:25px; margin-bottom:28px; }
.section-heading h2 { margin-bottom:0; }
.section-heading > p { margin-bottom:4px; color:var(--muted); font-size:14px; }
.text-link { color:#3e725e; font-weight:800; white-space:nowrap; }
.text-link span { margin-left:5px; font-size:18px; }
.comic-grid { display:grid; gap:18px; }
.five-grid { grid-template-columns:repeat(5,1fr); }
.comic-card { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:#fff; transition:.2s ease; }
.comic-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.comic-cover { position:relative; display:block; overflow:hidden; background:#edf2ed; }
.comic-cover img { aspect-ratio:3/4; transition:.4s ease; }
.comic-card:hover img { transform:scale(1.04); }
.chapter-badge { position:absolute; right:9px; bottom:9px; padding:4px 8px; border-radius:7px; color:#fff; background:rgba(30,41,36,.84); font-size:11px; }
.comic-info { padding:15px; }
.card-kicker { margin-bottom:5px; color:#69907d; font-size:11px; font-weight:700; }
.comic-info h3 { margin-bottom:8px; }
.comic-info h3 a:hover { color:#4e9076; }
.comic-info > p:last-child { margin-bottom:0; color:var(--muted); font-size:12px; line-height:1.55; }
.spotlight { display:grid; grid-template-columns:1fr 1fr; margin-top:94px; overflow:hidden; border-radius:26px; background:#263b32; color:#fff; }
.spotlight-image img { height:100%; min-height:400px; }
.spotlight-copy { align-self:center; padding:52px; }
.spotlight-copy .eyebrow { color:#a9d0b8; }
.spotlight-copy p { color:#d7e2d9; }
.spotlight-copy dl { display:flex; gap:30px; margin:25px 0; }
.spotlight-copy dl div { display:grid; gap:2px; }
.spotlight-copy dt { color:#9db7a6; font-size:12px; }
.spotlight-copy dd { margin:0; font-size:14px; }
.spotlight-copy .button { border-color:#fff; }
.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.category-card { display:flex; align-items:center; min-height:105px; gap:14px; padding:17px; border-radius:16px; background:#fff; border:1px solid var(--line); }
.category-card:hover { border-color:#89b19b; box-shadow:0 9px 24px rgba(32,54,42,.08); }
.category-icon { display:grid; flex:0 0 43px; width:43px; height:43px; place-items:center; border-radius:13px; color:#fff; background:#568b73; font-size:21px; }
.category-card strong, .category-card small { display:block; }
.category-card small { color:var(--muted); font-size:12px; }
.ranking-section { display:grid; grid-template-columns:.86fr 1.14fr; gap:55px; align-items:center; margin-top:94px; padding:50px; border-radius:24px; background:#f6efdF; }
.ranking-copy h2 { max-width:250px; }
.ranking-list { display:grid; gap:5px; padding:0; margin:0; list-style:none; }
.ranking-list li { display:grid; grid-template-columns:46px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid #decfb8; }
.ranking-list li:last-child { border-bottom:0; }
.ranking-list li > span { color:#bd7e32; font-size:22px; font-weight:800; }
.ranking-list a { font-weight:700; }
.ranking-list em { color:#8c7254; font-size:12px; font-style:normal; }
.korean-band { padding:0 0 12px; }
.horizontal-comics { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.horizontal-comics article { overflow:hidden; border-radius:17px; background:#edf3ef; }
.horizontal-comics img { aspect-ratio:1.35; }
.horizontal-comics article div { padding:15px; }
.horizontal-comics span { color:#568b73; font-size:11px; font-weight:800; }
.horizontal-comics h3 { margin:4px 0 7px; }
.horizontal-comics p { margin:0; color:var(--muted); font-size:12px; }
.reading-guide { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:24px; margin-top:94px; padding:42px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.guide-icon { color:#ff9d25; font-size:30px; }
.reading-guide h2 { font-size:25px; }
.reading-guide h3 { margin-bottom:5px; }
.reading-guide p { margin-bottom:0; color:var(--muted); font-size:13px; }
.mosaic { display:grid; grid-template-columns:1.2fr .7fr .7fr; gap:16px; margin-top:94px; }
.mosaic-text { display:flex; min-height:280px; flex-direction:column; justify-content:center; padding:38px; border-radius:22px; background:#d7e8da; }
.mosaic-text h2 { max-width:350px; }
.mosaic-text p:not(.eyebrow) { color:#486154; font-size:14px; }
.mosaic-text .button { align-self:start; margin-top:6px; }
.mosaic > img { height:100%; min-height:280px; border-radius:22px; }
.about-section { display:grid; grid-template-columns:220px 1fr; gap:55px; align-items:center; margin-top:94px; }
.about-orbit { display:grid; width:190px; height:190px; place-content:center; border:12px solid #dbe8dd; border-radius:50%; color:#4e876e; font-size:27px; font-weight:800; line-height:1.05; text-align:center; transform:rotate(-10deg); }
.about-section p { max-width:800px; color:var(--muted); }
.app-subscribe { display:grid; grid-template-columns:120px 1fr auto; gap:30px; align-items:center; margin-top:94px; margin-bottom:45px; padding:30px; border-radius:22px; background:#243a30; color:#fff; }
.app-qr { position:relative; display:grid; width:105px; height:105px; place-items:center; overflow:hidden; border-radius:13px; background:#fff; color:#243a30; font-size:31px; font-weight:900; }
.app-qr:before, .app-qr:after, .app-qr i, .app-qr b { content:""; position:absolute; width:18px; height:18px; border:5px solid #243a30; }
.app-qr:before { left:10px; top:10px; }
.app-qr:after { right:10px; top:10px; }
.app-qr i { left:10px; bottom:10px; }
.app-qr b { right:13px; bottom:13px; width:10px; height:10px; background:#243a30; border:0; }
.app-copy .eyebrow { color:#a8cdb4; }
.app-copy h2 { margin-bottom:7px; font-size:25px; }
.app-copy p:last-child { margin-bottom:0; color:#d5e0d7; font-size:14px; }
.app-subscribe .button { border-color:#fff; }
.site-footer { padding:34px 0 18px; color:#d6dfd8; background:#17241e; }
.footer-inner { display:flex; justify-content:space-between; gap:30px; }
.footer-inner p { max-width:450px; margin:7px 0 0; font-size:13px; }
.footer-links { display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:end; gap:8px 18px; }
.footer-links a { font-size:13px; }
.copyright { margin:26px 0 0; padding-top:16px; border-top:1px solid #34443a; text-align:center; font-size:12px; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:13px; }
.breadcrumb a:hover { color:#3c7b62; }
.channel-hero { margin-top:48px; padding:30px 0 45px; border-bottom:1px solid var(--line); }
.channel-title { display:flex; gap:22px; align-items:center; margin-top:28px; }
.channel-icon { display:grid; width:82px; height:82px; place-items:center; border-radius:23px; background:#d8eadb; color:#3e765f; font-size:37px; }
.channel-title h1 { margin:0 0 8px; font-size:44px; }
.channel-title p:last-child { margin-bottom:0; color:var(--muted); }
.channel-note { margin-top:85px; padding:35px 42px; border-left:5px solid #78a98f; background:#f0f6f0; }
.channel-note h2 { font-size:23px; }
.channel-note p { margin:0; color:var(--muted); }
.reader { max-width:940px; padding-top:45px; }
.reader-header { padding:25px 0 20px; text-align:center; }
.reader-header h1 { margin-bottom:15px; font-size:38px; }
.reader-meta { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 20px; color:var(--muted); font-size:13px; }
.reader-meta a { color:#477c65; font-weight:700; }
.reading-tip { display:flex; gap:12px; margin:10px auto 30px; padding:14px 18px; border-radius:12px; background:#f4ecdF; color:#695d4e; }
.reading-tip span { color:#c17f2d; font-size:20px; }
.reading-tip p { margin:0; font-size:13px; }
.comic-pages { display:grid; gap:22px; }
.comic-pages figure { margin:0; overflow:hidden; border-radius:13px; border:1px solid var(--line); background:#fff; }
.comic-pages img { aspect-ratio:16/10; }
.comic-pages figcaption { padding:8px 12px; color:var(--muted); font-size:12px; text-align:center; }
.chapter-end { margin-top:34px; padding:35px; border-radius:16px; background:#e7f0e8; text-align:center; }
.chapter-end span { color:#5a9078; font-size:23px; }
.chapter-end h2 { margin:5px 0; font-size:24px; }
.chapter-end p { margin:0; color:var(--muted); font-size:13px; }
.chapter-nav { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:30px 0 80px; }
.chapter-nav > a:not(.button), .chapter-nav > span { width:130px; color:#507c68; font-size:14px; font-weight:700; }
.chapter-nav > span { color:#9ba79e; }
.chapter-nav > :last-child { text-align:right; }
@media (max-width:980px) { .main-nav { gap:0; } .main-nav a { padding:9px 7px; font-size:12px; } .five-grid { grid-template-columns:repeat(3,1fr); } .horizontal-comics { grid-template-columns:repeat(2,1fr); } .reading-guide { grid-template-columns:repeat(2,1fr); } .mosaic { grid-template-columns:1fr 1fr; } .mosaic-text { grid-column:span 2; } }
@media (max-width:720px) { .shell { width:min(100% - 28px, 1200px); } .nav-wrap { min-height:68px; gap:12px; } .main-nav { display:none; position:absolute; top:68px; left:14px; right:14px; flex-direction:column; padding:10px; border:1px solid var(--line); border-radius:15px; background:#fffdf8; box-shadow:var(--shadow); } .main-nav.is-open { display:flex; } .main-nav a { padding:10px 12px; } .menu-toggle { display:grid; width:38px; height:38px; gap:5px; margin-left:auto; place-content:center; border:1px solid var(--line); border-radius:10px; background:#fff; } .menu-toggle span { display:block; width:17px; height:2px; background:var(--ink); } .hero { grid-template-columns:1fr; min-height:0; gap:28px; margin-top:28px; padding:35px 24px; border-radius:22px; } .hero-art img { aspect-ratio:1.35; } .floating-note { right:10px; bottom:12px; } .quick-strip { grid-template-columns:repeat(2,1fr); } .quick-strip div { min-height:88px; padding:14px; } .section, .spotlight, .ranking-section, .reading-guide, .mosaic, .about-section, .app-subscribe { margin-top:62px; } .section-heading { align-items:start; flex-direction:column; gap:8px; } .five-grid { grid-template-columns:repeat(2,1fr); gap:12px; } .comic-info { padding:12px; } .comic-info > p:last-child { display:none; } .spotlight { grid-template-columns:1fr; } .spotlight-image img { min-height:0; aspect-ratio:1.5; } .spotlight-copy { padding:30px 24px; } .category-grid { grid-template-columns:repeat(2,1fr); gap:10px; } .category-card { min-height:90px; padding:12px; gap:9px; } .category-icon { flex-basis:35px; width:35px; height:35px; font-size:17px; } .category-card small { font-size:10px; } .ranking-section { grid-template-columns:1fr; gap:20px; padding:29px 22px; } .ranking-copy h2 { max-width:none; } .horizontal-comics { grid-template-columns:1fr 1fr; gap:12px; } .horizontal-comics p { display:none; } .reading-guide { grid-template-columns:1fr 1fr; padding:28px 10px; gap:18px; } .reading-guide > div:first-child { grid-column:span 2; } .mosaic { grid-template-columns:1fr 1fr; gap:10px; } .mosaic-text { grid-column:span 2; min-height:0; padding:28px 22px; } .mosaic > img { min-height:190px; } .about-section { grid-template-columns:1fr; gap:25px; } .about-orbit { width:110px; height:110px; border-width:8px; font-size:17px; } .app-subscribe { grid-template-columns:72px 1fr; gap:17px; padding:22px; } .app-qr { width:70px; height:70px; font-size:21px; } .app-qr:before, .app-qr:after, .app-qr i { width:13px; height:13px; border-width:3px; } .app-subscribe .button { grid-column:span 2; } .footer-inner { flex-direction:column; } .footer-links { justify-content:start; } .channel-hero { margin-top:25px; } .channel-title { align-items:start; } .channel-icon { width:58px; height:58px; border-radius:16px; font-size:27px; } .channel-title h1 { font-size:32px; } .reader { padding-top:28px; } .reader-header h1 { font-size:30px; } .comic-pages { gap:15px; } .comic-pages img { aspect-ratio:1/1.1; } .chapter-nav { flex-wrap:wrap; justify-content:center; } .chapter-nav > a:not(.button), .chapter-nav > span { width:auto; } .chapter-nav > :last-child { text-align:left; } }