body.blog-page{background:#fff;font-family:"Pretendard Variable",Pretendard,"Noto Sans KR",sans-serif;line-height:1.7}
.blog-page *{box-sizing:border-box}
.blog-hero{position:relative;overflow:hidden;padding:64px 0 220px;background:radial-gradient(560px 340px at 82% 20%,rgba(10,122,79,.45),transparent 70%),radial-gradient(420px 260px at 0% 100%,rgba(35,64,224,.35),transparent 70%),#0A0F1E;color:#fff}
.blog-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(157,176,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(157,176,255,.07) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,rgba(0,0,0,.3),#000 70%)}
.blog-watermark{position:absolute;right:64px;top:48px;font:600 120px/1 var(--mono);color:rgba(126,226,184,.08);letter-spacing:-.04em}
.blog-hero-inner{position:relative;max-width:880px;margin:auto;padding:0 24px}
.blog-eyebrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.blog-category{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;background:rgba(126,226,184,.14);color:#7EE2B8}
.blog-type,.blog-asof{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:6px;font-size:12.5px;font-weight:700}
.blog-type{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.blog-asof{background:#FFB547;color:#0A0F1E;font-weight:800}
.blog-reading{font:12.5px var(--mono);color:#A7B4D4}
.blog-series-meta{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px}
.blog-series-label{font:12.5px var(--mono);color:#8FA0CC}
.blog-series-label:hover{text-decoration:underline;text-underline-offset:4px}
.blog-series-progress{display:inline-flex;gap:4px}
.blog-series-progress>span{width:28px;height:4px;border-radius:4px;background:rgba(255,255,255,.18)}
.blog-series-progress>.is-current{background:#7EE2B8}
.blog-series-byline{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.blog-series-byline .blog-reading{color:#8FA0CC}
.blog-series-byline .blog-reading::before{content:"·";margin-right:10px}
.blog-hero h1{font-size:52px;line-height:1.22;letter-spacing:-.045em;font-weight:800;margin:22px 0 0;overflow-wrap:anywhere;word-break:keep-all;text-wrap:balance}
.blog-deck{font-size:19px;line-height:1.65;color:#C9D2F5;margin:18px 0 0;max-width:720px}
.blog-byline{display:flex;align-items:center;gap:12px;margin-top:28px;color:#C9D2F5;font-size:13.5px}
.blog-avatar{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#DCE3F5;color:#35416B;flex:none;font-size:13px;font-weight:600}
.blog-published{margin-left:6px}
.blog-cover{position:relative;max-width:1120px;margin:-170px auto 0;padding:0 24px}
.blog-cover img{display:block;width:100%;height:440px;object-fit:cover;object-position:center 49%;border-radius:14px;box-shadow:0 40px 80px -40px rgba(10,15,30,.55)}
.blog-cover figcaption{margin-top:12px;text-align:right;font-size:12px;color:var(--slate)}
.blog-body-wrap{position:relative;padding-top:48px}
.blog-prose{max-width:720px;margin:0 auto;padding:0 24px;color:var(--ink2);font-size:16px;line-height:1.9;overflow-wrap:anywhere}
.blog-prose p{margin:20px 0 0}
.blog-prose ul{margin:20px 0 0;padding-left:24px}
.blog-prose li+li{margin-top:8px}
.blog-figure{margin:28px 0}
.blog-figure>a{display:block;border-radius:12px;overflow:hidden;background:var(--cloud)}
.blog-figure img{display:block;width:100%;height:auto}
.blog-figure figcaption{margin-top:10px;color:var(--slate);font-size:12px;line-height:1.7;text-align:center}
.blog-prose h2:not(#blog-toc-title){font-size:24px;line-height:1.5;letter-spacing:-.03em;margin:48px 0 0;color:var(--ink);scroll-margin-top:28px}
.blog-prose h2>span{font:500 13px var(--mono);color:var(--cobalt);display:block;margin-bottom:8px}
.blog-prose h3{font-size:19px;line-height:1.6;margin:32px 0 0;color:var(--ink)}
.blog-prose a{color:var(--cobalt);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#B7C2F5}
.blog-prose a:hover{text-decoration-color:currentColor}
.blog-prose strong{font-weight:700;color:var(--ink)}
.blog-toc{padding:20px 24px;border-radius:14px;background:var(--cloud)}
.blog-toc h2{font-size:14px;margin:0;color:var(--ink)}
.blog-toc ol{margin:8px 0 0;padding-left:21px;font-size:14.5px;line-height:1.8}
.blog-toc li+li{margin-top:4px}
.blog-toc a{color:var(--ink2);text-decoration:none}
.blog-toc a:hover{color:var(--cobalt)}
.blog-series{margin-bottom:24px;padding:20px 24px;border:1px solid #D7DFF8;border-radius:14px;background:#F8FAFF;scroll-margin-top:24px}
.blog-series-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:16px;line-height:1.5}
.blog-series-heading>span{font:600 10px var(--mono);letter-spacing:.08em;color:var(--cobalt)}
.blog-series-heading>small{margin-left:auto;color:var(--slate);font-size:12px}
.blog-series ol{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.blog-series li{margin:0!important}
.blog-series a,.blog-series-upcoming{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:10px;line-height:1.6}
.blog-series a{background:#E9EEFF;color:var(--cobalt);text-decoration:none;box-shadow:inset 0 0 0 1px #D5DEFF}
.blog-series a:hover{background:#DFE6FF}
.blog-series-number{font:500 16px var(--mono);flex:none}
.blog-series b{font-size:14px;font-weight:600}
.blog-series li small{display:block;font-size:12px;color:var(--slate)}
.blog-series-upcoming{color:var(--slate);background:#F0F3F8}
.blog-intro{padding-top:12px}
.blog-prose code{font-family:var(--mono);font-size:.85em;background:var(--cloud);padding:2px 5px;border-radius:4px}
.blog-prose pre{background:#0A0F1E;color:#D6E2FF;padding:20px 24px;border-radius:12px;overflow-x:auto;line-height:1.8;margin:20px 0 0;white-space:pre}
.blog-prose pre code{background:none;padding:0;font-size:13px}
.blog-table{margin:24px 0;overflow-x:auto;border:1px solid var(--hair2);border-radius:12px}
.blog-table-wide table{width:100%;min-width:560px}
.blog-table caption{text-align:left;padding:14px 18px;font-size:13px;font-weight:600;background:var(--cloud)}
.blog-table th,.blog-table td{text-align:left;padding:14px 18px;font-size:14px;line-height:1.8;vertical-align:top;border-top:1px solid var(--hair)}
.blog-table th{font-weight:600;color:var(--ink)}
.blog-table th:first-child,.blog-table td:first-child{width:140px;min-width:110px}
.blog-prose blockquote{margin:28px 0;padding:4px 24px 24px;border-left:3px solid var(--cobalt);background:#F7F9FE}
.blog-author{margin-top:48px;padding-top:24px;border-top:1px solid var(--hair);display:flex;gap:14px;align-items:center;font-size:15px}
.blog-author .blog-avatar{width:48px;height:48px}
.blog-author>span>span{display:block;font-size:13.5px;color:var(--slate)}
.blog-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.blog-tags span{padding:2px 10px;border-radius:999px;background:var(--cobalt-t);color:var(--cobalt);font-size:12px;font-weight:600}
.blog-rail{position:absolute;top:48px;bottom:0;left:calc(50% + 384px);width:232px}
.blog-rail-sticky{position:sticky;top:24px;display:grid;gap:4px}
.blog-rail h2{font-size:14px;margin:0 0 6px}
.blog-related{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-top:1px solid #E1E6EF}
.blog-related-thumb{height:48px;display:flex;align-items:center;justify-content:center;border-radius:8px;font:600 11px var(--en)}
.blog-linux{background:#132443;color:#E3E9F6}.blog-node{background:#DFEBDF;color:#287335}.blog-php{background:#E4E7F4;color:#535F9D}
.blog-related small{display:block;font-size:11.5px;font-weight:700;color:var(--cobalt)}
.blog-related b{display:block;font-size:14px;line-height:1.5;margin-top:3px;font-weight:600}
.blog-related:hover b{color:var(--cobalt)}
.blog-all{padding-top:12px;border-top:1px solid #E1E6EF;font-size:13.5px;font-weight:600;color:var(--cobalt)}
.blog-subscription{max-width:1040px;margin:72px auto 0;padding:0 32px}
.blog-slidein{position:fixed;left:24px;top:50%;transform:translateY(-50%);width:min(300px,calc((100vw - 768px)/2));max-height:calc(100dvh - 48px);overflow-y:auto;padding:20px;border-radius:16px;background:#fff;box-shadow:0 24px 48px -16px rgba(11,19,36,.35),inset 0 0 0 1px var(--hair);z-index:20;animation:blog-slide-in .5s cubic-bezier(.2,.8,.2,1) both}
.blog-slidein[hidden],.blog-slidein [hidden]{display:none!important}
.blog-slidein-close{position:absolute;top:10px;right:10px;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:var(--cloud);color:var(--slate);font-size:20px;line-height:1;cursor:pointer}
.blog-slidein-label{font-size:11.5px;font-weight:700;color:var(--cobalt)}
.blog-slidein h2{font-size:16px;line-height:1.5;padding-right:16px;margin:8px 0}
.blog-slidein-caption{font-size:13px;color:var(--slate);margin:0 0 14px}
.blog-slidein .newsletter-form input[type=email]{height:42px;font-size:14px}
.blog-slidein .newsletter-form button[type=submit]{min-height:42px;height:42px;font-size:14px}
.blog-slidein .newsletter-domain-note{font-size:11px;margin:8px 0}
.blog-slidein .newsletter-consent{font-size:11px;line-height:1.6}
.blog-slidein .newsletter-consent-details{margin:12px 0;font-size:12px}
.blog-slidein .newsletter-consent-details summary{cursor:pointer;color:var(--ink2);font-weight:600}
.blog-slidein [data-subscribe-done]{font-size:14px;color:var(--ink2)}
.blog-slidein [data-subscribe-done] strong{color:var(--green)}
.blog-slidein [data-success-message]{margin:8px 0 0;font-size:13px}
[data-blog-content]:focus{outline:none}
@keyframes blog-slide-in{from{opacity:0;transform:translate(-40px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes blog-slide-in-mobile{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:1279px){.blog-slidein{top:auto;bottom:16px;left:16px;right:16px;width:auto;max-height:calc(100dvh - 32px);transform:none;animation-name:blog-slide-in-mobile}}
@media(max-width:1279px){.blog-rail{display:none}}
@media(max-width:900px){.blog-hero h1{font-size:34px}.blog-hero{padding-top:44px;padding-bottom:160px}.blog-cover{margin-top:-112px}.blog-cover img{height:auto;aspect-ratio:2/1}.blog-watermark{right:24px;font-size:90px}}
@media(max-width:560px){.blog-series-byline .blog-published{display:inline;margin-left:6px}.blog-series-byline .blog-reading::before{content:none}}
@media(max-width:560px){.blog-hero h1{font-size:30px;line-height:1.3}.blog-hero-inner,.blog-prose{padding-left:20px;padding-right:20px}.blog-hero{padding-bottom:120px}.blog-cover{padding:0 16px;margin-top:-78px}.blog-cover img{aspect-ratio:3/2}.blog-cover figcaption{font-size:10.5px;text-align:center}.blog-deck{font-size:16px}.blog-eyebrow{gap:8px}.blog-published{display:block;margin:2px 0 0}.blog-body-wrap{padding-top:32px}.blog-prose{font-size:15.5px}.blog-prose h2:not(#blog-toc-title){font-size:23px}.blog-toc{padding:18px}.blog-subscription{padding:0 16px;margin-top:56px}.blog-page>main>header .detail-container{padding:0 16px!important;gap:10px!important}.blog-page>main>header a[href="https://zi-en.io"]{display:none}.blog-page footer .detail-container{padding-left:20px!important;padding-right:20px!important}}