/* ============================================================
   SGwannabe — Palantir 스토리보드 디자인 시스템 (samgu.kr)
   모노크롬 럭스 · 모노스페이스 라벨 · 헤어라인 그리드 · 번호 프레임
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  --bg:#08090b; --bg2:#0c0d10; --panel:#0e0f13; --panel2:#121317;
  --ink:#ECEDF0; --mute:#878b95; --faint:#565a64;
  --line:rgba(255,255,255,0.11); --line2:rgba(255,255,255,0.055);
  --accent:#9FB6CC;          /* cold steel — 절제된 단일 accent */
  --accent-dim:#5b6f84;
  --bad:#d96a63; --warn:#caa86a;
  --maxw:1180px;
  --mono:'SF Mono',ui-monospace,'JetBrains Mono','Cascadia Code',Menlo,Consolas,monospace;
  --sans:'Pretendard','Inter','Apple SD Gothic Neo',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}

/* faint blueprint grid */
.grid-bg{position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.6;
  background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 75% at 50% 20%,#000 35%,transparent 100%);}
.vfade{position:fixed; inset:0 0 auto 0; height:280px; z-index:-1; pointer-events:none;
  background:radial-gradient(700px 280px at 50% -40px,rgba(159,182,204,0.06),transparent 70%);}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* ── mono label primitive ───────────────────────────────── */
.mono{font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mute);}
.mono-accent{color:var(--accent);}

/* ── top nav ────────────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:50; background:rgba(8,9,11,0.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:58px; gap:18px;}
.nav .brand{display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-0.01em; font-size:16px;}
.nav .brand .mark{width:24px; height:24px; border:1px solid var(--line); display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; color:var(--accent);}
.nav .links{display:flex; gap:26px;}
.nav .links a{font-family:var(--mono); font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--mute); transition:color .15s; position:relative; padding:4px 0;}
.nav .links a:hover,.nav .links a.active{color:var(--ink);}
.nav .links a.active::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--accent);}
.nav .right{font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--faint); display:flex; align-items:center; gap:8px;}
.nav .right .pulse{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(159,182,204,.6); animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(159,182,204,.5);}70%{box-shadow:0 0 0 7px rgba(159,182,204,0);}100%{box-shadow:0 0 0 0 rgba(159,182,204,0);}}
@media(max-width:780px){.nav .links{display:none;} .nav .right .txt{display:none;}}

/* ── storyboard frame ───────────────────────────────────── */
.frame{position:relative; border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,0.014),transparent 40%); padding:30px 32px;}
.frame + .frame{border-top:none;}
.frame .fhead{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line2);}
.frame .fhead .idx{font-family:var(--mono); font-size:12px; letter-spacing:0.2em; color:var(--accent);}
.frame .fhead .lbl{font-family:var(--mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--faint);}
/* corner ticks */
.frame::before,.frame::after{content:''; position:absolute; width:9px; height:9px; border:1px solid var(--accent); opacity:.55;}
.frame::before{left:-1px; top:-1px; border-right:none; border-bottom:none;}
.frame::after{right:-1px; bottom:-1px; border-left:none; border-top:none;}

/* section rhythm */
section.block{padding:78px 0;}
.kicker{font-family:var(--mono); font-size:11.5px; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); margin:0 0 18px; display:flex; align-items:center; gap:12px;}
.kicker::before{content:''; width:26px; height:1px; background:var(--accent); display:inline-block;}
h1,h2,h3{letter-spacing:-0.025em; font-weight:680; line-height:1.08;}
h1{font-size:clamp(40px,6.4vw,76px); margin:0 0 22px; font-weight:720;}
h2{font-size:clamp(27px,3.6vw,42px); margin:0 0 16px;}
h3{font-size:21px; letter-spacing:-0.015em;}
.lede{font-size:clamp(17px,1.9vw,21px); color:var(--mute); max-width:660px; line-height:1.58;}
.lede b,p b{color:var(--ink); font-weight:650;}
p{color:var(--mute);}

/* ── buttons ────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  padding:13px 22px; border:1px solid var(--line); color:var(--ink); transition:.16s; background:transparent;}
.btn:hover{border-color:var(--accent); color:#fff;}
.btn.solid{background:var(--ink); color:#08090b; border-color:var(--ink);}
.btn.solid:hover{background:#fff;}
.btn .ar{color:var(--accent);}

/* ── hero ───────────────────────────────────────────────── */
.hero{padding:104px 0 64px; position:relative;}
.hero h1 .dim{color:var(--mute);}
.hero .meta{display:flex; gap:30px; flex-wrap:wrap; margin-top:40px; padding-top:24px; border-top:1px solid var(--line2);}
.hero .meta .m{font-family:var(--mono);}
.hero .meta .m .v{font-size:30px; color:var(--ink); letter-spacing:-0.02em; line-height:1;}
.hero .meta .m .k{font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin-top:8px;}
.cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}

/* ── gallery cards ──────────────────────────────────────── */
.gal{display:grid; grid-template-columns:repeat(12,1fr); border:1px solid var(--line); border-bottom:none;}
.gcard{grid-column:span 4; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 22px 20px; min-height:150px; position:relative; transition:background .18s;
  display:flex; flex-direction:column; gap:8px; background:transparent;}
