/* ═══════════════════════════════════════════════════════════════
   chris.gomdori.app · 공용 스타일 (메인 + 상세 15장)
   다크 단일 액센트. 메인 페이지 모션(핀 고정·블러 해체·아코디언)은 assets/index.js
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#000000;
  --bg-2:#0a0b0e;
  --panel:#0f1218;
  --ink:#f2f4f7;
  --ink-2:#c3c9d3;
  --ink-3:#7c8592;
  --ink-4:#3a4150;
  --hair:rgba(255,255,255,0.16);
  --hair-soft:rgba(255,255,255,0.08);
  --accent:#89d6fb;        /* 원본 tech-light */
  --accent-2:#02a9f7;      /* tech-medium */
  --accent-3:#02577a;      /* tech-dark */
  --accent-lighter:#d4f0fc;/* tech-lighter */
  --accent-dim:rgba(137,214,251,0.14);
  /* 상세 페이지 호환 별칭 */
  --paper:var(--bg);
  --paper-warm:var(--bg-2);
  --body:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --display:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
html,body{margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:var(--body); letter-spacing:-0.01em}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{overflow-x:hidden; word-break:keep-all; overflow-wrap:break-word; background:transparent} /* 배경은 html에만: body 배경이 z-index:-1 캔버스를 덮지 않도록 */
h1,h2,h3,h4,h5,p,li,dt,dd,span,a,figcaption{word-break:keep-all}
code,pre,.mono,.term-line{word-break:break-word; overflow-wrap:anywhere}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
::selection{background:rgba(137,214,251,0.28)}
.mono{font-family:var(--mono)}

/* ======= 배경 별밭 (sticky, 섹션 뒤) ======= */
.bg{position:sticky; top:0; height:100vh; z-index:-1; margin-bottom:-100vh; pointer-events:none}
.bg canvas{width:100%; height:100%; display:block}
.skills{background:transparent}

/* ======= Nav ======= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:56px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s ease-in-out, background .3s;
  background:linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
}
.nav.hide{transform:translateY(-120%)}
.nav.solid{background:rgba(0,0,0,0.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--hair-soft)}
.nav-inner{display:flex; align-items:center; gap:26px; max-width:1360px; width:100%; padding:0 28px}
.nav-logo{font-weight:700; font-size:13.5px; letter-spacing:-0.01em}
.nav-clock{font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:0.02em}
.nav-clock b{color:var(--ink); font-weight:600}
.nav-spacer{flex:1}
.nav a.nav-item{font-size:12.5px; color:var(--ink-3); transition:color .2s}
.nav a.nav-item:hover{color:var(--ink)}
.nav-back{font-size:12.5px; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px; transition:color .2s}
.nav-back:hover{color:var(--ink)}
.nav-divider{width:1px; height:14px; background:var(--hair)}
.nav .nav-cta{
  font-size:12px; font-weight:600; padding:6px 14px;
  border:1px solid var(--hair); border-radius:999px; transition:all .2s;
}
.nav .nav-cta:hover{border-color:var(--ink); background:var(--ink); color:var(--bg)}
/* 메인: 글자 롤 링크 */
.nav-links{display:flex; gap:22px; text-align:right}
.nav-links a{
  font-family:var(--display); font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); position:relative; overflow:hidden; display:inline-block; line-height:1.5; white-space:nowrap;
}
.nav-links a .a,.nav-links a .b{display:inline-block}
.nav-links a .b{position:absolute; left:0; top:0}
.nav-links a .a span,.nav-links a .b span{display:inline-block; transition:transform .25s ease-in-out}
.nav-links a .b span{transform:translateY(100%); color:var(--accent-lighter)}
.nav-links a:hover .a span{transform:translateY(-100%)}
.nav-links a:hover .b span{transform:translateY(0)}

