@font-face{font-family:AstaSansBold;src:url(/font/AstaSans-Bold.ttf);font-style:normal;font-display:swap}@font-face{font-family:AstaSansMedium;src:url(/font/AstaSans-Medium.ttf);font-style:normal;font-display:swap}@font-face{font-family:Cafe24ProSlim;src:url(/font/Cafe24PROSlimMax.otf);font-style:normal;font-display:swap}@font-face{font-family:Cafe24ProUp;src:url(/font/Cafe24PROUP.otf);font-style:normal;font-display:swap}@font-face{font-family:DreamHeumul;src:url(/font/DreamHeumulKR.ttf);font-style:normal;font-display:swap}@font-face{font-family:HSYeoleum2;src:url("/font/HSYeoleum2.0(2023).ttf");font-style:normal;font-display:swap}@font-face{font-family:KkakdugiDrafitingBold;src:url(/font/KkakdugiDrafting-Bold.ttf);font-style:normal;font-display:swap}@font-face{font-family:NeurimboGothic;src:url(/font/neurimboGothicRegular.otf);font-style:normal;font-display:swap}@font-face{font-family:SeoulCyber;src:url(/font/서울사이버대학UL.ttf);font-style:normal;font-display:swap}.font-yeoleum{font-family:HSYeoleum2,Apple SD Gothic Neo,sans-serif}.font-kkakdugi{font-family:KkakdugiDrafitingBold,Apple SD Gothic Neo,sans-serif}.font-neurimbo{font-family:NeurimboGothic,Apple SD Gothic Neo,sans-serif}.font-cyber{font-family:SeoulCyber,Noto Sans KR,sans-serif}:root{font-family:AstaSansBold,Noto Sans KR,Apple SD Gothic Neo,sans-serif;color:#111;background:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink: #111;--muted: #a5a5a5;--line: #e5e5e5;--paper: #fff;--panel: #f1f0f2;--gutter: clamp(20px, 5vw, 100px);--header-height: 78px;--ease: cubic-bezier(.22, .74, .18, 1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;padding:0;min-width:320px;max-width:2040px;overflow-x:hidden}button,a{color:inherit;font:inherit}a{text-decoration:none}button{-webkit-tap-highlight-color:transparent}img{max-width:100%;height:auto;display:block}::selection{background:#111;color:#fff}.scroll-meter{position:fixed;z-index:30;inset:0 0 auto;height:2px;pointer-events:none}.scroll-meter span{display:block;height:100%;background:#111;transform:scaleX(0);transform-origin:0 50%}.site-header{position:fixed;z-index:20;inset:0 0 auto;height:var(--header-height);padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;background:#ffffffe0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.brand-mark{display:flex;align-items:center;width:36px;height:38px}.brand-mark img{width:100%;height:auto}.site-nav{display:flex;align-items:center;gap:clamp(18px,3vw,50px);text-transform:lowercase;font-size:clamp(13px,1.1vw,16px);font-weight:500}.site-nav a{position:relative;padding:8px 0}.site-nav a:after{position:absolute;content:"";inset:auto 0 2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .28s var(--ease)}.site-nav a:hover:after,.site-nav a:focus-visible:after{transform:scaleX(1);transform-origin:0 50%}.hero{position:relative;min-height:650px;height:100svh;max-height:1200px;overflow:hidden;isolation:isolate;background:var(--paper)}.hero-grid{position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;opacity:.65;background-image:linear-gradient(to right,transparent calc(8vw - .5px),var(--line) 8vw,transparent calc(8vw + .5px)),linear-gradient(to bottom,transparent 38%,var(--line) calc(38% + 1px),transparent calc(38% + 2px));pointer-events:none}.hero-eyebrow{position:absolute;z-index:2;left:var(--gutter);top:22%;margin:0;display:flex;align-items:center;gap:12px;font-size:clamp(12px,1.2vw,16px);font-weight:600;letter-spacing:-.015em}.arrow-trail{color:#d5d5d5;letter-spacing:-4px;font-size:14px;white-space:nowrap}.hero-title{position:absolute;z-index:2;left:var(--gutter);top:28%;margin:0;display:grid;gap:.05em;font-family:Cafe24ProSlim,Apple SD Gothic Neo,sans-serif;font-size:clamp(32px,5.2vw,68px);font-weight:900;letter-spacing:-.06em;line-height:1.1}.hero-title span{white-space:nowrap}.hero-art{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}.hero-workspace{position:absolute;z-index:1;width:min(50vw,680px);right:var(--gutter);bottom:0;top:8em;height:auto;object-fit:contain}.float-icon{position:absolute;z-index:2;width:clamp(48px,7vw,120px);height:auto;object-fit:contain;filter:drop-shadow(0 14px 12px rgba(20,20,20,.08));animation:floaty 5.8s ease-in-out infinite}.float-icon--ai{width:clamp(60px,8vw,120px);left:65%;top:35%;animation-delay:-1.8s}.float-icon--js{width:clamp(50px,7vw,100px);left:78%;top:15%;animation-delay:-.6s;rotate:15deg}.float-icon--figma{left:82%;top:38%;width:clamp(140px,15vw,240px);rotate:-25deg;animation-delay:-3.1s}@keyframes floaty{0%,to{transform:translateZ(0) rotate(-3deg)}50%{transform:translate3d(0,-12px,0) rotate(3deg)}}.scroll-cue{position:absolute;z-index:3;left:var(--gutter);bottom:25px;display:flex;align-items:center;gap:12px;color:#777;font-size:9px;font-weight:600;letter-spacing:.12em}.scroll-cue__line{height:1px;width:44px;background:#aaa}.hero-index{position:absolute;right:var(--gutter);bottom:25px;z-index:3;color:#777;font-size:10px;letter-spacing:.08em}.about-story{position:relative;height:300svh;background:#fff}.story-stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;background:#fff}.story-topline{position:absolute;inset:calc(var(--header-height) + 10px) var(--gutter) auto;display:flex;justify-content:space-between;color:#888;font-size:10px;font-weight:700;letter-spacing:.12em}.story-name{position:absolute;z-index:2;left:var(--gutter);top:25%;display:flex;flex-direction:column;font-family:DreamHeumul,Apple SD Gothic Neo,sans-serif;font-size:clamp(36px,5vw,76px);font-weight:900;letter-spacing:-.08em;line-height:.88}.story-art{position:absolute;left:10%;top:29%;width:25%;height:38%;display:grid;place-items:center}.story-illustration{position:absolute;max-width:100%;max-height:100%;object-fit:contain;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .5s var(--ease),transform .7s var(--ease)}.story-illustration.is-active{opacity:1;transform:translateY(0) scale(1)}.story-copy-wrap{position:absolute;right:var(--gutter);left:auto;top:33%;width:clamp(380px,42vw,680px);display:flex;flex-direction:column;align-items:flex-end;text-align:right}.story-kicker{margin:0 0 14px;color:#929292;font-size:13px;font-weight:700;letter-spacing:.16em;text-align:right}.story-line{margin:0 0 .25em;font-size:clamp(22px,2.7vw,45px)!important;line-height:1.2!important;font-weight:700;letter-spacing:-.05em;word-break:keep-all;text-align:right}.story-line strong{font-weight:900}.story-pagination{margin-top:20px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.story-pagination>span{display:block;width:14px;height:1px;background:#ddd}.story-dot{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;padding:4px;color:#bbb;background:transparent;font-size:11px;cursor:pointer;transition:color .2s,transform .2s}.story-dot.is-active{color:#111;font-weight:800}.credentials{position:absolute;left:var(--gutter);right:var(--gutter);bottom:5%;display:grid;grid-template-columns:repeat(2,1fr);gap:3vw;padding-top:12px;border-top:1px solid var(--line);background:#fff;z-index:5}.credential-group{display:flex;gap:25px;align-items:flex-start}.credential-group h2{margin:0;font-size:clamp(13px,1.1vw,15px);font-weight:800}.credential-items{display:flex;gap:16px;flex-wrap:wrap}.credential-group p{margin:0 0 5px;font-size:clamp(12px,1vw,15px);font-weight:500}.credential-group time{display:block;color:#b5b5b5;font-size:clamp(11px,.9vw,13px)}.credential-divider{width:1px;height:20px;background:#e1e1e1}.story-index{position:absolute;right:var(--gutter);bottom:1.5%;color:#aaa;font-size:9px}.story-scroll-space{height:200svh}.projects{position:relative;min-height:100svh;padding:calc(var(--header-height) + 30px) var(--gutter) 8vh;background-color:#fff;background-image:url(/images/my-projects.png);background-position:center 10%;background-size:min(80%,1000px) auto}#title{color:#383838;font-size:20px;font-weight:700;letter-spacing:.1em;margin-bottom:3em}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(20px,3vh,36px)}.section-kicker{margin:0 0 6px;color:#888;font-size:10px;font-weight:700;letter-spacing:.12em}.section-heading h2{margin:0;font-size:clamp(28px,4vw,54px);font-weight:800;letter-spacing:-.06em}.section-index{color:#999;font-size:10px}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(5em,3vw,10em);max-width:1600px;margin:0 auto}.project-card{display:block;padding:0;border:0;background:transparent;text-align:left;cursor:pointer;width:100%}.project-visual{position:relative;width:100%;aspect-ratio:1 / .85;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:16px;background:#f1f0f2d9}.browser-frame{position:relative;width:78%;max-height:78%;background:#fff;border:3px solid #171717;border-bottom-width:6px;border-radius:6px;box-shadow:0 12px 24px #0000001a;transition:transform .45s var(--ease)}.browser-frame img{width:100%;height:auto;display:block}.project-visual--connect .browser-frame{width:82%}.project-card:hover .browser-frame{transform:translateY(-4px) scale(1.015)}.phone-frame{position:absolute;top:12%;height:75%;aspect-ratio:.51;border:2px solid #111;border-radius:14px;background:#111;box-shadow:0 10px 20px #0000001a;transition:transform .45s var(--ease)}.phone-frame img{width:100%;height:100%;object-fit:cover;border-radius:10px}.phone-frame--one{left:32%;transform:rotate(-6deg)}.phone-frame--two{left:50%;transform:rotate(6deg)}.slide-window{position:relative;background:#fff;box-shadow:0 12px 24px #0000001f}.editor-window{position:absolute;width:38%;right:8%;bottom:10%;border:3px solid #161719;border-radius:6px;box-shadow:0 12px 22px #00000026}.project-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-top:10px}.project-caption strong{display:block;font-size:clamp(16px,1.4vw,22px);font-weight:800;margin-top:1rem}.project-caption small{display:block;font-size:clamp(14px,1vw,16px);color:#666;margin-top:.5em}.contact{position:relative;min-height:80svh;padding:calc(var(--header-height) + 30px) var(--gutter) 40px;display:flex;flex-direction:column;background:#fff;overflow:hidden;isolation:isolate}.contact:before{content:"";position:absolute;top:0;right:15%;width:100%;height:100%;z-index:-1;background-image:url(/images/contact-hand.png);background-repeat:no-repeat;background-position:center right;background-size:contain;filter:blur(30px);opacity:.65;pointer-events:none}.contact-subhead{margin:0 0 6px;font-size:clamp(14px,1.2vw,18px);font-weight:700}.contact-heading h2{margin:0;font-size:clamp(32px,5.5vw,76px);font-weight:800;letter-spacing:-.05em;word-break:break-all}.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:4vw;margin-top:clamp(10px,6vh,40px);align-items:start}.contact-note{margin:0 0 8px;font-size:clamp(16px,1.3vw,20px);color:#666;line-height:1.4}.contact-questions{position:relative;display:flex;flex-direction:column;gap:16px;width:100%;max-width:600px;margin-left:auto}.contact-questions p{position:relative;margin:0;padding:16px 24px;width:fit-content;max-width:320px;background:#ffffff73;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8);border-radius:20px;box-shadow:0 6px 20px #0000000d;font-size:clamp(15px,1.1vw,18px);font-weight:600;line-height:1.4;letter-spacing:-.03em}.contact-questions p:nth-child(1){align-self:flex-start;margin-left:0!important;border-bottom-left-radius:4px}.contact-questions p:nth-child(2){align-self:flex-end;margin-right:0!important;border-bottom-right-radius:4px;background:#ffffff4d}.contact-cta{display:inline-flex;align-items:center;justify-content:center;gap:16px;margin-top:10px;padding:10px 0;font-size:clamp(15px,1.1vw,18px);font-weight:700;border:none;background-color:transparent;cursor:pointer;transition:all .5s ease;margin-bottom:5em}.contact-cta:hover{color:#777;padding-left:1em}.contact-bottom{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line);font-size:clamp(10px,1.1vw,14px);font-weight:700;color:#888}.contact-index{position:absolute;right:var(--gutter);top:calc(var(--header-height) + 30px);color:#999;font-size:10px}.contact-modal{border:none;border-radius:16px;padding:0;max-width:440px;width:90%;box-shadow:0 20px 40px #00000026;background-color:#fff;overflow:hidden}.contact-modal::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{position:relative;padding:32px 28px}.modal-content h2{margin:0 0 24px;font-size:1.25rem;font-weight:700;color:#111}.close-btn{position:absolute;top:20px;right:20px;background:none;border:none;font-size:20px;color:#888;cursor:pointer;padding:4px;line-height:1}.close-btn:hover{color:#111}.contact-form{display:flex;flex-direction:column;gap:16px}.contact-cta--mail{margin-top:8px;width:100%;padding:14px;background-color:#111;color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:color .1s}.contact-cta--mail:hover{background-color:#fff;color:#111}.contact-form label{font-size:.875rem;font-weight:600;color:#333;margin-bottom:-8px}.contact-form input[type=email],.contact-form textarea{width:100%;padding:12px 14px;border:1px solid #e1e1e1;border-radius:8px;font-size:.95rem;font-family:inherit;box-sizing:border-box;outline:none;transition:border-color .2s ease}.contact-form input[type=email]:focus,.contact-form textarea:focus{border-color:#222}.contact-form textarea{resize:vertical;min-height:120px}@media(max-width:1000px){.contact-questions p{max-width:100%}.contact-cta{margin-right:5em}}@media(max-width:900px){.hero-workspace{width:75vw;right:-5vw;top:63vw}.float-icon--ai{top:85vw;left:22em}.float-icon--js{top:65vw;left:35em}.float-icon--figma{top:65vw;left:38em;scale:90%}.story-name{top:18%;flex-direction:row;gap:.3em}.story-art{left:auto;right:5%;top:16%;width:30%;height:25%}.story-copy-wrap{left:var(--gutter);right:var(--gutter);top:42%}.credentials{grid-template-columns:1fr;gap:12px}.contact-content{grid-template-columns:1fr;gap:24px}.contact:before{width:80%;opacity:.4}.contact-questions p:nth-child(1){right:-15em}.contact-cta{margin-right:-10em;margin-bottom:5em}}@media(max-width:680px){.hero-title{top:24%;font-size:clamp(26px,7vw,42px)}.hero-workspace{width:95vw;right:-10vw}.project-grid{grid-template-columns:1fr}.project-visual{aspect-ratio:16 / 10}.contact-questions p:nth-child(1){right:0}.contact-questions p{max-width:100%}.contact-questions p:nth-child(2){align-self:flex-start}.contact-cta{margin-right:15em;margin-bottom:5em}}@media(max-width:500px){.hero-title{top:24%;font-size:clamp(26px,7vw,42px)}.hero-workspace{width:95vw;right:-5vw;top:73vw}.float-icon--ai{top:105vw;left:10em}.float-icon--js{top:85vw;left:15em}.float-icon--figma{top:75vw;left:18em;scale:90%}.story-copy-wrap{padding-right:3.5em}.contact-content{margin-top:1em}.contact-note{margin:0 0 8px;font-size:clamp(16px,1.3vw,20px);color:#666;line-height:1.4}.project-grid{grid-template-columns:1fr}.project-visual{aspect-ratio:16 / 10}.contact-questions p{max-width:100%}.contact-questions p:nth-child(2){align-self:flex-start}.contact-cta{margin-right:11em;margin-bottom:2.5em}}@media(max-width:400px){.hero-title{top:24%;font-size:clamp(26px,7vw,42px)}.hero-workspace{width:95vw;right:-5vw;top:85vw}.story-copy-wrap{padding-right:3.5em}.contact-content{margin-top:1em}.contact-note{margin:0 0 8px;font-size:clamp(14px,1.3vw,20px);color:#666;line-height:1.4}.project-grid{grid-template-columns:1fr}.project-visual{aspect-ratio:16 / 10}.contact-questions p{max-width:100%}.contact-questions p:nth-child(2){align-self:flex-start}.contact-cta{font-size:clamp(14px,1.3vw,20px);margin-right:3em;margin-bottom:4em}}