@font-face { /* Pretendard(OFL) — 페이지에 쓰인 글자만 담은 자체 호스팅 서브셋 */
  font-family: "Pretendard Variable";
  src: url("vendor/fonts/PretendardVariable-subset.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-display: swap;
}

/* 토큰 — 레퍼런스(elvalabs.ai): 다크 + 흰색 투명도로 위계 */
:root {
  --bg: #131313;
  --surface: #1a1a1a;
  --fg: #fff;
  --fg-2: #ffffffa3;
  --fg-3: #ffffff61;
  --line: #ffffff14;
  --accent: #ffb547; /* 1차안: 줄 긋기·강조 단어에만 */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

#stage { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s; }
#mist { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; }
.gl #mist { z-index: 0; }
/* 폰 화면(HTML, CSS3D): 원본 이미지·영상 그대로 → 3D 캔버스 아래, 연무 위 */
#screen3d { position: fixed !important; inset: 0; z-index: -1; pointer-events: none; opacity: 0; }
.gl #screen3d { z-index: 0; }
.phone-screen { position: relative; overflow: hidden; border-radius: 34px; background: #0b0b0b; }
.phone-layer { position: absolute; inset: 0; }
.phone-layer > img, .phone-layer > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 공통 */
.display {
  font-size: clamp(64px, 7.5vw, 116px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.03em;
  text-align: center;
}
.lead { font-size: 20px; line-height: 1.55; color: var(--fg-2); text-align: center; max-width: 520px; }
.tag {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ffffff3d;
  border-radius: 999px;
  font-size: 13px;
  color: var(--fg);
}
.ph {
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--fg-3);
  font-size: 13px;
}

/* 로더 */
/* 로더·스크롤 잠금은 JS가 있을 때만(.js) — 스크립트가 실패해도 사이트가 잠기지 않음 */
.js body:not(.ready) { overflow: hidden; }
.loader { display: none; }
.js .loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 20px;
  background: linear-gradient(var(--bg), var(--surface));
  transition: opacity .8s .5s, visibility 0s 1.3s;
}
.ready .loader { opacity: 0; visibility: hidden; }
.ld-small { position: relative; z-index: 1; font-size: 16px; }
.ld-small:last-child { margin-right: 24vw; }
.ld-ghost {
  position: absolute;
  font-size: clamp(120px, 12.5vw, 190px);
  font-weight: 500;
  letter-spacing: -.03em;
  color: #ffffff1a;
  filter: blur(10px);
}
.ld-left { left: -12px; }
.ld-right { right: 10vw; }
.ld-num { font-weight: inherit; }
.ld-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border-radius: 30px;
  background: #050505;
  box-shadow: 0 0 0 1px #ffffff14, 0 0 60px #6b5cff40, 0 0 30px #ff7ad930;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.02em;
  translate: -50% -50%;
  animation: breathe 1.6s ease-in-out infinite;
  transition: scale 1.2s var(--ease), filter 1.2s var(--ease), opacity 1s .2s;
}
.ready .ld-logo { scale: 5; filter: blur(16px); opacity: 0; animation: none; }
@keyframes breathe { 50% { scale: .94; } }

/* 인트로: 로더가 끝나면 히어로 요소가 차례로 올라옴 (레퍼런스: 1.2s, 0.2~0.3s 간격, power3.out) */
.js .hero .pin > * {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1.2s cubic-bezier(.215, .61, .355, 1), transform 1.2s cubic-bezier(.215, .61, .355, 1);
}
.js .hero .pin > :nth-child(1) { transition-delay: .6s; }
.js .hero .pin > :nth-child(2) { transition-delay: .8s; }
.js .hero .pin > :nth-child(3) { transition-delay: 1.1s; }
.ready .hero .pin > * { opacity: 1; transform: none; }
.js .nav { opacity: 0; transition: opacity 1s 1.4s; }
.ready .nav { opacity: 1; }

/* Nav */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
}
.wordmark {
  padding: 10px 16px;
  border: 1px solid #ffffff3d;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
}
.nav-links {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 16px;
  background: #ffffff0d;
  backdrop-filter: blur(10px) saturate(180%);
}
.nav-links a { padding: 8px 14px; border-radius: 10px; font-size: 14px; color: var(--fg-2); transition: color .3s, background .3s; }
.nav-links a:hover { color: var(--fg); background: var(--line); }

