/* ============================================================
   메인 — Mname 2.0

   색·크기·간격은 tokens.css 에서만 읽는다. 공통 컴포넌트(버튼·카드·섹션)는
   mn.css 에 있고, 여기에는 **메인에만 있는 것**만 둔다.
   ============================================================ */

.home {
  /* 헤더 여백은 header-mn.css 가 body 에 한 번 준다 — 여기 또 주면 두 배가 된다. */
  font-family: var(--mn-font-body);
  color: var(--mn-text);
  background: var(--mn-bg);
}
.home h1, .home h2, .home h3 { font-family: var(--mn-font-display); }

/* 좁은 화면에서만 줄바꿈을 없앤다 — 넓은 화면의 의도적 줄바꿈은 살린다. */
@media (max-width: 620px) { .mo-hide { display: none; } }

/* ── 히어로 ────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, var(--mn-primary-soft) 0%, transparent 62%),
    var(--mn-bg);
}
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: 40px;
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(48px, 7vw, 92px);
}

.hero__tit {
  margin: 0;
  font-size: var(--mn-fs-hero);
  line-height: 1.22;
  letter-spacing: -.04em;
  color: var(--mn-navy);
  text-wrap: balance;
}
.hero__tit b { color: var(--mn-primary); font-weight: inherit; }

.hero__lead {
  margin: 22px 0 0;
  font-size: var(--mn-fs-lead);
  line-height: 1.75;
  color: var(--mn-text-muted);
}
.hero__lead b { color: var(--mn-navy); font-weight: 700; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 26px 0 0; padding: 0; list-style: none;
}
.hero__trust li {
  position: relative; padding-left: 20px;
  font-size: var(--mn-fs-sm); font-weight: 600; color: var(--mn-text-muted);
}
.hero__trust li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 13px; height: 7px; margin-top: -5px;
  border-left: 2px solid var(--mn-primary);
  border-bottom: 2px solid var(--mn-primary);
  transform: rotate(-45deg);
}

/* 폰 두 대를 겹쳐 깊이를 준다. 앞의 것이 주인공이라 뒤엣것은 살짝만 보인다. */
.hero__visual { position: relative; display: flex; justify-content: center; }
.hero__phone { display: block; height: auto; }
.hero__phone--front {
  position: relative; z-index: 2;
  width: min(100%, 560px);
  filter: drop-shadow(0 26px 50px rgba(16, 24, 40, .18));
}
.hero__phone--back {
  position: absolute; z-index: 1;
  right: -2%; bottom: -6%;
  width: min(38%, 220px);
  opacity: .96;
  filter: drop-shadow(0 18px 34px rgba(16, 24, 40, .16));
}

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; gap: 34px; }
  .hero__visual { order: 2; }
  .hero__phone--front { width: min(100%, 460px); }
  .hero__phone--back { display: none; }
  .hero__br { display: none; }
}

/* ── 핵심 가치 ─────────────────────────────────── */
.vstep {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.vstep__item { padding-top: 22px; border-top: 2px solid var(--mn-navy); }
.vstep__no {
  display: block; font-family: var(--mn-font-display);
  font-size: 13px; font-weight: 800; letter-spacing: .1em;
  color: var(--mn-primary);
}
.vstep__tit {
  margin: 12px 0 0; font-size: clamp(19px, 2.2vw, 23px); font-weight: 800;
  letter-spacing: -.03em; color: var(--mn-navy);
}
.vstep__desc {
  margin: 12px 0 0; font-size: 15px; line-height: 1.75; color: var(--mn-text-muted);
}
.vstep__desc b { color: var(--mn-navy); font-weight: 700; }
@media (max-width: 860px) { .vstep { grid-template-columns: 1fr; gap: 22px; } }

/* ── 프로필 미리보기 ───────────────────────────── */
.pv {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px; justify-items: center;
}
/* **폭은 figure 가 정한다.** 그리드가 `justify-items: center` 라 칸이 내용 크기로
   줄어드는데, 그 안에서 그림에 `width: 100%` 를 주면 자기 자신을 기준으로 삼아
   50px 로 무너진다(실제로 그랬다). 틀을 정하는 자리를 하나로 둔다. */
.pv__item { margin: 0; width: 100%; max-width: 300px; }
/* 그림 자체에 기기 테두리가 들어 있다 — 틀을 씌우지 않는다. */
.pv__shot {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 38px rgba(16, 24, 40, .16));
}
.pv__cap {
  margin-top: 16px; text-align: center;
  font-size: var(--mn-fs-sm); font-weight: 700; color: var(--mn-navy);
}
.pv__act { margin-top: 46px; }
@media (max-width: 900px) {
  .pv { grid-template-columns: 1fr; gap: 40px; }
  .pv__item { max-width: min(280px, 78vw); }
}

