:root{
  --bg-rgb:8,9,11;
  --bg:rgb(var(--bg-rgb)); --bg-2:#0D0F13; --panel:#101319;
  --surface-1:rgba(255,255,255,.02);
  --fg:#F4F5F7; --fg-mid:#A9AFBA; --fg-dim:#767E8B;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --accent-rgb:255,75,51;
  --accent:rgb(var(--accent-rgb)); --accent-soft:rgba(var(--accent-rgb),.14); --on-accent:#0A0B0D;
  --nav-h:64px; --tab-h:60px; --pad:32px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo",sans-serif;
  --container:1160px; --t:220ms cubic-bezier(.2,.7,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(900px 500px at 12% -8%,rgba(var(--accent-rgb),.12),transparent 60%),
             radial-gradient(700px 420px at 92% 8%,rgba(var(--accent-rgb),.05),transparent 62%)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table{margin:0}
ul{padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.wrap{max-width:var(--container); margin:0 auto; padding:0 var(--pad); position:relative; z-index:1}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* nav */
.nav{position:fixed; inset:0 0 auto 0; z-index:20; backdrop-filter:blur(14px); background:rgba(var(--bg-rgb),.72); border-bottom:1px solid transparent; transition:border-color var(--t)}
.nav.stuck{border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h)}
.brand{font-size:14px; font-weight:700; letter-spacing:.04em}
.brand span{color:var(--accent)}
.nav ul{display:flex; align-items:center; gap:28px}
.nav ul a{font-size:13px; font-weight:500; color:var(--fg-mid); transition:color var(--t)}
.nav ul a:hover{color:var(--fg)}
.cta{font-size:13px; font-weight:600; padding:8px 16px; border-radius:8px; border:1px solid var(--line-2); color:var(--fg);
  transition:background var(--t),border-color var(--t),transform var(--t); display:inline-block}
.cta:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-1px)}
.cta.solid{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.cta.solid:hover{filter:brightness(1.08)}

/* hero */
.hero{min-height:92svh; display:flex; align-items:center; padding:120px 0 64px; position:relative}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.34; filter:saturate(.5) contrast(1.05)}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--bg) 8%,rgba(var(--bg-rgb),.86) 46%,rgba(var(--bg-rgb),.55) 100%),linear-gradient(0deg,var(--bg) 2%,transparent 42%)}
.hero-row{display:grid; grid-template-columns:1fr auto; gap:56px; align-items:center}
.portrait{width:min(28vw,240px)}
.portrait img{width:100%; height:auto; aspect-ratio:1; border-radius:50%; display:block; object-fit:cover; border:1px solid var(--line-2)}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:24px; display:flex; align-items:center; gap:12px}
.kicker::before{content:""; width:36px; height:1px; background:var(--accent); flex:none}
h1{font-size:clamp(38px,7vw,84px); line-height:1.05; font-weight:800; letter-spacing:-.035em}
h1 em{font-style:normal; color:var(--accent)}
.lede{margin-top:30px; font-size:clamp(16px,1.6vw,20px); line-height:1.6; color:var(--fg-mid); max-width:56ch}
.lede b{color:var(--fg); font-weight:600}
.hero-links{display:flex; flex-wrap:wrap; gap:12px; margin-top:38px}

/* skills */
.skills{display:flex; flex-wrap:wrap; gap:8px; margin-top:34px}
.skill{font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px; border:1px solid var(--line-2); color:var(--fg-mid); background:var(--surface-1)}
.skill.k{color:var(--accent); border-color:var(--accent-soft); background:var(--accent-soft)}

