/* Hype 랜딩 페이지 (2026-10-22, 참고: toss.im 의 짜임 — 큰 제목·줄어드는 첫 화면·고정된 폰 옆 글·세 칸 카드·어두운 마무리)
   앱(redesign/ 의 화면)과 따로입니다. 앱 빌드(scripts/build-app.mjs)는 폴더를 넣지 않으므로 이 폴더는 앱에 들어가지 않습니다.
   글꼴은 Pretendard(OFL)를 이 페이지에 쓰인 글자만 남겨 직접 둡니다(CSP 가 외부 글꼴을 막음 — 글을 바꾸면 scripts/landing-font.sh). */
@font-face{font-family:'Pretendard';src:url('/landing/pretendard.woff2') format('woff2-variations'),url('/landing/pretendard.woff2') format('woff2');
  font-weight:100 900;font-display:swap}
:root{
  --ink:#0f110f; --sub:#5d625b; --line:#e6e8e3;
  --paper:#fff; --gray:#f3f4f0; --dark:#0b0c0b; --dark-2:#161816; --dark-sub:#9aa097;
  --lime:#d5ff3f; --lime-ink:#1a2200;
  --busy:#ff5a4e; --ok:#3ddc84; --mid:#ffc93d;
  --wrap:1120px; --pad:24px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --font:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper)}
body{font-family:var(--font);color:var(--ink);background:var(--paper);letter-spacing:-.02em;word-break:keep-all;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* 로고 — logo.png(흰 글자)를 마스크로 써서 글자색을 따라갑니다 */
.logo{display:block;width:72px;height:24px;background:currentColor;
  -webkit-mask:url('/logo.png') center/contain no-repeat;mask:url('/logo.png') center/contain no-repeat}

/* ── 머리 ── 첫 화면 위에서는 투명·흰 글자, 지나면 흰 바탕·검은 글자 */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:64px;display:flex;align-items:center;gap:28px;
  padding:0 max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));color:#fff;
  transition:background-color .3s,color .3s,box-shadow .3s}
.nav.solid{background:rgba(255,255,255,.86);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.06);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
.nav-links{display:flex;gap:26px;margin-left:12px;font-size:15px;font-weight:500;opacity:.82}
.nav-links a:hover{opacity:.6}
.nav-cta{margin-left:auto;height:36px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;
  font-size:14px;font-weight:600;background:var(--lime);color:var(--lime-ink)}
@media (max-width:767px){ .nav{height:56px} .nav-links{display:none} }

/* ── 1. 첫 화면 ── 높이 170vh 동안 붙어 있으며 --p(0→1)로 둥근 카드가 됩니다(landing.js) */
.hero{height:170vh;height:170svh;background:var(--paper)}
.hero-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--p:0}
.hero-card{position:absolute;inset:0;background:#0a0a0a;color:#fff;overflow:hidden;
  border-radius:calc(var(--p)*36px);
  transform:scale(calc(1 - var(--p)*.1)) translateY(calc(var(--p)*-2%));transform-origin:50% 40%;will-change:transform}
.hero-map{position:absolute;left:50%;top:50%;width:max(100%,calc(100svh*640/420));aspect-ratio:640/420;
  transform:translate(-50%,-50%) scale(calc(1.06 - var(--p)*.06))}
.hero-map img{width:100%;height:100%;animation:drift 26s ease-in-out infinite alternate}
/* 지도 네 가장자리가 바탕으로 녹아들게(휴대폰에서 지도가 띠로 끝날 때 네모난 끝이 보이지 않게) */
.hero-map{-webkit-mask:radial-gradient(closest-side,#000 82%,transparent);mask:radial-gradient(closest-side,#000 82%,transparent)}
@media (min-width:768px){ .hero-map{-webkit-mask:none;mask:none} }
@keyframes drift{to{transform:scale(1.05) translate(-1%,1%)}}
.hero-shade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 30%,rgba(5,6,5,.85) 85%),
             linear-gradient(180deg,rgba(5,6,5,.55),transparent 30%,transparent 55%,rgba(5,6,5,.9))}
.pin{position:absolute;transform:translate(-50%,-100%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:7px 12px 7px 10px;border-radius:999px;background:rgba(32,33,32,.92);color:#e9ece6;
  font-size:13px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.4);margin-top:-6px;
  transition:background-color .45s var(--ease),color .45s var(--ease),transform .45s var(--ease)}
.pin::after{content:'';position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;
  border-top-color:rgba(32,33,32,.92);transition:border-color .45s}
.pin i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.pin i.busy{background:var(--busy)}
.pin.flip{transform:translate(-50%,0);margin-top:6px}
.pin.flip::after{bottom:auto;top:-5px;border:5px solid transparent;border-top:0;border-bottom-color:rgba(32,33,32,.92)}
.pin.flip.on{transform:translate(-50%,0) scale(1.12)}
.pin.flip.on::after{border-bottom-color:var(--lime)}
.pin.on{background:var(--lime);color:var(--lime-ink);transform:translate(-50%,-100%) scale(1.12)}
.pin.on::after{border-top-color:var(--lime)}
.pin.on i{background:var(--lime-ink)}
.hero-copy{position:absolute;left:0;right:0;bottom:12vh;padding:0 max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));
  opacity:calc(1 - var(--p)*1.6);transform:translateY(calc(var(--p)*-40px))}
