*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;color:#333;background-color:#fff}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ul,ol{list-style:none}a{text-decoration:none;color:inherit}img{max-width:100%;height:auto;display:block}button{border:none;background:none;cursor:pointer;font-family:inherit}input,textarea,select{font-family:inherit;font-size:inherit;border:none;outline:none}table{border-collapse:collapse;border-spacing:0}fieldset{border:none;margin:0;padding:0}legend{padding:0}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;font-weight:inherit;font-size:inherit}p,blockquote,pre{margin:0}figure{margin:0}hr{margin:0;border:none}form{display:block}details{display:block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}:focus{outline:2px solid #007bff;outline-offset:2px}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid #007bff;outline-offset:2px}button,a,input,textarea,select{transition:all .2s ease-in-out}button,a,input,textarea,select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}p,h1,h2,h3,h4,h5,h6,span,div{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}*,*:before,*:after{box-sizing:border-box}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.flex{display:flex}.grid{display:grid}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}@media (max-width: 768px){html{font-size:14px}.container{padding:0 .5rem}}@media (max-width: 480px){html{font-size:12px}}@font-face{font-family:IAMAPLAYER;src:url(https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/IAMAPLAYER.woff2) format("woff2");font-weight:400;font-style:normal}.header{position:fixed;top:0;left:0;right:0;height:60px;background-color:#fff;border-bottom:1px solid #e8e8e8;z-index:1000;display:flex;align-items:center;justify-content:flex-start;gap:100px;padding:0 20px}.logo{font-weight:700;font-size:1.4rem;color:#37352f;cursor:pointer;transition:color .2s ease;-webkit-user-select:none;user-select:none;font-family:IAMAPLAYER}.logo:hover{color:#666}.nav{display:flex;gap:40px}.nav-link{text-decoration:none;color:#37352f;font-weight:500;font-size:1rem;padding:8px 16px;border-radius:6px;transition:all .2s ease}.nav-link:hover{background-color:#f7f6f3;color:#37352f}.nav-link.active{background-color:#37352f;color:#fff}@media (max-width: 768px){.nav{gap:20px}.nav-link{font-size:.9rem;padding:6px 12px}}.sidebar{position:fixed;left:0;top:60px;width:280px;height:calc(100vh - 60px);background-color:#fafafa;border-right:1px solid #e8e8e8;padding:40px 24px;overflow-y:auto;z-index:999}.profile-section{margin-bottom:40px}.profile-image-container{display:flex;justify-content:center;margin-bottom:24px}.profile-image-placeholder{width:150px;height:150px;border-radius:50%;background-color:#e8e8e8;display:flex;align-items:center;justify-content:center;color:#787774;font-size:.9rem;font-weight:500;border:3px solid #ffffff;box-shadow:0 2px 8px #0000001a;overflow:hidden}.profile-image-placeholder img{width:100%;height:100%;object-fit:cover;object-position:top}.profile-info{text-align:center}.profile-name{font-size:1.5rem;font-weight:600;margin:0 0 8px;color:#37352f}.profile-title{font-size:1rem;color:#787774;margin:0 0 16px;font-weight:500}.profile-description{font-size:.9rem;line-height:1.5;color:#37352f;margin:0}.sidebar-content{border-top:1px solid #e8e8e8;padding-top:32px}.career-info h3{font-size:1.1rem;font-weight:600;margin:0 0 20px;color:#37352f}.career-item{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #f0f0f0}.career-item:last-child{border-bottom:none;margin-bottom:0}.career-company{font-size:1rem;font-weight:600;color:#37352f;margin-bottom:4px}.career-period{font-size:.9rem;color:#787774;margin-bottom:4px}.career-note{font-size:.65rem;color:#787774;font-style:italic}.contact-info h3{font-size:1.1rem;font-weight:600;margin:0 0 20px;color:#37352f}.contact-item{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:.9rem;color:#37352f}.contact-icon{font-size:1rem;width:20px;text-align:center}.contact-link{color:#2e75cc;text-decoration:none;font-weight:500}.contact-link:hover{text-decoration:underline}@media (max-width: 1024px){.sidebar{width:240px;padding:32px 20px}.profile-image-placeholder{width:100px;height:100px;font-size:.8rem}.profile-name{font-size:1.3rem}}@media (max-width: 768px){.sidebar{position:static;width:100%;height:auto;padding:24px 20px;border-right:none;border-bottom:1px solid #e8e8e8}.profile-image-placeholder{width:80px;height:80px;font-size:.7rem}.profile-name{font-size:1.2rem}.sidebar-content{padding-top:24px}}.layout{min-height:100vh;background-color:#fff}.main-content{margin-left:280px;margin-top:60px;min-height:calc(100vh - 60px);padding:80px 40px 40px;background-color:#fff}@media (max-width: 1024px){.main-content{margin-left:240px;padding:32px}}@media (max-width: 768px){.main-content{margin-left:0;margin-top:0;padding:24px 20px}}*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;color:#37352f}#root{min-height:100vh}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.home-page{max-width:1000px;margin:0 auto;padding:0 20px}.welcome-section{margin-bottom:80px;text-align:center}.welcome-title{font-size:2.5rem;font-weight:700;margin:0 0 16px;color:#37352f;line-height:1.2}.welcome-subtitle{font-size:1.25rem;color:#787774;margin:0;font-weight:400}.intro-text{font-size:1.1rem;color:#555;font-weight:400;line-height:1.6;max-width:600px;margin:16px auto 0}.content-section{margin-bottom:80px}.section-title{font-size:1.75rem;font-weight:600;margin:0 0 32px;color:#37352f;padding-bottom:8px;border-bottom:2px solid #e8e8e8;display:flex;align-items:center;gap:8px}.link-icon{font-size:1.5rem}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.info-item{background-color:#fafafa;padding:24px;border-radius:12px;border:1px solid #e8e8e8;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}.info-icon{font-size:2rem;margin-bottom:4px}.info-label{font-size:.9rem;color:#787774;margin-bottom:4px}.info-value{font-size:1.1rem;color:#37352f;font-weight:500;line-height:1.4}.info-value-sub{font-size:.8rem}.about-text{font-size:1.1rem;line-height:1.7;margin:0 0 32px;color:#37352f}.key-points{display:grid;gap:24px}.point{display:flex;align-items:flex-start;gap:16px;padding:24px;background-color:#fafafa;border-radius:12px;border:1px solid #e8e8e8}.point-icon{font-size:2rem;flex-shrink:0}.point-content h3{font-size:1.1rem;font-weight:600;margin:0 0 8px;color:#37352f}.point-content p{font-size:.95rem;line-height:1.5;color:#787774;margin:0}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px}.skill-category{background-color:#fafafa;padding:24px;border-radius:12px;border:1px solid #e8e8e8}.category-title{font-size:1.25rem;font-weight:600;margin:0 0 20px;color:#37352f}.skill-items{display:flex;flex-direction:column;gap:16px}.skill-item{display:flex;flex-direction:column;gap:4px}.skill-name{font-weight:600;color:#37352f;font-size:1rem}.skill-desc{font-size:.9rem;color:#787774;line-height:1.5}.skills-section{background:none;margin-bottom:80px}.skills-box{background:#fcf5e3;border-radius:20px;box-shadow:8px 8px 20px #0000001a;padding:28px 18px;max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:20px}.skills-row{display:flex;align-items:center;gap:20px;margin-bottom:0}.skills-label{min-width:90px;font-weight:600;font-size:1rem;color:#222;display:flex;align-items:center;gap:8px}.skills-icon{width:22px;height:22px;vertical-align:middle}.skills-badges{display:flex;flex-wrap:wrap;gap:8px}.badge{display:inline-block;padding:4px 12px;border-radius:8px;font-size:.92rem;font-weight:500;color:#fff;box-shadow:0 2px 8px #00000012;letter-spacing:.01em;margin-bottom:2px}.badge-ts{background:#4d8ee6}.badge-js{background:#ffe066;color:#222}.badge-py{background:#5a9fd4}.badge-react-dark{background:#111}.badge-gray{background:#444}.badge-blue{background:#4d8ee6}.badge-pink{background:#f24b6a}.badge-dark{background:#232b36}.badge-lightpink{background:#e9a6b2;color:#222}.badge-sky{background:#2ec4f1}.badge-purple{background:#c44ec4}.badge-green{background:#1eae6b}.badge-yellow{background:#ffb300;color:#222}.badge-green2{background:#3ecf8e}.badge-orange{background:#f90;color:#222}.badge-black{background:#111}.badge-blue2{background:#217ee6}@media (max-width: 900px){.skills-box{padding:16px 4px}.skills-label{min-width:70px;font-size:.92rem}.skills-row{gap:10px}}@media (max-width: 600px){.skills-section{padding:0 0 20px;margin:0}.skills-box{padding:8px 2px;gap:10px}.skills-row{flex-direction:column;align-items:flex-start;gap:6px}.skills-label{min-width:0;font-size:.85rem}.skills-badges{gap:6px}.badge{font-size:.85rem;padding:3px 8px}}@media (max-width: 768px){.home-page{padding:0 16px}.projects-grid{grid-template-columns:1fr;gap:24px}.welcome-section,.content-section,.projects-section{margin-bottom:60px}.welcome-title{font-size:2rem}.welcome-subtitle{font-size:1.1rem}.section-title{font-size:1.5rem}.point{flex-direction:column;text-align:center;gap:12px}.skills-grid{grid-template-columns:1fr;gap:24px}.info-grid{grid-template-columns:repeat(2,1fr);gap:16px}.info-item{padding:16px}}@media (max-width: 480px){.welcome-title{font-size:1.75rem}.section-title{font-size:1.3rem}.point{padding:20px}.info-grid{grid-template-columns:1fr}.info-item{padding:20px}}.projects-section{margin-bottom:80px}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:32px;margin-top:32px}.project-card{background-color:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:32px;transition:all .2s ease;box-shadow:0 2px 8px #0000000d}.project-card:hover{box-shadow:0 8px 24px #0000001f;transform:translateY(-4px)}.project-card .project-header{margin-bottom:20px}.project-card .project-title{font-size:1.5rem;font-weight:600;margin:0 0 12px;color:#37352f;line-height:1.3}.project-card .project-meta{display:flex;gap:16px;margin-bottom:12px;flex-wrap:wrap}.project-card .project-period{background-color:#e8f4fd;color:#2e75cc;padding:4px 12px;border-radius:16px;font-size:.85rem;font-weight:500}.project-card .project-role{background-color:#f0f8f0;color:#1eae6b;padding:4px 12px;border-radius:16px;font-size:.85rem;font-weight:500}.project-card .project-solo{background-color:#fff3cd;color:#856404;padding:4px 12px;border-radius:16px;font-size:.85rem;font-weight:500}.project-card .project-tags{display:flex;gap:8px;flex-wrap:wrap}.project-card .tag{background-color:#f1f1ef;color:#787774;padding:4px 12px;border-radius:16px;font-size:.85rem;font-weight:500}.project-card .project-description{font-size:1rem;line-height:1.6;color:#37352f;margin:0 0 24px}.project-card .project-tech-stack{margin-bottom:24px}.project-card .project-tech-stack h4{font-size:1rem;font-weight:600;margin:0 0 16px;color:#37352f}.project-card .tech-categories{display:flex;flex-direction:column;gap:12px}.project-card .tech-category{display:flex;align-items:flex-start;gap:12px}.project-card .tech-label{font-size:.9rem;font-weight:600;color:#787774;min-width:80px;flex-shrink:0}.project-card .tech-items{display:flex;flex-wrap:wrap;gap:6px}.project-card .tech-item{background-color:#f8f9fa;color:#495057;padding:3px 8px;border-radius:12px;font-size:.8rem;font-weight:500;border:1px solid #e9ecef}.project-card .project-features h4{font-size:1rem;font-weight:600;margin:0 0 12px;color:#37352f}.project-card .project-features ul{margin:0 0 24px;padding-left:20px}.project-card .project-features li{margin-bottom:8px;color:#37352f;font-size:.95rem;line-height:1.5}.project-card .project-links{display:flex;gap:16px}.project-card .project-link{color:#7a7a7a;text-decoration:none;font-weight:500;font-size:.95rem;padding:10px 20px;border:2px solid #d4d4d4;border-radius:8px;transition:all .2s ease;background-color:transparent}.project-card .project-link:hover{background-color:#111;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #2e75cc4d}@media (max-width: 768px){.project-card{padding:24px}.project-card .project-title{font-size:1.3rem}.project-card .project-meta,.project-card .tech-category{flex-direction:column;gap:8px}.project-card .tech-label{min-width:auto}.project-card .project-links{flex-direction:column;gap:12px}.project-card .project-link{text-align:center}}.portfolio-page{max-width:1000px;margin:0 auto}.portfolio-header{margin-bottom:60px;text-align:center}.portfolio-title{font-size:2.5rem;font-weight:700;margin:0 0 16px;color:#37352f;line-height:1.2}.portfolio-subtitle{font-size:1.25rem;color:#787774;margin:0;font-weight:400}.projects-section{margin-bottom:60px}.projects-grid{display:grid;gap:32px}@media (max-width: 768px){.portfolio-title{font-size:2rem}.portfolio-subtitle{font-size:1.1rem}}@media (max-width: 480px){.portfolio-title{font-size:1.75rem}}