:root{--spacing-0:0px;--spacing-2:2px;--spacing-4:4px;--spacing-6:6px;--spacing-8:8px;--spacing-10:10px;--spacing-12:12px;--spacing-14:14px;--spacing-16:16px;--spacing-18:18px;--spacing-20:20px;--spacing-22:22px;--spacing-24:24px;--spacing-28:28px;--spacing-30:30px;--spacing-32:32px;--spacing-36:36px;--spacing-40:40px;--spacing-64:64px;--spacing-76:76px;--spacing-100:100px;--radius-0:0px;--radius-2:2px;--radius-4:4px;--radius-6:6px;--radius-8:8px;--radius-10:10px;--radius-12:12px;--radius-14:14px;--radius-16:16px;--radius-18:18px;--radius-20:20px;--radius-99:99px;--text-title:#434f5c;--text-body:#6b7e93;--primary:#2f7ef5;--surface-dark:#101010;--surface-body:#f8fafa;--surface-subtle:#f3f5f8;--surface-lightblue:#e8f1fe;--surface-lightgray:#bfc8d4;--surface-lightred:#fef2f2;--purple-400:#ede9fe;--purple-800:#7c3aed;--green-400:#f0fdfa;--green-800:#16a390;--blue-400:#e8f1fe;--blue-800:#2f7ef5;--orange-400:#fff7ed;--orange-800:#ea580c;--red-400:#fef2f2;--red-800:#dc2626;--red:#dc2626;--subject-figma-bg:#ede9fe;--subject-figma-text:#7c3aed;--subject-photoshop-bg:#e8f1fe;--subject-photoshop-text:#2f7ef5;--subject-illustrator-bg:#fff7ed;--subject-illustrator-text:#ea580c;--subject-html-bg:#f0fdfa;--subject-html-text:#16a390;--subject-html:#16a390;--subject-ai-bg:#fef2f2;--subject-ai-text:#dc2626;--border-base:#e2e7ed;--on-color-blue:#2f7ef5;--on-color-gray:#6b7e93;--on-color-lightblue:#e8f1fe}.blog-inner{display:flex;gap:64px;align-items:start;max-width:1440px;margin:0 auto;padding:195px var(--spacing-24) 360px}.blog-inner .lnb{width:280px;flex-shrink:0;padding:var(--spacing-32) var(--spacing-28);border-radius:var(--radius-20);background-color:var(--surface-body);box-shadow:4px 4px 2px rgba(47,126,245,.05),inset 3px 3px 0 #fff;display:flex;flex-direction:column;gap:var(--spacing-24)}.blog-inner .lnb .lnb-category{display:flex;flex-direction:column;gap:9px;width:224px}.blog-inner .lnb .lnb-category .lnb-subject{display:flex;gap:6px;align-items:center;font-size:16px;font-weight:500;color:var(--text-title);white-space:nowrap}.blog-inner .lnb .lnb-category .lnb-subject .lnb-count{font-weight:400;color:var(--text-body)}.blog-inner .lnb .lnb-category ul{display:flex;flex-direction:column;width:100%}.blog-inner .lnb .lnb-category ul .lnb-sub{display:flex;gap:7px;align-items:center;padding:var(--spacing-8);font-size:15px;font-weight:400;color:var(--text-body);width:100%;white-space:nowrap;border-radius:var(--radius-6)}.blog-inner .lnb .lnb-category ul .lnb-sub.is-active,.blog-inner .lnb .lnb-category ul .lnb-sub:hover{color:var(--primary);background-color:var(--surface-lightblue)}.blog-inner .lnb .lnb-category ul .lnb-sub .lnb-dash{opacity:.5}.blog-inner .lnb .lnb-category ul .lnb-sub .lnb-count{margin-left:auto;font-size:13px}.blog-inner .blog-list{flex:1 1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-20);padding-top:var(--spacing-24)}.blog-inner .blog-list .blog-total{font-size:15px;font-weight:500;color:var(--text-body)}.blog-inner .blog-list .blog-empty{font-size:16px;color:var(--text-body);padding:40px 0}.blog-inner .blog-list .post-card{display:flex;flex-direction:column;gap:10px;padding:var(--spacing-28) var(--spacing-30);border-radius:var(--radius-20);background-color:var(--surface-body);box-shadow:4px 4px 2px rgba(47,126,245,.05),inset 3px 3px 0 #fff;transition:transform .25s ease}.blog-inner .blog-list .post-card:hover{transform:translateY(-6px)}.blog-inner .blog-list .post-card__category{font-size:14px;font-weight:500;color:var(--primary)}.blog-inner .blog-list .post-card__title{font-size:22px;font-weight:500;color:var(--text-title);line-height:1.4}.blog-inner .blog-list .post-card__desc{font-size:15px;font-weight:400;color:var(--text-body);line-height:1.6}.blog-inner .blog-list .post-card__date{font-size:13px;color:var(--text-body);margin-top:4px}.blog-inner .blog-post{position:relative;flex:1 1;min-width:0;display:flex;flex-direction:column;padding-top:var(--spacing-64)}.blog-inner .blog-post .breadcrumb{position:absolute;right:0;top:0;display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-bottom:var(--spacing-20)}.blog-inner .blog-post .breadcrumb a,.blog-inner .blog-post .breadcrumb span{font-size:12px;font-weight:500;line-height:18px;color:var(--text-body);text-decoration:none}.blog-inner .blog-post .breadcrumb .breadcrumb-current{color:var(--primary)}.blog-inner .blog-post .breadcrumb .breadcrumb-arrow{display:block;width:15px;height:15px}.blog-inner .blog-post .title-area{display:flex;flex-direction:column;gap:var(--spacing-20)}.blog-inner .blog-post .title-area .back-btn{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--text-body);width:-moz-fit-content;width:fit-content}.blog-inner .blog-post .title-area .back-btn:hover{color:var(--primary)}.blog-inner .blog-post .title-area .title{display:flex;flex-direction:column;gap:12px}.blog-inner .blog-post .title-area .title .post-title{font-size:36px;font-weight:600;color:var(--text-title);line-height:1.3}.blog-inner .blog-post .title-area .title .writer-date{display:flex;gap:12px;align-items:center;font-size:15px}.blog-inner .blog-post .title-area .title .writer-date .writer{font-weight:500;color:var(--text-title)}.blog-inner .blog-post .title-area .title .writer-date .post-date{font-weight:400;color:var(--text-body)}.blog-inner .blog-post .sort-line{padding:var(--spacing-36) 0}.blog-inner .blog-post .sort-line hr{border:none;border-top:1px solid #d9d9d9}.blog-inner .blog-post .post-content{display:flex;flex-direction:column;gap:24px;color:var(--text-title)}.blog-inner .blog-post .post-content hr{border:none;border-top:1px solid var(--text-body);opacity:.3;margin:30px 0}.blog-inner .blog-post .post-content .content-h1{font-size:24px;font-weight:600;line-height:1.4}.blog-inner .blog-post .post-content .content-h2{font-size:22px;font-weight:600;line-height:1.4}.blog-inner .blog-post .post-content .content-h3{font-size:20px;font-weight:500;line-height:1.5}.blog-inner .blog-post .post-content .content-h4{font-size:18px;font-weight:500;line-height:1.5}.blog-inner .blog-post .post-content>p.content-md:first-of-type{font-size:18px;line-height:1.7}.blog-inner .blog-post .post-content .content-md{font-size:16px;font-weight:400;line-height:1.8;color:var(--text-title)}.blog-inner .blog-post .post-content .content-link{color:var(--primary);font-size:inherit;text-decoration:underline;text-underline-offset:3px}.blog-inner .blog-post .post-content .quote{border-left:3px solid var(--surface-darkgray,#2a2a2a);padding:var(--spacing-14) var(--spacing-30);display:flex;flex-direction:column;gap:var(--spacing-10);color:var(--text-title)}.blog-inner .blog-post .post-content .quote p{font-size:15px;font-weight:400;line-height:1.5}.blog-inner .blog-post .post-content .content-list{padding-left:20px;display:flex;flex-direction:column;gap:6px}.blog-inner .blog-post .post-content .content-list--ordered{list-style-type:decimal}.blog-inner .blog-post .post-content .content-li{font-size:16px;font-weight:400;color:var(--text-body);line-height:1.7;list-style-type:disc}.blog-inner .blog-post .post-content .content-inline-code{font-family:Menlo,Monaco,Consolas,monospace;font-size:inherit;background-color:var(--surface-subtle);color:var(--primary);padding:2px 6px;border-radius:4px}.blog-inner .blog-post .post-content .code-block{position:relative;background-color:var(--surface-dark);border-radius:var(--radius-12);padding:var(--spacing-22);overflow-x:auto;color:#fff}.blog-inner .blog-post .post-content .code-block code,.blog-inner .blog-post .post-content .code-block div{background:rgba(0,0,0,0)!important}.blog-inner .blog-post .post-content .code-block ::selection{background-color:rgba(47,126,245,.4)}.blog-inner .blog-post .post-content .code-block .code-copy-btn{position:absolute;top:12px;right:14px;padding:4px 10px;border-radius:var(--radius-6);border:1px solid hsla(0,0%,100%,.15);background:hsla(0,0%,100%,.08);color:hsla(0,0%,100%,.55);font-size:12px;font-family:inherit;cursor:pointer;transition:background .15s ease,color .15s ease}.blog-inner .blog-post .post-content .code-block .code-copy-btn:hover{background:hsla(0,0%,100%,.15);color:#fff}.blog-inner .blog-post .post-content .call-out{background-color:var(--surface-subtle);border-radius:var(--radius-12);padding:var(--spacing-22);display:flex;flex-direction:column;gap:var(--spacing-12);color:var(--text-title)}.blog-inner .blog-post .post-content .call-out__title{font-size:18px;font-weight:500;line-height:1.5}.blog-inner .blog-post .post-content .call-out__body{font-size:15px;font-weight:400;line-height:1.5}.blog-inner .blog-post .post-content .call-out--rich{flex-direction:row;align-items:center;gap:var(--spacing-20);padding:var(--spacing-20);background-color:var(--surface-body);box-shadow:4px 4px 2px rgba(47,126,245,.05),inset 3px 3px 0 #fff;transition:transform .3s ease}.blog-inner .blog-post .post-content .call-out--rich:hover{transform:translateY(-6px);color:var(--primary)}.blog-inner .blog-post .post-content .call-out--rich .call-out__thumb{width:140px;height:90px;object-fit:cover;border-radius:var(--radius-8);flex-shrink:0}.blog-inner .blog-post .post-content .call-out--rich .call-out__content{flex:1 1;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-16);min-width:0}.blog-inner .blog-post .post-content .call-out--rich .call-out__text{display:flex;flex-direction:column;gap:6px;min-width:0}.blog-inner .blog-post .post-content .call-out--rich .call-out__cta{flex-shrink:0;padding:9px 18px;background-color:var(--primary);color:#fff;border-radius:var(--radius-99);font-size:14px;font-weight:500;white-space:nowrap;transition:opacity .2s ease}.blog-inner .blog-post .post-content .call-out--rich .call-out__cta:hover{opacity:.85}.blog-inner .blog-post .post-content .content-figure{display:flex;flex-direction:column;align-items:start;gap:8px}.blog-inner .blog-post .post-content .content-figure img{max-width:1048px;height:auto;display:block;border-radius:var(--radius-8);background:var(--surface-body);box-shadow:4px 4px 2px rgba(47,126,245,.05),inset 3px 3px 0 #fff;transition:transform .3s ease}.blog-inner .blog-post .post-content .content-figure img:hover{transform:translateY(-6px)}.blog-inner .blog-post .post-content .content-figure .content-caption{font-size:13px;color:var(--text-body);text-align:center}.blog-inner .blog-post .post-content .youtube-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius-12)}.blog-inner .blog-post .post-content .youtube-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%}.blog-inner .blog-post .post-content .gist-embed{width:100%;border-radius:var(--radius-8);overflow:hidden}.blog-inner .blog-post .post-content .gist-embed iframe{width:100%;min-height:200px;border:none}