/* 고정(pin) 섹션: main.js가 --p(0→1)를 넣어줌 */
[data-pin] { --p: 0; height: 300vh; }
.about[data-pin] { height: 150vh; } /* 한 문장에 스크롤 1.5화면(첫 20vh에 선명해짐) */
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--fg); color: var(--bg); font-size: 14px; }
.skip:focus { top: 16px; }
.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* 첫 화면 스크롤 안내: 80px쯤 내리면 사라짐 */
.scroll-cue { position: absolute; bottom: 40px; font-size: 14px; color: var(--fg-2); opacity: calc(1 - var(--p) * 25); }
.ready .hero .pin > .scroll-cue { opacity: calc(1 - var(--p) * 25); } /* 등장 애니메이션 규칙보다 우선 */

/* Hero 줄 긋기 */
.todo { list-style: none; display: grid; gap: 10px; text-align: center; }
.todo li {
  position: relative;
  justify-self: center;
  font-size: 20px;
  color: var(--fg-2);
  transition: color .5s var(--ease);
}
.todo li::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 52%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
}
.todo li.done { color: var(--fg-3); }
.todo li.done::after { transform: scaleX(1); }

/* About: 블러 → 선명 */
.js .reveal-blur {
  --r: min(var(--p) * 2.5, 1);
  filter: blur(calc((1 - var(--r)) * 24px));
  opacity: calc(.15 + var(--r) * .85);
}

/* Apps */
.apps { padding: 0 0 80px; }
.apps-intro { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; }

/* 3D 스토리 모드(scene.js가 html.gl을 붙임): 섹션 고정, 가운데 3D 폰.
   캔버스(#stage)가 글자 위 레이어라 큰 영어 글귀는 폰 뒤에 깔림. 앱 하나씩: 글귀 + 아래 왼쪽 이름·슬로건 */
