:root{--ink: #152028;--ink-soft: #3d4a55;--mist: #e7eef2;--mist-2: #f4f7f9;--teal: #0f5c63;--teal-deep: #0a3d42;--citrus: #c6e84a;--sand: #d4c4a8;--line: color-mix(in srgb, var(--ink) 12%, transparent);--radius: 2px;--ease: cubic-bezier(.22, 1, .36, 1);--font-display: "Syne", sans-serif;--font-body: "IBM Plex Sans KR", sans-serif;--content: min(720px, calc(100% - 2.5rem) )}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--font-body);font-weight:400;line-height:1.6;text-align:center;background:radial-gradient(1200px 700px at 50% -10%,#cfe3e8 0%,transparent 55%),radial-gradient(900px 600px at 50% 40%,#d9e6c8 0%,transparent 50%),linear-gradient(165deg,#edf3f5 0%,var(--mist-2) 45%,#e8ebe4 100%);overflow-x:hidden}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}a:hover{text-decoration:none}.noise{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.site-header{position:fixed;inset:0 0 auto;z-index:40;display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1rem clamp(1.25rem,4vw,3rem);background:color-mix(in srgb,var(--mist-2) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.logo{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em}.nav{display:flex;justify-content:center;gap:1.5rem}.nav a{font-size:.9rem;font-weight:500;color:var(--ink-soft);transition:color .25s var(--ease)}.nav a:hover{color:var(--teal)}.hero{position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:clamp(6rem,12vh,8rem) clamp(1.25rem,4vw,3rem) clamp(3rem,8vh,5rem);overflow:hidden}.hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.hero-orb{position:absolute;border-radius:50%;filter:blur(40px);animation:drift 14s var(--ease) infinite alternate}.hero-orb--a{width:min(58vw,640px);height:min(58vw,640px);left:50%;top:12%;translate:-40% 0;background:radial-gradient(circle at 30% 30%,#9fd0d4 0%,#5a9ea4 45%,transparent 70%);opacity:.7}.hero-orb--b{width:min(42vw,480px);height:min(42vw,480px);left:50%;bottom:18%;translate:-60% 0;background:radial-gradient(circle at 40% 40%,#dce89a 0%,#a8b85c 40%,transparent 70%);opacity:.55;animation-delay:-4s;animation-duration:18s}.hero-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,black,transparent);mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,black,transparent);opacity:.55}.hero-copy{position:relative;z-index:1;width:var(--content);display:flex;flex-direction:column;align-items:center}.brand{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(2.75rem,9vw,5.5rem);line-height:.95;letter-spacing:-.04em;color:var(--teal-deep);animation:rise .9s var(--ease) both}.section{padding:clamp(4.5rem,12vh,7rem) clamp(1.25rem,4vw,3rem);display:flex;flex-direction:column;align-items:center}.section-head{width:var(--content);margin-bottom:clamp(1.5rem,4vh,2.25rem)}.section-head h2{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em}.section-head p{margin:.5rem 0 0;color:var(--ink-soft);font-weight:300;font-size:1rem}.work{background:color-mix(in srgb,white 55%,transparent);border-block:1px solid var(--line)}.work-list{list-style:none;margin:0;padding:0;width:var(--content);display:flex;flex-direction:column;gap:0}.work-item{border-top:1px solid var(--line)}.work-item:last-child{border-bottom:1px solid var(--line)}.work-link{display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:clamp(1.75rem,3.5vh,2.5rem) 0;transition:opacity .3s var(--ease)}.work-link:hover{opacity:.85}.work-visual{display:block;width:100%;max-width:280px;min-height:140px;border-radius:var(--radius);background-size:cover;background-position:center;transition:transform .5s var(--ease)}.work-link:hover .work-visual{transform:scale(1.02)}.work-visual--1{background:linear-gradient(135deg,#0f5c63,#1a8a94 40%,#c6e84a),repeating-linear-gradient(-45deg,transparent,transparent 8px,color-mix(in srgb,white 12%,transparent) 8px,color-mix(in srgb,white 12%,transparent) 9px)}.work-visual--2{background:radial-gradient(circle at 70% 30%,#d4c4a8 0%,transparent 45%),linear-gradient(160deg,#152028,#3d5a4c 55%,#8fad6e)}.work-visual--3{background:linear-gradient(120deg,transparent 40%,color-mix(in srgb,#c6e84a 35%,transparent)),linear-gradient(200deg,#0a3d42,#4a7c7e 60%,#e7eef2)}.work-visual--4{background:radial-gradient(circle at 20% 80%,#ff66aa 0%,transparent 40%),linear-gradient(145deg,#1a1f2e,#3d4a6b,#6cf)}.work-meta{display:flex;flex-direction:column;align-items:center;gap:.35rem}.work-index{font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--teal)}.work-meta h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,2.5vw,1.85rem);letter-spacing:-.02em}.work-meta p{margin:.15rem 0 .35rem;color:var(--ink-soft);font-weight:300}.work-tags{font-size:.85rem;color:var(--ink-soft);letter-spacing:.01em;word-break:break-all}.experience-list{list-style:none;margin:0;padding:0;width:var(--content);display:flex;flex-direction:column;gap:0}.experience-item{display:flex;flex-direction:column;align-items:center;padding:clamp(1.75rem,3.5vh,2.5rem) 0;border-top:1px solid var(--line)}.experience-item:last-child{border-bottom:1px solid var(--line)}.experience-role{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,2.5vw,1.5rem);letter-spacing:-.02em;transition:color .25s var(--ease)}a.experience-role:hover{color:var(--teal)}.experience-meta{margin:.45rem 0 0;color:var(--ink-soft);font-weight:300;font-size:.95rem}.experience-badges{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}.experience-badges img{height:40px;width:auto;image-rendering:auto}.experience-links{display:flex;justify-content:center;gap:1rem;margin-top:.65rem}.experience-links a{font-size:.9rem;font-weight:500;color:var(--teal);transition:opacity .25s var(--ease)}.experience-links a:hover{opacity:.7}.experience-team{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.35rem .55rem;margin:.85rem 0 0;max-width:36rem;color:var(--ink-soft);font-size:.9rem;font-weight:400;line-height:1.5;text-align:center}.experience-team a{color:var(--ink);transition:color .25s var(--ease)}.experience-team a:hover{color:var(--teal)}.contact{background:var(--teal-deep);color:var(--mist-2)}.contact .section-head,.contact-body{width:var(--content)}.contact-body{display:flex;flex-direction:column;align-items:center}.contact-mail{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,3.5vw,2rem);letter-spacing:-.03em;transition:color .25s var(--ease)}.contact-mail:hover{color:var(--citrus)}.contact-links{display:flex;justify-content:center;gap:1.5rem;margin-top:1.5rem}.contact-links a{font-weight:500;color:color-mix(in srgb,var(--mist) 80%,transparent);transition:color .25s var(--ease)}.contact-links a:hover{color:var(--citrus)}.site-footer{padding:1.5rem clamp(1.25rem,4vw,3rem);background:var(--teal-deep);color:color-mix(in srgb,var(--mist) 55%,transparent);font-size:.85rem;border-top:1px solid color-mix(in srgb,white 10%,transparent)}.site-footer p{margin:0}@keyframes rise{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{0%{transform:translate(0) scale(1)}to{transform:translate(-2%,3%) scale(1.06)}}.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.is-visible{opacity:1;transform:translateY(0)}@media(max-width:720px){.nav{gap:1rem}.nav a{font-size:.85rem}.work-visual{max-width:100%;min-height:140px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.brand,.reveal,.hero-orb{animation:none!important;transition:none!important;opacity:1;transform:none}}
