:root{font-family:sans-serif,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;line-height:1.5;font-weight:400;color:#fff;background-color:#1b1c2a;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background-color:#0f0f0f}a{text-decoration:none;color:inherit}#root{max-width:100vw;margin:0;padding:0 clamp(1.2rem,4vw,4rem);text-align:center}:root{--bg-color: #070710;--bg-dark: #12121c;--text-color: #ffffff;--text-sub: #a1a1b5;--card-bg: #161725;--card-text: #b8b8c6;--primary: #00ffd0;--primary-hover: #01ac8c}*{margin:0;padding:0;box-sizing:border-box}@font-face{font-family:Pretendard;font-weight:900;font-display:swap;src:local("Pretendard Black"),url(/fonts/woff2/Pretendard-Black.woff2) format("woff2"),url(/fonts/woff/Pretendard-Black.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:800;font-display:swap;src:local("Pretendard ExtraBold"),url(/fonts/woff2/Pretendard-ExtraBold.woff2) format("woff2"),url(/fonts/woff/Pretendard-ExtraBold.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:700;font-display:swap;src:local("Pretendard Bold"),url(/fonts/woff2/Pretendard-Bold.woff2) format("woff2"),url(/fonts/woff/Pretendard-Bold.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:600;font-display:swap;src:local("Pretendard SemiBold"),url(/fonts/woff2/Pretendard-SemiBold.woff2) format("woff2"),url(/fonts/woff/Pretendard-SemiBold.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:500;font-display:swap;src:local("Pretendard Medium"),url(/fonts/woff2/Pretendard-Medium.woff2) format("woff2"),url(/fonts/woff/Pretendard-Medium.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:400;font-display:swap;src:local("Pretendard Regular"),url(/fonts/woff2/Pretendard-Regular.woff2) format("woff2"),url(/fonts/woff/Pretendard-Regular.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:300;font-display:swap;src:local("Pretendard Light"),url(/fonts/woff2/Pretendard-Light.woff2) format("woff2"),url(/fonts/woff/Pretendard-Light.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:200;font-display:swap;src:local("Pretendard ExtraLight"),url(/fonts/woff2/Pretendard-ExtraLight.woff2) format("woff2"),url(/fonts/woff/Pretendard-ExtraLight.woff) format("woff")}@font-face{font-family:Pretendard;font-weight:100;font-display:swap;src:local("Pretendard Thin"),url(/fonts/woff2/Pretendard-Thin.woff2) format("woff2"),url(/fonts/woff/Pretendard-Thin.woff) format("woff")}body{background:var(--bg-color);color:var(--text-color);line-height:1.6;font-family:Pretendard,"sans-serif",Segoe UI,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;word-break:keep-all}.page-shell{min-height:100vh;background:var(--bg-color)}.navbar{display:flex;justify-content:flex-end;align-items:center;padding:20px 10%;position:fixed;width:100%;background:var(--bg-color);z-index:1000;transition:background .3s}.navbar ul{display:flex;list-style:none;gap:30px;align-items:center}.navbar a{text-decoration:none;font-weight:700;color:var(--text-color);transition:color .3s}.navbar a:hover,.navbar a.active{color:var(--primary)}.nav-contact{background:none;border:none;color:var(--text-color);font-weight:700;cursor:pointer;transition:color .3s}.nav-contact:hover{color:var(--primary)}.hero{position:relative;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:0 10%}.hero-compact{height:60vh;background:linear-gradient(145deg,var(--bg-color),var(--bg-dark))}.particles-layer{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}.hero-content.hero-visible{opacity:1;transform:translateY(0)}.hero-content h1{font-size:50px;margin:0 0 20px;font-weight:200}.hero-content hh{color:var(--primary);font-weight:600}.hero-content span{color:var(--primary);font-weight:700}.hero-content p{max-width:500px;margin:0 auto 30px;font-size:20px;font-weight:200px;color:#fff}.main-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.hero-typed{white-space:pre-line}.hero-intro{position:absolute;color:var(--text-color);font-size:48px;font-weight:100;letter-spacing:inherit;pointer-events:none}.hero-intro-top{top:340px;left:220px}.hero-intro-bottom{bottom:280px;right:320px}.hero-dock{position:absolute;bottom:180px;transform:translate(-50%);width:100%;display:flex;justify-content:center;pointer-events:none;z-index:2}.hero-dock .dock-outer{pointer-events:auto}.dock-appear{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}.dock-visible{opacity:1;transform:translateY(0)}.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:transparent;color:var(--primary);text-decoration:none;font-weight:700;border-radius:999px;border:1px solid rgba(0,255,208,.5);transition:background .2s ease,color .2s ease,box-shadow .2s ease}.btn:hover{background:#00ffd01f;color:#fff;box-shadow:0 6px 18px #00ffd02e}.skill p{margin-top:24px;font-weight:600}.projects-section{padding:80px 10%}.projects-section h2{font-size:28px;margin-bottom:40px}.projects-section h2 a{font-size:28px;margin-bottom:40px;text-decoration:none;color:var(--text-color);transition:color .3s}.projects-section h2 a:hover{color:var(--primary)}.projects-section h2 span{color:var(--primary);margin-left:10px;border-bottom:3px solid var(--primary)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.skill-grid{position:relative;width:min(100%,1100px);height:80px;margin:0 auto;overflow:hidden;display:flex;align-items:center;mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent)}.about-contants{display:flex;align-items:center;justify-content:center;justify-items:center;gap:48px;padding:24px 0}.about-desc{display:grid;text-align:left;gap:12px}.profile_img{width:220px;border-radius:14px;box-shadow:0 18px 36px #00000059}.about-title{font-weight:700;font-size:40px}.about-subtitle{font-weight:400;font-size:20px}.about-tags{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}.about-tags a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:14px;background:#161725;color:#fff;font-weight:700;border:1px solid rgba(255,255,255,.2);transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.about-tags a:hover{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:14px;background:#2d2e3a;color:#fff;font-weight:700;border:1px solid rgba(255,255,255,.2);box-shadow:0 5px 10px var(--primary-hover)}.card{background:var(--card-bg);padding:20px;border-radius:10px;transition:transform .3s}.projects-section .card{cursor:pointer}.card:hover{transform:translateY(-8px)}.card h3{margin-bottom:15px;color:var(--primary)}.card p{font-size:14px;color:var(--card-text)}.project-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.project-tag{display:inline-flex;align-items:center;gap:8px;padding:3px 12px;border-radius:999px;background:#161725;color:#fff;font-weight:700;border:1px solid rgba(255,255,255,.2);font-size:12px}.project-modal{position:fixed;inset:0;z-index:3000}.project-modal__backdrop{position:absolute;inset:0;background:#0009;animation:backdropFadeIn .2s ease forwards}.project-modal__content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(140deg,#161725f5,#0b0e18f5);padding:28px;border-radius:20px;max-width:1820px;width:min(92vw,840px);color:var(--text-color);box-shadow:0 20px 60px #00000073,0 0 0 1px #00ffd014;border:1px solid rgba(26,26,26,.701);animation:modalFadeIn .26s ease forwards}.project-modal__close{position:absolute;top:12px;right:12px;background:#ffffff0f;border:none;color:var(--text-color);font-size:20px;cursor:pointer;width:32px;height:32px;border-radius:50%;transition:background .14s ease,color .14s ease}.project-modal__close:hover{background:#530000;color:#fff}.project-modal__nav{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:var(--text-color);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;font-weight:700;z-index:2;transition:background .16s ease,color .16s ease,box-shadow .16s ease}.project-modal__nav:hover{background:#00ffd02e;color:#fff;box-shadow:0 8px 20px #00ffd02e}.project-modal__nav--prev{left:-52px}.project-modal__nav--next{right:-52px}.project-modal__description{margin:0;color:var(--card-text)}.project-modal__details{word-break:keep-all;text-align:left;margin:12px 0 18px;color:var(--card-text);line-height:1.6}.project-modal__header{display:flex;gap:18px;align-items:center;margin-bottom:12px}.project-modal__header h2{text-align:left}.project-modal__thumb{justify-self:flex-end;margin-left:auto;margin-right:15px;height:120px;border-radius:12px;overflow:hidden;flex-shrink:0;box-shadow:0 10px 30px #00000059}.project-modal__thumb img{width:auto;height:100%;object-fit:cover}.project-modal__eyebrow{text-align:left;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--primary);margin:0 0 4px}.project-modal__images{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}.project-modal__images img{width:calc(50% - 6px);border-radius:10px;object-fit:cover}@keyframes modalFadeIn{0%{opacity:0;transform:translate(-50%,-46%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:640px){.project-modal__content{padding:20px;top:52%}.project-modal__nav--prev{left:10px}.project-modal__nav--next{right:10px}.project-modal__images img{width:100%}.project-modal__header{flex-direction:column;align-items:flex-start}.project-modal__thumb{width:100%;height:180px}}.skill{padding:80px 10%}.skill h2{font-size:28px;margin-bottom:40px}.skill h2 span{color:var(--primary);margin-left:10px;border-bottom:3px solid var(--primary)}.skill .grid{width:min(100%,960px);margin:0 auto;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;justify-items:center}.skill-img{position:relative;display:flex;justify-content:center;align-items:center}.skill-img img{width:100px;height:auto;max-width:100%;transition:all .6s ease;filter:drop-shadow(0 0 5px rgba(0,255,255,.3))}.skill-img:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(120deg,transparent 30%,rgba(0,255,255,.5),transparent 70%);transform:translate(-100%) rotate(25deg);opacity:0;transition:all .8s ease;pointer-events:none}.skill-img:hover img{filter:drop-shadow(0 0 15px #0ff) brightness(1.2);transform:scale(1.05)}.prizes{padding:80px 10%}.prizes h2{font-size:28px;margin-bottom:40px}.prizes h2 span{color:var(--primary);margin-left:10px;border-bottom:3px solid var(--primary)}.prizes-wrap{display:flex;flex-direction:column;gap:12px}.prize-tabs{display:flex;gap:12px;justify-content:flex-start;padding:10px 12px;background:linear-gradient(120deg,#ffffff0a,#00ffd00d);border:1px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:0 10px 30px #00000040,0 0 0 1px #00ffd00f}.prize-tabs .tab{position:relative;background:#ffffff05;border:1px solid rgba(255,255,255,.08);color:var(--text-color);padding:10px 14px;cursor:pointer;border-radius:10px;font-size:18px;font-weight:700;transition:color .16s ease,box-shadow .2s ease,transform .16s ease,border-color .16s ease,background .16s ease}.prize-tabs .tab.active,.prize-tabs .tab:hover{background:linear-gradient(135deg,#00ffd029,#00ffd014);color:var(--primary);border-color:#00ffd047;box-shadow:0 8px 24px #00ffd024,0 0 0 1px #00ffd014;transform:translateY(-1px)}.prize-tabs .tab:focus-visible{outline:2px solid rgba(0,255,208,.6);outline-offset:2px}.prize-panels{padding-left:30px;width:100%;position:relative;min-height:140px}.panel{position:absolute;inset:0;opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}.panel.active{position:relative;opacity:1;transform:translateY(0);pointer-events:auto}.plain-list{list-style:none;padding-left:0;margin:0}.plain-list li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);color:var(--card-text)}.plain-list li strong{color:var(--primary);margin-right:8px}.project-list{padding:100px 10%;background:var(--bg-color)}.sort-menu{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-bottom:40px}.sort-menu label{color:var(--text-sub);font-weight:700}.sort-menu select{background:var(--card-bg);color:var(--text-color);border:1px solid rgba(255,255,255,.1);padding:8px 14px;border-radius:8px;font-weight:700;cursor:pointer;transition:background .3s,color .3s}.sort-menu select:hover{background:var(--primary-hover);color:#fff}.projects{display:flex;flex-direction:column;gap:40px}.project-card{display:flex;align-items:center;background:var(--card-bg);border-radius:14px;padding:24px;gap:24px;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 20px #00000040}.project-card:hover{transform:translateY(-6px);box-shadow:0 6px 25px #00ffd026}.project-card img{width:220px;height:auto;object-fit:cover;border-radius:10px;flex-shrink:0;filter:brightness(.9);transition:filter .3s}.project-card:hover img{filter:brightness(1)}.project-info{flex:1}.project-info h2{font-size:1.6rem;color:var(--primary);margin-bottom:10px}.project-info p{font-size:1rem;color:var(--card-text);line-height:1.6}.project-card.opened{flex-direction:column;align-items:flex-start;padding:32px}.project-card.opened img{width:280px;margin-bottom:20px}.project-card.opened .project-info h2{font-size:2rem}.project-card.opened .project-info p{font-size:1.05rem;margin-bottom:20px}.project-details{display:none;color:var(--card-text);font-size:.95rem;line-height:1.7;margin-top:10px;width:100%}.project-card.opened .project-details{display:block}.project-details .detail-images{display:flex;justify-content:space-between;margin-top:20px;gap:4%}.project-details img{width:48%;border-radius:12px}.contact{padding:80px 10%;text-align:center}.contact h3{font-size:26px;margin-bottom:20px;color:var(--primary)}.contact-icons{display:flex;gap:10px;margin-top:15px;margin-bottom:30px;justify-content:center}.contact-dock{margin-top:24px;display:flex;justify-content:center;pointer-events:none}.contact-dock .dock-outer{pointer-events:auto}.contact-dock .dock-panel{position:static;left:auto;transform:none;bottom:auto}.icon{display:inline-block;width:24px;height:24px;background-size:cover;background-position:center;text-indent:-9999px;filter:invert(1) brightness(2);transition:filter .16s ease,opacity .16s ease}.icon:hover{opacity:.9;filter:invert(1) brightness(1.6)}.icon.email{background-image:url(/icons/gmail.png)}.icon.instagram{background-image:url(/icons/instagram.png)}.icon.github{background-image:url(/icons/github.png)}.icon.backjoon{background-image:url(/icons/code.png)}footer{text-align:center;padding:20px;font-size:.9rem;color:#b0b0b0;border-top:1px solid rgba(255,255,255,.08);background:var(--bg-color)}@media(max-width:1100px){.grid,.skill .grid{grid-template-columns:repeat(3,1fr)}.projects-section,.skill,.prizes,.project-list,.contact{padding:70px 8%}.hero{padding:0 8%}}@media(max-width:800px){.about-contants{flex-direction:column;align-items:flex-start;gap:32px;padding:12px 0}.profile_img{width:160px}.about-desc{gap:10px}.about-title{font-size:30px}.about-subtitle{font-size:17px}.about-tags{gap:10px}.navbar{padding:16px 24px}.navbar ul{gap:16px}.hero{height:80vh;padding:0 6%}.hero-content h1{font-size:38px}.grid{grid-template-columns:repeat(2,1fr)}.prize-tabs{overflow-x:auto}.project-card{flex-direction:column;text-align:center}.project-card img{width:100%}.project-details .detail-images{flex-direction:column}.project-details img{width:100%}}@media(max-width:520px){.grid{grid-template-columns:1fr}.skill .grid{grid-template-columns:repeat(2,1fr)}}