/* stats */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:1px solid var(--line); margin-top:80px}
.stat{padding:24px 24px 24px 0; border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat .n{font-size:clamp(28px,3.4vw,42px); line-height:1.05; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.stat .n small{font-size:.5em; color:var(--fg-dim); margin-left:4px; font-weight:500}
.stat .l{margin-top:12px; font-size:12.5px; line-height:1.55; color:var(--fg-dim)}

/* section */
section{padding:112px 0 0}
.sec-head{display:flex; align-items:baseline; gap:16px; margin-bottom:44px; border-bottom:1px solid var(--line); padding-bottom:20px; flex-wrap:wrap}
.sec-head .idx{font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--accent)}
h2{font-size:clamp(24px,3vw,34px); font-weight:700; letter-spacing:-.02em; line-height:1.2}
.sec-head .sub{margin-left:auto; font-size:13px; color:var(--fg-dim)}

/* project card (index) */
.pcard{display:block; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--bg-2); margin-bottom:28px; transition:border-color var(--t), transform var(--t)}
.pcard:hover{border-color:var(--accent); transform:translateY(-3px)}
.pcard-media{position:relative; aspect-ratio:21/8; overflow:hidden}
.pcard-media img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.9); transition:transform 700ms cubic-bezier(.2,.7,.3,1)}
.pcard:hover .pcard-media img{transform:scale(1.04)}
.pcard-media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(var(--bg-rgb),.92) 0%,rgba(var(--bg-rgb),.35) 60%,transparent 100%)}
.pcard-head{position:absolute; inset:auto auto 0 0; padding:32px; z-index:1}
.pcard h3{font-size:clamp(24px,3.2vw,38px); font-weight:700; letter-spacing:-.025em; line-height:1.1}
.pcard .genre{margin-top:8px; color:var(--fg-mid); font-size:14.5px}
.pcard-body{padding:28px 32px 30px; display:grid; grid-template-columns:1.15fr 1fr; gap:32px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px}
.chip{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--fg-mid); border:1px solid var(--line); border-radius:6px; padding:5px 9px}
.live{color:var(--accent); border-color:var(--accent-soft); background:var(--accent-soft)}
.blk-h{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:14px}
.duty li{padding:10px 0; border-top:1px solid var(--line); font-size:14px; line-height:1.6; color:var(--fg-mid)}
.duty li:first-child{border-top:0; padding-top:0}
.duty b{color:var(--fg); font-weight:600}
.outcome{display:grid; gap:8px}
.outcome li{display:flex; gap:12px; font-size:14px; color:var(--fg-mid); line-height:1.6}
.outcome li::before{content:"→"; color:var(--accent); flex:none}
.outcome b{color:var(--fg); font-weight:600}
.pcard-more{display:flex; align-items:center; gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--accent); grid-column:1/-1}

/* career / misc / contact */
.job{display:grid; grid-template-columns:180px 1fr; gap:32px; padding:24px 0; border-top:1px solid var(--line)}
.job:last-of-type{border-bottom:1px solid var(--line)}
.job .when{font-family:var(--mono); font-size:12px; color:var(--fg-dim); letter-spacing:.04em; padding-top:4px}
.job h3{font-size:18px; font-weight:600}
.job .co{color:var(--accent); font-size:13px; font-family:var(--mono); margin-top:2px}
.job p{margin-top:10px; color:var(--fg-mid); font-size:14.5px; max-width:62ch}
.misc li{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:16px 0; border-top:1px solid var(--line); color:var(--fg-mid); font-size:14.5px}
.misc li:last-child{border-bottom:1px solid var(--line)}
.misc .yr{font-family:var(--mono); font-size:12px; color:var(--fg-dim)}
.misc b{color:var(--fg); font-weight:600}
.contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.ccard{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:14px; transition:border-color var(--t),transform var(--t)}
.ccard:hover{border-color:var(--accent); transform:translateY(-2px)}
.ccard .k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--fg-dim); text-transform:uppercase; display:block}
.ccard .v{font-size:16px; font-weight:600; margin-top:6px; word-break:break-all; display:block}
.ccard .arw{color:var(--accent); font-size:18px; flex:none}

footer{margin-top:112px; padding:32px 0 72px; border-top:1px solid var(--line)}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--fg-dim); font-family:var(--mono); letter-spacing:.04em}

/* ===== detail page ===== */
.phead{padding:112px 0 0; position:relative}
.phead-bg{position:absolute; inset:0 0 auto 0; height:420px; z-index:0; overflow:hidden}
.phead-bg img{width:100%; height:100%; object-fit:cover; opacity:.28; filter:saturate(.55)}
.phead-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,var(--bg) 4%,rgba(var(--bg-rgb),.5) 70%,rgba(var(--bg-rgb),.8) 100%)}
.back{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--fg-dim); display:inline-block; margin-bottom:24px}
.back:hover{color:var(--accent)}
.phead h1{font-size:clamp(34px,5.4vw,60px)}
.phead .genre{margin-top:12px; color:var(--fg-mid); font-size:16px}
.psum{margin-top:36px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.psum div{padding:20px 20px 20px 0; border-right:1px solid var(--line)}
.psum div:last-child{border-right:0}
.psum dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim)}
.psum dd{margin:8px 0 0; font-size:14.5px; font-weight:600; line-height:1.5}