/* ── 기능 ──────────────────────────────────────── */
.feat__card { display: flex; flex-direction: column; }
.feat__tag {
  display: inline-block; margin-bottom: 12px;
  font-size: var(--mn-fs-xs); font-weight: 700; letter-spacing: -.01em;
  color: var(--mn-primary);
}
.feat__list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.feat__list li {
  position: relative; padding-left: 20px;
  font-size: 15px; line-height: 1.6; color: var(--mn-text);
}
.feat__list li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--mn-primary);
}
.feat__act { margin-top: 34px; }

/* ── 섹션 빌더 ─────────────────────────────────── */
.sb {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px; align-items: center;
}
.sb__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.sb__chip {
  cursor: pointer; font-family: inherit;
  /* 손가락으로 누르는 대상이라 높이를 확보한다. 7px 패딩만으로는 31px 이었다. */
  min-height: 40px; padding: 9px 15px;
  background: var(--mn-bg); border-color: var(--mn-border);
  color: var(--mn-text-muted);
  transition: background .14s, border-color .14s, color .14s;
}
.sb__chip:hover { border-color: var(--mn-primary); color: var(--mn-primary); }
.sb__chip.is-on {
  background: var(--mn-primary); border-color: var(--mn-primary); color: #fff;
}
.sb__chip:focus-visible { outline: 2px solid var(--mn-primary); outline-offset: 3px; }
.sb__note { margin: 18px 0 0; font-size: var(--mn-fs-sm); color: var(--mn-text-faint); }

.sb__stage { display: flex; justify-content: center; }
.sb__phone { width: 288px; }
.sb__scr { height: 520px; overflow: hidden; }

