/* Kim Dongju — AI Scientist Portfolio · shared stylesheet */
/* 모던 한글 조합: Wanted Sans(디스플레이) + Pretendard(본문) + JetBrains Mono(라벨) — 전부 한글 네이티브/슬라이스 로드 */
/* ponytail: @import는 로딩 1-RTT 손해. 체감되면 각 html 로 +로 승격 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
@import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
--bg: #F6F8FA;
--surface: #FFFFFF;
--surface-2: #EEF2F5;
--line: #DCE3E9;
--ink: #1B2530;
--ink-soft: #4A5763;
--ink-faint: #7B8894;
--accent: #0E8F86;
--accent-2: #0B6E67;
--accent-soft: #0E8F8618;
--signal: #B67A1E;
--signal-soft: #B67A1E1A;
--good: #2F8F5B;
--serif: "Wanted Sans Variable", "Pretendard Variable", system-ui, -apple-system, sans-serif; /* display role */
--sans: "Pretendard Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--mono: "JetBrains Mono", "Pretendard Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--maxw: 960px;
--shadow: 0 1px 2px rgba(20,35,48,.04), 0 8px 24px rgba(20,35,48,.06);
/* glass + glow — light: frosted white + colored halo shadow (glow는 발광 대신 후광) */
--glass-bg: rgba(255,255,255,.58);
--glass-border: rgba(20,35,48,.09);
--glass-blur: 12px;
--glass-sat: 1.3;
--glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 22px color-mix(in srgb, var(--accent) 16%, transparent);
--glow-signal: 0 0 0 1px color-mix(in srgb, var(--signal) 30%, transparent), 0 6px 22px color-mix(in srgb, var(--signal) 18%, transparent);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0E1216; --surface: #161C22; --surface-2: #1C242B; --line: #2A343D;
--ink: #E6ECF1; --ink-soft: #AEBAC5; --ink-faint: #7B8894;
--accent: #35B8AD; --accent-2: #5CD3C8; --accent-soft: #35B8AD1F;
--signal: #D6A24A; --signal-soft: #D6A24A1F;
--good: #46C97E;
--shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
/* dark: 반투명 유리 + 진짜 발광 블룸 */
--glass-bg: rgba(22,28,34,.52);
--glass-border: rgba(255,255,255,.09);
--glass-blur: 14px;
--glass-sat: 1.25;
--glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 34%, transparent);
--glow-signal: 0 0 0 1px color-mix(in srgb, var(--signal) 40%, transparent), 0 0 26px color-mix(in srgb, var(--signal) 38%, transparent);
}
}
:root[data-theme="dark"] {
--bg: #0E1216; --surface: #161C22; --surface-2: #1C242B; --line: #2A343D;
--ink: #E6ECF1; --ink-soft: #AEBAC5; --ink-faint: #7B8894;
--accent: #35B8AD; --accent-2: #5CD3C8; --accent-soft: #35B8AD1F;
--signal: #D6A24A; --signal-soft: #D6A24A1F;
--good: #46C97E;
--shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.35);
--glass-bg: rgba(22,28,34,.52); --glass-border: rgba(255,255,255,.09); --glass-blur: 14px; --glass-sat: 1.25;
--glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 34%, transparent);
--glow-signal: 0 0 0 1px color-mix(in srgb, var(--signal) 40%, transparent), 0 0 26px color-mix(in srgb, var(--signal) 38%, transparent);
}
:root[data-theme="light"] {
--bg: #F6F8FA; --surface: #FFFFFF; --surface-2: #EEF2F5; --line: #DCE3E9;
--ink: #1B2530; --ink-soft: #4A5763; --ink-faint: #7B8894;
--accent: #0E8F86; --accent-2: #0B6E67; --accent-soft: #0E8F8618;
--signal: #B67A1E; --signal-soft: #B67A1E1A;
--good: #2F8F5B;
--shadow: 0 1px 2px rgba(20,35,48,.04), 0 8px 24px rgba(20,35,48,.06);
--glass-bg: rgba(255,255,255,.58); --glass-border: rgba(20,35,48,.09); --glass-blur: 12px; --glass-sat: 1.3;
--glow-accent: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 22px color-mix(in srgb, var(--accent) 16%, transparent);
--glow-signal: 0 0 0 1px color-mix(in srgb, var(--signal) 30%, transparent), 0 6px 22px color-mix(in srgb, var(--signal) 18%, transparent);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0; background: var(--bg); color: var(--ink);
font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
/* 앰비언트 배경 — 유리 표면이 굴절할 은은한 색 블롭, 천천히 흐르는 오로라 */
body::before {
content: ""; position: fixed; inset: -12%; z-index: -1; pointer-events: none;
background:
radial-gradient(46% 38% at 84% -2%, var(--accent-soft), transparent 70%),
radial-gradient(42% 40% at -4% 102%, var(--signal-soft), transparent 70%);
animation: aurora 26s ease-in-out infinite;
}
@keyframes aurora {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-3%, 2.5%, 0) scale(1.12); }
}
/* 스크롤 진행 바 — 네이티브 스크롤 기반 애니메이션 (미지원 시 그냥 안 뜸) */
@supports (animation-timeline: scroll()) {
body::after {
content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50;
transform-origin: 0 50%; transform: scaleX(0);
background: linear-gradient(90deg, var(--accent), var(--signal));
animation: scrollProgress linear both; animation-timeline: scroll(root);
}
@keyframes scrollProgress { to { transform: scaleX(1); } }
}
a { color: var(--accent); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
/* ---- Top bar ---- */
.topbar {
position: sticky; top: 0; z-index: 20;
backdrop-filter: saturate(1.4) blur(10px);
background: color-mix(in srgb, var(--bg) 82%, transparent);
border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.topbar .brand { font-family: var(--serif); font-weight: 600; font-size: 17px; text-decoration: none; color: var(--ink); letter-spacing: -0.01em; }
.topbar .brand .dot { color: var(--accent); }
.topbar nav { display: flex; gap: 20px; }
.topbar nav a { font-family: var(--mono); font-size: 12.5px; text-decoration: none; color: var(--ink-soft); letter-spacing: 0.02em; }
.topbar nav a:hover { color: var(--accent); }
.topbar nav { align-items: center; }
.theme-toggle {
font-family: var(--sans); font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft);
transition: border-color .15s, color .15s, transform .15s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 모바일: 앵커 링크만 숨기고 테마 토글은 유지 */
@media (max-width: 560px) { .topbar nav a { display: none; } }
/* ---- Hero ---- */
.hero { position: relative; padding: 96px 0 56px; overflow: hidden; }
.hero::before {
content: ""; position: absolute; inset: -20% 0 0; z-index: -1;
background:
radial-gradient(60% 50% at 82% 8%, var(--accent-soft), transparent 70%),
radial-gradient(40% 40% at 0% 100%, var(--signal-soft), transparent 70%);
opacity: .9;
}
/* 히어로 배경 스크롤 패럴랙스 — 배경이 스크롤보다 느리게 흐름 (본문 텍스트는 건드리지 않음) */
@supports (animation-timeline: scroll()) {
.hero::before { animation: heroParallax linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
@keyframes heroParallax { to { transform: translateY(26%) scale(1.08); } }
}
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
h1.name { font-family: var(--serif); font-weight: 800; font-size: clamp(42px, 8.5vw, 76px); line-height: 1; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.name .en { display: block; font-family: var(--sans); font-size: 0.4em; color: var(--ink-faint); font-weight: 500; letter-spacing: 0.02em; margin-top: 14px; }
.role { margin: 26px 0 0; font-size: 18px; color: var(--ink-soft); }
.role strong { color: var(--ink); font-weight: 600; }
.thesis { max-width: 60ch; font-family: var(--serif); font-size: clamp(19px, 2.4vw, 24px); line-height: 1.5; color: var(--ink); margin: 26px 0 0; text-wrap: pretty; }
.contacts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.contacts a {
font-family: var(--mono); font-size: 13px; text-decoration: none; color: var(--ink-soft);
border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: var(--surface);
transition: border-color .15s, color .15s, transform .15s;
}
.contacts a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.contacts a:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---- Metrics band ---- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 40px 0 0; box-shadow: var(--shadow); }
.metric { background: var(--surface); padding: 22px 20px; }
.metric .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.metric .v small { font-size: 15px; color: var(--ink-faint); font-weight: 500; }
.metric .k { margin-top: 10px; font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
/* ---- Sections ---- */
section { padding: 54px 0; border-bottom: 1px solid var(--line); }
.sec-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 8px; }
.sec-num { font-family: var(--mono); font-size: 13px; color: var(--accent); letter-spacing: 0.05em; }
h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 4vw, 33px); letter-spacing: -0.02em; margin: 0; }
.lede { color: var(--ink-soft); max-width: 68ch; margin: 14px 0 28px; }
/* ---- Project cards (clickable) ---- */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 28px; }
.proj-card {
position: relative; display: flex; flex-direction: column; gap: 12px;
background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px;
text-decoration: none; color: inherit; box-shadow: var(--shadow);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.proj-card { overflow: hidden; }
/* 유리 광택 스윕 — hover 시 사선 하이라이트가 카드를 훑고 지나감 */
.proj-card::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(115deg, transparent 34%, color-mix(in srgb, var(--ink) 10%, transparent) 48%, transparent 62%);
transform: translateX(-130%); transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.proj-card:hover::before { transform: translateX(130%); }
.proj-card > * { position: relative; z-index: 1; }
.proj-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--glow-accent), var(--shadow); }
.proj-card .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.proj-card h3 { font-size: 19px; margin: 0; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; }
.proj-card p { margin: 0; font-size: 14.5px; color: var(--ink-soft); flex: 1; }
.proj-card .card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.proj-card .go { font-family: var(--mono); font-size: 13px; color: var(--accent); transition: transform .18s ease; }
.proj-card:hover .go { transform: translateX(4px); }
/* 진행중 flagship: 금색 글로우 (다크=발광 / 라이트=후광, 펄스 없음) */
.proj-card.gold { border-color: var(--signal); box-shadow: var(--glow-signal), var(--shadow); }
/* flagship (SSTR2) 상세 히어로: 단색 악센트 언더라인 */
.detail-hero.flagship h1 { display: inline-block; }
.detail-hero.flagship h1::after { content: ""; display: block; height: 4px; width: 72px; margin-top: 14px; border-radius: 4px; background: var(--accent); }
.proj-card.gold:hover { transform: translateY(-4px); border-color: var(--signal); box-shadow: var(--glow-signal), var(--shadow); }
.proj-card.gold .go { color: var(--signal); }
.chip.now { background: var(--signal-soft); color: var(--signal); font-weight: 600; }
/* ---- Chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--mono); font-size: 11.5px; padding: 3px 9px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.chip.metric-chip { background: var(--surface-2); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chip.conf { color: var(--signal); background: var(--signal-soft); background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--signal-soft) 4px, var(--signal-soft) 5px); }
/* ---- Architecture flow ---- */
.arch { display: flex; flex-direction: column; gap: 30px; }
.arch-block .a-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.arch-block .a-head .a-t { font-size: 16px; font-weight: 650; color: var(--ink); }
.arch-block .a-head .a-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stage { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; box-shadow: var(--shadow); }
.stage .s-t { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.stage .s-d { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 4px; }
.stage.out { border-color: var(--accent); background: var(--accent-soft); }
.arrow { color: var(--accent); font-family: var(--mono); font-size: 15px; flex: none; }
.silo { display: flex; flex-direction: column; gap: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.lane { display: flex; flex-direction: column; gap: 8px; }
.lane .lane-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); }
.merge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 14px; }
.merge .m-label { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; }
.arch-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.arch-note .chip { flex: none; margin-top: 1px; }
/* ---- Research areas ---- */
.research-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 26px; }
.research-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.research-item .r-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.research-item h3 { font-size: 16px; margin: 0; font-weight: 650; color: var(--ink); }
.research-item p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; flex: 1; }
.research-item a { font-family: var(--mono); font-size: 12.5px; color: var(--accent); text-decoration: none; }
.research-item a:hover { text-decoration: underline; }
/* ---- Talks + subhead ---- */
.subhead { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 30px 0 10px; }
.talks { display: flex; flex-direction: column; }
.talk { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); align-items: baseline; }
.talk:first-child { border-top: none; }
.talk .tw { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
.talk .tt { font-size: 14.5px; color: var(--ink); }
@media (max-width: 620px) { .talk { grid-template-columns: 1fr; gap: 3px; } }
/* ---- Timeline ---- */
.phase-title { font-family: var(--mono); font-size: 13px; letter-spacing: 0.03em; color: var(--accent); margin: 32px 0 2px; }
.phase-title .yr { color: var(--ink-faint); margin-left: 8px; }
.phase:first-of-type .phase-title { margin-top: 22px; }
.trk { display: inline-block; font-family: var(--mono); font-size: 10.5px; padding: 2px 8px; border-radius: 5px; background: var(--surface-2); color: var(--ink-soft); margin: 3px 4px 0 0; }
.edu-note { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); margin-top: 24px; line-height: 1.6; }
.timeline { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: none; }
.row .when { font-family: var(--mono); font-size: 13px; color: var(--ink-faint); padding-top: 2px; font-variant-numeric: tabular-nums; }
.row .what h3 { margin: 0 0 4px; font-size: 16.5px; font-weight: 650; }
.row .what .org { color: var(--accent); font-size: 13.5px; font-family: var(--mono); }
.row .what p { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.badge { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--line); color: var(--ink-faint); margin-left: 8px; vertical-align: middle; }
/* ---- Stack ---- */
.stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.stack-group { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.stack-group .label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.stack-group .items { display: flex; flex-wrap: wrap; gap: 7px; }
.tech { font-size: 13px; padding: 4px 11px; border-radius: 7px; background: var(--surface-2); color: var(--ink); }
/* ---- Awards ---- */
.awards { display: flex; flex-direction: column; }
.award { display: grid; grid-template-columns: 108px 1fr auto; gap: 18px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--line); }
.award:first-child { border-top: none; }
.award .date { font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.award .title { font-size: 14.5px; color: var(--ink); }
.award .by { font-size: 12.5px; color: var(--ink-faint); font-family: var(--mono); text-align: right; }
/* ---- Values ---- */
blockquote.motto { font-family: var(--serif); font-size: clamp(20px, 3vw, 27px); line-height: 1.4; color: var(--ink); border-left: 3px solid var(--accent); margin: 0 0 28px; padding: 6px 0 6px 22px; text-wrap: balance; }
.values { display: grid; gap: 14px; }
.value { display: flex; gap: 16px; align-items: flex-start; }
.value .mark { font-family: var(--mono); color: var(--accent); font-size: 14px; padding-top: 3px; }
.value p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.value strong { color: var(--ink); }
/* ---- Facts ---- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fact { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.fact .fk { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.fact .fv { margin-top: 6px; font-size: 15px; color: var(--ink); }
.repos { margin-top: 26px; }
.repos .repos-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 12px; }
/* ---- Detail page ---- */
.detail-hero { padding: 52px 0 30px; }
.back-link { font-family: var(--mono); font-size: 12.5px; text-decoration: none; color: var(--ink-soft); display: inline-flex; gap: 6px; align-items: center; }
.back-link:hover { color: var(--accent); }
.detail-hero .cat { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 26px 0 12px; }
.detail-hero h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 5.5vw, 46px); line-height: 1.05; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.detail-hero .sub { font-size: 18px; color: var(--ink-soft); margin: 18px 0 0; max-width: 62ch; }
.detail-hero .meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
.detail-hero .meta b { color: var(--ink-soft); font-weight: 500; }
.detail-hero .links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn { font-family: var(--mono); font-size: 13px; text-decoration: none; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); transition: border-color .15s, color .15s, transform .15s; }
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .btn.primary, .btn.primary { color: #06110F; }
.btn.primary:hover { color: #06110F; background: var(--accent-2); border-color: var(--accent-2); }
.prose { max-width: 68ch; }
.prose h3 { font-size: 15px; font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin: 30px 0 10px; }
.prose p { margin: 0 0 14px; color: var(--ink-soft); font-size: 15.5px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); font-size: 15.5px; }
.prose li { margin: 6px 0; }
.prose strong { color: var(--ink); }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 8px 0 6px; }
.result { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); }
.result .rv { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.result .rv small { font-size: 14px; color: var(--ink-faint); }
.result .rk { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
/* ---- Problem -> Solution schematic ---- */
.ps-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.ps-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); }
.ps-panel.problem { border-top: 3px solid var(--signal); }
.ps-panel.solution { border-top: 3px solid var(--accent); }
.ps-panel .ps-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.ps-panel.problem .ps-tag { color: var(--signal); }
.ps-panel.solution .ps-tag { color: var(--accent); }
.ps-panel h4 { margin: 0 0 10px; font-size: 16px; color: var(--ink); font-weight: 650; }
.ps-panel p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.ps-panel ul { margin: 0; padding-left: 18px; }
.ps-panel li { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin: 7px 0; }
.ps-panel li strong { color: var(--ink); }
.ps-arrow { display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 24px; font-family: var(--mono); }
@media (max-width: 640px) { .ps-grid { grid-template-columns: 1fr; } .ps-arrow { transform: rotate(90deg); padding: 4px 0; } }
/* ---- Fade-curve chart ---- */
.fade-chart { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); margin: 8px 0; }
.fade-chart .chart-title { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; }
.fade-chart svg { width: 100%; height: auto; display: block; }
.fade-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.fade-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.fade-legend .swatch { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
/* ---- Inline charts ---- */
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; box-shadow: var(--shadow); margin: 8px 0; }
.chart .chart-title { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 16px; }
.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 12px; }
.bar-row .bl { font-size: 13.5px; color: var(--ink-soft); }
.bar-row .bt { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.bar-row .bf { height: 100%; border-radius: 6px; background: var(--line); }
.bar-row.hi .bf { background: var(--accent); }
.bar-row.hi .bl { color: var(--ink); font-weight: 650; }
.bar-row .bv { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink); text-align: right; }
.chart-cap { font-size: 12px; color: var(--ink-faint); margin: 12px 0 0; }
.roc-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.roc-wrap svg { flex: none; }
.roc-wrap .roc-note { font-size: 13.5px; color: var(--ink-soft); max-width: 34ch; }
.roc-wrap .roc-note b { font-family: var(--mono); color: var(--accent); font-size: 20px; }
/* ---- 3D face viewer ---- */
.face-gallery { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.face-thumbs { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; padding-right: 4px; }
.face-thumb { padding: 0; border: 2px solid transparent; border-radius: 12px; background: none; cursor: pointer; line-height: 0; flex: none; }
.face-thumb img { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.face-thumb.active { border-color: var(--accent); }
.face-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .face-gallery { grid-template-columns: 1fr; } .face-thumbs { flex-direction: row; max-height: none; overflow-x: auto; } }
.face3d-wrap { display: flex; flex-direction: column; gap: 12px; }
#face3d { width: 100%; height: clamp(260px, 64vw, 400px); border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); background: radial-gradient(120% 100% at 50% 0%, var(--surface), var(--surface-2)); cursor: grab; touch-action: pan-y; }
#face3d:active { cursor: grabbing; }
.face-toggle { display: flex; gap: 8px; }
.face-toggle button { font-family: var(--mono); font-size: 12.5px; padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.face-toggle button.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.face-toggle button:hover { border-color: var(--accent); }
#face3d-status { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); min-height: 1em; }
/* ---- Project figure (embedded image) ---- */
.proj-figure { margin: 0; }
.proj-figure img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.proj-figure figcaption { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-top: 10px; }
/* ---- Video embed ---- */
.video-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ---- Signature figure (journal-style, promoted to home) ---- */
.signature-fig { margin: 28px 0 0; }
.signature-fig figcaption { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); max-width: 74ch; }
.signature-fig figcaption b { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink); }
.signature-fig figcaption a { font-family: var(--mono); font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.signature-fig figcaption a:hover { text-decoration: underline; }
/* ---- SST-14 mutation animation ---- */
.sst-mut { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); }
/* agent pipeline */
.mut-pipeline { display: flex; align-items: stretch; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.mut-step { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); transition: border-color .2s, background .2s, box-shadow .2s; }
.mut-step b { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.mut-step small { font-size: 11px; color: var(--ink-faint); }
.mut-step.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.mut-step.on b { color: var(--accent); }
.mut-sep { align-self: center; color: var(--ink-faint); font-family: var(--mono); }
/* peptide chain */
.mut-stage { position: relative; overflow-x: auto; padding: 22px 6px 6px; }
.beads { position: relative; display: flex; gap: 10px; justify-content: center; min-width: max-content; margin: 0 auto; }
.beads::before { content: ""; position: absolute; top: 21px; left: 22px; right: 22px; height: 3px; background: var(--line); z-index: 0; }
.bead-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.bead-wrap.lift { transform: translateY(-8px); }
.bead { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 650; font-size: 16px; color: #10171d; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: border-color .35s ease, background-color .5s ease, box-shadow .35s ease; }
.bead .aa { display: block; transition: opacity .45s ease, transform .45s cubic-bezier(.3,.8,.3,1); }
.bead.morph .aa { opacity: 0; transform: scale(.2) rotate(-25deg); }
.bead[data-cls="hyd"] { background: #d9dee4; }
.bead[data-cls="pol"] { background: #a9ded6; }
.bead[data-cls="pos"] { background: #a9c4ff; }
.bead[data-cls="neg"] { background: #ffb3b3; }
.bead[data-cls="cys"] { background: #f0cf7a; }
.bead-wrap .pos { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); font-variant-numeric: tabular-nums; transition: color .3s; }
.bead-wrap.lift .pos { color: var(--accent); }
.bead.fixed { box-shadow: inset 0 0 0 2px var(--signal), 0 1px 3px rgba(0,0,0,.12); }
.bead.active { border-color: var(--accent); animation: beadGlow 1.6s ease-in-out infinite; }
.bead.pass { border-color: var(--good); box-shadow: 0 0 12px 1px color-mix(in srgb, var(--good) 55%, transparent); }
.bead.fail { border-color: #d64545; box-shadow: 0 0 12px 1px rgba(214,69,69,.5); }
@keyframes beadGlow { 0%,100% { box-shadow: 0 0 0 0 var(--accent-soft), 0 1px 3px rgba(0,0,0,.12); } 50% { box-shadow: 0 0 16px 3px color-mix(in srgb, var(--accent) 55%, transparent); } }
/* mutation callout */
.mut-callout { position: absolute; top: 6px; transform: translateX(-50%); font-family: var(--mono); font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 8px; background: var(--accent); color: #06110f; white-space: nowrap; opacity: 0; transition: opacity .35s ease, top .35s ease, background-color .35s ease; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.mut-callout::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--accent); }
.mut-callout.show { opacity: 1; top: 0; }
.mut-callout.ok { background: var(--good); }
.mut-callout.ok::after { border-top-color: var(--good); }
.mut-callout.no { background: #d64545; color: #fff; }
.mut-callout.no::after { border-top-color: #d64545; }
/* meta + legend */
.mut-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 18px; font-family: var(--mono); font-size: 12.5px; }
.mut-agent { color: var(--accent); }
.mut-iter, .mut-score { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.mut-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }
.mut-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mut-legend .sw { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.mut-legend .sw.hyd { background: #d9dee4; } .mut-legend .sw.pol { background: #a9ded6; }
.mut-legend .sw.pos { background: #a9c4ff; } .mut-legend .sw.neg { background: #ffb3b3; }
.mut-legend .sw.cys { background: #f0cf7a; box-shadow: inset 0 0 0 2px var(--signal); }
@media (prefers-reduced-motion: reduce) { .bead, .mut-step, .mut-callout { transition: none; } }
/* ---- 3D molecule viewer ---- */
.mol-wrap { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
#mol { width: min(340px, 100%); height: clamp(240px, 62vw, 300px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; cursor: grab; touch-action: pan-y; box-shadow: var(--shadow); }
#mol:active { cursor: grabbing; }
.mol-legend { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 6px; }
.mol-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
/* ---- Inline diagram (SVG) ---- */
.diagram { margin: 20px 0 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram svg { display: block; width: 100%; min-width: 600px; height: auto; }
.diagram figcaption { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); max-width: 76ch; }
.diagram figcaption b { font-family: var(--mono); font-size: 12px; color: var(--ink); }
/* ---- Research table (VLM 등 데이터 비교) ---- */
.rtable-wrap { overflow-x: auto; margin: 10px 0 6px; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); background: var(--surface); -webkit-overflow-scrolling: touch; }
.rtable { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 560px; }
.rtable thead th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); padding: 13px 16px; background: var(--surface-2); border-bottom: 2px solid var(--line); white-space: nowrap; }
.rtable td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-soft); line-height: 1.45; }
.rtable tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.rtable tbody tr:last-child td { border-bottom: none; }
.rtable tbody tr:hover td { background: var(--accent-soft); }
.rtable td:first-child { color: var(--ink); font-weight: 600; }
.rtable td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; text-align: right; }
/* 채택/강조 행 */
.rtable tr.feat td { background: var(--signal-soft) !important; }
.rtable tr.feat td:first-child { box-shadow: inset 3px 0 0 var(--signal); }
/* 인라인 점수 막대 */
.rtable .score { display: inline-flex; align-items: center; gap: 9px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.rtable .track { display: inline-block; width: 54px; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; flex: none; }
.rtable .track i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.rtable .yes { color: var(--good); font-weight: 600; }
.rtable .no { color: var(--signal); }
.rtable caption { caption-side: bottom; text-align: left; font-size: 12px; color: var(--ink-faint); padding: 12px 16px 4px; line-height: 1.55; background: var(--surface); }
.tag-unsure { font-family: var(--mono); font-size: 10.5px; color: var(--signal); background: var(--signal-soft); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
/* ---- Footer ---- */
footer { padding: 40px 0 64px; color: var(--ink-faint); font-size: 13px; }
footer .note { font-family: var(--mono); font-size: 12px; line-height: 1.7; display: flex; gap: 10px; align-items: flex-start; }
footer .note .chip { flex: none; }
footer .foot-links { display: flex; gap: 16px; margin-top: 18px; }
footer .foot-links a { font-family: var(--mono); font-size: 12.5px; text-decoration: none; color: var(--ink-soft); }
footer .foot-links a:hover { color: var(--accent); }
/* ---- Glassmorphism (카드 표면 + 시그니처 Figure) ---- */
.proj-card, .research-item, .stack-group, .sst-mut {
background: var(--glass-bg);
-webkit-backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
backdrop-filter: saturate(var(--glass-sat)) blur(var(--glass-blur));
border-color: var(--glass-border);
}
/* backdrop-filter 미지원 브라우저: 불투명 폴백 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.proj-card, .research-item, .stack-group, .sst-mut { background: var(--surface); }
}
/* Figure는 어둠 속 발광 중심 — accent 글로우 + 느린 숨쉬기 */
.signature-fig .sst-mut { box-shadow: var(--glow-accent), var(--shadow); animation: figBreath 5s ease-in-out infinite; }
@keyframes figBreath {
0%, 100% { filter: drop-shadow(0 0 0 transparent); }
50% { filter: drop-shadow(0 0 15px color-mix(in srgb, var(--accent) 30%, transparent)); }
}
/* ---- Motion ---- */
[data-reveal] { opacity: 0; transform: translateY(20px) scale(.985); filter: blur(7px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease; transition-delay: var(--rd, 0ms); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }
.hero .eyebrow, .hero h1, .hero .role, .hero .thesis, .hero .contacts, .hero .metrics { animation: rise .7s cubic-bezier(.2,.7,.2,1) backwards; }
.hero h1 { animation-delay: .05s; }
.hero .role { animation-delay: .12s; }
.hero .thesis { animation-delay: .18s; }
.hero .contacts { animation-delay: .24s; }
.hero .metrics { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) {
.row { grid-template-columns: 1fr; gap: 6px; }
.award { grid-template-columns: 90px 1fr; }
.award .by { grid-column: 2; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
[data-reveal] { opacity: 1; transform: none; filter: none; }
html { scroll-behavior: auto; }
}