:root{
  --bg:#07090c;
  --panel:rgba(255,255,255,.04);
  --panel-border:rgba(255,255,255,.10);
  --text:#e8f0ec;
  --muted:#8fa79b;
  --green:#34d399;
  --lime:#a3e635;
  --yellow:#facc15;
  --radius:16px;
  --max:1040px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}

/* Aurora background blobs */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 18s ease-in-out infinite}
.aurora .a1{width:520px;height:340px;top:-120px;left:-100px;background:radial-gradient(closest-side,rgba(52,211,153,.55),transparent);animation-delay:0s}
.aurora .a2{width:460px;height:320px;top:20%;right:-140px;background:radial-gradient(closest-side,rgba(250,204,21,.42),transparent);animation-delay:-6s}
.aurora .a3{width:600px;height:360px;bottom:-160px;left:20%;background:radial-gradient(closest-side,rgba(163,230,53,.40),transparent);animation-delay:-12s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.aurora span{animation:none}}

.wrap{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:48px 20px 80px}

/* Header / identity */
.hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.avatar{
  width:88px;height:88px;border-radius:22px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--green),var(--lime),var(--yellow));
  display:grid;place-items:center;font-weight:800;font-size:30px;color:#08110c;
  box-shadow:0 8px 30px rgba(52,211,153,.25);
}
.hero h1{margin:0;font-size:clamp(24px,4vw,34px);letter-spacing:-.02em}
.hero .en{color:var(--muted);font-size:14px;margin-top:2px}
.hero .title{margin-top:8px;font-weight:600;
  background:linear-gradient(90deg,var(--green),var(--lime),var(--yellow));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .tagline{color:var(--muted);font-size:14px;margin-top:6px;max-width:640px;line-height:1.7}
.contacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.contacts a{
  font-size:12.5px;text-decoration:none;padding:7px 13px;border-radius:999px;
  border:1px solid var(--panel-border);background:var(--panel);color:var(--text);
  transition:border-color .18s,background .18s,transform .12s;
}
.contacts a:hover{border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.08);transform:translateY(-1px)}

/* Section grid */
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:34px}
@media (max-width:820px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:20px}
.card h2{margin:0 0 4px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.card.green h2{color:var(--green)} .card.yellow h2{color:var(--yellow)} .card.lime h2{color:var(--lime)}
.card .sub{color:var(--muted);font-size:12px;margin:0 0 16px}

/* Career timeline */
.timeline{position:relative;padding-left:20px}
.timeline::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;
  background:linear-gradient(180deg,var(--green),var(--lime),var(--yellow))}
.tl-item{position:relative;padding:0 0 20px 8px}
.tl-item::before{content:"";position:absolute;left:-19px;top:5px;width:10px;height:10px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 0 4px rgba(163,230,53,.15)}
.tl-item:last-child{padding-bottom:0}
.tl-period{font-size:11.5px;color:var(--muted)}
.tl-role{font-weight:700;margin-top:2px}
.tl-company{color:var(--lime);font-size:13px}
.tl-desc{color:var(--muted);font-size:13px;line-height:1.65;margin-top:6px}

/* Skills / certs */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.chip{font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid rgba(52,211,153,.3);
  background:rgba(52,211,153,.1);color:#6ee7b7}
.certs{list-style:none;margin:6px 0 0;padding:0}
.certs li{font-size:13px;color:var(--text);padding:8px 0;border-top:1px solid var(--panel-border);line-height:1.5}
.certs li:first-child{border-top:none}
.certs li::before{content:"✔ ";color:var(--yellow)}

/* Games */
.games{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
@media (max-width:560px){.games{grid-template-columns:1fr}}
.game{background:rgba(255,255,255,.03);border:1px solid rgba(163,230,53,.22);border-radius:14px;padding:14px}
.game .g-name{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
.game .g-char{color:var(--muted);font-size:12.5px;margin-top:4px}
.game .g-stat{margin-top:10px;font-size:13px;display:flex;justify-content:space-between;align-items:center}
.game .g-val{color:var(--yellow);font-weight:700}
.badge{font-size:10px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted)}
.badge.live{background:rgba(52,211,153,.16);color:#6ee7b7}

.footer{margin-top:40px;text-align:center;color:var(--muted);font-size:12px}
.updated{color:var(--muted);font-size:11px;margin-top:6px}