:root{color-scheme:light;--paper:#f1f4f7;--ink:#17212b;--muted:#586574;--blue:#1769e8;--line:#d5dde5;--body:1rem;--small:.8125rem;--section:clamp(2rem,3.6vw,3.25rem)}
*{box-sizing:border-box}
.hero>*,.career>*,.career li>*,.contact-grid>*,.background>*{min-width:0}
html{scroll-behavior:smooth;scroll-padding-top:2rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{overflow-wrap:break-word;margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,'Gothic A1',sans-serif;font-size:var(--body);line-height:1.6}
html[lang=ko] body{font-family:'Gothic A1',Manrope,sans-serif;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none;text-underline-offset:.3em;text-decoration-thickness:from-font}
button,textarea{font:inherit}
button,a{touch-action:manipulation}
button{cursor:pointer;border:0;color:inherit;background:none}
a:focus-visible,button:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
img{display:block;max-width:100%;height:auto;object-fit:contain}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500}
h2{font-size:var(--section);line-height:1.25;letter-spacing:-.035em;text-wrap:balance}
html[lang=en] h2{font-family:Outfit,sans-serif}
p{color:var(--muted)}
.wrap{width:min(1248px,calc(100% - 96px));margin-inline:auto}
.eyebrow{font-family:Manrope,sans-serif;font-size:.75rem;line-height:1.4;letter-spacing:.06em;font-weight:600;color:var(--muted)}
.arrow{width:22px;height:22px;flex:none;transition:transform .18s ease}
.copy-icon{width:18px;height:18px;flex:none}
.brand{font-family:Outfit,sans-serif;font-size:2rem;line-height:1.2;letter-spacing:-.045em;font-weight:800}
header{min-height:104px;display:flex;align-items:center;gap:36px;border-bottom:1px solid var(--line)}
header .brand{margin-right:auto}
header nav{display:flex;gap:32px}
header nav a{font-size:var(--small);color:var(--muted)}
header a{min-height:44px;display:inline-flex;align-items:center}
header nav a:hover{color:var(--ink);text-decoration:underline}
.languages{display:flex;align-items:center;gap:0;font-family:Manrope,sans-serif;font-size:.75rem}
.languages a{min-width:44px;justify-content:center}
.languages span{color:var(--muted)}
.languages [aria-current]{font-weight:700;color:var(--blue);text-decoration:underline}
.nav-contact{gap:20px;font-size:var(--small);font-weight:600}
.hero{display:grid;grid-template-columns:1fr 440px;align-items:center;gap:80px;padding:48px 0 64px}
.intro .eyebrow{margin-bottom:36px;color:var(--blue)}
.hello{font-size:1.25rem;font-weight:500;color:var(--ink);margin-bottom:4px}
h1{font-family:Outfit,sans-serif;font-size:clamp(5rem,8.8vw,8rem);font-weight:700;letter-spacing:-.065em;line-height:1.08;margin-left:-.04em}
.name-dot{color:var(--blue)}
.intro-copy{font-size:1.25rem;line-height:1.7;margin-top:30px;max-width:32rem}
.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero .actions{margin-top:36px}
.button,.copy,.social-link,.kakao-link{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:.875rem;font-weight:600}
.button{max-width:100%;line-height:1.5;padding:14px 22px;border-radius:6px}
.primary{background:var(--blue);color:white}
.primary:hover{background:#1256c3}
.copy{padding:8px 0;font-weight:500}
.copy:hover,.social-link:hover,.kakao-link:hover{text-decoration:underline}
.explore{display:inline-flex;align-items:center;gap:28px;min-height:44px;margin-top:28px;font-size:var(--small);color:var(--muted)}
.explore:hover{color:var(--blue)}
.portrait-panel{position:relative;align-self:end;background:#e4ebf2;overflow:hidden;isolation:isolate}
.portrait{width:100%;height:auto;padding:24px 16px 0}
.portrait-caption{position:absolute;right:20px;bottom:20px;padding:8px 12px;background:#f1f4f7;font-family:Manrope,sans-serif;font-size:.75rem;line-height:1.4;color:var(--ink)}
.work{padding:56px 0 96px;border-top:1px solid var(--line)}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:40px}
.section-heading h2{margin-top:18px}
.section-heading>p{max-width:25rem;font-size:1rem;line-height:1.7}
.projects{display:grid;gap:20px}
.project{display:grid;grid-template-columns:40% 1fr;gap:48px;padding:40px 48px;border-radius:8px}
.project.MIRSONA{background:#172334;color:#fff}
.project.kyaa{background:#f6d5e6;color:#472039}
.project-visual{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;min-height:200px;padding-bottom:28px}
.project-index{font-family:Manrope,sans-serif;font-size:.75rem;line-height:1.4;letter-spacing:.06em;font-weight:600}
.MIRSONA .project-index{color:#b5c5d9}
.project-visual img{width:290px;max-width:100%;height:60px;object-position:left center}
.kyaa .project-visual img{width:200px;height:100px}
.project-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.project h3{font-size:1.75rem;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.project.kyaa h3{font-family:Manrope,sans-serif;font-weight:700}
.project-copy>p{font-size:1.125rem;line-height:1.65;margin-top:18px;max-width:30rem}
.MIRSONA .project-copy>p,.MIRSONA .project-meta{color:#c5d2e2}
.kyaa .project-copy>p,.kyaa .project-meta{color:#68304e}
.project-meta{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;padding-top:28px;margin-top:auto;font-size:var(--small)}
.project-destination{display:inline-flex;align-items:center;gap:12px;font-family:Manrope,sans-serif;white-space:nowrap;color:inherit}
.project:hover .arrow,.nav-contact:hover .arrow,.button:hover .arrow,.email:hover .arrow{transform:translate(2px,-2px)}
.project:hover .project-destination{text-decoration:underline}
.project:focus-visible{outline-offset:6px}
.recent{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:24px 0 0}
.recent .eyebrow{padding-top:5px}
.recent>p:last-child{font-size:.875rem;color:var(--ink)}
.journey{background:white;padding:96px 0}
.career{display:grid;grid-template-columns:40% 1fr;gap:48px}
.career h2{margin-top:20px}
.journey-intro{font-size:1.0625rem;margin-top:28px;max-width:26rem;line-height:1.7}
.career ol{margin:0;padding:0;list-style:none}
.career li{display:grid;grid-template-columns:144px 1fr;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.career li:first-child{padding-top:0}
.career li img{width:144px;height:36px;object-position:left center}
.career li:last-child img{width:100px}
.career h3{font-size:1.0625rem;line-height:1.5;font-weight:600}
.career li p{font-size:var(--small);margin-top:6px;font-variant-numeric:tabular-nums}
html[lang=ko] .career li:not(:first-child) p{font-family:Manrope,sans-serif}
.background{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-top:48px;margin-top:64px;border-top:1px solid var(--line)}
.background .eyebrow{margin-bottom:28px}
.education>img{width:180px;height:49px;object-position:left center;margin-bottom:24px}
.education>p:not(.eyebrow){font-size:.875rem;line-height:1.65;margin-top:10px}
.education>p:last-child{color:var(--ink);font-weight:500}
.recognition-award{display:flex;gap:24px;align-items:center}
.recognition-award>img{width:48px;height:60px}
.recognition h3{font-family:Manrope,sans-serif;font-size:1.125rem;font-weight:600}
.recognition-award p{font-size:.875rem;line-height:1.65;margin-top:5px}
.recognition .team{font-size:var(--small)}
.recognition-program{font-size:var(--small);line-height:1.7;margin-top:24px;max-width:32rem}
.contact{padding:96px 0;background:#e7eef6;border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:1fr 296px;gap:96px}
.contact h2{margin-top:20px;font-size:clamp(2.25rem,4.4vw,4rem);line-height:1.2}
.contact-description{font-size:1.0625rem;line-height:1.7;margin-top:24px;max-width:34rem}
.email{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:600px;font-family:Manrope,sans-serif;font-size:clamp(1.125rem,2.1vw,1.875rem);font-weight:500;line-height:1.4;padding:22px 0;border-bottom:1px solid #aabacb;margin-top:20px}
.email>span{min-width:0;overflow-wrap:anywhere}
.email .arrow{color:var(--blue)}
.email:hover>span{text-decoration:underline}
.contact .actions{margin-top:20px;gap:40px}
.social-link{font-family:Manrope,sans-serif;font-weight:500}
.social-link .arrow{width:18px;height:18px}
.kakao{padding-top:12px}
.kakao h3{font-size:1.125rem;line-height:1.5;font-weight:600}
.kakao p{font-size:var(--small);line-height:1.7;margin-top:8px}
.kakao img{width:180px;height:180px;border-radius:10px;margin:24px 0 12px}
.kakao-link{justify-content:flex-start}
.kakao-link .arrow{width:18px;height:18px}
footer{display:flex;align-items:center;gap:40px;min-height:116px;font-family:Manrope,sans-serif}
footer .brand{margin-right:auto}
footer span,footer>a:last-child{font-size:var(--small);color:var(--muted)}
footer>a{display:inline-flex;align-items:center;min-height:44px}
footer>a:last-child:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;top:-100px;padding:12px;background:white;z-index:10}
.skip:focus{top:0}
#copy-status:not(:empty){position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 24px;background:var(--ink);color:white;border-radius:8px;z-index:20;max-width:90vw}
dialog{border:1px solid var(--line);border-radius:8px;padding:28px;max-width:600px;width:calc(100% - 32px)}
dialog::backdrop{background:#17212b80}
dialog h2{font-size:1.5rem;line-height:1.4;margin-bottom:12px}
dialog textarea{width:100%;height:210px;margin:16px 0;padding:12px;font-size:1rem}
dialog form{margin:0}
@media(max-width:1100px){
 .wrap{width:calc(100% - 64px)}
 header{gap:24px}header nav{gap:20px}
 .hero{grid-template-columns:1.15fr 1fr;gap:32px}.intro .eyebrow{margin-bottom:24px}.intro-copy{font-size:1.0625rem}.hero .actions{gap:20px}.button{padding-inline:16px}
 .project{padding:32px;gap:32px;grid-template-columns:35% 1fr}
 .career{grid-template-columns:35% 1fr;gap:32px}.career li{grid-template-columns:112px 1fr;gap:24px}.career li img{width:112px}
 .contact-grid{gap:48px;grid-template-columns:1fr 260px}
}
@media(max-width:800px){
 header nav{display:none}
 .hero{grid-template-columns:1.15fr 1fr;gap:24px;padding-top:48px}
 .hello{font-size:1rem}h1{font-size:5rem}.intro-copy{font-size:1rem}.intro-copy br{display:none}
 .hero .actions{flex-direction:column;align-items:flex-start;gap:8px;margin-top:24px}.explore{margin-top:12px}
 .portrait{padding:16px 0 0}.portrait-caption{right:12px;bottom:12px;font-size:.75rem}
 .section-heading{display:block}.section-heading>p{margin-top:20px;max-width:34rem}
 .project{grid-template-columns:1fr 1.3fr;gap:28px}.project-visual{min-height:0;justify-content:flex-start;gap:36px;padding:0}.project-copy>p{font-size:1rem}.project-meta{display:block}.project-destination{display:flex;margin-top:16px}
 .career{grid-template-columns:1fr;gap:36px}.career li{grid-template-columns:144px 1fr}.career li img{width:144px}.career li:first-child{padding-top:24px;border-top:1px solid var(--line)}
 .background{gap:32px}.contact-grid{grid-template-columns:1fr 220px;gap:32px}
 .contact-description{font-size:1rem}
}
@media(max-width:600px){
 .wrap{width:calc(100% - 40px)}
 header{min-height:80px;gap:12px}header .brand{font-size:1.75rem}.nav-contact{display:none}
 .hero{grid-template-columns:1fr;gap:32px;padding:36px 0 48px}
 .intro .eyebrow{font-size:.75rem;margin-bottom:24px}.hello{font-size:1.0625rem}h1{font-size:min(5.5rem,24vw)}
 .intro-copy{font-size:1.0625rem;line-height:1.65;margin-top:20px;max-width:27rem}.intro-copy br{display:none}
 .hero .actions{flex-direction:row;gap:20px;margin-top:24px}.button,.copy{font-size:.8125rem}.button{gap:8px;padding:12px 16px}.button .arrow{width:18px;height:18px}
 .explore{margin-top:12px}
 .portrait-panel{width:240px;justify-self:end;margin-right:20px}.portrait-caption{font-size:.75rem;padding:6px 8px}
 .work{padding:40px 0 48px}.section-heading{margin-bottom:28px}.section-heading h2{margin-top:16px}.section-heading>p{font-size:1rem;margin-top:18px}
 .project{display:block;padding:24px;border-radius:6px}.project-visual{gap:28px;margin-bottom:32px}.project-visual img{height:40px;width:220px}.kyaa .project-visual img{height:70px;width:150px}
 .project h3{font-size:1.5rem}.project-copy>p{margin-top:12px;font-size:1rem}.project-meta{padding-top:24px;font-size:.8125rem}.project-destination{justify-content:space-between;margin-top:14px}
 .recent{display:block;padding-top:24px}.recent>p:last-child{margin-top:12px;font-size:.8125rem}
 .journey{padding:48px 0}.journey-intro{font-size:1rem;margin-top:20px}.career{gap:28px}
 .career li{grid-template-columns:100px 1fr;gap:20px;padding:22px 0}.career li img{width:100px;height:30px}.career li:last-child img{width:80px}.career h3{font-size:.9375rem}.career li p{font-size:.75rem;line-height:1.5}
 .background{grid-template-columns:1fr;gap:36px;padding-top:32px;margin-top:36px}.background .eyebrow{margin-bottom:24px}.recognition{padding-top:32px;border-top:1px solid var(--line)}
 .contact{padding:48px 0}.contact-grid{grid-template-columns:1fr;gap:40px}.contact h2{font-size:2.25rem;letter-spacing:-.04em}.contact-description{font-size:1rem;margin-top:20px}.email{font-size:1.125rem;margin-top:16px;gap:12px;padding:20px 0}.email .arrow{width:20px;height:20px}.contact .actions{gap:32px;margin-top:14px}
 .kakao{border-top:1px solid #bdcad8;padding-top:28px}.kakao img{width:160px;height:160px}.kakao h3{font-size:1.0625rem}
 footer{flex-wrap:wrap;gap:12px 24px;padding:24px 0;min-height:0}footer .brand{width:100%;margin:0}footer>a:last-child{margin-left:auto}footer span,footer>a:last-child{font-size:.75rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.arrow{transition:none}}