:root{font-family:Pretendard,SUIT,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#182431;background:#f2f5fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-soft: #f4f7fb;--bg-white: #ffffff;--line: #d6dee9;--line-strong: #c2cedd;--text-main: #1a2a3a;--text-subtle: #4f6074;--brand: #123b6f;--brand-soft: #e7eef9;--accent: #0d4b8f}*{box-sizing:border-box}body{margin:0;min-width:320px;color:var(--text-main);background:radial-gradient(circle at 5% 0%,#d9e8f9,transparent 40%),radial-gradient(circle at 100% 10%,#e9eef7,transparent 35%),var(--bg-soft)}a{color:inherit;text-decoration:none}h1,h2,h3,h4,p,ul{margin:0}#root{min-height:100vh}.app-shell{min-height:100vh;display:flex;flex-direction:column}.content-wrap{width:min(1080px,calc(100% - 2rem));margin:0 auto}.page-container{flex:1;width:min(1080px,calc(100% - 2rem));margin:0 auto;padding:1.25rem 0 2.5rem}.page{display:grid;gap:1.25rem}.navbar{position:sticky;top:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:color-mix(in srgb,var(--bg-soft) 85%,white);border-bottom:1px solid var(--line)}.navbar-inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}.brand{font-size:1rem;font-weight:800;letter-spacing:.04em;color:var(--brand)}.nav-list{list-style:none;display:flex;gap:.4rem;padding:0}.nav-link{display:inline-flex;padding:.45rem .8rem;border-radius:999px;font-weight:600;color:var(--text-subtle)}.nav-link.active{background:var(--brand-soft);color:var(--brand)}.intro-panel{background:var(--bg-white);border:1px solid var(--line);border-radius:18px;padding:1.3rem;display:grid;gap:.75rem}.intro-panel h1,.intro-panel h2{font-size:clamp(1.2rem,1.8vw,1.7rem);line-height:1.28}.home-intro{background:#f7f9fc;border:1px solid #dbe3ee;border-radius:18px;padding:1.1rem;display:grid;gap:1rem}.intro-top{display:grid;gap:.55rem;border-bottom:1px solid #d4deea;padding-bottom:.9rem}.intro-eyebrow{color:#5a6f87;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.hero-heading{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem;font-size:clamp(1.55rem,3vw,2.3rem);font-weight:800;line-height:1.18;color:#10263f}.hero-divider{color:#70839a;font-weight:600}.hero-role{color:#1c4c86}.keyword-row{display:flex;flex-wrap:wrap;gap:.45rem}.keyword-tag{border:1px solid #cfdaea;border-radius:6px;padding:.2rem .55rem;background:#edf3fb;color:#274a70;font-size:.78rem;font-weight:600}.hero-subcopy{color:#425771;max-width:900px;font-size:.98rem}.intro-body{display:grid;grid-template-columns:minmax(250px,300px) 1fr;gap:1rem;align-items:stretch}.intro-aside{background:#f5f8fc;border:1px solid #d6e0ec;border-radius:10px;padding:.7rem;display:grid;grid-template-rows:auto auto 1fr;gap:.65rem;height:100%}.profile-photo{border-radius:8px;overflow:hidden;border:1px solid #ccd7e5;aspect-ratio:3 / 4;background:#d7e1ec}.profile-photo img{width:100%;height:100%;object-fit:cover;display:block}.quick-facts{display:grid;gap:.3rem}.quick-fact-row{display:grid;grid-template-columns:86px 1fr;gap:.3rem;font-size:.83rem;border-bottom:1px solid #d6e0ec;padding-bottom:.25rem}.quick-fact-row span{color:#54667b}.quick-fact-row strong{color:#1c2b3d;font-weight:700;white-space:normal;word-break:keep-all;line-height:1.35}.intro-main{display:grid;gap:.7rem}.contact-cta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.contact-cta{border:1px solid #cfdced;background:#edf3fb;border-radius:8px;padding:.55rem .65rem;display:grid;gap:.25rem;min-height:76px}.contact-label{display:inline-flex;align-items:center;gap:.35rem;font-weight:800;color:#1e4b82;font-size:.96rem}.contact-icon{width:1.1rem;text-align:center}.contact-link{font-size:.86rem;color:#273b53;white-space:normal;overflow-wrap:anywhere;line-height:1.3}.declaration-block{background:#fff;border:1px solid #d3deeb;border-radius:10px;padding:.75rem .85rem;display:grid;gap:.35rem}.declaration-block h2{font-size:1.2rem;color:#11263d}.declaration-block p{color:#425873}.strength-section{border:1px solid #d3deeb;border-radius:10px;background:#f9fbfe;padding:.7rem;display:grid;gap:.65rem}.strength-title{font-size:.76rem;letter-spacing:.08em;font-weight:700;color:#4f6680;text-transform:uppercase}.strength-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.strength-block{border:1px solid #d1ddeb;border-radius:8px;background:#fff;padding:.62rem .7rem;display:grid;gap:.35rem}.strength-block h3{font-size:1rem;color:#1a3f6e}.strength-block p{font-size:.88rem;color:#445a75}.strength-block ul{margin:0;padding-left:1rem;display:grid;gap:.18rem}.strength-block li{font-size:.81rem;color:#4f647d;line-height:1.35}.section-heading{display:grid;gap:.35rem}.section-heading h2{font-size:clamp(1.12rem,1.5vw,1.55rem)}.section-eyebrow{font-size:.78rem;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.08em}.section-subtitle{color:var(--text-subtle)}.section-stack{display:grid;gap:.9rem}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}.project-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg-white);transition:transform .18s ease,box-shadow .18s ease}.project-card:hover{transform:translateY(-2px);box-shadow:0 10px 20px #22313f14}.project-card-link{display:grid;height:100%}.project-thumb{aspect-ratio:16 / 9;background:linear-gradient(120deg,#d8e8f5,#e6f5f9)}.project-thumb img{width:100%;height:100%;object-fit:cover;display:block}.project-card-body{padding:.95rem;display:grid;gap:.5rem}.project-period{color:var(--text-subtle);font-size:.88rem}.project-summary{color:var(--text-subtle)}.project-impact{font-weight:700;color:#1b4f86}.tech-badge{display:inline-flex;padding:.25rem .65rem;border-radius:999px;font-size:.8rem;background:#eaf1fb;color:#2d4663;border:1px solid #d2deed}.badge-row{display:flex;flex-wrap:wrap;gap:.4rem}.keyword-chip-row{display:flex;flex-wrap:wrap;gap:.35rem}.keyword-chip{display:inline-flex;padding:.16rem .48rem;border-radius:6px;border:1px solid #cfdaea;background:#f2f7fd;font-size:.74rem;color:#3d5876}.project-hero{background:var(--bg-white);border:1px solid var(--line);border-radius:18px;padding:1rem;display:grid;grid-template-columns:1.1fr 1fr;gap:1rem}.project-hero-media{min-height:220px;border-radius:12px;overflow:hidden;background:linear-gradient(120deg,#d8e6f7,#e8eff9)}.project-hero-media img{width:100%;height:100%;object-fit:cover;display:block}.project-hero-content{display:grid;gap:.65rem}.hero-label{width:fit-content;font-size:.75rem;color:#1f4f8b;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:#eaf2fd;border:1px solid #d4e1f2}.hero-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.metric-chip{background:#f5f9ff;border:1px solid #d4e1f0;border-radius:10px;padding:.55rem}.metric-chip p{font-size:.82rem;color:var(--text-subtle)}.metric-chip strong{font-size:.95rem}.hero-actions,.link-row{display:flex;flex-wrap:wrap;gap:.55rem}.button-link{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid transparent;padding:.48rem .85rem;font-weight:700;font-size:.9rem}.button-link.primary{background:var(--brand);color:#fff}.button-link.ghost{border-color:var(--line-strong);color:var(--text-main);background:#fff}.panel,.detail-section,.detail-media,.not-found,.detail-header{background:var(--bg-white);border:1px solid var(--line);border-radius:16px;padding:1rem;display:grid;gap:.7rem}.skills-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}.skills-group{border:1px solid var(--line);border-radius:12px;padding:.8rem;background:#fbfdff;display:grid;gap:.6rem}.detail-role{font-weight:700;color:#2b4666}.detail-sections{display:grid;gap:.9rem}.detail-media-frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#e3ebf7;aspect-ratio:16 / 9}.detail-media-image,.detail-media-video,.detail-media-embed{width:100%;height:100%;display:block;border:0}.detail-media-image{object-fit:cover}.detail-media-video{object-fit:contain;background:#0e1826}.detail-media-caption{color:var(--text-subtle);font-size:.88rem}.section-tldr{background:linear-gradient(145deg,#f7fbff,#fef9f1)}.bullet-list{padding-left:1.1rem;display:grid;gap:.4rem}.bullet-list.compact{gap:.25rem}.bullet-inline-link{color:#1b4f86;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}.statement-text{color:#2b4260;line-height:1.6}.metrics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}.metric-card{border:1px solid var(--line);border-radius:12px;padding:.75rem;display:grid;gap:.3rem;background:#fafcff}.metric-label{color:var(--text-subtle);font-size:.84rem}.metric-value{display:flex;align-items:baseline;gap:.45rem;font-size:.98rem}.metric-arrow{color:#7a8da5}.metric-note{color:#4f647c;font-size:.82rem}.tag-list{display:flex;flex-wrap:wrap;gap:.45rem}.tag-pill{display:inline-flex;padding:.22rem .58rem;border-radius:7px;border:1px solid #d2ddeb;background:#f7fafe;color:#334e6c;font-size:.8rem}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}.gallery-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0;background:#fcfeff;display:grid}.gallery-media{width:100%;height:160px;object-fit:cover;display:block;background:#0e1826}.gallery-media-embed{border:0}.gallery-item figcaption{padding:.55rem;font-size:.84rem;color:var(--text-subtle)}.gallery-empty{border:1px dashed #b9c8dc;border-radius:12px;padding:1rem;color:var(--text-subtle)}.image-placeholder{width:100%;min-height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#eaf1f9,#d7e1ee);color:#546b84;font-weight:700;font-size:.85rem}.footer{border-top:1px solid var(--line);margin-top:1.2rem}.footer-inner{padding:.9rem 0;display:flex;justify-content:space-between;gap:.6rem;color:var(--text-subtle);font-size:.9rem}@media(max-width:900px){.intro-body{grid-template-columns:1fr}.intro-aside{max-width:320px}.contact-cta-grid,.strength-grid,.project-grid,.project-hero,.metrics-grid,.gallery-grid,.skills-grid,.hero-metrics{grid-template-columns:1fr}.footer-inner{flex-direction:column}}
