:root{--bg:#f6f5f2;--surface:#fff;--text:#111;--muted:#777;--line:#e8e6e1;--accent:#ff5a36}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif}
a{color:inherit;text-decoration:none}
.header{height:70px;padding:0 max(20px,calc((100% - 1120px)/2));display:flex;align-items:center;gap:30px;position:sticky;top:0;z-index:5;background:rgba(246,245,242,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font-size:23px;font-weight:900;letter-spacing:-1.5px;margin-right:auto}
.logo span{font-weight:400}
.header nav{display:flex;gap:22px;font-size:14px;font-weight:700}
.theme{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--surface);cursor:pointer;color:var(--text)}
.hero{max-width:1120px;margin:auto;padding:90px 24px;display:flex;align-items:center;justify-content:space-between;gap:40px}
.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:900;color:var(--accent)}
.hero h1{font-size:clamp(42px,6vw,76px);line-height:1.05;letter-spacing:-5px;margin:16px 0 22px}
.hero h1 strong,.about strong{color:var(--accent)}
.hero p{color:var(--muted);line-height:1.8}
.hero-button{display:inline-block;margin-top:15px;background:var(--text);color:var(--bg);padding:14px 21px;border-radius:99px;font-weight:800;font-size:14px}
.hero-toon{width:300px;height:340px;position:relative;flex:none}
.toon-card{position:absolute;width:225px;height:290px;border:8px solid #fff;border-radius:8px;box-shadow:0 18px 50px #0002}
.back{background:#d8d4cc;transform:rotate(-10deg);left:5px;top:20px}
.mid{background:#ffcf3f;transform:rotate(6deg);left:50px;top:10px}
.front{background:#111;color:#fff;left:30px;top:25px;transform:rotate(-2deg);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:18px}
.front b{font-size:52px;letter-spacing:-4px}
.front i{font-style:normal;color:var(--accent);font-size:30px;font-weight:900}
.section{max-width:1120px;margin:auto;padding:55px 24px 100px}
.section-head{margin-bottom:25px}
.section-head h2{font-size:34px;letter-spacing:-2px;margin:8px 0}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{background:var(--surface);border-radius:14px;overflow:hidden;box-shadow:0 8px 30px #0000000a;transition:.2s}
.post-card:hover{transform:translateY(-5px)}
.thumb{height:230px;background:linear-gradient(135deg,#222,#555);display:flex;align-items:center;justify-content:center;color:#fff;font-size:25px;font-weight:900;line-height:.85;position:relative}
.thumb em{position:absolute;left:14px;top:14px;background:var(--accent);color:#fff;font-style:normal;font-size:11px;padding:6px 9px;border-radius:99px}
.post-info{padding:18px 20px 22px}
.post-info time{font-size:11px;color:var(--muted)}
.post-info h3{font-size:20px;line-height:1.35;letter-spacing:-1px;margin:8px 0}
.post-info p{font-size:13px;color:var(--muted);line-height:1.6}
.about{background:#111;color:#fff;text-align:center;padding:90px 20px}
.about h2{font-size:42px;line-height:1.2;letter-spacing:-2px}
.about p{color:#aaa;line-height:1.8}
footer{max-width:1120px;margin:auto;padding:55px 24px;color:var(--muted)}
footer .logo{color:var(--text);margin:0 0 5px}
.article{max-width:760px;margin:auto;padding:70px 20px 100px}
.article header{text-align:center;padding-bottom:55px}
.meta{font-size:12px;color:var(--accent);font-weight:800}
.article h1{font-size:clamp(32px,6vw,54px);line-height:1.2;letter-spacing:-3px;margin:18px 0}
.article header p{color:var(--muted)}
.content{font-size:17px;line-height:2}
.content h2{font-size:28px;line-height:1.35;letter-spacing:-1.5px;margin:60px 0 20px}
.content img{display:block;max-width:100%;margin:35px auto;border-radius:7px}
.content blockquote{margin:40px 0;padding:24px;border-left:5px solid var(--accent);background:var(--surface);font-weight:800}
.back-link{display:block;border-top:1px solid var(--line);margin-top:60px;padding-top:25px;font-weight:800}
[data-theme=dark]{--bg:#111;--surface:#1c1c1c;--text:#f5f5f5;--muted:#999;--line:#303030}
[data-theme=dark] .header{background:rgba(17,17,17,.9)}
@media(max-width:700px){
.header{height:62px;padding:0 17px}.header nav{display:none}
.hero{display:block;padding:55px 20px 70px}.hero h1{letter-spacing:-3px}
.hero-toon{margin:45px auto 0;width:260px;height:290px}.toon-card{width:195px;height:250px}
.back{left:5px}.mid{left:40px}.front{left:25px}.front b{font-size:43px}
.section{padding:45px 17px 70px}.post-grid{grid-template-columns:1fr;gap:18px}.thumb{height:230px}
.about{padding:70px 20px}.about h2{font-size:34px}
.article{padding:45px 18px 70px}.content{font-size:16px}
}