:root { --ink:#17213b; --muted:#66708a; --paper:#f7f8fc; --white:#fff; --coral:#ff685d; --violet:#6c5ce7; --line:#e5e8f2; --navy:#162342; --gold:#f2b84b; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"Microsoft YaHei", "PingFang SC", sans-serif; font-size:16px; line-height:1.7; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } .shell { width:min(1200px, calc(100% - 40px)); margin-inline:auto; } .site-header { background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; } .header-inner { min-height:76px; display:flex; align-items:center; gap:34px; } .brand { display:flex; align-items:center; gap:10px; white-space:nowrap; font-size:21px; font-weight:800; } .brand-mark { width:35px; height:35px; border-radius:12px 12px 5px 12px; background:var(--coral); color:white; display:grid; place-items:center; transform:rotate(-5deg); } .main-nav { overflow-x:auto; flex:1; } .main-nav ul { margin:0; padding:0; list-style:none; display:flex; gap:6px; min-width:max-content; } .nav-link { min-height:42px; padding:0 10px; display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:#505a73; border-radius:10px; } .nav-link:hover,.nav-link.is-active { color:var(--coral); background:#fff0ee; } .hero { margin-top:48px; min-height:440px; border-radius:30px; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; background:var(--navy); color:white; } .hero-copy { padding:68px 58px; align-self:center; } .eyebrow { margin:0 0 10px; color:var(--coral); letter-spacing:.12em; font-size:12px; font-weight:800; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(38px,5vw,66px); line-height:1.12; margin-bottom:20px; } h2 { font-size:clamp(26px,3vw,38px); line-height:1.25; margin-bottom:14px; } h3 { font-size:19px; line-height:1.35; margin-bottom:8px; } .hero h1 a { text-decoration:underline; text-decoration-color:var(--coral); text-underline-offset:9px; } .hero-text { max-width:510px; color:#d8dfef; font-size:18px; } .hero-actions { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; } .button { display:inline-flex; align-items:center; justify-content:center; min-height:45px; padding:0 20px; background:var(--coral); border-radius:12px; color:#fff; font-weight:800; transition:.2s; } .button:hover { transform:translateY(-2px); } .button-ghost { background:transparent; color:inherit; border:1px solid currentColor; } .button-light { background:#fff; color:var(--navy); } .button-dark { background:var(--navy); } .hero-art { position:relative; min-height:360px; } .hero-image { width:100%; height:100%; min-height:440px; object-fit:cover; opacity:.88; } .hero-note { position:absolute; right:28px; bottom:28px; max-width:255px; padding:16px; background:rgba(22,35,66,.86); border:1px solid rgba(255,255,255,.22); border-radius:16px; backdrop-filter:blur(8px); } .hero-note span { display:block; color:#ffbdb8; font-size:12px; font-weight:800; } .hero-note strong { display:block; margin-top:5px; line-height:1.4; } .stats-strip { margin-top:24px; background:#fff; border:1px solid var(--line); border-radius:18px; display:grid; grid-template-columns:repeat(4,1fr); } .stats-strip div { padding:17px 24px; display:flex; align-items:baseline; gap:9px; justify-content:center; border-right:1px solid var(--line); } .stats-strip div:last-child { border-right:0; } .stats-strip strong { font-size:22px; color:var(--coral); } .stats-strip span { font-size:13px; color:var(--muted); } .section-block { margin-top:82px; } .section-heading { display:flex; gap:20px; justify-content:space-between; align-items:flex-end; margin-bottom:26px; } .section-heading h2 { margin:0; } .text-link { color:var(--violet); font-weight:800; white-space:nowrap; } .category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .category-card { min-height:132px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:18px; display:grid; grid-template-columns:42px 1fr 16px; gap:12px; align-items:center; transition:.2s; } .category-card:hover { transform:translateY(-4px); box-shadow:0 15px 30px rgba(23,33,59,.1); } .category-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; font-size:22px; background:#fff0ee; color:var(--coral); } .violet .category-icon,.indigo .category-icon { background:#efedff; color:var(--violet); } .gold .category-icon { background:#fff7df; color:#bd7a00; } .blue .category-icon { background:#e8f4ff; color:#1671bb; } .mint .category-icon { background:#e4faf2; color:#168566; } .rose .category-icon { background:#ffedf3; color:#bf3f69; } .category-card strong,.category-card small { display:block; } .category-card small { color:var(--muted); font-size:12px; line-height:1.5; margin-top:3px; } .category-card b { color:var(--coral); } .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; background:#fff; border-radius:17px; border:1px solid var(--line); transition:.2s; } .comic-card:hover { transform:translateY(-5px); box-shadow:0 15px 28px rgba(23,33,59,.12); } .cover { width:100%; aspect-ratio:3/4; object-fit:cover; } .card-copy { padding:16px; } .card-copy p:not(.badge) { color:var(--muted); font-size:13px; line-height:1.6; min-height:62px; } .badge,.count-pill { display:inline-block; margin-bottom:7px; color:var(--coral); font-size:12px; font-weight:800; } .split-feature { margin-top:82px; display:grid; grid-template-columns:.82fr 1.18fr; min-height:360px; background:#f3e9ff; border-radius:26px; overflow:hidden; } .feature-cover { min-height:320px; }.feature-image { width:100%; height:100%; object-fit:cover; }.feature-copy { padding:54px; align-self:center; }.feature-copy p { color:#4f4661; max-width:580px; }.ranking-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:24px; }.ranking-panel,.reading-tip { background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px; }.ranking-list { margin:0; padding:0; list-style:none; }.ranking-list li { display:grid; grid-template-columns:48px 1fr auto; align-items:center; padding:15px 0; border-top:1px solid var(--line); gap:12px; }.rank-number { color:var(--coral); font-weight:900; font-size:21px; }.ranking-list a { font-weight:800; }.ranking-list small { color:var(--muted); font-size:12px; }.reading-tip { background:var(--navy); color:white; display:flex; flex-direction:column; justify-content:center; }.reading-tip > span { color:var(--gold); font-size:35px; }.reading-tip p { color:#d8dfef; }.reading-tip a { color:#ffbdb8; font-weight:800; }.korean-band { padding:50px; background:#ffdbe0; border-radius:26px; display:grid; grid-template-columns:1fr .8fr; gap:34px; align-items:center; }.korean-band p { max-width:580px; color:#684550; }.mini-covers { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.mini-cover { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:14px; transform:rotate(3deg); }.mini-cover:first-child { transform:rotate(-3deg); margin-top:20px; }.topic-row { display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; align-items:center; }.topic-copy p:not(.eyebrow) { color:var(--muted); }.topic-chips { display:flex; flex-wrap:wrap; gap:10px; }.topic-chips a { background:#fff; border:1px solid var(--line); border-radius:999px; padding:11px 16px; font-weight:700; }.quote-panel { text-align:center; padding:52px 15%; background:#e8f0ff; border-radius:26px; }.quote-panel p { font-size:clamp(22px,3vw,33px); line-height:1.45; font-weight:800; }.quote-panel span { color:var(--muted); }.about-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:60px; padding:48px; background:#fff; border:1px solid var(--line); border-radius:24px; }.about-grid p:not(.eyebrow) { color:var(--muted); }.newsletter { padding:38px 45px; background:#fff4e9; border-radius:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }.newsletter h2 { margin-bottom:4px; }.newsletter p:last-child { margin:0; color:var(--muted); }.app-subscribe { margin-top:82px; margin-bottom:0; padding:44px 56px; border-radius:26px 26px 0 0; background:var(--coral); color:#fff; display:flex; justify-content:space-between; align-items:center; gap:30px; }.app-subscribe .eyebrow { color:#ffd7d2; }.app-subscribe p:not(.eyebrow) { max-width:620px; color:#fff4f2; }.qr-brand { width:135px; height:135px; flex:0 0 auto; border:8px solid white; background:var(--navy); border-radius:18px; display:grid; place-items:center; align-content:center; color:white; }.qr-brand span { font-size:46px; font-weight:900; }.qr-brand small { font-size:12px; }.site-footer { background:var(--navy); color:#d8dfef; }.footer-inner { min-height:76px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:13px; }.footer-inner p { margin:0; }.footer-inner a { color:white; }.page-main,.reader-main { padding-top:36px; }.breadcrumbs { color:var(--muted); font-size:13px; display:flex; gap:9px; flex-wrap:wrap; }.breadcrumbs a { color:var(--violet); }.channel-intro { margin-top:24px; padding:46px; border-radius:24px; background:linear-gradient(120deg,#e7edff,#fff1ee); }.channel-intro h1 { font-size:46px; }.channel-intro p:last-child { max-width:650px; margin:0; color:#4e5870; }.channel-seo { margin-top:54px; padding:32px; border-left:5px solid var(--coral); background:#fff; }.channel-seo p { margin-bottom:0; color:var(--muted); }.reader-main { max-width:900px; }.reader-header { margin-top:24px; text-align:center; }.reader-header h1 { font-size:42px; }.article-meta { color:var(--muted); font-size:14px; }.reading-guide { max-width:700px; margin:22px auto 0; padding:14px 18px; border-radius:12px; background:#fff4e9; color:#625143; text-align:left; font-size:14px; }.reader-toolbar { margin-top:30px; display:flex; justify-content:space-between; gap:14px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 20px; font-size:14px; font-weight:800; color:var(--violet); }.reading-stack { margin-top:20px; }.reading-panel { margin:0 0 22px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:16px; }.reading-image { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:9px; }.reading-panel figcaption { padding:10px 4px 0; color:var(--muted); font-size:13px; }.chapter-end { padding:42px 20px; background:#e7edff; text-align:center; border-radius:22px; }.chapter-end > span { font-size:28px; color:var(--coral); }.chapter-end p { max-width:580px; margin-inline:auto; color:var(--muted); }.chapter-end div { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }.chapter-end .button-ghost { color:var(--navy); } @media (max-width:900px) { .header-inner { gap:14px; }.hero { grid-template-columns:1fr; }.hero-art { display:none; }.category-grid { grid-template-columns:repeat(2,1fr); }.four-up { grid-template-columns:repeat(2,1fr); }.five-up { grid-template-columns:repeat(3,1fr); }.ranking-layout,.korean-band,.topic-row,.about-grid { grid-template-columns:1fr; }.about-grid { gap:20px; }.app-subscribe { padding:38px; }.split-feature { grid-template-columns:1fr; }.feature-cover { max-height:320px; }.feature-copy { padding:38px; } } @media (max-width:600px) { .shell { width:min(100% - 28px,1200px); }.header-inner { min-height:63px; }.brand-copy { font-size:17px; }.brand-mark { width:30px; height:30px; }.nav-link { padding:0 8px; font-size:13px; }.nav-link span:first-child { display:none; }.hero { margin-top:25px; border-radius:20px; min-height:0; }.hero-copy { padding:40px 26px; }.hero-text { font-size:16px; }.stats-strip { grid-template-columns:repeat(2,1fr); }.stats-strip div:nth-child(2) { border-right:0; }.stats-strip div:nth-child(-n+2) { border-bottom:1px solid var(--line); }.section-block { margin-top:56px; }.section-heading { align-items:flex-start; flex-direction:column; }.category-grid,.four-up,.five-up { grid-template-columns:repeat(2,1fr); }.category-card { min-height:112px; grid-template-columns:35px 1fr; }.category-card b { display:none; }.category-icon { width:35px; height:35px; }.card-copy { padding:12px; }.card-copy p:not(.badge) { display:none; }.split-feature,.korean-band,.quote-panel,.about-grid,.newsletter,.app-subscribe { border-radius:18px; }.feature-copy,.korean-band,.about-grid { padding:28px; }.korean-band { gap:20px; }.topic-row { gap:14px; }.quote-panel { padding:35px 20px; }.newsletter,.app-subscribe { padding:30px 24px; align-items:flex-start; flex-direction:column; }.qr-brand { width:100px; height:100px; }.footer-inner { padding:18px 0; min-height:0; flex-direction:column; align-items:flex-start; }.channel-intro { padding:30px 24px; }.channel-intro h1,.reader-header h1 { font-size:34px; }.reader-toolbar { padding:11px; font-size:12px; }.reading-panel { padding:8px; }.reader-main { width:min(100% - 22px,900px); } }