:root { --ink:#13272b; --muted:#52676b; --line:#b9c9c6; --paper:#f4f7f6; --teal:#08756f; --mono:"IBM Plex Mono",monospace; --display:"Space Grotesk","Noto Sans KR",sans-serif; --body:"Noto Sans KR",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:#dce5e2; color:var(--ink); font:14px/1.75 var(--body); }
a { color:inherit; text-decoration:none; }
p,h1,h2,h3,h4 { margin-top:0; }
p,li { word-break:keep-all; overflow-wrap:anywhere; }
h1,h2,h3,h4 { word-break:keep-all; }
:focus-visible { outline:2px solid var(--teal); outline-offset:4px; }
.resume-actions { position:sticky; top:0; z-index:5; display:flex; justify-content:center; flex-wrap:wrap; gap:10px; padding:12px; background:#071416; }
.resume-actions a,.resume-actions button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:8px 15px; border:1px solid #79d8cd; background:transparent; color:#eafffb; font:12px var(--body); cursor:pointer; }
.resume-actions :focus-visible { outline-color:#9effea; }
.resume-actions button { background:#9effea; color:#071416; }
.resume { width:min(960px,calc(100% - 30px)); margin:30px auto 60px; padding:50px 56px; background:var(--paper); box-shadow:0 18px 55px rgb(20 39 43 / .12); }
.resume-header { display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end; padding-bottom:26px; border-bottom:2px solid var(--ink); }
.resume-header > div > p { margin-bottom:12px; color:var(--teal); font:500 11px/1.6 var(--mono); letter-spacing:.04em; }
h1 { margin-bottom:12px; font:700 43px/1.2 var(--display); letter-spacing:-.055em; }
h1 span { display:inline-block; margin-left:10px; color:var(--muted); font:500 12px var(--mono); letter-spacing:.05em; }
.resume-header h2 { margin:0; font-size:17px; font-weight:500; }
address { display:grid; gap:6px; font:12px/1.6 var(--mono); font-style:normal; text-align:right; }
address span { color:var(--muted); }
.resume-summary { padding:26px 0; border-bottom:1px solid var(--line); }
.resume h3 { margin-bottom:18px; color:var(--teal); font-size:14px; font-weight:600; }
.resume-summary > p { margin-bottom:0; }
.resume-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:22px; }
.resume-metrics div { padding-left:16px; border-left:1px solid var(--line); }
.resume-metrics div:first-child { padding-left:0; border:0; }
.resume-metrics strong { display:block; color:var(--teal); font:600 25px/1.4 var(--display); letter-spacing:-.04em; }
.resume-metrics span { color:var(--muted); font-size:11px; }
.resume-summary .metrics-note { margin-top:16px; color:var(--muted); font-size:11px; }
.resume-section { padding:26px 0; border-bottom:1px solid var(--line); }
.resume-project { display:grid; grid-template-columns:210px 1fr; gap:30px; padding:22px 0; border-top:1px solid var(--line); }
.resume-project:first-of-type { border-top:0; padding-top:0; }
.resume-project:last-child { padding-bottom:0; }
.project-title h4 { margin-bottom:9px; font:600 21px/1.35 var(--display); letter-spacing:-.03em; }
.project-title p { margin:0; color:var(--muted); font-size:12px; }
.project-title > span { display:block; margin-bottom:12px; color:var(--teal); font:500 11px var(--mono); }
.project-content p { margin:0 0 10px; }
.project-content b { margin-right:7px; color:var(--teal); font-size:12px; font-weight:500; }
ul { margin:10px 0 0; padding-left:18px; }
li { padding:3px 0; }
.project-content .project-result { margin:12px 0 0; color:var(--teal); font-size:12px; }
.resume-related article { display:grid; grid-template-columns:170px 1fr; gap:20px; margin-top:15px; }
.resume-related h4 { margin:0; font-size:14px; font-weight:500; }
.resume-related p { margin:0; color:var(--muted); font-size:13px; }
.resume-experience > p { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; }
.resume-experience > p > span { color:var(--muted); font-size:12px; }
.milestone { margin:14px 0 0; padding:10px 12px; border-left:3px solid var(--teal); background:#e7eeec; color:#315155; font-size:12px; }
.resume-skills { border-bottom:0; padding-bottom:0; }
.resume-skills > div { display:grid; grid-template-columns:170px 1fr; gap:20px; padding:9px 0; border-bottom:1px solid #d4dfdc; }
.resume-skills b { font-size:12px; font-weight:500; }
.resume-skills p { margin:0; color:var(--muted); font:12px/1.75 var(--mono); overflow-wrap:anywhere; }
@media screen and (max-width:760px) {
  .resume { padding:34px 26px; }
  .resume-header { grid-template-columns:1fr; gap:24px; }
  address { text-align:left; }
  .resume-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .resume-metrics div:nth-child(3) { border:0; padding-left:0; }
  .resume-project { grid-template-columns:1fr; gap:18px; }
  .resume-related article { grid-template-columns:1fr; gap:8px; }
  .resume-skills > div { grid-template-columns:1fr; gap:5px; }
}
@media screen and (max-width:380px) {
  .resume { padding:28px 20px; }
  .resume-actions { gap:7px; }
  .resume-actions a,.resume-actions button { padding-inline:10px; }
  h1 span { display:block; margin:10px 0 0; }
  .resume-metrics strong { font-size:23px; }
}
@media print {
  @page { size:A4; margin:14mm; }
  body { background:white; font-size:9pt; line-height:1.6; }
  .resume-actions { display:none; }
  .resume { width:auto; margin:0; padding:0; box-shadow:none; background:white; }
  .resume-header { padding-bottom:15px; }
  h1 { font-size:29pt; }
  .resume-header h2 { font-size:11pt; }
  .resume-header > div > p { font-size:8pt; }
  address { font-size:8pt; }
  .resume h3 { font-size:10pt; margin-bottom:12px; break-after:avoid; }
  .resume-summary { padding:16px 0; }
  .resume-metrics { margin-top:15px; }
  .resume-metrics strong { font-size:19pt; }
  .resume-metrics span,.resume-summary .metrics-note { font-size:8pt; }
  .resume-section { padding:18px 0; }
  .resume-project { grid-template-columns:175px 1fr; gap:24px; padding:18px 0; break-inside:avoid; }
  .project-title h4 { font-size:13pt; }
  .project-title > span,.project-title p { font-size:8pt; }
  .project-content .project-result { font-size:8pt; }
  li { padding:2px 0; }
  .resume-related { break-before:page; }
  .resume-related article { break-inside:avoid; }
  .resume-related h4 { font-size:10pt; }
  .resume-related p { font-size:9pt; }
  .resume-experience,.resume-skills { break-inside:avoid; }
  .resume-skills p { font-size:8.5pt; }
  .resume-skills b { font-size:9pt; }
  .milestone { font-size:8.5pt; }
}