:root { --paper:#fff; --background:#fafaf8; --ink:#232724; --muted:#71756f; --line:#e5e7e1; --accent:#2455dc; --accent-soft:#f1f5ff; --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--background); color:var(--ink); font-family:var(--font); font-size:18.4px; line-height:1.75; -webkit-font-smoothing:antialiased; word-break:keep-all; overflow-wrap:anywhere; }
body,button,a { -webkit-tap-highlight-color:transparent; }
h1,h2,h3,h4,h5,h6,p,dl,dd,ul { margin:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
button,a { touch-action:manipulation; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; border-radius:2px; }
::selection { background:#dce6ff; }
[hidden] { display:none !important; }
section,article { scroll-margin-top:96px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:20px; top:-100px; padding:10px 18px; background:var(--ink); color:white; z-index:100; }
.skip-link:focus { top:16px; }
.topbar { height:78px; border-bottom:1px solid var(--line); background:rgba(250,250,248,.96); position:sticky; top:0; z-index:20; }
.topbar-inner { height:100%; max-width:1260px; margin:auto; padding:0 42px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:22px; }
.brand>span:first-child { font-size:29.9px; letter-spacing:-1.5px; font-weight:800; }
.brand i { color:var(--accent); font-style:normal; }
.brand-caption { font-size:13.8px; color:var(--muted); border-left:1px solid #d9ddd5; padding-left:22px; }
.topbar-actions { display:flex; align-items:center; gap:28px; font-size:13.8px; }
.topbar-actions a,.topbar-actions button { min-height:44px; display:inline-flex; align-items:center; gap:9px; }
.topbar-actions a:hover,.topbar-actions button:hover { color:var(--accent); }
.menu-toggle { display:none !important; }
.page-shell { max-width:1260px; margin:auto; padding:0 42px; display:grid; grid-template-columns:190px minmax(0,1fr); gap:60px; }
.sidebar-inner { position:sticky; top:142px; padding-right:12px; }
.sidebar-label { font-size:11.5px; color:var(--muted); letter-spacing:1.3px; margin-bottom:24px; }
.sidebar-label>span { padding:0 7px; color:#9b9f98; }
#section-nav { display:flex; flex-direction:column; gap:6px; }
#section-nav a { font-size:14.95px; padding:8px 0; display:flex; align-items:center; gap:16px; color:var(--muted); transition:color .15s; }
.nav-number { flex-shrink:0; white-space:nowrap; font-size:11.5px; font-variant-numeric:tabular-nums; opacity:.65; }
#section-nav a[aria-current] { color:var(--accent); font-weight:700; }
#section-nav a:hover { color:var(--ink); }
.sidebar-note { margin-top:74px; font-size:12.65px; color:var(--muted); max-width:140px; }
.tiny-line { display:block; background:#bec3b9; width:24px; height:1px; margin-bottom:17px; }
.sidebar-note a { display:inline-block; margin-top:17px; color:var(--ink); }
main { background:var(--paper); min-width:0; padding:64px 52px 0; border-left:1px solid var(--line); border-right:1px solid var(--line); }
main:focus { outline:none; }
.eyebrow { font-size:11.5px; font-weight:600; letter-spacing:1.55px; color:var(--accent); }
.hero-topline { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:44px; }
.hero-folio { font-size:10.35px; color:#82877e; letter-spacing:1px; }
.identity { display:flex; align-items:center; justify-content:space-between; gap:24px; }
h1 { font-size:73.6px; line-height:1.12; letter-spacing:-3.8px; font-weight:750; }
.name-dot { color:var(--accent); }
.english-name { color:var(--muted); font-size:16.1px; margin-top:12px; letter-spacing:.4px; }
.portrait { width:94px; height:94px; border-radius:50%; object-fit:cover; filter:saturate(.7); }
.role { margin-top:26px; font-size:12.65px; letter-spacing:.35px; color:var(--accent); font-weight:600; }
.hero-title { margin-top:22px; font-size:clamp(27.6px,3.0475vw,39.1px); line-height:1.5; letter-spacing:-1.3px; font-weight:650; }
.hero-title span { display:block; }
.hero-description { margin-top:22px; max-width:570px; color:#62685e; font-size:16.1px; line-height:1.95; }
.hero-actions { display:flex; align-items:center; gap:26px; margin:30px 0 42px; font-size:13.8px; }
.primary-link { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; padding:12px 18px; background:var(--accent); color:white; border-radius:3px; }
.primary-link:hover { background:#193faf; }
.text-link { min-height:44px; display:inline-flex; align-items:center; gap:18px; }
.text-link:hover { color:var(--accent); }
.focus-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); gap:16px; }
.focus-strip dt { color:var(--muted); font-size:11.5px; margin-bottom:7px; }
.focus-strip dd { font-size:11.5px; font-weight:600; }
.about-note { display:grid; grid-template-columns:92px minmax(0,1fr); gap:16px; margin:28px 0 6px; }
.about-note>p:last-child { color:var(--muted); font-size:13.8px; line-height:1.95; }
.about-note .eyebrow { padding-top:3px; color:#6d7467; font-size:10.35px; }
.content-section { padding:76px 0 0; }
.section-heading { margin-bottom:32px; }
.section-heading h2 { font-size:31.05px; line-height:1.45; letter-spacing:-1.15px; font-weight:700; margin-top:13px; }
.section-description { font-size:13.8px; color:var(--muted); margin-top:12px; line-height:1.9; }
.experience-entry+.experience-entry { margin-top:52px; }
.experience-row { border-top:2px solid var(--ink); padding:22px 0 26px; }
.experience-projects { margin-left:8px; padding-left:24px; border-left:1px solid var(--line); }
.experience-date { font-size:11.5px; color:var(--muted); display:flex; align-items:baseline; gap:8px; margin:10px 0; font-variant-numeric:tabular-nums; }
.timeline-dot { width:5px; height:5px; flex-shrink:0; border-radius:50%; background:var(--accent); }
.experience-row h3 { font-size:25.3px; letter-spacing:-.5px; }
.job-role { font-size:11.5px; color:var(--muted); margin-top:3px; }
.project { border-bottom:1px solid var(--line); }
.project summary { display:grid; grid-template-columns:24px minmax(0,1fr) 18px; align-items:start; gap:14px; padding:25px 0; cursor:pointer; list-style:none; }
.project summary::-webkit-details-marker { display:none; }
.project-index { padding-top:1px; font-size:12.65px; color:#9ca292; font-variant-numeric:tabular-nums; }
.project-intro { display:block; }
.project-meta { display:block; color:var(--muted); font-size:10.35px; margin-bottom:8px; }
.project-meta span { padding:0 6px; color:#abb0a3; }
.project-title { font-size:20.7px; letter-spacing:-.5px; line-height:1.5; font-weight:650; }
.project-summary { display:block; margin-top:8px; color:var(--muted); font-size:13.8px; line-height:1.85; }
.expand-icon { position:relative; width:16px; height:16px; margin-top:25px; }
.expand-icon:before,.expand-icon:after { content:""; position:absolute; width:10px; height:1px; background:#737c6a; top:7px; left:3px; }
.expand-icon:after { transform:rotate(90deg); transition:transform .15s; }
details[open] .expand-icon:after { transform:rotate(0); }
details[open] .project-title { color:var(--accent); }
.project-body { margin:0 32px 28px 38px; }
.project-facts { display:grid; grid-template-columns:1fr 1.4fr; gap:20px; background:#f7f8f5; padding:16px 18px; margin-bottom:23px; }
.project-facts dt { font-size:10.35px; color:var(--muted); margin-bottom:4px; }
.project-facts dd { font-size:12.65px; }
.project-facts .tags { gap:4px; }
.project-facts .tags li { font-size:11.5px; padding:0; background:none; border:0; }
.project-facts .tags li+li:before { content:"·"; margin-right:4px; color:#9aa48e; }
.project-story { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.project-story h5 { font-size:12.65px; margin-bottom:8px; }
.project-story p,.bullet-list { color:var(--muted); font-size:12.65px; line-height:1.9; }
.bullet-list { padding-left:15px; }
.bullet-list li+li { margin-top:4px; }
.project-outcome { display:grid; grid-template-columns:35px minmax(0,1fr); align-items:baseline; gap:14px; border-left:2px solid var(--accent); padding:11px 14px; margin-top:22px; background:#f7f9ff; }
.project-outcome span { font-size:10.35px; color:var(--accent); }
.project-outcome p { font-size:12.65px; color:#394c7d; }
.project-links { display:flex; gap:20px; font-size:13.8px; margin-top:18px; }
.skill-row { display:grid; grid-template-columns:215px minmax(0,1fr); gap:26px; padding:25px 0; border-top:1px solid var(--line); }
.skill-index { font-size:10.35px; color:#929c86; }
.skill-row h3 { font-size:17.25px; margin-top:5px; }
.skill-row p { font-size:11.5px; color:var(--muted); margin-top:7px; }
.tags { list-style:none; padding:0; display:flex; flex-wrap:wrap; align-content:start; align-items:start; gap:6px; }
.skill-row>.tags { padding-top:6px; }
.tags li { font-size:11.5px; color:#586150; background:#f6f7f3; border:1px solid #edf0e8; padding:4px 9px; border-radius:3px; }

.background-row { display:grid; grid-template-columns:95px minmax(0,1fr) auto; gap:16px; padding:20px 0; border-top:1px solid var(--line); align-items:baseline; }
.background-row>span { font-size:10.35px; color:var(--muted); }
.background-row h3 { font-size:13.8px; font-weight:600; }
.background-row p { font-size:11.5px; color:var(--muted); }
.contact-section { margin-top:78px; padding:38px 0 35px; border-top:2px solid var(--ink); }
.contact-section .section-heading { margin-bottom:22px; }
.contact-email { display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:clamp(21.85px,2.76vw,34.5px); line-height:1.4; letter-spacing:-.6px; font-weight:600; padding-bottom:15px; }
.contact-email>span { color:var(--accent); }
.contact-email:hover { color:var(--accent); }
.contact-details { display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:12.65px; color:var(--muted); }
.contact-details a span { margin-right:10px; font-size:11.5px; }
.copy-button { font-size:11.5px; min-height:44px; padding:0; }
.copy-button:hover { color:var(--accent); }
.copy-status { font-size:12.65px; color:var(--accent); }
.copy-status:not(:empty) { margin-top:12px; }
.social-links { display:flex; gap:28px; margin-top:25px; font-size:12.65px; }
.social-links a { min-height:44px; display:inline-flex; gap:14px; align-items:center; }
.social-links a:hover { color:var(--accent); }
.footer { display:flex; justify-content:space-between; gap:16px; padding:24px 0; border-top:1px solid var(--line); font-size:10.35px; color:var(--muted); }
.footer a { display:inline-flex; align-items:center; gap:20px; }
@media (min-width:1450px) { .page-shell { max-width:1340px; grid-template-columns:200px minmax(0,1fr); gap:80px; } main { padding-left:70px; padding-right:70px; } .topbar-inner { max-width:1340px; } }
@media (max-width:1080px) { .page-shell { padding:0 28px; grid-template-columns:140px minmax(0,1fr); gap:24px; } main { padding-left:32px; padding-right:32px; } .topbar-inner { padding:0 28px; } .skill-row { grid-template-columns:160px minmax(0,1fr); gap:20px; } .focus-strip { grid-template-columns:1fr; gap:9px; } .focus-strip div { display:grid; grid-template-columns:90px 1fr; gap:10px; } .focus-strip dt { margin:0; } }
@media (max-width:760px) {
  html { scroll-padding-top:82px; } section,article { scroll-margin-top:82px; }
  .topbar { height:65px; } .topbar-inner { padding:0 22px; } .brand { gap:14px; } .brand>span:first-child { font-size:27.6px; } .brand-caption { display:none; }
  .topbar-actions { gap:18px; font-size:12.65px; } .topbar-actions .header-github,.print-button svg { display:none; }
  .menu-toggle:not([hidden]) { display:inline-flex !important; font-size:12.65px; }
  .page-shell { display:block; padding:0; } .sidebar { background:var(--background); } .sidebar-inner { position:static; padding:0; } .sidebar-label,.sidebar-note { display:none; }
  #section-nav { padding:15px 22px; display:flex; flex-direction:row; flex-wrap:wrap; gap:5px 25px; border-bottom:1px solid var(--line); }
  #section-nav a { font-size:13.8px; padding:10px 0; gap:9px; }
  .enhanced #section-nav { display:none; position:fixed; top:65px; right:0; left:0; background:var(--background); z-index:19; box-shadow:0 16px 20px #22222208; }
  .enhanced #section-nav.is-open { display:grid; grid-template-columns:1fr 1fr; }
  main { padding:35px 24px 0; border:0; } .hero-topline { margin-bottom:32px; } .hero-topline .eyebrow { font-size:10.35px; letter-spacing:1.1px; } .hero-folio { font-size:9.2px; }
  h1 { font-size:59.8px; letter-spacing:-3px; } .english-name { font-size:13.8px; margin-top:9px; } .portrait { width:76px; height:76px; }
  .role { font-size:11.5px; margin-top:24px; } .hero-title { font-size:clamp(26.45px,6.67vw,39.1px); letter-spacing:-.9px; margin-top:18px; } .hero-description { font-size:14.95px; margin-top:18px; }
  .hero-actions { margin:25px 0 32px; font-size:12.65px; gap:23px; } .primary-link { padding:12px 15px; gap:20px; }
  .focus-strip { padding:19px 0; gap:11px; } .focus-strip dt,.focus-strip dd { font-size:11.5px; }
  .about-note { display:block; margin-top:22px; } .about-note>p:last-child { margin-top:10px; font-size:12.65px; }
  .content-section { padding-top:58px; } .section-heading { margin-bottom:25px; } .section-heading h2 { font-size:27.6px; letter-spacing:-.9px; margin-top:10px; } .section-description { font-size:12.65px; }
  .experience-row h3 { font-size:23px; } .experience-projects { margin-left:0; padding-left:12px; }
  .project summary { grid-template-columns:20px minmax(0,1fr) 14px; gap:10px; padding:23px 0; } .project-title { font-size:18.4px; } .project-summary { font-size:12.65px; }
  .project-body { margin:0 0 24px 30px; } .project-facts { grid-template-columns:1fr; gap:12px; padding:14px; } .project-story { grid-template-columns:1fr; gap:18px; } .project-outcome { gap:7px; padding:11px; }
  .skill-row { grid-template-columns:1fr; gap:15px; padding:23px 0; } .skill-row h3 { display:inline; margin-left:9px; } .skill-row p { margin-top:5px; } .skill-row>.tags { padding-top:0; }

  .background-row { grid-template-columns:1fr; gap:4px; padding:18px 0; } .background-row h3 { font-size:14.95px; }
  .contact-section { margin-top:58px; padding-top:30px; } .contact-section h2 { font-size:26.45px; } .contact-email { font-size:clamp(20.7px,5.865vw,32.2px); letter-spacing:-.5px; gap:8px; } .contact-details { gap:12px; font-size:11.5px; }
  .footer { font-size:9.2px; align-items:center; } .footer a { gap:7px; min-height:44px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none !important; } }
@media print {
  @page { size:A4; margin:16mm; } html { scroll-behavior:auto; } body { background:white; font-size:11.5pt; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .topbar,.sidebar,.skip-link,.hero-actions,.expand-icon,.copy-button,.copy-status,.footer a { display:none !important; }
  .page-shell { display:block; padding:0; max-width:none; } main { border:0; padding:0; } .hero-topline { margin-bottom:22px; } h1 { font-size:46pt; } .hero-title { font-size:25.3pt; } .hero-description { font-size:11.5pt; }
  .focus-strip { margin-top:24px; } .about-note { margin-bottom:22px; } .content-section { padding-top:32px; }
  .section-heading { break-after:avoid; margin-bottom:20px; } .section-heading h2 { font-size:23pt; }
  .project,.experience-row,.skill-row,.background-row,.contact-section { break-inside:avoid; }
  .project[hidden] { display:block !important; } details::details-content { content-visibility:visible; display:block; }
  .project summary { padding:20px 0 15px; } .project-body { display:block !important; margin-bottom:20px; } .project-facts { padding:12px 15px; margin-bottom:14px; } .project-outcome { margin-top:14px; }
  .contact-section { margin-top:35px; } .footer { margin-top:18px; }
}
/* Screen reading sizes stay comfortable even in a narrow document column. */
@media screen {
  section,article { scroll-margin-top:0; }
  .project-summary { font-size:14.95px; }
  .project-story p,.bullet-list,.project-outcome p,.project-facts dd { font-size:13.8px; }
  .job-role,.skill-row p,.tags li { font-size:13.8px; }
  .background-row h3 { font-size:16.1px; }
  .background-row p,.project-meta { font-size:12.65px; }
  .project-index,.skill-index { color:var(--muted); }
}
/* Resume-led hierarchy: projects contain their individual contributions. */
.portrait { width:96px; height:128px; border-radius:5px; object-position:center 35%; filter:none; }
.role { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; }
.career-start { font-size:11.5px; font-weight:400; letter-spacing:0; color:var(--muted); }
.principles { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:24px; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
.principles h3 { font-size:14.95px; font-weight:650; margin-bottom:8px; }
.principles p { font-size:13.8px; line-height:1.9; color:var(--muted); }
.experience-group-label { color:var(--muted); font-size:10.35px; letter-spacing:1.4px; margin:8px 0 12px; }
.job-description { color:var(--muted); font-size:13.8px; margin-top:9px; }
.project-meta { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; }
.project-meta .project-kind { color:var(--accent); background:var(--accent-soft); border-radius:2px; padding:2px 7px; font-size:11.5px; }
.project-meta .project-period { padding:0; color:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums; }
.project-organization { display:block; font-size:11.5px; color:var(--muted); margin-top:10px; }
.project-metric { display:flex; gap:18px; align-items:baseline; margin-top:24px; padding:22px 0 4px; border-top:1px solid var(--line); }
.project-metric strong { font-size:39.1px; letter-spacing:-1px; color:var(--accent); }
.project-metric span { color:var(--muted); font-size:13.8px; }
.case-studies { margin-top:32px; }
.case-studies-label { font-size:12.65px; color:var(--muted); font-weight:500; margin-bottom:14px; }
.case-study { padding:22px 0; border-top:1px solid var(--line); }
.case-study h6 { margin:0 0 9px; font-size:16.1px; font-weight:650; line-height:1.6; letter-spacing:-.2px; }
.case-study h6>span { color:var(--accent); font-size:11.5px; margin-right:10px; font-weight:500; }
.case-study>p { font-size:13.8px; color:var(--muted); line-height:1.9; }
.case-study .bullet-list { margin-top:10px; }
.case-study .case-outcome { font-size:12.65px; margin-top:12px; color:#3f527f; }
.case-outcome>span { color:var(--accent); margin-right:10px; font-size:11.5px; }
.project-stack { padding-top:20px; border-top:1px solid var(--line); margin-top:25px; }
.project-stack h5 { font-size:12.65px; margin-bottom:12px; }
.background-row .background-description { margin-top:8px; font-size:12.65px; line-height:1.8; }
@media (max-width:760px) {
 .portrait { width:76px; height:102px; }
 .principles { grid-template-columns:1fr; gap:20px; }
 .project-body { margin-left:0; }
 .project-meta { gap:6px; }
 .project-title { font-size:20.7px; }
 .project-summary { font-size:14.95px; }
 .case-study h6 { font-size:16.1px; }
 .project-metric { gap:12px; }
 .project-metric strong { font-size:34.5px; }
}
@media print {
 /* Start only the main sections on new pages; long experience content may flow. */
 main > section + section { page-break-before:always; break-before:page; }
 main > .content-section { padding-top:0; }
 main > .contact-section { margin-top:0; }
 .experience-row,.project summary { break-after:avoid; }

 .project { break-inside:auto; }
 .project summary,.project-facts,.project-story,.project-outcome,.project-stack,.case-study,.principles { break-inside:avoid; }
 .case-studies-label { break-after:avoid; }
 .case-study { padding:14px 0; }
 .project-stack { margin-top:14px; }
}