.hero h1{font-size:clamp(44px,7.4vw,96px);line-height:1.12;font-weight:800;letter-spacing:-.045em}
.rot{display:inline-block;color:var(--lime);transition:opacity .28s,transform .28s var(--ease)}
.rot.out{opacity:0;transform:translateY(-.25em)}
.hero p{margin-top:22px;font-size:clamp(17px,1.6vw,21px);line-height:1.6;color:rgba(255,255,255,.78);font-weight:500}
@media (max-width:767px){
  /* 휴대폰: 지도를 위쪽 띠로, 글은 아래 */
  .hero-map{top:36%;width:180vw;transform:translate(-49%,-50%) scale(calc(1.06 - var(--p)*.06))}
  .hero-copy{bottom:max(40px,6vh)}
  .hero p br{display:none}
}

/* 스토어 단추 */
.stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.store{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 20px 0 16px;border-radius:14px;
  background:#fff;color:#0b0c0b;transition:transform .2s var(--ease),opacity .2s}
.store:hover{transform:translateY(-2px)}
.store:active{transform:scale(.97)}
.store svg{width:24px;height:24px;fill:currentColor;flex:none}
.store span{display:flex;flex-direction:column;font-size:18px;font-weight:700;line-height:1.05;letter-spacing:-.01em}
.store small{font-size:10.5px;font-weight:500;letter-spacing:.01em;opacity:.7;margin-bottom:2px}
.store .soon{position:absolute}
.store.light{background:#fff}

/* ── 공통 구간 ── */
.sec{padding:160px 0}
.sec.gray{background:var(--gray)}
.sec.dark{background:var(--dark);color:#fff}
.big{font-size:clamp(34px,4.6vw,56px);line-height:1.22;font-weight:800;letter-spacing:-.04em}
.huge{font-size:clamp(56px,10vw,128px);line-height:1.04;font-weight:800;letter-spacing:-.05em}
.huge em{font-style:normal;color:var(--lime)}
.lead{margin-top:20px;font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:var(--sub);font-weight:500}
.dark .lead{color:var(--dark-sub)}
.chip{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;margin-bottom:20px;
  font-size:14px;font-weight:700;background:#e9ebe6;color:#3a3f39}
.chip.lime{background:var(--lime);color:var(--lime-ink)}
.chip.dim{background:#232623;color:#c9cec5}
@media (max-width:767px){ .sec{padding:104px 0} }

/* 나타나기 — 보이면 아래에서 살짝 */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* 폰 틀 — 영상 비율(393:852) 그대로, 다이내믹 아일랜드는 그림 */
.phone{position:relative;width:300px;aspect-ratio:393/852;border-radius:50px;padding:9px;background:#151615;
  box-shadow:inset 0 0 0 1.5px #3a3d39,0 50px 100px -30px rgba(10,20,10,.45),0 30px 60px -30px rgba(0,0,0,.35)}
.phone::after{content:'';position:absolute;left:50%;top:19px;width:88px;height:25px;margin-left:-44px;border-radius:20px;background:#000;z-index:2}
.phone video{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);border-radius:41px;object-fit:cover;background:#101010}

/* ── 2. 지도 → 피드 ── PC 는 오른쪽 폰이 붙어 있고 글 두 개가 지나감 */
.feature .big{margin-bottom:24px}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.step{min-height:80vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s var(--ease)}
.step.on{opacity:1}
.step .chip{align-self:flex-start}
.step h3{font-size:clamp(28px,3vw,40px);line-height:1.28;font-weight:800;letter-spacing:-.035em}
.step p{margin-top:18px;font-size:18px;line-height:1.7;color:var(--sub);font-weight:500}
.step-stage{position:relative}
.phone-stick{position:sticky;top:calc(50vh - 325px);margin:0 auto;width:300px}
.phone-stick video{opacity:0;transition:opacity .5s}
.phone-stick video.on{opacity:1}
.phone-inline{display:none}
@media (max-width:899px){
  .steps{display:block}
  .step-stage{display:none}
  .step{min-height:0;opacity:1;margin-top:64px}
  .phone-inline{display:block;margin:40px auto 0;width:min(78vw,300px)}
}

/* ── 2. 한 줄 선언 ── */
.claim{text-align:center;padding:140px 0 120px}
.claim .lead{max-width:560px;margin-left:auto;margin-right:auto}
/* ── 4. 오늘 이야기 — 글 모양 카드 ── */
.posts{list-style:none;margin:32px 0 0;display:grid;gap:10px;max-width:520px}
.posts li{position:relative;padding:16px 18px;border-radius:18px;background:var(--gray);font-size:15px}
.posts b{font-weight:700}
.posts span{margin-left:8px;color:var(--sub);font-size:13px}
.posts p{margin-top:6px;line-height:1.55;word-break:keep-all}
.posts i{display:inline-block;margin-top:8px;font-style:normal;font-size:12px;font-weight:700;color:var(--lime-ink);background:var(--lime);padding:3px 8px;border-radius:999px}
.note{margin-top:14px;font-size:13px;color:#9aa097}
/* ── 7. 자주 묻는 질문 ── */
.wrap.narrow{max-width:760px}
.faq-list{margin-top:40px;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:19px;font-weight:700;letter-spacing:-.02em;position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'';position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.faq-list details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-list p{padding:0 0 22px;font-size:16px;line-height:1.7;color:var(--sub);word-break:keep-all}
/* ── 4. 혼잡도 ── */
.crowd-box{margin-top:56px;max-width:640px;background:var(--dark-2);border-radius:32px;padding:36px}
.crowd-place{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--dark-sub);font-weight:600}
.crowd-place b{color:#fff;font-size:22px;margin-right:4px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.dot.busy{background:var(--busy);box-shadow:0 0 0 0 rgba(255,90,78,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(255,90,78,0)}100%{box-shadow:0 0 0 0 rgba(255,90,78,0)}}
.crowd-num{margin-top:14px;font-size:clamp(44px,7vw,80px);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.1}
.meter{position:relative;margin-top:28px;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--ok),var(--mid) 50%,var(--busy));
  display:grid;grid-template-columns:repeat(3,1fr)}
.meter span{margin-top:18px;font-size:13px;color:var(--dark-sub);font-weight:600}
.meter span:nth-child(3){text-align:center}
.meter span:nth-child(4){text-align:right}
.meter i{position:absolute;top:50%;left:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.4);transition:left 1.6s var(--ease) .3s}
.in .meter i{left:86%}
.crowd-note{margin-top:46px;font-size:13.5px;color:#6f756c;line-height:1.6}

/* ── 5. 대화 ── */
.split{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
@media (max-width:899px){ .split{grid-template-columns:1fr} .split>.phone{margin:16px auto 0;width:min(78vw,300px)} .lead br{display:none} }

/* ── 6. 안전 ── */
.safe-grid{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.safe{background:#fff;border-radius:28px;padding:30px 26px 34px}
.safe svg{width:40px;height:40px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  background:var(--lime);border-radius:12px;padding:7px}
.safe svg text{font:800 8.5px var(--font);fill:var(--ink);stroke:none}
.safe h3{margin-top:22px;font-size:20px;font-weight:800;letter-spacing:-.03em}
.safe p{margin-top:8px;font-size:15.5px;line-height:1.65;color:var(--sub);font-weight:500}
.safe:nth-child(2){transition-delay:.08s}.safe:nth-child(3){transition-delay:.16s}.safe:nth-child(4){transition-delay:.24s}
@media (max-width:1023px){ .safe-grid{grid-template-columns:1fr 1fr} }
@media (max-width:599px){ .safe-grid{grid-template-columns:1fr} }

/* ── 7. 마무리 ── */
.cta{text-align:center;padding:200px 0 180px;background:radial-gradient(60% 50% at 50% 60%,rgba(213,255,63,.12),transparent 70%),var(--dark)}
.cta .stores{justify-content:center;margin-top:44px}
@media (max-width:767px){ .cta{padding:140px 0 120px} }

/* ── 바닥 ── */
.foot{background:var(--dark);color:#c3c8bf;padding:64px 0 0;overflow:hidden;border-top:1px solid #1d201c}
.foot-top{display:flex;align-items:center;gap:32px;flex-wrap:wrap;color:#fff}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:14.5px;color:#aeb3aa}
.foot-links b{color:#fff;font-weight:700}
.foot-links a:hover{color:#fff}
.foot-info{margin-top:14px;font-size:13px;color:#6f756c;line-height:1.6}
.foot-top+.foot-info{margin-top:32px}
.foot-word{display:block;width:100%;height:auto;margin-top:64px;margin-bottom:-2px;overflow:visible}
.foot-word text{font:900 118px var(--font);letter-spacing:-.04em}

/* 공유 링크 띠 — 머리 위에 고정 */
.sharebar{position:fixed;inset:0 0 auto;z-index:60;height:44px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;
  background:var(--lime);color:var(--lime-ink);font-size:14px;font-weight:600;white-space:nowrap}
.sharebar a{padding:6px 12px;border-radius:999px;background:var(--lime-ink);color:var(--lime);font-weight:700}
.sharebar .sharebar-get{background:transparent;color:var(--lime-ink);text-decoration:underline;padding:6px 4px}
.has-sharebar .nav{top:44px}
.has-sharebar .hero-copy{bottom:calc(12vh + 44px)}
@media (max-width:767px){ .sharebar span{overflow:hidden;text-overflow:ellipsis} .sharebar{font-size:13px;gap:8px} }
/* 알림 */
.toast{position:fixed;left:50%;bottom:32px;z-index:60;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  padding:14px 20px;border-radius:14px;background:rgba(20,22,20,.94);color:#fff;font-size:15px;font-weight:600;
  transition:opacity .3s,transform .3s var(--ease);white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
  .hero{height:100vh;height:100svh}
}