@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap";.project-meta{color:#888;gap:20px;margin-bottom:10px;font-size:12px;display:flex}.project-subtitle{letter-spacing:.08em;color:#888;margin:0 0 8px;font-size:12px;font-weight:700}.project-title{margin:0 0 15px;font-size:28px;font-weight:800}.project-info{border-top:1px solid #eee;border-bottom:1px solid #eee;flex-direction:column;gap:8px;margin:20px 0;padding:15px 0;display:flex}.project-info-item{gap:15px;font-size:13px;line-height:1.5;display:flex}.project-info-item .label{color:#888;flex-shrink:0;width:90px;font-weight:700}.project-title{align-items:center;gap:10px;height:32px;display:flex}.project-title h3{margin:0;line-height:1}.project-title-icon{object-fit:contain;width:100px;height:100px;display:block;position:relative;top:13px}*{box-sizing:border-box}html{scroll-behavior:smooth}html,body,#app{min-height:100%;margin:0;padding:0}body{color:#111;-webkit-font-smoothing:antialiased;background:#f4f3ef;font-family:Noto Sans KR,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}img{max-width:100%;display:block}.portfolio{width:100%;overflow:hidden}.container{width:min(100% - 96px,1440px);margin:0 auto}.site-header{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f4f3efe0;border-bottom:1px solid #d8d7d1;width:100%;position:fixed;top:0;left:0}.header-inner{justify-content:space-between;align-items:center;width:min(100% - 96px,1440px);height:76px;margin:0 auto;display:flex}.logo{letter-spacing:-.03em;font-family:IBM Plex Mono,monospace;font-size:18px;font-weight:600}.navigation{align-items:center;gap:30px;display:flex}.navigation a{color:#666660;letter-spacing:.04em;font-family:IBM Plex Mono,monospace;font-size:11px;transition:color .25s}.navigation a:hover{color:#111}.hero{border-bottom:1px solid #d4d3cd;min-height:100vh;padding-top:76px;position:relative}.hero-container{flex-direction:column;justify-content:center;min-height:calc(100vh - 76px);padding-top:70px;padding-bottom:44px;display:flex}.hero-top{margin-bottom:34px}.hero-status{letter-spacing:.08em;color:#555550;align-items:center;gap:9px;font-family:IBM Plex Mono,monospace;font-size:10px;font-weight:500;display:inline-flex}.status-dot{background:#111;border-radius:50%;width:7px;height:7px;animation:2s ease-in-out infinite statusPulse}@keyframes statusPulse{0%,to{opacity:1}50%{opacity:.25}}.hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);align-items:center;gap:100px;display:grid}.hero-content{min-width:0}.hero-name{margin:0;font-family:IBM Plex Mono,monospace;font-size:15px;font-weight:500}.hero-position{color:#77766f;margin:8px 0 0;font-family:IBM Plex Mono,monospace;font-size:12px}.hero-title-wrap{margin-top:42px}.hero-title-wrap h1{letter-spacing:-.065em;max-width:880px;margin:0;font-size:clamp(40px,4.8vw,60px);font-weight:500;line-height:1.08}.hero-title-wrap strong{font-weight:800}.hero-release-info{flex-direction:column;gap:8px;margin-top:42px;display:flex}.hero-release-row{align-items:center;gap:18px;display:flex}.release-date{color:#77766f;width:105px;font-family:IBM Plex Mono,monospace;font-size:10px}.release-title{font-size:13px;font-weight:500}.hero-actions{flex-wrap:wrap;gap:8px;margin-top:38px;display:flex}.hero-action{cursor:pointer;background:0 0;border:1px solid #c9c8c1;align-items:center;gap:20px;min-height:42px;padding:0 15px;font-family:IBM Plex Mono,monospace;font-size:10px;transition:background .25s,color .25s,border-color .25s,transform .25s;display:inline-flex}.hero-action:hover{color:#f4f3ef;background:#111;border-color:#111;transform:translateY(-2px)}.hero-action.primary{color:#f4f3ef;background:#111;border-color:#111}.hero-action.primary:hover{background:#333}.hero-documents{gap:24px;margin-top:24px;display:flex}.hero-document{color:#666660;border-bottom:1px solid #999890;align-items:center;gap:8px;padding-bottom:3px;font-family:IBM Plex Mono,monospace;font-size:10px;transition:color .2s,border-color .2s;display:inline-flex}.hero-document:hover{color:#111;border-color:#111}.hero-code{justify-self:end;width:100%;max-width:510px}.code-window{color:#eeeeea;background:#171717;border:1px solid #2b2b2b;transition:transform .4s,box-shadow .4s;position:relative;transform:rotate(.5deg);box-shadow:14px 14px #deddd6}.code-window:hover{transform:rotate(0)translateY(-4px);box-shadow:18px 18px #deddd6}.code-header{border-bottom:1px solid #303030;justify-content:space-between;align-items:center;height:46px;padding:0 17px;display:flex}.code-dots{gap:5px;display:flex}.code-dots span{background:#777;border-radius:50%;width:7px;height:7px}.code-header small{color:#858585;font-family:IBM Plex Mono,monospace;font-size:9px}.code-body{padding:28px}.code-body pre{white-space:pre-wrap;margin:0;font-family:IBM Plex Mono,monospace;font-size:14px;line-height:1.8;overflow:auto}.code-keyword{color:#c8c8c8}.code-class{color:#fff;font-weight:600}.code-comment{color:#707070;margin:0;padding:0 28px 25px;font-family:IBM Plex Mono,monospace;font-size:10px}.hero-bottom{border-top:1px solid #d1d0c9;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:68px;padding-top:20px;display:grid}.hero-bottom-item{flex-direction:column;gap:8px;display:flex}.hero-bottom-item span{color:#8a8982;letter-spacing:.08em;font-family:IBM Plex Mono,monospace;font-size:9px}.hero-bottom-item strong{color:#333330;font-size:11px;font-weight:500}.hero-scroll{color:#999890;letter-spacing:.08em;align-items:center;gap:10px;margin-top:28px;font-family:IBM Plex Mono,monospace;font-size:9px;display:flex}.scroll-arrow{animation:1.8s ease-in-out infinite scrollMove}@keyframes scrollMove{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}.reveal{opacity:0;transition:opacity .8s,transform .8s cubic-bezier(.22,1,.36,1);transform:translateY(24px)}.reveal.is-visible{opacity:1;transform:translateY(0)}.hero-delay-1{transition-delay:50ms}.hero-delay-2{transition-delay:.12s}.hero-delay-3{transition-delay:.18s}.hero-delay-4{transition-delay:.25s}.hero-delay-5{transition-delay:.32s}.hero-delay-6{transition-delay:.39s}.hero-delay-7{transition-delay:.46s}.section{border-bottom:1px solid #d4d3cd;padding:150px 0}.section-top{align-items:center;gap:18px;margin-bottom:70px;display:flex}.section-index{color:#88877f;font-family:IBM Plex Mono,monospace;font-size:10px}.section-label{text-transform:uppercase;letter-spacing:.08em;font-family:IBM Plex Mono,monospace;font-size:10px}.about-section{background:#f4f3ef;position:relative}.about-layout{grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);align-items:start;gap:120px;display:grid}.about-left{position:sticky;top:120px}.about-profile{width:100%}.profile-image{aspect-ratio:4/5;background:#deddd6;border:1px solid #d0cfc8;width:100%;position:relative;overflow:hidden}.profile-image:before{content:"";z-index:2;pointer-events:none;border:1px solid #1111111f;position:absolute;inset:18px}.profile-image-inner{object-fit:cover;object-position:center;width:85%;height:85%;transition:transform .8s cubic-bezier(.22,1,.36,1);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.profile-image:hover .profile-image-inner{transform:translate(-50%,-50%)scale(1.04)}.profile-meta{color:#77766f;align-items:center;gap:8px;margin-top:14px;font-family:IBM Plex Mono,monospace;font-size:9px;display:flex}.profile-line{background:#999890;width:22px;height:1px}.about-content{min-width:0}.about-number{color:#88877f;letter-spacing:.04em;font-family:IBM Plex Mono,monospace;font-size:10px;display:block}.about-title h2{letter-spacing:-.065em;max-width:850px;margin:22px 0 52px;font-size:clamp(43px,5vw,40px);font-weight:500;line-height:1.08}.about-title em{font-style:normal;font-weight:800}.about-title .highlight-blue{color:#2563eb;font-weight:800}.about-copy{border-top:1px solid #d0cfc8;max-width:700px;padding-top:30px}.about-copy p{color:#66655f;margin:0 0 22px;font-size:14px;line-height:1.9}.about-copy .about-lead{color:#222220;letter-spacing:-.025em;margin-bottom:32px;font-size:18px;font-weight:500;line-height:1.75}.about-keywords{flex-wrap:wrap;gap:7px;margin-top:48px;display:flex}.about-keywords span{color:#77766f;border:1px solid #cecdc6;padding:9px 12px;font-family:Pretendard,Noto Sans KR,sans-serif;font-size:12px;font-weight:600;transition:background .25s,color .25s,border-color .25s}.about-keywords span:hover{color:#f4f3ef;background:#111;border-color:#111}.about-stats{border-top:1px solid #d1d0c9;grid-template-columns:repeat(4,1fr);margin-top:110px;padding-top:30px;display:grid}.about-stat{border-right:1px solid #d1d0c9;flex-direction:column;justify-content:space-between;min-height:100px;padding-right:25px;display:flex}.about-stat:last-child{border-right:none}.stat-number{letter-spacing:-.07em;font-family:IBM Plex Mono,monospace;font-size:clamp(34px,3.5vw,52px);line-height:1}.stat-label{color:#88877f;letter-spacing:.07em;margin-top:18px;font-family:IBM Plex Mono,monospace;font-size:8px}.skills-section{background:#f4f3ef;position:relative}.skills-heading{position:relative}.skills-heading h2{letter-spacing:-.075em;margin:0;font-size:clamp(52px,7vw,70px);font-weight:500;line-height:.95}.skills-heading h2 strong{font-weight:800}.skills-heading p{color:#77766f;max-width:540px;margin:32px 0 0;font-family:IBM Plex Mono,monospace;font-size:10px;line-height:1.8}.skills-grid{border-top:1px solid #cfcfc8;border-left:1px solid #cfcfc8;grid-template-columns:repeat(3,1fr);margin-top:90px;display:grid}.skill-card{background:#f4f3ef;border-bottom:1px solid #cfcfc8;border-right:1px solid #cfcfc8;min-height:270px;padding:30px;transition:background .35s,transform .35s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}.skill-card:before{content:attr(data-number);color:#aaa9a2;font-family:IBM Plex Mono,monospace;font-size:9px;transition:color .3s;position:absolute;top:30px;right:30px}.skill-card:hover{background:#e9e8e2;transform:translateY(-5px)}.skill-card:hover:before{color:#111}.skill-card>span{color:#77766f;letter-spacing:.08em;text-transform:uppercase;font-family:IBM Plex Mono,monospace;font-size:9px;display:block}.skill-card h3{letter-spacing:-.04em;margin:35px 0 0;font-family:IBM Plex Mono,monospace;font-size:clamp(19px,2vw,27px);font-weight:500;line-height:1.2}.skill-card p{color:#77766f;max-width:280px;margin:22px 0 0;font-size:12px;line-height:1.8}.skill-card .technology-list{flex-wrap:wrap;gap:6px;margin:0;display:flex;position:absolute;bottom:28px;left:30px;right:30px}.skill-card .technology-list span{color:#66655f;background:0 0;border:1px solid #c9c8c1;padding:6px 8px;font-family:IBM Plex Mono,monospace;font-size:8px;transition:background .25s,color .25s,border-color .25s}.skill-card:hover .technology-list span{border-color:#aaa9a2}.skills-footer{border-top:1px solid #d1d0c9;justify-content:space-between;align-items:center;margin-top:35px;padding-top:20px;display:flex}.skills-footer span,.skills-footer strong{font-family:IBM Plex Mono,monospace;font-size:9px}.skills-footer span{color:#999890}.skills-footer strong{color:#55544e;font-weight:500}.experience-section{background:#f4f3ef}.experience-heading{margin-bottom:90px}.experience-heading h2{letter-spacing:-.075em;margin:0;font-size:clamp(52px,7vw,70px);font-weight:500;line-height:.95}.experience-heading p{color:#77766f;margin-top:24px;font-size:14px}.experience-list{border-top:1px solid #cfcfc8}.experience-item{border-bottom:1px solid #cfcfc8;grid-template-columns:.7fr 1.3fr;gap:80px;padding:55px 0;display:grid}.experience-company>span{color:#88877f;font-family:IBM Plex Mono,monospace;font-size:9px}.experience-company h3{letter-spacing:-.04em;margin:18px 0 6px;font-size:27px}.experience-company p{color:#77766f;margin:0;font-size:12px}.experience-detail>p{margin:0 0 25px;font-size:15px;line-height:1.8}.experience-detail ul{margin:0;padding-left:18px}.experience-detail li{color:#5c5b55;margin-bottom:10px;font-size:13px;line-height:1.7}.technology-list{flex-wrap:wrap;gap:7px;display:flex}.technology-list span{color:#77766f;border:1px solid #cfcec7;padding:6px 9px;font-family:IBM Plex Mono,monospace;font-size:8px}.projects-section{background:#f4f3ef}.projects-heading{margin-bottom:80px}.projects-heading h2{letter-spacing:-.075em;margin:0;font-size:clamp(52px,7vw,70px);font-weight:500;line-height:.95}.projects-heading p{color:#77766f;margin-top:24px;font-size:14px}.project-card{border-top:1px solid #cfcec7;grid-template-columns:120px 1fr;gap:50px;padding:60px 0;display:grid}.project-card:last-child{border-bottom:1px solid #cfcec7}.project-number{color:#88877f;font-family:IBM Plex Mono,monospace;font-size:12px}.project-content{max-width:900px}.project-type{color:#88877f;font-family:IBM Plex Mono,monospace;font-size:9px}.project-content h3{letter-spacing:-.06em;margin:18px 0 5px;font-size:clamp(34px,4vw,60px);line-height:1.05}.project-subtitle{color:#77766f;margin:0;font-family:IBM Plex Mono,monospace;font-size:10px}.project-description{color:#55544e;max-width:720px;margin-top:38px;font-size:15px;line-height:1.9}.project-content .technology-list{flex-wrap:wrap;gap:7px;margin-top:30px;display:flex;position:static}.project-content .technology-list span{color:#77766f;border:1px solid #cfcec7;padding:6px 9px;font-family:IBM Plex Mono,monospace;font-size:8px}.project-details{grid-template-columns:repeat(3,1fr);gap:30px;margin-top:45px;display:grid}.project-details span{color:#88877f;font-family:IBM Plex Mono,monospace;font-size:9px}.project-details p{color:#66655f;margin-top:12px;font-size:12px;line-height:1.7}.writing-section{background:#f4f3ef}.writing-heading{margin-bottom:75px}.writing-heading h2{letter-spacing:-.075em;margin:0;font-size:clamp(52px,7vw,70px);font-weight:500;line-height:.95}.writing-heading p{color:#77766f;margin-top:24px;font-size:14px}.writing-list{border-top:1px solid #cfcec7}.writing-item{border-bottom:1px solid #cfcec7;grid-template-columns:180px 1fr 50px;align-items:center;gap:30px;padding:34px 0;transition:padding .3s;display:grid}.writing-item:hover{padding-left:15px}.writing-meta{color:#88877f;flex-direction:column;gap:8px;font-family:IBM Plex Mono,monospace;font-size:9px;display:flex}.writing-content h3{letter-spacing:-.03em;margin:0;font-size:20px;font-weight:600}.writing-content p{color:#77766f;margin:10px 0 0;font-size:12px}.writing-arrow{text-align:right;font-size:22px}.contact-section{color:#f2f1eb;background:#111;padding:170px 0}.contact-header{gap:18px;display:flex}.contact-label{letter-spacing:.08em;font-family:IBM Plex Mono,monospace;font-size:10px}.contact-content{max-width:1000px;margin-top:120px}.contact-eyebrow{color:#777;letter-spacing:.1em;font-family:IBM Plex Mono,monospace;font-size:10px}.contact-content h2{letter-spacing:-.065em;margin:30px 0;font-size:clamp(48px,6vw,70px);font-weight:500;line-height:1.05}.contact-description{color:#929292;max-width:620px;font-size:14px;line-height:1.8}.contact-links{border-top:1px solid #333;margin-top:80px}.contact-link{border-bottom:1px solid #333;grid-template-columns:120px 1fr 30px;align-items:center;min-height:90px;transition:padding .3s;display:grid}.contact-link:hover{padding-left:12px}.contact-link-label{color:#666;font-family:IBM Plex Mono,monospace;font-size:9px}.contact-link-value{font-family:IBM Plex Mono,monospace;font-size:14px}.contact-link-arrow{text-align:right}.footer{color:#777;background:#111}.footer-inner{border-top:1px solid #292929;grid-template-columns:1fr 1fr 1fr;align-items:center;min-height:90px;display:grid}.footer-left{flex-direction:column;gap:4px;display:flex}.footer-logo{color:#eee;font-family:IBM Plex Mono,monospace;font-size:13px}.footer-copy{font-family:IBM Plex Mono,monospace;font-size:8px}.footer-center{text-align:center;font-family:IBM Plex Mono,monospace;font-size:8px}.footer-right{text-align:right}.footer-right a{font-family:IBM Plex Mono,monospace;font-size:9px;transition:color .2s}.footer-right a:hover{color:#eee}@media (width<=1100px){.container,.header-inner{width:calc(100% - 60px)}.hero-grid{gap:55px}.about-layout{gap:70px}}@media (width<=900px){.skills-grid{grid-template-columns:repeat(2,1fr)}.skill-card{min-height:250px}}@media (width<=800px){.container,.header-inner{width:calc(100% - 40px)}.navigation{display:none}.hero-grid{grid-template-columns:1fr;gap:70px}.hero-code{justify-self:start;max-width:100%}.hero-bottom{grid-template-columns:1fr;gap:20px}.about-layout{grid-template-columns:1fr;gap:60px}.about-left{position:static}.about-stats{grid-template-columns:repeat(2,1fr);row-gap:35px}.about-stat{border-right:none}.experience-item{grid-template-columns:1fr;gap:30px}.project-card{grid-template-columns:1fr;gap:20px}.project-details{grid-template-columns:1fr}.writing-item{grid-template-columns:80px 1fr 30px;gap:15px}.footer-inner{text-align:left;grid-template-columns:1fr;gap:20px;padding:25px 0}.footer-center,.footer-right{text-align:left}}@media (width<=600px){.skills-heading h2{font-size:48px}.skills-heading p{font-size:9px}.skills-grid{grid-template-columns:1fr;margin-top:60px}.skill-card{min-height:240px;padding:25px}.skill-card:before{top:25px;right:25px}.skill-card h3{margin-top:30px;font-size:21px}.skill-card .technology-list{bottom:23px;left:25px;right:25px}.skills-footer{flex-direction:column;align-items:flex-start;gap:8px}}@media (width<=520px){.container,.header-inner{width:calc(100% - 28px)}.hero-title-wrap{margin-top:32px}.hero-title-wrap h1{font-size:39px;line-height:1.12}.hero-release-row{flex-direction:column;align-items:flex-start;gap:4px}.hero-actions{flex-direction:column;align-items:stretch}.hero-action{justify-content:space-between}.hero-documents{flex-direction:column;align-items:flex-start;gap:13px}.code-body{padding:20px 18px}.code-body pre{font-size:11px}.code-comment{padding:0 18px 20px}.section{padding:100px 0}.section-top{margin-bottom:50px}.about-title h2{font-size:42px}.about-copy .about-lead{font-size:17px}.about-stats{grid-template-columns:repeat(2,1fr);gap:30px 15px}.stat-number{font-size:34px}.skills-heading h2,.experience-heading h2,.projects-heading h2,.writing-heading h2{font-size:45px}.project-content h3{font-size:38px}.writing-item{grid-template-columns:1fr 25px}.writing-meta{flex-direction:row;grid-column:1/-1}.writing-content p{display:none}.contact-section{padding:110px 0}.contact-content{margin-top:80px}.contact-content h2{font-size:45px}.contact-link{grid-template-columns:80px 1fr 20px}.contact-link-value{font-size:11px}.project-github-arrow{vertical-align:middle;align-items:center;gap:6px;margin-left:15px;text-decoration:none;display:inline-flex}.project-github-arrow span{color:#66655f;background:0 0;border:1px solid #c9c8c1;padding:5px 9px;font-family:IBM Plex Mono,monospace;font-weight:500;transition:color .25s,background .25s,border-color .25s;display:inline-block;font-size:10px!important}.project-github-arrow:hover span{color:#fff;background:#111;border-color:#111}}