:root{
    --ink:        #20221e;
    --ink-soft:   #4b4d47;
    --paper:      #e9e2d2;
    --paper-card: #f7f3e8;
    --paper-line: rgba(32,34,30,.14);
    --jade:       #33564a;
    --jade-deep:  #1c332b;
    --jade-mist:  rgba(51,86,74,.10);
    --clay:       #a15a34;
    --cream:      #efe9d9;
    --shadow:     0 18px 40px rgba(20,22,18,.18);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Noto Serif KR', serif;
    margin:0;
    color:inherit;
  }
  p{margin:0;}
  ul{margin:0;padding:0;list-style:none;}
  a{color:inherit;}

  .wrap{max-width:1040px;margin:0 auto;padding:0 32px;}

  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
    .reveal.in{opacity:1;transform:none;}
  }

  /* ---------- HERO ---------- */
  .hero{
    background:
      radial-gradient(120% 140% at 85% -10%, rgba(51,86,74,.35), transparent 55%),
      linear-gradient(180deg, var(--ink) 0%, var(--jade-deep) 130%);
    color:var(--cream);
    padding:96px 0 88px;
    position:relative;
    overflow:hidden;
  }
  .hero::after{
    content:"";
    position:absolute;
    right:-8%;
    bottom:-30%;
    width:520px;
    height:520px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(161,90,52,.22), transparent 70%);
    pointer-events:none;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    letter-spacing:.14em;
    color:#c9b98f;
    text-transform:uppercase;
    font-weight:600;
  }
  .eyebrow::before{
    content:"";
    width:26px;height:1px;
    background:#c9b98f;
    display:inline-block;
  }
  .hero h1{
    font-size:clamp(40px, 6vw, 68px);
    font-weight:900;
    margin:22px 0 6px;
    letter-spacing:-.01em;
  }
  .hero .en-name{
    font-size:15px;
    letter-spacing:.08em;
    color:rgba(239,233,217,.55);
    margin-bottom:26px;
  }
  .hero .role{
    font-size:clamp(16px, 2.2vw, 19px);
    color:#dcd3b9;
    font-weight:500;
    max-width:620px;
  }
  .hero .role b{color:var(--cream);font-weight:700;}

  .stat-row{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:44px;
  }
  .stat{
    border:1px solid rgba(239,233,217,.22);
    border-radius:14px;
    padding:16px 22px;
    min-width:150px;
    background:rgba(239,233,217,.04);
  }
  .stat .num{
    font-family:'Noto Serif KR',serif;
    font-size:26px;
    font-weight:700;
    color:var(--cream);
  }
  .stat .label{
    font-size:13px;
    color:rgba(239,233,217,.6);
    margin-top:4px;
  }

  /* ---------- STICKY NAV ---------- */
  .subnav{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(233,226,210,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--paper-line);
    transition:box-shadow .25s ease;
  }
  .subnav.scrolled{box-shadow:0 8px 18px rgba(20,22,18,.10);}
  .subnav-inner{
    max-width:1040px;
    margin:0 auto;
    padding:0 32px;
    display:flex;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .subnav-inner::-webkit-scrollbar{display:none;}
  .subnav a{
    flex:none;
    padding:16px 18px;
    font-size:14px;
    font-weight:600;
    color:var(--ink-soft);
    text-decoration:none;
    border-bottom:2px solid transparent;
    white-space:nowrap;
    transition:color .2s ease, border-color .2s ease;
  }
  .subnav a:hover{color:var(--jade);}
  .subnav a.active{color:var(--jade);border-color:var(--clay);}

  /* ---------- SECTION SHELL ---------- */
  section.block{padding:76px 0;}
  section.block + section.block{border-top:1px solid var(--paper-line);}
  .block-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:24px;
    margin-bottom:44px;
    flex-wrap:wrap;
  }
  .block-head h2{
    font-size:clamp(26px,3.4vw,34px);
    font-weight:700;
  }
  .block-head .sub{
    font-size:14px;
    color:var(--ink-soft);
    letter-spacing:.02em;
  }

  .group{margin-bottom:56px;}
  .group:last-child{margin-bottom:0;}
  .group-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    font-weight:700;
    color:var(--jade);
    margin-bottom:20px;
  }
  .group-title::before{
    content:"";
    width:6px;height:6px;
    border-radius:50%;
    background:var(--clay);
    display:inline-block;
  }

  /* career summary cards */
  .summary-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  .summary-card{
    background:var(--paper-card);
    border:1px solid var(--paper-line);
    border-radius:16px;
    padding:22px 20px;
  }
  .summary-card .k{font-size:13px;color:var(--ink-soft);margin-bottom:8px;}
  .summary-card .v{font-family:'Noto Serif KR',serif;font-size:18px;font-weight:700;line-height:1.4;}

  /* timeline (projects / local career) */
  .timeline{position:relative;padding-left:26px;}
  .timeline::before{
    content:"";
    position:absolute;
    left:5px;top:6px;bottom:6px;
    width:2px;
    background:linear-gradient(180deg, var(--jade) 0%, rgba(51,86,74,.15) 100%);
    border-radius:2px;
  }
  .t-item{position:relative;padding:0 0 30px 20px;}
  .t-item:last-child{padding-bottom:0;}
  .t-item::before{
    content:"";
    position:absolute;
    left:-25px;top:6px;
    width:11px;height:11px;
    border-radius:50%;
    background:var(--paper);
    border:2px solid var(--jade);
  }
  .t-item.current::before{background:var(--clay);border-color:var(--clay);}
  .t-period{
    font-size:13px;
    font-weight:700;
    color:var(--jade);
    letter-spacing:.02em;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .tag-current{
    font-size:11px;
    font-weight:700;
    color:#fff;
    background:var(--clay);
    padding:2px 8px;
    border-radius:20px;
    letter-spacing:.03em;
  }
  .t-title{
    font-size:17px;
    font-weight:700;
    margin:6px 0 4px;
    font-family:'Noto Serif KR',serif;
  }
  .t-org{font-size:14px;color:var(--ink-soft);}

  /* simple list rows (awards, exhibitions, certs, training) */
  .row-list{border-top:1px solid var(--paper-line);}
  .row-item{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:20px;
    padding:16px 0;
    border-bottom:1px solid var(--paper-line);
  }
  .row-item .yr{
    font-size:13px;
    font-weight:700;
    color:var(--jade);
    padding-top:2px;
  }
  .row-item .desc b{font-weight:700;}
  .row-item .org{display:block;font-size:13px;color:var(--ink-soft);margin-top:3px;}

  /* skill chips */
  .chip-wrap{display:flex;flex-wrap:wrap;gap:9px;}
  .chip{
    font-size:13px;
    font-weight:600;
    padding:8px 14px;
    border-radius:20px;
    background:var(--jade-mist);
    color:var(--jade-deep);
    border:1px solid rgba(51,86,74,.18);
  }
  .chip.alt{background:rgba(161,90,52,.10);color:var(--clay);border-color:rgba(161,90,52,.2);}

  /* footer */
  footer{
    background:var(--jade-deep);
    color:var(--cream);
    padding:56px 0;
  }
  .foot-inner{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:24px;
  }
  .foot-brand{font-family:'Noto Serif KR',serif;font-size:22px;font-weight:700;}
  .foot-brand span{display:block;font-size:12px;font-weight:400;letter-spacing:.1em;color:rgba(239,233,217,.55);margin-top:6px;}
  .foot-contact{font-size:14px;color:rgba(239,233,217,.85);text-align:right;}
  .foot-contact a{text-decoration:none;border-bottom:1px solid rgba(239,233,217,.4);}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:820px){
    .summary-grid{grid-template-columns:1fr 1fr;}
    .row-item{grid-template-columns:90px 1fr;}
  }
  @media (max-width:600px){
    .wrap{padding:0 20px;}
    .hero{padding:64px 0 56px;}
    section.block{padding:56px 0;}
    .summary-grid{grid-template-columns:1fr;}
    .row-item{grid-template-columns:1fr;gap:4px;}
    .row-item .yr{padding-top:0;}
    .foot-inner{flex-direction:column;align-items:flex-start;}
    .foot-contact{text-align:left;}
  }