:root{
    --paper:#FBFBF9;
    --ink:#171A1F;
    --muted:#5D6470;
    --faint:#9AA0AA;
    --line:#E7E6E1;
    --accent:#1F45C4;      /* cobalt — the "denoised" end */
    --noise:#C9CCD4;       /* grain gray — the "noisy" end */
    --card:#FFFFFF;
    --maxw:1060px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
  }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',system-ui,-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
    font-size:15.5px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--accent);text-decoration:none}
  a:hover{text-decoration:underline;text-underline-offset:3px}
  a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

  /* ---------- top nav ---------- */
  nav{
    position:sticky;top:0;z-index:10;
    background:rgba(251,251,249,.88);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:var(--maxw);margin:0 auto;
    display:flex;align-items:baseline;gap:1.6rem;
    padding:.85rem 1.4rem;
    overflow-x:auto;
  }
  .nav-name{
    font-family:'Newsreader',serif;font-weight:600;font-size:1.05rem;
    color:var(--ink);margin-right:auto;letter-spacing:.01em;white-space:nowrap;
  }
  .nav-name:hover{text-decoration:none;color:var(--accent)}
  nav a.nl{
    font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--muted);
    letter-spacing:.04em;white-space:nowrap;
  }
  nav a.nl:hover{color:var(--accent);text-decoration:none}

  /* ---------- layout ---------- */
  .wrap{
    max-width:var(--maxw);margin:0 auto;
    display:grid;grid-template-columns:290px 1fr;gap:3.2rem;
    padding:3rem 1.4rem 5rem;
  }
  @media (max-width:860px){
    .wrap{grid-template-columns:1fr;gap:2.2rem;padding-top:2.2rem}
    aside{position:static!important}
  }

  /* ---------- sidebar ---------- */
  aside{position:sticky;top:5rem;align-self:start}
  .avatar{
    width:190px;height:190px;border-radius:50%;
    object-fit:cover;display:block;
    border:1px solid var(--line);
    box-shadow:0 1px 2px rgba(23,26,31,.06);
  }
  .side-name{
    font-family:'Newsreader',serif;font-weight:600;
    font-size:1.9rem;line-height:1.15;margin-top:1.3rem;letter-spacing:-.01em;
  }
  .side-name-ko{font-family:'Inter',sans-serif;font-size:.95rem;color:var(--faint);font-weight:400;margin-left:.4rem}
  .side-role{margin-top:.55rem;color:var(--muted);font-size:.92rem;line-height:1.55}
  .side-role b{color:var(--ink);font-weight:600}
  .side-links{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.45rem .9rem}
  .side-links a{
    font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.03em;
  }
  .side-email{
    margin-top:1.1rem;font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;color:var(--muted);
  }

  /* ---------- sections ---------- */
  section{margin-bottom:3.4rem;scroll-margin-top:4.5rem}
  h2{
    font-family:'Newsreader',serif;font-weight:600;font-size:1.45rem;
    letter-spacing:-.01em;margin-bottom:.4rem;
  }
  /* signature: denoise rule — grain fading into cobalt */
  h2::after{
    content:"";display:block;height:3px;width:64px;margin-top:.5rem;border-radius:2px;
    background:linear-gradient(90deg,var(--noise) 0%,var(--noise) 25%,var(--accent) 100%);
  }
  .sec-body{margin-top:1.2rem}

  .lead{font-size:1.02rem}
  .lead p + p{margin-top:.9rem}
  .lead b{font-weight:600}

  /* experience card: logo tiles + collapsible list */
  .xp-card{
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:1.6rem 1.6rem 0.4rem;
  }
  .logo-tiles{
    display:flex;justify-content:center;flex-wrap:wrap;gap:.9rem;
    padding-bottom:1.4rem;border-bottom:1px solid var(--line);
  }
  .tile{
    width:120px;height:88px;display:flex;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .tile img{max-width:100%;max-height:100%;object-fit:contain;display:block}
  .tile:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 4px 14px rgba(31,69,196,.10)}
  @media (max-width:600px){.tile{width:88px;height:66px;padding:10px}}

  .xp-toggle{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    width:100%;padding:.9rem 0;cursor:pointer;
    background:none;border:none;
    font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.22em;
    color:var(--faint);text-transform:uppercase;
    transition:color .15s ease;
  }
  .xp-toggle:hover{color:var(--accent)}
  .xp-toggle .chev{transition:transform .25s ease;font-size:.8rem}
  .xp-card.open .chev{transform:rotate(180deg)}

  .xp-list{
    display:none;
    padding-bottom:.6rem;
  }
  .xp-card.open .xp-list{display:block}
  .xp-row{
    display:grid;grid-template-columns:185px 1fr;gap:1.4rem;
    padding:1.05rem .6rem;margin:0 -.6rem;border-top:1px solid var(--line);
    border-radius:10px;
    transition:background .15s ease;
  }
  .xp-row:hover{background:var(--paper)}
  .xp-row time{
    font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--faint);
    padding-top:.3rem;white-space:nowrap;
  }
  .xp-row:hover time{color:var(--accent)}
  .xp-row h3{font-size:1.05rem;font-weight:600}
  .xp-row .role{color:var(--muted);font-size:.93rem;margin-top:.15rem}
  @media (max-width:600px){
    .xp-row{grid-template-columns:1fr;gap:.2rem}
  }

  /* news */
  .news{list-style:none}
  .news li{
    display:grid;grid-template-columns:96px 1fr;gap:1rem;
    padding:.5rem 0;border-bottom:1px dashed var(--line);
  }
  .news li:last-child{border-bottom:none}
  .news time{
    font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--faint);
    padding-top:.22rem;white-space:nowrap;
  }

  /* experience / education entries */
  .entry{
    display:grid;grid-template-columns:1fr auto;gap:.3rem 1.2rem;
    padding:1rem 0;border-bottom:1px solid var(--line);
  }
  .entry:last-child{border-bottom:none}
  .entry h3{font-size:1rem;font-weight:600}
  .entry .org{color:var(--muted);font-size:.9rem}
  .entry .desc{grid-column:1 / -1;color:var(--ink);font-size:.92rem;margin-top:.25rem}
  .entry .desc ul{margin:.3rem 0 0 1.1rem}
  .entry .desc li{margin:.15rem 0}
  .entry time{
    font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--faint);
    white-space:nowrap;padding-top:.25rem;
  }
  @media (max-width:600px){
    .entry{grid-template-columns:1fr}
    .entry time{order:-1;padding-top:0}
  }

  /* project cards */
  .projects{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
  @media (max-width:700px){.projects{grid-template-columns:1fr}}
  .proj{
    background:var(--card);border:1px solid var(--line);border-radius:10px;
    padding:1.05rem 1.15rem;
    transition:border-color .15s ease, box-shadow .15s ease, transform .2s ease;
  }
  .proj:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(31,69,196,.07)}
  .proj h3{font-size:.97rem;font-weight:600;line-height:1.4}
  .proj .tag{
    font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--accent);
    letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:.35rem;
  }
  .proj p{font-size:.88rem;color:var(--muted);margin-top:.4rem}

  /* awards */
  .awards{list-style:none}
  .awards li{
    display:grid;grid-template-columns:78px 1fr;gap:1rem;
    padding:.45rem 0;
  }
  .awards time{
    font-family:'IBM Plex Mono',monospace;font-size:.76rem;color:var(--faint);padding-top:.2rem;
  }
  .awards .prize{font-weight:600}
  .awards .host{color:var(--muted);font-size:.88rem}

  footer{
    border-top:1px solid var(--line);
    padding:1.6rem 1.4rem 2.4rem;
    max-width:var(--maxw);margin:0 auto;
    font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--faint);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
  }

  /* ---------- hover micro-interactions ---------- */
  .avatar{transition:transform .25s ease, box-shadow .25s ease}
  .avatar:hover{transform:scale(1.03);box-shadow:0 6px 20px rgba(23,26,31,.12)}

  nav a.nl{position:relative;padding-bottom:2px}
  nav a.nl::after{
    content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
    background:linear-gradient(90deg,var(--noise),var(--accent));
    transition:width .22s ease;border-radius:1px;
  }
  nav a.nl:hover::after{width:100%}

  h2::after{transition:width .35s ease}
  section:hover h2::after{width:110px}   /* denoise rule stretches on hover */

  .proj{will-change:transform}
  .proj:hover{transform:translateY(-3px)}

  .news li{transition:background .15s ease;border-radius:8px;padding:.5rem .5rem;margin:0 -.5rem}
  .news li:hover{background:var(--card)}
  .news li:hover time{color:var(--accent)}
  .news time{transition:color .15s ease}

  .awards li{transition:background .15s ease;border-radius:8px;padding:.45rem .5rem;margin:0 -.5rem}
  .awards li:hover{background:var(--card)}
  .awards li:hover time{color:var(--accent)}
  .awards time{transition:color .15s ease}