@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&display=swap');
:root{--ink:#000000;--paper:#ffffff;--accent:#0f0f70;--line:#ebebeb}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;font-size:15px;line-height:1.8}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{height:104px;display:flex;align-items:center;justify-content:space-between;padding:0 5.6%;background:var(--paper);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:15px}.brand b{font-family:Georgia,serif;font-weight:400;letter-spacing:-5px;font-size:51px;line-height:1}.brand span{border-left:1px solid #aaa;padding-left:17px;font-size:10px;letter-spacing:2px;max-width:105px;line-height:1.8}nav{display:flex;gap:53px;font-size:11px;letter-spacing:1.7px}nav a{padding:14px 0}nav a:hover,nav a.active{border-bottom:1px solid var(--ink)}nav span{margin-left:17px}.header-phone{font-size:11px;letter-spacing:1px}.menu{display:none}.hero{height:720px;min-height:640px;position:relative;overflow:hidden;background:#000000;color:#fff}.hero-image,.hero-shade{position:absolute;inset:0}.hero-image{background:url('assets/main-0.jpg') center 55%/cover;animation:city 30s ease-in-out infinite alternate;will-change:transform}.hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.79),rgba(0,0,0,.27) 65%,rgba(0,0,0,.2)),linear-gradient(0deg,rgba(0,0,0,.7),transparent 50%)}@keyframes city{from{transform:scale(1)}to{transform:scale(1.055)}}.hero-content{position:relative;padding:83px 8% 0}.eyebrow,.section-label{font-size:10px;letter-spacing:2.4px;font-weight:500}.eyebrow{display:flex;align-items:center;gap:20px}.eyebrow i{height:1px;width:34px;background:var(--accent)}h1,h2,h3,blockquote{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;line-height:1.08}h1{font-size:clamp(43px,4.65vw,76px);letter-spacing:-1.3px;margin:30px 0 34px;max-width:1000px}em{font-weight:400;color:var(--accent)}.hero h1 em{color:#ffffff}.hero-bottom{display:flex;gap:34px;align-items:center}.outline{display:inline-flex;gap:65px;align-items:center;justify-content:space-between;padding:13px 23px;border:1px solid #ffffff70;font-size:10px;letter-spacing:1.7px}.outline:hover{background:#ffffff16}.text-link{font-size:10px;letter-spacing:1.7px}.text-link span{margin-left:35px}.hero-caption{position:absolute;bottom:27px;left:5.6%;right:5.6%;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.8px;border-top:1px solid #ffffff40;padding-top:24px}.hero-caption button{color:#fff;background:none;border:0;font-size:9px;letter-spacing:1px}.vertical{position:absolute;right:28px;top:42%;writing-mode:vertical-rl;font-size:9px;letter-spacing:3px}.section{padding:100px 8%}.intro{display:grid;grid-template-columns:1fr 2fr .3fr;gap:40px;position:relative}.intro h2{margin-top:0;font-size:59px}.intro p{max-width:650px;font-size:16px;line-height:1.95}.intro blockquote{margin:0 0 24px;font-size:24px;line-height:1.5}.intro em,.people em,.page-title em{color:#0f0f70}.seal{justify-self:end;border:1px solid #0f0f70;color:#0f0f70;font-family:Georgia;font-size:19px;line-height:1.4;padding:11px;height:105px;margin-top:8px}.dark-link{display:inline-block;border-bottom:1px solid #a3a3a3;padding:15px 0;font-size:10px;letter-spacing:1.5px;margin-top:20px}.dark-link span{margin-left:65px}.values{padding-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.photo{position:relative;height:590px}.photo img{width:100%;height:100%;object-fit:cover;filter:none}.photo span{position:absolute;left:24px;bottom:24px;color:white;font-size:9px;letter-spacing:2px}.values h2,.mission h2{font-size:66px;margin:20px 0 30px}.values p{line-height:2;color:#4f4f4f}.mission{position:relative;display:grid;grid-template-columns:1fr 2fr;gap:40px;background:var(--accent);color:var(--paper);overflow:hidden}.mission p{font-family:'Cormorant Garamond',Georgia,serif;font-size:29px;line-height:1.5;max-width:720px;position:relative;z-index:1}.mission .outline{margin-top:25px}.lattice{position:absolute;right:-40px;top:0;width:320px;height:100%;opacity:.12;background:repeating-linear-gradient(90deg,transparent 0 40px,#ffffff 40px 42px),repeating-linear-gradient(0deg,transparent 0 70px,#ffffff 70px 72px);border:14px double #ffffff}.people-heading{display:flex;justify-content:space-between;align-items:end;margin:30px 0 50px}.people h2{font-size:56px;margin:0}.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.person>div{height:340px;background:#ebebeb;overflow:hidden}.person img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:none;transition:filter .25s}.person:hover img{filter:none}.person small{display:block;margin-top:25px;font-size:10px;letter-spacing:1.5px}.person h3{font-size:32px;margin:10px 0;border-bottom:1px solid var(--line);padding-bottom:20px;display:flex;justify-content:space-between}.person h3 span{font-size:22px}.contact-strip{background:#0f0f70;display:flex;align-items:center;justify-content:space-between;gap:25px}.contact-strip h2{font-size:50px;margin:0}.contact-strip .outline{border-color:#ffffff}footer{background:#ffffff;color:#000000;padding:55px 5.6%;display:flex;gap:60px;align-items:start;justify-content:space-between}footer p{font-size:10px;max-width:580px;margin:0 0 15px;color:#0f0f70}footer>a:last-child{font-size:9px;white-space:nowrap;letter-spacing:1px}.page-title{border-bottom:1px solid var(--line);background:linear-gradient(120deg,#ebebeb,var(--paper))}.page-title h1{font-size:85px}.profile-nav{display:flex;gap:40px;font-size:12px}.profile{display:grid;grid-template-columns:300px 1fr;gap:90px;border-bottom:1px solid var(--line)}.profile aside img{width:100%;height:370px;object-fit:contain;background:#ebebeb;object-position:bottom}.profile aside small{display:block;margin-top:20px}.profile h2{font-size:44px;margin:12px 0 24px}.profile aside a{font-size:13px}.profile-copy p{margin:0 0 19px;line-height:1.9}.profile-copy h3{font-size:32px;margin:43px 0 22px;border-bottom:1px solid var(--line);padding-bottom:14px}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px}.contact-layout h2{font-size:53px}.contact-row{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0;font-size:13px;gap:20px}.contact-row>span:first-child{font-size:10px;letter-spacing:1px}.map{width:100%;height:auto}.paused .hero-image{animation-play-state:paused}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}@media(min-width:1600px){.hero{height:810px}.hero-content{padding-top:105px}}@media(max-width:850px){header{height:85px}.header-phone{display:none}nav{gap:25px}.hero{height:690px}.hero-content{padding-top:90px}h1{font-size:55px}.section{padding:70px 7%}.intro{grid-template-columns:1fr}.seal{display:none}.intro h2,.people h2{font-size:47px}.values{gap:40px}.photo{height:480px}.mission{grid-template-columns:1fr}.people-grid{gap:20px}.person>div{height:240px}.people-heading{align-items:start;gap:20px}.person h3{font-size:27px}.profile{grid-template-columns:220px 1fr;gap:40px}.contact-layout{gap:40px}.contact-strip{flex-wrap:wrap}footer{gap:30px;flex-wrap:wrap}}@media(max-width:560px){.brand b{font-size:43px}.brand span{font-size:8px;padding-left:12px}.brand{gap:12px}.menu{display:block;border:0;background:none;font-size:22px}nav{display:none;position:absolute;top:85px;left:0;right:0;background:var(--paper);z-index:10;padding:20px 7%}nav.open{display:flex}.hero{height:650px}.hero-content{padding:82px 7% 0}h1{font-size:42px;line-height:1.12;letter-spacing:-.5px}.eyebrow{font-size:8px;gap:12px}.hero-caption{font-size:7px;gap:10px;flex-wrap:wrap}.hero-caption>span{display:none}.vertical{right:9px}.intro h2{font-size:45px}.values{grid-template-columns:1fr}.photo{height:360px}.mission p{font-size:25px}.people-heading{display:block}.people-grid{grid-template-columns:1fr}.person>div{height:380px}.people .dark-link{margin-bottom:20px}.contact-strip h2{font-size:39px}.profile{grid-template-columns:1fr}.profile aside{max-width:320px}.page-title h1{font-size:64px}.profile-nav{flex-direction:column;gap:15px}.contact-layout{grid-template-columns:1fr}.contact-row{font-size:12px}footer{padding:45px 7%}footer .brand{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-image{animation:none}.person img{transition:none}}

/* Preserve the original JHK wordmark separately from the interface palette. */
@font-face{font-family:JHKWordmark;src:url('assets/jhk-wordmark.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
.brand{display:inline-flex;align-items:baseline;gap:.2em;white-space:nowrap;font-family:JHKWordmark,sans-serif;font-size:25.5px;line-height:1;font-weight:400;letter-spacing:0;flex-shrink:0}
.brand span{border:0;padding:0;max-width:none;font:inherit;letter-spacing:0;line-height:1}
.brand .brand-name{color:#770000}.brand .brand-descriptor{color:#000000}
.hero .eyebrow i{background:#ffffff}.hero .outline{background:#0f0f70;border-color:#0f0f70}
.intro{grid-template-columns:1fr 2fr .3fr}.heritage-panel{background:url('assets/jhk-pattern.png') center/420px auto;min-width:60px;opacity:.75}
.mission-pattern{position:absolute;right:0;top:0;height:100%;width:28%;opacity:.04}
.contact-strip{color:#ffffff}.contact-strip .section-label{color:#ffffff}
footer{border-top:1px solid #ebebeb;background:#ffffff;color:#000000;position:relative;padding-bottom:90px}
footer:after{content:'';position:absolute;bottom:0;left:0;right:0;height:18px;background:#0f0f70}
.page-title{background:#ffffff;border-top:6px solid #0f0f70}.profile aside small,.person small{color:#0f0f70}
@media(max-width:850px){.intro{grid-template-columns:1fr}.intro .heritage-panel{display:none}}
@media(max-width:560px){.brand{font-size:21.25px}.brand span{font:inherit;padding:0;letter-spacing:0}}

/* SNU Blue (RGB 15, 15, 112): interface accents only. */
nav a:hover,nav a.active{color:var(--accent);border-bottom-color:var(--accent)}
.section-label,.dark-link,.page-title h1,.profile-copy h3{color:var(--accent)}
.mission .section-label,.contact-strip .section-label{color:#ffffff}
.dark-link{border-bottom-color:var(--accent)}
.hero .outline:hover{background:#20208a;border-color:#20208a}
.contact-layout .contact-row a:hover{color:var(--accent)}
::selection{background:#0f0f70;color:#ffffff}

/* Original background films; load and play only while visible. */
video.hero-image{width:100%;height:100%;object-fit:cover;object-position:50% 55%;animation:none;will-change:auto}
.photo{aspect-ratio:16/10;height:auto;background:#000000}
.photo>video{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.photo:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.65));pointer-events:none}
.photo>span{z-index:1;bottom:60px}
.video-toggle{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.5);color:#ffffff;padding:8px 12px;font-size:9px;letter-spacing:1px;line-height:1.5}
.photo>.video-toggle{position:absolute;bottom:18px;left:24px;z-index:2}
.mission>.mission-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:76% 36%}
.mission-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,15,112,.92),rgba(15,15,112,.65))}
.mission>.section-label,.mission>div:not(.mission-shade):not(.mission-pattern){position:relative;z-index:1}
.mission>.video-toggle{position:absolute;right:8%;bottom:25px;z-index:2}
.mission-pattern{pointer-events:none}
.video-toggle:disabled{cursor:default;opacity:.75}
@media(prefers-reduced-motion:reduce){video.hero-image{animation:none}}

/* Three distinct film scales: immersive hero, wide panorama, quiet mission band. */
.values.section{display:block;padding-top:55px;padding-bottom:75px}
.values .photo{width:100%;height:clamp(280px,34vw,460px);aspect-ratio:auto;overflow:hidden}
.values .photo>video{object-position:50% 75%}
.values .photo:after{inset:30% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.values-film-heading{position:absolute;bottom:28px;left:36px;z-index:1;color:#ffffff}
.values-film-heading .section-label{color:#ffffff;font-size:9px}
.values-film-heading h2{font-size:64px;margin:12px 0 0;line-height:1}
.values .photo>.video-toggle{left:auto;right:30px;bottom:30px;background:transparent;border-color:#ffffff70}
.values-copy{display:grid;grid-template-columns:1fr 1fr;gap:6%;padding-top:36px}
.values-copy p{margin:0;font-size:15px;line-height:1.95}
.mission.section{padding-top:65px;padding-bottom:80px;min-height:340px}
.mission h2{font-size:56px;margin:15px 0 22px}
.mission p{font-size:26px;line-height:1.5}
@media(max-width:850px){.values.section{padding-top:35px;padding-bottom:65px}.values-copy{grid-template-columns:1fr;gap:24px}.mission.section{gap:20px}.mission h2{margin-top:0}}
@media(max-width:560px){.values-film-heading{left:22px;bottom:28px}.values-film-heading h2{font-size:49px}.values .photo>.video-toggle{right:18px;bottom:28px;font-size:8px;padding:7px 9px}.values-copy{padding-top:28px}.mission.section{padding-top:55px;padding-bottom:75px}}

/* Faint official crest in the requested contact band. */
.contact-strip{position:relative;isolation:isolate;overflow:hidden;min-height:260px}
.contact-strip>.contact-emblem{position:absolute;z-index:-1;right:9%;top:50%;transform:translateY(-50%);height:320px;width:auto;opacity:.075;filter:brightness(0) invert(1);pointer-events:none}
@media(max-width:560px){.contact-strip>.contact-emblem{height:260px;right:-12px}}
/* Language navigation stays available at every screen width. */
.language-switch{display:flex;align-items:center;gap:13px;white-space:nowrap;font-size:10px;letter-spacing:.5px;margin-left:12px}
.language-switch a{padding:7px 0;color:#666666;border-bottom:1px solid transparent}
.language-switch a[aria-current=true]{color:var(--accent);border-bottom-color:var(--accent)}
header{gap:22px}.header-phone{margin-left:auto}header>nav{margin-left:auto}
/* Korean typography: locally hosted Pretendard, with the original wordmark preserved. */
@font-face{font-family:'Pretendard Variable';src:url('assets/fonts/PretendardVariable.woff2') format('woff2');font-style:normal;font-weight:45 920;font-display:swap}
html[lang=ko] body{font-family:'Pretendard Variable','Apple SD Gothic Neo','Malgun Gothic',sans-serif;word-break:keep-all;overflow-wrap:break-word}
html[lang=ko] h1,html[lang=ko] h2,html[lang=ko] h3,html[lang=ko] blockquote{font-family:'Pretendard Variable','Apple SD Gothic Neo','Malgun Gothic',sans-serif;line-height:1.4;letter-spacing:-.035em}
html[lang=ko] h1,html[lang=ko] h2,html[lang=ko] h3{font-weight:500}
html[lang=ko] em{font-style:normal;font-weight:inherit}
html[lang=ko] .hero h1{font-size:clamp(34px,4.3vw,68px);line-height:1.2;letter-spacing:-.035em;word-break:normal}
html[lang=ko] .intro h2,html[lang=ko] .people h2{font-size:46px}
html[lang=ko] .person h3{font-size:25px}
html[lang=ko] .page-title h1{font-size:64px}
html[lang=ko] .profile h2{font-size:33px}
html[lang=ko] .mission p{font-family:inherit;font-size:23px;line-height:1.9}
html[lang=ko] .values-copy p{line-height:2.1}
.privacy-link{border-bottom:1px solid currentColor}.privacy-content{max-width:1100px;margin:auto;line-height:2}
@media(max-width:950px){.header-phone{display:none}}
@media(max-width:560px){header{gap:12px}.language-switch{margin-left:auto;gap:10px;font-size:10px}header>nav{margin-left:0}html[lang=ko] .intro h2,html[lang=ko] .people h2{font-size:34px}html[lang=ko] .page-title h1{font-size:44px}html[lang=ko] .mission p{font-size:20px}}