/* tabs */
.tabs{position:sticky; top:var(--nav-h); z-index:10; background:rgba(var(--bg-rgb),.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); margin-top:56px}
.tabs .wrap{display:flex; gap:6px; overflow-x:auto; padding-top:12px; padding-bottom:12px; scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tab{flex:none; font-size:13.5px; font-weight:600; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--fg-mid); cursor:pointer; font-family:inherit; transition:all var(--t); white-space:nowrap}
.tab:hover{color:var(--fg); border-color:var(--line-2)}
.tab[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.tab .c{font-family:var(--mono); font-size:11px; opacity:.7; margin-left:6px}

/* work block */
.blocks{padding:56px 0 0}
.wb{display:grid; grid-template-columns:1.05fr 1fr; gap:32px; padding:40px 0; border-top:1px solid var(--line)}
.wb:first-child{border-top:0; padding-top:8px}
.wb.solo{grid-template-columns:1fr}
.wb-cat{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.wb h3{font-size:21px; font-weight:700; letter-spacing:-.015em; line-height:1.35}
.wb .sub{margin-top:7px; font-size:14px; color:var(--fg-mid)}
table.wt{width:100%; border-collapse:collapse; margin-top:20px; font-size:14px}
table.wt th,table.wt td{text-align:left; vertical-align:top; padding:12px 0; border-top:1px solid var(--line)}
table.wt th{width:74px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim); font-weight:500; padding-right:16px; white-space:nowrap}
table.wt td{color:var(--fg-mid); line-height:1.65}
table.wt .roles li{padding-left:16px; text-indent:-16px; margin-bottom:6px}
table.wt .roles li:last-child{margin-bottom:0}
table.wt tr.res td{color:var(--fg); font-weight:600}
table.wt tr.skl td{font-family:var(--mono); font-size:12.5px; color:var(--fg-dim); letter-spacing:.01em}

.wb-gal{display:grid; gap:10px; align-content:start; position:sticky; top:calc(var(--nav-h) + var(--tab-h) + 16px)}
.wb-gal .g1{grid-template-columns:1fr}
.wb-gal figure{margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-2)}
.wb-gal figure img{display:block; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform 600ms cubic-bezier(.2,.7,.3,1)}
.wb-gal figure:hover img{transform:scale(1.03)}
.wb-gal .big{aspect-ratio:16/10}
.wb-gal .row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.wb-gal .row figure{aspect-ratio:4/3}
.wb-gal figcaption{padding:8px 12px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); border-top:1px solid var(--line)}
.noimg{font-size:12.5px; color:var(--fg-dim); border:1px dashed var(--line-2); border-radius:12px; padding:22px; text-align:center}

.rv{opacity:0; transform:translateY(14px); transition:opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}

@media (max-width:900px){
  .pcard-body{grid-template-columns:1fr; gap:24px}
  .hero-row{grid-template-columns:1fr; gap:32px}
  .portrait{width:150px; order:-1}
  .stats,.psum{grid-template-columns:repeat(2,1fr)}
  .stat,.psum div{border-right:0; border-bottom:1px solid var(--line); padding:20px 0}
  .psum div{padding:18px 0}
  .job{grid-template-columns:1fr; gap:6px}
  .contact-grid{grid-template-columns:1fr}
  .wb{grid-template-columns:1fr; gap:24px}
  .wb-gal{position:static}
}
@media (max-width:640px){
  .wrap{--pad:20px}
  section{padding:80px 0 0}
  .hero{min-height:auto; padding:104px 0 40px}
  .nav ul li:not(:last-child){display:none}
  .pcard-head{padding:20px}
  .pcard-body{padding:22px 20px 24px}
  .pcard-media{aspect-ratio:16/9}
  .misc li{grid-template-columns:1fr; gap:2px}
  .cta{padding:12px 20px}
  .brand{display:flex; align-items:center; min-height:44px}
  .back{display:inline-flex; align-items:center; min-height:44px; margin-bottom:16px}
  .tab{min-height:44px; padding:8px 16px}
  table.wt th{width:64px; font-size:10px}
  footer{margin-top:80px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
}

/* ── 편집기 게이트 ── */
.edit-btn{font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--fg-dim); background:transparent; cursor:pointer;
  font-family:inherit; transition:color var(--t), border-color var(--t); margin-left:14px}
.edit-btn:hover{color:var(--fg); border-color:var(--line-2)}
.nav .brand-wrap{display:flex; align-items:center}
.gate{position:fixed; inset:0; z-index:100; background:rgba(var(--bg-rgb),.82);
  backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px}
.gate-box{width:100%; max-width:360px; background:var(--panel); border:1px solid var(--line-2);
  border-radius:16px; padding:28px}
