/* Drug Conjugate Lab · v3. Light pages after the Steinmetz Lab layout; figures sit in dark rounded panels. */
:root{
  /* palette from the wiki (4th revision); the dark tokens drive the figure panels, the recruiting band and the popup */
  --bg:#09090B; --bg-soft:#141417; --text:#FAFAFA; --text-dim:#A1A1AA;
  --ax1:#4CA8FF; --ax2:#3DDC84; --ax3:#FFB01F; --ax4:#E05BC8;
  --c-cyan:#22D3EE; --c-violet:#A78BFA; --c-rose:#FB7185; --c-lime:#A3E635;
  --grad-1:linear-gradient(90deg,#4CA8FF,#22D3EE,#A3E635);
  --grad-2:linear-gradient(90deg,#A78BFA,#3DDC84);
  --grad-3:linear-gradient(90deg,#FFB01F,#FB7185,#A78BFA);
  --grad-4:linear-gradient(90deg,#E05BC8,#22D3EE,#A3E635);
  --spectrum:linear-gradient(90deg,#4CA8FF,#22D3EE 18%,#A3E635 33%,#3DDC84 46%,#FFB01F 60%,#FB7185 74%,#A78BFA 87%,#E05BC8);
  /* light page */
  --paper:#FFFFFF; --ink:#18181B; --ink-2:#4B4B55; --ink-3:#71717A; --rule:#E4E4E7;
  --tint-green:#EDF8EF; --tint-gray:#F3F3F5; --tint-blue:#EEF5FE; --tint-violet:#F4F1FF; --tint-rose:#FEF1F4; --tint-amber:#FFF6E6;
  --navy:#0E1330;
  /* the palette darkened for text on white */
  --i-blue:#1C6ACB; --i-green:#13844A; --i-amber:#A35F00; --i-magenta:#AA3196; --i-violet:#6345D1; --i-cyan:#077F94; --i-rose:#C93152; --i-lime:#517A00;
  --accent:var(--i-green);
  /* 한글은 산세리프(Pretendard), 영문 제목만 가는 세리프(Newsreader) — 참고 연구실 19곳에서 뽑은 원칙 */
  --f-head:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-body:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --f-display:"Newsreader","Noto Serif KR",Georgia,serif;
  --f-serif:"Newsreader","Noto Serif KR",Georgia,serif;
  --f-mono:"IBM Plex Mono","Pretendard Variable",ui-monospace,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--i-blue);outline-offset:3px;border-radius:4px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}
:root[data-lang="en"] [data-l="ko"]{display:none!important}
:root:not([data-lang="en"]) [data-l="en"]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* page-to-page transitions: the browser cross-fades the old and new page.
   Chromium runs this natively; other browsers fall back to a fade-in of the content. */
@view-transition{navigation:auto}
.top{view-transition-name:site-header}
@media all{
  ::view-transition-old(root){animation:vtOut .16s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:vtIn .34s cubic-bezier(0,0,.2,1) both}
  @keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
  @keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
}
[data-motion="off"]::view-transition-old(root),[data-motion="off"]::view-transition-new(root){animation:none!important}
.js-fade main,.js-fade .foot{animation:pageIn .34s cubic-bezier(0,0,.2,1) both}
.js-fade.is-leaving main,.js-fade.is-leaving .foot{animation:pageOut .17s cubic-bezier(.4,0,1,1) both}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}}
@keyframes pageOut{to{opacity:0;transform:translateY(-9px)}}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(150%) blur(10px);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.top.scrolled{border-bottom-color:var(--rule);box-shadow:0 8px 24px -20px rgba(0,0,0,.35)}
.top-in{display:flex;align-items:center;gap:26px;height:76px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;min-width:0}
.mark svg{flex:0 0 34px}
.mark-t{display:grid;line-height:1.15;min-width:0}
.mark-t b{font:600 16.5px var(--f-head);letter-spacing:-.01em;white-space:nowrap}
.mark-t span{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;gap:24px}
.nav a{font:500 14px var(--f-head);color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.lang{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden;flex:0 0 auto}
.lang button{font:500 12px var(--f-mono);letter-spacing:.06em;color:var(--ink-3);background:none;border:0;padding:6px 11px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}
.menu-btn{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;padding:12px 9px;flex-direction:column;justify-content:center;gap:7px}
.menu-btn i{display:block;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .2s}
.menu-open .menu-btn i:first-child{transform:translateY(4.25px) rotate(45deg)}
.menu-open .menu-btn i:last-child{transform:translateY(-4.25px) rotate(-45deg)}
.drawer{border-top:1px solid var(--rule);background:#fff;max-height:calc(100svh - 76px);overflow-y:auto}
.drawer nav{display:grid;padding-block:8px 22px}
.drawer a{font:400 22px var(--f-head);color:var(--ink);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--rule)}
.drawer a[aria-current="page"]{color:var(--accent);font-weight:500}
.drawer .lang{justify-self:start;margin-top:18px}
@media (max-width:1080px){.nav{display:none}.menu-btn{display:inline-flex}}
@media (max-width:560px){.top-in>.lang{display:none}.top-in{gap:10px;height:64px}.mark-t span{display:none}.drawer{max-height:calc(100svh - 64px)}}
@media (min-width:561px){.drawer .lang{display:none}}

/* type */
.label{font:500 13.5px var(--f-head);letter-spacing:.02em;color:var(--accent);margin:0 0 10px}
.eyebrow{font:400 italic clamp(17px,1.5vw,21px)/1.25 var(--f-display);letter-spacing:0;text-transform:none;margin:0 0 12px;color:var(--accent)}
/* Display headings are serif in both languages: Newsreader for Latin, Noto Serif KR for Hangul.
   Card and panel sub-headings stay in the sans (serif gets hard to read in Korean below ~24px). */
.h1{font:600 clamp(40px,5.4vw,76px)/1.16 var(--f-display);letter-spacing:-.022em;margin:0}
.h2{font:600 clamp(28px,3.2vw,45px)/1.26 var(--f-display);letter-spacing:-.02em;margin:0;text-wrap:balance}
.h1 em,.h2 em,.h3 em{font-style:normal;font-weight:700;color:var(--accent)}
.h3{font:600 clamp(23px,2.4vw,34px)/1.34 var(--f-display);letter-spacing:-.018em;margin:0;text-wrap:balance}
/* English runs lighter — Newsreader 600 is heavier than Noto Serif KR 600 at the same size */
:root[data-lang="en"] .h1{font-family:var(--f-display);font-weight:300;font-size:clamp(44px,5.9vw,84px);line-height:1.06;letter-spacing:-.022em}
:root[data-lang="en"] .h2{font-family:var(--f-display);font-weight:300;font-size:clamp(31px,3.5vw,50px);line-height:1.18;letter-spacing:-.018em}
:root[data-lang="en"] .h3{font-family:var(--f-display);font-weight:400;font-size:clamp(25px,2.6vw,37px);line-height:1.26;letter-spacing:-.014em}
:root[data-lang="en"] .h1 em,:root[data-lang="en"] .h2 em,:root[data-lang="en"] .h3 em{font-weight:500}
.lede{margin:20px 0 0;color:var(--ink-2);font-size:clamp(16.5px,1.4vw,18.5px);max-width:40em}
.lede b,.mission b{color:var(--ink);font-weight:700}
.center{text-align:center}.center .lede{margin-inline:auto}
.narrow.center{margin-inline:auto}
.c1{--ax:var(--i-blue);--axb:var(--ax1);--tint:var(--tint-blue)}
.c2{--ax:var(--i-green);--axb:var(--ax2);--tint:var(--tint-green)}
.c3{--ax:var(--i-amber);--axb:var(--ax3);--tint:var(--tint-amber)}
.c4{--ax:var(--i-magenta);--axb:var(--ax4);--tint:var(--tint-violet)}
.c5{--ax:var(--i-violet);--axb:var(--c-violet);--tint:var(--tint-rose)}
.c6{--ax:var(--i-cyan);--axb:var(--c-cyan);--tint:#EBF9FB}

/* buttons and links */
.pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.center .pills{justify-content:center}
.pill{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 26px;border-radius:999px;font:600 15px var(--f-head);text-decoration:none;border:1.5px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
.pill-solid{background:var(--accent);color:#fff}
.pill-solid:hover{background:#0E6E3D}
.pill-line{border-color:var(--ink);color:var(--ink)}
.pill-line:hover{background:var(--ink);color:#fff}
.pill-white{background:#fff;color:var(--navy)}
.pill-white:hover{background:var(--c-lime)}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font:600 14.5px var(--f-head);color:var(--ax,var(--accent));text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.more:hover{text-decoration-thickness:2.5px}

/* sections */
.sec{padding-block:clamp(64px,8vw,112px)}
.sec-head{margin-bottom:clamp(36px,5vw,56px)}
.t-green{background:var(--tint-green)}.t-gray{background:var(--tint-gray)}.t-blue{background:var(--tint-blue)}.t-violet{background:var(--tint-violet)}
.navy{background:var(--navy);color:#fff}
.dark{background:var(--bg);color:var(--text)}
.navy .lede,.dark .lede{color:rgba(255,255,255,.74)}
.navy .h2 em,.dark .h2 em,.dark .h1 em{color:var(--c-lime)}

/* home hero */
.hero{padding-block:clamp(40px,6vw,84px) clamp(48px,6vw,88px);position:relative}
.wordmark{display:flex;align-items:center;gap:14px;margin:0 0 26px;font:500 clamp(21px,2.2vw,28px)/1.25 var(--f-serif);color:#1B2B5E;letter-spacing:-.012em}
.wordmark small{font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);border-left:1px solid var(--rule);padding-left:14px}
/* background-clip:text paints only inside the inline box, and Hangul from Noto Serif KR rises
   above the box Newsreader's metrics define — without the padding the tops of 면역 get shaved off.
   Vertical padding on an inline box grows the paint area without moving the line. */
.hero .h1 em{background:linear-gradient(90deg,#13844A,#077F94 50%,#6345D1);-webkit-background-clip:text;background-clip:text;color:transparent;padding-block:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.badge{display:inline-flex;align-items:center;gap:10px;padding:7px 15px;border-radius:999px;background:var(--tint-green);color:var(--ink);font-size:13.5px;line-height:1.4;text-decoration:none;margin-bottom:22px}
.badge:hover{background:#DDF2E1}
.dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--ax2);box-shadow:0 0 0 3px rgba(61,220,132,.25)}
.mission{margin:26px 0 0;max-width:38em;color:var(--ink-2);font-size:clamp(16.5px,1.4vw,18.5px)}
.axes-mini{display:flex;flex-wrap:wrap;gap:8px 10px;margin:24px 0 0;padding:0;list-style:none}
.axes-mini a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:999px;background:var(--tint);color:var(--ax);font:600 14px var(--f-head);text-decoration:none}
.axes-mini i{width:9px;height:9px;border-radius:50%;background:var(--axb)}
.capsule{position:relative;margin-top:clamp(40px,5vw,60px);border-radius:clamp(28px,6vw,90px);background:radial-gradient(60% 80% at 50% 60%,rgba(167,139,250,.12),transparent 70%),var(--bg);overflow:hidden;aspect-ratio:1600/400;box-shadow:0 40px 80px -48px rgba(9,9,11,.6)}
.c-full{position:absolute;inset:0;width:100%;height:100%;display:block}
.c-row1,.c-row2{display:none}
.c-mid{position:absolute;left:49.5%;width:18.5%;top:0;bottom:0}
#artHero .cn{font:600 17px var(--f-mono);fill:rgba(250,250,250,.4);letter-spacing:.12em}
#artHero .ct{font:500 20px var(--f-body);fill:rgba(250,250,250,.72)}
#artHero .hs{font-size:16px}
.c-mid canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cap{margin:14px 0 0;font:12.5px/1.6 var(--f-mono);color:var(--ink-3);text-align:center}
.cap i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ax4);margin:0 2px 1px;vertical-align:middle}
.c-lab{display:none}
@media (max-width:760px){
  .capsule{aspect-ratio:auto;border-radius:28px;display:grid;padding:2px 0 12px}
  .c-full{display:none}
  .c-row1,.c-row2{display:block;width:100%;height:auto}
  .c-mid{position:relative;left:auto;width:100%;top:auto;bottom:auto;aspect-ratio:4/3;margin-block:0 -3%}
  .c-lab{display:flex;align-items:center;gap:9px;margin:0;padding:15px 18px 0;font:600 13.5px/1.4 var(--f-head);letter-spacing:-.01em;color:rgba(250,250,250,.88)}
  .c-lab b{flex:none;font:600 11px var(--f-mono);letter-spacing:.12em;color:rgba(250,250,250,.4)}
  .c-lab::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(250,250,250,.2),transparent)}
}

.hero-steps{list-style:none;margin:20px 0 0;padding:16px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px;position:relative}
.hero-steps::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:var(--spectrum);opacity:.6}
.hero-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:baseline;min-width:0}
.hero-steps b{grid-row:span 2;font:600 12.5px var(--f-mono);color:var(--ink-3);letter-spacing:.1em;padding-top:3px}
.hero-steps span{font:600 15.5px var(--f-head);letter-spacing:-.01em}
.hero-steps em{font-style:normal;font-size:14px;color:var(--ink-3);line-height:1.6}
@media (max-width:760px){.hero-steps{grid-template-columns:minmax(0,1fr);gap:14px}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pillar{background:#fff;border-radius:24px;padding:30px 28px 32px;min-width:0}
.pillar .ico{width:64px;height:64px;display:block}
.pillar .k{font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;margin:20px 0 4px;color:var(--ax)}
.pillar h3{margin:0;font:500 24px/1.3 var(--f-head);letter-spacing:-.02em}
.pillar p{margin:10px 0 0;color:var(--ink-2)}
@media (max-width:860px){.pillars{grid-template-columns:minmax(0,1fr)}.pillar{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 20px;align-items:start}.pillar .ico{grid-row:span 3}.pillar .k{margin-top:4px}}

/* figure panels */
.viz-img{aspect-ratio:4/3}
.viz-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vl{position:absolute;transform:translate(-50%,-50%);max-width:46%;text-align:center;font:500 clamp(12px,1.08vw,15.5px)/1.45 var(--f-mono);color:rgba(250,250,250,.82);text-shadow:0 1px 10px rgba(0,0,0,.95),0 0 26px rgba(0,0,0,.8);pointer-events:none;word-break:keep-all}
@media (max-width:620px){.vl{font-size:11px;max-width:52%}}
.viz{position:relative;margin:0;border-radius:28px;overflow:hidden;background:#0A0A0D;box-shadow:0 30px 60px -38px rgba(9,9,11,.55)}
.fig{display:block;width:100%;height:auto}
.fig .fl{font:500 15px var(--f-mono);fill:rgba(250,250,250,.64)}

/* research rows on home */
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,76px);align-items:center;padding-block:clamp(24px,3.5vw,44px)}
.row:nth-child(even) .viz{order:2}
.num{font:600 12.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ax);margin:0 0 12px}
.row .h3 em{color:var(--ax)}
.row p{margin:16px 0 0;color:var(--ink-2);max-width:32em}
@media (max-width:860px){.row{grid-template-columns:minmax(0,1fr);gap:22px}.row:nth-child(even) .viz{order:0}}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:20px;padding:26px 24px 22px;min-width:0;min-height:236px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
a.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(0,0,0,.35)}
.card time,.card .k{font:500 12.5px var(--f-mono);color:var(--ink-3);letter-spacing:.04em}
.card h3{margin:8px 0 0;font:500 19px/1.4 var(--f-head);letter-spacing:-.015em}
.card p{margin:8px 0 0;color:var(--ink-2);font-size:15px}
.card .go{margin-top:14px;font:600 13.5px var(--f-head);color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.card .ico{width:52px;height:52px;margin-top:auto;align-self:flex-end}
.card.app h3{font-size:22px}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cards{grid-template-columns:minmax(0,1fr)}.card{min-height:0}}

/* recruiting band */
.recruit{position:relative;overflow:hidden}
.recruit .wrap{position:relative;z-index:1}
.recruit-art{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:min(620px,60%);height:auto;opacity:.95;pointer-events:none}
.recruit .h2{max-width:14em}
.recruit p{max-width:34em}
@media (max-width:760px){.recruit-art{position:relative;right:auto;top:auto;transform:none;width:100%;margin-top:28px}}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:36px 64px;align-items:start;margin-top:40px}
.who b{display:block;font:500 24px var(--f-head);letter-spacing:-.015em;margin-bottom:8px}
.who p{margin:0 0 10px;color:var(--ink-2)}
.who strong{color:var(--ink)}
.clist{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.clist li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start}
.clist .ci{width:36px;height:36px;border-radius:10px;background:var(--accent);display:grid;place-items:center}
.clist .ci svg{width:18px;height:18px}
.clist small{display:block;font:500 12.5px var(--f-mono);color:var(--ink-3);letter-spacing:.04em}
.clist a,.clist span.v{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.clist span.v{text-decoration:none;color:var(--ink)}
.copy{font:inherit;font-size:12.5px;line-height:1.4;border:1px solid var(--rule);background:#fff;border-radius:999px;padding:3px 11px;cursor:pointer;color:var(--ink-2);margin-left:8px;vertical-align:1px}
.copy:hover{border-color:var(--ink)}
@media (max-width:860px){.contact-grid{grid-template-columns:minmax(0,1fr)}}

/* footer */
.foot{border-top:1px solid var(--rule);padding-block:48px 30px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:32px}
.foot h4{margin:0 0 10px;font:500 14px var(--f-head)}
.foot p{margin:0;color:var(--ink-2)}
.foot-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}
.foot-links a,.foot p a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.foot-bottom{margin-top:36px;font-size:12.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
@media (max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr)}}

/* sub-page heroes */
.phero{padding-block:clamp(48px,7vw,104px)}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.phero .lede{max-width:34em}
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-radius:32px;overflow:hidden}
.mosaic .viz{border-radius:14px;box-shadow:none}
@media (max-width:860px){.phero-grid{grid-template-columns:minmax(0,1fr)}}

/* research page */
.axis{padding-block:clamp(60px,7vw,100px)}
.axis:nth-of-type(even){background:var(--tint-gray)}
.axis .rule{width:180px;height:1px;background:var(--ax);opacity:.45;margin:0 auto 30px}
.axis .lbl{font:600 13px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ax);margin:0}
.axis .h2{color:var(--ax);margin:10px auto 0;max-width:19em}
.axis .viz{max-width:820px;margin:40px auto 0}
.axis .body{max-width:720px;margin:40px auto 0}
.axis .body p{margin:0 0 18px;color:var(--ink-2);font-size:17px}
.axis .body p b{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:8px 0 0;padding:0}
.chips li{font:500 13px var(--f-mono);padding:5px 13px;border-radius:999px;border:1.5px solid var(--ax);color:var(--ax);background:#fff}
.rel{margin-top:28px;padding-top:20px;border-top:1px solid var(--rule)}
.rel h3{margin:0 0 10px;font:600 12.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.rel ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;line-height:1.55;word-break:normal}
.rel a{color:var(--ink);text-decoration-color:var(--ax);text-underline-offset:4px}
.rel span{display:block;font:13px var(--f-mono);color:var(--ink-3)}

/* people */
.pi-name{font:500 clamp(32px,3.6vw,46px)/1.2 var(--f-head);letter-spacing:-.025em;margin:0}
.pi-top{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start;margin-top:34px}
.pi-photo{margin:0;border-radius:18px;overflow:hidden;background:var(--tint-gray);aspect-ratio:3/4}
.pi-photo img{width:100%;height:100%;object-fit:cover}
.pi-lines p{margin:0;font-size:17.5px;line-height:1.65}
.pi-lines .gap{margin-top:20px}
.pi-lines a{color:var(--i-blue);text-underline-offset:4px}
.hr{border:0;border-top:1px solid var(--rule);margin:44px 0}
.cv h3{margin:0 0 18px;font:600 21px var(--f-head);color:var(--i-blue);letter-spacing:-.01em}
.cv+.cv{margin-top:40px}
.cv ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.cv li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;font-size:16.5px;line-height:1.6}
.cv li b{font-weight:700}
.cv .yr{font:500 14px var(--f-mono);color:var(--ink-3);white-space:nowrap;padding-top:2px}
.courses-l em{display:block;font:13.5px var(--f-mono);font-style:normal;color:var(--ink-3);margin-top:2px}
.seats{display:grid;gap:16px}
.seat{display:grid;grid-template-columns:96px minmax(0,1fr);gap:26px;align-items:center;border-radius:22px;padding:28px 30px;background:var(--tint);text-decoration:none;color:inherit;transition:transform .2s}
a.seat:hover{transform:translateY(-2px)}
.seat .av{width:96px;height:96px;border-radius:50%;background:#fff;display:grid;place-items:center}
.seat .av svg{width:46px;height:46px}
.seat .role{font:600 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ax)}
.seat h3{margin:4px 0 0;font:500 22px/1.35 var(--f-head)}
.seat p{margin:6px 0 0;color:var(--ink-2)}
@media (max-width:640px){.pi-top{grid-template-columns:minmax(0,1fr)}.pi-photo{max-width:220px}.cv li{grid-template-columns:minmax(0,1fr)}.seat{grid-template-columns:minmax(0,1fr);gap:14px}.seat .av{width:72px;height:72px}}

