:root{--socar-blue:#0078ff;--socar-blue-01:#ebf5ff;--socar-blue-02:#d6ebff;--socar-blue-03:#a3d1ff;--socar-gray-01:#f2f3f8;--socar-gray-02:#e5e8ef;--socar-gray-04:#b8c0cc;--socar-gray-08:#4e5968;--socar-gray-10:#141a24;--white:#fff;--surface:#f7f9fc;--line:#141a241a;--shadow:0 20px 60px #141a241a;--radius:8px;--font-sans:"IBM Plex Sans KR", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--white);min-width:320px;color:var(--socar-gray-10);font-family:var(--font-sans);letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere;margin:0;line-height:1.65}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}img{max-width:100%}.site-header{z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffe6;border-bottom:1px solid #e5e8efcc;justify-content:space-between;align-items:center;gap:24px;width:100%;min-height:72px;padding:0 40px;display:flex;position:sticky;top:0}.site-brand{min-width:0;color:var(--socar-gray-10);align-items:center;gap:14px;font-weight:700;display:inline-flex}.site-brand img{width:92px;height:auto;display:block}.site-brand span{border-left:1px solid var(--socar-gray-02);white-space:nowrap;padding-left:14px}.site-nav{align-items:center;gap:8px;display:inline-flex}.site-nav a{min-height:40px;color:var(--socar-gray-08);border-radius:999px;align-items:center;padding:0 14px;font-size:15px;font-weight:600;display:inline-flex}.site-nav a:hover{background:var(--socar-gray-01);color:var(--socar-gray-10)}main{width:100%}.home-hero{grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);align-items:center;gap:64px;max-width:1180px;min-height:calc(100vh - 72px);margin:0 auto;padding:72px 40px 96px;display:grid}.hero-copy{max-width:560px}.eyebrow{color:var(--socar-blue);letter-spacing:0;margin:0 0 14px;font-size:14px;font-weight:700}.hero-copy h1{letter-spacing:0;margin:0;font-size:clamp(42px,7vw,86px);font-weight:700;line-height:1.08}.hero-copy p:not(.eyebrow){max-width:520px;color:var(--socar-gray-08);margin:28px 0 0;font-size:19px;line-height:1.75}.hero-link{background:var(--socar-blue);min-height:48px;color:var(--white);border-radius:999px;justify-content:center;align-items:center;margin-top:34px;padding:0 20px;font-size:15px;font-weight:700;display:inline-flex}.hero-link:hover{background:#006be4}.hero-feature{min-width:0}.posts-section,.related-section,.listing-page{max-width:1180px;margin:0 auto;padding:72px 40px 108px}.section-heading,.listing-heading{justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:32px;display:flex}.section-heading h2,.listing-heading h1{margin:0;font-size:36px;font-weight:700;line-height:1.2}.category-pills{flex-wrap:wrap;justify-content:flex-end;gap:10px;max-width:640px;display:flex}.category-pill,.article-tag{border:1px solid var(--socar-gray-02);background:var(--white);max-width:100%;min-height:40px;color:var(--socar-gray-08);cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:8px;padding:0 15px;font-size:14px;font-weight:700;display:inline-flex}.category-pill small{color:var(--socar-blue);font-size:12px;font-weight:700}.category-pill:hover,.category-pill.is-active,.article-tag:hover{border-color:var(--socar-blue-03);background:var(--socar-blue-01);color:var(--socar-gray-10)}.post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;display:grid}.load-more-row{justify-content:center;margin-top:42px;display:flex}.load-more-button{border:1px solid var(--socar-blue-03);background:var(--white);min-height:48px;color:var(--socar-gray-10);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:0 20px;font-size:15px;font-weight:700;display:inline-flex}.load-more-button:hover{background:var(--socar-blue-01)}.load-more-button span{color:var(--socar-gray-08);font-size:12px;font-weight:700}.post-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);min-width:0;transition:transform .18s,box-shadow .18s,border-color .18s;overflow:hidden}.post-card:hover{box-shadow:var(--shadow);border-color:#0078ff38;transform:translateY(-3px)}.post-card-featured{box-shadow:0 28px 80px #0078ff24}.post-card-cover{aspect-ratio:16/9;background:var(--socar-blue-01);display:block;position:relative;overflow:hidden}.post-cover-image,.post-cover-art{width:100%;height:100%;display:block}.post-cover-image{object-fit:cover}.post-cover-art{background:radial-gradient(circle at 78% 22%,#a3d1ffa6,#0000 28%),linear-gradient(145deg,#fff 0%,#f6f9ff 48%,#ebf5ff 100%);position:relative;overflow:hidden}.post-cover-art:before{content:"";background:#ffffffb8;border:1px solid #0078ff2e;border-radius:8px;position:absolute;inset:12%;box-shadow:0 18px 40px #141a2414}.cover-grid{grid-template-columns:repeat(2,38px);gap:8px;display:grid;position:absolute;inset:20% 14% auto auto}.cover-grid span{background:#ebf5ffe6;border:1px solid #0078ff2e;border-radius:6px;height:32px;display:block}.cover-device{background:#ffffffe6;border:1px solid #141a241f;border-radius:8px;width:42%;height:50%;position:absolute;bottom:16%;left:14%;box-shadow:0 16px 36px #141a241a}.cover-device span{background:var(--socar-gray-02);border-radius:999px;height:8px;margin:16px;display:block}.cover-device span:nth-child(2){background:var(--socar-blue-02);width:72%}.cover-device span:nth-child(3){width:48%}.cover-path{align-items:center;gap:8px;display:flex;position:absolute;bottom:18%;right:13%}.cover-path span{background:var(--socar-blue);border-radius:50%;width:12px;height:12px;box-shadow:0 0 0 8px #0078ff1a}.cover-path span:nth-child(2){background:var(--socar-blue-03);width:54px;height:2px;box-shadow:none;border-radius:999px}.cover-fe .cover-device{width:48%;height:42%}.cover-data .cover-grid{grid-template-columns:repeat(3,30px)}.cover-mobile .cover-device{border-radius:16px;width:30%;height:58%}.cover-qa .cover-grid span{background:var(--socar-gray-01)}.post-card-body{padding:24px}.post-meta,.article-meta{color:var(--socar-gray-08);flex-wrap:wrap;align-items:center;gap:9px;font-size:13px;font-weight:700;display:flex}.post-meta span:not(:last-child):after,.article-meta span:not(:last-child):after,.article-meta a:after{background:var(--socar-gray-04);vertical-align:middle;content:"";border-radius:50%;width:3px;height:3px;margin-left:9px;display:inline-block}.post-card h2{margin:12px 0 0;font-size:24px;font-weight:700;line-height:1.35}.post-card h2 a:hover{color:var(--socar-blue)}.post-card p{min-height:54px;color:var(--socar-gray-08);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:12px 0 0;font-size:15px;display:-webkit-box;overflow:hidden}.post-authors{flex-wrap:wrap;gap:6px;margin-top:20px;display:flex}.post-authors span{background:var(--socar-gray-01);min-height:28px;color:var(--socar-gray-08);border-radius:999px;align-items:center;padding:0 10px;font-size:13px;font-weight:700;display:inline-flex}.article-page{padding:0 40px 120px}.article-header{max-width:920px;margin:0 auto;padding:72px 0 42px}.article-header h1{text-wrap:balance;max-width:920px;margin:18px 0 0;font-size:clamp(34px,4.8vw,50px);font-weight:700;line-height:1.24}.article-header>p{max-width:760px;color:var(--socar-gray-08);margin:22px 0 0;font-size:20px;line-height:1.75}.article-tags{flex-wrap:wrap;gap:10px;max-width:760px;margin-top:24px;display:flex}.article-tag{background:var(--socar-gray-01);min-height:36px;color:var(--socar-gray-08);padding:0 14px;font-size:13px}.article-authors{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.article-author{color:var(--socar-gray-08);align-items:center;gap:9px;font-size:14px;font-weight:700;display:inline-flex}.article-author img{object-fit:cover;border-radius:50%;width:28px;height:28px}.article-cover{aspect-ratio:16/9;border-radius:8px;max-width:920px;margin:0 auto 58px;position:relative;overflow:hidden;box-shadow:0 28px 80px #141a241f}.article-shell{grid-template-columns:220px minmax(0,760px) 220px;align-items:start;column-gap:42px;max-width:1284px;margin:0 auto;display:grid}.article-content{color:#252b35;grid-column:2;min-width:0;max-width:760px;font-size:18px;line-height:1.92}.article-content>:first-child{margin-top:0}.article-content h1,.article-content h2,.article-content h3,.article-content h4{color:var(--socar-gray-10);letter-spacing:0;scroll-margin-top:96px;font-weight:700}.article-content h1{margin:64px 0 22px;font-size:34px;line-height:1.34}.article-content h2{margin:62px 0 18px;font-size:30px;line-height:1.36}.article-content h3{margin:44px 0 14px;font-size:24px;line-height:1.42}.article-content h4{margin:34px 0 12px;font-size:20px}.article-content p,.article-content ul,.article-content ol,.article-content blockquote,.article-content table,.article-content pre{margin:18px 0}.article-content a{color:inherit;text-underline-offset:4px;font-weight:600;-webkit-text-decoration:underline #0078ff52;text-decoration:underline #0078ff52;text-decoration-thickness:1.5px;transition:color .16s,text-decoration-color .16s}.article-content a:hover,.article-content a:focus-visible{color:var(--socar-blue);-webkit-text-decoration-color:var(--socar-blue);text-decoration-color:var(--socar-blue)}.article-content img,.markdown-image-frame{border-radius:8px;width:100%;max-width:100%;height:auto;margin:34px auto;display:block;overflow:hidden;box-shadow:0 16px 40px #141a241a}.markdown-image-frame img{width:100%;max-width:100%;height:auto;box-shadow:none;border-radius:0;margin:0;display:block}.article-image-pair{grid-template-columns:minmax(0,1fr) minmax(180px,.54fr);align-items:start;gap:22px;margin:34px 0;display:grid}.article-image-pair figure{text-align:center;min-width:0;margin:0}.article-image-pair .markdown-image-frame{width:100%;margin:0 auto 12px}.article-image-pair .article-image-pair-narrow .markdown-image-frame{max-width:300px}.article-image-pair .markdown-image-frame img{width:100%;height:auto}.article-image-pair figcaption{color:var(--socar-gray-06);font-size:14px;font-style:italic;line-height:1.55}.article-figure{text-align:center;margin:34px auto}.article-figure .markdown-image-frame{width:100%;margin:0 auto 12px}.article-figure .markdown-image-frame img{width:100%;height:auto}.article-figure--wide .markdown-image-frame{max-width:640px}.article-figure--medium .markdown-image-frame{max-width:520px}.article-figure--phone .markdown-image-frame{max-width:456px}.article-caption,.article-figure figcaption,.article-image-row figcaption{color:var(--socar-gray-06);font-size:14px;font-style:italic;line-height:1.55}.article-content .mermaid{border:1px solid var(--socar-gray-02);background:var(--socar-blue-01);text-align:center;border-radius:8px;margin:34px auto;padding:26px;line-height:1.45;overflow-x:auto}.article-content .mermaid svg{max-width:100%;height:auto}.article-image-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px;margin:34px 0;display:grid}.article-image-row--three{grid-template-columns:repeat(3,minmax(0,1fr))}.article-image-row--wide-left{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}.article-image-row figure,.article-image-row__item{text-align:center;min-width:0;margin:0}.article-image-row__label{color:var(--socar-gray-06);margin-bottom:8px;font-size:14px;font-weight:700;display:block}.article-image-row .markdown-image-frame{width:100%;margin:0}.article-image-row .markdown-image-frame img{width:100%;height:auto}.article-content blockquote{border-left:4px solid var(--socar-blue);background:var(--socar-blue-01);color:var(--socar-gray-08);border-radius:0 8px 8px 0;padding:20px 24px}.article-content code{background:var(--socar-gray-01);color:#005ec9;border-radius:5px;padding:2px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.9em}.article-content pre{color:#e5e7eb;background:#111827;border-radius:8px;padding:22px;overflow-x:auto;box-shadow:0 18px 44px #141a2424}.article-content pre code{min-width:max-content;color:inherit;background:0 0;padding:0;line-height:1.7;display:block}.article-content pre .hljs-keyword,.article-content pre .hljs-selector-tag,.article-content pre .hljs-title.function_{color:#93c5fd}.article-content pre .hljs-string,.article-content pre .hljs-attr,.article-content pre .hljs-symbol{color:#a7f3d0}.article-content pre .hljs-number,.article-content pre .hljs-literal{color:#fca5a5}.article-content pre .hljs-comment{color:#94a3b8}.article-content pre .hljs-title,.article-content pre .hljs-built_in,.article-content pre .hljs-type{color:#fde68a}.article-content pre .hljs-variable,.article-content pre .hljs-property,.article-content pre .hljs-params{color:#bfdbfe}.article-content table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}.article-content th,.article-content td{border:1px solid var(--socar-gray-02);text-align:left;vertical-align:top;padding:12px 14px}.article-content th{background:var(--socar-gray-01)}.article-toc{width:220px;color:var(--socar-gray-08);grid-area:1/3;font-size:13px;position:sticky;top:128px}.article-toc strong{color:var(--socar-gray-10);margin-bottom:12px;font-size:13px;display:block}.article-toc nav{gap:9px;display:grid}.article-toc.is-compact nav{gap:7px}.article-toc a{border-left:2px solid var(--socar-gray-02);border-radius:0 6px 6px 0;padding:2px 0 2px 12px;transition:background-color .16s,border-color .16s,color .16s;display:block}.article-toc a:hover,.article-toc a:focus-visible{border-color:var(--socar-blue);color:var(--socar-blue)}.article-toc a.is-active{border-color:var(--socar-blue);color:var(--socar-gray-10);background:linear-gradient(90deg,#0078ff14,#0078ff00);font-weight:700}.article-toc .toc-depth-3{padding-left:24px;font-size:12px}.related-section{max-width:760px;padding:84px 0 0}.related-section .section-heading{margin-bottom:18px;display:block}.related-section .section-heading h2{font-size:24px}.related-list{gap:10px;display:grid}.related-link{border-top:1px solid var(--socar-gray-02);grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:64px;padding:15px 0;display:grid}.related-link:last-child{border-bottom:1px solid var(--socar-gray-02)}.related-link span,.related-link small{color:var(--socar-gray-08);font-size:13px;font-weight:700}.related-link strong{min-width:0;color:var(--socar-gray-10);text-overflow:ellipsis;white-space:nowrap;font-size:17px;font-weight:700;line-height:1.45;overflow:hidden}.related-link:hover strong{color:var(--socar-blue)}.author-heading{align-items:center;gap:24px;max-width:820px;margin-bottom:44px;display:flex}.author-heading>img{object-fit:cover;border-radius:50%;flex:none;width:92px;height:92px}.author-heading h1{margin:0;font-size:42px;line-height:1.2}.author-heading p:not(.eyebrow){color:var(--socar-gray-08);margin:8px 0 0}.not-found-page{max-width:760px;margin:0 auto;padding:120px 40px}.not-found-page h1{margin:0;font-size:44px}.not-found-page p:not(.eyebrow){color:var(--socar-gray-08)}.site-footer{border-top:1px solid var(--socar-gray-02);color:var(--socar-gray-08);padding:32px 40px;font-size:13px;font-weight:600}.site-footer p{margin:0}@media (max-width:1320px){.article-shell{max-width:760px;display:block}.article-toc{display:none}}@media (max-width:900px){.site-header{padding:0 22px}.home-hero{grid-template-columns:1fr;min-height:0;padding:56px 22px 72px}.hero-copy h1{font-size:46px}.section-heading,.listing-heading{display:block}.category-pills{justify-content:flex-start;margin-top:22px}.posts-section,.related-section,.listing-page{padding:52px 22px 76px}.post-grid{grid-template-columns:1fr}.related-link{grid-template-columns:1fr;align-items:start;gap:4px}.related-link strong{white-space:normal}.article-page{padding:0 22px 82px}.article-header{padding-top:54px}.article-content{font-size:17px}.article-image-pair{grid-template-columns:1fr;gap:28px}.article-image-row,.article-image-row--three,.article-image-row--wide-left{grid-template-columns:1fr;gap:24px}}@media (max-width:560px){.site-header{min-height:64px}.site-brand{gap:10px}.site-brand img{width:78px}.site-brand span{padding-left:10px;font-size:14px}.site-nav{display:none}.hero-copy h1{font-size:38px}.hero-copy p:not(.eyebrow){font-size:17px}.category-pill{flex:auto;justify-content:center;min-width:min(150px,100%)}.article-tag{flex:0 auto;min-width:0}.post-card-body{padding:20px}.post-card h2{font-size:21px}.article-header h1{font-size:34px}.article-header>p{font-size:18px}.article-content h1{font-size:28px}.article-content h2{font-size:25px}.article-content h3{font-size:21px}.site-footer{padding:28px 22px}}