@font-face{font-family:NanumSquareNeo;font-weight:300;font-display:block;src:url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2) format("woff2")}@font-face{font-family:NanumSquareNeo;font-weight:400;font-display:block;src:url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-bRg.woff2) format("woff2")}@font-face{font-family:NanumSquareNeo;font-weight:700;font-display:block;src:url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2) format("woff2")}@font-face{font-family:NanumSquareNeo;font-weight:800;font-display:block;src:url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2) format("woff2")}@font-face{font-family:NanumSquareNeo;font-weight:900;font-display:block;src:url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2) format("woff2")}:root{--bg-c:15 15 14;--fg-c:235 231 224;--ink-c:22 22 20;--paper-c:238 234 227;--shade-c:8 8 7;--surface:#1b1b19;--paper-photo:#dcd7cf;--tint:transparent;--tint-amt:0;--photo-dim:.68;--bg:rgb(var(--bg-c));--fg:rgb(var(--fg-c));--mute:rgb(var(--fg-c) / .66);--faint:rgb(var(--fg-c) / .22);--line:rgb(var(--fg-c) / .13);--safe:#f0a23b;--tex:none;--accent:var(--safe);--bg2:var(--surface);--text:var(--fg);--text3:var(--mute);--border2:var(--line);--cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 3 28 14 16.5 16.5 14 28Z' fill='%231f6fd6'/%3E%3Cpath d='M4 3 28 14 16.5 16.5Z' fill='%235aa9ff'/%3E%3Cpath d='M4 3 28 14 16.5 16.5 14 28Z' fill='none' stroke='%230c1a30' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto;--cursor-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 3 28 14 16.5 16.5 14 28Z' fill='%233d8ff5'/%3E%3Cpath d='M4 3 28 14 16.5 16.5Z' fill='%238cc6ff'/%3E%3Cpath d='M4 3 28 14 16.5 16.5 14 28Z' fill='none' stroke='%230c1a30' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, pointer;--paper:rgb(var(--paper-c));--ink:rgb(var(--ink-c));--ink-mute:rgb(var(--ink-c) / .6);--ink-line:rgb(var(--ink-c) / .14);--display-family:NanumSquareNeo;--display-weight:900;--sans:"NanumSquareNeo", system-ui, sans-serif;--display:"NanumSquareNeo", sans-serif;--mono:"JetBrains Mono", "NanumSquareNeo", ui-monospace, monospace;--pad:clamp(16px, 2.8vw, 48px);--head:clamp(88px, 11vh, 108px);--ease:cubic-bezier(.22,.61,.36,1);color-scheme:dark}:root[data-theme=sky]{--bg-c:118 215 234;--fg-c:16 38 62;--ink-c:16 38 62;--paper-c:236 249 252;--shade-c:10 30 52;--surface:#5fc4d9;--paper-photo:#cfeef5;--tint:transparent;--tint-amt:0;--photo-dim:.98;--safe:#0b3d63;color-scheme:light;--mute:rgb(var(--fg-c) / .8);--faint:rgb(var(--fg-c) / .5);--line:rgb(var(--fg-c) / .2)}:root[data-theme=navy]{--bg-c:10 22 44;--fg-c:238 234 226;--ink-c:12 26 50;--paper-c:232 235 240;--shade-c:3 9 20;--surface:#142440;--paper-photo:#d3d9e2;--tint:#1e3a6a;--tint-amt:.82;--photo-dim:.6}:root[data-theme=denim]{--bg-c:31 49 80;--fg-c:238 233 222;--ink-c:18 30 52;--paper-c:234 236 240;--shade-c:9 16 30;--surface:#2a4166;--paper-photo:#d5dbe4;--tint:transparent;--tint-amt:0;--photo-dim:.74;--safe:#e3a64a;--mute:rgb(var(--fg-c) / .72);--faint:rgb(var(--fg-c) / .28);--tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .5 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), repeating-linear-gradient(-62deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 3px), repeating-linear-gradient(-62deg, transparent 0 2px, rgb(0 0 0 / .12) 2px 3px), repeating-linear-gradient(28deg, rgb(255 255 255 / .022) 0 1px, transparent 1px 5px), radial-gradient(ellipse 70% 55% at 28% 18%, rgb(255 255 255 / .07), transparent 70%), radial-gradient(ellipse 80% 60% at 82% 96%, rgb(0 0 0 / .28), transparent 70%)}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased}html:has(body[data-shell=portfolio]){background:var(--tex),var(--bg)}body:where([data-shell=portfolio]){background:transparent}body.paper:where([data-shell=portfolio]){background:var(--paper);color:var(--ink);color-scheme:light;min-height:100dvh}html:has(body.paper:where([data-shell=portfolio])){background:var(--paper)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:var(--cursor-link)}body:where([data-shell=portfolio]){cursor:var(--cursor)}:where(body[data-shell=portfolio]) :is(a,summary,label,select,[role=button]){cursor:var(--cursor-link)}img{display:block;max-width:100%}:where(body[data-shell=portfolio]) .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}:focus-visible{outline:1px solid var(--safe);outline-offset:3px}:where(body[data-shell=portfolio]) .mono{font-family:var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}:where(body[data-shell=portfolio]) .hd{position:fixed;inset:0 0 auto;z-index:50;height:var(--head);padding:clamp(18px,3vh,34px) var(--pad) 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:24px;pointer-events:none}:where(body[data-shell=portfolio]) .hd>*{pointer-events:auto}:where(body[data-shell=portfolio]) .hd.scrim{background:linear-gradient(rgb(var(--bg-c) / .97) 62%,rgb(var(--bg-c) / 0))}:root[data-theme=denim] :where(body[data-shell=portfolio]) .hd.scrim{background:none}:root[data-theme=denim] :where(body[data-shell=portfolio]) .hd.scrim:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--tex),var(--bg);-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}:where(body[data-shell=portfolio]) .hd.overlay{height:calc(var(--head) + 40px);background:linear-gradient(rgb(var(--shade-c) / .88),rgb(var(--shade-c) / .6) 55%,rgb(var(--shade-c) / 0));text-shadow:0 1px 10px rgb(var(--shade-c) / .95)}:root[data-theme=sky] :where(body[data-shell=portfolio]) .hd.overlay{background:linear-gradient(rgb(var(--bg-c) / .94),rgb(var(--bg-c) / .7) 55%,rgb(var(--bg-c) / 0));text-shadow:none}body.paper:where([data-shell=portfolio]) .hd.scrim{background:linear-gradient(rgb(var(--paper-c) / .95),rgb(var(--paper-c) / 0))}:where(body[data-shell=portfolio]) .brand{display:flex;gap:clamp(18px,3vw,56px);align-items:flex-start}:where(body[data-shell=portfolio]) .brand-home{display:flex;align-items:center;gap:10px}:where(body[data-shell=portfolio]) .brand-logo{width:44px;height:44px;border-radius:50%;flex:none;box-shadow:0 4px 14px -6px rgb(var(--shade-c) / .6)}@media(max-width:860px){:where(body[data-shell=portfolio]) .brand-logo{width:38px;height:38px}}:where(body[data-shell=portfolio]) .brand b{font-family:var(--display);font-weight:var(--display-weight);font-size:22px;letter-spacing:-.01em;line-height:1}:where(body[data-shell=portfolio]) .brand b small{display:block;margin-top:6px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;color:rgb(var(--fg-c) / .74)}:where(body[data-shell=portfolio]) .brand p{margin:0;max-width:24em;word-break:keep-all;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:rgb(var(--fg-c) / .82)}body.paper:where([data-shell=portfolio]) .brand b small,body.paper:where([data-shell=portfolio]) .brand p{color:var(--ink-mute)}:where(body[data-shell=portfolio]) .views{display:flex;gap:14px;font-family:var(--mono);font-size:13px;position:relative;padding-bottom:18px}:where(body[data-shell=portfolio]) .views button{color:var(--mute);min-height:32px}:where(body[data-shell=portfolio]) .views button[aria-pressed=true]{color:var(--fg)}:where(body[data-shell=portfolio]) .views button[aria-pressed=true]:after{content:"";position:absolute;bottom:0;margin-left:-12px;width:0;height:0;border:6px solid transparent;border-bottom:8px solid var(--safe);transform:translate(var(--vx,0))}:where(body[data-shell=portfolio]) .nav{justify-self:end;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);font-family:var(--mono);font-size:13.5px}:where(body[data-shell=portfolio]) .nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,2.4vw,34px)}:where(body[data-shell=portfolio]) .nav a{color:rgb(var(--fg-c) / .82);display:inline-flex;align-items:center;min-height:32px;position:relative;transition:color .25s}:where(body[data-shell=portfolio]) .nav a:hover,:where(body[data-shell=portfolio]) .nav a[aria-current=page],:where(body[data-shell=portfolio]) .nav a.on{color:var(--fg)}body.paper:where([data-shell=portfolio]) .nav a{color:var(--ink-mute)}body.paper:where([data-shell=portfolio]) .nav a:hover,body.paper:where([data-shell=portfolio]) .nav a[aria-current=page]{color:var(--ink)}:where(body[data-shell=portfolio]) .nav a[aria-current=page]:before,:where(body[data-shell=portfolio]) .nav a.on:before{content:"";position:absolute;left:-16px;top:50%;margin-top:-5px;border:5px solid transparent;border-left:8px solid var(--safe);border-right:0}:where(body[data-shell=portfolio]) .nav .count{color:rgb(var(--fg-c) / .48);margin-left:2px}body.paper:where([data-shell=portfolio]) .nav .count{color:rgb(var(--ink-c) / .34)}:where(body[data-shell=portfolio]) .menu-btn{display:none}:where(body[data-shell=portfolio]) .draft{position:fixed;left:50%;top:8px;transform:translate(-50%);white-space:nowrap;z-index:60;font-family:var(--mono);font-size:10.5px;color:var(--faint);pointer-events:none}body.paper:where([data-shell=portfolio]) .draft{color:var(--ink-mute)}:where(body[data-shell=portfolio]) .care-links{position:fixed;left:var(--pad);bottom:8px;z-index:60;display:flex;gap:14px;font-size:10.5px}:where(body[data-shell=portfolio]) .care-links a{color:var(--faint);min-height:24px;display:flex;align-items:center}:where(body[data-shell=portfolio]) .care-links a:hover,:where(body[data-shell=portfolio]) .care-links a[aria-current=page]{color:var(--fg)}body.paper:where([data-shell=portfolio]) .care-links a{color:var(--ink-mute)}body.paper:where([data-shell=portfolio]) .care-links a:hover{color:var(--ink)}:where(body[data-shell=portfolio]) .care-door{color:var(--faint);font-size:12px;min-height:24px;min-width:24px;display:inline-flex;align-items:center;justify-content:center}:where(body[data-shell=portfolio]) .care-door:hover,:where(body[data-shell=portfolio]) .care-door:focus-visible{color:var(--fg)}@media(max-width:860px){:root{--head:72px}:where(body[data-shell=portfolio]) .draft{top:auto;bottom:4px;font-size:9.5px}:where(body[data-shell=portfolio]) .care-links{display:none}:where(body[data-shell=portfolio]) .nav.open~.care-links,body:has(.nav.open):where([data-shell=portfolio]) .care-links{display:flex;flex-wrap:wrap;align-items:center;z-index:80;bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));right:var(--pad);font-size:13px;gap:4px 20px}body:has(.nav.open):where([data-shell=portfolio]) .care-links .pwa-wrap{order:-1;flex-basis:100%;margin-bottom:8px}body:has(.nav.open):where([data-shell=portfolio]) .care-links a{color:var(--mute);min-height:44px}:where(body[data-shell=portfolio]) .hd{grid-template-columns:auto 1fr auto;height:auto;padding-top:16px;gap:12px}:where(body[data-shell=portfolio]) .brand p{display:none}:where(body[data-shell=portfolio]) .views{grid-column:2;grid-row:1;justify-self:center;align-self:center;gap:12px;padding-bottom:12px;margin-top:4px}:where(body[data-shell=portfolio]) .hd.scrim{background:linear-gradient(rgb(var(--bg-c) / .97) calc(100% - 12px),rgb(var(--bg-c) / 0))}:root[data-theme=denim] :where(body[data-shell=portfolio]) .hd.scrim:before{-webkit-mask-image:linear-gradient(#000 calc(100% - 12px),transparent);mask-image:linear-gradient(#000 calc(100% - 12px),transparent)}:where(body[data-shell=portfolio]) .nav{display:none}:where(body[data-shell=portfolio]) .views-ph{display:none}:where(body[data-shell=portfolio]) .menu-btn{display:inline-flex;justify-self:end;font-family:var(--mono);font-size:13px;min-height:44px;min-width:44px;align-items:center;justify-content:flex-end}:where(body[data-shell=portfolio]) .nav.open{display:flex;justify-self:stretch;width:100%;flex-direction:column;align-items:flex-start;gap:18px;position:fixed;inset:0;z-index:70;background:var(--tex),var(--bg);padding:96px var(--pad) 40px 40px;justify-content:flex-start}body.paper:where([data-shell=portfolio]) .nav.open{background:var(--paper)}:where(body[data-shell=portfolio]) .nav.open ul{flex-direction:column;gap:18px}:where(body[data-shell=portfolio]) .nav.open a{font-family:var(--display);font-weight:var(--display-weight);font-size:40px;letter-spacing:-.01em}:where(body[data-shell=portfolio]) .nav.open .count{font-family:var(--mono);font-weight:400;font-size:14px;vertical-align:super}:where(body[data-shell=portfolio]) .nav.open a[aria-current=page]:before{left:-18px}:where(body[data-shell=portfolio]) .nav .close{position:absolute;top:16px;right:var(--pad);font-family:var(--mono);font-size:13px;min-height:44px}}@media(min-width:861px){:where(body[data-shell=portfolio]) .nav .close{display:none}}:where(body[data-shell=portfolio]) .hd,:where(body[data-shell=portfolio]) .hd.scrim,:where(body[data-shell=portfolio]) .hd.overlay,body.paper:where([data-shell=portfolio]) .hd.scrim,:root[data-theme=sky] :where(body[data-shell=portfolio]) .hd.overlay{background:none;text-shadow:none;height:auto}:where(body[data-shell=portfolio]) .brand p{display:none}@media(min-width:861px){:where(body[data-shell=portfolio]) .hd{align-items:start}:where(body[data-shell=portfolio]) .nav{--g:clamp(18px,2vw,28px);padding:0 calc(var(--g) / 2);border-bottom:1px solid rgb(var(--fg-c) / .3)}:where(body[data-shell=portfolio]) .nav a{padding:6px 0 12px}:where(body[data-shell=portfolio]) .nav a[aria-current=page]:before,:where(body[data-shell=portfolio]) .nav a.on:before{display:none}:where(body[data-shell=portfolio]) .nav a:after{content:"";position:absolute;left:calc(var(--g) / -2);right:calc(var(--g) / -2);bottom:-2px;height:3px;background:var(--safe);opacity:0;transform:scaleX(.6);transition:opacity .25s,transform .3s var(--ease)}:where(body[data-shell=portfolio]) .nav a[aria-current=page]:after,:where(body[data-shell=portfolio]) .nav a.on:after{opacity:1;transform:none}:where(body[data-shell=portfolio]) .views{padding-bottom:12px}}@media(min-width:861px)and (hover:hover){:where(body[data-shell=portfolio]) .nav a:not([aria-current=page]):not(.on):hover:after{opacity:.45;transform:none}}@media(min-width:861px){body.hw-on-photo:where([data-shell=portfolio]) .nav{border-bottom-color:#ffffff8c}body.hw-on-photo:where([data-shell=portfolio]) .nav a{color:#fff;text-shadow:0 1px 10px rgb(0 0 0 / .5)}}:where(body[data-shell=portfolio]) .nav .count{display:none}@media(min-width:861px){:where(body[data-shell=portfolio]) .nav{white-space:nowrap;min-width:max-content;font-family:var(--sans);font-size:14.5px;font-weight:600}:where(body[data-shell=portfolio]) .nav,:where(body[data-shell=portfolio]) .nav ul{gap:clamp(18px,2vw,28px)}}body.hw-on-photo:where([data-shell=portfolio]) .brand b{color:#fff;text-shadow:0 1px 12px rgb(0 0 0 / .35);transition:color .4s}body.hw-on-photo:where([data-shell=portfolio]) .brand b small{color:#ffffffd1}:where(body[data-shell=portfolio]) .brand b small{font-family:var(--sans);letter-spacing:0;font-size:12px}body:where([data-shell=portfolio]):not(.admin-mode) img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none}html:has(body[data-shell=portfolio]){scrollbar-width:thin;scrollbar-color:rgb(var(--fg-c) / .28) transparent}html:has(body[data-shell=portfolio])::-webkit-scrollbar{width:6px;height:6px}html:has(body[data-shell=portfolio])::-webkit-scrollbar-track{background:transparent}html:has(body[data-shell=portfolio])::-webkit-scrollbar-thumb{background:rgb(var(--fg-c) / .28);border-radius:6px}html:has(body[data-shell=portfolio]):has(#hw){scrollbar-width:none}html:has(body[data-shell=portfolio]):has(#hw)::-webkit-scrollbar{display:none}:where(body[data-shell=portfolio]) .care-made{display:inline-flex;align-items:center;gap:5px;color:var(--faint);min-height:24px}:where(body[data-shell=portfolio]) .care-made img{width:12px;height:12px;opacity:.85}:where(body[data-shell=portfolio]) .care-made:hover,:where(body[data-shell=portfolio]) .care-made:focus-visible{color:var(--fg)}