/* ============================================================
   hub 공통 기반 — 디자인 토큰 · reset · 본문 · 버튼 · 등장 애니메이션
   (짝 파일: nav.css)

   쓰는 법: <head> 에서 페이지 <style> 보다 **먼저** 불러온다.
     <link rel="stylesheet" href="/hub/css/base.css">
     <link rel="stylesheet" href="/hub/css/nav.css">
     <style> 이 페이지만 다른 값 </style>
   선택자 구체성을 낮게 유지해 두었으므로, 페이지에서 같은 선택자로 다시 적으면
   (나중에 온 규칙이 이겨서) 그 값이 적용된다. !important 는 쓰지 않는다.
   예) 강조색만 바꾸기:  :root{--accent:#E8632F;--accent-soft:#F6E8DC}

   hub 전체의 표준 값이다(토큰 체계 A: --bg/--ink/--accent …). 메인(hub/index.html)·
   movement·carry 랜딩도 이 파일 위에 landing.css 를 얹어 쓴다 — 랜딩에만 남은 값 차이는
   landing.css 「통일 전 덮어쓰기」 구역에 모여 있다.
   ============================================================ */
:root{
  --bg:#FAF8F5;--surface:#FFFEFC;--card:#FFFFFF;
  --ink:#1B2027;--ink-soft:#5C6675;--ink-faint:#97A0AC;
  --accent:#2C51DB;--accent-soft:#E4E9FB;
  --shuttle:#E8632F;--shuttle-soft:#F6E8DC;
  --private:#5B45B8;--private-soft:#ECE6F7;
  --hair:#ECE7DF;--hair-soft:#F3EFE8;
  --shadow:18 24 33;--maxw:1280px;--text-inset:8px;
  --fd:'Outfit','Pretendard Variable','Pretendard',sans-serif;--fb:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
  --e-out:cubic-bezier(.16,1,.3,1);
}

/* reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg);color:var(--ink);line-height:1.45;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;word-break:keep-all;overflow-wrap:break-word;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
/* 짧은 페이지에서 푸터를 화면 바닥에 붙인다. body 가 flex 열이라
   직계 자식에 max-width+margin:0 auto 블록을 두면 내용 폭으로 줄어든다 — 그런 블록은 main 안에 둘 것.
   100svh: 모바일 주소창이 펼쳐진 높이 기준이라 짧은 페이지에 스크롤이 생기지 않는다. */
body>footer{margin-top:auto}
img{max-width:100%;display:block}
a,button{color:inherit;text-decoration:none;font:inherit}
button{background:none;border:none;cursor:pointer}
ul,li{list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(24px,4vw,56px)}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 28px;border-radius:999px;font-weight:600;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;transition:transform .25s var(--e-out),background .25s var(--e-out),box-shadow .25s var(--e-out),color .25s var(--e-out)}
.btn svg{width:17px;height:17px}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{transform:translateY(-2px);background:#1f43c4}
.btn--block{width:100%}

/* 스크롤 등장 (.rv → JS 가 .in 을 붙인다) */
.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s var(--e-out),transform .8s var(--e-out)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important}
}