/* ======= Hero: 핀 고정 + 블러 해체 ======= */
.hero{position:relative; height:160vh}
.hero-pin{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  max-width:1360px; margin:0 auto; padding:56px 28px 0;
}
.hero-kicker{font-family:var(--mono); font-size:13px; color:var(--ink-3); letter-spacing:0.06em; margin:0 0 14px 4px; opacity:0}
.hero h1{margin:0; font-weight:800; letter-spacing:-0.055em; line-height:0.96}
.hero h1 .l{display:block; font-size:clamp(46px, 9.6vw, 150px); opacity:0; will-change:transform,opacity,filter}
.hero h1 .l1{color:var(--accent)}
.hero h1 .l2{color:var(--accent-2)}
.hero h1 .l3{color:var(--accent-3)}
.hero-copy{
  max-width:760px; margin:40px 0 0 4px; opacity:0;
  font-size:clamp(15px,1.35vw,19px); line-height:1.75; color:#e6ebf2; will-change:transform,opacity,filter;
}
.hero-copy b{color:#fff; font-weight:600}
.hero-hint{
  position:absolute; left:50%; bottom:32px; transform:translateX(-50%);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-3);
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0; transition:opacity .8s;
}
.hero-hint .line{width:1px; height:36px; background:linear-gradient(180deg, transparent, var(--ink-3)); animation:spSlide 2.2s infinite}
@keyframes spSlide{0%{transform:scaleY(0); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}50.01%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}
body.hero-ready .hero-hint{opacity:1}

/* ======= 딴짓 은하: 3D 섹션 (sticky, 스크롤 돌리) ======= */
.galaxy{position:relative; height:150vh}
.galaxy-pin{position:sticky; top:0; height:100vh; overflow:hidden}
#galaxy-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab; opacity:0}
#galaxy-canvas:active{cursor:grabbing}
#galaxy-labels{position:absolute; inset:0; pointer-events:none; opacity:0}
.sp-label{
  position:absolute; top:0; left:0; pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-align:center; white-space:nowrap;
  color:rgba(255,255,255,0.92); text-decoration:none;
  padding:6px 10px; border-radius:8px;
  transition:background .2s; will-change:transform;
}
.sp-label:hover{background:rgba(255,255,255,0.08)}
.sp-label b{font-size:13px; font-weight:700; letter-spacing:-0.01em; text-shadow:0 1px 12px rgba(0,0,0,0.8)}
.sp-label span{font-family:var(--mono); font-size:10px; color:rgba(255,255,255,0.55)}
.galaxy-caption{
  position:absolute; left:0; right:0; bottom:28px; text-align:center; pointer-events:none;
  font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:rgba(255,255,255,0.5);
  padding:0 20px;
}
.galaxy-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--ink-3); font-size:14px; padding:0 24px;
}
.galaxy.on .galaxy-fallback{display:none}
.galaxy:not(.on){height:auto}
.galaxy:not(.on) .galaxy-pin{position:relative; height:46vh}
.galaxy:not(.on) .galaxy-caption{display:none}
#sp-card{
  position:absolute; z-index:4; width:min(300px, 82vw);
  transform:translate(-50%, -100%);
  background:rgba(10,14,24,0.86);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.16); border-radius:14px;
  padding:16px 18px 14px; color:#f5f5f7;
  box-shadow:0 18px 50px -12px rgba(0,0,0,0.6);
}
#sp-card .c-x{position:absolute; top:8px; right:8px; background:none; border:none; color:rgba(255,255,255,0.5); font-size:13px; cursor:pointer; padding:6px; display:none}
#sp-card .c-cat{font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:7px}
#sp-card .c-name{font-size:16px; font-weight:700; margin:0 0 7px; letter-spacing:-0.015em}
#sp-card .c-desc{font-size:12.5px; line-height:1.55; color:rgba(255,255,255,0.68); margin:0 0 12px}
#sp-card .c-foot{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
#sp-card .c-meta{font-family:var(--mono); font-size:10px; color:rgba(255,255,255,0.5)}
#sp-card .c-cta{font-size:12px; font-weight:600; color:var(--accent); white-space:nowrap; background:none; border:none; cursor:pointer; padding:0}

