:root { --ink:#172d2a; --muted:#526a65; --green:#087d68; --mint:#d8f4e9; --line:#dce6e1; --paper:#f7faf8; --surface:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:20px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; font-size:16px; line-height:1.75; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--green); }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; }
a:focus-visible,button:focus-visible { outline:3px solid #d28712; outline-offset:4px; }
img { display:block; max-width:100%; object-fit:cover; background:#d8e6e0; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.4; }
h2 { font-size:27px; letter-spacing:-.5px; }
h3 { font-size:18px; }
p { color:var(--muted); }
.wrap { width:min(1200px,calc(100% - 48px)); margin-inline:auto; }
.icon { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:-4px; }
header { background:var(--surface); border-bottom:1px solid var(--line); }
.topbar { display:flex; align-items:center; gap:24px; min-height:85px; }
.logo { font-size:27px; font-weight:900; display:flex; gap:10px; align-items:center; letter-spacing:-1px; }
.logo .icon { background:var(--green); color:white; width:43px; height:43px; padding:8px; border-radius:13px 13px 13px 3px; }
.brand-note { color:var(--muted); font-size:14px; border-left:1px solid var(--line); padding-left:24px; }
.shelf-link { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:14px; }
.navigation { display:grid; grid-template-columns:repeat(9,1fr); gap:6px; padding-bottom:12px; }
.navigation a { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 3px; border-radius:7px; font-size:14px; white-space:nowrap; }
.navigation a.active { color:var(--green); background:var(--mint); font-weight:700; }
main>section { margin-block:64px; }
.hero { margin-top:30px; display:grid; grid-template-columns:1.05fr 1fr; min-height:440px; background:var(--mint); border-radius:20px; overflow:hidden; }
.hero-copy { padding:38px 40px; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:1.5px; color:var(--green); display:block; margin-bottom:12px; }
.hero h1 { font-size:20px; margin-bottom:13px; }
.hero-tagline { font-size:42px; font-weight:850; color:var(--ink); line-height:1.3; letter-spacing:-1.5px; margin-bottom:18px; }
.hero-copy>p:not(.hero-tagline) { font-size:15px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:24px; }
.button { border:1px solid transparent; border-radius:7px; padding:11px 18px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:14px; font-weight:700; }
.dark { color:white; background:var(--ink); }
.dark:hover { color:white; background:var(--green); }
.outline { background:transparent; color:var(--ink); border-color:#a8bcb3; }
.hero-foot { display:flex; flex-wrap:wrap; gap:20px; font-size:12px; margin-top:26px; color:#3d665b; }
.hero-art { position:relative; min-height:440px; background:#194b45; }
.hero-art>a { display:block; height:100%; }
.hero-art img { width:100%; height:100%; aspect-ratio:1.2; }
.hero-caption { position:absolute; inset:auto 0 0; padding:70px 30px 28px; background:linear-gradient(transparent,rgba(4,26,24,.92)); color:white; pointer-events:none; }
.hero-caption h2 { margin:7px 0; font-size:30px; }
.hero-caption p { color:#e5f2ee; font-size:14px; }
.hero-caption span { font-size:13px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:25px; }
.section-head h2 { display:flex; align-items:center; gap:11px; }
.section-head h2 .icon { color:var(--green); }
.section-head p { margin-top:7px; font-size:14px; }
.more { white-space:nowrap; font-size:14px; color:var(--green); }
.grid { display:grid; gap:24px; }
.six { grid-template-columns:repeat(6,minmax(0,1fr)); }
.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cover { display:block; overflow:hidden; border-radius:10px; margin-bottom:12px; }
.cover img { width:100%; aspect-ratio:3/4; height:auto; transition:transform .2s; }
.cover:hover img { transform:scale(1.025); }
.book-card h3 { margin:5px 0 7px; }
.book-card p { font-size:14px; }
.meta { font-size:13px; color:var(--muted); }
.categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.category { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:23px; position:relative; }
.category>.icon { width:29px; height:29px; color:var(--green); margin-bottom:14px; }
.category p { font-size:14px; margin:8px 0 13px; }
.category span { font-size:12px; color:var(--muted); }
.category:hover { border-color:var(--green); }
.editors { background:#163e35; color:white; border-radius:16px; padding:32px; }
.editors p,.editors .eyebrow,.editors .more,.editors .icon { color:#bce4d4; }
.editor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.editor-grid article { display:flex; gap:14px; border-top:1px solid #426357; padding-top:23px; }
.editor-number { font-size:35px; color:#7fb39e; line-height:1.2; }
.editor-grid p { font-size:14px; margin:12px 0 16px; }
.editor-grid a { font-size:15px; }
.korean-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.korean-grid article { background:#f0e9f4; border-radius:12px; overflow:hidden; }
.korean-grid img { width:100%; height:auto; aspect-ratio:1.3; }
.korean-grid article>div { padding:20px; }
.korean-grid h3 { margin:8px 0; }
.korean-grid p { font-size:14px; }
.rank-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.rank-column { border-top:3px solid var(--green); }
.rank-column h3 { padding:18px 0; }
.rank-row { display:flex; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--line); }
.rank-row>strong { color:var(--green); font-size:24px; font-weight:500; }
.rank-row>span { flex:1; font-size:15px; }
.rank-row small { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
.spotlight { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); background:var(--surface); border-radius:16px; overflow:hidden; }
.spotlight>img { width:100%; height:100%; aspect-ratio:1.3; }
.spotlight>div { padding:40px; }
.spotlight h2 { font-size:32px; margin-bottom:17px; }
.spotlight p { margin-bottom:22px; font-size:15px; }
.finished-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.finished-card { padding:26px 22px; background:#edf0db; border-left:6px solid #bbc788; border-radius:3px 12px 12px 3px; }
.finished-card:nth-child(even) { background:#e5edf5; border-color:#91adc7; }
.spine { font-size:12px; letter-spacing:2px; }
.finished-card h3 { margin:25px 0 13px; }
.finished-card p { font-size:14px; min-height:75px; }
.finished-card>span:last-child { display:block; margin-top:22px; font-size:13px; }
.timeline-section { display:grid; grid-template-columns:1fr 2fr; gap:40px; }
.timeline-section .section-head { display:block; }
.timeline-section .more { display:block; margin-top:20px; }
.timeline article { display:flex; align-items:center; gap:22px; padding:18px 0; border-bottom:1px solid var(--line); }
.timeline time { color:var(--green); font-weight:700; }
.timeline article>div { flex:1; }
.timeline h3 { font-size:16px; }
.timeline p { font-size:13px; margin-top:4px; }
.pill { font-size:12px; color:var(--green); background:var(--mint); border-radius:20px; padding:4px 10px; display:inline-block; }
.tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; }
.tool-grid>div { border-left:2px solid var(--line); padding-left:22px; }
.tool-grid b { font-size:13px; color:var(--green); }
.tool-grid h3 { margin:13px 0 9px; }
.tool-grid p { font-size:14px; margin-bottom:15px; }
.tool-grid a { font-size:14px; color:var(--green); }
.about-block { border-top:1px solid var(--line); padding-top:40px; }
.about-block>div:last-child { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.about-block p { font-size:15px; }
.subscribe { display:flex; align-items:center; gap:28px; background:var(--mint); border-radius:14px; padding:32px; }
.subscribe>div:nth-child(2) { flex:1; }
.subscribe h2 { font-size:24px; margin-bottom:10px; }
.subscribe p { font-size:14px; }
.subscribe .meta { font-size:12px; margin-top:8px; }
.brand-tile { width:105px; min-height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--ink); color:white; border-radius:20px; flex:none; }
.brand-tile .icon { width:30px; height:30px; }
.brand-tile strong { font-size:24px; }
.brand-tile span { font-size:12px; }
footer { display:flex; justify-content:space-between; gap:20px; padding-block:25px 35px; border-top:1px solid var(--line); font-size:13px; }
footer>div { display:flex; gap:22px; flex-wrap:wrap; }
.breadcrumb { margin-top:26px; font-size:14px; color:var(--muted); }
.page-intro { border-bottom:1px solid var(--line); padding-bottom:30px; margin-top:35px; }
.page-intro h1 { font-size:40px; margin-bottom:17px; }
.page-intro p { max-width:820px; margin-bottom:20px; }
.three .book-card { display:grid; grid-template-columns:130px 1fr; column-gap:18px; align-content:start; }
.three .book-card .cover { grid-row:1/4; }
.detail { display:grid; grid-template-columns:260px 1fr; gap:45px; }
.detail>img { width:260px; height:auto; aspect-ratio:3/4; border-radius:14px; }
.detail h1 { font-size:38px; margin-bottom:20px; }
.detail .meta { margin-top:22px; }
.chapter-list { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.chapter-list a { padding:25px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.chapter-list strong { display:block; margin:10px 0; }
.chapter-list span { font-size:14px; color:var(--muted); }
.note { background:var(--mint); padding:30px; border-radius:12px; }
.note p { margin-top:15px; }
.reader-heading { max-width:820px; margin:40px auto; }
.reader-heading h1 { font-size:32px; margin-bottom:15px; }
.reader-heading p { margin-bottom:16px; }
.reader { width:min(820px,100%); margin:auto; }
.panel { margin:42px 0; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.panel h2 { padding:20px 28px; font-size:21px; }
figure { margin:0; }
.panel img { width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; }
figcaption { text-align:center; padding:10px; font-size:12px; color:var(--muted); }
.panel p { font-size:18px; line-height:2; padding:16px 32px 32px; color:var(--ink); }
.chapter-end { text-align:center; }
.chapter-end p { margin-top:13px; }
.chapter-end .actions { justify-content:center; }
.prose { max-width:820px; }
.prose h2 { margin:35px 0 14px; }
.skip { position:absolute; top:-80px; left:12px; background:white; padding:12px; z-index:10; }
.skip:focus { top:4px; }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#172d2a; color:white; border-radius:9px; padding:12px 24px; max-width:90vw; display:none; z-index:20; }
#toast.show { display:block; }
body.night { --paper:#12201e; --surface:#1c302c; --ink:#e1eee9; --muted:#b8cdc4; --line:#385148; --mint:#23473b; --green:#7cdbb4; }
body.paper { --paper:#f1ead8; --surface:#faf4e7; }
@media(max-width:1050px) { .navigation { grid-template-columns:repeat(5,1fr); } .six { grid-template-columns:repeat(3,minmax(0,1fr)); } .hero-copy { padding:30px; } .hero-tagline { font-size:35px; } .three { grid-template-columns:repeat(2,minmax(0,1fr)); } .korean-grid,.finished-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .editor-grid { gap:18px; } .editor-number { font-size:25px; } }
@media(max-width:700px) { .wrap { width:calc(100% - 32px); } .topbar { min-height:72px; gap:10px; } .logo { font-size:23px; } .brand-note { display:none; } .navigation { grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; } .navigation a { font-size:13px; padding:9px 2px; } .navigation .icon { width:17px; height:17px; } main>section { margin-block:42px; } .hero { grid-template-columns:1fr; margin-top:22px; } .hero-copy { padding:27px 24px; } .hero-tagline { font-size:36px; } .hero-art { min-height:260px; max-height:320px; } .hero-art img { height:320px; } .hero-foot { gap:13px; } h2 { font-size:22px; } .section-head { gap:12px; align-items:flex-start; } .section-head p { font-size:13px; } .more { font-size:12px; } .grid { gap:22px 15px; } .six,.categories { grid-template-columns:repeat(2,minmax(0,1fr)); } .category { padding:19px 15px; } .category p { min-height:49px; } .editor-grid,.rank-grid,.tool-grid { grid-template-columns:1fr; } .editors { padding:25px 20px; } .editor-grid article { padding-top:20px; } .spotlight { grid-template-columns:1fr; } .spotlight>img { aspect-ratio:1.5; } .spotlight>div { padding:26px; } .spotlight h2 { font-size:27px; } .korean-grid { gap:14px; } .korean-grid article>div { padding:15px; } .finished-grid { gap:15px; } .finished-card { padding:20px 14px; } .finished-card h3 { min-height:50px; } .finished-card p { min-height:100px; } .timeline-section { grid-template-columns:1fr; gap:0; } .timeline article { gap:13px; } .timeline .pill { display:none; } .about-block>div:last-child { grid-template-columns:1fr; gap:19px; } .subscribe { flex-wrap:wrap; gap:18px; padding:23px; } .brand-tile { width:76px; min-height:95px; } .subscribe h2 { font-size:20px; } .subscribe>div:nth-child(2) { min-width:170px; } .subscribe>.button { width:100%; } footer { flex-direction:column; } .three { grid-template-columns:repeat(2,minmax(0,1fr)); } .three .book-card { display:block; } .detail { grid-template-columns:1fr; gap:25px; } .detail>img { width:180px; } .detail h1 { font-size:30px; } .chapter-list { grid-template-columns:1fr; } .reader-heading h1 { font-size:26px; } .panel p { padding:14px 21px 25px; font-size:17px; } .page-intro h1 { font-size:32px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }