/* ============================================================================
   메가티콘 — 랜딩 전용 컴포넌트
   design-system.css 의 토큰만 쓴다. 여기서 새 색을 만들지 않는다.

   설계 원칙 — **구체적인 것만 설득한다.**
   이 화면이 파는 건 "AI로 쉽게"가 아니라 "무엇을 그릴지를 재서 정한다"이고,
   그건 숫자와 실물로만 증명된다. 그래서 이 파일의 주인공은 장식이 아니라
   ① 실제로 뽑힌 캐릭터(cast) ② 실측 숫자(kpi) ③ 재는 방법(axis) 셋이다.
   ========================================================================== */

/* ── 실물 캐릭터 ─────────────────────────────────────────────
   스톡 이미지를 쓰지 않는 이유: 이 제품의 산출물이 곧 증거다. 남의 사진은
   "그럴듯함"을 주지만 실물은 "진짜"를 준다. 카드 배경을 흰색으로 두는 것도
   같은 이유 — 마켓에 실제로 올라가는 모습 그대로 보여 준다. */
.cast {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}
.cast__tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--glass-brd);
  box-shadow: var(--sh-md);
  transform: translateZ(0);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.cast__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cast__tile:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--sh-lg); }

/* 증거 벽 — 스크롤하며 지나가는 띠 두 줄. 개수 자체가 메시지다. */
.wall { overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wall__row { display: flex; gap: 12px; width: max-content; animation: wall-slide 64s linear infinite; }
.wall__row--rev { animation-direction: reverse; margin-top: 12px; }
.wall__row:hover { animation-play-state: paused; }
.wall__cell {
  flex: 0 0 auto; width: 128px; height: 128px; border-radius: var(--r-md);
  overflow: hidden; background: #fff; border: 1px solid var(--glass-brd);
}
.wall__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes wall-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 실측 숫자 ───────────────────────────────────────────────
   숫자는 크게, 단위는 작게, 근거는 그 밑에. 근거 없는 큰 숫자는 광고문구가
   되고, 광고문구는 이 제품이 가장 피해야 하는 인상이다. */
.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.kpi__cell { background: var(--bg-2); padding: 22px 18px; text-align: center; }
.kpi__num { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.kpi__lbl { margin-top: 6px; font-size: 13px; color: var(--fg-dim); font-weight: 600; }
.kpi__why { margin-top: 3px; font-size: 11.5px; color: var(--faint); line-height: 1.5; }

/* ── 통증 대비 ───────────────────────────────────────────────
   왼쪽(지금)과 오른쪽(우리)을 **같은 크기**로 둔다. 우리 쪽만 크게 그리면
   비교가 아니라 자랑이 되고, 읽는 사람은 그 즉시 방어한다. */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vs-card { padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); }
.vs-card--good { border-color: rgba(108, 140, 255, .38); background: linear-gradient(180deg, rgba(108, 140, 255, .07), transparent 60%), var(--bg-2); }
.vs-card__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); }
.vs-card--good .vs-card__tag { border-color: transparent; background: var(--grad-brand); color: #0a0c12; }
.vs-card h3 { margin: 14px 0 10px; font-size: 20px; letter-spacing: -.01em; }
.vs-list { list-style: none; padding: 0; margin: 0; }
.vs-list li { display: flex; gap: 10px; padding: 9px 0; color: var(--fg-dim); font-size: 14.5px; line-height: 1.6; border-top: 1px solid var(--line-soft); }
.vs-list li:first-child { border-top: 0; }
.vs-list b { color: var(--fg); font-weight: 650; }
.vs-mark { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.vs-mark--bad { background: rgba(255, 92, 116, .14); color: #ff8b9c; }
.vs-mark--good { background: rgba(55, 214, 122, .14); color: var(--ok); }

/* ── 재는 방법(4축) ──────────────────────────────────────────
   "어떻게 아는데?"에 답하는 자리. 메커니즘을 열어 보이는 것이 신뢰를 만든다 —
   숨기면 마법처럼 보이고, 마법은 안 믿긴다. */
.axis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.axis__card { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-2); position: relative; overflow: hidden; }
.axis__card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--grad-brand); opacity: .8; }
.axis__no { font-size: 12px; font-weight: 800; color: var(--brand); letter-spacing: .08em; }
.axis__card h3 { margin: 8px 0 8px; font-size: 18px; }
.axis__card p { margin: 0; color: var(--fg-dim); font-size: 14.5px; line-height: 1.65; }
.axis__how { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--muted); }
.axis__how b { color: var(--brand-3); font-weight: 650; }

/* ── 3단계 ───────────────────────────────────────────────────
   사람이 하는 일만 적는다. 기계가 하는 일을 단계로 세면 "할 게 많다"로 읽힌다. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.step { position: relative; padding: 26px 22px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); }
.step__n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; background: var(--grad-brand); color: #0a0c12; }
.step h3 { margin: 14px 0 8px; font-size: 18px; }
.step p { margin: 0; color: var(--fg-dim); font-size: 14.5px; line-height: 1.65; }
.step__time { margin-top: 12px; font-size: 12.5px; color: var(--brand-3); font-weight: 650; }

/* ── 정직 구간 ───────────────────────────────────────────────
   불리한 사실을 먼저 말하는 자리. 팔려고 숨기면 가입 뒤에 반드시 들키고,
   그때 잃는 건 그 사람 하나가 아니라 그 사람이 말하는 모두다. */
.honest { border: 1px solid rgba(255, 204, 87, .3); background: linear-gradient(180deg, rgba(255, 204, 87, .06), transparent 55%), var(--bg-2); border-radius: var(--r-lg); padding: 28px; }
.honest__head { display: flex; align-items: center; gap: 10px; font-weight: 750; color: var(--warn); font-size: 14px; }
.policy { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; }
.policy th, .policy td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line-soft); }
.policy th { color: var(--muted); font-weight: 650; font-size: 12.5px; letter-spacing: .02em; }
.policy td { color: var(--fg-dim); }
.policy td b { color: var(--fg); }
.policy tr:last-child td { border-bottom: 0; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); overflow: hidden; }
.faq summary { cursor: pointer; padding: 18px 20px; font-weight: 650; font-size: 15.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-size: 20px; font-weight: 400; flex: 0 0 auto; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { color: var(--fg); }
.faq p { margin: 0; padding: 0 20px 20px; color: var(--fg-dim); font-size: 14.5px; line-height: 1.7; }
.faq p b { color: var(--fg); }

/* ── 마지막 CTA ─────────────────────────────────────────────
   버튼 옆에 **다음에 무슨 일이 일어나는지**를 적는다. 모르는 문 앞에서
   사람은 멈춘다 — 승인제라면 더더욱. */
.close { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(36px, 6vw, 68px) clamp(24px, 5vw, 56px); text-align: center; border: 1px solid var(--glass-brd); background: var(--grad-brand-soft), var(--bg-2); }
.close h2 { font-size: clamp(26px, 4.2vw, 44px); letter-spacing: -.025em; margin: 0 0 12px; }
.close p { color: var(--fg-dim); margin: 0 auto 26px; max-width: 60ch; line-height: 1.7; }
.close__next { margin-top: 22px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.close__next span { display: inline-flex; align-items: center; gap: 6px; }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .versus, .axis, .steps { grid-template-columns: 1fr; }
  .kpi { grid-template-columns: repeat(2, 1fr); }
  .cast { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .wall__cell { width: 96px; height: 96px; }
  .policy th:nth-child(3), .policy td:nth-child(3) { display: none; }
}

/* 움직임을 줄여 달라는 사람에게는 줄인다. 띠가 계속 흐르는 화면은
   어지럼을 유발할 수 있고, 그건 설득 이전의 문제다. */
@media (prefers-reduced-motion: reduce) {
  .wall__row { animation: none; }
  .cast__tile { transition: none; }
}