.gcard:hover{background:rgba(159,182,204,0.045);}
.gcard .top{display:flex; align-items:center; justify-content:space-between;}
.gcard .cat{font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent);}
.gcard .no{font-family:var(--mono); font-size:10px; color:var(--faint);}
.gcard h3{font-size:19px; margin:2px 0 0;}
.gcard p{font-size:13.5px; color:var(--mute); margin:0; line-height:1.5;}
.gcard .mt{margin-top:auto; font-family:var(--mono); font-size:10.5px; color:var(--faint); letter-spacing:0.04em;}
.gcard.hidden{display:none;}
@media(max-width:900px){.gcard{grid-column:span 6;}}
@media(max-width:560px){.gcard{grid-column:span 12;}}

/* ── filter chips ───────────────────────────────────────── */
.chips{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-bottom:none; margin-bottom:0;}
.chip{font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); padding:11px 18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); cursor:pointer; user-select:none; transition:.14s;}
.chip:hover{color:var(--ink); background:rgba(255,255,255,0.03);}
.chip.active{color:#08090b; background:var(--ink);}

/* ── timeline (research/blog index) ─────────────────────── */
.tl{border-top:1px solid var(--line);}
.tl a.row{display:grid; grid-template-columns:130px 1fr auto; gap:22px; align-items:baseline; padding:24px 6px; border-bottom:1px solid var(--line); transition:background .15s, padding-left .15s; position:relative;}
.tl a.row:hover{background:rgba(159,182,204,0.04); padding-left:16px;}
.tl .date{font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--accent); white-space:nowrap;}
.tl .row .ti{font-size:21px; letter-spacing:-0.015em; color:var(--ink); margin:0 0 6px;}
.tl .row .su{font-size:14.5px; color:var(--mute); margin:0; max-width:640px; line-height:1.5;}
.tl .tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:10px;}
.tag{font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line2); padding:3px 8px;}
.tl .row .arrow{font-family:var(--mono); color:var(--faint); font-size:14px; align-self:center;}
.tl a.row:hover .arrow{color:var(--accent);}
@media(max-width:680px){.tl a.row{grid-template-columns:1fr; gap:8px;} .tl .row .arrow{display:none;}}

/* ── detail (post) ──────────────────────────────────────── */
.post{max-width:760px; margin:0 auto; padding:60px 0 40px;}
.post .ph{border-bottom:1px solid var(--line); padding-bottom:26px; margin-bottom:34px;}
.post .ph .date{font-family:var(--mono); font-size:12px; letter-spacing:0.1em; color:var(--accent);}
.post h1{font-size:clamp(30px,4.4vw,46px); margin:14px 0 16px;}
.post .body{font-size:17px; line-height:1.78; color:#c9ccd3;}
.post .body h2{font-size:23px; color:var(--ink); margin:38px 0 12px; padding-top:6px;}
.post .body h3{font-size:18px; color:var(--ink); margin:26px 0 8px;}
.post .body p{margin:14px 0; color:#c4c8cf;}
.post .body ul,.post .body ol{margin:14px 0; padding-left:22px; color:#c4c8cf;}
.post .body li{margin:7px 0;}
.post .body b,.post .body strong{color:#fff;}
.post .body code{font-family:var(--mono); font-size:14px; background:var(--panel2); border:1px solid var(--line2); padding:1px 6px;}
.activity{margin-top:46px; border-top:1px solid var(--line); padding-top:26px;}
.activity .mrow{margin:18px 0;}
.activity .mrow .mh{font-family:var(--mono); font-size:12px; letter-spacing:0.1em; color:var(--accent); margin-bottom:8px;}
.activity .mrow ul{list-style:none; padding:0; margin:0; border-left:1px solid var(--line);}
.activity .mrow li{font-family:var(--mono); font-size:12.5px; color:var(--mute); padding:4px 0 4px 16px; position:relative;}
.activity .mrow li::before{content:''; position:absolute; left:-3px; top:11px; width:5px; height:5px; background:var(--accent); opacity:.6;}

/* ── careers ────────────────────────────────────────────── */
.org{display:grid; grid-template-columns:repeat(12,1fr); border:1px solid var(--line); border-bottom:none;}
.ocard{grid-column:span 3; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px; min-height:118px;}
.ocard .r{font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
.ocard .n{font-size:16px; color:var(--ink); margin:0 0 4px;}
.ocard .d{font-size:12.5px; color:var(--mute); margin:0; line-height:1.45;}
@media(max-width:900px){.ocard{grid-column:span 6;}}
@media(max-width:520px){.ocard{grid-column:span 12;}}
.role{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 4px; border-bottom:1px solid var(--line);}
.role:first-child{border-top:1px solid var(--line);}
.role .l .t{font-size:19px; color:var(--ink);}
.role .l .m{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--faint); margin-top:6px; text-transform:uppercase;}
.role .apply{font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); padding:9px 16px; white-space:nowrap; transition:.15s;}
.role .apply:hover{border-color:var(--accent); color:#fff;}
.values{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1px solid var(--line); border-bottom:none;}
.value{border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 28px;}
.value .vn{font-family:var(--mono); font-size:11px; letter-spacing:0.16em; color:var(--accent); margin-bottom:10px;}
.value h3{margin:0 0 8px;} .value p{margin:0; font-size:14.5px;}
@media(max-width:680px){.value{border-right:none;}}

/* ── footer ─────────────────────────────────────────────── */
footer{border-top:1px solid var(--line); margin-top:30px; padding:40px 0 70px;}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center;}
footer .mono{color:var(--faint);}
footer a:hover{color:var(--accent);}

/* ── reveal ─────────────────────────────────────────────── */
.js .ru{opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.js .ru.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){.js .ru{opacity:1; transform:none;}}
.rule{height:1px; background:var(--line); border:none; margin:0;}