:root{--primary:#3b82f6;--primary-dark:#1e40af;--secondary:#8b5cf6;--text:#1f2937;--text-light:#6b7280;--bg:#fff;--bg-light:#f9fafb;--border:#e5e7eb;--shadow:0 1px 3px #0000001a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}@media (prefers-color-scheme:dark){:root{--text:#f3f4f6;--text-light:#d1d5db;--bg:#111827;--bg-light:#1f2937;--border:#374151}}html,body{height:100%}body{color:var(--text);background-color:var(--bg);margin:0}#root{height:100%}h1,h2,h3{color:var(--text)}p{color:var(--text-light)}*{box-sizing:border-box;margin:0;padding:0}:root{--primary:#3b82f6;--primary-dark:#1e40af;--secondary:#8b5cf6;--text:#1f2937;--text-light:#6b7280;--bg:#fff;--bg-light:#f9fafb;--border:#e5e7eb;--shadow:0 1px 3px #0000001a}html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text);background-color:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.app-container{flex-direction:column;min-height:100vh;display:flex}.navbar{background-color:var(--bg);border-bottom:1px solid var(--border);box-shadow:var(--shadow);z-index:100;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex;position:sticky;top:0}.nav-brand .logo{color:var(--primary);cursor:pointer;padding:0;font-size:1.5rem;font-weight:700;transition:color .3s}.nav-brand .logo:hover{color:var(--primary-dark)}.nav-links{gap:2rem;list-style:none;display:flex}.nav-links button{color:var(--text);cursor:pointer;background:0 0;border:none;padding:0;font-size:1rem;font-weight:500;transition:color .3s}.nav-links button:hover{color:var(--primary)}.main-content{flex:1;width:100%}.section{justify-content:center;align-items:center;min-height:100vh;padding:3rem 2rem;scroll-margin-top:80px;display:flex}.section-container{width:100%;max-width:1000px}#home{text-align:center;background:linear-gradient(135deg,#3b82f60d,#8b5cf60d)}.hero-section{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;display:flex}.hero-section h1{background:linear-gradient(135deg, var(--primary), var(--secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:3.5rem;font-weight:700}.tagline{color:var(--text-light);font-size:1.5rem}.cta-buttons{justify-content:center;gap:1rem;margin-top:1rem;display:flex}.btn{cursor:pointer;border:none;border-radius:.5rem;padding:.75rem 2rem;font-size:1rem;font-weight:600;text-decoration:none;transition:all .3s}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--primary-dark);box-shadow:0 4px 12px #3b82f666}.btn-secondary{color:var(--primary);border:2px solid var(--primary);background-color:#0000}.btn-secondary:hover{background-color:var(--primary);color:#fff}#about{background-color:var(--bg-light)}#about h2,#skills h2,#projects h2,#contact h2{color:var(--text);text-align:center;margin-bottom:2rem;font-size:2.5rem}.about-section .section-container{text-align:center}.sns-row{flex-wrap:wrap;justify-content:center;gap:.75rem;margin:1rem 0 1.5rem;display:flex}.sns-btn{border:1px solid #0000;border-radius:999px;align-items:center;gap:.45rem;padding:.55rem .9rem;font-size:.92rem;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s;display:inline-flex}.sns-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px #0000001f}.btn-x{color:#fff;background:#111827}.btn-github{color:#111827;background:#fff;border-color:#d1d5db}.about-content{justify-content:center;align-items:center;width:100%;display:flex}.about-text{flex-direction:column;gap:1rem;display:flex}.about-text p{color:var(--text-light);font-size:1.1rem;line-height:1.8}.about-info{flex-direction:column;gap:1rem;width:min(100%,720px);display:flex}.info-card{border-left:4px solid var(--primary);box-shadow:var(--shadow);background-color:#fff;border-radius:.5rem;padding:1.5rem}.info-card h3{color:var(--primary);margin-bottom:.5rem}#skills{background-color:#fff}.skills-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;display:grid}.skill-category{background-color:var(--bg-light);border-top:4px solid var(--primary);box-shadow:var(--shadow);text-align:center;border-radius:.5rem;padding:1.5rem}.skill-category h3{color:var(--primary);margin-bottom:1rem;font-size:1.3rem}.skill-tags{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.skill-tag{background-color:var(--primary);color:#fff;border-radius:1rem;padding:.4rem .8rem;font-size:.9rem;font-weight:500;display:inline-block}#projects{background-color:var(--bg-light)}.projects-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));justify-items:center;gap:2rem;display:grid}.project-card{border:1px solid var(--border);box-shadow:var(--shadow);text-align:center;background-color:#fff;border-radius:.5rem;flex-direction:column;align-items:center;width:100%;max-width:360px;padding:1.5rem;transition:all .3s;display:flex}.project-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #3b82f61a}.project-card h3{color:var(--primary);margin-bottom:.5rem}.project-card p{color:var(--text-light);margin-bottom:1rem;line-height:1.6}.project-tech{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1rem;display:flex}.tech-badge{background-color:var(--secondary);color:#fff;border-radius:.25rem;padding:.3rem .6rem;font-size:.8rem;display:inline-block}.project-link{color:var(--primary);font-weight:600;text-decoration:none;transition:color .3s;display:inline-block}.project-link:hover{color:var(--primary-dark)}.profile-image{object-fit:cover;border:4px solid var(--primary);aspect-ratio:1;border-radius:50%;width:200px;max-width:100%;height:auto;box-shadow:0 8px 16px #3b82f633}.project-image-wrapper{aspect-ratio:16/9;background-color:var(--bg-light);border-radius:.5rem .5rem 0 0;justify-content:center;align-items:center;width:100%;margin:0 0 1rem;padding:.5rem;display:flex;overflow:hidden}.project-image{object-fit:contain;object-position:center;width:auto;max-width:100%;height:auto;max-height:100%;margin:0 auto;display:block}@media (width<=480px){.project-card{max-width:100%;padding:1rem}.project-image-wrapper{max-width:100%;margin:0 auto .75rem;padding:.35rem}.project-image{object-fit:contain;width:100%;height:auto;max-height:220px}}.project-content{flex-direction:column;align-items:center;gap:.65rem;display:flex}.project-content p{text-align:center}#contact{background-color:#fff}.contact-content{grid-template-columns:1fr 1fr;gap:3rem;display:grid}.contact-info{flex-direction:column;gap:1.5rem;display:flex}.info-item h3{color:var(--primary);margin-bottom:.5rem}.info-item p{color:var(--text-light)}.social-links{gap:1rem;display:flex}.social-links a{color:var(--primary);font-weight:500;text-decoration:none;transition:color .3s}.social-links a:hover{color:var(--primary-dark)}.contact-form{flex-direction:column;gap:1.5rem;display:flex}.form-group{flex-direction:column;gap:.5rem;display:flex}.form-group label{color:var(--text);font-weight:600}.form-group input,.form-group textarea{border:1px solid var(--border);border-radius:.5rem;padding:.75rem;font-family:inherit;font-size:1rem;transition:border-color .3s}.form-group input:focus,.form-group textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #3b82f61a}.form-group textarea{resize:vertical;min-height:150px}.success-message{color:#10b981;text-align:center;font-weight:600}.footer{background-color:var(--bg-light);border-top:1px solid var(--border);text-align:center;color:var(--text-light);margin-top:auto;padding:2rem}@media (width<=768px){.navbar{padding:.85rem 1rem}.nav-brand .logo{font-size:1.15rem}.nav-links{-webkit-overflow-scrolling:touch;gap:.75rem;padding-bottom:.25rem;font-size:.9rem;overflow-x:auto}.nav-links button{white-space:nowrap;font-size:.9rem}.hero-section h1{font-size:2.5rem}.tagline{font-size:1.2rem}.cta-buttons{flex-direction:column}.section{min-height:auto;padding:2rem 1rem}#home{min-height:80vh}.about-content,.contact-content,.projects-grid{grid-template-columns:1fr}.project-card{max-width:480px}.profile-image{width:150px;height:150px}#about h2,#skills h2,#projects h2,#contact h2{font-size:2rem}}@media (width<=480px){.navbar{flex-direction:column;gap:1rem;padding:1rem}.nav-links{flex-wrap:wrap;justify-content:center;gap:.5rem}.btn{padding:.6rem 1.2rem;font-size:.9rem}.profile-image{width:120px;height:120px}.project-card{padding:1rem}.project-image-wrapper{margin:-1rem -1rem .75rem}.section{padding:1.5rem .75rem}.skills-grid{grid-template-columns:1fr}.hero-section h1{font-size:1.6rem}.tagline{font-size:1rem}.sns-row{gap:.5rem;margin-bottom:1rem}.sns-btn{justify-content:center;width:100%;max-width:260px;margin:0 auto}#about h2,#skills h2,#projects h2,#contact h2{margin-bottom:1.5rem;font-size:1.5rem}}