*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;color:#111;background:#fff;font-family:'Plus Jakarta Sans','Pretendard',Arial,sans-serif}p,h1,h2,h3,h4,dl,dd{margin:0}a{color:inherit;text-decoration:none}button,summary{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #08f;outline-offset:5px}::selection{background:#08f;color:#fff}.skip{position:fixed;top:-100px;left:20px;padding:14px;background:#08f;color:#fff;z-index:100}.skip:focus{top:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;transform:scaleX(0);transform-origin:left;background:#08f;z-index:80}.chevron{display:block;flex-shrink:0;width:.32em;height:.32em;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin-right:.15em;transition:translate .25s}
.hero{position:relative;aspect-ratio:16/9;overflow:hidden;--u:calc(100vw / 1920)}.masthead{position:absolute;top:3.125vw;left:3.125%;right:3.125%;display:flex;justify-content:space-between;font-size:clamp(18px,2.083vw,40px);font-weight:500;line-height:1}.hero h1,.hero>h2{position:absolute;left:3.125%;top:61.111%;font-size:18.75vw;line-height:1;font-weight:800;letter-spacing:-.025em;white-space:nowrap}.hero h1{animation:type-in 1s cubic-bezier(.2,.7,.2,1) both}.hero-menu,.section-menu{display:flex;flex-direction:column;width:17.5%;border-radius:1.25vw;box-shadow:0 .26vw .78vw #0004;overflow:hidden;z-index:2}.hero-menu{position:absolute;left:18.177%;top:29.815%;animation:menu-in .8s .15s both}.hero-menu a,.section-menu a{display:flex;align-items:center;justify-content:space-between;gap:.52vw;height:5vw;padding:0 2.083vw;font-size:1.667vw;background:#ffffffcc;backdrop-filter:blur(2px);font-weight:500;white-space:nowrap;transition:background .25s,color .25s}.hero-menu a:last-child,.section-menu a:last-child{height:4.583vw}.hero-menu a.selected,.section-menu a.selected{background:#08f;color:#fff;font-weight:600}.hero-menu a:hover,.section-menu a:hover{background:#111;color:white}.hero-menu a:hover .chevron,.section-menu a:hover .chevron,.project-index a:hover .chevron{translate:4px 0}.hero-cursor{position:absolute;left:34.375%;top:34.259%;width:4.1667%;height:auto;pointer-events:none;z-index:3;filter:drop-shadow(0 4px 4px #0003);animation:cursor-in 1.1s both}.hello{position:absolute;left:70.78%;top:53.89%;display:flex;align-items:center;gap:.625vw;padding:1.042vw;border-radius:.625vw;font-size:1.667vw;line-height:1.25vw;font-weight:700;box-shadow:0 .26vw .78vw #0002;background:white;white-space:nowrap;z-index:2;animation:hello-in 1s .4s both;transition:translate .3s}.hello:hover{translate:0 -5px}.hello i{height:1.04vw;width:1px;background:#aaa}.hello:after{content:'';position:absolute;left:1.8vw;top:100%;border-left:.63vw solid transparent;border-right:.63vw solid transparent;border-top:.9vw solid white;filter:drop-shadow(0 4px 3px #0001)}.hello .chevron{width:.38em;height:.38em;margin-left:.2em}
.about{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden;color:white}.about .section-menu{position:absolute;left:7.8125%;top:18.52%;color:#111}.about .section-menu a{background:#d2d2d2;border-bottom:1px solid #b5b5b5}.about .section-menu a.selected{background:#08f;color:#fff;border-color:#08f}.about .section-menu a:hover{background:#fff;color:#111}.profile-panel{position:absolute;left:27.34375%;right:7.8125%;top:18.5185%;min-height:57.24%;display:grid;grid-template-columns:30% 70%;border-radius:1.25vw;background:white;color:#111;overflow:hidden;z-index:1}.profile-person{padding:2.083vw;border-right:1px solid #ccc}.profile-person>img{display:block;width:100%;height:20.3vw;object-fit:cover;object-position:center 45%;border:1px solid #eee}.profile-person p{margin-top:1.5625vw;font:500 clamp(14px,.94vw,18px)/1.65 Pretendard,sans-serif;word-break:keep-all}.profile-details{padding:2.083vw;display:flex;flex-direction:column;justify-content:space-between;gap:2.1vw}.profile-details h3{text-transform:uppercase;font-size:1.5625vw;font-weight:800;margin-bottom:1.4vw;line-height:1}.profile-details dl{display:grid;grid-template-columns:auto 1fr;column-gap:2.6vw;row-gap:.6vw;font-size:clamp(14px,1.04vw,20px);line-height:1.3}.profile-details dd{font-family:Pretendard,sans-serif}.contact-list{grid-template-columns:9.7vw 1fr!important}.profile-details a:hover{color:#08f}.profile-columns{display:grid;grid-template-columns:1fr 1fr;gap:2vw}.profile-columns dl{column-gap:2vw}.tool-list>div{display:flex;justify-content:space-between;gap:1vw;font-size:clamp(14px,1.04vw,20px)}.about>h2{position:absolute;left:28.8%;top:81.2%;font-size:12.5vw;letter-spacing:-.03em;line-height:1;font-weight:800;white-space:nowrap}
.index-section{position:relative;aspect-ratio:16/9;background:#f0f0f0;overflow:hidden}.index-section>.section-menu{position:absolute;left:18.85%;top:23.148%}.index-section>h2{position:absolute;left:41.75%;top:23.1%;font-size:12.5vw;letter-spacing:-.03em;line-height:1;font-weight:800}.project-index{position:absolute;left:39.4%;top:40.74%;width:41.67%;border-radius:1.25vw;box-shadow:0 .26vw .78vw #0004;overflow:hidden;z-index:2;backdrop-filter:blur(2px)}.project-index>a{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#ffffff99;padding:1.667vw 2.083vw;min-height:5vw;font:500 1.667vw/1.2 Pretendard,sans-serif;transition:background .25s,color .25s}.project-index>a:first-child{padding-top:2.03vw}.project-index>a:last-child{padding-bottom:2.08vw}.project-index>a:hover{background:#08f;color:#fff}
.project{--accent:#007eb5;--landscape:linear-gradient(0deg,#ebf3fd,#ffebf7)}.gimpo{--accent:#d3357c;--landscape:#fef8ec}.basics{--accent:#0672dd;--landscape:#edf5ff}.jobs{--accent:#087967;--landscape:#e8f4ef}.project-cover{position:relative;aspect-ratio:16/9;overflow:hidden}.project-cover header{position:absolute;top:5.5556%;left:3.125%;right:3.125%;z-index:2}.eyebrow{font-size:clamp(14px,1.042vw,20px);font-weight:700;color:var(--accent);margin-bottom:2.083vw}.project-cover h2{font-family:Pretendard,sans-serif;font-size:3.75vw;letter-spacing:-.025em;line-height:1.15;font-weight:700}.project-url{display:inline-block;font-family:Pretendard,sans-serif;font-size:1.875vw;line-height:1.4;margin-top:1.15vw;transition:color .2s}.project-url:hover{color:var(--accent)}.cover-landscape{position:absolute;bottom:0;left:0;width:100%;height:33.333%;background:var(--landscape);border-radius:6.25vw 6.25vw 0 0}.device-scene{position:absolute;left:22.08%;top:21.56%;width:58%;height:64%;transition:transform .7s cubic-bezier(.2,.7,.2,1);outline-offset:-20px!important}.device-scene:hover,.device-scene:focus-visible{transform:translateY(-.4vw)}.device-screen{position:absolute;overflow:hidden}.device-screen img{display:block;width:100%;height:auto;transition:transform 8s cubic-bezier(.2,.4,.2,1);will-change:transform}.laptop-screen{left:16.86%;top:11.74%;width:72.92%;height:75.88%;background:#fff}.laptop-frame{position:absolute;left:7.53%;top:1.06%;width:91.58%;height:97.14%;pointer-events:none}.laptop-shadow{position:absolute;left:6.65%;top:0;width:93.34%;height:100%;pointer-events:none}.phone-screen{left:1.75%;top:33.6%;width:18.02%;height:62.92%;background:white;border-radius:1.6vw}.phone-frame{position:absolute;left:.04%;top:31.52%;width:21.56%;height:67.08%;pointer-events:none}.project-meta{position:absolute;left:6.25%;right:12.5%;bottom:5.55%;display:grid;grid-template-columns:1fr 22% 14%;gap:4vw}.project-meta dt{font-family:Pretendard,sans-serif;font-size:clamp(14px,1.25vw,24px);font-weight:700;text-transform:uppercase;line-height:1;margin-bottom:.52vw}.project-meta dd{font-family:Pretendard,sans-serif;font-size:clamp(14px,1.042vw,20px);line-height:1.2;color:#444;white-space:nowrap}
.case-section{padding:0 3.125% 5vw;background:#fff}.case-details{border-bottom:1px solid #ccc}.case-details>summary{padding:2.083vw 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;cursor:pointer}.case-details>summary::-webkit-details-marker{display:none}.case-details>summary small{display:block;font-size:12px;letter-spacing:.06em;color:#777;margin-bottom:8px}.case-details>summary strong{font:600 clamp(18px,1.46vw,28px)/1.4 Pretendard,sans-serif}.case-count{display:flex;align-items:center;gap:32px;font-size:14px;color:#777}.case-count b{font-size:32px;font-weight:400;color:#111;transition:rotate .25s}.case-details[open] .case-count b{rotate:45deg}.case-details>summary:hover strong{color:var(--accent)}.case-content{padding:16px 0 32px}.case-tabs{display:flex;gap:8px;overflow:auto;padding:8px 5px 24px;scrollbar-width:thin}.case-tabs button{display:flex;gap:10px;align-items:center;flex-shrink:0;border:1px solid #ddd;background:white;border-radius:100px;padding:12px 18px;font-size:14px;font-weight:500;transition:background .2s,color .2s}.case-tabs button span{font-size:12px;opacity:.6}.case-tabs button:hover{border-color:var(--accent);color:var(--accent)}.case-tabs button[aria-selected=true]{background:#111;border-color:#111;color:#fff}.case-image-button{position:relative;display:block;width:100%;border:0;padding:0;background:#eee;border-radius:12px;overflow:hidden;cursor:zoom-in}.case-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;transition:opacity .2s}.case-image-button:hover .enlarge-label{background:#08f;color:white}.enlarge-label{position:absolute;right:20px;bottom:20px;padding:10px 16px;border-radius:100px;background:#fffffff2;color:#111;box-shadow:0 2px 8px #0002;font:500 14px Pretendard,sans-serif;transition:background .2s,color .2s}.case-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;padding:24px 0}.case-caption{font:400 18px/1.65 Pretendard,sans-serif;max-width:900px;color:#444;word-break:keep-all}.page-controls{display:flex;align-items:center;gap:16px;flex-shrink:0}.page-controls output{font-size:14px;color:#777;white-space:nowrap}.page-controls button{padding:9px 14px;border:1px solid #ddd;border-radius:100px;background:#fff;font-size:14px}.page-controls button:hover{background:#111;color:#fff}.page-controls button:disabled{opacity:.35;cursor:default}.end .hero-menu{animation:none}.end .hero-menu a.selected{background:#08f;color:white}.end>h2{font-size:16.67vw;top:61.1%;letter-spacing:-.05em}.end .hello{left:70.78%;animation:none}.contact-link{position:absolute;bottom:3vw;right:3.125%;font-size:14px;color:#666}.contact-link:hover{color:#08f}
.floating-nav{position:fixed;bottom:24px;right:24px;padding:14px 22px;border:0;border-radius:100px;color:#fff;background:#111;box-shadow:0 4px 20px #0002;font-size:14px;z-index:30;display:flex;gap:24px;align-items:center;transition:background .2s}.floating-nav:hover,.floating-nav[aria-expanded=true]{background:#08f}.floating-nav span{font-size:22px;line-height:1;transition:rotate .2s}.floating-nav[aria-expanded=true] span{rotate:45deg}.quick-menu{position:fixed;bottom:84px;right:24px;background:#fffffff2;backdrop-filter:blur(20px);border:1px solid #eee;box-shadow:0 8px 32px #0002;border-radius:20px;padding:12px;z-index:31;min-width:260px;max-height:calc(100svh - 115px);overflow:auto}.quick-menu[hidden]{display:none}.quick-menu a{display:block;padding:12px 16px;border-radius:10px;font-size:16px;transition:background .2s}.quick-menu a:hover,.quick-menu a.active{background:#08f;color:white}
#viewer{border:0;padding:0;width:96vw;max-width:2500px;height:94svh;max-height:94svh;border-radius:16px;background:#e9e9e9;overflow:hidden}#viewer::backdrop{background:#000c;backdrop-filter:blur(6px)}.viewer-bar{min-height:74px;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:white;gap:20px;border-bottom:1px solid #ddd}.viewer-bar h2{font-size:16px;line-height:1.4}.viewer-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.viewer-actions button{border:1px solid #ddd;background:#fff;border-radius:8px;padding:10px 12px;font-size:14px;white-space:nowrap}.viewer-actions button:hover{background:#08f;color:white}.viewer-actions button:disabled{opacity:.4;cursor:default}.viewer-actions output{font-size:14px;min-width:52px;text-align:center;white-space:nowrap}.toolbar-divider{height:24px;border-left:1px solid #ddd;margin:0 8px}.viewer-scroll{height:calc(100% - 74px);overflow:auto;padding:24px;overscroll-behavior:contain}.viewer-image{display:block;margin:0 auto;max-width:none;height:auto;box-shadow:0 12px 36px #0002}.reveal{opacity:1;transform:none}.js-motion .reveal{opacity:0;transform:translateY(35px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}.js-motion .reveal.visible{opacity:1;transform:none}@keyframes type-in{from{translate:0 80px;opacity:0}to{translate:0 0;opacity:1}}@keyframes menu-in{from{translate:0 -40px;opacity:0;rotate:-4deg}to{translate:0 0;opacity:1;rotate:0deg}}@keyframes cursor-in{from{translate:70px 60px;opacity:0}to{translate:0 0;opacity:1}}@keyframes hello-in{from{translate:0 15px;opacity:0}to{translate:0 0;opacity:1}}
@media(min-width:1920px){.hero,.about,.index-section,.project-cover{max-width:1920px;margin:auto}.hero h1{font-size:360px}.hero>h2{font-size:320px}.hero-menu a,.section-menu a{height:96px;font-size:32px;padding:0 40px}.hero-menu a:last-child,.section-menu a:last-child{height:88px}.hero-menu,.section-menu{border-radius:24px}.hello{font-size:32px;line-height:24px;padding:20px;gap:12px}.masthead{top:60px}.about>h2,.index-section>h2{font-size:240px}.profile-person{padding:40px}.profile-person>img{height:390px}.profile-details{padding:40px;gap:40px}.profile-details h3{font-size:30px;margin-bottom:27px}.project-index>a{font-size:32px;padding:32px 40px}.project-cover h2{font-size:72px}.project-url{font-size:36px;margin-top:24px}.eyebrow{margin-bottom:40px}.case-section{max-width:1920px;margin:auto}}
@media(max-width:1100px){.about{aspect-ratio:auto;padding:110px 32px 0;min-height:850px}.about .masthead{top:32px}.about .section-menu{display:none}.profile-panel{position:relative;left:auto;right:auto;top:auto;grid-template-columns:32% 68%;min-height:0;border-radius:20px}.profile-person{padding:28px}.profile-person>img{height:280px}.profile-person p{margin-top:20px;font-size:14px}.profile-details{padding:28px;gap:30px}.profile-details h3{font-size:20px;margin-bottom:22px}.profile-details dl{font-size:14px;row-gap:10px;column-gap:20px}.contact-list{grid-template-columns:130px 1fr!important}.profile-columns{gap:24px}.tool-list>div{flex-wrap:wrap;justify-content:flex-start;gap:16px}.about>h2{position:relative;left:auto;top:auto;text-align:right;font-size:16vw;margin-top:56px;line-height:.9}.viewer-bar{flex-direction:column;align-items:flex-start;gap:10px}.viewer-scroll{height:calc(100% - 115px)}}
@media(max-width:700px){html{scroll-padding-top:12px}.hero{aspect-ratio:auto;min-height:700px;height:90svh}.masthead{top:28px;left:24px;right:24px;font-size:18px}.hero h1,.hero>h2{left:24px;top:auto;bottom:58px;font-size:19vw;letter-spacing:-.04em}.hero-menu{left:24px;top:135px;width:240px;border-radius:20px}.hero-menu a{font-size:18px;height:60px;padding:0 24px;gap:10px}.hero-menu a:last-child{height:60px}.hero-cursor{left:252px;top:178px;width:48px}.hello,.end .hello{left:auto;right:24px;top:auto;bottom:178px;font-size:16px;line-height:22px;padding:14px;gap:8px;border-radius:12px}.hello i{height:16px}.hello:after{left:22px;border-left-width:10px;border-right-width:10px;border-top-width:12px}.about{padding:100px 24px 0;min-height:0}.profile-panel{display:block;border-radius:18px}.profile-person{display:grid;grid-template-columns:36% 1fr;gap:20px;padding:24px;border:0;border-bottom:1px solid #ddd;align-items:center}.profile-person>img{height:auto;aspect-ratio:2/3;object-fit:cover}.profile-person p{font-size:14px;line-height:1.7;margin:0;word-break:keep-all}.profile-person p br{display:none}.profile-details{padding:28px 24px;gap:36px}.profile-details h3{font-size:20px;margin-bottom:20px}.contact-list{grid-template-columns:1fr!important;row-gap:7px!important}.contact-list dd{margin-bottom:8px}.contact-list dt{font-size:12px;color:#666}.profile-columns{grid-template-columns:1fr;gap:36px}.profile-columns dl{grid-template-columns:70px 1fr;font-size:14px;column-gap:16px;row-gap:12px}.tool-list>div{font-size:14px;gap:12px 18px}.about>h2{font-size:19vw;margin:52px -4px 0;line-height:.92}.index-section{aspect-ratio:auto;min-height:640px;padding:118px 24px 72px}.index-section .masthead{top:32px}.index-section .section-menu{display:none}.index-section>h2{position:relative;left:auto;top:auto;font-size:20vw;letter-spacing:-.035em;margin-bottom:28px}.project-index{position:relative;left:auto;top:auto;width:100%;border-radius:18px;box-shadow:0 4px 12px #0002}.project-index>a,.project-index>a:first-child,.project-index>a:last-child{min-height:80px;padding:24px 20px;font-size:17px;border-bottom:1px solid #eee;line-height:1.5}.project-index>a:last-child{border:0}.project-cover{aspect-ratio:auto;height:650px}.project-cover header{top:44px;left:24px;right:24px}.eyebrow{font-size:14px;margin-bottom:20px}.project-cover h2{font-size:30px;line-height:1.22;word-break:keep-all;max-width:350px}.project-url{font-size:14px;margin-top:16px;overflow-wrap:anywhere}.device-scene{left:5%;top:265px;width:90%;height:auto;aspect-ratio:1113/691}.laptop-frame{height:97.14%}.phone-screen{border-radius:12px}.cover-landscape{height:37%;border-radius:40px 40px 0 0}.project-meta{left:24px;right:24px;bottom:36px;display:grid;grid-template-columns:1fr 1fr;gap:24px 16px}.project-meta dt{font-size:12px;margin-bottom:8px}.project-meta dd{font-size:14px}.project-meta>div:last-child{display:none}.case-section{padding:0 24px 40px}.case-details>summary{padding:28px 0}.case-details>summary small{font-size:12px}.case-details>summary strong{font-size:18px}.case-count{font-size:12px;gap:16px;white-space:nowrap}.case-count b{font-size:28px}.case-tabs{padding-bottom:20px}.case-tabs button{font-size:14px;padding:11px 16px}.case-content{padding-top:0}.case-toolbar{flex-direction:column;gap:20px;padding:20px 0 0}.case-caption{font-size:16px}.page-controls{align-self:flex-end}.enlarge-label{right:10px;bottom:10px;padding:7px 12px;font-size:12px}.case-image-button{border-radius:6px}.end{min-height:690px;height:90svh}.end>h2{font-size:17vw;bottom:95px}.contact-link{bottom:32px;left:24px;right:auto;font-size:14px}.floating-nav{bottom:16px;right:16px}.quick-menu{bottom:76px;right:16px}.viewer-bar{padding:14px 12px;min-height:126px;gap:10px}.viewer-bar h2{font-size:14px;max-width:100%}.viewer-actions{gap:5px;max-width:100%;flex-wrap:wrap}.viewer-actions button{padding:8px 9px;font-size:12px}.viewer-actions output{font-size:12px;min-width:40px}.viewer-actions #zoom-value{display:none}.toolbar-divider{height:16px;margin:0 2px}.viewer-scroll{height:calc(100% - 126px);padding:12px}}
@media(max-width:380px){.profile-person{display:block}.profile-person>img{width:140px;margin:auto auto 24px}.hero-menu{width:225px}.hero-cursor{left:237px}.hello{font-size:14px}.case-count{gap:8px}.project-cover h2{font-size:27px}.viewer-actions #zoom-fit{display:none}}
.js-motion .reveal{opacity:1;transform:none}.js-motion .reveal.visible{animation:section-in .8s cubic-bezier(.2,.7,.2,1) both}@keyframes section-in{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}.device-screen img{will-change:auto}}