/* 애덤 랜딩 홈(/) — 확정 시안 v11(`docs/design-approved/landing_v2_draft.html`)의 이식본.
 *
 * 홈은 이 파일 하나만 쓴다. `styles.css`는 법무 라우트(/terms 등, build-legal.py
 * 생성물)의 스타일시트로 남아 있고 홈에서는 불러오지 않는다 — 두 디자인이 같은
 * `.nav`·`.footer`·`.shell` 이름을 서로 다른 뜻으로 쓰기 때문에, 한 파일에 합치면
 * 어느 쪽이 이기는지가 로드 순서에 달리게 된다.
 *
 * 색은 design.md §2 v4 표에서 온다(landing.md: "랜딩이 자기 색 체계를 따로 갖지
 * 않는다"). 값을 여기서 바꾸지 말고 design.md를 고친 뒤 가져온다. */
:root{
  --paper:#FCFCFB; --paper2:#F2F2F2; --ink:#141414; --ink2:#666666; --ink3:#9A9A9A;
  --hair:#E5E5E5; --denim:#557190; --warm:#F0604A;
  --dark:#101010; --ink-dk:#F4F4F3; --ink2-dk:#A0A0A0;
  --en:"Schibsted Grotesk",-apple-system,sans-serif;
  --kr:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.75 var(--kr);word-break:keep-all}
.shell{max-width:1120px;margin:0 auto;padding:0 32px}
section{position:relative}

/* ── 공통 등장 ── */
.up{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.up[data-d="1"]{transition-delay:.12s}.up[data-d="2"]{transition-delay:.24s}
.up[data-d="3"]{transition-delay:.36s}.up[data-d="4"]{transition-delay:.48s}
.inview .up{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .up{opacity:1!important;transform:none!important}
}
html.reduced .mdot,html.reduced .adot,html.reduced .pd{opacity:1!important;transform:none!important}
html.reduced .agenum{opacity:1}

/* 키보드 포커스는 반드시 보이게 — 시안에는 없던 접근성 보강이다(시각 언어는 그대로,
   데님 잉크의 얇은 링). 마우스 클릭에는 뜨지 않는다(:focus-visible). */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--denim);outline-offset:3px;border-radius:2px}
