/* ============================================================
   마이네임 공통 컴포넌트 — 홈페이지·가입·대시보드가 같은 규격을 쓴다.

   **클래스 이름을 전부 `mn-` 로 시작한다.** 원본 CSS 에 `.btn` · `.card` ·
   `.container` 같은 흔한 이름이 이미 있어, 접두어 없이 만들면 어느 쪽이
   이기는지 화면을 열기 전에는 알 수 없다.

   값은 tokens.css 에서만 읽는다 — 여기에 색을 직접 적지 않는다.
   ============================================================ */

/* ── 뼈대 ──────────────────────────────────────── */
.mn-section {
  padding: var(--mn-section-y) 0;
  background: var(--mn-bg);
}
.mn-section--soft { background: var(--mn-bg-soft); }
.mn-section--deep { background: var(--mn-bg-deep); color: #fff; }
.mn-section--tight { padding: calc(var(--mn-section-y) * .62) 0; }

.mn-wrap {
  width: 100%;
  max-width: var(--mn-container);
  margin: 0 auto;
  padding: 0 var(--mn-gutter);
}

/* ── 섹션 머리 ─────────────────────────────────── */
.mn-head { max-width: 720px; margin: 0 0 clamp(32px, 4vw, 56px); }
.mn-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* 영문 라벨. 장식이 아니라 **그 섹션이 무엇에 대한 것인지**를 한 단어로 말한다. */
.mn-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  font-size: var(--mn-fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mn-primary);
}
.mn-h2 {
  margin: 0;
  font-family: var(--mn-font-display);
  font-size: var(--mn-fs-h2);
  line-height: 1.32;
  letter-spacing: -.03em;
  color: var(--mn-navy);
  text-wrap: balance;
}
.mn-lead {
  margin: 16px 0 0;
  font-size: var(--mn-fs-lead);
  line-height: 1.75;
  color: var(--mn-text-muted);
  text-wrap: pretty;
}
.mn-lead b, .mn-lead strong { color: var(--mn-navy); font-weight: 700; }

/* ── 버튼 4종 (§23) ────────────────────────────── */
.mn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--mn-radius-sm);
  font-family: var(--mn-font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.mn-btn:focus-visible { outline: 2px solid var(--mn-primary); outline-offset: 3px; }

.mn-btn--primary { background: var(--mn-primary); color: #fff; }
.mn-btn--primary:hover { background: var(--mn-primary-dark); color: #fff; }

.mn-btn--secondary {
  background: var(--mn-bg);
  border-color: var(--mn-border-strong);
  color: var(--mn-navy);
}
.mn-btn--secondary:hover { border-color: var(--mn-primary); color: var(--mn-primary); }

.mn-btn--ghost { background: transparent; color: var(--mn-navy); }
.mn-btn--ghost:hover { background: var(--mn-bg-soft); }

.mn-btn--text {
  /* 글자 링크지만 여전히 눌러야 하는 것이다. 손가락으로 닿는 높이를 남긴다. */
  height: auto; min-height: 40px; padding: 8px 4px; background: none;
  color: var(--mn-primary); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.mn-btn--text:hover { color: var(--mn-primary-dark); }

.mn-btn--sm { height: 44px; padding: 0 18px; font-size: 14px; }
.mn-btn--lg { height: 60px; padding: 0 34px; font-size: 17px; }
.mn-btn[disabled], .mn-btn--disabled {
  background: var(--mn-border-strong); border-color: transparent;
  color: #fff; cursor: default; pointer-events: none;
}

/* 어두운 바탕 위에서 */
.mn-section--deep .mn-btn--secondary {
  background: transparent; border-color: rgba(255,255,255,.32); color: #fff;
}
.mn-section--deep .mn-btn--secondary:hover {
  border-color: #fff; background: rgba(255,255,255,.08); color: #fff;
}

/* ── 카드 (§24·§26) ────────────────────────────── */
/* 모든 것을 카드에 넣지 않는다. 테두리 + 아주 옅은 그림자만. */
.mn-card {
  background: var(--mn-bg);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-md);
  box-shadow: var(--mn-shadow-sm);
  padding: 26px;
}
.mn-card--hover { transition: box-shadow .16s, border-color .16s, transform .16s; }
.mn-card--hover:hover {
  box-shadow: var(--mn-shadow-md);
  border-color: var(--mn-border-strong);
  transform: translateY(-2px);
}
.mn-card__title {
  margin: 0; font-size: var(--mn-fs-h3); font-weight: 800;
  letter-spacing: -.02em; color: var(--mn-navy);
}
.mn-card__desc {
  margin: 10px 0 0; font-size: var(--mn-fs-sm); line-height: 1.7;
  color: var(--mn-text-muted);
}

/* ── 격자 ──────────────────────────────────────── */
.mn-grid { display: grid; gap: 20px; }
.mn-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mn-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .mn-grid--3, .mn-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .mn-grid--2, .mn-grid--3, .mn-grid--4 { grid-template-columns: 1fr; }
}

/* ── 칩 ────────────────────────────────────────── */
.mn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--mn-radius-pill);
  background: var(--mn-primary-soft); border: 1px solid var(--mn-primary-line);
  font-size: var(--mn-fs-xs); font-weight: 700; color: var(--mn-primary);
  white-space: nowrap;
}

/* ── 폰 목업 ───────────────────────────────────── */
/* 명함은 스마트폰으로 열리는 물건이라, 서비스 화면은 폰 틀 안에 보여 준다(§15). */
.mn-phone {
  width: 300px;
  border-radius: 34px;
  padding: 9px;
  background: var(--mn-device);
  box-shadow: var(--mn-shadow-lg);
}
.mn-phone__scr {
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
}

/* ── 접근성 · 동작 ─────────────────────────────── */
.mn-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 나타나며 올라오는 정도만 쓴다(§28). */
.mn-reveal { opacity: 0; transform: translateY(14px); }
.mn-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .mn-reveal, .mn-reveal.is-in { opacity: 1; transform: none; transition: none; }
  .mn-card--hover:hover { transform: none; }
}