.gl #stage { z-index: 1; }
.gl .apps { height: 900vh; padding: 0; }
.gl .story-pin { position: sticky; top: 0; z-index: 2; height: 100vh; overflow: hidden; } /* 글자는 3D 캔버스(#stage z1)보다 앞 */
.gl .hero .pin, .gl .about .pin { z-index: 2; } /* 히어로·About 글자도 물방울 앞 */
.gl .apps-intro .tag { display: none; } /* 물방울 무리와 겹치지 않게 */
.gl .apps-intro { position: absolute; inset: 0; transition: opacity .6s var(--ease), filter .6s var(--ease); }
.gl .apps:not([data-step="-1"]) .apps-intro { opacity: 0; filter: blur(12px); }
.gl .app, .gl .app-wide { position: absolute; inset: 0; display: block; max-width: none; min-height: 0; padding: 0; }
.gl .app.fade { opacity: 1; transform: none; filter: none; }
.gl .app-text { display: contents; }
.gl .app-head {
  position: absolute;
  inset: 16vh 0 auto; /* 폰 윗부분에만 겹침 */
  font-size: clamp(64px, 6.4vw, 92px); /* 2행 "on your behalf" — 동사보다 작게 */
  color: #ffffffd9;
  text-shadow: 0 4px 40px #000e, 0 1px 3px #000c; /* 밝은 화면 위에서도 읽히게 */
  line-height: 1;
  letter-spacing: -.035em;
  text-align: center;
  opacity: 0;
  scale: .92;
  filter: blur(14px);
  transition: opacity .7s var(--ease), scale 1s var(--ease), filter .7s var(--ease);
}
.gl .app-head b { display: block; margin-bottom: 12px; font-size: clamp(96px, 10vw, 144px); line-height: .9; color: var(--fg); }
.gl .app-head::before { /* 글자 뒤 어두운 그늘(빛 아님) — 밝은 앱 화면 위 대비 3:1 이상 */
  content: ""; position: absolute; inset: -12% 24%; z-index: -1;
  background: radial-gradient(closest-side, #000000b0, #0000);
}
.gl .app-icon, .gl .app-name, .gl .app-slogan {
  position: absolute;
  left: 6vw;
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.gl .app-icon { bottom: calc(22vh + 118px); width: 72px; height: 72px; border-radius: 18px; } /* 화면이 낮아도 슬로건이 보이게 위로 */
.gl .app-name { bottom: calc(22vh + 48px); font-size: 40px; font-weight: 600; letter-spacing: -.02em; }
.gl .app-slogan { bottom: 22vh; font-size: 26px; color: #ffffffcc; }
.gl .app.on .app-head { opacity: 1; scale: 1; filter: none; }
.gl .app.info :is(.app-icon, .app-name, .app-slogan) { opacity: 1; transform: none; }
.gl .app-media { display: none; }
.app {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 80px;
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 48px;
}
.app-text { display: grid; gap: 14px; }
.app-icon { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 18px; }
.app-head { font-size: clamp(42px, 4.4vw, 64px); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--fg-2); }
.app-head b { font-weight: 500; color: var(--fg); }
.app-name { margin-top: 18px; font-size: 18px; font-weight: 600; }
.app-slogan { font-size: 16px; color: var(--fg-2); }

.app-media { display: flex; align-items: center; gap: 24px; }
.phone {
  flex: none;
  height: min(76vh, 640px);
  aspect-ratio: 9 / 19.5;
  padding: 10px;
  border: 1px solid #ffffff2e;
  border-radius: 48px;
  background: #0b0b0b;
  box-shadow: 0 40px 120px #000a;
}
.card {
  flex: none;
  height: min(76vh, 640px);
  aspect-ratio: 9 / 16;
  border-radius: 28px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 40px 120px #000a;
}
.screen { width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: var(--surface); }
.screen video, .card video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* PC용 앱(FocusOne): 반투명 유리 모니터가 떠 있음 */
.app-wide { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 56px; }
.app-wide .app-text { justify-items: center; }
.app-wide .app-media { flex-direction: column; }
.desktop {
  position: relative;
  width: min(960px, 80vw);
  padding: 0 14px 14px;
  border-radius: 22px;
  background: linear-gradient(160deg, #ffffff26, #ffffff08 45%, #ffffff12);
  border: 1px solid #ffffff2e;
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 #ffffff40, 0 50px 140px #000c, 0 0 120px #6b5cff22;
  animation: float 6s ease-in-out infinite;
}
.desktop::before { /* 유리 위 반사광 */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, #ffffff1f, transparent 35%);
  pointer-events: none;
}
.desktop-bar { display: flex; gap: 7px; padding: 14px 4px; }
.desktop-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ffffff40; }
.desktop video { width: 100%; display: block; border-radius: 10px; opacity: .92; }
@keyframes float { 50% { transform: translateY(-12px); } }

/* 화면 캡처 가로 캐러셀 — 네이티브 scroll-snap */
.shots {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.shot { flex: none; height: 260px; width: auto; border-radius: 16px; scroll-snap-align: start; box-shadow: 0 0 0 1px var(--line); }
.app-wide .shot { height: 180px; border-radius: 10px; }

/* 페이드업 */
.js .fade { opacity: 0; transform: translateY(60px); filter: blur(10px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.fade.in { opacity: 1; transform: none; filter: none; }

/* Contact / Footer */
.contact { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; }
/* 앱 독: 아이콘이 각자 다른 박자로 둥실, 올리면 살짝 커지며 이름이 보임 */
.dock { list-style: none; display: flex; gap: 20px; padding: 16px 22px; border-radius: 28px; background: #ffffff0d; box-shadow: inset 0 0 0 1px var(--line); }
.dock li { position: relative; display: grid; justify-items: center; animation: bob 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.55s); }
.dock img { width: 64px; height: 64px; border-radius: 16px; transition: transform .35s var(--ease); }
.dock li:hover img { transform: translateY(-8px) scale(1.12); }
.dock span { position: absolute; top: calc(100% + 10px); font-size: 13px; color: var(--fg-2); white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; }
.dock li:hover span { opacity: 1; transform: none; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.mail { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px; font-size: 20px; color: var(--bg); background: var(--fg); transition: transform .3s var(--ease), box-shadow .3s; }
.mail:hover { transform: translateY(-2px); box-shadow: 0 12px 40px #0008; }
.mail span { transition: transform .3s var(--ease); }
.mail:hover span { transform: translateX(4px); }
.mail:focus-visible, .dock li:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.footer { padding: 32px 24px; font-size: 13px; color: var(--fg-3); text-align: center; }
.footer a { color: var(--fg-2); transition: color .2s; }
.footer a:hover { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loader { display: none; }
  .hero .pin > *, .nav { opacity: 1; transform: none; transition: none; }
  .fade, .reveal-blur { opacity: 1; transform: none; filter: none; transition: none; }
  .desktop, .dock li { animation: none; }
  .todo li::after { transition: none; }
}