:root {
  --paper: #fbfbf8;
  --ink: #202321;
  --muted: #626964;
  --faint: #8d958f;
  --line: #d9ddd7;
  --soft: #f0f2ed;
  --blue: #2458d3;
  --blue-soft: #e5ebfa;
  --mono: "DM Mono", ui-monospace, monospace;
  --sans: "Inter", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --page: min(1060px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 85px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { color: inherit; font: inherit; }
.page { width: var(--page); margin-inline: auto; }
.skip-link { position: fixed; z-index: 999; top: 0; left: 1rem; padding: .65rem 1rem; color: white; background: var(--blue); transform: translateY(-120%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 50; top: 0; background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.header-inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; }
.site-name { color: var(--ink); font-weight: 600; text-decoration: none; letter-spacing: -.02em; }
.site-name span { display: inline-block; width: 6px; height: 6px; margin-left: .25rem; border-radius: 50%; background: var(--blue); vertical-align: .2em; }
nav { display: flex; gap: 1.8rem; }
nav a { color: var(--muted); font: 12px var(--mono); text-decoration: none; transition: color .15s; }
nav a:hover { color: var(--blue); }
.menu-button { display: none; padding: .35rem .55rem; border: 1px solid var(--line); background: transparent; font: 11px var(--mono); }

.intro { position: relative; padding: 145px 0 100px; display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(55px, 8vw, 110px); align-items: center; }
.coordinate-widget { position: absolute; top: 38px; left: 0; width: 96px; display: block; color: var(--faint); text-align: center; pointer-events: none; }
.coordinate-widget svg { display: block; width: 96px; height: 96px; overflow: visible; }
.coordinate-widget > span { display: block; margin-top: -.1rem; font: 7px var(--mono); letter-spacing: .04em; }
.coordinate-orbit { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.axis { stroke-width: 1.7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.axis-x { stroke: #d9534f; }.axis-y { stroke: #2f9b62; }.axis-z { stroke: var(--blue); }
.coordinate-origin { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.coordinate-widget text { font: 500 8px var(--mono); dominant-baseline: middle; text-anchor: middle; }
.label-x { fill: #d9534f; }.label-y { fill: #2f9b62; }.label-z { fill: var(--blue); }
@media (min-width: 1250px) { .intro { padding-top: 80px; } .coordinate-widget { top: 55px; left: -92px; } }
.kicker { margin: 0 0 .9rem; color: var(--blue); font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.intro h1 { margin: 0 0 1rem; font-size: clamp(45px, 7vw, 76px); line-height: 1; letter-spacing: -.065em; font-weight: 600; }
.role { max-width: 670px; margin: 0 0 2rem; color: var(--muted); font-size: 16px; }
.bio { max-width: 680px; margin: 0 0 1rem; color: #343936; font-size: 15px; line-height: 1.85; }
.profile-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: 2rem; }
.profile-links a, .profile-links button { padding: 0; color: var(--blue); border: 0; border-bottom: 1px solid currentColor; background: none; font: 12px var(--mono); text-decoration: none; cursor: pointer; }

.profile-figure { position: relative; z-index: 4; margin: 0; border: 1px solid var(--line); background: var(--soft); }
.photo-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, var(--soft), var(--blue-soft)); }
.photo-frame::after { content: ""; position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--blue) 32%, transparent); pointer-events: none; }
.photo-fallback { color: color-mix(in srgb, var(--blue) 60%, var(--paper)); font: 500 clamp(54px, 8vw, 92px) var(--mono); letter-spacing: -.08em; }
.profile-photo { position: absolute; z-index: 0; inset: 0; background: url("assets/profile.jpg") center 28% / cover no-repeat; filter: saturate(.84) contrast(1.03); mask-image: linear-gradient(to bottom, transparent 0%, black 16%, black 100%); }
.photo-index { position: absolute; z-index: 2; left: 24px; bottom: 22px; padding: .3rem .45rem; color: white; background: var(--blue); font: 8px var(--mono); letter-spacing: .08em; }
.figure-caption { padding: .55rem .7rem; display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--faint); font: 9px var(--mono); }

.section { padding: 90px 0; display: grid; grid-template-columns: 190px 1fr; gap: 40px; border-top: 1px solid var(--line); }
.section-label { display: flex; align-items: baseline; gap: .8rem; align-self: start; }
.section-label span { color: var(--blue); font: 10px var(--mono); }
.section-label h2 { margin: 0; font-size: 14px; font-weight: 600; }
.section-body, .research-content { min-width: 0; }
.research-statement { max-width: 740px; margin: 0 0 1.8rem; font: italic 400 clamp(27px, 4vw, 42px)/1.28 var(--serif); letter-spacing: -.025em; }
.research-content > p:not(.research-statement) { max-width: 730px; margin: 0; color: var(--muted); }
.research-axis { margin-top: 3.5rem; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.research-axis div { padding: 1.2rem 0; }
.research-axis div + div { padding-left: 1.2rem; }
.research-axis span { display: block; margin-bottom: .7rem; color: var(--faint); font: 9px var(--mono); }
.research-axis strong { font-size: 13px; line-height: 1.55; font-weight: 500; }
.research-axis i { color: var(--blue); font-style: normal; }

.log { margin-bottom: 90px; display: grid; grid-template-columns: 190px 1fr; gap: 40px; padding: 28px 32px; background: var(--soft); border-left: 3px solid var(--blue); }
.log-heading h2 { margin: 0 0 .25rem; font-size: 13px; }.log-heading p { margin: 0; color: var(--faint); font-size: 11px; }
.log ol { margin: 0; padding: 0; list-style: none; }
.log li { display: grid; grid-template-columns: 85px 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }.log li:last-child { border: 0; }
.log time { color: var(--blue); font: 10px var(--mono); }.log li p { margin: 0; color: var(--muted); font-size: 12px; }

.project { display: grid; grid-template-columns: 260px 1fr; gap: 34px; padding: 0 0 60px; margin-bottom: 60px; border-bottom: 1px solid var(--line); }.project:last-child { margin-bottom: 0; }
.project-thumb { align-self: start; margin: 0; color: var(--blue); border: 1px solid var(--line); background: var(--soft); }
.project-thumb svg, .project-thumb img { display: block; width: 100%; height: auto; }
.project-thumb .svg-caption { fill: currentColor; font: 7px var(--mono); }
.project-meta { display: flex; gap: .5rem 1rem; margin-bottom: .7rem; color: var(--faint); font: 10px var(--mono); }
.project-meta span:first-child { color: var(--blue); }
.project-info h3 { margin: 0 0 1rem; font-size: 22px; line-height: 1.3; letter-spacing: -.025em; font-weight: 600; }
.project-info > p { max-width: 690px; margin: 0 0 1rem; color: var(--muted); font-size: 13px; line-height: 1.8; }
.project-info .contribution { padding-left: 1rem; border-left: 2px solid var(--blue-soft); color: #3e4540; }
.contribution b { color: var(--ink); font-weight: 600; }
.item-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; }.item-links span, .item-links a { padding: .25rem .45rem; color: var(--muted); background: var(--soft); font: 9px var(--mono); text-decoration: none; }.item-links a:hover { color: var(--blue); }

.publication { display: grid; grid-template-columns: 245px 1fr; gap: 1.7rem; padding: 1.6rem 0 1.9rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.publication-figure { margin: 0; align-self: start; background: var(--paper); border: 1px solid var(--line); }
.publication-figure img { display: block; width: 100%; height: auto; }
.publication-figure figcaption { padding: .4rem .55rem; color: var(--faint); border-top: 1px solid var(--line); font: 8px var(--mono); }
.publication h3 { max-width: 760px; margin: 0 0 .7rem; font-size: 18px; line-height: 1.45; letter-spacing: -.02em; font-weight: 600; }
.publication h3 a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.publication-authors, .publication-venue { max-width: 760px; margin: 0 0 .55rem; color: var(--muted); font-size: 12px; line-height: 1.8; }
.publication-authors strong { color: var(--ink); font-weight: 600; }.publication-venue { color: var(--ink); }.publication-venue em { color: var(--blue); }
.publication-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; font: 10px var(--mono); }.publication-links span { color: var(--line); }

.cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.cv-column h3 { margin: 0 0 1.4rem; padding-bottom: .7rem; border-bottom: 1px solid var(--ink); font-size: 13px; }
.cv-column h3:not(:first-child) { margin-top: 2.8rem; }
.cv-item { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.cv-item time { color: var(--faint); font: 9px var(--mono); text-transform: uppercase; }.cv-item b { font-size: 12px; }.cv-item p { margin: .25rem 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.experience-details { margin: 1rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.experience-details li { display: grid; grid-template-columns: 24px 1fr; gap: .75rem; padding: .8rem 0 0; }
.experience-details li + li { margin-top: .75rem; border-top: 1px solid var(--line); }
.experience-details span { color: var(--blue); font: 9px var(--mono); }

.contact { margin-block: 30px 90px; padding: 32px; display: flex; align-items: center; justify-content: space-between; background: var(--blue); color: white; }
.contact p { margin: 0; font-size: 13px; }.contact a { color: white; font: 11px var(--mono); text-decoration: none; }.contact a span { margin-left: .5rem; }
footer { border-top: 1px solid var(--line); }.footer-inner, footer .page { min-height: 90px; display: flex; align-items: center; justify-content: space-between; color: var(--faint); font: 9px var(--mono); } footer p { margin: 0; }

@media (max-width: 800px) {
  :root { --page: min(100% - 36px, 650px); }
  .intro { grid-template-columns: 1fr; padding: 135px 0 70px; }.profile-figure { max-width: 380px; }
  .section, .log { grid-template-columns: 1fr; gap: 28px; }.section { padding-block: 70px; }.log { padding: 24px; }
  .project { grid-template-columns: 220px 1fr; gap: 24px; }
  .publication { grid-template-columns: 190px 1fr; }
  .cv-grid { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .menu-button { display: block; }.header-inner { position: relative; } nav { display: none; }.header-inner nav.open { position: absolute; top: 64px; left: -18px; right: -18px; display: flex; flex-direction: column; gap: 0; padding: .6rem 18px 1rem; background: var(--paper); border-bottom: 1px solid var(--line); }.header-inner nav a { padding: .65rem 0; border-bottom: 1px solid var(--line); }
  .intro h1 { font-size: 48px; }.intro { gap: 50px; }.profile-links { gap: .8rem 1.1rem; }
  .research-axis { grid-template-columns: 1fr; }.research-axis i { display: none; }.research-axis div + div { padding-left: 0; border-top: 1px solid var(--line); }
  .log li { grid-template-columns: 72px 1fr; }
  .project { grid-template-columns: 1fr; }.project-thumb { width: min(100%, 320px); }.project-info h3 { font-size: 20px; }
  .publication { grid-template-columns: 1fr; gap: .9rem; }.publication-figure { width: min(100%, 290px); }.publication h3 { font-size: 16px; }
  .contact { align-items: flex-start; flex-direction: column; gap: 1rem; padding: 24px; }.contact a { font-size: 9px; }
  footer .page { align-items: flex-start; flex-direction: column; justify-content: center; gap: .3rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

@media print {
  :root { --page: 100%; }
  .site-header, .profile-figure, .log, #projects, .contact, footer, .profile-links { display: none !important; }
  .intro { min-height: auto; padding: 0 0 2rem; display: block; }.intro h1 { font-size: 38px; }
  .section { display: grid; grid-template-columns: 110px 1fr; padding: 2rem 0; break-inside: avoid; }
  #research, #cv { display: grid; }.research-axis { margin-top: 1.5rem; }.cv-grid { grid-template-columns: 1fr 1fr; }
  @page { margin: 17mm; }
}