/* Donggeun Kwon — Minimal CV */
:root {
  --ink: #222;
  --muted: #666;
  --line: #ddd;
  --paper: #fff;
  --link: #344e64;
  --sans: Arial, "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover, .cv-action:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
}
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
::selection { background: #e4ebef; }
.skip { position: absolute; left: 20px; top: -80px; background: white; padding: 12px; z-index: 3; }
.skip:focus { top: 10px; }
.cv { max-width: 960px; margin: 0 auto; padding: 50px 36px 32px; }

.cv-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 182px;
  gap: 0 24px;
  align-items: start;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--ink);
}
h1 { font-size: 40px; line-height: 1.2; letter-spacing: -1.2px; font-weight: 600; }
.role { font-size: 17px; margin-top: 10px; }
.affiliation { font-size: 16px; color: #555; line-height: 1.7; margin-top: 4px; }
.profile-photo { display: block; width: 182px; height: 192px; object-fit: cover; object-position: center 25%; }
.profile-links {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 0;
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  font-size: 15px;
}
.profile-links li { display: inline-flex; align-items: baseline; }
.profile-links li + li::before { content: "·"; color: #999; margin: 0 12px; }
.cv-action { border: 0; padding: 0; background: none; color: var(--link); cursor: pointer; line-height: inherit; }

.intro { padding-top: 25px; max-width: 775px; font-size: 17px; color: #444; line-height: 1.8; }
.research { margin-top: 12px; font-size: 16px; color: #555; }
.research strong { color: var(--ink); font-weight: 600; }
.section { margin-top: 29px; }
h2 { font-size: 21px; font-weight: 600; letter-spacing: -.2px; border-bottom: 1px solid var(--line); padding-bottom: 7px; margin-bottom: 14px; }
.cv-list { list-style: none; padding: 0; margin: 0; }
.cv-row { display: grid; grid-template-columns: 111px minmax(0, 1fr); gap: 20px; padding-block: 0 12px; }
.cv-row:last-child { padding-bottom: 0; }
.date { font-size: 15px; color: var(--muted); padding-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
h3 { font-size: 17px; font-weight: 500; line-height: 1.55; }
.meta { font-size: 15px; color: var(--muted); line-height: 1.65; margin-top: 3px; }
.project { padding-bottom: 20px; }
.publication { padding-bottom: 17px; }
.publication h3 { font-size: 17px; font-weight: 500; line-height: 1.55; }
.authors { font-size: 15px; color: #555; margin-top: 4px; line-height: 1.6; }
.authors strong { font-weight: 600; color: #333; }
.publication .meta { font-size: 15px; margin-top: 2px; }
.publication-note { color: #444; }
.paper-link { white-space: nowrap; }
.section-title-row { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.section-title-row h2 { border: 0; margin: 0; padding-bottom: 7px; }
.section-title-row > a { font-size: 14px; white-space: nowrap; }
.contact-grid { display: grid; grid-template-columns: 111px minmax(0, 1fr); gap: 7px 20px; font-size: 16px; margin: 0; }
.contact-grid dt { font-size: 15px; color: var(--muted); }
.contact-grid dd { margin: 0; }
.footer { margin-top: 35px; border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); font-size: 14px; display: flex; justify-content: space-between; gap: 15px; }
.footer a { color: var(--muted); }

@media (max-width: 650px) {
  .cv { padding: 32px 22px 25px; }
  .cv-header { grid-template-columns: minmax(0, 1fr) 117px; column-gap: 16px; }
  h1 { font-size: 32px; letter-spacing: -.9px; }
  .profile-photo { width: 117px; height: 124px; }
  .role { font-size: 16px; }
  .affiliation { font-size: 14px; }
  .profile-links { font-size: 13px; }
  .profile-links li + li::before { margin-inline: 9px; }
  .intro { font-size: 16px; padding-top: 22px; }
  .research { font-size: 14px; }
  .section { margin-top: 25px; }
  h2 { font-size: 19px; }
  .cv-row { grid-template-columns: 90px minmax(0, 1fr); gap: 13px; padding-bottom: 14px; }
  .date { font-size: 12px; padding-top: 3px; }
  .cv-row h3 { font-size: 16px; }
  .meta, .authors, .publication .meta { font-size: 13px; }
  .publication { padding-bottom: 19px; }
  .section-title-row { gap: 12px; align-items: center; }
  .section-title-row > a { font-size: 12px; }
  .contact-grid { grid-template-columns: 90px minmax(0, 1fr); gap: 7px 13px; font-size: 14px; }
  .contact-grid dt { font-size: 13px; }
  .footer { margin-top: 28px; font-size: 12px; flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .header-identity { display: contents; }
  .header-identity h1 { grid-column: 1 / -1; }
  .header-identity .role, .header-identity .affiliation { grid-column: 1; }
  .profile-photo { grid-column: 2; grid-row: 2 / span 2; margin-top: 10px; }
  .cv-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

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

@page { size: A4; margin: 14mm 15mm; }
@media print {
  html { scroll-behavior: auto; }
  body { background: white; color: #111; font-size: 11pt; line-height: 1.45; }
  .skip, .cv-control, .footer, .section-title-row > a { display: none !important; }
  .cv { max-width: none; padding: 0; margin: 0; }
  .cv-header { grid-template-columns: minmax(0, 1fr) 114px; column-gap: 18px; padding-bottom: 13px; break-inside: avoid; }
  .header-identity { display: block; }
  .profile-photo { width: 114px; height: 121px; grid-column: auto; grid-row: auto; margin-top: 0; }
  h1 { font-size: 27pt; letter-spacing: -.6px; }
  .role { font-size: 13pt; margin-top: 6px; }
  .affiliation { font-size: 10.5pt; line-height: 1.5; }
  .profile-links { font-size: 10.5pt; margin-top: 8px; }
  .intro { padding-top: 13px; font-size: 11pt; line-height: 1.6; max-width: none; break-inside: avoid; }
  .research { font-size: 10.5pt; margin-top: 6px; }
  .section { margin-top: 17px; }
  h2 { font-size: 13pt; padding-bottom: 4px; margin-bottom: 9px; break-after: avoid; }
  .section-title-row { margin-bottom: 9px; }
  .section-title-row h2 { padding-bottom: 4px; }
  .cv-row { grid-template-columns: 98px minmax(0, 1fr); gap: 15px; padding-bottom: 8px; break-inside: avoid; }
  .date { font-size: 10pt; padding-top: 1px; }
  .cv-row h3, .publication h3 { font-size: 11pt; line-height: 1.4; }
  .meta, .authors, .publication .meta { font-size: 10pt; line-height: 1.4; margin-top: 2px; }
  .project { padding-bottom: 11px; }
  .publication { padding-bottom: 11px; }
  details > summary { display: none !important; }
  details::details-content { display: block !important; content-visibility: visible !important; }
  details:not([open]) > :not(summary) { display: block !important; }
  .contact-grid { font-size: 10.5pt; grid-template-columns: 98px minmax(0, 1fr); gap: 4px 15px; break-inside: avoid; }
  .contact-grid dt { font-size: 10pt; }
  a { color: #111; text-decoration: none; }
}