/* 목업 — 실제 화면을 흉내내되 내용은 넣지 않는다. */
.sbm { padding: 14px 12px 0; height: 100%; display: flex; flex-direction: column; }
.sbm__logo {
  width: 46%; height: 12px; margin: 0 auto 12px;
  border-radius: 3px; background: var(--mn-navy); opacity: .85;
}
.sbm__hero {
  position: relative; height: 96px; border-radius: 10px; margin-bottom: 12px;
  background: linear-gradient(120deg, var(--mn-primary) 0%, #4b7cff 100%);
  padding: 16px 14px; overflow: hidden;
}
.sbm__hero span {
  display: block; height: 7px; border-radius: 3px;
  background: rgba(255,255,255,.92); margin-bottom: 7px;
}
.sbm__hero span:first-child { width: 52%; }
.sbm__hero span:nth-child(2) { width: 72%; height: 10px; }
.sbm__hero i {
  position: absolute; left: 14px; bottom: 14px;
  width: 62px; height: 18px; border-radius: 5px; background: rgba(255,255,255,.92);
}
.sbm__slots { flex: 1 1 auto; overflow: hidden; }
.sbm__blk {
  padding: 11px 10px; margin-bottom: 8px;
  border: 1px solid var(--mn-border); border-radius: 9px; background: #fbfcfe;
}
.sbm__blk .l { display: block; height: 6px; border-radius: 3px; background: #dfe4ee; margin-bottom: 6px; }
.sbm__blk .l:last-child { margin-bottom: 0; }
.sbm__blk .l.w85 { width: 85%; } .sbm__blk .l.w70 { width: 70%; }
.sbm__blk .row { display: flex; gap: 6px; }
.sbm__blk .row i { flex: 1; height: 22px; border-radius: 5px; background: #e5eaf3; }
.sbm__blk .row i.tall { height: 40px; }
.sbm__blk .row--dot { justify-content: center; }
.sbm__blk .row--dot i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; }
.sbm__blk .box { display: block; height: 40px; border-radius: 6px; background: #e5eaf3; }
.sbm__blk .box--map { background: repeating-linear-gradient(45deg, #e5eaf3 0 6px, #edf1f7 6px 12px); }
.sbm__blk .box--play { background: #dbe2ee; }
.sbm__blk .btn { display: block; height: 20px; border-radius: 5px; background: var(--mn-primary); opacity: .85; }
.sbm__foot {
  display: flex; gap: 5px; padding: 9px 0 10px;
  border-top: 1px solid var(--mn-border); margin-top: auto;
}
.sbm__foot i { flex: 1; height: 15px; border-radius: 4px; background: #eaeef5; }

@media (max-width: 900px) {
  .sb { grid-template-columns: 1fr; gap: 34px; }
  .sb__stage { order: 2; }
}

/* ── 사용 방법 ─────────────────────────────────── */
.how {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.how__step {
  background: var(--mn-bg); border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-md); padding: 24px 22px;
  box-shadow: var(--mn-shadow-sm);
}
.how__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--mn-primary); color: #fff;
  font-family: var(--mn-font-display); font-size: 14px; font-weight: 800;
}
.how__tit {
  margin: 14px 0 0; font-size: 17px; font-weight: 800;
  letter-spacing: -.02em; color: var(--mn-navy);
}
.how__desc { margin: 9px 0 0; font-size: 14px; line-height: 1.65; color: var(--mn-text-muted); }
.how__act { margin-top: 40px; }
@media (max-width: 960px) { .how { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .how { grid-template-columns: 1fr; } }

/* ── 활용 사례 ─────────────────────────────────── */
.uc {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.uc__item {
  padding: 20px 18px; border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-md); background: var(--mn-bg);
  transition: border-color .14s, background .14s;
}
.uc__item:hover { border-color: var(--mn-primary); background: var(--mn-primary-soft); }
.uc__item span {
  display: block; font-size: 16px; font-weight: 800;
  letter-spacing: -.02em; color: var(--mn-navy);
}
.uc__item em {
  display: block; margin-top: 6px; font-style: normal;
  font-size: 13px; color: var(--mn-text-muted);
}
.uc__act { margin-top: 40px; }
@media (max-width: 960px) { .uc { grid-template-columns: repeat(2, 1fr); } }

/* ── 요금 ──────────────────────────────────────── */
/* 배지가 카드 위로 13px 튀어나온다. 한 줄로 쌓이는 폭에서는 그만큼 위 카드와
   가까워지므로 여백을 더 준다 — 안 그러면 배지가 위 카드에 얹힌 것처럼 보인다. */
.pr { row-gap: 34px; }
.pr__card { display: flex; flex-direction: column; position: relative; }
.pr__card--hot { border-color: var(--mn-primary); box-shadow: var(--mn-shadow-md); }
.pr__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: 5px 14px; border-radius: var(--mn-radius-pill);
  background: var(--mn-primary); color: #fff;
  font-size: var(--mn-fs-xs); font-weight: 700; white-space: nowrap;
}
.pr__name {
  margin: 0; font-size: 19px; font-weight: 800;
  letter-spacing: -.02em; color: var(--mn-navy);
}
.pr__sub { margin: 8px 0 0; font-size: var(--mn-fs-sm); color: var(--mn-text-muted); }
.pr__price {
  margin: 22px 0 0; display: flex; align-items: baseline; gap: 5px;
  font-family: var(--mn-font-display); color: var(--mn-navy);
}
.pr__price b { font-size: 34px; letter-spacing: -.04em; font-weight: 800; }
.pr__price span { font-size: 15px; color: var(--mn-text-muted); font-family: var(--mn-font-body); }
.pr__quote { font-size: 22px; font-weight: 800; }
.pr__year { margin: 8px 0 0; font-size: var(--mn-fs-xs); color: var(--mn-text-faint); }
.pr__trial {
  margin: 16px 0 0; padding: 9px 12px; border-radius: var(--mn-radius-sm);
  background: var(--mn-primary-soft); border: 1px solid var(--mn-primary-line);
  color: var(--mn-primary); font-size: var(--mn-fs-sm); font-weight: 700;
  text-align: center;
}
.pr__cta { margin-top: 20px; width: 100%; }
.pr__act { margin-top: 34px; }
.pr__empty { text-align: center; color: var(--mn-text-muted); font-size: 15px; }

/* ── 마지막 CTA ────────────────────────────────── */
.fcta__in { text-align: center; }
.fcta__tit {
  margin: 0; font-size: var(--mn-fs-h2); line-height: 1.32;
  letter-spacing: -.04em; color: #fff; text-wrap: balance;
}
.fcta__lead {
  margin: 18px 0 0; font-size: var(--mn-fs-lead);
  color: rgba(255, 255, 255, .78);
}
.fcta__act {
  margin: 34px 0 0; display: flex; flex-wrap: wrap;
  gap: 10px; justify-content: center;
}
@media (max-width: 520px) {
  .fcta__act { flex-direction: column; }
  .fcta__act .mn-btn { width: 100%; }
  .hero__cta { flex-direction: column; }
  .hero__cta .mn-btn { width: 100%; }
}