:root{color-scheme:light;--color-bg:#fafaf9;--color-surface:#fff;--color-text:#242724;--color-muted:#777d78;--color-subtle:#a1a6a1;--color-border:#e8e9e5;--color-accent:#385e80;--color-accent-soft:#edf2f6;--font-sans:"Inter", "Noto Sans KR", sans-serif;--font-mono:"DM Mono", monospace;--width-page:1080px;--width-reading:720px}*,:before,:after{box-sizing:border-box}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.75}a{color:inherit;text-decoration:none}button,input{font:inherit}::selection{color:var(--color-text);background:#dce7ef}.site-header{z-index:10;border-bottom:1px solid var(--color-border);backdrop-filter:blur(12px);background:#fafaf9eb;position:sticky;top:0;& .header-inner{width:min(var(--width-page), calc(100% - 48px));justify-content:space-between;align-items:center;height:72px;margin:0 auto;display:flex}& .brand{letter-spacing:-.04em;align-items:center;gap:10px;font-weight:700;display:inline-flex}& .brand-mark{background:var(--color-text);color:#fff;letter-spacing:-.06em;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;display:inline-flex}& .brand-name{font-size:17px}& .main-nav{color:var(--color-muted);align-items:center;gap:32px;font-size:13px;font-weight:500;display:flex;& a{transition:color .16s;&:hover{color:var(--color-text)}}}}.hero{border-bottom:1px solid var(--color-border);& .hero-inner{width:min(var(--width-page), calc(100% - 48px));margin:0 auto;padding:112px 0 120px}& h1{letter-spacing:-.065em;margin:24px 0;font-size:clamp(42px,6vw,68px);font-weight:600;line-height:1.13;& span{color:var(--color-accent)}}& .hero-description{max-width:540px;color:var(--color-muted);word-break:keep-all;margin:0 0 32px;font-size:16px;line-height:1.9}}.eyebrow{color:var(--color-accent);font-family:var(--font-mono);letter-spacing:.12em;margin:0;font-size:11px;font-weight:500}.posts-section{width:min(var(--width-page), calc(100% - 48px));margin:0 auto;padding:88px 0 104px;& .section-heading{justify-content:space-between;align-items:flex-end;margin-bottom:32px;display:flex;& h2{letter-spacing:-.05em;margin:8px 0 0;font-size:25px;font-weight:600}}& .post-count{color:var(--color-subtle);font-family:var(--font-mono);font-size:11px}& .post-list{border-top:1px solid var(--color-border)}& .post-item{border-bottom:1px solid var(--color-border)}& .post-link{align-items:flex-start;gap:20px;padding:28px 18px;transition:background .2s;display:flex;&:hover{background:#0000000a}}& .post-content{flex:1;min-width:0;& h3{letter-spacing:-.04em;margin:0;font-size:19px;font-weight:600;line-height:1.5}&>p{color:var(--color-muted);word-break:keep-all;margin:7px 0 14px;font-size:14px}}& .post-meta{color:var(--color-subtle);flex-wrap:wrap;align-items:center;gap:10px;font-size:11px;display:flex}}.tag{background:var(--color-accent-soft);color:var(--color-accent);border-radius:4px;align-items:center;padding:2px 8px;font-size:11px;font-weight:500;display:inline-flex}.empty-state{border-bottom:1px solid var(--color-border);text-align:center;padding:64px 24px;& p{margin:0;font-size:15px;font-weight:500}& span{color:var(--color-muted);font-size:13px}}.article{width:min(var(--width-reading), calc(100% - 48px));margin:0 auto;padding:56px 0 100px;& .article-header{border-bottom:1px solid var(--color-border);padding-bottom:40px;& .back-link{color:var(--color-muted);margin-bottom:40px;font-size:12px;display:inline-block;&:hover{color:var(--color-accent)}}& .article-tags{gap:6px;margin-bottom:16px;display:flex}& h1{letter-spacing:-.06em;word-break:keep-all;margin:0;font-size:clamp(30px,5vw,42px);line-height:1.35}& .article-description{color:var(--color-muted);word-break:keep-all;margin:16px 0 20px;font-size:15px;line-height:1.8}& .article-meta{color:var(--color-subtle);gap:16px;font-size:12px;display:flex}}& .article-body{color:#343a36;word-break:keep-all;overflow-wrap:break-word;padding-top:36px;font-size:16px;line-height:1.95;& h2,& h3,& h4{color:var(--color-text);letter-spacing:-.04em;font-weight:600;line-height:1.5}& h2{margin:56px 0 20px;font-size:26px}& h3{margin:40px 0 14px;font-size:21px}& a{color:var(--color-accent);text-underline-offset:4px;text-decoration:underline}& ul,& ol{margin:0 0 24px;padding-left:24px}& li{margin:6px 0;padding-left:4px}& blockquote{border-left:3px solid var(--color-accent);color:var(--color-muted);margin:32px 0;padding:4px 0 4px 20px}& code{font-family:var(--font-mono);background:#eff0ed;border-radius:4px;padding:3px 6px;font-size:.85em}& pre{background:#f1f2ef;border:1px solid #e5e7e3;border-radius:8px;margin:28px 0;padding:22px;line-height:1.7;overflow-x:auto;& code{background:0 0;padding:0;font-size:13px}}& img{border-radius:8px;max-width:100%;height:auto;margin:32px auto;display:block}& hr{border:0;border-top:1px solid var(--color-border);margin:48px 0}& table{border-collapse:collapse;width:100%;margin:28px 0;font-size:14px}& th,& td{border:1px solid var(--color-border);text-align:left;padding:12px}& th{background:#f1f2ef;font-weight:600}}& .article-footer{border-top:1px solid var(--color-border);margin-top:64px;padding-top:24px}}.site-footer{border-top:1px solid var(--color-border);& .footer-inner{width:min(var(--width-page), calc(100% - 48px));color:var(--color-subtle);justify-content:space-between;gap:16px;margin:0 auto;padding:24px 0;font-size:11px;display:flex}}@media (width<=640px){.site-header{& .header-inner{width:calc(100% - 36px);height:64px}& .main-nav{gap:18px;font-size:12px}}.hero{& .hero-inner{width:calc(100% - 40px);padding:84px 0 88px}& h1{font-size:clamp(36px,10vw,48px)}& .hero-description{font-size:14px}}.posts-section{width:calc(100% - 36px);padding:64px 0 72px;& .section-heading h2{font-size:22px}& .post-item .post-link{gap:10px;padding:24px 2px}& .post-number{width:28px}& .post-content h3{font-size:16px}& .post-content>p{font-size:13px}& .post-arrow{width:16px}}.about-section{padding:64px 24px}.article{width:calc(100% - 40px);padding-top:36px;& .article-header .back-link{margin-bottom:28px}& .article-body{font-size:15px;& h2{font-size:23px}& h3{font-size:19px}& pre{margin-left:-8px;margin-right:-8px;padding:16px}}}.site-footer .footer-inner{flex-direction:column;gap:4px;width:calc(100% - 36px)}}