:root { --ink:#173f3a; --paper:#fffaf0; --cream:#f5ead7; --red:#d9534f; --gold:#e7a847; --muted:#6e716b; --line:#dfd4c2; --shadow:0 16px 36px rgba(30,54,45,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans SC","Microsoft YaHei",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,250,240,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); }
.header-row { min-height:78px; display:flex; align-items:center; gap:22px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-family:Georgia,serif; font-size:23px; font-weight:800; letter-spacing:1px; white-space:nowrap; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; color:#fff; background:var(--red); border-radius:50% 50% 50% 8px; font-size:17px; }
.main-nav { display:flex; align-items:stretch; gap:2px; margin-left:auto; }
.main-nav a { display:flex; gap:5px; align-items:center; padding:9px 8px; color:#53615c; font-size:13px; border-radius:9px; white-space:nowrap; }
.main-nav a:hover,.main-nav .is-active { color:var(--red); background:#f9e9df; }
.nav-icon { font-size:15px; line-height:1; }
.search-link { display:flex; align-items:center; gap:5px; color:var(--red); font-weight:700; white-space:nowrap; }
.menu-toggle { display:none; border:0; background:transparent; color:var(--ink); font-size:23px; }
.hero { margin-top:48px; min-height:448px; overflow:hidden; display:grid; grid-template-columns:1.05fr .95fr; background:var(--cream); border:1px solid var(--line); border-radius:28px; }
.hero-copy { padding:55px 0 45px 58px; align-self:center; }
.eyebrow { margin:0 0 6px; color:var(--red); font-size:12px; font-weight:800; letter-spacing:1.5px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-family:Georgia,"Noto Serif SC",serif; font-size:54px; line-height:1.1; letter-spacing:2px; margin-bottom:18px; }
h2 { font-family:Georgia,"Noto Serif SC",serif; font-size:31px; line-height:1.25; margin-bottom:10px; }
h3 { font-size:18px; line-height:1.3; margin-bottom:8px; }
.hero-text { max-width:490px; color:#53615c; font-size:16px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:25px 0; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:43px; padding:0 19px; border-radius:99px; font-weight:800; }
.button-primary { color:#fff; background:var(--red); box-shadow:0 7px 18px rgba(217,83,79,.25); }
.button-ghost { border:1px solid var(--ink); }
.hero-stats { display:flex; gap:19px; color:var(--muted); font-size:12px; }
.hero-stats b { display:block; color:var(--ink); font-size:18px; }
.hero-art { min-height:400px; position:relative; padding:25px 28px 25px 15px; }
.hero-image { width:100%; height:100%; min-height:400px; object-fit:cover; border-radius:21px; filter:saturate(.9); }
.floating-note { position:absolute; left:-25px; bottom:45px; padding:16px 22px; color:#fff; background:var(--ink); border-radius:12px; box-shadow:var(--shadow); }
.floating-note span,.floating-note small { display:block; font-size:11px; color:#cdd8d2; }.floating-note strong { display:block; font-family:Georgia,serif; font-size:21px; }
.quick-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:28px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.quick-strip a { display:grid; grid-template-columns:34px 1fr; padding:17px; background:#fffdf8; }.quick-strip a span { grid-row:span 2; color:var(--red); font-size:23px; }.quick-strip a small { color:var(--muted); font-size:12px; }
main > section,.inner-page > .shell > section { margin-top:78px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }.section-heading h2 { margin-bottom:0; }.text-link { color:var(--red); font-size:13px; font-weight:800; white-space:nowrap; }
.feature-panel { padding:34px; background:var(--ink); color:#fff; border-radius:24px; }.feature-panel .eyebrow { color:#e7a847; }.feature-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:26px; }.feature-main { min-height:310px; overflow:hidden; position:relative; border-radius:16px; }.feature-main img { width:100%; height:100%; object-fit:cover; }.feature-main div { position:absolute; inset:auto 0 0; padding:30px 22px 20px; background:linear-gradient(transparent,rgba(0,0,0,.85)); }.feature-main h3 { margin:5px 0; font-size:27px; font-family:Georgia,serif; }.feature-main p { margin:0; color:#e8e8e1; font-size:13px; }.tag { display:inline-block; color:var(--red); font-size:11px; font-weight:800; }.tag.light { color:#fff; }.feature-list { display:flex; flex-direction:column; justify-content:center; gap:3px; }.feature-list a { display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.18); }.feature-list b { color:var(--gold); font-family:Georgia,serif; font-size:23px; }.feature-list span { font-weight:800; }.feature-list small { display:block; color:#bac8bf; font-weight:400; font-size:12px; }.feature-list em { color:var(--gold); font-size:11px; font-style:normal; }
.comic-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }.comic-card { min-width:0; }.comic-cover { display:block; overflow:hidden; position:relative; aspect-ratio:3/4; border-radius:14px; box-shadow:0 8px 20px rgba(30,54,45,.12); background:var(--cream); }.cover { width:100%; height:100%; object-fit:cover; transition:transform .25s; }.comic-cover:hover .cover { transform:scale(1.04); }.chapter { position:absolute; right:8px; bottom:8px; padding:3px 8px; color:#fff; background:rgba(23,63,58,.88); border-radius:99px; font-size:11px; }.comic-copy { padding:12px 3px; }.comic-copy p { margin-bottom:0; color:var(--muted); font-size:12px; line-height:1.55; }
.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.category-card { display:flex; align-items:center; gap:16px; min-height:118px; padding:20px; border:1px solid var(--line); border-radius:15px; background:#fffdf8; transition:transform .2s,box-shadow .2s; }.category-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }.category-icon { display:grid; flex:0 0 48px; width:48px; height:48px; place-items:center; border-radius:14px; color:#fff; background:var(--ink); font-size:22px; }.c2 .category-icon,.c5 .category-icon { background:var(--red); }.c3 .category-icon,.c6 .category-icon { background:var(--gold); }.category-card strong,.category-card small { display:block; }.category-card small { color:var(--muted); font-size:12px; line-height:1.55; }
.rank-section { padding:35px; border:1px solid var(--line); border-radius:24px; }.rank-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:28px; }.rank-list a { display:grid; grid-template-columns:54px 1fr 24px; gap:13px; align-items:center; padding:14px 0; border-bottom:1px dashed var(--line); }.rank-list b { color:var(--red); font-family:Georgia,serif; font-size:26px; }.rank-list span { font-weight:800; }.rank-list small { display:block; color:var(--muted); font-size:12px; font-weight:400; }.rank-list i { color:var(--red); font-style:normal; }.rank-poster { min-height:245px; position:relative; overflow:hidden; border-radius:15px; }.rank-poster img { width:100%; height:100%; object-fit:cover; }.rank-poster span { position:absolute; inset:auto 0 0; padding:32px 18px 15px; width:100%; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.84)); font-size:12px; }.rank-poster strong { font-family:Georgia,serif; font-size:22px; }
.korean-band { display:grid; grid-template-columns:1fr 1fr; gap:45px; align-items:center; padding:45px 55px; color:#fff; background:#775b61; border-radius:24px; }.korean-band p { color:#f7e6df; }.korean-band .eyebrow { color:#f9c974; }.korean-covers { display:grid; grid-template-columns:1fr 1fr; gap:13px; transform:rotate(2deg); }.korean-covers img { height:265px; width:100%; object-fit:cover; border:5px solid #f9eee5; }.korean-covers img:last-child { margin-top:25px; transform:rotate(-4deg); }
.schedule-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }.schedule-grid div { min-height:120px; padding:16px; border:1px solid var(--line); border-radius:13px; background:#fffdf8; }.schedule-grid div:first-child { color:#fff; background:var(--red); border-color:var(--red); }.schedule-grid b,.schedule-grid span,.schedule-grid small { display:block; }.schedule-grid b { font-size:12px; }.schedule-grid span { margin:13px 0 4px; font-weight:800; }.schedule-grid small { color:var(--muted); font-size:11px; }.schedule-grid div:first-child small { color:#fff4ea; }
.shelf-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.shelf-grid a { min-height:175px; display:flex; flex-direction:column; padding:24px; color:#fff; border-radius:16px; background:var(--ink); }.shelf-grid a:nth-child(2) { background:var(--red); }.shelf-grid a:nth-child(3) { background:#a7784e; }.shelf-grid span { font-size:11px; letter-spacing:1px; }.shelf-grid strong { max-width:220px; margin-top:auto; font-family:Georgia,serif; font-size:22px; line-height:1.25; }.shelf-grid i { margin-top:12px; font-style:normal; }
.about-section { display:grid; grid-template-columns:165px 1fr; gap:38px; align-items:start; padding:45px; background:#efe4d1; border-radius:24px; }.about-stamp { display:grid; width:136px; height:136px; place-items:center; color:var(--red); border:2px solid var(--red); border-radius:50%; font-family:Georgia,serif; font-size:27px; font-weight:800; line-height:1.15; text-align:center; transform:rotate(-12deg); }.about-section p { color:#526059; }.about-points { display:flex; flex-wrap:wrap; gap:9px; }.about-points span { padding:5px 11px; border:1px solid #c8bca8; border-radius:99px; color:#59645b; font-size:12px; }
.app-section { display:flex; justify-content:space-between; gap:50px; align-items:center; padding:46px 64px; color:#fff; background:var(--ink); border-radius:24px; }.app-section h2 { font-size:34px; }.app-section p { max-width:590px; color:#cbd5cf; }.app-section .eyebrow { color:var(--gold); }.qr-card { display:grid; gap:10px; place-items:center; min-width:175px; padding:14px; color:var(--ink); background:#fff; border-radius:14px; font-size:11px; }.qr-grid { display:grid; width:118px; height:118px; place-items:center; color:#fff; background:repeating-linear-gradient(45deg,var(--ink),var(--ink) 8px,#fff 8px,#fff 14px); outline:5px solid #fff; font-family:Georgia,serif; font-size:23px; font-weight:800; line-height:1.1; text-align:center; text-shadow:1px 1px 0 var(--red); }
.site-footer { margin-top:80px; padding:43px 0 18px; color:#c5d0c9; background:#112e2a; }.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:35px; }.site-footer .brand { color:#fff; }.site-footer p { max-width:270px; margin-top:12px; color:#b4c1ba; font-size:13px; }.site-footer h3 { color:#eab054; font-size:13px; }.site-footer a:not(.brand) { display:block; margin:5px 0; color:#c5d0c9; font-size:13px; }.copyright { margin-top:28px; padding-top:17px; border-top:1px solid rgba(255,255,255,.12); color:#96aaa0; font-size:12px; }
.inner-page,.reader-page { padding-top:34px; }.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-size:12px; }.breadcrumbs a { color:var(--red); }.channel-hero { display:flex; gap:22px; align-items:center; margin-top:18px; padding:38px 43px; background:var(--cream); border-radius:20px; }.channel-hero h1 { margin-bottom:8px; font-size:42px; }.channel-hero p:last-child { margin-bottom:0; color:var(--muted); }.channel-icon { display:grid; flex:0 0 72px; height:72px; place-items:center; color:#fff; background:var(--red); border-radius:19px; font-size:30px; }.channel-content { margin-top:55px; }.seo-copy { padding:31px 35px; background:#fffdf8; border:1px solid var(--line); border-radius:18px; }.seo-copy p { margin-bottom:0; color:var(--muted); }.reader-article { max-width:830px; margin:18px auto 0; }.reader-heading { padding:32px 20px 22px; text-align:center; border-bottom:1px solid var(--line); }.reader-heading h1 { font-size:39px; }.reader-meta { display:flex; justify-content:center; flex-wrap:wrap; gap:13px; color:var(--muted); font-size:12px; }.reading-note { margin:27px 0; padding:20px 24px; border-left:4px solid var(--red); background:#f5ead7; }.reading-note h2 { font-size:19px; }.reading-note p { margin-bottom:0; color:#53615c; font-size:14px; }.chapter-intro { margin:34px auto 25px; max-width:650px; color:#53615c; text-align:center; }.comic-pages figure { margin:0 0 27px; }.reader-image { width:100%; min-height:360px; max-height:650px; object-fit:cover; border-radius:10px; background:var(--cream); }.comic-pages figcaption { padding:8px 0; color:var(--muted); font-size:12px; text-align:center; }.chapter-end { margin:50px 0 27px; text-align:center; }.chapter-end span { color:var(--red); font-size:23px; }.chapter-end h2 { margin:3px 0; font-size:25px; }.chapter-end p { color:var(--muted); font-size:13px; }.chapter-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; margin-bottom:20px; }.chapter-nav a,.chapter-nav span { padding:11px 15px; border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:13px; }.chapter-nav a:last-child,.chapter-nav span:last-child { text-align:right; }.chapter-nav .return-list { color:#fff; background:var(--red); border-color:var(--red); font-weight:700; }
@media (max-width:900px) { .main-nav { display:none; }.main-nav.open { position:absolute; top:78px; left:20px; right:20px; display:grid; grid-template-columns:repeat(4,1fr); padding:12px; background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }.menu-toggle { display:block; margin-left:auto; }.search-link span { display:none; }.hero { grid-template-columns:1fr; }.hero-copy { padding:44px 35px; }.hero-art { min-height:290px; padding:0 35px 28px; }.hero-image { min-height:280px; }.floating-note { left:15px; bottom:42px; }.comic-grid { grid-template-columns:repeat(3,1fr); }.schedule-grid { grid-template-columns:repeat(3,1fr); }.feature-layout,.rank-layout { grid-template-columns:1fr; }.korean-band { padding:37px; grid-template-columns:1fr; }.korean-covers { max-width:500px; }.about-section { grid-template-columns:1fr; }.about-stamp { width:95px; height:95px; font-size:19px; }.app-section { padding:38px; }.header-row { gap:12px; } }
@media (max-width:580px) { .shell { width:min(100% - 28px,1200px); }.header-row { min-height:65px; }.brand { font-size:19px; }.brand-mark { width:29px; height:29px; font-size:14px; }.main-nav.open { top:65px; grid-template-columns:repeat(2,1fr); }.hero { margin-top:28px; border-radius:19px; }.hero-copy { padding:35px 23px; }.hero-art { padding:0 17px 20px; }.hero-image { min-height:235px; }.floating-note { padding:11px 14px; bottom:29px; }.hero-stats { gap:9px; }.hero-stats b { font-size:15px; } h1 { font-size:39px; } h2 { font-size:26px; } main > section,.inner-page > .shell > section { margin-top:53px; }.quick-strip { grid-template-columns:repeat(2,1fr); }.quick-strip a { padding:13px; }.feature-panel,.rank-section { padding:22px; }.comic-grid { grid-template-columns:repeat(2,1fr); gap:13px; }.category-grid { grid-template-columns:1fr; }.category-card { min-height:96px; }.schedule-grid { grid-template-columns:repeat(2,1fr); }.shelf-grid { grid-template-columns:1fr; }.korean-band { padding:27px 23px; }.about-section { padding:30px 24px; }.app-section { display:grid; padding:31px 23px; }.footer-grid { grid-template-columns:1fr 1fr; }.footer-grid > div:first-child { grid-column:span 2; }.channel-hero { padding:26px 21px; }.channel-icon { flex-basis:52px; height:52px; font-size:22px; }.channel-hero h1,.reader-heading h1 { font-size:31px; }.reader-heading { padding-left:0; padding-right:0; }.reader-image { min-height:260px; }.chapter-nav { grid-template-columns:1fr 1fr; }.chapter-nav .return-list { grid-column:span 2; grid-row:1; text-align:center; }.chapter-nav a:last-child,.chapter-nav span:last-child { text-align:right; } }