:root {
    --c-bg: #ffffff; --c-surface: #ffffff;
    --c-ink: #17233b; --c-ink-2: #57627a; --c-ink-3: #93a2b8;
    --c-line: #e3e8f0; --c-line-strong: #ccd5e3;
    --c-blue: #0d4ea6; --c-blue-deep: #0a3c80; --c-blue-soft: #edf3fb;
    --c-green: #17753c; --c-green-soft: #e8f5ec;
    --c-amber: #93540b; --c-amber-soft: #fdf2dd;
    --font-ui: 'Pretendard Variable', Pretendard, -apple-system, 'Segoe UI', sans-serif;
    --font-rec: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--font-ui); line-height: 1.6; }
a { color: var(--c-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 900px; margin: 0 auto; padding: 0 1.2rem; }
.rec { font-family: var(--font-rec); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* top nav */
.topnav {
    position: sticky; top: 0; z-index: 20;
    background: rgba(255,255,255,0.9); backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--c-line);
}
.topnav .container { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.topnav .brand { font-weight: 800; letter-spacing: -0.02em; color: var(--c-ink); }
.topnav nav { display: flex; gap: 1.3rem; font-size: 0.92rem; font-weight: 550; }
.topnav nav a { color: var(--c-ink-2); }
.topnav nav a:hover { color: var(--c-blue); text-decoration: none; }
.topnav nav .nav-sep { color: var(--c-ink-3); user-select: none; }

/* hero */
.hero { padding: 2.6rem 0 1.6rem; }
.hero-grid { display: grid; grid-template-columns: 190px 1fr; gap: 2rem; align-items: start; }
.hero-photo-slot {
    width: 190px; height: 190px; border-radius: 14px; border: 1px solid var(--c-line);
    background: var(--c-blue-soft); position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.hero-photo-slot::after {
    content: 'TWG'; font-family: var(--font-rec); font-weight: 700; font-size: 2rem;
    color: var(--c-line-strong); letter-spacing: 0.05em;
}
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-name { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.2rem; }
.hero-title { font-size: 1.05rem; color: var(--c-blue); font-weight: 600; margin-bottom: 0.9rem; }
.hero-bio { color: var(--c-ink-2); margin-bottom: 1rem; }
.hero-contact { font-size: 0.9rem; color: var(--c-ink-2); margin-bottom: 0.6rem; }
.hero-contact .rec { color: var(--c-ink); }
.hero-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.hero-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 1px solid var(--c-line-strong); border-radius: 8px;
    padding: 0.35rem 0.8rem; font-size: 0.88rem; font-weight: 600; color: var(--c-ink);
}
.hero-link:hover { background: var(--c-blue-soft); border-color: var(--c-blue); color: var(--c-blue-deep); text-decoration: none; }

/* availability notice */
.notice {
    margin: 1.4rem 0 0; border: 1px solid var(--c-line-strong); background: var(--c-blue-soft);
    border-radius: 12px; padding: 1rem 1.2rem; color: var(--c-ink);
}
.notice b { color: var(--c-blue-deep); }
.notice a { font-weight: 600; }

/* sections */
section { padding-bottom: 0.6rem; }
.section-title {
    font-size: 1.15rem; font-weight: 750; letter-spacing: -0.01em; color: var(--c-ink);
    margin: 2rem 0 0.9rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--c-line-strong);
}

/* CV rows: mono period on the left, content on the right */
.cv-row { display: flex; gap: 1.1rem; padding: 0.35rem 0; }
.cv-period { flex: 0 0 9.5rem; font-family: var(--font-rec); font-size: 0.78rem; color: var(--c-blue); padding-top: 0.15rem; white-space: nowrap; }
.cv-body { min-width: 0; }
.cv-role { font-weight: 600; color: var(--c-ink); }
.cv-org { color: var(--c-ink-2); }
.cv-note { font-size: 0.88rem; color: var(--c-ink-3); }
.cv-thesis { font-size: 0.88rem; color: var(--c-ink-2); font-style: normal; }
.cv-list { list-style: none; padding: 0; margin: 0; }
.cv-bullets { margin: 0.2rem 0 0; padding-left: 1.05rem; font-size: 0.9rem; color: var(--c-ink-2); }
.cv-bullets li { padding: 0.05rem 0; }
.cv-bullets::marker, .cv-bullets li::marker { color: var(--c-ink-3); }
.cv-stint { margin-top: 0.45rem; }
.cv-stint-period { font-family: var(--font-rec); font-size: 0.72rem; color: var(--c-ink-3); margin-right: 0.5rem; white-space: nowrap; }
.cv-stint-team { font-size: 0.92rem; font-weight: 600; color: var(--c-ink-2); }

.svc-row { padding: 0.22rem 0; font-size: 0.95rem; line-height: 1.5; }
.svc-venue { font-weight: 550; color: var(--c-ink); margin-right: 0.6rem; }
.svc-roles { color: var(--c-ink-2); }

/* publications */
.year-group { margin-bottom: 0.9rem; }
.pub-list { list-style: none; padding: 0; margin: 0; }
.pub-item { padding: 0.8rem 0; border-bottom: 1px solid var(--c-line); }
.pub-item:first-child { padding-top: 0.3rem; }
.pub-item:last-child { border-bottom: none; }
.pub-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; color: var(--c-ink); line-height: 1.4; margin-bottom: 0.28rem; }
.pub-label {
    font-family: var(--font-rec); font-size: 0.72rem; font-weight: 700; color: var(--c-blue);
    background: var(--c-blue-soft); padding: 0.08rem 0.4rem; border-radius: 5px;
    margin-right: 0.5rem; vertical-align: 0.12em; white-space: nowrap;
    user-select: none; -webkit-user-select: none;
}
.pub-authors { font-size: 0.9rem; color: var(--c-ink-2); line-height: 1.55; margin-bottom: 0.25rem; }
.pub-authors a { color: var(--c-ink); }
.pub-authors a:hover { color: var(--c-blue); }
.pub-authors .me { color: var(--c-ink); font-weight: 700; }
.pub-venue { font-family: var(--font-rec); font-size: 0.8rem; color: var(--c-ink-3); }
.pub-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.pub-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.6rem; border-radius: 6px; font-size: 0.74rem; font-weight: 600; border: 1px solid transparent; }
.pub-badge-paper   { background: var(--c-blue-soft);  color: var(--c-blue);  border-color: #d5e2f3; }
.pub-badge-code    { background: var(--c-green-soft); color: var(--c-green); border-color: #c7e6d1; }
.pub-badge-website { background: #e9f6fa;             color: #0e7490;        border-color: #c5e8f0; }
.pub-badge-award   { background: var(--c-amber-soft); color: var(--c-amber); border-color: #f3ddb0; }

footer { border-top: 1px solid var(--c-line); margin-top: 2.5rem; padding: 1.4rem 0 2.5rem; color: var(--c-ink-3); font-size: 0.85rem; }

@media (max-width: 640px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-photo-slot { width: 140px; height: 140px; }
    .cv-row { flex-direction: column; gap: 0.15rem; }
    .cv-period { flex: none; padding-top: 0; }
    .topnav nav { gap: 0.9rem; }
}

/* ---------- project pages ---------- */
.page-head { padding: 2.4rem 0 0.6rem; }
.page-kicker { font-family: var(--font-rec); font-size: 0.78rem; color: var(--c-blue); margin-bottom: 0.5rem; }
.page-title { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; margin: 0 0 0.5rem; }
.page-authors { font-size: 0.95rem; color: var(--c-ink-2); margin-bottom: 0.2rem; }
.page-authors .me { color: var(--c-ink); font-weight: 700; }
.page-meta { font-family: var(--font-rec); font-size: 0.8rem; color: var(--c-ink-3); }
.page-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }

.prose { color: var(--c-ink-2); }
.prose p { margin: 0 0 0.9rem; }
.prose strong { color: var(--c-ink); font-weight: 650; }
.prose ol, .prose ul { padding-left: 1.15rem; margin: 0 0 0.9rem; }
.prose li { padding: 0.1rem 0; }
.prose li::marker { color: var(--c-ink-3); }

.abstract { border-left: 3px solid var(--c-line-strong); padding: 0.1rem 0 0.1rem 1.1rem; margin-bottom: 1.4rem; }

/* figure slots: the caption shows even before the image file exists */
figure.fig { margin: 1.2rem 0 1.4rem; }
.fig-slot {
    border: 1px dashed var(--c-line-strong); border-radius: 10px; background: #fafcff;
    min-height: 110px; display: flex; align-items: center; justify-content: center; padding: 0.9rem;
}
.fig-slot img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.fig-slot .pending { font-family: var(--font-rec); font-size: 0.74rem; color: var(--c-ink-3); text-align: center; }
figure.fig figcaption { font-size: 0.85rem; color: var(--c-ink-2); margin-top: 0.5rem; line-height: 1.5; }
figure.fig figcaption b { color: var(--c-ink); font-weight: 650; }

.refs { list-style: none; padding: 0; margin: 0; counter-reset: ref; }
.refs li { position: relative; padding: 0.3rem 0 0.3rem 2.2rem; font-size: 0.86rem; color: var(--c-ink-2); line-height: 1.5; }
.refs li::before {
    counter-increment: ref; content: '[' counter(ref) ']';
    position: absolute; left: 0; font-family: var(--font-rec); font-size: 0.76rem; color: var(--c-ink-3);
}

.backlink { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; margin-top: 0.4rem; }

/* Drive-hosted video embeds */
.video-embed {
    position: relative; width: 100%; padding-top: 74.074%;
    border: 1px solid var(--c-line); border-radius: 10px; overflow: hidden; background: #0b0f18;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* rendered figures */
.fig-frame {
    border: 1px solid var(--c-line); border-radius: 10px; background: #fafcff;
    padding: 0.7rem; text-align: center;
}
.fig-frame img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 4px; }
/* widths mirror the original project page's proportions relative to its text column */
.fig-frame img.w-48 { width: 48%; }
.fig-frame img.w-74 { width: 74%; }
.fig-frame.tight { padding: 0.5rem 0.7rem; }

/* qualitative comparison grid: 84x84 rollouts upscaled */
.qual-label { font-family: var(--font-rec); font-size: 0.75rem; color: var(--c-blue); margin: 1rem 0 0.35rem; }
/* the original renders these 84px rollouts at exactly 2x, three across, left-aligned */
.qual-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 168px)); gap: 0.5rem 1.85rem; justify-content: start; }
.qual-grid figure { margin: 0; }
.qual-grid figcaption { font-size: 0.78rem; color: var(--c-ink-2); text-align: center; margin-top: 0.35rem; }
.qual-grid img, .qual-grid video {
    width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid var(--c-line);
    image-rendering: pixelated; background: #0b0f18;
}