:root{--bg:#fff;--bg-alt:#f6f7fb;--text:#1b1d29;--text-muted:#5b6072;--border:#e3e5ee;--card:#fff;--accent:#646cff;--accent-hover:#4f57e6;--react:#0ea5c6;--code-bg:#1e2030;color:var(--text);background:var(--bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-font-smoothing:antialiased;font-family:Pretendard,Apple SD Gothic Neo,Noto Sans KR,system-ui,sans-serif;line-height:1.6}@media (prefers-color-scheme:dark){:root{--bg:#12131a;--bg-alt:#181a24;--text:#eceef5;--text-muted:#a3a8bb;--border:#2a2d3c;--card:#1c1e2a;--accent:#7c83ff;--accent-hover:#959bff;--react:#61dafb;--code-bg:#0b0c12;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);margin:0}h1,h2,h3{word-break:keep-all;margin:0;line-height:1.25}p{word-break:keep-all;margin:0}a{color:inherit;text-decoration:none}.container{width:100%;max-width:1120px;margin:0 auto;padding-inline:24px}.header{z-index:10;background:color-mix(in srgb, var(--bg) 85%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;height:64px;display:flex}.brand{align-items:center;gap:10px;font-weight:700;display:flex}.brand-logo{width:28px;height:28px}.nav{color:var(--text-muted);align-items:center;gap:24px;font-size:15px;display:flex}.nav a:hover{color:var(--text)}.nav .nav-cta{color:#fff;background:var(--accent);border-radius:8px;padding:6px 14px}.nav .nav-cta:hover{color:#fff;background:var(--accent-hover)}.btn{border-radius:10px;padding:12px 22px;font-weight:600;transition:background .15s,transform .15s;display:inline-block}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-ghost{border:1px solid var(--border);color:var(--text)}.btn-ghost:hover{background:var(--bg-alt)}.hero{background:radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--react) 18%, transparent), transparent 45%), radial-gradient(circle at 10% 80%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%);padding-block:96px 80px}.hero-inner{grid-template-columns:1.1fr 1fr;align-items:center;gap:56px;display:grid}.eyebrow{color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);border-radius:999px;margin-bottom:20px;padding:4px 12px;font-size:14px;font-weight:600;display:inline-block}.hero h1{letter-spacing:-.02em;font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800}.grad-vite{background:linear-gradient(135deg,#41d1ff,#bd34fe);color:#0000;-webkit-background-clip:text;background-clip:text}.grad-react{color:var(--react)}.hero-desc{color:var(--text-muted);margin-top:20px;font-size:1.1rem}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:32px;display:flex}.hero-visual{flex-direction:column;align-items:center;gap:28px;display:flex}.logos{align-items:center;gap:20px;display:flex}.logo{width:72px;height:72px}.logo-react{animation:18s linear infinite spin}.plus{color:var(--text-muted);font-size:28px}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.logo-react{animation:none}}.code-card{background:var(--code-bg);color:#e6e8f2;border-radius:14px;width:100%;max-width:420px;margin:0;padding:20px 24px;font-family:JetBrains Mono,ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.7;overflow-x:auto;box-shadow:0 20px 40px #0000002e}.c-comment{color:#7f849c}.c-cmd{color:#a6e3a1}.c-key{color:#cba6f7}.c-fn{color:#89b4fa}.c-tag{color:#61dafb}.section{padding-block:88px}.section-alt{background:var(--bg-alt)}.section-title{text-align:center;font-size:clamp(1.7rem,3.5vw,2.2rem);font-weight:800}.section-desc{text-align:center;color:var(--text-muted);margin-top:12px}.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:48px 0 0;padding:0;list-style:none;display:grid}.lesson-card{background:var(--card);border:1px solid var(--border);border-radius:14px;height:100%;padding:24px;transition:border-color .15s,transform .15s;display:block}.lesson-card:hover{border-color:var(--accent);transform:translateY(-3px)}.lesson-top{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.lesson-step{color:var(--accent);letter-spacing:.04em;font-size:13px;font-weight:700}.lesson-tag{border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600}.tag-vite{color:#9b4dff;background:#bd34fe24}.tag-react{color:var(--react);background:color-mix(in srgb, var(--react) 14%, transparent)}.lesson-card h3{margin-bottom:8px;font-size:1.15rem}.lesson-card p{color:var(--text-muted);font-size:15px}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin-top:48px;display:grid}.feature{text-align:center}.feature-icon{background:var(--card);border:1px solid var(--border);border-radius:14px;place-items:center;width:56px;height:56px;margin-bottom:16px;font-size:28px;display:inline-grid}.feature h3{margin-bottom:8px;font-size:1.15rem}.feature p{color:var(--text-muted);font-size:15px}.cta-inner{text-align:center;background:linear-gradient(135deg, var(--accent), var(--react));color:#fff;border-radius:20px;padding:56px 24px}.cta h2{font-size:clamp(1.5rem,3vw,2rem)}.cta p{opacity:.9;margin:12px 0 28px}.cta .btn-primary{color:#2a2d5c;background:#fff}.footer{border-top:1px solid var(--border);text-align:center;color:var(--text-muted);padding-block:28px;font-size:14px}section[id]{scroll-margin-top:64px}.lesson-layout{grid-template-columns:240px minmax(0,1fr);gap:56px;padding-block:48px 88px;display:grid}.lesson-sidebar{align-self:start;position:sticky;top:88px}.sidebar-title{color:var(--text-muted);margin-bottom:12px;font-size:13px;font-weight:700}.lesson-sidebar ol{gap:4px;margin:0;padding:0;list-style:none;display:grid}.lesson-sidebar a{color:var(--text-muted);border-radius:8px;gap:10px;padding:8px 12px;font-size:15px;display:flex}.lesson-sidebar a:hover{background:var(--bg-alt);color:var(--text)}.lesson-sidebar a.active{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);font-weight:600}.sidebar-step{font-variant-numeric:tabular-nums;font-weight:700}.lesson{max-width:760px}.breadcrumb{color:var(--text-muted);margin-bottom:24px;font-size:14px}.breadcrumb a:hover{color:var(--accent)}.lesson-header{border-bottom:1px solid var(--border);padding-bottom:32px}.lesson-header h1{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800}.lesson-lead{color:var(--text-muted);margin-top:12px;font-size:1.1rem}.lesson-section{margin-top:40px}.lesson-section h2{margin-bottom:14px;font-size:1.4rem}.lesson-section p{margin-bottom:12px;font-size:16px;line-height:1.8}.lesson-section p code{background:var(--bg-alt);border:1px solid var(--border);border-radius:6px;padding:2px 6px;font-family:JetBrains Mono,ui-monospace,Menlo,Consolas,monospace;font-size:.88em}.code-block{background:var(--code-bg);color:#e6e8f2;border-radius:12px;margin:16px 0 0;padding:18px 22px;font-family:JetBrains Mono,ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.7;overflow-x:auto}.pager{grid-template-columns:1fr 1fr;gap:16px;margin-top:64px;display:grid}.pager-link{border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:4px;padding:18px 20px;transition:border-color .15s;display:flex}.pager-link:hover{border-color:var(--accent)}.pager-link span{color:var(--text-muted);font-size:14px}.pager-next{text-align:right}.not-found{text-align:center;justify-items:center;gap:12px;display:grid}.not-found-code{color:var(--accent);font-size:4rem;font-weight:800;line-height:1}.not-found .btn{margin-top:16px}@media (width<=860px){.hero{padding-block:64px 56px}.hero-inner{grid-template-columns:1fr;gap:40px}.nav a:not(.nav-cta){display:none}.lesson-layout{grid-template-columns:1fr;gap:0;padding-block:32px 64px}.lesson-sidebar{display:none}.pager{grid-template-columns:1fr}}@media (width<=400px){.container{padding-inline:16px}.lesson-grid{grid-template-columns:1fr}.brand span{font-size:15px}}