.hero a:focus-visible,.nav a:focus-visible,.signup a:focus-visible{outline-color:#fff}

/* ── 타이포 ── */
.t-eyebrow{font-size:13px;letter-spacing:.14em;color:var(--denim);font-weight:500}
h2{font-size:clamp(30px,4.4vw,42px);line-height:1.28;font-weight:600;letter-spacing:-.02em;margin:14px 0 18px;text-wrap:balance}
h3{font-size:clamp(24px,3vw,30px);line-height:1.35;font-weight:600;letter-spacing:-.015em;margin:12px 0 14px;text-wrap:balance}
.t-lede{font-size:18.5px;color:var(--ink2);max-width:34em;margin:0}
.t-note{font-size:14px;color:var(--ink3);margin:14px 0 0}
.hl{font-style:normal;color:var(--denim)}

/* ── 네비 · 로고 ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:18px 28px;mix-blend-mode:difference;color:#fff}
.nav .wm{width:86px;cursor:pointer}
.nav a{color:inherit;text-decoration:none;font-size:13.5px;letter-spacing:.04em;border:1px solid rgba(255,255,255,.7);border-radius:99px;padding:7px 16px}
/* 워드마크를 감싼 홈 링크에는 알약 테두리를 두지 않는다 — 로고 자체가 링크다. */
.nav a:has(.wm){border:0;padding:0;display:block}
.wm{display:block;fill:currentColor;overflow:visible}
.wm .lid{transform:scaleY(0);transform-box:fill-box;transform-origin:center top}
.winking .lid{animation:wink 1.06s both}
@keyframes wink{
  0%{transform:scaleY(0);animation-timing-function:cubic-bezier(.5,0,1,.4)}
  7%{transform:scaleY(1)}
  91%{transform:scaleY(1);animation-timing-function:cubic-bezier(0,.6,.4,1)}
  100%{transform:scaleY(0)}
}

/* ── 00 히어로 ── */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;background:#181614;color:#fff;overflow:hidden}
/* 사진은 자산 파일이다(base64 인라인 금지) — 교체는 이 파일을 갈아끼우는 것으로 끝난다.
   위에 겹친 그라디언트는 하단 카피의 대비를 확보하는 용도라 사진과 함께 유지한다. */
.hero .plate-bg{position:absolute;inset:0;background:linear-gradient(to top, rgba(10,9,8,.62) 0%, rgba(10,9,8,.18) 45%, rgba(10,9,8,.12) 100%), url(/assets/hero.jpg) center 32%/cover no-repeat}
.plate-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.35);border:1px dashed rgba(255,255,255,.25);padding:10px 16px;border-radius:3px;white-space:nowrap}
.hero .shell{position:relative;padding-bottom:88px;width:100%}
.wmwrap{position:relative;width:150px;margin-bottom:34px;cursor:pointer}
.hero h1{font-family:var(--en);font-size:clamp(56px,9vw,104px);line-height:.98;font-weight:500;letter-spacing:-.03em;margin:0 0 26px}
.hero-sub{font-size:19px;color:rgba(255,255,255,.86);margin:0 0 42px}
.hero-cta{display:inline-block;color:#fff;text-decoration:none;font-size:15px;border:1px solid rgba(255,255,255,.75);border-radius:99px;padding:13px 28px}

/* ── 01 두 목소리 ── */
.voices{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:130px 0}
.voice .vframe{aspect-ratio:4/5;background:#1E1C1A;border-radius:4px;position:relative;margin-bottom:26px;background-size:cover;background-position:center top;background-repeat:no-repeat}
/* 사진은 `data-slot` 이름으로 건다 — 마크업에 인라인 스타일을 두지 않으면서도
   교체 지점이 한눈에 보인다. 위 규칙의 #1E1C1A는 로딩 중 바탕으로 남는다. */
.vframe[data-slot="portrait-01"]{background-image:url(/assets/p1.jpg)}
.vframe[data-slot="portrait-02"]{background-image:url(/assets/p2.jpg)}
.voice blockquote{margin:0;font-size:23px;font-weight:500;letter-spacing:-.01em}
@media (max-width:760px){.voices{grid-template-columns:1fr;gap:64px}}

/* ── 02 발명 — 고정 스테이지 ── */
.invent{background:var(--paper2)}
.pin-track{height:340vh}
.pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:24px 0}
.pin .shell{width:100%}
.pin h2{margin:8px 0 10px;font-size:clamp(26px,3.6vw,36px)}
.pin .t-lede{font-size:16.5px}
.flow{display:grid;grid-template-columns:auto 1fr;gap:64px;margin-top:40px;align-items:center}
.phone-crop{width:clamp(260px,26vw,330px);aspect-ratio:27/38;overflow:hidden;position:relative}
.flow-phone{width:100%;aspect-ratio:9/19;background:#1B1A19;border-radius:24px 24px 0 0;position:relative;border:1px solid var(--hair);border-bottom:0}
/* 세 스테이지가 같은 자리에 겹쳐 있고 크로스페이드로만 바뀐다 — 레이아웃이 움직이면
   고정 스테이지의 "화면은 멈춰 있고 스크롤이 단계를 넘긴다"가 깨진다. */
.phone-crop .simg{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.phone-crop .simg img{width:100%;height:100%;object-fit:cover;border-radius:24px 24px 0 0;display:block}
#sec02:not(.s2) .simg1,#sec02.s2:not(.s3) .simg2,#sec02.s3 .simg3{opacity:1}
.track{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:30px}
.station{position:relative;padding-left:36px;opacity:.28;transition:opacity .5s ease}
.station.lit{opacity:1}
.station::before{content:"";position:absolute;left:8px;top:30px;bottom:-28px;width:1px;background:var(--hair)}
.station:last-child::before{display:none}
.sdot{position:absolute;left:0;top:10px;width:17px;height:17px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .45s cubic-bezier(.2,.9,.3,1.3)}
.station.lit .sdot{transform:scale(1)}
.swhen{font-size:12.5px;letter-spacing:.1em;color:var(--ink3);margin:0}
.swhat{font-size:21px;font-weight:600;margin:2px 0}
.snote{font-size:14.5px;color:var(--ink2);margin:0}
.ageline{margin:40px 0 0;padding-left:36px;font-size:25px;font-weight:500;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
#sec02.s3 .ageline{opacity:1;transform:none}
.ageline .who{color:var(--ink2);font-size:14px;display:block;margin-bottom:4px}
.ageslot{position:relative;display:inline-block;min-width:2.5ch;text-align:center;font-variant-numeric:tabular-nums}
.adot{display:inline-block;width:.4em;height:.4em;border-radius:50%;background:currentColor;margin:0 .06em;transform:scale(0);transition:transform .5s cubic-bezier(.2,.9,.3,1.4),opacity .4s ease}
#sec02.s3 .adot.l{transform:scale(1);transition-delay:.15s}
#sec02.s3 .adot.r{transform:scale(1);transition-delay:.32s}
#sec02.aged .adot{transform:translateY(-16px) scale(.3);opacity:0;transition-delay:0s}
.agenum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);transition:opacity .5s ease .15s,transform .5s ease .15s}
#sec02.aged .agenum{opacity:1;transform:none}
.agecap{display:block;font-size:13.5px;color:var(--ink3);margin-top:6px;font-weight:400}
@media (max-width:860px){
  .flow{grid-template-columns:1fr;gap:14px;margin-top:18px}
  .phone-crop{width:min(48vw,220px);margin:0 auto;aspect-ratio:27/22}
  .pin h2{font-size:22px;margin:6px 0 0}
  .pin .t-lede{display:none}
  .pin{padding:14px 0 40px;justify-content:center}
  .track{gap:16px}
  .station{padding-left:30px}
  .station::before{top:26px;bottom:-16px}
  .swhat{font-size:17.5px;line-height:1.3}
  .snote{font-size:13px;line-height:1.4}
  .swhen{font-size:11.5px}
  .sdot{width:15px;height:15px;top:8px}
  .ageline{margin-top:18px;font-size:21px;padding-left:30px}
  .agecap{font-size:12.5px}
}
@media (max-width:860px) and (max-height:600px){
  .phone-crop{display:none}
}

/* ── 03 미션 — 마침표가 내려앉는다 ── */
.mission{background:var(--dark);color:var(--ink-dk);padding:170px 0 180px}
.mission .t-eyebrow{color:var(--ink2-dk)}
.mission-line{font-size:clamp(34px,5.4vw,54px);line-height:1.3;font-weight:600;letter-spacing:-.02em;margin:18px 0 44px;text-wrap:balance}
.mdot{display:inline-block;width:.32em;height:.32em;border-radius:50%;background:currentColor;margin-left:.16em;opacity:0;transform:translateY(-.9em) scale(.5)}
.play .mdot{animation:dotland .55s cubic-bezier(.3,.7,.3,1.18) .9s both}
@keyframes dotland{0%{opacity:0;transform:translateY(-.9em) scale(.5)}60%{opacity:1}100%{opacity:1;transform:none}}
.mission-body{max-width:34em;color:var(--ink2-dk);display:flex;flex-direction:column;gap:18px}
.mission-body p{margin:0}
.mission-body .close{color:var(--ink-dk);font-weight:500}

/* ── 04 가입 ── */
.gates-sec{padding:130px 0}
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
@media (max-width:760px){.gates{grid-template-columns:1fr}}
.gate{border:1px solid var(--hair);border-radius:6px;padding:34px 30px;display:flex;flex-direction:column;gap:16px;background:var(--paper);transition:border-color .5s ease;position:relative}
.gate svg{color:var(--ink);opacity:.5;transition:opacity .5s ease,transform .35s cubic-bezier(.2,.8,.3,1.2)}
.gate:hover svg{transform:scale(1.22)}
.gate:hover{border-color:var(--ink)}
.play .gates .gate{border-color:var(--ink)}
.play .gates .gate svg{opacity:1}
.play .gates .gate:nth-child(1),.play .gates .gate:nth-child(1) svg{transition-delay:.1s}
.play .gates .gate:nth-child(2),.play .gates .gate:nth-child(2) svg{transition-delay:.35s}
.play .gates .gate:nth-child(3),.play .gates .gate:nth-child(3) svg{transition-delay:.6s}
.gate h4{margin:0;font-size:20px;font-weight:600}
.gate p{margin:0;font-size:15px;color:var(--ink2)}
.gates-foot{margin-top:40px}

/* ── 05~08 쇼케이스 ── */
.showcase{padding:60px 0}
.shot{display:grid;grid-template-columns:1fr minmax(240px,320px);gap:72px;align-items:center;padding:78px 0}
.shot:nth-child(even){grid-template-columns:minmax(240px,320px) 1fr}
.shot:nth-child(even) .shot-copy{order:2}
@media (max-width:760px){.shot,.shot:nth-child(even){grid-template-columns:1fr}.shot:nth-child(even) .shot-copy{order:0}}
.shot-phone{aspect-ratio:9/19;background:var(--paper2);border:1px solid var(--hair);border-radius:28px;position:relative}
.shot-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:28px}
.shot-phone .plate-label{color:var(--ink3);border-color:var(--hair)}
.poofwrap{display:inline-flex;align-items:center;gap:9px}
.poofDot{width:11px;height:11px;border-radius:50%;background:var(--ink);transform:scale(0)}
.play .poofDot{animation:poofOnce 1.5s .7s both}
@keyframes poofOnce{0%{transform:scale(0);opacity:1}22%{transform:scale(1.15)}30%{transform:scale(1)}68%{transform:scale(1);opacity:1}100%{transform:scale(2.3);opacity:0}}

/* ── 09 내 프로필 ── */
.mine{padding:130px 0;background:var(--paper2)}
.mine .shell{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media (max-width:860px){.mine .shell{grid-template-columns:1fr}}
.statcards{display:flex;flex-direction:column;gap:16px}
.stat{background:var(--paper);border:1px solid var(--hair);border-radius:6px;padding:26px 30px;display:flex;flex-direction:column;gap:8px}
.stat .nm{font-size:14px;color:var(--ink2);display:flex;justify-content:space-between}
.stat .tagline{font-weight:500;display:flex;align-items:center;gap:7px}
.stat .val{font-size:44px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .yday{font-size:14.5px;color:var(--ink2)}
.stat .basis{font-size:13px;color:var(--ink3)}

/* ── 10 시대 ── */
.era-sec{padding:140px 0}
.era{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:64px;align-items:end;margin-top:56px}
@media (max-width:760px){.era{grid-template-columns:1fr}}
.era-big{font-family:var(--en);font-size:clamp(64px,8vw,96px);font-weight:500;letter-spacing:-.03em;line-height:1;margin:0;font-variant-numeric:tabular-nums}
.era-big i{font-style:normal;font-size:.5em;color:var(--ink3)}
.chartwrap{position:relative}
.endnode{position:absolute;left:99%;top:23.8%;width:15px;height:15px;border-radius:50%;background:var(--denim);transform:translate(-50%,-50%) scale(0);transition:transform .5s cubic-bezier(.2,.9,.3,1.3) 1.9s}
.play .endnode{transform:translate(-50%,-50%) scale(1)}
.chart{width:100%;height:auto;display:block}
.chart .rule{stroke:var(--hair)}
.chart .line{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-dasharray:1100;stroke-dashoffset:1100;transition:stroke-dashoffset 1.7s ease .25s}
.play .chart .line{stroke-dashoffset:0}
.chart .node{fill:var(--ink);opacity:0;transition:opacity .4s ease}
.play .chart .node{opacity:1}
.play .chart .n1{transition-delay:.3s}.play .chart .n2{transition-delay:1.1s}
.chart text{font:13px var(--kr);fill:var(--ink3)}
.chart .val{fill:var(--ink2);font-weight:500}
.era-close{max-width:36em;font-size:19px;margin:64px 0 0}

/* ── 11 사전신청 — 하나가 둘이 된다 ── */
.signup{background:var(--dark);color:var(--ink-dk);padding:170px 0;overflow:hidden}
/* 클로징 사진 위에 글이 올라가는 유일한 섹션이라, 그라데이션이 장식이 아니라
   가독 장치다(위가 짙고 아래로 열린다 — 사진의 하단을 살리면서 카피를 읽힌다). */
.signup-bg{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(16,16,16,.86) 0%, rgba(16,16,16,.55) 55%, rgba(16,16,16,.38) 100%), url(/assets/closing.jpg) center bottom/cover no-repeat}
.signup .shell{position:relative}
.pairline{height:24px;margin-bottom:36px;display:flex;align-items:center}
.pd{width:20px;height:20px;border-radius:50%;background:var(--ink-dk);transform:scale(0)}
.pd.r{margin-left:-20px}
.play .pd.l{animation:pdl 1.5s cubic-bezier(.25,.8,.3,1.15) .3s both}
.play .pd.r{animation:pdr 1.5s cubic-bezier(.25,.8,.3,1.15) .3s both}
@keyframes pdl{0%{transform:scale(0)}25%{transform:scale(1)}55%{transform:scale(1) translateX(0)}100%{transform:scale(1) translateX(-2px)}}
@keyframes pdr{0%{transform:scale(0)}25%{transform:scale(1)}55%{transform:scale(1) translateX(0)}100%{transform:scale(1) translateX(24px)}}
.signup .wm{width:210px;margin-bottom:14px}
.signup h2{margin:0 0 10px;font-family:var(--en);font-weight:500;font-size:clamp(34px,5vw,52px);letter-spacing:-.02em}
.signup .t-lede{color:var(--ink2-dk)}
.signup .t-note a{color:inherit}
.form{display:flex;gap:12px;max-width:520px;margin:40px 0 0}
/* 입력창이 사진 위에 놓이므로 반투명 면을 깔아 글자와 테두리를 살린다(v13). */
.form input{flex:1;background:rgba(16,16,16,.55);border:1px solid #5A5A5A;border-radius:99px;color:var(--ink-dk);font:15px var(--kr);padding:14px 22px;outline:none}
.form input:focus{border-color:var(--ink2-dk)}
.form button{background:var(--warm);color:#141414;border:none;border-radius:99px;font:500 15px var(--kr);padding:14px 28px;cursor:pointer;white-space:nowrap;flex:none}
.form button[disabled]{opacity:.6;cursor:default}
@media (max-width:640px){.form{flex-direction:column;gap:10px}.form button{width:100%;padding:15px}}
.signup .t-note{color:#B9B9B9}
.form-done{font-size:17px;font-weight:500;color:var(--ink-dk);margin:44px 0 0;animation:fadeup .5s ease both}
@keyframes fadeup{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.form input.err{border-color:var(--warm)}
/* 실패는 폼 아래 한 줄로만 말한다 — 입력값을 지우거나 placeholder를 바꾸지 않는다
   (쓰던 것을 잃게 하지 않는다). */
.form-error{font-size:14.5px;color:var(--warm);margin:14px 0 0}
.footer{background:var(--dark);color:#8A8A8A;border-top:1px solid #232323;padding:52px 0 max(76px, env(safe-area-inset-bottom, 76px));font-size:13.5px}
.footer .shell{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between}
.footer .co{color:var(--ink-dk);font-family:var(--en);font-size:15px;margin:0 0 8px}
.footer p{margin:0;line-height:1.9}
.footer nav{display:flex;flex-direction:column;gap:6px}
.footer a{color:#A8A8A8;text-decoration:none}
.footer a:hover{color:var(--ink-dk)}