/* ============================================================
   마이네임 Design Token — 색·크기·간격을 한자리에서 정한다.

   전에는 같은 브랜드 파랑이 화면마다 달랐다.

       로고 이미지   #2061ea
       가입·로그인   #1454fe
       메인 홈페이지 #2323a5 · #204bbf
       대시보드      #1454ff · #1954db

   같은 서비스인데 화면을 옮길 때마다 파랑이 바뀐다.
   **#1454fe 로 통일한다 — 의뢰자 확정(2026-08-14).**
   가입·결제·온보딩 전체가 이미 이 값이라 가장 적게 고치고 끝난다.

   바꿔야 한다면 여기 한 줄이다. 화면마다 적어 두지 않는 이유가 그것이다.

   회색도 마찬가지였다(#9ca3af · #6b7280 · #374151 · #111827 이 뒤섞임).
   여기서는 **역할로 이름 붙인다** — 값이 아니라 쓰임을 보고 고르게 한다.

   이 파일은 **변수만 담는다.** 규칙을 넣으면 원본 CSS 와 우선순위 싸움이 나고,
   어느 쪽이 이기는지는 화면을 열기 전에는 알 수 없다.
   ============================================================ */

:root {
  /* ── 브랜드 ─────────────────────────────────── */
  --mn-primary:        #1454fe;   /* CTA · 링크 · 강조 */
  --mn-primary-dark:   #0d40cc;   /* hover / active */
  --mn-primary-soft:   #f4f7ff;   /* 강조 카드 바탕 */
  --mn-primary-line:   #cfdcff;   /* 강조 카드 테두리 */

  /* ── 글자 ───────────────────────────────────── */
  --mn-navy:           #17224a;   /* 제목 — 신뢰감을 지는 색 */
  --mn-text:           #33415c;   /* 본문 */
  --mn-text-muted:     #6b7280;   /* 보조 설명 */
  /* 라벨 · 각주. **대비를 재서 정한 값**이다 — 원래 #9aa3b2 였는데 흰 바탕에서
     2.54:1 이라 WCAG AA(4.5:1)에 한참 못 미쳤다. 각주라도 읽히라고 쓰는 글자다.
     지금 값은 흰 바탕 4.71 · 연한 바탕(#f7f9fc) 4.47 이다. */
  --mn-text-faint:     #6b7484;

  /* ── 바탕 ───────────────────────────────────── */
  --mn-bg:             #ffffff;
  --mn-bg-soft:        #f7f9fc;   /* 섹션 배경 — 흰 바탕과 번갈아 쓴다 */
  --mn-bg-deep:        #101a35;   /* 어두운 강조 구간 */
  --mn-device:         #0e1830;   /* 폰 목업의 기기 테두리 */
  --mn-border:         #e4e9f2;
  --mn-border-strong:  #d7dde8;

  /* ── 상태 ───────────────────────────────────── */
  --mn-good:           #0a7d33;
  --mn-warn:           #b7791f;
  --mn-bad:            #c62828;

  /* ── 모서리 ─────────────────────────────────── */
  /* 전부 둥글게 만들지 않는다(§25). 버튼은 눌리는 것이라 작게,
     카드는 담는 것이라 조금 크게, 큰 그림틀만 넉넉하게. */
  --mn-radius-sm:      8px;
  --mn-radius-md:      14px;
  --mn-radius-lg:      22px;
  --mn-radius-pill:    999px;

  /* ── 그림자 ─────────────────────────────────── */
  /* 강한 그림자는 쓰지 않는다(§26). 테두리 + 아주 옅은 그림자 조합. */
  --mn-shadow-sm:      0 1px 3px rgba(16, 24, 40, .06);
  --mn-shadow-md:      0 10px 28px rgba(16, 24, 40, .10);
  --mn-shadow-lg:      0 24px 60px rgba(16, 24, 40, .16);

  /* ── 크기 ───────────────────────────────────── */
  --mn-container:      1200px;
  --mn-gutter:         24px;
  --mn-gutter-mo:      18px;

  /* 섹션 사이 세로 여백. 모바일에서 같은 값을 쓰면 스크롤만 길어진다(§27). */
  --mn-section-y:      112px;
  --mn-section-y-mo:   64px;

  /* ── 글꼴 ───────────────────────────────────── */
  /* 이미 자체 호스팅 중인 것만 쓴다 — 외부 CDN 을 새로 들이지 않는다.
     제목은 Paperlogy(한글 굵은 획이 또렷하다), 본문은 Pretendard. */
  --mn-font-display: 'Paperlogy-8ExtraBold', 'Pretendard', sans-serif;
  --mn-font-body:    'Pretendard', sans-serif;

  /* 글자 크기 — 사다리를 정해 두고 그 밖으로 나가지 않는다.
     한국어 가독성 우선이라 본문을 작게 잡지 않는다(§8·§47). */
  --mn-fs-hero:      clamp(30px, 5.2vw, 54px);
  --mn-fs-h2:        clamp(24px, 3.4vw, 38px);
  --mn-fs-h3:        clamp(18px, 2.2vw, 22px);
  --mn-fs-lead:      clamp(15px, 1.5vw, 18px);
  --mn-fs-body:      16px;
  --mn-fs-sm:        14px;
  --mn-fs-xs:        12.5px;
}

@media (max-width: 768px) {
  :root {
    --mn-gutter: var(--mn-gutter-mo);
    --mn-section-y: var(--mn-section-y-mo);
  }
}