@font-face{font-family:KhnpHandot;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KHNPHD.woff) format("woff");font-weight:400;font-display:swap}*{box-sizing:border-box}html,body{margin:0;padding:0}:root{width:100%;scroll-behavior:smooth;--orange: #ffad7a;--blue: #96b1ff;--yellow: #ffe596;--purple: #cb96ff;--blue-light: #eaf4ff;--gray-light: #f5f6f8;--text-dark: #2b2b2b;--text-gray: #bebebe;--green: #bdff99}body{font-family:KhnpHandot,sans-serif;background:#fff;color:var(--text-dark)}main{padding-top:80px}section{padding:80px 24px;max-width:1200px;margin:0 auto}header{position:fixed;top:0;left:0;width:100%;background:#ffffffd9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000}.nav{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}.nav ul{list-style:none;display:flex;gap:24px}.nav a{text-decoration:none;color:var(--text-dark)}.nav a:hover{color:#3b6fd8}.logo{font-size:30px;padding:.5em}.logo:hover{color:#3b6fd8}.skill-list{list-style:none;display:flex;gap:40px;flex-wrap:wrap;flex-direction:row;margin:40px 0}.explan{font-size:12px;color:var(--text-gray)}#etc{display:flex;align-items:center;gap:10px}.section-flow{position:relative}.section-flow:after{content:"";position:absolute;left:40px;right:40px;bottom:0;height:3px;background:linear-gradient(120deg,#6ca1fde6,#ffffffe6,#6ca1fde6);background-size:300% 300%;animation:colorFlow 8s ease infinite}@keyframes colorFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.style-flex{display:flex;align-items:center;gap:10px}.project-list{display:flex;flex-direction:column;gap:120px}.project-card{display:flex;align-items:center;gap:64px}.project-card:nth-child(2n){flex-direction:row-reverse}.project-img{flex:1}.project-img img{width:100%;border-radius:16px}.project-content{flex:1}.project-num{font-size:50px;color:var(--text-gray);margin-right:10px}.project-title{line-height:1}.project-content h3{margin-bottom:16px}.project-content p{margin-bottom:16px;color:#444}.project-content ul{padding-left:18px}.project-content li{margin-bottom:8px;color:#555}.projecttag{padding:6px 10px;background:var(--blue-light);border-radius:20px;font-size:10px;margin:5px}.projecttag-main{background:var(--orange)}.projecttag-css{background:var(--blue)}.projecttag-js{background:var(--yellow)}.projecttag-bootstrap{background:var(--purple)}.projecttag-figma{background:var(--green)}.projecttag-jquery{background:var(--yellow)}.projecttag-gsap{background:var(--purple)}.sitebtn{text-decoration:none;color:inherit;border:1px solid gray;padding:10px 20px;background:var(--gray-light);border-radius:20px;font-size:18px;font-weight:700;margin:10px;cursor:pointer}.sitebtn:hover{color:#3b6fd8;border:1px solid var(--blue);background:var(--blue-light)}@media(max-width:768px){.project-card,.project-card:nth-child(2n){flex-direction:column}.project-list{gap:80px}}#contact{width:100%;background:linear-gradient(0deg,#f0f8ff,#f0f8ff,#fff);background-size:10%;margin-left:calc(-50vw + 50%);max-width:none}.contact-inner{max-width:1200px;margin:0 auto;padding:40px 24px}.contact-list{padding:0;display:flex;flex-direction:column;gap:16px}.contact-list li{display:flex;align-items:center;margin-bottom:20px}.contact-list li>a{display:flex;align-items:center;text-decoration:none;color:var(--text-dark)}.contact-list img{line-height:3px;margin-right:10px}#namebox{width:100%;background:linear-gradient(180deg,#f0f8ff,#f0f8ff,#fff);background-size:10%;max-width:none;padding:0}.name-inner{max-width:1200px;margin:0 auto;padding:40px 24px}.name-title{font-weight:700;margin:0;background:linear-gradient(120deg,#3b6fd8,#b5d3fe,#3b6fd8);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:colorFlow 8s ease infinite}h1{font-size:42px;margin:0}h2{font-size:36px;margin-bottom:60px;position:relative}h3{font-size:20px;color:var(--blue)}.tag{padding:12px 20px;background:var(--blue-light);border-radius:20px;font-size:14px;margin:10px}