/* ======= 선언문 섹션 (200vh, sticky) ======= */
.statement{position:relative; height:200vh}
.statement-pin{
  position:sticky; top:0; min-height:100vh;
  background:linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0) 78%); /* 리본 배경 위 가독성 */
  max-width:1360px; margin:0 auto; padding:120px 28px 80px;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.st-big{
  margin:0; max-width:1180px;
  font-size:clamp(26px, 4.3vw, 64px); font-weight:300; line-height:1.22; letter-spacing:-0.03em; color:var(--accent);
  opacity:0; will-change:transform,opacity,filter;
}
.st-big b{font-weight:600; color:var(--accent-lighter)}
.st-meta{margin-top:56px; opacity:0; will-change:transform,opacity,filter}
.st-title{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
  font-family:var(--display); font-size:clamp(18px,2vw,28px); font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--accent-2);
}
.st-title svg{width:18px; height:18px}
.st-desc{margin:0 0 22px; font-size:clamp(14px,1.2vw,17px); line-height:1.7; color:var(--ink-2); max-width:720px}
.st-desc b{color:var(--ink); font-weight:600}
.st-tags{display:flex; flex-wrap:wrap; gap:10px}
.st-tags button,.st-tags span{
  font-size:12.5px; padding:8px 16px; border:1px solid var(--ink-4); border-radius:8px; background:none; color:var(--ink-2);
  cursor:pointer; transition:all .2s;
}
.st-tags button:hover{border-color:var(--ink-2); color:var(--ink)}
.st-tags button.on{background:#fff; color:#000; border-color:#fff}
.st-stats{display:flex; flex-wrap:wrap; gap:0; margin-top:34px; border-top:1px dashed var(--hair)}
.st-stats div{flex:1; min-width:150px; padding:18px 20px 0 0}
.st-stats .k{display:block; font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.st-stats .v{font-family:var(--display); font-size:clamp(22px,2.4vw,34px); font-weight:800; letter-spacing:-0.03em}

/* ======= Work: 번호 아코디언 ======= */
.work{position:relative; z-index:2; background:var(--bg); padding:0 0 120px}
.work-list{border-top:1px dashed var(--hair)}
.work-row{border-bottom:1px dashed var(--hair)}
.work-row[hidden]{display:none}
.work-row{scroll-margin-top:64px}
.work-row.no-anim .row-panel{transition:none}
.row-head{
  width:100%; display:grid; grid-template-columns:72px 1fr 40px; align-items:center; gap:24px;
  padding:26px 28px; background:var(--bg); border:none; text-align:left; cursor:pointer;
  transition:background .2s, color .2s;
}
.row-head:hover,.work-row.open .row-head{background:#fff; color:#000}
.row-num{font-family:var(--display); font-size:clamp(22px,2.6vw,38px); font-weight:200; letter-spacing:-0.04em; color:var(--accent-2); padding-top:6px}
.row-head:hover .row-num,.work-row.open .row-num{color:#0a6fc2}
.row-tag{display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; color:#8b95a3; margin-bottom:6px}
.row-head:hover .row-tag,.work-row.open .row-tag{color:#555}
.row-title{display:block; font-size:clamp(22px,3.2vw,44px); font-weight:600; letter-spacing:-0.03em; line-height:1.1}
.row-title small{font-size:0.5em; font-weight:400; color:var(--ink-3); margin-left:14px; letter-spacing:-0.01em}
.row-head:hover .row-title small,.work-row.open .row-title small{color:#666}
.row-chev{justify-self:end; width:22px; height:22px; transition:transform .35s var(--ease)}
.work-row.open .row-chev{transform:rotate(180deg)}
.row-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease)}
.work-row.open .row-panel{grid-template-rows:1fr}
.row-panel-in{overflow:hidden; min-height:0}
.panel{
  background:#fff; color:#000; padding:40px 28px 48px 100px;
  display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:40px 56px;
}
.panel > *{opacity:0; transform:translateY(30px); filter:blur(16px); transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease)}
.work-row.open .panel > *{opacity:1; transform:none; filter:blur(0)}
.work-row.open .panel > *:nth-child(2){transition-delay:.18s}
.work-row.open .panel > *:nth-child(3){transition-delay:.34s}
.panel-demo{grid-column:1}
.panel-text{grid-column:1}

/* 라이브 앱 실행 화면 (assets/shots/*.webp) */
.panel-shot{grid-column:1; margin:0}
.panel-shot img{display:block; width:100%; height:auto; border:1px solid rgba(0,0,0,0.14); border-radius:10px}
.panel-shot.bare img{border:none; border-radius:0}
.panel-shot figcaption{margin-top:10px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:#8b95a3}
.shot-trio{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.shot-trio img{border-radius:8px; aspect-ratio:16/10; object-fit:cover; object-position:top center}
.panel-spec{grid-column:2; grid-row:1 / span 2; align-self:start}
.panel-text .lead{font-size:clamp(16px,1.35vw,19px); line-height:1.7; margin:0 0 22px; color:#111}
.panel-text .lead b{font-weight:700}
.panel-feats{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 32px}
.panel-feats li{font-size:14px; line-height:1.62; color:#333; padding-left:14px; position:relative}
.panel-feats li::before{content:''; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:50%; background:var(--accent-2)}
.panel-feats li b{display:block; font-weight:700; color:#000; margin-bottom:2px}
.panel-feats li code{font-family:var(--mono); font-size:0.88em; color:#0a6fc2}
.panel-feats li a{color:#0a6fc2; border-bottom:1px solid rgba(10,111,194,0.3)}
.panel-spec dl{margin:0 0 22px; padding:0; border-top:1px solid #000}
.panel-spec dl div{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid rgba(0,0,0,0.12); font-size:13px}
.panel-spec dt{font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:#666; padding-top:2px}
.panel-spec dd{margin:0; font-weight:600; text-align:right; color:#000}
.panel-links{display:flex; flex-wrap:wrap; gap:10px}
.panel .cta{border-color:#000; color:#000}
.panel .cta:hover{background:#000; color:#fff}
.panel .cta.ghost{border-color:rgba(0,0,0,0.25); color:#333}
.panel .cta.ghost:hover{border-color:#000; background:transparent; color:#000}
.panel-note{grid-column:1 / -1; font-size:12.5px; color:#666; margin:0; padding-top:8px; border-top:1px dashed rgba(0,0,0,0.2)}
/* 딸깍 3종 */
.play-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.play-list a{display:grid; grid-template-columns:150px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid rgba(0,0,0,0.12); font-size:14px; color:#333; transition:padding-left .2s}
.play-list a:hover{padding-left:6px}
.play-list a b{color:#000; font-weight:700}

/* ======= Skills ======= */
.skills{position:relative; z-index:2; padding:40px 28px 120px; max-width:1360px; margin:0 auto}
.skill-group{border-top:1px dashed var(--hair); padding:22px 0 44px}
.skill-group h5{font-family:var(--display); font-size:clamp(18px,1.8vw,24px); font-weight:800; letter-spacing:-0.01em; margin:0 0 22px; color:var(--accent)}
.skill-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px 20px}
.skill{
  padding:16px 18px; border:1px solid var(--hair-soft); border-radius:10px; background:rgba(255,255,255,0.02);
  font-size:14px; font-weight:500; display:flex; align-items:center; gap:14px; min-width:0;
  transition:border-color .25s, background .25s;
}
.skill:hover{border-color:var(--hair); background:rgba(255,255,255,0.04)}
.skill .ico{width:36px; height:36px; flex:none}
.skill .ico.badge{display:inline-flex; align-items:center; justify-content:center; border-radius:9px; background:var(--c); color:#000; font-weight:800; font-size:16px}
.skill > div{min-width:0}
.skill b{display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.skill small{display:block; font-family:var(--mono); font-size:11.5px; color:#9aa3b2; margin-top:5px; letter-spacing:0.01em}
footer a:hover{color:var(--ink)}

/* ======= Contact ======= */
.contact{position:relative; z-index:2; background:var(--accent-2); color:#000; padding:150px 28px 110px}
.contact .wrap{max-width:1360px}
.contact h3{margin:0; max-width:1100px; font-size:clamp(24px,4vw,60px); font-weight:300; line-height:1.22; letter-spacing:-0.03em}
br.nl{display:none}
@media (min-width:961px){br.nl{display:inline}}
.contact h3 b{font-weight:600}
.contact p{max-width:620px; font-size:clamp(14px,1.2vw,17px); line-height:1.7; margin:28px 0 0; color:rgba(0,0,0,0.78)}
.contact-links{margin-top:32px; display:flex; flex-direction:column; gap:12px}
.contact-links a{display:inline-flex; align-items:center; gap:12px; font-size:clamp(15px,1.6vw,22px); font-weight:500; width:fit-content; transition:transform .2s}
.contact-links a:hover{transform:translateX(6px)}
.contact-links svg{width:20px; height:20px; flex:none}

footer{
  background:var(--bg); position:relative; z-index:2;
  padding:22px 28px 30px;
  font-family:var(--mono); font-size:11px; color:var(--ink-3);
  text-align:center; letter-spacing:0.04em;
}
footer .hits{margin-top:12px; display:flex; justify-content:center}

/* ======= 블러 인 (whileInView 대체) ======= */
.bi{opacity:0; transform:translateY(40px); filter:blur(20px); transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease)}
.bi.in{opacity:1; transform:none; filter:blur(0)}
.bi-stagger > *{opacity:0; transform:translateY(40px); filter:blur(20px); transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease)}
.bi-stagger.in > *{opacity:1; transform:none; filter:blur(0)}
.bi-stagger.in > *:nth-child(2){transition-delay:.08s}
.bi-stagger.in > *:nth-child(3){transition-delay:.16s}
.bi-stagger.in > *:nth-child(4){transition-delay:.24s}
.bi-stagger.in > *:nth-child(5){transition-delay:.32s}
.bi-stagger.in > *:nth-child(6){transition-delay:.4s}
.bi-stagger.in > *:nth-child(7){transition-delay:.48s}
.bi-stagger.in > *:nth-child(8){transition-delay:.56s}
.bi-stagger.in > *:nth-child(n+9){transition-delay:.62s}

/* ======= 상세 페이지 공용: eyebrow · chapter · feat-list · cta · reveal ======= */
.eyebrow{
  font-family:var(--display); font-size:13px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:12px; margin-bottom:34px;
}
.eyebrow::before{content:''; width:36px; height:1px; background:var(--accent-2)}
section.chapter{padding:130px 28px; border-top:1px dashed var(--hair)}
section.chapter.warm{background:var(--bg-2)}
.wrap{max-width:1160px; margin:0 auto}
.chapter-label{display:flex; align-items:baseline; gap:16px; font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-bottom:28px}
.chapter-label .num{font-family:var(--display); font-size:13px; font-weight:700; color:var(--accent); letter-spacing:0.04em}
.chapter-label a.star{color:var(--ink-2); border-bottom:1px solid var(--hair); padding-bottom:1px; transition:border-color .2s}
.chapter-label a.star:hover{border-color:var(--ink)}
.chapter h2{font-size:clamp(36px,4.8vw,66px); line-height:1.06; letter-spacing:-0.038em; font-weight:800; margin:0 0 26px; max-width:900px}
.chapter h2 .sub{color:var(--ink-3); font-weight:700}
.chapter .tagline{font-size:clamp(16px,1.4vw,19px); color:var(--ink-2); max-width:600px; line-height:1.62; margin:0}
.chapter .tagline b{color:var(--ink); font-weight:700}
.chapter .tagline a{color:var(--accent)}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; border-radius:999px;
  font-size:13.5px; font-weight:600;
  border:1px solid var(--ink); color:var(--ink);
  transition:all .22s; background:none; cursor:pointer;
}
.cta:hover{background:var(--ink); color:var(--bg)}
.cta:hover span{transform:translateX(3px)}
.cta span{transition:transform .22s}
.cta.ghost{border-color:var(--hair); color:var(--ink-2)}
.cta.ghost:hover{border-color:var(--ink); background:transparent; color:var(--ink)}
.cta-row{margin-top:44px; display:flex; gap:12px; flex-wrap:wrap}
.feat-list{margin-top:88px; display:grid; grid-template-columns:1fr 1fr; gap:0 64px; border-top:1px solid var(--ink)}
.feat{display:grid; grid-template-columns:44px 1fr; gap:16px; padding:26px 0; border-bottom:1px dashed var(--hair-soft)}
.feat .fn{font-family:var(--mono); font-size:12px; color:var(--ink-3); padding-top:3px}
.feat h4{font-size:16.5px; font-weight:700; margin:0 0 7px; letter-spacing:-0.015em}
.feat p{font-size:14px; line-height:1.6; color:var(--ink-3); margin:0}
.feat p b{color:var(--ink-2); font-weight:600}
.feat p code{font-family:var(--mono); font-size:0.86em; color:var(--accent)}
.feat p a{color:var(--accent); border-bottom:1px solid rgba(137,214,251,0.3)}
.reveal{opacity:0; transform:translateY(26px); filter:blur(14px); transition:opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease)}
.reveal.in{opacity:1; transform:none; filter:blur(0)}
.reveal-stagger > *{opacity:0; transform:translateY(16px); filter:blur(12px); transition:opacity .65s var(--ease), transform .65s var(--ease), filter .65s var(--ease)}
.reveal-stagger.in > *{opacity:1; transform:none; filter:blur(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.04s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.1s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.22s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.28s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.34s}
.reveal-stagger.in > *:nth-child(7){transition-delay:.4s}
.reveal-stagger.in > *:nth-child(8){transition-delay:.46s}

/* ======= 데모 오브젝트: 터미널 (law) ======= */
.terminal{background:var(--panel); border:1px solid rgba(0,0,0,0.1); border-radius:12px; overflow:hidden; font-family:var(--mono); font-size:13px; line-height:1.6}
.term-bar{display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,0.08)}
.term-bar .dot{width:10px;height:10px;border-radius:50%; background:rgba(255,255,255,0.14)}
.term-bar .title{font-size:11px; color:rgba(255,255,255,0.4); margin-left:8px}
.term-body{padding:20px 22px; color:#e5e5e7; min-height:300px}
.term-line{margin:2px 0; white-space:pre-wrap}
.term-user{color:#89d6fb}
.term-arrow{color:#ffc857}
.term-k{color:#ffc857}
.term-v{color:#f5f5f7}
.term-dim{color:#6b7280}
.cursor{display:inline-block; width:7px; height:14px; background:#89d6fb; vertical-align:-2px; margin-left:2px; animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ======= 데모 오브젝트: 포맷 플로우 (kordoc) ======= */
.flow{
  border:1px solid rgba(0,0,0,0.15); border-radius:14px; background:#fff; color:#000;
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; overflow:hidden;
}
.flow > .col{padding:28px 26px}
.flow .col-h{font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:#666; margin-bottom:16px}
.flow .fmt{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px solid rgba(0,0,0,0.08); font-size:13px}
.flow .fmt:last-child{border-bottom:none}
.flow .fmt .e{font-family:var(--mono); font-weight:600}
.flow .fmt .d{color:#666; font-size:12px; text-align:right}
.flow .join{display:flex; align-items:center; padding:0 6px; color:#999; font-size:18px; background:#f3f4f6}
.flow .engine{background:#f3f4f6; display:flex; flex-direction:column; justify-content:center}
.flow .engine .name{font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-0.02em; margin-bottom:10px}
.flow .engine ul{margin:0; padding:0; list-style:none; font-size:13px; color:#333; line-height:1.9}
.flow .engine li::before{content:'·'; color:#999; margin-right:8px}
.flow .out{display:flex; flex-direction:column; justify-content:center}
.flow .out pre{margin:0; font-family:var(--mono); font-size:12px; line-height:1.75; color:#333; white-space:pre-wrap}
.flow .out pre .h{color:#0a6fc2; font-weight:600}
.flow .out pre .tbl{color:#777}

/* ======= 데모 오브젝트: Anything 앱 목업 ======= */
.df-app{border-radius:12px; overflow:hidden; border:1px solid rgba(0,0,0,0.15); background:#fff; color:#000}
.df-titlebar{height:38px; border-bottom:1px solid rgba(0,0,0,0.08); display:flex; align-items:center; padding:0 14px; gap:7px; background:#f3f4f6}
.df-titlebar .dot{width:10px;height:10px;border-radius:50%; background:#d1d5db}
.df-titlebar .title{flex:1; text-align:center; font-size:12px; color:#666; font-weight:500}
.df-body{display:grid; grid-template-columns:200px 1fr; min-height:420px}
.df-side{border-right:1px solid rgba(0,0,0,0.08); padding:20px 12px; background:#fafafa}
.df-side .side-h{font-family:var(--mono); font-size:10px; color:#666; letter-spacing:0.12em; text-transform:uppercase; padding:0 10px; margin-bottom:10px}
.df-folder{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; font-size:13px; color:#333; margin-bottom:2px}
.df-folder.active{background:rgba(10,111,194,0.08); color:#0a6fc2; font-weight:600}
.df-folder .fi{width:14px; height:14px; opacity:0.7}
.df-stats{padding:0 10px; font-family:var(--mono); font-size:11px; color:#666; line-height:1.9}
.df-stats b{color:#000; font-weight:600}
.df-main{padding:22px 26px}
.df-search{display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid rgba(0,0,0,0.15); border-radius:10px; margin-bottom:16px}
.df-search .q{flex:1; font-size:14px}
.df-search .kbd{font-family:var(--mono); font-size:10px; color:#666; padding:3px 6px; border:1px solid rgba(0,0,0,0.12); border-radius:4px}
.df-modes{display:flex; gap:8px; margin-bottom:14px}
.df-mode{padding:6px 12px; border-radius:999px; font-size:11.5px; border:1px solid rgba(0,0,0,0.1); color:#666; transition:all .35s}
.df-mode.on{border-color:#0a6fc2; color:#0a6fc2; font-weight:600}
.df-meta{font-family:var(--mono); font-size:10.5px; color:#666; margin-bottom:14px}
.df-meta b{color:#0a6fc2; font-weight:600}
.df-results{display:flex; flex-direction:column; gap:10px; min-height:300px}
.df-result{padding:14px 18px; border-radius:10px; border:1px solid rgba(0,0,0,0.1); opacity:0; transform:translateY(6px); animation:dfIn .55s var(--ease) forwards}
.df-result:nth-child(1){animation-delay:.04s}
.df-result:nth-child(2){animation-delay:.14s}
.df-result:nth-child(3){animation-delay:.24s}
.df-results.leaving .df-result{animation:dfOut .28s cubic-bezier(.4,0,.2,1) forwards}
.df-results.leaving .df-result:nth-child(2){animation-delay:.04s}
.df-results.leaving .df-result:nth-child(3){animation-delay:.08s}
@keyframes dfIn{to{opacity:1; transform:none}}
@keyframes dfOut{to{opacity:0; transform:translateY(-4px)}}
.df-result .f-name{font-size:13px; margin-bottom:4px; font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.df-result .f-ext{font-family:var(--mono); font-size:9.5px; font-weight:600; color:#666; padding:2px 6px; border:1px solid rgba(0,0,0,0.12); border-radius:4px}
.df-result .f-path{font-family:var(--mono); font-size:10px; color:#666; margin-bottom:6px}
.df-result .f-snip{font-size:12.5px; color:#333; line-height:1.55}
.df-result .f-snip mark{background:rgba(10,111,194,0.12); color:#0a6fc2; padding:1px 3px; border-radius:3px}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger>*,.bi,.bi-stagger>*,.panel>*{opacity:1; transform:none; filter:none; transition:none}
  .df-result{opacity:1; animation:none}
  .hero h1 .l,.hero-kicker,.hero-copy,.st-big,.st-meta{opacity:1}
  .hero,.galaxy,.statement{height:auto}
  .hero-pin,.statement-pin{position:relative; height:auto; min-height:0; padding-top:120px}
  .galaxy-pin{height:80vh}
}

/* ======= Responsive ======= */
@media (max-width:960px){
  .panel{grid-template-columns:1fr; padding-left:28px}
  .panel-spec{grid-column:1; grid-row:auto}
  .panel-feats{grid-template-columns:1fr}
  .skill-grid{grid-template-columns:repeat(2, 1fr)}
  .feat-list{grid-template-columns:1fr; margin-top:64px}
  .flow{grid-template-columns:1fr}
  .flow .join{padding:8px 0; justify-content:center}
  .flow .join::before{content:'↓'}
  .flow .join span{display:none}
  .df-body{grid-template-columns:1fr}
  .shot-trio{grid-template-columns:1fr}
  .df-side{display:none}
  section.chapter{padding:88px 22px}
  .row-head{grid-template-columns:52px 1fr 24px; gap:16px; padding:22px 20px}
}
@media (max-width:640px){
  .nav-inner{padding:0 16px; gap:14px}
  .nav-clock{display:none}
  .nav-links{gap:14px}
  .nav-links a{font-size:11px}
  .nav-links a.opt{display:none}
  .nav a.nav-item{display:none}
  .hero{height:130vh}
  .hero-pin{padding:56px 20px 0}
  .hero h1 .l{font-size:clamp(38px, 12vw, 60px)}
  .hero-copy{margin-top:26px; font-size:15px}
  .galaxy{height:120vh}
  .sp-label b{font-size:12px}
  .sp-label span{font-size:9px}
  #sp-card .c-x{display:block}
  .statement{height:170vh}
  .statement-pin{padding:96px 20px 60px}
  .st-meta{margin-top:36px}
  .st-stats div{min-width:44%}
  .row-head{grid-template-columns:40px 1fr 20px; padding:18px 16px}
  .row-title small{display:block; margin:6px 0 0}
  .panel{padding:26px 16px 32px}
  .play-list a{grid-template-columns:1fr; gap:4px}
  .skills{padding:24px 20px 80px}
  .skill-grid{grid-template-columns:1fr 1fr; gap:8px}
  .skill{padding:12px 12px; font-size:13px; gap:10px}
  .skill .ico{width:30px; height:30px}
  .skill .ico.badge{font-size:14px}
  .contact{padding:100px 20px 80px}
  section.chapter{padding:64px 18px}
  .chapter h2{font-size:clamp(28px,7.6vw,40px)}
  .terminal{font-size:11.5px}
  .term-body{min-height:auto; padding:16px 16px}
  .df-main{padding:16px 14px}
  .df-modes{flex-wrap:wrap}
}