:root {
  --blue: #1264f3;
  --blue-soft: #dbe8ff;
  --ink: #171717;
  --black: #111213;
  --paper: #ffffff;
  --canvas: #f3f3f3;
  --line: #d8d8d8;
  --muted: #64676c;
  --grid: rgba(255, 255, 255, 0.055);
  --max: 1050px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "IBM Plex Sans", "IBM Plex Sans KR", sans-serif;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--blue); color: white; }
.skip-link:focus { top: 12px; }

.cv-page {
  width: min(calc(100% - 36px), var(--max));
  margin: 30px auto;
  background: var(--paper);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.12);
}

.profile-dashboard {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: 42px 46px 32px;
  color: #f5f7fb;
  background-color: var(--black);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
}
.profile-dashboard::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 64%, rgba(18, 100, 243, 0.08) 64% 100%);
}
.profile-top { position: relative; z-index: 1; display: grid; grid-template-columns: 140px 1fr; gap: 28px; }
.portrait-column { display: flex; flex-direction: column; align-items: center; }
.portrait {
  width: 132px;
  height: 132px;
  object-fit: cover;
  object-position: 50% 30%;
  border: 3px solid #315aa7;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(18, 100, 243, 0.12);
}
.affiliation-mark { width: 100%; margin-top: 14px; border: 1px solid #374151; }
.affiliation-mark strong, .affiliation-mark span { display: block; padding: 6px 8px; border-bottom: 1px solid #374151; }
.affiliation-mark strong { color: #8db7ff; font-size: 10px; }
.affiliation-mark span { color: #c9ced6; font-size: 9px; }
.affiliation-mark span:last-child { border-bottom: 0; }
.signal { margin: 0 0 8px; color: #83adff; font-size: 10px; font-weight: 700; }
h1 { margin: 0; color: #fff; font-size: clamp(40px, 5.2vw, 58px); line-height: 1; font-weight: 600; }
.position { margin: 10px 0 0; color: #f3f3f3; font-size: 15px; font-weight: 500; line-height: 1.4; }
.profile-summary { max-width: 720px; margin: 8px 0 0; color: #bfc5ce; font-size: 13px; line-height: 1.6; }

.keyword-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; border-top: 1px solid #39404a; border-left: 3px solid var(--blue); }
.keyword-grid span { min-height: 34px; padding: 8px 10px; border-right: 1px solid #39404a; border-bottom: 1px solid #39404a; color: #d9dde4; font-size: 10px; }
.keyword-grid span:nth-child(4) { grid-column: span 2; }
.evidence-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border: 1px solid #39404a; }
.evidence-strip div { min-height: 58px; padding: 10px 12px; border-right: 1px solid #39404a; }
.evidence-strip div:last-child { border: 0; }
.evidence-strip small { display: block; margin-bottom: 4px; color: #81abfb; font-size: 8px; font-weight: 700; }
.evidence-strip strong { color: #d9dde4; font-size: 10px; font-weight: 500; }
.contact-strip { display: grid; grid-template-columns: 1.2fr 1fr 170px; margin-top: 14px; border: 1px solid #39404a; }
.contact-strip > * { min-height: 62px; padding: 10px 12px; border-right: 1px solid #39404a; }
.direct-contact, .academic-ids { display: flex; flex-direction: column; justify-content: center; gap: 4px; color: #cfd4dd; font-size: 10px; }
.direct-contact a { text-decoration: none; }
.academic-ids > span { color: #aeb6c2; }
.academic-ids div { display: flex; flex-wrap: wrap; gap: 10px; }
.academic-ids a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.profile-button { display: grid; place-items: center; border-right: 0 !important; background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; }

.dashboard-nav { position: sticky; top: 0; z-index: 40; min-height: 54px; display: grid; grid-template-columns: repeat(3, 105px) 1fr; background: #fff; border-bottom: 1px solid var(--line); }
.metric { padding: 8px 13px; border-right: 1px solid var(--line); border-top: 3px solid var(--blue); }
.metric strong { display: block; color: var(--blue); font-size: 20px; line-height: 1; }
.metric span { color: var(--muted); font-size: 9px; }
.section-links { display: flex; justify-content: flex-end; }
.section-links a { min-width: 100px; display: grid; place-items: center; border-left: 1px solid #ececec; font-size: 11px; font-weight: 600; text-decoration: none; }
.section-links a:hover, .section-links a:focus-visible { color: var(--blue); box-shadow: inset 0 -3px 0 var(--blue); }
.nav-toggle { display: none; }

.cv-content { padding: 0 54px; }
.cv-section { padding: 52px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 58px; }
.section-title { display: grid; grid-template-columns: 36px 1fr auto; align-items: end; gap: 12px; margin-bottom: 26px; }
.section-title > span { color: var(--blue); font-size: 13px; font-weight: 700; }
.section-title p { margin: 0 0 3px; color: var(--blue); font-size: 9px; font-weight: 700; }
.section-title h2 { margin: 0; font-size: 27px; line-height: 1.1; font-weight: 600; }
.section-title > a { color: var(--blue); font-size: 10px; font-weight: 700; text-underline-offset: 4px; }
.overview-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; }
.stack { display: grid; gap: 14px; }
.panel { padding: 20px; border: 1px solid #cfcfcf; background-color: #fff; background-image: linear-gradient(#f1f1f1 1px, transparent 1px), linear-gradient(90deg, #f1f1f1 1px, transparent 1px); background-size: 28px 28px; }
.panel h3 { margin: 0 0 16px; font-size: 16px; font-weight: 600; }
.interests ul { margin: 0; padding: 0; list-style: none; }
.interests li { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid #dfdfdf; }
.interests li strong { font-size: 12px; }
.interests li span { color: var(--muted); font-size: 11px; }
.cv-list { display: grid; grid-template-columns: 70px 1fr; gap: 14px 10px; margin: 0; }
.cv-list dt { color: var(--blue); font-size: 11px; font-weight: 700; }
.cv-list dd { margin: 0; }
.cv-list dd strong, .cv-list dd span { display: block; }
.cv-list dd strong { font-size: 12px; }
.cv-list dd span { margin-top: 3px; color: var(--muted); font-size: 10px; }

.publication-table { border-top: 2px solid var(--ink); }
.publication-table article { display: grid; grid-template-columns: 56px 1fr 62px; gap: 16px; align-items: start; padding: 17px 8px; border-bottom: 1px solid var(--line); }
.publication-table time { color: var(--blue); font-size: 11px; font-weight: 700; }
.publication-table h3 { margin: 0; font-size: 14px; line-height: 1.45; font-weight: 600; }
.publication-table h3 a { text-decoration: none; }
.publication-table h3 a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.publication-table p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.index-tag { justify-self: end; padding: 3px 6px; border: 1px solid #a9c6ff; color: var(--blue); font-size: 8px; font-weight: 700; }
.index-tag.kci { border-color: #aba5dc; color: #6356a4; }
.teaching-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.course-panel h3 { max-width: 390px; font-size: 22px; line-height: 1.25; }
.course-panel > p:last-child, .contribution-grid .panel > p:last-child { color: var(--muted); font-size: 12px; }
.ko { color: var(--muted); }
.blue-label { margin: 0 0 10px; color: var(--blue) !important; font-size: 9px !important; font-weight: 700; }
.philosophy-panel > div { padding: 10px 0; border-top: 1px solid #ddd; }
.philosophy-panel strong { font-size: 12px; }
.philosophy-panel p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.contribution-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contribution-grid .panel { min-height: 180px; }
.contribution-grid h3 { font-size: 15px; line-height: 1.45; }
.contribution-grid h3 a { text-underline-offset: 3px; }
.contact-card { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.contact-card > div { min-height: 80px; padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-card > div:nth-child(2n) { border-right: 0; }
.contact-card > div:nth-last-child(-n+2) { border-bottom: 0; }
.contact-card small { display: block; margin-bottom: 6px; color: var(--blue); font-size: 8px; font-weight: 700; }
.contact-card a, .contact-card span { font-size: 12px; }
.cv-footer { display: flex; justify-content: space-between; gap: 24px; padding: 22px 54px; background: #e9e9e9; color: #686868; font-size: 9px; }

@media (max-width: 900px) {
  .cv-page { width: 100%; margin: 0; }
  .profile-dashboard { padding: 34px 28px 28px; }
  .profile-top { grid-template-columns: 120px 1fr; }
  .portrait { width: 112px; height: 112px; }
  .keyword-grid { grid-template-columns: repeat(2, 1fr); }
  .keyword-grid span:nth-child(4) { grid-column: auto; }
  .contact-strip { grid-template-columns: 1fr 1fr; }
  .profile-button { grid-column: span 2; min-height: 40px; }
  .dashboard-nav { grid-template-columns: repeat(3, 90px) 1fr; }
  .section-links a { min-width: 82px; }
}

@media (max-width: 700px) {
  .profile-dashboard { min-height: auto; padding: 28px 18px 22px; }
  .profile-top { grid-template-columns: 1fr; }
  .portrait-column { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
  .portrait { width: 92px; height: 92px; }
  .affiliation-mark { margin: 0; }
  h1 { font-size: 39px; }
  .position { font-size: 12px; }
  .profile-summary { font-size: 11px; line-height: 1.5; }
  .keyword-grid { grid-template-columns: 1fr; }
  .evidence-strip, .contact-strip { display: none; }
  .dashboard-nav { grid-template-columns: repeat(3, 1fr) 62px; }
  .metric { padding-inline: 8px; }
  .section-links { display: none; position: absolute; left: 0; right: 0; top: 54px; flex-direction: column; background: #fff; border-bottom: 1px solid var(--line); }
  .section-links.open { display: flex; }
  .section-links a { min-height: 44px; border-left: 0; border-top: 1px solid #eee; }
  .nav-toggle { display: block; border: 0; border-left: 1px solid var(--line); background: #fff; font-size: 10px; font-weight: 600; }
  .cv-content { padding: 0 18px; }
  .cv-section { padding: 42px 0; }
  .overview-grid, .teaching-grid, .contribution-grid { grid-template-columns: 1fr; }
  .interests li { grid-template-columns: 1fr; gap: 4px; }
  .publication-table article { grid-template-columns: 44px 1fr; gap: 10px; }
  .index-tag { display: none; }
  .contact-card { grid-template-columns: 1fr; }
  .contact-card > div { border-right: 0; }
  .contact-card > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .contact-card > div:last-child { border-bottom: 0; }
  .cv-footer { display: block; padding: 20px 18px; }
  .cv-footer span { display: block; margin-top: 5px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }