/* ═══════════════════════════════════════════════════════════════════
   st.css — ST_Portfolio 디자인 시스템
   레퍼런스: midu.design · tanweer.framer.ai
     검정 바닥 · 거대한 타입 · 흐릿한 글로우 · 모노 코너 라벨 ·
     프리로더 · 스크롤에 붙어 움직이는 미디어 · 블러에서 선명으로
   커브·시간은 Stripe/Linear/Anthropic 에서 직접 재서 가져왔다.
   스타일시트는 이 파일 하나. 추가하지 마세요.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* 면 */
  --bg:#050505;
  --bg-2:#0b0b0d;
  --surface:#121215;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.22);

  /* 글자 */
  --ink:#f6f6f8;
  --ink-2:#a0a0aa;
  --ink-3:#71717c;          /* 15px 이상에서만 쓴다 */

  /* 프로젝트 색 — 글로우로 쓴다 */
  --accent:#8f6cff;

  /* 타입 */
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  /* 라틴만 넓은 그로테스크로 — 한글은 자동으로 Pretendard 가 받는다 */
  --font-display:"Archivo","Pretendard Variable",Pretendard,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  --t-mega:clamp(44px,8.4vw,142px);
  --t-hero:clamp(38px,6.2vw,104px);
  --t-display:clamp(30px,4.4vw,68px);
  --t-h2:clamp(25px,2.9vw,44px);
  --t-h3:clamp(20px,1.5vw,26px);
  --t-lead:clamp(18px,1.55vw,24px);
  --t-body:17px;
  --t-meta:15px;            /* 하한선 */

  /* 리듬 */
  --gut:clamp(20px,4vw,64px);
  --band:clamp(84px,10vw,168px);
  --maxw:1440px;
  --readw:66ch;
  --r:16px;
  --r-lg:22px;

  /* 모션 — 재서 가져온 값 */
  --e-out:cubic-bezier(.16,1,.3,1);      /* 큰 등장 */
  --e-soft:cubic-bezier(.25,1,.5,1);     /* 기본 */
  --e-quick:cubic-bezier(.4,0,.2,1);     /* 버튼 */
  --e-big:cubic-bezier(.32,.72,0,1);     /* 커튼 */
  --e-inout:cubic-bezier(.77,0,.175,1);  /* jeskojets 시그니처 — 장면 전환 */
  --t-big:1s;                            /* 큰 전환은 1초 */
  --slow:.9s;
  --mid:.34s;
  --fast:.16s;
  --hdr:70px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
html.ss{scroll-behavior:auto}   /* 부드러운 스크롤은 JS 가 맡는다 */
[id]{scroll-margin-top:calc(var(--hdr) + 28px)}
body{
  margin:0;color:var(--ink);        /* 배경은 html 에만 — 글로우가 그 위에 깔린다 */
  font:400 var(--t-body)/1.62 var(--font);
  letter-spacing:-.01em;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
button{font:inherit}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* ── 프리로더: 0 → 100, 그리고 커튼이 올라간다 ─────────────────── */
.pre{display:none}
.js .pre{
  display:grid;position:fixed;inset:0;z-index:2000;
  background:var(--bg);align-content:center;
  padding:0 var(--gut);
  transition:transform .9s var(--e-big),opacity .5s .35s linear
}
.js.ready .pre{transform:translateY(-101%);opacity:0;pointer-events:none}
.pre-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;max-width:var(--maxw);margin:0 auto;width:100%
}
.pre-name{
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.14em;
  color:var(--ink-3);text-transform:uppercase
}
.pre-n{font-family:var(--font-display);
  font-size:clamp(64px,13vw,190px);font-weight:600;
  letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums
}
.pre-bar{
  position:fixed;left:0;bottom:0;height:2px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .25s linear
}

/* ── 글로우: 화면 뒤에서 천천히 도는 빛 ─────────────────────────── */
.gpu{
  position:fixed;inset:0;z-index:-2;width:100%;height:100%;
  pointer-events:none;display:block
}
.js.gpu-on .glow{display:none}        /* 셰이더가 살아 있으면 CSS 글로우는 끈다 */
.js.gpu-on .grain{opacity:0}
.glow{
  position:fixed;inset:-25vmax;z-index:-2;pointer-events:none;
  filter:blur(90px) saturate(150%);opacity:.55;
  transition:opacity 1.2s linear
}
.glow i{
  position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--c) 0%,transparent 68%);
  will-change:transform
}
.glow i:nth-child(1){width:58vmax;height:58vmax;left:6%;top:2%;--c:color-mix(in oklab,var(--accent) 70%,#4b2cff)}
.glow i:nth-child(2){width:46vmax;height:46vmax;right:4%;top:18%;--c:color-mix(in oklab,var(--accent) 45%,#ff4d7d)}
.glow i:nth-child(3){width:52vmax;height:52vmax;left:34%;bottom:2%;--c:color-mix(in oklab,var(--accent) 30%,#12c2e9)}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")
}

/* ── 공용 ───────────────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative}
.band{padding-block:var(--band)}
.band-t{padding-top:var(--band)}
.sub{color:var(--ink-2)}
.lead{font-size:var(--t-lead);line-height:1.5;letter-spacing:-.018em;color:var(--ink-2)}

.label{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:var(--t-meta);line-height:1.3;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)
}
.status{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap
}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 70%,transparent);
  animation:pulse 2.6s var(--e-soft) infinite
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 55%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

h1,h2,h3{font-family:var(--font-display)}
h1{font-size:var(--t-hero);font-weight:600;letter-spacing:-.042em;line-height:1.02}
h2{font-size:var(--t-h2);font-weight:600;letter-spacing:-.032em;line-height:1.1}
h3{font-size:var(--t-h3);font-weight:600;letter-spacing:-.022em;line-height:1.28}

/* 버튼 */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  height:52px;padding:0 28px;border-radius:999px;
  background:var(--ink);color:#08080a;border:1px solid var(--ink);
  font-size:16px;font-weight:550;letter-spacing:-.012em;cursor:pointer;overflow:hidden;
  transform:translate(var(--mx,0px),var(--my,0px));
  transition:background var(--fast) var(--e-quick),color var(--fast) var(--e-quick),
             border-color var(--fast) var(--e-quick),transform .4s var(--e-soft)
}
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(120px 60px at var(--gx,50%) 50%,rgba(255,255,255,.35),transparent 70%);
  opacity:0;transition:opacity var(--mid) var(--e-soft)
}
.btn:hover::after{opacity:1}
.btn-ghost{
  background:transparent;color:var(--ink);border-color:var(--line-2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.btn-ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.06)}
.btn-ghost::after{background:radial-gradient(120px 60px at var(--gx,50%) 50%,rgba(255,255,255,.14),transparent 70%)}
.btn-sm{height:42px;padding:0 20px;font-size:var(--t-meta)}
.arw{display:inline-block;transition:transform var(--mid) var(--e-out)}
.btn:hover .arw{transform:translateX(4px)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

.tlink{
  display:inline-flex;align-items:center;gap:8px;font-weight:500;
  padding-bottom:3px;background-image:linear-gradient(var(--ink),var(--ink));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transform:translate(var(--mx,0px),var(--my,0px));
  transition:background-size var(--mid) var(--e-out),transform .4s var(--e-soft)
}
.tlink:hover{background-size:100% 1px}
.tlink:hover .arw{transform:translateX(4px)}

/* ── 헤더: 바 없이, 알약 버튼이 각각 떠 있다 ──────────────────── */
.hdr{
  position:fixed;inset:14px var(--gut) auto;z-index:900;
  display:flex;align-items:center;gap:8px;
  background:none;border:0;padding:0;
  transform:translateY(calc(var(--hide,0) * -160%));
  transition:transform .55s var(--e-big)
}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 18px;border-radius:999px;white-space:nowrap;
  background:rgba(10,10,13,.55);border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  font-size:var(--t-meta);color:var(--ink-2);
  transition:background var(--fast) var(--e-quick),color var(--fast) var(--e-quick),
             border-color var(--fast) var(--e-quick),transform var(--mid) var(--e-out)
}
.pill:hover{
  color:var(--ink);border-color:var(--line-2);
  background:rgba(255,255,255,.10);transform:translateY(-2px)
}
.hdr-brand{
  font-family:var(--font-display);font-size:var(--t-meta);font-weight:700;
  letter-spacing:.16em;color:var(--ink);padding:0 20px
}
.hdr-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.hdr-nav a[aria-current=page]{
  background:var(--ink);border-color:var(--ink);color:#08080a;font-weight:600
}
.hdr-nav a[aria-current=page]:hover{background:var(--ink);color:#08080a;transform:translateY(-2px)}
.hdr-burger{display:none}
/* 스크롤 진행선은 화면 맨 위로 */
.hdr-prog{
  position:fixed;left:0;right:0;top:0;height:2px;z-index:901;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
  opacity:.8;will-change:transform;pointer-events:none
}

@media (max-width:900px){
  .hdr-cta{display:none}
  .hdr-burger{
    display:grid;place-items:center;gap:5px;margin-left:auto;
    width:46px;height:46px;padding:0;border-radius:999px;cursor:pointer
  }
  .hdr-burger span,.hdr-burger::before,.hdr-burger::after{
    content:"";display:block;width:18px;height:1.5px;background:var(--ink);
    transition:transform var(--mid) var(--e-out),opacity var(--fast) linear
  }
  .hdr[data-open] .hdr-burger::before{transform:translateY(6.5px) rotate(45deg)}
  .hdr[data-open] .hdr-burger span{opacity:0}
  .hdr[data-open] .hdr-burger::after{transform:translateY(-6.5px) rotate(-45deg)}
  .hdr-nav{
    position:fixed;inset:calc(44px + 26px) var(--gut) auto;display:none;
    flex-direction:column;align-items:stretch;gap:8px;margin-left:0
  }
  .hdr[data-open] .hdr-nav{display:flex}
  .hdr-nav a{height:52px;font-size:17px;justify-content:flex-start;padding:0 22px}
}

/* ── 모래 히어로 ───────────────────────────────────────────────── */
.hero{padding-top:clamp(112px,15vh,190px);padding-bottom:clamp(56px,8vw,112px)}
.sand{
  position:relative;width:100%;color:var(--ink);
  height:clamp(112px,18.4vw,252px);
  margin-bottom:clamp(26px,3.4vw,50px)
}
.sand canvas{width:100%;height:100%;display:block}
@media (max-width:600px){.sand{height:clamp(84px,22vw,124px)}}

.ftr-sand{margin:clamp(30px,5vw,70px) 0 clamp(26px,4vw,50px);height:clamp(76px,11vw,150px)}
.corner{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:clamp(22px,3vw,40px)
}

/* ── 줄 마스크 ─────────────────────────────────────────────────── */
.lines span{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.lines i{display:block;font-style:normal}
.js .lines.reveal{opacity:1;transform:none;filter:none}
.js .lines i{transform:translateY(112%);transition:transform var(--slow) var(--e-out)}
.js .lines.in i{transform:none}
.js .lines span:nth-child(2) i{transition-delay:.1s}
.js .lines span:nth-child(3) i{transition-delay:.2s}

/* 글자 단위 등장 */
.w{display:inline-block;white-space:nowrap}
.js .sp{display:inline-block;opacity:0;transform:translateY(.55em) rotate(3deg)}
.js .in .sp,.js .sp.in{
  opacity:1;transform:none;
  transition:opacity .5s var(--e-soft),transform .7s var(--e-out);
  transition-delay:calc(var(--c,0)*20ms)
}
.no-js .sp{opacity:1;transform:none}

/* 시머: 중요한 한 줄만 */
.shimmer{
  background:linear-gradient(100deg,var(--ink) 30%,color-mix(in oklab,var(--accent) 80%,#fff) 48%,var(--ink) 64%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6.5s linear infinite
}
@keyframes shimmer{0%{background-position:150% 0}100%{background-position:-50% 0}}

/* ── 마키 ──────────────────────────────────────────────────────── */
.marquee{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:skewX(var(--sk,0deg));transition:transform .2s var(--e-soft);
  padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)
}
.marquee-in{
  display:flex;align-items:center;gap:clamp(20px,2.4vw,36px);
  width:max-content;white-space:nowrap;
  font-size:clamp(16px,1.5vw,22px);letter-spacing:-.02em;color:var(--ink-3);
  animation:slide 48s linear infinite
}
.marquee:hover .marquee-in{animation-play-state:paused}
.marquee b{font-weight:600;color:var(--ink)}
.marquee .sep{color:var(--line-2)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── 순회 목록 + 현지 시각 (jeskojets 의 도시 목록) ────────────── */
.cycler{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,64px);align-items:center
}
.cyc-list{position:relative;height:clamp(150px,20vw,230px);overflow:hidden}
.cyc-item{
  position:absolute;left:0;right:0;top:50%;
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,52px);font-weight:600;letter-spacing:-.036em;
  color:var(--ink-3);transform:translateY(-50%);
  transition:opacity .5s var(--e-soft),color .5s var(--e-soft),transform .5s var(--e-soft)
}
.cyc-item[data-on]{color:var(--ink)}
.cyc-meta{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.cyc-v{
  font-family:var(--font-display);
  font-size:clamp(30px,3.6vw,54px);font-weight:600;letter-spacing:-.036em;
  font-variant-numeric:tabular-nums;line-height:1
}
.cyc-k{
  margin-top:8px;font-family:var(--mono);font-size:var(--t-meta);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)
}
@media (max-width:820px){
  .cycler{grid-template-columns:1fr}
  .cyc-list{height:clamp(120px,32vw,170px)}
}

/* ── 페이지 머리 ───────────────────────────────────────────────── */
.head{padding-top:clamp(118px,16vh,200px)}
.head h1{margin-top:clamp(18px,2vw,30px)}
.head .lead{margin-top:clamp(20px,2.4vw,34px);max-width:48ch}
.head .actions{margin-top:clamp(26px,3vw,42px)}

/* ── 대표 작업 ─────────────────────────────────────────────────── */
.lead-card{display:block}
.lead-media{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--surface);aspect-ratio:16/9;
  border:1px solid var(--line);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9)
}
.lead-media img{width:100%;height:100%;object-fit:cover;object-position:top center;will-change:transform}
.lead-media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(5,5,5,.5),transparent 55%);
  opacity:.9
}
.lead-media::after{
  content:"↗";position:absolute;z-index:2;right:20px;bottom:20px;
  width:56px;height:56px;border-radius:50%;
  background:var(--ink);color:#08080a;display:grid;place-items:center;
  font-size:22px;line-height:1;
  opacity:0;transform:scale(.6) translateY(10px);
  transition:opacity var(--mid) var(--e-soft),transform var(--mid) var(--e-out)
}
.lead-card:hover .lead-media::after{opacity:1;transform:none}
.lead-text{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:18px clamp(24px,3vw,48px);align-items:end;
  margin-top:clamp(20px,2.4vw,34px)
}
.lead-main{display:flex;flex-direction:column;gap:12px}
.lead-h{font-family:var(--font-display);display:block;font-size:clamp(28px,3.4vw,52px);font-weight:600;letter-spacing:-.036em;line-height:1.06}
.lead-d{font-size:var(--t-lead);color:var(--ink-2);letter-spacing:-.018em;line-height:1.45}
.feature-more{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:16px;font-weight:500;
  background-image:linear-gradient(var(--ink),var(--ink));background-size:0% 1px;
  background-position:0 100%;background-repeat:no-repeat;padding-bottom:3px;
  transition:background-size var(--mid) var(--e-out)
}
.lead-card:hover .feature-more{background-size:100% 1px}
.lead-card:hover .arw{transform:translateX(4px)}
@media (max-width:720px){
  .lead-media{aspect-ratio:4/3}
  .lead-text{grid-template-columns:1fr;align-items:start}
}


/* ═══ 장면: 스크롤이 타임라인 ═════════════════════════════════
   [data-scene] 은 화면보다 높다. 안의 .scene-in 이 붙어서 재생된다.
   움직임은 JS 가 매 프레임 직접 쓴다 (transition 없음 → 되감아도 정확하다).
   jeskojets 가 GSAP 으로 하는 일과 같은 방식.                      */
.scene{position:relative}
.scene-in{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden
}

/* ── 장면 0: SEAN TEAM — 모래가 글자로 모였다가 흩어진다 ────── */
.sc-brand{height:210vh}
.sc-brand .scene-in{display:grid;place-items:center}
.brand-sand{
  position:absolute;inset:0;display:grid;place-items:center;
  padding:0 var(--gut);color:var(--ink)
}
.brand-sand canvas{width:100%;height:min(56vh,420px);display:block}
.brand-sub{
  position:absolute;left:0;right:0;bottom:clamp(120px,18vh,220px);z-index:3;
  padding:0 var(--gut);max-width:var(--maxw);margin:0 auto;
  display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center;
  will-change:transform,opacity
}
.brand-sub .lead{max-width:34ch}
.zoom-hint{
  position:absolute;z-index:5;left:50%;bottom:clamp(22px,4vh,40px);
  transform:translateX(-50%);
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.18em;color:var(--ink-3);
  text-transform:uppercase;display:flex;align-items:center;gap:12px;white-space:nowrap
}
.zoom-hint i{
  display:block;width:1px;height:28px;background:currentColor;opacity:.6;
  animation:drop 2.4s var(--e-inout) infinite
}
@keyframes drop{
  0%{transform:scaleY(0);transform-origin:50% 0}
  45%{transform:scaleY(1);transform-origin:50% 0}
  55%{transform:scaleY(1);transform-origin:50% 100%}
  100%{transform:scaleY(0);transform-origin:50% 100%}
}
@media (max-width:900px){
  .sc-brand{height:200vh}
  .brand-sand canvas{height:min(22vh,140px)}
}

/* ── 3D 카드 행 (tanweer 의 FEATURED AI VIDEOS) ────────────────
   원근 선반 위에 세로 카드 13개가 늘어서서 계속 흐른다.
   카드마다 그 제품의 영상이 돈다 (assets/reels/<slug>.mp4).        */
.row-sec{position:relative;padding-block:clamp(72px,9vw,128px);overflow:hidden}
.row-head{
  padding:0 var(--gut);max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);align-items:end
}
.row-head h2{font-size:clamp(34px,5.4vw,88px);letter-spacing:-.045em;line-height:1;margin-top:14px}
.row-head p{color:var(--ink-2);font-size:16px;line-height:1.6;max-width:34ch}
.row-stage{
  margin-top:clamp(30px,4vw,56px);
  height:clamp(470px,78vh,880px);
  /* 회전은 화면 크기의 평면(.row-3d)에 건다. 긴 트랙에 직접 걸면
     기준점이 수천 px 밖이라 카드가 두 배로 커졌다 반으로 줄었다 한다. */
  perspective:1600px;perspective-origin:50% 50%;overflow:hidden
}
.row-3d{
  position:absolute;inset:0;display:flex;align-items:center;
  transform:rotateY(15deg) rotateX(6deg) rotateZ(-1.6deg);
  transform-style:preserve-3d
}
.row-track{
  display:flex;align-items:center;gap:clamp(16px,1.6vw,28px);padding:0 8vw;
  width:max-content;will-change:transform
}
.row-card{
  position:relative;flex:0 0 clamp(300px,26vw,470px);
  height:clamp(440px,72vh,830px);
  border-radius:22px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95);
  transition:border-color var(--mid) linear,box-shadow var(--mid) linear
}
.row-card:hover{
  border-color:color-mix(in oklab,var(--accent) 60%,transparent);
  box-shadow:0 50px 130px -40px color-mix(in oklab,var(--accent) 50%,transparent)
}
.row-media{position:absolute;inset:0}
.row-vid,.row-media img{width:100%;height:100%;object-fit:cover;display:block}
.row-media .card-media-empty{height:100%}
.row-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(4,4,7,.94) 2%,rgba(4,4,7,.55) 28%,transparent 58%)
}
.row-body{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 clamp(16px,1.4vw,22px) clamp(18px,1.6vw,24px);
  display:flex;flex-direction:column;gap:7px
}
.row-body .status{font-size:var(--t-meta)}
.row-body h3{font-family:var(--font-display);font-size:clamp(19px,1.5vw,25px);letter-spacing:-.024em}
.row-body p{font-size:var(--t-meta);color:var(--ink-2);line-height:1.45}
.row-foot{display:flex;justify-content:center;margin-top:clamp(28px,3.6vw,50px)}
@media (max-width:820px){
  .row-head{grid-template-columns:1fr}
  .row-stage{height:clamp(380px,62vh,560px);perspective:1200px}
  .row-3d{transform:rotateY(11deg) rotateX(5deg)}
  .row-card{flex-basis:clamp(230px,62vw,320px);height:clamp(360px,58vh,540px)}
}

/* ── 로켓: 나사부터 조립 → 점화 → 발사 ─────────────────────────
   부품마다 --d(등장 시점)·--dx/--dy/--dr(시작 위치·각도).
   조립이 끝나면 불이 붙고, 가속하며 화면 위로 빠져나간다.        */
.sc-rocket{height:420vh}
.sc-rocket .scene-in{display:grid;place-items:center;padding:0 var(--gut);overflow:hidden}
.rx-lift{
  /* 발사: 0.88 이후 가속(세제곱)해서 위로 빠진다 */
  --l:clamp(0,(var(--p,0) - .86) / .12,1);
  --acc:calc(var(--l) * var(--l) * var(--l));
  transform:translate3d(0,calc(var(--acc) * -150vh),0) scale(calc(1 - var(--acc) * .12));
  will-change:transform
}
.rx-svg{
  height:min(84vh,860px);width:auto;overflow:visible;
  filter:drop-shadow(0 50px 110px rgba(0,0,0,.9))
}
.rx{
  --pi:clamp(0,(var(--p,0) - var(--d)) / .2,1);
  transform-box:fill-box;transform-origin:50% 50%;
  transform:
    translate(calc((1 - var(--pi)) * var(--dx) * 1px),
              calc((1 - var(--pi)) * var(--dy) * 1px))
    rotate(calc((1 - var(--pi)) * var(--dr) * 1deg));
  opacity:calc(clamp(0,var(--pi) * 2,1))
}
.rx-fire{
  transform-box:fill-box;transform-origin:50% 0;
  opacity:calc(clamp(0,(var(--p,0) - .81) * 14,1));
  /* 발사하면 화염이 길어진다 */
  transform:scaleY(calc(.25 + clamp(0,(var(--p,0) - .81) * 14,1) * .75
                        + clamp(0,(var(--p,0) - .86) / .12,1) * 1.8));
  animation:rxflick .13s steps(2,end) infinite
}
.rx-fire .b{mix-blend-mode:screen}
@keyframes rxflick{0%{filter:none}100%{filter:brightness(1.18) saturate(1.1)}}
.rx-trail{
  transform-box:fill-box;transform-origin:50% 0;
  opacity:calc(clamp(0,(var(--p,0) - .87) * 16,1) * .8);
  transform:scaleY(calc(clamp(0,(var(--p,0) - .87) / .11,1)))
}
.rx-body{animation:rxfloat 11s ease-in-out infinite}
@keyframes rxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:820px){
  .sc-rocket{height:340vh}
  .rx-svg{height:min(66vh,560px)}
}

/* ── 벤토 그리드 (tanweer 의 INSIDE THE STUDIO) ───────────────── */
.bento{
  display:grid;gap:clamp(14px,1.4vw,22px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(150px,auto)
}
.b-cell{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:var(--bg-2);
  padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:10px;
  transition:border-color var(--mid) linear,transform var(--mid) var(--e-soft)
}
.b-cell:hover{border-color:var(--line-2);transform:translateY(-3px)}
.b-cell h3{font-family:var(--font-display);font-size:clamp(18px,1.5vw,23px);letter-spacing:-.022em}
.b-cell p{color:var(--ink-2);font-size:15.5px;line-height:1.55}
.b-cell .label{margin-bottom:2px}
.b-w2{grid-column:span 2}
.b-w2-h2{grid-column:span 2;grid-row:span 2}
.b-media{position:absolute;inset:0;z-index:-1;opacity:.5}
.b-media img{width:100%;height:100%;object-fit:cover;object-position:top center}
.b-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg-2) 8%,rgba(11,11,13,.55) 60%,rgba(11,11,13,.2))}
.b-foot{margin-top:auto;font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-3);letter-spacing:.06em}
.b-nums{display:flex;gap:clamp(18px,2.4vw,40px);flex-wrap:wrap;margin-top:auto}
.b-nums div span{display:block}
.b-num-v{font-size:clamp(28px,3vw,44px);font-weight:600;letter-spacing:-.034em;font-variant-numeric:tabular-nums}
.b-num-k{margin-top:6px;font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-3);letter-spacing:.08em}
@media (max-width:980px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-w2-h2{grid-column:span 2;grid-row:span 1}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .b-w2,.b-w2-h2{grid-column:span 1}
}

/* ── 월: 13개 상태를 한 벽에 (tanweer 의 커뮤니티 월) ──────────── */
.wall-sec{position:relative;overflow:hidden;padding-block:var(--band)}
.wall{
  display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));
  -webkit-mask-image:radial-gradient(ellipse 84% 76% at 50% 50%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 84% 76% at 50% 50%,#000 30%,transparent 78%)
}
.wall-col{display:grid;gap:14px;will-change:transform}
.w-card{
  border:1px solid var(--line);border-radius:14px;padding:18px;
  background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:9px
}
.w-card h3{font-family:var(--font-display);font-size:17px;letter-spacing:-.02em}
.w-card p{font-size:15px;color:var(--ink-2);line-height:1.5}
.w-card .card-tags{font-size:var(--t-meta)}
.wall-over{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  padding:0 var(--gut);text-align:center;pointer-events:none
}
.wall-over > div{pointer-events:auto;max-width:34ch}
.wall-over h2{font-size:clamp(28px,4.4vw,68px);letter-spacing:-.04em;line-height:1.04}
.wall-over .lead{margin-top:20px}
.wall-over .actions{margin-top:30px;justify-content:center}
@media (max-width:980px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── 장면 D: 마지막 선언 + 숫자 ─────────────────────────────── */
.sc-num{height:200vh}
.sc-num .scene-in{background:var(--ink);color:#08080a}
.num-in{
  position:absolute;inset:0;display:grid;align-content:center;gap:clamp(30px,4vw,60px);
  padding:0 var(--gut);max-width:var(--maxw);margin:0 auto;left:0;right:0
}
.sc-num .statement{font-family:var(--font-display);color:#08080a;will-change:transform,opacity}
.sc-num .lead{color:#3a3a40;max-width:48ch;will-change:transform,opacity}
.sc-num .figs{border-top-color:rgba(0,0,0,.16)}
.sc-num .figs > *{will-change:transform,opacity}
.sc-num .fig-k{color:#5c5c66}
.sc-num .btn{background:#08080a;color:var(--ink);border-color:#08080a}
.sc-num .btn-ghost{background:transparent;color:#08080a;border-color:rgba(0,0,0,.24)}
.sc-num .actions{will-change:transform,opacity}

/* ── 바닥 알약 (jeskojets 의 Book the Flight) ────────────────── */

.cta-float{
  /* left:50% 로 두면 가용 폭이 뷰포트의 절반이라 좁은 화면에서 글자가 꺾인다.
     좌우를 0 으로 잡고 margin 으로 가운데 정렬해 폭을 온전히 쓴다. */
  position:fixed;left:0;right:0;bottom:22px;z-index:850;
  width:-moz-fit-content;width:fit-content;margin:0 auto;
  white-space:nowrap;
  transform:translateY(140%);opacity:0;
  transition:transform .6s var(--e-inout),opacity .4s linear
}
.cta-float.on{transform:none;opacity:1}
@media (max-width:600px){.cta-float{bottom:16px}}

/* ── 헤더: 브랜드를 가운데로 ───────────────────────────────── */
.hdr-brand{position:absolute;left:50%;transform:translateX(-50%)}
.hdr-nav{margin-left:0}
.hdr-cta{margin-left:auto}
@media (max-width:900px){
  .hdr-brand{position:static;transform:none}
}

/* 상세 페이지의 큰 화면 — 잘라내지 않고 전체를 보여준다 */
.case-media{
  overflow:hidden;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:0 50px 130px -50px rgba(0,0,0,.95)
}
.case-media img{width:100%;height:auto}

/* ── 카드 그리드 ───────────────────────────────────────────────── */
.grid-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3.2vw,46px)
}
.grid{
  display:grid;gap:clamp(26px,2.6vw,40px) clamp(18px,1.8vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))
}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr))}
.card{
  display:flex;flex-direction:column;gap:16px;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .5s var(--e-soft)
}
.card-media{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--surface);aspect-ratio:16/10;border:1px solid var(--line);
  transition:border-color var(--mid) linear,box-shadow var(--mid) linear
}
.card:hover .card-media{
  border-color:color-mix(in oklab,var(--accent) 55%,transparent);
  box-shadow:0 30px 70px -30px color-mix(in oklab,var(--accent) 45%,transparent)
}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.05s var(--e-soft)}
.card:hover .card-media img{transform:scale(1.05)}
.card-media::after{
  content:"↗";position:absolute;right:13px;bottom:13px;
  width:42px;height:42px;border-radius:50%;
  background:var(--ink);color:#08080a;display:grid;place-items:center;font-size:18px;line-height:1;
  opacity:0;transform:scale(.6) translateY(8px);
  transition:opacity var(--mid) var(--e-soft),transform var(--mid) var(--e-out)
}
.card:hover .card-media::after{opacity:1;transform:none}
.card-media-empty{
  display:grid;place-items:center;height:100%;padding:20px;text-align:center;
  font-size:var(--t-h3);font-weight:600;letter-spacing:-.022em;color:var(--ink-3)
}
.card h3{transition:color var(--fast) linear}
.card:hover h3{color:#fff}
.card-desc{font-size:16px;color:var(--ink-2);line-height:1.5}
.card-foot{margin-top:auto;padding-top:4px}
.card-tags{font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-3);letter-spacing:.04em}

/* ── 만드는 순서 ───────────────────────────────────────────────── */
.steps{
  display:grid;gap:0 clamp(24px,3vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))
}
.step{border-top:1px solid var(--line);padding:26px 0 0;transition:border-color var(--mid) linear}
.step:hover{border-top-color:var(--line-2)}
.step-n{
  font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.14em;color:var(--ink-3);
  transition:transform var(--mid) var(--e-out),color var(--mid) linear
}
.step:hover .step-n{transform:translateX(6px);color:var(--accent)}
.step h3{margin-top:18px}
.step p{margin-top:12px;font-size:16px;color:var(--ink-2);line-height:1.55;max-width:34ch}

/* 필터 */
.filters{display:flex;gap:9px;flex-wrap:wrap}
.chip-btn{
  height:42px;padding:0 19px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink-2);
  font-size:var(--t-meta);cursor:pointer;
  transform:translate(var(--mx,0px),var(--my,0px));
  transition:background var(--fast) var(--e-quick),color var(--fast) var(--e-quick),
             border-color var(--fast) var(--e-quick),transform .4s var(--e-soft)
}
.chip-btn:hover{border-color:var(--line-2);color:var(--ink)}
.chip-btn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#08080a}
.count{font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-3);letter-spacing:.06em}

/* ── 숫자 · 지표 ───────────────────────────────────────────────── */
.figs,.metrics{
  display:grid;gap:clamp(26px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  border-top:1px solid var(--line);padding-top:clamp(28px,3vw,44px)
}
.fig-v,.metric-v{font-family:var(--font-display);
  font-size:clamp(36px,4.4vw,64px);font-weight:600;letter-spacing:-.038em;line-height:1;
  font-variant-numeric:tabular-nums
}
.fig-k,.metric-k{
  margin-top:12px;font-size:var(--t-meta);color:var(--ink-3);max-width:25ch
}

/* ── 편집형 본문 ───────────────────────────────────────────────── */
.sec{
  display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);
  gap:clamp(18px,3vw,56px);
  border-top:1px solid var(--line);
  padding-top:clamp(26px,2.8vw,44px);
  margin-top:clamp(44px,5.4vw,80px)
}
.sec:first-child{margin-top:0}
.sec-n{position:sticky;top:calc(var(--hdr) + 34px);align-self:start;font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase}
.sec-body{max-width:var(--readw)}
.sec-body h3{font-size:clamp(21px,2.1vw,34px);letter-spacing:-.028em;line-height:1.22}
.sec-body p{margin-top:19px;color:var(--ink-2)}
.sec-body p.ko{color:var(--ink);font-size:var(--t-lead);line-height:1.52;letter-spacing:-.018em}
.sec-body p.ko strong{font-weight:600}
.sec-body figure{margin-top:clamp(26px,3vw,42px)}
.sec-body figure img{border-radius:var(--r);border:1px solid var(--line);width:100%}
.sec-body figcaption{margin-top:15px;font-size:var(--t-meta);color:var(--ink-2);max-width:60ch}
.sec-body .actions{margin-top:clamp(26px,3vw,38px)}
@media (max-width:820px){.sec{grid-template-columns:1fr;gap:14px}}

.specs{border-top:1px solid var(--line)}
.spec-row{
  display:grid;grid-template-columns:minmax(130px,220px) minmax(0,1fr);
  gap:clamp(16px,3vw,40px);padding:20px 0;border-bottom:1px solid var(--line);
  transition:background var(--mid) linear
}
.spec-row:hover{background:rgba(255,255,255,.03)}
.spec-row dt{font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.spec-row dd{color:var(--ink)}
.spec-row dd a{border-bottom:1px solid var(--line-2)}
.spec-row dd a:hover{border-bottom-color:var(--ink)}
@media (max-width:620px){.spec-row{grid-template-columns:1fr;gap:6px}}

.features{
  display:grid;gap:0 clamp(24px,3vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))
}
.feature-item{border-top:1px solid var(--line);padding:22px 0}
.feature-t{font-weight:600;letter-spacing:-.018em}
.feature-d{margin-top:9px;font-size:16px;color:var(--ink-2);line-height:1.5}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-2);letter-spacing:.04em;
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;white-space:nowrap;
  transition:border-color var(--fast) linear,color var(--fast) linear
}
.chip:hover{border-color:var(--line-2);color:var(--ink)}

