:root{
  --bg:#fbfaf7; --surface:#ffffff; --ink:#1b1d22; --muted:#5d6370; --line:#e6e3dc;
  --accent:#1f6f5c; --accent-soft:#e3f1ec; --todo-bg:#fff1c2; --todo-ink:#7a5600;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121417; --surface:#1a1d21; --ink:#e9eaec; --muted:#9aa1ad; --line:#2a2e34;
    --accent:#5cc7a6; --accent-soft:#183129; --todo-bg:#3a2f0e; --todo-ink:#f3d27a;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Noto Sans KR",system-ui,sans-serif;line-height:1.7;font-size:16px;word-break:keep-all}
a{color:var(--accent)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
section{border-top:1px solid var(--line)}
section.wrap{padding-top:64px;padding-bottom:64px}
section.hero{border-top:0}
h2{font-size:1.6rem;margin:0 0 20px;font-weight:900;letter-spacing:-.02em}
h3{margin:0;font-size:1.25rem}
h4{margin:18px 0 6px;font-size:.95rem;color:var(--muted)}
code{background:var(--accent-soft);padding:1px 5px;border-radius:4px;font-size:.9em}

.nav{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;justify-content:space-between;align-items:center;height:56px}
.logo{font-weight:900;text-decoration:none;color:var(--ink)}
.nav nav a{margin-left:18px;text-decoration:none;color:var(--muted);font-size:.95rem}
.nav nav a:hover{color:var(--ink)}

section.hero{padding-top:88px;padding-bottom:64px}
.eyebrow{color:var(--accent);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;margin:0 0 12px}
.hero h1{font-size:clamp(1.8rem,4.6vw,2.9rem);line-height:1.3;margin:0 0 20px;letter-spacing:-.03em;font-weight:900}
.hl{color:var(--accent)}
.lead{color:var(--muted);max-width:680px;font-size:1.05rem}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:500}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.todo{background:var(--todo-bg);color:var(--todo-ink);padding:1px 6px;border-radius:4px;font-size:.88em;font-weight:500}

.skills{display:grid;gap:14px}
.skill-row{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:start}
.skill-row h3{font-size:.95rem;color:var(--muted);padding-top:4px}
.tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:3px 10px;font-size:.9rem}
.tags.small li{font-size:.8rem;padding:2px 8px;background:var(--accent-soft);border-color:transparent}

.section-sub{color:var(--muted);margin:-8px 0 24px}
.project{display:grid;grid-template-columns:280px 1fr;gap:28px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:22px}
.thumb{border-radius:10px;min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-weight:700;font-size:.9rem}
.thumb-1{background:linear-gradient(135deg,#1f6f5c,#3aa587)}
.thumb-2{background:linear-gradient(135deg,#8a3b5c,#d06a8c)}
.thumb-3{background:linear-gradient(135deg,#2a4f8f,#4f86d6)}
.thumb-4{background:linear-gradient(135deg,#a8601d,#e19a45)}
.thumb .todo{display:inline-block;margin-top:6px}
.p-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;align-items:baseline}
.meta{color:var(--muted);font-size:.85rem}
.one{margin:8px 0 10px}
.kpis{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 4px}
.kpis div{background:var(--accent-soft);border-radius:10px;padding:10px 14px}
.kpis b{display:block;font-size:1.2rem;color:var(--accent)}
.kpis span{font-size:.8rem;color:var(--muted)}
.role{margin:0;padding-left:18px}
.role li{margin-bottom:6px;font-size:.95rem}
.p-links{margin-top:12px}
.p-links a{font-weight:700;text-decoration:none}
.more{margin-top:8px;color:var(--muted);font-size:.95rem}
.more p{margin:6px 0}

.timeline{list-style:none;padding:0;margin:0;border-left:2px solid var(--line)}
.timeline li{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:8px 0 8px 20px;position:relative}
.timeline li::before{content:"";position:absolute;left:-7px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.timeline li.todo-row::before{background:var(--todo-ink)}
.when{color:var(--muted);font-size:.9rem;padding-top:1px}

.about p{max-width:720px}
.note{color:var(--muted);font-size:.9rem}
.foot{padding:32px 20px 48px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}

@media (max-width:720px){
  .project{grid-template-columns:1fr;padding:18px}
  .thumb{min-height:120px}
  .skill-row{grid-template-columns:1fr;gap:4px}
  .timeline li{grid-template-columns:1fr;gap:0}
  .nav nav a{margin-left:12px;font-size:.88rem}
  section.wrap{padding-top:44px;padding-bottom:44px}
  .hero{padding:56px 16px 40px}
  .wrap{padding:0 16px}
}