/* subway lines on the contact page */
.subway{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 18px}
.subway li{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.subway b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font:600 12.5px var(--f-mono)}
.subway .l1{background:#0052A4}.subway .l4{background:#00A5DE}.subway .l6{background:#CD7C2F}

/* publications */
.pub-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:10px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px;background:#fff}
.seg button{font:500 14px var(--f-head);border:0;background:none;border-radius:999px;padding:7px 18px;cursor:pointer;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg small{font:12px var(--f-mono);margin-left:6px;opacity:.75}
.pub-note{font-size:13px;color:var(--ink-3);margin:0 0 0 auto}
.pubs{list-style:none;margin:0;padding:0}
.pubs[data-mode="sel"] .pub:not([data-role]){display:none}
.pub{display:grid;grid-template-columns:80px minmax(0,1fr);gap:22px;padding-block:22px;border-top:1px solid var(--rule)}
.pub-y{font:500 15px var(--f-mono);color:var(--ink-3);padding-top:2px}
.pub-t{margin:0;font:500 18px/1.45 var(--f-head);letter-spacing:-.01em;word-break:normal}
.pub-t a{text-decoration:none}
.pub-t a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.pub-a{margin:6px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.6;word-break:normal}
.pub-a b{color:var(--ink)}
.pub-m{margin:8px 0 0;font-size:14px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;color:var(--ink-2)}
.pub-m a{font:13px var(--f-mono);color:var(--accent);overflow-wrap:anywhere}
.pub-m .if{font:600 12.5px var(--f-mono);color:var(--i-blue);background:var(--tint-blue);border-radius:999px;padding:1px 9px}
.pub-m .pct{font:600 12.5px var(--f-mono);color:var(--i-green);background:var(--tint-green);border-radius:999px;padding:1px 9px}
.pub-m .role{font:600 11.5px var(--f-mono);color:#fff;background:var(--i-violet);border-radius:999px;padding:1px 9px}
.pub-m .role.first{background:var(--i-magenta)}
@media (max-width:560px){.pub{grid-template-columns:minmax(0,1fr);gap:4px}}

/* join */
.info{margin-top:34px;border-top:1px solid rgba(255,255,255,.14)}
.info div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.info dt{font:600 13px var(--f-mono);letter-spacing:.06em;color:var(--ax2);padding-top:2px}
.info dd{margin:0;color:rgba(255,255,255,.86)}
.info a{color:#fff}
.gbar{height:4px;background:var(--grad-4);border-radius:4px;width:120px;margin-bottom:26px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.box{background:var(--tint);border-radius:24px;padding:clamp(24px,3vw,36px);min-width:0}
.box h3{margin:0 0 16px;font:500 22px var(--f-head)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px;color:var(--ink-2)}
.ticks li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:12px}
.ticks li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ax);margin-top:.62em}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:16px;color:var(--ink-2)}
.steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;counter-increment:s}
.steps li::before{content:counter(s);font:600 14px var(--f-mono);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ax);color:#fff}
.steps b{color:var(--ink)}
.apply{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px;padding:22px 26px;border-radius:22px;background:var(--ink);color:#fff}
.apply .v{font:500 18px var(--f-mono)}
.apply .copy{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
@media (max-width:760px){.two{grid-template-columns:minmax(0,1fr)}.info div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* teaching */
.course{background:#fff;border-radius:24px;padding:32px;min-width:0;border:1px solid var(--rule)}
.course .k{font:600 12.5px var(--f-mono);letter-spacing:.08em;color:var(--ax)}
.course h3{margin:8px 0 0;font:500 26px/1.3 var(--f-head)}
.course .en{margin:4px 0 0;font:14px var(--f-mono);color:var(--ink-3)}
.course p{margin:14px 0 0;color:var(--ink-2)}

/* recruiting popup (structure after kimkm.ewha.ac.kr, dark theme) */
#labpop{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.72);animation:popFade .18s ease-out}
#labpop[hidden]{display:none}
@keyframes popFade{from{opacity:0}to{opacity:1}}
.labpop-box{position:relative;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;background:var(--bg-soft);color:var(--text);border-radius:14px;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(0,0,0,.5);line-height:1.65}
.labpop-box::before{content:"";display:block;height:4px;background:var(--grad-4)}
.labpop-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;background:none;color:var(--text-dim);font-size:27px;line-height:1;cursor:pointer;border-radius:8px}
.labpop-x:hover{color:var(--text)}
.labpop-body{padding:30px 30px 24px}
.labpop-eyebrow{margin:0 0 7px;font:700 11.5px var(--f-head);letter-spacing:.12em;color:var(--ax2)}
.labpop-head{margin:0 0 16px;font:600 21px/1.4 var(--f-body);color:var(--text)}
.labpop-lead{margin:0 0 12px;font-size:14.5px;color:#D4D4D8}
.labpop-lead.last{margin-bottom:20px;color:var(--text)}
.labpop-info{padding:13px 0;border-top:1px solid rgba(255,255,255,.1);font-size:14px}
.labpop-label{display:block;margin-bottom:3px;font:700 12.5px var(--f-body);color:var(--ax2)}
.labpop-value{display:block;color:#E4E4E7}
.labpop-value a{color:inherit;text-decoration:none}
.labpop-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:#0F0F12;border-top:1px solid rgba(255,255,255,.08)}
.labpop-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-dim);cursor:pointer}
.labpop-check input{width:15px;height:15px;margin:0;accent-color:var(--ax2)}
.labpop-close{padding:7px 17px;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:transparent;color:var(--text);font:inherit;font-size:13.5px;cursor:pointer}
.labpop-close:hover{background:rgba(255,255,255,.08)}
@media (max-width:480px){.labpop-body{padding:26px 20px 20px}.labpop-head{font-size:18.5px}.labpop-lead{font-size:14px}}

/* Figure motion runs for everyone. Change `all` back to `(prefers-reduced-motion:no-preference)`
   to follow the OS setting again; `<html data-motion="off">` stops it either way. */
@media all{
  .pulse,.pulse-a{animation:pulseA 1.7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes pulseA{0%,100%{opacity:.45;transform:scale(.7)}50%{opacity:1;transform:scale(1.32)}}
  .pulse-a{animation-delay:-.8s}
  .spin{animation:spinA 4.5s linear infinite}
  @keyframes spinA{to{transform:rotate(360deg)}}
  .wave{animation:wave 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes wave{0%,100%{opacity:.3;transform:scale(.82)}12%{opacity:1;transform:scale(1.85)}34%{opacity:.7;transform:scale(1)}}
  .rise{animation:rise 2.3s ease-in-out infinite}
  @keyframes rise{0%,100%{transform:translate(0,0);opacity:.25}50%{transform:translate(26px,-36px);opacity:1}}
  .drift{animation:drift 2.9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes drift{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(19px,-19px) rotate(24deg)}}
  .tw{animation:tw .95s ease-in-out infinite}
  @keyframes tw{0%,100%{opacity:.08;transform:scale(.65)}50%{opacity:1;transform:scale(1.4)}}
  .tw{transform-box:fill-box;transform-origin:center}
  .fly{animation:fly 2.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes fly{0%,100%{transform:translate(0,0) rotate(-10deg)}50%{transform:translate(32px,-14px) rotate(95deg)}}
  .breathe,.breathe-a{animation:breathe 1.8s ease-in-out infinite}
  @keyframes breathe{0%,100%{opacity:.1}50%{opacity:1}}
  .breathe-a{animation-delay:-1.1s}
  .flow-a{animation:flowA 1.05s linear infinite}
  @keyframes flowA{to{stroke-dashoffset:-71}}
  .drift-a{animation:drift 2.9s ease-in-out infinite reverse;transform-box:fill-box;transform-origin:center}
  /* utilities the figures share. dash-* differ only in how far the dashes travel:
     the distance has to be a whole number of dash periods or the pattern jumps. */
  .dash-a{animation:dash70 1.3s linear infinite}      /* dasharray period 7 or 10 */
  .dash-b{animation:dash72 1.45s linear infinite}      /* period 8 */
  .dash-c{animation:dash66 1.9s linear infinite}      /* period 11 */
  @keyframes dash70{to{stroke-dashoffset:-70}}
  @keyframes dash72{to{stroke-dashoffset:-72}}
  @keyframes dash66{to{stroke-dashoffset:-66}}
  .swing{animation:swingA 4.2s ease-in-out infinite}
  @keyframes swingA{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(13deg)}}
  .bob,.bob2{animation:bobA 2.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  .bob2{animation-duration:3.3s;animation-delay:-1.1s}
  @keyframes bobA{0%,100%{transform:translateY(5px)}50%{transform:translateY(-14px)}}
  .glow-a{animation:glowA 1.9s ease-in-out infinite}
  @keyframes glowA{0%,100%{opacity:.15}50%{opacity:1}}
  .ripple-a{animation:rippleA 1.6s ease-out infinite}
  @keyframes rippleA{0%{opacity:0;transform:scale(.4)}25%{opacity:.9}100%{opacity:0;transform:scale(1.8)}}
  .draw-c{stroke-dasharray:1;stroke-dashoffset:1;animation:drawC 1.8s cubic-bezier(.45,0,.2,1) forwards}
  .draw-c.d2{animation-delay:1.5s;animation-duration:1.6s}
  @keyframes drawC{to{stroke-dashoffset:0}}
  .fade-c{opacity:0;animation:fadeC .9s ease forwards}
  .fade-c.f1{animation-delay:.9s}.fade-c.f3{animation-delay:2.7s}
  @keyframes fadeC{to{opacity:1}}
}

/* card icons. Slow and small on purpose — these sit next to body copy, so they should
   read as "alive", not as something demanding attention. transform-box:view-box lets the
   origins be written in the icons' own 96x96 coordinates. */
.ico [class^="ic-"],.ico [class^="ia-"]{transform-box:view-box}
.ic-ring{animation:icRing 4s ease-in-out infinite;transform-origin:44px 50px}
@keyframes icRing{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
.ic-res{animation:icRes 1.7s ease-in-out infinite}
@keyframes icRes{0%,100%{opacity:1}50%{opacity:.15}}
.ic-dot{animation:icDot 1.5s ease-in-out infinite;transform-origin:80px 30px}
@keyframes icDot{0%,100%{transform:scale(.5);opacity:.4}50%{transform:scale(1.7);opacity:1}}
.ic-cell{animation:icCell 3.6s ease-in-out infinite;transform-origin:46px 50px}
@keyframes icCell{0%,100%{transform:scale(.9) rotate(6deg)}50%{transform:scale(1.16) rotate(-14deg)}}
.ic-nuc{animation:icNuc 2.4s ease-in-out infinite}
@keyframes icNuc{0%,100%{transform:translate(0,0)}33%{transform:translate(-8px,5px)}66%{transform:translate(6px,-7px)}}
.ic-sig{animation:icSig 1.4s ease-in-out infinite;transform-box:view-box}
.ic-sig.s2{animation-delay:-.7s}.ic-sig.s3{animation-delay:-1.4s}
@keyframes icSig{0%,100%{opacity:.1}40%{opacity:1}}
.ic-gear{animation:icGear 4.5s linear infinite;transform-origin:48px 48px}
@keyframes icGear{to{transform:rotate(360deg)}}
.ic-cap{animation:icCap 1.6s ease-in-out infinite;transform-origin:48px 48px}
@keyframes icCap{0%,100%{transform:scale(.84)}50%{transform:scale(1.4)}}
.ia-blob{animation:iaBlob 3.3s ease-in-out infinite;transform-origin:48px 48px}
@keyframes iaBlob{0%,100%{transform:scale(.88) rotate(-10deg)}50%{transform:scale(1.18) rotate(13deg)}}
.ia-core{animation:iaCore 1.3s ease-in-out infinite;transform-origin:48px 48px}
@keyframes iaCore{0%,100%{transform:scale(.6);opacity:.55}50%{transform:scale(1.35);opacity:1}}
.ia-aim{animation:iaAim 1.3s ease-in-out infinite;transform-origin:48px 48px}
@keyframes iaAim{0%,100%{transform:scale(1.35) rotate(-15deg);opacity:.2}50%{transform:scale(.62) rotate(60deg);opacity:1}}
.ia-shield{animation:iaShield 1.9s ease-in-out infinite;transform-origin:48px 50px}
@keyframes iaShield{0%,100%{transform:scale(.9);opacity:.5}50%{transform:scale(1.1);opacity:1}}
.ia-wave{animation:iaWave 1.6s ease-in-out infinite}
@keyframes iaWave{0%,100%{transform:translate(0,0)}25%{transform:translate(10px,-7px)}75%{transform:translate(-10px,7px)}}
.ia-dial{animation:iaDial 2.4s ease-in-out infinite;transform-origin:48px 48px}
@keyframes iaDial{0%,100%{transform:scale(.96)}50%{transform:scale(1.08)}}
.ia-hand{animation:iaHand 2.6s linear infinite;transform-origin:48px 48px}
@keyframes iaHand{to{transform:rotate(360deg)}}
.ia-cyc{animation:iaCyc 1.5s ease-in-out infinite;transform-origin:48px 48px}
@keyframes iaCyc{0%,100%{opacity:.15;transform:rotate(-8deg)}50%{opacity:1;transform:rotate(8deg)}}
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation:none!important;transition:none!important}
[data-motion="off"]{scroll-behavior:auto}