.gate-box.shake{animation:gshake 320ms}
@keyframes gshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.gate-h{font-size:17px; font-weight:700; letter-spacing:-.01em}
.gate-d{margin:8px 0 20px; font-size:13.5px; color:var(--fg-dim); line-height:1.6}
.gate input{width:100%; font:inherit; font-size:15px; color:var(--fg); background:var(--bg-2);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px}
.gate input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.gate-e{margin:10px 0 0; font-size:13px; color:var(--accent)}
.gate-btns{display:flex; gap:8px; margin-top:20px}
.gate-btns button{flex:1; font:inherit; font-size:13.5px; font-weight:600; padding:11px;
  border-radius:9px; cursor:pointer; border:1px solid var(--line-2); background:transparent; color:var(--fg)}
.gate-btns .g-ok{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.gate-btns button:hover{filter:brightness(1.1)}
@media (prefers-reduced-motion:reduce){.gate-box.shake{animation:none}}

/* ── 우측 목차 레일 ── */
.toc{position:fixed; right:40px; top:50%; transform:translateY(-50%); z-index:15; display:none}
.toc ul{display:grid; gap:14px}
.toc a{position:relative; display:flex; align-items:baseline; gap:14px; justify-content:flex-end;
  color:var(--fg-dim); transition:color var(--t), transform var(--t)}
.toc .i{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--fg-dim);
  transition:color var(--t), opacity var(--t); opacity:.65}
.toc .t{font-size:clamp(21px,1.95vw,30px); font-weight:700; letter-spacing:-.025em; line-height:1.25;
  position:relative; padding-right:0; transition:color var(--t), padding-right var(--t)}
.toc .t::after{content:""; position:absolute; right:0; top:50%; width:0; height:2px;
  background:var(--accent); transition:width var(--t)}
.toc a:hover{color:var(--fg)}
.toc a:hover .i{opacity:1}
.toc a:hover .t{padding-right:26px}
.toc a:hover .t::after{width:16px}
.toc a[aria-current="true"]{color:var(--fg)}
.toc a[aria-current="true"] .i{color:var(--accent); opacity:1}
.toc a[aria-current="true"] .t{padding-right:34px}
.toc a[aria-current="true"] .t::after{width:24px}

/* 클릭 연출 */
.toc .bar{position:absolute; right:0; top:50%; height:2px; width:0; background:var(--accent);
  opacity:0; pointer-events:none}
.toc.firing a:not(.hit){opacity:.22; transform:translateX(10px);
  transition:opacity 260ms ease, transform 260ms cubic-bezier(.2,.7,.3,1)}
.toc.firing a.hit{color:var(--fg)}
.toc.firing a.hit .i{color:var(--accent); opacity:1}
.toc.firing a.hit .t{animation:tocPop 620ms cubic-bezier(.2,.8,.25,1)}
.toc.firing a.hit .bar{animation:tocSweep 620ms cubic-bezier(.3,.9,.2,1)}
@keyframes tocPop{
  0%{transform:translateX(0)} 28%{transform:translateX(-14px)} 100%{transform:translateX(0)} }
@keyframes tocSweep{
  0%{width:0; opacity:1} 40%{width:180px; opacity:1} 100%{width:0; opacity:0} }

/* 도착 섹션 반응 */
.landed > .wrap > .sec-head, .landed .hero-row{animation:landIn 900ms cubic-bezier(.2,.7,.3,1)}
@keyframes landIn{
  0%{transform:translateY(10px); opacity:.5} 100%{transform:none; opacity:1} }

@media (prefers-reduced-motion:reduce){
  .toc .t{transition:none}
  .toc.firing a:not(.hit){opacity:1; transform:none}
  .toc.firing a.hit .t,.toc.firing a.hit .bar,.landed > .wrap > .sec-head,.landed .hero-row{animation:none}
}

/* ── 초안 미리보기 배너 ── */
.draft-bar{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:14px; white-space:nowrap;
  background:var(--panel); border:1px solid var(--accent); border-radius:999px;
  padding:11px 12px 11px 20px; font-size:13px; color:var(--fg-mid)}
.draft-bar button,.draft-bar a{font:inherit; font-size:12.5px; font-weight:600; padding:7px 13px;
  border-radius:999px; cursor:pointer; border:1px solid var(--line-2); background:transparent; color:var(--fg)}
.draft-bar a{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.draft-bar button:hover,.draft-bar a:hover{filter:brightness(1.12)}
@media (max-width:640px){.draft-bar{left:12px; right:12px; transform:none; justify-content:center;
  flex-wrap:wrap; white-space:normal; border-radius:16px; padding:12px}}

@media (min-width:1360px){
  body{padding-right:190px}
  .nav{padding-right:190px}
  .hero-bg, .phead-bg{right:-190px}
  .toc{display:block}
  .nav ul li:not(:last-child){display:none}
}