/* momentus.css — 모멘터스 전 서비스가 공유하는 디자인 토큰 (2026-08-07)
 * ─────────────────────────────────────────────────────────────────────────
 * 왜 있나 (사장님 2026-08-07):
 *   "할 때마다 페이지를 만들 때마다 수정할 때마다 틀어지지 않으려면
 *    공통으로 쉐어하는 글로벌 css 같은 게 있어야 ... 어떻게 하면 좀 일관성 있게 할 것이냐"
 *
 *   실측(08-07) — 같은 '기본 버튼'이 저장소마다 따로 정의돼 있었다:
 *     apex  r99px  14px/600  12·22      mark  r999px ~14px/700 13·24
 *     notes r999px 15px/700  17·44      pay   r10px  15px/700  13·22
 *   같은 회색선이 #e6e8ec / #e9e9e9 / #e9ecef 로 셋. 단일 소스가 없어서
 *   페이지를 만들 때마다 손으로 다시 정했고, 그래서 드리프트는 사고가 아니라 결과였다.
 *
 * 단일 소스: 이 파일 하나. https://the-moment.us/assets/momentus.css
 *   고치면 링크한 전 사이트에 즉시 반영된다(빌드 0, 수정 지점 1곳).
 *
 * 🚫 여기에 레이아웃(컨테이너 폭·그리드·섹션 여백)을 넣지 마라.
 *    제품마다 다른 게 정상이고, 넣는 순간 이 파일이 모든 화면을 지배한다.
 * 🚫 강조색(accent)·히어로 제목 크기를 여기서 정하지 마라. 그건 제품의 개성이다.
 *    notes 56px 히어로, mark 초대형 타이포는 그대로 둔다.
 *
 * ✅ 여기 있는 것 = "제품이 달라도 같아야 자연스러운 것" 셋:
 *      ① 버튼   ② 입력칸   ③ 문서형 페이지 제목(약관·결제안내·문의처럼 읽는 페이지)
 *
 * 쓰는 법: 각 사이트가 자기 셀렉터에서 이 토큰을 참조한다.
 *      .btn{ border-radius:var(--mmt-r-ctrl,999px); padding:var(--mmt-ctrl-pad,14px 28px); }
 *   ⚠️ 반드시 **폴백값을 같이** 적어라. 이 파일이 못 실려도 화면이 안 무너진다.
 */

:root {
  /* ① 버튼 — pill 이 이 집 스타일이다(실측 5개 중 3개가 이미 pill).
        제품이 사각 버튼을 원하면 자기 :root 에서 --mmt-r-ctrl 한 줄만 덮는다. */
  --mmt-r-ctrl: 999px;
  --mmt-fs-ctrl: 15px;
  --mmt-fw-ctrl: 700;
  --mmt-ctrl-pad: 14px 28px;
  /* 히어로 CTA 는 **일부러 크다** — 사장님 확정(2026-08-07): "히어로만 크게 두는 게 맞아".
     🚫 "통일이 안 됐다"고 --mmt-ctrl-pad 로 합치지 마라. 크기 계층은 두되 값만 공유한다. */
  --mmt-ctrl-pad-lg: 17px 40px;
  --mmt-ctrl-pad-sm: 10px 18px;   /* 보조·인라인 */
  --mmt-ctrl-gap: 8px;            /* 아이콘 ↔ 글자 */

  /* ② 입력칸 — 버튼보다 덜 둥글다(둘 다 pill 이면 어느 게 누를 것인지 안 보인다). */
  --mmt-r-field: 12px;
  --mmt-field-pad: 14px 16px;
  --mmt-fs-field: 15px;
  --mmt-field-bw: 1px;

  /* ③ 문서형 페이지 제목 — 읽는 페이지(약관·환불·결제안내·문의)용.
        🚫 제품 랜딩의 히어로 제목에 쓰지 마라. 거긴 제품마다 달라야 한다. */
  --mmt-fs-page-title: clamp(28px, 3.4vw, 40px);
  --mmt-fw-page-title: 700;
  --mmt-ls-page-title: -.03em;
  --mmt-fs-section: clamp(20px, 2vw, 24px);   /* 그 페이지의 h2 */

  /* 값이 미세하게 갈리던 중립색 둘만. 나머지 색은 제품이 정한다. */
  --mmt-line: #e9e9e9;
  --mmt-muted: #909090;
}