/* ── 흰 띠: 검정 위에서 한 번 뒤집는다 ─────────────────────────── */
.light{background:var(--ink);color:#08080a;position:relative;z-index:1}
.light .lead,.light .sub,.light p{color:#3a3a40}
.light .label,.light .sec-n,.light .fig-k,.light .metric-k,.light .count{color:#5c5c66}
.light .figs,.light .metrics,.light .sec,.light .specs,.light .spec-row{border-color:rgba(0,0,0,.14)}
.light .btn{background:#08080a;color:var(--ink);border-color:#08080a}
.light .btn-ghost{background:transparent;color:#08080a;border-color:rgba(0,0,0,.22)}
.light .btn-ghost:hover{background:rgba(0,0,0,.06)}
.light .tlink{background-image:linear-gradient(#08080a,#08080a)}

.statement{max-width:28ch;font-size:var(--t-display);font-weight:600;letter-spacing:-.038em;line-height:1.06}

/* ── 다음 · 푸터 ───────────────────────────────────────────────── */
.next{border-top:1px solid var(--line);padding-top:clamp(26px,3vw,42px)}
.next a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:16px}
.next h3{font-size:clamp(26px,3vw,46px);letter-spacing:-.034em;transition:transform var(--mid) var(--e-out)}
.next a:hover h3{transform:translateX(10px)}

.ftr{position:relative;padding-top:var(--band);border-top:1px solid var(--line)}
.ftr-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(40px,5vw,72px);
  display:grid;gap:clamp(24px,3vw,44px)
}
.ftr h2{max-width:22ch}
.ftr-links{display:flex;flex-direction:column;gap:15px;align-content:start}
.ftr-links a{
  font-size:16px;color:var(--ink-2);width:fit-content;
  background-image:linear-gradient(var(--ink),var(--ink));background-size:0% 1px;
  background-position:0 100%;background-repeat:no-repeat;padding-bottom:2px;
  transition:color var(--fast) linear,background-size var(--mid) var(--e-out)
}
.ftr-links a:hover{color:var(--ink);background-size:100% 1px}
.ftr-base{
  max-width:var(--maxw);margin:0 auto;padding:24px var(--gut);
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase
}
@media (max-width:820px){.ftr-in{grid-template-columns:1fr}}

/* ── 등장: 블러에서 선명으로 ───────────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(22px);filter:blur(6px)}
.js .reveal.in{
  opacity:1;transform:none;filter:none;
  transition:opacity var(--slow) var(--e-out),transform var(--slow) var(--e-out),filter var(--slow) var(--e-out);
  transition-delay:calc(var(--i,0)*80ms)
}
.no-js .reveal{opacity:1;transform:none;filter:none}

/* 나갈 때 커튼 */
.js .curtain{
  position:fixed;inset:0;z-index:1800;background:var(--bg);
  transform:translateY(101%);pointer-events:none
}
.js.leaving .curtain{transform:none;transition:transform .5s var(--e-big)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;filter:none;transition:none}
  .js .lines i{transform:none;transition:none}
  .js .sp{opacity:1;transform:none;transition:none}
  .scene{height:auto!important}
  .scene-in{position:static;height:auto;overflow:visible;padding-block:var(--band)}
  .sc-brand,.sc-row,.sc-num,.sc-rocket,.sc-flow{height:auto!important}
  .fl-cv{display:none!important}
  .rx{--pi:1}
  .rx-fire{opacity:1;animation:none;transform:none}
  .rx-body{animation:none}
  .rx-lift{transform:none}
  .rx-trail{display:none}
  .brand-sand{position:static}
  .brand-sand canvas{height:120px}
  .brand-sub{position:static;opacity:1;margin-top:26px;text-align:left}
  .row-head,.row-stage,.row-foot,.num-in{
    position:static;transform:none;height:auto;
    padding:0 var(--gut);max-width:var(--maxw);margin:0 auto
  }
  .row-head{display:grid;grid-template-columns:1fr;margin-bottom:26px}
  .row-stage{perspective:none;overflow-x:auto;padding-bottom:10px}
  .row-track{transform:none!important;padding:0}
  .row-live{display:none}
  .wall{-webkit-mask-image:none;mask-image:none}
  .wall-over{position:static;padding:0;margin-bottom:34px;text-align:left}
  .wall-over .actions{justify-content:flex-start}
  .wall-col{transform:none!important}
  .cyc-item{font-family:var(--font-display);position:relative;transform:none;color:var(--ink);opacity:1!important}
  .cyc-list{height:auto;display:grid;gap:8px}
  .cycler{grid-template-columns:1fr}
  .statement,.figs > *,.actions{opacity:1!important;transform:none!important}
  .cta-float{display:none}
  .marquee-in,.shimmer,.dot,.glow i{animation:none}
  .card-media img,.lead-media img{transition:none}
  .js .pre{display:none}
  .js .curtain{display:none}
}

@media print{
  .hdr,.ftr,.filters,.gpu,.glow,.grain,.pre,.curtain{display:none}
  body{background:#fff;color:#000}
}


/* ═══ 케이스 스토리 (.cs-*) — 상세 페이지 공용 틀 ═══════════════════
   _src/cases/<slug>.json (story.py 가 그린다) 과 gold-building-v3.html 이 쓴다.
   midu.design 의 문법을 가져왔다:
   거대 워드마크 + 뒤에서 비추는 빛 · 읽는 만큼 밝아지는 문단 · 펴지는 화면 ·
   하이라이트 카드 · 밝은 판 · 다시 워드마크.
   기본은 평범한 세로 문서다. .csjs (st.js gold() 가 붙인다) 일 때만 장면이
   길어지고 화면에 붙는다 → 모션 끔 · JS 실패 모두 이 기본 상태로 떨어진다.
   색은 프로젝트 accent 하나에서 네 단계로 뽑는다 (페이지가 --c1~4 를 직접 줘도 된다). */
.cs{
  --c2:var(--accent);
  --c1:color-mix(in oklab,var(--accent) 42%,#fff);
  --c3:color-mix(in oklab,var(--accent) 70%,#000);
  --c4:color-mix(in oklab,var(--accent) 26%,#000);
  --paper:#ece7dd; --p-ink:#141315; --p-ink2:#57535b
}
.cs-acc{color:var(--c2)}
.cs-btn{background:var(--c2);border-color:var(--c2);color:#0b0b0d}
.cs-btn:hover{background:var(--c1);border-color:var(--c1)}
.cs code{font-family:var(--mono);font-size:.88em;padding:.08em .38em;border-radius:6px;background:rgba(255,255,255,.08)}

/* 워드마크 — 글자는 어둡고, 뒤의 빛과 겹치는 곳만 밝아진다 (screen) */
.cs-word{
  position:absolute;left:var(--gut);right:var(--gut);bottom:-.14em;z-index:1;margin:0;
  display:flex;justify-content:space-between;
  font-family:var(--font-display);font-size:calc((100vw - 2 * var(--gut)) / var(--wm,4.08));font-weight:800;line-height:1;letter-spacing:0;
  mix-blend-mode:screen;transform-origin:50% 100%;will-change:transform
}
.cs-word span{
  display:block;color:transparent;
  background:linear-gradient(180deg,#242428 6%,#302f33 40%,color-mix(in oklab,var(--c2) 52%,#2a2a2e) 76%,var(--c1) 100%);
  -webkit-background-clip:text;background-clip:text
}
.cs-sun{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform,opacity}
.cs-sun i{
  position:absolute;left:50%;bottom:-40vh;width:150vw;height:96vh;margin-left:-75vw;border-radius:50%;
  background:radial-gradient(closest-side,var(--c1) 0%,var(--c2) 22%,var(--c3) 44%,color-mix(in oklab,var(--c4) 80%,transparent) 66%,transparent 100%);
  filter:blur(26px);opacity:.92
}
.cs-hero .cs-pin::after,.cs-end-word::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")
}

/* 0 · 히어로 */
.cs-hero .cs-pin{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate}
.cs-hero-meta{
  position:absolute;left:0;right:0;top:calc(var(--hdr) + 64px);z-index:3;padding:0 var(--gut);
  display:flex;justify-content:space-between;align-items:flex-start;gap:28px
}
.cs-hero-l{display:flex;flex-direction:column;gap:14px}
.cs-hero-l .label a{border-bottom:1px solid var(--line-2)}
.cs-live{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-meta);color:var(--ink-2)}
.cs-live i{width:8px;height:8px;border-radius:50%;background:var(--c2);box-shadow:0 0 14px var(--c2)}
.cs-live b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cs-hero-tag{font-size:clamp(22px,2.4vw,38px);font-weight:600;line-height:1.16;letter-spacing:-.032em;max-width:14ch}
.cs-hint{
  position:absolute;right:var(--gut);top:calc(var(--hdr) + 64px + 150px);z-index:3;
  display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.14em;color:var(--ink-3)
}
.cs-hint i{position:relative;display:block;width:1px;height:34px;background:var(--line-2);overflow:hidden}
.cs-hint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:csDrip 2.6s var(--e-inout) infinite}
@keyframes csDrip{to{top:100%}}
/* 들어올 때 — 해가 먼저 번지고, 글자가 한 자씩 올라온다 */
.js .cs-hero .cs-word span{opacity:0;transform:translate3d(0,34%,0)}
.js.ready .cs-hero .cs-word span{
  opacity:1;transform:none;
  transition:transform 1.4s var(--e-out) calc(.2s + var(--i) * .09s),opacity 1.1s var(--e-soft) calc(.2s + var(--i) * .09s)
}
.js .cs-hero .cs-sun i{opacity:0;transform:translate3d(0,12vh,0)}
.js.ready .cs-hero .cs-sun i{opacity:.92;transform:none;transition:opacity 2.2s var(--e-soft),transform 2.4s var(--e-out)}
.js .cs-hero-l,.js .cs-hero-tag,.js .cs-hint{opacity:0;transform:translate3d(0,16px,0)}
.js.ready .cs-hero-l,.js.ready .cs-hero-tag,.js.ready .cs-hint{opacity:1;transform:none;transition:opacity 1s var(--e-soft) .7s,transform 1s var(--e-out) .7s}
@media (max-width:760px){
  .cs-hero-meta{flex-direction:column;gap:22px}
  .cs-hint{display:none}
  .cs-hero .cs-word.two{flex-wrap:wrap;font-size:calc((100vw - 2 * var(--gut)) / 2.06);line-height:.96;bottom:-.1em}
  .cs-hero .cs-word.two span{width:50%;text-align:center}
}

/* 1 · 큰 문장 + 읽는 만큼 밝아지는 문단 */
.cs-state{padding-top:var(--band);padding-bottom:calc(var(--band) * .5)}
.cs-big{font-size:var(--t-display);font-weight:600;letter-spacing:-.042em;line-height:1.08;max-width:19ch;margin:0 auto;text-align:center}
.cs-about{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);margin-top:clamp(72px,9vw,150px);align-items:start
}
.cs-read{font-size:clamp(22px,2.2vw,34px);font-weight:500;line-height:1.4;letter-spacing:-.026em;color:var(--ink)}
.cs-about-side{display:flex;flex-direction:column;gap:22px}
.cs-about-side p{font-size:16px;color:var(--ink-2);line-height:1.65}
@media (max-width:980px){.cs-about{grid-template-columns:1fr}}

/* 2 · 기울어진 화면이 펴진다 */
.cs-device{position:relative;padding:var(--band) 0 0}
.cs-dev-head{text-align:center;padding:0 var(--gut);margin-bottom:clamp(30px,4vw,56px)}
.cs-dev-head h2{margin-top:16px;font-size:var(--t-display);letter-spacing:-.042em}
.cs-stage{perspective:1700px;padding:0 var(--gut)}
.cs-screen{
  position:relative;width:min(1180px,100%);margin:0 auto;border-radius:18px;overflow:hidden;
  background:#0a0a0b;border:1px solid rgba(255,255,255,.14);transform-origin:50% 100%;will-change:transform;
  box-shadow:0 70px 170px -50px color-mix(in oklab,var(--c2) 48%,transparent),0 30px 80px -30px rgba(0,0,0,.9)
}
.cs-bar{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;background:#141416;border-bottom:1px solid var(--line)}
.cs-bar i{width:11px;height:11px;border-radius:50%;background:#2d2d31}
.cs-bar span{margin:0 auto;transform:translateX(-26px);padding:3px 18px;border-radius:999px;background:#0a0a0b;font-size:var(--t-meta);color:var(--ink-2)}
.cs-view{position:relative;aspect-ratio:16/10;overflow:hidden}
.cs-view img{width:100%;height:auto;will-change:transform}
.cs-caps{
  list-style:none;margin:clamp(24px,3vw,40px) auto 0;padding:0 var(--gut);max-width:calc(1180px + 2 * var(--gut));
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px
}
.cs-caps li{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line-2);padding-top:14px}
.cs-caps b{font-size:var(--t-h3);font-weight:600;letter-spacing:-.022em}
.cs-caps span{font-size:var(--t-meta);color:var(--ink-2);line-height:1.5}
@media (max-width:760px){.cs-caps{grid-template-columns:1fr}}

/* 3 · 예시 한 채 */
.cs-stack{padding:var(--band) 0 0}
.cs-stack-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"head head" "bldg out";
  gap:clamp(28px,4vw,64px) clamp(28px,6vw,110px);align-items:end
}
.cs-stack-head{grid-area:head;max-width:64ch}
.cs-stack-head h2{margin-top:14px}
.cs-stack-head p{margin-top:14px;font-size:16px;color:var(--ink-2);line-height:1.6}
.cs-bldg{grid-area:bldg;display:grid;gap:6px;width:100%;max-width:560px}
.cs-roof{height:16px;margin-left:56px;border:1px solid var(--line-2);border-bottom:0;border-radius:12px 12px 0 0}
.cs-fl{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px}
.cs-fl-n{font-family:var(--mono);font-size:var(--t-meta);color:var(--ink-2);text-align:right}
.cs-fl-box{
  display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:clamp(64px,11vh,112px);padding:12px 20px;border-radius:12px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--c2) 86%,#fff),var(--c2));color:#1b1105;
  box-shadow:0 18px 50px -24px color-mix(in oklab,var(--c2) 70%,transparent)
}
.cs-fl[data-k="0"] .cs-fl-box{background:linear-gradient(180deg,#c78634,#a0631f)}
.cs-fl-box b{display:block;font-size:clamp(18px,1.6vw,24px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.cs-fl-box small{display:block;font-size:15px;opacity:.72}
.cs-fl-box > span:last-child{text-align:right}
.cs-ground{margin:4px 0 4px 56px;border-top:1.5px dashed var(--line-2)}
.cs-read-out{grid-area:out;display:grid;gap:clamp(44px,5vw,64px)}
.cs-ph{display:flex;flex-direction:column;gap:14px;max-width:580px}
.cs-ph-k{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.04em;color:var(--c2)}
.cs-ph p{font-size:16px;color:var(--ink-2);line-height:1.6}
.cs-sum,.cs-net{display:flex;align-items:baseline;gap:12px;font-variant-numeric:tabular-nums}
.cs-sum b{font-size:clamp(60px,8vw,128px);font-weight:700;letter-spacing:-.05em;line-height:.92}
.cs-net b{font-size:clamp(76px,11vw,180px);font-weight:700;letter-spacing:-.055em;line-height:.9;color:var(--c1);text-shadow:0 0 70px color-mix(in oklab,var(--c2) 55%,transparent)}
.cs-sum span,.cs-net span{font-size:var(--t-h3);color:var(--ink-2)}
.cs-split{display:flex;gap:3px;height:62px;border-radius:12px;overflow:hidden}
.cs-seg{flex:var(--w) 1 0%;display:flex;align-items:center;min-width:0;overflow:hidden;padding:0 14px;font-size:15px;color:#1b1105;white-space:nowrap}
.cs-seg.s0,.cs-legend i.s0{background:var(--c2)}
.cs-seg.s1,.cs-legend i.s1{background:#b9b2a6}
.cs-seg.s2,.cs-legend i.s2{background:#6d675f}
.cs-seg.s2{color:var(--ink)}
.cs-legend{display:grid;gap:10px}
.cs-legend div{display:flex;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cs-legend dt{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink-2)}
.cs-legend i{flex:none;width:10px;height:10px;border-radius:3px}
.cs-legend dd{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-na{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.cs-na li{display:flex;align-items:center;gap:12px;padding:11px 18px;border-radius:999px;border:1px dashed color-mix(in oklab,var(--c2) 60%,transparent);font-size:16px}
.cs-na span{color:var(--c2);font-weight:600}
@media (max-width:900px){
  .cs-stack-in{grid-template-columns:1fr;grid-template-areas:"head" "bldg" "out"}
}

/* 4 · 하이라이트 */
.cs-hl{padding-top:var(--band);padding-bottom:clamp(90px,9vw,140px)}
.cs-hl-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(22px,4vw,64px);align-items:end;margin-bottom:clamp(40px,5vw,80px)}
.cs-hl-h{font-size:var(--t-hero);font-weight:600;letter-spacing:-.046em;line-height:1}
.cs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.cs-card:nth-child(even){translate:0 clamp(40px,7vw,110px)}
.cs-card{
  position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  min-height:clamp(440px,46vw,680px);padding:clamp(18px,1.8vw,26px);border-radius:28px;overflow:hidden;
  background:radial-gradient(90% 60% at 50% 0%,color-mix(in oklab,var(--c2) 12%,#0e0e10),#0c0c0e 70%);
  border:1px solid var(--line);transition:border-color var(--mid) var(--e-soft)
}
.cs-card:hover{border-color:color-mix(in oklab,var(--c2) 45%,transparent)}
.cs-card-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.cs-card-media img{
  position:absolute;left:7%;top:13%;width:86%;height:auto;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 36px 90px -26px rgba(0,0,0,.9);
  transition:scale 1s var(--e-inout)
}
.cs-card:hover .cs-card-media img{scale:1.04}
.cs-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top,#0b0b0c 16%,rgba(11,11,12,.7) 36%,transparent 58%)}
.cs-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.cs-tags i{
  font-style:normal;font-size:var(--t-meta);padding:6px 13px;border-radius:999px;
  background:rgba(18,18,20,.72);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.cs-card-t{display:flex;flex-direction:column;gap:10px;max-width:46ch}
.cs-card-t b{font-size:clamp(24px,2.2vw,34px);font-weight:600;letter-spacing:-.032em;line-height:1.1}
.cs-card-t span{font-size:16px;color:var(--ink-2);line-height:1.58}
@media (max-width:760px){
  .cs-hl-head{grid-template-columns:1fr}
  .cs-cards{grid-template-columns:1fr}
  .cs-card:nth-child(even){translate:none}
  .cs-card{min-height:500px}
}

/* 5 · 밝은 판 — 숫자마다 출처 */
.cs-sheet{
  position:relative;margin-top:clamp(40px,5vw,80px);background:var(--paper);color:var(--p-ink);
  border-radius:clamp(28px,4vw,56px);padding:clamp(80px,10vw,160px) 0 clamp(110px,12vw,200px);
  transform-origin:50% 0;will-change:transform
}
.cs-src-h{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,34px);font-size:var(--t-hero);font-weight:600;letter-spacing:-.046em;line-height:1}
.cs-srcs{display:flex;flex-wrap:wrap;gap:10px;max-width:1120px}
.cs-srcs i{
  font-style:normal;font-size:clamp(15px,1.25vw,19px);font-weight:600;letter-spacing:-.012em;line-height:1.2;
  padding:12px 18px;border-radius:14px;background:#fff;color:var(--p-ink);
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 30px -14px rgba(0,0,0,.2)
}
.cs-src-end{align-self:flex-end}
.cs-sheet-lead{margin-top:clamp(24px,3vw,40px);font-size:var(--t-lead);line-height:1.5;color:var(--p-ink2);max-width:42ch}
.cs-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1000px;margin:clamp(64px,8vw,120px) auto 0}
.cs-rule:nth-child(even){translate:0 clamp(40px,6vw,90px)}
.cs-rule{background:#fff;border-radius:22px;padding:clamp(22px,2.4vw,34px);box-shadow:0 22px 60px -32px rgba(0,0,0,.28)}
.cs-rule-n{font-family:var(--mono);font-size:var(--t-meta);color:#94651c}
.cs-rule h3{margin-top:14px;font-size:clamp(21px,1.8vw,27px);color:var(--p-ink)}
.cs-rule p{margin-top:12px;font-size:16px;line-height:1.66;color:var(--p-ink2)}
.cs-sheet code{background:rgba(0,0,0,.06)}
@media (max-width:760px){
  .cs-rules{grid-template-columns:1fr}
  .cs-rule:nth-child(even){translate:none}
  .cs-src-end{align-self:flex-start}
}

/* 6 · 숫자 */
.cs-figs{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2vw,32px);
  margin-top:clamp(28px,3.4vw,50px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--line)
}
.cs-figs b{display:block;font-size:clamp(36px,3.8vw,64px);font-weight:600;letter-spacing:-.046em;line-height:1;font-variant-numeric:tabular-nums}
.cs-figs div:first-child b{color:var(--c1)}
.cs-figs span{display:block;margin-top:12px;font-size:var(--t-meta);line-height:1.45;color:var(--ink-2)}
.cs-specs{margin-top:clamp(50px,6vw,90px)}
@media (max-width:1100px){.cs-figs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.cs-figs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 7 · 묻고 답하기 */
.cs-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(30px,5vw,90px);align-items:start}
.cs-faq-head{position:sticky;top:calc(var(--hdr) + 54px)}
.cs-faq-head h2{margin-top:16px;font-size:var(--t-display);letter-spacing:-.042em;line-height:1.06}
.cs-qs{display:flex;flex-direction:column;gap:12px}
.cs-q{border-radius:20px;background:#0e0e10;border:1px solid var(--line);transition:border-color var(--mid) var(--e-soft),background var(--mid) var(--e-soft)}
.cs-q[open]{background:#131210;border-color:color-mix(in oklab,var(--c2) 38%,transparent)}
.cs-q summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;
  padding:24px 26px;font-size:clamp(18px,1.5vw,22px);font-weight:600;letter-spacing:-.022em
}
.cs-q summary::-webkit-details-marker{display:none}
.cs-q summary i{position:relative;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2)}
.cs-q summary i::before,.cs-q summary i::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--ink);
  transition:transform var(--mid) var(--e-out)
}
.cs-q summary i::after{transform:rotate(90deg)}
.cs-q[open] summary i::after{transform:rotate(0deg)}
.cs-a{padding:0 26px 26px;max-width:64ch;font-size:17px;line-height:1.72;color:var(--ink-2)}
@supports (interpolate-size:allow-keywords){
  .cs-q{interpolate-size:allow-keywords}
  .cs-q::details-content{height:0;overflow:clip;transition:height .7s var(--e-inout),content-visibility .7s allow-discrete}
  .cs-q[open]::details-content{height:auto}
}
@media (max-width:900px){
  .cs-faq{grid-template-columns:1fr}
  .cs-faq-head{position:static}
}

/* 8 · 닫기 — 같은 이름, 이번엔 해가 뜬다 */
.cs-end{position:relative;padding-top:var(--band);overflow:hidden}
.cs-end-in{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(26px,3vw,40px)}
.cs-end-h{font-size:var(--t-hero);font-weight:600;letter-spacing:-.046em;line-height:1}
.cs-next{width:100%;margin-top:clamp(36px,5vw,80px)}
.cs-end-word{
  position:relative;isolation:isolate;overflow:hidden;height:calc((100vw - 2 * var(--gut)) / var(--wm,4.08) * .78);margin-top:clamp(50px,7vw,110px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 42%,#000 78%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 42%,#000 78%,transparent)
}
@media (max-width:760px){
  .cs-end-word.two{height:calc((100vw - 2 * var(--gut)) / 2.06 * 1.5)}
  .cs-end-word .cs-word.two{flex-wrap:wrap;font-size:calc((100vw - 2 * var(--gut)) / 2.06);line-height:.96;bottom:-.2em}
  .cs-end-word .cs-word.two span{width:50%;text-align:center}
}
.cs-end-word .cs-word{bottom:-.3em}
.cs-end-word .cs-sun i{bottom:-72vh}

/* ── 장면 (.csjs) — 부모가 화면보다 높고 .cs-pin 이 붙는다 ── */
.csjs .cs-hero{height:150vh}
.csjs .cs-hero .cs-pin{position:sticky;top:0}
.csjs .cs-read .cs-wd{opacity:.16}
.csjs .cs-hl-h .cs-wd{opacity:.16}

.csjs .cs-device{height:320vh;padding:0}
.csjs .cs-device .cs-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.csjs .cs-dev-head{position:absolute;left:0;right:0;top:calc(var(--hdr) + 44px);margin:0;z-index:2}
.csjs .cs-screen{width:min(1180px,88vw,calc((100svh - 150px) * 1.52))}
.csjs .cs-caps{position:absolute;left:0;right:0;bottom:clamp(18px,4vh,44px);margin:0;display:block;height:0;z-index:3}
.csjs .cs-caps li{
  position:absolute;left:var(--gut);bottom:0;max-width:36ch;opacity:0;
  padding:16px 20px;border:1px solid var(--line);border-radius:16px;
  background:rgba(8,8,10,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}

.csjs .cs-stack{height:390vh;padding:0}
.csjs .cs-stack .cs-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.csjs .cs-stack-in{width:100%;padding-top:calc(var(--hdr) + 24px)}
.csjs .cs-read-out{grid-template:1fr / 1fr;align-self:center}
.csjs .cs-ph{grid-area:1 / 1;align-self:center;opacity:0}
.csjs .cs-ph[data-ph="0"]{opacity:1}
.csjs .cs-fl,.csjs .cs-roof{opacity:0}
@media (max-width:900px){
  .csjs .cs-stack-head p{display:none}
  .csjs .cs-stack-head h2{font-size:clamp(21px,5.4vw,28px)}
  .csjs .cs-stack-in{gap:18px}
  .csjs .cs-fl-box{min-height:54px;padding:8px 14px}
  .csjs .cs-roof{height:10px}
  .csjs .cs-read-out{align-self:start}
  .csjs .cs-sum b{font-size:clamp(52px,15vw,84px)}
  .csjs .cs-net b{font-size:clamp(64px,19vw,110px)}
  .csjs .cs-split{height:48px}
}
@media (max-width:760px){
  /* 좁은 화면에선 창을 세로로 — 제품의 본문 열이 읽히게 */
  .csjs .cs-screen{width:min(88vw,calc((100svh - 190px) * .8))}
  .csjs .cs-view{aspect-ratio:4 / 5}
  .csjs .cs-view img{width:172%;max-width:none;margin-left:-12%}
  .csjs .cs-caps{bottom:92px}
  .csjs .cs-caps li{right:var(--gut)}
}

@media (prefers-reduced-motion:reduce){
  .js .cs-hero .cs-word span,.js .cs-hero .cs-sun i,
  .js .cs-hero-l,.js .cs-hero-tag,.js .cs-hint{opacity:1;transform:none;transition:none}
  .js .cs-hero .cs-sun i{opacity:.92}
  .cs-hint i::after{animation:none}
  .cs-card-media img,.cs-q,.cs-q summary i::before,.cs-q summary i::after{transition:none}
  .cs-q::details-content{transition:none}
}

/* 2' · 폰 3대 — 가운데 모여 있다가 펼쳐지고, 캡션이 가리키는 폰이 앞으로 */
.cs-phones{position:relative;padding:var(--band) 0 0}
.cs-trio{display:flex;justify-content:center;align-items:flex-end;gap:clamp(12px,2.4vw,40px);padding:0 var(--gut)}
.cs-phone{
  position:relative;margin:0;width:clamp(104px,21vw,290px);aspect-ratio:9 / 19.5;overflow:hidden;
  border-radius:clamp(18px,3vw,44px);background:#0a0a0b;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 clamp(3px,.5vw,7px) #111114,0 50px 120px -40px color-mix(in oklab,var(--c2) 50%,transparent),0 30px 70px -30px rgba(0,0,0,.9);
  will-change:transform,opacity
}
.cs-phone:nth-child(2){margin-bottom:clamp(18px,3vw,48px)}
.cs-phone img{width:100%;height:100%;object-fit:cover;object-position:top}

/* 3 · 단계 — 왼쪽 이야기, 오른쪽 화면이 바뀐다 */
.cs-steps{position:relative;padding:var(--band) 0 0}
.cs-steps-in{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);grid-template-areas:"head head" "list media";
  gap:clamp(24px,3.4vw,56px) clamp(28px,5vw,90px);align-items:center
}
.cs-steps-head{grid-area:head;max-width:64ch}
.cs-steps-head h2{margin-top:14px}
.cs-steps-head p{margin-top:14px;font-size:16px;color:var(--ink-2);line-height:1.6}
.cs-step-list{grid-area:list;list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.4vw,30px)}
.cs-step{position:relative;display:flex;flex-direction:column;gap:8px;padding-left:22px;border-left:1px solid var(--line-2)}
.cs-step-k{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.04em;color:var(--c2)}
.cs-step h3{font-size:clamp(20px,1.7vw,26px)}
.cs-step p{font-size:16px;line-height:1.6;color:var(--ink-2)}
.cs-step-bar{position:absolute;left:-1px;top:0;width:2px;height:100%;background:var(--c2);transform-origin:50% 0}
.cs-step-media{grid-area:media;display:grid;gap:18px}
.cs-shot{
  margin:0;overflow:hidden;border-radius:18px;background:#0a0a0b;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 50px 130px -50px color-mix(in oklab,var(--c2) 45%,transparent),0 30px 80px -30px rgba(0,0,0,.9)
}
.cs-shot img{width:100%;height:auto}
@media (max-width:900px){
  .cs-steps-in{grid-template-columns:1fr;grid-template-areas:"head" "media" "list"}
}

/* 장면 (.csjs) — 폰 · 단계 */
.csjs .cs-phones{height:280vh;padding:0}
.csjs .cs-phones .cs-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.csjs .cs-phone{width:min(clamp(104px,21vw,290px),calc((100svh - 300px) * 9 / 19.5))}
.csjs .cs-phones .cs-caps{bottom:clamp(18px,4vh,44px)}

.csjs .cs-steps{height:calc(100vh + var(--n,3) * 75vh);padding:0}
.csjs .cs-steps .cs-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.csjs .cs-steps-in{width:100%;padding-top:calc(var(--hdr) + 24px)}
.csjs .cs-step{opacity:calc(.3 + .7 * var(--o,0))}
.csjs .cs-step:first-child{--o:1}
.csjs .cs-step-bar{transform:scaleY(var(--f,0))}
.csjs .cs-step-media{grid-template:1fr / 1fr}
.csjs .cs-shot{grid-area:1 / 1;opacity:0;will-change:transform,opacity}
.csjs .cs-shot:first-child{opacity:1}
.csjs .cs-shot img{max-height:calc(100svh - var(--hdr) - 220px);object-fit:cover;object-position:top}
@media (max-width:900px){
  .csjs .cs-steps-head p{display:none}
  .csjs .cs-steps-head h2{font-size:clamp(21px,5.4vw,28px)}
  .csjs .cs-steps-in{gap:18px}
  .csjs .cs-step-list{grid-template:1fr / 1fr}
  .csjs .cs-step{grid-area:1 / 1;opacity:calc(var(--o,0) * 2 - 1);padding-left:0;border-left:0}   /* 겹쳐 쌓였으니 하나가 다 사라진 뒤 다음이 나온다 */
  .csjs .cs-step-bar{display:none}
  .csjs .cs-shot img{max-height:40svh}
}
@media (max-width:760px){
  .csjs .cs-phones .cs-caps{bottom:92px}
}

/* ═══ 흐름: 입자 하나가 여섯 장면을 건너간다 (홈 첫 장면) ═══════════
   글자 → 나무 → 코드와 작은 앱 → 은하·블랙홀 → 갈라졌다 모이는 길 → 입력창.
   st.js flow() 가 .flowjs 를 붙이면 한 화면에 붙어 스크롤로 재생되고, 입자는 캔버스가 그린다.
   안 붙으면(모션 끔 · JS 실패) 아래 기본값 그대로 평범한 세로 문서 — 앱·입력창은 그때도 동작한다.
   색은 --fl-* 여섯 개. 작은 앱의 "잉크 모드"를 끄면 .paper 로 뒤집힌다.                      */
.sc-flow{
  --fl-ink:#f3efe8;--fl-ink-2:#a9a49c;--fl-ink-3:#7f7a72;--fl-warm:#ff8a4c;--fl-hot:#ff4f2e;
  --fl-line:rgba(243,239,232,.2);
  position:relative;color:var(--fl-ink)
}
.sc-flow.paper{--fl-ink:#171513;--fl-ink-2:#4f4943;--fl-ink-3:#6a645c;--fl-line:rgba(23,21,19,.22);background:#efe9df}
.fl-cv,.fl-idx,.fl-tag{display:none}

/* 기본: 세로 문서 */
.fl-ch{position:relative;max-width:var(--maxw);margin:0 auto;padding:var(--band) var(--gut) 0}
.fl-hero{min-height:100vh;min-height:100svh;display:grid;place-content:center;justify-items:center;gap:30px;text-align:center;padding-bottom:var(--band)}
.fl-word{font-family:var(--font-display);font-weight:800;font-size:var(--t-mega);letter-spacing:-.03em;line-height:1}
.fl-hero-sub{display:flex;flex-direction:column;gap:18px;align-items:center}
.fl-hero-sub .lead{max-width:34ch;color:var(--fl-ink-2)}
.fl-hero-sub .label,.sc-flow .zoom-hint{color:var(--fl-ink-3)}
.fl-eye{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--fl-ink-3)}
.fl-eye i{width:22px;height:2px;background:var(--fl-warm)}
.fl-h{margin-top:18px;font-size:clamp(30px,3.3vw,54px);line-height:1.14;letter-spacing:-.035em;color:var(--fl-ink)}
.fl-w{display:inline-block;white-space:nowrap}
.fl-sub{margin-top:18px;font-size:var(--t-body);line-height:1.58;color:var(--fl-ink-2);max-width:34ch}
.fl-seg{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-family:var(--mono);font-size:var(--t-meta)}
.fl-seg-k{color:var(--fl-ink-3);letter-spacing:.14em}
.fl-seg button{background:none;border:0;border-bottom:1.5px solid transparent;padding:3px 0;color:var(--fl-ink-2);cursor:pointer;font:inherit}
.fl-seg button:hover{color:var(--fl-ink)}
.fl-seg button[aria-pressed="true"]{color:var(--fl-warm);border-bottom-color:currentColor}
.fl-read{margin-top:22px;padding-top:18px;border-top:1px dashed var(--fl-line);display:grid;gap:10px;justify-items:start}
.fl-read-k{font-family:var(--mono);font-size:var(--t-meta);color:var(--fl-ink-3);letter-spacing:.08em}
.fl-read-v{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:var(--t-body)}
.fl-read-v b{font-family:var(--mono);font-weight:500;color:var(--fl-ink-3)}
.fl-read-v em{font-style:normal;font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.06em;padding:2px 12px;border:1.5px solid var(--fl-warm);color:var(--fl-warm);border-radius:99px;white-space:nowrap}
.fl-leaves{margin:34px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 24px;font-size:var(--t-body)}
.fl-leaves a{display:block;padding:8px 0;border-bottom:1px solid var(--fl-line)}
.fl-leaves a:hover{color:var(--fl-warm)}
.fl-tags{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.fl-tags span{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.06em;color:var(--fl-ink-2);padding:3px 12px;border:1px solid var(--fl-line);border-radius:99px}

.fl-work{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.fl-code{margin:0;font:400 var(--t-meta)/1.55 var(--mono);color:var(--fl-ink-2);white-space:pre;overflow-x:auto}
.fl-code .r{display:block;min-height:1.55em}
.fl-code .ln{display:inline-block;width:2.6em;color:var(--fl-ink-3);opacity:.7;user-select:none}
.fl-code .cl{display:inline-block}
.c-cm{color:var(--fl-ink-3)}
.c-kw{color:var(--fl-hot)}
.c-fn{color:var(--fl-ink)}
.c-st{color:var(--fl-warm)}

/* 작은 앱 — 손으로 그린 선. .flowjs 에선 테두리를 입자가 그린다 */
.fl-mini{
  width:min(292px,86vw);padding:14px 18px 18px;display:grid;gap:12px;
  font-size:var(--t-meta);color:var(--fl-ink);
  border:2px solid var(--fl-ink);border-radius:22px 27px 20px 25px / 25px 20px 27px 22px;
  box-shadow:0 0 calc(var(--heat,0) * 110px) calc(var(--heat,0) * -6px) rgba(255,86,40,calc(var(--heat,0) * .5))
}
.fl-mini-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:2px solid var(--fl-ink);font-family:var(--mono)}
.fl-mini-top em{margin-left:auto;font-style:normal;color:var(--fl-ink-3);letter-spacing:.12em}
.fl-mini-dot{width:8px;height:8px;border-radius:50%;background:var(--fl-hot)}
.fl-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px;cursor:pointer}
.fl-row b{font-family:var(--mono);font-weight:500;color:var(--fl-hot)}
.fl-sw{appearance:none;-webkit-appearance:none;margin:0;flex:none;width:56px;height:30px;border:2px solid var(--fl-ink);border-radius:99px;position:relative;cursor:pointer;background:none}
.fl-sw::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--fl-ink);transition:transform .34s var(--e-soft)}
.fl-sw:checked::before{transform:translateX(26px)}
.fl-range{appearance:none;-webkit-appearance:none;width:124px;height:22px;background:none;margin:0;cursor:pointer}
.fl-range::-webkit-slider-runnable-track{height:2px;background:var(--fl-ink)}
.fl-range::-moz-range-track{height:2px;background:var(--fl-ink)}
.fl-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border:0;border-radius:50%;background:var(--fl-hot)}
.fl-range::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--fl-hot)}
.fl-spark{height:46px;margin-top:4px;border:2px solid var(--fl-ink);border-radius:99px;background:none;color:var(--fl-ink);font:inherit;cursor:pointer}
.fl-sw:focus-visible,.fl-range:focus-visible,.fl-spark:focus-visible,.fl-input button:focus-visible,.fl-seg button:focus-visible{outline:2px solid var(--fl-warm);outline-offset:3px}

.fl-count{margin-top:34px;display:grid;gap:10px;justify-items:start}
.fl-count b{font-family:var(--font-display);font-weight:500;font-size:clamp(40px,4.4vw,72px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--fl-ink)}
.fl-count span{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.12em;color:var(--fl-ink-3)}
.fl-nodes{margin:30px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.1em;color:var(--fl-ink-2)}

.fl-ask{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:var(--band)}
.fl-ask-head{display:grid;justify-items:center}
.fl-input{
  margin-top:clamp(40px,7vh,80px);width:min(640px,100%);height:66px;
  display:flex;align-items:center;gap:12px;padding:0 10px 0 26px;
  border:2px solid var(--fl-ink);border-radius:99px;color:var(--fl-ink)
}
.fl-input input[name="body"]{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--fl-ink);font:400 18px/1 var(--font);letter-spacing:-.01em}
.fl-input input::placeholder{color:var(--fl-ink-3);opacity:1}
.fl-chip{font-family:var(--mono);font-size:var(--t-meta);color:var(--fl-ink-3);padding:3px 12px;border:1px solid var(--fl-line);border-radius:99px;white-space:nowrap}
.fl-input button{flex:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--fl-ink);background:none;color:var(--fl-ink);font-size:19px;cursor:pointer}
.fl-cap{margin-top:18px;font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.08em;color:var(--fl-ink-3)}
@media (max-width:640px){.fl-chip{display:none}}

/* 화면 전환(잉크 ↔ 종이)은 원이 토글에서 퍼진다 — JS 가 clip-path 로 연다 */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ── .flowjs: 한 화면에 붙어 스크롤로 재생 ─────────────────────── */
.flowjs.sc-flow,.flowjs.sc-flow.paper{background:none}
.flowjs .fl-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.flowjs.paper .fl-pin{background:#efe9df}
.flowjs .fl-cv{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.flowjs .fl-ch{position:absolute;inset:0;z-index:2;max-width:none;margin:0;padding:0;opacity:0;visibility:hidden;pointer-events:none}
.flowjs .fl-ch:first-of-type{opacity:1;visibility:visible}
.flowjs .fl-panel,.flowjs .fl-mini,.flowjs .fl-input,.flowjs .fl-tag,.flowjs .fl-idx{pointer-events:auto}
.flowjs .fl-panel{will-change:transform}
.flowjs .tc{display:inline-block;opacity:0}

.flowjs .fl-hero{display:block;min-height:0}
.flowjs .fl-word{position:absolute;left:var(--gut);right:var(--gut);top:50%;height:min(56vh,420px);transform:translateY(-50%);font-size:0;color:transparent}
.flowjs .fl-hero-sub{position:absolute;left:0;right:0;bottom:clamp(120px,18vh,220px);padding:0 var(--gut);text-align:center}

.flowjs .fl-side{display:flex;align-items:center}
.flowjs .fl-panel{margin-left:var(--gut);width:min(31vw,440px)}
.flowjs .fl-leaves{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.flowjs .fl-tag{
  display:inline-flex;position:absolute;left:0;top:0;z-index:3;align-items:center;gap:10px;
  padding:7px 14px;border-radius:99px;white-space:nowrap;
  background:rgba(8,8,10,.74);border:1px solid color-mix(in oklab,var(--accent) 55%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:var(--t-meta);color:#f3efe8;opacity:0;will-change:transform,opacity
}
.flowjs .fl-tag b{font-weight:600}
.flowjs .fl-tag em{font-style:normal;font-family:var(--mono);letter-spacing:.06em;color:#b8b3ab}
.flowjs.paper .fl-tag{background:rgba(239,233,223,.86);color:#171513}
.flowjs.paper .fl-tag em{color:#57514a}

.flowjs .fl-work{
  position:absolute;margin:0;top:0;bottom:0;
  left:calc(var(--gut) + min(31vw,440px) + 56px);right:calc(var(--gut) + 64px);
  flex-wrap:nowrap;justify-content:space-between;gap:40px
}
.flowjs .fl-code .r{will-change:clip-path}
.flowjs .fl-mini,.flowjs .fl-mini-top,.flowjs .fl-spark{border-color:transparent}
.flowjs .fl-mini > *{opacity:var(--in,1)}
@media (max-width:1240px){.flowjs .fl-work{flex-direction:column;justify-content:center;align-items:flex-start;gap:28px}}

.flowjs .fl-count{position:absolute;margin:0;left:63%;top:60%;transform:translateX(-50%);justify-items:center;text-align:center;opacity:0}
.flowjs .fl-nodes{position:static;margin:0}
.flowjs .fl-nodes li{position:absolute;left:0;top:0;transform:translateX(-50%);white-space:nowrap;opacity:0}

.flowjs .fl-ask{justify-content:center;padding:0 var(--gut)}
.flowjs .fl-ask .fl-input{margin-top:clamp(70px,15vh,150px);border-color:transparent}

.flowjs .fl-idx{
  display:grid;gap:4px;position:absolute;z-index:4;right:clamp(14px,1.6vw,26px);top:50%;transform:translateY(-50%)
}
.flowjs .fl-idx a{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:3px 0;font-family:var(--mono);font-size:var(--t-meta);color:var(--fl-ink-3)}
.flowjs .fl-idx i{display:block;width:14px;height:1.5px;background:currentColor;transition:width .34s var(--e-soft),background-color .34s linear}
.flowjs .fl-idx a:hover,.flowjs .fl-idx a[aria-current]{color:var(--fl-ink)}
.flowjs .fl-idx a[aria-current] i{width:30px;background:var(--fl-warm)}

@media (min-width:901px){.flowjs .fl-word{left:calc(var(--gut) + 64px);right:calc(var(--gut) + 64px)}}   /* 오른쪽 목차와 겹치지 않게 */
@media (max-width:900px){
  .flowjs .fl-word{height:min(22vh,140px)}
  .flowjs .fl-idx{display:none}
  .flowjs .fl-side{align-items:flex-end;padding-bottom:clamp(96px,13svh,128px)}
  .flowjs .fl-panel{width:auto;margin-right:var(--gut)}
  .flowjs .fl-sub,.flowjs .fl-seg,.flowjs .fl-tags{display:none}
  .flowjs .fl-h{font-size:clamp(26px,7.2vw,34px)}
  .flowjs .fl-read{margin-top:14px;padding-top:12px}
  .flowjs .fl-work{left:var(--gut);right:var(--gut);top:calc(var(--hdr) + 8px);bottom:auto;flex-direction:column;align-items:center;gap:16px}
  .flowjs .fl-code{line-height:1.38}
  .flowjs .fl-code .r{min-height:1.38em}
  .flowjs .fl-count{left:50%;top:40%}
}
@media (max-width:900px) and (max-height:780px){.flowjs .fl-code{display:none}}