* { box-sizing: border-box; } body { margin: 0; color: #243044; background: #fbfcff; font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif; line-height: 1.7; } 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,255,255,.94); border-bottom: 1px solid #edf0f7; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); } .header-inner { min-height: 76px; display: flex; align-items: center; gap: 20px; } .brand { color: #263452; font-size: 21px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .brand-mark { align-items: center; background: linear-gradient(135deg,#6a55e8,#f36e9f); border-radius: 10px; color:#fff; display:inline-flex; font-size:15px; font-weight:900; height:34px; justify-content:center; letter-spacing:-1px; width:38px; } .main-nav { flex: 1; } .main-nav ul { display:flex; justify-content:center; gap:3px; list-style:none; margin:0; padding:0; } .nav-link { border-radius:9px; color:#68748c; display:inline-flex; font-size:13px; gap:5px; padding:9px 10px; white-space:nowrap; } .nav-link span { color:#8b78ed; font-size:15px; } .nav-link:hover,.nav-link.is-active { background:#f0edff; color:#5946d0; font-weight:700; } .header-search { border:1px solid #e2e5f1; border-radius:20px; color:#67738b; font-size:13px; padding:7px 11px; white-space:nowrap; } .header-search span { color:#6957e4; font-size:17px; } .nav-toggle { display:none; } .hero { align-items:center; background:linear-gradient(125deg,#f0eeff 0%,#fff8fb 55%,#eaf8ff 100%); border-radius:28px; display:grid; gap:40px; grid-template-columns: 1.08fr .92fr; margin-top:48px; min-height:430px; overflow:hidden; padding:54px 70px; position:relative; } .hero:before { background:#fff; border-radius:50%; content:""; height:380px; opacity:.35; position:absolute; right:-125px; top:-170px; width:380px; } .hero-copy,.hero-art { position:relative; z-index:1; } .eyebrow { color:#806fe1; font-size:12px; font-weight:800; letter-spacing:1.4px; margin:0 0 7px; } h1,h2,h3,p { margin-top:0; } h1 { color:#283450; font-size:46px; letter-spacing:-2px; line-height:1.2; margin-bottom:17px; } h1 a { text-decoration:underline; text-decoration-color:#f0a9c1; text-underline-offset:7px; } h2 { color:#2e3a57; font-size:28px; letter-spacing:-.8px; line-height:1.35; margin-bottom:12px; } h3 { line-height:1.4; } .hero-copy > p:not(.eyebrow) { color:#526078; font-size:16px; max-width:580px; } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:26px 0; } .button { border-radius:10px; display:inline-flex; font-size:14px; font-weight:700; gap:8px; padding:11px 17px; transition:.2s; } .primary { background:#6553dc; color:#fff; box-shadow:0 9px 22px rgba(101,83,220,.23); } .primary:hover { background:#4d3bc1; transform:translateY(-2px); } .ghost { border:1px solid #d9d6ed; color:#5d5a83; } .hero-stats { color:#68748b; display:flex; gap:27px; font-size:12px; } .hero-stats b { color:#3c4262; display:block; font-size:16px; } .hero-art { margin:auto; max-width:300px; } .hero-image { aspect-ratio:3/4; border:8px solid #fff; border-radius:20px; box-shadow:0 22px 42px rgba(93,77,171,.24); object-fit:cover; width:100%; } .floating-note { background:#fff; border-radius:12px; bottom:18px; box-shadow:0 8px 25px rgba(70,58,119,.16); color:#7b7790; font-size:11px; left:-52px; padding:10px 15px; position:absolute; } .floating-note b { color:#403b65; font-size:13px; } .section { margin-top:86px; } .section-heading { align-items:end; display:flex; justify-content:space-between; margin-bottom:25px; } .section-heading h2 { margin:0; } .section-heading > a { color:#6956db; font-size:13px; font-weight:700; } .genre-grid { display:grid; gap:14px; grid-template-columns:repeat(4,1fr); } .genre-card { background:#fff; border:1px solid #e9ebf4; border-radius:15px; min-height:145px; padding:21px; transition:.2s; } .genre-card:hover { border-color:#b8aef5; box-shadow:0 8px 20px rgba(98,82,210,.1); transform:translateY(-3px); } .genre-card span { background:#f1effe; border-radius:10px; color:#765fe7; display:inline-flex; font-size:19px; height:35px; justify-content:center; margin-bottom:10px; width:35px; } .genre-card strong,.genre-card small { display:block; } .genre-card strong { color:#35405c; } .genre-card small { color:#7e889d; font-size:12px; line-height:1.55; margin-top:5px; } .latest-panel { background:#f6f7fe; border-radius:25px; padding:39px; width:min(1200px,calc(100% - 40px)); } .comic-grid { display:grid; gap:20px; grid-template-columns:repeat(3,1fr); } .comic-card { background:#fff; border:1px solid #ebedf5; border-radius:14px; display:flex; gap:13px; overflow:hidden; padding:10px; } .cover-link { flex:0 0 94px; } .comic-cover { aspect-ratio:3/4; border-radius:9px; height:126px; object-fit:cover; width:100%; } .card-copy { min-width:0; padding:3px 1px; } .tag { background:#efecff; border-radius:20px; color:#705ce0; display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; } .card-copy h3 { color:#333e59; font-size:15px; margin:7px 0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .card-copy p { color:#78849a; display:-webkit-box; font-size:11px; line-height:1.55; margin-bottom:5px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; } small { color:#8993a6; font-size:10px; } .spotlight { align-items:center; background:#263452; border-radius:24px; color:#dce5ff; display:grid; gap:58px; grid-template-columns:.8fr 1.2fr; overflow:hidden; padding:0 75px 0 0; } .spotlight-art { height:350px; } .spotlight-image { height:100%; object-fit:cover; width:100%; } .spotlight h2 { color:#fff; } .spotlight-copy > p:not(.eyebrow) { color:#c8d0e5; } .ranking-layout { display:grid; gap:26px; grid-template-columns:1.6fr .8fr; } .ranking-box { background:#fff; border:1px solid #e9ebf4; border-radius:20px; padding:31px; } .ranking-box ol { list-style:none; margin:0; padding:0; } .ranking-box li { align-items:center; border-top:1px solid #edf0f5; display:flex; gap:16px; padding:13px 0; } .ranking-box li > b { color:#a198e8; font-size:18px; width:30px; } .ranking-box li span { flex:1; } .ranking-box strong,.ranking-box small { display:block; } .ranking-box strong { color:#37415c; font-size:14px; } .ranking-box em { color:#fc789a; font-style:normal; } .quote-card { background:linear-gradient(150deg,#f6dce7,#eae3ff); border-radius:20px; display:flex; flex-direction:column; justify-content:center; padding:35px; } .quote-card > span { color:#8772e6; font-size:48px; height:40px; line-height:1; } .quote-card p { color:#3f4566; font-size:17px; font-weight:700; } .korean-band { align-items:center; background:#fff5ed; border-radius:20px; display:grid; gap:40px; grid-template-columns:1fr 1fr; padding:44px 53px; } .korean-band p:not(.eyebrow) { color:#6d6670; max-width:470px; } .text-link { color:#d26079; font-size:14px; font-weight:700; } .mini-covers { display:flex; justify-content:flex-end; } .mini-cover { aspect-ratio:3/4; border:5px solid #fff; border-radius:10px; box-shadow:0 7px 18px rgba(115,75,74,.16); margin-left:-16px; object-fit:cover; transform:rotate(-5deg); width:145px; } .mini-cover:nth-child(2) { transform:translateY(-12px) rotate(3deg); } .mini-cover:nth-child(3) { transform:rotate(8deg); } .calendar-module { background:#f5f8ff; border-radius:20px; padding:35px 40px; } .calendar-module ul { display:grid; gap:8px; grid-template-columns:repeat(7,1fr); list-style:none; margin:0; padding:0; } .calendar-module li { background:#fff; border-radius:12px; min-height:120px; padding:14px; } .calendar-module b,.calendar-module span,.calendar-module em { display:block; } .calendar-module b { color:#8b81ce; font-size:11px; } .calendar-module span { color:#3b4661; font-size:13px; font-weight:700; margin:11px 0; } .calendar-module em { color:#9199aa; font-size:10px; font-style:normal; } .reader-tools { align-items:center; display:grid; gap:55px; grid-template-columns:.9fr 1.1fr; } .tool-copy p:not(.eyebrow) { color:#68758a; } .tool-list { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); } .tool-list > div { background:#fff; border:1px solid #e9ebf4; border-radius:16px; padding:20px 15px; } .tool-list span { color:#755fe5; font-size:24px; } .tool-list h3 { color:#37415c; font-size:14px; margin:7px 0; } .tool-list p { color:#858ea1; font-size:11px; margin:0; } .shelf-grid { display:grid; gap:18px; grid-template-columns:repeat(4,1fr); } .shelf-grid .comic-card { display:block; padding:9px; } .shelf-grid .cover-link { display:block; } .shelf-grid .comic-cover { height:auto; } .about-section { align-items:center; background:#eef5ff; border-radius:22px; display:grid; gap:43px; grid-template-columns:180px 1fr; padding:47px 65px; } .about-badge { align-items:center; background:#fff; border:7px solid #d8e7ff; border-radius:50%; color:#6a5dd8; display:flex; flex-direction:column; font-size:44px; font-weight:900; height:155px; justify-content:center; line-height:1; text-align:center; width:155px; } .about-badge small { color:#8a9bc0; font-size:11px; letter-spacing:2px; margin-top:6px; } .about-section p:not(.eyebrow) { color:#61708a; margin:0; } .app-subscribe { align-items:center; background:#302c50; border-radius:24px; color:#d9d8f1; display:grid; gap:35px; grid-template-columns:150px 1fr 185px; padding:42px 53px; } .app-subscribe h2 { color:#fff; } .app-subscribe p:not(.eyebrow) { color:#cac8e2; font-size:14px; } .qr-brand { background:#fff; border-radius:12px; color:#554ac1; font-size:32px; font-weight:900; height:118px; padding-top:29px; position:relative; text-align:center; width:118px; } .qr-brand i { background:#554ac1; bottom:12px; height:10px; position:absolute; width:10px; } .qr-brand i:nth-of-type(1) { left:14px; } .qr-brand i:nth-of-type(2) { left:30px; } .qr-brand i:nth-of-type(3) { left:46px; } .app-note { background:#413a68; border-radius:12px; padding:18px; } .app-note span,.app-note b,.app-note small { display:block; } .app-note span { color:#f7b353; font-size:22px; } .app-note b { color:#fff; font-size:13px; margin:6px 0; } .site-footer { background:#222c43; color:#c0c8d9; margin-top:86px; padding-top:47px; } .footer-grid { display:grid; gap:50px; grid-template-columns:2fr 1fr 1fr; padding-bottom:38px; } .brand-footer { color:#fff; } .footer-grid p { color:#9faabe; font-size:12px; margin:12px 0 0; max-width:280px; } .footer-grid h3 { color:#fff; font-size:13px; margin:4px 0 12px; } .footer-grid div:not(:first-child) a { display:block; color:#b9c1d0; font-size:12px; margin:7px 0; } .copyright { border-top:1px solid #354058; color:#8894aa; font-size:11px; padding:16px 20px; text-align:center; } .page-main,.article-main { min-height:680px; padding-top:36px; } .breadcrumb { color:#8993a7; font-size:12px; margin-bottom:25px; } .breadcrumb a:first-child { color:#6759d5; } .breadcrumb span { margin:0 8px; } .channel-hero { align-items:center; background:linear-gradient(115deg,#eef0ff,#fff3f7); border-radius:20px; display:flex; gap:22px; margin-bottom:46px; padding:35px 44px; } .channel-hero > span { align-items:center; background:#fff; border-radius:15px; color:#745fe4; display:flex; font-size:31px; height:72px; justify-content:center; width:72px; } .channel-hero h1 { font-size:34px; margin-bottom:4px; } .channel-hero p:not(.eyebrow) { color:#67738a; font-size:14px; margin:0; } .content-list { background:#fff; border:1px solid #ebedf5; border-radius:20px; padding:32px; } .content-list .section-heading > span { color:#8d96a8; font-size:12px; } .list-row { align-items:center; border-top:1px solid #edf0f5; display:grid; gap:20px; grid-template-columns:112px 1fr 35px; padding:18px 0; } .row-cover { aspect-ratio:3/4; border-radius:9px; object-fit:cover; width:100%; } .list-row h2 { font-size:19px; margin:7px 0 6px; } .list-row p { color:#728096; font-size:13px; margin:0 0 7px; } .round-go { align-items:center; background:#f1effe; border-radius:50%; color:#705bdd; display:flex; height:32px; justify-content:center; width:32px; } .channel-seo,.article-seo { background:#f5f7ff; border-radius:16px; margin-top:33px; padding:27px 31px; } .channel-seo h2,.article-seo h2 { font-size:18px; } .channel-seo p,.article-seo p { color:#68758a; font-size:13px; margin:0; } .chapter { background:#fff; border:1px solid #ebedf5; border-radius:20px; padding:44px; } .chapter-head { border-bottom:1px solid #edf0f5; padding-bottom:25px; text-align:center; } .chapter-head h1 { font-size:32px; margin:10px 0 7px; } .chapter-head p { color:#8791a3; font-size:12px; margin:0; } .reading-note { align-items:flex-start; background:#f3f2ff; border-radius:12px; display:flex; gap:13px; margin:27px 0; padding:15px 18px; } .reading-note > span { color:#6c59d9; font-size:20px; } .reading-note strong { color:#4a466d; font-size:13px; } .reading-note p { color:#727b92; font-size:12px; margin:2px 0 0; } .chapter-intro { color:#58667c; font-size:14px; margin:30px auto; max-width:650px; text-align:center; } .reader-pages { margin:auto; max-width:760px; } .reader-frame { margin:0 0 26px; } .reader-image { background:#f1f2f5; border-radius:5px; max-height:900px; object-fit:cover; width:100%; } figcaption { color:#8d96a7; font-size:11px; padding-top:6px; text-align:center; } .chapter-end { background:#fbf2f6; border-radius:13px; margin:38px auto; max-width:600px; padding:25px; text-align:center; } .chapter-end span { color:#ed7697; font-size:24px; } .chapter-end h2 { font-size:18px; margin:2px 0; } .chapter-end p { color:#7e8797; font-size:12px; margin:0; } .chapter-nav { align-items:center; display:flex; justify-content:space-between; } .chapter-nav > a:not(.button) { color:#6254ce; font-size:13px; font-weight:700; } @media (max-width: 980px) { .main-nav { display:none; } .main-nav.is-open { background:#fff; border-top:1px solid #edf0f7; display:block; left:0; padding:8px 20px 18px; position:absolute; right:0; top:76px; } .main-nav.is-open ul { flex-wrap:wrap; justify-content:flex-start; } .nav-toggle { background:#f0edff; border:0; border-radius:8px; color:#6653d8; display:block; font-size:18px; margin-left:auto; padding:6px 10px; } .header-search { display:none; } .hero { grid-template-columns:1fr .65fr; padding:46px; } .genre-grid { grid-template-columns:repeat(2,1fr); } .comic-grid { grid-template-columns:repeat(2,1fr); } .calendar-module ul { grid-template-columns:repeat(4,1fr); } .app-subscribe { grid-template-columns:125px 1fr; } .app-note { grid-column:1/-1; } } @media (max-width: 650px) { .shell { width:min(100% - 28px,1200px); } .header-inner { min-height:64px; } .site-header { position:relative; } .main-nav.is-open { top:64px; } .hero { display:block; margin-top:28px; min-height:0; padding:35px 26px; } h1 { font-size:35px; } h2 { font-size:24px; } .hero-art { margin-top:32px; max-width:220px; } .floating-note { left:-25px; } .hero-stats { gap:13px; } .section { margin-top:54px; } .section-heading { align-items:start; gap:10px; } .genre-grid,.comic-grid,.shelf-grid { grid-template-columns:1fr; } .latest-panel { padding:26px 16px; width:min(100% - 28px,1200px); } .spotlight,.ranking-layout,.korean-band,.reader-tools,.about-section,.footer-grid { grid-template-columns:1fr; } .spotlight { gap:0; padding:0 0 32px; } .spotlight-art { height:245px; } .spotlight-copy { padding:27px; } .mini-covers { justify-content:center; } .mini-cover { width:100px; } .calendar-module { padding:25px 15px; } .calendar-module ul { grid-template-columns:repeat(2,1fr); } .tool-list { grid-template-columns:1fr; } .about-section { padding:34px 28px; } .about-badge { height:110px; width:110px; } .app-subscribe { grid-template-columns:1fr; padding:32px 25px; } .qr-brand { margin:auto; } .footer-grid { gap:20px; } .channel-hero { align-items:flex-start; padding:25px; } .channel-hero h1 { font-size:27px; } .content-list,.chapter { padding:22px 15px; } .list-row { gap:13px; grid-template-columns:82px 1fr; } .list-row .round-go { display:none; } .list-row h2 { font-size:16px; } .list-row p { display:none; } .chapter-head h1 { font-size:25px; } .chapter-nav { gap:8px; } .chapter-nav .button { padding:9px 11px; } }